: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"],input[type="text"],textarea,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;
  }
  textarea{min-height:58px;resize:vertical}
  input:focus,textarea:focus,select:focus{border-color:#485562}
  .preset-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preset-buttons button{padding:10px 8px;background:var(--field);color:var(--ink-2);border:1px solid var(--line);font-weight:700}.preset-buttons button:hover{border-color:var(--accent);color:#fff}.preset-buttons button.active{color:#fff;border-color:var(--accent-2);background:linear-gradient(180deg,#ff6a2b,var(--accent-2))}
  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}
  .check{display:flex;align-items:center;gap:9px;padding:2px 0}
  .check input{accent-color:var(--accent)}
  .check label{cursor:pointer}
  .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.ok{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}
  #dl3mf,#dl,#dlText{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}
  #dl,#dlText{background:transparent;border-color:var(--line);color:var(--ink-2);font-weight:700}
  #dl3mf:disabled,#dl:disabled,#dlText:disabled{opacity:.35;cursor:not-allowed}
  #hint{margin:10px 0 0;color:var(--ink-3);font-size:11.5px;line-height:1.5}

  /* ---------- viewport ---------- */
  #view{background:var(--view)}
  #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}}