:root{
    --bg:#0d1014; --panel:#141a21; --panel2:#1b232c; --line:#2a3640;
    --ink:#e7eef2; --dim:#8aa0ad; --amber:#ffb547; --cyan:#4fd1e3;
    --green:#73e08a; --red:#ff6b6b; --grid:rgba(79,209,227,.06);
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:
      linear-gradient(var(--grid) 1px,transparent 1px) 0 0/26px 26px,
      linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/26px 26px,
      radial-gradient(1200px 700px at 80% -10%,#16202a 0%,var(--bg) 60%);
    color:var(--ink); font-family:'IBM Plex Mono',monospace;
    min-height:100vh; padding:28px 20px 60px;
  }
  .wrap{max-width:1080px;margin:0 auto}
  header.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
    border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:26px;flex-wrap:wrap}
  h1{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.02em;
    font-size:clamp(26px,4vw,40px);margin:0;line-height:1;text-transform:uppercase}
  h1 .accent{color:var(--amber)}
  .sub{color:var(--dim);font-size:12.5px;margin-top:8px;max-width:46ch}
  .tag{font-size:11px;color:var(--cyan);border:1px solid var(--line);
    padding:6px 10px;border-radius:2px;white-space:nowrap;background:var(--panel)}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  @media(max-width:820px){.grid{grid-template-columns:1fr}}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:20px}
  .panel h2{font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;
    letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0 0 16px}
  .field{margin-bottom:15px}
  .field label{display:flex;justify-content:space-between;align-items:baseline;
    font-size:12px;color:var(--dim);margin-bottom:6px}
  .field label b{color:var(--ink);font-weight:600}
  .field label .sym{color:var(--amber);font-weight:600}
  .field input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
    font-family:'IBM Plex Mono',monospace;font-size:16px;padding:11px 12px;border-radius:3px;
    outline:none;transition:border-color .15s,box-shadow .15s}
  .field input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(79,209,227,.12)}
  .field .hint{font-size:11px;color:var(--dim);margin-top:5px}
  .ro-row{display:flex;align-items:center;gap:12px;background:var(--panel2);
    border:1px dashed var(--line);border-radius:3px;padding:11px 12px;margin-bottom:15px}
  .ro-row .k{font-size:12px;color:var(--dim)}
  .ro-row .v{font-size:16px;color:var(--cyan);font-weight:600;margin-left:auto}
  .ro-row .f{font-size:11px;color:var(--dim)}
  .mat{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
  .mat button{flex:1;min-width:80px;background:var(--bg);border:1px solid var(--line);
    color:var(--dim);font-family:inherit;font-size:11px;padding:8px 6px;border-radius:3px;cursor:pointer}
  .mat button.on{border-color:var(--amber);color:var(--amber);background:rgba(255,181,71,.08)}
  .actions{display:flex;gap:10px;margin-top:6px}
  .btn{flex:1;font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.05em;
    text-transform:uppercase;font-size:13px;padding:14px;border-radius:3px;cursor:pointer;border:1px solid}
  .btn.primary{background:var(--amber);color:#1a1206;border-color:var(--amber)}
  .btn.primary:hover{filter:brightness(1.08)}
  .btn.primary:disabled{background:var(--panel2);color:var(--dim);border-color:var(--line);cursor:not-allowed}
  .btn.ghost{background:transparent;color:var(--cyan);border-color:var(--line)}
  .btn.ghost:hover{border-color:var(--cyan)}
  .warn{background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.4);
    color:#ffb0b0;font-size:12px;padding:10px 12px;border-radius:3px;margin-bottom:14px;display:none}
  .warn.show{display:block}
  .preview-wrap{display:flex;flex-direction:column;gap:16px}
  svg.section{width:100%;height:auto;background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/16px 16px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/16px 16px,#0a0d10;
    border:1px solid var(--line);border-radius:4px}
  .props{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:4px;overflow:hidden}
  .props .cell{background:var(--panel);padding:12px 14px}
  .props .cell .k{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
  .props .cell .v{font-size:18px;color:var(--ink);margin-top:3px}
  .props .cell .v small{font-size:11px;color:var(--dim)}
  footer{margin-top:26px;color:var(--dim);font-size:11px;line-height:1.7;
    border-top:1px solid var(--line);padding-top:16px}
  footer code{color:var(--cyan)}
  .ok-flash{color:var(--green)}