@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&family=Syne:wght@700;800&display=swap');

:root {
  --bg:        #f5f4f1;
  --bg2:       #eeecea;
  --surface:   #ffffff;
  --surface2:  #f8f7f5;
  --border:    #dddbd7;
  --border2:   #c8c5bf;
  --accent:    #1a1a1a;
  --accent2:   #e63c00;
  --blue:      #0052cc;
  --green:     #007a3d;
  --text:      #111111;
  --text2:     #5a5752;
  --text3:     #9a9590;
  --font-h:    'Syne', sans-serif;
  --font-b:    'DM Sans', sans-serif;
  --font-m:    'DM Mono', monospace;
  --r:         6px;
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { background:var(--bg); color:var(--text); font-family:var(--font-b); font-size:15px; line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

.screen { display:none; min-height:100vh; }
.screen.active { display:flex; flex-direction:column; }
.hidden { display:none !important; }

/* LOGIN — split layout */
#screen-login, #screen-code { flex-direction:row; min-height:100vh; }

.login-visual { flex:1; position:relative; overflow:hidden; background:#0a0a0a; min-height:100vh; }
.login-visual::before {
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(230,60,0,.15) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(255,255,255,.02) 40px, rgba(255,255,255,.02) 41px),
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255,255,255,.02) 40px, rgba(255,255,255,.02) 41px);
}
.login-visual-content {
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end; padding:48px;
}
.login-visual-eyebrow {
  font-family:var(--font-m); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:2px; color:var(--accent2);
  margin-bottom:16px;
}
.login-visual-title {
  font-family:var(--font-h); font-size:52px; font-weight:800;
  color:#fff; line-height:1; margin-bottom:16px; letter-spacing:-1px;
}
.login-visual-title span { color:var(--accent2); }
.login-visual-sub { font-size:14px; color:rgba(255,255,255,.5); max-width:340px; line-height:1.7; }
.login-visual-tags { display:flex; gap:8px; margin-top:24px; flex-wrap:wrap; }
.login-visual-tag {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:4px; padding:4px 12px; font-size:11px; font-weight:600;
  color:rgba(255,255,255,.6); font-family:var(--font-m); text-transform:uppercase; letter-spacing:.5px;
}

.login-form-side {
  width:460px; min-width:460px; background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  padding:60px 48px; border-left:1px solid var(--border);
}
.login-form-inner { width:100%; max-width:340px; }

.login-brand { display:flex; align-items:center; gap:10px; margin-bottom:52px; }
.login-brand-icon { width:34px; height:34px; background:var(--accent); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.login-brand-text { font-family:var(--font-h); font-size:17px; font-weight:800; letter-spacing:-.3px; color:var(--text); }
.login-brand-text span { color:var(--accent2); }

.login-title { font-family:var(--font-h); font-size:28px; font-weight:800; color:var(--text); margin-bottom:6px; letter-spacing:-.5px; }
.login-sub { font-size:14px; color:var(--text2); margin-bottom:32px; line-height:1.5; }

.login-error { background:#fff5f3; border:1px solid #ffc4b8; border-radius:var(--r); padding:10px 14px; font-size:13px; color:#c0392b; margin-bottom:16px; }

.field { margin-bottom:18px; }
.field label { display:block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; color:var(--text3); margin-bottom:8px; font-family:var(--font-m); }
.field input { width:100%; background:var(--surface2); border:1.5px solid var(--border); border-radius:var(--r); padding:12px 14px; color:var(--text); font-family:var(--font-b); font-size:15px; outline:none; transition:border-color .15s; }
.field input:focus { border-color:var(--accent); background:var(--surface); }
.field input::placeholder { color:var(--text3); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:var(--r); font-family:var(--font-b); font-weight:600; cursor:pointer; transition:all .15s; }
.btn:hover { opacity:.88; }
.btn:active { transform:scale(.98); }
.btn-primary { width:100%; background:var(--accent); color:#fff; padding:13px; font-size:15px; margin-top:4px; }
.login-hint { text-align:center; font-size:12px; color:var(--text3); margin-top:20px; font-family:var(--font-m); }

@media (max-width:800px) {
  #screen-login, #screen-code { flex-direction:column; }
  .login-visual { min-height:200px; flex:none; }
  .login-form-side { width:100%; min-width:0; padding:32px 24px; }
  .login-visual-title { font-size:32px; }
}

/* HEADER */
.header { background:var(--surface); border-bottom:1.5px solid var(--border); height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:200; flex-shrink:0; }
.header-brand { font-family:var(--font-h); font-size:17px; font-weight:800; letter-spacing:-.3px; color:var(--text); cursor:pointer; }
.header-brand span { color:var(--accent2); }
.header-left { display:flex; align-items:center; gap:16px; }
.header-sep { width:1px; height:16px; background:var(--border); }
.header-section { font-size:12px; color:var(--text2); font-family:var(--font-m); }
.header-right { display:flex; align-items:center; gap:12px; }
.header-progress { background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:4px 12px; font-size:11px; font-weight:600; color:var(--text2); font-family:var(--font-m); }
.header-user { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text2); }
.user-ava { width:30px; height:30px; background:var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0; font-family:var(--font-m); }
.btn-logout { background:transparent; border:1px solid var(--border); border-radius:var(--r); padding:6px 14px; font-size:12px; font-weight:600; color:var(--text2); cursor:pointer; font-family:var(--font-b); transition:all .15s; }
.btn-logout:hover { border-color:var(--accent); color:var(--accent); }

/* CATALOG */
#screen-catalog { background:var(--bg); }
.catalog-body { flex:1; padding:48px 40px; max-width:1100px; width:100%; margin:0 auto; }
.catalog-hero h1 { font-family:var(--font-h); font-size:48px; font-weight:800; letter-spacing:-1px; line-height:1.1; color:var(--text); margin-bottom:12px; }
.catalog-hero h1 span { color:var(--accent2); }
.courses-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; }
.course-card { background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:28px; cursor:pointer; transition:all .2s; position:relative; }
.course-card:hover { border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-2px); }
.card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.card-icon { font-size:24px; }
.card-level { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:3px 10px; border-radius:20px; background:var(--bg2); color:var(--text2); border:1px solid var(--border); font-family:var(--font-m); }
.card-title { font-family:var(--font-h); font-size:20px; font-weight:800; color:var(--text); letter-spacing:-.3px; margin-bottom:4px; line-height:1.2; }
.card-subtitle { font-size:11px; color:var(--accent2); font-weight:600; margin-bottom:10px; font-family:var(--font-m); text-transform:uppercase; letter-spacing:.5px; }
.card-desc { font-size:13px; color:var(--text2); line-height:1.6; margin-bottom:20px; }
.card-meta { display:flex; gap:20px; padding-top:16px; border-top:1px solid var(--border); }
.card-meta-item { display:flex; flex-direction:column; gap:1px; }
.card-meta-val { font-family:var(--font-h); font-size:18px; font-weight:700; color:var(--text); }
.card-meta-lbl { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; font-family:var(--font-m); }
.course-card.locked { opacity:.65; }
.course-card.locked:hover { transform:none; border-color:var(--border); box-shadow:none; }
.btn-request { display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff; border:none; border-radius:var(--r); padding:10px 18px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font-b); transition:all .15s; margin-top:14px; }
.btn-request:hover { opacity:.85; }
.btn-request.requested { background:var(--bg2); color:var(--text3); cursor:default; border:1px solid var(--border); }

/* PLAYER */
.player-layout { flex:1; display:flex; overflow:hidden; height:calc(100vh - 56px); }
.player-sidebar { width:300px; min-width:300px; background:var(--surface); border-right:1.5px solid var(--border); overflow-y:auto; display:flex; flex-direction:column; }
.sidebar-course-title { padding:18px 18px 12px; border-bottom:1px solid var(--border); }
.sct-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--text3); margin-bottom:3px; font-family:var(--font-m); }
.sct-name { font-family:var(--font-h); font-size:15px; font-weight:800; color:var(--text); }
.sidebar-progress-bar { height:2px; background:var(--bg2); margin:0 18px 14px; }
.sidebar-progress-fill { height:100%; background:var(--green); border-radius:1px; transition:width .4s; }
.sidebar-modules { padding:0 8px 20px; flex:1; }
.mod { margin-bottom:3px; }
.mod-header { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:6px; cursor:pointer; user-select:none; transition:background .15s; }
.mod-header:hover { background:var(--bg2); }
.mod-num { font-size:10px; font-weight:600; color:var(--text2); background:var(--bg2); border:1px solid var(--border); border-radius:4px; padding:2px 6px; font-family:var(--font-m); }
.mod-title { flex:1; font-size:13px; font-weight:600; color:var(--text); }
.mod-arrow { font-size:8px; color:var(--text3); transition:transform .2s; }
.mod-header.open .mod-arrow { transform:rotate(90deg); }
.mod-lessons { display:none; padding:2px 0 6px; }
.mod-lessons.open { display:block; }
.lesson-row { display:flex; align-items:center; gap:8px; padding:8px 10px 8px 26px; border-radius:6px; cursor:pointer; transition:background .15s; margin:1px 0; }
.lesson-row:hover { background:var(--bg2); }
.lesson-row.active { background:var(--bg2); border-left:2px solid var(--accent); padding-left:24px; }
.l-check { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:8px; flex-shrink:0; transition:all .2s; }
.l-check.done { background:var(--green); border-color:var(--green); color:#fff; font-weight:700; }
.l-check.current { border-color:var(--accent); }
.l-title { flex:1; font-size:12px; color:var(--text2); line-height:1.3; }
.lesson-row.active .l-title { color:var(--text); font-weight:500; }
.l-dur { font-size:11px; color:var(--text3); flex-shrink:0; font-family:var(--font-m); }
.player-main { flex:1; overflow-y:auto; padding:28px 32px; display:flex; flex-direction:column; gap:16px; }
.video-wrap { background:#000; border-radius:8px; overflow:hidden; aspect-ratio:16/9; width:100%; }
.video-wrap iframe { width:100%; height:100%; border:none; display:block; }
.video-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#111; min-height:280px; }
.vp-icon { width:60px; height:60px; background:var(--accent2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; transition:transform .2s; color:#fff; }
.vp-icon:hover { transform:scale(1.08); }
.vp-text { font-size:14px; color:rgba(255,255,255,.5); }
.vp-hint { font-size:12px; color:rgba(255,255,255,.3); font-family:var(--font-m); }
.lesson-info { background:var(--surface); border:1.5px solid var(--border); border-radius:8px; padding:22px 26px; }
.li-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:10px; }
.li-title { font-family:var(--font-h); font-size:22px; font-weight:800; color:var(--text); letter-spacing:-.3px; }
.li-tag { background:var(--bg2); border:1px solid var(--border); font-size:10px; font-weight:600; padding:3px 10px; border-radius:20px; white-space:nowrap; text-transform:uppercase; letter-spacing:.5px; color:var(--text2); flex-shrink:0; font-family:var(--font-m); }
.li-desc { font-size:14px; color:var(--text2); line-height:1.7; margin-bottom:18px; }
.li-actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn-done { background:var(--green); color:#fff; border:none; border-radius:var(--r); padding:9px 20px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font-b); transition:opacity .15s; }
.btn-done:hover { opacity:.85; }
.btn-undone { background:var(--bg2); border:1.5px solid var(--border); color:var(--text2); border-radius:var(--r); padding:9px 20px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font-b); transition:all .15s; }
.btn-undone:hover { border-color:var(--accent); }
.btn-next { background:transparent; border:1.5px solid var(--accent); color:var(--accent); border-radius:var(--r); padding:9px 20px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font-b); transition:all .15s; margin-left:auto; }
.btn-next:hover { background:var(--accent); color:#fff; }

/* ADMIN */
#screen-admin { background:var(--bg); }
.admin-tabs { display:flex; border-bottom:1.5px solid var(--border); background:var(--surface); flex-shrink:0; }
.admin-tab { padding:12px 22px; font-size:13px; font-weight:600; color:var(--text2); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; }
.admin-tab:hover { color:var(--text); }
.admin-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-content { display:none; }
.tab-content.active { display:flex; flex-direction:column; height:calc(100vh - 56px - 45px); overflow:hidden; }
.admin-body { padding:32px 40px; overflow-y:auto; max-width:900px; margin:0 auto; width:100%; }
.admin-title { font-family:var(--font-h); font-size:28px; font-weight:800; margin-bottom:24px; color:var(--text); letter-spacing:-.5px; }
.admin-section { background:var(--surface); border:1.5px solid var(--border); border-radius:8px; padding:22px 24px; margin-bottom:16px; }
.admin-section h3 { font-family:var(--font-h); font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; margin-bottom:16px; color:var(--text); }
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th { text-align:left; padding:8px 12px; font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--text3); border-bottom:1px solid var(--border); font-family:var(--font-m); }
.admin-table td { padding:12px; border-bottom:1px solid var(--bg2); color:var(--text); vertical-align:middle; }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table tr:hover td { background:var(--bg2); }
.user-courses-pill { background:var(--bg2); border:1px solid var(--border); border-radius:4px; padding:2px 8px; font-size:11px; font-weight:600; color:var(--text2); display:inline-block; margin:2px; font-family:var(--font-m); }
.admin-form { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; align-items:end; margin-top:16px; }
.admin-form .field { margin:0; }
.btn-add { background:var(--accent); color:#fff; border:none; border-radius:var(--r); padding:12px 20px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font-b); height:44px; white-space:nowrap; transition:opacity .15s; }
.btn-add:hover { opacity:.85; }
.btn-del { background:transparent; border:1px solid #ffc4b8; color:#c0392b; padding:5px 12px; border-radius:var(--r); font-size:12px; cursor:pointer; font-family:var(--font-b); transition:all .15s; }
.btn-del:hover { background:#fff5f3; }
.url-input { width:100%; background:var(--surface2); border:1.5px solid var(--border); border-radius:var(--r); padding:10px 12px; color:var(--text); font-size:13px; font-family:var(--font-b); outline:none; transition:border-color .15s; }
.url-input:focus { border-color:var(--accent); }
.url-input.has-url { border-color:#a8d5b5; }

/* ADMIN TREE */
.admin-v2 { display:flex; height:calc(100vh - 56px - 45px); overflow:hidden; }
.admin-left { width:360px; min-width:360px; background:var(--surface); border-right:1.5px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
.admin-left-header { padding:16px 16px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.admin-left-title { font-family:var(--font-h); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--text3); margin-bottom:10px; }
.search-wrap { position:relative; }
.search-input { width:100%; background:var(--bg2); border:1.5px solid var(--border); border-radius:var(--r); padding:9px 34px 9px 12px; color:var(--text); font-family:var(--font-b); font-size:13px; outline:none; transition:border-color .15s; }
.search-input:focus { border-color:var(--accent); background:var(--surface); }
.search-input::placeholder { color:var(--text3); }
.search-icon { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:13px; pointer-events:none; }
.search-results { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface); border:1.5px solid var(--border); border-radius:8px; z-index:100; max-height:300px; overflow-y:auto; box-shadow:var(--shadow-lg); }
.search-result-item { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; transition:background .15s; border-bottom:1px solid var(--border); }
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover { background:var(--bg2); }
.sr-type { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 7px; border-radius:4px; flex-shrink:0; font-family:var(--font-m); }
.sr-type.module { background:#e8f4fd; color:#0052cc; }
.sr-type.topic { background:#fef9e7; color:#b7770d; }
.sr-type.lesson { background:#eafaf1; color:#007a3d; }
.sr-title { font-size:13px; color:var(--text); }
.course-tabs { display:flex; gap:6px; padding:10px 16px; border-bottom:1px solid var(--border); flex-wrap:wrap; flex-shrink:0; }
.course-tab { background:var(--bg2); border:1.5px solid var(--border); border-radius:var(--r); padding:5px 12px; font-size:12px; font-weight:600; color:var(--text2); cursor:pointer; transition:all .15s; white-space:nowrap; }
.course-tab:hover { border-color:var(--accent); color:var(--text); }
.course-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.course-tab-add { background:transparent; border:1.5px dashed var(--border); border-radius:var(--r); padding:5px 12px; font-size:12px; color:var(--text3); cursor:pointer; transition:all .15s; }
.course-tab-add:hover { border-color:var(--accent); color:var(--accent); }
.admin-tree { flex:1; overflow-y:auto; padding:10px 10px 20px; }
.tree-module { margin-bottom:4px; border:1.5px solid var(--border); border-radius:8px; overflow:hidden; }
.tree-module-header { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--bg2); cursor:pointer; user-select:none; transition:background .15s; }
.tree-module-header:hover { background:var(--bg); }
.tree-arrow { font-size:9px; color:var(--text3); transition:transform .2s; flex-shrink:0; }
.tree-module.open .tree-arrow { transform:rotate(90deg); }
.tree-module-num { font-size:10px; font-weight:700; color:var(--text2); background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:2px 7px; flex-shrink:0; font-family:var(--font-m); }
.tree-module-title { flex:1; font-size:13px; font-weight:700; color:var(--text); }
.tree-actions { display:flex; gap:4px; opacity:0; transition:opacity .15s; }
.tree-module-header:hover .tree-actions, .tree-topic-header:hover .tree-actions { opacity:1; }
.tree-btn { background:var(--surface); border:1px solid var(--border); border-radius:4px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; color:var(--text2); transition:all .15s; }
.tree-btn:hover { background:var(--bg); }
.tree-btn.danger:hover { border-color:#ffc4b8; color:#c0392b; }
.tree-module-body { display:none; padding:6px 8px 8px; background:var(--surface); }
.tree-module.open .tree-module-body { display:block; }
.tree-topic { margin-bottom:4px; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.tree-topic-header { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--bg); cursor:pointer; user-select:none; transition:background .15s; }
.tree-topic-header:hover { background:var(--bg2); }
.tree-topic-icon { font-size:11px; color:#b7770d; flex-shrink:0; }
.tree-topic-title { flex:1; font-size:12px; font-weight:600; color:var(--text2); }
.tree-topic-body { display:none; padding:4px 8px 8px; background:var(--surface); }
.tree-topic.open .tree-topic-body { display:block; }
.tree-lesson { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:5px; cursor:pointer; transition:background .15s; margin-bottom:2px; }
.tree-lesson:hover { background:var(--bg2); }
.tree-lesson.selected { background:#eef3ff; border-left:2px solid var(--blue); padding-left:6px; }
.tree-lesson-dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }
.tree-lesson-dot.empty { background:var(--border); }
.tree-lesson-title { flex:1; font-size:12px; color:var(--text2); }
.tree-lesson.selected .tree-lesson-title { color:var(--text); font-weight:500; }
.tree-lesson-dur { font-size:11px; color:var(--text3); flex-shrink:0; font-family:var(--font-m); }
.tree-lesson-actions { display:flex; gap:3px; opacity:0; transition:opacity .15s; }
.tree-lesson:hover .tree-lesson-actions { opacity:1; }
.tree-add-btn { display:flex; align-items:center; gap:6px; padding:6px 10px; background:transparent; border:1.5px dashed var(--border); border-radius:5px; font-size:12px; color:var(--text3); cursor:pointer; width:100%; transition:all .15s; margin-top:4px; font-family:var(--font-b); }
.tree-add-btn:hover { border-color:var(--blue); color:var(--blue); background:#eef3ff; }
.admin-right { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }
.admin-right-header { padding:16px 24px; border-bottom:1.5px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; background:var(--surface); }
.admin-right-title { font-family:var(--font-h); font-size:18px; font-weight:800; color:var(--text); }
.admin-right-body { flex:1; overflow-y:auto; padding:24px; }
.editor-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--text3); }
.editor-empty-icon { font-size:40px; opacity:.3; }
.editor-empty-text { font-size:14px; }
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--text3); margin-bottom:7px; font-family:var(--font-m); }
.form-input { width:100%; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); padding:10px 13px; color:var(--text); font-family:var(--font-b); font-size:14px; outline:none; transition:border-color .15s; }
.form-input:focus { border-color:var(--accent); }
.form-input.has-value { border-color:#a8d5b5; }
textarea.form-input { resize:vertical; min-height:80px; line-height:1.5; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.btn-save { background:var(--accent); color:#fff; border:none; border-radius:var(--r); padding:11px 26px; font-size:14px; font-weight:600; cursor:pointer; font-family:var(--font-b); transition:opacity .15s; }
.btn-save:hover { opacity:.85; }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:1000; animation:fadeIn .15s ease; }
.modal-box { background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:28px; width:420px; max-width:95vw; box-shadow:var(--shadow-lg); }
.modal-title { font-family:var(--font-h); font-size:20px; font-weight:800; margin-bottom:20px; color:var(--text); }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.btn-cancel { background:var(--bg2); border:1.5px solid var(--border); border-radius:var(--r); padding:10px 20px; font-size:13px; font-weight:600; color:var(--text2); cursor:pointer; font-family:var(--font-b); transition:all .15s; }
.btn-cancel:hover { border-color:var(--accent); }

@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.screen.active { animation:fadeIn .25s ease; }