/* app.css — stile del builder (non delle app generate, che usano templates/static-v1/design.css). */
:root {
  --accent: #1f4dff;
  --accent-soft: #e8efff;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --ink: #171a20;
  --muted: #5d6675;
  --line: #dde1e8;
  --danger: #b42318;
  --ok: #067647;
  --warn: #b54708;
  --surface-2: #f8f9fb;
  --hover: #f1f3f6;
  --chip: #eef0f3;
  --danger-soft: #fef3f2;
  --danger-line: #fecdca;
  --ok-soft: #e7f6ee;
  --ok-line: #b7e4cb;
  --warn-soft: #fff4e5;
  --queued-bg: #fff8e8;
  --queued-line: #f3dca6;
  --stage: #e9ebef;
  --brand-ink: #0b1220;
  --placeholder: #8a93a3;
  --shadow: 0 12px 32px rgba(16, 24, 40, .16);
  color-scheme: light;
  --radius: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}
:root[data-theme="dark"] {
  --accent: #6d8bff;
  --accent-soft: #1d2645;
  --bg: #0f1218;
  --surface: #171b23;
  --ink: #e6e8ee;
  --muted: #9aa3b2;
  --line: #2b3240;
  --danger: #f97066;
  --ok: #47cd89;
  --warn: #fdb022;
  --surface-2: #1c212b;
  --hover: #232937;
  --chip: #262c39;
  --danger-soft: #2d1716;
  --danger-line: #5a2420;
  --ok-soft: #0f2a1d;
  --ok-line: #1d4d33;
  --warn-soft: #2e2210;
  --queued-bg: #2a2312;
  --queued-line: #5a4720;
  --stage: #0b0e13;
  --brand-ink: #f2f4f8;
  --placeholder: #6b7384;
  --shadow: 0 12px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("fonts/outfit-500.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("fonts/outfit-600.woff2") format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 var(--font); color: var(--ink); background: var(--bg); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.1rem; } h3 { font-size: 1.05rem; }
p { margin: 0; }
a { color: var(--accent); }
.muted { color: var(--muted); } .small { font-size: .85rem; } .hidden { display: none !important; }
.stack { display: flex; flex-direction: column; gap: .9rem; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.between { justify-content: space-between; } .end { justify-content: flex-end; }

/* Barra superiore */
.top { display: flex; align-items: center; gap: 1.5rem; height: 52px; padding: 0 1rem; background: var(--surface); border-bottom: 1px solid var(--line); }
/* Marchio PrestoWeb App Builder: simbolo + scritta in Outfit, con i colori del logo (blu e arancione) */
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand img, .auth-logo img { display: block; }
.brand-word { font-family: "Outfit", var(--font); font-weight: 500; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1; color: var(--brand-ink); white-space: nowrap; }
.brand-word .w { color: #1f4dff; }
:root[data-theme="dark"] .brand-word .w { color: #7b95ff; }
.brand-word .a { color: #ff5a3c; font-weight: 600; }
.auth-logo { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; margin-bottom: 1.5rem; }
.auth-logo .brand-word { font-size: 2rem; }
.top-nav { display: flex; gap: 1rem; flex: 1; min-width: 0; }
.top-nav a { color: var(--ink); text-decoration: none; }
.top-nav a:hover { color: var(--accent); }

/* Controlli */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  padding: .55rem 1rem; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius); }
.btn:hover { filter: brightness(.93); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn[hidden] { display: none; }
.btn-ghost { color: var(--ink); background: var(--surface); border-color: var(--line); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-sm { padding: .3rem .65rem; font-size: .85rem; }
.danger { color: var(--danger); }
.input, textarea, select { font: inherit; width: 100%; padding: .55rem .7rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .9rem; }
label .input, label .muted { font-weight: 400; }
:focus-visible { outline: 3px solid #93b4ff; outline-offset: 1px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; }
.alert { padding: .6rem .8rem; color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: var(--radius); }
.pill { display: inline-block; padding: .1rem .55rem; font-size: .78rem; font-weight: 600; border-radius: 999px; background: var(--chip); color: var(--muted); }
.pill-deployed { background: var(--ok-soft); color: var(--ok); }
.pill-generating { background: var(--warn-soft); color: var(--warn); }
.pill-failed { background: var(--danger-soft); color: var(--danger); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.seg-btn { font: inherit; font-size: .85rem; padding: .3rem .7rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.seg-btn.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* Pagine */
.page { max-width: 1040px; margin: 0 auto; padding: 2rem 1rem 4rem; display: flex; flex-direction: column; gap: 1.5rem; }
.page.wide { max-width: 1320px; }
.pad-x { padding: 0 1rem 1rem; align-items: flex-end; }
.notice { padding: .6rem .8rem; color: var(--ok); background: var(--ok-soft); border: 1px solid var(--ok-line); border-radius: var(--radius); }
.auth { display: grid; place-content: center; justify-items: center; min-height: calc(100vh - 52px); padding: 1rem; }
.auth .card { width: 100%; max-width: 380px; }
.hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .75rem; padding-top: 1rem; }
.prompt { width: 100%; max-width: 680px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .75rem; text-align: left; }
.prompt:focus-within { border-color: var(--accent); }
.prompt textarea { border: 0; resize: none; padding: .25rem; }
.prompt textarea:focus { outline: none; }
.prompt-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .5rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; }
.filters { display: flex; gap: .5rem; }
.filters .input { width: auto; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .6rem 1rem; background: var(--surface-2); border-block: 1px solid var(--line); white-space: nowrap; }
.table td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.table tr:last-child td { border-bottom: 0; }
.app-name { display: block; font-weight: 600; color: var(--ink); text-decoration: none; }
.app-name:hover { color: var(--accent); }
/* La cella Azioni resta una cella di tabella (con display:flex i bordi della riga si sfasano): i pulsanti vanno in linea. */
.actions:not(td) { display: flex; flex-wrap: wrap; gap: .4rem; }
td.actions { max-width: none; white-space: nowrap; }
td.actions > * { display: inline-block; margin: .2rem .35rem .2rem 0; vertical-align: middle; }
.empty { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; }
.kpi strong { font-size: 1.7rem; }
.kpi span { color: var(--muted); font-size: .85rem; }

/* Finestre di dialogo e tooltip */
dialog { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; width: min(440px, calc(100vw - 2rem)); }
dialog::backdrop { background: rgba(16, 24, 40, .45); }
.tip { position: fixed; z-index: 1000; max-width: 300px; padding: .45rem .65rem; font-size: .8rem; line-height: 1.4; color: #fff; background: #1f2430; border-radius: 6px; pointer-events: none; opacity: 0; visibility: hidden; }
.tip.on { opacity: 1; visibility: visible; }

/* Builder */
body.full { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
#builder { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 400px) 1fr; }
.chat { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-right: 1px solid var(--line); }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.chat-scroll { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .9rem; }
.chat-empty { margin: auto 0; text-align: center; }
.msg { display: flex; flex-direction: column; gap: .4rem; max-width: 100%; }
.msg-user { align-self: flex-end; max-width: 88%; padding: .5rem .75rem; background: var(--accent-soft); border-radius: 12px 12px 2px 12px; }
.msg-body { overflow-wrap: anywhere; }
.msg-body p + p, .msg-body ul, .msg-body pre { margin-top: .5rem; }
.msg-body ul { margin-bottom: 0; padding-left: 1.2rem; }
.msg-body code { font-family: var(--mono); font-size: .85em; background: var(--chip); padding: .05rem .3rem; border-radius: 4px; }
.msg-body pre { background: #1f2430; color: #e6e8ee; padding: .6rem; border-radius: var(--radius); overflow-x: auto; }
.msg-body pre code { background: none; padding: 0; }
.msg.live .status::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; border-radius: 50%; background: var(--warn); animation: pulse 1s infinite alternate; }
@keyframes pulse { to { opacity: .25; } }
.todo, .toollog, .worklog ul, .versions, .files-tree { list-style: none; margin: 0; padding: 0; }
.todo { display: flex; flex-direction: column; gap: .2rem; }
.todo:empty, .toollog:empty { display: none; }
.todo li::before { content: "○ "; color: var(--muted); }
.todo li.todo-in_progress { font-weight: 600; }
.todo li.todo-in_progress::before { content: "◐ "; color: var(--warn); }
.todo li.todo-done { color: var(--muted); }
.todo li.todo-done::before { content: "✓ "; color: var(--ok); }
.toollog, .worklog { font-family: var(--mono); font-size: .78rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .6rem; }
.toollog li.ok::before { content: "✓ "; color: var(--ok); }
.toollog li.ko::before { content: "✕ "; color: var(--danger); }
.toollog li.pending::before { content: "… "; }
.worklog summary { cursor: pointer; font-family: var(--font); }
/* Prima build: non c'è ancora nulla da mostrare, la chat occupa tutta la larghezza. */
#builder.first { grid-template-columns: 1fr; }
#builder.first .work { display: none; }
#builder.first .chat { border-right: 0; }
#builder.first .chat-head, #builder.first .chat-scroll, #builder.first .composer { width: 100%; max-width: 860px; margin-inline: auto; }
/* Striscia di fase */
.phases { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; font-size: .78rem; color: var(--muted); }
.phases li + li::before { content: "›"; margin-right: .3rem; color: var(--line); }
.phases li.past { color: var(--ok); }
.phases li.now { color: var(--ink); font-weight: 700; }
.todo-head { font-weight: 600; }
.toollog-static { list-style: none; margin: .4rem 0 0; padding: 0; }
.toollog-static li.ok::before { content: "✓ "; color: var(--ok); }
.toollog-static li.ko::before { content: "✕ "; color: var(--danger); }
.suggestions { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { font: inherit; font-size: .82rem; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.queued { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; background: var(--queued-bg); border: 1px solid var(--queued-line); border-radius: var(--radius); font-size: .85rem; }
.queued #queued-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Area di rilascio durante il trascinamento di un file */
.chat { position: relative; }
.chat.dropping::after { content: "Rilascia qui per allegare"; position: absolute; inset: .5rem; z-index: 5; display: grid; place-items: center;
  font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 92%, transparent); border: 2px dashed var(--accent); border-radius: 12px; pointer-events: none; }
.prompt.dropping { border-color: var(--accent); border-style: dashed; background: var(--accent-soft); }
.attached { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.file-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; font-size: .8rem; background: var(--chip); border-radius: 999px; }
.file-chip button { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--muted); }
.msg-files { display: flex; flex-wrap: wrap; gap: .3rem; }
.attach-line { flex-direction: row; align-items: center; gap: .6rem; font-weight: 400; color: var(--muted); padding: .4rem .25rem 0; }
.attach-line input { font-size: .8rem; }
.error { color: var(--danger); }
.file-image { max-width: 100%; max-height: 100%; padding: 1rem; object-fit: contain; }
.composer { border-top: 1px solid var(--line); padding: .6rem; display: flex; flex-direction: column; gap: .5rem; }
.composer textarea { resize: none; }
.composer-foot { display: flex; align-items: center; gap: .5rem; }
.composer-foot #send-btn { margin-left: auto; }
.work { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tabs { display: flex; align-items: center; gap: .25rem; padding: .4rem .6rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.tab { font: inherit; padding: .35rem .75rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); cursor: pointer; }
.tab:hover { background: var(--hover); }
.tab.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tabs-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.tab-pane { flex: 1; min-height: 0; overflow: auto; }
#tab-preview { display: flex; justify-content: center; background: var(--stage); }
#preview-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.pad { padding: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.versions li { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .5rem; }
.version-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files { display: grid; grid-template-columns: 240px 1fr; height: 100%; }
.files-tree { overflow-y: auto; padding: .5rem; background: var(--surface); border-right: 1px solid var(--line); }
.file { width: 100%; text-align: left; font: .82rem var(--mono); padding: .3rem .5rem; border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: var(--ink); }
.file:hover { background: var(--hover); } .file.on { background: var(--accent-soft); color: var(--accent); }
.files-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#code-crumb { padding: .4rem .75rem; background: var(--surface); border-bottom: 1px solid var(--line); }
#code-host { flex: 1; min-height: 0; overflow: auto; }
.code-plain { margin: 0; padding: .75rem; font: .82rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Riquadro di scrittura: lo stesso nella dashboard e nel builder ──────── */
.cbox { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .7rem .7rem .55rem; text-align: left;
  /* bordo sfumato con i colori del marchio: sfondo pieno dentro, sfumatura nel bordo */
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, #1f4dff, #8a6bff 45%, #ff5a3c) border-box;
  border: 1.5px solid transparent; border-radius: 16px; box-shadow: 0 6px 24px rgba(31, 77, 255, .10); transition: box-shadow .15s; }
.cbox:focus-within { box-shadow: 0 0 0 3px rgba(31, 77, 255, .18), 0 8px 30px rgba(31, 77, 255, .16); }
.cbox.dropping, form.dropping.cbox { background: linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box, linear-gradient(120deg, #1f4dff, #ff5a3c) border-box; border-style: dashed; }
.cbox textarea { display: block; width: 100%; min-height: 2.9rem; max-height: 40vh; padding: .2rem .3rem; font: inherit; font-size: 1rem; line-height: 1.5;
  color: var(--ink); background: transparent; border: 0; border-radius: 0; resize: none; overflow-y: auto; }
.cbox textarea:focus, .cbox textarea:focus-visible { outline: none; }
.cbox textarea::placeholder { color: var(--placeholder); }
.cbox-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; padding: 0 .2rem; }
.cbox-chips[hidden] { display: none; }
.cbox-foot { display: flex; align-items: center; gap: .5rem; min-height: 38px; }
.cbox-actions { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; }
.icon-btn, .send-btn, .stop-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; flex: none; }
.icon-btn[hidden] { display: none; }
.icon-btn.unavailable { opacity: .45; }
.icon-btn { color: var(--muted); background: transparent; }
.icon-btn:hover { color: var(--ink); background: var(--chip); }
/* microfono in ascolto */
.icon-btn[aria-pressed="true"] { color: #fff; background: var(--danger); animation: listen 1.2s ease-in-out infinite; }
.icon-btn.busy { color: var(--accent); background: var(--accent-soft); cursor: progress; }
.icon-btn.busy svg { animation: spin .9s linear infinite; }
@keyframes listen { 50% { box-shadow: 0 0 0 6px rgba(180, 35, 24, .18); } }
.send-btn { color: #fff; background: var(--accent); }
.send-btn:hover { filter: brightness(.93); }
.send-btn:disabled { opacity: .35; cursor: not-allowed; filter: none; }
.send-btn .i-send, .send-btn .i-busy { display: grid; }
.send-btn .i-busy { display: none; }
form[data-sent] .send-btn:disabled { opacity: 1; }
form[data-sent] .send-btn .i-send { display: none; }
form[data-sent] .send-btn .i-busy { display: grid; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stop-btn { color: #fff; background: var(--danger); }
.stop-btn:hover { filter: brightness(.93); }
/* Misura del riquadro principale: 860 px di larghezza e circa 160 di altezza a riposo; poi cresce con il testo. */
.cbox-hero { width: 100%; max-width: 860px; padding: .9rem .9rem .7rem; }
.cbox-hero textarea { min-height: 5.6rem; font-size: 1.08rem; }
.hero-title { min-height: 2.5em; display: grid; place-items: center; text-wrap: balance; transition: opacity .25s, transform .25s; }
.hero-title.swap { opacity: 0; transform: translateY(6px); }
.composer .cbox { border-radius: 14px; }
.composer .seg-btn { padding: .3rem .6rem; }


/* ── Collega un'AI (dashboard), consenso OAuth e AI collegate ─────────── */
.ai-connect { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: .4rem; }
.ai-connect-label { font-weight: 600; font-size: .92rem; }
.ai-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.ai-chip:hover, .ai-chip[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.ai-dot { width: 10px; height: 10px; border-radius: 50%; }
.ai-dot-chatgpt { background: #10a37f; }
.ai-dot-claude { background: #d97757; }
.ai-more { left: 0; right: auto; min-width: 200px; }
dialog.ai-dialog { width: min(560px, calc(100vw - 2rem)); padding: 0; text-align: left; }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.ai-head .icon-btn { font-size: 1.4rem; }
.ai-steps { display: flex; justify-content: space-between; margin: 0; padding: 1.1rem 3rem .4rem; list-style: none; position: relative; }
.ai-steps::before { content: ""; position: absolute; top: calc(1.1rem + 14px); left: calc(3rem + 30px); right: calc(3rem + 30px); height: 2px; background: var(--line); }
.ai-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 60px; font-size: .8rem; color: var(--muted); }
.ai-steps span { display: grid; place-items: center; width: 28px; height: 28px; font-weight: 700; background: var(--surface); border: 2px solid var(--line); border-radius: 50%; }
.ai-steps li.on { color: var(--ink); font-weight: 600; }
.ai-steps li.on span { color: #fff; background: var(--accent); border-color: var(--accent); }
.ai-body { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.25rem 1.25rem; }
.ai-body[hidden] { display: none; }
.ai-copy { display: flex; gap: .5rem; }
.ai-copy .input { font-family: var(--mono); font-size: .88rem; }
.ai-example { padding: .6rem .8rem; font-style: italic; background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 6px; }
.ai-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .8rem 1.25rem; background: var(--surface-2); border-top: 1px solid var(--line); }
.consent { max-width: 460px; }
.consent h1 { font-size: 1.25rem; font-weight: 600; }
.consent-logos { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.consent-ai { display: grid; place-items: center; width: 48px; height: 48px; color: var(--accent); background: var(--accent-soft); border-radius: 12px; }
.consent-dots { color: var(--muted); letter-spacing: .2em; }
.consent-list { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.consent-list li { display: flex; align-items: center; gap: .5rem; }
.consent-list svg { flex: none; color: var(--ok); }
.conn-list { margin: 0; padding: 0 1rem 1rem; list-style: none; }
.conn-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.conn-list li > span { display: flex; flex-direction: column; }

.gh-panel { display: flex; flex-direction: column; gap: .6rem; padding: .85rem 1rem; margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.gh-form { display: grid; grid-template-columns: 1fr 10rem auto; gap: .6rem; align-items: end; }
.export-row { margin-bottom: .25rem; }
/* ── Codice in diretta (builder) ──────────────────────────────────────── */
#tab-live { background: #0f1218; }
.live-files { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: .35rem; padding: .55rem .75rem; background: #171b23; border-bottom: 1px solid #2b3240; }
.live-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; font: .8rem var(--mono); color: #9aa3b2; background: transparent; border: 1px solid #2b3240; border-radius: 999px; cursor: pointer; }
.live-chip[aria-selected="true"] { color: #e6e8ee; border-color: #6d8bff; background: #1d2645; }
.live-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fdb022; }
.live-chip.writing::before { animation: pulse 1s infinite alternate; }
.live-chip.ok::before { background: #47cd89; }
.live-chip.ko::before { background: #f97066; }
.live-code { margin: 0; padding: .9rem 1rem 2rem; font: .8rem/1.55 var(--mono); color: #d7dbe3; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.live-code:empty::before { content: "Il codice comparirà qui mentre l'AI scrive i file."; color: #6b7384; }
#builder.running .live-code::after { content: "▍"; color: #6d8bff; animation: pulse .6s infinite alternate; }

/* ── Elenco app: filtro e paginazione (dashboard) ─────────────────────── */
.filter-btn { gap: .4rem; }
.filter-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; font-size: .72rem; color: #fff; background: var(--accent); border-radius: 999px; }
.filter-count[hidden] { display: none; }
.filter-panel { width: 240px; padding: .35rem 0; }
.filter-head { padding: .5rem .9rem .25rem; font-size: .78rem; font-weight: 600; color: var(--muted); }
.filter-head + .filter-opt { margin-top: 0; }
.filter-opt + .filter-head { margin-top: .3rem; border-top: 1px solid var(--line); padding-top: .65rem; }
.filter-opt { flex-direction: row; align-items: center; gap: .55rem; padding: .4rem .9rem; font-weight: 400; font-size: .92rem; cursor: pointer; }
.filter-opt:hover { background: var(--hover); }
.filter-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-deployed { background: var(--ok); }
.dot-generating { background: var(--warn); }
.dot-failed { background: var(--danger); }
.dot-new { background: var(--accent); }
.filter-foot { display: flex; justify-content: flex-end; padding: .55rem .9rem .3rem; margin-top: .3rem; border-top: 1px solid var(--line); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: .75rem 1rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.pager label { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; font-size: .9rem; }
.pager select.input { width: auto; padding: .3rem .5rem; }
.pager-nav { display: flex; align-items: center; gap: .4rem; }
.pager-count { margin-right: .4rem; }
.pager-count b { color: var(--ink); font-weight: 600; }
.pager-btn { width: 32px; height: 32px; font-size: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-page .input { width: 4.2rem; padding: .3rem .5rem; text-align: center; }

/* ── Scheda Variabili (builder) ───────────────────────────────────────── */
.secrets h2 { margin-bottom: .3rem; }
.secret-list { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.secret-list li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.secret-list li > div:nth-child(2) { grid-column: 1; }
.secret-list li > .secret-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: .4rem; }
.secret-main { display: flex; align-items: center; gap: .6rem; }
.secret-name { font-weight: 600; }
.secret-form { display: flex; flex-direction: column; gap: .8rem; padding: 1rem; }
.mono { font-family: var(--mono); }

/* ── Connettori (builder) e pannello laterale ─────────────────────────── */
.info-box { padding: .75rem .9rem; font-size: .9rem; color: var(--ink); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--radius); }
.connectors-group { margin-top: .4rem; }
.connector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .8rem; }
.connector-card { display: flex; align-items: flex-start; gap: .8rem; padding: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.connector-text { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.connector-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; font-weight: 800; color: #fff; border-radius: 9px; }
.ci-signin { background: #4285f4; } .ci-sheets { background: #0f9d58; } .ci-calendar { background: #1a73e8; }
.ci-drive { background: #f4b400; } .ci-gmail { background: #ea4335; }
.ci-stripe { background: #635bff; } .ci-paypal { background: #003087; } .ci-resend { background: #111827; }
.pay-list li > span:last-child { white-space: nowrap; }
.ok-text { color: var(--ok); }
dialog.drawer { position: fixed; inset: 0 0 0 auto; width: min(720px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
dialog.drawer[open] { display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.drawer-head .icon-btn { font-size: 1.4rem; }
.drawer-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.1rem 1.25rem; }
.drawer-steps ol { display: flex; flex-direction: column; gap: .55rem; margin: .5rem 0 .6rem; padding-left: 1.2rem; font-size: .92rem; }
.drawer-foot { display: flex; align-items: center; gap: .5rem; padding: .8rem 1.25rem; background: var(--surface-2); border-top: 1px solid var(--line); }
.drawer-spacer { flex: 1; }
.btn-danger-text { color: var(--danger); }
.connector-col { padding-left: 0; }
.connector-why { display: flex; flex-direction: column; gap: .45rem; }
.connector-why p { margin: 0; }
.connector-settings h3 { margin: 0; }
.rule { padding: .5rem .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.rule summary { list-style: none; cursor: pointer; }
.rule summary::-webkit-details-marker { display: none; }
.rule summary .filter-opt { padding: .2rem 0; }
.rule[open] summary { margin-bottom: .6rem; }
.rule textarea { min-height: 8rem; }

/* ── Impostazioni: piano, uso dell'AI, fuso orario ─────────────────────── */
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; flex-wrap: wrap; }
.plan-name { font-size: 1.15rem; }
.limit-cards .kpi strong { font-size: 1.35rem; }
.runs-filter { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .4rem; }
.runs-filter label { flex: 1 1 14rem; min-width: 0; }
.filters.runs-filter .input { flex: none; width: 100%; }
.kpis.pad-x, .pad-x.stack { align-items: stretch; }
.period-form select { width: auto; }
.tz-form { align-items: flex-end; flex-wrap: wrap; }
.tz-label { flex: 1 1 18rem; }
time[data-tip] { text-decoration: underline dotted color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }

.menu-btn, .mobile-switch, .nav-help { display: none; }

/* ── Intestazione: Upgrade, crediti, aiuto, notifiche, account ───────────── */
.top-right { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.pop { position: relative; }
.pop-panel { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 230px; padding: .35rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.pop-panel.open { display: block; }
.pop-menu a, .pop-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; font: inherit; font-size: .92rem;
  color: var(--ink); text-align: left; text-decoration: none; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.pop-menu a:hover, .pop-menu button:hover { background: var(--hover); }
.pop-menu svg { flex: none; color: var(--muted); }
.icon-btn[aria-expanded="true"] { color: var(--ink); background: var(--chip); }
.btn-upgrade { background: #ff5a3c; border-color: #ff5a3c; }
.credits-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; font: inherit; font-size: .85rem; white-space: nowrap;
  color: var(--muted); text-decoration: none; background: var(--chip); border: 0; border-radius: 999px; cursor: pointer; }
.credits-pill b { color: var(--ink); }
.credits-pill:hover { color: var(--ink); }
.bell { position: relative; }
.badge { position: absolute; top: 2px; right: 1px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  font-size: .68rem; font-weight: 700; line-height: 1; color: #fff; background: #ff5a3c; border: 2px solid var(--surface); border-radius: 999px; }
.user-btn { display: inline-flex; align-items: center; gap: .45rem; max-width: 220px; padding: .2rem .45rem .2rem .2rem; font: inherit; font-size: .92rem;
  color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; }
.user-btn:hover, .user-btn[aria-expanded="true"] { background: var(--hover); }
.user-btn svg { flex: none; color: var(--muted); }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; font-size: .78rem; font-weight: 700;
  color: #fff; background: var(--accent); border-radius: 50%; }
.user-panel { width: 300px; padding: 0; }
.user-id { display: flex; flex-direction: column; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.user-id strong, .user-id span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-theme { display: flex; flex-direction: column; gap: .45rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.user-theme .label { font-size: .78rem; font-weight: 600; color: var(--muted); }
.theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); }
.theme-seg .seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .4rem .3rem; }
.seg-btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.user-panel .pop-menu { padding: .35rem; }
.notif-panel { width: 350px; padding: 0; }
.notif-panel h3 { padding: .8rem 1rem; font-size: .95rem; border-bottom: 1px solid var(--line); }
#notif-list { max-height: min(420px, 70vh); overflow-y: auto; padding: .35rem; }
.pop-empty { padding: .8rem; }
.notif { display: flex; gap: .65rem; padding: .6rem .65rem; color: var(--ink); text-decoration: none; border-radius: 8px; }
.notif:hover { background: var(--hover); }
.notif.unread { background: var(--accent-soft); }
.notif-text { display: flex; flex-direction: column; min-width: 0; font-size: .88rem; overflow-wrap: anywhere; }
.notif-mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; font-size: .8rem; font-weight: 700;
  color: var(--ok); background: var(--ok-soft); border-radius: 50%; }
.notif-mark.notif-error { color: var(--danger); background: var(--danger-soft); }

/* ── Finestre dei piani e dei crediti (sul modello di Pabbly) ─────────────── */
dialog.plans { width: min(720px, calc(100vw - 2rem)); padding: 0; overflow: hidden auto; max-height: calc(100vh - 2rem); background: var(--surface-2); }
.plans-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .8rem; padding: 1rem 1.25rem; color: #fff; background: var(--accent); }
.plans-top h2 { flex: 1; font-size: 1.15rem; }
.plans-top .icon-btn { color: #fff; font-size: 1.5rem; }
.plans-top .icon-btn:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.plans-crown { display: grid; place-items: center; width: 40px; height: 40px; color: #ffc53d; background: rgba(255, 255, 255, .16); border-radius: 50%; }
.plans-body { padding: 1.25rem; }
.plans-note { margin-bottom: 1rem; color: var(--muted); }
.period-seg { display: flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; margin-bottom: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.period-seg button { flex: 1 1 auto; padding: .45rem .8rem; font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink); white-space: nowrap; background: none; border: 0; border-radius: 999px; cursor: pointer; }
.period-seg button b { color: var(--accent); }
.period-seg button[aria-pressed="true"] { color: #fff; background: var(--accent); }
.period-seg button[aria-pressed="true"] b { color: #fff; }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; align-items: end; }
.plan { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.plan.popular { border: 2px solid var(--accent); box-shadow: 0 10px 30px rgba(31, 77, 255, .15); }
.plan-band { padding: .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-align: center; text-transform: uppercase; color: #fff; background: var(--accent); }
.plan-in { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1.25rem; text-align: center; }
.plan-in h3 { font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; }
.plan.popular .plan-in h3, .plan.popular .plan-tag { color: var(--accent); }
.plan-icon { display: grid; place-items: center; width: 52px; height: 52px; color: var(--ok); background: var(--ok-soft); border-radius: 10px; }
.plan.popular .plan-icon { color: var(--accent); background: var(--accent-soft); }
.plan-tag { font-weight: 600; }
.plan-price { font-size: 2.2rem; font-weight: 800; line-height: 1.1; }
.plan-price span { margin-left: .2rem; font-size: .85rem; font-weight: 400; color: var(--muted); }
.plan-billed { min-height: 1.3em; }
.plan-in [data-p] { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 100%; }
.plan-in [data-p][hidden] { display: none; }
.plan-btn { width: 100%; margin-top: .4rem; }
.btn-outline { color: var(--accent); background: var(--surface); border: 2px solid var(--accent); }
.plan-btn[aria-disabled] { cursor: default; filter: none; opacity: .75; }
.plan-features { width: 100%; margin-top: .6rem; padding-top: .9rem; text-align: left; border-top: 1px solid var(--line); }
.plan-features h4 { margin: 0 0 .5rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plan-features ul { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; list-style: none; font-size: .88rem; }
.plan-features li { display: flex; align-items: center; gap: .5rem; }
.plan-features svg { flex: none; color: var(--ok); }
dialog.no-features .plan-features { display: none; }
.plans-toggle { margin-top: 1.1rem; text-align: center; }
.plans-toggle .chip { color: var(--accent); border-color: var(--accent); }
.plans-foot { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-top: 1.1rem; text-align: center; }
.packs { grid-template-columns: repeat(3, 1fr); }
.packs .plan-in { gap: .4rem; }
.linklike { padding: 0; font: inherit; color: var(--accent); text-decoration: underline; background: none; border: 0; cursor: pointer; }

/* Fascia del piano Free in cima alla pagina */
.free-band { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .45rem 1rem; font-size: .9rem; color: #fff;
  background: linear-gradient(90deg, #1f4dff, #8a6bff 55%, #ff5a3c); }
.free-band .btn { color: #1f2430; background: #ffc53d; border-color: #ffc53d; }

/* Impostazioni: schede e profilo */
.subtabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--line); }
.subtabs a { padding: .5rem 0; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtabs a.on { color: var(--ink); font-weight: 600; border-color: var(--ink); }
.profile-grid { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 1.25rem; align-items: start; }
.profile-card { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.5rem 1rem; text-align: center; }
.profile-card .alert { width: 100%; text-align: left; }
.avatar-xl { width: 96px; height: 96px; margin-bottom: .4rem; font-size: 2rem; }
img.avatar { object-fit: cover; }
.file-btn { position: relative; flex-direction: row; font-weight: 600; cursor: pointer; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 3px solid #93b4ff; outline-offset: 1px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: start; }
.form-grid > .alert, .form-grid .span-2, .form-grid .form-end { grid-column: 1 / -1; }
.form-end { display: flex; justify-content: flex-end; }
.plan-panel .pad-x { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; }

/* ── Schermi stretti: telefono e tablet in verticale ─────────────────────── */
@media (max-width: 860px) {
  /* Intestazione: logo, e il resto in un menu a comparsa */
  .top { position: relative; gap: .75rem; justify-content: space-between; }
  .top .brand-word { font-size: 1.05rem; }
  .menu-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; font-size: 1.3rem; line-height: 1; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
  .menu-btn[aria-expanded="true"] { background: var(--chip); }
  .top-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60; flex-direction: column; gap: 0; padding: .5rem;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .top-nav.open { display: flex; }
  .top-nav .nav-help { display: block; color: var(--muted); }
  .top-nav .nav-help:first-of-type { margin-top: .35rem; border-top: 1px solid var(--line); border-radius: 0; }
  .top-nav a { padding: .8rem .75rem; border-radius: var(--radius); }
  .top-nav a:hover { background: var(--hover); }
  /* A destra restano Upgrade, campanella, avatar e ☰: nome, crediti e aiuto passano nel menu dell'account e nelle Impostazioni */
  .top-right { gap: .15rem; }
  .user-name, .user-btn > svg, .credits-pill, .help-pop { display: none; }
  .user-btn { padding: .2rem; }
  .pop-panel { position: fixed; top: 58px; left: .5rem; right: .5rem; width: auto; }
  .plans-body { padding: 1rem; }
  .period-seg { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; }
  .period-seg button { padding: .45rem .4rem; }
  .period-seg .save-word { display: none; }
  .packs { grid-template-columns: 1fr; }
  .free-more { display: none; }
  .profile-grid, .form-grid { grid-template-columns: 1fr; }
  .subtabs { gap: 1.1rem; }
  .ai-steps { padding-inline: 1.5rem; }
  .ai-steps::before { left: calc(1.5rem + 30px); right: calc(1.5rem + 30px); }
  .ai-copy { flex-direction: column; }
  .gh-form { grid-template-columns: 1fr; }

  /* Pagine */
  .page { padding: 1.25rem .9rem 3rem; gap: 1.1rem; }
  h1 { font-size: 1.4rem; }
  .hero { padding-top: .25rem; }
  .panel-head { padding: .85rem; }
  .filters { width: 100%; flex-wrap: wrap; }
  .filters .input { flex: 1 1 9rem; width: auto; }
  .filter-panel { position: absolute; top: calc(100% + 6px); left: auto; right: 0; width: 240px; }
  .pager { justify-content: center; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .kpi strong { font-size: 1.35rem; }
  /* I campi a 16px evitano lo zoom automatico di iOS quando si tocca un campo */
  .input, textarea, select { font-size: 16px; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }

  /* Tabelle larghe: scorrono in orizzontale dentro il proprio riquadro, senza allargare la pagina */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table-wrap .table:not(.cards) { min-width: 640px; }
  .table th, .table td { padding: .6rem .75rem; }

  /* Elenco delle app: ogni riga diventa una scheda */
  .table.cards thead { display: none; }
  .table.cards, .table.cards tbody, .table.cards tr, .table.cards td { display: block; width: 100%; max-width: none; }
  .table.cards tr { padding: .85rem; border-bottom: 1px solid var(--line); }
  .table.cards tr:last-child { border-bottom: 0; }
  .table.cards td { padding: .2rem 0; border: 0; overflow: visible; }
  .table.cards td[data-label]:not([data-label="App"]) { display: inline-flex; align-items: center; gap: .35rem; width: auto; margin-right: .9rem; }
  .table.cards td[data-label]:not([data-label="App"])::before { content: attr(data-label); font-size: .78rem; color: var(--muted); }
  .table.cards td.actions { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .6rem; white-space: normal; }
  .table.cards td.empty { padding: 1.5rem .5rem; }
  .app-name { font-size: 1.05rem; overflow-wrap: anywhere; }
  .table.cards td a.muted { overflow-wrap: anywhere; }

  /* Builder: un pannello alla volta, a tutta altezza */
  body.full { height: 100vh; height: 100dvh; overflow: hidden; }
  #builder { display: flex; flex-direction: column; min-height: 0; }
  .mobile-switch { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .35rem; background: var(--surface); border-bottom: 1px solid var(--line); }
  .mobile-switch button { font: inherit; font-weight: 600; padding: .5rem; min-height: 40px; color: var(--muted); background: transparent; border: 0; border-radius: var(--radius); cursor: pointer; }
  .mobile-switch button.on { color: var(--accent); background: var(--accent-soft); }
  #builder.first .mobile-switch { display: none; }
  .chat { flex: 1; min-height: 0; height: auto; border-right: 0; border-bottom: 0; }
  .work { display: none; flex: 1; min-height: 0; height: auto; }
  #builder.show-work .chat { display: none; }
  #builder.show-work .work { display: flex; }
  .chat-head { padding: .5rem .75rem; }
  .chat-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-head span { white-space: nowrap; }
  .chat-scroll { padding: .75rem; }
  .msg-user { max-width: 92%; }
  .composer { padding: .5rem; }
  .desktop-only { display: none !important; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab, .tabs-right .btn { white-space: nowrap; flex: 0 0 auto; }
  .tabs { padding: .35rem .4rem; gap: .1rem; }
  .tabs .tab { padding: .4rem .55rem; }
  .tabs-right { padding-left: .5rem; }
  .files { grid-template-columns: 1fr; grid-template-rows: minmax(110px, 32%) 1fr; }
  .files-tree { border-right: 0; border-bottom: 1px solid var(--line); }
  .versions li { flex-wrap: wrap; }
  .version-label { flex: 1 1 100%; white-space: normal; order: 2; }
  dialog { padding: 1rem; }
}

/* Telefono stretto: del marchio resta "PrestoWeb", così nell'intestazione entrano i pulsanti */
@media (max-width: 480px) {
  .top .brand-word .a { display: none; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* Guida utente (/guida) */
.guide { flex-direction: row; align-items: flex-start; gap: 2rem; }
.guide-nav { position: sticky; top: 1rem; flex: 0 0 240px; display: flex; flex-direction: column; gap: 1rem; font-size: .9rem; }
.guide-nav a { display: block; padding: .3rem .6rem; color: var(--ink); text-decoration: none; border-radius: var(--radius); }
.guide-nav a:hover { color: var(--accent); }
.guide-nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.guide-home { display: flex !important; align-items: center; gap: .5rem; font-weight: 700; }
.guide-group { display: flex; flex-direction: column; gap: .1rem; }
.guide-group .label { padding: 0 .6rem .2rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.guide-body { flex: 1; min-width: 0; max-width: 820px; line-height: 1.65; }
.guide-body h1 { margin: 0 0 1rem; font-size: 1.75rem; line-height: 1.25; }
.guide-body h2 { margin: 2rem 0 .6rem; font-size: 1.25rem; }
.guide-body h3 { margin: 1.5rem 0 .5rem; font-size: 1.05rem; }
.guide-body p, .guide-body ul, .guide-body ol { margin: 0 0 1rem; }
.guide-body li { margin: .25rem 0; }
.guide-body code { padding: .1rem .35rem; font-size: .88em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; }
.guide-shot { margin: 1.25rem 0; }
.guide-shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.guide-shot figcaption { margin-top: .4rem; font-size: .82rem; color: var(--muted); text-align: center; }
.guide-note { margin: 1.25rem 0; padding: .8rem 1rem; background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.guide-table { margin: 0 0 1.25rem; font-size: .92rem; }
.guide-table td { padding: .6rem 1rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.guide-table th { white-space: normal; }
.guide-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.guide-pager a { display: flex; flex-direction: column; gap: .15rem; padding: .7rem 1rem; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius); max-width: 48%; }
.guide-pager a:hover { border-color: var(--accent); }
.guide-pager b { color: var(--ink); }
.guide-pager .next { margin-left: auto; text-align: right; }
.guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.guide-card { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.guide-card h2 { margin: 0 0 .5rem !important; font-size: 1rem !important; }
.guide-card ul { margin: 0; padding-left: 1.1rem; }
@media (max-width: 860px) {
  .guide { flex-direction: column; align-items: stretch; gap: 1rem; padding-top: 1rem; }
  .guide-body { max-width: none; }
  .guide-nav { position: static; flex: none; width: 100%; flex-direction: row; overflow-x: auto; gap: .5rem; }
  .guide-nav .guide-group { display: none; }
  .guide-body { padding: 1.1rem; }
  .guide-body h1 { font-size: 1.4rem; }
  .guide-pager { flex-direction: column; }
  .guide-pager a { max-width: none; }
}

/* Conferma dell'email e accesso con Google */
.verify-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; padding: .5rem 1rem; font-size: .9rem; color: var(--warn); background: var(--warn-soft); border-bottom: 1px solid var(--line); text-align: center; }
.verify-band.ok { color: var(--ok); background: var(--ok-soft); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: .6rem; font-weight: 600; text-decoration: none; }
.or-line { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .8rem; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid var(--line); }