:root{
  --bg:#f5f6f8;
  --panel:#ffffff;
  --border:#e3e6ea;
  --text:#22262b;
  --muted:#6b7280;
  --accent:#4f6df5;
  --accent-light:#e8edff;
  --danger:#e6574c;
  --radius:10px;
  --shadow:0 1px 3px rgba(20,25,35,.06), 0 1px 2px rgba(20,25,35,.04);

  --c-slate:#6b7280;  --c-red:#e6574c;  --c-orange:#f0964b;
  --c-amber:#eebd3d;  --c-green:#4caf6e; --c-teal:#3fb6ad;
  --c-blue:#4f6df5;   --c-purple:#9b6bf2; --c-pink:#ef6fa6;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
a{color:inherit;}

/* ---------- top nav ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-bottom:1px solid var(--border);padding:0 24px;height:60px;position:sticky;top:0;z-index:50;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;}
.brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#7b93ff);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;}
.tabs{display:flex;gap:4px;}
.tab-btn{border:none;background:transparent;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s;}
.tab-btn:hover{background:var(--bg);color:var(--text);}
.tab-btn.active{background:var(--accent-light);color:var(--accent);}
.user-chip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;}
.avatar{width:30px;height:30px;border-radius:50%;background:#dfe4ee;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);font-size:13px;}

/* ---------- layout ---------- */
.view{display:none;padding:22px 24px;max-width:1280px;margin:0 auto;}
.view.active{display:block;}
.view-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.view-header h1{font-size:21px;margin:0;}
.btn{border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:#3d57e0;}
.btn-ghost{background:var(--panel);color:var(--text);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--bg);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-icon{background:transparent;border:none;cursor:pointer;color:var(--muted);border-radius:6px;padding:6px;display:inline-flex;}
.btn-icon:hover{background:var(--bg);color:var(--text);}
.pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:.2px;}

/* ---------- TASKS ---------- */
.tasks-layout{display:grid;grid-template-columns:270px 1fr;gap:20px;align-items:start;}
.lists-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.lists-panel-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.lists-panel-head h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.list-group-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:12px 16px 4px;}
.list-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;border-left:3px solid transparent;transition:.12s;}
.list-item:hover{background:var(--bg);}
.list-item.active{background:var(--accent-light);border-left-color:var(--accent);}
.list-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;display:inline-block;}
.list-item .name{flex:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.list-item .count{font-size:12px;color:var(--muted);background:var(--bg);padding:2px 8px;border-radius:99px;}
.list-item .pin-ico{color:var(--accent);opacity:.8;}
.empty-lists{padding:16px;color:var(--muted);font-size:13px;}

.task-main{display:flex;flex-direction:column;gap:14px;}
.list-banner{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;}
.list-banner-title{display:flex;align-items:center;gap:12px;}
.list-banner-title .list-dot{width:14px;height:14px;}
.list-banner-title h2{margin:0;font-size:18px;}
.banner-actions{display:flex;gap:6px;}

.add-task-row{background:var(--panel);border:1px dashed var(--border);border-radius:var(--radius);padding:13px 16px;display:flex;align-items:center;gap:10px;color:var(--muted);cursor:pointer;font-size:14px;font-weight:600;}
.add-task-row:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}

.task-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;}
.checkbox{width:20px;height:20px;border-radius:6px;border:2px solid #c9cfd8;flex-shrink:0;margin-top:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:.15s;}
.checkbox:hover{border-color:var(--accent);}
.checkbox.done{background:var(--accent);border-color:var(--accent);}
.task-body{flex:1;min-width:0;}
.task-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.task-title{font-size:15px;font-weight:600;}
.task-title.done{color:var(--muted);text-decoration:line-through;font-weight:500;}
.priority{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;}
.priority.urgent{background:#fde4e2;color:#c62a1d;}
.priority.high{background:#fde9d9;color:#b35b14;}
.priority.medium{background:#fdf2d2;color:#9a7610;}
.priority.low{background:#e3f3e8;color:#2f7d4f;}
.task-meta{margin-top:4px;display:flex;gap:14px;align-items:center;font-size:12.5px;color:var(--muted);flex-wrap:wrap;}
.task-meta .due{display:flex;align-items:center;gap:4px;}
.task-meta .due.overdue{color:var(--danger);font-weight:700;}
.task-detail{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.4;white-space:pre-wrap;}
.subtasks{margin-top:10px;display:flex;flex-direction:column;gap:6px;padding-left:2px;}
.subtask{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);}
.subtask .checkbox{width:16px;height:16px;border-radius:5px;}
.subtask.done span{color:var(--muted);text-decoration:line-through;}
.subtask-progress{font-size:11.5px;color:var(--muted);margin-top:8px;}
.task-actions{display:flex;gap:2px;flex-shrink:0;}
.add-subtask-row{display:flex;gap:8px;align-items:center;margin-top:8px;}
.add-subtask-row input{flex:1;border:1px solid var(--border);border-radius:6px;padding:6px 9px;font-size:12.5px;font-family:inherit;background:var(--bg);}

.completed-toggle{display:flex;align-items:center;gap:8px;padding:12px 4px;color:var(--muted);font-weight:600;font-size:13.5px;cursor:pointer;}
.completed-toggle .chev{transition:.15s;display:inline-flex;}
.completed-toggle.open .chev{transform:rotate(90deg);}
.completed-list{display:none;flex-direction:column;gap:10px;}
.completed-list.open{display:flex;}

.swatch-row{display:flex;gap:8px;flex-wrap:wrap;}
.swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.swatch.selected{border-color:var(--text);box-shadow:0 0 0 2px var(--panel) inset;}

/* ---------- NOTES ---------- */
.notes-toolbar{display:flex;gap:10px;margin-bottom:18px;}
.notes-search{flex:1;border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:14px;background:var(--panel);display:flex;align-items:center;gap:8px;color:var(--muted);}
.notes-search input{border:none;outline:none;font-size:14px;flex:1;background:transparent;color:var(--text);}

.composer{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;margin-bottom:22px;}
.composer .placeholder{color:var(--muted);font-size:14px;cursor:text;}
.composer-editable{font-size:14px;min-height:24px;outline:none;line-height:1.5;}
.composer-editable ul{margin:6px 0;padding-left:20px;}
.composer-editable[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--muted);}
.composer-toolbar{display:none;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.composer-toolbar.show{display:flex;}
.format-icons{display:flex;gap:2px;}
.format-icons .btn-icon{font-weight:700;font-size:13px;width:30px;height:30px;justify-content:center;}
.format-icons .btn-icon.active{background:var(--accent-light);color:var(--accent);}
.note-img-preview{max-width:100%;max-height:160px;border-radius:8px;margin:8px 0;display:block;}

.notes-grid{columns:4 240px;column-gap:16px;}
.note-card{break-inside:avoid;margin-bottom:16px;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;position:relative;}
.note-card .pin-corner{position:absolute;top:8px;right:8px;color:var(--accent);background:rgba(255,255,255,.85);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.note-img{width:100%;display:block;height:140px;object-fit:cover;background:#dfe4ee;}
.note-body{padding:14px 14px 8px;}
.note-title{font-weight:700;font-size:14.5px;margin-bottom:6px;}
.note-content{font-size:13.5px;line-height:1.5;color:var(--text);word-wrap:break-word;}
.note-content ul{margin:6px 0;padding-left:20px;}
.note-content ol{margin:6px 0;padding-left:20px;}
.note-content .chk{display:flex;gap:6px;align-items:flex-start;margin:3px 0;}
.note-content .chk .checkbox{width:15px;height:15px;border-radius:4px;margin-top:2px;}
.note-content .chk.done span{color:var(--muted);text-decoration:line-through;}
.note-footer{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 10px 14px;opacity:0;transition:.15s;}
.note-card:hover .note-footer{opacity:1;}
.note-footer .left{font-size:11px;color:rgba(0,0,0,.45);}
.note-footer .icons{display:flex;gap:2px;}

/* ---------- FILES ---------- */
.files-layout{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start;}
.folder-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.folder-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;border-left:3px solid transparent;}
.folder-item:hover{background:var(--bg);}
.folder-item.active{background:var(--accent-light);border-left-color:var(--accent);}
.folder-item .ico{color:#f0964b;}
.folder-item .count{margin-left:auto;font-size:12px;color:var(--muted);}
.new-folder-row{display:flex;align-items:center;gap:8px;padding:12px 16px;color:var(--accent);font-weight:600;font-size:13.5px;cursor:pointer;border-top:1px solid var(--border);}

.upload-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:26px;text-align:center;color:var(--muted);margin-bottom:16px;background:var(--panel);cursor:pointer;}
.upload-zone:hover{border-color:var(--accent);color:var(--accent);}
.upload-zone strong{color:var(--accent);}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.breadcrumb b{color:var(--text);}

.file-table{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.file-row{display:grid;grid-template-columns:42px 1fr 120px 110px 140px;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border);font-size:13.5px;}
.file-row:last-child{border-bottom:none;}
.file-row.head{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;background:var(--bg);}
.file-ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;}
.file-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-meta{color:var(--muted);}
.file-row .row-actions{display:flex;gap:2px;justify-content:flex-end;}

/* ---------- misc ---------- */
.empty-note{color:var(--muted);font-size:13px;text-align:center;padding:30px 0;}
.icon{display:inline-flex;width:1em;height:1em;vertical-align:middle;}
svg{display:block;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#22262b;color:#fff;padding:12px 20px;border-radius:8px;font-size:13.5px;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:500;opacity:0;pointer-events:none;transition:.2s;}
.toast.show{opacity:1;}
.toast.error{background:var(--danger);}

/* ---------- LOGIN ---------- */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top left, #eef1ff 0%, var(--bg) 60%);padding:24px;}
.login-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 30px rgba(20,25,35,.08);padding:34px 32px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px;}
.login-sub{margin:0;text-align:center;color:var(--muted);font-size:13.5px;}
.login-foot{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.5;text-align:center;}
.login-error{color:var(--danger);font-size:13px;text-align:center;display:none;}
.login-error.show{display:block;}

/* ---------- DASHBOARD ---------- */
.dash-section{margin-bottom:22px;}
.dash-section-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-bottom:10px;color:var(--text);}
.dash-section-title .count{font-size:11px;font-weight:700;color:#fff;background:var(--muted);border-radius:99px;padding:2px 9px;}
.dash-section-title.overdue{color:var(--danger);}
.dash-section-title.overdue .count{background:var(--danger);}
.dash-section-title.today .count{background:var(--accent);}
.dash-section-title.today{color:var(--accent);}
.dash-section-title.soon .count{background:#f0964b;}
.dash-section-title.upcoming .count{background:#9aa1ad;}

.dash-item{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 16px;margin-bottom:10px;flex-wrap:wrap;}
.dash-type-badge{flex-shrink:0;font-size:10.5px;font-weight:800;letter-spacing:.04em;border-radius:7px;padding:5px 9px;color:#fff;text-align:center;min-width:64px;}
.dash-type-badge.bill{background:var(--c-blue);}
.dash-type-badge.event{background:var(--c-pink);}
.dash-type-badge.onetime{background:var(--c-teal);}
.dash-type-badge.task{background:var(--c-purple);}
.dash-item-body{flex:1;min-width:160px;}
.dash-item-title{font-size:14.5px;font-weight:700;}
.dash-item-sub{font-size:12.5px;color:var(--muted);margin-top:3px;}
.dash-item-sub.overdue{color:var(--danger);font-weight:600;}
.dash-item-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}

/* ---------- MODALS ---------- */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(20,25,35,.45);z-index:200;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--panel);border-radius:14px;width:100%;max-width:620px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(20,25,35,.25);overflow:hidden;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border);}
.modal-head h2{margin:0;font-size:17px;}
.modal-body{padding:20px 22px;overflow-y:auto;}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 22px;border-top:1px solid var(--border);}

.type-tabs{display:flex;gap:8px;margin-bottom:18px;}
.type-tab{flex:1;border:1px solid var(--border);background:var(--panel);border-radius:9px;padding:10px 12px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:.15s;}
.type-tab:hover{border-color:var(--accent);color:var(--accent);}
.type-tab.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent);}
.type-form{display:none;flex-direction:column;gap:12px;}
.type-form.active{display:flex;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-row.single{grid-template-columns:1fr;}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group label{font-size:12.5px;font-weight:600;color:var(--muted);}
.form-group input,.form-group select,.form-group textarea{border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--text);background:var(--bg);}
.form-group textarea{resize:vertical;min-height:70px;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);background:var(--panel);}
.form-error{color:var(--danger);font-size:12.5px;}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text);}