/* Shared, restrained feedback. Printing and reduced-motion remain static. */
:root{--motion-fast:140ms;--motion-normal:220ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
@media screen{
 button,.button,summary,a.feature-tool,a.class-card,input,select,textarea{transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-normal),transform var(--motion-fast)}
 button:active:not(:disabled),.button:active{transform:translateY(1px)}
 button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #9aafe9;outline-offset:3px}
 button:disabled{cursor:not-allowed}
 .workspace-actions>button,.workspace-actions>button.data-entry{background:#fff;border-color:#dce2ed;color:#687a96;box-shadow:none}
 .workspace-actions>button:hover,.workspace-actions>button.data-entry:hover{background:#f2f5fb;border-color:#c5cfe3;color:#415b88}
 .workspace-actions>button.selected,.workspace-actions>button.data-entry.selected,.workspace-actions>.utility-menu>summary.selected{background:#e9efff;border-color:#b8c9f0;color:#365ab4;box-shadow:inset 0 -2px 0 #6685d5}
 .workspace-actions>button.selected:hover{background:#e2eaff}
 .workspace-actions>.utility-menu>summary{transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}
 dialog[open]{animation:dialog-enter var(--motion-normal) var(--motion-ease) both}
 dialog[open]::backdrop{animation:backdrop-enter 180ms ease-out both}
 .utility-menu[open]>.utility-items{animation:menu-enter 160ms var(--motion-ease) both;transform-origin:top right}
 .drawer:not([hidden]){animation:menu-enter var(--motion-normal) var(--motion-ease) both}
 .signin-form{animation:surface-enter 300ms var(--motion-ease) both}
 .feature-tool .tool-arrow{transition:transform var(--motion-normal)}
 @media(hover:hover) and (pointer:fine){
  .feature-tool:hover .tool-arrow{transform:translate(2px,-2px)}
  .class-card:hover,.feature-tool:hover{transform:translateY(-3px)}
 }
 @keyframes surface-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
 @keyframes dialog-enter{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
 @keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
 @keyframes menu-enter{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{*,*::before,*::after{animation:none!important;transition:none!important}}
.sound-toggle{flex-shrink:0;font-size:12px!important;padding:7px 10px!important;min-height:34px;border-radius:9px;white-space:nowrap;color:#6b7890!important;background:#f6f8fc!important;border:1px solid #dce2ed!important;box-shadow:none!important}
.sound-toggle[aria-pressed="false"]{color:#8c94a2!important;background:#f0f2f6!important}
.sound-toggle.sound-in-fullscreen{position:absolute;right:24px;bottom:20px;z-index:20}
.signin-page>.sound-toggle{position:fixed;right:20px;top:20px}
@media(max-width:760px){.top>.sound-toggle{margin-left:6px;font-size:11px!important;padding:6px 8px!important}.workspace-actions>.sound-toggle{font-size:11px!important}}
@media print{.sound-toggle{display:none!important}}

.top-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.top-actions>.sound-toggle{margin-left:0}
.wordmark .brand-avatar,.signin-brand .brand-avatar{display:block;width:44px;height:44px;object-fit:cover;border-radius:12px;flex-shrink:0;border:1px solid #e0e6ef}
.top .wordmark,.compact-signin .signin-brand{display:flex;align-items:center;gap:11px;min-width:0;flex-shrink:0}
.top .wordmark .brand-text,.compact-signin .signin-brand>.brand-text{margin:0;font:600 18px/1.4 'Microsoft YaHei',system-ui,sans-serif;letter-spacing:0;color:#405578;white-space:nowrap}
.top .wordmark .brand-text small,.compact-signin .signin-brand .brand-text small{display:block;margin-top:3px;font:10px/1.5 'Microsoft YaHei',system-ui,sans-serif;letter-spacing:0;color:#8e9ab0;white-space:nowrap}
@media(max-width:700px){.top{height:auto;min-height:72px;flex-wrap:wrap;gap:10px;padding:12px 16px}.top .wordmark .brand-avatar{width:38px;height:38px;border-radius:10px}.top .wordmark .brand-text{font-size:16px}.top .wordmark .brand-text small{font-size:9px}.top-actions{gap:8px}.top-actions>.button{padding:8px 10px;font-size:11px}}

.feature-icon>svg{display:block;width:28px;height:28px}