:root{
    --bg:#17120f; --panel:#211a15; --panel2:#2a2019; --line:#342a20;
    --fg:#f2e9df; --mut:#a3968a; --faint:#6f6357;
    --orange:#ff7a1a; --orange2:#ffa04d; --teal:#49c3b6; --red:#e5543a;
    --r:14px; --r2:10px;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    background:var(--bg); color:var(--fg); font-size:15px; line-height:1.45;
    -webkit-font-smoothing:antialiased;
    background-image:radial-gradient(150% 320px at 50% -140px, rgba(255,120,26,.20), transparent 62%);
    background-repeat:no-repeat;
  }
  .app{max-width:860px; margin:0 auto; padding:0 16px 40px}
  a{color:var(--orange2)}
  /* wrappers are layout-neutral — everything flows in one centered column */
  .side, .content{display:contents}
  .group{break-inside:avoid; margin-bottom:2px}
  .group .ctl:last-child{border-bottom:0}
  /* parameters flow into two balanced columns on wider screens */
  @media (min-width:680px){
    #params{column-count:2; column-gap:32px}
  }

  /* sticky app bar */
  .top{position:sticky; top:0; z-index:20; display:flex; align-items:center;
       flex-wrap:wrap; row-gap:8px; padding:14px 0 12px;
       background:linear-gradient(var(--bg) 74%, rgba(23,18,15,0));}
  .brand{display:flex; align-items:center; gap:11px; min-width:0}
  .brand svg{width:40px; height:40px; flex:0 0 auto}
  .wm{font-family:"Archivo Black",system-ui,sans-serif; font-size:18px; line-height:1;
      letter-spacing:.3px; transform:skewX(-6deg); white-space:nowrap}
  .wm .a{color:var(--fg)} .wm .b{color:var(--teal)}
  .wm-sub{font-size:10px; color:var(--mut); letter-spacing:1.6px; text-transform:uppercase;
          font-weight:600; margin-top:4px}
  .conn{display:flex; align-items:center; gap:8px; margin-left:auto}

  /* buttons */
  .btn{font:inherit; font-weight:600; border:0; border-radius:var(--r2); cursor:pointer;
       padding:11px 15px; color:#1c130b; background:var(--orange);
       transition:transform .04s ease, filter .15s ease}
  .btn:hover{filter:brightness(1.06)}
  .btn:active{transform:translateY(1px)}
  .btn:disabled{opacity:.45; cursor:default; filter:none; transform:none}
  .btn.sm{padding:8px 13px; font-size:14px; border-radius:9px}
  .btn.ghost{background:transparent; color:var(--fg); box-shadow:inset 0 0 0 1px var(--line)}
  .btn.ghost:hover{background:var(--panel2); filter:none}
  .btn.ghost.teal{color:var(--teal); box-shadow:inset 0 0 0 1px rgba(73,195,182,.42)}
  .btn.danger{background:var(--red); color:#fff}
  .conn .btn:disabled{display:none}     /* show only the relevant connect/disconnect */

  /* connection chip */
  .chip{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
        color:var(--mut); padding:6px 11px; border-radius:20px; background:var(--panel)}
  .chip:before{content:""; width:8px; height:8px; border-radius:50%; background:var(--faint)}
  .chip.on{color:var(--teal)}
  .chip.on:before{background:var(--teal); box-shadow:0 0 8px var(--teal)}

  /* panels */
  .panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
         padding:14px; margin:12px 0; box-shadow:0 10px 26px rgba(0,0,0,.26)}

  /* compatibility note */
  .note{font-size:12.5px; color:var(--mut); line-height:1.55; margin:12px 2px 0;
        padding-left:12px; border-left:2px solid var(--orange)}
  .note b{color:var(--fg)}

  /* status strip */
  .stats{display:flex; gap:10px; padding:0}
  .stat{flex:1; background:var(--panel); border:1px solid var(--line);
        border-radius:var(--r2); padding:9px 11px; min-width:0}
  .stat .k{display:block; font-size:10.5px; color:var(--faint);
           text-transform:uppercase; letter-spacing:.6px; margin-bottom:2px}
  .stat .v{font-size:13.5px; font-weight:600}
  .pill{font-weight:600}
  .p-ok{color:var(--teal)} .p-bad{color:var(--red)} .p-mut{color:var(--mut)}

  /* actions */
  .actions .act{display:flex; gap:10px; flex-wrap:wrap}
  .actions .act .btn{flex:1 1 150px}
  .hint{font-size:12px; color:var(--mut); margin:12px 0 0}
  .hint b{color:var(--fg)}

  /* parameter groups + controls */
  .grp{font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
       color:var(--orange2); margin:24px 4px 4px; display:flex; align-items:center; gap:10px}
  .grp:after{content:""; flex:1; height:1px; background:var(--line)}
  .ctl{padding:13px 2px; border-bottom:1px solid var(--line)}
  .ctl.bool{display:flex; align-items:center; justify-content:space-between; gap:12px}
  .ctl-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px}
  .ctl-name{font-size:14.5px}
  .ctl-val{font-size:13.5px; font-weight:700; color:var(--orange2); background:var(--panel2);
           padding:2px 9px; border-radius:7px; font-variant-numeric:tabular-nums; white-space:nowrap}

  input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:6px;
    border-radius:6px; background:var(--panel2); outline:none; margin:0}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px;
    border-radius:50%; background:var(--orange); border:3px solid var(--bg);
    box-shadow:0 1px 4px rgba(0,0,0,.45); cursor:pointer}
  input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%;
    background:var(--orange); border:3px solid var(--bg); cursor:pointer}

  /* toggle */
  .sw{position:relative; width:46px; height:27px; flex:0 0 auto}
  .sw input{opacity:0; width:0; height:0}
  .sw span{position:absolute; inset:0; background:#3a2e24; border-radius:27px; transition:.16s}
  .sw span:before{content:""; position:absolute; width:21px; height:21px; left:3px; top:3px;
    background:#f2e9df; border-radius:50%; transition:.16s}
  .sw input:checked+span{background:var(--teal)}
  .sw input:checked+span:before{transform:translateX(19px)}

  /* empty state */
  .empty{text-align:center; color:var(--mut); font-size:14px; padding:30px 20px; line-height:1.6}
  .empty b{color:var(--fg)}

  /* footer */
  .foot{text-align:center; color:var(--faint); font-size:12px; margin-top:26px; line-height:1.7}
  .foot a{color:var(--orange2); font-weight:600; text-decoration:none}
  .foot a:hover{text-decoration:underline}
  .foot .cp{display:block; color:#574d43; font-size:11px}

  /* boot melody */
  .melrow{display:flex; gap:8px; align-items:center; margin:8px 0}
  .sel,.inp{flex:1; min-width:0; font:inherit; color:var(--fg); background:var(--panel2);
    border:1px solid var(--line); border-radius:9px; padding:9px 11px}
  .sel-inline{font:inherit; font-weight:600; color:var(--fg); background:var(--panel2);
    border:1px solid var(--line); border-radius:8px; padding:6px 9px}
  .mel-ta{width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px;
    color:var(--fg); background:var(--panel2); border:1px solid var(--line);
    border-radius:10px; padding:10px; min-height:60px; resize:vertical; margin:4px 0 2px}

  /* storefront */
  .store{border:1px solid var(--line); background:
      radial-gradient(120% 180px at 0% -40px, rgba(255,120,26,.14), transparent 60%), var(--panel)}
  .store-card{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
  .store-thumb{position:relative; flex:0 0 96px; width:96px; height:96px; border-radius:12px;
    overflow:hidden; background:var(--panel2); border:1px solid var(--line);
    display:grid; place-items:center}
  .store-thumb img{width:100%; height:100%; object-fit:cover; display:block}
  .store-thumb svg{width:52px; height:52px}
  .store-badge{position:absolute; top:4px; left:4px; background:var(--orange2); color:#1b1512;
    font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
    padding:2px 5px; border-radius:6px}
  .store-tag{display:inline-block; vertical-align:middle; margin-left:6px; background:var(--panel2);
    border:1px solid var(--orange2); color:var(--orange2); font-size:10px; font-weight:800;
    letter-spacing:.4px; text-transform:uppercase; padding:1px 6px; border-radius:999px}
  .store-divider{height:1px; background:var(--line); margin:16px 0}
  .store-body{flex:1 1 220px; min-width:0}
  .store-name{font-weight:700; font-size:16px}
  .store-desc{font-size:13px; color:var(--mut); margin:3px 0 0}
  .store-price{font-family:"Archivo Black",system-ui,sans-serif; font-size:22px;
    color:var(--orange2); margin-top:8px; letter-spacing:.4px}
  .store-price .cents{font-size:14px; vertical-align:top; margin-left:1px}
  .store-buy{display:flex; align-items:center; gap:10px; flex:0 0 auto; flex-wrap:wrap}
  .qty{display:flex; align-items:center; gap:8px; background:var(--panel2);
    border:1px solid var(--line); border-radius:10px; padding:4px}
  .qty button{width:30px; height:30px; border:0; border-radius:7px; background:var(--panel);
    color:var(--fg); font-size:18px; font-weight:700; cursor:pointer; line-height:1}
  .qty button:hover{background:var(--line)}
  .qty span{min-width:20px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}
  .store-msg{font-size:12.5px; margin:10px 2px 0; min-height:1px}
  .store-msg.ok{color:var(--teal)} .store-msg.err{color:var(--red)}
  .store-secure{font-size:11px; color:var(--faint); margin-top:8px; display:flex;
    align-items:center; gap:6px}

  .hidden{display:none}