/* Taskly v3: deliberate light/dark design tokens; UI stays fully edge-to-edge */
:root{--panel:#fff;--surface:#f5f7fd;--text:#202942;--subtext:#68758f;--border:#e8ecf5;--row-hover:#f5f2ff;--accent:#6556f5;--soft:#eceaff}
html,body{min-height:100%;margin:0}body{background:var(--surface);color:var(--text)}
.app-shell{width:100%;max-width:none;min-height:100dvh;margin:0;border-radius:0;overflow:visible;box-shadow:none;background:var(--surface)}
.sidebar{position:fixed!important;right:0;top:0;bottom:0;height:100dvh!important;min-height:0!important;overflow-y:auto;width:242px;overscroll-behavior:contain;z-index:31}
.main-content{margin-right:242px;width:calc(100% - 242px);min-width:0}
.tasks-panel{min-height:735px;display:flex;flex-direction:column}
.table-wrap{flex:1;min-height:480px}
.table-footer{margin-top:auto}
.task-title-cell{color:#263250}
html[data-theme="dark"]{--ink:#eef1ff;--muted:#aeb9d5;--line:#293552;--bg:#080e1c;--panel:#151e30;--surface:#0b1324;--text:#eef2ff;--subtext:#bac6de;--border:#2b3955;--row-hover:#252c49;--accent:#9684ff;--soft:#2c294b;--purple:#9684ff;--purple-dark:#7769fc;--shadow:0 12px 42px #03081844;color-scheme:dark}
html[data-theme="dark"] body,html[data-theme="dark"] .app-shell{background:var(--surface);color:var(--text)}
html[data-theme="dark"] .main-content{color:var(--text)}
html[data-theme="dark"] .sidebar{background:#090f1d;border-left:1px solid #26304a}
html[data-theme="dark"] .topbar{background:#111b2b;border-bottom:1px solid var(--border)}
html[data-theme="dark"] .tasks-panel,html[data-theme="dark"] .detail-panel,html[data-theme="dark"] .modal,html[data-theme="dark"] .progress-card{background:var(--panel);border-color:var(--border);color:var(--text)}
html[data-theme="dark"] .stat-card.lavender{background:linear-gradient(135deg,#31265a,#24203d);border-color:#52417c}
html[data-theme="dark"] .stat-card.mint{background:linear-gradient(135deg,#164a47,#152d36);border-color:#2c665f}
html[data-theme="dark"] .stat-card.peach{background:linear-gradient(135deg,#573b31,#332b36);border-color:#78513d}
html[data-theme="dark"] .stat-card.blue{background:linear-gradient(135deg,#203d65,#1d2a43);border-color:#395980}
html[data-theme="dark"] .stat-value,html[data-theme="dark"] .stat-label,html[data-theme="dark"] .strong,html[data-theme="dark"] .section-heading h2,html[data-theme="dark"] .detail-panel h2,html[data-theme="dark"] .task-title-cell,html[data-theme="dark"] .detail-metadata strong,html[data-theme="dark"] .person,html[data-theme="dark"] #tabContent{color:#f3f5ff!important}
html[data-theme="dark"] .stat-label,html[data-theme="dark"] .section-heading p,html[data-theme="dark"] .detail-description,html[data-theme="dark"] .detail-metadata span,html[data-theme="dark"] .table-footer,html[data-theme="dark"] td{color:#b6c3df!important}
html[data-theme="dark"] .table-wrap table{color:#e9eeff}
html[data-theme="dark"] .table-wrap th{background:#222e45;color:#cfdaef}
html[data-theme="dark"] .table-wrap td{border-bottom:1px solid #2b3750;background:transparent}
html[data-theme="dark"] .table-wrap tbody tr{background:#151e30;color:#eff4ff}
html[data-theme="dark"] .table-wrap tbody tr:hover{background:#242f49!important}
html[data-theme="dark"] .table-wrap tbody tr.selected-row{background:#302e56!important}
html[data-theme="dark"] .task-title-cell{color:#f3f5ff!important}
html[data-theme="dark"] .priority-high{background:#5e273e;color:#ffbac6}
html[data-theme="dark"] .priority-medium{background:#5b4326;color:#ffdb96}
html[data-theme="dark"] .priority-low{background:#204e42;color:#9cf9ce}
html[data-theme="dark"] .status-todo{background:#303c54;color:#e2e8ff}
html[data-theme="dark"] .status-doing{background:#203f6c;color:#a9d2ff}
html[data-theme="dark"] .status-done{background:#1d4d42;color:#9ff0d5}
html[data-theme="dark"] .top-search,html[data-theme="dark"] .filter-search,html[data-theme="dark"] .filters select,html[data-theme="dark"] .field input,html[data-theme="dark"] .field textarea,html[data-theme="dark"] .field select{background:#111a2b;border:1px solid #36435f;color:#f5f7ff}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#a0aec9}
html[data-theme="dark"] .tab-content,html[data-theme="dark"] .task-card{background:#111a2b;border-color:#35415b;color:#eff2ff}
html[data-theme="dark"] .detail-tag,html[data-theme="dark"] .btn-muted,html[data-theme="dark"] .pagination button,html[data-theme="dark"] .row-action{background:#23304a;color:#e1e8ff;border-color:#394765}
html[data-theme="dark"] .pagination button.current{background:#6a5af6;color:white}
html[data-theme="dark"] .detail-tabs button{color:#b0bdd9}
html[data-theme="dark"] .detail-tabs button.selected{color:#afa1ff}
html[data-theme="dark"] .bar{background:#303b56}
html[data-theme="dark"] .ring:before{background:#151e30}
html[data-theme="dark"] .ring{background:conic-gradient(#8677ff var(--pct),#303b56 0)}
html[data-theme="dark"] .detail-divider{background:#33405b}
html[data-theme="dark"] .modal p,html[data-theme="dark"] .field{color:#c0cbe0}
html[data-theme="dark"] .btn-danger{background:#502c42;color:#ffc0ce}
html[data-theme="dark"] .asset-icon,html[data-theme="dark"] .theme-toggle img{filter:brightness(0) invert(1);opacity:.9}
html[data-theme="dark"] .theme-toggle{background:#26314d;border-color:#455477}
html[data-theme="dark"] .welcome-line p{color:#b4c0d9}
html[data-theme="dark"] .notify-btn span{border-color:#111b2b}
/* Same expanding circular reveal timing/curve as BestUI reference */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.is-theme-transitioning::view-transition-new(root){z-index:10000;clip-path:circle(0 at var(--theme-transition-x) var(--theme-transition-y));animation:themeCircleReveal 1.65s cubic-bezier(.22,1,.36,1) both}
html.is-theme-transitioning::view-transition-old(root){z-index:9999}
@keyframes themeCircleReveal{to{clip-path:circle(var(--theme-transition-radius) at var(--theme-transition-x) var(--theme-transition-y))}}
.attachment-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.attach-add{padding:6px 9px;color:var(--accent);border:1px solid var(--border);border-radius:8px;cursor:pointer}.attachment-list{margin-top:12px;display:grid;gap:8px}.attachment-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px;border:1px solid var(--border);border-radius:9px;font-size:11px;overflow-wrap:anywhere}.attachment-item span:first-child{min-width:0;overflow-wrap:anywhere}.file-actions{display:flex;gap:8px;white-space:nowrap}.file-actions a,.file-actions button{color:var(--accent);background:none;border:0;text-decoration:none}.pending-file{display:inline-flex;align-items:center;border:1px solid var(--border);padding:4px 7px;margin:3px;border-radius:8px}.pending-file button{border:0;background:transparent;color:#e95272;font-size:18px}.file-hint{color:var(--subtext);font-weight:400}
/* BestUI-inspired hover motion */
.stat-card,.btn,.nav-link{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,background .25s ease}
@media(hover:hover){.stat-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px #342d8940}.btn:hover{transform:translateY(-2px)}}
@media(max-width:1100px){.sidebar{width:210px}.main-content{margin-right:210px;width:calc(100% - 210px)}}
@media(max-width:780px){.sidebar{position:fixed!important;right:0;top:0;bottom:0;height:100dvh!important;width:242px}.main-content{margin-right:0;width:100%}.tasks-panel{min-height:650px}.table-wrap{min-height:0}.task-cards{flex:1}.detail-panel{position:static}}
@media(prefers-reduced-motion:reduce){html.is-theme-transitioning::view-transition-new(root){animation:none}}