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

:root{
  --gold:#d6a247;--gold2:#ffe29b;--gold3:#b97519;
  --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:272px 1fr;
  gap:20px;
  perspective:2200px;
  perspective-origin:24% 48%;
}

/* ─── GLASS ─── */
.glass{
  position:relative;
  background:linear-gradient(145deg,rgba(13,22,31,.72),rgba(4,8,13,.54));
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 26px 80px rgba(0,0,0,.55),0 0 48px rgba(217,164,65,.12),inset 0 0 34px rgba(255,255,255,.04);
  overflow:hidden;
}
.glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(130deg,rgba(255,255,255,.2),transparent 18%,transparent 72%,rgba(255,205,112,.12)),
    radial-gradient(circle at 80% 0%,rgba(255,222,150,.2),transparent 20%);
  opacity:.8;
}

/* ─── 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)}
.nav{display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex:1;margin-bottom:10px;padding-right:2px}
.nav a{
  position:relative;display:flex;align-items:center;gap:13px;
  width:100%;padding:14px 16px;
  color:rgba(238,244,255,.6);
  border:1px solid transparent;background:transparent;
  border-radius:16px;cursor:pointer;
  transition:all 1.15s var(--ease-luxury)!important;
  font-size:13px;font-weight:500;
}
.nav a:hover{background:rgba(255,255,255,.045);color:#fff;border-color:rgba(255,255,255,.06)}
.nav a.active{
  color:#ffdc8c;
  background:linear-gradient(90deg,rgba(217,164,65,.23),rgba(255,255,255,.03));
  border-color:rgba(255,215,128,.35);
  box-shadow:0 0 30px rgba(217,164,65,.22),inset 0 0 20px rgba(255,215,128,.08);
}
.nav-ico{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.profile{margin-top:auto;padding-top:16px}
.userbox{
  display:flex;gap:12px;align-items:center;
  padding:13px;border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:10px;
  transition:.2s;
}
.userbox:hover{background:rgba(0,229,255,.06);border-color:rgba(0,229,255,.2)}
.avatar{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,215,128,.5);
  color:#ffdc8c;font-size:14px;font-weight:700;flex-shrink:0;
}
.btn-logout{
  width:100%;padding:13px;border-radius:14px;
  color:#ff7b68;background:rgba(255,80,65,.07);
  border:1px solid rgba(255,80,65,.18);
  cursor:pointer;font-size:13px;font-weight:600;
  transition:.2s;
}
.btn-logout:hover{background:rgba(255,80,65,.14)}

/* ─── 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:0;pointer-events:none;animation:none;
  transform:translateX(60px) rotateY(-6deg) scale(.97);
  transform-origin:left center;
  filter:blur(4px);
  transition:transform var(--transition-slow) var(--ease-luxury),opacity .38s var(--ease-luxury),filter .38s var(--ease-luxury);
  will-change:transform,opacity,filter;
  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{opacity:1;pointer-events:all;transform:none;filter:none;transition:none}
.screen.entering{
  animation:pageSettle var(--transition-slow) var(--ease-luxury) both;
  opacity:1;pointer-events:all;filter:none;transform:none;
}
.screen.leaving{
  transform:translateX(-48px) translateZ(-180px) rotateY(14deg) scale(.94)!important;
  opacity:0!important;filter:blur(6px) brightness(.6)!important;
  transition:transform .32s var(--ease-luxury),opacity .26s var(--ease-luxury),filter .26s var(--ease-luxury)!important;
  pointer-events:none!important;
}
@keyframes pageSettle{
  0%  {transform:translateX(72px) translateZ(-60px) rotateY(-10deg) scale(.95);opacity:0;filter:blur(6px)}
  55% {transform:translateX(-6px) translateZ(12px) rotateY(1.5deg) scale(1.005);opacity:1;filter:blur(0)}
  100%{transform:none;opacity:1;filter:none}
}
/* ─── WIND TRAIL ─── */
.wind-layer{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden;opacity:0;mix-blend-mode:screen}
.wind-layer:before,.wind-layer:after{
  content:"";position:absolute;left:-18%;right:-18%;height:42%;
  background:repeating-linear-gradient(100deg,transparent 0 28px,rgba(255,226,155,.00) 28px 54px,rgba(255,226,155,.18) 55px 57px,rgba(150,210,255,.13) 58px 60px,transparent 61px 96px);
  filter:blur(1.2px);transform:translateX(120%) skewX(-18deg);
}
.wind-layer:before{top:12%}
.wind-layer:after{bottom:8%}
.wind-layer.active{opacity:1;animation:windFade var(--transition-slow) var(--ease-luxury) both}
.wind-layer.active:before{animation:windRush var(--transition-slow) var(--ease-luxury) both}
.wind-layer.active:after{animation:windRush2 var(--transition-slow) var(--ease-luxury) both}
@keyframes windRush{0%{transform:translateX(105%) skewX(-18deg);opacity:0}16%{opacity:.42}58%{opacity:.26}100%{transform:translateX(-112%) skewX(-18deg);opacity:0}}
@keyframes windRush2{0%{transform:translateX(130%) skewX(-22deg);opacity:0}24%{opacity:.28}100%{transform:translateX(-128%) skewX(-22deg);opacity:0}}
@keyframes windFade{0%,100%{opacity:0}18%,72%{opacity:1}}

/* ─── 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(115deg,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,.72),rgba(4,8,13,.54));
  border:1px solid var(--line);
  border-radius:20px;padding:22px 24px;margin-bottom:18px;
  backdrop-filter:blur(20px);
  box-shadow:0 4px 28px rgba(0,0,0,.3);
  transition:transform .2s,box-shadow .2s;
}
.panel::before,.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,164,65,.3),transparent);
  pointer-events:none;
}
.panel:hover,.card:hover{
  box-shadow:0 12px 42px rgba(0,0,0,.4),0 0 28px rgba(217,164,65,.06);
}
.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 ─── */
.metric{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(13,22,31,.72),rgba(4,8,13,.54));
  border:1px solid var(--line);border-radius:16px;
  padding:12px 16px;margin-bottom:0;
  display:flex;align-items:center;gap:12px;
  backdrop-filter:blur(20px);
  box-shadow:0 4px 24px rgba(0,0,0,.28);
  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,.12)}
.metric-circle{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:18px;
  background:rgba(217,164,65,.08);border:1px solid rgba(255,215,128,.22);
  color:var(--gold2);
}
.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-name{font-size:13px;font-weight:600;margin-bottom:2px}
.dev-card .dc-meta{font-size:11px;color:var(--muted)}

/* ─── 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:rgba(3,8,12,.42);border:1px solid rgba(255,215,128,.22);
  border-radius:12px;color:var(--text);font-size:13px;outline:none;transition:.2s;
}
.fc:focus{border-color:rgba(217,164,65,.5);background:rgba(217,164,65,.05);box-shadow:0 0 0 3px rgba(217,164,65,.08)}
.fc::placeholder{color:rgba(238,244,255,.25)}
select.fc option{background:#0b0d15}
textarea.fc{resize:vertical;min-height:72px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ─── 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;
  width:100%;max-width:384px;height:auto;
  filter:drop-shadow(0 0 28px rgba(217,164,65,.75)) brightness(1.15);
  margin-bottom:0;
}
.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,.28);border-radius:14px;
  background:rgba(3,8,12,.42);
  box-shadow:inset 0 0 20px rgba(255,255,255,.02);
  transition:.2s;
}
.login-field:focus-within{border-color:rgba(217,164,65,.5);box-shadow:0 0 0 3px rgba(217,164,65,.08)}
.login-field input{width:100%;border:0;background:transparent;outline:0;color:#eaf1ff;font-size:16px}
.login-field .icon{opacity:.45;font-size:16px}
.btn-login{
  width:100%;height:56px;border-radius:14px;border:0;cursor:pointer;
  color:#0b0904;font-weight:800;font-size:16px;letter-spacing:.02em;
  background:linear-gradient(90deg,#c88927,#ffd36b,#b97519);
  box-shadow:0 10px 30px rgba(217,164,65,.3),inset 0 1px 0 rgba(255,255,255,.28);
  transition:.25s;
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(217,164,65,.42)}

/* ─── 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}

  /* 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}
}