:root {
  font-family: var(--font);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.shell { width: min(924px, calc(100% - 64px)); margin: auto; padding: 36px 0 48px; }
.brandbar { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.brand-name { margin: 0; font-size: 17px; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; }
.page-tabs { display: flex; padding: 4px; gap: 3px; border: 1px solid var(--line); border-radius: 11px; background: #edf0f4; }
.page-tabs a { padding: 7px 16px; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: 12px; white-space: nowrap; transition: color 160ms ease, background-color 160ms ease; }
.page-tabs a[aria-current="page"] { color: var(--accent); background: #fff; box-shadow: 0 1px 3px rgb(33 49 69 / 6%); }
.primary, .secondary, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; cursor: pointer; white-space: nowrap; font-weight: 500; transition: transform 180ms cubic-bezier(.2,.7,.3,1), background-color 180ms ease, box-shadow 180ms ease; }
.primary { min-height: 48px; min-width: 132px; padding: 0 22px; border: 0; background: var(--accent); color: white; font-size: 13px; box-shadow: 0 2px 4px rgb(36 63 98 / 5%); }
.secondary { min-height: 36px; padding: 0 13px; border: 1px solid var(--line); color: #52657c; background: white; font-size: 12px; }
.text-button { padding: 5px 8px; min-height: 30px; border: 0; color: var(--accent); background: transparent; font-size: 11px; }
.primary:disabled, .secondary:disabled { cursor: default; opacity: .55; transform: none; box-shadow: none; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #547aaa; outline-offset: 4px; }
.customer-toast { position: fixed; z-index: 100; top: max(22px, env(safe-area-inset-top)); left: 50%; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(460px, calc(100% - 36px)); padding: 13px 19px; border: 1px solid #dce7e1; border-radius: 12px; color: #345e49; background: #fff; box-shadow: 0 8px 30px rgb(32 49 67 / 12%); opacity: 0; transform: translate(-50%, -10px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.customer-toast::before { content: ''; flex: 0 0 16px; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(135deg, transparent 45%, currentColor 46% 54%, transparent 55%) 7px 4px / 6px 7px no-repeat, linear-gradient(45deg, transparent 40%, currentColor 41% 59%, transparent 60%) 3px 7px / 5px 4px no-repeat; }
.customer-toast[data-kind="error"] { color: #9b514b; border-color: #edddda; }
.customer-toast[data-kind="error"]::before { background: linear-gradient(currentColor,currentColor) center 3px / 1.5px 5px no-repeat, linear-gradient(currentColor,currentColor) center 10px / 1.5px 1.5px no-repeat; }
.customer-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine) {
  .primary:not(:disabled):hover { background: #2e5685; transform: translateY(-1px); box-shadow: 0 5px 12px rgb(36 63 98 / 16%); }
  .secondary:not(:disabled):hover, .text-button:hover { background: #f0f4f8; }
  .page-tabs a:hover { color: var(--accent); }
}
.primary:not(:disabled):active, .secondary:not(:disabled):active, .text-button:active { transform: translateY(0) scale(.98); transition-duration: 80ms; }
.primary:not(:disabled):active { background: #264b77; box-shadow: 0 1px 2px rgb(36 63 98 / 10%); }
@media (max-width: 640px) {
  .shell { width: calc(100% - 36px); padding: 27px 0 32px; }
  .brandbar { gap: 18px; flex-wrap: wrap; margin-bottom: 23px; }
  .brand-name { font-size: 16px; }
  .page-tabs a { padding: 7px 11px; font-size: 11px; }
}
@media (max-width: 390px) { .page-tabs { width: 100%; } .page-tabs a { flex: 1; text-align: center; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .primary:not(:disabled):hover, .primary:not(:disabled):active, .secondary:not(:disabled):active, .text-button:active { transform: none; }
}

/* Approved shared customer shell; business controls retain their existing IDs. */
body { letter-spacing:-.15px; font-synthesis:none; }
button,input,textarea,select { font:inherit; }
svg { vertical-align:middle; flex-shrink:0; }
::selection { background:var(--accent-soft); color:var(--ink); }
.shell { width:min(1120px,100%); margin:auto; padding:0 0 40px; }
.brandbar { height:70px; min-height:70px; gap:20px; margin:0; padding:0 36px; flex-wrap:nowrap; }
.customer-header-actions { display:flex; align-items:center; gap:20px; }
.page-tabs { align-items:center; gap:29px; padding:0; border:0; border-radius:0; background:transparent; }
.page-tabs a { padding:8px 0; color:var(--muted); border-radius:0; font-size:12px; transition:color 180ms var(--ease); }
.page-tabs a[aria-current="page"],.page-tabs a:hover { color:var(--ink); background:transparent; box-shadow:none; }
.primary,.secondary,.text-button { text-decoration:none; transition:transform 180ms var(--ease),background-color 180ms ease,box-shadow 180ms ease; }
.primary { background:var(--accent); box-shadow:none; }
.secondary { min-height:38px; border-color:var(--line); color:var(--ink); background:var(--paper); }
.text-button { min-height:32px; color:var(--accent); font-size:12px; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline-color:var(--accent); }
input,textarea,select { color:var(--ink); background:var(--paper); }
.customer-toast { border-color:var(--line); border-radius:13px; color:var(--green); background:var(--paper); box-shadow:0 8px 30px #00000015; }
.customer-toast[data-kind="error"] { color:var(--red); border-color:var(--line); }
.skip-link { position:fixed; left:20px; top:-100px; z-index:110; padding:10px 16px; border-radius:8px; color:var(--paper); background:var(--ink); }
.skip-link:focus { top:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(hover:hover) and (pointer:fine) {
  .primary:not(:disabled):hover { background:var(--accent-hover); box-shadow:0 4px 14px #0071e31a; }
  .secondary:not(:disabled):hover,.text-button:hover { background:var(--soft); }
}
.primary:not(:disabled):active { background:var(--accent-hover); }
@media(max-width:640px) {
  .shell { width:100%; padding:0 0 30px; }
  .brandbar { height:66px; min-height:66px; gap:12px; margin:0; padding:0 20px; }
  .customer-header-actions { gap:10px; }
  .page-tabs { gap:13px; }
  .page-tabs a { padding:8px 0; font-size:11px; }
  .theme-toggle { width:28px; height:28px; }
}
@media(max-width:420px) {
  .brandbar { gap:8px; }
  .customer-header-actions { flex:1; justify-content:flex-end; }
  .page-tabs { width:auto; gap:10px; }
  .page-tabs a { flex:none; }
  .wordmark { gap:6px; }
  .wordmark strong { font-size:17px; }
  .brand-symbol { width:27px; height:27px; }
}
@media(max-width:360px) {
  .brandbar { padding-inline:16px; }
  .customer-header-actions { gap:6px; }
  .page-tabs { gap:8px; }
  .page-tabs a { font-size:10px; }
  .theme-toggle { width:25px; }
}