/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}
a { color: inherit; text-decoration: inherit; }

[x-cloak] { display: none !important; }

/* ── Base Typography ─────────────────────────────────────── */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    font-optical-sizing: auto;
    tab-size: 4;
}

html, body {
    font-family: var(--font-sans);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
    font-variation-settings: "opsz" 14;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
    line-height: 1.5;
    letter-spacing: -.014em;
    color: hsl(240 10% 3.9%);
    background-color: var(--page-bg);
}

body {
    min-height: 100vh;
}

/* ══════════════════════════════════════════════════════════
   CSS VARIABLES — light mode (default)
══════════════════════════════════════════════════════════ */
:root {
    color-scheme: light dark;
    --font-sans:               "Aptos", "Segoe UI Variable Text", "Segoe UI", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;

    /* ── Type Scale ─────────────────────────────────────────
    One centralized scale. Use var(--text-*) across all
    components and avoid hardcoding font-size values.
    Mapping in px (base 16px):
         2xs  = 10px   micro: superscript, dot label
         xs   = 11px   tiny:  table header, badge, status
         sm   = 12px   small: table cell, helper, sub-label
         base = 13px   body:  input, button, paragraph
         md   = 14px   ui:    card title, nav label
         lg   = 16px   head:  section heading
         xl   = 18px   display
         2xl  = 22px   stat value (compact)
         3xl  = 26px   stat value (large)
    ──────────────────────────────────────────────────────── */
    --text-2xs:   .625rem;     /* 10px */
    --text-xs:    .6875rem;    /* 11px */
    --text-sm:    .75rem;      /* 12px */
    --text-base:  .8125rem;    /* 13px */
    --text-md:    .875rem;     /* 14px */
    --text-lg:    1rem;        /* 16px */
    --text-xl:    1.125rem;    /* 18px */
    --text-2xl:   1.375rem;    /* 22px */
    --text-3xl:   1.625rem;    /* 26px */

    /* ── Foreground ─────────────────────────────────────── */
    --foreground:              hsl(240 10% 3.9%);
    --muted-foreground:        hsl(240 5% 44%);
    --subtle-foreground:       hsl(240 4% 58%);

    /* ── Background ─────────────────────────────────────── */
    --background:              hsl(0 0% 100%);
    --page-bg:                 hsl(220 22% 95%);
    --page-bg-accent:          hsl(214 46% 98%);
    --surface-soft:            hsl(220 24% 98%);
    --surface-muted:           hsl(220 20% 94%);
    --surface-inset:           hsl(220 18% 92%);
    --card-bg:                 hsl(0 0% 100% / .92);
    --secondary:               hsl(240 4.8% 95.9%);
    --secondary-foreground:    hsl(240 5.9% 10%);

    /* ── Border ─────────────────────────────────────────── */
    --border-color:            hsl(240 5.9% 90%);
    --border-strong:           hsl(240 5.9% 82%);

    /* ── Accent ─────────────────────────────────────────── */
    --primary:                 hsl(240 5.9% 10%);
    --primary-foreground:      hsl(0 0% 98%);
    --destructive:             hsl(0 84.2% 60.2%);
    --destructive-foreground:  hsl(0 0% 98%);
    --ring-color:              hsl(217 91% 55%);

    /* ── Shadow ─────────────────────────────────────────── */
    --card-shadow:             none;
    --card-shadow-hover:       none;
    --header-shadow:           none;
    --auth-card-shadow:        none;

    /* ── Radius ─────────────────────────────────────────── */
    --radius:                  .3rem;
    --radius-sm:               .3rem;
    --radius-xs:               .3rem;

    /* ── Layout ─────────────────────────────────────────── */
    --header-bg:               hsl(0 0% 100% / .84);
    --header-border:           hsl(220 16% 88%);
    --tab-bg:                  hsl(0 0% 100% / .74);
    --tab-border:              hsl(220 16% 89%);
    --tab-hover-bg:            hsl(220 20% 96%);
    --tab-active-bg:           hsl(0 0% 100% / .94);
    --tab-text:                hsl(240 5% 44%);
    --tab-text-active:         hsl(240 10% 8%);
    --tab-accent:              hsl(217 88% 56%);

    /* ── Color palette ──────────────────────────────────── */
    --emerald:                 hsl(142 76% 36%);
    --emerald-light:           hsl(142 76% 96%);
    --blue:                    hsl(217 91% 58%);
    --blue-light:              hsl(217 91% 97%);
    --amber:                   hsl(45 93% 47%);
    --amber-light:             hsl(45 93% 96%);
    --violet:                  hsl(262 83% 58%);
    --violet-light:            hsl(262 80% 97%);

    /* ── Tooltip ────────────────────────────────────────── */
    --tooltip-bg:              hsl(240 5.9% 10%);
    --tooltip-fg:              hsl(0 0% 98%);
}

/* ══════════════════════════════════════════════════════════
   DARK MODE
══════════════════════════════════════════════════════════ */
    @media (prefers-color-scheme: dark) {
    :root {
        --foreground:              hsl(0 0% 95%);
        --muted-foreground:        hsl(240 5% 58%);
        --subtle-foreground:       hsl(240 4% 45%);

        --background:              hsl(240 6% 10%);
        --page-bg:                 hsl(228 20% 9%);
        --page-bg-accent:          hsl(222 24% 12%);
        --surface-soft:            hsl(230 14% 13%);
        --surface-muted:           hsl(230 12% 16%);
        --surface-inset:           hsl(230 14% 8%);
        --card-bg:                 hsl(230 16% 13% / .9);
        --secondary:               hsl(240 5% 17%);
        --secondary-foreground:    hsl(0 0% 90%);

        --border-color:            hsl(240 5% 22%);
        --border-strong:           hsl(240 5% 30%);

        --primary:                 hsl(0 0% 92%);
        --primary-foreground:      hsl(240 5.9% 10%);
        --destructive:             hsl(0 62% 50%);
        --destructive-foreground:  hsl(0 0% 98%);
        --ring-color:              hsl(217 91% 62%);

        --card-shadow:             none;
        --card-shadow-hover:       none;
        --header-shadow:           none;
        --auth-card-shadow:        none;

        --header-bg:               hsl(230 16% 11% / .84);
        --header-border:           hsl(230 14% 21%);
        --tab-bg:                  hsl(230 16% 11% / .76);
        --tab-border:              hsl(230 14% 21%);
        --tab-hover-bg:            hsl(230 14% 16%);
        --tab-active-bg:           hsl(230 16% 13% / .92);
        --tab-text:                hsl(240 4% 68%);
        --tab-text-active:         hsl(0 0% 96%);
        --tab-accent:              hsl(217 91% 66%);

        --emerald:                 hsl(142 60% 50%);
        --emerald-light:           hsl(142 60% 14%);
        --blue:                    hsl(217 91% 65%);
        --blue-light:              hsl(217 91% 14%);
        --amber:                   hsl(45 93% 55%);
        --amber-light:             hsl(45 80% 14%);
        --violet:                  hsl(262 70% 68%);
        --violet-light:            hsl(262 60% 14%);

        --tooltip-bg:              hsl(0 0% 92%);
        --tooltip-fg:              hsl(240 5.9% 10%);
    }

    /* Dark mode component overrides */
    html, body { background-color: var(--page-bg); color: var(--foreground); }

    .tbl thead tr      { background: hsl(240 6% 15%); }
    .tbl tbody tr:hover { background: hsl(240 5% 16%); }
    .tbl td             { border-bottom-color: hsl(240 5% 20%); }

    .stat-card { background: var(--card-bg); border-color: var(--border-color); }
    .stat-card-value { color: hsl(0 0% 94%); }
    .stat-card-blue    .stat-card-label { color: hsl(217 80% 70%); }
    .stat-card-emerald .stat-card-label { color: hsl(142 55% 60%); }
    .stat-card-amber   .stat-card-label { color: hsl(38 80% 62%); }
    .stat-card-violet  .stat-card-label { color: hsl(262 65% 75%); }

    .pg-btn { background: var(--card-bg); border-color: var(--border-color); color: hsl(0 0% 82%); }
    .pg-btn:hover:not(:disabled) { background: var(--secondary); }
    .pg-btn.active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

    .status-approved { background: hsl(142 60% 14%); color: hsl(142 55% 60%); }
    .status-pending  { background: hsl(45 80% 14%);  color: hsl(45 85% 62%);  }
    .status-rejected { background: hsl(0 60% 15%);   color: hsl(0 70% 65%);   }

    .skeleton {
        background: linear-gradient(90deg,
            hsl(240 5% 18%) 25%,
            hsl(240 5% 22%) 50%,
            hsl(240 5% 18%) 75%);
    }

    .chip-emerald { background: hsl(142 60% 14%); color: hsl(142 55% 62%); }
    .chip-blue    { background: hsl(217 80% 14%); color: hsl(217 80% 68%); }
    .chip-amber   { background: hsl(45 80% 14%);  color: hsl(45 85% 62%);  }
    .chip-red     { background: hsl(0 60% 15%);   color: hsl(0 68% 66%);   }
    .chip-muted   { background: var(--secondary); color: var(--muted-foreground); }
    .chip-purple  { background: hsl(262 60% 14%); color: hsl(262 65% 72%); }

    .analytics-report-total-row td {
        background: hsl(240 6% 15%);
        border-top-color: var(--border-color);
    }
    .analytics-subid-table thead tr {
        background: hsl(240 5% 13%);
        border-bottom-color: hsl(240 5% 20%);
    }
    .analytics-subid-table tbody tr:hover {
        background: hsl(240 5% 16%);
    }
    .analytics-subid-token {
        background: hsl(240 5% 18%);
        color: hsl(0 0% 94%);
    }
    .analytics-subid-subtotal-row td {
        background: hsl(142 38% 15%);
        border-top-color: hsl(142 35% 24%);
    }
    .cpanel-dashboard-link {
        color: hsl(217 80% 68%);
    }

    .input, .textarea {
        background-color: hsl(240 6% 11%);
        border-color: var(--border-color);
        color: var(--foreground);
    }
    .input:focus, .input:focus-visible,
    .textarea:focus, .textarea:focus-visible {
        border-color: var(--ring-color);
        box-shadow: 0 1px 2px hsla(0,0%,0%,.12) inset;
    }
    .input:disabled { background-color: var(--secondary); }

    .btn-outline { border-color: var(--border-color); color: var(--foreground); }
    .btn-outline:hover { background-color: var(--secondary); border-color: var(--border-strong); }
    .btn-ghost:hover { background-color: var(--secondary); color: var(--foreground); }
    .btn-secondary { background-color: var(--secondary); color: var(--secondary-foreground); }
    .btn-secondary:hover { background-color: hsl(240 5% 22%); }

    .card { background-color: var(--card-bg); border-color: var(--border-color); }

    header { background: var(--header-bg); border-bottom-color: var(--header-border); box-shadow: var(--header-shadow); }
    .tab-nav-bar { background: var(--tab-bg); border-bottom-color: var(--tab-border); }
    .tab-btn:hover { background: var(--tab-hover-bg); }
    .tab-btn.active { background: var(--tab-active-bg); }
    .tab-badge-dark { background: hsl(0 0% 100% / .1); color: hsl(0 0% 96%); }

    .auth-card {
        background: var(--background);
        border-color: var(--border-color);
        box-shadow: var(--auth-card-shadow);
    }
    .auth-logo {
        background: var(--secondary);
        border-color: var(--border-color);
        box-shadow: none;
    }
    .auth-alert-warning {
        background: hsl(45 80% 14%);
        border-color: hsl(45 70% 24%);
        color: hsl(45 85% 66%);
    }
    .auth-alert-error {
        background: hsl(0 60% 15%);
        border-color: hsl(0 46% 26%);
        color: hsl(0 72% 68%);
    }

    .sl-card,
    .history-item,
    .macro-box {
        background: var(--card-bg);
        border-color: var(--border-color);
    }
    .panel-box,
    .inline-action-row,
    .section-box,
    .empty-state-panel {
        background: var(--surface-soft);
        border-color: var(--border-color);
    }
    .notice-box-amber {
        background: hsl(45 80% 14%);
        border-color: hsl(45 70% 24%);
        color: hsl(45 85% 66%);
    }
    .notice-box-blue {
        background: hsl(217 80% 14%);
        border-color: hsl(217 54% 26%);
        color: hsl(217 80% 72%);
    }
    .analytics-chart-overlay-surface {
        background: hsl(230 18% 10% / .82);
    }
    .icon-action-btn-danger:hover:not(:disabled) {
        background: hsl(0 42% 18%);
        color: hsl(0 82% 74%);
    }
    .sl-card-header,
    .card-header,
    .sl-card-footer {
        border-color: hsl(230 14% 21%);
        background: transparent;
    }
    .sl-card-title,
    .section-title,
    .card-header { color: hsl(0 0% 95%); }
    .preview-row { color: hsl(0 0% 84%); }
    .preview-step,
    .input-prefix { background: var(--secondary); color: var(--muted-foreground); border-color: var(--border-color); }
    .field-label { color: hsl(240 5% 72%); }
    .hint { color: var(--muted-foreground); }
    .log-success { background: hsl(142 60% 14%); color: hsl(142 55% 62%); }
    .log-info { background: hsl(217 80% 14%); color: hsl(217 80% 68%); }
    .log-warning { background: hsl(45 80% 14%); color: hsl(45 85% 62%); }
    .log-error { background: hsl(0 60% 15%); color: hsl(0 70% 65%); }
    .log-step { background: var(--secondary); color: var(--muted-foreground); }
    .sl-input {
        background: hsl(230 14% 12%);
        border-color: var(--border-color);
        color: var(--foreground);
        box-shadow: none;
    }
    .sl-input:focus,
    .sl-input:focus-visible {
        background: hsl(230 14% 11%);
        border-color: var(--ring-color);
        box-shadow: none;
    }

    #toast,
    #sl-toast {
        background: var(--card-bg);
        box-shadow: 0 4px 12px hsla(0,0%,0%,.28);
    }
    #toast.toast-success,
    #sl-toast.toast-success { background: hsl(142 60% 14%); border-color: hsl(142 50% 26%); }
    #toast.toast-error,
    #sl-toast.toast-error { background: hsl(0 60% 15%); border-color: hsl(0 46% 26%); }
    #toast.toast-info,
    #sl-toast.toast-info { background: hsl(217 80% 14%); border-color: hsl(217 54% 26%); }

    ::-webkit-scrollbar-thumb       { background: hsl(240 5% 28%); }
    ::-webkit-scrollbar-thumb:hover { background: hsl(240 5% 38%); }
}

/* ── Focus ring ──────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--ring-color);
    outline-offset: 2px;
    transition: outline-offset .08s ease;
}

/* ── Smooth interactions ─────────────────────────────────── */
a, button, [role="button"] {
    transition:
        background-color .14s ease,
        color .14s ease,
        border-color .14s ease,
        box-shadow .16s ease,
        opacity .14s ease,
        transform .1s ease;
}
input, select, textarea {
    transition: border-color .14s ease, box-shadow .16s ease;
}

/* ── Scrollbars ──────────────────────────────────────────── */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: hsl(220 12% 76%); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover  { background: hsl(220 8% 60%); }

.scroll-logs::-webkit-scrollbar        { width: 4px; height: 4px; }
.scroll-logs::-webkit-scrollbar-track  { background: transparent; }
.scroll-logs::-webkit-scrollbar-thumb  { background: hsl(220 12% 80%); border-radius: 4px; }

.no-scrollbar { -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.008em;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    transition:
        background-color .14s ease,
        color .14s ease,
        border-color .14s ease,
        box-shadow .16s ease,
        opacity .14s ease,
        transform .08s ease;
    outline: none;
}
.btn:not(.btn-sm):not(.btn-default-size):not(.btn-lg):not(.btn-icon) {
    min-height: 2.125rem;
    padding-inline: 1rem;
    padding-block: .35rem;
}
.btn:focus-visible {
    box-shadow: none;
}
.btn:disabled { pointer-events: none; opacity: .58; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(.975); }

.btn-primary,
.btn-default {
    background-color: var(--primary);
    color: var(--primary-foreground);
}
.btn-primary:hover,
.btn-default:hover {
    background-color: hsl(240 5.9% 16%);
}
.btn-primary:active,
.btn-default:active { background-color: hsl(240 5.9% 22%); }

.btn-destructive {
    background-color: var(--destructive);
    color: var(--destructive-foreground);
}
.btn-destructive:hover {
    background-color: hsl(0 84.2% 54%);
}

.btn-outline {
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--foreground);
}
.btn-outline:hover {
    background-color: var(--secondary);
    border-color: var(--border-strong);
}

.btn-secondary { background-color: var(--secondary); color: var(--secondary-foreground); }
.btn-secondary:hover { background-color: hsl(240 4.8% 91%); }

.btn-ghost { background-color: transparent; }
.btn-ghost:hover { background-color: var(--secondary); color: var(--foreground); }

.btn-link { color: var(--primary); text-decoration: none; text-underline-offset: 4px; }
.btn-link:hover { text-decoration: underline; }

.btn-sm           { height: 1.875rem; border-radius: calc(var(--radius-sm) - 1px); padding-inline: .625rem; font-size: var(--text-sm); }
.btn-default-size { height: 2.125rem; padding-inline: 1rem; padding-block: .35rem; }
.btn-lg           { height: 2.375rem; border-radius: var(--radius-sm); padding-inline: 1.5rem; font-size: var(--text-md); }
.btn-icon         { height: 2rem; width: 2rem; flex-shrink: 0; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--foreground);
    box-shadow: var(--card-shadow);
    transition: box-shadow .2s ease;
}
.card:hover { box-shadow: var(--card-shadow-hover); }

/* ── App Header / Navigation ───────────────────────────── */
header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--header-shadow);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

.tab-nav-bar {
    background: var(--tab-bg);
    border-bottom: 1px solid var(--tab-border);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
}

.tab-nav-list {
    display: flex;
    align-items: stretch;
    gap: .125rem;
    overflow-x: auto;
    -ms-overflow-style: none;
}

.tab-nav-list::-webkit-scrollbar { display: none; }

.tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    height: 2.75rem;
    padding: 0 .95rem;
    border: none;
    border-radius: .7rem .7rem 0 0;
    background: transparent;
    color: var(--tab-text);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    transition: color .15s ease, background-color .15s ease, box-shadow .16s ease;
}

.tab-btn svg {
    flex-shrink: 0;
    opacity: .72;
    transition: opacity .15s ease, color .15s ease;
}

.tab-btn::after {
    content: '';
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: -1px;
    height: 2.5px;
    border-radius: 9999px 9999px 0 0;
    background: var(--tab-accent);
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform .2s cubic-bezier(.34, 1.2, .64, 1), opacity .14s ease;
}

.tab-btn:hover {
    background: var(--tab-hover-bg);
    color: var(--foreground);
}

.tab-btn:hover svg { opacity: .92; }

.tab-btn:hover::after {
    transform: scaleX(.45);
    opacity: .8;
}

.tab-btn.active {
    background: var(--tab-active-bg);
    color: var(--tab-text-active);
}

.tab-btn.active svg {
    opacity: 1;
    color: var(--tab-text-active);
}

.tab-btn.active::after {
    transform: scaleX(1);
    opacity: 1;
}

.tab-btn:focus-visible {
    outline: 2px solid var(--ring-color);
    outline-offset: -2px;
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding-inline: .32rem;
    border-radius: 9999px;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    flex-shrink: 0;
}

.tab-badge-dark { background: hsl(240 5.9% 14%); color: hsl(0 0% 100%); }
.tab-badge-emerald { background: hsl(142 71% 38%); color: hsl(0 0% 100%); }
.tab-badge-blue { background: hsl(217 91% 55%); color: hsl(0 0% 100%); }

/* ── Auth shell ────────────────────────────────────────── */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    padding-top: clamp(2.5rem, 8vh, 4.5rem);
}

.auth-card-wrap {
    width: 100%;
    max-width: 24rem;
}

.auth-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--background);
    box-shadow: var(--auth-card-shadow);
    padding: clamp(1.35rem, 4vw, 1.75rem);
}

.auth-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--tab-accent);
}

.auth-head {
    margin-bottom: 1.5rem;
    text-align: center;
}

.auth-logo {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto .85rem;
    border-radius: .95rem;
    background: var(--secondary);
    border: 1px solid var(--border-color);
}

.auth-logo img {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
}

.auth-title {
    margin: 0;
    color: var(--foreground);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.auth-subtitle {
    margin-top: .35rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.auth-alert {
    border-radius: .75rem;
    border: 1px solid transparent;
    padding: .75rem .8rem;
    font-size: var(--text-sm);
    line-height: 1.45;
}

.auth-alert-warning {
    background: hsl(45 93% 96%);
    border-color: hsl(45 84% 78%);
    color: hsl(28 82% 28%);
}

.auth-alert-error {
    background: hsl(0 86% 97%);
    border-color: hsl(0 84% 84%);
    color: hsl(0 72% 34%);
}

/* ── Form Inputs ─────────────────────────────────────────── */
.input {
    display: flex;
    height: 2.125rem;
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--background);
    padding-inline: .7rem;
    padding-block: .25rem;
    font-size: var(--text-base);
    font-family: inherit;
    line-height: 1.5;
    color: var(--foreground);
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
    transition: border-color .14s ease, box-shadow .16s ease;
    box-shadow: 0 1px 2px hsla(240,6%,10%,.04) inset;
}
.input::placeholder { color: var(--subtle-foreground); }
.input:focus, .input:focus-visible {
    outline: none;
    border-color: var(--ring-color);
    box-shadow: 0 1px 2px hsla(240,6%,10%,.04) inset;
}
.input:disabled { cursor: not-allowed; opacity: .48; background-color: var(--secondary); }

/* ── Textarea ────────────────────────────────────────────── */
.textarea {
    display: flex;
    min-height: 80px;
    max-height: 200px;
    height: 100px;
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--background);
    padding: .45rem .7rem;
    font-size: var(--text-base);
    font-family: inherit;
    line-height: 1.5;
    color: var(--foreground);
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
    resize: vertical;
    transition: border-color .14s ease, box-shadow .16s ease;
    box-shadow: 0 1px 2px hsla(240,6%,10%,.04) inset;
}
.textarea::placeholder { color: var(--subtle-foreground); }
.textarea:focus, .textarea:focus-visible {
    outline: none;
    border-color: var(--ring-color);
    box-shadow: 0 1px 2px hsla(240,6%,10%,.04) inset;
}
.textarea:disabled { cursor: not-allowed; opacity: .48; }

.sl-input {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: .6rem;
    background: var(--surface-soft);
    color: var(--foreground);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.5;
    letter-spacing: -.01em;
    transition: border-color .14s ease, box-shadow .16s ease, background-color .14s ease;
    box-shadow: none;
}

input.sl-input,
select.sl-input {
    min-height: 2.3rem;
    padding: .42rem .75rem;
}

textarea.sl-input {
    min-height: 4rem;
    padding: .58rem .75rem;
    resize: vertical;
}

.sl-textarea-compact {
    min-height: 3.5rem;
    height: auto;
}

.sl-input::placeholder {
    color: var(--subtle-foreground);
}

.sl-input:focus,
.sl-input:focus-visible {
    outline: none;
    background: var(--background);
    border-color: var(--ring-color);
    box-shadow: none;
}

.sl-input:disabled {
    cursor: not-allowed;
    opacity: .56;
    background: var(--secondary);
}

.sl-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: .9rem;
    padding-right: 2rem;
    cursor: pointer;
}

.input-icon-btn {
    position: absolute;
    right: .45rem;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: .55rem;
    background: transparent;
    color: var(--muted-foreground);
    transform: translateY(-50%);
    cursor: pointer;
}

.input-icon-btn:hover {
    background: var(--secondary);
    color: var(--foreground);
}

.icon-action-btn,
.icon-action-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease, opacity .14s ease;
}

.icon-action-btn:hover:not(:disabled) {
    background: var(--secondary);
    color: var(--foreground);
}

.icon-action-btn-danger:hover:not(:disabled) {
    background: hsl(0 84% 96%);
    color: hsl(0 72% 46%);
}

.icon-action-btn:disabled,
.icon-action-btn-danger:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.field-label {
    display: block;
    margin-bottom: .4rem;
    color: hsl(240 5.9% 33%);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hint {
    margin-top: .35rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.input-error { border-color: hsl(0 84.2% 60.2%) !important; }
.input-error:focus,
.input-error:focus-visible { box-shadow: none !important; }

input[type="checkbox"] {
    width: .95rem;
    height: .95rem;
    border-radius: .28rem;
    border: 1px solid var(--border-strong);
    flex-shrink: 0;
    cursor: pointer;
    accent-color: hsl(240 5.9% 10%);
    transition: border-color .12s ease;
}

input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ring-color);
    outline-offset: 2px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { opacity: .4; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(var(--radius) - 2px);
    border-width: 1px;
    border-style: solid;
    padding-inline: .4rem;
    padding-block: .12rem;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .012em;
    -webkit-font-smoothing: antialiased;
}
.badge-default     { border-color: transparent; background-color: hsl(243 75% 58%); color: hsl(0 0% 100%); }
.badge-secondary   { border-color: transparent; background-color: var(--secondary); color: var(--secondary-foreground); }
.badge-destructive { border-color: transparent; background-color: var(--destructive); color: var(--destructive-foreground); }
.badge-outline     { border-color: var(--border-color); color: var(--foreground); background-color: transparent; }

/* ── Surface helpers ───────────────────────────────────── */
.sl-card {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--background);
    box-shadow: var(--card-shadow);
    transition: box-shadow .18s ease, border-color .18s ease, transform .16s ease;
}

.sl-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--card-shadow-hover);
}

.sl-card-header,
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 3rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid hsl(220 16% 91%);
    background: transparent;
}

.sl-card-header-left {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.sl-card-header-right {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex-shrink: 0;
}

.sl-card-title,
.section-title,
.card-header {
    margin: 0;
    color: hsl(240 10% 6%);
    font-size: var(--text-md);
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.section-title svg {
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.sl-card-subtitle {
    margin-top: .15rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: 1.35;
}

.sl-card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding-inline: .42rem;
    border-radius: 9999px;
    background: var(--secondary);
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 700;
}

.sl-card-body { padding: 1rem; }
.sl-card-body-sm { padding: .875rem; }

.sl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem 1rem;
    border-top: 1px solid hsl(220 16% 91%);
    background: hsl(220 22% 98% / .68);
}

.sl-card-refresh {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .62rem;
    border: none;
    border-radius: .6rem;
    background: transparent;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.sl-card-refresh:hover {
    background: var(--secondary);
    color: var(--foreground);
}

.sl-card-refresh:disabled {
    opacity: .58;
    pointer-events: none;
}

.preview-row {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: hsl(240 5.9% 26%);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.preview-step {
    margin-top: .16rem;
    border-radius: .45rem;
    background: var(--secondary);
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: .12rem .38rem;
    white-space: nowrap;
}

.history-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .75rem;
    border-radius: .75rem;
    border: 1px solid var(--border-color);
    background: hsl(0 0% 100% / .78);
    box-shadow: 0 8px 18px -18px hsla(220,42%,10%,.18);
    font-size: var(--text-sm);
}

.input-prefix {
    display: flex;
    align-items: center;
    min-height: 2.3rem;
    padding-inline: .75rem;
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: .6rem 0 0 .6rem;
    background: var(--secondary);
    color: var(--muted-foreground);
    font-size: var(--text-base);
    white-space: nowrap;
}

.input-suffix {
    border-radius: 0 .6rem .6rem 0 !important;
}

.search-wrap {
    position: relative;
}

.search-wrap svg {
    position: absolute;
    left: .7rem;
    top: 50%;
    width: .9rem;
    height: .9rem;
    color: var(--muted-foreground);
    transform: translateY(-50%);
    pointer-events: none;
}

.search-wrap input {
    padding-left: 2.15rem;
}

.macro-box {
    border: 1px solid var(--border-color);
    border-radius: .8rem;
    background: hsl(220 22% 98% / .78);
    padding: .8rem 1rem;
}

.panel-box {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: hsl(220 22% 97% / .64);
}

.notice-box {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: .75rem;
    font-size: var(--text-xs);
    line-height: 1.6;
}

.notice-box-amber {
    border-color: hsl(45 82% 78%);
    background: hsl(45 100% 96%);
    color: hsl(32 70% 30%);
}

.notice-box-blue {
    border-color: hsl(217 88% 82%);
    background: hsl(214 100% 97%);
    color: hsl(217 58% 34%);
}

.inline-action-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: hsl(220 22% 97% / .58);
}

.section-box {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: .75rem;
}

.live-dot-ring { background: hsl(142 71% 68%); }
.live-dot-core { background: hsl(142 71% 45%); }

.log-entry {
    animation: fadeSlideIn .25s ease forwards;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.log-success { background: hsl(142 76% 95%); border-left: 3px solid hsl(142 71% 45%); color: hsl(142 60% 22%); }
.log-error { background: hsl(0 86% 97%); border-left: 3px solid hsl(0 84% 60%); color: hsl(0 72% 28%); }
.log-warning { background: hsl(43 96% 95%); border-left: 3px solid hsl(43 96% 56%); color: hsl(32 70% 28%); }
.log-info { background: hsl(217 91% 97%); border-left: 3px solid hsl(217 91% 60%); color: hsl(217 60% 28%); }
.log-step { background: var(--secondary); border-left: 3px solid var(--border-color); color: var(--muted-foreground); }

/* ── Separator ───────────────────────────────────────────── */
.separator { flex-shrink: 0; background-color: var(--border-color); height: 1px; width: 100%; }

/* ── Utilities ───────────────────────────────────────────── */
.up-text { text-transform: uppercase; }

code, .font-mono, pre {
    font-variant-ligatures: none;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}
.text-sharp {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

/* ── Skeleton loader ─────────────────────────────────────── */
@keyframes skeleton-wave {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skeleton {
    background: linear-gradient(90deg,
        hsl(240 5.9% 93%) 25%,
        hsl(240 5.9% 88%) 50%,
        hsl(240 5.9% 93%) 75%);
    background-size: 200% 100%;
    animation: skeleton-wave 1.4s ease infinite;
    border-radius: var(--radius-sm);
}

/* Skeleton rows - use these instead of a spinner while table data is loading */
.skeleton-row { height: 2.25rem; margin-bottom: 1px; }
.skeleton-row:last-child { margin-bottom: 0; }
.skeleton-text-xs { height: .5rem; width: 60%; border-radius: 9999px; }
.skeleton-text-sm { height: .625rem; width: 80%; border-radius: 9999px; }
.skeleton-text    { height: .75rem; width: 100%; border-radius: 9999px; }
.skeleton-circle  { border-radius: 50%; flex-shrink: 0; }

/* ── Chip / Pill ─────────────────────────────────────────── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .5rem;
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .012em;
    -webkit-font-smoothing: antialiased;
}
.chip-emerald { background: var(--emerald-light); color: hsl(142 60% 26%); }
.chip-blue    { background: var(--blue-light);    color: hsl(217 80% 38%); }
.chip-amber   { background: var(--amber-light);   color: hsl(28 82% 34%);  }
.chip-red     { background: hsl(0 86% 95%);       color: hsl(0 72% 42%);   }
.chip-muted   { background: var(--secondary);     color: var(--muted-foreground); }
.chip-purple  { background: var(--violet-light);  color: hsl(270 60% 38%); }

/* ── Table system ───────────────────────────────────────── */
.tbl-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: inherit;
}
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead tr {
    background: hsl(240 5% 97.5%);
    border-bottom: 1px solid var(--border-color);
}
.tbl th {
    padding: .3rem .75rem;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    text-align: left;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}
.tbl th.sortable { cursor: pointer; -webkit-user-select: none; user-select: none; transition: color .12s; }
.tbl th.sortable:hover { color: var(--foreground); }
.tbl td {
    padding: .3rem .75rem;
    border-bottom: 1px solid hsl(240 5.9% 95%);
    font-size: var(--text-sm);
    line-height: 1.45;
    vertical-align: middle;
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
}
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: hsl(240 5% 98.5%); }
.tbl .col-num  { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.tbl .col-act  { white-space: nowrap; text-align: right; width: 1px; }
.tbl .col-mono { font-size: var(--text-xs); font-family: ui-monospace, monospace; -webkit-font-smoothing: subpixel-antialiased; }

.analytics-report-total-row td {
    background: hsl(240 4.8% 97%);
    border-top: 2px solid var(--border-color);
    border-bottom: none;
}

.analytics-subid-table thead tr {
    background: hsl(240 4.8% 99%);
    border-bottom: 1px solid hsl(240 5.9% 93%);
}

.analytics-subid-table th,
.analytics-subid-table td {
    font-size: var(--text-xs);
}

.analytics-subid-table th:first-child,
.analytics-subid-table td:first-child {
    padding-left: 2.5rem;
}

.analytics-subid-table tbody tr:hover {
    background: hsl(240 4.8% 98%);
}

.analytics-subid-token {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: .1rem .35rem;
    border-radius: .25rem;
    background: hsl(240 4.8% 95%);
    color: hsl(240 10% 12%);
    cursor: pointer;
    font-family: ui-monospace, monospace;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.25;
}

.analytics-subid-subtotal-row td {
    background: hsl(142 76% 98%);
    border-top: 1px solid hsl(142 60% 88%);
    border-bottom: none;
    font-size: .7rem;
}

.cpanel-dashboard-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: hsl(217 91% 55%);
    font-family: ui-monospace, monospace;
    font-size: .6875rem;
    text-decoration: none;
}

.cpanel-dashboard-link:hover {
    text-decoration: underline;
}

.spinner-light {
    border-top-color: hsl(0 0% 100%);
    border-color: rgba(255, 255, 255, .3);
}

.spinner-orange {
    border-top-color: hsl(24 95% 53%);
    border-color: rgba(249, 115, 22, .28);
}

.spinner-danger {
    border-top-color: hsl(0 84.2% 60.2%);
    border-color: rgba(239, 68, 68, .3);
}

/* ── Pagination ─────────────────────────────────────────── */
.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.625rem;
    padding: 0 .35rem;
    font-size: var(--text-xs);
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--background);
    color: var(--foreground);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    -webkit-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}
.pg-btn:hover:not(:disabled) { background: var(--secondary); border-color: var(--border-strong); }
.pg-btn:disabled { opacity: .5; cursor: not-allowed; }
.pg-btn.active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

/* ── Status badge ───────────────────────────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: .12rem .5rem;
    border-radius: 9999px;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}
.status-approved { background: hsl(142 76% 93%); color: hsl(142 58% 23%); }
.status-pending  { background: hsl(45 93% 93%);  color: hsl(28 82% 32%);  }
.status-rejected { background: hsl(0 86% 95%);   color: hsl(0 72% 40%);   }
.status-default  { background: var(--secondary);  color: var(--muted-foreground); }

/* ── Stat cards ─────────────────────────────────────────── */
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: .625rem;
    padding: .875rem 1rem;
    box-shadow: var(--card-shadow);
    transition: box-shadow .2s ease, transform .14s ease;
    overflow: hidden;
    position: relative;
}
.stat-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-1px);
}
.stat-card-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--muted-foreground);
    margin-bottom: .35rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}
.stat-card-value {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
}
.stat-card-sub {
    font-size: var(--text-xs);
    color: var(--subtle-foreground);
    margin-top: .2rem;
}
.stat-card-blue    .stat-card-label { color: hsl(217 85% 43%); }
.stat-card-emerald .stat-card-label { color: hsl(142 60% 30%); }
.stat-card-amber   .stat-card-label { color: hsl(38 85% 34%); }
.stat-card-violet  .stat-card-label { color: hsl(262 70% 46%); }
.stat-card-blue::before, .stat-card-emerald::before,
.stat-card-amber::before, .stat-card-violet::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}
.stat-card-blue::before    { background: hsl(217 91% 54%); }
.stat-card-emerald::before { background: hsl(142 71% 44%); }
.stat-card-amber::before   { background: hsl(45 93% 46%);  }
.stat-card-violet::before  { background: hsl(262 83% 57%); }

.stat-card-value-compact {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
}

.analytics-chart-shell {
    position: relative;
    padding: 1rem;
    height: 200px;
}

.analytics-chart-shell-tall {
    height: 220px;
}

.analytics-chart-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.analytics-chart-overlay-surface {
    z-index: 10;
    background: hsl(0 0% 100% / .82);
}

.metric-share-fill {
    background: hsl(142 71% 45%);
}

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    padding: 2.5rem 1rem;
    text-align: center;
}
.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--muted-foreground);
    flex-shrink: 0;
}
.empty-state-icon svg { width: 1.25rem; height: 1.25rem; }
.empty-state-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--foreground);
    letter-spacing: -.01em;
}
.empty-state-desc {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    max-width: 22rem;
    line-height: 1.5;
    margin-top: -.25rem;
}

.empty-state-panel {
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    background: hsl(220 20% 98% / .7);
}

/* ── Tooltip ─────────────────────────────────────────────── */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    background: var(--tooltip-bg);
    color: var(--tooltip-fg);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: -.005em;
    line-height: 1.4;
    padding: .3rem .55rem;
    border-radius: var(--radius-xs);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 9999;
    -webkit-font-smoothing: antialiased;
    box-shadow: 0 2px 8px hsla(0,0%,0%,.18);
}
[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: var(--tooltip-bg);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 9999;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Tooltip arah bawah */
[data-tooltip-pos="bottom"]::before {
    bottom: auto;
    top: calc(100% + 6px);
    transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 1px);
    transform: translateX(-50%) translateY(-4px);
    border-top-color: transparent;
    border-bottom-color: var(--tooltip-bg);
}
[data-tooltip-pos="bottom"]:hover::before,
[data-tooltip-pos="bottom"]:hover::after {
    transform: translateX(-50%) translateY(0);
}

/* ── Alpine tab transitions ──────────────────────────────── */
/* Use on elements like: x-transition:enter="tab-enter" and related classes */
.tab-enter        { transition: opacity .18s ease, transform .18s ease; }
.tab-enter-start  { opacity: 0; transform: translateY(4px); }
.tab-enter-end    { opacity: 1; transform: translateY(0); }
.tab-leave        { transition: opacity .12s ease; }
.tab-leave-start  { opacity: 1; }
.tab-leave-end    { opacity: 0; }

/* Fade only (lighter for sub-tabs) */
.fade-enter       { transition: opacity .15s ease; }
.fade-enter-start { opacity: 0; }
.fade-enter-end   { opacity: 1; }
.fade-leave       { transition: opacity .1s ease; }
.fade-leave-start { opacity: 1; }
.fade-leave-end   { opacity: 0; }

/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
    border: 2px solid var(--border-strong);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .6s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

#toast,
#sl-toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 9999;
    min-width: 18rem;
    max-width: 23rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: .8rem;
    background: hsl(0 0% 100% / .95);
    box-shadow: 0 4px 12px hsla(220,42%,10%,.12);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}

#toast.toast-success,
#sl-toast.toast-success {
    background: hsl(142 76% 97%);
    border-color: hsl(142 71% 74%);
}

#toast.toast-error,
#sl-toast.toast-error {
    background: hsl(0 86% 97%);
    border-color: hsl(0 84% 80%);
}

#toast.toast-info,
#sl-toast.toast-info {
    background: hsl(217 91% 97%);
    border-color: hsl(217 91% 78%);
}

.toast-body {
    display: flex;
    align-items: flex-start;
    gap: .68rem;
    padding: .8rem 1rem;
}

.toast-progress {
    width: 100%;
    height: 3px;
    transform-origin: left;
    animation: toastProgress linear forwards;
}

#toast.toast-success .toast-progress,
#sl-toast.toast-success .toast-progress { background: hsl(142 71% 45%); }

#toast.toast-error .toast-progress,
#sl-toast.toast-error .toast-progress { background: hsl(0 84% 58%); }

#toast.toast-info .toast-progress,
#sl-toast.toast-info .toast-progress { background: hsl(217 91% 58%); }

@keyframes toastProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* ── Pulse dot ───────────────────────────────────────────── */
.pulse-dot { animation: pulseDot 1.5s ease-in-out infinite; }
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .45; transform: scale(.78); }
}

/* ── Row animations ─────────────────────────────────────── */
@keyframes clickRowSlideIn {
    0%   { opacity: 0; transform: translateY(-6px); background-color: var(--emerald-light); }
    20%  { opacity: 1; transform: translateY(0);    background-color: var(--emerald-light); }
    70%  { background-color: var(--emerald-light); }
    100% { background-color: transparent; }
}
.click-row-new { animation: clickRowSlideIn 1.8s ease-out forwards; }
.conv-new-row  { background: var(--emerald-light) !important; border-left: 2px solid var(--emerald); }

/* ── Flat corners / no shadow override for index.php + sl.php ── */
.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl,
.drop-shadow,
.drop-shadow-sm,
.drop-shadow-md,
.drop-shadow-lg,
.drop-shadow-xl,
.drop-shadow-2xl {
    box-shadow: none !important;
    filter: none !important;
}

.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
    border-radius: .3rem !important;
}

header,
.card,
.sl-card,
.auth-card,
.auth-logo,
.history-item,
.macro-box,
.badge,
.tab-badge,
.status-badge,
.chip,
.btn,
.input,
.textarea,
.sl-input,
.input-icon-btn,
.auth-alert,
.pg-btn,
.stat-card,
#toast,
#sl-toast {
    box-shadow: none;
}

.card:hover,
.sl-card:hover,
.stat-card:hover {
    box-shadow: none;
}

.btn-primary,
.btn-default,
.btn-primary:hover,
.btn-default:hover,
.btn-primary:active,
.btn-default:active,
.btn-destructive,
.btn-destructive:hover,
.btn-outline,
.btn-outline:hover,
.input,
.textarea,
.sl-input,
.input-prefix,
.history-item,
#toast,
#sl-toast,
.auth-logo {
    box-shadow: none;
}

.btn,
.input,
.textarea,
.sl-input,
.input-icon-btn,
.auth-card,
.auth-logo,
.auth-alert,
.sl-card,
.history-item,
.macro-box,
.pg-btn,
.stat-card,
#toast,
#sl-toast {
    border-radius: .3rem;
}

.tab-btn {
    border-radius: .3rem .3rem 0 0;
}

.input-prefix {
    border-radius: .3rem 0 0 .3rem;
}

.input-suffix {
    border-radius: 0 .3rem .3rem 0 !important;
}

/* ── Fluid / responsive helpers ──────────────────────────── */
.container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(.75rem, 4vw, 1.5rem);
}
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: clamp(.5rem, 2vw, .875rem);
}
.text-fluid-xs   { font-size: clamp(var(--text-2xs), 1.2vw, var(--text-xs));   }
.text-fluid-sm   { font-size: clamp(var(--text-xs),  1.5vw, var(--text-base)); }
.text-fluid-base { font-size: clamp(var(--text-base),1.8vw, var(--text-md));   }
.text-fluid-lg   { font-size: clamp(var(--text-lg),  2.2vw, var(--text-xl));   }

/* ── Touch / hover media ─────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .tbl tbody tr:hover    { background: transparent; }
    .card:hover            { box-shadow: var(--card-shadow); }
    .stat-card:hover       { transform: none; box-shadow: var(--card-shadow); }
    .pg-btn                { min-width: 2rem; height: 2rem; font-size: var(--text-sm); }
    .btn-sm                { min-height: 2.25rem; }
    [data-tooltip]::before,
    [data-tooltip]::after  { display: none; }   /* tooltip is hidden on touch devices */
}

/* ── xs ≤ 480px ──────────────────────────────────────────── */
@media (max-width: 480px) {
    #sl-toast, #toast {
        left: .75rem !important; right: .75rem !important;
        min-width: 0 !important; max-width: none !important;
        width: auto !important;  bottom: .75rem !important;
    }
    .btn-default-size { height: 2.75rem; padding-inline: .875rem; font-size: var(--text-md); }
    .btn-sm    { height: 2.25rem; padding-inline: .75rem; font-size: var(--text-base); }
    .btn-lg    { height: 2.875rem; padding-inline: 1.25rem; }
    .btn-icon  { height: 2.5rem; width: 2.5rem; }
    .input     { height: 2.75rem; font-size: var(--text-md); padding-inline: .875rem; }
    input.sl-input,
    select.sl-input,
    .input-prefix { min-height: 2.75rem; font-size: var(--text-md); }
    textarea.sl-input { font-size: var(--text-md); padding: .625rem .875rem; }
    .textarea  { font-size: var(--text-md); padding: .625rem .875rem; }
    .stat-card-value { font-size: var(--text-2xl); }
    .stat-card { padding: .75rem .875rem; }
    .tbl th    { padding: .35rem .625rem; font-size: var(--text-2xs); }
    .tbl td    { padding: .35rem .625rem; font-size: var(--text-xs); }
    .empty-state { padding: 1.75rem .75rem; }
    .auth-shell { padding-top: 1.25rem; }
    .auth-card { padding: 1.15rem; border-radius: .3rem; }
    .auth-logo { width: 3rem; height: 3rem; }
}

/* ── sm 481–639px ────────────────────────────────────────── */
@media (min-width: 481px) and (max-width: 639px) {
    .input            { height: 2.375rem; font-size: var(--text-md); }
    input.sl-input,
    select.sl-input,
    .input-prefix     { min-height: 2.375rem; font-size: var(--text-md); }
    textarea.sl-input { font-size: var(--text-md); }
    .textarea         { font-size: var(--text-md); }
    .btn-default-size { height: 2.375rem; }
    .btn-sm           { height: 2rem; padding-inline: .75rem; }
    .btn-icon         { height: 2.25rem; width: 2.25rem; }
}

/* ── md 640–767px ────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 767px) {
    .input            { height: 2.125rem; }
    input.sl-input,
    select.sl-input,
    .input-prefix     { min-height: 2.125rem; }
    .btn-default-size { height: 2.125rem; }
}