/* ═══════════════════════════════════════════════════════════════════════════
   SROBot Müşteri Portali — BoardUI tasarım sistemi (boardui.com)
   Plain-CSS portu: token'lar, tipografi ve komponent tarifleri BoardUI'nin
   kendi kaynak dosyalarından (theme.css / typography.css / *.tsx) alındı.
   Işık teması; log/konsol yüzeyleri BoardUI'nin koyu kanvasında kalır.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Inter Variable (self-hosted, @fontsource alt kümeleri) ── */
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ── Renk primitifleri — Tailwind v4 OKLCH + BoardUI overrides ── */
    --white: #ffffff;
    --black: #000000;

    --neutral-50:  oklch(98.5% 0 none);
    --neutral-100: #f7f7f7;               /* BoardUI override */
    --neutral-200: #ebebeb;               /* BoardUI override */
    --neutral-300: oklch(87% 0 none);
    --neutral-400: oklch(70.8% 0 none);
    --neutral-500: oklch(55.6% 0 none);
    --neutral-600: oklch(43.9% 0 none);
    --neutral-700: oklch(37.1% 0 none);
    --neutral-800: oklch(26.9% 0 none);
    --neutral-900: oklch(20.5% 0 none);
    --neutral-925: #121212;               /* BoardUI override */
    --neutral-950: oklch(14.5% 0 none);

    --blue-100: oklch(93.2% 0.032 255.585);
    --blue-200: oklch(88.2% 0.059 254.128);
    --blue-300: oklch(80.9% 0.105 251.813);
    --blue-400: #3392ff;                  /* BoardUI override */
    --blue-500: oklch(62.3% 0.214 259.815);
    --blue-600: oklch(54.6% 0.245 262.881);
    --blue-700: oklch(48.8% 0.243 264.376);
    --blue-800: oklch(42.4% 0.199 265.638);

    --red-100: oklch(93.6% 0.032 17.717);
    --red-300: oklch(80.8% 0.114 19.571);
    --red-400: oklch(70.4% 0.191 22.216);
    --red-500: oklch(63.7% 0.237 25.331);
    --red-600: oklch(57.7% 0.245 27.325);
    --red-700: oklch(50.5% 0.213 27.518);

    --lime-100: oklch(96.7% 0.067 122.328);
    --lime-200: oklch(93.8% 0.127 124.321);
    --lime-500: oklch(76.8% 0.233 130.85);
    --lime-600: oklch(64.8% 0.2 131.684);
    --lime-700: oklch(53.2% 0.157 131.589);
    --lime-800: oklch(45.3% 0.124 130.933);

    --green-100: oklch(96.2% 0.044 156.743);
    --green-400: oklch(79.2% 0.209 151.711);
    --green-500: oklch(72.3% 0.219 149.579);
    --green-600: oklch(62.7% 0.194 149.214);
    --green-700: oklch(52.7% 0.154 150.069);

    --rose-100: oklch(94.1% 0.03 12.58);
    --rose-200: oklch(89.2% 0.058 10.001);
    --rose-500: oklch(64.5% 0.246 16.439);
    --rose-600: oklch(58.6% 0.253 17.585);
    --rose-800: oklch(45.5% 0.188 13.697);

    --yellow-100: oklch(97.3% 0.071 103.193);
    --yellow-200: oklch(94.5% 0.129 101.54);
    --yellow-500: oklch(79.5% 0.184 86.047);
    --yellow-600: oklch(68.1% 0.162 75.834);
    --yellow-700: oklch(55.4% 0.135 66.442);
    --yellow-800: oklch(47.6% 0.114 61.907);

    --amber-100: oklch(96.2% 0.059 95.617);
    --amber-400: oklch(82.8% 0.189 84.429);
    --amber-500: oklch(76.9% 0.188 70.08);
    --amber-600: oklch(66.6% 0.179 58.318);
    --amber-950: oklch(27.9% 0.077 45.635);

    --cyan-200: oklch(91.7% 0.08 205.041);
    --cyan-800: oklch(45% 0.085 224.283);

    --sky-600: oklch(58.8% 0.158 241.966);
    --sky-700: oklch(50% 0.134 242.749);

    --teal-600: oklch(60% 0.118 184.704);
    --teal-700: oklch(51.1% 0.096 186.391);

    --purple-100: oklch(94.6% 0.033 307.174);
    --purple-500: oklch(62.7% 0.265 303.9);
    --purple-600: oklch(55.8% 0.288 302.321);

    --indigo-100: oklch(93% 0.034 272.314);
    --indigo-500: oklch(58.5% 0.233 277.117);

    /* ── Semantik token'lar (BoardUI light) ── */
    --color-text-primary:   var(--neutral-950);
    --color-text-secondary: var(--neutral-500);
    --color-text-tertiary:  var(--neutral-400);
    --color-text-disabled:  var(--neutral-300);
    --color-text-error:     var(--red-500);

    --color-bg-full:            var(--white);
    --color-bg-primary:         var(--white);
    --color-bg-primary-hover:   var(--neutral-100);
    --color-bg-primary-active:  var(--neutral-200);
    --color-bg-secondary:       var(--neutral-100);
    --color-bg-secondary-hover: var(--neutral-200);
    --color-bg-tertiary:        var(--neutral-200);
    --color-bg-tertiary-hover:  var(--neutral-300);
    --color-bg-tertiary-error:  var(--red-100);

    --color-border-default: var(--neutral-200);
    --color-border-hover:   var(--neutral-300);
    --color-border-active:  var(--neutral-400);
    --color-separator:      var(--neutral-200);
    --color-focus-ring:     var(--blue-500);

    /* ── Gölgeler (BoardUI theme.css birebir) ── */
    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
    --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.10);
    --shadow-md:  0 2px 4px -1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.10);
    --shadow-lg:  0 4px 6px -2px rgb(0 0 0 / 0.05), 0 10px 15px -3px rgb(0 0 0 / 0.10);
    --shadow-xl:  0 10px 10px -5px rgb(0 0 0 / 0.04), 0 20px 25px -5px rgb(0 0 0 / 0.10);
    --shadow-card: 0 1px 1px 0 rgb(0 0 0 / 0.05);
    --shadow-dropdown: 0 1px 1px 0 rgb(0 0 0 / 0.04), 0 4px 4px 0 rgb(0 0 0 / 0.02);
    --shadow-sidebar: 0 1px 0 0 rgb(0 0 0 / 0.0196), 0 1px 12px 0 rgb(0 0 0 / 0.0588), 0 0 1px 0 rgb(0 0 0 / 0.3216);
    --shadow-nav-selected: 0 0 0 1px var(--blue-500), inset 0 1px 0 0 rgb(255 255 255 / 0.251);

    /* ── Buton gradyanları (BoardUI) ── */
    --grad-primary:         linear-gradient(180deg, var(--blue-500) 0%, var(--blue-600) 100%);
    --grad-primary-hover:   linear-gradient(180deg, var(--blue-400) 0%, var(--blue-500) 100%);
    --grad-primary-active:  linear-gradient(180deg, var(--blue-600) 0%, var(--blue-700) 100%);
    --grad-danger:          linear-gradient(180deg, var(--red-500) 0%, var(--red-600) 100%);
    --grad-danger-hover:    linear-gradient(180deg, var(--red-400) 0%, var(--red-500) 100%);
    --grad-danger-active:   linear-gradient(180deg, var(--red-600) 0%, var(--red-700) 100%);
    --grad-success:         linear-gradient(180deg, var(--green-500) 0%, var(--green-600) 100%);
    --grad-success-hover:   linear-gradient(180deg, var(--green-400) 0%, var(--green-500) 100%);
    --grad-success-active:  linear-gradient(180deg, var(--green-600) 0%, var(--green-700) 100%);

    /* ── Yazı ── */
    --font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

    /* ── Bot konsolu bölüm renkleri (açık zemine ayarlı) ── */
    --tone-red:    var(--red-500);
    --tone-green:  var(--lime-600);
    --tone-teal:   var(--teal-600);
    --tone-gold:   var(--amber-600);
    --tone-olive:  var(--yellow-600);
    --tone-blue:   var(--sky-600);
    --tone-purple: var(--purple-500);
    --tone-blue-strong: var(--blue-500);

    /* ── Eski değişken adları (bot konsolundaki inline kullanımlar için) ── */
    --bg: var(--white);
    --surface: var(--white);
    --surface-2: var(--neutral-100);
    --border: var(--neutral-200);
    --border-strong: var(--neutral-300);
    --text: var(--neutral-950);
    --text-muted: var(--neutral-500);
    --text-dim: var(--neutral-400);
    --accent: var(--teal-600);
    --accent-hover: var(--teal-700);
    --primary: var(--blue-500);
    --primary-hover: var(--blue-400);
    --danger: var(--red-500);
    --success: var(--lime-600);
    --warn: var(--amber-600);
    --radius: 10px;
    --shadow: var(--shadow-card);
}

/* ═══ Reset + temel ═══ */
* { box-sizing: border-box; }

html { color-scheme: light; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg-full);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 0.875rem;          /* Body — 14/20 */
    line-height: 1.4286;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
}

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; padding: 28px 0 40px; }

h1 { font-size: 1.5rem;   line-height: 2.125rem; font-weight: 600; margin: 0 0 4px; }   /* Title 1 */
h2 { font-size: 1.25rem;  line-height: 1.625rem; font-weight: 600; margin: 0 0 8px; }   /* Title 2 */
h3 { font-size: 1rem;     line-height: 1.375rem; font-weight: 600; margin: 0 0 8px; }   /* Headline */
h4 { font-size: 0.875rem; line-height: 1.25rem;  font-weight: 600; margin: 0 0 6px; }   /* Body semibold */
p  { margin: 0 0 12px; }

a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

::selection { background: var(--blue-200); }

/* İnce açık scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--neutral-300) transparent; }

/* ═══ Uygulama kabuğu — BoardUI sidebar ═══ */
.shell {
    display: flex;
    flex: 1;
    min-height: 100vh;
    background: var(--color-bg-full);
}

.sidebar {
    position: sticky;
    top: 8px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 256px;
    min-width: 256px;
    height: calc(100vh - 16px);
    margin: 8px 0 8px 8px;
    padding: 12px;
    border-radius: 24px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-sidebar);
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin-bottom: 12px;
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 600;
    text-decoration: none;
}
.sidebar-brand:hover { color: var(--color-text-primary); }
.sidebar-brand svg { width: 20px; height: 20px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }

.sidebar-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    color: var(--color-text-primary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 150ms ease;
}
.sidebar-nav a .nav-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sidebar-nav a svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-text-primary); }
.sidebar-nav a:hover { background: var(--color-bg-secondary-hover); color: var(--color-text-primary); }
.sidebar-nav a.active {
    background-image: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-600) 100%);
    box-shadow: var(--shadow-nav-selected);
    color: var(--white);
}
.sidebar-nav a.active svg { color: var(--white); }

.sidebar-section {
    padding: 12px 8px 4px;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.15px;
    font-weight: 500;
    color: var(--color-text-tertiary);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px;
    border-radius: 12px;
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-card);
}
.sidebar-user .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--neutral-300);
    color: var(--neutral-600);
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}
.sidebar-user .who { flex: 1; min-width: 0; }
.sidebar-user .who .nm {
    font-size: 0.8125rem;
    line-height: 1.125rem;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user .who .em {
    font-size: 0.6875rem;
    line-height: 0.9375rem;
    letter-spacing: 0.2px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user form { display: flex; }
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--neutral-500);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.icon-btn:hover { background: var(--color-bg-primary-hover); color: var(--color-text-primary); }
.icon-btn svg { width: 18px; height: 18px; }

.shell-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.shell-main > main { padding: 28px 32px 40px; }

/* ═══ Misafir üst navigasyonu ═══ */
.topnav { padding: 16px 0; }
.topnav .container { display: flex; align-items: center; justify-content: space-between; }

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.375rem;
}
.brand:hover { color: var(--color-text-primary); }
.brand svg { width: 20px; height: 20px; }

.nav { display: flex; align-items: center; gap: 8px; }
.nav > a:not(.btn) {
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 500;
    transition: background-color 150ms ease, color 150ms ease;
}
.nav > a:not(.btn):hover { background: var(--color-bg-primary-hover); color: var(--color-text-primary); }
.nav-user { color: var(--color-text-primary); font-weight: 500; padding: 0 8px; }

.inline { display: inline; }

/* ═══ Butonlar — BoardUI Button (medium 36 / r10, gradyan + ::before hover) ═══ */
.btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    box-shadow: var(--shadow-xs);
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:hover { background-color: var(--color-bg-primary-hover); border-color: var(--color-border-hover); color: var(--color-text-primary); }
.btn:active { background-color: var(--color-bg-primary-active); border-color: var(--color-border-active); }
.btn:disabled { background: var(--neutral-100); color: var(--color-text-tertiary); box-shadow: none; cursor: not-allowed; }
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-bg-full), 0 0 0 4px var(--color-focus-ring);
}

/* Gradyanlı varyantlar: default gradyan elemanda, hover gradyanı ::before'da
   opaklıkla açılır (background-image interpolate edilemediği için — BoardUI). */
.btn-primary, .btn-danger, .btn-success {
    border: none;
    color: var(--white);
}
.btn-primary::before, .btn-danger::before, .btn-success::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}
.btn-primary { background: var(--grad-primary); }
.btn-primary::before { background: var(--grad-primary-hover); }
.btn-danger  { background: var(--grad-danger); }
.btn-danger::before { background: var(--grad-danger-hover); }
.btn-success { background: var(--grad-success); }
.btn-success::before { background: var(--grad-success-hover); }

.btn-primary:hover, .btn-danger:hover, .btn-success:hover { color: var(--white); }
.btn-primary:hover:not(:disabled)::before,
.btn-danger:hover:not(:disabled)::before,
.btn-success:hover:not(:disabled)::before { opacity: 1; }
.btn-primary:active:not(:disabled) { background: var(--grad-primary-active); }
.btn-danger:active:not(:disabled)  { background: var(--grad-danger-active); }
.btn-success:active:not(:disabled) { background: var(--grad-success-active); }
.btn-primary:active::before, .btn-danger:active::before, .btn-success:active::before { opacity: 0; }
.btn-primary:disabled, .btn-danger:disabled, .btn-success:disabled {
    background: linear-gradient(180deg, var(--neutral-200) 0%, var(--neutral-300) 100%);
    color: var(--neutral-400);
}

/* Uyarı butonu: sarı chip yüzeyi (BoardUI status yellow çifti) */
.btn-warn {
    border: none;
    background: var(--yellow-200);
    color: var(--yellow-800);
}
.btn-warn:hover { background: var(--yellow-100); color: var(--yellow-800); }
.btn-warn:active { background: var(--yellow-500); color: var(--amber-950); }

/* Sessiz buton */
.btn-ghost {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--color-text-secondary);
}
.btn-ghost:hover { background: var(--color-bg-primary-hover); border-color: transparent; color: var(--color-text-primary); }
.btn-ghost:active { background: var(--color-bg-primary-active); border-color: transparent; }

/* Mavi tonlu (BoardUI "ghost" varyantı) */
.btn-tinted {
    border: none;
    background: var(--blue-100);
    color: var(--blue-700);
}
.btn-tinted:hover { background: var(--blue-200); color: var(--blue-700); }
.btn-tinted:active { background: var(--blue-300); }

/* Beyaz şık buton — saf beyaz yüzey, ince kenar, sakin tonlu hover (hareket yok) */
.btn-white {
    background: var(--white);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}
.btn-white:hover {
    background: var(--white);
    border-color: var(--color-border-active);
    color: var(--color-text-primary);
}
.btn-white:active { background: var(--color-bg-primary-active); border-color: var(--color-border-active); }

.btn-block { display: flex; width: 100%; }
.bot-controls { display: inline-flex; gap: 6px; align-items: center; }

/* Xs boy (BoardUI xs: 24px / r4 / caption-1 semibold) */
.btn-mini, .btn-target {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--color-border-default);
    border-radius: 4px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-mini:hover:not(:disabled) { background: var(--color-bg-primary-hover); border-color: var(--color-border-hover); }
.btn-mini:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-mini.atk  { color: var(--red-600); }
.btn-mini.atk:hover:not(:disabled)  { background: var(--red-100); border-color: var(--red-300); }
.btn-mini.buff { color: var(--teal-700); }
.btn-mini.buff:hover:not(:disabled) { background: var(--color-bg-primary-hover); }
.btn-mini.added { color: var(--color-text-tertiary); }
.btn-mini.del  { color: var(--red-600); }
.btn-mini.del:hover { background: var(--red-100); border-color: var(--red-300); }

.btn-target {
    border: none;
    background: var(--blue-100);
    color: var(--blue-700);
}
.btn-target:hover { background: var(--blue-200); }

/* ═══ Formlar — BoardUI Input (dolgulu #ebebeb, r10, inset ring) ═══ */
.form-group { margin-bottom: 16px; }
.form-group > label {
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.form-control {
    display: block;
    width: 100%;
    height: 36px;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-shadow: inset 0 0 0 2px transparent;
    transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}
.form-control::placeholder { color: var(--color-text-tertiary); }
.form-control:hover:not(:focus):not(:disabled) { box-shadow: inset 0 0 0 2px var(--color-border-hover); }
.form-control:focus { outline: none; box-shadow: inset 0 0 0 2px var(--color-border-active); }
.form-control:disabled { background: var(--neutral-100); color: var(--neutral-400); cursor: not-allowed; }

textarea.form-control { height: auto; min-height: 72px; resize: vertical; }

select.form-control {
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23737373'%3E%3Cpath d='M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
}

input[type="file"].form-control { height: auto; padding: 6px 8px; }
input[type="file"].form-control::file-selector-button {
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15px;
    padding: 4px 10px;
    margin-right: 10px;
    cursor: pointer;
}

input[type="checkbox"] { accent-color: var(--blue-500); width: 16px; height: 16px; }
input[type="range"] { accent-color: var(--blue-500); }

.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.form-help {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.15px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin: 4px 0 0;
}
.field-error {
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.15px;
    font-weight: 500;
    color: var(--color-text-error);
    margin-top: 4px;
}

.validation-summary {
    background: var(--red-100);
    color: var(--red-600);
    padding: 10px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-weight: 500;
}
.validation-summary:empty, .validation-summary:has(ul:empty) { display: none; }
.validation-summary ul { margin: 0; padding-left: 18px; }

/* ═══ Uyarılar — tonlu paneller (BoardUI status çiftleri) ═══ */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-weight: 500;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-info   { background: var(--blue-100);   color: var(--blue-800); }
.alert-danger { background: var(--rose-100);   color: var(--rose-800); }
.alert-warn   { background: var(--yellow-200); color: var(--yellow-800); }

/* ═══ Kartlar ═══ */
.card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-card);
}
.card-header {
    margin: -20px -20px 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-separator);
    border-radius: 16px 16px 0 0;
    background: var(--color-bg-secondary);
}
.card h1, .card h2, .card h3 { margin-top: 0; }

/* İkincil yüzeydeki iç kart (BoardUI stat-card yüzeyi) */
.card-sub {
    background: var(--color-bg-secondary);
    border: none;
    border-radius: 12px;
    padding: 16px;
}
.card-sub h4 { margin: 0 0 12px; font-size: 0.875rem; font-weight: 600; }
.card-sub hr { border: 0; border-top: 1px solid var(--color-separator); margin: 14px 0 4px; }
.card-sub select:not([class]) {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    padding: 5px 10px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
}

.empty-state { text-align: center; padding: 44px 24px; color: var(--color-text-secondary); }
.empty-state h3 { color: var(--color-text-primary); }

/* ═══ Sayfa başlığı ═══ */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header h1 { margin: 0; }
.page-header .subtitle { color: var(--color-text-secondary); margin-top: 2px; }
.page-header-actions { display: flex; gap: 8px; }

/* ═══ Tablolar — BoardUI Table ═══ */
.table-wrap {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: var(--shadow-card);
}
.table { width: 100%; border-collapse: collapse; text-align: left; }
.table thead th {
    background: var(--color-bg-secondary);
    color: var(--color-text-tertiary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-separator);
    white-space: nowrap;
}
.table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-separator);
    vertical-align: middle;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-text-primary);
}
.table tbody tr { transition: background-color 150ms ease; }
.table tbody tr:hover { background: var(--color-bg-secondary); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .col-actions { text-align: right; white-space: nowrap; }
.table .col-mono { font-family: var(--font-mono); font-size: 0.8125rem; }

/* ═══ Chip'ler — BoardUI Chip (r6, px6, 14 medium) ═══ */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
}
.badge-success { background: var(--lime-200);    color: var(--lime-800); }
.badge-warn    { background: var(--yellow-200);  color: var(--yellow-800); }
.badge-danger  { background: var(--rose-200);    color: var(--rose-800); }
.badge-muted   { background: var(--neutral-200); color: var(--neutral-500); }
.badge-accent  { background: var(--blue-200);    color: var(--blue-800); }

/* Canlı farm rozetindeki yumuşak parlama */
.badge.badge-success { position: relative; overflow: hidden; }
.badge.badge-success::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.55), transparent);
    animation: badge-shine 2.4s infinite;
}
@keyframes badge-shine {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* ═══ Filtre çubuğu / sayfalama ═══ */
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filter-bar input, .filter-bar select {
    height: 32px;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    box-shadow: inset 0 0 0 2px transparent;
    transition: box-shadow 150ms ease;
}
.filter-bar input:focus, .filter-bar select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--color-border-active); }

.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 16px; }
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
}
.pagination a:hover { background: var(--color-bg-primary-hover); color: var(--color-text-primary); }
.pagination .current {
    background: var(--grad-primary);
    color: var(--white);
    border-color: transparent;
    font-weight: 600;
}
.pagination .disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══ Anahtar/değer ═══ */
.kv-grid { display: grid; grid-template-columns: 180px 1fr; gap: 10px 16px; align-items: center; }
.kv-grid .k {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.15px;
    font-weight: 500;
}
.kv-grid .v { font-size: 0.875rem; }
.kv-grid .v.mono, .kv-grid .mono { font-family: var(--font-mono); font-size: 0.8125rem; }
.kv-title { margin: 16px 0 8px; font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary); }

.action-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.action-buttons form { display: inline; }

/* ═══ Zaman çizelgesi ═══ */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-separator);
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
}
.timeline li:last-child { border-bottom: 0; }
.timeline .time { color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: 0.75rem; }
.timeline .body { color: var(--color-text-primary); }
.timeline .body .ev-data {
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    margin-top: 2px;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ═══ Auth sayfaları ═══ */
.auth-page { max-width: 400px; margin: 48px auto 0; }
.auth-page h1 { margin-bottom: 4px; }
.auth-page .subtitle { color: var(--color-text-secondary); margin-bottom: 20px; }
.auth-page .form-footer { text-align: center; margin-top: 16px; color: var(--color-text-secondary); font-size: 0.8125rem; }

/* ═══ Landing ═══ */
.hero { text-align: center; padding: 72px 0 40px; }
.hero h1 {
    font-size: 2.5rem;
    line-height: 3.375rem;
    font-weight: 600;
    margin: 0 auto 12px;
    max-width: 720px;
    letter-spacing: -0.01em;
}
.hero .hero-accent { color: var(--blue-600); white-space: nowrap; }
.hero p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.375rem;
    max-width: 560px;
    margin: 0 auto 24px;
}
.hero-cta { display: flex; gap: 8px; justify-content: center; }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 40px 0;
}
.feature-grid .card {
    margin: 0;
    background: var(--color-bg-secondary);
    border: none;
    box-shadow: none;
}
.feature-grid h3 { color: var(--color-text-primary); }
.feature-grid p { color: var(--color-text-secondary); margin-bottom: 0; }

/* ═══ Altbilgi ═══ */
.footer { padding: 20px 0; margin-top: auto; }
.footer .container { display: flex; justify-content: space-between; }
.shell-main .footer { display: flex; justify-content: space-between; padding: 20px 32px; }
.muted { color: var(--color-text-secondary); font-size: 0.75rem; letter-spacing: 0.15px; }

/* ═══ Yardımcılar ═══ */
.mono { font-family: var(--font-mono); font-size: 0.8125rem; }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-2 { margin-bottom: 16px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Bot konsolu
   ═══════════════════════════════════════════════════════════════════════════ */

/* Üst durum çubuğu — BoardUI stat yüzeyi */
.bot-statusbar {
    display: grid;
    /* 5. sutun (Farm) artik 5 kolonluk bir tablo tasiyor: toplam/dk/saat/gun.
       Eski 1.2fr dar geliyordu ve tablo Para sutununun uzerine tasiyordu. */
    grid-template-columns: 1fr 1.15fr 0.9fr 1.9fr 2.1fr 1fr;
    gap: 14px;
    padding: 14px 18px;
    background: var(--color-bg-secondary);
    border-radius: 16px;
    margin-bottom: 12px;
}
.bot-statusbar .col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bot-statusbar .lbl {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.15px;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.bot-statusbar .val { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-text-primary); font-weight: 600; }
.bot-statusbar .val.dim { color: var(--color-text-tertiary); font-weight: 400; }
.bot-statusbar .val.accent { color: var(--teal-600); }
.bot-statusbar .val.gold   { color: var(--amber-600); }
.bot-statusbar .val.blue   { color: var(--sky-600); }
.bot-statusbar .val.yellow { color: var(--yellow-600); }
.bot-statusbar .val.green  { color: var(--lime-600); }
.bot-statusbar .val.eta    { color: var(--amber-600); }
.bot-statusbar .sub { font-size: 0.6875rem; color: var(--color-text-tertiary); font-family: var(--font-mono); display: flex; justify-content: space-between; }

/* Parti listesi */
.team-list { max-height: 320px; overflow-y: auto; }
.team-row {
    display: grid;
    grid-template-columns: 1.4fr 60px 1.6fr 1.4fr;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    margin-bottom: 6px;
}
.team-row .team-name { font-weight: 600; font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-row .team-meta { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-text-secondary); }
.team-row .team-hp { display: flex; align-items: center; gap: 6px; }
.team-row .team-hpbar { flex: 1; height: 10px; background: var(--color-bg-tertiary); border-radius: 999px; overflow: hidden; min-width: 60px; }
.team-row .team-hpbar .fill { height: 100%; border-radius: 999px; transition: width 0.3s; }
.team-row .team-hpbar .fill.ok   { background: var(--lime-500); }
.team-row .team-hpbar .fill.warn { background: var(--yellow-500); }
.team-row .team-hpbar .fill.crit { background: var(--red-500); animation: critical-flash 0.8s infinite; }
.team-row .team-hpval { font-family: var(--font-mono); font-size: 0.625rem; color: var(--color-text-tertiary); white-space: nowrap; }
.team-row .team-pos { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-text-tertiary); }

/* Kanal değiştirici */
.ch-inline { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 0.6875rem; font-weight: normal; }
.ch-inline #sb-ch-current { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--teal-600); font-weight: 600; }
.ch-inline #sb-ch-current.dim { color: var(--color-text-tertiary); }
.ch-inline select {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: none;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.6875rem;
    min-width: 70px;
    font-family: inherit;
}
.ch-inline .btn-mini { padding: 0 8px; height: 20px; font-size: 0.6875rem; }

/* Kalp atışı — BoardUI status dot (hale + nokta) */
.hb-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--neutral-200);
    margin-left: 4px;
    vertical-align: middle;
    transition: background 0.3s;
}
.hb-dot::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neutral-400);
    transition: background 0.3s;
}
.hb-dot.ok   { background: var(--green-100); }
.hb-dot.ok::after   { background: var(--green-500); animation: hb-pulse 2s infinite; }
.hb-dot.warn { background: var(--yellow-200); }
.hb-dot.warn::after { background: var(--yellow-500); }
.hb-dot.bad  { background: var(--rose-100); }
.hb-dot.bad::after  { background: var(--rose-500); animation: hb-pulse 1s infinite; }
@keyframes hb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ═══ Modal ═══ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 16px;
    padding: 20px;
    max-width: 460px;
    width: 100%;
    box-shadow: var(--shadow-xl);
    max-height: 80vh;
    overflow-y: auto;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-head h3 { margin: 0; }
.modal-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-separator);
}

/* Para birimi modal satırları */
.currency-mod-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--color-bg-secondary);
    border: none;
    border-radius: 10px;
    margin-bottom: 8px;
    gap: 12px;
}
.currency-mod-row .cmr-id { font-family: var(--font-mono); font-size: 0.75rem; color: var(--teal-700); font-weight: 600; }
.currency-mod-row .cmr-count { font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-text-primary); margin-top: 2px; }
.currency-mod-row select {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    min-width: 140px;
}

/* Para birimi sütunu */
.currency-col { cursor: pointer; transition: background 0.15s; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
.currency-col:hover { background: var(--color-bg-tertiary); }
.currency-col:hover .lbl { color: var(--color-text-primary); }
.currency-list { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.currency-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 0.6875rem; gap: 8px; }
.currency-row .cid { font-weight: 600; font-size: 0.625rem; }
.currency-row .cval { color: var(--color-text-primary); font-weight: 500; }
.currency-row.dim { color: var(--color-text-tertiary); }

/* HP/MP bar */
.vbar { position: relative; height: 18px; background: var(--color-bg-tertiary); border-radius: 999px; overflow: hidden; }
.vbar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width 0.25s; }
.vbar .fill.hp { background: var(--red-500); }
.vbar .fill.mp { background: var(--blue-500); }
.vbar .txt {
    position: absolute;
    inset: 0;
    text-align: center;
    line-height: 18px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--white);
    font-family: var(--font-mono);
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.55);
}

/* ═══ Sekmeler — BoardUI segmented control ═══ */
.tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--color-bg-secondary);
    border-radius: 12px;
    border: none;
    margin-bottom: 12px;
    overflow-x: auto;
}
.tabs .tab {
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    white-space: nowrap;
    transition: color 150ms ease, background-color 150ms ease;
}
.tabs .tab:hover { color: var(--color-text-primary); background: transparent; }
.tabs .tab.active {
    color: var(--color-text-primary);
    font-weight: 500;
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-2xs);
}
.tabs .tab .ic { margin-right: 6px; opacity: 0.7; }

.subtabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--color-bg-secondary);
    border-radius: 10px;
    border: none;
    margin-bottom: 12px;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
}
.subtabs .stab {
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
}
.subtabs .stab.active { color: var(--color-text-primary); font-weight: 500; background: var(--color-bg-primary); box-shadow: var(--shadow-2xs); }

.tab-content {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 16px;
    padding: 18px;
    min-height: 320px;
    box-shadow: var(--shadow-card);
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ═══ Log konsolu — BoardUI koyu kanvas (#121212) ═══ */
.log-feed {
    background: var(--neutral-925);
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.55;
    max-height: 480px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: #d4d4d4;
    scrollbar-color: var(--neutral-700) transparent;
}
.log-feed .ts { color: #6b6f76; }
.log-feed .lvl { display: inline-block; min-width: 56px; font-weight: bold; }
.log-feed .lvl-ERROR  { color: #f07873; }
.log-feed .lvl-STATUS { color: #4ec9b0; }
.log-feed .lvl-CAST   { color: #8ac94a; }
.log-feed .lvl-LEVEL  { color: #f0c848; }
.log-feed .lvl-KILL   { color: #c586c0; }
.log-feed .lvl-BUFF   { color: #9cdcfe; }
.log-feed .lvl-WARN   { color: #f0c848; }
.log-feed .lvl-INFO   { color: #9cdcfe; }
.log-feed .lvl-OK     { color: #8ac94a; }
.log-feed .lvl-CHAT   { color: #c586c0; }
.log-feed .lvl-CHAT-TX{ color: #c586c0; font-style: italic; }
.log-feed .lvl-MOVE   { color: #ce9178; }
.log-feed .lvl-PUSH   { color: #6b6f76; }
.log-feed .lvl-TRACE  { color: #5a5e66; }
.log-feed .lvl-HB     { color: #4a4e56; }
.log-feed .lvl-TX     { color: #7e9ec5; }
.log-feed .lvl-RX     { color: #7eb88a; }
.log-feed .chat-rx { color: #c586c0; padding: 3px 0; }
.log-feed .chat-tx { color: #4ec9b0; font-style: italic; padding: 3px 0; }
.log-feed .chat-rx::before { content: "↓ "; opacity: 0.7; }
.log-feed .chat-tx::before { content: "↑ "; opacity: 0.7; }

/* Log araç çubuğu */
.log-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.log-toolbar > strong { font-size: 0.875rem; }
.log-count {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    padding: 2px 8px;
    background: var(--color-bg-tertiary);
    border-radius: 6px;
}
.log-toolbar-divider { width: 1px; height: 18px; background: var(--color-separator); border-radius: 1px; }

/* ═══ Hesap seçici ═══ */
.account-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-bg-secondary);
    border-radius: 12px;
    margin-bottom: 12px;
}
.account-pick .lbl { font-size: 0.75rem; letter-spacing: 0.15px; font-weight: 500; color: var(--color-text-secondary); }
.account-pick select {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
    padding: 6px 10px;
    border-radius: 8px;
    font-family: inherit;
}
.account-pick .start { margin-left: auto; }

.tab-placeholder { padding: 60px 20px; text-align: center; color: var(--color-text-tertiary); }

/* ═══ Ayarlar sekmesi ═══ */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Otomasyon sekmesindeki özellik kartları */
/* Otomasyon sekmesindeki özellik kartları — .card ile AYNI token'lar.
   (Önce koyu tema varsayıp --neutral-925 zemin verilmişti; sayfa açık temada
   olduğu için metin zeminle aynı renge düşüp okunamaz hale geliyordu.) */
.settings-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: var(--shadow-card);
    color: var(--color-text-primary);
}
.settings-card h3 {
    margin: 0 0 4px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.settings-card .lbl {
    display: block;
    margin: 12px 0 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.settings-card .checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 7px 0;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    cursor: pointer;
}
.settings-card .checkbox-inline input[type="checkbox"] { flex: none; }
.settings-card .form-control { width: 100%; }
.settings-card .form-help {
    margin: 2px 0 10px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}
/* "Etkin" ana anahtarı diğerlerinden ayrılsın */
.settings-card .checkbox-inline.primary {
    font-weight: 600;
    padding-bottom: 8px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--color-border-default);
}
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-primary); margin-bottom: 4px; }
.form-row input[type="number"],
.form-row input[type="text"] {
    width: 100%;
    max-width: 220px;
    padding: 6px 10px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: none;
    box-shadow: inset 0 0 0 2px transparent;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    transition: box-shadow 150ms ease;
}
.card-sub .form-row input[type="number"],
.card-sub .form-row input[type="text"] { background: var(--color-bg-primary); box-shadow: var(--shadow-2xs); }
.form-row input:hover:not(:focus) { box-shadow: inset 0 0 0 2px var(--color-border-hover); }
.form-row input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--color-border-active); }
.form-row label.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    margin-bottom: 0;
}
.form-row label.checkbox input { margin: 0; }
.form-row .hint { font-size: 0.6875rem; color: var(--color-text-tertiary); margin-top: 4px; line-height: 1.5; }
.form-actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-separator);
    display: flex;
    align-items: center;
}

/* ═══ Skill sekmesi ═══ */
.skills-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.rotation-col { display: flex; flex-direction: column; }
.skills-list {
    max-height: 540px;
    overflow-y: auto;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
}
.skill-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-separator);
    gap: 10px;
}
.skill-row:last-child { border-bottom: 0; }
.skill-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-secondary);
    flex-shrink: 0;
    object-fit: contain;
}
.skill-icon-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px dashed var(--color-border-hover);
    background: var(--color-bg-secondary);
    flex-shrink: 0;
}
.skill-info { flex: 1; min-width: 0; }
.skill-name { font-size: 0.8125rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-meta { font-size: 0.625rem; color: var(--color-text-tertiary); font-family: var(--font-mono); }
.skill-actions { display: flex; gap: 4px; }

.rotation-list {
    min-height: 80px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
}
.rot-row { display: flex; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--color-separator); gap: 8px; }
.rot-row:last-child { border-bottom: 0; }
.rot-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--font-mono);
    flex-shrink: 0;
}
.rot-info { flex: 1; min-width: 0; }
.rot-actions { display: flex; gap: 3px; }

/* ═══ Envanter ═══ */
.checkbox-inline { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 0.75rem; color: var(--color-text-primary); }
.checkbox-inline input { margin: 0; }
.inv-table-wrap {
    max-height: 540px;
    overflow-y: auto;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
}
.inv-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.inv-table thead th {
    position: sticky;
    top: 0;
    background: var(--color-bg-secondary);
    color: var(--color-text-tertiary);
    font-size: 0.75rem;
    letter-spacing: 0.15px;
    font-weight: 500;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--color-separator);
    z-index: 1;
}
.inv-table tbody td { padding: 6px 10px; border-bottom: 1px solid var(--color-separator); color: var(--color-text-primary); }
.inv-table tbody tr:last-child td { border-bottom: 0; }
.inv-table tbody tr:hover { background: var(--color-bg-secondary); }
.inv-table .mono { font-family: var(--font-mono); }
.inv-table .dim { color: var(--color-text-tertiary); }
.bucket {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
}
.bucket-Equip    { background: var(--rose-200);   color: var(--rose-800); }
.bucket-Item     { background: var(--cyan-200);   color: var(--cyan-800); }
.bucket-Emblem   { background: var(--yellow-200); color: var(--yellow-800); }
.bucket-Artifact { background: var(--purple-100); color: var(--purple-600); }

/* ═══ Kaydırıcılar ═══ */
.slider-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.slider-row label { width: 90px; font-size: 0.75rem; color: var(--color-text-secondary); margin: 0; }
.slider {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--color-bg-tertiary);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
}
.slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blue-500);
    border: 2px solid var(--white);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
}
.slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blue-500);
    border: 2px solid var(--white);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
}
.slider.hp::-webkit-slider-thumb,
.slider.hp::-moz-range-thumb { background: var(--red-500); }
.slider.mp::-webkit-slider-thumb,
.slider.mp::-moz-range-thumb { background: var(--blue-500); }
.slider.vigor::-webkit-slider-thumb,
.slider.vigor::-moz-range-thumb { background: var(--lime-500); }
.slider-val {
    min-width: 50px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ═══ Auto-pot kartları ═══ */
.potcards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.potcard h4 { margin: 0 0 4px; font-size: 0.875rem; }
.potcard-head { padding-bottom: 8px; margin-bottom: 12px; border-bottom: 2px solid transparent; }
.potcard-head .hint { display: block; font-size: 0.6875rem; color: var(--color-text-tertiary); margin-top: 2px; }
.potcard-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.potcard-row label { font-size: 0.75rem; color: var(--color-text-secondary); margin: 0; }
.potcard-row input[type="number"] {
    width: 90px;
    padding: 4px 8px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: none;
    box-shadow: var(--shadow-2xs);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.item-picker {
    flex: 1;
    min-width: 200px;
    padding: 6px 10px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    font-size: 0.75rem;
}

/* ═══ Toast bildirimleri — BoardUI Notification ═══ */
.toast-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 340px;
    pointer-events: none;
}
.toast {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(380px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: auto;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast-icon {
    font-size: 15px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.toast-body { flex: 1; font-size: 0.8125rem; color: var(--color-text-primary); line-height: 1.4; word-break: break-word; }
.toast-kill    .toast-icon { background: var(--purple-100); color: var(--purple-600); }
.toast-level   .toast-icon { background: var(--amber-100);  color: var(--amber-600); }
.toast-error   .toast-icon { background: var(--rose-100);   color: var(--rose-600); }
.toast-success .toast-icon { background: var(--lime-100);   color: var(--lime-600); }

/* ═══ Yükleme katmanı ═══ */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgb(255 255 255 / 0.6);
    backdrop-filter: blur(2px);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: 16px;
    padding: 32px 40px;
    text-align: center;
    max-width: 380px;
    box-shadow: var(--shadow-xl);
}
.loading-text { font-size: 0.875rem; color: var(--color-text-primary); margin-top: 16px; font-weight: 500; }
.loading-sub  { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 6px; line-height: 1.5; }
.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-bg-tertiary);
    border-top-color: var(--blue-500);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Kritik HP/MP */
.vbar.critical { animation: critical-flash 0.8s infinite; }
@keyframes critical-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgb(220 38 38 / 0); }
    50%      { box-shadow: 0 0 0 3px rgb(220 38 38 / 0.25); }
}

/* ═══ Harita ═══ */
.map-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.map-toolbar .lbl { font-size: 0.75rem; letter-spacing: 0.15px; font-weight: 500; color: var(--color-text-secondary); }
.map-toolbar select {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.75rem;
    min-width: 220px;
}

.map-instructions {
    background: var(--yellow-200);
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    color: var(--yellow-800);
    font-weight: 500;
}
.map-instructions strong { color: var(--yellow-800); margin-right: 8px; }

.map-viewport {
    position: relative;
    width: 100%;
    height: 580px;
    background: var(--neutral-925);
    border: none;
    border-radius: 12px;
    overflow: hidden;
    cursor: grab;
    user-select: none;
}
.map-viewport:active { cursor: grabbing; }
#map-cv {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}
.map-legend {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: rgb(18 18 20 / 0.82);
    border: 1px solid var(--neutral-800);
    border-radius: 8px;
    pointer-events: none;
    font-size: 11px;
    color: var(--color-text-secondary);
}
.map-legend span { display: flex; align-items: center; gap: 6px; }
.map-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--neutral-400);
    pointer-events: none;
}
.map-footer { display: flex; align-items: center; margin-top: 8px; gap: 12px; }

/* ═══ Boss ızgarası ═══ */
.boss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.boss-card {
    background: var(--color-bg-secondary);
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.boss-card.boss-alive { background: var(--lime-100); }
.boss-card.boss-dead  { background: var(--color-bg-secondary); opacity: 0.55; }
.boss-card.boss-wait  { opacity: 0.8; }
.boss-status { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2px; }
.boss-alive .boss-status { color: var(--lime-800); }
.boss-dead .boss-status  { color: var(--rose-800); }
.boss-wait .boss-status  { color: var(--color-text-secondary); }
.boss-name { font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary); }
.boss-meta { font-size: 0.6875rem; color: var(--color-text-secondary); font-family: var(--font-mono); }
.boss-go { margin-top: 8px; height: 28px; padding: 0 12px; font-size: 0.75rem; align-self: flex-start; }

/* ═══ Auto-sell kategorileri ═══ */
.sell-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; padding: 8px 4px; }
@media (min-width: 900px) { .sell-cats { grid-template-columns: repeat(4, 1fr); } }

/* ═══ Training area kartı ═══ */
.ta-current {
    padding: 12px;
    background: var(--color-bg-secondary);
    border: none;
    border-radius: 10px;
    min-height: 60px;
}
.ta-current .ta-name { font-weight: 600; color: var(--amber-600); font-size: 0.875rem; margin-bottom: 4px; }
.ta-current .ta-pos { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-secondary); }

/* ═══ Duyarlılık ═══ */
@media (max-width: 960px) {
    .shell { flex-direction: column; }
    .sidebar {
        position: static;
        width: auto;
        min-width: 0;
        height: auto;
        margin: 8px;
        flex-direction: column;
    }
    .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
    .sidebar-nav a { flex: 1 1 auto; justify-content: center; }
    .sidebar-nav a .nav-l { justify-content: center; }
    .sidebar-section { display: none; }
    .shell-main > main { padding: 16px; }
    .shell-main .footer { padding: 16px; }
}
@media (max-width: 900px) {
    .bot-statusbar { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
    .tabs { font-size: 0.75rem; }
    .tabs .tab { padding: 6px 10px; }
    .tabs .tab .ic { display: none; }
    .settings-grid, .skills-layout, .potcards { grid-template-columns: 1fr; }
    .rotation-col { margin-top: 12px; }
    .account-pick { flex-wrap: wrap; gap: 6px; }
    .map-toolbar { gap: 6px; }
    .map-toolbar select { min-width: 140px; }
    .toast-stack { max-width: calc(100vw - 24px); right: 12px; }
    .map-viewport { height: 380px; }
    .kv-grid { grid-template-columns: 1fr; gap: 2px 0; }
    .kv-grid .k { margin-top: 8px; }
}
@media (max-width: 600px) {
    .bot-statusbar { grid-template-columns: 1fr; }
    .tab-content { padding: 12px; }
    .sell-cats { grid-template-columns: 1fr 1fr !important; }
    .hero h1 { font-size: 2rem; line-height: 2.75rem; }
    .hero-cta { flex-direction: column; align-items: stretch; }
}

/* iOS Safari otomatik zoom önlemi (BoardUI globals) */
@media (max-width: 639px) {
    input, select, textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .badge.badge-success::after,
    .hb-dot.ok::after, .hb-dot.bad::after,
    .vbar.critical,
    .team-row .team-hpbar .fill.crit,
    .map-pin-ring { animation: none; }
}

/* ── İkonlu eşya seçici (native <select> yerine) ───────────────────────────
   Native select'in dropdown'ı işletim sisteminin çizdiği bir liste: ne ikon
   koyabiliyoruz ne de biçimlendirebiliyoruz. Bu bileşen aynı yeri tutuyor
   (.form-control ile aynı yükseklik/kenar yarıçapı) ama listeyi biz çiziyoruz.

   Erişilebilirlik: tetikleyici gerçek bir <button>, liste role="listbox",
   ok tuşları/Enter/Esc çalışıyor, yazarak arama var. */

.ipick { position: relative; }

.ipick-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 36px;
    padding: 4px 32px 4px 8px;
    border: none;
    border-radius: var(--radius);
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    position: relative;
}
.ipick-trigger:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--color-border-hover); }
.ipick-trigger:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 1px; }
.ipick-trigger:disabled { opacity: .55; cursor: not-allowed; }

/* Ok işareti — native select'inkiyle aynı yerde dursun */
.ipick-trigger::after {
    content: "";
    position: absolute;
    right: 12px; top: 50%;
    width: 8px; height: 8px;
    margin-top: -5px;
    border-right: 2px solid var(--color-text-secondary);
    border-bottom: 2px solid var(--color-text-secondary);
    transform: rotate(45deg);
}
.ipick.open .ipick-trigger::after { transform: rotate(-135deg); margin-top: -1px; }

.ipick-icon {
    width: 26px; height: 26px;
    flex: 0 0 26px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--color-bg-primary);
    image-rendering: -webkit-optimize-contrast;
}
.ipick-icon.empty { background: var(--color-bg-tertiary-hover); }

.ipick-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ipick-count { color: var(--color-text-secondary); font-size: 0.75rem; flex: 0 0 auto; }

/* ── Açılır panel ── */
.ipick-panel {
    position: absolute;
    z-index: 60;
    left: 0;
    top: calc(100% + 4px);
    /* Panel tetikleyiciden GENIS olabilir: eşya adları uzun ("HP Yenileme İksiri
       (Ekstra Büyük)") ve dar bir kutuda "%..." diye kesiliyordu. Tetikleyici kadar
       yer kaplar ama gerekirse taşar. */
    min-width: 100%;
    width: max-content;
    max-width: min(380px, 90vw);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 6px;
    display: none;
}
.ipick.open .ipick-panel { display: block; }

/* Yukarı açılma — sayfanın altına yakınsa panel ekrandan taşmasın */
.ipick.up .ipick-panel { top: auto; bottom: calc(100% + 4px); }
/* Sağ kenardan taşacaksa sağa hizala */
.ipick.right .ipick-panel { left: auto; right: 0; }

.ipick-search {
    width: 100%;
    height: 30px;
    padding: 4px 8px;
    margin-bottom: 6px;
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    background: var(--color-bg-full);
    color: var(--color-text-primary);
    font-size: 0.8125rem;
}
.ipick-search:focus { outline: none; border-color: var(--color-border-hover); }

.ipick-list { max-height: 260px; overflow-y: auto; }

.ipick-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8125rem;
    line-height: 1.2;
}
.ipick-opt:hover, .ipick-opt.active { background: var(--color-bg-primary-hover); }
.ipick-opt[aria-selected="true"] { background: var(--color-bg-tertiary); font-weight: 500; }
/* Listede isim KESILMEZ — gerekirse iki satıra sarar. Kesilen isim seçiciyi
   işe yaramaz hale getiriyordu (hepsi "A..." görünüyordu). */
.ipick-opt .ipick-label {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    line-height: 1.25;
}
.ipick-opt { align-items: flex-start; }
.ipick-opt .ipick-icon, .ipick-opt .ipick-count, .ipick-opt .ipick-opt-id { margin-top: 1px; }
.ipick-opt-id { color: var(--color-text-tertiary); font-size: 0.6875rem; font-family: var(--font-mono, monospace); }

.ipick-empty { padding: 12px 6px; text-align: center; color: var(--color-text-secondary); font-size: 0.8125rem; }

/* ── Envanter tablosu / listelerdeki küçük ikon ── */
.item-icon-sm {
    width: 22px; height: 22px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
    border-radius: 4px;
}

/* ── Native <select> dropdown'ı ────────────────────────────────────────────
   Bir <select>'in AÇILAN listesini klasik CSS ile biçimlendirmek mümkün değil:
   onu işletim sistemi çiziyor. Yeni "customizable select" standardı buna izin
   veriyor (appearance: base-select + ::picker).

   @supports ile koşulluyoruz: desteklemeyen tarayıcıda hiçbir şey değişmez,
   native liste görünür. Yani riski yok, destekleyende kazanç var.

   Eşya seçicileri bundan etkilenmiyor — onlar zaten kendi çizdiğimiz .ipick
   bileşeni (ikon gösterebilmek için native select yetmiyordu). */

@supports (appearance: base-select) {
    select.form-control,
    select.form-control::picker(select) {
        appearance: base-select;
    }

    select.form-control {
        padding-right: 34px;
    }

    select.form-control::picker-icon {
        color: var(--color-text-secondary);
        transition: transform .15s ease;
    }
    select.form-control:open::picker-icon { transform: rotate(180deg); }

    select.form-control::picker(select) {
        border: 1px solid var(--color-border-default);
        border-radius: var(--radius);
        background: var(--color-bg-primary);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
        padding: 6px;
        margin-top: 4px;
        max-height: 300px;
        overflow-y: auto;
    }

    select.form-control option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        border-radius: 8px;
        background: transparent;
        color: var(--color-text-primary);
        font-size: 0.8125rem;
    }
    select.form-control option:hover,
    select.form-control option:focus {
        background: var(--color-bg-primary-hover);
    }
    select.form-control option:checked {
        background: var(--color-bg-tertiary);
        font-weight: 500;
    }
    /* Seçili işareti solda sabit yer tutmasın — metin hizası kaymasın */
    select.form-control option::checkmark { order: 1; margin-left: auto; }

    select.form-control optgroup {
        padding: 4px 8px;
        color: var(--color-text-secondary);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: .3px;
        text-transform: uppercase;
    }
}

/* Desteklemeyen tarayıcılarda en azından option renkleri tutarlı olsun
   (Firefox/Windows'ta option rengi ayrı çiziliyor). */
select.form-control option {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* ── Envanter: kuşanılanlar + çanta ────────────────────────────────────────
   Eski hâli tek düz tabloydu: kuşandığın kılıçla çantandaki iksir aynı satırda,
   ikon yok, hangi eşyanın üzerinde olduğu belli değil. Artık ikiye ayrılıyor.

   Slot isimleri (kask/göğüslük/silah) UYDURULMUYOR: oyun ekipmanın slotunu sayı
   olarak gönderiyor (ItemType) ve o sayıların anlamı şifreli veride. Bu yüzden
   kuşanılanlar kendi adlarıyla listeleniyor, tip sayısı küçük bir rozet olarak
   duruyor — yanlış isim uydurmaktansa dürüst olan bu. */

.inv-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.inv-toolbar .form-control { flex: 1 1 220px; max-width: 300px; width: auto; }
.inv-toolbar .btn { padding: 4px 12px; font-size: 12px; }

.inv-layout {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.6fr);
    gap: 14px;
    align-items: start;
}
@media (max-width: 900px) { .inv-layout { grid-template-columns: 1fr; } }

.inv-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-default);
}
.inv-sec-head h4 { margin: 0; font-size: 0.9375rem; }

.inv-empty {
    padding: 26px 10px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

/* ── Çanta: ikon ızgarası ── */
.bag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
}

.bag-cell {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    background: var(--color-bg-primary);
    cursor: default;
    transition: transform .08s ease, border-color .08s ease;
}
.bag-cell:hover {
    transform: translateY(-1px);
    border-color: var(--color-border-hover);
    z-index: 2;
}
.bag-cell img { width: 76%; height: 76%; object-fit: contain; }

/* Adet rozeti — sağ altta, oyun envanterindeki gibi */
.bag-count {
    position: absolute;
    right: 3px; bottom: 2px;
    padding: 0 3px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
/* Geliştirme seviyesi — sol üstte */
.bag-enh {
    position: absolute;
    left: 3px; top: 2px;
    color: var(--tone-green, #2f7a45);
    font-size: 0.625rem;
    font-weight: 700;
    text-shadow: 0 0 2px var(--color-bg-primary);
}
.bag-cell.bound::after {
    content: "";
    position: absolute;
    right: 3px; top: 3px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--tone-red, #c0392b);
}

/* Kova rengi — sol kenar şeridi */
.bag-cell.b-Emblem { box-shadow: inset 3px 0 0 var(--tone-purple, #8e44ad); }
.bag-cell.b-Artifact { box-shadow: inset 3px 0 0 var(--tone-blue-strong, #2980b9); }

/* Hover ipucu — eşyanın tam adı; ızgarada isim yazacak yer yok */
.bag-cell .bag-tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--neutral-900, #1a1a1a);
    color: #fff;
    font-size: 0.6875rem;
    line-height: 1.3;
    white-space: nowrap;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease;
    z-index: 5;
}
.bag-cell:hover .bag-tip { opacity: 1; }


/* ── Kuşanılanlar: karakter silüeti + çevresinde slot halkası ──────────────
   Slot konumları JS'te açıdan hesaplanıp `left`/`top` ile veriliyor. İlk denemede
   `transform: translate(0, -41%)` kullanılmıştı ve hepsi ortada üst üste yığıldı:
   transform'daki yüzde ELEMANIN KENDİ boyutuna göre hesaplanıyor (54px'in %41'i
   = 22px), kapsayıcıya göre değil. left/top yüzdeleri ise kapsayıcıya göre. */

.doll {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1;
    margin: 4px auto 8px;
}

/* Halka çizgisi */
.doll-ring {
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    border: 1px dashed var(--color-border-default);
    pointer-events: none;
}

/* Ortadaki karakter silüeti */
.doll-body {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 34%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    pointer-events: none;
}
.doll-body svg { width: 100%; height: auto; color: var(--color-text-tertiary); }
.doll-body .db-name {
    font-size: 0.75rem; font-weight: 600; line-height: 1.15;
    word-break: break-word; color: var(--color-text-primary);
}
.doll-body .db-sub { font-size: 0.625rem; color: var(--color-text-secondary); }

/* Halka üzerindeki slot — konumu JS `left`/`top` ile veriyor */
.doll-slot {
    position: absolute;
    width: 48px; height: 48px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-primary);
    cursor: grab;
    transition: border-color .1s ease, box-shadow .1s ease;
}
.doll-slot:hover { border-color: var(--color-border-hover); box-shadow: 0 2px 8px rgba(0,0,0,.10); z-index: 3; }
.doll-slot img { width: 76%; height: 76%; object-fit: contain; }

.doll-slot.empty {
    background: var(--color-bg-tertiary);
    border-style: dashed;
    cursor: default;
    font-size: 17px;
    opacity: .45;
}

/* Geliştirme seviyesi — sağ altta küçük rozet */
.doll-enh {
    position: absolute;
    right: -3px; bottom: -4px;
    padding: 0 4px;
    border-radius: 6px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    color: var(--tone-green, #2f7a45);
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 1.5;
}

/* İpucu — slotun DIŞ tarafına açılır ki halkanın içini kapatmasın */
.doll-slot .doll-tip {
    position: absolute;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--neutral-900, #1a1a1a);
    color: #fff;
    font-size: 0.6875rem;
    line-height: 1.3;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease;
    z-index: 8;
}
.doll-slot:hover .doll-tip { opacity: 1; }
/* Sol yarıdaki slotlar ipucunu sola, sağdakiler sağa açar */
.doll-slot[data-side="l"] .doll-tip { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.doll-slot[data-side="r"] .doll-tip { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.doll-slot[data-side="t"] .doll-tip { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.doll-slot[data-side="b"] .doll-tip { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }

/* Slot etiketi — boş slotlarda hangi parça olduğu yazsın */
.doll-slot .doll-label {
    position: absolute;
    bottom: -14px; left: 50%;
    transform: translateX(-50%);
    font-size: 0.5625rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

/* ── Sürükle-bırak ── */
.doll-slot.drag-over, .bag-cell.drag-over {
    border-color: var(--tone-green, #2f7a45);
    box-shadow: 0 0 0 2px var(--tone-green, #2f7a45);
}
.doll-slot.dragging, .bag-cell.dragging { opacity: .4; }
.bag-cell[draggable="true"] { cursor: grab; }

@media (max-width: 620px) {
    .doll { max-width: 280px; }
    .doll-slot { width: 40px; height: 40px; border-radius: 10px; }
}

/* Değiştirilebilir slot (silah/kalkan) — diğerlerinden ayırt edilsin */
.doll-slot.swappable { border-color: var(--tone-blue-strong, #2980b9); }
.doll-slot.swappable::after {
    content: "";
    position: absolute;
    right: -2px; top: -2px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--tone-blue-strong, #2980b9);
}
.bag-grid.drag-over {
    outline: 2px dashed var(--tone-green, #2f7a45);
    outline-offset: 4px;
    border-radius: 10px;
}

/* ── Durum barı: canlı göstergeler ─────────────────────────────────────────
   Eskiden EXP sadece küçük bir alt-etiketti ve farm verisi (öldürme, kazanılan
   exp/altın, o an ne yapıldığı) hiç gösterilmiyordu — hepsi state'te zaten
   geliyordu ama kullanılmıyordu. */

.bot-statusbar .col.wide { gap: 5px; justify-content: center; }

.meter-row { display: grid; grid-template-columns: 30px 1fr; gap: 6px; align-items: center; }
.meter-lbl {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--color-text-secondary);
}

/* EXP çubuğu — HP/MP ile aynı görsel dil */
.bot-statusbar .fill.exp { background: linear-gradient(90deg, var(--lime-600, #65a30d), var(--teal-600, #0d9488)); }

/* Durum rozeti — renk duruma göre, "canlı" hissi versin */
.bot-statusbar .pill {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: .2px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}
.bot-statusbar .pill.on   { background: color-mix(in srgb, var(--lime-600) 18%, transparent); color: var(--lime-600); }
.bot-statusbar .pill.warn { background: color-mix(in srgb, var(--amber-600) 18%, transparent); color: var(--amber-600); }
.bot-statusbar .pill.err  { background: color-mix(in srgb, var(--red-500) 18%, transparent); color: var(--red-500); }

.lvl-badge {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--sky-600);
}

/* Farm sayaçları */
.stat-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1px 8px;
    font-size: 0.625rem;
    color: var(--color-text-tertiary);
}
.stat-grid .mono { font-family: var(--font-mono); color: var(--color-text-primary); text-align: right; }

@media (max-width: 1200px) {
    .bot-statusbar { grid-template-columns: 1fr 1fr 1.6fr; }
    .bot-statusbar .currency-col { grid-column: span 3; }
}

/* ── Durum barı: buff rozetleri + farm tablosu ─────────────────────────────
   Ham id göstermiyoruz: buff'ın adı öğrenilmişse ikon+ad, değilse nötr nokta. */
.buff-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; max-width: 260px; }
.buff-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 5px 1px 2px; border-radius: 9px;
    background: var(--surface-2, rgba(255,255,255,.06));
    font-size: 10px; line-height: 15px; white-space: nowrap;
    max-width: 118px; overflow: hidden;
}
.buff-chip img { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.buff-chip > span { overflow: hidden; text-overflow: ellipsis; }
.buff-chip .bc-dot {
    width: 8px; height: 8px; border-radius: 50%; margin-left: 3px;
    background: var(--tone-teal, #4aa); flex: 0 0 auto;
}

.farm-table {
    width: 100%; border-collapse: collapse; font-size: 10.5px; margin-top: 2px;
    /* fixed + %100: kolonlar mevcut genisligi PAYLASIR. auto olsaydi icerik
       kadar genisleyip komsu sutunun uzerine tasardi (yasanan hata buydu). */
    table-layout: fixed;
}
.farm-table td, .farm-table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.farm-table col.c-key { width: 34%; }
.farm-table th {
    font-weight: 500; text-align: right; padding: 0 0 1px 6px;
    color: var(--muted); font-size: 9.5px;
}
.farm-table th:first-child { text-align: left; }
.farm-table td { text-align: right; padding: 0 0 0 6px; font-variant-numeric: tabular-nums; }
.farm-table td.fk { text-align: left; color: var(--muted); }