*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #f6f7fb;
    --bg2: #ffffff;
    --bg3: #f1f4fa;
    --bg4: #e9eef8;
    --border: #dde3ef;
    --border2: #c9d3e5;
    --text: #111827;
    --text2: #4b5675;
    --text3: #8896b3;

    --primary: #6366f1;
    --primary-hover: #5254cc;
    --primary-light: rgba(99,102,241,0.12);

    --danger: #ef4444;
    --danger-hover: #dc2626;
    --success: #22c55e;
    --warning: #f59e0b;
    --urgent: #ef4444;
    --high: #f97316;
    --medium: #eab308;
    --low: #22c55e;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 8px 24px rgba(17,24,39,0.08);
    --sidebar-w: 260px;
    --transition: 0.2s ease;
}

body.theme-clean-light,
body.light {
    --bg: #f6f7fb;
    --bg2: #ffffff;
    --bg3: #f1f4fa;
    --bg4: #e9eef8;
    --border: #dde3ef;
    --border2: #c9d3e5;
    --text: #111827;
    --text2: #4b5675;
    --text3: #8896b3;
    --primary: #6366f1;
    --primary-hover: #5254cc;
    --primary-light: rgba(99,102,241,0.12);
    --shadow: 0 8px 24px rgba(17,24,39,0.08);
}

body.theme-graphite-dark {
    --bg: #151922;
    --bg2: #1b2230;
    --bg3: #232c3d;
    --bg4: #2a3447;
    --border: #313d53;
    --border2: #3d4b67;
    --text: #e8edf5;
    --text2: #99a6c0;
    --text3: #6f7e9f;
    --primary: #38bdf8;
    --primary-hover: #0ea5e9;
    --primary-light: rgba(56,189,248,0.16);
    --shadow: 0 0 0 rgba(0,0,0,0);
}

body.theme-midnight-purple {
    --bg: #120f22;
    --bg2: #1b1630;
    --bg3: #261f44;
    --bg4: #32285a;
    --border: #3a315f;
    --border2: #4a3f77;
    --text: #efeaff;
    --text2: #b6abd8;
    --text3: #8f84b8;
    --primary: #a78bfa;
    --primary-hover: #8b5cf6;
    --primary-light: rgba(167,139,250,0.20);
    --shadow: 0 10px 28px rgba(139,92,246,0.16);
}

body.theme-mint-teal {
    --bg: #f3fbfa;
    --bg2: #ffffff;
    --bg3: #eaf8f5;
    --bg4: #dff2ee;
    --border: #cde9e1;
    --border2: #b4ddd2;
    --text: #0f172a;
    --text2: #47616f;
    --text3: #6f8b98;
    --primary: #14b8a6;
    --primary-hover: #0d9488;
    --primary-light: rgba(20,184,166,0.14);
    --shadow: 0 8px 24px rgba(13,148,136,0.08);
}

body.theme-coral-warm {
    --bg: #fff8f6;
    --bg2: #ffffff;
    --bg3: #fff0eb;
    --bg4: #ffe3da;
    --border: #ffd2c4;
    --border2: #ffbea8;
    --text: #1f2937;
    --text2: #6b4f46;
    --text3: #9b7265;
    --primary: #ff6b6b;
    --primary-hover: #ef4444;
    --primary-light: rgba(255,107,107,0.16);
    --shadow: 0 10px 24px rgba(255,107,107,0.12);
}

body.theme-neon-tech {
    --bg: #05070d;
    --bg2: #0b1120;
    --bg3: #121a30;
    --bg4: #18213b;
    --border: #223052;
    --border2: #2e3e66;
    --text: #ecf8ff;
    --text2: #9cc5de;
    --text3: #6e90ad;
    --primary: #00e5ff;
    --primary-hover: #00b8d4;
    --primary-light: rgba(0,229,255,0.18);
    --shadow: 0 0 24px rgba(0,229,255,0.18);
}

body.theme-sandstone-minimal {
    --bg: #f7f1e8;
    --bg2: #fffaf2;
    --bg3: #f3ebdf;
    --bg4: #ebe1d2;
    --border: #ddcfba;
    --border2: #cdbca3;
    --text: #2f2a23;
    --text2: #6a5f51;
    --text3: #968878;
    --primary: #8b7355;
    --primary-hover: #735f46;
    --primary-light: rgba(139,115,85,0.14);
    --shadow: 0 0 0 rgba(0,0,0,0);
}

body.theme-glass-frosted {
    --bg: #0b1020;
    --bg2: rgba(22, 28, 46, 0.58);
    --bg3: rgba(30, 39, 64, 0.50);
    --bg4: rgba(42, 54, 84, 0.50);
    --border: rgba(173, 194, 255, 0.20);
    --border2: rgba(173, 194, 255, 0.35);
    --text: #ebf2ff;
    --text2: #a8b9dd;
    --text3: #7e90b8;
    --primary: #60a5fa;
    --primary-hover: #3b82f6;
    --primary-light: rgba(96,165,250,0.20);
    --shadow: 0 10px 30px rgba(2,6,23,0.35);
}

body.theme-charcoal {
    --bg: #0f0f0f;
    --bg2: #191919;
    --bg3: #222222;
    --bg4: #2b2b2b;
    --border: #2e2e2e;
    --border2: #3d3d3d;
    --text: #e3e3e3;
    --text2: #9a9a9a;
    --text3: #5c5c5c;
    --primary: #7a7a7a;
    --primary-hover: #919191;
    --primary-light: rgba(160,160,160,0.12);
    --shadow: 0 4px 28px rgba(0,0,0,0.5);
}

html, body {
    min-height: 100%;
    height: auto;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    transition: background var(--transition), color var(--transition);
}

.hidden {
    display: none !important;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 99px;
}

@supports (-webkit-touch-callout: none) {
    html, body {
        min-height: -webkit-fill-available;
    }
}