:root {
    --form-error: #b42318;
    --form-error-strong: #991b1b;
    --form-focus-border: color-mix(in srgb, var(--fg) 38%, var(--border));
    --form-focus-ring: color-mix(in srgb, var(--fg) 11%, transparent);
    --accent: #449841;
    --accent-hover: #3a8237;
    --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
    --accent-text: #2d6b2a;
    --bg: #f7f7f5;
    --bg-elevated: #fdfdfc;
    --fg: #161614;
    --muted: #5c5b57;
    --border: #e0e0db;
    --shadow-sm: 0 1px 2px rgba(15, 18, 14, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 18, 14, 0.08);
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 8px;
    --navbar-bg: #0a0a0a;
    --navbar-fg: #f4f4f2;
    --navbar-muted: rgba(244, 244, 242, 0.62);
    --navbar-edge: rgba(255, 255, 255, 0.07);
    --pad-x-page: clamp(1.25rem, 5vw, 3rem);
}

@media (prefers-color-scheme: dark) {
    :root {
        --form-error: #f87168;
        --form-error-strong: #fca5a5;
        --form-focus-border: color-mix(in srgb, var(--fg) 45%, var(--border));
        --form-focus-ring: color-mix(in srgb, var(--fg) 16%, transparent);
        --accent-hover: #5aad56;
        --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);
        --accent-text: #a3d99f;
        --bg: #0e0e0d;
        --bg-elevated: #161615;
        --fg: #f2f1ef;
        --muted: #9d9c96;
        --border: #2c2c28;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.45);
    }

    body {
        background-image: radial-gradient(
            ellipse 100% 70% at 50% -30%,
            color-mix(in srgb, var(--accent) 12%, transparent),
            transparent 58%
        );
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    background-color: var(--bg);
    background-image: radial-gradient(
        ellipse 100% 70% at 50% -30%,
        color-mix(in srgb, var(--accent) 9%, transparent),
        transparent 58%
    );
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

.page {
    max-width: 46rem;
    margin: 0 auto;
    padding: clamp(1.15rem, 3.5vw, 1.85rem) var(--pad-x-page) 2.5rem;
}

.page--wide {
    max-width: 58rem;
}

.page--full {
    max-width: none;
    width: 100%;
}

/* Diagrammseite: Inhalt + Chart füllen die Sichtfläche (Höhe, kein Seiten-Scroll) */
html:has(.stats-chart-page) {
    height: 100%;
}

body:has(.stats-chart-page) {
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

body:has(.stats-chart-page) > .navbar {
    flex-shrink: 0;
}

body:has(.stats-chart-page) > .page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: clamp(0.65rem, 2vw, 1rem);
}

body:has(.stats-chart-page) > .page > .main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body:has(.stats-chart-page) > .page > .site-footer {
    flex-shrink: 0;
}

.site-footer {
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.site-footer-inner {
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--pad-x-page);
}

.site-footer-line {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--muted);
    text-align: center;
}

.site-footer-sep {
    margin: 0 0.35rem;
    color: var(--muted);
    font-weight: 400;
}

.site-footer-link {
    color: var(--accent-text);
    font-weight: 500;
    text-underline-offset: 0.18em;
}

.site-footer-link:hover {
    color: var(--accent-hover);
    text-decoration: none;
}

.stats-chart-page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.stats-chart-page > .flash-stack {
    flex-shrink: 0;
}

.stats-chart-page > .main-heading-row {
    flex-shrink: 0;
}

.stats-chart-page > .stats-chart-section {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
}

.stats-chart-section.stats-chart-section--fill .stats-chart-canvas-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    width: 100%;
}

.stats-chart-section.stats-chart-section--fill .stats-chart-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Hinweise im Inhaltsbereich: unter der Navbar, vor Überschrift / erstem Block */
.main > .flash-stack:first-child {
    margin-bottom: 1.25rem;
}

.main > .flash-stack + h1,
.main > .flash-stack + .main-heading-row {
    margin-top: 0;
}

.flash-stack .alert {
    margin: 0;
}

.flash-stack .alert + .alert {
    margin-top: 0.55rem;
}

.main--login .flash-stack .alert {
    text-align: left;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-edge);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
    --navbar-item-fs: 0.9375rem;
    --navbar-item-lh: 1.25;
    --navbar-item-pad-y: 0.38rem;
    --navbar-item-pad-x: 0.65rem;
    --navbar-item-radius: var(--radius-sm);
}

.navbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    max-width: none;
    margin: 0 auto;
    padding: 0.45rem var(--pad-x-page);
    min-height: 2.65rem;
}

/* Direkte Kinder: Logo → Hauptmenü → … → Konto (margin-left:auto) — ohne zusätzliche Flex-Schachtelung */
.navbar-inner > .navbar-brand {
    flex: 0 0 auto;
}

.navbar-inner > .navbar-main-nav {
    flex: 0 0 auto;
    display: block;
    margin-left: 0.45rem;
    padding-left: 0.9rem;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.navbar-inner > .navbar-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem 0.45rem;
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 2rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.navbar-main-nav {
    flex-shrink: 0;
}

.navbar-main-menu .nav-link {
    white-space: nowrap;
}

.navbar-main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.35rem;
}

.navbar-main-menu li {
    margin: 0;
}

.navbar-brand {
    color: #fff;
    min-width: 0;
}

.navbar-brand:hover {
    color: #fff;
}

.navbar-logo {
    display: block;
    width: 40px;
    height: 24px;
    max-width: 40px;
    flex-shrink: 0;
    object-fit: contain;
    object-position: left center;
}

.navbar-title {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    white-space: nowrap;
}

.navbar .nav-link {
    color: rgba(245, 245, 243, 0.92);
}

.navbar .nav-link:not(.nav-link--emphasis) {
    opacity: 1;
}

.navbar .nav-link:hover {
    color: var(--navbar-fg);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}

.navbar .nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        color 0.15s ease,
        background 0.15s ease;
}

.navbar .navbar-main-menu .nav-link,
.navbar-end .nav-link {
    padding: var(--navbar-item-pad-y) var(--navbar-item-pad-x);
    font-size: var(--navbar-item-fs);
    line-height: var(--navbar-item-lh);
    border-radius: var(--navbar-item-radius);
}

.navbar .nav-link--emphasis {
    color: #fff;
    background: var(--accent);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.navbar .nav-link--emphasis:hover {
    background: var(--accent-hover);
    color: #fff;
    text-decoration: none;
}

/* Account: Trigger + Hover-/Focus-Dropdown (Startseite + Verwaltung) */
.navbar-account {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.navbar .navbar-account-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    margin: 0;
    max-width: min(12.5rem, 42vw);
    padding: var(--navbar-item-pad-y) var(--navbar-item-pad-x);
    border: 0;
    border-radius: var(--navbar-item-radius);
    box-shadow: none;
    font-family: inherit;
    font-size: var(--navbar-item-fs);
    font-weight: 600;
    line-height: var(--navbar-item-lh);
    color: rgba(245, 245, 243, 0.92);
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
    transition:
        color 0.15s ease,
        background 0.15s ease;
}

.navbar .navbar-account-trigger:hover {
    color: var(--navbar-fg);
    background: rgba(255, 255, 255, 0.06);
}

.navbar .navbar-account-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.navbar-account-trigger__icon {
    flex-shrink: 0;
    font-size: 1.05rem;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.88;
    line-height: 1;
}

.navbar-account-trigger__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-account-trigger__caret {
    flex-shrink: 0;
    font-size: 0.875rem;
    opacity: 0.66;
    line-height: 1;
    margin-left: 0.1rem;
}

.navbar-account-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    min-width: 10rem;
    padding: 0.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #171717;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0.15s;
    z-index: 100;
    pointer-events: none;
}

.navbar-account:hover .navbar-account-dropdown,
.navbar-account:focus-within .navbar-account-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.navbar-account-dropdown::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 0.5rem;
}

.navbar-account-logout-form {
    margin: 0;
}

.navbar-account-logout-btn {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.65rem;
    text-align: left;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: rgba(245, 245, 244, 0.95);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.navbar-account-logout-btn:hover {
    background: rgba(255, 255, 255, 0.09);
}

.navbar-account-logout-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0;
}

@media (max-width: 480px) {
    .navbar-account-trigger__name,
    .navbar-account-trigger__caret {
        display: none;
    }
}

.logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.navbar-logo-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.main {
    padding-top: 0.25rem;
}

.main h1 {
    font-size: clamp(1.55rem, 3.2vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    margin: 0 0 0.65rem;
    line-height: 1.18;
}

.main-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: nowrap;
    margin: 0 0 1.1rem;
}

.main-heading-row > h1 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.main-heading-row__lead {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.main .main-heading-row__lead h1 {
    margin: 0;
}

.main-heading-row__target {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--muted);
    font-weight: 500;
}

.main-heading-row--with-target {
    align-items: flex-start;
}

.main-heading-row--with-target .stats-heading-tools {
    padding-top: 0.2rem;
}

.btn-heading-add {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-sm);
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.08s ease,
        color 0.15s ease;
}

.btn-heading-add:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
    text-decoration: none;
}

.btn-heading-add:focus-visible {
    outline: none;
    box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-soft);
}

.btn-heading-add .mdi {
    font-size: 1.35rem;
    line-height: 1;
}

/* Statistik: Icon-Button + Zeitraum rechts neben H1 (gleiche Höhe wie Select) */
.stats-heading-tools {
    --stats-heading-control-h: 2.35rem;
    /* gemeinsame graue Fläche wie der Seitenhintergrund (--bg), nicht reines Weiß */
    --stats-toolbar-fill: var(--bg);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-stats-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--stats-heading-control-h);
    height: var(--stats-heading-control-h);
    box-sizing: border-box;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    /* erbt --stats-toolbar-fill von .stats-heading-tools, wie das Select */
    background-color: var(--stats-toolbar-fill, var(--bg-elevated));
    background-image: none;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.btn-stats-heading-icon:hover {
    border-color: color-mix(in srgb, var(--fg) 22%, var(--border));
    background-color: var(--stats-toolbar-fill, var(--bg-elevated));
}

.btn-stats-heading-icon:active {
    background-color: var(--stats-toolbar-fill, var(--bg-elevated));
}

.btn-stats-heading-icon:focus-visible {
    outline: none;
    background-color: var(--stats-toolbar-fill, var(--bg-elevated));
    box-shadow: var(--shadow-sm), 0 0 0 3px var(--form-focus-ring);
}

.btn-stats-heading-icon .mdi {
    font-size: 1.125rem;
    line-height: 1;
    color: var(--accent-text);
}

.btn-stats-heading-icon:hover .mdi {
    color: var(--accent-hover);
}

/* Statistik: Zeitraum-Dropdown rechts auf H1-Höhe */
.stats-period-form {
    margin: 0;
    flex-shrink: 0;
}

.stats-period-form select,
.stats-period-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0.42rem 2.25rem 0.42rem 0.75rem;
    min-height: var(--stats-heading-control-h, 2.35rem);
    line-height: 1.35;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--stats-toolbar-fill, var(--bg-elevated));
    color: var(--fg);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    width: auto;
    min-width: 10.5rem;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 1rem;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.stats-period-form select:hover,
.stats-period-select:hover {
    border-color: color-mix(in srgb, var(--fg) 22%, var(--border));
}

.stats-period-form select:focus,
.stats-period-select:focus {
    outline: none;
    border-color: var(--form-focus-border);
    box-shadow: var(--shadow-sm), 0 0 0 3px var(--form-focus-ring);
}

@media (max-width: 559px) {
    .main-heading-row {
        flex-wrap: wrap;
    }

    .stats-heading-tools {
        width: 100%;
        justify-content: flex-start;
    }

    .stats-period-form {
        flex: 1;
        min-width: 0;
    }

    .stats-period-form select,
    .stats-period-select {
        width: 100%;
        min-width: 0;
    }
}

.main p {
    margin: 0;
    color: var(--muted);
}

.main p + p {
    margin-top: 1rem;
}

a {
    color: inherit;
    text-underline-offset: 0.18em;
}

.main a:not(.btn):not(.logo-link):not(.btn-heading-add):not(.btn-stats-heading-icon),
.section a:not(.btn):not(.logo-link):not(.btn-stats-heading-icon) {
    color: var(--accent-text);
    font-weight: 500;
}

.main a:not(.btn):not(.logo-link):not(.btn-heading-add):not(.btn-stats-heading-icon):hover,
.section a:not(.btn):not(.logo-link):not(.btn-stats-heading-icon):hover {
    color: var(--accent-hover);
    text-decoration: none;
}

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

.muted a {
    color: var(--muted);
    font-weight: 500;
}

.muted a:hover {
    color: var(--accent-text);
    text-decoration: none;
}

@media (prefers-color-scheme: dark) {
    .main a:not(.btn):not(.logo-link):not(.btn-stats-heading-icon),
    .section a:not(.btn):not(.logo-link):not(.btn-stats-heading-icon) {
        color: var(--accent-text);
    }
}

.small {
    font-size: 0.875rem;
}

.inline-form {
    margin: 0;
    display: inline;
}

.section {
    margin-top: 2.25rem;
    padding: 1.35rem 1.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Custom-Fehler-Tooltips (::after) dürfen aus der Section herausragen */
.section:has(.form-field__error-tooltip-trigger) {
    overflow: visible;
}

@media (prefers-color-scheme: dark) {
    .section {
        box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255, 255, 255, 0.03);
    }
}

/* Klar unterhalb von .main h1: kleiner, weniger vertikale Dominanz als Seitentitel */
.section h2,
.stats-table-block h2 {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 0.65rem;
    padding-bottom: 0;
}

.alert {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin: 0 0 1rem;
    background: var(--bg-elevated);
    color: var(--fg);
    line-height: 1.45;
}

.alert-error {
    border-color: color-mix(in srgb, #dc2626 22%, var(--border));
    border-left: 4px solid #dc2626;
    background: color-mix(in srgb, #dc2626 9%, var(--bg-elevated));
}

.alert-ok {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    border-left: 4px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
}

@media (prefers-color-scheme: dark) {
    .alert-error {
        border-color: color-mix(in srgb, #f87171 28%, var(--border));
        border-left-color: #f87171;
        background: color-mix(in srgb, #f87171 12%, var(--bg-elevated));
    }

    .alert-ok {
        border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
        background: color-mix(in srgb, var(--accent) 16%, var(--bg-elevated));
    }
}

/* Admin-Formulare: Label links, Steuerung rechts, Hinweis unter dem Feld */
.form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: min(42rem, 100%);
}

.form-field {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
    gap: 0.35rem 1.25rem;
    align-items: start;
}

.form-field__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg);
    padding-top: 0.42rem;
    margin: 0;
    line-height: 1.35;
}

.form-field__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.form-field__hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--muted);
}

.form-field__hint code {
    font-size: 0.95em;
}

.form-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding-top: 0.38rem;
    font-size: 0.875rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--fg);
    cursor: pointer;
}

.form-checkbox-row input[type='checkbox'] {
    width: 1rem;
    height: 1rem;
    margin: 0.14rem 0 0;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.form-field--checkbox-option .form-field__body {
    gap: 0.28rem;
}

.form-field__body--title-stack {
    gap: 0.45rem;
}

.form-field--title-block .form-checkbox-row {
    padding-top: 0.12rem;
}

.form-field__input-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

/* Fehler: nur Icon sichtbar; CSS-Tooltip aus data-tooltip (+ sr-only für aria-describedby) */
.form-field__error-aside {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    align-items: center;
}

.form-field__error-tooltip-trigger {
    position: relative;
    margin: 0;
    padding: 0.2rem;
    border: none;
    background: transparent;
    cursor: help;
    color: var(--form-error-strong);
    border-radius: var(--radius-sm);
    line-height: 1;
    font: inherit;
}

.form-field__error-tooltip-trigger:focus-visible {
    outline: 2px solid var(--form-error);
    outline-offset: 2px;
}

.form-field__error-tooltip-trigger::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.45rem);
    transform: translateX(-50%);
    min-width: 9rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.5rem 0.7rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    color: var(--fg);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    white-space: normal;
    word-break: break-word;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 300;
    transition:
        opacity 0.14s ease,
        visibility 0.14s ease;
}

.form-field__error-tooltip-trigger:hover::after,
.form-field__error-tooltip-trigger:focus::after {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .form-field__error-tooltip-trigger::after {
        transition: none;
    }
}

.form-field__error-icon-only {
    font-size: 1.65rem;
    display: block;
}

.form-field__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form-field--invalid .form-field__label {
    color: var(--form-error-strong);
}

.form-field--actions {
    margin-top: 0.25rem;
    padding-top: 0.35rem;
}

.form-field--actions .form-field__lead {
    display: block;
}

.form-field__lead {
    display: block;
}

@media (max-width: 520px) {
    .form-field {
        grid-template-columns: 1fr;
        gap: 0.28rem;
    }

    .form-field__label {
        padding-top: 0;
    }

    .form-field__lead {
        display: none;
    }

    .form-field--actions {
        margin-top: 0.35rem;
    }

}

.form input[type="url"],
.form input[type="text"] {
    padding: 0.38rem 0.65rem;
    min-height: 2rem;
    line-height: 1.35;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form input[type="url"]:focus,
.form input[type="text"]:focus {
    outline: none;
    border-color: var(--form-focus-border);
    box-shadow: 0 0 0 3px var(--form-focus-ring);
}

/* Zeile Eingabe + Fehler-Icon: nicht volle Breite (überschreibt width:100% oben) */
.form .form-field__input-row > input[type='url'],
.form .form-field__input-row > input[type='text'] {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

.form .form-field__input-row > input[type='text'].input-readonly-display {
    cursor: default;
    background: color-mix(in srgb, var(--muted) 10%, var(--bg));
    color: var(--fg);
}

.form .form-field__input-row > input[type='text'].input-readonly-display:focus {
    outline: none;
    border-color: var(--border);
    box-shadow: none;
}

.form .form-field__input-row > input[type='text'].input-readonly-display::placeholder {
    color: var(--muted);
}

/* Native Selects: einheitlich mit Chevron, ohne System-Pfeil */
.form select,
select.role-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0.38rem 2.25rem 0.38rem 0.65rem;
    min-height: 2rem;
    line-height: 1.35;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg);
    color: var(--fg);
    font: inherit;
    font-size: 0.875rem;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 1rem;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.form select:hover,
select.role-select:hover {
    border-color: color-mix(in srgb, var(--fg) 22%, var(--border));
}

.form select:focus {
    outline: none;
    border-color: var(--form-focus-border);
    box-shadow: 0 0 0 3px var(--form-focus-ring);
}

.form .form-field__input-row > select {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 559px) {
    .form .form-field__input-row > input[type='url'],
    .form .form-field__input-row > input[type='text'],
    .form .form-field__input-row > select {
        flex: 1 1 100%;
        width: 100%;
    }
}

select.role-select:focus {
    outline: none;
    border-color: var(--form-focus-border);
    box-shadow: 0 0 0 3px var(--form-focus-ring);
}

/*
 * Fehler-Markierung NACH allen Basis-.form-Regeln für Inputs/Selects, mit extra .form-Klasse,
 * damit .form input[type="text|url"] die rote Umrandung nicht wieder überschreibt (gleiche/niedrigere
 * Spezifität, später im Stylesheet = Basis gewinnt sonst nur beim Slug/Textfeld).
 */
.form .form-field--invalid .form-field__input-row input[type='url'],
.form .form-field--invalid .form-field__input-row input[type='text'],
.form .form-field--invalid .form-field__input-row select,
.form .form-field--invalid .form-field__input-row textarea {
    border-width: 2px;
    border-color: var(--form-error-strong);
    background: color-mix(in srgb, var(--form-error) 8%, var(--bg));
}

.form .form-field--invalid .form-field__input-row input[type='url']:focus,
.form .form-field--invalid .form-field__input-row input[type='text']:focus,
.form .form-field--invalid .form-field__input-row select:focus,
.form .form-field--invalid .form-field__input-row textarea:focus {
    outline: none;
    border-color: var(--form-error-strong);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-error) 24%, transparent);
}

.form .form-field--invalid .form-field__input-row select:hover {
    border-color: var(--form-error-strong);
}

@media (prefers-color-scheme: dark) {
    .form select,
    select.role-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239d9c96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    }
}

/* In Tabellen: kompakter, gleiche Zeilenhöhe wie Icon-Buttons */
.data.table--links .table-role-form select.role-select {
    min-height: 1.625rem;
    padding: 0.12rem 1.55rem 0.12rem 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.25;
    width: auto;
    min-width: 5.5rem;
    background-position: right 0.35rem center;
    background-size: 0.875rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem;
    min-height: 2rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 0 color-mix(in srgb, #000 12%, transparent);
}

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

.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: var(--fg);
    border-color: var(--border);
    box-shadow: none;
}

.btn-ghost:hover {
    background: color-mix(in srgb, var(--border) 40%, transparent);
}

.btn-danger {
    border-color: #c53434;
    color: #b91c1c;
    background: transparent;
    box-shadow: none;
}

.btn-danger:hover {
    background: color-mix(in srgb, #c53434 14%, transparent);
    color: #991b1b;
}

.btn-small {
    padding: 0.35rem 0.65rem;
    font-size: 0.875rem;
}

@media (prefers-color-scheme: dark) {
    .btn-danger {
        border-color: #f87171;
        color: #fecaca;
    }

    .btn-danger:hover {
        background: color-mix(in srgb, #f87171 18%, transparent);
        color: #fecaca;
    }
}

.main--login {
    max-width: 22rem;
    margin-inline: auto;
    text-align: center;
}

.main--login h1 {
    margin-bottom: 0.5rem;
}

.main--login > p.muted:first-of-type {
    margin-bottom: 1.5rem;
}

.main--login .btn-github-wrap {
    margin-top: 0.5rem;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border) 50%, transparent);
}

/* Tabelle allein als Panel (table-wrap), ohne äußere Section-Karte */
.links-table-outer {
    margin-top: 0;
}

.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data th,
.data td {
    padding: 0.7rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.data thead th {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #f8faf6;
    background: var(--accent);
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 65%, #163016);
}

@media (prefers-color-scheme: dark) {
    .data thead th {
        color: #eef8ec;
        background: color-mix(in srgb, var(--accent) 88%, #103010);
        border-bottom-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    }
}

.data tbody tr {
    transition: background 0.12s ease;
}

.data tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

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

.target-cell {
    word-break: break-all;
}

.target-cell--stack {
    vertical-align: top;
}

.target-cell__title {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--fg);
    margin-bottom: 0.35rem;
}

.target-cell__url {
    font-size: 0.8125rem;
    line-height: 1.45;
    word-break: break-all;
}

.target-cell__url a {
    color: var(--accent-text);
    font-weight: 500;
}

/* Kein width:1% auf der Zelle — sonst Tabellenspalte praktisch 0px, Grid bricht jeden Buchstaben.
   Flex nicht auf dem td: sonst kein table-cell → border-collapse / border-bottom der Zeile bricht. */
.link-shortcuts-cell {
    vertical-align: bottom;
}

.link-shortcuts-cell-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 0.28rem;
}

/* Pro Zeile eigenes Grid — sonst teilen sich zwei Kurzlinks dieselben Grid-Spalten und die Buttons stehen untereinander bündig. */
.link-copy-line {
    display: grid;
    grid-template-columns: minmax(0, max-content) auto;
    justify-content: start;
    column-gap: 0.12rem;
    align-items: baseline;
    min-width: 0;
    max-width: 100%;
    /* Lange Kurzlinks: scroll in der Zeile, Mittelspalte darf bis zur Aktionen-Spalte mitwachsen */
    overflow-x: auto;
}

.link-copy-line > span:not(.link-copy-slot-empty) {
    min-width: 0;
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: 0.8125rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--fg);
}

.data.table--links.table--links-overview tbody td.links-actions-cell {
    vertical-align: bottom;
}

.data.table--links thead th {
    vertical-align: middle;
}

.data.table--links tbody td {
    vertical-align: middle;
}

.data.table--links tbody td.link-shortcuts-cell {
    vertical-align: bottom;
}

.link-copy-line > .link-copy-slot-empty {
    grid-column: 1 / -1;
}

/* Wie .target-cell__url a — gleiche Schrift wie Ziel-Link */
.data.table--links.table--links-overview tbody td.link-shortcuts-cell .link-copy-line > a,
.data.table--links.table--links-overview tbody td.link-copy-cell .link-copy-line > a {
    min-width: 0;
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: 0.8125rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--accent-text);
    text-decoration: none;
}

.data.table--links.table--links-overview tbody td.link-shortcuts-cell .link-copy-line > a:hover,
.data.table--links.table--links-overview tbody td.link-copy-cell .link-copy-line > a:hover {
    color: var(--accent-hover);
    text-decoration: none;
}

.link-copy-line > .btn-copy-icon {
    margin: 0;
}

.btn-copy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--muted);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition:
        background 0.12s ease,
        color 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.btn-copy-icon:hover {
    color: var(--accent-text);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: var(--accent-soft);
    box-shadow: none;
}

.btn-copy-icon .mdi {
    font-size: 0.72rem;
    line-height: 1;
}

.btn-copy-icon:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.links-actions-th {
    width: 5rem;
    text-align: right;
}

.links-actions-cell {
    vertical-align: middle;
    text-align: right;
}

.links-actions-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 1.625rem;
}

.links-actions-cell form.links-inline-delete {
    display: inline-flex;
    justify-content: flex-end;
    margin: 0;
}

.links-inline-delete {
    margin: 0;
    display: inline;
}

/* Nutzer: Rolle speichern neben Select (wie Übersicht: kompakte Icon-Zeile) */
.table-role-form {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin: 0;
}

.btn-icon-table {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition:
        background 0.12s ease,
        color 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.btn-icon-table:hover {
    color: var(--accent-text);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: var(--accent-soft);
    box-shadow: none;
}

.btn-icon-table.btn-icon-table--danger:hover {
    color: #b42318;
    border-color: color-mix(in srgb, #b42318 35%, var(--border));
    background: color-mix(in srgb, #b42318 10%, var(--bg-elevated));
}

@media (prefers-color-scheme: dark) {
    .btn-icon-table.btn-icon-table--danger:hover {
        color: #f87171;
        border-color: color-mix(in srgb, #f87171 40%, var(--border));
        background: color-mix(in srgb, #f87171 14%, var(--bg-elevated));
    }
}

.btn-icon-table .mdi {
    font-size: 0.95rem;
    line-height: 1;
}

.btn-icon-table:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-icon-table.btn-icon-table--danger:focus-visible {
    outline-color: #b42318;
}

.main a.btn-icon-table,
.section a.btn-icon-table {
    color: var(--muted);
    font-weight: normal;
    text-decoration: none;
}

.main a.btn-icon-table:hover,
.section a.btn-icon-table:hover {
    color: var(--accent-text);
}

/* Suche oberhalb der .section-Karte, nicht in der Tafel */
.links-above-panel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 0;
    /* Luft unter Suche/Hinweisbox — bewusst moderat (nicht zur Tabelle) */
    padding-bottom: 1rem;
}

/* Mehr Abstand zwischen Seiten-Titel und Suchzeile (Startseite) */
.main h1 + .links-above-panel {
    padding-top: 1rem;
}

.main-heading-row + .links-above-panel {
    padding-top: 1rem;
}

.main-heading-row + .section {
    margin-top: 1rem;
}

/* Verwaltung: Abstand zwischen Formular-Section und Suchliste */
.section + .links-above-panel {
    margin-top: 1.5rem;
}

/* Direkt nach der Suchleiste: Tabelle ohne zusätzlichen Abstand */
.links-above-panel + .links-table-outer {
    margin-top: 0;
}

.links-search-offer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
    box-shadow: var(--shadow-sm);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--fg);
}

.links-search-offer[hidden] {
    display: none !important;
}

.links-search-offer__lead {
    margin: 0;
}

.links-search-offer__actions {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.links-search-offer__error {
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, #dc2626 28%, var(--border));
    background: color-mix(in srgb, #dc2626 8%, var(--bg));
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--fg);
}

@media (prefers-color-scheme: dark) {
    .links-search-offer {
        background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
        box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255, 255, 255, 0.03);
    }

    .links-search-offer__error {
        border-color: color-mix(in srgb, #f87171 28%, var(--border));
        background: color-mix(in srgb, #f87171 10%, var(--bg));
    }
}

.links-url-search-form {
    margin: 0;
}

.links-url-search-combo {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: text;
    transition: box-shadow 0.15s ease;
}

/* Ein Ring um die gesamte Zeile (Feld + Suchen), wenn irgendwo Fokus ist */
.links-url-search-combo:focus-within {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.links-url-search-combo .links-url-search__input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right: 0;
}

.links-url-search__input {
    padding: 0.38rem 0.65rem;
    min-height: 2rem;
    line-height: 1.35;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.links-url-search-combo .links-url-search__input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow: none;
    z-index: 1;
}

/* Dekoratives Lupe-Icon (kein Button — Suche läuft live beim Tippen) */
.links-url-search-addon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    min-height: 2rem;
    padding: 0;
    margin: 0;
    border: 1px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--accent);
    color: #fff;
    user-select: none;
}

.links-url-search-addon .mdi {
    font-size: 1.15rem;
    line-height: 1;
}

.nowrap {
    white-space: nowrap;
}

.section-top {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--border);
}

.short-link {
    word-break: break-all;
}

.short-urls .block {
    display: block;
}

.secondary-short {
    margin-top: 0.35rem;
}

.footer-hint {
    margin-top: 2rem;
    padding-top: 1.25rem;
    font-size: 0.8125rem;
}

/* Keine Monospace-UI: code-ähnliche Hervorhebung mit Hausschrift */
code,
kbd,
samp {
    font-family: inherit;
    font-size: 0.95em;
}

pre {
    font-family: inherit;
}

.code {
    font-family: inherit;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--border) 55%, transparent);
    font-size: 0.8125rem;
}

.main h1 + .section,
.main-heading-row + .section {
    margin-top: 1.15rem;
}

.stats-chart-page .main-heading-row + .stats-chart-section {
    margin-top: 1rem;
}

/* Überschrift + Tabelle wie auf der Verwaltungsübersicht: Tabelle nicht in der Section-Karte */
.stats-table-block {
    margin-top: 2.25rem;
}

.stats-table-block .muted {
    margin: 0;
}

.stats-table-block .links-table-outer {
    margin-top: 0;
}

.stats-kpi-table tbody th[scope='row'] {
    font-weight: 600;
    text-align: left;
}

.stats-kpi-table tbody th.stats-kpi-sub {
    font-weight: 500;
    padding-left: 1rem;
}

/* Höhere Spezifität als `.data th` / `.data td` { text-align: left }; Rang-Spalte (#) ausnehmen */
.data th.stats-kpi-num:not(.stats-top-rank),
.data td.stats-kpi-num:not(.stats-top-rank) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stats-top-rank {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

thead .stats-top-rank {
    text-align: center;
}

tbody .stats-top-rank {
    text-align: center;
    color: var(--muted);
    font-weight: 600;
}

/* Top-Links: Spalten, Ziel einzeilig (Ellipsis) */
.stats-top-target-cell {
    max-width: 28rem;
    min-width: 8rem;
    vertical-align: middle;
}

.stats-top-target-link {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-top-short-code-col,
.stats-top-code-cell {
    white-space: nowrap;
    vertical-align: middle;
}

.stats-top-detail-col,
.stats-top-detail-cell {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

/* Top-Referrer: externer Link zur Referrer-URL (nicht Kurzlink-Ziel), einzeilig */
.stats-top-referrer-cell {
    max-width: 36rem;
    min-width: 12rem;
    vertical-align: middle;
}

.stats-top-referrer-link {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data.stats-kpi-table tbody tr:last-child th,
.data.stats-kpi-table tbody tr:last-child td {
    border-bottom: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

    .btn:active {
        transform: none;
    }
}