/* ═════════════════════════════════════════════════════════
   Ocean-стиль для юридических страниц: terms/privacy/offer/refund
   Единая тема с главной. Готовые CSS-переменные для смены.
   ═════════════════════════════════════════════════════════ */
:root{
  --bg:#061621; --bg2:#0a2438; --panel:#0e2e48; --panel2:#143856;
  --text:#e8f4ff; --muted:#7d9bb3; --line:rgba(255,255,255,.08);
  --cyan:#3fc9ff; --cyan-glow:rgba(63,201,255,.5);
  --coral:#ff7a6b; --emerald:#4fe89a; --gold:#ffd166;
  --live:#ff4c6b;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;font-weight:400;font-size:15px}
body::before{content:"";position:fixed;inset:-20%;background:radial-gradient(circle at 25% 30%,rgba(63,201,255,.14),transparent 45%),radial-gradient(circle at 75% 70%,rgba(79,232,154,.10),transparent 45%);z-index:-3;animation:ripple 20s ease-in-out infinite}
@keyframes ripple{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,20px)}}
a{color:var(--cyan);text-decoration:none;transition:.15s}
a:hover{color:#fff;text-decoration:underline}

/* ═══ Layout — launcher (side-nav + main) ═══ */
.launcher{display:grid;grid-template-columns:82px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,var(--panel),var(--bg2));border-right:1px solid var(--line);padding:20px 12px;display:flex;flex-direction:column;gap:8px;position:sticky;top:0;height:100vh;z-index:100}
.side-logo{width:58px;height:58px;background:transparent;display:grid;place-items:center;margin-bottom:14px}
.side-logo .tp{font-family:'Rubik',sans-serif;font-weight:800;font-size:36px;letter-spacing:-.04em;line-height:1;display:flex;align-items:baseline}
.side-logo .tp .t{color:var(--cyan);text-shadow:0 0 4px var(--cyan),0 0 10px var(--cyan),0 0 20px var(--cyan-glow)}
.side-logo .tp .p{color:var(--emerald);text-shadow:0 0 4px var(--emerald),0 0 10px var(--emerald),0 0 20px rgba(79,232,154,.7);font-style:italic;margin-left:-1px}
.side-item{width:58px;height:58px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;font-size:22px;color:var(--muted);cursor:pointer;transition:.2s;position:relative;text-decoration:none}
.side-item:hover{background:rgba(63,201,255,.12);border-color:var(--cyan);color:var(--cyan);transform:scale(1.03);text-decoration:none}
.side-label{position:absolute;left:calc(100% + 14px);background:var(--panel);border:1px solid var(--cyan);padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.side-item:hover .side-label{opacity:1;transform:translateX(4px)}

.main{padding:32px 40px 40px;max-width:100%}

/* ═══ Topbar ═══ */
.topbar{display:flex;align-items:center;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.title-block{flex:1;min-width:200px;display:flex;align-items:center;gap:16px}
.brand-wordmark{font-family:'Rubik','Manrope',sans-serif;font-weight:800;font-size:38px;letter-spacing:.02em;line-height:1;display:flex;align-items:baseline}
.brand-wordmark .b1{color:var(--cyan);text-shadow:0 0 4px var(--cyan),0 0 12px var(--cyan),0 0 24px var(--cyan-glow)}
.brand-wordmark .b2{color:var(--emerald);text-shadow:0 0 4px var(--emerald),0 0 12px var(--emerald),0 0 24px rgba(79,232,154,.5);font-style:italic}
.brand-sub{color:var(--muted);font-size:12px;font-weight:600;border-left:1px solid var(--line);padding-left:16px;line-height:1.3;max-width:220px}
.page-crumb{font-size:12px;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.25em;padding:6px 14px;background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.3);border-radius:100px}
.btn{padding:10px 20px;border-radius:12px;font-weight:900;font-size:13px;cursor:pointer;font-family:inherit;transition:.2s;border:none;display:inline-block;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--text);border:1px solid var(--line)}
.btn-primary{background:linear-gradient(135deg,var(--cyan),#2ba3d4);color:#fff;font-weight:900;box-shadow:0 6px 22px var(--cyan-glow),inset 0 1px 0 rgba(255,255,255,.35);text-shadow:0 1px 3px rgba(0,0,0,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px var(--cyan-glow);color:#fff}

/* ═══ Legal doc content ═══ */
.legal-doc{background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:20px;padding:40px 48px;max-width:900px;margin:0 auto 24px}
.legal-head{text-align:center;padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid var(--line);position:relative}
.legal-head::after{content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:80px;height:3px;background:linear-gradient(90deg,var(--cyan),var(--emerald));border-radius:2px}
.legal-head h1{font-size:32px;font-weight:900;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px;color:#fff}
.legal-sub{color:var(--gold);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;margin-bottom:6px}
.legal-date{color:var(--muted);font-size:13px;font-weight:500}

.legal-content h2{font-size:22px;font-weight:900;color:var(--cyan);margin:36px 0 14px;letter-spacing:-.01em;padding-bottom:8px;border-bottom:1px solid var(--line)}
.legal-content h2:first-of-type{margin-top:0}
.legal-content h3{font-size:16px;font-weight:800;color:var(--gold);margin:22px 0 8px;letter-spacing:.01em}
.legal-content p{margin-bottom:14px;color:var(--text);line-height:1.7}
.legal-content ul,.legal-content ol{margin:12px 0 18px 24px;color:var(--text)}
.legal-content li{margin-bottom:8px;line-height:1.65}
.legal-content strong{color:#fff;font-weight:800}
.legal-content em{color:var(--gold);font-style:italic}
.legal-content code{background:rgba(0,0,0,.4);color:var(--gold);padding:2px 8px;border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:.9em;font-weight:700}
.legal-content address{background:rgba(0,0,0,.25);border:1px solid var(--line);border-left:3px solid var(--cyan);padding:14px 18px;border-radius:8px;font-style:normal;line-height:1.7;color:var(--text);margin:14px 0}

/* Callouts (важно/предупреждение) */
.callout{padding:16px 20px;border-radius:12px;margin:18px 0;border-left:4px solid;font-size:14px;line-height:1.6}
.callout.info{background:rgba(63,201,255,.08);border-color:var(--cyan);color:#c8ecff}
.callout.warn{background:rgba(255,209,102,.08);border-color:var(--gold);color:#fff2cc}
.callout.ok{background:rgba(79,232,154,.08);border-color:var(--emerald);color:#d0f5e0}
.callout.err{background:rgba(255,76,107,.08);border-color:var(--live);color:#ffd0d8}
.callout strong{display:inline;color:inherit}

/* Мапинг легаси-классов (privacy/offer/refund используют их) */
.important{padding:16px 20px;border-radius:12px;margin:18px 0;border-left:4px solid var(--cyan);background:rgba(63,201,255,.08);color:#c8ecff;font-size:14px;line-height:1.6}
.warning{padding:16px 20px;border-radius:12px;margin:18px 0;border-left:4px solid var(--gold);background:rgba(255,209,102,.08);color:#fff2cc;font-size:14px;line-height:1.6}
.success{padding:16px 20px;border-radius:12px;margin:18px 0;border-left:4px solid var(--emerald);background:rgba(79,232,154,.08);color:#d0f5e0;font-size:14px;line-height:1.6}
.contact-box{background:rgba(0,0,0,.3);border:1px solid var(--line);border-left:3px solid var(--cyan);padding:16px 20px;border-radius:8px;line-height:1.75;margin:14px 0}
.contact-box a{color:var(--cyan)}
.highlight{background:rgba(255,209,102,.15);color:var(--gold);padding:1px 6px;border-radius:4px;font-weight:700}
.back-link{display:inline-block;margin:24px auto;padding:12px 28px;background:linear-gradient(135deg,var(--cyan),#2ba3d4);color:#fff;font-weight:900;border-radius:12px;text-decoration:none;box-shadow:0 6px 22px var(--cyan-glow);text-shadow:0 1px 3px rgba(0,0,0,.35)}
.back-link:hover{transform:translateY(-1px);box-shadow:0 10px 30px var(--cyan-glow);color:#fff;text-decoration:none}

/* Таблицы (privacy) */
.legal-content table{width:100%;border-collapse:collapse;margin:18px 0;background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:13px}
.legal-content table th{text-align:left;padding:12px 14px;background:rgba(63,201,255,.08);color:var(--cyan);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line)}
.legal-content table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text);line-height:1.5}
.legal-content table tr:last-child td{border-bottom:none}
.legal-content h4{font-size:14px;font-weight:800;color:var(--text);margin:16px 0 6px}

/* Footer в старых страницах */
.footer{text-align:center;color:var(--muted);font-size:13px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.footer strong{color:var(--text)}
.footer p{margin-bottom:4px}
.header{text-align:center;padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid var(--line);position:relative}
.header::after{content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:80px;height:3px;background:linear-gradient(90deg,var(--cyan),var(--emerald));border-radius:2px}
.header .logo img{width:64px;height:64px;filter:drop-shadow(0 4px 12px var(--cyan-glow));margin-bottom:14px}
.header h1{font-size:28px;font-weight:900;color:#fff;letter-spacing:-.02em;margin-bottom:6px}
.subtitle{color:var(--gold);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;margin-bottom:4px}
.date{color:var(--muted);font-size:13px}
.container .content h2{font-size:22px;font-weight:900;color:var(--cyan);margin:36px 0 14px;letter-spacing:-.01em;padding-bottom:8px;border-bottom:1px solid var(--line)}
.container .content h2:first-of-type{margin-top:0}
.container .content h3{font-size:16px;font-weight:800;color:var(--gold);margin:22px 0 8px}
.container .content p{margin-bottom:14px;color:var(--text);line-height:1.7}
.container .content ul,.container .content ol{margin:12px 0 18px 24px;color:var(--text)}
.container .content li{margin-bottom:8px;line-height:1.65}
.container .content strong{color:#fff;font-weight:800}
.container .content code{background:rgba(0,0,0,.4);color:var(--gold);padding:2px 8px;border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:.9em;font-weight:700}

/* .container в старых страницах — переопределяем */
.container{max-width:900px;margin:0 auto 24px;background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:20px;padding:40px 48px}

/* Foot */
.legal-foot{text-align:center;padding-top:32px;margin-top:36px;border-top:1px solid var(--line)}
.legal-foot .btn{margin-bottom:14px}
.legal-foot .foot-copy{color:var(--muted);font-size:12px;letter-spacing:.05em}

/* Global foot-nav (та же что на index) */
.foot-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;padding:20px 0;border-top:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;max-width:900px;margin:0 auto}
.foot-nav a{color:var(--muted);text-decoration:none;transition:.15s}
.foot-nav a:hover{color:var(--cyan);text-decoration:none}

/* ═══ Mobile ═══ */
@media(max-width:900px){
  .launcher{grid-template-columns:1fr}
  .side{position:sticky;top:0;height:auto;flex-direction:row;overflow-x:auto;padding:12px 14px;gap:6px;border-right:none;border-bottom:1px solid var(--line)}
  .side-logo{margin-bottom:0;flex-shrink:0}
  .side-item{width:44px;height:44px;flex-shrink:0;font-size:19px;border-radius:12px}
  .side-label{display:none}
  .main{padding:20px}
  .legal-doc{padding:28px 24px}
  .legal-head h1{font-size:24px}
  .legal-content h2{font-size:19px}
  .legal-content h3{font-size:15px}
}
@media(max-width:640px){
  .brand-wordmark{font-size:30px}
  .brand-sub{font-size:11px;max-width:150px;padding-left:12px}
  .legal-doc{padding:22px 18px}
  .legal-head h1{font-size:22px}
  .legal-content{font-size:14px}
  .legal-content ul,.legal-content ol{margin-left:18px}
}