:root {
  --app-brand: #206bc4;
  --app-brand-dark: #174f94;
  --app-surface: #f6f8fb;
  --app-ink: #182433;
}

html { scroll-behavior: smooth; }
body { background: var(--app-surface); color: var(--app-ink); }
.page { min-height: 100vh; }
.navbar-brand { letter-spacing: -.02em; }
.brand-mark {
  width: 2.25rem; height: 2.25rem; border-radius: .65rem; display: inline-flex;
  align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(145deg, #4299e1, #206bc4); box-shadow: 0 8px 20px rgba(32,107,196,.22);
}
.app-shell { max-width: 1320px; }
.page-pretitle { letter-spacing: .08em; }
.status-pill { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--tblr-border-color); background:#fff; padding:.45rem .75rem; border-radius:999px; font-size:.78rem; color:var(--tblr-secondary); }
.live-dot { width:.5rem; height:.5rem; border-radius:50%; background:#2fb344; box-shadow:0 0 0 .22rem rgba(47,179,68,.14); }
.live-dot.offline { background:#d63939; box-shadow:0 0 0 .22rem rgba(214,57,57,.12); }
.soft-card { border: 1px solid rgba(98,105,118,.16); box-shadow: 0 10px 35px rgba(24,36,51,.045); }
.metric-icon { width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:.75rem; }
.metric-value { font-size:1.75rem; font-weight:700; letter-spacing:-.04em; }
.empty-state { padding:2.5rem 1.25rem; text-align:center; color:var(--tblr-secondary); }
.empty-state .icon-wrap { width:3.5rem; height:3.5rem; display:grid; place-items:center; margin:0 auto 1rem; border-radius:50%; background:var(--tblr-bg-surface-secondary); }
.queue-code { font-variant-numeric:tabular-nums; letter-spacing:.06em; font-weight:750; }
.conn-banner { position:fixed; left:50%; top:1rem; transform:translate(-50%,0); z-index:1090; border-radius:999px; padding:.55rem 1rem; color:#fff; font-size:.8rem; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.15); transition:.25s ease; }
.conn-banner.hidden { opacity:0; transform:translate(-50%,-1rem); pointer-events:none; }
.conn-banner.online { background:#2fb344; }.conn-banner.offline { background:#d63939; }
.role-card { height:100%; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; text-decoration:none!important; color:inherit; overflow:hidden; }
.role-card:hover { transform:translateY(-4px); box-shadow:0 18px 42px rgba(24,36,51,.10); border-color:rgba(32,107,196,.35); }
.role-card .role-icon { width:3.25rem; height:3.25rem; display:grid; place-items:center; border-radius:.9rem; }
.role-card .arrow { transition:transform .2s ease; }.role-card:hover .arrow { transform:translateX(4px); }
.hero-panel { position:relative; overflow:hidden; background:linear-gradient(135deg,#182433 0%,#206bc4 100%); color:#fff; border:0; min-height:330px; }
.hero-panel:after { content:""; position:absolute; width:420px; height:420px; right:-150px; top:-180px; border-radius:50%; background:rgba(255,255,255,.09); }
.hero-panel:before { content:""; position:absolute; width:230px; height:230px; right:130px; bottom:-170px; border-radius:50%; background:rgba(255,255,255,.07); }
.hero-content { position:relative; z-index:1; }
.service-tile { cursor:pointer; border:1px solid var(--tblr-border-color); background:#fff; border-radius:.75rem; padding:1rem; transition:.18s ease; text-align:left; width:100%; }
.service-tile:hover { border-color:#74a8e5; background:#f8fbff; }.service-tile.active { border-color:#206bc4; background:#edf5ff; box-shadow:0 0 0 3px rgba(32,107,196,.10); }
.service-code { width:2.5rem;height:2.5rem;border-radius:.65rem;display:grid;place-items:center;background:#e9f2fc;color:#206bc4;font-weight:700; }
.ticket-panel { background:linear-gradient(145deg,#fff,#f8fbff); border:1px dashed #9ec5ef; }
.ticket-number { font-size:clamp(3.5rem,8vw,6rem); line-height:1; font-weight:800; letter-spacing:.08em; color:#206bc4; font-variant-numeric:tabular-nums; }
.counter-card { border-top:3px solid transparent; transition:.2s ease; }.counter-card.is-active { border-top-color:#2fb344; }.counter-card.is-idle { border-top-color:#dce1e7; }
.current-number { font-size:2.5rem; line-height:1; color:#206bc4; font-weight:800; letter-spacing:.07em; font-variant-numeric:tabular-nums; }
.action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.danger-zone { border:1px solid rgba(214,57,57,.2); background:rgba(214,57,57,.025); }
.toast-alert { position:fixed; right:1rem; bottom:1rem; z-index:1090; min-width:280px; box-shadow:0 12px 34px rgba(24,36,51,.18); }
@media(max-width:767.98px){.hero-panel{min-height:auto}.action-grid{grid-template-columns:1fr}.ticket-number{font-size:4rem}.app-shell{padding-left:.75rem;padding-right:.75rem}}
@media print { .no-print{display:none!important} body{background:#fff}.ticket-panel{border:0;box-shadow:none!important} }