:root {
    --accent: #7c6cff;
    --accent-2: #5b8cff;
    --accent-grad: linear-gradient(135deg, #7c6cff, #5b8cff);
    --danger: #ff5c6c;
    --star: #f5c451;
    --on-accent: #fff;
    --accent-shadow: rgba(124, 108, 255, .35);
    --focus-ring: rgba(124, 108, 255, .30);
    --overlay: rgba(0, 0, 0, .55);
    --accent-soft: rgba(124, 108, 255, .16);
    --row-selected: rgba(124, 108, 255, .12);
    --danger-soft: rgba(255, 92, 108, .14);
    --danger-soft-2: rgba(255, 92, 108, .22);
    --danger-soft-badge: rgba(255, 92, 108, .16);
    --danger-border: rgba(255, 92, 108, .32);
    --info-soft: rgba(91, 140, 255, .14);
    --info-border: rgba(91, 140, 255, .35);
    --queued-soft: rgba(245, 196, 81, .14);
    --queued-border: rgba(245, 196, 81, .32);
    --success-soft: rgba(70, 211, 154, .14);
    --success-border: rgba(70, 211, 154, .32);
    --teal-soft: rgba(45, 212, 191, .16);
    --chip-index-bg: rgba(91, 140, 255, .16);
    --chip-download-bg: rgba(124, 108, 255, .16);
    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji";
    --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --fs-xs: 0.72rem;
    --fs-sm: 0.82rem;
    --fs-md: 0.92rem;
    --fs-lg: 1.05rem;
    --fs-xl: 1.35rem;
    --fs-2xl: 1.9rem;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
}

:root, :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0e0f13;
    --bg-grad: radial-gradient(1200px 600px at 80% -10%, rgba(124, 108, 255, .12), transparent 60%), var(--bg);
    --surface: #16181f;
    --surface-2: #1d2029;
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .16);
    --text: #e7e9ef;
    --text-muted: #939aab;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --app-bar-bg: rgba(14, 15, 19, .8);
    --row-hover: rgba(255, 255, 255, .025);
    --accent-soft-text: #fff;
    --success: #46d39a;
    --teal: #2dd4bf;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f6f7f9;
    --bg-grad: radial-gradient(1200px 600px at 80% -10%, rgba(124, 108, 255, .10), transparent 60%), var(--bg);
    --surface: #ffffff;
    --surface-2: #eef0f4;
    --border: rgba(17, 20, 28, .18);
    --border-strong: rgba(17, 20, 28, .32);
    --text: #1a1d24;
    --text-muted: #5b6472;
    --shadow: 0 10px 30px rgba(20, 24, 40, .12);
    --app-bar-bg: rgba(246, 247, 249, .8);
    --row-hover: rgba(17, 20, 28, .035);
    --accent-soft-text: #5a49e0;
    --success: #0f9b6c;
    --teal: #0d9488;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-grad);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -.01em;
}

a {
    color: inherit;
    text-decoration: none;
}

h1:focus {
    outline: none;
}