:root{--navy:#101b31;--navy-2:#182641;--blue:#2d6cdf;--blue-soft:#eaf1ff;--ink:#19233a;--muted:#738096;--line:#e7ebf2;--surface:#fff;--canvas:#f4f6fa;--green:#19a974;--red:#d94c4c;--violet:#7656d6;--amber:#d9911b;--shadow:0 12px 35px rgba(21,34,56,.07)}
*{box-sizing:border-box}body{margin:0;font-family:"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;color:var(--ink);background:var(--canvas)}button{font:inherit}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:var(--navy);color:#fff;padding:26px 18px 20px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:0 10px 27px;border-bottom:1px solid rgba(255,255,255,.08)}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#4f8df9,#2863cf);font-weight:800;letter-spacing:-1px}.brand strong{display:block;font-size:19px}.brand span{display:block;color:#8fa2c1;font-size:12px;margin-top:2px}.sidebar nav{padding-top:16px;overflow:auto}.nav-label{font-size:11px;letter-spacing:.12em;color:#667b9e;margin:18px 12px 8px}.nav-item{width:100%;border:0;background:transparent;color:#aebbd0;text-align:left;padding:11px 13px;border-radius:10px;margin:2px 0;cursor:pointer;display:flex;gap:12px;align-items:center;transition:.2s}.nav-item span{width:22px;color:#8fa2c1;text-align:center;font-weight:700}.nav-item:hover,.nav-item.active{color:#fff;background:rgba(72,126,225,.16)}.nav-item.active{box-shadow:inset 3px 0 #4c86ef}.nav-item.active span{color:#74a4ff}.sidebar-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding:18px 10px 0;display:flex;gap:10px;align-items:center}.sidebar-foot strong,.sidebar-foot small{display:block}.sidebar-foot strong{font-size:12px}.sidebar-foot small{font-size:11px;color:#7187a9;margin-top:2px}.status-dot{width:9px;height:9px;background:#26d497;border-radius:50%;box-shadow:0 0 0 5px rgba(38,212,151,.1)}
.main{margin-left:250px;min-height:100vh}.topbar{height:91px;background:#fff;border-bottom:1px solid var(--line);padding:0 38px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:10}.topbar h1{font-size:20px;margin:2px 0 0}.eyebrow{font-size:10px;color:#8a96aa;letter-spacing:.16em;margin:0}.top-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.live-pill{padding:8px 12px;background:#effaf6;color:#16885f;font-size:12px;border-radius:999px;font-weight:600}.live-pill i{display:inline-block;width:7px;height:7px;background:#21b981;border-radius:50%;margin-right:7px}.avatar{border:0;width:38px;height:38px;border-radius:12px;background:var(--navy);color:#fff;cursor:pointer}.menu-button{display:none;border:0;background:transparent;font-size:24px}.page{padding:32px 38px 44px;max-width:1500px;margin:auto}.hidden{display:none!important}
.hero{background:linear-gradient(115deg,#172744,#203b69);border-radius:20px;padding:32px 36px;color:#fff;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;box-shadow:var(--shadow)}.hero:after{content:"";position:absolute;width:330px;height:330px;border:55px solid rgba(77,137,245,.12);border-radius:50%;right:-90px;top:-145px}.hero>div,.hero button{position:relative;z-index:1}.hero-kicker{font-size:10px;letter-spacing:.2em;color:#82a9ee}.hero h2{font-size:27px;margin:9px 0 8px}.hero p{color:#b9c9e2;margin:0;font-size:14px}.primary-button,.secondary-button{border:0;border-radius:10px;padding:11px 18px;font-weight:600;cursor:pointer}.primary-button{background:#fff;color:#244f9f}.secondary-button{background:var(--blue-soft);color:var(--blue)}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin:20px 0}.metric-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:21px;display:flex;gap:15px;align-items:center;box-shadow:0 5px 18px rgba(20,38,70,.025)}.metric-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;font-weight:800}.metric-icon.blue{background:#e8f0ff;color:var(--blue)}.metric-icon.green{background:#e8f8f2;color:var(--green)}.metric-icon.violet{background:#f0ecff;color:var(--violet)}.metric-icon.amber{background:#fff3dd;color:var(--amber)}.metric-card span,.metric-card small{display:block;color:var(--muted);font-size:12px}.metric-card strong{display:block;font-size:20px;margin:3px 0}.dashboard-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:20px}.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 5px 18px rgba(20,38,70,.025)}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:23px}.panel h3{margin:5px 0 0;font-size:17px}.section-tag{font-size:10px;letter-spacing:.12em;color:var(--blue);font-weight:700}.muted{color:var(--muted);font-size:11px}.service-row{display:grid;grid-template-columns:150px 1fr 70px;gap:17px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}.service-name b,.service-name span{display:block}.service-name b{font-size:13px}.service-name span{font-size:11px;color:var(--muted);margin-top:3px}.health-track{height:6px;background:#edf0f5;border-radius:10px;overflow:hidden}.health-track i{display:block;height:100%;width:12%;background:#aeb8c8;border-radius:inherit;transition:.5s}.health-track i.ok{width:100%;background:var(--green)}.health-track i.bad{width:35%;background:var(--red)}.badge{display:inline-flex;justify-content:center;padding:5px 9px;border-radius:99px;font-size:10px;font-weight:700}.badge.healthy{background:#e8f8f2;color:#14845d}.badge.pending{background:#f0f2f6;color:#78859a}.badge.unhealthy{background:#fdecec;color:#c13c3c}.progress-label{color:var(--blue);font-weight:700}.progress{height:7px;background:#edf0f5;border-radius:10px;margin-top:-10px}.progress i{display:block;width:25%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2d6cdf,#71a0f5)}.roadmap{list-style:none;margin:19px 0 0;padding:0}.roadmap li{display:flex;gap:12px;padding:10px 0}.roadmap li>i{width:26px;height:26px;border:1px solid #dfe4ed;border-radius:50%;display:grid;place-items:center;font-size:11px;font-style:normal;color:#8b97a9}.roadmap b,.roadmap span{display:block}.roadmap b{font-size:13px}.roadmap span{font-size:11px;color:var(--muted);margin-top:3px}.roadmap .done>i{background:var(--green);border-color:var(--green);color:#fff}.roadmap .current>i{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}.endpoints-panel{margin-top:20px}.panel-head a{font-size:11px;text-decoration:none;color:var(--blue)}.endpoint-row{display:grid;grid-template-columns:80px 1.2fr 2fr 80px;align-items:center;padding:13px 10px;border-top:1px solid var(--line);gap:14px;font-size:12px}.endpoint-row.header{color:var(--muted);font-size:10px;text-transform:uppercase}.method{color:var(--blue);font-weight:800;font-size:10px}.endpoint-row code{color:#40506b}.empty-state{min-height:66vh;background:#fff;border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}.empty-mark{width:65px;height:65px;border-radius:20px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:25px;font-weight:800;margin-bottom:18px}.empty-state h2{margin:8px 0}.empty-state p{color:var(--muted);max-width:470px;margin:0 0 22px}.overlay{display:none}
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}.overlay.show{display:block;position:fixed;inset:0;background:rgba(10,18,32,.45);z-index:15}.main{margin-left:0}.menu-button{display:block}.topbar{padding:0 18px}.page{padding:20px 16px 32px}.hero{padding:26px;align-items:flex-start;gap:20px}.hero h2{font-size:22px}.metric-grid{grid-template-columns:1fr}.service-row{grid-template-columns:120px 1fr 62px}.endpoint-row{grid-template-columns:55px 1fr 70px}.endpoint-row>*:nth-child(3){display:none}.live-pill{display:none}}
.account{display:flex;align-items:center;gap:9px}.account strong,.account span{display:block}.account strong{font-size:12px}.account span{font-size:10px;color:var(--muted);margin-top:2px}.logout-button{border:0;background:transparent;color:var(--muted);font-size:12px;cursor:pointer}.users-toolbar{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}.users-toolbar h2{margin:5px 0 4px}.users-toolbar p{margin:0;color:var(--muted);font-size:13px}.primary-solid{background:var(--blue);color:#fff;border:0;padding:11px 17px;border-radius:10px;font-weight:600;cursor:pointer}.filter-row{display:grid;grid-template-columns:1fr 150px 150px auto;gap:10px;margin-bottom:20px}.filter-row input,.filter-row select,.modal input,.modal select,.login-card input{border:1px solid #dfe4ed;border-radius:9px;padding:11px 12px;background:#fff;color:var(--ink);outline:none}.filter-row input:focus,.filter-row select:focus,.modal input:focus,.modal select:focus,.login-card input:focus{border-color:#6692e5;box-shadow:0 0 0 3px #edf3ff}.user-row{display:grid;grid-template-columns:2fr .75fr .75fr .9fr .55fr;gap:14px;align-items:center;padding:13px 9px;border-top:1px solid var(--line);font-size:12px}.user-header{color:var(--muted);font-size:10px}.user-cell{display:flex;align-items:center;gap:10px}.user-cell>i{width:34px;height:34px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-style:normal;font-weight:800}.user-cell b,.user-cell small{display:block}.user-cell small{font-weight:400;color:var(--muted);margin-top:3px}.role-tag,.status-tag{font-style:normal;padding:5px 8px;border-radius:99px;font-size:10px}.role-tag.admin{background:#ede9ff;color:var(--violet)}.role-tag.user{background:#edf2fa;color:#59708f}.status-tag.active{background:#e8f8f2;color:#14845d}.status-tag.disabled{background:#fdecec;color:#c13c3c}.status-action{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 9px;cursor:pointer;color:#53647e}.table-loading{text-align:center;color:var(--muted);padding:50px}.table-loading.error{color:var(--red)}.pagination{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font-size:11px}.pagination div{display:flex;gap:10px;align-items:center}.pagination button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 10px;cursor:pointer}.pagination button:disabled{opacity:.45;cursor:default}
.modal{border:0;border-radius:16px;padding:0;box-shadow:0 28px 80px rgba(15,26,46,.28);width:min(470px,calc(100% - 30px))}.modal::backdrop{background:rgba(12,21,38,.55)}.modal form{padding:25px}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.modal-head h3{margin:5px 0}.modal-head button{border:0;background:transparent;font-size:24px;color:var(--muted);cursor:pointer}.modal label,.login-card label{display:grid;gap:7px;font-size:12px;font-weight:600;margin:13px 0}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.form-error{min-height:18px;color:var(--red);font-size:11px;margin-top:8px}
.login-body{background:#f3f5f9;min-height:100vh}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}.login-brand-panel{background:linear-gradient(145deg,#101b31,#203d6d);color:#fff;padding:55px 7vw;display:flex;flex-direction:column;position:relative;overflow:hidden}.login-brand-panel:after{content:"";position:absolute;width:470px;height:470px;border:80px solid rgba(81,137,240,.1);border-radius:50%;right:-210px;bottom:-180px}.login-brand{display:flex;align-items:center;gap:12px;font-size:21px;position:relative;z-index:1}.login-copy{margin:auto 0;max-width:590px;position:relative;z-index:1}.login-copy>span{font-size:10px;letter-spacing:.22em;color:#83aaf0}.login-copy h1{font-size:42px;line-height:1.25;margin:17px 0}.login-copy p{color:#b7c7df;line-height:1.8}.login-features{display:flex;gap:23px;color:#b7c7df;font-size:12px;position:relative;z-index:1}.login-form-panel{display:grid;place-items:center;padding:35px}.login-card{width:min(390px,100%);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;padding:35px}.login-card h2{font-size:26px;margin:8px 0}.login-card>p{color:var(--muted);margin:0 0 22px;font-size:13px}.login-card input{font-size:14px}.login-button{width:100%;border:0;background:var(--blue);color:#fff;border-radius:10px;padding:12px;margin-top:6px;font-weight:700;cursor:pointer}.login-button:disabled{opacity:.65}.login-card>small{display:block;text-align:center;color:#9aa4b4;margin-top:17px}.mobile-brand{display:none}
@media(max-width:800px){.login-shell{grid-template-columns:1fr}.login-brand-panel{display:none}.login-form-panel{padding:20px}.mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:30px}.filter-row{grid-template-columns:1fr 1fr}.filter-row input{grid-column:1/-1}.user-row{grid-template-columns:1.8fr .8fr .7fr}.user-row>*:nth-child(4),.user-row>*:nth-child(5){display:none}.account>div{display:none}.users-toolbar{align-items:center}}
.wallet-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.wallet-summary article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}.wallet-summary span,.wallet-summary small{display:block;color:var(--muted);font-size:11px}.wallet-summary strong{display:block;font-size:21px;margin:7px 0}.wallet-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:-5px 0 20px}.wallet-tabs button{border:0;background:transparent;padding:12px 15px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}.wallet-tabs button.active{color:var(--blue);border-color:var(--blue);font-weight:700}.wallet-filter{grid-template-columns:1fr auto}.transaction-filter{grid-template-columns:180px auto;justify-content:start}.wallet-row,.transaction-row{display:grid;align-items:center;gap:14px;padding:13px 9px;border-top:1px solid var(--line);font-size:12px}.wallet-row{grid-template-columns:1.8fr 1fr .5fr 1.1fr .45fr}.transaction-row{grid-template-columns:1.7fr .55fr .9fr .9fr 1.15fr}.wallet-header,.transaction-header{font-size:10px;color:var(--muted)}.balance-value{font-size:14px}.wallet-action-shortcut{border:1px solid #cbd8ef;color:var(--blue);background:#f7faff;border-radius:7px;padding:6px 9px;cursor:pointer}.transaction-row b,.transaction-row small{display:block}.transaction-row small{color:var(--muted);font-weight:400;margin-top:3px}.transaction-type{font-style:normal;padding:5px 8px;border-radius:99px;font-size:10px}.transaction-type.credit{background:#e8f8f2;color:#14845d}.transaction-type.debit{background:#fff0ec;color:#c85a3b}.transaction-amount.credit{color:var(--green)}.transaction-amount.debit{color:#c85a3b}.form-hint{font-size:11px;color:var(--muted);background:#f6f8fb;padding:10px 12px;border-radius:8px;line-height:1.6}
@media(max-width:1000px){.wallet-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.wallet-summary{grid-template-columns:1fr 1fr}.wallet-row{grid-template-columns:1.8fr 1fr .5fr}.wallet-row>*:nth-child(4),.wallet-row>*:nth-child(5){display:none}.transaction-row{grid-template-columns:1.6fr .6fr 1fr}.transaction-row>*:nth-child(4),.transaction-row>*:nth-child(5){display:none}}
.key-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.key-summary article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}.key-summary span,.key-summary small{display:block;color:var(--muted);font-size:11px}.key-summary strong{display:block;font-size:21px;margin:7px 0}.key-filter{grid-template-columns:1fr 160px auto}.key-row{display:grid;grid-template-columns:1.6fr 1.3fr .65fr 1fr .45fr;gap:14px;align-items:center;padding:14px 9px;border-top:1px solid var(--line);font-size:12px}.key-header{color:var(--muted);font-size:10px}.key-row b,.key-row code,.key-row small{display:block}.key-row code{color:#536a8c;margin:4px 0;font-size:11px}.key-row small{color:var(--muted)}.scope-list{display:flex;gap:5px;flex-wrap:wrap}.scope-list em{font-style:normal;background:#eef3fb;color:#526986;border-radius:6px;padding:4px 6px;font-size:9px}.revoke-key{border:1px solid #f0c9c9;background:#fff8f8;color:#be4a4a;border-radius:7px;padding:6px 9px;cursor:pointer}.scope-field{border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin:14px 0}.scope-field legend{font-size:12px;font-weight:600;padding:0 5px}.scope-field label{display:flex;align-items:center;gap:8px;margin:9px 0;font-weight:400}.secret-modal{width:min(580px,calc(100% - 30px))}.secret-content{padding:32px;text-align:center}.secret-check{width:48px;height:48px;background:#e8f8f2;color:var(--green);border-radius:50%;display:grid;place-items:center;font-size:22px;margin:0 auto 15px}.secret-content h3{font-size:21px;margin:7px 0}.secret-content>p{color:var(--muted);font-size:12px}.secret-box{display:flex;align-items:center;background:#101b31;color:#dce8ff;padding:13px;border-radius:10px;margin:20px 0 9px;text-align:left;gap:10px}.secret-box code{overflow-wrap:anywhere;flex:1;font-size:11px}.secret-box button{border:0;background:#2d6cdf;color:#fff;padding:8px 12px;border-radius:7px;cursor:pointer}.copy-status{height:20px;color:var(--green);font-size:11px}.secret-content>.primary-solid{margin-top:8px}.form-error:empty{display:block}
@media(max-width:760px){.key-summary{grid-template-columns:1fr 1fr}.key-row{grid-template-columns:1.6fr 1fr .6fr}.key-row>*:nth-child(4),.key-row>*:nth-child(5){display:none}}
.sms-order-row{display:grid;grid-template-columns:1.6fr 1.35fr .55fr .7fr 1fr;gap:14px;align-items:center;padding:14px 9px;border-top:1px solid var(--line);font-size:12px}.sms-order-header{color:var(--muted);font-size:10px}.sms-order-row b,.sms-order-row small,.sms-order-row code{display:block}.sms-order-row small{color:var(--muted);margin-top:4px}.sms-order-row code{color:#405b85}.order-actions{display:flex;gap:6px}.order-actions button{border:1px solid #cbd8ef;background:#f7faff;color:var(--blue);border-radius:7px;padding:6px 8px;cursor:pointer}.order-actions .refund-order{border-color:#f0c9c9;background:#fff8f8;color:#be4a4a}.status-tag.user{background:#fff3dd;color:#a76c10}@media(max-width:900px){.sms-order-row{grid-template-columns:1.4fr 1.1fr .6fr .8fr}.sms-order-row>*:nth-child(5){display:none}}
.docs-link{text-decoration:none;font-size:12px}.audit-filter{grid-template-columns:1fr 150px 130px auto}.audit-row{display:grid;grid-template-columns:1.35fr .7fr 1.65fr .6fr .85fr;gap:14px;align-items:center;padding:13px 9px;border-top:1px solid var(--line);font-size:12px}.audit-header{color:var(--muted);font-size:10px}.audit-row b,.audit-row small,.audit-row code{display:block}.audit-row small{color:var(--muted);margin-top:3px}.audit-row code{margin-top:5px;color:#405b85;overflow-wrap:anywhere}.method-tag{font-style:normal;color:var(--blue);font-weight:700;font-size:10px}@media(max-width:900px){.audit-row{grid-template-columns:1.2fr .7fr 1.5fr .6fr}.audit-row>*:nth-child(5){display:none}}
.product-row{display:grid;grid-template-columns:1.5fr .8fr .8fr 1fr 1fr;gap:14px;align-items:center;padding:14px 9px;border-top:1px solid var(--line);font-size:12px}.product-header{color:var(--muted);font-size:10px}.product-row b,.product-row code,.product-row small{display:block}.product-row code,.product-row small{color:var(--muted);margin-top:4px}.toggle-product{margin-left:8px;border:1px solid var(--line);background:#fff;border-radius:7px;padding:5px 8px;cursor:pointer;color:#53647e}@media(max-width:900px){.product-row{grid-template-columns:1.4fr .8fr .8fr 1fr}.product-row>*:nth-child(5){display:none}}
.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.settings-grid article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}.settings-grid span{display:block;color:var(--muted);font-size:11px}.settings-grid strong{display:block;margin-top:8px;font-size:15px}.settings-note p{color:var(--muted);line-height:1.7;font-size:12px}@media(max-width:900px){.settings-grid{grid-template-columns:repeat(2,1fr)}}
.progress i{width:100%}
.live-policy-panel{margin-bottom:20px;border-color:#f0d4aa;background:linear-gradient(135deg,#fffdf8,#fff)}.live-policy-actions{display:flex;gap:10px;margin:12px 0}.provider-mode{display:inline-flex;margin-top:7px;padding:4px 7px;border-radius:6px;font-size:9px;font-style:normal;font-weight:800}.provider-mode.mock{background:#edf2fa;color:#526986}.provider-mode.live{background:#fff0ec;color:#c3462f}.live-row{border-left:3px solid #e36a45;background:#fffaf8}.live-check{display:flex!important;align-items:center;gap:9px}.live-check input{width:auto!important}.danger-button{border:0;background:#c3462f;color:#fff;padding:11px 17px;border-radius:10px;font-weight:700;cursor:pointer}.real-confirm-box{border:1px solid #efb9aa;background:#fff7f4;padding:12px;border-radius:10px;color:#9f321f}.real-confirm-box small{display:block;margin-top:7px;color:#a85848;font-weight:400}
