/* =====================================================================
   layout-v2.css
   Visual layout overrides for ALL workspace pages, modeled after
   aurumflow-ui-v2 (AppShell + Topbar + content area).

   - Scoped to the wrappers added per-page (.dashboard-layout / .page-layout).
     If those wrappers are removed, this file becomes a no-op.
   - Loaded AFTER style.css so it overrides the existing rules.
   - Pure CSS. No business logic, no PHP, no API behavior is affected.
   - To revert: remove the <link> tag in index.php that includes this file.
   ===================================================================== */

/* =====================================================================
   SECTION 1 — Common v2 layout for every workspace page
   ===================================================================== */

/* ── v2 design tokens (declared on every workspace page that uses our wrappers) ── */
#page-dashboard,
#page-design-studio,
#page-photography,
#page-requests,
#page-wallet,
#page-analytics,
#page-manufacturing,
#page-messages,
#page-materials,
#page-team,
#page-billing,
#page-settings,
#page-help,
#page-admin {
    --v2-bg-primary:    var(--bg-primary);
    --v2-bg-secondary:  var(--bg-secondary);
    --v2-bg-tertiary:   var(--bg-tertiary);
    --v2-bg-info:       color-mix(in srgb, var(--info, #3b82f6) 12%, var(--bg-primary));
    --v2-bg-success:    color-mix(in srgb, var(--success) 12%, var(--bg-primary));
    --v2-bg-warning:    color-mix(in srgb, var(--warning) 14%, var(--bg-primary));
    --v2-bg-danger:     color-mix(in srgb, var(--error) 12%, var(--bg-primary));
    --v2-text-primary:  var(--text-primary);
    --v2-text-secondary:var(--text-secondary);
    --v2-text-tertiary: var(--text-muted);
    --v2-text-info:     var(--primary);
    --v2-text-success:  var(--success);
    --v2-text-warning:  var(--warning);
    --v2-text-danger:   var(--error);
    --v2-border:        var(--border-color);
    --v2-radius-sm:     4px;
    --v2-radius-md:     8px;
    --v2-radius-lg:     12px;
    --v2-radius-full:   9999px;
    --v2-topbar-height: 56px;
    --v2-shadow-none:   none;

    /* These two are used by .btn-primary's default & hover states. They
       are overridden in the dark-mode block below so the primary button
       stays correctly inverted in both themes. */
    --v2-btn-primary-bg:        var(--primary);
    --v2-btn-primary-fg:        var(--bg-primary);
    --v2-btn-primary-bg-hover:  var(--primary-light);
}

/* ── Dark-mode token overrides ────────────────────────────────────────
   Activated when the theme toggle sets data-theme="dark" on #app
   (controlled by toggleTheme() in assets/js/app.js).
   Only --v2-* tokens are overridden — no other rules are duplicated,
   so every selector below this block automatically themes correctly.
   ─────────────────────────────────────────────────────────────────── */
#app[data-theme="dark"] #page-dashboard,
#app[data-theme="dark"] #page-design-studio,
#app[data-theme="dark"] #page-photography,
#app[data-theme="dark"] #page-requests,
#app[data-theme="dark"] #page-wallet,
#app[data-theme="dark"] #page-analytics,
#app[data-theme="dark"] #page-manufacturing,
#app[data-theme="dark"] #page-messages,
#app[data-theme="dark"] #page-materials,
#app[data-theme="dark"] #page-team,
#app[data-theme="dark"] #page-billing,
#app[data-theme="dark"] #page-settings,
#app[data-theme="dark"] #page-help,
#app[data-theme="dark"] #page-admin {
    --v2-bg-primary:    var(--bg-primary);
    --v2-bg-secondary:  var(--bg-secondary);
    --v2-bg-tertiary:   var(--bg-tertiary);
    --v2-bg-info:       color-mix(in srgb, var(--primary) 14%, var(--bg-primary));
    --v2-bg-success:    color-mix(in srgb, var(--success) 12%, var(--bg-primary));
    --v2-bg-warning:    color-mix(in srgb, var(--warning) 14%, var(--bg-primary));
    --v2-bg-danger:     color-mix(in srgb, var(--error) 12%, var(--bg-primary));
    --v2-text-primary:  var(--text-primary);
    --v2-text-secondary:var(--text-secondary);
    --v2-text-tertiary: var(--text-muted);
    --v2-text-info:     var(--primary);
    --v2-text-success:  var(--success);
    --v2-text-warning:  var(--warning);
    --v2-text-danger:   var(--error);
    --v2-border:        var(--border-color);

    --v2-btn-primary-bg:        var(--primary);
    --v2-btn-primary-fg:        var(--bg-secondary);
    --v2-btn-primary-bg-hover:  var(--primary-light);
}

#app[data-theme="light"] #page-dashboard,
#app[data-theme="light"] #page-design-studio,
#app[data-theme="light"] #page-photography,
#app[data-theme="light"] #page-requests,
#app[data-theme="light"] #page-wallet,
#app[data-theme="light"] #page-analytics,
#app[data-theme="light"] #page-manufacturing,
#app[data-theme="light"] #page-messages,
#app[data-theme="light"] #page-materials,
#app[data-theme="light"] #page-team,
#app[data-theme="light"] #page-billing,
#app[data-theme="light"] #page-settings,
#app[data-theme="light"] #page-help,
#app[data-theme="light"] #page-admin {
    --v2-btn-primary-fg: var(--text-primary);
}

/* ── AppShell bridge: match the ui-v2 shell geometry while keeping
   the existing AurumFlow palette supplied by style.css. ── */
#app.app-container {
    --sidebar-width: 220px;
    --header-height: 56px;
    display: flex;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: var(--bg-secondary);
}

#app .sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    overflow-y: auto;
    box-shadow: none !important;
    border-right: 0.5px solid var(--border-color);
}

#app .main-content {
    margin-left: var(--sidebar-width);
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

#app .header {
    height: var(--header-height);
    min-height: var(--header-height);
    padding: 0 20px;
    flex-shrink: 0;
    border-bottom-width: 0.5px;
    box-shadow: none;
}

#app .page.active {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#app .page-content {
    width: 100%;
    min-height: 0;
}

#app .live-prices-strip {
    flex-shrink: 0;
}

/* ── Make page-content a flush canvas for our layout wrapper ── */
#page-design-studio > .page-content,
#page-photography > .page-content,
#page-requests > .page-content,
#page-wallet > .page-content,
#page-analytics > .page-content,
#page-manufacturing > .page-content,
#page-messages > .page-content,
#page-materials > .page-content,
#page-team > .page-content,
#page-billing > .page-content,
#page-settings > .page-content,
#page-help > .page-content,
#page-admin > .page-content {
    padding: 0 !important;
    background: var(--v2-bg-tertiary) !important;
}

/* ── Layout wrapper (mirrors v2 AppShell .main) ── */
.page-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--v2-bg-tertiary);
    color: var(--v2-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

/* ── Page topbar (mirrors v2 Topbar) ── */
.page-topbar {
    min-height: var(--v2-topbar-height);
    background: var(--v2-bg-primary);
    border-bottom: 0.5px solid var(--v2-border);
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Reset existing topbar elements when they live INSIDE our .page-topbar */
.page-topbar > .page-header,
.page-topbar > .hero-banner,
.page-topbar > .workspace-header,
.page-topbar > .manufacturing-market-header,
.page-topbar > .materials-panel-controls {
    background: transparent !important;
    background-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--v2-text-primary) !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

/* Title text inside the topbar */
.page-topbar h1,
.page-topbar .page-title,
.page-topbar .hero-title {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--v2-text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Subtitle / kicker / overline text inside the topbar */
.page-topbar .page-subtitle,
.page-topbar .hero-subtitle,
.page-topbar .hero-kicker,
.page-topbar .page-overline,
.page-topbar .workspace-eyebrow,
.page-topbar p,
.page-topbar .manufacturing-market-subtitle {
    font-size: 12px !important;
    color: var(--v2-text-tertiary) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    background: transparent !important;
    opacity: 1 !important;
}

/* The "title + subtitle" stacked pair (most pages put them in a div) */
.page-topbar > .page-header > div:first-child,
.page-topbar > .hero-banner > .hero-banner-content,
.page-topbar > .workspace-header > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    color: var(--v2-text-primary) !important;
}

/* Action buttons / pills on the right side of the topbar */
.page-topbar .page-header-actions,
.page-topbar .workspace-header-actions,
.page-topbar .analytics-page-actions,
.page-topbar .messages-page-actions,
.page-topbar .design-studio-header-actions,
.page-topbar .photo-header-actions,
.page-topbar .hero-pill {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
}

/* Buttons inside topbar adopt v2 button style */
.page-topbar .btn,
.page-topbar button.btn-primary,
.page-topbar button.btn-secondary {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    color: var(--v2-text-primary) !important;
    box-shadow: none !important;
    transform: none !important;
    background-image: none !important;
    height: auto !important;
    min-height: 0 !important;
}
.page-topbar .btn:hover {
    background: var(--v2-bg-secondary) !important;
    transform: none !important;
}
.page-topbar .btn-primary {
    background: var(--v2-btn-primary-bg) !important;
    color: var(--v2-btn-primary-fg) !important;
    border-color: var(--v2-btn-primary-bg) !important;
}
.page-topbar .btn-primary:hover {
    background: var(--v2-btn-primary-bg-hover) !important;
}

/* Hero pill / numbered counter on the right */
.page-topbar .hero-pill {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 6px !important;
}
.page-topbar .pill-number {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--v2-text-primary) !important;
}
.page-topbar .pill-label {
    font-size: 11px !important;
    color: var(--v2-text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Special: photography credits pill */
.page-topbar .photo-credits-pill {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--v2-bg-secondary) !important;
    border-radius: var(--v2-radius-full) !important;
    padding: 4px 10px !important;
    border: 0.5px solid var(--v2-border) !important;
}
.page-topbar .photo-credits-pill-label {
    font-size: 11px !important;
    color: var(--v2-text-tertiary) !important;
    margin: 0 !important;
}
.page-topbar .photo-credits-pill-value {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--v2-text-primary) !important;
}
.page-topbar .photo-buy-credits-btn {
    background: transparent !important;
    color: var(--v2-text-info) !important;
    font-size: 11px !important;
    padding: 0 !important;
    border: none !important;
}

/* Settings header stats */
.page-topbar .settings-header-stats {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.page-topbar .settings-header-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 1px !important;
}
.page-topbar .settings-header-label {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--v2-text-tertiary) !important;
}
.page-topbar .settings-header-stat strong {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--v2-text-primary) !important;
}

/* Help status card (compact) */
.page-topbar .help-status-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--v2-bg-success) !important;
    color: var(--v2-text-success) !important;
    padding: 4px 10px !important;
    border-radius: var(--v2-radius-full) !important;
    border: 0.5px solid var(--v2-border) !important;
}
.page-topbar .help-status-pill {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--v2-text-success) !important;
    background: transparent !important;
    padding: 0 !important;
}
.page-topbar .help-status-card strong {
    font-size: 12px !important;
    font-weight: 500 !important;
}
.page-topbar .help-status-card p { display: none !important; }

/* Materials tabs row IS the topbar — special-case it */
.page-topbar > .materials-panel-controls {
    flex-direction: row !important;
    gap: 6px !important;
}
.page-topbar .materials-tab-ghost {
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: var(--v2-radius-md) !important;
    background: transparent !important;
    color: var(--v2-text-secondary) !important;
    border: none !important;
}
.page-topbar .materials-tab-ghost.active {
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-primary) !important;
    font-weight: 500 !important;
}

/* ── Page main content area (mirrors v2 AppShell .content) ── */
.page-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    background: var(--v2-bg-tertiary);
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--v2-text-primary);
}

/* =====================================================================
   SECTION 2 — Common building-block overrides inside .page-main
   ===================================================================== */

/* Cards */
.page-main .card {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.page-main .card-header {
    padding: 14px 16px !important;
    border-bottom: 0.5px solid var(--v2-border) !important;
    background: transparent !important;
}
.page-main .card-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--v2-text-primary) !important;
}
.page-main .card-subtitle {
    font-size: 12px !important;
    color: var(--v2-text-secondary) !important;
}
.page-main .card-body {
    padding: 16px !important;
}
.page-main .card-footer {
    padding: 12px 16px !important;
    border-top: 0.5px solid var(--v2-border) !important;
    background: var(--v2-bg-tertiary) !important;
}

/* Workspace panels (used heavily on billing, manufacturing, etc.) */
.page-main .workspace-panel {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    box-shadow: none !important;
    color: var(--v2-text-primary) !important;
}

/* Buttons */
.page-main .btn {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 7px 14px !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    color: var(--v2-text-primary) !important;
    box-shadow: none !important;
    transform: none !important;
    background-image: none !important;
    transition: all 0.12s ease !important;
}
.page-main .btn:hover {
    background: var(--v2-bg-secondary) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--v2-border) !important;
}
.page-main .btn-primary {
    background: var(--v2-btn-primary-bg) !important;
    color: var(--v2-btn-primary-fg) !important;
    border-color: var(--v2-btn-primary-bg) !important;
    background-image: none !important;
}
.page-main .btn-primary:hover {
    background: var(--v2-btn-primary-bg-hover) !important;
}
.page-main .btn-secondary {
    background: var(--v2-bg-primary) !important;
    color: var(--v2-text-primary) !important;
    border-color: var(--v2-border) !important;
}
.page-main .btn-sm,
.page-main .btn.btn-sm {
    font-size: 11px !important;
    padding: 4px 9px !important;
}

/* Form inputs */
.page-main .form-input,
.page-main input[type="text"],
.page-main input[type="email"],
.page-main input[type="number"],
.page-main textarea,
.page-main select {
    font-size: 13px !important;
    background: var(--v2-bg-primary) !important;
    color: var(--v2-text-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
}
.page-main .form-input:focus,
.page-main textarea:focus,
.page-main select:focus {
    outline: none !important;
    border-color: var(--v2-text-info) !important;
}

/* Section tabs (filter tabs) */
.page-main .section-tabs {
    display: flex !important;
    gap: 4px !important;
    background: transparent !important;
    border-bottom: 0.5px solid var(--v2-border) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 16px !important;
}
.page-main .section-tab {
    background: transparent !important;
    color: var(--v2-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    box-shadow: none !important;
}
.page-main .section-tab.active {
    color: var(--v2-text-primary) !important;
    border-bottom-color: var(--v2-text-primary) !important;
    background: transparent !important;
}

/* Tabs (design-studio etc.) */
.page-main .tabs {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    padding: 4px !important;
    gap: 4px !important;
}
.page-main .tab {
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: var(--v2-radius-sm) !important;
    color: var(--v2-text-secondary) !important;
    background: transparent !important;
    border: none !important;
}
.page-main .tab.active {
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-primary) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

/* Tables (generic) */
.page-main table {
    border-collapse: collapse !important;
    width: 100% !important;
    background: var(--v2-bg-primary) !important;
    border-radius: var(--v2-radius-lg) !important;
    overflow: hidden !important;
}
.page-main table th {
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--v2-text-tertiary) !important;
    background: var(--v2-bg-tertiary) !important;
    border-bottom: 0.5px solid var(--v2-border) !important;
    padding: 10px 16px !important;
    text-align: left !important;
}
.page-main table td {
    padding: 12px 16px !important;
    font-size: 13px !important;
    color: var(--v2-text-secondary) !important;
    border-bottom: 0.5px solid var(--v2-border) !important;
}

/* Info card (used on requests page) */
.page-main .info-card {
    background: var(--v2-bg-info) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    padding: 16px !important;
    color: var(--v2-text-info) !important;
    box-shadow: none !important;
}
.page-main .info-card h3 {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--v2-text-info) !important;
}
.page-main .info-card p {
    font-size: 12px !important;
    color: var(--v2-text-info) !important;
    opacity: 0.85 !important;
}

/* Empty states */
.page-main .empty-state-small,
.page-main .empty-state {
    background: var(--v2-bg-primary) !important;
    border: 0.5px dashed var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    color: var(--v2-text-tertiary) !important;
    padding: 24px !important;
    text-align: center !important;
}
.page-main .empty-state-title {
    font-size: 14px !important;
    color: var(--v2-text-primary) !important;
    font-weight: 500 !important;
}
.page-main .empty-state-text {
    font-size: 12px !important;
    color: var(--v2-text-tertiary) !important;
}

/* Search field (used on requests, manufacturing etc.) */
.page-main .search-field,
.page-main .toolbar-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* =====================================================================
   SECTION 3 — Page-specific touch-ups
   ===================================================================== */

/* Requests page: toolbar layout */
#page-requests .page-main .requests-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
}
#page-requests .page-main .requests-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 12px !important;
}

/* Wallet page: current plan banner */
#page-wallet .page-main .current-plan-banner {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    padding: 16px !important;
    color: var(--v2-text-primary) !important;
    box-shadow: none !important;
}
#page-wallet .page-main .plan-banner-name {
    color: var(--v2-text-primary) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
}
#page-wallet .page-main .plan-banner-label,
#page-wallet .page-main .plan-banner-price {
    color: var(--v2-text-tertiary) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
#page-wallet .page-main .plan-stat-value {
    color: var(--v2-text-primary) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
}
#page-wallet .page-main .plan-stat-label {
    color: var(--v2-text-tertiary) !important;
    font-size: 11px !important;
}

/* Analytics page: surface cards */
#page-analytics .page-main .dashboard-analytics-surface {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    padding: 16px !important;
    color: var(--v2-text-primary) !important;
    box-shadow: none !important;
}
#page-analytics .page-main .dashboard-analytics-surface-head h3 {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--v2-text-primary) !important;
}
#page-analytics .page-main .dashboard-analytics-surface-head p {
    font-size: 12px !important;
    color: var(--v2-text-tertiary) !important;
}
#page-analytics .page-main .dashboard-analytics-layout {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
    gap: 16px !important;
}

/* Analytics v2 workspace: keep the existing data, tighten the template-like layout. */
#page-analytics .page-topbar .analytics-page-header {
    margin-bottom: 0 !important;
    align-items: center !important;
    gap: 16px !important;
}

#page-analytics .page-topbar .analytics-page-header .page-title {
    font-size: 20px;
    line-height: 1.2;
}

#page-analytics .page-topbar .analytics-page-header .page-subtitle {
    max-width: 560px;
}

#page-analytics .analytics-page-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

#page-analytics .analytics-control,
#page-analytics #analytics-export-btn {
    min-height: 36px !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    background-color: var(--v2-bg-primary) !important;
    color: var(--v2-text-primary) !important;
    box-shadow: none !important;
    font-size: 12px !important;
}

#page-analytics .analytics-control {
    min-width: 150px !important;
    padding: 0 34px 0 12px !important;
}

#page-analytics #analytics-export-btn {
    padding: 0 14px !important;
}

#page-analytics #analytics-export-btn::before {
    content: none !important;
}

#page-analytics .page-main {
    gap: 16px;
}

#page-analytics .dashboard-analytics-overview {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}

#page-analytics .dashboard-analytics-overview-card {
    min-height: 148px !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    background: var(--v2-bg-primary) !important;
    color: var(--v2-text-primary) !important;
    padding: 14px !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column;
}

#page-analytics .analytics-kpi-card-head {
    margin: 0 0 12px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

#page-analytics .dashboard-analytics-breakdown-icon.analytics-kpi-icon {
    width: 34px !important;
    height: 34px !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-tertiary) !important;
}

#page-analytics .dashboard-analytics-breakdown-icon.analytics-kpi-icon svg {
    width: 16px !important;
    height: 16px !important;
}

#page-analytics .analytics-kpi-trend {
    min-height: 22px !important;
    padding: 0 8px !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--radius-full) !important;
    background: var(--v2-bg-secondary) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

#page-analytics .analytics-kpi-trend::before {
    font-size: 10px !important;
}

#page-analytics .analytics-kpi-trend-up {
    border-color: color-mix(in srgb, var(--success) 28%, var(--v2-border)) !important;
    background: var(--v2-bg-success) !important;
    color: var(--v2-text-success) !important;
}

#page-analytics .analytics-kpi-trend-down {
    border-color: color-mix(in srgb, var(--error) 28%, var(--v2-border)) !important;
    background: var(--v2-bg-danger) !important;
    color: var(--v2-text-danger) !important;
}

#page-analytics .analytics-kpi-trend-flat {
    color: var(--v2-text-tertiary) !important;
}

#page-analytics .dashboard-analytics-overview-card-label {
    color: var(--v2-text-tertiary) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

#page-analytics .dashboard-analytics-overview-card-value {
    margin-top: 8px !important;
    color: var(--v2-text-primary) !important;
    font-size: clamp(26px, 2.3vw, 34px) !important;
    line-height: 1 !important;
    font-weight: 500 !important;
}

#page-analytics .dashboard-analytics-overview-card-meta.analytics-kpi-description {
    margin-top: auto !important;
    padding-top: 10px !important;
    color: var(--v2-text-tertiary) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

#page-analytics .page-main .dashboard-analytics-surface {
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#page-analytics .page-main .dashboard-analytics-surface-head {
    padding: 12px 14px !important;
    border-bottom: 0.5px solid var(--v2-border) !important;
    background: var(--v2-bg-primary) !important;
}

#page-analytics .page-main .dashboard-analytics-surface-head h3 {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--v2-text-tertiary) !important;
}

#page-analytics .page-main .dashboard-analytics-surface-head p {
    display: block !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

#page-analytics .page-main .dashboard-analytics-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr) !important;
    gap: 16px !important;
    margin: 0 !important;
}

#page-analytics .page-main .dashboard-analytics-layout-bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

#page-analytics #analytics-page-chart,
#page-analytics #analytics-page-status,
#page-analytics #analytics-page-output,
#page-analytics #analytics-page-activity {
    padding: 14px !important;
    min-height: 0 !important;
}

#page-analytics #analytics-page-chart,
#page-analytics #analytics-page-status {
    min-height: 330px !important;
}

#page-analytics #analytics-page-output,
#page-analytics #analytics-page-activity {
    min-height: 260px !important;
}

#page-analytics .analytics-empty-state {
    min-height: 160px;
    border: 0.5px dashed var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-tertiary) !important;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 18px;
}

#page-analytics .analytics-line-chart {
    height: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

#page-analytics .analytics-line-chart-svg {
    width: 100%;
    min-height: 300px !important;
    height: 100%;
    overflow: visible;
}

#page-analytics .analytics-chart-grid-line {
    stroke: color-mix(in srgb, var(--v2-border) 78%, transparent) !important;
    stroke-width: 1 !important;
    stroke-dasharray: 3 5 !important;
}

#page-analytics .analytics-chart-axis-line {
    stroke: var(--v2-border) !important;
    stroke-width: 1 !important;
}

#page-analytics .analytics-chart-axis-label {
    fill: var(--v2-text-tertiary) !important;
    font-size: 11px !important;
}

#page-analytics .analytics-chart-line {
    stroke: var(--primary) !important;
    stroke-width: 3 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#page-analytics .analytics-chart-point {
    fill: var(--primary) !important;
    stroke: var(--v2-bg-primary) !important;
    stroke-width: 2 !important;
}

#page-analytics .analytics-status-visual {
    min-height: 300px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page-analytics .analytics-status-svg {
    width: min(100%, 420px);
    height: auto;
    overflow: visible;
}

#page-analytics .analytics-status-arc-track {
    fill: none;
    stroke: var(--v2-bg-secondary) !important;
}

#page-analytics .analytics-status-connector {
    stroke-width: 1.5 !important;
}

#page-analytics .analytics-status-label {
    font-size: 12px !important;
    font-weight: 500 !important;
}

#page-analytics .analytics-usage-row + .analytics-usage-row {
    margin-top: 18px !important;
}

#page-analytics .analytics-usage-row-top {
    margin-bottom: 8px !important;
    color: var(--v2-text-primary) !important;
    font-size: 12px !important;
}

#page-analytics .analytics-usage-row-top span:last-child {
    color: var(--v2-text-tertiary) !important;
}

#page-analytics .analytics-usage-bar {
    height: 7px !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--radius-full) !important;
    background: var(--v2-bg-secondary) !important;
    overflow: hidden;
}

#page-analytics .analytics-usage-bar span {
    border-radius: inherit;
    background: var(--primary) !important;
}

#page-analytics .analytics-product-item {
    align-items: center !important;
    padding: 14px 0 !important;
    border-top: 0.5px solid var(--v2-border) !important;
}

#page-analytics .analytics-product-item:first-child {
    padding-top: 0 !important;
    border-top: 0 !important;
}

#page-analytics .analytics-product-title-row {
    gap: 8px !important;
}

#page-analytics .analytics-product-rank {
    color: var(--v2-text-tertiary) !important;
    font-size: 11px !important;
}

#page-analytics .dashboard-analytics-activity-title {
    color: var(--v2-text-primary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

#page-analytics .dashboard-analytics-activity-meta {
    margin-top: 4px !important;
    color: var(--v2-text-tertiary) !important;
    font-size: 11px !important;
}

#page-analytics .analytics-product-value {
    min-width: 120px !important;
    text-align: right;
}

#page-analytics .analytics-product-value strong {
    color: var(--primary) !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
}

#page-analytics .analytics-product-value span {
    margin-top: 3px !important;
    color: var(--v2-text-tertiary) !important;
    font-size: 11px !important;
}

@media (max-width: 1180px) {
    #page-analytics .dashboard-analytics-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #page-analytics .page-main .dashboard-analytics-layout,
    #page-analytics .page-main .dashboard-analytics-layout-bottom {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 720px) {
    #page-analytics .page-topbar .analytics-page-header {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    #page-analytics .analytics-page-actions {
        width: 100%;
        flex-wrap: wrap !important;
    }

    #page-analytics .analytics-control,
    #page-analytics #analytics-export-btn {
        flex: 1 1 150px;
        width: auto !important;
    }

    #page-analytics .dashboard-analytics-overview {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #page-analytics #analytics-page-chart,
    #page-analytics #analytics-page-status,
    #page-analytics #analytics-page-output,
    #page-analytics #analytics-page-activity {
        padding: 12px !important;
    }

    #page-analytics .analytics-line-chart,
    #page-analytics .analytics-line-chart-svg,
    #page-analytics .analytics-status-visual {
        min-height: 260px !important;
    }

    #page-analytics .analytics-product-item {
        align-items: flex-start !important;
        gap: 10px;
    }
}

/* Manufacturing: marketplace toolbar */
#page-manufacturing .page-main .manufacturing-market-toolbar {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    padding: 12px !important;
}
#page-manufacturing .page-main .manufacturer-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 12px !important;
}

/* Messages: align the existing PHP chat with the compact ui-v2 chat panel. */
#page-messages .page-topbar .messages-page-header {
    margin-bottom: 0 !important;
}

#page-messages .page-topbar .messages-page-header .page-title {
    font-size: 20px;
    line-height: 1.2;
}

#page-messages .page-topbar .messages-page-header .page-subtitle {
    max-width: 520px;
}

#page-messages .page-main {
    padding-top: 0;
}

#page-messages .page-main .manufacturer-chat-shell {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    overflow: hidden !important;
    height: calc(100vh - var(--header-height, 64px) - var(--v2-topbar-height) - 40px) !important;
    min-height: 520px !important;
    display: grid !important;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    box-shadow: none !important;
}

#page-messages .manufacturer-chat-sidebar {
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    background: var(--v2-bg-primary) !important;
    border-right: 0.5px solid var(--v2-border) !important;
}

#page-messages .manufacturer-chat-sidebar-header {
    min-height: 58px;
    padding: 12px 14px !important;
    border-bottom: 0.5px solid var(--v2-border) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#page-messages .manufacturer-chat-sidebar-header h3 {
    margin: 0;
    color: var(--v2-text-primary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#page-messages .manufacturer-chat-count {
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 500;
}

#page-messages .manufacturer-chat-search {
    position: relative;
    padding: 10px 14px !important;
    border-bottom: 0.5px solid var(--v2-border) !important;
    background: var(--v2-bg-primary) !important;
    display: block;
}

#page-messages .manufacturer-chat-search svg {
    position: absolute;
    left: 25px;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    color: var(--v2-text-tertiary) !important;
    pointer-events: none;
}

#page-messages .manufacturer-chat-search input {
    width: 100%;
    min-height: 36px !important;
    padding: 0 10px 0 34px !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-primary) !important;
    font-size: 12px !important;
    outline: none;
}

#page-messages .manufacturer-chat-search input:focus,
#page-messages .manufacturer-chat-form .form-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent) !important;
}

#page-messages .manufacturer-chat-list {
    flex: 1;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
    background: var(--v2-bg-primary) !important;
}

#page-messages .manufacturer-chat-item {
    width: 100%;
    min-height: 86px;
    padding: 12px 14px !important;
    border: 0 !important;
    border-bottom: 0.5px solid var(--v2-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    text-align: left;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

#page-messages .manufacturer-chat-item:hover {
    background: var(--v2-bg-tertiary) !important;
}

#page-messages .manufacturer-chat-item.active {
    background: var(--v2-bg-info) !important;
    box-shadow: inset 2px 0 0 var(--primary);
}

#page-messages .manufacturer-chat-item-avatar-wrap,
#page-messages .manufacturer-chat-item-avatar,
#page-messages .manufacturer-chat-avatar {
    width: 38px !important;
    height: 38px !important;
}

#page-messages .manufacturer-chat-item-avatar-wrap {
    position: relative;
}

#page-messages .manufacturer-chat-item-avatar,
#page-messages .manufacturer-chat-avatar {
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-primary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

#page-messages .manufacturer-chat-item-status {
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--v2-bg-primary);
    border-radius: var(--radius-full);
}

#page-messages .manufacturer-chat-item-body {
    min-width: 0;
}

#page-messages .manufacturer-chat-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

#page-messages .manufacturer-chat-item-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

#page-messages .manufacturer-chat-item-heading h4 {
    margin: 0;
    color: var(--v2-text-primary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.25;
}

#page-messages .manufacturer-chat-item-top > span {
    color: var(--v2-text-tertiary) !important;
    font-size: 10px !important;
    white-space: nowrap;
}

#page-messages .manufacturer-chat-item-type {
    min-height: 18px;
    padding: 0 6px;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-sm) !important;
    background: var(--v2-bg-secondary);
    color: var(--v2-text-tertiary) !important;
    font-size: 9px !important;
    letter-spacing: 0.04em !important;
}

#page-messages .manufacturer-chat-item-project {
    margin-top: 3px;
    color: var(--v2-text-tertiary) !important;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#page-messages .manufacturer-chat-item-preview {
    margin-top: 5px;
    color: var(--v2-text-secondary) !important;
    font-size: 12px !important;
    line-height: 1.4;
    -webkit-line-clamp: 1 !important;
}

#page-messages .manufacturer-chat-unread {
    align-self: center;
    min-width: 20px;
    height: 20px;
    border-radius: var(--radius-full) !important;
    background: var(--primary) !important;
    color: var(--v2-btn-primary-fg, var(--v2-bg-primary)) !important;
    font-size: 10px !important;
    font-weight: 600;
}

#page-messages .manufacturer-chat-main {
    min-width: 0;
    min-height: 0;
    background: var(--v2-bg-tertiary) !important;
    overflow: hidden;
}

#page-messages .manufacturer-chat-thread {
    height: 100%;
    min-height: 0;
    flex-direction: column;
    background: var(--v2-bg-tertiary) !important;
}

#page-messages .manufacturer-chat-thread-header {
    min-height: 58px;
    padding: 10px 14px !important;
    border-bottom: 0.5px solid var(--v2-border) !important;
    background: var(--v2-bg-primary) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

#page-messages .manufacturer-chat-thread-user {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

#page-messages .manufacturer-chat-thread-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#page-messages .manufacturer-chat-thread-copy h3 {
    margin: 0;
    color: var(--v2-text-primary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.25;
}

#page-messages .manufacturer-chat-thread-copy p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#page-messages #manufacturer-chat-company {
    color: var(--v2-text-secondary) !important;
    font-size: 11px !important;
}

#page-messages #manufacturer-chat-subtitle {
    color: var(--v2-text-tertiary) !important;
    font-size: 10px !important;
}

#page-messages .manufacturer-chat-thread-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#page-messages .manufacturer-chat-thread-actions .btn-secondary,
#page-messages .manufacturer-chat-more-btn,
#page-messages .manufacturer-chat-attach {
    min-height: 34px !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-primary) !important;
    box-shadow: none !important;
}

#page-messages .manufacturer-chat-more-btn {
    width: 34px !important;
}

#page-messages .manufacturer-chat-more-btn svg,
#page-messages .manufacturer-chat-attach svg {
    width: 16px;
    height: 16px;
}

#page-messages .manufacturer-chat-menu {
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-primary) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 6px !important;
}

#page-messages .manufacturer-chat-menu button {
    border-radius: var(--v2-radius-sm) !important;
    color: var(--v2-text-secondary) !important;
}

#page-messages .manufacturer-chat-menu button:hover {
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-primary) !important;
}

#page-messages .manufacturer-chat-hint {
    order: 2;
    margin: 0 !important;
    padding: 8px 14px !important;
    border-bottom: 0.5px solid var(--v2-border);
    background: var(--v2-bg-info) !important;
    color: var(--v2-text-info) !important;
    font-size: 11px !important;
    font-weight: 500;
    flex-shrink: 0;
}

#page-messages .manufacturer-chat-messages {
    order: 3;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    background: var(--v2-bg-tertiary) !important;
}

#page-messages .manufacturer-chat-system-card {
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-primary) !important;
    padding: 14px !important;
}

#page-messages .manufacturer-chat-system-grid {
    gap: 10px;
}

#page-messages .manufacturer-chat-inline-empty {
    border: 0.5px dashed var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-primary) !important;
    color: var(--v2-text-tertiary) !important;
    padding: 22px !important;
}

#page-messages .manufacturer-chat-message-row {
    display: flex;
    justify-content: flex-start;
}

#page-messages .manufacturer-chat-message-row.outgoing {
    justify-content: flex-end;
}

#page-messages .manufacturer-chat-message-stack {
    max-width: min(560px, 86%) !important;
    gap: 4px !important;
}

#page-messages .manufacturer-chat-message-sender {
    margin: 0;
    color: var(--v2-text-tertiary) !important;
    font-size: 11px !important;
}

#page-messages .manufacturer-chat-bubble {
    padding: 8px 12px !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) var(--v2-radius-lg) var(--v2-radius-lg) var(--v2-radius-sm) !important;
    background: var(--v2-bg-primary) !important;
    color: var(--v2-text-primary) !important;
}

#page-messages .manufacturer-chat-bubble.outgoing {
    border-color: color-mix(in srgb, var(--primary) 36%, var(--v2-border)) !important;
    border-radius: var(--v2-radius-lg) var(--v2-radius-lg) var(--v2-radius-sm) var(--v2-radius-lg) !important;
    background: var(--v2-bg-info) !important;
    color: var(--v2-text-primary) !important;
}

#page-messages .manufacturer-chat-message-text {
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

#page-messages .manufacturer-chat-message-meta {
    color: var(--v2-text-tertiary) !important;
    font-size: 10px !important;
}

#page-messages .manufacturer-chat-form {
    order: 4;
    padding: 10px 14px !important;
    border-top: 0.5px solid var(--v2-border) !important;
    background: var(--v2-bg-primary) !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px !important;
    align-items: center;
    flex-shrink: 0;
}

#page-messages .manufacturer-chat-form .form-input {
    min-height: 34px !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-primary) !important;
    font-size: 12px !important;
}

#page-messages .manufacturer-chat-form .btn-primary {
    min-height: 34px !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-btn-primary-bg) !important;
    color: var(--v2-btn-primary-fg) !important;
    border-color: var(--v2-btn-primary-bg) !important;
    box-shadow: none !important;
}

#page-messages .manufacturer-chat-empty {
    height: 100%;
    padding: 32px;
    display: grid;
    place-content: center;
    gap: 10px;
    background: var(--v2-bg-tertiary) !important;
    color: var(--v2-text-tertiary) !important;
    text-align: center;
}

#page-messages .messages-empty-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    background: var(--v2-bg-primary) !important;
    color: var(--v2-text-tertiary) !important;
}

@media (max-width: 1100px) {
    #page-messages .page-main .manufacturer-chat-shell {
        grid-template-columns: minmax(260px, 330px) minmax(0, 1fr) !important;
    }
}

@media (max-width: 820px) {
    #page-messages .page-main .manufacturer-chat-shell {
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #page-messages .manufacturer-chat-sidebar {
        border-right: 0 !important;
        border-bottom: 0.5px solid var(--v2-border) !important;
    }

    #page-messages .manufacturer-chat-list {
        max-height: 280px !important;
    }

    #page-messages .manufacturer-chat-thread {
        min-height: 560px;
    }
}

@media (max-width: 640px) {
    #page-messages .page-main {
        padding-left: 12px;
        padding-right: 12px;
    }

    #page-messages .manufacturer-chat-thread-header {
        align-items: flex-start;
        flex-direction: column;
    }

    #page-messages .manufacturer-chat-thread-actions {
        width: 100%;
        justify-content: space-between;
    }

    #page-messages .manufacturer-chat-form {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    #page-messages .manufacturer-chat-form .btn-primary {
        grid-column: 1 / -1;
    }

    #page-messages .manufacturer-chat-message-stack {
        max-width: 100% !important;
    }
}

/* Materials: marketplace cards already complex — just style the page wrapper */
#page-materials .page-main .materials-panel {
    background: transparent !important;
}

/* Settings: side nav + workspace */
#page-settings .page-main .settings-workspace {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    gap: 16px !important;
    align-items: start !important;
}
#page-settings .page-main .settings-sidebar {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    padding: 12px !important;
    box-shadow: none !important;
}
#page-settings .page-main .settings-section-link {
    background: transparent !important;
    color: var(--v2-text-secondary) !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
    border-radius: var(--v2-radius-md) !important;
    border: none !important;
    text-align: left !important;
    width: 100% !important;
}
#page-settings .page-main .settings-section-link.active {
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-primary) !important;
    font-weight: 500 !important;
}

/* Help: search shell + grids */
#page-help .page-main .help-search-shell {
    background: var(--v2-bg-primary) !important;
}
#page-help .page-main .help-category-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 12px !important;
}
#page-help .page-main .help-content-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 16px !important;
}

/* Admin: stats grid */
#page-admin .page-main #admin-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 12px !important;
}

/* =====================================================================
   SECTION 3B — Dashboard parity sweep
   Normalizes remaining page-specific components to the same compact,
   low-shadow surfaces used by the dashboard page.
   ===================================================================== */

.page-main :is(
    .design-card,
    .workflow-section-card,
    .generated-designs-panel,
    .first-design-onboarding,
    .first-design-panel,
    .photography-card,
    .billing-panel,
    .billing-surface,
    .billing-stat-card,
    .billing-history-card,
    .settings-section-panel,
    .settings-card,
    .help-support-card,
    .help-ticket-sidebar-card,
    .help-ticket-detail-card,
    .materials-card,
    .materials-surface,
    .materials-vendor-card,
    .materials-market-frame,
    .materials-market-toolbar,
    .materials-product-card,
    .materials-checkout-card,
    .materials-chat-shell,
    .manufacturer-card,
    .manufacturer-market-card,
    .request-card,
    .plan-card,
    .credit-pack
) {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    box-shadow: none !important;
    color: var(--v2-text-primary) !important;
}

.page-main :is(
    .design-card,
    .workflow-section-card,
    .generated-designs-panel,
    .first-design-onboarding,
    .photography-card,
    .billing-surface,
    .billing-stat-card,
    .settings-card,
    .help-support-card,
    .help-ticket-sidebar-card,
    .help-ticket-detail-card,
    .materials-market-frame,
    .materials-market-toolbar,
    .materials-product-card,
    .materials-checkout-card,
    .plan-card,
    .credit-pack
) {
    padding: 16px !important;
}

.page-main :is(
    .generated-designs-header,
    .workflow-section-header,
    .photography-card-header,
    .billing-surface-header,
    .settings-panel-intro,
    .help-ticket-header,
    .photography-results-header,
    .manufacturing-filter-panel-head,
    .materials-section-header
) {
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--v2-text-primary) !important;
}

.page-main :is(
    .workflow-section-kicker,
    .photography-card-kicker,
    .first-design-kicker,
    .first-design-eyebrow,
    .billing-hero-label,
    .billing-stat-label,
    .settings-sidebar-eyebrow,
    .page-overline,
    .plan-banner-label,
    .photo-credits-pill-label,
    .workspace-eyebrow
) {
    color: var(--v2-text-tertiary) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.page-main :is(
    .design-card h2,
    .design-card h3,
    .workflow-section-header h3,
    .photography-card h2,
    .photography-card h3,
    .billing-surface-header h3,
    .settings-panel-intro h2,
    .settings-sidebar-head h3,
    .help-support-card h3,
    .plan-name,
    .credit-pack-amount,
    .manufacturing-card-title,
    .materials-card-title
) {
    color: var(--v2-text-primary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

.page-main :is(
    .design-card p,
    .photography-card p,
    .billing-surface-header p,
    .settings-panel-intro p,
    .settings-sidebar-head p,
    .help-support-card p,
    .plan-features li,
    .credit-pack-rate,
    .plan-banner-price,
    .form-hint
) {
    color: var(--v2-text-secondary) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.page-main :is(
    .choice-item,
    .first-design-choice,
    .quick-template-item,
    .design-3d-mode-btn,
    .photo-preset-chip,
    .upload-dropzone,
    .reference-upload-tile,
    .photography-toggle-card,
    .settings-toggle-row,
    .settings-section-link,
    .help-category-card,
    .help-article-item,
    .materials-tab-card,
    .materials-market-tab,
    .materials-order-item,
    .materials-chat-nav-btn,
    .materials-market-cart-btn,
    .materials-market-search,
    .materials-market-sort-wrap,
    .materials-chat-status,
    .manufacturing-filter-option,
    .payment-method-card,
    .billing-note-item,
    .usage-summary-item,
    .variation-placeholder
) {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    box-shadow: none !important;
    color: var(--v2-text-primary) !important;
}

.page-main :is(
    .choice-item:hover,
    .first-design-choice:hover,
    .quick-template-item:hover,
    .design-3d-mode-btn:hover,
    .photo-preset-chip:hover,
    .settings-section-link:hover,
    .help-category-card:hover,
    .help-article-item:hover,
    .materials-market-tab:hover,
    .materials-order-item:hover,
    .materials-chat-nav-btn:hover,
    .credit-pack:hover,
    .plan-card:hover
) {
    background: var(--v2-bg-secondary) !important;
    border-color: var(--v2-border) !important;
    transform: none !important;
    box-shadow: none !important;
}

.page-main :is(
    .choice-item.is-active,
    .first-design-choice.is-active,
    .design-3d-mode-btn.is-active,
    .photo-preset-chip.active,
    .plan-card.featured,
    .credit-pack.featured
) {
    background: var(--v2-bg-info) !important;
    border-color: color-mix(in srgb, var(--primary) 34%, var(--v2-border)) !important;
    box-shadow: inset 2px 0 0 var(--primary) !important;
}

.page-main :is(.materials-market-tab.active, .materials-order-item.active, .help-category-card.active) {
    background: var(--v2-bg-info) !important;
    border-color: color-mix(in srgb, var(--primary) 34%, var(--v2-border)) !important;
    color: var(--v2-text-primary) !important;
    box-shadow: inset 2px 0 0 var(--primary) !important;
}

.page-main :is(
    .choice-item-icon,
    .plan-icon,
    .credit-pack-icon,
    .plan-banner-icon,
    .payment-method-card-icon,
    .upload-icon,
    .dashboard-empty-state-icon,
    .photography-step-number,
    .step-pill
) {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-secondary) !important;
    border: 0.5px solid var(--v2-border) !important;
    color: var(--v2-text-secondary) !important;
    box-shadow: none !important;
}

.page-main :is(.choice-item-icon svg, .plan-icon svg, .credit-pack-icon svg, .plan-banner-icon svg, .payment-method-card-icon svg) {
    width: 16px !important;
    height: 16px !important;
}

.page-main :is(
    .plan-badge,
    .generated-badge,
    .reference-counter,
    .billing-pill,
    .billing-upgrade-chip,
    .credit-pack-badge,
    .credit-pack-savings,
    .photo-preset-chip-badge,
    .settings-account-badge,
    .settings-twofa-pill,
    .invoice-status
) {
    min-height: 22px !important;
    padding: 3px 8px !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-full) !important;
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-secondary) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.page-main .help-support-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 22px !important;
    padding: 3px 8px !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-full) !important;
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-secondary) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.page-main :is(.plan-btn, .credit-pack-btn, .photography-generate-btn, .dashboard-empty-state-cta) {
    min-height: 34px !important;
    padding: 7px 14px !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-btn-primary-bg) !important;
    border: 0.5px solid var(--v2-btn-primary-bg) !important;
    color: var(--v2-btn-primary-fg) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.page-main :is(.plan-btn:hover, .credit-pack-btn:hover, .photography-generate-btn:hover, .dashboard-empty-state-cta:hover) {
    background: var(--v2-btn-primary-bg-hover) !important;
    transform: none !important;
    box-shadow: none !important;
}

.page-main :is(.photography-textarea, .design-vision-input, .help-search-input-shell, .workspace-search-field, .search-field, .materials-market-search) {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    box-shadow: none !important;
}

.page-main :is(.photography-textarea, .design-vision-input) {
    min-height: 120px !important;
    padding: 12px !important;
    color: var(--v2-text-primary) !important;
}

.page-main :is(.plans-grid, .credits-grid, .billing-summary-grid, .billing-detail-grid, .billing-metrics-grid-fidelity, .help-support-grid, .photography-shell) {
    gap: 16px !important;
}

.page-main :is(.plan-price, .credit-pack-price, .billing-hero-plan, .billing-hero-price, .billing-stat-value, .plan-stat-value) {
    color: var(--v2-text-primary) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
}

.page-main :is(.first-design-steps, .photography-step-list, .billing-note-list, .usage-summary-list) {
    gap: 8px !important;
}

.page-main :is(.billing-hero-metrics, .plan-banner-stats) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#page-manufacturing .page-main .manufacturer-market-card {
    display: grid !important;
    gap: 0 !important;
    overflow: hidden !important;
}

#page-manufacturing .page-main .manufacturer-market-card-main {
    padding: 14px !important;
}

#page-manufacturing .page-main .manufacturer-market-card-title {
    color: var(--v2-text-primary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

#page-manufacturing .page-main .manufacturer-market-card-meta,
#page-materials .page-main :is(.materials-chat-thread-user p, .materials-chat-empty p, .materials-checkout-eyebrow, .materials-checkout-item span) {
    color: var(--v2-text-secondary) !important;
    font-size: 12px !important;
}

/* Manufacturing: center the marketplace and use the full workspace width */
#page-manufacturing .page-main {
    align-items: stretch !important;
}

#page-manufacturing .page-main > .manufacturing-market-toolbar,
#page-manufacturing .page-main > .manufacturing-results-row,
#page-manufacturing .page-main > .manufacturer-network-grid {
    width: min(100%, 1440px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#page-manufacturing .page-main > .manufacturer-network-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

#page-manufacturing .page-main .manufacturer-market-card {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 16px !important;
}

#page-manufacturing .page-main .manufacturer-market-card-main {
    min-width: 0 !important;
}

#page-manufacturing .page-main .manufacturing-results-row {
    grid-template-columns: minmax(160px, auto) minmax(280px, 1fr) !important;
}

@media (max-width: 900px) {
    #page-manufacturing .page-main > .manufacturer-network-grid {
        grid-template-columns: 1fr !important;
    }

    #page-manufacturing .page-main .manufacturer-market-card {
        grid-template-columns: 1fr !important;
    }
}

#page-materials .page-main .materials-chat-shell {
    overflow: hidden !important;
}

#page-materials .page-main :is(.materials-chat-sidebar, .materials-chat-main, .materials-chat-thread, .materials-chat-messages, .materials-chat-form) {
    background: var(--v2-bg-primary) !important;
    border-color: var(--v2-border) !important;
}

#page-materials .page-main :is(.materials-chat-sidebar-header, .materials-chat-thread-header, .materials-chat-form) {
    border-color: var(--v2-border) !important;
}

/* Photography + Materials: explicit rounded dashboard boxes */
#page-photography .page-main :is(
    .photography-card,
    .photography-card-body,
    .photography-preset-grid,
    .photo-preset-chip,
    .photography-upload-dropzone,
    .photography-reference-block,
    .photography-reference-grid,
    .photography-advanced-toggle,
    .photography-advanced-panel,
    .photography-toggle-card,
    .photography-cost-list,
    .photography-cost-row,
    .photography-cost-total,
    .photography-step-row,
    .photography-results-view,
    .photography-result-card,
    .photography-result-media,
    .photography-result-footer,
    .photography-results-empty
) {
    border-radius: var(--v2-radius-lg) !important;
}

#page-photography .page-main :is(
    .photography-reference-block,
    .photography-cost-list,
    .photography-step-row,
    .photography-results-view,
    .photography-result-card,
    .photography-results-empty
) {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    box-shadow: none !important;
}

#page-photography .page-main :is(.photography-card, .photography-result-card) {
    overflow: hidden !important;
}

#page-photography .page-main :is(.photography-cost-row, .photography-step-row) {
    padding: 10px 12px !important;
}

#page-materials .page-main :is(
    .materials-market-frame,
    .materials-market-toolbar,
    .materials-market-search,
    .materials-market-filter-btn,
    .materials-market-cart-btn,
    .materials-market-sort-wrap,
    .materials-market-tab,
    .materials-market-tabs-rail,
    .materials-market-results-shell,
    .materials-market-grid-redesign,
    .material-card,
    .material-image,
    .material-market-card,
    .material-market-card-media,
    .material-market-card-body,
    .material-market-badge,
    .materials-panel,
    .materials-sell-layout,
    .materials-chat-shell,
    .materials-chat-sidebar,
    .materials-chat-main,
    .materials-chat-empty,
    .materials-chat-thread,
    .materials-chat-thread-header,
    .materials-chat-nav-btn,
    .materials-chat-count,
    .materials-order-item,
    .materials-order-status,
    .materials-chat-status,
    .materials-checkout-card,
    .materials-checkout-item,
    .materials-checkout-note,
    .materials-feedback-summary,
    .materials-feedback-panel,
    .materials-chat-form,
    .materials-chat-form .form-input,
    .materials-product-modal,
    .materials-product-modal-shell,
    .materials-product-modal-stage,
    .materials-product-modal-glance,
    .materials-product-modal-panel,
    .materials-product-modal-spec-item,
    .materials-product-modal-total-card,
    .materials-product-modal-qty-btn,
    .materials-product-modal-quantity-input,
    .materials-product-modal-badge
) {
    border-radius: var(--v2-radius-lg) !important;
}

#page-materials .page-main :is(
    .materials-market-frame,
    .materials-market-toolbar,
    .materials-market-results-shell,
    .material-card,
    .material-market-card,
    .materials-chat-shell,
    .materials-checkout-card,
    .materials-feedback-summary,
    .materials-feedback-panel
) {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    box-shadow: none !important;
}

#page-materials .page-main :is(.material-card, .material-market-card, .materials-chat-shell, .materials-checkout-card) {
    overflow: hidden !important;
}

#page-materials .page-main :is(.materials-market-toolbar, .materials-market-results-shell) {
    padding: 12px !important;
}

#page-materials .page-main .materials-market-tabs-rail {
    height: 4px !important;
    margin-top: 8px !important;
    background: var(--v2-bg-secondary) !important;
}

#page-materials .page-main .materials-market-grid-redesign {
    gap: 16px !important;
}

#page-admin .page-main #admin-stats > div {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    box-shadow: none !important;
}

#page-admin .page-main #admin-stats > div > div:first-child {
    color: var(--v2-text-primary) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
}

#page-admin .page-main #admin-stats > div > div:last-child {
    color: var(--v2-text-tertiary) !important;
    font-size: 11px !important;
}

/* Settings + Help: lock active and informational highlights to dashboard gold */
#page-settings,
#page-help {
    --primary: #cbb176;
    --primary-light: #e4ce92;
    --primary-dark: #8d7549;
    --primary-gradient: linear-gradient(135deg, #cbb176 0%, #e4ce92 100%);
    --info: #cbb176;
    --accent-primary: #cbb176;
    --accent-muted: rgba(201, 177, 118, 0.08);
    --border-medium: rgba(201, 170, 104, 0.42);
    --v2-bg-info: rgba(201, 177, 118, 0.10);
    --v2-text-info: #cbb176;
    --v2-btn-primary-bg: #cbb176;
    --v2-btn-primary-fg: #111111;
    --v2-btn-primary-bg-hover: #e4ce92;
}

#page-settings .page-main :is(.settings-section-link.active, .settings-section-link:hover),
#page-help .page-main :is(
    .help-category-card.active,
    .help-category-card:hover,
    .help-article-item.active,
    .help-article-item:hover,
    .help-ticket-item.active,
    .help-ticket-filter-bar .btn.active
) {
    background: rgba(201, 177, 118, 0.08) !important;
    border-color: rgba(201, 170, 104, 0.42) !important;
    color: var(--v2-text-primary) !important;
    box-shadow: inset 2px 0 0 #cbb176 !important;
}

#page-settings .page-main :is(.btn-primary, .settings-switch),
#page-help .page-main :is(.btn-primary, .dashboard-empty-state-cta) {
    accent-color: #cbb176 !important;
}

#page-settings .page-main :is(.btn-primary, .dashboard-empty-state-cta),
#page-help .page-main :is(.btn-primary, .dashboard-empty-state-cta) {
    background: #cbb176 !important;
    border-color: #cbb176 !important;
    color: #111111 !important;
    background-image: none !important;
    box-shadow: none !important;
}

#page-settings .page-main :is(.btn-primary:hover, .dashboard-empty-state-cta:hover),
#page-help .page-main :is(.btn-primary:hover, .dashboard-empty-state-cta:hover) {
    background: #e4ce92 !important;
    border-color: #e4ce92 !important;
    color: #111111 !important;
}

#page-settings .page-main :is(.form-input:focus, input:focus, select:focus, textarea:focus),
#page-help .page-main :is(.form-input:focus, input:focus, select:focus, textarea:focus) {
    border-color: rgba(201, 170, 104, 0.58) !important;
    box-shadow: 0 0 0 3px rgba(201, 177, 118, 0.14) !important;
    outline: none !important;
}

#page-help .page-main :is(.help-category-card span, .help-support-cta, .help-support-icon),
#page-settings .page-main :is(.settings-account-badge-label, .settings-twofa-backup strong) {
    color: #cbb176 !important;
}

#page-help .page-main .help-ticket-badge.status-waiting_on_customer {
    background: rgba(201, 177, 118, 0.08) !important;
    border-color: rgba(201, 170, 104, 0.42) !important;
    color: #cbb176 !important;
}

/* =====================================================================
   SECTION 4 — Responsive
   ===================================================================== */
@media (max-width: 1024px) {
    .page-topbar {
        padding: 0 16px !important;
    }
    .page-main {
        padding: 16px !important;
    }
    #page-settings .page-main .settings-workspace {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    #app.app-container {
        --sidebar-width: 220px;
    }

    #app .main-content {
        margin-left: 0;
        width: 100%;
    }

    #app .header {
        height: auto;
        min-height: var(--header-height);
        flex-wrap: wrap;
        align-content: center;
        gap: 8px 12px;
        padding: 8px 20px;
    }

    #app .mobile-menu-btn {
        order: 1;
    }

    #app .header-actions {
        order: 2;
        margin-left: auto;
        min-width: 0;
        max-width: calc(100% - 48px);
        overflow-x: auto;
        scrollbar-width: none;
    }

    #app .header-actions::-webkit-scrollbar {
        display: none;
    }

    #app .search-bar {
        order: 3;
        flex: 1 0 100%;
        max-width: none;
    }

    #app .search-bar input {
        height: 40px;
    }

    #app .sidebar {
        transform: translateX(-100%);
    }

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

@media (max-width: 640px) {
    .page-topbar > .page-header > div:first-child,
    .page-topbar > .hero-banner > .hero-banner-content,
    .page-topbar > .workspace-header > div:first-child {
        gap: 0 !important;
    }
    .page-topbar .page-subtitle,
    .page-topbar .hero-subtitle {
        display: none !important;
    }
}

/* =====================================================================
   SECTION 5 — Dashboard-specific styling (uses .dashboard-* wrappers)
   Tokens are already declared in SECTION 1 for #page-dashboard, so this
   section only contains visual rules that target the bespoke dashboard
   wrappers (.dashboard-layout / .dashboard-topbar / .dashboard-main).
   ===================================================================== */

/* ── Reset the page wrapper to give us a clean canvas ── */
#page-dashboard.page {
    background: var(--v2-bg-tertiary);
}

#page-dashboard .page-content.dashboard-page {
    padding: 0 !important;
    background: var(--v2-bg-tertiary);
}

/* ── Layout: column with topbar + scrollable content (mirrors v2 AppShell .main) ── */
#page-dashboard .dashboard-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--v2-bg-tertiary);
    color: var(--v2-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

/* ── Topbar (mirrors v2 Topbar) ── */
#page-dashboard .dashboard-topbar {
    height: var(--v2-topbar-height);
    background: var(--v2-bg-primary);
    border-bottom: 0.5px solid var(--v2-border);
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* The existing .dashboard-hero element becomes our topbar title group */
#page-dashboard .dashboard-topbar .dashboard-hero {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

#page-dashboard .dashboard-topbar .dashboard-hero-text {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

#page-dashboard .dashboard-topbar .dashboard-hero h1 {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--v2-text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}

#page-dashboard .dashboard-topbar .dashboard-hero h1 span {
    font-weight: 500;
    color: var(--v2-text-primary);
}

#page-dashboard .dashboard-topbar .dashboard-hero p {
    font-size: 12px !important;
    color: var(--v2-text-tertiary) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* ── Main scrollable content (mirrors v2 AppShell .content) ── */
#page-dashboard .dashboard-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    background: var(--v2-bg-tertiary);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Metric grid (4 compact cards, light theme) ── */
#page-dashboard .dashboard-main .dashboard-metric-grid {
    margin: 0 !important;
    gap: 12px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#page-dashboard .dashboard-main .dashboard-metric-card {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    padding: 16px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-shadow: none !important;
}

#page-dashboard .dashboard-main .dashboard-metric-top {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

#page-dashboard .dashboard-main .dashboard-metric-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-secondary) !important;
    border: none !important;
    color: var(--v2-text-secondary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page-dashboard .dashboard-main .dashboard-metric-icon svg {
    width: 16px !important;
    height: 16px !important;
}

#page-dashboard .dashboard-main .dashboard-metric-delta {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--v2-text-success) !important;
    background: transparent !important;
    padding: 0 !important;
}

#page-dashboard .dashboard-main .dashboard-metric-delta.down {
    color: var(--v2-text-danger) !important;
}

#page-dashboard .dashboard-main .dashboard-metric-label {
    margin: 4px 0 0 0 !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    color: var(--v2-text-tertiary) !important;
    text-transform: uppercase !important;
}

#page-dashboard .dashboard-main .dashboard-metric-value {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    color: var(--v2-text-primary) !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
}

/* ── Priority actions ── */
#page-dashboard .dashboard-main .dashboard-action-grid {
    margin: 0 !important;
    gap: 12px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#page-dashboard .dashboard-main .dashboard-action-tile {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-md) !important;
    padding: 12px 14px !important;
    min-height: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--v2-text-primary) !important;
    box-shadow: none !important;
}

#page-dashboard .dashboard-main .dashboard-action-tile:hover {
    border-color: var(--v2-text-secondary) !important;
    transform: none !important;
    background: var(--v2-bg-secondary) !important;
}

#page-dashboard .dashboard-main .dashboard-action-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-secondary) !important;
    border: none !important;
    color: var(--v2-text-secondary) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

#page-dashboard .dashboard-main .dashboard-action-icon svg {
    width: 16px !important;
    height: 16px !important;
}

#page-dashboard .dashboard-main .dashboard-action-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    color: var(--v2-text-primary) !important;
}

/* ── Two-column content grid ── */
#page-dashboard .dashboard-main .dashboard-content-grid {
    margin: 0 !important;
    gap: 16px !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
}

#page-dashboard .dashboard-main .dashboard-panel {
    background: var(--v2-bg-primary) !important;
    border: 0.5px solid var(--v2-border) !important;
    border-radius: var(--v2-radius-lg) !important;
    padding: 16px !important;
    box-shadow: none !important;
}

#page-dashboard .dashboard-main .dashboard-panel-header {
    margin-bottom: 12px !important;
    border: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#page-dashboard .dashboard-main .dashboard-panel-header h2 {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--v2-text-primary) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

#page-dashboard .dashboard-main .dashboard-link {
    font-size: 12px !important;
    color: var(--v2-text-info) !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* ── Active Projects table panel ── */
#page-dashboard .dashboard-main .dashboard-panel-table {
    padding: 0 !important;
    overflow: hidden !important;
}

#page-dashboard .dashboard-main .dashboard-panel-table .dashboard-panel-header {
    padding: 14px 16px !important;
    border-bottom: 0.5px solid var(--v2-border) !important;
    margin: 0 !important;
}

#page-dashboard .dashboard-main .dashboard-table {
    min-width: 0 !important;
    width: 100% !important;
    border-collapse: collapse !important;
}

#page-dashboard .dashboard-main .dashboard-table th {
    padding: 10px 16px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--v2-text-tertiary) !important;
    background: var(--v2-bg-tertiary) !important;
    border-bottom: 0.5px solid var(--v2-border) !important;
    text-align: left !important;
}

#page-dashboard .dashboard-main .dashboard-table td {
    padding: 12px 16px !important;
    font-size: 13px !important;
    color: var(--v2-text-secondary) !important;
    border-bottom: 0.5px solid var(--v2-border) !important;
    line-height: 1.4 !important;
}

#page-dashboard .dashboard-main .dashboard-table tr:last-child td {
    border-bottom: none !important;
}

#page-dashboard .dashboard-main .dashboard-status-pill {
    min-width: 0 !important;
    padding: 2px 8px !important;
    border-radius: var(--v2-radius-full) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    background: var(--v2-bg-secondary) !important;
    color: var(--v2-text-secondary) !important;
}

/* ── Side column ── */
#page-dashboard .dashboard-main .dashboard-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

#page-dashboard .dashboard-main .dashboard-side .dashboard-panel {
    padding: 16px !important;
}

#page-dashboard .dashboard-main .dashboard-side .dashboard-panel-header {
    margin-bottom: 12px !important;
}

/* Recent activity */
#page-dashboard .dashboard-main .dashboard-activity-list {
    display: flex;
    flex-direction: column;
}

#page-dashboard .dashboard-main .dashboard-activity-item {
    padding: 10px 0 !important;
    gap: 10px !important;
    border-bottom: 0.5px solid var(--v2-border) !important;
}

#page-dashboard .dashboard-main .dashboard-activity-item:last-child {
    border-bottom: none !important;
}

#page-dashboard .dashboard-main .dashboard-activity-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--v2-radius-md) !important;
    flex-shrink: 0 !important;
}

#page-dashboard .dashboard-main .dashboard-activity-copy h4 {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--v2-text-primary) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

#page-dashboard .dashboard-main .dashboard-activity-meta {
    font-size: 12px !important;
    color: var(--v2-text-secondary) !important;
}

#page-dashboard .dashboard-main .dashboard-activity-time {
    margin-top: 2px !important;
    font-size: 11px !important;
    color: var(--v2-text-tertiary) !important;
}

/* Monthly stats */
#page-dashboard .dashboard-main .dashboard-monthly-stats {
    display: flex;
    flex-direction: column;
}

#page-dashboard .dashboard-main .dashboard-monthly-row {
    padding: 8px 0 !important;
    font-size: 13px !important;
    color: var(--v2-text-secondary) !important;
    display: flex;
    justify-content: space-between;
    border-bottom: 0.5px solid var(--v2-border) !important;
}

#page-dashboard .dashboard-main .dashboard-monthly-row:last-child {
    border-bottom: none !important;
}

#page-dashboard .dashboard-main .dashboard-monthly-row strong {
    color: var(--v2-text-primary) !important;
    font-weight: 500 !important;
}

#page-dashboard .dashboard-main .dashboard-monthly-row.total {
    border-top: 0.5px solid var(--v2-border) !important;
    margin-top: 4px !important;
    padding-top: 12px !important;
}

/* Plan card */
#page-dashboard .dashboard-main .dashboard-plan-card {
    background: var(--v2-bg-primary) !important;
}

#page-dashboard .dashboard-main .dashboard-plan-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

#page-dashboard .dashboard-main .dashboard-plan-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--v2-radius-md) !important;
    background: var(--v2-bg-info) !important;
    color: var(--v2-text-info) !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#page-dashboard .dashboard-main .dashboard-plan-icon svg {
    width: 16px !important;
    height: 16px !important;
}

#page-dashboard .dashboard-main .dashboard-plan-label {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--v2-text-tertiary) !important;
}

#page-dashboard .dashboard-main .dashboard-plan-card h3 {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--v2-text-primary) !important;
    margin: 0 !important;
}

#page-dashboard .dashboard-main .dashboard-plan-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#page-dashboard .dashboard-main .dashboard-plan-list li {
    font-size: 12px !important;
    color: var(--v2-text-secondary) !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

#page-dashboard .dashboard-main .dashboard-plan-list .plan-check {
    color: var(--v2-text-success) !important;
}

#page-dashboard .dashboard-main .dashboard-plan-btn {
    width: 100% !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: var(--v2-btn-primary-bg) !important;
    color: var(--v2-btn-primary-fg) !important;
    border: 0.5px solid var(--v2-btn-primary-bg) !important;
    border-radius: var(--v2-radius-md) !important;
    cursor: pointer;
}

#page-dashboard .dashboard-main .dashboard-plan-btn:hover {
    background: var(--v2-btn-primary-bg-hover) !important;
}

/* ── Responsive: stack the side column under main on smaller screens ── */
@media (max-width: 1024px) {
    #page-dashboard .dashboard-main .dashboard-content-grid {
        grid-template-columns: 1fr !important;
    }
    #page-dashboard .dashboard-main .dashboard-metric-grid,
    #page-dashboard .dashboard-main .dashboard-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    #page-dashboard .dashboard-main .dashboard-metric-grid,
    #page-dashboard .dashboard-main .dashboard-action-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================================
   SECTION 6 — Sidebar section grouping
   Adds the v2-style grouped sections (Create / Network / Insights /
   Account) to the existing .sidebar-nav. Only the new wrapper classes
   (.sidebar-section, .sidebar-section-label) and a single divider line
   are styled — no existing .nav-item or .sidebar-* rules are overridden.
   Theme-aware via the existing app[data-theme] attribute.
   ===================================================================== */

.sidebar-nav .sidebar-section {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    border-bottom: 0.5px solid var(--border-color, #e5e5e5);
}

.sidebar-nav .sidebar-section:last-child {
    border-bottom: none;
}

.sidebar-nav .sidebar-section-label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #a1a1aa);
    padding: 6px 16px 4px;
    user-select: none;
}

#app .sidebar-header {
    min-height: 56px;
    padding: 14px 16px;
    border-bottom-width: 0.5px;
}

#app .sidebar-logo {
    gap: 10px;
    min-width: 0;
}

#app .sidebar-logo-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    box-shadow: none;
    flex-shrink: 0;
}

#app .sidebar-logo-icon svg {
    width: 15px;
    height: 15px;
}

#app .sidebar-logo-text {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#app .sidebar-nav {
    padding: 0;
}

#app .nav-item {
    min-height: 30px;
    gap: 8px;
    margin: 0;
    padding: 6px 16px 6px 14px;
    border-radius: 0;
    border-left: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 13px;
    box-shadow: none;
}

#app .nav-item:hover {
    background: var(--sidebar-hover);
    color: var(--text-primary);
    transform: none;
}

#app .nav-item.active {
    background: var(--sidebar-hover);
    color: var(--text-primary);
    border-left-color: var(--primary);
    box-shadow: none;
}

#app .nav-item-icon {
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: var(--border-color);
    color: transparent;
    stroke: transparent;
    flex-shrink: 0;
}

#app .nav-item-icon * {
    display: none;
}

#app .nav-item.active .nav-item-icon {
    background: var(--primary);
}

#app .nav-item-text {
    min-width: 0;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#app .nav-item.active .nav-item-text {
    font-weight: 500;
}

#app .nav-item-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: var(--radius-full);
}

#app .sidebar-footer {
    padding: 12px 16px;
    border-top-width: 0.5px;
}

#app .sidebar-logout {
    min-height: 30px;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-radius: 0;
    color: var(--text-secondary);
    background: transparent;
    font-size: 12px;
}

#app .sidebar-logout:hover {
    color: var(--text-primary);
    background: transparent;
}

#app .sidebar-logout svg {
    width: 14px;
    height: 14px;
}

/* Hide a section's label/border if every nav item in it is hidden
   (e.g. the Account section has Team and Admin which can be hidden via
   .nav-item-hidden / inline display:none). The :has() check is still
   well-supported in current browsers; if unsupported the section just
   stays visible with its label, which is also acceptable. */
.sidebar-nav .sidebar-section:not(:has(.nav-item:not(.nav-item-hidden):not([style*="display: none"]):not([style*="display:none"]))) {
    display: none;
}

/* Dark-mode override for the divider — uses the existing app theme attr
   so light mode keeps the existing border tone, dark mode goes deeper. */
#app[data-theme="dark"] .sidebar-nav .sidebar-section {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

#app[data-theme="dark"] .sidebar-nav .sidebar-section-label {
    color: rgba(255, 255, 255, 0.45);
}

/* =====================================================================
   SECTION 7 — Design Studio (v2 visual treatment)
   Scope: only #page-design-studio. All rules are visual layer-overrides
   that match aurumflow-ui-v2's CADReviewWorkspace + ReferenceImageUpload
   patterns. NO HTML, JS, or PHP is changed — these styles attach to the
   existing class names already in index.php.
   Theme-aware via #app[data-theme="dark"].
   ===================================================================== */

/* ---------- v2 design tokens for the design studio page ---------- */
/* Color scheme: aurumflow black / warm neutral / gold (#d4af37).
   All surfaces are warm-neutral (no blue/slate undertone) to match
   the rest of aurumflow. Dark surfaces echo the existing choice-item
   palette (#121211, #1d1b18, #2a261f) so cards read as warm dark
   instead of cool slate-blue. */
#page-design-studio {
    --ds-surface: #ffffff;
    --ds-surface-soft: #f5f5f5;
    --ds-surface-tert: #ebebeb;
    --ds-info-bg: rgba(212, 175, 55, 0.18);
    --ds-info-fg: #8a6d1f;
    --ds-info-border: #d4af37;
    --ds-border: #e0e0e0;
    --ds-border-soft: rgba(0, 0, 0, 0.06);
    --ds-text: #1a1a1a;
    --ds-text-secondary: #555555;
    --ds-text-tertiary: #999999;
    --ds-radius-sm: 6px;
    --ds-radius-md: 10px;
    --ds-radius-lg: 14px;
    --ds-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
    --ds-accent: #1a1a1a;
    --ds-gold: #d4af37;
    --ds-success: #16a34a;
    --ds-success-bg: #dcfce7;
    --ds-warn: #b45309;
    --ds-warn-bg: #fef3c7;
    --ds-danger: #dc2626;
    --ds-danger-bg: #fee2e2;
}

#app[data-theme="dark"] #page-design-studio {
    --ds-surface: #1a1a1a;
    --ds-surface-soft: #242424;
    --ds-surface-tert: #121212;
    --ds-info-bg: rgba(212, 175, 55, 0.2);
    --ds-info-fg: #d4af37;
    --ds-info-border: #d4af37;
    --ds-border: rgba(255, 255, 255, 0.1);
    --ds-border-soft: rgba(255, 255, 255, 0.05);
    --ds-text: #f0f0f0;
    --ds-text-secondary: #c0c0c0;
    --ds-text-tertiary: #888888;
    --ds-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ds-accent: #f0f0f0;
    --ds-gold: #d4af37;
    --ds-success-bg: rgba(34, 197, 94, 0.18);
    --ds-warn-bg: rgba(245, 158, 11, 0.18);
    --ds-danger-bg: rgba(239, 68, 68, 0.18);
}

/* ---------- Header / page-topbar ---------- */
#page-design-studio .page-topbar .design-studio-header {
    background: transparent;
    padding: 4px 0 12px;
    border: none;
}

#page-design-studio .page-topbar .design-studio-header .page-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 2px;
    color: var(--ds-text);
}

#page-design-studio .page-topbar .design-studio-header .page-subtitle {
    font-size: 13px;
    color: var(--ds-text-tertiary);
    margin: 0;
}

#page-design-studio .design-header-reset {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    color: var(--ds-text);
    border-radius: var(--ds-radius-md);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#page-design-studio .design-header-reset:hover {
    background: var(--ds-surface-soft);
}

/* ---------- Tabs (design-workflow-tabs) ---------- */
#page-design-studio .design-workflow-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ds-border);
    background: transparent;
    padding: 0;
    margin-bottom: 18px;
}

#page-design-studio .design-workflow-tabs .tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
    transition: color .15s ease, border-color .15s ease;
}

#page-design-studio .design-workflow-tabs .tab:hover {
    color: var(--ds-text-secondary);
}

#page-design-studio .design-workflow-tabs .tab.active {
    color: var(--ds-text);
    border-bottom-color: var(--ds-accent);
    background: transparent;
}

#page-design-studio .design-workflow-tabs .tab-icon {
    width: 14px;
    height: 14px;
}

#page-design-studio .design-workflow-tabs .tab-note {
    font-size: 11px;
    color: var(--ds-text-tertiary);
    font-weight: 400;
}

/* ---------- Workflow / design cards ---------- */
#page-design-studio .design-card,
#page-design-studio .workflow-section-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-card);
    padding: 20px 22px;
    margin-bottom: 18px;
}

#page-design-studio .workflow-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

#page-design-studio .workflow-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

#page-design-studio .workflow-step-title h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--ds-text);
    letter-spacing: -0.005em;
}

#page-design-studio .step-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--ds-info-bg);
    color: var(--ds-info-fg);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

#page-design-studio .workflow-section-kicker {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-text-tertiary);
    margin: 0 0 6px;
}

/* ---------- Choice grids (type/style selectors) ---------- */
#page-design-studio .choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

#page-design-studio .choice-item {
    background: var(--ds-surface-soft);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
    color: var(--ds-text);
}

#page-design-studio .choice-item:hover {
    border-color: var(--ds-text-tertiary);
    background: var(--ds-surface);
    box-shadow: none;
}

#page-design-studio .choice-item.is-active {
    border-color: var(--ds-gold);
    background: var(--ds-info-bg);
    color: var(--ds-info-fg);
    box-shadow: 0 0 0 2px var(--ds-gold);
    background-image: none;
}

#page-design-studio .choice-item strong {
    font-size: 13px;
    font-weight: 600;
    color: inherit;
}

#page-design-studio .choice-item span {
    font-size: 11px;
    color: var(--ds-text-tertiary);
    line-height: 1.3;
}

#page-design-studio .choice-item.is-active span {
    color: var(--ds-info-fg);
    opacity: 0.8;
}

#page-design-studio .choice-item-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-text-secondary);
}

#page-design-studio .choice-item.is-active .choice-item-icon {
    color: var(--ds-info-fg);
}

#page-design-studio .choice-item-icon svg {
    width: 100%;
    height: 100%;
}

/* ---------- Design brief area (textarea + templates) ---------- */
#page-design-studio .design-brief-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 18px;
}

#page-design-studio .design-brief-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

#page-design-studio .design-field-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-text-secondary);
    margin-bottom: 6px;
    display: block;
}

#page-design-studio .design-vision-input,
#page-design-studio textarea.form-textarea {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ds-text);
    min-height: 120px;
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#page-design-studio .design-vision-input:focus,
#page-design-studio textarea.form-textarea:focus {
    outline: none;
    border-color: var(--ds-info-fg);
    box-shadow: 0 0 0 3px var(--ds-info-bg);
}

/* ---------- Quick templates ---------- */
#page-design-studio .quick-template-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#page-design-studio .quick-template-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#page-design-studio .quick-template-item {
    background: var(--ds-surface-soft);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    font-size: 12px;
    color: var(--ds-text-secondary);
    line-height: 1.4;
    transition: border-color .15s ease, background .15s ease;
}

#page-design-studio .quick-template-item:hover {
    border-color: var(--ds-info-fg);
    background: var(--ds-info-bg);
    color: var(--ds-info-fg);
}

/* ---------- Reference image upload (v2 ReferenceImageUpload mirror) ---------- */
#page-design-studio .reference-upload-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#page-design-studio .reference-upload-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
}

#page-design-studio .reference-upload-heading .design-field-label {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ds-text-tertiary);
}

#page-design-studio .reference-counter {
    font-size: 11px;
    color: var(--ds-text-tertiary);
    font-weight: 500;
}

#page-design-studio .reference-upload-tile {
    border: 1.5px dashed var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: var(--ds-surface-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: border-color .15s ease, background .15s ease;
}

#page-design-studio .reference-upload-tile:hover {
    border-color: var(--ds-info-fg);
    background: var(--ds-info-bg);
}

#page-design-studio .reference-upload-tile svg {
    width: 22px;
    height: 22px;
    color: var(--ds-text-tertiary);
    margin-bottom: 6px;
}

#page-design-studio .reference-upload-tile:hover svg {
    color: var(--ds-info-fg);
}

#page-design-studio .reference-upload-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-text-secondary);
    margin-bottom: 3px;
}

#page-design-studio .reference-upload-tile:hover .reference-upload-title {
    color: var(--ds-info-fg);
}

#page-design-studio .reference-upload-meta {
    font-size: 11px;
    color: var(--ds-text-tertiary);
}

#page-design-studio .reference-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

#page-design-studio .reference-grid:empty {
    display: none;
}

#page-design-studio .reference-grid > * {
    aspect-ratio: 1;
    background: var(--ds-surface-soft);
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-border);
    overflow: hidden;
    position: relative;
}

#page-design-studio .reference-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- 3D engine selector & related blocks ---------- */
#page-design-studio .design-engine-shell {
    background: var(--ds-surface-soft);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#page-design-studio .design-engine-head .design-field-label {
    margin: 0;
    color: var(--ds-text);
}

#page-design-studio .design-engine-copy {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ds-text-tertiary);
    line-height: 1.4;
}

#page-design-studio .design-3d-mode-panel {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 10px;
}

#page-design-studio .design-3d-mode-toggle {
    display: inline-flex;
    background: var(--ds-surface-soft);
    border-radius: var(--ds-radius-md);
    padding: 3px;
    gap: 2px;
}

#page-design-studio .design-3d-mode-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: calc(var(--ds-radius-md) - 2px);
    color: var(--ds-text-secondary);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

#page-design-studio .design-3d-mode-btn.is-active {
    background: var(--ds-surface);
    color: var(--ds-text);
    box-shadow: var(--ds-shadow-card);
}

/* ---------- Generated designs grid ---------- */
#page-design-studio .generated-designs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 14px;
    gap: 12px;
}

#page-design-studio .generated-designs-header h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--ds-text);
}

#page-design-studio .generated-badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ds-info-bg);
    color: var(--ds-info-fg);
    font-weight: 500;
}

#page-design-studio .generated-badge.is-empty {
    background: var(--ds-surface-soft);
    color: var(--ds-text-tertiary);
}

#page-design-studio .design-variations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

#page-design-studio .variation-placeholder {
    background: var(--ds-surface-soft);
    border: 1px dashed var(--ds-border);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#page-design-studio .variation-placeholder-media {
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--ds-surface-tert), var(--ds-surface-soft));
}

#page-design-studio .variation-placeholder-footer {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--ds-border);
}

#page-design-studio .variation-placeholder-footer span {
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-text-secondary);
}

#page-design-studio .variation-placeholder-footer small {
    font-size: 10px;
    color: var(--ds-text-tertiary);
}

/* ---------- Preview tab proxy (the redirect placeholder) ---------- */
#page-design-studio #tab-3d-viewer .preview-tab-proxy {
    text-align: center;
    padding: 40px 20px;
}

#page-design-studio #tab-3d-viewer .preview-tab-proxy h3 {
    font-size: 16px;
    margin: 0 0 6px;
    color: var(--ds-text);
}

#page-design-studio #tab-3d-viewer .preview-tab-proxy p {
    font-size: 13px;
    color: var(--ds-text-tertiary);
    margin: 0 0 16px;
}

/* =====================================================================
   3D Preview & CAD Review — v2 CADReviewWorkspace mirror
   The existing `.design-preview-grid` already has the 2-col structure
   we need (.design-preview-main-card on the left, .design-preview-side
   on the right). We just dial it to v2's exact look:
     - 1fr / 380px grid
     - viewer area with right border
     - side panel as a chat-area equivalent (white surface, scrollable)
   No HTML changes — purely CSS overrides.
   ===================================================================== */

#page-design-studio #design-preview-panel {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: 0;
    overflow: hidden;
}

#page-design-studio .design-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    min-height: 540px;
    gap: 0;
}

#page-design-studio .design-preview-main-card {
    border-right: 1px solid var(--ds-border);
    background: var(--ds-surface-tert);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#page-design-studio .design-preview-main-card .preview-stage-topbar {
    padding: 12px 16px;
    background: var(--ds-surface);
    border-bottom: 1px solid var(--ds-border);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#page-design-studio .design-preview-main-card .preview-stage-title-wrap h3 {
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    color: var(--ds-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

#page-design-studio .design-back-btn {
    background: transparent;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease, color .15s ease;
}

#page-design-studio .design-back-btn:hover {
    background: var(--ds-surface-soft);
    color: var(--ds-text);
}

#page-design-studio .preview-viewer-wrap {
    position: relative;
    flex: 1;
    min-height: 360px;
    background: var(--ds-surface-tert);
    overflow: hidden;
}

#page-design-studio .preview-viewer-wrap model-viewer {
    width: 100% !important;
    height: 100% !important;
}

#page-design-studio .viewer-poster {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ds-text-tertiary);
    text-align: center;
    padding: 20px;
}

#page-design-studio .viewer-controls-row.preview-controls {
    padding: 10px 14px;
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-border);
    display: flex;
    gap: 8px;
    margin: 0;
}

#page-design-studio .viewer-controls-row.preview-controls .btn {
    background: var(--ds-surface-soft);
    border: 1px solid var(--ds-border);
    color: var(--ds-text-secondary);
    border-radius: var(--ds-radius-sm);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

#page-design-studio .viewer-controls-row.preview-controls .btn:hover {
    background: var(--ds-info-bg);
    color: var(--ds-info-fg);
    border-color: var(--ds-info-border);
}

/* ---------- Right side panel (chat-area equivalent) ---------- */
#page-design-studio .design-preview-side {
    background: var(--ds-surface);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    max-height: 720px;
}

#page-design-studio .design-side-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ds-border);
    border-radius: 0;
    padding: 14px 16px;
    margin: 0;
}

#page-design-studio .design-side-card:last-of-type {
    border-bottom: none;
}

#page-design-studio .design-side-card .workflow-section-kicker {
    margin-bottom: 8px;
}

#page-design-studio .design-side-card h3 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--ds-text);
}

#page-design-studio .design-side-card p {
    font-size: 12px;
    color: var(--ds-text-tertiary);
    line-height: 1.45;
    margin: 0 0 10px;
}

/* CAD Status pill */
#page-design-studio .cad-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface-soft);
    color: var(--ds-text-secondary);
}

#page-design-studio .cad-status-pill.is-pending {
    background: var(--ds-warn-bg);
    color: var(--ds-warn);
    border-color: transparent;
}

#page-design-studio .cad-status-pill.is-generating {
    background: var(--ds-info-bg);
    color: var(--ds-info-fg);
    border-color: transparent;
}

#page-design-studio .cad-status-pill.is-approved {
    background: var(--ds-success-bg);
    color: var(--ds-success);
    border-color: transparent;
}

#page-design-studio .cad-status-pill.is-revision,
#page-design-studio .cad-status-pill.is-declined {
    background: var(--ds-danger-bg);
    color: var(--ds-danger);
    border-color: transparent;
}

/* Specifications list */
#page-design-studio .design-spec-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#page-design-studio .design-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--ds-border-soft);
}

#page-design-studio .design-spec-row:last-child {
    border-bottom: none;
}

#page-design-studio .design-spec-row span {
    color: var(--ds-text-tertiary);
    flex-shrink: 0;
}

#page-design-studio .design-spec-row strong {
    color: var(--ds-text);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

/* Approve / Decline buttons (chat-area "actions" equivalent) */
#page-design-studio .cad-action-btn {
    width: calc(100% - 32px);
    margin: 0 16px 8px;
    padding: 10px 12px;
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-border);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
    background: var(--ds-surface);
    color: var(--ds-text);
}

#page-design-studio .cad-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#page-design-studio .cad-action-btn.approve {
    background: var(--ds-accent);
    color: var(--ds-surface);
    border-color: var(--ds-accent);
}

#page-design-studio .cad-action-btn.approve:not(:disabled):hover {
    opacity: 0.9;
}

#page-design-studio .cad-action-btn.approve.is-approved {
    background: var(--ds-success-bg);
    color: var(--ds-success);
    border-color: transparent;
}

#page-design-studio .cad-action-btn.decline {
    background: var(--ds-surface);
    color: var(--ds-danger);
    border-color: var(--ds-border);
}

#page-design-studio .cad-action-btn.decline:not(:disabled):hover {
    background: var(--ds-danger-bg);
    border-color: transparent;
}

#page-design-studio .cad-action-btn.decline.is-declined {
    background: var(--ds-danger-bg);
    border-color: transparent;
}

#page-design-studio .cad-action-icon {
    font-size: 13px;
}

/* Export production card */
#page-design-studio .export-production-card {
    background: var(--ds-info-bg);
    border-top: 1px solid var(--ds-border);
}

#app[data-theme="dark"] #page-design-studio .export-production-card {
    background: rgba(212, 175, 55, 0.08);
}

#page-design-studio .export-production-card h3 {
    color: var(--ds-info-fg);
}

#page-design-studio .export-production-card .btn-primary {
    width: 100%;
    background: var(--v2-btn-primary-bg, var(--ds-accent));
    color: var(--v2-btn-primary-fg, var(--ds-surface));
    border: none;
    border-radius: var(--ds-radius-md);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 8px;
}

#page-design-studio .export-production-card .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#page-design-studio .export-production-card .btn-secondary {
    width: 100%;
    background: var(--ds-surface);
    color: var(--ds-text-secondary);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* Recent 3D models in side panel */
#page-design-studio .design-hidden-models h3 {
    margin-bottom: 8px;
}

#page-design-studio .design-hidden-models .generated-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

#page-design-studio .design-hidden-models .generated-grid:empty {
    display: none;
}

#page-design-studio .design-hidden-models .generated-grid > * {
    aspect-ratio: 1;
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
    border: 1px solid var(--ds-border);
}

/* ---------- My Collection tab ---------- */
#page-design-studio #tab-collections .card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-card);
}

#page-design-studio #tab-collections .empty-state {
    padding: 60px 20px;
    text-align: center;
}

#page-design-studio #tab-collections .empty-state-icon {
    width: 38px;
    height: 38px;
    color: var(--ds-text-tertiary);
    margin-bottom: 12px;
}

#page-design-studio #tab-collections .empty-state-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--ds-text);
    margin: 0 0 4px;
}

#page-design-studio #tab-collections .empty-state-text {
    font-size: 13px;
    color: var(--ds-text-tertiary);
    margin: 0;
}

/* ---------- Responsive: stack the 2-col preview at <=1024px ---------- */
@media (max-width: 1024px) {
    #page-design-studio .design-preview-grid {
        grid-template-columns: 1fr;
    }

    #page-design-studio .design-preview-main-card {
        border-right: none;
        border-bottom: 1px solid var(--ds-border);
    }

    #page-design-studio .design-preview-side {
        max-height: none;
    }

    #page-design-studio .design-brief-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    #page-design-studio .choice-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #page-design-studio .reference-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =====================================================================
   SECTION 8 — Design Studio "Create Design" tab: 2-column layout
   Mirrors the v2 pattern of (steps on left + live preview on right).

   Strategy (pure CSS, no HTML/JS/PHP changes):
     - Make #tab-generate.tab-content.active a CSS Grid with two cols.
     - All create-stage cards (Steps 1-3 with the Generate button at the
       bottom of Step 3) flow into the LEFT column.
     - Gallery, Refine, and 3D Preview panels share the RIGHT column.
       The existing JS-driven `is-visible` toggling still controls which
       stage panel is shown there.
     - During the "create" stage (when nothing has been generated yet)
       force the gallery panel to remain visible so its 4 placeholder
       tiles act as a live-preview hint on the right.
     - The right column is sticky so the preview stays visible while the
       user scrolls through long step content on the left.

   Existing IDs, classes, data attributes, and JS handlers are preserved
   exactly. The existing `[data-design-view] { display: none }` and
   `[data-design-view].is-visible { display: block }` rules from
   style.css continue to drive the stage-switching for refine/preview.
   ===================================================================== */

#page-design-studio #tab-generate.tab-content.active {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

/* LEFT COLUMN — every create-stage card (Steps 1, 2, 3 with the
   embedded engine block, Generate button, and progress bar). */
#page-design-studio #tab-generate.tab-content.active > [data-design-view="create"] {
    grid-column: 1;
    margin-bottom: 0;
}

/* RIGHT COLUMN — gallery / refine / preview panels share this column.
   They stack vertically and JS-driven `is-visible` decides which one
   is rendered (the others are display:none from style.css). The first
   visible one therefore occupies the column. */
#page-design-studio #tab-generate.tab-content.active > [data-design-view="gallery"],
#page-design-studio #tab-generate.tab-content.active > [data-design-view="refine"],
#page-design-studio #tab-generate.tab-content.active > [data-design-view="preview"] {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
}

/* Make the right column sticky so the preview stays in view while the
   user scrolls steps on the left. */
#page-design-studio #tab-generate.tab-content.active > [data-design-view="gallery"],
#page-design-studio #tab-generate.tab-content.active > [data-design-view="refine"],
#page-design-studio #tab-generate.tab-content.active > [data-design-view="preview"] {
    position: sticky;
    top: 16px;
    align-self: start;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

/* Live preview during the create stage:
   when the page is in `data-design-view="create"` mode the gallery
   panel is normally hidden by the global rule in style.css. Force it
   to remain visible so the 4 placeholder tiles act as a live-preview
   hint on the right side. The JS still adds `is-visible` to the
   gallery panel when results land, so this override is safe. */
#page-design-studio[data-design-view="create"] #tab-generate.tab-content.active > .generated-designs-panel {
    display: block;
}

/* Generate button row inside Step 3: lift it to feel like a sticky
   bottom CTA inside the left column (without changing its position
   in HTML). */
#page-design-studio #tab-generate .design-workflow-actions {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--ds-border);
    display: flex;
    justify-content: flex-end;
}

#page-design-studio #tab-generate .generate-variations-btn {
    background: var(--v2-btn-primary-bg, var(--ds-accent));
    color: var(--v2-btn-primary-fg, var(--ds-surface));
    border: none;
    border-radius: var(--ds-radius-md);
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#page-design-studio #tab-generate .generate-variations-btn:hover {
    opacity: 0.92;
}

#page-design-studio #tab-generate .generate-variations-btn svg {
    width: 16px;
    height: 16px;
}

/* Variation progress bar styled inline below Generate button. */
#page-design-studio #tab-generate .variation-progress {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--ds-info-bg);
    color: var(--ds-info-fg);
    border-radius: var(--ds-radius-md);
    font-size: 12px;
}

#page-design-studio #tab-generate .generated-designs-progress {
    margin: 0 0 16px;
}

/* Tighten the inner spacing on the gallery panel when it acts as a
   live preview so it fits nicely in the sticky right column. */
#page-design-studio #tab-generate.tab-content.active > .generated-designs-panel {
    padding: 18px 18px 20px;
}

#page-design-studio #tab-generate.tab-content.active > .generated-designs-panel .generated-designs-header {
    margin-bottom: 12px;
}

#page-design-studio #tab-generate.tab-content.active > .generated-designs-panel .design-variations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Refine and Preview panels in the right column should not have their
   double-card padding/border (they already have an inner card layout). */
#page-design-studio #tab-generate.tab-content.active > #design-refine-panel,
#page-design-studio #tab-generate.tab-content.active > #design-preview-panel {
    padding: 0;
}

/* Stack to single column at narrower viewports. */
@media (max-width: 1100px) {
    #page-design-studio #tab-generate.tab-content.active {
        grid-template-columns: 1fr;
    }

    #page-design-studio #tab-generate.tab-content.active > [data-design-view="gallery"],
    #page-design-studio #tab-generate.tab-content.active > [data-design-view="refine"],
    #page-design-studio #tab-generate.tab-content.active > [data-design-view="preview"] {
        grid-column: 1;
        grid-row: auto;
        position: static;
        max-height: none;
        overflow: visible;
    }

    #page-design-studio[data-design-view="create"] #tab-generate.tab-content.active > .generated-designs-panel {
        display: none;
    }
}

/* When the generated work becomes the user's focus, give it the full
   studio area instead of keeping it trapped in the create-stage sidebar. */
#page-design-studio:not([data-design-view="create"]) #tab-generate.tab-content.active {
    grid-template-columns: minmax(0, 1fr);
}

#page-design-studio:not([data-design-view="create"]) #tab-generate.tab-content.active > [data-design-view="gallery"],
#page-design-studio:not([data-design-view="create"]) #tab-generate.tab-content.active > [data-design-view="refine"],
#page-design-studio:not([data-design-view="create"]) #tab-generate.tab-content.active > [data-design-view="preview"] {
    grid-column: 1 / -1;
    grid-row: auto;
    position: static;
    max-height: none;
    overflow: visible;
    width: 100%;
}

#page-design-studio[data-design-view="gallery"] #tab-generate.tab-content.active > .generated-designs-panel {
    padding: clamp(20px, 3vw, 34px);
}

#page-design-studio[data-design-view="gallery"] #tab-generate.tab-content.active > .generated-designs-panel .generated-designs-header {
    margin-bottom: 18px;
}

#page-design-studio[data-design-view="gallery"] #tab-generate.tab-content.active > .generated-designs-panel .design-variations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}

#page-design-studio[data-design-view="gallery"] .variation-card,
#page-design-studio[data-design-view="gallery"] .variation-placeholder {
    min-height: clamp(320px, 36vh, 500px) !important;
}

#page-design-studio[data-design-view="gallery"] .variation-media,
#page-design-studio[data-design-view="gallery"] .variation-placeholder-media {
    flex: 1 1 auto;
    min-height: clamp(210px, 28vh, 360px) !important;
    aspect-ratio: 1 / 1;
}

@media (max-width: 560px) {
    #page-design-studio[data-design-view="gallery"] #tab-generate.tab-content.active > .generated-designs-panel .design-variations-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

#page-design-studio .variation-card-footer-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

#page-design-studio .variation-card-helper {
    color: var(--design-gallery-muted, var(--ds-text-tertiary));
    font-size: 0.78rem;
    line-height: 1.3;
    font-weight: 400;
}