/* Preserve the Windows workspace styles and placements. */
/* Website installation stays outside the school header. */
body.web-system #app-shell #install-button {display:none!important;}
.web-install-access,.web-install-sidebar {
  display:flex;align-items:center;justify-content:center;gap:7px;min-height:34px;
  border:1px solid #60739f;border-radius:8px;box-shadow:none;font:inherit;
  font-size:11px;font-weight:600;line-height:1.2;padding:7px 10px;cursor:pointer;
}
.web-install-access {width:100%;margin-top:10px;color:#18213f;background:#eaf5f8;}
.web-install-sidebar {width:100%;margin-top:10px;color:#eaf5f8;background:transparent;border-color:#60739f;white-space:nowrap;}
.web-install-access svg,.web-install-sidebar svg {width:16px;height:16px;fill:currentColor;flex:0 0 16px;}
.web-install-access[hidden],.web-install-sidebar[hidden] {display:none!important;}
.web-install-access:focus-visible,.web-install-sidebar:focus-visible {outline:2px solid #8fd9d5;outline-offset:3px;}
.web-install-access:disabled,.web-install-sidebar:disabled {opacity:.6;cursor:wait;}
body.web-system #app-shell.sidebar-collapsed .web-install-sidebar span {display:none;}
#web-install-guide {position:fixed;width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:22px;border:1px solid #d7deea;border-radius:12px;background:#fff;color:#18213f;z-index:12000;}
#web-install-guide::backdrop {background:#18213f99;}
#web-install-guide h2 {margin:0 0 12px;font-size:20px;line-height:1.25;}
#web-install-guide p,#web-install-guide li {font-size:14px;line-height:1.5;}
#web-install-guide ol {padding-left:22px;}
#web-install-guide li+li {margin-top:8px;}
#web-install-guide .web-install-note {color:#516074;font-size:12px;}
/* Browsers have their own chrome; do not reserve the hidden Windows title bar. */
body.web-system { --desktop-titlebar-height:0px; padding-top:0!important; }
.web-system #activation-screen { display:none!important; }
.web-system .desktop-titlebar { display:none!important; }
.web-system .web-access[hidden],.web-system .web-online-bar[hidden] { display:none!important; }
/* Reuse the native activation/recovery card sizing, fields, icons and buttons. */
.web-system .web-access { position:fixed; inset:0; z-index:10020; grid-template-columns:minmax(0,1fr); }
.web-access .activation-card[hidden],.web-access [hidden] { display:none!important; }
.web-access .web-access-message { color:var(--ink,#18213f); text-align:center; line-height:1.45; margin:10px 0 0; font-size:13px; }
.web-access .web-access-message:empty { display:none; }
.web-access .license-recovery-error[data-state=pending] { color:var(--ink,#18213f); }
.web-access .license-recovery-option { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line,#d7deea); border-radius:12px; }
.web-access .license-recovery-option input { width:18px; height:18px; flex:0 0 auto; }
.web-access .license-recovery-option span { display:grid; gap:5px; }
.web-access .license-recovery-option small { color:var(--muted,#516074); }
.web-access.recovery-flow-open .activation-card { visibility:hidden; }
#web-save-status { font-weight:650; white-space:nowrap; }
#web-save-status[data-state=pending] { color:#875716; }
.web-save-issue { border:0; border-radius:16px; padding:28px; width:min(640px,calc(100vw - 28px)); color:#151f3b; box-shadow:0 16px 80px #0004; }
.web-save-issue::backdrop { background:#101d37aa; }
.web-save-issue p { font-size:16px; line-height:1.55; }
.web-save-issue .form-actions { flex-wrap:wrap; }


/* Keep the original renewal screen reachable while a trial is expired. */
.web-system .subscription-entry { z-index:10021; }

/* The control retains its native tick/dot; remove the extra rectangular ring. */
.web-system input:is([type="checkbox"],[type="radio"]),
.web-system input:is([type="checkbox"],[type="radio"]):is(:focus,:focus-visible,:active) {
  outline:none!important;
  box-shadow:none!important;
}
/* Pointer selection has no focus box; keyboard focus remains on the label. */
.web-system label:has(> input:is([type="checkbox"],[type="radio"]):focus-visible) {
  outline:none;
  text-decoration:underline;
  text-decoration-color:var(--teal-600,#247f78);
  text-underline-offset:4px;
}

/* Grade Sheet base spacing; current toolbar surfaces are defined below. */
@media screen {
  body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar) {
    padding:4px 0 12px!important;display:flex!important;flex-wrap:nowrap!important;gap:8px!important;
  }
  body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar) :is(select,input,.button) {
    min-height:36px!important;
  }
  body.web-system #app-shell .route-smartsis .page-heading :is(h1,h2) {font-size:clamp(28px,2.4vw,34px)!important;}
  #web-menu-button,#web-menu-close,#web-menu-backdrop {display:none;}
}

/* Keep sheet geometry inside its own scroll surface; never widen the page. */
@media screen and (max-width:1100px) {
  body.web-system:not(.web-tablet-desktop):not(.activation-active) {overflow:hidden;}
  body.web-system:not(.web-tablet-desktop) #app-shell.app-shell {display:block!important;width:100%!important;min-width:0!important;height:100dvh!important;overflow:hidden!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .main-shell {width:100%!important;min-width:0!important;margin:0!important;padding:0!important;height:100%!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .view {min-width:0!important;max-width:100%!important;padding:16px clamp(12px,2.5vw,24px) 24px!important;scrollbar-gutter:auto!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .topbar {display:flex!important;flex-wrap:wrap!important;gap:8px!important;min-height:62px!important;padding:8px 12px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .school-context {flex:1 1 160px!important;min-width:0!important;max-width:none!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .school-context-copy {display:block!important;min-width:0!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell #context-school {white-space:normal!important;overflow-wrap:anywhere;line-height:1.25!important;font-size:14px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions {min-width:0!important;max-width:100%!important;overflow:visible!important;gap:5px!important;margin:0!important;flex-wrap:wrap!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-profile-copy {display:none!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-action-button {min-height:40px!important;padding:7px 9px!important;font-size:12px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .bottom-nav {display:none!important;}
  body.web-system:not(.web-tablet-desktop) #web-menu-button {display:grid;flex:0 0 40px;min-width:40px;min-height:40px;}
  body.web-system:not(.web-tablet-desktop) #web-menu-close {display:grid;position:absolute;right:10px;top:10px;color:white;background:transparent;z-index:5;}
  body.web-system:not(.web-tablet-desktop) #app-shell .sidebar {
    position:fixed!important;inset:0 auto 0 0!important;z-index:1000!important;width:min(300px,88vw)!important;max-width:88vw!important;
    height:100dvh!important;min-height:0!important;overflow:auto!important;transform:translateX(-105%)!important;transition:transform .2s ease!important;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom))!important;
  }
  body.web-system:not(.web-tablet-desktop) #app-shell .sidebar::after {display:none!important;}
  body.web-system:not(.web-tablet-desktop).web-nav-open #app-shell .sidebar {transform:translateX(0)!important;}
  body.web-system:not(.web-tablet-desktop) #web-menu-backdrop:not([hidden]) {display:block;position:fixed;inset:0;z-index:999;border:0;background:#101d3780;}
  body.web-system:not(.web-tablet-desktop) #app-shell .sidebar .brand {padding-right:35px;min-height:60px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .sidebar .brand-copy {display:grid!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .sidebar .brand-logo {width:48px!important;height:48px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .sidebar-collapse-button {display:none!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .side-nav {gap:4px!important;margin-top:12px!important;flex:0 0 auto!important;height:auto!important;container-type:normal!important;overflow:visible!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .side-nav .nav-item {flex:0 0 auto!important;min-height:39px!important;height:auto!important;padding:8px 10px!important;font-size:13px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .side-nav .nav-item span {display:inline!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .side-nav .sidebar-nav-group-header {display:flex!important;flex:0 0 auto!important;min-height:24px!important;font-size:11px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .sidebar-release {position:static!important;margin-top:16px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .page-heading {display:flex!important;flex-wrap:wrap!important;gap:12px!important;max-width:100%!important;min-width:0!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .page-heading>div {min-width:0!important;max-width:100%!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .heading-actions {display:flex!important;flex-wrap:wrap!important;max-width:100%!important;gap:6px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .heading-actions .button {min-width:0!important;max-width:100%!important;white-space:normal!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell :is(.toolbar,.summary-toolbar,.record-controls,.analysis-controls,.mapeh-controls,.sf2-toolbar,.gradebook-toolbar) {min-width:0!important;max-width:100%!important;flex-wrap:wrap!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell :is(.table-shell,.gradebook-table-wrap,.mapeh-table-wrap,.sf2-table-wrap,.sf2-table-shell,.table-scroll,.smart-sis-table-wrap) {max-width:100%!important;min-width:0!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
  body.web-system:not(.web-tablet-desktop) #app-shell :is(.settings-grid-balanced,.dashboard-grid,.student-sex-grid,.class-grid,.roster-grid) {min-width:0!important;max-width:100%!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .settings-card {min-width:0!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .license-details strong {overflow-wrap:anywhere;}
  body.web-system:not(.web-tablet-desktop) :is(.modal-panel,.web-save-issue,#subscription-dialog) {max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;overflow:auto!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell :is(input,select,textarea) {max-width:100%;}
  body.web-system:not(.web-tablet-desktop) #app-shell .trial-banner {flex-wrap:wrap;gap:8px;}
}
@media screen and (max-width:600px) {
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions {flex:1 1 100%!important;justify-content:flex-end!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .school-context {flex:1 1 calc(100% - 50px)!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions .top-action-button {font-size:11px!important;padding:6px 7px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions .top-action-button svg {width:16px!important;height:16px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-refresh-button span {display:none!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .page-heading h1,body.web-system:not(.web-tablet-desktop) #app-shell .page-heading h2 {font-size:22px!important;line-height:1.2!important;white-space:normal!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell :is(.settings-grid-balanced,.student-sex-grid,.class-grid,.roster-grid,.metric-grid,.dashboard-grid) {grid-template-columns:minmax(0,1fr)!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell :is(.record-controls,.analysis-controls,.mapeh-controls,.sf9-controls) {display:flex!important;flex-wrap:wrap!important;gap:10px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell :is(.record-controls,.analysis-controls,.mapeh-controls,.sf9-controls)>label {flex:1 1 160px;min-width:0!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell :is(.panel-header,.mapeh-component-header,.mapeh-section-header) {flex-wrap:wrap!important;gap:8px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .settings-card-footer {display:flex!important;flex-wrap:wrap!important;gap:8px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .settings-card-footer .button {flex:1 1 140px!important;min-width:0!important;white-space:normal!important;}
  body.web-system:not(.web-tablet-desktop) :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {font-size:16px!important;}
  body.web-system:not(.web-tablet-desktop) .form-grid {grid-template-columns:minmax(0,1fr)!important;}
  body.web-system:not(.web-tablet-desktop) .web-access {overflow-y:auto!important;align-items:center!important;padding:12px!important;}
  body.web-system:not(.web-tablet-desktop) .web-access .activation-card {width:100%!important;max-width:440px!important;margin:12px auto!important;padding:22px 18px!important;}
  body.web-system:not(.web-tablet-desktop) .license-recovery-panel {max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;overflow:auto!important;}
}

@media screen and (max-width:1100px) {
  body.web-system:not(.web-tablet-desktop) #app-shell #context-school {max-width:none!important;overflow:visible!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .heading-actions {min-width:0!important;overflow:visible!important;justify-content:flex-start!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .heading-actions :is(.jhs-eclass-actions,.sshs-eclass-actions) {display:flex!important;flex-wrap:wrap!important;min-width:0!important;max-width:100%!important;gap:8px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .heading-actions :is(.jhs-eclass-actions,.sshs-eclass-actions)>.button {flex:1 1 140px!important;width:auto!important;min-width:0!important;max-width:100%!important;font-size:12px!important;line-height:1.3!important;white-space:normal!important;padding:9px!important;}
}
@media screen and (max-width:600px) {
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions .key-stage-button {width:auto!important;max-width:180px!important;min-width:max-content!important;overflow:visible!important;white-space:nowrap!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions {gap:3px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions .workspace-slot {margin:0!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions .key-stage-button {gap:5px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions .key-stage-button::before {margin-right:0!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions .top-action-button:not(.key-stage-button) {width:34px!important;min-width:34px!important;min-height:36px!important;padding:6px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions .top-notification-button {width:34px!important;min-width:34px!important;height:36px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions .top-profile {margin-left:0!important;min-width:0!important;padding:2px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions .top-profile .avatar {width:34px!important;height:34px!important;min-width:34px!important;}
}

@media screen and (max-width:1100px) {
  body.web-system:not(.web-tablet-desktop) #app-shell :is(.sf2-workspace-toolbar,.sf5-toolbar,.sf8-toolbar) {min-width:0!important;max-width:100%!important;flex-wrap:wrap!important;overflow:visible!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .sf2-workspace-toolbar .sf2-code-legend {display:flex!important;flex:1 1 100%!important;min-width:0!important;max-width:100%!important;flex-wrap:wrap!important;white-space:normal!important;font-size:11px!important;gap:8px 12px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .sf2-code-legend>span {white-space:nowrap;}
  body.web-system:not(.web-tablet-desktop) #app-shell .mapeh-view-tabs {display:flex!important;flex-wrap:wrap!important;max-width:100%!important;gap:8px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .mapeh-view-tabs button {flex:1 1 180px!important;min-width:0!important;max-width:100%!important;white-space:normal!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .gradebook-wrap {max-width:100%!important;max-height:65dvh!important;min-height:220px;overflow:auto!important;}
}

/* Website header: native controls move to the mobile drawer, with their IDs intact. */
@media screen {
  body.web-system #app-shell :is(#web-mobile-workspace,#web-mobile-account-menu)[hidden] {display:none!important;}
}
@media screen and (max-width:1100px) {
  body.web-system:not(.web-tablet-desktop) #app-shell #web-mobile-workspace {display:block;margin:12px 0 4px;}
  body.web-system:not(.web-tablet-desktop) #app-shell #web-mobile-workspace .workspace-slot {display:block;margin:0;}
  body.web-system:not(.web-tablet-desktop) #app-shell #web-mobile-workspace .key-stage-button {display:flex;align-items:center;justify-content:center;width:100%!important;max-width:100%!important;min-height:42px;white-space:normal;}
  body.web-system:not(.web-tablet-desktop) #app-shell #web-mobile-account-menu {display:grid;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.15);}
  body.web-system:not(.web-tablet-desktop) #app-shell #web-mobile-account-menu .top-profile {display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 8px;color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);border-radius:10px;}
  body.web-system:not(.web-tablet-desktop) #app-shell #web-mobile-account-menu .top-profile-copy {display:block!important;min-width:0;}
  body.web-system:not(.web-tablet-desktop) #app-shell #web-mobile-account-menu .top-profile-copy strong {max-width:none;white-space:normal;overflow-wrap:anywhere;color:#fff;font-size:13px;}
  body.web-system:not(.web-tablet-desktop) #app-shell #web-mobile-account-menu .top-profile-copy small {max-width:none;white-space:normal;color:#c8d4e5;font-size:11px;}
  body.web-system:not(.web-tablet-desktop) #app-shell .topbar {flex-wrap:nowrap!important;align-items:center!important;gap:8px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .school-context {flex:1 1 0!important;min-width:0!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .top-actions {flex:0 0 auto!important;flex-wrap:nowrap!important;gap:4px!important;}
}
@media screen and (max-width:600px) {
  body.web-system:not(.web-tablet-desktop) #app-shell .school-context {gap:6px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .school-context-logo {width:28px!important;height:28px!important;}
  body.web-system:not(.web-tablet-desktop) #web-menu-button {min-width:34px;flex-basis:34px;min-height:36px;}
}

@media screen and (min-width:1101px) {
  body.web-system #app-shell .route-smartsis .page-heading {flex-wrap:wrap!important;}
  body.web-system #app-shell .route-smartsis .page-heading>div:first-child {flex:1 1 420px;min-width:0;}
}
@media screen and (max-width:1100px) {
  /* Workspace trigger and chooser are scoped separately from classroom dialogs. */
  body.web-system:not(.web-tablet-desktop) #app-shell #web-mobile-workspace .key-stage-button {justify-content:flex-start!important;gap:10px;min-height:44px;padding:10px 14px!important;border:1px solid rgba(143,217,213,.5);border-radius:10px;background:#eaf5f8;color:#18213f;box-shadow:none;overflow:visible!important;white-space:normal!important;font-size:13px!important;line-height:1.35;text-align:left;}
  body.web-system:not(.web-tablet-desktop) #app-shell #web-mobile-workspace .key-stage-button::before {flex:0 0 7px;margin-right:0;}
  body.web-system:not(.web-tablet-desktop) .modal-panel:has(.key-stage-license-grid) {display:flex;flex-direction:column;width:min(680px,calc(100vw - 24px))!important;max-height:calc(100dvh - 24px)!important;margin:12px auto!important;overflow:hidden!important;}
  body.web-system:not(.web-tablet-desktop) .modal-panel:has(.key-stage-license-grid)>header {flex:0 0 auto;min-width:0;padding:14px 16px;gap:12px;}
  body.web-system:not(.web-tablet-desktop) .modal-panel:has(.key-stage-license-grid)>header h2 {font-size:20px;line-height:1.25;min-width:0;}
  body.web-system:not(.web-tablet-desktop) .modal-panel:has(.key-stage-license-grid)>header .icon-button {flex:0 0 38px;}
  body.web-system:not(.web-tablet-desktop) .modal-panel:has(.key-stage-license-grid) #modal-content {min-height:0;overflow:auto;padding:16px;overscroll-behavior:contain;}
  body.web-system:not(.web-tablet-desktop) .modal-panel:has(.key-stage-license-grid) #modal-content>p {margin:0 0 14px;font-size:14px;line-height:1.5;}
  body.web-system:not(.web-tablet-desktop) .key-stage-license-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;}
  body.web-system:not(.web-tablet-desktop) .key-stage-license-card {display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:14px;gap:8px;}
  body.web-system:not(.web-tablet-desktop) .key-stage-license-card h3 {font-size:17px;line-height:1.3;overflow-wrap:anywhere;}
  body.web-system:not(.web-tablet-desktop) .key-stage-license-card p {font-size:13px;line-height:1.45;overflow-wrap:anywhere;}
  body.web-system:not(.web-tablet-desktop) .key-stage-license-card .button {margin-top:auto;width:100%;min-width:0;min-height:42px;padding:9px 10px;font-size:12px;line-height:1.3;white-space:normal;box-shadow:none;}
  body.web-system:not(.web-tablet-desktop) #app-shell .route-dashboard>.metric-grid {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .route-dashboard>.metric-grid>.metric-card {min-width:0;min-height:150px;padding:14px;}
  body.web-system:not(.web-tablet-desktop) #app-shell .route-dashboard>.metric-grid>.metric-card strong {overflow-wrap:anywhere;font-size:clamp(22px,4.5vw,28px);}
  body.web-system:not(.web-tablet-desktop) #app-shell .route-dashboard>.metric-grid>.metric-card :is(p,.trend) {overflow-wrap:anywhere;line-height:1.4;}
  /* All sheet heading actions use equal tracks, heights and text wrapping. */
  body.web-system:not(.web-tablet-desktop) #app-shell .heading-actions {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch!important;justify-content:stretch!important;width:100%!important;max-width:100%!important;gap:8px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .heading-actions .button {width:100%!important;min-width:0!important;max-width:100%!important;min-height:44px!important;padding:10px!important;white-space:normal!important;line-height:1.35!important;font-size:12px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .heading-actions>.sheet-wide-toggle {grid-column:2;justify-self:end;align-self:center;margin:0!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .heading-actions :is(.jhs-eclass-actions,.sshs-eclass-actions,.sf9-heading-actions) {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-column:1/-1;gap:8px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .heading-actions :is(.jhs-eclass-actions,.sshs-eclass-actions,.sf9-heading-actions)>.button:last-child:nth-child(odd) {grid-column:1/-1;}
  body.web-system:not(.web-tablet-desktop) #app-shell .heading-actions .button svg {flex:0 0 17px!important;width:17px!important;height:17px!important;}
}
@media screen and (max-width:600px) {
  body.web-system:not(.web-tablet-desktop) .key-stage-license-grid {grid-template-columns:minmax(0,1fr);}
  body.web-system:not(.web-tablet-desktop) #app-shell .route-dashboard>.metric-grid {gap:10px!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell .route-dashboard>.metric-grid>.metric-card {padding:12px;}
}
/* v1.0.22: Grade Sheet buttons match the two Link for E-Class heading actions. */
@media screen {
  body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar,.g2to10-grade-sheet-summary-toolbar,.sshs-grade-sheet-summary-toolbar,.heading-actions) {
    background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;
    display:flex!important;flex-wrap:wrap!important;align-items:flex-end!important;justify-content:flex-start!important;
    gap:6px!important;min-width:0!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;
    grid-template-columns:none!important;grid-template-rows:none!important;
  }
  body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar) {
    background:#eaf5f8!important;border:1px solid #d7e2e8!important;border-radius:6px!important;padding:8px!important;box-shadow:none!important;
  }
  body.web-system #app-shell .route-smartsis .heading-actions {flex:0 1 auto!important;width:auto!important;}
  body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar)>label {flex:0 1 110px!important;min-width:0!important;width:auto!important;max-width:100%!important;}
  body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar)>.advisory-selector-field {flex:1 1 200px!important;max-width:300px!important;}
  body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar)>label :is(select,input) {box-sizing:border-box!important;min-height:36px!important;height:36px!important;padding:4px 8px!important;border-radius:9px!important;}
  body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar,.g2to10-grade-sheet-summary-toolbar,.sshs-grade-sheet-summary-toolbar,.heading-actions) .button,
  body.web-system #app-shell .route-smartsis .summary-tabs button {
    box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
    flex:0 0 auto!important;width:max-content!important;min-width:max-content!important;max-width:none!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
    padding:7px 11px!important;margin:0!important;font-size:10px!important;font-weight:800!important;line-height:14px!important;gap:8px!important;
    white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:normal!important;word-break:normal!important;
    border-radius:9px!important;box-shadow:none!important;transform:none!important;grid-column:auto!important;
  }
  body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar,.g2to10-grade-sheet-summary-toolbar,.sshs-grade-sheet-summary-toolbar,.heading-actions) .button :is(span,strong) {white-space:inherit!important;overflow:visible!important;max-width:none!important;text-overflow:clip!important;}
  body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar,.g2to10-grade-sheet-summary-toolbar,.sshs-grade-sheet-summary-toolbar,.heading-actions) .button svg {flex:0 0 17px!important;width:17px!important;height:17px!important;}
  body.web-system #app-shell .route-smartsis .summary-tabs {display:flex!important;flex:0 0 auto!important;flex-wrap:wrap!important;gap:4px!important;width:auto!important;max-width:none!important;grid-column:auto!important;background:transparent!important;padding:0!important;box-shadow:none!important;}
  body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar,.g2to10-grade-sheet-summary-toolbar,.sshs-grade-sheet-summary-toolbar,.heading-actions) .button.gold-outline,
  body.web-system #app-shell .route-smartsis .summary-tabs button {
    border:1px solid var(--brand-border,#d9e4e8)!important;background:#fff!important;color:var(--brand-navy,#151f3b)!important;
  }
  body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar,.g2to10-grade-sheet-summary-toolbar,.sshs-grade-sheet-summary-toolbar,.heading-actions) .button.gold-outline:hover,
  body.web-system #app-shell .route-smartsis .summary-tabs button:hover {
    border-color:var(--brand-aqua,#8fd6d3)!important;background:var(--brand-ice,#eaf5f8)!important;
  }
  body.web-system #app-shell .route-smartsis .summary-tabs button.active {background:var(--brand-steel,#516a91)!important;border-color:var(--brand-steel,#516a91)!important;color:#fff!important;}
  body.web-system #app-shell .route-smartsis .heading-actions>.sheet-wide-toggle {box-sizing:border-box!important;flex:0 0 36px!important;width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;padding:6px!important;margin:0!important;align-self:flex-end!important;grid-column:auto!important;border-radius:9px!important;box-shadow:none!important;transform:none!important;}
  :root[data-theme="dark"] body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar) {background:var(--surface,#121e31)!important;border-color:var(--dm-border,#34445d)!important;box-shadow:none!important;}
  :root[data-theme="dark"] body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar) :is(select,input),
  :root[data-theme="dark"] body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar,.g2to10-grade-sheet-summary-toolbar,.sshs-grade-sheet-summary-toolbar,.heading-actions) .button,
  :root[data-theme="dark"] body.web-system #app-shell .route-smartsis .summary-tabs button {box-shadow:none!important;}
  :root[data-theme="dark"] body.web-system #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar,.g2to10-grade-sheet-summary-toolbar,.sshs-grade-sheet-summary-toolbar,.heading-actions) .button.gold-outline,
  :root[data-theme="dark"] body.web-system #app-shell .route-smartsis .summary-tabs button {background:var(--dm-control,#18263c)!important;border-color:var(--dm-border,#34445d)!important;color:var(--dm-text,#e7eef8)!important;}
  :root[data-theme="dark"] body.web-system #app-shell .route-smartsis .summary-tabs button.active {background:#516a91!important;border-color:#627da8!important;color:#fff!important;}
}
@media screen and (max-width:600px) {
  body.web-system:not(.web-tablet-desktop) #app-shell .route-smartsis :is(.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar)>.advisory-selector-field {flex-basis:100%!important;max-width:100%!important;}
}

/* Grade Sheet expansion uses the complete viewport; toolbar overrides cannot leak into it. */
@media screen {
  body.web-system.sheet-wide:has(#app-shell .route-smartsis) #app-shell.app-shell {
    position:fixed!important;inset:0!important;display:block!important;width:100%!important;max-width:none!important;
    height:100vh!important;height:100dvh!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;
  }
  body.web-system.sheet-wide:has(#app-shell .route-smartsis) #app-shell :is(.sidebar,.bottom-nav) {display:none!important;}
  body.web-system.sheet-wide:has(#app-shell .route-smartsis) #app-shell .main-shell {
    display:flex!important;flex-direction:column!important;width:100%!important;height:100%!important;min-height:0!important;
    margin:0!important;padding:0!important;overflow:hidden!important;
  }
  body.web-system.sheet-wide:has(#app-shell .route-smartsis) #app-shell .topbar {
    position:fixed!important;inset:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) auto auto!important;
    display:block!important;width:36px!important;height:36px!important;min-height:36px!important;
    padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
    overflow:visible!important;z-index:300!important;
  }
  body.web-system.sheet-wide:has(#app-shell .route-smartsis) #app-shell .topbar>:not(#sheet-wide-exit) {display:none!important;}
  body.web-system.sheet-wide:has(#app-shell .route-smartsis) #app-shell #sheet-wide-exit {
    position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;
    width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;
    padding:0!important;margin:0!important;border-radius:9px!important;box-shadow:none!important;transform:none!important;
  }
  body.web-system.sheet-wide #app-shell .view.sheet-view.route-smartsis {
    display:flex!important;flex-direction:column!important;flex:1 1 auto!important;width:100%!important;max-width:none!important;
    height:100%!important;min-height:0!important;max-height:100%!important;padding:0!important;margin:0!important;overflow:hidden!important;
  }
  body.web-system.sheet-wide #app-shell .view.sheet-view.route-smartsis>:not(.smart-sis-table-wrap):not(.empty-state):not(.compliance-blocker) {display:none!important;}
  body.web-system.sheet-wide #app-shell .view.sheet-view.route-smartsis>.smart-sis-table-wrap {
    display:block!important;box-sizing:border-box!important;flex:1 1 auto!important;width:100%!important;max-width:100%!important;
    height:100%!important;min-height:0!important;max-height:100%!important;margin:0!important;border-radius:0!important;
    overflow:auto!important;scrollbar-gutter:auto!important;-webkit-overflow-scrolling:touch;
  }
}

/* v1.0.22: tablet desktop positions are preserved by the fitted desktop viewport. */
@media screen {
  body.web-system.web-tablet {--sidebar:240px;}
  body.web-system.web-tablet-desktop #app-shell:not(.sidebar-collapsed) .sidebar {width:var(--sidebar)!important;}
  body.web-system.web-tablet:not(.web-tablet-desktop) #app-shell .sidebar {width:min(260px,76vw)!important;max-width:76vw!important;}
  body.web-system.web-tablet-desktop #app-shell :is(#web-menu-button,#web-menu-close,#web-mobile-workspace,#web-mobile-account-menu) {display:none!important;}
  body.web-system.web-tablet-desktop #web-menu-backdrop {display:none!important;}

  /* Workspace has a dedicated strip; the hamburger opens navigation only. */
  body.web-system:not(.web-tablet-desktop) #app-shell #web-mobile-workspace:not([hidden]) {
    display:flex!important;flex:0 0 auto;align-items:center;justify-content:space-between;gap:12px;
    margin:0!important;padding:8px 12px!important;border:0;border-bottom:1px solid var(--line,#d9e4e8);
    border-radius:0;background:var(--brand-ice,#eaf5f8);color:var(--brand-navy,#151f3b);
  }
  body.web-system #app-shell #web-mobile-workspace .web-workspace-caption {display:flex;align-items:center;gap:8px;flex:0 0 auto;}
  body.web-system #app-shell #web-mobile-workspace .web-workspace-caption>svg {width:20px;height:20px;fill:currentColor;}
  body.web-system #app-shell #web-mobile-workspace .web-workspace-caption strong {display:block;font-size:12px;line-height:1.2;}
  body.web-system #app-shell #web-mobile-workspace .web-workspace-caption small {display:block;margin-top:2px;font-size:10px;line-height:1.2;}
  body.web-system:not(.web-tablet-desktop) #app-shell #web-mobile-workspace .workspace-slot {display:block!important;flex:0 1 auto;min-width:0;margin:0!important;}
  body.web-system:not(.web-tablet-desktop) #app-shell #web-mobile-workspace .key-stage-button {
    display:flex!important;align-items:center!important;justify-content:center!important;min-height:36px!important;
    width:auto!important;min-width:0!important;max-width:100%!important;padding:7px 11px!important;
    border:1px solid var(--brand-steel,#516a91)!important;border-radius:9px!important;background:var(--brand-steel,#516a91)!important;color:#fff!important;
    font-size:11px!important;line-height:1.2!important;white-space:normal!important;text-align:center;box-shadow:none!important;
  }
  body.web-system #app-shell #web-mobile-workspace .key-stage-button::before {display:none!important;}
  body.web-system:not(.web-tablet-desktop) #web-menu-button {flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:40px;min-height:40px;padding:3px;}
  body.web-system #web-menu-button svg {width:19px;height:19px;}
  body.web-system #web-menu-button span {font-size:9px;line-height:1;}
  body.web-system.sheet-wide #app-shell #web-mobile-workspace:not([hidden]) {display:none!important;}
  :root[data-theme="dark"] body.web-system #app-shell #web-mobile-workspace {background:var(--dm-panel,#121e31);color:var(--dm-text,#e7eef8);}

  /* Phone record grids: wrapped identity at the left, about three adjacent data columns. */
  body.web-system.web-phone #app-shell #view {padding-inline:10px!important;}
  body.web-system.web-phone #app-shell #view :is(.sf5-record-panel,.sf8-record-panel) {padding:8px!important;}
  body.web-system.web-phone #app-shell #view :is(.sf5-metric-grid,.sf8-metric-grid) {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  body.web-system.web-phone #app-shell #view table[data-web-mobile-grid] {
    table-layout:fixed!important;width:var(--web-grid-width)!important;min-width:var(--web-grid-width)!important;max-width:none!important;
  }
  body.web-system.web-phone #app-shell #view table[data-web-mobile-grid] col {width:var(--web-col-width)!important;}
  body.web-system.web-phone #app-shell #view table[data-web-mobile-grid] :is(th,td) {
    width:auto!important;min-width:0!important;max-width:none!important;padding:5px!important;
    font-size:11px!important;line-height:1.25!important;white-space:normal!important;overflow-wrap:anywhere;
  }
  body.web-system.web-phone #app-shell #view table[data-web-mobile-grid] :is(.sticky-col,.sis-sticky-col,.sf2-app-sticky,.mapeh-sticky-col) {
    position:sticky!important;left:0!important;width:var(--web-name-width)!important;min-width:var(--web-name-width)!important;max-width:var(--web-name-width)!important;text-align:left!important;
  }
  body.web-system.web-phone #app-shell #view :is(.sf5-table,.sf8-table)[data-web-mobile-grid] :is(th,td):first-child:not([colspan]) {
    position:sticky!important;left:0!important;width:24px!important;min-width:24px!important;max-width:24px!important;padding-inline:2px!important;
  }
  body.web-system.web-phone #app-shell #view :is(.sf5-table,.sf8-table)[data-web-mobile-grid] :is(th,td):nth-child(2):not([colspan]) {
    position:sticky!important;left:24px!important;width:var(--web-name-width)!important;min-width:var(--web-name-width)!important;max-width:var(--web-name-width)!important;
  }
  body.web-system.web-phone #app-shell #view table[data-web-mobile-grid] .student-name {display:block!important;min-width:0!important;}
  body.web-system.web-phone #app-shell #view table[data-web-mobile-grid] .student-name .avatar {display:none!important;}
  body.web-system.web-phone #app-shell #view table[data-web-mobile-grid] :is(.student-name>div,.student-name strong,.student-name small,.sf2-app-sticky strong) {
    display:block!important;min-width:0!important;max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;word-break:normal!important;
  }
  body.web-system.web-phone #app-shell #view table[data-web-mobile-grid] small {font-size:9px!important;line-height:1.2!important;overflow-wrap:anywhere;}
  body.web-system.web-phone #app-shell #view table[data-web-mobile-grid] .subweight {margin:0!important;padding:2px!important;}
  body.web-system.web-phone #app-shell #view table[data-web-mobile-grid] td.sticky-col {display:table-cell!important;}
  body.web-system.web-phone #app-shell #view table[data-web-mobile-grid] :is(input:not([type="checkbox"]):not([type="radio"]),select) {
    box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;min-height:34px!important;padding:4px 2px!important;font-size:16px!important;text-align:center!important;
  }
  body.web-system.web-phone #app-shell #view table[data-web-mobile-grid] :is(.tag,.sf5-action) {min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere;padding:3px!important;}
  body.web-system.web-phone #app-shell #view :is(.smart-sis-table-wrap,.gradebook-wrap,.sf2-workspace-scroll,.sf5-table-shell,.sf8-table-shell,.mapeh-table-wrap,.analysis-scroll) {max-width:100%!important;overflow:auto!important;scrollbar-gutter:auto!important;}

  /* Rows distribute whole controls evenly without wrapping Grade Sheet labels. */
  body.web-system.web-phone #app-shell .route-smartsis :is(.heading-actions,.g2to10-grade-sheet-summary-toolbar,.sshs-grade-sheet-summary-toolbar) {display:flex!important;flex-wrap:wrap!important;gap:8px!important;width:100%!important;}
  body.web-system.web-phone #app-shell .route-smartsis :is(.heading-actions,.g2to10-grade-sheet-toolbar,.sshs-grade-sheet-toolbar,.g2to10-grade-sheet-summary-toolbar,.sshs-grade-sheet-summary-toolbar) .button {flex:1 0 auto!important;width:auto!important;max-width:100%!important;}
  body.web-system.web-phone #app-shell .route-smartsis .summary-tabs {flex:1 1 100%!important;}
  body.web-system.web-phone #app-shell .route-smartsis .summary-tabs button {flex:1 1 auto!important;}
  body.web-system.web-phone #app-shell :is(.heading-actions .jhs-eclass-actions,.heading-actions .sshs-eclass-actions,.sf9-heading-actions) {gap:8px!important;align-items:stretch!important;}
  body.web-system.web-phone #app-shell :is(.heading-actions .jhs-eclass-actions,.heading-actions .sshs-eclass-actions,.sf9-heading-actions)>.button {margin:0!important;min-height:40px!important;padding:8px!important;font-size:11px!important;}
  body.web-system.web-phone.sheet-wide #app-shell #view.sheet-view.route-smartsis {padding:0!important;}
  body.web-system.web-phone.sheet-wide #app-shell #view.sheet-view {padding:0!important;min-height:0!important;}
  body.web-system.web-phone.sheet-wide #app-shell #view.sheet-view>:is(.page-heading,.smart-tools,.summary-toolbar,.gradebook-controls,.record-controls,.analysis-controls,.mapeh-controls,.sf2-workspace-toolbar,.sf5-toolbar,.sf8-toolbar) {display:none!important;}
  body.web-system.web-phone.sheet-wide #app-shell #view.sheet-view>:is(.gradebook-wrap,.smart-sis-table-wrap,.mapeh-table-wrap,.sf2-workspace-scroll,.analysis-scroll) {height:100%!important;min-height:0!important;max-height:100%!important;}
  body.web-system.web-phone.sheet-wide #app-shell .topbar {
    position:fixed!important;inset:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) auto auto!important;
    display:block!important;width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;
    border:0!important;background:transparent!important;box-shadow:none!important;z-index:300!important;
  }
  body.web-system.web-phone.sheet-wide #app-shell .topbar>:not(#sheet-wide-exit) {display:none!important;}
  body.web-system.web-phone.sheet-wide #app-shell #sheet-wide-exit {display:grid!important;place-items:center!important;inset:0!important;width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;margin:0!important;box-shadow:none!important;}
}
@media screen and (max-width:1100px) {
  body.web-system:not(.web-tablet-desktop) #web-menu-button {display:flex;}
}

/* v1.0.23: unclipped tablet branding and keyboard/browser workspace history. */
@media screen {
  body.web-system #app-shell:not(.sidebar-collapsed) .sidebar-release .sidebar-tagline {
    white-space:nowrap!important;font-size:10px!important;letter-spacing:0!important;
  }
  body.web-system.web-tablet #app-shell:not(.sidebar-collapsed) .sidebar .brand-copy small {
    overflow:visible!important;white-space:nowrap!important;font-size:8px!important;letter-spacing:.08em!important;
  }
  body.web-system.web-tablet:not(.web-tablet-desktop) #app-shell .sidebar .brand {
    grid-template-columns:48px minmax(0,1fr)!important;padding-right:26px!important;
  }
}

/* Offline notes appear temporarily at the bottom without changing page layout. */
.web-offline-popup {
  position:fixed;z-index:10000;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%);box-sizing:border-box;
  width:max-content;max-width:min(560px,calc(100vw - 32px));
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--surface,#fff);color:var(--ink,#18213f);
  border:1px solid var(--line,#d5e1eb);border-radius:10px;
  box-shadow:0 4px 16px rgba(24,33,63,.14);
}
.web-offline-popup[hidden]{display:none!important}
.web-offline-popup p{margin:0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.web-offline-popup-close{flex:none;width:32px;height:32px;border:0;border-radius:6px;background:transparent;color:inherit;font-size:22px;cursor:pointer}
.web-offline-popup-close:focus-visible{outline:2px solid #60739f;outline-offset:2px}
@media print{.web-offline-popup{display:none!important}}

/* Keep transfer actions together; prepare offline access starts the next row. */
body.web-system #app-shell .settings-card-footer.web-transfer-actions {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px!important;align-items:stretch;
}
body.web-system #app-shell .settings-card-footer.web-transfer-actions .button {
  min-width:0!important;min-height:36px;white-space:nowrap!important;
}
body.web-system #app-shell .settings-card-footer.web-transfer-actions [data-web-prepare-offline] {
  grid-column:1 / -1;justify-self:stretch;width:100%!important;
}
@media(max-width:560px) {
  body.web-system #app-shell .settings-card-footer.web-transfer-actions .button {
    font-size:clamp(10px,2.6vw,12px)!important;padding:8px 6px!important;
  }
}

/* Offline preparation reuses the existing AcadMates loader and bottom notice. */
.web-offline-popup[data-state="success"]{border-color:#479b80;background:#effaf5;color:#174d39}
.web-preview-badge{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:1010;padding:5px 12px;border:1px solid #c2d8d5;border-radius:5px;background:#f0faf8;color:#244d49;font-size:10px;line-height:1.4;pointer-events:none;white-space:nowrap}
@media print{.web-preview-badge{display:none!important}}

/* v1.5.0 PWA onboarding. A lightweight nonmodal invitation, not a forced install. */
.web-install-welcome{position:fixed;z-index:10035;right:max(15px,env(safe-area-inset-right));bottom:max(15px,env(safe-area-inset-bottom));box-sizing:border-box;width:min(415px,calc(100vw - 30px));display:grid;gap:14px;padding:18px 19px;border:1px solid #c7d9e5;border-radius:16px;background:#fff;color:#1a2944;box-shadow:0 12px 38px rgba(10,28,55,.20);font-family:Inter,system-ui,sans-serif}
.web-install-welcome[hidden]{display:none!important}
.web-install-welcome-copy strong{display:block;font-size:16px;line-height:1.35;font-weight:730;color:#152541}
.web-install-welcome-copy p{font-size:13px;line-height:1.55;color:#516179;margin:7px 0 0}
.web-install-welcome-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.web-install-welcome-primary,.web-install-welcome-later{font:inherit;font-size:13px;font-weight:650;border-radius:9px;min-height:41px;padding:9px 16px;cursor:pointer}
.web-install-welcome-primary{display:flex;align-items:center;gap:8px;background:#173d68;border:1px solid #173d68;color:#fff}
.web-install-welcome-primary svg{width:16px;height:16px;fill:currentColor}
.web-install-welcome-later{border:1px solid #d0d8e1;background:#fff;color:#334b68}
.web-install-welcome button:focus-visible{outline:2px solid #087b80;outline-offset:3px}
@media(max-width:480px){.web-install-welcome{right:12px;left:12px;width:auto;bottom:max(12px,env(safe-area-inset-bottom));padding:14px 16px}.web-install-welcome-copy strong{font-size:15px}.web-install-welcome-copy p{font-size:12px}}
@media(prefers-reduced-motion:no-preference){.web-install-welcome{animation:web-install-appear .16s ease-out}@keyframes web-install-appear{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}