: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 */
  button,input,select{font:inherit}
  button{cursor:pointer}
  /* ---------- 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}
  header h1{font-size:22px;line-height:1.16;margin:0 72px 4px 0;font-weight:720;letter-spacing:-.02em}
  header p{margin:0;color:var(--ink-3);font-size:12px}
  #lang{position:absolute;right:18px;top:17px;display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  #lang button{border:0;background:var(--field);color:var(--ink-3);padding:5px 8px;font-size:11px}
  #lang button[aria-pressed="true"]{background:var(--paper-2);color:var(--ink)}
  .group{padding:15px 20px;border-bottom:1px solid var(--line)}
  .group>h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 12px;font-weight:700}
  #mode{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  #mode button,#viewbar button,#cutctl button,.smallbtn,.removebtn,#export button{
    background:var(--field);color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:7px 9px
  }
  #mode button[aria-pressed="true"],#viewbar button[aria-pressed="true"]{border-color:#45515e;color:var(--ink);background:var(--paper-2)}
  .field{margin:0 0 12px}
  .field:last-child{margin-bottom:0}
  .field label{display:flex;justify-content:space-between;gap:8px;align-items:baseline;color:var(--ink-2);font-size:12px;margin-bottom:6px}
  .field .controls{display:grid;grid-template-columns:1fr 84px;gap:8px;align-items:center}
  .field select,.field input[type="number"]{
    width:100%;background:var(--field);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);padding:7px 8px
  }
  .field input[type="range"]{width:100%;accent-color:var(--accent)}
  .field.chk{display:flex;justify-content:space-between;align-items:center;gap:12px}
  .field.chk label{margin:0}
  .field.chk input{width:18px;height:18px;accent-color:var(--accent)}
  .unit{color:var(--ink-3)}
  .advanced[hidden]{display:none!important}
  .helper{color:var(--ink-3);font-size:11px;margin:8px 0 0}
  .customhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 8px;color:var(--ink-2);font-size:12px}
  .smallbtn{padding:5px 7px;font-size:11px}
  .smallbtn:disabled{opacity:.45;cursor:default}
  .itemrow{display:grid;grid-template-columns:78px 1fr 30px;gap:6px;align-items:center;margin:6px 0}
  .itemrow.hookrow{grid-template-columns:1fr 30px}
  .itemrow select,.itemrow input{min-width:0;width:100%;background:var(--field);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);padding:6px 7px;font-size:12px}
  .removebtn{padding:6px 0;color:var(--ink-3)}
  .empty{font-size:11px;color:var(--ink-3);padding:4px 0}
  #facts{padding:14px 20px;border-bottom:1px solid var(--line)}
  #facts dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:5px 12px;font-size:12px}
  #facts dt{color:var(--ink-3)}
  #facts dd{margin:0;color:var(--ink-2);text-align:right}
  #notes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
  #notes li{font-size:11px;color:var(--warn);padding-left:13px;position:relative}
  #notes li:before{content:"•";position:absolute;left:0}
  #notes li.ok{color:#7FBF9D}
  #export{padding:16px 20px 22px}
  #export .btns{display:grid;grid-template-columns:1fr;gap:8px}
  #export button{background:var(--accent);border-color:var(--accent);color:white;font-weight:700;padding:10px 12px}
  #hint{font-size:11px;color:var(--ink-3);margin:9px 0 0}
  /* ---------- viewport ---------- */
  #view{background:var(--view)}
  #viewbar button{font-size:11px;background:rgba(14,18,22,.88)}
  #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:4}
  #cutctl button{width:100%;margin-bottom:7px}
  #cutctl input{width:100%;accent-color:var(--accent)}
  #hud{color:var(--ink-3);font-size:12px;background:rgba(5,7,10,.62);padding:5px 7px;border-radius:3px}
  #hud b{color:var(--ink)}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}