:root{--bg:#f7f8fc;--surface:#fff;--text:#262736;--muted:#707386;--line:#eeedf4;--purple:#7355d8;--purple-dark:#6144c5;--purple-light:#f1edff;--green:#29a37f;--orange:#dc9648;--red:#d26574;--shadow:0 5px 24px #29214504;font-family:"Segoe UI","Microsoft YaHei UI","Microsoft YaHei",sans-serif;color:var(--text);font-size:14px;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{color:var(--purple);text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b6a5f0;outline-offset:3px}button{border:0}svg{width:20px;height:20px;flex:none;vertical-align:middle}button svg{width:17px;height:17px}h1,h2,h3,p{margin:0}h1{font-size:26px;font-weight:650;letter-spacing:-.8px}h2{font-size:16px;font-weight:650}h3{font-size:14px}.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}.sidebar{background:#fff;border-right:1px solid var(--line);padding:32px 20px 20px;position:fixed;inset:0 auto 0 0;width:232px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:12px;padding:0 9px 37px}.brand-mark{width:42px;height:42px;border-radius:12px;background:var(--purple);display:grid;place-items:center;color:white;box-shadow:0 4px 12px #7355d824}.brand-mark svg{width:29px;height:29px}.brand strong{font-size:21px;letter-spacing:3px}.brand small{display:block;font-size:10px;color:var(--muted);letter-spacing:1.7px;margin-top:4px}.nav-label{font-size:10px;color:#aaaaba;letter-spacing:1px;padding:0 15px 11px}.nav{display:flex;flex-direction:column;gap:5px}.nav-item{display:flex;align-items:center;gap:12px;background:transparent;color:#868697;width:100%;padding:13px 15px;border-radius:9px;text-align:left;font-size:13px}.nav-item svg{width:19px;height:19px}.nav-item.active{background:var(--purple-light);color:var(--purple);font-weight:600}.nav-item:hover:not(.active){background:#f8f8fb;color:#55546c}.nav-item .count{margin-left:auto;font-size:11px;background:#e6ddff;color:var(--purple);border-radius:5px;padding:2px 6px;min-width:22px;text-align:center}.nav-secondary{margin-top:30px}.sidebar-bottom{margin-top:auto}.local-card{margin:35px 3px 20px;border:1px solid #ebe8f5;background:linear-gradient(140deg,#faf8ff,#fdfdff);padding:15px;border-radius:11px}.local-card-icon{color:var(--purple);display:flex;align-items:center;gap:8px;font-weight:600;font-size:12px}.local-card p{font-size:11px;line-height:1.9;color:#9691aa;margin-top:8px}.local-card .local-line{display:flex;align-items:center;gap:5px;margin-top:12px;font-size:10px;color:#8a83a0}.user-card{border-top:1px solid var(--line);padding:19px 9px 0;display:flex;align-items:center;gap:10px}.avatar{width:33px;height:33px;background:#eae4fb;color:var(--purple);border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600}.user-card strong{font-size:11px}.user-card small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.user-card>svg{margin-left:auto;color:#a6a4b4;width:17px}.workspace{grid-column:2;min-width:0}.topbar{height:77px;border-bottom:1px solid var(--line);background:#ffffffc9;display:flex;align-items:center;justify-content:space-between;padding:0 37px;gap:20px}.breadcrumb{font-size:11px;color:#a1a0af;display:flex;align-items:center;gap:11px}.breadcrumb svg{width:15px;color:#a7a2b4}.breadcrumb strong{font-weight:500;color:#555365}.top-actions{display:flex;align-items:center;gap:17px}.header-search{display:flex;align-items:center;gap:9px;border:1px solid #eceaf2;border-radius:7px;background:#fff;color:#aaa8b7;padding:8px 12px;font-size:11px}.header-search svg{width:14px;height:14px}.header-search kbd{font-family:inherit;font-size:9px;border:1px solid var(--line);padding:2px 5px;border-radius:4px;margin-left:25px;color:#aaa8b7}.divider{height:18px;width:1px;background:var(--line)}.icon-button{background:transparent;color:#9390a5;display:inline-flex;align-items:center;justify-content:center;padding:6px;border-radius:6px}.icon-button:hover{background:var(--purple-light);color:var(--purple)}.notification{position:relative}.notification:after{content:"";position:absolute;width:5px;height:5px;background:#d89c69;border:2px solid white;border-radius:50%;top:5px;right:7px}.mode-label{font-size:10px;padding:5px 9px;border:1px solid #e8e3f4;color:#8a75b8;background:#faf8ff;border-radius:5px;letter-spacing:.5px}.content{padding:31px 37px 24px;max-width:1680px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:23px}.eyebrow{font-size:10px;color:#a6a3b7;letter-spacing:1.6px;margin-bottom:9px}.page-heading p{margin-top:11px;font-size:12px;color:#9996a9;line-height:1.6}.heading-actions{display:flex;align-items:center;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:35px;padding:8px 13px;border-radius:7px;border:1px solid #e8e5f0;color:#807b94;background:white;font-size:11px;white-space:nowrap}.btn:hover{border-color:#cfc3ee;color:var(--purple)}.btn.primary{background:var(--purple);border-color:var(--purple);color:white;box-shadow:0 3px 7px #7355d813}.btn.primary:hover{background:var(--purple-dark)}.btn.danger{color:var(--red);border-color:#f0dce0;background:#fff9fa}.btn.quiet{border-color:transparent;background:transparent}.btn.small{min-height:28px;padding:5px 9px;font-size:10px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:26px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:18px 20px;box-shadow:var(--shadow)}.stat-top{display:flex;align-items:center;justify-content:space-between}.stat-label{font-size:11px;color:#8c889f}.stat-icon{width:32px;height:32px;background:#f3efff;color:#8765db;border-radius:9px;display:grid;place-items:center}.stat-icon.green{background:#edf9f4;color:#4db99a}.stat-icon.amber{background:#fff7eb;color:#e2af6b}.stat-icon.blue{background:#eef4fc;color:#7aa3d5}.stat-icon svg{width:18px;height:18px}.stat-value{display:flex;align-items:baseline;gap:8px;margin:10px 0 9px}.stat-value strong{font-size:30px;line-height:1.1;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-1px}.stat-value small{font-size:11px;color:#aaa5b8}.stat-note{font-size:10px;color:#aaa5b5;display:flex;align-items:center;gap:6px}.stat-note .accent{color:#74b69f}.dot{width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block;flex:none}.overview-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:23px;align-items:start}.panel{border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:var(--shadow);min-width:0;overflow:hidden}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:20px 21px 15px;gap:10px}.panel-header h2{font-size:14px;display:flex;align-items:center;gap:9px}.panel-header .sub-count{font-size:10px;color:#aeabbc;font-weight:400}.panel-header p{font-size:10px;color:#aaa5b7;margin-top:6px}.link-button{background:none;color:#9885bd;padding:0;display:inline-flex;align-items:center;gap:5px;font-size:10px}.link-button svg{width:12px;height:12px}.table-toolbar{display:flex;align-items:center;gap:9px;padding:0 21px 16px;flex-wrap:wrap}.search-field{display:flex;align-items:center;border:1px solid #edeaf3;border-radius:6px;background:#fff;gap:8px;padding:0 9px;min-width:130px;max-width:240px;flex:1}.search-field svg{width:14px;height:14px;color:#b2acbf}.search-field input{height:32px;min-width:0;width:100%;border:0;background:transparent;outline:0;font-size:10px;color:#686276}.search-field input::placeholder{color:#b3aec0}.filter{height:34px;border:1px solid #edeaf3;border-radius:6px;padding:0 8px;color:#8a829b;background:white;font-size:10px;max-width:170px}.filter.selected{color:var(--purple);background:#faf8ff;border-color:#e3daf6}.table-wrap{overflow:auto}.server-table{width:100%;border-collapse:collapse;white-space:nowrap}.server-table th{font-weight:400;text-align:left;background:#faf9fd;color:#a5a0b5;font-size:10px;padding:12px 16px;border-top:1px solid #f4f2f8;border-bottom:1px solid #f0edf5}.server-table td{padding:16px;font-size:11px;border-bottom:1px solid #f4f1f7;color:#847c94}.server-table th:first-child,.server-table td:first-child{padding-left:21px}.server-table th:last-child,.server-table td:last-child{padding-right:20px;text-align:right}.server-table tr:last-child td{border-bottom:0}.server-table tbody tr:hover{background:#fdfbff}.server-name-cell{display:flex;align-items:center;gap:11px}.server-glyph{width:31px;height:33px;border:1px solid #e8e0f6;background:#f6f2fd;color:#a38aca;border-radius:7px;display:grid;place-items:center}.server-glyph svg{width:17px;height:17px}.server-name{border:0;background:none;color:#60556f;padding:0;font-weight:550;font-size:11px;display:block;text-align:left}.server-name:hover{color:var(--purple)}.server-sub{font-size:9px;color:#b2aabf;display:block;margin-top:6px}.mono{font-family:"Cascadia Code",Consolas,monospace;font-variant-numeric:tabular-nums;font-size:10px}.ip-cell{display:flex;align-items:center;gap:7px}.copy-button{padding:0;border:0;background:none;color:#beb5cf}.copy-button svg{width:11px;height:11px}.badge{font-size:9px;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:5px;background:#eef8f3;color:#71aa96;border:1px solid #e3f1e9}.badge.off,.badge.unknown{color:#aca5b9;background:#f5f3f8;border-color:#ece8f2}.badge.operating{color:#caad70;background:#fff8e8;border-color:#f5eacd}.badge.error,.badge.suspended{color:#c38894;background:#fff1f4;border-color:#f5e1e6}.due-warning{color:#d1a06c}.due-warning small{display:block;font-size:9px;margin-top:5px}.row-actions{display:flex;justify-content:flex-end;gap:9px;align-items:center}.table-foot{padding:14px 21px;border-top:1px solid #f2eef7;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#b0a7bf;gap:8px}.pagination{display:flex;gap:5px;align-items:center}.pagination button{width:24px;height:23px;border:1px solid #ece7f3;border-radius:5px;color:#b6a9c8;background:#fff;font-size:10px;display:grid;place-items:center}.pagination button.current{background:#f0eafb;color:#8c70b6;border-color:#e6dcf3}.pagination svg{width:11px;height:11px}.right-column{display:flex;flex-direction:column;gap:19px}.distribution{padding:19px 19px 21px}.distribution h2,.renew-card h2{font-size:13px}.subtext{color:#aaa2b8;font-size:10px;margin-top:6px;line-height:1.7}.ring-wrap{position:relative;width:160px;height:160px;margin:20px auto 19px;display:grid;place-items:center}.ring-wrap svg{width:160px;height:160px;transform:rotate(-90deg)}.ring-track{fill:none;stroke:#f2eef8;stroke-width:12}.ring-segment{fill:none;stroke-width:12;stroke-linecap:round}.ring-center{position:absolute;text-align:center}.ring-center strong{font-size:27px;font-weight:600;letter-spacing:-.8px}.ring-center small{display:block;font-size:10px;color:#aaa1b8;margin-top:5px}.legend{display:flex;flex-direction:column;gap:12px;padding:0 3px}.legend-row{display:flex;align-items:center;font-size:10px;color:#aaa1b6;gap:7px}.legend-row strong{margin-left:auto;font-size:11px;font-weight:500;color:#81768f}.legend-dot{width:7px;height:7px;border-radius:2px;background:#8e70d4}.legend-dot.gray{background:#d9d0e9}.legend-dot.amber{background:#e6c083}.legend-dot.red{background:#daa3af}.renew-card{padding:19px;background:linear-gradient(145deg,#fffbf6,#fff)}.renew-title{display:flex;align-items:center;gap:8px;color:#8c7964}.renew-title svg{width:15px;height:15px;color:#d5b288}.renew-count{display:flex;align-items:baseline;gap:7px;margin:17px 0 12px}.renew-count strong{font-size:27px;font-weight:600;color:#a89071}.renew-count span{font-size:10px;color:#b4a492}.renew-item{padding:11px 0;border-top:1px solid #f4eee5;font-size:10px;display:flex;justify-content:space-between;gap:10px}.renew-item span{color:#a39a91;overflow:hidden;text-overflow:ellipsis}.renew-item strong{color:#c39b65;font-weight:500;white-space:nowrap}.renew-card>.link-button{margin-top:10px;color:#b1997b}.provider-panel{margin-top:23px}.provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 21px 19px}.provider-tile{display:flex;gap:12px;align-items:center;border:1px solid #eee9f5;border-radius:8px;padding:14px}.provider-logo{width:34px;height:34px;background:#f1ebfd;color:#9d84c3;display:grid;place-items:center;border-radius:8px}.provider-logo svg{width:20px;height:20px}.provider-tile strong{font-size:11px;font-weight:500;color:#81728f}.provider-tile small{font-size:9px;color:#b2a9bf;display:block;margin-top:6px}.provider-tile .provider-status{margin-left:auto;font-size:9px;color:#8db29d;display:flex;gap:5px;align-items:center}.provider-status.error{color:var(--red)}.bottom-note{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#b3aec0;padding-top:24px}.bottom-note span{display:flex;align-items:center;gap:5px}.bottom-note svg{width:12px;height:12px}.empty-state{padding:60px 20px;text-align:center;color:#9b92ab}.empty-state svg{width:38px;height:38px;color:#b9a6d6;margin-bottom:14px}.empty-state h3{font-size:14px;color:#837292}.empty-state p{font-size:11px;line-height:1.8;margin:12px 0 17px}.connection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.connection-card{padding:23px}.connection-card-header{display:flex;align-items:center;gap:13px;margin-bottom:18px}.connection-card-header strong{font-size:14px}.connection-card-header small{display:block;color:#a499b4;margin-top:7px;font-size:10px}.connection-meta{display:flex;flex-direction:column;gap:12px;margin:20px 0;font-size:11px;color:#aaa0b8}.connection-meta>div{display:flex;justify-content:space-between;gap:12px}.connection-meta strong{font-weight:500;color:#8d819e;overflow-wrap:anywhere;text-align:right}.connection-actions{display:flex;justify-content:space-between;padding-top:15px;border-top:1px solid var(--line)}.connection-error{font-size:11px;color:var(--red);line-height:1.8;padding:10px;background:#fff5f7;border-radius:6px;overflow-wrap:anywhere}.connection-hint{font-size:10px;color:#9c8bb8;line-height:1.8;padding:10px;background:#f7f3fd;border-radius:6px}.info-banner{border:1px solid #e8e1f5;background:#faf8fe;color:#9888af;font-size:11px;line-height:1.9;padding:16px 19px;border-radius:9px;margin-bottom:20px;display:flex;align-items:flex-start;gap:12px}.info-banner svg{color:#a18ac7;margin-top:3px}.info-banner a{color:var(--purple)}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.help-panel{padding:24px}.help-panel h2{margin-bottom:15px}.help-panel p,.help-panel li{font-size:12px;line-height:2;color:#9d91ae}.help-panel ul,.help-panel ol{padding-left:20px;margin:10px 0}.help-panel code{font-family:Consolas,monospace;font-size:11px;background:#f6f1fd;color:#8c6db0;padding:2px 6px;border-radius:4px;overflow-wrap:anywhere}.help-panel a{display:block;margin-top:12px;font-size:12px}.currency-label{font-size:10px;color:#aa9fb7}.cost-summary{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:21px}.cost-box{padding:19px 24px;background:#fff;border:1px solid var(--line);border-radius:9px;min-width:220px}.cost-box small{font-size:10px;color:#a092b0}.cost-box strong{font-size:25px;display:block;margin-top:10px;color:#806d98;font-weight:500}.cost-box p{font-size:10px;color:#b0a5bb;margin-top:8px}.log-table td{white-space:normal;line-height:1.8}.log-table td:last-child{text-align:left;min-width:220px}.initial-loading{min-height:100vh;display:grid;align-content:center;justify-items:center;gap:15px;color:#9685b4}.initial-loading p{font-size:12px}.loading-cube{font-size:50px;color:var(--purple)}.spinner{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}dialog{border:1px solid #ede7f4;padding:0;border-radius:15px;background:#fff;color:var(--text);box-shadow:0 20px 100px #34215425;max-width:calc(100vw - 28px);width:560px;max-height:92vh}dialog::backdrop{background:#30264138;backdrop-filter:blur(3px)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:23px 25px 18px;border-bottom:1px solid var(--line)}.modal-header h2{font-size:18px}.modal-header p{font-size:11px;color:#a193b0;margin-top:8px}.modal-body{padding:21px 25px;overflow:auto;max-height:65vh}.modal-footer{padding:16px 25px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:17px;min-width:0}.field label{font-size:11px;color:#847392;font-weight:500}.field label span{color:#bfb2cc;font-weight:400;margin-left:5px}.field input,.field select,.field textarea{width:100%;border:1px solid #e8dfef;border-radius:7px;background:#fff;padding:10px 11px;color:#7f6d90;font-size:12px;min-height:38px}.field input::placeholder,.field textarea::placeholder{color:#c1b5cc}.field small{color:#ad9abc;font-size:10px;line-height:1.8}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field-grid .field{margin-bottom:8px}.checkbox-label{display:flex;align-items:flex-start;gap:8px;font-size:11px;color:#9a84b1;line-height:1.8}.checkbox-label input{margin-top:4px;accent-color:var(--purple)}details{border:1px solid #ede5f6;border-radius:8px;padding:13px;margin:10px 0 16px}summary{cursor:pointer;color:#a28ab7;font-size:11px}details p{font-size:10px;line-height:1.8;color:#b09bbb;margin:12px 0}.route-grid{display:grid;grid-template-columns:75px 1fr;gap:8px;margin:10px 0}.route-grid label{grid-column:1/-1;font-size:10px;color:#a388b8}.route-grid input,.route-grid select{border:1px solid #e9dff3;border-radius:5px;padding:8px;min-width:0;font-size:10px;color:#9475ac}.form-message{font-size:11px;line-height:1.8;border-radius:7px;padding:10px 12px;margin-top:8px;background:#f4f8f5;color:#72a38a}.form-message.error{background:#fff3f6;color:#c38999}.hidden{display:none!important}.warning-box{border:1px solid #f3e1cf;background:#fff9f2;padding:14px;border-radius:8px;font-size:11px;line-height:1.9;color:#b19271;margin-bottom:18px}.confirm-target{background:#faf6ff;border:1px solid #ece1f8;padding:15px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-bottom:18px}.confirm-target strong{font-size:13px;color:#8964a5}.confirm-target small{display:block;font-size:10px;color:#b89dc9;margin-top:7px}.toast-region{position:fixed;bottom:25px;right:25px;z-index:100;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:calc(100vw - 40px)}.toast{background:#fff;border:1px solid #e3d8ef;padding:13px 18px;border-radius:9px;box-shadow:0 5px 30px #49306219;color:#9273a8;font-size:12px;max-width:440px;line-height:1.8;display:flex;gap:9px;align-items:center}.toast svg{width:16px}.toast.error{color:var(--red);border-color:#f0d7df}.mobile-menu{display:none}.screen-reader-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.muted{color:#b3a8c1}.error-note{color:var(--red)}
@media(min-width:1500px){.overview-grid{grid-template-columns:minmax(0,1fr) 300px}.server-table td{padding-top:19px;padding-bottom:19px}.content{padding-top:37px}.stat-card{padding:22px}.ring-wrap{margin:24px auto}}
@media(max-width:1250px){.shell{grid-template-columns:205px minmax(0,1fr)}.sidebar{width:205px;padding:28px 14px 18px}.content{padding:27px 25px}.topbar{padding:0 25px}.overview-grid{grid-template-columns:minmax(0,1fr) 245px;gap:17px}.stats-grid{gap:12px}.stat-card{padding:16px}.server-table td,.server-table th{padding-left:12px;padding-right:12px}.server-glyph{display:none}.connection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.server-table .product-column{display:none}.panel-header,.table-toolbar{padding-left:17px;padding-right:17px}}
@media(max-width:1060px){.overview-grid{grid-template-columns:minmax(0,1fr)}.right-column{display:grid;grid-template-columns:1fr 1fr}.distribution{display:grid;grid-template-columns:1fr 1fr;align-items:center}.distribution>h2,.distribution>.subtext{grid-column:1/-1}.ring-wrap{margin:12px auto;width:145px;height:145px}.ring-wrap svg{width:145px;height:145px}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-value strong{font-size:27px}.stat-note{font-size:9px}.header-search kbd{display:none}.heading-actions .btn{font-size:10px}.help-grid{grid-template-columns:1fr}}
@media(max-width:820px){.shell{grid-template-columns:176px minmax(0,1fr)}.sidebar{width:176px;padding:25px 10px 16px}.brand{gap:9px;padding-bottom:29px}.brand strong{font-size:18px}.brand-mark{width:35px;height:35px}.brand small{font-size:8px}.nav-item{font-size:11px;padding:12px}.local-card{padding:12px}.topbar{height:66px;padding:0 20px}.content{padding:24px 20px}.page-heading{align-items:flex-start}h1{font-size:23px}.page-heading p{font-size:10px}.heading-actions{gap:5px}.heading-actions .btn{padding:7px 9px}.heading-actions .btn svg{width:14px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.top-actions{gap:10px}.header-search{display:none}.provider-grid,.connection-grid{grid-template-columns:1fr}.right-column{grid-template-columns:1fr 1fr}.distribution{display:block}.distribution .legend{margin-top:17px}.server-table .region-column{display:none}.bottom-note{font-size:8px}.log-table td{font-size:10px}}
@media(max-width:600px){.shell{display:block}.sidebar{transform:translateX(-100%);transition:transform .2s;box-shadow:10px 0 50px #4d346329;width:220px}.sidebar.mobile-open{transform:translateX(0)}.workspace{display:block}.mobile-menu{display:inline-flex}.breadcrumb{gap:8px;font-size:10px}.topbar{height:61px;padding:0 16px}.top-actions{gap:10px}.top-actions .divider,.top-actions .avatar{display:none}.content{padding:23px 16px}.page-heading{flex-direction:column;gap:16px;margin-bottom:18px}.heading-actions{width:100%;justify-content:flex-end}.heading-actions .btn{font-size:11px;padding:8px 12px}h1{font-size:25px}.eyebrow{font-size:9px}.stats-grid{gap:11px;margin-bottom:19px}.stat-card{padding:15px}.stat-value strong{font-size:28px}.stat-note{font-size:9px}.stat-label{font-size:10px}.right-column{grid-template-columns:1fr}.distribution{display:grid;grid-template-columns:1fr 1fr}.ring-wrap{margin:14px 0}.distribution .legend{margin:0}.renew-item{padding:13px 0}.provider-grid{padding:0 15px 15px}.panel-header{padding:18px 15px 14px}.table-toolbar{padding:0 15px 14px;gap:7px}.search-field{max-width:100%;flex-basis:100%}.filter{flex:1;max-width:100%;font-size:10px}.table-foot{padding:13px 15px;font-size:9px}.server-table td{padding-top:15px;padding-bottom:15px}.server-table th:first-child,.server-table td:first-child{padding-left:15px}.bottom-note{line-height:1.8;align-items:flex-start;gap:15px}.bottom-note span:last-child{text-align:right}.cost-box{width:100%}.modal-header{padding:19px}.modal-body{padding:19px}.modal-footer{padding:15px 19px}.field-grid{grid-template-columns:1fr;gap:0}.help-panel{padding:20px}.info-banner{padding:14px;font-size:10px}.table-toolbar .btn{font-size:10px}.header-search{display:none}.toast-region{right:15px;bottom:15px}.connection-card{padding:20px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 460px;gap:100px;align-items:center;max-width:1100px;margin:auto;padding:64px 30px}.auth-intro .brand-mark{width:62px;height:62px;margin-bottom:32px}.auth-intro small{letter-spacing:3px;font-size:10px;color:#9178aa}.auth-intro h1{font-size:48px;line-height:1.4;letter-spacing:-2px;margin:24px 0;color:#6c4f87}.auth-intro p{font-size:15px;line-height:2;color:#8e779e}.auth-features{display:flex;flex-direction:column;gap:18px;margin-top:36px;font-size:13px;color:#8869a0}.auth-features span{display:flex;align-items:center;gap:12px}.auth-features svg{width:19px;height:19px}.auth-card{padding:38px;background:white;border:1px solid #e9dff0;border-radius:18px;box-shadow:0 20px 70px #6a478410}.auth-tabs{display:flex;gap:8px;padding:4px;background:#f7f3fb;border-radius:8px;margin-bottom:32px}.auth-tabs button{flex:1;border:0;background:transparent;padding:12px;border-radius:6px;color:#977eaa;font:inherit;font-size:13px;cursor:pointer}.auth-tabs button.active{background:white;color:#7350a2;box-shadow:0 2px 8px #4823650c}.auth-card h2{font-size:24px;color:#735a88}.auth-subtitle{font-size:12px;line-height:1.8;color:#9a85ab;margin:12px 0 26px}.auth-card .field{margin-top:18px}.auth-card input{height:44px;font-size:13px;color:#5e486e}.auth-submit{width:100%;justify-content:center;height:44px;margin-top:25px}.auth-privacy{font-size:10px;line-height:1.9;color:#9b87aa;margin-top:25px;padding-top:20px;border-top:1px solid #f0e8f5;display:flex;gap:9px}.auth-privacy svg{width:18px;min-width:18px;height:18px}.account-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}.account-actions .btn{font-size:10px;padding:6px 9px}.user-card strong{display:block;max-width:135px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){.auth-shell{gap:35px;grid-template-columns:1fr 400px}.auth-intro h1{font-size:36px}.auth-card{padding:28px}}@media(max-width:700px){.auth-shell{display:block;max-width:490px;padding:30px 20px}.auth-intro{margin:10px 0 30px}.auth-intro h1{font-size:30px;margin:14px 0}.auth-intro .brand-mark{width:40px;height:40px;margin-bottom:18px}.auth-intro p,.auth-features{display:none}.auth-card{padding:28px 24px}}

.admin-panel{margin-bottom:22px}.admin-panel .panel-header{display:flex;align-items:center;justify-content:space-between;gap:15px}.admin-settings-form{max-width:620px;padding:0 26px 26px}.admin-settings-form>p{color:#8e779e;font-size:12px;line-height:1.9;margin-bottom:20px}.registration-choice{display:flex;gap:13px;align-items:center;padding:20px;background:#f7f3fb;border:1px solid #e9dff0;border-radius:10px;margin:20px 0;cursor:pointer}.registration-choice input{width:20px;height:20px;accent-color:#8862b0}.registration-choice strong{display:block;font-size:13px;color:#735a88}.registration-choice small{display:block;font-size:11px;margin-top:7px;color:#9a85ab}.admin-settings-form .field{margin-bottom:20px}.admin-history{padding:0 26px 22px;color:#8e779e;font-size:12px}.admin-history>div{display:flex;gap:24px;padding:14px 0;border-bottom:1px solid #f0e8f5;flex-wrap:wrap}.admin-history strong{min-width:110px;color:#735a88;overflow-wrap:anywhere}.registration-closed{padding:12px 14px;border-radius:8px;background:#f7f3fb;border:1px solid #e9dff0;font-size:12px;color:#735a88;line-height:1.8;margin-bottom:18px}@media(max-width:600px){.admin-settings-form{padding:0 18px 20px}.admin-history{padding:0 18px 20px}.admin-history>div{gap:12px}.registration-choice{padding:15px}}

/* Provider workspace: readable cards, clear actions and a responsive edit form. */
.provider-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}
.provider-summary>div{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 24px;box-shadow:var(--shadow)}
.provider-summary p{margin:0}.provider-summary small{display:block;color:var(--muted);font-size:12px;margin-bottom:7px}
.provider-summary strong{font-size:28px;line-height:1.1;font-weight:650;color:var(--text)}.provider-summary em{font-style:normal;font-size:12px;font-weight:400;color:var(--muted);margin-left:8px}
.summary-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--purple);background:var(--purple-light);flex-shrink:0}.summary-icon svg{width:22px;height:22px}.summary-icon.success{background:#eaf7f1;color:#238466}.summary-icon.warning{background:#fff5e6;color:#996127}
.provider-security{display:flex;align-items:flex-start;gap:12px;background:#f0edfb;border:1px solid #e3ddf7;padding:16px 20px;border-radius:12px;margin-bottom:22px;color:#5d4e88}
.provider-security>svg{width:20px;height:20px;flex-shrink:0;margin-top:1px}.provider-security strong{display:block;font-size:12px;font-weight:600;margin-bottom:5px}.provider-security span{font-size:12px;line-height:1.8;display:block}
.provider-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}.provider-toolbar .search-field{max-width:480px;flex:1;background:#fff;border:1px solid #e2deeb;border-radius:9px;min-height:42px}.provider-toolbar .search-field input{font-size:13px;color:var(--text);width:100%;min-width:0}.provider-toolbar .filter{font-size:12px;background:#fff;border:1px solid #e2deeb;border-radius:9px;min-height:42px;color:#514965}.provider-toolbar>span{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.connection-card{padding:22px;border:1px solid #e7e3ee;border-radius:14px;display:flex;flex-direction:column;min-width:0;box-shadow:0 4px 18px #32274205;transition:border-color .18s,box-shadow .18s}
.connection-card:hover{border-color:#c6b8eb;box-shadow:0 8px 26px #4733730a}.connection-card.needs-attention{border-color:#e9c4c9}
.connection-card-header{display:flex;gap:12px;align-items:center;margin-bottom:17px}.connection-card-header .provider-logo{width:40px;height:40px;border-radius:11px;flex-shrink:0;background:var(--purple-light);color:var(--purple)}.connection-card-header .provider-logo svg{width:21px;height:21px}
.connection-title{min-width:0;flex:1}.connection-title strong{display:block;font-size:15px;font-weight:600;color:var(--text);line-height:1.5;overflow-wrap:anywhere}.connection-title small{display:block;font-size:11px;color:var(--muted);margin-top:4px}.connection-card-header .badge{font-size:10px;white-space:nowrap;margin:0;padding:6px 8px;flex-shrink:0}
.connection-endpoint{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;background:#f7f6fa;color:#655977;font-size:12px;line-height:1.5;margin-bottom:16px}.connection-endpoint svg{width:15px;height:15px;flex-shrink:0}.connection-endpoint span{overflow-wrap:anywhere;min-width:0}
.connection-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin:0 0 16px}.connection-meta>div{display:block;min-width:0}.connection-meta span{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}.connection-meta strong{display:block;font-size:12px;font-weight:500;color:#41374f;line-height:1.6;overflow-wrap:anywhere;max-width:none;text-align:left}
.connection-control{display:flex;align-items:flex-start;gap:7px;font-size:11px;color:#635476;border-top:1px dashed #e7e2ed;padding-top:13px;line-height:1.7}.connection-control svg{width:14px;height:14px;flex-shrink:0;margin-top:2px}
.connection-hint{font-size:11px;color:#786c87;line-height:1.8;margin:12px 0 16px;background:none;border:0;padding:0}.connection-error{background:#fff4f4;border:1px solid #f1d4d7;border-radius:8px;padding:12px;margin:12px 0 16px;line-height:1.8;color:#9e4651;font-size:12px;overflow-wrap:anywhere}.connection-error strong{font-size:12px}.connection-error p{margin:5px 0}.connection-error small{font-size:11px;color:#995c64}
.connection-actions{display:flex;gap:9px;align-items:center;padding-top:16px;border-top:1px solid var(--line);margin-top:auto;justify-content:flex-start}.connection-actions .btn{font-size:12px;padding:9px 12px;gap:6px;white-space:nowrap}.connection-actions .connection-remove{margin-left:auto;width:34px;height:34px;color:#8c7686}.connection-remove:hover{background:#fff0f1;color:#b84557}.provider-empty{grid-column:1/-1;padding:52px 24px;color:var(--muted)}.provider-empty h3{color:var(--text);font-size:18px}.provider-empty p{font-size:13px;line-height:1.8}.provider-empty>.btn{margin-top:15px}
#modal:has(.connection-form){width:700px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);border:1px solid #e5deee;box-shadow:0 24px 80px #2113372b}
.connection-form{display:flex;flex-direction:column;max-height:calc(100dvh - 34px)}.connection-form .modal-header{padding:22px 26px;background:#faf9fe;border-bottom:1px solid #e9e3f1;flex-shrink:0}.connection-form .modal-header h2{color:var(--text);font-size:20px;margin:5px 0 6px}.connection-form .modal-header p{font-size:12px;color:var(--muted);line-height:1.7;overflow-wrap:anywhere;margin:0}.form-eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:600;color:var(--purple)}
.connection-form .modal-body{padding:22px 26px;overflow-y:auto;min-height:0;max-height:none}.connection-form-section+.connection-form-section{border-top:1px solid #eee8f3;padding-top:20px;margin-top:6px}.connection-form-section h3{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#3d334d;margin:0 0 18px}.connection-form-section h3>span{font-size:10px;color:var(--purple);background:var(--purple-light);padding:4px 6px;border-radius:5px}.connection-form-section h3>small{font-size:10px;color:var(--muted);font-weight:400;margin-left:auto}
.connection-form .field label{font-size:12px;color:#4e435e;font-weight:500}.connection-form .field label span{font-size:10px;color:var(--muted);font-weight:400}.connection-form .field input,.connection-form .field select{font-size:13px;color:#302838;border:1px solid #ded6e8;border-radius:8px;padding:11px 12px;background:#fff;min-width:0}.connection-form input::placeholder{color:#8b8198;font-size:12px}.connection-form .field small{font-size:11px;color:#766888;line-height:1.8;margin-top:7px}.connection-form .field input:focus,.connection-form .field select:focus{border-color:var(--purple);box-shadow:0 0 0 3px #7355d812;outline:none}.connection-form .field input:disabled,.connection-form .field select:disabled{background:#f6f4f8;color:#877d91}
.credential-warning{display:flex;gap:8px;padding:11px 12px;margin-bottom:18px;border-radius:8px;background:#fff6e9;border:1px solid #ecd9b6;color:#8d5d21;font-size:12px;line-height:1.7}.credential-warning svg{width:17px;height:17px;flex-shrink:0;margin-top:2px}
.connection-form #legacy-controls{margin-bottom:18px;color:#675675;background:#faf8fd;border:1px solid #e7e0ef;border-radius:9px;padding:13px}.connection-form #legacy-controls summary{font-size:12px;color:#584668;cursor:pointer}.connection-form #legacy-controls p{font-size:11px;color:#766888;line-height:1.8}.connection-form .route-grid label{font-size:12px;color:#5b4a6a}.connection-form .route-grid input,.connection-form .route-grid select{font-size:12px;color:#4d3d5c}.connection-form .checkbox-label{font-size:11px;color:#655275;line-height:1.9}
.connection-form .form-message{font-size:12px;color:#326b51;background:#eef8f2;line-height:1.8}.connection-form .form-message.error{color:#a43f51;background:#fff1f3}
.connection-form .modal-footer{display:flex;gap:10px;align-items:center;padding:17px 26px;border-top:1px solid #e9e3f1;background:#fff;flex-shrink:0}.connection-form .modal-footer .btn{font-size:12px;padding:11px 14px}.connection-footer-note{display:flex;align-items:center;gap:6px;font-size:11px;color:#766888;margin-right:auto}.connection-footer-note svg{width:14px;height:14px}
@media(min-width:1251px) and (max-width:1500px){.connection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.provider-summary{gap:10px}.provider-summary>div{padding:17px 14px;gap:10px}.summary-icon{width:36px;height:36px}.provider-summary strong{font-size:24px}}
@media(max-width:600px){.provider-summary{gap:8px;margin-bottom:14px}.provider-summary>div{padding:14px 11px;display:block}.summary-icon{width:30px;height:30px;border-radius:8px;margin-bottom:9px}.summary-icon svg{width:17px;height:17px}.provider-summary small{font-size:11px}.provider-summary strong{font-size:25px}.provider-summary em{font-size:10px;margin-left:4px}.provider-security{padding:13px;gap:9px;margin-bottom:17px}.provider-security span{font-size:11px}.provider-toolbar{flex-wrap:wrap;gap:9px}.provider-toolbar .search-field{max-width:none;flex-basis:100%}.provider-toolbar .filter{flex:none;width:140px}.connection-card{padding:19px}.connection-form .modal-header{padding:19px}.connection-form .modal-header h2{font-size:18px}.connection-form .modal-body{padding:19px}.connection-form .modal-footer{padding:14px 19px;flex-wrap:wrap;gap:9px}.connection-footer-note{width:100%;font-size:10px}.connection-form .modal-footer .btn{flex:1;font-size:12px;padding:11px 9px}.connection-form-section h3>small{font-size:9px}.connection-form .field input,.connection-form .field select{font-size:16px}.connection-card-header .badge{font-size:9px}.provider-empty{padding:38px 19px}}
@media(prefers-reduced-motion:reduce){.connection-card{transition:none}}
.provider-toolbar .search-field:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px #7355d812}
.provider-toolbar .search-field input::placeholder{color:#80768f}.connection-actions .btn:not(.primary){color:#675477}
.connection-card .badge.on{color:#24785d;background:#eef8f2;border-color:#cce8d8}.connection-card .badge.error{color:#a14355;background:#fff2f4;border-color:#f0d2d9}.connection-card .badge.unknown{color:#6b5d7a;background:#f4f2f7;border-color:#e3ddea}
.power-config-preview{border:1px solid #e5dfed;border-radius:12px;padding:15px;margin-bottom:16px;min-width:0;background:white}
.power-config-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;font-size:12px;color:#43354e}
.power-config-title span{font-size:10px;padding:4px 7px;border-radius:6px;background:#f0ebf8;color:#72598f}
.power-endpoint{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:7px 0;font-size:12px}.power-endpoint b{font-size:10px;color:#237055;background:#e9f5ef;border-radius:4px;padding:3px 5px}
.power-config-preview code{font-family:Consolas,monospace;font-size:11px;overflow-wrap:anywhere;word-break:break-word;color:#59446d}.power-endpoint small{color:#8a7b98;font-size:10px}
.power-params{font-size:12px;line-height:1.9;margin:9px 0;color:#655672}.power-config-preview p{font-size:11px;line-height:1.8;margin:10px 0;color:#766888}
.power-config-preview a{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#7955a5;text-decoration:none}.power-config-preview a:hover{text-decoration:underline}.power-config-preview a svg{width:12px;height:12px}
@media(max-width:600px){.power-endpoint code{flex-basis:calc(100% - 52px)}}

/* Per-provider account information; no cross-currency total. */
.account-summary { margin: 12px 0; padding: 16px; border: 1px solid var(--border, #e5e9f0); border-radius: 14px; background: var(--surface, #f8fafc); }
.account-summary-title, .account-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.account-summary-title strong { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.account-summary-title svg { width: 16px; height: 16px; }
.account-balance { display: grid; gap: 6px; margin: 12px 0; }
.account-balance small, .account-meta, .account-summary > small, .account-note { color: #64748b; font-size: 12px; overflow-wrap: anywhere; }
.account-balance strong { font-size: 22px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.account-meta { margin: 7px 0; }
.account-note { line-height: 1.7; margin: 8px 0 0; }

/* System maintenance: visually separate destructive actions. */
.maintenance-section { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 20px; background: var(--surface, #fff); }
.maintenance-section .detail-buttons { gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.action-summary { margin: 18px 0; display: grid; gap: 10px; }
.action-summary > div { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 12px; }
.action-summary dt { color: #64748b; }
.action-summary dd { margin: 0; overflow-wrap: anywhere; }
#maintenance-form .field, #action-form .field { margin: 18px 0; }
#maintenance-form .checkbox-label, #action-form .checkbox-label { margin: 18px 0; align-items: flex-start; line-height: 1.6; }


/* Server details: one scroll owner; header and footer stay visible.
   Match drawer-header/drawer-body from app.js, not the removed detail-body markup. */
body:has(dialog[open]) { overflow: hidden; }
#detail-drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0;
  width: min(640px, 100vw); max-width: 100vw;
  height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
  overflow: hidden; border: 0; border-left: 1px solid #e5e7ef;
  border-radius: 20px 0 0 20px; background: #f6f7fb; color: #263044;
  box-shadow: -16px 0 64px #18243c24;
}
#detail-drawer[open] { display: flex; flex-direction: column; }
#detail-drawer::backdrop { background: #19233866; backdrop-filter: blur(3px); }
#detail-drawer .drawer-header {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  padding: 23px 26px; border-bottom: 1px solid #e5e7ef; background: #fff;
}
.drawer-server-icon { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: #f0ebff; color: #674acb; }
.drawer-server-icon svg { width: 25px; height: 25px; }
.drawer-heading { flex: 1; min-width: 0; }
.drawer-eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 600; color: #6b7285; letter-spacing: 1px; }
#detail-drawer .drawer-heading h2 { margin: 0; font-size: 21px; line-height: 1.4; font-weight: 700; color: #202b40; overflow-wrap: anywhere; }
.drawer-identity { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; font-size: 12px; line-height: 1.6; color: #657086; overflow-wrap: anywhere; }
#detail-drawer .drawer-close { width: 38px; height: 38px; align-self: flex-start; flex-shrink: 0; border: 1px solid #e8e9f0; border-radius: 11px; color: #606b80; background: #fff; }
#detail-drawer .drawer-close:hover { color: #6347c9; background: #f3efff; border-color: #ded5fa; }
#detail-drawer .drawer-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 20px 24px 24px; scrollbar-gutter: stable; overscroll-behavior: contain; }
.drawer-status-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 0 2px 18px; }
.detail-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#detail-drawer .badge { font-size: 12px; padding: 6px 10px; border-radius: 8px; font-weight: 600; }
#detail-drawer .badge.on { color: #137654; background: #eaf7f0; border-color: #c4e8d7; }
#detail-drawer .badge.off { color: #56637a; background: #edf1f6; border-color: #d8e0eb; }
#detail-drawer .badge.error { color: #a93a4d; background: #fff0f3; border-color: #f1cbd3; }
#detail-drawer .badge.unknown { color: #6b587f; background: #f3eff9; border-color: #e2d8ef; }
.detail-mode { font-size: 11px; color: #657086; background: #eef1f6; border: 1px solid #dfe4ec; border-radius: 7px; padding: 5px 8px; }
.drawer-updated { display: inline-flex; align-items: center; gap: 6px; color: #5d6b82; font-size: 11px; line-height: 1.5; }
.drawer-updated svg { width: 14px; height: 14px; }
.detail-section { margin: 0 0 16px; padding: 20px; border: 1px solid #e4e7f0; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px #1c284006; min-width: 0; }
.detail-section h3 { display: flex; align-items: center; gap: 9px; color: #28344a; font-size: 14px; font-weight: 650; line-height: 1.5; margin: 0 0 17px; }
.detail-section h3 svg { width: 18px; height: 18px; color: #7355d8; }
.detail-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.detail-section-heading h3 { margin: 0; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 0; }
.detail-item { min-width: 0; }
.detail-wide { grid-column: 1 / -1; padding-bottom: 14px; border-bottom: 1px solid #eef0f5; }
.detail-grid dt { color: #657086; font-size: 11px; line-height: 1.6; margin: 0 0 5px; }
.detail-grid dd { color: #27344c; font-size: 13px; font-weight: 500; line-height: 1.7; margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.detail-grid dd.detail-missing { color: #657086; font-weight: 400; }
.detail-copy { margin-top: 16px; }
.detail-renewal { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: #f5f2ff; border: 1px solid #e9e2fd; }
.detail-renewal span { color: #60577a; font-size: 12px; }
.detail-renewal strong { color: #6144c5; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.detail-buttons { display: flex; gap: 9px; flex-wrap: wrap; margin: 16px 0 12px; }
#detail-drawer .power-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 0; }
#detail-drawer .btn { min-height: 36px; font-size: 12px; border-radius: 9px; color: #4d5e79; border-color: #dce2ee; background: #fff; }
#detail-drawer .btn:hover:not(:disabled) { background: #f4f1ff; border-color: #d1c6f3; color: #654bc0; }
#detail-drawer .btn.primary { color: #fff; background: #7355d8; border-color: #7355d8; }
#detail-drawer .btn.primary:hover { background: #6144c5; border-color: #6144c5; }
#detail-drawer .btn.danger { color: #b83a53; background: #fff7f9; border-color: #efd5dd; }
#detail-drawer .btn.danger:hover:not(:disabled) { color: #a32d46; background: #ffecf1; border-color: #e7b0bf; }
#detail-drawer .btn:disabled { opacity: 1; color: #929bac; background: #f5f6f9; border-color: #e8ebf0; }
#detail-drawer .power-buttons .btn { min-height: 43px; justify-content: center; }
.detail-text { display: flex; align-items: flex-start; gap: 7px; color: #68748a; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
.detail-text svg { width: 15px; height: 15px; margin-top: 2px; }
.detail-readonly { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #5f6b82; background: #f5f7fb; border: 1px solid #e4e8f0; padding: 12px; border-radius: 9px; line-height: 1.8; margin: 12px 0; }
.detail-readonly svg { width: 16px; height: 16px; margin-top: 2px; }
#detail-drawer .maintenance-section { border-color: #f0dbe0; padding: 20px; background: #fff; }
#detail-drawer .maintenance-section h3 svg { color: #b9576b; }
.detail-danger-label { font-size: 10px; color: #a84c60; background: #fff1f4; border: 1px solid #f2d5dd; border-radius: 6px; padding: 4px 7px; }
.maintenance-warning { color: #805460; }
#detail-drawer .maintenance-section .detail-buttons { margin: 15px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
#detail-drawer .maintenance-section .btn { justify-content: center; min-height: 40px; }
.detail-note { color: #4e5e76; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
#detail-drawer .account-summary { margin: 0 0 16px; padding: 20px; border-color: #e4e7f0; border-radius: 14px; background: #fff; color: #27344c; }
#detail-drawer .account-summary-title strong { font-size: 14px; color: #28344a; }
#detail-drawer .account-summary-title svg { color: #7355d8; }
#detail-drawer .account-balance { padding: 14px 16px; border: 1px solid #e4e9f3; border-radius: 10px; background: #f7f9fc; margin: 16px 0 12px; }
#detail-drawer .account-balance strong { color: #27344c; font-size: 23px; }
#detail-drawer .drawer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; background: #fff; border-top: 1px solid #e5e7ef; padding: 15px 24px; }
.drawer-security { display: inline-flex; align-items: center; gap: 6px; color: #657086; font-size: 11px; white-space: nowrap; }
.drawer-security svg { width: 15px; height: 15px; }
.drawer-footer-actions { display: flex; gap: 9px; min-width: 0; }
#detail-drawer .drawer-footer .btn { justify-content: center; min-height: 40px; }

/* Destructive-action dialogs share the same readable, single-scroll layout. */
#modal:has(#maintenance-form), #modal:has(#action-form) { width: 600px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; border-color: #e3e6ee; }
#maintenance-form, #action-form { display: flex; flex-direction: column; max-height: calc(100vh - 34px); max-height: calc(100dvh - 34px); min-height: 0; }
#maintenance-form .modal-header, #action-form .modal-header { flex-shrink: 0; padding: 21px 24px; background: #fafbfe; border-color: #e5e8f0; gap: 14px; }
#maintenance-form .modal-header h2, #action-form .modal-header h2 { color: #27344c; font-size: 19px; }
#maintenance-form .modal-header p, #action-form .modal-header p { color: #66738a; line-height: 1.6; overflow-wrap: anywhere; }
#maintenance-form .modal-body, #action-form .modal-body { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 22px 24px; }
#maintenance-form .modal-footer, #action-form .modal-footer { flex-shrink: 0; border-color: #e5e8f0; padding: 16px 24px; }
#maintenance-form .subtext, #action-form .subtext { color: #68748a; font-size: 12px; line-height: 1.8; }
#maintenance-form .action-warning, #action-form .action-warning { color: #925066; background: #fff4f6; border: 1px solid #f0d7df; border-radius: 10px; padding: 14px; font-size: 12px; line-height: 1.8; }
#action-form .action-summary { padding: 16px; border: 1px solid #e5e9f1; border-radius: 10px; background: #f8fafd; font-size: 12px; }
#action-form .action-summary dt { color: #66748b; }
#action-form .action-summary dd { color: #27344c; }
#maintenance-form .field label, #action-form .field label { color: #42516a; font-size: 12px; }
#maintenance-form .checkbox-label, #action-form .checkbox-label { color: #586981; font-size: 12px; }
@media (max-width: 640px) {
  #detail-drawer { width: 100vw; border-left: 0; border-radius: 0; }
  #detail-drawer .drawer-header { padding: 18px 16px; gap: 11px; }
  .drawer-server-icon { width: 42px; height: 42px; border-radius: 12px; }
  #detail-drawer .drawer-heading h2 { font-size: 18px; }
  #detail-drawer .drawer-body { padding: 16px 14px 20px; }
  .detail-section, #detail-drawer .maintenance-section, #detail-drawer .account-summary { padding: 17px; border-radius: 12px; margin-bottom: 13px; }
  .detail-grid { gap: 14px 16px; }
  .detail-grid dd { font-size: 13px; }
  #detail-drawer .drawer-footer { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .drawer-security { display: none; }
  .drawer-footer-actions { width: 100%; }
  .drawer-footer-actions .btn { flex: 1; padding: 11px 9px; }
  #maintenance-form .modal-body, #action-form .modal-body { padding: 19px; }
  #maintenance-form .field input, #maintenance-form .field select, #action-form .field input { font-size: 16px; }
  #maintenance-form .modal-footer, #action-form .modal-footer { padding: 14px 19px; flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-wide { grid-column: auto; }
  #detail-drawer .power-buttons, #detail-drawer .maintenance-section .detail-buttons { grid-template-columns: minmax(0, 1fr); }
  .drawer-status-bar { align-items: flex-start; }
  .drawer-updated { width: 100%; }
  #action-form .action-summary > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { #detail-drawer, #detail-drawer .btn { transition: none; scroll-behavior: auto; } }