:root{
  --nero:#0D1013; --grafite:#171C21; --raise:#1E252B;
  --bianco:#F2F3F1; --ardesia:#7C858D; --ottone:#C4933A; --rosso:#D8382C;
  --linea:rgba(196,147,58,.22);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--nero);color:var(--bianco);
  font-family:Inter,ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(28px + var(--safe-b));
}

/* ---------- testata ---------- */
.top{padding:14px 16px;border-bottom:1px solid var(--linea);}
.brand{display:flex;align-items:center;gap:11px;}
.mark{width:34px;height:34px;border-radius:50%;flex:none;
      border:3px solid var(--ottone);position:relative;}
.mark::after{content:"";position:absolute;inset:7px;border:2px solid var(--ottone);
             transform:rotate(45deg);}
.brand-txt{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.15;}
.brand-txt b{display:block;font-size:10.5px;font-weight:500;letter-spacing:.18em;color:var(--ardesia);}

/* ---------- tab ---------- */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;
      border-bottom:1px solid var(--linea);scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{flex:none;background:var(--grafite);color:var(--ardesia);border:1px solid transparent;
     font:600 13px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;
     padding:11px 15px;cursor:pointer;white-space:nowrap;border-radius:2px;}
.tab[aria-selected="true"]{background:var(--ottone);color:var(--nero);}
.tab:focus-visible{outline:2px solid var(--ottone);outline-offset:2px;}

/* ---------- palco ---------- */
main{max-width:1080px;margin:0 auto;padding:0 16px;}
.stage{padding:18px 0 6px;}
.canvas-wrap{display:flex;justify-content:center;}
canvas{
  max-width:100%;
  border:1px solid var(--linea);background:var(--nero);display:block;
}
.actions{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px;}
.btn-main{
  background:var(--ottone);color:var(--nero);border:0;border-radius:2px;
  font:800 15px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  padding:16px 34px;cursor:pointer;width:100%;max-width:340px;
}
.btn-main:active{transform:translateY(1px);}
.btn-main:focus-visible{outline:2px solid var(--bianco);outline-offset:3px;}
.hint{font-size:12.5px;color:var(--ardesia);text-align:center;}

/* ---------- pannello campi ---------- */
.panel{padding:20px 0 40px;}
.match-picker{background:var(--grafite);border:1px solid var(--linea);padding:16px;margin-bottom:20px;}
.note-sm{font-size:12px;color:var(--ardesia);margin-top:8px;line-height:1.45;}
form{display:flex;flex-direction:column;gap:15px;}
.field{display:flex;flex-direction:column;gap:6px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ottone);}
input,select,textarea{
  background:var(--grafite);color:var(--bianco);border:1px solid var(--linea);
  font:500 16px/1.4 Inter,sans-serif;padding:13px 12px;border-radius:2px;width:100%;
  -webkit-appearance:none;appearance:none;
}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ottone) 50%),
       linear-gradient(135deg,var(--ottone) 50%,transparent 50%);
       background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;
       background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px;}
textarea{min-height:150px;resize:vertical;font-family:ui-monospace,Menlo,monospace;font-size:14px;line-height:1.7;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ottone);}
.help{font-size:12px;color:var(--ardesia);line-height:1.45;}

.foot{border-top:1px solid var(--linea);padding:18px 16px;text-align:center;
      font-size:11.5px;letter-spacing:.08em;color:var(--ardesia);}

@media(min-width:900px){
  main{display:grid;grid-template-columns:1fr 380px;gap:34px;align-items:start;
       max-width:1180px;padding:0 24px;}
  .stage{position:sticky;top:16px;padding-top:24px;}
  .panel{padding-top:24px;}
}