/* ============================================================
   FizzPark v2 — App styles
   Tokens from assets/colors_and_type.css.
   Forks admin kit.css + mobile.css, adds launcher/modal/forms.
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans); color: var(--fg-1); background: var(--navy-950);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
#root { height: 100vh; }
button { font-family: inherit; }
.icon, .m-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.icon svg, .icon .lucide { width: 1em; height: 1em; stroke-width: 1.75; }
.m-icon svg, .m-icon .lucide { width: 1em; height: 1em; stroke-width: 1.9; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); background-clip: content-box; }

/* ============================================================
   LAUNCHER — channel switcher chrome
   ============================================================ */
.launcher { height: 100vh; display: flex; flex-direction: column; background: var(--navy-950); overflow: hidden; }
.chrome {
  height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 0 18px;
  background: var(--navy-900); border-bottom: 1px solid var(--navy-700); color: #fff; z-index: 60;
}
.chrome__brand { display: flex; align-items: center; gap: 9px; font: var(--w-bold) 15px var(--font-sans); letter-spacing: -.01em; }
.chrome__brand img { height: 22px; }
.chrome__seg { display: flex; gap: 3px; background: rgba(255,255,255,.06); border-radius: 10px; padding: 3px; }
.chrome__seg button {
  display: flex; align-items: center; gap: 7px; border: 0; cursor: pointer; border-radius: 7px;
  padding: 7px 13px; font: var(--w-semibold) 13px var(--font-sans); letter-spacing: -.01em;
  background: transparent; color: rgba(255,255,255,.62); transition: all var(--dur-fast) var(--ease-out);
}
.chrome__seg button .icon { font-size: 16px; }
.chrome__seg button:hover { color: #fff; background: rgba(255,255,255,.06); }
.chrome__seg button.on { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.chrome__spacer { flex: 1; }
.chrome__meta { display: flex; align-items: center; gap: 7px; font: var(--w-medium) 12px var(--font-sans); color: rgba(255,255,255,.55); }
.chrome__reset { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: rgba(255,255,255,.75); font: var(--w-semibold) 12px var(--font-sans); cursor: pointer; }
.chrome__reset:hover { background: rgba(255,255,255,.08); color: #fff; }
.chrome__reset .icon { font-size: 14px; }
.stage-area { flex: 1; overflow: hidden; position: relative; min-height: 0; }

/* mobile stage (driver app) */
.mstage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background:
  radial-gradient(120% 90% at 50% 0%, #16273F, var(--navy-950) 70%); }
.mstage__device { position: relative; }
.mstage__hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: rgba(255,255,255,.4); font: var(--w-medium) 12px var(--font-sans); white-space: nowrap; }

/* ============================================================
   iOS device frame
   ============================================================ */
.ios { width: 402px; height: 858px; background: #000; border-radius: 56px; padding: 11px;
  box-shadow: 0 0 0 2px #2a2f37, 0 30px 70px rgba(0,0,0,.55); position: relative; }
.ios__screen { width: 100%; height: 100%; background: #F2F4F7; border-radius: 46px; overflow: hidden; position: relative; }
.ios__island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 118px; height: 34px; background: #000; border-radius: 20px; z-index: 100; }
.ios__status { position: absolute; top: 0; left: 0; right: 0; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 18px 30px 0; z-index: 90; pointer-events: none; }
.ios__status .t { font: var(--w-semibold) 15px var(--font-sans); color: var(--fg-1); }
.ios__status .r { display: flex; align-items: center; gap: 6px; color: var(--fg-1); }
.ios__home { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.32); z-index: 100; }

/* ============================================================
   MOBILE APP  (from mobile.css, adapted)
   ============================================================ */
.m-app { height: 100%; display: flex; flex-direction: column; background: #F2F4F7; font-family: var(--font-sans); color: var(--fg-1); position: relative; }
.m-scroll { flex: 1; overflow-y: auto; padding: 56px 18px 96px; }
.m-scroll::-webkit-scrollbar { width: 0; }
.m-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.m-header__hi { font: var(--w-medium) 13px var(--font-sans); color: var(--fg-3); }
.m-header__name { font: var(--w-bold) 20px var(--font-sans); letter-spacing: -.02em; color: var(--fg-1); }
.m-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--navy-700); color: #fff; display: flex; align-items: center; justify-content: center; font: var(--w-bold) 14px var(--font-sans); margin-left: auto; }
.m-bell { width: 40px; height: 40px; border-radius: var(--radius-full); background: #fff; border: 1px solid var(--border-1); display: flex; align-items: center; justify-content: center; color: var(--fg-2); font-size: 19px; position: relative; cursor: pointer; }
.m-bell .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--red-500); border: 2px solid #fff; }

.m-pass { background: var(--navy-900); border-radius: 22px; padding: 20px; color: #fff; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.m-pass::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 80% -10%, rgba(58,99,235,.35), transparent 60%); pointer-events: none; }
.m-pass__row { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.m-pass__brand { display: flex; align-items: center; gap: 8px; font: var(--w-semibold) 13px var(--font-sans); letter-spacing: .02em; color: rgba(255,255,255,.7); }
.m-pass__brand img { height: 18px; }
.m-pass__status { font: var(--w-semibold) 11px var(--font-sans); color: var(--green-500); display: flex; align-items: center; gap: 5px; }
.m-pass__status .d { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 8px var(--green-500); }
.m-qr-wrap { background: #fff; border-radius: 16px; padding: 16px; margin: 18px auto 14px; width: fit-content; position: relative; z-index: 1; }
.m-pass__name { font: var(--w-bold) 19px var(--font-sans); letter-spacing: -.01em; text-align: center; position: relative; z-index: 1; }
.m-pass__meta { font: var(--w-medium) 12px var(--font-mono); color: rgba(255,255,255,.55); text-align: center; margin-top: 4px; position: relative; z-index: 1; }
.m-pass__gates { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 14px; position: relative; z-index: 1; }
.m-pass__gate { font: var(--w-semibold) 11px var(--font-mono); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.85); padding: 4px 9px; border-radius: 999px; }

.qr { display: grid; gap: 0; }
.qr i { display: block; }

.m-section-h { display: flex; align-items: center; margin: 24px 4px 12px; }
.m-section-h h3 { font: var(--w-bold) 16px var(--font-sans); letter-spacing: -.01em; margin: 0; }
.m-section-h a { margin-left: auto; font: var(--w-semibold) 13px var(--font-sans); color: var(--primary); text-decoration: none; cursor: pointer; }
.m-card { background: #fff; border-radius: 16px; border: 1px solid var(--border-1); box-shadow: var(--shadow-xs); }
.m-card--pad { padding: 16px; }

.m-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-quick button { background: #fff; border: 1px solid var(--border-1); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; cursor: pointer; box-shadow: var(--shadow-xs); transition: transform var(--dur-fast) var(--ease-out); text-align: left; }
.m-quick button:active { transform: scale(.97); }
.m-quick__ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.m-quick__t { font: var(--w-semibold) 14px var(--font-sans); color: var(--fg-1); }
.m-quick__s { font: var(--w-regular) 12px var(--font-sans); color: var(--fg-3); }

.m-entry { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--divider); }
.m-entry:last-child { border-bottom: 0; }
.m-entry__ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.m-entry__t { font: var(--w-semibold) 14px var(--font-sans); }
.m-entry__s { font: 11px var(--font-mono); color: var(--fg-3); margin-top: 2px; }
.m-entry__badge { margin-left: auto; }

.m-tabbar { position: absolute; bottom: 0; left: 0; right: 0; height: 84px; padding: 8px 10px 24px; display: flex; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border-1); z-index: 40; }
.m-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: transparent; cursor: pointer; color: var(--fg-4); font: var(--w-semibold) 10px var(--font-sans); padding-top: 6px; position: relative; }
.m-tab .m-icon { font-size: 23px; }
.m-tab.on { color: var(--primary); }
.m-tab .tdot { position: absolute; top: 2px; right: calc(50% - 16px); width: 7px; height: 7px; border-radius: 50%; background: var(--red-500); }

.m-btn { width: 100%; height: 52px; border: 0; border-radius: 14px; background: var(--primary); color: #fff; font: var(--w-bold) 16px var(--font-sans); letter-spacing: -.01em; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast); }
.m-btn:active { transform: scale(.98); background: var(--primary-press); }
.m-btn:disabled { background: var(--slate-300); cursor: not-allowed; }
.m-btn .m-icon { font-size: 20px; }
.m-btn--ghost { background: #fff; color: var(--fg-1); border: 1px solid var(--border-2); }
.m-btn--ghost:active { background: var(--slate-50); }
.m-btn--sm { height: 44px; font-size: 15px; border-radius: 12px; }
.m-btn--danger { background: var(--danger); }

.m-overlay { position: absolute; inset: 0; z-index: 70; background: rgba(7,15,28,.55); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; animation: fade var(--dur-base) var(--ease-out); }
.m-overlay--center { align-items: center; padding: 28px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.m-success { background: #fff; border-radius: 24px; padding: 30px 24px; width: 100%; text-align: center; box-shadow: var(--shadow-xl); animation: pop var(--dur-slow) var(--ease-out); }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.m-success__ring { width: 76px; height: 76px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 38px; margin: 0 auto 16px; }
.m-success__ring.warn { background: var(--warning-soft); color: var(--warning); }
.m-success__ring.danger { background: var(--danger-soft); color: var(--danger); }
.m-success h2 { font: var(--w-bold) 22px var(--font-sans); margin: 0 0 6px; letter-spacing: -.01em; }
.m-success p { font: var(--w-medium) 13px var(--font-mono); color: var(--fg-3); margin: 0 0 22px; }

/* bottom sheet */
.m-sheet { background: #fff; border-radius: 24px 24px 0 0; width: 100%; max-height: 86%; overflow-y: auto; box-shadow: var(--shadow-xl); animation: sheetUp var(--dur-slow) var(--ease-out); }
@keyframes sheetUp { from { transform: translateY(40px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.m-sheet__grab { width: 40px; height: 5px; border-radius: 3px; background: var(--slate-200); margin: 10px auto 4px; }
.m-sheet__pad { padding: 8px 20px 28px; }
.m-sheet__title { font: var(--w-bold) 19px var(--font-sans); letter-spacing: -.01em; margin: 6px 0 4px; }

.m-login { height: 100%; display: flex; flex-direction: column; padding: 0 28px 40px; background: #fff; }
.m-login__top { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.m-login__top img { height: 40px; }
.m-login__tag { font: var(--w-medium) 14px var(--font-sans); color: var(--fg-3); text-align: center; }
.m-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.m-field label { font: var(--w-semibold) 13px var(--font-sans); color: var(--fg-2); }
.m-field input, .m-field select { height: 50px; border: 1px solid var(--border-2); border-radius: 13px; padding: 0 14px; font: 16px var(--font-sans); color: var(--fg-1); outline: none; background: #fff; }
.m-field input:focus, .m-field select:focus { border-color: var(--primary); box-shadow: var(--ring-focus); }
.m-field__hint { font: 12px var(--font-sans); color: var(--fg-3); }
.m-field__err { font: var(--w-medium) 12px var(--font-sans); color: var(--danger); }

.m-alert { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--divider); }
.m-alert:last-child { border-bottom: 0; }
.m-alert__ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.m-alert__t { font: var(--w-semibold) 14px var(--font-sans); }
.m-alert__b { font: var(--w-regular) 13px var(--font-sans); color: var(--fg-2); margin-top: 2px; line-height: 1.45; }
.m-alert__time { font: 11px var(--font-mono); color: var(--fg-4); margin-top: 5px; }
.m-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 6px; }

/* iOS grouped list */
.ios-list { background: #fff; border-radius: 16px; border: 1px solid var(--border-1); overflow: hidden; }
.ios-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--divider); cursor: pointer; }
.ios-row:last-child { border-bottom: 0; }
.ios-row:active { background: var(--slate-50); }
.ios-row__ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; flex-shrink: 0; }
.ios-row__t { font: var(--w-medium) 15px var(--font-sans); flex: 1; }
.ios-row__v { font: var(--w-regular) 14px var(--font-sans); color: var(--fg-3); }
.ios-group-label { font: var(--w-semibold) 12px var(--font-sans); color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; margin: 22px 6px 8px; }

/* ============================================================
   ENTRY / EXIT full-screen camera flows
   ============================================================ */
.m-scan { position: absolute; inset: 0; background: #07101C; display: flex; flex-direction: column; z-index: 50; }
.m-scan__cam { position: absolute; inset: 0; background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px),
  radial-gradient(80% 50% at 50% 38%, rgba(58,99,235,.18), transparent 70%), #0B1420; }
.m-scan__top { position: relative; z-index: 2; padding: 58px 20px 0; display: flex; align-items: center; gap: 12px; color: #fff; }
.m-scan__top h2 { font: var(--w-bold) 17px var(--font-sans); margin: 0; }
.m-scan__close { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); border: 0; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; }
.m-scan__frame { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; }
.m-reticle { width: 232px; height: 232px; position: relative; }
.m-reticle__c { position: absolute; width: 34px; height: 34px; border: 3px solid var(--primary); }
.m-reticle__c.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.m-reticle__c.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.m-reticle__c.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.m-reticle__c.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.m-reticle__laser { position: absolute; left: 8px; right: 8px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 12px var(--accent); animation: scanline 2.2s var(--ease-in-out) infinite; }
@keyframes scanline { 0%,100% { top: 12px; } 50% { top: calc(100% - 12px); } }
.m-scan__hint { position: relative; z-index: 2; text-align: center; color: rgba(255,255,255,.7); font: var(--w-medium) 14px var(--font-sans); padding: 0 30px; }
.m-scan__foot { position: relative; z-index: 2; padding: 18px 20px 40px; }
.m-scan__manual { width: 100%; height: 50px; border-radius: 13px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; font: var(--w-semibold) 15px var(--font-sans); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* code input boxes */
.m-code { display: flex; gap: 9px; justify-content: center; margin: 20px 0; }
.m-code input { width: 46px; height: 58px; text-align: center; font: var(--w-bold) 24px var(--font-mono); border: 1.5px solid var(--border-2); border-radius: 12px; outline: none; color: var(--fg-1); }
.m-code input:focus { border-color: var(--primary); box-shadow: var(--ring-focus); }

/* fee breakdown */
.m-fee { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 0; }
.m-fee__k { font: var(--w-medium) 14px var(--font-sans); color: var(--fg-2); }
.m-fee__v { font: var(--w-semibold) 15px var(--font-mono); color: var(--fg-1); }
.m-fee--total { border-top: 1px dashed var(--border-2); margin-top: 4px; padding-top: 14px; }
.m-fee--total .m-fee__k { font-weight: var(--w-bold); color: var(--fg-1); font-size: 16px; }
.m-fee--total .m-fee__v { font-size: 24px; font-weight: var(--w-bold); color: var(--primary); }
.m-fee__disc .m-fee__v { color: var(--success); }

.m-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-pay button { height: 56px; border-radius: 13px; border: 1.5px solid var(--border-2); background: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: var(--w-bold) 14px var(--font-sans); transition: all var(--dur-fast); }
.m-pay button.on { border-color: var(--primary); box-shadow: var(--ring-focus); background: var(--blue-50); }
.m-pay__chip { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: var(--w-bold) 11px var(--font-sans); color: #fff; }

/* big timer */
.m-timer { text-align: center; padding: 6px 0 2px; }
.m-timer__v { font: var(--w-bold) 44px var(--font-mono); letter-spacing: -.02em; color: var(--fg-1); }
.m-timer__l { font: var(--w-medium) 13px var(--font-sans); color: var(--fg-3); margin-top: 2px; }

/* discount option rows */
.m-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border-1); border-radius: 13px; margin-bottom: 10px; cursor: pointer; transition: all var(--dur-fast); background: #fff; }
.m-opt.on { border-color: var(--primary); background: var(--blue-50); }
.m-opt__check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m-opt.on .m-opt__check { background: var(--primary); border-color: var(--primary); color: #fff; }
.m-opt__t { font: var(--w-semibold) 14px var(--font-sans); }
.m-opt__s { font: 12px var(--font-sans); color: var(--fg-3); margin-top: 1px; }
.m-opt__v { margin-left: auto; font: var(--w-bold) 14px var(--font-mono); color: var(--success); }

/* map */
.m-map { position: relative; height: 280px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-1); background: var(--slate-100); z-index: 1; }
.m-map__road { position: absolute; background: #fff; box-shadow: 0 0 0 1px var(--border-1); }
.m-pin { position: absolute; transform: translate(-50%,-100%); display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.m-pin__b { font: var(--w-bold) 11px var(--font-mono); color: #fff; padding: 3px 7px; border-radius: 8px; white-space: nowrap; box-shadow: var(--shadow-sm); }
.m-pin__tip { width: 8px; height: 8px; transform: rotate(45deg); margin-top: -4px; }
.m-result { display: flex; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--divider); cursor: pointer; }
.m-result:active { background: var(--slate-50); }
.m-result__badge { width: 52px; height: 52px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.m-result__badge b { font: var(--w-bold) 15px var(--font-mono); }
.m-result__badge span { font: var(--w-semibold) 9px var(--font-sans); }
.m-result__t { font: var(--w-bold) 15px var(--font-sans); }
.m-result__s { font: 12px var(--font-sans); color: var(--fg-3); margin-top: 2px; }
.m-result__r { margin-left: auto; text-align: right; }
.m-star { background: transparent; border: 0; cursor: pointer; padding: 4px; color: var(--amber-500); }
.m-star svg { fill: none; transition: fill var(--dur-fast) var(--ease-out); }
.m-star.on svg { fill: var(--amber-500); }

/* chat */
.m-chat { flex: 1; overflow-y: auto; padding: 56px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.m-bubble { max-width: 78%; padding: 11px 14px; border-radius: 16px; font: var(--w-regular) 14px var(--font-sans); line-height: 1.5; }
.m-bubble.bot { background: #fff; border: 1px solid var(--border-1); border-bottom-left-radius: 5px; align-self: flex-start; }
.m-bubble.me { background: var(--primary); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.m-chat__time { font: 10px var(--font-mono); color: var(--fg-4); margin: 0 6px; }
.m-suggest { display: flex; gap: 8px; flex-wrap: wrap; }
.m-suggest button { border: 1px solid var(--primary-border); background: var(--blue-50); color: var(--blue-700); border-radius: 999px; padding: 7px 12px; font: var(--w-semibold) 12px var(--font-sans); cursor: pointer; }
.m-composer { display: flex; gap: 8px; padding: 10px 14px 26px; border-top: 1px solid var(--border-1); background: #fff; }
.m-composer input { flex: 1; height: 44px; border: 1px solid var(--border-2); border-radius: 999px; padding: 0 16px; font: 15px var(--font-sans); outline: none; }
.m-composer input:focus { border-color: var(--primary); }
.m-composer button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* segmented control (mobile) */
.m-seg { display: flex; background: var(--slate-100); border-radius: 12px; padding: 3px; margin-bottom: 16px; }
.m-seg button { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 9px; font: var(--w-semibold) 13px var(--font-sans); color: var(--fg-2); cursor: pointer; }
.m-seg button.on { background: #fff; color: var(--fg-1); box-shadow: var(--shadow-xs); }

/* ============================================================
   DESKTOP CONSOLE (operator + admin) — from kit.css
   ============================================================ */
.console { display: flex; height: 100%; overflow: hidden; background: var(--bg-app); }
.sidebar { width: 248px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--border-1); display: flex; flex-direction: column; }
.sidebar__logo { padding: 16px 20px 12px; display: flex; align-items: center; gap: 10px; }
.sidebar__logo img { height: 28px; }
.sidebar__nav { flex: 1; overflow-y: auto; padding: 8px 12px; }
.nav-section { margin-top: 14px; }
.nav-section__label { font: var(--w-semibold) 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-4); padding: 0 8px 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-md); color: var(--fg-2); font: var(--w-medium) 14px var(--font-sans); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); letter-spacing: -.01em; user-select: none; }
.nav-item .icon { font-size: 18px; color: var(--fg-3); }
.nav-item:hover { background: var(--slate-100); color: var(--fg-1); }
.nav-item:hover .icon { color: var(--fg-2); }
.nav-item.active { background: var(--blue-50); color: var(--blue-700); font-weight: var(--w-semibold); }
.nav-item.active .icon { color: var(--primary); }
.nav-item__badge { margin-left: auto; font: var(--w-bold) 11px var(--font-mono); background: var(--red-500); color: #fff; border-radius: var(--radius-full); min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.sidebar__user { border-top: 1px solid var(--border-1); padding: 12px; display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--navy-700); color: #fff; display: flex; align-items: center; justify-content: center; font: var(--w-bold) 12px var(--font-sans); flex-shrink: 0; }
.sidebar__user .meta { line-height: 1.25; overflow: hidden; }
.sidebar__user .meta b { font: var(--w-semibold) 13px var(--font-sans); color: var(--fg-1); display: block; }
.sidebar__user .meta span { font: var(--w-regular) 12px var(--font-sans); color: var(--fg-3); }

.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.topbar { height: 60px; flex-shrink: 0; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-1); display: flex; align-items: center; gap: 16px; padding: 0 24px; position: sticky; top: 0; z-index: 5; }
.topbar__title { font: var(--w-bold) 19px var(--font-sans); letter-spacing: -.02em; color: var(--fg-1); white-space: nowrap; flex-shrink: 0; }
.topbar--dark { background: var(--mon-bg); border-bottom-color: var(--mon-border); }
.topbar--dark .topbar__title { color: var(--mon-fg); }
.topbar__sub { font: var(--w-medium) 12px var(--font-sans); color: var(--fg-3); }
.topbar__spacer { flex: 1; }
.content { flex: 1; overflow-y: auto; padding: 24px; }
.content--dark { background: var(--mon-bg); }

.search { display: flex; align-items: center; gap: 8px; height: 36px; width: 300px; min-width: 110px; padding: 0 12px; border: 1px solid var(--border-2); border-radius: var(--radius-md); background: #fff; color: var(--fg-3); }
.search .icon { font-size: 16px; }
.search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font: 14px var(--font-sans); color: var(--fg-1); }
.search input::placeholder { color: var(--fg-4); }
.search kbd { font: 11px var(--font-mono); color: var(--fg-4); border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 5px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: var(--w-semibold) 14px var(--font-sans); letter-spacing: -.01em; border-radius: var(--radius-md); padding: 0 14px; height: 36px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: all var(--dur-fast) var(--ease-out); }
.btn .icon { font-size: 16px; }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-hover); }
.btn--primary:active { background: var(--primary-press); }
.btn--secondary { background: #fff; color: var(--fg-1); border-color: var(--border-2); }
.btn--secondary:hover { background: var(--slate-50); border-color: var(--border-strong); }
.btn--ghost { background: transparent; color: var(--fg-2); }
.btn--ghost:hover { background: var(--slate-100); color: var(--fg-1); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: var(--red-500); }
.btn--icon { width: 36px; padding: 0; color: var(--fg-2); background: transparent; }
.btn--icon:hover { background: var(--slate-100); color: var(--fg-1); }
.btn--sm { height: 30px; font-size: 13px; padding: 0 10px; }
.btn--lg { height: 42px; font-size: 15px; padding: 0 18px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.card { background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.card--hover { transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.card--hover:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); }
.card__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--divider); }
.card__head h3 { font: var(--w-semibold) 15px var(--font-sans); letter-spacing: -.01em; margin: 0; }
.card__head .spacer { flex: 1; }
.card__body { padding: 16px; }

.stat { padding: 16px; }
.stat__top { display: flex; align-items: center; justify-content: space-between; }
.stat__label { font: var(--w-medium) 12px var(--font-sans); color: var(--fg-3); }
.stat__top .icon { font-size: 16px; color: var(--fg-4); }
.stat__value { font: var(--w-bold) 30px var(--font-mono); letter-spacing: -.02em; font-feature-settings: "tnum" 1; margin: 8px 0 4px; white-space: nowrap; }
.stat__delta { display: inline-flex; align-items: center; gap: 4px; font: var(--w-semibold) 12px var(--font-sans); }
.stat__delta .icon { font-size: 13px; }

.badge { display: inline-flex; align-items: center; gap: 5px; font: var(--w-semibold) 12px var(--font-sans); padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; }

.table { width: 100%; border-collapse: collapse; }
.table th { font: var(--w-semibold) 11px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--border-1); white-space: nowrap; }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--divider); font: var(--w-regular) 13px var(--font-sans); color: var(--fg-1); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.table tbody tr:hover td { background: var(--slate-50); }
.table--rowclick tbody tr { cursor: pointer; }
.mono { font-family: var(--font-mono); font-size: 12px; font-feature-settings: "tnum" 1; }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.grid-2e { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }

.filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.select { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--border-2); border-radius: var(--radius-md); background: #fff; font: var(--w-medium) 13px var(--font-sans); color: var(--fg-1); cursor: pointer; }
.select .icon { font-size: 15px; color: var(--fg-3); }
select.select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236B7888' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.chip { height: 30px; padding: 0 12px; border-radius: var(--radius-full); border: 1px solid var(--border-2); background: #fff; font: var(--w-medium) 13px var(--font-sans); color: var(--fg-2); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.chip:hover { border-color: var(--border-strong); }
.chip.on { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

/* sign designer template picker */
.tmpl { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--border-2); border-radius: var(--radius-md); background: #fff; cursor: pointer; font: var(--w-semibold) 13px var(--font-sans); color: var(--fg-2); transition: all var(--dur-fast) var(--ease-out); }
.tmpl:hover { border-color: var(--border-strong); }
.tmpl.on { border-color: var(--primary); background: var(--blue-50); color: var(--primary); }

.bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 8px; }
.bars .bar { flex: 1; background: var(--blue-200); border-radius: 3px 3px 0 0; position: relative; transition: background var(--dur-base); min-height: 2px; }
.bars .bar.peak { background: var(--primary); }
.bars .bar:hover { background: var(--primary-hover); }
.bars__axis { display: flex; gap: 6px; margin-top: 6px; }
.bars__axis span { flex: 1; text-align: center; font: 10px var(--font-mono); color: var(--fg-4); }

.live { display: inline-flex; align-items: center; gap: 6px; font: var(--w-semibold) 11px var(--font-sans); color: var(--green-600); }
.live .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 0 rgba(34,180,90,.5); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(34,180,90,.5);} 70%{box-shadow:0 0 0 6px rgba(34,180,90,0);} 100%{box-shadow:0 0 0 0 rgba(34,180,90,0);} }

.cam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cam { position: relative; aspect-ratio: 16/10; border-radius: var(--radius-md); background: var(--mon-panel); border: 1px solid var(--mon-border); overflow: hidden; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px); }
.cam__noise { position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 20%, rgba(90,131,244,.10), transparent 60%), radial-gradient(100% 100% at 80% 90%, rgba(14,157,168,.10), transparent 55%); }
.cam__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cam__label { position: absolute; top: 8px; left: 8px; font: var(--w-semibold) 11px var(--font-mono); color: var(--mon-fg); background: rgba(7,15,28,.6); padding: 2px 7px; border-radius: 4px; white-space: nowrap; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; }
.cam__time { position: absolute; bottom: 8px; right: 8px; font: 11px var(--font-mono); color: var(--mon-muted); background: rgba(7,15,28,.6); padding: 2px 6px; border-radius: 4px; }
.cam__status { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 8px var(--green-500); }
.cam__status.off { background: var(--slate-500); box-shadow: none; }
.cam__box { position: absolute; border: 1.5px solid var(--teal-500); border-radius: 3px; box-shadow: 0 0 0 1px rgba(7,15,28,.4); }
.cam__box::after { content: attr(data-tag); position: absolute; top: -18px; left: -1.5px; font: var(--w-semibold) 10px var(--font-mono); color: #04181b; background: var(--teal-500); padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.cam__off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--mon-muted); font: var(--w-medium) 12px var(--font-sans); }
.cam__off .icon { font-size: 22px; }
.mon-card { background: var(--mon-panel); border: 1px solid var(--mon-border); border-radius: var(--radius-lg); }
.mon-h { font: var(--w-semibold) 13px var(--font-sans); color: var(--mon-fg); }
.mon-muted { color: var(--mon-muted); }

.event { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.event:last-child { border-bottom: 0; }
.event__ic { width: 30px; height: 30px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.event__body { flex: 1; min-width: 0; }
.event__title { font: var(--w-semibold) 13px var(--font-sans); color: var(--fg-1); }
.event__meta { font: 11px var(--font-mono); color: var(--fg-3); margin-top: 2px; }

.facility { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid var(--divider); transition: background var(--dur-fast); }
.facility:last-child { border-bottom: 0; }
.facility:hover { background: var(--slate-50); }
.facility--click { cursor: pointer; }
.facility__ic { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--blue-50); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.facility__name { font: var(--w-semibold) 14px var(--font-sans); }
.facility__sub { font: 12px var(--font-sans); color: var(--fg-3); margin-top: 2px; }
.gauge { width: 130px; }
.gauge__track { height: 6px; border-radius: 3px; background: var(--slate-150); overflow: hidden; }
.gauge__fill { height: 100%; background: var(--success); border-radius: 3px; transition: width var(--dur-slow); }

/* empty state */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 20px; text-align: center; color: var(--fg-3); gap: 10px; }
.empty__ic { width: 56px; height: 56px; border-radius: var(--radius-xl); background: var(--slate-100); color: var(--fg-4); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.empty h3 { font: var(--w-semibold) 16px var(--font-sans); color: var(--fg-2); margin: 4px 0 0; }
.empty p { font: var(--w-regular) 13px var(--font-sans); margin: 0; }

/* ============================================================
   MODAL / DIALOG / TOAST (console)
   ============================================================ */
.scrim { position: fixed; inset: 0; background: rgba(7,15,28,.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 24px; animation: fade var(--dur-base) var(--ease-out); }
.modal { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; animation: modalUp var(--dur-base) var(--ease-out); }
.modal--lg { max-width: 720px; }
.modal--wide { max-width: 920px; }
@keyframes modalUp { from { transform: translateY(10px) scale(.99); opacity: .5; } to { transform: none; opacity: 1; } }
.modal__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--divider); }
.modal__head h2 { font: var(--w-bold) 18px var(--font-sans); letter-spacing: -.01em; margin: 0; flex: 1; }
.modal__sub { font: var(--w-regular) 13px var(--font-sans); color: var(--fg-3); margin-top: 2px; }
.modal__x { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--fg-3); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.modal__x:hover { background: var(--slate-100); color: var(--fg-1); }
.modal__body { padding: 20px; overflow-y: auto; }
.modal__foot { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--divider); }
.modal__foot .spacer { flex: 1; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font: var(--w-semibold) 13px var(--font-sans); color: var(--fg-2); }
.field label .req { color: var(--danger); margin-left: 2px; }
.field input, .field select, .field textarea { height: 40px; border: 1px solid var(--border-2); border-radius: var(--radius-md); padding: 0 12px; font: 14px var(--font-sans); color: var(--fg-1); outline: none; background: #fff; width: 100%; }
.field textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: var(--ring-focus); }
.field input.err, .field select.err { border-color: var(--danger); box-shadow: var(--ring-danger); }
.field__hint { font: 12px var(--font-sans); color: var(--fg-3); }
.field__err { font: var(--w-medium) 12px var(--font-sans); color: var(--danger); display: flex; align-items: center; gap: 4px; }
.field__row { display: flex; gap: 12px; }
.field__row > .field { flex: 1; }
select.field-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236B7888' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

/* toggle */
.toggle { width: 42px; height: 24px; border-radius: 999px; background: var(--slate-300); position: relative; cursor: pointer; transition: background var(--dur-fast); border: 0; flex-shrink: 0; }
.toggle.on { background: var(--primary); }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast); }
.toggle.on::after { transform: translateX(18px); }

/* toast */
.toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 300; align-items: center; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--navy-900); color: #fff; padding: 12px 16px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font: var(--w-semibold) 13px var(--font-sans); animation: toastIn var(--dur-base) var(--ease-out); max-width: 440px; }
@keyframes toastIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast__ic { display: flex; font-size: 17px; }
.toast--success .toast__ic { color: var(--green-500); }
.toast--danger .toast__ic { color: var(--red-500); }
.toast--info .toast__ic { color: var(--blue-400); }

/* wizard */
.wizard__steps { display: flex; align-items: center; gap: 0; margin-bottom: 8px; }
.wstep { display: flex; align-items: center; gap: 10px; flex: 1; }
.wstep__n { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border-2); display: flex; align-items: center; justify-content: center; font: var(--w-bold) 13px var(--font-mono); color: var(--fg-3); background: #fff; flex-shrink: 0; transition: all var(--dur-fast); }
.wstep.on .wstep__n { border-color: var(--primary); background: var(--primary); color: #fff; }
.wstep.done .wstep__n { border-color: var(--success); background: var(--success); color: #fff; }
.wstep__l { font: var(--w-semibold) 13px var(--font-sans); color: var(--fg-3); white-space: nowrap; }
.wstep.on .wstep__l, .wstep.done .wstep__l { color: var(--fg-1); }
.wstep__line { flex: 1; height: 2px; background: var(--border-2); margin: 0 4px; }
.wstep__line.done { background: var(--success); }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-1); margin-bottom: 18px; }
.tab { padding: 10px 14px; font: var(--w-semibold) 14px var(--font-sans); color: var(--fg-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-fast); }
.tab:hover { color: var(--fg-1); }
.tab.on { color: var(--primary); border-bottom-color: var(--primary); }

/* donut */
.donut { --p: 65; --c: var(--primary); width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p)*1%), var(--slate-150) 0); display: flex; align-items: center; justify-content: center; }
.donut__hole { width: 88px; height: 88px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut__v { font: var(--w-bold) 22px var(--font-mono); }
.donut__l { font: var(--w-medium) 11px var(--font-sans); color: var(--fg-3); }

/* national map (admin) */
.kmap { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--navy-700); background: var(--navy-900); overflow: hidden; height: 400px; z-index: 1; }
.leaflet-bubble-tooltip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85) !important;
  pointer-events: none !important;
}
.leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.96) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-lg) !important;
}
.leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.96) !important;
}
.m-pin-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* product card */
.prod { border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; background: #fff; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.prod:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); }
.prod__img { height: 120px; display: flex; align-items: center; justify-content: center; background: var(--slate-50); color: var(--slate-400); font-size: 40px; border-bottom: 1px solid var(--divider); }
.prod__body { padding: 14px; }
.prod__name { font: var(--w-semibold) 14px var(--font-sans); margin-bottom: 4px; }
.prod__desc { font: 12px var(--font-sans); color: var(--fg-3); line-height: 1.45; min-height: 34px; }
.prod__foot { display: flex; align-items: center; margin-top: 12px; gap: 10px; }
.prod__price { font: var(--w-bold) 16px var(--font-mono); color: var(--fg-1); }

/* qr preview small (console) */
.qrbox { background: #fff; border: 1px solid var(--border-1); border-radius: 12px; padding: 12px; display: inline-flex; }

/* misc utilities */
.muted { color: var(--fg-3); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.tag-amount { font: var(--w-bold) 13px var(--font-mono); }
.divider-h { height: 1px; background: var(--divider); margin: 4px 0; }
.linkish { color: var(--primary); font-weight: var(--w-semibold); cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.kpi-foot { font: var(--w-medium) 12px var(--font-sans); color: var(--fg-3); }
.seg-inline { display: flex; gap: 2px; background: var(--slate-100); border-radius: 8px; padding: 3px; }
.seg-inline button { border: 0; cursor: pointer; border-radius: 6px; padding: 6px 12px; font: var(--w-semibold) 13px var(--font-sans); background: transparent; color: var(--fg-2); }
.seg-inline button.on { background: #fff; color: var(--fg-1); box-shadow: var(--shadow-xs); }

/* pagination */
.pg-num { min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--radius-md); border: 1px solid var(--border-2); background: #fff; font: var(--w-semibold) 13px var(--font-mono); color: var(--fg-2); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.pg-num:hover { border-color: var(--border-strong); }
.pg-num.on { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

/* PG settlement stacked bar */
.pg-bar { display: flex; width: 100%; height: 12px; border-radius: var(--radius-full); overflow: hidden; background: var(--slate-150); }
.pg-bar > div { height: 100%; transition: width var(--dur-base) var(--ease-out); }

/* ===== Console login / 2FA (AUTH-SCR-001) ===== */
.clogin { display: grid; grid-template-columns: 1.1fr 1fr; width: 100%; height: 100%; background: var(--bg-app); }
.clogin__brand { background: var(--navy-900); color: #fff; padding: 56px 52px; display: flex; flex-direction: column; }
.clogin__logo { height: 30px; align-self: flex-start; }
.clogin__tag { font: var(--w-bold) 28px var(--font-sans); letter-spacing: -.02em; line-height: 1.3; margin-top: 64px; color: #fff; max-width: 12em; }
.clogin__feats { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
.clogin__feats > div { display: flex; align-items: center; gap: 12px; font: var(--w-medium) 15px var(--font-sans); color: rgba(255,255,255,.82); }
.clogin__foot { margin-top: auto; font: var(--w-medium) 12px var(--font-mono); color: rgba(255,255,255,.42); }
.clogin__panel { display: flex; align-items: center; justify-content: center; padding: 40px; }
.clogin__card { width: 100%; max-width: 380px; }
.clogin__role { display: inline-block; font: var(--w-semibold) 11px var(--font-sans); letter-spacing: .06em; color: var(--primary); background: var(--blue-50); border: 1px solid var(--primary-border); border-radius: var(--radius-full); padding: 3px 11px; }
.clogin__h { font: var(--w-extrabold) 28px var(--font-sans); letter-spacing: -.02em; margin-top: 14px; color: var(--fg-1); }
.clogin__sub { font: var(--w-medium) 14px var(--font-sans); color: var(--fg-3); margin-top: 4px; }
.clogin__err { display: flex; align-items: center; gap: 7px; font: var(--w-medium) 13px var(--font-sans); color: var(--danger); background: var(--danger-soft); border: 1px solid var(--red-tint); border-radius: var(--radius-md); padding: 9px 12px; margin: 4px 0 10px; }
.clogin__lock { display: flex; align-items: center; gap: 7px; font: var(--w-semibold) 13px var(--font-sans); color: var(--amber-600); background: var(--warning-soft); border-radius: var(--radius-md); padding: 9px 12px; margin-bottom: 10px; }
.clogin__btn { width: 100%; height: 46px; margin-top: 8px; border: 0; border-radius: var(--radius-md); background: var(--primary); color: #fff; font: var(--w-semibold) 15px var(--font-sans); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background var(--dur-fast) var(--ease-out); }
.clogin__btn:hover:not(:disabled) { background: var(--primary-hover); }
.clogin__btn:disabled { opacity: .5; cursor: not-allowed; }
.clogin__links { display: flex; justify-content: center; gap: 18px; margin-top: 16px; font: var(--w-medium) 13px var(--font-sans); }
.clogin__demo { width: 100%; margin-top: 18px; background: transparent; border: 0; color: var(--fg-4); font: var(--w-medium) 12px var(--font-sans); cursor: pointer; }
.clogin__demo:hover:not(:disabled) { color: var(--fg-3); }
.clogin__otpwrap { display: flex; align-items: center; gap: 11px; background: var(--blue-50); border: 1px solid var(--primary-border); border-radius: var(--radius-lg); padding: 12px 14px; }
.clogin__otp { width: 100%; height: 56px; text-align: center; font: var(--w-bold) 24px var(--font-mono); border: 1px solid var(--border-2); border-radius: var(--radius-md); color: var(--fg-1); }
.clogin__otp:focus { outline: 0; border-color: var(--primary); box-shadow: var(--ring-focus); }
.captcha { font: var(--w-bold) 20px var(--font-mono); letter-spacing: 4px; color: var(--navy-900); background: repeating-linear-gradient(45deg, var(--slate-100), var(--slate-100) 4px, var(--slate-150) 4px, var(--slate-150) 8px); border: 1px solid var(--border-2); border-radius: var(--radius-md); padding: 9px 14px; user-select: none; text-decoration: line-through; text-decoration-color: var(--slate-300); }

/* ===== Social Login Buttons (Kakao, Naver, Google) ===== */
.social-btn {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: var(--w-semibold) 14px var(--font-sans);
  cursor: pointer;
  border: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.social-btn:active {
  opacity: 0.85;
}
.social-btn--kakao {
  background: #FEE500;
  color: #191919;
}
.social-btn--naver {
  background: #03C75A;
  color: #fff;
}
.social-btn--google {
  background: #fff;
  color: var(--fg-1);
  border: 1px solid var(--border-2);
}
.social-btn svg {
  flex-shrink: 0;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}