/* Baka · тема «Aden» — современный тёмный фэнтези-интерфейс
   Камень / золото / лунный свет. Стекло, крупная типографика, пилюли. */

:root{
  --ink:#07090c;
  --glass:rgba(18,23,30,.72);
  --glass-2:rgba(12,16,21,.88);
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.06);
  --gold:#d9b45e;
  --gold-hi:#f2d79a;
  --gold-dim:#8a6f33;
  --moon:#a8c8f0;
  --text:#c9d1da;
  --muted:#8b95a1;
  --red:#d0655a;
  --green:#84b96c;
  --r-lg:20px;
  --r-md:12px;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  min-height:100vh;display:flex;flex-direction:column;
  font:15.5px/1.72 "Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:var(--text);background:var(--ink);-webkit-font-smoothing:antialiased;
}
/* световая подложка */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 45% at 78% -8%,rgba(120,160,220,.16),transparent 70%),
    radial-gradient(55% 40% at 12% 8%,rgba(217,180,94,.1),transparent 72%),
    radial-gradient(80% 55% at 50% 108%,rgba(90,120,170,.1),transparent 70%),
    linear-gradient(#07090c,#0a0e13 45%,#07090c);
}
/* зерно */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
a{color:var(--moon);text-decoration:none;transition:color .15s}
a:hover{color:var(--gold-hi)}
img{max-width:100%;border:0}
::selection{background:rgba(217,180,94,.3)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#242c36;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#313b48}

#shell{flex:1 0 auto;width:100%;max-width:1200px;margin:0 auto;padding:0 22px}

/* ── шапка ───────────────────────────────────────────────── */
#top{position:relative;margin:0 -22px}
#top::before{
  content:"";position:absolute;inset:0 0 -150px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,9,13,.9) 6%,rgba(6,9,13,.35) 52%,rgba(6,9,13,.05) 78%),
    url("/img/theme/hero2.jpg") center 16%/cover no-repeat;
  -webkit-mask-image:linear-gradient(#000 42%,transparent 92%);
  mask-image:linear-gradient(#000 42%,transparent 92%);
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px 22px 0}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-crest{
  width:56px;height:56px;object-fit:cover;border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 30px -14px #000,0 0 0 1px rgba(217,180,94,.25);
}
.brand-name{
  display:block;font:700 30px/1 Georgia,"Times New Roman",serif;letter-spacing:.01em;
  background:linear-gradient(#fdf7ea,#e2cf9f 55%,#a98a4b);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.85));
  -webkit-text-stroke:.4px rgba(0,0,0,.35);
}
.brand-sub{
  display:block;margin-top:5px;font:10.5px/1.3 "Segoe UI",system-ui,sans-serif;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(215,222,232,.62);
}
.server-state{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(10,14,19,.6);backdrop-filter:blur(12px);
  box-shadow:0 10px 30px -18px #000;
}
.server-state b{display:none}
/* текст виджета приходит с inline color:#000 */
.server-state p{margin:0;font:11.5px/1.45 "Segoe UI",system-ui,sans-serif;color:#cfc6ad!important;letter-spacing:.04em}
.server-state p span{color:inherit!important}
.state-num{font-size:11.5px;color:var(--muted)}
.lamp{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#3c444f}
.lamp.on{background:var(--green);box-shadow:0 0 0 4px rgba(132,185,108,.16)}

/* ── меню (липкое) ───────────────────────────────────────── */
.menu{
  position:sticky;top:10px;z-index:20;display:flex;align-items:stretch;gap:4px;
  min-height:52px;margin:100px 22px 26px;padding:5px;border-radius:16px;
  border:1px solid var(--line);
  background:rgba(11,15,20,.66);backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 20px 50px -30px #000,inset 0 1px 0 rgba(255,255,255,.06);
  overflow-x:auto;scrollbar-width:none;
}
.menu::-webkit-scrollbar{display:none}
.menu > a,.menu > .has-sub{
  position:relative;display:flex;align-items:center;padding:0 18px;border-radius:11px;white-space:nowrap;
  font:600 13px/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.11em;text-transform:uppercase;
  color:#dde4ec;cursor:default;transition:background .16s,color .16s;
}
.menu > a{color:#dde4ec}
.menu > a:hover,.menu > .has-sub:hover{background:rgba(255,255,255,.07);color:var(--gold-hi);text-decoration:none}
.menu-cta{
  margin-left:auto!important;padding:0 22px!important;border-radius:11px;
  color:#191307!important;font-weight:800!important;letter-spacing:.1em;
  background:linear-gradient(#f7e2ab,#dcb96a 55%,#b08c3f)!important;
  box-shadow:0 12px 26px -12px rgba(217,180,94,.9),inset 0 -1px 0 rgba(0,0,0,.25);
  transition:transform .12s,filter .15s;
}
.menu-cta:hover{transform:translateY(-1px);filter:brightness(1.06)}
.menu-exit{
  display:flex;align-items:center;padding:0 14px!important;border-radius:11px;
  font-size:11.5px!important;letter-spacing:.06em!important;color:#a4aebb!important;
}
.menu-exit:hover{background:rgba(255,255,255,.06);color:var(--gold-hi)!important}
.menu-exit::before{content:"";width:1px;height:18px;margin-right:12px;background:var(--line)}

.sub{
  position:absolute;top:calc(100% + 10px);left:0;min-width:200px;display:none;padding:7px;z-index:30;
  border-radius:14px;border:1px solid var(--line);background:rgba(10,14,19,.95);
  backdrop-filter:blur(16px);box-shadow:0 30px 60px -30px #000;
}
.has-sub:hover .sub{display:block}
.sub a{display:block;padding:9px 12px;border-radius:9px;font-size:12.5px;color:#b9c2cd;letter-spacing:.02em}
.sub a:hover{background:rgba(217,180,94,.12);color:var(--gold-hi)}

/* ── баннер ──────────────────────────────────────────────── */
.hero{
  position:relative;margin:0 0 26px;padding:66px 36px 40px;min-height:320px;border-radius:var(--r-lg);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(100deg,rgba(5,8,12,.92) 8%,rgba(5,8,12,.32) 42%,rgba(5,8,12,0) 66%),
    radial-gradient(80% 120% at 82% 50%,rgba(150,180,220,.2),transparent 62%),
    url("/img/theme/hero2.jpg") center 46%/cover no-repeat,#0a0d12;
  box-shadow:0 40px 90px -50px #000,inset 0 -60px 70px -50px rgba(0,0,0,.95);
}
.hero h1{
  font:700 clamp(30px,4.1vw,46px)/1.06 Georgia,serif;letter-spacing:.01em;color:#fdf8ec;
  text-shadow:0 3px 14px rgba(0,0,0,.85);
}
.hero-sub{
  margin-top:12px;font:600 11.5px/1.3 "Segoe UI",system-ui,sans-serif;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-hi);text-shadow:0 2px 6px #000;
}

/* ── стеклянная панель ───────────────────────────────────── */
.panel{
  position:relative;padding:30px 32px 34px;border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--glass),var(--glass-2));
  backdrop-filter:blur(18px) saturate(1.05);
  box-shadow:0 40px 90px -60px #000,inset 0 1px 0 rgba(255,255,255,.06);
}
.panel::before{
  content:"";position:absolute;top:0;left:26px;right:26px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,180,94,.75),transparent);
}
.headline-wrapper,.hd{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(217,180,94,.18)}
h1.title{font:700 clamp(23px,2.4vw,30px)/1.2 Georgia,serif;color:#f0e8d6;letter-spacing:.01em}
h2{font:700 19px/1.3 Georgia,serif;color:#e8dfc9;margin:26px 0 10px;letter-spacing:.01em}
h3,h4{font:700 15px/1.4 Georgia,serif;color:#dcd3bd;margin:18px 0 7px}
p{margin:0 0 13px;font-size:15.5px;line-height:1.72}
hr{border:0;border-top:1px solid var(--line-soft);margin:22px 0}

/* ── таблицы ─────────────────────────────────────────────── */
table{
  width:100%;border-collapse:separate;border-spacing:0;margin:16px 0;font-size:14px;
  border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden;
}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:last-child td{border-bottom:0}
th,thead th{
  background:rgba(255,255,255,.04);color:#cfc0a0;font:600 11px/1.3 "Segoe UI",system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;
}
tr:nth-child(even) td{background:rgba(255,255,255,.018)}
tr:hover td{background:rgba(217,180,94,.07)}
td a{color:#c9d6ea}

/* ── формы ───────────────────────────────────────────────── */
input[type=text],input[type=password],input[type=email],select,textarea{
  padding:10px 12px;color:var(--text);font:14px/1.4 inherit;
  background:rgba(8,11,15,.75);border:1px solid rgba(255,255,255,.11);border-radius:11px;outline:0;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{border-color:rgba(217,180,94,.65);box-shadow:0 0 0 3px rgba(217,180,94,.16)}
select{appearance:none;padding-right:34px;
  backdrop-filter:blur(4px);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%238b95a1'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center}
.button,input[type=submit],button{
  display:inline-flex;align-items:center;justify-content:center;min-height:42px;
  padding:0 22px;border:0;border-radius:999px;cursor:pointer;
  font:700 12px/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.11em;text-transform:uppercase;
  color:#191307;background:linear-gradient(#f7e2ab,#dcb96a 55%,#b08c3f);
  box-shadow:0 14px 30px -14px rgba(217,180,94,.85),inset 0 -1px 0 rgba(0,0,0,.25);
  transition:transform .12s,filter .15s;
}
.button:hover,input[type=submit]:hover,button:hover{transform:translateY(-1px);filter:brightness(1.06)}
.button_div{margin:22px 0 4px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.button.ghost{
  color:#dfe5ec;background:rgba(255,255,255,.06);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);font-weight:600;
}
.button.ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* ── сообщения ───────────────────────────────────────────── */
.msg,#message > div{
  position:relative;margin:0 0 22px;padding:15px 18px 15px 50px;border-radius:var(--r-md);
  border:1px solid;font:14.5px/1.6 Georgia,serif;
  background:rgba(12,16,21,.72);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 30px rgba(0,0,0,.35);
}
#message{margin:0 0 22px}
.msg::before,#message > div::before{
  content:"!";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;text-align:center;border-radius:50%;
  font:800 13px/22px "Segoe UI",sans-serif;color:#12161b;
}
.msg.error,#message .error{color:#ffd9d2;border-color:rgba(208,101,90,.55);background:rgba(120,44,36,.3)}
.msg.error::before,#message .error::before{background:var(--red)}
.msg.success,#message .success{color:#d7ebcd;border-color:rgba(132,185,108,.5);background:rgba(46,74,38,.28)}
.msg.success::before,#message .success::before{background:var(--green)}
.msg.warning,#message .warning{color:#f2e3bf;border-color:rgba(217,180,94,.5);background:rgba(90,71,30,.28)}
.msg.warning::before,#message .warning::before{background:var(--gold)}
.msg ul,#message ul{margin:0 0 0 18px}

/* ── подвал ──────────────────────────────────────────────── */
#bottom{flex:0 0 auto;margin-top:44px;border-top:1px solid var(--line-soft);background:rgba(7,10,14,.75)}
.copy{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;
  padding:30px 22px 34px;font:12.5px/1.5 "Segoe UI",system-ui,sans-serif;color:#98a2ae;
}
.copy-brand{display:flex;align-items:center;gap:12px}
.foot-crest{width:34px;height:34px;border-radius:11px;object-fit:cover;border:1px solid var(--line)}
.copy-name{font:700 17px/1 Georgia,serif;letter-spacing:.02em;color:#e2d8c1}
.copy-name span{color:var(--gold)}
.copy-nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.copy-nav a{font-size:12px;color:#a9b3bf;letter-spacing:.03em}
.copy-nav a:hover{color:var(--gold-hi)}
.copy-note{margin-left:auto;font-size:11.5px;color:#727c88;letter-spacing:.05em}

#text a,.msg a,#message a{color:#e6cd97;border-bottom:1px solid rgba(230,205,151,.4)}
#text a:hover{color:#fbe8bd;border-color:currentColor}

@media (max-width:820px){
  #shell{padding:0 16px}
  #top{margin:0 -16px}
  .topbar{padding:20px 16px 0}
  .menu{margin:80px 16px 20px}
  .hero{padding:48px 22px 30px;min-height:250px}
  .panel{padding:22px 18px 26px}
  .copy-note{margin-left:0}
}