.topbar:has(.grade-sync-status){position:sticky}
.grade-sync-status{position:relative;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-height:32px;padding:6px 11px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.065);color:#eef2f8;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.grade-sync-status::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#aab6c8;box-shadow:0 0 0 3px rgba(170,182,200,.08)}
.grade-sync-status[data-phase=ok]::before{background:#8fd0b6;box-shadow:0 0 0 3px rgba(143,208,182,.09)}
.grade-sync-status[data-phase=saving]::before{background:#93b7ec;box-shadow:0 0 0 3px rgba(147,183,236,.1)}
.grade-sync-status[data-phase=error]{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.14);cursor:pointer}
.grade-sync-status[data-phase=error]::before{background:#e68d88;box-shadow:0 0 0 3px rgba(230,141,136,.1)}
.grade-sync-status[data-phase=error]:hover{background:rgba(255,255,255,.105);border-color:rgba(255,255,255,.18)}
.grade-sync-status[data-phase=error].attention{animation:grade-sync-attention .34s ease}
.grade-sync-panel{position:absolute;z-index:70;top:calc(100% + 8px);right:16px;width:min(360px,calc(100vw - 24px));padding:16px;border:1px solid var(--border,#dce3ed);border-radius:16px;background:var(--surface,#fff);color:var(--text,#26323d);box-shadow:0 20px 54px rgba(14,31,25,.2)}
.grade-sync-panel[hidden]{display:none!important}
.grade-sync-panel::before{content:'';position:absolute;right:26px;top:-6px;width:11px;height:11px;border-left:1px solid var(--border,#dce3ed);border-top:1px solid var(--border,#dce3ed);background:var(--surface,#fff);transform:rotate(45deg)}
.grade-sync-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grade-sync-panel-head strong{font-size:14px}
.grade-sync-panel-head button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:9px;background:var(--surface-3,#f3f6f8);color:var(--muted,#718096);font-size:20px;cursor:pointer}
.grade-sync-panel-copy{margin:9px 0 14px;color:var(--muted,#667681);font-size:13px;line-height:1.65}
.grade-sync-actions{display:flex;flex-wrap:wrap;gap:8px}
.grade-sync-actions button[hidden]{display:none!important}
[data-grade-sync-disabled]{cursor:not-allowed!important}
[data-grade-sync-disabled]:not(input):not(textarea):not(select){opacity:.68}
.grade-sync-toast{position:fixed;z-index:10020;top:max(18px,env(safe-area-inset-top));right:18px;display:grid;grid-template-columns:34px minmax(0,1fr) 28px;align-items:start;gap:11px;width:min(410px,calc(100vw - 28px));padding:14px 13px;border:1px solid #efb0a9;border-radius:16px;background:#fff8f7;color:#713730;box-shadow:0 18px 48px rgba(84,36,30,.2);opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease}
.grade-sync-toast[hidden]{display:none!important}
.grade-sync-toast.show{opacity:1;transform:translateY(0)}
.grade-sync-toast-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#d95c50;color:#fff;font-weight:800}
.grade-sync-toast strong{display:block;margin:1px 0 4px;font-size:14px}
.grade-sync-toast p{margin:0;color:#875049;font-size:12px;line-height:1.55}
.grade-sync-toast button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:transparent;color:#9a6a64;font-size:20px;cursor:pointer}
.grade-sync-toast.offline{border-color:#dfc678;background:#fffaf0;color:#6d5515;box-shadow:0 18px 48px rgba(88,68,18,.16)}
.grade-sync-toast.offline .grade-sync-toast-icon{background:#c89222}
.grade-sync-toast.offline p{color:#7b6528}
.grade-sync-toast.offline button{color:#8d783b}
.grade-sync-pending{position:fixed;z-index:10010;top:calc(env(safe-area-inset-top) + 82px);right:18px;display:flex;align-items:flex-start;gap:10px;width:min(350px,calc(100vw - 28px));padding:12px 14px;border:1px solid #c3d5ed;border-radius:13px;background:#f3f8ff;color:#365575;box-shadow:0 8px 26px rgba(30,50,80,.12);pointer-events:none}
.grade-sync-pending[hidden]{display:none!important}
.grade-sync-pending-icon{flex:0 0 24px;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#557ba7;color:#fff;font-weight:700}
.grade-sync-pending strong{display:block;font-size:13px;line-height:1.5}
.grade-sync-pending p{margin:3px 0 0;font-size:12px;line-height:1.55}
.grade-sync-pending[data-phase=warning]{border-color:#dfc678;background:#fffaf0;color:#725919}
.grade-sync-pending[data-phase=warning] .grade-sync-pending-icon{background:#b78724}
.grade-sync-pending[data-phase=error]{border-color:#efb0a9;background:#fff8f7;color:#873e35}
.grade-sync-pending[data-phase=error] .grade-sync-pending-icon{background:#c95b4e}
@media(max-width:700px){.grade-sync-pending{top:calc(env(safe-area-inset-top) + 65px);right:10px;width:min(330px,calc(100vw - 20px));padding:9px 11px}}
@keyframes grade-sync-attention{50%{transform:translateX(-4px)}75%{transform:translateX(3px)}}
@media(max-width:700px){.topbar .save-state.grade-sync-status{display:inline-flex!important;flex:0 0 auto;max-width:132px;overflow:hidden;padding:5px 9px;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.grade-sync-panel{position:fixed;top:calc(env(safe-area-inset-top) + 58px);right:10px;width:calc(100vw - 20px)}.grade-sync-panel::before{display:none}.grade-sync-toast{top:calc(env(safe-area-inset-top) + 62px);right:10px;width:calc(100vw - 20px)}.grade-sync-actions .button{min-height:40px;flex:1}.dictation-topbar-leading,.classes-workstation .topbar>div{min-width:0;flex:1}}
@media(prefers-reduced-motion:reduce){.grade-sync-status,.grade-sync-toast{animation:none!important;transition:none!important}}