:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#132e3e;background:#f3f6f8;font-size:16px;line-height:1.5;--ink:#102c3b;--accent:#096757;--line:#d7e1e7}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}header,main,footer{max-width:960px;margin:auto;padding:24px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none;font-weight:750}.brand small{display:block;font-size:.875rem;font-weight:400;color:#49616e}.mark{display:grid;place-items:center;background:var(--ink);color:#e5ff82;border-radius:12px;width:48px;height:48px;font-size:1.3rem}main{min-height:75vh;padding-top:36px}h1{font-size:2.4rem;line-height:1.15;letter-spacing:-.04em;margin:12px 0 20px}h2{font-size:1.2rem;margin:0}p{margin:12px 0 20px}.eyebrow{font-size:.875rem;letter-spacing:.08em;font-weight:700;color:#49616e}.login{max-width:460px;margin:24px auto}.card{background:white;border:1px solid var(--line);border-radius:20px;padding:28px}form{display:grid;gap:12px}label{font-weight:600}input{width:100%;min-height:50px;border:1px solid #9eb2bf;border-radius:10px;padding:12px;font:inherit;margin-bottom:8px}button{min-height:48px;border:0;border-radius:10px;background:var(--accent);color:white;font:inherit;font-weight:650;padding:12px 18px;cursor:pointer}button:disabled{background:#e6ecf0;color:#526774;cursor:default}button.quiet{color:var(--ink);background:transparent;border:1px solid var(--line)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #285fbd;outline-offset:3px}.heading,.section-title{display:flex;justify-content:space-between;align-items:center;gap:16px}.price{font-weight:750;text-align:right;white-space:nowrap}.price small{display:block;font-size:.875rem;font-weight:400;color:#49616e}.notice{border-left:4px solid #ba7e13;background:#fff5df;padding:14px;border-radius:4px}.muted,.instruction{color:#49616e}.muted{font-size:.875rem}.stations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.station{background:white;border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px}.station-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.station-number{font-size:.875rem;color:#49616e}.status{font-size:.875rem;font-weight:650;color:#405965;background:#eef2f5;padding:5px 10px;border-radius:6px;align-self:flex-start}.status.ready{color:#075548;background:#e4f3ec}.status.busy{color:#214e91;background:#eaf1fd}.station p{margin:0;color:#49616e;font-size:.875rem}.station button{margin-top:auto;width:100%}.history{margin-top:38px}.transaction{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}.transaction strong,.transaction small{display:block}.transaction small{font-size:.875rem;color:#49616e}.transaction .amount{text-align:right}.empty{padding:28px;background:white;border:1px dashed #b3c5d1;border-radius:14px;color:#49616e}#message{position:sticky;bottom:18px;margin-top:24px;background:var(--ink);color:white;padding:16px 20px;border-radius:12px;box-shadow:0 5px 20px #102c3b25}footer{font-size:.875rem;color:#49616e}dialog{max-width:460px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:16px;padding:28px;color:var(--ink)}dialog::backdrop{background:#102c3b80}.dialog-actions{display:grid;gap:10px}@media(max-width:600px){header,main,footer{padding:20px}header{flex-wrap:wrap}main{padding-top:26px}.stations{grid-template-columns:1fr}.heading{align-items:flex-start}h1{font-size:2rem}.price{font-size:1rem;white-space:normal;max-width:140px}.card{padding:24px}.login{margin:12px auto}.transaction{gap:10px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}
:root{--ink:#123f3b;--accent:#087f68;--line:#dbe6e0;background:#f5f7f5}header{background:#fff;border-radius:0 0 18px 18px}.station{box-shadow:0 2px 10px #123f3b12;border-color:#dbe6e0}.mark{background:#123f3b}.status.ready{color:#075548;background:#e2f4ea}
.location-strip{display:flex;align-items:center;gap:12px;background:#123f3b;color:#fff;border-radius:16px;padding:14px 16px;margin:0 0 26px}.location-strip strong,.location-strip small{display:block}.location-strip small{color:#c6e6d8;font-size:.875rem}.location-pin{font-size:1.6rem;color:#e5ff82}.live-dot{margin-left:auto;width:10px;height:10px;border-radius:50%;background:#e5ff82;box-shadow:0 0 0 5px #e5ff8225}
.location-strip{background:linear-gradient(120deg,#123f3b 0%,#176b5b 100%);padding:18px 20px;border-radius:18px;box-shadow:0 8px 24px #123f3b22}.station{position:relative;overflow:hidden;border-radius:18px;padding:20px;background:#fff;box-shadow:0 6px 20px #123f3b0f}.station:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#dbe6e0}.station:has(.status.ready):before{background:#087f68}.station:has(.status.busy):before{background:#2c6bb1}.station-top h2{letter-spacing:-.02em}.station button{min-height:52px;border-radius:12px}.station button:not(:disabled):hover{background:#056a58}.section-title{margin-top:28px}.history{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;margin-top:34px}.history h2{margin-bottom:4px}.login{box-shadow:0 12px 40px #123f3b12}.login h1{margin-top:8px}.login button{margin-top:4px;min-height:54px;border-radius:12px}footer{padding-top:10px;padding-bottom:30px}
.month-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}.summary-tile{background:#eaf5ef;border:1px solid #d1e8db;border-radius:14px;padding:14px}.summary-tile strong,.summary-tile small{display:block}.summary-tile strong{font-size:1.2rem;color:#123f3b}.summary-tile small{font-size:.8rem;color:#49616e}.status.busy{position:relative}.status.busy:after{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;border-radius:50%;background:#2c6bb1;vertical-align:middle;animation:heartbeat 1.6s ease-in-out infinite}.station button:not(:disabled){box-shadow:0 4px 10px #087f6825}.station{transition:transform .18s ease,box-shadow .18s ease}.station:hover{transform:translateY(-2px);box-shadow:0 10px 28px #123f3b18}@keyframes heartbeat{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}@media(max-width:600px){.month-summary{grid-template-columns:repeat(3,1fr);gap:8px}.summary-tile{padding:12px 9px}.summary-tile strong{font-size:1rem}}
.payment-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;margin-top:28px;box-shadow:0 6px 20px #123f3b0f}.payment-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.payment-head h2{margin-top:4px}.test-badge{background:#fff1c9;color:#76520d;font-size:.75rem;font-weight:800;letter-spacing:.08em;padding:5px 8px;border-radius:6px}.fake-card{margin:18px 0;background:linear-gradient(120deg,#123f3b,#1c806c);color:#fff;border-radius:14px;padding:18px;display:grid;gap:24px;box-shadow:0 8px 18px #123f3b25}.fake-card span{font-size:.75rem;font-weight:800;letter-spacing:.12em}.fake-card strong{font-size:1.3rem;letter-spacing:.08em}.fake-card small{color:#c6e6d8}.payment-status{display:flex;gap:12px;align-items:center;padding:13px 0}.payment-status strong,.payment-status small{display:block}.payment-status small{color:#49616e;font-size:.875rem}.payment-check{display:grid;place-items:center;background:#e2f4ea;color:#087f68;border-radius:50%;width:30px;height:30px;font-weight:800}.payment-button{width:100%;background:#edf5f2;color:#123f3b}.payment-button:disabled{background:#e2f4ea;color:#075548}
.demo-extras{margin-top:28px}.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:#123f3b;border-radius:16px;padding:6px;margin-bottom:20px;position:sticky;bottom:14px;z-index:3;box-shadow:0 8px 24px #123f3b30}.bottom-nav button{min-height:56px;background:transparent;color:#c6e6d8;padding:7px 4px;font-size:1.15rem;display:grid;place-items:center;gap:0}.bottom-nav button span{font-size:.72rem;font-weight:600}.bottom-nav button.nav-active{background:#e5ff82;color:#123f3b;border-radius:11px}.extra-view{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:22px}.extra-view[hidden]{display:none}.extra-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.extra-head h2{margin-top:4px}.activity-line{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:18px 0}.activity-line strong{color:#123f3b}.soft{background:#f0f7f3;border-left-color:#087f68}.compact{margin:18px 0}.payment-row,.account-list>div{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.payment-row strong{color:#123f3b}.account-list{margin:10px 0 18px}.account-list>div:last-child{border-bottom:0}.account-list span{color:#49616e}.qr-box{display:flex;align-items:center;gap:16px;background:#f0f7f3;border-radius:14px;padding:16px;margin:8px 0 16px}.qr-box small{display:block;color:#49616e;margin-top:3px}.qr-pattern{width:72px;height:72px;flex:none;background:repeating-conic-gradient(#123f3b 0 25%,#fff 0 50%) 50%/12px 12px;border:8px solid #fff;box-shadow:0 0 0 1px #dbe6e0}.schedule-btn{width:100%}.session-gauge{display:grid;place-items:center;min-height:150px;margin:18px 0;background:radial-gradient(circle,#e5ff82 0 43%,#d0e8db 44% 46%,#f0f7f3 47%);border-radius:18px}.session-gauge strong{font-size:2.1rem;color:#123f3b;line-height:1}.session-gauge span{font-size:.875rem;color:#49616e}.detail-btn{margin-top:2px;font-size:.875rem!important;min-height:42px!important}@media(max-width:600px){.activity-line{grid-template-columns:1fr auto}.activity-line strong:last-child{grid-column:2}.extra-view{padding:18px}.bottom-nav{bottom:8px}}
.schedule-modal{border:1px solid var(--line);border-radius:18px;padding:24px;color:var(--ink);max-width:460px;width:calc(100% - 28px)}.schedule-modal::backdrop{background:#123f3b80}.schedule-form{display:grid;gap:15px}.schedule-form fieldset{border:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.schedule-form legend{font-weight:700;width:100%;margin-bottom:4px}.schedule-form fieldset label{border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:.875rem;cursor:pointer}.schedule-form input{min-height:auto;width:auto;margin:0 5px 0 0;accent-color:#087f68}.time-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.time-fields label{display:grid;gap:5px}.time-fields input{width:100%;min-height:46px;margin:0}.save-schedule{margin-top:4px}.schedule-btn.scheduled{background:#e2f4ea;color:#075548;border-color:#bfe1ca}
