*{box-sizing:border-box}
body{margin:0;background:#eef3f6;color:#111;font:12px Arial,sans-serif}
.sitebar{height:48px;display:flex;align-items:center;padding:0 20px;background:#071c2b}.sitebar a{color:#fff;text-decoration:none;font:700 16px Arial}
.device-shell{width:min(1180px,100%);min-height:calc(100vh - 48px);margin:auto;background:#fff;box-shadow:0 0 35px #16384d2b}
.tp-header{height:58px;padding:8px 18px;color:#fff;background:linear-gradient(#418bb4,#126188)}.tp-header strong{font:700 29px Arial}.tp-header sup{font-size:9px}
.device-body{display:grid;grid-template-columns:190px 1fr;min-height:680px}.sidebar{background:#c4daf7}.sidebar h1{height:70px;margin:0;padding:23px 22px;border-bottom:2px solid #111;color:#073869;font:700 18px Georgia,serif}.sidebar nav{padding:25px 0 10px}
.menu-button,.submenu-button,.logout{width:100%;display:block;border:0;background:none;color:#003c79;text-align:left;cursor:pointer}.menu-button{padding:4px 22px;font-size:13px}.menu-button.active{background:#9fc4f4;font-weight:bold}.submenu-button{padding:3px 28px;font-size:12px}.submenu-button::before{content:"• "}.logout{margin:17px 22px;width:130px;padding:6px 0;border-bottom:1px solid #688db4}
.workspace{min-width:0;padding:15px 32px 50px}.tabs{display:flex;overflow:auto;border-bottom:2px solid #154e70;background:#dce6ed}.tab{padding:6px 16px;border:0;border-right:1px solid #b8c7d0;background:linear-gradient(#2682ae,#075479);color:#fff;white-space:nowrap;cursor:pointer}.tab.active{background:#fff;color:#123c67}
.panel{margin-top:27px}.section-title{margin:0 0 10px;padding:5px 9px;background:#c4dafc;color:#164776;font-size:12px}
.switch-front{width:min(720px,100%);margin:12px 0 24px;padding:16px;border:1px solid #2c719b;background:#eef3f5}.ports{display:grid;grid-template-columns:repeat(12,34px);gap:8px 5px}.port{position:relative;height:35px;padding-top:22px;color:#073869;text-align:center;font-size:9px}.port::before{content:"";position:absolute;top:0;left:5px;width:24px;height:18px;border:2px solid #2a78ad;background:repeating-linear-gradient(90deg,#79a8cb 0 2px,#d4e8f6 2px 4px)}.port.up::after{content:"";position:absolute;top:2px;left:8px;width:4px;height:4px;background:#39b54a;box-shadow:7px 0 #39b54a}
.form-grid{display:grid;grid-template-columns:170px minmax(260px,500px);gap:8px 12px;align-items:center;margin:12px 20px}.form-grid>label{text-align:right}.form-grid span label.inline{display:inline-flex;align-items:center;gap:3px;margin-right:6px;text-align:left}.form-grid input:not([type=radio]):not([type=checkbox]){width:224px}.form-grid input,.form-grid select,.toolbar input{height:24px;border:1px solid #8ba9c1;background:#fff}
.actions{margin:18px;text-align:center}.btn{min-width:64px;margin:0 5px;padding:3px 10px;border:1px solid #376b91;border-radius:3px;background:linear-gradient(#fff,#dce6ec);cursor:pointer}.btn:hover{background:#c9e6fa}.btn:disabled{color:#999;cursor:not-allowed}
.table-wrap{max-height:410px;overflow:auto;border:1px solid #d0d0d0}.members-table{max-height:318px}.config-table{width:100%;border-collapse:collapse;text-align:center}.config-table th{height:28px;background:#edf0f2;color:#17497a;font-weight:normal}.config-table td{height:27px;border:1px solid #d7d7d7}.config-table tr.selected td{background:#f0f3fb}.config-table input[type=checkbox]:disabled{opacity:.35}.config-table select{height:22px;border:1px solid #89a9c2}
.link{border:0;background:none;color:#05e;cursor:pointer}.link:disabled,.disabled-link{color:#aaa;cursor:default}.toolbar{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin:4px 20px}
.member-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:-4px 15px 4px}.member-toolbar input{width:66px;height:24px;border:1px solid #8ba9c1}
.pvid-banner{min-height:24px;margin-bottom:4px;padding:4px 10px;border:1px solid #d4c77d;background:#fffed2;color:#9b6900}.port-config-tools{display:grid;grid-template-columns:auto 110px auto 90px 1fr auto 70px auto;gap:7px;align-items:center;margin:5px 14px}.port-config-tools input,.port-config-tools select{height:24px;border:1px solid #8ba9c1}.port-config-table{max-height:318px}
.note{margin-top:26px;padding-top:7px;border-top:2px solid #1d6e9f;line-height:1.5}.summary{border-collapse:collapse;width:min(720px,100%)}.summary td{padding:5px;border-bottom:1px solid #ddd}.summary td:first-child{width:220px;text-align:right}.status-ok{color:#159b22}
.toast{position:fixed;right:20px;bottom:20px;padding:10px 16px;opacity:0;transform:translateY(10px);background:#183d55;color:#fff;border-radius:3px;transition:.2s}.toast.show{opacity:1;transform:none}
@media(max-width:760px){.sitebar{display:none}.device-shell{min-height:100vh}.device-body{grid-template-columns:1fr}.sidebar{display:none}.workspace{padding:8px;overflow:auto}.ports{grid-template-columns:repeat(8,34px)}.form-grid{grid-template-columns:110px 1fr}}
.verify-target{outline:3px solid #f0a000!important;outline-offset:3px!important;animation:verify-target-pulse 1s ease-in-out 4}.verify-ghost{position:fixed;z-index:1000;max-width:310px;padding:10px 12px;border:1px solid #526879;border-radius:8px;background:#102331;color:#fff;font:12px/1.45 Arial,sans-serif;box-shadow:0 10px 28px rgba(0,0,0,.34);pointer-events:none}.verify-ghost:after{content:"";position:absolute;left:18px;bottom:-8px;border:8px solid transparent;border-top-color:#102331;border-bottom:0}@keyframes verify-target-pulse{50%{outline-color:#e53935;box-shadow:0 0 0 8px rgba(240,160,0,.2)}}