:root{--spargs-blue:#004990;--spargs-blue-deep:#003468;--midnight:#031f3c;--midnight-2:#072b52;--orange:#f47225;--ember:#ff9a4d;--orange-deep:#c9541a;--paper:#f7f4ee;--paper-2:#efe9df;--steel:#8fa3b8;--steel-dim:#b9c4d0;--ink:#0c1b2b;--bg:var(--paper);--surface:#fff;--surface-alt:var(--paper-2);--text:var(--ink);--text-mute:#4a5b6d;--text-faint:var(--steel);--line:#dcd6ca;--line-strong:#c3bdaf;--brand:var(--spargs-blue);--brand-hover:var(--spargs-blue-deep);--accent:var(--orange);--accent-hover:var(--orange-deep);--on-brand:#fff;--on-accent:#fff;--ok:#2f8f5b;--warn:#d9922b;--err:#c0392b;--font-display:"Archivo", "Arial Black", sans-serif;--font-body:"Familjen Grotesk", system-ui, sans-serif;--font-mono:"Space Mono", ui-monospace, monospace;--step--1:clamp(.78rem, .76rem + .1vw, .84rem);--step-0:clamp(.95rem, .92rem + .15vw, 1.02rem);--step-1:clamp(1.2rem, 1.1rem + .5vw, 1.44rem);--step-2:clamp(1.6rem, 1.4rem + 1vw, 2.1rem);--step-3:clamp(2.2rem, 1.8rem + 2vw, 3.3rem);--step-4:clamp(3rem, 2.2rem + 4vw, 5.6rem);--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:72px;--radius:10px;--radius-lg:18px;--radius-pill:999px;--shadow-sm:0 1px 2px #031f3c14;--shadow-md:0 6px 20px #031f3c1f;--shadow-lg:0 18px 50px #031f3c2e;--ease:cubic-bezier(.2,.7,.2,1)}[data-theme=night]{--bg:var(--midnight);--surface:var(--midnight-2);--surface-alt:#0a2140;--text:#eaf1f8;--text-mute:#a9bccf;--text-faint:var(--steel);--line:#8fa3b833;--line-strong:#8fa3b861;--brand:#2f7fca;--brand-hover:#4f9bde;--on-brand:#fff;--shadow-md:0 6px 24px #00000080;--shadow-lg:0 20px 60px #0009}.stripes{--stripe-h:4px;--stripe-gap:5px;--stripe-w:56px;gap:var(--stripe-gap);flex-direction:column;display:inline-flex}.stripes i{height:var(--stripe-h);background:var(--accent);border-radius:2px;display:block}.stripes i:first-child{width:calc(var(--stripe-w) * .62)}.stripes i:nth-child(2){width:calc(var(--stripe-w) * .85)}.stripes i:nth-child(3){width:calc(var(--stripe-w) * 1)}.stripes i:nth-child(4){width:calc(var(--stripe-w) * .48)}.stripe-rule{height:4px;margin:var(--sp-5) 0;background:repeating-linear-gradient(90deg, var(--accent) 0 44px, transparent 44px 54px);border:0;border-radius:2px}html{scroll-behavior:smooth}body{font-family:var(--font-body);font-size:var(--step-0);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;margin:0;line-height:1.55}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;color:var(--text);margin:0;font-weight:800;line-height:1.02}.display{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.005em;font-weight:900;font-stretch:125%}.eyebrow{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}.mono{font-family:var(--font-mono)}.mute{color:var(--text-mute)}a{color:var(--brand);text-decoration:none}a:hover{color:var(--accent)}.btn{align-items:center;gap:var(--sp-2);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-stretch:112%;font-size:var(--step--1);border-radius:var(--radius-pill);cursor:pointer;transition:transform .15s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);border:2px solid #0000;padding:12px 22px;display:inline-flex}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 18px #f4722559}.btn-primary:hover{background:var(--accent-hover);box-shadow:0 8px 24px #f4722580}.btn-brand{background:var(--brand);color:var(--on-brand)}.btn-brand:hover{background:var(--brand-hover)}.btn-ghost{color:var(--brand);border-color:var(--line-strong);background:0 0}.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--sp-6);box-shadow:var(--shadow-sm);transition:box-shadow .25s var(--ease), transform .25s var(--ease);position:relative;overflow:hidden}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card:before{content:"";background:var(--accent);transform-origin:top;width:4px;transition:transform .3s var(--ease);position:absolute;top:0;bottom:0;left:0;transform:scaleY(0)}.card:hover:before{transform:scaleY(1)}.tag{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;border-radius:var(--radius-pill);color:var(--brand);background:#00499014;border:1px solid #00499033;align-items:center;gap:6px;padding:4px 12px;font-size:11px;display:inline-flex}.tag-accent{color:var(--accent-hover);background:#f472251f;border-color:#f472254d}.field{width:100%;font-family:var(--font-body);font-size:var(--step-0);color:var(--text);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius);transition:border-color .2s var(--ease), box-shadow .2s var(--ease);padding:12px 14px}.field:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 4px #0049901f}label.lbl{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin-bottom:6px;display:block}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0}a{text-decoration:none}button{font-family:inherit}.app{background:var(--bg);flex-direction:column;height:100vh;display:flex}.topbar{background:var(--midnight);border-bottom:3px solid var(--accent);flex:none;align-items:center;gap:18px;padding:12px 22px;display:flex}.topbar .wordmark{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.01em;color:#fff;align-items:center;gap:10px;font-size:20px;font-weight:900;font-stretch:125%;display:flex}.topbar .wordmark b{color:var(--accent)}.topbar .stripes i{background:var(--ember)}.topbar .crumb{color:var(--steel);font-family:var(--font-mono);font-size:13px}.topbar .crumb b{color:#eaf1f8;font-weight:700}.topbar .spacer{flex:1}.topbar .search{width:240px;max-width:40vw}.topbar .search input{border-radius:var(--radius-pill);color:#fff;width:100%;font-family:var(--font-body);background:#ffffff14;border:1.5px solid #fff3;padding:8px 14px;font-size:14px}.topbar .search input::placeholder{color:var(--steel)}.topbar .search input:focus{border-color:var(--accent);background:#ffffff24;outline:none}.home-wrap{max-width:1100px;padding:var(--sp-7) 24px;width:100%;margin:0 auto}.home-head{margin-bottom:var(--sp-6);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;display:flex}.home-head h1{font-size:var(--step-3)}.board-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;display:grid}.board-tile{border-radius:var(--radius-lg);padding:var(--sp-6);color:#fff;min-height:130px;box-shadow:var(--shadow-sm);transition:box-shadow .2s var(--ease), transform .2s var(--ease);flex-direction:column;justify-content:space-between;display:flex;position:relative;overflow:hidden}.board-tile:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.board-tile .name{font-family:var(--font-display);font-weight:800;font-size:var(--step-1);text-transform:uppercase}.board-tile .meta{font-family:var(--font-mono);opacity:.8;font-size:12px}.board-tile-new{border:2px dashed var(--line-strong);border-radius:var(--radius-lg);min-height:130px;color:var(--text-mute);font-family:var(--font-mono);cursor:pointer;background:0 0;justify-content:center;align-items:center;font-size:13px;display:flex}.board-tile-new:hover{border-color:var(--accent);color:var(--accent)}.board-context-menu{z-index:200;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:170px;padding:6px;position:fixed}.board-context-menu button{text-align:left;cursor:pointer;width:100%;color:var(--text);font-size:13px;font-family:var(--font-body);background:0 0;border:none;border-radius:6px;padding:8px 10px;display:block}.board-context-menu button:hover{color:var(--brand);background:#00499014}.new-board-form{border-radius:var(--radius-lg);border:2px dashed var(--line-strong);padding:var(--sp-5);flex-wrap:wrap;align-items:center;gap:10px;min-height:130px;display:flex}.new-board-form input[type=text]{flex:1;min-width:160px}.swatch-row{gap:6px;display:flex}.swatch-btn{cursor:pointer;border:2px solid #0000;border-radius:50%;width:22px;height:22px}.swatch-btn.selected{border-color:var(--ink)}.board-page{flex-direction:column;flex:1;min-height:0;display:flex}.board-page[data-tone=dark]{background:var(--midnight)}.board-header{flex:none;align-items:center;gap:14px;padding:16px 22px;display:flex}.board-title-input{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);color:inherit;border-radius:var(--radius);background:0 0;border:none;max-width:60vw;padding:4px 8px}.board-title-input:focus{background:#ffffff1f;outline:none}[data-tone=light] .board-title-input:focus{background:#0000000d}.board-header .spacer{flex:1}.board-content{flex:1;min-height:0;display:flex}.lists-row{flex:1;align-items:flex-start;gap:16px;min-width:0;height:100%;padding:0 22px 22px;display:flex;overflow:auto hidden}.list-column-group{border-radius:var(--radius-lg);width:280px;max-height:100%;transition:background .15s var(--ease);flex-direction:column;flex:none;gap:16px;display:flex;overflow-y:auto}.list-column-group.dragging-over{background:#f4722514}.list-column-drop-new{border-radius:var(--radius-lg);border:2px dashed #0000;min-height:60px}.list-column-drop-new.dragging-over{border-color:var(--accent);background:#f4722514}.board-sidebar{flex:none;padding:0 22px 22px 0;overflow-y:auto}.list-col{border-radius:var(--radius-lg);width:280px;max-height:60vh;box-shadow:var(--shadow-sm);background:#ffffffe6;flex-direction:column;flex:none;display:flex}[data-tone=dark] .list-col{background:var(--midnight-2)}.list-col-head{align-items:center;gap:8px;padding:12px 14px 6px;display:flex}.list-col-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);background:0 0;border:none;border-radius:6px;flex:1;min-width:0;padding:4px 6px;font-size:14px;font-weight:700;font-stretch:110%}.list-col-title:focus{background:#00499014;outline:none}[data-tone=dark] .list-col-title{color:#eaf1f8}[data-tone=dark] .list-col-title:focus{background:#ffffff1f}.list-count{font-family:var(--font-mono);color:var(--text-mute);border-radius:var(--radius-pill);background:#8fa3b82e;padding:2px 8px;font-size:11px}[data-tone=dark] .list-count{color:#cdd9e6;background:#ffffff24}.list-menu-btn{cursor:pointer;color:var(--text-mute);background:0 0;border:none;border-radius:6px;padding:4px 6px;font-size:16px;line-height:1}.list-menu-btn:hover{color:var(--accent);background:#f472251a}[data-tone=dark] .list-menu-btn{color:var(--steel)}[data-tone=dark] .list-menu-btn:hover{color:var(--accent);background:#f472252e}.cards-drop{flex:1;min-height:40px;padding:4px 10px;overflow-y:auto}.cards-drop.dragging-over{background:#f472250f}.card-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;box-shadow:var(--shadow-sm);transition:box-shadow .15s var(--ease);margin-bottom:8px;padding:10px 12px;position:relative}.card-item:hover{box-shadow:var(--shadow-md)}.card-item.dragging{box-shadow:var(--shadow-lg)}.card-cover{border-radius:var(--radius) var(--radius) 0 0;max-height:140px;margin:-10px -12px 8px;overflow:hidden}.card-cover img{object-fit:cover;width:100%;height:140px;display:block}.card-item .labels-row{flex-wrap:wrap;gap:5px;margin-bottom:6px;display:flex}.card-item .label-chip{border-radius:4px;width:34px;height:8px}.card-item .title{color:var(--text);font-size:14px;line-height:1.35}.card-item .foot-row{align-items:center;gap:10px;margin-top:8px;display:flex}.card-item .badge{font-family:var(--font-mono);color:var(--text-mute);align-items:center;gap:4px;font-size:11px;display:inline-flex}.card-item .badge.due-soon{color:var(--warn)}.card-item .badge.overdue{color:var(--err)}.card-item .badge.done-all{color:var(--ok)}.add-card-row{padding:6px 10px 12px}.add-card-btn{text-align:left;cursor:pointer;border-radius:var(--radius);width:100%;color:var(--text-mute);font-family:var(--font-body);background:0 0;border:none;padding:8px 6px;font-size:14px}.add-card-btn:hover{color:var(--brand);background:#0049900f}.add-card-form textarea,.add-card-form input{resize:none;border-radius:var(--radius);width:100%}.add-card-form .row{gap:8px;margin-top:8px;display:flex}.add-list-form-inline{align-items:center;gap:8px;display:flex}.add-list-form-inline input{width:180px}.modal-veil{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:100;background:#031f3c8c;justify-content:center;align-items:flex-start;padding:5vh 16px;display:flex;position:fixed;inset:0;overflow-y:auto}.modal-card{background:var(--surface);border-radius:var(--radius-lg);width:min(640px,100%);box-shadow:var(--shadow-lg);overflow:hidden}.modal-head{background:var(--brand);color:#fff;padding:18px 22px;position:relative}.modal-head input{color:#fff;font-family:var(--font-display);font-weight:800;font-size:var(--step-1);background:0 0;border:none;border-radius:6px;width:92%;padding:4px 6px}.modal-head input:focus{background:#ffffff24;outline:none}.modal-close{color:#fff;cursor:pointer;opacity:.8;background:0 0;border:none;font-size:20px;line-height:1;position:absolute;top:14px;right:16px}.modal-close:hover{opacity:1;color:var(--accent)}.modal-attribution{font-family:var(--font-mono);color:var(--text-faint);border-bottom:1px solid var(--line);padding:8px 22px;font-size:11px}.modal-body{flex-direction:column;gap:22px;padding:20px 22px 26px;display:flex}.modal-section .sec-title{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);align-items:center;gap:8px;margin-bottom:8px;font-size:11px;display:flex}.modal-section textarea{border-radius:var(--radius);resize:vertical;width:100%;min-height:80px}.chips-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.label-swatch{border-radius:var(--radius-pill);font-family:var(--font-mono);color:#fff;cursor:pointer;border:none;align-items:center;gap:6px;padding:4px 12px;font-size:11px;display:inline-flex}.label-swatch.ghost{border:1.5px dashed var(--line-strong);color:var(--text-mute);background:0 0}.label-picker-pop{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);flex-direction:column;gap:8px;margin-top:8px;padding:12px;display:flex}.label-picker-row{align-items:center;gap:8px;display:flex}.label-picker-row .swatch{cursor:pointer;border:2px solid #0000;border-radius:5px;flex:none;width:34px;height:22px}.label-picker-row .swatch.active{border-color:var(--ink)}.label-picker-row input{flex:1}.checklist-block{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;padding:12px}.checklist-block .cl-head{align-items:center;gap:10px;margin-bottom:8px;display:flex}.checklist-block .cl-head b{font-family:var(--font-display);flex:1;font-size:14px}.progress-bar{background:var(--paper-2);border-radius:4px;height:6px;margin:6px 0 10px;overflow:hidden}.progress-bar>i{background:var(--accent);height:100%;transition:width .2s var(--ease);display:block}.cl-item{align-items:center;gap:8px;padding:4px 0;display:flex}.cl-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.cl-item.done span{color:var(--text-faint);text-decoration:line-through}.cl-item .del-btn,.icon-btn{color:var(--text-faint);cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:14px}.cl-item .del-btn:hover,.icon-btn:hover{color:var(--err)}.due-row input[type=date]{width:200px}.danger-row{justify-content:flex-end;display:flex}.btn-danger{color:var(--err);border:1.5px solid var(--err);background:0 0}.btn-danger:hover{background:var(--err);color:#fff}.btn-sm{padding:6px 14px;font-size:12px}.empty-state{color:var(--text-mute);font-family:var(--font-mono);text-align:center;padding:20px;font-size:13px}[data-tone=dark] .empty-state{color:var(--steel)}.inline-form{align-items:center;gap:8px;display:flex}.login-wrap{background:var(--midnight);flex:1;justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--sp-7) var(--sp-6);width:min(380px,90vw)}.login-card .wordmark{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.01em;align-items:center;gap:10px;font-size:20px;font-weight:900;font-stretch:125%;display:flex}.login-form{flex-direction:column;display:flex}.login-error{border-radius:var(--radius);color:var(--err);font-size:13px;font-family:var(--font-mono);background:#c0392b1a;margin-top:12px;padding:8px 12px}.user-chip{color:var(--steel);font-family:var(--font-mono);align-items:center;gap:10px;font-size:12px;display:flex}.user-chip .logout-btn{color:#eaf1f8;border-radius:var(--radius-pill);cursor:pointer;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-family:var(--font-mono);background:0 0;border:1px solid #ffffff40;padding:5px 12px}.user-chip .logout-btn:hover{border-color:var(--accent);color:var(--accent)}.admin-link{color:var(--ember);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:11px}.admin-link:hover{color:var(--accent)}.attachments-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:12px;display:grid}.attachment-tile{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-alt);position:relative;overflow:hidden}.attachment-tile img{object-fit:cover;width:100%;height:90px;display:block}.attachment-file{background:var(--surface-alt);justify-content:center;align-items:center;height:90px;font-size:28px;display:flex}.attachment-meta{font-size:11px;font-family:var(--font-mono);flex-direction:column;gap:2px;padding:6px 8px;display:flex}.attachment-meta span:first-child{color:var(--text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.attachment-del{color:#fff;background:#031f3c99;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;padding:0;font-size:11px;display:flex;position:absolute;top:4px;right:4px}.attachment-del:hover{background:var(--err);color:#fff}.dropzone{border:2px dashed var(--line-strong);border-radius:var(--radius-lg);text-align:center;color:var(--text-mute);cursor:pointer;font-family:var(--font-mono);transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);margin-bottom:18px;padding:28px;font-size:13px}.dropzone:hover,.dropzone.drag-over{border-color:var(--accent);color:var(--accent);background:#f472250f}[data-tone=dark] .dropzone{color:var(--steel);border-color:#ffffff40}[data-tone=dark] .dropzone:hover,[data-tone=dark] .dropzone.drag-over{color:var(--accent);border-color:var(--accent)}.upload-list{flex-direction:column;gap:8px;display:flex}.upload-row{border:1px solid var(--line);border-radius:var(--radius);align-items:center;gap:12px;padding:8px;display:flex}.upload-thumb{background:var(--surface-alt);border-radius:6px;flex:none;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;display:flex;overflow:hidden}.upload-thumb img{object-fit:cover;width:100%;height:100%}.upload-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.upload-info a{color:var(--brand);text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.upload-info a:hover{color:var(--accent)}.uploads-col{max-height:100%}.uploads-col-title{cursor:default;flex:1}.uploads-drop{flex-direction:column;display:flex}.upload-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);align-items:center;gap:8px;margin-bottom:8px;padding:8px;display:flex;position:relative}.upload-card-del{padding:2px 5px;font-size:11px;position:absolute;top:2px;right:2px}.dropzone-sm{border-radius:var(--radius);margin-bottom:0;padding:14px 10px;font-size:11px}*{scrollbar-width:thin;scrollbar-color:#8fa3b880 transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#8fa3b880 padding-box padding-box;border:2px solid #0000;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:padding-box}[data-tone=dark] ::-webkit-scrollbar-thumb{background:#ffffff40 padding-box padding-box}[data-tone=dark] ::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:padding-box}[data-tone=dark] *{scrollbar-color:#ffffff40 transparent}