:root { --accent: var(--user); }
body.user-page { overflow-x: hidden; background: radial-gradient(circle at 50% 0%, #e8efff 0, #f4f6fa 36%, #edf0f5 100%); padding: 32px 0 50px; }
.mockup-back { position: fixed; top: 22px; left: 24px; z-index: 5; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.9); color: #475467; font-size: 12px; font-weight: 800; box-shadow: var(--shadow-sm); }
.phone-frame { position: relative; width: 100%; max-width: 390px; min-height: 844px; margin: 0 auto; overflow: hidden; border: 8px solid #172033; border-radius: 42px; background: #f8fafc; box-shadow: 0 40px 90px rgba(25, 36, 56, .22); }
.mobile-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 18px; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(229,233,240,.8); }
.mobile-brand { display: flex; align-items: center; gap: 8px; }
.mobile-brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px 10px 10px 4px; background: var(--user); color: white; font-weight: 900; }
.mobile-brand strong { letter-spacing: -.04em; }
.round-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--ink); font-weight: 900; }
.mobile-content { min-height: 700px; padding: 0 17px 96px; }
.mobile-content > .view-panel { padding-top: 18px; }
.mini-label { margin: 0 0 5px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.hello-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hello-row h1, .mobile-page-head h1, .detail-title h1, .profile-head h1 { margin: 0; font-size: 23px; line-height: 1.28; letter-spacing: -.045em; }
.privacy-seal { flex: 0 0 55px; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--user-soft); color: var(--user); text-align: center; font-size: 9px; font-weight: 900; }
.mobile-search { display: flex; align-items: center; gap: 10px; width: 100%; margin: 22px 0 16px; padding: 14px 15px; border: 1px solid #dce4f4; border-radius: 14px; background: white; color: #667085; text-align: left; box-shadow: 0 5px 18px rgba(37,99,235,.08); }
.mobile-search > span:first-child { color: var(--user); font-size: 20px; }
.gps-ad-status { display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: center; margin: -4px 0 13px; padding: 10px 11px; border: 1px solid #b2ddff; border-radius: 13px; background: #eff8ff; }.gps-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--user); box-shadow: 0 0 0 4px #dbeafe; }.gps-ad-status div { display: grid; gap: 2px; }.gps-ad-status strong { color: #1849a9; font-size: 9px; }.gps-ad-status small { color: #475467; font-size: 7px; }.gps-ad-status > b { padding: 4px 6px; border-radius: 7px; background: white; color: #175cd3; font-size: 7px; white-space: nowrap; }
.upcoming-card { padding: 17px; border-radius: 20px; background: linear-gradient(135deg, #1d4ed8, #3b82f6); color: white; box-shadow: 0 14px 30px rgba(37,99,235,.24); }
.upcoming-head, .hospital-line, .section-row, .result-top, .inventory-row, .result-footer, .detail-actions, .detail-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.upcoming-card > strong { display: block; margin-top: 15px; font-size: 18px; }
.upcoming-card > p { margin: 5px 0 15px; color: #dbeafe; font-size: 13px; }
.upcoming-card .status-badge { color: white; background: rgba(255,255,255,.17); }
.upcoming-card .status-badge::before { background: #86efac; }
.sponsored-hospital-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; margin-top: 12px; padding: 15px; overflow: hidden; border: 1px solid #c7d7fe; border-radius: 18px; background: linear-gradient(135deg,#eff6ff,#eef2ff); box-shadow: 0 9px 22px rgba(37,99,235,.09); }
.sponsored-hospital-card::after { content: "+"; position: absolute; right: 76px; bottom: -27px; color: rgba(37,99,235,.08); font-size: 78px; font-weight: 900; }
.sponsored-copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: 4px; min-width: 0; }
.ad-label { display: inline-flex; align-items: center; min-height: 19px; padding: 2px 7px; border: 1px solid #98a2b3; border-radius: 999px; background: rgba(255,255,255,.78); color: #475467; font-size: 8px; font-weight: 900; letter-spacing: .04em; }
.sponsored-copy p { margin: 1px 0 0; color: #175cd3; font-size: 9px; font-weight: 800; }
.sponsored-copy strong { font-size: 15px; }
.sponsored-copy small { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sponsored-hospital-card > button { position: relative; z-index: 1; padding: 9px 10px; border: 0; border-radius: 10px; background: var(--user); color: white; font-size: 9px; font-weight: 900; white-space: nowrap; }
.location-ad-fallback { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 13px; border: 1px dashed #b2ccff; border-radius: 15px; background: #f8fbff; }.location-ad-fallback > span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 9px; background: #eaf1ff; color: var(--user); font-weight: 900; }.location-ad-fallback strong { font-size: 10px; }.location-ad-fallback p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }[data-location-ad][hidden],.location-ad-fallback[hidden] { display: none; }
.small-muted { color: #dbeafe; font-size: 12px; }
.hospital-line { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16); font-size: 12px; }
.hospital-line button { border: 0; background: transparent; color: white; font-weight: 800; }
.section-row { margin: 24px 0 12px; }
.section-row h2 { margin: 0; font-size: 16px; letter-spacing: -.025em; }
.section-row button, .section-row > span { border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.vaccine-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vaccine-grid button { display: grid; gap: 7px; justify-items: center; padding: 11px 4px; border: 1px solid var(--line); border-radius: 14px; background: white; color: #344054; font-size: 11px; font-weight: 800; }
.vaccine-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font-size: 16px; }
.vaccine-icon.blue { color: #175cd3; background: #eff8ff; }.vaccine-icon.violet { color: #6938ef; background: #f4f3ff; }.vaccine-icon.pink { color: #c11574; background: #fdf2fa; }.vaccine-icon.green { color: #027a48; background: #ecfdf3; }.vaccine-icon.amber { color: #b54708; background: #fffaeb; }
.compact-hospital { display: grid; grid-template-columns: 42px 1fr auto; gap: 11px; align-items: center; margin-bottom: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.hospital-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #eaf1ff; color: #175cd3; font-weight: 900; }.hospital-avatar.mint { background: #e8f8f2; color: #027a48; }
.compact-hospital strong { font-size: 13px; }.compact-hospital p { margin: 3px 0 5px; color: var(--muted); font-size: 10px; }.compact-hospital .status-badge { min-height: 20px; padding: 2px 7px; font-size: 9px; }.price { font-size: 12px; font-weight: 900; }
.mobile-page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }.mobile-page-head.centered { justify-content: center; text-align: center; }
.search-inline { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: white; }.search-inline input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-weight: 800; }.search-inline button { border: 0; background: #f2f4f7; border-radius: 50%; }
.horizontal-chips { display: flex; gap: 7px; margin: 13px -17px 0; padding: 0 17px 5px; overflow-x: auto; scrollbar-width: none; }.horizontal-chips::-webkit-scrollbar { display: none; }.horizontal-chips .chip { flex: 0 0 auto; }
.result-meta { display: flex; justify-content: space-between; margin: 15px 0 10px; font-size: 10px; color: var(--muted); }.result-meta strong { color: var(--ink); }
.hospital-result { margin-bottom: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: var(--shadow-sm); }
.sponsored-result { border-color: #b2ccff; background: linear-gradient(180deg,#f8fbff,#fff); }
.sponsored-result-head { display: flex; align-items: center; gap: 7px; margin: -2px 0 11px; color: #475467; font-size: 9px; font-weight: 800; }
.result-top strong { font-size: 15px; }.result-top p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }.rating { padding: 5px 7px; border-radius: 8px; background: #fffaeb; color: #b54708; font-size: 10px; font-weight: 900; }
.inventory-row { margin: 13px 0; padding: 11px 0; border-block: 1px solid #f0f2f5; }.inventory-row div { display: grid; gap: 4px; }.inventory-row span { font-size: 11px; }.inventory-row b { font-size: 14px; }.inventory-row .status-badge { font-size: 10px; }
.result-footer { color: var(--muted); font-size: 10px; }.result-footer button { border: 0; background: transparent; color: var(--user); font-weight: 900; }.result-footer button:disabled { color: #98a2b3; }
.detail-hero { height: 178px; margin: -18px -17px 0; padding: 16px; background: linear-gradient(150deg, #dbeafe, #bfdbfe); }.detail-actions .round-button.glass { background: rgba(255,255,255,.78); }.hero-building { display: grid; place-items: center; width: 100px; height: 80px; margin: 24px auto 0; border-radius: 20px 20px 6px 6px; background: white; color: var(--user); font-size: 34px; box-shadow: 0 16px 30px rgba(37,99,235,.12); }
.detail-body { padding-top: 18px; }.detail-title { align-items: flex-start; }.detail-title > .status-badge { margin-top: 8px; }.detail-title > div > p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.info-strip { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 18px; padding: 13px 0; border-block: 1px solid var(--line); }.info-strip div { display: grid; gap: 4px; padding: 0 8px; text-align: center; }.info-strip div + div { border-left: 1px solid var(--line); }.info-strip span { color: var(--muted); font-size: 9px; }.info-strip strong { font-size: 10px; }
.sync-note { color: var(--success)!important; }.vaccine-option { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: white; }.vaccine-option.selected { border: 2px solid var(--user); }.vaccine-option strong { font-size: 12px; }.vaccine-option p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }.vaccine-option > div:last-child { display: grid; justify-items: end; gap: 6px; }.vaccine-option b { font-size: 12px; }.vaccine-option .status-badge { font-size: 9px; min-height: 20px; }
.notice-box { margin: 14px 0; padding: 13px; border-radius: 13px; background: #eff8ff; color: #1849a9; }.notice-box strong { font-size: 11px; }.notice-box p { margin: 5px 0 0; font-size: 9px; line-height: 1.55; }.full-width { width: 100%; }
.stepper { display: flex; align-items: center; justify-content: center; margin: 20px 0 26px; }.stepper span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #eaecf0; color: #98a2b3; font-size: 10px; font-weight: 900; }.stepper span.active { background: var(--user); color: white; }.stepper i { width: 48px; height: 2px; background: #eaecf0; }
.reservation-step { display: none; }.reservation-step.active { display: block; }.step-caption { margin: 0; color: var(--user); font-size: 10px; font-weight: 900; }.reservation-step h2 { margin: 5px 0 18px; font-size: 21px; letter-spacing: -.04em; }.selection-card { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 9px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: white; text-align: left; }.selection-card.active { border: 2px solid var(--user); background: #f5f8ff; }.selection-card small { color: var(--muted); }.selection-card strong { color: var(--user); }.bottom-action { margin-top: 24px; }
.date-strip { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }.date-strip button { display: grid; gap: 7px; justify-items: center; padding: 9px 3px; border: 1px solid var(--line); border-radius: 12px; background: white; }.date-strip button.active { border-color: var(--user); background: var(--user); color: white; }.date-strip span { font-size: 9px; }.date-strip b { font-size: 14px; }.reservation-step h3 { margin: 20px 0 10px; font-size: 13px; }.time-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.time-grid button { padding: 10px 5px; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: 11px; }.time-grid button.active { border-color: var(--user); color: var(--user); background: var(--user-soft); font-weight: 900; }
.summary-card { padding: 7px 16px; border: 1px solid var(--line); border-radius: 16px; background: white; }.summary-card div { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; font-size: 11px; }.summary-card div + div { border-top: 1px solid var(--line); }.summary-card span { color: var(--muted); }.policy-check { display: flex; gap: 9px; margin-top: 16px; color: #475467; font-size: 10px; line-height: 1.5; }
.qr-card { margin-top: 28px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: white; text-align: center; box-shadow: 0 18px 40px rgba(37,99,235,.1); }.qr-code { width: 180px; height: 180px; margin: 0 auto 16px; border: 12px solid white; border-radius: 8px; background: repeating-conic-gradient(#111827 0 25%, #fff 0 50%) 0 / 22px 22px; box-shadow: 0 0 0 1px #eaecf0; }.qr-card > strong { font-size: 14px; }.qr-card > p { color: var(--muted); font-size: 10px; line-height: 1.55; }.qr-timer { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0; padding: 10px; border-radius: 10px; background: #f8fafc; color: #475467; font-size: 10px; }.qr-timer span { width: 7px; height: 7px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 4px #d1fadf; }.security-note { display: flex; gap: 11px; margin-top: 15px; padding: 14px; border-radius: 14px; background: #eef4ff; }.security-note > span { color: var(--user); }.security-note strong { font-size: 11px; }.security-note p { margin: 4px 0 0; color: #475467; font-size: 9px; line-height: 1.5; }
.profile-head { display: flex; gap: 13px; align-items: center; padding: 10px 0 5px; }.profile-avatar { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--user-soft); color: var(--user); font-size: 21px; font-weight: 900; }.profile-head h1 { font-size: 17px; }.profile-head .status-badge { margin-top: 6px; font-size: 9px; min-height: 20px; }
.booking-card { display: flex; justify-content: space-between; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: white; margin-bottom: 8px; }.booking-card > div { display: grid; gap: 6px; }.booking-card strong { font-size: 11px; }.booking-card p { margin: 0; color: var(--muted); font-size: 9px; }.booking-card .status-badge { width: fit-content; font-size: 9px; min-height: 20px; }.booking-card > button { border: 0; background: transparent; font-size: 20px; }.booking-card.subdued { opacity: .75; }
.sanction-card { display: grid; grid-template-columns: 75px 1fr; gap: 13px; padding: 14px; border: 1px solid #fedf89; border-radius: 15px; background: #fffaeb; }.sanction-score { display: grid; align-content: center; justify-items: center; border-right: 1px solid #fedf89; }.sanction-score span { color: #93370d; font-size: 8px; }.sanction-score strong { color: #b54708; font-size: 24px; }.sanction-card > div:last-child strong { font-size: 10px; }.sanction-card p { margin: 6px 0; color: #7a2e0e; font-size: 9px; line-height: 1.5; }.sanction-card button { padding: 0; border: 0; background: transparent; color: #b54708; font-size: 9px; font-weight: 900; text-decoration: underline; }
.settings-list { display: grid; margin-top: 18px; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: white; }.settings-list button { display: flex; justify-content: space-between; padding: 13px 14px; border: 0; background: white; text-align: left; font-size: 11px; }.settings-list button + button { border-top: 1px solid var(--line); }
.bottom-nav { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5,1fr); height: 74px; padding: 8px 8px 12px; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }.bottom-nav button { display: grid; justify-items: center; align-content: center; gap: 3px; border: 0; background: transparent; color: #98a2b3; }.bottom-nav button span { font-size: 19px; }.bottom-nav button b { font-size: 8px; }.bottom-nav button.active { color: var(--user); }.bottom-nav .qr-nav span { display: grid; place-items: center; width: 38px; height: 38px; margin-top: -22px; border-radius: 13px; background: var(--user); color: white; box-shadow: 0 10px 22px rgba(37,99,235,.28); }
.mobile-modal { border-radius: 24px; }.appeal-option { display: flex; gap: 10px; margin-bottom: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }.appeal-option span { display: grid; gap: 4px; }.appeal-option strong { font-size: 11px; }.appeal-option small { color: var(--muted); font-size: 9px; }.mobile-modal textarea { width: 100%; min-height: 80px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; resize: vertical; font-size: 11px; }
@media (max-width: 520px) { body.user-page { padding: 0; background: #f8fafc; }.mockup-back { display: none; }.phone-frame { max-width: 390px; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }.bottom-nav { position: fixed; max-width: 390px; margin: 0 auto; }.modal { padding: 0; align-items: flex-end; }.mobile-modal { width: min(390px,100%); border-radius: 24px 24px 0 0; } }