/* Legible type and consistent interaction feedback across the existing dashboard. */
:root{--muted:#5d6c80;--line:#e1e7ee;color:#24344b;font-size:15px}
body{font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{line-height:1.5}
h1{font-size:30px;line-height:1.25;letter-spacing:-1px;font-weight:720}h2{font-size:18px;line-height:1.4}h3{font-size:15px;line-height:1.5}
.small{font-size:13px}.muted{color:var(--muted)}code,pre{font-size:13px;line-height:1.8}
.sidebar{color:#b4c0d2;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3c5065 #101b2d}.brand{font-size:23px}.workspace{font-size:13px}.workspace small{color:#b0bed1;font-size:11px!important}.workspace-icon{width:34px;height:34px}
.nav-label{font-size:10px;color:#a2b3c9;letter-spacing:1.5px}.nav a{font-size:13px;padding:11px 13px;position:relative}.nav a.active{box-shadow:inset 3px 0 #c2f970}.nav a svg{width:18px;height:18px}.nav-spacer{min-height:16px}.sidebar-bottom{font-size:12px;color:#bbc9d9}
.topbar{min-height:77px;height:auto;padding-top:18px;padding-bottom:18px}.breadcrumb{font-size:13px;color:#637186}.top-actions .small{font-size:12px}.env,.avatar{font-size:11px}.env{color:#416334}.content{padding-top:32px}.page-head p{font-size:14px;color:#5b6a7e;line-height:1.7}.page-head{margin-bottom:26px}
.btn{font-size:13px;padding:10px 16px;min-height:42px;border-radius:8px;font-weight:630}.btn.sm{font-size:12px;min-height:34px;padding:6px 11px}.btn.primary{background:#c2f578;border-color:#aedb6c;color:#243b20}.btn.danger{color:#a52f3c}.icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;min-width:34px;min-height:34px;color:#5e6e84}.icon-button svg{width:18px;height:18px}
.notice{font-size:13px;color:#466532;line-height:1.65;padding:15px 18px;flex-wrap:wrap}.notice.warning{color:#7d5c1c}.notice a{margin-left:auto}.stat-top{font-size:13px;color:#52627a}.stat-value{font-size:34px;line-height:1.2;margin:16px 0 11px}.stat-foot{font-size:12px;color:#617086;line-height:1.65}.stat-foot span{color:#436c30}.stat-icon{width:33px;height:33px;color:#5b7545}
.card-head h2{font-size:16px}.card-head p{font-size:12px;color:#647185}.card{border-radius:12px}.card-body{line-height:1.7}.legend{font-size:11px;color:#596b7d}.chart-labels,.chart-y{font-size:11px;color:#5e6b7d}.progress-top{font-size:12px}.plan-title strong{font-size:16px}.usage-detail{font-size:13px}.usage-detail span{color:#617086}.usage-detail strong{font-weight:550}.pill{font-size:11px;color:#45652d}.pill,.badge{line-height:1.5}
th{font-size:11px;color:#56677c;letter-spacing:.65px;padding:14px 20px}td{font-size:13px;padding:16px 20px;color:#53647a}td strong{font-weight:600;color:#24354e}td .sub{font-size:12px;color:#65748a}.badge{font-size:11px;padding:4px 8px;font-weight:600;color:#4a5b71}.badge.green{color:#386a32;background:#edf7ec}.badge.amber{color:#815c15;background:#fff5df}.badge.red{color:#a33743;background:#fdeef0}.badge.blue{color:#3a5d9a;background:#edf3fd}
.empty{font-size:14px;color:#5e6e82;line-height:1.7;padding:48px 24px}.empty strong{font-size:16px;color:#334860}.empty svg{color:#70869c}.toolbar input,.toolbar select{font-size:13px}.card-foot{font-size:12px;color:#617086}.link{color:#3c6a27;font-weight:560;text-underline-offset:4px}.footer{font-size:12px;color:#627087;gap:16px;flex-wrap:wrap}
.integration h3{font-size:15px}.integration p{font-size:13px;color:#617086}.integration .small{font-size:12px}.integration{border-radius:11px}.field label{font-size:13px;color:#3f516a}.field input,.field select,.field textarea,input.search,.toolbar select{font-size:14px;line-height:1.6;border-color:#ced7e3;border-radius:8px}.field small{font-size:12px;color:#617086}.field textarea{min-height:120px}.form-error{font-size:13px;color:#a52f3c}
.auth-form>p{font-size:14px;color:#627087}.auth-form h2{font-size:29px}.auth-switch{font-size:14px;color:#5f6e81}.auth-security{font-size:12px;color:#637084}.auth-art p{font-size:15px;color:#b1c1d4}.auth-foot{font-size:13px;color:#b0c0d4}.network-node{font-size:12px}.auth-form{max-width:390px}
.modal-head h2{font-size:19px}.modal-body{font-size:14px}.dns-record code{font-size:12px}.record-title{font-size:13px}.dns-record p{font-size:12px;color:#617086}.timeline-item{font-size:13px}.timeline-item p{color:#5e6d82}.plan ul{font-size:13px;color:#566a80}.plan-price span{font-size:13px;color:#617086}#toast{font-size:14px;line-height:1.6}.content [style*="font-size:9px"]{font-size:12px!important}
/* Keep motion brief; hover only runs on devices with an actual hover pointer. */
.btn,.icon-button,.nav a,.nav a svg,.stat,.card,.integration,.plan,.link,tbody tr,.mail-folder,.mail-row,.mail-star,.mail-avatar{transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .2s ease,transform .2s ease}
input,select,textarea{transition:border-color .18s ease,box-shadow .18s ease}.progress div{transition:width .5s ease;animation:progress-reveal .6s ease both;transform-origin:left}.content{animation:page-enter .3s ease both}.stats .stat{animation:page-enter .4s ease both}.stats .stat:nth-child(2){animation-delay:40ms}.stats .stat:nth-child(3){animation-delay:80ms}.stats .stat:nth-child(4){animation-delay:120ms}dialog[open]{animation:dialog-enter .2s ease both}#toast.show{animation:page-enter .2s ease both}
.btn:active:not(:disabled){transform:translateY(0) scale(.98)}input:focus,textarea:focus,select:focus{outline:2px solid #719e50;outline-offset:2px;box-shadow:0 0 0 5px #a1c98020}::selection{background:#d7edbd;color:#20381e}
.mobile-menu{display:none}
@media(hover:hover) and (pointer:fine){.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 13px #23374a15;filter:none;border-color:#a5b59b}.btn.primary:hover:not(:disabled){background:#b5ed65;box-shadow:0 5px 18px #8abf4630}.icon-button:hover:not(:disabled){background:#edf3e8;color:#3b6528}.nav a:hover{transform:translateX(3px);background:#233248;color:#f0f5fc}.nav a:hover svg{transform:translateX(2px)}.nav a.active:hover{background:#304b3d;color:#dcffc0}.stat:hover{transform:translateY(-4px);border-color:#bdd3ad;box-shadow:0 10px 25px #21394c0c}.card:hover,.integration:hover,.plan:hover{border-color:#c6d4c0;box-shadow:0 6px 22px #21394c08}.integration:hover .integration-icon{transform:translateY(-2px)}tbody tr:hover{background:#f5f9ef}.link:hover{color:#254c12;text-decoration:underline}.brand:hover img{transform:rotate(-7deg)}.brand img{transition:transform .2s ease}}
@keyframes page-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes dialog-enter{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes progress-reveal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-value{font-size:32px}.nav a{padding:10px;font-size:12px;gap:9px}.workspace{padding:10px;font-size:12px}.sidebar{padding-top:22px}.card-head{flex-wrap:wrap}}
@media(max-width:760px){body{font-size:14px}.content{padding:25px 16px}.sidebar{width:240px}.nav a{font-size:13px;padding:11px 13px}.page-head{flex-wrap:wrap;align-items:center;gap:16px}.page-head h1{font-size:27px}.page-head p{font-size:13px}.page-head .btn{font-size:12px;padding:10px 13px}.stat{padding:16px}.stat-top{font-size:12px}.stat-value{font-size:29px}.stat-foot{font-size:11px}.stat-icon{width:26px;height:26px}.legend{font-size:11px}.chart-labels,.chart-y{font-size:10px}.breadcrumb{font-size:12px;gap:7px}.topbar{min-height:68px;padding:14px 16px}.top-actions{gap:8px}.env{font-size:10px}.notice{font-size:12px}.form-grid{gap:0}.field input,.field textarea,.field select{font-size:16px}.auth-art h1{font-size:31px}.auth-panel{padding:32px 24px}.auth-form h2{font-size:26px}.card-foot{gap:12px;flex-wrap:wrap}.usage-detail{flex-wrap:wrap}.auth-form .btn{font-size:14px}.footer{font-size:11px}th,td{padding:14px 16px}}
@media(max-width:760px){.mobile-menu{display:inline-flex}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.btn:hover,.stat:hover,.nav a:hover,.nav a:hover svg,.brand:hover img{transform:none!important}}