/* ============================================================================ Layout unico + temi solo-colore. Il tema si sceglie in Settings ed è applicato via attributo . Cambiano SOLO i colori (variabili CSS): la struttura della pagina resta identica per tutti i temi. ========================================================================== */ :root{ --radius:20px; --radius-sm:13px; /* default = warm (ridichiarato sotto in [data-theme=warm] per chiarezza) */ --bg:#f8f2ea; --panel:#f1e6d6; --panel2:#ece0cf; --ink:#3a2e27; --muted:#8a7a6b; --line:#ece0d1; --card:#fffdf9; --primary:#e08a3c; --primary-d:#c8742a; --primary-soft:#fbeed9; --ok:#7a9c4f; --okbg:#eef3e1; --danger:#d76a4d; --dangerbg:#fbe8e1; --accent-rgb:224,138,60; --ok-rgb:122,156,79; --heat-rgb:224,138,60; --input-bg:#fffdf8; --surf:#fcf7ef; --surf-ink:#6b5a48; --grid-line:#f3ebe0; --off-bg:#e7dbc9; --off-ink:#b7a892; --off-hatch:rgba(120,90,50,.07); --soft-bg:#fffaf2; --scroll:#d9c6ad; --scroll-h:#c7b193; --side-hover:rgba(255,255,255,.55); --banner-grad:linear-gradient(135deg,#fbeed9,#fdf7ee 52%,#eef4e1); --dot-grad:linear-gradient(140deg,#f0b15e,#e08a3c 55%,#cf6b3a); --shadow:0 16px 36px -24px rgba(94,63,33,.42); --shadow-sm:0 8px 20px -14px rgba(94,63,33,.40); } html[data-theme="warm"]{ --bg:#f8f2ea; --panel:#f1e6d6; --panel2:#ece0cf; --ink:#3a2e27; --muted:#8a7a6b; --line:#ece0d1; --card:#fffdf9; --primary:#e08a3c; --primary-d:#c8742a; --primary-soft:#fbeed9; --ok:#7a9c4f; --okbg:#eef3e1; --danger:#d76a4d; --dangerbg:#fbe8e1; --accent-rgb:224,138,60; --ok-rgb:122,156,79; --heat-rgb:224,138,60; --input-bg:#fffdf8; --surf:#fcf7ef; --surf-ink:#6b5a48; --grid-line:#f3ebe0; --off-bg:#e7dbc9; --off-ink:#b7a892; --off-hatch:rgba(120,90,50,.07); --soft-bg:#fffaf2; --scroll:#d9c6ad; --scroll-h:#c7b193; --side-hover:rgba(255,255,255,.55); --banner-grad:linear-gradient(135deg,#fbeed9,#fdf7ee 52%,#eef4e1); --dot-grad:linear-gradient(140deg,#f0b15e,#e08a3c 55%,#cf6b3a); --shadow:0 16px 36px -24px rgba(94,63,33,.42); --shadow-sm:0 8px 20px -14px rgba(94,63,33,.40); } html[data-theme="minimal"]{ --bg:#fbfbfa; --panel:#f4f3f1; --panel2:#efedea; --ink:#16130f; --muted:#6f6a64; --line:#e7e4df; --card:#ffffff; --primary:#16130f; --primary-d:#000000; --primary-soft:#f0efec; --ok:#3a7d44; --okbg:#eef4ec; --danger:#b23b2e; --dangerbg:#f7eae8; --accent-rgb:22,19,15; --ok-rgb:58,125,68; --heat-rgb:22,19,15; --input-bg:#ffffff; --surf:#fafafa; --surf-ink:#6f6a64; --grid-line:#f0eee9; --off-bg:#f3f2ef; --off-ink:#c2bdb5; --off-hatch:rgba(0,0,0,.05); --soft-bg:#fafafa; --scroll:#d8d4ce; --scroll-h:#c3beb6; --side-hover:#f1efec; --banner-grad:#ffffff; --dot-grad:#16130f; --shadow:0 16px 36px -24px rgba(0,0,0,.16); --shadow-sm:0 8px 20px -14px rgba(0,0,0,.12); } html[data-theme="cool"]{ --bg:#eef2f7; --panel:#e4ecf5; --panel2:#dce6f2; --ink:#20303f; --muted:#69788b; --line:#e1e8f1; --card:#ffffff; --primary:#3f7fd6; --primary-d:#2f6cc0; --primary-soft:#eaf2fc; --ok:#2e9e80; --okbg:#e4f5ee; --danger:#e0695f; --dangerbg:#fdeceb; --accent-rgb:63,127,214; --ok-rgb:46,158,128; --heat-rgb:63,127,214; --input-bg:#fbfdff; --surf:#f5f9fd; --surf-ink:#4a5a6e; --grid-line:#eef3f8; --off-bg:#e6edf5; --off-ink:#aebbc9; --off-hatch:rgba(40,70,110,.06); --soft-bg:#f7fafd; --scroll:#c5d2e3; --scroll-h:#aebfd4; --side-hover:rgba(255,255,255,.6); --banner-grad:linear-gradient(135deg,#eaf2fc,#f3f8ff 52%,#e4f5ee); --dot-grad:linear-gradient(140deg,#5ea0ec,#3f7fd6 55%,#2e9e80); --shadow:0 16px 36px -24px rgba(38,63,99,.40); --shadow-sm:0 8px 20px -14px rgba(38,63,99,.38); } html[data-theme="indigo"]{ --bg:#f4f6fc; --panel:#eaeefb; --panel2:#e1e7f8; --ink:#1e2347; --muted:#6b7396; --line:#e7e9f6; --card:#ffffff; --primary:#4f6ef2; --primary-d:#3b56d6; --primary-soft:#e9edff; --ok:#1f9d8f; --okbg:#e5f6f3; --danger:#e0695f; --dangerbg:#fdeceb; --accent-rgb:79,110,242; --ok-rgb:31,157,143; --heat-rgb:79,110,242; --input-bg:#fbfcff; --surf:#f3f5fd; --surf-ink:#5a6488; --grid-line:#eef1fb; --off-bg:#e8ebf7; --off-ink:#aab2d0; --off-hatch:rgba(40,50,120,.06); --soft-bg:#f6f8ff; --scroll:#c9d0ec; --scroll-h:#b3bce4; --side-hover:rgba(255,255,255,.62); --banner-grad:linear-gradient(135deg,#e9edff,#f3f1ff 52%,#e5f6f3); --dot-grad:linear-gradient(140deg,#7b8cf6,#4f6ef2 55%,#1f9d8f); --shadow:0 16px 36px -24px rgba(40,46,120,.42); --shadow-sm:0 8px 20px -14px rgba(40,46,120,.4); } html[data-theme="indigo"] .grad{background:linear-gradient(115deg,#4f6ef2,#7b5cf0 42%,#ef7a6a); -webkit-background-clip:text;background-clip:text;color:transparent} /* "Home" = la palette della landing page, ancora più chiara e ariosa. Stessi colori del sito (indigo -> viola -> corallo) su sfondi quasi bianchi. */ html[data-theme="home"]{ --bg:#fafbff; --panel:#f1f0ff; --panel2:#eaeaff; --ink:#1e2347; --muted:#6b7396; --line:#ecebff; --card:#ffffff; --primary:#4f6ef2; --primary-d:#3b56d6; --primary-soft:#eef0ff; --ok:#1f9d8f; --okbg:#e7f7f4; --danger:#ef7a6a; --dangerbg:#fdeeeb; --accent-rgb:79,110,242; --ok-rgb:31,157,143; --heat-rgb:123,92,240; --input-bg:#ffffff; --surf:#f8f8ff; --surf-ink:#5a6488; --grid-line:#f2f1ff; --off-bg:#eeedfb; --off-ink:#b3b6dc; --off-hatch:rgba(60,50,140,.05); --soft-bg:#fbfbff; --scroll:#d6d2f2; --scroll-h:#c0bbea; --side-hover:rgba(255,255,255,.7); --banner-grad:linear-gradient(135deg,#eef0ff,#f7f4ff 50%,#fdeee9); --dot-grad:linear-gradient(140deg,#7b8cf6,#7b5cf0 50%,#ef7a6a); --shadow:0 16px 40px -24px rgba(60,55,140,.40); --shadow-sm:0 8px 22px -14px rgba(60,55,140,.38); } html[data-theme="home"] .grad{background:linear-gradient(115deg,#4f6ef2,#7b5cf0 42%,#ef7a6a); -webkit-background-clip:text;background-clip:text;color:transparent} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;min-height:100vh;color:var(--ink);background:var(--bg); font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* -------------------------------------------------- app shell (web-app feel) */ .app{display:flex;min-height:100vh} .main{flex:1;min-width:0;padding:36px 38px 64px; background-image: radial-gradient(60% 50% at 100% 0%,rgba(var(--accent-rgb),.10),transparent 60%), radial-gradient(55% 45% at 0% 100%,rgba(var(--ok-rgb),.10),transparent 60%); background-attachment:fixed} .main-inner{max-width:920px;margin:0 auto} /* --------------------------------------- sidebar: full-height, large, fixed */ .sidebar{position:sticky;top:0;height:100vh;flex:0 0 290px;width:290px; background:linear-gradient(180deg,var(--panel),var(--panel2)); border-right:1px solid var(--line);box-shadow:var(--shadow-sm); padding:24px 18px;display:flex;flex-direction:column;gap:18px;overflow:hidden} .side-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:22px; color:var(--ink);letter-spacing:-.02em;text-decoration:none;padding:6px 8px 4px} .dot{width:30px;height:30px;border-radius:10px;position:relative;flex:0 0 auto; background:var(--dot-grad);box-shadow:var(--shadow-sm)} .dot::after{content:"";position:absolute;inset:8px;border-radius:5px;background:var(--panel)} .nav{display:flex;flex-direction:column;gap:5px} .nav-item{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:13px; color:var(--ink);font-weight:650;font-size:15px;text-decoration:none; transition:background .14s,color .14s} .nav-item:hover{background:var(--side-hover);text-decoration:none} .nav-item.on{background:var(--card);color:var(--primary-d);box-shadow:var(--shadow-sm)} .side-sec{flex:1 1 auto;border-top:1px solid var(--line);padding-top:16px;min-height:0; display:flex;flex-direction:column;overflow:hidden} .side-head{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--muted);padding:0 8px 10px} .side-enc{list-style:none;margin:0;padding:0;overflow:auto;display:flex;flex-direction:column;gap:3px} .side-enc li{display:flex;align-items:center;gap:4px;border-radius:12px;transition:background .14s} .side-enc li:hover{background:var(--side-hover)} .side-enc li.on{background:var(--card);box-shadow:var(--shadow-sm)} .se-link{flex:1;min-width:0;display:flex;align-items:center;gap:8px;justify-content:space-between; padding:11px 12px;text-decoration:none;color:var(--ink)} .se-link:hover{text-decoration:none} .se-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;font-weight:600} .se-count{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--primary-d); background:var(--primary-soft);border-radius:999px;padding:2px 9px;min-width:24px;text-align:center} .se-del{flex:0 0 auto;border:0;background:transparent;color:var(--muted);cursor:pointer; font-size:19px;line-height:1;width:28px;height:28px;border-radius:8px;margin-right:6px; transition:background .14s,color .14s} .se-del:hover{background:var(--dangerbg);color:var(--danger)} .se-empty{color:var(--muted);font-size:13px;padding:8px 10px} .side-top{display:flex;flex-direction:column;gap:2px} .byline{font-size:12px;color:var(--muted);font-weight:600;padding:0 8px;letter-spacing:.01em} .byline-c{text-align:center;padding:4px 0 0} .side-foot{border-top:1px solid var(--line);padding-top:14px} .copyright{font-size:11px;color:var(--muted);text-align:center;margin-top:10px;opacity:.85} /* --------------------------------------------------------------------- pages */ .page-head{margin:2px 0 20px} .page-head h1{margin:0 0 6px} .page-head .muted{margin:0} h1{font-size:28px;margin:.1em 0;letter-spacing:-.025em;font-weight:800;color:var(--ink)} h2{font-size:18px;margin:.1em 0 .7em;letter-spacing:-.015em;font-weight:750;color:var(--ink)} p.muted,.muted{color:var(--muted)} code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em; background:var(--panel);padding:2px 6px;border-radius:6px;color:var(--primary-d)} /* ------------------------------------------------------- "how it works" banner */ .banner{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius); padding:22px 24px;margin-bottom:18px;color:var(--ink); background:var(--banner-grad);box-shadow:var(--shadow);animation:rise .42s cubic-bezier(.2,.7,.2,1) both} .banner-head h2{margin:0 0 3px;font-size:19px} .banner-head p{margin:0;color:var(--muted);font-size:14px} .steps{list-style:none;display:flex;align-items:stretch;gap:12px;margin:18px 0 0;padding:0} .steps li{flex:1;display:flex;gap:12px;align-items:flex-start; background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px} .step-ico{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center; font-size:14px;font-weight:800;background:var(--primary);color:#fff} .step-txt{display:flex;flex-direction:column;gap:3px;min-width:0} .step-txt b{font-size:14px;color:var(--primary-d)} .step-txt span{font-size:12.5px;color:var(--muted);line-height:1.45} .steps li.step-arrow{flex:0 0 auto;align-self:center;justify-content:center;align-items:center; background:none;border:0;padding:0 2px;color:var(--primary);font-size:20px;font-weight:800} /* banner esplicativo in-app con piccoli disegni */ .explain{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap} .ex{flex:1;min-width:210px;display:flex;gap:13px;align-items:center;background:var(--card); border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px} .ex-art{flex:0 0 auto;width:62px} .ex b{font-size:13.5px;color:var(--primary-d)} .ex span{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4} .exg{display:flex;flex-direction:column;gap:3px} .exg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:3px} .exg-row i{height:15px;border-radius:4px;background:var(--surf);display:flex;align-items:center; justify-content:center;font-size:9px;font-weight:800;color:#fff} .exg-row i.on{background:var(--primary)} .exg-row i.h{background:rgba(var(--accent-rgb),.4)} .exg-row i.all{background:rgba(var(--accent-rgb),.9);outline:1.5px solid var(--ok);outline-offset:-1.5px} .ex-share{display:flex;flex-direction:column;gap:6px;justify-content:center} .ex-share .ln{height:13px;border-radius:7px;background:var(--primary-soft)} .ex-share .ln.s{width:62%} .ex-share .cp{height:14px;width:36px;border-radius:6px;background:var(--primary)} @media (max-width:620px){.explain{flex-direction:column}} @media (max-width:680px){ .steps{flex-direction:column} .steps li.step-arrow{transform:rotate(90deg);align-self:center;padding:2px 0} } /* ------------------------------------------------------- manage: 2 colonne + step */ .manage{display:flex;gap:18px;align-items:flex-start} .manage-main{flex:1;min-width:0} .manage-side{flex:0 0 290px;position:sticky;top:24px} .share-card{border-color:var(--primary-soft);box-shadow:var(--shadow)} .stepn{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%; background:var(--primary);color:#fff;font-size:13px;font-weight:800;margin-right:9px; vertical-align:middle;flex:0 0 auto} h2 .stepn{position:relative;top:-1px} @media (max-width:980px){ .manage{flex-direction:column} .manage-side{position:static;width:100%;flex-basis:auto;order:-1} } /* --------------------------------------------------------------------- cards */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:24px;margin-bottom:18px; animation:rise .42s cubic-bezier(.2,.7,.2,1) both} .card:nth-child(2){animation-delay:.05s} .card:nth-child(3){animation-delay:.1s} .card:nth-child(4){animation-delay:.15s} @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* -------------------------------------------------------------------- inputs */ label{display:block;font-weight:650;font-size:13px;margin:14px 0 6px;color:var(--ink)} input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px; font-size:15px;font-family:inherit;background:var(--input-bg);color:var(--ink);transition:.15s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16);background:var(--card)} input[readonly]{background:var(--panel);color:var(--muted)} .row{display:flex;gap:14px;flex-wrap:wrap} .row>div{flex:1;min-width:140px} /* segmented radio (Slot length, Theme) */ .seg{display:flex;width:100%;gap:4px;background:var(--panel);border:1px solid var(--line); border-radius:12px;padding:4px} .seg label{margin:0;display:inline-flex;cursor:pointer;flex:1;min-width:0} .seg input{position:absolute;opacity:0;width:0;height:0} .seg span{display:inline-flex;align-items:center;justify-content:center;width:100%; padding:9px 16px;border-radius:9px;font-weight:700;font-size:14px;color:var(--muted); white-space:nowrap;transition:background .14s,color .14s,box-shadow .14s} .seg span:hover{color:var(--ink)} .seg input:checked+span{background:var(--card);color:var(--primary-d);box-shadow:var(--shadow-sm)} .seg input:focus-visible+span{outline:3px solid rgba(var(--accent-rgb),.5);outline-offset:2px} .edit-form{margin-top:16px;padding:16px;border:1px dashed var(--line);border-radius:var(--radius-sm); background:var(--soft-bg)} .kv{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 0;border-bottom:1px solid var(--line)} .kv:last-child{border-bottom:0} /* dropdown grafico (Chosen slot) */ .dd-native{display:none} .dd{position:relative} .dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;cursor:pointer; padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--input-bg); color:var(--ink);font-size:15px;font-family:inherit;font-weight:600;text-align:left;transition:.15s} .dd-btn:hover{border-color:var(--primary)} .dd-btn:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16)} .dd-caret{color:var(--muted);transition:transform .18s;font-size:12px} .dd-btn[aria-expanded="true"] .dd-caret{transform:rotate(180deg)} .dd-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;display:none; background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow); padding:6px;max-height:300px;overflow:auto;animation:rise .16s ease both} .dd-list.open{display:block} .dd-opt{padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .12s} .dd-opt:hover{background:var(--panel)} .dd-opt.on{background:var(--primary-soft);box-shadow:inset 0 0 0 1px var(--primary-soft)} .dd-opt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px} .dd-opt-head b{font-size:14px} .dd-count{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap} .dd-count.ok{color:var(--ok)} .dd-bar{display:block;height:7px;border-radius:999px;background:var(--off-bg);overflow:hidden} .dd-bar i{display:block;height:100%;border-radius:999px;background:var(--primary);transition:width .35s} .dd-opt.all .dd-bar i{background:var(--ok)} .btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .danger-zone{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} /* ------------------------------------------------------------------- buttons */ .btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid transparent; border-radius:12px;padding:11px 18px;font-size:14.5px;font-weight:700;color:#fff; letter-spacing:-.01em;background:var(--primary);box-shadow:var(--shadow-sm); transition:transform .12s,box-shadow .12s,background .14s,filter .14s} .btn:hover{background:var(--primary-d);transform:translateY(-1px);filter:brightness(1.02); box-shadow:0 14px 26px -16px rgba(0,0,0,.3)} .btn:active{transform:translateY(0)} .btn.block{width:100%;justify-content:center} .btn.sec{background:var(--card);color:var(--primary-d);border-color:var(--line);box-shadow:var(--shadow-sm)} .btn.sec:hover{background:var(--primary-soft);border-color:var(--line);filter:none} .btn.ghost{background:transparent;color:var(--muted);box-shadow:none;border-color:transparent} .btn.ghost:hover{background:var(--panel);color:var(--ink);transform:none} .btn.danger{background:var(--danger)} .btn.danger:hover{background:var(--danger);filter:brightness(.93)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none} a.btn{text-decoration:none} :focus-visible{outline:3px solid rgba(var(--accent-rgb),.5);outline-offset:2px;border-radius:8px} /* ---------------------------------------------------------------------- grid */ .grid-scroll{overflow:auto;max-height:72vh;border:1px solid var(--line);border-radius:var(--radius-sm); margin-top:12px;background:var(--card);overscroll-behavior:contain;-webkit-overflow-scrolling:touch} table.grid{border-collapse:separate;border-spacing:0;user-select:none;min-width:100%} table.grid th,table.grid td{border-bottom:1px solid var(--grid-line);border-right:1px solid var(--grid-line); text-align:center;font-size:12px;padding:0;min-width:66px;height:32px;white-space:nowrap} table.grid th{background:var(--surf);position:sticky;top:0;z-index:1;padding:8px;font-weight:700;color:var(--surf-ink)} table.grid th.time,table.grid td.time{position:sticky;left:0;background:var(--surf);z-index:2; font-weight:700;min-width:64px;padding:0 10px;color:var(--surf-ink)} table.grid thead th:first-child{z-index:3} td.cell{cursor:pointer;background:var(--card);transition:background .12s,box-shadow .12s} td.cell:hover{background:rgba(var(--accent-rgb),.12);box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb),.3)} td.cell.off{cursor:default;color:var(--off-ink);background-color:var(--off-bg); background-image:repeating-linear-gradient(45deg,transparent 0 5px,var(--off-hatch) 5px 7px)} td.cell.off:hover{box-shadow:none} td.cell.sel{background:var(--primary);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} td.cell.heat{cursor:default;color:var(--ink);font-weight:700;transition:background .25s,color .25s} td.cell.allfree{outline:2px solid var(--ok);outline-offset:-2px;box-shadow:inset 0 0 10px rgba(var(--ok-rgb),.32)} /* --------------------------------------------------------------- bits & lists */ .pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px; font-size:12px;font-weight:700;background:var(--primary-soft);color:var(--primary-d)} .pill.ok{background:var(--okbg);color:var(--ok)} .list{list-style:none;margin:0;padding:0} .list li{display:flex;justify-content:space-between;align-items:center;gap:12px; padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px; background:var(--card);transition:transform .14s,box-shadow .14s,border-color .14s} .list li:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--line)} .list li.empty{justify-content:flex-start;gap:14px;border-style:dashed;background:var(--soft-bg)} .list li.empty:hover{transform:none;box-shadow:none;border-color:var(--line)} .item-main{min-width:0} .item-title{font-weight:750;letter-spacing:-.01em;font-size:15px} .prow{display:flex;align-items:center;gap:10px;flex:0 0 auto} .btn.pdel{padding:7px 11px;font-size:14px;line-height:1;color:var(--muted);border-radius:10px} .btn.pdel:hover{background:var(--dangerbg);color:var(--danger);transform:none;filter:none} .linkbox{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center} .linkbox input{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;min-width:200px;flex:1} .flash{padding:12px 16px;border-radius:var(--radius-sm);margin-top:14px;font-weight:600; animation:rise .3s ease both} .flash.err{background:var(--dangerbg);color:var(--danger)} .flash.ok{background:var(--okbg);color:var(--ok)} .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;margin-top:12px;color:var(--muted)} .swatch{display:inline-block;width:14px;height:14px;border-radius:5px;vertical-align:-2px;margin-right:6px} .swatch.s-none{background:var(--card);border:1px solid var(--line)} .swatch.s-some{background:rgba(var(--accent-rgb),.18)} .swatch.s-many{background:rgba(var(--accent-rgb),.25)} .swatch.s-all{background:var(--card);outline:2px solid var(--ok)} .swatch.s-mine{background:var(--primary)} /* didascalia "come funziona" sopra la griglia di voto */ .hint{background:var(--primary-soft);border:1px solid var(--line);border-radius:var(--radius-sm); padding:14px 16px;margin:16px 0 4px;font-size:13.5px;color:var(--ink)} .hint>b{display:block;margin-bottom:6px;color:var(--primary-d);letter-spacing:.01em} .hint ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;color:var(--muted)} .hint ol b{color:var(--ink);font-weight:650} .hint-sel{display:inline-block;background:var(--primary);color:#fff;border-radius:5px; padding:0 7px;font-weight:700;font-size:12px;vertical-align:1px} /* conferma voto gratificante */ .done{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--radius-sm); background:var(--okbg);border:1px solid var(--ok);margin-top:16px;animation:rise .35s cubic-bezier(.2,.7,.2,1) both} .done-check{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center; background:var(--ok);color:#fff;font-size:21px;font-weight:800;box-shadow:0 8px 18px -8px var(--ok)} .done-txt b{color:var(--ok);font-size:16px} /* setup notifiche (webhook + QR) */ .hook-grid{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-top:10px} .hook-qr{width:168px;height:168px;border:1px solid var(--line);border-radius:12px; background:#fff;padding:6px;flex:0 0 auto;box-shadow:var(--shadow-sm)} .hook-side{flex:1;min-width:230px} /* ----------------------------------------------------------- auth & participant */ .wrap{max-width:1000px;margin:0 auto;padding:26px} .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px} .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;color:var(--ink); text-decoration:none;letter-spacing:-.02em} .brand:hover{text-decoration:none} .auth{max-width:420px;margin:8vh auto;padding:22px} .auth-head{text-align:center;margin-bottom:18px} .brand-lg{justify-content:center;font-size:26px} .tagline{color:var(--muted);font-size:15px;margin:10px 0 0} .auth-foot{text-align:center;color:var(--muted);font-size:13px;margin-top:22px} a{color:var(--primary-d);text-decoration:none} a:hover{text-decoration:underline} /* ------------------------------------------------- sfondo animato (leggero) */ .fx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none} .fx i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(70px);opacity:.45} .fx i:nth-child(1){left:-12vmax;top:-14vmax;background:radial-gradient(circle,rgba(var(--accent-rgb),.55),transparent 70%);animation:float1 22s ease-in-out infinite alternate} .fx i:nth-child(2){right:-14vmax;top:6vmax;background:radial-gradient(circle,rgba(var(--ok-rgb),.45),transparent 70%);animation:float2 26s ease-in-out infinite alternate} .fx i:nth-child(3){left:24vmax;bottom:-18vmax;background:radial-gradient(circle,rgba(var(--accent-rgb),.4),transparent 70%);animation:float3 30s ease-in-out infinite alternate} @keyframes float1{to{transform:translate(8vmax,6vmax) scale(1.12)}} @keyframes float2{to{transform:translate(-7vmax,5vmax) scale(1.08)}} @keyframes float3{to{transform:translate(5vmax,-7vmax) scale(1.15)}} /* ------------------------------------------------------------- landing page */ /* palette dedicata alla landing (indaco + teal + corallo), indipendente dal tema app */ .landing-scope{ --accent-rgb:79,110,242; --ok-rgb:31,157,143; --primary:#4f6ef2; --primary-d:#3b56d6; --primary-soft:#eaf0ff; --primary-soft:#e9edff; --ink:#1e2347; --muted:#6b7396; --line:#e7e9f6; --card:#ffffff; --ok:#1f9d8f; --okbg:#e5f6f3; --shadow:0 26px 60px -34px rgba(40,46,120,.45); --shadow-sm:0 12px 28px -18px rgba(40,46,120,.4); min-height:100vh; background: radial-gradient(120% 80% at 50% -10%,#f3f1ff,transparent 60%), linear-gradient(180deg,#f7f8ff,#f4f6fc); } .landing-scope .grad{background:linear-gradient(115deg,#4f6ef2,#7b5cf0 42%,#ef7a6a); -webkit-background-clip:text;background-clip:text;color:transparent} .lp{max-width:1160px;margin:0 auto;padding:0 24px 60px} .lp-nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0} .hero{display:flex;gap:40px;align-items:center;padding:40px 0 30px;flex-wrap:wrap} .hero-text{flex:1;min-width:300px} .eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--primary-d); background:var(--primary-soft);padding:6px 12px;border-radius:999px} .hero h1{font-size:clamp(38px,6vw,60px);line-height:1.02;letter-spacing:-.035em;margin:18px 0 0} .lead{font-size:18px;line-height:1.55;color:var(--muted);max-width:540px;margin:18px 0 0} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .hero-cta .btn{padding:13px 24px;font-size:15.5px} .trust{font-size:13px;color:var(--muted);margin-top:18px} .hero-art{flex:0 0 360px;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:12px} .mini{width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:16px;animation:rise .6s cubic-bezier(.2,.7,.2,1) both} .mini-row{display:grid;grid-template-columns:36px repeat(3,1fr);gap:7px;margin-bottom:7px} .mini-row:last-child{margin-bottom:0} .mini-row span{font-size:12px;color:var(--muted);display:flex;align-items:center} .mini-head b{font-size:12px;color:var(--surf-ink);text-align:center;font-weight:700} .mini-row i{height:26px;border-radius:7px;background:var(--surf)} .mini-row i.s{background:rgba(var(--accent-rgb),.22)} .mini-row i.a{background:rgba(var(--accent-rgb),.9)} .mini-tag{align-self:flex-start;font-size:12.5px;font-weight:700;color:var(--ok); background:var(--okbg);border:1px solid var(--ok);border-radius:999px;padding:5px 12px} .sec-title{text-align:center;font-size:24px;font-weight:800;letter-spacing:-.02em;margin:10px 0 22px} .how{padding:40px 0 10px} .lp-steps{max-width:920px;margin:0 auto} .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:40px 0} .feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px; box-shadow:var(--shadow-sm)} .feature h3{font-size:16px;margin:12px 0 6px;letter-spacing:-.01em} .feature p{margin:0;font-size:14px;line-height:1.5} .f-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px; background:var(--primary-soft);color:var(--primary-d)} .integ{display:flex;gap:24px;align-items:center;flex-wrap:wrap;background:var(--card); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:26px;margin:20px 0} .integ-logo{flex:0 0 auto;display:flex;align-items:center;text-decoration:none} .integ-img{max-height:54px;max-width:200px;display:block} .integ-mark{font-size:30px;font-weight:800;letter-spacing:-.02em;color:#2b6cb0} .integ-mark b{color:#1a3e63;font-weight:800} .integ-text{flex:1;min-width:260px} .integ-text h3{margin:0 0 6px;font-size:18px;letter-spacing:-.01em} .integ-text p{margin:0;font-size:14px;line-height:1.55} .lp-link{display:inline-block;margin-top:10px;font-weight:700;font-size:14px} .cta-band{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:40px 22px;margin:20px 0} .cta-band h2{font-size:24px;margin:0 0 6px} .cta-band .btn{margin-top:16px;padding:13px 28px} .lp-foot{text-align:center;color:var(--muted);font-size:13px;padding:24px 0 0} /* banner showcase (alternati) con mockup del software */ .show{display:flex;align-items:center;gap:48px;flex-wrap:wrap; background:var(--card);border:1px solid var(--line);border-radius:26px; box-shadow:var(--shadow);padding:38px 44px;margin:18px 0} .show.rev{flex-direction:row-reverse} .show-text{flex:1;min-width:260px} .show-text h2{font-size:26px;letter-spacing:-.02em;margin:12px 0 10px} .show-text p{font-size:15.5px;line-height:1.6;margin:0;max-width:420px} .show-art{flex:1;min-width:280px;display:flex;justify-content:center} .mock{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line); border-radius:16px;box-shadow:0 20px 44px -26px rgba(40,46,120,.5);overflow:hidden} .mock-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#f4f5fb;border-bottom:1px solid var(--line)} .mock-bar i{width:10px;height:10px;border-radius:50%;background:#d4d8ea} .mock-bar i:nth-child(1){background:#f3a59a}.mock-bar i:nth-child(2){background:#f3d59a}.mock-bar i:nth-child(3){background:#a9e0c4} .mock-bar span{margin-left:8px;font-size:12.5px;font-weight:700;color:var(--muted)} .mock-pad{padding:16px} .gg{display:flex;flex-direction:column;gap:6px} .gg-row{display:grid;grid-template-columns:46px repeat(4,1fr);gap:6px} .gg-row span{font-size:11px;color:var(--muted);display:flex;align-items:center} .gg-head b{font-size:11px;font-weight:700;color:var(--muted);text-align:center} .gg-row i{height:26px;border-radius:7px;background:#f1f3fb;display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:800;color:#fff} .gg-row i.on{background:var(--primary)} .gg-row i.me{background:var(--primary);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)} .gg-row i.some{background:rgba(var(--accent-rgb),.18)} .gg-row i.h1{background:rgba(var(--accent-rgb),.2)} .gg-row i.h2{background:rgba(var(--accent-rgb),.45)} .gg-row i.h3{background:rgba(var(--accent-rgb),.8)} .gg-row i.all{background:rgba(var(--accent-rgb),.92);outline:2px solid var(--ok);outline-offset:-2px} .mock-pill{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;color:var(--primary-d); background:var(--primary-soft);border-radius:999px;padding:5px 12px} .mock-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)} .mock-legend .d{width:13px;height:13px;border-radius:4px;margin-left:6px} .mock-legend .d.h1{background:rgba(var(--accent-rgb),.2)} .mock-legend .d.h3{background:rgba(var(--accent-rgb),.8)} .mock-legend .d.all{background:#fff;outline:2px solid var(--ok)} .mock-field{border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13px;color:var(--ink); background:#fbfcff;margin-bottom:12px} .mock-btn{margin-top:14px;background:var(--primary);color:#fff;font-weight:700;font-size:13px; text-align:center;border-radius:10px;padding:11px} .mock-select{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line); border-radius:10px;padding:11px 12px;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px} .mock-select::after{content:"▾";color:var(--muted)} .opt{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px} .opt-h{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px} .opt-h .okc{color:var(--ok);font-weight:700} .bar{height:7px;border-radius:999px;background:#eef0f8;overflow:hidden} .bar i{display:block;height:100%;background:var(--ok)} .bar i.p{background:var(--primary)} @media (max-width:760px){ .hero{padding-top:20px} .hero-art{flex-basis:100%} .show,.show.rev{flex-direction:column;padding:28px 22px;gap:24px;text-align:center} .show-text p{margin-left:auto;margin-right:auto} .show-art{width:100%} } /* ----------------------------------------------------------------- scrollbars */ .side-enc::-webkit-scrollbar,.grid-scroll::-webkit-scrollbar{width:9px;height:9px} .side-enc::-webkit-scrollbar-thumb,.grid-scroll::-webkit-scrollbar-thumb{ background:var(--scroll);border-radius:999px;border:2px solid transparent;background-clip:content-box} .side-enc::-webkit-scrollbar-thumb:hover,.grid-scroll::-webkit-scrollbar-thumb:hover{ background:var(--scroll-h);background-clip:content-box} /* -------------------------------------------------------------------- responsive */ @media (max-width:820px){ .app{flex-direction:column} .sidebar{position:static;height:auto;width:100%;flex-basis:auto; border-right:0;border-bottom:1px solid var(--line)} .side-sec{max-height:240px} .main{padding:22px 18px 48px} } @media (max-width:560px){ .card{padding:18px} h1{font-size:24px} .linkbox input{min-width:140px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important; scroll-behavior:auto!important} }