:root {
    font-family: var(--nx-font-family-sans);
    color: var(--nx-color-text);
    background: var(--nx-color-canvas);
    font-synthesis: none;
    --panel: color-mix(in srgb, var(--nx-color-surface) 82%, transparent);
    --panel-strong: var(--nx-color-surface-raised);
    --border: var(--nx-color-border);
    --muted: var(--nx-color-text-muted);
    --blue: var(--nx-color-accent-primary);
    --blue-strong: var(--nx-color-accent-primary-pressed);
    --cyan: var(--nx-color-accent-secondary);
    --success: var(--nx-color-success);
    --danger: var(--nx-color-danger);
    --shadow: var(--nx-shadow-lg);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--nx-color-canvas); }
body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background: var(--nx-gradient-canvas);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button, input { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, input:focus-visible, label.button:focus-within, .drop-zone:focus-within {
    outline: 3px solid var(--nx-color-focus);
    outline-offset: 3px;
}

.app-shell { width: min(1240px, calc(100% - 2rem)); margin: 0 auto; padding: 1.25rem 0 2.5rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 3.5rem; }
.brand { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .72rem; }
.brand-mark {
    width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: .82rem;
    font-weight: 900; font-size: 1.2rem; background: linear-gradient(145deg, #72a7ff, #275de0);
    box-shadow: 0 12px 30px rgba(37, 99, 235, .35);
}
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font-size: 1rem; letter-spacing: .02em; }
.brand small { color: #9fb0c8; font-size: .72rem; margin-top: .18rem; }
.privacy-badge {
    display: inline-flex; align-items: center; gap: .48rem; border: 1px solid rgba(65, 215, 167, .28);
    background: rgba(6, 95, 70, .18); color: #a7f3d0; border-radius: 999px; padding: .58rem .85rem;
    font-size: .78rem; font-weight: 700;
}
.privacy-badge span { color: var(--success); font-size: .6rem; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 340px); gap: 2rem; align-items: end; margin-bottom: 2rem; }
.eyebrow { margin: 0 0 .55rem; color: #73a7ff; letter-spacing: .15em; font-size: .7rem; font-weight: 850; }
h1, h2, h3, p { margin-top: 0; }
h1 {
    max-width: 850px;
    margin-bottom: 1.05rem;
    font-size: clamp(2.25rem, 4.8vw, 4rem);
    font-weight: var(--nx-font-weight-semibold);
    line-height: 1.08;
    letter-spacing: 0;
    word-spacing: .02em;
}
h1 span { color: #78a8ff; }
.hero-copy { max-width: 740px; color: #a5b4ca; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.7; margin-bottom: 0; }
.hero-proof {
    display: flex; gap: .75rem; align-items: center; padding: 1rem 1.05rem; border: 1px solid var(--border);
    background: rgba(13, 26, 45, .7); border-radius: 1rem; box-shadow: var(--shadow); min-width: 0;
}
.hero-proof > div { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.hero-proof strong { font-size: .88rem; }
.hero-proof small { color: #7f91aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proof-dot { width: .7rem; height: .7rem; border-radius: 50%; background: #64748b; box-shadow: 0 0 0 .3rem rgba(100,116,139,.12); flex: 0 0 auto; }
.proof-running { background: #60a5fa; animation: pulse 1.3s infinite; }
.proof-passed { background: var(--success); }
.proof-failed { background: var(--danger); }

.panel { border: 1px solid var(--border); background: var(--panel); border-radius: 1.3rem; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.upload-panel { padding: .75rem; margin-bottom: 3rem; }
.drop-zone {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
    min-height: 128px; padding: 1.15rem 1.25rem; border: 1px dashed rgba(96, 165, 250, .45); border-radius: .95rem;
    background: linear-gradient(90deg, rgba(37, 99, 235, .1), rgba(34, 211, 238, .035)); transition: .2s ease;
    overflow: hidden;
}
.drop-zone:hover, .drop-zone.is-dragging { border-color: #75a7ff; background: rgba(37, 99, 235, .16); transform: translateY(-1px); }
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 3; }
.file-input:disabled { cursor: wait; }
.drop-visual { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 1rem; background: rgba(37, 99, 235, .16); border: 1px solid rgba(96,165,250,.22); }
.upload-glyph { color: #8ab5ff; font-size: 1.8rem; line-height: 1; transform: translateY(-1px); }
.drop-copy h2 { margin-bottom: .35rem; font-size: 1.08rem; }
.drop-copy p { margin-bottom: 0; color: var(--muted); font-size: .86rem; }
.browse-button { padding: .72rem 1rem; border-radius: .75rem; background: #f8fafc; color: #0f172a; font-size: .82rem; font-weight: 850; white-space: nowrap; }
.upload-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; padding: .65rem .45rem 0; color: #74849a; font-size: .72rem; }
.upload-meta span::before { content: "✓"; color: #5eead4; margin-inline-end: .35rem; }

.workspace { margin-bottom: 2rem; }
.workspace-heading { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-end; margin-bottom: 1.15rem; }
.workspace-heading h2 { margin-bottom: .28rem; font-size: 1.55rem; letter-spacing: -.02em; }
.workspace-heading p:last-child { color: var(--muted); margin-bottom: 0; font-size: .82rem; }
.heading-actions { display: flex; gap: .65rem; }
.button {
    border: 1px solid transparent; border-radius: .78rem; padding: .72rem 1rem; font-weight: 800; font-size: .82rem;
    cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: .55rem; text-decoration: none;
    transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button.primary { background: linear-gradient(135deg, #3978ee, #2756cf); color: white; box-shadow: 0 12px 32px rgba(37, 99, 235, .28); }
.button.secondary { background: rgba(51, 65, 85, .68); border-color: rgba(148,163,184,.17); }
.button.ghost { background: transparent; border-color: rgba(148,163,184,.18); color: #cbd5e1; }
.button.full { width: 100%; padding: .88rem 1rem; }

.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.preview-card { padding: 1rem; }
.result-card { border-color: rgba(96, 165, 250, .25); }
.card-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.card-heading > div { display: flex; align-items: center; gap: .65rem; }
.card-heading h3, .section-heading h3 { margin: 0; font-size: .96rem; }
.step-number { width: 1.85rem; height: 1.85rem; display: grid; place-items: center; border-radius: .55rem; background: rgba(71, 111, 180, .17); color: #8ab5ff; font-size: .66rem; font-weight: 850; }
.state-chip, .format-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .55rem; border-radius: 999px; background: rgba(51,65,85,.55); color: #9eb0c8; font-size: .65rem; font-weight: 800; }
.state-chip.ready { background: rgba(6, 95, 70, .25); color: #8ff1ce; }
.state-chip.working { color: #bfdbfe; }
.preview-surface { min-height: clamp(270px, 35vw, 420px); border-radius: .95rem; display: grid; place-items: center; overflow: hidden; position: relative; }
.preview-surface img { width: min(64%, 290px); height: min(64%, 290px); object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,.16)); }
.surface-light { background: #eef2f7; color: #475569; }
.surface-dark { background: #030712; color: #64748b; }
.surface-transparent {
    color: #64748b; background-color: #fff;
    background-image: linear-gradient(45deg,#d8dde5 25%,transparent 25%),linear-gradient(-45deg,#d8dde5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d8dde5 75%),linear-gradient(-45deg,transparent 75%,#d8dde5 75%);
    background-size: 24px 24px; background-position: 0 0,0 12px,12px -12px,-12px 0;
}
.preview-placeholder { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: 1rem; }
.preview-placeholder > span { font-size: 1.8rem; color: #7398d8; }
.preview-placeholder strong { color: #7d8da4; }
.preview-placeholder small { max-width: 260px; }

.editor-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(285px, .75fr); gap: 1rem; }
.editor-panel, .compact-panel { padding: 1.15rem; }
.section-heading.compact { margin-bottom: .8rem; }
.section-heading .eyebrow { margin-bottom: .25rem; }
.muted-note { color: #718096; font-size: .68rem; }
.swatch-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .55rem; }
.detected-swatch { border: 1px solid rgba(148,163,184,.14); background: rgba(15,23,42,.5); color: inherit; border-radius: .8rem; padding: .58rem; display: flex; align-items: center; gap: .6rem; text-align: start; cursor: pointer; }
.detected-swatch:hover { border-color: rgba(96,165,250,.42); }
.swatch { width: 2.15rem; height: 2.15rem; border-radius: .62rem; border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); flex: 0 0 auto; }
.detected-swatch > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.detected-swatch strong { font-size: .74rem; }
.detected-swatch small { color: #74849a; font-size: .64rem; margin-top: .15rem; }
.empty-copy, .helper-copy { color: var(--muted); font-size: .78rem; line-height: 1.6; }
.divider { height: 1px; background: rgba(148,163,184,.1); margin: 1.2rem 0; }
.color-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.color-field { display: flex; flex-direction: column; gap: .5rem; }
.color-field > span, .field-label-row > span { font-size: .77rem; font-weight: 780; color: #c5d0df; }
.color-field em { font-style: normal; color: #64748b; font-size: .62rem; margin-inline-start: .3rem; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.color-input-shell { border: 1px solid rgba(148,163,184,.15); background: rgba(2,6,23,.35); border-radius: .8rem; padding: .58rem .65rem; display: flex; align-items: center; gap: .7rem; }
.color-input-shell.disabled { opacity: .5; }
.color-input-shell input[type="color"] { width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: .5rem; background: transparent; cursor: pointer; }
.color-input-shell code { color: #dbeafe; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; }
.toggle { display: inline-flex; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle span { width: 2.05rem; height: 1.1rem; border-radius: 999px; background: #334155; position: relative; transition: .18s; }
.toggle span::after { content: ""; position: absolute; width: .78rem; height: .78rem; border-radius: 50%; background: white; top: .16rem; left: .17rem; transition: .18s; }
.toggle input:checked + span { background: #3b82f6; }
.toggle input:checked + span::after { transform: translateX(.93rem); }
.preset-block { margin-top: 1rem; }
.field-caption { display: block; margin-bottom: .55rem; color: #8191a8; font-size: .68rem; font-weight: 780; }
.preset-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.preset-button { border: 1px solid rgba(148,163,184,.14); background: rgba(15,23,42,.52); color: #cbd5e1; border-radius: 999px; padding: .42rem .65rem; display: inline-flex; align-items: center; gap: .45rem; font-size: .68rem; cursor: pointer; }
.preset-button:hover { border-color: rgba(96,165,250,.42); }
.preset-colors { display: inline-flex; }
.preset-colors i { width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.preset-colors i + i { margin-inline-start: -.25rem; }
.side-stack { display: grid; gap: 1rem; align-content: start; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; padding: .32rem; background: rgba(2,6,23,.42); border-radius: .82rem; }
.segmented button { border: 0; background: transparent; color: #8292a8; border-radius: .62rem; padding: .58rem .3rem; font-size: .67rem; font-weight: 760; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .35rem; }
.segmented button.active { background: #1d2c42; color: #e2e8f0; box-shadow: 0 5px 15px rgba(0,0,0,.2); }
.segmented i { width: .72rem; height: .72rem; border-radius: .2rem; border: 1px solid rgba(148,163,184,.35); }
.bg-light { background: white; }.bg-dark { background: #020617; }.bg-transparent { background: repeating-conic-gradient(#cbd5e1 0 25%,#fff 0 50%) 50%/6px 6px; }
.export-panel { border-color: rgba(96,165,250,.25); }
.format-pill { color: #bfdbfe; background: rgba(37,99,235,.2); }
.file-name-preview { display: block; margin-top: .65rem; color: #687a92; text-align: center; overflow-wrap: anywhere; }

.status-region { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 1rem; background: rgba(13,26,45,.68); margin: 1rem 0 2rem; }
.status-icon { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: rgba(100,116,139,.18); color: #a8b5c7; font-weight: 900; }
.status-region strong { font-size: .78rem; }.status-region p { margin: .15rem 0 0; color: #8191a8; font-size: .72rem; }
.status-ready { border-color: rgba(65,215,167,.18); }.status-ready .status-icon { background: rgba(16,185,129,.16); color: #6ee7b7; }
.status-working .status-icon { color: #93c5fd; animation: pulse 1.25s infinite; }
.status-error { border-color: rgba(251,113,133,.28); background: rgba(76,5,25,.16); }.status-error .status-icon { background: rgba(244,63,94,.17); color: #fda4af; }
.status-actions { display: flex; gap: .5rem; }
.spinner { width: .85rem; height: .85rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.28); border-top-color: currentColor; animation: spin .7s linear infinite; display: inline-block; }
footer { display: flex; justify-content: space-between; gap: 1rem; color: #52647b; font-size: .68rem; padding: 0 .2rem; }
.not-found, .boot-shell { min-height: 100vh; display: grid; place-items: center; align-content: center; text-align: center; padding: 2rem; color: #dbeafe; }
.boot-mark { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 1rem; background: #2563eb; font-weight: 900; box-shadow: 0 15px 40px rgba(37,99,235,.35); }
.boot-shell p { color: #8da0ba; }
#blazor-error-ui { display: none; position: fixed; inset: auto 0 0 0; z-index: 1000; padding: 1rem; background: #7f1d1d; color: white; }
#blazor-error-ui .reload { color: white; margin-inline-start: 1rem; } #blazor-error-ui .dismiss { float: inline-end; border: 0; background: transparent; color: white; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .45; } }

@media (max-width: 900px) {
    .hero, .editor-grid { grid-template-columns: 1fr; }
    .hero-proof { max-width: 430px; }
    .preview-surface { min-height: 300px; }
}
@media (max-width: 680px) {
    .app-shell { width: min(100% - 1rem, 1240px); padding-top: .75rem; }
    .topbar { margin-bottom: 2.3rem; }.privacy-badge { font-size: 0; }.privacy-badge::after { content: "Local only"; font-size: .72rem; }
    h1 { font-size: clamp(2.05rem, 10.5vw, 3.1rem); line-height: 1.1; letter-spacing: 0; }
    .drop-zone { grid-template-columns: auto 1fr; }.browse-button { grid-column: 1 / -1; text-align: center; }
    .workspace-heading { align-items: flex-start; flex-direction: column; }.heading-actions { width: 100%; }.heading-actions > * { flex: 1; }
    .preview-grid, .color-field-grid { grid-template-columns: 1fr; }
    .preview-surface { min-height: 270px; }
    .status-region { grid-template-columns: auto 1fr; }.status-actions { grid-column: 1 / -1; }
    footer { flex-direction: column; }
}

/* Phase 15 accessibility, safety, and responsive hardening */
.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;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: .75rem;
    inset-inline-start: .75rem;
    transform: translateY(-180%);
    padding: .72rem 1rem;
    border-radius: .65rem;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.skip-link:focus { transform: translateY(0); }

.security-strip {
    margin-top: .72rem;
    padding: .8rem .9rem;
    border: 1px solid rgba(65, 215, 167, .24);
    border-radius: .85rem;
    background: rgba(6, 95, 70, .12);
    color: #c7f9e7;
    font-size: .75rem;
}
.security-strip > div { display: flex; align-items: center; gap: .5rem; }
.security-strip > div > span { color: var(--success); font-weight: 900; }
.security-strip ul { margin: .55rem 0 0 1.1rem; padding: 0; color: #9fd8c6; display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; }
.security-strip li { padding-inline-start: .1rem; }

button, input[type="color"], input[type="checkbox"], a.button { min-height: 44px; }
main:focus { outline: none; }
[aria-busy="true"] .privacy-badge { border-color: rgba(96, 165, 250, .38); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    .panel, .drop-zone, .privacy-badge, .security-strip { forced-color-adjust: auto; border: 1px solid CanvasText; }
    .proof-dot, .status-icon, .brand-mark { forced-color-adjust: none; }
}

@media (max-width: 680px) {
    .security-strip ul { display: block; }
    .security-strip li + li { margin-top: .35rem; }
}

/* Phase 16 multi-select and batch processing */
.product-nav {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 999px;
    background: rgba(15, 23, 42, .5);
}
.product-nav a {
    color: #8292a8;
    text-decoration: none;
    font-size: .7rem;
    font-weight: 780;
    padding: .45rem .72rem;
    border-radius: 999px;
}
.product-nav a.active,
.product-nav a:hover {
    color: #eff6ff;
    background: rgba(37, 99, 235, .28);
}
.batch-shell { width: min(1440px, calc(100% - 2rem)); }
.batch-hero { grid-template-columns: minmax(0, 1.45fr) minmax(350px, .75fr); }
.batch-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 1rem;
    gap: .65rem;
    align-self: end;
}
.batch-summary span {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .75rem;
    border-radius: .8rem;
    background: rgba(2, 6, 23, .28);
    text-align: center;
}
.batch-summary strong { font-size: 1.25rem; color: #dbeafe; }
.batch-summary small { color: #718096; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.batch-upload-panel { margin-bottom: 1rem; }
.batch-drop-zone { grid-template-columns: auto minmax(0, 1fr) auto; }
.batch-workspace { margin-top: 1rem; }
.batch-toolbar { padding: 1rem; margin-bottom: 1rem; }
.batch-toolbar h2,
.batch-grid-panel h2,
.batch-action-stack h2 { margin: 0; font-size: .98rem; }
.batch-controls {
    display: grid;
    grid-template-columns: auto minmax(130px, .55fr) minmax(150px, .65fr) auto;
    align-items: end;
    gap: .65rem;
}
.control-group { display: flex; flex-wrap: wrap; gap: .45rem; }
.batch-controls label,
.batch-name-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    color: #98a7bb;
    font-size: .66rem;
    font-weight: 760;
}
.batch-controls select,
.batch-name-field input {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: .68rem;
    background: rgba(2, 6, 23, .45);
    color: #dbeafe;
    padding: .62rem .68rem;
    font: inherit;
}
.danger-button { color: #fda4af; }
.batch-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 370px);
    gap: 1rem;
    align-items: start;
}
.batch-grid-panel { padding: 1rem; min-width: 0; }
.batch-grid {
    display: block;
    max-height: 820px;
    overflow: auto;
    padding-inline-end: .25rem;
}
.batch-card {
    display: grid;
    grid-template-columns: auto 74px minmax(0, 1fr) auto;
    align-items: center;
    gap: .72rem;
    padding: .65rem;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: .86rem;
    background: rgba(2, 6, 23, .24);
    min-height: 84px;
    margin-bottom: .55rem;
}
.batch-card.status-processing { border-color: rgba(96, 165, 250, .42); }
.batch-card.status-success { border-color: rgba(65, 215, 167, .28); }
.batch-card.status-warning { border-color: rgba(251, 191, 36, .3); }
.batch-card.status-failed,
.batch-card.status-cancelled { border-color: rgba(251, 113, 133, .34); }
.batch-card-select input { width: 1rem; height: 1rem; accent-color: #3b82f6; }
.batch-thumb {
    width: 74px;
    height: 64px;
    border-radius: .65rem;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.batch-thumb img { width: 72%; height: 72%; object-fit: contain; }
.batch-thumb > span { color: #64748b; font-size: 1.3rem; }
.batch-card-copy { min-width: 0; }
.batch-card-copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .76rem;
}
.batch-card-copy small { color: #718096; font-size: .62rem; }
.batch-card-copy p { margin: .25rem 0 0; color: #8998ad; font-size: .66rem; line-height: 1.35; }
.batch-card-state { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; min-width: 82px; }
.batch-card-state small { color: #64748b; font-size: .6rem; }
.state-chip.processing { color: #bfdbfe; background: rgba(37, 99, 235, .2); }
.state-chip.success { color: #8ff1ce; background: rgba(6, 95, 70, .25); }
.state-chip.warning { color: #fde68a; background: rgba(146, 64, 14, .26); }
.state-chip.failed,
.state-chip.cancelled { color: #fecdd3; background: rgba(159, 18, 57, .24); }
.button.mini { padding: .3rem .48rem; font-size: .61rem; }
.batch-action-stack { position: sticky; top: 1rem; }
.batch-colors { grid-template-columns: 1fr; }
.batch-secondary-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0;
    color: #a8b5c7;
    font-size: .7rem;
}
.batch-secondary-toggle input { accent-color: #3b82f6; }
.batch-name-field input { margin-top: .1rem; }
.batch-actions { display: grid; gap: .55rem; }
.batch-actions .section-heading { margin-bottom: .25rem; }
.status-region progress {
    display: block;
    width: min(420px, 100%);
    height: .5rem;
    margin-top: .5rem;
    accent-color: #3b82f6;
}
.status-region progress + small { color: #718096; font-size: .62rem; }

@media (max-width: 1080px) {
    .topbar { flex-wrap: wrap; }
    .product-nav { order: 3; width: 100%; justify-content: center; }
    .batch-hero,
    .batch-layout { grid-template-columns: 1fr; }
    .batch-action-stack { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .batch-controls { grid-template-columns: 1fr 1fr; }
    .control-group { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    .batch-shell { width: min(100% - 1rem, 1440px); }
    .batch-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .batch-controls,
    .batch-action-stack { grid-template-columns: 1fr; }
    .batch-card { grid-template-columns: auto 60px minmax(0, 1fr); }
    .batch-thumb { width: 60px; height: 56px; }
    .batch-card-state { grid-column: 2 / -1; flex-direction: row; justify-content: flex-end; align-items: center; }
}

/* Phase 17 Light/Dark Theme Generator */
.theme-shell { width: min(100% - 2rem, 1440px); }
.theme-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, .55fr); }
.theme-proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; padding: 1rem; }
.theme-proof span { padding: .9rem; border-radius: .9rem; background: rgba(15,23,42,.6); text-align: center; }
.theme-proof strong { display: block; font-size: 1.35rem; color: #e2e8f0; }
.theme-proof small { color: #7f91aa; }
.theme-upload-panel { margin-bottom: 1rem; }
.theme-layout { display: grid; grid-template-columns: minmax(360px, .62fr) minmax(0, 1.38fr); gap: 1rem; align-items: start; }
.theme-recipe-panel { position: sticky; top: 1rem; }
.text-field { display: grid; gap: .4rem; margin-bottom: .9rem; color: #8fa0b8; font-size: .72rem; }
.text-field input, .theme-options input[type="number"] { border: 1px solid var(--border); border-radius: .65rem; padding: .65rem .75rem; background: rgba(2,6,23,.46); color: #e2e8f0; }
.theme-palette-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.theme-palette { border: 1px solid var(--border); border-radius: .9rem; padding: .7rem; min-width: 0; }
.theme-palette legend { padding: 0 .35rem; color: #dbeafe; font-size: .72rem; font-weight: 800; }
.light-palette { background: rgba(248,250,252,.05); }
.dark-palette { background: rgba(2,6,23,.45); }
.theme-color-field { display: grid; gap: .28rem; margin-bottom: .5rem; color: #8fa0b8; font-size: .65rem; }
.theme-color-field .color-input-shell { grid-template-columns: 2rem 1fr; }
.theme-color-field input[type="color"] { width: 2rem; height: 2rem; min-height: 2rem; }
.theme-color-field code { font-size: .62rem; }
.theme-options { display: grid; gap: .75rem; margin: .9rem 0; }
.theme-quality-note { margin: 0; padding: .7rem .75rem; border: 1px solid rgba(59,130,246,.28); border-radius: .7rem; background: rgba(30,64,175,.12); color: #9fb3ce; font-size: .68rem; line-height: 1.45; }
.theme-quality-note strong { color: #bfdbfe; }
.theme-options > label:first-child { display: grid; gap: .35rem; color: #8fa0b8; font-size: .68rem; }
.theme-options .toggle { justify-content: flex-start; }
.theme-options .toggle b { color: #afbed1; font-size: .68rem; }
.theme-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.recipe-fingerprint { color: #64748b; font-size: .64rem; overflow-wrap: anywhere; }
.recipe-fingerprint code { color: #93c5fd; }
.theme-results-panel { min-height: 580px; }
.theme-empty { min-height: 420px; display: grid; place-items: center; align-content: center; gap: .6rem; color: #71839b; text-align: center; }
.theme-empty span { font-size: 3rem; color: #3b82f6; }
.theme-grid { display: grid; gap: .8rem; }
.theme-card { border: 1px solid var(--border); border-radius: 1rem; padding: .8rem; background: rgba(7,16,31,.62); }
.theme-card > header { display: flex; justify-content: space-between; gap: .8rem; align-items: center; margin-bottom: .75rem; }
.theme-card > header label { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.theme-card > header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-preview-triplet { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.theme-preview { margin: 0; min-width: 0; border: 1px solid rgba(148,163,184,.14); border-radius: .8rem; overflow: hidden; }
.theme-preview > div { min-height: 150px; display: grid; place-items: center; padding: .8rem; background-image: radial-gradient(circle at center, rgba(148,163,184,.08), transparent 65%); }
.theme-preview img { width: min(100%, 120px); max-height: 120px; object-fit: contain; }
.theme-preview figcaption { padding: .45rem; text-align: center; color: #8fa0b8; background: rgba(2,6,23,.72); font-size: .65rem; font-weight: 800; }
.original-preview > div { background: repeating-conic-gradient(rgba(148,163,184,.12) 0 25%, rgba(15,23,42,.18) 0 50%) 50%/18px 18px; }
.theme-item-message { margin: .65rem 0 .2rem; color: #8ea0b9; font-size: .7rem; }
.warning-text { color: #fbbf24; }
.theme-card-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem; }
@media (max-width: 1080px) { .theme-layout { grid-template-columns: 1fr; } .theme-recipe-panel { position: static; } }
@media (max-width: 720px) { .theme-palette-columns, .theme-preview-triplet, .theme-actions { grid-template-columns: 1fr; } .theme-hero { grid-template-columns: 1fr; } }

/* Phase 18 Icon State Generator */
.state-shell { width: min(100% - 2rem, 1560px); }
.state-base-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.state-editor-list { display: grid; gap: .65rem; margin: .9rem 0; }
.state-editor-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    border: 1px solid rgba(148,163,184,.14);
    border-radius: .9rem;
    padding: .72rem;
    background: rgba(2,6,23,.24);
}
.state-editor-card legend { padding: 0 .35rem; color: #dbeafe; font-size: .7rem; font-weight: 800; }
.state-editor-card legend label { display: flex; gap: .45rem; align-items: center; }
.state-editor-card input[type="checkbox"] { accent-color: #3b82f6; }
.state-editor-card > label { display: grid; gap: .28rem; color: #8fa0b8; font-size: .62rem; }
.state-editor-card input[type="number"] {
    min-width: 0;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: .58rem;
    padding: .52rem .58rem;
    background: rgba(2,6,23,.46);
    color: #e2e8f0;
}
.state-result-list { display: grid; gap: .8rem; }
.state-result-card { overflow: hidden; }
.state-preview-matrix {
    display: grid;
    grid-template-columns: repeat(4, minmax(118px, 1fr));
    gap: .55rem;
    overflow-x: auto;
    padding-bottom: .2rem;
}
.state-preview-matrix .theme-preview > div { min-height: 116px; }
.state-preview-matrix .theme-preview img { max-width: 96px; max-height: 96px; }
.state-preview-matrix .theme-preview .button.mini { width: calc(100% - .7rem); margin: .35rem; }
.state-preview-disabled > div { background: rgba(148,163,184,.06); }
.state-preview-focus { border-color: rgba(34,211,238,.32); box-shadow: inset 0 0 0 1px rgba(34,211,238,.08); }
.state-preview-selected { border-color: rgba(59,130,246,.28); }
@media (max-width: 1080px) { .state-preview-matrix { grid-template-columns: repeat(3, minmax(118px, 1fr)); } }
@media (max-width: 720px) {
    .state-base-colors, .state-editor-card { grid-template-columns: 1fr; }
    .state-preview-matrix { grid-template-columns: repeat(2, minmax(116px, 1fr)); }
}


/* Phase 19 export packs */
.pack-layout{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:1.25rem;margin-top:1.25rem}.pack-recipe-panel,.pack-files-panel{min-width:0}.pack-name-field{display:grid;gap:.45rem;margin-bottom:1rem}.pack-name-field input{width:100%}.pack-options{display:flex;flex-wrap:wrap;gap:.65rem 1rem;border:1px solid var(--border);border-radius:14px;padding:1rem;margin:0 0 .85rem}.pack-options legend{padding:0 .45rem;color:var(--muted);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}.pack-options label{display:flex;align-items:center;gap:.45rem}.pack-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}.pack-file-list{display:grid;gap:.65rem}.pack-file-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;align-items:center;padding:.85rem;border:1px solid var(--border);border-radius:12px;background:rgba(2,6,23,.24)}.pack-file-row small{grid-column:2/-1;color:var(--muted)}.pack-file-name{overflow-wrap:anywhere;font-weight:650}.progress-track{height:8px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;min-width:180px}.progress-track span{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#22d3ee);transition:width .2s ease}@media(max-width:900px){.pack-layout{grid-template-columns:1fr}}
.pack-shell .batch-summary{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:900px){.pack-shell .batch-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.pack-shell .batch-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Phase 20 portable projects */
.projects-shell{max-width:1500px}.projects-grid{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(420px,1.15fr);gap:1.25rem}.project-create-panel,.project-list-panel,.current-project-panel{padding:1.35rem}.project-create-panel label,.current-project-panel label,.project-import{display:grid;gap:.45rem;margin:.9rem 0}.project-create-panel input,.project-create-panel textarea,.current-project-panel input{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:.75rem;padding:.8rem;background:var(--surface);color:inherit}.project-actions{display:flex;gap:.65rem}.project-actions.wrap{flex-wrap:wrap}.project-list{display:grid;gap:.65rem}.project-row{display:flex;justify-content:space-between;gap:1rem;text-align:left;width:100%;border:1px solid var(--border);border-radius:.9rem;padding:.9rem;background:var(--surface);color:inherit}.project-row.selected{outline:2px solid var(--accent)}.project-row span{display:grid;gap:.2rem}.project-row small,.project-row time{color:var(--muted)}.project-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:1rem 0}.project-facts span{display:grid;padding:.9rem;border:1px solid var(--border);border-radius:.8rem}.project-facts small{color:var(--muted)}@media(max-width:900px){.projects-grid{grid-template-columns:1fr}.project-facts{grid-template-columns:repeat(2,1fr)}}

/* Phase 21 SVG Doctor */
.doctor-shell{width:min(100% - 2rem,1560px)}.doctor-hero{grid-template-columns:minmax(0,1fr) minmax(440px,.75fr)}.doctor-controls{display:grid;grid-template-columns:minmax(260px,1fr) minmax(220px,.55fr);gap:1rem;align-items:center;margin-bottom:1rem;padding:1.25rem}.doctor-controls h2{margin:.15rem 0}.doctor-controls p{margin:.3rem 0;color:var(--muted)}.doctor-file-picker{display:grid;gap:.45rem;padding:.85rem;border:1px dashed rgba(96,165,250,.45);border-radius:.9rem;background:rgba(37,99,235,.08)}.doctor-file-picker>span{font-weight:800}.doctor-option-grid{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem}.doctor-control-actions{grid-column:1/-1;display:flex;gap:.65rem}.doctor-empty{min-height:330px;display:grid;place-items:center;align-content:center;text-align:center;gap:.55rem}.doctor-empty>span{font-size:3rem;color:#38bdf8}.doctor-empty h2,.doctor-empty p{margin:0}.doctor-empty p{color:var(--muted)}.doctor-results{display:grid;gap:1rem}.doctor-card{padding:1.25rem;overflow:hidden}.doctor-card.doctor-healthy{border-color:rgba(34,197,94,.25)}.doctor-card.doctor-changed{border-color:rgba(56,189,248,.32)}.doctor-card.doctor-blocked,.doctor-card.doctor-failed{border-color:rgba(248,113,113,.38)}.doctor-card-header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.doctor-card-header h2{margin:.1rem 0}.doctor-card-header p{margin:.25rem 0;color:var(--muted)}.doctor-badges{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}.doctor-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin:1rem 0}.doctor-facts span{display:grid;gap:.2rem;padding:.8rem;border:1px solid var(--border);border-radius:.8rem;background:rgba(2,6,23,.24)}.doctor-facts strong{overflow-wrap:anywhere}.doctor-facts small{color:var(--muted)}.doctor-preview-row{display:grid;grid-template-columns:minmax(220px,.55fr) minmax(280px,1fr);gap:1rem;align-items:stretch}.doctor-preview{margin:0;border:1px solid var(--border);border-radius:.9rem;overflow:hidden}.doctor-preview>div{min-height:210px;display:grid;place-items:center;padding:1rem;background:repeating-conic-gradient(rgba(148,163,184,.12) 0 25%,rgba(15,23,42,.18) 0 50%) 50%/18px 18px}.doctor-preview img{max-width:180px;max-height:180px}.doctor-preview figcaption{padding:.55rem;text-align:center;color:var(--muted);background:rgba(2,6,23,.7)}.doctor-downloads{display:flex;flex-wrap:wrap;gap:.65rem;align-content:center;padding:1rem;border:1px solid var(--border);border-radius:.9rem;background:rgba(2,6,23,.22)}.doctor-downloads p{flex-basis:100%;margin:0;color:var(--muted)}.doctor-blocked-note{display:flex;flex-wrap:wrap;gap:.55rem 1rem;align-items:center;padding:1rem;border:1px solid rgba(248,113,113,.35);border-radius:.9rem;background:rgba(127,29,29,.12)}.doctor-blocked-note strong,.doctor-blocked-note span{flex-basis:100%}.doctor-blocked-note span{color:#fca5a5}.doctor-issue-list{display:grid;gap:.55rem;margin-top:1rem}.doctor-issue{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;padding:.85rem;border:1px solid var(--border);border-left-width:4px;border-radius:.75rem;background:rgba(2,6,23,.28)}.doctor-issue.severity-info{border-left-color:#60a5fa}.doctor-issue.severity-warning{border-left-color:#fbbf24}.doctor-issue.severity-error,.doctor-issue.severity-security{border-left-color:#f87171}.doctor-issue strong{display:block;margin:.2rem 0}.doctor-issue p{margin:.25rem 0;color:#cbd5e1}.doctor-issue small{color:var(--muted)}.doctor-code{display:inline-block;padding:.16rem .38rem;border-radius:.35rem;background:rgba(148,163,184,.12);font:600 .65rem ui-monospace,SFMono-Regular,Consolas,monospace;color:#93c5fd}.doctor-issue-state{display:grid;gap:.25rem;justify-items:end;text-align:right}.doctor-issue-state span{font-weight:800}.doctor-issue-state b{color:#cbd5e1}.doctor-diff{margin-top:1rem;border-top:1px solid var(--border);padding-top:.8rem}.doctor-diff summary{cursor:pointer;font-weight:800}.doctor-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:.8rem}.doctor-source-grid section{min-width:0}.doctor-source-grid h3{font-size:.8rem;color:var(--muted)}.doctor-source-grid pre{max-height:420px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:.85rem;border:1px solid var(--border);border-radius:.75rem;background:#020617;color:#cbd5e1;font:500 .68rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}.state-chip.failed{border-color:rgba(248,113,113,.35);color:#fca5a5;background:rgba(127,29,29,.14)}
@media(max-width:1050px){.doctor-hero{grid-template-columns:1fr}.doctor-controls{grid-template-columns:1fr}.doctor-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.doctor-preview-row{grid-template-columns:1fr}.doctor-source-grid{grid-template-columns:1fr}}
@media(max-width:680px){.doctor-card-header,.doctor-issue{grid-template-columns:1fr;display:grid}.doctor-badges{justify-content:flex-start}.doctor-issue-state{justify-items:start;text-align:left}.doctor-facts{grid-template-columns:1fr}.doctor-control-actions{flex-direction:column}}
.doctor-preview-row{grid-template-columns:minmax(440px,1.2fr) minmax(280px,.8fr)}.doctor-preview-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.doctor-preview-blocked{max-width:13rem;text-align:center;color:#fca5a5;font-weight:800}.doctor-preview-pair .doctor-preview>div{min-height:190px}.doctor-preview-pair .doctor-preview img{max-width:150px;max-height:150px}@media(max-width:720px){.doctor-preview-pair{grid-template-columns:1fr}}
@media(max-width:1050px){.doctor-preview-row{grid-template-columns:1fr}}

/* Phase 22 — Consistency Analyzer and Pixel-Perfect Preview Lab */
.analyzer-shell{width:min(100% - 2rem,1640px)}.analyzer-hero{grid-template-columns:minmax(0,1fr) minmax(480px,.78fr)}.analyzer-controls{display:grid;grid-template-columns:minmax(280px,1fr) minmax(230px,.55fr);gap:1rem;align-items:center;padding:1.25rem;margin-bottom:1rem}.analyzer-input-copy h2{margin:.15rem 0}.analyzer-input-copy p{color:var(--muted);margin:.35rem 0}.analyzer-option-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(160px,.35fr)) minmax(280px,1fr);gap:.75rem}.analyzer-option-grid label,.preview-lab-options label{display:grid;gap:.4rem;color:var(--muted);font-size:.78rem}.analyzer-option-grid input,.preview-lab-options select{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:.7rem;padding:.72rem;background:var(--surface);color:inherit}.analyzer-empty{min-height:330px;display:grid;place-items:center;align-content:center;text-align:center;gap:.5rem}.analyzer-empty>span{font-size:3.2rem;color:#38bdf8}.analyzer-empty h2,.analyzer-empty p{margin:0}.analyzer-empty p{color:var(--muted)}.analyzer-dashboard{display:grid;grid-template-columns:minmax(330px,.72fr) minmax(0,1.55fr);gap:1rem;align-items:start}.analyzer-result-list{padding:1rem;position:sticky;top:.75rem;max-height:calc(100vh - 1.5rem);overflow:auto}.analyzer-result-list>header,.preview-lab-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.analyzer-result-list h2,.preview-lab h2{margin:.15rem 0}.analyzer-items{display:grid;gap:.55rem;margin-top:1rem}.analyzer-item{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;align-items:center;text-align:left;border:1px solid var(--border);border-radius:.85rem;padding:.75rem;background:rgba(2,6,23,.26);color:inherit}.analyzer-item:hover,.analyzer-item.selected{border-color:rgba(56,189,248,.6);background:rgba(14,165,233,.1)}.analyzer-item span:nth-child(2){display:grid;gap:.2rem;min-width:0}.analyzer-item strong{overflow-wrap:anywhere}.analyzer-item small{color:var(--muted)}.score-ring{display:grid;place-items:center;width:2.65rem;height:2.65rem;border-radius:50%;font-weight:900;border:3px solid}.score-good{border-color:#22c55e;color:#86efac}.score-warning{border-color:#f59e0b;color:#fde68a}.score-bad{border-color:#ef4444;color:#fca5a5}.preview-lab{padding:1.15rem;min-width:0}.preview-mode-tabs{display:flex;flex-wrap:wrap;gap:.4rem}.preview-mode-tabs button{border:1px solid var(--border);border-radius:.65rem;padding:.55rem .7rem;background:rgba(2,6,23,.28);color:inherit}.preview-mode-tabs button.active{border-color:#38bdf8;background:rgba(14,165,233,.18);color:#bae6fd}.preview-lab-options{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr)) auto minmax(120px,.65fr);gap:.65rem;align-items:end;margin:1rem 0}.preview-lab-options .toggle{display:flex;align-items:center;min-height:44px}.preview-stage{position:relative;min-height:440px;display:grid;place-items:center;overflow:auto;border:1px solid var(--border);border-radius:1rem;background-color:#0b1220;background-size:18px 18px}.preview-stage.background-checker,.small-size-strip .background-checker{background-image:linear-gradient(45deg,rgba(148,163,184,.14) 25%,transparent 25%),linear-gradient(-45deg,rgba(148,163,184,.14) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(148,163,184,.14) 75%),linear-gradient(-45deg,transparent 75%,rgba(148,163,184,.14) 75%);background-position:0 0,0 9px,9px -9px,-9px 0}.background-light{background-color:#fff!important;background-image:none!important}.background-dark{background-color:#0f172a!important;background-image:none!important}.preview-stage.with-grid:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(56,189,248,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.18) 1px,transparent 1px);background-size:calc(1px * var(--lab-zoom)) calc(1px * var(--lab-zoom));background-position:center}.preview-stage>img,.preview-stack img,.preview-side img{width:calc(24px * var(--lab-zoom));height:calc(24px * var(--lab-zoom));object-fit:contain;image-rendering:auto}.preview-side{display:grid;grid-template-columns:repeat(2,minmax(230px,1fr));gap:1rem;width:100%;padding:1rem}.preview-side figure{margin:0;display:grid;place-items:center;gap:.55rem;min-height:360px;border:1px solid var(--border);border-radius:.85rem;background:rgba(2,6,23,.22)}.preview-side figcaption{color:var(--muted)}.preview-stack{position:relative;width:calc(24px * var(--lab-zoom));height:calc(24px * var(--lab-zoom))}.preview-stack img{position:absolute;inset:0}.preview-stack.overlay img:last-child{opacity:.5}.preview-stack.difference img:last-child{mix-blend-mode:difference}.preview-blocked{display:grid;gap:.35rem;text-align:center;color:#fca5a5}.small-size-strip{display:flex;flex-wrap:wrap;gap:.65rem;margin:1rem 0}.small-size-strip figure{margin:0;display:grid;gap:.45rem;place-items:center;min-width:90px;padding:.75rem;border:1px solid var(--border);border-radius:.8rem;background-size:12px 12px}.small-size-strip figure>div{display:grid;place-items:center}.small-size-strip img{max-width:100%;max-height:100%;object-fit:contain}.small-size-strip figcaption{color:var(--muted);font-size:.75rem}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}.metric-grid span{display:grid;gap:.2rem;padding:.8rem;border:1px solid var(--border);border-radius:.75rem;background:rgba(2,6,23,.24)}.metric-grid small{color:var(--muted)}.finding-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin-top:1rem}.finding-columns>section{min-width:0}.finding-columns h3{margin:.25rem 0 .65rem}.consistency-finding{display:grid;gap:.3rem;padding:.75rem;margin-bottom:.55rem;border:1px solid var(--border);border-left-width:4px;border-radius:.7rem;background:rgba(2,6,23,.25)}.consistency-finding.severity-info{border-left-color:#60a5fa}.consistency-finding.severity-warning{border-left-color:#fbbf24}.consistency-finding.severity-error{border-left-color:#f87171}.consistency-finding p{margin:0;color:#cbd5e1}.consistency-finding small{color:var(--muted);overflow-wrap:anywhere}.finding-empty{color:var(--muted);padding:.8rem;border:1px dashed var(--border);border-radius:.7rem}@media(max-width:1180px){.analyzer-hero,.analyzer-dashboard{grid-template-columns:1fr}.analyzer-result-list{position:static;max-height:none}.preview-lab-options{grid-template-columns:repeat(2,minmax(140px,1fr))}.analyzer-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analyzer-option-grid .palette-field{grid-column:1/-1}}@media(max-width:760px){.analyzer-controls{grid-template-columns:1fr}.analyzer-option-grid,.preview-lab-options,.metric-grid,.finding-columns,.preview-side{grid-template-columns:1fr}.preview-stage{min-height:360px}.preview-stage>img,.preview-stack img,.preview-side img{max-width:88vw;max-height:320px}.preview-lab-header{display:grid}.analyzer-item{grid-template-columns:auto minmax(0,1fr)}.analyzer-item>.state-chip{grid-column:2}.doctor-control-actions{grid-column:1/-1;flex-direction:column}}


/* Phase 26 — Nexamas Design System host adapter.
   Existing dark component detail is retained as the approved IconStudio reference.
   The semantic light adapter below changes product chrome only; page layout remains Phase 27. */
.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:.65rem;min-width:max-content}.iconstudio-theme-toggle{min-height:2.35rem;padding:0 .78rem;background:rgba(13,26,45,.68);box-shadow:none;font-size:.72rem}.iconstudio-theme-toggle:hover{background:var(--nx-color-surface-hover)}
html[data-nx-theme="light"] body{color:var(--nx-color-text);background:var(--nx-gradient-canvas)}
html[data-nx-theme="light"] .brand small,
html[data-nx-theme="light"] .hero-copy,
html[data-nx-theme="light"] .workspace-heading p:last-child,
html[data-nx-theme="light"] .empty-copy,
html[data-nx-theme="light"] .helper-copy,
html[data-nx-theme="light"] .muted-note{color:var(--nx-color-text-muted)}
html[data-nx-theme="light"] h1 span,
html[data-nx-theme="light"] .eyebrow,
html[data-nx-theme="light"] .upload-glyph,
html[data-nx-theme="light"] .step-number{color:var(--nx-color-accent-primary)}
html[data-nx-theme="light"] .brand-mark{background:var(--nx-gradient-brand);box-shadow:var(--nx-shadow-sm)}
html[data-nx-theme="light"] .product-nav{border-color:var(--nx-color-border);background:color-mix(in srgb,var(--nx-color-surface) 86%,transparent)}
html[data-nx-theme="light"] .product-nav a{color:var(--nx-color-text-muted)}
html[data-nx-theme="light"] .product-nav a:hover{color:var(--nx-color-text);background:var(--nx-color-surface-hover)}
html[data-nx-theme="light"] .product-nav a.active{color:var(--nx-color-text-on-accent);background:var(--nx-color-accent-primary)}
html[data-nx-theme="light"] .privacy-badge{color:var(--nx-color-success);border-color:color-mix(in srgb,var(--nx-color-success) 32%,transparent);background:var(--nx-color-success-soft)}
html[data-nx-theme="light"] .iconstudio-theme-toggle{color:var(--nx-color-text);border-color:var(--nx-color-border);background:var(--nx-color-surface)}
html[data-nx-theme="light"] .panel,
html[data-nx-theme="light"] .hero-proof,
html[data-nx-theme="light"] .batch-summary,
html[data-nx-theme="light"] .theme-proof{color:var(--nx-color-text);border-color:var(--nx-color-border);background:color-mix(in srgb,var(--nx-color-surface) 92%,transparent);box-shadow:var(--nx-shadow-md)}
html[data-nx-theme="light"] .drop-zone{border-color:var(--nx-color-border-interactive);background:linear-gradient(90deg,color-mix(in srgb,var(--nx-color-accent-primary) 10%,transparent),color-mix(in srgb,var(--nx-color-accent-secondary) 5%,transparent))}
html[data-nx-theme="light"] .drop-zone:hover,
html[data-nx-theme="light"] .drop-zone.is-dragging{border-color:var(--nx-color-accent-primary);background:var(--nx-color-surface-selected)}
html[data-nx-theme="light"] .drop-visual,
html[data-nx-theme="light"] .step-number{border-color:color-mix(in srgb,var(--nx-color-accent-primary) 24%,transparent);background:color-mix(in srgb,var(--nx-color-accent-primary) 12%,transparent)}
html[data-nx-theme="light"] .browse-button{color:var(--nx-color-text-on-accent);background:var(--nx-color-accent-primary)}
html[data-nx-theme="light"] .button.primary{color:var(--nx-color-text-on-accent);background:var(--nx-gradient-brand);box-shadow:var(--nx-shadow-sm)}
html[data-nx-theme="light"] .button.secondary,
html[data-nx-theme="light"] .button.ghost{color:var(--nx-color-text);border-color:var(--nx-color-border);background:var(--nx-color-surface-interactive)}
html[data-nx-theme="light"] .button.ghost{background:transparent}
html[data-nx-theme="light"] .state-chip,
html[data-nx-theme="light"] .format-pill{color:var(--nx-color-text-muted);background:var(--nx-color-surface-soft)}
html[data-nx-theme="light"] .state-chip.ready,
html[data-nx-theme="light"] .state-chip.success{color:var(--nx-color-success);background:var(--nx-color-success-soft)}
html[data-nx-theme="light"] .state-chip.warning{color:var(--nx-color-warning);background:var(--nx-color-warning-soft)}
html[data-nx-theme="light"] .state-chip.failed,
html[data-nx-theme="light"] .state-chip.cancelled{color:var(--nx-color-danger);background:var(--nx-color-danger-soft)}
html[data-nx-theme="light"] .detected-swatch,
html[data-nx-theme="light"] .batch-card,
html[data-nx-theme="light"] .theme-card,
html[data-nx-theme="light"] .state-editor-card,
html[data-nx-theme="light"] .analyzer-item,
html[data-nx-theme="light"] .metric-grid span,
html[data-nx-theme="light"] .consistency-finding,
html[data-nx-theme="light"] .doctor-issue{color:var(--nx-color-text);border-color:var(--nx-color-border);background:var(--nx-color-surface-soft)}
html[data-nx-theme="light"] input,
html[data-nx-theme="light"] select,
html[data-nx-theme="light"] textarea,
html[data-nx-theme="light"] .text-field input,
html[data-nx-theme="light"] .theme-options input[type="number"],
html[data-nx-theme="light"] .state-editor-card input[type="number"],
html[data-nx-theme="light"] .analyzer-option-grid input,
html[data-nx-theme="light"] .preview-lab-options select{color:var(--nx-color-text);border-color:var(--nx-color-border);background:var(--nx-color-surface-interactive)}
html[data-nx-theme="light"] .theme-proof span,
html[data-nx-theme="light"] .batch-summary span{background:var(--nx-color-surface-soft)}
html[data-nx-theme="light"] .theme-proof strong,
html[data-nx-theme="light"] .batch-summary strong{color:var(--nx-color-text-strong)}
html[data-nx-theme="light"] .theme-preview figcaption{color:var(--nx-color-text-muted);background:var(--nx-color-surface-soft)}
html[data-nx-theme="light"] .theme-card,
html[data-nx-theme="light"] .analyzer-item,
html[data-nx-theme="light"] .doctor-issue,
html[data-nx-theme="light"] .consistency-finding{box-shadow:none}
html[data-nx-theme="light"] .analyzer-item:hover,
html[data-nx-theme="light"] .analyzer-item.selected{border-color:var(--nx-color-border-interactive);background:var(--nx-color-surface-selected)}
html[data-nx-theme="light"] .preview-mode-tabs button{color:var(--nx-color-text);border-color:var(--nx-color-border);background:var(--nx-color-surface-soft)}
html[data-nx-theme="light"] .preview-mode-tabs button.active{color:var(--nx-color-accent-primary);border-color:var(--nx-color-accent-primary);background:var(--nx-color-info-soft)}
html[data-nx-theme="light"] .doctor-source-grid pre{color:var(--nx-color-text);border-color:var(--nx-color-border);background:var(--nx-color-surface-soft)}
html[data-nx-theme="light"] .status-region,
html[data-nx-theme="light"] .status-region.status-error{color:var(--nx-color-text);border-color:var(--nx-color-border);background:var(--nx-color-surface-soft)}
html[data-nx-theme="light"] #blazor-error-ui{color:var(--nx-color-text);border-color:var(--nx-color-danger);background:var(--nx-color-danger-soft)}
@media(max-width:1080px){.topbar-actions{margin-inline-start:auto}.product-nav{order:3}.iconstudio-theme-toggle [data-nx-theme-label]{display:none}.iconstudio-theme-toggle{width:2.35rem;padding:0}}
@media(max-width:620px){.privacy-badge{display:none}.topbar{gap:.6rem}.topbar-actions{gap:.35rem}}

/* Phase 26 design-system reference route */
.design-system-shell{width:min(100% - 2rem,1440px)}.design-system-hero{grid-template-columns:minmax(0,1fr) minmax(320px,.6fr)}.ds-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;padding:1rem}.ds-summary span{display:grid;gap:.2rem;padding:1rem;border-radius:var(--nx-radius-lg);background:var(--nx-color-surface-soft);text-align:center}.ds-summary strong{font-size:1.5rem;color:var(--nx-color-text-strong)}.ds-summary small{color:var(--nx-color-text-muted)}.ds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:1rem}.ds-card{padding:1.35rem}.ds-card h2{margin:1rem 0 .5rem}.ds-card>p,.ds-alerts p{color:var(--nx-color-text-muted);line-height:1.55}.ds-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}.ds-field{display:grid;gap:.4rem;color:var(--nx-color-text-muted);font-size:.75rem;font-weight:var(--nx-font-weight-bold)}.ds-alerts{display:grid;gap:.6rem;margin-top:1rem}.ds-alerts p{margin:.15rem 0 0}.ds-token-panel{padding:1.2rem}.ds-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.ds-swatch{overflow:hidden;display:flex;flex-direction:column;min-height:9rem;border:1px solid var(--nx-color-border);border-radius:var(--nx-radius-lg);background:var(--nx-color-surface)}.ds-swatch span{display:block;height:3.4rem;background:var(--ds-color)}.ds-swatch strong{padding:.8rem .8rem .1rem}.ds-swatch small{padding:0 .8rem .8rem;color:var(--nx-color-text-muted);line-height:1.4}.ds-accent{--ds-color:var(--nx-color-accent-primary)}.ds-secondary{--ds-color:var(--nx-color-accent-secondary)}.ds-surface{--ds-color:var(--nx-color-surface)}.ds-soft{--ds-color:var(--nx-color-surface-soft)}.ds-success{--ds-color:var(--nx-color-success)}.ds-danger{--ds-color:var(--nx-color-danger)}
@media(max-width:860px){.design-system-hero,.ds-grid{grid-template-columns:1fr}.ds-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.ds-swatches{grid-template-columns:1fr}}

/* Phase 27 — Web visual redesign and navigation map.
   Product logic remains in Application/Core. This layer reorganizes only the Web host. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 72% 8%, color-mix(in srgb, var(--nx-color-accent-secondary) 8%, transparent), transparent 28rem),
        radial-gradient(circle at 28% 28%, color-mix(in srgb, var(--nx-color-accent-primary) 9%, transparent), transparent 32rem);
    opacity: .9;
}

.topbar-brand-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.topbar-context {
    display: grid;
    gap: .25rem;
    padding: .9rem;
    border: 1px solid color-mix(in srgb, var(--nx-color-border) 78%, transparent);
    border-radius: var(--nx-radius-lg);
    background: color-mix(in srgb, var(--nx-color-surface-soft) 72%, transparent);
}
.topbar-context .context-label,
.nav-group-label {
    color: var(--nx-color-text-muted);
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.topbar-context strong { color: var(--nx-color-text-strong); font-size: .9rem; }
.topbar-context small { color: var(--nx-color-text-muted); font-size: .7rem; line-height: 1.45; }
.nav-group { display: grid; gap: .42rem; }
.nav-group + .nav-group { margin-top: .75rem; }
.nav-group-links { display: grid; gap: .3rem; }
.product-nav .nav-icon {
    width: 1.65rem;
    height: 1.65rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--nx-color-border) 82%, transparent);
    border-radius: .52rem;
    color: var(--nx-color-text-muted);
    background: color-mix(in srgb, var(--nx-color-surface-soft) 78%, transparent);
    font-size: .66rem;
    font-weight: 900;
}
.product-nav a.active .nav-icon {
    color: var(--nx-color-text-on-accent);
    border-color: transparent;
    background: color-mix(in srgb, white 18%, transparent);
}

.workflow-map {
    display: grid;
    grid-template-columns: minmax(150px, .42fr) minmax(0, 1.58fr);
    gap: 1rem;
    align-items: center;
    padding: .85rem;
    margin: 0 0 1rem;
    box-shadow: var(--nx-shadow-sm);
}
.workflow-map-intro { display: grid; gap: .16rem; padding: .2rem .35rem; }
.workflow-map-intro > span {
    color: var(--nx-color-accent-secondary);
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.workflow-map-intro strong { color: var(--nx-color-text-strong); font-size: .82rem; line-height: 1.35; }
.workflow-map ol {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
    margin: 0;
    padding: 0;
}
.workflow-map li {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .55rem;
    align-items: center;
    min-height: 3.45rem;
    padding: .55rem .62rem;
    border: 1px solid color-mix(in srgb, var(--nx-color-border) 78%, transparent);
    border-radius: .82rem;
    background: color-mix(in srgb, var(--nx-color-surface-soft) 64%, transparent);
}
.workflow-map li.current {
    border-color: color-mix(in srgb, var(--nx-color-accent-primary) 58%, var(--nx-color-border));
    background: color-mix(in srgb, var(--nx-color-accent-primary) 14%, var(--nx-color-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx-color-accent-primary) 12%, transparent);
}
.workflow-map li.complete { border-color: color-mix(in srgb, var(--nx-color-success) 32%, var(--nx-color-border)); }
.workflow-step-number {
    width: 1.85rem;
    height: 1.85rem;
    display: grid;
    place-items: center;
    border-radius: .56rem;
    color: var(--nx-color-text-muted);
    background: color-mix(in srgb, var(--nx-color-surface) 88%, transparent);
    font-size: .6rem;
    font-weight: 900;
}
.workflow-map li.current .workflow-step-number { color: var(--nx-color-text-on-accent); background: var(--nx-color-accent-primary); }
.workflow-map li.complete .workflow-step-number { color: var(--nx-color-success); background: var(--nx-color-success-soft); }
.workflow-map li > span:last-child { min-width: 0; display: grid; gap: .1rem; }
.workflow-map li strong { overflow: hidden; color: var(--nx-color-text-strong); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.workflow-map li small { overflow: hidden; color: var(--nx-color-text-muted); font-size: .59rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }

.app-shell .hero {
    position: relative;
    overflow: hidden;
    align-items: center;
    margin: 0 0 1rem;
    padding: clamp(1.15rem, 2vw, 1.8rem);
    border: 1px solid color-mix(in srgb, var(--nx-color-border) 86%, transparent);
    border-radius: 1.35rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--nx-color-surface-raised) 92%, transparent), color-mix(in srgb, var(--nx-color-surface) 76%, transparent)),
        var(--nx-gradient-canvas);
    box-shadow: var(--nx-shadow-md);
}
.app-shell .hero::after {
    content: "";
    position: absolute;
    width: 19rem;
    height: 19rem;
    inset-inline-end: -8rem;
    inset-block-start: -11rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--nx-color-accent-primary) 11%, transparent);
    filter: blur(1px);
    pointer-events: none;
}
.app-shell .hero > * { position: relative; z-index: 1; }
.app-shell .hero h1 {
    max-width: 880px;
    margin-bottom: .9rem;
    font-size: clamp(2.1rem, 3.55vw, 3.65rem);
    font-weight: var(--nx-font-weight-semibold);
    line-height: 1.1;
    letter-spacing: 0;
    word-spacing: .025em;
    text-wrap: balance;
}
.app-shell .hero h1:focus { outline: none; }
.app-shell .hero > div:first-child { padding-block: .15rem; }
.app-shell .hero .eyebrow { margin-bottom: .68rem; }
.app-shell .hero-copy {
    max-width: 720px;
    font-size: clamp(.9rem, 1.25vw, 1rem);
    font-weight: var(--nx-font-weight-regular);
    line-height: 1.68;
    letter-spacing: .003em;
}
.app-shell .hero-proof,
.app-shell .batch-summary,
.app-shell .theme-proof,
.app-shell .ds-summary { align-self: stretch; margin: 0; box-shadow: none; }

.app-shell .panel { border-color: color-mix(in srgb, var(--nx-color-border) 88%, transparent); }
.app-shell .upload-panel,
.app-shell .batch-upload-panel,
.app-shell .theme-upload-panel { margin-bottom: 1rem; }
.app-shell .drop-zone { min-height: 108px; }
.app-shell .workspace,
.app-shell .batch-workspace,
.app-shell .theme-layout,
.app-shell .pack-layout,
.app-shell .projects-grid,
.app-shell .doctor-results,
.app-shell .analyzer-dashboard { scroll-margin-top: 1rem; }
.app-shell .workspace-heading {
    padding: .95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--nx-color-border) 78%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--nx-color-surface-soft) 56%, transparent);
}
.app-shell .preview-surface { min-height: clamp(230px, 28vw, 360px); }
.app-shell .status-region { margin-top: 1rem; }
.app-shell .empty-state,
.app-shell .theme-empty,
.app-shell .analyzer-empty {
    border-style: dashed;
    background: color-mix(in srgb, var(--nx-color-surface-soft) 62%, transparent);
}

@media (min-width: 1181px) {
    .app-shell,
    .batch-shell,
    .theme-shell,
    .pack-shell,
    .projects-shell,
    .doctor-shell,
    .analyzer-shell,
    .design-system-shell {
        width: min(1480px, calc(100% - 19rem));
        max-width: none;
        margin-block: 0;
        margin-inline: 18rem 1rem;
        padding-block: 1rem 3rem;
        padding-inline: 0;
    }
    .topbar {
        position: fixed;
        z-index: 50;
        inset-block: 1rem;
        inset-inline: 1rem auto;
        width: 16rem;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 1rem;
        margin: 0;
        padding: 1rem;
        overflow-y: auto;
        border: 1px solid color-mix(in srgb, var(--nx-color-border) 90%, transparent);
        border-radius: 1.35rem;
        background: color-mix(in srgb, var(--nx-color-surface-raised) 90%, transparent);
        box-shadow: var(--nx-shadow-lg);
        backdrop-filter: blur(22px);
    }
    .product-nav {
        width: 100%;
        display: block;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .product-nav a {
        width: 100%;
        min-height: 2.7rem;
        display: flex;
        align-items: center;
        gap: .62rem;
        padding: .48rem .56rem;
        border: 1px solid transparent;
        border-radius: .75rem;
        color: var(--nx-color-text-muted);
        font-size: .72rem;
    }
    .product-nav a:hover {
        color: var(--nx-color-text);
        border-color: color-mix(in srgb, var(--nx-color-border) 78%, transparent);
        background: var(--nx-color-surface-hover);
    }
    .product-nav a.active {
        color: var(--nx-color-text-on-accent);
        border-color: color-mix(in srgb, var(--nx-color-accent-primary) 62%, transparent);
        background: linear-gradient(135deg, var(--nx-color-accent-primary), var(--nx-color-accent-primary-pressed));
        box-shadow: 0 9px 24px color-mix(in srgb, var(--nx-color-accent-primary) 24%, transparent);
    }
    .topbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: .55rem;
        margin-top: auto;
    }
    .privacy-badge { width: 100%; justify-content: flex-start; border-radius: .72rem; line-height: 1.35; }
    .iconstudio-theme-toggle { width: 100%; justify-content: center; }
}

@media (min-width: 1181px) and (max-width: 1420px) {
    .batch-layout,
    .theme-layout,
    .pack-layout,
    .projects-grid,
    .analyzer-dashboard { grid-template-columns: 1fr; }
    .batch-action-stack,
    .theme-recipe-panel,
    .analyzer-result-list { position: static; }
}

@media (max-width: 1180px) {
    .app-shell,
    .batch-shell,
    .theme-shell,
    .pack-shell,
    .projects-shell,
    .doctor-shell,
    .analyzer-shell,
    .design-system-shell { width: min(100% - 1.5rem, 1440px); margin: 0 auto; padding-top: .65rem; }
    .topbar {
        position: sticky;
        z-index: 50;
        top: .5rem;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .7rem;
        align-items: center;
        margin: 0 0 1rem;
        padding: .7rem;
        border: 1px solid color-mix(in srgb, var(--nx-color-border) 88%, transparent);
        border-radius: 1rem;
        background: color-mix(in srgb, var(--nx-color-surface-raised) 91%, transparent);
        box-shadow: var(--nx-shadow-md);
        backdrop-filter: blur(20px);
    }
    .topbar-context { display: none; }
    .product-nav {
        grid-column: 1 / -1;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        gap: .35rem;
        padding: .25rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }
    .nav-group { display: contents; }
    .nav-group-label { display: none; }
    .nav-group-links { display: contents; }
    .product-nav a { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
    .product-nav .nav-icon { width: 1.45rem; height: 1.45rem; border-radius: .45rem; }
    .topbar-actions { grid-column: 3; }
    .workflow-map { grid-template-columns: 1fr; }
    .workflow-map-intro { grid-template-columns: auto 1fr; align-items: baseline; gap: .6rem; }
}

@media (max-width: 760px) {
    .app-shell,
    .batch-shell,
    .theme-shell,
    .pack-shell,
    .projects-shell,
    .doctor-shell,
    .analyzer-shell,
    .design-system-shell { width: min(100% - 1rem, 1440px); }
    .topbar { top: .25rem; }
    .privacy-badge { display: none; }
    .app-shell .hero { grid-template-columns: 1fr; padding: 1.05rem; }
    .app-shell .hero h1 {
        font-size: clamp(1.95rem, 8.9vw, 2.7rem);
        line-height: 1.12;
        letter-spacing: 0;
        word-spacing: .015em;
    }
    .app-shell .hero h1 br { display: none; }
    .app-shell .hero-proof,
    .app-shell .batch-summary,
    .app-shell .theme-proof,
    .app-shell .ds-summary { width: 100%; }
    .workflow-map ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workflow-map li { min-height: 3.2rem; }
    .workflow-map li small { display: none; }
    .drop-zone,
    .batch-drop-zone { grid-template-columns: auto minmax(0, 1fr); }
    .drop-zone .browse-button,
    .batch-drop-zone .browse-button { grid-column: 1 / -1; width: 100%; text-align: center; }
    .workspace-heading { align-items: flex-start; }
    .heading-actions { width: 100%; flex-wrap: wrap; }
    .heading-actions .button { flex: 1 1 9rem; }
}

@media (max-width: 460px) {
    .brand small { display: none; }
    .brand-mark { width: 2.15rem; height: 2.15rem; }
    .product-nav a { padding: .42rem .55rem; }
    .workflow-map { padding: .65rem; }
    .workflow-map ol { grid-template-columns: 1fr; }
    .workflow-map li { min-height: 2.9rem; }
    .workflow-map li small { display: block; }
}

html[data-nx-theme="light"] .topbar,
html[data-nx-theme="light"] .app-shell .hero {
    background: color-mix(in srgb, var(--nx-color-surface-raised) 94%, transparent);
}
html[data-nx-theme="light"] .topbar-context,
html[data-nx-theme="light"] .workflow-map li,
html[data-nx-theme="light"] .app-shell .workspace-heading {
    background: var(--nx-color-surface-soft);
}
html[data-nx-theme="light"] .product-nav .nav-icon { background: var(--nx-color-surface); }
html[data-nx-theme="light"] .product-nav a.active .nav-icon { background: color-mix(in srgb, white 20%, transparent); }


/* Phase 29: clear copy, keyboard access, bidi readiness, and resilient responsive controls */
button,
.button,
summary,
.product-nav a,
.preview-mode-tabs button,
.analyzer-item {
    min-height: 44px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
select,
textarea {
    min-height: 44px;
}

input[type="checkbox"],
input[type="radio"] {
    min-width: 1.15rem;
    min-height: 1.15rem;
}

.button {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

.field-help {
    display: block;
    margin-block-start: .35rem;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.5;
}

bdi,
[dir="auto"] {
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
}

.status-region[role="alert"] {
    border-color: color-mix(in srgb, var(--danger) 52%, var(--border));
}

.status-region:focus { outline: none; }

html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: start;
}

html[dir="rtl"] .toggle span::after {
    left: auto;
    right: .17rem;
}

html[dir="rtl"] .toggle input:checked + span::after {
    transform: translateX(-.93rem);
}

html[dir="rtl"] .consistency-finding {
    border-left-width: 1px;
    border-right-width: 4px;
}

html[dir="rtl"] .consistency-finding.severity-info { border-right-color: #60a5fa; }
html[dir="rtl"] .consistency-finding.severity-warning { border-right-color: #fbbf24; }
html[dir="rtl"] .consistency-finding.severity-error { border-right-color: #f87171; }

@media (max-width: 460px) {
    .heading-actions,
    .status-actions,
    .doctor-control-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .heading-actions > *,
    .status-actions > *,
    .doctor-control-actions > *,
    .button.full-mobile {
        width: 100%;
    }

    .app-shell .hero h1 {
        font-size: clamp(1.8rem, 9.6vw, 2.35rem);
        text-wrap: pretty;
    }

    .hero-copy,
    .status-region p,
    .drop-copy p {
        overflow-wrap: anywhere;
    }
}

.download-manager {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

.download-manager small {
    min-width: 0;
    color: var(--text-muted);
    line-height: 1.45;
}

/* Shared performance Phase 05: the DOM and decoded thumbnails stay bounded to the
   virtualized viewport. Placeholders make deferred previews explicit. */
.batch-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(110deg, rgba(148, 163, 184, .06) 8%, rgba(148, 163, 184, .13) 18%, rgba(148, 163, 184, .06) 33%);
    background-size: 220% 100%;
    animation: phase05-preview-pulse 1.8s linear infinite;
}

@keyframes phase05-preview-pulse {
    to { background-position-x: -220%; }
}

@media (prefers-reduced-motion: reduce) {
    .batch-thumb-placeholder { animation: none; }
}