:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#23334b;background:#f7f9fc;--line:#e7ecf2;--muted:#8995a6;--green:#bdf578}*{box-sizing:border-box}body{margin:0;font-size:13px}button,input,select,textarea{font:inherit}button,a{cursor:pointer}a{color:inherit}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #77a9ef;outline-offset:3px}h1,h2,h3,p{margin-top:0}h1{font-size:28px;letter-spacing:-.8px;margin-bottom:8px}h2{font-size:15px;letter-spacing:-.3px}h3{font-size:13px}p{line-height:1.7}.muted{color:var(--muted)}.small{font-size:11px}.mono,code,pre{font-family:ui-monospace,Consolas,monospace}code{font-size:11px;background:#eef2f6;padding:3px 6px;border-radius:5px}pre{overflow:auto;background:#122035;color:#dce8fb;padding:18px;border-radius:8px;line-height:1.8;font-size:11px;white-space:pre-wrap;word-break:break-all}.shell{display:grid;grid-template-columns:225px minmax(0,1fr);min-height:100vh}.sidebar{background:#101b2d;color:#97a7bd;padding:28px 16px 20px;position:fixed;width:225px;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:10px;color:white;font-size:22px;font-weight:700;letter-spacing:-.8px;text-decoration:none;padding:0 10px}.brand img{width:33px;height:33px}.brand small{font-size:9px;letter-spacing:2px;color:#91a5bc;display:block;margin-top:4px}.workspace{border:1px solid #2e3a4d;border-radius:8px;margin:30px 4px 23px;padding:12px;display:flex;align-items:center;gap:10px;color:#edf3fe;font-size:11px}.workspace-icon{width:30px;height:30px;border-radius:7px;background:#2c3c50;display:grid;place-items:center;color:#d6efb5;font-weight:700;flex-shrink:0}.workspace>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-label{font-size:9px;letter-spacing:1.7px;padding:0 14px;margin:16px 0 10px;color:#697b96;font-weight:700}.nav{display:flex;flex-direction:column;gap:4px}.nav a{display:flex;gap:12px;align-items:center;padding:10px 14px;text-decoration:none;font-size:11px;border-radius:6px;font-weight:500}.nav a:hover{color:white;background:#1d2a3e}.nav a.active{color:#d3ffae;background:#273c35}.nav svg{width:17px;height:17px;flex-shrink:0}.nav-spacer{flex:1;min-height:25px}.sidebar-bottom{border-top:1px solid #2a3648;padding:19px 9px 0;font-size:10px;display:flex;gap:8px;align-items:center}.dot{height:6px;width:6px;background:#9fe88b;border-radius:50%;display:inline-block}.main{grid-column:2;min-width:0}.topbar{height:77px;border-bottom:1px solid var(--line);background:white;padding:0 36px;display:flex;align-items:center;justify-content:space-between}.breadcrumb{font-size:11px;color:#8b94a4;display:flex;align-items:center;gap:12px}.breadcrumb strong{font-weight:500;color:#27344a}.top-actions{display:flex;gap:17px;align-items:center}.env{border:1px solid #e3e8e0;background:#f9fcf4;color:#6c865c;padding:6px 10px;border-radius:5px;font-size:9px}.avatar{border:1px solid #d8e5d0;background:#edf5e7;color:#536d44;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700}.icon-button{border:0;background:none;color:#7c8899;padding:6px}.icon-button svg{width:18px;height:18px}.content{max-width:1550px;margin:auto;padding:34px 36px 40px}.page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}.page-head p{margin:0;font-size:11px;color:var(--muted)}.btn{border:1px solid #dfe5eb;background:white;color:#34425a;border-radius:6px;padding:10px 14px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;white-space:nowrap}.btn svg{width:14px;height:14px}.btn.primary{background:var(--green);border-color:#b5e76e;color:#2b3e28}.btn.danger{color:#b25757;border-color:#efd9d9}.btn.sm{padding:6px 9px;font-size:10px}.btn:hover{filter:brightness(.97)}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.notice{display:flex;gap:12px;align-items:center;background:#f0f7e9;border:1px solid #deebd0;border-radius:8px;padding:13px 16px;font-size:11px;color:#637d4d;margin-bottom:24px}.notice svg{width:18px;height:18px;flex-shrink:0}.notice.warning{background:#fff8e9;border-color:#efe2c4;color:#927538}.notice p{margin:0}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:24px}.stat{background:white;border:1px solid var(--line);border-radius:9px;padding:20px}.stat-top{display:flex;align-items:center;justify-content:space-between;color:#7c8798;font-size:10px}.stat-icon{background:#f2f6ed;color:#82976c;border-radius:6px;width:29px;height:29px;display:grid;place-items:center}.stat-icon svg{width:15px;height:15px}.stat-value{font-size:30px;font-weight:650;letter-spacing:-1px;margin:12px 0 8px}.stat-foot{font-size:9px;color:#8b95a4}.stat-foot span{color:#6b9356}.card{background:white;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:24px}.card-head{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #f0f3f7}.card-head h2{margin:0;font-size:13px}.card-head p{font-size:10px;margin:5px 0 0;color:var(--muted)}.card-body{padding:22px}.grid2{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(265px,1fr);gap:23px}.grid-even{display:grid;grid-template-columns:1fr 1fr;gap:23px}.legend{display:flex;gap:14px;font-size:9px;color:#798594}.legend i{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:5px;background:#a6dc79}.legend i.second{background:#7a9bb7}.chart{height:220px;position:relative;padding-left:32px}.chart svg{width:100%;height:185px;overflow:visible}.chart-grid{stroke:#edf0f5;stroke-dasharray:4 4}.chart-labels{display:flex;justify-content:space-between;font-size:9px;color:#929bab;padding-top:6px}.chart-y{position:absolute;left:0;top:0;height:185px;display:flex;flex-direction:column;justify-content:space-between;font-size:9px;color:#929bab}.progress-top{display:flex;justify-content:space-between;gap:5px;font-size:10px;margin:19px 0 10px}.progress{height:6px;background:#edf1e8;border-radius:10px;overflow:hidden}.progress div{height:100%;background:#b3e781;border-radius:10px}.plan-title{display:flex;justify-content:space-between;align-items:center}.plan-title strong{font-size:14px}.pill{display:inline-flex;padding:4px 7px;border-radius:4px;font-size:9px;font-weight:600;background:#f0f5e9;color:#70884e;border:1px solid #e3ebd5}.usage-detail{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #eef1f5;font-size:11px}.usage-detail:last-child{border:0}.usage-detail span{color:#8b94a4}.usage-detail strong{font-weight:500}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:#8b96a5;font-weight:600;background:#fbfcfe;padding:12px 22px;border-bottom:1px solid var(--line)}td{padding:15px 22px;border-bottom:1px solid #f0f3f7;font-size:11px;color:#637087}tbody tr:last-child td{border:0}td strong{color:#304058;font-weight:530}td .sub{font-size:9px;color:#929bab;margin-top:5px}.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:4px;font-size:9px;font-weight:550;background:#f2f4f8;color:#7d8796}.badge:before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor}.badge.green{background:#eef8ed;color:#53834e}.badge.amber{background:#fff7e6;color:#ac8738}.badge.red{background:#fdefef;color:#bc6868}.badge.blue{background:#edf3fd;color:#6384ba}.empty{text-align:center;padding:48px 20px;color:#8a96a8;font-size:11px;white-space:normal}.empty svg{width:27px;height:27px;color:#b5c5d3;margin-bottom:13px}.empty strong{display:block;color:#54657b;font-size:13px;margin-bottom:7px}.empty p{margin-bottom:17px}.toolbar{padding:15px 22px;display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line)}.search{max-width:340px;width:100%}.toolbar input,.toolbar select{padding:9px 12px;font-size:11px}.card-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;color:#8996a9}.link{border:0;background:none;color:#6b8955;padding:0;font:inherit;cursor:pointer;text-decoration:none}.integration{display:flex;gap:14px;align-items:flex-start;padding:20px;border:1px solid var(--line);border-radius:8px;background:white}.integration-icon{background:#f2f5ed;border-radius:7px;padding:10px;color:#7b9868}.integration-icon svg{width:19px;height:19px}.integration h3{margin-bottom:6px;font-size:12px}.integration p{color:#8a95a5;font-size:10px;margin:0 0 13px}.footer{display:flex;justify-content:space-between;color:#98a1ae;font-size:9px;padding-top:28px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:17px}.field label{font-size:11px;font-weight:600;color:#526074}.field input,.field select,.field textarea,input.search,.toolbar select{width:100%;border:1px solid #dfe5ec;border-radius:6px;padding:11px 12px;background:#fff;color:#243249;font-size:12px}.field textarea{resize:vertical;min-height:100px;line-height:1.6}.field small{color:#95a0af;font-size:10px}input:focus,select:focus,textarea:focus{outline:2px solid #afcd94;outline-offset:1px}.form-error{color:#b54b4b;font-size:12px;margin:10px 0}.auth-page{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:white}.auth-art{background:#101d30;color:white;padding:55px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.auth-art .brand{padding:0}.auth-art h1{font-size:49px;letter-spacing:-2px;line-height:1.15;max-width:470px;margin:80px 0 24px}.auth-art h1 em{font-style:normal;color:#c1f58b}.auth-art p{color:#8fa3bc;max-width:380px;font-size:13px}.auth-network{border:1px solid #30465a;padding:24px;border-radius:12px;margin:32px 0;max-width:430px;background:#17283b}.network-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.network-node{background:#243a4a;padding:14px;border-radius:8px;font-size:10px;color:#d6f1bc}.network-line{flex:1;height:1px;background:#789c67}.auth-foot{font-size:11px;color:#6e819a}.auth-panel{display:flex;align-items:center;justify-content:center;padding:40px 32px}.auth-form{max-width:360px;width:100%}.auth-form h2{font-size:26px;letter-spacing:-.8px;margin-bottom:10px}.auth-form>p{font-size:12px;color:#939dac;margin-bottom:28px}.auth-form .btn{width:100%;margin-top:6px;padding:13px}.auth-switch{text-align:center;margin-top:22px;font-size:12px;color:#8a96a6}.auth-security{text-align:center;color:#a0a8b2;font-size:10px;margin-top:30px}dialog{border:1px solid var(--line);border-radius:12px;padding:0;max-width:760px;width:calc(100% - 32px);box-shadow:0 30px 90px #0c192544;max-height:90vh;color:#23334b}dialog::backdrop{background:#0b182a88;backdrop-filter:blur(3px)}.modal-head{padding:22px 25px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0}.modal-body{padding:24px}.modal-body pre{max-height:280px}.dns-record{padding:17px;border:1px solid var(--line);border-radius:7px;margin-bottom:12px}.record-title{display:flex;justify-content:space-between;gap:10px;font-size:11px;margin-bottom:8px}.dns-record code{display:block;word-break:break-all;white-space:normal;line-height:1.6;padding:9px;margin-top:7px}.dns-record p{font-size:10px;color:#929aa6;margin:10px 0 0}.timeline{border-left:1px solid #dce7d5;margin-left:5px;padding-left:20px}.timeline-item{position:relative;margin-bottom:20px;font-size:11px}.timeline-item:before{content:'';position:absolute;left:-24px;top:3px;width:7px;height:7px;background:#aad57f;border-radius:50%}.timeline-item p{margin:6px 0;color:#8693a4}.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.plan{padding:25px;border:1px solid var(--line);border-radius:9px;background:white}.plan.current{border-color:#a6d082;background:#fcfff8}.plan-price{font-size:30px;letter-spacing:-1px;margin:20px 0}.plan-price span{font-size:11px;color:#8b96a5;letter-spacing:0}.plan ul{padding:0;list-style:none;font-size:11px;color:#718197;line-height:2.5}.plan li:before{content:'✓';color:#6d994e;margin-right:8px}#toast{position:fixed;bottom:24px;right:24px;max-width:400px;background:#1a2b3c;color:white;border:1px solid #324658;border-radius:8px;padding:14px 20px;z-index:99;box-shadow:0 6px 24px #15243522;font-size:12px;display:none}#toast.show{display:block}.mobile-menu{display:none}.break{word-break:break-all;white-space:normal}.section-space{margin-top:24px}.metric-large{font-size:42px;letter-spacing:-2px}.metric-large small{font-size:15px;letter-spacing:0;color:#8995a6}
@media(max-width:1100px){.shell{grid-template-columns:195px minmax(0,1fr)}.sidebar{width:195px;padding-left:9px;padding-right:9px}.content{padding:26px 24px}.topbar{padding:0 24px}.stats{gap:12px}.stat{padding:16px}.grid2{grid-template-columns:1fr}.stat-value{font-size:25px}.auth-art{padding:35px}.auth-art h1{font-size:40px}}
@media(max-width:760px){.shell{display:block}.sidebar{transform:translateX(-100%);transition:transform .2s;width:225px}.shell.menu-open .sidebar{transform:translateX(0);box-shadow:10px 0 60px #13243c55}.main{width:100%}.mobile-menu{display:block}.topbar{height:65px;padding:0 16px}.breadcrumb{gap:6px;font-size:10px}.top-actions{gap:9px}.top-actions .small{display:none}.content{padding:25px 16px}.page-head{align-items:flex-start;gap:10px}.page-head h1{font-size:23px}.page-head .btn{padding:9px 11px;font-size:10px}.stats{grid-template-columns:1fr 1fr;gap:12px}.stat-value{font-size:26px}.stat{padding:16px}.stat-top{font-size:10px}.grid-even,.form-grid,.plans{grid-template-columns:1fr}.card-head,.card-body{padding:18px}.toolbar{padding:14px;flex-wrap:wrap}th,td{padding:13px 16px}.footer{gap:10px;font-size:9px}.auth-page{display:block}.auth-art{padding:25px}.auth-art h1{font-size:29px;margin:28px 0 14px;max-width:380px}.auth-art p,.auth-network,.auth-foot{display:none}.auth-panel{padding:36px 24px}.notice{align-items:flex-start;font-size:10px}.env{font-size:9px}.modal-body{padding:18px}.page-head p{font-size:11px;line-height:1.6}.legend{gap:8px}.chart{padding-left:26px}.workspace{margin-top:25px}.nav a{padding-top:9px;padding-bottom:9px}}
