:root{
  --board:#223457; --panel:#ecebe6; --card:#ffffff; --ink:#1b2232; --muted:#5a647a; --line:#d6d5ce;
  --gold:#c99a3e; --on-gold:#1b1608; --focus:#8f6410; --danger:#b3392f;
  --head-text:#f5f2e9; --head-muted:#b4bfd6; --card-shadow:0 1px 2px rgba(20,28,45,.2);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --board:#0e1524; --panel:#182134; --card:#243049; --ink:#e9edf6; --muted:#9ba6bd; --line:#313d5a;
    --gold:#d8aa4d; --on-gold:#1b1608; --focus:#e3b75a; --danger:#f08377;
    --head-text:#f1eee6; --head-muted:#8f9bb6; --card-shadow:0 1px 2px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --board:#0e1524; --panel:#182134; --card:#243049; --ink:#e9edf6; --muted:#9ba6bd; --line:#313d5a;
  --gold:#d8aa4d; --on-gold:#1b1608; --focus:#e3b75a; --danger:#f08377;
  --head-text:#f1eee6; --head-muted:#8f9bb6; --card-shadow:0 1px 2px rgba(0,0,0,.45);
}

@font-face{
  font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;background:var(--board);scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0;height:100%;background:var(--board);color:var(--ink);
  font:15px/1.4 "Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.top :focus-visible{outline-color:#e3b75a}

.app{height:100%;display:flex;flex-direction:column;min-width:0}

/* Intestazione */
.top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;padding:14px 20px 12px;color:var(--head-text)}
.top .title{
  flex:1 1 240px;min-width:0;max-width:560px;margin-left:-8px;padding:4px 8px;border:0;border-radius:8px;
  background:transparent;color:inherit;font-weight:700;font-size:22px;line-height:1.25;letter-spacing:-.01em;
}
.top .title:hover:not(:disabled){background:rgba(255,255,255,.09)}
.top .title:focus{background:rgba(255,255,255,.12)}
.who{display:flex;align-items:center;gap:10px;margin-left:auto;color:var(--head-muted);font-size:13px}
.who .btn{padding:5px 11px;color:var(--head-text);border-color:rgba(255,255,255,.28);font-weight:500;font-size:13px}
.who .btn:hover{background:rgba(255,255,255,.1)}
.info{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;color:var(--head-muted);font-size:13px}
.note{color:#f3d58f}
.note.err{color:#ffb4aa}

/* Bacheca */
.board{
  flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;
  display:flex;align-items:flex-start;gap:12px;padding:4px 20px 18px;
  scrollbar-color:rgba(255,255,255,.35) transparent;
}
.hint{margin:24px 0 0;color:var(--head-muted)}
.col{
  flex:none;width:300px;max-width:84vw;max-height:100%;display:flex;flex-direction:column;
  background:var(--panel);border-radius:14px;transition:box-shadow .12s;
}
.col.is-dragged{opacity:.45}
.col.drop-before{box-shadow:-5px 0 0 var(--gold)}
.col.drop-after{box-shadow:5px 0 0 var(--gold)}
.col-head{display:flex;align-items:center;gap:8px;padding:11px 8px 8px 14px;cursor:grab}
.col-head:active{cursor:grabbing}
.col-name{flex:1;min-width:0;margin:0;font-size:15px;font-weight:650;letter-spacing:.005em;overflow-wrap:anywhere}
.count{min-width:1.6em;text-align:center;padding:1px 7px;border-radius:99px;background:rgba(27,34,50,.08);color:var(--muted);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .count{background:rgba(255,255,255,.08)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .count{background:rgba(255,255,255,.08)}}

.icon-btn{display:inline-grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.icon-btn:hover{background:rgba(27,34,50,.09);color:var(--ink)}
.ic{display:inline-grid;place-items:center;line-height:0}

.cards{
  overflow-y:auto;min-height:8px;padding:2px 8px 6px;display:flex;flex-direction:column;gap:8px;
}
.card{
  background:var(--card);border-radius:10px;padding:10px 12px 9px;box-shadow:var(--card-shadow);
  cursor:pointer;transition:box-shadow .12s;
}
.card:hover{box-shadow:0 2px 8px rgba(20,28,45,.28)}
.card[draggable="true"]{cursor:grab}
.card.dragging{opacity:.35}
.card.landed{animation:land .9s ease-out}
@keyframes land{0%{box-shadow:0 0 0 3px var(--gold)}100%{box-shadow:var(--card-shadow)}}
.card-title{font-weight:500;overflow-wrap:anywhere}
.card-meta{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--muted);font-size:12.5px}
.slot{
  flex:none;height:var(--h,46px);border-radius:10px;border:2px dashed var(--gold);
  background:color-mix(in srgb,var(--gold) 16%,transparent);
}

.add-btn{
  display:flex;align-items:center;gap:8px;width:calc(100% - 16px);margin:0 8px 8px;padding:8px 8px;
  border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;text-align:left;
}
.add-btn:hover{background:rgba(27,34,50,.08);color:var(--ink)}
.add-col{background:rgba(255,255,255,.12);padding-top:8px}
.add-col .add-btn{color:var(--head-text);margin-bottom:8px}
.add-col .add-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.composer{padding:2px 8px 10px;display:flex;flex-direction:column;gap:8px}
.add-col .composer{padding-top:8px}
.composer-actions{display:flex;align-items:center;gap:6px}

/* Accesso */
.login-wrap{min-height:100%;display:grid;place-items:center;padding:24px}
.login{width:min(400px,100%);padding:26px 26px 22px;border-radius:16px;background:var(--panel);display:flex;flex-direction:column;gap:14px}
.login h1{margin:0;font-size:21px;letter-spacing:-.01em}
.login p{margin:0;color:var(--muted)}
.login .err{color:var(--danger);font-weight:500}
.login .btn{width:100%}
.login a{color:var(--focus)}
.close-x{color:var(--head-text)}

/* Stato vuoto */
.empty{
  align-self:center;margin:6vh auto 0;max-width:460px;padding:26px 26px 24px;border-radius:16px;
  background:var(--panel);
}
.empty h2{margin:0 0 8px;font-size:20px;letter-spacing:-.01em}
.empty p{margin:0 0 18px;color:var(--muted)}
.empty .row{display:flex;flex-wrap:wrap;gap:8px}

/* Campi e pulsanti */
input[type="text"],input[type="password"],textarea,select{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);
}
textarea{resize:vertical;min-height:2.6em}
.btn{
  padding:8px 14px;border:1px solid var(--line);border-radius:9px;background:transparent;font-weight:600;cursor:pointer;
}
.btn:hover:not(:disabled){background:rgba(27,34,50,.07)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn.primary:hover:not(:disabled){background:color-mix(in srgb,var(--gold) 88%,#fff)}
.btn.danger{color:var(--danger);border-color:transparent}
.btn.danger.armed{background:var(--danger);color:#fff;border-color:var(--danger)}

/* Finestre */
dialog{
  width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:16px;
  background:var(--panel);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.4);
}
dialog::backdrop{background:rgba(10,16,30,.55)}
.dlg{padding:20px 22px 18px;display:flex;flex-direction:column;gap:14px}
.dlg h2{margin:0;font-size:18px;letter-spacing:-.01em}
.field{display:flex;flex-direction:column;gap:5px}
.field label,.field .lab{font-size:13px;font-weight:600;color:var(--muted)}
.dlg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px}
.dlg-actions .spacer{margin-right:auto}
.history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.history li{display:flex;justify-content:space-between;gap:12px}
.history time{color:var(--muted);white-space:nowrap}
.sep{border:0;border-top:1px solid var(--line);margin:2px 0}
.row2{display:flex;gap:8px}

@media (max-width:560px){
  .top{padding:12px 14px 10px}
  .board{padding:4px 14px 16px}
  .col{width:82vw}
  .title{font-size:19px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.contents{display:contents}