.cwv-page{min-height:100vh;background:var(--bg-base);padding-bottom:var(--space-16)}.cwv-hero{background:var(--bg-surface);border-bottom:1px solid var(--border);padding:var(--space-8) var(--space-6) var(--space-6);text-align:center;position:relative;overflow:hidden}.cwv-hero:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(90deg,transparent 0,rgba(99,102,241,.03) 20%,transparent 40%),linear-gradient(90deg,transparent 60%,rgba(99,102,241,.03) 80%,transparent);pointer-events:none}.cwv-hero h1{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary);margin-bottom:var(--space-2);letter-spacing:-.02em}.cwv-hero h1,.cwv-hero p{position:relative;z-index:1}.cwv-hero p{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-6)}.cwv-form{max-width:900px;margin:0 auto;position:relative;z-index:1;width:100%}.cwv-form,.cwv-input{display:flex;gap:var(--space-3)}.cwv-input{flex:1 1;align-items:center;min-height:48px;padding:0 var(--space-4);background:var(--bg-surface);border:1px solid var(--color-primary-500);border-radius:10px;transition:border-color var(--transition-base),box-shadow var(--transition-base)}.cwv-input:hover{border-color:var(--color-primary-600)}.cwv-input:focus-within{border-color:var(--color-primary-600);box-shadow:0 0 0 3px rgba(99,102,241,.15)}.cwv-input svg{width:18px;height:18px;color:var(--text-muted);flex-shrink:0}.cwv-input input{flex:1 1;min-width:0;border:none;outline:none;font-size:var(--text-base);background:transparent;color:var(--text-primary);padding:var(--space-3) 0}.cwv-input input::placeholder{color:var(--text-muted)}.cwv-form button[type=submit]{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--color-primary-600);color:#fff;border:none;border-radius:var(--radius-xl);font-weight:var(--font-semibold);cursor:pointer;transition:background var(--transition-base),box-shadow var(--transition-base);white-space:nowrap;box-shadow:0 0 0 2px rgba(99,102,241,.25)}.cwv-form button[type=submit]:hover:not(:disabled){background:var(--color-primary-700);box-shadow:0 0 0 2px rgba(99,102,241,.35)}.cwv-form button[type=submit]:disabled{opacity:.7;cursor:not-allowed}.cwv-form button svg{width:18px;height:18px}.cwv-device-toggle{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-4);position:relative;z-index:1}.cwv-device-toggle button{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-slate-100);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-base)}.cwv-device-toggle button:hover{background:var(--color-slate-200);color:var(--text-primary)}.cwv-device-toggle button.active{background:var(--color-primary-600);color:#fff;border-color:var(--color-primary-600)}.cwv-device-toggle button svg{width:16px;height:16px}.cwv-device-toggle button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.cwv-form button[type=submit]:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.cwv-spinner{width:18px;height:18px;border:2px solid hsla(0,0%,100%,.3);border-top-color:#fff;border-radius:50%;animation:cwv-spin .8s linear infinite}@keyframes cwv-spin{to{transform:rotate(1turn)}}.cwv-content{max-width:900px;margin:0 auto;padding:var(--space-8) var(--space-6)}.cwv-loading{text-align:center;padding:var(--space-16)}.cwv-loading__spinner{width:48px;height:48px;border:3px solid var(--border-color);border-top-color:var(--color-primary-600);border-radius:50%;animation:cwv-spin .8s linear infinite;margin:0 auto var(--space-4)}.cwv-loading p{color:var(--text-secondary);margin-bottom:var(--space-2)}.cwv-loading small{color:var(--text-muted);font-size:var(--text-sm)}.cwv-alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-xl);margin-bottom:var(--space-6)}.cwv-alert--error{background:var(--color-error-50);border:1px solid var(--color-error-200);color:var(--color-error-800)}.cwv-alert svg{width:24px;height:24px;flex-shrink:0;color:var(--color-error-500)}.cwv-alert strong{display:block;margin-bottom:var(--space-1)}.cwv-alert p{font-size:var(--text-sm);margin-bottom:var(--space-3)}.cwv-alert__retry{padding:var(--space-2) var(--space-4);background:var(--color-error-600);color:#fff;border:none;border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:background var(--transition-base)}.cwv-alert__retry:hover{background:var(--color-error-700)}.cwv-alert__retry:focus-visible{outline:2px solid var(--color-error-500);outline-offset:2px}.cwv-results{display:flex;flex-direction:column;gap:var(--space-6)}.cwv-status{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-xl);position:relative}.cwv-status--good{background:linear-gradient(135deg,var(--color-success-100) 0,var(--color-success-200) 100%);border:1px solid var(--color-success-300)}.cwv-status--needs-improvement{background:linear-gradient(135deg,var(--color-warning-100) 0,var(--color-warning-200) 100%);border:1px solid var(--color-warning-300)}.cwv-status--poor{background:linear-gradient(135deg,var(--color-error-100) 0,var(--color-error-200) 100%);border:1px solid var(--color-error-300)}.cwv-status--unknown{background:var(--color-slate-100);border:1px solid var(--border)}.cwv-status__icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.cwv-status__icon svg{width:40px;height:40px}.cwv-status--good .cwv-status__icon svg{color:var(--color-success-600)}.cwv-status--needs-improvement .cwv-status__icon svg{color:var(--color-warning-600)}.cwv-status--poor .cwv-status__icon svg{color:var(--color-error-600)}.cwv-status__text h2{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);margin-bottom:var(--space-1)}.cwv-status__text p{font-size:var(--text-sm);color:var(--text-secondary)}.cwv-status__source{position:absolute;top:var(--space-3);right:var(--space-4);font-size:var(--text-xs);background:rgba(0,0,0,.08);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);color:var(--text-secondary)}.cwv-section{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-6)}.cwv-section h3{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-2)}.cwv-section__desc{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-4)}.cwv-metrics{display:grid;grid-gap:var(--space-4);gap:var(--space-4)}.cwv-metrics--core{grid-template-columns:repeat(3,1fr)}.cwv-metrics--additional{grid-template-columns:repeat(2,1fr)}.cwv-metric{background:var(--color-slate-50);border-radius:var(--radius-xl);padding:var(--space-5);border-left:4px solid var(--border-color);transition:all var(--transition-base)}.cwv-metric:hover{box-shadow:var(--shadow-sm)}.cwv-metric--good{border-left-color:var(--color-success-500)}.cwv-metric--needs-improvement{border-left-color:var(--color-warning-500)}.cwv-metric--poor{border-left-color:var(--color-error-500)}.cwv-metric--no-data{border-left-color:var(--color-slate-300)}.cwv-metric__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}.cwv-metric__name{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary)}.cwv-metric__badge{font-size:var(--text-xs);font-weight:var(--font-semibold);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md)}.cwv-metric__badge--good{background:var(--color-success-100);color:var(--color-success-700)}.cwv-metric__badge--needs-improvement{background:var(--color-warning-100);color:var(--color-warning-700)}.cwv-metric__badge--poor{background:var(--color-error-100);color:var(--color-error-700)}.cwv-metric__value{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary);margin-bottom:var(--space-2)}.cwv-metric__rating{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);font-weight:var(--font-medium);text-transform:capitalize;margin-bottom:var(--space-2)}.cwv-metric__rating svg{width:16px;height:16px}.cwv-metric--good .cwv-metric__rating{color:var(--color-success-600)}.cwv-metric--needs-improvement .cwv-metric__rating{color:var(--color-warning-600)}.cwv-metric--poor .cwv-metric__rating{color:var(--color-error-600)}.cwv-metric__threshold{font-size:var(--text-xs);color:var(--text-muted)}.cwv-period{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-slate-50);border-radius:var(--radius-lg);font-size:var(--text-sm);color:var(--text-secondary)}.cwv-period svg{width:16px;height:16px;flex-shrink:0}.cwv-recommendations{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-6)}.cwv-recommendations h3{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-4)}.cwv-recommendations ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3)}.cwv-recommendations li{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);background:var(--color-slate-50);border-radius:var(--radius-lg);font-size:var(--text-sm);color:var(--text-secondary)}.cwv-recommendations li svg{width:18px;height:18px;flex-shrink:0;color:var(--color-warning-500)}.cwv-url-info{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-slate-50);border-radius:var(--radius-xl);font-size:var(--text-sm);color:var(--text-secondary)}.cwv-url-info svg{width:16px;height:16px;flex-shrink:0}.cwv-url-info__device{margin-left:auto;display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);background:var(--bg-surface);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);border:1px solid var(--border)}.cwv-empty{display:flex;flex-direction:column;gap:var(--space-6)}.cwv-demo{display:grid;grid-template-columns:380px 1fr;grid-gap:var(--space-10);gap:var(--space-10);align-items:start;background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden}.cwv-demo-preview{background:var(--color-slate-50);border-right:1px solid var(--color-slate-200);padding:0;display:flex;flex-direction:column;min-height:320px}.cwv-demo-browser{display:flex;align-items:center;gap:6px;padding:var(--space-3) var(--space-4);background:#fff;border-bottom:1px solid var(--color-slate-200)}.cwv-demo-browser__dot{width:10px;height:10px;border-radius:50%}.cwv-demo-browser__dot--red{background:#ff5f57}.cwv-demo-browser__dot--yellow{background:#ffbd2e}.cwv-demo-browser__dot--green{background:#28c840}.cwv-demo-browser__bar{flex:1 1;margin-left:var(--space-3);background:var(--color-slate-100);border-radius:var(--radius-md);padding:var(--space-1) var(--space-3);font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}.cwv-demo-content{padding:var(--space-6);flex:1 1;display:flex;flex-direction:column;gap:var(--space-4)}.cwv-demo-metrics{display:flex;flex-direction:column;gap:var(--space-3)}.cwv-demo-metric{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:#fff;border-radius:var(--radius-lg);border:1px solid var(--color-slate-200)}.cwv-demo-metric .label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary)}.cwv-demo-metric .value{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary);font-family:var(--font-mono)}.cwv-demo-metric .status{display:none}.cwv-demo-info{padding:var(--space-8);display:flex;flex-direction:column;justify-content:center}.cwv-demo-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--color-slate-100);color:var(--text-secondary);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);margin-bottom:var(--space-4);width:-moz-fit-content;width:fit-content}.cwv-demo-badge svg{width:14px;height:14px}.cwv-demo-info h2{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);margin-bottom:var(--space-3);letter-spacing:-.02em}.cwv-demo-info>p{color:var(--text-secondary);margin-bottom:var(--space-6);line-height:var(--leading-relaxed);font-size:var(--text-sm)}.cwv-demo-features{display:flex;flex-direction:column;gap:var(--space-2)}.cwv-demo-feature{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary)}.cwv-demo-feature svg{width:14px;height:14px;color:var(--color-slate-400);flex-shrink:0}.cwv-why{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-6)}.cwv-why--alt{background:var(--bg-base)}.cwv-why__title{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);margin:0 0 var(--space-2);letter-spacing:-.02em}.cwv-why__desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;margin:0 0 var(--space-6)}.cwv-why__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}.cwv-why__item{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--border);transition:background var(--transition-base)}.cwv-why__item:last-child{border-bottom:none}.cwv-why__item:hover{background:var(--color-slate-50);margin-left:calc(-1 * var(--space-4));margin-right:calc(-1 * var(--space-4));padding-left:var(--space-4);padding-right:var(--space-4);border-radius:var(--radius-lg)}.cwv-why__badge{background:var(--color-primary-50);color:var(--color-primary-600);font-size:var(--text-xs);font-weight:var(--font-bold)}.cwv-why__badge,.cwv-why__icon{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg)}.cwv-why__icon{background:var(--color-success-100);color:var(--color-success-600)}.cwv-why__icon svg{width:20px;height:20px}.cwv-why__content{flex:1 1;min-width:0}.cwv-why__content h3{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary);margin:0 0 var(--space-1)}.cwv-why__content p{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;margin:0}.cwv-faq{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-6)}.cwv-faq__title{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);margin:0 0 var(--space-6);letter-spacing:-.02em}.cwv-faq__list{margin:0;padding:0;display:flex;flex-direction:column;gap:0}.cwv-faq__item{padding:var(--space-4) 0;border-bottom:1px solid var(--border)}.cwv-faq__item:last-child{border-bottom:none}.cwv-faq__q{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary);margin:0 0 var(--space-2)}.cwv-faq__a{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;margin:0}.cwv-cta{display:flex;align-items:center;justify-content:space-between;max-width:900px;margin:var(--space-8) auto 0;padding:var(--space-6);background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(139,92,246,.04));border:1px solid rgba(99,102,241,.15);border-radius:var(--radius-xl)}.cwv-cta h3{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--text-primary);margin-bottom:var(--space-1)}.cwv-cta p{color:var(--text-secondary);font-size:var(--text-sm)}.cwv-cta__btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--color-primary-600);color:#fff;border-radius:var(--radius-lg);font-weight:var(--font-semibold);text-decoration:none;transition:all var(--transition-base);box-shadow:var(--shadow-xs)}.cwv-cta__btn:hover{background:var(--color-primary-700);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.cwv-cta__btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.cwv-cta__btn svg{width:18px;height:18px}@media (max-width:768px){.cwv-hero{padding:var(--space-6) var(--space-4) var(--space-5);padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right))}.cwv-hero h1{font-size:var(--text-xl)}.cwv-form{flex-direction:column}.cwv-input input{font-size:16px}.cwv-form button[type=submit]{width:100%;min-height:48px}.cwv-content{padding:var(--space-6) var(--space-4);padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right))}.cwv-demo,.cwv-metrics--additional,.cwv-metrics--core{grid-template-columns:1fr}.cwv-demo-preview{border-right:none;border-bottom:1px solid var(--color-slate-200);min-height:0}.cwv-demo-info{padding:var(--space-6)}.cwv-why__item{padding:var(--space-3) 0}.cwv-why__item:hover{margin-left:calc(-1 * var(--space-3));margin-right:calc(-1 * var(--space-3));padding-left:var(--space-3);padding-right:var(--space-3)}.cwv-cta{gap:var(--space-4);margin-left:max(var(--space-4),env(safe-area-inset-left));margin-right:max(var(--space-4),env(safe-area-inset-right))}.cwv-cta,.cwv-status{flex-direction:column;text-align:center}.cwv-status__source{position:static;margin-top:var(--space-2)}}@media (max-width:480px){.cwv-hero{padding:var(--space-5) var(--space-3) var(--space-4);padding-left:max(var(--space-3),env(safe-area-inset-left));padding-right:max(var(--space-3),env(safe-area-inset-right))}.cwv-hero h1{font-size:var(--text-lg)}.cwv-hero p{font-size:13px}.cwv-device-toggle button span{display:none}.cwv-device-toggle button{justify-content:center}.cwv-faq__title,.cwv-why__title{font-size:var(--text-lg)}.cwv-why__badge,.cwv-why__icon{width:36px;height:36px}.cwv-why__icon svg{width:18px;height:18px}}.cwv-detailed-recs{display:flex;flex-direction:column;gap:var(--space-4)}.cwv-rec-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);transition:border-color .2s,box-shadow .2s}.cwv-rec-card:hover{box-shadow:var(--shadow-md)}.cwv-rec-card--poor{border-left:4px solid var(--color-error-500)}.cwv-rec-card--needs-improvement{border-left:4px solid var(--color-warning-500)}.cwv-rec-card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}.cwv-rec-card__metric{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.cwv-rec-card__badge{font-size:11px;font-weight:var(--font-medium);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);text-transform:capitalize}.cwv-rec-card__badge--poor{background:var(--color-error-100);color:var(--color-error-700)}.cwv-rec-card__badge--needs-improvement{background:var(--color-warning-100);color:var(--color-warning-700)}.cwv-rec-card__values{display:flex;gap:var(--space-4);margin-bottom:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--bg-muted);border-radius:var(--radius-md);font-size:var(--text-sm)}.cwv-rec-card__current{color:var(--text-secondary)}.cwv-rec-card__current strong{color:var(--color-error-600)}.cwv-rec-card__target{color:var(--text-secondary)}.cwv-rec-card__target strong{color:var(--color-success-600)}.cwv-rec-card__tips{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2)}.cwv-rec-card__tips li{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}.cwv-rec-card__tips li svg{width:14px;height:14px;flex-shrink:0;margin-top:3px;color:var(--color-primary-500)}@media (max-width:640px){.cwv-rec-card__values{flex-direction:column;gap:var(--space-1)}}