*{box-sizing:border-box;margin:0}
:root{--f:'Figtree',system-ui,sans-serif;--fh:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
--bg:#EDF1F5;--sf:#fff;--sf2:#F5F7FA;--ink:#17202E;--mute:#66728A;--line:#DCE2EB;--rail:#17203A;--ac:#0E8F86;--acx:#fff}
[data-theme=grey]{--bg:#D8DCE3;--sf:#EAECF0;--sf2:#DFE2E8;--ink:#212A39;--mute:#5B6577;--line:#C2C8D2;--rail:#2B3446}
[data-theme=black]{--bg:#0E121A;--sf:#171D28;--sf2:#1E2531;--ink:#E7ECF4;--mute:#8994A8;--line:#293241;--rail:#090C12;--ac:#3CC8B8;--acx:#06201d}
body{font:15px/1.45 var(--f);background:var(--bg);color:var(--ink);min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.rail{background:var(--rail);color:#DCE3F5;padding:22px 14px;display:flex;flex-direction:column;gap:26px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{font:700 20px var(--fh);color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px;padding:0 8px}
.brand i{width:22px;height:22px;border-radius:3px;background:linear-gradient(90deg,#F2B705 0 30%,transparent 30% 36%,var(--ac) 36% 64%,transparent 64% 70%,#fff 70%)}
.rail-head{display:flex;justify-content:space-between;align-items:center;padding:0 8px 6px}
.rail h3{font:600 13px var(--f);opacity:.6}
.link{font-size:13px;color:var(--ac);font-weight:600}
.rail-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:8px;text-align:left;color:inherit;font-size:14px}
.rail-item:hover{background:rgba(255,255,255,.07)}
.rail-item.static{cursor:default;pointer-events:none}
.rail-item.static:hover{background:none}
.rail-item.on{background:rgba(255,255,255,.14);font-weight:600}
.rail-item .g{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-item em{font-style:normal;opacity:.6;font-size:13px}
.rail-item .d{width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--c);flex:none}
.rail-item.plus{color:var(--ac);font-weight:600}
.stage{min-width:0;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:16px;padding:14px 28px;background:var(--sf);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.title-input{flex:1 1 180px;min-width:0;font:700 26px var(--fh);letter-spacing:-.01em;background:none;border:0;border-bottom:2px solid transparent;padding:2px 0}
.title-input:hover,.title-input:focus{border-bottom-color:var(--line);outline:0}
.summary{color:var(--mute);font-size:13px;white-space:nowrap}
.find{width:210px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--sf2)}
.rail-toggle{display:none;font-weight:600;font-size: 30px;align-items:center;justify-content:center;}
.btn{padding:9px 16px;border-radius:8px;background:var(--ac);color:var(--acx);font-weight:600}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.7;cursor:default;filter:none}
.btn-secondary{background:var(--sf2);color:var(--ink);border:1px solid var(--line)}
.btn-danger{background:#C92A2A;color:#fff}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-icon{padding:2px 8px;font-size:20px;line-height:1;color:var(--mute);border-radius:6px}
.btn-icon:hover{background:var(--sf2);color:var(--ink)}
.board{padding:24px 28px 60px;display:flex;flex-direction:column;gap:18px}
.lane{display:grid;grid-template-columns:190px minmax(0,1fr);background:var(--sf);border:1px solid var(--line);border-radius:14px}
.lane-head{padding:16px;border-right:1px solid var(--line);border-radius:14px 0 0 14px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 16%,transparent),transparent 75%)}
.lane-top{display:flex;align-items:center;gap:9px}
.lane-dot{width:11px;height:11px;border-radius:2px;transform:rotate(45deg);background:var(--c);flex:none}
.column-title{flex:1;font:600 17px/1.2 var(--fh);overflow-wrap:anywhere}
.lane-count{font-size:13px;color:var(--mute)}
.lane-add{align-self:flex-start;margin-top:auto;font-size:13px;font-weight:600;color:var(--ac);padding:4px 0}
.lane-add:hover{text-decoration:underline}
.column-menu-container{position:relative}
.column-menu{display:none;position:absolute;right:0;top:100%;z-index:20;min-width:150px;padding:4px;background:var(--sf);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.column-menu.show{display:block}
.column-menu-item{display:block;width:100%;padding:8px 10px;border-radius:6px;text-align:left;font-size:14px}
.column-menu-item:hover:not(:disabled){background:var(--sf2)}
.column-menu-item:disabled{opacity:.35;cursor:default}
.column-menu-item.danger{color:#E03131}
.column-menu-sep{height:1px;margin:4px 6px;background:var(--line)}

/* stage drag and drop */
.lane-head{cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lane-head button{cursor:pointer}
.column.is-placeholder-lane{background:color-mix(in srgb,var(--ac) 9%,transparent)!important;border:1.5px dashed color-mix(in srgb,var(--ac) 75%,transparent)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.column.is-placeholder-lane>*{visibility:hidden}
.drag-ghost.stage-ghost{overflow:hidden;box-sizing:border-box}
.drag-ghost.stage-ghost.lifted{scale:1.015;rotate:.6deg}
.is-dragging-stage .column{cursor:grabbing}
.tasks-container{position:relative;display:flex;gap:14px;padding:20px 16px 14px;overflow-x:auto;min-height:140px;scroll-snap-type:x proximity;scroll-padding-left:16px;transition:background-color .2s}
.tasks-container.drag-over{background:color-mix(in srgb,var(--ac) 7%,transparent);border-radius:0 14px 14px 0}
.tasks-container.drag-over>.empty{display:none}
.empty{align-self:center;color:var(--mute);font-size:14px}
.task-card{--cw:270px;flex:0 0 var(--cw);width:var(--cw);position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-content:start;padding:14px;background:var(--sf2);border:1px solid var(--line);border-radius:12px;cursor:grab;scroll-snap-align:start;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.task-card.colored{--mute:color-mix(in srgb,var(--ink) 74%,var(--sf2));background:color-mix(in srgb,var(--tc) 30%,var(--sf2));border-color:color-mix(in srgb,var(--tc) 65%,var(--line))}
.task-card:hover{border-color:var(--ac)}
.task-card.colored:hover{border-color:color-mix(in srgb,var(--tc) 55%,var(--ink))}
.t-main{min-width:0}
.t-head{display:flex;align-items:flex-start;gap:8px}
.t-head{gap:0}
.t-check{appearance:none;-webkit-appearance:none;flex:none;width:0;height:16px;margin:2px 0 0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px var(--mute);cursor:pointer;opacity:0;overflow:hidden;display:grid;place-content:center;transition:width .2s ease,margin-right .2s ease,opacity .15s ease,background-color .15s,box-shadow .15s}
.t-check::after{content:"";width:8px;height:4px;border:solid var(--acx);border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.t-check:checked{width:16px;margin-right:8px;opacity:1;background:var(--ac);box-shadow:inset 0 0 0 1.5px var(--ac)}
.t-check:checked::after{opacity:1}
.task-card:hover .t-check,.task-card:focus-within .t-check{width:16px;margin-right:8px;opacity:1}
.t-check:hover{box-shadow:inset 0 0 0 1.5px var(--ac)}
@media(hover:none){.t-check{width:16px;margin-right:8px;opacity:1}}
.archive-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid var(--line);border-radius:10px}
.archive-info{display:flex;flex-direction:column;min-width:0}
.archive-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.archive-meta{font-size:12px;color:var(--mute)}
.task-card.done .task-title{text-decoration:line-through;opacity:.7}
.task-title{font:600 15px/1.3 var(--fh);overflow-wrap:anywhere}
.task-description{margin-top:4px;color:var(--mute);font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.t-side{display:flex;align-items:flex-start;gap:6px}
.t-pct{display:none;font-size:12px;font-weight:600;padding-top:1px}
.t-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:12px}
.m-item{display:flex;align-items:center;gap:6px}
.m-prio{margin-left:auto}
.lbl{color:var(--mute);font-size:12px}
.pips{display:flex;gap:3px}
.pips i{width:12px;height:5px;border-radius:2px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.pips i.f{background:var(--ink)}
.prio{font-weight:600;padding:1px 9px;border-radius:999px;color:#fff}
.prio-high{background:#C92A2A}.prio-medium{background:#B45309}.prio-low{background:#2B8A5A}
.t-progress{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
.t-progress .track{flex:1;height:6px;border-radius:3px;background:color-mix(in srgb,var(--ink) 18%,transparent);overflow:hidden}
.t-progress .track i{display:block;height:100%;border-radius:3px;background:var(--ac)}
.t-progress span{min-width:32px;text-align:right}
.t-actions{display:flex;opacity:0}
.task-card:hover .t-actions,.task-card:focus-within .t-actions{opacity:1}
@media(hover:none){.t-actions{opacity:1}}
.t-actions button{padding:0 5px;font-size:16px;line-height:1.2;color:var(--mute)}
.t-actions button:hover{color:var(--ink)}
[data-density=compact] .task-card{padding:9px 11px;gap:5px 8px;border-radius:9px}
[data-density=compact] .task-title{font-size:13.5px;line-height:1.25}
[data-density=compact] .task-description{font-size:12px;margin-top:2px;-webkit-line-clamp:2}
[data-density=compact] :is(.lbl,.t-meta,.t-progress){font-size:11px}
[data-density=compact] .t-meta{gap:4px 10px}
[data-density=compact] .m-item{gap:4px}
[data-density=compact] .pips{gap:2px}
[data-density=compact] .pips i{width:9px;height:4px}
[data-density=compact] .prio{padding:0 7px}
[data-density=compact] .t-progress{gap:6px}
[data-density=compact] .t-progress .track{height:4px}
[data-density=compact] .t-progress span{min-width:28px}
[data-density=compact] .t-actions button{font-size:14px}
[data-density=compact] .tasks-container{gap:10px}
[data-density=dense] :is(.task-description,.m-diff,.lbl,.t-progress){display:none}
[data-density=dense] .t-pct{display:block}
[data-density=dense] .task-card{padding:10px 12px}
[data-density=dense] .tasks-container{min-height:0}
[data-columns="3"] .task-card{--cw:330px}
[data-columns="5"] .task-card{--cw:230px}
[data-density=compact] .task-card{--cw:225px}
[data-density=compact][data-columns="3"] .task-card{--cw:280px}
[data-density=compact][data-columns="5"] .task-card{--cw:195px}
.add-lane{border:2px dashed var(--line);border-radius:14px}
.add-column-btn{width:100%;padding:16px;font-weight:600;color:var(--mute)}
.add-column-btn:hover{color:var(--ac)}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(8,12,20,.55);z-index:50}
.modal.show{display:flex}
#confirm-dialog,#input-dialog{z-index:60}
.rail-foot{margin-top:auto;padding:0 8px;font-size:12px;opacity:.5}
.modal-content{width:min(420px,100%);max-height:100%;overflow:auto;padding:22px;background:var(--sf);border:1px solid var(--line);border-radius:14px}
#task-modal,#column-modal,#board-manager-modal,#archive-modal{justify-content:flex-end;align-items:stretch;padding:0}
#task-modal .modal-content,#column-modal .modal-content,#board-manager-modal .modal-content,#archive-modal .modal-content{width:min(460px,100%);height:100%;border-radius:0;border-width:0 0 0 1px;animation:slide .22s ease-out}
@keyframes slide{from{transform:translateX(28px);opacity:0}}
@keyframes pulse{50%{transform:scale(1.04)}}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.modal-title,.modal-header h2{font:700 21px var(--fh)}
.modal-close{font-size:26px;line-height:1;padding:0 6px;color:var(--mute)}
.modal-body p{margin-bottom:12px;color:var(--mute)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.form-group{margin-bottom:16px}
.form-label{display:block;margin-bottom:6px;font-size:13px;font-weight:600}
.form-input,.form-textarea,.form-select{width:100%;padding:10px 12px;background:var(--sf2);border:1px solid var(--line);border-radius:8px}
.form-textarea{resize:vertical}
.title-field{font:600 19px var(--fh);margin-bottom:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.slider{width:100%;accent-color:var(--ac)}
.slider-value{font-size:13px;color:var(--mute)}
.color-picker-container{display:flex;flex-wrap:wrap;gap:6px}
.color-option{padding:3px;border-radius:8px;border:2px solid transparent}
.color-option.selected{border-color:var(--ink)}
.color-circle{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;font-size:12px;border:1px solid var(--line)}
.color-circle.no-color,.color-circle.custom{background:var(--sf2)}
.board-actions-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.board-item-compact{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;margin-bottom:8px;border:1px solid var(--line);border-radius:10px}
.board-item-compact.current-board{border-color:var(--ac)}
.board-item-left,.board-item-right{display:flex;align-items:center;gap:8px}
.board-status{color:var(--ac)}
.board-badge{font-size:11px;padding:0 8px;border-radius:999px;background:var(--ac);color:var(--acx)}
.board-stats,.board-save-status,.footer-note,.empty-state-compact{font-size:13px;color:var(--mute)}
.boards-divider{height:1px;margin:12px 0;background:var(--line)}
.btn-compact{padding:3px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px}
.btn-compact.btn-danger{background:none;color:#E03131}
.choice-options{display:grid;gap:8px}
.toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translate(-50%,16px);padding:10px 16px;border-radius:8px;background:var(--ink);color:var(--bg);opacity:0;pointer-events:none;transition:.2s}
.toast.error{background:#C92A2A;color:#fff}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){
.app{grid-template-columns:1fr}
.rail{position:fixed;inset:0 auto 0 0;width:260px;z-index:40;transform:translateX(-100%);transition:transform .2s}
.rail-open .rail{transform:none}
.rail-toggle{display:block}
.bar{padding:12px 16px;flex-wrap:wrap;gap:10px}
.find{width:100%;order:9}
.board{padding:16px}
.lane{grid-template-columns:minmax(0,1fr)}
.lane-head{border-right:0;border-bottom:1px solid var(--line);border-radius:14px 14px 0 0;flex-direction:row;align-items:center;flex-wrap:wrap}
.lane-top{flex:1}.lane-add{margin:0}
.form-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* board layout toggle */
.view-toggle{display:flex;padding:3px;gap:2px;background:var(--sf2);border:1px solid var(--line);border-radius:10px}
.view-toggle button{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:7px;font-size:13px;font-weight:600;color:var(--mute)}
.view-toggle svg{fill:currentColor}
.view-toggle button:hover{color:var(--ink)}
.view-toggle button[aria-pressed=true]{background:var(--ac);color:var(--acx)}
[data-columns="3"]{--n:3}[data-columns="4"]{--n:4}[data-columns="5"]{--n:5}
/* classic vertical columns */
[data-view=columns] .board{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));align-items:start;gap:16px}
[data-view=columns] .lane{display:flex;flex-direction:column;min-width:0}
[data-view=columns] .lane-head{border-right:0;border-bottom:1px solid var(--line);border-radius:14px 14px 0 0;flex:none;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,transparent),transparent)}
[data-view=columns] .lane-add{align-self:stretch;margin-top:6px;padding:7px;text-align:center;border:1px dashed var(--line);border-radius:8px}
[data-view=columns] .lane-add:hover{text-decoration:none;border-color:var(--ac)}
[data-view=columns] .tasks-container{flex-direction:column;overflow:visible;min-height:120px;padding:18px 12px 12px;scroll-snap-type:none}
[data-view=columns] .tasks-container.drag-over{border-radius:0 0 14px 14px}
[data-view=columns] .task-card{flex:none;width:auto;scroll-snap-align:none}
@media(max-width:900px){
[data-view=columns] .board{grid-template-columns:repeat(min(var(--n),2),minmax(0,1fr))}
[data-view=columns] .lane-head{flex-direction:column;align-items:stretch}
[data-view=columns] .lane-add{margin-top:6px}
.view-toggle{order:8}}
@media(max-width:600px){[data-view=columns] .board{grid-template-columns:minmax(0,1fr)}}

/* drag and drop: lifted clone, slot, landing */
.is-dragging,.is-dragging *{cursor:grabbing!important}
.is-dragging .tasks-container,.snap-off .tasks-container{scroll-snap-type:none}
.is-dragging .task-card{pointer-events:none}
.task-card.is-placeholder,.task-card.colored.is-placeholder{background:color-mix(in srgb,var(--ac) 9%,transparent);border:1.5px dashed color-mix(in srgb,var(--ac) 75%,transparent)}
.task-card.is-placeholder>*{visibility:hidden}
.drag-ghost{position:fixed;left:0;top:0;margin:0;z-index:200;pointer-events:none;cursor:grabbing;
transition:scale .18s cubic-bezier(.2,.8,.2,1),rotate .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease;
box-shadow:0 1px 3px rgba(0,0,0,.18)}
.drag-ghost.lifted{scale:1.03;rotate:1.5deg;box-shadow:0 20px 44px rgba(0,0,0,.36),0 4px 12px rgba(0,0,0,.22)}
.drag-ghost.landing{transition:translate .26s cubic-bezier(.2,.9,.25,1),scale .26s cubic-bezier(.2,.9,.25,1),rotate .26s cubic-bezier(.2,.9,.25,1),box-shadow .26s ease}
@keyframes settle{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--ac) 70%,transparent)}to{box-shadow:0 0 0 10px transparent}}
.task-card.just-dropped{animation:settle .55s ease-out}

/* Scrollbars */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--mute) 45%,transparent);border:3px solid transparent;border-radius:999px;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--mute);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);background-clip:content-box}
.rail::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4);background-clip:content-box}
@supports not selector(::-webkit-scrollbar){
    *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--mute) 45%,transparent) transparent}
    .rail{scrollbar-color:rgba(255,255,255,.25) transparent}
}

/* Board manager: reorder + trash */
.sort-select{padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:var(--sf2);font-size:13px;font-weight:600;cursor:pointer}
.board-item-compact{align-items:center}
.board-item-compact[draggable=true]{cursor:grab}
.board-item-compact.dragging{opacity:.4}
.board-item-compact.drop-before{box-shadow:0 -3px 0 -1px var(--ac)}
.board-item-compact.drop-after{box-shadow:0 3px 0 -1px var(--ac)}
.board-item-left{min-width:0}
.board-item-left .board-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drag-handle{color:var(--mute);letter-spacing:-2px;user-select:none;font-size:13px}
.btn-move{padding:3px 7px;font-size:11px;color:var(--mute)}
.btn-move:hover:not(:disabled){color:var(--ink);background:var(--sf2)}
.btn-compact:disabled{opacity:.35;cursor:default}
.trash-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.trash-section summary{cursor:pointer;font-weight:600;margin-bottom:10px;color:var(--mute)}
.trash-section summary:hover{color:var(--ink)}
.trash-empty{margin-top:4px}

/* Wallpaper layer: same box as the board window (right of the sidebar), so the crop ratio matches it */
.wallpaper{position:fixed;top:0;right:0;bottom:0;left:250px;z-index:0;pointer-events:none;background:center/cover no-repeat}
.stage{position:relative;z-index:1}
@media(max-width:900px){.wallpaper{left:0}}

/* Header bar: optional semi-transparent + blur */
[data-header=blur] .bar{background:color-mix(in srgb,var(--sf) 60%,transparent);-webkit-backdrop-filter:blur(var(--pbh,16px)) saturate(1.5);backdrop-filter:blur(var(--pbh,16px)) saturate(1.5)}
[data-header=blur] :is(.find,.view-toggle){background:color-mix(in srgb,var(--sf2) 55%,transparent)}

/* Wallpaper dialog + crop frame */
.wp-content{width:min(560px,100%)}
.wp-hint{margin-bottom:12px;font-size:13px;color:var(--mute)}
.wp-frame{position:relative;overflow:hidden;width:min(100%,calc(52vh*var(--wp-ratio,1.6)));aspect-ratio:var(--wp-ratio,1.6);margin:0 auto;border-radius:10px;background:var(--sf2);box-shadow:0 0 0 1px var(--line);touch-action:none;user-select:none;-webkit-user-select:none}
.wp-frame.editable{cursor:grab}
.wp-frame.dragging{cursor:grabbing}
.wp-frame img{display:none;position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none;will-change:transform}
.wp-frame.has-img img{display:block}
.wp-empty{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font-size:14px;color:var(--mute)}
.wp-frame.has-img .wp-empty{display:none}
.wp-frame:not(.has-img){cursor:pointer}
.wp-frame:not(.has-img):hover{box-shadow:0 0 0 1.5px var(--ac)}
.wp-frame:not(.has-img):hover .wp-empty{color:var(--ink)}
.wp-frame:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.wp-zoom{display:flex;align-items:center;gap:12px;margin-top:14px}
.wp-zoom label{font-size:13px;font-weight:600}
.wp-zoom .slider{flex:1}
.wp-zoom.hidden{display:none}
.wp-actions{flex-wrap:wrap}
.wp-actions .wp-remove{margin-right:auto}
.wp-actions .wp-remove:disabled{opacity:.4;cursor:not-allowed}
.wp-toggle{display:flex;align-items:center;gap:12px;margin-top:12px;cursor:pointer}
.wp-toggle.sect{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* round check, same look as the task card's done checkbox */
.wp-toggle input{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px var(--mute);cursor:pointer;display:grid;place-content:center;transition:background-color .15s,box-shadow .15s}
.wp-toggle input::after{content:"";width:8px;height:4px;border:solid var(--acx);border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.wp-toggle input:checked{background:var(--ac);box-shadow:inset 0 0 0 1.5px var(--ac)}
.wp-toggle input:checked::after{opacity:1}
.wp-toggle:hover input:not(:checked){box-shadow:inset 0 0 0 1.5px var(--ac)}
.wp-toggle input:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.wp-toggle span{display:flex;flex-direction:column}
.wp-toggle b{font-size:14px;font-weight:600}
.wp-toggle small{font-size:12px;color:var(--mute)}
.wp-zoom output{min-width:38px;text-align:right;font-size:13px;color:var(--mute)}

/* Translucent stages and cards: --pa is the opacity of the surface color */
[data-glass-lanes=on] .lane{background:color-mix(in srgb,var(--sf) var(--pa,55%),transparent);-webkit-backdrop-filter:blur(var(--pbs,10px));backdrop-filter:blur(var(--pbs,10px))}
[data-glass-lanes=on] .lane:has(.column-menu.show){position:relative;z-index:30}
[data-glass-lanes=on] .add-lane{background:color-mix(in srgb,var(--sf) var(--pa,55%),transparent)}
[data-glass-cards=on] .task-card:not(.is-placeholder){background:color-mix(in srgb,var(--sf2) var(--pa,55%),transparent)}
[data-glass-cards=on] .task-card.colored:not(.is-placeholder){background:color-mix(in srgb,color-mix(in srgb,var(--tc) 30%,var(--sf2)) var(--pa,55%),transparent)}

/* Sidebar: icons, two-line items, segmented controls, switch */
.rail-item .ic{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.rail-item.two{align-items:center;gap:10px}
.rail .g b{display:block;font-weight:inherit;overflow:hidden;text-overflow:ellipsis}
.rail .g small{display:block;font-size:12px;line-height:1.3;opacity:.55;white-space:normal}
.rail-item.two .g{white-space:normal}
.ctl{padding:6px 10px 8px}
.ctl-label{font-size:13px;font-weight:600;margin-bottom:6px}
.ctl-hint{margin-top:5px;font-size:12px;line-height:1.3;opacity:.55}
.seg{display:flex;gap:2px;padding:3px;border-radius:9px;background:rgba(255,255,255,.08)}
.seg button{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 2px;border-radius:7px;font-size:12.5px;font-weight:600;color:rgba(220,227,245,.72);white-space:nowrap}
.seg button:hover{color:#fff;background:rgba(255,255,255,.07)}
.seg button[aria-pressed=true]{background:var(--ac);color:var(--acx)}
.seg .ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ctl-row{display:flex;align-items:center;gap:10px;justify-content:space-between}
.ctl-row .g{flex:1;min-width:0;font-size:13px;font-weight:600}
.ctl-row .g small{font-weight:400}
.switch{position:relative;flex:none;width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.22);transition:background .18s}
.switch i{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s}
.switch[aria-checked=true]{background:var(--ac)}
.switch[aria-checked=true] i{transform:translateX(16px)}

/* Header bar: archive icon buttons */
.bar-actions{display:flex;gap:8px}
.icon-btn{position:relative;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--sf2);color:var(--ink)}
.icon-btn svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{border-color:var(--ac);color:var(--ac)}
.icon-btn.is-idle{color:var(--mute);opacity:.7}
.icon-btn .badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:var(--ac);color:var(--acx);font-size:11px;font-weight:700;line-height:1}
.icon-btn .badge[hidden]{display:none}
[data-header=blur] .icon-btn{background:color-mix(in srgb,var(--sf2) 55%,transparent)}

/* Panels that open next to what was clicked (board manager, stage and task editors) */
.modal.anchored{background:rgba(8,12,20,.3)}
#task-modal.anchored .modal-content,#column-modal.anchored .modal-content,#board-manager-modal.anchored .modal-content{position:fixed;left:0;top:0;width:min(460px,calc(100vw - 24px));height:auto;max-height:calc(100vh - 24px);border-width:1px;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.4);animation:pop .16s ease-out}
@keyframes pop{from{transform:translateY(6px) scale(.97);opacity:0}}

/* Segmented control on a light surface (task priority) */
.seg-form{background:var(--sf2);border:1px solid var(--line)}
.seg-form button{padding:8px 2px;color:var(--mute)}
.seg-form button:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.seg-form button[aria-pressed=true]{background:var(--ac);color:var(--acx)}
.btn-danger-outline{color:#E03131}
#board-manager-modal.anchored .modal-content{width:min(520px,calc(100vw - 24px))}
.board-item-right{flex:none}
.board-item-right :is(.board-save-status,.board-stats){white-space:nowrap}

/* Logo adjustment */
.brand img {
    width: 30px;
    height: auto;
    object-fit: contain;
}

/* ---- Account button, menu and sign in dialog ---- */
.account-wrap{position:relative;flex:none}
.account-wrap[hidden]{display:none}
.account-avatar{width:36px;height:36px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.account-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:8px;background:var(--sf);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.25);z-index:60}
.account-menu[hidden]{display:none}
.account-email{padding:8px 10px;font-size:13px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu button{display:block;width:100%;padding:9px 10px;text-align:left;border-radius:8px}
.account-menu button:hover{background:var(--sf2)}
#account-signout{background:#C92A2A;color:#fff;font-weight:600;text-align:center;margin-top:4px}
#account-signout:hover{background:#C92A2A;filter:brightness(1.08)}
.auth-error{margin:0 0 12px;font-size:13px;color:#E03131}
.auth-submit{width:100%}
.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;font-size:12px;color:var(--mute)}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-oauth{display:grid;gap:8px}
.auth-oauth .btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.auth-oauth .btn svg{width:18px;height:18px;flex:none}
.auth-switch{margin:14px 0 0;text-align:center}

/* ---- Signed-out draft banner, startup screen, disabled autosave ---- */
.draft-banner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:8px 28px;font-size:13px;background:var(--sf2);border-bottom:1px solid var(--line);color:var(--ink)}
.draft-banner[hidden]{display:none}
.startup-overlay{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;background:var(--bg);color:var(--ink)}
.startup-overlay[hidden]{display:none}
.switch:disabled{opacity:.45;cursor:not-allowed}

/* ---- Global top loading progress bar ---- */
.global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    background: transparent;
    overflow: hidden;
}
.global-loader.active {
    opacity: 1;
}
.global-loader::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--ac), #38d9a9, transparent);
    transform: translateX(-100%);
    animation: loader-slide 1.2s infinite ease-in-out;
}
@keyframes loader-slide {
    0% { transform: translateX(-100%); }
    60% { transform: translateX(35%); }
    100% { transform: translateX(100%); }
}

/* ---- Button loading spinner ---- */
.btn.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn.btn-loading svg {
    opacity: 0;
}
.btn.btn-loading::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}
.btn:not(.btn-secondary).btn-loading::after {
    border-color: var(--acx);
    border-right-color: transparent;
}
.btn-secondary.btn-loading::after {
    border-color: var(--ink);
    border-right-color: transparent;
}
.btn-danger.btn-loading::after {
    border-color: #fff;
    border-right-color: transparent;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}