:root { --bg:#f6f4ef; --card:#fff; --ink:#1d2523; --muted:#6b7673; --brand:#1f4d4a; --line:#e3dfd6; --warn:#a4561a; --bad:#a32d2d; --ok:#2d7a4f; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
body { padding-bottom: env(safe-area-inset-bottom); }
header { position:sticky; top:0; z-index:5; background:var(--brand); color:#fff; padding:calc(env(safe-area-inset-top) + 10px) 14px 0; }
header .top { display:flex; justify-content:space-between; align-items:center; padding-bottom:8px; }
header h1 { font-size:18px; margin:0; font-weight:600; }
header button.link { background:none; border:0; color:#cfe0de; font-size:14px; padding:6px; }
.tabs { display:flex; gap:4px; }
.tabs button { flex:1; background:none; border:0; color:#cfe0de; padding:10px 4px; font-size:15px; border-bottom:3px solid transparent; }
.tabs button.on { color:#fff; border-bottom-color:#fff; font-weight:600; }
main { padding:12px; max-width:720px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:14px; }
.card h2 { font-size:16px; margin:0 0 6px; }
.badge { display:inline-block; font-size:12px; padding:2px 8px; border-radius:99px; background:#e8efee; color:var(--brand); margin-right:6px; }
.badge.promo { background:#fbeede; color:var(--warn); }
.badge.err { background:#f8e1e1; color:var(--bad); }
.badge.ok { background:#e0f0e6; color:var(--ok); }
.version { border-top:1px solid var(--line); margin-top:12px; padding-top:12px; }
.version:first-of-type { border-top:0; }
.ch { font-weight:600; font-size:14px; margin-bottom:6px; display:flex; justify-content:space-between; }
.ch small { font-weight:400; color:var(--muted); }
textarea, input[type=text], input[type=email], input[type=password], input[type=datetime-local] { width:100%; font:inherit; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
textarea { min-height:140px; resize:none; line-height:1.4; }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
.row { display:flex; gap:8px; margin-top:12px; }
button.btn { flex:1; padding:12px; border-radius:10px; border:1px solid var(--line); background:#fff; font:inherit; font-weight:600; color:var(--ink); }
button.btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; }
button.btn.danger { color:var(--bad); }
button.btn:disabled { opacity:.5; }
.img { margin-top:10px; }
.img img { width:100%; max-height:320px; object-fit:cover; border-radius:10px; display:block; border:1px solid var(--line); }
.brief { font-size:13px; color:var(--muted); background:#f3f1ea; border-radius:8px; padding:8px 10px; margin-bottom:8px; }
.banner { background:#fff8e8; border:1px solid #f0dfb5; border-radius:12px; padding:12px; margin-bottom:14px; font-size:14px; }
.banner button { margin-top:8px; }
.empty { text-align:center; color:var(--muted); padding:40px 10px; }
.err { color:var(--bad); font-size:14px; margin-top:8px; }
.login { max-width:380px; margin:12vh auto; padding:0 16px; }
.login h1 { color:var(--brand); }
.small { font-size:13px; color:var(--muted); }
.pre { white-space:pre-wrap; font-size:14px; color:#333; }

/* cruscotto */
.chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:10px; margin-bottom:6px; }
.chip { flex:0 0 auto; border:1px solid var(--line); background:#fff; border-radius:99px; padding:8px 14px; font:inherit; font-size:14px; color:var(--ink); }
.chip.on { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.field { margin-bottom:12px; }
.field label { margin:0 0 4px; }
.hint { font-size:12.5px; color:var(--muted); margin-top:4px; }
textarea.cfg { min-height:80px; resize:vertical; }
select { width:100%; font:inherit; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
input[type=number], input[type=url], input[type=date] { width:100%; font:inherit; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
input[type=range] { width:100%; }
.check { display:flex; align-items:center; gap:8px; margin:8px 0; color:var(--ink); font-size:15px; }
.check input { width:20px; height:20px; }
.rowcard { border:1px solid var(--line); border-radius:12px; padding:12px; margin:10px 0; background:#fcfbf8; }
.rowcard .btn { margin-top:4px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.spin { background:#fff8e8; border:1px solid #f0dfb5; border-radius:12px; padding:10px 12px; margin:8px 0 12px; }
.item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
.item.col { flex-direction:column; align-items:stretch; }
.item select { width:auto; max-width:46%; flex:0 0 auto; }
.item .btn { flex:0 0 auto; padding:8px 12px; }
.itit { font-size:14px; flex:1; min-width:0; overflow-wrap:anywhere; }
.toast { position:fixed; left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom) + 14px); max-width:520px; margin:0 auto; background:var(--ink); color:#fff; padding:12px 14px; border-radius:12px; z-index:50; font-size:14px; }
.toast.bad { background:var(--bad); }
.genpanel { margin-top:10px; padding:10px; border:1px dashed var(--line); border-radius:10px; background:#fcfbf8; }