:root{--bg: #0F1115;--surface: #161A21;--surface-2: #1D222B;--border: #2A303B;--silver: #C9CED6;--muted: #8A919C;--emerald: #2ECC9A;--emerald-dim: #1F8F6C;--danger: #E5484D;--warn: #F5A524}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:Inter,system-ui,sans-serif;background-color:var(--bg);color:var(--silver);-webkit-font-smoothing:antialiased}#app{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}.tab-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--surface);border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:center;padding:6px 0;height:52px}.tab-bar button{flex:1;background:none;border:none;color:var(--muted);font-size:11px;line-height:1.2;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;transition:color .15s}.tab-bar button.active{color:var(--emerald)}.tab-bar button .tab-icon{font-size:18px}.app-wrapper{display:flex;flex-direction:column;min-height:100%;padding-bottom:60px}.surface-card,.surface-2-card{border:1px solid var(--border);border-radius:16px;padding:16px}.surface-card{background:var(--surface)}.surface-2-card{background:var(--surface-2)}.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--emerald);color:#fff;border:none;border-radius:12px;padding:10px 20px;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s}.btn-primary:active{background:var(--emerald-dim)}.btn-secondary{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);color:var(--silver);border:1px solid var(--border);border-radius:12px;padding:10px 20px;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s}.btn-secondary:active{background:var(--border)}.btn-danger{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--danger);border:1px solid var(--danger);border-radius:12px;padding:10px 20px;font-size:13px;cursor:pointer}.status-ring{position:relative;width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center}.status-ring svg{width:100%;height:100%}.progress-bar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}.progress-bar-fill{height:100%;border-radius:3px;background:var(--emerald);transition:width .3s}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background:#0009;display:flex;align-items:center;justify-content:center}.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;max-width:360px;width:calc(100% - 32px);max-height:90vh;overflow-y:auto}.tariff-card{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:16px;cursor:default;transition:border-color .15s}.tariff-card.selected{border-color:var(--emerald)}.pass-card{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:14px}.os-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px}.pill-group{display:flex;gap:8px}.pill{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-size:13px;cursor:pointer;transition:all .15s;color:var(--muted)}.pill.active{border-color:var(--emerald);color:var(--silver);background:var(--surface)}.input{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-size:14px;color:var(--silver);width:100%;outline:none}.input:focus{border-color:var(--emerald)}.tag{display:inline-block;background:var(--surface-2);padding:2px 8px;border-radius:6px;font-size:11px;color:var(--muted)}h1{font-size:20px;font-weight:600}h2{font-size:16px;font-weight:600}h3{font-size:14px;font-weight:500}.text-muted{color:var(--muted)}.text-emerald{color:var(--emerald)}.text-danger{color:var(--danger)}.text-warn{color:var(--warn)}.text-sm{font-size:13px}.text-xs{font-size:11px}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.px-4{padding-left:16px;padding-right:16px}.py-3{padding-top:12px;padding-bottom:12px}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.text-center{text-align:center}.w-full{width:100%}.gap-2{gap:8px}.gap-3{gap:12px}