/* 
   WEBSITE CENTRE - Style Sheet
   Premium, clean, modern, trustworthy design system
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Color Palette - HSL (Light Premium with Dark Accents) */
    --primary-hue: 220;
    --primary: hsl(var(--primary-hue), 85%, 20%); /* Rich navy dark accent */
    --primary-light: hsl(var(--primary-hue), 85%, 35%);
    --primary-rgb: 8, 32, 74;
    
    --accent-hue: 200;
    --accent: hsl(var(--accent-hue), 95%, 45%); /* Sleek blue accent */
    --accent-hover: hsl(var(--accent-hue), 95%, 38%);
    
    --bg-hue: 210;
    --bg-main: hsl(var(--bg-hue), 20%, 98%); /* Soft off-white */
    --bg-card: hsl(0, 0%, 100%);
    --bg-nav: rgba(255, 255, 255, 0.85);
    
    --text-main: hsl(var(--primary-hue), 25%, 15%);
    --text-muted: hsl(var(--primary-hue), 15%, 45%);
    --text-light: hsl(var(--primary-hue), 10%, 65%);
    
    --border-color: hsl(var(--primary-hue), 20%, 90%);
    --border-hover: hsl(var(--primary-hue), 30%, 80%);
    
    /* Semantic statuses for admin dashboard */
    --status-new: hsl(35, 100%, 96%);
    --status-new-text: hsl(35, 80%, 35%);
    --status-review: hsl(200, 100%, 96%);
    --status-review-text: hsl(200, 80%, 35%);
    --status-approved: hsl(145, 100%, 96%);
    --status-approved-text: hsl(145, 80%, 25%);
    --status-deployed: hsl(270, 100%, 96%);
    --status-deployed-text: hsl(270, 80%, 35%);
    --status-unpaid: hsl(0, 100%, 96%);
    --status-unpaid-text: hsl(0, 80%, 35%);

    /* Typography */
    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Spacing & Borders */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 30px rgba(8, 32, 74, 0.05);
    --shadow-lg: 0 20px 50px rgba(8, 32, 74, 0.08);
    
    --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

:root,
[data-site-theme="default"] {
    --primary-hue: 220;
    --primary: hsl(var(--primary-hue), 85%, 20%);
    --primary-light: hsl(var(--primary-hue), 85%, 35%);
    --primary-rgb: 8, 32, 74;
    --accent-hue: 200;
    --accent: hsl(var(--accent-hue), 95%, 45%);
    --accent-hover: hsl(var(--accent-hue), 95%, 38%);
    --bg-hue: 210;
    --bg-main: hsl(var(--bg-hue), 20%, 98%);
    --bg-card: hsl(0, 0%, 100%);
    --bg-nav: rgba(255, 255, 255, 0.85);
    --text-main: hsl(var(--primary-hue), 25%, 15%);
    --text-muted: hsl(var(--primary-hue), 15%, 45%);
    --text-light: hsl(var(--primary-hue), 10%, 65%);
    --border-color: hsl(var(--primary-hue), 20%, 90%);
    --border-hover: hsl(var(--primary-hue), 30%, 80%);
    --theme-button-radius: var(--radius-sm);
    --theme-card-radius: var(--radius-md);
    --theme-section-spacing: 5rem;
    --theme-card-shadow: var(--shadow-md);
}

[data-site-theme="humanistic-growth-system"] { --primary-hue: 158; --primary: #184e3b; --primary-light: #2c7659; --primary-rgb: 24, 78, 59; --accent-hue: 27; --accent: #ee9b55; --accent-hover: #d77d34; --bg-hue: 40; --bg-main: #faf7f0; --bg-card: #ffffff; --bg-nav: rgba(250, 247, 240, 0.9); --text-main: #183229; --text-muted: #587065; --text-light: #94a49c; --border-color: #dce5dc; --border-hover: #b8cdbd; --theme-button-radius: 10px; --theme-card-radius: 14px; --theme-section-spacing: 5rem; --theme-card-shadow: 0 10px 30px rgba(24, 78, 59, 0.08); }
[data-site-theme="glacier"] { --primary-hue: 231; --primary: #312e81; --primary-light: #6366f1; --primary-rgb: 49, 46, 129; --accent-hue: 196; --accent: #38bdf8; --accent-hover: #0284c7; --bg-hue: 210; --bg-main: #f8fbff; --bg-card: #ffffff; --bg-nav: rgba(248, 251, 255, 0.88); --text-main: #111827; --text-muted: #475569; --text-light: #94a3b8; --border-color: #dbeafe; --border-hover: #bfdbfe; --theme-button-radius: 10px; --theme-card-radius: 16px; --theme-section-spacing: 5rem; --theme-card-shadow: 0 10px 34px rgba(49, 46, 129, 0.08); }
[data-site-theme="ocean-professional"] { --primary-hue: 205; --primary: #073b4c; --primary-light: #0f766e; --primary-rgb: 7, 59, 76; --accent-hue: 188; --accent: #0891b2; --accent-hover: #0e7490; --bg-hue: 200; --bg-main: #f5fbfc; --bg-card: #ffffff; --bg-nav: rgba(245, 251, 252, 0.88); --text-main: #102a37; --text-muted: #4b6670; --text-light: #8aa3ad; --border-color: #cfe8ee; --border-hover: #9dd5df; --theme-button-radius: 8px; --theme-card-radius: 14px; --theme-section-spacing: 5rem; --theme-card-shadow: 0 10px 30px rgba(7, 59, 76, 0.07); }
[data-site-theme="forest-growth"] { --primary-hue: 150; --primary: #14532d; --primary-light: #15803d; --primary-rgb: 20, 83, 45; --accent-hue: 84; --accent: #84cc16; --accent-hover: #65a30d; --bg-hue: 95; --bg-main: #fbfdf7; --bg-card: #ffffff; --bg-nav: rgba(251, 253, 247, 0.9); --text-main: #172115; --text-muted: #52614b; --text-light: #90a084; --border-color: #dce8d0; --border-hover: #b8d3a0; --theme-button-radius: 10px; --theme-card-radius: 16px; --theme-section-spacing: 5rem; --theme-card-shadow: 0 10px 30px rgba(20, 83, 45, 0.08); }
[data-site-theme="warm-studio-logic"] { --primary-hue: 18; --primary: #5f2f1d; --primary-light: #9a5a35; --primary-rgb: 95, 47, 29; --accent-hue: 38; --accent: #d97706; --accent-hover: #b45309; --bg-hue: 35; --bg-main: #fffaf4; --bg-card: #ffffff; --bg-nav: rgba(255, 250, 244, 0.9); --text-main: #241814; --text-muted: #6b5a4c; --text-light: #a99a8d; --border-color: #ead8c4; --border-hover: #d9b98f; --theme-button-radius: 8px; --theme-card-radius: 14px; --theme-section-spacing: 5rem; --theme-card-shadow: 0 10px 30px rgba(95, 47, 29, 0.08); }
[data-site-theme="precision-engineering-interface"] { --primary-hue: 215; --primary: #111827; --primary-light: #374151; --primary-rgb: 17, 24, 39; --accent-hue: 199; --accent: #0ea5e9; --accent-hover: #0284c7; --bg-hue: 210; --bg-main: #f6f7f9; --bg-card: #ffffff; --bg-nav: rgba(246, 247, 249, 0.9); --text-main: #111827; --text-muted: #4b5563; --text-light: #9ca3af; --border-color: #d1d5db; --border-hover: #9ca3af; --theme-button-radius: 6px; --theme-card-radius: 10px; --theme-section-spacing: 5rem; --theme-card-shadow: 0 8px 24px rgba(17, 24, 39, 0.07); }
[data-site-theme="boutique-horizon"] { --primary-hue: 272; --primary: #40354f; --primary-light: #675875; --primary-rgb: 64, 53, 79; --accent-hue: 13; --accent: #d08c78; --accent-hover: #b86f5b; --bg-hue: 24; --bg-main: #fbf7f4; --bg-card: #ffffff; --bg-nav: rgba(251, 247, 244, 0.9); --text-main: #2a2430; --text-muted: #6f6475; --text-light: #a79da9; --border-color: #e8dcd8; --border-hover: #d7c0b8; --theme-button-radius: 10px; --theme-card-radius: 16px; --theme-section-spacing: 5rem; --theme-card-shadow: 0 12px 32px rgba(64, 53, 79, 0.08); }
[data-site-theme="executive-black"] { --primary-hue: 220; --primary: #050505; --primary-light: #27272a; --primary-rgb: 5, 5, 5; --accent-hue: 0; --accent: #737373; --accent-hover: #525252; --bg-hue: 0; --bg-main: #f7f7f6; --bg-card: #ffffff; --bg-nav: rgba(247, 247, 246, 0.9); --text-main: #111111; --text-muted: #525252; --text-light: #9a9a9a; --border-color: #dedbd3; --border-hover: #b8b8b8; --theme-button-radius: 4px; --theme-card-radius: 10px; --theme-section-spacing: 5rem; --theme-card-shadow: 0 12px 32px rgba(5, 5, 5, 0.08); }
[data-site-theme="luxury-gold"] { --primary-hue: 240; --primary: #1c1917; --primary-light: #44403c; --primary-rgb: 28, 25, 23; --accent-hue: 43; --accent: #b88a2b; --accent-hover: #926f22; --bg-hue: 42; --bg-main: #fbfaf6; --bg-card: #ffffff; --bg-nav: rgba(251, 250, 246, 0.9); --text-main: #1c1917; --text-muted: #645c52; --text-light: #a49b8d; --border-color: #e9dfc9; --border-hover: #d6c08f; --theme-button-radius: 6px; --theme-card-radius: 12px; --theme-section-spacing: 5rem; --theme-card-shadow: 0 12px 32px rgba(28, 25, 23, 0.08); }
[data-site-theme="candy"] { --primary-hue: 316; --primary: #831843; --primary-light: #be185d; --primary-rgb: 131, 24, 67; --accent-hue: 189; --accent: #06b6d4; --accent-hover: #0891b2; --bg-hue: 330; --bg-main: #fff7fb; --bg-card: #ffffff; --bg-nav: rgba(255, 247, 251, 0.9); --text-main: #2a1020; --text-muted: #72576a; --text-light: #b596aa; --border-color: #f7d7e8; --border-hover: #f9a8d4; --theme-button-radius: 14px; --theme-card-radius: 20px; --theme-section-spacing: 5rem; --theme-card-shadow: 0 12px 34px rgba(131, 24, 67, 0.08); }

/* Theme application layer: presentation changes only; layout and workflow stay intact. */
html[data-site-theme] {
    --bg-subtle: color-mix(in srgb, var(--bg-main) 72%, var(--bg-card));
    --theme-highlight: color-mix(in srgb, var(--accent) 14%, var(--bg-card));
    --shadow-sm: 0 2px 9px rgba(var(--primary-rgb), 0.06);
    --shadow-md: 0 10px 30px rgba(var(--primary-rgb), 0.09);
    --shadow-lg: 0 22px 54px rgba(var(--primary-rgb), 0.13);
}
html[data-site-theme] body { background: var(--bg-main); color: var(--text-main); }
html[data-site-theme] h1,
html[data-site-theme] h2,
html[data-site-theme] h3,
html[data-site-theme] h4,
html[data-site-theme] h5,
html[data-site-theme] h6 { color: var(--primary); }
html[data-site-theme] a:not(.btn) { color: var(--primary-light); }
html[data-site-theme] a:not(.btn):hover { color: var(--accent-hover); }
html[data-site-theme] .btn,
html[data-site-theme] button { border-radius: var(--theme-button-radius); }
html[data-site-theme] .btn-primary,
html[data-site-theme] button.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
html[data-site-theme] .btn-primary:hover,
html[data-site-theme] button.btn-primary:hover { background: var(--primary-light); border-color: var(--primary-light); }
html[data-site-theme] .btn-secondary,
html[data-site-theme] button.btn-secondary { background: var(--bg-card); border-color: var(--primary); color: var(--primary); }
html[data-site-theme] input,
html[data-site-theme] select,
html[data-site-theme] textarea { background: var(--bg-card); border-color: var(--border-color); color: var(--text-main); }
html[data-site-theme] input::placeholder,
html[data-site-theme] textarea::placeholder { color: var(--text-light); }
html[data-site-theme] input:focus,
html[data-site-theme] select:focus,
html[data-site-theme] textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12); }
html[data-site-theme] input[readonly] {
    background: var(--bg-subtle);
    color: var(--text-muted);
    cursor: not-allowed;
}

.pricing-readonly-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.pricing-readonly-grid label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.pricing-readonly-grid input {
    width: 100%;
    padding: 0.4rem;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.admin-proposal-preview-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.admin-proposal-preview-card {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--theme-card-radius);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.admin-proposal-preview-card img {
    display: block;
    width: 100%;
    height: auto;
}

.admin-proposal-preview-label,
.admin-proposal-preview-empty {
    padding: 0.75rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

@media (max-width: 520px) {
    .pricing-readonly-grid {
        grid-template-columns: 1fr;
    }
}
html[data-site-theme] .card,
html[data-site-theme] .admin-card,
html[data-site-theme] .bento-card,
html[data-site-theme] .service-card,
html[data-site-theme] .pricing-card,
html[data-site-theme] .affiliate-public-card,
html[data-site-theme] .sidebar-accordion,
html[data-site-theme] .sticky-pipeline-bar,
html[data-site-theme] .timeline-history-accordion,
html[data-site-theme] .modal-content {
    background: var(--bg-card);
    border-color: var(--border-color);
    border-radius: var(--theme-card-radius);
    box-shadow: var(--theme-card-shadow);
}
html[data-site-theme] .info-block,
html[data-site-theme] .accordion-content,
html[data-site-theme] .dashboard-stat-card,
html[data-site-theme] .dashboard-table-wrapper,
html[data-site-theme] .timeline-item,
html[data-site-theme] .communication-log-item,
html[data-site-theme] .generated-doc-wrapper,
html[data-site-theme] table,
html[data-site-theme] th,
html[data-site-theme] td {
    border-color: var(--border-color);
}
html[data-site-theme] .info-block,
html[data-site-theme] .accordion-content,
html[data-site-theme] .dashboard-table-wrapper,
html[data-site-theme] .generated-doc-wrapper {
    background-color: var(--bg-card);
}
html[data-site-theme] .dashboard-stat-card,
html[data-site-theme] .timeline-item,
html[data-site-theme] .communication-log-item,
html[data-site-theme] tbody tr:nth-child(even) {
    background-color: var(--bg-subtle);
}
html[data-site-theme] p,
html[data-site-theme] .panel-subtitle-text,
html[data-site-theme] .info-label,
html[data-site-theme] .timeline-meta {
    color: var(--text-muted);
}
html[data-site-theme] strong,
html[data-site-theme] .info-value,
html[data-site-theme] summary {
    color: var(--text-main);
}
html[data-site-theme] header,
html[data-site-theme] .main-header,
html[data-site-theme] nav { background-color: var(--bg-nav); border-color: var(--border-color); }
html[data-site-theme] .admin-sidebar,
html[data-site-theme] .sidebar,
html[data-site-theme] .client-sidebar,
html[data-site-theme] .detail-sidebar { border-color: var(--border-color); box-shadow: inset 4px 0 0 var(--accent); }
html[data-site-theme] .admin-sidebar .active,
html[data-site-theme] .sidebar .active,
html[data-site-theme] .nav-link.active,
html[data-site-theme] .highlight,
html[data-site-theme] mark,
html[data-site-theme] .palette-list-item.is-selected,
html[data-site-theme] .dashboard-tab-btn.active {
    background: var(--theme-highlight);
    color: var(--primary);
    border-color: var(--accent);
}
html[data-site-theme] .document-preview,
html[data-site-theme] .generated-document,
html[data-site-theme] #review-package-preview-content,
html[data-site-theme] #review-package-print { --document-accent: var(--accent); border-color: var(--accent); }
html[data-site-theme] .document-preview h1,
html[data-site-theme] .document-preview h2,
html[data-site-theme] .document-preview h3,
html[data-site-theme] .generated-document h1,
html[data-site-theme] .generated-document h2,
html[data-site-theme] .generated-document h3,
html[data-site-theme] #review-package-preview-content h1,
html[data-site-theme] #review-package-preview-content h2,
html[data-site-theme] #review-package-preview-content h3 { color: var(--primary); border-color: var(--accent); }
html[data-site-theme] .generated-document {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: var(--theme-card-shadow);
}
html[data-site-theme] .generated-document strong { color: var(--primary); }
html[data-site-theme] .generated-document a { color: var(--accent-hover); }

.final-payment-required-banner {
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.6rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 11%, var(--bg-card));
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
}

.deposit-paid-development-banner {
    background: #ecfdf5;
    border-top-color: #86efac;
    color: #166534;
}

.pipeline-step.payment-locked {
    cursor: not-allowed;
    opacity: 0.48;
    filter: grayscale(0.55);
}

.pipeline-step.payment-locked .pipeline-step-circle {
    border-color: #d97706 !important;
    background: #fff7ed !important;
    color: #9a3412 !important;
    box-shadow: none !important;
    transform: none !important;
}

.pipeline-step.payment-locked .pipeline-step-label,
.pipeline-step.payment-locked .pipeline-step-timestamp {
    color: #9a3412 !important;
}

.pipeline-step.payment-locked:hover .pipeline-step-circle {
    transform: none;
}

.final-payment-action-message {
    padding: 0.6rem 0.7rem;
    border: 1px solid #f59e0b;
    border-radius: var(--radius-sm);
    background: #fffbeb;
    color: #92400e;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
}

.payment-action-highlight {
    outline: 3px solid #f59e0b;
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.18), var(--theme-card-shadow);
}

.payment-action-pulse {
    position: relative;
    z-index: 1;
    border-color: #dc2626 !important;
    color: #991b1b !important;
    background: #fff7ed !important;
    animation: final-payment-action-pulse 850ms ease-in-out 4;
}

@keyframes final-payment-action-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.16); transform: scale(1); }
    50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0.22); transform: scale(1.025); }
}

html[data-site-theme] main,
html[data-site-theme] .app-view,
html[data-site-theme] .home-hero {
    background-color: var(--bg-main);
}

html[data-site-theme] .app-view .service-panel,
html[data-site-theme] .app-view .future-service-card,
html[data-site-theme] .app-view .why-card,
html[data-site-theme] .app-view .process-step,
html[data-site-theme] .app-view .form-card,
html[data-site-theme] .app-view .info-block,
html[data-site-theme] .app-view .browser-mockup,
html[data-site-theme] .app-view [style*="background-color: white"],
html[data-site-theme] .app-view [style*="background: white"] {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

html[data-site-theme] .app-view .service-panel,
html[data-site-theme] .app-view .future-service-card,
html[data-site-theme] .app-view .why-card,
html[data-site-theme] .app-view .process-step,
html[data-site-theme] .app-view .form-card {
    border-radius: var(--theme-card-radius);
    box-shadow: var(--theme-card-shadow);
}

html[data-site-theme] .section-title::after,
html[data-site-theme] .logo-dot { background-color: var(--accent); }
html[data-site-theme] .request-check-icon { color: var(--accent); }

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-smooth);
}

/* Layout Elements */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.public-resources-section {
    padding-top: var(--theme-section-spacing);
    padding-bottom: var(--theme-section-spacing);
}

.affiliate-public-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.affiliate-public-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--theme-card-radius);
    box-shadow: var(--theme-card-shadow);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    min-height: 100%;
}

.affiliate-public-logo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: 800;
    overflow: hidden;
}

.affiliate-public-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.affiliate-public-card h3 {
    font-size: 1rem;
    color: var(--primary);
    margin: 0;
}

.affiliate-public-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
    flex: 1;
}

.affiliate-public-card .btn {
    align-self: center;
    border-radius: var(--theme-button-radius);
}

.theme-choice-grid,
.palette-choice-grid {
    width: 100%;
    max-height: 430px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
    scrollbar-width: thin;
    scrollbar-color: var(--border-hover) transparent;
}

.palette-list-item {
    width: 100%;
    min-height: 70px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-main);
    padding: 0.75rem 0.85rem;
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 0.85rem;
    cursor: pointer;
    text-align: left;
    font: inherit;
    letter-spacing: 0;
    transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.palette-list-item + .palette-list-item {
    margin-top: 0.2rem;
}

.palette-list-item:hover {
    background: color-mix(in srgb, var(--border-color) 42%, transparent);
}

.palette-list-item:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb), 0.18);
    outline-offset: -2px;
}

.palette-list-item.is-selected {
    background: #f0f1f3;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.05);
}

.palette-list-swatches {
    display: flex;
    align-items: center;
    min-width: 58px;
}

.palette-list-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
    flex: 0 0 auto;
}

.palette-list-swatch + .palette-list-swatch {
    margin-left: -13px;
}

.palette-list-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.palette-list-name {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.25;
}

.palette-list-colors {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: normal;
}

.palette-list-menu {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    justify-self: end;
    color: var(--text-muted);
    font-size: 1.45rem;
    line-height: 1;
}

.palette-list-item:hover .palette-list-menu {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-main);
}

@media (max-width: 520px) {
    .theme-choice-grid,
    .palette-choice-grid {
        max-height: 380px;
    }

    .palette-list-item {
        grid-template-columns: 58px minmax(0, 1fr) 28px;
        gap: 0.65rem;
        padding: 0.7rem;
    }

    .palette-list-swatch {
        width: 30px;
        height: 30px;
    }

    .palette-list-name {
        font-size: 0.94rem;
    }
}

.contact-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.5rem;
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
}

.contact-form-card,
.contact-policy-card {
    border-radius: var(--theme-card-radius);
}

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

.form-status-message {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .contact-page-grid,
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Header & Navigation */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--bg-nav);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-smooth);
}

header.scrolled {
    box-shadow: var(--shadow-sm);
}

.nav-container {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: clamp(0.65rem, 1.1vw, 1.25rem);
    height: 80px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(1.15rem, 1.25vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--primary);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}

.logo-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent);
    border-radius: 50%;
    display: inline-block;
}

#mainNav {
    min-width: 0;
}

#mainNav ul {
    display: flex;
    list-style: none;
    gap: clamp(0.4rem, 0.8vw, 0.95rem);
    align-items: center;
    justify-content: center;
    min-width: 0;
}

#mainNav ul li {
    flex: 0 0 auto;
}

#mainNav ul li a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: clamp(0.76rem, 0.78vw, 0.9rem);
    font-weight: 500;
    color: var(--text-muted);
    padding: 0.5rem 0.2rem;
    position: relative;
}

nav ul li a:hover, nav ul li a.active {
    color: var(--primary);
}

nav ul li a.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent);
    border-radius: 2px;
}

.cta-nav {
    background: var(--primary);
    color: white !important;
    padding: 0.7rem 1.15rem !important;
    border-radius: var(--radius-sm);
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: var(--transition-smooth);
    white-space: nowrap;
}

.cta-nav:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.cta-nav.active::after {
    display: none !important;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--primary);
}

.language-selector {
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    flex: 0 0 auto;
}

.language-selector select {
    width: 104px;
    min-width: 0;
    padding: 0.45rem 1.55rem 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--theme-button-radius);
    background: var(--bg-card);
    color: var(--text-main);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

@media (max-width: 1240px) and (min-width: 1101px) {
    .nav-container {
        column-gap: 0.65rem;
    }

    #mainNav ul {
        gap: 0.5rem;
    }

    #mainNav ul li a {
        font-size: 0.76rem;
    }

    .cta-nav {
        padding: 0.65rem 0.85rem !important;
    }

    .language-selector select {
        width: 92px;
        font-size: 0.75rem;
    }
}

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

/* Sections & Views Styling */
main {
    margin-top: 80px;
    min-height: calc(100vh - 180px);
}

.app-view {
    display: none;
    animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    padding: 5rem 0;
}

/* Admin dashboard + project pages: the fixed navbar is already cleared by
   the 80px margin on <main>, so the additional 80px view padding only
   produced a large empty band below the menu. Keep a small breathing gap. */
#view-admin-dashboard.app-view,
#view-client-detail.app-view {
    padding-top: 16px;
}

.app-view.active-view {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Home Page Specifics */
#view-home {
    display: none;
    position: relative;
    background-color: var(--bg-main);
    padding: 0;
    margin-top: -80px; /* offset fixed header */
}

#view-home.active-view {
    display: block;
}

#heroCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero {
    text-align: center;
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 3.5rem;
    line-height: 1.15;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -1.5px;
    margin-bottom: 1.5rem;
}

.hero h1 span {
    background: linear-gradient(135deg, var(--primary) 30%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 720px;
    margin: 0 auto 2.5rem auto;
    line-height: 1.6;
}

.hero-ctas {
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
    gap: 0.5rem;
}

.btn-primary {
    background-color: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary);
    border: 2px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--primary);
    background-color: rgba(var(--primary-rgb), 0.02);
    transform: translateY(-2px);
}

/* Services Page Card Grid */
.section-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    text-align: center;
    margin-bottom: 0.75rem;
    letter-spacing: -0.5px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 3.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.services-panels-list {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    margin-top: 2rem;
}

.service-panel {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: flex-start;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 4rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-panel:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 150, 255, 0.1);
    border-color: var(--accent);
}

.service-panel.panel-reversed {
    grid-template-columns: 1fr 1.1fr;
}

.service-panel.panel-reversed .panel-preview {
    order: 2;
}

.service-panel.panel-reversed .panel-info {
    order: 1;
}

/* Service Info Right Side Details */
.panel-info {
    display: flex;
    flex-direction: column;
}

.service-number {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.panel-info h3 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.panel-subtitle-text {
    font-size: 1.15rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Ideal For Tags */
.ideal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
}

.ideal-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-light);
    background-color: rgba(var(--primary-rgb), 0.04);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

/* Feature Grid Checklist */
.feature-checklist {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 3rem;
}

.feature-checklist li {
    font-size: 0.95rem;
    color: var(--text-main);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.feature-checklist li::before {
    content: "✓";
    color: var(--accent);
    font-weight: 800;
    font-size: 1.1rem;
}

/* CTA & Pricing Note */
.panel-cta-area {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.panel-cta-area .btn {
    padding: 1.1rem 2.5rem;
}

.pricing-note {
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 500;
}

/* Professional Mockup Screen styles */
.panel-preview {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}

.mockup-frame {
    width: 100%;
    max-width: 480px;
    height: 330px;
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md), 0 10px 30px rgba(8, 32, 74, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.onepage-preview-frame, .multipage-preview-frame, .portfolio-preview-frame, .business-preview-frame {
    max-width: 100% !important;
    width: 100% !important;
    height: 720px !important;
}

/* Premium indicator label above the preview frames */
.preview-interaction-label {
    position: absolute;
    top: -1.25rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    letter-spacing: 0.8px;
    box-shadow: 0 4px 15px rgba(8, 32, 74, 0.12);
    z-index: 10;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-transform: uppercase;
    white-space: nowrap;
}

/* B8 fix: Multi-Page, Portfolio and Business previews now render exactly like
   the One-Page preview (#1). #1 has NO special iframe rule — its iframe fills
   the frame at the frame's own width via its inline width:100%/height:100%.
   The three others previously used a fixed width:1440px + transform:scale(0.38),
   which shrank a full desktop page into a narrow column (and, on mobile, the
   static 0.38 fallback misfit the frame). Removing that rule makes all four
   iframes render uniformly at the frame width, consistent across all sizes.
   (The now-unused --iframe-scale JS setter is inert.) */

.service-panel:hover .mockup-frame {
    transform: scale(1.015) translateY(-3px);
    box-shadow: var(--shadow-lg), 0 15px 40px rgba(8, 32, 74, 0.06);
}

.mockup-header {
    height: 32px;
    background-color: #e9ecef;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 0.5rem;
}

.m-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ced4da;
}

.m-dot.m-red { background-color: #ff5f56; }
.m-dot.m-yellow { background-color: #ffbd2e; }
.m-dot.m-green { background-color: #27c93f; }

.m-address {
    font-size: 0.7rem;
    color: var(--text-light);
    background-color: white;
    padding: 0.2rem 2.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-family: monospace;
    margin: 0 auto;
    max-width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mockup-body {
    flex-grow: 1;
    background-color: white;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow: hidden;
    position: relative;
}

/* Mock mini components */
.mockup-nav-bar {
    height: 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 0.5rem;
    margin-bottom: 0.25rem;
}

.mockup-logo-mini {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--primary);
}

.mockup-links-mini {
    display: flex;
    gap: 0.5rem;
}

.mockup-links-mini .m-link {
    width: 20px;
    height: 4px;
    background-color: #dee2e6;
    border-radius: 2px;
}

.mockup-links-mini .m-link.active-link {
    background-color: var(--accent);
}

/* One Page Mockup Elements */
.mockup-hero-block {
    height: 90px;
    background: linear-gradient(135deg, rgba(8, 32, 74, 0.04) 0%, rgba(0, 150, 255, 0.08) 100%);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem;
}

.mockup-badge-mini {
    width: 60px;
    height: 8px;
    background-color: rgba(0, 150, 255, 0.15);
    border-radius: 4px;
}

.mockup-title-lg {
    width: 130px;
    height: 10px;
    background-color: var(--primary);
    border-radius: 5px;
}

.mockup-title-md {
    width: 100px;
    height: 6px;
    background-color: var(--text-light);
    border-radius: 3px;
    margin: 0 auto;
}

.mockup-title-sm {
    width: 150px;
    height: 5px;
    background-color: #dee2e6;
    border-radius: 2px;
}

.mockup-btn-mini {
    width: 45px;
    height: 12px;
    background-color: var(--accent);
    border-radius: 3px;
}

.mockup-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.mockup-card-mini {
    height: 45px;
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.mockup-form-section {
    margin-top: auto;
    background-color: #f8f9fa;
    padding: 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mockup-form-title {
    width: 60px;
    height: 6px;
    background-color: var(--primary);
    border-radius: 2px;
}

.mockup-form-input {
    height: 12px;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 2px;
}

.mockup-form-btn {
    height: 12px;
    background-color: var(--primary);
    border-radius: 2px;
}

/* Stacked Mockup (Multi-Page) */
.mockup-stack {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 330px;
}

.mockup-stack .stack-back {
    position: absolute;
    top: 25px;
    left: 25px;
    width: calc(100% - 25px);
    z-index: 1;
    opacity: 0.7;
}

.mockup-stack .stack-front {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 25px);
    z-index: 2;
}

.mockup-split-row {
    display: flex;
    gap: 1rem;
    flex-grow: 1;
}

.mockup-col-6 {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mockup-col-7 {
    width: 58%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mockup-col-5 {
    width: 42%;
}

.mockup-img-placeholder {
    width: 100%;
    height: 100%;
    background-color: #f1f3f5;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
}

.mockup-block-mini {
    height: 35px;
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.mockup-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: auto;
}

/* Portfolio Masonry preview style */
.mockup-profile-sec {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.mockup-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #e9ecef;
}

.mockup-profile-text {
    display: flex;
    flex-direction: column;
}

.mockup-masonry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    flex-grow: 1;
}

.mockup-masonry-item {
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.mockup-masonry-item.item-tall {
    grid-row: span 2;
    height: 140px;
}

.mockup-masonry-item.item-short {
    height: 65px;
}

/* Business Viewport layout preview elements */
.mockup-banner-mini {
    height: 40px;
    background-color: var(--primary);
    border-radius: 4px;
}

.mockup-trust-badges {
    display: flex;
    gap: 0.5rem;
    margin-top: 15px;
}

.mockup-trust-badges .m-badge-icon {
    font-size: 0.8rem;
    background-color: rgba(var(--primary-rgb), 0.03);
    border: 1px solid var(--border-color);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    color: var(--primary);
}

.mockup-form-widget {
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    box-shadow: var(--shadow-sm);
}

.mockup-form-header {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.2rem;
}

.mockup-form-field {
    height: 12px;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 2px;
}

.mockup-form-submit {
    height: 14px;
    background-color: var(--accent);
    border-radius: 2px;
}

/* Benefit List Styles */
.benefit-list {
    list-style: none;
    margin: 1.5rem 0 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.benefit-list li {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* How It Works Steps */
.steps-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-left: 2.5rem;
}

.steps-container::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background-color: var(--border-color);
}

.step-item {
    position: relative;
    margin-bottom: 3.5rem;
}

.step-item:last-child {
    margin-bottom: 0;
}

.step-number {
    position: absolute;
    left: -40px;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--primary);
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px var(--bg-main);
    transition: var(--transition-smooth);
}

.step-item:hover .step-number {
    background-color: var(--accent);
    transform: scale(1.1);
}

.step-content h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.step-content p {
    color: var(--text-muted);
    font-size: 1rem;
}

.step-note {
    background-color: rgba(var(--primary-rgb), 0.03);
    border-left: 4px solid var(--accent);
    padding: 1.5rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    max-width: 800px;
    margin: 4rem auto 0 auto;
}

.step-note p {
    color: var(--text-main);
    font-weight: 500;
}

/* Coming Soon & Lists */
.future-services {
    max-width: 700px;
    margin: 0 auto;
}

.future-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    list-style: none;
    margin-top: 2rem;
}

.future-list li {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.future-list li:hover {
    border-color: var(--border-hover);
    transform: translateX(4px);
}

.future-list li::before {
    content: "✦";
    color: var(--accent);
    font-size: 1.1rem;
}

/* Future Services Section & Grid */
.future-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.future-service-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    opacity: 0.9;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.future-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
    opacity: 1;
}

.future-service-card .future-icon {
    font-size: 2rem;
    margin-bottom: 1.25rem;
    display: inline-block;
}

.future-service-card h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.future-service-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.future-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    background-color: rgba(var(--primary-rgb), 0.05);
    color: var(--primary-light);
    border: 1px solid rgba(var(--primary-rgb), 0.08);
}

/* Intake Form Pages styling */
.form-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 3.5rem;
    max-width: 850px;
    margin: 0 auto;
    box-shadow: var(--shadow-md);
}

.form-group {
    margin-bottom: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.form-subtitle {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    margin: 2.5rem 0 1.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.form-subtitle:first-of-type {
    margin-top: 0;
}

label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

label.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.50rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

/* Website Features (Milestone C): grouped checkbox sections */
.wpb-feature-group {
    margin-bottom: 1rem;
}

.wpb-feature-group-title {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.wpb-feature-editor .wpb-feature-group {
    margin-bottom: 0.75rem;
}

.wpb-feature-editor .checkbox-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-family);
    font-size: 0.95rem;
    color: var(--text-main);
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: var(--transition-smooth);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 150, 255, 0.08);
}

input[type="radio"],
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.radio-option input {
    cursor: pointer;
}

/* Confirmation Page / Card */
.confirmation-container {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 3rem 0;
}

.success-icon {
    width: 80px;
    height: 80px;
    background-color: var(--status-approved);
    color: var(--status-approved-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 2rem auto;
}

/* Admin Login Page */
.login-card {
    max-width: 450px;
    margin: 0 auto;
    text-align: center;
    padding: 3.5rem 2.5rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.google-btn-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* Admin Dashboard Elements */
.dashboard-container {
    width: 96vw;
    max-width: 1760px;
    margin: 0 auto;
    padding-left: clamp(0.75rem, 1.25vw, 1.5rem);
    padding-right: clamp(0.75rem, 1.25vw, 1.5rem);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}

.admin-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-email {
    font-weight: 600;
    color: var(--text-muted);
}

/* Summary Cards Grid */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.summary-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: left;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.summary-card:hover {
    box-shadow: var(--shadow-md);
}

.summary-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.summary-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

/* Filters & Table controls */
.controls-bar {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 1.5rem;
    border-bottom: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.filter-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
}

.filter-select {
    width: auto;
    min-width: 200px;
    padding: 0.5rem 1rem;
}

/* Submissions Table */
.table-wrapper {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    width: 100%;
    box-shadow: var(--shadow-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

th, td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

th {
    background-color: rgba(var(--primary-rgb), 0.01);
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background-color: rgba(var(--primary-rgb), 0.005);
}

/* Status Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

.badge-new {
    background-color: var(--status-new);
    color: var(--status-new-text);
}

.badge-review {
    background-color: var(--status-review);
    color: var(--status-review-text);
}

.badge-approved {
    background-color: var(--status-approved);
    color: var(--status-approved-text);
}

.badge-deployed {
    background-color: var(--status-deployed);
    color: var(--status-deployed-text);
}

.badge-unpaid {
    background-color: var(--status-unpaid);
    color: var(--status-unpaid-text);
}

.badge-paid {
    background-color: var(--status-approved);
    color: var(--status-approved-text);
}

/* Pipeline Status Badges */
.badge-status-new-submission {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}
.badge-status-reviewing-intake {
    background-color: #e0f2fe;
    color: #0369a1;
}
.badge-status-need-client-clarification {
    background-color: #ffedd5;
    color: #c2410c;
}
.badge-status-stitch-prompt-generated {
    background-color: #f3e8ff;
    color: #6b21a8;
}
.badge-status-draft-concept-created {
    background-color: #fae8ff;
    color: #86198f;
}
.badge-status-round-0-uploaded {
    background-color: #fdf2f8;
    color: #9d174d;
}
.badge-status-first-review-package-generated {
    background-color: #ccfbf1;
    color: #0f766e;
}
.badge-status-first-review-sent {
    background-color: #e0f2fe;
    color: #0284c7;
}
.badge-status-waiting-for-client-feedback {
    background-color: #fef9c3;
    color: #854d0e;
}
.badge-status-revision-round-1 {
    background-color: #ffe4e6;
    color: #9f1239;
}
.badge-status-revision-round-2 {
    background-color: #ffe4e6;
    color: #be123c;
}
.badge-status-waiting-for-deposit {
    background-color: #fef3c7;
    color: #d97706;
}
.badge-status-approved-deposit-paid {
    background-color: #dcfce7;
    color: #15803d;
}
.badge-status-in-development {
    background-color: #eff6ff;
    color: #1d4ed8;
}
.badge-status-client-review {
    background-color: #ecfeff;
    color: #0891b2;
}
.badge-status-ready-for-deployment {
    background-color: #d1fae5;
    color: #065f46;
}
.badge-status-deployed {
    background-color: #e0f2fe;
    color: #0369a1;
}
.badge-status-completed {
    background-color: #dcfce7;
    color: #166534;
}
.badge-status-cancelled-not-proceeding {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Client Detail Page */
#view-client-detail > .container {
    width: 100%;
    max-width: 1760px;
    padding-left: clamp(0.75rem, 1.5vw, 1.5rem);
    padding-right: clamp(0.75rem, 1.5vw, 1.5rem);
    overflow-x: visible;
}

/* DO NOT CHANGE
   Admin project page layout is production validated.
   Protects the 3-column desktop layout: left info, middle workflow, right communication.
   Modify only after layout review.
*/
/* Guard: admin project detail must never let the right communication panel overflow the viewport. */
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.58fr) minmax(0, 0.72fr);
    gap: 1rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.detail-card,
.detail-sidebar,
.detail-communication-panel {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.detail-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: clamp(1.35rem, 2vw, 2.25rem);
    box-shadow: var(--shadow-md);
}

.detail-sidebar {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    position: static;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}

/* Milestone 37 guard: Project Controls must render in this exact visual order. */
.detail-sidebar > h3 { order: 0; }
.detail-sidebar #developerToolsAccordion { order: 1; }
.detail-sidebar #pricingPaymentsAccordion { order: 2; }
.detail-sidebar #clientDeliverablesAccordion { order: 3; }
.detail-sidebar #paymentRequestsAccordion { order: 4; }
.detail-sidebar #developmentBuildUpdatesAccordion { order: 5; }
.detail-sidebar #clientInfoAccordion { order: 6; }
.detail-sidebar #finalPaymentAccordion { order: 7; }
.detail-sidebar #deployWebsiteAccordion { order: 8; }
.detail-sidebar #deploymentCompletionAccordion { order: 9; }

.detail-communication-panel {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    position: static;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.detail-communication-panel h3 {
    margin: 0 0 1rem;
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 900;
}

#detailCommunicationPanelContent {
    display: grid;
    gap: 1rem;
    height: auto;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    padding-right: 0;
}

.detail-layout .btn,
.detail-layout button,
.detail-layout textarea,
.detail-layout input,
.detail-layout select,
.detail-layout a,
.detail-layout p,
.detail-layout span,
.detail-layout strong,
#detailCommunicationPanelContent > * {
    min-width: 0;
    max-width: 100%;
}

.detail-layout .btn,
.detail-layout button {
    white-space: normal;
    overflow-wrap: anywhere;
}

.detail-layout textarea,
.detail-layout input,
.detail-layout select {
    box-sizing: border-box;
}

.work-area-focus-highlight {
    outline: 3px solid rgba(var(--primary-rgb), 0.32);
    box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.12);
    transition: box-shadow 0.2s ease, outline 0.2s ease;
}

.public-client-auth-link {
    font-weight: 800;
}

.public-auth-nav-group {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.public-account-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.65rem;
    padding: 0.65rem 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 3%, var(--bg-card));
    color: var(--text-color);
    font-weight: 900;
    cursor: pointer;
}

.public-account-toggle:hover,
.public-account-toggle:focus-visible {
    border-color: var(--accent);
    color: var(--primary);
    outline: none;
}

.public-account-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1000;
    display: none;
    min-width: 190px;
    padding: 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}

.public-account-dropdown.is-open .public-account-menu,
.public-account-dropdown:focus-within .public-account-menu {
    display: grid;
}

.public-account-menu a {
    padding: 0.7rem 0.85rem;
    border-radius: calc(var(--radius-md) - 0.25rem);
    color: var(--text-color);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.public-account-menu a:hover,
.public-account-menu a:focus-visible {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-main));
    color: var(--primary);
}

.admin-nav-link {
    border-left: 1px solid var(--border-color);
}

.admin-hidden-nav {
    display: none !important;
}

.notification-center-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.notification-center-grid article {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.admin-notification-center article {
    cursor: pointer;
}

.admin-notification-center article:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.notification-center-grid span {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.notification-center-grid strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--primary);
    font-size: 1.35rem;
    font-weight: 900;
}

.launch-readiness-panel {
    margin: 1rem 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--primary) 2%, var(--bg-card));
    box-shadow: var(--shadow-sm);
}

.launch-readiness-panel-header h4,
.launch-readiness-panel-header p {
    margin: 0.2rem 0 0;
}

.launch-readiness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.launch-readiness-grid article {
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.launch-readiness-grid span {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.launch-readiness-grid strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--primary);
    font-weight: 900;
}

.prelive-checklist-panel,
.before-live-mode-guide {
    margin: 1rem 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.prelive-checklist-groups {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.prelive-checklist-groups section {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--primary) 1%, var(--bg-main));
}

.prelive-checklist-groups h5 {
    margin: 0 0 0.75rem;
    color: var(--primary);
    font-size: 1rem;
}

.prelive-checklist-table {
    display: grid;
    gap: 0.4rem;
    overflow-x: auto;
}

.prelive-checklist-table > div {
    display: grid;
    grid-template-columns: minmax(190px, 1.2fr) minmax(115px, 0.55fr) minmax(220px, 1.5fr) minmax(115px, 0.55fr) minmax(220px, 1.3fr) minmax(150px, 0.8fr);
    gap: 0.5rem;
    align-items: start;
    min-width: 1080px;
    padding: 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.prelive-checklist-table strong,
.prelive-checklist-table span {
    font-size: 0.78rem;
}

.prelive-checklist-table strong {
    color: var(--primary);
    text-transform: uppercase;
}

.prelive-action-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 900;
    text-decoration: none;
    text-align: center;
}

.prelive-action-btn:hover,
.prelive-action-btn:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    outline: none;
}

.prelive-action-muted {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.before-live-mode-guide ol {
    margin: 1rem 0 0;
    padding-left: 1.4rem;
}

.before-live-mode-guide li {
    margin: 0.45rem 0;
}

.before-live-mode-guide code {
    padding: 0.1rem 0.25rem;
    border-radius: 0.25rem;
    background: var(--bg-main);
    color: var(--primary);
}

.remaining-live-list {
    margin: 1rem 0 0;
    padding-left: 1.25rem;
}

.remaining-live-list li {
    margin: 0.45rem 0;
    color: var(--text-color);
    font-weight: 700;
}

.detail-communication-panel .info-block {
    margin: 0;
    padding: 0;
    border-top: 0 !important;
}

.detail-communication-panel .client-conversation-admin-section,
.detail-communication-panel .client-files-admin-section {
    min-width: 0;
    max-width: 100%;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--primary) 2%, var(--bg-main));
    overflow-wrap: anywhere;
}

.detail-communication-panel .client-message-thread {
    max-height: min(32vh, 300px);
    overflow-y: auto;
    overflow-x: hidden;
}

.detail-communication-panel .client-file-list {
    max-height: min(42vh, 390px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
}

.detail-communication-panel .client-file-list article {
    grid-template-columns: 56px minmax(0, 1fr);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 2rem;
    cursor: pointer;
}

.back-link:hover {
    color: var(--accent-hover);
    transform: translateX(-4px);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.info-block {
    margin-bottom: 1.5rem;
}

.info-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.info-value {
    font-weight: 500;
    color: var(--text-main);
    word-break: break-all;
}

.info-value-block {
    background-color: var(--bg-main);
    padding: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    margin-top: 0.5rem;
    white-space: pre-wrap;
}

.actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.btn-sidebar {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.btn-generator-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px dashed var(--border-color);
}

.prompt-copy-area {
    margin-top: 1.5rem;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1rem;
    position: relative;
}

.prompt-textarea {
    width: 100%;
    height: 150px;
    font-family: monospace;
    font-size: 0.8rem;
    background: transparent;
    border: none;
    resize: none;
    outline: none;
}

.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--primary);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition-smooth);
}

.copy-btn:hover {
    background-color: var(--accent);
}

.demo-data-banner {
    background-color: var(--status-new);
    border: 1px solid var(--status-new-text);
    color: var(--status-new-text);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    margin-bottom: 2rem;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.demo-clear-btn {
    background-color: var(--status-new-text);
    color: white;
    border: none;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    transition: var(--transition-smooth);
}

.demo-clear-btn:hover {
    opacity: 0.9;
}

/* Footer styling */
footer {
    background-color: var(--primary);
    color: white;
    padding: 4rem 0 2rem 0;
    margin-top: auto;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-logo {
    color: white;
    font-size: 1.3rem;
    font-weight: 800;
}

.footer-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: white;
}

.footer-copyright {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .hero h1 {
        font-size: 2.8rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .detail-layout {
        grid-template-columns: 1fr;
    }
    
    .detail-sidebar {
        position: static;
        margin-top: 2rem;
    }
}

@media (max-width: 1100px) {
    .nav-container {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content max-content;
        column-gap: 0.45rem;
        height: 72px;
    }

    .logo {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #mainNav {
        display: none;
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        width: 100%;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-top: 0;
        border-radius: 0 0 var(--theme-card-radius) var(--theme-card-radius);
        box-shadow: var(--theme-card-shadow);
        padding: 0.75rem;
        z-index: 1200;
    }

    #mainNav.is-open {
        display: block;
    }

    #mainNav ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        width: 100%;
    }

    #mainNav li {
        width: 100%;
    }

    #mainNav .nav-link {
        display: flex;
        width: 100%;
        padding: 0.8rem 0.9rem;
        border-radius: var(--theme-button-radius);
    }

    #mainNav .cta-nav {
        justify-content: center;
        margin-top: 0.35rem;
    }
    
    .menu-toggle {
        display: block;
        order: 3;
        width: 42px;
        height: 42px;
        border-radius: var(--theme-button-radius);
        touch-action: manipulation;
    }

    .menu-toggle.is-open {
        background: rgba(var(--primary-rgb), 0.1);
    }

    .language-selector {
        order: 2;
        margin-left: auto;
        margin-right: 0.35rem;
    }

    .language-selector select {
        min-width: 84px;
        max-width: 102px;
        padding: 0.4rem 1.4rem 0.4rem 0.5rem;
        font-size: 0.76rem;
    }
    
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    .hero-ctas {
        flex-direction: column;
        width: 100%;
    }
    
    .btn {
        width: 100%;
    }
    
    .form-card, .detail-card {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 430px) {
    .logo {
        font-size: 1.12rem;
        letter-spacing: -0.35px;
    }

    .language-selector select {
        width: 82px;
        min-width: 82px;
    }
}

html[dir="rtl"] body.public-rtl {
    text-align: right;
}

html[dir="rtl"] body.public-rtl #mainHeader .nav-container,
html[dir="rtl"] body.public-rtl .form-row,
html[dir="rtl"] body.public-rtl .request-layout-grid,
html[dir="rtl"] body.public-rtl .contact-page-grid {
    direction: rtl;
}

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

html[dir="rtl"] body.public-rtl .app-view:not(#view-admin-dashboard):not(#view-admin-login):not(#view-client-detail) .form-group,
html[dir="rtl"] body.public-rtl .app-view:not(#view-admin-dashboard):not(#view-admin-login):not(#view-client-detail) label,
html[dir="rtl"] body.public-rtl .app-view:not(#view-admin-dashboard):not(#view-admin-login):not(#view-client-detail) p {
    text-align: right;
}

html[dir="rtl"] body.public-rtl #view-admin-dashboard,
html[dir="rtl"] body.public-rtl #view-admin-login,
html[dir="rtl"] body.public-rtl #view-client-detail {
    direction: ltr;
    text-align: left;
}

/* Timeline log styles */
.timeline-container {
    position: relative;
    padding-left: 2rem;
    margin-top: 1.5rem;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background-color: var(--border-color);
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -28px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--accent);
    border: 3px solid var(--bg-card);
    box-shadow: 0 0 0 2px var(--border-color);
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.timeline-title {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.95rem;
}

.timeline-meta {
    font-size: 0.75rem;
    color: var(--text-light);
}

.timeline-desc {
    font-size: 0.85rem;
    color: var(--text-main);
    line-height: 1.5;
}

.timeline-actor {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    margin-top: 0.35rem;
}

/* Home Page Centered Hero Styles */
.hero {
    text-align: center;
    padding: 6rem 0 4rem 0;
    max-width: 850px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 3.6rem;
    line-height: 1.15;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -1.5px;
    margin-bottom: 1.5rem;
}

.hero h1 span {
    background: linear-gradient(135deg, var(--primary) 30%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 720px;
    margin: 0 auto 2.5rem auto;
    line-height: 1.6;
}

.hero-ctas {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    align-items: center;
}

/* Detailed Services View styles */
.services-detailed-list {
    max-width: 800px;
    margin: 0 auto;
}

.service-detail-item {
    transition: var(--transition-smooth);
}

.service-detail-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.service-detail-item ul {
    padding-left: 0.5rem;
}

@media (max-width: 768px) {
    .hero {
        padding: 4rem 0 2.5rem 0;
    }
    
    .hero h1 {
        font-size: 2.4rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    .hero-ctas {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* Homepage Pinned Bottom Bar */
.homepage-footer {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-light);
    z-index: 2;
    pointer-events: none;
    font-weight: 500;
}

/* Process Timeline Section */
.process-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.process-step {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.process-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.process-step .step-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: rgba(var(--primary-rgb), 0.05);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 20px;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
}

.process-step h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.process-step p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Portfolio Page */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
}

.portfolio-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.portfolio-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-hover);
}

.portfolio-img-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.03) 0%, rgba(var(--primary-rgb), 0.07) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: 700;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border-color);
}

.portfolio-card-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.portfolio-card-content h4 {
    font-size: 1.35rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.portfolio-card-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.portfolio-tech {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    background-color: rgba(var(--primary-rgb), 0.03);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    align-self: flex-start;
}

/* Why Choose Us Section */
.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
}

.why-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.why-card .why-icon {
    font-size: 2.25rem;
    margin-bottom: 1.25rem;
}

.why-card h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.why-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Service Panels Mobile Queries */
@media (max-width: 992px) {
    .service-panel {
        grid-template-columns: 1fr !important;
        gap: 2.5rem;
        padding: 2.5rem;
    }
    
    .service-panel.panel-reversed {
        grid-template-columns: 1fr !important;
    }
    
    .service-panel.panel-reversed .panel-preview {
        order: 1;
    }
    
    .service-panel.panel-reversed .panel-info {
        order: 2;
    }
    
    .mockup-frame {
        max-width: 100%;
        height: 280px;
    }
    
    .mockup-stack {
        max-width: 100%;
        height: 280px;
    }
    
    .mockup-stack .stack-back {
        display: none;
    }
    
    .mockup-stack .stack-front {
        width: 100%;
    }
    
    .feature-checklist {
        grid-template-columns: 1fr;
    }
    
    .onepage-preview-frame, .multipage-preview-frame, .portfolio-preview-frame, .business-preview-frame {
        height: 450px !important;
    }
}

/* ==========================================================================
   STITCH-V2 INTEGRATION STYLES
   ========================================================================== */

/* Typography adjustments */
.nav-container a, .hero h1, .section-title, .bento-card h3, .process-step h4, .why-card h4 {
    font-family: var(--font-family);
}

/* Hero Section inside scrolling Home page */
.home-hero {
    position: relative;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 0 5rem 0;
    overflow: hidden;
    background-color: var(--bg-main);
}

.home-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
}

.badge-now-accepting {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(var(--primary-rgb), 0.05);
    color: var(--primary);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.badge-now-accepting span {
    font-size: 1.1rem;
    color: var(--accent);
}

.home-hero h1 {
    font-size: 3.75rem;
    line-height: 1.15;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -1.5px;
    margin-bottom: 1.5rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.home-hero p.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
}

/* Section styling for Home View */
.home-section {
    padding: 7rem 0;
    position: relative;
    border-top: 1px solid var(--border-color);
}

.home-section-bg-alt {
    background-color: rgba(var(--primary-rgb), 0.02);
}

.home-section-header {
    text-align: center;
    margin-bottom: 4.5rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.home-section-tag {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.75rem;
    display: block;
}

/* Bento Grid System */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
}

.bento-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 3rem;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.bento-card .icon-wrap {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-sm);
    background-color: rgba(var(--primary-rgb), 0.04);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    transition: var(--transition-smooth);
}

.bento-card:hover .icon-wrap {
    background-color: var(--primary);
    color: white;
}

.bento-card h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.bento-card p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

/* Bento column spans */
.col-span-12 { grid-column: span 12; }
.col-span-8 { grid-column: span 8; }
.col-span-7 { grid-column: span 7; }
.col-span-6 { grid-column: span 6; }
.col-span-5 { grid-column: span 5; }
.col-span-4 { grid-column: span 4; }

/* Bento specific items on Homepage */
.bento-card-dark {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    border: none;
}

.bento-card-dark h3 {
    color: white;
}

.bento-card-dark p {
    color: rgba(255, 255, 255, 0.8);
}

.bento-card-dark .icon-wrap {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.bento-card-dark:hover .icon-wrap {
    background-color: white;
    color: var(--primary);
}

.popular-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bento-card-img-wrap {
    position: absolute;
    right: -5%;
    bottom: -5%;
    width: 50%;
    opacity: 0.15;
    transform: rotate(-8deg);
    transition: var(--transition-smooth);
    pointer-events: none;
}

.bento-card:hover .bento-card-img-wrap {
    transform: rotate(0deg) scale(1.05);
    opacity: 0.25;
}

.bento-card-img-wrap img {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

/* Premium Browser Mockup Styles */
.browser-mockup {
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.browser-header {
    height: 40px;
    background-color: #f1f3f5;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 0.5rem;
}

.browser-dots {
    display: flex;
    gap: 0.35rem;
}

.browser-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ced4da;
}

.browser-dot-red { background-color: #ff5f56; }
.browser-dot-yellow { background-color: #ffbd2e; }
.browser-dot-green { background-color: #27c93f; }

.browser-address-bar {
    flex-grow: 1;
    max-width: 500px;
    margin: 0 auto;
    height: 24px;
    background-color: white;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--text-light);
    font-family: monospace;
}

.browser-content {
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
}

.browser-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 6s ease-in-out;
}

.browser-mockup:hover .browser-content img {
    transform: translateY(-20%);
}

/* Roadmap Grid */
.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

.roadmap-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 2rem;
    text-align: left;
    transition: var(--transition-smooth);
    opacity: 0.85;
}

.roadmap-card:hover {
    opacity: 1;
    transform: translateY(-3px);
    border-color: var(--border-hover);
}

.roadmap-tag-card {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: rgba(var(--primary-rgb), 0.05);
    color: var(--primary);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.roadmap-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.roadmap-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Home view CTA panel */
.home-cta-panel {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: 5rem 2rem;
    text-align: center;
    margin-top: 2rem;
    box-shadow: var(--shadow-lg);
}

.home-cta-panel h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

.home-cta-panel p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
}

.home-cta-panel .btn-secondary {
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.home-cta-panel .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

.home-cta-panel .btn-primary {
    background-color: white;
    color: var(--primary);
}

.home-cta-panel .btn-primary:hover {
    background-color: #f8f9fa;
    color: var(--primary-light);
}

/* Atmospheric Glow Background */
.atmospheric-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    height: 100%;
    background: radial-gradient(circle at top center, rgba(var(--primary-rgb), 0.035) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   PORTFOLIO STITCH STYLES
   ========================================================================== */
.portfolio-header-tag {
    display: inline-block;
    padding: 0.35rem 1rem;
    background-color: rgba(var(--primary-rgb), 0.05);
    color: var(--primary);
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.portfolio-stitch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5rem;
    margin-top: 4rem;
}

.portfolio-stitch-item {
    display: flex;
    flex-direction: column;
}

.portfolio-stitch-item .browser-mockup {
    margin-bottom: 1.5rem;
}

.portfolio-stitch-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.portfolio-stitch-meta h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.portfolio-stitch-meta p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 480px;
}

.portfolio-stitch-icon {
    font-size: 1.75rem;
    color: var(--primary);
    opacity: 0;
    transform: translateX(-15px);
    transition: var(--transition-smooth);
}

.portfolio-stitch-item:hover .portfolio-stitch-icon {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   PROCESS TIMELINE STYLES
   ========================================================================== */
.timeline-section {
    position: relative;
    max-width: 1000px;
    margin: 4rem auto 0 auto;
}

.timeline-connector-bar {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(to bottom, var(--border-color) 0, var(--border-color) 6px, transparent 6px, transparent 12px);
    opacity: 0.7;
}

.timeline-step-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5rem;
    position: relative;
}

.timeline-step-content-box {
    width: 44%;
}

.timeline-step-row:nth-child(even) .timeline-step-content-box {
    order: 2;
    text-align: left;
}

.timeline-step-row:nth-child(odd) .timeline-step-content-box {
    order: 1;
    text-align: right;
}

.timeline-step-circle {
    position: relative;
    z-index: 2;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--bg-card);
    border: 2px solid var(--primary);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    transition: var(--transition-smooth);
    order: 2;
    box-shadow: var(--shadow-sm);
}

.timeline-step-row:hover .timeline-step-circle {
    transform: scale(1.1);
    background-color: var(--primary);
    color: white;
}

.timeline-step-circle-highlight {
    background-color: var(--primary);
    color: white;
    box-shadow: var(--shadow-md);
}

.timeline-step-row:nth-child(even) .timeline-step-circle {
    order: 1;
}

.timeline-step-spacer {
    width: 44%;
}

.timeline-step-row:nth-child(even) .timeline-step-spacer {
    order: 3;
}

.timeline-step-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background-color: rgba(var(--primary-rgb), 0.05);
    color: var(--primary);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.timeline-step-row:nth-child(even) .timeline-step-badge {
    margin-left: 0;
}

.timeline-step-content-box h4 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.timeline-step-content-box p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ==========================================================================
   START REQUEST VIEW LAYOUT (TWO-COLUMN)
   ========================================================================== */
.request-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 5rem;
    align-items: flex-start;
    margin-top: 3rem;
}

.request-instruction-side {
    position: sticky;
    top: 120px;
}

.request-instruction-side h1 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
}

.request-instruction-side p.desc {
    font-size: 1.15rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.request-checklist {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.request-check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.request-check-icon {
    color: var(--accent);
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1;
}

.request-check-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
}

.request-footnote {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 3.5rem;
    font-style: italic;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .bento-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .col-span-12, .col-span-8, .col-span-7, .col-span-6, .col-span-5, .col-span-4 {
        grid-column: span 12;
    }
    
    .roadmap-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .portfolio-stitch-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .timeline-connector-bar {
        left: 2rem;
    }
    
    .timeline-step-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 3.5rem;
    }
    
    .timeline-step-content-box, .timeline-step-spacer {
        width: 100%;
        padding-left: 4.5rem;
    }
    
    .timeline-step-row:nth-child(odd) .timeline-step-content-box, 
    .timeline-step-row:nth-child(even) .timeline-step-content-box {
        text-align: left;
        order: 2;
    }
    
    .timeline-step-circle {
        position: absolute;
        left: 0;
        top: 0;
        width: 3rem;
        height: 3rem;
        font-size: 1rem;
        order: 1 !important;
    }
    
    .timeline-step-spacer {
        display: none;
    }
    
    .request-layout-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .request-instruction-side {
        position: relative;
        top: 0;
    }
    
    .home-hero h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .roadmap-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   HOMEPAGE TICKER & CTA BUTTON SYSTEM
   ========================================================================== */

/* Profession Ticker Layout */
.ticker-container {
    overflow: hidden;
    width: 100%;
    margin: 2.5rem 0 3.5rem 0;
    position: relative;
    display: flex;
    background-color: rgba(var(--primary-rgb), 0.02);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem 0;
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: scrollTicker 35s linear infinite;
}

.ticker-track:hover {
    animation-play-state: paused;
}

.ticker-item {
    flex-shrink: 0;
    padding: 0 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
}

.ticker-item::after {
    content: "•";
    margin-left: 2rem;
    color: var(--accent);
    font-size: 1.5rem;
}

@keyframes scrollTicker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Identical Size Buttons */
.journey-btn-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    align-items: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.journey-btn {
    width: 250px !important;       /* Identical fixed width */
    height: 56px !important;       /* Identical fixed height */
    padding: 0 !important;         /* Override padding */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .journey-btn-container {
        flex-direction: column;
        gap: 1rem;
    }
    .journey-btn {
        width: 100% !important;
        max-width: 320px;
    }
}

/* Default styling for the dedicated print block and print-only elements: hidden on screen */
#review-package-print,
.print-only {
    display: none;
}

/* Print Overrides for First Review Package PDF Export */
@media print {
    /* Hide everything at body level except the dedicated print container */
    body > *:not(#review-package-print) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .print-only {
        display: block !important;
    }

    body {
        background: white !important;
        color: #1e293b !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #review-package-print {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: white !important;
        color: #1e293b !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
        line-height: 1.6 !important;
    }

    /* Hide internal working timestamps/dates on the printed PDF */
    #pkg-overview-date {
        display: none !important;
        visibility: hidden !important;
    }

    /* Force images/grid colors print */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Target clean page breaks and margin defaults */
    @page {
        margin: 1.5cm !important;
    }
}

/* Sticky Pipeline Bar and Sidebar Accordions styling */
.sticky-pipeline-bar {
    position: sticky;
    top: 80px;
    z-index: 999;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 0.6rem 1.25rem 0.75rem;
    margin: 0 auto 1.5rem auto;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    transition: var(--transition-smooth);
    width: calc(100% - 4rem) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.pipeline-top-row,
.pipeline-payment-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* Always-visible back button inside the sticky pipeline bar */
.sticky-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-smooth);
}

.sticky-back-btn:hover {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

/* Intelligence quick actions beside the Project Details / Health tabs */
.detail-top-action {
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    margin-left: 0.25rem;
}

.project-detail-tabs {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* Dashboard grid: highlight the row under the mouse */
#submissionsTableBody tr {
    transition: background-color 0.12s ease;
}

#submissionsTableBody tr:hover {
    background-color: rgba(var(--primary-rgb), 0.06);
    cursor: default;
}

.pipeline-identity-col {
    width: 230px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    padding-right: 1rem;
    box-sizing: border-box;
}

.pipeline-identity-label {
    font-size: 0.65rem;
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
}

.pipeline-id-and-saved {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.2rem;
}

.pipeline-client-id {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    margin: 0;
    white-space: nowrap;
    line-height: 1.1;
}

.pipeline-client-name {
    font-size: 0.85rem;
    color: var(--text-main);
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 0.25rem;
    cursor: help;
    line-height: 1.2;
}

.project-pipeline-row {
    flex-grow: 1;
    min-width: 0;
}

.pipeline-project-full-row {
    width: 100%;
    min-width: 0;
}

.pipeline-project-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.1rem;
}

.pipeline-payment-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    gap: 0.45rem;
    width: min(390px, 32vw);
    flex-shrink: 0;
}

.pipeline-summary-item {
    min-width: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-main);
}

.pipeline-summary-item span {
    display: block;
    color: var(--text-light);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
}

.pipeline-summary-item strong {
    display: block;
    margin-top: 0.18rem;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Skipped Step Styles */
.pipeline-step.skipped .pipeline-step-circle {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}

.pipeline-step.skipped .pipeline-step-label {
    color: #b45309 !important;
    font-weight: 700;
}

.pipeline-step.skipped .pipeline-step-timestamp {
    color: #b45309 !important;
}

.pipeline-connector.skipped {
    background-color: #fde68a !important;
}

.pipeline-bottom-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pipeline-row-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-light);
    letter-spacing: 0.5px;
    margin-bottom: 0.15rem;
}

.pipeline-popover {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    width: 240px;
    box-sizing: border-box;
    animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes popoverFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .pipeline-top-row,
    .pipeline-payment-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .pipeline-identity-col {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding-right: 0 !important;
        padding-bottom: 0.5rem !important;
    }
    .pipeline-bottom-row {
        gap: 0.5rem;
    }
    .pipeline-payment-summary {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sticky-pipeline-bar {
        width: 100% !important;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* Collapsible Sidebar Accordions */
.sidebar-accordion {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.sidebar-accordion summary {
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary);
    cursor: pointer;
    background: rgba(15, 23, 42, 0.02); /* Matches primary RGB overlay */
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    outline: none;
}

.workflow-card-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.55rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
}

.workflow-card-number-muted {
    background: var(--text-light);
}

.sidebar-accordion summary::-webkit-details-marker {
    display: none;
}

.sidebar-accordion summary::after {
    content: '►';
    font-size: 0.7rem;
    color: var(--text-light);
    transition: transform 0.2s ease;
    margin-left: auto;
}

.sidebar-accordion[open] summary::after {
    transform: rotate(90deg);
}

.sidebar-accordion .accordion-content {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

/* Collapsible sections for the admin client-detail left column */
.detail-accordion {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    margin: 0 0 1rem 0;
    overflow: hidden;
}

.detail-accordion > summary {
    padding: 0.85rem 1rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary);
    cursor: pointer;
    background: rgba(15, 23, 42, 0.02);
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
    outline: none;
}

.detail-accordion > summary::-webkit-details-marker {
    display: none;
}

.detail-accordion > summary::after {
    content: '►';
    font-size: 0.7rem;
    color: var(--text-light);
    transition: transform 0.2s ease;
    margin-left: auto;
}

.detail-accordion[open] > summary::after {
    transform: rotate(90deg);
}

.detail-accordion > .detail-accordion-content {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* Collapsible groups for the admin Settings page. The wrapping cards keep
   their grid placement; only the content inside collapses. */
.settings-accordion > summary {
    font-size: 1.15rem;
    color: var(--primary);
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    user-select: none;
    outline: none;
}

.settings-accordion > summary::-webkit-details-marker {
    display: none;
}

.settings-accordion > summary::after {
    content: '►';
    font-size: 0.7rem;
    color: var(--text-light);
    transition: transform 0.2s ease;
}

.settings-accordion[open] > summary::after {
    transform: rotate(90deg);
}

.settings-accordion > .settings-accordion-content {
    padding-top: 1rem;
}

.settings-accordion-danger > summary {
    color: #991b1b;
    border-bottom-color: #fecaca;
}

/* Small per-field voice dictation mic buttons */
.voice-field-wrap {
    position: relative;
}

.voice-field-wrap textarea {
    padding-right: 2.6rem;
}

.voice-mic-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-light);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.voice-mic-btn:hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent);
}

.voice-mic-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.voice-mic-btn.is-listening {
    color: #fff;
    background: #dc2626;
    border-color: #dc2626;
    animation: micPulse 1.2s ease-in-out infinite;
}

@keyframes micPulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
    70% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.voice-field-status {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

/* Brief flash used when Go To Work Area lands on a section */
@keyframes workAreaFlash {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55); }
    50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.22); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.work-area-flash {
    animation: workAreaFlash 1.6s ease-out 1;
}

@media print {
    .detail-accordion,
    .detail-accordion > summary {
        border: none;
        background: transparent;
    }
}

/* Standardized Sidebar Buttons */
.btn-sidebar {
    width: 100% !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0.5rem !important;
    padding: 0 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.btn-sidebar:last-child {
    margin-bottom: 0 !important;
}

/* Horizontal Clickable Project Pipeline Tracker styling */
.pipeline-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pipeline-tracker-scroll-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
    display: block !important;
    -webkit-overflow-scrolling: touch;
}

.pipeline-tracker {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    width: max-content !important;
    min-width: 0 !important;
    padding: 0.5rem 1rem !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.project-pipeline-row .pipeline-tracker {
    width: 100% !important;
    min-width: 1700px !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}

.project-pipeline-row .pipeline-step {
    min-width: 104px;
}

.project-pipeline-row .pipeline-step-label {
    max-width: 118px;
    line-height: 1.15;
}

.payment-pipeline-row {
    flex: 1 1 520px;
    min-width: 420px;
}

.payment-pipeline-row .pipeline-tracker {
    padding: 0.2rem 0.35rem !important;
}

.payment-pipeline-row .pipeline-step-circle {
    width: 18px;
    height: 18px;
    font-size: 0.58rem;
}

.payment-pipeline-row .pipeline-step-label {
    font-size: 0.58rem;
    margin-top: 0.25rem;
    line-height: 1.1;
}

.payment-pipeline-row .pipeline-step-timestamp {
    font-size: 0.56rem;
    margin-top: 0.16rem;
}

.payment-pipeline-row .pipeline-connector {
    min-width: 24px;
    margin-bottom: 10px;
}

@media (max-width: 1366px) {
    .sticky-pipeline-bar {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .pipeline-identity-col {
        width: 210px;
    }

    .pipeline-payment-summary {
        width: min(340px, 30vw);
    }

    .pipeline-summary-item {
        padding: 0.38rem 0.45rem;
    }

    .pipeline-summary-item strong {
        font-size: 0.68rem;
    }

    .project-pipeline-row .pipeline-tracker {
        min-width: 1620px !important;
    }
}

@media (max-width: 1024px) {
    .payment-pipeline-row {
        min-width: 0;
        flex-basis: auto;
    }

    .pipeline-payment-summary {
        width: 100%;
    }

    .project-pipeline-row .pipeline-tracker {
        min-width: 1450px !important;
    }
}

@media (max-width: 640px) {
    .sticky-pipeline-bar {
        top: 70px;
        padding: 0.55rem 0.75rem 0.7rem;
    }

    .pipeline-payment-summary {
        grid-template-columns: 1fr;
    }

    .pipeline-summary-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .pipeline-summary-item strong {
        text-align: right;
    }

    .payment-pipeline-row .pipeline-tracker {
        min-width: 620px !important;
    }
}

.pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    z-index: 2;
    transition: all 0.3s ease;
}

.pipeline-step-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-main);
    border: 2px solid var(--text-light);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    transition: all 0.3s ease;
}

.pipeline-step-label {
    font-size: 0.65rem;
    font-weight: 700;
    margin-top: 0.35rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
    text-align: center;
}

/* Connection line */
.pipeline-connector {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    margin: 0 -8px; /* overlap with circles slightly */
    margin-bottom: 12px; /* align with vertical circle centers */
    min-width: 35px;
    z-index: 1;
    transition: all 0.3s ease;
}

/* States */
.pipeline-step.completed .pipeline-step-circle {
    background: #16a34a;
    border-color: #16a34a;
    color: white;
}
.pipeline-step.completed .pipeline-step-label {
    color: #16a34a;
}
.pipeline-connector.completed {
    background: #16a34a;
}

.pipeline-step.active .pipeline-step-circle {
    background: var(--bg-card);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 4px rgba(0, 150, 255, 0.25);
    transform: scale(1.1);
}
.pipeline-step.active .pipeline-step-label {
    color: var(--primary);
    font-weight: 800;
}

.pipeline-step.inactive .pipeline-step-circle {
    background: var(--bg-main);
    border-color: var(--border-color);
    color: var(--text-light);
}
.pipeline-step.inactive .pipeline-step-label {
    color: var(--text-light);
}

/* Cancelled State colors */
.pipeline-step.cancelled .pipeline-step-circle {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
}
.pipeline-step.cancelled .pipeline-step-label {
    color: #b91c1c !important;
    font-weight: 700;
}
.pipeline-step.cancelled .pipeline-step-timestamp {
    color: #b91c1c !important;
}
.pipeline-connector.cancelled {
    background: #fca5a5 !important;
}

.pipeline-step:hover .pipeline-step-circle {
    transform: scale(1.2);
    border-color: var(--accent);
}

/* Visible scrollbar for the scroll-wrapper as a visual hint */
.pipeline-tracker-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
}
.pipeline-tracker-scroll-wrapper::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.04);
    border-radius: 3px;
}
.pipeline-tracker-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* Clear visible gray scroll thumb */
    border-radius: 3px;
    transition: background 0.3s ease;
}
.pipeline-tracker-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* Collapsed Timeline History Accordion styling */
.timeline-history-accordion {
    margin-top: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    overflow: hidden;
}
.timeline-history-accordion summary {
    padding: 0.65rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    background: rgba(15, 23, 42, 0.02);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: none;
    user-select: none;
}
.timeline-history-accordion summary::-webkit-details-marker {
    display: none;
}
.timeline-history-accordion summary::after {
    content: '►';
    font-size: 0.65rem;
    color: var(--text-light);
    transition: transform 0.2s ease;
}
.timeline-history-accordion[open] summary::after {
    transform: rotate(90deg);
}
.timeline-history-accordion .timeline-history-content {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    max-height: 250px;
    overflow-y: auto;
}

/* Pipeline Step Timestamp styling */
.pipeline-step-timestamp {
    font-size: 0.55rem;
    color: var(--text-light);
    margin-top: 0.15rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

.pipeline-step.active .pipeline-step-timestamp {
    color: var(--accent);
    font-weight: 600;
}

.pipeline-step.completed .pipeline-step-timestamp {
    color: #16a34a;
}

.pipeline-step.cancelled .pipeline-step-timestamp {
    color: #ef4444;
}

.project-folder-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.project-folder-tab {
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-muted);
    font-weight: 700;
    cursor: pointer;
}

.project-folder-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.project-organization-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
}

.project-organization-label {
    margin-right: 0.5rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.project-bucket-badge {
    color: var(--primary);
    font-weight: 800;
}

.project-bucket-actions,
.project-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.project-row-actions {
    min-width: 132px;
    flex-direction: column;
    align-items: stretch;
}

.project-open-button {
    padding: 0.42rem 0.65rem;
    font-size: 0.76rem;
    line-height: 1.2;
    white-space: nowrap;
}

.project-move-select {
    width: 100%;
    min-width: 118px;
    padding: 0.34rem 1.7rem 0.34rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.table-sort-button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.table-sort-button:hover,
.table-sort-button.active {
    color: var(--primary);
}

.sort-indicator {
    display: inline-block;
    min-width: 0.7rem;
    color: var(--accent);
    font-size: 0.8rem;
}

#submissionsTableBody td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    vertical-align: middle;
}

@media (max-width: 900px) {
    .project-row-actions {
        min-width: 112px;
    }

    .project-open-button,
    .project-move-select {
        font-size: 0.68rem;
    }
}

.project-bucket-action {
    padding: 0.35rem 0.55rem;
    font-size: 0.72rem;
}

.production-readiness-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.production-readiness-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.blueprint-kicker {
    display: inline-block;
    margin-bottom: 0.35rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.production-readiness-header h3 {
    margin: 0 0 0.35rem;
    color: var(--primary);
    font-size: 1.45rem;
    font-weight: 900;
}

.production-readiness-header p,
.client-portal-plan p,
.launch-status-panel p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.readiness-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.readiness-summary-card {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-main);
}

.readiness-summary-card span {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.readiness-summary-card strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--primary);
    font-size: 1.55rem;
    line-height: 1;
}

.readiness-ready { border-left: 4px solid #16a34a; }
.readiness-testing { border-left: 4px solid #f59e0b; }
.readiness-not-ready { border-left: 4px solid #dc2626; }
.readiness-pending { border-left: 4px solid #64748b; }

.launch-status-panel {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-card));
}

.launch-status-panel span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.launch-status-panel strong {
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 900;
}

.readiness-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.readiness-table {
    width: 100%;
    min-width: 1080px;
    table-layout: fixed;
}

.readiness-table th,
.readiness-table td {
    padding: 0.75rem;
    vertical-align: top;
}

.readiness-table th:nth-child(1),
.readiness-table td:nth-child(1) { width: 230px; }
.readiness-table th:nth-child(2),
.readiness-table td:nth-child(2) { width: 170px; }
.readiness-table th:nth-child(4),
.readiness-table td:nth-child(4) { width: 155px; }

.readiness-item-title {
    color: var(--text-main);
    font-weight: 800;
}

.readiness-status-select,
.readiness-date-input,
.readiness-notes-input,
.readiness-next-action-input {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-main);
    font: inherit;
    font-size: 0.82rem;
}

.readiness-status-select,
.readiness-date-input {
    padding: 0.45rem 0.5rem;
}

.readiness-notes-input,
.readiness-next-action-input {
    min-height: 58px;
    padding: 0.5rem;
    resize: vertical;
}

.client-portal-plan {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-main);
}

.client-portal-plan h4 {
    margin: 0 0 0.35rem;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 900;
}

.client-portal-plan ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.35rem 1rem;
    margin: 0.8rem 0 0;
    padding-left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 760px) {
    .production-readiness-header {
        flex-direction: column;
    }

    .production-readiness-header .btn {
        width: 100%;
    }

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

.client-portal-admin-box {
    padding: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-main);
}

.client-portal-admin-box span,
.client-portal-admin-label {
    display: block;
    color: var(--text-light);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#clientPortalLinkDisplay {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    word-break: break-all;
}

.client-portal-admin-select,
.client-portal-admin-input,
.client-portal-admin-textarea {
    width: 100%;
    padding: 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.82rem;
}

.client-portal-admin-textarea {
    min-height: 86px;
    resize: vertical;
}

.client-notification-preview {
    padding: 0.65rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-main);
}

.client-notification-preview span {
    display: block;
    color: var(--text-light);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.client-notification-preview strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--primary);
    font-size: 0.9rem;
}

.client-notification-preview p {
    margin: 0.35rem 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.client-notification-preview small {
    color: var(--text-light);
    font-size: 0.72rem;
    font-weight: 700;
}

.client-notify-status {
    padding: 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-main);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.client-notify-status.is-sent {
    border-color: rgba(22, 163, 74, 0.28);
    background: rgba(22, 163, 74, 0.08);
    color: #166534;
}

.client-notification-delivery-log {
    padding: 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-main);
}

.client-notification-delivery-log > strong {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--primary);
    font-size: 0.8rem;
}

#clientNotifyDeliveryLog {
    display: grid;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.client-notification-delivery-item {
    padding: 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.client-notification-delivery-item strong,
.client-notification-delivery-item span {
    display: block;
}

.client-notification-delivery-item strong {
    color: var(--text-main);
    font-size: 0.78rem;
}

.client-feedback-list,
.client-feedback-form {
    display: grid;
    gap: 0.85rem;
}

.client-feedback-card {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-main);
}

.client-feedback-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
}

.client-feedback-card-header strong,
.client-feedback-card-header span {
    display: block;
}

.client-feedback-card-header strong {
    color: var(--primary);
    font-size: 1rem;
}

.client-feedback-card-header span {
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 700;
}

.client-feedback-card p {
    margin: 0.6rem 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.client-feedback-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.8rem 0;
}

.client-feedback-card dt {
    color: var(--text-light);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.client-feedback-card dd {
    margin: 0.15rem 0 0;
    color: var(--text-main);
    font-weight: 700;
}

.client-feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.client-feedback-empty {
    color: var(--text-light);
    font-style: italic;
}

.client-project-page {
    min-height: 100vh;
    background: var(--bg-main);
}

.client-project-page > .client-project-page-header {
    /* Sticky top bar: keeps the brand link, My Dashboard, and Logout
       reachable while the client scrolls (dashboard + project pages). */
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: 100%;
    z-index: 1000 !important;
    transform: none !important;
}

.client-project-page > main.client-project-page-main {
    margin-top: 0 !important;
}

.client-project-error {
    padding: 1.5rem;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    background: #fef2f2;
    color: #991b1b;
}

.client-project-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 4.75rem;
    padding: 0.85rem clamp(1rem, 4vw, 2rem);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

body.client-project-page {
    padding-top: 0 !important;
}

body.client-project-page > header.client-project-page-header {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: 1000;
}

body.client-project-page > main,
body.client-project-page .client-project-page-main {
    margin-top: 0 !important;
}

.client-dashboard-page-main {
    padding-top: 0.5rem !important;
}

.client-dashboard-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
}

.client-dashboard-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

.client-dashboard-title-row h1 {
    margin: 0.2rem 0 0.35rem !important;
    color: var(--primary);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
}

.client-dashboard-title-row p {
    margin: 0.2rem 0 0 !important;
}

body.client-project-page .client-dashboard-card > .client-project-header,
body.client-project-page .client-dashboard-card .client-project-brand,
body.client-project-page .client-dashboard-card .client-project-brand-link {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Milestone 34/36 guard: isolate client dashboard from global fixed public headers. */
body.client-dashboard-page {
    padding-top: 0 !important;
}

body.client-dashboard-page > header.client-project-page-header {
    position: static !important;
    min-height: 0;
}

body.client-dashboard-page > main.client-dashboard-page-main {
    margin-top: 0 !important;
}

body.client-dashboard-page .client-dashboard-card,
body.client-dashboard-page .client-dashboard-title-row {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.client-dashboard-page .client-project-card,
body.client-dashboard-page .client-project-header,
body.client-dashboard-page .client-project-brand,
body.client-dashboard-page .client-project-brand-link {
    box-shadow: none !important;
}

.client-project-page-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.client-project-page-logo span {
    display: inline-block;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: var(--accent);
}

.client-project-page-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.client-project-page-nav a {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    background: var(--bg-card);
    color: var(--primary);
    text-decoration: none;
    font-weight: 900;
    box-shadow: var(--shadow-sm);
}

.client-project-page-main {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    min-height: 0;
    /* Tight top gap below the sticky client header */
    padding: 0.5rem clamp(0.75rem, 2vw, 1.5rem) clamp(1rem, 4vw, 3rem);
    overflow-x: visible;
}

.client-project-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* DO NOT CHANGE
   Client project page layout is production validated.
   Protects the 2-column desktop layout and right communication panel.
   Modify only after layout review.
*/
/* Guard: client project right communication column must fit inside the page and stack before clipping. */
.client-project-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(34vw, 400px));
    gap: 1.25rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.client-project-main,
.client-project-communication {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.client-project-communication {
    position: static;
    display: grid;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    align-self: start;
}

.client-project-layout .btn,
.client-project-layout button,
.client-project-layout textarea,
.client-project-layout input,
.client-project-layout select,
.client-project-layout a,
.client-project-layout p,
.client-project-layout span,
.client-project-layout strong,
.client-project-layout article,
.client-project-layout section {
    min-width: 0;
    max-width: 100%;
}

.client-project-layout .btn,
.client-project-layout button {
    white-space: normal;
    overflow-wrap: anywhere;
}

.client-project-layout textarea,
.client-project-layout input,
.client-project-layout select {
    box-sizing: border-box;
}

.client-project-kicker {
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.client-project-summary h1 {
    margin: 0.25rem 0;
    color: var(--primary);
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    line-height: 1.08;
}

.client-project-summary p {
    margin: 0;
    color: var(--text-muted);
}

.client-project-status-stack {
    min-width: 210px;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: var(--radius-md);
    background: rgba(22, 163, 74, 0.08);
    text-align: right;
}

.client-project-status-stack span,
.client-project-grid strong {
    display: block;
    color: var(--primary);
    font-weight: 900;
}

.client-project-status-stack small,
.client-project-grid span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.client-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1.25rem;
}

.client-project-grid article,
.client-project-next-step,
.client-project-links,
.client-project-actions,
.client-project-preview,
.client-project-notifications,
.client-project-timeline,
.client-project-messages,
.client-project-feedback,
.client-project-feedback-list,
.client-project-files {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-main);
    overflow-wrap: anywhere;
}

.client-project-next-step,
.client-project-links,
.client-project-actions,
.client-project-preview,
.client-project-notifications,
.client-project-timeline,
.client-project-messages,
.client-project-feedback,
.client-project-feedback-list,
.client-project-files {
    margin-top: 1rem;
}

.client-project-next-step h2,
.client-project-links h2,
.client-project-actions h2,
.client-project-preview h2,
.client-project-notifications h2,
.client-project-timeline h2,
.client-project-messages h2,
.client-project-feedback h2,
.client-project-feedback-list h2,
.client-project-files h2 {
    margin: 0 0 0.5rem;
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 900;
}

.client-project-next-step p,
.client-project-links p,
.client-project-actions p,
.client-project-preview p,
.client-project-notifications p,
.client-project-timeline p,
.client-project-messages p,
.client-project-feedback p,
.client-project-feedback-list p,
.client-project-files p {
    color: var(--text-muted);
}

.client-project-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.client-payment-summary-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.client-payment-summary-list article {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-main);
}

.client-payment-summary-list article strong {
    color: var(--primary);
}

.client-proposal-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.client-proposal-card > div:first-child {
    display: grid;
    gap: 0.25rem;
}

.client-proposal-card span,
.client-workflow-state {
    color: var(--text-muted);
}

.client-workflow-state {
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-main);
    font-weight: 800;
}

.client-revision-action-card textarea {
    width: 100%;
    min-height: 110px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    font: inherit;
    color: var(--text-main);
    background: var(--bg-card);
    resize: vertical;
}

.client-project-hosting-info {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.client-project-hosting-info .client-message-form {
    display: grid;
    gap: 0.65rem;
}

.client-project-hosting-info input,
.client-project-hosting-info textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    font: inherit;
    color: var(--text-main);
    background: var(--bg-card);
}

.client-password-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: stretch;
}

.client-password-row .client-password-toggle {
    padding-inline: 0.85rem;
    white-space: nowrap;
}

.client-secret-reveal,
.admin-secret-reveal {
    display: inline-block;
    margin-left: 0.25rem;
}

.client-secret-reveal summary,
.admin-secret-reveal summary {
    cursor: pointer;
    color: var(--primary);
    font-weight: 800;
}

.final-payment-missing-actions {
    display: grid;
    gap: 0.45rem;
}

.client-project-disclaimer {
    color: var(--text-muted);
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: var(--radius-md);
    padding: 0.75rem;
}

.client-action-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.client-action-list-vertical {
    grid-template-columns: 1fr;
    align-items: stretch;
}

.client-action-card {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-main);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    text-align: left;
    cursor: pointer;
    font: inherit;
    width: 100%;
    min-height: 0;
}

.client-dashboard-header-actions,
.client-auth-utility-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: flex-end;
}

.client-account-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.65rem;
    margin: -0.35rem 0 1rem;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.client-account-home-link {
    margin-right: auto;
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 900;
    text-decoration: none;
}

.client-account-home-link span {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--accent);
}

.client-account-topbar a {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    background: var(--bg-card);
    color: var(--primary);
    text-decoration: none;
    font-weight: 900;
}

.client-account-topbar a:not(.client-account-home-link) {
    box-shadow: var(--shadow-sm);
}

.client-account-identity {
    font-weight: 800;
    color: var(--primary) !important;
}

.client-dashboard-request-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: max(0.75rem, env(safe-area-inset-top)) 1.25rem 1.25rem;
    background: rgba(15, 23, 42, 0.55);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.client-dashboard-request-modal[hidden] {
    display: none;
}

.client-dashboard-modal-open {
    overflow: hidden;
}

.client-dashboard-request-modal-card {
    width: min(1280px, 96vw);
    max-width: calc(100vw - 2rem);
    height: min(920px, calc(100dvh - 2rem));
    max-height: calc(100dvh - 2rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-xl);
    margin: 0 auto;
    overflow: hidden;
}

.client-dashboard-request-modal-card header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    position: sticky;
    top: 0;
    z-index: 2;
}

.client-dashboard-request-modal-card h2,
.client-dashboard-request-modal-card p {
    margin: 0.15rem 0 0;
}

.client-dashboard-request-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.client-dashboard-request-modal iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-main);
}

.client-dashboard-native-request-form {
    min-height: 0;
    overflow-y: auto;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-main);
}

.client-dashboard-native-request-form label,
.client-dashboard-native-request-form fieldset {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.client-dashboard-native-request-form input,
.client-dashboard-native-request-form select,
.client-dashboard-native-request-form textarea {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-color);
    font: inherit;
    font-weight: 600;
    text-transform: none;
}

.client-dashboard-request-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.client-dashboard-color-palette-field {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.5rem;
}

.client-dashboard-color-palette-field label {
    margin: 0;
}

.client-dashboard-palette-selector {
    max-height: 320px;
}

.client-dashboard-request-sections {
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.client-dashboard-request-sections legend {
    padding: 0 0.4rem;
    color: var(--primary);
}

.client-dashboard-request-sections label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.2rem 0.75rem 0.2rem 0;
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: none;
}

.client-dashboard-request-sections input {
    width: auto;
}

.client-dashboard-request-submit-row {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.client-auth-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.client-auth-tabs a,
.client-auth-utility-links a {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.4rem 0.75rem;
    color: var(--primary);
    font-weight: 800;
    text-decoration: none;
}

.client-auth-tabs a.is-active {
    background: var(--primary);
    color: #fff;
}

.client-google-auth,
.client-google-foundation {
    display: grid;
    gap: 0.35rem;
    margin: 1rem 0;
    padding: 0.75rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-main);
}

.client-google-foundation small,
.client-auth-help {
    color: var(--text-muted);
}

.client-google-rendered-button {
    min-height: 42px;
}

.client-google-fallback-button {
    width: 100%;
}

.client-google-status {
    margin: 0.5rem 0 0;
}

.client-project-communication .client-project-messages,
.client-project-communication .client-project-files {
    margin-top: 0;
}

.client-project-communication .client-message-thread {
    max-height: min(42vh, 420px);
    overflow-y: auto;
    overflow-x: hidden;
}

.client-project-communication .client-file-list {
    max-height: min(34vh, 320px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
}

.client-action-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.client-action-card:disabled {
    cursor: wait;
    opacity: 0.72;
}

.client-action-card strong {
    color: var(--primary);
    font-weight: 900;
}

.client-action-card span {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.client-project-preview img {
    display: block;
    width: min(100%, 760px);
    height: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.client-project-notifications article,
.client-project-messages article,
.client-project-feedback-list article {
    padding: 0.9rem 0;
    border-top: 1px solid var(--border-color);
}

.client-project-timeline article {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-color);
}

.client-project-timeline article:first-of-type {
    border-top: 0;
}

.client-project-timeline article > span {
    width: 12px;
    height: 12px;
    margin-top: 0.28rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.08);
}

.client-project-timeline time {
    color: var(--text-light);
    font-size: 0.72rem;
    font-weight: 800;
}

.client-project-timeline h3 {
    margin: 0.15rem 0 0.2rem;
    color: var(--primary);
    font-size: 0.95rem;
}

.client-project-timeline p {
    margin: 0;
    font-size: 0.84rem;
}

.client-project-notifications article:first-of-type,
.client-project-messages article:first-of-type,
.client-project-feedback-list article:first-of-type {
    border-top: 0;
}

.client-project-notifications time,
.client-project-messages time,
.client-project-feedback-list time {
    color: var(--text-light);
    font-size: 0.75rem;
    font-weight: 800;
}

.client-project-messages article > span {
    display: inline-block;
    margin: 0.25rem 0;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
}

.client-project-notifications h3,
.client-project-messages h3,
.client-project-feedback-list h3 {
    margin: 0.25rem 0;
    color: var(--primary);
    font-size: 0.98rem;
}

.client-feedback-form label {
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.client-feedback-form select,
.client-feedback-form textarea,
.client-feedback-form input,
.client-message-form textarea,
.client-file-upload-form select,
.client-file-upload-form textarea,
.client-file-upload-form input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-main);
    font: inherit;
}

.client-message-thread {
    display: grid;
    gap: 0.75rem;
    max-height: 520px;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: rgba(var(--primary-rgb), 0.025);
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.client-message-bubble {
    min-width: 0;
    max-width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.04);
    overflow-wrap: anywhere;
}

.client-message-client {
    border-left: 4px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
}

.client-message-staff,
.client-message-system {
    border-left: 4px solid var(--primary);
}

.client-message-system {
    background: color-mix(in srgb, var(--primary) 5%, var(--bg-card));
}

.client-message-bubble div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.client-message-bubble strong {
    color: var(--primary);
}

.client-message-bubble time {
    color: var(--text-light);
    font-size: 0.72rem;
    font-weight: 800;
}

.client-message-bubble p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.client-message-form,
.client-file-upload-form {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    min-width: 0;
    max-width: 100%;
}

.client-message-form label,
.client-file-upload-form label {
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.client-file-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    min-width: 0;
    max-width: 100%;
}

.client-file-list article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    min-width: 0;
    max-width: 100%;
    gap: 0.75rem;
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.035);
    overflow-wrap: anywhere;
}

.client-project-delivery {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-main);
    margin-top: 1rem;
}

.client-file-preview {
    grid-row: span 4;
    width: 58px;
    height: 58px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-main);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 900;
}

.client-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client-file-list strong,
.client-file-list span,
.client-file-list a {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.client-file-list strong {
    color: var(--primary);
}

.client-file-list span {
    margin-top: 0.2rem;
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 800;
}

.client-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.45rem;
    min-width: 0;
    max-width: 100%;
}

.client-file-list a {
    width: fit-content;
    max-width: 100%;
    padding: 0.35rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-color));
    border-radius: 999px;
    color: var(--accent);
    font-weight: 800;
    text-decoration: none;
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
}

.client-message-status,
.client-message-unread-indicator {
    display: block;
    margin-top: 0.4rem;
    color: var(--text-light);
    font-size: 0.7rem;
    font-weight: 800;
}

.client-message-unread-indicator {
    padding: 0.45rem;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    text-align: center;
}

.client-message-bubble.is-new,
.client-file-row.is-new {
    animation: clientNewItemFlash 1.7s ease-out;
}

@keyframes clientNewItemFlash {
    0% { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2); }
    100% { box-shadow: none; }
}

.client-feedback-response {
    min-height: 1.4rem;
    color: var(--text-muted);
    font-weight: 700;
}

.client-feedback-response.is-success {
    color: #166534;
}

.client-feedback-response.is-error {
    color: #991b1b;
}

@media (max-width: 1100px) {
    .client-project-layout {
        grid-template-columns: 1fr;
    }

    .client-project-communication {
        position: static;
        width: 100%;
    }
}

@media (max-width: 1180px) {
    .detail-layout {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.62fr) minmax(0, 0.78fr);
    }
}

@media (max-width: 700px) {
    .client-project-page-header,
    .client-project-page-nav,
    .client-project-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .client-project-status-stack {
        width: 100%;
        text-align: left;
    }

    .client-project-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .detail-layout {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.62fr) minmax(0, 0.76fr);
    }

    .detail-communication-panel {
        position: static;
    }
}

@media (max-width: 980px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }

    .detail-card,
    .detail-sidebar,
    .detail-communication-panel {
        padding: 1rem;
    }
}

/* Responsive project data table
   Keeps the dashboard page fixed while letting only the table area scroll. */
.project-table-wrapper {
    position: relative;
    isolation: isolate;
    max-width: 100%;
}

.projects-data-table {
    width: 100%;
    min-width: 1188px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.projects-data-table th,
.projects-data-table td {
    background-clip: padding-box;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}

.projects-data-table th:nth-child(1),
.projects-data-table td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    background: var(--bg-card);
    box-shadow: 1px 0 0 var(--border-color);
}

.projects-data-table th:nth-child(1) {
    z-index: 6;
    background: color-mix(in srgb, var(--primary) 1%, var(--bg-card));
}

.projects-data-table th:nth-child(2),
.projects-data-table td:nth-child(2) { width: 125px; }

.projects-data-table th:nth-child(3),
.projects-data-table td:nth-child(3) { width: 138px; }

.projects-data-table th:nth-child(4),
.projects-data-table td:nth-child(4) { width: 108px; }

.projects-data-table th:nth-child(5),
.projects-data-table td:nth-child(5) { width: 130px; }

.projects-data-table th:nth-child(6),
.projects-data-table td:nth-child(6) { width: 126px; }

.projects-data-table th:nth-child(7),
.projects-data-table td:nth-child(7) { width: 98px; }

.projects-data-table th:nth-child(8),
.projects-data-table td:nth-child(8) { width: 90px; }

.projects-data-table th:nth-child(9),
.projects-data-table td:nth-child(9) {
    width: 120px;
    white-space: nowrap;
}

.projects-data-table th:nth-child(10),
.projects-data-table td:nth-child(10) {
    position: sticky;
    right: 0;
    z-index: 4;
    width: 132px;
    min-width: 132px;
    max-width: 132px;
    background: var(--bg-card);
    box-shadow: -1px 0 0 var(--border-color), -6px 0 12px rgba(8, 32, 74, 0.04);
}

.projects-data-table th:nth-child(10) {
    z-index: 7;
    background: color-mix(in srgb, var(--primary) 1%, var(--bg-card));
}

.projects-data-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.projects-data-table .badge {
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
}

.projects-data-table .table-sort-button {
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
}

.projects-data-table .project-row-actions {
    min-width: 0;
}

.project-alert-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.project-alert-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.1;
}

.project-alert-file {
    background: #ecfeff;
    color: #0e7490;
}

.project-alert-client {
    background: #fef3c7;
    color: #92400e;
}

.project-alert-staff {
    background: #ede9fe;
    color: #5b21b6;
}

.project-alert-payment {
    background: #fee2e2;
    color: #991b1b;
}

.project-alert-delivery {
    background: #dcfce7;
    color: #166534;
}

.project-health-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 0.24rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
}

.project-health-healthy {
    background: #dcfce7;
    color: #166534;
}

.project-health-attention {
    background: #fef3c7;
    color: #92400e;
}

.project-health-critical {
    background: #fee2e2;
    color: #991b1b;
}

.project-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -0.75rem 0 1.25rem;
}

.project-detail-tab {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    background: var(--bg-card);
    color: var(--primary);
    font-weight: 900;
    cursor: pointer;
}

.project-detail-tab.is-active {
    background: var(--primary);
    color: white;
}

.detail-card.is-health-view > :not(.project-organization-bar):not(#detailClientTitle):not(.project-detail-tabs):not(#projectHealthPanel) {
    display: none !important;
}

.detail-card.is-health-view #projectHealthPanel {
    display: block !important;
}

.project-detail-tab.project-health-tab-healthy {
    border-color: #86efac;
}

.project-detail-tab.project-health-tab-attention {
    border-color: #facc15;
    color: #92400e;
}

.project-detail-tab.project-health-tab-critical {
    border-color: #fca5a5;
    color: #991b1b;
}

.project-detail-tab.project-health-tab-attention.is-active {
    background: #f59e0b;
    color: white;
}

.project-detail-tab.project-health-tab-critical.is-active {
    background: #dc2626;
    color: white;
}

.project-health-panel {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--primary) 2%, var(--bg-card));
}

.project-health-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.project-health-header span,
.project-health-grid span {
    color: var(--text-light);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.project-health-header strong,
.project-health-grid strong {
    display: block;
    color: var(--primary);
}

.project-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.project-health-grid article,
.project-health-notes,
.project-health-next,
.client-auth-card,
.client-dashboard-project-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Highlight the project row the client is pointing at */
.client-dashboard-project-card:hover {
    background-color: rgba(var(--primary-rgb), 0.05);
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

/* Account-level financial summary on the client dashboard */
.client-account-finance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.client-account-finance article {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.client-account-finance article span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
}

.client-account-finance article strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary);
}

.client-account-finance article.finance-balance strong {
    color: #b45309;
}

.client-account-finance article.finance-paid strong {
    color: #15803d;
}

.client-account-finance .finance-note {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.project-health-grid article,
.project-health-notes,
.project-health-next {
    padding: 0.8rem;
}

.project-health-notes,
.project-health-next {
    margin-top: 0.75rem;
}

.project-health-actions,
.project-history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.project-health-action-btn,
.project-history-filter {
    padding: 0.42rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}

.project-history-filter {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--primary);
    cursor: pointer;
}

.project-history-filter.is-active {
    background: var(--primary);
    color: #fff;
}

.project-health-no-action {
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 980px) {
    .client-project-communication,
    .detail-communication-panel {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    #detailCommunicationPanelContent,
    .client-project-communication .client-message-thread,
    .client-project-communication .client-file-list {
        max-height: none;
    }

    .admin-nav-link {
        border-left: 0;
        padding-left: 0;
    }

    .public-auth-nav-group {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .public-account-toggle {
        width: 100%;
        justify-content: center;
    }

    .public-account-menu {
        position: static;
        width: 100%;
        margin-top: 0.5rem;
        box-shadow: none;
        text-align: center;
    }

    .client-account-topbar {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .client-dashboard-header-actions {
        justify-content: flex-start;
    }

    .client-dashboard-request-modal {
        padding: 0.5rem;
    }

    .client-dashboard-request-modal-card {
        width: 100%;
        height: calc(100dvh - 1rem);
        max-height: calc(100dvh - 1rem);
        padding: 0.75rem;
    }

    .client-dashboard-request-modal-card header {
        flex-direction: column;
    }

    .client-dashboard-request-modal-actions {
        width: 100%;
        justify-content: stretch;
    }

    .client-dashboard-request-modal-actions .btn {
        flex: 1 1 180px;
    }

    .client-dashboard-request-form-grid {
        grid-template-columns: 1fr;
    }

    .client-dashboard-native-request-form {
        padding: 0.75rem;
    }
}

.project-health-notes ul {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.client-auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.client-auth-card {
    width: min(520px, 100%);
    max-width: 100%;
    box-sizing: border-box;
    padding: clamp(1.25rem, 4vw, 2rem);
    box-shadow: var(--shadow-md);
}

/* Public mobile containment: audit-validated at 320px through 430px. */
@media (max-width: 576px) {
    .service-panel,
    .panel-preview,
    .panel-info,
    .mockup-frame,
    .onepage-preview-frame,
    .multipage-preview-frame,
    .portfolio-preview-frame,
    .business-preview-frame,
    .preview-iframe,
    .request-layout-grid,
    .request-layout-grid > *,
    .request-instruction-side {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .service-panel {
        width: 100%;
        padding: 1.25rem;
    }

    .mockup-frame,
    .onepage-preview-frame,
    .multipage-preview-frame,
    .portfolio-preview-frame,
    .business-preview-frame,
    .preview-iframe {
        width: 100% !important;
    }

    .preview-interaction-label {
        max-width: calc(100% - 1rem);
        padding: 0.4rem 0.75rem;
        white-space: normal;
        text-align: center;
    }

    .request-instruction-side {
        width: 100%;
    }

    .footer-links {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    .ticker-container {
        max-width: 100%;
        overflow: hidden;
    }
}

.client-auth-card h1 {
    margin: 0 0 1rem;
    color: var(--primary);
}

.client-auth-form {
    display: grid;
    gap: 0.85rem;
}

.client-auth-form label {
    display: grid;
    gap: 0.35rem;
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.client-auth-form input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font: inherit;
}

.client-auth-message {
    margin: 0.75rem 0;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    font-weight: 800;
}

.client-auth-message.is-success {
    background: #dcfce7;
    color: #166534;
}

.client-auth-message.is-warning {
    background: #fef3c7;
    color: #92400e;
}

.client-auth-message.is-error {
    background: #fee2e2;
    color: #991b1b;
}

.client-dashboard-projects {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.client-dashboard-project-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
    align-items: end;
}

.client-dashboard-project-card span {
    display: block;
    color: var(--text-light);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.client-dashboard-project-card strong {
    color: var(--primary);
}

.projects-data-table th:nth-child(10),
.projects-data-table td:nth-child(10) {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}

.projects-data-table .project-open-button,
.projects-data-table .project-move-select {
    width: 100%;
    min-width: 0;
}

@media (max-width: 1366px) {
    .projects-data-table {
        min-width: 1148px;
    }

    .projects-data-table th,
    .projects-data-table td {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .projects-data-table th:nth-child(3),
    .projects-data-table td:nth-child(3) { width: 138px; }

    .projects-data-table th:nth-child(5),
    .projects-data-table td:nth-child(5) { width: 130px; }

    .projects-data-table th:nth-child(6),
    .projects-data-table td:nth-child(6) { width: 126px; }
}

@media (max-width: 900px) {
    .projects-data-table {
        min-width: 1080px;
    }

    .projects-data-table th,
    .projects-data-table td {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .projects-data-table th:nth-child(1),
    .projects-data-table td:nth-child(1) {
        width: 96px;
        min-width: 96px;
        max-width: 96px;
    }

    .projects-data-table th:nth-child(10),
    .projects-data-table td:nth-child(10) {
        width: 124px;
        min-width: 124px;
        max-width: 124px;
    }
}

@media (max-width: 520px) {
    .project-table-wrapper {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        border-left-width: 0;
        border-right-width: 0;
        border-radius: 0;
    }

    .projects-data-table {
        min-width: 1020px;
    }
}

.admin-settings-grid {
    display: grid;
    grid-template-columns: minmax(520px, 1.08fr) minmax(420px, 0.92fr);
    align-items: start;
    gap: 1.5rem;
    width: min(96vw, 1560px);
    max-width: 100%;
}

.admin-settings-grid > .card {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 0 !important;
}

.admin-settings-notification-card {
    grid-column: 1;
    grid-row: 1;
}

.admin-settings-theme-card {
    grid-column: 1;
    grid-row: 2;
}

.admin-settings-stripe-card {
    grid-column: 1;
    grid-row: 3;
}

.admin-settings-pricing-card {
    grid-column: 1;
    grid-row: 4;
}

.admin-settings-backup-card {
    grid-column: 2;
    grid-row: 1;
}

.admin-settings-google-card {
    grid-column: 2;
    grid-row: 2;
}

.admin-settings-affiliate-card {
    grid-column: 2;
    grid-row: 3;
}

.admin-settings-security-card {
    grid-column: 2;
    grid-row: 4;
}

.admin-settings-backup-card,
.admin-settings-google-card,
.admin-settings-affiliate-card,
.admin-settings-security-card {
    min-width: 0;
}

.admin-settings-backup-card .btn.is-loading::before {
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.45rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    vertical-align: -0.12em;
    animation: wc-spin 0.75s linear infinite;
}

@keyframes wc-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 1100px) {
    .admin-settings-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .admin-settings-notification-card,
    .admin-settings-theme-card,
    .admin-settings-stripe-card,
    .admin-settings-pricing-card,
    .admin-settings-backup-card,
    .admin-settings-google-card,
    .admin-settings-affiliate-card,
    .admin-settings-security-card {
        grid-column: auto;
        grid-row: auto;
    }
}

.backup-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.backup-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.backup-history-row strong,
.backup-history-row span {
    display: block;
}

.backup-history-row span {
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.backup-history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .backup-history-row {
        align-items: stretch;
        flex-direction: column;
    }

    .backup-history-actions {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   MILESTONE B1 — Dark mode (authenticated surfaces only)
   Activated by data-theme="dark" on <html>. This attribute is applied ONLY:
   - on the admin SPA while an admin view is active (index.html, via JS routing)
   - on the authenticated client PHP pages (server-side from the wc_theme cookie)
   The public marketing site and proposal.php never receive this attribute, so
   they can never inherit these variables. Dark mode only re-defines existing
   CSS variables (plus a minimal button/input contrast layer); component styles
   are not rewritten. Light mode is unaffected when the attribute is absent.
   ========================================================================== */
html[data-theme="dark"] {
    /* Backgrounds */
    --bg-main: #0f172a;
    --bg-card: #1e293b;
    --bg-nav: rgba(15, 23, 42, 0.92);
    /* Text */
    --text-main: #e2e8f0;
    --text-muted: #a4b2c6;
    --text-light: #8595ab;
    --text-color: #e2e8f0;
    /* Brand — light blue reads as heading/label text on dark backgrounds */
    --primary: #7db3ff;
    --primary-light: #a9cdff;
    --primary-rgb: 125, 179, 255;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    /* Borders */
    --border-color: #334155;
    --border-hover: #475569;
    /* Shadows (deeper on dark) */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
    /* Status badges — translucent dark fills with light text */
    --status-new: rgba(234, 179, 8, 0.16);
    --status-new-text: #fcd34d;
    --status-review: rgba(59, 130, 246, 0.16);
    --status-review-text: #93c5fd;
    --status-approved: rgba(34, 197, 94, 0.16);
    --status-approved-text: #86efac;
    --status-deployed: rgba(168, 85, 247, 0.16);
    --status-deployed-text: #d8b4fe;
    --status-unpaid: rgba(239, 68, 68, 0.16);
    --status-unpaid-text: #fca5a5;
}

/* Minimal contrast layer: --primary is light in dark mode (for text), so the
   primary button uses the saturated --accent with white text to stay legible.
   Inputs are themed here directly so they work whether or not data-site-theme
   is present on the page. All values come from variables — no hardcoded hues. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] button.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] button.btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--bg-card);
    color: var(--text-main);
    border-color: var(--border-color);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-light);
}

/* Light/Dark toggle control (shared by admin header and client nav) */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-smooth);
}
.theme-toggle-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.theme-toggle-btn .theme-toggle-icon {
    font-size: 0.95rem;
    line-height: 1;
}

/* ==========================================================================
   MILESTONE B2 — Premium public skin (reversible, opt-in)
   Scoped entirely under html[data-public-theme="premium"], which JS applies ONLY on
   public marketing views (home/services/process/portfolio/why-choose-us/
   contact/request/success). When the attribute is absent the public site is
   pixel-identical to today. Admin/client surfaces and B1 dark mode are never
   touched because the attribute is only ever present on public views.
   Editorial direction: near-monochrome + one existing accent, hairline rules
   instead of cards, generous whitespace, fluid type, restrained motion.
   ========================================================================== */
html[data-public-theme="premium"] {
    /* Palette — warm off-white page, near-black ink, mid-grey secondary,
       hairline rules. Existing brand --accent kept as the single accent. */
    --bg-main: #F5F4F1;
    --bg-card: #F5F4F1;
    --bg-nav: rgba(245, 244, 241, 0.85);
    --primary: #0E0E0E;
    --primary-light: #0E0E0E;
    --text-main: #0E0E0E;
    --text-muted: #6B6B6B;
    --text-light: #6B6B6B;
    --border-color: #E2E0DB;
    --border-hover: #0E0E0E;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    /* Two families max, each with a robust system fallback stack. */
    --font-heading: 'Space Grotesk', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family: var(--font-body);
}

html[data-public-theme="premium"] body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-body);
}

/* Wider editorial measure and fluid gutters */
html[data-public-theme="premium"] .container {
    max-width: 1440px;
    padding-left: clamp(1.25rem, 4vw, 4rem);
    padding-right: clamp(1.25rem, 4vw, 4rem);
}

/* Section rhythm + hairline separation instead of boxed cards */
html[data-public-theme="premium"] .home-section {
    padding: clamp(5rem, 11vw, 9rem) 0;
    border-top: 1px solid var(--border-color);
}
html[data-public-theme="premium"] .home-section-bg-alt {
    background-color: transparent;
}

/* Typography — headings on the grotesk, body on the readable face */
html[data-public-theme="premium"] h1,
html[data-public-theme="premium"] h2,
html[data-public-theme="premium"] h3,
html[data-public-theme="premium"] .section-title,
html[data-public-theme="premium"] .home-hero h1 {
    font-family: var(--font-heading);
}

html[data-public-theme="premium"] .home-hero {
    padding: clamp(5rem, 11vw, 9rem) 0 clamp(3rem, 7vw, 6rem);
}
html[data-public-theme="premium"] #heroCanvas {
    display: none; /* typographic hero, not a photo/animation banner */
}
html[data-public-theme="premium"] .home-hero h1 {
    font-size: clamp(2.75rem, 8vw, 7rem);
    line-height: 1.0;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: var(--text-main);
    max-width: 18ch;
}
html[data-public-theme="premium"] .home-hero p.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 68ch;
}

html[data-public-theme="premium"] .section-title {
    font-size: clamp(1.875rem, 4.5vw, 3.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: var(--text-main);
}
html[data-public-theme="premium"] .section-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 68ch;
}

/* Numbered section eyebrows (01, 02 …) generated with a CSS counter — no copy
   is added to the markup. Micro-label styling per the design tokens. */
html[data-public-theme="premium"] #view-home {
    counter-reset: wc-premium-section;
}
html[data-public-theme="premium"] #view-home .home-section-header::before {
    counter-increment: wc-premium-section;
    content: counter(wc-premium-section, decimal-leading-zero) "  —";
    display: block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* De-box: cards become hairline-bordered, flat, no shadow, no colored fills.
   !important overrides the few inline background:white on public bento cards. */
html[data-public-theme="premium"] .bento-card {
    background: transparent !important;
    border: 1px solid var(--border-color);
    box-shadow: none !important;
    border-radius: 0;
}

/* Buttons — flat, square, ink by default; accent used sparingly on hover only */
html[data-public-theme="premium"] .btn {
    border-radius: 0;
    box-shadow: none !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
html[data-public-theme="premium"] .btn-primary {
    background-color: var(--text-main);
    color: var(--bg-main);
    border: 1px solid var(--text-main);
}
html[data-public-theme="premium"] .btn-primary:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: none;
}
html[data-public-theme="premium"] .btn-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
}
html[data-public-theme="premium"] .btn-secondary:hover {
    border-color: var(--text-main);
    background: transparent;
    transform: none;
}

/* Entrance motion (fade + rise). Classes are added by JS; content is never
   left hidden (JS safety net + reduced-motion fallback both force visible). */
html[data-public-theme="premium"] .premium-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-public-theme="premium"] .premium-reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    html[data-public-theme="premium"] .premium-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* RTL safety: letter-spacing breaks Arabic glyph joining — remove it on
   headings and the generated eyebrow when the document is right-to-left. */
html[dir="rtl"][data-public-theme="premium"] .home-hero h1,
html[dir="rtl"][data-public-theme="premium"] .section-title,
html[dir="rtl"][data-public-theme="premium"] .home-hero p.hero-subtitle,
html[dir="rtl"][data-public-theme="premium"] #view-home .home-section-header::before {
    letter-spacing: 0 !important;
}

/* ==========================================================================
   MILESTONE B2.1 - Premium public: layout rebuild + motion system
   All scoped under html[data-public-theme="premium"] (public views only). Injected
   nodes (.premium-eyebrow, split words) exist ONLY when the skin is on, so
   skin-off stays byte-identical. B1 dark mode + admin/client are untouched.
   ========================================================================== */

/* --- Left-aligned editorial hero --- */
html[data-public-theme="premium"] .home-hero-content {
    text-align: left;
    align-items: flex-start;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}
html[data-public-theme="premium"] .home-hero h1 {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 20ch;
}
html[data-public-theme="premium"] .home-hero p.hero-subtitle {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
html[data-public-theme="premium"] .badge-now-accepting {
    margin-left: 0;
}

/* --- Section eyebrow (injected, premium-only) --- */
html[data-public-theme="premium"] .premium-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    display: block;
    text-align: left;
}
html[dir="rtl"][data-public-theme="premium"] .premium-eyebrow { letter-spacing: 0 !important; }

/* --- Headline word-by-word reveal (English) --- */
html[data-public-theme="premium"] .premium-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}
html[data-public-theme="premium"] .premium-word-inner {
    display: inline-block;
    transform: translateY(115%);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
html[data-public-theme="premium"] .premium-word.is-visible .premium-word-inner {
    transform: none;
    opacity: 1;
}
html[data-public-theme="premium"] .section-title:not(.premium-split),
html[data-public-theme="premium"] .home-hero h1:not(.premium-split) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-public-theme="premium"] .section-title.is-visible,
html[data-public-theme="premium"] .home-hero h1.is-visible {
    opacity: 1;
    transform: none;
}

/* --- Image / media clip-path wipe --- */
html[data-public-theme="premium"] .premium-wipe {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: clip-path;
}
html[data-public-theme="premium"] .premium-wipe.is-visible {
    clip-path: inset(0 0 0 0);
}

/* --- Services: hairline editorial rows --- */
html[data-public-theme="premium"] .services-panels-list { gap: 0; }
html[data-public-theme="premium"] .service-panel {
    background: transparent !important;
    border: 0;
    border-top: 1px solid var(--border-color);
    box-shadow: none !important;
    border-radius: 0;
    padding: clamp(3rem, 7vw, 6rem) 0;
}

/* --- Process: de-boxed timeline as hairline rows; sticky header pin --- */
html[data-public-theme="premium"] .timeline-connector-bar { display: none; }
html[data-public-theme="premium"] .timeline-step-row {
    border-top: 1px solid var(--border-color);
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    align-items: flex-start;
}
html[data-public-theme="premium"] .timeline-step-content-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html[data-public-theme="premium"] .timeline-step-circle {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    box-shadow: none;
}
html[data-public-theme="premium"] .timeline-step-badge {
    color: var(--text-muted);
    background: transparent;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
html[data-public-theme="premium"] #view-process > .container > div:first-child {
    position: sticky;
    top: 72px;
    z-index: 2;
    background: var(--bg-main);
    text-align: left;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    margin-bottom: 2rem;
}

/* --- Portfolio: large hairline-framed media --- */
html[data-public-theme="premium"] .portfolio-stitch-grid { gap: clamp(2rem, 5vw, 4rem); }
html[data-public-theme="premium"] .portfolio-stitch-item {
    background: transparent !important;
    border: 1px solid var(--border-color);
    box-shadow: none !important;
    border-radius: 0;
}

/* --- Why Choose Us: hairline rows (de-boxed) --- */
html[data-public-theme="premium"] .bento-grid { gap: 0; }
html[data-public-theme="premium"] .bento-card {
    border: 0 !important;
    border-top: 1px solid var(--border-color) !important;
    padding: clamp(2rem, 4vw, 3rem) 0 !important;
    border-radius: 0;
}

/* --- Marquee: premium restyle of the existing ticker + pause on hover --- */
html[data-public-theme="premium"] .ticker-container {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: transparent;
}
html[data-public-theme="premium"] .ticker-item {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
}
html[data-public-theme="premium"] .ticker-container:hover .ticker-track {
    animation-play-state: paused;
}

/* --- Request/intake + contact: premium form (hairline underlines, de-boxed) --- */
html[data-public-theme="premium"] #view-request .form-card,
html[data-public-theme="premium"] #view-contact .form-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html[data-public-theme="premium"] #view-request input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-public-theme="premium"] #view-request textarea,
html[data-public-theme="premium"] #view-request select,
html[data-public-theme="premium"] #view-contact input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-public-theme="premium"] #view-contact textarea,
html[data-public-theme="premium"] #view-contact select {
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    transition: border-color 0.25s ease;
}
html[data-public-theme="premium"] #view-request input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html[data-public-theme="premium"] #view-request textarea:focus,
html[data-public-theme="premium"] #view-request select:focus,
html[data-public-theme="premium"] #view-contact input:focus,
html[data-public-theme="premium"] #view-contact textarea:focus,
html[data-public-theme="premium"] #view-contact select:focus {
    border-bottom-color: var(--accent);
    box-shadow: none;
    outline: none;
}

/* --- Micro-interactions --- */
html[data-public-theme="premium"] .nav-link { position: relative; }
html[data-public-theme="premium"] .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
html[dir="rtl"][data-public-theme="premium"] .nav-link::after { transform-origin: right; }
html[data-public-theme="premium"] .nav-link:hover::after { transform: scaleX(1); }
html[data-public-theme="premium"] .service-panel,
html[data-public-theme="premium"] .timeline-step-row,
html[data-public-theme="premium"] .portfolio-stitch-item,
html[data-public-theme="premium"] .bento-card {
    transition: border-color 0.3s ease;
}
html[data-public-theme="premium"] .service-panel:hover,
html[data-public-theme="premium"] .timeline-step-row:hover,
html[data-public-theme="premium"] .portfolio-stitch-item:hover,
html[data-public-theme="premium"] .bento-card:hover {
    border-top-color: var(--text-main);
}

/* --- Page-load intro (once/session, non-blocking) --- */
@keyframes premiumIntro {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
html.premium-intro-run[data-public-theme="premium"] main {
    animation: premiumIntro 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.premium-intro-run[data-public-theme="premium"] #mainHeader {
    animation: premiumIntro 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Reduced motion: everything in final state, no animation --- */
@media (prefers-reduced-motion: reduce) {
    html[data-public-theme="premium"] .premium-word-inner { transform: none !important; opacity: 1 !important; transition: none !important; }
    html[data-public-theme="premium"] .premium-wipe { clip-path: none !important; transition: none !important; }
    html[data-public-theme="premium"] .section-title:not(.premium-split),
    html[data-public-theme="premium"] .home-hero h1:not(.premium-split) { opacity: 1 !important; transform: none !important; }
    html.premium-intro-run[data-public-theme="premium"] main,
    html.premium-intro-run[data-public-theme="premium"] #mainHeader { animation: none !important; }
}

/* ==========================================================================
   MILESTONE B3 - Premium public theme: line icons + card removal
   Scoped under html[data-public-theme="premium"] (public views only).
   ========================================================================== */

/* Line icons replacing decorative emoji (injected by JS, reversible) */
html[data-public-theme="premium"] .future-icon,
html[data-public-theme="premium"] .icon-wrap {
    color: var(--text-main);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0;
    margin-bottom: 1rem;
}
html[data-public-theme="premium"] .future-icon svg,
html[data-public-theme="premium"] .icon-wrap svg {
    width: 30px;
    height: 30px;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    display: block;
}

/* Remove floating white cards on the Services future-roadmap -> hairline rows */
html[data-public-theme="premium"] .future-services-grid {
    display: block;
}
html[data-public-theme="premium"] .future-service-card {
    background: transparent !important;
    border: 0;
    border-top: 1px solid var(--border-color);
    box-shadow: none !important;
    border-radius: 0;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    transition: border-color 0.3s ease;
}
html[data-public-theme="premium"] .future-service-card:hover {
    border-top-color: var(--text-main);
}
html[data-public-theme="premium"] .future-badge {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    box-shadow: none;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Extra section breathing room across all premium public sections */
html[data-public-theme="premium"] .home-section,
html[data-public-theme="premium"] #view-services > .container,
html[data-public-theme="premium"] #view-process > .container,
html[data-public-theme="premium"] #view-why-choose-us > .container,
html[data-public-theme="premium"] #view-contact > .container {
    padding-top: clamp(4rem, 9vw, 8rem);
    padding-bottom: clamp(4rem, 9vw, 8rem);
}

/* Larger, cleaner example media (browser mockups / previews) */
html[data-public-theme="premium"] .preview-iframe {
    border: 1px solid var(--border-color) !important;
}

/* ==========================================================================
   MILESTONE B4 — Premium public theme: DARK CINEMATIC redesign
   Everything stays scoped under html[data-public-theme="premium"] (public
   views only). This block comes LAST, so at equal selector-specificity its
   declarations win over the B2/B2.1/B3 light/bone premium rules — flipping the
   palette variables cascades dark colours through every rule that already uses
   var(--…): borders, text, badges, timeline, ticker, inputs, buttons.
   Standard (attribute absent) is completely untouched and byte-identical.
   ========================================================================== */

/* --- 1. Dark cinematic palette (variable flip cascades to existing rules) --- */
html[data-public-theme="premium"] {
    --bg-main: #0A0A0B;          /* near-black base                          */
    --bg-card: #111113;          /* alternating darker band                  */
    --bg-nav: rgba(10, 10, 11, 0.82);
    --primary: #EDEDEA;          /* off-white ink (used by inline color vars) */
    --primary-light: #EDEDEA;
    --text-main: #EDEDEA;        /* primary off-white                        */
    --text-muted: #9A9A97;       /* muted grey secondary                     */
    --text-light: #9A9A97;
    --border-color: #26262A;     /* 1px hairline on dark                     */
    --border-hover: #EDEDEA;
    --accent: #9B97F5;           /* restrained muted indigo (buttons/focus)  */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    /* Display serif for headings only; body stays on the existing sans. */
    --font-display: 'Fraunces', 'Newsreader', Georgia, 'Times New Roman', serif;
    color-scheme: dark;
}

html[data-public-theme="premium"] body {
    background-color: var(--bg-main);
    color: var(--text-main);
}
/* Each SPA view inherits the near-black base (no white gaps between bands). */
html[data-public-theme="premium"] .app-view {
    background-color: var(--bg-main);
}

/* --- 2. Header/nav on dark --- */
html[data-public-theme="premium"] #mainHeader {
    background-color: var(--bg-nav);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
}
html[data-public-theme="premium"] #mainHeader .logo,
html[data-public-theme="premium"] #mainHeader a,
html[data-public-theme="premium"] .nav-link {
    color: var(--text-main);
}
html[data-public-theme="premium"] #mainHeader select {
    background-color: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

/* --- 3. Serif headings (display). Micro-labels (eyebrow/badges) stay sans. --- */
html[data-public-theme="premium"] h1,
html[data-public-theme="premium"] h2,
html[data-public-theme="premium"] h3,
html[data-public-theme="premium"] .section-title,
html[data-public-theme="premium"] .home-hero h1 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.005em;
}
/* RTL: fall back to the sans body stack so Arabic joins correctly. */
html[dir="rtl"][data-public-theme="premium"] h1,
html[dir="rtl"][data-public-theme="premium"] h2,
html[dir="rtl"][data-public-theme="premium"] h3,
html[dir="rtl"][data-public-theme="premium"] .section-title,
html[dir="rtl"][data-public-theme="premium"] .home-hero h1 {
    font-family: var(--font-body);
    letter-spacing: 0 !important;
}

/* --- 4. Hero: dark, calm, MODEST centred serif headline + particle layer --- */
html[data-public-theme="premium"] .home-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem);
}
/* Particle host sits fully behind the hero content and never intercepts input */
html[data-public-theme="premium"] .premium-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
html[data-public-theme="premium"] .premium-particles canvas {
    display: block !important;
}
html[data-public-theme="premium"] .home-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    align-items: center;
    max-width: 1000px;
}
html[data-public-theme="premium"] .home-hero h1 {
    font-size: clamp(1.75rem, 3.5vw, 3rem);   /* modest — fits with sub + CTA */
    line-height: 1.18;
    font-weight: 300;
    letter-spacing: -0.01em;
    text-align: center;
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-main);
}
html[data-public-theme="premium"] .home-hero p.hero-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 58ch;
    color: var(--text-muted);
}
html[data-public-theme="premium"] #view-home .premium-eyebrow {
    text-align: center;
}
html[data-public-theme="premium"] #view-home .badge-now-accepting {
    margin-left: auto;
    margin-right: auto;
}
/* Hide the light atmospheric glow so the hero reads as clean near-black */
html[data-public-theme="premium"] .atmospheric-glow {
    display: none;
}

/* --- 5. Section rhythm: alternating darker bands (#111113) within a page --- */
html[data-public-theme="premium"] .service-panel:nth-of-type(even),
html[data-public-theme="premium"] .future-service-card:nth-of-type(even),
html[data-public-theme="premium"] .timeline-step-row:nth-of-type(even),
html[data-public-theme="premium"] .bento-card:nth-of-type(even) {
    /* !important overrides the B2 `background: transparent !important` de-box rule */
    background-color: var(--bg-card) !important;
}
/* Give the tinted rows a little inner gutter so the band reads deliberately */
html[data-public-theme="premium"] .service-panel:nth-of-type(even),
html[data-public-theme="premium"] .future-service-card:nth-of-type(even),
html[data-public-theme="premium"] .bento-card:nth-of-type(even) {
    padding-left: clamp(1rem, 3vw, 2.5rem);
    padding-right: clamp(1rem, 3vw, 2.5rem);
}
/* Sticky Process header on dark */
html[data-public-theme="premium"] #view-process > .container > div:first-child {
    background: var(--bg-main);
}

/* --- 6. THE single light contrast band (home Journey block) --- */
/* Full-bleed light band inside the hero container for a cinematic dark→light
   rhythm shift. Its ink flips to near-black; children with inline off-white
   colour vars are overridden here so they stay legible on the light band. */
html[data-public-theme="premium"] .premium-band-light {
    position: relative;
    background-color: #F4F3F0;
    color: #141414;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem) !important;
    margin-top: clamp(3.5rem, 7vw, 6rem);
    border-top: 1px solid #E3E0D8;
    border-bottom: 1px solid #E3E0D8;
}
html[data-public-theme="premium"] .premium-band-light h2,
html[data-public-theme="premium"] .premium-band-light h3 {
    color: #141414 !important;
    font-family: var(--font-display);
}
html[data-public-theme="premium"] .premium-band-light .btn-secondary {
    color: #141414;
    border-color: rgba(20, 20, 20, 0.22);
    background: transparent;
}
html[data-public-theme="premium"] .premium-band-light .btn-secondary:hover {
    border-color: #141414;
}
html[data-public-theme="premium"] .premium-band-light .btn-primary {
    background-color: #141414;
    color: #F4F3F0;
    border-color: #141414;
}
html[data-public-theme="premium"] .premium-band-light .btn-primary:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* --- 7. Forms on dark: light text, dark hairline inputs (functional-identical) --- */
html[data-public-theme="premium"] #view-request input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-public-theme="premium"] #view-request textarea,
html[data-public-theme="premium"] #view-request select,
html[data-public-theme="premium"] #view-contact input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-public-theme="premium"] #view-contact textarea,
html[data-public-theme="premium"] #view-contact select {
    color: var(--text-main);
    background: transparent;
}
html[data-public-theme="premium"] #view-request input::placeholder,
html[data-public-theme="premium"] #view-request textarea::placeholder,
html[data-public-theme="premium"] #view-contact input::placeholder,
html[data-public-theme="premium"] #view-contact textarea::placeholder {
    color: var(--text-light);
    opacity: 1;
}
/* Native select popups render their own options; give them a dark-friendly hint */
html[data-public-theme="premium"] #view-request select option,
html[data-public-theme="premium"] #view-contact select option {
    color: #141414;
}
/* Feature checkboxes: keep native controls, ensure their labels read on dark */
html[data-public-theme="premium"] #view-request label,
html[data-public-theme="premium"] #view-contact label,
html[data-public-theme="premium"] #view-request .form-subtitle,
html[data-public-theme="premium"] #view-contact .form-subtitle {
    color: var(--text-main);
}
html[data-public-theme="premium"] #view-request input[type="checkbox"],
html[data-public-theme="premium"] #view-request input[type="radio"] {
    accent-color: var(--accent);
}

/* --- 8. Buttons already flip via vars; ensure a legible off-white primary --- */
html[data-public-theme="premium"] .btn-primary {
    background-color: var(--text-main);
    color: var(--bg-main);
    border-color: var(--text-main);
}
html[data-public-theme="premium"] .btn-primary:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* --- 9. Media framing on dark --- */
html[data-public-theme="premium"] .preview-iframe,
html[data-public-theme="premium"] .portfolio-stitch-item,
html[data-public-theme="premium"] .mockup-frame {
    border-color: var(--border-color) !important;
}

/* --- 10. Reduced motion: particle host stays (plain dark), no other change --- */
@media (prefers-reduced-motion: reduce) {
    html[data-public-theme="premium"] .premium-particles { display: block; }
}

/* ==========================================================================
   MILESTONE B4.1 — Premium (dark cinematic) theme fixes
   All scoped under html[data-public-theme="premium"] ONLY. Standard (attribute
   absent) is untouched. These correct spots where the dark theme failed to
   apply because base rules use var(--primary), which Premium flips to off-white.
   ========================================================================== */

/* --- 1. "Start Your Journey" band: was a light strip → dark band --------- */
html[data-public-theme="premium"] .premium-band-light {
    background-color: #111113;
    color: var(--text-main);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
html[data-public-theme="premium"] .premium-band-light h2,
html[data-public-theme="premium"] .premium-band-light h3 {
    color: var(--text-main) !important;
    font-family: var(--font-display);
}
html[data-public-theme="premium"] .premium-band-light .btn-secondary {
    color: var(--text-main);
    border-color: var(--border-color);
    background: transparent;
}
html[data-public-theme="premium"] .premium-band-light .btn-secondary:hover {
    border-color: var(--text-main);
}
html[data-public-theme="premium"] .premium-band-light .btn-primary {
    background-color: var(--text-main);
    color: var(--bg-main);
    border-color: var(--text-main);
}
html[data-public-theme="premium"] .premium-band-light .btn-primary:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* --- 2. Footer dark on ALL public views --------------------------------- */
/* Base `footer { background-color: var(--primary) }` → off-white under Premium.
   Force near-black bg + light text to match the header. */
html[data-public-theme="premium"] footer {
    background-color: var(--bg-main) !important;
    color: var(--text-main);
    border-top: 1px solid var(--border-color);
}
html[data-public-theme="premium"] footer .footer-logo { color: var(--text-main) !important; }
html[data-public-theme="premium"] footer .footer-links a { color: var(--text-muted); }
html[data-public-theme="premium"] footer .footer-links a:hover { color: var(--text-main); }
html[data-public-theme="premium"] footer .footer-copyright { color: var(--text-light); }

/* --- 3. "Start Request" nav CTA (.cta-nav): washed-out → premium button --- */
/* Base: background var(--primary) (off-white) + color white !important → the
   !important white text needs !important to override. */
html[data-public-theme="premium"] .cta-nav {
    background: var(--text-main) !important;
    color: var(--bg-main) !important;
    border: 1px solid var(--text-main);
    border-radius: 0;
}
html[data-public-theme="premium"] .cta-nav:hover {
    background: var(--accent) !important;
    border-color: var(--accent);
    color: #fff !important;
    box-shadow: none;
    transform: none;
}

/* --- 4. Process header: remove the sticky pin (scroll away naturally) ---- */
html[data-public-theme="premium"] #view-process > .container > div:first-child {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

/* --- 5. Contact "Send Message": guarantee a solid, readable primary button */
html[data-public-theme="premium"] #view-contact .btn-primary,
html[data-public-theme="premium"] #btn-submit-contact {
    background-color: var(--text-main) !important;
    color: var(--bg-main) !important;
    border: 1px solid var(--text-main) !important;
    box-shadow: none !important;
}
html[data-public-theme="premium"] #view-contact .btn-primary:hover,
html[data-public-theme="premium"] #btn-submit-contact:hover {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* --- 6. Client auth page (client-auth.php) under Premium ----------------- */
/* The page shares style.css; the Premium variable flip cascades to its
   var-driven styles (dark body/card/borders/labels via --bg-main/--bg-card/
   --border-color/--text-*). These rules cover the few hardcoded spots so
   contrast is guaranteed. Standard is unaffected (attribute absent). */
html[data-public-theme="premium"] .client-auth-tabs a.is-active {
    background: var(--text-main);
    color: var(--bg-main);
    border-color: var(--text-main);
}
html[data-public-theme="premium"] .client-auth-form input {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
}
html[data-public-theme="premium"] .client-auth-form input::placeholder { color: var(--text-light); }
html[data-public-theme="premium"] .client-auth-card {
    box-shadow: none;
}
html[data-public-theme="premium"] .client-auth-card h1 {
    color: var(--text-main);
    font-family: var(--font-display);
}

/* ==========================================================================
   MILESTONE B5 — Premium LIGHT mode (reverse) + visitor light/dark toggle
   Premium Dark is the default (base premium vars). Light mode = the SAME
   premium design with colours reversed — implemented purely by overriding the
   palette variables under html[data-public-theme="premium"][data-premium-mode="light"].
   Every premium rule resolves through these variables, so nothing else needs a
   light-specific rule except the two spots that hardcoded a dark tint.
   Standard (no data-public-theme) is untouched and stays the inert fallback.
   ========================================================================== */

html[data-public-theme="premium"][data-premium-mode="light"] {
    --bg-main: #F5F4F1;        /* warm bone (never pure white)              */
    --bg-card: #EAE8E0;        /* alternating band tint on light            */
    --bg-nav: rgba(245, 244, 241, 0.82);
    --primary: #141414;
    --primary-light: #141414;
    --text-main: #141414;      /* near-black ink                            */
    --text-muted: #5C5C5C;
    --text-light: #6B6B6B;
    --border-color: #DAD6CC;   /* darker low-contrast hairline on light     */
    --border-hover: #141414;
    color-scheme: light;
    /* --accent is intentionally the SAME single accent as Dark mode.       */
}

/* The one hardcoded dark tint (the "Start Your Journey" band = #111113 in
   Dark) becomes a light-contrast tint in Light. */
html[data-public-theme="premium"][data-premium-mode="light"] .premium-band-light {
    background-color: #EAE8E0;
    border-top-color: var(--border-color);
    border-bottom-color: var(--border-color);
}

/* --- Visitor light/dark toggle control ---------------------------------- */
/* The toggle + language selector share one header grid cell (.nav-end) so the
   grid column count never changes. Under Standard the toggle is display:none,
   leaving just the language selector exactly where it was → pixel-identical. */
.nav-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.4rem, 1vw, 0.6rem);
}
/* Hidden entirely when the attribute is absent → invisible under the Standard
   fallback, so Standard stays pixel-identical. */
#premiumModeToggle { display: none; }
html[data-public-theme="premium"] #premiumModeToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-left: 0;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-main);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    flex: 0 0 auto;
}
html[data-public-theme="premium"] #premiumModeToggle:hover { border-color: var(--text-main); }
html[data-public-theme="premium"] #premiumModeToggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}
/* Show the icon of the mode you'll switch TO: sun in Dark, moon in Light. */
html[data-public-theme="premium"] #premiumModeToggle .icon-moon { display: none; }
html[data-public-theme="premium"] #premiumModeToggle .icon-sun { display: block; }
html[data-public-theme="premium"][data-premium-mode="light"] #premiumModeToggle .icon-sun { display: none; }
html[data-public-theme="premium"][data-premium-mode="light"] #premiumModeToggle .icon-moon { display: block; }

/* Auth page: place the toggle top-right of the card for a consistent control. */
html[data-public-theme="premium"] .client-auth-card { position: relative; }
html[data-public-theme="premium"] .client-auth-card #premiumModeToggle {
    position: absolute;
    top: clamp(1rem, 3vw, 1.5rem);
    inset-inline-end: clamp(1rem, 3vw, 1.5rem);
    margin-left: 0;
}

/* ==========================================================================
   MILESTONE B6.1 — Remove numbered eyebrows on all public views (Premium).
   Injection is already disabled in app.js; these rules are belt-and-suspenders
   so a cached/stray eyebrow (injected .premium-eyebrow OR the older CSS-counter
   eyebrow) can never show. Standard is unaffected (attribute absent).
   ========================================================================== */
html[data-public-theme="premium"] .premium-eyebrow { display: none !important; }
html[data-public-theme="premium"] #view-home .home-section-header::before { content: none !important; }