/* Reset & base */

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

[hidden] {
    display : none !important;
}

:root {
    --bg              : #0f0f11;
    --bg-2            : #18181c;
    --bg-3            : #222228;
    --border          : #2e2e36;
    --text            : #e8e8f0;
    --text-muted      : #7a7a8c;
    --accent          : #7c6cfa;
    --accent-hover    : #9a8dfb;
    --info            : #4a8fd4;
    --success         : #4a9a6a;
    --warn            : #e09428;
    --danger          : #e05c6a;
    --radius          : 10px;
    --radius-sm       : 6px;
    --font            : system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono       : 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    --font-code       : 'Consolas', monospace;
    
    /* Layout widths */
    --container-sm    : 600px;
    --container-md    : 760px;
    --container-lg    : 960px;
    --app-width       : var(--container-lg);
    --container-width : var(--container-lg);
    
    /* Grid */
    --grid-gap        : 1rem;
    
    /* Form control sizes */
    --ctrl-size       : 1rem;
    --ctrl-size-sm    : calc(var(--ctrl-size) * .875);
    --ctrl-size-xs    : calc(var(--ctrl-size) * .75);
    --ctrl-size-lg    : calc(var(--ctrl-size) * 1.25);
}

/* Rounded presets */

[data-rounded="full"] {
    --radius    : 1rem;
    --radius-sm : 999px;
}

[data-rounded="none"] {
    --radius    : 0;
    --radius-sm : 0;
}

/* Themes */

[data-theme="soft"] {
    --bg           : #16181c;
    --bg-2         : #1e2228;
    --bg-3         : #262c36;
    --border       : #323848;
    --text         : #c8d0dc;
    --text-muted   : #68788c;
    --accent       : #7a7ada;
    --accent-hover : #9090ee;
    --info         : #4a8fd4;
    color-scheme   : dark;
}

[data-theme="light"] {
    --bg           : #f0f2f5;
    --bg-2         : #ffffff;
    --bg-3         : #e8eaee;
    --border       : #d0d4dc;
    --text         : #1a1e28;
    --text-muted   : #687090;
    --accent       : #5a4ada;
    --accent-hover : #7060e8;
    --info         : #1a5fa8;
    --danger       : #d03030;
    --warn         : #cc7200;
    color-scheme   : light;
}

[data-theme="rose"] {
    --bg           : #f5e8ee;
    --bg-2         : #fdf4f8;
    --bg-3         : #ead4e0;
    --border       : #d4a8c0;
    --text         : #2c1420;
    --text-muted   : #886878;
    --accent       : #8a2c58;
    --accent-hover : #a83870;
    --info         : #1a5fa8;
    --danger       : #a81818;
    --warn         : #c06800;
    color-scheme   : light;
}

[data-theme="forest"] {
    --bg           : #deeae2;
    --bg-2         : #edf6f0;
    --bg-3         : #ccdad2;
    --border       : #90bc9c;
    --text         : #122018;
    --text-muted   : #5e8868;
    --accent       : #1c5e38;
    --accent-hover : #286848;
    --info         : #1a5fa8;
    --danger       : #b01818;
    --warn         : #be7000;
    color-scheme   : light;
}

[data-theme="ocean"] {
    --bg           : #dce8f2;
    --bg-2         : #ebf3fb;
    --bg-3         : #cad8e8;
    --border       : #8cb4d0;
    --text         : #101c2c;
    --text-muted   : #5c7a90;
    --accent       : #1a4e78;
    --accent-hover : #285880;
    --info         : #2878c0;
    --danger       : #b02020;
    --warn         : #c07800;
    color-scheme   : light;
}

[data-theme="wood"] {
    --bg           : #f2e8d8;
    --bg-2         : #faf3e8;
    --bg-3         : #e8d8c4;
    --border       : #c8aa80;
    --text         : #2e1e0e;
    --text-muted   : #98784a;
    --accent       : #7a5a20;
    --accent-hover : #9a7838;
    --info         : #1a5fa8;
    --danger       : #a82818;
    --warn         : #be7000;
    color-scheme   : light;
}

[data-theme="lavendel"] {
    --bg           : #f3eeff;
    --bg-2         : #ffffff;
    --bg-3         : #e8dcff;
    --border       : #c4b0e8;
    --text         : #28104e;
    --text-muted   : #8868a8;
    --accent       : #7c3cd0;
    --accent-hover : #9450e8;
    --info         : #1a5fa8;
    --danger       : #c01010;
    --warn         : #c07400;
    color-scheme   : light;
}

html {
    font-size    : 15px;
    color-scheme : dark;
}

body {
    font-family : var(--font);
    background  : var(--bg);
    color       : var(--text);
    line-height : 1.6;
    min-height  : 100dvh;
    padding     : 2rem;
}

#app {
    width     : var(--app-width);
    margin    : 0 auto;
    max-width : 100%;
}

.container {
    width     : var(--container-width);
    margin    : 0 auto;
    max-width : 100%;
}

.full-width {
    width : 100%;
}

.container-sm {
    width     : var(--container-sm);
    max-width : 100%;
}

.container-md {
    width     : var(--container-md);
    max-width : 100%;
}

.container-lg {
    width     : var(--container-lg);
    max-width : 100%;
}

/* Typography */

h1, h2, h3, h4, h5, h6 {
    display : block;
    margin  : 0.05rem 0;
    padding : 0.05rem 0;
}

h1, h2, h3 {
    font-weight    : 600;
    letter-spacing : -.02em;
    line-height    : 1.25;
}

h1 {
    font-size : 1.8rem;
}

h2 {
    font-size : 1.3rem;
}

h3 {
    font-size : 1.05rem;
}

h4 {
    font-size   : .95rem;
    font-weight : 600;
}

h5 {
    font-size   : .875rem;
    font-weight : 500;
    color       : var(--text-muted);
}

h6 {
    font-size   : .8rem;
    font-weight : 500;
    color       : var(--text-muted);
}

p {
    color : var(--text-muted);
}

blockquote {
    border-left : 3px solid var(--border);
    padding     : .2rem 0 .2rem 1rem;
    color       : var(--text-muted);
    font-style  : italic;
}

cite {
    font-style : italic;
    color      : var(--text-muted);
}

address {
    font-style  : normal;
    color       : var(--text-muted);
    line-height : 1.7;
}

ul, ol {
    padding-left : 1.5rem;
    color        : var(--text-muted);
}

ul li, ol li {
    margin-bottom : .2rem;
}

ul ul, ol ol, ul ol, ol ul {
    margin-top : .2rem;
}

a:not(.btn) {
    color           : var(--accent);
    text-decoration : none;
}

a:not(.btn):hover {
    color : var(--accent-hover);
}

code, pre {
    font-family : var(--font-code);
    font-size   : .9em;
}

code {
    background    : var(--bg-3);
    border        : 1px solid var(--border);
    border-radius : var(--radius-sm);
    padding       : .1em .35em;
}

pre {
    background    : var(--bg-3);
    border        : 1px solid var(--border);
    border-radius : var(--radius);
    padding       : 1rem 1.25rem;
    overflow-x    : auto;
    line-height   : 1.6;
}

pre code {
    background : none;
    border     : none;
    padding    : 0;
}

/* Forms */

input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select, .input {
    width         : 100%;
    padding       : .55em .75em;
    background    : var(--bg-3);
    border        : 1px solid var(--border);
    border-radius : var(--radius-sm);
    color         : var(--text);
    font          : inherit;
    font-size     : var(--ctrl-size);
    line-height   : 1.5;
    outline       : none;
    transition    : border-color .15s;
}

input::placeholder, textarea::placeholder {
    color : var(--text-muted);
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:focus, select:focus, .input:focus {
    border-color : var(--accent);
}

input.input-sm:not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea.input-sm, select.input-sm, .input.input-sm {
    font-size : var(--ctrl-size-sm);
}

input.input-xs:not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea.input-xs, select.input-xs, .input.input-xs {
    font-size : var(--ctrl-size-xs);
}

input.input-lg:not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea.input-lg, select.input-lg, .input.input-lg {
    font-size : var(--ctrl-size-lg);
}

input[type="checkbox"],
input[type="radio"] {
    width  : auto;
    margin : 0;
}

label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    cursor : pointer;
}

/* Buttons */

button, .btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : .4rem;
    padding         : .55em 1.1em;
    background      : var(--btn-bg, var(--accent));
    color           : var(--btn-color, #ffffff);
    border          : 1px solid transparent;
    border-radius   : var(--radius-sm);
    font            : inherit;
    font-size       : var(--ctrl-size);
    font-weight     : 500;
    line-height     : 1.5;
    cursor          : pointer;
    white-space     : nowrap;
    text-decoration : none;
    transition      : background .15s, opacity .15s, border-color .15s, color .15s, transform .05s;
}

button:hover, .btn:hover {
    background : var(--btn-bg-hover, var(--accent-hover));
}

button:active, .btn:active {
    opacity   : .8;
    transform : scale(.98);
}

button.btn-secondary, .btn.btn-secondary {
    --btn-color  : var(--text);
    background   : var(--bg-3);
    color        : var(--text);
    border-color : var(--border);
}

button.btn-secondary:hover, .btn.btn-secondary:hover {
    background : var(--border);
}

button.btn-ghost, .btn.btn-ghost {
    --btn-color  : var(--text-muted);
    background   : transparent;
    color        : var(--text-muted);
    border-color : transparent;
}

button.btn-ghost:hover, .btn.btn-ghost:hover {
    background : var(--bg-3);
    color      : var(--text);
}

/* Semantic color modifiers — solid filled style; set --btn-color for .btn-outline */
button.btn-danger, .btn.btn-danger,
button.btn-success, .btn.btn-success,
button.btn-warning, .btn.btn-warning,
button.btn-info, .btn.btn-info {
    background   : var(--btn-color);
    color        : #ffffff;
    border-color : var(--btn-color);
}

button.btn-danger:hover, .btn.btn-danger:hover,
button.btn-success:hover, .btn.btn-success:hover,
button.btn-warning:hover, .btn.btn-warning:hover,
button.btn-info:hover, .btn.btn-info:hover {
    background   : color-mix(in srgb, var(--btn-color) 85%, black);
    border-color : color-mix(in srgb, var(--btn-color) 85%, black);
}

.btn-danger {
    --btn-color : var(--danger);
}

.btn-success {
    --btn-color : var(--success);
}

.btn-warning {
    --btn-color : var(--warn);
}

.btn-info {
    --btn-color : var(--info);
}

/* Outline modifier — reads --btn-color from color class */
button.btn-outline, .btn.btn-outline {
    background   : transparent;
    color        : var(--btn-color, var(--accent));
    border-color : var(--btn-color, var(--accent));
}

button.btn-outline:hover, .btn.btn-outline:hover {
    background : var(--btn-color, var(--accent));
    color      : #ffffff;
}

/* Ghost + outline: border hidden at rest, appears on hover without fill */
button.btn-ghost.btn-outline, .btn.btn-ghost.btn-outline {
    color        : var(--text-muted);
    border-color : transparent;
}

button.btn-ghost.btn-outline:hover, .btn.btn-ghost.btn-outline:hover {
    background   : transparent;
    color        : var(--btn-color, var(--text-muted));
    border-color : var(--btn-color, var(--text-muted));
}

button.btn-sm, .btn.btn-sm {
    font-size : var(--ctrl-size-sm);
}

button.btn-xs, .btn.btn-xs {
    font-size : var(--ctrl-size-xs);
}

button.btn-lg, .btn.btn-lg {
    font-size : var(--ctrl-size-lg);
}

/* Button group */

.btn-group {
    display     : inline-flex;
    align-items : stretch;
}

.btn-group > button,
.btn-group > .btn {
    border-radius : 0;
}

.btn-group > button:first-child,
.btn-group > .btn:first-child {
    border-radius : var(--radius-sm) 0 0 var(--radius-sm);
}

.btn-group > button:last-child,
.btn-group > .btn:last-child {
    border-radius : 0 var(--radius-sm) var(--radius-sm) 0;
}

.btn-group > button + button,
.btn-group > .btn + button,
.btn-group > button + .btn,
.btn-group > .btn + .btn {
    margin-left : -1px;
}

.btn-group > button:hover,
.btn-group > .btn:hover,
.btn-group > button:focus,
.btn-group > .btn:focus {
    position : relative;
    z-index  : 1;
}

/* Radio group */

.radio-group {
    display : inline-flex;
}

.radio-group input[type="radio"] {
    display : none;
}

.radio-group label {
    display            : inline-flex;
    align-items        : center;
    justify-content    : center;
    padding            : .55em 1.1em;
    background         : var(--bg-3);
    color              : var(--text-muted);
    border             : 1px solid var(--border);
    border-right-width : 0;
    font               : inherit;
    font-size          : var(--ctrl-size);
    font-weight        : 500;
    line-height        : 1.5;
    cursor             : pointer;
    white-space        : nowrap;
    user-select        : none;
    transition         : background .15s, color .15s, border-color .15s, transform .05s;
}

.radio-group label:first-of-type {
    border-radius : var(--radius-sm) 0 0 var(--radius-sm);
}

.radio-group label:last-of-type {
    border-right-width : 1px;
    border-radius      : 0 var(--radius-sm) var(--radius-sm) 0;
}

.radio-group input[type="radio"]:checked + label {
    background   : var(--accent);
    color        : #ffffff;
    border-color : var(--accent);
}

.radio-group label:hover {
    background : var(--border);
    color      : var(--text);
}

.radio-group input[type="radio"]:checked + label:hover {
    background : var(--accent);
    color      : #ffffff;
}

.radio-group label:active {
    transform : scale(.98);
}

.radio-group.btn-sm label {
    font-size : var(--ctrl-size-sm);
}

/* Card */

.card {
    background    : var(--bg-2);
    border        : 1px solid var(--border);
    border-radius : var(--radius);
    padding       : 1.5rem;
}

/* Utility */

.hidden {
    display : none !important;
}

.off, [disabled], .disabled, *:disabled {
    opacity        : 0.35;
    cursor         : not-allowed !important;
    pointer-events : none !important;
    user-select    : none !important;
    touch-action   : none !important;
}

/* Passive element */
.passive {
    cursor         : default !important;
    pointer-events : none !important;
    user-select    : none !important;
    touch-action   : none !important;
}

/* Floating */
.float-left {
    float : left;
}

.float-right {
    float : right;
}

.clearfix {
    display : block;
    float   : none;
    clear   : both;
    content : "";
}

.text-muted {
    color : var(--text-muted);
}

.text-danger {
    color : var(--danger);
}

.text-success {
    color : var(--success);
}

.text-warning {
    color : var(--warn);
}

.text-info {
    color : var(--info);
}

.bg-danger {
    background : var(--danger);
}

.bg-success {
    background : var(--success);
}

.bg-warning {
    background : var(--warn);
}

.bg-info {
    background : var(--info);
}

.text-sm {
    font-size : .875rem;
}

.text-xs {
    font-size : 0.75rem;
}

.flex {
    display : flex;
}

.flex-col {
    flex-direction : column;
}

.gap-1 {
    gap : .5rem;
}

.gap-2 {
    gap : 1rem;
}

.items-center {
    align-items : center;
}

.justify-between {
    justify-content : space-between;
}

/* Layout, Grid */

.grid {
    display : grid;
    gap     : var(--grid-gap);
}

.row {
    display               : grid;
    grid-template-columns : repeat(12, 1fr);
    gap                   : var(--grid-gap);
}

.col-1 {
    grid-column : span 1;
}

.col-2 {
    grid-column : span 2;
}

.col-3 {
    grid-column : span 3;
}

.col-4 {
    grid-column : span 4;
}

.col-5 {
    grid-column : span 5;
}

.col-6 {
    grid-column : span 6;
}

.col-7 {
    grid-column : span 7;
}

.col-8 {
    grid-column : span 8;
}

.col-9 {
    grid-column : span 9;
}

.col-10 {
    grid-column : span 10;
}

.col-11 {
    grid-column : span 11;
}

.col-12 {
    grid-column : span 12;
}

.row.evenly {
    grid-template-columns : repeat(auto-fit, minmax(0, 1fr));
}

.align-items-center {
    align-items : center;
}

/* Alert */

.alert {
    display       : flex;
    align-items   : center;
    gap           : .6rem;
    padding       : .55rem 1rem;
    border-radius : var(--radius-sm);
    border        : 1px solid transparent;
    font-size     : .85rem;
    line-height   : 1.4;
}

.alert.info {
    background   : color-mix(in srgb, var(--info) 12%, transparent);
    border-color : color-mix(in srgb, var(--info) 25%, transparent);
    color        : var(--info);
}

.alert.success {
    background   : color-mix(in srgb, var(--success) 12%, transparent);
    border-color : color-mix(in srgb, var(--success) 25%, transparent);
    color        : var(--success);
}

.alert.warning {
    background   : color-mix(in srgb, var(--warn) 12%, transparent);
    border-color : color-mix(in srgb, var(--warn) 25%, transparent);
    color        : var(--warn);
}

.alert.danger,
.alert.error {
    background   : color-mix(in srgb, var(--danger) 12%, transparent);
    border-color : color-mix(in srgb, var(--danger) 25%, transparent);
    color        : var(--danger);
}

/* ── Modal ──────────────────────────────────────────────────────────── */
dialog.modal {
    width         : min(90vw, 460px);
    margin        : auto;
    background    : var(--bg-2);
    border        : 1px solid var(--border);
    border-radius : var(--radius);
    padding       : 1.5rem;
}

dialog.modal[open] {
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
}

dialog.modal.modal-sm {
    width : min(90vw, 340px);
}

dialog.modal.modal-md {
    width : min(90vw, 460px);
}

dialog.modal.modal-lg {
    width : min(90vw, 640px);
}

dialog.modal.modal-xl {
    width : min(90vw, 860px);
}

dialog.modal.modal-fullscreen {
    width      : calc(100vw - 3rem);
    max-height : calc(100vh - 3rem);
}

dialog.modal::backdrop {
    background      : rgba(0, 0, 0, .55);
    backdrop-filter : blur(4px);
}

.modal-header {
    margin-bottom  : .25rem;
    padding-bottom : 1rem;
    border-bottom  : 1px solid var(--border);
}

.modal-footer {
    margin-top  : .25rem;
    padding-top : 1rem;
    border-top  : 1px solid var(--border);
}

.modal-close {
    font-size   : 1.1rem;
    line-height : 1;
    padding     : .1rem .4rem;
}