#todos-button { position:relative;display:inline-flex; }
.todo-badge { position:absolute;top:1px;right:1px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:20px;background:#dce9ce;color:#34432b;font-size:10px;font-weight:600;border:1px solid #51554a;font-variant-numeric:tabular-nums; }
.todo-badge[hidden] { display:none; }
.todo-announcement { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
#todos-dialog { position:fixed;inset:88px 42px auto auto;margin:0;width:420px;max-width:calc(100vw - 32px);max-height:calc(100svh - 112px);padding:24px 22px 16px;border-radius:26px;color:#f6f7f2;background:rgba(64,67,59,.94);overflow:hidden; }
#todos-dialog[open] { display:flex;flex-direction:column; }
#todos-dialog::backdrop { background:rgba(15,20,13,.14);backdrop-filter:none; }
.todo-heading { display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0; }
.todo-heading .eyebrow { color:#c6ccbd;font-size:9px;margin:0 0 9px; }
.todo-heading h2 { font-family:var(--font-display);font-size:26px;letter-spacing:-.035em;font-weight:500;margin:0; }
.todo-heading h2 span { font-family:var(--font-ui);font-size:12px;letter-spacing:0;background:#ffffff12;border:1px solid var(--line);border-radius:20px;padding:4px 8px;margin-left:8px;vertical-align:middle;color:#dce9ce; }
.todo-heading .icon-button { background:#ffffff0a; }
.todo-intro { font-size:12px;line-height:1.6;color:#d0d4c9;margin:14px 0 20px;flex-shrink:0; }
.todo-list { overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff35 transparent;padding:4px 5px 5px;margin:0 -5px; }
.todo-group + .todo-group { margin-top:22px; }
.todo-group h3 { display:flex;justify-content:space-between;align-items:center;margin:0 0 9px;padding:0 3px;font-size:11px;font-weight:500;color:#d1d9c8; }
.todo-group h3 span { color:#aeb6a4;font-variant-numeric:tabular-nums; }
.todo-item { display:flex;gap:12px;width:100%;padding:14px;text-align:left;background:#ffffff06;border:1px solid #ffffff12;border-radius:16px; }
.todo-item + .todo-item { margin-top:7px; }
.todo-item:hover { background:#ffffff10;border-color:#ffffff30; }
.todo-symbol { width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#d6e7be13;flex-shrink:0;color:#e4efdc; }
.todo-symbol i { width:18px;height:18px; }
.todo-copy { display:block;min-width:0; }
.todo-copy strong { display:block;font-size:13px;line-height:1.45;overflow-wrap:anywhere; }
.todo-detail { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-size:11px;line-height:1.6;color:#c2c8b9;margin-top:5px; }
.todo-action { display:flex;align-items:center;gap:8px;color:#deedcf;font-size:11px;margin-top:10px; }
.todo-action i { width:14px;height:14px; }
.todo-footer { border-top:1px solid var(--line);padding-top:15px;margin:16px 0 0;color:#bac2b1;font-size:10px;line-height:1.5;flex-shrink:0; }
.todo-empty { padding:26px 14px 32px;text-align:center; }
.todo-empty > i { width:34px;height:34px;opacity:.75;margin-bottom:17px; }
.todo-empty strong { display:block;font-size:16px; }
.todo-empty p { font-size:12px;line-height:1.7;color:#c6ccbd;margin:10px 0 0; }
@media(min-width:851px) and (max-width:1100px) { .header-actions #profile-name { display:none; }.header-actions { gap:9px; } }
@media(max-width:850px) { #todos-dialog { top:76px;right:20px;max-height:calc(100svh - 96px); } }
@media(max-width:600px) { #todos-dialog { top:20px;right:16px;width:calc(100% - 32px);max-width:none;max-height:calc(100svh - 40px);padding:21px 18px 16px; }.header-actions { gap:8px; } }
@media(max-height:650px) and (min-width:851px) { #todos-dialog { top:64px;max-height:calc(100svh - 84px); } }