:root{--bg:#0a0b10;--panel:#15161e;--panel2:#1b1c25;--line:#30313b;--text:#f7f7fa;--muted:#9c9dab;--red:#ee4354;--green:#35d49b;--orange:#f3b34e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 70% 0%,#2c121a 0%,#0a0b10 40%);font:14px 'DM Sans',system-ui,sans-serif;color:var(--text)}a{text-decoration:none;color:inherit}button{cursor:pointer}.container-xl{max-width:1460px;padding-left:clamp(16px,3vw,45px);padding-right:clamp(16px,3vw,45px)}.main-header{height:78px;position:sticky;top:0;z-index:100;background:#0c0d13ed;border-bottom:1px solid #282832;backdrop-filter:blur(18px)}.header-content{display:flex;align-items:center;justify-content:space-between;gap:20px;height:100%}.brand{display:inline-flex;align-items:center;gap:1px;color:#fff;font:800 24px 'Outfit',sans-serif;white-space:nowrap}.brand>span:last-child,footer b span{color:var(--red)}.brand-symbol{display:grid;place-items:center;background:linear-gradient(140deg,#f35564,#a51b30);width:42px;height:42px;border-radius:12px;margin-right:12px;box-shadow:0 9px 25px #ec344437;color:#fff!important;font-size:20px}.main-header nav{display:flex;gap:7px}.main-header nav a{padding:12px 16px;color:#a7a6b4;border-radius:9px;font-weight:700}.main-header nav a i{margin-right:5px}.main-header nav a:hover,.main-header nav .selected{color:white;background:#5c222f}.live-marker{font-size:10px;font-weight:800;letter-spacing:1.2px;color:#a6a6af;white-space:nowrap}.live-marker i{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:9px;box-shadow:0 0 0 4px #1b4234}.hero{margin-top:30px;min-height:335px;position:relative;overflow:hidden;background:linear-gradient(105deg,#21131b,#15131a 62%,#341522);border:1px solid #57303b;border-radius:20px;display:flex;justify-content:space-between;padding:43px 50px}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 83% 55%,#d22c5126,transparent 45%),repeating-linear-gradient(140deg,transparent,transparent 42px,#ffffff04 43px,transparent 45px);pointer-events:none}.hero-copy{position:relative;z-index:3}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.5px;font-weight:800;color:#ffa2ac;background:#d5354720;border:1px solid #ba405338;padding:9px 13px;border-radius:50px}.eyebrow.small{border:0;background:none;border-radius:0;padding:0;margin-bottom:9px;color:#ff6978}.hero h1{font:850 clamp(37px,4.1vw,58px)/1.07 'Outfit',sans-serif;letter-spacing:-1.3px;margin:22px 0 17px}.hero h1 em{font-style:normal;color:#ff8994}.hero h1 strong{font-weight:900;color:#f24a5b}.hero p{max-width:540px;color:#c0b6c0;line-height:1.8;font-size:15px;margin:0 0 25px}.tags{display:flex;gap:9px;flex-wrap:wrap}.tags span{background:#ffffff0b;border:1px solid #ffffff14;padding:10px 12px;border-radius:9px;font-size:11px;color:#dfd5de;font-weight:700}.tags i{color:#ff7885;margin-right:6px}.hero-illustration{flex:0 0 34%;position:relative;perspective:950px}.server-stack{position:absolute;right:17%;top:18px;transform:rotate(-9deg) rotateY(-20deg);filter:drop-shadow(0 30px 20px #0008)}.server-rack{width:245px;height:72px;background:linear-gradient(155deg,#524049,#24212e,#151622);border:1px solid #a34c60;border-top-color:#c05a6c;border-radius:12px;margin:11px 0;display:flex;align-items:center;padding:0 21px;gap:12px;box-shadow:0 9px 15px #0008}.server-rack i{width:12px;height:12px;border-radius:50%;background:#25d792;box-shadow:0 0 12px #25d792}.server-rack i+i{background:#f7be59;box-shadow:0 0 11px #f7be59}.server-rack span{font:800 22px 'Outfit';margin-left:auto;color:#efc4ca}.art-icon{position:absolute;left:4%;bottom:5%;width:86px;height:86px;border-radius:20px;background:linear-gradient(145deg,#ae3d57,#341e32);border:1px solid #c05a6c;display:grid;place-items:center;font-size:37px;color:#ffc0c5;box-shadow:0 15px 30px #0007}.monitor{background:linear-gradient(180deg,#171820,#121319);border:1px solid #35353f;border-radius:18px;margin:26px 0 0;padding:27px}.monitor-heading,.catalog-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.monitor-heading h2,.catalog-heading h2{font:750 27px 'Outfit',sans-serif;margin:0}.monitor-heading p,.catalog-heading p{color:var(--muted);font-size:13px;margin:5px 0 0}.tag-live{color:#38e2a4;font:900 9px 'DM Sans',sans-serif;letter-spacing:.8px;background:#153c2c;border:1px solid #236b4d;border-radius:5px;padding:5px 7px;vertical-align:middle;margin-left:6px}.authorized{font-size:11px;color:#a3a3b0;border:1px solid #353640;border-radius:9px;padding:10px 13px;white-space:nowrap}.authorized i{color:#3bdda2;margin-right:5px}.monitor-form{display:grid;grid-template-columns:1fr 1.1fr auto;gap:14px;margin-top:25px}.monitor-form label{font-size:10px;color:#90919e;font-weight:800;letter-spacing:1px;display:block;margin-bottom:8px}.field{height:48px;border-radius:9px;border:1px solid #393945;background:#0d0e14;display:flex;align-items:center;gap:11px;padding:0 14px;color:#e9e9f0;min-width:0}.field>i{color:#f46b79}.field select{border:0!important;background-color:transparent!important;color:#f5f5f9!important;box-shadow:none!important;font-size:13px;font-weight:700;padding-left:0;min-width:0}.field select option{background:#1b1c25}.field #destination{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.btn-scan{border:1px solid #ff576a;border-radius:9px;background:linear-gradient(100deg,#ea4054,#c51b36);color:white;height:48px;padding:0 24px;min-width:187px;font-size:13px;font-weight:800;box-shadow:0 6px 24px #e2274330}.btn-scan:hover{background:#f44a61}.btn-scan:disabled{opacity:.6;cursor:wait}.monitor-settings{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin:23px 0}.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:12px;color:#d1d0d8}.toggle input{position:absolute;opacity:0}.track{width:36px;height:21px;border-radius:20px;background:#434550;position:relative;flex:none}.track:before{content:"";width:15px;height:15px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:transform .15s}.toggle input:checked+.track{background:#e94357}.toggle input:checked+.track:before{transform:translateX(15px)}.toggle input:focus-visible+.track{outline:3px solid #ffffff80;outline-offset:3px}.monitor-settings>span{font-size:11px;color:#9696a1}.monitor-settings>span i{margin-right:5px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat{display:flex;align-items:center;gap:13px;padding:19px;background:#1c1d25;border:1px solid #32333d;border-radius:11px}.stat-icon{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:18px;flex:none}.stat-icon.red{color:#ff8892;background:#542431}.stat-icon.green{color:#41e9a9;background:#1d4432}.stat-icon.pink{color:#ff9a9f;background:#4d292f}.stat-icon.yellow{color:#ffd17b;background:#4f3924}.stat small{display:block;color:#a4a3ad;font-size:10px;font-weight:800;letter-spacing:.6px}.stat strong{display:block;font:800 29px 'Outfit',sans-serif;line-height:1.2;margin-top:4px}.monitor-note{font-size:11px;line-height:1.65;color:#adabb5;border:1px solid #30303b;background:#ffffff04;padding:12px 14px;border-radius:8px;margin-top:17px}.monitor-note i{color:#f4b962;margin-right:7px}.catalog{padding-top:50px}.catalog-heading h2{font-size:30px}.match-count{font-size:11px;color:#aaa9b4;border:1px solid #373743;background:#16171e;padding:10px 12px;border-radius:9px;white-space:nowrap}.filters{display:grid;grid-template-columns:minmax(220px,1fr) auto 166px;gap:11px;margin:25px 0 36px}.search-field{height:46px;display:flex;align-items:center;gap:12px;background:#15161d;border:1px solid #363640;border-radius:9px;padding:0 14px;color:#888996}.search-field:focus-within{border-color:#d83e55}.search-field input{width:100%;min-width:0;outline:0;border:0;color:white;background:none;font-size:12px}.search-field input::placeholder{color:#858692}.tab-filters{display:flex;align-items:center;gap:3px;padding:4px;background:#15161d;border:1px solid #363640;border-radius:9px}.tab-filters button{height:35px;background:transparent;color:#bab9c5;border:0;border-radius:7px;padding:0 10px;white-space:nowrap;font-size:11px;font-weight:800}.tab-filters button.on{background:#612631;color:#ffd3d8}.protocol{background-color:#15161d;color:#ededf4;border:1px solid #363640;border-radius:9px;font-size:11px;box-shadow:none!important}.protocol option{background:#15161d}.port-group{margin-bottom:36px}.group-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:13px}.group-title{display:flex;align-items:center;gap:12px}.group-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:11px;background:#53232e;color:#ff8694;font-size:18px}.group-title h3{font:750 20px 'Outfit',sans-serif;margin:0 0 4px}.group-title p{color:#92929e;font-size:12px;margin:0}.group-counter{font-size:11px;color:#a9a9b4;border:1px solid #373743;background:#15161d;padding:8px 11px;border-radius:7px;white-space:nowrap}.card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.port-card{border:1px solid #373743;border-radius:13px;background:linear-gradient(155deg,#1d1e27,#13141b);overflow:hidden;min-width:0;display:flex;flex-direction:column;transition:border-color .16s,transform .16s}.port-card:hover{border-color:#a34454;transform:translateY(-2px)}.card-top{display:flex;align-items:center;justify-content:space-between;padding:15px 15px 0}.port-label{font:750 11px 'Outfit',sans-serif;background:#512632;color:#ffd1d5;border:1px solid #773640;border-radius:6px;padding:5px 8px}.port-proto{font-size:9px;font-weight:800;color:#a6a7b2}.card-main{display:flex;gap:6px;align-items:center;min-height:104px;padding:2px 12px}.port-icon{width:100px;height:100px;object-fit:contain;flex:none;filter:drop-shadow(0 8px 10px #0006)}.port-number{font:850 35px/1 'Outfit',sans-serif;letter-spacing:-1.2px}.port-name{font:700 13px 'Outfit',sans-serif;margin-top:5px;overflow-wrap:anywhere}.port-short{color:#b0afbb;font-size:11px;line-height:1.55;margin:7px 15px 14px;min-height:53px}.card-bottom{margin-top:auto;padding:0 14px 14px}.port-status{display:flex;align-items:center;gap:7px;font-size:10px;color:#9e9da7;font-weight:800;min-height:22px;margin-bottom:7px}.port-status:before{content:"";width:7px;height:7px;display:block;flex:none;border-radius:50%;background:#83838f}.port-status.open{color:#48daa5}.port-status.open:before{background:#48daa5}.port-status.closed{color:#ff8993}.port-status.closed:before{background:#ff8993}.port-status.timeout{color:#e9b65c}.port-status.timeout:before{background:#e9b65c}.port-status.udp{color:#d9acff}.port-status.udp:before{background:#d9acff}.port-status.loading{color:#d7c9d0}.port-status.loading:before{background:#d7c9d0}.card-buttons{display:flex;gap:7px}.check-port,.detail-port{height:38px;border-radius:8px;font-size:11px;font-weight:800}.check-port{flex:1;background:#522530;border:1px solid #894454;color:#ffdee2}.check-port:hover{background:#b7354a;color:white}.check-port:disabled{opacity:.5;cursor:wait}.detail-port{width:39px;border:1px solid #40414d;color:#c6c6d0;background:#282931}.detail-port:hover{background:#3c3d47}.card-details{padding:12px 14px 16px;margin:0;border-top:1px solid #373743;display:none}.card-details.visible{display:block}.card-details h4{font-size:10px;font-weight:800;color:#ff8b97;margin:10px 0 4px}.card-details h4:first-child{margin-top:0}.card-details p{font-size:11px;color:#b4b2bf;line-height:1.65;margin:0}.empty{padding:70px 15px;border:1px dashed #353640;background:#15161c;text-align:center;border-radius:14px;color:#aaa}.empty i{font-size:35px;color:#f35364}.empty h3{color:white;margin-top:15px;font:700 20px 'Outfit'}.info{display:flex;gap:16px;align-items:flex-start;background:#20181f;border:1px solid #51313b;border-radius:13px;padding:23px;margin:40px 0 55px}.info-icon{flex:none;width:49px;height:49px;background:#573141;border-radius:11px;color:#ffd27c;font-size:21px;display:grid;place-items:center}.info h3{font:750 18px 'Outfit';margin:0 0 8px}.info p{font-size:12px;line-height:1.7;color:#c3b9c2;margin:0}footer{border-top:1px solid #272832;background:#0d0e13}.footer-content{display:flex;justify-content:space-between;gap:15px;padding-top:23px;padding-bottom:23px;color:#9393a0;font-size:11px}footer b{font:700 14px 'Outfit';color:#f5f5f7}footer i{color:#e25364;margin-right:6px}.toasts{position:fixed;z-index:300;bottom:22px;right:25px}.toast-message{border:1px solid #9a4051;border-radius:10px;background:#352029;box-shadow:0 12px 35px #000a;color:white;padding:14px 17px;max-width:350px;font-size:12px;margin-top:8px}
@media(max-width:1320px){.filters{grid-template-columns:1fr 170px}.tab-filters{grid-row:2;grid-column:1/-1;justify-content:flex-start;width:max-content;max-width:100%;overflow-x:auto}.card-grid{gap:11px}.port-icon{width:80px;height:90px}.port-number{font-size:30px}.port-short{min-height:70px}}@media(max-width:1050px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.port-short{min-height:48px}.port-icon{width:100px;height:100px}.hero-illustration{flex-basis:25%}.server-rack{width:185px}.monitor-form{grid-template-columns:1fr 1fr}.monitor-form>div:last-child{grid-column:1/-1}.btn-scan{width:100%}}@media(max-width:780px){.main-header{height:66px}.brand{font-size:21px}.brand-symbol{height:37px;width:37px}.main-header nav a:not(.selected){display:none}.main-header nav a{padding:10px}.live-marker{display:none}.hero{padding:28px 23px;min-height:302px;margin-top:18px}.hero-copy{z-index:3}.hero h1{font-size:40px}.hero p{font-size:13px;max-width:450px}.hero-illustration{position:absolute;inset:0 0 0 auto;width:38%;opacity:.22}.monitor{padding:21px 17px}.authorized{display:none}.monitor-form{grid-template-columns:1fr}.monitor-form>div:last-child{grid-column:auto}.stats{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr}.tab-filters{grid-row:auto}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog{padding-top:40px}.port-short{min-height:60px}.footer-content{flex-direction:column;align-items:center;text-align:center}}@media(max-width:480px){.hero h1{font-size:34px}.hero{padding:27px 18px}.tags{gap:6px}.tags span{padding:9px;font-size:9px}.monitor-heading h2{font-size:23px}.monitor-heading p{font-size:11px}.stats{gap:8px}.stat{padding:13px 10px;gap:8px}.stat-icon{width:36px;height:36px;font-size:15px}.stat small{font-size:8px}.stat strong{font-size:24px}.catalog-heading h2{font-size:25px}.catalog-heading p{font-size:11px}.match-count{display:none}.group-title{gap:8px}.group-title h3{font-size:16px}.group-title p{font-size:10px}.group-icon{width:37px;height:37px}.group-counter{font-size:10px}.card-grid{gap:9px}.card-top{padding:11px 10px 0}.card-main{padding:3px 7px;min-height:78px;gap:2px}.port-icon{height:75px;width:70px}.port-number{font-size:28px}.port-name{font-size:10px}.port-proto{font-size:8px}.port-short{font-size:10px;margin:8px 10px 12px;min-height:76px}.card-bottom{padding:0 10px 11px}.port-status{font-size:9px}.check-port{font-size:10px}.detail-port{width:34px}.card-buttons{gap:5px}.info{padding:17px}.toasts{left:15px;right:15px;bottom:calc(15px + env(safe-area-inset-bottom))}.toast-message{max-width:100%}}@media(prefers-reduced-motion:reduce){*,*:after,*:before{transition:none!important;scroll-behavior:auto!important}}