/* BTNC ACC — Dark Premium Theme (จาก rptacc-design Direction A) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* Surfaces — almost-black with subtle warmth */
    --bg-0: #07080a;
    --bg-1: #0c0e11;
    --bg-2: #11141a;
    --bg-3: #161a20;
    --bg-4: #1c2128;
    --bg-hover: #1f242c;

    /* Borders */
    --line-1: rgba(255, 255, 255, 0.05);
    --line-2: rgba(255, 255, 255, 0.08);
    --line-3: rgba(255, 255, 255, 0.12);

    /* Text */
    --fg-0: #f5f7fa;
    --fg-1: #d8dde4;
    --fg-2: #9aa3b0;
    --fg-3: #6b7480;
    --fg-4: #4a525c;

    /* Brand — Emerald */
    --acc-50:  #ecfdf5;
    --acc-300: #6ee7b7;
    --acc-400: #34d399;
    --acc-500: #10b981;
    --acc-600: #059669;
    --acc-700: #047857;
    --acc-800: #065f46;
    --acc-900: #064e3b;
    --acc-glow: rgba(16, 185, 129, 0.18);

    /* Semantic */
    --pos:  #10b981;
    --neg:  #f43f5e;
    --warn: #f59e0b;
    --info: #38bdf8;

    /* Radii */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;

    /* Type stacks */
    --font-th:   'IBM Plex Sans Thai', 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* Layout */
    --sidebar-width: 260px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg-0);
}

body {
    font-family: var(--font-th);
    color: var(--fg-1);
    overflow-x: hidden;
}

.btnc-num,
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.mono { font-family: var(--font-mono); }

/* Custom scrollbar */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--fg-4); }