.ai-scanner {
  --cream: #FFF9EC;
  --orange: #E8562D;
  --dark: #1A1A1A;
  --gray-100: #F5F1E8;
  --gray-200: #E8E2D5;
  --gray-400: #A69E8E;
  --gray-600: #6B6358;
  --green: #2D8E5E;
  --red: #D94040;
  --yellow: #D4930D;
  --blue: #3B6FD4;
  --radius: 12px;
  font-family: 'Bricolage Grotesque', -apple-system, sans-serif;
  color: var(--dark);
}

.ai-scanner .hero { text-align: center; padding: 50px 20px 30px; max-width: 720px; margin: 0 auto; }
.ai-scanner .hero h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.ai-scanner .hero p { font-size: 16px; color: var(--gray-600); line-height: 1.6; max-width: 560px; margin: 0 auto; }
.ai-scanner .hero .highlight { color: var(--orange); }

.ai-scanner .form-wrap { max-width: 640px; margin: 28px auto 0; }
.ai-scanner .search-row { display: flex; gap: 8px; }
.ai-scanner .search-input { flex: 1; padding: 14px 18px; font-size: 15px; font-family: 'Bricolage Grotesque', monospace; border: 2px solid var(--gray-200); border-radius: var(--radius); background: white; outline: none; transition: border-color 0.2s; }
.ai-scanner .search-input:focus { border-color: var(--orange); }
.ai-scanner .search-input::placeholder { color: var(--gray-400); }
.ai-scanner .scan-btn { padding: 14px 28px; background: var(--orange); color: white; border: none; border-radius: var(--radius); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.ai-scanner .scan-btn:hover { background: #D14A24; }
.ai-scanner .scan-btn:disabled { background: var(--gray-400); cursor: not-allowed; }

.ai-scanner .builder-row { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.ai-scanner .builder-chip { padding: 8px 16px; border: 2px solid var(--gray-200); border-radius: 24px; font-size: 13px; font-weight: 500; cursor: pointer; background: white; transition: all 0.2s; color: var(--gray-600); }
.ai-scanner .builder-chip:hover { border-color: var(--orange); color: var(--orange); }
.ai-scanner .builder-chip.active { border-color: var(--orange); background: var(--orange); color: white; }

.ai-scanner .scan-note { text-align: center; font-size: 12px; color: var(--gray-400); margin: 12px 0 30px; }

.ai-scanner .loading { text-align: center; padding: 60px 20px; display: none; }
.ai-scanner .loading.active { display: block; }
.ai-scanner .loading-spinner { width: 48px; height: 48px; border: 4px solid var(--gray-200); border-top-color: var(--orange); border-radius: 50%; animation: ai-scanner-spin 0.8s linear infinite; margin: 0 auto 20px; }
@keyframes ai-scanner-spin { to { transform: rotate(360deg); } }
.ai-scanner .loading p { color: var(--gray-600); font-size: 15px; }

.ai-scanner .results { max-width: 800px; margin: 0 auto; padding: 0 20px 80px; display: none; }
.ai-scanner .results.active { display: block; }

.ai-scanner .scan-meta { text-align: center; font-size: 13px; color: var(--gray-400); margin-bottom: 8px; }
.ai-scanner .builder-badge { display: inline-block; background: var(--gray-100); padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--gray-600); margin-left: 6px; text-transform: capitalize; }

.ai-scanner .score-card { background: white; border-radius: 16px; padding: 44px 36px; text-align: center; margin-bottom: 28px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.ai-scanner .score-url { font-size: 12px; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.ai-scanner .score-domain { font-size: 16px; font-weight: 600; margin-bottom: 28px; }

.ai-scanner .gauge-wrap { position: relative; width: 220px; height: 130px; margin: 0 auto 20px; }
.ai-scanner .gauge-score { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 56px; font-weight: 800; line-height: 1; }

.ai-scanner .score-level { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.ai-scanner .level-0 { background: #FDE8E8; color: var(--red); }
.ai-scanner .level-1 { background: #FDE8E8; color: var(--red); }
.ai-scanner .level-2 { background: #FEF3CD; color: var(--yellow); }
.ai-scanner .level-3 { background: #D4EDDA; color: var(--green); }
.ai-scanner .level-4 { background: #D4EDDA; color: var(--green); }

.ai-scanner .categories { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--gray-100); }
.ai-scanner .cat-chip { text-align: center; min-width: 100px; }
.ai-scanner .cat-chip-score { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; margin: 0 auto 6px; border: 3px solid; background: white; }
.ai-scanner .cat-chip-score.good { border-color: var(--green); color: var(--green); }
.ai-scanner .cat-chip-score.mid { border-color: var(--yellow); color: var(--yellow); }
.ai-scanner .cat-chip-score.bad { border-color: var(--red); color: var(--red); }
.ai-scanner .cat-chip-name { font-size: 11px; font-weight: 600; color: var(--gray-600); max-width: 100px; margin: 0 auto; line-height: 1.3; }
.ai-scanner .cat-chip-count { font-size: 11px; color: var(--gray-400); }

.ai-scanner .check-section { margin-bottom: 28px; }
.ai-scanner .section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ai-scanner .section-title { font-size: 17px; font-weight: 700; }
.ai-scanner .section-desc { font-size: 13px; color: var(--gray-400); margin-bottom: 12px; }
.ai-scanner .section-score { font-size: 14px; font-weight: 600; }
.ai-scanner .section-score.good { color: var(--green); }
.ai-scanner .section-score.mid { color: var(--yellow); }
.ai-scanner .section-score.bad { color: var(--red); }

.ai-scanner .check-item { background: white; border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.ai-scanner .check-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; user-select: none; }
.ai-scanner .check-header:hover { background: var(--gray-100); }
.ai-scanner .check-icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.ai-scanner .check-icon.pass { background: #D4EDDA; color: var(--green); }
.ai-scanner .check-icon.fail { background: #FDE8E8; color: var(--red); }
.ai-scanner .check-icon.partial { background: #FEF3CD; color: var(--yellow); }
.ai-scanner .check-name { flex: 1; font-size: 14px; font-weight: 500; }
.ai-scanner .check-toggle { color: var(--gray-400); font-size: 12px; transition: transform 0.2s; }
.ai-scanner .check-item.open .check-toggle { transform: rotate(180deg); }

.ai-scanner .check-detail { padding: 0 18px 14px 56px; display: none; font-size: 13px; line-height: 1.6; color: var(--gray-600); }
.ai-scanner .check-item.open .check-detail { display: block; }

.ai-scanner .check-impact { margin-top: 10px; padding: 10px 14px; background: #F0F4FF; border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; font-size: 12px; line-height: 1.5; color: #3B5998; }
.ai-scanner .check-impact > strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--blue); margin-bottom: 3px; }

.ai-scanner .check-fix { margin-top: 10px; padding: 10px 14px; background: #FFF5F0; border-left: 3px solid var(--orange); border-radius: 0 8px 8px 0; font-size: 12px; line-height: 1.6; overflow-x: auto; }
.ai-scanner .check-fix > strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--orange); margin-bottom: 3px; }
.ai-scanner .check-fix .platform-panel strong { display: inline; font-size: inherit; text-transform: none; letter-spacing: normal; color: inherit; margin-bottom: 0; }
.ai-scanner .check-fix code { background: #F5F0E8; padding: 1px 5px; border-radius: 3px; font-size: 11px; }

.ai-scanner .platform-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.ai-scanner .platform-tab { padding: 4px 10px; font-size: 11px; font-weight: 600; border: 1px solid var(--gray-200); border-radius: 6px; cursor: pointer; background: white; color: var(--gray-600); }
.ai-scanner .platform-tab:hover { border-color: var(--orange); }
.ai-scanner .platform-tab.active { background: var(--orange); color: white; border-color: var(--orange); }

.ai-scanner .improve-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--orange); color: white; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; }
.ai-scanner .improve-btn:hover { background: #D14A24; }
.ai-scanner .scroll-details-btn { display: inline-flex; align-items: center; gap: 8px; margin: 24px auto 36px; padding: 10px 20px; background: transparent; color: var(--dark); border: 1.5px solid var(--gray-200); border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.ai-scanner .scroll-details-btn:hover { border-color: var(--orange); color: var(--orange); }
.ai-scanner .scroll-details-btn .fail-count { background: var(--red); color: white; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ai-scanner .scroll-details-btn .arrow-down { font-size: 16px; opacity: 0.5; }

.ai-scanner .share-card { text-align: center; margin: 32px auto 0; padding: 24px 20px; max-width: 800px; }
.ai-scanner .static-share { margin-top: 0; }
.ai-scanner .results.active ~ .static-share { display: none; }
.ai-scanner .share-card p { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.ai-scanner .share-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ai-scanner .share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; text-decoration: none; border: none; }
.ai-scanner .share-linkedin { background: #0A66C2; color: white; }
.ai-scanner .share-linkedin:hover { background: #004182; }
.ai-scanner .share-copy { background: transparent; color: var(--gray-600); border: 1.5px solid var(--gray-200); }
.ai-scanner .share-copy:hover { border-color: var(--orange); color: var(--orange); }

.ai-scanner .cta-card { text-align: center; margin-top: 20px; padding: 32px 28px; background: white; border-radius: 16px; }
.ai-scanner .cta-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.ai-scanner .cta-card p { font-size: 13px; color: var(--gray-600); margin-bottom: 20px; line-height: 1.5; }
.ai-scanner .cta-buttons { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ai-scanner .cta-pdf { background: white; color: var(--orange); border: 2px solid var(--orange); }
.ai-scanner .cta-pdf:hover { background: var(--orange); color: white; }
.ai-scanner .cta-secondary { font-size: 13px; font-weight: 500; color: var(--gray-600); text-decoration: none; transition: color 0.2s; }
.ai-scanner .cta-secondary:hover { color: var(--orange); }

.ai-scanner .error { text-align: center; padding: 40px; display: none; }
.ai-scanner .error.active { display: block; }
.ai-scanner .error p { color: var(--red); font-size: 15px; }

.ai-scanner .footer { text-align: center; padding: 40px 20px; font-size: 12px; color: var(--gray-400); }
.ai-scanner .footer a { color: var(--orange); text-decoration: none; }

@media (max-width: 640px) {
  .ai-scanner .hero { padding: 32px 16px 20px; }
  .ai-scanner .hero p { font-size: 15px; }
  .ai-scanner .form-wrap { padding: 0 16px; }
  .ai-scanner .search-row { flex-direction: column; }
  .ai-scanner .scan-btn { width: 100%; }
  .ai-scanner .builder-row { gap: 6px; }
  .ai-scanner .builder-chip { padding: 6px 12px; font-size: 12px; }
  .ai-scanner .scan-note { padding: 0 16px; }
  .ai-scanner .score-card { padding: 28px 16px; }
  .ai-scanner .score-domain { font-size: 14px; word-break: break-all; }
  .ai-scanner .gauge-wrap { width: 180px; height: 110px; }
  .ai-scanner .gauge-wrap svg { width: 180px !important; }
  .ai-scanner .gauge-score { font-size: 44px; }
  .ai-scanner .categories { gap: 8px; }
  .ai-scanner .cat-chip { min-width: 70px; }
  .ai-scanner .cat-chip-score { width: 44px; height: 44px; font-size: 15px; }
  .ai-scanner .cat-chip-name { font-size: 10px; max-width: 80px; }
  .ai-scanner .check-detail { padding: 0 14px 14px 14px; }
  .ai-scanner .check-header { padding: 12px 14px; gap: 10px; }
  .ai-scanner .platform-tabs { flex-wrap: wrap; }
  .ai-scanner .platform-tab { padding: 4px 8px; font-size: 10px; }
  .ai-scanner .scroll-details-btn { font-size: 13px; padding: 8px 16px; }
  .ai-scanner .cta-card { padding: 20px 16px; }
  .ai-scanner .footer { padding: 30px 16px; line-height: 1.6; }
  .ai-scanner .results { padding: 0 12px 60px; }
}