/* ============================================================
   artwork.inovaep.com — Main Stylesheet
   Palette: black & white, Georgia / system sans-serif
   ============================================================ */

/* ---- Reset & Base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --black:       #0d0d0d;
    --near-black:  #1a1a1a;
    --dark-gray:   #2e2e2e;
    --mid-gray:    #666666;
    --light-gray:  #b0b0b0;
    --pale-gray:   #e8e8e8;
    --off-white:   #f5f5f3;
    --white:       #ffffff;

    --accent:      #1a1a1a;
    --accent-hover:#333333;
    --danger:      #c0392b;
    --success:     #1a7a3c;
    --warning:     #b07d00;

    --font-serif:  Georgia, 'Times New Roman', serif;
    --font-sans:   'Segoe UI', Calibri, system-ui, -apple-system, sans-serif;
    --font-mono:   'Courier New', monospace;

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;

    --shadow-sm:   0 1px 3px rgba(0,0,0,0.12);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.18);

    --nav-h:       60px;
    --sidebar-w:   280px;
    --transition:  0.2s ease;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    background: var(--off-white);
    color: var(--near-black);
    line-height: 1.6;
    min-height: 100vh;
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: normal;
    line-height: 1.3;
}

a { color: var(--near-black); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ---- Typography ------------------------------------------- */
.text-serif  { font-family: var(--font-serif); }
.text-sans   { font-family: var(--font-sans); }
.text-sm     { font-size: 0.875rem; }
.text-xs     { font-size: 0.75rem; }
.text-muted  { color: var(--mid-gray); }
.text-center { text-align: center; }

/* ---- Layout Utilities ------------------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.mt-1  { margin-top: 0.5rem; }
.mt-2  { margin-top: 1rem; }
.mt-3  { margin-top: 1.5rem; }
.mb-2  { margin-bottom: 1rem; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ---- Buttons --------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn-primary {
    background: var(--near-black);
    color: var(--white);
    border-color: var(--near-black);
}
.btn-primary:hover {
    background: var(--dark-gray);
    border-color: var(--dark-gray);
    text-decoration: none;
}

.btn-outline {
    background: transparent;
    color: var(--near-black);
    border-color: var(--near-black);
}
.btn-outline:hover {
    background: var(--near-black);
    color: var(--white);
    text-decoration: none;
}

.btn-ghost {
    background: transparent;
    color: var(--mid-gray);
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--pale-gray);
    color: var(--near-black);
    text-decoration: none;
}

.btn-danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}
.btn-danger:hover {
    background: var(--danger);
    color: var(--white);
    text-decoration: none;
}

.btn-sm { padding: 0.35rem 0.85rem; font-size: 0.8rem; }
.btn-lg { padding: 0.75rem 2rem; font-size: 1rem; }

/* ---- Forms ------------------------------------------------ */
.form-group { margin-bottom: 1.25rem; }

label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dark-gray);
    margin-bottom: 0.4rem;
    font-family: var(--font-sans);
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    display: block;
    width: 100%;
    padding: 0.6rem 0.9rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    border: 1.5px solid var(--pale-gray);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--near-black);
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--near-black);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

input::placeholder { color: var(--light-gray); }

.form-error {
    font-size: 0.8rem;
    color: var(--danger);
    margin-top: 0.3rem;
}

/* ---- Alerts ----------------------------------------------- */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    border-left: 3px solid;
    margin-bottom: 1rem;
}
.alert-error   { background: #fdf0f0; border-color: var(--danger);  color: var(--danger); }
.alert-success { background: #f0fdf4; border-color: var(--success); color: var(--success); }
.alert-info    { background: #f5f5f3; border-color: var(--mid-gray);color: var(--dark-gray); }

/* ---- Top Navigation --------------------------------------- */
.topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--nav-h);
    background: var(--white);
    border-bottom: 1px solid var(--pale-gray);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
}

.topnav__logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}
.topnav__logo img {
    height: 36px;
    width: auto;
}
.topnav__logo-text {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--near-black);
}

.topnav__spacer { flex: 1; }

.topnav__user {
    font-size: 0.85rem;
    color: var(--mid-gray);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ---- Login Page ------------------------------------------- */
.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--off-white);
}

.login-card {
    background: var(--white);
    border: 1px solid var(--pale-gray);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-md);
}

.login-card__logo {
    text-align: center;
    margin-bottom: 2rem;
}
.login-card__logo img {
    height: 64px;
    margin: 0 auto 0.75rem;
}
.login-card__logo h1 {
    font-size: 1.4rem;
    color: var(--near-black);
}
.login-card__logo p {
    font-size: 0.85rem;
    color: var(--mid-gray);
    margin-top: 0.25rem;
    font-family: var(--font-sans);
}

.login-divider {
    text-align: center;
    margin: 2rem 0 1rem;
    font-size: 0.75rem;
    color: var(--light-gray);
    font-family: var(--font-sans);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---- Dashboard -------------------------------------------- */
.dashboard-layout {
    display: flex;
    min-height: calc(100vh - var(--nav-h));
}

.sidebar {
    width: var(--sidebar-w);
    background: var(--white);
    border-right: 1px solid var(--pale-gray);
    padding: 1.5rem 0;
    flex-shrink: 0;
    overflow-y: auto;
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
}

.sidebar__section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--light-gray);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 1.25rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-sans);
}

.sidebar__file-list { list-style: none; }

.sidebar__file-item a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    color: var(--dark-gray);
    border-left: 2px solid transparent;
    transition: background var(--transition), border-color var(--transition);
    text-decoration: none;
    word-break: break-word;
}
.sidebar__file-item a:hover {
    background: var(--off-white);
    border-left-color: var(--mid-gray);
}
.sidebar__file-item a.active {
    background: var(--off-white);
    border-left-color: var(--near-black);
    font-weight: 500;
    color: var(--near-black);
}

.file-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

.main-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    min-width: 0;
}

/* ---- File Grid (dashboard cards) -------------------------- */
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
}

.file-card {
    background: var(--white);
    border: 1px solid var(--pale-gray);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
    text-decoration: none;
    color: var(--near-black);
}
.file-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--near-black);
    transform: translateY(-2px);
    text-decoration: none;
}

.file-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: var(--off-white);
}
.file-card__icon--stl { background: #f0f0ee; }
.file-card__icon--pdf { background: #fdf0f0; }
.file-card__icon--txt { background: #f5f5f3; }
.file-card__icon--xls { background: #f0fdf4; }
.file-card__icon--other { background: var(--pale-gray); }

.file-card__name {
    font-size: 0.82rem;
    text-align: center;
    word-break: break-word;
    line-height: 1.4;
    font-family: var(--font-sans);
}

.file-card__meta {
    font-size: 0.73rem;
    color: var(--light-gray);
    font-family: var(--font-sans);
}

/* ---- Viewer Page ------------------------------------------ */
.viewer-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "sidebar toolbar"
        "sidebar canvas";
    height: calc(100vh - var(--nav-h));
}

.viewer-sidebar {
    grid-area: sidebar;
    width: 320px;
    background: var(--white);
    border-right: 1px solid var(--pale-gray);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.viewer-sidebar__header {
    padding: 1.75rem 1.5rem 1.5rem;
    border-bottom: 1px solid var(--pale-gray);
}
.viewer-sidebar__header .btn {
    width: auto;
    display: inline-flex;
}
.viewer-sidebar__logo {
    height: 38px;
    width: auto;
    margin-bottom: 1.25rem;
}
.viewer-sidebar__header h3 {
    font-size: 1rem;
    font-family: var(--font-serif);
    color: var(--near-black);
    line-height: 1.3;
    word-break: break-word;
}

.viewer-toolbar {
    grid-area: toolbar;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #1c1c1c;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap;
}

.viewer-toolbar__title {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    font-family: var(--font-sans);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viewer-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    transition: background var(--transition);
    font-family: var(--font-sans);
    white-space: nowrap;
}
.viewer-btn:hover { background: rgba(0,0,0,0.65); }
.viewer-btn.active { background: rgba(0,0,0,0.7); border-color: rgba(255,255,255,0.35); }

/* ---- Viewer filename overlay ------------------------------ */
.viewer-file-label {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.72rem;
    font-family: var(--font-sans);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    max-width: 55%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 5;
}

#stl-canvas-container {
    grid-area: canvas;
    position: relative;
    overflow: hidden;
    background: #1a1a1a;
}

#stl-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;
}

.viewer-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    color: rgba(255,255,255,0.6);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    gap: 1rem;
    z-index: 10;
}

.spinner {
    width: 36px;
    height: 36px;
    border: 2.5px solid rgba(255,255,255,0.15);
    border-top-color: rgba(255,255,255,0.7);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.viewer-hint {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    font-family: var(--font-sans);
    pointer-events: none;
    white-space: nowrap;
    z-index: 4;
}

/* ---- Viewer Color Swatches -------------------------------- */
.color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
    transition: border-color var(--transition), transform var(--transition);
}
.color-swatch:hover  { border-color: rgba(255,255,255,0.5);  transform: scale(1.15); }
.color-swatch.active { border-color: rgba(255,255,255,0.9);  transform: scale(1.1); }

/* ---- Viewer Sidebar Sections ------------------------------ */
.viewer-sidebar__section {
    padding: 1.5rem 1.5rem;
    border-bottom: 1px solid var(--pale-gray);
    flex-shrink: 0;
}

.viewer-sidebar__section-title {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--light-gray);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
    font-family: var(--font-sans);
}

.viewer-stats {
    width: 100%;
    border-collapse: collapse;
}
.viewer-stats td {
    padding: 0.28rem 0;
    border-bottom: none;
    vertical-align: middle;
}
.viewer-stats tr:hover td { background: transparent; }
.viewer-stats__label {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--mid-gray);
    width: 45%;
}
.viewer-stats__val {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--near-black);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- Model Stats dark section ----------------------------- */
.viewer-stats-section {
    background: #1e1e1e;
}
.viewer-stats-section .viewer-sidebar__section-title {
    color: rgba(255,255,255,0.45);
}
.viewer-stats-section .viewer-stats__label {
    color: rgba(255,255,255,0.6);
}
.viewer-stats-section .viewer-stats__val {
    color: rgba(255,255,255,0.95);
    font-weight: 600;
}

.viewer-share {
    background: var(--off-white);
}
.viewer-share__input {
    font-size: 0.8rem !important;
    color: var(--mid-gray) !important;
    background: var(--white) !important;
}

.viewer-cta__brand {
    margin-top: 1rem;
    font-size: 0.72rem;
    color: var(--light-gray);
    text-align: center;
    font-family: var(--font-sans);
}
.viewer-cta__brand a { color: var(--mid-gray); }
.viewer-cta__brand a:hover { color: var(--near-black); text-decoration: underline; }

/* ---- Viewer Colour Picker --------------------------------- */
.viewer-color-picker {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}
.viewer-color-picker:hover { border-color: rgba(255,255,255,0.5); }
.viewer-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.viewer-color-picker::-webkit-color-swatch { border: none; border-radius: 2px; }
.viewer-color-picker::-moz-color-swatch { border: none; border-radius: 2px; }

/* ---- Admin Panel ------------------------------------------ */
.admin-layout {
    display: flex;
    min-height: calc(100vh - var(--nav-h));
}

.admin-sidebar {
    width: 220px;
    background: var(--near-black);
    padding: 1.5rem 0;
    flex-shrink: 0;
}

.admin-sidebar__title {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: var(--light-gray);
    padding: 0 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 0.75rem;
}

.admin-nav { list-style: none; }
.admin-nav a {
    display: block;
    padding: 0.55rem 1.25rem;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
    transition: background var(--transition), color var(--transition);
    text-decoration: none;
    font-family: var(--font-sans);
}
.admin-nav a:hover, .admin-nav a.active {
    background: rgba(255,255,255,0.08);
    color: var(--white);
    text-decoration: none;
}

.admin-main { flex: 1; padding: 2rem; overflow-y: auto; }
.admin-main h2 {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--pale-gray);
}

/* ---- Tables ----------------------------------------------- */
.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    font-family: var(--font-sans);
}

th {
    text-align: left;
    padding: 0.65rem 1rem;
    background: var(--off-white);
    color: var(--mid-gray);
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--pale-gray);
}

td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--pale-gray);
    vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--off-white); }

/* ---- Stat Cards (admin dashboard) ------------------------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--white);
    border: 1px solid var(--pale-gray);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.stat-card__value {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--near-black);
    line-height: 1;
    margin-bottom: 0.3rem;
}

.stat-card__label {
    font-size: 0.78rem;
    color: var(--mid-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-sans);
}

/* ---- Modal ------------------------------------------------ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
}

.modal__title {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-serif);
}

.modal__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* ---- Badge ------------------------------------------------ */
.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
}
.badge-active   { background: #eaf7ee; color: var(--success); }
.badge-inactive { background: var(--pale-gray); color: var(--mid-gray); }

/* ---- Page Header ------------------------------------------ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.page-header h2 { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

/* ---- Empty State ------------------------------------------ */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--mid-gray);
}
.empty-state__icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }
.empty-state h3 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--dark-gray); }
.empty-state p { font-size: 0.9rem; }

/* ---- Footer ----------------------------------------------- */
.footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.78rem;
    color: var(--light-gray);
    font-family: var(--font-sans);
    border-top: 1px solid var(--pale-gray);
    margin-top: auto;
}

/* ---- Mobile Sidebar Toggle -------------------------------- */
.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    color: var(--near-black);
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
@media (max-width: 768px) {

    .sidebar-toggle { display: flex; align-items: center; }

    /* Dashboard sidebar becomes a slide-in drawer */
    .sidebar {
        position: fixed;
        top: var(--nav-h);
        left: -100%;
        height: calc(100vh - var(--nav-h));
        z-index: 50;
        transition: left var(--transition);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { left: 0; }

    .main-content { padding: 1rem; }

    /* Viewer: flex column stack — toolbar → canvas → sidebar */
    .viewer-layout {
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .viewer-toolbar {
        width: 100%;
        padding: 0.5rem 0.75rem;
        gap: 6px;
        flex-shrink: 0;
    }
    .viewer-btn {
        padding: 0.28rem 0.6rem;
        font-size: 0.75rem;
    }
    .viewer-toolbar__title {
        font-size: 0.8rem;
        flex-basis: 100%;
        order: -1;
    }
    #stl-canvas-container {
        width: 100%;
        height: 45vh;
        min-height: 280px;
        flex-shrink: 0;
    }
    .viewer-hint {
        display: none;
    }
    .viewer-sidebar {
        width: 100%;
        border-right: none;
        border-top: 1px solid var(--pale-gray);
        overflow: visible;
        flex-shrink: 0;
    }

    /* Mobile sidebar typography */
    .viewer-sidebar__header { padding: 1.1rem 1.1rem 0.9rem; }
    .viewer-sidebar__logo { height: 26px; margin-bottom: 0.65rem; }
    .viewer-sidebar__section { padding: 1rem 1.1rem; }
    .viewer-stats__label { font-size: 0.78rem; }
    .viewer-stats__val { font-size: 0.8rem; }

    /* Admin: sidebar becomes top bar */
    .admin-layout { flex-direction: column; }
    .admin-sidebar { width: 100%; padding: 0; }
    .admin-sidebar__title { display: none; }
    .admin-nav { display: flex; overflow-x: auto; }
    .admin-nav a { padding: 0.75rem 1rem; white-space: nowrap; }
    .admin-main { padding: 1rem; }

    .file-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }

    .login-card { padding: 2rem 1.25rem; }

    .topnav__logo-text { display: none; }
}

@media (max-width: 480px) {
    .file-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .page-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Shared Site Header (includes/header.php)
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--nav-h);
    background: var(--white);
    border-bottom: 1px solid var(--pale-gray);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
}

.site-header__logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--near-black);
    flex-shrink: 0;
}
.site-header__logo:hover { text-decoration: none; }
.site-header__logo img { height: 36px; width: auto; }
.site-header__logo-text { font-family: var(--font-serif); font-size: 1.1rem; }

.site-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
}

.site-nav a {
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--mid-gray);
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.site-nav a:hover { background: var(--off-white); color: var(--near-black); text-decoration: none; }
.site-nav a.active { color: var(--near-black); font-weight: 500; }

.site-header__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex-shrink: 0;
}

.site-header__username {
    font-size: 0.85rem;
    color: var(--mid-gray);
    font-family: var(--font-sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* Back link used on model.php */
.model-back-link {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--mid-gray);
    text-decoration: none;
    margin-bottom: 0.65rem;
    font-family: var(--font-sans);
    transition: color var(--transition);
}
.model-back-link:hover { color: var(--near-black); text-decoration: none; }

@media (max-width: 768px) {
    .site-header {
        height: auto;
        flex-wrap: wrap;
        padding: 0;
        gap: 0;
        align-items: stretch;
    }

    /* Row 1: logo + right actions */
    .site-header__logo {
        flex: 1;
        height: 56px;
        padding: 0 1rem;
    }
    .site-header__logo img { height: 28px; }
    .site-header__logo-text { font-size: 0.95rem; }

    .site-header__right {
        height: 56px;
        padding: 0 1rem;
        margin-left: 0;
        gap: 0.5rem;
    }
    .site-header__username { display: none; }

    /* Row 2: nav full-width pill strip */
    .site-nav {
        order: 3;
        width: 100%;
        border-top: 1px solid var(--pale-gray);
        padding: 0.4rem 0.75rem;
        gap: 0.4rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        align-items: center;
    }
    .site-nav::-webkit-scrollbar { display: none; }

    .site-nav a {
        font-size: 0.8rem;
        padding: 0.45rem 0.85rem;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        border-radius: var(--radius-md);
        background: var(--off-white);
        border: 1px solid var(--pale-gray);
        color: var(--dark-gray);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .site-nav a:hover,
    .site-nav a.active {
        background: var(--near-black);
        border-color: var(--near-black);
        color: var(--white);
    }
}

/* ============================================================
   Model Product Page (model.php)
   ============================================================ */

.model-header {
    height: var(--nav-h);
    background: var(--white);
    border-bottom: 1px solid var(--pale-gray);
    display: flex;
    align-items: center;
    padding: 0 2rem;
    box-shadow: var(--shadow-sm);
}

.model-header__logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--near-black);
}
.model-header__logo:hover { text-decoration: none; }
.model-header__logo img { height: 34px; width: auto; }
.model-header__logo-text { font-family: var(--font-serif); font-size: 1.1rem; }

.model-main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}

.model-back-wrap { margin-bottom: 1rem; }

.model-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    align-items: start;
}

.model-viewer-col { min-width: 0; }

.model-viewer-wrap {
    background: #1a1a1a;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.model-viewer-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: #1c1c1c;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap;
}

.model-viewer-wrap #stl-canvas-container {
    height: 72vh;
    min-height: 460px;
}

.model-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
}

.model-title {
    font-size: 1.65rem;
    font-weight: normal;
    color: var(--near-black);
    line-height: 1.25;
    font-family: var(--font-serif);
    margin: 0;
}

.model-section {
    background: var(--white);
    border: 1px solid var(--pale-gray);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.model-section__title {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--light-gray);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--font-sans);
    margin-bottom: 0.9rem;
}

.model-cta-text {
    font-size: 0.9rem;
    color: var(--dark-gray);
    line-height: 1.65;
    margin-bottom: 1.1rem;
    font-family: var(--font-sans);
}

.model-attribution-text {
    font-size: 0.875rem;
    color: var(--dark-gray);
    line-height: 1.65;
    font-family: var(--font-sans);
}
.model-attribution-text a { color: var(--mid-gray); text-decoration: underline; }
.model-attribution-text a:hover { color: var(--near-black); }

.model-share-row {
    display: flex;
    gap: 0.5rem;
}
.model-share-row input {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem !important;
    color: var(--mid-gray) !important;
}

@media (max-width: 900px) {
    .model-main { padding: 0 0 3rem; }
    .model-back-wrap { padding: 1rem 1rem 0; }
    .model-layout { grid-template-columns: 1fr; gap: 0; }
    .model-viewer-col { order: 1; }
    .model-sidebar { order: 2; padding: 1rem; position: static; gap: 0.75rem; }
    .model-viewer-wrap { border-radius: 0; box-shadow: none; }
    .model-viewer-wrap #stl-canvas-container { height: 50vh; min-height: 280px; }
    .model-viewer-toolbar { padding: 0.5rem 0.75rem; gap: 5px; }
    .model-title { font-size: 1.45rem; }
    .model-share-row { flex-direction: column; }
    .model-share-row .btn { width: 100%; }
}

/* ============================================================
   Site Footer (includes/footer.php)
   ============================================================ */

.site-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--pale-gray);
    background: var(--off-white);
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--light-gray);
}

.site-footer__copy {
    white-space: nowrap;
    flex-shrink: 0;
}

.site-footer__links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.site-footer a {
    color: var(--mid-gray);
    text-decoration: none;
    transition: color var(--transition);
}
.site-footer a:hover { color: var(--near-black); text-decoration: none; }

@media (max-width: 600px) {
    .site-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1.25rem 1rem;
    }
    .site-footer__links {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }
    .site-footer__links a {
        display: block;
        padding: 0.55rem 0;
        border-bottom: 1px solid var(--pale-gray);
        width: 100%;
    }
    .site-footer__links a:last-child { border-bottom: none; }
}

/* ============================================================
   Static Content Pages (privacy.php, terms.php, contact.php)
   ============================================================ */

.content-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}

.content-page h1 {
    font-weight: normal;
    font-size: 2rem;
    margin-bottom: 0.4rem;
    font-family: var(--font-serif);
}

.content-page h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 2rem 0 0.5rem;
    font-family: var(--font-sans);
    color: var(--near-black);
}

.content-page p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--dark-gray);
    margin-bottom: 0.6rem;
}

.content-page section {
    border-bottom: 1px solid var(--pale-gray);
    padding-bottom: 1.5rem;
    margin-bottom: 0.5rem;
}

/* ============================================================
   Admin Nav — separator between sections
   ============================================================ */
.admin-nav__sep {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 0.5rem 0;
}

/* ============================================================
   Ops Dashboard
   ============================================================ */

/* Snapshot bar */
.ops-snap {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.ops-snap-card {
    flex: 1;
    min-width: 110px;
    background: var(--white);
    border: 1px solid var(--pale-gray);
    border-radius: var(--radius-lg);
    padding: 1rem 1rem 0.9rem;
    text-align: center;
}
.ops-snap-card__value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--near-black);
    font-variant-numeric: tabular-nums;
}
.ops-snap-card__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mid-gray);
    margin-top: 0.35rem;
    font-weight: 600;
}
.ops-snap-card--alert .ops-snap-card__value { color: #dc2626; }
.ops-snap-card--warn  .ops-snap-card__value { color: #d97706; }
.ops-snap-card--ok    .ops-snap-card__value { color: #16a34a; }

/* Section container */
.ops-section {
    background: var(--white);
    border: 1px solid var(--pale-gray);
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.ops-section__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid var(--pale-gray);
    background: var(--off-white);
}
.ops-section__title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--near-black);
    margin: 0;
}
.ops-section__count {
    font-size: 0.72rem;
    background: var(--pale-gray);
    color: var(--mid-gray);
    border-radius: 10px;
    padding: 0.1rem 0.5rem;
    font-weight: 600;
}
.ops-section__count--alert { background: #fee2e2; color: #991b1b; }
.ops-section__count--warn  { background: #fef3c7; color: #92400e; }
.ops-section__action {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--mid-gray);
    text-decoration: none;
    white-space: nowrap;
}
.ops-section__action:hover { color: var(--near-black); text-decoration: underline; }

/* Row items (shared by Attention + Next Up) */
.ops-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid var(--pale-gray);
    font-size: 0.855rem;
    text-decoration: none;
    color: inherit;
}
.ops-item:last-child { border-bottom: none; }
.ops-item:hover { background: var(--off-white); }

.ops-item__reason {
    flex-shrink: 0;
    min-width: 116px;
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    border: 1px solid transparent;
}
.ops-reason--bed      { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.ops-reason--printing { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.ops-reason--postproc { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }
.ops-reason--payment  { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.ops-reason--overdue  { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.ops-reason--review   { background:#fffbeb; color:#92400e; border-color:#fde68a; }

.ops-item__name {
    font-weight: 600;
    color: var(--near-black);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ops-item__client {
    font-size: 0.77rem;
    color: var(--mid-gray);
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ops-item__meta {
    font-size: 0.75rem;
    color: var(--mid-gray);
    flex-shrink: 0;
    white-space: nowrap;
}
.ops-item__id {
    font-size: 0.7rem;
    color: var(--light-gray);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}

/* Empty states */
.ops-empty {
    padding: 1.5rem 1.25rem;
    color: var(--mid-gray);
    font-size: 0.875rem;
    text-align: center;
}
.ops-empty--ok { color: #16a34a; }

/* Quick Intake buttons */
.ops-intake {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1.25rem;
}
.ops-intake-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    background: var(--near-black);
    color: var(--white);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.855rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background var(--transition);
    white-space: nowrap;
}
.ops-intake-btn:hover { background: #2d2d2d; color: var(--white); text-decoration: none; }
.ops-intake-btn--ghost {
    background: var(--white);
    color: var(--near-black);
    border-color: var(--pale-gray);
}
.ops-intake-btn--ghost:hover { background: var(--off-white); color: var(--near-black); }

/* Task rows */
.ops-task-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.25rem;
    border-bottom: 1px solid var(--pale-gray);
}
.ops-task-item:last-child { border-bottom: none; }
.ops-task-item__title {
    flex: 1;
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--near-black);
}
.ops-task-item__desc {
    font-size: 0.77rem;
    color: var(--mid-gray);
    margin-top: 0.15rem;
}
.ops-task-item__time {
    font-size: 0.77rem;
    color: var(--mid-gray);
    flex-shrink: 0;
    white-space: nowrap;
}
.ops-task-item__cat {
    font-size: 0.66rem;
    background: var(--off-white);
    border: 1px solid var(--pale-gray);
    color: var(--mid-gray);
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Two-column layout for Needs Attention + Quick Intake side by side */
.ops-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 960px) {
    .ops-grid { grid-template-columns: 1fr; }
}

.content-page section:last-child { border-bottom: none; }

/* ── Priority badges (shared admin pages) ───────────────────────────────────── */
.pri-badge          { display:inline-block; padding:.15rem .45rem; border-radius:var(--radius-sm);
                      font-size:.68rem; font-weight:700; text-transform:uppercase;
                      letter-spacing:.04em; white-space:nowrap; }
.pri-badge--rush    { background:#fee2e2; color:#991b1b; }
.pri-badge--high    { background:#fed7aa; color:#c2410c; }
.pri-badge--low     { background:#f9fafb; color:#9ca3af; }

/* ── Jobs filter tabs ────────────────────────────────────────────────────────── */
.req-filters           { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.req-filter-btn        { display:inline-block; padding:.3rem .85rem; font-size:.8rem; font-weight:500;
                         border:1px solid var(--pale-gray); border-radius:var(--radius-sm);
                         background:var(--white); color:var(--mid-gray); text-decoration:none;
                         transition:background .12s, border-color .12s, color .12s; }
.req-filter-btn:hover  { border-color:#bbb; color:var(--near-black); }
.req-filter-btn.active { background:var(--near-black); border-color:var(--near-black); color:#fff; }
.req-filter-btn__count { font-size:.68rem; margin-left:.3rem; opacity:.7; }

/* ── Jobs table ──────────────────────────────────────────────────────────────── */
.req-table               { width:100%; border-collapse:collapse; font-size:.855rem; table-layout:auto; }
.req-table th            { text-align:left; font-size:.71rem; font-weight:600; text-transform:uppercase;
                           letter-spacing:.05em; color:var(--mid-gray); padding:.55rem .9rem;
                           border-bottom:1px solid var(--pale-gray); white-space:nowrap; }
.req-table td            { padding:.65rem .9rem; border-bottom:1px solid var(--pale-gray);
                           color:var(--dark-gray); vertical-align:middle; }
.req-table tr:last-child td         { border-bottom:none; }
.req-table tr:hover td              { background:var(--off-white); }
.req-table tr[data-urgent] td       { background:#fff8f8; }
.req-table tr[data-bed-ready] td    { background:#fff7ed; }
.req-table tr[data-bed-ready]:hover td { background:#ffedd5; }
.req-table tr[data-bed-ready] > td:first-child { border-left:3px solid #f97316; }

/* ── Inline select ───────────────────────────────────────────────────────────── */
.req-select-inline        { font-size:.78rem; padding:.2rem .5rem; border:1px solid var(--pale-gray);
                            border-radius:var(--radius-sm); background:var(--white); cursor:pointer;
                            color:var(--dark-gray); font-family:inherit; transition:border-color .15s; }
.req-select-inline:focus  { outline:none; border-color:#aaa; }
.req-select-inline.saving { opacity:.5; pointer-events:none; }
.req-select-inline.saved  { border-color:#22c55e; }
.req-select-inline.error  { border-color:#ef4444; }

/* ── Job status badges ───────────────────────────────────────────────────────── */
.job-badge                           { display:inline-block; padding:.18rem .55rem; border-radius:var(--radius-sm);
                                       font-size:.68rem; font-weight:600; text-transform:uppercase;
                                       letter-spacing:.04em; white-space:nowrap; }
.job-badge--queued                   { background:#f3f4f6; color:#6b7280; }
.job-badge--ready-to-print           { background:#dbeafe; color:#1d4ed8; }
.job-badge--printing                 { background:#ffedd5; color:#c2410c; }
.job-badge--finished-on-bed          { background:#fef9c3; color:#854d0e; }
.job-badge--post-processing          { background:#f3e8ff; color:#7e22ce; }
.job-badge--ready-for-pickup-or-ship { background:#ccfbf1; color:#0f766e; }
.job-badge--completed                { background:#dcfce7; color:#166534; }

/* ── Print column (jobs.php) ─────────────────────────────────────────────────── */
.btn-start-print          { padding:.25rem .65rem; font-size:.78rem; font-weight:600;
                            background:var(--near-black); color:#fff; border:none;
                            border-radius:var(--radius-sm); cursor:pointer; font-family:inherit;
                            white-space:nowrap; transition:background .12s; }
.btn-start-print:hover    { background:#2d2d2d; }

.btn-remove-bed           { padding:.25rem .65rem; font-size:.78rem; font-weight:700;
                            background:#ea580c; color:#fff; border:none;
                            border-radius:var(--radius-sm); cursor:pointer; font-family:inherit;
                            white-space:nowrap; transition:background .12s;
                            animation:pulse-orange 1.6s ease-in-out infinite; }
.btn-remove-bed:hover     { background:#c2410c; animation:none; }
.btn-remove-bed:disabled  { opacity:.5; cursor:not-allowed; animation:none; }

@keyframes pulse-orange {
    0%, 100% { box-shadow:0 0 0 0 rgba(234,88,12,.4); }
    50%       { box-shadow:0 0 0 5px rgba(234,88,12,0); }
}

.bed-ready-badge  { display:inline-block; padding:.15rem .45rem; margin-bottom:.3rem;
                    background:#fff7ed; color:#c2410c; border:1px solid #fed7aa;
                    border-radius:var(--radius-sm); font-size:.65rem; font-weight:700;
                    text-transform:uppercase; letter-spacing:.05em; }

.print-countdown         { display:block; font-size:.78rem; color:var(--mid-gray); white-space:nowrap; }
.print-countdown.expired { color:#ea580c; font-weight:600; }
.print-started           { font-size:.72rem; color:var(--light-gray); margin-top:.1rem; }

/* ── Jobs table cells ────────────────────────────────────────────────────────── */
.jobs-id        { font-size:.75rem; color:var(--mid-gray); font-variant-numeric:tabular-nums; }
.jobs-client    { font-weight:600; font-size:.855rem; color:var(--near-black); }
.jobs-email     { font-size:.73rem; color:var(--mid-gray); }
.jobs-date      { font-size:.77rem; color:var(--mid-gray); white-space:nowrap; }
.jobs-qty       { font-variant-numeric:tabular-nums; text-align:center; }
.jobs-view      { font-size:.78rem; color:var(--mid-gray); text-decoration:none; white-space:nowrap; }
.jobs-view:hover { color:var(--near-black); text-decoration:underline; }
.admin-main     { overflow-x:auto; }

/* ── Start Print modal (shared) ──────────────────────────────────────────────── */
.sp-modal              { position:fixed; inset:0; background:rgba(0,0,0,.45);
                         display:none; align-items:center; justify-content:center; z-index:1000; }
.sp-modal.open         { display:flex; }
.sp-modal-box          { background:var(--white); border-radius:var(--radius-lg); padding:1.5rem;
                         max-width:380px; width:100%; margin:1rem;
                         box-shadow:0 8px 32px rgba(0,0,0,.15); }
.sp-modal-title        { font-size:1rem; font-weight:700; margin:0 0 .25rem; font-family:var(--font-serif); }
.sp-modal-job          { font-size:.83rem; color:var(--mid-gray); margin:0 0 1.25rem; }
.sp-duration           { display:flex; gap:1rem; align-items:flex-end; }
.sp-duration-field label { display:block; font-size:.72rem; font-weight:600;
                           text-transform:uppercase; letter-spacing:.05em;
                           color:var(--mid-gray); margin-bottom:.3rem; }
.sp-duration-field input { width:72px; padding:.35rem .5rem; font-size:1rem; font-weight:600;
                           border:1px solid var(--pale-gray); border-radius:var(--radius-sm);
                           font-family:inherit; text-align:center; }
.sp-duration-field input:focus { outline:none; border-color:#aaa; }
.sp-eta-preview        { margin-top:.9rem; font-size:.8rem; color:var(--mid-gray); }
.sp-eta-preview strong { color:var(--near-black); }
.sp-modal-actions      { display:flex; gap:.5rem; justify-content:flex-end; margin-top:1.25rem; }

/* ── Ops: page header ────────────────────────────────────────────────────────── */
.ops-page-header     { margin-bottom:1.5rem; display:flex; align-items:flex-start;
                       justify-content:space-between; flex-wrap:wrap; gap:.75rem; }
.ops-page-header h2  { font-size:1.4rem; margin:0; padding:0; border:none; }
.ops-page-header p   { color:var(--mid-gray); font-size:.875rem; margin:.25rem 0 0; }

/* ── Ops: Needs Bed Removal section ──────────────────────────────────────────── */
.ops-section--bed                             { border-color:#fbd0c0; margin-bottom:1.25rem; }
.ops-section--bed .ops-section__header        { background:#fff4ee; border-bottom-color:#fbd0c0; }
.ops-section--bed .ops-section__title         { color:#9a3412; }
.ops-section--bed .ops-section__count--alert  { background:#fbd0c0; color:#7c2d12; }
.ops-item--bed                                { background:#fff4ee; border-bottom-color:#fbd0c0; }
.ops-item--bed:hover                          { background:#ffe4d6; }

.ops-overdue-time { font-size:.73rem; color:#ea580c; font-weight:600; white-space:nowrap; flex-shrink:0; }

.ops-bed-btn          { flex-shrink:0; padding:.28rem .7rem; background:#ea580c; color:#fff; border:none;
                        border-radius:var(--radius-sm); font-size:.78rem; font-weight:700; cursor:pointer;
                        font-family:inherit; white-space:nowrap; transition:background .12s;
                        animation:pulse-ops 1.8s ease-in-out infinite; }
.ops-bed-btn:hover    { background:#c2410c; animation:none; }
.ops-bed-btn:disabled { opacity:.5; cursor:not-allowed; animation:none; }

@keyframes pulse-ops {
    0%, 100% { box-shadow:0 0 0 0 rgba(234,88,12,.35); }
    50%       { box-shadow:0 0 0 5px rgba(234,88,12,0); }
}

.ops-print-countdown              { font-size:.78rem; color:var(--mid-gray); white-space:nowrap; }
.ops-snap-card--bed-alert         { border-color:#fbd0c0; background:#fff4ee; }
.ops-snap-card--bed-alert .ops-snap-card__value { color:#dc2626; }

/* ── Ops: Printing Now section ───────────────────────────────────────────────── */
.ops-section--printing .ops-section__header { background:#fff8f0; }
.ops-section--printing .ops-section__title  { color:#9a3412; }

.ops-pi-item              { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
                            padding:.8rem 1.25rem; border-bottom:1px solid var(--pale-gray); }
.ops-pi-item:last-child   { border-bottom:none; }
.ops-pi-name              { flex:1; font-weight:600; font-size:.88rem; color:var(--near-black); min-width:120px; }
.ops-pi-client            { font-size:.77rem; color:var(--mid-gray); flex-shrink:0; }
.ops-pi-qty               { font-size:.77rem; color:var(--mid-gray); flex-shrink:0; }
.ops-pi-timer             { font-size:.82rem; font-weight:600; color:var(--mid-gray);
                            white-space:nowrap; flex-shrink:0; }
.ops-pi-timer.expired     { color:#ea580c; }
.ops-pi-clock             { font-size:.73rem; color:var(--light-gray); white-space:nowrap; flex-shrink:0; }
.ops-pi-start             { font-size:.73rem; color:var(--light-gray); flex-shrink:0; }

/* ── Ops: audio toggle ───────────────────────────────────────────────────────── */
.ops-audio-toggle        { display:inline-flex; align-items:center; gap:.4rem; font-size:.77rem;
                           color:var(--mid-gray); cursor:pointer; user-select:none;
                           padding:.25rem .55rem; border:1px solid var(--pale-gray);
                           border-radius:var(--radius-sm); background:var(--white);
                           transition:border-color .12s, color .12s; }
.ops-audio-toggle:hover  { border-color:#aaa; color:var(--near-black); }
.ops-audio-toggle input  { margin:0; cursor:pointer; }

/* ── Phase 2: Overdue rows and badges ────────────────────────────────────────── */
.overdue-badge            { display:inline-block; padding:.1rem .35rem; border-radius:var(--radius-sm);
                            background:#fee2e2; color:#991b1b; font-size:.65rem; font-weight:700;
                            text-transform:uppercase; letter-spacing:.03em; vertical-align:middle;
                            margin-left:.25rem; }

tr[data-overdue="1"]      { background:#fff5f5 !important; }
tr[data-overdue="1"]:hover { background:#fee2e2 !important; }
tr[data-overdue="1"] td   { border-bottom-color:#fecaca; }

.ops-item--overdue        { background:#fff5f5; border-bottom-color:#fecaca; }
.ops-item--overdue:hover  { background:#fee2e2; }

/* ── Phase 2: Assignment select ──────────────────────────────────────────────── */
.job-assign-select        { max-width:140px; }

/* ── Phase 2: My Active Work section ─────────────────────────────────────────── */
.ops-section--mywork               { border-color:#dbeafe; }
.ops-section--mywork .ops-section__header { background:#eff6ff; }
.ops-section--mywork .ops-section__title  { color:#1e40af; }

.ops-mywork-item          { gap:.55rem; }
.ops-mywork-timer         { font-size:.8rem; font-weight:600; color:#1d4ed8; }
.ops-mywork-timer.expired { color:#ea580c; }

/* ── Phase 2: Task claim buttons ─────────────────────────────────────────────── */
.ops-task-claim-btn       { flex-shrink:0; padding:.25rem .65rem; background:#1d4ed8; color:#fff;
                            border:none; border-radius:var(--radius-sm); font-size:.77rem;
                            font-weight:600; cursor:pointer; font-family:inherit;
                            transition:background .12s; white-space:nowrap; }
.ops-task-claim-btn:hover    { background:#1e40af; }
.ops-task-claim-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── Phase 2: Task complete row ──────────────────────────────────────────────── */
.ops-mywork-task          { flex-wrap:wrap; }
.ops-task-complete-wrap   { display:flex; align-items:center; gap:.4rem; flex-shrink:0; }
.ops-task-note            { width:130px; padding:.22rem .45rem; font-size:.77rem;
                            border:1px solid var(--pale-gray); border-radius:var(--radius-sm);
                            font-family:inherit; color:var(--near-black); }
.ops-task-note:focus      { outline:none; border-color:#6366f1; box-shadow:0 0 0 2px rgba(99,102,241,.12); }
.ops-task-complete-btn    { flex-shrink:0; padding:.22rem .65rem; background:#059669; color:#fff;
                            border:none; border-radius:var(--radius-sm); font-size:.77rem;
                            font-weight:600; cursor:pointer; font-family:inherit;
                            transition:background .12s; white-space:nowrap; }
.ops-task-complete-btn:hover    { background:#047857; }
.ops-task-complete-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── Phase 2: Tasks admin page toggle buttons ────────────────────────────────── */
.tasks-toggle-btn         { padding:.2rem .5rem; border-radius:var(--radius-sm); border:1px solid;
                            font-size:.73rem; font-weight:600; cursor:pointer; font-family:inherit;
                            transition:background .12s, color .12s; }
.tasks-toggle-btn--on     { background:#d1fae5; color:#065f46; border-color:#6ee7b7; }
.tasks-toggle-btn--on:hover  { background:#a7f3d0; }
.tasks-toggle-btn--off    { background:#f3f4f6; color:#9ca3af; border-color:#d1d5db; }
.tasks-toggle-btn--off:hover { background:#e5e7eb; color:#374151; }

/* ── Phase 3: Request detail page ────────────────────────────────────────────── */
.req-detail-header           { display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap;
                               margin-bottom:1.25rem; padding-bottom:1rem;
                               border-bottom:1px solid var(--pale-gray); }
.req-detail-header__back     { display:flex; gap:.6rem; align-items:center; width:100%; }
.req-detail-back             { font-size:.8rem; color:var(--mid-gray); text-decoration:none;
                               padding:.2rem .5rem; border:1px solid var(--pale-gray);
                               border-radius:var(--radius-sm); transition:border-color .12s; }
.req-detail-back:hover       { border-color:#aaa; color:var(--near-black); }
.req-detail-header__main     { flex:1; min-width:0; }
.req-detail-title            { margin:0 0 .35rem; font-size:1.2rem; font-weight:700;
                               color:var(--near-black); line-height:1.3; }
.req-detail-badges           { display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; }
.req-detail-header__id       { font-size:1.6rem; font-weight:700; color:var(--light-gray);
                               letter-spacing:-.03em; flex-shrink:0; }

/* Job-status badge colors */
.rdb                         { display:inline-block; padding:.18rem .5rem;
                               border-radius:var(--radius-sm); font-size:.72rem;
                               font-weight:600; border:1px solid transparent; }
.rdb--queued                 { background:#f3f4f6; color:#374151; border-color:#e5e7eb; }
.rdb--ready_to_print         { background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
.rdb--printing               { background:#ffedd5; color:#9a3412; border-color:#fed7aa; }
.rdb--finished_on_bed        { background:#fef9c3; color:#854d0e; border-color:#fde68a; }
.rdb--post_processing        { background:#ede9fe; color:#5b21b6; border-color:#ddd6fe; }
.rdb--ready_for_pickup_or_ship { background:#d1fae5; color:#065f46; border-color:#6ee7b7; }
.rdb--completed              { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.rdb--status                 { background:#f9fafb; color:#6b7280; border-color:#e5e7eb; }

/* Detail grid */
.req-detail-grid             { display:grid; grid-template-columns:1fr 380px; gap:1.25rem;
                               align-items:start; }
@media (max-width:860px) {
    .req-detail-grid         { grid-template-columns:1fr; }
    .req-detail-right        { order:-1; }
}

.req-detail-card             { background:var(--white); border:1px solid var(--pale-gray);
                               border-radius:var(--radius-lg); padding:1rem 1.1rem;
                               margin-bottom:1rem; }
.req-detail-card:last-child  { margin-bottom:0; }
.req-detail-card--timeline   { padding-bottom:.75rem; }
.req-detail-card__title      { font-size:.7rem; font-weight:700; text-transform:uppercase;
                               letter-spacing:.07em; color:var(--mid-gray); margin-bottom:.7rem; }

.req-detail-field            { display:flex; gap:.6rem; align-items:baseline;
                               padding:.3rem 0; border-bottom:1px solid var(--off-white); }
.req-detail-field:last-child { border-bottom:none; }
.req-detail-field--block     { flex-direction:column; gap:.25rem; }
.req-detail-field__lbl       { font-size:.75rem; color:var(--mid-gray); min-width:90px;
                               flex-shrink:0; }
.req-detail-field__val       { font-size:.87rem; color:var(--near-black); }
.req-detail-paid             { color:#059669; font-weight:600; }

.req-detail-quick-form       { margin:0; }

/* ── Phase 3: Activity timeline ──────────────────────────────────────────────── */
.act-timeline                { list-style:none; margin:0 0 .75rem; padding:0; }

.act-entry                   { display:flex; gap:.7rem; padding:.55rem 0;
                               border-bottom:1px solid var(--off-white); }
.act-entry:last-child        { border-bottom:none; }

.act-entry__icon             { flex-shrink:0; width:1.5rem; height:1.5rem; border-radius:50%;
                               display:flex; align-items:center; justify-content:center;
                               font-size:.7rem; font-weight:700; margin-top:.1rem;
                               background:var(--pale-gray); color:var(--mid-gray); }

/* Icon colors by type */
.act-entry--created .act-entry__icon   { background:#dbeafe; color:#1e40af; }
.act-entry--ok .act-entry__icon        { background:#d1fae5; color:#059669; }
.act-entry--assigned .act-entry__icon  { background:#ede9fe; color:#7c3aed; }
.act-entry--print .act-entry__icon     { background:#ffedd5; color:#ea580c; }
.act-entry--invoice .act-entry__icon   { background:#e0f2fe; color:#0369a1; }
.act-entry--payment .act-entry__icon   { background:#d1fae5; color:#059669; }
.act-entry--note .act-entry__icon      { background:#fef9c3; color:#854d0e; }
.act-entry--neutral .act-entry__icon   { background:#f3f4f6; color:#6b7280; }
.act-entry--status .act-entry__icon    { background:#f3f4f6; color:#374151; }

.act-entry__body             { flex:1; min-width:0; }
.act-entry__header           { display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap;
                               margin-bottom:.15rem; }
.act-entry__type             { font-size:.72rem; font-weight:700; text-transform:uppercase;
                               letter-spacing:.04em; color:var(--mid-gray); }
.act-entry__actor            { font-size:.77rem; font-weight:600; color:var(--near-black); }
.act-entry__time             { font-size:.72rem; color:var(--light-gray); margin-left:auto;
                               white-space:nowrap; flex-shrink:0; }
.act-entry__msg              { font-size:.83rem; color:var(--near-black); line-height:1.45;
                               word-break:break-word; }

/* Note form */
.act-note-form               { margin-top:.5rem; border-top:1px solid var(--pale-gray);
                               padding-top:.65rem; }
.act-note-input              { width:100%; padding:.45rem .6rem; font-size:.83rem;
                               border:1px solid var(--pale-gray); border-radius:var(--radius-sm);
                               font-family:inherit; color:var(--near-black); resize:vertical;
                               box-sizing:border-box; }
.act-note-input:focus        { outline:none; border-color:#6366f1;
                               box-shadow:0 0 0 2px rgba(99,102,241,.12); }

/* ── Commerce Hub: Alert helpers ────────────────────────────────────────────── */
.alert-success               { background:#e8f5e9; border:1px solid #a5d6a7; color:#2e7d32;
                               border-radius:var(--radius-md); padding:.75rem 1rem;
                               font-size:.875rem; }
.alert-danger,
.alert-error                 { background:#fce4ec; border:1px solid #f48fb1; color:#c62828;
                               border-radius:var(--radius-md); padding:.75rem 1rem;
                               font-size:.875rem; }

/* ── Card title small ────────────────────────────────────────────────────────── */
.card-title-sm               { font-size:1rem; margin-bottom:1rem;
                               font-family:var(--font-serif); }

/* ── Button extra-small ──────────────────────────────────────────────────────── */
.btn-xs                      { padding:.15rem .45rem; font-size:.72rem; font-weight:600;
                               border-radius:var(--radius-sm); }

/* ═══════════════════════════════════════════════════════════════════════════════
   Commerce Hub: edit-product.php — ep-* layout
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Two-column product editor grid */
.ep-grid                     { display:grid; grid-template-columns:1fr 360px; gap:1.25rem;
                               align-items:start; }
@media (max-width:900px) {
    .ep-grid                 { grid-template-columns:1fr; }
    .ep-right                { order:-1; }
}

/* Section cards */
.ep-section                  { background:var(--white); border:1px solid var(--pale-gray);
                               border-radius:var(--radius-lg); margin-bottom:1rem;
                               overflow:hidden; }
.ep-section:last-child       { margin-bottom:0; }
.ep-section__title           { padding:.6rem 1.1rem; background:var(--off-white);
                               border-bottom:1px solid var(--pale-gray);
                               font-size:.7rem; font-weight:700; text-transform:uppercase;
                               letter-spacing:.07em; color:var(--mid-gray); }
.ep-section__body            { padding:1rem 1.1rem; }

/* Tag chips */
.ep-tag-chip                 { display:inline-flex; align-items:center; gap:.3rem;
                               background:var(--off-white); border:1px solid var(--pale-gray);
                               border-radius:2rem; padding:.18rem .6rem;
                               font-size:.78rem; color:var(--near-black);
                               text-decoration:none; white-space:nowrap; }
.ep-tag-chip--sm             { font-size:.71rem; padding:.12rem .45rem; }
.ep-tag-chip:hover           { border-color:#aaa; background:var(--pale-gray); }
.ep-tag-chip__remove         { background:none; border:none; cursor:pointer;
                               color:var(--mid-gray); font-size:.75rem; padding:0;
                               line-height:1; margin-left:.1rem; }
.ep-tag-chip__remove:hover   { color:var(--danger); }
.ep-tags-wrap                { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.65rem; }

/* Variants compact table */
.variant-table               { width:100%; border-collapse:collapse; font-size:.82rem; }
.variant-table th            { font-size:.68rem; font-weight:700; text-transform:uppercase;
                               letter-spacing:.05em; color:var(--mid-gray);
                               padding:.3rem .5rem; border-bottom:2px solid var(--pale-gray);
                               text-align:left; }
.variant-table td            { padding:.38rem .5rem; border-bottom:1px solid var(--off-white);
                               vertical-align:middle; color:var(--near-black); }
.variant-table tr:last-child td { border-bottom:none; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Commerce Hub: products.php — prd-* layout
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Page layout: sidebar + content */
.prd-layout                  { display:grid; grid-template-columns:280px 1fr; gap:1.5rem;
                               align-items:start; }
@media (max-width:820px) {
    .prd-layout              { grid-template-columns:1fr; }
    .prd-sidebar             { order:1; }
}

/* Filter bar */
.prd-filter-bar              { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem;
                               align-items:center; }
.prd-filter-search           { flex:1; min-width:160px; padding:.38rem .6rem;
                               border:1px solid var(--pale-gray); border-radius:var(--radius-sm);
                               font-size:.85rem; font-family:inherit; box-sizing:border-box; }
.prd-filter-search:focus     { outline:none; border-color:#aaa; }
.prd-filter-select           { padding:.38rem .5rem; border:1px solid var(--pale-gray);
                               border-radius:var(--radius-sm); font-size:.82rem;
                               font-family:inherit; background:var(--white); color:var(--near-black); }
.prd-filter-select:focus     { outline:none; border-color:#aaa; }
.prd-filter-chk              { display:flex; align-items:center; gap:.3rem;
                               font-size:.82rem; cursor:pointer; color:var(--near-black);
                               white-space:nowrap; }

.prd-filter-chip             { display:inline-block; background:#eff6ff; color:#1d4ed8;
                               border:1px solid #bfdbfe; border-radius:2rem;
                               padding:.15rem .55rem; font-size:.72rem; font-weight:600; }

.prd-list-header             { display:flex; align-items:center; justify-content:space-between;
                               margin-bottom:.5rem; }

/* Product rows */
.prd-row                     { display:flex; align-items:flex-start; gap:1rem;
                               padding:.85rem 1.1rem; border-bottom:1px solid var(--pale-gray); }
.prd-row:last-child          { border-bottom:none; }
.prd-row--inactive           { opacity:.55; }
.prd-row--inactive:hover     { opacity:.8; }

.prd-row__main               { flex:1; min-width:0; }
.prd-row__name               { font-weight:600; font-size:.9rem; color:var(--near-black);
                               margin-bottom:.2rem; display:flex; align-items:center; gap:.3rem; }
.prd-row__meta               { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
                               font-size:.74rem; color:var(--mid-gray); margin-bottom:.3rem; }
.prd-row__tags               { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.25rem; }

.prd-row__stats              { display:flex; flex-direction:column; align-items:flex-end;
                               gap:.3rem; flex-shrink:0; min-width:70px; }
.prd-row__actions            { display:flex; align-items:center; gap:.4rem; flex-shrink:0; }

/* Meta chips */
.prd-sku                     { background:var(--off-white); border:1px solid var(--pale-gray);
                               border-radius:var(--radius-sm); padding:.1rem .4rem;
                               font-size:.71rem; font-weight:700; font-family:var(--font-mono);
                               color:var(--near-black); letter-spacing:.03em; }
.prd-type-dot                { font-size:.74rem; }
.prd-type--printable         { color:#7c3aed; }
.prd-type--physical          { color:#b45309; }
.prd-type--service           { color:#0369a1; }
.prd-type--digital           { color:#059669; }
.prd-cat                     { color:var(--mid-gray); }
.prd-est                     { color:var(--mid-gray); }
.prd-model                   { color:var(--mid-gray); }
.prd-star                    { color:#d97706; font-size:.9rem; }
.prd-variants                { font-size:.75rem; }

/* Readiness badges */
.prd-badge                   { display:inline-block; border-radius:2rem;
                               padding:.15rem .55rem; font-size:.7rem; font-weight:700;
                               letter-spacing:.04em; white-space:nowrap; }
.prd-badge--draft            { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; }
.prd-badge--intake           { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }
.prd-badge--media            { background:#ede9fe; color:#6d28d9; border:1px solid #ddd6fe; }
.prd-badge--ready            { background:#dbeafe; color:#1d4ed8; border:1px solid #bfdbfe; }
.prd-badge--listed           { background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }
.prd-badge--archived         { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }

/* Completion indicators (SKU / IMG / $$$) */
.prd-indicators              { display:flex; flex-wrap:wrap; gap:.2rem; justify-content:flex-end; }
.prd-indicator               { display:inline-block; font-size:.62rem; font-weight:700;
                               letter-spacing:.04em; border-radius:var(--radius-sm);
                               padding:.1rem .35rem; white-space:nowrap; }
.prd-indicator--warn         { background:#fff1f2; color:#e11d48; border:1px solid #fecdd3; }
.prd-indicator--live         { background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Publishing Foundation: edit-product media section
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Media grid */
.ep-media-grid               { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
                               gap:.5rem; margin-bottom:.75rem; }
.ep-media-item               { border:2px solid var(--pale-gray); border-radius:var(--radius-md);
                               overflow:hidden; position:relative; background:var(--off-white); }
.ep-media-item--primary      { border-color:#3b82f6; }
.ep-media-thumb              { width:100%; aspect-ratio:1; overflow:hidden; position:relative; }
.ep-media-thumb img          { width:100%; height:100%; object-fit:cover; display:block; }
.ep-media-primary-badge      { position:absolute; top:2px; left:2px; font-size:.6rem; font-weight:700;
                               background:#3b82f6; color:#fff; border-radius:2px;
                               padding:.05rem .3rem; pointer-events:none; }
.ep-media-meta               { padding:.2rem .35rem; font-size:.66rem; color:var(--mid-gray);
                               text-transform:capitalize; border-top:1px solid var(--pale-gray); }
.ep-media-actions            { display:flex; gap:.2rem; padding:.25rem .35rem;
                               border-top:1px solid var(--pale-gray); background:var(--white); }
.ep-media-empty              { font-size:.83rem; color:var(--mid-gray); margin-bottom:.65rem; }

/* Drop zone */
.ep-media-upload-wrap        { border-top:1px solid var(--pale-gray); padding-top:.75rem;
                               margin-top:.5rem; }
.ep-media-drop-zone          { border:2px dashed var(--pale-gray); border-radius:var(--radius-md);
                               padding:1.1rem .75rem; text-align:center; cursor:pointer;
                               transition:border-color .15s, background .15s; position:relative; }
.ep-media-drop-zone:hover,
.ep-media-drop-zone.dragover { border-color:#888; background:var(--off-white); }
.ep-drop-icon                { font-size:1.4rem; margin-bottom:.25rem; }
.ep-drop-label               { font-size:.8rem; color:var(--mid-gray); }
.ep-drop-hint                { font-size:.7rem; color:var(--light-gray); margin-top:.15rem; }

/* Upload progress */
.ep-upload-progress          { height:3px; background:var(--pale-gray);
                               border-radius:2px; margin-top:.4rem; overflow:hidden; }
.ep-upload-bar               { height:100%; background:#3b82f6;
                               width:0; transition:width .3s; }

/* Section header badge helpers */
.ep-warn-badge               { display:inline-block; background:#fff1f2; color:#e11d48;
                               border:1px solid #fecdd3; border-radius:2rem;
                               font-size:.62rem; font-weight:700; padding:.1rem .4rem;
                               margin-left:.4rem; vertical-align:middle;
                               text-transform:none; letter-spacing:0; }
.ep-ok-badge                 { display:inline-block; background:#d1fae5; color:#065f46;
                               border:1px solid #a7f3d0; border-radius:2rem;
                               font-size:.62rem; font-weight:700; padding:.1rem .4rem;
                               margin-left:.4rem; vertical-align:middle;
                               text-transform:none; letter-spacing:0; }

/* ── Marketplace readiness checklist ─────────────────────────────────────────── */
.ep-mp-checklist             { display:flex; flex-direction:column; gap:.25rem;
                               margin-bottom:.65rem; font-size:.79rem; }
.ep-mp-check                 { display:flex; align-items:center; gap:.4rem;
                               padding:.2rem 0; }
.ep-mp-check--ok             { color:#059669; }
.ep-mp-check--warn           { color:#dc2626; }
.ep-mp-check--neutral        { color:var(--mid-gray); }

.ep-mp-row                   { display:flex; align-items:center; gap:.55rem;
                               padding:.35rem 0; border-bottom:1px solid var(--pale-gray);
                               font-size:.82rem; }
.ep-mp-row:last-child        { border-bottom:none; }
.ep-mp-channel               { font-weight:700; font-size:.75rem; width:52px;
                               letter-spacing:.04em; color:var(--near-black); }
.ep-mp-status                { font-size:.72rem; font-weight:600; border-radius:2rem;
                               padding:.1rem .45rem; }
.ep-mp-status--synced        { background:#d1fae5; color:#065f46; }
.ep-mp-status--unsynced      { background:#f3f4f6; color:#6b7280; }
.ep-mp-status--needs_update  { background:#fff7ed; color:#c2410c; }
.ep-mp-status--error         { background:#fee2e2; color:#dc2626; }
.ep-mp-extlink               { color:#3b82f6; font-size:.78rem; text-decoration:none; }
.ep-mp-extlink:hover         { text-decoration:underline; }
.ep-mp-toggle                { margin-left:auto; font-size:.7rem; font-weight:700;
                               border-radius:2rem; padding:.1rem .45rem; }
.ep-mp-toggle--on            { background:#d1fae5; color:#065f46; }
.ep-mp-toggle--off           { background:#f3f4f6; color:#9ca3af; }
.ep-mp-none                  { font-size:.82rem; color:var(--mid-gray); margin:.25rem 0 0; }

/* ── Marketplaces dashboard (.ma-*) ──────────────────────────────────────────── */
.ma-grid                     { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
                               gap:1rem; }
.ma-card                     { background:var(--white); border:1px solid var(--pale-gray);
                               border-radius:var(--radius-md); padding:1.1rem 1.25rem; }
.ma-card__header             { display:flex; align-items:center; gap:.55rem; margin-bottom:.4rem; }
.ma-card__icon               { font-size:1.25rem; line-height:1; }
.ma-card__name               { font-weight:700; font-size:.9rem; }
.ma-card__status             { margin-left:auto; }
.ma-card__desc               { font-size:.78rem; color:var(--mid-gray); margin-bottom:.6rem; }
.ma-card__account            { font-size:.8rem; margin-bottom:.3rem; }
.ma-card__expires            { font-size:.73rem; color:var(--light-gray); margin-bottom:.6rem; }
.ma-card__actions            { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.ma-status                   { display:inline-block; border-radius:2rem; font-size:.68rem;
                               font-weight:700; padding:.15rem .5rem; }
.ma-status--connected        { background:#d1fae5; color:#065f46; }
.ma-status--expired          { background:#fff7ed; color:#c2410c; }
.ma-status--error            { background:#fee2e2; color:#dc2626; }
.ma-status--disconnected     { background:#f3f4f6; color:#9ca3af; }

/* ── Product publish page (.pp-*) ────────────────────────────────────────────── */
.pp-layout                   { display:grid; grid-template-columns:1fr 300px; gap:1.25rem;
                               align-items:start; }
@media (max-width: 860px)    { .pp-layout { grid-template-columns:1fr; } }
.pp-form                     { background:var(--white); border:1px solid var(--pale-gray);
                               border-radius:var(--radius-md); padding:1.25rem; }
.pp-preview                  { background:var(--white); border:1px solid var(--pale-gray);
                               border-radius:var(--radius-md); padding:1.1rem; position:sticky; top:1rem; }
.pp-field                    { margin-bottom:.85rem; }
.pp-field label              { display:block; font-size:.78rem; font-weight:600;
                               margin-bottom:.25rem; color:var(--near-black); }
.pp-chars                    { font-size:.68rem; color:var(--light-gray); float:right;
                               font-weight:400; }
.pp-meta-row                 { display:flex; gap:.6rem; }
.pp-meta-row .pp-field       { flex:1; min-width:0; }
.pp-action-bar               { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
                               padding:.75rem 1rem; background:var(--white);
                               border:1px solid var(--pale-gray); border-radius:var(--radius-md);
                               margin-bottom:.75rem; }
.pp-status-pill              { display:inline-flex; align-items:center; gap:.3rem;
                               border-radius:2rem; font-size:.72rem; font-weight:700;
                               padding:.2rem .55rem; }
.pp-status-pill--synced      { background:#d1fae5; color:#065f46; }
.pp-status-pill--unsynced    { background:#f3f4f6; color:#6b7280; }
.pp-status-pill--needs_update{ background:#fff7ed; color:#c2410c; }
.pp-status-pill--error       { background:#fee2e2; color:#dc2626; }

/* ── Products list — new indicators (Phase G) ────────────────────────────────── */
.prd-indicator--sync         { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }
.prd-indicator--block        { background:#fee2e2; color:#dc2626; border:1px solid #fecaca;
                               font-weight:800; }
.btn-danger-outline          { background:transparent; color:var(--danger);
                               border:1px solid var(--danger); }
.btn-danger-outline:hover    { background:var(--danger); color:var(--white); }