/* ClawMaster web — acciaio notturno (stesso tema del player, niente modalità chiara) */
:root { --fondo:#0b0c0d; --pannello:#131416; --bordo:#2a2d31; --testo:#c9c7c2; --tenue:#8a9098;
  --t1:#ffe7a3; --t2:#ffc247; --t3:#ff8a1f; --t4:#e0452b;
  --metallo: linear-gradient(180deg,#1d1f22,#141517); }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin:0; background:var(--fondo); color:var(--testo); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--t2); }
.barra { display:flex; align-items:center; gap:16px; padding:10px 16px; background:var(--metallo); border-bottom:1px solid #060607; flex-wrap:wrap; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--testo); font-weight:800; letter-spacing:.16em; }
.logo svg { width:32px; height:32px; }
.logo small { font-size:10px; letter-spacing:.2em; color:var(--tenue); margin-left:6px; }
.barra nav { margin-left:auto; display:flex; gap:14px; align-items:center; }
.barra nav form { margin:0; }
main { max-width:1100px; margin:0 auto; padding:16px; }
.pannello { background:var(--metallo); border:1px solid #060607; border-radius:10px; padding:16px 18px; margin:14px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); overflow-x:auto; }
.pannello.stretto { max-width:440px; margin:40px auto; }
h1 { color:var(--t2); font-size:22px; margin:0 0 8px; }
h2 { color:var(--t2); font-size:16px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 10px; }
label { display:block; margin:10px 0; color:var(--tenue); font-size:14px; }
label input { display:block; width:100%; margin-top:4px; }
label.casella { display:flex; gap:8px; align-items:center; }
label.casella input { width:auto; margin:0; }
input { background:#0b0c0e; color:var(--testo); border:1px solid var(--bordo); border-radius:6px; padding:8px 10px; font:inherit; }
input:focus { outline:2px solid var(--t3); outline-offset:1px; }
button, .bottone { background:linear-gradient(180deg,#2a2d31,#1c1e21); color:var(--testo); border:1px solid #060607; border-radius:8px;
  padding:8px 14px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover, .bottone:hover { color:var(--t1); }
.go { background:linear-gradient(180deg,#e0a33a,#c46a1a); color:#1d0c02; border-color:#5a2f08; }
.go:hover { color:#000; }
.piccolo { padding:3px 9px; font-size:13px; }
.pericolo { color:#ff9b8f; }
.riga { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.riga label { flex:1 1 180px; margin:0; }
.in-linea { display:inline-flex; gap:4px; margin:2px 0; }
.in-linea input { padding:3px 6px; font-size:13px; width:auto; }
.in-linea input[type=number] { width:56px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; color:var(--tenue); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:6px; border-bottom:1px solid var(--bordo); }
td { padding:8px 6px; border-bottom:1px solid #1c1e21; vertical-align:top; }
.pc { white-space:nowrap; }
.nota { color:var(--tenue); font-size:13px; }
.avviso { padding:10px 14px; border-radius:8px; border:1px solid var(--bordo); background:#15171a; }
.avviso.errore { border-color:#5a1f1a; color:#ff9b8f; }
.avviso.ok { border-color:#1f4a2c; color:#9fe3b6; }
.licenza.valida { color:#9fe3b6; } .licenza.sospesa, .licenza.scaduta { color:#ff9b8f; } .licenza.invitato { color:var(--t2); }
.invito { border-color:#5a2f08; }
input.link { width:min(100%,620px); font-family:ui-monospace,monospace; font-size:13px; }
code { color:#e6c7a0; }
footer { text-align:center; color:#555a61; font-size:12px; padding:30px 0; }
.recupero { color: var(--t2); font-size: 13px; margin-top: 4px; }