/* =====================================================================
   STEEL INTELLIGENCE — Odyssey OS kabuk teması
   Kokpit tasarım sistemi (tokens.json + components/bundle.css) üzerine kurulu.
   Yalnızca html[data-ui="steel"] altında etkin; Horizon (eski görünüm) için
   index.html içindeki temel CSS olduğu gibi kalır.
   Day (varsayılan) ve Night (html[data-theme="dark"]) olmak üzere iki yüz.
   Kural: hex yok, token var. Vurgu (Electric Blue) yalnızca birincil eylem,
   bağlantı, tek canlı değer, etkin etiket ve odak halkası için.
===================================================================== */

/* ---------- Tokenlar: Day ---------- */
html[data-ui="steel"] {
    --ground: #FFFFFF;
    --surface: #F5F5F6;
    --raised: #FFFFFF;
    --line: #E6E6E8;
    --line-strong: #8A8A90;
    --ink: #171719;
    --ink-2: #3A3A3E;
    --muted: #6B6B72;
    --accent: #3D5AF1;
    --accent-hover: #2C43C4;
    --accent-soft: #EEF1FE;
    --on-accent: #FFFFFF;
    --signal: #A35F00;
    --success: #187A4F;
    --danger: #C0392B;
    --panel: #171719;
    --on-panel: #F4F4F5;
    --on-panel-muted: #9A9AA2;
    --ink-rgb: 23, 23, 25;
    --accent-rgb: 61, 90, 241;
    --signal-rgb: 163, 95, 0;
    --success-rgb: 24, 122, 79;
    --danger-rgb: 192, 57, 43;
    --shadow-card: 0 1px 2px rgba(13,15,20,0.04), 0 8px 24px -12px rgba(13,15,20,0.10);
    --shadow-pop: 0 16px 48px -16px rgba(13,15,20,0.22);
    --shadow-win: 0 1px 2px rgba(13,15,20,0.05), 0 24px 64px -24px rgba(13,15,20,0.28);

    --font-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-sans: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 80px; --space-9: 120px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Masaüstü katmanı (widget, dock, menü çubuğu): %60 yüzey + arka plan bulanıklığı,
       duvar kağıdı hafifçe içinden görünür. Pencereler ve menüler opak kalır. */
    --raised-rgb: 255, 255, 255;
    --surface-rgb: 245, 245, 246;
    --desk-glass: rgba(var(--raised-rgb), 0.6);
    --desk-blur: blur(18px) saturate(1.15);
    /* Pencereler: biraz daha örtücü cam; gövde ve iframe içeriği camın üstünde şeffaf durur */
    --win-glass: rgba(var(--raised-rgb), 0.74);
    --win-body: rgba(var(--surface-rgb), 0.5);

    /* Renkli uygulama karoları: pastel, profesyonel. Perde = iç gölgeyle binen beyaz katman. */
    --tile-veil: inset 0 0 0 200px rgba(255,255,255,0.16);
    --tile-filter: saturate(0.74) contrast(0.96);
    --tile-filter-hover: saturate(0.86);
    --tile-glyph: #fff;
    --glyph-filter: saturate(0.8);

    /* --- Horizon token adlarını Steel değerlerine bağla --- */
    --bg-primary: var(--surface);
    --glass: var(--raised);
    --glass-strong: var(--raised);
    --glass-border: var(--line);
    --bg-card: var(--raised);
    --bg-card-hover: var(--raised);
    --accent-light: var(--accent);
    --warning: var(--signal);
    --info: var(--accent);
    --text-primary: var(--ink);
    --text-secondary: var(--muted);
    --border: var(--line);
    --radius: var(--radius-lg);

    --input-bg: var(--raised);
    --menu-bg: var(--raised);
    --tip-bg: var(--panel);
    --tip-bg-2: var(--panel);
    --pop-bg: var(--raised);
    --pop-bg-2: var(--raised);
    --toast-bg: var(--raised);
    --bar-bg: var(--desk-glass);
    --dock-bg: var(--raised);
    --widget-bg: var(--raised);
    --modal-bg: var(--raised);
    --scrim: rgba(13,15,20,0.32);
    --scrim-light: rgba(13,15,20,0.18);
    --scrim-drop: rgba(13,15,20,0.4);
    --sel-bg: var(--accent-soft);
    --sel-fg: var(--accent);

    /* beyaz-alfa dolgular → mürekkep-alfa (düşük), metin tonları (yüksek) */
    --w-015: rgba(var(--ink-rgb), 0.02);
    --w-03: rgba(var(--ink-rgb), 0.03);
    --w-035: rgba(var(--ink-rgb), 0.03);
    --w-04: rgba(var(--ink-rgb), 0.04);
    --w-045: rgba(var(--ink-rgb), 0.04);
    --w-05: rgba(var(--ink-rgb), 0.05);
    --w-06: rgba(var(--ink-rgb), 0.05);
    --w-07: rgba(var(--ink-rgb), 0.06);
    --w-08: rgba(var(--ink-rgb), 0.06);
    --w-085: rgba(var(--ink-rgb), 0.07);
    --w-09: rgba(var(--ink-rgb), 0.07);
    --w-1: rgba(var(--ink-rgb), 0.08);
    --w-11: rgba(var(--ink-rgb), 0.08);
    --w-12: rgba(var(--ink-rgb), 0.09);
    --w-13: rgba(var(--ink-rgb), 0.09);
    --w-14: rgba(var(--ink-rgb), 0.10);
    --w-15: rgba(var(--ink-rgb), 0.10);
    --w-16: rgba(var(--ink-rgb), 0.11);
    --w-18: rgba(var(--ink-rgb), 0.12);
    --w-2: rgba(var(--ink-rgb), 0.14);
    --w-22: rgba(var(--ink-rgb), 0.16);
    --w-25: rgba(var(--ink-rgb), 0.18);
    --w-26: rgba(var(--ink-rgb), 0.18);
    --w-3: rgba(var(--ink-rgb), 0.22);
    --w-32: var(--muted);
    --w-35: var(--line-strong);
    --w-4: var(--line-strong);
    --w-43: var(--muted);
    --w-48: var(--muted);
    --w-52: var(--muted);
    --w-55: var(--muted);
    --w-68: var(--ink-2);
    --w-74: var(--ink-2);
    --w-75: var(--ink-2);
    --w-82: var(--ink);
    --w-85: var(--ink);
    --w-88: var(--ink);

    --a-05: rgba(var(--accent-rgb), 0.05);
    --a-06: rgba(var(--accent-rgb), 0.06);
    --a-08: rgba(var(--accent-rgb), 0.08);
    --a-09: rgba(var(--accent-rgb), 0.09);
    --a-1: rgba(var(--accent-rgb), 0.10);
    --a-12: rgba(var(--accent-rgb), 0.12);
    --a-14: rgba(var(--accent-rgb), 0.14);
    --a-15: rgba(var(--accent-rgb), 0.15);
    --a-18: rgba(var(--accent-rgb), 0.18);
    --a-2: rgba(var(--accent-rgb), 0.20);
    --a-22: rgba(var(--accent-rgb), 0.22);
    --a-25: rgba(var(--accent-rgb), 0.25);
    --a-28: rgba(var(--accent-rgb), 0.28);
    --a-3: rgba(var(--accent-rgb), 0.30);
    --a-35: rgba(var(--accent-rgb), 0.35);
    --a-4: rgba(var(--accent-rgb), 0.40);
    --a-45: rgba(var(--accent-rgb), 0.45);
    --a-5: rgba(var(--accent-rgb), 0.50);
    --a-7: rgba(var(--accent-rgb), 0.70);
    --a-75: rgba(var(--accent-rgb), 0.75);

    --d-12: rgba(var(--danger-rgb), 0.08);
    --d-14: rgba(var(--danger-rgb), 0.10);
    --d-15: rgba(var(--danger-rgb), 0.10);
    --d-18: rgba(var(--danger-rgb), 0.12);
    --d-22: rgba(var(--danger-rgb), 0.16);
    --d-3: rgba(var(--danger-rgb), 0.30);
    --s-06: rgba(var(--success-rgb), 0.06);
    --s-15: rgba(var(--success-rgb), 0.10);
    --s-18: rgba(var(--success-rgb), 0.12);
    --s-25: rgba(var(--success-rgb), 0.18);
    --s-35: rgba(var(--success-rgb), 0.30);
    --s-5: rgba(var(--success-rgb), 0.45);
    --s-6: rgba(var(--success-rgb), 0.55);
    --wn-15: rgba(var(--signal-rgb), 0.10);
    --wn-18: rgba(var(--signal-rgb), 0.12);
    --wn-2: rgba(var(--signal-rgb), 0.14);
    --i-15: rgba(var(--accent-rgb), 0.12);
    --m-06: rgba(var(--ink-rgb), 0.04);
    --m-15: rgba(var(--ink-rgb), 0.08);
    --m-4: rgba(var(--ink-rgb), 0.25);
    --m-5: rgba(var(--ink-rgb), 0.3);
}

/* ---------- Tokenlar: Night ---------- */
html[data-ui="steel"][data-theme="dark"] {
    --ground: #0C0C0D;
    --surface: #151517;
    --raised: #1C1C1F;
    --line: #2A2A2E;
    --line-strong: #6E6E76;
    --ink: #F4F4F5;
    --ink-2: #C9C9CE;
    --muted: #9A9AA2;
    --accent: #7C93FF;
    --accent-hover: #A3B3FF;
    --accent-soft: #1A2147;
    --on-accent: #0C0C0D;
    --signal: #F0B04A;
    --success: #4CC38A;
    --danger: #FF7A6B;
    --panel: #202024;
    --on-panel: #F4F4F5;
    --on-panel-muted: #9A9AA2;
    --ink-rgb: 244, 244, 245;
    --accent-rgb: 124, 147, 255;
    --signal-rgb: 240, 176, 74;
    --success-rgb: 76, 195, 138;
    --danger-rgb: 255, 122, 107;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.6);
    --shadow-pop: 0 16px 48px -16px rgba(0,0,0,0.7);
    --shadow-win: 0 1px 2px rgba(0,0,0,0.5), 0 24px 64px -24px rgba(0,0,0,0.8);
    --scrim: rgba(0,0,0,0.5);
    --scrim-light: rgba(0,0,0,0.3);
    --scrim-drop: rgba(0,0,0,0.55);
    --raised-rgb: 28, 28, 31;
    --surface-rgb: 21, 21, 23;
    --tile-veil: inset 0 0 0 200px rgba(255,255,255,0.08);
    --tile-filter: saturate(0.7) contrast(0.95);
    --tile-filter-hover: saturate(0.84);
    --tile-glyph: #fff;
    --glyph-filter: saturate(0.76);
}

/* =====================================================================
   TEMEL
===================================================================== */
html[data-ui="steel"] body {
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}
html[data-ui="steel"] button,
html[data-ui="steel"] input,
html[data-ui="steel"] select,
html[data-ui="steel"] textarea { font-family: var(--font-sans); }
html[data-ui="steel"] a { color: var(--accent); }
html[data-ui="steel"] a:hover { color: var(--accent-hover); }
html[data-ui="steel"] * { transition-timing-function: var(--ease); }

html[data-ui="steel"] ::-webkit-scrollbar-thumb { background: rgba(var(--ink-rgb), 0.18); border: 2px solid transparent; background-clip: content-box; }
html[data-ui="steel"] ::-webkit-scrollbar-thumb:hover { background: rgba(var(--ink-rgb), 0.3); border: 2px solid transparent; background-clip: content-box; }
html[data-ui="steel"] * { scrollbar-color: rgba(var(--ink-rgb), 0.2) transparent; }

/* Odak halkası: her kontrol için tek, düz, vurgu renginde */
html[data-ui="steel"] :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Enstrüman etiketi: mono, büyük harf, 0.12em aralık */
html[data-ui="steel"] .field-label,
html[data-ui="steel"] .login-card label,
html[data-ui="steel"] .widget-head,
html[data-ui="steel"] .spot-group-title,
html[data-ui="steel"] .finder-section-title,
html[data-ui="steel"] .stat-label,
html[data-ui="steel"] .stx-stat-name,
html[data-ui="steel"] .month-label,
html[data-ui="steel"] .data-table th,
html[data-ui="steel"] .finder-list-head,
html[data-ui="steel"] .dp-dow,
html[data-ui="steel"] .izin-cal .dow,
html[data-ui="steel"] .cal-head,
html[data-ui="steel"] .mb-brand-sub,
html[data-ui="steel"] .login-eyebrow {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 11.5px;
    line-height: 16px;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--muted);
}

/* ---------- Duvar kağıdı ---------- */
html[data-ui="steel"] #wallpaper { background: var(--surface); }
html[data-ui="steel"] #wallpaper .orb { display: none; }
html[data-ui="steel"] #wallpaper::after { background: none; }
html[data-ui="steel"] #wallpaper.photo::after { background: rgba(0,0,0,0.28); }
/* Kokpit motifi: kadran. Sayfada tek; köşeden taşar. */
#wallpaper .dial { display: none; }
html[data-ui="steel"] #wallpaper.steel-default .dial {
    display: block;
    position: absolute;
    right: -16vmin; bottom: -14vmin;
    width: 78vmin; height: 78vmin;
    pointer-events: none;
    animation: dialIn 0.8s var(--ease);
}
#wallpaper .dial .ring { fill: none; stroke: var(--line-strong); stroke-width: 1; opacity: 0.42; }
#wallpaper .dial .ring-2 { opacity: 0.22; }
#wallpaper .dial .tick { stroke: var(--line-strong); stroke-width: 1; opacity: 0.45; }
#wallpaper .dial .tick.mid { opacity: 0.6; }
#wallpaper .dial .tick.major { stroke-width: 2; opacity: 0.8; }
#wallpaper .dial .needle { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; transform-origin: 300px 300px; animation: needleSettle 0.8s var(--ease); }
#wallpaper .dial .hub { fill: var(--accent); }
@keyframes dialIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes needleSettle { from { transform: rotate(-28deg); } to { transform: rotate(0); } }

/* ---------- Açılış / spinner / iskelet ---------- */
html[data-ui="steel"] .spinner { border-color: var(--line); border-top-color: var(--accent); border-width: 2px; }
html[data-ui="steel"] .skeleton-block {
    border-radius: var(--radius-lg);
    background: linear-gradient(100deg, var(--surface) 40%, var(--raised) 50%, var(--surface) 60%);
    background-size: 200% 100%;
    border-color: var(--line);
}

/* ---------- Giriş ---------- */
html[data-ui="steel"] .login-card {
    background: var(--raised);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 40px 40px 34px;
    box-shadow: var(--shadow-win);
    text-align: left;
}
html[data-ui="steel"] .login-logo { display: none; }
html[data-ui="steel"] .login-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; text-transform: none; }
html[data-ui="steel"] .login-eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 1px; }
html[data-ui="steel"] .login-title {
    font-family: var(--font-display); font-weight: 300; font-size: 2.35rem; line-height: 1.05;
    letter-spacing: -0.045em; color: var(--ink);
    background: none; -webkit-text-fill-color: initial;
    margin-bottom: 8px;
}
html[data-ui="steel"] .login-sub { font-size: 0.86rem; color: var(--ink-2); margin-bottom: 26px; }
html[data-ui="steel"] .login-card label { margin: 16px 0 6px; }
html[data-ui="steel"] .login-error { background: var(--d-12); border-color: var(--d-3); border-radius: var(--radius-sm); }
html[data-ui="steel"] .login-lang { justify-content: flex-start; margin-top: 22px; }
html[data-ui="steel"] .login-lang button { border-radius: var(--radius-sm); color: var(--muted); }
html[data-ui="steel"] .login-lang button:hover { background: var(--surface); color: var(--ink); }
html[data-ui="steel"] .login-lang button.active { color: var(--accent); font-weight: 600; }

/* ---------- Dil / tema karoları ---------- */
html[data-ui="steel"] .lang-tile { border-radius: var(--radius-md); background: var(--raised); border-color: var(--line); }
html[data-ui="steel"] .lang-tile:hover { background: var(--raised); border-color: var(--line-strong); }
html[data-ui="steel"] .lang-tile.selected { border-color: var(--accent); background: var(--accent-soft); }
html[data-ui="steel"] .lang-tile .lang-name { font-weight: 600; }

/* ---------- Form ---------- */
html[data-ui="steel"] .input, html[data-ui="steel"] input.input, html[data-ui="steel"] select.input, html[data-ui="steel"] textarea.input,
html[data-ui="steel"] .csel-btn, html[data-ui="steel"] .dp-btn {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--ink);
    font-size: 13px;
    padding: 9px 13px;
}
html[data-ui="steel"] .input:focus, html[data-ui="steel"] .csel-btn.open, html[data-ui="steel"] .dp-btn.open {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
html[data-ui="steel"] .input::placeholder, html[data-ui="steel"] .dp-label.empty { color: var(--muted); opacity: 1; }
html[data-ui="steel"] .csel-btn:hover, html[data-ui="steel"] .dp-btn:hover { border-color: var(--ink); }
html[data-ui="steel"] select.input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235B6478' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-ui="steel"] .csel-list, html[data-ui="steel"] .dp-pop {
    background: var(--raised); border-color: var(--line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
}
html[data-ui="steel"] .csel-opt { color: var(--ink-2); }
html[data-ui="steel"] .csel-opt:hover { background: var(--surface); color: var(--ink); }
html[data-ui="steel"] .csel-opt.active { color: var(--accent); font-weight: 600; }
html[data-ui="steel"] .dp-nav { background: var(--surface); border-radius: var(--radius-sm); }
html[data-ui="steel"] .dp-nav:hover { background: var(--line); color: var(--ink); }
html[data-ui="steel"] .dp-day { border-radius: var(--radius-sm); font-family: var(--font-sans); font-weight: 400; }
html[data-ui="steel"] .dp-day:hover { background: var(--surface); }
html[data-ui="steel"] .dp-day.today:not(.sel) { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font-weight: 500; }
html[data-ui="steel"] .dp-day.sel { background: var(--accent); color: var(--on-accent); box-shadow: none; font-weight: 500; }
html[data-ui="steel"] .dp-quick { color: var(--accent); border-radius: var(--radius-sm); }
html[data-ui="steel"] .dp-quick:hover { background: var(--accent-soft); }
html[data-ui="steel"] .dp-title { font-family: var(--font-display); font-weight: 500; }
html[data-ui="steel"] input[type="date"].input::-webkit-calendar-picker-indicator { filter: none; }
html[data-ui="steel"] input[type="checkbox"] { accent-color: var(--accent); }

/* ---------- Düğmeler ---------- */
html[data-ui="steel"] .btn {
    border-radius: var(--radius-pill);
    padding: 9px 16px;
    font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
html[data-ui="steel"] .btn:hover { transform: none; background: var(--line); border-color: var(--line); }
html[data-ui="steel"] .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--ground); box-shadow: none; }
html[data-ui="steel"] .btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--ground); }
html[data-ui="steel"] .btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
html[data-ui="steel"] .btn-ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
html[data-ui="steel"] .btn-success { background: transparent; border: 1px solid var(--line-strong); color: var(--success); }
html[data-ui="steel"] .btn-success:hover { background: var(--s-06); border-color: var(--success); }
html[data-ui="steel"] .btn-danger { background: transparent; border: 1px solid var(--line-strong); color: var(--danger); }
html[data-ui="steel"] .btn-danger:hover { background: var(--d-12); border-color: var(--danger); }
html[data-ui="steel"] .btn-sm { padding: 5px 12px; font-size: 12px; }
html[data-ui="steel"] .btn:disabled { opacity: 0.45; }

/* ---------- Menü çubuğu ---------- */
html[data-ui="steel"] #menubar {
    background: var(--bar-bg);
    backdrop-filter: var(--desk-blur); -webkit-backdrop-filter: var(--desk-blur);
    border-bottom: 1px solid var(--line);
    gap: 16px;
}
html[data-ui="steel"] .mb-logo { gap: 9px; }
html[data-ui="steel"] .mb-logo i { color: var(--ink); font-size: 0.9rem; }
html[data-ui="steel"] .mb-brand-name { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; letter-spacing: -0.02em; color: var(--ink); }
html[data-ui="steel"] .mb-brand-sub { font-size: 0.4rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; opacity: 0.8; color: var(--muted); margin-top: 1px; }
html[data-ui="steel"] .brand-preview { background: var(--ground); border-color: var(--line); border-radius: var(--radius-md); }
html[data-ui="steel"] .brand-preview > i { color: var(--ink); }
html[data-ui="steel"] .mb-active-title { color: var(--muted); font-weight: 500; }
html[data-ui="steel"] .mb-user { background: var(--surface); border-color: var(--line); border-radius: var(--radius-pill); }
html[data-ui="steel"] .mb-user-name { font-weight: 600; color: var(--ink); }
html[data-ui="steel"] .role-badge {
    font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; font-size: 9px;
    background: var(--raised); color: var(--ink-2); border: 1px solid var(--line);
}
html[data-ui="steel"] .role-badge.admin { background: var(--raised); color: var(--signal); }
html[data-ui="steel"] .mb-clock .t { font-weight: 600; font-size: 0.8rem; color: var(--ink); font-variant-numeric: tabular-nums; }
html[data-ui="steel"] .mb-clock .d { font-size: 0.6rem; }
html[data-ui="steel"] .mb-btn { color: var(--ink-2); border-radius: var(--radius-sm); }
html[data-ui="steel"] .mb-btn:hover { background: var(--surface); color: var(--danger); }
html[data-ui="steel"] .mb-btn.mb-search:hover { background: var(--surface); color: var(--ink); }

/* ---------- Spotlight ---------- */
html[data-ui="steel"] #spotlight-wrap { background: var(--scrim-light); }
html[data-ui="steel"] .spot-panel {
    background: var(--raised);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    animation-timing-function: var(--ease);
}
html[data-ui="steel"] .spot-input-row > i { color: var(--muted); }
html[data-ui="steel"] .spot-input { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); }
html[data-ui="steel"] .spot-input::placeholder { color: var(--muted); }
html[data-ui="steel"] .spot-kbd { font-family: var(--font-sans); font-weight: 500; background: var(--surface); border-color: var(--line); border-radius: var(--radius-sm); }
html[data-ui="steel"] .spot-results { border-top-color: var(--line); }
html[data-ui="steel"] .spot-item { border-radius: var(--radius-md); }
html[data-ui="steel"] .spot-item.sel { background: var(--accent-soft); }
html[data-ui="steel"] .spot-item.sel .spot-name { color: var(--ink); }
html[data-ui="steel"] .spot-item.sel .spot-kind { color: var(--muted); }
html[data-ui="steel"] .spot-icon { border-radius: var(--radius-sm); filter: var(--tile-filter); box-shadow: var(--tile-veil); color: var(--tile-glyph); }
html[data-ui="steel"] .spot-name { font-weight: 600; }

/* ---------- Masaüstü simgeleri ---------- */
html[data-ui="steel"] .desk-icon { border-radius: var(--radius-md); }
html[data-ui="steel"] .desk-icon:hover { background: rgba(var(--ink-rgb), 0.05); }
html[data-ui="steel"] .desk-icon.selected { background: var(--accent-soft); border-color: transparent; }
html[data-ui="steel"] .desk-icon.drop-target { background: var(--s-15); border-color: var(--success); }
html[data-ui="steel"] .desk-icon .ic { filter: var(--glyph-filter); }
html[data-ui="steel"] .desk-icon .lbl { color: var(--ink); text-shadow: none; font-weight: 500; }
html[data-ui="steel"] .desk-icon .own { color: var(--muted); text-shadow: none; }
html[data-ui="steel"] body.wp-photo .desk-icon .ic { filter: var(--glyph-filter) drop-shadow(0 4px 10px rgba(0,0,0,0.45)); }
html[data-ui="steel"] body.wp-photo .desk-icon .lbl { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
html[data-ui="steel"] body.wp-photo .desk-icon .own { color: rgba(255,255,255,0.7); text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
html[data-ui="steel"] .desk-icon .ic img.thumb-img { border-color: var(--line); box-shadow: none; }
html[data-ui="steel"] .desk-icon .share-dot { border-color: var(--raised); color: var(--on-accent); }
html[data-ui="steel"] .selection-box { border-color: var(--accent); background: var(--a-1); }

/* ---------- Dock ---------- */
html[data-ui="steel"] #dock {
    background: var(--desk-glass);
    backdrop-filter: var(--desk-blur); -webkit-backdrop-filter: var(--desk-blur);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-win);
}
/* Uygulama karoları: gradyan korunur ama üstüne yarı saydam bir perde biner (pastel),
   doygunluk düşer, glif beyaz yerine mürekkep olur. Görsel (iconUrl) ikonlar yalnızca filtrelenir. */
/* Dock: renkli gradyan yerine tek, nötr ve yarı saydam karo; glif mürekkep. Görsel ikonlar gri tona çekilir. */
html[data-ui="steel"] .dock-item { background: rgba(var(--ink-rgb), 0.07) !important; box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.06); filter: none; color: var(--ink-2); }
html[data-ui="steel"] .dock-item:hover { background: rgba(var(--ink-rgb), 0.13) !important; color: var(--ink); filter: none; }
html[data-ui="steel"] .dock-item > .app-ico { border-radius: inherit; filter: grayscale(1); opacity: 0.8; }
html[data-ui="steel"] .dock-item:hover > .app-ico { opacity: 1; }
html[data-ui="steel"] .dock-item .frank-rozet { filter: grayscale(1); }
html[data-ui="steel"] .dock-item::before, html[data-ui="steel"] .dock-grip::after {
    background: var(--panel); color: var(--on-panel); border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans); font-weight: 600; font-size: 11px;
    padding: 5px 9px;
}
html[data-ui="steel"] .dock-item::after { background: var(--accent); width: 4px; height: 4px; }
html[data-ui="steel"] .dock-item .upd-badge { background: var(--danger); border-color: var(--raised); }
html[data-ui="steel"] .dock-sep { background: var(--line); }
html[data-ui="steel"] .dock-grip { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
html[data-ui="steel"] .dock-grip::before { background: var(--line-strong); }
html[data-ui="steel"] .dock-grip:hover, html[data-ui="steel"] .dock-grip.dragging { background: var(--line); }
html[data-ui="steel"] .dock-item .frank-rozet, html[data-ui="steel"] .spot-icon .frank-rozet { background: var(--panel); border-color: var(--raised); box-shadow: none; }

/* ---------- Pencereler ---------- */
html[data-ui="steel"] .window {
    background: var(--win-glass);
    backdrop-filter: var(--desk-blur); -webkit-backdrop-filter: var(--desk-blur);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    animation-timing-function: var(--ease);
}
html[data-ui="steel"] .window.focused { box-shadow: var(--shadow-win); border-color: var(--line-strong); }
html[data-ui="steel"] .window-titlebar { background: transparent; border-bottom: 1px solid var(--line); height: 42px; }
html[data-ui="steel"] .window-titlebar > i,
html[data-ui="steel"] .window-titlebar > .app-ico {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
    background: rgba(var(--ink-rgb), 0.07); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.06);
    color: var(--ink-2); font-size: 0.8rem;
}
html[data-ui="steel"] .window-titlebar > .app-ico { filter: grayscale(1); opacity: 0.8; padding: 3px; }
html[data-ui="steel"] .window-title { font-weight: 600; font-size: 13px; color: var(--ink); letter-spacing: -0.005em; }
html[data-ui="steel"] .tl-btn { box-shadow: none; color: rgba(0,0,0,0.7); }
html[data-ui="steel"] .window:not(.focused) .tl-btn { background: var(--line); }
html[data-ui="steel"] .window-body { background: var(--win-body); }
html[data-ui="steel"] .window-body.no-pad { background: transparent; }
html[data-ui="steel"] .window-resize::after { border-color: var(--line-strong); }
html[data-ui="steel"] .tl-pin { color: var(--muted); border-radius: var(--radius-sm); }
html[data-ui="steel"] .tl-pin:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-ui="steel"] .tl-pin.sabit { color: var(--accent); }
html[data-ui="steel"] .window-title .dirty { color: var(--signal); }

/* ---------- Bağlam menüsü ---------- */
html[data-ui="steel"] .ctx-menu, html[data-ui="steel"] .ctx-sub {
    background: var(--raised);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: 4px;
}
html[data-ui="steel"] .ctx-item { border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 500; }
html[data-ui="steel"] .ctx-item:hover { background: var(--surface); color: var(--ink); }
html[data-ui="steel"] .ctx-item i { color: var(--muted); }
html[data-ui="steel"] .ctx-item:hover i { color: var(--ink); }
html[data-ui="steel"] .ctx-item.danger, html[data-ui="steel"] .ctx-item.danger i { color: var(--danger); }
html[data-ui="steel"] .ctx-item.danger:hover { background: var(--d-12); }
html[data-ui="steel"] .ctx-sep { background: var(--line); }

/* ---------- Mini modal ---------- */
html[data-ui="steel"] #mini-modal-wrap { background: var(--scrim); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-ui="steel"] .mini-modal {
    background: var(--raised);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    padding: 24px;
}
html[data-ui="steel"] .mini-modal h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink); }
html[data-ui="steel"] .mini-modal h4 i { color: var(--muted); }
html[data-ui="steel"] .mm-city-list { border-color: var(--line); border-radius: var(--radius-sm); }
html[data-ui="steel"] .mm-city-item:hover { background: var(--surface); }
html[data-ui="steel"] .mm-city-item + .mm-city-item { border-top-color: var(--line); }

/* ---------- Widget'lar ---------- */
html[data-ui="steel"] .widget {
    background: var(--desk-glass);
    backdrop-filter: var(--desk-blur); -webkit-backdrop-filter: var(--desk-blur);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: none;
}
html[data-ui="steel"] .widget:hover { box-shadow: var(--shadow-card); border-color: var(--line-strong); }
html[data-ui="steel"] .widget-head { margin-bottom: 12px; gap: 8px; }
html[data-ui="steel"] .widget-head i { color: var(--muted); font-size: 0.85rem; }
html[data-ui="steel"] .widget-head .wclose { border-radius: var(--radius-sm); }
html[data-ui="steel"] .widget-head .wclose:hover { background: var(--surface); color: var(--danger); }
html[data-ui="steel"] .w-clock-time { font-family: var(--font-display); font-weight: 300; font-size: 2.5rem; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
html[data-ui="steel"] .w-clock-date { color: var(--muted); font-size: 0.78rem; }
html[data-ui="steel"] .w-stat { color: var(--ink-2); }
html[data-ui="steel"] .w-stat i { border-radius: var(--radius-sm); filter: var(--tile-filter); box-shadow: var(--tile-veil); color: var(--tile-glyph) !important; }
html[data-ui="steel"] .w-stat .v { font-family: var(--font-sans); font-weight: 500; color: var(--ink); }
html[data-ui="steel"] .w-row { color: var(--ink-2); }
html[data-ui="steel"] .w-row .wx:hover { background: var(--d-12); }
html[data-ui="steel"] .w-online-dot.off { background: var(--line-strong); opacity: 0.5; }
html[data-ui="steel"] .w-add input { border-radius: var(--radius-sm); }
html[data-ui="steel"] #widget-yapiskan { background: var(--desk-glass); border-color: rgba(var(--signal-rgb), 0.35); }
html[data-ui="steel"] #widget-yapiskan .widget-head i { color: var(--signal); }
html[data-ui="steel"] .sticky-note {
    background: rgba(var(--signal-rgb), 0.06);
    border-color: rgba(var(--signal-rgb), 0.25);
    border-radius: var(--radius-sm);
    color: var(--ink);
}
html[data-ui="steel"] .sticky-note::placeholder { color: var(--muted); }

/* Mini takvim */
html[data-ui="steel"] .cal-cell { border-radius: var(--radius-sm); font-family: var(--font-sans); }
html[data-ui="steel"] .cal-cell[data-cal-day]:hover { background: var(--surface); }
html[data-ui="steel"] .cal-today { background: var(--accent); color: var(--on-accent); font-weight: 500; }
html[data-ui="steel"] .cal-today:hover { background: var(--accent-hover) !important; }
html[data-ui="steel"] .cal-dim { opacity: 0.45; }
html[data-ui="steel"] .cal-has-event::after { background: var(--signal); }
html[data-ui="steel"] .cal-today.cal-has-event::after { background: var(--on-accent); }
html[data-ui="steel"] .cal-leave { background: var(--s-15); box-shadow: inset 0 0 0 1px var(--s-35); color: var(--success); }
html[data-ui="steel"] .cal-today.cal-leave { background: var(--accent); color: var(--on-accent); box-shadow: none; }
html[data-ui="steel"] .cal-day-item { border-bottom-color: var(--line); }
html[data-ui="steel"] .cal-day-item .emoji { background: var(--surface); color: var(--ink-2); border-radius: var(--radius-sm); }
html[data-ui="steel"] .cal-emoji-opt { border-radius: var(--radius-sm); }
html[data-ui="steel"] .cal-emoji-opt:hover { background: var(--surface); }
html[data-ui="steel"] .cal-emoji-opt.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
html[data-ui="steel"] .cal-nav-btn:hover { background: var(--surface); color: var(--ink); }

/* ---------- Kartlar / ızgaralar ---------- */
html[data-ui="steel"] .stat-card, html[data-ui="steel"] .card, html[data-ui="steel"] .table-card,
html[data-ui="steel"] .team-card, html[data-ui="steel"] .izin-stat, html[data-ui="steel"] .stx-card {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color 0.3s, box-shadow 0.3s;
}
html[data-ui="steel"] .stat-card:hover, html[data-ui="steel"] .team-card:hover {
    background: var(--raised); transform: none; box-shadow: var(--shadow-card); border-color: var(--line-strong);
}
html[data-ui="steel"] .stat-icon { border-radius: var(--radius-sm); filter: var(--tile-filter); box-shadow: var(--tile-veil); color: var(--tile-glyph) !important; }
html[data-ui="steel"] .stat-value { font-family: var(--font-display); font-weight: 300; font-size: 1.7rem; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
html[data-ui="steel"] .card-title, html[data-ui="steel"] .section-title, html[data-ui="steel"] .table-card .table-header {
    font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--ink);
}
html[data-ui="steel"] .card-title i, html[data-ui="steel"] .section-title i, html[data-ui="steel"] .table-card .table-header i { color: var(--muted); font-size: 0.95rem; }
html[data-ui="steel"] .card-title .right, html[data-ui="steel"] .table-card .table-header .right { font-family: var(--font-sans); font-size: 0.74rem; color: var(--muted); }
html[data-ui="steel"] .table-card .table-header { border-bottom-color: var(--line); }

/* ---------- Tablolar ---------- */
html[data-ui="steel"] .data-table th { background: var(--surface); border-bottom-color: var(--line); padding: 10px 14px; }
html[data-ui="steel"] .data-table th[title] { text-decoration-color: var(--line-strong); }
html[data-ui="steel"] .data-table td { border-bottom-color: var(--line); color: var(--ink-2); font-size: 13px; }
html[data-ui="steel"] .data-table td strong, html[data-ui="steel"] .data-table td b { color: var(--ink); }
html[data-ui="steel"] .data-table tbody tr:hover td { background: var(--accent-soft); }
html[data-ui="steel"] .data-table tr.clickable:hover td { background: var(--accent-soft); }
html[data-ui="steel"] .sheet-wrap td, html[data-ui="steel"] .sheet-wrap th { border-color: var(--line); color: var(--ink-2); }
html[data-ui="steel"] .sheet-wrap { font-family: var(--font-mono); }
html[data-ui="steel"] .sheet-tabs { border-bottom-color: var(--line); }
html[data-ui="steel"] .sheet-tabs .active-tab { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* ---------- Rozetler: durum çipi (nokta + kelime) ---------- */
html[data-ui="steel"] .badge, html[data-ui="steel"] .status-badge {
    font-family: var(--font-sans); font-weight: 600; font-size: 11px;
    background: var(--raised); border: 1px solid var(--line); color: var(--ink-2);
    padding: 3px 9px 3px 8px; border-radius: var(--radius-pill); gap: 6px;
}
html[data-ui="steel"] .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
html[data-ui="steel"] .badge-warning::before { background: var(--signal); }
html[data-ui="steel"] .badge-success::before { background: var(--success); }
html[data-ui="steel"] .badge-info::before { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
html[data-ui="steel"] .badge-danger::before { background: var(--danger); }
html[data-ui="steel"] .badge-muted::before { background: var(--line-strong); }
html[data-ui="steel"] .status-online { background: var(--raised); color: var(--ink-2); }
html[data-ui="steel"] .status-offline { background: var(--raised); color: var(--muted); }
html[data-ui="steel"] .status-offline::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
html[data-ui="steel"] .user-avatar { filter: var(--tile-filter); box-shadow: var(--tile-veil); color: var(--tile-glyph); }
html[data-ui="steel"] .user-name { color: var(--ink); }
html[data-ui="steel"] .time-badge { font-family: var(--font-sans); font-weight: 500; background: var(--surface); color: var(--ink-2); border-radius: var(--radius-sm); }
html[data-ui="steel"] .rel-time { font-family: var(--font-sans); font-size: 11px; }
html[data-ui="steel"] .due-today { color: var(--signal); }

/* ---------- İzinler ---------- */
html[data-ui="steel"] .izin-tabs { background: var(--surface); border-color: var(--line); border-radius: var(--radius-md); padding: 3px; }
html[data-ui="steel"] .izin-tab { border-radius: var(--radius-sm); font-weight: 500; }
html[data-ui="steel"] .izin-tab.active { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-card); font-weight: 600; }
html[data-ui="steel"] .izin-tab .count { font-family: var(--font-sans); background: var(--wn-15); color: var(--signal); }
html[data-ui="steel"] .izin-tab.active .count { background: var(--wn-15); color: var(--signal); }
html[data-ui="steel"] .izin-stat .num { font-family: var(--font-sans); font-weight: 400; color: var(--ink); }
html[data-ui="steel"] .izin-day { background: var(--raised); border-color: var(--line); border-radius: var(--radius-sm); }
html[data-ui="steel"] .izin-day.wknd { background: var(--surface); }
html[data-ui="steel"] .izin-day.today { border-color: var(--line-strong); box-shadow: none; }
html[data-ui="steel"] .izin-day .dnum { font-family: var(--font-sans); }
html[data-ui="steel"] .izin-day.today .dnum { color: var(--accent); }
html[data-ui="steel"] .izin-gun-onizleme b { color: var(--ink); }
html[data-ui="steel"] .izin-chip { background: var(--raised); border-color: var(--line); color: var(--ink-2); font-weight: 500; }
html[data-ui="steel"] .izin-chip:hover { border-color: var(--line-strong); color: var(--ink); }
html[data-ui="steel"] .izin-chip.active { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
html[data-ui="steel"] .izin-rank-row { border-radius: var(--radius-sm); }
html[data-ui="steel"] .izin-rank-row:hover { background: var(--surface); }
html[data-ui="steel"] .izin-rank-row.active { background: var(--accent-soft); border-color: transparent; }
html[data-ui="steel"] .izin-rank-row .rk-days { font-family: var(--font-sans); font-weight: 500; color: var(--ink); }
html[data-ui="steel"] .izin-rank-row .rk-no { font-family: var(--font-sans); }
html[data-ui="steel"] .izin-rank-row .rk-track, html[data-ui="steel"] .izin-tur-row .tr-track { background: var(--surface); border: 1px solid var(--line); }
html[data-ui="steel"] .izin-tur-row .tr-top .tr-val { font-family: var(--font-sans); }
html[data-ui="steel"] .izin-chart .colbar { background: var(--accent); border-radius: 3px 3px 2px 2px; max-width: 26px; }
html[data-ui="steel"] .izin-chart .colbar.zero { background: var(--line); }
html[data-ui="steel"] .izin-chart .col.on .colbar { background: var(--signal); }
html[data-ui="steel"] .izin-chart .col.on .colbar.zero { background: var(--wn-2); }
html[data-ui="steel"] .izin-chart .colv, html[data-ui="steel"] .izin-chart .coll { font-family: var(--font-sans); }

/* ---------- İlerleme ---------- */
html[data-ui="steel"] .progress { background: var(--surface); border: 1px solid var(--line); height: 8px; }
html[data-ui="steel"] .progress-fill { background: var(--accent); }
html[data-ui="steel"] .progress-fill.warning { background: var(--signal); }
html[data-ui="steel"] .progress-fill.danger { background: var(--danger); }

/* ---------- Boş durum / listeler ---------- */
html[data-ui="steel"] .empty-state i { opacity: 0.35; }
html[data-ui="steel"] .mini-state { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--ink-2); }
html[data-ui="steel"] .item-row { border-bottom-color: var(--line); }
html[data-ui="steel"] .item-row:hover { background: var(--surface); }
html[data-ui="steel"] .item-title { color: var(--ink); }
html[data-ui="steel"] .note-text { color: var(--ink-2); }
html[data-ui="steel"] .team-name { color: var(--ink); }

/* ---------- Finder ---------- */
html[data-ui="steel"] .finder-sidebar { background: var(--surface); border-right-color: var(--line); }
html[data-ui="steel"] .finder-side-item { border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 500; }
html[data-ui="steel"] .finder-side-item[data-action]:hover { background: rgba(var(--ink-rgb), 0.06); color: var(--ink); }
html[data-ui="steel"] .finder-side-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
html[data-ui="steel"] .folder-toolbar { background: var(--raised); border-bottom-color: var(--line); }
html[data-ui="steel"] .finder-view { background: var(--surface); border-color: var(--line); border-radius: var(--radius-sm); padding: 2px; }
html[data-ui="steel"] .finder-view button, html[data-ui="steel"] .finder-round { color: var(--ink-2); border-radius: 4px; }
html[data-ui="steel"] .finder-view button.active { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-card); }
html[data-ui="steel"] .finder-round:hover, html[data-ui="steel"] .finder-view button:hover { background: var(--line); color: var(--ink); }
html[data-ui="steel"] .finder-title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
html[data-ui="steel"] .finder-search { background: var(--surface); border-color: var(--line); border-radius: var(--radius-sm); color: var(--muted); }
html[data-ui="steel"] .finder-search input { color: var(--ink); }
html[data-ui="steel"] .finder-search input::placeholder { color: var(--muted); }
html[data-ui="steel"] .finder-scopebar { background: var(--surface); border-bottom-color: var(--line); }
html[data-ui="steel"] .scope-btn { border-radius: var(--radius-sm); }
html[data-ui="steel"] .scope-btn:hover { background: rgba(var(--ink-rgb), 0.06); color: var(--ink); }
html[data-ui="steel"] .scope-btn.active { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-card); }
html[data-ui="steel"] .crumb { color: var(--ink-2); border-radius: var(--radius-sm); }
html[data-ui="steel"] .crumb:hover { background: var(--surface); color: var(--ink); }
html[data-ui="steel"] .crumb.cur { color: var(--ink); }
html[data-ui="steel"] .crumb-sep { color: var(--line-strong); }
html[data-ui="steel"] .finder-list-head {
    background: var(--surface); border-bottom-color: var(--line); color: var(--muted);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    font-size: 11px;
}
html[data-ui="steel"] .finder-list .desk-icon.finder-row { border-radius: var(--radius-sm); }
html[data-ui="steel"] .finder-list .desk-icon.finder-row:nth-child(even) { background: rgba(var(--ink-rgb), 0.025); }
html[data-ui="steel"] .finder-list .desk-icon.finder-row:hover { background: rgba(var(--ink-rgb), 0.06); }
html[data-ui="steel"] .finder-list .desk-icon.finder-row.selected { background: var(--accent-soft); }
html[data-ui="steel"] .finder-name .lbl, html[data-ui="steel"] body.wp-photo .finder-name .lbl { color: var(--ink); text-shadow: none; font-weight: 500; }
html[data-ui="steel"] .finder-cell { color: var(--muted); font-family: var(--font-sans); font-size: 11.5px; }
html[data-ui="steel"] .finder-name .ic, html[data-ui="steel"] body.wp-photo .finder-name .ic { filter: var(--glyph-filter); }
html[data-ui="steel"] .folder-grid.drop-target { outline-color: var(--success); background: var(--s-06); }
html[data-ui="steel"] .finder-statusbar { background: var(--surface); border-top-color: var(--line); font-family: var(--font-sans); font-size: 11px; }
html[data-ui="steel"] .finder-col { border-right-color: var(--line); }
html[data-ui="steel"] .col-item { color: var(--ink-2); border-radius: var(--radius-sm); font-weight: 500; }
html[data-ui="steel"] .col-item .chev { color: var(--line-strong); }
html[data-ui="steel"] .col-item:hover { background: var(--surface); }
html[data-ui="steel"] .col-item.active { background: var(--accent-soft); color: var(--accent); }
html[data-ui="steel"] .col-item.active .chev { color: var(--accent); }
html[data-ui="steel"] .col-preview .ic { filter: var(--glyph-filter); }
html[data-ui="steel"] .col-preview .cp-name { color: var(--ink); }
html[data-ui="steel"] .finder-icons .desk-icon .lbl { color: var(--ink); text-shadow: none; }

/* ---------- Metin editörü ---------- */
html[data-ui="steel"] .editor-area { font-family: var(--font-mono); color: var(--ink); font-size: 13px; background: var(--raised); }
html[data-ui="steel"] .editor-foot { border-top-color: var(--line); background: var(--surface); font-family: var(--font-mono); font-size: 11px; }

/* ---------- Yükleme / çeşitli ---------- */
html[data-ui="steel"] .upload-area { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
html[data-ui="steel"] .check-label { color: var(--ink-2); }

/* ---------- Toast ---------- */
html[data-ui="steel"] .toast {
    background: var(--raised);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    color: var(--ink);
}
html[data-ui="steel"] .toast i { color: var(--accent); }
html[data-ui="steel"] .toast.tp-upload .tp-bar { background: var(--surface); }
html[data-ui="steel"] .toast.tp-upload .tp-bar > div { background: var(--accent); }
html[data-ui="steel"] .toast.tp-upload .tp-pct, html[data-ui="steel"] .toast.tp-upload .tp-meta { font-family: var(--font-sans); }

/* ---------- Depolama diski ---------- */
html[data-ui="steel"] .sd-prov { background: var(--raised); border-color: var(--line); border-radius: var(--radius-md); }
html[data-ui="steel"] .sd-prov:hover { background: var(--raised); border-color: var(--line-strong); transform: none; }
html[data-ui="steel"] .sd-prov.sel { border-color: var(--accent); background: var(--accent-soft); }
html[data-ui="steel"] .sd-prov i.sd-ico { color: var(--ink-2); }
html[data-ui="steel"] .sd-prov.sel i.sd-ico { color: var(--accent); }
html[data-ui="steel"] .sd-hint { font-family: var(--font-mono); font-size: 11px; }

/* ---------- Ay etiketi / detay ---------- */
html[data-ui="steel"] .month-label::after { background: var(--line); }
html[data-ui="steel"] .detail-header h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.02em; }

/* ---------- Sürükle-bırak katmanı ---------- */
html[data-ui="steel"] #drop-overlay { background: var(--scrim-drop); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-ui="steel"] #drop-overlay .drop-box {
    background: var(--raised); border: 2px dashed var(--accent); border-radius: var(--radius-xl);
    color: var(--ink); font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em;
}
html[data-ui="steel"] #drop-overlay .drop-box i { color: var(--accent); }

/* ---------- Dosya önizleme ---------- */
html[data-ui="steel"] .preview-stage { background: var(--surface); }
html[data-ui="steel"] .preview-foot { border-top-color: var(--line); background: var(--raised); }

/* ---------- Duvar kağıdı seçici ---------- */
html[data-ui="steel"] .wp-tile { border-radius: var(--radius-md); border-color: var(--line); }
html[data-ui="steel"] .wp-tile:hover { transform: none; border-color: var(--line-strong); }
html[data-ui="steel"] .wp-tile.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
html[data-ui="steel"] .wp-check { background: var(--accent); color: var(--on-accent); }
html[data-ui="steel"] .wp-name { font-family: var(--font-sans); font-weight: 500; font-size: 10px; letter-spacing: 0; }

/* ---------- Ayarlar (stx) ---------- */
html[data-ui="steel"] .stx-in { padding: 28px 32px 36px; }
html[data-ui="steel"] .stx-title { font-family: var(--font-display); font-weight: 300; font-size: 2.1rem; letter-spacing: -0.045em; color: var(--ink); margin-bottom: 22px; }
html[data-ui="steel"] .stx-preview { border-radius: var(--radius-lg); border-color: var(--line); box-shadow: none; }
html[data-ui="steel"] .stx-preview .hello { color: var(--ink); text-shadow: none; font-family: var(--font-display); font-weight: 400; font-size: 0.8rem; }
html[data-ui="steel"] body.wp-photo .stx-preview .hello,
html[data-ui="steel"] .stx-preview.photo .hello { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
html[data-ui="steel"] .stx-preview .mini-dock { background: var(--raised); border: 1px solid var(--line); border-radius: 6px; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-ui="steel"] .stx-preview .mini-dock span { filter: var(--tile-filter); box-shadow: var(--tile-veil); }
html[data-ui="steel"] .stx-stat-top { margin-bottom: 12px; }
html[data-ui="steel"] .stx-stat-val { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
html[data-ui="steel"] .stx-stat-val small { font-family: var(--font-sans); }
html[data-ui="steel"] .stx-stat-sub { font-family: var(--font-sans); font-size: 10.5px; }
html[data-ui="steel"] .stx-hero-title { font-family: var(--font-display); font-weight: 300; font-size: 1.45rem; letter-spacing: -0.03em; color: var(--ink); }
html[data-ui="steel"] .stx-hero-title .dim { color: var(--muted); font-weight: 300; }
html[data-ui="steel"] .stx-info { font-size: 0.8rem; }
html[data-ui="steel"] .stx-info dt { color: var(--muted); }
html[data-ui="steel"] .stx-info dd { color: var(--ink-2); font-family: var(--font-sans); font-size: 12px; }
html[data-ui="steel"] .stx-row + .stx-row { border-top-color: var(--line); }
html[data-ui="steel"] .stx-row-title { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
html[data-ui="steel"] .stx-row-desc { font-size: 0.76rem; color: var(--muted); }
html[data-ui="steel"] .stx-row-side .cur { font-family: var(--font-sans); font-size: 12px; }
html[data-ui="steel"] .stx-row-side .active-lang { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
html[data-ui="steel"] .stx-wp { border-radius: var(--radius-sm); }
html[data-ui="steel"] .stx-wp:hover { transform: none; border-color: var(--line-strong); }
html[data-ui="steel"] .stx-wp.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
html[data-ui="steel"] .stx-wp.upload { background: var(--surface); border: 1px dashed var(--line-strong); color: var(--muted); }
html[data-ui="steel"] .stx-wp.upload:hover { color: var(--ink); border-color: var(--ink); }
html[data-ui="steel"] .stx-wp-strip { scrollbar-color: var(--line-strong) transparent; }
html[data-ui="steel"] .stx-wp-strip::-webkit-scrollbar-thumb { background: var(--line-strong); }
html[data-ui="steel"] .stx-back { color: var(--muted); font-weight: 500; }
html[data-ui="steel"] .stx-back:hover { color: var(--ink); }
html[data-ui="steel"] .stx-detail-title { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--ink); }
html[data-ui="steel"] .stx-detail-title i { color: var(--muted); }
html[data-ui="steel"] .stx-row-title .upd-badge { background: var(--danger); }

/* Tema karoları (Ayarlar > Tema ve Görünüm penceresi) — her iki temada aynı bileşen */
.theme-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-tile {
    position: relative; min-width: 190px; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 10px; padding: 12px;
    border-radius: 12px; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-primary); font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.theme-tile:hover { background: var(--bg-card-hover); border-color: var(--accent); }
.theme-tile.selected { border-color: var(--accent); background: var(--a-12); }
.theme-tile .theme-name { font-weight: 700; font-size: 0.86rem; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.theme-tile .theme-sub { font-size: 0.7rem; color: var(--text-secondary); margin-top: -8px; }
.theme-tile .theme-check { color: var(--accent); font-size: 0.9rem; }
.theme-swatch {
    height: 64px; border-radius: 8px; overflow: hidden; position: relative;
    border: 1px solid var(--border);
}
.theme-swatch .ts-bar { position: absolute; left: 0; right: 0; top: 0; height: 10px; }
.theme-swatch .ts-win { position: absolute; left: 16%; top: 24%; width: 52%; height: 60%; border-radius: 4px; }
.theme-swatch .ts-dot { position: absolute; width: 14px; height: 4px; border-radius: 2px; bottom: 8px; left: 50%; transform: translateX(-50%); }
/* Steel · Day */
.theme-swatch.ts-steel-day { background: #F4F5F8; }
.theme-swatch.ts-steel-day .ts-bar { background: #FFFFFF; border-bottom: 1px solid #E4E6EC; }
.theme-swatch.ts-steel-day .ts-win { background: #FFFFFF; border: 1px solid #E4E6EC; }
.theme-swatch.ts-steel-day .ts-dot { background: #3D5AF1; }
/* Steel · Night */
.theme-swatch.ts-steel-night { background: #0D0F14; }
.theme-swatch.ts-steel-night .ts-bar { background: #161922; border-bottom: 1px solid #2A2E3A; }
.theme-swatch.ts-steel-night .ts-win { background: #1D212C; border: 1px solid #2A2E3A; }
.theme-swatch.ts-steel-night .ts-dot { background: #7C93FF; }
/* Horizon */
.theme-swatch.ts-horizon { background: linear-gradient(140deg, #0a0a1f 0%, #12102e 40%, #1d1340 75%, #251744 100%); }
.theme-swatch.ts-horizon .ts-bar { background: rgba(12,12,30,0.55); border-bottom: 1px solid rgba(255,255,255,0.08); }
.theme-swatch.ts-horizon .ts-win { background: rgba(22,22,48,0.7); border: 1px solid rgba(255,255,255,0.1); }
.theme-swatch.ts-horizon .ts-dot { background: #6c63ff; }
html[data-ui="steel"] .theme-tile { border-radius: var(--radius-md); background: var(--raised); border-color: var(--line); }
html[data-ui="steel"] .theme-tile:hover { background: var(--raised); border-color: var(--line-strong); }
html[data-ui="steel"] .theme-tile.selected { border-color: var(--accent); background: var(--accent-soft); }
html[data-ui="steel"] .theme-tile .theme-name { font-weight: 600; }
html[data-ui="steel"] .theme-swatch { border-color: var(--line); border-radius: var(--radius-sm); }
.theme-mode { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- Roller ---------- */
html[data-ui="steel"] .role-app { background: var(--raised); border-color: var(--line); border-radius: var(--radius-sm); color: var(--ink-2); }
html[data-ui="steel"] .role-app:hover { background: var(--raised); border-color: var(--line-strong); }
html[data-ui="steel"] .role-app .box { border-color: var(--line-strong); border-radius: 4px; color: var(--on-accent); }
html[data-ui="steel"] .role-app.on { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
html[data-ui="steel"] .role-badge-sys { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0; border-color: var(--line); }

/* ---------- Boş / ince ayarlar ---------- */
html[data-ui="steel"] .window-body.no-pad iframe { background: transparent !important; }
@media (prefers-reduced-motion: reduce) {
    html[data-ui="steel"] * { transition: none !important; animation: none !important; }
}

/* ---------- Mobil: pencere tam ekran, köşesiz (temel kuralla aynı) ---------- */
@media (max-width: 767px) {
    html[data-ui="steel"] .window { border-radius: 0; border-left: none; border-right: none; border-top: none; box-shadow: none; }
    html[data-ui="steel"] #wallpaper.steel-default .dial { right: -30vmin; bottom: -22vmin; width: 90vmin; height: 90vmin; }
}