:root{
    --ink:#E8EDF2; --ink-2:#A7B2BD; --ink-3:#6C7883;
    --paper:#0E1216; --paper-2:#161C23; --line:#222B34;
    --view:#05070A; --accent:#F03A24; --accent-2:#C1121F; --warn:#E8A33D;
    --field:#131920;
    --r:4px;
  }
  *{box-sizing:border-box}
  html{color-scheme:dark}
  body{
    font-family:"Inter","Helvetica Neue",system-ui,-apple-system,Arial,sans-serif;
    color:var(--ink);background:var(--paper);
    font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums;
  }
  /* app bar, panel/view layout and the phone layout: generator-shell.css */
  /* ---------- panel ---------- */
  #panel{background:var(--paper)}
  header{padding:18px 22px 16px;border-bottom:1px solid var(--line);position:relative}
  header img{display:block;width:172px;height:auto;margin:0 0 14px -6px}

  #lang{position:absolute;right:18px;top:18px;display:flex;gap:4px}
  #lang button,#mode button,#viewbar button,#cutctl button{
    border:1px solid var(--line);background:transparent;color:var(--ink-3);
    border-radius:var(--r);padding:6px 9px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;
  }
  #lang button[aria-pressed="true"],#mode button[aria-pressed="true"],#viewbar button[aria-pressed="true"]{
    color:#fff;border-color:var(--accent-2);background:linear-gradient(180deg,#FF6429,var(--accent-2));
  }
  h1{font-size:18px;margin:0 0 4px;letter-spacing:.01em}
  header p{margin:0;color:var(--ink-3);font-size:12.5px}
  .group{padding:16px 22px;border-bottom:1px solid var(--line)}
  .group h2{margin:0 0 13px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
  #mode{display:flex;gap:5px}
  #mode button{flex:1;padding:9px 10px;font-size:12px}
  .row{margin:0 0 14px}
  .row:last-child{margin-bottom:0}
  .row.advanced{display:none}
  body.expert .row.advanced{display:block}
  .top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
  label{color:var(--ink-2);font-size:12.5px}
  .num{display:flex;align-items:center;gap:5px}
  .num input{width:68px;text-align:right}
  .unit{width:25px;color:var(--ink-3);font-size:11px}
  input[type="number"],select{
    width:100%;border:1px solid var(--line);background:var(--field);color:var(--ink);
    border-radius:var(--r);padding:7px 8px;font:inherit;font-size:12.5px;outline:none;
  }
  input:focus,select:focus{border-color:#485562}
  input[type="range"]{appearance:none;-webkit-appearance:none;width:100%;height:17px;background:transparent;margin:0}
  input[type="range"]::-webkit-slider-runnable-track{height:2px;background:var(--line)}
  input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#DCE3EA;border:1px solid #05070A;margin-top:-6px}
  input[type="range"]::-moz-range-track{height:2px;background:var(--line)}
  input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#DCE3EA;border:1px solid #05070A}
  .small{font-size:11.5px;color:var(--ink-3);margin:6px 0 0}
  #facts{padding:15px 22px;border-bottom:1px solid var(--line)}
  #facts-list{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0}
  #facts-list dt{color:var(--ink-3)}
  #facts-list dd{margin:0;text-align:right;color:var(--ink)}
  #notes{list-style:none;padding:0;margin:12px 0 0}
  #notes li{margin-top:6px;padding:7px 9px;border-left:2px solid var(--warn);background:rgba(232,163,61,.10);color:#E9B565;border-radius:var(--r);font-size:12px}
  #notes li.bad{border-color:#EF665E;background:rgba(239,102,94,.12);color:#FF9A93}
  #notes li.good{border-color:#59C37A;background:rgba(89,195,122,.09);color:#8ED5A3}
  #export{padding:16px 22px 22px;margin-top:auto}
  .btns{display:grid;grid-template-columns:1fr;gap:8px}
  #dl{border:1px solid var(--accent-2);border-radius:var(--r);padding:11px 12px;background:linear-gradient(180deg,#FF6429,var(--accent-2));color:#fff;font:inherit;font-weight:800;cursor:pointer}
  .secondary{border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;background:transparent;color:var(--ink-2);font:inherit;font-weight:600;cursor:pointer}
  .secondary:hover{border-color:var(--accent);color:#fff}
  .secondary:disabled{opacity:.35;cursor:not-allowed}
  #dl:disabled{opacity:.4;cursor:not-allowed}
  /* ---------- phone case additions ---------- */
  body:not(.expert) .group.adv{display:none}
  .chk{display:flex;align-items:center;gap:8px;cursor:pointer}
  .chk input{width:15px;height:15px;accent-color:var(--accent);margin:0}
  .chk input:disabled+*{opacity:.6}
  select option:disabled{color:var(--ink-3)}
  .pc-note{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
  .pc-note.warn{color:#E9B565}
  .pc-confirm{padding:10px 11px;border:1px solid var(--warn);border-radius:var(--r);background:rgba(232,163,61,.08)}
  .pc-confirm p{margin:0 0 9px;font-size:12.5px;color:var(--ink)}
  .pc-confirm-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .pc-confirm .primary{border:1px solid var(--accent-2);border-radius:var(--r);padding:8px 8px;background:linear-gradient(180deg,#FF6429,var(--accent-2));color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
  .pc-confirm .secondary{padding:8px 8px;font-size:12px}
  .pc-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,7,10,.78)}
  .pc-modal[hidden]{display:none}
  .pc-modal__box{max-width:440px;width:100%;padding:22px 22px 20px;background:var(--paper-2);border:1px solid var(--line);border-top:3px solid var(--warn);border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
  .pc-modal__box h2{margin:0 0 10px;font-size:17px;color:var(--ink)}
  .pc-modal__box p{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--ink-2)}
  .pc-modal__box button{margin-top:6px;width:100%;border:1px solid var(--accent-2);border-radius:var(--r);padding:11px 12px;background:linear-gradient(180deg,#FF6429,var(--accent-2));color:#fff;font:inherit;font-weight:800;cursor:pointer}
  #hint{margin:10px 0 0;color:var(--ink-3);font-size:11.5px;line-height:1.5}

  /* ---------- viewport ---------- */
  #view{background:var(--view)}
  /* many buttons: wrap, right-aligned, the gaps let drags through to the canvas */
  #viewbar{flex-wrap:wrap;justify-content:flex-end;pointer-events:none}
  #viewbar button{pointer-events:auto;background:rgba(14,18,22,.72)}
  #cutctl{position:absolute;right:16px;top:54px;width:190px;padding:9px;background:rgba(14,18,22,.92);border:1px solid var(--line);border-radius:var(--r);z-index:2}
  #cutctl button{width:100%;margin-bottom:7px}
  #cutctl input{width:100%}
  #hud{color:var(--ink-3);font-size:12px}
  #hud b{color:var(--ink)}

  @media (prefers-reduced-motion:reduce){*{transition:none!important}}