/* ============================================================
   CinemaMaxxing — единая дизайн-система
   Палитра «АВРОРА» (по рефу): тёмная холодная база + мягкие
   градиенты индиго → пурпур → бирюза, мятно-бирюзовый акцент.
   Два шрифта: Space Grotesk (заголовки/текст) + Space Mono
   (метки, подписи, нумерация, акцентные надписи).
   ============================================================ */
:root{
  /* фоны / поверхности (холодная почти-чёрная база) */
  --cm-bg:#06070c; --cm-bg-2:#0b0d14;
  --cm-panel:#0e1018; --cm-panel-2:#151826; --cm-panel-3:#1d2132;
  /* линии — холодный slate с низкой альфой */
  --cm-line:rgba(150,170,210,0.13); --cm-line-soft:rgba(150,170,210,0.06);
  /* текст (холодно-белый + slate-muted, контраст приподнят) */
  --cm-text:#eef1f7; --cm-muted:rgba(206,214,232,0.64); --cm-muted-2:rgba(196,206,228,0.46);
  /* акценты: мята/бирюза (аврора-зелёный) + пурпур */
  --cm-accent:#92fbbc; --cm-accent-2:#8b7fe0; --cm-accent-press:#6fe0a0;
  --cm-accent-soft:rgba(146,251,188,0.12); --cm-accent2-soft:rgba(139,127,224,0.14);
  --cm-on-accent:#06140e;            /* тёмный текст на мятной заливке */
  /* функциональный сигнал «удалить» */
  --cm-danger:#ff6b6b;
  /* форма / тень / движение */
  --cm-radius:2px; --cm-radius-sm:2px;
  --cm-shadow:0 24px 60px -24px rgba(0,0,0,0.85);
  --cm-ease:cubic-bezier(.25,1,.5,1);
  /* шрифты — ровно два */
  --cm-display:'Space Grotesk',system-ui,sans-serif;
  --cm-body:'Space Grotesk',system-ui,sans-serif;
  --cm-mono:'Space Mono',ui-monospace,monospace;
  /* высота общей шапки */
  --cm-topbar-h:48px;
  /* аврора-градиенты */
  --cm-aurora:
    radial-gradient(1100px 460px at 22% 128%, rgba(74,61,122,0.50), transparent 62%),
    radial-gradient(1000px 440px at 80% 134%, rgba(47,90,77,0.46), transparent 60%),
    radial-gradient(900px 520px at 50% 150%, rgba(24,26,56,0.62), transparent 66%);
  --cm-aurora-text:linear-gradient(108deg,#9b8ff0 0%,#bcc6de 46%,#92fbbc 100%);
  --cm-aurora-line:linear-gradient(90deg,#181a38 0%,#4a3d7a 50%,#2f5a4d 100%);
}

/* серебро → аврора-градиент текста (имя класса сохранено для совместимости) */
.cm-silver-text{
  background:var(--cm-aurora-text); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* хелперы */
.cm-num{font-family:var(--cm-mono); font-variant-numeric:tabular-nums; color:var(--cm-accent); letter-spacing:.04em}
.cm-hairline{height:1px; background:var(--cm-aurora-line); opacity:.55; border:0}

/* ============================================================
   Общая шапка (монтируется platform.js на страницах инструментов)
   ============================================================ */
.cm-topbar{
  position:fixed; top:0; left:0; right:0; height:var(--cm-topbar-h);
  display:flex; align-items:center; gap:16px; padding:0 18px;
  background:rgba(8,9,16,0.82); -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid var(--cm-line); z-index:9000; font-family:var(--cm-body);
}
.cm-topbar::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--cm-aurora-line); opacity:.5}
.cm-topbar, .cm-topbar *{box-sizing:border-box}
.cm-brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--cm-text);
  font-family:var(--cm-mono); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.2em; line-height:1;
}
.cm-brand:hover{color:#fff}
.cm-logo{ width:13px; height:13px; flex:none; border-radius:1px; background:var(--cm-aurora-text); }
.cm-current{
  font-family:var(--cm-mono); font-size:10px; color:var(--cm-accent);
  text-transform:uppercase; letter-spacing:.22em; padding-left:14px;
  border-left:1px solid var(--cm-line); line-height:1;
}
.cm-spacer{flex:1}
.cm-switch{position:relative}
.cm-switch-btn{
  font-family:var(--cm-mono); font-size:10px; color:var(--cm-text);
  text-transform:uppercase; letter-spacing:.2em;
  background:transparent; border:1px solid var(--cm-line);
  border-radius:var(--cm-radius-sm); padding:9px 14px; cursor:pointer;
  display:flex; align-items:center; gap:9px; line-height:1;
  transition:border-color .36s var(--cm-ease), color .36s var(--cm-ease);
}
.cm-switch-btn:hover{border-color:var(--cm-accent); color:var(--cm-accent)}
.cm-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:280px;
  background:#080a12; border:1px solid var(--cm-line); border-radius:var(--cm-radius);
  box-shadow:var(--cm-shadow); padding:7px; display:none; flex-direction:column; gap:1px;
}
.cm-menu.open{display:flex}
.cm-menu a{
  display:flex; flex-direction:column; gap:3px; padding:11px 13px;
  border-radius:var(--cm-radius-sm); text-decoration:none; color:var(--cm-text);
  border-left:2px solid transparent; transition:background-color .36s var(--cm-ease);
}
.cm-menu a:hover{background:rgba(146,251,188,.06)}
.cm-menu a.active{background:rgba(146,251,188,.09); border-left-color:var(--cm-accent)}
.cm-mi-name{font-size:13px; font-weight:500; letter-spacing:.01em; font-family:var(--cm-display)}
.cm-mi-tag{font-size:10px; color:var(--cm-muted-2); text-transform:uppercase; letter-spacing:.18em; font-family:var(--cm-mono)}

@media (max-width:560px){ .cm-current{display:none} }

/* ============================================================
   Компенсация фиксированной шапки внутри инструментов
   ============================================================ */
body[data-cm-tool]{ padding-top:var(--cm-topbar-h) }
body[data-cm-tool] #app,
body[data-cm-tool] .app{
  height:calc(100vh - var(--cm-topbar-h)) !important;
  height:calc(100dvh - var(--cm-topbar-h)) !important;
}

/* ============================================================
   Хаб (index.html)
   ============================================================ */
.cm-hub{
  margin:0; min-height:100vh; color:var(--cm-text); font-family:var(--cm-body);
  background:var(--cm-aurora), var(--cm-bg); background-attachment:fixed;
}
.cm-hub .cm-topbar{position:static; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none}
.cm-hub .cm-topbar::after{opacity:.6}

.cm-hero{max-width:1180px; margin:0 auto; padding:74px 28px 26px}
.cm-kick{
  font-family:var(--cm-mono); font-size:11px; color:var(--cm-accent);
  text-transform:uppercase; letter-spacing:.34em; margin:0 0 22px;
}
.cm-hero h1{
  font-family:var(--cm-display); font-weight:600; text-transform:uppercase;
  letter-spacing:-.02em; line-height:.92; margin:0 0 20px;
  font-size:clamp(44px,9vw,108px);
}
.cm-hero p{font-size:15px; line-height:1.6; color:var(--cm-muted); margin:0; max-width:60ch}

.cm-grid{
  max-width:1180px; margin:26px auto 40px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px;
  background:var(--cm-line-soft); border:1px solid var(--cm-line-soft);
}
.cm-card{
  display:flex; flex-direction:column; gap:14px; padding:28px 26px 24px;
  background:rgba(8,10,18,0.72); text-decoration:none; color:var(--cm-text);
  transition:background-color .4s var(--cm-ease), box-shadow .4s var(--cm-ease);
  position:relative;
}
.cm-card::before{content:""; position:absolute; left:0; top:0; right:0; height:1px; background:var(--cm-aurora-line); opacity:0; transition:opacity .4s var(--cm-ease)}
.cm-card:hover{background:rgba(13,16,28,0.92); box-shadow:inset 0 0 0 1px rgba(146,251,188,.30)}
.cm-card:hover::before{opacity:.8}
.cm-ic{
  font-family:var(--cm-mono); font-size:12px; font-weight:700; letter-spacing:.12em;
  color:var(--cm-muted); font-variant-numeric:tabular-nums;
  transition:color .4s var(--cm-ease);
}
.cm-card:hover .cm-ic{color:var(--cm-accent)}
.cm-tag{font-family:var(--cm-mono); font-size:10px; color:var(--cm-accent); text-transform:uppercase; letter-spacing:.2em}
.cm-card h3{font-family:var(--cm-display); font-weight:500; font-size:21px; letter-spacing:-.01em; margin:0}
.cm-desc{font-size:13px; line-height:1.55; color:var(--cm-muted)}
.cm-open{
  font-family:var(--cm-mono); font-size:10px; font-weight:700; color:var(--cm-muted);
  text-transform:uppercase; letter-spacing:.2em; transition:color .4s var(--cm-ease); margin-top:2px;
}
.cm-card:hover .cm-open{color:var(--cm-accent)}

.cm-section{max-width:1180px; margin:0 auto; padding:20px 28px 56px}
.cm-section h2{
  font-family:var(--cm-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.28em; color:var(--cm-muted); margin:0 0 16px;
  display:inline-block; padding-bottom:8px; border-bottom:1px solid var(--cm-line);
}
.cm-reslist{display:flex; gap:1px; flex-wrap:wrap; background:var(--cm-line-soft); border:1px solid var(--cm-line-soft)}
.cm-res{
  display:flex; flex:1 1 220px; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px;
  background:rgba(8,10,18,0.72); text-decoration:none; color:var(--cm-text); font-size:13px; font-family:var(--cm-display);
  transition:background-color .4s var(--cm-ease), box-shadow .4s var(--cm-ease);
}
.cm-res:hover{background:rgba(13,16,28,0.92); box-shadow:inset 0 0 0 1px rgba(146,251,188,.25)}
.cm-res .cm-arr{color:var(--cm-muted-2); font-size:14px; font-family:var(--cm-mono); transition:color .4s var(--cm-ease)}
.cm-res:hover .cm-arr{color:var(--cm-accent)}
.cm-foot{
  max-width:1180px; margin:0 auto; padding:24px 28px 44px; color:var(--cm-muted-2);
  font-family:var(--cm-mono); font-size:10px; text-transform:uppercase; letter-spacing:.2em;
  border-top:1px solid var(--cm-line-soft);
}

/* ============================================================
   Doc / handbook страницы (контент бывших PDF и гайдов)
   ============================================================ */
.cm-doc{
  margin:0; min-height:100vh; background:var(--cm-bg); color:var(--cm-text);
  font-family:var(--cm-body); -webkit-font-smoothing:antialiased;
}
.cm-doc-hero{
  position:relative; max-width:940px; margin:0 auto; padding:60px 28px 30px;
}
.cm-doc-hero::before{
  content:""; position:absolute; inset:-48px -40% 0 -40%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 380px at 30% 120%, rgba(74,61,122,0.40), transparent 60%),
    radial-gradient(800px 360px at 78% 130%, rgba(47,90,77,0.34), transparent 58%);
}
.cm-doc-hero h1{
  font-family:var(--cm-display); font-weight:600; text-transform:uppercase;
  letter-spacing:-.02em; line-height:.95; margin:0 0 14px; font-size:clamp(34px,6.5vw,72px);
}
.cm-doc-hero p{font-size:15px; line-height:1.6; color:var(--cm-muted); margin:0; max-width:64ch}
.cm-doc-wrap{max-width:940px; margin:0 auto; padding:8px 28px 90px}
.cm-doc-sec{padding-top:32px}
.cm-doc-sec > h2{
  font-family:var(--cm-mono); font-size:12px; text-transform:uppercase; letter-spacing:.24em;
  color:var(--cm-accent); margin:0 0 16px; padding-bottom:11px;
  border-bottom:1px solid var(--cm-line); position:relative;
}
.cm-doc-sec > h2::after{content:""; position:absolute; left:0; bottom:-1px; width:64px; height:1px; background:var(--cm-aurora-line)}
.cm-doc-sec h3{font-family:var(--cm-display); font-size:16px; font-weight:600; margin:20px 0 4px; color:#fff}
.cm-doc-sec p{font-size:14.5px; line-height:1.65; color:rgba(226,232,244,.82); margin:8px 0}
.cm-doc-sec ul{margin:10px 0; padding:0; list-style:none}
.cm-doc-sec li{
  position:relative; padding:9px 0 9px 22px; font-size:14.5px; line-height:1.6;
  color:rgba(226,232,244,.84); border-bottom:1px solid var(--cm-line-soft);
}
.cm-doc-sec li::before{content:""; position:absolute; left:1px; top:15px; width:6px; height:6px; background:var(--cm-accent)}
.cm-doc-sec li b, .cm-doc-sec p b, .cm-doc-sec strong{color:#fff; font-weight:600}
.cm-doc kbd{
  font-family:var(--cm-mono); font-size:12px; color:var(--cm-accent); background:rgba(20,24,40,.7);
  border:1px solid var(--cm-line); border-bottom-color:rgba(0,0,0,.5); border-radius:2px; padding:2px 7px; white-space:nowrap;
}
.cm-doc-note{
  margin:18px 0; padding:14px 18px; border:1px solid var(--cm-line); border-left:2px solid var(--cm-accent);
  background:var(--cm-panel); font-size:13.5px; line-height:1.6; color:rgba(226,232,244,.82);
}
.cm-doc-note b{color:var(--cm-accent)}
.cm-doc-cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:8px; padding:13px 18px;
  border:1px solid var(--cm-line); text-decoration:none; color:var(--cm-accent); font-family:var(--cm-mono);
  font-size:11px; text-transform:uppercase; letter-spacing:.18em;
  transition:background-color .4s var(--cm-ease), border-color .4s var(--cm-ease);
}
.cm-doc-cta:hover{background:var(--cm-accent-soft); border-color:var(--cm-accent)}