:root {
  color-scheme: light;
  --page: #f3f4ee;
  --surface: #fff;
  --ink: #172b23;
  --muted: #57655e;
  --green: #245a46;
  --light: #e9f1e8;
  --line: #dce2d9;
  --yellow: #f4d464;
  --sidebar: #192e26;
  --danger: #a03932;
  --radius: 16px;
  --shadow: 0 8px 26px #20312408;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--page);
}
* {box-sizing: border-box}
body {margin: 0}
button, input, textarea, select {font: inherit}
button {cursor: pointer}
button:disabled {opacity: .52; cursor: wait}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {outline: 3px solid #71a687; outline-offset: 2px}
a {color: var(--green)}
h1,h2,h3,p {margin:0}
small {font-size: .82rem}
.shell {display:grid; grid-template-columns: 228px minmax(0,1fr); min-height: 100dvh}
.sidebar {height:100dvh; position:sticky; top:0; display:flex; flex-direction:column; overflow:auto; gap:25px; padding:28px 18px 18px; background:var(--sidebar); color:#f3f4ee}
.brand {display:flex; align-items:center; gap:11px; font-weight:760; letter-spacing:-.035em; font-size:1.14rem}
.brand-mark {width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:var(--yellow);color:var(--sidebar);font-weight:850;letter-spacing:-.08em;flex:none}
.brand span:last-child {line-height:1.14}
.brand small {display:block;margin-top:4px;color:#b4c8bc;font-weight:550;font-size:.69rem;letter-spacing:.035em}
.navgroup {display:grid;gap:5px}
.nav-label {padding:3px 11px 6px;color:#b5c9bd;font-size:.73rem;font-weight:650;letter-spacing:.03em}
.navbtn {display:flex;align-items:center;gap:10px;text-align:left;border:0;border-radius:10px;padding:11px 12px;color:#e4eee6;background:transparent;font-size:.875rem;min-width:0}
.navbtn:hover {background:#30483d}
.navbtn.active {background:#3a5948;color:#fff;font-weight:700}
.navbtn .navcount {margin-left:auto;font-size:.74rem;color:#ccddd1}
.navtext {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ico {display:inline-grid;place-items:center;width:21px;flex:none;font-weight:650;line-height:1}
.pdot {width:9px;height:9px;border-radius:50%;background:var(--dot,#6d8a78);flex:none;margin:0 6px}
.sidebar-foot {margin-top:auto;border-top:1px solid #395044;padding-top:16px}
.sidebar-foot button {width:100%}
.workspace {min-width:0}
.topbar {min-height:71px;border-bottom:1px solid var(--line);background:#f9faf5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px clamp(18px,3.4vw,44px)}
.crumb {font-size:.86rem;color:var(--muted)}
.crumb strong {color:var(--ink)}
.top-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.state {display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:100px;padding:7px 10px;background:#fff;color:var(--muted);font-size:.76rem;font-weight:600;white-space:nowrap}
.state .dot {width:7px;height:7px;border-radius:50%;background:#78897e}
.state.online .dot {background:#38865f}
.state.offline .dot {background:#b86541}
.state.demo .dot {background:#b79237}
.avatar {width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:#e0eadf;color:#295440;font-weight:750;font-size:.82rem}
.content {max-width:1510px;margin:0 auto;padding:clamp(23px,3.5vw,48px) clamp(18px,3.4vw,44px) 48px}
.heading {display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:25px}
.heading h1 {font-size:clamp(2rem,4vw,3.05rem);line-height:1.04;letter-spacing:-.058em}
.heading p {margin-top:9px;color:var(--muted);font-size:.91rem}
.eyebrow {font-size:.73rem;font-weight:750;letter-spacing:.06em;color:var(--green);text-transform:uppercase;margin-bottom:8px}
.actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn {border:1px solid #d7dfd5;background:var(--surface);border-radius:10px;min-height:40px;padding:9px 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:var(--ink);font-weight:650;font-size:.84rem;text-decoration:none}
.btn:hover {background:#f0f5ee}
.btn.primary {background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover {background:#1b4837}
.btn.accent {background:var(--yellow);border-color:var(--yellow);color:#243225}
.btn.danger {color:var(--danger)}
.btn.icon {width:40px;padding:0}
.btn.quiet {background:transparent;border-color:transparent}
.board {display:grid;grid-template-columns:minmax(0,1fr) minmax(238px,278px);gap:20px;align-items:start}
.maincol,.rail {display:grid;gap:15px;min-width:0}
.card {background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.pad {padding:18px}
.card-title {font-size:1rem;letter-spacing:-.023em}
.muted {color:var(--muted);font-size:.86rem;line-height:1.5}
.hero {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 19px;background:#e8efe3;border-color:#d9e4d6}
.hero h2 {font-size:1.04rem;letter-spacing:-.025em}
.hero p {margin-top:5px}
.datebar {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.day {padding:10px 0 9px;display:grid;gap:3px;justify-items:center;border:1px solid var(--line);background:white;border-radius:11px;color:var(--muted);min-width:0;font-size:.72rem}
.day b {font-size:1.07rem;color:var(--ink)}
.day.selected {color:#e6f0e8;background:var(--green);border-color:var(--green)}
.day.selected b {color:white}
.toolbar {display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
.seg {display:flex;gap:4px;flex-wrap:wrap}
.pill {font-size:.79rem;font-weight:650;color:var(--muted);border:1px solid transparent;border-radius:9px;padding:8px 10px;background:transparent}
.pill:hover,.pill.active {background:#fff;border-color:var(--line);color:var(--ink)}
.search {width:148px;max-width:100%;border:1px solid var(--line);border-radius:9px;background:#fff;padding:8px 10px;font-size:.81rem}
.tasklist {padding:0;overflow:hidden}
.taskrow {display:grid;grid-template-columns:31px minmax(0,1fr) auto;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid #e9ede6}
.taskrow:last-child {border-bottom:0}
.taskrow.done .task-title {text-decoration:line-through;color:#69786f}
.check {border:1px solid #a8bcad;background:white;color:var(--green);border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:.82rem;line-height:1}
.check.done {background:#dce9dd;border-color:#dce9dd}
.task-open {border:0;text-align:left;background:none;color:inherit;padding:2px 0;min-width:0}
.task-title {display:block;font-size:.91rem;font-weight:700;overflow-wrap:anywhere;line-height:1.3}
.task-meta {display:flex;flex-wrap:wrap;gap:5px 9px;align-items:center;color:var(--muted);font-size:.73rem;margin-top:5px}
.tag {display:inline-flex;align-items:center;max-width:100%;overflow-wrap:anywhere;border-radius:7px;padding:3px 7px;background:#e9f1e9;color:#365844;font-size:.71rem;font-weight:650}
.tag.high {background:#faedd3;color:#744c24}
.tag.conflict {background:#fde7df;color:#883b30}
.task-actions {display:flex;gap:4px}
.task-actions .btn {min-height:30px;width:30px;padding:0}
.empty {padding:36px 17px;text-align:center;color:var(--muted);font-size:.9rem}
.progress-card {display:grid;gap:11px}
.progress-nums {font-size:2.1rem;font-weight:760;letter-spacing:-.07em;line-height:1}
.progress-nums span {font-size:1.08rem;color:var(--muted);letter-spacing:-.03em}
.progress {height:7px;border-radius:8px;overflow:hidden;background:#e8ede5}
.progress i {display:block;height:100%;background:#689279}
.healthline {display:flex;gap:7px;align-items:center;margin:9px 0 5px;font-size:.85rem;font-weight:700}
.healthline .dot {background:#85948a;width:8px;height:8px;border-radius:50%}
.healthline.online .dot {background:#3c9964}
.healthline.offline .dot {background:#b76544}
.rail .btn {margin-top:10px}
.split {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;gap:18px}
.section {display:grid;gap:13px}
.section h2 {font-size:1.1rem;letter-spacing:-.028em}
.section label,.form label {display:grid;gap:6px;font-size:.8rem;font-weight:680;min-width:0}
.field {width:100%;min-width:0;background:#fbfcf9;border:1px solid #d5ded3;border-radius:9px;color:var(--ink);padding:10px 11px;font-size:.88rem;font-weight:450}
textarea.field {resize:vertical;min-height:76px}
.form {display:grid;gap:13px}
.form-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.form label.checklabel,.checklabel {display:flex;align-items:center;gap:8px;font-weight:540}
.form input[type=checkbox] {accent-color:var(--green)}
.notice {border-radius:10px;background:#f5f0df;padding:11px 12px;color:#655226;font-size:.81rem;line-height:1.46}
.error {color:var(--danger);font-size:.84rem;line-height:1.4}
.details {display:grid;gap:10px;font-size:.83rem;color:var(--muted)}
.details div {display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #e6ebe3;padding-bottom:8px}
.details strong {text-align:right;color:var(--ink);overflow-wrap:anywhere}
.mobile-brand,.mobile-nav {display:none}
dialog {border:1px solid var(--line);border-radius:17px;padding:0;width:min(540px,calc(100% - 24px));max-height:calc(100dvh - 30px);overflow:auto;background:#fff;color:var(--ink);box-shadow:0 18px 60px #11281940}
dialog::backdrop {background:#10271b65}
.dialog-body {padding:21px;display:grid;gap:15px}
.dialog-head {display:flex;justify-content:space-between;gap:10px;align-items:center}
.dialog-head h2 {font-size:1.35rem;letter-spacing:-.04em}
.dialog-foot {display:flex;gap:8px;justify-content:end;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:13px}
.dialog-foot .left {margin-right:auto}
#toast {display:none;position:fixed;z-index:6;bottom:24px;left:50%;transform:translateX(-50%);max-width:min(560px,calc(100vw - 24px));background:var(--sidebar);color:white;border-radius:10px;padding:11px 15px;font-size:.84rem;box-shadow:0 8px 26px #16271b45}
#toast.show {display:block}
.phone-stage {display:grid;place-items:center;min-height:535px;background:#e6ebe1;border-radius:17px;padding:22px;overflow:hidden}
.phone {width:min(100%,333px);height:502px;background:#19392c;border:8px solid #192820;border-radius:30px;box-shadow:0 16px 35px #15261e2b;display:flex;flex-direction:column;align-items:center;padding:17px 12px 15px;gap:12px}
.phone-clock {color:#eef4ee;text-align:center;padding:13px 0 9px;font-size:2.45rem;font-weight:700;letter-spacing:-.07em}
.phone-clock small {display:block;font-size:.7rem;letter-spacing:0;color:#c8d9cd}
.widget {width:100%;background:#f5f6ed;border-radius:18px;padding:12px;overflow:hidden}
.widget.compact {width:73%}
.widget h3 {font-size:.89rem;letter-spacing:-.025em}
.widget-head,.widget-actionrow {display:flex;justify-content:space-between;align-items:center;gap:6px}
.widget-row {display:flex;align-items:center;gap:8px;border-bottom:1px solid #e1e6dc;padding:8px 0;font-size:.73rem;line-height:1.3}
.widget-row:last-child {border:0}
.widget-row .check {width:19px;height:19px;flex:none;font-size:.69rem}
.widget-row div {min-width:0;overflow-wrap:anywhere}
.widget-row small {display:block;color:var(--muted)}
.widget-actionrow {justify-content:start;margin-top:7px;flex-wrap:wrap}
.widget-actionrow .btn {min-height:26px;width:27px;padding:0;font-size:.75rem}
.route-item {padding:12px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.route-item:last-child {border-bottom:0}
@media(max-width:1100px){
  .shell {grid-template-columns:185px minmax(0,1fr)}
  .sidebar {padding-left:12px;padding-right:12px}
  .board {grid-template-columns:minmax(0,1fr) 225px;gap:13px}
  .heading h1 {font-size:2.35rem}
}
@media(max-width:920px){
  .board {grid-template-columns:minmax(0,1fr)}
  .rail {grid-template-columns:repeat(2,minmax(0,1fr))}
  .split {grid-template-columns:minmax(0,1fr)}
}
@media(max-width:680px){
  .shell {display:block}
  .sidebar,.crumb {display:none}
  .mobile-brand {display:flex;font-size:.94rem}
  .mobile-brand .brand-mark {width:31px;height:31px;border-radius:9px}
  .topbar {min-height:58px;padding:9px 13px}
  .top-actions {gap:5px}
  .top-actions .avatar {display:none}
  .content {padding:22px 13px calc(89px + env(safe-area-inset-bottom))}
  .heading {align-items:start;gap:8px;margin-bottom:16px}
  .heading h1 {font-size:1.93rem}
  .heading p {font-size:.79rem;line-height:1.35}
  .heading .btn {min-height:37px;padding:7px 8px;font-size:.75rem}
  .heading .btn .ico {width:15px}
  .hero {padding:13px}
  .hero .muted {font-size:.77rem}
  .hero h2 {font-size:.94rem}
  .day {padding:8px 0;font-size:.67rem}
  .day b {font-size:.94rem}
  .taskrow {padding:11px 10px;gap:6px;grid-template-columns:27px minmax(0,1fr) auto}
  .task-title {font-size:.85rem}
  .task-meta {font-size:.69rem}
  .rail {grid-template-columns:minmax(0,1fr)}
  .mobile-nav {position:fixed;z-index:3;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:5px 6px calc(5px + env(safe-area-inset-bottom));background:#fcfdf9;border-top:1px solid var(--line)}
  .mobile-nav .navbtn {min-width:0;display:grid;place-items:center;gap:4px;padding:6px 2px;font-size:.67rem;color:var(--muted)}
  .mobile-nav .navbtn.active {background:#e6efe4;color:var(--green)}
  .mobile-nav .ico {font-size:1.04rem}
  #toast {bottom:75px}
  .phone-stage {padding:15px}
}
@media(max-width:360px){
  .heading h1 {font-size:1.68rem}
  .topbar .state {padding:5px 7px;font-size:.69rem}
  .hero .btn {padding:6px;font-size:.75rem}
  .task-actions .btn {width:26px}
  .dialog-body {padding:14px}
  .form-grid {grid-template-columns:minmax(0,1fr)}
}
@media(max-width:279px){
  .topbar,.hero {flex-wrap:wrap}
  .heading {flex-direction:column}
  .datebar {gap:3px}
  .mobile-nav .navtext {max-width:100%;font-size:.62rem}
  .phone-stage {padding:8px}
  .widget-head {flex-wrap:wrap}
}

.taskrow{grid-template-columns:28px minmax(0,1fr) auto}.task-steps .actions{display:flex;align-items:center;gap:6px}.task-steps .field{flex:1;min-width:90px;width:auto}

.build-version {font-size:.7em;font-weight:500;color:var(--muted);white-space:nowrap}
.task-steps {display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px}
.task-steps h3 {margin:0;font-size:1rem}
.task-steps ol {display:grid;gap:8px;margin:0;padding:0;list-style:none}
.task-steps ol:empty {display:none}
.task-steps > button {justify-self:start}
.task-steps .actions {flex-wrap:wrap}
.task-actions {display:flex;align-items:center;gap:4px}
.taskrow .task-actions [data-action="task-steps"] {width:auto;font-size:.72rem;white-space:nowrap;padding-inline:6px}
body[data-interface="mytasks"] .taskrow,
body[data-interface="mytasks"] .daily-day-tasks .taskrow {grid-template-columns:27px minmax(0,1fr) auto}

.task-attachment[hidden],#task-dictation-status[hidden] {display:none}
#task-dialog,#materials-dialog {overflow-x:hidden;overscroll-behavior-x:none;touch-action:pan-y}
#task-dialog .dialog-body,#task-dialog .form,#task-dialog .form-grid,
#task-dialog .wx-task-materials,#materials-dialog .dialog-body {min-width:0;max-width:100%}
#task-dialog .field {min-width:0;max-width:100%}
#task-dialog .dialog-head {position:sticky;top:0;z-index:2;background:var(--surface);border-radius:8px}
.task-close {display:grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border:0;background:none;color:inherit}
.task-close span {display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;font-size:20px;line-height:1}
.task-close:hover span,.task-close:focus-visible span {background:var(--light)}

#task-dialog .dialog-body,#materials-dialog .dialog-body {grid-template-columns:minmax(0,1fr);overflow-wrap:anywhere}
#task-dialog .actions,#materials-dialog .actions {flex-wrap:wrap}
#task-dialog .btn,#materials-dialog .btn {min-width:0;max-width:100%;white-space:normal}
#task-dialog .task-steps .field {flex:1 1 120px}