/* Taskly v4 — neon treatments informed by BestUI chip/tags and motion language */
html[data-theme="dark"]{--panel:#131b30;--surface:#080d1d;--border:#303b64;--row-hover:#242246;--text:#f5f4ff;--subtext:#b7c3e6;--accent:#a38bff}
html[data-theme="dark"] body{background:radial-gradient(ellipse at 25% 2%,#1d1b41 0,transparent 42%),#080d1d}
html[data-theme="dark"] .sidebar{background:linear-gradient(180deg,#12122c 0%,#080e20 72%);border-left:1px solid #35305d}
html[data-theme="dark"] .stat-card.lavender{background:linear-gradient(130deg,#483183,#25204d);border-color:#7856d1;box-shadow:inset 0 1px #b9a0ff25}
html[data-theme="dark"] .stat-card.mint{background:linear-gradient(130deg,#115e5c,#142c45);border-color:#2aa6a2}
html[data-theme="dark"] .stat-card.peach{background:linear-gradient(130deg,#70432f,#332443);border-color:#af6945}
html[data-theme="dark"] .stat-card.blue{background:linear-gradient(130deg,#204783,#192547);border-color:#477acc}
html[data-theme="dark"] .progress-card{background:linear-gradient(140deg,#1b2340,#101a30)}
html[data-theme="dark"] .tasks-panel,html[data-theme="dark"] .detail-panel{box-shadow:0 15px 35px #06071633,inset 0 1px #b5a5ff13}
html[data-theme="dark"] .btn-danger{background:linear-gradient(115deg,#e84370,#bd2759)!important;color:#fff!important;border:1px solid #ff658e!important;box-shadow:0 5px 22px #fb386a45}
html[data-theme="dark"] .delete-task{color:#ff769a!important;filter:drop-shadow(0 0 6px #f4427555)}
html[data-theme="dark"] .logout{color:#ff8eab!important;border-color:#ad426966}
html[data-theme="dark"] .nav-link.active{background:linear-gradient(110deg,#7855ff,#4b38b6);box-shadow:0 5px 25px #7962ff55}
/* BestUI-like outlined neon tags: thin edge, tinted surface and glow */
html[data-theme="dark"] .pill{position:relative;border:1px solid currentColor!important;background:transparent!important;box-shadow:inset 0 0 12px currentColor,0 0 11px -5px currentColor;letter-spacing:0;transition:transform .25s,filter .25s,box-shadow .25s;white-space:nowrap}
html[data-theme="dark"] .priority-high{color:#ff6b9a!important;background:#ff386914!important;box-shadow:inset 0 0 13px #fb4c6b24,0 0 12px #ff34652e}
html[data-theme="dark"] .priority-medium{color:#ffc267!important;background:#eeaa2516!important;box-shadow:inset 0 0 13px #ffbc4020,0 0 12px #ffbc4024}
html[data-theme="dark"] .priority-low{color:#65e9be!important;background:#23cf9d15!important;box-shadow:inset 0 0 13px #25d7a522,0 0 12px #34d4a526}
html[data-theme="dark"] .status-doing{color:#63caff!important;background:#239dff12!important;box-shadow:inset 0 0 13px #39aaff22,0 0 13px #219aff35}
html[data-theme="dark"] .status-done{color:#59e8ac!important;background:#13dca114!important;box-shadow:inset 0 0 13px #21dea122,0 0 13px #21dea135}
html[data-theme="dark"] .status-todo{color:#c3b0ff!important;background:#946dff13!important;box-shadow:inset 0 0 13px #906cff22,0 0 13px #906cff35}
html[data-theme="dark"] .pill:hover{transform:translateY(-2px);filter:brightness(1.22)}
html[data-theme="dark"] .row-action:hover{color:#a89cff;background:#373059;box-shadow:0 0 17px #8775ff66}
.image-avatar{padding:0;overflow:hidden;background:#5752ae}.image-avatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
/* Sidebar collapses on the RIGHT; detail panel on LEFT remains visible and not closable */
.sidebar-collapse{flex-shrink:0;margin-right:auto;color:#bbb3ff;border:1px solid #69628a50}
.sidebar-collapse:hover{background:#6a55ed33;color:white}
.sidebar-collapsed .sidebar{width:77px;padding-inline:10px;transition:width .32s cubic-bezier(.2,.8,.2,1)}
.sidebar-collapsed .main-content{margin-right:77px;width:calc(100% - 77px);transition:margin-right .32s,width .32s}
.sidebar-collapsed .brand{gap:0;justify-content:center;margin-inline:0}
.sidebar-collapsed .brand>span:not(.brand-symbol),.sidebar-collapsed .side-caption,.sidebar-collapsed .nav-count,.sidebar-collapsed .nav-link{font-size:0}
.sidebar-collapsed .nav-link{justify-content:center;padding:12px 8px;gap:0}
.sidebar-collapsed .nav-link svg,.sidebar-collapsed .nav-link .asset-icon{width:22px;height:22px}
.sidebar-collapsed .side-user>div,.sidebar-collapsed .logout{display:none}
.sidebar-collapsed .side-user{justify-content:center}
.sidebar-collapsed .sidebar-collapse{position:absolute;top:88px;right:22px}
.sidebar-collapsed .brand-symbol{margin-bottom:70px}
#detailPanel{opacity:1!important;visibility:visible!important}
/* Transitions on progress and state changes */
#detailBar{transition:width 1.05s cubic-bezier(.2,.85,.25,1);background:linear-gradient(90deg,#4e6bff,#a16aff,#e97df5);box-shadow:0 0 14px #9771ff9c}
#progressRing{--pct:0%;filter:drop-shadow(0 0 8px #7966ff44)}
#progressRing::after{transition:transform .7s ease}
.bar-pulse:after{content:"";position:absolute;inset:0;transform:translateX(-130%);background:linear-gradient(90deg,transparent,#ffffff88,transparent);animation:barShine 1.15s ease .3s both}
.bar{overflow:hidden;position:relative}.bar>span{position:relative;display:block;overflow:hidden}
@keyframes barShine{to{transform:translateX(130%)}}
.state-flash{animation:stateFlash .7s ease}
@keyframes stateFlash{30%{box-shadow:0 0 0 2px #ab8cff9e,0 0 35px #8f6dfb55}100%{box-shadow:0 0 0 0 transparent}}
tr.selected-row{transition:background .35s ease}
.stat-value,#progressPercent,#detailPercent{font-variant-numeric:tabular-nums}
@media(min-width:781px){.sidebar{transition:width .32s cubic-bezier(.2,.8,.2,1)}.main-content{transition:margin-right .32s,width .32s}.mobile-close{display:none!important}}
@media(max-width:780px){.sidebar-collapse{display:none!important}.sidebar-collapsed .sidebar{width:242px;padding:29px 18px 15px}.sidebar-collapsed .main-content{width:100%;margin-right:0}.sidebar-collapsed .brand>span:not(.brand-symbol){display:initial}.sidebar-collapsed .side-caption,.sidebar-collapsed .nav-link,.sidebar-collapsed .nav-count{font-size:inherit}.sidebar-collapsed .side-user>div,.sidebar-collapsed .logout{display:initial}.sidebar-collapsed .brand-symbol{margin-bottom:0}.sidebar-collapsed .nav-link{justify-content:flex-start;gap:14px;padding:12px 15px}}
@media(prefers-reduced-motion:reduce){#detailBar,.sidebar,.main-content{transition:none!important}.state-flash,.bar-pulse:after{animation:none!important}}