/* ==========================================================================
   LEVELUPHOST — ADMIN CONTROL PANEL
   ==========================================================================
   Complete visual redesign.

   Existing functionality remains untouched.
   This stylesheet changes:
   - visual hierarchy
   - navigation
   - header
   - sidebar
   - controls
   - cards
   - tables
   - forms
   - panels
   - mobile navigation
   - footer
   - CMS compatibility
   ========================================================================== */


/* ==========================================================================
   01. DESIGN SYSTEM
   ========================================================================== */

:root {

    /* Brand */

    --brand-50: 240 253 250;
    --brand-100: 204 251 241;
    --brand-200: 153 246 228;
    --brand-300: 94 234 212;
    --brand-400: 45 212 191;
    --brand-500: 20 184 166;
    --brand-600: 13 148 136;
    --brand-700: 15 118 110;
    --brand-800: 17 94 89;
    --brand-900: 19 78 74;


    /* Background */

    --canvas: 9 11 14;
    --canvas-raised: 12 15 19;

    --sidebar: 11 14 18;

    --surface: 16 20 25;
    --surface-raised: 20 25 31;
    --surface-hover: 24 30 37;

    --sunken: 7 9 12;


    /* Text */

    --ink-strong: 244 247 249;
    --ink: 205 212 218;
    --ink-muted: 145 155 164;
    --ink-subtle: 94 104 113;

    --ink-invert: 5 9 10;


    /* Borders */

    --line: 30 37 44;
    --line-soft: 24 31 37;
    --line-strong: 48 58 67;


    /* Semantic */

    --success: 34 197 139;
    --warning: 245 158 11;
    --danger: 239 68 68;
    --info: 59 130 246;


    /* Radius */

    --radius-xs: 5px;
    --radius-sm: 7px;
    --radius-md: 10px;
    --radius-lg: 13px;
    --radius-xl: 17px;


    /* Shadows */

    --shadow-xs:
        0 1px 2px rgb(0 0 0 / .20);

    --shadow-sm:
        0 6px 20px rgb(0 0 0 / .20);

    --shadow-md:
        0 14px 38px rgb(0 0 0 / .28);

    --shadow-lg:
        0 28px 80px rgb(0 0 0 / .42);


    /* Layout */

    --sidebar-width: 258px;
    --topbar-height: 68px;
    --content-width: 1500px;

}


/* ==========================================================================
   01b. KOMPATIBILITAET MIT DEM KERN (resources/css/app.css)
   --------------------------------------------------------------------------
   Die geerbten Seiten (Login, Konto, Checkout, Tickets, Module) nutzen die
   Tailwind-Tokens bg-accent-*, text-accent-*, ring-accent-* und bg-elevated.
   app.css loest diese zu rgb(var(--a-*)) bzw. rgb(var(--elevated)) auf — die
   Variablennamen muessen vom Theme kommen. Dieses Design fuehrt sie als
   --brand-* und --surface-raised; hier werden sie verknuepft.
   Fehlt der Block, sind Login-Button, Eingabefelder, Fokus-Ringe und andere
   accent-/elevated-Flaechen farblos (transparent) — rgb() ohne Wert ist
   ungueltig und die Deklaration wird verworfen.
   ========================================================================== */

:root {
    --a-50:  var(--brand-50);
    --a-100: var(--brand-100);
    --a-200: var(--brand-200);
    --a-300: var(--brand-300);
    --a-400: var(--brand-400);
    --a-500: var(--brand-500);
    --a-600: var(--brand-600);
    --a-700: var(--brand-700);
    --a-800: var(--brand-800);
    --a-900: var(--brand-900);
    --a-950: var(--brand-900); /* Design hat keine 950er-Stufe */

    --elevated: var(--surface-raised);
}


/* ==========================================================================
   02. RESET / BASE
   ========================================================================== */

html {
    background: rgb(var(--canvas));
    scroll-behavior: smooth;
}

html,
body,
.font-sans {

    font-family:
        "Inter",
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif,
        "Twemoji Country Flags";
}

body {

    min-height: 100vh;
    margin: 0;

    /* Sticky Footer: Der Inhaltsbereich dehnt sich, der Footer sitzt unten am
       Fensterrand — man muss also nicht scrollen, nur um ihn zu sehen.
       Vorher erzwang .admin-main min-height: calc(100vh - topbar); zusammen
       mit dem Footer wurde die Seite dadurch auch ohne Inhalt zu hoch. */
    display:
        flex;

    flex-direction:
        column;

    background:
        rgb(var(--canvas));

    color:
        rgb(var(--ink));

    font-size: 14px;

    line-height: 1.5;

    text-rendering: optimizeLegibility;

    font-feature-settings:
        "cv11" 1,
        "ss01" 1;
}

* {
    -webkit-tap-highlight-color: transparent;

    scrollbar-width: thin;

    scrollbar-color:
        rgb(var(--line-strong))
        transparent;
}

*::selection {

    background:
        rgb(var(--brand-500) / .25);

    color:
        rgb(var(--ink-strong));
}

*::-webkit-scrollbar {

    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {

    background:
        rgb(var(--line-strong));

    border:
        2px solid rgb(var(--canvas));

    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {

    background:
        rgb(var(--brand-600));
}

img {

    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    -webkit-appearance: none;
}

a {

    color: inherit;

    transition:
        color .16s ease,
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {

    color:
        rgb(var(--ink-strong));

    font-family:
        "Inter",
        ui-sans-serif,
        system-ui,
        sans-serif;

    letter-spacing:
        -.02em;
}

.font-display {

    font-family:
        "Inter",
        sans-serif;
}

.font-mono {

    font-family:
        "JetBrains Mono",
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
}


/* ==========================================================================
   03. MAIN APPLICATION STRUCTURE
   ========================================================================== */

body {

    padding-left:
        var(--sidebar-width);

    /* Die Topbar ist position: fixed und traegt damit keine Hoehe bei — ohne
       diesen Abstand beginnt der Inhalt unter/hinter ihr. */
    padding-top:
        var(--topbar-height);
}

.admin-main {

    /* Frueher: min-height: calc(100vh - var(--topbar-height)) — das machte die
       Seite zusammen mit dem Footer hoeher als das Fenster. Jetzt waechst der
       Bereich in den freien Platz der Flex-Spalte (Sticky Footer). */
    flex:
        1 0 auto;

    position:
        relative;

    z-index:
        1;

    padding:
        30px;

    max-width:
        calc(var(--content-width) + 60px);

    margin:
        0 auto;
}


/* Prevent old full-width components from becoming cramped */

.admin-main > * {
    max-width: 100%;
}


/* ==========================================================================
   04. SIDEBAR
   ========================================================================== */

.admin-sidebar {

    position:
        fixed;

    inset:
        0 auto 0 0;

    width:
        var(--sidebar-width);

    z-index:
        80;

    display:
        flex;

    flex-direction:
        column;

    background:
        rgb(var(--sidebar));

    border-right:
        1px solid rgb(var(--line));

    box-shadow:
        8px 0 30px rgb(0 0 0 / .12);
}


/* Brand */

.admin-sidebar-brand {

    height:
        var(--topbar-height);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        0 17px;

    border-bottom:
        1px solid rgb(var(--line));
}

.admin-brand {

    display:
        inline-flex;

    align-items:
        center;

    min-width:
        0;

    gap:
        10px;

    text-decoration:
        none;
}

.admin-brand-logo {

    display:
        block;

    max-width:
        155px;

    max-height:
        36px;

    width:
        auto;

    object-fit:
        contain;
}

.admin-brand-symbol {

    width:
        34px;

    height:
        34px;

    flex:
        none;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    background:
        rgb(var(--brand-500));

    color:
        rgb(var(--ink-invert));

    box-shadow:
        0 7px 18px rgb(var(--brand-500) / .18);
}

.admin-brand-symbol i {
    font-size:
        14px;
}

.admin-brand-name {

    max-width:
        135px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        rgb(var(--ink-strong));

    font-size:
        14px;

    font-weight:
        750;
}

.admin-brand-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    flex:
        none;

    color:
        rgb(var(--ink-subtle));

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}

.admin-brand-status span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        rgb(var(--success));

    box-shadow:
        0 0 0 3px rgb(var(--success) / .08);
}


/* Sidebar scroll */

.admin-sidebar-scroll {

    flex:
        1;

    min-height:
        0;

    overflow:
        auto;

    padding:
        14px 10px;
}


/* Navigation groups */

.admin-nav-section {

    margin-bottom:
        18px;
}

.admin-nav-caption {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        0 10px 7px;

    color:
        rgb(var(--ink-subtle));

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}

.admin-nav-caption i {
    font-size:
        9px;
}


/* Navigation item */

.admin-nav-link {

    position:
        relative;

    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 10px;

    margin:
        2px 0;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-sm);

    color:
        rgb(var(--ink-muted));

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        550;
}

.admin-nav-link:hover {

    color:
        rgb(var(--ink-strong));

    background:
        rgb(255 255 255 / .035);

    border-color:
        rgb(var(--line-soft));
}

.admin-nav-link:active {

    background:
        rgb(var(--brand-500) / .07);
}

.admin-nav-link--dashboard {

    background:
        rgb(var(--brand-500) / .08);

    border-color:
        rgb(var(--brand-500) / .14);

    color:
        rgb(var(--brand-300));
}

.admin-nav-link--dashboard:hover {

    background:
        rgb(var(--brand-500) / .12);

    border-color:
        rgb(var(--brand-500) / .20);
}

.admin-nav-icon {

    width:
        18px;

    height:
        18px;

    flex:
        none;

    display:
        grid;

    place-items:
        center;

    color:
        currentColor;
}

.admin-nav-icon svg {

    width:
        17px;

    height:
        17px;
}

.admin-nav-icon i {
    width:
        17px;

    text-align:
        center;

    font-size:
        13px;
}

.admin-nav-label {

    flex:
        1;

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.admin-nav-count {

    min-width:
        19px;

    height:
        19px;

    padding:
        0 5px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        5px;

    background:
        rgb(var(--brand-500) / .12);

    color:
        rgb(var(--brand-300));

    font-size:
        10px;

    font-weight:
        800;
}

.admin-nav-count--alert {

    background:
        rgb(var(--danger) / .12);

    color:
        rgb(252 165 165);
}

.admin-nav-external {

    width:
        13px;

    height:
        13px;

    display:
        grid;

    place-items:
        center;

    color:
        rgb(var(--ink-subtle));
}

.admin-nav-external svg {

    width:
        12px;

    height:
        12px;
}


/* Sidebar bottom */

.admin-sidebar-footer {

    padding:
        10px;

    border-top:
        1px solid rgb(var(--line));
}

.admin-sidebar-home {

    min-height:
        39px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 10px;

    border:
        1px solid rgb(var(--line));

    border-radius:
        var(--radius-sm);

    color:
        rgb(var(--ink-muted));

    text-decoration:
        none;

    font-size:
        12px;
}

.admin-sidebar-home:hover {

    color:
        rgb(var(--ink-strong));

    background:
        rgb(255 255 255 / .025);

    border-color:
        rgb(var(--line-strong));
}

.admin-sidebar-home > span:nth-child(2) {
    flex:
        1;
}


/* ==========================================================================
   05. TOPBAR
   ========================================================================== */

.admin-topbar {

    position:
        fixed;

    top:
        0;

    left:
        var(--sidebar-width);

    right:
        0;

    height:
        var(--topbar-height);

    z-index:
        70;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0 26px;

    background:
        rgb(var(--canvas) / .92);

    border-bottom:
        1px solid rgb(var(--line));

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}

.admin-topbar-left,
.admin-topbar-right {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}

.admin-topbar-left {
    min-width:
        0;
}

.admin-topbar-right {
    flex:
        none;
}


/* Breadcrumb */

.admin-breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        0;

    font-size:
        12px;
}

.admin-breadcrumb-muted {

    color:
        rgb(var(--ink-subtle));

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.admin-breadcrumb-separator {
    color:
        rgb(var(--line-strong));
}

.admin-breadcrumb-current {

    color:
        rgb(var(--ink-strong));

    font-weight:
        650;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* System status */

.admin-system-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        32px;

    padding:
        0 10px;

    border:
        1px solid rgb(var(--line));

    border-radius:
        var(--radius-sm);

    color:
        rgb(var(--ink-muted));

    font-size:
        10px;

    font-weight:
        600;
}

.admin-system-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        rgb(var(--success));

    box-shadow:
        0 0 0 3px rgb(var(--success) / .08);
}


/* Topbar tools */

.admin-topbar-tool {

    display:
        flex;

    align-items:
        center;
}

.admin-tool-button {

    position:
        relative;

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-sm);

    background:
        transparent;

    color:
        rgb(var(--ink-muted));

    cursor:
        pointer;
}

.admin-tool-button:hover {

    color:
        rgb(var(--ink-strong));

    background:
        rgb(255 255 255 / .035);

    border-color:
        rgb(var(--line));
}

.admin-tool-button svg {

    width:
        17px;

    height:
        17px;
}

.admin-notification-badge {

    position:
        absolute;

    top:
        1px;

    right:
        1px;

    min-width:
        15px;

    height:
        15px;

    padding:
        0 4px;

    display:
        grid;

    place-items:
        center;

    border:
        2px solid rgb(var(--canvas));

    border-radius:
        999px;

    background:
        rgb(var(--brand-500));

    color:
        rgb(var(--ink-invert));

    font-size:
        8px;

    font-weight:
        850;
}


/* User trigger */

.admin-user-trigger {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-height:
        40px;

    padding:
        3px 7px 3px 4px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-sm);

    background:
        transparent;

    color:
        rgb(var(--ink-muted));

    cursor:
        pointer;

    text-align:
        left;
}

.admin-user-trigger:hover {

    color:
        rgb(var(--ink-strong));

    background:
        rgb(255 255 255 / .035);

    border-color:
        rgb(var(--line));
}

.admin-user-trigger > svg {

    width:
        13px;

    height:
        13px;
}

.admin-user-avatar,
.admin-account-avatar {

    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    flex:
        none;

    border:
        1px solid rgb(var(--brand-500) / .25);

    border-radius:
        8px;

    background:
        rgb(var(--brand-500) / .10);

    color:
        rgb(var(--brand-300));

    font-size:
        10px;

    font-weight:
        800;
}

.admin-user-info {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    max-width:
        160px;
}

.admin-user-info strong {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        rgb(var(--ink-strong));

    font-size:
        11px;
}

.admin-user-info small {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        rgb(var(--ink-subtle));

    font-size:
        9px;
}


/* ==========================================================================
   06. DROPDOWNS / POPOVERS
   ========================================================================== */

.admin-dropdown {
    position:
        relative;
}

.admin-popover {

    position:
        absolute;

    top:
        calc(100% + 9px);

    right:
        0;

    width:
        340px;

    overflow:
        hidden;

    background:
        rgb(var(--surface));

    border:
        1px solid rgb(var(--line-strong));

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-lg);

    opacity:
        0;

    transform:
        translateY(-5px) scale(.985);

    pointer-events:
        none;

    transition:
        opacity .16s ease,
        transform .18s ease;
}

[data-menu][data-open="true"] > .admin-popover {

    opacity:
        1;

    transform:
        none;

    pointer-events:
        auto;
}

.admin-popover-header {

    padding:
        16px;

    border-bottom:
        1px solid rgb(var(--line));
}

.admin-popover-header > div {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}

.admin-popover-header strong {

    color:
        rgb(var(--ink-strong));

    font-size:
        13px;
}

.admin-popover-header span {

    color:
        rgb(var(--ink-subtle));

    font-size:
        10px;
}


/* Cart */

.admin-cart-item {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 15px;

    border-bottom:
        1px solid rgb(var(--line));
}

.admin-cart-icon {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    flex:
        none;

    border:
        1px solid rgb(var(--line));

    border-radius:
        7px;

    background:
        rgb(var(--sunken));

    color:
        rgb(var(--ink-muted));
}

.admin-cart-icon svg {

    width:
        15px;

    height:
        15px;
}

.admin-cart-content {

    min-width:
        0;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;
}

.admin-cart-content strong {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        rgb(var(--ink-strong));

    font-size:
        11px;
}

.admin-cart-content span {

    color:
        rgb(var(--ink-subtle));

    font-size:
        10px;
}

.admin-cart-price {

    color:
        rgb(var(--ink-strong));

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        11px;
}

.admin-popover-summary {

    padding:
        14px 15px;
}

.admin-popover-summary > div:first-child {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        12px;

    color:
        rgb(var(--ink-muted));

    font-size:
        11px;
}

.admin-popover-summary > div:first-child strong {

    color:
        rgb(var(--ink-strong));

    font-family:
        "JetBrains Mono",
        monospace;
}

.admin-popover-actions {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;
}

.admin-empty-popover {

    padding:
        36px 20px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        9px;

    color:
        rgb(var(--ink-muted));

    text-align:
        center;
}

.admin-empty-icon {

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgb(var(--line));

    border-radius:
        9px;

    background:
        rgb(var(--sunken));

    color:
        rgb(var(--ink-subtle));
}


/* Account */

.admin-account-header {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        15px;

    border-bottom:
        1px solid rgb(var(--line));
}

.admin-account-avatar {

    width:
        38px;

    height:
        38px;

    font-size:
        11px;
}

.admin-account-header > div {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}

.admin-account-header strong {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        rgb(var(--ink-strong));

    font-size:
        12px;
}

.admin-account-header span {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        rgb(var(--ink-subtle));

    font-size:
        10px;
}

.admin-account-balance {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin:
        11px;

    padding:
        9px 10px;

    border:
        1px solid rgb(var(--line));

    border-radius:
        7px;

    background:
        rgb(var(--sunken));
}

.admin-account-balance span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        rgb(var(--ink-muted));

    font-size:
        10px;
}

.admin-account-balance svg {

    width:
        14px;

    height:
        14px;
}

.admin-account-balance strong {

    color:
        rgb(var(--ink-strong));

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        10px;
}

.admin-account-menu {

    padding:
        5px 7px;
}

.admin-account-menu a {

    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        0 8px;

    border-radius:
        6px;

    color:
        rgb(var(--ink-muted));

    text-decoration:
        none;

    font-size:
        11px;
}

.admin-account-menu a:hover {

    background:
        rgb(255 255 255 / .035);

    color:
        rgb(var(--ink-strong));
}

.admin-account-menu svg {

    width:
        15px;

    height:
        15px;
}

.admin-account-logout {

    padding:
        7px;

    border-top:
        1px solid rgb(var(--line));
}

.admin-account-logout button {

    width:
        100%;

    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        0 8px;

    border:
        0;

    border-radius:
        6px;

    background:
        transparent;

    color:
        rgb(248 113 113);

    cursor:
        pointer;

    text-align:
        left;

    font-size:
        11px;
}

.admin-account-logout button:hover {

    background:
        rgb(var(--danger) / .08);
}

.admin-account-logout svg {

    width:
        15px;

    height:
        15px;
}

.admin-login-actions {

    display:
        grid;

    gap:
        8px;

    padding:
        14px;
}


/* ==========================================================================
   07. BUTTONS
   ========================================================================== */

.admin-button {

    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 13px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-sm);

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

.admin-button svg {

    width:
        14px;

    height:
        14px;
}

.admin-button:hover {

    transform:
        translateY(-1px);
}

.admin-button--primary {

    background:
        rgb(var(--brand-500));

    border-color:
        rgb(var(--brand-400) / .45);

    color:
        rgb(var(--ink-invert));

    box-shadow:
        0 7px 18px rgb(var(--brand-500) / .14);
}

.admin-button--primary:hover {

    background:
        rgb(var(--brand-400));
}

.admin-button--secondary {

    background:
        rgb(var(--surface-raised));

    border-color:
        rgb(var(--line-strong));

    color:
        rgb(var(--ink-strong));
}

.admin-button--secondary:hover {

    background:
        rgb(var(--surface-hover));

    border-color:
        rgb(var(--brand-500) / .30);
}

.admin-button--full {
    width:
        100%;
}


/* ==========================================================================
   08. MOBILE
   ========================================================================== */

.admin-mobile-trigger {

    width:
        36px;

    height:
        36px;

    display:
        none;

    place-items:
        center;

    border:
        1px solid rgb(var(--line));

    border-radius:
        var(--radius-sm);

    background:
        rgb(var(--surface));

    color:
        rgb(var(--ink-strong));

    cursor:
        pointer;
}

.admin-mobile-trigger svg {

    width:
        17px;

    height:
        17px;
}


/* ==========================================================================
   09. MOBILE DRAWER
   ========================================================================== */

.admin-drawer-root {

    position:
        fixed;

    inset:
        0;

    z-index:
        200;

    pointer-events:
        none;
}

.admin-drawer-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgb(0 0 0 / .65);

    backdrop-filter:
        blur(5px);

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity .25s ease;
}

.admin-drawer-backdrop[data-open="true"] {

    opacity:
        1;

    pointer-events:
        auto;
}

.admin-mobile-drawer {

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        min(88vw, 320px);

    display:
        flex;

    flex-direction:
        column;

    background:
        rgb(var(--sidebar));

    border-right:
        1px solid rgb(var(--line-strong));

    box-shadow:
        20px 0 70px rgb(0 0 0 / .40);

    transform:
        translateX(-100%);

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1);
}

.admin-mobile-drawer[data-open="true"] {

    transform:
        translateX(0);
}

.admin-mobile-head {

    height:
        var(--topbar-height);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 14px;

    border-bottom:
        1px solid rgb(var(--line));
}

.admin-mobile-close {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgb(var(--line));

    border-radius:
        7px;

    background:
        transparent;

    color:
        rgb(var(--ink-muted));

    cursor:
        pointer;
}

.admin-mobile-close svg {

    width:
        17px;

    height:
        17px;
}

.admin-mobile-body {

    flex:
        1;

    overflow:
        auto;

    padding:
        13px 10px;
}

.admin-mobile-group {

    margin-top:
        14px;
}

.admin-mobile-footer {

    padding:
        12px;

    border-top:
        1px solid rgb(var(--line));
}

.admin-mobile-actions {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.admin-footer {

    flex:
        none;

    margin-left:
        0;

    border-top:
        1px solid rgb(var(--line));

    background:
        rgb(var(--sidebar));
}

.admin-footer-inner {

    max-width:
        var(--content-width);

    margin:
        0 auto;

    padding:
        38px 30px 22px;
}

.admin-footer-main {

    display:
        grid;

    grid-template-columns:
        1.7fr repeat(3, 1fr);

    gap:
        35px;

    padding-bottom:
        35px;
}

.admin-footer-brand {

    min-width:
        0;
}

.admin-footer-logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        rgb(var(--ink-strong));

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        750;
}

.admin-footer-logo img {

    max-height:
        32px;

    width:
        auto;
}

.admin-footer-logo-icon {

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        7px;

    background:
        rgb(var(--brand-500));

    color:
        rgb(var(--ink-invert));

    font-size:
        12px;
}

.admin-footer-description {

    max-width:
        350px;

    margin:
        13px 0 0;

    color:
        rgb(var(--ink-subtle));

    font-size:
        11px;

    line-height:
        1.7;
}

.admin-footer-social {

    display:
        flex;

    gap:
        6px;

    margin-top:
        15px;
}

.admin-footer-social a {

    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgb(var(--line));

    border-radius:
        6px;

    background:
        rgb(var(--surface));

    color:
        rgb(var(--ink-subtle));

    text-decoration:
        none;
}

.admin-footer-social a:hover {

    color:
        rgb(var(--brand-300));

    border-color:
        rgb(var(--brand-500) / .25);

    background:
        rgb(var(--brand-500) / .05);
}

.admin-footer-column h3 {

    margin:
        2px 0 10px;

    color:
        rgb(var(--ink-strong));

    font-size:
        11px;

    font-weight:
        700;
}

.admin-footer-links {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        4px;
}

.admin-footer-links a {

    color:
        rgb(var(--ink-subtle));

    text-decoration:
        none;

    font-size:
        11px;
}

.admin-footer-links a:hover {

    color:
        rgb(var(--brand-300));

    transform:
        translateX(2px);
}

.admin-footer-bottom {

    min-height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding-top:
        17px;

    border-top:
        1px solid rgb(var(--line));

    color:
        rgb(var(--ink-subtle));

    font-size:
        10px;
}

.admin-footer-meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;
}

.admin-footer-divider {

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        rgb(var(--line-strong));
}

.admin-footer-powered {

    display:
        flex;

    gap:
        5px;
}

.admin-footer-powered a {

    color:
        rgb(var(--brand-400));

    text-decoration:
        none;
}

.admin-footer-powered a:hover {

    color:
        rgb(var(--brand-300));
}


/* ==========================================================================
   11. CAMPAIGN BAR
   ========================================================================== */

.admin-campaign-bar {

    position:
        relative;

    z-index:
        100;

    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    background:
        rgb(var(--brand-600));

    color:
        rgb(240 253 250);

    font-size:
        11px;

    font-weight:
        650;
}

.admin-campaign-bar .admin-shell {

    width:
        100%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        7px;

    padding:
        7px 15px;
}

.admin-campaign-icon {

    width:
        18px;

    height:
        18px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        5px;

    background:
        rgb(255 255 255 / .12);

    font-size:
        8px;
}


/* ==========================================================================
   12. GENERIC ADMIN CARDS
   ========================================================================== */

.theme-card,
.account-card,
.gg-card {

    background:
        rgb(var(--surface));

    border:
        1px solid rgb(var(--line));

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-xs);
}

.theme-card,
.account-card {

    padding:
        22px;
}

.theme-card:hover,
.account-card:hover {

    border-color:
        rgb(var(--line-strong));
}

.gg-card {

    position:
        relative;

    padding:
        22px;

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.gg-card:hover {

    background:
        rgb(var(--surface-raised));

    border-color:
        rgb(var(--line-strong));

    box-shadow:
        var(--shadow-sm);
}


/* ==========================================================================
   13. FORMS
   ========================================================================== */

.theme-input {

    width:
        100%;

    min-height:
        40px;

    padding:
        0 11px;

    background:
        rgb(var(--sunken));

    border:
        1px solid rgb(var(--line));

    border-radius:
        var(--radius-sm);

    color:
        rgb(var(--ink-strong));

    outline:
        none;

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.theme-input:hover {

    border-color:
        rgb(var(--line-strong));
}

.theme-input:focus {

    background:
        rgb(var(--surface));

    border-color:
        rgb(var(--brand-500));

    box-shadow:
        0 0 0 3px rgb(var(--brand-500) / .10);
}

input::placeholder,
textarea::placeholder {

    color:
        rgb(var(--ink-subtle));
}

input[type="checkbox"],
input[type="radio"] {

    accent-color:
        rgb(var(--brand-500));
}

select,
.product-option-select,
#laufzeit-select {

    appearance:
        none !important;

    width:
        100%;

    min-height:
        40px;

    padding:
        0 35px 0 11px;

    background-color:
        rgb(var(--sunken)) !important;

    background-image:
        linear-gradient(45deg, transparent 50%, rgb(var(--ink-muted)) 50%),
        linear-gradient(135deg, rgb(var(--ink-muted)) 50%, transparent 50%) !important;

    background-position:
        calc(100% - 15px) 17px,
        calc(100% - 10px) 17px !important;

    background-size:
        5px 5px,
        5px 5px !important;

    background-repeat:
        no-repeat !important;

    border:
        1px solid rgb(var(--line)) !important;

    border-radius:
        var(--radius-sm) !important;

    color:
        rgb(var(--ink-strong)) !important;
}


/* ==========================================================================
   14. TABLES
   ========================================================================== */

.theme-table {

    width:
        100%;

    border-collapse:
        separate;

    border-spacing:
        0;

    overflow:
        hidden;
}

.theme-table th {

    padding:
        10px 12px;

    background:
        rgb(var(--sunken));

    border-bottom:
        1px solid rgb(var(--line));

    color:
        rgb(var(--ink-subtle));

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .04em;

    text-align:
        left;

    text-transform:
        uppercase;
}

.theme-table td {

    padding:
        12px;

    border-bottom:
        1px solid rgb(var(--line));

    color:
        rgb(var(--ink));

    font-size:
        12px;

    vertical-align:
        middle;
}

.theme-table tbody tr {

    transition:
        background .14s ease;
}

.theme-table tbody tr:hover {

    background:
        rgb(255 255 255 / .018);
}

.theme-table tbody tr:last-child td {

    border-bottom:
        0;
}


/* ==========================================================================
   15. BUTTON COMPATIBILITY
   ========================================================================== */

.theme-button {

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 15px;

    border:
        1px solid rgb(var(--brand-500) / .35);

    border-radius:
        var(--radius-sm);

    background:
        rgb(var(--brand-500));

    color:
        rgb(var(--ink-invert));

    cursor:
        pointer;

    font-weight:
        700;

    font-size:
        12px;

    box-shadow:
        0 6px 18px rgb(var(--brand-500) / .12);
}

.theme-button:hover {

    background:
        rgb(var(--brand-400));

    transform:
        translateY(-1px);
}


/* ==========================================================================
   16. LEGACY UTILITIES
   ========================================================================== */

.max-w-8xl {
    max-width:
        88rem;
}

.shadow-soft {
    box-shadow:
        var(--shadow-xs);
}

.shadow-card {
    box-shadow:
        var(--shadow-sm);
}

.shadow-pop {
    box-shadow:
        var(--shadow-lg);
}

.shadow-glow {
    box-shadow:
        0 0 0 1px rgb(var(--brand-500) / .12),
        0 10px 30px rgb(var(--brand-500) / .10);
}

.bg-grid,
.bg-dots {
    background-image:
        none;
}

.bg-surface,
.bg-elevated {

    border-radius:
        var(--radius-lg);
}

.accent-text {

    color:
        rgb(var(--brand-300));
}

.glow-accent {

    box-shadow:
        0 0 0 1px rgb(var(--brand-500) / .14),
        0 10px 30px rgb(var(--brand-500) / .10);
}

.hairline {

    border-color:
        rgb(var(--line));
}

.divide-hairline > * + * {

    border-color:
        rgb(var(--line));
}

.bg-accent-400,
.bg-accent-500,
.bg-accent-600,
.bg-accent-700 {

    color:
        rgb(var(--ink-invert)) !important;
}

.bg-danger-500,
.bg-danger-600,
.bg-success-500,
.bg-success-600 {

    color:
        #fff;
}


/* ==========================================================================
   17. CMS
   ========================================================================== */

.account-page {

    padding:
        25px 0;
}

.account-card h1,
.account-card h2 {

    color:
        rgb(var(--ink-strong));

    margin-bottom:
        1rem;
}

.prose {

    color:
        rgb(var(--ink-muted));
}

.prose h1,
.prose h2,
.prose h3 {

    color:
        rgb(var(--ink-strong));
}

.prose i {

    margin-right:
        .25rem;
}


/* ==========================================================================
   18. SECTION / HERO COMPATIBILITY
   ========================================================================== */

.gg-section {

    padding:
        65px 0;
}

.gg-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        rgb(var(--brand-400));

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}

.gg-h2 {

    margin:
        0;

    color:
        rgb(var(--ink-strong));

    font-size:
        clamp(1.6rem, 3vw, 2.25rem);

    font-weight:
        750;

    line-height:
        1.1;
}

.gg-lead {

    max-width:
        680px;

    margin-top:
        11px;

    color:
        rgb(var(--ink-muted));

    line-height:
        1.7;
}

.gg-grid {

    display:
        grid;

    gap:
        15px;
}

.gg-grid--2,
.gg-grid--3,
.gg-grid--4 {

    grid-template-columns:
        1fr;
}

@media (min-width: 640px) {

    .gg-grid--2,
    .gg-grid--3,
    .gg-grid--4 {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {

    .gg-grid--3 {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .gg-grid--4 {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}

.gg-card-ico {

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        13px;

    border:
        1px solid rgb(var(--brand-500) / .16);

    border-radius:
        8px;

    background:
        rgb(var(--brand-500) / .06);

    color:
        rgb(var(--brand-300));
}

.gg-card h3 {

    margin:
        0 0 6px;

    color:
        rgb(var(--ink-strong));

    font-size:
        14px;
}

.gg-card p {

    margin:
        0;

    color:
        rgb(var(--ink-muted));

    font-size:
        12px;

    line-height:
        1.65;
}


/* ==========================================================================
   19. HERO COMPATIBILITY
   ========================================================================== */

.gg-hero {

    position:
        relative;

    padding:
        70px 0;

    overflow:
        hidden;
}

.gg-hero::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        350px;

    top:
        -180px;

    left:
        40%;

    background:
        radial-gradient(
            circle,
            rgb(var(--brand-500) / .08),
            transparent 70%
        );

    pointer-events:
        none;
}

.gg-hero > * {

    position:
        relative;

    z-index:
        1;
}

.gg-hero-badge {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        27px;

    padding:
        0 9px;

    border:
        1px solid rgb(var(--brand-500) / .18);

    border-radius:
        6px;

    background:
        rgb(var(--brand-500) / .06);

    color:
        rgb(var(--brand-300));

    font-size:
        10px;

    font-weight:
        700;
}

.gg-hero h1 {

    max-width:
        900px;

    margin:
        18px 0 0;

    color:
        rgb(var(--ink-strong));

    font-size:
        clamp(2.2rem, 6vw, 4.5rem);

    line-height:
        1;

    letter-spacing:
        -.045em;
}

.gg-hero p {

    max-width:
        650px;

    margin:
        18px 0 0;

    color:
        rgb(var(--ink-muted));

    font-size:
        15px;

    line-height:
        1.7;
}

.gg-hero-cta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        25px;
}


/* ==========================================================================
   20. PRICING
   ========================================================================== */

.gg-tier {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    padding:
        24px;

    background:
        rgb(var(--surface));

    border:
        1px solid rgb(var(--line));

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-xs);
}

.gg-tier:hover {

    border-color:
        rgb(var(--line-strong));

    box-shadow:
        var(--shadow-sm);
}

.gg-tier--feat {

    border-color:
        rgb(var(--brand-500) / .35);

    box-shadow:
        0 0 0 1px rgb(var(--brand-500) / .05);
}

.gg-tier-tag {

    position:
        absolute;

    top:
        11px;

    right:
        11px;

    padding:
        4px 7px;

    border:
        1px solid rgb(var(--brand-500) / .20);

    border-radius:
        5px;

    background:
        rgb(var(--brand-500) / .07);

    color:
        rgb(var(--brand-300));

    font-size:
        8px;

    font-weight:
        800;

    text-transform:
        uppercase;
}

.gg-price-big {

    color:
        rgb(var(--ink-strong));

    font-family:
        "JetBrains Mono",
        monospace;

    font-size:
        2.3rem;

    font-weight:
        750;
}

.gg-tier ul {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    padding:
        0;

    margin:
        17px 0 0;

    list-style:
        none;
}

.gg-tier li {

    display:
        flex;

    gap:
        8px;

    color:
        rgb(var(--ink));

    font-size:
        12px;
}

.gg-tier li svg {

    width:
        15px;

    flex:
        none;

    color:
        rgb(var(--brand-400));
}


/* ==========================================================================
   21. FAQ
   ========================================================================== */

.gg-faq {

    border-top:
        1px solid rgb(var(--line));
}

.gg-faq-item {

    border-bottom:
        1px solid rgb(var(--line));
}

.gg-faq-q {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        18px 3px;

    border:
        0;

    background:
        transparent;

    color:
        rgb(var(--ink-strong));

    text-align:
        left;

    font-weight:
        650;

    font-size:
        13px;

    cursor:
        pointer;
}

.gg-faq-q:hover {

    color:
        rgb(var(--brand-300));
}

.gg-faq-q .gg-faq-ico {

    color:
        rgb(var(--brand-400));

    transition:
        transform .2s ease;
}

.gg-faq-item[data-open="true"] .gg-faq-ico {

    transform:
        rotate(45deg);
}

.gg-faq-a {

    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows .25s ease;
}

.gg-faq-item[data-open="true"] .gg-faq-a {

    grid-template-rows:
        1fr;
}

.gg-faq-a > div {

    overflow:
        hidden;
}

.gg-faq-a p {

    margin:
        0;

    padding:
        0 3px 18px;

    color:
        rgb(var(--ink-muted));

    font-size:
        12px;

    line-height:
        1.7;
}


/* ==========================================================================
   22. CTA
   ========================================================================== */

.gg-cta {

    position:
        relative;

    padding:
        55px 25px;

    overflow:
        hidden;

    text-align:
        center;

    background:
        rgb(var(--surface));

    border:
        1px solid rgb(var(--line));

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-md);
}

.gg-cta::before {

    content:
        "";

    position:
        absolute;

    width:
        450px;

    height:
        250px;

    top:
        -150px;

    left:
        50%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgb(var(--brand-500) / .07),
            transparent 70%
        );
}

.gg-cta > * {

    position:
        relative;

    z-index:
        1;
}

.gg-cta h2 {

    margin:
        0;

    color:
        rgb(var(--ink-strong));

    font-size:
        clamp(1.7rem, 4vw, 2.5rem);
}

.gg-cta p {

    max-width:
        580px;

    margin:
        12px auto 0;

    color:
        rgb(var(--ink-muted));

    font-size:
        13px;

    line-height:
        1.7;
}


/* ==========================================================================
   23. TESTIMONIALS
   ========================================================================== */

.gg-quote {

    padding:
        21px;

    background:
        rgb(var(--surface));

    border:
        1px solid rgb(var(--line));

    border-radius:
        var(--radius-lg);
}

.gg-stars {

    display:
        flex;

    gap:
        2px;

    color:
        rgb(var(--warning));
}

.gg-quote blockquote {

    margin:
        12px 0 0;

    color:
        rgb(var(--ink));

    font-size:
        12px;

    line-height:
        1.7;
}

.gg-quote figcaption {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        15px;
}


/* ==========================================================================
   24. HELPERS
   ========================================================================== */

.gg-wrap {

    width:
        100%;

    max-width:
        var(--content-width);

    margin-inline:
        auto;

    padding-inline:
        30px;
}

.gg-center {
    text-align:
        center;
}

.gg-mt-8 {
    margin-top:
        32px;
}

.gg-mt-10 {
    margin-top:
        40px;
}

.gg-flex {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;
}

.gg-between {
    justify-content:
        space-between;
}

.gg-lang {

    display:
        flex;

    align-items:
        center;

    gap:
        2px;
}

.gg-lang a {

    padding:
        3px 6px;

    color:
        rgb(var(--ink-muted));

    text-decoration:
        none;
}

.gg-lang a.active,
.gg-lang a:hover {

    color:
        rgb(var(--brand-300));
}


/* ==========================================================================
   25. MOTION
   ========================================================================== */

.menu-panel {

    opacity:
        0;

    transform:
        translateY(6px);

    pointer-events:
        none;
}

.menu-panel[data-open="true"] {

    opacity:
        1;

    transform:
        none;

    pointer-events:
        auto;
}

.switch {

    position:
        relative;

    width:
        42px;

    height:
        23px;

    flex:
        none;

    border-radius:
        999px;

    background:
        rgb(var(--line-strong));

    cursor:
        pointer;
}

.switch::after {

    content:
        "";

    position:
        absolute;

    top:
        3px;

    left:
        3px;

    width:
        17px;

    height:
        17px;

    border-radius:
        50%;

    background:
        #fff;

    box-shadow:
        0 2px 5px rgb(0 0 0 / .25);

    transition:
        transform .18s ease;
}

.switch[aria-checked="true"] {

    background:
        rgb(var(--brand-500));
}

.switch[aria-checked="true"]::after {

    transform:
        translateX(19px);
}


/* ==========================================================================
   26. TOASTS
   ========================================================================== */

#toast-stack {

    position:
        fixed;

    right:
        18px;

    bottom:
        18px;

    z-index:
        500;

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}

.toast {

    animation:
        admin-toast-in .25s ease both;
}

@keyframes admin-toast-in {

    from {
        opacity: 0;
        transform:
            translateY(8px);
    }

    to {
        opacity: 1;
        transform:
            none;
    }
}


/* ==========================================================================
   27. SETTINGS TABLE
   ========================================================================== */

@media (max-width: 640px) {

    .settings-table,
    .settings-table tbody,
    .settings-table tr,
    .settings-table td {

        display:
            block;

        width:
            100% !important;
    }

    .settings-table tr {

        padding:
            .55rem 0;
    }

    .settings-table td {

        padding:
            .35rem 1rem !important;
    }

    .settings-table td:first-child {

        padding-bottom:
            0 !important;

        color:
            rgb(var(--ink-muted));

        font-size:
            .8rem;
    }
}


/* ==========================================================================
   28. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {

    .admin-sidebar {

        width:
            220px;
    }

    body {

        padding-left:
            220px;
    }

    .admin-topbar {

        left:
            220px;
    }

    :root {

        --sidebar-width:
            220px;
    }

    .admin-user-info {

        display:
            none;
    }

    .admin-system-status {

        display:
            none;
    }

    .admin-footer-main {

        grid-template-columns:
            1.5fr repeat(2, 1fr);
    }
}


@media (max-width: 900px) {

    body {

        padding-left:
            0;
    }

    .admin-sidebar {

        display:
            none;
    }

    .admin-topbar {

        left:
            0;

        padding:
            0 17px;
    }

    .admin-mobile-trigger {

        display:
            grid;
    }

    .admin-main {

        padding:
            23px 18px;
    }

    .admin-footer-inner {

        padding:
            32px 18px 20px;
    }

    .admin-footer-main {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .admin-footer-brand {

        grid-column:
            1 / -1;
    }
}


@media (max-width: 640px) {

    :root {

        --topbar-height:
            60px;
    }

    .admin-topbar {

        height:
            60px;
    }

    .admin-breadcrumb-muted,
    .admin-breadcrumb-separator {

        display:
            none;
    }

    .admin-breadcrumb {

        font-size:
            11px;
    }

    .admin-topbar-right {

        gap:
            3px;
    }

    .admin-topbar-tool {

        display:
            none;
    }

    .admin-user-trigger {

        padding-right:
            3px;
    }

    .admin-user-trigger > span:not(.admin-user-avatar) {

        display:
            none;
    }

    .admin-user-trigger > svg {

        display:
            none;
    }

    .admin-popover {

        position:
            fixed;

        top:
            68px;

        left:
            10px;

        right:
            10px;

        width:
            auto;
    }

    .admin-main {

        padding:
            18px 13px;
    }

    .admin-footer-main {

        grid-template-columns:
            1fr;

        gap:
            25px;
    }

    .admin-footer-brand {

        grid-column:
            auto;
    }

    .admin-footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding-top:
            14px;
    }

    .admin-campaign-bar {

        font-size:
            10px;
    }

    .gg-section {

        padding:
            48px 0;
    }

    .gg-hero {

        padding:
            55px 0;
    }

    .gg-hero h1 {

        font-size:
            clamp(2rem, 12vw, 3.2rem);
    }

    .gg-hero-cta {

        flex-direction:
            column;
    }

    .gg-hero-cta .gg-btn {

        width:
            100%;
    }

    .gg-cta {

        padding:
            42px 17px;
    }

    .gg-grid2 {

        grid-template-columns:
            1fr;
    }
}


/* ==========================================================================
   29. ACCESSIBILITY
   ========================================================================== */

:focus-visible {

    outline:
        2px solid rgb(var(--brand-400));

    outline-offset:
        2px;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;

        scroll-behavior:
            auto !important;
    }
}


/* ==========================================================================
   30. POPUPS
   ========================================================================== */

.lup-popup-root {

    --mkt-theme-accent:
        rgb(var(--brand-500));

    --mkt-theme-accent-contrast:
        rgb(var(--ink-invert));

    --mkt-theme-surface:
        rgb(var(--surface));

    --mkt-theme-surface-2:
        rgb(var(--surface-raised));

    --mkt-theme-ink:
        rgb(var(--ink-strong));

    --mkt-theme-ink-muted:
        rgb(var(--ink-muted));

    --mkt-theme-border:
        rgb(var(--line-strong));

    --mkt-theme-radius:
        var(--radius-lg);

    --mkt-theme-shadow:
        var(--shadow-lg);
}

.lup-popup-root .lup-popup-icon {

    text-shadow:
        0 0 20px rgb(var(--brand-500) / .25);
}


/* ==========================================================================
   31. OLD GG COMPATIBILITY
   ========================================================================== */

.gg-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        40px;

    padding:
        0 15px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-sm);

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    text-decoration:
        none;
}

.gg-btn--primary {

    background:
        rgb(var(--brand-500));

    border-color:
        rgb(var(--brand-400) / .35);

    color:
        rgb(var(--ink-invert));
}

.gg-btn--ghost {

    background:
        rgb(var(--surface-raised));

    border-color:
        rgb(var(--line-strong));

    color:
        rgb(var(--ink-strong));
}

.gg-btn--sm {

    min-height:
        36px;

    padding-inline:
        12px;

    font-size:
        11px;
}

.gg-btn--block {
    width:
        100%;
}

.gg-muted {
    color:
        rgb(var(--ink-muted));
}

.gg-subtle {
    color:
        rgb(var(--ink-subtle));
}

.gg-price {

    color:
        rgb(var(--ink-strong));

    font-family:
        "JetBrains Mono",
        monospace;

    font-weight:
        700;
}

.gg-grid2 {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;
}

.gg-flex {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}

.gg-between {
    justify-content:
        space-between;
}


/* ==========================================================================
   32. DESKTOP CONTENT OFFSET
   ========================================================================== */

@media (min-width: 901px) {

    body > footer {

        margin-left:
            0;
    }

}


/* ==========================================================================
   33. LEGACY DRAWER SELECTORS
   ========================================================================== */

.drawer {

    transform:
        translateX(100%);
}

.drawer[data-open="true"] {

    transform:
        none;
}

.drawer-backdrop {

    opacity:
        0;

    pointer-events:
        none;
}

.drawer-backdrop[data-open="true"] {

    opacity:
        1;

    pointer-events:
        auto;
}


/* ==========================================================================
   34. REVEAL
   ========================================================================== */

[data-reveal] {

    opacity:
        0;

    transform:
        translateY(10px);
}

[data-reveal].is-in {

    animation:
        admin-reveal .4s ease both;
}

@keyframes admin-reveal {

    to {

        opacity:
            1;

        transform:
            none;
    }
}


/* ==========================================================================
   35. MOBILE DRAWER LEGACY WIDTH
   ========================================================================== */

@media (max-width: 900px) {

    .gg-drawer-root {

        display:
            none;
    }
}


/* ==========================================================================
   END
   ========================================================================== */