/* STAND-HF design system for the Blazor client.
   Ported from the HTML demo's assets/base.css (the client-approved look) with every class and CSS variable
   prefixed `sh-` / `--sh-`, so it cannot collide with Bootstrap or the older dark-theme pages.
   Section 1-3: tokens, icon font, page base (hand-written). Section 4: rules ported by script. Section 5: Blazor additions. */
/* Roboto, self-hosted (same file as the demo) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/roboto.woff2') format('woff2');
}

/* 1. Tokens (same values as the demo; the logo palette is the permanent default) */
:root {
  --sh-bg: #eceef1;
  --sh-card: #ffffff;
  --sh-soft: #f4f5f7;
  --sh-soft-2: #e9ecf0;
  --sh-line: #e3e6eb;
  --sh-border: var(--sh-line);
  --sh-ink: #1b1d22;
  --sh-ink-2: #5b616d;
  --sh-ink-3: #8a919e;
  --sh-primary: #C90085;
  --sh-primary-hover: #A8006E;
  --sh-primary-active: #8A0059;
  --sh-primary-soft: #fcf1f7;
  --sh-primary-soft-2: #f7e0ee;
  --sh-primary-border: #f0c5de;
  --sh-on-primary: #ffffff;
  --sh-on-primary-soft: #C90085;
  --sh-success: #1e7a4c;
  --sh-success-soft: #d6f2e2;
  --sh-on-success-soft: #0f4a2c;
  --sh-warning: #9a5b00;
  --sh-warning-soft: #fdeed0;
  --sh-on-warning-soft: #5c3600;
  --sh-error: #b3261e;
  --sh-error-soft: #f9dedc;
  --sh-on-error-soft: #740f0b;
  --sh-brand-magenta: #C90085;
  --sh-brand-pink: #E60057;
  --sh-brand-red: #FF0015;
  --sh-brand-orange: #FF5722;
  --sh-brand-soft: #fcf1f7;
  --sh-brand-gradient: #C90085;
  --sh-brand-gradient-hover: #A8006E;
  --sh-brand-glow: 0 0 0 3px rgba(201, 0, 133, 0.22);
  --sh-radius: 24px;
  --sh-ring: 116px;
  --sh-shadow: 0 1px 2px rgba(60, 64, 67, 0.12), 0 2px 8px rgba(60, 64, 67, 0.08);
  color-scheme: light;
}

/* 2. Icon font (Material Symbols Rounded, self-hosted) */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/material-symbols-rounded.woff2') format('woff2');
}
.sh-ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal;
  font-size: 20px; line-height: 1;
  letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr;
  -webkit-font-smoothing: antialiased; vertical-align: middle;
  font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga';
}

/* 3. Page base: the demo styled <body>; here the app shell root carries it */
.sh-app {
  background: var(--sh-bg);
  color: var(--sh-ink);
  font: 14px/1.45 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
.sh-app [hidden] { display: none !important; }

/* 3b. The client also loads Bootstrap, whose "reboot" restyles bare elements (heading line height, paragraph and list
   margins, link colour, table borders ...). The demo has no Bootstrap, so inside the new pages and shell these elements
   go back to the browser's own defaults first; the demo's rules below then apply on top, exactly as they do in the demo.
   :where() keeps this at the lowest specificity, and the legacy pages are never inside these containers. */
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, b, strong, small, a, label, table, caption, thead, tbody, tr, th, td, code, pre, hr, button, input, select, textarea, fieldset, legend, abbr, img, svg) {
  all: revert;
  box-sizing: border-box;
}

/* 4. The demo's whole base.css, ported by script (classes and variables prefixed sh-) */
.sh-btn.sh-primary { background: var(--sh-primary); border-color: var(--sh-primary-hover); color: #ffffff; box-shadow: 0 1px 3px rgba(201, 0, 133, 0.28); }
.sh-btn.sh-primary:hover { background: var(--sh-primary-hover); border-color: var(--sh-primary-active); box-shadow: 0 2px 8px rgba(201, 0, 133, 0.38); }
.sh-side .sh-nav.sh-active,
.sh-nav.sh-active { background: #1b1d22; color: #ffffff; font-weight: 500; }
.sh-side .sh-nav.sh-active .sh-ms,
.sh-nav.sh-active .sh-ms { color: #ffffff; }
.sh-admin-tab.sh-active,
.sh-dash-tab.sh-active { background: #1b1d22 !important; color: #ffffff !important; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.sh-admin-tab.sh-active .sh-ms,
.sh-admin-tab.sh-active span,
.sh-dash-tab.sh-active .sh-ms,
.sh-dash-tab.sh-active span { color: #ffffff !important; }
.sh-admin-tab.sh-active .sh-tab-badge,
.sh-dash-tab.sh-active .sh-tab-badge { background: var(--sh-primary) !important; color: #ffffff !important; }
.sh-pt.sh-on,
.sh-pitem.sh-active,
.sh-pitem.sh-on { background: #1b1d22 !important; color: #ffffff !important; border-color: #1b1d22 !important; }
.sh-pt.sh-on b,
.sh-pitem.sh-active b,
.sh-pitem.sh-on b { color: #ffffff !important; }
.sh-pt.sh-on small,
.sh-pt.sh-on .sh-muted,
.sh-pitem.sh-active small,
.sh-pitem.sh-active .sh-muted,
.sh-pitem.sh-on small,
.sh-pitem.sh-on .sh-muted,
.sh-pt.sh-on span.sh-pt-updated,
.sh-pt.sh-on span.sh-pt-inv,
.sh-pt.sh-on span.sh-sr-only { color: #b7bcc6 !important; }
.sh-pitem.sh-on .sh-avatar,
.sh-pitem.sh-active .sh-avatar { background: #2d3138; color: #ffffff; }
.sh-tabs button.sh-on,
.sh-tabs button.sh-done.sh-on,
.sh-tab.sh-on,
.sh-v-tab.sh-on { background: #1b1d22 !important; border-color: #1b1d22 !important; color: #ffffff !important; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.sh-tabs button.sh-done.sh-on .sh-ms { color: #4ade80 !important; }
.sh-tabs button.sh-done.sh-on span { color: #ffffff !important; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) input:focus,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) select:focus,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) textarea:focus,
.sh-cb:focus-within [data-cb-input] { border-color: var(--sh-primary); box-shadow: var(--sh-brand-glow); }
.sh-search input,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-search input,
.sh-search-expandable input,
.sh-search input:focus,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-search input:focus,
.sh-search-expandable input:focus,
.sh-search input:focus-visible,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-search input:focus-visible,
.sh-search-expandable input:focus-visible { border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; }
.sh-site-badge { background: #fcf1f7; color: var(--sh-primary); border-color: #f0c5de; font-weight: 600; }
.sh-assigned-site-card-active { border-color: var(--sh-primary); background: #ffffff; }
.sh-assigned-site-card-active .sh-site-badge { background: var(--sh-primary); color: #ffffff; border-color: transparent; }
.sh-scope-callout.sh-admin { border-left-color: var(--sh-primary); background: #fcf1f7; }
.sh-admin-user-avatar.sh-superadmin { background: var(--sh-primary); color: #ffffff; }
.sh-search:focus-within,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-search:focus-within,
.sh-search-expandable:focus-within { border-color: var(--sh-primary) !important; box-shadow: var(--sh-brand-glow) !important; background: var(--sh-card) !important; }
.sh-list-count { background: var(--sh-primary); color: #ffffff; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) input,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) select { font: inherit; color: inherit; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) a { color: inherit; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border: 1px solid var(--sh-line); border-radius: 14px; background: var(--sh-card); color: var(--sh-ink); font-weight: 500; cursor: pointer; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button:hover { background: var(--sh-soft); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button:disabled { opacity: 0.45; cursor: not-allowed; background: var(--sh-card); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button:focus-visible,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) a:focus-visible,
.sh-nav:focus-visible { outline: 2px solid var(--sh-primary); outline-offset: 2px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button.sh-danger { color: var(--sh-error); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button.sh-pri,
.sh-btn.sh-primary { background: var(--sh-primary); border-color: var(--sh-primary); color: var(--sh-on-primary); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button.sh-pri:hover,
.sh-btn.sh-primary:hover { background: var(--sh-primary-hover); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button .sh-ms { font-size: 18px; }
.sh-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 14px; border: 1px solid var(--sh-line); background: var(--sh-card); color: var(--sh-ink); text-decoration: none; font-weight: 500; cursor: pointer; }
.sh-btn:hover { background: var(--sh-soft); }
.sh-btn .sh-ms { font-size: 20px; }
.sh-btn-sm { min-height: 32px; padding: 5px 12px; font-size: 12.5px; border-radius: 10px; gap: 6px; }
.sh-btn-sm .sh-ms { font-size: 16px; }
.sh-icon-btn { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sh-ink-2); }
.sh-icon-btn:hover { background: var(--sh-soft-2); color: var(--sh-ink); }
.sh-icon-btn .sh-ms { margin: 0; }
.sh-app { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 16px; padding: 8px; min-height: 100vh; align-items: start; transition: grid-template-columns 0.2s ease; }
.sh-app.sh-collapsed { grid-template-columns: 84px minmax(0, 1fr); }
.sh-side { position: sticky; top: 8px; height: calc(100vh - 16px); background: var(--sh-card); border-radius: var(--sh-radius); box-shadow: var(--sh-shadow); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overflow-x: hidden; }
.sh-side-top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 12px; }
.sh-logo { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: var(--sh-primary); color: #fff; display: grid; place-items: center; }
.sh-logo .sh-ms { font-size: 24px; }
.sh-side-toggle { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--sh-ink-2); }
.sh-side-toggle:hover { background: var(--sh-soft); }
.sh-side-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sh-ink-3); padding: 16px 12px 8px; }
.sh-nav { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 14px; background: transparent; color: var(--sh-ink-2); text-decoration: none; font-size: 15px; text-align: left; cursor: pointer; }
.sh-nav:hover { background: var(--sh-soft); color: var(--sh-ink); }
.sh-nav .sh-ms { font-size: 22px; }
.sh-nav.sh-active,
.sh-nav[aria-current="true"] { background: var(--sh-ink); color: #fff; font-weight: 500; }
.sh-nav.sh-danger { color: var(--sh-error); }
.sh-side-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1025px) {
  .sh-app.sh-collapsed .sh-side { padding: 20px 10px; }
  .sh-app.sh-collapsed .sh-side-label { display: none; }
  .sh-app.sh-collapsed .sh-side-top { justify-content: center; flex-direction: column; gap: 8px; }
  .sh-app.sh-collapsed .sh-logo.sh-logo-img img { max-width: 54px; max-height: 28px; height: auto; margin: 0 auto; }
  .sh-app.sh-collapsed .sh-nav { justify-content: center; padding: 11px 0; }
  .sh-app.sh-collapsed .sh-side-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.sh-side-sponsor { margin-top: auto; padding: 14px 4px 6px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-top: 1px solid var(--sh-line); box-sizing: border-box; flex-shrink: 0; }
.sh-sponsor-card { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; box-sizing: border-box; }
.sh-sponsor-img { display: block; width: 100%; max-width: 154px; height: auto; max-height: 48px; object-fit: contain; transition: max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, transform 0.2s ease; user-select: none; }
.sh-sponsor-img:hover { transform: translateY(-1px); }
@media (min-width: 1025px) {
  .sh-app.sh-collapsed .sh-side-sponsor { padding: 10px 0 4px; border-top: 1px solid var(--sh-line); }
  .sh-app.sh-collapsed .sh-sponsor-card { padding: 4px 0; }
  .sh-app.sh-collapsed .sh-sponsor-img { display: block !important; max-width: 58px; max-height: 24px; margin: 0 auto; }
}
@media (min-width: 1025px) {
  .sh-side { padding: clamp(6px, 2.4vh, 20px) 14px; gap: clamp(0px, 0.4vh, 4px); }
  .sh-app.sh-collapsed .sh-side { padding: clamp(6px, 2.4vh, 20px) 10px; }
  .sh-side-top,
  .sh-app.sh-collapsed .sh-side-top { padding: 0 6px clamp(4px, 1.2vh, 12px); }
  .sh-side-top .sh-logo.sh-logo-img img { height: auto; max-height: clamp(20px, 4vh, 44px); }
  .sh-side-toggle { width: clamp(24px, 3.8vh, 36px); height: clamp(24px, 3.8vh, 36px); }
  .sh-side .sh-side-label { padding: clamp(0px, 1.2vh, 16px) 12px clamp(0px, 0.6vh, 8px); font-size: clamp(8px, 1.1vh, 11px); line-height: 1.2; }
  .sh-side .sh-nav,
  .sh-app.sh-collapsed .sh-side .sh-nav { padding: clamp(2px, 0.9vh, 11px) 12px; font-size: clamp(11px, 1.8vh, 15px); line-height: 1.15; border-radius: clamp(8px, 1.6vh, 14px); gap: clamp(6px, 1.3vh, 12px); }
  .sh-app.sh-collapsed .sh-side .sh-nav { padding: clamp(2px, 0.9vh, 11px) 0; }
  .sh-side .sh-nav .sh-ms { font-size: clamp(13px, 2.7vh, 22px); width: clamp(13px, 2.7vh, 22px); height: clamp(13px, 2.7vh, 22px); }
  .sh-side .sh-side-sponsor,
  .sh-app.sh-collapsed .sh-side .sh-side-sponsor { padding: clamp(2px, 0.8vh, 14px) 4px clamp(2px, 0.5vh, 6px); }
  .sh-side .sh-sponsor-card,
  .sh-app.sh-collapsed .sh-side .sh-sponsor-card { padding: 0; }
  .sh-side .sh-sponsor-img { max-height: clamp(12px, 4.4vh, 48px); }
  .sh-app.sh-collapsed .sh-side .sh-sponsor-img { max-height: clamp(12px, 3.4vh, 24px); }
}
.sh-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sh-topbar { display: flex; align-items: center; gap: 12px; background: var(--sh-card); border-radius: var(--sh-radius); box-shadow: var(--sh-shadow); padding: 10px 12px 10px 16px; }
.sh-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 10px; background: var(--sh-soft); border-radius: 12px; padding: 0 12px; height: 38px; margin: 0; font-size: 14px; font-weight: 400; color: var(--sh-ink); border: 1.5px solid transparent; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.sh-search:focus-within { border-color: var(--sh-primary); background: var(--sh-card); box-shadow: 0 0 0 3px var(--sh-brand-soft); }
.sh-search .sh-ms { color: var(--sh-ink-3); }
.sh-topbar .sh-search { flex: 0 1 320px; }
.sh-topbar { position: relative; }
.sh-search-expandable { position: relative; display: inline-flex; align-items: center; height: 38px; width: 38px; min-width: 38px; border-radius: 999px; background: var(--sh-soft); border: 1.5px solid transparent; overflow: hidden; transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease; cursor: pointer; vertical-align: middle; flex: none; }
.sh-search-expandable:hover { background: var(--sh-line); }
.sh-search-expandable .sh-search-icon { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--sh-ink-2); background: transparent; border: none; cursor: pointer; padding: 0; margin: 0; font-size: 18px; outline: none; }
.sh-search-expandable input[type="search"] { flex: 1; min-width: 0; height: 100%; border: none !important; outline: none !important; background: transparent !important; color: var(--sh-ink); font-size: 13.5px; padding: 0 6px 0 2px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.sh-search-expandable input[type="search"]::-webkit-search-cancel-button,
.sh-search-expandable input[type="search"]::-webkit-search-decoration,
.sh-search-expandable input[type="search"]::-webkit-search-results-button,
.sh-search-expandable input[type="search"]::-webkit-search-results-decoration,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-search input[type="search"]::-webkit-search-cancel-button,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-search input[type="search"]::-webkit-search-decoration,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) input[type="search"]::-webkit-search-cancel-button,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) input[type="search"]::-webkit-search-decoration { -webkit-appearance: none !important; appearance: none !important; display: none !important; width: 0 !important; height: 0 !important; }
.sh-search-expandable input[type="search"]::-ms-clear,
.sh-search-expandable input[type="search"]::-ms-reveal,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-search input[type="search"]::-ms-clear,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) input[type="search"]::-ms-clear { display: none !important; width: 0 !important; height: 0 !important; }
.sh-search-expandable .sh-search-clear { display: none; width: 26px; height: 26px; margin-right: 6px; border: none; background: var(--sh-soft); color: var(--sh-ink-2); border-radius: 50%; cursor: pointer; align-items: center; justify-content: center; font-size: 15px; padding: 0; flex: none; }
.sh-search-expandable .sh-search-clear:hover { background: var(--sh-line); color: var(--sh-ink); }
.sh-search-expandable.sh-is-expanded,
.sh-search-expandable:focus-within,
.sh-search-expandable.sh-has-value,
.sh-search-expandable:has(input:not(:placeholder-shown)) { width: clamp(140px, 18vw, 220px); max-width: 100%; flex-shrink: 1; min-width: 44px; cursor: default; background: var(--sh-card); border-color: var(--sh-primary); box-shadow: 0 0 0 3px var(--sh-brand-soft); border-radius: 12px; }
.sh-search-expandable.sh-is-expanded input[type="search"],
.sh-search-expandable:focus-within input[type="search"],
.sh-search-expandable.sh-has-value input[type="search"],
.sh-search-expandable:has(input:not(:placeholder-shown)) input[type="search"] { opacity: 1; pointer-events: auto; }
.sh-search-expandable.sh-has-value .sh-search-clear,
.sh-search-expandable:has(input:not(:placeholder-shown)) .sh-search-clear { display: flex; }
.sh-notify { position: relative; }
.sh-notify-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 380px; max-width: 92vw; max-height: 70vh; overflow: auto; background: var(--sh-card); border-radius: 18px; box-shadow: var(--sh-shadow); padding: 14px; z-index: 150; }
.sh-notify-panel[hidden] { display: none; }
.sh-np-head { display: flex; align-items: center; gap: 8px; margin: 2px 4px 10px; font-size: 15px; }
.sh-np-head .sh-np-all { margin-left: auto; font-size: 13px; }
.sh-np-item { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px; margin-bottom: 4px; border: 0; border-radius: 14px; background: transparent; color: var(--sh-ink); font: inherit; text-align: left; cursor: pointer; }
.sh-np-item:hover { background: var(--sh-soft); }
.sh-np-item.sh-unread { background: var(--sh-primary-soft); color: var(--sh-on-primary-soft); }
.sh-np-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--sh-soft); color: var(--sh-ink-2); }
.sh-np-ico.sh-np-overdue { background: var(--sh-error-soft); color: var(--sh-error); }
.sh-np-ico.sh-np-due { background: var(--sh-primary-soft); color: var(--sh-primary); }
.sh-np-ico.sh-np-missing { background: var(--sh-warning-soft); color: var(--sh-warning); }
.sh-np-body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.sh-np-top { display: flex; align-items: center; gap: 8px; }
.sh-np-top b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.sh-np-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sh-primary); flex: none; }
.sh-np-text { font-size: 13px; color: var(--sh-ink-2); line-height: 1.4; }
.sh-np-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.sh-np-site { font-size: 12px; font-weight: 600; color: var(--sh-ink-2); background: var(--sh-card); border: 1px solid var(--sh-line); padding: 1px 8px; border-radius: 999px; }
.sh-np-meta small { font-size: 12px; color: var(--sh-ink-3); }
.sh-tag.sh-np-warn { background: var(--sh-warning-soft); color: var(--sh-on-warning-soft); }
.sh-np-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 8px; color: var(--sh-ink-2); font-size: 14px; text-align: center; }
.sh-np-empty .sh-ms { font-size: 32px; color: var(--sh-ink-3); }
.sh-topbar .sh-pill { margin-left: auto; }
.sh-topbar .sh-segment { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0; border-radius: 0; font-size: 15px; }
.sh-segment { display: flex; background: var(--sh-soft); border-radius: 14px; padding: 4px; gap: 2px; }
.sh-segment button { border: 0; background: transparent; padding: 8px 14px; border-radius: 10px; color: var(--sh-ink-2); }
.sh-segment button.sh-on { background: var(--sh-ink); color: #fff; }
.sh-profile { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 16px; background: var(--sh-soft); }
.sh-avatar { width: 40px; height: 40px; min-width: 40px; min-height: 40px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--sh-primary-soft); color: var(--sh-on-primary-soft); font-weight: 600; font-size: 14px; }
.sh-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; aspect-ratio: 1 / 1; }
.sh-profile-meta { line-height: 1.2; }
.sh-profile-meta b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; }
.sh-profile-meta span { font-size: 12px; color: var(--sh-ink-3); }
.sh-bell { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--sh-soft); display: grid; place-items: center; }
.sh-bell .sh-badge { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sh-error); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.sh-hello { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 4px 2px 2px; margin: 0; }
.sh-hello h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sh-hello p { margin: 4px 0 0; color: var(--sh-ink-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sh-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sh-card { background: var(--sh-card); border-radius: var(--sh-radius); box-shadow: var(--sh-shadow); padding: 22px 24px; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; border: 1px solid var(--sh-line); margin: 0; }
.sh-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: nowrap; position: relative; min-width: 0; max-width: 100%; box-sizing: border-box; }
.sh-card-head > div:first-child:not(.sh-card-head-actions),
.sh-card-title-group { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.sh-card-head h2,
.sh-card-title-group h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sh-card-head small,
.sh-card-title-group small { display: block; color: var(--sh-ink-3); font-size: 13px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sh-card-head-actions,
.sh-card-head > div[style*="display:flex"],
.sh-card-head > div:last-child:not(:first-child) { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; max-width: 100%; box-sizing: border-box; flex-wrap: nowrap !important; }
.sh-card-head-actions > .sh-btn,
.sh-card-head-actions > a.sh-btn,
.sh-card-head-actions > button,
.sh-card-head-actions > .sh-tag,
.sh-card-head-actions > .sh-badge { flex-shrink: 0; }
.sh-card-head-actions .sh-search-expandable.sh-is-expanded,
.sh-card-head-actions .sh-search-expandable:focus-within,
.sh-card-head-actions .sh-search-expandable.sh-has-value,
.sh-card-head-actions .sh-search-expandable:has(input:not(:placeholder-shown)) { flex: 1 1 auto; min-width: 110px; width: clamp(130px, 18vw, 210px); max-width: 100%; flex-shrink: 1; }
.sh-audit-head-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; flex-wrap: nowrap; position: relative; min-width: 0; }
.sh-audit-head-title { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.sh-dash-subhead-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: nowrap; gap: 8px; position: relative; min-width: 0; }
.sh-dash-subhead-bar > div:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 680px) {
  .sh-card-head,
  .sh-audit-head-bar,
  .sh-dash-subhead-bar { position: relative !important; }
  .sh-card-head-actions { position: static; }
  .sh-card-head .sh-search-expandable.sh-is-expanded,
  .sh-card-head .sh-search-expandable:focus-within,
  .sh-card-head-actions .sh-search-expandable.sh-is-expanded,
  .sh-card-head-actions .sh-search-expandable:focus-within,
  .sh-audit-head-bar .sh-search-expandable.sh-is-expanded,
  .sh-audit-head-bar .sh-search-expandable:focus-within,
  .sh-dash-subhead-bar .sh-search-expandable.sh-is-expanded,
  .sh-dash-subhead-bar .sh-search-expandable:focus-within { position: absolute !important; right: 0 !important; top: 0 !important; bottom: 0 !important; left: 0 !important; margin: auto 0 !important; width: 100% !important; max-width: 100% !important; height: 38px !important; z-index: 30 !important; background: var(--sh-card) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14), 0 0 0 2px var(--sh-brand-soft) !important; border-radius: 12px !important; border-color: var(--sh-primary) !important; }
  .sh-search-expandable.sh-has-value .sh-search-clear,
  .sh-search-expandable:has(input:not(:placeholder-shown)) .sh-search-clear { display: flex !important; }
}
.sh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 0; }
.sh-kpi { background: var(--sh-card); border-radius: var(--sh-radius); box-shadow: var(--sh-shadow); padding: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 1px solid var(--sh-line); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.sh-kpis.sh-auto { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.sh-kpi .sh-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; }
.sh-kpi .sh-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--sh-soft); color: var(--sh-ink-2); }
.sh-kpi b { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.sh-kpi span { color: var(--sh-ink-2); font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sh-kpi small { font-size: 12px; color: var(--sh-ink-3); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sh-tag { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.sh-tag.sh-good { background: var(--sh-success-soft); color: var(--sh-on-success-soft); }
.sh-tag.sh-warn { background: var(--sh-warning-soft); color: var(--sh-on-warning-soft); }
.sh-tag.sh-bad { background: var(--sh-error-soft); color: var(--sh-on-error-soft); }
.sh-tag.sh-info { background: var(--sh-primary-soft); color: var(--sh-on-primary-soft); }
.sh-row { display: grid; gap: 20px; margin: 0; }
.sh-row.sh-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.sh-row.sh-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.9fr); }
.sh-row.sh-two-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sh-muted { color: var(--sh-ink-3); }
.sh-mut { color: var(--sh-ink-3); }
.sh-empty { text-align: center; padding: 26px 10px; color: var(--sh-ink-3); }
.sh-empty .sh-ms { font-size: 34px; display: block; margin-bottom: 6px; }
.sh-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sh-ring-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sh-ring-wrap { position: relative; }
.sh-ring-wrap svg { display: block; width: var(--sh-ring); height: var(--sh-ring); }
.sh-ring-wrap .sh-pct { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: var(--sh-ring); height: var(--sh-ring); display: grid; place-items: center; font-size: 20px; font-weight: 600; }
.sh-ring-wrap .sh-lbl { font-size: 13px; font-weight: 600; color: var(--sh-ink); margin: 10px 0 0; }
.sh-ring-wrap .sh-cnt { font-size: 12px; color: var(--sh-ink-3); }
.sh-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--sh-ink-2); margin-top: 12px; }
.sh-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.sh-chart { width: 100%; height: 200px; }
.sh-plist { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; padding-right: 2px; }
.sh-pitem { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 18px; border: 0; background: var(--sh-soft); text-align: left; cursor: pointer; color: var(--sh-ink); }
.sh-pitem:hover { background: var(--sh-soft-2); }
.sh-pitem.sh-on { background: var(--sh-ink); color: #fff; }
.sh-pitem.sh-on small,
.sh-pitem.sh-on .sh-muted { color: #b7bcc6; }
.sh-pitem .sh-avatar { width: 42px; height: 42px; }
.sh-pitem.sh-on .sh-avatar { background: #2d3138; color: #fff; }
.sh-pitem-body { flex: 1; min-width: 0; }
.sh-pitem-body b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-pitem-body small { color: var(--sh-ink-3); font-size: 12px; }
.sh-pitem .sh-side-info { text-align: right; font-size: 12px; white-space: nowrap; }
.sh-chip { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: var(--sh-soft); color: var(--sh-ink-2); white-space: nowrap; }
.sh-chip.sh-Completed { background: #e6f4ea !important; color: #137333 !important; }
.sh-chip.sh-Overdue { background: #fee2e2 !important; color: #dc2626 !important; }
.sh-chip.sh-Missed { background: #fef2f2 !important; color: #991b1b !important; }
.sh-chip.sh-In,
.sh-chip.sh-Pending { background: #e8f0fe !important; color: #1a5fb4 !important; }
.sh-chip.sh-Not { background: #f1f3f5 !important; color: #6c757d !important; }
.sh-pitem.sh-on .sh-chip { background: #2d3138; color: #fff; }
.sh-sel-head { display: flex; align-items: center; gap: 14px; }
.sh-sel-head .sh-avatar { width: 56px; height: 56px; font-size: 18px; }
.sh-sel-head h3 { margin: 0; font-size: 20px; font-weight: 600; }
.sh-sel-head small { color: var(--sh-ink-3); }
.sh-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.sh-fact { background: var(--sh-soft); border-radius: 16px; padding: 12px 14px; }
.sh-fact small { display: block; color: var(--sh-ink-3); font-size: 12px; }
.sh-fact b { font-size: 18px; font-weight: 600; }
.sh-visits { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sh-visit { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--sh-line); }
.sh-visit b { font-weight: 600; }
.sh-visit small { color: var(--sh-ink-3); font-size: 12px; display: block; }
.sh-visit-btn { color: var(--sh-primary); font-weight: 500; text-decoration: none; padding: 6px 4px; }
.sh-sel-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.sh-upc { display: flex; flex-direction: column; gap: 8px; max-height: 470px; overflow-y: auto; }
.sh-upc-item { display: grid; grid-template-columns: 4px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--sh-soft); width: 100%; border: 0; text-align: left; cursor: pointer; }
.sh-upc-item i { height: 100%; min-height: 28px; border-radius: 4px; background: var(--sh-primary); }
.sh-upc-item.sh-Overdue i,
.sh-upc-item.sh-Missed i { background: var(--sh-error); }
.sh-upc-item.sh-Due i { background: var(--sh-warning); }
.sh-upc-item.sh-Completed i { background: var(--sh-success); }
.sh-upc-item b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-upc-item small { color: var(--sh-ink-3); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-table-wrap,
.sh-wrap { overflow-x: auto; border-radius: 14px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) th,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--sh-line); white-space: nowrap; vertical-align: middle; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td:has(.sh-btn),
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td:has(button),
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td:has(.sh-actions),
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td.sh-actions,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td.sh-table-actions,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) th:has(.sh-btn),
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) th:has(button),
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) th:has(.sh-actions),
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) th.sh-actions { max-width: none; overflow: visible; text-overflow: clip; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) th { padding: 11px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sh-ink-3); background: var(--sh-card); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td.sh-num,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) th.sh-num { text-align: right; font-variant-numeric: tabular-nums; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) tr:last-child td { border-bottom: 0; }
.sh-metric { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sh-line); }
.sh-metric:last-child { border-bottom: 0; }
.sh-metric span { color: var(--sh-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.sh-metric b { font-size: 17px; font-weight: 600; flex-shrink: 0; white-space: nowrap; }
.sh-metric b.sh-good { color: var(--sh-success); }
.sh-metric b.sh-warn { color: var(--sh-warning); }
.sh-metric b.sh-bad { color: var(--sh-error); }
.sh-lay { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.sh-pl { max-height: calc(100vh - 230px); overflow-y: auto; padding: 14px; }
.sh-list-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 12px; margin-bottom: 8px; background: var(--sh-card); border-bottom: 1px solid var(--sh-line); font-size: 16px; font-weight: 600; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button.sh-list-head { width: 100%; border: 0; border-radius: 0; background: var(--sh-card); color: var(--sh-ink); padding: 4px 4px 12px; font-size: 16px; font-weight: 600; cursor: pointer; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button.sh-list-head:hover { background: var(--sh-card); }
.sh-list-head .sh-chev { font-size: 22px; color: var(--sh-ink-2); transition: transform 0.2s ease; margin-left: auto; }
.sh-list-head .sh-list-count { margin-left: 8px; }
.sh-pl.sh-collapsed { padding-bottom: 8px; }
.sh-pl.sh-collapsed> :not(.sh-list-head) { display: none; }
.sh-pl.sh-collapsed .sh-list-head { margin-bottom: 0; border-bottom: 0; }
.sh-list-count { min-width: 26px; padding: 2px 8px; border-radius: 999px; text-align: center; background: var(--sh-primary-soft); color: var(--sh-on-primary-soft); font-size: 12px; font-weight: 600; }
.sh-pt { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; margin-bottom: 8px; border-radius: 16px; background: var(--sh-soft); cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease; }
.sh-pt:hover { background: var(--sh-soft-2); }
.sh-pt.sh-on { background: var(--sh-ink); color: #fff; }
.sh-pt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.sh-pt b.sh-pt-id,
.sh-pt-head b { font-weight: 700; font-size: 15px; letter-spacing: 0.2px; color: var(--sh-ink); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-pt.sh-on b.sh-pt-id,
.sh-pt.sh-on .sh-pt-head b { color: #ffffff !important; }
.sh-pt-sync { display: inline-flex !important; align-items: center; justify-content: center; gap: 5px; width: auto; height: auto; padding: 3px 9px 3px 7px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 600; line-height: 1.2; white-space: nowrap; flex-shrink: 0; box-sizing: border-box; transition: all 0.2s ease; }
.sh-pt-sync .sh-pt-sync-icon,
.sh-pt-sync .sh-ms { font-size: 15.5px !important; line-height: 1; display: inline-flex !important; align-items: center; justify-content: center; color: inherit !important; }
.sh-pt-sync .sh-pt-sync-text,
.sh-pt-sync span:not(.sh-ms) { display: inline !important; font-size: 11.5px !important; color: inherit !important; line-height: inherit; font-weight: 600; }
.sh-pt-sync.sh-synced { background: #e1fdf1 !important; color: #04773a !important; border: none !important; }
.sh-pt-sync.sh-pending { background: #fef8e3 !important; color: #e28912 !important; border: none !important; }
.sh-pt.sh-on .sh-pt-sync.sh-synced,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-sync.sh-synced { background: #163328 !important; color: #4ade80 !important; border: none !important; }
.sh-pt.sh-on .sh-pt-sync.sh-synced .sh-pt-sync-icon,
.sh-pt.sh-on .sh-pt-sync.sh-synced .sh-pt-sync-text,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-sync.sh-synced .sh-pt-sync-icon,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-sync.sh-synced .sh-pt-sync-text { color: #4ade80 !important; }
.sh-pt.sh-on .sh-pt-sync.sh-pending,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-sync.sh-pending { background: #332918 !important; color: #fbbf24 !important; border: none !important; }
.sh-pt.sh-on .sh-pt-sync.sh-pending .sh-pt-sync-icon,
.sh-pt.sh-on .sh-pt-sync.sh-pending .sh-pt-sync-text,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-sync.sh-pending .sh-pt-sync-icon,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-sync.sh-pending .sh-pt-sync-text { color: #fbbf24 !important; }
@media (max-width: 1024px) {
  .sh-pt-sync { width: 24px !important; height: 24px !important; padding: 0 !important; border-radius: 50% !important; border: none !important; }
  .sh-pt-sync .sh-pt-sync-icon,
  .sh-pt-sync .sh-ms { display: inline-flex !important; font-size: 15px !important; }
  .sh-pt-sync .sh-pt-sync-text,
  .sh-pt-sync span:not(.sh-ms) { display: none !important; }
}
.sh-pt-name { font-size: 13.5px !important; font-weight: 500; color: var(--sh-ink) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.sh-pt.sh-on .sh-pt-name,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-name { color: #ffffff !important; }
.sh-pt-inv { font-size: 12px !important; color: var(--sh-ink-2) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.sh-pt.sh-on .sh-pt-inv,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-inv { color: #d5d9e0 !important; }
.sh-pt-updated { font-size: 11.5px !important; color: var(--sh-ink-3, #717784) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.sh-pt.sh-on .sh-pt-updated,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-updated { color: #b7bcc6 !important; }
.sh-pt-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.sh-pt-chip-sep { width: 1px; height: 16px; background: #e2e8f0; display: inline-block; margin: 0 3px; flex-shrink: 0; }
.sh-pt.sh-on .sh-pt-chip-sep { background: rgba(255, 255, 255, 0.25); }
.sh-pt .sh-chip { display: inline-flex !important; align-items: center; justify-content: center; gap: 0 !important; padding: 3px 9px !important; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.2; margin: 0; white-space: nowrap; box-sizing: border-box; transition: all 0.15s ease; border: 1px solid transparent; }
.sh-pt .sh-chip .sh-chip-ico-wrap { display: none !important; }
.sh-pt .sh-chip b,
.sh-pt .sh-chip b.sh-chip-v { font-weight: 700; font-size: 11.5px; letter-spacing: 0.1px; display: inline !important; color: inherit !important; }
.sh-pt .sh-chip .sh-chip-lbl { display: inline-flex !important; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: inherit !important; }
.sh-pt .sh-chip .sh-chip-txt,
.sh-pt .sh-chip span.sh-chip-txt { font-weight: 500; display: inline !important; color: inherit !important; }
.sh-pt .sh-chip .sh-chip-ico-done { width: 18px; height: 18px; border-radius: 50%; background: #067744; display: inline-flex; align-items: center; justify-content: center; color: #ffffff !important; flex-shrink: 0; }
.sh-pt .sh-chip .sh-chip-ico-done .sh-ms { font-size: 13px !important; font-weight: 700; color: #ffffff !important; line-height: 1; }
.sh-pt .sh-chip .sh-chip-ico-clock { font-size: 18px !important; color: #0778fa !important; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-pt .sh-chip .sh-chip-ico-warn { font-size: 18px !important; color: #f39802 !important; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-pt .sh-chip .sh-chip-ico-not { font-size: 18px !important; color: #637494 !important; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-pt .sh-chip .sh-chip-icon,
.sh-pt .sh-chip .sh-ms { font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sh-chip.sh-Completed,
.sh-chip.sh-Done { background: #e3faee !important; color: #067744 !important; border: 1px solid rgba(6, 119, 68, 0.16) !important; }
.sh-chip.sh-Completed .sh-chip-lbl,
.sh-chip.sh-Done .sh-chip-lbl,
.sh-chip.sh-Completed b,
.sh-chip.sh-Done b { color: #067744 !important; }
.sh-chip.sh-InProgress,
.sh-chip.sh-In { background: #dee8f1 !important; color: #0772ee !important; border: 1px solid rgba(7, 120, 250, 0.18) !important; }
.sh-chip.sh-InProgress .sh-chip-lbl,
.sh-chip.sh-In .sh-chip-lbl,
.sh-chip.sh-InProgress b,
.sh-chip.sh-In b { color: #0772ee !important; }
.sh-chip.sh-Overdue,
.sh-chip.sh-Missed { background: #fef7e8 !important; color: #d97706 !important; border: 1px solid rgba(243, 152, 2, 0.22) !important; }
.sh-chip.sh-Overdue .sh-chip-lbl,
.sh-chip.sh-Missed .sh-chip-lbl,
.sh-chip.sh-Overdue b,
.sh-chip.sh-Missed b { color: #d97706 !important; }
.sh-chip.sh-NotStarted,
.sh-chip.sh-Not { background: #eef2f7 !important; color: #637494 !important; border: 1px solid rgba(99, 116, 148, 0.18) !important; }
.sh-chip.sh-NotStarted .sh-chip-lbl,
.sh-chip.sh-Not .sh-chip-lbl,
.sh-chip.sh-NotStarted b,
.sh-chip.sh-Not b { color: #637494 !important; }
.sh-pt.sh-on .sh-pt-chip-sep,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-chip-sep { background: rgba(255, 255, 255, 0.14) !important; }
.sh-pt.sh-on .sh-chip.sh-Completed,
.sh-pt.sh-on .sh-chip.sh-Done,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Completed,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Done { background: #163328 !important; color: #4ade80 !important; border: 1px solid rgba(52, 211, 153, 0.35) !important; }
.sh-pt.sh-on .sh-chip.sh-Completed .sh-chip-ico-done,
.sh-pt.sh-on .sh-chip.sh-Done .sh-chip-ico-done,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Completed .sh-chip-ico-done,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Done .sh-chip-ico-done { background: #34d399 !important; color: #0f2e1e !important; }
.sh-pt.sh-on .sh-chip.sh-Completed .sh-chip-ico-done .sh-ms,
.sh-pt.sh-on .sh-chip.sh-Done .sh-chip-ico-done .sh-ms,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Completed .sh-chip-ico-done .sh-ms,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Done .sh-chip-ico-done .sh-ms { color: #0f2e1e !important; }
.sh-pt.sh-on .sh-chip.sh-Completed .sh-chip-lbl,
.sh-pt.sh-on .sh-chip.sh-Done .sh-chip-lbl,
.sh-pt.sh-on .sh-chip.sh-Completed b,
.sh-pt.sh-on .sh-chip.sh-Done b,
.sh-pt.sh-on .sh-chip.sh-Completed span,
.sh-pt.sh-on .sh-chip.sh-Done span,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Completed .sh-chip-lbl,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Done .sh-chip-lbl,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Completed b,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Done b,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Completed span,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Done span { color: #4ade80 !important; }
.sh-pt.sh-on .sh-chip.sh-InProgress,
.sh-pt.sh-on .sh-chip.sh-In,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-InProgress,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-In { background: #275f99 !important; color: #ffffff !important; border: 1px solid rgba(96, 165, 250, 0.32) !important; }
.sh-pt.sh-on .sh-chip.sh-InProgress .sh-chip-ico-clock,
.sh-pt.sh-on .sh-chip.sh-In .sh-chip-ico-clock,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-InProgress .sh-chip-ico-clock,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-In .sh-chip-ico-clock { color: #ffffff !important; }
.sh-pt.sh-on .sh-chip.sh-InProgress .sh-chip-lbl,
.sh-pt.sh-on .sh-chip.sh-In .sh-chip-lbl,
.sh-pt.sh-on .sh-chip.sh-InProgress b,
.sh-pt.sh-on .sh-chip.sh-In b,
.sh-pt.sh-on .sh-chip.sh-InProgress span,
.sh-pt.sh-on .sh-chip.sh-In span,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-InProgress .sh-chip-lbl,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-In .sh-chip-lbl,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-InProgress b,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-In b,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-InProgress span,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-In span { color: #ffffff !important; }
.sh-pt.sh-on .sh-chip.sh-Overdue,
.sh-pt.sh-on .sh-chip.sh-Missed,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Overdue,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Missed { background: #332918 !important; color: #fbbf24 !important; border: 1px solid rgba(251, 191, 36, 0.35) !important; }
.sh-pt.sh-on .sh-chip.sh-Overdue .sh-chip-ico-warn,
.sh-pt.sh-on .sh-chip.sh-Missed .sh-chip-ico-warn,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Overdue .sh-chip-ico-warn,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Missed .sh-chip-ico-warn { color: #fbbf24 !important; }
.sh-pt.sh-on .sh-chip.sh-Overdue .sh-chip-lbl,
.sh-pt.sh-on .sh-chip.sh-Missed .sh-chip-lbl,
.sh-pt.sh-on .sh-chip.sh-Overdue b,
.sh-pt.sh-on .sh-chip.sh-Missed b,
.sh-pt.sh-on .sh-chip.sh-Overdue span,
.sh-pt.sh-on .sh-chip.sh-Missed span,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Overdue .sh-chip-lbl,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Missed .sh-chip-lbl,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Overdue b,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Missed b,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Overdue span,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Missed span { color: #fbbf24 !important; }
.sh-pt.sh-on .sh-chip.sh-NotStarted,
.sh-pt.sh-on .sh-chip.sh-Not,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-NotStarted,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Not { background: #1e2633 !important; color: #b0c5da !important; border: 1px solid rgba(148, 163, 184, 0.25) !important; }
.sh-pt.sh-on .sh-chip.sh-NotStarted .sh-chip-ico-not,
.sh-pt.sh-on .sh-chip.sh-Not .sh-chip-ico-not,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-NotStarted .sh-chip-ico-not,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Not .sh-chip-ico-not { color: #b0c5da !important; }
.sh-pt.sh-on .sh-chip.sh-NotStarted .sh-chip-lbl,
.sh-pt.sh-on .sh-chip.sh-Not .sh-chip-lbl,
.sh-pt.sh-on .sh-chip.sh-NotStarted b,
.sh-pt.sh-on .sh-chip.sh-Not b,
.sh-pt.sh-on .sh-chip.sh-NotStarted span,
.sh-pt.sh-on .sh-chip.sh-Not span,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-NotStarted .sh-chip-lbl,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Not .sh-chip-lbl,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-NotStarted b,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Not b,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-NotStarted span,
[data-theme="logo"] .sh-pt.sh-on .sh-chip.sh-Not span { color: #b0c5da !important; }
.sh-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#pane { padding: 22px 24px; overflow: visible; position: relative; }
#pane:has(.sh-pane-head-sticky) { padding-top: 0; }
.sh-pane-head-sticky { position: relative; z-index: 1; background: var(--sh-card); margin: 0 -24px 18px; padding: 16px 24px 14px; border-radius: var(--sh-radius) var(--sh-radius) 0 0; border-bottom: 1px solid var(--sh-line); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); }
.sh-pane-head-sticky::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--sh-radius); pointer-events: none; z-index: 31; background-image: radial-gradient(circle at 100% 100%, transparent var(--sh-radius), var(--sh-bg) calc(var(--sh-radius) + 0.5px)), radial-gradient(circle at 0% 100%, transparent var(--sh-radius), var(--sh-bg) calc(var(--sh-radius) + 0.5px)); background-position: left top, right top; background-size: var(--sh-radius) var(--sh-radius); background-repeat: no-repeat; }
.sh-pane-head-sticky.sh-np-sticky-head { padding: 14px 24px 12px; }
.sh-pane-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; font-size: 20px; font-weight: 600; }
.sh-pane-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-pane-title b { color: var(--sh-primary); font-weight: 700; flex-shrink: 0; }
.sh-pane-head-sticky .sh-tabs { position: static; margin: 0; padding: 6px; background: var(--sh-card); border-radius: 16px; box-shadow: var(--sh-shadow); border: 1px solid var(--sh-line); }
.sh-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 12px; z-index: 5; margin: 0 -6px 18px; padding: 6px; background: var(--sh-card); border-radius: 18px; box-shadow: var(--sh-shadow); }
.sh-tabs::-webkit-scrollbar { display: none; }
.sh-tabs button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0; padding: 8px 14px; font-size: 13.5px; font-weight: 500; border: 0; border-radius: 12px; background: transparent; color: var(--sh-ink-2); transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); white-space: nowrap; cursor: pointer; }
.sh-tabs button:hover { background: var(--sh-soft); color: var(--sh-ink); }
.sh-tabs button.sh-on,
.sh-tabs button.sh-on:hover { background: #1b1d22; color: #ffffff; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.sh-tabs button.sh-on span,
.sh-tabs button.sh-on:hover span { color: #ffffff; }
.sh-tabs button.sh-done { color: var(--sh-ink); }
.sh-tabs button.sh-done .sh-ms { color: var(--sh-success); font-size: 16px; margin-right: 2px; }
.sh-tabs button.sh-done.sh-on,
.sh-tabs button.sh-done.sh-on:hover { background: #1b1d22; color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.sh-tabs button.sh-done.sh-on .sh-ms { color: #4ade80; }
.sh-tabs button.sh-done.sh-on span { color: #ffffff; }
.sh-tabs button.sh-locked { opacity: 0.5; cursor: not-allowed; }
.sh-tabs button.sh-locked .sh-ms { font-size: 15px; margin-right: 2px; }
.sh-tabs button.sh-locked:hover { background: transparent; color: var(--sh-ink-2); }
.sh-sec { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--sh-primary-soft); color: var(--sh-on-primary-soft); border-left: 4px solid var(--sh-primary); font-size: 15px; font-weight: 600; }
.sh-sec:first-child { margin-top: 0; }
.sh-sec.sh-sec-collapsible { cursor: pointer; user-select: none; transition: background-color 0.15s ease, filter 0.15s ease, margin-bottom 0.15s ease; }
.sh-sec.sh-sec-collapsible:hover { filter: brightness(0.96); }
.sh-sec.sh-sec-collapsible:focus-visible { outline: 2px solid var(--sh-primary); outline-offset: 2px; }
.sh-sec.sh-sec-collapsible .sh-sec-chev { font-size: 22px; line-height: 1; color: var(--sh-primary); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; justify-content: center; }
.sh-sec.sh-sec-collapsible.sh-collapsed { margin-bottom: 8px; opacity: 0.95; }
.sh-sec.sh-sec-collapsible.sh-collapsed .sh-sec-chev { transform: rotate(-90deg); }
.sh-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.sh-tint { background: var(--sh-soft); border-radius: 14px; padding: 16px; }
.sh-tint .sh-g:last-child,
.sh-tint> :last-child { margin-bottom: 0; }
.sh-addform .sh-sec { margin: 14px 0 8px; padding: 6px 12px; font-size: 14px; }
.sh-addform .sh-sec:first-child { margin-top: 0; }
.sh-addform .sh-sec-note { font-size: 12px; font-weight: 400; margin-left: 8px; }
.sh-addform .sh-tint { padding: 12px; }
.sh-add-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.sh-add-summary { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--sh-line); border-radius: 14px; background: var(--sh-card); }
.sh-add-summary-title { font-size: 14px; font-weight: 600; color: var(--sh-ink); }
.sh-add-summary-list { margin: 0; display: grid; gap: 8px; }
.sh-add-summary-list dt { font-size: 12px; color: var(--sh-ink-3); }
.sh-add-summary-list dd { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--sh-ink); overflow-wrap: anywhere; }
.sh-add-summary-note { margin: 0; font-size: 12px; }
.sh-add-summary .sh-foot-actions { flex-direction: column; margin-left: 0; }
.sh-add-summary .sh-foot-actions .sh-btn,
.sh-add-summary .sh-foot-actions .sh-pri { width: 100%; justify-content: center; }
@media (max-width: 900px) {
  .sh-add-layout { grid-template-columns: minmax(0, 1fr); }
  .sh-add-summary { position: static; }
}
.sh-addform .sh-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-bottom: 0; }
.sh-addform .sh-g label { margin-bottom: 0; font-size: 12px; }
.sh-addform .sh-g label input:not([type="checkbox"]) { padding: 9px 12px; min-height: 44px; }
.sh-addform .sh-fmsg { margin-top: 2px; line-height: 1.25; }
.sh-addform .sh-np-lead { margin: 0 0 10px; font-size: 13px; }
.sh-addform .sh-role-cards { gap: 8px; }
.sh-addform label.sh-role-card { padding: 10px 12px; }
.sh-addform .sh-site-opts { gap: 6px; }
@media (max-width: 640px) {
  .sh-addform .sh-g { grid-template-columns: 1fr; }
}
.sh-visit-info { padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--sh-soft); color: var(--sh-ink); font-size: 14px; line-height: 1.6; }
.sh-warn,
.sh-ok,
.sh-err { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; font-size: 14px; }
.sh-warn { background: var(--sh-warning-soft); color: var(--sh-on-warning-soft); }
.sh-ok { background: var(--sh-success-soft); color: var(--sh-on-success-soft); }
.sh-err,
.sh-e { background: var(--sh-error-soft); color: var(--sh-on-error-soft); }
.sh-e { font-weight: 500; }
.sh-lock-banner,
.sh-ok-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 16px; border-radius: 14px; font-size: 14px; font-weight: 500; }
.sh-lock-banner { background: var(--sh-warning-soft); color: var(--sh-on-warning-soft); }
.sh-ok-banner { background: var(--sh-success-soft); color: var(--sh-on-success-soft); }
.sh-lock-banner .sh-ms,
.sh-ok-banner .sh-ms { margin: 0; }
.sh-lock-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--sh-ink-2); }
.sh-lock-hint .sh-ms { font-size: 16px; margin: 0; }
.sh-dlg-err { background: var(--sh-error-soft); color: var(--sh-on-error-soft); padding: 10px 14px; border-radius: 14px; font-size: 14px; margin-bottom: 12px; }
.sh-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.sh-step-nav { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--sh-line); }
.sh-np { max-width: none; }
.sh-np-lead { margin: 0 0 16px; color: var(--sh-ink-2); }
.sh-wrap table td,
.sh-wrap table th { white-space: normal; }
.sh-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--sh-primary-soft); color: var(--sh-on-primary-soft); cursor: pointer; user-select: none; border: 1px solid transparent; font-family: inherit; transition: transform 0.15s ease, filter 0.15s ease, background 0.2s ease, box-shadow 0.2s ease; }
.sh-pill:hover { filter: brightness(0.96); transform: translateY(-1px); }
.sh-pill:active { transform: translateY(0); }
.sh-pill:disabled { cursor: default; opacity: 0.7; pointer-events: none; filter: none; transform: none; }
.sh-pill.sh-synced { background: var(--sh-success-soft); color: var(--sh-on-success-soft); }
.sh-pill.sh-pending,
.sh-pill.sh-offline { background: var(--sh-warning-soft); color: var(--sh-on-warning-soft); }
.sh-offline-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; margin: 0 0 14px; border-radius: 12px; background: var(--sh-warning-soft); color: var(--sh-on-warning-soft); font-size: 13px; font-weight: 500; animation: sh-slideDown 0.2s ease-out; }
.sh-offline-bar .sh-ms { font-size: 20px; color: var(--sh-warning); margin: 0; flex-shrink: 0; }
.sh-offline-bar span { flex: 1; }
.sh-offline-bar .sh-off-retry-btn { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.12); color: inherit; cursor: pointer; white-space: nowrap; transition: background 0.15s ease; }
.sh-offline-bar .sh-off-retry-btn:hover { background: rgba(0, 0, 0, 0.12); }
@keyframes sh-slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-ck { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 400; color: var(--sh-ink); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-ck input { margin: 0; accent-color: var(--sh-primary); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-ck.sh-toggle { padding: 8px 14px; border-radius: 999px; background: var(--sh-soft); }
.sh-snack { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); padding: 12px 18px; border-radius: 14px; background: var(--sh-ink); color: #fff; box-shadow: var(--sh-shadow); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 200; }
.sh-snack.sh-show { opacity: 1; transform: translate(-50%, 0); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--sh-ink); letter-spacing: 0.2px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label input:not([type="checkbox"]),
.sh-field input { display: block; width: 100%; margin-top: 0; padding: 10px 12px; border: 1px solid #747a86; border-radius: 12px; background: var(--sh-card); color: var(--sh-ink); font-size: 14px; font-weight: 400; transition: border-color 0.2s, box-shadow 0.2s; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label input:not([type="checkbox"]):hover,
.sh-field input:hover { border-color: var(--sh-ink); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label input:not([type="checkbox"]):focus,
.sh-field input:focus { outline: none; border-color: var(--sh-primary); box-shadow: 0 0 0 3px var(--sh-primary-soft); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label input:disabled { background: var(--sh-soft); color: var(--sh-ink-2); cursor: not-allowed; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label input[aria-invalid="true"] { border-color: var(--sh-error); }
.sh-field { display: block; margin-bottom: 16px; }
.sh-field>span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--sh-ink); letter-spacing: 0.2px; }
.sh-fmsg { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; line-height: 1.35; }
.sh-fmsg:empty { display: none; }
.sh-fmsg.sh-e { color: var(--sh-error); }
.sh-fmsg.sh-w { color: var(--sh-warning); }
.sh-req { color: var(--sh-error); margin-left: 2px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label input.sh-fld-e,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label select.sh-fld-e { border: 2px solid var(--sh-error); background: rgba(179, 38, 30, 0.04); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label input.sh-fld-w,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label select.sh-fld-w { border: 2px solid var(--sh-warning); background: rgba(154, 91, 0, 0.05); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label input.sh-fld-ok,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label select.sh-fld-ok { border-color: var(--sh-success); }
.sh-g label.sh-ck,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td label.sh-ck { font-weight: 400; }
.sh-cb { position: relative; width: 100%; }
.sh-cb input[data-cb-input],
.sh-cb input.sh-cb-input { display: block; width: 100%; min-height: 44px; padding: 10px 40px 10px 14px; border-radius: 12px; border: 1px solid #747a86; background: var(--sh-card); color: var(--sh-ink); font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.4; cursor: pointer; user-select: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.sh-cb input[data-cb-input]:not([readonly]),
.sh-cb input.sh-cb-input:not([readonly]) { cursor: text; user-select: text; }
.sh-cb input[data-cb-input]:hover,
.sh-cb input.sh-cb-input:hover { border-color: var(--sh-ink); }
.sh-cb input[data-cb-input]:focus,
.sh-cb input.sh-cb-input:focus,
.sh-cb.sh-is-open input[data-cb-input],
.sh-cb.sh-is-open input.sh-cb-input { outline: none; border-color: var(--sh-primary); box-shadow: 0 0 0 3px var(--sh-primary-soft); }
.sh-cb input:disabled,
.sh-cb[data-disabled="true"] input { background: var(--sh-soft-2) !important; color: var(--sh-ink-2) !important; border-color: var(--sh-line) !important; cursor: default !important; opacity: 0.85; }
.sh-cb input:disabled ~ .sh-cb-ico,
.sh-cb[data-disabled="true"] .sh-cb-ico { display: none !important; }
.sh-cb[data-disabled="true"] { pointer-events: none !important; }
.sh-cb .sh-cb-ico { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--sh-ink-2); pointer-events: none; font-size: 20px; line-height: 1; transition: transform 0.2s ease, color 0.2s ease; }
.sh-cb.sh-is-open .sh-cb-ico { transform: translateY(-50%) rotate(180deg); color: var(--sh-primary); }
.sh-cb-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 100; margin: 0; padding: 6px; list-style: none; max-height: 250px; overflow-y: auto; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06); }
.sh-cb.sh-open-up .sh-cb-list { top: auto; bottom: calc(100% + 6px); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14), 0 -1px 3px rgba(0, 0, 0, 0.06); }
.sh-cb-list li { padding: 10px 14px; border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--sh-ink); display: flex; align-items: center; justify-content: space-between; transition: background-color 0.15s ease, color 0.15s ease; }
.sh-cb-list li:hover { background: var(--sh-soft); }
.sh-cb-list li.sh-act { background: var(--sh-primary-soft); color: var(--sh-on-primary-soft); font-weight: 600; }
.sh-cb-list li.sh-act::after { content: '✓'; font-weight: 700; color: var(--sh-primary); margin-left: 8px; }
.sh-cb-list li.sh-new { color: var(--sh-primary); }
.sh-cb-list li.sh-new .sh-ms { font-size: 16px; margin-right: 6px; }
.sh-cb-list li.sh-none { color: var(--sh-ink-3); cursor: default; }
.sh-filter-group .sh-cb { width: auto; min-width: 170px; max-width: 250px; }
.sh-auth-page { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.sh-auth-wrap { width: 100%; max-width: 920px; }
.sh-brand-center { text-align: center; margin-bottom: 24px; }
.sh-brand-center .sh-logo { width: 56px; height: 56px; margin: 0 auto 12px; }
.sh-brand-center .sh-logo .sh-ms { font-size: 30px; }
.sh-logo.sh-logo-img { width: auto; height: auto; border-radius: 0; background: none; display: flex; align-items: center; justify-content: center; }
.sh-logo.sh-logo-img img { display: block; height: 36px; width: auto; max-width: 130px; max-height: 44px; object-fit: contain; transition: max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.22s cubic-bezier(0.4, 0, 0.2, 1), height 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) dialog::backdrop { background: rgba(18, 20, 24, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) dialog.sh-app-dialog { border: 0; border-radius: 18px; padding: 20px; width: min(480px, 92vw); background: var(--sh-card); color: var(--sh-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) dialog.sh-app-dialog::backdrop { background: rgba(18, 20, 24, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.sh-ad-body { display: flex; gap: 14px; align-items: flex-start; }
.sh-ad-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sh-soft); color: var(--sh-ink-2); }
.sh-ad-icon.sh-ad-danger { background: var(--sh-error-soft); color: var(--sh-error); }
.sh-ad-icon.sh-ad-warning { background: var(--sh-warning-soft); color: var(--sh-warning); }
.sh-ad-icon.sh-ad-info { background: var(--sh-primary-soft); color: var(--sh-primary); }
.sh-ad-title { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; }
.sh-ad-msg { margin: 6px 0 0; font-size: 14px; color: var(--sh-ink-2); line-height: 1.45; }
.sh-ad-list { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--sh-ink-2); line-height: 1.6; }
.sh-ad-list { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--sh-ink-2); line-height: 1.6; }
.sh-ad-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.sh-ad-ok.sh-danger { background: var(--sh-error); color: #fff; border-color: var(--sh-error); }
.sh-brand-logo { display: block; width: min(300px, 80%); height: auto; margin: 0 auto 12px; }
.sh-brand-center h1 { margin: 0; font-size: 24px; font-weight: 600; }
.sh-brand-center p { margin: 4px 0 0; font-size: 13px; color: var(--sh-ink-2); }
.sh-auth { background: var(--sh-card); border-radius: 28px; box-shadow: var(--sh-shadow); padding: 32px 28px 28px; }
.sh-auth h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.sh-auth>p { margin: 0 0 22px; color: var(--sh-ink-2); }
.sh-auth .sh-btn { width: 100%; justify-content: center; margin-top: 8px; padding: 13px 18px; }
.sh-auth .sh-error { display: none; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border-radius: 14px; background: var(--sh-error-soft); color: var(--sh-on-error-soft); font-size: 14px; }
.sh-auth .sh-error.sh-show { display: flex; }
.sh-input-wrap { position: relative; }
.sh-input-wrap input.sh-has-toggle { padding-right: 48px; }
.sh-toggle-pw { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sh-ink-2); }
.sh-toggle-pw:hover { background: var(--sh-soft-2); }
.sh-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--sh-ink-3); }
.sh-footer { margin-top: 20px; text-align: center; font-size: 12px; color: var(--sh-ink-2); }
@media (max-width: 1280px) {
  .sh-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-row.sh-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sh-row.sh-three> :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .sh-lay { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .sh-app,
  .sh-app.sh-collapsed { grid-template-columns: 1fr; }
  .sh-row.sh-two,
  .sh-row.sh-two-even { grid-template-columns: 1fr; }
  .sh-lay { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .sh-app { padding: 10px; gap: 12px; }
  .sh-lay,
  .sh-lay:has(> .sh-pl.sh-collapsed) { grid-template-columns: 1fr; }
  .sh-pl { max-height: 360px; }
  .sh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-row.sh-three { grid-template-columns: 1fr; }
  .sh-topbar { flex-wrap: wrap; }
  .sh-search { order: 3; flex-basis: 100%; }
  .sh-profile-meta { display: none; }
  .sh-card,
  #pane { padding: 16px; }
  #pane:has(.sh-pane-head-sticky) { padding-top: 0; }
  .sh-pane-head-sticky { top: 0; margin: 0 -16px 14px; padding: 12px 16px 10px; border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--sh-line); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); }
  .sh-pane-head-sticky::before { height: 14px; background-image: radial-gradient(circle at 100% 100%, transparent 14px, var(--sh-bg) 14.5px), radial-gradient(circle at 0% 100%, transparent 14px, var(--sh-bg) 14.5px); background-size: 14px 14px; }
  .sh-pane-title { font-size: 17px; margin-bottom: 8px; }
  .sh-pane-title b { font-size: 17px; }
  .sh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-hello h1 { font-size: 22px; }
}
@media (min-width: 721px) {
  .sh-lay:has(> .sh-pl.sh-collapsed) { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (min-width: 721px) {
  .sh-pl.sh-collapsed { padding: 10px 8px; max-height: none; overflow: hidden; }
  .sh-pl.sh-collapsed .sh-list-head { flex-direction: column; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 4px 0 2px; border-bottom: 0; }
  .sh-pl.sh-collapsed .sh-list-head>span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; }
  .sh-pl.sh-collapsed .sh-list-head .sh-list-count { margin: 0; }
  .sh-pl.sh-collapsed .sh-list-head .sh-chev { margin: 0; }
}
.sh-menu-btn { display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--sh-soft); color: var(--sh-ink); flex-shrink: 0; }
.sh-menu-btn .sh-ms { margin: 0; }
@media (max-width: 1024px) {
  body.sh-drawer-open { overflow: hidden !important; touch-action: none; }
  .sh-menu-btn { display: grid; place-items: center; }
  .sh-side { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; width: min(280px, 82vw); border-radius: 0 var(--sh-radius) var(--sh-radius) 0; padding: clamp(4px, 1.1vh, 16px) clamp(6px, 1.4vw, 12px) clamp(3px, 0.8vh, 12px); padding: clamp(4px, 1.1dvh, 16px) clamp(6px, 1.4vw, 12px) clamp(3px, 0.8dvh, 12px); transform: translateX(-105%); transition: transform 0.25s ease; z-index: 300; overflow: hidden !important; overflow-y: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: clamp(1px, 0.35vh, 4px); gap: clamp(1px, 0.35dvh, 4px); box-sizing: border-box; touch-action: none; }
  .sh-side::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
  .sh-side.sh-open { transform: none; box-shadow: 0 8px 32px rgba(27, 29, 34, 0.25); }
  .sh-side-top { width: 100%; padding: 0 2px clamp(2px, 0.7vh, 10px); padding: 0 2px clamp(2px, 0.7dvh, 10px); margin-bottom: 0; flex-shrink: 0; min-height: 0; display: flex; align-items: center; justify-content: space-between; }
  .sh-side-top .sh-logo.sh-logo-img img { max-height: clamp(18px, 3.4vh, 34px); max-height: clamp(18px, 3.4dvh, 34px); max-width: clamp(80px, 12vw, 125px); width: auto; height: auto; object-fit: contain; }
  .sh-side-top,
  .sh-app.sh-collapsed .sh-side .sh-side-top,
  .sh-app.sh-collapsed .sh-side-top { width: 100%; padding: 0 2px clamp(2px, 0.7vh, 10px); padding: 0 2px clamp(2px, 0.7dvh, 10px); margin-bottom: 0; flex-shrink: 0; min-height: 0; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
  .sh-side-toggle { width: clamp(24px, 3.8vh, 36px); width: clamp(24px, 3.8dvh, 36px); height: clamp(24px, 3.8vh, 36px); height: clamp(24px, 3.8dvh, 36px); border-radius: clamp(6px, 1vh, 8px); border-radius: clamp(6px, 1dvh, 8px); flex-shrink: 0; display: grid; place-items: center; }
  .sh-side-toggle .sh-ms { font-size: clamp(15px, 2.4vh, 22px); font-size: clamp(15px, 2.4dvh, 22px); }
  .sh-side .sh-side-label,
  .sh-app.sh-collapsed .sh-side .sh-side-label,
  .sh-side.sh-open .sh-side-label { display: block !important; padding: clamp(1px, 0.35vh, 7px) clamp(4px, 1vw, 10px) clamp(0.5px, 0.2vh, 4px); padding: clamp(1px, 0.35dvh, 7px) clamp(4px, 1vw, 10px) clamp(0.5px, 0.2dvh, 4px); font-size: clamp(8px, 1.2vh, 11px); font-size: clamp(8px, 1.2dvh, 11px); font-weight: 700; letter-spacing: 0.08em; color: var(--sh-ink-3); margin: 0; line-height: 1.1; flex-shrink: 1; min-height: 0; }
  .sh-side .sh-nav,
  .sh-app.sh-collapsed .sh-side .sh-nav,
  .sh-side.sh-open .sh-nav { display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; width: 100%; flex: 1 1 auto; min-height: 0; max-height: clamp(24px, 4.4vh, 44px); max-height: clamp(24px, 4.4dvh, 44px); padding: clamp(1.5px, 0.65vh, 10px) clamp(6px, 1.2vw, 12px); padding: clamp(1.5px, 0.65dvh, 10px) clamp(6px, 1.2vw, 12px); font-size: clamp(10.5px, 1.65vh, 15px); font-size: clamp(10.5px, 1.65dvh, 15px); border-radius: clamp(6px, 1vh, 10px); border-radius: clamp(6px, 1dvh, 10px); gap: clamp(6px, 1.1vw, 12px); margin: 0; line-height: 1.15; box-sizing: border-box; }
  .sh-side .sh-side-text,
  .sh-app.sh-collapsed .sh-side .sh-side-text,
  .sh-side.sh-open .sh-side-text { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; display: inline-block !important; font-size: inherit !important; font-weight: 500 !important; color: inherit !important; opacity: 1 !important; visibility: visible !important; }
  .sh-side .sh-nav:focus:not(:focus-visible) { outline: none !important; }
  .sh-side .sh-nav .sh-ms { font-size: clamp(14px, 2.3vh, 22px); font-size: clamp(14px, 2.3dvh, 22px); width: clamp(14px, 2.3vh, 22px); width: clamp(14px, 2.3dvh, 22px); height: clamp(14px, 2.3vh, 22px); height: clamp(14px, 2.3dvh, 22px); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .sh-side .sh-side-sponsor,
  .sh-app.sh-collapsed .sh-side .sh-side-sponsor { margin-top: auto; padding: clamp(2px, 0.8vh, 12px) 4px clamp(2px, 0.5vh, 8px); padding: clamp(2px, 0.8dvh, 12px) 4px clamp(2px, 0.5dvh, 8px); border-top: 1px solid var(--sh-line); flex-shrink: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .sh-side .sh-sponsor-card,
  .sh-app.sh-collapsed .sh-side .sh-sponsor-card { padding: 0; display: flex; justify-content: center; align-items: center; }
  .sh-side .sh-sponsor-img,
  .sh-app.sh-collapsed .sh-side .sh-sponsor-img { display: block !important; max-width: 96px; max-height: clamp(26px, 6vh, 56px); max-height: clamp(26px, 6dvh, 56px); width: auto; height: auto; object-fit: contain; }
  .sh-scrim { position: fixed; inset: 0; z-index: 299; background: rgba(27, 29, 34, 0.35); }
  .sh-scrim[hidden] { display: none; }
}
@media (max-width: 1024px) and (max-height: 540px) {
  .sh-side { gap: 0.5px; padding: 3px 6px; }
  .sh-side .sh-side-label { padding: 1px 4px 0.5px; font-size: 8px; letter-spacing: 0.05em; }
  .sh-side .sh-nav { padding: 1px 5px; font-size: 10.5px; gap: 6px; max-height: 25px; }
  .sh-side .sh-nav .sh-ms { font-size: 13.5px; width: 13.5px; height: 13.5px; }
  .sh-side-top { padding: 0 2px 2px; }
  .sh-side-top .sh-logo.sh-logo-img img { max-height: 18px; }
  .sh-side-toggle { width: 24px; height: 24px; }
  .sh-side-toggle .sh-ms { font-size: 15px; }
  .sh-side .sh-side-sponsor { padding: 2px 2px 1px; }
  .sh-side .sh-sponsor-img { max-height: 13px; }
}
@media (max-width: 1024px) and (max-height: 380px) {
  .sh-side { gap: 0; padding: 1px 4px; }
  .sh-side .sh-side-label { display: none; }
  .sh-side .sh-nav { padding: 0.5px 4px; font-size: 9.5px; gap: 4px; max-height: 20px; }
  .sh-side .sh-nav .sh-ms { font-size: 12px; width: 12px; height: 12px; }
  .sh-side-top .sh-logo.sh-logo-img img { max-height: 15px; }
  .sh-side .sh-sponsor-img { max-height: 11px; }
}
@media (max-width: 720px) {
  .sh-segment button { padding: 8px 10px; }
  .sh-kpi b { font-size: 24px; }
  .sh-hello { gap: 12px; }
  .sh-actions .sh-btn,
  .sh-actions button { flex: 1 1 auto; justify-content: center; }
  .sh-sel-actions .sh-btn { flex: 1 1 auto; justify-content: center; }
}
.sh-pillars { display: flex; flex-wrap: nowrap; overflow: visible; gap: 12px; margin-bottom: 14px; }
.sh-pillar { background: var(--sh-soft); border-radius: 18px; padding: 14px; border-left: 4px solid var(--sh-line); transition: background-color 0.2s ease, border-color 0.2s ease; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.sh-pillar.sh-active { background: var(--sh-card); border-left-color: var(--sh-success); box-shadow: var(--sh-shadow); }
.sh-pillar.sh-stopped { border-left-color: var(--sh-error); }
.sh-pillar-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.sh-pillar-head b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-pillar-head .sh-chip { flex: none; }
.sh-pillar label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--sh-ink-2); }
.sh-pillar label:last-child { margin-bottom: 0; }
.sh-pillar .sh-cb input[data-cb-input] { padding-left: 10px; padding-right: 32px; font-size: 13.5px; }
.sh-pillar .sh-cb .sh-cb-ico { right: 10px; font-size: 18px; }
.sh-pillar .sh-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.sh-pillar .sh-g2 label { margin-bottom: 0; }
.sh-pillar .sh-pillar-status { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--sh-line); }
.sh-pillar .sh-pillar-status label { font-weight: 600; color: var(--sh-ink); margin-bottom: 0; }
.sh-pillar.sh-active .sh-pillar-status input { font-weight: 600; color: var(--sh-success); border-color: color-mix(in srgb, var(--sh-success) 35%, var(--sh-line)); }
.sh-pillar.sh-stopped .sh-pillar-status input { font-weight: 600; color: var(--sh-error); border-color: color-mix(in srgb, var(--sh-error) 35%, var(--sh-line)); }
.sh-pillar .sh-cb-list { min-width: 100%; width: max-content; max-width: min(320px, 88vw); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.06); z-index: 120; }
.sh-pillar .sh-cb-list li { white-space: nowrap; padding: 9px 12px; font-size: 13.5px; }
.sh-pillars .sh-pillar:nth-child(n+3) .sh-cb-list,
.sh-pillars .sh-pillar:last-child .sh-cb-list { left: auto; right: 0; }
.sh-reasons { padding: 16px; background: var(--sh-soft); border-radius: 18px; margin-top: 4px; }
.sh-reasons .sh-pillar-head { margin-bottom: 12px; }
.sh-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-check-row { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 14px; border: 1px solid var(--sh-line); border-radius: 14px; background: var(--sh-card); color: var(--sh-ink); font-size: 14px; font-weight: 400; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-check-row:hover { border-color: var(--sh-ink-3); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-check-row input { margin: 0; width: 18px; height: 18px; accent-color: var(--sh-primary); flex-shrink: 0; cursor: pointer; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-check-row:has(input:checked) { background: var(--sh-primary-soft); border-color: var(--sh-primary); color: var(--sh-on-primary-soft); font-weight: 500; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-check-row:has(input:focus-visible) { outline: 2px solid var(--sh-primary); outline-offset: 2px; }
.sh-reasons-other { margin-top: 0; }
.sh-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: end; }
.sh-field-wide { grid-column: 1 / -1; }
.sh-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.sh-field-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.sh-site-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-site-opts label.sh-check-row { padding: 6px 10px; font-size: 13px; border-radius: 999px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) select,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label select,
.sh-field select,
.sh-filter-select,
.sh-export-filter-row select { display: block; width: 100%; min-height: 44px; padding: 10px 40px 10px 14px; border-radius: 12px; border: 1px solid #747a86; background-color: var(--sh-card); color: var(--sh-ink); font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.4; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b616d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) select:hover,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label select:hover,
.sh-field select:hover,
.sh-filter-select:hover,
.sh-export-filter-row select:hover { border-color: var(--sh-ink); background-color: var(--sh-card); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) select:focus,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label select:focus,
.sh-field select:focus,
.sh-filter-select:focus,
.sh-export-filter-row select:focus { outline: none; border-color: var(--sh-primary); box-shadow: 0 0 0 3px var(--sh-primary-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231a5fb4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) select:disabled,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label select:disabled,
.sh-field select:disabled,
.sh-filter-select:disabled,
.sh-export-filter-row select:disabled { background-color: var(--sh-soft-2); color: var(--sh-ink-3); border-color: var(--sh-line); cursor: not-allowed; opacity: 0.75; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238a909c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) select option { padding: 8px 12px; font-size: 14px; background-color: var(--sh-card); color: var(--sh-ink); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td select { width: auto; min-width: 140px; min-height: 38px; padding: 6px 34px 6px 12px; font-size: 13px; background-position: right 10px center; background-size: 16px 16px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td input:not([type="checkbox"]),
.sh-form-grid input { width: 100%; min-width: 160px; padding: 9px 12px; border: 1px solid #747a86; border-radius: 12px; background: var(--sh-card); color: var(--sh-ink); font-size: 14px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--sh-primary); cursor: pointer; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td input[type="checkbox"]:disabled { cursor: not-allowed; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td input[type="checkbox"]:disabled { opacity: 0.6; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td .sh-muted { font-size: 12px; }
.sh-mini { display: inline-block; width: 72px; height: 8px; margin-right: 8px; vertical-align: middle; border-radius: 999px; background: var(--sh-soft-2); overflow: hidden; }
.sh-mini i { display: block; height: 100%; border-radius: 999px; background: var(--sh-success); }
.sh-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; }
.sh-dash-grid>.sh-card { min-width: 0; }
.sh-chart-svg { width: 100%; height: auto; display: block; }
.sh-legend-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--sh-ink-2); margin-top: 14px; }
.sh-legend-row i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.sh-donut-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 6px 0; }
.sh-donut-wrap svg { width: 180px; height: 180px; flex-shrink: 0; }
.sh-legend-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 180px; }
.sh-legend-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--sh-line); }
.sh-legend-list li:last-child { border-bottom: 0; }
.sh-legend-list li i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.sh-legend-list li b { margin-left: auto; font-weight: 600; }
.sh-hbars { display: flex; flex-direction: column; gap: 6px; }
.sh-hbar-row { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 36px; gap: 12px; align-items: center; padding: 6px 0; }
.sh-hbar-label b { display: block; font-weight: 600; }
.sh-hbar-label small { color: var(--sh-ink-3); font-size: 12px; }
.sh-hbar-track { height: 12px; border-radius: 999px; background: var(--sh-soft-2); overflow: hidden; }
.sh-hbar-track i { display: block; height: 100%; border-radius: 999px; }
.sh-hbar-val { font-weight: 600; text-align: right; }
@media (max-width: 900px) {
  .sh-dash-grid { grid-template-columns: 1fr; }
}
.sh-addform { display: flex; flex-direction: column; gap: 18px; }
.sh-addform-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.sh-addform-head p { margin: 4px 0 0; font-size: 13px; color: var(--sh-ink-2); }
.sh-addform .sh-fld { display: flex; flex-direction: column; gap: 4px; }
.sh-addform .sh-fld label { margin: 0; }
.sh-fmsg.sh-hint-txt { color: var(--sh-ink-3); font-weight: 400; }
.sh-fmsg code,
.sh-addform-foot code { font-family: inherit; font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--sh-soft); color: var(--sh-ink); }
.sh-role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-role-card { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px; border: 1px solid var(--sh-line); border-radius: 16px; background: var(--sh-card); font-weight: 400; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-role-card:hover { border-color: var(--sh-ink-3); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-role-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-role-card:has(input:checked) { border-color: var(--sh-primary); background: var(--sh-primary-soft); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-role-card:has(input:focus-visible) { outline: 2px solid var(--sh-primary); outline-offset: 2px; }
.sh-rc-title { font-size: 14px; font-weight: 600; color: var(--sh-ink); }
.sh-rc-desc { font-size: 12px; color: var(--sh-ink-2); line-height: 1.4; }
.sh-site-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sh-link-btn { border: 0; background: transparent; color: var(--sh-primary); font-weight: 600; padding: 4px 8px; }
.sh-link-btn:hover { background: var(--sh-primary-soft); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) tr.sh-row-link { cursor: pointer; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) tr.sh-row-link td { transition: background 0.15s; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) tr.sh-row-link:hover td { background: var(--sh-primary-soft); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) table.sh-rows-rounded { border-collapse: separate; border-spacing: 0; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) tr.sh-row-link:hover td:first-child { border-radius: 12px 0 0 12px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) tr.sh-row-link:hover td:last-child { border-radius: 0 12px 12px 0; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) tr.sh-row-link:focus-visible { outline: 2px solid var(--sh-primary); outline-offset: -2px; }
.sh-name-link { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; color: var(--sh-primary); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.sh-name-link b { font-weight: 600; }
.sh-name-link .sh-ms { font-size: 18px; }
.sh-name-link:hover { background: transparent; }
.sh-addform-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--sh-line); }
.sh-foot-actions { display: flex; gap: 10px; margin-left: auto; }
.sh-foot-actions .sh-btn,
.sh-foot-actions .sh-pri { min-height: 44px; }
.sh-req { color: var(--sh-error); font-weight: 600; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-role-card.sh-is-locked { opacity: 0.55; cursor: not-allowed; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-role-card.sh-is-locked:hover { border-color: var(--sh-border); }
.sh-form-grid { align-items: start; }
.sh-addform .sh-fld { min-width: 0; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td label.sh-check-row { display: inline-flex; width: auto; padding: 6px 10px; font-size: 13px; font-weight: 500; border-radius: 999px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) td label.sh-check-row input { width: 16px; height: 16px; }
.sh-dash-grid { margin-bottom: 0; }
.sh-compact #view { display: flex; flex-direction: column; gap: 12px; }
.sh-compact .sh-card { padding: 16px 18px; }
.sh-compact .sh-card-head { margin-bottom: 10px; }
.sh-compact .sh-kpis,
.sh-compact .sh-dash-grid { gap: 12px; }
.sh-compact .sh-addform { gap: 12px; }
.sh-compact .sh-form-grid { gap: 12px; }
.sh-compact label.sh-role-card { padding: 12px; }
.sh-compact .sh-addform-foot { padding-top: 12px; }
.sh-compact th,
.sh-compact td { padding: 8px; }
.sh-file-card { position: relative; flex: 0 0 240px; display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--sh-card); border-radius: var(--sh-radius); box-shadow: var(--sh-shadow); transition: box-shadow 0.2s ease; min-width: 0; }
.sh-file-card:hover { box-shadow: 0 6px 18px rgba(60, 64, 67, 0.18); }
.sh-file-card.sh-sm { flex-basis: 170px; }
.sh-file-card-media { width: 100%; height: 150px; border-radius: 14px; overflow: hidden; background: var(--sh-soft); display: grid; place-items: center; color: var(--sh-ink-2); cursor: zoom-in; }
.sh-file-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-file-card.sh-sm .sh-file-card-media { height: 110px; }
.sh-file-card-body { display: grid; gap: 2px; padding: 0 4px 4px; min-width: 0; }
.sh-file-card-name { display: block; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--sh-ink); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sh-file-card-meta { font-size: 12px; color: var(--sh-ink-2); }
.sh-file-card-del { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--sh-card); box-shadow: var(--sh-shadow); display: grid; place-items: center; cursor: pointer; color: var(--sh-ink); }
.sh-file-card-del:hover { color: var(--sh-error); }
.sh-file-card-list { display: flex; flex-wrap: wrap; gap: 12px; }
.sh-auth-page { display: block; position: relative; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 0; background: #0b1f3f; overflow-x: hidden; overflow-y: auto; isolation: isolate; }
.sh-auth-page::before,
.sh-auth-page::after { content: ""; position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; animation: sh-heroA 16s ease-in-out infinite; }
.sh-auth-page::before { background-image: linear-gradient(rgba(8, 24, 52, 0.72), rgba(8, 24, 52, 0.8)), url('../img/hero/hero-doctor.jpg'); }
.sh-auth-page::after { background-image: linear-gradient(rgba(8, 24, 52, 0.72), rgba(8, 24, 52, 0.8)), url('../img/hero/hero-research.jpg'); animation-name: sh-heroB; }
@keyframes sh-heroA {

  0%,
  40% {
    opacity: 1;
  }

  50%,
  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes sh-heroB {

  0%,
  40% {
    opacity: 0;
  }

  50%,
  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sh-auth-page::before,
  .sh-auth-page::after { animation: none; }
  .sh-auth-page::after { display: none; }
}
.sh-auth-wrap { position: relative; width: 100%; max-width: none; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.sh-auth-card { flex: 1; display: flex; min-height: 100vh; min-height: 100dvh; }
.sh-auth-brand { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px 48px 80px; color: #fff; }
.sh-auth-hero { flex: 1; display: flex; align-items: center; justify-content: center; }
.sh-auth-logo img { display: block; width: min(340px, 70vw); height: auto; }
.sh-auth-copy h2 { margin: 0 0 10px; font-size: 38px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.sh-auth-copy p { margin: 0; max-width: 600px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); }
.sh-auth-sponsor { margin: 24px 0 0; max-width: none; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.sh-auth-sponsor a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.sh-auth-sponsor a:hover { border-bottom-color: #fff; }
.sh-auth-wrap>.sh-footer { position: absolute; left: 48px; right: 50%; bottom: 0; margin: 0; padding: 18px 0; text-align: left; font-size: 12px; color: rgba(255, 255, 255, 0.65); }
.sh-auth-panel { flex: 0 0 46%; width: 46%; margin: 24px; padding: 0; background: none; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sh-auth-form-card { width: 100%; max-width: 480px; margin: auto; padding: 34px 30px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 24px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); border: 1px solid rgba(255, 255, 255, 0.6); }
.sh-auth-form-card h2 { margin: 0 0 16px; font-size: 24px; font-weight: 600; color: var(--sh-ink); }
.sh-auth-tabs { display: flex; background: var(--sh-soft); border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 12px; position: relative; }
.sh-auth-tabs button { flex: 1 1 0; border: 0; background: transparent; padding: 8px 6px; font-size: 13px; font-weight: 500; color: var(--sh-ink-2); border-radius: 9px; cursor: pointer; white-space: nowrap; text-align: center; display: flex; align-items: center; justify-content: center; line-height: 1.2; position: relative; z-index: 1; transition: color 0.18s ease; }
.sh-auth-role-desc { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; background: var(--sh-soft); border: 1px solid var(--sh-line); border-radius: 10px; margin-bottom: 16px; font-size: 12px; line-height: 1.45; color: var(--sh-ink-2); }
.sh-auth-role-desc i.sh-ms { font-size: 16px; color: var(--sh-brand-magenta); flex-shrink: 0; margin-top: 1px; }
.sh-auth-form-card .sh-error { display: none; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border-radius: 14px; background: var(--sh-error-soft); color: var(--sh-on-error-soft); font-size: 14px; }
.sh-auth-form-card .sh-error.sh-show { display: flex; }
.sh-auth-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
.sh-auth-row label.sh-check-row { padding: 6px 10px; font-size: 13px; white-space: nowrap; background: rgba(255, 255, 255, 0.88); }
.sh-auth-row .sh-link-btn { padding: 4px 0; font-size: 13px; white-space: nowrap; }
.sh-auth-form-card .sh-btn.sh-primary { width: 100%; justify-content: center; margin-top: 8px; padding: 13px 18px; }
.sh-auth-note { min-height: 20px; margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--sh-ink-2); }
.sh-auth-form-card .sh-btn.sh-primary { background: var(--sh-brand-magenta); border-color: var(--sh-brand-magenta); box-shadow: 0 8px 18px rgba(201, 0, 133, 0.22); }
.sh-auth-form-card .sh-btn.sh-primary:hover { background: #a8006e; border-color: #a8006e; }
.sh-auth-tabs .sh-seg-thumb { position: absolute; top: 4px; bottom: 4px; border-radius: 9px; background: var(--sh-brand-magenta); transition: left 0.2s cubic-bezier(0.2, 0, 0, 1), width 0.2s cubic-bezier(0.2, 0, 0, 1); pointer-events: none; z-index: 0; }
.sh-auth-row .sh-link-btn { color: var(--sh-brand-red); }
.sh-auth-row .sh-link-btn:hover { color: var(--sh-brand-red); }
.sh-auth-form-card input:not([type="checkbox"]):focus { border-color: var(--sh-brand-magenta); box-shadow: 0 0 0 3px var(--sh-brand-soft); }
@media (max-width: 1024px) {
  .sh-auth-wrap { min-height: 100vh; min-height: 100dvh; height: auto; }
  .sh-auth-card { flex-direction: column; min-height: 0; flex: 1 0 auto; justify-content: center; }
  .sh-auth-brand { flex: none; padding: 36px 32px 18px; gap: 18px; align-items: center; text-align: center; }
  .sh-auth-hero { flex: none; padding: 4px 0; }
  .sh-auth-logo img { width: min(240px, 50vw); }
  .sh-auth-copy h2 { font-size: 30px; margin-bottom: 6px; }
  .sh-auth-copy p { max-width: 540px; font-size: 15px; margin: 0 auto; }
  .sh-auth-sponsor { margin-top: 12px; }
  .sh-auth-panel { flex: none; width: 100%; max-width: 100%; margin: 8px 0 24px; padding: 0 24px; box-sizing: border-box; }
  .sh-auth-form-card { max-width: 440px; margin: 0 auto; padding: 32px 28px; }
  .sh-auth-wrap>.sh-footer { position: static; left: auto; right: auto; bottom: auto; padding: 8px 24px 24px; text-align: center; }
}
@media (min-width: 900px) and (orientation: landscape) and (max-height: 850px) {
  .sh-auth-card { flex-direction: row; min-height: 100vh; min-height: 100dvh; }
  .sh-auth-brand { flex: 1; padding: 32px 36px 64px; gap: 16px; align-items: flex-start; text-align: left; }
  .sh-auth-hero { flex: 1; }
  .sh-auth-logo img { width: min(240px, 26vw); }
  .sh-auth-copy h2 { font-size: 28px; margin-bottom: 6px; }
  .sh-auth-copy p { font-size: 14px; margin: 0; }
  .sh-auth-sponsor { margin-top: 10px; font-size: 12px; }
  .sh-auth-panel { flex: 0 0 46%; width: 46%; margin: 16px; padding: 0; }
  .sh-auth-form-card { padding: 26px 26px; }
  .sh-auth-form-card h2 { margin-bottom: 12px; font-size: 22px; }
  .sh-auth-tabs { margin-bottom: 14px; }
  .sh-auth-panel .sh-field { margin-bottom: 10px; }
  .sh-auth-row { margin: 0 0 12px; }
  .sh-auth-form-card .sh-btn.sh-primary { padding: 11px 18px; }
  .sh-auth-wrap>.sh-footer { position: absolute; left: 36px; right: 50%; bottom: 0; padding: 14px 0; text-align: left; }
}
@media (max-width: 640px) {
  .sh-auth-brand { padding: 20px 16px 8px; gap: 10px; }
  .sh-auth-hero { padding: 0; }
  .sh-auth-logo img { width: min(165px, 46vw); }
  .sh-auth-copy h2 { font-size: 22px; margin-bottom: 4px; }
  .sh-auth-copy p { font-size: 13px; line-height: 1.4; }
  .sh-auth-sponsor { margin-top: 8px; font-size: 11px; }
  .sh-auth-panel { margin: 4px 0 14px; padding: 0 14px; }
  .sh-auth-form-card { padding: 20px 18px; border-radius: 20px; }
  .sh-auth-form-card h2 { font-size: 19px; margin-bottom: 12px; }
  .sh-auth-tabs { margin-bottom: 12px; }
  .sh-auth-tabs button { font-size: 13px; padding: 7px 6px; }
  .sh-auth-panel .sh-field { margin-bottom: 10px; }
  .sh-auth-row { flex-direction: column; align-items: stretch; gap: 6px; margin: 2px 0 14px; }
  .sh-auth-row label.sh-check-row { width: auto; font-size: 12px; padding: 5px 8px; }
  .sh-auth-row .sh-link-btn { text-align: center; padding: 2px 4px; font-size: 12px; }
  .sh-auth-form-card .sh-btn.sh-primary { padding: 11px 16px; margin-top: 4px; }
  .sh-auth-wrap>.sh-footer { padding: 4px 16px 18px; font-size: 11px; }
}
@media (max-height: 520px) {
  .sh-auth-wrap { min-height: 100vh; min-height: 100dvh; height: auto; }
  .sh-auth-card { flex-direction: row; min-height: 0; }
  .sh-auth-brand { flex: 1; padding: 16px 20px 36px; gap: 8px; text-align: left; align-items: flex-start; }
  .sh-auth-hero { flex: 1; }
  .sh-auth-logo img { width: 120px; }
  .sh-auth-copy h2 { font-size: 20px; margin: 0; }
  .sh-auth-copy p { display: none; }
  .sh-auth-sponsor { display: none; }
  .sh-auth-panel { flex: 1; margin: 8px 12px; padding: 0; }
  .sh-auth-form-card { padding: 16px 18px; max-width: 380px; }
  .sh-auth-form-card h2 { font-size: 17px; margin-bottom: 8px; }
  .sh-auth-tabs { margin-bottom: 8px; }
  .sh-auth-tabs button { padding: 5px 8px; font-size: 12px; }
  .sh-auth-panel .sh-field { margin-bottom: 6px; }
  .sh-auth-panel .sh-field>span { margin-bottom: 2px; font-size: 12px; }
  .sh-auth-panel input:not([type="checkbox"]) { height: 34px; padding: 6px 10px; font-size: 13px; }
  .sh-auth-row { margin: 0 0 8px; }
  .sh-auth-form-card .sh-btn.sh-primary { padding: 8px 14px; margin-top: 4px; }
  .sh-auth-note { margin-top: 4px; font-size: 12px; min-height: 0; }
  .sh-auth-wrap>.sh-footer { position: static; padding: 6px 16px; font-size: 11px; text-align: center; }
}
.sh-anim-swap { animation: sh-swapIn 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes sh-swapIn {
  from {
    transform: translateX(40px);
  }

  to {
    transform: translateX(0);
  }
}
.sh-seg-anim { position: relative; }
.sh-seg-anim>button { position: relative; z-index: 1; transition: color 0.18s ease; }
.sh-seg-thumb { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--sh-ink); transition: left 0.18s ease, width 0.18s ease; pointer-events: none; }
.sh-seg-anim>button.sh-on { background: transparent; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .sh-anim-swap { animation: none; }
  .sh-seg-thumb { transition: none; }
}
.sh-sync-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: var(--sh-warning-soft); color: var(--sh-on-warning-soft); font-size: 12px; font-weight: 600; vertical-align: middle; }
.sh-sync-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sh-warning); }
.sh-sync-chip[hidden] { display: none; }
@media (max-width: 1024px) {
  .sh-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
  .sh-kpi { padding: 16px 18px; border-radius: 16px; gap: 6px; }
  .sh-kpi .sh-ico { width: 34px; height: 34px; border-radius: 10px; }
  .sh-kpi b { font-size: 24px; }
  .sh-kpi span { font-size: 12.5px; }
  .sh-kpi small { font-size: 11.5px; }
}
@media (max-width: 640px) {
  .sh-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .sh-kpi { padding: 14px; border-radius: 14px; gap: 4px; }
  .sh-kpi b { font-size: 22px; }
}
.sh-lay { transition: grid-template-columns 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  .sh-lay { transition: none; }
}
.sh-profile-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.sh-avatar-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; flex-shrink: 0; padding: 0; border: 2px solid var(--sh-card); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sh-primary-soft); color: var(--sh-on-primary-soft); cursor: pointer; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); box-sizing: border-box; position: relative; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.sh-avatar-btn img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; border-radius: 50%; display: block; aspect-ratio: 1 / 1; }
.sh-avatar-btn .sh-ms { font-size: 24px; line-height: 1; }
.sh-avatar-btn:hover { transform: scale(1.05); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); }
.sh-profile-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 300px; max-width: 92vw; background: var(--sh-card); border-radius: 18px; box-shadow: var(--sh-shadow); padding: 16px; z-index: 150; }
.sh-profile-panel[hidden] { display: none; }
.sh-pp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sh-pp-avatar { width: 48px; height: 48px; min-width: 48px; min-height: 48px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--sh-primary-soft); color: var(--sh-on-primary-soft); font-weight: 700; font-size: 16px; border: 2px solid var(--sh-line); box-sizing: border-box; }
.sh-pp-avatar img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; border-radius: 50%; display: block; aspect-ratio: 1 / 1; }
.sh-pp-id { min-width: 0; }
.sh-pp-id b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-pp-id small { font-size: 12px; color: var(--sh-ink-3); }
.sh-pp-list { margin: 0 0 14px; display: grid; gap: 8px; }
.sh-pp-list>div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.sh-pp-list dt { color: var(--sh-ink-2); flex: none; }
.sh-pp-list dd { margin: 0; font-weight: 500; text-align: right; min-width: 0; }
.sh-pp-out { width: 100%; justify-content: center; }
.sh-logo.sh-logo-img { max-width: 100%; }
.sh-avatar-btn.sh-role-super { box-shadow: 0 0 0 3px #1b1d22; }
.sh-whatsnew { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(8, 24, 52, 0.6); }
.sh-wn-card { width: min(680px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--sh-card); border-radius: 24px; box-shadow: var(--sh-shadow); overflow: hidden; }
.sh-wn-head { padding: 20px 24px 14px; border-bottom: 1px solid var(--sh-line); }
.sh-wn-head h2 { margin: 0 0 2px; font-size: 22px; font-weight: 600; color: var(--sh-ink); }
.sh-wn-head small { font-size: 13px; color: var(--sh-ink-3); }
.sh-wn-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 24px; }
.sh-wn-group h3 { margin: 14px 0 6px; font-size: 14px; font-weight: 600; color: var(--sh-primary); }
.sh-wn-group ul { margin: 0 0 6px; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--sh-ink-2); }
.sh-wn-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--sh-line); }
.sh-wn-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sh-ink); cursor: pointer; }
.sh-wn-check input { width: 18px; height: 18px; accent-color: var(--sh-primary); }
.sh-notify-panel,
.sh-profile-panel,
.sh-sort-menu,
.sh-cb-list { box-shadow: 0 16px 40px rgba(27, 29, 34, 0.22), 0 4px 12px rgba(27, 29, 34, 0.12); }
.sh-hierarchy-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; background: var(--sh-card); padding: 14px 20px; border-radius: 18px; border: 1px solid var(--sh-line); box-shadow: var(--sh-shadow); margin: 0; }
.sh-hierarchy-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.sh-filter-group { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sh-ink-2); }
.sh-filter-group .sh-ms { font-size: 18px; color: var(--sh-primary); }
.sh-filter-select { width: auto; max-width: 260px; }
.sh-hierarchy-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sh-ink-3); }
.sh-filter-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--sh-primary-soft); color: var(--sh-on-primary-soft); }
.sh-gdmt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 10px; }
.sh-gdmt-card { padding: 14px; border-radius: 16px; background: var(--sh-soft); border: 1px solid var(--sh-line); display: flex; flex-direction: column; gap: 8px; }
.sh-gdmt-card.sh-p1 { border-left: 4px solid var(--sh-brand-magenta); }
.sh-gdmt-card.sh-p2 { border-left: 4px solid var(--sh-primary); }
.sh-gdmt-card.sh-p3 { border-left: 4px solid var(--sh-warning); }
.sh-gdmt-card.sh-p4 { border-left: 4px solid var(--sh-success); }
.sh-gdmt-head { display: flex; justify-content: space-between; align-items: center; }
.sh-gdmt-title { font-size: 13px; font-weight: 600; color: var(--sh-ink); }
.sh-gdmt-val { font-size: 15px; font-weight: 700; color: var(--sh-ink); }
.sh-gdmt-bar { height: 8px; width: 100%; background: var(--sh-line); border-radius: 999px; overflow: hidden; display: flex; }
.sh-gdmt-bar i { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.sh-reason-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sh-reason-tag { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: var(--sh-soft-2); color: var(--sh-ink-2); }
.sh-traj-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--sh-line); }
.sh-traj-row:last-child { border-bottom: 0; }
.sh-traj-stages { display: flex; align-items: center; gap: 8px; }
.sh-traj-pill { padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--sh-soft); }
.sh-traj-arrow { color: var(--sh-ink-3); font-size: 14px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) dialog.sh-export-dialog { border: 0; border-radius: 20px; padding: 24px; width: min(560px, 94vw); background: var(--sh-card); color: var(--sh-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) dialog.sh-export-dialog::backdrop { background: rgba(18, 20, 24, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.sh-ed-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--sh-line); }
.sh-ed-head h3 { margin: 0; font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--sh-ink); }
.sh-ed-form { display: flex; flex-direction: column; gap: 16px; }
.sh-ed-section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sh-ink-3); margin-bottom: 6px; }
.sh-ed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sh-ed-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--sh-line); border-radius: 12px; background: var(--sh-soft); cursor: pointer; font-size: 13px; transition: all 0.15s ease; }
.sh-ed-option:hover { background: var(--sh-soft-2); }
.sh-ed-option input { margin-top: 2px; }
.sh-ed-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--sh-line); }
.sh-teams-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; }
@media (max-width: 1100px) {
  .sh-teams-grid { grid-template-columns: 1fr; }
}
#dashRoot { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.sh-dash-tabs { display: flex; gap: 8px; padding: 6px; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 16px; margin: 0; overflow-x: auto; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); scrollbar-width: thin; }
.sh-dash-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 12px; border: 0; background: transparent; color: var(--sh-ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); white-space: nowrap; }
.sh-dash-tab:hover { background: var(--sh-soft); color: var(--sh-ink); }
.sh-dash-tab.sh-active { background: var(--sh-primary); color: var(--sh-on-primary); font-weight: 600; box-shadow: 0 2px 10px rgba(26, 95, 180, 0.25); }
.sh-dash-tab.sh-active .sh-tab-badge { background: rgba(255, 255, 255, 0.25); color: #fff; }
.sh-tab-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--sh-soft-2); color: var(--sh-ink-2); font-weight: 600; }
.sh-kpi { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.sh-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); border-color: var(--sh-primary-soft); }
.sh-kpi .sh-ico.sh-brand { background: var(--sh-brand-soft); color: var(--sh-brand-magenta); }
.sh-kpi .sh-ico.sh-success { background: var(--sh-success-soft); color: var(--sh-success); }
.sh-kpi .sh-ico.sh-warn { background: var(--sh-warning-soft); color: var(--sh-warning); }
.sh-kpi .sh-ico.sh-error { background: var(--sh-error-soft); color: var(--sh-error); }
.sh-dash-breadcrumbs-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0; }
.sh-dash-breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--sh-ink-2); }
.sh-dash-breadcrumbs a { color: var(--sh-primary); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.sh-dash-breadcrumbs a:hover { text-decoration: underline; }
.sh-dash-breadcrumbs .sh-sep { color: var(--sh-ink-3); font-size: 14px; }
.sh-dash-fade-in { display: flex; flex-direction: column; gap: 20px; width: 100%; animation: sh-dashFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes sh-dashFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.sh-table-wrap.sh-sticky-head thead th { position: sticky; top: 0; background: var(--sh-card); z-index: 2; box-shadow: 0 1px 0 var(--sh-line); }
.sh-export-studio-wrap { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.sh-export-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; padding: 24px; background: linear-gradient(135deg, rgba(26, 95, 180, 0.06) 0%, rgba(138, 43, 226, 0.04) 100%); border: 1px solid var(--sh-primary-soft); border-radius: var(--sh-radius); }
.sh-export-hero-content { max-width: 720px; }
.sh-export-hero-title { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; color: var(--sh-ink); margin: 0 0 8px 0; }
.sh-export-hero-desc { font-size: 14px; color: var(--sh-ink-2); line-height: 1.5; margin: 0; }
.sh-export-hero-badges { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sh-export-studio-grid { display: grid; grid-template-columns: minmax(320px, 390px) minmax(0, 1fr); gap: 20px; align-items: start; }
.sh-export-filter-panel { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
@media (max-width: 1100px) {
  .sh-export-studio-wrap { max-width: 100%; overflow-x: hidden; }
  .sh-export-studio-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; width: 100%; max-width: 100%; }
  .sh-export-filter-panel { position: static !important; top: auto !important; }
}
@media (max-width: 640px) {
  .sh-export-hero { padding: 16px 14px; gap: 14px; }
  .sh-export-hero-title { font-size: 18px; }
  .sh-export-filter-panel { padding: 14px; }
  .sh-export-filter-group { padding: 12px; }
  .sh-export-cohort-strip { padding: 12px 14px; gap: 12px; }
  .sh-export-presets-grid { grid-template-columns: 1fr; }
}
.sh-export-filter-group { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--sh-soft); border: 1px solid var(--sh-line); border-radius: 14px; }
.sh-export-filter-group-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--sh-ink); text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 2px; }
.sh-export-filter-group-title .sh-ms { font-size: 16px; color: var(--sh-primary); }
.sh-export-filter-row { display: flex; flex-direction: column; gap: 6px; }
.sh-export-filter-row label { font-size: 12.5px; font-weight: 600; color: var(--sh-ink); letter-spacing: 0.15px; margin-bottom: 0; }
.sh-export-filter-row input { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid #747a86; background: var(--sh-card); color: var(--sh-ink); font-size: 14px; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.sh-export-filter-row input:hover { border-color: var(--sh-ink); }
.sh-export-filter-row input:focus { outline: none; border-color: var(--sh-primary); box-shadow: 0 0 0 3px var(--sh-primary-soft); }
.sh-export-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-export-pill-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--sh-line); background: var(--sh-card); color: var(--sh-ink-2); font-size: 12.5px; font-weight: 500; cursor: pointer; user-select: none; transition: all 0.15s ease; }
.sh-export-pill-btn:hover { background: var(--sh-soft-2); color: var(--sh-ink); border-color: var(--sh-ink-3); }
.sh-export-pill-btn.sh-active { background: var(--sh-primary); border-color: var(--sh-primary); color: var(--sh-on-primary); font-weight: 600; box-shadow: 0 2px 6px rgba(26, 95, 180, 0.25); }
.sh-export-pill-btn.sh-active .sh-ms { color: #fff; }
.sh-export-pill-check { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--sh-line); background: var(--sh-card); color: var(--sh-ink-2); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; }
.sh-export-pill-check input { position: absolute; opacity: 0; pointer-events: none; }
.sh-export-pill-check:hover { border-color: var(--sh-primary); color: var(--sh-ink); }
.sh-export-pill-check:has(input:checked) { background: var(--sh-primary-soft); border-color: var(--sh-primary); color: var(--sh-primary); font-weight: 600; }
.sh-export-toggle-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 10px; }
.sh-export-toggle-info b { display: block; font-size: 13px; color: var(--sh-ink); }
.sh-export-toggle-info small { font-size: 11.5px; color: var(--sh-ink-3); }
.sh-export-toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.sh-export-toggle-switch input { opacity: 0; width: 0; height: 0; }
.sh-export-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--sh-soft-2); border: 1px solid var(--sh-line); transition: .2s ease; border-radius: 999px; }
.sh-export-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: white; transition: .2s ease; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.sh-export-toggle-switch input:checked+.sh-export-slider { background-color: var(--sh-primary); border-color: var(--sh-primary); }
.sh-export-toggle-switch input:checked+.sh-export-slider:before { transform: translateX(20px); }
.sh-export-cohort-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 14px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); flex-wrap: wrap; }
.sh-export-cohort-stats { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.sh-export-cohort-stat { display: flex; flex-direction: column; }
.sh-export-cohort-stat small { font-size: 11.5px; color: var(--sh-ink-3); text-transform: uppercase; letter-spacing: 0.02em; }
.sh-export-cohort-stat b { font-size: 20px; font-weight: 700; color: var(--sh-ink); line-height: 1.2; }
.sh-export-presets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sh-export-preset-card { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 20px; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; position: relative; }
.sh-export-preset-card:hover { transform: translateY(-2px); border-color: var(--sh-primary); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); }
.sh-export-preset-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sh-export-preset-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.sh-export-preset-icon.sh-primary { background: var(--sh-primary-soft); color: var(--sh-primary); }
.sh-export-preset-icon.sh-brand { background: var(--sh-brand-soft); color: var(--sh-brand-magenta); }
.sh-export-preset-icon.sh-success { background: var(--sh-success-soft); color: var(--sh-success); }
.sh-export-preset-icon.sh-warn { background: var(--sh-warning-soft); color: var(--sh-warning); }
.sh-export-preset-icon.sh-danger { background: var(--sh-error-soft); color: var(--sh-error); }
.sh-export-preset-icon.sh-dark { background: var(--sh-soft-2); color: var(--sh-ink); }
.sh-export-preset-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--sh-soft); color: var(--sh-ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.sh-export-preset-card h3 { margin: 0 0 6px 0; font-size: 16px; font-weight: 600; color: var(--sh-ink); }
.sh-export-preset-card p { margin: 0; font-size: 13px; color: var(--sh-ink-2); line-height: 1.45; }
.sh-export-preset-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sh-line); }
.sh-export-preset-foot .sh-btn { width: 100%; justify-content: center; }
.sh-export-studio-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; max-width: 100%; width: 100%; }
#exportPreviewSection { min-width: 0; max-width: 100%; width: 100%; overflow: hidden; box-sizing: border-box; }
.sh-export-preview-table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; border: 1px solid var(--sh-line); border-radius: 12px; box-sizing: border-box; display: block; }
.sh-export-preview-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 12.5px; }
.sh-export-preview-table th { background: var(--sh-soft); padding: 10px 12px; font-weight: 600; text-align: left; border-bottom: 1px solid var(--sh-line); white-space: nowrap; }
.sh-export-preview-table td { padding: 10px 12px; border-bottom: 1px solid var(--sh-line); white-space: nowrap; }
.sh-export-preview-table tr:last-child td { border-bottom: none; }
.sh-export-preview-foot { padding: 10px 14px; background: var(--sh-soft); font-size: 12px; color: var(--sh-ink-2); border-top: 1px solid var(--sh-line); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 820px) {
  #exportPreviewSection .sh-card-head { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; flex-wrap: wrap !important; }
  #exportPreviewSection .sh-card-head > div:first-child { width: 100% !important; }
  #exportPreviewSection .sh-card-head-actions { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 10px !important; flex-wrap: nowrap !important; }
  #exportPreviewSection .sh-card-head-actions .sh-tag { white-space: nowrap !important; flex-shrink: 0 !important; }
}
@media (max-width: 480px) {
  #exportPreviewSection .sh-card-head-actions { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  #exportPreviewSection .sh-card-head-actions .sh-tag { align-self: flex-start !important; }
}
.sh-admin-tabs-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--sh-line); padding-bottom: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sh-admin-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--sh-ink-2); text-decoration: none; background: transparent; transition: all 0.15s ease; white-space: nowrap; min-height: 42px; }
.sh-admin-tab:hover { background: var(--sh-soft); color: var(--sh-ink); }
.sh-admin-tab.sh-active { background: var(--sh-primary); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(26, 95, 180, 0.25); }
.sh-admin-tab .sh-tab-badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: var(--sh-soft-2); color: var(--sh-ink); }
.sh-admin-tab.sh-active .sh-tab-badge { background: rgba(255, 255, 255, 0.25); color: #fff; }
.sh-admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.sh-admin-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .sh-admin-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .sh-admin-toolbar-left { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
  .sh-admin-toolbar-left .sh-search-expandable { width: 100% !important; max-width: 100% !important; border-radius: 12px; background: var(--sh-card); border-color: var(--sh-line); box-shadow: none; cursor: default; }
  .sh-admin-toolbar-left .sh-search-expandable input[type="search"] { opacity: 1 !important; pointer-events: auto !important; }
  .sh-admin-toolbar-left .sh-filter-pills { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
}
.sh-admin-search-box { position: relative; min-width: 240px; max-width: 360px; flex: 1; }
.sh-admin-search-box .sh-ms { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--sh-ink-3); pointer-events: none; }
.sh-admin-search-box input { width: 100%; min-height: 40px; padding: 8px 12px 8px 38px; border: 1.5px solid transparent; border-radius: 10px; background: var(--sh-soft); color: var(--sh-ink); font-size: 13.5px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.sh-admin-search-box input:focus { border-color: var(--sh-primary); background: var(--sh-card); outline: none; box-shadow: 0 0 0 3px var(--sh-brand-soft); }
.sh-filter-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sh-filter-pill { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--sh-line); background: var(--sh-card); color: var(--sh-ink-2); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all 0.15s; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.sh-filter-pill:hover { background: var(--sh-soft); color: var(--sh-ink); }
.sh-filter-pill.sh-active { background: var(--sh-soft-2); border-color: var(--sh-ink); color: var(--sh-ink); font-weight: 600; }
.sh-admin-kpi-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.sh-admin-kpi-card { padding: 14px 18px; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 14px; display: flex; align-items: center; gap: 14px; }
.sh-admin-kpi-card .sh-kpi-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: var(--sh-primary-soft); color: var(--sh-primary); flex-shrink: 0; }
.sh-admin-kpi-card .sh-kpi-num { font-size: 20px; font-weight: 700; color: var(--sh-ink); line-height: 1.2; }
.sh-admin-kpi-card .sh-kpi-lbl { font-size: 12px; color: var(--sh-ink-2); margin-top: 2px; }
.sh-admin-table { width: 100%; border-collapse: collapse; }
.sh-admin-table th { background: var(--sh-soft); padding: 12px 14px; font-size: 12px; font-weight: 600; color: var(--sh-ink-2); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--sh-line); text-align: left; }
.sh-admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--sh-line); vertical-align: middle; font-size: 13.5px; }
.sh-admin-table tr:hover td { background: rgba(0, 0, 0, 0.015); }
.sh-admin-user-cell { display: flex; align-items: center; gap: 12px; }
.sh-admin-user-avatar { width: 38px; height: 38px; min-width: 38px; min-height: 38px; border-radius: 50%; overflow: hidden; background: var(--sh-primary); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; }
.sh-admin-user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; aspect-ratio: 1 / 1; }
.sh-admin-user-avatar.sh-central { background: #0284c7; }
.sh-admin-user-avatar.sh-superadmin { background: var(--sh-brand-magenta); }
.sh-admin-user-name { font-weight: 600; color: var(--sh-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.sh-admin-user-sub { font-size: 12px; color: var(--sh-ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.sh-admin-user-handle { font-family: monospace; color: var(--sh-ink-3); font-size: 11.5px; }
.sh-chip-role { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sh-chip-role .sh-ms { font-size: 15px; }
.sh-chip-role.sh-inv { background: var(--sh-success-soft); color: var(--sh-on-success-soft); }
.sh-chip-role.sh-central { background: var(--sh-primary-soft); color: var(--sh-on-primary-soft); }
.sh-chip-role.sh-admin { background: var(--sh-brand-soft); color: var(--sh-brand-magenta); }
.sh-status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.sh-status-pill .sh-ms { font-size: 14px; }
.sh-status-pill.sh-active { background: var(--sh-success-soft); color: var(--sh-on-success-soft); }
.sh-status-pill.sh-inactive { background: var(--sh-soft-2); color: var(--sh-ink-3); }
.sh-site-chips-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.sh-site-badge { font-weight: 700; font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: var(--sh-soft-2); color: var(--sh-ink); letter-spacing: 0.5px; border: 1px solid var(--sh-line); }
.sh-zone-subtext { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--sh-ink-2); margin-top: 4px; }
.sh-zone-subtext .sh-ms { font-size: 13px; color: var(--sh-ink-3); }
.sh-zone-tag { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 12px; display: inline-block; white-space: nowrap; }
.sh-zone-tag.sh-north { background: #e0f2fe; color: #0369a1; }
.sh-zone-tag.sh-central { background: #f3e8ff; color: #6b21a8; }
.sh-zone-tag.sh-south { background: #dcfce7; color: #15803d; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) dialog.sh-admin-modal { border: 0; border-radius: 20px; padding: 0; width: min(640px, 94vw); max-height: 90vh; background: var(--sh-card); color: var(--sh-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); overflow: visible; margin: auto; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) dialog.sh-admin-modal.sh-admin-modal-wide { width: min(780px, 95vw); }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) dialog.sh-admin-modal::backdrop { background: rgba(18, 20, 24, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.sh-modal-form { display: flex; flex-direction: column; max-height: 90vh; }
.sh-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--sh-line); background: var(--sh-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top-left-radius: 20px; border-top-right-radius: 20px; }
#dlgAddSite,
#dlgEditSite { overflow: visible; }
#dlgAddSite .sh-modal-body,
#dlgEditSite .sh-modal-body { overflow: visible; padding-bottom: 30px; }
#dlgAddSite .sh-modal-form,
#dlgEditSite .sh-modal-form { overflow: visible; }
.sh-modal-head-title { display: flex; align-items: center; gap: 10px; }
.sh-modal-head-title .sh-ms { font-size: 24px; color: var(--sh-primary); }
.sh-modal-head-title h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--sh-ink); }
.sh-modal-head-title p { margin: 2px 0 0; font-size: 12.5px; color: var(--sh-ink-2); }
.sh-modal-close-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--sh-ink-2); display: grid; place-items: center; cursor: pointer; transition: background 0.15s; }
.sh-modal-close-btn:hover { background: var(--sh-soft-2); color: var(--sh-ink); }
.sh-modal-body { padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.sh-modal-foot { padding: 14px 22px; border-top: 1px solid var(--sh-line); background: var(--sh-soft); display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.sh-modal-foot .sh-btn { min-height: 42px; padding: 8px 18px; font-size: 13.5px; }
.sh-form-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--sh-ink-2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.sh-form-section-title .sh-ms { font-size: 16px; color: var(--sh-primary); }
.sh-form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 600px) {
  .sh-form-grid-2 { grid-template-columns: 1fr; }
}
.sh-form-field { display: flex; flex-direction: column; gap: 5px; }
.sh-form-field label { font-size: 12.5px; font-weight: 600; color: var(--sh-ink); display: flex; align-items: center; gap: 4px; }
.sh-form-field input,
.sh-form-field select { min-height: 44px; padding: 9px 12px; border: 1px solid var(--sh-line); border-radius: 10px; background: var(--sh-card); color: var(--sh-ink); font-size: 13.5px; width: 100%; }
.sh-form-field input:focus,
.sh-form-field select:focus { border-color: var(--sh-primary); outline: none; box-shadow: 0 0 0 2px var(--sh-primary-soft); }
.sh-form-field .sh-cb { position: relative; width: 100%; }
.sh-form-field .sh-cb input { padding-right: 38px; }
.sh-role-radio-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 600px) {
  .sh-role-radio-group { grid-template-columns: 1fr; }
}
.sh-role-radio-option { position: relative; border: 1.5px solid var(--sh-line); border-radius: 12px; padding: 12px 14px; background: var(--sh-card); cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: all 0.15s ease; min-height: 86px; }
.sh-role-radio-option:hover:not(.sh-locked) { border-color: #b0b7c3; background: var(--sh-soft); }
.sh-role-radio-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sh-role-radio-option:has(input:checked) { border-color: var(--sh-primary); background: var(--sh-primary-soft); box-shadow: 0 0 0 1px var(--sh-primary); }
.sh-role-radio-option.sh-locked { opacity: 0.5; cursor: not-allowed; background: var(--sh-soft); }
.sh-role-opt-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--sh-ink); }
.sh-role-opt-desc { font-size: 11.5px; color: var(--sh-ink-2); line-height: 1.35; }
.sh-zone-groups-container { display: flex; flex-direction: column; gap: 12px; }
.sh-zone-group-card { border: 1px solid var(--sh-line); border-radius: 12px; padding: 12px 14px; background: var(--sh-soft); }
.sh-zone-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sh-zone-group-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.sh-zone-sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.sh-site-check-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--sh-line); background: var(--sh-card); cursor: pointer; transition: all 0.15s; min-height: 44px; user-select: none; }
.sh-site-check-item:hover { border-color: #9aa1af; }
.sh-site-check-item:has(input:checked) { border-color: var(--sh-primary); background: #f0f5fc; font-weight: 600; }
.sh-site-check-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; accent-color: var(--sh-primary); }
.sh-site-check-text { display: flex; flex-direction: column; line-height: 1.25; }
.sh-site-check-name { font-size: 12.5px; color: var(--sh-ink); }
.sh-site-check-city { font-size: 11px; color: var(--sh-ink-2); }
.sh-scope-callout { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--sh-line); font-size: 13px; line-height: 1.45; }
.sh-scope-callout .sh-ms { font-size: 22px; flex-shrink: 0; }
.sh-scope-callout.sh-central { background: #f0f7ff; border-color: #b8d9fc; color: #0b2a57; }
.sh-scope-callout.sh-admin { background: #fdf4f9; border-color: #f3c2e6; color: #570b42; }
.sh-zone-picker-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sh-zone-search-box { position: relative; flex: 1 1 240px; }
.sh-zone-search-box .sh-ms { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--sh-ink-3); pointer-events: none; }
.sh-zone-search-box input { width: 100%; min-height: 42px; padding: 8px 12px 8px 38px; border: 1px solid var(--sh-line); border-radius: 12px; background: var(--sh-card); color: var(--sh-ink); font-size: 13.5px; transition: all 0.15s; }
.sh-zone-search-box input:focus { border-color: var(--sh-primary); outline: none; box-shadow: 0 0 0 3px var(--sh-primary-soft); }
.sh-zone-select-filter { min-height: 42px; padding: 8px 14px; border: 1px solid var(--sh-line); border-radius: 12px; background: var(--sh-card); color: var(--sh-ink); font-size: 13px; flex: 0 1 220px; cursor: pointer; }
.sh-zone-pills-bar { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 8px; scrollbar-width: thin; }
.sh-zone-pill-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--sh-line); background: var(--sh-card); color: var(--sh-ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s ease; min-height: 36px; user-select: none; }
.sh-zone-pill-btn:hover { background: var(--sh-soft); color: var(--sh-ink); border-color: #adb5bd; }
.sh-zone-pill-btn.sh-active { background: var(--sh-primary); color: #fff; border-color: var(--sh-primary); }
.sh-zone-pill-badge { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--sh-soft-2); color: var(--sh-ink); }
.sh-zone-pill-btn.sh-active .sh-zone-pill-badge { background: rgba(255, 255, 255, 0.25); color: #fff; }
.sh-zone-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sh-success); display: inline-block; }
.sh-assigned-centres-box { background: #f0f7ff; border: 1px solid #b8d9fc; border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; }
.sh-assigned-centres-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sh-assigned-centres-title { font-size: 13px; font-weight: 700; color: #0b2a57; display: flex; align-items: center; gap: 6px; }
.sh-assigned-centres-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-assigned-site-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--sh-card); border: 1px solid #b8d9fc; font-size: 12px; color: var(--sh-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.sh-assigned-site-chip b { color: var(--sh-primary); }
.sh-assigned-site-chip .sh-chip-del { cursor: pointer; border: 0; background: transparent; padding: 0; color: var(--sh-ink-3); display: grid; place-items: center; font-size: 15px; transition: color 0.15s; }
.sh-assigned-site-chip .sh-chip-del:hover { color: var(--sh-error); }
.sh-hospital-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.sh-hospital-select-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--sh-line); background: var(--sh-card); cursor: pointer; transition: all 0.15s ease; min-height: 56px; user-select: none; }
.sh-hospital-select-card:hover { border-color: #9aa1af; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.sh-hospital-select-card.sh-selected { border-color: var(--sh-primary); background: #f0f5fc; }
.sh-hospital-select-card input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; cursor: pointer; accent-color: var(--sh-primary); flex-shrink: 0; }
.sh-hospital-card-content { flex: 1; min-width: 0; }
.sh-hospital-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.sh-hospital-card-code { font-weight: 700; font-size: 12px; color: var(--sh-primary); background: var(--sh-primary-soft); padding: 1px 6px; border-radius: 6px; }
.sh-hospital-card-name { font-size: 13px; font-weight: 600; color: var(--sh-ink); line-height: 1.3; margin-bottom: 3px; }
.sh-hospital-card-meta { font-size: 11.5px; color: var(--sh-ink-2); display: flex; align-items: center; gap: 8px; }
.sh-hospital-card-meta .sh-ms { font-size: 14px; vertical-align: -2px; }
.sh-zone-group-card.sh-collapsed .sh-zone-sites-grid { display: none; }
.sh-zone-toggle-icon { transition: transform 0.2s ease; font-size: 20px; color: var(--sh-ink-2); }
.sh-zone-group-card.sh-collapsed .sh-zone-toggle-icon { transform: rotate(-90deg); }
.sh-zone-selected-count { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: var(--sh-primary-soft); color: var(--sh-primary); }
.sh-cb.sh-open-up .sh-cb-list { top: auto; bottom: calc(100% + 6px); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18), 0 -2px 6px rgba(0, 0, 0, 0.08); }
.sh-assigned-zones-card { background: var(--sh-soft); border: 1px solid var(--sh-line); border-radius: 14px; padding: 12px 14px; margin-top: 10px; }
.sh-assigned-zones-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sh-assigned-zones-title { font-size: 12.5px; font-weight: 700; color: var(--sh-ink); display: flex; align-items: center; gap: 6px; }
.sh-assigned-zones-title .sh-ms { font-size: 16px; color: var(--sh-success); }
.sh-btn-clear-zones { font-size: 11.5px; color: var(--sh-ink-2); background: transparent; border: 0; cursor: pointer; text-decoration: underline; padding: 2px 4px; }
.sh-btn-clear-zones:hover { color: var(--sh-danger); }
.sh-assigned-zones-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 36px; align-items: center; }
.sh-assigned-zone-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: #f0f7ff; border: 1.5px solid #b8d9fc; color: #0b2a57; font-size: 12.5px; font-weight: 600; transition: all 0.15s ease; }
.sh-assigned-zone-chip:hover { border-color: var(--sh-primary); }
.sh-assigned-zone-chip .sh-ms { font-size: 15px; color: var(--sh-primary); }
.sh-assigned-zone-chip .sh-zone-name { font-weight: 600; }
.sh-assigned-zone-chip .sh-zone-badge { font-size: 11px; font-weight: 500; background: rgba(11, 42, 87, 0.1); color: #0b2a57; padding: 1px 7px; border-radius: 10px; }
.sh-assigned-zone-chip .sh-chip-del { border: 0; background: transparent; cursor: pointer; padding: 0; margin-left: 2px; color: #64748b; display: grid; place-items: center; border-radius: 50%; transition: color 0.15s; }
.sh-assigned-zone-chip .sh-chip-del:hover { color: var(--sh-danger); }
.sh-empty-zones-hint { font-size: 12px; color: var(--sh-ink-3); display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.sh-empty-zones-hint .sh-ms { font-size: 16px; }
.sh-zone-scope-summary { margin-top: 10px; }
.sh-scope-hint-box { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; }
.sh-scope-hint-box .sh-ms { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.sh-scope-hint-box.sh-active { background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; }
.sh-scope-hint-box.sh-none { background: var(--sh-soft); border: 1px solid var(--sh-line); color: var(--sh-ink-2); }
.sh-scope-sites-list { font-size: 12px; color: #166534; margin-top: 4px; }
.sh-scope-sites-auto-note { font-size: 11px; color: #15803d; margin-top: 3px; font-style: italic; }
.sh-assigned-site-summary-card,
.sh-assigned-site-card-active { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--sh-card); border: 1px solid var(--sh-line); border-left: 4px solid var(--sh-primary); border-radius: 12px; margin-top: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.sh-assigned-site-card-active .sh-site-badge { font-size: 13px; padding: 4px 8px; font-weight: 700; border-radius: 6px; background: var(--sh-primary-soft); color: var(--sh-primary); }
.sh-assigned-site-cell { display: flex; flex-direction: column; gap: 3px; }
.sh-site-cb-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
.sh-site-cb-row .sh-site-badge { font-size: 11px; padding: 3px 6px; flex-shrink: 0; letter-spacing: 0.5px; background: var(--sh-primary-soft); color: var(--sh-primary); font-weight: 700; border-radius: 6px; }
.sh-site-cb-row .sh-site-cb-name { font-weight: 600; font-size: 13.5px; color: var(--sh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-site-cb-row .sh-site-cb-zone { font-size: 11px; flex-shrink: 0; padding: 2px 8px; display: inline-flex; align-items: center; gap: 3px; }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-search input[type="search"],
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-search input[type="search"]:focus,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) label.sh-search input[type="search"]:focus-visible { flex: 1; min-width: 0; height: auto; min-height: 0; width: auto; border: 0; background: transparent; box-shadow: none; outline: none; padding: 0; font-size: 14px; color: var(--sh-ink); }
.sh-truncate,
[data-truncate] { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.sh-filter-pill { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.sh-zone-subtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 380px; }
.sh-cb input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-cb-list li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-dash-tab span,
.sh-admin-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-tab-short { display: none !important; }
.sh-tab-full { display: inline !important; }
@media (max-width: 1024px) {
  .sh-dash-tabs .sh-tab-full,
  .sh-admin-tabs-nav .sh-tab-full { display: none !important; }
  .sh-dash-tabs .sh-tab-short,
  .sh-admin-tabs-nav .sh-tab-short { display: inline !important; }
}
@media (max-width: 520px) {
  .sh-auth-tabs .sh-tab-full { display: none !important; }
  .sh-auth-tabs .sh-tab-short { display: inline !important; }
}
.sh-dash-tabs { gap: 4px; padding: 4px; border-radius: 12px; }
.sh-dash-tab { padding: 6px 10px; font-size: 12.5px; min-height: 36px; gap: 6px; border-radius: 10px; }
.sh-dash-tab .sh-tab-badge { padding: 1px 6px; font-size: 10px; }
.sh-admin-tabs-nav { gap: 4px; margin-bottom: 14px; padding-bottom: 8px; }
.sh-admin-tab { padding: 8px 12px; font-size: 13px; min-height: 38px; gap: 6px; border-radius: 10px; }
.sh-tabs { gap: 4px; padding: 4px; }
.sh-tabs button { padding: 6px 10px; font-size: 13px; gap: 4px; }
.sh-auth-tabs button { font-size: 13px; padding: 6px 10px; }
@media (max-width: 640px) {
  .sh-dash-tabs { gap: 2px; padding: 3px; border-radius: 10px; }
  .sh-dash-tab { padding: 5px 8px; font-size: 12px; min-height: 34px; gap: 4px; border-radius: 8px; }
  .sh-dash-tab .sh-ms { font-size: 16px !important; }
  .sh-dash-tab .sh-tab-badge { padding: 1px 5px; font-size: 9.5px; }
  .sh-admin-tabs-nav { gap: 2px; margin-bottom: 10px; padding-bottom: 6px; }
  .sh-admin-tab { padding: 6px 8px; font-size: 12px; min-height: 34px; gap: 4px; border-radius: 8px; }
  .sh-admin-tab .sh-ms { font-size: 16px !important; }
  .sh-tabs button { padding: 5px 8px; font-size: 12px; }
  .sh-auth-tabs button { font-size: 12px; padding: 5px 6px; }
}
@media (max-width: 1024px) {
  .sh-pt .sh-pt-chips .sh-chip.sh-chip,
  .sh-pt.sh-on .sh-pt-chips .sh-chip.sh-chip,
  [data-theme="logo"] .sh-pt.sh-on .sh-pt-chips .sh-chip.sh-chip { border: none !important; padding: 2px 8px 2px 5px !important; height: 24px; gap: 3px !important; }
  .sh-pt .sh-pt-chips .sh-chip.sh-chip { align-items: center !important; line-height: 1 !important; }
  .sh-pt .sh-pt-chips .sh-chip.sh-chip .sh-chip-ico-wrap,
  .sh-pt .sh-pt-chips .sh-chip.sh-chip .sh-chip-lbl,
  .sh-pt .sh-pt-chips .sh-chip.sh-chip b.sh-chip-v { display: inline-flex !important; align-items: center !important; line-height: 1 !important; }
  .sh-pt .sh-pt-chips .sh-chip.sh-chip .sh-ms { line-height: 1 !important; vertical-align: middle; }
  .sh-pt .sh-pt-chips .sh-chip.sh-chip .sh-chip-ico-done { width: 14px; height: 14px; }
  .sh-pt .sh-pt-chips .sh-chip.sh-chip .sh-chip-ico-done .sh-ms,
  .sh-pt .sh-pt-chips .sh-chip.sh-chip .sh-chip-ico-clock,
  .sh-pt .sh-pt-chips .sh-chip.sh-chip .sh-chip-ico-warn,
  .sh-pt .sh-pt-chips .sh-chip.sh-chip .sh-chip-ico-not,
  .sh-pt .sh-pt-chips .sh-chip.sh-chip .sh-ms { font-size: 14px !important; }
  .sh-pt .sh-pt-chips .sh-chip.sh-chip .sh-chip-txt,
  .sh-pt .sh-pt-chips .sh-chip.sh-chip .sh-chip-colon { display: none !important; }
  .sh-pt .sh-pt-chips .sh-chip.sh-chip .sh-chip-v,
  .sh-pt .sh-pt-chips .sh-chip.sh-chip b.sh-chip-v { font-size: 10.5px !important; font-weight: 700; position: relative; top: 1px; }
  .sh-pt-chip-sep { height: 14px; }
}
.sh-pt .sh-pt-chips .sh-chip.sh-chip,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-chip,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-chips .sh-chip.sh-chip { border: 0 !important; }
@media (min-width: 1025px) {
  .sh-pt-sync .sh-pt-sync-icon,
  .sh-pt-sync .sh-ms { display: none !important; }
  .sh-pt-sync { padding: 3px 9px !important; }
}
.sh-pt .sh-pt-chips .sh-chip.sh-Completed,
.sh-pt .sh-pt-chips .sh-chip.sh-Done { background: #d5f2e1 !important; color: #164b30 !important; }
.sh-pt .sh-pt-chips .sh-chip.sh-Completed .sh-chip-lbl,
.sh-pt .sh-pt-chips .sh-chip.sh-Completed b,
.sh-pt .sh-pt-chips .sh-chip.sh-Completed span,
.sh-pt .sh-pt-chips .sh-chip.sh-Done .sh-chip-lbl,
.sh-pt .sh-pt-chips .sh-chip.sh-Done b,
.sh-pt .sh-pt-chips .sh-chip.sh-Done span { color: #164b30 !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Completed,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Done,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Completed,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Done { background: #23794d !important; color: #ffffff !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Completed .sh-chip-lbl,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Completed b,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Completed span,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Done .sh-chip-lbl,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Done b,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Done span,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Completed .sh-chip-lbl,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Completed b,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Completed span,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Done .sh-chip-lbl,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Done b,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Done span { color: #ffffff !important; }
.sh-pt .sh-pt-sync.sh-synced { background: var(--sh-soft) !important; color: var(--sh-ink-2) !important; }
.sh-pt .sh-pt-sync.sh-synced .sh-pt-sync-icon,
.sh-pt .sh-pt-sync.sh-synced .sh-pt-sync-text,
.sh-pt .sh-pt-sync.sh-synced span:not(.sh-ms) { color: var(--sh-ink-2) !important; }
.sh-pt.sh-on .sh-pt-sync.sh-synced,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-sync.sh-synced { background: rgba(255, 255, 255, 0.12) !important; color: #e5e7eb !important; }
.sh-pt.sh-on .sh-pt-sync.sh-synced .sh-pt-sync-icon,
.sh-pt.sh-on .sh-pt-sync.sh-synced .sh-pt-sync-text,
.sh-pt.sh-on .sh-pt-sync.sh-synced span:not(.sh-ms),
[data-theme="logo"] .sh-pt.sh-on .sh-pt-sync.sh-synced .sh-pt-sync-icon,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-sync.sh-synced .sh-pt-sync-text,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-sync.sh-synced span:not(.sh-ms) { color: #e5e7eb !important; }
.sh-pt.sh-on,
[data-theme="logo"] .sh-pt.sh-on { background: #000000; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Completed,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Done { background: #26b06a !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-NotStarted,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Not { background: #25405f !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-NotStarted .sh-chip-lbl,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Not .sh-chip-lbl,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-NotStarted b,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Not b,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-NotStarted span,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Not span { color: #e2ecf7 !important; }
.sh-pt .sh-pt-chips .sh-chip.sh-Completed,
.sh-pt .sh-pt-chips .sh-chip.sh-Done { background: #1f9d5c !important; color: #ffffff !important; }
.sh-pt .sh-pt-chips .sh-chip.sh-Completed .sh-chip-lbl,
.sh-pt .sh-pt-chips .sh-chip.sh-Completed b,
.sh-pt .sh-pt-chips .sh-chip.sh-Completed span,
.sh-pt .sh-pt-chips .sh-chip.sh-Done .sh-chip-lbl,
.sh-pt .sh-pt-chips .sh-chip.sh-Done b,
.sh-pt .sh-pt-chips .sh-chip.sh-Done span { color: #ffffff !important; }
.sh-pt .sh-pt-chips .sh-chip.sh-NotStarted,
.sh-pt .sh-pt-chips .sh-chip.sh-Not { background: #dfe2e7 !important; color: #3b4350 !important; }
.sh-pt .sh-pt-chips .sh-chip.sh-NotStarted .sh-chip-lbl,
.sh-pt .sh-pt-chips .sh-chip.sh-Not .sh-chip-lbl,
.sh-pt .sh-pt-chips .sh-chip.sh-NotStarted b,
.sh-pt .sh-pt-chips .sh-chip.sh-Not b,
.sh-pt .sh-pt-chips .sh-chip.sh-NotStarted span,
.sh-pt .sh-pt-chips .sh-chip.sh-Not span { color: #3b4350 !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-NotStarted,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Not,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-chips .sh-chip.sh-NotStarted,
[data-theme="logo"] .sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Not { background: #1f3247 !important; color: #c9d8e8 !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-NotStarted .sh-chip-lbl,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Not .sh-chip-lbl,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-NotStarted b,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Not b,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-NotStarted span,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Not span { color: #c9d8e8 !important; }
.sh-pt b.sh-pt-id,
.sh-pt-head b,
.sh-pt-name,
.sh-pt-inv,
.sh-pt-updated,
.sh-pt .sh-pt-chips .sh-chip.sh-NotStarted .sh-chip-lbl,
.sh-pt .sh-pt-chips .sh-chip.sh-Not .sh-chip-lbl,
.sh-pt .sh-pt-chips .sh-chip.sh-NotStarted b,
.sh-pt .sh-pt-chips .sh-chip.sh-Not b,
.sh-pt .sh-pt-chips .sh-chip.sh-NotStarted span,
.sh-pt .sh-pt-chips .sh-chip.sh-Not span { color: #000000 !important; }
.sh-pt.sh-on,
[data-theme="logo"] .sh-pt.sh-on,
.sh-pt.sh-on b.sh-pt-id,
.sh-pt.sh-on .sh-pt-head b,
.sh-pt.sh-on .sh-pt-name,
.sh-pt.sh-on .sh-pt-inv,
.sh-pt.sh-on .sh-pt-updated,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-NotStarted,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Not,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-NotStarted .sh-chip-lbl,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Not .sh-chip-lbl,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-NotStarted b,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Not b,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-NotStarted span,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Not span { color: #ffffff !important; }
.sh-pt .sh-pt-chips .sh-chip.sh-Due { background: #fff1a8 !important; color: #7a5c00 !important; }
.sh-pt .sh-pt-chips .sh-chip.sh-Due b,
.sh-pt .sh-pt-chips .sh-chip.sh-Due span { color: #7a5c00 !important; }
.sh-pt .sh-pt-chips .sh-chip.sh-Overdue { background: #fdecec !important; color: #b42318 !important; }
.sh-pt .sh-pt-chips .sh-chip.sh-Overdue b,
.sh-pt .sh-pt-chips .sh-chip.sh-Overdue span { color: #b42318 !important; }
.sh-pt .sh-pt-chips .sh-chip.sh-Missed { background: #b42318 !important; color: #ffffff !important; }
.sh-pt .sh-pt-chips .sh-chip.sh-Missed b,
.sh-pt .sh-pt-chips .sh-chip.sh-Missed span { color: #ffffff !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Due { background: #3a2e0f !important; color: #fcd34d !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Due b,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Due span { color: #fcd34d !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Overdue { background: #3a1616 !important; color: #f87171 !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Overdue b,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Overdue span { color: #f87171 !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Missed { background: #dc2626 !important; color: #ffffff !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Missed b,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Missed span { color: #ffffff !important; }
.sh-pt .sh-pt-chips .sh-chip.sh-Overdue,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Overdue { background: #b3261e !important; color: #ffffff !important; }
.sh-pt .sh-pt-chips .sh-chip.sh-Overdue .sh-chip-lbl,
.sh-pt .sh-pt-chips .sh-chip.sh-Overdue b,
.sh-pt .sh-pt-chips .sh-chip.sh-Overdue span,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Overdue .sh-chip-lbl,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Overdue b,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Overdue span { color: #ffffff !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Due { background: #facc15 !important; color: #1c1917 !important; }
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Due b,
.sh-pt.sh-on .sh-pt-chips .sh-chip.sh-Due span { color: #1c1917 !important; }
.sh-btn.sh-is-loading,
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button.sh-is-loading { pointer-events: none; cursor: progress; }
.sh-btn.sh-is-loading > :not(.sh-btn-spinner),
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button.sh-is-loading > :not(.sh-btn-spinner) { opacity: 0.6; }
.sh-btn-spinner { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: 0.9; box-sizing: border-box; animation: sh-spin 0.7s linear infinite; -webkit-animation: sh-spin 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .sh-btn-spinner { animation-duration: 2s; -webkit-animation-duration: 2s; }
}
@keyframes sh-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes sh-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
.sh-skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--sh-soft-2) 25%, var(--sh-card) 50%, var(--sh-soft-2) 75%); background-size: 200% 100%; animation: sh-skel-shine 1.4s linear infinite, sh-skel-in 0.12s ease both; }
.sh-skel-line { height: 12px; border-radius: 6px; }
.sh-skel-val { height: 28px; width: 45%; border-radius: 8px; }
.sh-skel-40 { width: 40%; }
.sh-skel-60 { width: 60%; }
.sh-skel-80 { width: 80%; }
.sh-skel-page { display: grid; gap: 16px; width: 100%; min-width: 0; }
.sh-skel-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 16px; }
.sh-skel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.sh-skel-card { display: grid; gap: 12px; min-width: 0; box-sizing: border-box; padding: 20px 22px; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: var(--sh-radius); box-shadow: var(--sh-shadow); }
.sh-skel-head { display: grid; gap: 8px; }
.sh-skel-chart { height: 220px; border-radius: 14px; }
.sh-skel-rows { display: grid; gap: 10px; }
.sh-skel-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sh-skel-row .sh-skel { flex: 1 1 0; min-width: 0; height: 14px; }
.sh-skel-row .sh-skel-dot { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; }
.sh-skel-row .sh-skel-end { flex: 0 0 90px; }
.sh-skel-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-skel-pill { width: 120px; height: 44px; border-radius: 999px; }
.sh-skel-item { display: grid; gap: 8px; padding: 12px 14px; margin-bottom: 8px; border-radius: 16px; background: var(--sh-soft); }
.sh-skel-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.sh-skel-field { display: grid; gap: 6px; min-width: 0; }
.sh-skel-input { height: 44px; border-radius: 12px; }
@media (max-width: 640px) {
  .sh-skel-row .sh-skel-end { display: none; }
}
@keyframes sh-skel-shine {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@keyframes sh-skel-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-skel { animation: sh-skel-in 0.12s ease both; }
}
.sh-pl .sh-skel-head { padding: 16px 14px 12px; }
.sh-skel-circle { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px; }
@media (max-width: 640px) {
  .sh-skel-circle { width: 32px; height: 32px; flex: 0 0 32px; }
}
.sh-skel-sq { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 44px; }
.sh-skel-ring { width: min(120px, 100%); aspect-ratio: 1; height: auto; border-radius: 50%; margin: 6px auto 0; }
.sh-skel-bars { display: flex; align-items: flex-end; gap: 18px; height: 220px; padding: 0 12px; }
.sh-skel-bars .sh-skel { flex: 1 1 0; min-width: 0; border-radius: 8px 8px 0 0; }
.sh-skel-chip { height: 24px; width: 92px; border-radius: 999px; flex: 0 0 auto; }
.sh-skel-chip-lg { height: 26px; width: 118px; border-radius: 999px; flex: 0 0 auto; }
.sh-skel-btn { height: 44px; border-radius: 14px; flex: 0 0 auto; }
.sh-skel-bar-left { width: 4px; height: 40px; border-radius: 2px; flex: 0 0 4px; }
.sh-skel-flex { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sh-skel-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.sh-skel-flex-between > .sh-skel-grow,
.sh-skel-flex > .sh-skel-grow { flex: 1 1 0; min-width: 0; }
.sh-skel-col { display: grid; gap: 8px; min-width: 0; flex: 1 1 0; }
.sh-skel-tabs { display: flex; gap: 8px; padding: 6px; border-radius: 14px; background: var(--sh-card); border: 1px solid var(--sh-line); }
.sh-skel-tabs .sh-skel { height: 40px; border-radius: 10px; }
.sh-skel-banner { height: 46px; border-radius: 12px; }
.sh-skel-triple { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.sh-skel-tiles6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px; }
.sh-skel-tile { display: grid; gap: 10px; padding: 18px 20px; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: var(--sh-radius); box-shadow: var(--sh-shadow); }
@media (max-width: 640px) {
  .sh-skel-bars { height: 160px; gap: 10px; }
  .sh-skel-ring { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-skel-bars .sh-skel { animation-duration: 2s; }
}
.sh-skel-hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 12px; }
.sh-skel-hdr-end { display: flex; align-items: center; gap: 10px; }
.sh-skel-side { display: grid; gap: 10px; padding: 18px 14px; }
.sh-skel-side-label { height: 10px; width: 36%; margin: 14px 4px 2px; }
.sh-skel-side-item { height: 44px; width: 100%; border-radius: 14px; }
html.sh-embedded .sh-side,
html.sh-embedded #app-header { display: none !important; }
html.sh-embedded .sh-app { grid-template-columns: minmax(0, 1fr) !important; }
html.sh-embedded .sh-main { min-width: 0; }
html.sh-embedded body,
html.sh-embedded .sh-app { min-height: 0; }
html.sh-embedded,
html.sh-embedded body { overflow: hidden; }
@media (min-width: 721px) {
  html.sh-embedded .sh-pl:not(.sh-collapsed) { height: calc(var(--sh-shell-vh, 100vh) - 16px); max-height: calc(var(--sh-shell-vh, 100vh) - 16px); }
}
@media (max-width: 1024px) {
  .sh-hello > div { min-width: 0; }
  .sh-hello p { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .sh-hello h1 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
@media (max-width: 720px) {
  html.sh-embedded .sh-pl:not(.sh-collapsed) { max-height: none; overflow: visible; }
  html.sh-embedded .sh-pl:not(.sh-collapsed) .sh-pl-scroll { max-height: 380px; overflow-y: auto; }
  html.sh-embedded .sh-pl:not(.sh-collapsed) .sh-list-head { border-radius: var(--sh-radius) var(--sh-radius) 0 0; }
}
@media (max-width: 720px) {
  .sh-skel-tabs { flex-wrap: wrap; }
  .sh-skel-tabs { max-width: 100%; box-sizing: border-box; }
  .sh-skel-tabs .sh-skel { flex: 1 1 30%; width: auto !important; min-width: 0; }
  .sh-skel-ring { width: 96px; height: 96px; }
  .sh-skel-bars { height: 160px; }
}
html[data-skel-role="admin"] .sh-skel-role-inv { display: none; }
html:not([data-skel-role="admin"]) .sh-skel-role-admin { display: none; }
html.sh-embedded dialog[open] { top: calc(2 * var(--sh-dlg-top, 50vh) - 100vh) !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: fit-content; margin: auto !important; }
html.sh-embedded .sh-snack { bottom: var(--sh-snack-bottom, 24px) !important; }

/* 4b. The demo's records page styles (ported by script from records/index.html; classes prefixed sh-) */
.sh-upl { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 }
.sh-tint { background:var(--sh-soft);border-radius:14px;padding:16px }
.sh-rx-bar { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px }
.sh-rx-wrap { container-type:inline-size }
.sh-rx-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch }
.sh-rx-up,
.sh-rx-files { min-width:0 }
.sh-rx-grid { grid-template-columns:minmax(0,1fr) }
.sh-rx-files .sh-rx-list { display:flex;flex-wrap:wrap;gap:8px }
.sh-rx-up .sh-rx-drop { flex:none;min-height:0;padding:10px 14px }
.sh-rx-up .sh-rx-drop .sh-ms { font-size:24px }
.sh-rx-up { display:flex;flex-direction:column }
.sh-rx-drop { display:flex;align-items:center;gap:12px;width:100%;flex:1;min-height:160px;padding:14px 16px;border:1.5px dashed #747a86;border-radius:14px;background:var(--sh-card);color:var(--sh-ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s }
.sh-rx-drop:hover { border-color:var(--sh-primary) }
.sh-rx-drop .sh-ms { font-size:28px;color:var(--sh-primary) }
.sh-rx-drop b { display:block;font-size:14px;font-weight:600 }
.sh-rx-drop small { display:block;font-size:12px;color:var(--sh-ink-2);margin-top:2px }
.sh-rx-list { display:grid;gap:8px;margin-top:12px }
.sh-rx-row { display:flex;flex-wrap:wrap;gap:8px }
.sh-rx-list { min-width:0 }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) dialog.sh-viewer { border:0;border-radius:18px;padding:16px;width:min(960px,94vw);height:min(88vh,900px);background:var(--sh-card);color:var(--sh-ink);box-shadow:0 24px 60px rgba(0,0,0,0.25) }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) dialog.sh-viewer::backdrop { background:rgba(18,20,24,0.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px) }
.sh-viewer-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px }
.sh-viewer-head b { font-size:16px }
.sh-viewer-body { height:calc(100% - 52px) }
.sh-viewer-body iframe,
.sh-viewer-body img { width:100%;height:100%;border:0;object-fit:contain;border-radius:10px }
@container (max-width:400px) {
  .sh-rx-grid { grid-template-columns:1fr }
}
.sh-offline-bar[hidden] { display:none }
#npPersonal .sh-g>label:last-child { grid-column:1 / -1 }
.sh-pl { padding:0;display:flex;flex-direction:column;overflow:hidden;max-height:calc(100vh - 230px) }
.sh-pl-scroll { flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--sh-line) transparent;padding:10px 10px 0 14px }
.sh-pl .sh-pt { gap:4px;padding:10px 12px;margin:0 0 6px 0;border-radius:14px }
.sh-pl .sh-pt>b { font-size:14px;letter-spacing:.2px }
.sh-pl .sh-pt>span:nth-of-type(2) { display:none }
.sh-pl .sh-pt>span.sh-mut { font-size:12px }
.sh-pl .sh-pt>div { display:flex;flex-wrap:wrap;gap:4px;margin-top:2px }
.sh-pl .sh-pt .sh-chip { margin:0;font-size:11px;padding:2px 8px;line-height:1.4 }
.sh-pl .sh-pt .sh-chip+.sh-chip { margin-left:0 }
.sh-pl .sh-pt:last-child { margin-bottom:0 }
.sh-pl .sh-list-head { flex:none;margin:0;padding:16px 14px 12px 14px;border-radius:0 }
.sh-fmsg.sh-tag { display:inline-block;margin-top:6px;padding:3px 10px }
:where(.sh-page, .sh-topbar, .sh-side, .sh-pop) button.sh-link { background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;padding:0;font:inherit;text-align:left }
.sh-fld-flash { box-shadow:0 0 0 4px var(--sh-error-soft) }
.sh-rx-row,
.sh-rx-files .sh-rx-list { flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin }
.sh-pl .sh-pt>span.sh-pt-updated { display:inline-block;font-size:11px;color:var(--sh-ink-3);margin-top:2px }
.sh-pl { position:relative }
.sh-list-sort { position:absolute;top:12px;right:52px;z-index:3;width:34px;height:34px }
.sh-sort-menu { position:absolute;top:52px;right:12px;z-index:5;display:grid;gap:2px;min-width:180px;padding:6px;background:var(--sh-card);border-radius:14px;box-shadow:var(--sh-shadow) }
.sh-sort-menu[hidden] { display:none }
.sh-sort-opt { text-align:left;padding:8px 10px;border:0;border-radius:10px;background:none;font:inherit;font-size:14px;color:var(--sh-ink);cursor:pointer }
.sh-sort-opt:hover { background:var(--sh-soft) }
.sh-sort-opt.sh-on { font-weight:600;color:var(--sh-primary) }
.sh-pl-search-wrap { flex:none;padding:0 12px 8px 12px }
.sh-gdmt-table { padding:4px 8px 8px }
.sh-gdmt-tbl { width:100%;border-collapse:separate;border-spacing:0 10px;table-layout:fixed }
.sh-gdmt-tbl td label { display:block;font-size:0;margin:0 }
.sh-gdmt-tbl td .sh-cb,
.sh-gdmt-tbl td .sh-cb input[data-cb-input] { font-size:13.5px }
.sh-gdmt-tbl td .sh-cb input[data-cb-input] { padding-left:10px;padding-right:30px }
.sh-gdmt-tbl td .sh-cb .sh-cb-ico { right:8px }
.sh-gdmt-tbl .sh-cb-list { min-width:100%;width:max-content;max-width:min(320px,88vw);box-shadow:0 8px 24px rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.06);z-index:120 }
.sh-gdmt-tbl .sh-cb-list li { white-space:nowrap;padding:9px 12px;font-size:13.5px }
.sh-gdmt-tbl th,
.sh-gdmt-tbl td { padding:6px 8px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sh-line) }
.sh-gdmt-tbl th:nth-child(3),
.sh-gdmt-tbl td:nth-child(3) { width:18% }
.sh-gdmt-tbl th:nth-child(4),
.sh-gdmt-tbl td:nth-child(4) { width:16% }
.sh-gdmt-tbl th:last-child,
.sh-gdmt-tbl td:last-child { width:20% }
.sh-gdmt-tbl thead th { font-size:13px;font-weight:700;color:var(--sh-ink);text-transform:none;letter-spacing:0;padding:0 8px 8px;border-bottom:0;vertical-align:bottom;background:transparent;box-shadow:none }
.sh-gdmt-tbl thead th:first-child { padding-left:12px }
.sh-gdmt-tbl td { overflow:visible }
.sh-gdmt-tbl tbody th { font-weight:600;color:var(--sh-ink);width:20%;white-space:normal;border-left:4px solid var(--sh-line) }
.sh-gdmt-tbl tbody tr { transition:background-color .2s ease }
.sh-gdmt-tbl tbody tr > * { background:var(--sh-card) }
.sh-gdmt-tbl tbody tr > * { border-bottom:0;vertical-align:middle;padding-top:12px;padding-bottom:12px }
.sh-gdmt-tbl tbody tr > :first-child { border-radius:18px 0 0 18px }
.sh-gdmt-tbl tbody tr > :last-child { border-radius:0 18px 18px 0 }
.sh-gdmt-tbl tbody tr.sh-active th { border-left-color:var(--sh-success) }
.sh-gdmt-tbl tbody tr.sh-stopped th { border-left-color:var(--sh-error) }
.sh-gdmt-tbl tbody tr.sh-active td:last-child input[data-cb-input] { font-weight:600;color:var(--sh-success);border-color:color-mix(in srgb, var(--sh-success) 35%, var(--sh-line)) }
.sh-gdmt-tbl tbody tr.sh-stopped td:last-child input[data-cb-input] { font-weight:600;color:var(--sh-error);border-color:color-mix(in srgb, var(--sh-error) 35%, var(--sh-line)) }
.sh-reasons-head { display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:10px }
.sh-gdmt-name { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.35;font-size:14px;flex:1 1 auto;min-width:0 }
.sh-gdmt-tbl td .sh-cb input[data-cb-input] { min-width:0 }
.sh-g label.sh-check-row { min-height:42px;box-sizing:border-box;padding:0 12px;align-self:end;margin-bottom:6px;border-color:var(--sh-line);background:var(--sh-card) }
.sh-g label.sh-check-row:has(input:checked) { background:color-mix(in srgb,var(--sh-primary-soft) 55%,var(--sh-card));border-color:color-mix(in srgb,var(--sh-primary) 45%,var(--sh-line)) }
.sh-g label.sh-check-row input { width:16px;height:16px }

/* 5. Blazor-only additions (not in the demo) */

/* Pages from other modules (patients, visits, users, sites) keep their own markup and class names. Inside the shell their
   variables are mapped to the demo's tokens and their main components are restyled, so they read as part of the same app. */
.sh-legacy {
  --bg-dark: var(--sh-bg); --bg-card: var(--sh-card); --bg-card-hover: var(--sh-soft);
  --border-color: var(--sh-line);
  --primary-gradient: var(--sh-primary);
  --accent-teal: #0f766e; --accent-emerald: var(--sh-success); --accent-amber: var(--sh-warning); --accent-rose: var(--sh-error);
  --text-primary: var(--sh-ink); --text-secondary: var(--sh-ink-2);
  color: var(--sh-ink);
  font: 14px/1.45 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding: 8px;
  min-height: 60vh;
}
@media (max-width: 640px) { .sh-legacy { padding: 4px; } }

.sh-legacy .glass-card { background: var(--sh-card); backdrop-filter: none; border: 1px solid var(--sh-line); border-radius: var(--sh-radius); box-shadow: var(--sh-shadow); padding: 20px; }
.sh-legacy .glass-card-header { font-size: 16px; }
.sh-legacy h1 { font-size: 24px !important; font-weight: 600 !important; color: var(--sh-ink); }
.sh-legacy code { color: var(--sh-primary) !important; }

.sh-legacy .form-label-custom { font-size: 12px; font-weight: 500; color: var(--sh-ink-2); margin-bottom: 4px; }
.sh-legacy .form-control-custom { background: var(--sh-card); color: var(--sh-ink); border: 1px solid var(--sh-line); border-radius: 12px; min-height: 44px; padding: 10px 14px; font: inherit; }
.sh-legacy .form-control-custom:focus { border-color: var(--sh-primary); box-shadow: var(--sh-brand-glow); }
.sh-legacy .form-control-custom::placeholder { color: var(--sh-ink-3); }
.sh-legacy select.form-control-custom option { background: var(--sh-card); color: var(--sh-ink); }

.sh-legacy .btn-primary-custom { background: var(--sh-primary); color: var(--sh-on-primary); border-radius: 999px; min-height: 44px; padding: 0 20px; font-weight: 500; }
.sh-legacy .btn-primary-custom:hover:not(:disabled) { background: var(--sh-primary-hover); transform: none; box-shadow: none; color: var(--sh-on-primary); }
.sh-legacy .btn-primary-custom:disabled { opacity: 0.55; cursor: not-allowed; }

.sh-legacy .status-synced { background: var(--sh-success-soft); color: var(--sh-on-success-soft); border-color: transparent; }
.sh-legacy .status-pending { background: var(--sh-warning-soft); color: var(--sh-on-warning-soft); border-color: transparent; }
.sh-legacy .status-failed { background: var(--sh-error-soft); color: var(--sh-on-error-soft); border-color: transparent; }

.sh-legacy table { color: var(--sh-ink); }
.sh-legacy table th { color: var(--sh-ink-2) !important; }

/* Visits, GDMT and events (modules 4 to 6) */
.sh-legacy .visit-step { background: var(--sh-card); }
.sh-legacy .visit-step.active { border-color: var(--sh-primary); box-shadow: var(--sh-brand-glow); }
.sh-legacy .visit-step.st-Due .visit-step-index { background: var(--sh-primary); }
.sh-legacy .visit-badge.Completed { background: var(--sh-success-soft); color: var(--sh-on-success-soft); }
.sh-legacy .visit-badge.Due { background: var(--sh-primary-soft); color: var(--sh-primary); }
.sh-legacy .visit-badge.Upcoming, .sh-legacy .visit-badge.Locked { background: var(--sh-soft-2); color: var(--sh-ink-2); }
.sh-legacy .visit-badge.Overdue { background: var(--sh-error-soft); color: var(--sh-on-error-soft); }
.sh-legacy .visit-section-title { color: var(--sh-primary); }
.sh-legacy .visit-form .validation-message { color: var(--sh-error); }
.sh-legacy .nyha-option { color: var(--sh-ink); }
.sh-legacy .nyha-option.selected { background: var(--sh-primary); border-color: var(--sh-primary); color: var(--sh-on-primary); }
.sh-legacy .alert-custom.error { background: var(--sh-error-soft); border-color: transparent; color: var(--sh-on-error-soft); }
.sh-legacy .alert-custom.success { background: var(--sh-success-soft); border-color: transparent; color: var(--sh-on-success-soft); }
.sh-legacy .alert-custom.info { background: var(--sh-primary-soft); border-color: transparent; color: var(--sh-on-primary-soft); }
.sh-legacy .gdmt-counter.complete { color: var(--sh-success); }
.sh-legacy .gdmt-counter.partial { color: var(--sh-primary); }
.sh-legacy .gdmt-counter.event-alert-active { color: var(--sh-warning); }
.sh-legacy .gdmt-counter.event-alert-death { color: var(--sh-error); }
.sh-legacy .btn-gdmt-save { color: var(--sh-on-success-soft); }
.sh-legacy .gdmt-first-badge { color: var(--sh-primary); }
.sh-legacy .gdmt-toggle-btn.no, .sh-legacy .gdmt-reason-option.checked { color: var(--sh-ink); }
.sh-legacy .gdmt-chip { color: var(--sh-ink); }
.sh-legacy .gdmt-chip:hover:not(:disabled) { border-color: var(--sh-primary); color: var(--sh-ink); }
.sh-legacy .gdmt-chip.selected { border-color: var(--sh-primary); color: var(--sh-primary); }
.sh-legacy .gdmt-reason-option input[type="checkbox"] { accent-color: var(--sh-primary); }

/* Dark panels from the earlier theme (visit form, GDMT, patient header) on the light surface */
.sh-legacy .glass-card[style*="linear-gradient(135deg, rgba(30, 41, 59"] { background: var(--sh-card) !important; border-color: var(--sh-line) !important; }
.sh-legacy .visit-step-index { background: var(--sh-soft-2); }
.sh-legacy .nyha-option { background: var(--sh-card); border-color: var(--sh-line); }
.sh-legacy .gdmt-counter { background: var(--sh-soft); border-color: var(--sh-line); }
.sh-legacy .gdmt-dot { background: var(--sh-soft-2); }
.sh-legacy .gdmt-pillar-card { background: var(--sh-soft); border-color: var(--sh-line); }
.sh-legacy .gdmt-pillar-card.active { background: var(--sh-card); border-color: var(--sh-primary); }
.sh-legacy .gdmt-pillar-num { background: var(--sh-soft-2); color: var(--sh-ink-2); }
.sh-legacy .gdmt-toggle { background: var(--sh-soft-2); border-color: var(--sh-line); }
.sh-legacy .gdmt-toggle-btn { color: var(--sh-ink-2); }
.sh-legacy .gdmt-toggle-btn.no { background: var(--sh-soft-2); color: var(--sh-ink); }
.sh-legacy .gdmt-chip { background: var(--sh-card); border-color: var(--sh-line); }
.sh-legacy .gdmt-reasons-box { background: var(--sh-soft); border-color: var(--sh-line); }
.sh-legacy .gdmt-reason-option { background: var(--sh-card); border-color: var(--sh-line); }
.sh-legacy .gdmt-inactive-note { color: var(--sh-ink-3); }

/* Blue accents written inline in the other modules' markup (action buttons, role pills, modal borders) become the brand pink */
.sh-legacy [style*="rgba(59, 130, 246"] { background: var(--sh-primary-soft) !important; border-color: var(--sh-primary-border) !important; color: var(--sh-primary) !important; }
.sh-legacy [style*="rgba(59, 130, 246"]:hover { background: var(--sh-primary-soft-2) !important; }
.sh-legacy [style*="rgba(96, 165, 250"] { border-color: var(--sh-line) !important; }
.sh-legacy [style*="#3b82f6"], .sh-legacy [style*="#1d4ed8"], .sh-legacy [style*="#2563eb"] { accent-color: var(--sh-primary) !important; }
.sh-legacy [style*="rgba(15, 23, 42, 0.4)"], .sh-legacy [style*="rgba(15, 23, 42, 0.5)"], .sh-legacy [style*="rgba(15, 23, 42, 0.6)"] { background: var(--sh-soft) !important; }
.sh-legacy [style*="rgba(30, 41, 59"]:not([style*="position: fixed"]) { background: var(--sh-card) !important; }
/* Pink primary buttons everywhere in the legacy pages, also the ones that set their own blue background */
.sh-legacy .btn-primary-custom:not([style*="background"]) { background: var(--sh-primary); }
.sh-legacy .gdmt-counter.partial, .sh-legacy .gdmt-first-badge, .sh-legacy .gdmt-chip.selected { background: var(--sh-primary-soft); border-color: var(--sh-primary-border); }

/* Inline colours in the other modules' markup were chosen for a dark canvas; map them to the light tokens */
.sh-legacy [style*="#f8fafc"] { color: var(--sh-ink) !important; }
.sh-legacy [style*="#60a5fa"], .sh-legacy [style*="#93c5fd"] { color: var(--sh-primary) !important; }
.sh-legacy [style*="#34d399"], .sh-legacy [style*="#6ee7b7"] { color: var(--sh-success) !important; }
.sh-legacy [style*="#f87171"], .sh-legacy [style*="#fda4af"] { color: var(--sh-error) !important; }
.sh-legacy [style*="#fbbf24"], .sh-legacy [style*="#fcd34d"] { color: var(--sh-warning) !important; }
.sh-legacy [style*="rgba(255, 255, 255, 0.05)"], .sh-legacy [style*="rgba(255,255,255,0.05)"] { border-color: var(--sh-line) !important; }

/* Messages and loading text */
.sh-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 14px; font-size: 14px;
  background: var(--sh-error-soft); color: var(--sh-on-error-soft);
}
.sh-notice.sh-info { background: var(--sh-primary-soft); color: var(--sh-on-primary-soft); }
.sh-loading { color: var(--sh-ink-3); padding: 24px 4px; }

/* A transparent layer behind an open dropdown or panel: a click on it closes the popup (the demo did this with a document click handler) */
.sh-scrim-clear { position: fixed; inset: 0; z-index: 40; background: transparent; }
.sh-cb.sh-is-open, .sh-notify.sh-open, .sh-profile-wrap.sh-open { z-index: 50; }

/* Pager under the preview table */
.sh-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 14px; }
.sh-pager-info { font-size: 13px; color: var(--sh-ink-2); }
.sh-pager-info b { color: var(--sh-ink); font-weight: 600; }
.sh-pager-size { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sh-ink-2); }
.sh-pager-select { width: auto; min-height: 40px; padding: 6px 34px 6px 12px; }
.sh-pager-buttons { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sh-pager-btn {
  min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--sh-line);
  background: var(--sh-card); color: var(--sh-ink-2); font-size: 13px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sh-pager-btn:hover:not(:disabled) { background: var(--sh-soft-2); color: var(--sh-ink); border-color: var(--sh-ink-3); }
.sh-pager-btn.sh-active { background: var(--sh-primary); border-color: var(--sh-primary); color: var(--sh-on-primary); font-weight: 600; }
.sh-pager-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sh-pager-btn:focus-visible { outline: 2px solid var(--sh-primary); outline-offset: 2px; }
.sh-pager-gap { min-width: 24px; text-align: center; color: var(--sh-ink-3); }

/* The demo shrinks the phase dials on small screens through a :root override, which the port skips */
@media (max-width: 720px) { :root { --sh-ring: 88px; } }

/* The demo's screens sit in a frame whose app container pads them by 8px; same inset here so the grids wrap at the same widths */
.sh-main > #dashRoot.sh-page { padding: 0; }


/* Error and 404 pages: the demo's error screen (its own CSS ported, with the page background that the demo put on <body>) */
.sh-err-body { box-sizing: border-box; margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--sh-primary, #C90085) 12%, #f8fafc) 0%, #f1f5f9 100%); color: var(--sh-ink, #0f172a); -webkit-font-smoothing: antialiased; }
.sh-err-body *, .sh-err-body *::before, .sh-err-body *::after { box-sizing: border-box; }
.sh-err-shell { width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sh-err-logo-wrap { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.15s ease; }
.sh-err-logo-wrap:hover { transform: scale(1.02); }
.sh-err-logo-wrap img { display: block; width: min(240px, 65vw); height: auto; }
.sh-err-card { width: 100%; background: var(--sh-card, #ffffff); border: 1px solid var(--sh-line, #e2e8f0); border-radius: var(--sh-radius, 20px); box-shadow: 0 12px 36px -8px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.04); padding: 36px 32px 30px; text-align: center; position: relative; overflow: hidden; }
@media (max-width: 480px) {
  .sh-err-card { padding: 28px 20px 24px; }
}
.sh-err-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--sh-brand-red, #dc2626), var(--sh-primary, #C90085), var(--sh-brand-blue, #2563eb)); }
.sh-err-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; margin-bottom: 20px; background: var(--sh-soft, #f1f5f9); color: var(--sh-ink-2, #475569); border: 1px solid var(--sh-line, #e2e8f0); }
.sh-err-badge.sh-b-404 { background: #fff7ed; color: #c2410c; border-color: #ffedd5; }
.sh-err-badge.sh-b-500 { background: #fef2f2; color: #b91c1c; border-color: #fee2e2; }
.sh-err-badge.sh-b-offline { background: #fffbeb; color: #b45309; border-color: #fef3c7; }
.sh-err-badge.sh-b-sync { background: color-mix(in srgb, var(--sh-primary, #C90085) 12%, transparent); color: var(--sh-primary, #C90085); border-color: color-mix(in srgb, var(--sh-primary, #C90085) 24%, transparent); }
.sh-err-badge.sh-b-auth { background: #f5f3ff; color: #6d28d9; border-color: #ede9fe; }
.sh-err-icon-halo { position: relative; width: 76px; height: 76px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; background: var(--sh-soft, #f8fafc); border: 1px solid var(--sh-line, #e2e8f0); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); }
.sh-err-icon-halo::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: currentColor; opacity: 0.12; animation: sh-pulseHalo 2.4s ease-in-out infinite; z-index: 0; }
@keyframes sh-pulseHalo {
      0%, 100% { transform: scale(1); opacity: 0.12; }
      50% { transform: scale(1.12); opacity: 0.04; }
    }
.sh-err-icon-halo .sh-ms { position: relative; z-index: 1; font-size: 38px; }
.sh-err-code-display { font-size: clamp(40px, 12vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; margin: 0 0 6px; opacity: 0.22; user-select: none; }
.sh-err-card h1 { margin: 0 0 10px; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--sh-ink, #0f172a); }
.sh-err-card p.sh-err-msg { margin: 0 0 24px; font-size: 15px; line-height: 1.55; color: var(--sh-ink-2, #475569); }
.sh-net-banner { display: none; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 500; margin-bottom: 20px; animation: sh-fadeIn 0.25s ease; }
.sh-net-banner.sh-offline { display: flex; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.sh-net-banner.sh-restored { display: flex; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.sh-net-banner .sh-ms { font-size: 18px; }
.sh-err-actions { display: grid; gap: 12px; margin-bottom: 24px; }
.sh-err-actions .sh-btn { min-height: 46px; font-size: 14.5px; font-weight: 600; justify-content: center; gap: 8px; border-radius: 12px; text-decoration: none; box-sizing: border-box; transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease; }
.sh-err-actions .sh-btn:hover { transform: translateY(-1px); }
.sh-err-actions .sh-btn:active { transform: translateY(0); }
.sh-err-actions .sh-btn.sh-primary { background: var(--sh-primary, #C90085); color: #ffffff; box-shadow: 0 4px 14px color-mix(in srgb, var(--sh-primary, #C90085) 30%, transparent); }
.sh-err-actions .sh-btn.sh-primary:hover { background: var(--sh-primary-hover, #a4006d); }
.sh-err-quicklinks { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 18px; padding-top: 18px; border-top: 1px solid var(--sh-line, #f1f5f9); font-size: 13px; }
.sh-err-quicklinks a { color: var(--sh-ink-2, #64748b); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: color 0.15s ease; }
.sh-err-quicklinks a:hover { color: var(--sh-primary, #C90085); }
.sh-err-quicklinks a .sh-ms { font-size: 16px; }
.sh-err-diagnostics { width: 100%; margin-top: 20px; text-align: left; border-radius: 12px; background: var(--sh-soft, #f8fafc); border: 1px solid var(--sh-line, #e2e8f0); overflow: hidden; font-size: 13px; }
.sh-err-diagnostics summary { padding: 12px 16px; font-weight: 500; color: var(--sh-ink-2, #475569); cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: background 0.15s ease; }
.sh-err-diagnostics summary:hover { background: color-mix(in srgb, var(--sh-ink) 4%, transparent); }
.sh-err-diagnostics summary::-webkit-details-marker { display: none; }
.sh-err-diag-title { display: inline-flex; align-items: center; gap: 6px; }
.sh-err-diag-title .sh-ms { font-size: 17px; color: var(--sh-ink-2, #64748b); }
.sh-err-diag-body { padding: 14px 16px; border-top: 1px solid var(--sh-line, #e2e8f0); background: #ffffff; display: grid; gap: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; line-height: 1.45; color: #334155; }
.sh-diag-row { display: flex; justify-content: space-between; gap: 12px; word-break: break-all; }
.sh-diag-label { color: #64748b; font-weight: 600; flex-shrink: 0; }
.sh-diag-val { text-align: right; color: #0f172a; }
.sh-copy-diag-btn { margin-top: 10px; min-height: 34px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--sh-line, #cbd5e1); background: #f8fafc; color: #334155; cursor: pointer; transition: all 0.15s ease; width: 100%; }
.sh-copy-diag-btn:hover { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }
.sh-copy-diag-btn.sh-copied { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.sh-copy-diag-btn .sh-ms { font-size: 16px; }
.sh-err-foot { text-align: center; font-size: 12.5px; color: var(--sh-ink-2, #64748b); line-height: 1.5; }
.sh-err-foot strong { color: var(--sh-ink, #334155); }
.sh-err-foot a { color: var(--sh-primary, #C90085); text-decoration: none; font-weight: 500; }
.sh-err-foot a:hover { text-decoration: underline; }
@keyframes sh-fadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

/* System Administration (Users & Roles, Medical Centres & Zones), after the demo's admin screen */
.sh-main > #adminRoot.sh-page { padding: 0; }
.sh-legacy-modal { padding: 0; min-height: 0; background: transparent; }
.sh-nowrap { white-space: nowrap; }
.sh-adm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.sh-adm-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.sh-adm-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--sh-line); background: var(--sh-card); color: var(--sh-ink-2); font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sh-adm-chip .sh-ms { font-size: 16px; }
.sh-adm-chip:hover { border-color: var(--sh-ink-3); color: var(--sh-ink); }
.sh-adm-chip.sh-on { border: 2px solid var(--sh-ink); color: var(--sh-ink); font-weight: 500; }
.sh-adm-site-filter { min-height: 40px; border-radius: 999px; border: 1px solid var(--sh-line); padding: 0 14px; background: var(--sh-card); color: var(--sh-ink); font: inherit; font-size: 13px; }
.sh-adm-add { margin-left: auto; }
.sh-adm-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sh-adm-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--sh-primary); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.sh-adm-avatar.sh-adm-blue { background: #0e79b2; }
.sh-adm-sub { font-size: 12px; color: var(--sh-ink-3); }
.sh-adm-sub code { font-size: 11.5px; font-family: ui-monospace, Consolas, monospace; color: var(--sh-ink-2); }
.sh-adm-role { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.sh-adm-role .sh-ms { font-size: 15px; }
.sh-adm-role-adm { background: var(--sh-primary-soft); color: var(--sh-primary); }
.sh-adm-role-inv { background: var(--sh-success-soft); color: var(--sh-on-success-soft); }
.sh-adm-warn { color: var(--sh-error); display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; font-weight: 500; }
.sh-adm-warn .sh-ms { font-size: 16px; }
.sh-adm-centre + .sh-adm-centre { margin-top: 6px; }
.sh-adm-actions { display: inline-flex; gap: 6px; }
.sh-adm-danger { color: var(--sh-error); }
.sh-adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 14px; }
.sh-adm-kpi { display: flex; align-items: center; gap: 14px; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: var(--sh-radius); padding: 16px 20px; box-shadow: var(--sh-shadow); }
.sh-adm-kpi b { display: block; font-size: 22px; line-height: 1.1; font-weight: 600; }
.sh-adm-kpi span { font-size: 13px; color: var(--sh-ink-2); }
.sh-adm-kpi-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--sh-primary-soft); color: var(--sh-primary); font-size: 22px; }
.sh-adm-kpi-blue { background: #e1f0fb; color: #0e79b2; }
.sh-adm-kpi-grey { background: var(--sh-soft-2); color: var(--sh-ink-2); }
.sh-adm-code { display: inline-block; padding: 4px 10px; border-radius: 8px; background: var(--sh-soft-2); font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em; }
.sh-adm-zone { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; background: var(--sh-soft-2); }
.sh-adm-zone .sh-ms { font-size: 15px; }
.sh-adm-zone-north { background: #e1f0fb; color: #0b5c8c; }
.sh-adm-zone-central { background: #efe6fb; color: #5b21b6; }
.sh-adm-zone-south { background: var(--sh-success-soft); color: var(--sh-on-success-soft); }
@media (max-width: 640px) { .sh-adm-add { margin-left: 0; width: 100%; justify-content: center; } }

.sh-adm-site-filter { width: auto; max-width: 220px; }
.sh-adm-table th, .sh-adm-table td { padding-left: 10px; padding-right: 10px; }
.sh-adm-sub { overflow-wrap: anywhere; }
.sh-adm-actions { flex-wrap: nowrap; white-space: nowrap; }
.sh-adm-actions .sh-btn-sm { padding-left: 10px; padding-right: 10px; }

/* Patient records: the numbers across the top, the patient cards and the participant record, after the demo's records screen */
.sh-main > #recordsRoot.sh-page { padding: 0; }
.sh-rec-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 16px; }
.sh-rec-kpi { background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: var(--sh-radius); padding: 18px 20px; box-shadow: var(--sh-shadow); }
.sh-rec-kpi b { display: block; font-size: 26px; font-weight: 600; line-height: 1.15; }
.sh-rec-kpi span { font-size: 13px; color: var(--sh-ink-2); }
.sh-rec-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.sh-rec-filters .sh-adm-site-filter { min-height: 36px; font-size: 12.5px; max-width: 100%; }
.sh-rec-empty { text-align: center; color: var(--sh-ink-2); padding: 24px 8px; display: grid; gap: 10px; justify-items: center; }
.sh-rec-empty .sh-ms { font-size: 36px; color: var(--sh-ink-3); }
.sh-rec-id { color: var(--sh-primary); font-size: 18px; font-weight: 600; }
.sh-rec-section { margin-top: 18px; }
.sh-rec-section h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 12px 16px; border-radius: 12px; background: var(--sh-primary-soft); color: var(--sh-primary); font-size: 15px; font-weight: 600; }
.sh-rec-kv { width: 100%; border-collapse: collapse; margin: 4px 0 14px; }
.sh-rec-kv th { width: 38%; text-align: left; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sh-ink-3); font-weight: 600; padding: 13px 14px; border-bottom: 1px solid var(--sh-line); }
.sh-rec-kv td { padding: 13px 14px; border-bottom: 1px solid var(--sh-line); }
.sh-rec-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-rec-locked { opacity: 0.55; cursor: not-allowed; }
a.sh-dash-tab { text-decoration: none; }
.sh-lay .sh-pt { cursor: pointer; }

/* Work area of the records screen (enrol, edit and visit forms) */
.sh-rec-back { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--sh-line); }
.sh-rec-banner { margin: 12px 0 14px; padding: 12px 16px; border-radius: 14px; background: var(--sh-soft); font-size: 13.5px; line-height: 1.5; }
.sh-rec-form { margin-top: 4px; }
.sh-rec-form, .sh-rec-detail { min-width: 0; }
.sh-rec-form fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }
.sh-rec-form .events-cards-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sh-rec-form .events-cards-grid > * { min-width: 0; }
.sh-legacy .gdmt-toggle-btn.yes, .sh-legacy .gdmt-toggle-btn.event-btn-yes, .sh-legacy .gdmt-toggle-btn.event-btn-death { color: #fff; }
.sh-rec-form .event-card .gdmt-pillar-top { flex-wrap: wrap; row-gap: 8px; }
.sh-rec-form .event-card .gdmt-toggle { margin-left: 0; }
.sh-rec-form .glass-card { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
.sh-rec-detail .sh-rec-form form, .sh-rec-detail .sh-rec-form .visit-form { max-width: 100%; }
.sh-rec-section .sh-legacy { padding: 0; }
@media (max-width: 1100px) { .sh-lay { grid-template-columns: minmax(0, 1fr); } }

.sh-rec-actions-end { justify-content: flex-end; }
.sh-rec-readonly { background: var(--sh-primary-soft); color: var(--sh-primary); border-color: transparent; margin-bottom: 14px; }
.sh-pl .sh-list-sort { right: 52px; }
.sh-rec-detail .sh-g > label .sh-cb { width: 100%; }
.sh-pl .sh-sort-menu { z-index: 1100; }
.sh-pl .sh-list-sort { z-index: 1100; }

/* Demo accounts card (ported from the demo's login page) */
.sh-demo-ref-card { width: 100%; max-width: 480px; margin: 14px auto 0; padding: 12px 16px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); box-sizing: border-box; }
.sh-demo-ref-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--sh-line); font-size: 12px; cursor: pointer; user-select: none; }
@media (max-width: 1280px) {
  .sh-demo-ref-card .sh-demo-ref-grid { display: none; }
  .sh-demo-ref-card.sh-expanded .sh-demo-ref-grid { display: grid; }
}
@media (min-width: 1281px) {
  .sh-demo-ref-card .sh-demo-ref-grid { display: grid; }
}
.sh-demo-ref-title { display: flex; align-items: center; gap: 5px; font-weight: 700; color: var(--sh-ink); font-size: 12.5px; }
.sh-demo-ref-title .sh-ms { font-size: 16px; color: var(--sh-primary); }
.sh-demo-ref-sub { font-size: 11px; color: var(--sh-ink-2); }
.sh-demo-ref-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (max-width: 520px) {
  .sh-demo-ref-grid { grid-template-columns: 1fr; }
}
.sh-demo-ref-row { border: 1px solid var(--sh-line); background: var(--sh-soft); border-radius: 8px; padding: 6px 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-family: inherit; font-size: 11.5px; color: var(--sh-ink); cursor: pointer; text-align: left; transition: all 0.15s ease; }
.sh-demo-ref-row:hover { background: var(--sh-card); border-color: var(--sh-primary); transform: translateY(-1px); }
.sh-demo-ref-row .sh-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sh-demo-ref-row .sh-dot.sh-inv { background: var(--sh-success); }
.sh-demo-ref-row .sh-dot.sh-cent { background: #1a5fb4; }
.sh-demo-ref-row .sh-dot.sh-adm { background: #C90085; }
.sh-demo-ref-row .sh-r-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sh-demo-ref-row .sh-r-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.sh-demo-ref-row .sh-r-cred { font-size: 9.5px; color: var(--sh-ink-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-demo-ref-row .sh-r-cred.sh-is-email { color: var(--sh-primary); font-weight: 600; }
.sh-demo-ref-row .sh-r-site { font-size: 10px; color: var(--sh-ink-2); background: var(--sh-soft-2); padding: 1px 5px; border-radius: 4px; flex-shrink: 0; }
.sh-auth-panel .sh-auth-form-card { margin: 0 auto; }
.sh-gdmt-tbl td .sh-cb, .sh-gdmt-tbl td .sh-cb input { min-width: 0; width: 100%; box-sizing: border-box; }
.sh-gdmt-tbl td { min-width: 0; overflow: visible; }

/* Profile and password page (ported from the demo's setup page) */
.sh-setup-simple-page { background: var(--sh-bg); color: var(--sh-ink); min-height: 100vh; display: flex; flex-direction: column; margin: 0; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; }
.sh-setup-topbar { background: var(--sh-card); border-bottom: 1px solid var(--sh-line); height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.sh-setup-topbar-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.sh-setup-topbar-brand img { height: 32px; width: auto; }
.sh-setup-topbar-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; background: var(--sh-primary-soft); color: var(--sh-primary); padding: 3px 8px; border-radius: 12px; }
.sh-setup-topbar-right { display: flex; align-items: center; gap: 12px; }
.sh-setup-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px 48px; box-sizing: border-box; }
.sh-doctor-setup-card { background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); width: 100%; max-width: 500px; padding: 32px 30px; box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; position: relative; }
.sh-doctor-welcome-box { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--sh-line); }
.sh-doctor-avatar-wrap { position: relative; flex-shrink: 0; }
.sh-doctor-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--sh-primary), #0f2c4d); color: #ffffff; display: grid; place-items: center; font-size: 24px; font-weight: 700; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); border: 2px solid #ffffff; transition: background 0.25s ease, box-shadow 0.25s ease; }
.sh-doctor-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1 / 1; }
.sh-doctor-camera-btn { position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--sh-primary); color: #ffffff; border: 2px solid #ffffff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.18); transition: transform 0.15s, background-color 0.15s; padding: 0; }
.sh-doctor-camera-btn:hover { background: var(--sh-primary-hover); transform: scale(1.1); }
.sh-doctor-camera-btn i { font-size: 15px; }
.sh-doctor-meta { flex: 1; min-width: 0; }
.sh-doctor-badge-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--sh-primary); background: var(--sh-primary-soft); padding: 2px 8px; border-radius: 12px; margin-bottom: 4px; }
.sh-doctor-name { font-size: 18px; font-weight: 700; color: var(--sh-ink); margin: 0 0 2px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-doctor-hospital { font-size: 12.5px; color: var(--sh-ink-2); line-height: 1.35; margin: 0; display: flex; align-items: center; gap: 4px; }
.sh-setup-instructions { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sh-ink); }
.sh-setup-instructions b { color: var(--sh-primary); }
.sh-field-group { display: flex; flex-direction: column; gap: 6px; }
.sh-field-label { font-size: 13px; font-weight: 600; color: var(--sh-ink); display: flex; justify-content: space-between; align-items: center; }
.sh-field-optional { font-size: 11.5px; font-weight: 400; color: var(--sh-ink-2); }
.sh-input-box { position: relative; display: flex; align-items: center; }
.sh-input-box .sh-input-icon { position: absolute; left: 14px; color: var(--sh-ink-2); font-size: 19px; pointer-events: none; }
.sh-input-box input { width: 100%; height: 46px; padding: 0 44px 0 42px; border-radius: 10px; border: 1px solid var(--sh-line); background: var(--sh-card); font-size: 14.5px; color: var(--sh-ink); font-family: inherit; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; }
.sh-input-box input:focus { outline: none; border-color: var(--sh-primary); box-shadow: 0 0 0 3px var(--sh-primary-soft); }
.sh-input-box input::placeholder { color: #94a3b8; }
.sh-input-box .sh-toggle-eye { position: absolute; right: 4px; height: 38px; width: 38px; border: none; background: transparent; color: var(--sh-ink-2); border-radius: 8px; cursor: pointer; display: grid; place-items: center; padding: 0; }
.sh-input-box .sh-toggle-eye:hover { background: var(--sh-soft); color: var(--sh-ink); }
.sh-input-box .sh-toggle-eye i { font-size: 20px; }
.sh-criteria-row { display: flex; align-items: center; gap: 12px; margin-top: 2px; flex-wrap: wrap; }
.sh-criterion-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--sh-ink-2); transition: color 0.15s; }
.sh-criterion-item i { font-size: 15px; color: #94a3b8; transition: color 0.15s; }
.sh-criterion-item.sh-valid { color: var(--sh-success); font-weight: 600; }
.sh-criterion-item.sh-valid i { color: var(--sh-success); }
.sh-setup-card-alert { display: none; align-items: center; gap: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
.sh-setup-card-alert i { font-size: 18px; color: var(--sh-danger); flex-shrink: 0; }
.sh-btn-submit-setup { width: 100%; height: 48px; background: var(--sh-primary); color: #ffffff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 12px rgba(26,95,180,0.25); transition: background-color 0.15s, transform 0.1s, box-shadow 0.15s; margin-top: 6px; }
.sh-btn-submit-setup:hover { background: var(--sh-primary-hover); box-shadow: 0 6px 16px rgba(26,95,180,0.35); }
.sh-btn-submit-setup:active { transform: scale(0.99); }
.sh-setup-footnote { text-align: center; font-size: 12px; color: var(--sh-ink-2); line-height: 1.4; margin: 0; }
.sh-setup-cancel-row { display: flex; justify-content: center; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--sh-line); margin-top: 6px; }
.sh-setup-cancel-row .sh-btn { height: 42px; min-height: 42px; padding: 0 16px; font-size: 13.5px; font-weight: 500; border-radius: 10px; border: 1px solid var(--sh-line); background: var(--sh-card); color: var(--sh-ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: all 0.15s ease; box-sizing: border-box; flex: 1; max-width: 220px; }
.sh-setup-cancel-row .sh-btn:hover { background: var(--sh-soft); border-color: var(--sh-border); color: var(--sh-ink); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); }
.sh-setup-cancel-row .sh-btn.sh-btn-signout:hover { color: var(--sh-brand-red); border-color: rgba(220, 53, 69, 0.3); background: #fff5f5; }
.sh-photo-actions-bar { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.sh-photo-action-btn { background: var(--sh-soft); border: 1px solid var(--sh-line); color: var(--sh-ink); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 4px 10px; border-radius: 14px; display: inline-flex; align-items: center; gap: 4px; transition: all 0.15s ease; }
.sh-photo-action-btn:hover { background: var(--sh-primary-soft); color: var(--sh-primary); border-color: var(--sh-primary); }
.sh-photo-action-btn.sh-danger { color: var(--sh-danger); }
.sh-photo-action-btn.sh-danger:hover { background: #fef2f2; border-color: var(--sh-danger); }
[data-theme="logo"] .sh-doctor-avatar { background: linear-gradient(135deg, var(--sh-brand-magenta, #C90085), var(--sh-brand-pink, #E60057)); box-shadow: 0 4px 14px rgba(201, 0, 133, 0.28); }
[data-theme="logo"] .sh-doctor-camera-btn { background: var(--sh-brand-magenta, #C90085); }
[data-theme="logo"] .sh-doctor-camera-btn:hover { background: var(--sh-brand-pink, #E60057); }
[data-theme="logo"] .sh-btn-submit-setup { background: var(--sh-brand-gradient, #C90085); box-shadow: 0 4px 12px rgba(201, 0, 133, 0.25); }
[data-theme="logo"] .sh-btn-submit-setup:hover { background: var(--sh-brand-gradient-hover, #A8006E); box-shadow: 0 6px 16px rgba(201, 0, 133, 0.35); }
[data-theme="logo"] .sh-doctor-setup-card { border-color: rgba(201, 0, 133, 0.14); box-shadow: 0 10px 30px rgba(201, 0, 133, 0.08); }
[data-theme="logo"] .sh-setup-topbar { border-bottom-color: rgba(201, 0, 133, 0.14); }
.sh-setup-topbar-right .sh-theme-toggle-btn { height: 34px; min-height: 34px; padding: 0 10px; font-size: 12.5px; }
@media (max-width: 480px) {
  .sh-setup-topbar { padding: 0 14px; }
  .sh-doctor-setup-card { padding: 24px 18px; border-radius: 16px; }
  .sh-doctor-welcome-box { gap: 14px; }
  .sh-doctor-avatar { width: 60px; height: 60px; font-size: 20px; }
  .sh-doctor-name { font-size: 16px; }
}

/* Prescription file cards and the viewer's backdrop */
.sh-rxcard { position: relative; width: 120px; flex: 0 0 120px; background: var(--sh-card); border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); padding: 6px; display: grid; gap: 2px; }
.sh-rxcard-open { display: grid; place-items: center; height: 74px; border: 0; border-radius: 10px; background: var(--sh-soft); cursor: pointer; overflow: hidden; padding: 0; }
.sh-rxcard-open img { width: 100%; height: 100%; object-fit: cover; }
.sh-rxcard-open .sh-ms { font-size: 30px; color: var(--sh-ink-2); }
.sh-rxcard-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-rxcard-meta { font-size: 11px; color: var(--sh-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-rxcard-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.sh-rxcard-del .sh-ms { font-size: 14px; }
.sh-rx-scrim { background: rgba(18,20,24,0.5); z-index: 1190; }
dialog.sh-viewer[open] { position: fixed; inset: 0; margin: auto; z-index: 1200; }

/* Patient records: breathing room under the tiles, and drop-downs that are not cut off at the foot of the record card */
#tiles { margin-bottom: 16px; }
.sh-rec-detail { overflow: visible; }

/* ---- Loading without a splash: the whole frame as shimmer (see ShellSkeleton.razor and the same markup in index.html) ---- */
.sh-skel-nav { display: flex; align-items: center; gap: 12px; padding: 11px 12px; min-height: 46px; }
.sh-skel-ico { width: 22px; height: 22px; border-radius: 7px; flex: 0 0 22px; }
.sh-boot .sh-skel-nav .sh-skel-line { flex: 0 0 auto; }
.sh-collapsed .sh-skel-nav .sh-skel-line, .sh-collapsed .sh-side-label .sh-skel { display: none; }
/* Items only some roles have. The role is set on <html> as data-skel-role (inv, central, admin) before the first paint. */
html[data-skel-role="inv"] .sk-staff { display: none !important; }
html:not([data-skel-role="inv"]) .sk-inv { display: none !important; }
.sh-boot .sh-main { min-width: 0; }
/* The part of a page that is still on its way stays visible but quiet, so nothing jumps */
.sh-dimmed { opacity: 0.55; pointer-events: none; transition: opacity 0.12s ease; }
.sh-pl.sh-list-busy .sh-pl-scroll { opacity: 0.55; transition: opacity 0.12s ease; }
/* index.html shows one of two frames and one of two pages before the app starts; these pick the right ones (see the script there) */
html[data-skel-role="none"] .sk-frame { display: none !important; }
html:not([data-skel-role="none"]) .sk-auth { display: none !important; }
html[data-skel-page="records"] .sk-page-home { display: none !important; }
html:not([data-skel-page="records"]) .sk-page-records { display: none !important; }
.sh-boot-stuck { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 12px 16px; background: var(--sh-card); color: var(--sh-ink); border: 1px solid var(--sh-line); border-radius: 14px; box-shadow: var(--sh-shadow); font-size: 13px; }
.sh-boot-stuck button { min-height: 40px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--sh-line); background: var(--sh-card); color: var(--sh-ink); font: inherit; font-weight: 600; cursor: pointer; }
.sh-boot-stuck button:last-child { background: var(--sh-primary); border-color: var(--sh-primary); color: #fff; }
/* The dialog's tick box ("don't ask again") and its backdrop over everything, as the demo draws it */
dialog.sh-app-dialog { border: 0; border-radius: 18px; padding: 20px; width: min(480px, 92vw); background: var(--sh-card); color: var(--sh-ink); box-shadow: 0 24px 64px rgba(18, 20, 24, 0.28); }
dialog.sh-app-dialog::backdrop { background: rgba(18, 20, 24, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.sh-ad-text { min-width: 0; }
.sh-ad-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--sh-ink-2); cursor: pointer; }
.sh-ad-check input { width: 18px; height: 18px; accent-color: var(--sh-primary); }
.sh-ad-icon .sh-ms { font-size: 22px; }

/* ---- Forms in dialogs (users, centres): the demo's dialog look, with the message under each field ---- */
dialog.sh-form-dialog { width: min(560px, 94vw); max-height: min(90vh, 880px); padding: 0; overflow: hidden; }
dialog.sh-form-dialog.sh-wide { width: min(680px, 94vw); }
dialog.sh-form-dialog[open] { display: flex; flex-direction: column; }
dialog.sh-form-dialog > form { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.sh-fd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 8px; }
.sh-fd-titles { min-width: 0; }
.sh-fd-head h3 { margin: 0; font-size: 18px; font-weight: 700; }
.sh-fd-head p { margin: 4px 0 0; font-size: 13px; color: var(--sh-ink-2); overflow-wrap: anywhere; }
.sh-fd-body { padding: 8px 22px 4px; overflow-y: auto; min-height: 0; display: grid; gap: 14px; align-content: start; grid-auto-rows: max-content; }
.sh-fd-body .sh-g { margin-bottom: 0; }
.sh-fd-actions { margin: 0; padding: 14px 22px 20px; border-top: 1px solid var(--sh-line); }
dialog.sh-form-dialog .sh-notice { margin: 4px 22px 0; }
.sh-fd-hint { font-size: 12px; color: var(--sh-ink-2); margin: 4px 0 0; }
.sh-fd-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.sh-opt-list { display: grid; gap: 8px; }
.sh-opt { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--sh-line); border-radius: 12px; background: var(--sh-soft); cursor: pointer; min-height: 44px; }
.sh-opt.sh-on { border-color: var(--sh-primary); background: var(--sh-primary-soft); }
.sh-opt input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--sh-primary); flex: none; }
.sh-opt b { display: block; font-size: 14px; }
.sh-opt small { display: block; font-size: 12px; color: var(--sh-ink-2); }
.sh-site-pick { max-height: 200px; overflow-y: auto; border: 1px solid var(--sh-line); border-radius: 12px; padding: 6px; display: grid; gap: 2px; }
.sh-site-pick .sh-opt { border-color: transparent; background: transparent; padding: 8px 10px; }
.sh-site-pick .sh-opt.sh-on { background: var(--sh-primary-soft); }
.sh-fd-error-line { color: var(--sh-error); font-size: 12.5px; margin: 2px 0 0; }

/* ---- user dialog: details, temporary password, role cards, and the "User Account Provisioned" window ---- */
.sh-fd-icon { color: var(--sh-success); font-size: 26px; margin-right: 10px; margin-top: 1px; flex: none; }
.sh-fd-head:has(.sh-fd-icon) { justify-content: flex-start; }
.sh-fd-head:has(.sh-fd-icon) .sh-icon-btn { margin-left: auto; }
.sh-fd-section { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sh-ink-2); margin: 2px 0 6px; }
.sh-fd-section .sh-ms { font-size: 18px; color: var(--sh-primary); }
.sh-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-fld .sh-fd-hint { margin: 0; }
.sh-temp-pass { padding: 12px 14px; background: var(--sh-soft); border: 1px solid var(--sh-line); border-radius: 12px; }
.sh-temp-pass-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sh-temp-pass-head .sh-fd-label { display: flex; align-items: center; gap: 6px; margin: 0; }
.sh-temp-pass-head .sh-fd-label .sh-ms { font-size: 18px; color: var(--sh-ink-2); }
.sh-temp-pass-row { display: flex; align-items: center; gap: 8px; }
.sh-temp-pass-input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--sh-line-strong, var(--sh-line)); border-radius: 10px; background: var(--sh-card); color: var(--sh-ink); font-family: ui-monospace, Consolas, monospace; font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.sh-icon-only { min-width: 44px; padding: 0; justify-content: center; }
.sh-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sh-role-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--sh-line); border-radius: 12px; background: var(--sh-card); cursor: pointer; min-height: 44px; }
.sh-role-card input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sh-role-card.sh-on { border-color: var(--sh-primary); background: var(--sh-primary-soft); box-shadow: 0 0 0 1px var(--sh-primary); }
.sh-role-card:focus-within { outline: 2px solid var(--sh-primary); outline-offset: 2px; }
.sh-role-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.sh-role-head .sh-ms { font-size: 20px; color: var(--sh-primary); }
.sh-role-desc { font-size: 12.5px; color: var(--sh-ink-2); }
@media (max-width: 640px) { .sh-role-grid { grid-template-columns: 1fr; } }
.sh-cred-card { display: grid; gap: 10px; padding: 14px; background: var(--sh-soft); border: 1px solid var(--sh-line); border-radius: 12px; }
.sh-cred-card > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--sh-line); font-size: 13.5px; }
.sh-cred-card > div:last-child { border-bottom: 0; padding-bottom: 0; }
.sh-cred-card > div > span:first-child { color: var(--sh-ink-2); font-size: 13px; }
.sh-cred-card b { text-align: right; overflow-wrap: anywhere; }
.sh-cred-handle { color: var(--sh-ink-2); font-size: 13px; }
.sh-cred-pass { font-size: 16px; font-weight: 700; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--sh-line); background: var(--sh-card); letter-spacing: 1px; }
.sh-cred-text { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--sh-ink-2); }
.sh-cred-text textarea { width: 100%; min-height: 96px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--sh-line); background: var(--sh-card); color: var(--sh-ink); font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; resize: none; box-sizing: border-box; }

/* ---- the tag of a test copy of the app (DEV): pinned to the top, centred, never in the way of a click ---- */
.sh-env-badge { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 2000; padding: 3px 14px; border-radius: 0 0 10px 10px; background: #f59e0b; color: #1f1300; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
@media (max-width: 640px) { .sh-env-badge { font-size: 10.5px; padding: 2px 10px; } }