/* Гармония Востока — клиентский кабинет.
   Фирменный дизайн garmoniya-vostoka v3: тёмно-синий навигационный фон + золото,
   заголовки — Playfair Display, тело — системный sans. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap');

:root{
  /* брендовые токены GV (см. v3/site/assets/css/main.css) */
  --bg:#0a1124; --bg-2:#060a16;
  --surface:#121b35; --surface-2:#1a2545; --surface-3:#243358;
  --ink:#f1efe6; --ink-2:#c3c9d8; --muted:#818aa1;
  --gold:#d8b36a; --gold-bright:#ecd49a; --gold-deep:#b08e4e;
  --teal:#46b6cf; --teal-bright:#7ad6e6;
  --line:rgba(216,179,106,.18); --line-soft:rgba(255,255,255,.08); --hair:rgba(216,179,106,.32);
  --ozon:#1a6dff; --wb:#d52ab8;
  --radius:18px; --radius-sm:12px;

  /* производные токены для разметки кабинета */
  --card:linear-gradient(180deg,var(--surface-2),var(--surface));
  --card-solid:#16203c;
  --text:var(--ink); --border:var(--line-soft);
  --green:var(--gold);            /* «акцент» — золото (имена классов унаследованы от Lux) */
  --green-d:var(--gold-deep);
  --shadow:0 2px 8px rgba(0,0,0,.4), 0 22px 50px -22px rgba(0,0,0,.55);
  --shadow-lift:0 4px 14px rgba(0,0,0,.45), 0 40px 90px -30px rgba(0,0,0,.85);
  --ts-accent:linear-gradient(160deg,#ecd49a,#d8b36a 52%,#b08e4e);
  --ts-accent-solid:#b08e4e;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%}
html{background:var(--bg)}
body{
  font-family:var(--sans);
  color:var(--ink); line-height:1.62; -webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 620px at 88% -10%, rgba(216,179,106,.13), transparent 60%),
    radial-gradient(820px 720px at -12% 8%,  rgba(70,130,205,.18), transparent 58%),
    radial-gradient(1300px 980px at 50% 122%, rgba(70,150,210,.11), transparent 62%),
    linear-gradient(180deg, #0b1428 0%, #0a1020 58%, #070b16 100%);
  background-attachment:fixed; background-repeat:no-repeat;
  transition:background .25s ease, color .25s ease;
}
@media (max-width:720px){ body{background-attachment:scroll} }
.serif{font-family:var(--serif)}
h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-.012em; color:var(--ink)}
a{color:var(--gold); text-decoration:none; transition:color .15s ease}
a:hover{color:var(--gold-bright)}
img{max-width:100%; display:block}

/* ─────────── login ─────────── */
.login-wrap{min-height:100vh; display:grid; grid-template-columns:1.08fr 1fr}

/* левая «кинематографичная» панель бренда */
.login-visual{position:relative; overflow:hidden; color:var(--ink);
  background:
    radial-gradient(680px 460px at 80% -12%, rgba(216,179,106,.20) 0%, transparent 62%),
    radial-gradient(560px 420px at 2% 118%, rgba(70,130,205,.26) 0%, transparent 60%),
    linear-gradient(152deg, var(--surface-2) 0%, var(--surface) 46%, var(--bg-2) 100%)}
.lv-motes{position:absolute; inset:0; z-index:0}
.lv-glow{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(420px 420px at 32% 42%, rgba(216,179,106,.14), transparent 62%);
  animation:lvdrift 13s ease-in-out infinite}
@keyframes lvdrift{0%,100%{transform:translate(-4%,-2%)}50%{transform:translate(7%,5%)}}
.lv-inner{position:relative; z-index:2; height:100%; min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; padding:44px 50px}
.lv-top{display:flex; align-items:center; justify-content:space-between; gap:16px}
.lv-logo img{height:50px; display:block}
.lv-kicker{font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:600}

.bstage{position:relative; flex:1 1 auto; display:flex; align-items:center; min-height:170px; margin:30px 0}
.bslide{position:absolute; left:0; right:0; opacity:0; transform:translateY(12px); transition:opacity .9s ease, transform .9s ease; pointer-events:none}
.bslide.active{opacity:1; transform:none}
.bslide .bnum{font-size:11px; letter-spacing:.22em; color:var(--gold); margin-bottom:14px; font-weight:600}
.bslide .bname{font-family:var(--serif); font-weight:700; font-size:clamp(32px,4.6vw,50px); line-height:1.04; letter-spacing:-.4px;
  background:linear-gradient(94deg,var(--gold-bright) 0%,#fff4df 44%,var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.bslide .bmeta{margin-top:15px; font-size:13.5px; letter-spacing:.03em; color:var(--ink-2)}
.bslide .bmeta .dot{margin:0 8px; opacity:.5}

.lv-dots{display:flex; gap:8px; flex-wrap:wrap}
.lv-dots i{width:7px; height:7px; border-radius:50%; background:rgba(216,179,106,.30); transition:transform .4s, background .4s, box-shadow .4s; cursor:pointer}
.lv-dots i.on{background:var(--gold); transform:scale(1.18); box-shadow:0 0 0 4px rgba(216,179,106,.15)}

/* правая панель — форма входа */
.login-panel{display:flex; flex-direction:column; justify-content:center; padding:48px 56px; position:relative; background:var(--bg)}
.login-panel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--teal),var(--gold) 55%,var(--gold-bright))}
.login-card{width:100%; max-width:360px; margin:0 auto}
.login-card .logo{margin-bottom:26px}
.login-card .logo img{height:54px; display:block}
.login-card .welcome{font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:8px}
.login-card h1{font-weight:700; font-size:28px; margin:0 0 6px; letter-spacing:-.4px; color:var(--ink)}
.login-card .sub{color:var(--muted); font-size:14px; margin:0 0 26px}

.field{margin-bottom:16px}
.field label{display:block; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.field input{width:100%; padding:12px 14px; border:1px solid var(--line-soft); border-radius:10px; background:var(--surface); color:var(--ink); font-size:15px; font-family:inherit; transition:border-color .15s, box-shadow .15s}
.field input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(216,179,106,.18)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px 18px;
  background:linear-gradient(160deg,var(--gold-bright),var(--gold) 52%,var(--gold-deep)); color:#1a1305; border:none; border-radius:999px;
  font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; letter-spacing:.01em;
  box-shadow:0 10px 26px -10px rgba(216,179,106,.7), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform .15s ease, box-shadow .15s ease, color .15s ease}
.btn:hover{transform:translateY(-2px); color:#1a1305; box-shadow:0 16px 36px -12px rgba(216,179,106,.85)}
.btn:active{transform:translateY(0)}

.error{background:rgba(213,42,90,.10); border:1px solid rgba(216,179,106,.32); color:var(--gold-bright); padding:10px 14px; border-radius:10px; font-size:14px; margin-bottom:16px}

@media (max-width:860px){
  .login-wrap{grid-template-columns:1fr}
  .login-visual{min-height:300px}
  .lv-inner{min-height:300px; padding:30px 26px}
  .lv-logo img{height:40px}
  .bstage{min-height:120px; margin:22px 0}
  .login-panel{padding:36px 24px}
  .login-panel::before{display:none}
}

/* ─────────── topbar ─────────── */
.topbar{position:sticky; top:0; z-index:10; background:rgba(9,14,30,.80); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1080px; margin:0 auto; padding:13px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:14px; min-width:0}
.brand .logo{height:42px; display:block}
.brand .tag{font-size:12px; color:var(--muted); padding-left:14px; border-left:1px solid var(--line-soft); white-space:nowrap}
.topnav{display:flex; align-items:center; gap:18px; flex:none}
.topnav .logout{font-size:13.5px; color:var(--muted)}
.topnav .logout:hover{color:var(--gold-bright)}

main{max-width:1080px; margin:0 auto; padding:22px 22px 60px}

/* ─────────── page intro ─────────── */
.page-intro{margin:10px 0 28px}
.page-intro h1{font-weight:700; font-size:clamp(28px,4vw,44px); margin:0 0 6px; letter-spacing:-.5px}
.page-intro p{margin:0; color:var(--muted); font-size:14.5px}

/* ─────────── section heads ─────────── */
.section{margin-bottom:42px}
.sec-head{display:flex; align-items:baseline; gap:14px; margin-bottom:14px}
.sec-head h2{font-weight:600; font-size:clamp(21px,3vw,30px); margin:0; letter-spacing:-.3px}

/* ─────────── link cards ─────────── */
.linkcard{display:flex; align-items:center; gap:18px;
  background:linear-gradient(168deg,var(--surface-2),var(--surface)); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; color:var(--ink)}
.linkcard::after{content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(140% 80% at 100% 0%, rgba(216,179,106,.12), transparent 60%);
  opacity:0; transition:opacity .2s ease; pointer-events:none}
.linkcard:hover{transform:translateY(-5px); border-color:var(--hair); box-shadow:var(--shadow-lift)}
.linkcard:hover::after{opacity:1}
.linkcard .lc-ico{flex:none; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px;
  background:radial-gradient(circle at 32% 28%, var(--surface-3), #0b1326 82%); color:var(--gold-bright); box-shadow:0 0 0 1px var(--line) inset; position:relative; z-index:1}
.linkcard .lc-body{flex:1 1 auto; min-width:0; position:relative; z-index:1}
.linkcard .lc-t{font-family:var(--serif); font-size:19px; font-weight:700; color:var(--ink)}
.linkcard .lc-s{font-size:13.5px; color:var(--muted); margin-top:4px}
.linkcard .lc-go{flex:none; color:var(--gold); font-weight:600; font-size:14px; white-space:nowrap; position:relative; z-index:1}
.linkcard:hover .lc-go{color:var(--gold-bright)}
/* дата актуального отчёта рядом с «Продажи» */
.lc-date{display:inline-block; margin-left:8px; font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--gold-bright);
  background:rgba(216,179,106,.12); border:1px solid var(--hair); border-radius:20px; padding:2px 10px; vertical-align:middle; font-family:var(--sans)}

/* строка плашек предыдущих дат под «Продажи» */
.arch-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.arch-chip{display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line-soft); color:var(--ink-2); font-size:13.5px;
  font-weight:600; box-shadow:var(--shadow); transition:border-color .15s, transform .15s, color .15s}
.arch-chip:hover{border-color:var(--gold); color:var(--gold-bright); transform:translateY(-2px)}

/* ─────────── footer ─────────── */
footer.site{max-width:1080px; margin:0 auto; padding:28px 22px 46px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
footer.site a{color:var(--gold)}
footer.site a:hover{color:var(--gold-bright)}

@media (max-width:560px){
  .lv-kicker{display:none}
  .brand .tag{display:none}
  .brand .logo{height:36px}
  .topbar-inner{padding:12px 16px}
  main{padding:18px 16px 48px}
}

/* ═══════════ Тёмная тема (ещё глубже навигационная) ═══════════
   :root уже тёмно-синяя (брендовая); «dark» делает фон ещё глубже. */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#070b18; --bg-2:#03060e;
  --surface:#0e1730; --surface-2:#142040; --surface-3:#1d2c4f;
}
[data-theme="dark"] body{
  background-image:
    radial-gradient(900px 620px at 88% -10%, rgba(216,179,106,.11), transparent 60%),
    radial-gradient(820px 720px at -12% 8%,  rgba(70,130,205,.15), transparent 58%),
    linear-gradient(180deg, #070d1e 0%, #060a16 58%, #03060e 100%);
}
[data-theme="dark"] .topbar{background:rgba(5,9,20,.84)}

/* переключатель темы */
.theme-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line-soft);border-radius:999px;background:var(--surface-2);box-shadow:var(--shadow);-webkit-user-select:none;user-select:none}
.theme-switch .ts-opt{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;padding:6px 11px;border-radius:999px;transition:background .18s,color .18s}
.theme-switch .ts-opt .ts-ico{font-size:13px;line-height:1}
.theme-switch .ts-opt[aria-pressed="true"]{background:var(--ts-accent);color:#1a1305}
.theme-switch.fixed{position:fixed;top:14px;right:16px;z-index:60}
.theme-switch .ts-txt{display:none}

/* ═══════════ Единорог (pink-тема) ═══════════ */
.uni-deco{display:none}
[data-theme="pink"] .uni-deco{display:block;position:fixed;right:22px;bottom:18px;font-size:120px;line-height:1;z-index:55;pointer-events:none;user-select:none;animation:uni-bob 3s ease-in-out infinite;filter:drop-shadow(0 8px 11px rgba(200,100,180,.45))}
[data-theme="pink"] .uni-deco::after{content:"✨";position:absolute;left:-28px;top:-10px;font-size:50px;animation:uni-spark 1.8s ease-in-out infinite}
@keyframes uni-bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-14px) rotate(5deg)}}
@keyframes uni-spark{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

/* ═══════════ Единорожья (pink) тема ═══════════
   тёмно-синие/золотые акценты переопределены в розово-сиреневые (светлая). */
[data-theme="pink"]{
  color-scheme:light;
  --bg:#fff2fa; --bg-2:#ffe9f5;
  --surface:#ffffff; --surface-2:#fff5fb; --surface-3:#ffe9f5;
  --ink:#5e2a4d; --ink-2:#8a4a72; --muted:#a8709a;
  --line:rgba(212,67,155,.20); --line-soft:#ffd2ea; --hair:rgba(212,67,155,.40);
  --gold:#d4439b; --gold-bright:#e167b4; --gold-deep:#9c2f78;
  --teal:#c879ff; --teal-bright:#d79cff;
  --ts-accent:linear-gradient(160deg,#e167b4,#d4439b 52%,#9c2f78);
  --shadow:0 3px 16px rgba(255,143,200,.16);
  --shadow-lift:0 16px 40px rgba(200,100,180,.28);
  color-scheme:light;
}
[data-theme="pink"] html,[data-theme="pink"] body{background:var(--bg)}
[data-theme="pink"] body{background-image:radial-gradient(1200px 800px at 50% -10%, #ffe3f4 0%, var(--bg) 60%, #efe1ff 100%)}
[data-theme="pink"] .topbar{background:rgba(255,242,250,.92)}
[data-theme="pink"] .login-panel{background:var(--bg)}
[data-theme="pink"] .field input{background:#fff; color:var(--ink)}
[data-theme="pink"] .field input:focus{box-shadow:0 0 0 3px rgba(212,67,155,.16)}
[data-theme="pink"] .btn{color:#fff; box-shadow:0 10px 26px -10px rgba(212,67,155,.7)}
[data-theme="pink"] .btn:hover{color:#fff}
[data-theme="pink"] .theme-switch .ts-opt[aria-pressed="true"]{color:#fff}
[data-theme="pink"] .error{background:#ffe6f4; border-color:#ffc7e4; color:#b5237f}
[data-theme="pink"] .linkcard .lc-ico{background:radial-gradient(circle at 32% 28%, #ffe0ef, #ffd2ea 82%); color:#c43d8f}
[data-theme="pink"] .lc-date{background:#ffe9f5; border-color:#ffc9e6; color:#c43d8f}

/* ⭐ выстрел эмодзи из единорога (тема 🦄) */
.uni-star{position:fixed;z-index:9999;pointer-events:none;will-change:transform,opacity;animation:uni-burst var(--dur,1.5s) cubic-bezier(.15,.65,.25,1) forwards}
@keyframes uni-burst{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}15%{opacity:1}100%{transform:translate(var(--dx,0),var(--dy,0)) scale(var(--sc,1.4)) rotate(var(--rot,360deg));opacity:0}}