:root{--color-primary-50:#ecfeff;--color-primary-100:#cffafe;--color-primary-200:#a5f3fc;--color-primary-300:#67e8f9;--color-primary-400:#22d3ee;--color-primary-500:#06b6d4;--color-primary-600:#0891b2;--color-primary-700:#0e7490;--color-accent-400:#facc15;--color-accent-500:#eab308;--color-accent-600:#ca8a04;--color-success:#2dd4bf;--color-error:#fb7185;--color-warning:#fbbf24;--color-surface-50:#f7faf9;--color-surface-100:#eef4f2;--color-surface-200:#d9e4e1;--color-surface-300:#b9c9c5;--color-surface-400:#8da4a0;--color-surface-500:#607772;--color-surface-600:#405551;--color-surface-700:#243633;--color-surface-800:#162421;--color-surface-900:#0b1413;--color-surface-950:#050908;--color-panel:#101c1a;--color-panel-raised:#142420;--color-panel-strong:#192d28;--color-border-subtle:#b9c9c524;--color-border-strong:#67e8f957;--color-grid-line:#67e8f90e;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Consolas", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.75;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.5rem;--radius-xl:.5rem;--radius-2xl:.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px #0003;--shadow-md:0 10px 24px -18px #000000a6;--shadow-lg:0 22px 55px -34px #000c;--shadow-xl:0 32px 80px -46px #000000e6;--shadow-glow:0 0 28px -12px var(--color-primary-400);--shadow-glow-accent:0 0 28px -12px var(--color-accent-500);--transition-fast:.15s ease;--transition-base:.2s ease;--transition-slow:.3s ease;--z-base:1;--z-dropdown:10;--z-sticky:20;--z-fixed:30;--z-modal:40;--z-tooltip:50}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-primary);background:linear-gradient(var(--color-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px), radial-gradient(ellipse at top, #06b6d424, transparent 36rem), linear-gradient(180deg, #07100f 0%, var(--color-surface-950) 54%, #020403 100%);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-size:44px 44px,44px 44px,auto,auto;min-height:100vh}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none}a{color:var(--color-primary-400);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary-300)}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6{font-weight:var(--font-semibold);line-height:var(--leading-tight);color:var(--text-primary)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}p{color:var(--text-secondary);line-height:var(--leading-relaxed)}code,pre{font-family:var(--font-mono);font-size:var(--text-sm)}code{background:var(--color-surface-800);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}pre{padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-surface-700);background:#07100f;overflow-x:auto}pre code{background:0 0;padding:0}strong{font-weight:var(--font-semibold);color:var(--text-primary)}.container{width:100%;max-width:1440px;padding:var(--space-8) var(--space-6) var(--space-12);margin:0 auto}.section{animation:.22s ease-out fadeIn;display:none}.section.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{top:-100%;left:var(--space-4);z-index:var(--z-tooltip);padding:var(--space-3) var(--space-4);background:var(--color-accent-500);color:var(--color-surface-950);border-radius:var(--radius-md);font-weight:var(--font-medium);transition:top var(--transition-fast);position:absolute}.skip-link:focus{top:var(--space-4)}:focus-visible{outline:2px solid var(--color-accent-400);outline-offset:3px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}html{scroll-behavior:auto}}.text-primary{color:var(--color-primary-500)}.text-accent{color:var(--color-accent-500)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.text-warning{color:var(--color-warning)}.text-muted{color:var(--text-muted)}.bg-surface-800{background-color:var(--color-surface-800)}.bg-surface-900{background-color:var(--color-surface-900)}.font-mono{font-family:var(--font-mono)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.grid{display:grid}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.icon{vertical-align:-.125em;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;fill:none;width:1.25em;height:1.25em}.icon-sm{width:1rem;height:1rem}.icon-lg{width:1.5rem;height:1.5rem}.icon-xl{width:2rem;height:2rem}@media (width<=768px){.container{padding:var(--space-4)}}.header{padding:var(--space-12) var(--space-6) var(--space-8);text-align:center;border-bottom:1px solid var(--color-border-subtle);isolation:isolate;background:linear-gradient(90deg,#22d3ee14 1px,#0000 1px) 0 0/38px 38px,linear-gradient(#22d3ee14 1px,#0000 1px) 0 0/38px 38px,linear-gradient(#101c1aeb 0%,#050908fa 100%);position:relative;overflow:hidden}.header:after{content:"";background:linear-gradient(90deg, transparent, var(--color-primary-400), var(--color-accent-400), transparent);opacity:.8;height:1px;position:absolute;inset:auto 0 0}.header__network{z-index:-1;opacity:.72;position:absolute;inset:0}.header__node,.header__route{display:block;position:absolute}.header__node{background:var(--color-surface-950);border:1px solid #67e8f9d9;width:10px;height:10px;box-shadow:0 0 22px #22d3ee8c}.header__node--one{top:34%;left:14%}.header__node--two{border-color:#facc15e6;top:26%;right:18%;box-shadow:0 0 22px #facc156b}.header__node--three{border-color:#2dd4bfe6;bottom:24%;left:30%;box-shadow:0 0 22px #2dd4bf70}.header__node--four{bottom:31%;right:31%}.header__route{transform-origin:0;background:linear-gradient(90deg,#0000,#67e8f98c,#0000);height:1px}.header__route--one{width:34%;top:36%;left:14%;transform:rotate(12deg)}.header__route--two{width:28%;top:29%;right:18%;transform:rotate(151deg)}.header__route--three{width:39%;bottom:27%;left:30%;transform:rotate(-8deg)}.header__eyebrow{color:var(--color-accent-400);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:.08em;margin-bottom:var(--space-3);text-transform:uppercase}.header__title{font-size:clamp(2.75rem,8vw,6rem);font-weight:var(--font-bold);background:linear-gradient(135deg, #f8fffd 0%, var(--color-primary-300) 42%, var(--color-accent-400) 100%);-webkit-text-fill-color:transparent;letter-spacing:0;margin-bottom:var(--space-3);-webkit-background-clip:text;background-clip:text}.header__tagline{max-width:700px;font-size:var(--text-lg);color:var(--text-secondary);font-weight:var(--font-normal);margin:0 auto}.header__metrics{justify-content:center;gap:var(--space-2);margin-top:var(--space-6);flex-wrap:wrap;display:flex}.header__metrics span{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--text-sm);background:#101c1ac7;display:inline-flex}.header__metrics strong{color:var(--color-primary-300);font-family:var(--font-mono)}.nav{justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border-subtle);z-index:var(--z-sticky);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#050908db;flex-wrap:wrap;display:flex;position:sticky;top:0;box-shadow:0 18px 32px -30px #000000d9}.nav__btn{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-subtle);color:var(--text-secondary);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);transition:all var(--transition-base);white-space:nowrap;background:#101c1ab8;box-shadow:inset 0 1px #ffffff08}.nav__btn:hover{color:var(--text-primary);background:var(--color-panel-raised);border-color:#67e8f942}.nav__btn:focus-visible{outline:2px solid var(--color-primary-400);outline-offset:2px}.nav__btn.active{color:var(--color-surface-950);box-shadow:var(--shadow-glow), inset 0 1px 0 #ffffff3d;background:linear-gradient(135deg,#06b6d4f0,#2dd4bfd1);border-color:#a5f3fca8}.nav__btn.active:hover{background:linear-gradient(135deg, var(--color-primary-400), var(--color-success))}.nav__toggle{padding:var(--space-2);background:var(--color-surface-800);border-radius:var(--radius-md);color:var(--text-primary);display:none}@media (width<=768px){.header{padding:var(--space-8) var(--space-4) var(--space-6)}.header__tagline{font-size:var(--text-base)}.header__metrics{gap:var(--space-1)}.nav{gap:var(--space-1);padding:var(--space-3);flex-direction:column}.nav__btn{text-align:center;width:100%;padding:var(--space-3) var(--space-4)}}.card{border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);padding:var(--space-6);margin-bottom:var(--space-6);box-shadow:var(--shadow-lg);background:linear-gradient(#142420f5,#0b1413f5),linear-gradient(90deg,#22d3ee2e,#facc1514);position:relative;overflow:hidden}.card:before{content:"";background:linear-gradient(90deg, var(--color-primary-400), var(--color-success), var(--color-accent-400));opacity:.88;height:3px;position:absolute;inset:0 0 auto}.card:after{content:"";pointer-events:none;background:linear-gradient(#22d3ee12,#0000);height:120px;position:absolute;inset:3px 0 auto}.card__header{margin-bottom:var(--space-5);padding:var(--space-2) var(--space-2) var(--space-5);border-bottom:1px solid var(--color-border-subtle);z-index:1;position:relative}.card__title{align-items:center;gap:var(--space-3);font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-2);display:flex}.card__title .icon{color:var(--color-accent-400);filter:drop-shadow(0 0 10px #facc153d)}.card__description{color:var(--text-secondary);font-size:var(--text-base);line-height:var(--leading-relaxed)}.visualization-box{background:linear-gradient(var(--color-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px), linear-gradient(180deg, #07100ff5, #0b1413f0);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);background-size:34px 34px,34px 34px,auto;justify-content:center;align-items:center;min-height:300px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff05,inset 0 0 60px #0000002e}.info-box{border:1px solid var(--color-border-subtle);border-left:4px solid var(--color-primary-400);border-radius:var(--radius-md);padding:var(--space-5);margin-top:var(--space-6);background:linear-gradient(#101c1aeb,#07100feb)}.info-box__title{align-items:center;gap:var(--space-2);color:var(--color-primary-300);font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--space-3);display:flex}.info-box ul,.info-box ol{padding-left:var(--space-5);color:var(--text-secondary)}.info-box li{line-height:2;list-style:outside}.info-box ol li{list-style:decimal}.warning-box{border-radius:var(--radius-md);padding:var(--space-5);margin-top:var(--space-6);background:#fb718514;border:1px solid #fb71856b;border-left-width:4px}.warning-box__title{align-items:center;gap:var(--space-2);color:var(--color-error);font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--space-3);display:flex}.warning-box ul{padding-left:var(--space-5);color:var(--text-secondary)}.warning-box li{line-height:2;list-style:outside}.success-box{border-radius:var(--radius-md);padding:var(--space-5);margin-top:var(--space-6);background:#2dd4bf14;border:1px solid #2dd4bf6b;border-left-width:4px}.success-box__title{align-items:center;gap:var(--space-2);color:var(--color-success);font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--space-3);display:flex}.success-box ul{padding-left:var(--space-5);color:var(--text-secondary)}.success-box li{line-height:2;list-style:outside}.stat-card{background:linear-gradient(180deg, var(--color-panel-raised), var(--color-surface-900));border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);text-align:center;transition:transform var(--transition-base), box-shadow var(--transition-base)}.stat-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px)}.stat-card__icon{font-size:var(--text-2xl);margin-bottom:var(--space-2);color:var(--color-primary-400)}.stat-card__value{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--color-primary-300);margin:var(--space-2) 0;font-family:var(--font-mono)}.footer{text-align:center;padding:var(--space-8) var(--space-6);margin-top:var(--space-12);border-top:1px solid var(--color-border-subtle);color:var(--text-muted);font-size:var(--text-sm)}.footer p+p{margin-top:var(--space-2)}.footer__links a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--color-primary-300);font-family:var(--font-mono);background:#101c1a8f;border:1px solid #67e8f93d;align-items:center;display:inline-flex}.footer__links a:hover{border-color:var(--color-accent-400);color:var(--color-accent-400)}@media (width<=768px){.card{padding:var(--space-4);margin-bottom:var(--space-4);border-radius:var(--radius-lg)}.card__title{font-size:var(--text-lg)}.visualization-box{padding:var(--space-4);min-height:250px}.info-box,.warning-box,.success-box{padding:var(--space-4)}}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-size:var(--text-sm);font-weight:var(--font-medium);border-radius:var(--radius-md);transition:all var(--transition-base);white-space:nowrap;cursor:pointer;border:1px solid #0000;min-height:42px;line-height:1;display:inline-flex}.btn:focus-visible{outline:2px solid var(--color-primary-400);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:linear-gradient(135deg, var(--color-primary-400), var(--color-success));color:var(--color-surface-950);box-shadow:var(--shadow-md), inset 0 1px 0 #ffffff47;border-color:#a5f3fc6b}.btn--primary:hover:not(:disabled){background:linear-gradient(135deg, var(--color-primary-300), #5eead4);box-shadow:var(--shadow-lg), var(--shadow-glow);transform:translateY(-1px)}.btn--primary:active:not(:disabled){transform:translateY(0)}.btn--accent{background:linear-gradient(135deg, var(--color-accent-500), var(--color-warning));color:var(--color-surface-950);box-shadow:var(--shadow-md);border-color:#facc157a}.btn--accent:hover:not(:disabled){background:linear-gradient(135deg, var(--color-accent-500), var(--color-accent-400));box-shadow:var(--shadow-lg), var(--shadow-glow-accent);transform:translateY(-1px)}.btn--secondary{color:var(--color-primary-300);background:#101c1ac2;border:1px solid #67e8f947}.btn--secondary:hover:not(:disabled){border-color:var(--color-primary-400);color:var(--color-primary-100);background:#06b6d424}.btn--ghost{color:var(--text-secondary);background:0 0}.btn--ghost:hover:not(:disabled){background:var(--color-panel-strong);color:var(--text-primary)}.btn--danger{background:linear-gradient(135deg, var(--color-error), #e11d48);color:#fff;border-color:#fb71857a}.btn--danger:hover:not(:disabled){box-shadow:var(--shadow-lg);background:#dc2626}.btn--success{background:var(--color-success);color:#fff}.btn--success:hover:not(:disabled){box-shadow:var(--shadow-lg);background:#0f766e}.btn--sm{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.btn--lg{padding:var(--space-4) var(--space-6);font-size:var(--text-base)}.btn .icon{width:1em;height:1em}.btn-group{gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap;display:flex}.delete-btn{padding:var(--space-2) var(--space-3);background:var(--color-error);color:#fff;border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base);border:none}.delete-btn:hover{background:#dc2626;transform:scale(1.02)}@media (width<=768px){.btn{padding:var(--space-3) var(--space-4)}.btn-group{flex-direction:column}.btn-group .btn{width:100%}}.input-group{gap:var(--space-2);flex-direction:column;display:flex}.input-group label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary)}.input{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-base);font-family:var(--font-mono);transition:all var(--transition-base);background:#050908b8;width:100%}.input::placeholder{color:var(--text-muted)}.input:hover{border-color:#67e8f947}.input:focus{border-color:var(--color-primary-400);outline:none;box-shadow:0 0 0 3px #22d3ee29}.input--lg{padding:var(--space-4) var(--space-5);font-size:var(--text-lg);border-radius:var(--radius-lg)}.input-with-btn{gap:var(--space-3);display:flex}.input-with-btn .input{flex:1}.select{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-base);cursor:pointer;transition:all var(--transition-base);appearance:none;background:#050908b8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat;background-position:right var(--space-3) center;padding-right:var(--space-10);background-size:1rem}.select:hover{border-color:#67e8f947}.select:focus{border-color:var(--color-primary-400);outline:none;box-shadow:0 0 0 3px #22d3ee29}.select option{background:var(--color-panel-raised);color:var(--text-primary)}.form-grid{gap:var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}.form-grid--4{grid-template-columns:repeat(4,1fr)}.cidr-input-group{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:1fr auto;display:grid}.results-grid{gap:var(--space-4);margin-top:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.result-item{border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-4);background:linear-gradient(#101c1af2,#07100ff2)}.result-item__label{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-accent-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2)}.result-item__value{font-family:var(--font-mono);font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary);word-break:break-all}.result-item__value--sm{font-size:var(--text-sm)}@media (width<=768px){.form-grid,.form-grid--4,.cidr-input-group{grid-template-columns:1fr}.input-with-btn{flex-direction:column}.results-grid{grid-template-columns:1fr}}.table-wrapper{border-radius:var(--radius-lg);border:1px solid var(--color-border-subtle);overflow-x:auto}.table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}.table th,.table td{padding:var(--space-4);text-align:left;border-bottom:1px solid var(--color-border-subtle)}.table th{color:var(--color-primary-100);font-weight:var(--font-semibold);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;background:#142420fa}.table td{color:var(--text-secondary);vertical-align:middle}.table tbody tr{transition:background var(--transition-fast)}.table tbody tr:hover{background:#22d3ee0f}.table tbody tr:last-child td{border-bottom:none}.table__protocol{font-weight:var(--font-semibold);color:var(--color-accent-400)}.table__badge{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);display:inline-flex}.table__badge--success{color:var(--color-success);background:#10b98126}.table__badge--warning{color:var(--color-warning);background:#f59e0b26}.table__badge--error{color:var(--color-error);background:#ef444426}.rules-list{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);background:#050908a8;max-height:300px;overflow-y:auto}.rules-list::-webkit-scrollbar{width:8px}.rules-list::-webkit-scrollbar-track{background:var(--color-surface-800);border-radius:var(--radius-full)}.rules-list::-webkit-scrollbar-thumb{background:var(--color-surface-600);border-radius:var(--radius-full)}.rules-list::-webkit-scrollbar-thumb:hover{background:var(--color-surface-500)}.rules-list__empty{text-align:center;color:var(--text-muted);padding:var(--space-8)}.rule-item{padding:var(--space-3) var(--space-4);background:var(--color-panel-raised);border-left:3px solid var(--color-success);border-radius:var(--radius-md);margin-bottom:var(--space-2);transition:transform var(--transition-fast);justify-content:space-between;align-items:center;display:flex}.rule-item:last-child{margin-bottom:0}.rule-item:hover{transform:translate(4px)}.rule-item--blocked{border-left-color:var(--color-error)}.rule-item__text{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary)}.rule-item__text strong{color:var(--text-primary);margin-right:var(--space-2)}.test-result{margin-top:var(--space-4);padding:var(--space-4);border:2px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:#050908a8}.test-result--allowed{border-color:var(--color-success)}.test-result--blocked{border-color:var(--color-error)}.test-result--warning{border-color:var(--color-warning)}.test-result__title{font-weight:var(--font-semibold);margin-bottom:var(--space-2)}.test-result--allowed .test-result__title{color:var(--color-success)}.test-result--blocked .test-result__title{color:var(--color-error)}.test-result--warning .test-result__title{color:var(--color-warning)}.test-result__text{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary)}@media (width<=768px){.table th,.table td{padding:var(--space-3);font-size:var(--text-xs)}.rule-item{align-items:flex-start;gap:var(--space-2);flex-direction:column}.rule-item__text{font-size:var(--text-xs)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@keyframes dangerPulse{0%,to{box-shadow:0 0 20px #fb718566}50%{box-shadow:0 0 40px #fb718599,0 0 60px #fb71854d}}@keyframes glow{0%,to{box-shadow:0 0 10px var(--color-primary-500)}50%{box-shadow:0 0 20px var(--color-primary-400), 0 0 30px var(--color-primary-500)}}@keyframes trailFade{to{opacity:0;transform:scale(.5)}}@keyframes progressFill{0%{width:0%}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fade-in{animation:.3s ease-out fadeIn}.animate-slide-in-left{animation:.3s ease-out slideInLeft}.animate-slide-in-right{animation:.3s ease-out slideInRight}.animate-pulse{animation:2s ease-in-out infinite pulse}.animate-glow{animation:2s ease-in-out infinite glow}.animate-spin{animation:1s linear infinite spin}.packet-trail{background:var(--color-primary-400);pointer-events:none;border-radius:50%;width:4px;height:4px;animation:.5s ease-out forwards trailFade;position:absolute}.progress-bar__fill{animation:.5s ease-out progressFill}.transition-all{transition:all var(--transition-base)}.transition-transform{transition:transform var(--transition-base)}.transition-opacity{transition:opacity var(--transition-base)}.hover-lift{transition:transform var(--transition-base), box-shadow var(--transition-base)}.hover-lift:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}@media (prefers-reduced-motion:reduce){.animate-pulse,.animate-glow,.animate-spin{animation:none}.packet-trail{opacity:0;animation:none}}.tcp-animation{width:100%;height:400px;position:relative}.tcp-animation__line{background:linear-gradient(90deg,#0000,#22d3ee3d,#facc157a,#2dd4bf3d,#0000);height:3px;position:absolute;top:50%;left:15%;right:15%;transform:translateY(-50%)}.tcp-node{border-radius:var(--radius-lg);width:120px;height:120px;font-weight:var(--font-semibold);transition:transform var(--transition-base), box-shadow var(--transition-base);box-shadow:var(--shadow-lg), inset 0 1px 0 #ffffff29;border:1px solid #ffffff24;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.tcp-node:hover{transform:translateY(-50%)scale(1.05)}.tcp-node__icon{width:2.5rem;height:2.5rem;margin-bottom:var(--space-2);stroke:currentColor}.tcp-node__label{font-size:var(--text-sm);font-weight:var(--font-bold);margin-bottom:var(--space-1)}.tcp-node__ip{font-size:var(--text-xs);font-family:var(--font-mono);opacity:.8}.tcp-node--client{color:#fff;background:linear-gradient(135deg,#fb7185,#be123c);left:5%}.tcp-node--client:hover{box-shadow:0 0 40px #ef444480}.tcp-node--server{background:linear-gradient(135deg, var(--color-success), #0f766e);color:var(--color-surface-950);right:5%}.tcp-node--server:hover{box-shadow:0 0 40px #10b98180}.tcp-packet{background:linear-gradient(135deg, var(--color-accent-400), var(--color-primary-400));color:var(--color-surface-950);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-mono);white-space:nowrap;z-index:var(--z-dropdown);opacity:0;transition:opacity .1s;position:absolute;box-shadow:0 0 26px #22d3ee6b}.tcp-packet:before{content:"";background:linear-gradient(45deg, var(--color-primary-400), var(--color-primary-600));border-radius:var(--radius-full);z-index:-1;opacity:.4;filter:blur(8px);position:absolute;inset:-4px}.tcp-steps{justify-content:center;gap:var(--space-4);margin-top:var(--space-6);flex-wrap:wrap;display:flex}.tcp-step{align-items:center;gap:var(--space-2);color:var(--text-secondary);font-size:var(--text-sm);transition:color var(--transition-base);display:flex}.tcp-step.active{color:var(--color-accent-400)}.tcp-step.completed{color:var(--color-success)}.tcp-step__number{background:var(--color-panel-strong);width:24px;height:24px;font-weight:var(--font-semibold);font-size:var(--text-xs);border-radius:50%;justify-content:center;align-items:center;display:flex}.tcp-step.active .tcp-step__number{background:var(--color-accent-500);color:var(--color-surface-950)}.tcp-step.completed .tcp-step__number{background:var(--color-success);color:#fff}.tcp-message{bottom:var(--space-4);background:var(--color-success);color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);font-weight:var(--font-semibold);font-size:var(--text-sm);align-items:center;gap:var(--space-2);animation:.3s ease-out fadeIn;display:flex;position:absolute;left:50%;transform:translate(-50%)}.tcp-message--timeout,.tcp-message--closed{background:var(--color-warning)}.tcp-controls{justify-content:center;align-items:center;gap:var(--space-3);margin-top:var(--space-6);grid-template-columns:auto minmax(220px,360px) auto;display:grid}.tcp-controls label{color:var(--text-primary);font-weight:var(--font-medium)}.tcp-result{margin-top:var(--space-6);padding:var(--space-5);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:#050908a8}.tcp-result__title{color:var(--color-primary-300);font-size:var(--text-lg);margin-bottom:var(--space-2)}.tcp-result__summary{margin-bottom:var(--space-4)}.tcp-state-table{gap:var(--space-2);margin-bottom:var(--space-4);display:grid}.tcp-state-row{padding:var(--space-3);background:var(--color-panel-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);overflow-wrap:anywhere}.tcp-result__trace{white-space:pre-wrap;overflow-wrap:anywhere}@media (width<=768px){.tcp-animation{height:350px}.tcp-node{width:90px;height:90px}.tcp-node__icon{width:2rem;height:2rem}.tcp-node__label{font-size:var(--text-xs)}.tcp-node__ip{display:none}.tcp-packet{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.tcp-steps{gap:var(--space-2);flex-direction:column}.tcp-controls{grid-template-columns:1fr}}.dns-flow{justify-content:space-around;align-items:center;gap:var(--space-3);padding:var(--space-6);flex-wrap:wrap;width:100%;display:flex;position:relative}.dns-node{background:linear-gradient(180deg, var(--color-panel-strong), var(--color-panel));padding:var(--space-4);border-radius:var(--radius-lg);text-align:center;min-width:130px;box-shadow:var(--shadow-md);transition:all var(--transition-base);border:1px solid #67e8f933;position:relative}.dns-node:hover{border-color:#facc156b;transform:translateY(-3px)}.dns-node.active{border-color:var(--color-accent-400);box-shadow:var(--shadow-glow-accent);transform:translateY(-5px)}.dns-node__icon{width:2rem;height:2rem;margin:0 auto var(--space-2);color:var(--color-primary-300)}.dns-node__title{font-weight:var(--font-bold);font-size:var(--text-sm);color:var(--text-primary);margin-bottom:var(--space-1)}.dns-node__subtitle{font-size:var(--text-xs);color:var(--text-secondary)}.dns-arrow{color:var(--color-surface-500);font-size:var(--text-xl);transition:all var(--transition-base)}.dns-arrow.animating{color:var(--color-accent-400);transform:scale(1.2)}.dns-input-area{margin-top:var(--space-6);gap:var(--space-3);flex-wrap:wrap;justify-content:center;display:flex}.dns-input{flex:1;min-width:250px;max-width:400px}.dns-result{margin-top:var(--space-6);padding:var(--space-5);border-radius:var(--radius-lg);background:#050908a8;border:1px solid #2dd4bf73;display:none}.dns-result.visible{animation:.3s ease-out fadeIn;display:block}.dns-result__title{color:var(--color-success);font-weight:var(--font-semibold);margin-bottom:var(--space-3);align-items:center;gap:var(--space-2);display:flex}.dns-result__content{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.8}.dns-result__content strong{color:var(--text-primary)}.dns-result__stages{margin-top:var(--space-4);gap:var(--space-2);padding-left:var(--space-5);color:var(--text-secondary);list-style:decimal;display:grid}.dns-result__trace{margin-top:var(--space-4);white-space:pre-wrap;overflow-wrap:anywhere}.dns-records{gap:var(--space-3);margin-top:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.dns-record{align-items:flex-start;gap:var(--space-2);display:flex}.dns-record__type{font-weight:var(--font-semibold);color:var(--color-primary-400);font-family:var(--font-mono);min-width:60px}.dns-record__desc{color:var(--text-secondary);font-size:var(--text-sm)}@media (width<=768px){.dns-flow{gap:var(--space-2);padding:var(--space-4);flex-direction:column}.dns-node{min-width:100%;padding:var(--space-3)}.dns-arrow{transform:rotate(90deg)}.dns-arrow.animating{transform:rotate(90deg)scale(1.2)}.dns-input-area{flex-direction:column}.dns-input{max-width:none}}.tls-lab{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-6);background:linear-gradient(#101c1aeb,#07100feb)}.tls-lab__controls{align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);grid-template-columns:auto minmax(240px,420px) auto;display:grid}.tls-lab__controls label{color:var(--text-primary);font-weight:var(--font-medium)}.tls-summary{align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-5);display:flex}.tls-summary__title{font-size:var(--text-xl);margin-bottom:var(--space-1)}.tls-verdict{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);display:inline-flex}.tls-verdict--pass{color:var(--color-success);background:#10b98124}.tls-verdict--warn{color:var(--color-warning);background:#f59e0b24}.tls-verdict--fail{color:var(--color-error);background:#ef444424}.tls-grid{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.tls-panel{background:var(--color-panel-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-4)}.tls-panel__title{color:var(--color-accent-400);font-size:var(--text-base);margin-bottom:var(--space-3)}.tls-facts{gap:var(--space-2);display:grid}.tls-facts div{gap:var(--space-3);grid-template-columns:96px 1fr;display:grid}.tls-facts dt{color:var(--text-muted);font-size:var(--text-sm)}.tls-facts dd{color:var(--text-primary);font-family:var(--font-mono);font-size:var(--text-sm);overflow-wrap:anywhere}.tls-checks{gap:var(--space-2);display:grid}.tls-check{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.5;list-style:none}.tls-check--pass strong{color:var(--color-success)}.tls-check--warn strong{color:var(--color-warning)}.tls-check--fail strong{color:var(--color-error)}.tls-openssl{white-space:pre-wrap;overflow-wrap:anywhere}.tls-recommendation{margin-top:var(--space-4);padding:var(--space-3);color:var(--text-secondary);background:var(--color-panel-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md)}.comparison{gap:var(--space-6);margin-top:var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}.protocol-box{border-radius:var(--radius-lg);padding:var(--space-6);transition:all var(--transition-base);background:linear-gradient(#101c1aeb,#050908e6);border:1px solid}.protocol-box:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)}.protocol-box--http{border-color:#fb718575}.protocol-box--https{border-color:#2dd4bf75}.protocol-box__header{text-align:center;margin-bottom:var(--space-5)}.protocol-box__icon{width:3rem;height:3rem;margin:0 auto var(--space-3)}.protocol-box--http .protocol-box__icon{color:var(--color-error)}.protocol-box--https .protocol-box__icon{color:var(--color-success)}.protocol-box__title{font-size:var(--text-lg);font-weight:var(--font-bold);margin-bottom:var(--space-2)}.protocol-box--http .protocol-box__title{color:var(--color-error)}.protocol-box--https .protocol-box__title{color:var(--color-success)}.protocol-badges{justify-content:center;gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.protocol-badge{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);display:inline-flex}.protocol-badge--secure{border:1px solid var(--color-success);color:var(--color-success);background:#2dd4bf24}.protocol-badge--insecure{border:1px solid var(--color-error);color:var(--color-error);background:#fb718524}.protocol-features{list-style:none}.protocol-features li{align-items:flex-start;gap:var(--space-3);padding:var(--space-2) 0;color:var(--text-secondary);font-size:var(--text-sm);line-height:1.5;display:flex}.protocol-features li .icon{flex-shrink:0;width:1rem;height:1rem;margin-top:2px}.protocol-box--http .protocol-features li .icon{color:var(--color-error)}.protocol-box--https .protocol-features li .icon{color:var(--color-success)}.protocol-features li strong{color:var(--text-primary)}.security-section{margin-top:var(--space-4)}.security-section__title{color:var(--color-accent-400);font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--space-3);margin-top:var(--space-5)}.security-section__title:first-of-type{margin-top:0}.security-section ul{padding-left:var(--space-5)}.security-section li{color:var(--text-secondary);line-height:1.8;font-size:var(--text-sm);list-style:outside}.security-section code{font-size:var(--text-xs);word-break:break-all}@media (width<=768px){.tls-lab__controls,.tls-grid,.comparison{grid-template-columns:1fr}.protocol-box{padding:var(--space-4)}}.packet-layers{margin-top:var(--space-4)}.packet-lab{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-6);background:linear-gradient(#101c1aeb,#07100feb)}.packet-lab__controls{align-items:center;gap:var(--space-3);grid-template-columns:auto minmax(220px,360px) auto;display:grid}.packet-lab__controls label,.packet-lab__title{color:var(--text-primary);font-weight:var(--font-semibold)}.packet-lab__summary{margin-top:var(--space-4)}.packet-lab__grid{gap:var(--space-5);margin-top:var(--space-5);grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr);display:grid}.packet-lab__title{font-size:var(--text-base);margin-bottom:var(--space-3)}.packet-fields{gap:var(--space-2);display:grid}.packet-field{gap:var(--space-3);width:100%;padding:var(--space-3);background:var(--color-panel-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);text-align:left;grid-template-columns:1fr auto;display:grid}.packet-field:hover,.packet-field--active{border-color:var(--color-accent-400)}.packet-field__label{color:var(--text-secondary);font-size:var(--text-sm)}.packet-field__value{color:var(--text-primary);font-family:var(--font-mono);font-size:var(--text-sm)}.packet-field-detail{margin-top:var(--space-3);padding:var(--space-3);color:var(--color-primary-200);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-sm);background:#22d3ee14;border:1px solid #22d3ee47}.packet-hex{white-space:pre-wrap;overflow-wrap:anywhere}.layer{border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-3);cursor:pointer;transition:all var(--transition-base);background:#050908a8;border-left:4px solid;position:relative;overflow:hidden}.layer:before{content:"";width:0;height:100%;transition:width var(--transition-base);background:linear-gradient(90deg,#22d3ee14,#0000);position:absolute;top:0;left:0}.layer:hover:before{width:100%}.layer:hover{box-shadow:var(--shadow-md);transform:translate(4px)}.layer.expanded{background:var(--color-panel-raised)}.layer:first-child{border-color:#fb7185}.layer:nth-child(2){border-color:#fbbf24}.layer:nth-child(3){border-color:#22d3ee}.layer:nth-child(4){border-color:#2dd4bf}.layer:nth-child(5){border-color:#a3e635}.layer__header{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.layer__title{align-items:center;gap:var(--space-3);font-weight:var(--font-semibold);font-size:var(--text-base);color:var(--text-primary);display:flex}.layer__title .icon{width:1.25rem;height:1.25rem}.layer:first-child .layer__title .icon{color:#fb7185}.layer:nth-child(2) .layer__title .icon{color:#fbbf24}.layer:nth-child(3) .layer__title .icon{color:#22d3ee}.layer:nth-child(4) .layer__title .icon{color:#2dd4bf}.layer:nth-child(5) .layer__title .icon{color:#a3e635}.layer__toggle{width:1.25rem;height:1.25rem;color:var(--text-muted);transition:transform var(--transition-base)}.layer.expanded .layer__toggle{transform:rotate(180deg)}.layer__content{max-height:0;transition:max-height var(--transition-slow), margin-top var(--transition-slow);color:var(--text-secondary);font-size:var(--text-sm);line-height:1.7;overflow:hidden}.layer.expanded .layer__content{max-height:600px;margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border-subtle)}.layer__content p{margin-bottom:var(--space-3)}.layer__content strong{color:var(--text-primary)}.layer__details{margin-top:var(--space-3)}.layer__details-title{color:var(--color-accent-400);font-weight:var(--font-medium);margin-bottom:var(--space-2);font-size:var(--text-sm)}.layer__details ul{padding-left:var(--space-5)}.layer__details li{margin-bottom:var(--space-1);list-style:outside}.layer pre{margin-top:var(--space-3);font-size:var(--text-xs)}@media (width<=768px){.layer{padding:var(--space-3)}.layer__title{font-size:var(--text-sm)}.layer.expanded .layer__content{max-height:800px}.packet-lab__controls,.packet-lab__grid,.packet-field{grid-template-columns:1fr}}.mitm-container{gap:var(--space-6);margin-top:var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}.mitm-scenario{border-radius:var(--radius-lg);padding:var(--space-6);background:linear-gradient(#101c1ae6,#050908e6);border:1px solid;min-height:450px;position:relative}.mitm-scenario--vulnerable{border-color:#fb718575}.mitm-scenario--secure{border-color:#2dd4bf75}.mitm-scenario__title{text-align:center;font-size:var(--text-lg);font-weight:var(--font-bold);margin-bottom:var(--space-6);justify-content:center;align-items:center;gap:var(--space-2);display:flex}.mitm-scenario--vulnerable .mitm-scenario__title{color:var(--color-error)}.mitm-scenario--secure .mitm-scenario__title{color:var(--color-success)}.mitm-diagram{flex-direction:column;justify-content:space-between;align-items:center;height:350px;display:flex;position:relative}.mitm-node{width:90px;height:90px;font-weight:var(--font-bold);font-size:var(--text-xs);text-align:center;z-index:var(--z-base);transition:all var(--transition-base);box-shadow:var(--shadow-md), inset 0 1px 0 #ffffff24;border:1px solid #ffffff29;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.mitm-node:hover{transform:scale(1.1)}.mitm-node__icon{width:2rem;height:2rem;margin-bottom:var(--space-1)}.mitm-node--user{background:linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));color:#fff}.mitm-node--attacker{background:linear-gradient(135deg, var(--color-error), #be123c);color:#fff;animation:2s ease-in-out infinite dangerPulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mitm-node--attacker:hover{transform:translate(-50%,-50%)scale(1.1)}.mitm-node--server{background:linear-gradient(135deg, var(--color-success), #0f766e);color:var(--color-surface-950)}.mitm-connection{background:linear-gradient(180deg, transparent, var(--color-surface-600), transparent);width:3px;position:absolute;left:50%;transform:translate(-50%)}.mitm-connection--top{height:80px;top:90px}.mitm-connection--bottom{height:80px;top:180px}.mitm-packet{background:linear-gradient(135deg, var(--color-primary-400), var(--color-accent-400));color:var(--color-surface-950);padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-weight:var(--font-semibold);font-size:var(--text-xs);box-shadow:0 0 20px var(--color-primary-400);opacity:0;white-space:nowrap;z-index:var(--z-dropdown);text-align:center;max-width:150px;transition:opacity .1s;position:absolute;left:50%;transform:translate(-50%)}.mitm-packet--encrypted{background:var(--color-success);box-shadow:0 0 20px #10b98199}.mitm-packet--stolen{background:var(--color-error);box-shadow:0 0 20px #ef444499}.attacker-vision{border:1px solid var(--color-error);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);opacity:0;transition:opacity var(--transition-base);white-space:nowrap;z-index:var(--z-dropdown);align-items:center;gap:var(--space-2);background:#050908f5;display:flex;position:absolute;bottom:-50px;left:50%;transform:translate(-50%)}.attacker-vision.visible{opacity:1}.attacker-vision--blocked{border-color:var(--color-success);color:var(--color-success)}.attacker-vision__icon{width:1rem;height:1rem}.mitm-controls{justify-content:center;gap:var(--space-3);margin-top:var(--space-6);display:flex}@media (width<=968px){.mitm-container{grid-template-columns:1fr}.mitm-scenario{min-height:400px;padding:var(--space-4)}.mitm-diagram{height:300px}.mitm-node{width:70px;height:70px}.mitm-node__icon{width:1.5rem;height:1.5rem}}.comparison-section{margin-top:var(--space-4)}.protocol-table-wrapper{border-radius:var(--radius-lg);border:1px solid var(--color-border-subtle);margin-top:var(--space-4);overflow-x:auto}.protocol-table{border-collapse:collapse;width:100%;font-size:var(--text-sm);min-width:800px}.protocol-table th,.protocol-table td{padding:var(--space-4);text-align:left;border-bottom:1px solid var(--color-border-subtle)}.protocol-table th{background:var(--color-panel-raised);color:var(--color-primary-100);font-weight:var(--font-semibold);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;position:sticky;top:0}.protocol-table td{color:var(--text-secondary);vertical-align:middle}.protocol-table tbody tr{transition:background var(--transition-fast)}.protocol-table tbody tr:hover{background:#22d3ee0f}.protocol-table tbody tr:last-child td{border-bottom:none}.protocol-table__name{font-weight:var(--font-semibold);color:var(--color-accent-400);font-family:var(--font-mono)}.indicator{align-items:center;gap:var(--space-1);display:inline-flex}.indicator--fast{color:var(--color-success)}.indicator--moderate{color:var(--color-warning)}.indicator--slow{color:var(--color-error)}.security-status{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);display:inline-flex}.security-status--secure{color:var(--color-success);background:#10b98126}.security-status--partial{color:var(--color-warning);background:#f59e0b26}.security-status--insecure{color:var(--color-error);background:#ef444426}.comparison-info{gap:var(--space-4);margin-top:var(--space-6);grid-template-columns:repeat(2,1fr);display:grid}.comparison-info-box{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);background:linear-gradient(#101c1aeb,#07100feb)}.comparison-info-box__title{align-items:center;gap:var(--space-2);font-weight:var(--font-semibold);font-size:var(--text-base);margin-bottom:var(--space-3);display:flex}.comparison-info-box--primary .comparison-info-box__title{color:var(--color-primary-400)}.comparison-info-box--success .comparison-info-box__title{color:var(--color-success)}.comparison-info-box p{font-size:var(--text-sm);margin-bottom:var(--space-3);line-height:1.6}.comparison-info-box p:last-child{margin-bottom:0}.comparison-info-box ul{padding-left:var(--space-5);margin-top:var(--space-2)}.comparison-info-box li{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-1);list-style:outside}@media (width<=768px){.protocol-table th,.protocol-table td{padding:var(--space-3);font-size:var(--text-xs)}.comparison-info{grid-template-columns:1fr}}.firewall-controls{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));display:grid}.firewall-input-group{gap:var(--space-2);flex-direction:column;display:flex}.firewall-input-group label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary)}.firewall-actions{gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.firewall-error{margin-bottom:var(--space-5);padding:var(--space-3) var(--space-4);color:var(--color-error);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-sm);background:#ef444414;border:1px solid #ef444459}.firewall-rules-section{margin-top:var(--space-6)}.firewall-rules-section__title{color:var(--color-accent-400);font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--space-4);align-items:center;gap:var(--space-2);display:flex}.firewall-rules{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);background:#050908a8;max-height:300px;overflow-y:auto}.firewall-rules::-webkit-scrollbar{width:8px}.firewall-rules::-webkit-scrollbar-track{background:var(--color-surface-800);border-radius:var(--radius-full)}.firewall-rules::-webkit-scrollbar-thumb{background:var(--color-surface-600);border-radius:var(--radius-full)}.firewall-rules::-webkit-scrollbar-thumb:hover{background:var(--color-surface-500)}.firewall-rules__empty{text-align:center;color:var(--text-muted);padding:var(--space-8);align-items:center;gap:var(--space-2);flex-direction:column;display:flex}.firewall-rules__empty .icon{opacity:.5;width:2rem;height:2rem}.firewall-rule{padding:var(--space-3) var(--space-4);background:var(--color-panel-raised);border-left:3px solid var(--color-success);border-radius:var(--radius-md);margin-bottom:var(--space-2);transition:transform var(--transition-fast), box-shadow var(--transition-fast);justify-content:space-between;align-items:center;display:flex}.firewall-rule:last-child{margin-bottom:0}.firewall-rule:hover{box-shadow:var(--shadow-md);transform:translate(4px)}.firewall-rule--blocked{border-left-color:var(--color-error)}.firewall-rule__content{align-items:center;gap:var(--space-3);min-width:0;display:flex}.firewall-rule__number{background:var(--color-panel-strong);border-radius:var(--radius-full);width:24px;height:24px;font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--text-muted);justify-content:center;align-items:center;display:flex}.firewall-rule__text{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);overflow-wrap:anywhere}.firewall-rule__action{font-weight:var(--font-bold);margin-right:var(--space-2)}.firewall-rule--blocked .firewall-rule__action{color:var(--color-error)}.firewall-rule:not(.firewall-rule--blocked) .firewall-rule__action{color:var(--color-success)}.firewall-test-result{margin-top:var(--space-6);padding:var(--space-5);border:2px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:#050908a8;display:none}.firewall-test-result.visible{animation:.3s ease-out fadeIn;display:block}.firewall-test-result--allowed{border-color:var(--color-success)}.firewall-test-result--blocked{border-color:var(--color-error)}.firewall-test-result--warning{border-color:var(--color-warning)}.firewall-test-result__title{align-items:center;gap:var(--space-2);font-weight:var(--font-semibold);font-size:var(--text-base);margin-bottom:var(--space-2);display:flex}.firewall-test-result--allowed .firewall-test-result__title{color:var(--color-success)}.firewall-test-result--blocked .firewall-test-result__title{color:var(--color-error)}.firewall-test-result--warning .firewall-test-result__title{color:var(--color-warning)}.firewall-test-result__text{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary)}.firewall-trace{margin-top:var(--space-4);gap:var(--space-3);list-style:none;display:grid}.firewall-trace__rule{padding:var(--space-3);background:var(--color-panel-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md)}.firewall-trace__rule--matched{border-color:var(--color-accent-400)}.firewall-trace__title{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-2);overflow-wrap:anywhere}.firewall-trace__checks{gap:var(--space-1);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary);list-style:none;display:grid}.firewall-trace__check--pass:before{content:"PASS ";color:var(--color-success);font-weight:var(--font-bold)}.firewall-trace__check--fail:before{content:"MISS ";color:var(--color-error);font-weight:var(--font-bold)}@media (width<=768px){.firewall-controls{grid-template-columns:1fr}.firewall-actions{flex-direction:column}.firewall-actions .btn{width:100%}.firewall-rule{align-items:flex-start;gap:var(--space-2);flex-direction:column}.firewall-rule__text{font-size:var(--text-xs)}}.cidr-calculator{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);margin-top:var(--space-4);background:linear-gradient(#101c1aeb,#07100feb)}.cidr-input-area{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:1fr auto;display:grid}.cidr-input{font-family:var(--font-mono);font-size:var(--text-lg)}.cidr-results{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:none}.cidr-results.visible{animation:.3s ease-out fadeIn;display:grid}.cidr-lab-grid{gap:var(--space-4);margin-top:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));display:grid}.cidr-lab-panel{background:var(--color-panel-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-4)}.cidr-lab-panel__title{color:var(--color-accent-400);font-size:var(--text-base);margin-bottom:var(--space-3)}.cidr-tool-row{gap:var(--space-3);grid-template-columns:1fr auto;display:grid}.cidr-notice{margin-top:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-sm);overflow-wrap:anywhere}.cidr-notice--success{color:var(--color-success);background:#10b98114;border:1px solid #10b9814d}.cidr-notice--warning{color:var(--color-warning);background:#f59e0b14;border:1px solid #f59e0b4d}.cidr-notice--error{color:var(--color-error);background:#ef444414;border:1px solid #ef444459}.cidr-result-item{background:var(--color-panel-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);transition:all var(--transition-base)}.cidr-result-item:hover{border-color:var(--color-primary-400);box-shadow:var(--shadow-md)}.cidr-result-item__label{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-accent-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2)}.cidr-result-item__value{font-family:var(--font-mono);font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary);word-break:break-all}.cidr-result-item__value--small{font-size:var(--text-sm)}.cidr-info{margin-top:var(--space-6)}.cidr-info__section{margin-top:var(--space-5)}.cidr-info__title{color:var(--color-accent-400);font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--space-3)}.cidr-info__list{padding-left:var(--space-5)}.cidr-info__list li{color:var(--text-secondary);line-height:2;font-size:var(--text-sm);list-style:outside}.cidr-info__list strong{color:var(--text-primary);font-family:var(--font-mono)}.cidr-quick-ref{margin-top:var(--space-6);overflow-x:auto}.cidr-quick-ref__title{color:var(--text-primary);font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--space-4)}.cidr-quick-ref table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}.cidr-quick-ref th,.cidr-quick-ref td{padding:var(--space-3);text-align:left;border-bottom:1px solid var(--color-border-subtle)}.cidr-quick-ref th{background:var(--color-panel-raised);color:var(--text-primary);font-weight:var(--font-semibold);font-size:var(--text-xs);text-transform:uppercase}.cidr-quick-ref td{color:var(--text-secondary);font-family:var(--font-mono)}.cidr-quick-ref tbody tr:hover{background:#22d3ee0f}@media (width<=768px){.cidr-calculator{padding:var(--space-4)}.cidr-input-area,.cidr-tool-row,.cidr-results{grid-template-columns:1fr}}.stats-scenario-bar{align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);grid-template-columns:auto minmax(240px,420px) auto;display:grid}.stats-scenario-bar label{color:var(--text-primary);font-weight:var(--font-medium)}.stats-incident{justify-content:space-between;align-items:flex-start;gap:var(--space-4);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-5);background:linear-gradient(#101c1aeb,#07100feb);display:flex}.stats-severity{width:fit-content;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);color:var(--color-success);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);margin-bottom:var(--space-3);background:#10b98124;display:inline-flex}.stats-incident__title{color:var(--text-primary);font-size:var(--text-xl);margin-bottom:var(--space-2)}.stats-incident__cause{max-width:760px}.stats-incident__sample{color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--text-sm);white-space:nowrap}.stats-grid{gap:var(--space-4);margin-top:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(190px,1fr));display:grid}.stat-card{background:linear-gradient(180deg, var(--color-panel-raised), #07100ff5);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);transition:border-color var(--transition-base), box-shadow var(--transition-base)}.stat-card:hover{border-color:var(--color-primary-400);box-shadow:var(--shadow-md)}.stat-card__icon{width:1.75rem;height:1.75rem;color:var(--color-primary-400);margin-bottom:var(--space-3)}.stat-card__value{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary);margin-bottom:var(--space-1);font-family:var(--font-mono)}.stat-card__label{font-size:var(--text-sm);color:var(--text-secondary)}.progress-bar{background:var(--color-panel-strong);border-radius:var(--radius-full);width:100%;height:8px;margin-top:var(--space-3);overflow:hidden}.progress-bar__fill{background:linear-gradient(90deg, var(--color-primary-600), var(--color-accent-400));border-radius:var(--radius-full);height:100%;transition:width .5s}.progress-bar__fill--danger{background:linear-gradient(90deg, var(--color-warning), var(--color-error))}.stats-controls{justify-content:center;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap;display:flex}.stats-diagnostics{gap:var(--space-4);margin-top:var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.stats-panel{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);background:#050908a8}.stats-panel__title{color:var(--color-accent-400);font-size:var(--text-base);margin-bottom:var(--space-3)}.stats-list{gap:var(--space-2);display:grid}.stats-list li{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.5;list-style:none}.stats-check{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--color-panel-raised);font-family:var(--font-mono)}.stats-check--ok{color:var(--color-success)}.stats-check--warn{color:var(--color-warning)}.stats-check--critical{color:var(--color-error)}.stats-counters{gap:var(--space-2);display:grid}.stats-counter{justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border-subtle);color:var(--text-secondary);font-size:var(--text-sm);display:flex}.stats-counter:last-child{border-bottom:0}.stats-counter strong{font-family:var(--font-mono)}.stats-command{white-space:pre-wrap;overflow-wrap:anywhere}@media (width<=768px){.stats-scenario-bar,.stats-diagnostics{grid-template-columns:1fr}.stats-incident,.stats-controls{flex-direction:column}.stats-controls .btn{width:100%}}