*{box-sizing:border-box}
:root{
  --bg:#0b0e15;--bg-2:#0f131c;--panel:#181d28;--panel-2:#1f2531;
  --line:rgba(255,255,255,.098);--line-strong:rgba(255,255,255,.17);
  --text:#f3f5f9;--text-2:#c8cfda;--muted:#8e97a6;--muted-2:#636c79;
  --accent:#efa448;--accent-soft:rgba(239,164,72,.12);--green:#6bd59b;--red:#ef6c72;--blue:#6f9cff;--violet:#9678ff;
  --shadow:0 24px 70px rgba(0,0,0,.5);--radius:17px;
}
html,body{margin:0;min-height:100%;background:#0b0e15;color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;letter-spacing:-.012em}
body{overflow-x:hidden}button,input,select,textarea{font:inherit}button{color:inherit}.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.background{position:fixed;inset:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#10141e 0,#0b0e15 45%,#070a10 100%);z-index:0}
.aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}.a1{width:540px;height:540px;right:-120px;top:-220px;background:rgba(239,164,72,.17)}.a2{width:520px;height:520px;left:-260px;top:30%;background:rgba(111,125,255,.10)}.a3{width:430px;height:430px;right:18%;bottom:-250px;background:rgba(63,140,225,.08)}
.grid-glow{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 80%)}
.noise{position:absolute;inset:0;opacity:.12;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}

/* --- Ortak ikon düğmesi (drawer, liste satırları) ------------------------ */
.icon-button{position:relative;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:#8b93a0;cursor:pointer;transition:.18s ease}.icon-button:hover{background:rgba(255,255,255,.06);border-color:var(--line-strong);color:#d6dae1}.icon-button.ghost{border-color:transparent;background:transparent}

/* --- Durum rozetleri -----------------------------------------------------
   Punto ve renk kontrastı okunur seviyeye çekildi; hata (danger) varyantı
   da tanımlı (11.4.3). Rozetler tool/hesap/auth görünümlerinde kullanılır. */
.status-pill{height:24px;padding:0 9px;border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text-2);background:rgba(255,255,255,.03)}
.status-pill i{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.status-pill.success{color:#8fe0ae;border-color:rgba(107,213,155,.35);background:rgba(107,213,155,.1)}
.status-pill.success i{background:var(--green);box-shadow:0 0 9px rgba(107,213,155,.5)}
.status-pill.danger{color:#f5a0a4;border-color:rgba(239,108,114,.38);background:rgba(239,108,114,.12)}
.status-pill.danger i{background:var(--red);box-shadow:0 0 9px rgba(239,108,114,.5)}