/* QueueMe merchant workspace — queue markers and bell cues support the real controls. */
:root {
  --bg: #f3f8f6;
  --surface: #ffffff;
  --card: #ffffff;
  --ink: #17324d;
  --muted: #65788b;
  --line: #dce8e6;
  --orange: #1f57c3;
  --blue: #1f57c3;
  --teal: #23876e;
  --green: #23876e;
  --mint: #b9e4d4;
  --shadow: 0 15px 34px rgba(23, 50, 77, .08);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 95% 24px, rgba(185,228,212,.7) 0 6px, transparent 7px),
    radial-gradient(circle at calc(95% - 25px) 45px, rgba(31,87,195,.55) 0 5px, transparent 6px),
    var(--bg);
}
.topbar, .top {
  position: sticky;
  overflow: hidden;
  background: rgba(255, 253, 248, .94);
  border-bottom-color: var(--line);
  box-shadow: 0 3px 14px rgba(23,50,77,.03);
}
.topbar::after, .top::after {
  content: "";
  position: absolute;
  width: 112px;
  height: 40px;
  right: -34px;
  bottom: -19px;
  border: 2px solid rgba(35,135,110,.38);
  border-right: 0;
  border-radius: 42px 0 0 0;
}
.topbar .in, .topbar .wrap { max-width: 1180px; min-height: 68px; }
.ttl, h1, h2, h3 { color: var(--ink); letter-spacing: -.035em; }
.ttl small, .hint, .field label, .k, .who, .empty, .lead, .sub, .muted-link { color: var(--muted); }
.wrap, .body { max-width: 1180px; }

.brand { gap: 11px; color: var(--ink); }
.brand .mark, .mark {
  position: relative;
  border-radius: 14px 14px 14px 6px !important;
  background: var(--blue) !important;
  box-shadow: 0 9px 18px rgba(31,87,195,.18);
}
.brand .mark::after, .mark::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  right: -3px;
  bottom: -3px;
  border: 2px solid #fffdf8;
  border-radius: 50%;
  background: var(--teal);
}

/* Login and registration are one clear surface with a route imprint, not a floating template. */
.login {
  position: relative;
  overflow: hidden;
  max-width: 440px;
  border-color: var(--line) !important;
  border-radius: 28px 12px 28px 28px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 52px rgba(23,50,77,.12);
}
.login::before {
  content: "";
  position: absolute;
  width: 168px;
  height: 168px;
  top: -96px;
  right: -80px;
  border: 26px solid rgba(185,228,212,.44);
  border-radius: 50%;
}
.login > * { position: relative; z-index: 1; }
.field input, .field textarea, input, textarea, select {
  border-color: #d3e3dc !important;
  background: #fff !important;
  color: var(--ink) !important;
}
.field input:focus, .field textarea:focus, input:focus, textarea:focus, select:focus {
  outline: 0 !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 4px rgba(31,87,195,.11) !important;
}
.muted-link a { color: var(--blue); }

.btn, button.btn, .btn-map, .back {
  min-height: 40px;
  border-color: #d3e3dc;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}
.btn:hover, button.btn:hover, .btn-map:hover, .back:hover { background: #edf7f3; border-color: #bcdccd; }
.btn-primary, .primary, .btn-save, .btn-loc, .submit-btn, .create-btn {
  position: relative;
  overflow: hidden;
  border-color: var(--blue) !important;
  background: var(--blue) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(31,87,195,.18);
}
.btn-primary::after, .primary::after, .btn-save::after, .btn-loc::after, .submit-btn::after, .create-btn::after {
  content: "";
  position: absolute;
  top: -22px;
  right: -12px;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255,255,255,.30);
  border-radius: 50%;
}
.btn-primary:hover, .primary:hover, .btn-save:hover, .btn-loc:hover, .submit-btn:hover, .create-btn:hover { background: #163d84 !important; }
.btn-bind { border-radius: 14px; background: linear-gradient(135deg,#06c755,#07884d) !important; color: #fff !important; }
.bind-status { border: 1px solid var(--line); background: #f2f9f6; }
.bind-status.ok, .st-av { background: #e7f6ee !important; color: #176d58 !important; }

/* Merchant home has an asymmetric welcome area and recognisable route pattern. */
.home { position: relative; overflow: hidden; padding: 46px 0 64px; }
.home::before {
  content: "";
  position: absolute;
  width: 310px;
  height: 170px;
  right: -58px;
  top: 8px;
  border: 18px solid rgba(185,228,212,.58);
  border-bottom: 0;
  border-radius: 170px 170px 0 0;
  transform: rotate(-12deg);
}
.home::after {
  content: "";
  position: absolute;
  right: 106px;
  top: 76px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: -30px 19px 0 var(--blue), -57px 14px 0 #ef8269;
}
.home .hi { position: relative; z-index: 1; max-width: 680px; font-size: clamp(30px, 4vw, 43px); line-height: 1.12; }
.home .sub { position: relative; z-index: 1; max-width: 620px; margin-top: 10px; margin-bottom: 36px; }
.sect { position: relative; z-index: 1; margin-top: 30px; }
.sect-h { margin-bottom: 16px; }
.sect-h h2 { font-size: 21px; }
.sect-h .tag { border: 1px solid #cce4da; background: #e9f6ef; color: var(--teal); }
.tag-menu { border-color: #d6e4f8 !important; background: #edf4ff !important; color: var(--blue) !important; }
.grid { gap: 17px; }
.card, .counter, .stat, .wait, .prod, .form-card {
  border-color: var(--line) !important;
  background: #fff;
  box-shadow: var(--shadow);
}
.home .card {
  position: relative;
  overflow: hidden;
  min-height: 165px;
  padding: 23px;
  border-radius: 22px 10px 22px 22px;
}
.home .card::before {
  content: "";
  position: absolute;
  right: -18px;
  top: -22px;
  width: 86px;
  height: 86px;
  border: 15px solid rgba(31,87,195,.08);
  border-radius: 50%;
}
.home .card:nth-child(2n)::before { border-color: rgba(35,135,110,.13); border-radius: 45% 55% 52% 48%; }
.home .card .nm { color: var(--ink); }
.home .card .st { color: var(--muted); }
.empty {
  position: relative;
  overflow: hidden;
  border: 1px dashed #b8d8cd !important;
  border-radius: 20px;
  background: rgba(255,255,255,.7) !important;
}
.empty::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 12px;
  border: 6px solid var(--blue);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 -9px 0 -5px var(--teal);
}

/* Live call management prioritises the actual queue while avoiding uniform rectangles. */
.stats { gap: 14px; }
.stat { position: relative; overflow: hidden; padding: 18px; border-radius: 19px 19px 8px 19px; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--blue); }
.stat:nth-child(2)::before { background: var(--teal); }
.stat:nth-child(3)::before { background: #ef8269; }
.stat .v { color: var(--ink); }
.counters { gap: 17px; }
.counter {
  position: relative;
  overflow: hidden;
  border-radius: 23px 10px 23px 23px;
}
.counter::after {
  content: "";
  position: absolute;
  width: 76px;
  height: 76px;
  top: -50px;
  right: -34px;
  border: 15px solid rgba(185,228,212,.55);
  border-radius: 50%;
}
.counter .cn, .counter .cur, .crow { position: relative; z-index: 1; }
.counter .cur { color: var(--blue); }
.counter .cur.idle { color: var(--muted); }
.crow { gap: 8px; }
.b-call { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; }
.b-call:hover { background: #163d84 !important; }
.b-done { background: var(--teal) !important; color: #fff !important; border-color: var(--teal) !important; }
.b-done:hover { background: #176d58 !important; }
.b-skip { color: #b42318 !important; border-color: #efc7c3 !important; background: #fff !important; }
.st-busy { background: #fff4de !important; color: #9a6200 !important; }
.wait { border-radius: 24px 10px 24px 24px; }
.wt { border-top-color: #e1ebe7; }
.wt .n { color: var(--blue); }

/* Settings retain form density but acquire a consistent pattern and save bar. */
.body { padding-top: 24px; }
.body .card { position: relative; overflow: hidden; border-radius: 22px 10px 22px 22px; }
.body .card::after { content: ""; position: absolute; width: 92px; height: 30px; right: -30px; top: 12px; border: 2px solid rgba(35,135,110,.26); border-left: 0; border-bottom: 0; border-radius: 0 28px 0 0; transform: rotate(-14deg); }
.body .card h2, .body .card > * { position: relative; z-index: 1; }
.save-bar { background: rgba(243,248,246,.88); border-top-color: var(--line); }
.toast { background: var(--ink); border-radius: 14px; }
.prod { border-radius: 17px; }
.prod.on { border-color: var(--blue) !important; background: #edf4ff !important; }

@media (max-width: 680px) {
  .topbar .in, .topbar .wrap { min-height: 62px; padding-left: 14px; padding-right: 14px; }
  .wrap, .body { padding-left: 14px; padding-right: 14px; }
  .home { padding-top: 32px; }
  .home::before { right: -135px; top: 0; opacity: .6; }
  .home::after { right: 44px; top: 36px; }
  .stats { grid-template-columns: 1fr; gap: 10px; }
  .row2 { grid-template-columns: 1fr; }
  .crow { flex-wrap: wrap; }
  .crow .btn { min-width: 44%; }
}

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