:root{
  --bg:#F7F5F8; --surface:#FFFFFF; --surface-2:#F3F0F5;
  --text:#2A2230; --text-sub:#776B7F; --border:#E7E1EB;
  --accent:#E63384; --accent-soft:#FDE8F1;
  --danger:#C2185B; --danger-soft:#FBE3EC;
  --warn:#9A6A00; --warn-soft:#FBF1D6;
  --shadow:0 1px 3px rgba(42,34,48,.06),0 4px 14px rgba(42,34,48,.05);
  --radius:14px;
  --cat-scream:#E63384; --cat-kurisaki:#C98A1B; --cat-agnesb:#2F3A4A;
  --cat-alexanderwang:#6B7280; --cat-mma:#7C3AED; --cat-private:#0E9F8E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17141A; --surface:#211C25; --surface-2:#2A2430;
    --text:#F1ECF4; --text-sub:#A99FB2; --border:#3A3240;
    --accent:#F0609E; --accent-soft:#3A2030;
    --danger:#F27AA6; --danger-soft:#3C1F2B;
    --warn:#E8C060; --warn-soft:#3A3020;
    --shadow:none;
    --cat-agnesb:#8FA3C0; --cat-alexanderwang:#A3A9B4;
  }
}
:root[data-theme="dark"]{
  --bg:#17141A; --surface:#211C25; --surface-2:#2A2430;
  --text:#F1ECF4; --text-sub:#A99FB2; --border:#3A3240;
  --accent:#F0609E; --accent-soft:#3A2030;
  --danger:#F27AA6; --danger-soft:#3C1F2B;
  --warn:#E8C060; --warn-soft:#3A3020;
  --shadow:none;
  --cat-agnesb:#8FA3C0; --cat-alexanderwang:#A3A9B4;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px; line-height:1.5;
}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
#app{max-width:1080px;margin:0 auto;padding:20px 16px 96px;}

/* Header */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.brand h1{margin:0;font-size:22px;font-weight:800;letter-spacing:.04em;}
.brand .date{font-size:12px;color:var(--text-sub);}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:12px;color:var(--text-sub);}
.stat b{color:var(--text);font-size:14px;margin-right:2px;}
.stat.alert b{color:var(--danger);}

.btn{border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:8px 14px;font-weight:700;font-size:13px;}
.btn:hover{border-color:var(--accent);color:var(--accent);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.primary:hover{opacity:.9;color:#fff;}
.btn.danger{color:var(--danger);}
.btn.small{padding:4px 10px;font-size:12px;border-radius:8px;}
.btn[disabled]{opacity:.5;cursor:default;}

/* Panels */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;margin-bottom:16px;}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.panel-head h2{margin:0;font-size:15px;font-weight:800;cursor:pointer;user-select:none;}
.badge{display:inline-block;min-width:22px;padding:0 8px;margin-left:6px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;text-align:center;}

/* Chips */
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;color:var(--text-sub);white-space:nowrap;}
.chip .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;}
.chip.active{background:var(--text);border-color:var(--text);color:var(--bg);}
.chip.cat.active{background:var(--c);border-color:var(--c);color:#fff;}
.chip.cat.active .dot{background:#fff !important;}
.filters{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}

/* Mail */
.mail-meta{font-size:11px;color:var(--text-sub);margin:8px 0 4px;}
.mail-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--border);}
.mail-age{flex:0 0 auto;font-size:11px;font-weight:800;padding:2px 8px;border-radius:6px;background:var(--surface-2);color:var(--text-sub);}
.mail-age.late{background:var(--danger-soft);color:var(--danger);}
.mail-main{flex:1;min-width:0;}
.mail-subject{display:block;font-weight:700;color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mail-subject:hover{color:var(--accent);}
.mail-from,.mail-snippet{font-size:12px;color:var(--text-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mail-to{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:5px;background:var(--accent-soft);color:var(--accent);margin-top:4px;}

/* Category sections */
.cat-section{margin-bottom:22px;}
.cat-head{display:flex;align-items:center;gap:10px;margin:0 0 8px;}
.cat-head .bar{width:5px;height:20px;border-radius:3px;background:var(--c);}
.cat-head h3{margin:0;font-size:16px;font-weight:800;}
.cat-head .count{font-size:12px;color:var(--text-sub);}
.cat-head .spacer{flex:1;}
.cat-memo{font-size:12px;color:var(--text-sub);background:var(--surface-2);border-radius:10px;padding:8px 10px;margin:0 0 8px;white-space:pre-wrap;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* Task card */
.task{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--c);border-radius:12px;padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:box-shadow .15s;}
.task:hover{box-shadow:var(--shadow);}
.task.done{opacity:.6;}
.task.done .t-title{text-decoration:line-through;}
.task-main{flex:1;min-width:0;}
.t-title{font-weight:700;font-size:14px;}
.t-meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12px;color:var(--text-sub);margin-top:3px;align-items:center;}
.t-due.overdue{color:var(--danger);font-weight:700;}
.t-due.soon{color:var(--warn);font-weight:700;}
.t-flag{font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;}
.t-flag.stale{background:var(--warn-soft);color:var(--warn);}
.prio{font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;}
.prio-high{background:var(--danger-soft);color:var(--danger);}
.prio-medium{background:var(--warn-soft);color:var(--warn);}
.prio-low{background:var(--surface-2);color:var(--text-sub);}
.status{flex:0 0 auto;font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 10px;border:none;color:#fff;appearance:none;-webkit-appearance:none;}
.task-side{flex:0 0 auto;display:flex;align-items:center;gap:6px;}
.del{border:none;background:none;font-size:15px;padding:4px 6px;border-radius:8px;opacity:.45;}
.del:hover{opacity:1;background:var(--danger-soft);}
.del-confirm{display:flex;gap:4px;}
.empty{font-size:13px;color:var(--text-sub);padding:8px 2px;}

.add-inline{width:100%;border:1px dashed var(--border);background:transparent;border-radius:12px;padding:8px;color:var(--text-sub);font-weight:700;font-size:12.5px;}
.add-inline:hover{border-color:var(--c);color:var(--c);}

/* Sheet (modal) */
.overlay{position:fixed;inset:0;background:rgba(20,14,24,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;z-index:50;}
.sheet{background:var(--surface);border-radius:18px;width:100%;max-width:640px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;}
.sheet-head h2{margin:0;font-size:17px;}
.sheet-head .sub{font-size:12px;color:var(--text-sub);}
.close{background:none;border:none;font-size:22px;line-height:1;color:var(--text-sub);padding:0 4px;}
.section{border-top:1px solid var(--border);padding-top:12px;margin-top:14px;}
.section-title{font-size:13px;font-weight:800;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.field label{display:block;font-size:11.5px;font-weight:700;color:var(--text-sub);margin-bottom:4px;}
.field input,.field select,.field textarea,textarea.input,input.input{width:100%;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;padding:8px 10px;font-size:14px;}
.field.full{grid-column:1/-1;}
textarea{resize:vertical;min-height:72px;}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.actions .spacer{flex:1;}

.progress{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.progress .bar-bg{flex:1;height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;}
.progress .bar-fill{height:100%;background:var(--accent);}
.progress .pct{font-size:12px;font-weight:700;color:var(--accent);min-width:36px;text-align:right;}
.sub-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--border);}
.sub-row:last-child{border-bottom:none;}
.sub-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);}
.sub-row .txt{flex:1;min-width:0;}
.sub-row .txt.done{text-decoration:line-through;color:var(--text-sub);}
.sub-row .who{font-size:11px;color:var(--text-sub);}
.row-add{display:flex;gap:6px;margin-top:8px;}
.row-add input{flex:1;min-width:0;}
.list-item{font-size:13px;padding:6px 0;border-bottom:1px dashed var(--border);}
.list-item:last-child{border-bottom:none;}
.list-item .who{font-weight:700;color:var(--text-sub);margin-right:6px;}
.history{max-height:160px;overflow-y:auto;font-size:12px;color:var(--text-sub);}
.link-row{display:flex;gap:8px;align-items:center;padding:4px 0;}
.link-row a{flex:1;min-width:0;color:var(--accent);word-break:break-all;font-size:12.5px;}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:13px;z-index:60;}

@media (max-width:640px){
  #app{padding:14px 12px 96px;}
  .brand h1{font-size:20px;}
  .top-actions .btn{padding:7px 10px;}
  .overlay{padding:0;align-items:flex-end;}
  .sheet{border-radius:18px 18px 0 0;max-height:92vh;overflow-y:auto;padding:16px;}
  .grid{grid-template-columns:1fr 1fr;}
  .task{align-items:flex-start;}
  .fab{display:flex;}
}
.fab{display:none;position:fixed;right:16px;bottom:20px;width:56px;height:56px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:28px;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:40;}