/* Reset & base */

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

:root {
    --bg                     : #0f0f11;
    --bg-2                   : light-dark(color-mix(in srgb, white 40%, var(--bg)), color-mix(in srgb, white 5%, var(--bg)));
    --bg-3                   : light-dark(color-mix(in srgb, black 5%, var(--bg)), color-mix(in srgb, white 12%, var(--bg)));
    --border                 : light-dark(
        color-mix(in srgb, var(--accent) 20%, color-mix(in srgb, black 12%, var(--bg))),
        color-mix(in srgb, var(--accent) 8%, color-mix(in srgb, white 10%, var(--bg)))
    );
    --text                   : light-dark(
        color-mix(in srgb, var(--accent) 15%, #0d0d0f),
        color-mix(in srgb, var(--accent) 7%, #f0f0f2)
    );
    --text-subtle            : color-mix(in srgb, var(--text) 15%, var(--bg));
    --text-dim               : color-mix(in srgb, var(--text) 35%, var(--bg));
    --text-muted             : color-mix(in srgb, var(--accent) 38%, #888);
    --accent                 : #7c6cfa;
    --accent-contrast        : oklch(from var(--accent) calc((0.71 - l) * infinity) 0.015 h);
    --accent-contrast-dim    : color-mix(in srgb, var(--accent-contrast) 40%, var(--accent));
    --accent-contrast-subtle : color-mix(in srgb, var(--accent-contrast) 15%, var(--accent));
    --accent-light           : color-mix(in srgb, var(--accent) 80%, white);
    --accent-dim             : color-mix(in srgb, var(--accent) 15%, var(--bg));
    --accent-subtle          : color-mix(in srgb, var(--accent) 7%, var(--bg));
    --info                   : light-dark(color-mix(in srgb, var(--accent) 12%, #1a5fa8), color-mix(in srgb, var(--accent) 12%, #4a8fd4));
    --success                : light-dark(color-mix(in srgb, var(--accent) 12%, #2a7848), color-mix(in srgb, var(--accent) 12%, #4a9a6a));
    --success                : light-dark(color-mix(in srgb, var(--accent) 12%, #0abf53), color-mix(in srgb, var(--accent) 12%, #0abf53));
    --warn                   : light-dark(color-mix(in srgb, var(--accent) 12%, #ff8040), color-mix(in srgb, var(--accent) 12%, #ff8040));
    --danger                 : light-dark(color-mix(in srgb, var(--accent) 12%, #ff4c4c), color-mix(in srgb, var(--accent) 12%, #ff4c4c));
    --error                  : light-dark(color-mix(in srgb, var(--accent) 12%, #a01020), color-mix(in srgb, var(--accent) 12%, #d42030));
    --radius                 : 10px;
    --radius-sm              : 6px;
    --rem-px                 : 16; /* unitless base, canonical source for rem/Font-calculations in calc() */
    --font-size-base         : calc(var(--rem-px) * 1px);
    --font                   : system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono              : 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    
    --color-amber            : #ffbf00;
    --color-apricot          : #ffcc77;
    
    /* Layout widths */
    --container-sm           : 600px;
    --container-md           : 760px;
    --container-lg           : 960px;
    --app-width              : var(--container-lg);
    --container-width        : var(--container-lg);
    
    /* Breakpoints (for reference; use in @media manually) */
    --breakpoint-sm          : 576px;
    --breakpoint-md          : 768px;
    --breakpoint-lg          : 960px;
    --breakpoint-xl          : 1200px;
    
    /* Grid / Flex */
    --grid-gap               : 1rem;
    --stack-gap              : var(--grid-gap);
    
    /* Form control sizes */
    --ctrl-size              : 1rem;
    --ctrl-size-xxs          : calc(var(--ctrl-size) * .625);
    --ctrl-size-xs           : calc(var(--ctrl-size) * .75);
    --ctrl-size-md           : var(--ctrl-size);
    --ctrl-size-sm           : calc(var(--ctrl-size) * .875);
    --ctrl-size-lg           : calc(var(--ctrl-size) * 1.25);
    --ctrl-size-xl           : calc(var(--ctrl-size) * 1.5);
    
    /* Form control padding */
    --ctrl-padding-y         : .35em;
    --btn-padding-x          : 1em;
    --input-padding-x        : .75em;
    
    --checker-size           : 16px;
}

/* 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;
    --accent     : #7a7ada;
    color-scheme : dark;
}

[data-theme="light"] {
    --bg         : #f0f2f5;
    --bg-2       : #ffffff;
    --bg-3       : #e8eaee;
    --border     : #d0d4dc;
    --accent     : #5a4ada;
    color-scheme : light;
}

[data-theme="sand"] {
    --bg         : #f2f0ea;
    --bg-2       : #faf8f3;
    --bg-3       : #e8e4da;
    --border     : #ccc6b8;
    --accent     : #5a4ada;
    color-scheme : light;
}

[data-theme="rose"] {
    --bg         : #f5e8ee;
    --bg-2       : #fdf4f8;
    --bg-3       : #ead4e0;
    --border     : #d4a8c0;
    --accent     : #8a2c58;
    color-scheme : light;
}

[data-theme="forest"] {
    --bg         : #deeae2;
    --bg-2       : #edf6f0;
    --bg-3       : #ccdad2;
    --border     : #90bc9c;
    --accent     : #1c5e38;
    color-scheme : light;
}

[data-theme="ocean"] {
    --bg         : #dce8f2;
    --bg-2       : #ebf3fb;
    --bg-3       : #cad8e8;
    --border     : #8cb4d0;
    --accent     : #1a4e78;
    color-scheme : light;
}

[data-theme="wood"] {
    --bg         : #f2e8d8;
    --bg-2       : #faf3e8;
    --bg-3       : #e8d8c4;
    --border     : #c8aa80;
    --accent     : #7a5a20;
    color-scheme : light;
}

[data-theme="lavendel"] {
    --bg         : #f3eeff;
    --bg-2       : #ffffff;
    --bg-3       : #e8dcff;
    --border     : #c4b0e8;
    --accent     : #7c3cd0;
    color-scheme : light;
}

html {
    font-size    : var(--font-size-base);
    color-scheme : dark;
}

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

#app, .app-container {
    width     : var(--app-width);
    margin    : 0 auto;
    max-width : 100%;
    padding   : 2.5rem 1rem;
}

.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 : 2.29rem; /* 0.75 × 1.25⁵ */
}

h2 {
    font-size : 1.83rem; /* 0.75 × 1.25⁴ */
}

h3 {
    font-size : 1.46rem; /* 0.75 × 1.25³ */
}

h4 {
    font-size   : 1.17rem; /* 0.75 × 1.25² */
    font-weight : 600;
}

h5 {
    font-size   : .94rem; /* 0.75 × 1.25¹ */
    font-weight : 500;
    color       : var(--text-muted);
}

h6 {
    font-size   : .75rem; /* base */
    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 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-light);
}

.mono, .monospace, .monospaced,
.text-monospace, .text-monospaced,
code, samp, var, pre {
    font-family            : var(--font-mono);
    font-size              : .9em;
    font-variant-ligatures : none;
}

var {
    font-style : italic;
}

code, samp {
    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       : 0.64rem 0.72rem;
    overflow-x    : auto;
    line-height   : 1.6;
}

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

/* Forms */

:where(input:is([type="text"], [type="email"], [type="password"], [type="number"], [type="search"], [type="tel"], [type="url"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"]), textarea, select, .input) {
    width         : 100%;
    padding       : var(--ctrl-padding-y) var(--input-padding-x);
    background    : var(--bg-2);
    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[type="checkbox"],
input[type="radio"] {
    width  : auto;
    margin : 0;
}

input[type="color"] {
    appearance    : none;
    width         : 2.5rem;
    height        : 2.5rem;
    padding       : .2rem;
    background    : var(--bg-2);
    border        : 1px solid var(--border);
    border-radius : var(--radius-sm);
    cursor        : pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding : 0;
}

input[type="color"]::-webkit-color-swatch {
    border        : none;
    border-radius : calc(var(--radius-sm) - .15rem);
}

input[type="color"]::-moz-color-swatch {
    border        : none;
    border-radius : calc(var(--radius-sm) - .15rem);
}

input[type="file"] {
    font-size : var(--ctrl-size);
    color     : var(--text);
    cursor    : pointer;
}

input[type="file"]::file-selector-button {
    display       : inline-flex;
    align-items   : center;
    padding       : var(--ctrl-padding-y) var(--btn-padding-x);
    margin-right  : .75rem;
    background    : var(--bg-3);
    color         : var(--text);
    border        : 1px solid var(--border);
    border-radius : var(--radius-sm);
    font          : inherit;
    font-size     : var(--ctrl-size);
    font-weight   : 500;
    cursor        : pointer;
    transition    : background .15s, border-color .15s;
}

input[type="file"]::file-selector-button:hover {
    background : var(--border);
}

input::placeholder, textarea::placeholder {
    color : color-mix(in srgb, currentColor 35%, transparent);
}

:where(input:is([type="text"], [type="email"], [type="password"], [type="number"], [type="search"], [type="tel"], [type="url"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"]), textarea, select, .input):focus {
    border-color : color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow   : 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

input.input-sm, textarea.input-sm, select.input-sm, .input.input-sm {
    font-size : var(--ctrl-size-sm);
}

input.input-xs, textarea.input-xs, select.input-xs, .input.input-xs {
    font-size : var(--ctrl-size-xs);
}

input.input-xxs, textarea.input-xxs, select.input-xxs, .input.input-xxs {
    font-size : var(--ctrl-size-xxs);
}

input.input-lg, textarea.input-lg, select.input-lg, .input.input-lg {
    font-size : var(--ctrl-size-lg);
}

/* Explicit alias for the unsuffixed default size - see .btn-md */
input.input-md, textarea.input-md, select.input-md, .input.input-md {
    font-size : var(--ctrl-size);
}

input.input-xl, textarea.input-xl, select.input-xl, .input.input-xl {
    font-size : var(--ctrl-size-xl);
}

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

/* Buttons */

button, input[type="submit"], input[type="button"], input[type="reset"], .btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : .4rem;
    padding         : var(--ctrl-padding-y) var(--btn-padding-x);
    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;
    user-select     : none;
}

button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, .btn:hover {
    background : var(--btn-bg-hover, var(--accent-light));
}

button:active, input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active, .btn:active {
    opacity   : .8;
    transform : scale(.92);
}

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);
    border-color : 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);
    border-color : transparent;
}

button.btn-link, .btn.btn-link {
    background            : transparent;
    border-color          : transparent;
    color                 : var(--accent);
    text-decoration       : underline;
    text-underline-offset : 2px;
}

button.btn-link:hover, .btn.btn-link:hover,
button.btn-link:active, .btn.btn-link:active {
    background   : transparent;
    border-color : transparent;
    opacity      : 1;
    transform    : none;
}

/* Semantic color modifiers - solid filled style; set --btn-color for .btn-outline */
button.btn-danger, .btn.btn-danger,
button.btn-error, .btn.btn-error,
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:hover, .btn:hover, .btn-primary:hover, .btn-accent:hover,
button.btn-danger:hover, .btn.btn-danger:hover,
button.btn-error:hover, .btn.btn-error: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, var(--accent)) 85%, black);
    border-color : color-mix(in srgb, var(--btn-color, var(--accent)) 85%, black);
}

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

.btn-error {
    --btn-color : var(--error);
    font-weight : 700;
}

.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;
}

/* Subtle modifier - soft tinted background, reads --btn-color from color class (like .badge.subtle) */
button.btn-subtle, .btn.btn-subtle {
    background   : color-mix(in srgb, var(--btn-color, var(--accent)) 15%, var(--bg));
    color        : var(--btn-color, var(--accent));
    border-color : transparent;
}

button.btn-subtle:hover, .btn.btn-subtle:hover {
    background   : color-mix(in srgb, var(--btn-color, var(--accent)) 25%, var(--bg));
    border-color : transparent;
}

/* Secondary + outline: hover fills with bg-3 instead of text color */
button.btn-secondary.btn-outline:hover, .btn.btn-secondary.btn-outline:hover {
    background : var(--bg-3);
    color      : var(--text);
}

/* 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));
}

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

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

.btn-xxs {
    --ctrl-size : var(--ctrl-size-xxs);
}

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

/* Explicit alias for the unsuffixed default size - lets a size be picked
   programmatically (xxs/xs/sm/md/lg/xl) without special-casing "no suffix" */
.btn-md {
    --ctrl-size : var(--ctrl-size);
}

.btn-xl {
    --ctrl-size : var(--ctrl-size-xl);
}

/* 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:only-child,
.btn-group > .btn:only-child {
    border-radius : var(--radius-sm);
}

.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            : var(--ctrl-padding-y) var(--btn-padding-x);
    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,
.radio-group label:has(input[type="radio"]:checked) {
    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,
.radio-group label:has(input[type="radio"]:checked):hover {
    background : var(--accent);
    color      : #ffffff;
}

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

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

/* Card */

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

.card.ghost {
    background   : transparent;
    border-color : transparent;
}

.card-flush {
    padding  : 0;
    overflow : hidden;
}

/* Table */

.table-wrap {
    width         : 100%;
    overflow-x    : auto;
    border        : 1px solid var(--border);
    border-radius : var(--radius);
}

table {
    width           : 100%;
    border-collapse : collapse;
    font-size       : var(--ctrl-size);
}

thead tr {
    background    : var(--bg-3);
    border-bottom : 2px solid var(--border);
}

th {
    padding        : .6em .75em;
    text-align     : left;
    font-weight    : 600;
    color          : var(--text-muted);
    font-size      : .8em;
    text-transform : uppercase;
    letter-spacing : .06em;
    white-space    : nowrap;
}

td {
    padding        : .6em .75em;
    border-bottom  : 1px solid var(--border);
    vertical-align : top;
}

tbody tr:last-child td {
    border-bottom : none;
}

tbody tr:hover {
    background : var(--bg-3);
}

table.table-striped tbody tr:nth-child(even) {
    background : var(--bg-3);
}

table.table-striped tbody tr:nth-child(even):hover {
    background : color-mix(in srgb, var(--bg-3) 70%, var(--border));
}

table.table-xxs {
    font-size : var(--ctrl-size-xxs);
}

table.table-xs {
    font-size : var(--ctrl-size-xs);
}

table.table-sm {
    font-size : var(--ctrl-size-sm);
}

table.table-lg {
    font-size : var(--ctrl-size-lg);
}

table.table-xl {
    font-size : var(--ctrl-size-xl);
}

/* Badge */

.badge {
    --badge-color : var(--accent);
    display       : inline-flex;
    align-items   : center;
    gap           : .25em;
    padding       : .2em .55em;
    border-radius : var(--radius-sm);
    border        : 1px solid transparent;
    font-size     : .75em;
    font-weight   : 600;
    line-height   : 1.4;
    white-space   : nowrap;
    background    : var(--badge-color);
    color         : #ffffff;
}

.badge.pill {
    border-radius : 999px;
}

.badge.subtle {
    background : color-mix(in srgb, var(--badge-color) 15%, var(--bg));
    color      : var(--badge-color);
}

.badge.outline {
    background   : transparent;
    border-color : var(--badge-color);
    color        : var(--badge-color);
}

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

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

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

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

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

.badge-error {
    --badge-color : var(--error);
}

.badge-xs {
    font-size : .6em;
}

.badge-sm {
    font-size : .7em;
}

.badge-lg {
    font-size : .9em;
}

/* Spinner */

@keyframes spin {
    to {
        transform : rotate(360deg);
    }
}

.spinner {
    font-size        : var(--ctrl-size);
    --spinner-color  : var(--accent);
    display          : inline-block;
    width            : 1.5em;
    height           : 1.5em;
    border           : .2em solid var(--border);
    border-top-color : var(--spinner-color);
    border-radius    : 50%;
    animation        : spin .7s linear infinite;
    flex-shrink      : 0;
}

.spinner-xxs {
    font-size : var(--ctrl-size-xxs);
}

.spinner-xs {
    font-size : var(--ctrl-size-xs);
}

.spinner-sm {
    font-size : var(--ctrl-size-sm);
}

/* Explicit alias for the unsuffixed default size - see .btn-md */
.spinner-md {
    font-size : var(--ctrl-size);
}

.spinner-lg {
    font-size : var(--ctrl-size-lg);
}

.spinner-xl {
    font-size : var(--ctrl-size-xl);
}

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

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

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

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

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

/* Switch */

input[type="checkbox"].switch {
    --switch-color : var(--accent);
    appearance     : none;
    width          : 2.2em;
    height         : 1.2em;
    background     : var(--border);
    border-radius  : 999px;
    border         : none;
    position       : relative;
    cursor         : pointer;
    transition     : background .2s;
    flex-shrink    : 0;
    font-size      : var(--ctrl-size);
}

input[type="checkbox"].switch::before {
    content       : '';
    position      : absolute;
    width         : .9em;
    height        : .9em;
    border-radius : 50%;
    background    : #ffffff;
    top           : 50%;
    left          : .15em;
    transform     : translateY(-50%);
    transition    : left .2s;
    box-shadow    : 0 1px 3px rgba(0, 0, 0, .25);
}

input[type="checkbox"].switch:checked {
    background : var(--switch-color);
}

input[type="checkbox"].switch:checked::before {
    left : calc(100% - .15em - .9em);
}

input[type="checkbox"].switch.switch-success {
    --switch-color : var(--success);
}

input[type="checkbox"].switch.switch-danger {
    --switch-color : var(--danger);
}

input[type="checkbox"].switch.switch-warning {
    --switch-color : var(--warn);
}

input[type="checkbox"].switch.switch-info {
    --switch-color : var(--info);
}

input[type="checkbox"].switch.switch-xxs {
    font-size : var(--ctrl-size-xxs);
}

input[type="checkbox"].switch.switch-xs {
    font-size : var(--ctrl-size-xs);
}

input[type="checkbox"].switch.switch-sm {
    font-size : var(--ctrl-size-sm);
}

input[type="checkbox"].switch.switch-lg {
    font-size : var(--ctrl-size-lg);
}

input[type="checkbox"].switch.switch-xl {
    font-size : var(--ctrl-size-xl);
}

/* Skeleton */

@keyframes shimmer {
    from {
        background-position : -200% 0;
    }
    to {
        background-position : 200% 0;
    }
}

.skeleton {
    background      : linear-gradient(90deg, var(--bg-3) 25%, color-mix(in srgb, var(--bg-3) 60%, var(--bg-2)) 50%, var(--bg-3) 75%);
    background-size : 200% 100%;
    animation       : shimmer 1.5s ease-in-out infinite;
    border-radius   : var(--radius-sm);
}

.skeleton-circle {
    border-radius : 50%;
}

/* Progress */

progress {
    --progress-color   : var(--accent);
    appearance         : none;
    -webkit-appearance : none;
    display            : block;
    width              : 100%;
    height             : .6rem;
    border             : none;
    border-radius      : 999px;
    overflow           : hidden;
    background         : var(--border);
}

progress::-webkit-progress-bar {
    background    : var(--border);
    border-radius : 999px;
}

progress::-webkit-progress-value {
    background    : var(--progress-color);
    border-radius : 999px;
}

progress::-moz-progress-bar {
    background    : var(--progress-color);
    border-radius : 999px;
}

.progress {
    --progress-color : var(--accent);
    width            : 100%;
    height           : .6rem;
    background       : var(--border);
    border-radius    : 999px;
    overflow         : hidden;
}

.progress-bar {
    height        : 100%;
    background    : var(--progress-color);
    border-radius : 999px;
    transition    : width .3s ease;
}

.progress-xs {
    height : .2rem;
}

.progress-sm {
    height : .4rem;
}

.progress-lg {
    height : 1rem;
}

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

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

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

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

.progress-error {
    --progress-color : var(--error);
}

/* Progress Ring (SVG circular progress)
 *
 * Markup:
 *   <svg class="progress-ring" viewBox="0 0 100 100">
 *     <circle class="progress-ring-track" cx="50" cy="50" r="40"/>
 *     <circle class="progress-ring-arc"   cx="50" cy="50" r="40"/>
 *     <text class="progress-ring-text" x="50" y="50"
 *           text-anchor="middle" dominant-baseline="middle">72%</text>  <!-- optional -->
 *   </svg>
 *
 * JS init (once per element):
 *   const arc = ring.querySelector('.progress-ring-arc');
 *   const C = 2 * Math.PI * 40;          // r = 40 (matches viewBox)
 *   arc.setAttribute('stroke-dasharray', C);
 *   arc.style.strokeDashoffset = C * (1 - value);  // value: 0..1
 */

.progress-ring {
    --progress-color       : var(--accent);
    --progress-ring-size   : 72px;
    --progress-ring-stroke : 6;
    --progress-ring-track  : var(--border);
    width                  : var(--progress-ring-size);
    height                 : var(--progress-ring-size);
    display                : block;
}

.progress-ring-track {
    fill         : none;
    stroke       : var(--progress-ring-track);
    stroke-width : var(--progress-ring-stroke);
}

.progress-ring-arc {
    fill             : none;
    stroke           : var(--progress-color);
    stroke-width     : var(--progress-ring-stroke);
    stroke-linecap   : round;
    transform        : rotate(-90deg);
    transform-origin : 50% 50%;
    transition       : stroke-dashoffset .3s ease;
}

.progress-ring-text {
    fill        : var(--text-muted);
    font-size   : 18px;
    font-family : var(--font);
}

.progress-ring-xxs {
    --progress-ring-size : 32px;
}

.progress-ring-xs {
    --progress-ring-size : 40px;
}

.progress-ring-sm {
    --progress-ring-size : 48px;
}

.progress-ring-lg {
    --progress-ring-size : 100px;
}

.progress-ring-xl {
    --progress-ring-size : 140px;
}

.progress-ring.progress-success {
    --progress-color : var(--success);
}

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

.progress-ring.progress-danger {
    --progress-color : var(--danger);
}

.progress-ring.progress-info {
    --progress-color : var(--info);
}

.progress-ring.progress-error {
    --progress-color : var(--error);
}

/* Meter */

meter {
    -webkit-appearance : none;
    display            : block;
    width              : 100%;
    height             : .6rem;
    border             : none;
    border-radius      : 999px;
    overflow           : hidden;
    background         : var(--border);
}

meter::-webkit-meter-bar {
    background    : var(--border);
    border-radius : 999px;
    border        : none;
    box-shadow    : none;
}

meter::-webkit-meter-optimum-value {
    background    : var(--success);
    border-radius : 999px;
    box-shadow    : none;
}

meter::-webkit-meter-suboptimum-value {
    background    : var(--warn);
    border-radius : 999px;
    box-shadow    : none;
}

meter::-webkit-meter-even-less-good-value {
    background    : var(--danger);
    border-radius : 999px;
    box-shadow    : none;
}

/* Range */

input[type="range"] {
    -webkit-appearance : none;
    appearance         : none;
    display            : block;
    width              : 100%;
    background         : transparent;
    cursor             : pointer;
    padding            : 0;
    margin             : 0;
}

/* Track */
input[type="range"]::-webkit-slider-runnable-track {
    height        : .6rem;
    background    : var(--border);
    border-radius : 999px;
    border        : none;
}

input[type="range"]::-moz-range-track {
    height        : .6rem;
    background    : var(--border);
    border-radius : 999px;
    border        : none;
}

/* Filled portion (Firefox only) */
input[type="range"]::-moz-range-progress {
    height        : .6rem;
    background    : var(--accent);
    border-radius : 999px;
}

/* Thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance : none;
    width              : 1.1rem;
    height             : 1.1rem;
    border-radius      : 50%;
    background         : var(--accent);
    border             : 2px solid var(--bg);
    box-shadow         : none;
    margin-top         : calc((.6rem - 1.1rem) / 2);
    transition         : box-shadow .15s;
}

input[type="range"]::-moz-range-thumb {
    width         : 1.1rem;
    height        : 1.1rem;
    border-radius : 50%;
    background    : var(--accent);
    border        : 2px solid var(--bg);
    box-shadow    : none;
    transition    : box-shadow .15s;
}

/* Hover / focus ring */
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow : 0 0 0 .3rem color-mix(in srgb, var(--accent) 25%, transparent);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow : 0 0 0 .3rem color-mix(in srgb, var(--accent) 25%, transparent);
}

@keyframes stripes {
    from {
        background-position : 0 0;
    }
    to {
        background-position : .707rem 0;
    }
}

.progress.striped .progress-bar {
    background-image : repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, .15) 0,
        rgba(255, 255, 255, .15) .25rem,
        transparent .25rem,
        transparent .5rem
    );
    background-size  : .707rem .707rem;
    animation        : stripes .6s linear infinite;
}

@keyframes progress-shimmer {
    from {
        transform : translateX(-100%);
    }
    to {
        transform : translateX(200%);
    }
}

.progress.shimmer .progress-bar {
    position : relative;
    overflow : hidden;
}

.progress.shimmer .progress-bar::after {
    content     : '';
    position    : absolute;
    inset-block : 0;
    left        : 0;
    width       : 50%;
    background  : linear-gradient(90deg, transparent, color-mix(in srgb, var(--progress-color) 40%, white), transparent);
    animation   : progress-shimmer 2s ease-in-out infinite;
}

/* Stepper */

.stepper {
    display       : inline-flex;
    align-items   : stretch;
    border        : 1px solid var(--border);
    border-radius : var(--radius);
    overflow      : hidden;
    background    : var(--bg-2);
}

.stepper-btn {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 2rem;
    background      : transparent;
    border          : none;
    border-radius   : 0;
    color           : var(--text-muted);
    cursor          : pointer;
    font-size       : 1rem;
    line-height     : 1;
    padding         : 0;
    flex-shrink     : 0;
    transition      : background .12s, color .12s;
}

.stepper-btn:hover:not(:disabled) {
    background : var(--bg-3);
    color      : var(--text);
}

.stepper-btn:active {
    opacity   : 1;
    transform : none;
}

.stepper-btn:disabled {
    opacity : .35;
    cursor  : not-allowed;
}

.stepper-dec {
    border-right : 1px solid var(--border);
}

.stepper-inc {
    border-left : 1px solid var(--border);
}

.stepper-input {
    width           : 3.5rem;
    text-align      : center;
    border          : none;
    background      : transparent;
    color           : var(--text);
    font            : inherit;
    padding         : .4rem .25rem;
    appearance      : textfield;
    -moz-appearance : textfield;
}

.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
    -webkit-appearance : none;
    margin             : 0;
}

.stepper-input:focus {
    outline    : none;
    background : color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Sizes */
.stepper.stepper-sm .stepper-btn {
    width     : 1.65rem;
    font-size : .85rem;
}

.stepper.stepper-sm .stepper-input {
    width     : 2.75rem;
    padding   : .25rem .15rem;
    font-size : .85rem;
}

.stepper.stepper-lg .stepper-btn {
    width     : 2.5rem;
    font-size : 1.1rem;
}

.stepper.stepper-lg .stepper-input {
    width     : 4.5rem;
    padding   : .55rem .25rem;
    font-size : 1.05rem;
}

/* Img */

img {
    max-width : 100%;
    height    : auto;
    display   : block;
}

/* Transparency checkerboard */

.bg-transparent-pattern {
    background-color    : #ffffff;
    background-image    : linear-gradient(45deg, #cccccc 25%, transparent 25%),
    linear-gradient(-45deg, #cccccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #cccccc 75%),
    linear-gradient(-45deg, transparent 75%, #cccccc 75%);
    background-size     : var(--checker-size) var(--checker-size);
    background-position : 0 0, 0 calc(var(--checker-size) / 2), calc(var(--checker-size) / 2) calc(var(--checker-size) / -2), calc(var(--checker-size) / -2) 0;
}


/* Sub / Sup */

sub, sup {
    font-size   : .75em;
    line-height : 0;
    position    : relative;
}

sup {
    top : -.5em;
}

sub {
    bottom : -.25em;
}

/* S */

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

/* Q */

q {
    font-style : italic;
}

/* Mark */

mark {
    background    : var(--accent-dim);
    color         : inherit;
    border-radius : var(--radius-sm);
    padding       : .05em .25em;
}

/* Ins / Del */

ins {
    text-decoration : underline;
    color           : var(--success);
}

del {
    color : var(--danger);
}

/* Hr */

hr {
    border       : none;
    border-top   : 1px solid var(--border);
    margin-block : 1.5rem;
}

/* Figure */

figure {
    margin : 0;
}

figcaption {
    font-size  : .875rem;
    color      : var(--text-muted);
    margin-top : .4em;
    text-align : center;
}

/* Abbr / Dfn */

abbr {
    text-decoration       : underline dotted;
    text-decoration-color : var(--accent);
    text-underline-offset : .2em;
}

abbr[title] {
    cursor : help;
}

dfn {
    font-style            : italic;
    text-decoration       : underline dotted;
    text-decoration-color : var(--text-muted);
    text-underline-offset : .2em;
}

/* File input */

.file-input {
    display     : flex;
    align-items : center;
    gap         : .5rem;
}

.file-input input[type="file"] {
    position : absolute;
    width    : 1px;
    height   : 1px;
    opacity  : 0;
    overflow : hidden;
}

.file-input-name {
    font-size     : var(--ctrl-size);
    color         : var(--text-muted);
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

/* Toast */

@keyframes toast-in {
    from {
        opacity   : 0;
        transform : translateX(1.5rem);
    }
    to {
        opacity   : 1;
        transform : translateX(0);
    }
}

@keyframes toast-out {
    from {
        opacity   : 1;
        transform : translateX(0);
    }
    to {
        opacity   : 0;
        transform : translateX(1.5rem);
    }
}

.toast-container {
    position       : fixed;
    right          : 1rem;
    z-index        : 9999;
    display        : flex;
    flex-direction : column;
    gap            : .5rem;
    width          : 20rem;
    max-width      : calc(100vw - 2rem);
    pointer-events : none;
}

.toast-container.top {
    top : 1rem;
}

.toast-container.bottom {
    bottom : 1rem;
}

.toast {
    --toast-color  : var(--accent);
    pointer-events : auto;
    display        : flex;
    flex-direction : column;
    gap            : .4rem;
    padding        : .75rem 1rem;
    background     : var(--bg-2);
    border         : 1px solid var(--border);
    border-left    : 3px solid var(--toast-color);
    border-radius  : var(--radius);
    box-shadow     : 0 4px 16px rgba(0, 0, 0, .2);
    animation      : toast-in .2s ease;
}

.toast-header {
    display     : flex;
    align-items : flex-start;
    gap         : .75rem;
}

.toast-content {
    flex           : 1;
    min-width      : 0;
    display        : flex;
    flex-direction : column;
    gap            : .2rem;
}

.toast-close {
    flex-shrink : 0;
    background  : none;
    border      : none;
    color       : var(--text-muted);
    font-size   : 1rem;
    line-height : 1;
    padding     : 0;
    cursor      : pointer;
    transition  : color .15s;
    box-shadow  : none;
}

.toast-close:hover {
    color      : var(--text);
    background : none;
    box-shadow : none;
}

.toast.dismissing {
    animation : toast-out .3s ease forwards;
}

@keyframes toast-progress-rtl {
    from {
        width : 100%;
    }
    to {
        width : 0%;
    }
}

@keyframes toast-progress-ltr {
    from {
        width : 0%;
    }
    to {
        width : 100%;
    }
}

.toast-progress {
    height        : 3px;
    width         : 100%;
    background    : var(--toast-color);
    border-radius : 999px;
    animation     : toast-progress-rtl var(--toast-duration, 4s) linear forwards;
}

.toast-progress.ltr {
    animation-name : toast-progress-ltr;
}

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

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

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

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

.toast-error {
    --toast-color : var(--error);
}

/* Callout */

.callout {
    --callout-color : var(--accent);
    border-left     : 3px solid var(--callout-color);
    background      : color-mix(in srgb, var(--callout-color) 10%, var(--bg));
    padding         : .75rem 1rem;
    border-radius   : 0 var(--radius) var(--radius) 0;
}

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

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

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

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

.callout-error {
    --callout-color : var(--error);
}

/* Utility */

.ghost:not(:hover):not(:focus):not(:active) {
    border-color     : transparent !important;
    background-color : transparent !important;
}

.d-none, [hidden], .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;
}

.noselect, .no-select {
    user-select : none !important;
}

.hand {
    cursor : pointer;
}

/* 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-accent {
    color : var(--accent);
}

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

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

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

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

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

.text-amber {
    color : var(--color-apricot);
}

.bg-accent {
    background-color : var(--accent);
}

.bg-3 {
    background-color : var(--bg-3);
}

.bg-white {
    background : white;
}

.bg-default {
    background-color : var(--bg);
}

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

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

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

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

.text-xxs {
    font-size : 0.625rem;
}

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

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

.text-md {
    font-size : 1rem;
}

.text-lg {
    font-size : 1.25rem;
}

.text-xl {
    font-size : 1.5rem;
}

.bold {
    font-weight : 700;
}

.italic {
    font-style : italic;
}

.underline {
    text-decoration : underline !important;
}

.strike {
    text-decoration : line-through;
}

.uppercase {
    text-transform : uppercase;
}

.nowrap {
    white-space : nowrap;
}

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

.text-right {
    text-align : right;
}

.text-left {
    text-align : left;
}

.text-justify {
    text-align : justify;
}

.bare {
    background-color : transparent;
    border-color     : transparent;
}

.ctrl-text {
    display       : inline-flex;
    align-items   : center;
    padding-block : var(--ctrl-padding-y);
    font-size     : var(--ctrl-size);
    line-height   : 1.5;
}

:user-invalid {
    color : var(--danger);
}

:user-invalid:focus {
    border-color : color-mix(in srgb, currentColor 50%, transparent);
    box-shadow   : 0 0 0 3px color-mix(in srgb, currentColor 30%, transparent);
}

.d-flex, .flex {
    display : flex;
}

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

.flex-row {
    flex-direction : row;
}

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

.gap-2 {
    gap : 1rem;
}

.h-stack, .v-stack {
    display : flex;
    gap     : var(--stack-gap);
}

.h-stack {
    flex-direction : row;
}

.v-stack {
    flex-direction : column;
}

.flex-wrap {
    flex-wrap : wrap;
}

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

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

.justify-start {
    justify-content : flex-start;
}

.justify-center {
    justify-content : center;
}

.justify-end {
    justify-content : flex-end;
}

/* No gap */
.no-gap, .nogap {
    gap : 0;
}

/* 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;
}

/* Responsive grid columns (mobile-first) */

@media (min-width : 576px) {
    .col-sm-1 {
        grid-column : span 1;
    }
    
    .col-sm-2 {
        grid-column : span 2;
    }
    
    .col-sm-3 {
        grid-column : span 3;
    }
    
    .col-sm-4 {
        grid-column : span 4;
    }
    
    .col-sm-5 {
        grid-column : span 5;
    }
    
    .col-sm-6 {
        grid-column : span 6;
    }
    
    .col-sm-7 {
        grid-column : span 7;
    }
    
    .col-sm-8 {
        grid-column : span 8;
    }
    
    .col-sm-9 {
        grid-column : span 9;
    }
    
    .col-sm-10 {
        grid-column : span 10;
    }
    
    .col-sm-11 {
        grid-column : span 11;
    }
    
    .col-sm-12 {
        grid-column : span 12;
    }
}

@media (min-width : 768px) {
    .col-md-1 {
        grid-column : span 1;
    }
    
    .col-md-2 {
        grid-column : span 2;
    }
    
    .col-md-3 {
        grid-column : span 3;
    }
    
    .col-md-4 {
        grid-column : span 4;
    }
    
    .col-md-5 {
        grid-column : span 5;
    }
    
    .col-md-6 {
        grid-column : span 6;
    }
    
    .col-md-7 {
        grid-column : span 7;
    }
    
    .col-md-8 {
        grid-column : span 8;
    }
    
    .col-md-9 {
        grid-column : span 9;
    }
    
    .col-md-10 {
        grid-column : span 10;
    }
    
    .col-md-11 {
        grid-column : span 11;
    }
    
    .col-md-12 {
        grid-column : span 12;
    }
}

@media (min-width : 960px) {
    .col-lg-1 {
        grid-column : span 1;
    }
    
    .col-lg-2 {
        grid-column : span 2;
    }
    
    .col-lg-3 {
        grid-column : span 3;
    }
    
    .col-lg-4 {
        grid-column : span 4;
    }
    
    .col-lg-5 {
        grid-column : span 5;
    }
    
    .col-lg-6 {
        grid-column : span 6;
    }
    
    .col-lg-7 {
        grid-column : span 7;
    }
    
    .col-lg-8 {
        grid-column : span 8;
    }
    
    .col-lg-9 {
        grid-column : span 9;
    }
    
    .col-lg-10 {
        grid-column : span 10;
    }
    
    .col-lg-11 {
        grid-column : span 11;
    }
    
    .col-lg-12 {
        grid-column : span 12;
    }
}

@media (min-width : 1200px) {
    .col-xl-1 {
        grid-column : span 1;
    }
    
    .col-xl-2 {
        grid-column : span 2;
    }
    
    .col-xl-3 {
        grid-column : span 3;
    }
    
    .col-xl-4 {
        grid-column : span 4;
    }
    
    .col-xl-5 {
        grid-column : span 5;
    }
    
    .col-xl-6 {
        grid-column : span 6;
    }
    
    .col-xl-7 {
        grid-column : span 7;
    }
    
    .col-xl-8 {
        grid-column : span 8;
    }
    
    .col-xl-9 {
        grid-column : span 9;
    }
    
    .col-xl-10 {
        grid-column : span 10;
    }
    
    .col-xl-11 {
        grid-column : span 11;
    }
    
    .col-xl-12 {
        grid-column : span 12;
    }
}

/* Alert */

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

.alert.info, .alert.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, .alert.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, .alert.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.alert-danger {
    background   : color-mix(in srgb, var(--danger) 12%, transparent);
    border-color : color-mix(in srgb, var(--danger) 25%, transparent);
    color        : var(--danger);
}

.alert.error, .alert.alert-error {
    background   : var(--error);
    border-color : var(--error);
    color        : #ffffff;
}

/* Alert stripe variant */
.alert.stripe {
    background    : var(--bg-2);
    border-color  : transparent;
    border-left   : 3px solid currentColor;
    border-radius : 0 var(--radius-sm) var(--radius-sm) 0;
}

.alert.error.stripe {
    color : var(--error);
}

/* Alert outline variant */
.alert.outline {
    background : transparent;
}

.alert.error.outline {
    color        : var(--error);
    border-color : var(--error);
}

/* Details */
details summary {
    cursor : pointer;
}

/* kbd - keyboard input */
kbd {
    background    : var(--bg-3);
    border        : 1px solid var(--border);
    border-radius : var(--radius-sm);
    padding       : 0.1em 0.4em;
    font-family   : var(--font-mono);
    font-size     : .85em;
    box-shadow    : 0 2px 0 var(--border);
    cursor        : default;
    
    &:hover {
        background : var(--bg-2);
    }
}

/* 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);
}

/* Confirm modal variant */
dialog.modal.modal-confirm {
    padding  : 0;
    overflow : hidden;
}

dialog.modal.modal-confirm .modal-body {
    padding    : 1.5rem 1.5rem 1.25rem;
    text-align : center;
}

dialog.modal.modal-confirm .modal-footer {
    display    : flex;
    padding    : 0;
    margin     : 0;
    border-top : 1px solid var(--border);
    gap        : 0;
}

dialog.modal.modal-confirm .modal-footer button {
    flex          : 1;
    padding       : .85rem 1rem;
    background    : transparent;
    border        : none;
    border-radius : 0;
    font          : inherit;
    font-size     : .9rem;
    color         : var(--accent);
    cursor        : pointer;
    transition    : background .12s;
}

dialog.modal.modal-confirm .modal-footer button:not(:last-child) {
    border-right : 1px solid var(--border);
}

dialog.modal.modal-confirm .modal-footer button:hover {
    background : var(--bg-3);
}

dialog.modal.modal-confirm .modal-footer button:active {
    opacity   : 1;
    transform : none;
}

dialog.modal.modal-confirm .modal-footer button:first-child {
    font-weight : 600;
}

.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;
}

/* Tabs */

.tabs {
    display        : flex;
    flex-direction : column;
}

.tabs-nav {
    display         : flex;
    border-bottom   : 1px solid var(--border);
    overflow-x      : auto;
    scrollbar-width : none;
}

.tabs-nav::-webkit-scrollbar {
    display : none;
}

button.tabs-btn, .tabs-btn {
    background    : transparent;
    border        : none;
    border-bottom : 2px solid transparent;
    border-radius : var(--radius-sm) var(--radius-sm) 0 0;
    padding       : .5rem 1rem;
    color         : var(--text-muted);
    font          : inherit;
    font-size     : var(--ctrl-size);
    font-weight   : 500;
    cursor        : pointer;
    white-space   : nowrap;
    flex-shrink   : 0;
    margin-bottom : -1px;
    line-height   : 1.5;
    transition    : color .15s, border-color .15s, background .15s;
}

button.tabs-btn:hover, .tabs-btn:hover {
    background : var(--accent-subtle);
    color      : var(--text);
}

button.tabs-btn:active, .tabs-btn:active {
    opacity   : 1;
    transform : none;
}

button.tabs-btn:focus-visible, .tabs-btn:focus-visible {
    outline        : 2px solid var(--accent);
    outline-offset : -2px;
    border-radius  : var(--radius-sm);
}

button.tabs-btn.active, .tabs-btn.active {
    color               : var(--accent);
    border-bottom-color : var(--accent);
}

button.tabs-btn[disabled], .tabs-btn[disabled] {
    opacity        : .4;
    cursor         : not-allowed;
    pointer-events : none;
}

.tabs-panel {
    display : none;
}

.tabs-panel.active {
    display : block;
}

/* Tabs: size modifiers */

.tabs-sm button.tabs-btn, .tabs-sm .tabs-btn {
    font-size : var(--ctrl-size-sm);
    padding   : .3rem .75rem;
}

.tabs-lg button.tabs-btn, .tabs-lg .tabs-btn {
    font-size : var(--ctrl-size-lg);
    padding   : .65rem 1.25rem;
}

/* Tabs variant: pills */

.tabs-pills .tabs-nav {
    border-bottom : none;
    gap           : .25rem;
    padding       : .25rem;
    background    : var(--bg-3);
    border-radius : var(--radius);
    align-items   : center;
}

.tabs-pills button.tabs-btn, .tabs-pills .tabs-btn {
    border-bottom : none;
    border-radius : var(--radius-sm);
    margin-bottom : 0;
}

.tabs-pills button.tabs-btn:hover, .tabs-pills .tabs-btn:hover {
    background : var(--bg-2);
}

.tabs-pills button.tabs-btn.active, .tabs-pills .tabs-btn.active {
    background          : var(--bg-2);
    color               : var(--text);
    border-bottom-color : transparent;
    box-shadow          : 0 1px 4px rgba(0, 0, 0, .2);
}

/* Tabs variant: boxed */

.tabs-boxed .tabs-nav {
    border-bottom : none;
    gap           : 0;
    position      : relative;
    z-index       : 1;
    margin-bottom : -1px;
}

.tabs-boxed button.tabs-btn, .tabs-boxed .tabs-btn {
    border        : 1px solid transparent;
    border-bottom : 1px solid var(--border);
    border-radius : var(--radius-sm) var(--radius-sm) 0 0;
    margin-bottom : 0;
}

.tabs-boxed button.tabs-btn:hover, .tabs-boxed .tabs-btn:hover {
    border-color        : var(--border);
    border-bottom-color : var(--border);
    background          : var(--bg-3);
}

.tabs-boxed button.tabs-btn.active, .tabs-boxed .tabs-btn.active {
    background          : var(--bg-2);
    color               : var(--text);
    border-top-color    : var(--accent);
    border-left-color   : var(--border);
    border-right-color  : var(--border);
    border-bottom-color : var(--bg-2);
    position            : relative;
    z-index             : 1;
}

.tabs-boxed .tabs-panels {
    border        : 1px solid var(--border);
    border-radius : 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
    background    : var(--bg-2);
}

/* Dropdown */

.dropdown {
    position : relative;
    display  : inline-block;
}

.dropdown-toggle::after {
    content        : '';
    display        : inline-block;
    width          : .35em;
    height         : .35em;
    border-right   : 1.5px solid currentColor;
    border-bottom  : 1.5px solid currentColor;
    transform      : translateY(-.1em) rotate(45deg);
    margin-left    : .4em;
    vertical-align : middle;
    opacity        : .7;
    flex-shrink    : 0;
    transition     : transform .15s;
}

.dropdown.open .dropdown-toggle::after {
    transform : translateY(.1em) rotate(225deg);
}

/* In a split button the toggle is narrow - margin reset */
.dropdown > .btn-group > .dropdown-toggle {
    padding-left  : .6em;
    padding-right : .6em;
    box-shadow    : inset 1px 0 0 rgba(255, 255, 255, .1);
    
    &:hover {
        box-shadow : inset 1px 0 0 transparent;
    }
}

.dropdown > .btn-group:hover > .dropdown-toggle {
    box-shadow : inset 1px 0 0 transparent;
}

.dropdown > .btn-group > .dropdown-toggle::after {
    margin-left : 0;
}

@keyframes dropdown-in {
    from {
        opacity   : 0;
        transform : translateY(-.35rem);
    }
    to {
        opacity   : 1;
        transform : translateY(0);
    }
}

.dropdown-menu {
    position       : absolute;
    top            : calc(100% + .35rem);
    left           : 0;
    z-index        : 500;
    min-width      : max(10rem, 100%);
    background     : var(--bg-2);
    border         : 1px solid var(--border);
    border-radius  : var(--radius);
    padding        : .25rem;
    box-shadow     : 0 8px 24px rgba(0, 0, 0, .25);
    display        : none;
    flex-direction : column;
}

.dropdown-menu.open {
    display   : flex;
    animation : dropdown-in .12s ease;
}

.dropdown-menu-end {
    left  : auto;
    right : 0;
}

button.dropdown-item, .dropdown-item {
    background    : transparent;
    border        : none;
    border-radius : var(--radius-sm);
    padding       : .4rem .75rem;
    color         : var(--text);
    font          : inherit;
    font-size     : var(--ctrl-size);
    font-weight   : normal;
    text-align    : left;
    width         : 100%;
    display       : flex;
    align-items   : center;
    gap           : .5rem;
    cursor        : pointer;
    white-space   : nowrap;
    transition    : background .1s, color .1s;
}

button.dropdown-item:hover, .dropdown-item:hover {
    background : var(--accent-subtle);
    color      : var(--text);
}

button.dropdown-item:active, .dropdown-item:active {
    opacity    : 1;
    transform  : none;
    background : var(--accent-dim);
}

button.dropdown-item[disabled], .dropdown-item[disabled] {
    opacity        : .4;
    cursor         : not-allowed;
    pointer-events : none;
}

button.dropdown-item.danger, .dropdown-item.danger {
    color : var(--danger);
}

button.dropdown-item.danger:hover, .dropdown-item.danger:hover {
    background : color-mix(in srgb, var(--danger) 12%, transparent);
    color      : var(--danger);
}

.dropdown-divider {
    border     : none;
    border-top : 1px solid var(--border);
    margin     : .25rem -.25rem;
}

.dropdown-header {
    padding        : .25rem .75rem;
    color          : var(--text-muted);
    font-size      : var(--ctrl-size-xs);
    font-weight    : 600;
    text-transform : uppercase;
    letter-spacing : .08em;
}

/* Dropzone */

.dropzone {
    border          : 2px dashed var(--border);
    border-radius   : var(--radius);
    padding         : 2rem;
    text-align      : center;
    cursor          : pointer;
    transition      : border-color .15s, background .15s, color .15s;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : .5rem;
    color           : var(--text-muted);
    font-size       : var(--ctrl-size);
    user-select     : none;
}

.dropzone:hover {
    border-color : var(--accent);
    background   : var(--accent-subtle);
    color        : var(--text);
}

.dropzone.dragging {
    border-color : var(--accent);
    background   : var(--accent-dim);
    color        : var(--text);
}

.dropzone-trigger {
    color           : var(--accent);
    text-decoration : underline;
    pointer-events  : none;
}

.dropzone-sm {
    padding   : 1rem;
    gap       : .3rem;
    font-size : var(--ctrl-size-sm);
}

.dropzone-lg {
    padding : 3rem;
    gap     : .75rem;
}

.dropzone[disabled], .dropzone[data-disabled] {
    opacity        : .5;
    cursor         : not-allowed;
    pointer-events : none;
}

/* Input group */

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

.input-group > * {
    border-radius : 0;
}

.input-group > *:first-child {
    border-radius : var(--radius-sm) 0 0 var(--radius-sm);
}

.input-group > *:last-child {
    border-radius : 0 var(--radius-sm) var(--radius-sm) 0;
}

.input-group > * + * {
    margin-left : -1px;
}

.input-group > input {
    flex      : 1;
    width     : auto;
    min-width : 0;
}

.input-group > select {
    flex      : 0 0 auto;
    width     : auto;
    min-width : 0;
}

.input-group > *:focus,
.input-group > *:focus-within {
    position : relative;
    z-index  : 1;
}

/* Dropdown inside input-group */
.input-group > .dropdown {
    display : flex;
}

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

.input-group > .dropdown:not(:first-child) > .btn-group > button:first-child,
.input-group > .dropdown:not(:first-child) > .btn-group > .btn:first-child {
    border-radius : 0;
}

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

.input-addon {
    display     : inline-flex;
    align-items : center;
    padding     : var(--ctrl-padding-y) var(--input-padding-x);
    background  : var(--bg-2);
    border      : 1px solid var(--border);
    color       : var(--text-muted);
    font-size   : var(--ctrl-size);
    line-height : 1.5;
    white-space : nowrap;
    flex-shrink : 0;
}

.input-group-xs > .input-addon,
.input-group-xs > button,
.input-group-xs > .btn,
.input-group-xs > input,
.input-group-xs > select {
    font-size : var(--ctrl-size-xs);
}

.input-group-sm > .input-addon,
.input-group-sm > button,
.input-group-sm > .btn,
.input-group-sm > input,
.input-group-sm > select {
    font-size : var(--ctrl-size-sm);
}

.input-group-lg > .input-addon,
.input-group-lg > button,
.input-group-lg > .btn,
.input-group-lg > input,
.input-group-lg > select {
    font-size : var(--ctrl-size-lg);
}

/* Input Preset */

.input-preset {
    display  : block;
    position : relative;
}

.input-preset > .input-group {
    width : 100%;
}

.input-preset > .input-group > .dropdown-toggle {
    padding-left  : .6em;
    padding-right : .6em;
    flex-shrink   : 0;
}

.input-preset > .input-group > .dropdown-toggle::after {
    margin-left : 0;
}

.input-preset > .dropdown-menu {
    min-width : 100%;
}

.input-preset > .input-group.input-group-xs ~ .dropdown-menu .dropdown-item {
    font-size : var(--ctrl-size-xs);
}

.input-preset > .input-group.input-group-sm ~ .dropdown-menu .dropdown-item {
    font-size : var(--ctrl-size-sm);
}

.input-preset > .input-group.input-group-lg ~ .dropdown-menu .dropdown-item {
    font-size : var(--ctrl-size-lg);
}

/* Tag Input */

.tag-input {
    display       : flex;
    flex-wrap     : wrap;
    align-items   : center;
    gap           : .3rem;
    padding       : .3rem .5rem;
    border        : 1px solid var(--border);
    border-radius : var(--radius-sm);
    background    : var(--bg-2);
    cursor        : text;
    min-height    : 2.3rem;
    transition    : border-color .15s;
}

.tag-input:focus-within {
    border-color : var(--accent);
}

.tag-input > input {
    flex       : 1;
    min-width  : 8rem;
    border     : none;
    background : transparent;
    padding    : 0;
    margin     : 0;
    font-size  : var(--ctrl-size);
    color      : var(--text);
    outline    : none;
    min-height : 0;
}

.tag-input > input::placeholder {
    color : var(--text-muted);
}

.tag-chip {
    display       : inline-flex;
    align-items   : center;
    gap           : .2rem;
    padding       : .15rem .25rem .15rem .55rem;
    background    : var(--accent-subtle);
    color         : var(--accent);
    border-radius : calc(var(--radius-sm) * .75);
    font-size     : calc(var(--ctrl-size) * .875);
    white-space   : nowrap;
    user-select   : none;
    line-height   : 1.4;
}

.tag-chip-remove {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 1.1em;
    height          : 1.1em;
    border-radius   : 50%;
    background      : none;
    border          : none;
    cursor          : pointer;
    color           : inherit;
    padding         : 0;
    font-size       : 1em;
    line-height     : 1;
    opacity         : .55;
    transition      : opacity .1s, background .1s;
    flex-shrink     : 0;
}

.tag-chip-remove:hover {
    opacity    : 1;
    background : color-mix(in srgb, currentColor 20%, transparent);
}

/* Sizes */
.tag-input-xs {
    --ctrl-size : var(--ctrl-size-xs);
    min-height  : 1.6rem;
}

.tag-input-sm {
    --ctrl-size : var(--ctrl-size-sm);
    min-height  : 1.9rem;
}

.tag-input-lg {
    --ctrl-size : var(--ctrl-size-lg);
    min-height  : 2.8rem;
}

/* Avatar */

.avatar {
    --avatar-size   : 2.5rem;
    --avatar-bg     : var(--accent-dim);
    --avatar-color  : var(--accent);
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : var(--avatar-size);
    height          : var(--avatar-size);
    border-radius   : 50%;
    overflow        : hidden;
    background      : var(--avatar-bg);
    color           : var(--avatar-color);
    font-size       : calc(var(--avatar-size) * .38);
    font-weight     : 600;
    flex-shrink     : 0;
    user-select     : none;
}

.avatar img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
}

.avatar-xs {
    --avatar-size : 1.5rem;
}

.avatar-sm {
    --avatar-size : 2rem;
}

.avatar-lg {
    --avatar-size : 3.5rem;
}

.avatar-xl {
    --avatar-size : 5rem;
}

.avatar-square {
    border-radius : var(--radius-sm);
}

/* Avatar group - overlapping stack */

.avatar-group {
    display     : inline-flex;
    align-items : center;
}

.avatar-group > .avatar + .avatar {
    margin-left : calc(var(--avatar-size, 2.5rem) * -.3);
    box-shadow  : 0 0 0 2px var(--bg);
}

/* Empty state */

.empty-state {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    text-align      : center;
    padding         : 3rem 1.5rem;
    gap             : .5rem;
    color           : var(--text-muted);
}

.empty-state-icon {
    font-size     : 2.5rem;
    line-height   : 1;
    opacity       : .4;
    margin-bottom : .25rem;
}

.empty-state-title {
    font-size   : 1rem;
    font-weight : 600;
    color       : var(--text);
}

.empty-state-text {
    font-size : var(--ctrl-size-sm);
    max-width : 24rem;
    color     : var(--text-muted);
}

.empty-state-actions {
    display         : flex;
    gap             : .5rem;
    margin-top      : .75rem;
    flex-wrap       : wrap;
    justify-content : center;
}

/* ── List group ─────────────────────────────────────────────────────────── */

.list-group {
    display        : flex;
    flex-direction : column;
    border         : 1px solid var(--border);
    border-radius  : var(--radius);
    overflow       : hidden;
    list-style     : none;
    padding        : 0;
}

.list-group-item {
    display     : flex;
    align-items : center;
    gap         : .5rem;
    padding     : .5rem 1rem;
    background  : var(--bg);
    color       : var(--text);
    border-top  : 1px solid var(--border);
    line-height : 1.5;
}

.list-group-item:first-child {
    border-top : none;
}

/* Action items */
a.list-group-item,
button.list-group-item,
.list-group-item-action {
    cursor          : pointer;
    text-decoration : none;
    transition      : background .12s, color .12s;
    width           : 100%;
    text-align      : left;
    font            : inherit;
}

a.list-group-item:hover,
button.list-group-item:hover,
.list-group-item-action:hover {
    background : var(--bg-2);
    color      : var(--text);
}

a.list-group-item:focus-visible,
button.list-group-item:focus-visible,
.list-group-item-action:focus-visible {
    outline        : 2px solid var(--accent);
    outline-offset : -2px;
    position       : relative;
    z-index        : 1;
}

/* Active */
.list-group-item.active {
    background   : var(--accent);
    color        : var(--accent-contrast);
    border-color : var(--accent);
    z-index      : 1;
}

.list-group-item.active + .list-group-item {
    border-top-color : var(--accent);
}

/* Disabled */
.list-group-item.disabled,
.list-group-item[disabled] {
    color          : var(--text-muted);
    pointer-events : none;
}

/* Flush */
.list-group-flush {
    border        : none;
    border-radius : 0;
}

.list-group-flush .list-group-item {
    border-left   : none;
    border-right  : none;
    border-radius : 0;
}

.list-group-flush .list-group-item:first-child {
    border-top : none;
}

/* Numbered */
.list-group-numbered {
    counter-reset : list-group-counter;
}

.list-group-numbered > .list-group-item::before {
    counter-increment : list-group-counter;
    content           : counter(list-group-counter) '.';
    min-width         : 1.5rem;
    font-weight       : 600;
    color             : var(--text-muted);
    flex-shrink       : 0;
}

/* Checkbox / Radio items */
.list-group-item input[type="checkbox"],
.list-group-item input[type="radio"] {
    flex-shrink : 0;
    cursor      : pointer;
}

.list-group.highlight-checked-items .list-group-item:has(input:checked) {
    background   : var(--accent);
    color        : var(--accent-contrast);
    border-color : var(--accent);
    z-index      : 1;
}

.list-group.highlight-checked-items .list-group-item.highlight-checked-items:has(input:checked) + .list-group-item {
    border-top-color : var(--accent);
}

/* Radio card variant */
.list-group.list-group-radio {
    gap           : .5rem;
    border        : none;
    border-radius : 0;
    overflow      : visible;
}

.list-group-radio > * {
    position : relative;
}

.list-group-radio input[type="radio"] {
    position  : absolute;
    top       : 50%;
    right     : 1rem;
    transform : translateY(-50%);
    width     : 1.15em;
    height    : 1.15em;
    margin    : 0;
    cursor    : pointer;
    z-index   : 2;
}

.list-group-radio .list-group-item {
    flex-direction : column;
    align-items    : flex-start;
    gap            : .15rem;
    padding        : .75rem 3rem .75rem 1rem;
    border         : 1px solid var(--border);
    border-radius  : var(--radius);
    cursor         : pointer;
    transition     : background .12s, border-color .12s;
}

.list-group-radio .list-group-item:hover {
    background : var(--bg-2);
}

.list-group-radio > *:has(input:checked) .list-group-item {
    border-color : var(--accent);
    background   : var(--accent-dim);
}

.list-group-radio > *:has(input:disabled) {
    opacity        : .5;
    pointer-events : none;
}

/* ── Accordion ───────────────────────────────────────────────────────────── */

.accordion {
    border        : 1px solid var(--border);
    border-radius : var(--radius);
    overflow      : hidden;
}

.accordion details {
    border-top : 1px solid var(--border);
}

.accordion details:first-child {
    border-top : none;
}

.accordion summary {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : .5rem;
    padding         : .75rem 1rem;
    list-style      : none;
    cursor          : pointer;
    font-weight     : 500;
    user-select     : none;
    background      : var(--bg);
    color           : var(--text);
    transition      : background .12s;
}

.accordion summary::-webkit-details-marker {
    display : none;
}

.accordion summary:hover {
    background : var(--bg-2);
}

.accordion summary::after {
    content       : '';
    display       : block;
    flex-shrink   : 0;
    width         : .45em;
    height        : .45em;
    border-right  : 1.5px solid currentColor;
    border-bottom : 1.5px solid currentColor;
    transform     : rotate(45deg) translateY(-.1em);
    transition    : transform .2s ease;
    opacity       : .5;
}

.accordion details[open] > summary {
    background : var(--bg-2);
}

.accordion details[open] > summary::after {
    transform : rotate(-135deg) translateY(-.1em);
}

@keyframes accordion-open {
    from {
        opacity   : 0;
        transform : translateY(-.4rem);
    }
    to {
        opacity   : 1;
        transform : translateY(0);
    }
}

.accordion-body {
    padding     : .6rem 1rem .85rem;
    background  : var(--bg);
    border-top  : 1px solid var(--border);
    font-size   : .9rem;
    line-height : 1.6;
    animation   : accordion-open .18s ease;
}

/* Flush */
.accordion-flush {
    border        : none;
    border-radius : 0;
}

.accordion-flush details:first-child {
    border-top : none;
}

.accordion-flush details {
    border-top : 1px solid var(--border);
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */

.navbar {
    display     : flex;
    align-items : center;
    gap         : .5rem;
    padding     : .5rem 1.25rem;
    min-height  : 3.25rem;
    background  : var(--bg);
    position    : relative;
}

.navbar-brand {
    font-weight     : 700;
    font-size       : 1.05rem;
    color           : var(--text);
    text-decoration : none;
    white-space     : nowrap;
    flex-shrink     : 0;
    margin-right    : .25rem;
}

.navbar-nav {
    display     : flex;
    align-items : center;
    gap         : .15rem;
    list-style  : none;
    padding     : 0;
    margin      : 0;
}

.nav-link {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : .4rem;
    padding         : .4rem .65rem;
    background      : transparent;
    border          : none;
    border-radius   : var(--radius-sm);
    color           : var(--text-muted);
    text-decoration : none;
    font-size       : .875rem;
    font-weight     : 500;
    white-space     : nowrap;
    transition      : background .12s, color .12s;
}

.nav-link:active {
    opacity   : 1;
    transform : none;
}

.nav-link:hover {
    background : var(--bg-2);
    color      : var(--text);
}

.nav-link.active {
    background : var(--accent-subtle);
    color      : var(--text);
}

/* End slot - right-side actions */
.navbar-end {
    display     : flex;
    align-items : center;
    gap         : .5rem;
    margin-left : auto;
    flex-shrink : 0;
}

/* Nav right - push nav to end */
.navbar-nav-right > .navbar-nav {
    margin-left : auto;
}

/* Nav center - brand left, nav absolutely centered, end right */
.navbar-nav-center > .navbar-nav {
    position  : absolute;
    left      : 50%;
    transform : translateX(-50%);
}

/* Icon nav - stacked icon + label */
.navbar-icon-nav .nav-link {
    flex-direction : column;
    gap            : .15rem;
    padding        : .3rem .85rem;
    font-size      : .72rem;
    line-height    : 1;
}

.navbar-icon-nav .nav-icon {
    font-size   : 1.2rem;
    display     : block;
    line-height : 1;
}

/* Navbar submenu */
.nav-item-sub {
    position : relative;
}

.nav-link-sub::after {
    content       : '';
    display       : inline-block;
    flex-shrink   : 0;
    width         : .35em;
    height        : .35em;
    border-right  : 1.5px solid currentColor;
    border-bottom : 1.5px solid currentColor;
    transform     : rotate(45deg) translateY(-.15em);
    opacity       : .5;
    margin-left   : .25em;
    transition    : transform .15s;
}

.nav-item-sub:hover .nav-link-sub::after,
.nav-item-sub:focus-within .nav-link-sub::after,
.nav-item-sub.open .nav-link-sub::after {
    transform : rotate(-135deg) translateY(.05em);
}

.nav-submenu {
    position      : absolute;
    top           : calc(100% + .3rem);
    left          : 0;
    min-width     : 13rem;
    background    : var(--bg-2);
    border        : 1px solid var(--border);
    border-radius : var(--radius);
    padding       : .35rem;
    box-shadow    : 0 8px 24px rgba(0, 0, 0, .18);
    z-index       : 200;
    opacity       : 0;
    visibility    : hidden;
    transform     : translateY(-.35rem);
    transition    : opacity .15s, transform .15s, visibility .15s;
}

/* Transparent bridge over the gap so hover doesn't break */
.nav-submenu::before {
    content  : '';
    position : absolute;
    top      : calc(-.3rem - 1px);
    left     : 0;
    right    : 0;
    height   : calc(.3rem + 1px);
}

.nav-item-sub:hover .nav-submenu,
.nav-item-sub:focus-within .nav-submenu,
.nav-item-sub.open .nav-submenu {
    opacity    : 1;
    visibility : visible;
    transform  : translateY(0);
}

.nav-submenu-item {
    display         : flex;
    align-items     : center;
    gap             : .5rem;
    padding         : .45rem .75rem;
    color           : var(--text-muted);
    text-decoration : none;
    border-radius   : var(--radius-sm);
    font-size       : .875rem;
    transition      : background .12s, color .12s;
}

.nav-submenu-item:hover,
.nav-submenu-item:focus-visible {
    background : var(--bg-3);
    color      : var(--text);
    outline    : none;
}

.nav-submenu-divider {
    height     : 1px;
    background : var(--border);
    margin     : .3rem calc(-.35rem);
}

.nav-submenu-header {
    padding        : .3rem .75rem .1rem;
    font-size      : .7rem;
    font-weight    : 600;
    color          : var(--text-muted);
    text-transform : uppercase;
    letter-spacing : .06em;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.sidebar {
    display        : flex;
    flex-direction : column;
    width          : 15rem;
    height         : 100%;
    background     : var(--bg-2);
    border-right   : 1px solid var(--border);
    flex-shrink    : 0;
}

.sidebar-brand {
    display         : block;
    padding         : .85rem 1rem;
    font-weight     : 700;
    font-size       : 1.05rem;
    color           : var(--text);
    text-decoration : none;
    border-bottom   : 1px solid var(--border);
    white-space     : nowrap;
}

.sidebar-nav {
    flex           : 1;
    padding        : .5rem;
    display        : flex;
    flex-direction : column;
    gap            : .1rem;
    overflow-y     : auto;
}

.sidebar-divider {
    height      : 1px;
    background  : var(--border);
    margin      : .4rem 0;
    flex-shrink : 0;
}

.sidebar-label {
    padding        : .45rem .75rem .15rem;
    font-size      : .7rem;
    font-weight    : 600;
    text-transform : uppercase;
    letter-spacing : .06em;
    color          : var(--text-muted);
    flex-shrink    : 0;
}

.sidebar-link {
    display         : flex;
    align-items     : center;
    gap             : .6rem;
    padding         : .45rem .75rem;
    border-radius   : var(--radius-sm);
    color           : var(--text-muted);
    text-decoration : none;
    font-size       : .875rem;
    font-weight     : 500;
    white-space     : nowrap;
    background      : transparent;
    border          : none;
    transition      : background .12s, color .12s;
}

.sidebar-link:hover {
    background : var(--bg-3);
    color      : var(--text);
}

.sidebar-link.active {
    background : var(--accent-subtle);
    color      : var(--text);
}

.sidebar-link:active {
    opacity   : 1;
    transform : none;
}

.sidebar-icon {
    font-size   : 1rem;
    line-height : 1;
    flex-shrink : 0;
    width       : 1.2rem;
    text-align  : center;
    display     : block;
}

.sidebar-footer {
    display     : flex;
    align-items : center;
    gap         : .65rem;
    padding     : .75rem 1rem;
    border-top  : 1px solid var(--border);
    flex-shrink : 0;
}

.sidebar-footer-info {
    min-width : 0;
}

.sidebar-footer-info strong {
    display       : block;
    font-size     : .85rem;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.sidebar-footer-info small {
    display       : block;
    font-size     : .75rem;
    color         : var(--text-muted);
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

/* Narrow (icon-only) */
.sidebar-narrow {
    width : 4rem;
}

.sidebar-narrow .sidebar-brand {
    text-align : center;
    padding    : .85rem .5rem;
}

.sidebar-narrow .sidebar-nav {
    padding     : .5rem .35rem;
    align-items : center;
}

.sidebar-narrow .sidebar-link {
    justify-content : center;
    padding         : .5rem;
    width           : 100%;
    gap             : 0;
}

.sidebar-narrow .sidebar-icon {
    width : auto;
}

.sidebar-narrow .sidebar-text,
.sidebar-narrow .sidebar-label,
.sidebar-narrow .sidebar-footer-info {
    display : none;
}

.sidebar-narrow .sidebar-footer {
    justify-content : center;
    padding         : .75rem .5rem;
}

/* Collapsible groups */
.sidebar-group > .sidebar-group-toggle {
    display       : flex;
    align-items   : center;
    gap           : .6rem;
    padding       : .45rem .75rem;
    border-radius : var(--radius-sm);
    color         : var(--text-muted);
    font-size     : .875rem;
    font-weight   : 600;
    cursor        : pointer;
    list-style    : none;
    user-select   : none;
    transition    : background .12s, color .12s;
}

.sidebar-group > .sidebar-group-toggle::-webkit-details-marker {
    display : none;
}

.sidebar-group > .sidebar-group-toggle:hover {
    background : var(--bg-3);
    color      : var(--text);
}

.sidebar-group > .sidebar-group-toggle::after {
    content       : '';
    display       : block;
    margin-left   : auto;
    flex-shrink   : 0;
    width         : .4em;
    height        : .4em;
    border-right  : 1.5px solid currentColor;
    border-bottom : 1.5px solid currentColor;
    transform     : rotate(-45deg);
    transition    : transform .2s;
    opacity       : .4;
}

.sidebar-group[open] > .sidebar-group-toggle::after {
    transform : rotate(45deg) translateY(-.15em);
}

.sidebar-group-items {
    display        : flex;
    flex-direction : column;
    gap            : .05rem;
    padding-left   : 1.9rem;
    margin-top     : .05rem;
    animation      : accordion-open .15s ease;
}

.sidebar-sub-link {
    font-size   : .82rem;
    font-weight : 400;
}

/* == Print styles == */

.noprint {
    display : none !important;
}

@media print {
    .noprint {
        display : revert !important;
    }
}

.only-print {
    display : none !important;
}

@media print {
    .only-print {
        display : revert !important;
    }
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq {
    margin-top  : 1rem;
    border-top  : 1px solid var(--border);
    padding-top : 1.5rem;
}

.faq-title {
    font-size      : .75rem;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : .07em;
    color          : var(--text-muted);
    margin-bottom  : 1rem;
}

.faq-item {
    margin-bottom : 1rem;
}

.faq-item:last-child {
    margin-bottom : 0;
}

.faq-q {
    font-size     : .875rem;
    font-weight   : 600;
    color         : var(--text);
    margin-bottom : .25rem;
}

.faq-a {
    font-size   : .825rem;
    color       : var(--text-muted);
    line-height : 1.55;
}