/* Lucide SVG toolbar: offline icons and preserved button actions. */
.app-shell>.topbar .top-actions .toolbar-action{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;padding:0;border:1px solid var(--action-border);border-radius:14px;background:linear-gradient(150deg,#fff,var(--action-soft));color:var(--action-ink);box-shadow:0 3px 8px rgba(23,47,107,.035),inset 0 1px 0 #fff;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
#backupBtn{--action-border:#cddffa;--action-soft:#edf5ff;--action-ink:#2563eb}
#notificationBtn{--action-border:#f0dfbb;--action-soft:#fff7e9;--action-ink:#b57916}
#lockBtn{--action-border:#dfd5f7;--action-soft:#f4f0ff;--action-ink:#7652c7}
.app-shell>.topbar .toolbar-action svg{display:block;flex:none;width:21px;height:21px;stroke-width:1.9;pointer-events:none}
.app-shell>.topbar .toolbar-action:hover{border-color:var(--action-ink);background:var(--action-soft);box-shadow:0 6px 16px rgba(23,47,107,.10);transform:translateY(-1px)}
.app-shell>.topbar .toolbar-action:active{transform:translateY(0);box-shadow:0 1px 3px rgba(23,47,107,.08)}
.app-shell>.topbar .toolbar-action:focus-visible{outline:3px solid #93b8fb;outline-offset:3px}
.app-shell>.topbar .toolbar-action::after{content:attr(data-toolbar-tip);position:absolute;top:calc(100% + 9px);left:50%;z-index:110;transform:translate(-50%,-3px);display:block;padding:7px 10px;border-radius:8px;background:#17366f;color:#fff;font-family:inherit;font-size:11px;font-weight:650;line-height:1.4;white-space:nowrap;box-shadow:0 5px 12px rgba(23,47,107,.12);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s,transform .12s,visibility .12s}
.app-shell>.topbar .toolbar-action:hover::after,.app-shell>.topbar .toolbar-action:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.app-shell>.topbar .notification-btn em{position:absolute;right:-5px;top:-5px;display:grid;place-items:center;min-width:20px;height:20px;margin:0;padding:0 4px;border:2px solid #fff;border-radius:999px;background:#dc3f50;color:#fff;box-shadow:0 2px 5px rgba(190,40,60,.2);font:800 10px/1 ui-sans-serif,system-ui,sans-serif;pointer-events:none}
@media(max-width:820px){
 .app-shell>.topbar{height:auto;min-height:112px;flex-wrap:wrap;row-gap:9px;padding:12px 16px}
 .app-shell>.topbar .command-title{flex:1;min-width:0}
 .app-shell>.topbar .top-actions{flex:1 0 100%;flex-wrap:wrap;justify-content:flex-end;gap:7px}
 .app-shell>.topbar .top-actions .toolbar-action{width:44px;height:44px;border-radius:13px}
 .app-shell>.topbar .top-actions .top-language-picker{min-height:44px}
}
@media(max-width:560px){
 .app-shell>.topbar .top-actions{gap:6px}
 .app-shell>.topbar .top-actions .top-language-picker span{display:none}
 .app-shell>.topbar .top-actions .top-language-picker{min-width:84px;padding:0 8px}
 .app-shell>.topbar .top-actions .top-language-picker select{max-width:72px}
 .app-shell>.topbar .top-actions .logout-btn{min-height:44px;padding:0 9px}
 .app-shell>.topbar .toolbar-action::after{display:none}
}
@media(prefers-reduced-motion:reduce){.app-shell>.topbar .toolbar-action,.app-shell>.topbar .toolbar-action::after{transition:none}}
/* Override the older phone rule that hid the backup control. */
.app-shell>.topbar .top-actions #backupBtn,.app-shell>.topbar .top-actions #notificationBtn,.app-shell>.topbar .top-actions #lockBtn{display:inline-flex}