#seoAnalyzerApp {
      --primary: #244c7c;
      --primary-dark: #173657;
      --accent: #81ab2e;
      --success: #2f855a;
      --warning: #c66a0a;
      --error: #c53030;
      --info: #2b6cb0;
      --text: #1f2937;
      --muted: #64748b;
      --surface: #ffffff;
      --background: #f4f7fa;
      --border: #dbe3ea;
      --radius: 8px;
      --shadow: 0 8px 24px rgba(28, 47, 68, .08);
      color: var(--text);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.55;
    }
#seoAnalyzerApp * { box-sizing: border-box; }
#seoAnalyzerApp .page {
      width: min(1180px, calc(100% - 32px));
      margin: 48px auto 80px;
    }
#seoAnalyzerApp .intro {
      margin-bottom: 28px;
    }
#seoAnalyzerApp h1 {
      margin: 0 0 12px;
      font-size: clamp(2rem, 5vw, 3.2rem);
      line-height: 1.08;
      color: var(--primary-dark);
    }
#seoAnalyzerApp .intro p {
      max-width: 900px;
      margin: 0;
      font-size: 1.05rem;
      color: #455468;
    }
#seoAnalyzerApp .form-grid {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
      gap: 16px;
    }
#seoAnalyzerApp .field label {
      display: block;
      margin-bottom: 7px;
      font-weight: 700;
      color: var(--primary-dark);
    }
#seoAnalyzerApp .field label span {
      font-weight: 400;
      color: var(--muted);
    }
#seoAnalyzerApp input {
      width: 100%;
      min-height: 48px;
      border: 1px solid #b9c6d2;
      border-radius: 6px;
      padding: 11px 13px;
      font: inherit;
      color: var(--text);
      background: #fff;
    }
#seoAnalyzerApp input:focus {
      outline: 3px solid rgba(36, 76, 124, .14);
      border-color: var(--primary);
    }
#seoAnalyzerApp .actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-top: 18px;
    }
#seoAnalyzerApp button {
      border: 0;
      border-radius: 6px;
      min-height: 46px;
      padding: 10px 18px;
      font: inherit;
      font-weight: 750;
      cursor: pointer;
    }
#seoAnalyzerApp .button-primary {
      color: #fff;
      background: var(--primary);
    }
#seoAnalyzerApp .button-primary:hover { background: var(--primary-dark); }
#seoAnalyzerApp .button-primary:disabled { opacity: .58; cursor: progress; }
#seoAnalyzerApp .button-secondary {
      color: var(--primary-dark);
      background: #edf3f8;
      border: 1px solid #cbd7e2;
    }
#seoAnalyzerApp .hint {
      margin: 0;
      font-size: .9rem;
      color: var(--muted);
    }
#seoAnalyzerApp .loading,
#seoAnalyzerApp .alert {
      display: none;
      margin-top: 20px;
      border-radius: 7px;
      padding: 15px 17px;
    }
#seoAnalyzerApp .loading {
      background: #f4f8fb;
      border: 1px solid #d5e0e9;
      color: #536579;
    }
#seoAnalyzerApp .alert {
      background: #fff5f5;
      border: 1px solid #feb2b2;
      color: #9b2c2c;
    }
#seoAnalyzerApp .spinner {
      display: inline-block;
      width: 18px;
      height: 18px;
      margin-right: 9px;
      border: 3px solid #ced9e2;
      border-top-color: var(--accent);
      border-radius: 50%;
      vertical-align: -4px;
      animation: spin .8s linear infinite;
    }
@keyframes spin{ to { transform: rotate(360deg); } }
#seoAnalyzerApp #results { display: none; margin-top: 26px; }
#seoAnalyzerApp .score-panel {
      display: grid;
      grid-template-columns: 160px minmax(0, 1fr);
      gap: 22px;
      align-items: center;
      padding: 22px;
      border-radius: 10px;
      background: var(--primary-dark);
      color: #fff;
    }
#seoAnalyzerApp .score-number {
      font-size: 3rem;
      line-height: 1;
      font-weight: 850;
    }
#seoAnalyzerApp .score-caption {
      margin-top: 7px;
      font-size: .88rem;
      opacity: .82;
    }
#seoAnalyzerApp .score-title {
      margin-bottom: 9px;
      font-size: 1.1rem;
      font-weight: 750;
    }
#seoAnalyzerApp .score-track {
      height: 18px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.18);
    }
#seoAnalyzerApp .score-fill {
      width: 0;
      height: 100%;
      border-radius: inherit;
      transition: width .5s ease;
    }
#seoAnalyzerApp .score-summary {
      margin: 10px 0 0;
      opacity: .9;
    }
#seoAnalyzerApp .stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
    }
#seoAnalyzerApp .stat {
      padding: 15px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #fff;
    }
#seoAnalyzerApp .stat-value {
      display: block;
      font-size: 1.45rem;
      font-weight: 800;
      color: var(--primary-dark);
    }
#seoAnalyzerApp .stat-label {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: .82rem;
    }
#seoAnalyzerApp .section {
      margin-top: 20px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: #fff;
      overflow: hidden;
    }
#seoAnalyzerApp .section h2 {
      margin: 0;
      padding: 15px 18px;
      background: #eef3f7;
      color: var(--primary-dark);
      font-size: 1.05rem;
    }
#seoAnalyzerApp .check-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      padding: 18px;
    }
#seoAnalyzerApp .check {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      min-width: 0;
      padding: 14px;
      border: 1px solid #e8edf1;
      border-radius: 8px;
      background: #fff;
    }
#seoAnalyzerApp .check-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: .78rem;
      font-weight: 900;
      margin-top: 2px;
    }
#seoAnalyzerApp .status-pass .check-icon { background: var(--success); }
#seoAnalyzerApp .status-warn .check-icon { background: var(--warning); }
#seoAnalyzerApp .status-fail .check-icon { background: var(--error); }
#seoAnalyzerApp .status-info .check-icon { background: var(--info); }
#seoAnalyzerApp .check-name {
      font-weight: 720;
      color: #26384b;
    }
#seoAnalyzerApp .check-detail {
      margin-top: 3px;
      color: var(--muted);
      font-size: .9rem;
      overflow-wrap: anywhere;
    }
#seoAnalyzerApp .check-points {
      white-space: nowrap;
      color: var(--muted);
      font-size: .82rem;
      font-variant-numeric: tabular-nums;
    }
#seoAnalyzerApp .outline {
      width: 100%;
      border-collapse: collapse;
      font-size: .9rem;
    }
#seoAnalyzerApp .outline th,
#seoAnalyzerApp .outline td {
      padding: 11px 12px;
      border-bottom: 1px solid #e7edf2;
      text-align: left;
      vertical-align: top;
      color: var(--text) !important;
      background: #fff;
    }
#seoAnalyzerApp .outline th {
      color: var(--primary-dark) !important;
      background: #f4f7fa;
    }
#seoAnalyzerApp .outline td:nth-child(2) {
      color: #1f2937 !important;
      font-weight: 600;
    }
#seoAnalyzerApp .outline tr:last-child td { border-bottom: 0; }
#seoAnalyzerApp .level {
      display: inline-block;
      min-width: 34px;
      font-weight: 800;
      color: var(--primary);
    }
#seoAnalyzerApp .source-note {
      margin-top: 18px;
      padding: 13px 15px;
      border-left: 4px solid var(--accent);
      background: #f7faee;
      color: #4f5f37;
      font-size: .9rem;
    }
#seoAnalyzerApp .analysis-heading {
      margin: 0 0 16px;
      color: var(--primary-dark);
      font-size: 1.35rem;
    }
#seoAnalyzerApp .analysis-divider {
      margin-top: 34px;
      padding-top: 28px;
      border-top: 3px solid var(--primary);
    }
#seoAnalyzerApp .analysis-divider > h2 {
      margin: 0 0 8px;
      color: var(--primary-dark);
      font-size: 1.45rem;
    }
#seoAnalyzerApp .analysis-divider > p {
      margin: 0 0 18px;
      color: var(--muted);
    }
#seoAnalyzerApp .target-note {
      margin-top: 16px;
      padding: 13px 15px;
      border-left: 4px solid var(--accent);
      background: #f7faee;
      overflow-wrap: anywhere;
    }
#seoAnalyzerApp .details-heading {
      margin: 30px 0 8px;
      color: var(--primary-dark);
      font-size: 1.25rem;
    }
#seoAnalyzerApp .detail-card {
      margin-top: 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }
#seoAnalyzerApp .detail-card h3 {
      margin: 0;
      padding: 13px 15px;
      background: #f5f8fa;
      color: var(--primary-dark);
      font-size: 1rem;
    }
#seoAnalyzerApp .detail-card table {
      width: 100%;
      border-collapse: collapse;
      font-size: .88rem;
    }
#seoAnalyzerApp .detail-card th,
#seoAnalyzerApp .detail-card td {
      padding: 10px 12px;
      border-bottom: 1px solid #e7edf2;
      text-align: left;
      vertical-align: top;
      overflow-wrap: anywhere;
    }
#seoAnalyzerApp .detail-card th {
      background: #fafcfd;
      color: var(--primary-dark);
    }
#seoAnalyzerApp .detail-card tr:last-child td { border-bottom: 0; }
#seoAnalyzerApp .detail-link {
      color: var(--primary);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
#seoAnalyzerApp .status-text {
      white-space: nowrap;
      color: var(--muted);
      font-size: .82rem;
    }
#seoAnalyzerApp .limits {
      margin-top: 24px;
      padding: 14px 16px;
      border: 1px solid #d5e0e9;
      border-radius: 8px;
      background: #f4f8fb;
      color: #536579;
      font-size: .9rem;
    }
#seoAnalyzerApp .alert.partial {
      background: #fffaf0;
      border-color: #f6ad55;
      color: #9c4221;
    }
@media (max-width: 760px){
#seoAnalyzerApp .page { width: min(100% - 20px, 1180px); margin-top: 24px; }
#seoAnalyzerApp .form-grid,
#seoAnalyzerApp .score-panel { grid-template-columns: 1fr; }
#seoAnalyzerApp .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#seoAnalyzerApp .check-list { grid-template-columns: 1fr; padding: 14px; }
#seoAnalyzerApp .check { grid-template-columns: 24px minmax(0, 1fr); }
#seoAnalyzerApp .check-points,
#seoAnalyzerApp .status-text { grid-column: 2; }
#seoAnalyzerApp .outline { min-width: 700px; }
#seoAnalyzerApp .table-wrap { overflow-x: auto; }
}