/* Die Line — langage visuel commun, indépendant des plateformes existantes. */
:root {
    --bg: #080d14;
    --surface: #101822;
    --surface-2: #151f2b;
    --surface-3: #1b2836;
    --text: #f5f7fb;
    --muted: #a8b4c0;
    --line: rgba(210, 226, 240, .12);
    --accent: #f24e5c;
    --accent-2: #ff8874;
    --shadow: 0 22px 60px rgba(0, 0, 0, .34);
}

::selection { color: #fff; background: rgba(242, 78, 92, .8); }
html { scrollbar-color: #526273 var(--bg); }
body { background-color: var(--bg); }

/* Barre de navigation : une surface calme qui reste lisible sur les jaquettes. */
.ns-header {
    border-bottom-color: rgba(219, 232, 242, .10);
    background: linear-gradient(100deg, rgba(8, 13, 20, .96), rgba(14, 22, 31, .89));
    box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
}

.ns-header-brand strong {
    color: var(--accent);
    text-shadow: 0 0 24px rgba(242, 78, 92, .2);
}

.ns-header-link,
.ns-header-button { border-radius: 12px; }

.ns-header-link:hover,
.ns-header-button:hover,
.ns-header-link.is-active,
.ns-header-button.is-active {
    border-color: rgba(242, 78, 92, .18);
    background: rgba(242, 78, 92, .09);
}

.ns-header-link.is-active,
.ns-header-button.is-active { color: #ff9c91; }

.ns-header-avatar {
    border-color: rgba(255, 255, 255, .17);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}

.ns-header-user-dropdown {
    border-color: rgba(220, 233, 244, .14);
    background: rgba(15, 23, 32, .98);
}

/* Contrôles communs : plus tactiles, sans imposer de nouvelle mise en page. */
:is(.btn, .button, .setup-link) { box-shadow: 0 8px 20px rgba(0, 0, 0, .16); }

:is(.btn-primary, .button-primary, .setup-link) {
    background-image: linear-gradient(135deg, var(--accent), #d7384d);
}

:is(.card, .side-card, .error-card) {
    border-color: rgba(210, 226, 240, .13);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.ns-page-action {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid rgba(210, 226, 240, .2);
    border-radius: 11px;
    color: var(--text);
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
    font-weight: 750;
}
.ns-page-action:hover { border-color: rgba(242, 78, 92, .4); background: rgba(242, 78, 92, .12); }
.ns-page-action:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

@media (hover: hover) {
    :is(.media-card, .card, .side-card):hover { border-color: rgba(242, 78, 92, .22); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
}