:root{
  --bg:#f5f8fd;--surface:#fff;--surface-soft:#f8fbff;--line:#e5ecf5;--line-strong:#d4deeb;
  --text:#10203b;--muted:#71809a;--muted-2:#98a6ba;--sidebar:#0b2245;--sidebar-deep:#071a35;
  --primary:#1677ff;--primary-2:#0d63e7;--primary-soft:#eaf3ff;--cyan:#13a8ff;--green:#18b786;
  --green-soft:#e9fbf4;--red:#ef4d5b;--red-soft:#fff0f2;--amber:#f59e0b;--amber-soft:#fff6df;
  --violet:#7357f6;--violet-soft:#f0edff;--shadow:0 10px 30px rgba(28,61,112,.08);--shadow-sm:0 4px 14px rgba(28,61,112,.055);
  --radius:16px;--radius-sm:11px;--sidebar-w:236px
}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif}body{min-width:0}a{color:var(--primary);text-decoration:none}button,input,select,textarea{font:inherit}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.muted{color:var(--muted)}
.shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr)}aside{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,var(--sidebar-deep) 0%,var(--sidebar) 66%,#0d2a55 100%);color:#fff;padding:20px 14px 16px;display:flex;flex-direction:column;z-index:60;box-shadow:12px 0 30px rgba(16,32,59,.05)}
.brand{display:flex;align-items:center;gap:12px;padding:2px 8px 23px}.brand-mark{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#3aa7ff,#146cff 58%,#694bff);box-shadow:0 8px 18px rgba(22,119,255,.35);font-size:11px;font-weight:900;letter-spacing:.4px}.brand-copy b{display:block;font-size:18px;letter-spacing:.2px}.brand-copy small{display:block;color:#91a7c7;font-size:11px;margin-top:2px}.sidebar-close{display:none;margin-left:auto;background:transparent;border:0;color:#dfeaff;padding:5px}
nav{display:grid;gap:5px}.nav-item{display:flex;align-items:center;gap:13px;color:#d4dfed;padding:11px 14px;border-radius:11px;font-weight:650;transition:.18s ease}.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}.nav-item.active{background:linear-gradient(100deg,#1476f6,#0d8fc6);color:#fff;box-shadow:0 9px 22px rgba(0,116,255,.22)}.nav-icon{width:23px;height:23px;display:grid;place-items:center;color:#c6d6ea}.nav-item.active .nav-icon{color:#fff}.nav-icon svg{width:19px;height:19px}
.aside-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding:18px 8px 2px;display:grid;grid-template-columns:42px minmax(0,1fr) 30px;gap:10px;align-items:center}.user-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.17);font-size:18px;font-weight:800}.aside-user{min-width:0}.aside-user b{display:block;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aside-user span{display:block;color:#9fb2cc;font-size:11px}.logout-btn{display:grid;place-items:center;border:0;background:transparent;color:#c7d5e9;padding:5px;cursor:pointer}.logout-btn:hover{color:#fff}
main{min-width:0;padding:22px 26px 26px}header{max-width:1540px;margin:0 auto 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.title-wrap{display:flex;align-items:center;gap:10px}.title-wrap h1{font-size:28px;line-height:1.1;margin:0;letter-spacing:-.5px}.page-subtitle{margin:5px 0 0;color:var(--muted);font-size:13px}.menu-toggle{display:none}.header-actions{display:flex;gap:10px}.top-action{min-height:42px;padding:0 17px}.plus{font-size:22px;font-weight:400;line-height:1}.page-frame{max-width:1540px;margin:0 auto}.page-footer{max-width:1540px;margin:18px auto 0;padding:0 4px;display:flex;justify-content:space-between;color:#a0aec0;font-size:11px}
button,.btn{appearance:none;border:0;border-radius:10px;background:var(--primary);color:#fff;padding:9px 15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;font-weight:700;white-space:nowrap;box-shadow:0 5px 13px rgba(22,119,255,.16);transition:.16s ease}.btn:hover,button:hover{transform:translateY(-1px);filter:brightness(.99)}button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn.primary{background:linear-gradient(180deg,#1c80ff,#0969ef)}.btn.green{background:linear-gradient(180deg,#1ebd8b,#0ba976)}.btn.warn{background:var(--amber)}.btn.danger{background:var(--red)}.btn.ghost,.btn.secondary{background:#fff;color:#24344e;border:1px solid var(--line-strong);box-shadow:0 3px 10px rgba(28,61,112,.035)}.btn.small{min-height:31px;padding:5px 10px;font-size:12px;border-radius:8px}.link-btn{background:transparent;color:var(--muted);padding:0;min-height:0;box-shadow:none}
input,select,textarea{width:100%;border:1px solid var(--line-strong);background:#fff;color:var(--text);border-radius:9px;padding:9px 11px;min-height:40px;outline:none;transition:.16s ease}input:focus,select:focus,textarea:focus{border-color:#7db4ff;box-shadow:0 0 0 3px rgba(22,119,255,.11)}textarea{min-height:110px;resize:vertical}label>span{display:block;color:#43526d;font-size:12px;font-weight:650;margin-bottom:6px}label>small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.stack{display:grid;gap:12px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-grid .wide{grid-column:1/-1}.inline-form{display:flex;align-items:center;gap:8px}.inline-form input,.inline-form select{width:auto;min-width:180px}.compact-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.compact-form label{min-width:210px}.compact-form label.grow{flex:1 1 380px}.form-line{display:grid;grid-template-columns:1fr 1fr;gap:12px}.input-suffix{display:flex}.input-suffix input{border-radius:9px 0 0 9px}.input-suffix em{display:flex;align-items:center;background:#f8fbff;border:1px solid var(--line-strong);border-left:0;border-radius:0 9px 9px 0;padding:0 11px;color:var(--muted);font-style:normal}.inline-checks{display:flex;gap:13px;flex-wrap:wrap}.inline-checks label{display:inline-flex;align-items:center;gap:6px;color:#34425a}.inline-checks input{width:auto;min-height:0}
.card,.panel-card,.panel-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm);margin:0 0 16px}.card h2,.panel-section h2{margin:0 0 10px;font-size:18px}.card h3,.panel-section h3{margin:0 0 8px}.section-title,.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-title h2,.section-head h2{margin:0}.section-title p,.section-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.page-intro{background:linear-gradient(120deg,#f8fbff,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:15px 18px;margin-bottom:15px;display:flex;align-items:center;justify-content:space-between;gap:12px}.page-intro b{font-size:17px}.page-intro span{display:block;color:var(--muted);margin-top:2px}.intro-actions{display:flex;gap:8px;flex-wrap:wrap}.toolbar,.section-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}.toolbar-actions,.row-actions,.server-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.row-actions form,.server-actions form{margin:0}.flash{padding:12px 14px;border-radius:12px;background:var(--green-soft);border:1px solid #cdeee2;color:#087a5b;margin-bottom:14px}.flash.error{background:var(--red-soft);border-color:#ffd5da;color:#b32735}.note,.notice-inline{padding:11px 13px;border-radius:11px;background:#f7faff;border:1px solid var(--line);color:#53627b}.danger-note{background:var(--red-soft);border-color:#ffd9dd;color:#a93643}.hint{font-size:11px;color:var(--muted);margin-top:6px}
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:16px}.metric{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px 17px;box-shadow:var(--shadow-sm);min-width:0}.metric span{display:block;color:#66758c;font-size:12px}.metric b{display:block;font-size:28px;line-height:1.2;margin-top:8px}.metric:after{content:"较上月  0%";display:block;margin-top:11px;padding-top:9px;border-top:1px solid #edf2f7;color:#8a99af;font-size:11px}.metric:nth-child(1){box-shadow:inset 0 3px 0 #2387ff,var(--shadow-sm)}.metric:nth-child(2){box-shadow:inset 0 3px 0 #755cf7,var(--shadow-sm)}.metric:nth-child(3){box-shadow:inset 0 3px 0 #1fba86,var(--shadow-sm)}.metric:nth-child(4){box-shadow:inset 0 3px 0 #f3a12c,var(--shadow-sm)}.metric:nth-child(5){box-shadow:inset 0 3px 0 #20b8c8,var(--shadow-sm)}.metric:nth-child(6){box-shadow:inset 0 3px 0 #ee5967,var(--shadow-sm)}
.dashboard-hero{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm);margin-bottom:16px}.dashboard-hero-title{display:flex;align-items:center;gap:12px}.dashboard-hero-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:24px}.dashboard-hero-title b{font-size:18px}.dashboard-hero-title span{display:block;color:var(--muted);font-size:12px;margin-top:2px}.dashboard-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.dashboard-actions .btn{min-height:52px;font-size:14px}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.summary-list{display:grid}.summary-list .item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid #edf1f6}.summary-list .item:last-child{border-bottom:0}.summary-list .item b{font-size:13px}.empty,.empty-state{text-align:center;color:var(--muted);padding:36px 14px}.empty-state{border:1px dashed var(--line-strong);border-radius:12px;background:#fbfdff}.alert-list{display:grid;gap:8px;margin-bottom:15px}.alert-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;color:var(--text)}
.badge,.chip{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;background:#eef2f7;color:#596780}.badge.ok{background:var(--green-soft);color:#0b8b68}.badge.danger{background:var(--red-soft);color:#cc3d4b}.badge.warn{background:var(--amber-soft);color:#b16b00}.badge.info{background:var(--primary-soft);color:#1668d9}.badge.neutral{background:#f0f3f7;color:#657187}.text-ok{color:#0a9b70}.text-warn{color:#c47705}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.table-wrap table,table{width:100%;border-collapse:collapse;min-width:760px}.table-wrap th,.table-wrap td,table th,table td{padding:11px 12px;border-bottom:1px solid #edf1f6;text-align:left;vertical-align:middle}.table-wrap th,table th{background:#f8faff;color:#67758d;font-size:11px;font-weight:750}.table-wrap td,table td{font-size:12px}.table-wrap tr:last-child td,table tr:last-child td{border-bottom:0}
/* customer opening */
.open-progress{display:flex;align-items:center;gap:0;margin:0 0 16px;padding:0 12px}.open-progress .p-step{display:flex;align-items:center;gap:8px;color:#6d7b91;font-size:12px;font-weight:700;white-space:nowrap}.open-progress .p-step:after{content:"";height:1px;background:#d9e5f4;width:70px;margin:0 12px}.open-progress .p-step:last-child:after{display:none}.open-progress .p-no{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #d8e2ef;color:#63728a}.open-progress .active{color:#1a5fc6}.open-progress .active .p-no{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 6px 14px rgba(22,119,255,.25)}
.open-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}.open-main{display:grid;gap:14px}.open-section{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm)}.open-section-title{display:flex;align-items:center;gap:11px;margin-bottom:13px}.section-no{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(180deg,#eaf4ff,#dfeeff);color:#176de6;font-size:18px;font-weight:800}.open-section-title b{display:block;font-size:17px}.open-section-title span{display:block;color:var(--muted);font-size:11px}.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mode-picker label{position:relative;cursor:pointer}.mode-picker input{position:absolute;opacity:0;pointer-events:none}.mode-picker span{display:block;min-height:93px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;padding:16px 16px 14px;transition:.15s}.mode-picker b{display:block;font-size:15px}.mode-picker small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.mode-picker input:checked+span{border-color:#2484ff;background:#f3f8ff;box-shadow:inset 0 0 0 1px #2484ff,0 6px 18px rgba(22,119,255,.08)}
.ip-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:340px;overflow:auto}.ip-choice{position:relative;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:#fff;cursor:pointer}.ip-choice:hover{border-color:#b9d4f8;background:#fbfdff}.ip-choice input{width:17px;height:17px;min-height:0}.ip-choice-main{min-width:0;flex:1}.ip-choice-main b{display:block}.ip-choice-main small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.protocol-count{font-size:10px;border-radius:999px;padding:3px 7px;white-space:nowrap}.protocol-count.ready{background:var(--green-soft);color:#06875f}.protocol-count.missing{background:var(--amber-soft);color:#aa6800}.open-preview{position:sticky;top:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.preview-head{padding:20px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}.preview-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#e9f3ff;color:#1471ef;font-size:22px}.preview-head h2{margin:0;font-size:18px}.preview-head p{margin:3px 0 0;color:var(--muted);font-size:11px}.preview-body{padding:18px 20px}.preview-lines{display:grid;gap:0;border:1px solid var(--line);border-radius:11px;overflow:hidden}.preview-line{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;background:#fff;border-bottom:1px solid #edf1f6}.preview-line:last-child{border-bottom:0}.preview-line span{color:var(--muted);font-size:11px}.preview-line b{font-size:12px;text-align:right}.preview-note{margin-top:14px;background:#eef6ff;border-radius:11px;padding:13px;color:#476482;font-size:11px}.preview-note b{display:block;color:#1767c7;margin-bottom:5px}.primary-submit{width:100%;min-height:48px;font-size:14px;margin-top:4px}.new-customer-inline{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;padding:12px;border:1px dashed #cbd9ea;border-radius:11px;background:#f9fbfe}.compact-details{border:1px solid var(--line);border-radius:11px;background:#fff;padding:0 13px;margin-top:12px}.compact-details summary{cursor:pointer;padding:11px 0;font-weight:700;color:#42516a}.compact-details .form-line{padding:0 0 12px}
.delivery-card{border:1px solid #b9d8ff;background:linear-gradient(180deg,#fff,#f8fbff)}.delivery-text{white-space:pre-wrap;background:#0e1b30;color:#eef5ff;border-radius:12px;padding:16px;max-height:360px;overflow:auto;font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
/* server management */
.server-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px;margin-bottom:15px}.server-stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px;box-shadow:var(--shadow-sm)}.server-stat span{display:block;color:var(--muted);font-size:11px}.server-stat b{display:block;font-size:25px;margin-top:6px}.server-quick{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);margin-bottom:15px}.server-quick-title{display:flex;gap:11px;align-items:center}.server-quick-title i{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-style:normal;font-size:22px}.server-quick-title b{font-size:17px}.server-quick-title span{display:block;color:var(--muted);font-size:11px}.server-quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.server-main-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:15px}.server-table-card,.server-side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px}.server-filter-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.server-filter-row .filters{display:flex;gap:7px;flex-wrap:wrap}.server-filter-row select,.server-filter-row input{min-height:36px;padding:7px 9px;width:auto}.server-list table{min-width:950px}.status-dot{display:inline-flex;align-items:center;gap:6px}.status-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#a8b2c1}.status-dot.on{color:#079765}.status-dot.on:before{background:#18b786}.status-dot.off{color:#e14b57}.status-dot.off:before{background:#ef5964}.server-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.control-tile{display:block;border:1px solid var(--line);border-radius:11px;padding:12px;background:#fbfdff;color:var(--text)}.control-tile:hover{border-color:#a9cfff;background:#f6faff}.control-tile b{display:block;font-size:12px}.control-tile span{display:block;color:var(--muted);font-size:10px;margin-top:3px}.protocol-mini-list{display:grid;gap:7px;margin-top:10px}.protocol-mini{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:9px;padding:9px 10px}.protocol-mini b{font-size:11px}.context-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.context-tabs a{padding:7px 11px;background:#fff;border:1px solid var(--line);border-radius:9px;color:#53627b;font-size:11px}.context-tabs a.active{background:var(--primary-soft);color:#1169de;border-color:#bbd8ff}
.server-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.server-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm)}.server-card-head{display:flex;justify-content:space-between;gap:10px}.server-card-head h2{margin:0;font-size:16px}.server-card-head p{margin:4px 0 0;color:var(--muted);font-size:11px}.server-live{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 8px;font-size:10px}.server-live:before{content:"";width:7px;height:7px;border-radius:50%}.server-live.on{background:var(--green-soft);color:#098d67}.server-live.on:before{background:#15b77f}.server-live.off{background:#f2f4f7;color:#7c879a}.server-live.off:before{background:#9ca8b8}.server-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0}.server-facts>div{background:#f8faff;border:1px solid #edf2f7;border-radius:9px;padding:8px}.server-facts span{display:block;color:var(--muted);font-size:9px}.server-facts b{display:block;font-size:11px;margin-top:3px;word-break:break-word}.chain-mini{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border:1px solid var(--line);border-radius:9px;background:#fbfdff;padding:8px 9px;font-size:10px}.chain-mini i{font-style:normal;color:#a0adbf}.server-card-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.server-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.server-kpis>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}.server-kpis span{display:block;color:var(--muted);font-size:10px}.server-kpis b{font-size:22px}.operation-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.operation-strip .op{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff;color:var(--text)}.operation-strip .op b{display:block;font-size:11px}.operation-strip .op small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.mini-stat{background:#f8faff;border:1px solid var(--line);border-radius:10px;padding:9px}.mini-stat span{display:block;color:var(--muted);font-size:9px}.mini-stat b{display:block;margin-top:3px}.topology{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.topology-node{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff}.topology-arrow{color:#97a3b5}.protocol-list{display:grid;gap:9px}.protocol-item{border:1px solid var(--line);border-radius:11px;padding:12px}.protocol-item .top{display:flex;justify-content:space-between;gap:10px}.copy-box{display:flex;gap:7px}.copy-box code{flex:1;background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:8px;overflow:auto}.codearea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.advanced-box{padding:0!important}.advanced-box>summary{cursor:pointer;padding:13px 16px;font-weight:700}.advanced-content{padding:0 16px 15px}
/* line quality */
.quality-info{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(90deg,#eef6ff,#f9fbff);border:1px solid #d9eaff;border-radius:13px;padding:13px 15px;margin-bottom:15px}.quality-info i{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#1977f3;color:#fff;font-style:normal;font-weight:900}.quality-info b{display:block}.quality-info span{display:block;color:#5f7392;font-size:11px;margin-top:3px}.probe-layout{display:grid;grid-template-columns:1fr 1fr;gap:15px}.probe-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm)}.probe-card-head{display:flex;align-items:center;gap:11px;margin-bottom:15px}.probe-icon{width:43px;height:43px;border-radius:12px;background:#eaf4ff;color:#1677ff;display:grid;place-items:center;font-size:22px}.probe-card-head h2{margin:0;font-size:18px}.probe-card-head p{margin:3px 0 0;color:var(--muted);font-size:11px}.probe-form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.probe-form-row .grow{grid-column:span 3}.probe-actions{display:flex;justify-content:flex-end;margin-top:12px}.quality-history{margin-top:15px}
/* system */
.settings-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:15px}.simple-list>div,.status-row,.timeline-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #edf1f6}.simple-list>div:last-child,.status-row:last-child,.timeline-row:last-child{border-bottom:0}.simple-list span,.status-row span,.timeline-row span{color:var(--muted);font-size:11px}
/* login */
.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#dcecff 0,#f6f9fd 42%,#edf3fb 100%);padding:20px}.login-card{width:min(420px,100%);background:#fff;border:1px solid #dde6f2;border-radius:20px;padding:28px;box-shadow:0 24px 70px rgba(28,61,112,.16)}.login-card h1{margin:0 0 4px;font-size:25px}.login-card p{margin:0 0 18px}
/* mobile */
.mobile-overlay{display:none}.menu-toggle{border:1px solid var(--line);background:#fff;color:var(--text);box-shadow:none;padding:7px}.sidebar-close{cursor:pointer}.page-note{background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px;color:var(--muted);margin-bottom:12px}.server-form{display:grid;gap:12px}.server-type-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.server-type-picker label{position:relative;cursor:pointer}.server-type-picker input{position:absolute;opacity:0}.server-type-picker span{display:block;border:1px solid var(--line-strong);border-radius:11px;padding:13px;background:#fff}.server-type-picker b{display:block}.server-type-picker small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.server-type-picker input:checked+span{background:#f2f8ff;border-color:#5ea5ff;box-shadow:inset 0 0 0 1px #5ea5ff}.relay-summary{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.relay-summary span{border:1px solid var(--line);background:#f8faff;border-radius:8px;padding:6px 8px;font-size:10px}.bottom-toolbar{display:none}
@media(max-width:1280px){.grid,.server-stats{grid-template-columns:repeat(3,1fr)}.dashboard-hero,.server-quick{grid-template-columns:1fr}.dashboard-actions,.server-quick-actions{grid-template-columns:repeat(2,1fr)}.server-main-grid{grid-template-columns:1fr}.server-side-card{display:grid;grid-template-columns:1fr 1fr;gap:14px}.open-layout{grid-template-columns:1fr 330px}.probe-form-row{grid-template-columns:1fr 1fr}.probe-form-row .grow{grid-column:span 2}}
@media(max-width:980px){:root{--sidebar-w:210px}.open-layout{grid-template-columns:1fr}.open-preview{position:static}.two,.probe-layout,.settings-grid{grid-template-columns:1fr}.server-side-card{display:block}.server-grid{grid-template-columns:1fr}}
@media(max-width:760px){.shell{display:block}#sidebar{position:fixed;left:-260px;top:0;width:236px;transition:.2s ease}.menu-open #sidebar{left:0}.mobile-overlay{position:fixed;inset:0;background:rgba(5,20,42,.45);z-index:50}.menu-open .mobile-overlay{display:block}.sidebar-close{display:grid}.menu-toggle{display:grid}main{padding:14px}.page-subtitle{display:none}.header-actions .btn.ghost{display:none}.grid,.server-stats{grid-template-columns:repeat(2,1fr)}.dashboard-actions,.server-quick-actions{grid-template-columns:1fr 1fr}.form-grid,.form-line,.new-customer-inline{grid-template-columns:1fr}.mode-picker{grid-template-columns:1fr}.ip-picker{grid-template-columns:1fr}.server-facts,.mini-grid{grid-template-columns:1fr 1fr}.server-type-picker{grid-template-columns:1fr}.probe-form-row{grid-template-columns:1fr}.probe-form-row .grow{grid-column:auto}.page-footer{display:none}.open-progress{overflow:auto;padding-bottom:6px}.open-progress .p-step:after{width:34px}.header-actions .top-action{padding:0 11px;min-height:38px}.title-wrap h1{font-size:23px}}
@media(max-width:480px){.grid,.server-stats{grid-template-columns:1fr 1fr}.metric b,.server-stat b{font-size:23px}.dashboard-actions,.server-quick-actions{grid-template-columns:1fr}.server-facts,.mini-grid{grid-template-columns:1fr}.card,.panel-card,.panel-section,.open-section,.probe-card{padding:14px}.header-actions{display:none}}

/* ========================================================================== */
/* R16 EXACT UI PASS - 参考确认稿重新布局，不再居中缩成一小块                     */
/* ========================================================================== */
:root{
  --bg:#f5f8fd;
  --surface:#ffffff;
  --surface-2:#f9fbff;
  --line:#e5edf7;
  --line-strong:#d6e2f0;
  --text:#0f2343;
  --muted:#72839d;
  --primary:#0b78f6;
  --primary-2:#0865dc;
  --primary-soft:#eaf4ff;
  --sidebar:#082c59;
  --sidebar-deep:#061f40;
  --sidebar-w:232px;
  --radius:16px;
  --shadow:0 10px 28px rgba(29,73,135,.08);
  --shadow-sm:0 6px 18px rgba(29,73,135,.06);
}
html,body{font-size:14px;background:linear-gradient(180deg,#f7faff 0,#f2f7fd 100%)}
.shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
aside{padding:18px 14px 16px;background:linear-gradient(180deg,#061f40 0%,#082b56 58%,#0a376d 100%);box-shadow:10px 0 30px rgba(12,38,77,.07)}
.brand{padding:0 8px 24px;gap:12px}.brand-mark{width:46px;height:46px;border-radius:14px;font-size:12px}.brand-copy b{font-size:19px}.brand-copy small{font-size:11px;color:#9bb3d1}
nav{gap:6px}.nav-item{min-height:48px;padding:12px 14px;border-radius:11px;font-size:14px}.nav-item.active{background:linear-gradient(100deg,#1478f7,#06a0d8);box-shadow:0 10px 24px rgba(5,133,236,.26)}
.aside-foot{padding:18px 8px 4px}.user-avatar{width:44px;height:44px}.aside-user b{font-size:13px}.aside-user span{font-size:11px}
main{padding:26px 28px 24px;min-width:0}
header,.page-frame,.page-footer{max-width:none;width:100%;margin-left:0;margin-right:0}
header{margin-bottom:22px;min-height:56px}.title-wrap h1{font-size:29px;letter-spacing:-.7px}.page-subtitle{font-size:13px;margin-top:6px}.header-actions{gap:11px}.top-action{height:46px;padding:0 20px;border-radius:10px}
.page-footer{margin-top:22px;padding:0 2px 4px;font-size:11px;color:#99a9bd}
button,.btn{border-radius:9px;min-height:40px;padding:9px 16px;font-size:13px;box-shadow:0 5px 14px rgba(11,120,246,.14)}
.btn.primary{background:linear-gradient(180deg,#1684ff 0%,#0870f0 100%)}
.btn.ghost,.btn.secondary{background:#fff;border-color:#d9e4f0;color:#173151;box-shadow:0 2px 8px rgba(21,58,105,.03)}
input,select,textarea{min-height:44px;border-radius:9px;border-color:#d7e3f1;padding:10px 13px;font-size:13px}
label>span{font-size:12px;color:#28415f;margin-bottom:7px}
.card,.panel-card,.panel-section,.open-section,.probe-card,.server-table-card,.server-side-card{border-color:#e5edf7;border-radius:16px;box-shadow:var(--shadow-sm)}
.card,.panel-card,.panel-section{padding:20px 22px;margin-bottom:18px}.card h2,.panel-section h2{font-size:20px}.section-title,.section-head{margin-bottom:16px}.section-title p,.section-head p{font-size:12px}
.table-wrap{border-color:#e7eef7;border-radius:12px}.table-wrap th,table th{background:#f7faff;color:#62738d;font-size:12px}.table-wrap th,.table-wrap td,table th,table td{padding:13px 14px}
.empty{min-height:160px;display:table-cell;vertical-align:middle;text-align:center;color:#8a99ae}.empty-state{min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#fbfdff}

/* 总览，严格按确认稿的“6 卡 + 快捷操作 + 双列表”比例 */
.metric-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:15px;margin-bottom:18px}
.metric{position:relative;min-height:154px;padding:18px 19px 16px;border:0;border-radius:15px;box-shadow:0 8px 24px rgba(30,71,125,.07);overflow:hidden;background:#fff}
.metric:after{display:none}.metric-top{display:flex;align-items:center;gap:11px}.metric-top>span:last-child{font-size:13px;color:#52647e}.metric-icon{width:38px;height:38px;border-radius:10px;display:grid!important;place-items:center;font-size:13px!important;font-weight:850;color:#1477f5!important;background:#ebf4ff}.metric b{font-size:30px;margin:12px 0 0;color:#0d2445}.metric-foot{position:absolute;left:19px;right:14px;bottom:15px;color:#7b8da7;font-size:11px}.metric-foot i{position:absolute;right:0;bottom:-2px;width:64px;height:30px;border-radius:50% 50% 0 0;opacity:.32;background:linear-gradient(145deg,transparent 35%,#6aa9ff 36%,#dcecff 63%,transparent 64%)}
.metric.tone-purple .metric-icon{background:#f0ebff;color:#704ef4!important}.metric.tone-purple .metric-foot i{background:linear-gradient(145deg,transparent 35%,#8e72ff 36%,#e7e0ff 63%,transparent 64%)}
.metric.tone-green .metric-icon{background:#e8fbf4;color:#16aa77!important}.metric.tone-green .metric-foot i{background:linear-gradient(145deg,transparent 35%,#39c49a 36%,#def8ef 63%,transparent 64%)}
.metric.tone-orange .metric-icon{background:#fff3e7;color:#ef8b20!important}.metric.tone-orange .metric-foot i{background:linear-gradient(145deg,transparent 35%,#f0a55a 36%,#fff0df 63%,transparent 64%)}
.metric.tone-cyan .metric-icon{background:#e8f9fb;color:#0aa7b5!important}.metric.tone-cyan .metric-foot i{background:linear-gradient(145deg,transparent 35%,#33bbc6 36%,#def7f8 63%,transparent 64%)}
.metric.tone-red .metric-icon{background:#fff0f2;color:#e24b5a!important}.metric.tone-red .metric-foot i{background:linear-gradient(145deg,transparent 35%,#ef7180 36%,#ffe5e8 63%,transparent 64%)}
.dashboard-hero{grid-template-columns:300px minmax(0,1fr);padding:18px 20px;margin-bottom:18px;border-radius:16px;box-shadow:var(--shadow-sm)}.dashboard-hero-icon{width:50px;height:50px;border-radius:50%;font-size:26px}.dashboard-hero-title b{font-size:20px}.dashboard-hero-title span{font-size:12px}.dashboard-actions{gap:12px}.dashboard-actions .btn{height:58px;font-size:14px;border-radius:10px}.two{gap:18px}.two>.card{min-height:385px;padding:22px}.two>.card .table-wrap{min-height:290px}.two>.card .empty{height:245px}.section-title h2{font-size:20px}.section-title>a{font-weight:700}

/* 客户开通：左主流程 + 右固定预览，和确认稿相同 */
.open-progress{display:grid;grid-template-columns:repeat(3,1fr);max-width:760px;margin:0 0 18px 10px;gap:0}.p-step{display:flex;align-items:center;gap:10px;color:#8492a8;font-size:12px;font-weight:700;position:relative}.p-step:not(:last-child):after{content:"";height:1px;background:#ccdaec;flex:1;margin:0 12px}.p-no{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #cfdced;color:#6f7f98;flex:0 0 auto}.p-step.active{color:#1375ef}.p-step.active .p-no{background:#177df6;border-color:#177df6;color:#fff;box-shadow:0 5px 14px rgba(23,125,246,.24)}
.open-layout{grid-template-columns:minmax(0,1fr) 350px;gap:18px;align-items:start}.open-main{display:grid;gap:16px}.open-section{padding:20px 22px;margin:0}.open-section-title{margin-bottom:17px}.section-no{width:36px;height:36px;border-radius:10px;font-size:18px}.open-section-title b{font-size:19px}.open-section-title span{font-size:12px}.mode-picker{grid-template-columns:1fr 1fr;gap:14px}.mode-picker span{min-height:92px;padding:18px 18px;border-radius:12px}.mode-picker b{font-size:16px}.mode-picker small{font-size:11px;margin-top:6px}.ip-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.open-preview{top:22px;border-radius:16px;padding:18px;box-shadow:var(--shadow-sm)}.preview-head h2{font-size:19px}.preview-line{padding:12px}.preview-note{padding:14px;font-size:11px}.primary-submit{height:50px}

/* 客户 / 游戏 / IP 普通管理页 */
.toolbar{margin-bottom:14px}.toolbar .inline-form input{min-width:300px}.toolbar .btn{min-height:42px}.page-customers .card,.page-games .card,.page-ips .card{padding:20px 22px}.page-customers .form-grid{gap:14px 18px}.page-customers .card:first-of-type{min-height:260px}.page-customers .card:last-of-type{min-height:330px}.page-games .table-wrap,.page-ips .table-wrap{min-height:315px}
.tabs{display:flex;align-items:center;gap:10px;margin:0 0 12px}.tabs a{padding:0;background:transparent;border:0;color:#1775ed;font-weight:700}.tabs a:not(:last-child):after{content:"/";color:#9eacc0;margin-left:10px}.tabs a.active{background:transparent;color:#1775ed;border:0}

/* 服务器管理：指标 + 快捷条 + 主表/右侧控制 */
.server-stats{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:18px}.server-stat{min-height:132px;padding:18px;border:0;border-radius:15px;box-shadow:0 8px 24px rgba(30,71,125,.07)}.server-stat span{font-size:12px}.server-stat b{font-size:30px;margin-top:10px}.server-quick{grid-template-columns:300px minmax(0,1fr);padding:18px 20px;margin-bottom:14px}.server-quick-title i{width:50px;height:50px;border-radius:50%;font-size:25px}.server-quick-title b{font-size:19px}.server-quick-actions{gap:10px}.server-quick-actions .btn{min-height:52px}.context-tabs{margin:0 0 14px}.context-tabs a{padding:8px 14px;font-size:12px}.server-main-grid{grid-template-columns:minmax(0,1fr) 340px;gap:18px}.server-table-card,.server-side-card{padding:20px}.server-table-card{min-height:520px}.server-list .table-wrap,.server-list.table-wrap{min-height:390px}.server-side-card{min-height:520px}.server-control-grid{gap:10px}.control-tile{padding:14px;min-height:88px;border-radius:12px}.control-tile b{font-size:13px}.control-tile span{font-size:11px;line-height:1.45}.protocol-mini{padding:11px 12px}

/* 新增服务器：不再三选一，按入口明确优化/中转 */
.server-create-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:16px;box-shadow:var(--shadow-sm)}.server-create-hero .eyebrow{display:inline-block;color:#1675ee;font-size:11px;font-weight:800;margin-bottom:4px}.server-create-hero h2{margin:0;font-size:21px}.server-create-hero p{margin:5px 0 0;color:var(--muted);font-size:12px}.server-create-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:0;overflow:hidden}.server-create-form{display:grid}.create-section{padding:22px 24px;border-bottom:1px solid #edf2f8}.create-section-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}.create-section-head>div{min-width:0}.create-section-head b{display:block;font-size:18px}.create-section-head small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.create-no{width:36px;height:36px;border-radius:10px;background:#eaf4ff;color:#1476ef;display:grid;place-items:center;font-size:17px;font-weight:850}.server-type-chip{margin-left:auto;padding:6px 11px;border-radius:999px;font-size:11px;font-weight:800}.server-type-chip.accel{background:#eaf4ff;color:#126bd7}.server-type-chip.relay{background:#e8fbf4;color:#0e9369}.flow-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1.4fr auto 1.3fr;align-items:stretch;gap:9px}.flow-steps>div{background:#f8fbff;border:1px solid #e2ecf7;border-radius:11px;padding:14px}.flow-steps b{display:block;font-size:12px}.flow-steps span{display:block;color:var(--muted);font-size:10px;margin-top:4px}.flow-steps i{align-self:center;color:#9aabc1;font-style:normal}.relay-explain{background:#f8fbff;border:1px solid #e2ecf7;border-radius:11px;padding:13px}.relay-explain b{display:block}.relay-explain span{display:block;color:var(--muted);font-size:11px;margin-top:3px}.create-submit{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;background:#fbfdff}.create-submit b{display:block}.create-submit span{display:block;color:var(--muted);font-size:11px;margin-top:3px}.create-submit .btn{min-width:220px;height:48px}.create-notice{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.create-notice span{display:block;margin-top:2px}

/* 线路检测 */
.quality-info{padding:15px 18px;margin-bottom:18px}.probe-layout{gap:18px}.probe-card{padding:22px 24px;min-height:300px}.probe-card-head h2{font-size:20px}.probe-icon{width:48px;height:48px}.probe-actions{margin-top:16px}.probe-actions .btn{min-width:190px;height:46px}.quality-history{margin-top:18px;padding:20px 22px;min-height:390px}

/* 系统设置 */
.page-system .page-intro{padding:17px 20px}.settings-grid{grid-template-columns:1fr 1.2fr;gap:18px}.page-system .panel-section{padding:22px}.page-system .settings-grid .panel-section{min-height:245px}.page-system .panel-section:last-child{min-height:190px}.simple-list>div,.status-row,.timeline-row{padding:14px 0}.simple-list span,.status-row span,.timeline-row span{font-size:12px}

/* 桌面大屏不再把内容居中缩小 */
@media(min-width:1281px){
  main{padding-left:30px;padding-right:30px}
  header,.page-frame,.page-footer{width:100%;max-width:none}
}
@media(max-width:1440px){
  .metric-grid,.server-stats{grid-template-columns:repeat(3,1fr)}
  .server-main-grid{grid-template-columns:1fr 320px}
  .open-layout{grid-template-columns:minmax(0,1fr) 320px}
}
@media(max-width:1100px){
  :root{--sidebar-w:210px}.metric-grid,.server-stats{grid-template-columns:repeat(3,1fr)}
  .server-main-grid,.open-layout{grid-template-columns:1fr}.open-preview{position:static}.server-side-card{min-height:auto}
  .flow-steps{grid-template-columns:1fr 1fr}.flow-steps i{display:none}
}
@media(max-width:760px){
  main{padding:14px}.metric-grid,.server-stats{grid-template-columns:repeat(2,1fr)}.metric{min-height:132px}.dashboard-hero,.server-quick{grid-template-columns:1fr}.dashboard-actions,.server-quick-actions{grid-template-columns:1fr 1fr}.two,.form-line,.settings-grid,.probe-layout{grid-template-columns:1fr}.open-progress{max-width:none}.flow-steps{grid-template-columns:1fr}.create-submit{align-items:stretch;flex-direction:column}.create-submit .btn{width:100%;min-width:0}
}

/* =====================================================================
   R17 PIXEL UI
   Reference target: screenshots 1/3/5/7/9/11/13/15 supplied by user.
   The design is deliberately denser in information but physically larger
   on 2K desktop screens, instead of stretching tiny controls edge-to-edge.
   ===================================================================== */
:root{
  --r17-canvas:#f4f8fe;
  --r17-navy:#071d3b;
  --r17-navy-2:#0b356c;
  --r17-blue:#0b78f5;
  --r17-blue-2:#0f8ce8;
  --r17-border:#e1eaf5;
  --r17-text:#0b1f3f;
  --r17-muted:#7687a3;
  --r17-shadow:0 10px 28px rgba(35,75,128,.075);
  --content-max:1660px;
}
html,body{background:var(--r17-canvas);color:var(--r17-text)}
body{font-size:15px;background:
  radial-gradient(circle at 72% 0%,rgba(112,181,255,.10),transparent 34%),
  linear-gradient(180deg,#f8fbff 0,#f3f8fe 100%)}
.shell{grid-template-columns:252px minmax(0,1fr)}
aside{
  padding:18px 14px 18px;
  background:
    radial-gradient(circle at 55% 75%,rgba(24,91,173,.28),transparent 33%),
    linear-gradient(180deg,#071b38 0%,#092a55 65%,#0a3268 100%);
  box-shadow:none;
}
.brand{padding:2px 8px 27px;gap:13px}
.brand-mark{width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#26a3ff,#1474ff 58%,#6549ff);box-shadow:0 10px 24px rgba(13,116,255,.34);font-size:12px}
.brand-copy b{font-size:20px;letter-spacing:.1px}.brand-copy small{font-size:12px;color:#9eb1cd;margin-top:1px}
nav{gap:7px}.nav-item{min-height:54px;padding:0 18px;border-radius:10px;gap:14px;font-size:15px;font-weight:720;color:#e7eef8}.nav-item.active{background:linear-gradient(100deg,#0c73ee,#0a9cdc);box-shadow:0 8px 20px rgba(0,121,238,.26)}.nav-icon{width:24px;height:24px}.nav-icon svg{width:20px;height:20px;stroke-width:2}
.aside-foot{padding:21px 8px 5px;grid-template-columns:48px minmax(0,1fr) 34px}.user-avatar{width:48px;height:48px}.aside-user b{font-size:14px}.aside-user span{font-size:11px}
main{padding:30px 32px 26px;min-height:100vh}
header,.page-frame,.page-footer{width:100%;max-width:var(--content-max);margin-left:auto;margin-right:auto}
header{margin-bottom:24px;min-height:66px}.title-wrap h1{font-size:31px;letter-spacing:-.7px}.page-subtitle{font-size:14px;margin-top:6px;color:#6f819d}.header-actions{gap:11px}.top-action{height:48px;padding:0 20px;border-radius:10px;font-size:14px}
.page-footer{margin-top:20px;font-size:11px}

/* core surfaces */
.card,.panel-card,.panel-section,.open-section,.probe-card,.server-table-card,.server-side-card,.server-create-card,.page-intro{
  border-color:var(--r17-border);border-radius:16px;box-shadow:var(--r17-shadow);background:#fff;
}
.card,.panel-section{padding:22px 24px;margin-bottom:18px}
button,.btn{border-radius:9px;min-height:44px;padding:10px 18px;font-size:14px;box-shadow:0 7px 18px rgba(16,114,239,.15)}
.btn.primary,button:not(.ghost):not(.secondary):not(.danger):not(.green):not(.warn):not(.link-btn){background:linear-gradient(180deg,#1285ff,#0671ed)}
.btn.ghost,.btn.secondary{border-color:#dce6f1;background:#fff;color:#152947;box-shadow:0 5px 15px rgba(40,70,110,.035)}
.btn.small{min-height:36px;padding:7px 12px;font-size:12px}
input,select,textarea{min-height:46px;border-color:#d7e2ef;border-radius:9px;padding:10px 13px;font-size:14px}
label>span{font-size:13px;margin-bottom:7px;color:#233b5f}.form-grid{gap:16px 18px}.form-line{gap:16px}.toolbar{margin-bottom:18px}.toolbar .inline-form{gap:10px}.toolbar .inline-form input{min-width:320px}.toolbar .btn{height:46px}
.section-title,.section-head{margin-bottom:16px}.section-title h2,.section-head h2,.card h2,.panel-section h2{font-size:20px}.section-title p,.section-head p{font-size:12px}
.table-wrap{border-color:#e1e9f3;border-radius:12px;background:#fff}.table-wrap table,table{min-width:760px}.table-wrap th,table th{background:#f6f9fd;color:#526784;font-size:12px;font-weight:760}.table-wrap th,.table-wrap td,table th,table td{padding:15px 16px}.table-wrap td,table td{font-size:13px}.empty{height:210px;vertical-align:middle!important;text-align:center!important;color:#8796ac!important}.empty-state{min-height:142px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;border-color:#d7e4f2;background:#fbfdff}.empty-state b{font-size:15px;color:#294363}.empty-state span{display:block;color:#8695aa}

/* dashboard exactly follows reference proportions */
.metric-grid{gap:14px;margin-bottom:18px}.metric{min-height:150px;padding:18px 18px 16px;border:0;border-radius:14px;box-shadow:0 8px 22px rgba(38,76,126,.07)}
.metric-top{gap:12px}.metric-icon{width:46px;height:46px;border-radius:12px;font-size:14px!important}.metric-top>span:last-child{font-size:14px;color:#233b5d}.metric b{font-size:30px;margin-top:10px}.metric-foot{left:18px;right:16px;bottom:15px;font-size:12px}.metric-foot i{width:70px;height:34px}
.dashboard-hero{grid-template-columns:300px minmax(0,1fr);padding:20px 22px;gap:20px;margin-bottom:20px}.dashboard-hero-icon{width:50px;height:50px}.dashboard-hero-title b{font-size:20px}.dashboard-hero-title span{font-size:13px}.dashboard-actions{gap:12px}.dashboard-actions .btn{height:58px;font-size:15px}
.two{gap:18px}.two>.card{min-height:380px;padding:22px}.two>.card .table-wrap{min-height:290px}.two>.card .empty{height:245px;font-size:14px}.two>.card .section-title h2{font-size:20px}

/* quick-open reference: stepper, four sections, fixed right preview */
.open-progress{max-width:900px;margin:0 0 20px 10px;grid-template-columns:repeat(3,1fr)}.p-step{font-size:13px}.p-no{width:34px;height:34px}.p-step:not(:last-child):after{margin:0 16px}
.open-layout{grid-template-columns:minmax(0,1fr) 370px;gap:18px}.open-main{gap:16px}.open-section{padding:20px 22px}.open-section-title{margin-bottom:17px}.section-no{width:38px;height:38px;border-radius:10px;font-size:19px}.open-section-title b{font-size:19px}.open-section-title span{font-size:12px}.open-section .form-line{align-items:end}
.date-field{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;align-items:end}.date-presets{display:flex;gap:8px;padding-bottom:0}.date-presets button{min-height:46px;padding:0 14px;color:#284264;background:#fff;border:1px solid #d9e4f0;box-shadow:none}.date-presets button.active{color:#0874ee;border-color:#1680ff;background:#eef6ff;box-shadow:inset 0 0 0 1px #1680ff}
.mode-picker{gap:14px}.mode-picker span{min-height:106px;padding:18px 18px}.mode-picker b{display:flex;align-items:center;gap:12px;font-size:16px}.mode-icon{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#eef5ff;color:#1878ed;font-style:normal;font-size:25px}.mode-icon.user{color:#334c78;background:#f5f8fc}.mode-picker small{padding-left:58px;margin-top:-13px;font-size:12px}.ip-filter{height:44px}.ip-picker{grid-template-columns:1fr;max-height:315px}.ip-choice{padding:13px}.open-preview{top:24px;padding:0;min-height:675px}.preview-head{padding:20px}.preview-icon{width:48px;height:48px}.preview-head h2{font-size:19px}.preview-body{padding:18px}.preview-line{padding:12px 13px}.preview-note{margin-top:14px;padding:16px}.primary-submit{height:52px;margin-top:10px}
.compact-details{margin-top:12px}

/* management pages */
.page-customers .toolbar{align-items:center}.page-customers .card{padding:22px 24px}.page-customers .card:first-of-type{min-height:330px}.page-customers .form-grid{grid-template-columns:1fr 1fr}.page-customers .form-grid .wide{grid-column:1/-1}.customer-list-card{min-height:330px}.customer-list-card .table-wrap{min-height:220px}
.page-games .toolbar{margin-bottom:18px}.page-games .card{padding:18px 20px}.page-games .table-wrap{min-height:310px}.page-games table td{height:76px}.page-games table th{height:52px}
.page-ips .toolbar{margin-bottom:14px}.page-ips .card{padding:18px 20px}.page-ips .table-wrap{min-height:330px}.page-ips table th{height:54px}.page-ips .empty{height:260px}

/* server management */
.server-stats{gap:14px;margin-bottom:18px}.server-stat{position:relative;min-height:145px;padding:18px;border:0;border-radius:14px;box-shadow:0 8px 22px rgba(38,76,126,.07);overflow:hidden}.server-stat-top{display:flex;align-items:center;gap:11px}.server-stat-top i{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#eaf4ff;color:#1477f5;font-size:18px;font-style:normal;font-weight:800}.server-stat-top span{font-size:13px;color:#405575}.server-stat b{font-size:30px;margin:10px 0 0}.server-stat-foot{position:absolute;left:18px;right:14px;bottom:14px;color:#7e8ea6;font-size:11px}.server-stat-foot em{position:absolute;right:0;bottom:-1px;width:64px;height:31px;border-radius:50% 50% 0 0;opacity:.30;background:linear-gradient(145deg,transparent 35%,#66a9ff 36%,#dcecff 63%,transparent 64%)}
.server-stat.tone-purple .server-stat-top i{background:#f0ebff;color:#6e4cf4}.server-stat.tone-purple .server-stat-foot em{background:linear-gradient(145deg,transparent 35%,#8b70fb 36%,#e9e3ff 63%,transparent 64%)}
.server-stat.tone-green .server-stat-top i{background:#e8fbf4;color:#10a972}.server-stat.tone-green .server-stat-foot em{background:linear-gradient(145deg,transparent 35%,#39c49a 36%,#def8ef 63%,transparent 64%)}
.server-stat.tone-orange .server-stat-top i{background:#fff1e4;color:#ee8a20}.server-stat.tone-orange .server-stat-foot em{background:linear-gradient(145deg,transparent 35%,#efa254 36%,#fff0df 63%,transparent 64%)}
.server-stat.tone-cyan .server-stat-top i{background:#e8f8ff;color:#1496e5}.server-stat.tone-red .server-stat-top i{background:#fff0f2;color:#e24b5a}
.server-quick{grid-template-columns:320px minmax(0,1fr);padding:18px 20px;gap:18px;margin-bottom:16px}.server-quick-title i{width:50px;height:50px;border-radius:50%}.server-quick-title b{font-size:19px}.server-quick-title span{font-size:12px}.server-quick-actions{gap:10px}.server-quick-actions .btn{height:52px;font-size:14px}.context-tabs{gap:8px;margin:0 0 14px}.context-tabs a{padding:8px 14px;font-size:12px}.server-main-grid{grid-template-columns:minmax(0,1fr) 330px;gap:16px}.server-table-card,.server-side-card{padding:18px}.server-table-card{min-height:520px}.server-list.table-wrap{min-height:410px}.server-side-card{min-height:520px}.server-control-grid{gap:10px}.control-tile{min-height:88px;padding:14px}.control-tile b{font-size:13px}.control-tile span{font-size:11px}.protocol-mini{padding:10px 12px}.server-list th,.server-list td{padding:12px 11px;font-size:11px}

/* quality */
.quality-info{min-height:72px;padding:15px 18px;margin-bottom:18px}.quality-info i{width:38px;height:38px}.quality-info b{font-size:16px}.quality-info span{font-size:12px}.probe-layout{grid-template-columns:1fr 1fr;gap:18px}.probe-card{min-height:300px;padding:22px 24px}.probe-icon{width:48px;height:48px}.probe-card-head h2{font-size:20px}.probe-card-head p{font-size:12px}.probe-actions{margin-top:16px}.probe-actions .btn{min-width:190px;height:48px}.quality-history{min-height:390px;padding:20px 22px}.quality-history .table-wrap{min-height:285px}

/* system */
.page-system .page-intro{min-height:78px;padding:17px 20px}.page-system .page-intro b{font-size:18px}.settings-grid{grid-template-columns:1fr 1.15fr;gap:18px}.page-system .panel-section{padding:22px 24px}.page-system .settings-grid .panel-section{min-height:245px}.page-system .status-row,.page-system .simple-list>div,.page-system .timeline-row{padding:15px 0}.page-system .panel-section:last-child{min-height:205px}

/* large 2K desktop scaling: reference screenshots were 1672 wide; the user's browser
   captures are around 2048 wide. Scale physical UI so it keeps the same proportions. */
@media(min-width:1800px){
  :root{--sidebar-w:292px;--content-max:1660px}
  body{font-size:16px}.shell{grid-template-columns:292px minmax(0,1fr)}aside{padding:24px 17px 20px}.brand{padding:2px 10px 32px}.brand-mark{width:55px;height:55px;border-radius:15px}.brand-copy b{font-size:22px}.brand-copy small{font-size:13px}.nav-item{min-height:61px;padding:0 20px;font-size:16px}.nav-icon svg{width:22px;height:22px}.aside-foot{grid-template-columns:54px minmax(0,1fr) 36px}.user-avatar{width:54px;height:54px}
  main{padding:34px 38px 30px}header{min-height:74px;margin-bottom:28px}.title-wrap h1{font-size:36px}.page-subtitle{font-size:15px}.top-action{height:54px;padding:0 22px;font-size:15px}
  .metric{min-height:178px;padding:22px}.metric-icon{width:54px;height:54px}.metric-top>span:last-child{font-size:15px}.metric b{font-size:36px}.metric-foot{left:22px;bottom:18px;font-size:13px}.metric-foot i{width:84px;height:40px}
  .dashboard-hero{grid-template-columns:350px minmax(0,1fr);padding:22px 24px}.dashboard-hero-icon{width:58px;height:58px}.dashboard-hero-title b{font-size:23px}.dashboard-hero-title span{font-size:14px}.dashboard-actions .btn{height:66px;font-size:16px}
  .two>.card{min-height:455px;padding:25px}.two>.card .table-wrap{min-height:350px}.two>.card .empty{height:300px}.section-title h2{font-size:23px}
  .open-layout{grid-template-columns:minmax(0,1fr) 420px;gap:22px}.open-progress{max-width:1020px}.p-no{width:40px;height:40px}.open-section{padding:24px 26px}.section-no{width:44px;height:44px}.open-section-title b{font-size:22px}.open-section-title span{font-size:13px}.mode-picker span{min-height:125px;padding:20px}.mode-picker b{font-size:18px}.mode-icon{width:54px;height:54px}.mode-picker small{padding-left:66px;font-size:13px}.open-preview{min-height:760px}.preview-head{padding:24px}.preview-head h2{font-size:22px}.preview-body{padding:22px}.preview-line{padding:14px}.primary-submit{height:58px}
  .page-customers .card:first-of-type{min-height:390px}.customer-list-card{min-height:390px}.page-games .table-wrap,.page-ips .table-wrap{min-height:390px}.page-games table td{height:88px}
  .server-stat{min-height:170px;padding:22px}.server-stat-top i{width:50px;height:50px}.server-stat-top span{font-size:14px}.server-stat b{font-size:36px}.server-stat-foot{left:22px;bottom:18px;font-size:13px}.server-quick{grid-template-columns:360px minmax(0,1fr);padding:22px 24px}.server-quick-title i{width:58px;height:58px}.server-quick-title b{font-size:22px}.server-quick-actions .btn{height:60px}.server-main-grid{grid-template-columns:minmax(0,1fr) 380px;gap:20px}.server-table-card,.server-side-card{min-height:620px;padding:22px}.server-list.table-wrap{min-height:500px}.control-tile{min-height:102px;padding:16px}.control-tile b{font-size:14px}.control-tile span{font-size:12px}
  .probe-card{min-height:355px;padding:26px}.probe-card-head h2{font-size:23px}.quality-history{min-height:465px;padding:24px}.quality-history .table-wrap{min-height:350px}
  .page-system .page-intro{min-height:94px}.page-system .settings-grid .panel-section{min-height:295px}.page-system .panel-section:last-child{min-height:245px}
  input,select,textarea{min-height:52px;font-size:15px}button,.btn{min-height:50px;font-size:15px}.btn.small{min-height:40px}.table-wrap th,.table-wrap td,table th,table td{padding:17px 18px}.table-wrap th,table th{font-size:13px}.table-wrap td,table td{font-size:14px}
}

@media(max-width:1280px){
  :root{--content-max:100%}
}
.page-dashboard .two .table-wrap table{min-width:0}
.page-dashboard .two{min-width:0}.page-dashboard .two>.card{min-width:0}
/* R17 dashboard final spacing calibration against reference 1 */
.page-dashboard header{margin-bottom:32px}
.page-dashboard .metric-grid{margin-bottom:26px}
.page-dashboard .dashboard-hero{min-height:118px;margin-bottom:24px}

/* ============================================================
   R17.1 REFERENCE ALIGNMENT PATCH
   User-annotated pixel/layout corrections. Business logic unchanged.
   ============================================================ */

/* 1) Dashboard: reference composition sits slightly farther right. */
@media (min-width:1281px){
  .page-dashboard header,
  .page-dashboard .page-frame,
  .page-dashboard .page-footer{position:relative;left:22px}
}
@media (min-width:1800px){
  .page-dashboard header,
  .page-dashboard .page-frame,
  .page-dashboard .page-footer{left:30px}
}

/* 2) Quick open: right side is preview only; real action lives in bottom dock. */
.quick-form-with-dock{position:relative;padding-bottom:0}
.page-quick-open .open-layout{align-items:stretch}
.page-quick-open .open-preview{
  position:sticky;top:22px;align-self:start;background:#fff;border:1px solid #e3ebf5;
  border-radius:16px;box-shadow:0 8px 28px rgba(28,61,112,.07);overflow:hidden;
  min-height:690px;padding:0
}
.page-quick-open .preview-head{display:flex;align-items:flex-start;gap:13px;padding:21px 20px 17px;border-bottom:1px solid #edf2f8}
.page-quick-open .preview-icon{width:46px;height:46px;border-radius:12px;background:#e9f4ff;color:#1376f1;display:grid;place-items:center;font-size:22px;flex:0 0 auto}
.page-quick-open .preview-head h2{margin:1px 0 2px;font-size:19px;line-height:1.25}
.page-quick-open .preview-head p{margin:0;color:#71819b;font-size:11px;line-height:1.55}
.page-quick-open .preview-hero{text-align:center;padding:35px 18px 22px}
.page-quick-open .preview-hero-icon{width:112px;height:112px;border-radius:50%;margin:0 auto 17px;background:linear-gradient(145deg,#f6fbff,#eaf4ff);display:grid;align-content:center;justify-content:center;gap:7px;box-shadow:inset 0 0 0 1px #edf4fb}
.page-quick-open .preview-hero-icon span{display:block;width:55px;height:8px;border-radius:6px;background:linear-gradient(90deg,#45a5ff,#8bc6ff)}
.page-quick-open .preview-hero-icon span:nth-child(2){width:42px}.page-quick-open .preview-hero-icon span:nth-child(3){width:49px}
.page-quick-open .preview-hero h3{margin:0 0 7px;font-size:17px;color:#14294a}
.page-quick-open .preview-hero p{margin:0;color:#7b8ca5;font-size:11px}
.page-quick-open .preview-protocols{margin:0 18px;padding:5px 14px;background:linear-gradient(180deg,#f7fbff,#f0f7ff);border:1px solid #e3eef9;border-radius:12px}
.page-quick-open .preview-protocol{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #e4edf7}
.page-quick-open .preview-protocol:last-child{border-bottom:0}
.page-quick-open .pp-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:900;background:#e3f2ff;color:#1579f2;flex:0 0 auto}
.page-quick-open .pp-ss{background:#e7f7ff;color:#0c97de}.page-quick-open .pp-socks{background:#e7f2ff;color:#0f71dd}
.page-quick-open .preview-protocol b{display:block;font-size:12px;color:#193052}.page-quick-open .preview-protocol span{display:block;color:#788aa4;font-size:10px;margin-top:2px}
.page-quick-open .preview-summary{display:none}
.page-quick-open .preview-note{margin:12px 18px 18px;padding:14px 15px;border:0;border-radius:11px;background:linear-gradient(135deg,#eef7ff,#e4f2ff);color:#3e5e87;font-size:10.5px;line-height:1.62}
.page-quick-open .preview-note b{display:block;color:#176fdc;font-size:12px;margin-bottom:5px}.page-quick-open .preview-note span{display:block}
.page-quick-open .open-submit-dock{
  position:sticky;bottom:0;z-index:45;display:grid;grid-template-columns:120px minmax(280px,1fr) 120px;
  align-items:center;gap:16px;margin:16px 0 0;padding:12px 4px;background:rgba(255,255,255,.96);
  border-top:1px solid #dfe8f3;box-shadow:0 -12px 28px rgba(35,73,124,.06);backdrop-filter:blur(9px)
}
.page-quick-open .open-cancel{grid-column:1;width:100%;height:46px;background:#fff}
.page-quick-open .open-dock-submit{grid-column:2;justify-self:center;width:min(520px,72%);height:50px;border-radius:9px;background:linear-gradient(180deg,#1882ff,#0969ef);box-shadow:0 8px 18px rgba(22,119,255,.24);font-size:14px}
@media(min-width:1800px){
  .page-quick-open .open-preview{min-height:790px}.page-quick-open .preview-head{padding:25px 24px 20px}.page-quick-open .preview-hero{padding-top:42px}.page-quick-open .preview-hero-icon{width:132px;height:132px}.page-quick-open .preview-protocols{margin-left:22px;margin-right:22px}.page-quick-open .preview-note{margin-left:22px;margin-right:22px}.page-quick-open .open-submit-dock{grid-template-columns:145px 1fr 145px;padding:15px 4px}.page-quick-open .open-dock-submit{height:58px;width:min(620px,72%)}
}
@media(max-width:900px){
  .page-quick-open .open-preview{position:static;min-height:auto}.page-quick-open .open-submit-dock{grid-template-columns:92px 1fr;gap:9px;padding:10px 0}.page-quick-open .open-dock-submit{grid-column:2;width:100%}.page-quick-open .open-cancel{grid-column:1}.page-quick-open .preview-hero{display:none}
}

/* 3) Customers: full centered empty-state illustration. */
.customer-list-card .empty-table-row td{padding:0!important;height:220px;border-bottom:0}
.table-empty-state{height:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#7d8da6;padding:24px}
.table-empty-state b{display:block;color:#203657;font-size:16px;margin-top:13px}
.table-empty-state p{margin:5px 0 0;font-size:12px;color:#8292aa}
.table-empty-icon{position:relative;width:62px;height:62px;border-radius:16px;background:linear-gradient(145deg,#eff7ff,#e7f2ff);display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(36,119,239,.07)}
.table-empty-icon:before{content:"";position:absolute;width:38px;height:45px;border:4px solid #9bc8ff;border-radius:7px;opacity:.55}
.table-empty-icon span{position:relative;z-index:1;width:24px;height:4px;border-radius:4px;background:#74b2ff}.table-empty-icon span:nth-child(2){width:19px}.table-empty-icon span:nth-child(3){width:24px}
@media(min-width:1800px){.customer-list-card .empty-table-row td,.table-empty-state{height:270px;min-height:270px}.table-empty-icon{width:76px;height:76px}.table-empty-state b{font-size:18px}.table-empty-state p{font-size:13px}}

/* 4) IP page: reference uses a compact text-only provider button. */
.page-ips .provider-plain-btn{width:auto!important;min-width:72px!important;padding-left:15px!important;padding-right:15px!important;gap:0!important}
.page-ips .provider-plain-btn:before,.page-ips .provider-plain-btn:after{display:none!important;content:none!important}
.page-ips .toolbar-actions{gap:9px}

/* 5) Server management: restore visual hierarchy from reference. */
.page-nodes .server-stats{gap:14px}
.page-nodes .server-stat{min-height:150px;padding:18px 18px 16px;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(30,71,125,.075)}
.page-nodes .server-stat-top{gap:12px;align-items:center}
.page-nodes .server-stat-top i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
.page-nodes .server-stat-top i svg{width:22px;height:22px;stroke-width:1.85}
.page-nodes .server-stat-top span{font-size:13px;color:#344b6c;font-weight:600}
.page-nodes .server-stat>b{font-size:31px;line-height:1;margin-top:11px;color:#0d203e}
.page-nodes .server-stat-foot{left:18px;right:15px;bottom:14px;font-size:11px;color:#7e8ea6}
.page-nodes .server-stat-foot em{width:82px;height:42px;right:-5px;bottom:-8px;border-radius:0;clip-path:polygon(0 80%,18% 62%,34% 70%,51% 42%,67% 50%,82% 20%,100% 0,100% 100%,0 100%);opacity:.38;background:linear-gradient(180deg,#78b7ff,#e7f3ff)}
.page-nodes .server-stat.tone-purple .server-stat-foot em{background:linear-gradient(180deg,#9579ff,#eee9ff)}
.page-nodes .server-stat.tone-green .server-stat-foot em{background:linear-gradient(180deg,#45cfa4,#e6faf3)}
.page-nodes .server-stat.tone-orange .server-stat-foot em{background:linear-gradient(180deg,#ffb45d,#fff1e2)}
.page-nodes .server-stat.tone-cyan .server-stat-foot em{background:linear-gradient(180deg,#47c7d3,#e2fbfd)}
.page-nodes .server-stat.tone-red .server-stat-foot em{background:linear-gradient(180deg,#ff7b88,#fff0f2)}
.page-nodes .server-stat.tone-blue .server-stat-top i{background:#e9f4ff;color:#1276ef}.page-nodes .server-stat.tone-purple .server-stat-top i{background:#f0eaff;color:#704df2}.page-nodes .server-stat.tone-green .server-stat-top i{background:#e5faf2;color:#10a871}.page-nodes .server-stat.tone-orange .server-stat-top i{background:#fff0e2;color:#ee8b25}.page-nodes .server-stat.tone-cyan .server-stat-top i{background:#e7f8ff;color:#1594e3}.page-nodes .server-stat.tone-red .server-stat-top i{background:#fff0f2;color:#e74c5d}

.page-nodes .server-side-card{padding:19px 18px 16px}
.page-nodes .server-side-card .section-title{margin-bottom:14px}
.page-nodes .server-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.page-nodes .control-tile{min-height:103px;padding:13px 11px;display:grid;grid-template-columns:38px minmax(0,1fr) 12px;gap:9px;align-items:start;background:#fff;border:1px solid #e2eaf4;border-radius:11px;color:#122743;position:relative;overflow:hidden}
.page-nodes .control-tile:hover{background:#fafdff;border-color:#c8dcf5;transform:translateY(-1px)}
.page-nodes .control-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#eaf4ff;color:#1576ee}
.page-nodes .control-icon svg{width:19px;height:19px;stroke-width:1.85}
.page-nodes .control-copy{display:block;min-width:0}.page-nodes .control-copy b{display:block;font-size:12px;line-height:1.25;margin:2px 0 0}.page-nodes .control-copy small{display:block;color:#788aa4;font-size:9.5px;line-height:1.45;margin-top:5px}
.page-nodes .control-arrow{align-self:center;color:#77a8df;font-size:19px;line-height:1}
.page-nodes .control-tile.tone-orange .control-icon{background:#fff0e2;color:#ed8b27}.page-nodes .control-tile.tone-purple .control-icon,.page-nodes .control-tile.tone-violet .control-icon{background:#f0ebff;color:#7651f5}.page-nodes .control-tile.tone-cyan .control-icon{background:#e9f8ff;color:#118fcf}.page-nodes .control-tile.tone-indigo .control-icon{background:#eef0ff;color:#525ae9}

.page-nodes .protocol-mini-list{gap:8px;margin-top:12px}
.page-nodes .protocol-mini{height:43px;padding:7px 9px 7px 10px;border-radius:10px;background:#fff}
.page-nodes .protocol-mini-name{display:flex;align-items:center;gap:8px;min-width:0}.page-nodes .protocol-mini-name i{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#e9f4ff;color:#1476ef;flex:0 0 auto}.page-nodes .protocol-mini-name i svg{width:15px;height:15px}.page-nodes .protocol-mini-name b{font-size:11px}.page-nodes .protocol-proxy .protocol-mini-name i{background:#e7fbf3;color:#13a36f}.page-nodes .protocol-common .protocol-mini-name i{background:#fff3e3;color:#ee942b}
.page-nodes .protocol-mini .badge{min-width:42px;text-align:center;justify-content:center;font-weight:800}
@media(min-width:1800px){
  .page-nodes .server-stat{min-height:178px;padding:22px}.page-nodes .server-stat-top i{width:52px;height:52px;border-radius:13px}.page-nodes .server-stat-top i svg{width:26px;height:26px}.page-nodes .server-stat-top span{font-size:15px}.page-nodes .server-stat>b{font-size:37px}.page-nodes .server-stat-foot{left:22px;bottom:17px;font-size:13px}.page-nodes .server-stat-foot em{width:96px;height:50px}.page-nodes .control-tile{min-height:116px;grid-template-columns:44px minmax(0,1fr) 14px;padding:15px 13px}.page-nodes .control-icon{width:42px;height:42px}.page-nodes .control-icon svg{width:22px;height:22px}.page-nodes .control-copy b{font-size:14px}.page-nodes .control-copy small{font-size:11px}.page-nodes .protocol-mini{height:50px}.page-nodes .protocol-mini-name i{width:31px;height:31px}.page-nodes .protocol-mini-name b{font-size:13px}
}

/* 6) Quality notice: dismiss X at the far right, as in reference. */
.page-quality .quality-info{position:relative;align-items:center;padding-right:62px}
.page-quality .quality-info>div{min-width:0;flex:1}
.quality-info-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:38px;height:38px;min-height:38px;padding:0;border:0;border-radius:9px;background:transparent;color:#6980a0;box-shadow:none;font-size:22px;font-weight:400;line-height:1;cursor:pointer}
.quality-info-close:hover{background:#e7f2ff;color:#2b67aa;transform:translateY(-50%)}
@media(min-width:1800px){.quality-info-close{right:20px;width:44px;height:44px;min-height:44px;font-size:25px}.page-quality .quality-info{padding-right:74px}}


/* R17.2 detail + mobile alignment */
.page-quick-open .quick-form-with-dock{padding-bottom:86px}
.page-quick-open .open-submit-dock{position:fixed!important;left:var(--sidebar-w);right:0;bottom:0;z-index:90;margin:0!important;padding:12px max(30px,calc((100vw - var(--sidebar-w) - var(--content-max))/2))!important;display:grid!important;grid-template-columns:120px minmax(0,1fr) 370px!important;align-items:center;gap:18px;background:rgba(255,255,255,.97);border-top:1px solid #dfe8f3;box-shadow:0 -12px 30px rgba(35,73,124,.08);backdrop-filter:blur(10px)}
.page-quick-open .open-cancel{grid-column:1!important;width:100%!important;height:46px!important}
.page-quick-open .open-dock-submit{grid-column:2!important;justify-self:center!important;width:min(520px,76%)!important;height:50px!important}
.page-nodes .server-detail-actions{margin-top:14px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:stretch;flex-wrap:nowrap}
.page-nodes .server-detail-actions form{display:block;min-width:0}.page-nodes .server-detail-actions .btn,.page-nodes .server-detail-actions button{width:100%;height:44px;padding-left:8px;padding-right:8px;white-space:nowrap;font-size:12px}
@media(min-width:1800px){.page-quick-open .quick-form-with-dock{padding-bottom:98px}.page-quick-open .open-submit-dock{grid-template-columns:145px minmax(0,1fr) 420px!important;padding:15px max(38px,calc((100vw - var(--sidebar-w) - var(--content-max))/2))!important}.page-quick-open .open-dock-submit{width:min(620px,78%)!important;height:58px!important}.page-nodes .server-detail-actions{gap:10px}.page-nodes .server-detail-actions .btn,.page-nodes .server-detail-actions button{height:50px;font-size:13px}}
@media(max-width:1100px){.page-quick-open .open-submit-dock{grid-template-columns:110px minmax(0,1fr)!important;padding-left:22px!important;padding-right:22px!important}.page-quick-open .open-dock-submit{grid-column:2!important;width:100%!important}.page-nodes .server-detail-actions{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:thin}.page-nodes .server-detail-actions form,.page-nodes .server-detail-actions>a{flex:0 0 132px}}
@media(max-width:760px){.page-quick-open .quick-form-with-dock{padding-bottom:78px}.page-quick-open .open-layout{grid-template-columns:1fr!important;gap:12px}.page-quick-open .open-preview{position:static!important;min-height:auto!important;order:2}.page-quick-open .preview-hero{display:none!important}.page-quick-open .preview-protocols{margin:12px!important}.page-quick-open .preview-note{margin:10px 12px 12px!important}.page-quick-open .open-submit-dock{left:0!important;right:0!important;grid-template-columns:86px minmax(0,1fr)!important;gap:8px!important;padding:9px 12px calc(9px + env(safe-area-inset-bottom))!important}.page-quick-open .open-cancel{height:44px!important}.page-quick-open .open-dock-submit{height:46px!important;font-size:13px!important}.page-quick-open .mode-picker{grid-template-columns:1fr!important}.page-quick-open .date-field{grid-template-columns:1fr!important}.page-quick-open .date-presets{display:grid;grid-template-columns:repeat(4,1fr)}.page-quick-open .date-presets button{padding:0 6px}.page-nodes .server-head{align-items:flex-start;gap:8px}.page-nodes .server-meta{display:flex;flex-wrap:wrap;gap:5px}.page-nodes .mini-grid{grid-template-columns:1fr 1fr!important}.page-nodes .server-detail-actions{margin-top:12px}.page-nodes .server-detail-actions form,.page-nodes .server-detail-actions>a{flex-basis:124px}.page-nodes .copy-box{display:grid;grid-template-columns:1fr}.page-nodes .copy-box code{min-height:84px;white-space:pre-wrap;word-break:break-all}.page-nodes .copy-box .btn{width:100%}}

/* R17.3 explicit exit IP binding / unbinding */
.page-nodes .egress-binding{margin:18px 0}
.page-nodes .egress-binding-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;margin-bottom:16px;border:1px solid #dfe8f3;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(30,71,125,.06)}
.page-nodes .egress-binding-head h2{margin:0 0 6px;font-size:22px;color:#0f2444}.page-nodes .egress-binding-head p{margin:0;color:#74849c;font-size:12px}
.page-nodes .egress-manual-card{padding:20px 22px;margin-bottom:16px;border:1px solid #dfe8f3;border-radius:16px;background:linear-gradient(180deg,#fbfdff,#fff);box-shadow:0 8px 24px rgba(30,71,125,.055)}
.page-nodes .manual-card-title{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}.page-nodes .manual-card-title b{font-size:17px;color:#102543}.page-nodes .manual-card-title span{font-size:12px;color:#7a8ba3}
.page-nodes .egress-manual-form{display:grid;grid-template-columns:1.05fr 1fr .9fr auto;gap:10px;align-items:end}.page-nodes .egress-manual-form label{min-width:0}.page-nodes .egress-manual-form .btn{height:46px;white-space:nowrap}
.page-nodes .management-egress{margin-top:15px;padding:14px 16px;border:1px solid #dce7f4;border-radius:12px;background:#f7fbff;display:grid;grid-template-columns:minmax(220px,1fr) minmax(360px,1.4fr);gap:14px;align-items:center}.page-nodes .management-egress>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.page-nodes .management-egress>div span{font-size:12px;color:#6b7e98}.page-nodes .management-egress>div b{font-size:15px;color:#102543}.page-nodes .management-egress>div small{width:100%;font-size:11px;color:#8291a5}.page-nodes .management-egress-form{display:grid;grid-template-columns:1fr .8fr auto;gap:8px}.page-nodes .management-egress-form input{min-width:0}.page-nodes .management-egress-form .btn{white-space:nowrap}
.page-nodes .egress-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);gap:16px}.page-nodes .egress-grid>.card{margin:0;min-width:0}.page-nodes .egress-discovered-card .table-wrap,.page-nodes .egress-bound-card .table-wrap{min-height:250px}.page-nodes .egress-discovered-card table{min-width:760px}.page-nodes .egress-bound-card table{min-width:860px}
.page-nodes .egress-row-actions{display:flex;gap:6px;flex-wrap:wrap}.page-nodes .egress-row-actions form{display:inline-flex}.page-nodes .egress-row-actions .btn{min-height:34px;padding:6px 10px;font-size:11px;box-shadow:none}.page-nodes .egress-discovered-card input[list]{min-width:170px}
.page-nodes .egress-discovered-card .bottom-toolbar{display:flex;justify-content:flex-end;padding-top:12px}.page-nodes .egress-discovered-card .bottom-toolbar .btn{min-width:180px}
@media(min-width:1800px){.page-nodes .egress-binding-head{padding:26px 28px}.page-nodes .egress-binding-head h2{font-size:26px}.page-nodes .egress-manual-card{padding:24px 26px}.page-nodes .manual-card-title b{font-size:20px}.page-nodes .egress-manual-form{gap:12px}.page-nodes .egress-grid{gap:20px}.page-nodes .egress-row-actions .btn{font-size:12px;min-height:36px}}
@media(max-width:1280px){.page-nodes .egress-grid{grid-template-columns:1fr}.page-nodes .management-egress{grid-template-columns:1fr}.page-nodes .egress-manual-form{grid-template-columns:1fr 1fr}.page-nodes .egress-manual-form .btn{width:100%}}
@media(max-width:760px){.page-nodes .egress-binding-head{padding:16px;align-items:flex-start;flex-direction:column}.page-nodes .egress-binding-head form,.page-nodes .egress-binding-head .btn{width:100%}.page-nodes .egress-manual-card{padding:16px}.page-nodes .egress-manual-form{grid-template-columns:1fr}.page-nodes .management-egress{padding:12px}.page-nodes .management-egress-form{grid-template-columns:1fr}.page-nodes .egress-grid{grid-template-columns:1fr}.page-nodes .egress-discovered-card,.page-nodes .egress-bound-card{padding:15px}.page-nodes .egress-row-actions{min-width:220px}}

/* R17.4 simple egress + realtime traffic */
.page-nodes .live-traffic-card,.page-nodes .egress-simple{margin:18px 0;background:#fff;border:1px solid #e3eaf4;border-radius:18px;box-shadow:0 10px 30px rgba(30,72,125,.055);padding:22px 24px}
.page-nodes .live-head,.page-nodes .egress-simple-head,.page-nodes .simple-section-title{display:flex;align-items:center;justify-content:space-between;gap:16px}
.page-nodes .live-head h2,.page-nodes .egress-simple-head h2{margin:0 0 5px;font-size:22px;color:#102643}.page-nodes .live-head p,.page-nodes .egress-simple-head p,.page-nodes .simple-section-title p{margin:0;color:#7a8ba2;font-size:12px}
.page-nodes .live-dot{display:flex;align-items:center;gap:7px;color:#72849d;font-size:11px;white-space:nowrap}.page-nodes .live-dot i{width:8px;height:8px;border-radius:50%;background:#1cc88a;box-shadow:0 0 0 4px #e7fbf3}
.page-nodes .traffic-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.page-nodes .traffic-stat{border:1px solid #e5ecf5;background:#fbfdff;border-radius:14px;padding:15px 16px;min-width:0}.page-nodes .traffic-stat>span{display:block;color:#71839d;font-size:12px}.page-nodes .traffic-stat>b{display:block;margin-top:5px;color:#0e2848;font-size:22px;line-height:1.2}.page-nodes .traffic-stat>small{display:block;margin-top:5px;color:#99a6b8;font-size:10px}
.page-nodes .smart-qos-form{display:grid;grid-template-columns:140px 1.1fr repeat(5,minmax(118px,.8fr)) 120px;gap:9px;align-items:end;padding:15px;border:1px solid #e5ecf5;border-radius:14px;background:#f8fbff}.page-nodes .smart-qos-form label>span{display:block;font-size:11px;color:#60738e;margin-bottom:5px}.page-nodes .smart-qos-form input,.page-nodes .smart-qos-form select{height:42px;min-width:0}.page-nodes .smart-save{height:42px;white-space:nowrap}
.page-nodes .smart-switch{height:42px;display:flex!important;align-items:center;gap:9px;padding:0 10px;border:1px solid #dce7f4;background:#fff;border-radius:10px}.page-nodes .smart-switch>input{position:absolute;opacity:0;pointer-events:none}.page-nodes .smart-switch>span{display:block!important;width:34px;height:20px;border-radius:999px;background:#cdd7e4;position:relative;margin:0!important;flex:0 0 auto}.page-nodes .smart-switch>span:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.18s}.page-nodes .smart-switch>input:checked+span{background:#1889f8}.page-nodes .smart-switch>input:checked+span:after{transform:translateX(14px)}.page-nodes .smart-switch>b{font-size:12px;color:#17304e}
.page-nodes .input-unit{display:flex}.page-nodes .input-unit input{border-radius:10px 0 0 10px}.page-nodes .input-unit em{height:42px;padding:0 9px;display:flex;align-items:center;background:#eef4fb;border:1px solid #d9e4f1;border-left:0;border-radius:0 10px 10px 0;color:#6e819b;font-size:10px;font-style:normal}
.page-nodes .smart-hint{margin-top:10px;padding:10px 12px;border-radius:10px;background:#eef7ff;color:#5f7694;font-size:11px}.page-nodes .smart-hint b{color:#176bc2}
.page-nodes .egress-simple-head{padding-bottom:15px;border-bottom:1px solid #eef2f7}.page-nodes .egress-head-actions{display:flex;align-items:center;gap:8px}.page-nodes .egress-head-actions form{display:inline-flex}.page-nodes .manual-add{position:relative}.page-nodes .manual-add>summary{list-style:none;cursor:pointer}.page-nodes .manual-add>summary::-webkit-details-marker{display:none}.page-nodes .manual-add-panel{position:absolute;right:0;top:48px;z-index:20;width:520px;display:grid;grid-template-columns:1.1fr 1fr .8fr auto;gap:8px;padding:12px;background:#fff;border:1px solid #dce6f2;border-radius:12px;box-shadow:0 18px 45px rgba(26,61,106,.15)}.page-nodes .manual-add-panel input{min-width:0;height:40px}.page-nodes .manual-add-panel .btn{height:40px}
.page-nodes .management-ip-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;margin:14px 0;border:1px solid #e2eaf4;border-radius:12px;background:#fafcff}.page-nodes .management-ip-strip>div{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.page-nodes .management-ip-strip span{font-size:11px;color:#71839d}.page-nodes .management-ip-strip b{font-size:13px;color:#102643}.page-nodes .management-ip-strip small{color:#94a2b4;font-size:10px}.page-nodes .management-bind-inline{display:flex;align-items:center;gap:7px}.page-nodes .management-bind-inline input{width:150px;height:36px}.page-nodes .management-bind-inline .btn{height:36px;padding:5px 11px}
.page-nodes .simple-section-title{margin:17px 0 9px}.page-nodes .simple-section-title h3{margin:0 0 3px;font-size:15px;color:#102643}.page-nodes .count-chip{padding:4px 9px;border-radius:999px;background:#eef6ff;color:#1977d3;font-size:10px;font-weight:700}.page-nodes .bound-title{padding-top:9px;border-top:1px solid #eef2f7}.page-nodes .simple-egress-table,.page-nodes .bound-live-table{border:1px solid #e5ebf3;border-radius:12px;overflow:auto}.page-nodes .simple-egress-table table,.page-nodes .bound-live-table table{min-width:820px}.page-nodes .simple-egress-table th,.page-nodes .bound-live-table th{background:#f7faff}.page-nodes .simple-egress-table td,.page-nodes .bound-live-table td{vertical-align:middle}.page-nodes .simple-egress-table td:first-child small,.page-nodes .bound-live-table td:first-child small{display:block;color:#8a9ab0;font-size:10px;margin-top:3px}.page-nodes .simple-egress-table input{height:38px;min-width:190px}.page-nodes .bind-row-form{display:inline-flex}
.page-nodes .rate-cell{display:flex;flex-direction:column;gap:2px;white-space:nowrap}.page-nodes .rate-cell b{font-size:12px;color:#1679db}.page-nodes .rate-cell span{font-size:11px;color:#17a67a}.page-nodes .rate-cell small{font-size:9px;color:#94a2b4}.page-nodes .util-cell{min-width:100px}.page-nodes .util-cell>b{font-size:11px;color:#344b68}.page-nodes .util-cell>span{display:block;width:92px;height:6px;border-radius:999px;background:#edf2f7;margin-top:5px;overflow:hidden}.page-nodes .util-cell i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1bbd91,#1689f7);transition:width .35s}.page-nodes .simple-empty{min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#91a0b3;text-align:center}.page-nodes .simple-empty b{color:#4c617e;font-size:13px}.page-nodes .simple-empty span{font-size:11px}
.page-ips .ip-live-mini{display:flex;flex-direction:column;line-height:1.35;white-space:nowrap}.page-ips .ip-live-mini b{font-size:11px;color:#1679db}.page-ips .ip-live-mini span{font-size:10px;color:#18a57a}.page-ips .traffic-util-badge{display:inline-flex;min-width:50px;justify-content:center;padding:4px 7px;border-radius:999px;background:#eef7ff;color:#166fc7;font-size:10px;font-weight:700}
@media(max-width:1500px){.page-nodes .smart-qos-form{grid-template-columns:130px repeat(3,1fr);}.page-nodes .smart-save{width:100%}}
@media(max-width:980px){.page-nodes .traffic-stats{grid-template-columns:1fr 1fr}.page-nodes .smart-qos-form{grid-template-columns:1fr 1fr}.page-nodes .manual-add-panel{width:min(520px,calc(100vw - 40px));grid-template-columns:1fr 1fr}.page-nodes .management-ip-strip{align-items:flex-start;flex-direction:column}.page-nodes .management-bind-inline{width:100%}}
@media(max-width:760px){.page-nodes .live-traffic-card,.page-nodes .egress-simple{padding:15px;border-radius:14px}.page-nodes .live-head,.page-nodes .egress-simple-head{align-items:flex-start;flex-direction:column}.page-nodes .traffic-stats{grid-template-columns:1fr 1fr;gap:8px}.page-nodes .traffic-stat{padding:12px}.page-nodes .traffic-stat>b{font-size:18px}.page-nodes .smart-qos-form{grid-template-columns:1fr;padding:11px}.page-nodes .smart-switch{width:100%}.page-nodes .egress-head-actions{width:100%}.page-nodes .egress-head-actions>form,.page-nodes .egress-head-actions>form .btn,.page-nodes .manual-add,.page-nodes .manual-add>summary{width:100%}.page-nodes .manual-add-panel{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;grid-template-columns:1fr;z-index:120}.page-nodes .management-bind-inline{display:grid;grid-template-columns:1fr auto}.page-nodes .management-bind-inline input{width:100%}.page-nodes .simple-section-title{align-items:flex-start}.page-nodes .live-dot{white-space:normal}.page-ips .toolbar{align-items:stretch}.page-ips .toolbar form{width:100%}}

/* =====================================================================
   R17.5 MOBILE FIRST HOTFIX
   Phones may report a ~980px layout viewport when "desktop site" or vendor
   scaling is enabled.  Do not rely on a 760px breakpoint only.
   ===================================================================== */
@media (max-width:1100px), (hover:none) and (pointer:coarse) and (max-width:1400px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  .shell{display:block!important;width:100%!important;max-width:100%!important;grid-template-columns:none!important}
  aside#sidebar{position:fixed!important;inset:0 auto 0 0!important;left:0!important;top:0!important;width:min(82vw,320px)!important;height:100dvh!important;transform:translateX(-105%);transition:transform .22s ease!important;z-index:1000!important;overflow-y:auto!important;box-shadow:18px 0 45px rgba(3,22,49,.28)!important}
  body.menu-open aside#sidebar{transform:translateX(0)!important}
  .mobile-overlay{display:block!important;opacity:0;visibility:hidden;pointer-events:none;transition:.2s;z-index:990!important}
  body.menu-open .mobile-overlay{opacity:1;visibility:visible;pointer-events:auto}
  .sidebar-close{display:grid!important}
  main{display:block!important;width:100%!important;max-width:100vw!important;min-width:0!important;padding:14px 12px 82px!important;margin:0!important;overflow:visible!important}
  header,.page-frame,.page-footer{width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important}
  header{min-height:54px!important;margin-bottom:14px!important;gap:8px!important;align-items:center!important}
  .title-wrap{min-width:0!important;gap:10px!important;flex:1 1 auto!important}
  .menu-toggle{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;border-radius:12px!important;background:linear-gradient(180deg,#168cff,#0875ef)!important;color:#fff!important;border:0!important;box-shadow:0 8px 20px rgba(14,119,239,.2)!important}
  .title-wrap h1{font-size:26px!important;line-height:1.12!important;white-space:normal!important;word-break:keep-all!important}
  .page-subtitle{display:block!important;font-size:11px!important;line-height:1.45!important;margin-top:4px!important;white-space:normal!important}
  .header-actions{display:none!important}
  .page-frame>*{max-width:100%!important;min-width:0!important}
  .card,.panel-card,.panel-section,.open-section,.probe-card,.server-table-card,.server-side-card,.server-create-card,.page-intro{width:100%!important;max-width:100%!important;min-width:0!important}
  .table-wrap,.server-list.table-wrap,.simple-egress-table,.bound-live-table{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important}
  .table-wrap table,.server-list table,.simple-egress-table table,.bound-live-table table{width:max-content!important;min-width:760px!important;max-width:none!important;table-layout:auto!important}
  table th,table td{writing-mode:horizontal-tb!important;word-break:normal!important;overflow-wrap:normal!important;white-space:nowrap!important}
  .empty,.table-empty-state{white-space:normal!important;writing-mode:horizontal-tb!important}

  /* dashboard */
  .metric-grid,.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .metric{min-height:126px!important;padding:13px!important;overflow:hidden!important}
  .metric-top{gap:8px!important}.metric-top>span:last-child{font-size:12px!important;line-height:1.25!important;white-space:normal!important;word-break:keep-all!important}
  .metric-icon{width:38px!important;height:38px!important;min-width:38px!important}
  .metric b{font-size:26px!important;margin-top:7px!important}.metric-foot{font-size:10px!important;left:13px!important;bottom:10px!important}
  .dashboard-hero{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:12px!important;padding:15px!important}
  .dashboard-hero-title{min-width:0!important}.dashboard-hero-title b{font-size:18px!important}.dashboard-hero-title span{font-size:11px!important}
  .dashboard-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;width:100%!important}
  .dashboard-actions .btn{width:100%!important;min-width:0!important;min-height:48px!important;padding:8px!important;font-size:13px!important;white-space:normal!important;text-align:center!important}
  .two{grid-template-columns:1fr!important;gap:12px!important}.two>.card{min-height:auto!important;padding:15px!important}
  .two>.card .table-wrap{min-height:220px!important}

  /* common toolbars/forms */
  .toolbar,.section-title,.section-head{max-width:100%!important;min-width:0!important}
  .toolbar{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:9px!important}
  .toolbar .inline-form,.section-title .inline-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;width:100%!important;gap:8px!important}
  .toolbar .inline-form input,.toolbar .inline-form select,.section-title .inline-form input{width:100%!important;min-width:0!important}
  .form-grid,.form-line,.new-customer-inline,.probe-form-row{grid-template-columns:1fr!important}
  .compact-form label,.compact-form label.grow{min-width:0!important;flex:1 1 100%!important}

  /* server management */
  .server-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .server-stat{min-height:126px!important;padding:13px!important}.server-stat-top{gap:8px!important}.server-stat-top i{width:38px!important;height:38px!important}.server-stat-top span{font-size:12px!important;white-space:normal!important}.server-stat b{font-size:27px!important}.server-stat-foot{left:13px!important;bottom:10px!important;font-size:10px!important}
  .server-quick{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;width:100%!important;padding:15px!important}
  .server-quick-title{min-width:0!important}.server-quick-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:8px!important}
  .server-quick-actions .btn{width:100%!important;min-width:0!important;height:auto!important;min-height:48px!important;padding:8px!important;font-size:12px!important;white-space:normal!important;text-align:center!important}
  .context-tabs{display:flex!important;max-width:100%!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:4px!important}.context-tabs a{flex:0 0 auto!important;white-space:nowrap!important}
  .server-main-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;gap:12px!important}
  .server-table-card{min-height:auto!important;padding:14px!important;overflow:hidden!important}.server-list.table-wrap{min-height:320px!important}
  .server-side-card{display:block!important;min-height:auto!important;padding:14px!important;overflow:hidden!important}
  .server-control-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important}
  .control-tile{display:grid!important;grid-template-columns:36px minmax(0,1fr) 14px!important;align-items:start!important;column-gap:8px!important;min-height:94px!important;padding:11px!important;overflow:hidden!important}
  .control-icon{width:36px!important;height:36px!important;min-width:36px!important}.control-copy{min-width:0!important}.control-copy b,.control-copy small,.control-tile b,.control-tile span{writing-mode:horizontal-tb!important;word-break:keep-all!important;overflow-wrap:break-word!important;white-space:normal!important;line-height:1.35!important}.control-copy b{font-size:13px!important}.control-copy small{font-size:10px!important}.control-arrow{align-self:center!important}
  .protocol-mini-list{grid-template-columns:1fr!important}.protocol-mini{width:100%!important}
  .server-head{flex-direction:column!important;align-items:flex-start!important}.server-meta{display:flex!important;flex-wrap:wrap!important;gap:5px!important}
  .server-detail-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;width:100%!important;gap:8px!important}
  .server-detail-actions form,.server-detail-actions>a{width:100%!important;min-width:0!important;flex:unset!important}.server-detail-actions .btn,.server-detail-actions button{width:100%!important;min-width:0!important;white-space:normal!important;min-height:44px!important}
  .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .topology{max-width:100%!important;overflow-x:auto!important;flex-wrap:nowrap!important}.topology-node{flex:0 0 auto!important}
  .copy-box{grid-template-columns:1fr!important}.copy-box code{white-space:pre-wrap!important;word-break:break-all!important}

  /* IP management */
  .page-ips .toolbar{display:grid!important;grid-template-columns:1fr!important}.page-ips .toolbar>*,.page-ips .toolbar form{width:100%!important;max-width:100%!important}
  .page-ips .toolbar .row-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}.page-ips .toolbar .row-actions .btn{width:100%!important}
  .page-ips .table-wrap{min-height:330px!important}

  /* quality */
  .quality-info{display:grid!important;grid-template-columns:44px minmax(0,1fr) 40px!important;align-items:start!important;gap:10px!important;padding:13px!important}
  .quality-info>i{width:44px!important;height:44px!important}.quality-info>div{min-width:0!important}.quality-info b,.quality-info span{writing-mode:horizontal-tb!important;white-space:normal!important;word-break:normal!important}.quality-info-close{position:static!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important}
  .probe-layout{grid-template-columns:1fr!important;gap:12px!important}.probe-card{min-height:auto!important;padding:15px!important}.probe-card-head{align-items:flex-start!important}.probe-card-head h2{font-size:18px!important}.probe-card-head p{white-space:normal!important}
  .probe-actions .btn{width:100%!important;min-width:0!important}.quality-history{min-height:auto!important;padding:15px!important}.quality-history .section-title{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}.quality-history .section-title .inline-form{grid-template-columns:minmax(0,1fr) auto auto!important}.quality-history .table-wrap{min-height:320px!important}

  /* quick open */
  .page-quick-open .open-layout{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:12px!important}.page-quick-open .open-main,.page-quick-open .open-preview{width:100%!important;max-width:100%!important;min-width:0!important}.page-quick-open .open-preview{position:static!important;order:2!important}.page-quick-open .open-section{padding:14px!important}.page-quick-open .mode-picker{grid-template-columns:1fr!important}.page-quick-open .date-field{grid-template-columns:1fr!important}.page-quick-open .date-presets{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}.page-quick-open .date-presets button{min-width:0!important;padding:0 4px!important;font-size:11px!important}.page-quick-open .preview-body{padding:12px!important}.page-quick-open .preview-protocols{margin:10px 0!important}.page-quick-open .quick-form-with-dock{padding-bottom:84px!important}.page-quick-open .open-submit-dock{position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:82px minmax(0,1fr)!important;gap:8px!important;padding:9px 10px calc(9px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(14px)!important;z-index:970!important;border-top:1px solid #e2eaf4!important}.page-quick-open .open-cancel,.page-quick-open .open-dock-submit{width:100%!important;min-width:0!important;height:46px!important;font-size:12px!important;padding:6px!important}

  /* R17.4 live traffic */
  .page-nodes .traffic-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.page-nodes .smart-qos-form{grid-template-columns:1fr!important}.page-nodes .management-bind-inline{grid-template-columns:1fr!important}.page-nodes .management-bind-inline .btn{width:100%!important}.page-nodes .manual-add-panel{left:10px!important;right:10px!important;bottom:10px!important;max-height:72dvh!important;overflow:auto!important}
}

@media (max-width:430px){
  main{padding-left:10px!important;padding-right:10px!important}
  .metric-grid,.grid,.server-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .metric,.server-stat{padding:11px!important;min-height:118px!important}
  .metric-top>span:last-child,.server-stat-top span{font-size:11px!important}.metric b,.server-stat b{font-size:24px!important}
  .dashboard-actions,.server-quick-actions,.server-detail-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .server-control-grid{grid-template-columns:1fr!important}.control-tile{min-height:76px!important}
  .quality-history .section-title .inline-form{grid-template-columns:1fr 1fr!important}.quality-history .section-title .inline-form input{grid-column:1/-1!important}
}

/* R17.5 network optimization status */
.page-nodes .network-status-card{margin:18px 0;background:#fff;border:1px solid #e3eaf4;border-radius:18px;box-shadow:0 10px 30px rgba(30,72,125,.055);padding:20px 22px}.page-nodes .network-status-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.page-nodes .network-status-head h2{margin:0 0 4px;font-size:20px}.page-nodes .network-status-head p{margin:0;color:#74859d;font-size:11px}.page-nodes .network-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.page-nodes .network-status-grid>div{padding:13px 14px;border:1px solid #e5ecf5;border-radius:12px;background:#f9fbfe}.page-nodes .network-status-grid span,.page-nodes .network-status-grid small{display:block}.page-nodes .network-status-grid span{font-size:11px;color:#72849d}.page-nodes .network-status-grid b{display:block;margin:5px 0 3px;font-size:15px;color:#15304e}.page-nodes .network-status-grid small{font-size:10px;color:#97a4b6}.page-nodes .ok-text{color:#079765!important}.page-nodes .warn-text{color:#b67500!important}.page-nodes .network-status-note{margin-top:10px;padding:9px 11px;background:#eef7ff;border-radius:9px;color:#5d7593;font-size:10px}
@media (max-width:1100px), (hover:none) and (pointer:coarse) and (max-width:1400px){.page-nodes .network-status-card{padding:14px!important}.page-nodes .network-status-head{align-items:flex-start!important;flex-direction:column!important}.page-nodes .network-status-head form,.page-nodes .network-status-head .btn{width:100%!important}.page-nodes .network-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.page-nodes .network-status-grid>div{padding:11px!important}.page-nodes .network-status-grid b{font-size:13px!important}}


/* =====================================================================
   R17.6 MOBILE + SMART QOS POLISH
   ===================================================================== */
.page-nodes .smart-qos-form{grid-template-columns:132px minmax(170px,1.15fr) repeat(7,minmax(118px,.82fr)) 126px;gap:10px}
.page-nodes .smart-qos-form .qos-wide{min-width:170px}
.page-nodes .input-unit{display:grid;grid-template-columns:minmax(0,1fr) 54px;width:100%;min-width:0}
.page-nodes .input-unit input{width:100%;min-width:0}
.page-nodes .input-unit em{width:54px;justify-content:center;padding:0 6px;white-space:nowrap}
.mobile-ops-open,.mobile-ops-close,.server-ops-overlay{display:none}
@media(max-width:1500px){.page-nodes .smart-qos-form{grid-template-columns:132px repeat(4,minmax(145px,1fr))}.page-nodes .smart-save{width:100%}}

@media (max-width:1100px), (hover:none) and (pointer:coarse) and (max-width:1400px){
  body{font-size:14px!important}
  .mobile-ops-open{display:inline-flex!important}
  .server-main-grid{display:block!important}
  .server-side-card{display:none!important}
  .server-ops-overlay{position:fixed!important;inset:0!important;background:rgba(5,24,50,.48)!important;z-index:1080!important}
  body.server-ops-open .server-ops-overlay{display:block!important}
  body.server-ops-open .server-side-card{display:block!important;position:fixed!important;left:10px!important;right:10px!important;top:76px!important;bottom:12px!important;width:auto!important;max-width:none!important;min-width:0!important;height:auto!important;margin:0!important;z-index:1090!important;overflow-y:auto!important;overflow-x:hidden!important;border-radius:18px!important;padding:18px 14px 18px!important;box-shadow:0 22px 70px rgba(4,25,55,.28)!important}
  .mobile-ops-close{display:grid!important;position:sticky!important;top:0!important;margin-left:auto!important;width:40px!important;height:40px!important;place-items:center!important;padding:0!important;border-radius:12px!important;background:#eef5ff!important;color:#16365f!important;box-shadow:none!important;z-index:3!important}
  body.server-ops-open{overflow:hidden!important}
  .server-side-card .section-title{padding-right:4px!important}
  .server-side-card .server-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .server-side-card .control-tile{min-height:104px!important;grid-template-columns:40px minmax(0,1fr) 14px!important;padding:12px!important}
  .server-side-card .control-copy b{font-size:14px!important;white-space:normal!important;word-break:keep-all!important}
  .server-side-card .control-copy small{font-size:11px!important;line-height:1.45!important}
  .server-side-card .protocol-mini-list{grid-template-columns:1fr!important}

  .page-nodes .smart-qos-form{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .page-nodes .smart-qos-form .smart-switch,.page-nodes .smart-qos-form .qos-wide,.page-nodes .smart-qos-form .smart-save{grid-column:1/-1!important}
  .page-nodes .input-unit{grid-template-columns:minmax(0,1fr) 50px!important}.page-nodes .input-unit em{width:50px!important}
  .page-nodes .smart-hint{line-height:1.6!important}

  /* Never compress content into vertical Chinese glyphs. */
  .page-frame,.card,.panel-card,.panel-section,.server-table-card,.server-side-card,.quality-history,.probe-card{writing-mode:horizontal-tb!important}
  h1,h2,h3,b,span,p,a,button,th,td,label,small{writing-mode:horizontal-tb!important}
  .server-table-card .table-wrap,.page-ips .table-wrap,.quality-history .table-wrap{overflow-x:auto!important;max-width:100%!important}
  .server-table-card table,.page-ips table,.quality-history table{min-width:860px!important;width:max-content!important}
}

@media(max-width:560px){
  main{padding:10px 9px 82px!important}
  header{margin-bottom:10px!important}.title-wrap h1{font-size:23px!important}
  .menu-toggle{width:42px!important;height:42px!important;min-width:42px!important}
  .metric-grid,.grid,.server-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .metric,.server-stat{min-height:112px!important;padding:11px!important;border-radius:13px!important}
  .dashboard-actions,.server-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .dashboard-actions .btn,.server-quick-actions .btn{min-height:46px!important;font-size:12px!important}
  .dashboard-hero,.server-quick{padding:13px!important}
  .server-side-card .server-control-grid{grid-template-columns:1fr!important}
  .server-side-card .control-tile{min-height:78px!important}
  .page-nodes .smart-qos-form{grid-template-columns:1fr!important}.page-nodes .smart-qos-form>*{grid-column:auto!important}.page-nodes .smart-qos-form .smart-switch,.page-nodes .smart-qos-form .qos-wide,.page-nodes .smart-qos-form .smart-save{grid-column:1!important}
  .page-quick-open .open-preview{padding:0!important}.page-quick-open .preview-head{padding:13px!important}.page-quick-open .preview-summary{margin:0 12px 12px!important}.page-quick-open .preview-protocols{display:grid!important;grid-template-columns:1fr!important}
  .probe-layout{display:grid!important;grid-template-columns:1fr!important}.probe-card{width:100%!important}.quality-info{width:100%!important}.quality-history{width:100%!important}
}


/* =====================================================================
   R17.7 MOBILE LAYOUT HOTFIX
   - main hamburger controls only #sidebar
   - server operation drawer is independent
   - cards never push the page wider than viewport
   - wide tables scroll inside their own card
   ===================================================================== */
html,body{max-width:100%;overflow-x:hidden}
.shell,main,.page-frame,header,.card,.panel-card,.panel-section,.server-table-card,.server-side-card,.dashboard-hero,.server-quick,.two,.open-layout,.open-main,.open-preview,.quality-history,.probe-layout,.probe-card{min-width:0}

@media (max-width:1100px), (hover:none) and (pointer:coarse) and (max-width:1400px){
  /* Main navigation. Never target every <aside>, because nodes also contains an <aside>. */
  #sidebar{
    position:fixed!important;left:0!important;top:0!important;bottom:0!important;
    width:min(286px,84vw)!important;height:100dvh!important;z-index:1200!important;
    transform:translateX(-105%)!important;transition:transform .22s ease!important;
    overflow-y:auto!important;overflow-x:hidden!important;
  }
  body.menu-open #sidebar{transform:translateX(0)!important}
  body.menu-open{overflow:hidden!important}
  .mobile-overlay{display:block!important;position:fixed!important;inset:0!important;z-index:1180!important;background:rgba(4,24,50,.50)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:.2s ease!important}
  body.menu-open .mobile-overlay{opacity:1!important;visibility:visible!important;pointer-events:auto!important}

  /* Server operations drawer is a different component and only opens via serverOps(). */
  body:not(.server-ops-open) .page-nodes .server-side-card{display:none!important}
  body.server-ops-open .page-nodes .server-side-card{
    display:block!important;position:fixed!important;left:10px!important;right:10px!important;
    top:68px!important;bottom:10px!important;width:auto!important;height:auto!important;
    max-width:none!important;min-width:0!important;z-index:1220!important;overflow:auto!important;
    background:#fff!important;color:var(--text)!important;border-radius:16px!important;
    padding:12px!important;box-shadow:0 24px 70px rgba(4,25,55,.30)!important;
  }
  body.server-ops-open .server-ops-overlay{display:block!important;position:fixed!important;inset:0!important;z-index:1210!important;background:rgba(4,24,50,.50)!important}
  body.server-ops-open{overflow:hidden!important}
  .page-nodes .mobile-ops-close{display:grid!important;position:sticky!important;top:0!important;margin-left:auto!important;width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;place-items:center!important;background:#eef5ff!important;color:#16365f!important;box-shadow:none!important;z-index:6!important}

  /* Keep every page inside viewport. */
  main{width:100%!important;max-width:100%!important;padding:12px!important;overflow-x:hidden!important}
  header,.page-frame{width:100%!important;max-width:100%!important;min-width:0!important}
  .card,.panel-card,.panel-section,.server-table-card,.dashboard-hero,.server-quick,.quality-history,.probe-card,.open-section,.open-preview{width:100%!important;max-width:100%!important;min-width:0!important}
  .section-title,.section-head,.toolbar,.server-filter-row{min-width:0!important}
  h1,h2,h3,p,b,span,small,a,label,button{max-width:100%}

  /* Dashboard and server quick buttons become a clean 2x2 grid. */
  .dashboard-hero,.server-quick{display:block!important}
  .dashboard-hero-title,.server-quick-title{margin-bottom:12px!important}
  .dashboard-actions,.server-quick-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important}
  .dashboard-actions .btn,.server-quick-actions .btn{width:100%!important;min-width:0!important;padding-left:8px!important;padding-right:8px!important;white-space:normal!important;text-align:center!important}

  /* Dashboard panels. Wide data belongs inside a horizontal scroller, not outside the card. */
  .two{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:12px!important}
  .table-wrap,.server-list.table-wrap{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important}
  .page-dashboard .table-wrap table{min-width:560px!important;width:max-content!important}
  .page-nodes .server-list table{min-width:980px!important;width:max-content!important}
  .page-ips .table-wrap table{min-width:900px!important;width:max-content!important}
  .page-quality .quality-history .table-wrap table{min-width:820px!important;width:max-content!important}

  /* IP / quality toolbars stack instead of squeezing Chinese into one-character columns. */
  .page-ips .toolbar,.page-quality .quality-history .section-title{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;gap:10px!important}
  .page-ips .toolbar-actions,.page-quality .quality-history .inline-form{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:8px!important}
  .page-quality .quality-history .inline-form input{grid-column:1/-1!important;width:100%!important;min-width:0!important}
  .page-ips .toolbar-actions .btn,.page-quality .quality-history .inline-form .btn{width:100%!important;min-width:0!important}

  /* Quality cards always one column on phones/tablets. */
  .probe-layout{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:12px!important}
  .probe-card{min-height:0!important}
  .quality-info{width:100%!important;max-width:100%!important;padding:13px 54px 13px 13px!important}

  /* Quick-open: preview is below form; the bottom submit dock never escapes the viewport. */
  .page-quick-open .open-layout{display:grid!important;grid-template-columns:1fr!important;width:100%!important;max-width:100%!important;gap:12px!important}
  .page-quick-open .open-main,.page-quick-open .open-preview{width:100%!important;max-width:100%!important;min-width:0!important}
  .page-quick-open .open-preview{position:static!important;order:2!important;min-height:0!important}
  .page-quick-open .preview-hero{display:none!important}
  .page-quick-open .open-submit-dock{left:0!important;right:0!important;width:100%!important;max-width:100%!important;grid-template-columns:82px minmax(0,1fr)!important;padding:9px 10px calc(9px + env(safe-area-inset-bottom))!important}
  .page-quick-open .open-cancel,.page-quick-open .open-dock-submit{width:100%!important;min-width:0!important;white-space:normal!important}
}

@media(max-width:560px){
  main{padding:10px 9px 84px!important}
  header{gap:8px!important;margin-bottom:10px!important}.title-wrap{min-width:0!important}.title-wrap h1{font-size:23px!important;white-space:normal!important}
  .metric-grid,.grid,.server-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .metric,.server-stat{min-width:0!important;min-height:116px!important;padding:11px!important}
  .metric-top,.server-stat-top{min-width:0!important}.metric-top>span:last-child,.server-stat-top span{min-width:0!important;white-space:normal!important;line-height:1.25!important}
  .dashboard-actions,.server-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-nodes .server-control-grid{grid-template-columns:1fr!important}
  .page-nodes .control-tile{grid-template-columns:40px minmax(0,1fr) 14px!important;min-height:78px!important}
  .page-nodes .control-copy b,.page-nodes .control-copy small{word-break:normal!important;overflow-wrap:anywhere!important;white-space:normal!important}
  .page-quality .quality-history .section-title{align-items:stretch!important}
  .page-quality .quality-history .section-title h2{font-size:20px!important;white-space:normal!important}
}

/* R17.7 QoS: keep live stats visible, advanced settings collapsed by default. */
.page-nodes .smart-qos-details{margin-top:14px;border:1px solid #e3ebf5;border-radius:12px;background:#fbfdff;overflow:hidden}
.page-nodes .smart-qos-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:13px 15px;list-style:none;font-weight:800;color:#193455}
.page-nodes .smart-qos-details>summary::-webkit-details-marker{display:none}
.page-nodes .smart-qos-details>summary:after{content:'＋';font-size:20px;color:#1677ff;font-weight:500}
.page-nodes .smart-qos-details[open]>summary:after{content:'－'}
.page-nodes .smart-qos-details>summary small{margin-left:auto;color:#8292a8;font-size:11px;font-weight:500}
.page-nodes .smart-qos-settings-body{padding:14px;border-top:1px solid #e7eef7;background:#fff}
@media(max-width:560px){.page-nodes .smart-qos-details>summary{padding:12px}.page-nodes .smart-qos-details>summary small{display:none}.page-nodes .smart-qos-settings-body{padding:10px}}