:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#17233f;background:#f2f4fb;line-height:1.4}*{box-sizing:border-box}body{margin:0}.topbar{height:64px;background:#fff;border-bottom:1px solid #e5e8f2;display:flex;align-items:center;justify-content:space-between;padding:0 32px}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#3e63f4;color:#fff}.top-actions{display:flex;align-items:center;gap:18px;color:#66728e}.server-pill{font-size:13px}.server-pill i,.sync-status i{display:inline-block;width:7px;height:7px;background:#2bb673;border-radius:50%;margin-right:7px}.icon-button{border:0;background:none;font-size:23px;color:#73809d}.avatar{width:30px;height:30px;background:#e9edff;color:#3e63f4;border-radius:50%;display:grid;place-items:center;font-weight:700}.layout{display:flex;min-height:calc(100vh - 64px)}.sidebar{width:226px;background:#fff;padding:28px 16px;border-right:1px solid #e5e8f2;display:flex;flex-direction:column}.side-label{font-size:12px;color:#8b96ad;padding:0 14px 11px}.nav-item{height:44px;border:0;background:none;border-radius:8px;text-align:left;padding:0 14px;color:#64708b;font-size:14px;display:flex;gap:13px;align-items:center;cursor:pointer}.nav-item span{width:18px;text-align:center}.nav-item.active{background:#edf1ff;color:#3159e9;font-weight:600}.side-bottom{margin-top:auto}.content{flex:1;padding:28px 38px 52px;max-width:1500px;margin:0 auto;width:100%}.breadcrumb{font-size:13px;color:#8a95aa;margin-bottom:18px}.breadcrumb span{margin:0 8px;color:#c2c8d6}.page-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.page-heading h1{margin:0 0 5px;font-size:25px}.page-heading p{margin:0;color:#71809d;font-size:14px}.sync-status{margin-top:10px;color:#6e7a95;font-size:13px}.card{background:#fff;border:1px solid #e3e7f1;border-radius:10px;box-shadow:0 4px 16px #3447770d}.toolbar{padding:16px 18px;display:flex;justify-content:space-between;gap:20px;margin-bottom:12px}.toolbar-main{display:flex;gap:10px;align-items:center}.btn{height:38px;border:1px solid #d1d8e8;background:#fff;color:#32415f;border-radius:6px;padding:0 16px;font-size:14px;cursor:pointer}.btn:hover{border-color:#9fb0dd}.btn.primary{background:#3f66f5;color:#fff;border-color:#3f66f5;box-shadow:0 4px 8px #3f66f52e}.btn:disabled{color:#aeb6c7;background:#f5f6f9;border-color:#e4e7ee;cursor:not-allowed;box-shadow:none}.icon-only{padding:0;width:40px}.search{width:310px;height:38px;border:1px solid #d1d8e8;border-radius:6px;display:flex;align-items:center;padding:0 10px;color:#7b88a3}.search input{border:0;outline:0;width:100%;font-size:13px;margin-left:8px}.selection-bar{height:40px;padding:0 16px;display:flex;align-items:center;gap:14px;background:#edf1ff;border:1px solid #d4ddff;border-bottom:0;border-radius:8px 8px 0 0;color:#405076;font-size:13px}.selection-bar.hidden{display:none}.link-button{border:0;background:none;color:#3861e9;cursor:pointer}.table-card{overflow:hidden}.table-head,.rule-row{display:grid;grid-template-columns:56px 1.05fr 1.35fr 1.45fr .8fr 1.65fr 1.15fr;align-items:center;min-height:68px;padding:0 18px;column-gap:14px}.table-head{min-height:54px;background:#fafbfe;color:#77839c;font-size:13px;border-bottom:1px solid #e8ebf3}.rule-row{font-size:14px;border-bottom:1px solid #edf0f5}.rule-row:nth-child(odd){background:#fcfcfe}.rule-row:hover{background:#f5f7ff}.rule-row .action{display:flex;gap:8px}.mini-btn{border:1px solid #d3daea;background:#fff;border-radius:5px;color:#3a4a6c;padding:6px 11px;cursor:pointer}.mini-btn.danger{color:#d24b59}.strategy{display:flex;align-items:center;gap:8px}.strategy .dot{width:7px;height:7px;border-radius:50%;background:#28ad72}.strategy.drop .dot{background:#e55966}.muted{color:#71809d}.filter{font-size:10px;color:#4a5f92;margin-left:3px}.check-wrap{display:flex;align-items:center}.check-wrap input{display:none}.check-wrap span{width:18px;height:18px;border:1px solid #bdc7da;border-radius:4px;display:inline-block;cursor:pointer;position:relative}.check-wrap input:checked+span{background:#3f66f5;border-color:#3f66f5}.check-wrap input:checked+span:after{content:'✓';position:absolute;color:white;font-size:13px;left:3px;top:-1px}.pagination{height:62px;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 18px;color:#77839c;font-size:13px}.pagination>span{margin-right:auto}.page-btn{width:31px;height:31px;border:1px solid #d5dbea;background:#fff;border-radius:5px;color:#6c7893}.page-btn.current{border-color:#3f66f5;color:#3f66f5}.pagination select{height:31px;border:1px solid #d5dbea;border-radius:5px;color:#66728e;background:#fff;padding:0 8px}.empty{padding:52px;text-align:center;color:#8a95aa}.modal{position:fixed;inset:0;background:#18244266;display:grid;place-items:center;padding:20px}.modal.hidden{display:none}.modal-panel{background:#fff;border-radius:12px;width:min(620px,100%);box-shadow:0 18px 60px #1824423d}.modal-title{height:64px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8ebf3}.modal-title h2{margin:0;font-size:19px}.close{font-size:26px;border:0;background:none;color:#7b87a1;cursor:pointer}.form-grid{padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid label{display:flex;flex-direction:column;gap:7px;color:#5d6c8a;font-size:13px}.form-grid .wide{grid-column:1/-1}.form-grid input,.form-grid select{height:40px;border:1px solid #d2d9e8;border-radius:6px;padding:0 11px;color:#263653;background:#fff;font-size:14px;outline:0}.form-grid input:focus,.form-grid select:focus{border-color:#4b6ff5;box-shadow:0 0 0 3px #4b6ff51c}.form-actions{border-top:1px solid #e8ebf3;padding:16px 24px;display:flex;justify-content:flex-end;gap:10px}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:#253453;color:#fff;padding:11px 18px;border-radius:7px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){.sidebar{width:72px;padding:20px 10px}.side-label{display:none}.nav-item{justify-content:center;padding:0;font-size:0}.nav-item span{font-size:16px}.content{padding:22px 16px}.table-head,.rule-row{grid-template-columns:42px 1fr 1fr 90px}.table-head>div:nth-child(4),.table-head>div:nth-child(5),.table-head>div:nth-child(6),.rule-row>div:nth-child(4),.rule-row>div:nth-child(5),.rule-row>div:nth-child(6){display:none}.toolbar{flex-wrap:wrap}.search{width:100%}}
:root{--bulk-placeholder:0}
.bulk-hint{padding:18px 24px 0;color:#71809d;font-size:13px}.form-grid label span{display:flex;align-items:center;gap:7px}.form-grid label span input{width:15px;height:15px}
.docker-panel{margin:12px 0;padding:18px}.docker-panel.hidden{display:none}.docker-panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.docker-panel-head h2{font-size:16px;margin:0 0 4px}.docker-panel-head p{font-size:13px;color:#71809d;margin:0}.docker-row{display:grid;grid-template-columns:1.1fr 2fr 1.3fr auto;align-items:center;gap:16px;padding:12px 0;border-top:1px solid #edf0f5;font-size:13px}.docker-name{font-weight:600;color:#344568}
.docker-picker-field{position:relative}.docker-picker-status{font-size:12px;color:#8a95aa}.docker-picker-status[data-state="ready"]{color:#2b9b69}.docker-picker-status[data-state="error"]{color:#d24b59}.docker-picker-status[data-state="loading"]{color:#5670c9}.docker-picker-field select:disabled{background:#f6f7fb;color:#8a95aa}
.table-head,.rule-row{grid-template-columns:56px 1.05fr 1.35fr .9fr 1.45fr .8fr 1.65fr 1.15fr}.port-input-row{display:grid;grid-template-columns:1fr 1.45fr;gap:10px}.source-editor{border:1px solid #d2d9e8;border-radius:6px;padding:8px;background:#fff}.source-editor:focus-within{border-color:#4b6ff5;box-shadow:0 0 0 3px #4b6ff51c}.source-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}.source-tag{display:inline-flex;align-items:center;gap:5px;background:#edf1ff;border:1px solid #d4ddff;color:#3159b9;border-radius:14px;padding:3px 8px;font-size:12px}.source-tag button{border:0;background:none;color:#5870ae;cursor:pointer;font-size:15px;line-height:1}.source-empty,.source-hint{font-size:12px;color:#8a95aa}.source-entry{display:flex;gap:8px}.source-entry input{height:34px!important;border:0!important;box-shadow:none!important;padding:0 4px!important;flex:1}.source-entry .mini-btn{padding:5px 12px}.source-hint{display:block;margin-top:6px}.port-type-badge{display:inline-block;border-radius:12px;padding:3px 9px;font-size:12px}.port-type-badge.container{background:#edf1ff;color:#3159b9}.port-type-badge.host{background:#f2f4f8;color:#66728e}.source-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.discovery-controls{display:flex;gap:10px;align-items:center}.port-search{width:330px}.filter-select{height:38px;border:1px solid #d1d8e8;border-radius:6px;padding:0 10px;color:#32415f;background:#fff}.discovery-section{margin-bottom:16px;overflow:hidden}.discovery-section-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px}.discovery-section-head h2{font-size:16px;margin:0 0 4px}.discovery-section-head p{font-size:13px;color:#71809d;margin:0}.docker-table-head,.docker-management-row{display:grid;grid-template-columns:1.35fr 2fr .7fr 1fr 1fr 1.45fr 1fr;align-items:center;column-gap:16px;padding:0 18px}.docker-table-head{min-height:54px;background:#fafbfe;color:#77839c;font-size:13px;border-bottom:1px solid #e8ebf3}.docker-management-row{min-height:72px;font-size:14px;border-bottom:1px solid #edf0f5}.docker-management-row:nth-child(odd){background:#fcfcfe}.docker-management-row:hover{background:#f5f7ff}.docker-image{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.port-value{font-weight:600;color:#263b6e}.docker-rule-cell{display:flex;flex-direction:column;gap:3px}.docker-rule-status{font-size:13px;font-weight:600}.docker-rule-status.configured{color:#2b9b69}.docker-rule-status.pending{color:#d58a22}.docker-rule-detail{font-size:12px;color:#71809d}.mini-btn.primary-mini{background:#3f66f5;color:#fff;border-color:#3f66f5}.mini-btn.primary-mini:hover{background:#3159e9;border-color:#3159e9}.host-table-head,.host-port-row{display:grid;grid-template-columns:.8fr 1.7fr .9fr 1.6fr .8fr 1.7fr;align-items:center;column-gap:16px;padding:0 18px}.host-table-head{min-height:48px;background:#fafbfe;color:#77839c;font-size:13px;border-bottom:1px solid #e8ebf3}.host-port-row{min-height:60px;font-size:14px;border-bottom:1px solid #edf0f5}.host-port-row:nth-child(odd){background:#fcfcfe}
@media(max-width:900px){.table-head,.rule-row{grid-template-columns:42px 1fr 1fr 90px}.table-head>div:nth-child(4),.table-head>div:nth-child(5),.table-head>div:nth-child(6),.table-head>div:nth-child(7),.rule-row>div:nth-child(4),.rule-row>div:nth-child(5),.rule-row>div:nth-child(6),.rule-row>div:nth-child(7){display:none}.port-input-row{grid-template-columns:1fr}.discovery-controls{width:100%;flex-wrap:wrap}.port-search{width:100%}.docker-table-head{display:none}.docker-management-row{grid-template-columns:1.25fr 1fr .7fr .9fr auto;row-gap:5px;min-height:92px;padding:12px}.docker-management-row>div:nth-child(2),.docker-management-row>div:nth-child(5){display:none}.docker-management-row>div:nth-child(6){grid-column:1/4}.docker-management-row>div:nth-child(7){grid-column:4/6;grid-row:1/3}.host-table-head{display:none}.host-port-row{grid-template-columns:.8fr 1.2fr .8fr 1.3fr;row-gap:4px;min-height:88px;padding:12px}.host-port-row>div:nth-child(5),.host-port-row>div:nth-child(6){display:none}.docker-toolbar>div{align-items:flex-start;flex-direction:column;gap:3px}}
.page-view.hidden{display:none}.docker-toolbar{align-items:center}.docker-toolbar>div{display:flex;align-items:center;gap:14px}.docker-page-summary{font-size:13px}.docker-management-card{overflow:hidden}.docker-table-head,.docker-management-row{display:grid;grid-template-columns:1.35fr 2fr .7fr 1fr 1fr 1.45fr 1fr;align-items:center;column-gap:16px;padding:0 18px}.docker-table-head{min-height:54px;background:#fafbfe;color:#77839c;font-size:13px;border-bottom:1px solid #e8ebf3}.docker-management-row{min-height:72px;font-size:14px;border-bottom:1px solid #edf0f5}.docker-management-row:nth-child(odd){background:#fcfcfe}.docker-management-row:hover{background:#f5f7ff}.docker-image{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.port-value{font-weight:600;color:#263b6e}.docker-rule-cell{display:flex;flex-direction:column;gap:3px}.docker-rule-status{font-size:13px;font-weight:600}.docker-rule-status.configured{color:#2b9b69}.docker-rule-status.pending{color:#d58a22}.docker-rule-detail{font-size:12px;color:#71809d}.mini-btn.primary-mini{background:#3f66f5;color:#fff;border-color:#3f66f5}.mini-btn.primary-mini:hover{background:#3159e9;border-color:#3159e9}@media(max-width:1100px){.docker-table-head,.docker-management-row{grid-template-columns:1.2fr 1.7fr .7fr .9fr .9fr 1.3fr auto;column-gap:10px;padding:0 12px}}@media(max-width:900px){.docker-table-head{display:none}.docker-management-row{grid-template-columns:1.25fr 1fr .7fr .9fr auto;row-gap:5px;min-height:92px;padding:12px}.docker-management-row>div:nth-child(2),.docker-management-row>div:nth-child(5){display:none}.docker-management-row>div:nth-child(6){grid-column:1/4}.docker-management-row>div:nth-child(7){grid-column:4/6;grid-row:1/3}.docker-toolbar>div{align-items:flex-start;flex-direction:column;gap:3px}}
.layout{min-height:calc(100vh - 64px)}
.topbar{position:fixed;top:0;left:0;right:0;z-index:10}
.layout{margin-top:64px;padding-top:0;min-height:calc(100vh - 64px)}
.layout{height:calc(100vh - 64px);overflow:hidden}
.sidebar{position:fixed;left:0;top:64px;bottom:0;z-index:5}
.content{margin-left:226px}
.login-page{position:fixed;inset:0;background:#f2f4fb;display:grid;place-items:center;z-index:20}
.login-page.hidden,.hidden{display:none!important}
.login-card{width:min(420px,calc(100% - 32px));background:#fff;padding:34px;border:1px solid #e3e7f1;border-radius:14px;box-shadow:0 18px 60px #3447771f}
.login-brand{justify-content:center;margin-bottom:26px}.login-card h1{margin:0 0 8px;text-align:center;font-size:22px}.login-card>p{text-align:center;color:#71809d;font-size:13px;margin:0 0 24px}.login-card form{display:flex;flex-direction:column;gap:14px}.login-card label{display:flex;flex-direction:column;gap:7px;color:#5d6c8a;font-size:13px}.login-card input{height:42px;border:1px solid #d2d9e8;border-radius:6px;padding:0 11px;font-size:14px}.login-card .remember{flex-direction:row;align-items:center}.login-submit{width:100%;margin-top:6px}.login-error{min-height:18px;color:#d24b59;font-size:13px;text-align:center}.port-help{white-space:nowrap}.port-explain{position:relative;margin-top:8px;padding:10px 12px;background:#f8f9ff;border:1px solid #d8def2;border-radius:6px;box-shadow:0 8px 20px #3447771a;max-height:180px;overflow:auto}.port-explain table{border-collapse:collapse;width:100%;font-size:12px}.port-explain th,.port-explain td{padding:5px 8px;text-align:left;border-bottom:1px solid #e5e8f2}.port-explain span{color:#71809d;font-size:12px}
.otp-actions{display:flex;justify-content:space-between;gap:10px}.otp-actions .btn{flex:1}
.table-head,.rule-row{grid-template-columns:56px 1.05fr 1.35fr .9fr 1.65fr 1.65fr 1.15fr}.discovery-pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 18px;color:#77839c;font-size:12px}.page-current{min-width:48px;text-align:center}
@media(max-width:900px){.content{margin-left:72px}.sidebar{width:72px}}
.legacy-discovery{display:none}.unified-head,.unified-row{display:grid;grid-template-columns:.75fr .65fr 1.2fr .7fr 1.2fr 2fr .8fr;align-items:center;column-gap:14px;padding:0 18px}.unified-head{min-height:52px;background:#fafbfe;color:#77839c;font-size:13px;border-bottom:1px solid #e8ebf3}.unified-row{min-height:64px;font-size:14px;border-bottom:1px solid #edf0f5}.unified-row:nth-child(odd){background:#fcfcfe}.unified-row:hover{background:#f5f7ff}
.port-type-badge.mixed{background:#fff3df;color:#a76513}.discovery-context{margin:18px 24px 0;padding:14px 16px;background:#f7f9ff;border:1px solid #dce3f7;border-radius:8px}.context-title{display:flex;align-items:center;gap:10px;margin-bottom:12px}.context-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.context-grid div{display:flex;flex-direction:column;gap:3px;min-width:0}.context-grid span{font-size:12px;color:#8a95aa}.context-grid b{font-size:13px;color:#344568;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.unified-head{display:none}.unified-row{grid-template-columns:.8fr .7fr .9fr .7fr;row-gap:5px;padding:12px;min-height:88px}.unified-row>div:nth-child(5),.unified-row>div:nth-child(6){grid-column:1/4}.unified-row>div:nth-child(7){grid-column:4;grid-row:1/3}}
.content{height:100%;overflow-y:auto;overflow-x:hidden}
.discovery-section-head{display:none}
.avatar-menu{position:relative}.avatar{border:0;cursor:pointer}.avatar-dropdown{position:absolute;right:0;top:40px;width:110px;padding:5px;background:#fff;border:1px solid #dce2ef;border-radius:7px;box-shadow:0 8px 24px #263b6e24;z-index:20}.avatar-dropdown button{width:100%;border:0;background:transparent;border-radius:5px;padding:8px 10px;text-align:left;color:#455574;cursor:pointer}.avatar-dropdown button:hover{background:#f0f3fb}
.field-label-title{position:relative;display:inline-flex;align-items:center;gap:4px;width:max-content}.field-help{position:relative;margin-left:1px}.field-help + .field-help-tip{left:0;top:24px}
.port-input-row{position:relative}.port-help{width:24px;height:24px;padding:0;border-radius:50%;font-weight:700}.port-explain{position:absolute;right:0;top:44px;z-index:40;width:min(360px,calc(100vw - 80px));margin:0!important;max-height:220px;overflow:auto}
.port-picker-field{position:relative}
.port-help{font-size:0}.port-help::after{content:'?';font-size:13px}
.field-help{position:relative;display:inline-grid;place-items:center;width:16px;height:16px;margin-left:5px;border:1px solid #9eabc4;border-radius:50%;background:#fff;color:#61708d;font-size:11px;font-weight:700;cursor:help;vertical-align:middle;padding:0}.field-help + .field-help-tip{display:none;position:absolute;z-index:30;left:22px;top:-3px;width:250px;padding:8px 10px;border:1px solid #d5dced;border-radius:6px;background:#fff;color:#566784;font-size:12px;font-weight:400;line-height:1.5;box-shadow:0 8px 24px #263b6e24}.field-help:focus{outline:2px solid #4b6ff5;outline-offset:1px}.field-help:focus + .field-help-tip{display:block}
.field-label-title .field-help + .field-help-tip{left:0;top:24px}
.layout{height:auto;min-height:calc(100vh - 64px);overflow:visible}
.content{height:auto;min-height:calc(100vh - 64px);overflow:visible}
.field-label-title .field-help + .field-help-tip{display:none!important;left:0;top:24px}
.field-label-title:hover .field-help + .field-help-tip{display:none!important}
.field-label-title .field-help:focus + .field-help-tip{display:none!important}
.content{padding-top:20px;padding-bottom:24px}
.table-head{min-height:48px}
.rule-row{min-height:50px}
.pagination{height:52px}
.unified-head{min-height:48px}
.unified-row{min-height:52px}
.discovery-pagination{padding-top:8px;padding-bottom:8px}

/* Theme, modal and interaction refinements */
.theme-toggle{width:34px;height:34px;border:1px solid #d1d8e8;border-radius:50%;background:#fff;color:#4b5d82;cursor:pointer;font-size:16px;display:grid;place-items:center}
.theme-toggle:hover{border-color:#8fa4d5}
.modal{background:transparent}
.field-label-title .field-help + .field-help-tip{display:none!important}
.field-label-title:hover .field-help + .field-help-tip{display:none!important}
.field-label-title .field-help:hover + .field-help-tip{display:block!important}
.field-label-title .field-help:focus + .field-help-tip{display:none!important}
.field-label-title .field-help:focus:not(:hover) + .field-help-tip{display:none!important}
.discovery-actions{display:flex;gap:8px;align-items:center}
.discovery-actions .mini-btn{white-space:nowrap}
.rule-row .action .mini-btn.danger,.discovery-actions .mini-btn.danger{background:#fff5f5;border-color:#f0b8bd;color:#c63f4d}
.rule-row .action .mini-btn.danger:hover,.discovery-actions .mini-btn.danger:hover{background:#ffe9eb;border-color:#df7d87}
body.dark-theme{background:#0f172a;color:#e5e7eb}
body.dark-theme .topbar,body.dark-theme .sidebar,body.dark-theme .card,body.dark-theme .modal-panel,body.dark-theme .login-card{background:#111c33;border-color:#263653;color:#e5e7eb}
body.dark-theme .topbar{box-shadow:0 1px 0 #263653}
body.dark-theme .side-label,body.dark-theme .muted,body.dark-theme .page-heading p,body.dark-theme .sync-status,body.dark-theme .source-hint,body.dark-theme .docker-picker-status{color:#9fb0ca}
body.dark-theme .nav-item{color:#9fb0ca}
body.dark-theme .nav-item.active{background:#1c315b;color:#b9c9ff}
body.dark-theme .table-head,body.dark-theme .unified-head{background:#16233d;color:#9fb0ca;border-color:#263653}
body.dark-theme .rule-row,body.dark-theme .unified-row{border-color:#263653}
body.dark-theme .rule-row:nth-child(odd),body.dark-theme .unified-row:nth-child(odd){background:#13203a}
body.dark-theme .rule-row:hover,body.dark-theme .unified-row:hover{background:#1b2b4b}
body.dark-theme .btn,body.dark-theme .search,body.dark-theme .filter-select,body.dark-theme .form-grid input,body.dark-theme .form-grid select,body.dark-theme .source-editor,body.dark-theme .mini-btn,body.dark-theme .page-btn,body.dark-theme .pagination select{background:#0f1a30;border-color:#334766;color:#e5e7eb}
body.dark-theme .btn:hover,body.dark-theme .mini-btn:hover,body.dark-theme .page-btn:hover{border-color:#6684c2}
body.dark-theme .btn.primary,body.dark-theme .mini-btn.primary-mini{background:#3f66f5;border-color:#3f66f5;color:#fff}
body.dark-theme .search input{background:transparent;color:#e5e7eb}
body.dark-theme .modal-title,body.dark-theme .form-actions{border-color:#263653}
body.dark-theme .modal-panel{box-shadow:0 18px 60px #0008}
body.dark-theme .field-help{background:#0f1a30;border-color:#5670a2;color:#c9d6f5}
body.dark-theme .field-help + .field-help-tip,body.dark-theme .port-explain{background:#16233d;border-color:#334766;color:#d6e0f5}
body.dark-theme .port-explain th,body.dark-theme .port-explain td{border-color:#334766}
body.dark-theme .port-type-badge.host{background:#25324a;color:#b7c3d9}
body.dark-theme .port-type-badge.container{background:#213b70;color:#c4d2ff}
body.dark-theme .port-type-badge.mixed{background:#5a431d;color:#ffd995}
body.dark-theme .avatar{background:#263d73;color:#d5e0ff}
body.dark-theme .avatar-dropdown{background:#111c33;border-color:#334766}
body.dark-theme .avatar-dropdown button{color:#d6e0f5}
body.dark-theme .avatar-dropdown button:hover{background:#1b2b4b}
body.dark-theme .theme-toggle{background:#0f1a30;border-color:#334766;color:#dbe6ff}
body.dark-theme .login-page{background:#0f172a}
body.dark-theme .login-card label{color:#b5c3da}
body.dark-theme .login-card input{background:#0f1a30;border-color:#334766;color:#e5e7eb}
body.dark-theme .rule-row .action .mini-btn.danger,body.dark-theme .discovery-actions .mini-btn.danger{background:#3a2029;border-color:#75414a;color:#ffb2bb}

@media(max-width:900px){.discovery-actions{flex-wrap:wrap;gap:5px}}
.toolbar-left{justify-content:flex-start}.toolbar-right{justify-content:flex-end;flex-wrap:wrap}
body.dark-theme .rule-row,body.dark-theme .unified-row{color:#e5edf9}
body.dark-theme .rule-row .muted,body.dark-theme .unified-row .muted,body.dark-theme .docker-rule-detail,body.dark-theme .source-empty,body.dark-theme .source-hint,body.dark-theme .discovery-pagination,body.dark-theme .pagination{color:#b8c7df}
body.dark-theme .port-value{color:#dbe7ff}
body.dark-theme .unified-head,body.dark-theme .table-head{color:#c2d0e6}
body.dark-theme .search{color:#b4c5df}
body.dark-theme .search input::placeholder,body.dark-theme .form-grid input::placeholder,body.dark-theme .login-card input::placeholder{color:#8294b2;opacity:1}
body.dark-theme .form-grid label,body.dark-theme .login-card label{color:#c1cee2}
body.dark-theme .modal-title h2,body.dark-theme .close{color:#eef4ff}
body.dark-theme .context-grid span{color:#9fb3d2}
body.dark-theme .context-grid b{color:#e1eaff}
body.dark-theme .source-tag{background:#203762;border-color:#38578e;color:#d4e1ff}
body.dark-theme .source-tag button{color:#bbcced}
body.dark-theme .docker-picker-status[data-state=ready]{color:#6dd7a4}
body.dark-theme .docker-picker-status[data-state=loading]{color:#9db8ef}
body.dark-theme .docker-picker-status[data-state=empty]{color:#b8c7df}
.page-jump{width:48px;height:31px;border:1px solid #d5dbea;border-radius:5px;background:#fff;color:#53627e;text-align:center;font-size:13px}
.page-jump::-webkit-inner-spin-button,.page-jump::-webkit-outer-spin-button{opacity:1}
.page-total{margin-left:-4px}
.danger-action{color:#c63f4d!important;border-color:#efb8be!important}
body.dark-theme .page-jump{background:#0f1a30;border-color:#415779;color:#e5edf9}
body.dark-theme .danger-action{color:#ffb2bb!important;border-color:#75414a!important;background:#3a2029!important}
.table-head,.rule-row,.unified-head,.unified-row{text-align:center}
.unified-head,.unified-row{grid-template-columns:.8fr 1.25fr 1.2fr 1.2fr 2fr .9fr}
.unified-row .source-cell,.unified-row .muted{ text-align:center }
.protocol-port{white-space:nowrap}
.cell-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media(max-width:900px){.unified-head{display:none}.unified-row{grid-template-columns:.8fr 1fr .9fr .9fr;row-gap:5px;padding:12px;min-height:88px}.unified-row>div:nth-child(4),.unified-row>div:nth-child(5){grid-column:1/4}.unified-row>div:nth-child(6){grid-column:4;grid-row:1/3}}

/* Final table alignment and compact icon controls */
.table-head,.rule-row,.unified-head,.unified-row{grid-template-columns:56px 1.05fr 1.35fr .9fr 1.65fr 1.65fr 1.15fr}
.table-head>*,.rule-row>*,.unified-head>*,.unified-row>*{min-width:0}
.table-head,.rule-row,.unified-head,.unified-row{text-align:center}
.check-wrap,.strategy,.rule-row .action,.header-filter-cell,.discovery-actions{justify-content:center}
.selection-spacer{width:18px;height:18px;justify-self:center}
.icon-action{width:38px;min-width:38px;padding:0;display:inline-grid;place-items:center;font-size:19px;line-height:1}
.icon-action.primary{font-size:23px;font-weight:400}
.refresh-icon{font-size:21px;transition:transform .25s ease}
.refresh-icon:hover{transform:rotate(90deg)}
.refresh-icon.is-refreshing{animation:refresh-spin .75s linear infinite}
@keyframes refresh-spin{to{transform:rotate(360deg)}}
.page-jump{-moz-appearance:textfield;appearance:textfield}
.page-jump::-webkit-inner-spin-button,.page-jump::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;display:none}

/* Help text is visible only while the pointer is on the question-mark button. */
.field-help-tip{pointer-events:none}
.field-label-title:hover>.field-help-tip,.field-label-title .field-help:focus+.field-help-tip{display:none!important}
.field-label-title .field-help:hover+.field-help-tip{display:block!important}
.table-head,.unified-head{min-height:48px}
.rule-row,.unified-row{min-height:52px}
.pagination,.discovery-pagination{height:52px;padding:0 18px;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.pagination>span:first-child,.discovery-pagination>span:first-child{margin-right:auto}

@media(max-width:900px){
  .unified-head{display:none}
  .unified-row{grid-template-columns:34px .8fr 1fr .9fr;row-gap:5px;padding:12px;min-height:88px}
  .unified-row>div:nth-child(5),.unified-row>div:nth-child(6){grid-column:2/5}
  .unified-row>div:nth-child(7){grid-column:4;grid-row:1/3}
}

/* Exact help trigger: JavaScript toggles only while the question mark is hovered. */
.field-label-title .field-help+.field-help-tip,
.field-label-title:hover>.field-help-tip,
.field-label-title .field-help:hover+.field-help-tip,
.field-label-title .field-help:focus+.field-help-tip{display:none!important}
.field-label-title .field-help+.field-help-tip.is-visible{display:block!important;left:calc(100% + 8px);top:-8px}

body.dark-theme .discovery-context{background:#16233d;border-color:#334766;color:#e5edf9}
body.dark-theme .discovery-context .context-title strong{color:#eef4ff}
body.dark-theme .discovery-context .context-grid span{color:#aebfda}
body.dark-theme .discovery-context .context-grid b{color:#e5edf9}
.header-filter-cell{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.header-filter{height:28px;min-width:70px;border:1px solid #d1d8e8;border-radius:5px;background:#fff;color:#53627e;font-size:12px;padding:0 5px}
.sort-button{width:26px;height:26px;padding:0;border:1px solid #d1d8e8;border-radius:5px;background:#fff;color:#3f66f5;font-weight:700;cursor:pointer;line-height:1}
.sort-button:hover{border-color:#6b86ca;background:#f4f7ff}
body.dark-theme .header-filter,body.dark-theme .sort-button{background:#0f1a30;border-color:#415779;color:#dbe7ff}
body.dark-theme .sort-button:hover{background:#1b2b4b;border-color:#6684c2}
@media(max-width:1100px){.header-filter-cell{gap:3px}.header-filter{min-width:58px;padding:0 2px;font-size:11px}}

/* Firewall-wide controls */
.interface-control,.ping-control{height:38px;display:flex;align-items:center;gap:8px;white-space:nowrap;color:#64708b;font-size:13px}
.interface-control select{height:34px;max-width:190px;border:1px solid #d1d8e8;border-radius:6px;background:#fff;color:#32415f;padding:0 28px 0 9px;outline:0}
.interface-control select:focus{border-color:#4b6ff5;box-shadow:0 0 0 3px #4b6ff51c}
.switch-toggle{width:42px;height:24px;padding:0;border:0;border-radius:999px;background:#9aa4b7;position:relative;cursor:pointer;transition:background .18s ease}
.switch-toggle span{position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0004;transition:transform .18s ease}
.switch-toggle[aria-checked="true"]{background:#3f66f5}
.switch-toggle[aria-checked="true"] span{transform:translateX(18px)}
.switch-toggle:disabled{opacity:.55;cursor:wait}
body.dark-theme .interface-control,body.dark-theme .ping-control{color:#b8c7df}
body.dark-theme .interface-control select{background:#0f1a30;border-color:#415779;color:#e5edf9}
body.dark-theme .switch-toggle{background:#4a556d}
body.dark-theme .switch-toggle[aria-checked="true"]{background:#5275ff}
@media(max-width:1250px){.toolbar{flex-wrap:wrap}.toolbar-left,.toolbar-right{flex-wrap:wrap}.toolbar-right{margin-left:auto}}