@layer amfr-base, amfr-layout, amfr-controls;

@layer amfr-base {
:root {
    color-scheme: dark;
    --amfr-background: #0c0b08;
    --amfr-surface: #16130e;
    --amfr-surface-raised: #231c12;
    --amfr-surface-hover: #3d321d;
    --amfr-text: #f5edda;
    --amfr-muted: #c5bea9;
    --amfr-accent: #dabb6a;
    --amfr-accent-bright: #f5d788;
    --amfr-line: #806b3d;
    --amfr-focus: #f5d788;
    --amfr-success: #4ade80;
    --amfr-error: #ffb4a8;
    --amfr-error-surface: #3b1f1b;
    --amfr-like: #f43f5e;
    --amfr-live: #c0392b;
    --amfr-black: #000;
    --amfr-background-rgb: 12, 11, 8;
    --amfr-surface-rgb: 22, 19, 14;
    --amfr-accent-rgb: 218, 187, 106;
    --amfr-text-rgb: 245, 237, 218;
    --amfr-success-rgb: 74, 222, 128;
    --amfr-error-rgb: 255, 180, 168;
    --amfr-line-soft: rgba(var(--amfr-accent-rgb), .35);
    --amfr-accent-soft: rgba(var(--amfr-accent-rgb), .16);
    --amfr-gradient-surface: linear-gradient(135deg, var(--amfr-surface-raised), var(--amfr-background));
    --amfr-button-background: var(--amfr-surface);
    --amfr-button-background-hover: #211b12;
    --amfr-button-background-active: #292114;
    --amfr-button-text: var(--amfr-accent);
    --amfr-button-text-active: var(--amfr-accent-bright);
    --amfr-button-border: #74613b;
    --amfr-button-border-hover: #a58b52;
    --amfr-shadow: 0 16px 60px #0009;
    --amfr-font: system-ui, sans-serif;
    --amfr-font-small: .875rem;
    --amfr-font-body: 1rem;
    --amfr-line-height: 1.5;
    --amfr-space-1: .25rem;
    --amfr-space-2: .5rem;
    --amfr-space-3: .75rem;
    --amfr-space-4: 1rem;
    --amfr-space-6: 1.5rem;
    --amfr-space-8: 2rem;
    --amfr-radius-control: 8px;
    --amfr-radius-card: 12px;
    --amfr-radius-panel: 16px;
    --amfr-container: 1150px;
    --amfr-control-size: 44px;
    --amfr-motion: .15s ease;
    --border-color: var(--amfr-line);
    --surface-color: var(--amfr-surface);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--amfr-background); color: var(--amfr-text); font-family: var(--amfr-font); }
a { color: var(--amfr-accent-bright); }
button, input, textarea, select { font: inherit; max-width: 100%; }
button, input:not([type="checkbox"]):not([type="radio"]), select {
    min-height: var(--amfr-control-size);
}
button, select, input, textarea {
    border: 1px solid var(--amfr-line);
    border-radius: var(--amfr-radius-control);
    background: var(--amfr-surface);
    color: var(--amfr-text);
    padding: var(--amfr-space-3);
}
button { cursor: pointer; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--amfr-accent); }
button:disabled, select:disabled, input:disabled { opacity: .55; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--amfr-focus); outline-offset: 3px; }
[aria-invalid="true"] { border-color: var(--amfr-error); }
[hidden] { display: none !important; }
.amfr-container { width: min(var(--amfr-container), calc(100% - 32px)); margin-inline: auto; min-width: 0; }
.amfr-stack { display: grid; gap: var(--amfr-space-4); min-width: 0; }
.amfr-card { background: var(--amfr-surface); border: 1px solid var(--amfr-line); border-radius: var(--amfr-radius-card); padding: var(--amfr-space-4); min-width: 0; overflow-wrap: anywhere; }
.amfr-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--amfr-control-size); gap: var(--amfr-space-2); padding: var(--amfr-space-3) var(--amfr-space-4); border: 1px solid var(--amfr-line); border-radius: var(--amfr-radius-control); text-decoration: none; background: var(--amfr-surface); color: var(--amfr-accent-bright); }
.amfr-button--primary { font-weight: 700; }
.amfr-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.amfr-muted { color: var(--amfr-muted); }
.amfr-message { padding: var(--amfr-space-4); border-inline-start: 4px solid var(--amfr-accent); background: var(--amfr-accent-soft); overflow-wrap: anywhere; }
.amfr-message--error { border-color: var(--amfr-error); color: var(--amfr-error); background: var(--amfr-error-surface); }
.amfr-message--success { border-color: var(--amfr-success); color: var(--amfr-success); }
.amfr-loading { border-color: var(--amfr-accent); }
@media (hover: hover) and (pointer: fine) {
    .amfr-button:not([aria-disabled="true"]):hover { border-color: var(--amfr-accent-bright); }
    button:not(:disabled):hover { border-color: var(--amfr-accent-bright); }
}
@media (pointer: coarse) { :root { --amfr-control-size: 48px; } }
@media (prefers-reduced-motion: reduce) {
    :root { --amfr-motion: 0s; }
    *, *::before, *::after { scroll-behavior: auto !important; }
}
}

@layer amfr-controls {
:where(button, input[type="button"], input[type="submit"], input[type="reset"],
    .amfr-button, .button-primary, .account-btn, .admin-button, .amfr-login-link-btn,
    .amfr-home-card-play[href], .amfr-account-view .account-actions a,
    .amfr-account-view .listener-dashboard__nav a) {
    background: var(--amfr-button-background);
    color: var(--amfr-button-text);
    border: 1px solid var(--amfr-button-border);
    box-shadow: none;
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"],
    .amfr-button, .button-primary, .account-btn, .admin-button, .amfr-login-link-btn,
    .amfr-home-card-play[href], .amfr-account-view .account-actions a,
    .amfr-account-view .listener-dashboard__nav a):is(
        [aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"],
        .is-active, .is-playing, .is-current) {
    background: var(--amfr-button-background-active);
    color: var(--amfr-button-text-active);
    border-color: var(--amfr-button-border-hover);
    box-shadow: inset 0 -2px 0 var(--amfr-accent);
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"],
    .amfr-button, .button-primary, .account-btn, .admin-button, .amfr-login-link-btn,
    .amfr-home-card-play[href], .amfr-account-view .account-actions a,
    .amfr-account-view .listener-dashboard__nav a):focus-visible {
    outline: 3px solid var(--amfr-focus);
    outline-offset: var(--amfr-button-focus-offset, 3px);
}
.amfr-track-menu-item { --amfr-button-focus-offset: -3px; }
.amfr-icon-action--like.is-active svg { fill: currentColor; stroke: currentColor; }
.amfr-icon-action.is-copied {
    background: var(--amfr-button-background-active);
    border-color: var(--amfr-button-border-hover);
    box-shadow: inset 0 -2px 0 var(--amfr-accent);
}
@media (hover: hover) and (pointer: fine) {
    :where(button, input[type="button"], input[type="submit"], input[type="reset"],
        .amfr-button, .button-primary, .account-btn, .admin-button, .amfr-login-link-btn,
        .amfr-home-card-play[href], .amfr-account-view .account-actions a,
        .amfr-account-view .listener-dashboard__nav a):not(:disabled):not([aria-disabled="true"]):hover {
        background: var(--amfr-button-background-hover);
        color: var(--amfr-button-text-active);
        border-color: var(--amfr-button-border-hover);
    }
}
}