:root {
  color-scheme: light;
  --green: #087f67;
  --green-dark: #066653;
  --green-soft: #e7f5f0;
  --text: #172a25;
  --muted: #71817a;
  --line: #e6eeea;
}

body {
  color: var(--text);
  background:
    radial-gradient(ellipse at 92% 0%, rgba(205, 235, 223, .6), transparent 31rem),
    linear-gradient(180deg, #f5f8f6 0%, #f3f6f5 52%, #f7f9f8 100%);
  font-size: 14px;
}

::selection { color: #fff; background: #087f67; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #74c5aa;
  outline-offset: 3px;
}

.app-shell { width: min(1120px, calc(100% - 56px)); }
.topbar {
  height: 82px;
  border-bottom: 1px solid rgba(222, 233, 227, .82);
}
.brand { gap: 12px; font-size: 18px; letter-spacing: -.04em; }
.brand-mark {
  width: 39px;
  height: 39px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 13px;
  background: linear-gradient(145deg, #13a17e, #086b58);
  box-shadow: 0 6px 14px #087f672e, inset 0 1px 0 #ffffff45;
}
.brand small { margin-top: 3px; color: #82918a; font-size: 8px; letter-spacing: .17em; }
.open-status {
  padding: 9px 13px;
  border: 1px solid #e0ece6;
  border-radius: 999px;
  color: #527065;
  background: rgba(255, 255, 255, .72);
  font-size: 11px;
}
.open-status i, .live-badge i { background: #14a679; box-shadow: 0 0 0 4px #dbf4e9; }
.auth-logout { border-radius: 999px; }

.page-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 174px;
  align-items: center;
  margin: 26px 0 22px;
  padding: 30px 34px;
  border: 1px solid #195b4d;
  border-radius: 23px;
  color: #fff;
  background:
    radial-gradient(circle at 87% 18%, #49b59250, transparent 18rem),
    linear-gradient(115deg, #123d34 0%, #0e5545 54%, #087d63 100%);
  box-shadow: 0 18px 40px #164d3d20, inset 0 1px 0 #ffffff1c;
}
.page-intro::after {
  position: absolute;
  z-index: -1;
  right: -82px;
  bottom: -198px;
  width: 410px;
  height: 410px;
  border: 1px solid #ffffff20;
  border-radius: 50%;
  box-shadow: 0 0 0 34px #ffffff08, 0 0 0 68px #ffffff06;
  content: "";
}
.page-intro h1 { margin-bottom: 8px; color: #fff; font-size: clamp(29px, 3.5vw, 38px); }
.page-intro .eyebrow { color: #90d5bb; }
.page-intro .hero-description { max-width: 650px; color: #d0e5dc; font-size: 13px; }
.page-intro > div:first-child { position: relative; z-index: 1; }
.page-intro > .button { position: relative; z-index: 1; }
.intro-centered { justify-content: center; text-align: center; }
.intro-centered > div { max-width: 580px; }
.intro-centered .hero-description { margin: 0 auto; }
.page-actions { position: relative; z-index: 1; gap: 9px; }
.page-actions .button { min-height: 43px; border-radius: 11px; }
.page-actions .button-dark { color: #134c3e; background: #e5f5ee; }
.page-actions .button-dark:hover { background: #fff; }
.page-actions .button-primary { color: #0b4d3f; background: #fff; }
.page-actions .button-primary:hover { background: #e5f5ee; }
.page-actions .button-quiet { border-color: #ffffff3d; color: #fff; background: #ffffff12; }
.page-actions .button-quiet:hover { background: #ffffff22; }

.hero.customer-hero {
  min-height: 294px;
  margin: 21px 0 24px;
  padding: 48px 58px;
  border: 1px solid #1c5c4d;
  border-radius: 25px;
  color: #fff;
  background:
    radial-gradient(circle at 79% 48%, #44ba9140, transparent 19rem),
    linear-gradient(115deg, #123d34, #0d604d 68%, #087d63);
  box-shadow: 0 18px 42px #164d3d20, inset 0 1px 0 #ffffff20;
}
.customer-hero .eyebrow { color: #95d9be; }
.customer-hero h1 { color: #fff; font-size: clamp(34px, 4vw, 46px); }
.customer-hero .hero-description { color: #d0e5dc; font-size: 14px; }
.queue-visual {
  position: absolute;
  top: 14px;
  right: 30px;
  width: min(340px, 38%);
  height: 260px;
  filter: drop-shadow(0 14px 22px #06291d25);
}
.queue-illustration { display: block; width: 100%; height: 100%; overflow: visible; }
.queue-ticket { filter: drop-shadow(0 12px 12px #072a1e30); }

.panel, .card, .metric-card, .manager-card {
  border: 1px solid #e6eeea;
  border-radius: 19px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 26px #1a3c2e08, 0 1px 2px #163c2c08;
}
.panel { margin-top: 16px; padding: 28px 30px; }
.card { padding: 29px 31px 25px; }
.panel-heading { margin-bottom: 19px; }
.panel-heading h2, .section-heading h2 { color: #1e332c; }
.eyebrow { color: #788c81; font-size: 9px; letter-spacing: .16em; }
.page-intro .eyebrow { font-size: 9px; }
.count-badge, .step-badge {
  border: 1px solid #dceee5;
  color: #08785f;
  background: #ecf8f2;
}
.metric-grid { gap: 14px; margin: 18px 0; }
.metric-card { position: relative; overflow: hidden; min-height: 126px; gap: 10px; padding: 20px 21px; }
.metric-card::after {
  position: absolute;
  right: -25px;
  bottom: -50px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #eaf7f1;
  content: "";
}
.metric-card > span, .metric-card strong, .metric-card small { position: relative; z-index: 1; }
.metric-card > span { color: #71817a; font-size: 11px; }
.metric-card strong { color: #08785f; font-size: 33px; }
.metric-card small { color: #8d9b94; }

.button {
  min-height: 43px;
  padding: 0 17px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-primary {
  color: #fff;
  background: linear-gradient(135deg, #109777, #08745d);
  box-shadow: 0 5px 12px #087f672b, inset 0 1px 0 #ffffff27;
}
.button-primary:hover { background: linear-gradient(135deg, #0c896d, #06664f); box-shadow: 0 7px 17px #087f6738; }
.button-dark { color: #fff; background: #173d33; }
.button-dark:hover { background: #102e26; }
.button-quiet {
  border-color: #dfe9e4;
  color: #52665c;
  background: #fff;
}
.button-quiet:hover { border-color: #c6ded1; color: #08785f; background: #f5fbf7; }
.button-full { height: 49px; }
.shortcut-actions { gap: 7px; }
.text-link { color: #14816a; }
.text-link:hover { color: #075f4d; }
.detail-tools .button { white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
body[data-page="company-admin"] .app-shell { padding-bottom: 20px; }

label, .form-field label, .company-picker label, .date-filter label { color: #354940; font-size: 11px; }
.form-field input, .form-field textarea, .form-field select, .company-picker select, .date-filter input,
.detail-tools input, .company-account-form input, .point-topup-form select {
  min-height: 45px;
  border: 1px solid #dfe9e4;
  border-radius: 11px;
  color: #1d332b;
  background-color: #fbfdfc;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus, .company-picker select:focus,
.date-filter input:focus, .detail-tools input:focus, .company-account-form input:focus, .point-topup-form select:focus {
  border-color: #39a888;
  background-color: #fff;
  box-shadow: 0 0 0 4px #dff4eb;
}
.form-field input::placeholder, .form-field textarea::placeholder, input::placeholder { color: #a1b0a8; }
.form-grid { gap: 19px 17px; }
.form-panel { padding: 30px; }
.input-wrap { height: 51px; border-color: #dfe9e4; border-radius: 12px; background: #fbfdfc; }
.input-wrap:focus-within { border-color: #39a888; box-shadow: 0 0 0 4px #dff4eb; }

.phone-keypad { gap: 9px; margin-top: 13px; }
.phone-keypad button {
  min-height: 48px;
  border-color: #e4ede8;
  border-radius: 12px;
  color: #243a31;
  background: linear-gradient(180deg, #fff, #f7faf8);
  box-shadow: 0 2px 4px #173d3308;
}
.phone-keypad button:hover { border-color: #a8d8c4; color: #08785f; background: #eff9f4; }
.queue-type-option span { border-color: #dfe9e4; border-radius: 12px; }
.queue-type-option input:checked + span { border-color: #51a98b; color: #066c56; background: #e9f7f0; box-shadow: 0 0 0 3px #e9f7f0; }
.queue-total strong { color: #087f67; font-size: 39px; }
.queue-divider { background: #e8efeb; }
.queue-type-count, .queue-call-group {
  border-color: #e4ede8;
  border-radius: 12px;
  background: #f7faf8;
}
.queue-type-count strong { color: #08785f; }
.live-badge { border-color: #dceee5; color: #08785f; background: #f4fbf7; }
.booking-result, .my-status { border: 1px solid #d7eee1; color: #146b51; background: #edfaf3; }
.queue-estimate .estimate-icon { color: #0b8468; background: #e6f5ee; }
.queue-footnote, .privacy-note { color: #829189; }

.manager-call-panel, .manager-list-panel { border-radius: 19px; }
.queue-call-group { padding: 16px; border-color: #e2ece6; border-radius: 14px; background: #f8fbf9; }
.queue-call-type { display: flex; align-items: center; gap: 9px; }
.queue-type-mark {
  display: grid;
  flex: 0 0 auto;
  min-width: 32px;
  height: 32px;
  place-items: center;
  padding: 0 8px;
  border: 1px solid #a8d8c1;
  border-radius: 10px;
  color: #086a50;
  background: #dff4e9;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.queue-call-type > strong { color: #20392f; font-size: 13px; }
.queue-call-heading .queue-call-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.queue-call-heading .queue-call-count {
  display: inline-flex;
  min-width: 106px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid #acd9c4;
  border-radius: 12px;
  color: #155943;
  background: #e2f5eb;
  box-shadow: inset 0 1px 0 #fff9;
}
.queue-call-heading .queue-call-count:last-child {
  border-color: #b7d4e9;
  color: #285776;
  background: #e8f3fb;
}
.queue-call-heading .queue-call-count > strong {
  color: #087454;
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.queue-call-heading .queue-call-count:last-child > strong { color: #236b98; }
.queue-call-heading .queue-call-count > span {
  color: inherit;
  font-size: 11px;
  font-weight: 800;
}
.manager-row, .manager-row-expanded { border-color: #e9efec; }
.manager-row:hover { background: #f9fcfa; }
.ticket-number { color: #098266; }
.manager-card { padding: 23px 27px; }
.manager-panel { border-color: #e5ede8; }
.status-chip { padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.status-approved { color: #087454; background: #e6f6ec; }
.status-pending { color: #8b681c; background: #fff5dc; }
.points-warning { border-color: #f0c6c0; color: #a62820; background: #fff3f1; }
.point-balance { color: #08785f; }
.point-balance-low { color: #b3261e; }

.data-table { border-collapse: separate; border-spacing: 0; }
.data-table th { color: #64766c; background: #f2f7f4; }
.data-table th:first-child { border-radius: 9px 0 0 9px; }
.data-table th:last-child { border-radius: 0 9px 9px 0; }
.data-table td { border-color: #ebf0ed; color: #52645a; }
.data-table td strong { color: #08785f; }
.table-scroll { border: 1px solid #e8efeb; border-radius: 11px; }
.table-scroll .data-table { margin: 0; }
.table-scroll .data-table th:first-child, .table-scroll .data-table th:last-child { border-radius: 0; }
.table-scroll .data-table th { border-bottom: 1px solid #e8efeb; }
.empty-list { padding: 24px 12px; color: #84948b; text-align: center; font-size: 12px; }
.approval-row, .company-row { border-color: #e9efec; }
.approval-main strong, .company-main strong { color: #20372e; }
.company-avatar { border: 1px solid #d9eee3; color: #08785f; background: #e9f7f0; }
.company-links a { color: #08785f; }
.company-access-address code { color: #64776c; }
.company-account-form { border-color: #e9efec; }
.company-logo-preview { border-color: #b8d9c9; border-radius: 20px; color: #08785f; background: #f0f8f4; }
.notice-box { border: 1px solid #d7eee1; color: #146b51; background: #edfaf3; }
.demo-notice { color: #78877f; }
.demo-notice strong { color: #08785f; }
.settings-warning { color: #907239; }
body[data-page="signup"] .narrow-main { width: min(780px, 100%); }
body[data-page="signup"] .intro-centered {
  min-height: 156px;
  margin: 28px 0 18px;
  padding: 24px 30px;
}
body[data-page="signup"] .intro-centered > div { max-width: 620px; }
body[data-page="signup"] .intro-centered .eyebrow { margin-bottom: 8px; }
body[data-page="signup"] .intro-centered h1 { margin-bottom: 7px; }
body[data-page="signup"] .intro-centered .hero-description { font-size: 12px; }
body[data-page="signup"] .signup-panel { padding: 18px; border-radius: 22px; }
body[data-page="signup"] .signup-form { grid-template-columns: minmax(0, 1fr); gap: 13px; }
body[data-page="signup"] .signup-form > .signup-section,
body[data-page="signup"] .signup-form > .signup-submit { grid-column: 1 / -1; }
body[data-page="signup"] .signup-section {
  min-width: 0;
  padding: 20px;
  border: 1px solid #e7efea;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #fbfdfc);
}
body[data-page="signup"] .signup-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
body[data-page="signup"] .signup-section-heading > span {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #d9eee4;
  border-radius: 11px;
  color: #08785f;
  background: #ecf8f2;
  font-size: 11px;
  font-weight: 800;
}
body[data-page="signup"] .signup-section-heading h2 { margin: 0 0 3px; font-size: 15px; }
body[data-page="signup"] .signup-section-heading p { margin: 0; color: #829189; font-size: 10px; line-height: 1.6; }
body[data-page="signup"] .signup-section-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
}
body[data-page="signup"] .signup-section-fields > .full-field { grid-column: 1 / -1; }
body[data-page="signup"] .signup-section-fields .form-field label { margin-bottom: 7px; color: #344a40; font-size: 11px; }
body[data-page="signup"] .signup-section-fields .form-field input,
body[data-page="signup"] .signup-section-fields .form-field select { height: 46px; min-height: 46px; border-radius: 11px; background-color: #fbfdfc; }
body[data-page="signup"] .signup-section-fields .form-field input { height: 46px; }
body[data-page="signup"] .signup-section-fields .form-field textarea { height: auto; min-height: 82px; border-radius: 11px; background-color: #fbfdfc; }
body[data-page="signup"] .signup-section-fields .form-field small { display: block; margin-top: 8px; color: #78877f; font-size: 10px; line-height: 1.65; }
body[data-page="signup"] .signup-pricing-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid #dceee5;
  border-radius: 12px;
  color: #4d6d5e;
  background: #f1faf5;
}
body[data-page="signup"] .signup-pricing-note > span {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  color: #08785f;
  background: #e0f3e9;
  font-weight: 800;
}
body[data-page="signup"] .signup-pricing-note p { margin: 0; font-size: 10px; line-height: 1.7; }
body[data-page="signup"] .signup-pricing-note strong { color: #175b47; font-size: 11px; }
body[data-page="signup"] .signup-submit { padding-top: 2px; }
body[data-page="signup"] .signup-submit .button { min-height: 51px; border-radius: 13px; }
@media (max-width: 600px) {
  body[data-page="signup"] .narrow-main { width: 100%; }
  body[data-page="signup"] .intro-centered { min-height: 0; margin: 18px 0 14px; padding: 22px 18px; }
  body[data-page="signup"] .signup-panel { padding: 12px; }
  body[data-page="signup"] .signup-section { padding: 16px 14px; border-radius: 14px; }
  body[data-page="signup"] .signup-section-heading { margin-bottom: 15px; }
  body[data-page="signup"] .signup-section-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body[data-page="signup"] .signup-section-fields > .full-field { grid-column: 1; }
}
.qr-dialog {
  border-color: #e1ebe5;
  border-radius: 22px;
  box-shadow: 0 28px 90px #102d2350;
}
.qr-dialog-address { border: 1px solid #e4ede8; color: #566b60; background: #f5f9f6; }
.toast { border: 1px solid #ffffff1f; border-radius: 13px; background: #173d33; box-shadow: 0 14px 35px #102d2350; }
.narrow-main { width: min(700px, 100%); }
.intro-centered { margin-top: 33px; }
footer { color: #78877f; }
footer .text-link { color: #08785f; }

@media (max-width: 920px) {
  .app-shell { width: min(calc(100% - 40px), 760px); }
  .page-intro { padding: 26px; }
}

@media (max-width: 760px) {
  .app-shell { width: calc(100% - 32px); }
  .topbar { min-height: 68px; height: auto; }
  .page-intro {
    min-height: unset;
    align-items: flex-start;
    gap: 19px;
    margin: 19px 0 16px;
    padding: 24px 23px;
    border-radius: 19px;
  }
  .page-intro::after { right: -190px; bottom: -250px; }
  .page-intro > .button { align-self: stretch; }
  .page-actions { width: 100%; max-width: none; justify-content: stretch; }
  .page-actions .shortcut-actions { flex: 1 1 0; min-width: 0; }
  .page-actions .shortcut-actions > a { flex: 1 1 auto; min-width: 0; }
  .hero.customer-hero { min-height: 245px; margin: 12px 0 17px; padding: 31px 25px; border-radius: 20px; }
  .customer-hero h1 { font-size: clamp(30px, 7vw, 38px); }
  .customer-hero .hero-description { font-size: 12px; }
  .queue-visual { top: 54px; right: -8px; width: 270px; height: 207px; opacity: .8; }
  .content-grid { gap: 13px; }
  .card, .panel { border-radius: 16px; }
  .panel { padding: 22px 19px; }
  .card { padding: 22px 20px; }
  .metric-grid { gap: 10px; }
  .metric-card { min-height: 108px; padding: 16px; }
  .manager-card { padding: 19px; }
}

@media (max-width: 480px) {
  .app-shell { width: calc(100% - 24px); }
  .topbar { min-height: 62px; gap: 7px; }
  .brand { gap: 8px; font-size: 15px; }
  .brand-mark { width: 33px; height: 33px; border-radius: 11px; }
  .open-status { padding: 7px 9px; font-size: 9px; }
  .page-intro { gap: 15px; padding: 21px 18px; }
  .page-intro h1 { font-size: 28px; }
  .page-intro .hero-description { font-size: 11px; }
  .page-actions { flex-direction: column; gap: 8px; }
  .page-actions .shortcut-actions { width: 100%; }
  .shortcut-actions > a { justify-content: center; }
  .shortcut-actions > button { padding: 0 10px; font-size: 10px; }
  .hero.customer-hero { min-height: 221px; padding: 25px 19px; }
  .queue-visual { top: 92px; right: 4px; width: 185px; height: 142px; opacity: .3; }
  .metric-card { min-height: 98px; padding: 14px 12px; }
  .metric-card strong { font-size: 27px; }
  .metric-card small { font-size: 9px; }
  .panel { padding: 19px 15px; }
  .card { padding: 20px 16px; }
  .form-panel { padding: 22px 17px; }
  .form-grid { gap: 15px; }
  .point-topup-form { gap: 10px; }
  .point-topup-form > .button { width: 100%; }
  .queue-settings-controls { gap: 8px; }
  .company-profile-controls { gap: 8px; }
  .panel-heading { gap: 8px; }
  .detail-tools { justify-content: flex-start; }
  .detail-tools label { text-align: left; }
  .intro-centered { margin-top: 22px; }
  .narrow-main { width: 100%; }
}

@media (orientation: landscape) and (min-width: 761px) and (max-width: 1400px) {
  body[data-page="customer"] .app-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    padding-bottom: 20px;
  }
  body[data-page="customer"] main {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  body[data-page="store-admin"] .app-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    padding-bottom: 20px;
  }
  body[data-page="store-admin"] main {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  body[data-page="customer"] .app-shell,
  body[data-page="store-admin"] .app-shell { width: min(1220px, calc(100% - 48px)); }

  body[data-page="customer"] .topbar,
  body[data-page="store-admin"] .topbar { height: 62px; }

  body[data-page="customer"] .hero.customer-hero {
    min-height: 174px;
    margin: 12px 0 14px;
    padding: 25px 34px;
    border-radius: 20px;
  }
  body[data-page="customer"] .customer-hero h1 { font-size: clamp(30px, 3vw, 36px); }
  body[data-page="customer"] .customer-hero .hero-description { font-size: 12px; }
  body[data-page="customer"] .hero-copy { max-width: 68%; }
  body[data-page="customer"] .queue-visual { top: -16px; right: 18px; width: 250px; height: 191px; }
  body[data-page="customer"] .content-grid {
    flex: 1;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
  }
  body[data-page="customer"] .card {
    min-height: 0;
    padding: 18px 21px 16px;
    border-radius: 16px;
  }
  body[data-page="customer"] .booking-card,
  body[data-page="customer"] .queue-card { height: 100%; }
  body[data-page="customer"] .section-heading .eyebrow { margin-bottom: 4px; }
  body[data-page="customer"] .section-heading h2 { font-size: 18px; }
  body[data-page="customer"] .muted { margin: 7px 0 12px; font-size: 11px; }
  body[data-page="customer"] .booking-card label { margin-bottom: 6px; }
  body[data-page="customer"] .input-wrap { height: 43px; }
  body[data-page="customer"] .phone-keypad { gap: 6px; margin-top: 8px; }
  body[data-page="customer"] .phone-keypad button { min-height: 54px; border-radius: 10px; }
  body[data-page="customer"] .button-full { height: 43px; min-height: 43px; margin-top: 9px; }
  body[data-page="customer"] .privacy-note { margin-top: 8px; }
  body[data-page="customer"] .queue-total { margin-top: 19px; }
  body[data-page="customer"] .queue-divider { margin: 12px 0; }
  body[data-page="customer"] .queue-footnote { margin-top: 11px; }
  body[data-page="customer"] footer { padding-top: 15px; padding-bottom: 15px; }

  body[data-page="store-admin"] .page-intro {
    min-height: 132px;
    margin: 12px 0 14px;
    padding: 22px 30px;
    border-radius: 20px;
  }
  body[data-page="store-admin"] .page-intro h1 { font-size: 32px; }
  body[data-page="store-admin"] #manager-workspace {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(310px, .82fr) minmax(0, 1.48fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
  }
  body[data-page="store-admin"] #manager-workspace > .manager-call-panel,
  body[data-page="store-admin"] #manager-workspace > .manager-list-panel {
    min-width: 0;
    min-height: 0;
    margin-top: 0;
    padding: 20px 21px;
    border-radius: 16px;
  }
  body[data-page="store-admin"] #manager-workspace > .manager-call-panel,
  body[data-page="store-admin"] #manager-workspace > .manager-list-panel {
    display: flex;
    flex-direction: column;
  }
  body[data-page="store-admin"] .manager-call-panel .panel-heading,
  body[data-page="store-admin"] .manager-list-panel .panel-heading { margin-bottom: 13px; }
  body[data-page="store-admin"] .queue-call-groups {
    flex: 1;
    align-content: center;
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  body[data-page="store-admin"] .queue-call-group {
    display: flex;
    min-height: 116px;
    align-items: center;
    padding: 16px;
    border-radius: 15px;
  }
  body[data-page="store-admin"] .queue-call-heading {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  body[data-page="store-admin"] .queue-call-heading > div {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }
  body[data-page="store-admin"] .queue-call-type { gap: 10px; }
  body[data-page="store-admin"] .queue-type-mark { min-width: 44px; height: 44px; border-radius: 13px; font-size: 16px; }
  body[data-page="store-admin"] .queue-call-type > strong { font-size: 15px; }
  body[data-page="store-admin"] .queue-call-heading > div > .queue-call-counts { gap: 8px; margin-top: 0; }
  body[data-page="store-admin"] .queue-call-heading .queue-call-count { min-width: 0; flex: 1; padding: 9px 11px; }
  body[data-page="store-admin"] .queue-call-heading .queue-call-count > strong { font-size: 24px; }
  body[data-page="store-admin"] .queue-call-heading .queue-call-count > span { font-size: 12px; }
  body[data-page="store-admin"] .queue-call-heading .button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    font-size: 12px;
  }
  body[data-page="store-admin"] .manager-type-list { margin-top: 13px; }
  body[data-page="store-admin"] #manager-list { flex: 1; overflow-y: auto; }
  body[data-page="store-admin"] .manager-list-panel > .manager-list > .empty-list {
    display: grid;
    flex: 1;
    min-height: 220px;
    place-items: center;
    border: 1px dashed #dce9e2;
    border-radius: 14px;
    background: linear-gradient(145deg, #fbfdfc, #f5faf7);
    font-size: 13px;
  }
  body[data-page="store-admin"] .manager-row-expanded { grid-template-columns: 47px minmax(120px, 1fr) auto; }
  body[data-page="store-admin"] .row-actions .button { min-height: 44px; padding: 0 13px; }
  body[data-page="store-admin"] footer { padding-top: 15px; padding-bottom: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}