:root { --ink:#213047; --muted:#8390a3; --line:#e8edf3; --surface:#fff; --canvas:#f5f7fb; --blue:#426bdb; --blue-soft:#edf2ff; --green:#26a57a; --amber:#eea82a; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:320px; color:var(--ink); font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; background:var(--canvas); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:252px; padding:28px 18px 20px; display:flex; flex-direction:column; color:#d5e0f4; background:linear-gradient(165deg,#152b4d,#213e6c); }
.brand { display:flex; gap:11px; align-items:center; padding:0 8px 30px; color:#fff; }.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; font-weight:800; background:linear-gradient(145deg,#83b8ff,#5b75ed); }.brand strong,.sidebar-user strong { display:block; font-size:15px; }.brand small,.sidebar-user small { display:block; margin-top:3px; color:#91a8ca; font-size:12px; }
.main-nav { display:grid; gap:6px; }.nav-item { border:0; border-radius:10px; padding:13px 12px; color:#c6d4ed; text-align:left; background:transparent; }.nav-item span { display:inline-grid; width:22px; place-items:center; margin-right:8px; font-weight:700; }.nav-item:hover,.nav-item.active { color:#fff; background:#365885; }
.sidebar-user { display:flex; gap:9px; align-items:center; margin-top:auto; padding:16px 8px 0; border-top:1px solid rgba(255,255,255,.12); }.avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#345486; background:#d9e8ff; font-size:13px; }
.workspace { width:calc(100% - 252px); padding:34px clamp(20px,4vw,64px) 50px; }.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:25px; }.eyebrow { margin:0 0 5px; color:var(--muted); font-size:13px; }.topbar h1 { margin:0; font-size:28px; letter-spacing:-.5px; }
.primary-button,.secondary-button,.text-button { border:0; border-radius:9px; font-weight:600; }.primary-button { padding:11px 16px; color:white; background:var(--blue); box-shadow:0 6px 14px rgba(66,107,219,.2); }.primary-button:hover { background:#365cc3; }.secondary-button { padding:10px 15px; color:var(--blue); background:var(--blue-soft); }.text-button { padding:7px; color:var(--blue); background:transparent; }
.overview-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:20px; }.overview-card { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }.card-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; font-size:18px; font-weight:700; }.blue { color:var(--blue); background:var(--blue-soft); }.amber { color:#bc7910; background:#fff4d9; }.green { color:var(--green); background:#e4f8f0; }.overview-card small { display:block; margin-bottom:5px; color:var(--muted); }.overview-card strong { font-size:23px; }.overview-card em { margin-left:4px; color:var(--muted); font-size:12px; font-style:normal; }
.todo-layout { display:grid; grid-template-columns:minmax(420px,1.08fr) minmax(340px,.92fr); gap:20px; }.calendar-card,.task-card { min-height:445px; padding:22px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }.calendar-header,.task-header { display:flex; align-items:center; justify-content:space-between; }.calendar-header h2,.task-header h2 { margin:0; font-size:18px; }.calendar-header button { width:30px; height:30px; border:0; border-radius:7px; color:#778499; background:#f3f6fa; font-size:23px; line-height:20px; }.weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; }.weekdays { margin-top:22px; color:#9aa6b6; font-size:12px; }.calendar-grid { gap:5px; margin-top:10px; }.calendar-day { position:relative; height:50px; border:0; border-radius:10px; color:#45546a; background:transparent; }.calendar-day:hover { background:#f3f6fb; }.calendar-day.muted { color:#c6ced9; }.calendar-day.today { color:var(--blue); font-weight:800; background:var(--blue-soft); }.calendar-day.selected { outline:2px solid #90a9f2; }.calendar-day.has-task::after { position:absolute; bottom:6px; left:calc(50% - 3px); width:6px; height:6px; border-radius:50%; content:""; background:var(--amber); }.calendar-day.done-only::after { background:var(--green); }.calendar-tip { margin:19px 0 0; padding-top:17px; border-top:1px solid var(--line); color:#8794a6; font-size:12px; }.calendar-tip i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--amber); }
.task-list { display:grid; gap:10px; margin-top:20px; }.task-row { display:grid; grid-template-columns:22px 1fr; gap:10px; padding:13px 12px; border:1px solid var(--line); border-radius:11px; }.task-row.property-task { border-color:#dbe8f8; background:#f4f8fe; }.task-row.client-task { border-color:#e7dff7; background:#f8f5fd; }.task-row.property-task input { accent-color:#4d83d3; }.task-row.client-task input { accent-color:#8b6bc4; }.task-row input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--green); }.task-row strong { display:block; font-size:14px; }.task-row p { margin:5px 0 0; color:#8b97a8; font-size:12px; }.task-row.completed { border-color:#edf0f3; background:#fafbfc; }.task-row.completed strong,.task-row.completed p { color:#9da7b4; text-decoration:line-through; }.empty-state { display:grid; justify-items:center; padding:72px 0 20px; color:#8b98a9; text-align:center; }.empty-state span { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#9aafe8; background:#f0f4ff; font-size:22px; }.empty-state p { margin:13px 0; font-size:14px; }
.placeholder-section { display:grid; min-height:420px; place-content:center; justify-items:center; padding:40px; border:1px solid var(--line); border-radius:15px; background:var(--surface); text-align:center; }.placeholder-icon { display:grid; place-items:center; width:60px; height:60px; margin-bottom:15px; border-radius:18px; color:var(--blue); background:var(--blue-soft); font-size:27px; }.placeholder-section h2 { margin:0; }.placeholder-section p { margin:10px 0 22px; color:var(--muted); }
dialog { width:min(450px,calc(100% - 28px)); padding:0; border:0; border-radius:16px; box-shadow:0 20px 60px rgba(24,42,71,.24); }dialog::backdrop { background:rgba(15,29,52,.38); }.dialog-header { display:flex; align-items:start; justify-content:space-between; margin-bottom:22px; }.dialog-header h2 { margin:0; }.close-button { border:0; color:#8490a0; background:transparent; font-size:25px; }.dialog-header+label { margin-top:0; }#taskForm { padding:24px; }#taskForm label { display:grid; gap:7px; margin-top:16px; color:#526176; font-size:13px; font-weight:600; }#taskForm input,#taskForm textarea { width:100%; padding:10px 11px; border:1px solid #dce3ec; border-radius:8px; color:var(--ink); outline-color:#91a9ec; }#taskForm textarea { min-height:74px; resize:vertical; }.dialog-actions { display:flex; justify-content:end; gap:10px; margin-top:24px; }
.dashboard-panel { display:grid; gap:18px; margin-bottom:20px; }.dashboard-hero { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:25px 28px; border-radius:18px; color:#fff; background:linear-gradient(120deg,#1e5bc8,#437ee2 58%,#72a5f4); box-shadow:0 13px 28px rgba(37,96,194,.18); }.dashboard-hero.management { background:linear-gradient(120deg,#1d3e74,#2865b4 58%,#4a8bdc); }.dashboard-hero p,.dashboard-hero h2,.dashboard-hero span { margin:0; color:inherit; }.dashboard-hero p { margin-bottom:8px; color:#d8e7ff; font-size:14px; }.dashboard-hero h2 { font-size:25px; }.dashboard-hero span { display:block; margin-top:8px; color:#e7f0ff; font-size:13px; }.dashboard-link { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:10px 0; border:0; border-top:1px solid #edf1f6; color:#3165b4; background:transparent; font-weight:700; text-align:left; }.dashboard-link span { color:#8ba0bc; font-size:19px; }.dashboard-link.light { width:auto; flex:none; padding:10px 14px; border:1px solid rgba(255,255,255,.35); border-radius:10px; color:#fff; background:rgba(255,255,255,.14); white-space:nowrap; }.dashboard-link.light span { color:#fff; }.dashboard-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.dashboard-kpis article { display:flex; align-items:center; gap:12px; min-width:0; padding:17px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }.dashboard-icon { display:grid; flex:none; place-items:center; width:38px; height:38px; border-radius:11px; font-weight:800; }.dashboard-icon.blue { color:#2169d5; background:#e9f2ff; }.dashboard-icon.red { color:#ca4d58; background:#ffedef; }.dashboard-icon.purple { color:#765bc3; background:#f1ecff; }.dashboard-icon.amber { color:#b67718; background:#fff4de; }.dashboard-kpis small,.dashboard-kpis em { display:block; color:var(--muted); font-size:12px; font-style:normal; }.dashboard-kpis strong { margin:2px 4px 0 0; font-size:23px; }.dashboard-kpis em { display:inline; }.dashboard-activity { padding:18px 21px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }.dashboard-activity-head { display:flex; align-items:end; justify-content:space-between; gap:14px; }.dashboard-activity-head p { margin:0 0 4px; color:var(--muted); font-size:13px; }.dashboard-activity-head h3 { margin:0; font-size:18px; }.dashboard-activity-head > span { color:#8492a5; font-size:12px; }.dashboard-activity-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }.dashboard-activity-grid article { padding:13px 15px; border-radius:11px; background:#f6f9fd; }.dashboard-activity-grid small { display:block; color:#718197; font-size:13px; }.dashboard-activity-grid strong { margin:4px 4px 0 0; color:#245fae; font-size:25px; }.dashboard-activity-grid em { color:#8290a2; font-size:12px; font-style:normal; }.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:18px; }.dashboard-grid.management-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-card { min-width:0; padding:21px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }.dashboard-card p { margin:0 0 5px; color:var(--muted); font-size:13px; }.dashboard-card h3 { margin:0; font-size:18px; }.dashboard-card-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:10px; }.dashboard-card-head .dashboard-link { width:auto; padding:0; border:0; font-size:13px; }.dashboard-muted { color:#8b98aa; font-size:12px; }.dashboard-attention { display:grid; gap:2px; margin:0; padding:0; list-style:none; }.dashboard-attention li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:start; padding:12px 0; border-bottom:1px solid #eef2f6; }.dashboard-attention li:last-child { border-bottom:0; }.dashboard-attention strong,.dashboard-attention small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.dashboard-attention strong { font-size:14px; }.dashboard-attention small { margin-top:4px; color:#8795a8; font-size:12px; }.dashboard-item-type { padding:3px 7px; border-radius:999px; color:#61758f; background:#edf1f5; font-size:11px; white-space:nowrap; }.dashboard-item-type.property { color:#3773b8; background:#eaf4ff; }.dashboard-item-type.client { color:#8061bd; background:#f2edff; }.dashboard-attention em { padding:3px 7px; border-radius:999px; color:#be515a; background:#fff0f1; font-size:11px; font-style:normal; white-space:nowrap; }.dashboard-empty { padding:28px 8px; color:#8b98aa; font-size:14px; text-align:center; }.dashboard-actions-card { display:grid; align-content:start; }.dashboard-actions-card .dashboard-link { margin-top:10px; }.dashboard-team-list { display:grid; margin:8px 0; }.dashboard-team-list div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid #edf1f6; }.dashboard-team-list div:last-child { border-bottom:0; }.dashboard-team-list span { color:#273d5a; font-weight:700; }.dashboard-team-list small { color:#8290a4; font-size:12px; white-space:nowrap; }#todoLegacy .overview-cards { display:none; }
@media (max-width:850px) { .sidebar { width:72px; padding:18px 10px; }.brand { justify-content:center; padding:0 0 25px; }.brand div,.nav-item:not(.active) { font-size:0; }.nav-item { padding:12px; text-align:center; }.nav-item span { margin:0; font-size:18px; }.sidebar-user div { display:none; }.workspace { width:calc(100% - 72px); padding:24px 18px; }.todo-layout,.dashboard-grid,.dashboard-grid.management-grid { grid-template-columns:1fr; }.dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:570px) { .app-shell { display:block; }.sidebar { position:sticky; top:0; z-index:2; width:100%; height:64px; padding:8px 12px; flex-direction:row; align-items:center; }.brand { padding:0; }.brand div,.sidebar-user { display:none; }.main-nav { display:flex; flex:1; justify-content:end; gap:2px; }.nav-item { width:38px; padding:9px; }.nav-item.active { background:#365885; }.workspace { width:100%; padding:22px 15px; }.topbar { align-items:start; }.topbar h1 { font-size:23px; }.topbar .primary-button { padding:10px; font-size:0; }.topbar .primary-button::first-letter { font-size:18px; }.overview-cards { grid-template-columns:1fr; }.calendar-card,.task-card { padding:17px; min-height:auto; }.calendar-day { height:43px; }.todo-layout { gap:14px; }.dashboard-hero { align-items:start; padding:21px; }.dashboard-hero h2 { font-size:21px; }.dashboard-hero .dashboard-link.light { padding:8px 10px; font-size:12px; }.dashboard-hero > div { min-width:0; }.dashboard-hero > div span { display:none; }.dashboard-kpis { grid-template-columns:1fr 1fr; gap:10px; }.dashboard-kpis article { gap:9px; padding:13px; }.dashboard-kpis strong { font-size:20px; }.dashboard-icon { width:32px; height:32px; }.dashboard-card { padding:17px; }.dashboard-team-list div { display:block; }.dashboard-team-list small { display:block; margin-top:4px; white-space:normal; } }
@media (max-width:570px) { .dashboard-activity { padding:17px; }.dashboard-activity-head { align-items:start; }.dashboard-activity-head > span { max-width:130px; text-align:right; }.dashboard-activity-grid { grid-template-columns:1fr; gap:8px; margin-top:13px; }.dashboard-activity-grid article { display:flex; align-items:center; justify-content:space-between; }.dashboard-activity-grid small { margin-right:auto; }.dashboard-activity-grid strong { margin:0 4px 0 0; } }

.dashboard-client-operations { padding:18px 21px; border:1px solid #f0d6aa; border-radius:15px; background:#fffaf0; }.dashboard-client-operations > div:first-child p { margin:0 0 4px; color:#9d7024; font-size:12px; font-weight:700; }.dashboard-client-operations h3 { margin:0; color:#5d4522; font-size:18px; }.dashboard-client-risk-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:15px; }.dashboard-client-risk-grid article { padding:14px 15px; border:1px solid #f2dfbd; border-radius:11px; background:#fff; }.dashboard-client-risk-grid span,.dashboard-client-risk-grid small { display:block; color:#8c7454; font-size:12px; }.dashboard-client-risk-grid strong { display:inline-block; margin:4px 5px 5px 0; color:#bd7922; font-size:27px; }.dashboard-client-risk-grid .dashboard-link { margin-top:8px; color:#a96618; }
.dashboard-today-actions { border-color:#d9e6f7; }.dashboard-action-list { display:grid; gap:0; margin:0; padding:0; list-style:none; }.dashboard-action-list li { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid #edf1f6; }.dashboard-action-list li:last-child { border-bottom:0; }.dashboard-action-list strong,.dashboard-action-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.dashboard-action-list strong { color:#253b58; font-size:14px; }.dashboard-action-list small { margin-top:4px; color:#8290a2; font-size:12px; }.dashboard-action-priority { padding:3px 7px; border-radius:999px; color:#8a631d; background:#fff4dd; font-size:11px; font-style:normal; white-space:nowrap; }.dashboard-action-list li:has(.dashboard-action-priority:first-of-type) { position:relative; }.dashboard-action-list button { padding:7px 10px; border:1px solid #cfe0f5; border-radius:8px; color:#2e6ab4; background:#f4f8ff; font-size:12px; font-weight:700; white-space:nowrap; }.dashboard-action-list button:hover { background:#e6f1ff; }
@media (max-width:570px) { .dashboard-client-operations { padding:17px; }.dashboard-client-risk-grid { grid-template-columns:1fr; } }
@media (max-width:570px) { .dashboard-action-list li { grid-template-columns:auto minmax(0,1fr) auto; }.dashboard-action-list button { grid-column:2 / 4; width:100%; }.dashboard-action-list strong,.dashboard-action-list small { white-space:normal; } }