/* bTools – Design-System v0.4 (Dark / Light, folgt Browser-Voreinstellung) */

/* ================================================================
   DESIGN TOKENS  –  Dark-Mode ist der Default
   ================================================================ */
:root {
    /* Hintergrund-Palette */
    --bg-0:        #07090d;
    --bg-1:        #0d1117;
    --bg-2:        #161b22;
    --bg-3:        #1c2330;
    --bg-4:        #243040;
    --border:      #21262d;
    --border-soft: #161b22;

    /* Typografie */
    --text:        #e6edf3;
    --text-dim:    #8b949e;
    --text-mute:   #484f58;

    /* Brand-Blau (Logo-Verlauf: hellblau → dunkelblau) */
    --accent:      #58c4ff;
    --accent-2:    #2c9ff3;
    --accent-dim:  #1565c0;
    --accent-deep: #0d47a1;
    --accent-rgb:  88, 196, 255;   /* für rgba(var(--accent-rgb), alpha) */

    /* Sekundärfarben */
    --warn:        #f0883e;
    --error:       #ff7b72;
    --error-rgb:   255, 123, 114;
    --link:        #79c0ff;
    --success:     #56d364;

    /* Verläufe */
    --grad-accent: linear-gradient(135deg, #58c4ff 0%, #1976d2 100%);
    --grad-bg:     radial-gradient(circle at 5%  5%,  rgba(88,196,255,.06) 0%, transparent 45%),
                   radial-gradient(circle at 95% 95%, rgba(13,71,161,.08)  0%, transparent 45%);

    /* Schaltflächen */
    --btn-primary-fg: #04080e;

    /* UI-Konstanten */
    --font-mono:   "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
    --sidebar-w:   280px;
    --radius:      8px;
    --radius-lg:   14px;
    --shadow-1:    0 1px 2px rgba(0,0,0,.30), 0 3px 8px rgba(0,0,0,.32);
    --shadow-2:    0 12px 34px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.40);
    --shadow-glow: 0 0 0 1px rgba(88,196,255,.35), 0 0 24px rgba(88,196,255,.20);

    /* Terminal (bleibt dunkel, auch im Light-Mode) */
    --term-bg:     #050810;
    --term-text:   #c8d3db;
}

/* ================================================================
   LIGHT THEME  –  greift wenn Browser "Hell" bevorzugt und kein
                   manueller Dark-Override gesetzt ist
   ================================================================ */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg-0:        #f0f4f8;
        --bg-1:        #ffffff;
        --bg-2:        #f6f9fc;
        --bg-3:        #edf2f7;
        --bg-4:        #dce5ef;
        --border:      #c9d5e0;
        --border-soft: #e2e8f0;

        --text:        #1a2332;
        --text-dim:    #4a5568;
        --text-mute:   #8896a5;

        --accent:      #0969da;
        --accent-2:    #0752b0;
        --accent-dim:  #0552a0;
        --accent-deep: #033e80;
        --accent-rgb:  9, 105, 218;

        --warn:        #b45309;
        --error:       #c53030;
        --error-rgb:   197, 48, 48;
        --link:        #0969da;
        --success:     #1a7f37;

        --grad-accent: linear-gradient(135deg, #2196f3 0%, #0d47a1 100%);
        --grad-bg:     radial-gradient(circle at 5%  5%,  rgba(9,105,218,.04) 0%, transparent 45%),
                       radial-gradient(circle at 95% 95%, rgba(13,71,161,.05) 0%, transparent 45%);

        --btn-primary-fg: #ffffff;

        --shadow-1:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
        --shadow-2:    0 4px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
        --shadow-glow: 0 0 0 1px rgba(9,105,218,.25), 0 0 16px rgba(9,105,218,.10);

        --term-bg:     #161b22;
        --term-text:   #c8d3db;
    }
}

/* Expliziter Light-Override (manuell über Toggle gesetzt) */
[data-theme="light"] {
    --bg-0:        #f0f4f8;
    --bg-1:        #ffffff;
    --bg-2:        #f6f9fc;
    --bg-3:        #edf2f7;
    --bg-4:        #dce5ef;
    --border:      #c9d5e0;
    --border-soft: #e2e8f0;

    --text:        #1a2332;
    --text-dim:    #4a5568;
    --text-mute:   #8896a5;

    --accent:      #0969da;
    --accent-2:    #0752b0;
    --accent-dim:  #0552a0;
    --accent-deep: #033e80;
    --accent-rgb:  9, 105, 218;

    --warn:        #b45309;
    --error:       #c53030;
    --error-rgb:   197, 48, 48;
    --link:        #0969da;
    --success:     #1a7f37;

    --grad-accent: linear-gradient(135deg, #2196f3 0%, #0d47a1 100%);
    --grad-bg:     radial-gradient(circle at 5%  5%,  rgba(9,105,218,.04) 0%, transparent 45%),
                   radial-gradient(circle at 95% 95%, rgba(13,71,161,.05) 0%, transparent 45%);

    --btn-primary-fg: #ffffff;

    --shadow-1:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --shadow-2:    0 4px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
    --shadow-glow: 0 0 0 1px rgba(9,105,218,.25), 0 0 16px rgba(9,105,218,.10);

    --term-bg:     #161b22;
    --term-text:   #c8d3db;
}

/* Sanfte Übergänge nur während des manuellen Theme-Wechsels */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: background-color 200ms ease, color 200ms ease,
                border-color 200ms ease, box-shadow 200ms ease !important;
}

/* === Basis ===================================================== */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg-0);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
    background-image: var(--grad-bg);
    background-attachment: fixed;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: none; }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

::selection { background: rgba(var(--accent-rgb), .28); color: var(--text); }

::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* === Sidebar ================================================== */
.sidebar {
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}
.sidebar::after {
    content: "";
    position: absolute;
    top: 0; right: -1px; bottom: 0;
    width: 1px;
    background: var(--grad-accent);
    opacity: 0.30;
    pointer-events: none;
}

.sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .07) 0%, transparent 65%);
}

.sidebar__brand {
    color: var(--text);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.sidebar__brand:hover { text-decoration: none; }
.sidebar__brand-mark {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    margin-right: 9px;
    vertical-align: middle;
    object-fit: contain;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), .25);
}
.sidebar__brand-dot {
    color: var(--accent);
    margin-left: 1px;
    animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

.sidebar__head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar__head-theme {
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text);
    width: 28px;
    height: 26px;
    padding: 0;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sidebar__head-theme:hover {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: rgba(var(--accent-rgb), .12);
}

.sidebar__toggle {
    display: none;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 4px 10px;
    border-radius: var(--radius);
    cursor: pointer;
}

.sidebar__search {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
}
.sidebar__search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    font-size: 13px;
    pointer-events: none;
}
.sidebar__search input {
    width: 100%;
    background: var(--bg-0);
    border: 1px solid var(--border-soft);
    color: var(--text);
    padding: 7px 10px 7px 30px;
    border-radius: var(--radius-lg);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    font-size: 13px;
}
.sidebar__search input::placeholder { color: var(--text-mute); }
.sidebar__search input:focus {
    border-color: var(--accent-dim);
    background: var(--bg-1);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .14);
}

.sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0 16px;
}

/* Kategorie-Label mit Trennlinie */
.cat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 5px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--text-mute);
    font-weight: 700;
    white-space: nowrap;
}
.cat::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-soft);
    opacity: 0.9;
}

/* Tool-Link: Pill-Design mit Icon-Container */
.tool-link {
    display: flex;
    gap: 9px;
    align-items: center;
    margin: 1px 8px;
    padding: 7px 10px;
    color: var(--text-dim);
    cursor: pointer;
    border-left: 2px solid transparent;
    border-radius: var(--radius);
    user-select: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tool-link:hover {
    background: rgba(var(--accent-rgb), .07);
    color: var(--text);
    text-decoration: none;
}
.tool-link.is-active {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .05));
    border-left-color: var(--accent);
    color: var(--accent);
}

/* Icon-Container (kleines Badge) */
.tool-link__icon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: var(--bg-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    color: var(--text-dim);
    transition: background 0.12s, color 0.12s;
}
.tool-link:hover .tool-link__icon {
    background: rgba(var(--accent-rgb), .12);
    color: var(--accent);
}
.tool-link.is-active .tool-link__icon {
    background: rgba(var(--accent-rgb), .20);
    color: var(--accent);
}

.tool-link__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    min-width: 0;
}
.tool-link__title { font-size: 13px; font-weight: 500; }
.tool-link__desc {
    font-size: 11px;
    color: var(--text-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__foot {
    padding: 10px 14px;
    border-top: 1px solid var(--border-soft);
    font-size: 11px;
    color: var(--text-mute);
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .02), transparent);
}
.sidebar__foot-version {
    flex: none;
    font-size: 10px;
    letter-spacing: 0.3px;
    color: var(--text-mute);
    opacity: 0.7;
}
.sidebar__foot-count {
    flex: 1;
    font-size: 10px;
}


.sidebar__foot-logout {
    flex: none;
    color: var(--text-mute);
    text-decoration: none;
    padding: 2px 7px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    font-size: 10px;
    transition: color 120ms, border-color 120ms, background 120ms;
}
.sidebar__foot-logout:hover {
    color: var(--error);
    border-color: var(--error);
    background: rgba(var(--error-rgb), .06);
}

/* === Main ==================================================== */
.main {
    padding: 28px clamp(20px, 4vw, 48px);
    overflow-x: hidden;
}

/* === Welcome / Landing ====================================== */
.welcome {
    max-width: 1080px;
    margin: 0 auto;
    padding-bottom: 48px;
}
.welcome__hero {
    position: relative;
    text-align: center;
    padding: clamp(40px, 8vh, 80px) 16px 28px;
}
.welcome__hero::after {
    content: "";
    display: block;
    width: 80px;
    height: 1px;
    margin: 28px auto 0;
    background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
    opacity: 0.6;
}
.welcome__logo {
    display: block;
    margin: 0 auto 20px;
    width: clamp(80px, 12vw, 112px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 28px rgba(var(--accent-rgb), .28));
}
.welcome__chip {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    border-radius: 999px;
    color: var(--text-dim);
    margin-bottom: 20px;
}
.welcome__chip-version { text-transform: none; }
.welcome__title {
    margin: 0;
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 700;
    letter-spacing: -0.5px;
    background: var(--grad-accent);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.welcome__title-accent {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
    animation: blink 1.1s steps(2, start) infinite;
}
.welcome__sub {
    margin: 14px auto 0;
    color: var(--text-dim);
    font-size: 15px;
    max-width: 60ch;
}

.welcome__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.welcome__stat {
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-mute);
    padding: 6px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
}
.welcome__stat strong {
    color: var(--text);
    font-weight: 700;
    margin-right: 4px;
    letter-spacing: 0.5px;
}

.welcome__section { margin-top: 36px; }
.welcome__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px 6px;
    border-bottom: 1px solid var(--border-soft);
}
.welcome__section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text);
}
.welcome__section--history .welcome__section-title { color: var(--accent); }
.welcome__section-sub {
    font-size: 11px;
    color: var(--text-mute);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.welcome__all  { margin-top: 36px; }
.cat-block     { margin-top: 22px; }
.cat-block__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 0 2px;
}
.cat-block__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.cat-block__count {
    font-size: 10px;
    color: var(--text-mute);
    padding: 1px 8px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.tool-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.tool-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-dim);
    padding: 30px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

.tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 16px;
    background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 55%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Akzent-Linie am oberen Rand, erscheint bei Hover (wie das Terminal-Fenster). */
.tool-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--grad-accent);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.tool-card:hover {
    border-color: var(--accent-dim);
    transform: translateY(-3px);
    box-shadow: var(--shadow-2), var(--shadow-glow);
    text-decoration: none;
}
.tool-card:hover::before { opacity: 0.9; }
.tool-card__icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(var(--accent-rgb), .10);
    border: 1px solid rgba(var(--accent-rgb), .18);
    font-size: 22px;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 8px;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.tool-card:hover .tool-card__icon {
    background: rgba(var(--accent-rgb), .16);
    border-color: rgba(var(--accent-rgb), .32);
}
.tool-card__title { font-size: 16px; font-weight: 600; }
.tool-card__desc  { font-size: 12px; color: var(--text-dim); }
.tool-card__cat {
    margin-top: 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-mute);
}

.tool-card--compact {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}
.tool-card--compact .tool-card__icon    { width: 34px; height: 34px; border-radius: 9px; font-size: 18px; margin-bottom: 0; flex: 0 0 auto; }
.tool-card--compact .tool-card__body    { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool-card--compact .tool-card__title   { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-card--compact .tool-card__cat     { margin-top: 0; font-size: 9px; }

/* === Aktive Tool-Ansicht ===================================== */
.tool { max-width: 980px; margin: 0 auto; }
.tool__head {
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.tool__title-row { display: flex; align-items: center; gap: 14px; }
.tool__icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 18px;
}
.tool__title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    background: var(--grad-accent);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.tool__desc { margin: 8px 0 0; color: var(--text-dim); font-size: 13px; }

/* === Formularfelder ========================================= */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
    font-size: 10px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
}
.field input, .field select {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 11px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field input::placeholder { color: var(--text-mute); }
.field input:focus, .field select:focus {
    border-color: var(--accent-dim);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13);
}
.field--grow  { flex: 1 1 240px; }
.field--small input { width: 100px; }

.btn {
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 9px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
    font-weight: 500;
}
.btn:hover {
    border-color: var(--accent-dim);
    color: var(--accent);
    background: rgba(var(--accent-rgb), .06);
    transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { color: var(--text); border-color: var(--border); background: var(--bg-2); transform: none; }

.btn--primary {
    background: var(--grad-accent);
    color: var(--btn-primary-fg);
    border-color: transparent;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), .18);
}
.btn--primary:hover {
    color: var(--btn-primary-fg);
    background: var(--grad-accent);
    box-shadow: var(--shadow-glow), 0 4px 14px rgba(var(--accent-rgb), .28);
    transform: translateY(-1px);
}
.btn--danger { color: var(--error); }
.btn--danger:hover {
    color: var(--error);
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(var(--error-rgb), .12);
    background: rgba(var(--error-rgb), .06);
}

.error-msg { color: var(--error); font-size: 12px; margin-top: 6px; min-height: 1em; }

/* === Subnetz: Schnellkonvertierungs-Block ==================== */
.sn-conv {
    margin-top: 18px;
    padding: 14px 16px 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: rgba(var(--accent-rgb), .03);
}
.sn-conv__title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--accent);
    margin-bottom: 10px;
    font-weight: 700;
}

/* === Toast =================================================== */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-3);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 10px 20px;
    border-radius: var(--radius);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 1000;
    box-shadow: var(--shadow-2);
    font-size: 13px;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--ok  { border-color: var(--accent-dim); }
.toast--err { border-color: var(--error); color: var(--error); }

/* === Passwort-Generator ===================================== */
.pg-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.pg-tab {
    flex: 1 1 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 0;
    color: var(--text-dim);
    padding: 10px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.pg-tab:hover { color: var(--text); background: var(--bg-3); }
.pg-tab.is-active {
    background: var(--bg-1);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent-dim), var(--shadow-1);
}
.pg-tab__icon {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-mute);
    letter-spacing: -0.5px;
    min-width: 18px;
    text-align: center;
}
.pg-tab.is-active .pg-tab__icon { color: var(--accent); }
.pg-tab__label { font-weight: 600; }

.pg-section           { margin-bottom: 20px; }
.pg-section:last-child { margin-bottom: 8px; }
.pg-section__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 12px;
}
.pg-section__title {
    font-size: 10px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 700;
}
.pg-section__action {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 4px 11px;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pg-section__action:hover {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: rgba(var(--accent-rgb), .06);
}

.pg-live {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-1);
}
.pg-live__row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pg-live__value {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 500;
    color: var(--text);
    word-break: break-all;
    user-select: all;
    letter-spacing: 0.4px;
    line-height: 1.4;
}
.pg-live__actions { display: flex; gap: 6px; flex-shrink: 0; }
.pg-live__btn {
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.1s;
}
.pg-live__btn:hover { color: var(--accent); border-color: var(--accent-dim); background: var(--bg-4); }
.pg-live__btn:active { transform: scale(0.93); }
.pg-live__btn svg { display: block; }
.pg-live__meter { display: flex; align-items: center; gap: 14px; }
.pg-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-4);
    border-radius: 3px;
    overflow: hidden;
}
.pg-bar__fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease-out;
}
.pg-bar__fill--weak   { background: var(--error); }
.pg-bar__fill--medium { background: var(--warn); }
.pg-bar__fill--strong { background: var(--success); }
.pg-live__info { display: flex; align-items: baseline; gap: 10px; font-size: 12px; white-space: nowrap; }
.pg-live__bits { color: var(--text-dim); font-family: var(--font-mono); font-weight: 600; }

.pg-panel {
    display: none;
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: rgba(var(--accent-rgb), .025);
}
.pg-panel.is-active { display: block; }
.pg-panel .form-row:last-child { margin-bottom: 0; }
.pg-checks { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 6px; }
.pg-checks + .pg-checks { margin-top: 10px; }
.pg-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.pg-check:hover { color: var(--text); }
.pg-check input { margin: 0; cursor: pointer; accent-color: var(--accent); width: 14px; height: 14px; }

.pg-strength         { font-weight: 700; }
.pg-strength--weak   { color: var(--error); }
.pg-strength--medium { color: var(--warn); }
.pg-strength--strong { color: var(--success); }

.pg-result { margin-top: 8px; }
.pg-result__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}
.pg-result__bits { color: var(--accent); font-weight: 700; }
.pg-result__list { display: flex; flex-direction: column; gap: 6px; }
.pg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    transition: border-color 0.15s;
}
.pg-item:hover { border-color: var(--accent-dim); }
.pg-item__value { flex: 1; font-family: var(--font-mono); color: var(--text); word-break: break-all; user-select: all; }
.pg-item__copy {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 4px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    transition: color 0.15s, border-color 0.15s;
}
.pg-item__copy:hover { color: var(--accent); border-color: var(--accent-dim); }

/* === Responsive ============================================= */
@media (max-width: 780px) {
    body { grid-template-columns: 1fr; }
    .sidebar { position: relative; min-height: auto; }
    .sidebar::after { display: none; }
    .sidebar__toggle { display: inline-block; }
    .sidebar.is-collapsed .sidebar__search,
    .sidebar.is-collapsed .sidebar__nav,
    .sidebar.is-collapsed .sidebar__foot { display: none; }
    .welcome__hero { padding-top: 32px; }
    /* Auf Mobile: Tool-Links wieder volle Breite ohne Margin-Pill */
    .tool-link { margin: 1px 4px; }
}

/* ===================================================================
   Generisches Section / Panel-Scaffold (Hashes, TOTP, CSR, Base64)
   =================================================================== */
.x-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.x-tab {
    flex: 1 1 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 0;
    color: var(--text-dim);
    padding: 10px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.x-tab:hover { color: var(--text); background: var(--bg-3); }
.x-tab.is-active {
    background: var(--bg-1);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent-dim), var(--shadow-1);
}
.x-tab__icon {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-mute);
    min-width: 18px;
    text-align: center;
}
.x-tab.is-active .x-tab__icon { color: var(--accent); }
.x-tab__label { font-weight: 600; }

.x-section            { margin-bottom: 20px; }
.x-section:last-child  { margin-bottom: 8px; }
.x-section__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 12px;
}
.x-section__title {
    font-size: 10px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 700;
}
.x-section__hint { font-size: 11px; color: var(--text-mute); font-style: italic; }

.x-panel {
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: rgba(var(--accent-rgb), .025);
}
.x-panel + .x-panel { margin-top: 12px; }
.x-panel .form-row:last-child { margin-bottom: 0; }
.x-panel--solid {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-1);
}

.x-checks { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 6px; }
.x-checks + .x-checks { margin-top: 10px; }
.x-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.x-check:hover { color: var(--text); }
.x-check input { margin: 0; cursor: pointer; accent-color: var(--accent); width: 14px; height: 14px; }

/* === Hash-Generator ========================================= */
.hs-panel           { display: none; }
.hs-panel.is-active { display: block; }
.hs-panel textarea {
    width: 100%;
    min-height: 110px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 13px;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hs-panel textarea:focus {
    border-color: var(--accent-dim);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13);
}

.hs-drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 28px 16px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    color: var(--text-dim);
    text-align: center;
}
.hs-drop:hover, .hs-drop.is-hover {
    border-color: var(--accent-dim);
    background: rgba(var(--accent-rgb), .05);
    color: var(--text);
}
.hs-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hs-drop__icon { font-size: 22px; color: var(--accent); font-family: var(--font-mono); }
.hs-drop__hint { font-size: 12px; color: var(--text-mute); }
.hs-fileinfo { margin-top: 10px; font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
.hs-fileinfo.is-set { color: var(--accent); }

.hs-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.hs-actions__hint { font-size: 12px; color: var(--text-mute); }

.hs-result { margin-top: 8px; }
.hs-result__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}
.hs-result__src  { color: var(--accent); font-weight: 700; }
.hs-result__list { display: flex; flex-direction: column; gap: 6px; }
.hs-row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    transition: border-color 0.15s, background 0.15s;
}
.hs-row:hover { border-color: var(--accent-dim); background: var(--bg-3); }
.hs-row__name {
    color: var(--accent);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    font-family: var(--font-mono);
}
.hs-row__value {
    font-family: var(--font-mono);
    color: var(--text);
    word-break: break-all;
    user-select: all;
    font-size: 13px;
    line-height: 1.4;
}
.hs-row__value--pending { color: var(--text-mute); font-style: italic; }
.hs-row__value--err     { color: var(--error); }
.hs-row__copy {
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 5px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 0.4px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.hs-row__copy:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-dim); background: var(--bg-4); }
.hs-row__copy:disabled { opacity: 0.35; cursor: not-allowed; }

/* === TOTP-Tester ================================================= */
.tt-display {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 18px 20px 20px;
    box-shadow: var(--shadow-1);
}
.tt-codes {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
    align-items: stretch;
}
.tt-code {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 12px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s;
}
.tt-code:hover { border-color: var(--accent-dim); }
.tt-code__label {
    font-size: 10px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
}
.tt-code__value {
    font-family: var(--font-mono);
    font-size: 22px;
    letter-spacing: 4px;
    color: var(--text-dim);
    user-select: all;
    font-weight: 500;
}
.tt-code--main {
    background: var(--bg-4);
    border-color: var(--accent-dim);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .20),
                0 0 24px rgba(var(--accent-rgb), .10);
}
.tt-code--main .tt-code__value {
    font-size: 38px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 6px;
    text-shadow: 0 0 18px rgba(var(--accent-rgb), .25);
}
.tt-code__copy {
    margin-top: 4px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 4px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 11px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tt-code__copy:hover {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: rgba(var(--accent-rgb), .06);
}

.tt-progress { display: flex; flex-direction: column; gap: 8px; }
.tt-progress__bar {
    height: 6px;
    background: var(--bg-4);
    border-radius: 3px;
    overflow: hidden;
}
.tt-progress__fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: var(--grad-accent);
    transition: width 0.25s linear;
}
.tt-progress__fill--warn { background: var(--warn); }
.tt-progress__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12px;
}
.tt-progress__count { font-family: var(--font-mono); font-weight: 700; color: var(--accent); font-size: 13px; }
.tt-progress__info  { color: var(--text-mute); }

.tt-empty {
    background: var(--bg-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 30px 20px;
    text-align: center;
    color: var(--text-mute);
    font-size: 13px;
}
.tt-qr-info--err { color: var(--error); }

/* === CSR-Decoder ============================================== */
.cd-input {
    width: 100%;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cd-input:focus {
    border-color: var(--accent-dim);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13);
}
.cd-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* === Cronjob-Generator ======================================= */
.cj-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

.zr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

.cd-result { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.cd-card {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.cd-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(var(--accent-rgb), .05);
    border-bottom: 1px solid var(--border-soft);
}
.cd-card__title {
    font-size: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 700;
}
.cd-card__chip { font-size: 10px; color: var(--text-mute); font-family: var(--font-mono); }
.cd-card__body { display: flex; flex-direction: column; }
.cd-row {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.cd-row:last-child { border-bottom: none; }
.cd-row:hover      { background: rgba(var(--accent-rgb), .025); }
.cd-row__label {
    color: var(--text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding-top: 4px;
    font-weight: 600;
}
.cd-row__value { color: var(--text); font-size: 13px; word-break: break-word; user-select: all; }
.cd-row__value--mono   { font-family: var(--font-mono); font-size: 12px; }
.cd-row__value--multi {
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow: auto;
    background: var(--bg-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.5;
}
.cd-row__value--accent { color: var(--accent); font-weight: 600; }
.cd-row__copy {
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 4px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 11px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    align-self: start;
}
.cd-row__copy:hover { color: var(--accent); border-color: var(--accent-dim); background: var(--bg-4); }

/* === Case-Converter ========================================== */
.cc-input textarea {
    width: 100%;
    min-height: 110px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 13px;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cc-input textarea:focus {
    border-color: var(--accent-dim);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13);
}
.cc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.cc-card {
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.cc-card:hover {
    border-color: var(--accent-dim);
    background: rgba(var(--accent-rgb), .03);
    box-shadow: var(--shadow-1);
}
.cc-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-3);
}
.cc-card__label {
    font-size: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-weight: 700;
}
.cc-card__copy {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 3px 9px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 10px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cc-card__copy:hover { color: var(--accent); border-color: var(--accent-dim); background: var(--bg-4); }
.cc-card__value {
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text);
    word-break: break-word;
    white-space: pre-wrap;
    min-height: 1.5em;
    user-select: all;
}
.cc-card__value.is-empty::before {
    content: attr(data-placeholder);
    color: var(--text-mute);
    user-select: none;
}

/* === Lorem-Ipsum ============================================= */
.li-output {
    background: var(--bg-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 14px 16px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 4em;
    max-height: 60vh;
    overflow: auto;
    user-select: all;
}

/* === Base64-Converter ======================================== */
.b64-pane           { display: none; }
.b64-pane.is-active { display: block; }
.b64-opts-row       { margin-top: 10px; }
.b64-dec-checks     { margin-top: 10px; }
.b64-multi {
    white-space: pre;
    overflow: auto;
    max-height: 200px;
    background: var(--bg-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.5;
}

/* ================================================================
   ENTRANCE ANIMATIONS  –  dezent, respektiert Nutzereinstellung
   ================================================================ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Sidebar – einmalig beim Seitenaufruf */
.sidebar { animation: fadeIn 0.35s ease both; }

/* Welcome-Startseite */
.welcome__hero    { animation: fadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.welcome__section,
.welcome__all     { animation: fadeUp 0.4s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Tool-Ansicht – bei jedem Routenwechsel neu erstellt */
.tool { animation: fadeUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Tool-Karten – gestaffelter Einzug (erste 6) */
.tool-grid .tool-card:nth-child(1) { animation: fadeUp 0.35s 0.00s cubic-bezier(0.22, 1, 0.36, 1) both; }
.tool-grid .tool-card:nth-child(2) { animation: fadeUp 0.35s 0.04s cubic-bezier(0.22, 1, 0.36, 1) both; }
.tool-grid .tool-card:nth-child(3) { animation: fadeUp 0.35s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both; }
.tool-grid .tool-card:nth-child(4) { animation: fadeUp 0.35s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both; }
.tool-grid .tool-card:nth-child(5) { animation: fadeUp 0.35s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both; }
.tool-grid .tool-card:nth-child(6) { animation: fadeUp 0.35s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both; }

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .welcome__hero,
    .welcome__section,
    .welcome__all,
    .tool,
    .tool-grid .tool-card { animation: none; }
}

/* === Mobile =================================================== */
@media (max-width: 760px) {
    .tt-codes              { grid-template-columns: 1fr; }
    .tt-code--main         { order: -1; }
    .hs-row                { grid-template-columns: 80px 1fr; }
    .hs-row__copy          { grid-column: 2; justify-self: end; }
    .cd-row                { grid-template-columns: 1fr; }
    .cd-row__copy          { justify-self: end; }
    .cd-card__head         { padding: 10px 12px; }
    .cd-row                { padding: 10px 12px; }
    .cc-grid               { grid-template-columns: 1fr; }
}