:root{
    --bg:#FBFAF6; --surface:#FFFFFF; --surface-2:#F4F2EA;
    --border:#EAE6DA; --border-strong:#D8D2C0;
    --text:#2B2620; --text-2:#7A7060; --text-muted:#A89C84;
    --accent:#2F6FDB; --accent-bg:#E8F0FD; --accent-text:#1D4EA6;
    --red:#B8362B; --red-bg:#FAE7E4; --red-text:#8F2A21;
    --amber:#D9A017; --amber-bg:#FBF3D8; --amber-text:#8A6B0E;
    --green:#3E8E4F; --green-bg:#E9F5EB; --green-text:#2C6A39;
    --blue:#3C6FC4; --blue-bg:#EAF0FB; --blue-text:#2C4F91;
    --radius:8px; --radius-lg:12px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  [data-theme="dark"]{
    --bg:#1B1815; --surface:#221E19; --surface-2:#2A251E;
    --border:#3A342A; --border-strong:#4C4433;
    --text:#EFEAE0; --text-2:#B0A692; --text-muted:#7C7360;
    --accent:#5B93F0; --accent-bg:#1D2C45; --accent-text:#9DC0FA;
    --red:#E07268; --red-bg:#3A211D; --red-text:#EFA097;
    --amber:#E8BC4B; --amber-bg:#3A3016; --amber-text:#F2D889;
    --green:#6FBF7F; --green-bg:#1E3122; --green-text:#9DD9A8;
    --blue:#7FA6E8; --blue-bg:#1E2A3E; --blue-text:#AFC7EF;
  }
  *{box-sizing:border-box;}
  body{margin:0; font-family:var(--font); background:var(--bg); color:var(--text); font-size:14px;}
  button, input, select, textarea{font-family:inherit; font-size:13px; color:inherit;}
  button{cursor:pointer;}
  a{color:var(--accent);}
  .hidden{display:none !important;}

  #login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center;}
  .login-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; width:320px;}
  .login-card h1{font-size:18px; font-weight:600; margin:0 0 4px;}
  .login-card p{color:var(--text-2); font-size:13px; margin:0 0 20px;}
  .user-pick{display:flex; flex-direction:column; gap:8px;}
  .user-pick button{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); text-align:left;}
  .user-pick button:hover{border-color:var(--border-strong);}
  .avatar{width:28px; height:28px; border-radius:50%; background:var(--accent-bg); color:var(--accent-text); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; flex-shrink:0;}
  .role-tag{margin-left:auto; font-size:11px; color:var(--text-muted);}

  #app{display:flex; min-height:100vh;}
  #sidebar{width:200px; flex-shrink:0; border-right:1px solid var(--border); padding:16px 12px; display:flex; flex-direction:column; gap:4px;}
  .brand{font-weight:600; font-size:14px; padding:4px 8px 16px;}
  .nav-item{position:relative; display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius); color:var(--text-2); text-decoration:none; border:none; background:none; width:100%; text-align:left;}
  .nav-item:hover{background:var(--surface-2);}
  .nav-item.active{background:var(--accent-bg); color:var(--accent-text); font-weight:500;}
  .nav-dot{position:absolute; right:10px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--red);}
  .nav-spacer{flex:1;}
  .sidebar-foot{border-top:1px solid var(--border); padding-top:12px; display:flex; flex-direction:column; gap:8px;}
  .sync-status{font-size:10.5px; color:var(--text-muted); padding:0 8px; display:flex; align-items:center; gap:5px;}
  .sync-dot{width:6px; height:6px; border-radius:50%; background:var(--green);}
  .theme-toggle{display:flex; gap:4px; background:var(--surface-2); border-radius:var(--radius); padding:3px;}
  .theme-toggle button{flex:1; padding:5px 0; border:none; background:transparent; border-radius:6px; font-size:12px; color:var(--text-2);}
  .theme-toggle button.active{background:var(--surface); color:var(--text); box-shadow:0 0 0 1px var(--border);}
  .current-user{display:flex; align-items:center; gap:8px; padding:6px 8px;}
  .current-user span{font-size:12px;}
  .switch-user{font-size:11px; color:var(--accent); background:none; border:none; padding:0; text-decoration:underline;}

  #main{flex:1; padding:24px 32px; max-width:1180px;}
  .view-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px;}
  .view-title{font-size:18px; font-weight:600; margin:0;}
  .view-sub{color:var(--text-2); font-size:12px; margin-top:2px;}
  .primary-btn{background:var(--text); color:var(--surface); border:none; border-radius:var(--radius); padding:8px 14px; font-weight:500; white-space:nowrap;}
  .secondary-btn{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:8px 14px;}
  .secondary-btn:hover{border-color:var(--border-strong);}
  .icon-danger-btn{background:none; border:1px solid var(--border); color:var(--red-text); border-radius:var(--radius); padding:4px 9px; font-size:11.5px;}
  .icon-danger-btn:hover{background:var(--red-bg); border-color:var(--red);}
  .icon-btn{background:none; border:1px solid var(--border); color:var(--text-2); border-radius:var(--radius); padding:4px 9px; font-size:11.5px;}
  .icon-btn:hover{background:var(--surface-2); border-color:var(--border-strong);}

  .segmented{display:inline-flex; background:var(--surface-2); border-radius:var(--radius); padding:3px; gap:2px;}
  .segmented button{border:none; background:transparent; padding:6px 12px; border-radius:6px; font-size:12px; color:var(--text-2);}
  .segmented button.active{background:var(--surface); color:var(--text); box-shadow:0 0 0 1px var(--border);}

  .toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:10px; flex-wrap:wrap;}
  .search-input{flex:1; min-width:180px; max-width:320px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text);}
  .search-input::placeholder{color:var(--text-muted);}
  .filter-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; align-items:center;}
  .filter-select{padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text-2); font-size:12px;}
  .filter-select.active-filter{color:var(--accent-text); border-color:var(--accent); background:var(--accent-bg);}
  .multi-filter-dd{position:absolute; top:calc(100% + 4px); left:0; z-index:300; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:6px 4px; min-width:160px; box-shadow:0 4px 16px rgba(0,0,0,.12);}
  .multi-filter-dd.hidden{display:none;}
  .multi-filter-item{display:flex; align-items:center; gap:7px; padding:5px 8px; cursor:pointer; border-radius:5px; font-size:12px; white-space:nowrap; user-select:none;}
  .multi-filter-item:hover{background:var(--accent-bg);}
  .multi-filter-item input{margin:0; cursor:pointer;}
  .clear-filters{font-size:11.5px; color:var(--accent); background:none; border:none; text-decoration:underline; padding:0;}

  .task-card{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border-strong); border-radius:var(--radius-lg); padding:12px 12px 12px 11px; cursor:pointer; margin-bottom:8px; position:relative;}
  .task-card:hover{border-color:var(--border-strong);}
  .task-dup-btn{position:absolute; top:6px; right:6px; background:transparent; border:none; cursor:pointer; font-size:13px; color:var(--text-muted,#999); opacity:0; transition:opacity .15s; padding:2px 5px; border-radius:4px; line-height:1;}
  .task-card:hover .task-dup-btn{opacity:1;}
  .task-dup-btn:hover{background:var(--accent-bg,#dbeafe); color:var(--accent-text,#1d4ed8);}
  .task-card.pr-high{border-left-color:var(--red);}
  .task-card.pr-medium{border-left-color:var(--amber);}
  .task-card.pr-low{border-left-color:var(--green);}
  .task-card.pr-minimal{border-left-color:var(--blue);}
  .task-card.overdue{box-shadow:0 0 0 1px var(--red);}
  .task-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:6px;}
  .badge{font-size:10.5px; padding:2px 7px; border-radius:20px; background:var(--surface-2); color:var(--text-2); white-space:nowrap;}
  .badge.pr-high{background:var(--red-bg); color:var(--red-text);}
  .badge.pr-medium{background:var(--amber-bg); color:var(--amber-text);}
  .badge.pr-low{background:var(--green-bg); color:var(--green-text);}
  .badge.pr-minimal{background:var(--blue-bg); color:var(--blue-text);}
  .task-title{font-size:13px; font-weight:500; margin:0 0 6px;}
  .task-project{font-size:10.5px; color:var(--accent-text); margin:0 0 4px;}
  .task-meta{font-size:11px; color:var(--text-2); display:flex; justify-content:space-between; align-items:center; gap:6px;}
  .task-meta .avatar{width:20px; height:20px; font-size:9.5px;}

  .kanban{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; align-items:start;}
  .kanban-col{background:var(--surface-2); border-radius:var(--radius-lg); padding:10px; min-height:80px;}
  .kanban-col-head{font-size:12px; font-weight:600; color:var(--text-2); padding:2px 4px 10px; display:flex; justify-content:space-between;}
  .kanban-col.dragover{outline:2px dashed var(--accent); outline-offset:-2px;}

  table.data-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;}
  table.data-table th{text-align:left; font-size:11px; color:var(--text-2); font-weight:500; padding:9px 12px; border-bottom:1px solid var(--border); background:var(--surface-2); cursor:pointer; user-select:none; white-space:nowrap;}
  table.data-table th:hover{color:var(--text);}
  table.data-table th .arrow{margin-left:4px; opacity:0.6;}
  table.data-table td{padding:9px 12px; border-bottom:1px solid var(--border); font-size:12.5px;}
  table.data-table tr:last-child td{border-bottom:none;}
  table.data-table tr.row-clickable:hover{background:var(--surface-2); cursor:pointer;}
  .dot{width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:6px;}
  .dot.pr-high{background:var(--red);} .dot.pr-medium{background:var(--amber);}
  .dot.pr-low{background:var(--green);} .dot.pr-minimal{background:var(--blue);} .dot.pr-none{background:var(--text-muted);}

  .today-section{margin-bottom:20px;}
  .today-section-head{display:flex; align-items:center; gap:6px; margin-bottom:8px; font-size:12.5px; font-weight:600; color:var(--text-2);}
  .today-section-head.overdue{color:var(--red-text);}
  .filter-row-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}

  .modal-overlay{position:fixed; inset:0; background:rgba(30,25,15,0.35); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:50;}
  .modal{background:var(--surface); border-radius:var(--radius-lg); width:600px; max-width:100%; padding:20px 24px 24px;}
  .modal h2{font-size:15px; font-weight:600; margin:0 0 16px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;}
  .field{display:flex; flex-direction:column; gap:4px;}
  .field.full{grid-column:1 / -1;}
  .field label{font-size:11.5px; color:var(--text-2);}
  .field input, .field select, .field textarea{padding:7px 9px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text);}
  #f-title{background:#fff3e0; border-color:#ffb74d; font-weight:500; color:#2B2620;}
  #f-title:focus{background:#ffe0b2; border-color:#ff9800; outline:none; color:#2B2620;}
  .field textarea{resize:vertical; min-height:92px; line-height:1.5;}
  .required-mark{color:var(--red);}
  .checkbox-list{display:flex; flex-direction:column; gap:6px; max-height:130px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius); padding:8px; background:var(--bg);}
  .checkbox-list label{display:flex; align-items:center; gap:8px; font-size:12.5px;}
  .modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}
  .draft-note{font-size:11.5px; color:var(--text-muted); margin:-4px 0 12px;}

  .notif-item{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); cursor:default;}
  .notif-item.clickable{cursor:pointer;}
  .notif-item.clickable:hover{background:var(--surface-2); margin:0 -16px; padding:10px 16px;}
  .notif-item:last-child{border-bottom:none;}
  .notif-item.unread{background:var(--accent-bg); margin:0 -16px; padding:10px 16px; border-bottom-color:transparent;}
  .notif-icon{width:28px; height:28px; border-radius:50%; background:var(--accent-bg); color:var(--accent-text); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px;}
  .notif-text{font-size:12.5px;}
  .notif-time{font-size:11px; color:var(--text-muted); margin-top:2px;}
  .notif-link{font-size:11px; color:var(--accent); margin-top:2px;}

  .contractor-card, .feedback-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px; margin-bottom:10px;}
  .contractor-head{display:flex; justify-content:space-between; align-items:center;}
  .contractor-name{font-weight:600; font-size:13.5px;}
  .contractor-meta{color:var(--text-2); font-size:12px; margin-top:2px;}
  .contractor-links{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; font-size:12px;}
  .contractor-links a{text-decoration:none;}
  .contractor-links a:hover{text-decoration:underline;}
  .score{font-size:12px; font-weight:600; padding:2px 8px; border-radius:20px;}
  .score.positive{background:var(--green-bg); color:var(--green-text);}
  .score.neutral{background:var(--surface-2); color:var(--text-2);}
  .score.negative{background:var(--red-bg); color:var(--red-text);}
  .empty-state{color:var(--text-muted); font-size:12.5px; padding:20px; text-align:center;}

  .audit-row{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:12.5px; align-items:center;}
  .audit-row:last-child{border-bottom:none;}
  .audit-time{color:var(--text-muted); font-size:11px; white-space:nowrap; width:110px; flex-shrink:0;}
  .audit-text{flex:1;}

  .attach-grid{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
  .attach-chip{position:relative; width:72px; display:flex; flex-direction:column; align-items:center; gap:3px;}
  .attach-img-wrap{position:relative; width:56px; height:56px;}
  .attach-thumb{width:56px; height:56px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--border);}
  .attach-dl-btn{position:absolute; bottom:3px; right:3px; width:18px; height:18px; border-radius:3px; background:rgba(0,0,0,0.55); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; text-decoration:none; line-height:1;}
  .attach-img-wrap:hover .attach-dl-btn{opacity:1;}
  .attach-file-icon{width:56px; height:56px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:20px;}
  .attach-name{font-size:9.5px; color:var(--text-2); text-align:center; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none;}
  .attach-name:hover{text-decoration:underline;}
  .attach-remove{position:absolute; top:-6px; right:6px; width:16px; height:16px; border-radius:50%; background:var(--red); color:#fff; border:none; font-size:11px; line-height:1; padding:0;}
  .attach-input-label{display:inline-block; font-size:12px; padding:6px 10px; border:1px dashed var(--border-strong); border-radius:var(--radius); color:var(--text-2); cursor:pointer;}
  .attach-input-label:hover{border-color:var(--accent);}
  .attach-badge{display:inline-flex; align-items:center; gap:3px; font-size:10.5px; color:var(--text-muted);}
  .pending-accept-section{background:#fff0f0; border:1.5px solid var(--red,#e53935); border-radius:var(--radius); padding:12px 16px; margin-bottom:16px; display:flex; flex-direction:column; gap:10px;}
  .dark-theme .pending-accept-section{background:#3a1010;}
  .pending-accept-head{font-weight:700; font-size:13px; color:var(--red,#e53935);}
  .pending-accept-item{display:flex; align-items:center; gap:12px; justify-content:space-between;}
  .pending-accept-info{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
  .pending-accept-title{font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .pending-accept-from{font-size:11px; color:var(--text-2);}
  .accept-task-btn{flex-shrink:0; padding:5px 12px; border:none; border-radius:var(--radius); background:var(--green,#43a047); color:#fff; font-size:12px; cursor:pointer; font-weight:500;}
  .accept-task-btn:hover{opacity:.85;}
  .decline-task-btn{flex-shrink:0; padding:5px 12px; border:none; border-radius:var(--radius); background:var(--surface-2); color:var(--red,#e53935); font-size:12px; cursor:pointer; font-weight:500; border:1px solid var(--red,#e53935);}
  .decline-task-btn:hover{background:var(--red,#e53935); color:#fff;}
  .unaccepted-badge{font-size:11px; color:var(--red,#e53935); font-weight:700; margin-left:2px;}
  /* vis-status badges in task modal */
  .vis-row{display:flex; align-items:center; gap:6px; min-height:24px;}
  .vis-row label{display:flex; align-items:center; gap:6px; font-size:12.5px; flex:1; cursor:pointer;}
  .vis-status-badge{font-size:12px; line-height:1;}
  /* decisions view */
  .decisions-list{display:flex; flex-direction:column; gap:8px;}
  .decision-row{display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); flex-wrap:wrap;}
  .decision-info{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
  .decision-title{font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .decision-from{font-size:11px; color:var(--text-2);}
  .decision-badge{font-size:12px; font-weight:600; padding:2px 6px; border-radius:4px; flex-shrink:0;}
  .decision-badge.accepted{background:#e8f5e9; color:#2e7d32;}
  .dark-theme .decision-badge.accepted{background:#1b3a1f; color:#81c784;}
  .decision-badge.declined{background:#fce4ec; color:#c62828;}
  .dark-theme .decision-badge.declined{background:#3a1010; color:#ef9a9a;}
  .decision-actions{display:flex; gap:6px; flex-shrink:0;}
  /* shared small buttons + filter buttons */
  .btn-sm{padding:4px 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); font-size:12px; cursor:pointer; white-space:nowrap;}
  .btn-sm:hover{border-color:var(--accent); color:var(--accent);}
  .btn-sm.btn-accept{background:var(--green,#43a047); color:#fff; border-color:var(--green,#43a047);}
  .btn-sm.btn-accept:hover{opacity:.85;}
  .btn-sm.btn-decline{color:var(--red,#e53935); border-color:var(--red,#e53935);}
  .btn-sm.btn-decline:hover{background:var(--red,#e53935); color:#fff;}
  .filter-btn{padding:5px 14px; border:1px solid var(--border); border-radius:20px; background:var(--surface-2); font-size:12px; cursor:pointer; transition:background .15s;}
  .filter-btn.active{background:var(--accent); color:#fff; border-color:var(--accent);}

  #mobile-topbar{display:none; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:40;}
  #mobile-topbar .hamburger{background:none; border:none; font-size:20px; padding:2px 4px; color:var(--text);}
  #sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(20,17,10,0.35); z-index:55;}
  .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

  @media (max-width: 768px){
    #mobile-topbar{display:flex;}
    #app{flex-direction:column;}
    #sidebar{position:fixed; top:0; bottom:0; left:-230px; width:220px; z-index:60; transition:left .2s ease; box-shadow:none; background:var(--surface);}
    #sidebar.open{left:0; box-shadow:0 0 24px rgba(20,17,10,0.25);}
    #sidebar-backdrop.show{display:block;}
    #sidebar .brand{display:none;}
    #main{padding:16px; max-width:100%;}
    .view-header{flex-direction:column; align-items:flex-start; gap:10px;}
    .view-header > div:last-child{width:100%;}
    .toolbar{flex-direction:column; align-items:stretch;}
    .search-input{max-width:100%;}
    .kanban{display:flex; overflow-x:auto; gap:12px; padding-bottom:8px; scroll-snap-type:x mandatory; grid-template-columns:none;}
    .kanban-col{min-width:82%; flex:0 0 82%; scroll-snap-align:start;}
    table.data-table{min-width:640px;}
    .modal-overlay{padding:0; align-items:flex-end;}
    .modal{width:100%; max-height:92vh; overflow-y:auto; border-radius:16px 16px 0 0; padding:18px 16px 20px;}
    .field-row{grid-template-columns:1fr;}
  }