@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
    --bg: #070312;
    --bg-soft: #10061d;
    --panel: rgba(24, 8, 40, 0.92);
    --panel-2: rgba(34, 11, 54, 0.96);
    --purple: #351747;
    --pink: #ff2fa8;
    --pink-2: #ff3565;
    --cyan: #31e7f2;
    --orange: #ff7a3c;
    --yellow: #ffd341;
    --green: #2df5a3;
    --text: #f8efff;
    --muted: #b8a9c6;
    --border: rgba(255, 47, 168, 0.5);
    --border-soft: rgba(255, 47, 168, 0.18);
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: "Rajdhani", sans-serif;
    font-size: 17px;
    background:
        radial-gradient(circle at 75% 0%, rgba(255, 47, 168, 0.10), transparent 30%),
        radial-gradient(circle at 25% 100%, rgba(49, 231, 242, 0.07), transparent 28%),
        linear-gradient(135deg, #05020d 0%, #0d0419 50%, #080312 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: 285px;
    padding: 18px;
    background:
        linear-gradient(rgba(7, 3, 18, 0.92), rgba(7, 3, 18, 0.98)),
        repeating-linear-gradient(0deg, transparent 0 30px, rgba(49, 231, 242, 0.025) 31px);
    border-right: 1px solid var(--border);
    overflow-y: auto;
}

.brand {
    display: block;
    border: 1px solid var(--pink);
    border-radius: 8px;
    padding: 14px 10px;
    background: rgba(255, 47, 168, 0.025);
    box-shadow: inset 0 0 25px rgba(255, 47, 168, 0.04);
}

.brand img {
    display: block;
    width: 100%;
    height: auto;
}

.nav {
    display: grid;
    gap: 7px;
    margin-top: 18px;
}

.nav-heading {
    margin: 18px 12px 4px;
    color: var(--pink);
    font-family: "Orbitron", sans-serif;
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.nav a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #d9cde2;
    transition: 0.18s ease;
}

.nav a:hover {
    color: white;
    border-color: rgba(49, 231, 242, 0.35);
    background: rgba(49, 231, 242, 0.05);
}

.nav a.active {
    color: white;
    border-color: var(--orange);
    background: linear-gradient(90deg, rgba(255, 47, 168, 0.35), rgba(255, 122, 60, 0.13));
    box-shadow: inset 0 0 22px rgba(255, 47, 168, 0.08);
}

.nav-icon {
    width: 23px;
    color: var(--pink);
    font-size: 22px;
    text-align: center;
}

.nav a.active .nav-icon {
    color: var(--yellow);
}

.main-panel {
    grid-column: 2;
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 28px;
    background: rgba(7, 3, 18, 0.88);
    border-bottom: 1px solid rgba(255, 47, 168, 0.25);
    backdrop-filter: blur(14px);
}

.topbar h1 {
    margin: 0;
    font-family: "Orbitron", sans-serif;
    font-size: clamp(20px, 3vw, 28px);
    color: var(--pink);
    text-transform: uppercase;
}

.eyebrow {
    margin-bottom: 3px;
    color: var(--cyan);
    font-family: "Orbitron", sans-serif;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.topbar-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pink);
    font-weight: 600;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 12px var(--green);
}

.menu-button {
    display: none;
    border: 0;
    background: transparent;
    color: var(--pink);
    font-size: 28px;
    cursor: pointer;
}

.content {
    padding: 20px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.stat-card {
    min-height: 150px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px;
    border: 1px solid var(--pink);
    border-radius: 9px;
    background: linear-gradient(145deg, rgba(27, 7, 45, 0.96), rgba(13, 4, 24, 0.96));
    box-shadow: var(--shadow);
}

.stat-card.orange {
    border-color: var(--orange);
}

.stat-symbol {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 2px solid var(--pink);
    color: var(--pink);
    font-size: 32px;
    transform: rotate(-7deg);
}

.stat-card.orange .stat-symbol {
    border-color: var(--orange);
    color: var(--orange);
}

.stat-card span {
    display: block;
    color: var(--pink);
    font-family: "Orbitron", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
}

.stat-card strong {
    display: block;
    margin: 4px 0 8px;
    font-size: 38px;
    line-height: 1;
}

.stat-card a {
    color: var(--cyan);
    font-size: 15px;
}

.panel {
    border: 1px solid var(--border);
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(29, 9, 48, 0.95), rgba(12, 4, 22, 0.96));
    box-shadow: var(--shadow);
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    border-bottom: 1px solid var(--border-soft);
}

.panel-header.compact {
    padding: 17px 20px;
}

.panel-header h2 {
    margin: 0;
    color: var(--pink);
    font-family: "Orbitron", sans-serif;
    font-size: 24px;
    text-transform: uppercase;
}

.panel-header.compact h2 {
    font-size: 17px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 17px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: "Orbitron", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.18s ease;
}

.button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.button-primary {
    color: #160416;
    background: linear-gradient(110deg, var(--orange), var(--pink-2), var(--pink));
    box-shadow: 0 0 24px rgba(255, 47, 168, 0.18);
}

.button-secondary {
    color: var(--cyan);
    border-color: var(--cyan);
    background: rgba(49, 231, 242, 0.04);
}

.button-ghost {
    color: var(--muted);
    border-color: rgba(184, 169, 198, 0.35);
    background: transparent;
}

.button-full {
    width: 100%;
}

.filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr)) auto auto;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-soft);
}

input,
select,
textarea {
    width: 100%;
    color: var(--text);
    border: 1px solid rgba(255, 47, 168, 0.30);
    border-radius: 6px;
    outline: none;
    background: rgba(5, 2, 13, 0.58);
    transition: 0.16s ease;
}

input,
select {
    min-height: 44px;
    padding: 9px 12px;
}

textarea {
    padding: 12px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(49, 231, 242, 0.08);
}

select option {
    background: #140720;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

.data-table th {
    padding: 13px 16px;
    color: var(--pink);
    border-bottom: 1px solid var(--pink);
    font-family: "Orbitron", sans-serif;
    font-size: 11px;
    text-align: left;
    text-transform: uppercase;
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 47, 168, 0.15);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: rgba(49, 231, 242, 0.025);
}

.data-table small {
    display: block;
    max-width: 330px;
    margin-top: 3px;
    color: var(--muted);
    font-size: 14px;
}

.product-thumb {
    width: 70px;
    height: 70px;
    display: block;
    border: 1px solid rgba(49, 231, 242, 0.5);
    border-radius: 7px;
    object-fit: cover;
    background: #12051f;
}

.cyan {
    color: var(--cyan);
}

.price {
    color: var(--orange);
    font-weight: 700;
}

.old-price {
    margin-right: 6px;
    color: var(--muted);
    text-decoration: line-through;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid;
    border-radius: 5px;
    font-family: "Orbitron", sans-serif;
    font-size: 10px;
    text-transform: uppercase;
}

.badge-active {
    color: var(--green);
    border-color: var(--green);
}

.badge-inactive {
    color: var(--muted);
    border-color: rgba(184, 169, 198, 0.48);
}

.actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.actions form {
    margin: 0;
}

.actions-column {
    min-width: 150px;
}

.icon-button {
    width: 40px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    color: var(--cyan);
    border: 1px solid var(--cyan);
    border-radius: 5px;
    background: rgba(49, 231, 242, 0.03);
    cursor: pointer;
}

.icon-button.danger {
    color: var(--pink);
    border-color: var(--pink);
}

.table-footer {
    padding: 16px 20px;
    color: var(--muted);
}

.empty-state {
    padding: 70px 25px;
    text-align: center;
}

.empty-icon {
    color: var(--pink);
    font-size: 70px;
}

.empty-state h3 {
    margin: 5px 0;
    font-family: "Orbitron", sans-serif;
}

.empty-state p {
    margin: 0 0 20px;
    color: var(--muted);
}

.editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    align-items: start;
}

.editor-sidebar {
    display: grid;
    gap: 16px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
}

.field {
    display: grid;
    gap: 7px;
}

.field > span {
    color: var(--cyan);
    font-family: "Orbitron", sans-serif;
    font-size: 11px;
    text-transform: uppercase;
}

.field small {
    color: var(--muted);
}

.span-2 {
    grid-column: span 2;
}

.check-field {
    display: flex;
    gap: 9px;
    align-items: center;
    color: var(--text);
}

.check-field input {
    width: 18px;
    min-height: auto;
    height: 18px;
    accent-color: var(--pink);
}

.image-uploader {
    display: grid;
    gap: 12px;
    padding: 20px;
}

.image-uploader img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--cyan);
    border-radius: 7px;
    object-fit: cover;
    background: #0b0314;
}

.image-uploader small {
    color: var(--muted);
}

.stack {
    display: grid;
    gap: 14px;
    padding: 20px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.category-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    align-items: start;
}

.category-editor {
    position: sticky;
    top: 104px;
}

.alert {
    margin-bottom: 18px;
    padding: 13px 16px;
    border: 1px solid;
    border-radius: 7px;
}

.alert-success {
    color: var(--green);
    border-color: rgba(45, 245, 163, 0.6);
    background: rgba(45, 245, 163, 0.06);
}

.alert-danger {
    color: #ff7a9f;
    border-color: rgba(255, 47, 168, 0.62);
    background: rgba(255, 47, 168, 0.07);
}

.login-page {
    display: grid;
    place-items: center;
    padding: 25px;
}

.login-shell {
    width: min(460px, 100%);
}

.login-card {
    padding: 26px;
    border: 1px solid var(--pink);
    border-radius: 12px;
    background: rgba(15, 5, 27, 0.95);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.login-logo {
    width: 100%;
    max-width: 340px;
    display: block;
    margin: 0 auto 16px;
}

.login-card h1 {
    margin: 0;
    color: var(--pink);
    font-family: "Orbitron", sans-serif;
    text-align: center;
}

.login-card .muted,
.login-note {
    color: var(--muted);
    text-align: center;
}

.login-note {
    margin-bottom: 0;
    font-size: 13px;
}

@media (max-width: 1180px) {
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .editor-grid,
    .category-layout {
        grid-template-columns: 1fr;
    }

    .category-editor {
        position: static;
    }

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

@media (max-width: 820px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        transform: translateX(-102%);
        transition: transform 0.2s ease;
        box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-panel {
        grid-column: 1;
    }

    .menu-button {
        display: block;
    }

    .content {
        padding: 14px;
    }

    .stat-grid {
        grid-template-columns: 1fr;
    }

    .filter-bar,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .span-2 {
        grid-column: auto;
    }

    .topbar-user {
        display: none;
    }

    .panel-header {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================================
   Phase 2 Product Workbench
   ========================================================================== */

.product-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 18px;
    align-items: start;
    padding-bottom: 95px;
}

.workbench-main,
.workbench-sidebar {
    display: grid;
    gap: 18px;
}

.workbench-sidebar {
    position: sticky;
    top: 103px;
}

.editor-status {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
}

.slug-field,
.money-field {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 47, 168, 0.30);
    border-radius: 6px;
    background: rgba(5, 2, 13, 0.58);
    overflow: hidden;
}

.slug-field:focus-within,
.money-field:focus-within {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(49, 231, 242, 0.08);
}

.slug-field > span,
.money-field > span {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: var(--muted);
    border-right: 1px solid rgba(255, 47, 168, 0.20);
    background: rgba(255, 47, 168, 0.04);
    white-space: nowrap;
}

.slug-field input,
.money-field input {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
}

.rich-editor-shell {
    padding: 20px;
}

.rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 9px;
    border: 1px solid rgba(255, 47, 168, 0.30);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: rgba(5, 2, 13, 0.76);
}

.rich-toolbar button {
    min-width: 38px;
    height: 34px;
    padding: 5px 9px;
    color: var(--cyan);
    border: 1px solid rgba(49, 231, 242, 0.25);
    border-radius: 4px;
    background: rgba(49, 231, 242, 0.035);
    cursor: pointer;
}

.rich-toolbar button:hover {
    color: var(--yellow);
    border-color: var(--yellow);
}

.toolbar-divider {
    width: 1px;
    margin: 3px 3px;
    background: rgba(255, 47, 168, 0.25);
}

.rich-editor {
    min-height: 320px;
    padding: 18px;
    border: 1px solid rgba(255, 47, 168, 0.30);
    border-radius: 0 0 7px 7px;
    outline: none;
    background: rgba(5, 2, 13, 0.52);
    line-height: 1.55;
}

.rich-editor:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(49, 231, 242, 0.08);
}

.rich-editor:empty::before {
    content: attr(data-placeholder);
    color: #776987;
}

.rich-editor h2,
.rich-editor h3 {
    color: var(--pink);
    font-family: "Orbitron", sans-serif;
}

.media-workbench {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
    gap: 24px;
    padding: 20px;
}

.media-workbench h3 {
    margin: 0 0 12px;
    color: var(--cyan);
    font-family: "Orbitron", sans-serif;
    font-size: 13px;
    text-transform: uppercase;
}

.drop-zone {
    position: relative;
    display: block;
    min-height: 380px;
    border: 1px dashed var(--cyan);
    border-radius: 9px;
    overflow: hidden;
    background: #090311;
    cursor: pointer;
}

.drop-zone img {
    width: 100%;
    height: 380px;
    display: block;
    object-fit: cover;
    opacity: 0.68;
    transition: 0.2s ease;
}

.drop-zone-overlay {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: 3px;
    padding: 22px;
    color: white;
    background: linear-gradient(transparent, rgba(5, 2, 13, 0.94));
}

.drop-zone-overlay strong {
    color: var(--pink);
    font-family: "Orbitron", sans-serif;
    font-size: 13px;
}

.drop-zone-overlay span {
    color: var(--cyan);
}

.drop-zone-overlay small {
    color: var(--muted);
}

.drop-zone:hover,
.drop-zone.dragging {
    border-color: var(--pink);
    box-shadow: 0 0 28px rgba(255, 47, 168, 0.15);
}

.drop-zone:hover img,
.drop-zone.dragging img {
    transform: scale(1.025);
    opacity: 0.82;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.gallery-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.gallery-heading span {
    color: var(--muted);
    font-size: 14px;
}

.gallery-add-card {
    min-height: 120px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    padding: 18px;
    color: var(--cyan);
    border: 1px dashed rgba(49, 231, 242, 0.55);
    border-radius: 8px;
    background: rgba(49, 231, 242, 0.025);
    cursor: pointer;
}

.gallery-add-card.dragging,
.gallery-add-card:hover {
    color: var(--pink);
    border-color: var(--pink);
    background: rgba(255, 47, 168, 0.04);
}

.gallery-plus {
    font-size: 38px;
    line-height: 1;
}

.gallery-add-card small {
    color: var(--muted);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.gallery-card {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(255, 47, 168, 0.25);
    border-radius: 7px;
    overflow: hidden;
    background: #0a0312;
}

.gallery-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
}

.gallery-card small {
    display: block;
    padding: 7px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-remove {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px;
    color: #ff7a9f;
    font-size: 13px;
    cursor: pointer;
}

.gallery-remove input {
    width: 15px;
    height: 15px;
    min-height: auto;
}

.store-preview-card {
    margin: 18px;
    border: 1px solid rgba(49, 231, 242, 0.38);
    border-radius: 9px;
    overflow: hidden;
    background: rgba(4, 2, 10, 0.78);
}

.preview-image-wrap {
    position: relative;
}

.preview-image-wrap img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    background: #0a0312;
}

.sale-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 9px;
    color: #150315;
    border-radius: 4px;
    background: linear-gradient(100deg, var(--orange), var(--pink));
    font-family: "Orbitron", sans-serif;
    font-size: 10px;
    text-transform: uppercase;
}

.preview-card-body {
    padding: 16px;
}

.preview-category {
    color: var(--cyan);
    font-family: "Orbitron", sans-serif;
    font-size: 9px;
    text-transform: uppercase;
}

.preview-card-body h3 {
    margin: 7px 0 6px;
    color: var(--pink);
    font-family: "Orbitron", sans-serif;
    font-size: 17px;
}

.preview-card-body p {
    min-height: 42px;
    margin: 0 0 13px;
    color: var(--muted);
    font-size: 15px;
}

.preview-price-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.preview-price {
    color: var(--orange);
    font-family: "Orbitron", sans-serif;
    font-size: 19px;
}

.preview-old-price {
    color: var(--muted);
    text-decoration: line-through;
}

.inline-warning {
    padding: 9px 11px;
    color: #ff8faf;
    border: 1px solid rgba(255, 47, 168, 0.38);
    border-radius: 5px;
    background: rgba(255, 47, 168, 0.06);
    font-size: 14px;
}

.inventory-signal {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    color: var(--green);
    border: 1px solid rgba(45, 245, 163, 0.28);
    border-radius: 6px;
    background: rgba(45, 245, 163, 0.04);
}

.inventory-light {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px currentColor;
}

.inventory-signal.low {
    color: var(--yellow);
    border-color: rgba(255, 211, 65, 0.35);
}

.inventory-signal.low .inventory-light {
    background: var(--yellow);
}

.inventory-signal.out {
    color: #ff577d;
    border-color: rgba(255, 87, 125, 0.35);
}

.inventory-signal.out .inventory-light {
    background: #ff577d;
}

.inventory-signal.untracked {
    color: var(--muted);
    border-color: rgba(184, 169, 198, 0.25);
}

.inventory-signal.untracked .inventory-light {
    background: var(--muted);
}

.switch-field {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 12px;
    align-items: center;
    cursor: pointer;
}

.switch-field input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch {
    position: relative;
    width: 48px;
    height: 25px;
    border: 1px solid rgba(184, 169, 198, 0.38);
    border-radius: 999px;
    background: rgba(184, 169, 198, 0.09);
    transition: 0.18s ease;
}

.switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--muted);
    transition: 0.18s ease;
}

.switch-field input:checked + .switch {
    border-color: var(--pink);
    background: rgba(255, 47, 168, 0.16);
}

.switch-field input:checked + .switch::after {
    left: 26px;
    background: var(--pink);
    box-shadow: 0 0 10px var(--pink);
}

.switch-field strong,
.switch-field small {
    display: block;
}

.switch-field small {
    color: var(--muted);
}

.sticky-save-bar {
    position: fixed;
    z-index: 25;
    right: 20px;
    bottom: 18px;
    left: 305px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 16px;
    border: 1px solid var(--pink);
    border-radius: 9px;
    background: rgba(10, 3, 18, 0.94);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 47, 168, 0.08);
    backdrop-filter: blur(16px);
}

.sticky-save-bar strong,
.sticky-save-bar span {
    display: block;
}

.sticky-save-bar strong {
    color: var(--pink);
    font-family: "Orbitron", sans-serif;
    font-size: 12px;
}

.sticky-save-bar span {
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 1250px) {
    .product-workbench {
        grid-template-columns: 1fr;
    }

    .workbench-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-preview-panel {
        grid-row: span 2;
    }

    .sticky-save-bar {
        left: 305px;
    }
}

@media (max-width: 920px) {
    .media-workbench,
    .workbench-sidebar {
        grid-template-columns: 1fr;
    }

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

    .sticky-save-bar {
        left: 14px;
        right: 14px;
    }
}

@media (max-width: 620px) {
    .sticky-save-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .sticky-save-bar .form-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

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

/* Phase 6 Fulfillment */
.order-status-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-bottom:18px}
.order-status-card{display:grid;gap:4px;padding:15px;color:var(--muted);border:1px solid rgba(255,47,168,.24);border-radius:7px;background:rgba(20,6,34,.82)}
.order-status-card strong{color:var(--pink);font:25px "Orbitron",sans-serif}.order-status-card:hover,.order-status-card.active{color:#fff;border-color:var(--cyan)}
.order-filter-bar{display:grid;grid-template-columns:minmax(260px,1fr) 190px auto auto;gap:10px;padding:18px 20px;border-bottom:1px solid var(--border-soft)}
.button-small{min-height:36px;padding:7px 11px;font-size:10px}.fulfillment-badge{display:inline-flex;padding:6px 9px;color:var(--cyan);border:1px solid;border-radius:4px;font:9px "Orbitron";text-transform:uppercase}
.status-new{color:var(--pink)}.status-printing{color:var(--yellow)}.status-ready_to_pack{color:var(--orange)}.status-shipped{color:var(--cyan)}.status-completed{color:var(--green)}.status-cancelled{color:#ff6689}
.order-detail-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px;padding:22px;border:1px solid var(--pink);border-radius:9px;background:rgba(20,6,34,.84)}
.order-detail-header h2{margin:3px 0;color:var(--pink);font:30px "Orbitron"}.order-detail-header p{margin:0;color:var(--muted)}.back-link{display:inline-block;margin-bottom:13px;color:var(--cyan)}
.order-header-actions{display:flex;align-items:center;gap:10px}.order-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.order-detail-main,.order-detail-sidebar{display:grid;gap:18px}.order-detail-sidebar{position:sticky;top:104px}.order-items-list{display:grid}
.order-item{display:grid;grid-template-columns:80px minmax(0,1fr) 80px 100px;gap:15px;align-items:center;padding:15px 20px;border-bottom:1px solid var(--border-soft)}
.order-item img{width:80px;height:80px;border:1px solid var(--cyan);border-radius:6px;object-fit:cover}.order-item-copy{display:grid;gap:3px}.order-item-copy span,.order-item-copy small{color:var(--muted)}
.order-item-quantity{color:var(--cyan);font-family:"Orbitron";text-align:center}.order-item-price{color:var(--orange);font-family:"Orbitron";text-align:right}
.workflow-form{padding:20px}.workflow-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:28px}
.workflow-step{display:grid;justify-items:center;gap:8px;color:var(--muted);cursor:pointer;text-align:center}.workflow-step input{position:absolute;opacity:0}
.workflow-node{width:44px;height:44px;display:grid;place-items:center;border:2px solid;border-radius:50%;background:var(--bg-soft)}
.workflow-step:has(input:checked){color:var(--pink)}.workflow-step:has(input:checked) .workflow-node{color:#100311;background:linear-gradient(120deg,var(--orange),var(--pink));box-shadow:0 0 19px rgba(255,47,168,.25)}
.shipping-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-top:20px;border-top:1px solid var(--border-soft)}
.workflow-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}.address-card{display:grid;gap:4px;padding:20px;color:#ded2e6;font-style:normal;line-height:1.4}.address-card strong{color:var(--pink);font-size:19px}
.info-stack,.totals-card{display:grid;padding:8px 20px}.info-stack>div{display:grid;gap:3px;padding:12px 0;border-bottom:1px solid var(--border-soft)}.info-stack span{color:var(--cyan);font:9px "Orbitron";text-transform:uppercase}
.totals-card>div{display:flex;justify-content:space-between;gap:20px;padding:9px 0}.totals-card span{color:var(--muted)}.totals-card .grand-total{margin-top:5px;padding-top:14px;border-top:1px solid var(--pink)}.totals-card .grand-total strong{color:var(--orange);font:19px "Orbitron"}
@media(max-width:1250px){.order-status-grid{grid-template-columns:repeat(4,1fr)}.order-detail-grid{grid-template-columns:1fr}.order-detail-sidebar{position:static;grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.order-status-grid,.order-detail-sidebar,.order-filter-bar,.shipping-fields{grid-template-columns:1fr}.order-detail-header,.workflow-actions{align-items:stretch;flex-direction:column}.workflow-steps{grid-template-columns:1fr}.workflow-step{grid-template-columns:44px 1fr;justify-items:start;align-items:center}.order-item{grid-template-columns:70px 1fr}}


/* ==========================================================================
   Phase 7 Variants
   ========================================================================== */

.variant-help {
    padding: 14px 20px;
    color: var(--muted);
    border-bottom: 1px solid var(--border-soft);
}

.variant-help strong {
    color: var(--cyan);
}

.variant-table-wrap {
    overflow-x: auto;
}

.variant-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
}

.variant-table th {
    padding: 11px 10px;
    color: var(--pink);
    border-bottom: 1px solid var(--pink);
    font-family: "Orbitron", sans-serif;
    font-size: 9px;
    text-align: left;
    text-transform: uppercase;
}

.variant-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}

.variant-table input {
    min-width: 115px;
}

.variant-table td:nth-child(4) input,
.variant-table td:nth-child(5) input,
.variant-table td:nth-child(6) input {
    min-width: 90px;
}

.compact-money {
    min-width: 120px;
}

.compact-money > span {
    padding: 0 8px;
}

.mini-switch {
    display: inline-flex;
    cursor: pointer;
}

.mini-switch input {
    position: absolute;
    opacity: 0;
}

.mini-switch span {
    position: relative;
    width: 42px;
    height: 23px;
    border: 1px solid rgba(184, 169, 198, .38);
    border-radius: 999px;
    background: rgba(184, 169, 198, .09);
}

.mini-switch span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--muted);
    transition: .18s ease;
}

.mini-switch input:checked + span {
    border-color: var(--pink);
    background: rgba(255, 47, 168, .15);
}

.mini-switch input:checked + span::after {
    left: 22px;
    background: var(--pink);
    box-shadow: 0 0 8px var(--pink);
}

.variant-empty {
    padding: 32px 20px;
    color: var(--muted);
    text-align: center;
}