:root{--page-bg:#0b1218;--panel:#121b23;--panel-soft:#15212a;--line:#2a3945;--text:#f5f7fc;--muted:#acbad0;--lime:#c6ff68;--blue:#65d5ff;--amber:#ffbd61}

*{box-sizing:border-box}

html{background:var(--page-bg)}

body{margin:0;min-width:320px;color:var(--text);background:radial-gradient(ellipse 80% 45% at 60% -8%,#17242a 0%,transparent 65%),var(--page-bg);font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color-scheme:dark}

button,input,select{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.app-shell{display:grid;grid-template-columns:249px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;align-self:start;height:100vh;height:100dvh;min-height:0;overflow-y:auto;border-right:1px solid #1e2b33;background:linear-gradient(140deg,#101920,#111b23 75%,#0e171e);padding:24px 10px 26px 21px;display:flex;flex-direction:column}
.brand{height:97px;margin:0 10px 13px 21px;border-bottom:1px solid #24313a}
.brand-name{font-size:26px;line-height:1.2;font-weight:760;letter-spacing:-.9px;white-space:nowrap}
.brand-name span{color:var(--lime)}
.brand-tagline{margin-top:3px;color:#b5c2d5;font-size:15px;letter-spacing:.2px;line-height:1.18}
.sidebar-nav{padding-top:4px}
.sidebar-nav a{height:52px;padding:0 20px;display:flex;align-items:center;gap:18px;color:var(--lime);text-decoration:none;position:relative;border-radius:11px;background:linear-gradient(90deg,#27362d,#202f2b)}
.sidebar-nav a:before{content:"";position:absolute;left:-7px;width:6px;height:52px;background:var(--lime);border-radius:6px 0 0 6px}
.sidebar-nav svg{fill:var(--lime);stroke:var(--lime);width:24px;height:24px}
.sidebar-bottom{position:sticky;bottom:0;margin:auto 6px 0 17px;border:1px solid #30404c;border-radius:11px;padding:15px 14px 12px;background:linear-gradient(155deg,#141f29,#111a22);color:#bac8db;font-size:13px}
.sync-title{display:flex;justify-content:space-between;align-items:center}
.sync-title svg{width:23px;height:23px}
.sync-status{display:flex;align-items:center;gap:8px;margin:5px 0 12px;color:var(--lime)}
.status-dot{width:11px;height:11px;border-radius:50%;background:var(--lime)}
.sidebar-bottom p{margin:0 0 7px;font-size:12px}
.storage-meter{height:6px;border-radius:10px;background:#445767;overflow:hidden}
.storage-meter span{display:block;width:8%;height:100%;background:var(--lime);border-radius:10px}
.sidebar-note{margin-top:13px;font-size:12px}
.sync-button{width:100%;margin-top:12px;padding:8px 10px;border:1px solid #405461;border-radius:7px;background:#1b2a34;color:var(--lime);font:inherit;cursor:pointer}
.sync-button:hover{background:#263943}
.sync-button:disabled{opacity:.6;cursor:wait}

.workspace{min-width:0}
.topbar{height:81px;border-bottom:1px solid #27333b;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.search-box{height:46px;width:min(604px,58%);border:1px solid #3a4a59;border-radius:10px;background:linear-gradient(115deg,#1c2730,#1b252e);display:flex;align-items:center;gap:12px;padding:0 13px;color:#b7c9df;box-shadow:inset 0 1px #ffffff08}
.search-box svg{width:22px;height:22px}
.search-box input{width:100%;min-width:0;background:transparent;border:0;color:var(--text);outline:0}
.search-box input::placeholder{color:#b6c2d4}
.search-box kbd{white-space:nowrap;border:1px solid #455460;border-radius:7px;padding:2px 5px;color:#aebccd;font-size:13px;font-family:inherit}
.toolbar-right{display:flex;align-items:center;gap:12px}
.toolbar-button,.language-picker,.export-button{height:46px;border:1px solid #354451;border-radius:10px;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center;gap:12px;padding:0 15px;white-space:nowrap}
.toolbar-button:hover,.export-button:hover,.language-picker:hover{background:#1c2a33}
.toolbar-button svg:first-child{width:19px;height:19px}
.chevron{width:14px;height:14px}
.filter-wrap{position:relative}
.filter-menu{position:absolute;z-index:20;top:53px;right:0;width:220px;max-height:min(600px,70vh);overflow-y:auto;background:#202d37;border:1px solid #435461;border-radius:10px;box-shadow:0 14px 40px #0008;padding:6px}
.filter-menu .filter-heading{display:block;padding:10px 10px 4px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);margin-top:5px}
.filter-menu button{display:block;width:100%;padding:9px 10px;border:0;border-radius:6px;text-align:left;color:var(--text);background:transparent}
.filter-menu button:hover,.filter-menu button[aria-pressed=true]{background:#34463d;color:var(--lime)}
.language-picker{min-width:168px;position:relative}
.language-picker svg{width:18px;height:18px;color:#9fb0c3}
.language-picker select{appearance:none;border:0;outline:0;background:transparent;color:var(--text);width:49px;cursor:pointer}
.language-picker select option{background:#17232c}

.main-content{padding:22px 22px 30px}
.heading-row{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:1px 12px 0 14px;margin-bottom:18px}
.heading-row h1{font-size:39px;line-height:1.15;letter-spacing:-1.1px;font-weight:760;margin:0}
.heading-row h1 span{color:var(--lime)}
.heading-row p{margin:2px 0 0;font-size:18px;color:#b8c8de;letter-spacing:.15px}
.export-button{height:48px;margin-top:8px;font-size:15px}
.preview-notice{margin:-6px 12px 12px;padding:8px 12px;border:1px solid #455039;border-radius:8px;background:#1c291f;color:#cbd7c1;font-size:12px}
.preview-notice span{color:var(--lime);font-weight:700;margin-right:9px;text-transform:uppercase;letter-spacing:.7px}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:17px}
.stat-card{min-height:107px;display:flex;align-items:center;gap:29px;padding:16px;border:1px solid #34434f;border-radius:10px;background:linear-gradient(130deg,#141e26,#151f29)}
.stat-icon{width:64px;height:66px;border-radius:10px;display:grid;place-items:center;flex:none}
.stat-icon svg{width:29px;height:29px}
.stat-icon.amber,.stat-icon.gold{background:#3c3b35;color:#ffc263}
.stat-icon.cyan{background:#213b49;color:#50d4ff}
.stat-icon.violet{background:#343045;color:#d18dff}
.stat-card span{color:#bfcadd;display:block;white-space:nowrap}
.stat-card strong{display:block;font-size:27px;line-height:1.12;margin-top:2px}
.stat-card small{display:block;color:#aebdd0;font-size:14px;white-space:nowrap}
.stat-card small.green{color:#aeeb72}
.activity-card{gap:21px}
.mini-bars{height:67px;display:flex;align-items:end;gap:9px;margin-left:auto;min-width:65px}
.mini-bars i{display:block;width:5px;border-radius:8px;background:linear-gradient(#c5ff66,#4deba1);height:34%}
.mini-bars i:nth-child(2){height:58%}
.mini-bars i:nth-child(3){height:88%}
.mini-bars i:nth-child(4){height:43%}
.mini-bars i:nth-child(5){height:65%}

.content-grid{display:grid;grid-template-columns:minmax(0,1.76fr) minmax(330px,1fr);align-items:start;gap:16px}
.list-panel,.detail-panel{border:1px solid #33434e;border-radius:11px;background:linear-gradient(140deg,#131d26,#101a22);min-width:0}
.list-panel{overflow:hidden}
.list-heading{min-height:55px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 11px 0 15px;border-bottom:1px solid #33414c}
.list-heading h2{font-size:17px;letter-spacing:-.15px;white-space:nowrap;margin:0;font-weight:650}
.list-heading h2 span{color:#b1bfd5;font-weight:400}
.list-controls{display:flex;align-items:center;gap:17px}
.list-controls select{height:38px;max-width:148px;border-radius:9px;border:1px solid #394a58;color:var(--text);background:#15212b;padding:0 12px;outline:0}
.view-switch{display:flex;border:1px solid #405365;border-radius:9px;padding:3px}
.view-switch button{display:grid;place-items:center;border:0;width:33px;height:29px;background:transparent;color:#bfd1e5;border-radius:6px}
.view-switch button.is-active{background:#26352e;color:#eaffd0;outline:1px solid #98c86b}
.view-switch svg{width:20px;height:20px}
.entries{padding:0 4px 4px}
.entry{width:100%;min-height:174px;margin:0 0 6px;padding:12px;display:grid;grid-template-columns:minmax(170px,224px) minmax(0,1fr);gap:20px;text-align:left;color:var(--text);background:linear-gradient(130deg,#16212b,#15232d);border:1px solid #2d404d;border-radius:10px;position:relative;cursor:pointer}
.entry:first-child{margin-top:0}
.entry.is-selected{border-color:#a9db5a;box-shadow:inset 0 0 0 1px #8cc64555;background:linear-gradient(130deg,#18252e,#1a2a31)}
.entry:hover{background:#1c2d36}
.entry-media{height:146px;border-radius:8px;position:relative;overflow:hidden;background:#1b2a33}
.entry-media img{display:block;width:100%;height:100%;object-fit:cover}
.entry-media.no-image,.detail-video.no-image{background:radial-gradient(circle at 25% 20%,#46616a 0%,transparent 42%),linear-gradient(135deg,#1e3440,#0d171f)}
.entry-media:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#0009)}
.entry-cue{position:absolute;z-index:1;left:9%;right:9%;bottom:32px;color:#f5f6fb;text-align:center;font-size:13px;line-height:1.28;font-weight:650;text-shadow:0 1px 4px #000;padding:3px;background:#03070bd6;border-radius:4px;max-height:45px;overflow:hidden}
.entry-cue mark,.video-cue mark{background:var(--lime);color:#142014;border-radius:3px;padding:1px 3px;text-shadow:none}
.entry-time{position:absolute;z-index:2;left:6px;bottom:6px;padding:4px 8px;background:#0d171de8;border-radius:6px;font-size:12px}
.entry-copy{min-width:0;padding-right:21px}
.entry-title-row{display:flex;align-items:center;gap:16px;min-width:0}
.entry-title{font-size:21px;font-weight:710;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.type-pill{white-space:nowrap;border:1px solid #c78d35;border-radius:20px;padding:2px 11px;color:#ffca69;font-size:12px}
.type-pill.word{color:#bbc9da;border-color:#647587}
.entry-actions{margin-left:auto;display:flex;gap:10px;align-items:center;color:#ffbd61}
.entry-actions svg{width:20px;height:20px}
.icon-action{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;padding:4px;border:0;border-radius:6px;background:transparent;color:inherit}
.icon-action:hover{background:#ffffff12}
.icon-action:disabled{opacity:.5;cursor:wait}
.saved-bookmark svg{fill:var(--amber);stroke:var(--amber)}
.sound-action[aria-pressed=true],.subtitle-audio[aria-pressed=true]{color:var(--lime)}
.pronunciation{display:flex;align-items:center;gap:7px;color:#bbc8db;font-size:14px;margin-top:4px}
.pronunciation svg{width:19px;height:19px;fill:#bbccdf;stroke:#bbccdf}
.sound-action svg{fill:currentColor;stroke:currentColor}
.entry-translation{font-size:16px;font-weight:660;margin-top:8px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.entry-sentence{margin-top:4px;color:#b8c8dd;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:14px}
.entry-sentence mark,.detail-example mark{background:#123d50;color:#7adfff;border-radius:3px;padding:0 2px}
.entry-meta{display:flex;align-items:center;gap:13px;color:#9eb1c9;font-size:12px;margin-top:9px;white-space:nowrap;min-width:0}
.entry-meta .source-title{overflow:hidden;text-overflow:ellipsis}
.entry-meta svg{width:14px;height:14px}
.entry-meta .date{margin-left:auto;display:flex;gap:6px;align-items:center}
.entries.grid-view{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px}
.grid-view .entry{display:block;min-height:0;margin:0}
.grid-view .entry-media{height:150px;margin-bottom:12px}
.grid-view .entry-title-row{gap:8px}
.grid-view .entry-title{font-size:17px}
.grid-view .entry-actions{display:flex}
.grid-view .entry-meta .date{display:none}
.grid-view .entry-translation{font-size:14px}
.grid-view .entry-sentence{white-space:normal;line-height:1.3;min-height:36px}
.empty-state{padding:50px 15px;text-align:center;color:#afc0d3}

.detail-panel{position:sticky;top:16px;max-height:calc(100dvh - 32px);min-height:min(750px,calc(100dvh - 32px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:15px 18px 21px}
.detail-video{height:197px;position:relative;border-radius:8px;overflow:hidden;background:#1b2b37}
.detail-video img{height:100%;width:100%;object-fit:cover}
.detail-video:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#000a)}
.video-cue{position:absolute;z-index:2;left:7%;right:7%;bottom:49px;text-align:center;color:white;font-size:15px;font-weight:650;text-shadow:0 1px 5px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-cue span{background:#071016db;padding:5px;border-radius:4px}
.video-controls{height:41px;background:#080f14e8;position:absolute;z-index:3;bottom:0;left:0;right:0;display:flex;align-items:center;gap:9px;padding:0 10px}
.video-controls svg{width:17px;height:17px;fill:#dce5ef}
.video-controls small{white-space:nowrap;color:#cad4de;font-size:11px}
.audio-label{flex:1;color:var(--muted);font-size:11px}
.video-controls .icon-action svg{width:17px;height:17px}
.progress{height:4px;flex:1;background:#394c57;border-radius:10px;position:relative}
.progress span{display:block;height:100%;width:27%;background:var(--lime);border-radius:10px}
.progress span:after{content:"";width:10px;height:10px;background:white;border-radius:50%;position:absolute;left:27%;top:-3px}
.cc-badge{background:#f5f7fb;color:#0d1922;font-weight:900;padding:1px 2px;border-radius:3px;font-size:11px}
.detail-word-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.detail-word-row h2{font-size:24px;line-height:1.15;letter-spacing:-.3px;margin:0}
.detail-word-row h2 .accent{background:transparent;color:var(--lime);padding:0}
.detail-bookmark{color:#ffbf69;fill:#ffbf69;stroke:#ffbf69}
.detail-pronunciation{display:flex;align-items:center;gap:9px;color:#bbc8d9;margin-top:8px;font-size:14px}
.detail-pronunciation svg{width:19px;height:19px;fill:#c2d1e8;stroke:#c2d1e8}
.detail-pronunciation .type-pill{margin-left:11px}
.detail-translation{font-size:17px;font-weight:660;margin:11px 0 18px}
.detail-example{border:1px solid #344754;border-radius:9px;padding:14px;background:#18242e;color:#dce6f1}
.detail-example small{color:#b5c3d3}
.detail-example p{margin:8px 0 0;font-size:15px}
.detail-example p:last-child{color:#a9bad0;margin-top:4px}
.detail-label{color:#b8c8dc;font-size:13px;margin:15px 0 8px}
.source-row{display:flex;align-items:center;gap:10px;min-width:0;color:#dfe7f2;text-decoration:none;border-radius:7px}
a.source-row:hover{color:var(--lime);background:#ffffff08}
.source-row img{width:83px;height:47px;object-fit:cover;border-radius:7px}
.source-row div{min-width:0;flex:1}
.source-row strong,.source-row span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.source-row span{color:#aebdd0}
.source-row .source-placeholder{width:83px;height:47px;flex:none;display:grid;place-items:center;border-radius:7px;background:#243945;color:#a6c3d0}
.source-row time{font-size:12px;color:#bac9df}
.source-row svg{width:17px;height:17px}
.detail-actions{margin-top:24px}
.detail-actions button{width:100%;height:48px;border:1px solid #455766;border-radius:9px;background:#17252e;color:#f3f7fa;display:flex;align-items:center;justify-content:center;gap:11px;white-space:nowrap}
.detail-actions button.danger-action{color:#ff9292;border-color:#8c414a;background:#431e29}
.detail-actions button.danger-action:hover{background:#5b2531;border-color:#ef6b7b}
.detail-actions button:disabled{opacity:.5;cursor:wait}
.detail-pronunciation .sound-action svg{fill:currentColor;stroke:currentColor}
.detail-actions svg{width:20px;height:20px}
.collection-box{height:43px;border:1px solid #45586b;border-radius:8px;display:flex;align-items:center;gap:12px;padding:0 13px;color:#d5e0ec}
.collection-box svg:last-child{margin-left:auto;width:16px;height:16px}
.detail-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:12px}
.detail-actions button,.detail-actions a{width:100%;height:48px;border:1px solid #455766;border-radius:9px;background:#17252e;color:#f3f7fa;display:flex;align-items:center;justify-content:center;gap:11px;white-space:nowrap;text-decoration:none}
.detail-actions button.primary{background:var(--lime);color:#101911;border:0;font-weight:650}
.detail-actions button.primary:hover{background:#d7ff94}
.detail-actions button.danger-action{grid-column:1/-1;color:#ff9292;border-color:#8c414a;background:#431e29}
.detail-actions a:hover{background:#25353f}
.review-dialog{position:relative;width:min(450px,calc(100vw - 32px));background:#17242d;color:#f7faff;border:1px solid #4b5f6b;border-radius:15px;padding:30px;box-shadow:0 20px 80px #000a}
.review-dialog::backdrop{background:#000b}
.dialog-close{position:absolute;top:16px;right:16px;background:none;border:0;color:#b9c9db}
.review-eyebrow{color:var(--lime);font-size:12px;text-transform:uppercase;letter-spacing:1.5px}
.review-dialog h2{font-size:30px;margin:12px 0}
.review-dialog p{color:#b9cadb}
.review-answer{margin:24px 0;font-size:19px;font-weight:650;color:var(--lime)}
.review-reveal{width:100%;background:var(--lime);color:#122015;border:0;border-radius:9px;padding:12px;font-weight:650}
.detail-empty{padding:35px 15px;color:#bdc9d9;text-align:center}
.toast{position:fixed;right:22px;bottom:20px;z-index:50;background:#2c3c33;color:#eaffd4;border:1px solid #8fc65b;border-radius:9px;padding:10px 14px;box-shadow:0 12px 30px #0007;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s}
.toast.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:1270px){.stat-card{gap:13px}
.activity-card .mini-bars{display:none}
.entry{grid-template-columns:190px minmax(0,1fr);gap:14px}
.entry-meta{gap:7px}
.content-grid{grid-template-columns:minmax(0,1.5fr) minmax(325px,1fr)}
}

@media(max-width:1060px){.app-shell{grid-template-columns:79px minmax(0,1fr)}
.sidebar{padding:20px 10px}
.brand{height:95px;margin:0 0 15px;text-align:center}
.brand-name{font-size:0}
.brand-name span{font-size:25px}
.brand-tagline,.sidebar-nav span,.sidebar-bottom{display:none}
.sidebar-nav a{justify-content:center;padding:0}
.sidebar-nav a:before{left:-10px}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.content-grid{grid-template-columns:minmax(0,1fr)}
.detail-panel{position:static;max-height:none;min-height:0;max-width:650px;overflow:visible}
.search-box{width:min(604px,50%)}
.heading-row h1{font-size:35px}
}

@media(max-width:700px){.app-shell{display:block}
.sidebar{position:relative;height:57px;min-height:0;overflow:visible;padding:8px 16px;flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid #25343e}
.brand{height:auto;margin:0;border:0}
.brand-name{font-size:20px}
.brand-name span{font-size:20px}
.sidebar-nav{padding:0}
.sidebar-nav a{height:39px;padding:0 12px}
.sidebar-nav a:before{display:none}
.sidebar-nav span{display:inline;font-size:12px}
.sidebar-nav svg{width:17px;height:17px}
.topbar{height:auto;min-height:62px;padding:9px 14px;gap:8px}
.search-box{width:100%;height:42px}
.search-box kbd{display:none}
.toolbar-right{gap:7px}
.toolbar-button{width:42px;height:42px;padding:0;font-size:0;gap:0}
.toolbar-button svg.chevron{display:none}
.language-picker{min-width:87px;height:42px;padding:0 7px;gap:4px}
.language-picker svg{width:13px}
.language-picker select{width:26px}
.main-content{padding:19px 13px}
.heading-row{padding:0;margin-bottom:17px}
.heading-row h1{font-size:30px}
.heading-row p{font-size:13px}
.export-button{padding:0 10px;font-size:0;height:39px}
.export-button svg.chevron{display:none}
.stats{gap:8px;margin-bottom:12px}
.stat-card{min-height:85px;padding:10px;gap:10px}
.stat-icon{width:45px;height:47px}
.stat-icon svg{width:22px;height:22px}
.stat-card span,.stat-card small{font-size:11px}
.stat-card strong{font-size:22px}
.list-heading h2{font-size:14px}
.list-controls{gap:5px}
.list-controls select{max-width:115px;font-size:11px;padding:0 4px}
.view-switch{display:none}
.entry{grid-template-columns:115px minmax(0,1fr);gap:10px;min-height:125px;padding:8px}
.entry-media{height:107px}
.entry-cue{display:none}
.entry-title{font-size:17px}
.entry-title-row{gap:6px}
.entry-actions,.entry-meta .date,.entry-meta .source-title,.pronunciation{display:none}
.entry-translation{font-size:13px;margin-top:5px}
.entry-sentence{font-size:12px;white-space:normal;line-height:1.25;max-height:30px;overflow:hidden}
.entry-meta{margin-top:6px}
.type-pill{font-size:10px;padding:1px 6px}
.detail-panel{padding:12px}
.preview-notice{margin:0 0 11px}
.detail-video{height:230px}
}