/* Visual layer only. Column sizes, ordering and responsive layout stay in the existing styles. */
body{font-family:var(--font-family);font-size:var(--font-sm);font-weight:400;line-height:var(--leading-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:var(--font-family);font-size:inherit}
h1,h2,h3,h4{line-height:var(--leading-heading);font-weight:700;letter-spacing:-.025em}
b,strong{font-weight:600}
.sla-current,.kpi .val,.avatar{font-weight:700}
.head h1{font-size:var(--font-2xl);font-weight:700}
.head .sub,.small-note,.meta{color:var(--muted)}
.meta,.small-note{font-size:var(--font-xs)}
.side{background:var(--sidebar);color:var(--sidebar-text)}
.brand{border-color:var(--sidebar-border)}
.brand b{font-size:var(--font-md);font-weight:700;letter-spacing:-.025em}
.brand small{color:var(--sidebar-muted);font-size:var(--font-xs)}
.brand img{border:1px solid var(--sidebar-border);border-radius:var(--radius-md)}
.side .nav button{border-radius:var(--radius-md);color:var(--sidebar-text);font-weight:500;line-height:1.5;box-shadow:none}
.side .nav button:hover{background:var(--sidebar-hover);color:white}
.side .nav button.active{background:var(--sidebar-active);color:var(--sidebar-active-text);box-shadow:inset 3px 0 0 var(--primary);font-weight:600}
.side .nav .ui-icon{color:var(--sidebar-muted)}
.side .nav button.active .ui-icon,.side .nav button:hover .ui-icon{color:var(--sidebar-active-text)}
.side .menu-toggle,.side .theme{background:transparent;border-color:var(--sidebar-border);border-radius:var(--radius-md);color:var(--sidebar-text)}
.side .menu-toggle:hover,.side .theme .btn:hover{background:var(--sidebar-hover)}
.side .theme .btn{background:var(--sidebar-hover);border-color:var(--sidebar-border);color:var(--sidebar-text)}
.top,.dark .top{background:var(--panel);border-color:var(--line);box-shadow:var(--shadow-sm)}
.header-profile b{font-size:var(--font-sm);font-weight:600}
.header-profile small{font-size:var(--font-xs);color:var(--muted)}
.btn,.dark .btn{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--text);font-weight:600;line-height:1.4;box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:hover,.dark .btn:hover{background:var(--surface-hover);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.btn.primary,.dark .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover,.dark .btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.danger,.dark .btn.danger{background:var(--danger-bg);color:var(--red);border-color:var(--danger-border)}
.btn.danger:hover,.dark .btn.danger:hover{box-shadow:var(--danger-ring)}
.btn.ghost,.dark .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn:disabled{opacity:.5;box-shadow:none;transform:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.btn.small{font-size:var(--font-xs)}
.field,.search,.dark .field,.dark .search{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-md);line-height:1.5;transition:border-color .15s,box-shadow .15s}
.search{background:var(--surface-subtle)}
.field::placeholder,.search::placeholder{color:var(--muted);opacity:1}
.field:focus,.search:focus{outline:0;border-color:var(--primary);box-shadow:var(--focus-ring)}
.field[aria-invalid=true]{border-color:var(--danger);box-shadow:var(--danger-ring)}
.field-error,.form-error,.plan-error,.widget-error{color:var(--red)}
.filters label,.modalForm label{color:var(--muted);font-size:var(--font-xs);font-weight:500}
.filters label .field,.modalForm label .field{color:var(--text);font-weight:400;font-size:var(--font-sm)}
.panel,.card,.box,.dark .box,.home-metric,.kanban-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.box h3,.panel h2{font-weight:600}
.table{font-size:var(--font-sm);font-variant-numeric:tabular-nums}
.table th{background:var(--surface-subtle);color:var(--muted);font-size:var(--font-xs);font-weight:600}
.table th,.table td{border-color:var(--line);vertical-align:top}
.table tr:hover td,.dark .table tr:hover td{background:var(--surface-hover)}
.table td .btn+.btn,.task-actions .btn+.btn{margin-left:4px}
.table td .btn{margin-bottom:4px}
.pagination{font-size:var(--font-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.drawerWrap{background:var(--overlay)}
.drawer,.settings{background:var(--panel);border-radius:var(--radius-lg) 0 0 var(--radius-lg);box-shadow:var(--shadow-lg)}
.close,.dark .close{background:var(--surface-subtle);color:var(--muted);border-color:var(--line);border-radius:50%}
.close:hover{color:var(--text)}
.tabs{border-color:var(--line)}
.tabs .btn,.dark .tabs .btn{background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;color:var(--muted)}
.tabs .btn.primary,.tabs .btn.active,.dark .tabs .btn.primary{color:var(--primary);border-bottom-color:var(--primary);background:transparent}
.tabs .btn:hover{color:var(--primary);background:var(--blue2)}
.badge,.tag,.dark .tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--font-xs);font-weight:500;border-radius:var(--radius-sm);background:var(--blue2);color:var(--primary);float:none}
.widget-count,.column-count{background:var(--blue2);color:var(--primary);font-size:var(--font-xs);font-weight:600;font-variant-numeric:tabular-nums}
.red{color:var(--red)!important}.green{color:var(--green)!important}.yellow,.dark .yellow{color:var(--orange)}
.notice,.dark .notice{background:var(--warning-bg);border-color:var(--warning);border-radius:var(--radius-md);color:var(--orange)}
.next,.dark .next{background:var(--danger-bg);border-color:var(--danger-border);color:var(--text);border-radius:var(--radius-md)}
.ai{background:var(--purple-bg);border-color:var(--line);border-radius:var(--radius-md)}
.login,.dark .login{background:var(--bg)}
.loginBox,.dark .loginBox{background:var(--panel);border-color:var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.loginLogo h2{font-size:var(--font-xl);font-weight:700}
.toast{background:var(--neutral-900);color:white;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}
.home-banner,.dark .home-banner{background:linear-gradient(115deg,var(--banner-start),var(--banner-end));border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--text)}
.home-banner p,.dark .home-banner p{color:var(--muted)}
.dark .home-banner img{filter:brightness(0) invert(1)}
.home-banner h1{font-size:var(--font-3xl);font-weight:700}
.home-metric>button{color:var(--text)}
.home-metric strong{font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.metric-icon{background:var(--blue2);color:var(--primary);border-radius:var(--radius-md)}
.metric-1 .metric-icon{background:var(--success-bg);color:var(--green)}
.metric-2 .metric-icon{background:var(--danger-bg);color:var(--red)}
.metric-3 .metric-icon{background:var(--purple-bg);color:var(--purple)}
.home-metric>button:hover{background:var(--surface-subtle)}
.home-workspace h2{font-size:var(--font-md);font-weight:600}
.daily-metric{border-color:var(--line);background:var(--surface-subtle);border-radius:var(--radius-md)}
.daily-progress{background:var(--line)}
.daily-progress i{background:var(--neutral-400)}
.daily-metric.progressing .daily-progress i{background:var(--warning)}
.daily-metric.achieved .daily-progress i{background:var(--success)}
.daily-metric.achieved b{color:var(--green)}
.daily-metric-line b{font-weight:600}
.home-task-tabs .btn{box-shadow:none}
.home-task-body .task-title,.compact-main>.btn,.kanban-card-heading>.btn,.task-title{background:transparent;border-color:transparent;box-shadow:none;justify-content:flex-start;color:var(--text)}
.home-task-body .task-title:hover,.compact-main>.btn:hover,.kanban-card-heading>.btn:hover,.task-title:hover{color:var(--primary)}
.task-type-icon{background:var(--blue2);color:var(--primary);border-radius:var(--radius-md)}
.kanban-column{background:var(--surface-subtle);border-color:var(--line);border-radius:var(--radius-md)}
.kanban-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.kanban-column h2{font-weight:600}
.kanban-column.drag-over{outline-color:var(--primary)}
.sla-dot{background:var(--danger)}.contact-dot{background:var(--warning)}
.timeline article,.profile,.home-task-list>li,.compact-list li,.notification-list li{border-color:var(--line)}
.detail dt{color:var(--muted)}
.notification-panel{background:var(--panel);border-color:var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.notification-list li.unread{background:var(--blue2);border-left:2px solid var(--primary)}
.notification-list small{color:var(--muted)}
.bell-wrap #notificationBell[data-unread=true],.dark .bell-wrap #notificationBell[data-unread=true]{background:var(--danger-bg);border-color:var(--danger-border);color:var(--red);box-shadow:var(--danger-ring)}
.bell-wrap #notificationBell[data-unread=true]:hover,.dark .bell-wrap #notificationBell[data-unread=true]:hover{background:var(--danger-bg);border-color:var(--danger)}
.notification-count{background:var(--surface-subtle);color:var(--muted)}
#notificationBell[data-unread=true] .notification-count{background:var(--danger-strong);color:white}
.workday-status{color:var(--green);font-weight:600}
.ui-icon{color:var(--muted)}
.btn:hover>.ui-icon,.nav button:hover .ui-icon{color:var(--primary)}
.btn.primary>.ui-icon{color:white}
.btn.danger>.ui-icon,#notificationBell[data-unread=true]>.ui-icon{color:var(--red)}
.metric-icon>.ui-icon,.task-type-icon>.ui-icon,.badge>.ui-icon{color:inherit}
@media(max-width:720px){.home-banner h1{font-size:var(--font-2xl)}.drawer{border-radius:var(--radius-lg) 0 0 var(--radius-lg)}}
@media(prefers-reduced-motion:reduce){.btn,.nav button,.daily-progress i{transition:none}}