/* ============================================================
   SEO Tools — modern, colour-coded UI
   5 categories (Generators / Content / Developer / Technical /
   Performance), each with its own gradient identity carried from
   the card chip through to the opened tool's header and buttons.
   ============================================================ */

.seot-root {
  padding-top:32px;
  --seot-primary:#3b6ef6;
  --seot-primary-2:#6f93ff;
  --seot-bg:#F6F6FB;
  --seot-card:#fff;
  --seot-border:#e7e6f1;
  --seot-text:#15131f;
  --seot-muted:#6b6880;

  --cat-generators-1:#2E6BFF;  --cat-generators-2:#63C7FF;
  --cat-content-1:#7B5CFA;     --cat-content-2:#B79CFF;
  --cat-developer-1:#05AFC7;   --cat-developer-2:#7BE8E0;
  --cat-technical-1:#05B889;   --cat-technical-2:#4CE0B3;
  --cat-performance-1:#D97706; --cat-performance-2:#FCD34D;

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--seot-text);
  line-height:1.5;
}
.seot-root .seot-name, .seot-root .seot-chip, .seot-root .seot-panel-head h2 {
  font-family:"Sora","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
}

/* ---------- grid ---------- */
.seot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; }

.seot-card {
  position:relative;
  overflow:hidden;
  background:var(--seot-card);
  border:1px solid var(--seot-border);
  border-radius:18px;
  padding:22px 20px 24px;
  cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
a.seot-card { display:block; text-decoration:none; color:inherit; }

.seot-card::before {
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120px 80px at 100% 0%, var(--_c1, transparent) 0%, transparent 70%);
  opacity:.10;
  pointer-events:none;
}
.seot-card::after {
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--_c1), var(--_c2));
}
.seot-card[data-seot-cat="Generators"]  { --_c1:var(--cat-generators-1);  --_c2:var(--cat-generators-2); }
.seot-card[data-seot-cat="Content"]     { --_c1:var(--cat-content-1);     --_c2:var(--cat-content-2); }
.seot-card[data-seot-cat="Developer"]   { --_c1:var(--cat-developer-1);   --_c2:var(--cat-developer-2); }
.seot-card[data-seot-cat="Technical"]   { --_c1:var(--cat-technical-1);   --_c2:var(--cat-technical-2); }
.seot-card[data-seot-cat="Performance"] { --_c1:var(--cat-performance-1); --_c2:var(--cat-performance-2); }

.seot-card:hover {
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:0 18px 36px -14px var(--_c1, rgba(59,110,246,.4));
}

.seot-chip {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:52px; height:28px; padding:0 10px;
  border-radius:9px;
  font-size:11px; font-weight:800; letter-spacing:.04em;
  color:#fff;
  background:linear-gradient(135deg, var(--_c1, var(--seot-primary)), var(--_c2, var(--seot-primary-2)));
}
.seot-cat {
  display:inline-block; margin-left:9px;
  font-size:11px; font-weight:700;
  color:var(--_c1, var(--seot-muted));
  vertical-align:middle;
}
.seot-name { margin:16px 0 0; font-size:16.5px; font-weight:700; line-height:1.3; }

/* ---------- panel (opened tool) ---------- */
.seot-tool-mount { margin-top:24px; }
.seot-root.seot-tool-active .seot-tool-mount { margin-top:0; }

.seot-panel { background:var(--seot-card); border:1px solid var(--seot-border); border-radius:20px; overflow:hidden; box-shadow:0 20px 50px -30px rgba(20,20,40,.25); }
.seot-panel-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 26px; color:#fff;
  background:linear-gradient(120deg, var(--seot-primary), var(--seot-primary-2));
}
.seot-root[data-active-cat="Generators"]  .seot-panel-head { background:linear-gradient(120deg, var(--cat-generators-1), var(--cat-generators-2)); }
.seot-root[data-active-cat="Content"]     .seot-panel-head { background:linear-gradient(120deg, var(--cat-content-1), var(--cat-content-2)); }
.seot-root[data-active-cat="Developer"]   .seot-panel-head { background:linear-gradient(120deg, var(--cat-developer-1), var(--cat-developer-2)); }
.seot-root[data-active-cat="Technical"]   .seot-panel-head { background:linear-gradient(120deg, var(--cat-technical-1), var(--cat-technical-2)); }
.seot-root[data-active-cat="Performance"] .seot-panel-head { background:linear-gradient(120deg, var(--cat-performance-1), var(--cat-performance-2)); }

.seot-panel-head h2 { margin:0; font-size:21px; font-weight:800; letter-spacing:-.01em; }
.seot-back { border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.16); color:#fff; padding:9px 15px; border-radius:10px; cursor:pointer; font-weight:700; font-size:13px; transition:background .15s ease; }
.seot-back:hover { background:rgba(255,255,255,.3); }

.seot-panel-body { padding:24px 26px 28px; }

.seot-field { margin-bottom:14px; }
.seot-field label, .seot-panel-body > label { display:block; font-size:15px; font-weight:800; margin:0 0 7px; color:var(--seot-text); }
.seot-panel input[type=text], .seot-panel input[type=date], .seot-panel textarea, .seot-panel select {
  width:100%; box-sizing:border-box; padding:11px 13px;
  border:1px solid var(--seot-border); border-radius:11px;
  font-size:14px; font-family:inherit; background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.seot-panel input[type=text]:focus, .seot-panel input[type=date]:focus, .seot-panel textarea:focus, .seot-panel select:focus {
  outline:none; border-color:var(--seot-primary); box-shadow:0 0 0 3px rgba(59,110,246,.15);
}
.seot-panel textarea { min-height:100px; resize:vertical; font-family:ui-monospace,Consolas,monospace; font-size:13px; }

.seot-row { display:flex; gap:12px; flex-wrap:wrap; }
.seot-row > * { flex:1; min-width:160px; }

.seot-btn {
  background:linear-gradient(120deg, var(--seot-primary), var(--seot-primary-2));
  color:#fff; border:none; padding:12px 22px; border-radius:11px;
  font-weight:700; cursor:pointer; font-size:14px;
  box-shadow:0 10px 22px -10px rgba(59,110,246,.6);
  transition:transform .12s ease, box-shadow .12s ease;
}
.seot-btn:hover { transform:translateY(-1px); }
.seot-btn.sec { background:var(--seot-bg); color:var(--seot-text); box-shadow:none; border:1px solid var(--seot-border); }

.seot-root[data-active-cat="Generators"]  .seot-btn:not(.sec) { background:linear-gradient(120deg, var(--cat-generators-1), var(--cat-generators-2)); box-shadow:0 10px 22px -10px var(--cat-generators-1); }
.seot-root[data-active-cat="Content"]     .seot-btn:not(.sec) { background:linear-gradient(120deg, var(--cat-content-1), var(--cat-content-2)); box-shadow:0 10px 22px -10px var(--cat-content-1); }
.seot-root[data-active-cat="Developer"]   .seot-btn:not(.sec) { background:linear-gradient(120deg, var(--cat-developer-1), var(--cat-developer-2)); box-shadow:0 10px 22px -10px var(--cat-developer-1); }
.seot-root[data-active-cat="Technical"]   .seot-btn:not(.sec) { background:linear-gradient(120deg, var(--cat-technical-1), var(--cat-technical-2)); box-shadow:0 10px 22px -10px var(--cat-technical-1); }
.seot-root[data-active-cat="Performance"] .seot-btn:not(.sec) { background:linear-gradient(120deg, var(--cat-performance-1), var(--cat-performance-2)); box-shadow:0 10px 22px -10px var(--cat-performance-1); }

.seot-out { margin-top:14px; padding:14px 16px; background:var(--seot-bg); border-radius:12px; font-family:ui-monospace,Consolas,monospace; font-size:13px; white-space:pre-wrap; word-break:break-all; border:1px solid var(--seot-border); max-height:340px; overflow:auto; }

.seot-hint { font-size:12.5px; color:var(--seot-muted); margin-top:8px; }
.seot-hint.bad { color:#DC2626; font-weight:600; }
.seot-subhead { margin:20px 0 10px; padding-top:14px; border-top:1px solid var(--seot-border); font-size:14px; font-weight:800; color:var(--seot-muted); text-transform:uppercase; letter-spacing:.03em; }
.seot-check { display:flex; align-items:center; gap:8px; font-size:13px; margin:10px 0; cursor:pointer; }
.seot-check input[type=checkbox] { width:17px; height:17px; accent-color:var(--seot-primary); cursor:pointer; }

/* ---------- collapsible field groups (Local Business, etc.) ---------- */
.seot-group { border:1px solid var(--seot-border); border-radius:14px; margin-bottom:14px; overflow:hidden; background:#fff; }
.seot-group-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; cursor:pointer; user-select:none;
  background:linear-gradient(180deg, #fbfbfe, #f5f5fb);
  transition:background .15s ease;
}
.seot-group-head:hover { background:#f0f1fb; }
.seot-group-title { font-weight:800; font-size:14.5px; color:var(--seot-text); }
.seot-group-chevron { display:inline-block; font-size:18px; color:var(--seot-muted); transition:transform .2s ease; }
.seot-group.open .seot-group-chevron { transform:rotate(180deg); }
.seot-group-body { padding:0 18px; max-height:0; overflow:hidden; transition:max-height .25s ease, padding .25s ease; }
.seot-group.open .seot-group-body { padding:16px 18px 20px; max-height:none; overflow:visible; }
.seot-group:not(.open) .seot-group-body { padding:0 18px; }

/* ---------- repeatable multi-value chip input ---------- */
.seot-multi { border:1px solid var(--seot-border); border-radius:12px; padding:10px; background:var(--seot-bg); }
.seot-multi-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; min-height:0; }
.seot-multi-list:empty { display:none; }
.seot-chip-tag {
  display:inline-flex; align-items:center; gap:4px;
  background:#fff; border:1px solid var(--seot-border);
  border-radius:20px; padding:5px 6px 5px 12px; font-size:13px; font-weight:600;
}
.seot-chip-x {
  border:none; background:#eee; color:#555; width:18px; height:18px; border-radius:50%;
  font-size:13px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.seot-chip-x:hover { background:#DC2626; color:#fff; }
.seot-multi .seot-row { margin:0; }
.seot-multi .seot-row input { background:#fff; }
.seot-multi .seot-row button { white-space:nowrap; padding:11px 16px; }

/* ---------- FAQ rows: drag handle, remove button, drag states ---------- */
.seot-faq-list { display:flex; flex-direction:column; gap:12px; margin:14px 0; }
.seot-faq-row {
  border:1px solid var(--seot-border); border-radius:14px; padding:14px 16px 16px;
  background:#fff; transition:box-shadow .15s ease, opacity .15s ease, border-color .15s ease;
}
.seot-faq-row.dragging { opacity:.4; }
.seot-faq-row.drag-over { border-color:var(--seot-primary); box-shadow:0 0 0 3px rgba(59,110,246,.15); }
.seot-faq-row-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.seot-drag-handle { cursor:grab; font-size:18px; color:var(--seot-muted); user-select:none; }
.seot-drag-handle:active { cursor:grabbing; }
.seot-faq-row-title { font-weight:800; font-size:14px; flex:1; }
.seot-faq-remove {
  border:none; background:#fee2e2; color:#DC2626; width:26px; height:26px; border-radius:50%;
  font-size:16px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.seot-faq-remove:hover { background:#DC2626; color:#fff; }

/* ---------- Review generator: required fields, validation, stars ---------- */
.seot-required-star { color:#DC2626; font-weight:800; }
.seot-panel input.seot-invalid, .seot-panel textarea.seot-invalid, .seot-panel select.seot-invalid {
  border-color:#DC2626 !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.12) !important;
}
.seot-required-warning {
  display:none; background:#fff7ed; border:1px solid #fdba74; color:#9a3412;
  border-radius:10px; padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:16px;
}
.seot-stars { font-size:20px; letter-spacing:2px; color:#D97706; margin:6px 0 4px; }
.seot-cond-section { margin:14px 0; padding:14px 16px; background:var(--seot-bg); border-radius:12px; border:1px dashed var(--seot-border); }
.seot-cond-section .seot-subhead { margin-top:0; padding-top:0; border-top:none; }

/* ---------- OG Generator: live social previews ---------- */
.seot-social-previews { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:12px 0 18px; }
.seot-prev { border:1px solid var(--seot-border); border-radius:12px; overflow:hidden; background:#fff; }
.seot-prev-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--seot-muted); padding:8px 12px 0; }
.seot-prev-img { width:100%; height:120px; background-size:cover; background-position:center; background-color:#e5e5ef; }
.seot-prev-body { padding:10px 12px 14px; }
.seot-prev-domain { font-size:11px; color:var(--seot-muted); text-transform:uppercase; margin-bottom:3px; }
.seot-prev-title { font-size:14px; font-weight:700; line-height:1.3; margin-bottom:3px; }
.seot-prev-desc { font-size:12.5px; color:var(--seot-muted); line-height:1.4; }
.seot-prev-fb .seot-prev-title { color:#1c1e21; }
.seot-prev-tw .seot-prev-img { border-radius:0; }
.seot-prev-li .seot-prev-body { background:#f3f2ef; }

/* ---------- Whois Lookup: parsed info cards ---------- */
.seot-whois-wrap { display:flex; flex-direction:column; gap:14px; margin:10px 0; }
.seot-whois-card { border:1px solid var(--seot-border); border-radius:12px; padding:14px 16px 6px; background:var(--seot-bg); }
.seot-whois-card h4 { margin:0 0 8px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--seot-muted); }
.seot-whois-row { display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--seot-border); font-size:13.5px; }
.seot-whois-row:last-child { border-bottom:none; }
.seot-whois-label { flex:0 0 150px; font-weight:700; color:var(--seot-muted); }
.seot-whois-value { flex:1; word-break:break-word; }

/* ---------- Page Speed Checker: gauges, tabs, metrics grid ---------- */
.seot-gauge-row { display:flex; flex-wrap:wrap; justify-content:center; gap:28px; margin:18px 0; }
.seot-gauge { display:flex; flex-direction:column; align-items:center; gap:6px; }
.seot-gauge-label { font-size:13px; font-weight:700; color:var(--seot-text); }

.seot-strategy-tabs { display:flex; gap:26px; border-bottom:1px solid var(--seot-border); margin:4px 0 18px; }
.seot-strategy-tab {
  background:none; border:none; border-bottom:3px solid transparent;
  padding:10px 2px; font-size:14px; font-weight:700; color:var(--seot-muted);
  cursor:pointer; margin-bottom:-1px; transition:color .15s ease, border-color .15s ease;
}
.seot-strategy-tab.active { color:var(--seot-primary); border-bottom-color:var(--seot-primary); }
.seot-strategy-tab:hover { color:var(--seot-primary); }

.seot-metric-legend { display:flex; gap:18px; font-size:12px; color:var(--seot-muted); margin:6px 0 14px; flex-wrap:wrap; }
.seot-metric-legend span { display:inline-flex; align-items:center; gap:5px; }

.seot-metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 32px; }
.seot-metric-item { display:flex; justify-content:space-between; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--seot-border); }
.seot-metric-label { font-size:13.5px; color:var(--seot-text); font-weight:600; }
.seot-metric-value { font-size:15px; font-weight:800; }
.seot-metric-mark { font-size:11px; margin-right:2px; }
.seot-metric-mark.ok, .seot-metric-value.ok { color:#0cce6b; }
.seot-metric-mark.warn, .seot-metric-value.warn { color:#ffa400; }
.seot-metric-mark.bad, .seot-metric-value.bad { color:#ff4e42; }

@media (max-width:520px) {
  .seot-metrics-grid { grid-template-columns:1fr; }
  .seot-gauge-row { gap:16px; }
  .seot-gauge svg { width:76px; height:76px; }
}

.seot-table { width:100%; border-collapse:collapse; margin-top:10px; font-size:13px; }
.seot-table tr { border-bottom:1px solid var(--seot-border); }
.seot-table td { padding:8px 6px; word-break:break-all; }

.seot-stat-line { padding:6px 0; font-size:14px; }
.seot-badge { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; font-size:12px; font-weight:800; color:#fff; margin-right:6px; }
.seot-badge.ok { background:#05B889; }
.seot-badge.bad { background:#DC2626; }

.seot-score-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px; margin-top:14px; }
.seot-score-box { text-align:center; padding:18px 10px; border-radius:14px; background:var(--seot-bg); border:1px solid var(--seot-border); }
.seot-score-num { font-size:32px; font-weight:800; }
.seot-score-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--seot-muted); margin-top:4px; }
.seot-score-box.ok .seot-score-num { color:#05B889; }
.seot-score-box.warn .seot-score-num { color:#D97706; }
.seot-score-box.bad .seot-score-num { color:#DC2626; }

.seot-serp { margin-top:16px; padding:18px 20px; background:#fff; border:1px solid var(--seot-border); border-radius:12px; font-family:arial,sans-serif; }
.seot-serp-url { font-size:14px; color:#202124; }
.seot-serp-title { font-size:20px; color:#1a0dab; margin:4px 0 4px; line-height:1.3; }
.seot-serp-desc { font-size:14px; color:#4d5156; line-height:1.5; }

.seot-table th { text-align:left; padding:8px 6px; font-size:12px; text-transform:uppercase; letter-spacing:.02em; color:var(--seot-muted); border-bottom:2px solid var(--seot-border); }
.seot-table td a { color:var(--seot-primary); text-decoration:none; word-break:break-all; }
.seot-table td a:hover { text-decoration:underline; }

.seot-response-chip { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:800; background:#FDECEA; color:#DC2626; }
.seot-response-chip.likely { background:#FEF3E2; color:#D97706; }

.seot-note-box { margin-top:14px; padding:12px 14px; border-radius:10px; background:#FEF9EE; border:1px solid #F5E3C2; font-size:12.5px; color:#8a5a10; line-height:1.5; }

.seot-progress-wrap { margin-top:10px; }
.seot-progress-bar { height:6px; border-radius:4px; background:var(--seot-bg); border:1px solid var(--seot-border); overflow:hidden; }
.seot-progress-fill { height:100%; width:0%; background:linear-gradient(120deg, var(--cat-technical-1), var(--cat-technical-2)); transition:width .3s ease; }

/* ---------- Schema Markup Generator: split form + live preview ---------- */
.seot-schema-toolbar { margin-bottom:18px; }
.seot-schema-split { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:24px; }
.seot-schema-left { min-width:280px; }
.seot-schema-right { min-width:300px; position:sticky; top:20px; align-self:start; height:calc(100vh - 40px); }
.seot-schema-panel { height:100%; display:flex; flex-direction:column; background:#1c1b29; border-radius:14px; padding:16px 18px 18px; box-shadow:0 18px 40px -22px rgba(20,20,40,.5); box-sizing:border-box; }
.seot-schema-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex:0 0 auto; }
.seot-schema-panel-title { font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#a6a4c4; }
.seot-schema-out.seot-out { margin-top:0; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:#e7e6f5; flex:1 1 auto; max-height:none; }
.seot-json-key  { color:#7fb0ff; }
.seot-json-str  { color:#f4a259; }
.seot-json-num  { color:#8fe3b0; }
.seot-json-bool,
.seot-json-null { color:#c792ea; }
.seot-json-tag  { color:#7a7899; }
.seot-schema-actions { margin-top:14px; flex:0 0 auto; }
.seot-schema-panel .seot-btn.sec { background:rgba(255,255,255,.08); color:#e7e6f5; border-color:rgba(255,255,255,.16); }
.seot-schema-panel .seot-btn.sec:hover { background:rgba(255,255,255,.16); }
.seot-schema-panel .seot-btn:not(.sec) { box-shadow:none; }

@media (max-width:860px) {
  .seot-schema-split { grid-template-columns:1fr; }
  .seot-schema-right { position:static; width:100%; height:auto; }
  .seot-schema-out.seot-out { max-height:360px; }
}

.seot-error { color:#c0392b; padding:12px; }
.seot-hub-back { display:inline-flex; align-items:center; gap:6px; margin-bottom:18px; color:var(--seot-primary); font-weight:700; font-size:14px; text-decoration:none; }
.seot-hub-back:hover { text-decoration:underline; }

@media (max-width:480px) {
  .seot-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
  .seot-card { padding:18px 16px 20px; }
  .seot-panel-body, .seot-panel-head { padding-left:18px; padding-right:18px; }
}