:root{--color-primary: #365072;--color-primary-light: #4a6a8f;--color-secondary: #F5BA36;--color-accent: #8b5cf6;--color-success: #10b981;--color-warning: #f59e0b;--color-danger: #ef4444;--grade-a: #059669;--grade-b: #F5BA36;--grade-c: #f59e0b;--grade-d: #ef4444;--grade-f: #991b1b;--color-bg: #f8fafc;--color-surface: #ffffff;--color-text: #1e293b;--color-text-muted: #64748b;--color-border: #e2e8f0;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, monospace;--font-size-body: clamp(1rem, .95rem + .25vw, 1.125rem);--font-size-h1: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);--font-size-h2: clamp(1.5rem, 1.3rem + 1vw, 2rem);--font-size-small: .875rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--max-width: 56rem;--border-radius: .5rem;--border-radius-lg: .75rem;--shadow-sm: 0 1px 2px rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1);--transition: .2s ease;--color-surface-muted: #f1f5f9}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);font-size:var(--font-size-body);line-height:1.6;color:var(--color-text);background:var(--color-bg);min-height:100vh;display:flex;flex-direction:column}.skip-link{position:absolute;top:-100%;left:var(--space-md);background:var(--color-primary);color:#fff;padding:var(--space-xs) var(--space-md);border-radius:var(--border-radius);z-index:100;text-decoration:none;font-weight:600}.skip-link:focus{top:var(--space-md)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}.site-header{background:var(--color-surface);color:var(--color-text);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-border)}.header-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;gap:var(--space-md)}.logo{height:32px;width:auto}.site-title{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}.site-nav{display:flex;gap:.25rem;align-items:center;margin-left:auto}.site-nav a{padding:.3rem .75rem;border-radius:var(--border-radius);font-size:var(--font-size-small);font-weight:500;color:var(--color-text-muted);text-decoration:none;transition:background var(--transition),color var(--transition)}.site-nav a:hover{background:var(--color-surface-muted);color:var(--color-primary)}.site-nav a[aria-current],.site-nav a.nav-active{background:var(--color-primary);color:#fff;font-weight:600}.site-nav a[aria-current]:hover,.site-nav a.nav-active:hover{background:var(--color-primary-light);color:#fff}.hero{max-width:var(--max-width);margin:var(--space-2xl) auto;padding:0 var(--space-lg);text-align:center}.hero-heading{font-size:var(--font-size-h1);font-weight:700;color:var(--color-primary);margin-bottom:var(--space-sm)}.hero-text{color:var(--color-text-muted);max-width:36rem;margin:0 auto var(--space-xl)}.scan-form{display:flex;gap:var(--space-xs);max-width:32rem;margin:0 auto}.url-input{flex:1;min-width:0;padding:var(--space-sm) var(--space-md);border:2px solid var(--color-border);border-radius:var(--border-radius);font-size:var(--font-size-body);font-family:var(--font-sans);transition:border-color var(--transition)}.url-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #36507226}.scan-btn{padding:var(--space-sm) var(--space-xl);background:var(--color-primary);color:#fff;border:none;border-radius:var(--border-radius);font-size:var(--font-size-body);font-weight:600;cursor:pointer;transition:background var(--transition);white-space:nowrap}.scan-btn:hover{background:var(--color-primary-light)}.scan-btn:disabled{opacity:.6;cursor:not-allowed}.rescan-btn{padding:var(--space-sm) var(--space-md);background:none;color:var(--color-primary);border:1px solid var(--color-primary);border-radius:var(--border-radius);font-size:var(--font-size-small);font-family:var(--font-sans);font-weight:600;cursor:pointer;transition:background var(--transition),color var(--transition);white-space:nowrap}.rescan-btn:hover{background:var(--color-primary);color:var(--color-surface)}.rescan-btn:disabled{opacity:.6;cursor:not-allowed}.loading{text-align:center;padding:var(--space-2xl);color:var(--color-text-muted)}.spinner{width:40px;height:40px;margin:0 auto var(--space-md);border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-section,.expired-section{max-width:var(--max-width);margin:var(--space-xl) auto;padding:0 var(--space-lg)}.error-card,.expired-card{background:var(--color-surface);border:2px solid var(--color-danger);border-radius:var(--border-radius-lg);padding:var(--space-xl);text-align:center}.expired-card{border-color:var(--color-warning)}.error-message{color:var(--color-danger);margin-bottom:var(--space-md)}.results{max-width:var(--max-width);margin:0 auto var(--space-2xl);padding:0 var(--space-lg)}.grade-container{display:flex;align-items:center;gap:var(--space-xl);margin-bottom:var(--space-xl);padding:var(--space-xl);background:var(--color-surface);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-md)}.grade-badge{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-lg)}.grade-badge.grade-a{background:var(--grade-a)}.grade-badge.grade-b{background:var(--grade-b)}.grade-badge.grade-c{background:var(--grade-c)}.grade-badge.grade-d{background:var(--grade-d)}.grade-badge.grade-f{background:var(--grade-f)}.grade-letter{font-size:2.5rem;font-weight:800;color:#fff;line-height:1}.grade-b .grade-letter,.grade-c .grade-letter{color:var(--color-text)}.grade-url{font-weight:600;font-size:1.125rem;word-break:break-all}.grade-score,.grade-time{color:var(--color-text-muted);font-size:var(--font-size-small)}.report-tabs{display:flex;gap:0;border-bottom:2px solid var(--color-border);margin-bottom:var(--space-lg);overflow-x:auto}.tab{padding:var(--space-sm) var(--space-lg);border:none;background:none;font-size:var(--font-size-body);font-family:var(--font-sans);color:var(--color-text-muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:color var(--transition),border-color var(--transition);white-space:nowrap}.tab:hover{color:var(--color-primary)}.tab.active,.tab[aria-selected=true]{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}.tab-panel{background:var(--color-surface);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-lg)}.tab-panel[hidden]{display:none}.summary-panel{overflow-x:auto}.summary-table{width:100%;border-collapse:collapse}.summary-table th,.summary-table td{padding:var(--space-sm) var(--space-md);text-align:left;border-bottom:1px solid var(--color-border)}.summary-table th{font-weight:600;color:var(--color-text-muted);font-size:var(--font-size-small);text-transform:uppercase;letter-spacing:.05em}.summary-table tr:last-child td{border-bottom:none}.header-cell{font-weight:600}.header-link{color:var(--color-primary);text-decoration:none;border-bottom:1px dashed var(--color-border);transition:border-color .15s}.header-link:hover{border-bottom-color:var(--color-primary)}.status-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.125rem .5rem;border-radius:1rem;font-size:var(--font-size-small);font-weight:600}.status-pass{background:#10b9811a;color:#065f46}.status-warn{background:#f59e0b1a;color:#92400e}.status-fail{background:#ef44441a;color:#991b1b}.status-info{background:#3650721a;color:var(--color-primary)}.status-icon:before{font-weight:700}.status-pass .status-icon:before{content:"\2713"}.status-warn .status-icon:before{content:"\26a0"}.status-fail .status-icon:before{content:"\2717"}.status-info .status-icon:before{content:"\2139"}.points-cell{font-variant-numeric:tabular-nums;white-space:nowrap}.found-value{font-family:var(--font-mono);font-size:var(--font-size-small);color:var(--color-text-muted);max-width:20rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.warnings-list,.recommendations-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-sm)}.warnings-list li,.recommendations-list li{padding:var(--space-sm) var(--space-md);border-radius:var(--border-radius);font-size:var(--font-size-small)}.warnings-list li{background:#f59e0b14;border-left:3px solid var(--color-warning)}.warnings-list li.no-warnings{background:#10b98114;border-left-color:var(--color-success)}.recommendations-list li{background:#8b5cf60f;border-left:3px solid var(--color-accent)}.warning-header,.recommendation-header{font-weight:600;margin-bottom:.25rem}.warning-header .header-link,.recommendation-header .header-link{color:inherit;border-bottom-color:var(--color-text-muted)}.warning-header .header-link:hover,.recommendation-header .header-link:hover{border-bottom-color:var(--color-primary);color:var(--color-primary)}.raw-headers{font-family:var(--font-mono);font-size:var(--font-size-small);line-height:1.8;white-space:pre-wrap;word-break:break-all;background:var(--color-surface-muted);padding:var(--space-md);border-radius:var(--border-radius);overflow-x:auto}.share-bar{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-lg)}.btn-secondary{padding:var(--space-xs) var(--space-lg);background:var(--color-surface);color:var(--color-primary);border:2px solid var(--color-primary);border-radius:var(--border-radius);font-size:var(--font-size-small);font-weight:600;cursor:pointer;transition:background var(--transition),color var(--transition)}.btn-secondary:hover{background:var(--color-primary);color:#fff}.copy-feedback{font-size:var(--font-size-small);color:var(--color-success);font-weight:600}.site-footer{margin-top:auto;padding:var(--space-lg);text-align:center;color:var(--color-text-muted);font-size:var(--font-size-small);border-top:1px solid var(--color-border)}.site-footer a{color:var(--color-primary);text-decoration:none}.site-footer a:hover{text-decoration:underline}.precheck-form{max-width:38rem;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-xs);align-items:center}.precheck-form-row{display:flex;gap:var(--space-xs);width:100%}.precheck-mode-row{display:flex;align-items:center;gap:var(--space-md)}.mode-toggle{display:flex;border:1px solid var(--color-border);border-radius:var(--border-radius);overflow:hidden}.mode-btn{padding:var(--space-xs) var(--space-sm);border:none;background:none;font-size:var(--font-size-small);font-family:var(--font-sans);color:var(--color-text-muted);cursor:pointer;transition:background var(--transition),color var(--transition)}.mode-btn+.mode-btn{border-left:1px solid var(--color-border)}.mode-btn-active{background:var(--color-primary);color:var(--color-surface);font-weight:600}.mode-btn:hover:not(.mode-btn-active){background:var(--color-surface-muted);color:var(--color-primary)}.sri-label{display:flex;align-items:center;gap:.35rem;font-size:var(--font-size-small);color:var(--color-text-muted);cursor:pointer}.precheck-status{display:flex;align-items:center;justify-content:center;min-height:40vh;color:var(--color-text-muted);padding:var(--space-xl) var(--space-lg)}.precheck-status[hidden]{display:none}.precheck-status.is-error{color:var(--color-danger)}.precheck-split{display:grid;grid-template-columns:1fr 1fr;min-height:60vh;border-top:1px solid var(--color-border)}.precheck-findings{padding:var(--space-md) var(--space-lg);border-right:2px solid var(--color-border);overflow-y:auto}.precheck-generated{padding:var(--space-md) var(--space-lg);background:var(--color-surface-muted);overflow-y:auto}.findings-section,.generated-section{margin-bottom:var(--space-lg)}.findings-section h3,.generated-section h3{font-size:var(--font-size-small);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:var(--space-xs)}.code-block{background:#1a1a2e;color:#a8c7e8;font-family:var(--font-mono);font-size:.8rem;line-height:1.6;padding:var(--space-sm);border-radius:var(--border-radius);white-space:pre-wrap;word-break:break-all;margin:var(--space-xs) 0}.add-page-row{display:flex;gap:var(--space-xs)}.add-page-input{font-size:var(--font-size-small);padding:var(--space-xs) var(--space-sm);flex:1}.scan-btn-sm{padding:var(--space-xs) var(--space-md);font-size:var(--font-size-small);background:var(--color-primary);color:var(--color-surface);border:none;border-radius:var(--border-radius);font-weight:600;cursor:pointer;transition:background var(--transition);white-space:nowrap}.scan-btn-sm:hover{background:var(--color-primary-light)}.scan-btn-sm:disabled{opacity:.6;cursor:not-allowed}.add-page-msg{font-size:var(--font-size-small);color:var(--color-danger);margin-top:var(--space-xs);min-height:1.2em}.copy-btn{font-size:var(--font-size-small);padding:.25rem .75rem;margin-top:.25rem;background:var(--color-surface);color:var(--color-primary);border:1px solid var(--color-border);border-radius:var(--border-radius);cursor:pointer;transition:background var(--transition),color var(--transition)}.copy-btn:hover{background:var(--color-primary);color:#fff}.disclaimer{font-size:var(--font-size-small);color:var(--color-text-muted);font-style:italic;margin-bottom:var(--space-md)}.csp-note{font-size:var(--font-size-small);color:var(--color-text-muted);margin-top:var(--space-xs)}.page-list,.service-list,.resource-list{list-style:none;padding:0;margin:0}.page-list li,.service-list li,.resource-list li{margin-bottom:.25rem;font-size:var(--font-size-small)}.resource-list code{font-family:var(--font-mono);font-size:.75rem;word-break:break-all}.muted{color:var(--color-text-muted);font-size:var(--font-size-small)}.badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.75rem;font-weight:600}.badge-ok{background:#10b98126;color:#065f46}.badge-warn{background:#f59e0b26;color:#92400e}.badge-err{background:#ef444426;color:#991b1b}@media(max-width:768px){.precheck-split{grid-template-columns:1fr}.precheck-findings{border-right:none;border-bottom:2px solid var(--color-border)}}@media(max-width:640px){.header-inner{flex-direction:column;align-items:flex-start}.scan-form,.precheck-form-row{flex-direction:column}.grade-container{flex-direction:column;text-align:center}.hide-mobile{display:none}.site-nav{gap:.125rem;margin-left:0}.site-nav a{padding:.25rem .5rem;font-size:.75rem}.report-tabs{gap:0}.tab{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-small)}}