:root {
  --ink:#224d57;
  --ink-2:#78939a;
  --muted:#8f9699;
  --line:#d6dcde;
  --soft:#eeeeee;
  --paper:#ffffff;
  --accent:#849aa0;
  --warn:#a7621b;
}
* { box-sizing:border-box; }
html, body { overflow-x:hidden; }
body { margin:0; font-family:Arial, sans-serif; color:#111; background:#f3f5f5; }
button, select, input { font:inherit; }
.shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) 390px; }
.main { min-width:0; padding:22px clamp(14px,2.5vw,34px) 36px; }
.side { min-width:0; position:sticky; top:0; height:100vh; overflow:auto; background:#fff; border-left:1px solid var(--line); padding:18px; }
.topbar { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.topbar > div { min-width:0; }
.logo { width:74px; height:74px; object-fit:contain; background:var(--ink); }
h1 { margin:0; font-size:24px; color:var(--ink); line-height:1.15; }
.sub { color:var(--muted); margin-top:5px; font-size:13px; overflow-wrap:anywhere; }
.sticky-total { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; background:#fff; border:1px solid var(--line); border-top:6px solid var(--ink); padding:12px; margin-bottom:16px; box-shadow:0 7px 18px rgba(34,77,87,.08); }
.total-label { color:var(--muted); font-size:12px; text-transform:uppercase; }
.total-value { color:var(--ink); font-size:24px; font-weight:700; white-space:nowrap; }
.btn { border:0; min-height:42px; padding:0 15px; background:var(--ink); color:#fff; cursor:pointer; font-weight:700; }
.btn.secondary { background:#e6ecee; color:var(--ink); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.grid { display:grid; grid-template-columns:340px minmax(0,1fr); gap:18px; }
.panel { min-width:0; background:#fff; border:1px solid var(--line); padding:16px; }
.panel h2 { margin:-16px -16px 14px; padding:12px 16px; background:var(--ink); color:#fff; font-size:15px; text-transform:uppercase; }
.field { display:grid; gap:7px; margin-bottom:12px; }
.field label { font-size:12px; color:var(--muted); text-transform:uppercase; }
select { width:100%; min-height:42px; border:1px solid #b8c4c7; padding:0 10px; background:#fff; color:#111; }
.model-photo { width:100%; aspect-ratio:14/9; object-fit:contain; background:#fff; display:block; }
.price-card { margin-top:12px; display:grid; gap:8px; }
.price-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 12px; border-bottom:1px solid var(--line); padding-bottom:7px; }
.price-row strong { color:var(--ink); }
.spec-table, .option-table, .kp-table { width:100%; border-collapse:collapse; }
.spec-table td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.spec-table tr:nth-child(odd) td { background:#eeeeee; }
.spec-table tr:nth-child(even) td { background:#fff; }
.spec-table td:first-child { color:#4f5d61; width:44%; }
.spec-table td:nth-child(2) { text-align:center; }
.spec-table .spec-note-row td { background:#fff !important; color:var(--muted); font-size:12px; text-align:left; padding-top:8px; }
.section-title { margin:22px 0 0; padding:12px 16px; background:var(--ink); color:#fff; font-size:15px; text-transform:uppercase; }
.base-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.base-list { background:#fff; border:1px solid var(--line); border-top:0; padding:12px; }
.base-item { background:#eeeeee; border-left:4px solid var(--ink); padding:9px 10px; font-size:13px; }
.option-group { margin-top:14px; background:#fff; border:1px solid var(--line); }
.option-group h3 { margin:0; padding:10px 12px; background:var(--ink); color:#fff; font-size:14px; }
.option-row { display:grid; grid-template-columns:34px minmax(0,1fr) 115px; gap:10px; align-items:start; padding:11px 12px; border-top:1px solid var(--line); background:#fff; }
.option-row.tone-gray { background:#eeeeee; }
.option-row.tone-white { background:#fff; }
.option-row.selected { box-shadow:inset 4px 0 0 var(--ink); }
.option-row input { width:20px; height:20px; accent-color:var(--ink); }
.option-name { line-height:1.3; }
.option-price { text-align:right; font-weight:700; color:var(--ink); white-space:nowrap; }
.warning { color:var(--warn); font-size:12px; margin-top:4px; }
.side h2 { margin:-18px -18px 12px; padding:14px 18px; background:var(--ink); color:#fff; font-size:18px; }
.summary-row { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.summary-row.big { margin:0 -8px; padding:11px 8px; background:var(--accent); color:#fff; font-size:20px; font-weight:700; }
.summary-note { color:var(--muted); font-size:12px; margin-top:8px; }
.kp-preview { margin-top:18px; border:1px solid var(--line); background:#fff; padding:13px; font-size:12px; color:#344; }
.kp-preview h3 { margin:-13px -13px 10px; padding:9px 13px; background:var(--ink); color:#fff; font-size:13px; }
.admin { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; color:#5b676a; font-size:12px; line-height:1.45; }
.total-model { margin-top:3px; color:#4f5d61; font-size:13px; overflow-wrap:anywhere; }
.mobile-bar { display:none; }
.hidden { display:none !important; }
@media (max-width: 980px) {
  .shell { display:block; }
  .side { position:static; height:auto; border-left:0; border-top:1px solid var(--line); }
  .grid { grid-template-columns:1fr; }
  .sticky-total { grid-template-columns:1fr; }
  .total-value { font-size:22px; }
  .base-list { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  body { padding-bottom:76px; }
  .main { padding:12px; }
  .topbar { align-items:flex-start; }
  .logo { width:56px; height:56px; }
  h1 { font-size:19px; }
  .sticky-total { position:static; }
  .price-row { display:block; }
  .price-row strong { display:block; margin-top:4px; }
  .option-row { grid-template-columns:30px minmax(0,1fr); }
  .option-price { grid-column:2; text-align:left; }
  .mobile-bar { position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; padding:9px 10px; background:#fff; border-top:4px solid var(--ink); box-shadow:0 -8px 20px rgba(34,77,87,.18); }
  .mobile-model { color:#4f5d61; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mobile-total { color:var(--ink); font-size:18px; font-weight:700; white-space:nowrap; }
  .mobile-bar .btn { min-height:38px; padding:0 10px; font-size:13px; }
}

/* Fixed summary remains visible while the option list scrolls. */
.shell { grid-template-columns:minmax(0,1fr) 390px; }
.side { position:fixed; top:0; right:0; width:390px; }
.main { grid-column:1; }
.option-price { white-space:normal; overflow-wrap:anywhere; }
@media(max-width:980px) { .shell{display:block} .side{position:static;width:auto;height:auto} body{padding-bottom:110px} .sticky-total{position:static} .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:9px 10px;background:#fff;border-top:4px solid var(--ink);box-shadow:0 -8px 20px rgba(34,77,87,.18)} .mobile-model{font-size:12px} .mobile-total{font-size:18px;font-weight:700} .mobile-bar .btn{min-height:38px;padding:0 10px;font-size:13px} }
@media(max-width:560px) { body{padding-bottom:110px} .mobile-bar{padding-bottom:max(9px,env(safe-area-inset-bottom))} }
.option-footnote { font-size:12px; line-height:1.4; color:#5b676a; margin-top:6px; font-weight:normal; }