html,body{margin:0;padding:0;}
  [hidden]{display:none !important;}

  :root{
    --mcd-ink:#122A3D;
    --mcd-teal:#1E6E86;
    --mcd-green:#6FAE2E;
    --bg:#F4F6F1;
    --surface:#FFFFFF;
    --surface-2:#EDF1EA;
    --border:#DDE3D8;
    --text:#16222B;
    --muted:#5B6A66;
    --danger:#B23A2E;
    --shadow: 0 1px 2px rgba(18,42,61,0.06), 0 8px 24px rgba(18,42,61,0.06);
    
    --on-accent-ink:#10241A;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --mcd-ink:#DCEEF5;
      --mcd-teal:#5FB8D4;
      --mcd-green:#8FCB4A;
      --bg:#101715;
      --surface:#182420;
      --surface-2:#1E2B26;
      --border:#2B3A34;
      --text:#E7EEE9;
      --muted:#93A69E;
      --danger:#E5897B;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
    }
  }
  :root[data-theme="dark"]{
    --mcd-ink:#DCEEF5;
    --mcd-teal:#5FB8D4;
    --mcd-green:#8FCB4A;
    --bg:#101715;
    --surface:#182420;
    --surface-2:#1E2B26;
    --border:#2B3A34;
    --text:#E7EEE9;
    --muted:#93A69E;
    --danger:#E5897B;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"IBM Plex Sans", system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .num{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; }

  .wrap{
    max-width:880px;
    margin:0 auto;
    padding:32px 20px 64px;
  }

  
  .letterhead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding-bottom:22px;
    border-bottom:2px solid var(--mcd-ink);
    margin-bottom:24px;
    flex-wrap:wrap;
  }
  
  .logo-badge{
    display:inline-flex;
    align-items:center;
    background:#FFFFFF;
    border-radius:8px;
    padding:8px 16px;
    box-shadow:var(--shadow);
  }
  .logo-badge img{ display:block; width:auto; }
  .logo-badge.iwco img{ height:34px; }
  .logo-badge.mcd img{ height:64px; }

  h1.page-title{
    font-size:1.5rem;
    font-weight:700;
    margin:0 0 4px;
    color:var(--mcd-ink);
    text-wrap:balance;
  }
  p.page-sub{
    margin:0 0 28px;
    color:var(--muted);
    font-size:0.95rem;
    max-width:60ch;
  }

  
  .card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:var(--shadow);
    padding:24px;
    margin-bottom:20px;
  }
  .card h2{
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.09em;
    color:var(--mcd-teal);
    font-weight:600;
    margin:0 0 16px;
  }

  
  .spec-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px 28px;
  }
  .spec-row{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding-bottom:12px;
    border-bottom:1px solid var(--surface-2);
  }
  .spec-row.full{ grid-column:1 / -1; }
  .spec-label{
    font-size:0.68rem;
    text-transform:uppercase;
    letter-spacing:0.07em;
    color:var(--muted);
  }
  .spec-value{
    font-size:0.95rem;
    color:var(--text);
    font-weight:500;
  }
  .spec-value.mono{ font-family:"IBM Plex Mono", monospace; }
  @media (max-width:560px){
    .spec-grid{ grid-template-columns:1fr; }
  }

  
  .qty-row{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
  }
  .qty-input-group{
    display:flex;
    align-items:center;
    border:1.5px solid var(--border);
    border-radius:8px;
    overflow:hidden;
    background:var(--surface-2);
    flex:1 1 240px;
  }
  .qty-input-group:focus-within{
    border-color:var(--mcd-teal);
  }
  .qty-input-group span.prefix{
    padding:0 4px 0 14px;
    color:var(--muted);
    font-size:1.1rem;
  }
  input#qty{
    border:none;
    background:transparent;
    outline:none;
    font-family:"IBM Plex Mono", monospace;
    font-size:1.25rem;
    font-weight:600;
    color:var(--text);
    padding:12px 14px 12px 4px;
    width:100%;
    min-width:0;
  }
  input#qty::-webkit-outer-spin-button,
  input#qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  span.qty-unit{
    color:var(--muted);
    font-size:0.85rem;
    padding-right:14px;
    white-space:nowrap;
  }
  input[type="range"]{
    width:100%;
    margin:18px 0 6px;
    accent-color:var(--mcd-teal);
  }
  .range-labels{
    display:flex;
    justify-content:space-between;
    font-size:0.7rem;
    color:var(--muted);
    font-family:"IBM Plex Mono", monospace;
  }
  .quick-picks{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:16px;
  }
  .quick-picks button{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.78rem;
    padding:6px 12px;
    border-radius:100px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--mcd-ink);
    cursor:pointer;
    transition:background .12s ease, border-color .12s ease;
  }
  .quick-picks button:hover{ border-color:var(--mcd-teal); background:var(--surface-2); }
  .quick-picks button:focus-visible, input[type="range"]:focus-visible{
    outline:2px solid var(--mcd-teal);
    outline-offset:2px;
  }

  .error-msg{
    display:none;
    margin-top:12px;
    padding:10px 14px;
    border-radius:8px;
    background:color-mix(in srgb, var(--danger) 12%, var(--surface));
    border:1px solid color-mix(in srgb, var(--danger) 35%, var(--surface));
    color:var(--danger);
    font-size:0.85rem;
  }
  .error-msg.show{ display:block; }

  
  .results-card{
    border-color:var(--mcd-ink);
  }
  .results-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr;
    gap:0;
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
  }
  .result-tile{
    padding:20px 18px;
    background:var(--surface);
    border-left:1px solid var(--border);
    display:flex;
    flex-direction:column;
    gap:6px;
    justify-content:center;
  }
  .result-tile:first-child{ border-left:none; }
  .result-tile.primary{
    
    background:var(--mcd-green);
  }
  .result-tile.primary .result-label{ color:color-mix(in srgb, var(--on-accent-ink) 65%, transparent); }
  .result-tile.primary .result-value{ color:var(--on-accent-ink); }
  .result-tile.primary .result-sub{ color:color-mix(in srgb, var(--on-accent-ink) 55%, transparent); }
  .result-label{
    font-size:0.66rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--muted);
    font-weight:600;
  }
  .result-value{
    font-family:"IBM Plex Mono", monospace;
    font-weight:600;
    font-size:1.5rem;
    color:var(--text);
    line-height:1.1;
  }
  .result-tile.primary .result-value{ font-size:1.85rem; }
  .result-sub{
    font-size:0.72rem;
    color:var(--muted);
    font-family:"IBM Plex Mono", monospace;
  }
  @media (max-width:700px){
    .results-grid{ grid-template-columns:1fr; }
    .result-tile{ border-left:none; border-top:1px solid var(--border); }
    .result-tile:first-child{ border-top:none; }
  }

  .tooling-line{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-top:16px;
    padding-top:16px;
    border-top:1px dashed var(--border);
  }
  .tooling-line .tooling-label{
    font-size:0.86rem;
    color:var(--text);
  }
  .tooling-line .tooling-label .note{
    display:block;
    font-size:0.72rem;
    color:var(--muted);
    margin-top:2px;
  }
  .tooling-line .tooling-value{
    font-family:"IBM Plex Mono", monospace;
    font-weight:600;
    font-size:1.1rem;
    color:var(--text);
  }

  .footnote{
    font-size:0.76rem;
    color:var(--muted);
    line-height:1.6;
    margin-top:4px;
  }
  .footnote + .footnote{ margin-top:8px; }

  footer.page-footer{
    text-align:center;
    font-size:0.75rem;
    color:var(--muted);
    margin-top:36px;
    line-height:2;
  }

/* ---- Additions for the hosted app (login, admin, userbar) ---- */
a{ color:var(--mcd-teal); }
.muted{ color:var(--muted); }
.userbar{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:0.82rem; color:var(--muted); margin:-8px 0 22px;
}
.userbar strong{ color:var(--text); font-weight:600; }
.login-card{ max-width:420px; }
form.stack{ display:flex; flex-direction:column; gap:14px; }
form.stack label, form.grid-form label{
  display:flex; flex-direction:column; gap:6px;
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted);
}
form.stack input, form.grid-form input, form.grid-form select{
  font:inherit; font-size:1rem; text-transform:none; letter-spacing:normal;
  padding:10px 12px; border:1.5px solid var(--border); border-radius:8px;
  background:var(--surface-2); color:var(--text);
}
form.stack input:focus, form.grid-form input:focus, form.grid-form select:focus{
  outline:2px solid var(--mcd-teal); outline-offset:1px; border-color:var(--mcd-teal);
}
.btn, .btn-small{
  font:inherit; font-weight:600; cursor:pointer; border-radius:8px;
  border:1px solid var(--mcd-teal); background:var(--mcd-teal); color:#fff;
}
.btn{ padding:11px 18px; font-size:0.95rem; align-self:flex-start; }
.btn-small{ padding:4px 10px; font-size:0.75rem; background:var(--surface); color:var(--mcd-teal); }
.btn:hover{ filter:brightness(1.08); }
.btn-small:hover{ background:var(--surface-2); }
.btn:focus-visible, .btn-small:focus-visible{ outline:2px solid var(--mcd-teal); outline-offset:2px; }
.notice{
  margin:0 0 16px; padding:10px 14px; border-radius:8px; font-size:0.88rem;
  background:color-mix(in srgb, var(--mcd-green) 14%, var(--surface));
  border:1px solid color-mix(in srgb, var(--mcd-green) 40%, var(--surface));
  color:var(--text);
}
.notice code{ font-size:1.05rem; font-weight:600; padding:0 6px; }
.notice .note{ display:block; font-size:0.75rem; color:var(--muted); margin-top:4px; }
.error-msg.show + form{ margin-top:14px; }
.projected-note{ margin:12px 0 0; }
.grid-form{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px 20px; align-items:end; }
@media (max-width:560px){ .grid-form{ grid-template-columns:1fr; } }
.table-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:0.85rem; }
table.data th{
  text-align:left; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--muted); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--border);
}
table.data td{ padding:8px 10px; border-bottom:1px solid var(--surface-2); vertical-align:top; }
table.data .r{ text-align:right; }
table.data tr.inactive td{ color:var(--muted); }
.actions{ display:flex; gap:6px; flex-wrap:wrap; }
.actions form{ margin:0; }