: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 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--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{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}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%);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}a{color:var(--color-primary-400);text-decoration:none;transition:color var(--transition-fast)}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);overflow-x:auto;border:1px solid var(--color-surface-700)}pre code{background:none;padding:0}strong{font-weight:var(--font-semibold);color:var(--text-primary)}.container{width:100%;max-width:1400px;margin:0 auto;padding:var(--space-6)}.section{display:none;animation:fadeIn .3s ease-out}.section.active{display:block}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;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)}.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{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!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{width:1.25em;height:1.25em;vertical-align:-.125em;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}.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-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-2)}.header__tagline{font-size:var(--text-base);color:var(--text-secondary);font-weight:var(--font-normal)}.nav{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-4) var(--space-6);background:var(--color-surface-900);border-bottom:1px solid var(--color-surface-700);position:sticky;top:0;z-index:var(--z-sticky)}.nav__btn{padding:var(--space-2) var(--space-4);background:transparent;border:1px solid transparent;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}.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{display:none;padding:var(--space-2);background:var(--color-surface-800);border-radius:var(--radius-md);color:var(--text-primary)}@media (max-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{flex-direction:column;gap:var(--space-1);padding:var(--space-3)}.nav__btn{width:100%;text-align:center;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{display:flex;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)}.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);min-height:300px;display:flex;align-items:center;justify-content:center;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{display:flex;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)}.info-box ul,.info-box ol{padding-left:var(--space-5);color:var(--text-secondary)}.info-box li{line-height:2;list-style:disc}.info-box ol li{list-style:decimal}.warning-box{background:#ef44441a;border:1px solid var(--color-error);border-left-width:4px;border-radius:var(--radius-md);padding:var(--space-5);margin-top:var(--space-6)}.warning-box__title{display:flex;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)}.warning-box ul{padding-left:var(--space-5);color:var(--text-secondary)}.warning-box li{line-height:2;list-style:disc}.success-box{background:#10b9811a;border:1px solid var(--color-success);border-left-width:4px;border-radius:var(--radius-md);padding:var(--space-5);margin-top:var(--space-6)}.success-box__title{display:flex;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)}.success-box ul{padding-left:var(--space-5);color:var(--text-secondary)}.success-box li{line-height:2;list-style:disc}.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-lg);padding:var(--space-5);text-align:center;transition:transform var(--transition-base),box-shadow var(--transition-base)}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}.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 (max-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{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-size:var(--text-sm);font-weight:var(--font-medium);line-height:1;border-radius:var(--radius-lg);transition:all var(--transition-base);white-space:nowrap;cursor:pointer;border:none}.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{background:transparent;color:var(--color-primary-400);border:1px solid var(--color-primary-500)}.btn--secondary:hover:not(:disabled){background:var(--color-primary-500);color:#fff}.btn--ghost{background:transparent;color:var(--text-secondary)}.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){background:#dc2626;box-shadow:var(--shadow-lg)}.btn--success{background:var(--color-success);color:#fff}.btn--success:hover:not(:disabled){background:#059669;box-shadow:var(--shadow-lg)}.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{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}.delete-btn{padding:var(--space-2) var(--space-3);background:var(--color-error);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base)}.delete-btn:hover{background:#dc2626;transform:scale(1.02)}@media (max-width: 768px){.btn{padding:var(--space-3) var(--space-4)}.btn-group{flex-direction:column}.btn-group .btn{width:100%}}.input-group{display:flex;flex-direction:column;gap:var(--space-2)}.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{outline:none;border-color:var(--color-primary-500);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{display:flex;gap:var(--space-3)}.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);-webkit-appearance:none;-moz-appearance:none;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;background-size:1rem;padding-right:var(--space-10)}.select:hover{border-color:var(--color-surface-500)}.select:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px #6366f133}.select option{background:var(--color-surface-800);color:var(--text-primary)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.form-grid--4{grid-template-columns:repeat(4,1fr)}.cidr-input-group{display:grid;grid-template-columns:1fr auto;gap:var(--space-4);margin-bottom:var(--space-6)}.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);margin-top:var(--space-6)}.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 (max-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{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--color-surface-700)}.table{width:100%;border-collapse:collapse;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{display:inline-flex;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)}.table__badge--success{background:#10b98126;color:var(--color-success)}.table__badge--warning{background:#f59e0b26;color:var(--color-warning)}.table__badge--error{background:#ef444426;color:var(--color-error)}.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{display:flex;justify-content:space-between;align-items:center;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)}.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 (max-width: 768px){.table th,.table td{padding:var(--space-3);font-size:var(--text-xs)}.rule-item{flex-direction:column;align-items:flex-start;gap:var(--space-2)}.rule-item__text{font-size:var(--text-xs)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@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:fadeIn .3s ease-out}.animate-slide-in-left{animation:slideInLeft .3s ease-out}.animate-slide-in-right{animation:slideInRight .3s ease-out}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-glow{animation:glow 2s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.packet-trail{position:absolute;width:4px;height:4px;background:var(--color-primary-400);border-radius:50%;pointer-events:none;animation:trailFade .5s ease-out forwards}.progress-bar__fill{animation:progressFill .5s ease-out}.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{transform:translateY(-2px);box-shadow:var(--shadow-lg)}@media (prefers-reduced-motion: reduce){.animate-pulse,.animate-glow,.animate-spin{animation:none}.packet-trail{animation:none;opacity:0}}.tcp-animation{width:100%;height:400px;position:relative}.tcp-animation__line{position:absolute;top:50%;left:15%;right:15%;height:2px;background:linear-gradient(90deg,transparent,var(--color-surface-600),var(--color-surface-600),transparent);transform:translateY(-50%)}.tcp-node{width:120px;height:120px;border-radius:var(--radius-2xl);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:var(--font-semibold);position:absolute;top:50%;transform:translateY(-50%);transition:transform var(--transition-base),box-shadow var(--transition-base)}.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{left:5%;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 0 30px #ef44444d}.tcp-node--client:hover{box-shadow:0 0 40px #ef444480}.tcp-node--server{right:5%;background:linear-gradient(135deg,var(--color-success),#059669);color:#fff;box-shadow:0 0 30px #10b9814d}.tcp-node--server:hover{box-shadow:0 0 40px #10b98180}.tcp-packet{position:absolute;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 ease}.tcp-packet:before{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;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)}.tcp-steps{display:flex;justify-content:center;gap:var(--space-8);margin-top:var(--space-6)}.tcp-step{display:flex;align-items:center;gap:var(--space-2);color:var(--text-muted);font-size:var(--text-sm);transition:color var(--transition-base)}.tcp-step.active{color:var(--color-primary-400)}.tcp-step.completed{color:var(--color-success)}.tcp-step__number{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-surface-700);font-weight:var(--font-semibold);font-size:var(--text-xs)}.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{position:absolute;bottom:var(--space-4);left:50%;transform:translate(-50%);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);display:flex;align-items:center;gap:var(--space-2);animation:fadeIn .3s ease-out}@media (max-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{flex-direction:column;gap:var(--space-2)}}.dns-flow{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-6);position:relative;width:100%}.dns-node{background:linear-gradient(135deg,var(--color-primary-600),var(--color-primary-700));padding:var(--space-4);border-radius:var(--radius-xl);min-width:130px;text-align:center;box-shadow:0 0 20px #6366f133;transition:all var(--transition-base);position:relative}.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);display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.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{display:block;animation:fadeIn .3s ease-out}.dns-result__title{color:var(--color-success);font-weight:var(--font-semibold);margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}.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{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3);margin-top:var(--space-4)}.dns-record{display:flex;align-items:flex-start;gap:var(--space-2)}.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 (max-width: 768px){.dns-flow{flex-direction:column;gap:var(--space-2);padding:var(--space-4)}.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{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-4)}.protocol-box{background:var(--color-surface-900);border:2px solid;border-radius:var(--radius-xl);padding:var(--space-6);transition:all var(--transition-base)}.protocol-box:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.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{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-4)}.protocol-badge{display:inline-flex;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)}.protocol-badge--secure{background:#10b98126;border:1px solid var(--color-success);color:var(--color-success)}.protocol-badge--insecure{background:#ef444426;border:1px solid var(--color-error);color:var(--color-error)}.protocol-features{list-style:none}.protocol-features li{display:flex;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}.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{list-style:disc;color:var(--text-secondary);line-height:1.8;font-size:var(--text-sm)}.security-section code{font-size:var(--text-xs);word-break:break-all}@media (max-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-left:4px solid;border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-3);cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.layer:before{content:"";position:absolute;left:0;top:0;width:0;height:100%;background:linear-gradient(90deg,rgba(99,102,241,.1),transparent);transition:width var(--transition-base)}.layer:hover:before{width:100%}.layer:hover{transform:translate(4px);box-shadow:var(--shadow-md)}.layer.expanded{background:var(--color-surface-800)}.layer:nth-child(1){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{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.layer__title{display:flex;align-items:center;gap:var(--space-3);font-weight:var(--font-semibold);font-size:var(--text-base);color:var(--text-primary)}.layer__title .icon{width:1.25rem;height:1.25rem}.layer:nth-child(1) .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;overflow:hidden;transition:max-height var(--transition-slow),margin-top var(--transition-slow);color:var(--text-secondary);font-size:var(--text-sm);line-height:1.7}.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{list-style:disc;margin-bottom:var(--space-1)}.layer pre{margin-top:var(--space-3);font-size:var(--text-xs)}@media (max-width: 768px){.layer{padding:var(--space-3)}.layer__title{font-size:var(--text-sm)}.layer.expanded .layer__content{max-height:800px}}.mitm-container{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-4)}.mitm-scenario{background:var(--color-surface-900);border:2px solid;border-radius:var(--radius-xl);padding:var(--space-6);position:relative;min-height:450px}.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);display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.mitm-scenario--vulnerable .mitm-scenario__title{color:var(--color-error)}.mitm-scenario--secure .mitm-scenario__title{color:var(--color-success)}.mitm-diagram{position:relative;height:350px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.mitm-node{width:90px;height:90px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:var(--font-bold);font-size:var(--text-xs);text-align:center;z-index:var(--z-base);position:relative;transition:all var(--transition-base)}.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{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation:dangerPulse 2s ease-in-out infinite}.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{position:absolute;width:3px;background:linear-gradient(180deg,transparent,var(--color-surface-600),transparent);left:50%;transform:translate(-50%)}.mitm-connection--top{top:90px;height:80px}.mitm-connection--bottom{top:180px;height:80px}.mitm-packet{position:absolute;left:50%;transform:translate(-50%);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);max-width:150px;text-align:center;transition:opacity .1s ease}.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{position:absolute;bottom:-50px;left:50%;transform:translate(-50%);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);display:flex;align-items:center;gap:var(--space-2)}.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{display:flex;justify-content:center;gap:var(--space-3);margin-top:var(--space-6)}@media (max-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{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--color-surface-700);margin-top:var(--space-4)}.protocol-table{width:100%;border-collapse:collapse;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{display:inline-flex;align-items:center;gap:var(--space-1)}.indicator--fast{color:var(--color-success)}.indicator--moderate{color:var(--color-warning)}.indicator--slow{color:var(--color-error)}.security-status{display:inline-flex;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)}.security-status--secure{background:#10b98126;color:var(--color-success)}.security-status--partial{background:#f59e0b26;color:var(--color-warning)}.security-status--insecure{background:#ef444426;color:var(--color-error)}.comparison-info{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin-top:var(--space-6)}.comparison-info-box{background:var(--color-surface-900);border-radius:var(--radius-lg);padding:var(--space-5)}.comparison-info-box__title{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--font-semibold);font-size:var(--text-base);margin-bottom:var(--space-3)}.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);line-height:1.6;margin-bottom:var(--space-3)}.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{list-style:disc;font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-1)}@media (max-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{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-bottom:var(--space-6)}.firewall-input-group{display:flex;flex-direction:column;gap:var(--space-2)}.firewall-input-group label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary)}.firewall-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-6)}.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);display:flex;align-items:center;gap:var(--space-2)}.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);display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.firewall-rules__empty .icon{width:2rem;height:2rem;opacity:.5}.firewall-rule{display:flex;justify-content:space-between;align-items:center;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)}.firewall-rule:last-child{margin-bottom:0}.firewall-rule:hover{transform:translate(4px);box-shadow:var(--shadow-md)}.firewall-rule--blocked{border-left-color:var(--color-error)}.firewall-rule__content{display:flex;align-items:center;gap:var(--space-3)}.firewall-rule__number{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-surface-700);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--text-muted)}.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{display:block;animation:fadeIn .3s ease-out}.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{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--font-semibold);font-size:var(--text-base);margin-bottom:var(--space-2)}.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 (max-width: 768px){.firewall-controls{grid-template-columns:1fr}.firewall-actions{flex-direction:column}.firewall-actions .btn{width:100%}.firewall-rule{flex-direction:column;align-items:flex-start;gap:var(--space-2)}.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{display:grid;grid-template-columns:1fr auto;gap:var(--space-4);margin-bottom:var(--space-6)}.cidr-input{font-family:var(--font-mono);font-size:var(--text-lg)}.cidr-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);display:none}.cidr-results.visible{display:grid;animation:fadeIn .3s ease-out}.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{list-style:disc;color:var(--text-secondary);line-height:2;font-size:var(--text-sm)}.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{width:100%;border-collapse:collapse;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 (max-width: 768px){.cidr-calculator{padding:var(--space-4)}.cidr-input-area,.cidr-results{grid-template-columns:1fr}}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-5);margin-top:var(--space-4)}.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{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.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{width:100%;height:8px;background:var(--color-surface-700);border-radius:var(--radius-full);overflow:hidden;margin-top:var(--space-3)}.progress-bar__fill{height:100%;background:linear-gradient(90deg,var(--color-primary-600),var(--color-primary-400));border-radius:var(--radius-full);transition:width .5s ease}.progress-bar__fill--danger{background:linear-gradient(90deg,var(--color-error),#f87171)}.stats-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}.stats-info{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin-top:var(--space-6)}.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{display:inline-flex;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)}.status-indicator--active{background:#10b98126;color:var(--color-success)}.status-indicator--inactive{background:#64748b26;color:var(--text-muted)}.status-indicator__dot{width:8px;height:8px;border-radius:50%;background:currentColor}.status-indicator--active .status-indicator__dot{animation:pulse 2s ease-in-out infinite}@media (max-width: 768px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.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 (max-width: 480px){.stats-grid{grid-template-columns:1fr}}