@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Dancing+Script:wght@600&family=Lobster&family=Permanent+Marker&family=Caveat:wght@600&family=Righteous&family=Fredoka+One&family=Bangers&family=Kalam:wght@700&family=Abril+Fatface&family=Indie+Flower&family=Satisfy&family=Cinzel+Decorative:wght@700&family=Pirata+One&family=Creepster&family=Mountains+of+Christmas:wght@700&family=Russo+One&family=Alfa+Slab+One&family=Uncial+Antiqua&family=Boogaloo&family=Sacramento&family=Great+Vibes&family=Parisienne&family=Allura&family=Yellowtail&family=Audiowide&family=Orbitron:wght@700&family=Black+Ops+One&family=Oswald:wght@500&family=Fjalla+One&family=Alex+Brush&family=Pinyon+Script&family=Tangerine:wght@700&family=Mr+Dafoe&family=Italianno&family=Euphoria+Script&family=Courgette&family=Damion&family=Clicker+Script&family=Rochester&family=Petit+Formal+Script&family=Herr+Von+Muellerhoff&family=Ruthie&family=Meie+Script&family=Playball&display=swap');

/* ── THEMES ─────────────────────────────────────────────────────────── */
:root, [data-theme="light"] {
  --primary: #2563eb;
  --bg: #f1f5f9; --card: #ffffff;
  --text: #1e293b; --muted: #64748b; --border: #e2e8f0;
  --si: #16a34a; --no: #dc2626; --forse: #d97706;
  --si-bg: #dcfce7; --no-bg: #ffffff; --forse-bg: #fef3c7; --no-cell: #cbd5e1;
  --input-bg: #ffffff; --best-bg: #d1fae5;
  --tpl-bg: #eff6ff; --tpl-border: #bfdbfe; --tpl-color: #2563eb;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --radius: 12px;
  --font: system-ui,-apple-system,"Segoe UI",sans-serif;
}
[data-theme="cielo"] {
  --primary: #0284c7;
  --bg: #f0f9ff; --card: #ffffff;
  --text: #0c4a6e; --muted: #0369a1; --border: #bae6fd;
  --tpl-bg: #e0f2fe; --tpl-border: #7dd3fc; --tpl-color: #0284c7;
  --best-bg: #bae6fd;
}
[data-theme="verde"] {
  --primary: #16a34a;
  --bg: #f0fdf4; --card: #ffffff;
  --text: #14532d; --muted: #166534; --border: #bbf7d0;
  --tpl-bg: #dcfce7; --tpl-border: #86efac; --tpl-color: #16a34a;
  --best-bg: #bbf7d0;
}
[data-theme="pesca"] {
  --primary: #ea580c;
  --bg: #fff7ed; --card: #ffffff;
  --text: #431407; --muted: #9a3412; --border: #fed7aa;
  --tpl-bg: #ffedd5; --tpl-border: #fdba74; --tpl-color: #ea580c;
  --best-bg: #fed7aa;
}
[data-theme="rosa"] {
  --primary: #db2777;
  --bg: #fdf2f8; --card: #ffffff;
  --text: #500724; --muted: #9d174d; --border: #fbcfe8;
  --tpl-bg: #fce7f3; --tpl-border: #f9a8d4; --tpl-color: #db2777;
  --best-bg: #fbcfe8;
}
[data-theme="dark"] {
  --primary: #60a5fa;
  --bg: #0f172a; --card: #1e293b;
  --text: #e2e8f0; --muted: #94a3b8; --border: #334155;
  --si: #4ade80; --no: #f87171; --forse: #fbbf24;
  --si-bg: rgba(74,222,128,.15); --no-bg: rgba(255,255,255,.03); --forse-bg: rgba(251,191,36,.15); --no-cell: #475569;
  --input-bg: rgba(255,255,255,.07); --best-bg: rgba(74,222,128,.2);
  --tpl-bg: rgba(96,165,250,.08); --tpl-border: rgba(96,165,250,.25); --tpl-color: #93c5fd;
  --shadow: 0 1px 4px rgba(0,0,0,.4);
}
[data-theme="notte"] {
  --primary: #a78bfa;
  --bg: #1e1b4b; --card: #2e2b6b;
  --text: #e0e7ff; --muted: #a5b4fc; --border: #4338ca;
  --si: #4ade80; --no: #f87171; --forse: #fbbf24;
  --si-bg: rgba(74,222,128,.15); --no-bg: rgba(255,255,255,.04); --forse-bg: rgba(251,191,36,.15); --no-cell: #6366f1;
  --input-bg: rgba(255,255,255,.09); --best-bg: rgba(74,222,128,.2);
  --tpl-bg: rgba(167,139,250,.1); --tpl-border: rgba(167,139,250,.3); --tpl-color: #c4b5fd;
  --shadow: 0 1px 4px rgba(0,0,0,.5);
}
[data-theme="carbone"] {
  --primary: #fbbf24;
  --bg: #18181b; --card: #27272a;
  --text: #fafafa; --muted: #a1a1aa; --border: #3f3f46;
  --si: #4ade80; --no: #f87171; --forse: #fbbf24;
  --si-bg: rgba(74,222,128,.15); --no-bg: rgba(255,255,255,.03); --forse-bg: rgba(251,191,36,.15); --no-cell: #52525b;
  --input-bg: rgba(255,255,255,.07); --best-bg: rgba(74,222,128,.2);
  --tpl-bg: rgba(251,191,36,.08); --tpl-border: rgba(251,191,36,.3); --tpl-color: #fcd34d;
  --shadow: 0 1px 4px rgba(0,0,0,.5);
}
[data-theme="foresta"] {
  --primary: #34d399;
  --bg: #022c22; --card: #064e3b;
  --text: #d1fae5; --muted: #6ee7b7; --border: #065f46;
  --si: #4ade80; --no: #f87171; --forse: #fbbf24;
  --si-bg: rgba(74,222,128,.15); --no-bg: rgba(255,255,255,.03); --forse-bg: rgba(251,191,36,.15); --no-cell: #047857;
  --input-bg: rgba(255,255,255,.07); --best-bg: rgba(74,222,128,.2);
  --tpl-bg: rgba(52,211,153,.08); --tpl-border: rgba(52,211,153,.25); --tpl-color: #6ee7b7;
  --shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* ── RESET & BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body { font-family: var(--font); background: transparent; color: var(--text); min-height: 100vh; line-height: 1.5; }
h1,h2,h3,h4 { font-family: var(--font-titolo, var(--font)); }

/* ── BACKGROUND IMAGE ─────────────────────────────────────────────────── */
#sfondo-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--sfondo-img, none);
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  opacity: var(--sfondo-opacita, 0);
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 85%);
  mask-image: linear-gradient(to bottom, black 30%, transparent 85%);
}

/* ── HEADER ──────────────────────────────────────────────────────────── */
header { background: var(--primary); color: #fff; padding: .7rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; box-shadow: 0 1px 4px rgba(0,0,0,.2); position: sticky; top: 0; z-index: 100; }
.hdr-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; min-width: 0; flex: 1; }
.hdr-logo { height: 30px; width: auto; border-radius: 4px; object-fit: contain; flex-shrink: 0; }
.hdr-brand-name { font-size: 1.05rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-titolo, var(--font)); }
.hdr-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.hdr-back { color: rgba(255,255,255,.88); text-decoration: none; font-size: .82rem; padding: .3rem .55rem; border-radius: 6px; white-space: nowrap; }
.hdr-back:hover { color: #fff; background: rgba(255,255,255,.18); }
.hdr-icon-btn { width: 34px; height: 34px; border-radius: 8px; border: none; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .9rem; text-decoration: none; transition: background .15s; flex-shrink: 0; }
.hdr-icon-btn:hover { background: rgba(255,255,255,.3); }

/* ── THEME PANEL ─────────────────────────────────────────────────────── */
.theme-panel { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; display: none; align-items: flex-start; justify-content: flex-end; padding: 3.5rem 1rem 0; }
.theme-panel.open { display: flex; }
.theme-panel-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: 0 8px 24px rgba(0,0,0,.25); min-width: 210px; }
.theme-panel-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; font-weight: 600; font-size: .9rem; color: var(--text); }
.theme-close { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1rem; padding: .15rem .4rem; border-radius: 4px; }
.theme-close:hover { background: var(--border); }
.theme-group-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .6rem 0 .4rem; }
.theme-swatches { display: flex; gap: .45rem; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; background: linear-gradient(135deg, var(--sb) 50%, var(--sc) 50%); transition: transform .15s; outline: 2px solid transparent; outline-offset: 2px; }
.swatch:hover { transform: scale(1.15); }
.swatch.active { outline-color: var(--text); }

/* ── LAYOUT ──────────────────────────────────────────────────────────── */
.container { max-width: 100%; margin: 0 auto; padding: 1.5rem 1.5rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; box-shadow: var(--shadow); }

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem 1.1rem; border-radius: 8px; border: none; cursor: pointer; font-size: .875rem; font-weight: 500; text-decoration: none; transition: filter .15s; line-height: 1; font-family: inherit; }
.btn:hover { filter: brightness(.92); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-danger  { background: rgba(220,38,38,.1); color: var(--no); border: 1px solid rgba(220,38,38,.25); }
.btn-sm { padding: .35rem .75rem; font-size: .8rem; }

/* ── FORMS ───────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
label { display: block; font-size: .78rem; font-weight: 700; margin-bottom: .35rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
input[type=text],
input[type=date],
input[type=time],
input[type=password],
select,
textarea {
  width: 100%; padding: .6rem .85rem; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: .95rem; color: var(--text); background: var(--input-bg); font-family: inherit; transition: border-color .15s;
}
input[type=text]:focus,
input[type=date]:focus,
input[type=time]:focus,
input[type=password]:focus,
select:focus,
textarea:focus { outline: none; border-color: var(--primary); }
select { appearance: auto; }

/* ── POLL LIST ───────────────────────────────────────────────────────── */
.poll-list { display: flex; flex-direction: column; gap: .65rem; }
.poll-row { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; }
.poll-row:hover .poll-title { color: var(--primary); }
.poll-info { flex: 1; min-width: 0; }
.poll-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poll-meta  { font-size: .78rem; color: var(--muted); margin-top: .15rem; }

/* ── POLL GRID ───────────────────────────────────────────────────────── */
.grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.poll-grid { border-collapse: collapse; width: 100%; min-width: 320px; font-size: .875rem; }
table.poll-grid th,
table.poll-grid td { border: 1px solid var(--border); padding: .5rem .65rem; text-align: center; white-space: nowrap; }
table.poll-grid thead th { background: var(--bg); font-weight: 600; font-size: .8rem; }
table.poll-grid thead th:not(:first-child) { white-space: normal; max-width: 80px; word-break: break-word; }
table.poll-grid thead th:first-child,
table.poll-grid tbody td:first-child { text-align: left; min-width: 90px; }
table.poll-grid tbody td:first-child { font-weight: 500; }
.cell-si    { background: var(--si-bg);    color: var(--si); }
.cell-no    { background: var(--no-bg);    color: var(--no-cell); }
.cell-forse { background: var(--forse-bg); color: var(--forse); }
.best-th    { background: var(--best-bg) !important; }
.best-count { color: var(--si); font-weight: 700; }
/* vertical headers when many/long options */
table.poll-grid.vh thead th:not(:first-child) {
  white-space: nowrap; writing-mode: vertical-lr;
  height: 110px; width: 34px; padding: .35rem .15rem;
  vertical-align: bottom; font-size: .75rem;
}

/* ── VOTE BUTTONS ────────────────────────────────────────────────────── */
.vote-btns { display: flex; gap: .2rem; justify-content: center; }
.vote-btn { width: 2rem; height: 2rem; border: 1.5px solid var(--border); background: var(--bg); border-radius: 6px; cursor: pointer; font-size: .85rem; padding: 0; color: var(--muted); transition: all .12s; display: flex; align-items: center; justify-content: center; font-family: inherit; }
.vote-btn:hover { border-color: var(--muted); }
.vote-btn.active.btn-si    { background: var(--si-bg);    color: var(--si);    border-color: var(--si); }
.vote-btn.active.btn-no    { background: rgba(220,38,38,.12); color: var(--no); border-color: var(--no); }
.vote-btn.active.btn-forse { background: var(--forse-bg); color: var(--forse); border-color: var(--forse); }
/* checkbox-style single toggle */
.vote-toggle { width: 2rem; height: 2rem; border: 2px solid var(--border); background: var(--bg); border-radius: 6px; cursor: pointer; font-size: .9rem; padding: 0; color: var(--muted); transition: all .12s; display: flex; align-items: center; justify-content: center; font-family: inherit; }
.vote-toggle:hover { border-color: var(--si); }
.vote-toggle.active { background: var(--si-bg); color: var(--si); border-color: var(--si); }
/* vertical vote layout */
table.poll-grid.vh .vote-btns { flex-direction: column; gap: .1rem; }
table.poll-grid.vh .vote-btn { width: 1.9rem; height: 1.5rem; font-size: .75rem; }
table.poll-grid.vh .vote-toggle { width: 1.9rem; height: 1.9rem; }

/* ── CREATE FORM OPTIONS ─────────────────────────────────────────────── */
.opzioni-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.opzione-row { display: flex; gap: .5rem; align-items: center; }
.opzione-row input { flex: 1; min-width: 0; }
.opzione-row .opzione-ora { flex: none; width: 95px; }

/* ── TEMPLATE DATE BOX ───────────────────────────────────────────────── */
.tpl-box { background: var(--tpl-bg); border: 1.5px solid var(--tpl-border); border-radius: 10px; padding: .85rem 1rem; margin-bottom: .85rem; }
.tpl-box .tpl-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tpl-color); margin-bottom: .7rem; }
.tpl-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.tpl-row > label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .875rem; color: var(--text); margin: 0; white-space: nowrap; }
.tpl-row input[type=date],
.tpl-row input[type=time] { width: auto; min-width: 0; padding: .4rem .6rem; font-size: .875rem; }
.tpl-check { display: flex; align-items: center; gap: .35rem; font-size: .875rem; color: var(--text); cursor: pointer; margin: 0; font-weight: 400; text-transform: none; letter-spacing: 0; }
.tpl-check input[type=checkbox] { width: auto; cursor: pointer; }

/* ── SHARE BOX ───────────────────────────────────────────────────────── */
.share-box { display: flex; gap: .5rem; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .75rem; margin-bottom: 1.25rem; }
.share-url { flex: 1; font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: monospace; }

/* ── FONT PICKER ─────────────────────────────────────────────────────── */
.font-picker { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.font-opt { padding: .4rem .9rem; border: 2px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 1.05rem; line-height: 1.3; transition: all .12s; white-space: nowrap; font-family: inherit; }
.font-opt:hover { border-color: var(--muted); }
.font-opt.active { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 1px var(--primary); }

/* ── CUSTOM THEME COLORS ─────────────────────────────────────────────── */
.color-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; margin-top: .4rem; }
.color-grid > label { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.color-grid input[type=color] { width: 100%; height: 34px; border: 1.5px solid var(--border); border-radius: 6px; padding: 2px 3px; cursor: pointer; background: var(--input-bg); }

/* ── VOTE MODE BADGE ─────────────────────────────────────────────────── */
.modo-badge { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--tpl-bg); color: var(--tpl-color); border: 1px solid var(--tpl-border); border-radius: 5px; padding: .1rem .45rem; vertical-align: middle; margin-left: .4rem; }

/* ── FONT PICKER WRAP (collapsible) ─────────────────────────────────── */
.fp-wrap { border: 1.5px solid var(--border); border-radius: 8px; }
.fp-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem .85rem; background: var(--input-bg); border: none; cursor: pointer; border-radius: 8px; font-family: inherit; color: var(--text); text-align: left; }
.fp-toggle:hover { filter: brightness(.96); }
.fp-current { font-size: 1.05rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.fp-arrow { font-size: .72rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; transition: transform .2s; }
.fp-wrap.open .fp-arrow { transform: rotate(180deg); }
.fp-wrap .font-picker { display: none; padding: .5rem; border-top: 1px solid var(--border); max-height: 220px; overflow-y: auto; border-radius: 0 0 8px 8px; }
.fp-wrap.open .font-picker { display: flex; }

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .6rem; padding: .6rem 1rem; font-size: .7rem; color: var(--muted); border-top: 1px solid var(--border); margin-top: 1.5rem; opacity: .75; }
.footer-sep { opacity: .5; }
.footer-visits { white-space: nowrap; }

/* ── MISC ────────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty .icon { font-size: 3rem; margin-bottom: .75rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-header h2 { font-size: 1.1rem; }
.poll-header { margin-bottom: 1.5rem; }
.poll-header h2 { font-size: 1.35rem; margin-bottom: .25rem; }
.poll-header .by { font-size: .85rem; color: var(--muted); }
.section-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .85rem; }
.msg-error { color: var(--no); font-size: .875rem; margin-bottom: .5rem; }
.msg-ok    { color: var(--si); font-size: .875rem; margin-bottom: .5rem; }
h2 { font-size: 1.1rem; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .container { padding: 1rem .75rem; }
  .card { padding: 1rem .9rem; }
  .poll-header h2 { font-size: 1.15rem; }
  .poll-meta { white-space: normal; word-break: break-word; }
  .color-grid { grid-template-columns: repeat(2, 1fr); }
  .page-header { flex-wrap: wrap; gap: .6rem; }
  .share-box { flex-wrap: wrap; }
  .share-box .btn { width: 100%; justify-content: center; }
  table.poll-grid { font-size: .8rem; }
  table.poll-grid th,
  table.poll-grid td { padding: .35rem .4rem; }
  table.poll-grid thead th:first-child,
  table.poll-grid tbody td:first-child { min-width: 70px; }
  .tpl-row { flex-wrap: wrap; }
  .tpl-row input[type=date],
  .tpl-row input[type=time] { flex: 1 1 auto; min-width: 120px; }
  .btn { font-size: .82rem; }
}

@media (max-width: 380px) {
  .card { padding: .85rem .7rem; }
  .container { padding: .75rem .5rem; }
  .opzione-row .opzione-ora { width: 80px; }
}