/* Contemporary application shell – shared by public, user and admin views. */
:root {
    --accent: #7c5cff;
    --accent-strong: #6844f4;
    --accent-cyan: #28d7c1;
    --bg-start: #090b16;
    --bg-end: #11152a;
    --bg-orb: rgba(124, 92, 255, 0.17);
    --panel-bg: rgba(20, 24, 47, 0.68);
    --panel-strong: rgba(24, 28, 54, 0.88);
    --panel-border: rgba(183, 190, 255, 0.13);
    --text-main: #f6f7ff;
    --text-soft: #b3bbd5;
    --text-faint: #7e88a8;
    --input-bg: rgba(7, 10, 27, 0.52);
    --input-border: rgba(187, 195, 255, 0.16);
    --input-focus-border: #a99bff;
    --input-focus-ring: rgba(124, 92, 255, 0.22);
    --button-bg: rgba(255, 255, 255, 0.045);
    --button-border: rgba(202, 207, 255, 0.14);
    --button-hover-bg: rgba(255, 255, 255, 0.10);
    --primary-btn-bg: linear-gradient(135deg, #8c6cff 0%, #6245ed 100%);
    --primary-btn-hover-bg: linear-gradient(135deg, #9c81ff 0%, #704ff5 100%);
    --primary-btn-text: #fff;
    --shadow: 0 24px 60px rgba(2, 4, 18, 0.42);
    --matrix-line: rgba(108, 255, 211, 0.065);
    --matrix-line-soft: rgba(139, 109, 255, 0.045);
    --matrix-motion: 30s;
}

/* Keep the preference themes, while preserving the same visual language. */
html[data-theme="graphite"] { --accent: #8c6cff; --accent-strong: #6b4df2; --accent-cyan: #3bd5f4; --bg-start: #090b16; --bg-end: #11152a; --bg-orb: rgba(140,108,255,.17); --panel-bg: rgba(20,24,47,.68); --panel-strong: rgba(24,28,54,.88); --panel-border: rgba(183,190,255,.13); --text-main: #f6f7ff; --text-soft: #b3bbd5; --text-faint: #7e88a8; --input-bg: rgba(7,10,27,.52); --input-border: rgba(187,195,255,.16); --input-focus-border: #a99bff; --input-focus-ring: rgba(124,92,255,.22); --button-bg: rgba(255,255,255,.045); --button-border: rgba(202,207,255,.14); --button-hover-bg: rgba(255,255,255,.1); --primary-btn-bg: linear-gradient(135deg,#8c6cff,#6245ed); --primary-btn-hover-bg: linear-gradient(135deg,#9c81ff,#704ff5); --primary-btn-text: #fff; }
html[data-theme="midnight"] { --accent: #4e9dff; --accent-strong: #2879ec; --accent-cyan: #3bd5f4; --bg-start: #071120; --bg-end: #0d1931; --bg-orb: rgba(78,157,255,.16); --panel-bg: rgba(16,34,61,.68); --panel-strong: rgba(14,30,54,.88); --panel-border: rgba(162,208,255,.14); --input-focus-border: #75b6ff; --input-focus-ring: rgba(78,157,255,.22); --primary-btn-bg: linear-gradient(135deg,#58a5ff,#2677ec); --primary-btn-hover-bg: linear-gradient(135deg,#70b3ff,#3383f2); }
html[data-theme="sage"] { --accent: #46d991; --accent-strong: #22ae70; --accent-cyan: #7ae8c4; --bg-start: #07140f; --bg-end: #10241c; --bg-orb: rgba(70,217,145,.14); --panel-bg: rgba(15,45,33,.68); --panel-strong: rgba(17,54,39,.88); --panel-border: rgba(153,244,196,.13); --input-focus-border: #68e7ab; --input-focus-ring: rgba(70,217,145,.2); --primary-btn-bg: linear-gradient(135deg,#4ddd97,#1cad6f); --primary-btn-hover-bg: linear-gradient(135deg,#63e5a8,#27b979); --primary-btn-text: #062215; }
html[data-theme="sand"] { --accent: #f3b84f; --accent-strong: #d78b22; --accent-cyan: #ffd98a; --bg-start: #171008; --bg-end: #281b0f; --bg-orb: rgba(243,184,79,.14); --panel-bg: rgba(55,37,18,.68); --panel-strong: rgba(62,42,22,.88); --panel-border: rgba(255,220,153,.13); --input-focus-border: #ffd27a; --input-focus-ring: rgba(243,184,79,.2); --primary-btn-bg: linear-gradient(135deg,#f4bd58,#d68920); --primary-btn-hover-bg: linear-gradient(135deg,#f7ca71,#e29b32); --primary-btn-text: #281600; }

body {
    background:
        radial-gradient(75rem 42rem at 5% -15%, rgba(124, 92, 255, 0.23), transparent 55%),
        radial-gradient(58rem 38rem at 105% 8%, rgba(40, 215, 193, 0.11), transparent 54%),
        linear-gradient(var(--matrix-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--matrix-line-soft) 1px, transparent 1px),
        linear-gradient(145deg, var(--bg-start) 0%, var(--bg-end) 100%);
    background-size: auto, auto, 42px 42px, 42px 42px, auto;
    background-position: center, center, 0 0, 0 0, center;
    animation: cyber-grid-drift var(--matrix-motion) linear infinite;
}

body[data-visual-intensity="vivid"] {
    --matrix-line: rgba(108, 255, 211, 0.115);
    --matrix-line-soft: rgba(139, 109, 255, 0.08);
}

body[data-visual-speed="flow"] { --matrix-motion: 16s; }

body[data-visual-effect="off"] {
    animation: none;
    background-image:
        radial-gradient(75rem 42rem at 5% -15%, rgba(124, 92, 255, 0.23), transparent 55%),
        radial-gradient(58rem 38rem at 105% 8%, rgba(40, 215, 193, 0.11), transparent 54%),
        linear-gradient(145deg, var(--bg-start) 0%, var(--bg-end) 100%);
    background-size: auto;
}

/* Öffentliche Vorlagen behalten ihr konfigurierbares Farbthema als Basis,
   erhalten darüber aber dasselbe animierte Raster wie der Rest der Anwendung. */
body.public-template-page,
body.redirect-template-page {
    background-image:
        radial-gradient(75rem 42rem at 5% -15%, rgba(124, 92, 255, 0.23), transparent 55%),
        radial-gradient(58rem 38rem at 105% 8%, rgba(40, 215, 193, 0.11), transparent 54%),
        linear-gradient(var(--matrix-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--matrix-line-soft) 1px, transparent 1px),
        var(--template-page-background, linear-gradient(145deg, var(--bg-start) 0%, var(--bg-end) 100%));
    background-size: auto, auto, 42px 42px, 42px 42px, auto;
    background-position: center, center, 0 0, 0 0, center;
}

@keyframes cyber-grid-drift {
    from { background-position: center, center, 0 0, 0 0, center; }
    to { background-position: center, center, 42px 84px, -42px 42px, center; }
}

body::before,
body::after { opacity: 0.7; }

.background-pointer-glow {
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(22rem circle at var(--pointer-glow-x, 50%) var(--pointer-glow-y, 50%), rgba(124, 92, 255, 0.16), rgba(40, 215, 193, 0.055) 28%, transparent 68%);
    transition: opacity 220ms ease;
    will-change: background-position, opacity;
}

.background-pointer-glow.is-visible { opacity: 1; }
body[data-visual-intensity="vivid"] .background-pointer-glow {
    background: radial-gradient(25rem circle at var(--pointer-glow-x, 50%) var(--pointer-glow-y, 50%), rgba(124, 92, 255, 0.24), rgba(40, 215, 193, 0.09) 30%, transparent 70%);
}
body[data-visual-effect="off"] .background-pointer-glow { display: none; }
body[data-pointer-effect="off"] .background-pointer-glow { display: none; }

.background-network {
    position: fixed;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.62;
}
body[data-visual-intensity="vivid"] .background-network { opacity: 0.9; }
body[data-visual-effect="off"] .background-network { display: none; }

.layout-shell { gap: clamp(1rem, 2vw, 1.75rem); padding: clamp(0.9rem, 2vw, 2rem); }

.topbar {
    padding: 0.6rem 0;
    align-items: center;
    position: relative;
    z-index: 20;
}

.topbar h1 { font-size: clamp(1.55rem, 2.4vw, 2.25rem); letter-spacing: -0.055em; }
.topbar-actions { justify-content: flex-end; }
.topbar-action-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .55rem; min-width: 0; }
.topbar-utility-actions { padding-left: .7rem; border-left: 1px solid var(--panel-border); }
.topbar-workflow-actions:empty { display: none; }
.workspace-breadcrumb { display: flex; align-items: center; gap: .38rem; margin-bottom: .28rem; color: var(--text-faint); font-size: .75rem; font-weight: 750; }
.workspace-breadcrumb a { color: var(--accent-cyan); text-decoration: none; }
.workspace-breadcrumb a:hover { text-decoration: underline; }
.workspace-subtitle { max-width: 68ch; margin: .38rem 0 0; color: var(--text-soft); font-size: .92rem; line-height: 1.5; }
.workspace-search-link { gap: .42rem; }
.workspace-search-link kbd { padding: .12rem .32rem; border: 1px solid var(--panel-border); border-radius: 5px; color: var(--text-faint); background: rgba(255,255,255,.04); font: inherit; font-size: .68rem; white-space: nowrap; }
.ui-density-toggle[aria-pressed="true"] { color: #062b2b; border-color: var(--accent-cyan); background: var(--accent-cyan); }
.notification-menu { position: relative; display: inline-flex; z-index: 30; }
.notification-link { position: relative; min-width: 44px; justify-content: center; }
.notification-badge { position: absolute; right: -0.32rem; top: -0.32rem; min-width: 1.2rem; height: 1.2rem; padding: 0 .28rem; border: 2px solid var(--bg-end); background: var(--accent-cyan); color: #071a22; box-shadow: 0 4px 12px rgba(40, 215, 193, .24); }
.notification-preview {
    position: absolute;
    top: calc(100% + .65rem);
    right: 0;
    width: min(23rem, calc(100vw - 2rem));
    padding: .85rem;
    border: 1px solid rgba(183, 190, 255, .22);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(27, 30, 58, .98), rgba(10, 13, 31, .98));
    box-shadow: 0 22px 55px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 255, 255, .06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-.35rem);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.notification-menu:hover .notification-preview,
.notification-menu:focus-within .notification-preview { opacity: 1; visibility: visible; transform: translateY(0); }
.notification-preview-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 0 .2rem .65rem; }
.notification-preview-head strong { color: var(--text-main); font-size: .9rem; }
.notification-preview-head span { color: var(--accent-cyan); font-size: .74rem; font-weight: 800; }
.notification-preview-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.notification-preview-item { display: flex; align-items: flex-start; justify-content: space-between; gap: .55rem; padding: .65rem .7rem; border-left: 3px solid var(--accent); border-radius: 10px; background: rgba(255, 255, 255, .045); }
.notification-preview-item-content { display: grid; min-width: 0; gap: .2rem; }
.notification-preview-item strong { color: var(--text-main); font-size: .82rem; line-height: 1.3; }
.notification-preview-item span, .notification-preview-empty { margin: 0; color: var(--text-soft); font-size: .76rem; line-height: 1.45; }
.notification-preview-mark-read { flex: 0 0 auto; margin: 0; }
.notification-preview-read-button { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-height: 1.8rem; padding: .25rem .4rem; color: var(--accent-cyan); border: 1px solid rgba(94,234,212,.25); border-radius: 7px; background: rgba(94,234,212,.08); font: inherit; font-size: .68rem; font-weight: 750; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.notification-preview-read-button:hover, .notification-preview-read-button:focus-visible { color: #062b2b; border-color: var(--accent-cyan); background: var(--accent-cyan); outline: none; }

/* Hilfefenster werden per JavaScript in den sichtbaren Viewport gelegt. */
.help-tooltip.is-viewport-positioned .help-bubble {
    position: fixed;
    left: var(--help-bubble-left, 1rem);
    top: var(--help-bubble-top, 1rem);
    right: auto;
    transform: translateY(-6px);
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.help-tooltip.is-viewport-positioned:hover .help-bubble,
.help-tooltip.is-viewport-positioned:focus-within .help-bubble,
.help-tooltip.is-viewport-positioned.is-open .help-bubble { transform: translateY(0); }
.notification-preview-warning { border-left-color: #f2bf66; }
.notification-preview-danger { border-left-color: #fa7f99; }
.notification-preview-success { border-left-color: var(--accent-cyan); }
.notification-preview-action { display: block; margin: .7rem .2rem 0; color: var(--accent-cyan); font-size: .76rem; font-weight: 750; }
.brand-mark { color: var(--text-main); letter-spacing: -0.06em; text-transform: none; font-weight: 800; }
.brand-mark::first-letter { color: #a99bff; }
.eyebrow { color: #a99bff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; }
.lead { font-size: 1.03rem; color: var(--text-soft); }

.card, .ui-card {
    border-radius: 24px;
    border-color: var(--panel-border);
    background: linear-gradient(145deg, rgba(31, 35, 66, 0.82), rgba(14, 17, 39, 0.72));
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.055);
}

.card { animation: card-enter .45s ease both; }
.card:nth-of-type(2) { animation-delay: .04s; }
.card:nth-of-type(3) { animation-delay: .08s; }

@keyframes card-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.public-card {
    width: min(860px, 100%);
    padding: clamp(1.35rem, 4vw, 3.25rem);
    position: relative;
    overflow: hidden;
}

.public-card::before {
    content: "";
    position: absolute;
    width: 26rem; height: 26rem;
    right: -13rem; top: -15rem;
    background: radial-gradient(circle, rgba(124,92,255,.28), transparent 65%);
    pointer-events: none;
}

.public-card > * { position: relative; }
.public-card h1 { max-width: 15ch; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.065em; }
.public-card .lead { max-width: 58ch; }
.public-card .stacked-form { margin-top: 1.8rem; gap: 1.15rem; }

/* Datenschutzerklärung: Der rechtliche Inhalt darf auf großen Displays die
   vorhandene Breite nutzen, bleibt dank einer gut lesbaren Textspalte aber
   ruhig. Auf kleineren Geräten reduzieren sich Abstände und Tabellen werden
   weiterhin zu lesbaren Karten. */
.privacy-page .center-stage {
    width: min(1320px, 100%);
}

.privacy-policy-card {
    width: min(1280px, 100%);
    padding: clamp(1.5rem, 3.5vw, 4rem);
}

.privacy-policy-card h1 {
    max-width: none;
}

.privacy-policy-card > .eyebrow,
.privacy-policy-card > h1,
.privacy-policy-card > .muted-text {
    max-width: 78ch;
}

.privacy-policy-card .legal-text {
    display: grid;
    gap: 1.05rem;
    margin-top: clamp(1.75rem, 3vw, 3rem);
    text-align: left;
}

.privacy-policy-card .legal-text > h2 {
    max-width: 78ch;
    margin: 1.4rem 0 -.3rem;
    font-size: clamp(1.18rem, 1.8vw, 1.5rem);
    line-height: 1.3;
}

.privacy-policy-card .legal-text > h2:first-child {
    margin-top: 0;
}

.privacy-policy-card .legal-text > p {
    max-width: 82ch;
    margin: 0;
    line-height: 1.72;
}

.privacy-policy-card .legal-text .table-wrap {
    width: 100%;
    margin: .2rem 0 .8rem;
}

.privacy-policy-card .legal-text .data-table {
    width: 100%;
}

.rotator-target-list {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
}

.rotator-public-intro {
    margin-bottom: .5rem;
    color: var(--text-soft);
    font-size: .9rem;
    line-height: 1.55;
}

.rotator-target-row {
    min-width: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    background: rgba(4, 7, 24, .26);
}

.rotator-target-row legend {
    padding: 0 .35rem;
    color: var(--text-soft);
    font-size: .88rem;
    font-weight: 700;
}
/* Die Startseite ist der zentrale Kürz-Workflow: Das Formular erhält eine
   ruhige, mittige Lesebreite, ohne auf kleinen Displays Platz zu verlieren. */
.public-homepage .public-card .stacked-form {
    width: min(100%, 720px);
    margin-inline: auto;
}
.public-homepage .public-form-grid {
    width: min(100%, 680px);
    margin-inline: auto;
    align-items: end;
}
.public-homepage .homepage-target-field {
    width: min(100%, 620px);
    margin-inline: auto;
}
.public-homepage .homepage-target-field input {
    min-height: 58px;
    font-size: 1rem;
}
.public-homepage .public-form-grid > .field:not(.homepage-target-field) {
    width: min(100%, 360px);
    margin-inline: auto;
}

/* Startseite: ein kompakter, klar priorisierter Erstellungs-Workflow. */
.public-homepage .compact-topbar.topbar-centered { width: min(1120px, 100%); padding: .55rem 0 1.15rem; }
.topbar-centered .homepage-account-actions { display: inline-flex !important; width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; flex-flow: row nowrap; justify-self: end; }
.homepage-account-actions > .mini-button { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; white-space: nowrap; }
.public-homepage .public-card { width: min(900px, 100%); justify-self: center; margin-inline: auto; padding: clamp(1.5rem, 3.1vw, 2.85rem); border-radius: 28px; text-align: center; }
.public-homepage .public-card h1 { max-width: none; font-size: clamp(2.15rem, 4vw, 3.3rem); }
.public-homepage .public-card .template-logo { justify-content: center; margin-inline: auto; }
.public-homepage .public-card .redirect-status-icon { margin-inline: auto; }
.public-homepage .public-card .lead { margin-inline: auto; text-align: center; }
.public-homepage .public-card .eyebrow,
.public-homepage .public-card .lead,
.public-homepage .public-card .muted-text,
.public-homepage .public-card .field > span,
.public-homepage .public-card .field small,
.public-homepage .public-card .notice,
.public-homepage .public-card .link-target-checker,
.public-homepage .public-card .form-disclosure,
.public-homepage .public-card .trust-row { text-align: center; }
.public-homepage .public-card .field { justify-items: center; }
.public-homepage .public-card input,
.public-homepage .public-card textarea,
.public-homepage .public-card select { text-align: center; }
.public-homepage .public-card .advanced-settings-tabs,
.public-homepage .public-card .disclosure-content { text-align: left; }
.public-homepage .public-card .stacked-form { margin-top: 1.35rem; gap: .9rem; }
.public-homepage .public-form-grid { grid-template-columns: minmax(0, 1fr) minmax(210px, .52fr); width: min(100%, 720px); gap: .85rem; }
.public-homepage .homepage-target-field { grid-column: auto; width: auto; margin-inline: 0; }
.public-homepage .public-form-grid > .field:not(.homepage-target-field) { width: auto; margin-inline: 0; }
.public-homepage .homepage-target-field input, .public-homepage .public-form-grid > .field:not(.homepage-target-field) input { min-height: 54px; }
.public-homepage .homepage-target-field input { font-size: 1rem; }
.public-homepage .link-target-checker { width: min(100%, 720px); margin-inline: auto; padding: .75rem .9rem; border-radius: 15px; }
.public-homepage .link-target-checker-head { flex-wrap: nowrap; gap: 1rem; }
.public-homepage .link-target-checker-head p { max-width: 48ch; font-size: .78rem; }
.public-homepage .form-disclosure { width: min(100%, 720px); margin-inline: auto; }
.public-homepage .form-disclosure summary { padding: .9rem 1rem; }
.public-homepage .primary-button { width: min(100%, 720px); min-height: 52px; margin-inline: auto; background: var(--primary-btn-bg); color: var(--primary-btn-text); border-color: transparent; }
.public-homepage .trust-row { justify-content: center; margin-top: .2rem; }

/* Angemeldete erhalten oben eine kompakte, zusammengehörige Navigation.
   Der Markenname bleibt exakt mittig, die Aktionen bleiben dezent rechts. */
.homepage-account-actions {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .2rem;
    border: 1px solid rgba(183, 190, 255, .14);
    border-radius: 999px;
    background: rgba(9, 12, 30, .42);
    box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}
.homepage-account-actions .mini-button {
    min-height: 36px;
    padding: .45rem .72rem;
    border-color: transparent;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    font-size: .78rem;
}
.homepage-account-actions .mini-button:first-child {
    background: rgba(124, 92, 255, .18);
    color: #f7f5ff;
}
.homepage-account-actions .mini-button:hover,
.homepage-account-actions .mini-button:focus-visible {
    border-color: rgba(183, 190, 255, .18);
    background: rgba(255, 255, 255, .075);
}

.link-target-checker { display: grid; gap: .75rem; padding: .9rem 1rem; border: 1px solid rgba(166, 177, 255, .17); border-radius: 17px; background: rgba(4, 8, 25, .28); }
.link-target-checker-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; }
.link-target-checker-head strong { color: var(--text-main); font-size: .9rem; }
.link-target-checker-head p { margin: .18rem 0 0; color: var(--text-soft); font-size: .82rem; line-height: 1.45; }
.link-target-checker-result { padding: .8rem .9rem; border-left: 3px solid var(--accent-cyan); border-radius: 10px; background: rgba(70, 217, 145, .08); color: var(--text-soft); }
.link-target-checker-result strong { color: var(--text-main); }.link-target-checker-result p { margin: .3rem 0; line-height: 1.45; }
.link-target-checker-result.is-warning { border-left-color: #f2bf66; background: rgba(242, 191, 102, .09); }.link-target-checker-result.is-blocked, .link-target-checker-result.is-failed { border-left-color: #fa7f99; background: rgba(250, 127, 153, .09); }.link-target-checker-result.is-loading { border-left-color: var(--accent); background: rgba(124, 92, 255, .09); }
.link-target-checker-list, .link-target-checker-chain { margin: .55rem 0 0; padding-left: 1.15rem; font-size: .82rem; line-height: 1.55; }.link-target-checker-label { margin-top: .75rem !important; color: var(--text-main); font-size: .8rem; font-weight: 750; }

.demo-mode-banner { display: flex; align-items: flex-start; gap: .7rem; margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid rgba(242, 191, 102, .38); border-radius: 15px; background: linear-gradient(115deg, rgba(242, 191, 102, .16), rgba(124, 92, 255, .12)); color: #fff1ca; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.demo-mode-banner strong { flex: 0 0 auto; color: #ffe09b; }.demo-mode-banner span { line-height: 1.45; }
.demo-sample-links { display: grid; gap: .7rem; margin: .9rem 0 1.2rem; }.demo-sample-link { border-color: rgba(242, 191, 102, .24); background: rgba(242, 191, 102, .055); }
.demo-mode-settings { border-color: rgba(242, 191, 102, .28); background: linear-gradient(135deg, rgba(242, 191, 102, .07), rgba(124, 92, 255, .05)); }

.field span { color: #d7dcf1; font-size: 0.87rem; font-weight: 650; }
.field input, .field select, .field textarea, .toolbar-form input, .toolbar-form select, .inline-form select {
    min-height: 50px;
    border-radius: 15px;
    background: rgba(5, 8, 24, 0.52);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(199, 204, 255, 0.32); }
.field input:focus, .field select:focus, .field textarea:focus, .toolbar-form input:focus, .toolbar-form select:focus, .inline-form select:focus {
    background: rgba(6, 8, 26, 0.8);
    box-shadow: 0 0 0 4px var(--input-focus-ring), 0 10px 24px rgba(0,0,0,.15);
}

/* Gemeinsame Arbeitsoberfläche: sichtbare Hierarchie, bequeme Formulare und
   Inhalte, die sich ohne gequetschte Zeilen an jede verfügbare Breite anpassen. */
.admin-main > .card,
.user-main > .card {
    min-width: 0;
}

.admin-main > .card > :first-child,
.user-main > .card > :first-child {
    margin-top: 0;
}

.toolbar-form,
.inline-form,
.button-cloud {
    row-gap: .7rem;
}

.toolbar-form input,
.toolbar-form select,
.inline-form input,
.inline-form select {
    min-height: 46px;
}

.form-disclosure {
    overflow: clip;
}

.form-disclosure > .disclosure-content {
    padding: clamp(.9rem, 2vw, 1.35rem);
}

.table-wrap,
.responsive-table {
    border-radius: 16px;
}

@media (min-width: 761px) {
    .data-table thead th,
    .responsive-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--panel-bg);
    }
}

.data-table tbody tr,
.responsive-table tbody tr {
    transition: background .16s ease, box-shadow .16s ease;
}

.data-table tbody tr:hover,
.responsive-table tbody tr:hover {
    box-shadow: inset 3px 0 0 var(--accent);
}

.empty-box.ui-empty-state {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    min-height: 150px;
    padding: clamp(1.25rem, 3vw, 2rem);
    text-align: left;
}

.ui-empty-state-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border: 1px solid rgba(141,247,214,.25);
    border-radius: 14px;
    color: var(--accent-cyan);
    background: rgba(94,234,212,.08);
    font-size: 1.5rem;
}

.ui-empty-state strong { display: block; margin-bottom: .32rem; color: var(--text-main); }
.ui-empty-state p { margin: 0 0 .9rem; color: var(--text-soft); line-height: 1.55; }
.ui-empty-state .mini-button { display: inline-flex; }

/* Einheitliche Symbolsprache in der Navigation: kompakt, aber nie alleinige
   Bedeutungsträgerin, damit die Beschriftungen stets verständlich bleiben. */
.section-nav a:not(.nav-group-direct-link) .nav-item-icon,
.nav-group-link .nav-item-icon {
    display: inline-grid;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    place-items: center;
    color: var(--accent-cyan);
    font-size: .95rem;
    font-weight: 800;
}

.section-nav a:not(.nav-group-direct-link) > span:last-child,
.nav-group-label { min-width: 0; flex: 1 1 auto; }
.section-nav a:not(.nav-group-direct-link).is-child .nav-item-icon,
.nav-group-link.is-child .nav-item-icon { display: none; }

.admin-attention-card { border-color: rgba(242, 191, 102, .28); background: linear-gradient(145deg, rgba(242,191,102,.09), rgba(124,92,255,.06)); }
.admin-attention-list { display: grid; gap: .65rem; margin-top: 1rem; }
.admin-attention-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .9rem; padding: .9rem 1rem; border: 1px solid var(--panel-border); border-left: 3px solid var(--accent-cyan); border-radius: 14px; color: var(--text-main); background: rgba(4, 7, 24, .22); text-decoration: none; }
.admin-attention-item:hover { border-color: rgba(205,210,255,.32); transform: translateY(-1px); text-decoration: none; }
.admin-attention-item.is-danger { border-left-color: #fa7f99; }
.admin-attention-item.is-warning { border-left-color: #f2bf66; }
.admin-attention-item strong { font-size: .94rem; }.admin-attention-item span { color: var(--text-soft); font-size: .84rem; line-height: 1.45; }.admin-attention-item b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent-cyan); }

.filter-chip-row { display: flex; flex-wrap: wrap; gap: .42rem; margin: .75rem 0 0; }
.filter-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; padding: .3rem .55rem; border: 1px solid rgba(94,234,212,.25); border-radius: 999px; color: var(--accent-cyan); background: rgba(94,234,212,.08); font: inherit; font-size: .77rem; cursor: pointer; }
.filter-chip:hover { background: rgba(94,234,212,.16); }

.page-jump-nav { display: flex; flex-wrap: wrap; gap: .45rem; padding: .7rem .85rem; border: 1px solid var(--panel-border); border-radius: 15px; background: rgba(6,8,26,.35); }
.page-jump-nav strong { align-self: center; margin-right: .2rem; color: var(--text-soft); font-size: .78rem; }.page-jump-nav a { padding: .28rem .52rem; border-radius: 999px; color: var(--text-soft); font-size: .78rem; text-decoration: none; }.page-jump-nav a:hover { color: var(--text-main); background: var(--button-hover-bg); }

body[data-ui-density="compact"] .card { padding: clamp(.9rem, 1.6vw, 1.35rem); border-radius: 18px; }
body[data-ui-density="compact"] .admin-main,
body[data-ui-density="compact"] .admin-layout { gap: .9rem; }
body[data-ui-density="compact"] .field input,
body[data-ui-density="compact"] .field select,
body[data-ui-density="compact"] .field textarea { min-height: 42px; }
body[data-ui-density="compact"] .data-table th,
body[data-ui-density="compact"] .data-table td { padding: .6rem .55rem; }

.metric-trend { display: block; margin-top: .35rem; font-size: .72rem; font-weight: 700; line-height: 1.35; }.metric-trend.is-up { color: #62e8b1; }.metric-trend.is-down { color: #f2bf66; }.metric-trend.is-neutral { color: var(--text-faint); }

.ghost-link, .primary-button, .mini-button {
    min-height: 44px;
    border-radius: 14px;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.primary-button {
    border: 0;
    box-shadow: 0 10px 24px rgba(99, 70, 239, 0.30);
    position: relative;
    overflow: hidden;
}
.primary-button::after {
    content: "";
    position: absolute;
    inset: -100% auto -100% -45%;
    width: 28%;
    transform: rotate(18deg);
    background: rgba(255,255,255,.24);
    transition: transform .45s ease;
}
.primary-button:hover { box-shadow: 0 14px 28px rgba(99, 70, 239, 0.42); }
.primary-button:hover::after { transform: translateX(520%) rotate(18deg); }
.ghost-link:hover, .mini-button:hover { border-color: rgba(205, 210, 255, 0.28); }

/* Inhalte erhalten immer genügend Raum: Texte umbrechen lesbar und Aktionen
   wechseln bei Bedarf in die nächste Zeile, statt eingeengt zu werden. */
.layout-shell > *,
.center-stage,
.page-grid,
.admin-layout,
.admin-main,
.auth-columns,
.settings-grid,
.public-form-grid,
.pane-grid,
.visual-choice-grid,
.qr-studio-layout {
    min-width: 0;
}

.card,
.ui-card,
.stat-card,
.notice,
.empty-box,
.notification-card,
.admin-alert-card {
    overflow-wrap: anywhere;
}

.card :where(h1, h2, h3, p, small, strong, span, li),
.ui-card :where(h1, h2, h3, p, small, strong, span, li),
.notice :where(p, small, span),
.empty-box :where(p, small, span) {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

.topbar-actions,
.button-cloud,
.ui-actions {
    align-items: stretch;
}

.topbar-actions > :where(a, button, form),
.button-cloud > :where(a, button, form),
.ui-actions > :where(a, button, form) {
    min-width: min(100%, 9rem);
}

.topbar-actions > form,
.button-cloud > form,
.ui-actions > form {
    display: flex;
}

.topbar-actions > form > :where(button, a),
.button-cloud > form > :where(button, a),
.ui-actions > form > :where(button, a) {
    width: 100%;
}

.ghost-link,
.primary-button,
.mini-button,
.action-menu summary,
.ui-action-menu summary {
    white-space: normal;
    line-height: 1.25;
}

.table-actions-cell {
    white-space: normal;
}

.advanced-settings-tabs .tab-btn {
    min-width: 0;
}

.tab-btn-text {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.2;
    text-align: center;
}

.visual-preference-card { position: relative; overflow: hidden; }
.visual-preference-card::after {
    content: "01 10 01";
    position: absolute;
    right: 1.4rem;
    top: .85rem;
    color: rgba(104, 238, 192, .16);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    letter-spacing: .18em;
    pointer-events: none;
}
.visual-effect-toggle {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    background: rgba(4, 9, 27, .3);
    cursor: pointer;
}
.visual-effect-toggle input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--accent); }
.visual-effect-toggle strong, .visual-effect-toggle small { display: block; }
.visual-effect-toggle small { color: var(--text-soft); margin-top: .15rem; }
.visual-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.visual-choice-grid fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.visual-choice-grid legend { margin-bottom: .5rem; color: var(--text-soft); font-size: .86rem; font-weight: 700; }
.compact-choice-grid { grid-template-columns: 1fr; gap: .5rem; }
.compact-choice-grid .theme-choice-card { min-height: 0; padding: .8rem .9rem; }

.form-disclosure, .disclosure-card {
    border-radius: 18px;
    background: rgba(5, 8, 25, 0.3);
}
.form-disclosure summary, .disclosure-card summary { font-weight: 650; }
.advanced-settings-tabs { border-radius: 15px; background: rgba(3, 6, 20, .42); }
.advanced-settings-tabs .tab-btn.active { background: rgba(139, 109, 255, .16); color: #f6f4ff; box-shadow: none; }

.admin-layout { gap: clamp(1rem, 2vw, 1.75rem); }
.admin-sidebar {
    border-radius: 22px;
    background: rgba(14, 17, 39, .64);
    border: 1px solid var(--panel-border);
    box-shadow: inset 0 1px rgba(255,255,255,.045);
}
.section-nav { gap: .4rem; }
.nav-section-label {
    margin: 1rem .65rem .3rem;
    color: var(--text-faint);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.nav-section-label:first-child { margin-top: .15rem; }
.section-nav a:not(.nav-group-direct-link), .nav-group-link {
    border: 0;
    background: transparent;
    min-height: 42px;
    border-radius: 12px;
}
.section-nav a:not(.nav-group-direct-link):hover, .nav-group-link:hover { background: rgba(255,255,255,.07); }
.section-nav a:not(.nav-group-direct-link).is-active, .nav-group-link.is-active {
    background: linear-gradient(100deg, rgba(124,92,255,.28), rgba(124,92,255,.08));
    border-color: transparent;
    box-shadow: inset 3px 0 #a99bff;
}
.nav-group-children { border-left-color: rgba(169, 155, 255, .26); }
.account-quick-nav { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.account-quick-nav a { padding: .42rem .75rem; border-radius: 999px; background: rgba(255,255,255,.055); color: var(--text-soft); font-weight: 700; }
.account-quick-nav a:hover { color: var(--text-main); text-decoration: none; background: rgba(169,155,255,.18); }
.mobile-nav-scrim { display: none; }

/* Link-in-Bio editor and live device preview. */
.bio-theme-picker { margin: 0; padding: 0; border: 0; }
.bio-theme-picker legend { color: #d7dcf1; font-size: .87rem; font-weight: 650; }
.bio-theme-picker .muted-text { margin: .35rem 0 .75rem; font-size: .82rem; }
.bio-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.bio-theme-card { position: relative; display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .6rem; align-items: center; padding: .65rem; border: 1px solid var(--panel-border); border-radius: 15px; background: rgba(6, 9, 28, .28); cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.bio-theme-card:hover { transform: translateY(-1px); border-color: rgba(169,155,255,.42); }
.bio-theme-card.is-selected { border-color: var(--accent-cyan); background: rgba(40,215,193,.09); box-shadow: inset 0 0 0 1px rgba(40,215,193,.16); }
.bio-theme-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bio-theme-card strong, .bio-theme-card small { display: block; }
.bio-theme-card strong { color: var(--text-main); font-size: .78rem; }
.bio-theme-card small { margin-top: .14rem; color: var(--text-faint); font-size: .68rem; line-height: 1.3; }
.bio-theme-swatch { width: 2.3rem; aspect-ratio: 1; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: radial-gradient(circle at 74% 20%, var(--bio-swatch-accent), transparent 30%), linear-gradient(145deg, var(--bio-swatch-start), var(--bio-swatch-end)); box-shadow: inset 0 1px rgba(255,255,255,.16); }
.bio-live-preview-card { align-self: start; overflow: hidden; }
.bio-preview-device { width: min(100%, 23rem); margin: 1.1rem auto 1rem; padding: .55rem; border: 1px solid rgba(196,201,255,.23); border-radius: 29px; background: #080a15; box-shadow: 0 18px 42px rgba(0,0,0,.28); }
.bio-preview-screen { min-height: 29rem; display: flex; flex-direction: column; align-items: center; padding: 2.25rem 1.1rem 1.25rem; border-radius: 23px; overflow: hidden; background: radial-gradient(15rem circle at 84% 0%, var(--bio-preview-orb), transparent 57%), linear-gradient(160deg, var(--bio-preview-start), var(--bio-preview-end)); color: var(--bio-preview-text); text-align: center; }
.bio-preview-avatar { width: 4.65rem; height: 4.65rem; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--bio-preview-border); border-radius: 50%; background: var(--bio-preview-panel); color: var(--bio-preview-soft); font-size: 1.7rem; font-weight: 800; box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.bio-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bio-preview-title { margin-top: .85rem; color: var(--bio-preview-text); font-size: 1.08rem; line-height: 1.25; }
.bio-preview-description { margin: .45rem 0 1.3rem; color: var(--bio-preview-soft); font-size: .76rem; line-height: 1.45; }
.bio-preview-links { width: 100%; display: grid; gap: .55rem; }
.bio-preview-links span { display: block; padding: .78rem .7rem; border: 1px solid var(--bio-preview-border); border-radius: 13px; background: var(--bio-preview-panel); color: var(--bio-preview-text); font-size: .8rem; font-weight: 750; box-shadow: 0 5px 14px rgba(0,0,0,.08); }
.bio-preview-links span:first-child { border-color: var(--bio-preview-button); background: var(--bio-preview-button); color: var(--bio-preview-button-text); }

/* Mail template editor – static, email-client-safe live preview. */
.mail-template-live-preview { margin-top: 1rem; border: 1px solid var(--panel-border); border-radius: 20px; overflow: hidden; background: rgba(5, 8, 24, .28); }
.mail-template-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--panel-border); }
.mail-template-preview-head > span { color: var(--text-main); font-size: .88rem; font-weight: 800; }
.mail-template-preview-head small { color: var(--text-faint); font-size: .73rem; }
.mail-template-preview-shell { padding: 1.15rem; background: radial-gradient(circle at 86% 4%, rgba(124,92,255,.26), transparent 28%), linear-gradient(rgba(145,132,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(145,132,255,.045) 1px, transparent 1px), #090a14; background-size: auto, 24px 24px, 24px 24px; }
.mail-template-preview-brand { width: fit-content; margin: 0 auto .7rem; padding: .35rem .65rem; border: 1px solid #303252; border-radius: 999px; background: #17182a; color: #f1efff; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mail-template-preview-brand span { color: #66e6d5; margin-right: .3rem; }
.mail-template-preview-card { overflow: hidden; border: 1px solid #303252; border-radius: 15px; background: #141526; box-shadow: 0 12px 30px rgba(0,0,0,.26); }
.mail-template-preview-accent { height: 3px; background: linear-gradient(90deg, #39d6c2, #7c5cff 48%, #b49dff); }
.mail-template-preview-content { padding: 1rem; }
.mail-template-preview-eyebrow { margin: 0 0 .45rem; color: #66e6d5; font-size: .61rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mail-template-preview-content h3 { margin: 0 0 .45rem; color: #f7f7ff; font-size: 1rem; line-height: 1.25; }
.mail-template-preview-intro { margin: 0 0 .7rem; color: #bfc3db; font-size: .72rem; line-height: 1.5; }
.mail-template-preview-body { color: #d5d8ec; font-size: .73rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-template-preview-button { display: inline-block; margin-top: .9rem; padding: .54rem .7rem; border-radius: 9px; background: linear-gradient(135deg, #a994ff, #7158f5); color: #fff; font-size: .7rem; font-weight: 800; }
.mail-template-preview-button.is-empty, .mail-template-preview-eyebrow.is-empty, .mail-template-preview-intro.is-empty, .mail-template-preview-body.is-empty { display: none; }
.mail-template-preview-footer { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid #303252; color: #a7abc7; font-size: .62rem; line-height: 1.5; }
.mail-template-preview-footer span { color: #73799c; }

/* Per-link redirect preview shown while editing a short link. */
.link-preview-live-preview { overflow: hidden; margin-top: .2rem; border: 1px solid rgba(145, 132, 255, .25); border-radius: 20px; background: rgba(6, 9, 28, .28); }
.link-preview-live-preview-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 1rem; border-bottom: 1px solid var(--panel-border); }
.link-preview-live-preview-head .eyebrow { margin: 0 0 .15rem; }
.link-preview-live-preview-head h3 { margin: 0; font-size: .96rem; }
.link-preview-live-preview-shell { padding: 1rem; background: radial-gradient(20rem circle at 75% 0%, rgba(124,92,255,.17), transparent 56%), linear-gradient(rgba(145,132,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(145,132,255,.045) 1px, transparent 1px), #090a14; background-size: auto, 22px 22px, 22px 22px; }
.link-preview-live-card { margin: 0 auto; }
.link-preview-live-card h3 { margin: .45rem 0 .65rem; font-size: clamp(1.15rem, 3vw, 1.55rem); }
.link-preview-live-card .primary-button { pointer-events: none; }
.auth-columns > .link-preview-live-preview { grid-column: 1 / -1; }
.link-edit-sections { display: grid; gap: .75rem; margin-top: 1rem; }
.link-edit-sections .form-disclosure { margin-top: 0; }
.link-edit-sections .form-disclosure > summary { padding: .95rem 1rem; color: var(--text-main); font-weight: 800; }
.link-edit-sections .form-disclosure[open] > summary { border-bottom: 1px solid var(--panel-border); background: rgba(139,109,255,.08); }

/* Maintenance page live preview. */
.maintenance-live-preview { margin-top: 1rem; overflow: hidden; border: 1px solid var(--panel-border); border-radius: 20px; background: rgba(5, 8, 24, .3); }
.maintenance-live-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--panel-border); }
.maintenance-live-preview-head .eyebrow { margin: 0 0 .15rem; }
.maintenance-live-preview-head h3 { margin: 0; font-size: 1rem; }
.status-chip { padding: .32rem .55rem; border: 1px solid rgba(110, 244, 205, .24); border-radius: 999px; background: rgba(63, 216, 179, .09); color: #a8ffe2; font-size: .7rem; font-weight: 750; white-space: nowrap; }
.maintenance-preview-shell { padding: 1rem; background: radial-gradient(20rem circle at 78% 0%, rgba(59, 220, 180, .13), transparent 58%), linear-gradient(rgba(99, 239, 203, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 239, 203, .04) 1px, transparent 1px), #080b17; background-size: auto, 22px 22px, 22px 22px; }
.maintenance-preview-topbar { width: min(100%, 38rem); margin: 0 auto .75rem; padding: .55rem .8rem; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(15, 20, 35, .72); text-align: center; color: #e9f5f8; font-size: .78rem; font-weight: 800; }
.maintenance-preview-card { width: min(100%, 38rem); display: grid; justify-items: center; margin: 0 auto; padding: clamp(1.2rem, 4vw, 2.25rem); border: 1px solid rgba(132, 245, 208, .2); border-radius: 20px; background: rgba(18, 28, 44, .85); box-shadow: 0 20px 40px rgba(0,0,0,.25); text-align: center; }
.maintenance-preview-card h2 { margin: .15rem 0 .8rem; color: #f2faff; font-size: clamp(1.2rem, 3vw, 1.7rem); line-height: 1.2; }
.maintenance-preview-card .lead { margin: 0; color: #c4d3dc; white-space: pre-wrap; overflow-wrap: anywhere; }
.maintenance-preview-card .maintenance-countdown-card { margin-top: 1rem; }
.maintenance-preview-login { margin-top: 1rem; color: #92f4d4; font-size: .82rem; font-weight: 700; }

/* QR code studio. */
.qr-studio-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(15rem, .75fr); gap: 1.25rem; align-items: center; margin-top: 1rem; }
.qr-studio-preview { display: grid; justify-items: center; gap: .65rem; padding: 1rem; border: 1px solid rgba(169,155,255,.28); border-radius: 22px; background: radial-gradient(circle at 50% 0, rgba(40,215,193,.14), transparent 52%), rgba(5,8,24,.36); text-align: center; }
.qr-studio-image { display: block; width: min(100%, 19rem); aspect-ratio: 1; padding: .5rem; border-radius: 12px; background: #fff; box-shadow: 0 14px 32px rgba(0,0,0,.28); }
.qr-frame-label { min-height: 1rem; color: #c9c1ff; font-size: .73rem; font-weight: 850; letter-spacing: .16em; }
.qr-frame-caption { color: var(--text-faint); font-size: .72rem; }
.qr-frame-none .qr-frame-label, .qr-frame-none .qr-frame-caption { display: none; }
.qr-frame-none { padding: .25rem; border-color: transparent; background: transparent; }
.qr-frame-scan { box-shadow: inset 0 0 0 1px rgba(40,215,193,.12), 0 14px 34px rgba(0,0,0,.14); }
.qr-frame-brand { border-color: rgba(169,155,255,.48); background: linear-gradient(145deg, rgba(124,92,255,.2), rgba(7,11,29,.58)); }
.qr-frame-brand .qr-frame-label { color: #f1efff; letter-spacing: .08em; text-transform: uppercase; }
.qr-downloads { justify-content: center; }

.stat-card, .stat-box { border-radius: 18px; border-color: var(--panel-border); background: rgba(6, 9, 28, .3); }
.stat-card { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.stat-card:hover { transform: translateY(-3px); border-color: rgba(169,155,255,.36); background: rgba(38, 34, 70, .44); }
.notice, .empty-box { border-radius: 16px; }

.site-footer { color: var(--text-faint); }
.site-footer a { color: var(--text-soft); }

.skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 6000;
    padding: .7rem 1rem;
    border-radius: 12px;
    background: var(--text-main);
    color: #121326;
    font-weight: 800;
    box-shadow: var(--shadow);
    transition: top .18s ease;
}
.skip-link:focus { top: 1rem; text-decoration: none; }

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid #a99bff;
    outline-offset: 3px;
}

.nav-toggle { display: none; }
.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1rem;
    margin-top: .15rem;
    color: var(--text-faint);
    font-size: .78rem;
    font-weight: 650;
}
.trust-row span { display: inline-flex; align-items: center; gap: .25rem; }

.toast-region {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 5500;
    display: grid;
    gap: .65rem;
    width: min(360px, calc(100vw - 2rem));
}
.toast {
    padding: .9rem 1rem;
    border: 1px solid rgba(152, 255, 204, .3);
    border-radius: 16px;
    background: rgba(12, 46, 37, .94);
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
    color: #eafff5;
    font-size: .9rem;
    font-weight: 650;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
}
.toast-error { border-color: rgba(255, 155, 155, .35); background: rgba(70, 24, 35, .94); color: #fff0f2; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

.cookie-consent {
    position: fixed;
    z-index: 7000;
    inset: auto 1.25rem 1.25rem auto;
    width: min(590px, calc(100vw - 2.5rem));
    color: var(--text-main);
}
.cookie-consent-card {
    padding: 1.25rem;
    border: 1px solid rgba(113, 244, 203, .3);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(12, 25, 40, .97), rgba(15, 17, 35, .96));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .09);
    backdrop-filter: blur(18px);
}
.cookie-consent-card h2 { margin: .15rem 0 .65rem; font-size: clamp(1.15rem, 3vw, 1.45rem); }
.cookie-consent-card > p { margin: .55rem 0; color: var(--text-soft); line-height: 1.55; }
.cookie-consent-summary { display: grid; gap: .45rem; margin: .85rem 0; }
.cookie-consent-summary p { display: grid; gap: .12rem; margin: 0; padding: .65rem .75rem; border-left: 2px solid rgba(121, 247, 208, .6); border-radius: 0 12px 12px 0; background: rgba(255,255,255,.035); color: var(--text-soft); font-size: .88rem; line-height: 1.45; }
.cookie-consent-summary strong { color: var(--text-main); }
.cookie-consent-no-tracking { color: #aaf8da !important; font-weight: 650; }
.cookie-consent-storage, .cookie-consent-details-intro { font-size: .82rem; }
.cookie-consent-details { display: grid; gap: .65rem; margin: 1rem 0; }
.cookie-consent-option { display: flex; align-items: flex-start; gap: .65rem; padding: .75rem; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.035); cursor: pointer; }
.cookie-consent-option input { margin-top: .22rem; accent-color: #78f7d0; }
.cookie-consent-option span { display: grid; gap: .2rem; }
.cookie-consent-option small { color: var(--text-soft); line-height: 1.4; }
.cookie-consent-links a { color: #8df7d6; font-weight: 700; }
.cookie-consent-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.cookie-consent-actions > button { flex: 1 1 150px; justify-content: center; min-height: 44px; }
.cookie-consent-actions .mini-button,
.cookie-consent-actions .primary-button { border: 1px solid rgba(135, 246, 208, .28); background: rgba(255,255,255,.06); color: var(--text-main); box-shadow: none; }
.cookie-consent-actions .mini-button:hover,
.cookie-consent-actions .primary-button:hover { background: rgba(104, 240, 199, .14); color: #effff9; transform: none; }
.cookie-settings-trigger { position: fixed; z-index: 5400; left: 1rem; bottom: 1rem; padding: .58rem .8rem; border: 1px solid rgba(135, 246, 208, .32); border-radius: 999px; background: rgba(10, 24, 38, .92); color: #eafff5; box-shadow: 0 10px 30px rgba(0,0,0,.3); font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; }
.cookie-settings-trigger:hover, .cookie-settings-trigger:focus-visible { background: rgba(27, 71, 78, .95); outline: 2px solid #8df7d6; outline-offset: 2px; }
.site-footer .footer-cookie-settings { order: 4; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; }
.site-footer .cookie-settings-trigger {
    position: static;
    z-index: auto;
    padding: .18rem .35rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-faint);
    box-shadow: none;
    font-size: .72rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .16em;
}
.site-footer .cookie-settings-trigger:hover,
.site-footer .cookie-settings-trigger:focus-visible { background: rgba(121, 247, 208, .08); color: var(--text-soft); outline-color: rgba(141, 247, 214, .75); }
.qr-consent-hint { margin: .65rem 0 0; text-align: center; }

@media (min-width: 1081px) {
    .admin-sidebar { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; }
}

@media (max-width: 1080px) {
    .nav-toggle { display: inline-flex; align-items: center; gap: .45rem; }
    .admin-layout > .admin-sidebar {
        position: fixed;
        z-index: 5000;
        top: .75rem;
        bottom: .75rem;
        left: .75rem;
        width: min(330px, calc(100vw - 1.5rem));
        max-height: none;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateX(calc(-100% - 1.5rem));
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
        box-shadow: 24px 0 60px rgba(0,0,0,.48);
    }
    .mobile-nav-open .admin-layout > .admin-sidebar { opacity: 1; visibility: visible; transform: translateX(0); }
    .mobile-nav-scrim {
        display: none;
        position: fixed;
        z-index: 4900;
        inset: 0;
        background: rgba(3, 5, 16, .62);
        backdrop-filter: blur(3px);
        border: 0;
        cursor: default;
    }
    .mobile-nav-open .mobile-nav-scrim { display: block; }
}

@media (max-width: 760px) {
    .layout-shell { padding: .8rem; }
    .public-card { border-radius: 22px; }
    .public-card h1 { font-size: clamp(2rem, 11vw, 2.8rem); }
    .workspace-subtitle { font-size: .86rem; }
    .workspace-search-link kbd { display: none; }
    .empty-box.ui-empty-state { flex-direction: column; min-height: 0; }
    .page-jump-nav { align-items: flex-start; flex-direction: column; }
    .page-jump-nav a { width: 100%; }
    .admin-attention-item { grid-template-columns: minmax(0, 1fr) auto; }
    .privacy-policy-card { padding: 1.25rem; }
    .privacy-policy-card .legal-text { gap: .9rem; margin-top: 1.5rem; }
    .privacy-policy-card .legal-text > h2 { margin-top: 1.15rem; }
    .privacy-policy-card .legal-text > p { line-height: 1.65; }
    .public-form-grid { gap: .85rem; }
    .public-homepage .public-card .stacked-form { width: 100%; }
    .public-homepage .public-form-grid { grid-template-columns: 1fr; width: 100%; }
    .public-homepage .homepage-target-field,
    .public-homepage .public-form-grid > .field:not(.homepage-target-field) { width: 100%; }
    .public-homepage .link-target-checker-head { align-items: flex-start; flex-wrap: wrap; }
    .homepage-account-actions { justify-self: center; }
    .topbar { padding: .35rem .15rem; }
    .topbar-actions > a, .topbar-actions > button, .topbar-actions > form { flex: 1 1 auto; }
    .topbar-actions > .nav-toggle { width: auto; flex: 0 0 auto !important; }
    .topbar-action-group { flex: 1 1 100%; }
    .topbar-utility-actions { padding-left: 0; border-left: 0; }
    .topbar-utility-actions > a { flex: 1 1 auto; }
    .admin-quick-action { display: none; }
    .trust-row { display: grid; grid-template-columns: 1fr; gap: .45rem; }
    .toast-region { right: 1rem; bottom: 1rem; }
    .cookie-consent { inset: auto .8rem .8rem .8rem; width: auto; }
    .cookie-consent-card { padding: 1rem; border-radius: 20px; }
    .cookie-consent-actions { display: grid; grid-template-columns: 1fr; }
    .cookie-settings-trigger { left: .8rem; bottom: .8rem; }
    .table-mobile-cards tr { box-shadow: 0 9px 22px rgba(0,0,0,.14); }
    .table-mobile-cards td { padding: .78rem 0; }
    .table-mobile-cards td.table-actions-cell { margin-top: .2rem; padding-top: .85rem; }
    .table-mobile-cards .mini-button, .table-mobile-cards .primary-button { min-height: 44px; }
    .visual-choice-grid { grid-template-columns: 1fr; }
    .bio-theme-grid { grid-template-columns: 1fr; }
    .mail-template-preview-head { display: grid; gap: .2rem; }
    .maintenance-live-preview-head { display: grid; gap: .55rem; }
    .link-preview-live-preview-head { display: grid; gap: .55rem; }
    .status-chip { width: fit-content; }
    .qr-studio-layout { grid-template-columns: 1fr; }
    body:not([data-visual-intensity="vivid"]) { --matrix-line: rgba(108, 255, 211, 0.04); --matrix-line-soft: rgba(139, 109, 255, 0.028); }
}

@media (max-width: 920px) {
    .page-grid,
    .auth-columns {
        grid-template-columns: 1fr;
    }

    .role-card-summary,
    .abuse-report-summary {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (hover: none), (pointer: coarse) {
    .notification-preview { display: none; }
    body { animation: none !important; }
    .background-network,
    .background-pointer-glow { display: none !important; }
    .card,
    .public-card,
    .auth-card { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    body { animation: none; }
    .background-pointer-glow { display: none; }
    .background-network { display: none; }
}