:root{color-scheme:light;--navy:#071b28;--navy2:#123344;--teal:#117b83;--mint:#d7f6ed;--sky:#eff6f8;--white:#fff;--ink:#152e3c;--muted:#6c8491;--line:#dce8eb;--warn:#b56b32}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f3f7f8;color:var(--ink);font-family:Tahoma,Arial,sans-serif;font-size:14px}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}.app{max-width:780px;min-height:100vh;margin:auto;background:#f6f9f9;box-shadow:0 0 50px #061c2812;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.topbar{height:72px;padding:12px 20px;display:flex;align-items:center;gap:11px;background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.brand-mark,.avatar{display:grid;place-items:center;background:linear-gradient(145deg,#0e7f85,#104a5d);color:#fff;font-size:25px;font-weight:bold;border-radius:15px;width:43px;height:43px}.brand-copy strong,.brand-copy small{display:block}.brand-copy strong{font-size:17px;letter-spacing:-.4px}.brand-copy small{font-size:11px;color:var(--muted);margin-top:2px}.icon-button{margin-right:auto;width:39px;height:39px;border:1px solid var(--line);border-radius:12px;background:#f5f9f9;font-size:24px;color:var(--teal)}main{padding:20px 18px 28px}.view{display:none}.view.active{display:block}#notice:not([hidden]){background:#fff2e9;border:1px solid #f4d6bc;border-radius:13px;color:#9e4e24;padding:12px 15px;margin-bottom:15px;line-height:1.8}
.welcome{position:relative;overflow:hidden;border-radius:25px;background:radial-gradient(circle at 0 0,#27969878,transparent 38%),linear-gradient(130deg,#071b28,#17485a);color:#fff;padding:29px 25px;min-height:202px;box-shadow:0 16px 35px #0a354329}.welcome:after{content:"";position:absolute;left:-40px;bottom:-86px;width:215px;height:215px;border:1px solid #ffffff2b;border-radius:50%;box-shadow:0 0 0 28px #ffffff0a,0 0 0 57px #ffffff09}.eyebrow{display:inline-block;font-weight:700;font-size:11px;color:#54bfb5;letter-spacing:.15px}.welcome .eyebrow{color:#b8eee3}.welcome h1{font-size:27px;line-height:1.45;margin:11px 0 5px}.welcome p{color:#d3e5e8;line-height:1.8;margin:0 0 21px}.light-button{position:relative;z-index:1;background:#e7fcf5;border:0;color:#0b5156;border-radius:12px;padding:11px 16px;font-weight:bold}.stats{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:15px 0 30px}.stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:17px;min-height:93px}.stat span,.stat strong{display:block}.stat span{font-size:11px;color:var(--muted);margin-bottom:12px}.stat strong{font-size:16px;line-height:1.5}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:27px 0 13px}.section-heading small{font-size:11px;color:var(--teal);font-weight:700}.section-heading h2{font-size:19px;margin:5px 0 0}.text-button{background:transparent;border:0;color:#0d7782;font-weight:bold;padding:8px}.stack{display:grid;gap:10px}.empty-state{background:#fff;border:1px dashed #cbdde1;border-radius:17px;color:var(--muted);text-align:center;padding:27px 16px;line-height:1.9}
.page-heading{margin:9px 2px 23px}.page-heading h1{font-size:25px;margin:7px 0}.page-heading p{margin:0;color:var(--muted);line-height:1.9}.list-card{display:flex;align-items:center;gap:12px;min-height:82px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px 15px;box-shadow:0 5px 20px #0e405009}.service-card,.order-card{cursor:pointer;transition:transform .15s,border-color .15s}.service-card:hover,.order-card:hover{transform:translateY(-2px);border-color:#9fced1}.service-icon{display:grid;place-items:center;width:43px;height:43px;flex:none;border-radius:13px;background:#e7f5f3;color:#0f7880;font-size:19px}.card-copy{min-width:0;flex:1}.card-copy strong,.card-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-copy strong{font-size:14px;line-height:1.8}.card-copy small{font-size:11px;color:var(--muted);margin-top:4px}.status-badge{font-size:10px;border-radius:20px;padding:6px 9px;white-space:nowrap}.status-badge.good{background:#e0f6ed;color:#237253}.status-badge.warn{background:#fff0e5;color:#9a612e}.status-badge.neutral{background:#eef3f6;color:#5b7180}.order-side{text-align:left;display:grid;gap:6px;justify-items:end}.order-side strong{white-space:nowrap;font-size:12px}.wallet-card .credit{color:#16825b}.wallet-card .debit{color:#b9634b}.more-button{width:100%;background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px;color:var(--teal);font-weight:bold;margin:14px 0}
.filters{display:flex;gap:8px;overflow-x:auto;padding:2px 0 19px;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}.filters button,.segments button{white-space:nowrap;border:1px solid var(--line);border-radius:50px;background:#fff;color:#56717e;padding:9px 14px}.filters button.selected,.segments button.selected{background:#0d6974;border-color:#0d6974;color:#fff}.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.plan{background:#fff;border:1px solid var(--line);border-radius:19px;padding:20px;box-shadow:0 8px 26px #163e470a}.plan-kind{color:#0f8790;font:700 10px Arial;letter-spacing:1.5px}.plan h3{font-size:18px;line-height:1.6;margin:9px 0 2px}.plan-duration{color:var(--muted);font-size:12px;margin:0 0 15px}.features{display:flex;gap:5px;flex-wrap:wrap;min-height:32px}.feature{background:#edf7f5;border-radius:40px;padding:6px 9px;font-size:10px;color:#476d6e}.plan-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:17px;margin-top:16px}.price{font-size:16px;color:#0b5d69;white-space:nowrap}.small-button,.primary{border:0;background:#0e7380;color:#fff;border-radius:11px;padding:11px 14px;font-weight:bold}.segments{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.segments button{border-radius:12px}
.account-card{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:11px}.avatar{width:55px;height:55px;font-size:28px}.account-card strong,.account-card small{display:block}.account-card strong{font-size:17px}.account-card small{color:var(--muted);margin-top:5px;direction:ltr;text-align:right}.account-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:15px;padding:19px;margin-bottom:10px}.account-row span{color:var(--muted)}.account-row strong{direction:ltr}.wide-action{width:100%;background:#e2f5f0;color:#0c6870;border:0;border-radius:14px;padding:15px;margin:10px 0;font-weight:bold}.account-note{color:var(--muted);font-size:12px;line-height:2;margin-top:17px}
.bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:6;width:min(100%,780px);min-height:70px;padding:7px 5px calc(7px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -7px 25px #0d304114}.bottom-nav button{border:0;background:transparent;color:#8196a0;font-size:10px;display:grid;justify-items:center;gap:2px;padding:4px 0}.bottom-nav button span{font:normal 24px Arial;line-height:26px}.bottom-nav button.active{color:#0b7881;font-weight:bold}
.sheet{position:fixed;inset:0;z-index:10;display:grid;place-items:end center;background:#061c2ab0;padding:12px}.sheet-card{position:relative;background:#fff;border-radius:25px 25px 18px 18px;padding:26px 21px;width:min(100%,570px);max-height:92vh;overflow:auto;box-shadow:0 20px 60px #071b2845}.sheet-card h2{font-size:21px;margin:16px 0 8px}.sheet-card p{color:var(--muted);line-height:1.85;font-size:12px}.sheet-card label{display:block;margin:18px 0 7px;font-size:12px;color:var(--muted)}.sheet-card input,.service-link{width:100%;border:1px solid #cbdde1;border-radius:12px;padding:13px;background:#f9fcfc;outline-color:#0f8790}.close{position:absolute;left:17px;top:17px;background:#edf3f5;border:0;border-radius:10px;width:35px;height:35px;color:#56717e;font-size:22px}.pill{display:inline-block;border-radius:40px;background:#dff7ee;color:#137967;padding:6px 10px;font-size:11px;font-weight:bold}.total{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:17px;background:#e9f7f4;border-radius:13px;margin:18px 0}.total strong{color:#0b6870}.primary,.secondary{width:100%;padding:14px;margin-top:7px}.secondary{background:#edf6f6;border:0;border-radius:11px;color:#0c7180;font-weight:bold}.service-details{display:grid;gap:3px;margin:14px 0}.detail-row,.secret-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.detail-row span,.secret-row span{color:var(--muted);font-size:12px}.detail-row strong{font-size:12px;text-align:left;overflow-wrap:anywhere}.secret-row code{font-size:12px;direction:ltr}.secret-row button{flex:none}.service-link{resize:none;direction:ltr;text-align:left;unicode-bidi:plaintext;font:12px/1.6 monospace;overflow-wrap:anywhere}.link-label{margin-top:17px!important}.sheet-actions{display:grid;gap:6px;margin-top:14px}.sheet-actions .secondary{margin:0}.sheet-actions .text-button{padding:12px}.usage-box{background:#eff7f7;padding:5px 14px;border-radius:13px;margin-top:10px}.usage-box .detail-row:last-child{border:0}
@media(min-width:650px){main{padding:27px 32px 35px}.sheet{place-items:center}.sheet-card{border-radius:25px}}
.location-control{background:#f1f8f7;border-radius:14px;padding:12px;margin-top:8px}.location-control label{margin:0 0 8px}.location-control select{width:100%;border:1px solid #cbdde1;border-radius:11px;padding:12px;background:#fff;color:var(--ink)}.location-control small{display:block;color:var(--warn);margin-top:8px}
@media(max-width:390px){.stats{grid-template-columns:1fr}.stat{min-height:70px}.welcome h1{font-size:23px}.order-side strong{font-size:10px}.bottom-nav button{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}