:root{--bg-primary:#0a0a0a;--bg-secondary:#111;--bg-tertiary:#1a1a1a;--bg-surface:#1e1e1e;--bg-elevated:#252525;--bg-hover:#2a2a2a;--bg-active:#333;--text-primary:#e5e5e5;--text-secondary:#a0a0a0;--text-tertiary:#666;--text-muted:#4a4a4a;--border-primary:#2a2a2a;--border-secondary:#333;--border-focus:#3b82f6;--color-blue:#3b82f6;--color-blue-hover:#2563eb;--color-green:#22c55e;--color-green-dim:#166534;--color-red:#ef4444;--color-red-dim:#7f1d1d;--color-yellow:#eab308;--color-yellow-dim:#713f12;--color-orange:#f97316;--color-purple:#a855f7;--color-cyan:#06b6d4;--status-pass:#22c55e;--status-pass-bg:rgba(34,197,94,.1);--status-fail:#ef4444;--status-fail-bg:rgba(239,68,68,.1);--status-warn:#eab308;--status-warn-bg:rgba(234,179,8,.1);--status-info:#3b82f6;--status-info-bg:rgba(59,130,246,.1);--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;--font-mono:"SF Mono","Cascadia Code","Fira Code","JetBrains Mono",Consolas,monospace;--text-xs:.75rem;--text-sm:.8125rem;--text-base:.875rem;--text-md:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--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:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-md:0 2px 8px rgba(0,0,0,.4);--shadow-lg:0 4px 16px rgba(0,0,0,.5);--transition-fast:.15s ease;--transition-normal:.2s ease;--transition-slow:.3s ease;--sidebar-width:240px;--navbar-height:48px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal)}a{color:var(--color-blue);text-decoration:none}a:hover{text-decoration:underline}.btn{align-items:center;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);gap:var(--space-2);justify-content:center;line-height:var(--leading-tight);padding:var(--space-2) var(--space-4);transition:all var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-primary{background-color:var(--color-blue);border-color:var(--color-blue);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--color-blue-hover);border-color:var(--color-blue-hover)}.btn-secondary{background-color:var(--bg-elevated);border-color:var(--border-secondary);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){background-color:var(--bg-hover);border-color:var(--border-focus)}.btn-ghost{background-color:transparent;border-color:transparent;color:var(--text-secondary)}.btn-ghost:hover:not(:disabled){background-color:var(--bg-hover);color:var(--text-primary)}.btn-danger{background-color:var(--color-red);border-color:var(--color-red);color:#fff}.btn-danger:hover:not(:disabled){background-color:#dc2626}.btn-sm{font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}.btn-lg{font-size:var(--text-md);padding:var(--space-3) var(--space-6)}.input{background-color:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);display:block;font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-normal);outline:none;padding:var(--space-2) var(--space-3);transition:border-color var(--transition-fast);width:100%}.input::-moz-placeholder{color:var(--text-muted)}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--border-focus);box-shadow:0 0 0 2px #3b82f626}.input-mono{font-family:var(--font-mono);font-size:var(--text-xs)}.input-group{display:flex;flex-direction:column;gap:var(--space-1)}.input-group label{color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--font-medium)}.input-row{display:flex;gap:var(--space-3)}.input-row>*{flex:1}select.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23666' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding-right:32px}.card{background-color:var(--bg-surface);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-6)}.card-compact{padding:var(--space-4)}.card-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-4)}.card-title{color:var(--text-primary);font-size:var(--text-md);font-weight:var(--font-semibold)}.card-subtitle{color:var(--text-secondary);font-size:var(--text-sm);margin-top:var(--space-1)}.badge{align-items:center;border-radius:var(--radius-full);display:inline-flex;font-size:var(--text-xs);font-weight:var(--font-medium);gap:var(--space-1);line-height:var(--leading-tight);padding:2px var(--space-2)}.badge-pass{background-color:var(--status-pass-bg);color:var(--status-pass)}.badge-fail{background-color:var(--status-fail-bg);color:var(--status-fail)}.badge-warn{background-color:var(--status-warn-bg);color:var(--status-warn)}.badge-info{background-color:var(--status-info-bg);color:var(--status-info)}.tabs{border-bottom:1px solid var(--border-primary);display:flex;gap:0;margin-bottom:var(--space-6);overflow-x:auto}.tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);padding:var(--space-3) var(--space-4);transition:all var(--transition-fast);white-space:nowrap}.tab:hover{background-color:var(--bg-hover);color:var(--text-primary)}.tab.active{border-bottom-color:var(--color-blue);color:var(--color-blue)}.raw-log{background-color:#0d0d0d;border:1px solid var(--border-primary);border-radius:var(--radius-md);color:#b0b0b0;font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.6;max-height:400px;overflow-x:auto;overflow-y:auto;padding:var(--space-4);white-space:pre-wrap;word-break:break-all}.raw-log .log-client{color:var(--color-cyan)}.raw-log .log-server{color:var(--color-green)}.raw-log .log-error{color:var(--color-red)}.raw-log .log-info{color:var(--text-muted)}.raw-log .log-tls{color:var(--color-purple)}.collapsible{border:1px solid var(--border-primary);border-radius:var(--radius-md);overflow:hidden}.collapsible-trigger{align-items:center;background-color:var(--bg-tertiary);border:none;color:var(--text-secondary);cursor:pointer;display:flex;font-family:var(--font-mono);font-size:var(--text-xs);justify-content:space-between;padding:var(--space-3) var(--space-4);transition:background-color var(--transition-fast);width:100%}.collapsible-trigger:hover{background-color:var(--bg-hover);color:var(--text-primary)}.collapsible-trigger .chevron{transition:transform var(--transition-fast)}.collapsible-trigger.open .chevron{transform:rotate(180deg)}.collapsible-content{max-height:0;overflow:hidden;transition:max-height var(--transition-slow)}.collapsible-content.open{max-height:600px;overflow-y:auto}.result-card{background-color:var(--bg-surface);border:1px solid var(--border-primary);border-radius:var(--radius-lg);overflow:hidden}.result-card-header{align-items:center;border-bottom:1px solid var(--border-primary);display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5)}.result-card-header.pass{border-left:3px solid var(--status-pass)}.result-card-header.fail{border-left:3px solid var(--status-fail)}.result-card-header.warn{border-left:3px solid var(--status-warn)}.result-card-header.info{border-left:3px solid var(--status-info)}.result-card-body{padding:var(--space-4) var(--space-5)}.result-card-body dt{color:var(--text-tertiary);font-size:var(--text-xs);letter-spacing:.05em;margin-bottom:var(--space-1);text-transform:uppercase}.result-card-body dd{color:var(--text-primary);font-family:var(--font-mono);font-size:var(--text-sm);margin-bottom:var(--space-3)}.result-card-body dd:last-child{margin-bottom:0}.score-gauge{align-items:center;display:flex;flex-direction:column;gap:var(--space-2)}.score-gauge svg{transform:rotate(-90deg)}.score-gauge .score-label{font-family:var(--font-mono);font-size:var(--text-3xl);font-weight:var(--font-bold)}.score-gauge .score-sublabel{color:var(--text-secondary);font-size:var(--text-sm)}.spinner{animation:spin .6s linear infinite;border:2px solid var(--border-secondary);border-radius:50%;border-top-color:var(--color-blue);height:18px;width:18px}@keyframes spin{to{transform:rotate(1turn)}}.loading-bar{background-color:var(--bg-tertiary);height:2px;overflow:hidden}.loading-bar,.loading-bar:after{border-radius:var(--radius-full)}.loading-bar:after{animation:loading-slide 1.2s ease-in-out infinite;background-color:var(--color-blue);content:"";display:block;height:100%;width:40%}@keyframes loading-slide{0%{transform:translate(-100%)}to{transform:translate(350%)}}.text-pass{color:var(--status-pass)}.text-fail{color:var(--status-fail)}.text-warn{color:var(--status-warn)}.text-info{color:var(--status-info)}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-mono{font-family:var(--font-mono)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.w-full{width:100%}.app-layout{display:flex;min-height:100vh}.app-sidebar{background-color:var(--bg-secondary);border-right:1px solid var(--border-primary);bottom:0;display:flex;flex-direction:column;left:0;position:fixed;top:0;transition:transform var(--transition-normal);width:var(--sidebar-width);z-index:100}.app-main{display:flex;flex:1;flex-direction:column;margin-left:var(--sidebar-width);min-height:100vh}.app-navbar{align-items:center;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-primary);display:flex;height:var(--navbar-height);padding:0 var(--space-6);position:sticky;top:0;z-index:50}.app-content{flex:1;max-width:960px;padding:var(--space-6);width:100%}@media(max-width:768px){.app-sidebar{transform:translate(-100%)}.app-sidebar.open{transform:translate(0)}.app-main{margin-left:0}.app-content{padding:var(--space-4)}.input-row{flex-direction:column}.hide-mobile{display:none}}@media(max-width:480px){.app-content{padding:var(--space-3)}}