@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Cinzel:wght@700;800;900&display=swap');

:root{
  --gold:#d6a247;--gold2:#ffe29b;--gold3:#b97519;
  --cyan:#22d3ee;
  --bg:#03070b;--text:#f4f7ff;--muted:#8f9bb3;
  --line:rgba(255,226,155,.24);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-luxury:cubic-bezier(.12,.74,.08,1);
  --transition-slow:520ms;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;overflow:hidden;letter-spacing:-.01em;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-3;
  background:url('/static/bg.png') center/cover no-repeat;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 55% 20%, rgba(90,150,190,.18), transparent 32%),
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.1), rgba(0,0,0,.35));
  filter:saturate(1.16) contrast(1.04);
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

/* ─── APP LAYOUT ─── */
.app{
  height:100vh;
  padding:20px 20px max(20px,calc(20px + env(safe-area-inset-bottom,0px))) 20px;
  display:grid;
  grid-template-columns:290px 1fr;
  gap:20px;
  perspective:2200px;
  perspective-origin:24% 48%;
}

/* ─── VIEW TRANSITIONS API — м'який fade ─── */
@view-transition { navigation: auto; }
::view-transition-old(root){animation:vt-out .22s ease-out both}
::view-transition-new(root){animation:vt-in .34s ease-out both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Sidebar незмінний при переходах */
.sidebar{view-transition-name:sb}
::view-transition-old(sb),::view-transition-new(sb){animation:none}

/* ─── GLASS — заматоване антикварне скло з різьбою та анімацією ─── */
.glass{
  position:relative;
  /* шум frosted glass + базовий темний градієнт */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(145deg,rgba(13,22,31,.55),rgba(4,8,13,.32));
  backdrop-filter:blur(38px) saturate(170%);
  -webkit-backdrop-filter:blur(38px) saturate(170%);
  border:1px solid rgba(255,228,176,.32);
  border-radius:22px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    0 0 0 1px rgba(217,164,65,.12),
    0 28px 80px rgba(0,0,0,.58),
    0 0 52px rgba(217,164,65,.14),
    inset 1.5px 1.5px 0 rgba(255,238,200,.24),
    inset -1.5px -1.5px 0 rgba(0,0,0,.40),
    inset 0 0 36px rgba(255,235,180,.05);
}
/* Яскравий хвильовий шиммер — inset:0+border-radius:inherit щоб overflow:hidden батька кліпав без зрізаних кутів */
.glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,245,220,.03) 10%,
      rgba(255,242,210,.07) 20%,
      rgba(255,240,200,.13) 30%,
      rgba(255,238,190,.20) 40%,
      rgba(255,235,170,.26) 47%,
      rgba(255,233,160,.28) 50%,
      rgba(255,235,170,.26) 53%,
      rgba(255,238,190,.20) 60%,
      rgba(255,240,200,.13) 70%,
      rgba(255,242,210,.07) 80%,
      rgba(255,245,220,.03) 90%,
      transparent 100%),
    radial-gradient(ellipse 80% 80% at var(--shim-x,80%) var(--shim-y,-15%),
      rgba(255,235,180,.30),transparent 55%);
  background-size:400% 300%, 220% 220%;
  background-position:-50% 0%, 0% 0%;
  opacity:1;mix-blend-mode:screen;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.20);
  animation:glassShim 60s ease-in-out infinite;
}
/* Декоративні золоті куточки + центральна риса зверху (з пульсом) */
.glass::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(90deg,transparent 38%,rgba(217,164,65,.6) 50%,transparent 62%) top/100% 1px no-repeat,
    linear-gradient(135deg,rgba(255,235,180,.55),transparent 18px) top left/30px 30px no-repeat,
    linear-gradient(225deg,rgba(255,235,180,.55),transparent 18px) top right/30px 30px no-repeat,
    linear-gradient(45deg,rgba(255,228,170,.38),transparent 18px) bottom left/30px 30px no-repeat,
    linear-gradient(315deg,rgba(255,228,170,.38),transparent 18px) bottom right/30px 30px no-repeat;
  opacity:.9;
  animation:goldPulse 6s ease-in-out infinite;
}
@keyframes glassShim{
  0%   { background-position: 150% 0%, 100% 80% }
  50%  { background-position:-50% 0%, 0% 0% }
  100% { background-position: 150% 0%, 100% 80% }
}
@keyframes goldPulse{
  0%,100%{opacity:.78}
  50%    {opacity:1}
}
.glass.sidebar::after{
  display:block;content:"";position:absolute;inset:-20%;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(ellipse 160% 38% at 50% 20%,rgba(217,164,65,.11),transparent 60%),
    radial-gradient(ellipse 120% 30% at 50% 80%,rgba(100,120,220,.07),transparent 55%);
  mix-blend-mode:screen;
  animation:sidebarGlow 55s ease-in-out infinite alternate;
}
@keyframes sidebarGlow{
  0%  {opacity:.5;transform:translateY(-6%)}
  35% {opacity:1; transform:translateY(4%)}
  65% {opacity:.7;transform:translateY(10%)}
  100%{opacity:.9;transform:translateY(-2%)}
}
.glass.sidebar::before{inset:0;border:none;background:
  linear-gradient(130deg,rgba(255,255,255,.18),transparent 18%,transparent 72%,rgba(255,205,112,.10)),
  radial-gradient(circle at 80% 0%,rgba(255,222,150,.18),transparent 20%);
  opacity:.85;border-radius:inherit;animation:none}

/* Аналогічна анімація для .panel — світловий зайчик */
.panel::after,.card::after{animation:goldPulse 7s ease-in-out infinite}
.panel::before,.card::before{
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,245,220,.02) 10%,
      rgba(255,242,210,.05) 20%,
      rgba(255,240,200,.09) 30%,
      rgba(255,238,190,.14) 40%,
      rgba(255,235,170,.18) 47%,
      rgba(255,233,160,.20) 50%,
      rgba(255,235,170,.18) 53%,
      rgba(255,238,190,.14) 60%,
      rgba(255,240,200,.09) 70%,
      rgba(255,242,210,.05) 80%,
      rgba(255,245,220,.02) 90%,
      transparent 100%),
    radial-gradient(ellipse 70% 80% at 82% -10%,rgba(255,222,150,.18),transparent 36%);
  background-size:400% 300%, 100% 100%;
  background-position:-50% 0%, 0 0;
  animation:panelShim 75s ease-in-out infinite;
}
@keyframes panelShim{
  0%   { background-position: 150% 0%, 0 0 }
  50%  { background-position:-50% 0%, 0 0 }
  100% { background-position: 150% 0%, 0 0 }
}

/* Користувач увімкнув "зменшений рух" — вимикаємо анімації */
@media (prefers-reduced-motion: reduce){
  .glass::before,.glass::after,
  .panel::before,.panel::after,
  .card::before,.card::after{animation:none}
}

/* ─── SIDEBAR ─── */
.sidebar{
  padding:14px 22px;
  display:flex;flex-direction:column;
  position:relative;z-index:10;
  transform:translateZ(72px) rotateY(-4deg);
  box-shadow:48px 0 105px rgba(0,0,0,.62),0 34px 92px rgba(0,0,0,.58),inset 1px 1px 0 rgba(255,255,255,.12),inset -18px 0 34px rgba(0,0,0,.38);
}
.side-brand{
  display:flex;align-items:center;justify-content:center;
  margin:-4px -12px 8px;
}
.side-logo{
  width:100%;height:auto;
  display:block;
  filter:drop-shadow(0 0 14px rgba(217,164,65,.6)) brightness(1.1);
  transition:filter .35s;
}
.side-logo:hover{filter:drop-shadow(0 0 26px rgba(217,164,65,.9)) brightness(1.2)}
@keyframes navSlideIn{
  from{opacity:0;transform:translateX(-18px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes activeGlow{
  0%,100%{box-shadow:0 0 18px rgba(217,164,65,.18),inset 0 0 16px rgba(255,215,128,.06)}
  50%{box-shadow:0 0 36px rgba(217,164,65,.38),inset 0 0 28px rgba(255,215,128,.14)}
}
@keyframes navSweep{
  0%{top:0%;opacity:0}
  5%{opacity:1}
  95%{opacity:1}
  100%{top:65%;opacity:0}
}
.nav{
  display:flex;flex-direction:column;gap:3px;
  overflow-y:auto;flex:1;margin-bottom:10px;padding-right:2px;
  position:relative;
}
.nav::after{
  content:'';
  position:absolute;top:0;left:6px;right:6px;height:35%;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(217,164,65,.07) 30%,
    rgba(217,164,65,.13) 50%,
    rgba(217,164,65,.07) 70%,
    transparent 100%);
  border-radius:12px;
  pointer-events:none;z-index:0;
  animation:navSweep 5s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay:2s;
}
.nav a{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:14px;
  width:100%;padding:12px 16px;
  color:rgba(238,244,255,.6);
  border:1px solid transparent;background:transparent;
  border-radius:14px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .16s;
  font-size:15px;font-weight:500;letter-spacing:.01em;
  animation:navSlideIn .4s both;
  overflow:hidden;
}
.nav a::before{
  content:'';position:absolute;left:0;top:15%;bottom:15%;
  width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  transform:scaleY(0);transform-origin:center;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
  opacity:0;
}
/* shimmer на hover */
.nav a::after{
  content:'';position:absolute;
  top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,215,128,.08),transparent);
  transform:skewX(-18deg);
  transition:left .5s ease;
  pointer-events:none;
}
.nav a:hover::after{left:160%}
.nav a:hover{
  background:rgba(255,255,255,.06);
  color:#f1f5f9;
  border-color:rgba(255,255,255,.08);
  transform:translateX(4px);
}
.nav a:hover::before{transform:scaleY(.65);opacity:.7}
.nav a.active{
  color:#ffdc8c;
  background:linear-gradient(90deg,rgba(217,164,65,.24),rgba(255,255,255,.02));
  border-color:rgba(255,215,128,.35);
  animation:activeGlow 3s ease-in-out infinite;
  transform:translateX(0);
}
.nav a.active::before{transform:scaleY(1);opacity:1}
.nav-ico{
  width:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),filter .2s;
}
.nav a:hover .nav-ico{transform:scale(1.22) rotate(-4deg)}
.nav a.active .nav-ico{transform:scale(1.15)}

/* ─── SVG ICONS ─── */
.ico{display:inline-block;vertical-align:-3px;flex-shrink:0;
  transition:stroke .2s,filter .2s,transform .2s}
.nav-ico .ico{stroke:rgba(255,235,200,.45)}
.nav a:hover .nav-ico .ico{stroke:var(--gold2);filter:drop-shadow(0 0 8px rgba(217,164,65,.6))}
.nav a.active .nav-ico .ico{stroke:var(--gold2);filter:drop-shadow(0 0 12px rgba(217,164,65,.75))}
.profile{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid rgba(255,215,128,.1);
  position:relative;
}
.profile::before{
  content:'';position:absolute;top:-1px;left:20%;right:20%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,164,65,.45),transparent);
}
.userbox{
  display:flex;gap:11px;align-items:center;
  padding:10px 12px;border-radius:16px;
  background:linear-gradient(135deg,rgba(217,164,65,.07),rgba(0,0,0,.15));
  border:1px solid rgba(217,164,65,.15);
  margin-bottom:8px;
  transition:.2s;
  position:relative;overflow:hidden;
}
.userbox::before{
  content:'';position:absolute;inset:0;border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.03),transparent);
  pointer-events:none;
}
.userbox:hover{
  background:linear-gradient(135deg,rgba(217,164,65,.13),rgba(0,229,255,.05));
  border-color:rgba(217,164,65,.35);
  box-shadow:0 4px 20px rgba(217,164,65,.1);
}
@keyframes avatarPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(217,164,65,.45),0 0 16px rgba(217,164,65,.25),inset 0 1px 0 rgba(255,255,255,.12)}
  50%{box-shadow:0 0 0 6px rgba(217,164,65,.0),0 0 24px rgba(217,164,65,.45),inset 0 1px 0 rgba(255,255,255,.12)}
}
@keyframes onlinePing{
  0%{transform:scale(1);opacity:1}
  70%{transform:scale(2.2);opacity:0}
  100%{transform:scale(1);opacity:0}
}
.avatar{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;
  background:radial-gradient(circle at 35% 35%,rgba(255,226,155,.18),rgba(180,120,20,.12));
  border:1.5px solid rgba(255,215,128,.55);
  box-shadow:0 0 16px rgba(217,164,65,.3),inset 0 1px 0 rgba(255,255,255,.12);
  position:relative;
  animation:avatarPulse 3s ease-in-out infinite;
}
.avatar-wrap{position:relative;flex-shrink:0}
.avatar-online{
  position:absolute;bottom:1px;right:1px;
  width:9px;height:9px;border-radius:50%;
  background:#22c55e;
  border:1.5px solid rgba(10,18,30,.9);
  box-shadow:0 0 6px rgba(34,197,94,.6);
}
.avatar-online::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:#22c55e;
  animation:onlinePing 2s ease-out infinite;
}
.btn-logout{
  width:100%;padding:10px;border-radius:12px;
  color:#ff7b68;background:rgba(255,80,65,.06);
  border:1px solid rgba(255,80,65,.15);
  cursor:pointer;font-size:12px;font-weight:600;
  transition:.2s;display:flex;align-items:center;justify-content:center;gap:7px;
}
.btn-logout:hover{background:rgba(255,80,65,.14);border-color:rgba(255,80,65,.35);color:#ff9d8e}

/* ─── CONTENT ─── */
.content{
  overflow:hidden;padding-right:4px;
  perspective:1800px;
  perspective-origin:left center;
  transform-style:preserve-3d;
  position:relative;z-index:4;
  contain:layout;
}
.content::before{
  content:"";position:absolute;left:-52px;top:16px;bottom:16px;width:90px;
  z-index:9;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.56),rgba(0,0,0,.24),transparent);
}
.content::-webkit-scrollbar{width:5px}
.content::-webkit-scrollbar-track{background:transparent}
.content::-webkit-scrollbar-thumb{background:rgba(217,164,65,.2);border-radius:3px}
.screen{
  display:block;position:absolute;inset:6px 8px 10px 0;
  overflow-y:auto;overflow-x:hidden;
  opacity:1;pointer-events:all;
  padding-right:6px;
}
.screen::-webkit-scrollbar{width:4px}
.screen::-webkit-scrollbar-track{background:transparent}
.screen::-webkit-scrollbar-thumb{background:rgba(217,164,65,.2);border-radius:2px}
.screen.active,.screen.entering{opacity:1;pointer-events:all;transform:none;filter:none}
/* старі складні переходи відключені — переходи робить View Transitions API */
.screen.leaving{opacity:0;transition:opacity .2s ease-out;pointer-events:none}
/* WIND TRAIL відключено */
.wind-layer{display:none}

/* ─── TOPLINE ─── */
.topline{display:flex;align-items:center;justify-content:space-between;margin:6px 0 22px;gap:12px}
.topline h2{font-size:30px;font-weight:800;color:var(--text)}
.topline p{font-size:13px;color:var(--muted);margin-top:3px}

/* ─── QUICK PREMIUM ─── */
.quick-premium{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;
  transform-style:preserve-3d;
}
.quick-premium button{
  position:relative;min-height:62px;text-align:left;
  padding:12px 12px 10px 56px;
  border-radius:20px;color:#fff;
  border:1px solid rgba(255,226,155,.28);
  background:linear-gradient(145deg,rgba(255,225,155,.16),rgba(24,32,45,.72) 42%,rgba(3,6,10,.72));
  box-shadow:0 30px 74px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -22px 30px rgba(0,0,0,.24),0 0 0 1px rgba(255,255,255,.035);
  cursor:pointer;overflow:hidden;
  transform:translateZ(36px);
  transition:transform 1.05s var(--ease-luxury),box-shadow 1.05s var(--ease-luxury),border-color 1.05s var(--ease-luxury);
}
.quick-premium button:hover{
  transform:translateY(-8px) translateZ(88px) rotateX(7deg) rotateY(-5deg);
  border-color:rgba(255,226,155,.58);
  box-shadow:0 46px 110px rgba(0,0,0,.68),0 0 70px rgba(214,162,71,.23),inset 0 1px 0 rgba(255,255,255,.26);
}
.quick-premium button:before{
  content:"";position:absolute;inset:-1px;
  background:linear-gradient(90deg,rgba(255,255,255,.23),transparent 28%,transparent 65%,rgba(255,210,110,.18));
  opacity:.75;pointer-events:none;
}
.quick-premium button:after{
  content:"";position:absolute;top:-45%;bottom:-45%;width:54px;left:-80px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:rotate(18deg);
  transition:left 1.45s var(--ease-luxury);
  pointer-events:none;
}
.quick-premium button:hover:after{left:120%}
.quick-premium button span{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:20px;line-height:1;
  filter:drop-shadow(0 0 10px rgba(217,164,65,.5));
}
.quick-premium button b{display:block;font-size:14px;font-weight:700;color:#f4e8c0;margin-bottom:3px}
.quick-premium button small{font-size:11px;color:var(--muted)}

/* ─── PANEL / CARD — антикварний кришталь з гранями ─── */
.panel,.card{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(13,22,31,.55),rgba(4,8,13,.30));
  border:1px solid rgba(255,228,176,.30);
  border-radius:18px;padding:24px 26px;margin-bottom:18px;
  backdrop-filter:blur(30px) saturate(160%);
  -webkit-backdrop-filter:blur(30px) saturate(160%);
  box-shadow:
    /* зовнішнє золоте кільце */
    0 0 0 1px rgba(217,164,65,.10),
    0 22px 64px rgba(0,0,0,.55),
    0 0 38px rgba(217,164,65,.10),
    /* грань: світла фаска TL */
    inset 1.5px 1.5px 0 rgba(255,238,200,.22),
    /* грань: темна фаска BR */
    inset -1.5px -1.5px 0 rgba(0,0,0,.38),
    /* внутрішнє світло */
    inset 0 0 28px rgba(255,235,180,.045);
  transition:transform .25s var(--ease-luxury),box-shadow .25s var(--ease-luxury);
  animation:ambientBreathe 60s ease-in-out infinite;
}
@keyframes ambientBreathe{
  0%{
    filter:brightness(1) saturate(1);
    box-shadow:
      0 0 0 1px rgba(217,164,65,.15),
      24px -24px 55px rgba(217,164,65,.45),
      -14px  14px 40px rgba(80,110,220,.20),
      inset 1.5px 1.5px 0 rgba(255,238,200,.22),
      inset -1.5px -1.5px 0 rgba(0,0,0,.38);
  }
  25%{
    filter:brightness(1.15) saturate(1.25);
    box-shadow:
      0 0 0 1px rgba(217,164,65,.22),
      24px  24px 55px rgba(217,164,65,.45),
      -14px -14px 40px rgba(80,110,220,.20),
      inset 1.5px 1.5px 0 rgba(255,238,200,.35),
      inset -1.5px -1.5px 0 rgba(0,0,0,.38);
  }
  50%{
    filter:brightness(1.25) saturate(1.40);
    box-shadow:
      0 0 0 1px rgba(217,164,65,.28),
      -24px 24px 55px rgba(217,164,65,.45),
      14px -14px 40px rgba(80,110,220,.20),
      inset 1.5px 1.5px 0 rgba(255,238,200,.48),
      inset -1.5px -1.5px 0 rgba(0,0,0,.38);
  }
  75%{
    filter:brightness(1.15) saturate(1.25);
    box-shadow:
      0 0 0 1px rgba(217,164,65,.22),
      -24px -24px 55px rgba(217,164,65,.45),
      14px  14px 40px rgba(80,110,220,.20),
      inset 1.5px 1.5px 0 rgba(255,238,200,.35),
      inset -1.5px -1.5px 0 rgba(0,0,0,.38);
  }
  100%{
    filter:brightness(1) saturate(1);
    box-shadow:
      0 0 0 1px rgba(217,164,65,.15),
      24px -24px 55px rgba(217,164,65,.45),
      -14px  14px 40px rgba(80,110,220,.20),
      inset 1.5px 1.5px 0 rgba(255,238,200,.22),
      inset -1.5px -1.5px 0 rgba(0,0,0,.38);
  }
}
/* Другий внутрішній контур — імітація різьбленого канта */
.panel::before,.card::before{
  content:"";position:absolute;inset:6px;pointer-events:none;border-radius:13px;
  border:1px solid rgba(255,228,176,.16);
  background:
    linear-gradient(125deg,rgba(255,236,180,.10),transparent 22%,transparent 78%,rgba(255,228,180,.07)),
    radial-gradient(circle at 82% -8%,rgba(255,235,180,.14),transparent 30%);
  opacity:.92;mix-blend-mode:screen;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
/* Декоративні золоті куточки + центральна риса зверху (filigree) */
.panel::after,.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    /* верхня центральна золота риса */
    linear-gradient(90deg,transparent 38%,rgba(217,164,65,.55) 50%,transparent 62%) top/100% 1px no-repeat,
    /* кутові filigree штрихи */
    linear-gradient(135deg,rgba(255,235,180,.45),transparent 14px) top left/26px 26px no-repeat,
    linear-gradient(225deg,rgba(255,235,180,.45),transparent 14px) top right/26px 26px no-repeat,
    linear-gradient(45deg,rgba(255,228,170,.32),transparent 14px) bottom left/26px 26px no-repeat,
    linear-gradient(315deg,rgba(255,228,170,.32),transparent 14px) bottom right/26px 26px no-repeat;
  opacity:.85;
  filter:drop-shadow(0 0 4px rgba(217,164,65,.35));
}
.panel:hover,.card:hover{
  box-shadow:
    0 0 0 1px rgba(217,164,65,.18),
    0 26px 76px rgba(0,0,0,.62),
    0 0 46px rgba(217,164,65,.18),
    inset 1.5px 1.5px 0 rgba(255,238,200,.30),
    inset -1.5px -1.5px 0 rgba(0,0,0,.42),
    inset 0 0 34px rgba(255,235,180,.06);
}
.panel:hover::after,.card:hover::after{opacity:1;filter:drop-shadow(0 0 7px rgba(217,164,65,.55))}
.panel-head,.card-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.panel h3,.card-title{font-size:14px;font-weight:700;color:#d4d8e0}

/* ─── METRIC (glass) ─── */
.metric{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(13,22,31,.62),rgba(4,8,13,.42));
  border:1px solid var(--line);border-radius:16px;
  padding:12px 16px;margin-bottom:0;
  display:flex;align-items:center;gap:12px;
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  box-shadow:
    0 12px 38px rgba(0,0,0,.4),
    inset 0 0 22px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s,box-shadow .2s;
}
.metric::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.metric:hover{box-shadow:0 14px 38px rgba(217,164,65,.18);transform:translateY(-2px)}
a.metric:hover{border-color:rgba(217,164,65,.3)}
.metric-circle{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:rgba(217,164,65,.08);border:1px solid rgba(255,215,128,.22);
  color:var(--gold2);
}
.metric-circle.mc-blue{background:rgba(99,179,237,.10);border-color:rgba(147,197,253,.30);color:#93c5fd}
.metric-circle.mc-green{background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.30);color:#34d399}
.metric-circle.mc-red{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.28);color:#f87171}
.metric-circle.mc-gold{background:rgba(217,164,65,.10);border-color:rgba(255,215,128,.28);color:var(--gold2)}
.metric-circle .ico{filter:drop-shadow(0 0 6px currentColor)}
.metric b,.metric-val{font-size:26px;font-weight:800;line-height:1;color:var(--gold2)}
.metric b.v-green,.metric-val.v-green{color:#34d399}
.metric b.v-red,.metric-val.v-red{color:#f87171}
.metric b.v-blue,.metric-val.v-blue{color:#93c5fd}
.metric b.v-muted,.metric-val.v-muted{color:var(--muted);font-size:20px}
.metric span,.metric-lbl{display:block;margin-top:3px;color:rgba(238,244,255,.5);font-size:10px;letter-spacing:.1em;text-transform:uppercase}

/* ─── TABLE ─── */
table,.table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:rgba(238,244,255,.43);font-size:11px;letter-spacing:1.5px;padding:10px 12px;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.06)}
td{padding:13px 12px;border-top:1px solid rgba(255,255,255,.05);color:rgba(238,244,255,.8);vertical-align:middle}
tr:hover td{background:rgba(217,164,65,.03)}

/* ─── FILE ROW ─── */
.file-row{
  display:grid;grid-template-columns:1fr 120px 160px 90px;
  align-items:center;gap:12px;
  padding:13px 16px;margin-bottom:8px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  transition:all .2s;
}
.file-row:hover{background:rgba(255,226,155,.04);border-color:rgba(255,226,155,.14)}
.file-row b{font-size:13px;font-weight:600}
.file-row .fr-meta{font-size:12px;color:var(--muted)}
.file-row .fr-actions{display:flex;justify-content:flex-end;gap:6px}

/* ─── DEV CARD ─── */
.dev-card{
  display:flex;align-items:center;gap:14px;
  padding:13px 16px;border-radius:14px;margin-bottom:8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  transition:all .2s;
}
.dev-card:hover{background:rgba(255,226,155,.04);border-color:rgba(255,226,155,.1)}
.dev-card .dc-info{flex:1;min-width:0;overflow:hidden}
.dev-card .dc-name{font-size:13px;font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-card .dc-meta{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ─── BUTTONS ─── */
.btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 16px;border-radius:10px;border:none;
  font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;line-height:1;
}
.btn:active{transform:scale(.96)!important}
.btn-p{background:linear-gradient(135deg,#d4a843,#9a7020);color:#07090e;box-shadow:0 4px 18px rgba(201,164,85,.35)}
.btn-p:hover{box-shadow:0 6px 28px rgba(201,164,85,.6);transform:translateY(-2px);filter:brightness(1.1)}
.btn-d{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2)}
.btn-d:hover{background:rgba(239,68,68,.22)}
.btn-w{background:rgba(245,158,11,.1);color:#fbbf24;border:1px solid rgba(245,158,11,.2)}
.btn-w:hover{background:rgba(245,158,11,.22)}
.btn-g{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid rgba(255,255,255,.1)}
.btn-g:hover{background:rgba(255,255,255,.1);color:#ccd3e0}
.btn-s{padding:6px 12px;font-size:12px}
.btn-xs{padding:4px 9px;font-size:11px;border-radius:7px}
.panel-btn,.small-btn{
  padding:9px 16px;border-radius:12px;
  border:1px solid rgba(255,215,128,.25);
  background:rgba(255,255,255,.035);color:#ffdc8c;cursor:pointer;
  font-size:12px;font-weight:600;transition:.2s;
}
.panel-btn:hover,.small-btn:hover{background:rgba(255,215,128,.08);border-color:rgba(255,215,128,.4)}

/* ─── BADGES ─── */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;line-height:1.6}
.b-on{background:rgba(16,185,129,.1);color:#34d399;border:1px solid rgba(16,185,129,.25)}
.b-off{background:rgba(71,85,105,.1);color:var(--muted);border:1px solid rgba(71,85,105,.2)}
.b-warn{background:rgba(245,158,11,.1);color:#fbbf24;border:1px solid rgba(245,158,11,.25)}
.b-blue{background:rgba(217,164,65,.1);color:var(--gold2);border:1px solid rgba(217,164,65,.25)}
.b-red{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.25)}

/* ─── STATUS DOT ─── */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.d-g{background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.9);animation:glow-g 2s infinite}
.d-r{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.6)}
.d-gr{background:#334155}
.d-y{background:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.8);animation:glow-y 2s infinite}
@keyframes glow-g{0%,100%{box-shadow:0 0 6px rgba(16,185,129,.7)}50%{box-shadow:0 0 14px rgba(16,185,129,1)}}
@keyframes glow-y{0%,100%{box-shadow:0 0 6px rgba(245,158,11,.6)}50%{box-shadow:0 0 14px rgba(245,158,11,1)}}

/* ─── FORMS ─── */
.fg{margin-bottom:14px}
.fl{display:block;font-size:10px;font-weight:700;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.1em}
.fc{
  width:100%;padding:10px 14px;
  background:#060d14!important;
  border:1px solid rgba(255,215,128,.22);
  border-radius:12px;color:var(--text)!important;font-size:13px;outline:none;transition:.2s;
  color-scheme:dark;
  -webkit-appearance:none;appearance:none;
}
.fc:focus{border-color:rgba(217,164,65,.5)!important;background:rgba(6,16,22,.92)!important;box-shadow:0 0 0 3px rgba(217,164,65,.1)}
.fc::placeholder{color:rgba(238,244,255,.25)!important}
/* SELECT — власна стрілка, повністю темний */
select.fc{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4a843' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 13px center!important;
  background-size:11px!important;
  padding-right:36px;cursor:pointer;
}
select.fc option{background:#060d14!important;color:var(--text)!important}
select.fc option:hover,select.fc option:checked{background:#1a2d1a!important}
textarea.fc{resize:vertical;min-height:72px;-webkit-appearance:none;appearance:auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* date/time picker icon — золотий колір */
input[type="date"].fc,input[type="time"].fc{
  appearance:auto;-webkit-appearance:auto;
}
input[type="date"].fc::-webkit-calendar-picker-indicator,
input[type="time"].fc::-webkit-calendar-picker-indicator{
  filter:brightness(0) saturate(100%) invert(72%) sepia(48%) saturate(500%) hue-rotate(5deg) brightness(95%);
  cursor:pointer;opacity:.85;background:transparent;
}
input[type="date"].fc::-webkit-calendar-picker-indicator:hover,
input[type="time"].fc::-webkit-calendar-picker-indicator:hover{opacity:1}
/* ── CUSTOM CHECKBOXES — повністю ручний стиль, без accent-color ── */
input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  width:17px!important;height:17px!important;
  min-width:17px;flex-shrink:0;
  background:#060d14;
  border:1.5px solid rgba(255,215,128,.35);
  border-radius:4px;
  cursor:pointer;
  position:relative;
  transition:border-color .15s, background .15s, box-shadow .15s;
  vertical-align:-3px;
}
input[type="checkbox"]:hover{border-color:rgba(212,168,67,.7);box-shadow:0 0 0 3px rgba(212,168,67,.12)}
input[type="checkbox"]:checked{
  background:linear-gradient(135deg,#d4a843,#9a7020);
  border-color:#d4a843;
  box-shadow:0 0 8px rgba(212,168,67,.4);
}
input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;left:4px;top:1px;
  width:6px;height:10px;
  border:2px solid #07090e;
  border-top:none;border-left:none;
  transform:rotate(42deg);
  display:block;
}
input[type="radio"]{accent-color:#d4a843;cursor:pointer}
/* modal — примусово темна схема для всіх дочірніх елементів */
.modal-box{color-scheme:dark}

/* ─── MODAL ─── */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.85);
  backdrop-filter:blur(8px);z-index:200;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s,visibility .25s;
}
.modal.open{opacity:1;visibility:visible;pointer-events:all}
.modal-box{
  background:linear-gradient(145deg,rgba(13,22,31,.9),rgba(4,8,13,.8));
  backdrop-filter:blur(28px);border:1px solid var(--line);
  border-radius:22px;padding:28px;width:520px;max-width:95vw;max-height:90vh;overflow-y:auto;
  transform:scale(.94) translateY(-12px);
  transition:transform .28s cubic-bezier(.34,1.4,.64,1);
  box-shadow:0 28px 90px rgba(0,0,0,.7),0 0 60px rgba(217,164,65,.08);
}
.modal.open .modal-box{transform:scale(1) translateY(0)}
.modal-title{font-size:15px;font-weight:700;margin-bottom:18px;color:#d4d8e0;padding-bottom:14px;border-bottom:1px solid rgba(217,164,65,.12)}

/* ─── ALERTS ─── */
.alert{padding:11px 15px;border-radius:10px;font-size:13px;margin-bottom:14px;animation:fadeUp .3s ease}
.a-ok{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);color:#34d399}
.a-err{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#f87171}

/* ─── GRIDS ─── */
.grid-4,.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.grid-3,.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

/* ─── MISC ─── */
.empty{height:100px;display:grid;place-items:center;color:rgba(238,244,255,.45);font-size:13px}
.empty a{color:var(--gold2);font-weight:700}
.muted{color:var(--muted)}
.mono{font-family:'Courier New',monospace;font-size:12px;color:var(--muted)}
code{background:rgba(217,164,65,.08);border:1px solid rgba(217,164,65,.15);padding:1px 6px;border-radius:4px;font-size:12px;color:var(--gold2)}
hr{border:none;border-top:1px solid rgba(217,164,65,.08);margin:16px 0}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tilt-live{transform-style:preserve-3d;transition:transform .18s ease,box-shadow .18s ease!important}
.tilt-live:hover{box-shadow:0 14px 40px rgba(0,0,0,.4),0 0 24px rgba(217,164,65,.08)!important}

/* ─── UPLOAD ZONE ─── */
.upload-zone,.drop-zone-demo{
  height:200px;border:1px dashed rgba(255,215,128,.35);
  border-radius:20px;display:grid;place-items:center;
  background:rgba(255,255,255,.02);text-align:center;
  cursor:pointer;transition:.2s;
}
.upload-zone:hover{border-color:var(--gold2);background:rgba(217,164,65,.05)}

/* ─── LOGIN ─── */
.login-wrap{height:100vh;display:grid;place-items:center;perspective:1100px}
.login-card{width:min(420px,calc(100vw - 32px));padding:48px 36px 36px;transform:translateY(-8px)}
.login-brand{text-align:center;margin-bottom:20px}
.login-logo-img{
  display:block;margin:0 auto 8px;
  width:auto;max-width:220px;height:auto;
  filter:drop-shadow(0 0 24px rgba(217,164,65,.9)) drop-shadow(0 0 8px rgba(34,211,238,.3)) brightness(1.14);
}
.login-sub{font-size:11px;color:rgba(238,244,255,.4);letter-spacing:.2em;text-transform:uppercase;margin-top:4px}
.login-field{
  display:flex;align-items:center;gap:12px;
  height:52px;padding:0 16px;
  border:1px solid rgba(255,215,128,.22);border-radius:14px;
  background:rgba(3,8,12,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 24px rgba(0,0,0,.18);
  transition:border-color .2s,box-shadow .2s;
}
.login-field:focus-within{
  border-color:rgba(217,164,65,.6);
  box-shadow:0 0 0 3px rgba(217,164,65,.1),inset 0 1px 0 rgba(255,255,255,.04);
}
.login-field input{width:100%;border:0;background:transparent;outline:0;color:#eaf1ff;font-size:16px}
.login-field .icon{opacity:.45;font-size:16px}

/* ─── PRIMARY LOGIN BUTTON ─── */
.btn-login{
  position:relative;overflow:hidden;
  width:100%;height:58px;border-radius:14px;border:0;cursor:pointer;
  color:#1a0e00;font-weight:600;font-size:15px;letter-spacing:.5px;
  background:linear-gradient(160deg,#f5d078 0%,#d4a032 28%,#b8781a 62%,#c9920e 82%,#e8c45a 100%);
  box-shadow:
    0 4px 14px rgba(0,0,0,.35),
    0 1px 3px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.25);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.btn-login::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(175deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 48%,transparent 49%);
  pointer-events:none;
}
.btn-login:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:
    0 8px 22px rgba(0,0,0,.38),
    0 2px 5px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.2);
}
.btn-login:active{
  transform:translateY(1px);
  filter:brightness(.96);
  box-shadow:
    0 2px 6px rgba(0,0,0,.4),
    0 1px 2px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 2px 4px rgba(0,0,0,.2);
}

/* ─── TELEGRAM BUTTON — визуально идентична .btn-login (золотой стиль) ─── */
/* класс .btn-tg оставлен как хук для будущих специфичных правил */

/* ─── RESPONSIVE ─── */
.sb-toggle{display:none;position:fixed;top:14px;left:14px;z-index:300;
  width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  background:rgba(217,164,65,.15);color:var(--gold2);font-size:18px;
  align-items:center;justify-content:center;cursor:pointer}
.sb-overlay{
  display:none;position:fixed;inset:0;z-index:199;
  background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
}
.sb-overlay.open{display:block}
@media(max-width:1100px){
  body{overflow:auto}
  .app{height:auto;min-height:100vh;grid-template-columns:1fr;padding:14px;perspective:none}
  .sidebar{display:none;position:fixed;top:0;left:0;bottom:0;z-index:200;border-radius:0;width:280px;transform:none}
  .sidebar.open{display:flex}
  .sb-toggle{display:flex}
  .content{overflow:visible;perspective:none;contain:none;height:auto;min-width:0}
  .content::before{display:none}
  .screen{position:relative;inset:auto;overflow:visible;height:auto;
    max-width:100%;min-width:0;
    transform:none!important;filter:none!important;opacity:1!important;
    pointer-events:all!important;transition:.45s ease!important}
  .screen.leaving{display:none!important}
  .grid4,.grid-4{grid-template-columns:repeat(2,1fr)}
  .grid3,.grid-3{grid-template-columns:repeat(2,1fr)}
  .quick-premium{grid-template-columns:repeat(2,1fr)}
  .wind-layer{display:none}
  .tilt-live,.tilt-live:hover{transform:none!important}
}
@media(max-width:600px){
  /* Prevent horizontal overflow of entire page */
  body{overflow-x:hidden}
  .app{padding:10px;overflow-x:hidden}

  .grid4,.grid-4,.grid3,.grid-3,.grid-2,.file-row,.form-row{grid-template-columns:1fr}
  .file-row .fr-meta{display:none}
  .quick-premium{grid-template-columns:1fr}
  .quick-premium button{min-height:54px;padding:10px 10px 10px 50px}
  .topline{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:14px;padding-left:46px}
  .topline h2{font-size:22px}
  .topline>div:last-child{align-self:flex-start}
  .panel,.card{padding:14px 16px}
  .panel{overflow-x:auto;overflow-y:visible}
  table{min-width:420px}
  .modal-box{padding:20px 16px;border-radius:16px;max-width:calc(100vw - 16px)}
  .btn{padding:10px 14px;font-size:13px}
  /* Topline button wraps below title on small screens */
  .topline{flex-wrap:wrap}
  .topline button,.topline a.btn{align-self:flex-start}
  /* Schedule days wrap inside table cells */
  td .badge{white-space:nowrap}
  /* two-col form grid collapses to single column */
  .two-col{grid-template-columns:1fr!important}
  /* dev-card badge stays right */
  .dev-card{flex-wrap:nowrap}
  /* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
  input,select,textarea,.fc{font-size:16px!important}
  .fc::placeholder{font-size:14px}

  .sb-toggle{width:36px;height:36px;top:12px;left:12px;font-size:16px}
  /* login logo — smaller on mobile */
  .login-logo-img{max-width:100px}
  /* schedule table scrollable on mobile */
  .tbl-schedule{min-width:700px}
  /* pending-assign form vertical on mobile */
  .pending-assign-form{flex-direction:column;gap:6px}
  .pending-assign-select{width:100%}
  .pending-assign-form .btn{width:100%;justify-content:center}
  /* help-modal: single column */
  .help-row{grid-template-columns:1fr!important;gap:3px}
  .help-row a{font-size:12px}
}

/* ─── PENDING ASSIGN FORM ─── */
.pending-assign-form{display:flex;gap:6px;align-items:center}
.pending-assign-select{padding:4px 8px;font-size:12px}

/* ─── SCHEDULE TABLE SCROLL WRAPPER ─── */
.tbl-scroll-wrap{overflow-x:auto}

/* ─── HELP MODAL ROWS ─── */
.help-row{
  display:grid;grid-template-columns:140px 1fr;gap:8px;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);
}

/* ─── PAGE HINT — антикварне скло у куті екрану ─── */
.hint-card{
  position:fixed;bottom:84px;right:24px;z-index:9999;
  max-width:340px;width:calc(100vw - 48px);
  padding:18px 20px;border-radius:18px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(145deg,rgba(13,22,31,.92),rgba(4,8,13,.85));
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid rgba(255,228,176,.32);
  box-shadow:
    0 0 0 1px rgba(217,164,65,.12),
    0 22px 60px rgba(0,0,0,.65),
    0 0 40px rgba(217,164,65,.16),
    inset 1.5px 1.5px 0 rgba(255,238,200,.22),
    inset -1.5px -1.5px 0 rgba(0,0,0,.40);
  overflow:hidden;
  animation:hintIn .42s cubic-bezier(.18,.7,.18,1) both;
  transition:opacity .28s, transform .28s;
}
.hint-card::before{
  content:"";position:absolute;inset:6px;pointer-events:none;border-radius:12px;
  border:1px solid rgba(255,228,176,.16);
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,245,220,.03) 15%,
    rgba(255,240,200,.10) 30%,
    rgba(255,238,190,.14) 42%,
    rgba(255,235,170,.18) 50%,
    rgba(255,238,190,.14) 58%,
    rgba(255,240,200,.10) 70%,
    rgba(255,245,220,.03) 85%,
    transparent 100%);
  background-size:400% 300%;background-position:-50% 0%;
  animation:glassShim 60s ease-in-out infinite;mix-blend-mode:screen;
}
.hint-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(90deg,transparent 38%,rgba(217,164,65,.55) 50%,transparent 62%) top/100% 1px no-repeat,
    linear-gradient(135deg,rgba(255,235,180,.50),transparent 16px) top left/26px 26px no-repeat,
    linear-gradient(225deg,rgba(255,235,180,.50),transparent 16px) top right/26px 26px no-repeat,
    linear-gradient(45deg,rgba(255,228,170,.32),transparent 16px) bottom left/26px 26px no-repeat,
    linear-gradient(315deg,rgba(255,228,170,.32),transparent 16px) bottom right/26px 26px no-repeat;
  filter:drop-shadow(0 0 4px rgba(217,164,65,.4));
  opacity:.88;animation:goldPulse 6s ease-in-out infinite;
}
.hint-card > *{position:relative;z-index:1}
.hint-row{display:flex;align-items:flex-start;gap:13px}
.hint-title{font-size:14px;font-weight:700;color:var(--gold2);margin-bottom:6px;letter-spacing:.01em}
.hint-text{font-size:13px;color:#a3aec7;line-height:1.65}
.hint-actions{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
.hint-check{display:flex;align-items:center;gap:7px;cursor:pointer;flex:1;color:#64748b;font-size:12px}
.hint-check input{width:14px;height:14px;accent-color:#d4a843;cursor:pointer}
.hint-btn{
  padding:9px 18px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,228,176,.34);
  background:linear-gradient(135deg,rgba(214,162,71,.22),rgba(185,117,25,.14));
  color:var(--gold2);font-size:13px;font-weight:700;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.hint-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(217,164,65,.25)}
@keyframes hintIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:600px){.hint-card{bottom:80px;right:12px;left:12px;width:auto;max-width:none}}

/* ─── TERMS OVERLAY — перекриваємо inline-кольори на золоту палітру ─── */
#terms-overlay h1,
#terms-overlay h3{color:var(--gold2)!important;font-family:Inter,sans-serif}
#terms-overlay h1{font-size:22px!important;letter-spacing:.01em}
#terms-overlay div[style*="#0f172a"]{
  background:rgba(0,0,0,.30)!important;
  border:1px solid rgba(255,228,176,.18)!important;
  border-radius:14px!important;
  box-shadow:inset 0 0 22px rgba(255,228,176,.03)!important;
}
#terms-overlay div[style*="rgba(34,197,94"],
#terms-overlay div[style*="rgba(99,102,241"],
#terms-overlay div[style*="rgba(16,185,129"]{
  background:rgba(255,228,176,.06)!important;
  border:1px solid rgba(255,228,176,.20)!important;
  color:#a3aec7!important;
}
#terms-overlay div[style*="rgba(239,68,68"]{
  background:rgba(248,113,113,.07)!important;
  border:1px solid rgba(248,113,113,.25)!important;
}
#terms-overlay p,#terms-overlay ul,#terms-overlay li{color:#a3aec7!important}
#terms-overlay b{color:var(--text)!important}
#terms-overlay b[style*="#34d399"],
#terms-overlay b[style*="#86efac"],
#terms-overlay b[style*="#a5b4fc"],
#terms-overlay b[style*="#6366f1"],
#terms-overlay b[style*="#22c55e"],
#terms-overlay b[style*="#06b6d4"],
#terms-overlay b[style*="#f59e0b"]{color:var(--gold2)!important}
#terms-overlay b[style*="#fca5a5"]{color:#f87171!important}
#terms-overlay div[style*="font-size:26px"],
#terms-overlay div[style*="font-size:18px"]{color:var(--gold2)!important}
#terms-overlay div[style*="font-weight:600"][style*="#6366f1"]{color:var(--gold)!important}