/* ─────────────────────────────────────────────────────────────────────────
   Nebroo Inventory Dashboard
   Soft Modern SaaS — lavender canvas, rounded white panel, floating cards
   in white / dark / gradient surfaces, vibrant violet accent.
   ────────────────────────────────────────────────────────────────────── */

:root {
    /* canvas — clean white */
    --canvas:        #FFFFFF;
    --canvas-2:      #FAFAF7;
    --panel:         #FFFFFF;
    --panel-tint:    #F8F8F5;

    /* ink — Amazon "Squid Ink" family */
    --ink:           #131A22;
    --ink-2:         #232F3E;
    --ink-soft:      #4A5560;
    --ink-faint:     #8B939B;
    --hairline:      #E7E4DC;
    --hairline-2:    #D9D5CB;

    /* dark surface — Amazon header navy */
    --dark:          #131A22;
    --dark-2:        #232F3E;
    --dark-text:     #FFFFFF;
    --dark-text-soft:#B6BEC7;

    /* brand accent — Amazon orange, used sparingly */
    --orange:        #FF9900;
    --orange-2:      #E47911;
    --orange-deep:   #C45500;
    --orange-soft:   #FFF3E0;
    --orange-faint:  #FFF8EE;
    --gold:          #B98213;

    /* keep --violet/--gradient names so existing rules still resolve,
       but point them at the new restrained palette */
    --violet:        var(--orange-2);
    --violet-2:      var(--orange-deep);
    --violet-soft:   var(--orange-soft);
    --violet-faint:  var(--orange-faint);
    --gradient:      linear-gradient(135deg, #FF9900 0%, #E47911 100%);
    --gradient-cool: linear-gradient(135deg, #232F3E 0%, #37475A 100%);

    /* status — Amazon-native, grown-up tones */
    --critical:      #B12704;
    --critical-bg:   #FBEBE7;
    --critical-soft: #FDF4F1;
    --warn:          #C77F0E;
    --warn-bg:       #FBEFD6;
    --warn-soft:     #FDF8EC;
    --ok:            #067D62;
    --ok-bg:         #D8EFE8;
    --ok-soft:       #EBF6F2;
    --excess:        #146EB4;
    --excess-bg:     #DCEAF5;
    --excess-soft:   #ECF3F9;
    --idle:          #687076;
    --idle-bg:       #E1E2E3;
    --idle-soft:     #F0F1F2;

    /* shape */
    --r-panel:       24px;
    --r-card:        18px;
    --r-card-sm:     12px;
    --r-pill:        999px;

    /* shadows — neutral, no violet tint */
    --shadow-sm:     0 1px 2px rgba(35,47,62,0.05), 0 2px 6px rgba(35,47,62,0.04);
    --shadow-md:     0 1px 3px rgba(35,47,62,0.06), 0 8px 24px rgba(35,47,62,0.07);
    --shadow-lg:     0 2px 4px rgba(35,47,62,0.05), 0 18px 44px rgba(35,47,62,0.08);
    --shadow-dark:   0 1px 2px rgba(0,0,0,0.10), 0 12px 32px rgba(19,26,34,0.20);

    /* type */
    --sans:          "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono:          ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--violet); color: white; }

/* Decorative SVG corners — disabled on the mature/white look. */
.canvas-decor { display: none; }

/* ───── PAGE ──────────────────────────────────────────────────────── */
.page {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 32px 36px;
}
/* Panel wrapper is no longer a card — just a transparent container so
   existing markup keeps working. */
.panel {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    position: relative;
    overflow: visible;
    isolation: auto;
}

/* ───── HEADER (topbar) ──────────────────────────────────────────── */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.topbar-left h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.1;
}
.topbar-left h1 .accent-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gradient);
    margin-left: 6px;
    vertical-align: 2px;
    box-shadow: 0 0 0 4px rgba(255,153,0,0.18);
}
.topbar .meta {
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--ink-soft);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.topbar .meta strong {
    color: var(--ink);
    font-weight: 500;
}
.meta-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--violet);
    margin-right: 8px;
    vertical-align: 3px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ───── window dropdown — soft pill with chevron ───── */
.window-form {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--panel-tint);
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    padding: 5px 6px 5px 16px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.window-form:hover { border-color: var(--hairline-2); }
.window-form:focus-within {
    border-color: var(--violet);
    box-shadow: 0 0 0 4px var(--violet-faint);
}
.window-label {
    font-size: 11px;
    color: var(--ink-soft);
    font-weight: 500;
    margin-right: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.window-form .select-wrap {
    position: relative;
    display: inline-block;
}
.window-form select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 6px 28px 6px 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    outline: none;
    border-radius: var(--r-pill);
}
.window-form .select-wrap::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.6px solid var(--ink);
    border-bottom: 1.6px solid var(--ink);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

/* upload — gradient-filled CTA */
.upload-form {
    display: inline-flex;
    align-items: center;
}
.upload-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--gradient);
    color: white;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--r-pill);
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 14px rgba(255,153,0,0.28), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.upload-label:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255,153,0,0.34), inset 0 1px 0 rgba(255,255,255,0.20);
}
.upload-label::before {
    content: "+";
    font-size: 16px;
    line-height: 1;
    margin-right: 1px;
    font-weight: 400;
}
.upload-form input[type=file] {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
}

.logout-link {
    font-size: 12px;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--r-pill);
    transition: background 0.15s ease, color 0.15s ease;
}
.logout-link:hover { background: var(--violet-faint); color: var(--violet); }

/* ───── flash + headline ───── */
.flash {
    padding: 12px 18px;
    border-radius: var(--r-card-sm);
    margin-bottom: 16px;
    font-size: 13px;
    background: var(--violet-soft);
    color: var(--ink);
    border: 1px solid var(--violet-faint);
}
.flash-ok    { background: var(--ok-soft);       color: var(--ok);       border-color: var(--ok-bg); }
.flash-error { background: var(--critical-soft); color: var(--critical); border-color: var(--critical-bg); }
.flash-info  { background: var(--violet-soft);   color: var(--violet);   border-color: var(--violet-faint); }

.headline {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: var(--r-card);
    margin-bottom: 24px;
    background: var(--panel-tint);
    border: 1px solid var(--hairline);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
}
.headline::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 5px;
    background: var(--violet);
    border-radius: 4px 0 0 4px;
}
.headline-mark {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gradient);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(255,153,0,0.28);
}
.headline-ok        { background: var(--ok-soft);       border-color: var(--ok-bg); }
.headline-ok::before        { background: var(--ok); }
.headline-ok .headline-mark { background: var(--ok); box-shadow: 0 4px 14px rgba(16,185,129,0.30); }
.headline-warn      { background: var(--warn-soft);     border-color: var(--warn-bg); }
.headline-warn::before      { background: var(--warn); }
.headline-warn .headline-mark { background: var(--warn); box-shadow: 0 4px 14px rgba(245,158,11,0.30); }
.headline-critical  { background: var(--critical-soft); border-color: var(--critical-bg); }
.headline-critical::before  { background: var(--critical); }
.headline-critical .headline-mark { background: var(--critical); box-shadow: 0 4px 14px rgba(255,71,87,0.30); }
.headline-info      { background: var(--violet-soft);   border-color: var(--violet-faint); }
.headline-info::before      { background: var(--violet); }

/* ───── KPI GRID ─────────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.kpi {
    position: relative;
    border-radius: var(--r-card);
    padding: 22px 22px 20px;
    background: var(--panel);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: rise 0.5s cubic-bezier(.2,.7,.2,1) both;
    animation-delay: calc(var(--kpi-i, 1) * 0.05s);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi:nth-child(1) { --kpi-i: 1; }
.kpi:nth-child(2) { --kpi-i: 2; }
.kpi:nth-child(3) { --kpi-i: 3; }
.kpi:nth-child(4) { --kpi-i: 4; }

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kpi-label {
    font-size: 11.5px;
    color: var(--ink-soft);
    font-weight: 500;
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}
.kpi-value {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.kpi-sub {
    font-size: 12px;
    color: var(--ink-soft);
}

/* KPI variants — break the visual rhythm with mixed card styles */
.kpi-dark {
    background: var(--dark);
    color: var(--dark-text);
    border: none;
    box-shadow: var(--shadow-dark);
}
.kpi-dark .kpi-label { color: var(--dark-text-soft); }
.kpi-dark .kpi-value { color: var(--dark-text); }
.kpi-dark .kpi-sub   { color: var(--dark-text-soft); }
.kpi-dark::after {
    /* very subtle warm glow inside the dark navy card */
    content: "";
    position: absolute;
    bottom: -60px; right: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,153,0,0.16), transparent 60%);
    pointer-events: none;
    z-index: -1;
    filter: blur(24px);
}

/* Revenue tile — single warm orange brand accent */
.kpi-gradient {
    background: var(--gradient);
    color: white;
    border: none;
    box-shadow: 0 6px 20px rgba(255,153,0,0.22);
    overflow: hidden;
}
.kpi-gradient .kpi-label { color: rgba(255,255,255,0.85); }
.kpi-gradient .kpi-value { color: white; }
.kpi-gradient .kpi-sub   { color: rgba(255,255,255,0.90); }
.kpi-gradient::before {
    /* very subtle warm highlight, no decorative blobs */
    content: "";
    position: absolute;
    top: -60px;
    right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.kpi-gradient > * { position: relative; z-index: 1; }

/* Inbound tile — white card with warm orange accent number */
.kpi-violet {
    background: var(--panel);
    border: 1px solid var(--hairline);
    position: relative;
}
.kpi-violet .kpi-value { color: var(--orange-2); }
.kpi-violet::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--orange);
    border-radius: var(--r-card) 0 0 var(--r-card);
}
.kpi-violet::after { content: none; }

@media (max-width: 1100px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .kpi-grid { grid-template-columns: 1fr; }
}

/* ───── EMPTY STATE ──────────────────────────────────────────────── */
.empty-state {
    background: var(--panel-tint);
    border: 2px dashed var(--hairline-2);
    border-radius: var(--r-card);
    padding: 64px 24px;
    text-align: center;
    color: var(--ink-soft);
}
.empty-state p { margin: 6px 0; }
.muted { color: var(--ink-soft); }

/* ───── SKU TABLE CARD ────────────────────────────────────────────── */
.sku-table-section {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
}
.sku-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sku-table thead th {
    text-align: left;
    padding: 16px 18px;
    background: var(--panel-tint);
    border-bottom: 1px solid var(--hairline);
    font-weight: 500;
    font-size: 11px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: top;
}
.sku-table thead .th-sub {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--ink-faint);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 3px;
}
.col-status { width: 32px; }
.col-name   { min-width: 280px; }
.col-num    { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-trend  { white-space: nowrap; }
.col-action { white-space: nowrap; text-align: right; }

.sku-table tbody td {
    padding: 18px;
    border-bottom: 1px solid var(--hairline);
    vertical-align: middle;
}
.sku-table tbody tr:last-child td { border-bottom: 0; }

.sku-row {
    cursor: pointer;
    transition: background 0.15s ease;
}
.sku-row:hover { background: var(--panel-tint); }
.sku-row.is-open { background: var(--violet-faint); }

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--idle);
    box-shadow: 0 0 0 3px var(--idle-bg);
}
.dot-critical { background: var(--critical); box-shadow: 0 0 0 3px var(--critical-bg); }
.dot-warn     { background: var(--warn);     box-shadow: 0 0 0 3px var(--warn-bg); }
.dot-ok       { background: var(--ok);       box-shadow: 0 0 0 3px var(--ok-bg); }
.dot-excess   { background: var(--violet);   box-shadow: 0 0 0 3px var(--excess-bg); }
.dot-idle     { background: var(--idle);     box-shadow: 0 0 0 3px var(--idle-bg); }

.product-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.3;
}
.product-sku {
    color: var(--ink-faint);
    font-size: 11px;
    font-family: var(--mono);
    margin-top: 4px;
    letter-spacing: 0.02em;
}

.big-cell {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}
.big-cell.dim { color: var(--ink-faint); font-weight: 400; }

/* cover pill — soft rounded */
.cover-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    background: var(--idle-bg);
    color: var(--idle);
    min-width: 56px;
    font-variant-numeric: tabular-nums;
}
.cover-pill-critical { background: var(--critical-bg); color: var(--critical); }
.cover-pill-warn     { background: var(--warn-bg);     color: #B45309; }
.cover-pill-ok       { background: var(--ok-bg);       color: #065F46; }
.cover-pill-excess   { background: var(--excess-bg);   color: var(--violet); }
.cover-pill-idle     { background: var(--idle-bg);     color: #475569; }

.trend-arrow { font-size: 18px; margin-right: 6px; vertical-align: -2px; font-weight: 600; }
.trend-up   .trend-arrow { color: var(--ok); }
.trend-down .trend-arrow { color: var(--critical); }
.trend-flat .trend-arrow { color: var(--ink-faint); }
.trend-label { font-size: 12px; color: var(--ink-soft); }

.action-pill {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 500;
    background: var(--idle-bg);
    color: var(--idle);
}
.action-pill-critical { background: var(--critical-bg); color: var(--critical); }
.action-pill-warn     { background: var(--warn-bg);     color: #B45309; }
.action-pill-ok       { background: var(--ok-bg);       color: #065F46; }
.action-pill-excess   { background: var(--excess-bg);   color: var(--violet); }
.action-pill-idle     { background: var(--idle-bg);     color: #475569; }

/* ───── DRILL DOWN ───────────────────────────────────────────────── */
.drill-row td {
    background: var(--canvas);
    padding: 0 !important;
    border-bottom: 0 !important;
}
.drill {
    padding: 24px 22px 28px;
    animation: drillIn 0.35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes drillIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.drill-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.drill-card {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card-sm);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.18s ease;
}
.drill-card:hover { box-shadow: var(--shadow-md); }
.drill-card h4 {
    margin: 0 0 12px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    font-weight: 600;
}

@media (max-width: 900px) {
    .drill-grid { grid-template-columns: 1fr; }
}

.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.mini-table th, .mini-table td {
    padding: 8px 0;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink);
}
.mini-table thead th {
    font-weight: 500;
    color: var(--ink-soft);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom-width: 1px;
}
.mini-table tbody tr:last-child td { border-bottom: 0; }
.mini-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mini-table tr.total td { font-weight: 600; border-top: 1px solid var(--hairline-2); padding-top: 10px; }

.big-number {
    font-size: 34px;
    font-weight: 600;
    margin: 6px 0 4px;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1.05;
}
.big-number.ok    { color: var(--ok); }
.big-number.muted { color: var(--ink-faint); font-weight: 500; }
.big-number .unit { font-size: 13px; color: var(--ink-soft); font-weight: 400; margin-left: 6px; }

.amazon-note, .warn-note {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--r-card-sm);
    font-size: 12.5px;
    line-height: 1.5;
}
.amazon-note { background: var(--violet-faint); color: var(--ink-2); }
.warn-note   { background: var(--warn-soft);    color: #92400E; }

.amazon-coach { background: var(--violet-faint); border-color: transparent; }
.amazon-coach p { margin: 0; line-height: 1.5; }

.age-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.age-bar-row {
    display: grid;
    grid-template-columns: 70px 1fr 60px;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
.age-label { color: var(--ink-soft); font-size: 11px; }
.age-bar {
    height: 8px;
    background: var(--hairline);
    border-radius: var(--r-pill);
    overflow: hidden;
    position: relative;
}
.age-bar-fill {
    display: block;
    height: 100%;
    background: var(--gradient);
    border-radius: var(--r-pill);
    transition: width 0.6s cubic-bezier(.2,.7,.2,1);
}
.age-bar-fill.old { background: linear-gradient(90deg, var(--warn), var(--critical)); }
.age-qty {
    text-align: right;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* ───── how-it-works + parse-warnings ───── */
.how-it-works, .parse-warnings {
    margin-bottom: 18px;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card-sm);
    padding: 14px 18px;
}
.how-it-works summary, .parse-warnings summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    list-style: none;
    position: relative;
    padding-left: 22px;
}
.how-it-works summary::-webkit-details-marker,
.parse-warnings summary::-webkit-details-marker { display: none; }
.how-it-works summary::before,
.parse-warnings summary::before {
    content: "+";
    position: absolute;
    left: 0; top: -1px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--violet-soft);
    color: var(--violet);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}
.how-it-works details[open] summary::before,
.parse-warnings details[open] summary::before {
    content: "−";
}
.how-it-works ul, .parse-warnings ul {
    margin: 12px 0 4px;
    padding-left: 20px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.6;
}
.how-it-works li, .parse-warnings li { margin-bottom: 6px; }
.how-it-works strong { color: var(--ink); font-weight: 600; }

/* ───── footer ───── */
.footer {
    margin: 24px auto 0;
    padding: 0 8px;
    text-align: center;
    font-size: 12px;
    color: var(--ink-soft);
}

/* ───── LOGIN ───── */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    position: relative;
}
.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--panel);
    border-radius: var(--r-card);
    padding: 36px 32px 30px;
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.login-card::before {
    content: "";
    position: absolute;
    top: -100px; right: -100px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(255,153,0,0.18), transparent 60%);
    pointer-events: none;
}
.login-card .login-mark {
    width: 44px; height: 44px;
    border-radius: 14px;
    background: var(--gradient);
    box-shadow: 0 8px 24px rgba(255,153,0,0.28);
    margin-bottom: 18px;
    position: relative;
}
.login-card .login-mark::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 8px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 60%);
}
.login-card h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.login-card > p {
    margin: 0 0 20px;
    color: var(--ink-soft);
    font-size: 13px;
}
.login-card label {
    display: block;
    font-size: 11px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 8px 0 6px;
    font-weight: 500;
}
.login-card input[type=password] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-card-sm);
    font-family: inherit;
    font-size: 14px;
    background: var(--panel-tint);
    color: var(--ink);
    margin-bottom: 18px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.login-card input[type=password]:focus {
    outline: none;
    border-color: var(--violet);
    background: white;
    box-shadow: 0 0 0 4px var(--violet-faint);
}
.login-card button {
    width: 100%;
    padding: 12px 14px;
    background: var(--gradient);
    color: white;
    border: none;
    border-radius: var(--r-card-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255,153,0,0.28);
    transition: transform 0.15s ease, box-shadow 0.18s ease;
}
.login-card button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255,153,0,0.34);
}
.login-card code {
    background: var(--violet-faint);
    color: var(--violet);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 11.5px;
}

@media (max-width: 760px) {
    .page { padding: 0 14px; margin: 14px auto; }
    .panel { padding: 22px 18px 24px; border-radius: 22px; }
    .topbar { gap: 14px; }
    .topbar-right { gap: 8px; }
    .sku-table thead th { padding: 12px 10px; font-size: 10px; }
    .sku-table tbody td { padding: 14px 10px; }
}