/* =============================================================
   KneuraPrice™ — Design System v3
   Scandinavian Minimal · Apple Motion · WCAG AA
   ============================================================= */

/* ── TOKENS ── */
:root {
    /* Surfaces */
    --bg:        #F5F5F7;
    --surface:   #FFFFFF;
    --surface-2: #F2F2F5;
    --border:    rgba(0,0,0,0.08);
    --border-2:  rgba(0,0,0,0.14);

    /* Text — all pass WCAG AA (≥4.5:1 on bg) */
    --text:      #111111;   /* 16:1 */
    --text-2:    #515154;   /* 7.2:1 — section labels, column heads */
    --text-3:    #6E6E73;   /* 4.7:1 — supplementary / placeholder */

    /* Accent */
    --accent:      #0A98D9;
    --accent-rgb:  10,152,217;
    --accent-bg:   rgba(10,152,217,0.09);

    /* Semantic */
    --success:     #008A55;
    --danger:      #C5062A;
    --warn:        #8C5700;

    /* Header */
    --header-bg:   rgba(245,245,247,0.88);

    /* Shadows — layered, diffuse (Apple style) */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg: 0 20px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);

    /* Motion */
    --spring:     cubic-bezier(0.34,1.56,0.64,1);  /* large reveals only */
    --ease-out:   cubic-bezier(0.16,1,0.30,1);
    --ease-inout: cubic-bezier(0.45,0,0.15,1);
    --t-xs: 90ms; --t-sm: 160ms; --t-md: 280ms; --t-lg: 420ms;

    /* Type scale — 5 sizes, consistent */
    --fs-micro: 0.6875rem;   /* 11px — labels, badges, metadata */
    --fs-sm:    0.8125rem;   /* 13px — secondary text, table data */
    --fs-md:    0.9375rem;   /* 15px — body, inputs */
    --fs-title: 1.875rem;    /* 30px — page heading */
    --fs-grand: 3rem;        /* 48px — grand total number */

    /* Spacing — strict 4pt grid */
    --sp-1: 0.25rem;   /* 4px */
    --sp-2: 0.5rem;    /* 8px */
    --sp-3: 0.75rem;   /* 12px */
    --sp-4: 1rem;      /* 16px */
    --sp-5: 1.25rem;   /* 20px */
    --sp-6: 1.5rem;    /* 24px */
    --sp-8: 2rem;      /* 32px */
    --sp-10: 2.5rem;   /* 40px */

    /* Layout */
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-pill: 100px;
    --max-w:  880px;
    --pad:    var(--sp-8);
}

[data-theme="dark"] {
    --bg:        #0A0A0F;
    --surface:   #141418;
    --surface-2: #1C1C22;
    --border:    rgba(255,255,255,0.08);
    --border-2:  rgba(255,255,255,0.14);
    --text:      #E8E8EE;
    --text-2:    #AEAEB8;   /* 5.2:1 on #0A0A0F */
    --text-3:    #78787E;   /* 4.6:1 on #0A0A0F */
    --accent:    #0A84FF;
    --accent-rgb: 10,132,255;
    --accent-bg:  rgba(10,132,255,0.08);
    --success:    #00B871;
    --warn:       #F6A623;
    --header-bg:  rgba(10,10,15,0.88);
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
    --shadow-md:  0 8px 24px rgba(0,0,0,0.45);
    --shadow-lg:  0 20px 48px rgba(0,0,0,0.55);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

/* ── BASE ── */
html { scroll-behavior:smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--t-md) var(--ease-out), color var(--t-md) var(--ease-out);
}

/* ── REDUCED MOTION — respect system preference ── */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── PAGE ENTER ── */
main.page { animation: pageIn var(--t-lg) var(--ease-out) both; }
@keyframes pageIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:none; }
}

/* ── TOAST NOTIFICATIONS ── */
#toast-root {
    position: fixed;
    top: 5rem;
    right: var(--sp-6);
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    pointer-events: none;
}
.toast {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 500;
    background: var(--text);
    color: var(--bg);
    box-shadow: var(--shadow-md);
    animation: toastIn var(--t-md) var(--ease-out) both;
    pointer-events: auto;
    max-width: 280px;
    line-height: 1.4;
}
.toast-error { background: var(--danger); color: #fff; }
.toast-success { background: var(--success); color: #fff; }
.toast-out { animation: toastOut var(--t-sm) var(--ease-inout) both; }
@keyframes toastIn  { from { opacity:0; transform:translateX(12px) scale(0.96); } to { opacity:1; transform:none; } }
@keyframes toastOut { to   { opacity:0; transform:translateX(12px) scale(0.96); } }

/* ── FIELD VALIDATION ERROR ── */
@keyframes shake {
    0%,100% { transform:translateX(0); }
    20%     { transform:translateX(-4px); }
    40%     { transform:translateX(4px); }
    60%     { transform:translateX(-3px); }
    80%     { transform:translateX(2px); }
}
.field-error input,
.field-error select {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(197,6,42,0.12) !important;
    animation: shake 0.32s var(--ease-out);
}

/* ── HEADER ── */
.header {
    background: var(--header-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--border);
    padding: 0 var(--pad);
    height: 54px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background var(--t-md), border-color var(--t-md);
}
.header-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
}
.header-brand img {
    height: 28px;
    width: auto;
    display: block;
    transition: opacity var(--t-sm);
}
.header-brand:hover img { opacity: 0.75; }
.brand-mark {
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
}
.brand-mark span { color: var(--accent); }
.brand-divider { width: 1px; height: 16px; background: var(--border-2); flex-shrink: 0; }
.brand-tool { font-size: var(--fs-micro); color: var(--text-3); letter-spacing: 0.01em; }
.header-right { display:flex; align-items:center; gap:var(--sp-3); }

/* ── CURRENCY SELECT ── */
.currency-wrap { display:flex; align-items:center; gap:var(--sp-2); }
.currency-wrap > label { font-size:var(--fs-micro); font-weight:500; color:var(--text-3); text-transform:none; letter-spacing:0; margin:0; }
#currencySelect {
    width: auto;
    font-size: var(--fs-micro);
    padding: 0.3rem 1.5rem 0.3rem var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%236E6E73'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    transition: border-color var(--t-sm);
}
#currencySelect:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }

/* ── THEME BUTTON ── */
.theme-btn {
    height: 28px;
    padding: 0 var(--sp-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: var(--fs-micro);
    font-weight: 500;
    font-family: inherit;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    transition: border-color var(--t-sm), color var(--t-sm), transform var(--t-xs) var(--ease-out);
}
.theme-btn:hover { border-color:var(--accent); color:var(--accent); }
.theme-btn:active { transform:scale(0.94); }

/* ── NAV ── */
.tabs-nav {
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex;
    padding: 0 var(--pad);
    overflow-x: auto;
    scrollbar-width: none;
    position: sticky;
    top: 54px;
    z-index: 99;
}
.tabs-nav::-webkit-scrollbar { display:none; }
.tab-btn {
    padding: 0 var(--sp-4);
    height: 42px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-3);
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    margin-bottom: -1px;
    letter-spacing: -0.01em;
    transition: color var(--t-sm) var(--ease-out), border-color var(--t-sm) var(--ease-out);
}
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.tab-btn:hover:not(.active) { color:var(--text-2); }

/* ── STEP PROGRESS ── */
.step-progress {
    height: 2px;
    background: var(--border);
    position: sticky;
    top: 130px;
    z-index: 97;
}
.step-progress-bar {
    height: 100%;
    background: var(--accent);
    transition: width var(--t-lg) var(--ease-out);
}

/* ── PAGE ── */
.page { max-width:var(--max-w); margin:0 auto; padding:var(--pad); }

.page-header { margin-bottom:var(--sp-8); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--border); }
.page-header h2 {
    font-size: var(--fs-title);
    font-weight: 300;
    letter-spacing: -0.045em;
    color: var(--text);
    line-height: 1.15;
}
.page-header p { font-size:var(--fs-sm); color:var(--text-2); margin-top:var(--sp-1); line-height:1.5; }

/* ── CARDS ── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-xs);
    opacity: 0;
    animation: cardIn var(--t-lg) var(--ease-out) forwards;
    /* no hover state — cards are containers, not interactive targets */
}
.card:nth-child(1) { animation-delay: 30ms; }
.card:nth-child(2) { animation-delay: 80ms; }
.card:nth-child(3) { animation-delay: 130ms; }
.card:nth-child(4) { animation-delay: 180ms; }
.card:nth-child(5) { animation-delay: 230ms; }
.card:nth-child(6) { animation-delay: 280ms; }
.card:nth-child(7) { animation-delay: 330ms; }
.card:nth-child(8) { animation-delay: 380ms; }
@keyframes cardIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:none; }
}
.card-title {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: var(--sp-5);
}

/* ── INFO BAR ── */
.info-bar {
    font-size: var(--fs-sm);
    color: var(--text-2);
    margin-bottom: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--accent-bg);
    opacity: 0;
    animation: cardIn var(--t-lg) var(--ease-out) 20ms forwards;
}
.info-bar strong { color:var(--accent); font-weight:600; }

/* ── FORM ── */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: var(--sp-4);
}
.field { display:flex; flex-direction:column; }
.field-wide { grid-column: span 2; min-width: 0; }
.field-end { justify-content: flex-end; }
.mono-cell { font-family:'JetBrains Mono',monospace; font-size:var(--fs-sm); }
label {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: var(--sp-1);
    transition: color var(--t-sm);
}
.field:focus-within > label { color:var(--accent); }

input, select {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-md);
    font-family: inherit;
    transition: border-color var(--t-sm) var(--ease-out),
                box-shadow var(--t-sm) var(--ease-out),
                background var(--t-sm);
    -webkit-appearance: none;
    appearance: none;
}
input:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
    background: var(--surface);
}
input::placeholder { color:var(--text-3); }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; }

/* ── BUTTONS ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: 0 var(--sp-4);
    height: 36px;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--t-xs) var(--ease-out),
                transform var(--t-xs) var(--ease-out),
                box-shadow var(--t-sm) var(--ease-out);
}
.btn-primary { background:var(--accent); color:#fff; }
[data-theme="dark"] .btn-primary { color:var(--bg); }
.btn-primary:hover { opacity:0.85; box-shadow:0 4px 14px rgba(var(--accent-rgb),0.35); }
.btn-primary:active { transform:scale(0.97); opacity:0.9; }
.btn-primary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.btn-ghost {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
}
.btn-ghost:hover { border-color:var(--border-2); color:var(--text); }
.btn-ghost:active { transform:scale(0.97); }
.btn-ghost:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* Delete icon button */
.btn-del {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--r-sm);
    background: transparent;
    border: none;
    color: var(--text-3);
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--t-xs), color var(--t-xs), transform var(--t-xs) var(--ease-out);
}
.btn-del:hover { background:rgba(197,6,42,0.10); color:var(--danger); }
.btn-del:active { transform:scale(0.90); }
.btn-del:focus-visible { outline:2px solid var(--danger); outline-offset:2px; border-radius:var(--r-sm); }

.btn-edit {
    width:28px; height:28px; padding:0;
    border-radius:var(--r-sm); background:transparent; border:none;
    color:var(--text-3); font-size:0.88rem; cursor:pointer; font-family:inherit;
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:background var(--t-xs), color var(--t-xs), transform var(--t-xs) var(--spring);
}
.btn-edit:hover { background:var(--accent-bg); color:var(--accent); }
.btn-edit:active { transform:scale(0.88); }
.btn-edit:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); }

.row-actions { display:flex; gap:3px; align-items:center; justify-content:flex-end; }

.row-editing td { animation:rowPulse 1.4s var(--ease-out); }
@keyframes rowPulse {
    0%   { background:var(--accent-bg); }
    100% { background:transparent; }
}

.field-hint {
    font-size:0.6rem; font-weight:400; letter-spacing:0.02em;
    text-transform:none; color:var(--text-3); opacity:0.9;
}

/* ── HOW-TO GUIDE ── */
.howto-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r-lg); margin-bottom:var(--sp-4);
    overflow:hidden; opacity:0;
    animation:cardIn var(--t-lg) var(--ease-out) 10ms forwards;
}
.howto-summary {
    display:flex; align-items:center; gap:0.5rem;
    padding:0.8rem 1.125rem; cursor:pointer; list-style:none;
    font-size:0.79rem; font-weight:500; color:var(--text-2);
    user-select:none;
    transition:color var(--t-sm), background var(--t-sm);
}
.howto-summary::-webkit-details-marker { display:none; }
.howto-summary:hover { color:var(--text); background:var(--surface-2); }
.howto-icon { font-size:0.9rem; color:var(--accent); flex-shrink:0; }
.howto-chevron {
    margin-left:auto; font-size:1.05rem; color:var(--text-3);
    transition:transform var(--t-sm) var(--ease-out); display:inline-block;
}
details[open] .howto-chevron { transform:rotate(90deg); }
.howto-body { padding:0 1.125rem 1.125rem; border-top:1px solid var(--border); }
.howto-cols {
    display:grid; grid-template-columns:1fr 1fr;
    gap:1.25rem; margin-top:0.875rem;
}
.howto-col-title {
    font-size:0.68rem; font-weight:700; letter-spacing:0.07em;
    text-transform:uppercase; color:var(--accent); margin-bottom:0.6rem;
}
.howto-steps { padding-left:1rem; display:flex; flex-direction:column; gap:0.55rem; }
.howto-steps li { font-size:0.78rem; color:var(--text-2); line-height:1.55; }
.howto-steps li strong { color:var(--text); font-weight:600; }
.howto-note {
    margin-top:0.875rem; padding:0.65rem 0.8rem;
    background:var(--accent-bg);
    border-left:2px solid var(--accent);
    border-radius:0 var(--r-sm) var(--r-sm) 0;
    font-size:0.76rem; color:var(--text-2); line-height:1.6;
}
.howto-note strong { color:var(--text); }

/* ── TABLE ── */
table { width:100%; border-collapse:collapse; }
thead th {
    padding: 0 var(--sp-3) var(--sp-2);
    text-align: left;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
tbody td {
    padding: var(--sp-3);
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:background var(--t-xs); }
tbody tr:hover td { background:var(--surface-2); }
tbody tr.row-new { animation:rowIn var(--t-md) var(--ease-out) both; }
@keyframes rowIn {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:none; }
}
tfoot td {
    padding: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 700;
    border-top: 1px solid var(--border-2);
    color: var(--accent);
    background: var(--surface-2);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.02em;
}
.empty {
    text-align: center;
    padding: var(--sp-10) var(--sp-4);
    color: var(--text-3);
    font-size: var(--fs-sm);
}
.empty-icon { font-size: 1.5rem; display:block; margin-bottom:var(--sp-2); opacity:0.4; }
.empty-hint { display:block; font-size:0.72rem; margin-top:0.2rem; opacity:0.65; }

/* ── BADGES ── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem var(--sp-2);
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: 'JetBrains Mono', monospace;
}
.badge-low  { background:rgba(0,138,85,0.10);  color:var(--success); }
.badge-med  { background:rgba(140,87,0,0.10);   color:var(--warn); }
.badge-high { background:rgba(197,6,42,0.10);   color:var(--danger); }
[data-theme="dark"] .badge-low  { background:rgba(0,184,113,0.12); color:#00B871; }
[data-theme="dark"] .badge-med  { background:rgba(246,166,35,0.12); color:#F6A623; }
[data-theme="dark"] .badge-high { background:rgba(197,6,42,0.12); color:#FF4D6A; }

/* ── SUMMARY CARDS ── */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--sp-3);
}
.scard {
    padding: var(--sp-4) var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: default;
    transition: border-color var(--t-sm), transform var(--t-sm) var(--ease-out), box-shadow var(--t-sm);
}
.scard:hover { border-color:var(--accent); box-shadow:var(--shadow-sm); }
.scard-val {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.035em;
    line-height: 1;
    margin-bottom: var(--sp-1);
    transition: transform var(--t-sm) var(--ease-out);
}
.scard-lbl {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-2);
}

/* ── OTHER COSTS ── */
.oc-col-head,
.oc-footer-grid {
    display: grid;
    grid-template-columns: 1fr 140px 140px 36px;
    gap: var(--sp-3);
    align-items: center;
}
.oc-col-head {
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
}
.oc-row {
    display: grid;
    grid-template-columns: 1fr 140px 140px 36px;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
    transition: background var(--t-xs), padding-left var(--t-sm) var(--ease-out), padding-right var(--t-sm) var(--ease-out), border-radius var(--t-sm);
}
.oc-row.row-new { animation: rowIn var(--t-md) var(--ease-out) both; }
.oc-row:last-child { border-bottom:none; }
.oc-row:hover { background:var(--surface-2); padding-left:var(--sp-2); padding-right:var(--sp-2); border-radius:var(--r-sm); }
.oc-pct-wrap { display:flex; align-items:center; gap:var(--sp-1); }
.oc-pct-wrap input { width:64px; text-align:right; font-family:'JetBrains Mono',monospace; }
.oc-pct-wrap span { font-size:var(--fs-sm); color:var(--text-3); }
.oc-amt {
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-sm);
    color: var(--success);
    text-align: right;
}
.oc-footer-grid {
    padding-top: var(--sp-4);
    margin-top: var(--sp-2);
    border-top: 1px solid var(--border-2);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.oc-footer-label { color:var(--text-2); }
.oc-footer-pct   { color:var(--success); font-family:'JetBrains Mono',monospace; }
.oc-footer-amt   { color:var(--success); font-family:'JetBrains Mono',monospace; text-align:right; }

/* ── PROFIT SLIDER ── */
.slider-wrap { display:flex; align-items:center; gap:var(--sp-4); }
.slider-edge { font-size:var(--fs-micro); color:var(--text-3); min-width:1.75rem; }
.slider-edge:last-child { text-align:right; }
input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    border-radius: var(--r-pill);
    background: var(--border-2);
    padding: 0;
    border: none;
    box-shadow: none;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--t-xs) var(--ease-out), box-shadow var(--t-sm);
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.18);
    box-shadow: 0 0 0 5px var(--accent-bg), var(--shadow-sm);
}
input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    cursor: pointer;
}
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-bg); }
.slider-val {
    font-size: var(--fs-md);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent);
    min-width: 3.5rem;
    text-align: right;
    transition: transform var(--t-sm) var(--ease-out);
}
.profit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--text-2);
}
.profit-amount {
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--success);
}

/* ── GRAND TOTAL ── */
.grand {
    border-radius: var(--r-lg);
    padding: var(--sp-10) var(--sp-8);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    margin-top: var(--sp-2);
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .grand {
    background: linear-gradient(160deg, #0d1e2e 0%, #0A0A0F 100%);
    border-color: rgba(0,240,255,0.15);
}
.grand::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb),0.05) 50%, transparent 100%);
    background-size: 200%;
    animation: shimmer 6s ease-in-out infinite;
    pointer-events: none;
    opacity: 0;
}
[data-theme="dark"] .grand::after { opacity:1; }
@keyframes shimmer {
    0%,100% { background-position:200% center; }
    50%      { background-position:-200% center; }
}
.grand-lbl {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: var(--sp-3);
}
.grand-amount {
    font-size: var(--fs-grand);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.045em;
    color: var(--accent);
    line-height: 1;
    margin-bottom: var(--sp-4);
    transition: color var(--t-md);
    display: block;
}
.grand-breakdown {
    font-size: var(--fs-micro);
    color: var(--text-3);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
    line-height: 1.8;
}

/* ── PAGE NAV ── */
.page-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    opacity: 0;
    animation: cardIn var(--t-lg) var(--ease-out) 260ms forwards;
}
.page-nav .step-label { font-size:var(--fs-micro); color:var(--text-3); }

/* ── EXPORT FAB ── */
.pdf-fab {
    position: fixed;
    bottom: var(--sp-6);
    right: var(--sp-6);
    height: 38px;
    padding: 0 var(--sp-4);
    background: var(--text);
    color: var(--bg);
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: var(--fs-micro);
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    box-shadow: var(--shadow-md);
    z-index: 90;
    transition: transform var(--t-xs) var(--ease-out), box-shadow var(--t-sm);
}
.pdf-fab:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.pdf-fab:active { transform:scale(0.96); }
.pdf-fab:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ── TABLE WRAP (horizontal scroll for tablets) ── */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}
.table-wrap::-webkit-scrollbar { height: 4px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-pill); }

/* ── SUB NAV ── */
.sub-nav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    padding: 0 var(--pad);
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    position: sticky;
    top: 96px;
    z-index: 98;
}
.sub-nav::-webkit-scrollbar { display:none; }
.sub-tab {
    padding: 0 0.875rem;
    height: 34px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-size: 0.73rem;
    font-weight: 500;
    color: var(--text-3);
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    margin-bottom: -1px;
    transition: color var(--t-sm), border-color var(--t-sm);
}
.sub-tab.active { color:var(--text-2); border-bottom-color:var(--border-2); }
.sub-tab:hover:not(.active) { color:var(--text-2); }

/* ── TIER PILLS ── */
.tier-pills { display:flex; gap:0.5rem; flex-wrap:wrap; }
.tier-pill {
    padding: 0.45rem 1.375rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -0.01em;
    transition: all var(--t-sm) var(--ease-out);
}
.tier-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb),0.35);
}
[data-theme="dark"] .tier-pill.active { color:var(--bg); }
.tier-pill:hover:not(.active) { border-color:var(--border-2); color:var(--text); }

/* ── SERVICE LIST ── */
.svc-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background var(--t-xs);
}
.svc-row:last-child { border-bottom:none; }
.svc-row:hover { background:var(--surface-2); }
.svc-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-sm); }
.svc-check {
    width:18px; height:18px;
    border:1.5px solid var(--border-2);
    border-radius:5px;
    background: var(--surface-2);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; margin-top:2px;
    font-size:0.6rem; color:transparent;
    transition: all var(--t-sm) var(--spring);
}
.svc-row.checked .svc-check { background:var(--accent); border-color:var(--accent); color:#fff; }
[data-theme="dark"] .svc-row.checked .svc-check { color:#090909; }
.svc-name { font-size:0.855rem; line-height:1.3; }
.svc-scope { font-size:0.695rem; color:var(--text-3); margin-top:0.1rem; }
.svc-tiers { font-size:0.63rem; color:var(--text-3); margin-top:0.25rem; font-family:'JetBrains Mono',monospace; letter-spacing:-0.01em; }
.svc-tiers .t-active { color:var(--accent); font-weight:700; }
.svc-qty {
    display:flex; align-items:center; gap:0.3rem; margin-top:0.35rem;
    opacity:0; pointer-events:none; height:0; overflow:hidden;
    transition: opacity var(--t-sm);
}
.svc-row.checked .svc-qty { opacity:1; pointer-events:auto; height:auto; }
.svc-qty input { width:50px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:0.78rem; padding:0.22rem 0.3rem; }
.svc-qty label { font-size:0.68rem; color:var(--text-3); text-transform:none; letter-spacing:0; margin:0; }
.svc-price {
    font-family:'JetBrains Mono',monospace;
    font-size:0.8rem; font-weight:600;
    color:var(--text-3); text-align:right;
    white-space:nowrap; min-width:72px; margin-top:2px;
    transition: color var(--t-sm);
}
.svc-row.checked .svc-price { color:var(--accent); }

/* ── RETAINER CARDS ── */
.retainer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:0.75rem; }
.retainer-card {
    padding: 1rem 1.125rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    background: var(--surface-2);
    transition: all var(--t-sm) var(--ease-out);
}
.retainer-card:hover { border-color:var(--border-2); background:var(--surface); }
.retainer-card.active { border-color:var(--accent); background:var(--accent-bg); }
.ret-name { font-size:0.78rem; font-weight:700; margin-bottom:0.2rem; }
.ret-price { font-family:'JetBrains Mono',monospace; font-size:1.05rem; font-weight:700; color:var(--accent); margin-bottom:0.2rem; }
.ret-includes { font-size:0.69rem; color:var(--text-3); line-height:1.45; }
.ret-months-wrap {
    display:flex; align-items:center; gap:0.4rem; margin-top:0.625rem;
    opacity:0; pointer-events:none; height:0; overflow:hidden;
    transition: opacity var(--t-sm);
}
.retainer-card.active .ret-months-wrap { opacity:1; pointer-events:auto; height:auto; }
.ret-months-wrap input { width:50px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:0.78rem; padding:0.22rem 0.3rem; }
.ret-months-wrap label { font-size:0.68rem; color:var(--text-3); text-transform:none; letter-spacing:0; margin:0; }

/* ── PACKAGES ── */
.pkg-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.25rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background var(--t-xs);
}
.pkg-row:last-child { border-bottom:none; }
.pkg-row:hover { background:var(--surface-2); }
.pkg-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-sm); }
.pkg-row.active { background:var(--accent-bg); }
.pkg-check {
    width:18px; height:18px;
    border:1.5px solid var(--border-2);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:0.6rem; color:transparent;
    transition: all var(--t-sm) var(--spring);
}
.pkg-row.active .pkg-check { background:var(--accent); border-color:var(--accent); color:#fff; }
[data-theme="dark"] .pkg-row.active .pkg-check { color:#090909; }
.pkg-name { font-size:0.845rem; font-weight:600; }
.pkg-includes { font-size:0.695rem; color:var(--text-3); margin-top:0.1rem; }
.pkg-price { font-family:'JetBrains Mono',monospace; font-size:0.8rem; font-weight:600; color:var(--text-3); white-space:nowrap; text-align:right; transition:color var(--t-sm); }
.pkg-row.active .pkg-price { color:var(--accent); }

/* ── RISK DISPLAY ── */
.risk-row { display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; }
.risk-badge {
    text-align:center; padding:0.5rem 1rem;
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md);
}
.risk-mult-val { font-family:'JetBrains Mono',monospace; font-size:1.625rem; font-weight:700; color:var(--accent); line-height:1; }
.risk-mult-lbl { font-size:0.6rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--text-3); margin-top:0.2rem; }

/* ── SUMMARY ── */
.sum-section-lbl { font-size:0.63rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--text-3); padding:0.5rem 0 0.2rem; margin-top:0.25rem; }
.sum-line { display:flex; justify-content:space-between; align-items:baseline; padding:0.45rem 0; border-bottom:1px solid var(--border); font-size:0.845rem; gap:1rem; }
.sum-line:last-child { border-bottom:none; }
.sum-lbl { color:var(--text-2); flex:1; }
.sum-val { font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--text); white-space:nowrap; }
.sum-risk {
    display:flex; justify-content:space-between; padding:0.4rem 0.625rem;
    background:rgba(246,166,35,0.07); border:1px solid rgba(246,166,35,0.18);
    border-radius:var(--r-sm); font-size:0.775rem; margin:0.375rem 0;
}
.sum-risk-val { font-family:'JetBrains Mono',monospace; color:var(--warn); font-weight:700; }
.sum-empty { font-size:0.8rem; color:var(--text-3); padding:1.5rem 0; text-align:center; }

/* ── EFFORT ESTIMATION LAYOUT ── */
.effort-page { max-width: none !important; padding: 0 !important; }

/* Full-width header row: title on left, action buttons on right */
.effort-header {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--sp-6) var(--pad) var(--sp-4);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-5);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
}
.effort-header > .page-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    flex: 1 1 260px;
}
.effort-header-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex-shrink: 0;
    min-width: 220px;
    justify-content: flex-start;
    padding-top: var(--sp-1);
}

/* Two-column grid: sticky form panel | scrollable content */
.effort-layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: var(--sp-5);
    align-items: start;
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--sp-5) var(--pad) var(--sp-6);
}

.effort-aside {
    position: sticky;
    top: 136px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.effort-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.effort-aside > .card,
.effort-aside > .info-bar,
.effort-main  > .card,
.effort-main  > .grand { margin-bottom: 0; margin-top: 0; }

/* How-to guide and customer banner — match layout horizontal bounds */
.effort-page > .howto-card,
.effort-page > .customer-banner {
    max-width: 1600px;
    width: calc(100% - 2 * var(--pad));
    margin-left: auto;
    margin-right: auto;
}

.effort-page-nav {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--sp-5) var(--pad) var(--sp-8);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    animation: cardIn var(--t-lg) var(--ease-out) 300ms forwards;
}
.effort-page-nav .step-label { font-size: var(--fs-micro); color: var(--text-3); }

/* ── CUSTOMER BANNER ── */
.customer-banner {
    max-width: 1600px;
    margin: 0 auto var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    opacity: 0;
    animation: cardIn var(--t-lg) var(--ease-out) 10ms forwards;
}
.cb-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
    font-size: var(--fs-sm);
}
.cb-project { font-weight: 600; color: var(--text); }
.cb-sep     { color: var(--text-3); }
.cb-client  { color: var(--accent); font-weight: 500; }
.cb-meta    { color: var(--text-2); }

/* ── RATE INPUT GROUP ── */
.rate-group { display: flex; align-items: stretch; }
.rate-group input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.rate-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--sp-3);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    font-size: var(--fs-sm);
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-2);
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color var(--t-sm);
}
.field:focus-within .rate-prefix { border-color: var(--accent); }

/* ── INLINE CELL EDITING ── */
.cell-input {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-sm);
    padding: 3px 6px;
    width: 100%;
    min-width: 0;
    transition: border-color var(--t-xs), background var(--t-xs), box-shadow var(--t-xs);
    -moz-appearance: textfield;
}
.cell-input::-webkit-outer-spin-button,
.cell-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cell-input:hover  { border-color: var(--border-2); }
.cell-input:focus  { border-color: var(--accent); background: var(--surface-2); box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent); outline: none; }
.cell-text { font-family: inherit; }
.cell-num  { font-family: 'JetBrains Mono', monospace; text-align: right; width: 100%; min-width: 0; }

/* Complexity inline select */
.cx-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--t-xs), background var(--t-xs);
}
.cx-select:hover  { border-color: var(--border-2); }
.cx-select:focus  { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent); }
.cx-select[data-cx="1"]   { background: rgba(0,184,113,0.12);  color: var(--success,#00B871); }
.cx-select[data-cx="1.5"] { background: rgba(246,166,35,0.12); color: var(--warn,#F6A623);   }
.cx-select[data-cx="2"]   { background: rgba(197,6,42,0.12);   color: var(--danger,#C5062A); }

/* Resource table rate cell with currency prefix */
.cell-rate-wrap {
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    overflow: hidden;
    transition: border-color var(--t-xs);
}
.cell-rate-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent); }
.cell-rate-wrap:focus-within .cell-input { border-color: transparent; box-shadow: none; background: transparent; }
.cell-rate-sym {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-3);
    padding: 3px 4px 3px 6px;
    flex-shrink: 0;
    user-select: none;
}
.cell-rate-wrap .cell-input { border: none; border-radius: 0; padding-left: 2px; }
.cell-rate-wrap .cell-input:hover  { border-color: transparent; background: transparent; }
.cell-rate-wrap .cell-input:focus  { background: transparent; box-shadow: none; }

/* Other costs — name & amount inputs */
.oc-name-input { width: 100%; }
.oc-amt-wrap { display: flex; align-items: center; }
.oc-amt-sym  { padding: 3px 2px 3px 0; font-size: 0.72rem; }
.oc-amt-input { width: 80px; text-align: right; font-family: 'JetBrains Mono', monospace; }

/* Grand total override */
.grand-total-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
}
.grand-edit-btn {
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    color: var(--text-3);
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-xs), color var(--t-xs), border-color var(--t-xs);
    flex-shrink: 0;
    align-self: center;
    margin-bottom: var(--sp-4);
}
.grand-edit-btn:hover      { background: var(--surface-3); color: var(--text); border-color: var(--accent); }
.grand-edit-btn.grand-edit-active { background: rgba(var(--accent-rgb),0.12); color: var(--accent); border-color: var(--accent); }
.grand-override-wrap {
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}
.grand-override-label { font-size: var(--fs-micro); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.grand-override-input {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--accent);
    background: var(--surface-2);
    border: 1.5px solid var(--accent);
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
    text-align: right;
    width: 160px;
    -moz-appearance: textfield;
    transition: box-shadow var(--t-xs);
}
.grand-override-input:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); }
.grand-override-input::-webkit-outer-spin-button,
.grand-override-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.grand-override-clear {
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    color: var(--text-3);
    font-size: var(--fs-micro);
    font-family: inherit;
    cursor: pointer;
    padding: var(--sp-1) var(--sp-2);
    transition: background var(--t-xs), color var(--t-xs), border-color var(--t-xs);
}
.grand-override-clear:hover { background: rgba(197,6,42,0.10); color: var(--danger); border-color: var(--danger); }

/* ── PRINT ── */
@media print {
    .pdf-fab,.theme-btn,.tabs-nav,.sub-nav,.step-progress,.page-nav,.btn-del,.btn-edit,
    .header-right,#toast-root,.rc-reset,.tier-pills,.svc-tiers,.no-print,.howto-card,
    .grand-edit-btn,.grand-override-wrap { display:none!important; }
    .page { padding:1rem!important; max-width:100%!important; }
    .grand,.card { -webkit-print-color-adjust:exact; print-color-adjust:exact; opacity:1!important; animation:none!important; }
    .page-header { border-bottom:1px solid #ccc; }
    .info-bar { border-left:2px solid #0A98D9; }
    .table-wrap { overflow:visible; }
    table { min-width:0!important; }
    .customer-banner { opacity:1!important; animation:none!important; margin: 0 0 0.75rem; }
    .cell-input,.cx-select { border-color: transparent!important; box-shadow: none!important; background: transparent!important; padding: 0!important; }
    .cell-rate-wrap { border-color: transparent!important; box-shadow: none!important; }
    .grand-total-wrap { justify-content: center; }
    .grand-override-input { border-color: transparent!important; background: transparent!important; box-shadow: none!important; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE SYSTEM
   480  — phone portrait
   640  — phone landscape / small tablet
   768  — tablet portrait
   1024 — tablet landscape / small laptop
   1440 — desktop
   ══════════════════════════════════════════════════════ */

/* Desktop — wider content well */
@media (min-width: 1440px) {
    :root { --max-w: 960px; }
}

/* Tablet landscape (≤1200px) — shrink aside */
@media (max-width: 1200px) {
    :root { --pad: var(--sp-6); }
    .effort-layout { grid-template-columns: 360px 1fr; }
    .effort-header-actions { min-width: 180px; }
}

/* Tablet (≤1024px) — shrink further */
@media (max-width: 1024px) {
    .effort-layout { grid-template-columns: 320px 1fr; }
}

/* Effort layout: collapse to single column (≤900px) */
@media (max-width: 900px) {
    .effort-layout {
        grid-template-columns: 1fr;
        padding: var(--sp-5) var(--pad);
        gap: var(--sp-4);
    }
    .effort-aside { position: static; top: auto; }
    .effort-header {
        flex-direction: column;
        gap: var(--sp-3);
        padding-bottom: var(--sp-3);
    }
    .effort-header-actions {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: auto;
    }
    .effort-header-actions > * { flex: 1 1 160px; }
    .effort-page-nav { padding: var(--sp-4) var(--pad) var(--sp-6); }
}

/* Tablet portrait (≤768px) — scrollable tables */
@media (max-width: 768px) {
    :root { --pad: var(--sp-5); }
    .table-wrap { margin: 0 calc(-1 * var(--sp-6)); padding: 0 var(--sp-6); }
    table { min-width: 520px; }
    .grand-amount { font-size: 2.5rem; }
    .grand { padding: var(--sp-8) var(--sp-6); }
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
    .howto-cols { grid-template-columns: 1fr; gap: 0.875rem; }
}

/* Phone landscape + small tablet (≤640px) */
@media (max-width: 640px) {
    :root { --pad: var(--sp-4); }
    .brand-tool, .brand-divider { display: none; }
    .page-header h2 { font-size: 1.5rem; }
    .page-header { margin-bottom: var(--sp-6); }
    .oc-col-head, .oc-row, .oc-footer-grid { grid-template-columns: 1fr 110px 90px 32px; }
    .table-wrap { margin: 0 calc(-1 * var(--sp-5)); padding: 0 var(--sp-5); }
    .grand-amount { font-size: 2.25rem; }
    .page-nav { flex-wrap: wrap; gap: var(--sp-3); }
    .page-nav .btn { min-width: 130px; }
    /* AI Rate Card */
    .risk-row { grid-template-columns: 1fr; }
    .risk-badge { display:flex; align-items:center; gap:0.75rem; justify-content:center; padding:0.5rem 0.75rem; }
    .retainer-grid { grid-template-columns: 1fr; }
    .svc-price { min-width: 58px; font-size: 0.74rem; }
    /* Sub-nav too heavy on mobile — let it scroll with content */
    .sub-nav { position: relative; top: auto; }
    .step-progress { top: 96px; }
    /* Effort layout mobile */
    .effort-layout { padding: var(--sp-4) var(--pad); gap: var(--sp-3); }
    .effort-header { padding: var(--sp-4) var(--pad) var(--sp-3); }
    .effort-page-nav { padding: var(--sp-3) var(--pad) var(--sp-5); flex-wrap: wrap; gap: var(--sp-3); }
}

/* Phone portrait (≤480px) — card-style tables */
@media (max-width: 480px) {
    :root { --pad: var(--sp-4); --fs-grand: 2rem; }

    /* Remove table-wrap bleed — cards handle spacing */
    .table-wrap { margin: 0; padding: 0; overflow: visible; }
    table { min-width: 0 !important; }

    /* Tables → stacked row-cards */
    table, thead, tbody, th, tr { display: block; }
    thead tr { position: absolute; left: -9999px; top: -9999px; visibility: hidden; }
    tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--sp-2) var(--sp-3);
        border: none;
        border-bottom: 1px solid var(--border);
        font-size: var(--fs-sm);
        gap: var(--sp-3);
        min-height: 36px;
    }
    tbody td::before {
        content: attr(data-label);
        font-size: var(--fs-micro);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-3);
        flex-shrink: 0;
        white-space: nowrap;
    }
    tbody td[data-label=""] { justify-content: flex-end; padding: var(--sp-1) var(--sp-3); min-height: 0; }
    tbody td[data-label=""]::before { display: none; }
    tbody td:last-child { border-bottom: none; }
    tbody tr {
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        margin-bottom: var(--sp-3);
        background: var(--surface);
        overflow: hidden;
    }
    tbody tr:hover td { background: transparent; }

    /* tfoot as flex summary bar */
    tfoot { display: block; margin-top: var(--sp-2); }
    tfoot tr {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        border-top: 2px solid var(--border-2);
        padding: var(--sp-3) var(--sp-2);
        background: var(--surface-2);
        border-radius: var(--r-md);
    }
    tfoot td { display: block; border: none; padding: 0; background: transparent; }
    tfoot td:first-child { flex: 1; }
    tfoot td:last-child { display: none; }

    /* Empty state */
    .empty { display: block; }

    /* OC rows → 2×2 grid */
    .oc-col-head { display: none; }
    .oc-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: var(--sp-1) var(--sp-3);
        padding: var(--sp-3) 0;
    }
    .oc-name-input { grid-column: 1; grid-row: 1; }
    .oc-pct-wrap   { grid-column: 1; grid-row: 2; }
    .oc-amt-wrap   { grid-column: 2; grid-row: 1 / 3; align-self: center; }
    .oc-row > .btn-del { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; }
    .oc-footer-grid { grid-template-columns: 1fr auto auto; }
    .oc-footer-grid > :last-child { display: none; }

    /* Grand total */
    .grand { padding: var(--sp-6) var(--sp-4); }
    .grand-breakdown { font-size: 0.625rem; letter-spacing: 0; line-height: 2.2; }

    /* Page nav — vertical stack */
    .page-nav { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .page-nav .btn { justify-content: center; }
    .page-nav > span { text-align: center; }
    /* Effort page nav — vertical stack */
    .effort-page-nav { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .effort-page-nav .btn { justify-content: center; }
    .effort-page-nav .step-label { text-align: center; }

    /* Typography */
    .page-header h2 { font-size: 1.375rem; }
    .page-header { margin-bottom: var(--sp-6); }
    .scard-val { font-size: 1.375rem; }
    .info-bar { line-height: 1.9; }

    /* FAB — smaller & repositioned */
    .pdf-fab { bottom: var(--sp-4); right: var(--sp-4); height: 34px; font-size: 0.6875rem; }
}

/* Tiny phones (≤360px) — tighten form grid */
@media (max-width: 360px) {
    :root { --pad: var(--sp-3); }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .currency-wrap > label { display: none; }
    .brand-mark { font-size: var(--fs-sm); }
}

/* Landscape phones (height ≤ 500px) — shrink sticky chrome */
@media (max-height: 500px) and (orientation: landscape) {
    .header { height: 44px; }
    .tabs-nav { top: 44px; height: 36px; }
    .tab-btn { height: 36px; font-size: var(--fs-micro); }
    .step-progress { top: 80px; }
    .page-header h2 { font-size: 1.375rem; }
    .page-header { margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); }
    .card { padding: var(--sp-4) var(--sp-5); }
    .grand { padding: var(--sp-6) var(--sp-5); }
    .form-grid { gap: var(--sp-3); }
    /* Effort: landscape phones always single-column with no sticky aside */
    .effort-layout { grid-template-columns: 1fr; padding: var(--sp-3) var(--pad); gap: var(--sp-3); }
    .effort-header { padding: var(--sp-3) var(--pad); }
    .effort-aside { position: static; top: auto; }
    .effort-page-nav { padding: var(--sp-3) var(--pad) var(--sp-4); }
}

/* ── AUTO-SUGGEST BUTTON ── */
/* ── Import from AI Rate Card button ── */
.btn-import-ai {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.10) 0%, rgba(var(--accent-rgb),0.05) 100%);
    border: 1.5px solid rgba(var(--accent-rgb), 0.35);
    border-radius: var(--r-md);
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: -0.01em;
    transition: background var(--t-sm), border-color var(--t-sm), transform var(--t-xs) var(--spring), box-shadow var(--t-sm);
}
.btn-import-ai:hover { background: rgba(var(--accent-rgb),0.15); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.btn-import-ai:active { transform: scale(0.98); }
.import-ai-icon { font-size: 0.95rem; line-height: 1; }

/* ── Collapsible Customer Details ── */
.cd-details { padding: var(--sp-6); }
.cd-details > summary { list-style: none; }
.cd-details > summary::-webkit-details-marker { display: none; }
.cd-summary {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    padding: 0;
    user-select: none;
}
.cd-summary:hover .howto-chevron { color: var(--accent); }
.cd-preview {
    font-size: 0.72rem;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.cd-form-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}
.cd-form-grid .field-wide { grid-column: span 2; }

.btn-std-template {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: rgba(0,184,113,0.07);
    border: 1.5px solid rgba(0,184,113,0.3);
    border-radius: var(--r-md);
    color: var(--success);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: -0.01em;
    transition: background var(--t-sm), border-color var(--t-sm), transform var(--t-xs) var(--spring);
}
.btn-std-template:hover { background: rgba(0,184,113,0.13); border-color: var(--success); }
.btn-std-template:active { transform: scale(0.98); }

/* ── Import preview table ── */
.import-section-title {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 0.75rem 0 0.5rem;
}
.import-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.import-table th {
    text-align: left;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 0 0.5rem 0.4rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.import-table td {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    vertical-align: middle;
}
.import-table tr:last-child td { border-bottom: none; }
.import-mono { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; white-space: nowrap; }
.import-cost { color: var(--accent); font-weight: 600; }

.btn-auto-suggest {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.6rem 1rem;
    background: var(--accent-bg);
    border: 1.5px dashed rgba(var(--accent-rgb), 0.4);
    border-radius: var(--r-md);
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: -0.01em;
    transition: background var(--t-sm), border-color var(--t-sm), transform var(--t-xs) var(--spring);
}
.btn-auto-suggest:hover  { background: rgba(var(--accent-rgb),0.13); border-color: var(--accent); }
.btn-auto-suggest:active { transform: scale(0.98); }
.bas-icon { font-size: 0.9rem; line-height: 1; }

.empty-suggest-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-weight: 600;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.empty-suggest-btn:hover { opacity: 0.75; }

/* ── SUGGEST MODAL ── */
.sug-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
    opacity: 0;
    transition: opacity var(--t-sm) var(--ease-out);
}
.sug-overlay-in { opacity: 1; }

.sug-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 780px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(10px) scale(0.98);
    transition: transform var(--t-md) var(--spring);
}
.sug-overlay-in .sug-modal { transform: none; }

.sug-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.sug-modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}
.sug-modal-sub {
    font-size: var(--fs-micro);
    color: var(--text-3);
    margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
}
.sug-close {
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background var(--t-xs), color var(--t-xs);
}
.sug-close:hover { background: rgba(197,6,42,0.1); color: var(--danger); border-color: var(--danger); }

/* Allocation bar */
.sug-alloc-bar {
    padding: var(--sp-3) var(--sp-6);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.sug-alloc-lbl {
    font-size: var(--fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
}
.sug-alloc-track {
    flex: 1;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    overflow: hidden;
    display: flex;
    gap: 1px;
}
.sug-alloc-seg {
    height: 100%;
    border-radius: 0;
    transition: width var(--t-md) var(--ease-out);
    min-width: 2px;
}
.sug-alloc-seg:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.sug-alloc-seg:last-child  { border-radius: 0 var(--r-pill) var(--r-pill) 0; }

/* Column header */
.sug-col-head {
    display: grid;
    grid-template-columns: 28px 1fr 70px 80px 60px 80px 60px;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-6);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* Suggestion rows */
.sug-modal-body {
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}
.sug-row {
    display: grid;
    grid-template-columns: 28px 1fr 70px 80px 60px 80px 60px;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3) var(--sp-6);
    border-bottom: 1px solid var(--border);
    transition: background var(--t-xs);
}
.sug-row:last-child { border-bottom: none; }
.sug-row:hover { background: var(--surface-2); }

.sug-check-wrap {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.sug-check {
    width: 15px; height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.sug-dot {
    display: none; /* shown via alloc bar; keep for future legend */
}

.sug-role-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sug-role-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.sug-role-tasks { font-size: 0.6rem; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }

.sug-hrs-cell { display: flex; flex-direction: column; gap: 1px; }
.sug-hrs-val  { font-size: var(--fs-sm); font-weight: 600; font-family: 'JetBrains Mono', monospace; color: var(--accent); }
.sug-hrs-pct  { font-size: 0.6rem; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }

.sug-input {
    width: 100%;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-sm);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    text-align: right;
    transition: border-color var(--t-sm), box-shadow var(--t-sm);
    -webkit-appearance: none; appearance: none;
}
.sug-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); background: var(--surface); }
/* dim unchecked rows */
.sug-row:has(.sug-check:not(:checked)) .sug-role-name,
.sug-row:has(.sug-check:not(:checked)) .sug-hrs-val,
.sug-row:has(.sug-check:not(:checked)) .sug-input { opacity: 0.35; }

/* Footer */
.sug-modal-foot {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    background: var(--surface-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.sug-foot-note {
    font-size: var(--fs-micro);
    font-family: 'JetBrains Mono', monospace;
    color: var(--success);
    font-weight: 600;
}
.sug-foot-actions { display: flex; gap: var(--sp-3); margin-left: auto; }

/* Responsive */
@media (max-width: 640px) {
    .sug-overlay { padding: 0; align-items: flex-end; }
    .sug-modal { max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; max-width: 100%; }
    .sug-col-head { display: none; }
    .sug-row {
        grid-template-columns: 28px 1fr 1fr;
        grid-template-rows: auto auto;
        gap: var(--sp-2);
        padding: var(--sp-4) var(--sp-5);
    }
    .sug-check-wrap { grid-row: 1 / 3; align-self: center; }
    .sug-role-cell  { grid-column: 2; grid-row: 1; }
    .sug-hrs-cell   { grid-column: 3; grid-row: 1; align-items: flex-end; }
    .sug-input      { grid-row: 2; padding: 0.35rem 0.5rem; }
    .sug-input:nth-child(4) { grid-column: 2; }
    .sug-input:nth-child(5) { grid-column: 3; }
    .sug-input:nth-child(6) { grid-column: 2; }
    .sug-input:nth-child(7) { grid-column: 3; }
    .sug-modal-head { padding: var(--sp-4) var(--sp-5); }
    .sug-alloc-bar  { padding: var(--sp-3) var(--sp-5); }
    .sug-modal-foot { padding: var(--sp-4) var(--sp-5); }
}

/* iOS safe areas — notch, Dynamic Island, home indicator */
@supports (padding: env(safe-area-inset-bottom)) {
    .pdf-fab {
        bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
        right:  calc(var(--sp-4) + env(safe-area-inset-right));
    }
    .effort-page-nav,
    .page-nav {
        padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
    }
    .header {
        padding-left:  max(var(--pad), env(safe-area-inset-left));
        padding-right: max(var(--pad), env(safe-area-inset-right));
    }
    .tabs-nav,
    .sub-nav {
        padding-left:  max(var(--pad), env(safe-area-inset-left));
        padding-right: max(var(--pad), env(safe-area-inset-right));
    }
}

/* ── AI RATE CARD v2 ── */

/* ── Layout ── */
.rc2-page-outer { background: var(--bg); }

.rc2-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--sp-6);
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--sp-8) var(--pad);
    align-items: start;
}

.rc2-sidebar {
    position: sticky;
    top: 102px; /* 54px header + 48px tabs-nav */
}

.rc2-configurator {
    min-width: 0;
}

/* ── Page Header ── */
.rc2-page-header {
    margin-bottom: var(--sp-8);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--border);
}
.rc2-page-title {
    font-size: var(--fs-title);
    font-weight: 300;
    letter-spacing: -0.045em;
    color: var(--text);
    line-height: 1.15;
}
.rc2-page-sub {
    font-size: var(--fs-sm);
    color: var(--text-2);
    margin-top: var(--sp-1);
    line-height: 1.5;
}

/* ── Section ── */
.rc2-section {
    margin-bottom: var(--sp-8);
    opacity: 0;
    animation: cardIn var(--t-lg) var(--ease-out) forwards;
}
.rc2-section:nth-child(1) { animation-delay: 30ms; }
.rc2-section:nth-child(2) { animation-delay: 80ms; }
.rc2-section:nth-child(3) { animation-delay: 130ms; }
.rc2-section:nth-child(4) { animation-delay: 180ms; }
.rc2-section:nth-child(5) { animation-delay: 230ms; }

.rc2-step-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
.rc2-step-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: var(--fs-micro);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0;
}
.rc2-step-title {
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.3;
}
.rc2-step-sub {
    font-size: var(--fs-micro);
    color: var(--text-3);
    margin-top: 1px;
}
.rc2-selection-count {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--accent);
    color: #fff;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-left: auto;
    flex-shrink: 0;
}
[data-theme="dark"] .rc2-selection-count { color: var(--bg); }

/* ── Tier Cards ── */
.rc2-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}
.rc2-tier-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    cursor: pointer;
    transition:
        border-color var(--t-sm) var(--ease-out),
        box-shadow var(--t-sm) var(--ease-out),
        transform var(--t-sm) var(--ease-out),
        background var(--t-sm);
    text-align: center;
}
.rc2-tier-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.rc2-tier-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.rc2-tier-active {
    border-color: var(--accent) !important;
    background: var(--accent-bg) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14), var(--shadow-sm) !important;
}
.rc2-tier-mult {
    font-size: 2.75rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: var(--sp-2);
    transition: transform var(--t-sm) var(--ease-out), color var(--t-sm);
}
.rc2-tier-active .rc2-tier-mult { transform: scale(1.1); }
[data-theme="dark"] .rc2-tier-active {
    background: linear-gradient(160deg, rgba(var(--accent-rgb),0.14) 0%, rgba(var(--accent-rgb),0.04) 100%) !important;
}
.rc2-tier-name {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-1);
}
.rc2-tier-scope {
    font-size: var(--fs-micro);
    color: var(--text-3);
    margin-bottom: var(--sp-3);
    line-height: 1.4;
}
.rc2-tier-retainer {
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--text-2);
    padding: 2px var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: inline-block;
}
.rc2-tier-active .rc2-tier-retainer {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.2);
    color: var(--accent);
}

/* ── Risk Spectrum ── */
.rc2-risk-spectrum {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.rc2-risk-chip {
    flex: 1;
    min-width: 0;
    padding: var(--sp-3) var(--sp-2);
    border-radius: var(--r-md);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-align: center;
    background: var(--surface);
    border-color: var(--border);
    transition:
        border-color var(--t-sm) var(--ease-out),
        box-shadow var(--t-sm) var(--ease-out),
        transform var(--t-sm) var(--ease-out),
        background var(--t-sm);
}
.rc2-risk-chip:hover {
    border-color: var(--rchip-color, var(--accent));
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.rc2-risk-chip:focus-visible {
    outline: 2px solid var(--rchip-color, var(--accent));
    outline-offset: 2px;
}
.rc2-risk-active {
    border-color: var(--rchip-color) !important;
    background: color-mix(in srgb, var(--rchip-color) 10%, var(--surface)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rchip-color) 20%, transparent), var(--shadow-xs) !important;
    transform: translateY(-2px) !important;
}
.rc2-risk-chip-mult {
    font-size: var(--fs-md);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--rchip-color, var(--text));
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.03em;
}
.rc2-risk-chip-label {
    font-size: var(--fs-micro);
    font-weight: 500;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rc2-risk-active .rc2-risk-chip-label { color: var(--text-2); }

/* ── Risk Gradient Track ── */
.rc2-risk-track {
    height: 3px;
    background: linear-gradient(to right, #00B871, #78C95A, #F6A623, #E8890A, #E05030, #C5062A);
    border-radius: var(--r-pill);
    margin: 6px var(--sp-1) 0;
    opacity: 0.55;
}

/* ── Risk Info Bar ── */
.rc2-risk-info {
    margin-top: var(--sp-2);
}
.rc2-risk-info-inner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--rinfo-color, var(--accent));
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: var(--fs-sm);
    animation: fadeSlideIn var(--t-md) var(--ease-out);
}
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.rc2-risk-info-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rc2-risk-info-name { font-weight: 600; color: var(--text); }
.rc2-risk-info-sep  { color: var(--text-3); margin: 0 4px; }
.rc2-risk-info-desc { color: var(--text-2); }
.rc2-risk-info-badge {
    margin-left: auto;
    flex-shrink: 0;
    padding: 2px var(--sp-3);
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ── Service List ── */
.rc2-service-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
}
.rc2-svc-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition:
        background var(--t-xs) var(--ease-out),
        border-color var(--t-xs);
    position: relative;
}
.rc2-svc-row:last-child { border-bottom: none; }
.rc2-svc-row:hover { background: var(--surface-2); }
.rc2-svc-row:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent);
    border-radius: 0;
    z-index: 1;
}
.rc2-svc-checked {
    background: var(--accent-bg) !important;
}
.rc2-svc-checked:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important; }

.rc2-svc-check { flex-shrink: 0; }
.rc2-check-box {
    width: 18px;
    height: 18px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border-2);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        border-color var(--t-xs) var(--ease-out),
        background var(--t-xs) var(--ease-out),
        transform var(--t-xs) var(--spring);
    color: #fff;
}
[data-theme="dark"] .rc2-check-box { color: var(--bg); }
.rc2-check-box-on {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.08);
}

.rc2-svc-info { flex: 1; min-width: 0; }
.rc2-svc-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rc2-svc-desc {
    font-size: var(--fs-micro);
    color: var(--text-3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rc2-svc-formula {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: var(--accent);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
    opacity: 1;
    transition: opacity var(--t-sm);
}
.rc2-svc-formula-dim {
    color: var(--text-3);
    opacity: 0.7;
}

/* Qty controls */
.rc2-svc-qty {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.rc2-qty-label {
    font-size: var(--fs-micro);
    color: var(--text-3);
    white-space: nowrap;
}
.rc2-qty-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 2px 4px;
}
.rc2-qty-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: background var(--t-xs), color var(--t-xs);
    flex-shrink: 0;
}
.rc2-qty-btn:hover { background: var(--accent-bg); color: var(--accent); }
.rc2-qty-input {
    width: 36px;
    text-align: center;
    font-size: var(--fs-micro);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    padding: 2px 4px;
    border: none;
    background: none;
    color: var(--text);
}
.rc2-qty-input:focus { outline: none; color: var(--accent); }

.rc2-svc-price {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-3);
    min-width: 70px;
    text-align: right;
    letter-spacing: -0.02em;
    transition: color var(--t-sm), transform var(--t-sm) var(--ease-out);
}
.rc2-svc-price-active {
    color: var(--accent) !important;
}

/* ── Package List ── */
.rc2-pkg-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
}
.rc2-pkg-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background var(--t-xs) var(--ease-out);
}
.rc2-pkg-row:last-child { border-bottom: none; }
.rc2-pkg-row:hover { background: var(--surface-2); }
.rc2-pkg-row:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent);
}
.rc2-pkg-checked { background: var(--accent-bg) !important; }

.rc2-pkg-top {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.rc2-pkg-cat {
    font-size: var(--fs-micro);
    font-weight: 600;
    padding: 1px var(--sp-2);
    border-radius: var(--r-pill);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.rc2-pkg-cat-ai  { background: rgba(10,152,217,0.1);  color: var(--accent); }
.rc2-pkg-cat-it  { background: rgba(0,138,85,0.1);    color: var(--success); }
[data-theme="dark"] .rc2-pkg-cat-it { background: rgba(0,184,113,0.12); color: #00B871; }

.rc2-pkg-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.rc2-pkg-type-badge {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px var(--sp-2);
    border-radius: var(--r-pill);
}
.rc2-pkg-fixed  { background: rgba(0,138,85,0.1);  color: var(--success); }
.rc2-pkg-annual { background: rgba(140,87,0,0.10);  color: var(--warn); }
[data-theme="dark"] .rc2-pkg-fixed  { background: rgba(0,184,113,0.12); color: #00B871; }
[data-theme="dark"] .rc2-pkg-annual { background: rgba(246,166,35,0.12); color: #F6A623; }

/* ══════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════ */
.rc2-sidebar-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
}

.rc2-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
}
.rc2-sidebar-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}
.rc2-reset-btn {
    height: 28px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-micro);
    gap: 5px;
}

.rc2-config-pills {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.rc2-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--sp-2);
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.rc2-pill-tier {
    background: var(--accent-bg);
    color: var(--accent);
}
.rc2-pill-risk {
    background: color-mix(in srgb, var(--rpill-color, var(--accent)) 12%, transparent);
    color: var(--rpill-color, var(--accent));
}

.rc2-line-items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-5);
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}
.rc2-line-items::-webkit-scrollbar { width: 3px; }
.rc2-line-items::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

/* Empty state */
.rc2-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) var(--sp-4);
    gap: var(--sp-3);
    color: var(--text-3);
}
.rc2-empty-icon {
    opacity: 0.3;
}
.rc2-empty-text {
    font-size: var(--fs-sm);
    text-align: center;
    line-height: 1.5;
}

/* Line item groups */
.rc2-line-group {
    margin-bottom: var(--sp-4);
}
.rc2-line-group-label {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: var(--sp-2);
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid var(--border);
}
.rc2-line-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
}
.rc2-line-left { flex: 1; min-width: 0; }
.rc2-line-name {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}
.rc2-line-formula {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: var(--text-3);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}
.rc2-line-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    flex-shrink: 0;
    letter-spacing: -0.02em;
}

/* Risk notice */
.rc2-risk-notice {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: rgba(246,166,35,0.08);
    border: 1px solid rgba(246,166,35,0.2);
    border-radius: var(--r-sm);
    font-size: var(--fs-micro);
    color: var(--warn);
    margin-top: -var(--sp-2);
    margin-bottom: var(--sp-3);
}
[data-theme="dark"] .rc2-risk-notice { color: #F6A623; background: rgba(246,166,35,0.1); border-color: rgba(246,166,35,0.25); }

/* Divider */
.rc2-sidebar-divider {
    height: 1px;
    background: var(--border);
    flex-shrink: 0;
}

/* Total block */
.rc2-total-block {
    padding: var(--sp-4) var(--sp-5);
    flex-shrink: 0;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}
[data-theme="dark"] .rc2-total-block {
    background: linear-gradient(160deg, rgba(var(--accent-rgb),0.06) 0%, var(--surface-2) 100%);
}
.rc2-total-label {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: var(--sp-1);
}
.rc2-total-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(1.75rem, 2.5vw, var(--fs-grand));
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--accent);
    line-height: 1;
    margin-bottom: var(--sp-1);
}
.rc2-total-breakdown {
    font-size: 0.625rem;
    color: var(--text-3);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.01em;
    min-height: 12px;
    line-height: 1.6;
}

/* Retainer */
.rc2-retainer-block {
    padding: var(--sp-3) var(--sp-5);
    flex-shrink: 0;
}
.rc2-retainer-title {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: var(--sp-2);
}
.rc2-retainer-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* Pill-style retainer selector — replaces broken radio-label rows */
.rc2-ret-pill {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition:
        border-color var(--t-xs) var(--ease-out),
        background var(--t-xs) var(--ease-out),
        transform var(--t-xs) var(--ease-out);
}
.rc2-ret-pill:hover { border-color: var(--border-2); background: var(--surface); }
.rc2-ret-pill:active { transform: scale(0.97); }
.rc2-ret-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc2-ret-pill-active {
    border-color: var(--accent) !important;
    background: var(--accent-bg) !important;
}
.rc2-ret-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.rc2-ret-pill-active .rc2-ret-name { color: var(--accent); }
.rc2-ret-price {
    font-size: var(--fs-micro);
    color: var(--text-3);
    font-family: 'JetBrains Mono', monospace;
    margin-top: 2px;
    letter-spacing: -0.01em;
}
.rc2-ret-pill-active .rc2-ret-price { color: var(--accent); opacity: 0.8; }

.rc2-retainer-months {
    margin-top: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3);
    background: var(--surface-2);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
}
.rc2-months-label {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
    flex-shrink: 0;
    margin: 0;
}
.rc2-months-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-shrink: 0;
}
.rc2-months-input {
    width: 52px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}
.rc2-months-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.rc2-months-unit {
    font-size: var(--fs-micro);
    color: var(--text-3);
}
.rc2-retainer-total {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--accent);
    text-align: right;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

/* Export button */
.rc2-export-btn {
    display: flex;
    width: calc(100% - var(--sp-10));
    margin: var(--sp-4) var(--sp-5);
    justify-content: center;
    gap: var(--sp-2);
    height: 40px;
    font-size: var(--fs-sm);
    border-radius: var(--r-md);
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .rc2-layout {
        grid-template-columns: 1fr;
        padding: var(--sp-5) var(--sp-4);
        gap: var(--sp-5);
    }
    .rc2-sidebar {
        position: static;
        top: auto;
    }
    .rc2-sidebar-inner {
        height: auto;
        min-height: 0;
    }
    .rc2-line-items {
        overflow-y: visible;
        max-height: none;
        min-height: 0;
    }
    .rc2-tier-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-2);
    }
    .rc2-tier-card { padding: var(--sp-3); }
    .rc2-tier-mult { font-size: 1.5rem; }
}

@media (max-width: 600px) {
    .rc2-tier-grid { grid-template-columns: 1fr; }
    .rc2-risk-spectrum { flex-wrap: wrap; }
    .rc2-risk-chip { min-width: calc(33.33% - var(--sp-2)); }
    .rc2-total-amount { font-size: 2rem; }
}

/* ── END AI RATE CARD v2 ── */