@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root { --primary:#315da8; --on-primary:#fff; --primary-container:#d9e2ff; --on-primary-container:#001a41; --secondary-container:#dce3f3; --on-secondary-container:#151c2a; --tertiary:#745573; --tertiary-container:#ffd7f8; --error:#ba1a1a; --error-container:#ffdad6; --surface:#f9f9ff; --surface-container:#edf0f8; --surface-high:#e7eaf2; --on-surface:#1a1b20; --on-surface-variant:#45464f; --outline:#767680; --outline-variant:#c6c6d0; --radius:24px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--surface); color:var(--on-surface); font:400 15px/1.5 'Noto Sans SC',system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { border:0; cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
.material-symbols-outlined { font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal; font-size:22px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24; }
.app { max-width:1120px; margin:0 auto; padding:0 24px 100px; }
.top-app-bar { height:88px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:flex; align-items:center; gap:14px; min-width:0; }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:var(--primary-container); color:var(--on-primary-container); }
.brand h1 { margin:0; font-size:22px; letter-spacing:-.4px; }.brand p { margin:1px 0 0; color:var(--on-surface-variant); font-size:13px; }
.nav-link,.icon-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; color:var(--primary); border-radius:22px; font-weight:700; }.nav-link { padding:0 16px; background:var(--primary-container); }.nav-link.active { background:var(--secondary-container); color:var(--on-secondary-container); }.top-nav { display:flex; align-items:center; gap:10px; }.icon-button { width:44px; background:transparent; }.icon-button:hover,.nav-link:hover { background:var(--surface-high); }
.bottom-nav { position:fixed; z-index:10; bottom:0; left:0; right:0; display:none; justify-content:space-around; padding:10px 16px max(10px,env(safe-area-inset-bottom)); background:rgba(249,249,255,.94); backdrop-filter:blur(14px); border-top:1px solid var(--outline-variant); }.bottom-nav a { display:grid; flex:1; justify-items:center; gap:3px; min-width:0; color:var(--on-surface-variant); font-size:12px; }.bottom-nav .active { color:var(--on-secondary-container); }.bottom-nav .active .material-symbols-outlined { background:var(--secondary-container); border-radius:18px; padding:4px 20px; }
.page-header { margin:24px 0 26px; }.eyebrow { margin:0 0 6px; color:var(--primary); font-size:13px; font-weight:700; letter-spacing:.5px; }.page-title { margin:0; font-size:32px; line-height:1.2; letter-spacing:-1px; }.supporting-text { margin:8px 0 0; color:var(--on-surface-variant); }
.hero { display:grid; grid-template-columns:1.35fr .65fr; gap:24px; padding:32px; border-radius:32px; background:var(--primary-container); color:var(--on-primary-container); }.hero h2 { margin:0; font-size:30px; line-height:1.24; letter-spacing:-1px; }.hero p { margin:10px 0 0; max-width:560px; }.hero-stat { align-self:center; text-align:right; }.hero-stat strong { display:block; font-size:44px; line-height:1; }.hero-stat span { font-weight:700; }
.grid { display:grid; gap:20px; margin-top:24px; }.two-up { grid-template-columns:1fr 1fr; }.settings-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); align-items:start; }
.card { padding:24px; border-radius:var(--radius); background:var(--surface-container); }.card.white { background:#fff; border:1px solid var(--outline-variant); }.card h2,.card h3 { margin:0; }.card h2 { font-size:20px; }.card-label { color:var(--on-surface-variant); font-size:14px; }.card-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:16px; border-radius:14px; background:var(--secondary-container); color:var(--on-secondary-container); }.card-action { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; color:var(--primary); font-weight:700; }
.button-row { display:flex; flex-wrap:wrap; gap:12px; }.button { min-height:48px; display:inline-flex; justify-content:center; align-items:center; gap:10px; padding:0 22px; border-radius:24px; font-weight:700; transition:box-shadow .2s,background .2s,transform .2s; }.button:active { transform:scale(.98); }.button.filled { background:var(--primary); color:var(--on-primary); box-shadow:0 1px 2px rgba(0,0,0,.25); }.button.filled:hover { box-shadow:0 2px 6px rgba(0,0,0,.25); }.button.tonal { background:var(--secondary-container); color:var(--on-secondary-container); }.button.outlined { border:1px solid var(--outline); color:var(--primary); background:transparent; }.button.text { color:var(--primary); background:transparent; padding:0 12px; }.button.danger { background:var(--error-container); color:var(--error); }.button.small { min-height:40px; padding:0 16px; }
.scan-card { margin-top:24px; padding:24px; border-radius:var(--radius); background:#fff; border:1px solid var(--outline-variant); }.scan-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }.scan-head h2 { margin:0; font-size:19px; }.progress { height:8px; overflow:hidden; margin:16px 0 8px; border-radius:99px; background:var(--surface-high); }.progress div { height:100%; width:0; border-radius:inherit; background:var(--primary); transition:width .3s ease; }.progress-meta { display:flex; justify-content:space-between; gap:16px; color:var(--on-surface-variant); font-size:13px; }.notice { margin-top:16px; padding:12px 16px; border-radius:14px; background:var(--secondary-container); color:var(--on-secondary-container); font-size:14px; }.notice.error { background:var(--error-container); color:var(--error); }.is-hidden { display:none !important; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:16px; }.section-heading h2 { margin:0; font-size:22px; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.field { position:relative; display:block; }.field label { position:absolute; z-index:1; top:-8px; left:12px; padding:0 4px; background:var(--surface-container); color:var(--primary); font-size:12px; }.field input { width:100%; height:56px; padding:0 16px; border:1px solid var(--outline); border-radius:4px; color:var(--on-surface); background:transparent; outline:0; }.field input:focus { border:2px solid var(--primary); }.input-action { display:flex; gap:12px; margin-top:18px; }.input-action .field { flex:1; }
.room-list { display:grid; gap:10px; }.room-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px; border-radius:18px; background:#fff; border:1px solid var(--outline-variant); }.room-avatar { display:grid; place-items:center; width:40px; height:40px; border-radius:14px; background:var(--primary-container); color:var(--on-primary-container); font-weight:700; }.room-name { font-weight:700; }.room-link { overflow:hidden; color:var(--on-surface-variant); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.room-actions { display:flex; gap:2px; }.empty { padding:36px 18px; text-align:center; color:var(--on-surface-variant); }.empty .material-symbols-outlined { margin-bottom:8px; font-size:40px; color:var(--outline); }
.summary-row { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:28px; }.summary-item { display:grid; gap:3px; padding:16px; border-radius:18px; background:var(--surface-container); }.summary-item strong { font-size:24px; }.summary-item span { color:var(--on-surface-variant); font-size:13px; }.summary-item.attention strong { color:var(--error); }
.status-badge { display:inline-flex; align-items:center; width:max-content; margin-top:12px; padding:5px 11px; border-radius:99px; background:var(--secondary-container); color:var(--on-secondary-container); font-size:12px; font-weight:700; }.status-running { background:var(--primary-container); color:var(--on-primary-container); }.status-failed,.status-interrupted { background:var(--error-container); color:var(--error); }
.result-section { margin-top:28px; }.md-list,.history-list { overflow:hidden; border:1px solid var(--outline-variant); border-radius:24px; background:#fff; }.md-list-item { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:16px; min-height:88px; padding:16px 20px; }.md-list-item + .md-list-item,.history-item + .history-item { border-top:1px solid var(--outline-variant); }.md-list-leading,.history-leading { display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:var(--error-container); color:var(--error); }.md-list-item.is-recharged .md-list-leading,.history-leading { background:var(--secondary-container); color:var(--on-secondary-container); }.md-list-content { min-width:0; }.md-list-headline { font-size:17px; font-weight:700; }.md-list-supporting { overflow-wrap:anywhere; color:var(--on-surface-variant); font-size:13px; }.md-list-trailing { display:grid; justify-items:end; gap:10px; }.balance { color:var(--error); font-size:20px; font-weight:700; }.is-recharged .balance { color:var(--tertiary); }.recharge-status { margin-top:5px; }.recharged-label { min-height:36px; padding:0; background:transparent; color:var(--tertiary); font-weight:700; text-align:left; }.recharged-label span { font-size:12px; font-weight:500; }.error-leading { background:var(--error-container); color:var(--error); }.notice-link { color:var(--primary); font-weight:700; text-decoration:underline; }
.history-item { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:16px; min-height:88px; padding:18px 20px; transition:background .2s; }.history-item:hover { background:var(--surface-container); }.history-title { font-size:17px; font-weight:700; }.history-meta { margin-top:3px; color:var(--on-surface-variant); font-size:13px; }.history-trailing { display:flex; align-items:center; gap:10px; }.history-trailing .status-badge { margin:0; }
.result-heading-row { display:flex; align-items:end; justify-content:space-between; gap:20px; }.segmented-control { display:flex; padding:4px; border-radius:24px; background:var(--surface-container); }.segmented-control button { display:flex; align-items:center; gap:7px; min-height:40px; padding:0 16px; border-radius:20px; background:transparent; color:var(--on-surface-variant); font-weight:700; }.segmented-control button.active { background:var(--secondary-container); color:var(--on-secondary-container); }.segmented-control .material-symbols-outlined { font-size:19px; }.card-progress { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:8px 0 16px; color:var(--on-surface-variant); font-size:13px; }.card-progress strong { color:var(--on-surface); }.result-card-stage { min-height:700px; perspective:1800px; }.payment-card { position:relative; width:100%; height:700px; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.8,.2,1); }.payment-card.is-flipped { transform:rotateY(180deg); }.payment-card-face { position:absolute; inset:0; overflow:hidden; border:1px solid var(--outline-variant); border-radius:30px; background:#fff; backface-visibility:hidden; box-shadow:0 3px 12px rgba(0,0,0,.08); }.payment-card-front { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px; text-align:center; }.payment-card-back { display:grid; grid-template-rows:auto 1fr; transform:rotateY(180deg); }.payment-frame-area { min-height:0; }.payment-card-icon { display:grid; place-items:center; width:72px; height:72px; margin-bottom:18px; border-radius:24px; background:var(--error-container); color:var(--error); }.payment-card-icon .material-symbols-outlined { font-size:38px; }.payment-card-front h2 { margin:0; font-size:30px; }.card-balance { margin:18px 0; color:var(--error); font-size:40px; }.original-link { display:grid; gap:5px; width:min(100%,680px); padding:14px 18px; border-radius:16px; background:var(--surface-container); text-align:left; }.original-link span { color:var(--on-surface-variant); font-size:12px; }.original-link code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.card-marked { display:flex; align-items:center; gap:7px; margin-top:14px; color:var(--tertiary); font-weight:700; }.card-primary-actions { justify-content:center; margin-top:24px; }.payment-frame-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; padding:10px 18px; border-bottom:1px solid var(--outline-variant); background:var(--surface-container); }.payment-frame-toolbar div { display:grid; }.payment-frame-toolbar span { color:var(--on-surface-variant); font-size:12px; }.payment-frame-area { position:relative; min-height:0; }.payment-card iframe { display:block; width:100%; height:100%; min-height:0; border:0; background:#fff; }.payment-frame-error { position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:8px; padding:24px; background:var(--surface); color:var(--on-surface); text-align:center; }.payment-frame-error .material-symbols-outlined { color:var(--error); font-size:44px; }.payment-frame-error h3,.payment-frame-error p { margin:0; }.payment-frame-error p { color:var(--on-surface-variant); }.payment-frame-error code { color:var(--error); font-size:12px; }.payment-frame-error .button-row { justify-content:center; margin-top:10px; }.card-navigation { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; margin-top:16px; }.card-navigation #nextCard { justify-self:end; }.button:focus-visible,.icon-button:focus-visible,.segmented-control button:focus-visible,.recharged-label:focus-visible,a:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.modal-scrim { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.32); }.dialog { width:min(100%,480px); padding:24px; border-radius:28px; background:var(--surface); box-shadow:0 16px 40px rgba(0,0,0,.25); }.dialog h2 { margin:0 0 22px; font-size:22px; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
@media (max-width:680px) { .app { padding:0 16px 96px; }.top-app-bar { height:72px; }.top-app-bar .top-nav { display:none; }.brand-mark { width:42px; height:42px; border-radius:14px; }.brand h1 { font-size:17px; }.brand p { font-size:11px; }.bottom-nav { display:flex; }.page-header { margin:14px 0 20px; }.page-title { font-size:28px; }.hero { grid-template-columns:1fr; gap:20px; padding:24px; border-radius:28px; }.hero h2 { font-size:26px; }.hero-stat { text-align:left; }.hero-stat strong { font-size:38px; }.two-up,.settings-grid,.field-grid { grid-template-columns:1fr; }.card,.scan-card { padding:20px; }.button-row { display:grid; grid-template-columns:1fr; }.button { width:100%; }.input-action { display:grid; }.room-item { grid-template-columns:auto minmax(0,1fr); }.room-actions { grid-column:1 / -1; justify-content:flex-end; }.summary-row { grid-template-columns:repeat(2,1fr); }.summary-item:last-child { grid-column:1 / -1; }.md-list,.history-list { border-radius:20px; }.md-list-item { grid-template-columns:44px minmax(0,1fr); padding:16px; }.md-list-leading,.history-leading { width:44px; height:44px; border-radius:14px; }.md-list-trailing { grid-column:2; justify-items:start; width:100%; }.md-list-trailing .button { width:100%; }.history-item { grid-template-columns:44px minmax(0,1fr); padding:16px; }.history-trailing { grid-column:2; justify-content:space-between; }.result-heading-row { display:grid; }.segmented-control { width:100%; }.segmented-control button { flex:1; justify-content:center; }.result-card-stage,.payment-card { min-height:620px; height:620px; }.payment-card-front { padding:24px 18px; }.payment-card-front h2 { font-size:26px; }.card-balance { font-size:34px; }.original-link code { font-size:11px; }.card-primary-actions { display:grid; width:100%; }.card-navigation { grid-template-columns:1fr 1fr; }.card-navigation #flipBack { grid-column:1 / -1; grid-row:1; }.card-navigation #previousCard { grid-column:1; }.card-navigation #nextCard { grid-column:2; width:100%; }.notice { font-size:13px; } }
@media (prefers-reduced-motion:reduce) { .payment-card { transition:none; } }