:root {
    /* Modern Dark UI + Bento + Glassmorphism + Aurora/Glow */

    /* Background / base */
    --bg-color: #06070a;
    --bg-elev-0: rgba(255, 255, 255, 0.02);

    /* Glass surfaces */
    --glass-bg: rgba(18, 20, 28, 0.55);
    --glass-bg-2: rgba(18, 20, 28, 0.42);
    --glass-bg-hover: rgba(47, 129, 255, 0.16);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-border-strong: rgba(255, 255, 255, 0.16);

    /* Text */
    --text-primary: rgba(244, 247, 255, 0.92);
    --text-secondary: rgba(244, 247, 255, 0.68);
    --text-dim: rgba(244, 247, 255, 0.44);

    /* Accents (Electric Blue + Vivid Orange) */
    --accent-blue: #2f81ff;
    --accent-blue-2: #3dd6ff;
    --accent-orange: #ff6a1a;
    --accent-highlight: #ff6a1a;

    /* keep existing token names for compatibility */
    --accent: var(--accent-blue);
    --accent-hover: #1f6feb;
    --accent-glow: rgba(47, 129, 255, 0.24);
    --orange-glow: rgba(255, 106, 26, 0.20);

    /* Borders / dividers */
    --border-color: rgba(255, 255, 255, 0.10);
    --border-highlight: rgba(255, 255, 255, 0.18);

    /* Interactive */
    --item-hover: rgba(255, 255, 255, 0.06);
    --item-active: rgba(47, 129, 255, 0.16);

    /* Motion */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.22s ease-in-out;

    /* Radius (soft/continuous corners) */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;

    /* Donut stroke thickness variables (px) */
    --usage-donut-stroke: 2; /* default main ring */
    --usage-donut-input-stroke: 5;
    --usage-donut-cached-stroke: 1;
    --usage-donut-output-stroke: 4;
    --usage-donut-gap: 0.045;

    --card-bg-main: rgba(255, 255, 255, 0.2);
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-bg-hover: rgba(255, 255, 255, 0.04);
    --card-border: rgba(255, 255, 255, 0.05);
}

/* Light theme kept as a supported mode, but tuned to match the new palette */
body.theme-light {
    --bg-color: #f8fafc;
    --bg-elev-0: rgba(15, 23, 42, 0.03);

    --glass-bg: rgba(255, 255, 255, 0.40);
    --glass-bg-2: rgba(255, 255, 255, 0.62);
    --glass-border: rgba(15, 23, 42, 0.10);
    --glass-border-strong: rgba(15, 23, 42, 0.16);

    --text-primary: rgba(15, 23, 42, 0.92);
    --text-secondary: rgba(15, 23, 42, 0.70);
    --text-dim: rgba(15, 23, 42, 0.48);

    --border-color: rgba(15, 23, 42, 0.12);
    --border-highlight: rgba(15, 23, 42, 0.20);

    --item-hover: rgba(15, 23, 42, 0.05);
    --item-active: rgba(47, 129, 255, 0.12);

    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-glow: rgba(37, 99, 235, 0.20);
    --accent-blue-2: #60a5fa;

    --card-bg: rgba(0, 0, 0, 0.03);
    --card-bg-hover: rgba(0, 0, 0, 0.04);
    --card-border: rgba(0, 0, 0, 0.05);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: 'Noto Sans SC', sans-serif, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    background-color: var(--bg-color);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: url(https://www.lovart.ai/assets/pointer-arrow-mini.png) 0 0, auto;
}

/* subtle animated gradient backdrop (example aesthetic) */
body::before {
    /* Aurora / deep-space mesh gradient backdrop */
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background:
        radial-gradient(1200px 700px at 10% 10%, rgba(47, 129, 255, 0.28) 0%, transparent 55%),
        radial-gradient(900px 650px at 80% 15%, rgba(61, 214, 255, 0.18) 0%, transparent 60%),
        radial-gradient(900px 650px at 20% 85%, rgba(255, 106, 26, 0.12) 0%, transparent 62%),
        radial-gradient(1000px 700px at 90% 80%, rgba(114, 91, 255, 0.14) 0%, transparent 62%),
        linear-gradient(180deg, #05070d 0%, #070a12 40%, #0c0a0a 100%);

    filter: saturate(1.05) contrast(1.05);
    opacity: 1;
}

body.theme-light::before {
    background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
        radial-gradient(800px 600px at 5% 10%, rgba(0, 255, 255, 0.15) 0%, transparent 50%), 
        radial-gradient(600px 500px at 95% 20%, rgba(255, 0, 255, 0.12) 0%, transparent 50%), 
        radial-gradient(700px 600px at 15% 85%, rgba(255, 255, 0, 0.15) 0%, transparent 55%), 
        radial-gradient(900px 700px at 85% 90%, rgba(123, 31, 162, 0.12) 0%, transparent 60%),
        linear-gradient(135deg, #ffffff 0%, #f0f4ff 50%, #fff0f5 100%);
}

body::after {
    /* subtle stars/grain for depth */
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.08) 0 1px, transparent 2px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.07) 0 1px, transparent 2px);
    background-size: 180px 180px;
    opacity: 0.22;
    mix-blend-mode: screen;
}

body.resizing,
body.is-resizing-window,
body.is-dragging-window {
    user-select: none !important;
    -webkit-user-select: none !important;
}

body.is-resizing-window iframe,
body.is-dragging-window iframe {
    pointer-events: none !important;
}

body.resizing {
    cursor: col-resize;
}

/* center resizer should also show col-resize */
body.resizing-center {
    user-select: none;
    cursor: col-resize;
}

.background-texture {
    background-image: linear-gradient(rgba(224, 122, 95, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(224, 122, 95, 0.08) 1px, transparent 1px);
    background-size: 50px 50px;
    min-height: 100vh;
    min-width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
}
body.theme-dark .background-texture {
    background-image: linear-gradient(rgba(224, 122, 95, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(224, 122, 95, 0.2) 1px, transparent 1px);
}

body.minimal-mode #preview-panel, body.minimal-mode .log-header, body.minimal-mode #logs {
    display: none;
}
body.minimal-mode #log-usage-dashboard {
    grid-column: 1 / 3;
}
body.minimal-mode .usage-row {
    grid-template-columns: 1fr;
}
body.minimal-mode .usage-donut {
    height: 100%;
}
body.minimal-mode .usage-donut .donut {
    width: 150px;
    height: 150px;
}
body.minimal-mode #usage-last-donut .usage-tooltip {
    right: 80px;
}