:root{
  --bg:#f6f5f1; --card:#fff; --ink:#1d2321; --muted:#6b7470; --line:#e3e1da;
  --acc:#0a57c2; --acc-ink:#fff; --del:#fde0dc; --del-ink:#a2271a; --ins:#dcf3e4; --sel:#dde9fb; --ins-ink:#17663a;
  --danger:#b3261e;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121514;--card:#1b1f1e;--ink:#e8ece9;--muted:#9aa3a0;--line:#2b3130;
  --acc:#5aa2ff;--acc-ink:#061a3a;--del:#4a1f1b;--del-ink:#ffb4a8;--ins:#173a26;--sel:#16294a;--ins-ink:#9fe3b6}
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink)}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.55em .9em;cursor:pointer}
button.primary{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
button.icon{border:0;background:none;font-size:1.35rem;padding:.3em .5em;min-width:2.4em}
button.link{border:0;background:none;color:var(--acc);padding:.2em 0;text-align:left}
button.danger{color:var(--danger)}
input,textarea{font:inherit;color:inherit}

.view{display:none;flex-direction:column;height:100dvh;max-width:820px;margin:0 auto}
.view.active{display:flex}
.bar{display:flex;align-items:center;gap:.25rem;padding:.4rem .5rem;border-bottom:1px solid var(--line);min-height:52px}
.bar h1{font-size:1.15rem;margin:0 .5rem;flex:1}
.savestate{flex:1;font-size:.85rem;color:var(--muted);text-align:center}
.savestate.dirty{color:#b26b00}

.tabs{display:flex;gap:.4rem;padding:.6rem .8rem 0}
.tab{flex:1;border-radius:999px}
.tab.active{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.searchwrap{padding:.6rem .8rem}
#search{width:100%;padding:.6em .8em;border-radius:10px;border:1px solid var(--line);background:var(--card)}
.list{list-style:none;margin:0;padding:0 .8rem 6rem;overflow:auto;flex:1}
.list li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;margin-bottom:.5rem;cursor:pointer}
.list li b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list li small{color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.15rem}
.list li .acts{display:flex;gap:.4rem;margin-top:.5rem}
.empty{text-align:center;color:var(--muted);padding:2rem}
.fab{position:fixed;right:max(1.2rem,env(safe-area-inset-right));bottom:max(1.4rem,env(safe-area-inset-bottom));width:58px;height:58px;border-radius:50%;
  font-size:1.8rem;background:var(--acc);color:var(--acc-ink);border:0;box-shadow:0 4px 14px rgba(0,0,0,.25)}

.titleblock{background:var(--card);border-bottom:2px solid var(--acc);padding:.2rem 0}
.title{display:block;width:100%;border:0;background:none;font-size:1.45rem;font-weight:700;padding:.75rem 1rem;outline:none}

/* Pagina: righe/quadretti allineati al testo e che scorrono con esso */
.body{
  --fs:17px; --lh:28px; --margin:0px; --right:0px;
  --rule:rgba(10,87,194,.16); --mline:rgba(200,60,60,.45);
  flex:1;border:0;resize:none;outline:none;
  font-size:var(--fs);line-height:var(--lh);
  padding:calc(var(--lh) / 2) calc(16px + var(--right)) calc(var(--lh) * 3) calc(16px + var(--margin));
  background-color:var(--bg);
  background-attachment:local;
}
@media (prefers-color-scheme:dark){.body{--rule:rgba(160,220,200,.13);--mline:rgba(255,120,120,.4)}}
.body.paper-righe{
  background-image:linear-gradient(to bottom,transparent calc(var(--lh) - 1px),var(--rule) calc(var(--lh) - 1px),var(--rule) var(--lh));
  background-size:100% var(--lh);background-origin:content-box;background-position:0 0}
.body.paper-quadretti{
  background-image:linear-gradient(to bottom,transparent calc(var(--lh) - 1px),var(--rule) calc(var(--lh) - 1px)),
                   linear-gradient(to right,transparent calc(var(--lh) - 1px),var(--rule) calc(var(--lh) - 1px));
  background-size:var(--lh) var(--lh);background-origin:content-box}
.body.paper-puntini{
  background-image:radial-gradient(circle at 50% calc(var(--lh) - 2px),var(--rule) 1.4px,transparent 1.8px);
  background-size:calc(var(--lh) / 1.4) var(--lh);background-origin:content-box;--rule:rgba(10,87,194,.45)}
.pagewrap{position:relative;flex:1;display:flex;min-height:0}
.pagewrap .body{width:100%}
.mline{position:absolute;top:0;bottom:0;width:0;border-left:1.5px solid rgba(200,60,60,.45);pointer-events:none}
.preview{flex:1;overflow:auto;padding:.5rem 1rem 2rem;line-height:1.55}
.preview a.wl{color:var(--acc);text-decoration:none;border-bottom:1px dashed var(--acc)}
.preview code{background:var(--line);padding:0 .25em;border-radius:4px}

.secret{display:flex;flex-direction:column;gap:.8rem;padding:1rem;overflow:auto}
.secret label{display:flex;flex-direction:column;font-size:.85rem;color:var(--muted);gap:.3rem}
.secret input,.secret textarea{font-size:1rem;padding:.6em .7em;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);width:100%}
.secret input[readonly],.secret textarea[readonly]{background:transparent;border-style:dashed}
.secret .row{display:flex;gap:.4rem}
.secret .row input{flex:1;min-width:0}
.mini{padding:.4em .6em;font-size:.85rem}
.actions{display:flex;gap:.5rem;padding:0 1rem;justify-content:flex-end}
.hint{color:var(--muted);font-size:.85rem;padding:0 1rem}
.err{color:var(--danger);min-height:1.2em}

.lock{display:flex;flex-direction:column;gap:.8rem;padding:1.5rem 1rem}
.lock input{padding:.8em;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:1rem}

dialog{border:0;border-radius:16px;padding:0;background:var(--card);color:var(--ink);width:min(760px,96vw);max-height:90dvh}
dialog::backdrop{background:rgba(0,0,0,.4)}
.dlghead{display:flex;align-items:center;justify-content:space-between;padding:.5rem .5rem .5rem 1rem;border-bottom:1px solid var(--line)}
.menu{display:flex;flex-direction:column;gap:.5rem;padding:1rem}
.menu button,.filebtn{text-align:left}
.filebtn{display:block;border:1px solid var(--line);border-radius:10px;padding:.55em .9em;cursor:pointer}

.histwrap{display:flex;flex-direction:column;max-height:calc(90dvh - 56px)}
.histlist{list-style:none;margin:0;padding:.5rem;overflow:auto;max-height:32dvh;border-bottom:1px solid var(--line)}
.histlist li{padding:.5rem .7rem;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;gap:.5rem}
.histlist li.sel{background:var(--sel)}
.histlist li small{color:var(--muted)}
.histdetail{padding:.8rem 1rem;overflow:auto;flex:1}
.diff{white-space:pre-wrap;word-break:break-word;line-height:1.5;font-size:.95rem;background:var(--bg);padding:.7rem;border-radius:8px}
.del,.diff del{background:var(--del);color:var(--del-ink);text-decoration:line-through;border-radius:3px}
.ins,.diff ins{background:var(--ins);color:var(--ins-ink);text-decoration:none;border-radius:3px}
.histdetail .actions{padding:.7rem 0 0}

.toast{position:fixed;left:50%;bottom:6rem;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:10px;font-size:.9rem;z-index:10}
.badge{font-size:.75rem;background:#fff1cc;color:#7a5200;padding:.1em .45em;border-radius:6px;margin-left:.3em}
@media (prefers-color-scheme:dark){.badge{background:#4a3a10;color:#ffd98a}}
#closeDiff{max-height:35dvh;overflow:auto}
#noteSave{margin-right:.2rem}
.ok{color:var(--ins-ink)}.ko{color:var(--danger)}

.papers{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.papers button{display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.85rem;padding:.5rem .2rem}
.papers button.sel,.sizes button.sel{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset}
.sw{display:block;width:100%;height:52px;border-radius:6px;border:1px solid var(--line);--lh:10px;--rule:rgba(10,87,194,.3);background-color:var(--bg)}
.sw.paper-righe{background-image:linear-gradient(to bottom,transparent 9px,var(--rule) 9px);background-size:100% 10px}
.sw.paper-quadretti{background-image:linear-gradient(to bottom,transparent 9px,var(--rule) 9px),linear-gradient(to right,transparent 9px,var(--rule) 9px);background-size:10px 10px}
.sw.paper-puntini{background-image:radial-gradient(circle,rgba(10,87,194,.55) 1px,transparent 1.5px);background-size:8px 10px}
.rng{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem;font-size:.9rem}
.rng input{width:100%;accent-color:var(--acc)}
.rng output{color:var(--muted)}
.sizes{display:flex;gap:.4rem;align-items:center}
.sizes span{flex:1;font-size:.9rem}

.sw.paper-richiami{background-image:linear-gradient(to right,transparent 30%,rgba(10,87,194,.6) 30%,rgba(10,87,194,.6) calc(30% + 1.5px),transparent calc(30% + 1.5px)),linear-gradient(to bottom,transparent 9px,var(--rule) 9px);background-size:100% 100%,100% 10px}

/* formato Richiami */
.cornell{
  --fs:17px;--lh:28px;--cue:30%;--margin:0px;--right:0px;
  --rule:rgba(10,87,194,.16);--sep:rgba(10,87,194,.55);
  flex:1;overflow:auto;width:100%;
  padding:calc(var(--lh) / 2) calc(12px + var(--right)) 0 calc(12px + var(--margin));
  background-color:var(--bg);
  background-image:
    linear-gradient(to right,transparent calc(var(--cue) - 1px),var(--sep) calc(var(--cue) - 1px),var(--sep) calc(var(--cue) + 1px),transparent calc(var(--cue) + 1px)),
    linear-gradient(to bottom,transparent calc(var(--lh) - 1px),var(--rule) calc(var(--lh) - 1px),var(--rule) var(--lh));
  background-size:100% 100%,100% var(--lh);
  background-repeat:no-repeat,repeat;
  background-origin:content-box,content-box;
  background-attachment:local,local;
}
@media (prefers-color-scheme:dark){.cornell{--rule:rgba(160,220,200,.13);--sep:rgba(160,220,200,.5)}}
.crow{display:grid;grid-template-columns:var(--cue) 1fr;margin-bottom:var(--lh)}
.crow textarea{border:0;outline:none;resize:none;background:transparent;color:var(--ink);overflow:hidden;
  font-size:var(--fs);line-height:var(--lh);padding:0;margin:0;display:block;width:100%}
.ccue{padding-right:10px !important;font-weight:600;color:var(--acc) !important}
.ctext{padding-left:12px !important}
.addrow{display:block;margin-left:calc(var(--cue) + 12px);line-height:var(--lh);padding:0}
.cprev{display:grid;grid-template-columns:30% 1fr;gap:.2rem 1rem}
.cpcue{font-weight:600;color:var(--acc);border-right:2px solid var(--acc);padding-right:.6rem}
.cornell::after{content:'';display:block;height:calc(var(--lh) * 6)}
.pagewrap[hidden]{display:none}
.cprev p,.cprev h1,.cprev h2,.cprev h3,.cprev ul{margin:0 0 .4em}
.cprev>div{padding:.3rem 0}

/* barra formattazione */
.fmtbar{display:flex;gap:.25rem;overflow-x:auto;padding:.35rem .5rem;border-bottom:1px solid var(--line);background:var(--card);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fmtbar::-webkit-scrollbar{display:none}
.fmtbar[hidden]{display:none}
.fmtbar button{flex:0 0 auto;min-width:2.4rem;padding:.35em .55em;border-radius:8px;font-size:.95rem;background:var(--bg)}
.fmtbar mark{background:#ffe680;color:#1d2321;padding:0 .2em;border-radius:2px}
/* tag */
.tagbar{display:flex;gap:.4rem;overflow-x:auto;padding:0 .8rem .6rem;scrollbar-width:none}
.tagbar[hidden]{display:none}
.chip{flex:0 0 auto;border-radius:999px;padding:.3em .8em;font-size:.85rem}
.chip small{color:var(--muted)}
.chip.sel{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.chip.sel small{color:inherit}
.tag{color:var(--acc);font-weight:500}
/* anteprima */
.preview mark{background:#ffe680;color:#1d2321;border-radius:2px;padding:0 .15em}
.preview blockquote{border-left:3px solid var(--acc);margin:.4rem 0;padding:.1rem .8rem;color:var(--muted)}
.preview hr{border:0;border-top:1px solid var(--line);margin:1rem 0}
.preview li.task{list-style:none;margin-left:-1.3rem}
.preview li.task input{width:1.1rem;height:1.1rem;vertical-align:-2px;accent-color:var(--acc)}
.preview li.done span{text-decoration:line-through;color:var(--muted)}
.preview del{color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.grid2 button{text-align:center}
/* stampa / PDF */
#printArea{display:none}
@media print{
  body.printing>*:not(#printArea){display:none !important}
  body.printing #printArea{display:block;color:#000;font-family:-apple-system,Helvetica,Arial,sans-serif;line-height:1.5;padding:0}
  #printArea h1{border-bottom:2px solid #0a57c2;padding-bottom:.3rem}
  #printArea mark{background:#fff1a8}
  #printArea li.task{list-style:none}
  #printArea .cprev{display:grid;grid-template-columns:30% 1fr;gap:.2rem 1rem}
  #printArea .cpcue{font-weight:600;color:#0a57c2;border-right:2px solid #0a57c2;padding-right:.6rem}
}
.savestate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:.8rem}

/* cartelle */
.folderbar{padding:0 .8rem .5rem}
.folderlist{max-height:50dvh;border:0}
.folderlist li.sel{background:var(--sel)}
.row2{display:flex;gap:.5rem}
.row2 input{flex:1;min-width:0;padding:.55em .7em;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
/* barra: separatore */
.fmtbar .sep{flex:0 0 1px;background:var(--line);margin:0 .2rem}
/* allegati in anteprima */
.preview img.att{max-width:100%;border-radius:10px;display:block;margin:.4rem 0;border:1px solid var(--line)}
.preview a.attlink{display:inline-block;padding:.3em .7em;border:1px solid var(--line);border-radius:8px;background:var(--card);text-decoration:none;color:var(--ink);margin:.2rem 0}
#printArea img.att{max-width:100%}
/* modelli */
.tpllist{display:flex;flex-direction:column;gap:.4rem;max-height:45dvh;overflow:auto}
.tplrow{display:flex;gap:.4rem}
.tplrow .tpl{flex:1;text-align:left}
.backlinks{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem}
.backlinks:empty{display:none}
/* disegno */
.sketchdlg{width:min(900px,98vw)}
#sketchCanvas{display:block;width:100%;height:min(62dvh,560px);background:#fff;touch-action:none;cursor:crosshair}
.pens{display:flex;gap:.2rem;flex-wrap:wrap;justify-content:flex-end}
.pens button{padding:.2em .45em;font-size:.8rem}
.pens button[data-pen]{font-size:1.2rem;line-height:1;border-radius:50%}
.pens button.sel{box-shadow:0 0 0 2px var(--acc) inset}
.dtinput{padding:.7em;border-radius:10px;border:1px solid var(--line);background:var(--bg);font-size:1rem}
.rng select{padding:.4em .6em;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit}

/* ===== editor visuale ===== */
.vis{overflow:auto;white-space:pre-wrap;word-wrap:break-word;cursor:text}
.vis:focus{outline:none}
.vis>*{margin:0}
.vis p,.vis li,.vis td,.vis th,.vis blockquote{line-height:var(--lh)}
.vis h1{font-size:calc(var(--fs) * 1.55);line-height:calc(var(--lh) * 2);font-weight:700}
.vis h2{font-size:calc(var(--fs) * 1.25);line-height:var(--lh);font-weight:700}
.vis h3{font-size:var(--fs);line-height:var(--lh);font-weight:700}
.vis ul,.vis ol{padding-left:1.5em;margin:0}
.vis ul.tasks{list-style:none;padding-left:.2em}
.vis ul.tasks input{width:1.05em;height:1.05em;margin:0 .45em 0 0;vertical-align:-.15em;accent-color:var(--acc)}
.vis ul.tasks li:has(input:checked){color:var(--muted);text-decoration:line-through}
.vis blockquote{border-left:3px solid var(--acc);padding-left:.8em;color:var(--muted)}
.vis hr{border:0;height:var(--lh);background:linear-gradient(transparent calc(50% - 1px),var(--muted) calc(50% - 1px),var(--muted) 50%,transparent 50%);opacity:.5}
.vis mark{background:#ffe680;color:#1d2321;border-radius:2px}
.vis code{background:var(--line);padding:0 .25em;border-radius:4px;font-size:.92em}
.vis table{border-collapse:collapse;background:var(--card)}
.vis td,.vis th{border:1px solid var(--line);padding:0 .5em;min-width:3.5em;vertical-align:top}
.vis th{background:var(--bg);font-weight:650;text-align:left}
.vis img.att{max-width:100%;display:block;border-radius:10px;border:1px solid var(--line)}
.vis .attchip,.preview .attchip{display:inline-block;padding:0 .6em;border:1px solid var(--line);border-radius:8px;background:var(--card);cursor:pointer;user-select:none}
.vis a{color:var(--acc)}
.preview table{border-collapse:collapse;margin:.4rem 0}
.preview td,.preview th{border:1px solid var(--line);padding:.25em .6em}
.preview th{background:var(--bg);text-align:left}
#printArea table{border-collapse:collapse}#printArea td,#printArea th{border:1px solid #bbb;padding:.2em .5em}
.fmtbar .tbl{display:none}
.fmtbar.intable .tbl{display:inline-block;background:var(--sel)}
/* ===== due colonne (iPad orizzontale, Mac, PC) ===== */
.emptypane{align-items:center;justify-content:center;color:var(--muted);text-align:center;padding:2rem}
body.two{display:grid;grid-template-columns:minmax(300px,360px) 1fr;height:100dvh;overflow:hidden}
body.two .view{max-width:none;margin:0;grid-row:1;height:100dvh}
body.two #listView{grid-column:1;display:flex;border-right:1px solid var(--line)}
body.two .view.active:not(#listView),body.two .emptypane:not([hidden]){grid-column:2}
body.two .emptypane:not([hidden]){display:flex}
body.two #noteBack,body.two #secretBack,body.two #lockBack{visibility:hidden}
body.two .fab{right:auto;left:calc(min(360px, 100vw) - 80px)}

/* ===== bacheca (kanban) ===== */
.fmtbar.kbmode{display:none}
.kanban{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.kanban[hidden]{display:none}
.kpre{padding:.4rem 1rem;color:var(--muted);font-size:.9rem;max-height:30%;overflow:auto;border-bottom:1px solid var(--line)}
.kcols{flex:1;display:flex;gap:.7rem;overflow-x:auto;overflow-y:hidden;padding:.8rem;scroll-snap-type:x proximity;align-items:flex-start}
.kcol{flex:0 0 min(78vw,280px);max-height:100%;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;scroll-snap-align:start}
.kcol header{display:flex;align-items:center;gap:.3rem;padding:.55rem .6rem .35rem .8rem}
.ktitle{flex:1;margin:0;font-size:1rem;outline:none;border-radius:6px;padding:.1rem .2rem}
.ktitle:focus{background:var(--bg)}
.kcount{font-size:.8rem;color:var(--muted)}
.kdelcol,.kdel{border:0;background:none;color:var(--muted);padding:.2em .4em;font-size:.85rem;opacity:.55}
.kcards{display:flex;flex-direction:column;gap:.45rem;padding:.2rem .55rem;overflow-y:auto;min-height:2.4rem}
.kcard{display:flex;align-items:flex-start;gap:.4rem;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.5rem .4rem .5rem .2rem;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.kcard input{margin-top:.25rem;width:1.05rem;height:1.05rem;accent-color:var(--acc);flex:0 0 auto}
.kcard.done .ktext{text-decoration:line-through;color:var(--muted)}
.ktext{flex:1;min-width:0;outline:none;line-height:1.4;word-break:break-word}
.ktext:empty::before{content:attr(data-ph);color:var(--muted)}
.kgrip{cursor:grab;touch-action:none;color:var(--muted);padding:.1rem .25rem;user-select:none;font-size:1.05rem;line-height:1.2}
.kdragging{opacity:.25}
.kph{border:2px dashed var(--acc);border-radius:10px;opacity:.6}
.kghost{position:fixed;left:0;top:0;z-index:50;pointer-events:none;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.kadd{border:0;background:none;color:var(--acc);text-align:left;padding:.55rem .8rem .7rem}
.kaddcol{flex:0 0 auto;border:2px dashed var(--line);background:none;color:var(--acc);border-radius:14px;padding:.8rem 1rem}
.sw.paper-kanban{background-image:linear-gradient(to right,rgba(10,87,194,.25) 0 28%,transparent 28% 36%,rgba(10,87,194,.25) 36% 64%,transparent 64% 72%,rgba(10,87,194,.25) 72%);background-size:100% 60%;background-repeat:no-repeat;background-position:0 50%}
.preview h2+ul{margin-top:.2rem}
.pagewrap{min-width:0;overflow:hidden}
.kanban{min-width:0;width:100%}
#noteView{overflow:hidden}

/* ===== ricerca ===== */
.searchwrap{display:flex;gap:.4rem;align-items:center}
.qbtn{font-size:1.1rem;padding:.3em .55em;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.folderbar{display:flex;gap:.4rem}
.chip.sel{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.list li mark{background:#ffe680;color:#1d2321;border-radius:2px;padding:0 .05em}
.quickdlg{padding:.6rem;top:12vh;margin-top:0;width:min(560px,94vw)}
.quickdlg input{width:100%;font-size:1.1rem;padding:.7em .8em;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.quicklist{list-style:none;margin:.4rem 0 0;padding:0;max-height:50dvh;overflow:auto}
.quicklist li{display:flex;justify-content:space-between;gap:.6rem;padding:.55rem .7rem;border-radius:8px;cursor:pointer}
.quicklist li small{color:var(--muted)}
.quicklist li.sel{background:var(--sel)}
.quicklist li.qnew{color:var(--acc)}
.quicklist mark{background:#ffe680;color:#1d2321;border-radius:2px}