:root{--color-primary-50:#eef2ff;--color-primary-100:#e0e7ff;--color-primary-200:#c7d2fe;--color-primary-300:#a5b4fc;--color-primary-400:#818cf8;--color-primary-500:#6366f1;--color-primary-600:#4f46e5;--color-primary-700:#4338ca;--color-accent-400:#fb923c;--color-accent-500:#f97316;--color-accent-600:#ea580c;--color-success:#10b981;--color-error:#ef4444;--color-warning:#f59e0b;--color-surface-50:#f8fafc;--color-surface-100:#f1f5f9;--color-surface-200:#e2e8f0;--color-surface-300:#cbd5e1;--color-surface-400:#94a3b8;--color-surface-500:#64748b;--color-surface-600:#475569;--color-surface-700:#334155;--color-surface-800:#1e293b;--color-surface-900:#0f172a;--color-surface-950:#020617;--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:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--shadow-glow:0 0 20px -5px var(--color-primary-500);--shadow-glow-accent:0 0 20px -5px 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(135deg, var(--color-surface-950) 0%, var(--color-surface-900) 100%);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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{background:var(--color-surface-900);padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-surface-700);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:1400px;padding:var(--space-6);margin:0 auto}.section{animation:.3s 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-primary-600);color:#fff;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-primary-400);outline-offset:2px}@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}.header{background:linear-gradient(180deg, var(--color-surface-900) 0%, var(--color-surface-950) 100%);padding:var(--space-8) var(--space-6);text-align:center;border-bottom:1px solid var(--color-surface-700);position:relative}.header__title{font-size:var(--text-3xl);font-weight:var(--font-bold);background:linear-gradient(135deg, var(--color-primary-400), var(--color-primary-300));-webkit-text-fill-color:transparent;margin-bottom:var(--space-2);-webkit-background-clip:text;background-clip:text}.header__tagline{font-size:var(--text-base);color:var(--text-secondary);font-weight:var(--font-normal)}.nav{justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-6);background:var(--color-surface-900);border-bottom:1px solid var(--color-surface-700);z-index:var(--z-sticky);flex-wrap:wrap;display:flex;position:sticky;top:0}.nav__btn{padding:var(--space-2) var(--space-4);color:var(--text-secondary);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-medium);transition:all var(--transition-base);white-space:nowrap;background:0 0;border:1px solid #0000}.nav__btn:hover{color:var(--text-primary);background:var(--color-surface-800)}.nav__btn:focus-visible{outline:2px solid var(--color-primary-400);outline-offset:2px}.nav__btn.active{background:var(--color-primary-600);color:#fff;border-color:var(--color-primary-500)}.nav__btn.active:hover{background:var(--color-primary-500)}.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-6) var(--space-4)}.header__title{font-size:var(--text-2xl)}.header__tagline{font-size:var(--text-sm)}.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{background:var(--color-surface-800);border:1px solid var(--color-surface-700);border-radius:var(--radius-xl);padding:var(--space-6);margin-bottom:var(--space-6);box-shadow:var(--shadow-lg)}.card__header{margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-surface-700)}.card__title{align-items:center;gap:var(--space-3);font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-2);display:flex}.card__title .icon{color:var(--color-primary-400)}.card__description{color:var(--text-secondary);font-size:var(--text-base);line-height:var(--leading-relaxed)}.visualization-box{background:var(--color-surface-900);border:1px solid var(--color-surface-600);border-radius:var(--radius-lg);padding:var(--space-6);justify-content:center;align-items:center;min-height:300px;display:flex;position:relative;overflow:hidden}.info-box{background:var(--color-surface-900);border-left:4px solid var(--color-primary-500);border-radius:var(--radius-md);padding:var(--space-5);margin-top:var(--space-6)}.info-box__title{align-items:center;gap:var(--space-2);color:var(--color-primary-400);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:1px solid var(--color-error);border-radius:var(--radius-md);padding:var(--space-5);margin-top:var(--space-6);background:#ef44441a;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:1px solid var(--color-success);border-radius:var(--radius-md);padding:var(--space-5);margin-top:var(--space-6);background:#10b9811a;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__icon{font-size:var(--text-2xl);margin-bottom:var(--space-2);color:var(--color-primary-400)}.stat-card__label{font-size:var(--text-sm);color:var(--text-secondary)}.footer{text-align:center;padding:var(--space-8) var(--space-6);margin-top:var(--space-12);border-top:1px solid var(--color-surface-700);color:var(--text-muted);font-size:var(--text-sm)}.footer p+p{margin-top:var(--space-2)}@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-lg);transition:all var(--transition-base);white-space:nowrap;cursor:pointer;border:none;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-600), var(--color-primary-500));color:#fff;box-shadow:var(--shadow-md)}.btn--primary:hover:not(:disabled){background:linear-gradient(135deg, var(--color-primary-500), var(--color-primary-400));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-600), var(--color-accent-500));color:#fff;box-shadow:var(--shadow-md)}.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-400);border:1px solid var(--color-primary-500);background:0 0}.btn--secondary:hover:not(:disabled){background:var(--color-primary-500);color:#fff}.btn--ghost{color:var(--text-secondary);background:0 0}.btn--ghost:hover:not(:disabled){background:var(--color-surface-700);color:var(--text-primary)}.btn--danger{background:var(--color-error);color:#fff}.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:#059669}.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);background:var(--color-surface-900);border:1px solid var(--color-surface-600);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-base);font-family:var(--font-mono);transition:all var(--transition-base);width:100%}.input::placeholder{color:var(--text-muted)}.input:hover{border-color:var(--color-surface-500)}.input:focus{border-color:var(--color-primary-500);outline:none;box-shadow:0 0 0 3px #6366f133}.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);background:var(--color-surface-900);border:1px solid var(--color-surface-600);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-base);cursor:pointer;transition:all var(--transition-base);appearance:none;background-image: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");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-right:var(--space-10);background-size:1rem}.select:hover{border-color:var(--color-surface-500)}.select:focus{border-color:var(--color-primary-500);outline:none;box-shadow:0 0 0 3px #6366f133}.select option{background:var(--color-surface-800);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{background:var(--color-surface-900);border:1px solid var(--color-surface-700);border-radius:var(--radius-md);padding:var(--space-4)}.result-item__label{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-primary-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-surface-700);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-surface-700)}.table th{background:var(--color-surface-800);color:var(--text-primary);font-weight:var(--font-semibold);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.table td{color:var(--text-secondary);vertical-align:middle}.table tbody tr{transition:background var(--transition-fast)}.table tbody tr:hover{background:var(--color-surface-800)}.table tbody tr:last-child td{border-bottom:none}.table__protocol{font-weight:var(--font-semibold);color:var(--color-primary-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{background:var(--color-surface-900);border:1px solid var(--color-surface-700);border-radius:var(--radius-lg);padding:var(--space-4);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-surface-800);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);background:var(--color-surface-900);border:2px solid var(--color-surface-600);border-radius:var(--radius-lg)}.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 #ef444466}50%{box-shadow:0 0 40px #ef444499,0 0 60px #ef44444d}}@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, transparent, var(--color-surface-600), var(--color-surface-600), transparent);height:2px;position:absolute;top:50%;left:15%;right:15%;transform:translateY(-50%)}.tcp-node{border-radius:var(--radius-2xl);width:120px;height:120px;font-weight:var(--font-semibold);transition:transform var(--transition-base), box-shadow var(--transition-base);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,#ef4444,#dc2626);left:5%;box-shadow:0 0 30px #ef44444d}.tcp-node--client:hover{box-shadow:0 0 40px #ef444480}.tcp-node--server{background:linear-gradient(135deg, var(--color-success), #059669);color:#fff;right:5%;box-shadow:0 0 30px #10b9814d}.tcp-node--server:hover{box-shadow:0 0 40px #10b98180}.tcp-packet{background:var(--color-primary-500);color:#fff;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);box-shadow:0 0 20px var(--color-primary-400);white-space:nowrap;z-index:var(--z-dropdown);opacity:0;transition:opacity .1s;position:absolute}.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-8);margin-top:var(--space-6);display:flex}.tcp-step{align-items:center;gap:var(--space-2);color:var(--text-muted);font-size:var(--text-sm);transition:color var(--transition-base);display:flex}.tcp-step.active{color:var(--color-primary-400)}.tcp-step.completed{color:var(--color-success)}.tcp-step__number{background:var(--color-surface-700);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-primary-500);color:#fff}.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%)}@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}}.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(135deg, var(--color-primary-600), var(--color-primary-700));padding:var(--space-4);border-radius:var(--radius-xl);text-align:center;min-width:130px;transition:all var(--transition-base);position:relative;box-shadow:0 0 20px #6366f133}.dns-node:hover{transform:scale(1.05)}.dns-node.active{transform:scale(1.1);box-shadow:0 0 40px #6366f180}.dns-node__icon{width:2rem;height:2rem;margin:0 auto var(--space-2);color:#fff}.dns-node__title{font-weight:var(--font-bold);font-size:var(--text-sm);color:#fff;margin-bottom:var(--space-1)}.dns-node__subtitle{font-size:var(--text-xs);color:#ffffffb3}.dns-arrow{color:var(--color-surface-500);font-size:var(--text-xl);transition:all var(--transition-base)}.dns-arrow.animating{color:var(--color-primary-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);background:var(--color-surface-900);border:1px solid var(--color-success);border-radius:var(--radius-lg);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-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}}.comparison{gap:var(--space-6);margin-top:var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}.protocol-box{background:var(--color-surface-900);border-radius:var(--radius-xl);padding:var(--space-6);transition:all var(--transition-base);border:2px solid}.protocol-box:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)}.protocol-box--http{border-color:var(--color-error)}.protocol-box--https{border-color:var(--color-success)}.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:#10b98126}.protocol-badge--insecure{border:1px solid var(--color-error);color:var(--color-error);background:#ef444426}.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-primary-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){.comparison{grid-template-columns:1fr}.protocol-box{padding:var(--space-4)}}.packet-layers{margin-top:var(--space-4)}.layer{background:var(--color-surface-900);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-3);cursor:pointer;transition:all var(--transition-base);border-left:4px solid;position:relative;overflow:hidden}.layer:before{content:"";width:0;height:100%;transition:width var(--transition-base);background:linear-gradient(90deg,#6366f11a,#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-surface-800)}.layer:first-child{border-color:#ef4444}.layer:nth-child(2){border-color:#f97316}.layer:nth-child(3){border-color:#eab308}.layer:nth-child(4){border-color:#22c55e}.layer:nth-child(5){border-color:#6366f1}.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:#ef4444}.layer:nth-child(2) .layer__title .icon{color:#f97316}.layer:nth-child(3) .layer__title .icon{color:#eab308}.layer:nth-child(4) .layer__title .icon{color:#22c55e}.layer:nth-child(5) .layer__title .icon{color:#6366f1}.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-surface-700)}.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-primary-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}}.mitm-container{gap:var(--space-6);margin-top:var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}.mitm-scenario{background:var(--color-surface-900);border-radius:var(--radius-xl);padding:var(--space-6);border:2px solid;min-height:450px;position:relative}.mitm-scenario--vulnerable{border-color:var(--color-error)}.mitm-scenario--secure{border-color:var(--color-success)}.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);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-600), var(--color-primary-700));color:#fff;box-shadow:0 0 20px #6366f166}.mitm-node--attacker{color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626);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), #059669);color:#fff;box-shadow:0 0 20px #10b98166}.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:var(--color-primary-500);color:#fff;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{background:var(--color-surface-950);border:2px 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);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-surface-700);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-surface-700)}.protocol-table th{background:var(--color-surface-800);color:var(--text-primary);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:var(--color-surface-800)}.protocol-table tbody tr:last-child td{border-bottom:none}.protocol-table__name{font-weight:var(--font-semibold);color:var(--color-primary-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{background:var(--color-surface-900);border-radius:var(--radius-lg);padding:var(--space-5)}.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(4,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-6);flex-wrap:wrap;display:flex}.firewall-rules-section{margin-top:var(--space-6)}.firewall-rules-section__title{color:var(--color-primary-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{background:var(--color-surface-900);border:1px solid var(--color-surface-700);border-radius:var(--radius-lg);padding:var(--space-4);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-surface-800);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);display:flex}.firewall-rule__number{background:var(--color-surface-700);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)}.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);background:var(--color-surface-900);border:2px solid var(--color-surface-600);border-radius:var(--radius-lg);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)}@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{background:var(--color-surface-900);border:1px solid var(--color-surface-700);border-radius:var(--radius-xl);padding:var(--space-6);margin-top:var(--space-4)}.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-result-item{background:var(--color-surface-800);border:1px solid var(--color-surface-700);border-radius:var(--radius-lg);padding:var(--space-4);transition:all var(--transition-base)}.cidr-result-item:hover{border-color:var(--color-primary-500);box-shadow:var(--shadow-md)}.cidr-result-item__label{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-primary-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-primary-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-surface-700)}.cidr-quick-ref th{background:var(--color-surface-800);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:var(--color-surface-800)}@media (width<=768px){.cidr-calculator{padding:var(--space-4)}.cidr-input-area,.cidr-results{grid-template-columns:1fr}}.stats-grid{gap:var(--space-5);margin-top:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.stat-card{background:linear-gradient(135deg, var(--color-surface-800), var(--color-surface-900));border:1px solid var(--color-surface-700);border-radius:var(--radius-xl);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(-4px)}.stat-card__icon{width:2.5rem;height:2.5rem;margin:0 auto var(--space-3);color:var(--color-primary-400)}.stat-card__value{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--color-primary-400);margin:var(--space-2) 0;font-family:var(--font-mono)}.stat-card__label{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-3)}.progress-bar{background:var(--color-surface-700);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-primary-400));border-radius:var(--radius-full);height:100%;transition:width .5s}.progress-bar__fill--danger{background:linear-gradient(90deg, var(--color-error), #f87171)}.stats-controls{justify-content:center;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap;display:flex}.stats-info{gap:var(--space-4);margin-top:var(--space-6);grid-template-columns:repeat(2,1fr);display:grid}.stats-info-item{background:var(--color-surface-900);border-radius:var(--radius-lg);padding:var(--space-4)}.stats-info-item__title{color:var(--color-success);font-weight:var(--font-semibold);font-size:var(--text-sm);margin-bottom:var(--space-2)}.stats-info-item__text{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6}.status-indicator{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);display:inline-flex}.status-indicator--active{color:var(--color-success);background:#10b98126}.status-indicator--inactive{color:var(--text-muted);background:#64748b26}.status-indicator__dot{background:currentColor;border-radius:50%;width:8px;height:8px}.status-indicator--active .status-indicator__dot{animation:2s ease-in-out infinite pulse}@media (width<=768px){.stats-grid{gap:var(--space-3);grid-template-columns:repeat(2,1fr)}.stat-card{padding:var(--space-4)}.stat-card__value{font-size:var(--text-2xl)}.stat-card__icon{width:2rem;height:2rem}.stats-info{grid-template-columns:1fr}.stats-controls{flex-direction:column}.stats-controls .btn{width:100%}}@media (width<=480px){.stats-grid{grid-template-columns:1fr}}