/* ============================================================
   nanoSeller admin — "Vapor Chamber" dark theme
   Display: Unbounded · Body: Sora · Mono: JetBrains Mono
   ============================================================ */

:root {
    /* surfaces */
    --bg:          #06080e;
    --bg-2:        #0a0e18;
    --panel:       rgba(19, 24, 38, 0.62);
    --panel-solid: #11151f;
    --field:       rgba(11, 15, 24, 0.72);

    /* ink */
    --ink:    #eaf0fb;
    --muted:  #8b94ab;
    --faint:  #5b6479;

    /* lines */
    --line:        rgba(255, 255, 255, 0.075);
    --line-strong: rgba(255, 255, 255, 0.15);

    /* vapor accents */
    --accent:     #4ff5cf;   /* mint vapor */
    --accent-2:   #9d7bff;   /* violet vapor */
    --accent-ink: #04130f;
    --danger:     #ff647c;
    --ok:         #4ff5cf;
    --warn:       #ffc24b;   /* pending */

    /* glows */
    --glow:    rgba(79, 245, 207, 0.30);
    --glow-2:  rgba(157, 123, 255, 0.28);

    --r:   14px;
    --r-sm: 9px;
    --shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.75);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Sora", -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
}

/* ── ambient vapor mesh + grain ───────────────────────────── */
body::before {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: -2;
    background:
        radial-gradient(38% 42% at 18% 12%, rgba(79, 245, 207, 0.16), transparent 70%),
        radial-gradient(34% 38% at 88% 18%, rgba(157, 123, 255, 0.18), transparent 70%),
        radial-gradient(46% 50% at 70% 95%, rgba(79, 245, 207, 0.10), transparent 72%),
        radial-gradient(40% 44% at 8% 88%, rgba(157, 123, 255, 0.12), transparent 72%);
    filter: blur(8px);
    animation: drift 26s ease-in-out infinite alternate;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}

/* ── top bar ──────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 26px;
    height: 60px;
    padding: 0 22px;
    background: rgba(8, 11, 18, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--line);
}
.topbar .brand {
    font-family: "Unbounded", sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.3px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 9px;
}
.topbar .brand::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px 2px var(--glow), 0 0 4px var(--accent);
    animation: pulse 3.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.82); }
}

.topbar .sections { display: flex; gap: 4px; flex: 1; }
.topbar .sections a,
.topbar .logout {
    position: relative;
    color: var(--muted);
    text-decoration: none;
    padding: 8px 13px;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s, background 0.2s;
}
.topbar .sections a::after {
    content: "";
    position: absolute;
    left: 13px; right: 13px; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--glow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.topbar .sections a:hover { color: var(--ink); }
.topbar .sections a:hover::after { transform: scaleX(1); }
.topbar .sections a.active {
    color: var(--ink);
    background: rgba(79, 245, 207, 0.08);
}
.topbar .sections a.active::after { transform: scaleX(1); }
.topbar .logout:hover { color: var(--danger); }

/* ── sub nav ──────────────────────────────────────────────── */
.subnav {
    display: flex;
    gap: 4px;
    padding: 12px 22px;
    flex-wrap: wrap;
    background: rgba(10, 14, 24, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.subnav a {
    color: var(--muted);
    text-decoration: none;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 13.5px;
    border: 1px solid transparent;
    transition: all 0.18s;
}
.subnav a:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--line-strong);
}
.subnav a.active {
    color: var(--accent);
    background: rgba(79, 245, 207, 0.10);
    border-color: rgba(79, 245, 207, 0.32);
    box-shadow: 0 0 16px -6px var(--glow);
}

/* ── layout ───────────────────────────────────────────────── */
.container {
    max-width: 1020px;
    margin: 34px auto;
    padding: 0 22px;
    animation: fade-up 0.55s ease both;
}
@keyframes fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

h1 {
    font-family: "Unbounded", sans-serif;
    font-weight: 600;
    font-size: 27px;
    letter-spacing: -0.6px;
    margin: 0 0 22px;
    line-height: 1.15;
}
h2 {
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.2px;
    margin: 30px 0 13px;
    color: var(--ink);
}

h1 .muted {
    font-family: "Sora", sans-serif;
    font-weight: 400;
    font-size: 0.6em;
    letter-spacing: 0;
    vertical-align: middle;
}

a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── stat cards ───────────────────────────────────────────── */
.cards { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.card {
    position: relative;
    flex: 1;
    min-width: 158px;
    padding: 19px 22px;
    border-radius: var(--r);
    background: var(--panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
                border-color 0.28s;
    animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
}
.card:hover {
    transform: translateY(-4px);
    border-color: rgba(79, 245, 207, 0.35);
}
.card .num {
    font-family: "Unbounded", sans-serif;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -1px;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(110deg, #ffffff 8%, var(--accent) 50%, #ffffff 92%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }
.card .lbl {
    margin-top: 7px;
    color: var(--muted);
    font-size: 12.5px;
    letter-spacing: 0.2px;
}
/* hero stat — the headline metric, alone on its row (so full-width) and larger. */
.card-hero .num { font-size: 46px; }
.card-hero .lbl { margin-top: 9px; font-size: 13.5px; }
.cards .card:nth-child(1) { animation-delay: 0.02s; }
.cards .card:nth-child(2) { animation-delay: 0.08s; }
.cards .card:nth-child(3) { animation-delay: 0.14s; }
.cards .card:nth-child(4) { animation-delay: 0.20s; }
.cards .card:nth-child(5) { animation-delay: 0.26s; }
@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── tables ───────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
}
th, td {
    text-align: left;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
th {
    background: rgba(255, 255, 255, 0.025);
    color: var(--muted);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: rgba(79, 245, 207, 0.045); }
tr:last-child td { border-bottom: none; }
td.code, .code {
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font-size: 12.5px;
    color: var(--accent);
}

/* ── forms ────────────────────────────────────────────────── */
form.row, .row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
form.inline { display: inline; }

input[type=text], input[type=password], input[type=number],
input[type=file], textarea, select {
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    background: var(--field);
    color: var(--ink);
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type=text], textarea { min-width: 220px; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--glow);
    background: rgba(11, 15, 24, 0.92);
}
textarea {
    width: 100%;
    min-height: 140px;
    line-height: 1.55;
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font-size: 13px;
    resize: vertical;
}
input[type=file] { color: var(--muted); cursor: pointer; }
select { cursor: pointer; }
label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 14px;
}
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }

/* ── buttons ──────────────────────────────────────────────── */
button {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: var(--r-sm);
    padding: 10px 17px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    color: var(--accent-ink);
    background: linear-gradient(135deg, var(--accent), #38d6c9);
    box-shadow: 0 6px 20px -8px var(--glow);
    transition: transform 0.16s, box-shadow 0.22s, filter 0.16s;
}
button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px -8px var(--glow), 0 0 0 1px rgba(79, 245, 207, 0.3);
    filter: brightness(1.06);
}
button:active { transform: translateY(0); }
button.danger {
    color: #fff;
    background: linear-gradient(135deg, var(--danger), #d23a55);
    box-shadow: 0 6px 20px -8px rgba(255, 100, 124, 0.4);
}
button.danger:hover {
    box-shadow: 0 10px 26px -8px rgba(255, 100, 124, 0.5), 0 0 0 1px rgba(255, 100, 124, 0.3);
}
button.ghost {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line-strong);
    box-shadow: none;
}
button.ghost:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--glow);
}

/* ── icons (inline Lucide) ────────────────────────────────── */
.ic {
    flex: none;
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.18em;   /* align with surrounding text when inline */
    stroke-width: 2;
}
/* controls that carry an icon + label sit on one centered line */
button,
.topbar .sections a,
.topbar .logout,
.subnav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
button { justify-content: center; }
.topbar .sections a .ic { opacity: 0.85; }
.topbar .sections a.active .ic,
.topbar .sections a:hover .ic { opacity: 1; }

/* ── misc ─────────────────────────────────────────────────── */
.muted { color: var(--muted); }

/* stock signalling */
.stock-out  { color: var(--danger); font-weight: 600; }
.stock-low  { color: var(--warn);   font-weight: 600; }

/* ── bar charts (dependency-free) ─────────────────────────── */
.bars { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 18px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-label {
    flex: none; width: 88px;
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font-size: 11.5px; color: var(--muted); text-align: right;
}
.bar-track {
    flex: 1; height: 14px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.05); overflow: hidden;
}
.bar-fill {
    display: block; height: 100%; min-width: 2px; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    box-shadow: 0 0 10px -2px var(--glow);
}
.bar-val {
    flex: none; width: 72px;
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font-size: 12px; color: var(--ink);
}

/* ── grouped column chart (dependency-free) ───────────────── */
.col-chart { margin: 6px 0 22px; }
.col-legend {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    margin-bottom: 12px; font-size: 12.5px;
}
.col-leg { display: inline-flex; align-items: center; gap: 7px; }
.col-sw {
    flex: none; width: 12px; height: 12px; border-radius: 3px;
    box-shadow: 0 0 9px -2px currentColor;
}
.col-plot {
    display: flex; align-items: flex-end; gap: 3px;
    overflow-x: auto; padding-bottom: 2px;
}
.col-group { display: flex; flex-direction: column; flex: 1 1 0; min-width: 13px; }
.col-bars {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 2px; width: 100%;
}
.col {
    flex: 1 1 0; min-width: 3px; max-width: 11px; align-self: flex-end;
    border-radius: 3px 3px 0 0; transition: filter 0.15s;
}
.col:hover { filter: brightness(1.3); }
.col-x {
    height: 15px; margin-top: 5px; text-align: center;
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font-size: 10px; color: var(--muted); white-space: nowrap;
}

/* hover tooltip (shared, fixed-positioned so the plot's overflow never clips it) */
.chart-tip {
    position: fixed; z-index: 100; pointer-events: none;
    padding: 8px 11px; border-radius: var(--r-sm);
    background: var(--panel-solid); border: 1px solid var(--line-strong);
    box-shadow: var(--shadow), 0 0 30px -12px var(--glow-2);
    font-size: 12.5px; line-height: 1.45; white-space: nowrap;
}
.chart-tip[hidden] { display: none; }
.tip-date {
    color: var(--muted); margin-bottom: 3px;
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 11px;
}
.tip-metric { display: flex; align-items: center; gap: 7px; color: var(--ink); }
.tip-metric b { font-variant-numeric: tabular-nums; }
.tip-dot {
    flex: none; width: 9px; height: 9px; border-radius: 50%;
    box-shadow: 0 0 7px -1px currentColor;
}
code {
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font-size: 0.88em;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 5px;
    color: var(--accent-2);
}

.error, .ok {
    padding: 12px 15px;
    border-radius: var(--r-sm);
    margin-bottom: 14px;
    font-size: 14px;
    border: 1px solid;
    backdrop-filter: blur(8px);
}
.error {
    background: rgba(255, 100, 124, 0.10);
    color: #ff8c9d;
    border-color: rgba(255, 100, 124, 0.3);
}
.ok {
    background: rgba(79, 245, 207, 0.10);
    color: var(--accent);
    border-color: rgba(79, 245, 207, 0.3);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    /* base = pending / "ожидает" */
    color: var(--warn);
    background: rgba(255, 194, 75, 0.10);
    border: 1px solid rgba(255, 194, 75, 0.32);
}
.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 7px currentColor;
    animation: blink 2.2s ease-in-out infinite;
}
.badge.on {
    background: rgba(79, 245, 207, 0.12);
    color: var(--accent);
    border-color: rgba(79, 245, 207, 0.35);
}
.badge.off {
    background: rgba(255, 100, 124, 0.12);
    color: #ff8c9d;
    border-color: rgba(255, 100, 124, 0.35);
}
.badge.off::before { animation: none; }   /* revoked/off = steady, not pulsing */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.pager { display: flex; gap: 8px; margin-top: 16px; align-items: center; }

.panel {
    background: var(--panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
}
.panel > h2:first-child { margin-top: 0; }
.panel > form:last-child,
.panel > .row:last-child { margin-bottom: 0; }

pre.issued {
    background: #04060c;
    color: var(--accent);
    border: 1px solid rgba(79, 245, 207, 0.22);
    box-shadow: inset 0 0 40px -20px var(--glow);
    padding: 16px;
    border-radius: var(--r-sm);
    overflow: auto;
    white-space: pre-wrap;
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
}

/* ── login ────────────────────────────────────────────────── */
.login-body {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.login-card {
    position: relative;
    width: 340px;
    padding: 38px 34px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    background: var(--panel);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid var(--line-strong);
    border-radius: 22px;
    box-shadow: var(--shadow), 0 0 80px -30px var(--glow-2);
    animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.login-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
}
.login-card h1 {
    font-family: "Unbounded", sans-serif;
    font-size: 26px;
    margin: 0;
    letter-spacing: -0.5px;
    background: linear-gradient(120deg, #fff, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.login-card input, .login-card button { width: 100%; }
.login-card button { padding: 12px; margin-top: 4px; }

/* ── liveliness · reflections · feedback ──────────────────── */

/* text selection + caret */
::selection { background: rgba(79, 245, 207, 0.26); color: #fff; }
input, textarea { caret-color: var(--accent); }

/* themed scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(79, 245, 207, 0.35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.13);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 245, 207, 0.5);
    background-clip: padding-box;
}

/* keyboard focus ring (a11y) */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* sweeping light reflection on cards + buttons */
.card::after, button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -85%;
    width: 55%;
    height: 100%;
    transform: skewX(-20deg);
    pointer-events: none;
}
.card::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07), transparent); }
button::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent); }
.card:hover::after { animation: sheen 0.95s ease; }
button:hover::after { animation: sheen 0.7s ease; }
@keyframes sheen { to { left: 135%; } }

/* glossy top highlight on accent buttons */
button:not(.ghost)::before {
    content: "";
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(rgba(255, 255, 255, 0.22), transparent);
    pointer-events: none;
}

/* table row accent rail on hover */
tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* flash messages — slide in + status glyph */
.error, .ok {
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fade-up 0.4s ease both;
}
.ok    { box-shadow: 0 0 24px -10px var(--glow); }
.error { box-shadow: 0 0 24px -10px rgba(255, 100, 124, 0.5); }
.ok::before, .error::before {
    flex: none;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
}
.ok::before    { content: "✓"; background: rgba(79, 245, 207, 0.2); color: var(--accent); }
.error::before { content: "!"; background: rgba(255, 100, 124, 0.2); color: #ff8c9d; }

/* HTMX / disabled busy state (forward-compatible) */
.htmx-request, button:disabled { opacity: 0.6; pointer-events: none; }

/* ── responsive ───────────────────────────────────────────── */
/* tablet */
@media (max-width: 820px) {
    .card { flex: 1 1 calc(50% - 7px); }
}

/* phone */
@media (max-width: 560px) {
    /* top bar wraps: brand + logout on row 1, sections scroll on row 2 */
    .topbar {
        height: auto;
        min-height: 54px;
        padding: 10px 14px;
        gap: 10px 12px;
        flex-wrap: wrap;
    }
    .topbar .brand { font-size: 16px; }
    .topbar .logout { margin-left: auto; }
    .topbar .sections {
        order: 3;
        flex-basis: 100%;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .topbar .sections::-webkit-scrollbar { display: none; }
    .topbar .sections a { white-space: nowrap; flex: none; }
    .topbar .sections a::after { display: none; }   /* underline noise off on mobile */

    /* sub nav: horizontal scroll strip, no wrap */
    .subnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 14px;
        scrollbar-width: none;
    }
    .subnav::-webkit-scrollbar { display: none; }
    .subnav a { white-space: nowrap; flex: none; }

    .container { margin: 18px auto; padding: 0 14px; }
    h1 { font-size: 21px; margin-bottom: 16px; }
    h2 { font-size: 15px; }

    /* stat cards: two per row, last stretches */
    .cards { gap: 10px; }
    .card { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 15px 16px; }
    .card .num { font-size: 24px; }

    /* tables scroll horizontally instead of squashing */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    th, td { padding: 11px 13px; }

    /* forms stack full width */
    input[type=text], input[type=password], input[type=number],
    input[type=file], textarea, select {
        width: 100%;
        min-width: 0;
    }
    .row { gap: 9px; }
    .panel { padding: 16px; }

    /* comfortable tap targets */
    button { padding: 12px 16px; }
    .subnav a, .topbar .sections a { padding: 9px 13px; }
}

@media (max-width: 380px) {
    .card { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, body::before { animation: none !important; transition: none !important; }
}

/* ── catalog: collapsible categories with nested products ──── */
.catalog-newcat { margin-bottom: 22px; }

details.cat {
    background: var(--panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
details.cat > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
details.cat > summary::-webkit-details-marker { display: none; }
details.cat > summary::before {
    content: "\25B8";   /* ▸ */
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.18s;
}
details.cat[open] > summary::before { transform: rotate(90deg); }
details.cat > summary:hover { background: rgba(255, 255, 255, 0.03); }

.cat-head { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cat-name { font-weight: 600; font-size: 15px; }
.cat-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-rename { width: 140px; }
button.sm { padding: 6px 11px; font-size: 12.5px; }

/* ── catalog drag-and-drop ────────────────────────────────── */
.catalog-hint { font-size: 12.5px; margin: -10px 0 18px; }
.grip-demo, .p-grip, .cat-drag {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    color: var(--faint); letter-spacing: -1px;
}
.cat-drag, .p-grip {
    flex: none; cursor: grab; padding: 0 2px;
    transition: color 0.15s;
}
.cat-drag:active, .p-grip:active { cursor: grabbing; }
.cat-drag:hover, .product-row:hover .p-grip { color: var(--accent); }

/* product list sits flush inside the category card */
.product-list { border-top: 1px solid var(--line); }
.product-row {
    display: grid;
    grid-template-columns: auto 1fr auto 110px auto;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    transition: background 0.15s;
}
.product-list > .product-row:last-child { border-bottom: none; }
.product-row:hover { background: rgba(79, 245, 207, 0.045); }
.product-row .p-name { font-weight: 500; }
.product-row .p-price { font-variant-numeric: tabular-nums; color: var(--muted); }
.product-row .p-stock { font-size: 13px; text-align: right; }
.product-row .p-edit { text-align: right; }
.product-row .edit-hint { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.product-row:hover .edit-hint { color: var(--accent); }
.empty-cat { padding: 14px 18px; margin: 0; border-top: 1px solid var(--line); }

/* SortableJS drag states */
.sortable-ghost { opacity: 0.4; background: rgba(79, 245, 207, 0.10); }
.sortable-chosen { background: rgba(79, 245, 207, 0.06); }
.product-row.sortable-drag, details.cat.sortable-drag { opacity: 0.95; }

@media (max-width: 560px) {
    .product-row { grid-template-columns: auto 1fr auto auto; gap: 8px; padding: 11px 13px; }
    .product-row .p-edit { display: none; }
    .product-row .p-stock { width: auto; }
}

/* ── modal (native <dialog>) ──────────────────────────────── */
dialog.modal {
    width: min(640px, 94vw);
    max-height: 88vh;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: var(--panel-solid);
    color: var(--ink);
    box-shadow: var(--shadow), 0 0 80px -30px var(--glow-2);
    overflow: auto;
}
dialog.modal::backdrop {
    background: rgba(3, 5, 10, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#modal-body { padding: 22px 24px; }
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 4px;
}
.card-title { margin: 0; font-size: 19px; }
.card-sub { margin: 0 0 14px; }
.card-flash { margin-bottom: 14px; }
.modal-x { padding: 6px 10px; font-size: 14px; line-height: 1; }

/* ── PigFarm: stats toolbar + tracking-list controls ──────── */
/* Filter group sits left, export/resync group right; both stay aligned
   and wrap as whole units on narrow screens. */
.pf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
}
/* flex cluster of controls (toolbar groups, regen-keys action row) */
.pf-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pf-toolbar a { display: inline-flex; }   /* link-wrapped button keeps button height */

/* A status badge and its toggle/action button share one centered line. */
.pf-ctl { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* Equal-width toggles so the Мониторинг / Авто-возврат columns line up. */
.pf-toggle { min-width: 96px; }

/* ── copyable key list (distribution issue results) ───────── */
.copyblock { margin-top: 6px; }
.copybar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.copyblock .copysrc {
    width: 100%;
    min-height: 0;
    background: #04060c;
    color: var(--accent);
    border-color: rgba(79, 245, 207, 0.22);
}

/* ── background-job status card (web/jobs.py) ─────────────── */
.job-card {
    margin: 12px 0;
    padding: 13px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
}
.job-card.running { border-color: rgba(79, 245, 207, 0.35); box-shadow: 0 0 24px -12px var(--glow); }
.job-card.error   { border-color: rgba(255, 100, 124, 0.4); }
.job-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.job-title { font-weight: 600; }
.job-progress { margin: 9px 0; font-size: 14px; }
.job-card form.inline { margin-top: 8px; }

/* spinner — reused by job cards and htmx request indicators */
.job-spin {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(79, 245, 207, 0.25);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* htmx indicator: hidden until its controlling element is mid-request
   (two-class selector beats the generic .htmx-request dim rule above). */
.htmx-indicator { opacity: 0; transition: opacity 0.15s; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Horizontal scroll with the scrollbar on TOP of the content rather than the
   bottom: rotateX flips the wrapper (moving its scrollbar up), the inner child
   is flipped back so it renders upright. */
.scroll-x-top { overflow-x: auto; -webkit-overflow-scrolling: touch; transform: rotateX(180deg); }
.scroll-x-top > * { transform: rotateX(180deg); }

/* Collapsible section header (<details><summary>) — clickable, with a chevron
   that rotates when open, replacing the default disclosure triangle. */
.pf-summary { cursor: pointer; list-style: none; }
.pf-summary::-webkit-details-marker { display: none; }
.pf-summary::before {
    content: "\25B8"; display: inline-block; margin-right: 8px;
    color: var(--muted); transition: transform 0.15s ease;
}
details[open] > .pf-summary::before { transform: rotate(90deg); }

/* Compact refunds table: many columns must fit without horizontal scrolling, so
   tighten padding/size and let the long free-text reason columns wrap. */
.nowrap { white-space: nowrap; }
table.pf-refunds { font-size: 12.5px; }
table.pf-refunds th, table.pf-refunds td { padding: 7px 9px; vertical-align: top; }
table.pf-refunds td.muted { line-height: 1.35; }

/* Tiny icon-only action button (copy UUID / copy key). ``button.icon-btn`` beats
   the global accent-button rules; the pseudo-element glow is disabled so it stays
   a flat, minimal chip. */
button.icon-btn {
    padding: 2px 5px; font-size: 12px; font-weight: 400; line-height: 1;
    border-radius: 6px; box-shadow: none;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong);
    color: var(--muted); transition: background 0.12s, border-color 0.12s, color 0.12s;
}
button.icon-btn::before, button.icon-btn::after { content: none; display: none; }
button.icon-btn:hover {
    transform: none; filter: none;
    background: rgba(255, 255, 255, 0.1); border-color: var(--accent); color: var(--ink);
}