:root{
  color-scheme:light;font-family:var(--font-body);color:var(--ink);background:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;
  --font-body:"DM Sans",sans-serif;--font-head:Manrope,sans-serif;
  --accent:#6678ed;--accent-2:#8b7cf0;--on-accent:#fff;
  --bg:#f6f7fb;--bg-2:#f8f9fc;--surface:#fff;--sidebar:var(--surface);--fill:#f2f3f8;--line:#ebeef4;--line-strong:#cdd2dd;
  --ink:#20283a;--ink-2:#4a5368;--ink-3:#6f788b;--muted:#7d8597;
  --accent-strong:color-mix(in srgb,var(--accent) 86%,#000);
  --accent-soft:color-mix(in srgb,var(--accent) 11%,var(--surface));
  --accent-line:color-mix(in srgb,var(--accent) 38%,var(--surface));
  --accent-ink:color-mix(in srgb,var(--accent) 80%,var(--ink));
  --tint-red:#fff0ee;--tint-amber:#fff6e8;--tint-green:#ecf8f2;
}
:root[data-theme="dark"]{color-scheme:dark;--bg:#12151c;--bg-2:#151922;--surface:#1b202b;--fill:#242a38;--line:#2a3142;--line-strong:#3c4559;--ink:#e9ecf4;--ink-2:#c8cedb;--ink-3:#a5adbf;--muted:#8d95a8;--tint-red:#3a2326;--tint-amber:#3a3020;--tint-green:#1d3329}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#12151c;--bg-2:#151922;--surface:#1b202b;--fill:#242a38;--line:#2a3142;--line-strong:#3c4559;--ink:#e9ecf4;--ink-2:#c8cedb;--ink-3:#a5adbf;--muted:#8d95a8;--tint-red:#3a2326;--tint-amber:#3a3020;--tint-green:#1d3329}}
:root[data-font="jakarta"]{--font-body:"Plus Jakarta Sans",sans-serif;--font-head:"Plus Jakarta Sans",sans-serif}
:root[data-font="nunito"]{--font-body:Nunito,sans-serif;--font-head:Nunito,sans-serif}
:root[data-font="hand"]{--font-body:"Patrick Hand",cursive;--font-head:"Patrick Hand",cursive}
/* Patrick Hand có chữ thường thấp hơn hẳn font khác: phóng theo chiều cao chữ x cho đều */
:root[data-font="hand"] body{font-size-adjust:.54}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-width:320px;min-height:100vh;background:var(--bg)}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent-line);outline-offset:2px}
.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:254px;background:var(--sidebar);border-right:1px solid var(--line);padding:27px 17px 17px;display:flex;flex-direction:column;z-index:5}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);padding:0 10px 0 8px}
.brand-mark{width:37px;height:37px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center}
.brand-mark svg{width:24px;height:24px}
.brand-copy{display:grid;gap:2px}
.brand-copy strong{font:800 16px var(--font-head);letter-spacing:-.7px}
.brand-copy small{font-size:9.5px;letter-spacing:1.1px;color:var(--muted);font-weight:700}
.new-task-button{height:44px;margin:32px 1px 31px;border:0;border-radius:9px;color:var(--on-accent);background:var(--accent);box-shadow:0 5px 12px color-mix(in srgb,var(--accent) 17%,transparent);text-align:left;padding:0 12px;font-weight:600;font-size:13.5px}
.new-task-button,.primary-button{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.new-task-button:hover,.primary-button:hover{filter:brightness(.94);transform:translateY(-1px)}
.new-task-button .plus{font-size:20px;vertical-align:-2px;margin-right:8px}
kbd{font-family:inherit;font-size:12px;border:1px solid color-mix(in srgb,var(--on-accent) 35%,transparent);border-radius:4px;padding:2px 5px;color:color-mix(in srgb,var(--on-accent) 75%,transparent);float:right;margin-top:1px}
.nav-group{margin-bottom:29px}
.nav-label{font-size:11.5px;letter-spacing:1.1px;font-weight:700;color:var(--muted);margin:0 0 10px 11px}
.main-nav,.project-nav{display:grid;gap:3px}
.nav-item{width:100%;height:39px;border:0;background:transparent;color:var(--ink-3);border-radius:7px;display:flex;align-items:center;text-align:left;gap:12px;padding:0 11px;font-size:13.5px;font-weight:500;transition:.16s}
.nav-item:hover{background:var(--fill);color:var(--ink-2)}
.nav-item.active{color:var(--accent-ink);background:var(--accent-soft);font-weight:600}
.nav-icon{font-size:16px;width:17px;text-align:center;color:var(--muted);line-height:1}
.active .nav-icon{color:var(--accent-ink)}
.nav-count{margin-left:auto;background:var(--surface);border-radius:9px;padding:2px 7px;font-size:12px;color:var(--ink-3)}
.project-group{margin-top:0}
.nav-label-row{display:flex;align-items:center;justify-content:space-between;padding-right:3px;margin-bottom:8px}
.nav-label-row .nav-label{margin-bottom:0}
.icon-button{width:34px;height:34px;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:8px;font-size:19px;display:grid;place-items:center}
.icon-button:hover{background:var(--fill);color:var(--ink-2)}
.icon-button.small{width:26px;height:26px;font-size:17px}
.project-link{height:34px;font-size:13px}
.project-dot{width:8px;height:8px;border-radius:3px;flex:none}
.project-link .nav-count{background:transparent;color:var(--muted);padding:0}
.sidebar-bottom{margin-top:auto}
.focus-card{border:1px solid var(--line);background:linear-gradient(145deg,var(--accent-soft),var(--accent-soft));border-radius:10px;padding:13px 12px 12px;margin:0 1px 14px}
.focus-heading{font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px}
.focus-spark{color:#e5a84f;font-size:15px}
.focus-card p{font-size:12px;color:var(--muted);line-height:1.55;margin:7px 0 11px}
.focus-progress,.mini-progress{height:5px;border-radius:5px;background:var(--fill);overflow:hidden}
.focus-progress span,.mini-progress i{height:100%;display:block;border-radius:5px;background:var(--accent);width:0;transition:width .25s}
.focus-card small{display:block;color:var(--muted);font-size:11.5px;margin-top:7px}
.settings-button{height:36px;font-size:13px}
.profile{border-top:1px solid var(--line);margin-top:10px;padding:14px 4px 0;display:flex;align-items:center;gap:9px}
.avatar,.top-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:13px}
.profile-copy{display:grid;gap:3px;min-width:0}
.profile-copy strong{font-size:12px;color:var(--ink-2)}
.profile-copy small{font-size:11px;color:var(--muted)}
.profile-dots{margin-left:auto;color:var(--muted)}
.main-area{margin-left:254px;min-height:100vh}
.topbar{height:65px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 45px;background:var(--bg-2)}
/* Lời chào + ngày nằm trên thanh tiêu đề (thay cho breadcrumb) */
.top-greeting{display:flex;align-items:center;gap:10px;min-width:0}
.greeting-copy{min-width:0}
.topbar .eyebrow{font-size:10.5px;margin:0 0 3px}
.greeting-line{display:flex;align-items:baseline;gap:14px;min-width:0}
.topbar h1{font-size:21px;letter-spacing:-.6px;white-space:nowrap}
.topbar .wave{font-size:15px}
.topbar .page-subtitle{margin:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top-add{height:34px;padding:0 14px}
.top-actions{display:flex;align-items:center;gap:16px;flex:none}
.today-date{font-size:12px;color:var(--muted)}
.top-avatar{width:29px;height:29px;font-size:12px}
.search-toggle{font-size:22px}
.install-button{border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--accent-ink);padding:8px 11px;font-size:12px;font-weight:600}
.install-button span{font-size:15px;margin-right:4px}
.mobile-menu{display:none}
.sidebar-scrim{display:none}
.project-tools{display:flex;gap:2px;margin-right:4px}
.project-tools #deleteProject:hover{background:var(--tint-red);color:#d77572}
.content{max-width:1230px;margin:0 auto;padding:36px 45px 24px}
.welcome-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:25px}
.eyebrow{font-size:11.5px;letter-spacing:1.2px;font-weight:700;color:var(--muted);margin:0 0 9px}
h1,h2,h3,p{margin-top:0}
h1{font:700 28px var(--font-head);letter-spacing:-1.1px;margin:0;color:var(--ink)}
.wave{color:#e9ad55;font-size:20px;margin-left:4px}
.page-subtitle{font-size:13px;color:var(--muted);margin:7px 0 0}
.primary-button,.secondary-button,.danger-button{border:0;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;transition:.16s}
.primary-button{background:var(--accent);color:var(--on-accent);padding:11px 15px;box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 14%,transparent)}
.welcome-row .primary-button{height:37px}
.summary-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:13px;margin-bottom:27px}
.summary-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:15px 16px 14px;min-height:111px;box-shadow:0 2px 6px #26325105}
.summary-top{display:flex;align-items:center;gap:8px}
.summary-icon{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px}
.blue-icon{background:var(--accent-soft);color:var(--accent-ink)}.green-icon{background:var(--tint-green);color:#48b58f}.amber-icon{background:var(--tint-amber);color:#dfa14b}
.summary-caption{font-size:11px;letter-spacing:.8px;color:var(--muted);font-weight:700}
.summary-trend{font-size:11px;color:var(--muted);margin-left:auto}
.summary-number{font:700 24px var(--font-head);color:var(--ink);margin:12px 0 4px}
.summary-number span{font:400 12px var(--font-body);color:var(--muted)}
.summary-foot{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.mini-progress{width:69px;height:4px}.mini-progress i{background:#58bc97}
.summary-detail{font-size:11.5px;color:var(--muted)}
.work-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(230px,.9fr);gap:17px}
.task-panel,.week-card,.project-summary{background:var(--surface);border:1px solid var(--line);border-radius:10px}
.task-panel{padding:18px 19px 13px;min-height:340px}
.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.section-title-row{display:flex;align-items:center;gap:8px}
.section-heading h2{font:700 17px var(--font-head);letter-spacing:-.4px;margin:0;color:var(--ink)}
.section-heading p{font-size:11.5px;color:var(--muted);margin:5px 0 0}
.task-total{font-size:11.5px;color:var(--muted);background:var(--fill);border-radius:10px;padding:3px 7px}
.list-tools{display:flex;gap:5px;align-items:center}
.sort-select select{border:0;color:var(--muted);background:transparent;font-size:11.5px;max-width:132px;outline:none}
.filter-button{font-size:17px;width:29px;height:29px}
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;border-top:1px solid var(--line);padding:10px 0;font-size:11.5px;color:var(--muted)}
.filter-chip{display:flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);padding:5px 8px;border-radius:12px;color:var(--ink-3);font-size:11.5px}
.filter-chip.selected{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.priority-dot{width:6px;height:6px;border-radius:50%}.priority-dot.p1{background:#e25555}.priority-dot.p2{background:#ef8f3f}.priority-dot.p3{background:var(--accent)}.priority-dot.p4{background:#63b998}.priority-dot.p5{background:var(--line-strong)}
.task-list{min-height:94px}
.task-item{border-top:1px solid var(--line);display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 2px;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.task-check{appearance:none;width:16px;height:16px;border:1.5px solid var(--line-strong);border-radius:50%;margin:0;cursor:pointer;position:relative;transition:.15s}
.task-check:hover{border-color:var(--accent);background:var(--accent-soft)}
.task-check:checked{border-color:#5bbd98;background:#5bbd98}
.task-check:checked:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid white;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.task-copy{min-width:0}
.task-name{font-size:13px;font-weight:600;color:var(--ink-2);line-height:1.4;overflow-wrap:anywhere}
.task-item.completed .task-name{text-decoration:line-through;color:var(--muted)}
.task-meta{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap}
.task-description{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.task-tag{font-size:11px;color:var(--muted);background:var(--fill);padding:3px 6px;border-radius:4px}
.task-due{font-size:11px;color:var(--muted)}
.task-due.overdue{color:#df7772}
.task-side{display:flex;align-items:center;gap:7px}
.priority-pill{font-size:11px;border-radius:10px;padding:4px 7px;white-space:nowrap}
.priority-pill{font-weight:700}
.priority-pill.p1{color:#d64545;background:var(--tint-red)}.priority-pill.p2{color:#d9772b;background:var(--tint-amber)}.priority-pill.p3{color:var(--accent-ink);background:var(--accent-soft)}.priority-pill.p4{color:#3f9c78;background:var(--tint-green)}.priority-pill.p5{color:var(--muted);background:var(--fill)}
/* Ô chọn ưu tiên ngay trên dòng việc, trông như nhãn P1…P5 */
.priority-select{appearance:none;-webkit-appearance:none;border:0;font-family:inherit;cursor:pointer;text-align:center;outline:none}
.priority-select:hover,.priority-select:focus-visible{box-shadow:0 0 0 1.5px currentColor}
.priority-select option{color:var(--ink);background:var(--surface);font-weight:500}
.task-actions{opacity:0;display:flex;gap:1px;transition:opacity .15s}
.task-item:hover .task-actions,.task-actions:focus-within{opacity:1}
.task-action{border:0;background:transparent;color:var(--muted);font-size:13px;border-radius:4px;width:22px;height:22px}
.task-action:hover{background:var(--fill);color:var(--ink-2)}
.empty-state{text-align:center;padding:29px 10px 21px}
.empty-illustration{font-size:26px;color:var(--accent-line);margin-bottom:7px}
.empty-state strong{display:block;font:600 13px var(--font-head);color:var(--ink-3)}
.empty-state p{font-size:11.5px;color:var(--muted);margin:5px 0}
.add-inline{border:0;background:transparent;color:var(--muted);font-size:12px;padding:9px 3px 3px}
.add-inline span{font-size:15px;vertical-align:-1px;margin-right:5px}
.add-inline:hover{color:var(--accent-ink)}
.right-column{display:grid;align-content:start;gap:13px}
.week-card,.project-summary{padding:15px}
.widget-heading{display:flex;justify-content:space-between;align-items:flex-start}
.widget-heading h3{font:700 14px var(--font-head);margin:0;color:var(--ink)}
.widget-heading p{font-size:11px;color:var(--muted);margin:4px 0 0}
.week-icon{color:var(--accent-ink);font-size:16px}
.week-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:17px 0 12px}
.day-cell{text-align:center;color:var(--muted);font-size:11px}
.day-cell span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;margin:6px auto 0;color:var(--ink-2);font-size:11.5px}
.day-cell.today span{background:var(--accent);color:var(--on-accent);box-shadow:0 3px 7px color-mix(in srgb,var(--accent) 25%,transparent)}
.day-cell.has-task:not(.today) span:after{content:"";position:absolute;width:3px;height:3px;margin-top:24px;border-radius:50%;background:#e9ae57}
.day-cell span{position:relative}
.week-summary{display:flex;gap:14px;border-top:1px solid var(--line);padding-top:10px;color:var(--muted);font-size:11px}
.week-summary span{display:flex;align-items:center;gap:5px}
.legend-dot{width:5px;height:5px;border-radius:50%}.due-legend{background:#e8ad55}.today-legend{background:var(--accent)}
.quote-card{background:var(--accent-soft);border-radius:10px;padding:15px 16px 14px;position:relative;overflow:hidden;min-height:119px}
.quote-mark{font:700 36px Georgia,serif;color:var(--accent-line);line-height:.7}
.quote-card p{font:600 13px var(--font-head);line-height:1.6;color:var(--accent-ink);max-width:205px;margin:7px 0 10px;position:relative;z-index:1}
.quote-author{font-size:10.5px;letter-spacing:.9px;color:var(--muted)}
.quote-decoration{position:absolute;font-size:78px;color:var(--accent-line);right:-11px;bottom:-29px}
.project-summary{padding-bottom:10px}
.text-button{border:0;background:transparent;color:var(--accent-ink);font-size:11px;padding:2px 0}
.project-progress-item{margin-top:13px}
.project-progress-top{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--ink-3);margin-bottom:6px}
.project-progress-top span:last-child{font-size:11px;color:var(--muted)}
.project-progress-track{height:4px;background:var(--fill);border-radius:5px;overflow:hidden}
.project-progress-track span{height:100%;display:block;border-radius:5px}
.footer-note{text-align:center;font-size:11.5px;color:var(--muted);padding:22px 0 0}
.footer-note span{color:#e7ad55;margin-right:5px}
.search-panel{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:0 12px;height:42px;margin:-8px 0 19px;box-shadow:0 4px 10px #29365408}
.search-symbol{font-size:22px;color:var(--muted)}
.search-panel input{border:0;background:transparent;outline:none;flex:1;font-size:13px;color:var(--ink-2)}
.search-panel kbd{float:none;color:var(--muted);border-color:var(--line)}
.modal-backdrop{position:fixed;inset:0;background:#20283a65;display:grid;place-items:center;padding:20px;z-index:20;backdrop-filter:blur(3px)}
.modal-backdrop[hidden]{display:none}
.task-modal{width:min(100%,480px);background:var(--surface);border-radius:13px;padding:24px;box-shadow:0 20px 70px #1c254129;animation:fadeIn .16s ease}
.modal-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
.modal-heading .eyebrow{margin-bottom:6px;font-size:11px}
.modal-heading h2{font:700 19px var(--font-head);letter-spacing:-.5px;margin:0}
.close-modal{font-size:23px;margin-top:-5px}
.field-label{display:block;font-size:12px;color:var(--ink-2);font-weight:600;margin:0 0 7px}
.field-label span{color:#df7772}.field-label small{font-size:11px;color:var(--muted);font-weight:400;margin-left:5px}
.text-input{width:100%;border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:10px 11px;font-size:12px;color:var(--ink-2);margin-bottom:15px;outline:none}
.text-input:focus{border-color:var(--accent-line)}
.title-input{font-size:13.5px}
.description-input{resize:vertical;min-height:67px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-actions{display:flex;justify-content:flex-end;align-items:center;gap:9px;margin-top:7px}
.secondary-button{padding:10px 13px;border:1px solid var(--line);background:var(--surface);color:var(--ink-3)}
.secondary-button:hover{background:var(--bg-2)}
.settings-modal{width:min(100%,540px);max-height:calc(100vh - 40px);overflow-y:auto}
.settings-intro{font-size:12px;line-height:1.65;color:var(--muted);margin:0 0 17px}
.data-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.data-actions .secondary-button{font-size:11.5px}
.import-label{cursor:pointer}
.settings-note{display:flex;gap:10px;background:var(--fill);padding:12px;border-radius:8px;margin-top:16px;color:var(--muted);font-size:11.5px;line-height:1.7}
.settings-note strong{color:var(--ink-2)}
.settings-modal .modal-actions{margin-top:18px}
.danger-button{padding:9px 11px;color:#d77572;border:1px solid color-mix(in srgb,#d77572 30%,var(--surface));background:var(--surface);font-size:11.5px}
.danger-button:hover{background:var(--tint-red)}
.settings-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--fill);border-radius:11px;padding:4px;margin:-6px 0 16px}
.settings-tab{border:0;background:transparent;border-radius:8px;padding:9px;font-size:13px;font-weight:600;color:var(--muted)}
.settings-tab.active{background:var(--surface);color:var(--accent-ink);box-shadow:0 1px 4px #20283a14}
.setting-card{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--surface)}
.setting-card h3{font:700 13.5px var(--font-head);color:var(--ink);margin:0 0 12px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.setting-row h3{margin:0}
.setting-card-head{display:flex;justify-content:space-between;align-items:baseline}
.accent-code{font:600 11.5px ui-monospace,Consolas,monospace;color:var(--muted);text-transform:uppercase}
.segmented{display:flex;background:var(--fill);border-radius:10px;padding:3px;gap:2px}
.segmented button{border:0;background:transparent;border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.segmented button[aria-checked="true"]{background:var(--surface);color:var(--accent-ink);box-shadow:0 1px 4px #20283a1a}
.font-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.font-option{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:12px 6px 10px;display:grid;gap:3px;justify-items:center;color:var(--ink);transition:.15s}
.font-option strong{font-size:24px;line-height:1.1}
.font-option span{font-size:12px;color:var(--ink-3)}
.font-option:hover{border-color:var(--accent-line)}
.font-option[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.font-option[aria-checked="true"] span{color:var(--accent-ink)}
.accent-options{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.accent-swatch{aspect-ratio:1;border:0;border-radius:11px;position:relative;transition:transform .15s}
.accent-swatch:hover{transform:translateY(-2px)}
.accent-swatch[aria-checked="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.accent-swatch[aria-checked="true"]:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:20px;font-weight:700;text-shadow:0 1px 3px #0006}
.custom-color{display:flex;gap:10px;align-items:center;margin-top:12px}
.custom-color input[type=color]{width:38px;height:38px;border:1px solid var(--line);border-radius:9px;padding:3px;background:var(--surface);cursor:pointer;flex:none}
.custom-color .text-input{margin:0;font:600 12.5px ui-monospace,Consolas,monospace;text-transform:uppercase}
.custom-color .text-input[aria-invalid="true"]{border-color:#df7772}
.danger-wide{width:100%;margin-top:14px;padding:11px;font-size:12px}
@media(max-width:600px){.font-options{grid-template-columns:repeat(2,minmax(0,1fr))}.accent-options{grid-template-columns:repeat(4,1fr)}}
.toast-region{position:fixed;right:22px;bottom:20px;z-index:30;display:grid;gap:8px}
.toast{background:#293247;color:#fff;padding:11px 15px;border-radius:8px;font-size:12px;box-shadow:0 6px 20px #20283a25;animation:fadeIn .2s ease}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1450px){.content{padding-top:45px}.summary-card{min-height:120px}.task-panel{min-height:380px}}
@media(max-width:1050px){.content{padding-left:28px;padding-right:28px}.topbar{padding:0 28px}.work-layout{grid-template-columns:minmax(0,1.6fr) minmax(210px,.85fr)}.summary-grid{gap:9px}.summary-card{padding:13px}}
@media(max-width:800px){.sidebar.open + .sidebar-scrim{display:block;position:fixed;inset:0;background:#20283a40;z-index:4;animation:fadeIn .18s ease}.sidebar{transform:translateX(-100%);transition:transform .22s;box-shadow:none}.sidebar.open{transform:translateX(0);box-shadow:10px 0 40px #20283a18}.main-area{margin-left:0}.mobile-menu{display:grid;margin-left:-8px}.breadcrumbs{gap:8px}.topbar{height:58px;padding:0 20px}.content{padding:28px 20px 22px}.today-date{display:none}.work-layout{grid-template-columns:minmax(0,1fr) 250px;gap:12px}.summary-grid{grid-template-columns:1fr 1fr}.summary-main{grid-column:span 2}.summary-card{min-height:99px}}
@media(max-width:600px){.content{padding:24px 15px}.topbar{padding:0 14px}.top-actions{gap:7px}.breadcrumbs{font-size:12px}.install-button{padding:7px 9px}.install-label{display:none}.install-button span{font-size:15px;margin:0}.welcome-row{align-items:flex-start;gap:12px}.welcome-row h1{font-size:21px}.page-subtitle{max-width:235px;line-height:1.5}.welcome-row .primary-button{font-size:0;padding:0;width:36px;flex:none}.welcome-row .primary-button span{font-size:20px}.summary-grid{gap:8px;margin-bottom:15px}.summary-card{padding:12px;min-height:96px}.summary-trend{display:none}.summary-number{font-size:19px}.summary-number span{font-size:11.5px}.work-layout{grid-template-columns:1fr}.right-column{grid-template-columns:1fr;gap:9px}.week-card{grid-column:span 2}.project-summary{grid-column:span 2}.quote-card{min-height:110px}.quote-card p{max-width:260px}.task-panel{padding:15px 13px 12px}.section-heading h2{font-size:14px}.task-item{gap:8px}.task-side{gap:3px}.priority-pill{font-size:10.5px;padding:4px 5px}.task-actions{opacity:1}.task-description{max-width:145px}.footer-note{padding-top:16px}.modal-backdrop{align-items:end;padding:0}.task-modal{border-radius:15px 15px 0 0;padding:22px 19px calc(22px + env(safe-area-inset-bottom));max-height:92vh;overflow-y:auto}.top-avatar{width:27px;height:27px}}
@media(max-width:380px){.summary-caption{font-size:10.5px}.summary-icon{width:21px;height:21px}.filter-bar{gap:4px}.filter-chip{padding:5px 6px}.task-item{grid-template-columns:18px minmax(0,1fr) auto}.priority-pill{display:none}}
.bottom-bar{display:none}
@media(max-width:800px){
  .bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -4px 18px #20283a0f}
  .bottom-item{border:0;background:transparent;display:grid;justify-items:center;gap:3px;padding:4px 2px;min-height:48px;color:var(--muted);font-size:11px;font-weight:600;-webkit-tap-highlight-color:transparent}
  .bottom-item.active{color:var(--accent-ink)}
  .bottom-icon{position:relative;width:46px;height:28px;border-radius:14px;display:grid;place-items:center;font-size:18px;line-height:1;transition:background .18s}
  .bottom-item.active .bottom-icon{background:var(--accent-soft)}
  .bottom-item:active .bottom-icon{transform:scale(.92)}
  .bottom-badge{position:absolute;top:-4px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--accent);color:var(--on-accent);font:700 10px/17px var(--font-body);font-style:normal;box-shadow:0 0 0 2px var(--surface)}
  .bottom-add{justify-self:center;align-self:center;width:54px;height:54px;margin-top:-26px;border:4px solid var(--bg);border-radius:19px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);font-size:26px;line-height:1;box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 35%,transparent);-webkit-tap-highlight-color:transparent;transition:transform .15s}
  .bottom-add:active{transform:scale(.94)}
  .main-area{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .toast-region{left:16px;right:16px;bottom:calc(88px + env(safe-area-inset-bottom));justify-items:center}
  .welcome-row .primary-button{display:none}
}

/* Ô ngày dạng ngày/tháng/năm + nút mở lịch gốc của trình duyệt */
.date-field{position:relative;margin-bottom:15px}
.date-field .text-input{margin:0;padding-right:40px}
.date-picker-button{position:absolute;top:50%;right:5px;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:14px;cursor:pointer}
.date-picker-button:hover{background:var(--fill);color:var(--accent-ink)}
.date-picker-native{position:absolute;right:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.date-field .text-input:invalid{border-color:#e26d6d}
.install-label{font-weight:inherit}

/* ===== Sinh động hơn: game hóa, việc con, kéo thả, vuốt ===== */
.settings-tabs{grid-template-columns:repeat(3,1fr)}
.setting-sub{font-size:11.5px;color:var(--muted);margin:4px 0 0;line-height:1.5}
.setting-sub:empty{display:none}
.status-pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:10px;background:var(--fill);color:var(--muted)}
.status-pill[data-state="granted"]{background:var(--tint-green);color:#2f9d74}
.status-pill[data-state="denied"]{background:var(--tint-red);color:#d77572}
.switch{position:relative;width:44px;height:26px;border:0;border-radius:13px;background:var(--line-strong);flex:none;transition:background .2s}
.switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s}
.switch[aria-checked="true"]{background:var(--accent)}
.switch[aria-checked="true"]:after{transform:translateX(18px)}
.secondary-button:disabled{opacity:.5;cursor:not-allowed}

/* Thẻ cấp độ ở sidebar */
.level-card{width:calc(100% - 2px);display:grid;gap:9px;text-align:left;color:var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s}
.level-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 14%,transparent)}
.level-card-top{display:flex;align-items:center;gap:10px}
.level-ring,.stats-level-ring{--p:0;display:grid;place-items:center;border-radius:50%;background:radial-gradient(closest-side,var(--surface) 76%,transparent 78%),conic-gradient(var(--accent) calc(var(--p)*1%),var(--line) 0)}
.level-ring{width:38px;height:38px;font:800 15px var(--font-head);color:var(--accent-ink);flex:none}
.level-copy{display:grid;gap:2px;min-width:0}
.level-copy strong{font:700 13px var(--font-head)}
.level-copy small{font-size:11px;color:var(--muted)}
.side-streak{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);filter:grayscale(1);opacity:.7}
.side-streak.lit{filter:none;opacity:1;color:#e0803a}
#xpProgress{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.goal-row{display:flex;align-items:center;gap:8px}
.goal-row small{font-size:11px;color:var(--muted)}
.goal-dots{display:flex;gap:4px}
.goal-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);transition:background .3s,transform .3s}
.goal-dots i.on{background:#f0a43a;transform:scale(1.1)}

/* Chip chuỗi ngày + cấp trên thanh tiêu đề */
.level-chip{display:flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:4px 10px 4px 7px;font-size:12px;color:var(--ink-2);transition:transform .15s}
.level-chip:hover{border-color:var(--accent-line)}
.level-chip .flame{filter:grayscale(1);opacity:.6;font-size:13px}
.level-chip.lit .flame{filter:none;opacity:1;animation:flicker 1.6s ease-in-out infinite}
.level-chip b{font-weight:800}
.chip-level{font-size:11px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border-radius:10px;padding:2px 7px}
.level-chip.bump{animation:bump .6s ease}
@keyframes flicker{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(-4deg)}}
@keyframes bump{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}}

/* Dòng việc: hàng chứa nền vuốt + tay nắm kéo thả */
.task-row{position:relative;border-top:1px solid var(--line);overflow:hidden}
.task-row .task-item{border-top:0;background:var(--surface);position:relative;z-index:1;touch-action:pan-y}
.task-item{grid-template-columns:14px 20px minmax(0,1fr) auto}
.task-item:before{content:"";position:absolute;left:-19px;top:12px;bottom:12px;width:3px;border-radius:2px;background:transparent}
.task-item.priority-1:not(.completed):before{background:#e25555}
.task-item.priority-2:not(.completed):before{background:#ef8f3f}
.task-item.is-pending:not(.completed):before{background:#a99be8}
.task-item.is-pending .task-name{color:var(--ink-3)}
.task-item:has(.subtask-panel){align-items:start}
.task-item:has(.subtask-panel) .task-check{margin-top:2px}
/* Tên việc + tag dự án nằm cùng hàng, tag ngay bên phải tên */
.task-title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;min-width:0}
.task-title-row .task-name{flex:0 1 auto;min-width:0}
.task-title-row .task-tag{flex:none;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 6px;transform:translateY(-1px)}
/* Tiêu đề nhóm P1…P5 / Pending */
.task-group-head{display:flex;align-items:center;gap:8px;padding:14px 2px 7px;font-size:11.5px;font-weight:700;color:var(--ink-3)}
.task-group-head small{font-weight:600;color:var(--muted);background:var(--fill);border-radius:9px;padding:1px 7px}
.task-group-head .priority-pill{padding:2px 7px}
.task-chip.pending{color:#6f5fd0;background:color-mix(in srgb,#8b7cf0 15%,var(--surface));font-weight:600}
.task-row{overflow:visible}
.task-panel{overflow:hidden}
.swipe-bg{position:absolute;inset:0;display:none;align-items:center;justify-content:space-between;padding:0 18px;font-size:12.5px;font-weight:700;color:#fff}
.task-row.swiping{overflow:hidden}
.task-row.swiping .swipe-bg{display:flex}
.task-row.swipe-right .swipe-bg{background:#3cb98a}
.task-row.swipe-left .swipe-bg{background:#e46d6d}
.task-row.swipe-right .swipe-delete,.task-row.swipe-left .swipe-done{visibility:hidden}
.task-row.swipe-ready .swipe-bg span{transform:scale(1.1)}
.swipe-bg span{transition:transform .15s}
.drag-handle{border:0;background:transparent;color:var(--line-strong);font-size:12px;letter-spacing:-3px;padding:0;width:14px;height:28px;cursor:grab;touch-action:none;opacity:0;transition:opacity .15s}
.task-item:hover .drag-handle,.drag-handle:focus-visible{opacity:1}
.drag-handle:hover{color:var(--ink-3)}
.task-row.dragging{z-index:5;border-color:transparent;transition:none}
.task-row.dragging .task-item{box-shadow:0 12px 28px #20283a26;border-radius:10px;cursor:grabbing}
.task-list.is-sorting{user-select:none}

/* Ô tick: nảy nhẹ + dòng việc trượt đi khi xong */
.task-check:checked{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.task-item.completing{animation:completeOut .45s ease forwards}
@keyframes completeOut{0%{opacity:1;transform:none}50%{opacity:1}100%{opacity:0;transform:translateX(24px)}}
.task-item.completing .task-name{text-decoration:line-through;color:var(--muted)}

/* Chip lặp lại, giờ nhắc, việc con */
.task-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-3);background:var(--fill);border:0;border-radius:4px;padding:3px 6px;line-height:1.2}
.task-chip.remind{color:#c48a2a;background:var(--tint-amber)}
.task-tag{display:inline-flex;align-items:center;gap:5px}
.task-tag .project-dot{width:6px;height:6px}
.subtask-toggle{cursor:pointer;font-weight:600}
.subtask-toggle:hover{color:var(--accent-ink);background:var(--accent-soft)}
.subtask-toggle.done{color:#2f9d74;background:var(--tint-green)}
.sub-ring{--p:0;width:11px;height:11px;border-radius:50%;background:radial-gradient(closest-side,var(--fill) 55%,transparent 58%),conic-gradient(currentColor calc(var(--p)*1%),var(--line-strong) 0)}
.subtask-toggle.late{color:#d64545;background:var(--tint-red)}
.sub-next{font-size:11px;color:var(--ink-3);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Khung việc con khi mở: thanh tiến độ, người làm, hạn, thêm nhanh */
.subtask-panel{margin-top:9px;padding:8px 10px 4px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);animation:fadeIn .18s ease}
.subtask-bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin:2px 0 4px}
.subtask-bar i{display:block;height:100%;border-radius:inherit;background:#5bbd98;transition:width .3s}
.subtask-list{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.subtask-list li{display:flex;align-items:center;gap:6px;min-height:28px}
.subtask-list label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:12px;color:var(--ink-2);padding:4px 0;cursor:pointer}
.sub-title{overflow-wrap:anywhere}
.subtask-list li.done .sub-title{text-decoration:line-through;color:var(--muted)}
.sub-chip{flex:none;border:0;border-radius:4px;background:var(--fill);color:var(--ink-3);font-size:10.5px;padding:3px 6px;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.sub-chip:hover{color:var(--accent-ink);background:var(--accent-soft)}
.sub-chip.late{color:#d64545;background:var(--tint-red)}
.sub-chip.ghost{background:transparent;color:var(--muted);opacity:0;transition:opacity .15s}
.sub-remove{flex:none;border:0;background:transparent;color:var(--muted);width:20px;height:20px;border-radius:4px;opacity:0;transition:opacity .15s}
.sub-remove:hover{background:var(--tint-red);color:#d64545}
.subtask-list li:hover .sub-chip.ghost,.subtask-list li:hover .sub-remove,.sub-chip.ghost:focus-visible,.sub-remove:focus-visible{opacity:1}
.subtask-list li.done .sub-chip{opacity:.55}
@media(hover:none){.sub-chip.ghost,.sub-remove{opacity:.6}}
.subtask-quick input{width:100%;border:0;border-top:1px dashed var(--line);background:transparent;padding:8px 2px 5px;margin-top:3px;font:inherit;font-size:12px;color:var(--ink-2);outline:none}
.subtask-list:empty+.subtask-quick input,.subtask-quick:first-child input{border-top:0;margin-top:0}
.subtask-quick input::placeholder{color:var(--muted)}
/* Ô nhập tại chỗ (giao người, đặt hạn, chuyển Pending) */
.inline-edit{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#6f5fd0;background:var(--surface);border:1px solid var(--accent-line);border-radius:5px;padding:1px 3px 1px 6px;box-shadow:0 0 0 3px var(--accent-soft);animation:fadeIn .12s ease}
.inline-edit input{border:0;outline:0;background:transparent;font:inherit;font-weight:500;font-size:11.5px;color:var(--ink-2);width:150px;padding:3px 0}
.subtask-list .inline-edit input{width:110px}
.inline-edit:has(input[aria-invalid]){border-color:#e26d6d;box-shadow:0 0 0 3px var(--tint-red)}
.subtask-check{appearance:none;width:14px;height:14px;border:1.5px solid var(--line-strong);border-radius:4px;margin:0;position:relative;flex:none;cursor:pointer;transition:.15s}
.subtask-check:checked{background:#5bbd98;border-color:#5bbd98;animation:pop .3s ease}
.subtask-check:checked:after{content:"";position:absolute;left:3.5px;top:.5px;width:3px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}

/* Soạn việc con trong form */
.subtask-editor{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.subtask-editor:not(:empty){margin-bottom:8px}
.subtask-edit-row{display:flex;align-items:center;gap:8px}
.subtask-edit-row .text-input{margin:0;padding:8px 10px}
.subtask-edit-row .sub-edit-title{flex:1 1 auto;min-width:0}
.subtask-edit-row .sub-edit-assignee{flex:0 0 118px}
.subtask-edit-row .sub-edit-due{flex:0 0 92px}
@media(max-width:600px){.subtask-edit-row{flex-wrap:wrap}.subtask-edit-row .sub-edit-title{flex-basis:calc(100% - 68px)}.subtask-edit-row .remove-subtask{order:1}.subtask-edit-row .sub-edit-assignee,.subtask-edit-row .sub-edit-due{order:2;flex:1 1 0;min-width:0}.subtask-edit-row .sub-edit-assignee{margin-left:22px}}
.sub-bullet{width:14px;height:14px;border:1.5px solid var(--line-strong);border-radius:4px;flex:none;font-size:9px;display:grid;place-items:center;color:#fff}
.sub-bullet.done{background:#5bbd98;border-color:#5bbd98}
.subtask-new{display:flex;gap:8px;margin-bottom:15px}
.subtask-new .text-input{margin:0}
.subtask-new .secondary-button{flex:none;white-space:nowrap}
.field-icon{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:13px;pointer-events:none;opacity:.7}

/* Toast có nút + kiểu ăn mừng */
.toast{display:flex;align-items:center;gap:12px}
.toast.leaving{opacity:0;transform:translateY(6px);transition:.2s}
.toast.celebrate{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);font-weight:600;animation:toastPop .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes toastPop{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:none}}
.toast-action{border:0;background:#ffffff26;color:inherit;font-weight:700;font-size:12px;padding:5px 10px;border-radius:6px;margin-left:auto}
.toast-action:hover{background:#ffffff40}
.xp-float{position:fixed;z-index:35;transform:translate(-50%,0);font:800 13px var(--font-head);color:var(--accent-ink);pointer-events:none;animation:floatUp 1s ease-out forwards;text-shadow:0 1px 0 var(--surface)}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,0) scale(.7)}20%{opacity:1;transform:translate(-50%,-10px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-46px) scale(1)}}
.confetti-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:40}

/* Trạng thái trống */
.empty-illustration{width:76px;height:84px;display:block;margin:0 auto 8px;animation:floaty 3.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ===== Trang Thành tích ===== */
.stats-view{display:grid;gap:14px;animation:fadeIn .25s ease}
.stats-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;padding:20px 22px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),color-mix(in srgb,var(--accent-2) 10%,var(--surface)));border:1px solid var(--accent-line)}
.stats-level-ring{width:96px;height:96px;background:radial-gradient(closest-side,var(--surface) 80%,transparent 82%),conic-gradient(var(--accent) calc(var(--p)*1%),color-mix(in srgb,var(--accent) 15%,var(--surface)) 0);align-content:center;gap:0}
.stats-level-ring span{font:800 32px/1 var(--font-head);color:var(--accent-ink)}
.stats-level-ring small{font-size:10px;letter-spacing:1.5px;font-weight:700;color:var(--muted)}
.stats-hero-copy h2{font:800 22px var(--font-head);letter-spacing:-.6px;margin:0 0 12px;color:var(--ink)}
.stats-hero-copy .eyebrow{margin-bottom:6px}
.stats-hero-copy small{font-size:12px;color:var(--ink-3)}
.xp-track{height:10px;border-radius:6px;background:color-mix(in srgb,var(--accent) 15%,var(--surface));overflow:hidden;margin-bottom:7px}
.xp-track i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0;transition:width .8s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}
.xp-track i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff55,transparent);animation:shine 2.4s ease-in-out infinite}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.stats-tiles{display:grid;grid-template-columns:repeat(2,minmax(96px,1fr));gap:8px}
.stat-tile{background:var(--surface);border-radius:11px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;border:1px solid var(--line)}
.stat-tile span{grid-row:span 2;font-size:20px}
.stat-tile strong{font:800 18px/1.1 var(--font-head);color:var(--ink)}
.stat-tile small{font-size:10.5px;color:var(--muted)}
.flame-tile span{animation:flicker 1.6s ease-in-out infinite}
.stats-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.stats-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.goal-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.goal-legend i{width:14px;border-top:2px dashed #f0a43a}
.week-chart{--goal:50%;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:190px;margin-top:16px}
.bar-col{display:grid;grid-template-rows:18px 1fr 20px;height:100%;text-align:center}
.bar-value{font:700 11.5px var(--font-head);color:var(--ink-3)}
.bar-track{position:relative;display:flex;align-items:flex-end;justify-content:center}
.bar-track:before{content:"";position:absolute;left:-4px;right:-4px;bottom:var(--goal);border-top:2px dashed color-mix(in srgb,#f0a43a 60%,transparent)}
.bar-track i{width:min(30px,80%);height:var(--h);min-height:4px;border-radius:7px 7px 4px 4px;background:color-mix(in srgb,var(--accent) 35%,var(--surface));transform-origin:bottom;animation:grow .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.bar-track i.goal{background:linear-gradient(180deg,var(--accent-2),var(--accent))}
.bar-col.today .bar-label{color:var(--accent-ink);font-weight:800}
.bar-label{font-size:11px;color:var(--muted);padding-top:5px}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.calendar-nav{display:flex;gap:2px}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calendar-weekdays{margin:14px 0 6px;font-size:10.5px;font-weight:700;color:var(--muted);text-align:center}
.cal-cell{position:relative;aspect-ratio:1;border:0;border-radius:8px;background:var(--fill);color:var(--ink-3);font-size:12px;font-weight:600;display:grid;place-items:center;transition:transform .12s}
.cal-cell.empty{background:transparent}
.cal-cell:not(.empty):hover{transform:scale(1.08)}
.cal-cell.heat-1{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.cal-cell.heat-2{background:color-mix(in srgb,var(--accent) 42%,var(--surface));color:var(--ink)}
.cal-cell.heat-3{background:color-mix(in srgb,var(--accent) 66%,var(--surface));color:var(--on-accent)}
.cal-cell.heat-4{background:var(--accent);color:var(--on-accent)}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--accent)}
.cal-cell.selected{outline:2px solid var(--ink-2);outline-offset:1px}
.cal-due{position:absolute;top:3px;right:3px;min-width:6px;height:6px;border-radius:4px;background:#f0a43a;font:700 8px/11px var(--font-body);font-style:normal;color:#fff}
.cal-due:not(:empty){height:11px;min-width:11px;padding:0 2px;top:2px;right:2px}
.calendar-day{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.calendar-day-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-2)}
.calendar-day ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.calendar-day li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);padding:5px 2px}
.calendar-day li span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-day li.done span:nth-child(2){text-decoration:line-through;color:var(--muted)}
.cal-status{color:var(--muted);width:14px;text-align:center}
.calendar-day li.done .cal-status{color:#3cb98a;font-weight:800}
.cal-empty{color:var(--muted)!important}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.badge-card{border:1px solid var(--line);border-radius:12px;padding:14px 10px 12px;text-align:center;display:grid;justify-items:center;align-content:start;gap:3px;background:var(--bg-2);transition:transform .15s}
.badge-card:hover{transform:translateY(-2px)}
.badge-icon{font-size:30px;line-height:1.2;filter:grayscale(1);opacity:.35}
.badge-card strong{font:700 12.5px var(--font-head);color:var(--ink-3)}
.badge-card small{font-size:10.5px;color:var(--muted);line-height:1.4}
.badge-card.unlocked{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface));border-color:var(--accent-line)}
.badge-card.unlocked .badge-icon{filter:none;opacity:1;animation:badgeIn .5s cubic-bezier(.2,1.4,.4,1)}
.badge-card.unlocked strong{color:var(--ink)}
@keyframes badgeIn{from{transform:scale(.4) rotate(-20deg)}to{transform:none}}
.badge-progress{width:80%;height:4px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:5px}
.badge-progress i{display:block;height:100%;background:var(--accent);border-radius:3px}
.badge-count{font-weight:700}

@media(max-width:1050px){.stats-hero{grid-template-columns:auto minmax(0,1fr)}.stats-tiles{grid-column:span 2;grid-template-columns:repeat(4,1fr)}}
@media(max-width:800px){.stats-grid{grid-template-columns:1fr}.drag-handle{opacity:.6}}
@media(max-width:600px){
  .top-avatar{display:none}
  .level-chip{padding:3px 8px 3px 6px}
  .stats-hero{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px}
  .stats-level-ring{width:76px;height:76px}
  .stats-level-ring span{font-size:26px}
  .stats-hero-copy h2{font-size:18px;margin-bottom:9px}
  .stats-tiles{grid-template-columns:repeat(2,1fr)}
  .week-chart{height:160px;gap:5px}
  .badge-grid{grid-template-columns:repeat(2,1fr)}
  .task-item:before{left:-13px}
  .settings-tab{padding:9px 4px;font-size:12px}
}
@media(max-width:380px){.task-item{grid-template-columns:12px 18px minmax(0,1fr) auto}.chip-level{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Gọn bố cục: lịch không phình to trên màn rộng, thanh tiêu đề điện thoại không xuống dòng */
.stats-grid{align-items:start}
.cal-cell{aspect-ratio:auto;height:clamp(34px,4.2vw,44px)}
.chip-level,.level-chip{white-space:nowrap}
@media(max-width:1050px){.topbar .page-subtitle{display:none}}
@media(max-width:800px){.top-add{display:none}.topbar h1{font-size:18px}.topbar .eyebrow{font-size:9.5px;margin-bottom:1px}}
@media(max-width:380px){.topbar .eyebrow{display:none}}

/* Máy tính: vừa khít một màn hình, trang không cuộn; danh sách việc (và cột phải) tự cuộn bên trong */
@media(min-width:801px) and (min-height:620px){
  .main-area{height:100vh;display:flex;flex-direction:column;overflow:hidden}
  .topbar{flex:none}
  .content{flex:1;min-height:0;width:100%;max-width:none;display:flex;flex-direction:column;padding-top:26px;padding-bottom:14px}
  .welcome-row,.search-panel,.summary-grid{flex:none}
  .welcome-row{margin-bottom:20px}
  .summary-grid{margin-bottom:18px}
  .work-layout{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) minmax(280px,360px)}
  .task-panel{min-height:0;display:flex;flex-direction:column}
  .section-heading,.filter-bar,.add-inline{flex:none}
  .task-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -8px;padding:0 8px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  .task-list .task-row:first-child{border-top-color:var(--line)}
  .add-inline{align-self:flex-start;padding-top:10px}
  .right-column{min-height:0;overflow-y:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  .stats-view{flex:1;min-height:0;overflow-y:auto;padding-right:4px;align-content:start;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  .footer-note{flex:none;padding-top:10px}
  .task-item:before{left:-7px}
}
@media(min-width:1450px) and (min-height:620px){.content{padding-top:30px}}
@media(min-width:801px){.sidebar{overflow-y:auto;scrollbar-width:none}.sidebar>*,.sidebar-bottom>*{flex:none}}
@media(min-width:801px) and (min-height:620px){.right-column{display:flex;flex-direction:column;gap:13px}.right-column>*{flex:none}}
@media(min-width:801px) and (max-height:820px){.sidebar{padding-top:20px}.new-task-button{margin:22px 1px 22px}.nav-group{margin-bottom:20px}.nav-item{height:36px}.profile{display:none}}

/* Laptop nhỏ / cửa sổ hẹp: nhường chỗ cho danh sách việc */
@media(min-width:801px) and (max-width:1100px){.work-layout{grid-template-columns:minmax(0,1fr) 220px}}
@media(min-width:801px) and (max-width:960px){.work-layout{grid-template-columns:minmax(0,1fr)}.right-column{display:none}}
/* Đã bỏ nút "Tạo công việc" ở thanh bên: chừa khoảng cách dưới logo */
.brand{margin-bottom:30px}
@media(min-width:801px) and (max-height:820px){.brand{margin-bottom:20px}}
/* Cửa sổ tạo/sửa việc: không cao quá màn hình, nội dung tự cuộn, nút Lưu luôn ghim ở đáy */
#taskModalBackdrop .task-modal{width:min(100%,560px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
#taskModalBackdrop .modal-heading{flex:none}
#taskForm{flex:1;min-height:0;overflow-y:auto;margin:0 -24px;padding:2px 24px 0;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
#taskForm .modal-actions{position:sticky;bottom:0;z-index:1;margin:4px -24px 0;padding:12px 24px 18px;background:var(--surface);border-top:1px solid var(--line)}
@media(max-width:600px){#taskModalBackdrop .task-modal{max-height:92dvh;padding-bottom:0}#taskForm .modal-actions{padding-bottom:calc(14px + env(safe-area-inset-bottom))}}
/* Hộp xác nhận trong app (thay confirm() của trình duyệt) */
.confirm-backdrop{z-index:30}
.confirm-modal{width:min(100%,400px)}
.confirm-modal h2{font:700 17px var(--font-head);margin:0 0 8px;color:var(--ink)}
.confirm-modal p{font-size:13px;line-height:1.55;color:var(--ink-3);margin:0 0 18px}
.confirm-modal .danger-button{padding:11px 15px;font-size:13px;background:#d9534f;border-color:#d9534f;color:#fff}
.confirm-modal .danger-button:hover{background:#c64541}
@media(max-width:600px){.confirm-backdrop{align-items:center;padding:16px}.confirm-modal{border-radius:13px}}
/* Ô đổi tên dự án trên tiêu đề, ô thêm dự án ở thanh bên */
.inline-edit.title-edit{font-size:15px;padding:3px 4px 3px 8px}
.inline-edit.title-edit input{width:260px;font:700 15px var(--font-head);color:var(--ink)}
.inline-edit.project-edit{display:flex;margin:4px 6px;padding:5px 6px 5px 10px}
.inline-edit.project-edit input{width:100%;font-size:13px}
/* Chọn nhanh ngày đến hạn */
.date-quick{display:flex;gap:4px;margin:-8px 0 14px}
.date-quick button{border:1px solid var(--line);background:var(--surface);color:var(--ink-3);font-size:11px;font-weight:600;border-radius:12px;padding:3px 9px;cursor:pointer}
.date-quick button:hover{border-color:var(--accent-line);color:var(--accent-ink);background:var(--accent-soft)}
/* Tài khoản & đồng bộ */
.settings-tabs{grid-template-columns:repeat(4,1fr)}
.top-avatar{position:relative;border:0;cursor:pointer;font-family:inherit}
.top-avatar:hover{box-shadow:0 0 0 2px var(--accent-line)}
.top-avatar:after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;border:2px solid var(--bg-2);background:var(--line-strong)}
.top-avatar[data-sync="ok"]:after{background:#3cb98a}
.top-avatar[data-sync="syncing"]:after,.top-avatar[data-sync="idle"]:after{background:var(--accent);animation:pulse 1s ease-in-out infinite}
.top-avatar[data-sync="error"]:after{background:#e25555}
.top-avatar[data-sync="offline"]:after{background:#e5ad55}
@keyframes pulse{50%{opacity:.35}}
.auth-form .text-input{margin-bottom:12px}
.auth-error{color:#d64545;font-size:12px;margin:0 0 10px;min-height:0}
.auth-error:empty{display:none}
.auth-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.auth-actions .primary-button:disabled{opacity:.6;cursor:wait}
#accountEmail{overflow-wrap:anywhere}
@media(max-width:600px){.top-avatar{display:grid}.settings-tab{font-size:11.5px;padding:9px 2px}}