/* AVTO BOSS — umumiy uslub (to'q fon, qizil aksent, shisha kartochkalar) */
:root{
  --bg0:#05080F; --bg1:#0A1120; --bg2:#0E1729;
  --glass:rgba(16,23,40,.78); --glass-2:rgba(24,33,56,.82); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --red:#E3141B; --red-2:#FF3B3F; --red-d:#A40D12;
  --blue:#2563EB; --blue-2:#3B82F6; --cyan:#38BDF8;
  --green:#16A34A; --green-2:#22C55E;
  --amber:#F59E0B; --gold:#F5C518;
  --ink:#F1F5F9; --ink-2:#CBD5E1; --muted:#8C9AB1;
  --paper:#FFFFFF; --paper-2:#F3F5F9; --pink:#1E2433; --pmuted:#5B6474; --pline:#E2E6EE;
  --r:16px;
  --font:"Segoe UI","Segoe UI Variable",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--ink);font-size:16px;line-height:1.45;overflow-x:hidden;
  background:
    radial-gradient(1100px 620px at 85% -10%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(900px 520px at -5% 115%, rgba(227,20,27,.24), transparent 62%),
    linear-gradient(160deg, var(--bg0) 0%, var(--bg1) 55%, #070B14 100%);
  background-attachment:fixed}
/* qizil diagonal chiziqlar (dizayndagi kabi) */
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:0}
body::before{right:-12vw;bottom:-6vh;width:70vw;height:22vh;transform:rotate(-14deg);
  background:linear-gradient(90deg, transparent, rgba(227,20,27,.0) 10%, rgba(227,20,27,.55) 55%, rgba(255,59,63,.85));
  filter:blur(1px);opacity:.55;clip-path:polygon(8% 40%,100% 0,100% 55%,0 100%)}
body::after{left:-10vw;top:22vh;width:38vw;height:30vh;transform:rotate(-24deg);
  background:linear-gradient(90deg, rgba(227,20,27,.0), rgba(227,20,27,.35));opacity:.5;clip-path:polygon(0 60%,100% 0,100% 18%,0 100%)}
#app,main,header{position:relative;z-index:1}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--blue-2);outline-offset:2px}
.hidden{display:none!important}
.muted{color:var(--muted)}

/* ---- yuqori panel ---- */
.top{display:flex;align-items:center;gap:16px;padding:12px 26px;background:linear-gradient(180deg,rgba(5,8,15,.92),rgba(5,8,15,.6));border-bottom:1px solid var(--line);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand img{width:46px;height:46px;border-radius:12px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.brand .w{font-weight:900;font-style:italic;font-size:22px;letter-spacing:.01em;line-height:1}
.brand .w b{color:var(--red-2);font-weight:900}
.brand .s{font-size:12px;color:var(--muted);margin-top:3px;letter-spacing:.02em}
.top .sp{flex:1}
.chip{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--glass);border:1px solid var(--line)}
.chip .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--red-d));display:flex;align-items:center;justify-content:center;font-weight:800}
.chip .nm{font-weight:700;font-size:15px;line-height:1.1}
.chip .id{font-size:12px;color:var(--muted)}
.exit{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,59,63,.45);background:rgba(227,20,27,.12);color:#FFD7D8;padding:9px 16px;border-radius:10px;font-weight:700}
.exit:hover{background:rgba(227,20,27,.28);color:#fff}
.exit svg{width:16px;height:16px}

/* ---- tugmalar ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;padding:13px 22px;font-weight:700;font-size:16px;color:#fff;
  background:linear-gradient(180deg,#F0262D,#C10E15);box-shadow:0 8px 24px rgba(227,20,27,.35), inset 0 1px 0 rgba(255,255,255,.25);transition:transform .08s, filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.blue{background:linear-gradient(180deg,#3B82F6,#1D4ED8);box-shadow:0 8px 24px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.25)}
.btn.green{background:linear-gradient(180deg,#22C55E,#15803D);box-shadow:0 8px 24px rgba(22,163,74,.35)}
.btn.ghost{background:rgba(255,255,255,.06);box-shadow:none;border:1px solid var(--line-2);color:var(--ink)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.small{padding:8px 14px;font-size:14px;border-radius:10px}
.btn:disabled{opacity:.5;cursor:default;filter:none}

/* ---- shisha kartochka ---- */
.glass{background:linear-gradient(180deg,var(--glass-2),var(--glass));border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(14px)}

input.field,select.field,textarea.field{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:12px;padding:13px 14px;color:var(--ink);outline:none}
input.field:focus,select.field:focus,textarea.field:focus{border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
select.field option{background:#0E1729;color:var(--ink)}

/* ---- darajalar ---- */
.lvl{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.02em;border:1px solid currentColor;white-space:nowrap}
.lvl i{width:14px;height:14px;background:currentColor;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.lvl.new{color:#9AA6B8}.lvl.bronze{color:#D08A4E}.lvl.silver{color:#CBD5E1}.lvl.gold{color:#F5C518}
.lvl.platinum{color:#67E8F9}.lvl.diamond{color:#93C5FD}.lvl.champion{color:#FF5A5F}

/* ---- jadval ---- */
table.t{width:100%;border-collapse:collapse}
table.t th,table.t td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
table.t td.num{font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em}
.tag.ok{background:rgba(34,197,94,.15);color:#4ADE80}
.tag.bad{background:rgba(239,68,68,.15);color:#F87171}
.tag.run{background:rgba(245,158,11,.15);color:#FBBF24}
.tag.info{background:rgba(59,130,246,.15);color:#93C5FD}
.tag.dim{background:rgba(255,255,255,.07);color:var(--muted)}

/* ---- modal va xabar ---- */
.modal{position:fixed;inset:0;background:rgba(2,4,9,.66);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px)}
.modal .box{width:min(480px,92vw);padding:28px;text-align:center}
.modal h3{margin:0 0 8px;font-size:22px}
.modal p{margin:0 0 22px;color:var(--ink-2)}
.modal .row{display:flex;gap:12px;justify-content:center}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#111827;border:1px solid var(--line-2);color:#fff;padding:12px 22px;border-radius:12px;font-weight:600;z-index:120;box-shadow:0 10px 30px rgba(0,0,0,.5)}

.oct{clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}