:root{--green:#107c41;--green2:#0b5f31;--green3:#e2f0d9;--blue:#1f4e78;--input:#fff2cc;--out:#f2f2f2;--border:#b7b7b7;--text:#1f2937;--muted:#6b7280;--bg:linear-gradient(135deg,#eef5ef,#f8fafc 50%,#e9f5ef);--card:#fff;--label:#fff;--field:#fff8dc;--field-border:#c9a747;--notice:#eff6ff;--notice-border:#bfdbfe;--notice-text:#1e3a8a;--shadow:0 16px 35px rgba(15,23,42,.14)}
body.dark-mode{--green:#1f8f5f;--green2:#8ee6b4;--green3:#14382a;--blue:#244866;--input:#2f2a1d;--out:#202936;--border:#3a4656;--text:#e7edf5;--muted:#a7b2c1;--bg:radial-gradient(circle at top left,rgba(31,143,95,.16),transparent 34%),linear-gradient(135deg,#0b1118,#121a24 48%,#0d141c);--card:#151d28;--label:#121a24;--field:#1c2532;--field-border:#536173;--notice:#132235;--notice-border:#2f5f89;--notice-text:#c8def2;--shadow:0 20px 48px rgba(0,0,0,.42)}
*{box-sizing:border-box}
body{margin:0;font-family:Calibri,Aptos,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding:28px}
.workbook{max-width:1180px;margin:0 auto;background:var(--card);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;border:1px solid #d1d5db}
.ribbon{background:var(--green);color:#fff;padding:12px 22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
body.dark-mode .ribbon{background:linear-gradient(90deg,#0f6b47,#14533c)}
.ribbon>strong{font-size:clamp(15px,3.5vw,18px);white-space:nowrap}
.actions{display:flex;gap:8px;flex-wrap:wrap}
button{border:0;border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer;font-family:inherit;font-size:14px;min-height:40px;touch-action:manipulation}
.btn-light{background:#fff;color:#0b5f31}
.btn-outline,.theme-toggle{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.55);display:inline-flex;gap:8px;align-items:center}
.tabbar{background:#f3f4f6;border-bottom:1px solid #d1d5db;padding:8px 24px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
body.dark-mode .tabbar{background:#0f1620}
.tab{display:inline-block;background:var(--card);color:var(--green2);border:1px solid #d1d5db;border-bottom:0;border-radius:9px 9px 0 0;padding:8px 16px;font-weight:700;white-space:nowrap}
.sheet{padding:28px}
.title{text-align:center;color:var(--green2);font-size:clamp(22px,5vw,44px);font-weight:800;margin:0;line-height:1.2}
.subtitle{text-align:center;color:var(--muted);margin:6px 0 20px;font-size:clamp(13px,3vw,16px)}
.mode-panel{border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:22px;background:var(--label);display:flex;flex-direction:column;gap:10px}
.mode-panel-row{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.mode-divider{height:1px;background:var(--border);margin:2px 0}
.switch-wrap{display:flex;align-items:center;gap:10px;font-weight:800;flex-shrink:0;font-size:clamp(13px,3.5vw,16px)}
.switch{position:relative;width:64px;height:34px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#94a3b8;border-radius:999px;cursor:pointer;transition:.25s}
.slider:before{content:"";position:absolute;width:26px;height:26px;left:4px;bottom:4px;background:white;border-radius:50%;transition:.25s;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.switch input:checked+.slider{background:var(--green)}
.switch input:checked+.slider:before{transform:translateX(30px)}
.mode-help{color:var(--muted);font-size:13px;max-width:720px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 34px}
.card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.section{background:var(--blue);color:#fff;font-weight:800;letter-spacing:.4px;padding:10px 14px;text-transform:uppercase;font-size:clamp(12px,3vw,14px)}
body.dark-mode .section{background:linear-gradient(90deg,#244866,#1b354d)}
.row{display:grid;grid-template-columns:minmax(170px,1.25fr) minmax(140px,.75fr);min-height:44px;border-top:1px solid var(--border)}
.row:first-child{border-top:0}
.label,.cell{display:flex;align-items:center;padding:9px 12px}
.label{background:var(--label);font-weight:700;color:var(--text);border-right:1px solid var(--border);font-size:clamp(13px,3vw,15px)}
.cell{background:var(--input)}
.output{background:var(--out);font-weight:800;justify-content:flex-end;font-size:clamp(13px,3.5vw,15px)}
.strong{background:var(--green3);color:var(--green2);font-size:clamp(15px,4vw,18px)}
input,select{width:100%;border:1px solid var(--field-border);background:var(--field);border-radius:7px;min-height:36px;padding:6px 8px;font:inherit;font-size:16px;color:var(--text);touch-action:manipulation;-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.hidden{display:none!important}
.full{grid-column:1/-1}
.notes .row{grid-template-columns:1fr}
.subsection-row .label,.subsection-row .cell{background:var(--green3);color:var(--green2);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.35px}
.notes .label{border-right:0;font-weight:500;color:var(--muted)}

.disclaimer{grid-column:1/-1;margin-top:0;padding:16px 18px;border-radius:12px;background:rgba(31,78,120,.06);border:1px solid rgba(31,78,120,.25);font-size:14px;line-height:1.5;color:var(--text)}
.disclaimer h3{margin:0 0 8px 0;font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:var(--blue)}
.disclaimer p{margin:0 0 8px 0}
.disclaimer p:last-child{margin-bottom:0}
body.dark-mode .disclaimer{background:rgba(47,95,137,.18);border-color:rgba(47,95,137,.5)}
body.dark-mode .disclaimer h3{color:#c8def2}
@media(max-width:640px){.disclaimer{font-size:13px;padding:14px 14px}}
body.layout-mobile .disclaimer{font-size:13px!important;padding:14px 14px!important}


.tax-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 20px}
.tax-chip{border:1px solid var(--notice-border);background:var(--notice);color:var(--notice-text);border-radius:999px;padding:6px 10px;font-size:13px;font-weight:800}
.source-list{margin:8px 0 0 18px;padding:0}
.source-list li{margin:4px 0}
.source-list a{color:inherit;font-weight:700}

.notice{margin-top:24px;padding:12px 14px;border-radius:10px;background:var(--notice);border:1px solid var(--notice-border);color:var(--notice-text);font-size:14px}

/* ── Input Validation UX ─────────────────────────── */
input.input-invalid,
select.input-invalid{
  border-color:#dc2626!important;
  outline:2px solid rgba(220,38,38,.22)!important;
  box-shadow:0 0 0 3px rgba(220,38,38,.12)!important;
}
.field-error{
  display:none;
  width:100%;
  margin-top:6px;
  color:#b91c1c;
  font-size:12px;
  font-weight:700;
  line-height:1.25;
}
.field-error.visible{display:block}
.cell:not(.output){align-items:stretch;flex-direction:column;justify-content:center}
.notice.notice-warning{
  background:#fff7ed;
  border-color:#fdba74;
  color:#9a3412;
  font-weight:700;
}
body.dark-mode .notice.notice-warning{
  background:#2b1d10;
  border-color:#9a5a22;
  color:#fed7aa;
}
.notice.notice-pulse{animation:noticePulse .45s ease-in-out}
@keyframes noticePulse{
  0%{transform:scale(1);box-shadow:none}
  35%{transform:scale(1.01);box-shadow:0 0 0 4px rgba(249,115,22,.22)}
  100%{transform:scale(1);box-shadow:none}
}
@media print{
  input.input-invalid,select.input-invalid{border:0!important;outline:0!important;box-shadow:none!important}
  .field-error{display:none!important}
  .notice.notice-warning{background:#eff6ff!important;border-color:#bfdbfe!important;color:#1e3a8a!important;font-weight:400!important}
}

.salary-disabled{opacity:.45}

/* ── Tablet ─────────────────────────────────────── */
@media(max-width:900px){
  body{padding:16px}
  .grid{gap:16px 20px}
}

/* ── Mobile ─────────────────────────────────────── */
@media(max-width:640px){
  body{padding:8px}
  .workbook{border-radius:12px}
  .ribbon{padding:10px 14px;gap:10px}
  .actions{width:100%;gap:8px}
  .actions button{flex:1;min-width:0;font-size:13px;padding:8px 6px;text-align:center}
  .sheet{padding:14px 12px}
  .title{font-size:clamp(20px,6vw,32px)}
  .subtitle{font-size:13px;margin-bottom:16px}
  .mode-panel{flex-direction:column;gap:12px}
  .mode-panel-row{flex-direction:column;align-items:flex-start;gap:8px}
  .switch-wrap{font-size:14px}
  .mode-help{font-size:12px}
  .grid{grid-template-columns:1fr;gap:14px}
  /* Stack label above cell inside each row */
  .row{grid-template-columns:1fr;min-height:auto}
  .label{border-right:0;border-bottom:1px solid var(--border);padding:8px 12px 6px;font-size:13px}
  .cell{padding:8px 12px 10px}
  .output{justify-content:flex-start}
  .strong{font-size:16px}
  input,select{font-size:16px;min-height:42px}
  .notice{font-size:13px}
  .notes .label{font-size:13px;padding:8px 12px}
}

/* ── Very small phones ───────────────────────────── */
@media(max-width:380px){
  body{padding:4px}
  .sheet{padding:10px 8px}
  .ribbon{padding:8px 10px}
  .actions button{font-size:12px}
}

/* ── Forced Mobile Layout ────────────────────────── */
body.layout-mobile{padding:8px!important}
body.layout-mobile .workbook{border-radius:12px}
body.layout-mobile .ribbon{padding:10px 14px!important;gap:10px!important}
body.layout-mobile .actions{width:100%!important;gap:8px!important}
body.layout-mobile .actions button{flex:1!important;min-width:0!important;font-size:13px!important;padding:8px 6px!important}
body.layout-mobile .sheet{padding:14px 12px!important}
body.layout-mobile .title{font-size:clamp(20px,6vw,32px)!important}
body.layout-mobile .subtitle{font-size:13px!important;margin-bottom:16px!important}
body.layout-mobile .mode-panel{flex-direction:column!important;gap:12px!important}
body.layout-mobile .mode-panel-row{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
body.layout-mobile .grid{grid-template-columns:1fr!important;gap:14px!important}
body.layout-mobile .row{grid-template-columns:1fr!important;min-height:auto!important}
body.layout-mobile .label{border-right:0!important;border-bottom:1px solid var(--border)!important;padding:8px 12px 6px!important;font-size:13px!important}
body.layout-mobile .cell{padding:8px 12px 10px!important}
body.layout-mobile .output{justify-content:flex-start!important}
body.layout-mobile .strong{font-size:16px!important}
body.layout-mobile input,body.layout-mobile select{font-size:16px!important;min-height:42px!important}
body.layout-mobile .notice{font-size:13px!important}

/* ── Forced Desktop Layout ───────────────────────── */
body.layout-desktop{padding:28px!important}
body.layout-desktop .ribbon{padding:12px 22px!important;gap:12px!important}
body.layout-desktop .actions{width:auto!important}
body.layout-desktop .actions button{flex:none!important;font-size:14px!important;padding:8px 12px!important}
body.layout-desktop .sheet{padding:28px!important}
body.layout-desktop .mode-panel{flex-direction:column!important}
body.layout-desktop .mode-panel-row{flex-direction:row!important;align-items:center!important}
body.layout-desktop .grid{grid-template-columns:1fr 1fr!important;gap:22px 34px!important}
body.layout-desktop .row{grid-template-columns:minmax(170px,1.25fr) minmax(140px,.75fr)!important;min-height:44px!important}
body.layout-desktop .label{border-right:1px solid var(--border)!important;border-bottom:0!important;padding:9px 12px!important;font-size:inherit!important}
body.layout-desktop .output{justify-content:flex-end!important}
body.layout-desktop .strong{font-size:18px!important}
body.layout-desktop input,body.layout-desktop select{min-height:36px!important}

/* ── Detailed Estimate Mode Spacing / Layout Fix ────────────────
   Desktop Detailed Mode is organized into a clean dashboard:
   - Left column: setup + hourly/salary inputs
   - Right column: merged tax/pre-tax settings + results
   - Notes/disclaimer remain full width below
   This replaces the prior cramped/uneven card flow. */
body.detailed-mode.layout-desktop .workbook{max-width:1240px!important;}
body.detailed-mode.layout-desktop .sheet{padding:22px!important;}
body.detailed-mode.layout-desktop .title{font-size:clamp(26px,3.4vw,36px)!important;margin-bottom:2px!important;}
body.detailed-mode.layout-desktop .subtitle{margin:4px 0 12px!important;font-size:13.5px!important;}
body.detailed-mode.layout-desktop .tax-meta{margin:0 0 14px!important;gap:7px!important;}
body.detailed-mode.layout-desktop .tax-chip{padding:5px 9px!important;font-size:12px!important;}
body.detailed-mode.layout-desktop .mode-panel{padding:11px 13px!important;margin-bottom:16px!important;gap:8px!important;}
body.detailed-mode.layout-desktop .mode-panel-row{gap:14px!important;}
body.detailed-mode.layout-desktop .mode-help{font-size:12.5px!important;line-height:1.3!important;max-width:680px!important;}

/* Balanced two-column grid. */
body.detailed-mode.layout-desktop .grid{
 display:grid!important;
 grid-template-columns:minmax(360px,.92fr) minmax(430px,1.08fr)!important;
 gap:16px 20px!important;
 align-items:start!important;
 grid-auto-flow:row dense!important;
}
body.detailed-mode.layout-desktop .card{border-radius:11px!important;}
body.detailed-mode.layout-desktop .section{padding:8px 11px!important;font-size:12.5px!important;letter-spacing:.32px!important;}
body.detailed-mode.layout-desktop .row{grid-template-columns:minmax(155px,1.05fr) minmax(150px,.95fr)!important;min-height:38px!important;}
body.detailed-mode.layout-desktop .label,
body.detailed-mode.layout-desktop .cell{padding:6px 9px!important;font-size:13px!important;}
body.detailed-mode.layout-desktop input,
body.detailed-mode.layout-desktop select{min-height:32px!important;padding:5px 8px!important;font-size:13px!important;border-radius:6px!important;}
body.detailed-mode.layout-desktop select{background-position:right 8px center!important;padding-right:25px!important;}
body.detailed-mode.layout-desktop .output{font-size:13px!important;}
body.detailed-mode.layout-desktop .strong{font-size:14.5px!important;}
body.detailed-mode.layout-desktop .muted,
body.detailed-mode.layout-desktop #state-tax-meta,
body.detailed-mode.layout-desktop #accurateTaxCard .cell .muted{font-size:11px!important;line-height:1.25!important;margin-top:4px!important;}

/* Explicit card placement prevents random vertical gaps in Detailed Mode. */
body.detailed-mode.layout-desktop .grid > #paySetupCard{grid-column:1!important;grid-row:1!important;}
body.detailed-mode.layout-desktop .grid > #hourlyCard{grid-column:1!important;grid-row:2!important;}
body.detailed-mode.layout-desktop .grid > #salaryCard{grid-column:1!important;grid-row:3!important;}
body.detailed-mode.layout-desktop .grid > #accurateTaxCard{grid-column:2!important;grid-row:1!important;}
body.detailed-mode.layout-desktop .grid > #paycheckResultsCard{grid-column:2!important;grid-row:2!important;}
body.detailed-mode.layout-desktop .grid > #annualizedSummaryCard{grid-column:2!important;grid-row:3!important;}
body.detailed-mode.layout-desktop .grid > .notes,
body.detailed-mode.layout-desktop .grid > .disclaimer,
body.detailed-mode.layout-desktop .grid > .notice{grid-column:1/-1!important;}

/* Pre-tax controls now breathe better while still staying compact. */
body.detailed-mode.layout-desktop #accurateTaxCard .row:has(#k401Mode) .cell,
body.detailed-mode.layout-desktop #accurateTaxCard .row:has(#hsaMode) .cell{
 display:grid!important;
 grid-template-columns:minmax(0,1.45fr) minmax(105px,.7fr)!important;
 gap:6px 8px!important;
 align-items:center!important;
}
body.detailed-mode.layout-desktop #accurateTaxCard .row:has(#k401Mode) .cell .muted,
body.detailed-mode.layout-desktop #accurateTaxCard .row:has(#hsaMode) .cell .muted{grid-column:1/-1!important;}
body.detailed-mode.layout-desktop #accurateTaxCard .row,
body.detailed-mode.layout-desktop #paycheckResultsCard .row,
body.detailed-mode.layout-desktop #paySetupCard .row,
body.detailed-mode.layout-desktop #hourlyCard .row,
body.detailed-mode.layout-desktop #salaryCard .row,
body.detailed-mode.layout-desktop #annualizedSummaryCard .row{min-height:36px!important;}

/* Lower content is compact but readable. */
body.detailed-mode.layout-desktop .notes{margin-top:2px!important;}
body.detailed-mode.layout-desktop .notes .label{padding:7px 10px!important;font-size:12.5px!important;line-height:1.3!important;}
body.detailed-mode.layout-desktop .disclaimer{padding:13px 15px!important;font-size:12.75px!important;line-height:1.4!important;}
body.detailed-mode.layout-desktop .disclaimer h3{font-size:12.75px!important;margin-bottom:6px!important;}
body.detailed-mode.layout-desktop .disclaimer p{margin-bottom:6px!important;}
body.detailed-mode.layout-desktop .source-list li{margin:2px 0!important;}
body.detailed-mode.layout-desktop .notice{margin-top:0!important;padding:10px 12px!important;font-size:12.75px!important;}

/* ── Print / Save PDF Layout ───────────────────────
   Keeps the PDF clean by removing UI-only controls,
   flattening the layout, and preventing awkward row/card splits. */
@media print{
  @page{size:Letter;margin:.45in}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  html,body{background:#fff!important;color:#111827!important;padding:0!important;margin:0!important;min-height:auto!important}
  body.dark-mode{background:#fff!important;color:#111827!important}
  .workbook{max-width:none!important;width:100%!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;overflow:visible!important}
  .ribbon{background:#107c41!important;color:#fff!important;padding:10px 14px!important;border-radius:0!important}
  .actions,.tabbar,.theme-toggle,#resetBtn{display:none!important}
  .sheet{padding:16px 0 0!important}
  .title{font-size:28px!important;margin:0 0 2px!important;color:#0b5f31!important}
  .subtitle{font-size:12px!important;margin:0 0 12px!important;color:#4b5563!important}
  .mode-panel{display:none!important}
  .grid{display:block!important}
  .card,.disclaimer,.notice{break-inside:avoid-page!important;page-break-inside:avoid!important;margin:0 0 12px!important;border-color:#9ca3af!important;box-shadow:none!important;background:#fff!important;overflow:hidden!important}
  .section{background:#1f4e78!important;color:#fff!important;padding:8px 10px!important;font-size:12px!important;letter-spacing:.3px!important}
  .row{break-inside:avoid!important;page-break-inside:avoid!important;grid-template-columns:46% 54%!important;min-height:34px!important;border-top:1px solid #c7c7c7!important}
  .label,.cell{break-inside:avoid!important;page-break-inside:avoid!important;padding:6px 8px!important;font-size:11.5px!important;color:#111827!important;background:#fff!important}
  .label{border-right:1px solid #c7c7c7!important;font-weight:700!important}
  .cell{background:#fff8dc!important}
  .output{justify-content:flex-end!important;background:#f3f4f6!important;font-weight:800!important}
  .strong{background:#e2f0d9!important;color:#0b5f31!important;font-size:12.5px!important}
  input,select{border:0!important;background:transparent!important;min-height:0!important;padding:0!important;font-size:11.5px!important;color:#111827!important;appearance:none!important;-webkit-appearance:none!important;background-image:none!important}
  .notes .label{font-weight:500!important;color:#374151!important;border-right:0!important}
  .disclaimer{display:block!important;width:100%!important;break-inside:avoid-page!important;page-break-inside:avoid!important;padding:12px 14px!important;border-radius:8px!important;background:#eff6ff!important;border:1px solid #bfdbfe!important;color:#1f2937!important;line-height:1.4!important}
  .disclaimer h3{font-size:12px!important;margin:0 0 6px!important;color:#1f4e78!important}
  .disclaimer p{font-size:11.5px!important;margin:0 0 6px!important}
  .notice{padding:9px 10px!important;border-radius:8px!important;font-size:11.5px!important;background:#eff6ff!important;border:1px solid #bfdbfe!important;color:#1e3a8a!important}
  #accurateTaxCard:not(.hidden){break-inside:auto!important;page-break-inside:auto!important}
  #accurateTaxCard:not(.hidden) .row{break-inside:avoid!important;page-break-inside:avoid!important}
}

/* ── Detailed Estimate Mode Red-X Spacing Fix ─────────────────────
   The previous Detailed Mode desktop grid placed the left cards and
   right cards on the same CSS grid rows. Tall right-column cards made
   the left-column rows stretch, which created the large blank gaps
   between Pay Setup, Hourly Inputs, and Salary Inputs.

   These lightweight stack wrappers let each column manage its own
   vertical spacing independently. Simple Mode and Mobile Mode are left
   unchanged because the wrappers use display: contents by default. */
.left-stack,
.right-stack{display:contents;}

body.detailed-mode.layout-desktop .grid{
  display:grid!important;
  grid-template-columns:minmax(360px,.92fr) minmax(430px,1.08fr)!important;
  row-gap:8px!important;
  column-gap:20px!important;
  align-items:start!important;
  grid-auto-flow:row!important;
}

body.detailed-mode.layout-desktop .left-stack,
body.detailed-mode.layout-desktop .right-stack{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  min-width:0!important;
}

body.detailed-mode.layout-desktop .left-stack{
  grid-column:1!important;
  grid-row:1!important;
}

body.detailed-mode.layout-desktop .right-stack{
  grid-column:2!important;
  grid-row:1!important;
}

body.detailed-mode.layout-desktop .left-stack > .card,
body.detailed-mode.layout-desktop .right-stack > .card{
  width:100%!important;
}

body.detailed-mode.layout-desktop .grid > .notes,
body.detailed-mode.layout-desktop .grid > .disclaimer,
body.detailed-mode.layout-desktop .grid > .notice{
  grid-column:1/-1!important;
}

@media(min-width:1280px){
  body.detailed-mode.layout-desktop .grid{
    grid-template-columns:minmax(320px,.9fr) minmax(430px,1.1fr)!important;
    column-gap:20px!important;
    row-gap:8px!important;
  }
  body.detailed-mode.layout-desktop .left-stack{grid-column:1!important;grid-row:1!important;}
  body.detailed-mode.layout-desktop .right-stack{grid-column:2!important;grid-row:1!important;}
}


/* ─────────────────────────────────────────────
   Simple Mode – Clean Left/Right Wrapper Layout
   Layout:
   Left wrapper  → Pay Setup, Hourly/Salary Inputs, Tax Settings — Simple
   Right wrapper → Paycheck Results, Annualized Summary
──────────────────────────────────────────── */

/* Desktop only */
body:not(.detailed-mode).layout-desktop .grid{
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

/* Place the actual grid children, not the cards nested inside them. */
body:not(.detailed-mode).layout-desktop .left-stack{
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body:not(.detailed-mode).layout-desktop .right-stack{
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-self: flex-start;
  min-width: 0 !important;
}

/* Keep lower full-width content below both Simple Mode columns. */
body:not(.detailed-mode).layout-desktop .grid > .notes,
body:not(.detailed-mode).layout-desktop .grid > .disclaimer,
body:not(.detailed-mode).layout-desktop .grid > .notice{
  grid-column: 1 / -1 !important;
}

/* ── Feedback Section ─────────────────────────── */
.feedback{
  grid-column:1/-1;
  margin-top:0;
  padding:20px 22px;
  border-radius:12px;
  background:var(--green3);
  border:1px solid var(--green);
  text-align:center;
}
.feedback h3{
  margin:0 0 8px 0;
  font-size:15px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--green2);
  font-weight:800;
}
.feedback p{
  margin:0 0 12px 0;
  font-size:14px;
  color:var(--text);
  line-height:1.5;
}
.feedback-btn{
  display:inline-block;
  background:var(--green);
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:10px 28px;
  border-radius:8px;
  text-decoration:none;
  transition:background .2s, transform .15s;
  letter-spacing:.3px;
}
.feedback-btn:hover{
  background:var(--green2);
  transform:translateY(-1px);
}
.feedback-note{
  margin-top:10px !important;
  margin-bottom:0 !important;
  font-size:12px !important;
  color:var(--muted) !important;
  font-style:italic;
}
body.dark-mode .feedback{
  background:rgba(31,143,95,.1);
  border-color:rgba(31,143,95,.4);
}
@media print{
  .feedback{display:none !important;}
}
body.layout-mobile .feedback{
  padding:16px 14px !important;
}
body.layout-mobile .feedback h3{font-size:14px !important;}
body.layout-mobile .feedback p{font-size:13px !important;}
body.layout-mobile .feedback-btn{font-size:13px !important;padding:9px 22px !important;}