@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ===== Tokens ===== */
:root {
    --bg-0: #fff5f7;
    --bg-1: #e8efff;
    --bg-2: #f2e9ff;
    --ink-1: #3a2a55;
    --ink-2: #6b5688;
    --ink-3: #9e8ec0;
    --pink: #ff7eb0;
    --pink-soft: #ffd0e0;
    --pink-deep: #d94f86;
    --ice: #6fc7ff;
    --ice-soft: #cfe9ff;
    --ice-deep: #3a8fd4;
    --lav: #b3a3e8;
    --lav-deep: #7a68b8;
    --mint: #9ee5c8;
    --gold: #ffd97a;
    --line: rgba(122, 104, 184, 0.14);
    --line-strong: rgba(122, 104, 184, 0.28);
    --card: rgba(255, 255, 255, 0.62);
    --card-strong: rgba(255, 255, 255, 0.78);
    --shadow-pink: 0 18px 50px -22px rgba(217, 79, 134, 0.45), 0 4px 14px -6px rgba(217, 79, 134, 0.18);
    --shadow-ice:  0 18px 50px -22px rgba(58, 143, 212, 0.42), 0 4px 14px -6px rgba(58, 143, 212, 0.18);
    --shadow-soft: 0 14px 40px -18px rgba(80, 60, 130, 0.28), 0 2px 8px -4px rgba(80, 60, 130, 0.10);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg-0); }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--ink-1);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    background:
        radial-gradient(ellipse 70% 60% at 20% 10%, #ffe0eb 0%, transparent 60%),
        radial-gradient(ellipse 60% 55% at 85% 15%, #d9e8ff 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 70% 90%, #f0e3ff 0%, transparent 60%),
        linear-gradient(180deg, #fff7fa 0%, #f0eaff 50%, #e9f3ff 100%);
    background-attachment: fixed;
}
img { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; }

.auth-page {
    min-height: 100vh;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.auth-card {
    position: relative;
    width: min(420px, 100%);
    padding: 34px 30px 30px;
    border: 1px solid rgba(122, 104, 184, 0.14);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 24px 70px -34px rgba(80, 60, 130, 0.45);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    text-align: center;
}

.auth-card .crest {
    margin: 0 auto 12px;
}

.auth-card h1 {
    margin: 8px 0 6px;
    font-family: 'Quicksand', sans-serif;
    color: #3a2a55;
}

.auth-subtitle {
    margin: 0 0 22px;
    color: #6b5688;
}

.auth-form {
    display: grid;
    gap: 14px;
    text-align: left;
}

.auth-form label {
    display: grid;
    gap: 7px;
    color: #6b5688;
    font-size: 0.9rem;
    font-weight: 700;
}

.auth-form input {
    min-height: 44px;
    border: 1px solid rgba(122, 104, 184, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.76);
    color: #3a2a55;
    padding: 0 13px;
    font: inherit;
}

.auth-message {
    min-height: 20px;
    margin: 0;
    color: #d94f86;
    text-align: center;
    font-size: 0.9rem;
}

.auth-captcha {
    display: flex;
    justify-content: center;
    min-height: 0;
}
.auth-captcha:empty { display: none; }

/* ===== Background ===== */
.bg-wrap {
    position: fixed; inset: 0; z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.bg-grid {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23b3a3e8' stroke-opacity='0.12' stroke-width='1'><circle cx='80' cy='80' r='32'/><circle cx='0' cy='0' r='32'/><circle cx='160' cy='0' r='32'/><circle cx='0' cy='160' r='32'/><circle cx='160' cy='160' r='32'/></g></svg>");
    background-size: 160px 160px;
    opacity: 0.45;
    mask-image: radial-gradient(ellipse 80% 70% at center, black 30%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 30%, transparent 90%);
}
.bg-stars {
    position: absolute; inset: 0;
    pointer-events: none;
}
.bg-stars svg { position: absolute; opacity: 0.55; }

@keyframes drift {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0.5; }
    50%  { opacity: 0.95; }
    100% { transform: translateY(-30px) rotate(40deg); opacity: 0.5; }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes float-y { 50% { transform: translateY(-10px); } }

/* ===== Layout ===== */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 28px 120px;
    position: relative;
    z-index: 1;
}

/* ===== Header / Hero ===== */
header {
    text-align: center;
    padding: 8px 0 36px;
    position: relative;
}
.crest {
    width: 86px; height: 86px; margin: 0 auto 18px;
    position: relative;
    animation: float-y 6s ease-in-out infinite;
}
.crest svg {
    position: absolute;
    inset: 0;
    width: 86px;
    height: 86px;
    display: block;
}
.crest .ring {
    animation: spin-slow 32s linear infinite;
}
.eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.34em;
    color: var(--lav-deep);
    text-transform: uppercase;
    margin-bottom: 12px;
    opacity: 0.85;
}
.eyebrow .dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--pink); margin: 0 10px; vertical-align: middle;
    box-shadow: 0 0 12px var(--pink);
}
header h1 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: clamp(46px, 6vw, 72px);
    line-height: 1;
    margin: 0;
    background: linear-gradient(100deg, #d94f86 0%, #b76fbf 40%, #7a8fe0 70%, #3a8fd4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
}
.subtitle {
    margin-top: 14px;
    font-size: 14px;
    color: var(--ink-2);
    max-width: 540px;
    margin-left: auto; margin-right: auto;
    line-height: 1.55;
}
.hero-meta {
    margin-top: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ===== Nav / Tabs ===== */
nav {
    display: inline-flex;
    margin-top: 28px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--line);
    border-radius: 999px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-soft);
    gap: 4px;
    position: relative;
}
nav a {
    text-decoration: none;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600; font-size: 14px;
    color: var(--ink-2);
    padding: 11px 22px;
    border-radius: 999px;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color 200ms, background 200ms;
    position: relative; z-index: 1;
}
nav a:hover { color: var(--pink-deep); }
nav a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--pink) 0%, var(--lav) 50%, var(--ice) 100%);
    box-shadow: 0 8px 20px -8px rgba(217, 79, 134, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ===== Panel ===== */
.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 26px;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-soft);
    padding: 22px;
    position: relative;
}
.panel::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 26px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,180,210,0.6), rgba(180,200,255,0.3) 50%, rgba(200,180,255,0.6));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none; opacity: 0.7;
}

/* ===== Toolbar ===== */
.toolbar-sentinel { height: 1px; margin-top: 28px; }
.toolbar {
    margin-top: 28px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "add filters"
        "search search";
    column-gap: 18px;
    row-gap: 14px;
    align-items: center;

    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 26px;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-soft);
    padding: 18px 22px;
    position: sticky;
    top: 12px;
    z-index: 60;
    transition: padding 240ms cubic-bezier(.2,.8,.2,1), border-radius 240ms, box-shadow 240ms, background 240ms;
}
.toolbar .btn-add { grid-area: add; }
.toolbar .filters { grid-area: filters; }
.toolbar .search-bar { grid-area: search; }
.toolbar::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 26px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,180,210,0.6), rgba(180,200,255,0.3) 50%, rgba(200,180,255,0.6));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none; opacity: 0.7;
}
/* ====================================================== */
/*  Stuck/Compact toolbar — slimmer, pill-shaped controls  */
/* ====================================================== */
.toolbar.compact {
    padding: 10px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    box-shadow:
        0 14px 36px -18px rgba(80, 60, 130, 0.4),
        0 4px 12px -4px rgba(217, 79, 134, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    column-gap: 10px;
    row-gap: 8px;
}
.toolbar.compact::before {
    border-radius: 20px;
    background: linear-gradient(100deg, rgba(255,126,176,0.6), rgba(179,163,232,0.3) 50%, rgba(111,199,255,0.6));
    opacity: 1;
}
.toolbar.compact .btn-add {
    padding: 8px 14px;
    font-size: 12.5px;
    border-radius: 999px;
    gap: 6px;
    box-shadow: 0 6px 16px -6px rgba(217, 79, 134, 0.45), inset 0 1px 0 rgba(255,255,255,0.4);
}
.toolbar.compact .filters { gap: 6px; }
.toolbar.compact .fld {
    padding: 7px 12px;
    padding-right: 28px;
    border-radius: 999px;
    font-size: 12px;
    background-color: rgba(255, 255, 255, 0.7);
    background-position: right 9px center;
}
.toolbar.compact input.fld[type="number"] { padding-right: 12px; }

@media (max-width: 980px) {
    .toolbar.compact { border-radius: 16px; }
    .toolbar.compact::before { border-radius: 16px; }
}

.btn-add {
    appearance: none; border: 0;
    padding: 16px 24px;
    border-radius: 18px;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700; font-size: 15px;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, #ff7eb0 0%, #ff9bc4 50%, #ffb3d3 100%);
    box-shadow: var(--shadow-pink), inset 0 1px 0 rgba(255,255,255,0.4);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    position: relative; overflow: hidden;
    transition: transform 200ms, box-shadow 200ms;
    white-space: nowrap;
}
.btn-add::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 0%, rgba(255,255,255,0.6), transparent 50%);
    pointer-events: none;
}
.btn-add::after {
    content: '✦';
    margin-left: 2px;
}
.btn-add .lbl-short { display: none; }
.toolbar.compact .btn-add .lbl-full  { display: none; }
.toolbar.compact .btn-add .lbl-short { display: inline; }
.btn-add:hover { transform: translateY(-1px); }
.btn-add:active { transform: translateY(0); }

/* ===== Unified field style (filters + form selects + inputs) ===== */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.filters > .fld { flex: 1 1 140px; min-width: 0; }

.fld {
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: var(--ink-1);
    transition: border-color 180ms, box-shadow 180ms;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    outline: none;
}
.fld-select,
select.fld {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%237a68b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-color: rgba(255,255,255,0.75);
    padding-right: 36px;
}
.fld::placeholder { color: var(--ink-3); }
.fld:focus {
    border-color: var(--pink);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 126, 176, 0.14);
}

/* Search bar (spans full width as its own toolbar row) */
.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px;
    width: 100%;
    transition: border-color 200ms, box-shadow 200ms, background 200ms;
}
.search-bar:focus-within {
    border-color: var(--pink);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 126, 176, 0.14);
}
.search-ic { color: var(--lav-deep); flex-shrink: 0; }
.search-input {
    appearance: none;
    border: 0;
    background: transparent;
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--ink-1);
    outline: none;
    padding: 0;
    min-width: 0;
}
.search-input::placeholder { color: var(--ink-3); }
.search-clear {
    appearance: none;
    width: 24px; height: 24px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 126, 176, 0.15);
    color: var(--pink-deep);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 160ms, transform 160ms;
}
.search-clear:hover { background: rgba(255, 126, 176, 0.28); transform: scale(1.08); }

.toolbar.compact .search-bar { padding: 5px 11px; gap: 6px; }
.toolbar.compact .search-input { font-size: 12.5px; }
.toolbar.compact .search-ic { width: 13px; height: 13px; }
.toolbar.compact .search-clear { width: 20px; height: 20px; font-size: 10px; }

/* ===== Section header ===== */
.sec-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 36px 6px 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.sec-head h2 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--ink-1);
    margin: 0;
    display: flex; align-items: center; gap: 12px;
}
.sec-head h2::before {
    content: '✿';
    color: var(--pink);
    font-size: 20px;
}
.sec-head .count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--lav-deep);
    background: rgba(179, 163, 232, 0.15);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.05em;
}
.sec-head .legend {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ink-3);
    display: flex; gap: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.sec-head .legend span { display: inline-flex; align-items: center; gap: 6px; }
.sec-head .legend .swatch { width: 8px; height: 8px; border-radius: 50%; }

/* ===== Product list ===== */
#product-list,
.product-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.product-card {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 22px;
    align-items: center;
    background: var(--card-strong);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 18px;
    position: relative;
    transition: transform 220ms, box-shadow 220ms;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: cardIn 0.4s ease both;
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.product-card.status-bought {
    background: linear-gradient(135deg, rgba(159, 230, 200, 0.18), rgba(255, 255, 255, 0.85) 60%);
    border-color: rgba(120, 200, 170, 0.4);
}
.product-card.is-march {
    box-shadow: 0 0 0 1px rgba(255, 126, 176, 0.25), 0 14px 36px -22px rgba(217, 79, 134, 0.35);
}
.product-card::before {
    content: '';
    position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 4px; border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--pink), var(--ice));
}
.product-card:not(.is-march)::before { background: linear-gradient(180deg, var(--lav), var(--ice)); }

.card-img,
.card-img-placeholder {
    width: 96px; height: 96px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffd9e6 0%, #d9eaff 100%);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.5), 0 4px 14px -6px rgba(180, 140, 200, 0.3);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 28px;
    filter: drop-shadow(0 2px 4px rgba(217, 79, 134, 0.25));
}
.card-img { object-fit: cover; padding: 0; }
.card-img-placeholder::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.3) 0 6px, transparent 6px 18px);
    opacity: 0.6;
}

.card-body { min-width: 0; flex: 1; }
.card-title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--ink-1);
    margin: 0 0 4px;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.march-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,126,176,0.18), rgba(111,199,255,0.18));
    border: 1px solid rgba(255,126,176,0.3);
    color: var(--pink-deep);
    text-transform: uppercase;
    font-weight: 500;
}
.card-price {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 20px;
    background: linear-gradient(100deg, var(--pink-deep), var(--lav-deep));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    margin: 0 0 8px;
}

.card-meta {
    display: flex; flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 12px;
    color: var(--ink-2);
}
.card-meta span {
    display: inline-flex; align-items: baseline; gap: 4px;
}
.card-meta b {
    color: var(--ink-1);
    font-weight: 600;
}
.card-meta .k {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 4px;
}

.badge-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    margin-top: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 160ms, box-shadow 160ms;
    appearance: none;
}
.badge-status:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.badge-da-mua {
    background: rgba(120, 200, 170, 0.18);
    color: #2f8568;
    border-color: rgba(120, 200, 170, 0.4);
}
.badge-chua-mua {
    background: rgba(255, 200, 130, 0.18);
    color: #b07a20;
    border-color: rgba(255, 200, 130, 0.4);
}

.card-actions { display: flex; flex-direction: column; gap: 8px; }
.btn-edit-card,
.btn-delete-card {
    appearance: none;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    padding: 9px 16px;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: transform 160ms, box-shadow 160ms;
    border: 1px solid transparent;
    white-space: nowrap;
    justify-content: center;
}
.btn-edit-card {
    background: rgba(111, 199, 255, 0.14);
    color: var(--ice-deep);
    border-color: rgba(111, 199, 255, 0.3);
}
.btn-delete-card {
    background: rgba(255, 126, 176, 0.12);
    color: var(--pink-deep);
    border-color: rgba(255, 126, 176, 0.3);
}
.btn-edit-card:hover,
.btn-delete-card:hover {
    transform: translateY(-1px); box-shadow: var(--shadow-soft);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-3);
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 26px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.empty-state::before {
    content: '❄';
    display: block;
    font-size: 2.5rem;
    margin-bottom: 12px;
    color: var(--lav);
}

/* ===== Dashboard ===== */
.dashboard-grid,
.dash {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 28px;
}
.dashboard-column,
.dash-col {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 28px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    position: relative;
}
.dashboard-column h2,
.dash-col h3 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 24px;
    display: flex; align-items: center; gap: 12px;
    color: var(--ink-1);
    text-align: left;
}
.dashboard-column h2 .badge,
.dash-col h3 .badge {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    color: #fff;
}
.dashboard-column.march h2 .badge,
.dash-col.march h3 .badge { background: linear-gradient(135deg, var(--pink), var(--pink-soft)); }
.dashboard-column.other h2 .badge,
.dash-col.other h3 .badge { background: linear-gradient(135deg, var(--ice), var(--ice-soft)); }

/* Stat cards (new) */
.stat-grid,
.summary-cards { display: flex; flex-direction: column; gap: 14px; }

.stat {
    border-radius: 20px;
    padding: 22px 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.stat .stat-bg {
    position: absolute; inset: 0;
    opacity: 0.7;
    pointer-events: none;
}
.stat .stat-bg svg { position: absolute; }
.stat-total.pink  { background: linear-gradient(135deg, #ff8cb8 0%, #f86fa3 100%); }
.stat-total.ice   { background: linear-gradient(135deg, #7fcfff 0%, #4ea7e0 100%); }
.stat-bought.pink { background: linear-gradient(135deg, #ffb1d0 0%, #ff90ba 100%); }
.stat-bought.ice  { background: linear-gradient(135deg, #a8dffd 0%, #7cc4f0 100%); }
.stat-pending {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink-1);
    border: 1px dashed rgba(255, 126, 176, 0.45);
}
.stat-pending .stat-amount { color: var(--pink-deep); }
.stat-pending .stat-label { color: var(--ink-2); }

.stat-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
    position: relative;
}
.stat-head .ic {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.28);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    color: #fff;
}
.stat-pending .stat-head .ic { background: rgba(255, 126, 176, 0.18); color: var(--pink-deep); }
.stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}
.stat-amount {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 8px;
    position: relative;
}
.stat-amount .cur { font-size: 18px; opacity: 0.7; font-weight: 500; margin-left: 4px; }
.stat-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.04em;
    position: relative;
}
.stat-pending .stat-meta { color: var(--ink-3); }

.progress {
    margin-top: 14px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.progress .fill {
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    transition: width 400ms ease;
}
.stat-pending .progress { background: rgba(255, 126, 176, 0.15); }
.stat-pending .progress .fill { background: linear-gradient(90deg, var(--pink), var(--lav)); box-shadow: none; }

/* Recent activity */
.recent {
    margin-top: 28px;
    padding: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.recent h4 {
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    margin: 0 0 14px;
    color: var(--ink-1);
    display: flex; justify-content: space-between; align-items: center;
}
.recent h4 span:last-child {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.recent-list { display: flex; flex-direction: column; gap: 10px; }
.recent-item {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--line);
}
.recent-item .ri-ic {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    background: linear-gradient(135deg, #ffd0e0, #cfe9ff);
}
.recent-item .ri-name {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink-1);
}
.recent-item .ri-meta {
    font-size: 11px;
    color: var(--ink-3);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.recent-item .ri-price {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    color: var(--pink-deep);
    font-size: 13.5px;
}
.recent-item .ri-dot {
    width: 8px; height: 8px; border-radius: 50%;
}
.recent-item .ri-dot.b { background: var(--mint); box-shadow: 0 0 6px var(--mint); }
.recent-item .ri-dot.p { background: var(--gold); box-shadow: 0 0 6px var(--gold); }

/* ===== Divider / Footer ===== */
.divider {
    display: flex; align-items: center;
    gap: 14px;
    margin: 36px 0 18px;
    color: var(--ink-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.footer {
    margin-top: 60px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    flex-wrap: wrap; gap: 10px;
}

/* ===== Modal (Product form — Frost & Petal pm-* design) ===== */
@keyframes pm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pm-petal-fall {
    0%   { transform: translateY(-10vh) rotate(0deg);   opacity: 0;  }
    10%  { opacity: 0.7; }
    100% { transform: translateY(110vh) rotate(540deg); opacity: 0;  }
}

.modal-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 200;
    align-items: center; justify-content: center;
    padding: 24px;
    background:
        radial-gradient(ellipse 60% 50% at 30% 20%, rgba(255, 200, 220, 0.55), transparent 60%),
        radial-gradient(ellipse 60% 55% at 75% 80%, rgba(180, 215, 255, 0.5), transparent 60%),
        rgba(58, 42, 85, 0.32);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: pm-fade-in 220ms ease-out;
    overflow-y: auto;
}
.modal-overlay.active,
.modal-overlay[style*="display: block"] { display: flex; }

.pm-petals {
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.pm-petal {
    position: absolute;
    top: -10vh;
    width: 12px; height: 12px;
    background: radial-gradient(circle at 40% 40%, #ffd0e0 0%, #ff8cb8 70%, transparent 100%);
    border-radius: 50% 0 50% 0;
    transform-origin: center;
    animation: pm-petal-fall linear infinite;
    opacity: 0.6;
    filter: blur(0.3px);
}
.pm-petal:nth-child(3n) {
    background: radial-gradient(circle at 40% 40%, #d8e8ff 0%, #7fcfff 70%, transparent 100%);
    width: 10px; height: 10px;
}
.pm-petal:nth-child(4n) {
    background: radial-gradient(circle at 40% 40%, #e8dcff 0%, #b3a3e8 70%, transparent 100%);
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: rgba(255, 252, 254, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 28px;
    box-shadow:
        0 32px 80px -24px rgba(80, 40, 110, 0.45),
        0 12px 32px -12px rgba(217, 79, 134, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: pm-pop 360ms cubic-bezier(.2, 1.2, .3, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal-content::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 28px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 126, 176, 0.7), rgba(179, 163, 232, 0.4) 50%, rgba(111, 199, 255, 0.7));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}
.modal-content::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(ellipse 40% 30% at 0% 0%,   rgba(255, 200, 220, 0.4), transparent 70%),
        radial-gradient(ellipse 40% 30% at 100% 100%, rgba(180, 215, 255, 0.4), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.modal-header {
    position: relative; z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 28px 18px;
    border-bottom: 1px dashed var(--line);
    cursor: grab;
    user-select: none;
    gap: 14px;
}
.modal-header:active { cursor: grabbing; }

.pm-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pm-head-icon {
    width: 42px; height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff7eb0 0%, #b3a3e8 50%, #6fc7ff 100%);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px -4px rgba(217, 79, 134, 0.45);
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}
.pm-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--lav-deep);
    margin-bottom: 4px;
    text-transform: uppercase;
}
.modal-header h2 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 22px;
    margin: 0;
    background: linear-gradient(100deg, #d94f86, #7a68b8 50%, #3a8fd4);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.close-btn {
    appearance: none;
    width: 36px; height: 36px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    color: var(--ink-2);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    transition: background 180ms, transform 180ms, color 180ms;
    padding: 0;
    flex-shrink: 0;
}
.close-btn:hover { background: rgba(255, 126, 176, 0.15); color: var(--pink-deep); transform: rotate(90deg); }

.modal-body {
    position: relative; z-index: 3;
    padding: 22px 28px 18px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(179, 163, 232, 0.4) transparent;
}
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background: rgba(179, 163, 232, 0.4); border-radius: 4px; }

/* Responsive flex form — pairs collapse automatically on narrow screens */
#product-form {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.pm-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1 1 240px;
}
.pm-col-2 { flex: 1 1 100%; width: 100%; }

/* Money input: quick-add buttons + live preview */
.pm-quick-money {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.pm-money-chip {
    appearance: none;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink-2);
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 12px;
    padding: 6px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 160ms, color 160ms, border-color 160ms, transform 120ms;
    line-height: 1;
}
.pm-money-chip:hover {
    background: linear-gradient(135deg, rgba(255,126,176,0.12), rgba(111,199,255,0.12));
    border-color: rgba(255, 126, 176, 0.45);
    color: var(--pink-deep);
}
.pm-money-chip:active { transform: scale(0.94); }
.pm-money-clear {
    margin-left: auto;
    border-style: dashed;
    color: var(--ink-3);
    font-size: 11px;
    padding: 6px 10px;
}
.pm-money-clear:hover { color: var(--pink-deep); border-color: var(--pink); background: rgba(255,126,176,0.08); }
.pm-money-preview {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--lav-deep);
    letter-spacing: 0.04em;
    padding-left: 2px;
}
.pm-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--ink-2);
    text-transform: uppercase;
    font-weight: 500;
    margin: 0;
}
.pm-req { color: var(--pink-deep); margin-left: 2px; }

.pm-input-wrap { position: relative; }
.pm-input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 13px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--ink-1);
    transition: border-color 200ms, box-shadow 200ms, background 200ms;
    font-feature-settings: "tnum";
    outline: none;
}
.pm-input::placeholder { color: var(--ink-3); }
.pm-input:focus {
    border-color: var(--pink);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 126, 176, 0.14);
}
.pm-input-center { text-align: center; font-weight: 600; font-family: 'Quicksand', sans-serif; }
.pm-select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%237a68b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-color: rgba(255, 255, 255, 0.75);
}
.pm-suffix {
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%);
    color: var(--lav-deep);
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 14px;
    pointer-events: none;
}

/* Quantity stepper */
.pm-stepper {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    gap: 6px;
    align-items: center;
}
.pm-step {
    appearance: none;
    width: 40px; height: 44px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.7);
    color: var(--lav-deep);
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 18px;
    transition: background 160ms, transform 160ms, color 160ms;
}
.pm-step:hover { background: rgba(255, 126, 176, 0.12); color: var(--pink-deep); }
.pm-step:active { transform: scale(0.95); }

/* Character chips */
.pm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}
.pm-chip {
    appearance: none;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink-2);
    padding: 7px 12px;
    border-radius: 999px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    transition: all 180ms;
}
.pm-chip[data-active="true"] {
    background: linear-gradient(135deg, var(--pink), var(--lav) 60%, var(--ice));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px -3px rgba(217, 79, 134, 0.4);
}

/* Glyph picker */
.pm-glyphs {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}
.pm-glyph {
    appearance: none;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.6);
    aspect-ratio: 1;
    border-radius: 14px;
    font-size: 20px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 180ms;
    color: var(--ink-1);
}
.pm-glyph[data-active="true"] {
    background: linear-gradient(135deg, rgba(255, 126, 176, 0.18), rgba(111, 199, 255, 0.18));
    border-color: var(--pink);
    box-shadow: 0 0 0 2px rgba(255, 126, 176, 0.2);
    transform: scale(1.05);
}
@media (max-width: 480px) { .pm-glyphs { grid-template-columns: repeat(4, 1fr); } }

/* Drop zone */
.pm-drop {
    border: 1.5px dashed rgba(255, 126, 176, 0.4);
    border-radius: 18px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(255, 240, 246, 0.5), rgba(232, 244, 255, 0.5));
    cursor: pointer;
    display: flex; align-items: center; gap: 16px;
    transition: all 200ms;
    position: relative;
    min-height: 110px;
}
.pm-drop:hover, .pm-drop[data-over="true"] {
    border-color: var(--pink);
    background: linear-gradient(135deg, rgba(255, 220, 235, 0.7), rgba(220, 240, 255, 0.7));
}
.pm-drop-default {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.pm-drop-ico {
    flex-shrink: 0;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
}
/* HTML5 `hidden` attribute must override the flex display rules above */
.pm-drop-default[hidden],
.pm-drop-prev[hidden] { display: none !important; }
.pm-drop-text { display: flex; flex-direction: column; gap: 4px; }
.pm-drop-text b {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-1);
}
.pm-drop-text span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
}
.pm-drop-prev { display: flex; align-items: center; gap: 14px; width: 100%; }
.pm-drop-prev img {
    width: 72px; height: 72px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--line);
}
.pm-drop-meta { flex: 1; min-width: 0; }
.pm-drop-name {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600; font-size: 13px;
    color: var(--ink-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-drop-size {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 2px;
}
.pm-drop-x {
    appearance: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 126, 176, 0.15);
    color: var(--pink-deep);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
}
.pm-drop-x:hover { background: rgba(255, 126, 176, 0.28); }

/* Modal footer */
.modal-footer {
    position: relative; z-index: 3;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 28px 24px;
    border-top: 1px dashed var(--line);
    background: rgba(255, 252, 254, 0.6);
}
.pm-btn {
    appearance: none;
    border: 0;
    padding: 13px 24px;
    border-radius: 14px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform 180ms, box-shadow 180ms;
}
.pm-cancel {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink-2);
    border: 1px solid var(--line);
}
.pm-cancel:hover { background: rgba(255, 255, 255, 0.9); }
.pm-save,
.btn-save {
    background: linear-gradient(135deg, #ff7eb0 0%, #b3a3e8 50%, #6fc7ff 100%);
    color: #fff;
    box-shadow: 0 10px 28px -10px rgba(217, 79, 134, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    position: relative; overflow: hidden;
    padding: 13px 28px;
    appearance: none;
    border: 0;
    border-radius: 14px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.pm-save::before,
.btn-save::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.5), transparent 50%);
    pointer-events: none;
}
.pm-save:hover,
.btn-save:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(217, 79, 134, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.pm-save:active,
.btn-save:active { transform: translateY(0); }

@media (max-width: 560px) {
    .pm-field { flex: 1 1 100%; }
    .modal-header { padding: 18px 20px 14px; }
    .modal-body { padding: 18px 20px; }
    .modal-footer { padding: 14px 20px 18px; }
    .modal-header h2 { font-size: 18px; }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(179, 163, 232, 0.4); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: rgba(179, 163, 232, 0.65); }

/* ===== Focus ===== */
button:focus-visible, .filters input:focus-visible, .filters select:focus-visible,
.form-group input:focus-visible, .form-group select:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 2px;
}

/* ===== Responsive ===== */

/* Tablet landscape & small laptop (≤ 1024px) */
@media (max-width: 1024px) {
    .container { padding: 48px 24px 100px; }
    header h1 { font-size: clamp(40px, 5.4vw, 60px); }
}

/* Tablet portrait (≤ 980px) */
@media (max-width: 980px) {
    .toolbar {
        grid-template-columns: 1fr;
        grid-template-areas: "add" "filters" "search";
        column-gap: 0;
        row-gap: 12px;
        padding: 16px 18px;
    }
    .toolbar.compact { padding: 10px 12px; row-gap: 8px; }
    .btn-add { width: 100%; }
    .toolbar.compact .btn-add { width: auto; align-self: start; }
    .recent { padding: 18px; }
}

/* Tablet & small (≤ 880px) — dashboard collapses */
@media (max-width: 880px) {
    .dash, .dashboard-grid { grid-template-columns: 1fr; gap: 18px; }
    .dashboard-column, .dash-col { padding: 22px; }
    .product-card {
        grid-template-columns: 88px 1fr;
        gap: 16px;
        padding: 14px;
    }
    .product-card .card-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
        gap: 8px;
        padding-top: 4px;
    }
    .card-img, .card-img-placeholder { width: 88px; height: 88px; }
    .sec-head { margin: 28px 4px 14px; }
    .sec-head h2 { font-size: 19px; }
    .sec-head .legend { font-size: 10px; gap: 12px; }
}

/* Phone landscape & large phone (≤ 720px) */
@media (max-width: 720px) {
    .container { padding: 32px 16px 80px; }
    header { padding: 4px 0 24px; }
    header h1 { font-size: clamp(32px, 8vw, 46px); }
    .subtitle { font-size: 13px; }
    .crest { width: 70px; height: 70px; margin-bottom: 14px; }
    .crest svg { width: 70px; height: 70px; }
    .eyebrow { font-size: 10px; letter-spacing: 0.28em; }

    /* Nav: scroll ngang thay vì wrap (sạch hơn trên mobile) */
    nav {
        display: flex;
        margin-top: 22px;
        padding: 5px;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
    }
    nav::-webkit-scrollbar { display: none; }
    nav a {
        padding: 10px 14px;
        font-size: 13px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .toolbar { border-radius: 20px; }
    .toolbar::before { border-radius: 20px; }
    .panel { border-radius: 20px; padding: 16px; }
    .panel::before { border-radius: 20px; }
}

/* Phone portrait (≤ 600px) */
@media (max-width: 600px) {
    .container { padding: 28px 14px 80px; }
    .filters { grid-template-columns: 1fr 1fr; gap: 8px; }
    .filters select,
    .filters input[type="number"] { padding: 11px 14px; font-size: 13px; }
    .footer { flex-direction: column; text-align: center; gap: 8px; }
    .divider { gap: 10px; font-size: 10px; letter-spacing: 0.14em; }
    .recent-item { grid-template-columns: 24px 1fr auto; }
    .recent-item .ri-dot { display: none; }
    .stat { padding: 18px 18px; }
    .stat-amount { font-size: 26px; }

    /* Product card: image trên, info dưới */
    .product-card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }
    .product-card .card-img,
    .product-card .card-img-placeholder {
        width: 100%;
        height: 180px;
        border-radius: 14px;
    }
    .product-card .card-actions {
        justify-content: stretch;
    }
    .product-card .card-actions button { flex: 1; }
    .card-title { font-size: 16px; }
    .card-price { font-size: 18px; }
}

/* Small phone (≤ 420px) */
@media (max-width: 420px) {
    .container { padding: 22px 12px 72px; }
    header h1 { font-size: 28px; }
    .filters { grid-template-columns: 1fr; }
    .toolbar.compact .filters { grid-template-columns: 1fr 1fr; }
    nav a { padding: 9px 12px; font-size: 12.5px; }
    .auth-card { padding: 26px 20px 22px; border-radius: 18px; }
    .product-card .card-img,
    .product-card .card-img-placeholder { height: 150px; }
}

/* ===== Music player — tablet & mobile ===== */
@media (max-width: 768px) {
    .mp-card {
        width: min(340px, calc(100vw - 32px));
        right: 16px;
    }
}
@media (max-width: 480px) {
    .mp-card {
        right: 12px; left: 12px; width: auto;
        bottom: 84px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
    .mp-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; }
    .mp-playlist-list { max-height: 200px; }
    .mp-btn { width: 36px; height: 36px; }
    .mp-play { width: 46px; height: 46px; }
    .mp-controls { gap: 10px; }
    .mp-track-delete { width: 30px; height: 30px; }
}

/* Reset any leftover legacy classes that might appear in markup */
.product-item, .action-buttons, .action-row,
.btn-status, .btn-status.bought, .btn-status.unbought { all: unset; }

/* ===== Soft-nav transition ===== */
.container { transition: opacity 180ms ease; }
.soft-nav-loading .container { opacity: 0.55; }
.soft-nav-loading { cursor: progress; }

/* ===== Categories management page ===== */
.cat-panel {
    margin-top: 28px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 26px;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-soft);
    padding: 22px 24px;
    position: relative;
}
.cat-panel::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 26px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,180,210,0.6), rgba(180,200,255,0.3) 50%, rgba(200,180,255,0.6));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none; opacity: 0.7;
}
.cat-add-form {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}
.cat-add-form .fld { flex: 1 1 auto; }
.cat-add-form .btn-add { padding: 12px 22px; font-size: 14px; border-radius: 14px; }

.cat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cat-list-empty {
    text-align: center;
    color: var(--ink-3);
    padding: 32px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
}
.cat-row-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px 16px;
    transition: background 180ms, border-color 180ms;
}
.cat-row-item:hover { background: rgba(255, 255, 255, 0.82); border-color: rgba(255, 126, 176, 0.3); }
.cat-row-icon {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,126,176,0.18), rgba(111,199,255,0.18));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: var(--pink-deep);
    flex-shrink: 0;
}
.cat-row-name {
    flex: 1;
    min-width: 0;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-row-name-input {
    flex: 1;
    min-width: 0;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink-1);
    background: #fff;
    border: 1px solid var(--pink);
    border-radius: 10px;
    padding: 8px 12px;
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 126, 176, 0.12);
}
.cat-row-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--lav-deep);
    background: rgba(179, 163, 232, 0.16);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.cat-row-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.cat-action {
    appearance: none;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.7);
    color: var(--ink-2);
    padding: 7px 12px;
    border-radius: 10px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: background 160ms, color 160ms, border-color 160ms;
}
.cat-action:hover { background: rgba(255, 126, 176, 0.12); color: var(--pink-deep); border-color: var(--pink); }
.cat-action.danger:hover { background: rgba(217, 79, 134, 0.14); color: var(--pink-deep); border-color: var(--pink); }
.cat-action.save {
    background: linear-gradient(135deg, #ff7eb0, #b3a3e8 60%, #6fc7ff);
    color: #fff;
    border-color: transparent;
}
@media (max-width: 560px) {
    .cat-add-form { flex-direction: column; }
    .cat-row-item { flex-wrap: wrap; gap: 10px; }
    .cat-row-name, .cat-row-name-input { flex: 1 1 100%; order: -1; }
    .cat-row-count { order: 1; }
    .cat-row-actions { order: 2; margin-left: auto; }
}