@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: dark;
  --bg: #08131f;
  --panel: #101f2e;
  --panel-soft: #132638;
  --line: rgba(159, 190, 219, .13);
  --text: #eff7ff;
  --muted: #8ea8be;
  --cyan: #3ce1ff;
  --gold: #f0c14b;
  --green: #3ee0a0;
  --red: #fb7185;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.ico { width: 19px; height: 19px; flex: 0 0 auto; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; width: 248px; padding: 24px 16px 18px; border-right: 1px solid var(--line); background: #0b1825; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 10px 24px; }
.brand img { width: 42px; height: 42px; object-fit: contain; border-radius: 12px; }
.brand span, .user-menu span { display: grid; gap: 4px; min-width: 0; }
.brand b { overflow: hidden; font-family: Manrope, sans-serif; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.brand small, .user-menu small { color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.nav-caption { padding: 12px 12px 9px; color: #647d92; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.main-nav { display: grid; gap: 5px; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; color: #a9bdcf; font-size: 13px; transition: .18s ease; }
.nav-link:hover { background: rgba(255,255,255,.045); color: var(--text); }
.nav-link.active { border-color: rgba(60,225,255,.12); background: linear-gradient(90deg, rgba(60,225,255,.14), rgba(60,225,255,.035)); color: var(--cyan); }
.nav-caption-bottom { margin-top: 20px; }
.sidebar-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(62,224,160,.55); }

.main-area { width: calc(100% - 248px); min-height: 100vh; margin-left: 248px; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 91px; padding: 16px clamp(20px, 3vw, 42px); border-bottom: 1px solid var(--line); background: rgba(8,19,31,.91); backdrop-filter: blur(16px); }
.topbar-heading { display: flex; align-items: center; gap: 12px; }
.back-button { flex: 0 0 auto; }
.back-button .ico { width: 14px; height: 14px; }
.topbar h1 { margin: 0; font-family: Manrope, sans-serif; font-size: 22px; letter-spacing: -.03em; }
.topbar p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.topbar-tools { display: flex; align-items: center; gap: 20px; }
.today-label { color: #b6cadd; font-size: 12px; white-space: nowrap; }
.global-search { display: flex; align-items: center; gap: 9px; width: min(250px, 25vw); height: 39px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: #0d1b29; }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.user-menu { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.user-menu b { max-width: 120px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-menu small { letter-spacing: 0; font-size: 10px; }
.user-menu > .ico { width: 16px; height: 16px; color: var(--muted); }
.page-content { display: grid; gap: 20px; max-width: 1700px; margin: 0 auto; padding: 28px clamp(20px, 3vw, 42px) 32px; }
.app-footer { display: flex; justify-content: space-between; gap: 15px; padding: 0 clamp(20px, 3vw, 42px) 20px; color: #60798f; font-size: 10px; }
.mobile-menu { display: none !important; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 128px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(140deg, rgba(19,38,56,.98), rgba(14,29,44,.95)); }
.stat-label, .stat-sub { display: block; color: var(--muted); font-size: 12px; }
.stat-value { display: block; margin: 12px 0 7px; font-family: Manrope, sans-serif; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.04em; }
.stat-ico { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; }
.stat-ico.cyan { color: var(--cyan); background: rgba(60,225,255,.1); }
.stat-ico.gold { color: var(--gold); background: rgba(240,193,75,.12); }
.stat-ico.green { color: var(--green); background: rgba(62,224,160,.1); }
.stat-ico.violet { color: #a89aff; background: rgba(139,124,255,.12); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.card { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(17,33,49,.98), rgba(13,27,42,.98)); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.card-h h3, .kiosk-card h3 { margin: 0; font-family: Manrope, sans-serif; font-size: 15px; }
.card-h > span, .card-h > a, .card-h > b { color: var(--muted); font-size: 12px; }
.card-h > a { color: var(--cyan); }
.stack { display: grid; gap: 14px; }
.stack-lg { display: grid; align-content: start; gap: 16px; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 9px 0; border-bottom: 1px solid rgba(159,190,219,.09); font-size: 12px; }
.list-row:last-child { border-bottom: 0; }
.list-row > span:first-child, .list-row > div > small { color: var(--muted); }
.list-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person > div { display: grid; gap: 4px; min-width: 0; }
.person b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.person small { color: var(--muted); font-size: 10px; }
.avatar { display: inline-grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: white; font-size: 11px; font-weight: 700; }
.watch { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prog { margin: -5px 0 5px; }
.prog-top { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.bar { height: 5px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.08); }
.bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.bar.expiring span, .bar.warn span { background: var(--gold); }
.bar.expired span, .bar.bad span { background: var(--red); }
.bar.frozen span, .bar.ice span { background: #72caff; }
.pill { display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; border-radius: 99px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.pill.ok { color: var(--green); background: rgba(62,224,160,.11); }
.pill.warn { color: var(--gold); background: rgba(240,193,75,.11); }
.pill.bad { color: var(--red); background: rgba(251,113,133,.11); }
.pill.ice { color: #83d6ff; background: rgba(84,181,255,.12); }
.alert { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 18px; border: 1px solid rgba(240,193,75,.24); border-radius: 12px; background: rgba(240,193,75,.07); }
.alert div { display: grid; gap: 4px; }
.alert b { color: var(--gold); font-size: 13px; }
.alert span { color: var(--muted); font-size: 11px; }
.flow { display: flex; align-items: center; justify-content: space-around; gap: 6px; margin-top: 18px; padding: 15px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.flow div { display: grid; gap: 3px; text-align: center; }
.flow div > span { color: var(--cyan); font-size: 10px; }
.flow b { font-size: 10px; }
.flow small { color: var(--muted); font-size: 9px; }
.flow > i { color: #5b778e; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; background: var(--cyan); color: #06202b; font-size: 12px; font-weight: 700; cursor: pointer; transition: .16s ease; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.gold { background: var(--gold); color: #241a05; }
.btn.ghost { border-color: var(--line); background: rgba(255,255,255,.035); color: #d7e8f7; }
.btn.danger { background: rgba(251,113,133,.13); color: #ff9aab; }
.btn.sm { min-height: 31px; padding: 0 10px; font-size: 10px; }
#telegram-bot-link[hidden] { display: none; }
.icon-btn { display: inline-grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); color: #b7cbdc; cursor: pointer; }
.icon-btn:hover { border-color: rgba(60,225,255,.38); color: var(--cyan); }
.icon-btn.danger { color: #ff8a9e; }
.muted { color: var(--muted); font-size: 12px; line-height: 1.65; }
.empty { padding: 18px; color: var(--muted); text-align: center; font-size: 12px; }

.table-card { padding-bottom: 0; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 11px 12px; color: #7893a9; font-size: 10px; font-weight: 600; white-space: nowrap; }
td { padding: 12px; border-top: 1px solid rgba(159,190,219,.09); color: #d8e6f3; font-size: 11px; vertical-align: middle; }
td small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.mono { font-family: Consolas, "Courier New", monospace; letter-spacing: .03em; }
.tag { display: inline-block; padding: 5px 8px; border-radius: 6px; font-size: 10px; }
.tag-in { color: var(--green); background: rgba(62,224,160,.1); }
.tag-out { color: var(--cyan); background: rgba(60,225,255,.1); }
.tag-no { color: var(--red); background: rgba(251,113,133,.1); }
.row-actions { display: flex; align-items: center; gap: 6px; }
.segs { display: flex; flex-wrap: wrap; gap: 5px; }
.seg { padding: 6px 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.seg em { margin-left: 3px; font-style: normal; opacity: .7; }
.seg.on { border-color: rgba(60,225,255,.16); background: rgba(60,225,255,.09); color: var(--cyan); }

.member-layout { display: grid; grid-template-columns: minmax(340px, .92fr) minmax(300px, 1.08fr); align-items: start; gap: 18px; }
.member-layout > form { display: grid; gap: 14px; }
.member-layout .card-h { margin-bottom: 0; }
.field { display: grid; gap: 7px; color: #b7cadd; font-size: 11px; }
.field input, .field select, .kiosk-card input, .kiosk-card select, #kiosk-form input, #kiosk-form select { width: 100%; min-width: 0; height: 40px; padding: 0 11px; border: 1px solid rgba(159,190,219,.17); border-radius: 8px; outline: none; background: #0b1926; color: var(--text); font-size: 12px; }
.field input:focus, .field select:focus, .kiosk-card input:focus, #kiosk-form input:focus { border-color: rgba(60,225,255,.58); box-shadow: 0 0 0 3px rgba(60,225,255,.08); }
.split-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.uid-row { display: flex; gap: 8px; }
.uid-row input { flex: 1; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plan-pick { position: relative; display: grid; gap: 5px; min-height: 89px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.018); cursor: pointer; }
.plan-pick:has(input:checked) { border-color: rgba(60,225,255,.55); background: rgba(60,225,255,.07); }
.plan-pick input { position: absolute; top: 9px; right: 9px; accent-color: var(--cyan); }
.plan-pick b, .plan-pick strong { padding-right: 18px; color: var(--text); font-size: 11px; }
.plan-pick strong { color: var(--gold); }
.plan-pick small { color: var(--muted); font-size: 9px; }
.methods { display: flex; flex-wrap: wrap; gap: 7px; }
.method { cursor: pointer; }
.method input { position: absolute; opacity: 0; pointer-events: none; }
.method span { display: inline-flex; min-height: 33px; align-items: center; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: #b4c6d6; font-size: 10px; }
.method input:checked + span { border-color: rgba(240,193,75,.5); background: rgba(240,193,75,.08); color: var(--gold); }
.check { display: flex; align-items: center; gap: 8px; color: #c1d0dd; font-size: 11px; }
.check input { accent-color: var(--cyan); }
.note-box { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.note-box > span { color: var(--muted); font-size: 10px; }
.note-box > b { font-size: 12px; }
.access-mode-setting, .access-open-notice { display: grid; gap: 7px; padding: 13px; border: 1px solid rgba(240,193,75,.3); border-radius: 10px; background: rgba(240,193,75,.07); }
.access-mode-setting > span, .access-open-notice > span, .access-open-notice > small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.access-mode-setting .check, .access-open-notice > b { color: var(--gold); font-weight: 700; }
.turn-layout + .access-open-notice { margin-top: 12px; }
.access-open-notice { margin-bottom: 14px; }
.kiosk-box .access-open-notice { width: 100%; }
.pcard { position: relative; display: grid; gap: 20px; max-width: 520px; min-height: 245px; overflow: hidden; padding: 23px; border: 1px solid rgba(60,225,255,.25); border-radius: 19px; background: radial-gradient(ellipse at 82% 10%, rgba(60,225,255,.22), transparent 36%), linear-gradient(135deg, #12334a, #101c34 58%, #16203a); box-shadow: 0 20px 60px rgba(0,0,0,.24); }
.pcard::after { position: absolute; right: -58px; bottom: -96px; width: 220px; height: 220px; border: 1px solid rgba(120,226,255,.15); border-radius: 50%; content: ""; box-shadow: 0 0 0 20px rgba(120,226,255,.035), 0 0 0 40px rgba(120,226,255,.025); }
.pcard.vip { border-color: rgba(240,193,75,.42); background: radial-gradient(ellipse at 82% 10%, rgba(240,193,75,.2), transparent 36%), linear-gradient(135deg, #463718, #1d2534 62%, #2d2634); }
.pcard-top, .pcard-mid, .pcard-bot { position: relative; z-index: 1; display: flex; align-items: center; }
.pcard-top { gap: 10px; }
.pcard-top img { width: 35px; height: 35px; object-fit: contain; }
.pcard-top div { display: grid; gap: 3px; }
.pcard-top small { color: var(--cyan); font-size: 8px; letter-spacing: .13em; }
.pcard-top b { font-size: 11px; letter-spacing: .06em; }
.chip { width: 24px; height: 18px; margin-left: auto; border: 1px solid rgba(240,193,75,.65); border-radius: 5px; background: linear-gradient(135deg, rgba(240,193,75,.4), rgba(240,193,75,.08)); }
.pcard-mid { gap: 12px; }
.pcard-mid > div { display: grid; gap: 5px; min-width: 0; }
.pcard-mid strong { overflow: hidden; font-family: Manrope, sans-serif; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.pcard-mid em { color: var(--muted); font-size: 10px; font-style: normal; }
.pcard-mid .pill { margin-left: auto; }
.pcard-bot { justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); color: #c6d9e7; font-size: 9px; }
.nfc-waves { position: absolute; right: 26px; bottom: 65px; display: flex; align-items: center; gap: 2px; transform: rotate(90deg); }
.nfc-waves span { width: 6px; height: 8px; border: 1px solid rgba(60,225,255,.7); border-radius: 50%; }
.card-note { margin: 11px 0; }
.member-layout .btn.ghost { min-height: 36px; }

.turn-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.5fr); align-items: start; gap: 18px; }
.kiosk-card { display: grid; justify-items: stretch; gap: 13px; text-align: center; }
.logo-badge { width: 72px; height: 72px; margin: 2px auto 0; object-fit: contain; }
.kiosk-card .muted { margin: -7px 0 2px; }
.big-input { height: 48px !important; text-align: center; font-size: 16px !important; }
.scan-wait, .scan-banner { display: grid; justify-items: center; gap: 8px; margin: 4px 0; padding: 18px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.scan-wait b, .scan-banner strong { font-size: 15px; letter-spacing: .08em; }
.scan-wait small, .scan-banner span, .scan-banner em { color: var(--muted); font-size: 10px; font-style: normal; }
.scan-banner > b { font-size: 16px; }
.scan-banner.ok { border-color: rgba(62,224,160,.25); background: rgba(62,224,160,.07); }
.scan-banner.ok strong { color: var(--green); }
.scan-banner.bad { border-color: rgba(251,113,133,.25); background: rgba(251,113,133,.07); }
.scan-banner.bad strong { color: var(--red); }
.scan-banner.warn { border-color: rgba(240,193,75,.25); background: rgba(240,193,75,.07); }
.scan-banner.warn strong { color: var(--gold); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 6px rgba(60,225,255,.11); }
.demo-cards { color: var(--muted); font-size: 10px; text-align: left; }
.demo-cards summary { cursor: pointer; }
.sample-row { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 9px; }
.btn-row { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.btn-row:hover { background: rgba(255,255,255,.035); }

.kiosk-screen { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 20%, #123149, #08131f 65%); }
.kiosk-box { display: grid; justify-items: center; gap: 14px; width: min(540px, 100%); text-align: center; }
.kiosk-box > img { width: 88px; height: 88px; object-fit: contain; }
.brand-kicker { margin: 0; color: var(--cyan); font-size: 10px; letter-spacing: .24em; }
.kiosk-box h1 { margin: -7px 0 0; font-family: Manrope, sans-serif; font-size: clamp(28px, 6vw, 45px); }
.clock-line { margin: 0; color: var(--muted); font-size: 13px; }
#kiosk-form { display: grid; grid-template-columns: 1fr auto; gap: 9px; width: 100%; margin-top: 8px; }
#kiosk-form select { grid-column: 1 / -1; }
#kiosk-form input { height: 50px; font-size: 15px; text-align: center; }
#kiosk-form .btn { min-width: 126px; height: 50px; }
.kiosk-box .scan-banner, .kiosk-box .scan-wait { width: 100%; }
.kiosk-box .demo-cards { width: 100%; }
.back-link { margin-top: 15px; color: #8ca6ba; font-size: 11px; }

.member-display-screen { display: grid; min-height: 100vh; align-content: center; justify-items: center; gap: 18px; padding: 32px; text-align: center; background: radial-gradient(ellipse at 50% 25%, #123149, #08131f 68%); }
.member-display-screen > img { width: 92px; height: 92px; object-fit: contain; }
.member-display-result, .member-display-wait { display: grid; justify-items: center; gap: 12px; width: min(900px, 100%); padding: clamp(24px, 6vw, 64px); border: 1px solid var(--line); border-radius: 22px; background: rgba(16,31,46,.78); }
.member-display-result h2, .member-display-wait h2 { margin: 0; font-family: Manrope, sans-serif; font-size: clamp(32px, 7vw, 76px); line-height: 1.08; }
.member-display-result p, .member-display-wait p { margin: 0; color: var(--muted); font-size: clamp(15px, 2vw, 22px); }
.member-display-icon { display: grid; width: 76px; height: 76px; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: 42px; font-weight: 700; }
.member-display-result.entry, .member-display-result.exit { color: var(--green); }
.member-display-result.denied { color: var(--red); }
.member-display-wait { color: var(--cyan); }
.member-display-wait .pulse { width: 14px; height: 14px; }

.member-account { width: min(1120px, 100%); margin: 0 auto; }
.member-account-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.account-profile-title { display: flex; align-items: center; gap: 14px; }
.account-profile-title h1, .account-profile-title p { margin-top: 5px; }
.avatar-photo { flex: 0 0 auto; overflow: hidden; background: #102235; }
.avatar-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.member-photo-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.member-photo-field .field { margin: 0; }
.member-photo-preview { display: grid; justify-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.member-photo-preview .avatar { border-radius: 50%; }
.member-account-header h1 { margin: 5px 0; font-family: Manrope, sans-serif; font-size: clamp(26px, 5vw, 38px); }
.member-account-header > div > p:last-child { margin: 0; color: var(--muted); }
.member-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.member-account-grid > .card { min-width: 0; }
.member-account-grid > .card:first-child { grid-row: span 2; }
.member-account-card h2, .member-account-qr h2 { margin: 0; font-size: 15px; }
.account-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.account-details > div { display: grid; gap: 5px; min-width: 0; }
.account-details > div.wide { grid-column: 1 / -1; }
.account-details small { color: var(--muted); font-size: 10px; }
.account-details b { overflow-wrap: anywhere; font-size: 12px; }
.account-qr-wrap { display: grid; justify-items: center; gap: 10px; padding: 18px; border-radius: 12px; background: rgba(255,255,255,.025); }
.account-qr-wrap .qr { width: 190px; height: 190px; }
.account-qr-wrap p { max-width: 260px; margin: 0; color: var(--muted); font-size: 11px; text-align: center; }
.member-account-qr > .muted { margin-bottom: 0; font-size: 10px; }
.member-account .access-open-notice { margin-bottom: 16px; }
.shared-qr { display: grid; justify-items: center; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.shared-qr .qr { width: 210px; height: 210px; max-width: 100%; }
.shared-qr p { max-width: 420px; margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.visit-actions { display: flex; gap: 10px; }
.visit-actions .btn { flex: 1; }
.visit-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.member-account-qr #member-qr-video { display: none; width: 100%; max-height: 260px; aspect-ratio: 4 / 3; border-radius: 10px; background: #050a10; object-fit: cover; }
.member-account-qr #member-qr-video.active { display: block; }
.member-form-page { display: grid; gap: 18px; max-width: 1040px; margin: 0 auto; }
.member-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.member-form-heading h2 { margin: 4px 0; font-family: Manrope, sans-serif; font-size: 24px; }
.member-form-heading p { margin: 0; }
.member-list-tools { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }
.member-form-page .member-layout { grid-template-columns: minmax(340px, 1fr) minmax(280px, .75fr); }
.registration-card [hidden] { display: none !important; }

.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 190px; }
.donut { width: min(180px, 45%); overflow: visible; }
.legend { display: grid; gap: 11px; min-width: 115px; margin: 0; padding: 0; list-style: none; }
.legend li { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.legend i { width: 8px; height: 8px; border-radius: 3px; }
.legend b { color: var(--text); }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.heat { display: grid; align-items: center; gap: 5px; overflow-x: auto; color: var(--muted); font-size: 9px; text-align: center; }
.heat b { width: 100%; min-width: 13px; height: 19px; border-radius: 4px; background: rgba(60,225,255,var(--a)); }
.sum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sum-grid > div { display: grid; gap: 6px; padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.sum-grid b { font-family: Manrope, sans-serif; font-size: 21px; }
.sum-grid span { color: var(--muted); font-size: 10px; }
.rank { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: rgba(240,193,75,.1); color: var(--gold); font-weight: 700; }
.xulosa p { color: #bbcede; font-size: 12px; line-height: 1.8; }

.staff-card { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.staff-meta { display: grid; flex: 1; gap: 4px; min-width: 0; }
.staff-meta b { font-size: 12px; }
.staff-meta small { color: var(--muted); font-size: 10px; }
.staff-card .row-actions { flex-wrap: wrap; justify-content: flex-end; }
.staff-card.on { border-color: rgba(62,224,160,.16); }

.mobile-layout { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); align-items: start; gap: 20px; }
.mobile-layout > div { display: grid; gap: 12px; }
.device { width: min(360px, 100%); margin: 0 auto; padding: 17px; border: 1px solid rgba(159,190,219,.22); border-radius: 28px; background: linear-gradient(155deg, #0d1d2b, #101b2c); box-shadow: 0 25px 70px rgba(0,0,0,.28); }
.device-top { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.device-top img { width: 35px; height: 35px; object-fit: contain; }
.device-top div { display: grid; gap: 3px; }
.device-top small { color: var(--cyan); font-size: 8px; letter-spacing: .14em; }
.device-top b { font-size: 11px; }
.device .pcard { min-height: 200px; gap: 14px; padding: 15px; border-radius: 14px; }
.device .pcard-mid strong { font-size: 12px; }
.device .pcard-mid .avatar { width: 36px !important; height: 36px !important; }
.device .pcard-bot { flex-wrap: wrap; }
.device > .prog { margin: 14px 2px; }
.device-qr { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.device-qr > div:last-child { display: grid; gap: 4px; }
.device-qr b { font-size: 12px; }
.device-qr small { color: var(--muted); font-size: 10px; }
.qr { display: block; width: 104px; height: 104px; flex: 0 0 auto; padding: 0; border-radius: 5px; background: white; }
.qr-error { color: var(--red); font-size: 10px; }
.qr-scanner { display: grid; gap: 12px; }
.qr-scanner #qr-scan-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }
.qr-scanner #qr-video { display: none; width: 100%; max-height: 260px; aspect-ratio: 4 / 3; border-radius: 10px; background: #050a10; object-fit: cover; }
.qr-scanner #qr-video.active { display: block; }
.qr-account { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.qr-account.approved { border-color: rgba(62,224,160,.25); }
.qr-account.denied { border-color: rgba(251,113,133,.25); }
.qr-account .card-h { margin-bottom: 12px; }
.qr-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.qr-account-grid > div { display: grid; gap: 4px; min-width: 0; }
.qr-account-grid small { color: var(--muted); font-size: 9px; }
.qr-account-grid b { overflow-wrap: anywhere; font-size: 10px; }
.paid-text { color: var(--green); }
.unpaid-text { color: var(--red); }
.qr-account h4 { margin: 15px 0 5px; color: #bfd2e2; font-size: 11px; }
.access-approved { margin-top: 12px; padding: 12px; border-radius: 8px; background: rgba(62,224,160,.1); color: var(--green); font-size: 13px; font-weight: 800; text-align: center; letter-spacing: .08em; }
.device-list { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
.device-list li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); color: #c7d8e5; font-size: 10px; }
.device-list li span { color: var(--muted); }

.file-btn { position: relative; overflow: hidden; cursor: pointer; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.login-wrap { display: grid; min-height: 100vh; place-items: center; padding: 20px; background: radial-gradient(ellipse at 50% 18%, #123149, #08131f 65%); }
.login-card { display: grid; gap: 15px; width: min(420px, 100%); padding: 32px; }
.registration-card { display: grid; gap: 14px; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 26px; }
.registration-card > img { width: 62px; height: 62px; margin: 0 auto; object-fit: contain; }
.registration-card h1 { margin: 0; font-family: Manrope, sans-serif; font-size: 22px; text-align: center; }
.registration-card > p { margin: -7px 0 2px; color: var(--muted); font-size: 12px; text-align: center; }
.registration-card .back-link { text-align: center; }
.registration-done { justify-items: center; max-height: none; text-align: center; }
.registration-done .note-box { width: 100%; text-align: left; }
.text-action { display: block; margin-top: 5px; padding: 0; border: 0; background: transparent; color: var(--cyan); font-size: 9px; cursor: pointer; }
.inline-uid-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 9px; padding: 15px 0 2px; }
.inline-uid-form .field { flex: 1 1 220px; }
.login-card > img { width: 76px; height: 76px; margin: 0 auto 2px; object-fit: contain; }
.login-card h1 { margin: 0; font-family: Manrope, sans-serif; font-size: 23px; text-align: center; }
.login-card > p { margin: -8px 0 5px; color: var(--muted); font-size: 12px; text-align: center; }
.login-card .btn { width: 100%; }
.hint { margin: 0 !important; padding: 10px; border-radius: 8px; background: rgba(240,193,75,.08); color: var(--gold) !important; font-size: 11px !important; }
.login-card > .muted { text-align: center; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; max-width: min(420px, calc(100vw - 44px)); padding: 12px 16px; border: 1px solid rgba(62,224,160,.27); border-radius: 10px; background: #112a2a; color: #baf7dd; box-shadow: 0 15px 50px rgba(0,0,0,.3); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(251,113,133,.28); background: #321b28; color: #ffc1cb; }

@media (max-width: 1100px) {
  .sidebar { width: 215px; }
  .main-area { width: calc(100% - 215px); margin-left: 215px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar-tools { gap: 12px; }
  .user-menu > span { display: none; }
}
@media (max-width: 760px) {
  .sidebar { width: 248px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 15px 0 40px rgba(0,0,0,.32); }
  .sidebar.open { transform: translateX(0); }
  .main-area { width: 100%; margin-left: 0; }
  .topbar { min-height: 76px; padding: 12px 16px; }
  .back-button { width: 34px; min-width: 34px; padding: 0; }
  .back-button span { display: none; }
  .mobile-menu { display: inline-grid !important; }
  .topbar h1 { font-size: 17px; }
  .topbar p { max-width: 240px; font-size: 10px; }
  .today-label { display: none; }
  .global-search { width: 40px; padding: 0 10px; }
  .global-search:focus-within { position: absolute; right: 78px; width: min(230px, calc(100vw - 115px)); background: #102033; }
  .global-search:not(:focus-within) input { width: 0; padding: 0; }
  .page-content { gap: 14px; padding: 18px 14px 24px; }
  .app-footer { padding: 0 14px 16px; font-size: 9px; }
  .grid-2, .member-layout, .turn-layout, .mobile-layout { grid-template-columns: 1fr; }
  .sum-grid { grid-template-columns: repeat(2, 1fr); }
  .member-layout > div { order: -1; }
  .member-layout .pcard { margin-inline: auto; }
  .card { padding: 16px; }
  .card-h { align-items: flex-start; flex-wrap: wrap; }
  .card-h h3 { font-size: 14px; }
  .card-h:has(.segs) { display: grid; }
  .segs { overflow-x: auto; flex-wrap: nowrap; max-width: calc(100vw - 60px); }
  .flow { gap: 3px; }
  .flow > i .ico { width: 13px; }
  .staff-card { flex-wrap: wrap; }
  .staff-card .row-actions { width: 100%; justify-content: flex-start; }
  .mobile-layout .device { order: 0; }
  .mobile-layout > article { order: 1; }
  .member-account-grid { grid-template-columns: 1fr; }
  .member-form-heading { align-items: flex-start; flex-direction: column; }
  .member-form-page .member-layout { grid-template-columns: 1fr; }
  .member-photo-field { grid-template-columns: 1fr; }
  .member-photo-preview { justify-items: start; }
  .member-list-tools { justify-content: flex-start; }
  .member-account-grid > .card:first-child { grid-row: auto; }
  .account-details { grid-template-columns: 1fr; }
  .account-details > div.wide { grid-column: auto; }
  .account-qr-wrap .qr { width: 160px; height: 160px; }
}
@media (max-width: 460px) {
  .stats { gap: 9px; }
  .stat { min-height: 108px; padding: 13px; }
  .stat-value { margin: 8px 0 4px; font-size: 22px; }
  .stat-sub { font-size: 10px; }
  .stat-ico { width: 34px; height: 34px; }
  .split-2 { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr 1fr; }
  .pcard { min-height: 220px; padding: 17px; }
  .pcard-mid strong { max-width: 165px; font-size: 13px; }
  .pcard-bot { font-size: 8px; }
  .alert { align-items: flex-start; flex-direction: column; }
  .login-card { padding: 23px; }
  .kiosk-box { gap: 11px; }
  #kiosk-form { grid-template-columns: 1fr; }
  #kiosk-form .btn { width: 100%; }
  .donut-wrap { gap: 9px; }
  .legend { min-width: 100px; }
  .app-footer span:last-child { text-align: right; }
}
@media print {
  body.printing-card * { visibility: hidden !important; }
  body.printing-card #member-preview, body.printing-card #member-preview * { visibility: visible !important; }
  body.printing-card #member-preview { position: absolute; inset: 15mm auto auto 15mm; width: 90mm; }
  body.printing-card .pcard { width: 90mm; min-height: 56mm; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}