.header-tools{display:flex;align-items:center;gap:8px}
.header-icon{position:relative;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--green);flex-shrink:0}
.header-icon:hover,.header-icon[aria-expanded=true]{background:#eaf1e3;border-color:#b4c7a5}
.header-icon.is-muted{color:#93998c}.header-icon svg{width:17px;height:17px}
.notification-count{position:absolute;top:-5px;right:-4px;min-width:17px;height:17px;padding:0 4px;background:#c06f46;color:white;border:2px solid var(--bg,#f8f7f1);border-radius:20px;font-size:9px;font-weight:700;display:grid;place-items:center}
.header-popover{position:fixed;right:28px;top:75px;width:365px;max-width:calc(100% - 28px);max-height:calc(100dvh - 95px);overflow-y:auto;padding:20px;background:#fffefb;border:1px solid #dce4d4;border-radius:17px;box-shadow:0 16px 55px #23433226;z-index:70;color:var(--ink,#24433c);text-align:left}
.popover-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.popover-heading h2{font-size:17px;letter-spacing:-.3px;margin:3px 0 0}.popover-heading p{font-size:11px;color:var(--muted);margin:6px 0 0}
.icon-close{width:28px;height:28px;border-radius:50%;background:#f0f3eb;color:#78866f;display:grid;place-items:center;flex-shrink:0}.icon-close svg{width:13px;height:13px}
.audio-option{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.5;padding:13px 0;border-bottom:1px solid var(--line)}
.audio-option input{margin-top:4px;width:16px;height:16px;accent-color:var(--green);flex-shrink:0}.audio-option small{display:block;color:var(--muted);font-size:11px;margin-top:5px;font-weight:400;line-height:1.6}
.volume-control{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:12px;padding:20px 0 8px}.volume-control input{grid-column:1/-1;width:100%;accent-color:var(--green);cursor:pointer}.volume-control output{color:var(--muted);font-size:11px}
.popover-actions{display:flex;gap:9px;align-items:center;justify-content:space-between;margin-top:17px}.popover-actions .secondary{padding:9px 12px;font-size:11px;min-height:37px}.popover-actions .text-button{font-size:10px}
.popover-note{font-size:10px;line-height:1.6;color:#84907b;margin:14px 0 0}
.reminder-cards{display:grid;gap:10px}.reminder-item{display:flex;gap:11px;background:#f3f6ed;border:1px solid #e3eadb;border-radius:11px;padding:13px}.reminder-item.incomplete{background:#fcf4ec;border-color:#eee0d0}
.reminder-symbol{width:29px;height:29px;border-radius:9px;background:#e6edd9;display:grid;place-items:center;flex-shrink:0;color:#688453}.reminder-symbol svg{width:16px;height:16px}.incomplete .reminder-symbol{background:#f1e4d2;color:#a9774a}
.reminder-item h3{font-size:12px;line-height:1.6;margin:0 0 4px}.reminder-item p{font-size:11px;line-height:1.6;color:var(--muted);margin:0 0 10px}
.reminder-link{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--green);font-size:11px;font-weight:650;padding:0}.reminder-link svg{width:13px;height:13px}
.next-review{display:flex;gap:10px;align-items:center;margin-top:16px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:10px;color:var(--muted)}.next-review>svg{width:17px;height:17px}.next-review strong{display:block;color:#48603f;font-size:12px;margin-top:5px}
.reminder-empty{text-align:center;padding:16px 8px;line-height:1.7}.reminder-empty>svg{width:30px;height:30px;color:#6d8a57;display:block;margin:0 auto 12px}.reminder-empty strong{font-size:13px}.reminder-empty p{color:var(--muted);font-size:11px}
#reminder-toast{position:fixed;top:96px;right:26px;width:345px;max-width:calc(100% - 28px);padding:17px 19px;background:#fffefb;border:1px solid #d9e3cc;border-left:4px solid #8daa64;border-radius:13px;box-shadow:0 12px 35px #2343321c;z-index:65;animation:reminder-enter .2s ease-out}
#reminder-toast[hidden]{display:none}.reminder-toast-heading{display:flex;align-items:center;gap:8px;color:#7a886c;margin-bottom:12px;font-size:10px}.reminder-toast-heading>svg{width:15px;height:15px}.reminder-toast-heading .icon-close{margin-left:auto;width:23px;height:23px}
#reminder-toast>strong{font-size:14px;line-height:1.6}#reminder-toast>p{font-size:11px;line-height:1.6;color:var(--muted);margin:6px 0 12px}.reminder-toast-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}.reminder-toast-actions .text-button{font-size:10px}
.speech-status{height:16px;text-align:center;color:#81936f;font-size:10px;line-height:16px}
.account-button>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes reminder-enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1180px){.topbar-right .streak-pill{display:none}.topbar-right{gap:10px}.topbar-title{font-size:12px}}
@media(max-width:800px){.header-popover{right:14px;top:63px;max-height:calc(100dvh - 80px)}#reminder-toast{right:14px;top:80px}.header-tools{gap:6px}.topbar-title{font-size:11px;white-space:nowrap}.header-icon{width:33px;height:33px}.topbar-right{gap:7px}.topbar-right .sync-tag{display:none}}
@media(max-width:440px){.topbar{padding:0 14px;gap:8px}.topbar-title{gap:7px}.topbar-right .account-button{max-width:78px;font-size:9px}.header-popover{padding:17px}.header-tools{gap:5px}.header-icon{width:31px;height:31px}.reminder-toast-actions .text-button{font-size:9px}}
@media(prefers-reduced-motion:reduce){#reminder-toast{animation:none}}