:root {
  --bg:    #0f1117;
  --s1:    #1a1d27;
  --s2:    #222535;
  --bd:    #2d3148;
  --acc:   #6366f1;
  --acc2:  #818cf8;
  --green: #22c55e;
  --amber: #f59e0b;
  --red:   #ef4444;
  --text:  #e2e8f0;
  --muted: #94a3b8;
  --r:     8px;
}

/* ---- BASE ---- */
.tcp-wrap * { box-sizing:border-box; }
.tcp-wrap { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--text); max-width:1300px; padding:20px 20px 60px; }

/* ---- HEADER ---- */
.tcp-header { display:flex; align-items:center; justify-content:space-between; background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); padding:16px 20px; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.tcp-logo { display:flex; align-items:center; gap:10px; }
.tcp-logo-icon { font-size:24px; }
.tcp-logo h1 { font-size:18px; font-weight:700; color:#fff; margin:0 0 1px; }
.tcp-logo p  { color:var(--muted); margin:0; font-size:12px; }
.tcp-header-meta { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.tcp-badge { padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.tcp-badge-amazon { background:#92400e22; color:#fbbf24; border:1px solid #92400e55; }
.tcp-badge-niche  { background:#1e3a5f22; color:var(--acc2); border:1px solid #1e40af44; }

/* ---- NOTICES ---- */
.tcp-notice { padding:10px 16px; border-radius:var(--r); margin-bottom:12px; font-size:13px; font-weight:500; }
.tcp-notice.success { background:#14532d; color:#bbf7d0; border:1px solid #166534; }
.tcp-notice.error   { background:#7f1d1d; color:#fecaca; border:1px solid #b91c1c; }
.tcp-notice.info    { background:#1e3a8a; color:#bfdbfe; border:1px solid #1d4ed8; }
.tcp-loader { display:inline-block; width:13px; height:13px; border:2px solid #334155; border-top-color:var(--acc); border-radius:50%; animation:spin .6s linear infinite; vertical-align:middle; margin-right:5px; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes slideInRight { from { transform:translateX(400px); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* ---- PANELS ---- */
.tcp-panel { background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); margin-bottom:12px; overflow:hidden; }
.tcp-panel-header { display:flex; align-items:center; justify-content:space-between; padding:11px 18px; border-bottom:1px solid var(--bd); background:var(--s2); }
.tcp-panel-header h2 { margin:0; font-size:14px; font-weight:700; color:#fff; }
.tcp-panel-body { padding:16px 18px; }

/* ---- BUTTONS ---- */
.tcp-btn { display:inline-flex; align-items:center; justify-content:center; padding:7px 16px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:all .12s; white-space:nowrap; line-height:1; }
.tcp-btn:disabled { opacity:.45; cursor:not-allowed; }
.tcp-btn-primary { background:var(--acc); color:#fff; padding:9px 20px; font-size:14px; }
.tcp-btn-primary:hover:not(:disabled) { background:#4f46e5; color:#fff; }
.tcp-btn-sm { background:var(--s2); color:var(--acc2); border:1px solid var(--bd); padding:5px 12px; font-size:12px; }
.tcp-btn-sm:hover:not(:disabled) { border-color:var(--acc); }
.tcp-btn-pub { background:var(--green); color:#fff; width:100%; margin-bottom:5px; padding:8px 12px; }
.tcp-btn-pub:hover:not(:disabled) { background:#16a34a; }
.tcp-btn-dft { background:#0f4c75; color:#bae6fd; border:1px solid #0369a155; width:100%; padding:8px 12px; }
.tcp-btn-dft:hover:not(:disabled) { background:#0c3d5e; }
.tcp-btn-addprod { background:transparent; border:1px solid #a16207; color:#fbbf24; padding:5px 10px; font-size:11px; border-radius:5px; cursor:pointer; width:100%; margin-top:4px; }
.tcp-btn-addprod:hover { background:#78350f22; }
.tcp-btn-addext  { background:transparent; border:1px solid #0369a1; color:#7dd3fc; padding:5px 10px; font-size:11px; border-radius:5px; cursor:pointer; width:100%; margin-top:4px; }
.tcp-btn-addext:hover { background:#0c4a6e22; }
.tcp-done-badge { font-size:12px; color:var(--green); }
.tcp-done-badge a { color:var(--acc2); margin-left:4px; }

/* ---- INPUTS ---- */
.tcp-input { background:var(--s2); border:1px solid var(--bd); color:var(--text); border-radius:6px; padding:8px 12px; font-size:13px; width:100%; }
.tcp-input:focus { outline:none; border-color:var(--acc); }
.tcp-input-lg { background:#fff; color:#111; border:1px solid #d1d5db; border-radius:6px; padding:10px 14px; font-size:15px; width:100%; }
.tcp-input-lg:focus { outline:none; border-color:var(--acc); }
.tcp-input-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tcp-input-row .tcp-input-lg { flex:1; min-width:180px; }
select.tcp-input option { background:var(--s1); }

/* ---- AI SELECTS ---- */
.tcp-ai-select-bar { background:var(--s2); border:1px solid var(--bd); color:var(--text); border-radius:6px; padding:8px 12px; font-size:13px; font-weight:600; cursor:pointer; flex-shrink:0; }
.tcp-ai-select { background:var(--s2); border:1px solid var(--bd); color:var(--text); border-radius:5px; padding:6px 8px; font-size:11px; font-weight:600; cursor:pointer; width:100%; }
.tcp-kw-ai-sel { width:100%; margin-top:4px; }

/* ---- TYPE SELECTOR ---- */
.tcp-type-selector { display:flex; gap:4px; flex-shrink:0; flex-wrap:wrap; }
.tcp-type-btn { background:var(--s2); border:1px solid var(--bd); color:var(--muted); padding:7px 13px; border-radius:6px; cursor:pointer; font-size:12px; font-weight:600; transition:all .12s; white-space:nowrap; }
.tcp-type-btn.active { background:var(--acc); color:#fff; border-color:var(--acc); }
.tcp-type-btn:hover:not(.active) { border-color:var(--acc); color:var(--acc2); }

/* ---- RESULT ROWS ---- */
.tcp-result-row { display:flex; gap:14px; align-items:flex-start; padding:14px 18px; border-bottom:1px solid var(--bd); }
.tcp-result-row:last-of-type { border-bottom:none; }
.tcp-result-row:hover { background:var(--s2); }
.tcp-row-primary  { border-left:3px solid var(--acc); }
.tcp-row-longtail { border-left:3px solid #06b6d4; }
.tcp-row-related  { border-left:3px solid #8b5cf6; }
.tcp-result-main { flex:1; min-width:0; }
.tcp-result-top { display:flex; align-items:center; gap:6px; margin-bottom:7px; flex-wrap:wrap; }
.tcp-row-badge { padding:2px 7px; border-radius:3px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.tcp-badge-primary  { background:#312e8133; color:var(--acc2); }
.tcp-badge-longtail { background:#0e749033; color:#67e8f9; }
.tcp-badge-related  { background:#4c1d9533; color:#d8b4fe; }
.tcp-row-type-lbl { font-size:11px; color:var(--muted); }
.tcp-slug-code { font-size:10px; color:#64748b; background:var(--s2); padding:1px 6px; border-radius:3px; font-family:monospace; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle; }
.tcp-result-title { font-size:14px; font-weight:700; color:#fff; margin:0 0 4px; padding:3px 6px; border-radius:4px; border:1px solid transparent; cursor:text; line-height:1.4; }
.tcp-result-title:hover { border-color:var(--bd); }
.tcp-result-title:focus { outline:none; border-color:var(--acc); background:var(--s2); }
.tcp-result-meta { font-size:12px; color:var(--muted); margin-bottom:4px; padding:2px 6px; border-radius:4px; border:1px solid transparent; cursor:text; line-height:1.4; }
.tcp-result-meta:hover { border-color:var(--bd); }
.tcp-result-meta:focus { outline:none; border-color:var(--acc); background:var(--s2); }
.tcp-result-kw { font-size:11px; color:#475569; }
.tcp-result-kw em { color:#64748b; font-style:normal; }
.tcp-result-actions { display:flex; flex-direction:column; gap:4px; min-width:160px; flex-shrink:0; padding-top:2px; }

/* ---- PROGRESS ---- */
.tcp-row-prog { margin-top:7px; }
.tcp-pbar-wrap { height:4px; background:var(--bd); border-radius:2px; overflow:hidden; margin-bottom:4px; }
.tcp-pbar { height:100%; width:2%; background:var(--acc); border-radius:2px; transition:width .5s,background .3s; }
.tcp-pmsg { font-size:11px; color:var(--muted); }
.tcp-pmsg a { color:var(--acc2); }

/* ---- PRODUCT LINK PANELS ---- */
.tcp-addprod-panel, .tcp-addext-panel { background:#111422; border-top:1px solid var(--bd); }
.tcp-addprod-inner { padding:12px 18px; }
.tcp-addprod-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:12px; font-weight:600; color:var(--muted); }
.tcp-ap-list { display:flex; flex-direction:column; gap:8px; }
.tcp-ap-row { display:flex; gap:8px; align-items:center; }
.tcp-ap-row-num { background:var(--acc); color:#fff; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.tcp-ext-row .tcp-ap-row-num { background:#0369a1; }
.tcp-ap-row-fields { display:flex; gap:6px; flex:1; }
.tcp-ap-row-fields .tcp-input { flex:1; padding:6px 10px; font-size:12px; }
.tcp-ap-remove { background:none; border:none; color:var(--red); font-size:16px; cursor:pointer; padding:0 4px; flex-shrink:0; }

/* ---- KW DETAILS ---- */
.tcp-kw-details { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; padding:14px 18px; background:var(--s2); border-top:1px solid var(--bd); }
.tcp-detail-col h4 { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:0 0 7px; }
.tcp-detail-col ul { margin:0; padding-left:14px; }
.tcp-detail-col li { font-size:12px; color:var(--text); margin-bottom:3px; }
.tcp-tag { display:inline-block; background:#1e3a8a22; color:#93c5fd; padding:2px 6px; border-radius:3px; font-size:11px; margin:2px; }

/* ---- POSTS TABLE ---- */
.tcp-posts-table, .tcp-articles-table { width:100%; border-collapse:collapse; font-size:13px; }
.tcp-posts-table th, .tcp-articles-table th { background:var(--s2); padding:8px 14px; text-align:left; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--bd); }
.tcp-posts-table td, .tcp-articles-table td { padding:9px 14px; border-bottom:1px solid var(--bd); vertical-align:middle; }
.tcp-posts-table tr:last-child td { border-bottom:none; }
.tcp-posts-table tr:hover td { background:var(--s2); }
.tcp-post-tc a { color:var(--text); }
.tcp-post-tc a:hover { color:var(--acc2); }
.tcp-live      { color:var(--green); font-weight:700; font-size:11px; }
.tcp-draft-lbl { color:var(--amber); font-weight:700; font-size:11px; }
.tcp-status-live  { color:var(--green); font-weight:700; font-size:12px; }
.tcp-status-draft { color:var(--amber); font-weight:700; font-size:12px; }
.tcp-muted-sm  { color:var(--muted); font-size:12px; }
.tcp-tbl-link  { color:var(--acc2); font-size:12px; font-weight:600; margin-right:6px; }
.tcp-tbl-green { color:#86efac; }
.tcp-muted { color:var(--muted); font-size:13px; }

/* ---- SETTINGS ---- */
.tcp-settings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-bottom:14px; }
.tcp-settings-section { background:var(--s2); border:1px solid var(--bd); border-radius:var(--r); padding:14px 16px; }
.tcp-settings-section h3 { font-size:12px; font-weight:700; color:#fff; margin:0 0 10px; text-transform:uppercase; letter-spacing:.04em; }
.tcp-settings-section h3 em { color:var(--muted); text-transform:none; font-style:normal; font-weight:400; }
.tcp-field { margin-bottom:10px; }
.tcp-field label { display:block; font-size:11px; font-weight:600; color:var(--muted); margin-bottom:4px; }
.tcp-help { font-size:11px; color:var(--muted); margin:3px 0 0; }
.tcp-help a { color:var(--acc2); }
.req { color:var(--red); }
.tcp-settings-footer { display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--bd); }
.tcp-inline-success { color:var(--green); font-size:12px; font-weight:600; }
.tcp-status-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; margin-bottom:12px; }
.tcp-status-item { display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--s2); border:1px solid var(--bd); border-radius:var(--r); }
.tcp-status-item.connected { border-color:#166534; }
.tcp-status-item.missing   { border-color:#991b1b; }
.tcp-status-item.warning   { border-color:#92400e; }
.tcp-status-dot { width:8px; height:8px; border-radius:50%; background:var(--muted); flex-shrink:0; }
.connected .tcp-status-dot { background:var(--green); }
.missing   .tcp-status-dot { background:var(--red); }
.warning   .tcp-status-dot { background:var(--amber); }
.tcp-status-item strong { display:block; font-size:12px; color:#fff; }
.tcp-status-item span   { font-size:11px; color:var(--muted); }
.tcp-test-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.tcp-ok  { color:var(--green); font-size:12px; }
.tcp-err { color:var(--red); font-size:12px; }

/* ---- KEYWORDS MANAGER ---- */
.tcp-kw-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:768px) { .tcp-kw-grid { grid-template-columns:1fr; } }
.tcp-kw-queue-panel { background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); overflow:hidden; }
.tcp-kw-queue-hdr { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-bottom:1px solid var(--bd); }
.tcp-kw-queue-hdr h3 { margin:0; font-size:14px; font-weight:700; color:var(--text); }
.tcp-kw-table { width:100%; border-collapse:collapse; }
.tcp-kw-table th { padding:8px 12px; text-align:left; font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--bd); }
.tcp-kw-table td { padding:10px 12px; font-size:13px; color:var(--text); border-bottom:1px solid #1e2235; vertical-align:top; }
.tcp-kw-table tr:last-child td { border-bottom:none; }
.tcp-kw-type-lbl { background:var(--s3,#2a2d3e); color:var(--muted); padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
.tcp-status-pending { color:var(--amber); font-weight:600; font-size:12px; }
.tcp-status-running { color:var(--acc2); font-weight:600; font-size:12px; }
.tcp-status-done    { color:var(--green); font-weight:600; font-size:12px; }
.tcp-status-error   { color:var(--red);   font-weight:600; font-size:12px; }
.tcp-kw-del { background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; padding:0; }
.tcp-kw-del:hover { color:var(--red); }
.tcp-import-box { border:2px dashed var(--bd); border-radius:var(--r); padding:28px 20px; text-align:center; color:var(--muted); cursor:pointer; transition:all .2s; }
.tcp-import-box:hover, .tcp-import-box.dragover { border-color:var(--acc); color:var(--acc2); }
.tcp-kw-ext-row .tcp-ap-row-num { background:#0369a1; }

/* ---- AUDIT ---- */
.tcp-audit-top { display:flex; gap:16px; align-items:flex-start; margin-bottom:18px; flex-wrap:wrap; }
.tcp-score-circle { display:flex; flex-direction:column; align-items:center; justify-content:center; width:84px; height:84px; border-radius:50%; border:4px solid; flex-shrink:0; }
.score-great { color:var(--green); border-color:var(--green); }
.score-ok    { color:var(--amber); border-color:var(--amber); }
.score-poor  { color:var(--red);   border-color:var(--red);   }
.tcp-score-n { font-size:24px; font-weight:800; line-height:1; }
.tcp-score-g { font-size:12px; font-weight:700; }
.tcp-score-bars { flex:1; min-width:180px; display:flex; flex-direction:column; gap:7px; }
.tcp-sbar-row { display:flex; align-items:center; gap:8px; font-size:12px; }
.tcp-sbar-row > span:first-child { width:70px; color:var(--muted); flex-shrink:0; }
.tcp-sbar-bg   { flex:1; height:7px; background:var(--bd); border-radius:3px; overflow:hidden; }
.tcp-sbar-fill { height:100%; border-radius:3px; transition:width .5s; }
.bar-good { background:var(--green); }
.bar-ok   { background:var(--amber); }
.bar-poor { background:var(--red); }
.tcp-sbar-val { width:30px; text-align:right; font-size:11px; color:var(--muted); }
.tcp-fixes-box { background:var(--s2); border:1px solid var(--bd); border-radius:var(--r); padding:12px 16px; margin-bottom:14px; }
.tcp-fixes-box h3 { font-size:13px; font-weight:700; color:#fff; margin:0 0 8px; }
.tcp-fix { display:flex; align-items:flex-start; gap:8px; padding:5px 0; border-bottom:1px solid var(--bd); font-size:12px; color:var(--text); }
.tcp-fix:last-child { border-bottom:none; }
.tcp-fix-n { width:20px; height:20px; border-radius:50%; background:var(--acc); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tcp-audit-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-bottom:14px; }
.tcp-acard { border-radius:var(--r); padding:12px; border:1px solid var(--bd); }
.ac-good { background:#14532d11; border-color:#166534; }
.ac-ok   { background:#78350f11; border-color:#92400e; }
.ac-poor { background:#7f1d1d11; border-color:#991b1b; }
.tcp-acard-hd { display:flex; justify-content:space-between; margin-bottom:6px; font-size:12px; }
.tcp-acard-hd strong { color:#fff; }
.tcp-acard-hd span   { color:var(--acc2); font-weight:700; }
.tcp-issue { font-size:11px; color:#fca5a5; margin:2px 0; }
.tcp-sugg  { font-size:11px; color:#86efac; margin:2px 0; }
.tcp-audit-suggest { display:flex; gap:10px; flex-wrap:wrap; }
.tcp-sug-box { background:var(--s2); border:1px solid var(--bd); border-radius:var(--r); padding:10px 14px; flex:1; min-width:200px; }
.tcp-sug-box label { display:block; font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; margin-bottom:4px; }
.tcp-sug-box p { margin:0; font-size:12px; color:var(--text); }

/* ================================================================
   FRONTEND: Product Card
   ================================================================ */
.tcp-product-card {
  display:flex; gap:20px; align-items:flex-start;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:20px 20px 20px 56px; margin:28px 0;
  box-shadow:0 1px 4px rgba(0,0,0,.06); position:relative;
}
.tcp-prod-rank {
  position:absolute; top:16px; left:16px;
  background:#D97757; color:#fff; width:30px; height:30px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px;
}
.tcp-prod-img-wrap { flex-shrink:0; width:160px; }
.tcp-prod-img-wrap img { width:160px; height:160px; object-fit:contain; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:8px; display:block; }
.tcp-prod-no-img { width:160px; height:160px; display:flex; align-items:center; justify-content:center; background:#f3f4f6; border:1px dashed #d1d5db; border-radius:8px; color:#9ca3af; font-size:12px; text-align:center; text-decoration:none; }
.tcp-prod-body { flex:1; min-width:0; }
.tcp-prod-title { font-size:18px; font-weight:700; margin:0 0 8px; line-height:1.35; }
.tcp-prod-title a { color:#111827; text-decoration:none; }
.tcp-prod-title a:hover { color:#D97757; }
.tcp-prod-meta { display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }


.tcp-pros-cons { display:flex; gap:24px; margin:10px 0 14px; flex-wrap:wrap; }
.tcp-pros, .tcp-cons { flex:1; min-width:140px; }
.tcp-pros > strong { color:#15803d; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:8px; }
.tcp-cons > strong { color:#dc2626; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:8px; }
.tcp-pros ul, .tcp-cons ul, ul.tcp-pros-list, ul.tcp-cons-list { list-style:none; padding:0; margin:0; }
ul.tcp-pros-list li, .tcp-pros ul li { padding-left:18px; position:relative; font-size:13px; line-height:1.4; color:#374151; margin-bottom:8px; }
ul.tcp-pros-list li::before, .tcp-pros ul li::before { content:"✓"; position:absolute; left:0; top:0; color:#15803d; font-weight:700; }
ul.tcp-cons-list li, .tcp-cons ul li { padding-left:18px; position:relative; font-size:13px; line-height:1.4; color:#6b7280; margin-bottom:8px; }
ul.tcp-cons-list li::before, .tcp-cons ul li::before { content:"✗"; position:absolute; left:0; top:0; color:#dc2626; font-weight:700; }
ul.tcp-pros-list li:last-child, ul.tcp-cons-list li:last-child,
.tcp-pros ul li:last-child, .tcp-cons ul li:last-child { margin-bottom:0; }
.tcp-amz-btn-orange, a.tcp-amz-btn-orange, .tcp-amz-btn, a.tcp-amz-btn { display:block; width:260px; margin:12px auto 0; background:#D97757 !important; color:#fff !important; padding:12px 24px; border-radius:7px; font-weight:700; font-size:14px; text-decoration:none !important; text-align:center !important; line-height:1.2; white-space:nowrap; box-sizing:border-box; }
.tcp-amz-btn-orange:hover, .tcp-amz-btn:hover { background:#c4664a !important; }
/* Secondary affiliate CTA (custom label + URL) — sits beside the Amazon button */
.tcp-cta-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.tcp-cta-row .tcp-amz-btn { margin:0 !important; }
.tcp-cta2-btn, a.tcp-cta2-btn { display:block; width:260px; margin:0; background:#1f2937 !important; color:#fff !important; padding:12px 24px; border-radius:7px; font-weight:700; font-size:14px; text-decoration:none !important; text-align:center !important; line-height:1.2; white-space:nowrap; box-sizing:border-box; border:2px solid #1f2937 !important; }
.tcp-cta2-btn:hover, a.tcp-cta2-btn:hover { background:#111827 !important; }
.tcp-amz-disc { display:none !important; }
p.tcp-best-for { background:#fff8f0; border-left:3px solid #D97757; padding:8px 12px; border-radius:0 6px 6px 0; font-size:14px; color:#374151; margin:8px 0 14px; }
p.tcp-best-for strong { color:#D97757; }
.tcp-blog-card { padding-left:20px; }
.tcp-blog-card .tcp-prod-rank { display:none; }
.tcp-blog-card .tcp-prod-img-wrap, .tcp-blog-card .tcp-prod-img-wrap img { width:100px; height:100px; }
@media (max-width:640px) {
  .tcp-product-card {
    flex-direction:column !important;
    padding:16px !important;
    margin:20px 0 !important;
  }
  .tcp-prod-rank {
    position:static !important;
    margin-bottom:10px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .tcp-prod-img-wrap {
    width:100% !important;
    max-width:220px !important;
    margin:0 auto 14px !important;
  }
  .tcp-prod-img-wrap img {
    width:100% !important;
    height:auto !important;
  }
  .tcp-prod-title { font-size:17px !important; text-align:left !important; }
  .tcp-pros-cons {
    flex-direction:column !important;
    gap:14px !important;
  }
  .tcp-pros, .tcp-cons { width:100% !important; min-width:0 !important; }
  .tcp-amz-btn-orange, .tcp-amz-btn {
    width:100% !important;
    box-sizing:border-box !important;
  }
  .tcp-cta-row { flex-direction:column !important; gap:8px !important; }
  .tcp-cta2-btn { width:100% !important; box-sizing:border-box !important; }
}

/* ================================================================
   FRONTEND: Comparison Table
   ================================================================ */
.tcp-ct-wrap { margin:16px 0 28px; border-radius:10px; border:1px solid #e5e7eb; overflow:hidden; width:100%; }
.tcp-ct-table { width:100%; border-collapse:collapse; font-size:13px; table-layout:auto; }
.tcp-ct-table thead tr { background:#1e293b; }
.tcp-ct-table thead th { padding:10px 10px; text-align:left; color:#94a3b8; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; border:none; white-space:nowrap; }
.tcp-ct-table tbody tr { background:#fff; border-bottom:1px solid #f1f5f9; }
.tcp-ct-table tbody tr:last-child { border-bottom:none; }
.tcp-ct-table tbody tr:hover { background:#fafafa; }
.tcp-ct-num    { padding:14px 10px 14px 14px; color:#94a3b8; font-weight:700; font-size:13px; width:36px; }
.tcp-ct-name   { padding:14px; font-weight:600; font-size:13px; line-height:1.4; min-width:160px; }
.tcp-ct-name a { color:#111827; text-decoration:none; }
.tcp-ct-name a:hover { color:#D97757; text-decoration:underline; }
.tcp-ct-reason { padding:14px; font-size:12px; color:#6b7280; line-height:1.4; min-width:140px; }


.tcp-ct-buy    { padding:10px 14px; text-align:center; white-space:nowrap; }
.tcp-ct-btn { display:inline-block; background:#D97757; color:#fff !important; padding:8px 16px; border-radius:6px; font-weight:700; font-size:12px; text-decoration:none !important; white-space:nowrap; text-align:center; }
.tcp-ct-btn:hover { background:#c4664a; }
.tcp-comparison-table, .tcp-table-wrap, .tcp-table-btn { display:none !important; }

/* ---- Comparison table — mobile responsive (stacked card layout) ---- */
@media (max-width: 640px) {
  .tcp-ct-wrap { border:none !important; overflow:visible !important; background:transparent !important; }
  .tcp-ct-table {
    display: block !important;
    width: 100% !important;
    border-collapse: separate !important;
  }
  .tcp-ct-table thead { display:none !important; } /* hide header row — labels come from data-label instead */
  .tcp-ct-table tbody { display:block !important; width:100% !important; }
  .tcp-ct-table tbody tr {
    display: block !important;
    border:1px solid #e5e7eb !important;
    border-radius:10px !important;
    margin:0 0 14px 0 !important;
    padding:16px !important;
    position:relative !important;
    background:#ffffff !important;
    box-shadow:0 1px 3px rgba(0,0,0,.04) !important;
  }
  .tcp-ct-table tbody tr:last-child { margin-bottom:0 !important; }
  .tcp-ct-table tbody td {
    display:block !important;
    padding:5px 0 !important;
    border:none !important;
    min-width:0 !important;
    width:auto !important;
    text-align:left !important;
  }
  .tcp-ct-table tbody td.tcp-ct-num {
    position:absolute !important;
    top:16px !important;
    right:16px !important;
    background:#1e293b !important;
    color:#ffffff !important;
    width:24px !important;
    height:24px !important;
    line-height:24px !important;
    border-radius:50% !important;
    text-align:center !important;
    font-size:11px !important;
    font-weight:700 !important;
    padding:0 !important;
    margin:0 !important;
  }
  .tcp-ct-table tbody td.tcp-ct-name {
    padding-right:36px !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
  }
  .tcp-ct-table tbody td.tcp-ct-reason {
    font-size:13px !important;
  }
  .tcp-ct-table tbody td.tcp-ct-reason::before,
  .tcp-ct-table tbody td.tcp-ct-buy::before {
    content: attr(data-label) !important;
    display:block !important;
    font-size:10px !important;
    font-weight:700 !important;
    color:#94a3b8 !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
    margin-bottom:4px !important;
  }
  .tcp-ct-table tbody td.tcp-ct-buy {
    text-align:left !important;
    margin-top:8px !important;
  }
  .tcp-ct-table tbody td.tcp-ct-buy a.tcp-ct-btn {
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:12px 16px !important;
    font-size:13px !important;
    text-align:center !important;
  }
}

/* ================================================================
   REDDIT COMMUNITY BLOCK
   ================================================================ */
.tcp-reddit-block {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-left: 4px solid #ff4500;
  border-radius: 8px;
  padding: 24px 28px;
  margin: 32px 0;
}
.tcp-reddit-block h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tcp-reddit-block h2::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background: #ff4500;
  border-radius: 50%;
  flex-shrink: 0;
}
.tcp-reddit-block > p { font-size: 14px; color: #6b7280; margin: 0 0 18px; }
.tcp-reddit-quotes { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
blockquote.tcp-reddit-quote {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #ff4500;
  border-radius: 6px;
  padding: 14px 18px;
  margin: 0;
}
blockquote.tcp-reddit-quote p {
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
  margin: 0 0 8px;
  font-style: italic;
}
blockquote.tcp-reddit-quote cite {
  font-size: 12px;
  color: #ff4500;
  font-weight: 600;
  font-style: normal;
}

/* ---- Select dropdown options — fix blending with dark background ---- */
.tcp-wrap select.tcp-input option,
.tcp-wrap select option,
#tcp-keywords select option {
  background: #1a1d27;
  color: #e2e8f0;
}
/* Force white background on the native dropdown list in Chromium */
select.tcp-input,
.tcp-wrap select {
  background-color: #222535 !important;
  color: #e2e8f0 !important;
}

/* ---- Keywords Manager — actions column, dashboard-matched styling ---- */
.tcp-kw-table td:last-child { min-width:220px; padding-top:10px; padding-bottom:10px; }
.tcp-kw-actions-wrap { display:flex; flex-direction:column; gap:6px; }
.tcp-kw-actions-row1 { display:flex; gap:6px; }
.tcp-kw-actions-row1 .tcp-btn-pub,
.tcp-kw-actions-row1 .tcp-btn-dft { width:auto; flex:1; margin-bottom:0; padding:7px 10px; font-size:12px; }
.tcp-kw-ai-sel { margin-top:0; }
.tcp-kw-del { background:transparent; border:1px solid #3f1d1d; color:#f87171; font-size:11px; font-weight:600; cursor:pointer; padding:5px 10px; border-radius:5px; width:100%; margin-top:2px; transition:all .12s; }
.tcp-kw-del:hover { background:#7f1d1d22; border-color:#991b1b; }

/* ---- Schedule button & date picker panel ---- */
.tcp-btn-sched { background:#581c87; color:#e9d5ff; border:1px solid #7c3aed55; width:100%; padding:8px 12px; margin-top:4px; }
.tcp-btn-sched:hover:not(:disabled) { background:#4c1d95; }
.tcp-sched-panel { background:#1a0f2e; border:1px solid #581c8755; border-radius:6px; padding:10px; margin-top:6px; display:flex; flex-direction:column; gap:8px; }
.tcp-sched-panel input[type="datetime-local"] { color-scheme:dark; }
.tcp-btn-sched-go { background:#7c3aed; color:#fff; width:100%; padding:7px 10px; font-size:12px; }
.tcp-btn-sched-go:hover:not(:disabled) { background:#6d28d9; }

/* ---- Keyword Planner ---- */
#planner-action-bar { background:var(--s2); border-top:2px solid var(--acc); box-shadow:0 -4px 12px rgba(0,0,0,.2); }
#planner-action-bar .tcp-panel-body { padding:14px 18px; }
.tcp-kw-checkbox, .tcp-pillar-select-all { width:16px; height:16px; cursor:pointer; accent-color:var(--acc); }
#planner-clusters-list .tcp-result-row:hover { background:var(--s2); }
#planner-niche-summary { line-height:1.6; }

/* ---------------------------------------------------------------
   "Featured in this article" summary block (listicles)
   Scannable at-a-glance list above the article body, linking down
   to each full review. Inherits the theme's font; neutral styling
   so it sits well in light or dark themes.
   --------------------------------------------------------------- */
.tcp-featured-box {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 22px 24px;
  margin: 28px 0;
  background: #fafafa;
}
.tcp-featured-title {
  margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid #111;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
}
.tcp-feat-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #e5e7eb;
  /* Wrap instead of squeezing. Without this the text column was crushed to zero
     width inside narrow theme containers and every word broke one letter per
     line. Viewport media queries cannot catch that, because the viewport can be
     wide while the container is narrow. */
  flex-wrap: wrap;
}
.tcp-feat-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.tcp-feat-thumb {
  flex: 0 0 62px;
  width: 62px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
}
.tcp-feat-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.tcp-feat-noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #ececec; color: #6b7280; font-weight: 700; font-size: 22px; border-radius: 4px;
}
/* min-width:0 previously ALLOWED this column to collapse to nothing. A real
   minimum forces the row to wrap the button onto its own line instead. */
.tcp-feat-info { flex: 1 1 220px; min-width: 190px; }
.tcp-feat-label {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 2px;
  color: #111;
}
.tcp-feat-name {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  color: #2563eb;
  text-decoration: none;
  margin-bottom: 6px;
}
.tcp-feat-name:hover { text-decoration: underline; }
.tcp-feat-name, .tcp-feat-label { overflow-wrap: anywhere; word-break: normal; }
.tcp-featured-box, .tcp-feat-row, .tcp-feat-info, .tcp-feat-thumb { box-sizing: border-box; }
.tcp-feat-jump {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  /* Matches the CTA button colour so it reads as an action, not body text.
     A custom CTA colour overrides this via the inline style in the main file. */
  color: #D97757;
  text-decoration: none;
  cursor: pointer;
}
.tcp-feat-jump:hover { text-decoration: underline; opacity: .85; }
/* Sticky headers otherwise cover the product after the jump, so the link looks
   like it did nothing. */
.tcp-product-card { scroll-margin-top: 90px; }
.tcp-feat-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: auto;   /* stays right-aligned when the row wraps */
}
/* Inherits .tcp-amz-btn (and the CTA colour chosen in Settings) — just smaller. */
.tcp-featured-box a.tcp-feat-btn,
.tcp-feat-btn {
  width: auto !important;
  min-width: 150px;
  margin: 0 !important;
  padding: 11px 20px !important;
  font-size: 13px !important;
}

@media (max-width: 600px) {
  .tcp-featured-box { padding: 16px; }
  .tcp-featured-title { font-size: 21px; }
  .tcp-feat-row { flex-wrap: wrap; gap: 12px; }
  .tcp-feat-meta { width: 100%; order: 3; }
  .tcp-featured-box a.tcp-feat-btn, .tcp-feat-btn { width: 100% !important; }
}

/* ---------------------------------------------------------------
   RECIPE CARD — the block most readers scroll straight to.
   Header colour comes from Settings (inline), everything else here.
   --------------------------------------------------------------- */
.tcp-jump-recipe { margin: 6px 0 18px; text-align: center; }
.tcp-jump-recipe a {
  display: inline-block; font-size: 14px; font-weight: 600; text-decoration: none;
  padding: 8px 16px; border: 1.5px solid currentColor; border-radius: 999px;
}
.tcp-recipe-card {
  border: 1px solid #e3e3e6; border-radius: 12px; overflow: hidden;
  margin: 32px 0; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.tcp-recipe-card-head { padding: 18px 24px; }
.tcp-recipe-card-title { margin: 0 !important; font-size: 24px; line-height: 1.25; font-weight: 700; text-align: center; }
.tcp-recipe-card-body { padding: 20px 24px 26px; }
.tcp-recipe-card-body > p:first-child { margin-top: 0; }
/* The meta line: Prep | Cook | Total | Serves */
.tcp-recipe-card-body > p strong:first-child { white-space: nowrap; }
.tcp-recipe-card-body h3 {
  margin: 24px 0 10px; font-size: 18px; font-weight: 700;
  padding-bottom: 8px; border-bottom: 2px solid #ececf0;
}
.tcp-recipe-card-body ul { margin: 0; padding-left: 22px; }
.tcp-recipe-card-body ul li { margin: 7px 0; line-height: 1.55; }
.tcp-recipe-card-body ol { margin: 0; padding-left: 22px; counter-reset: tcp-step; list-style: none; }
.tcp-recipe-card-body ol li {
  position: relative; margin: 0 0 16px; padding-left: 14px; line-height: 1.6;
  counter-increment: tcp-step;
}
.tcp-recipe-card-body ol li::before {
  content: counter(tcp-step);
  position: absolute; left: -22px; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #ececf0; color: #333; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
@media print {
  .tcp-recipe-card { break-inside: avoid; box-shadow: none; }
  .tcp-jump-recipe { display: none; }
}
@media (max-width: 600px) {
  .tcp-recipe-card-head { padding: 14px 16px; }
  .tcp-recipe-card-title { font-size: 20px; }
  .tcp-recipe-card-body { padding: 16px 16px 20px; }
}

/* ---- Reader recipe ratings ---- */
/* Top: compact read-only average, directly under the (centered) card title */
.tcp-recipe-rating-avg {
  padding: 10px 24px 14px; border-bottom: 1px solid #ececf0; background: #fcfcfd;
}
.tcp-recipe-rating-avg .tcp-rr-summary { justify-content: center; margin: 0; }

/* Bottom: interactive "rate this recipe", placed after the method */
.tcp-recipe-rating {
  margin: 26px 0; padding: 18px 20px; text-align: center;
  border: 1px solid #e3e3e6; border-radius: 12px; background: #fcfcfd;
}
.tcp-rr-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tcp-rr-stars-svg { display: inline-block; vertical-align: middle; }
.tcp-rr-avg { font-weight: 700; font-size: 16px; color: #1f2430; }
.tcp-rr-count { font-size: 13px; color: #6b7280; }
.tcp-rr-input { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.tcp-rr-prompt { font-size: 15px; font-weight: 700; color: #374151; }
.tcp-rr-pick { display: inline-flex; gap: 2px; }
.tcp-rr-star {
  background: none; border: 0; cursor: pointer; padding: 0 3px;
  font-size: 30px; line-height: 1; color: #d1d5db; transition: color .1s ease;
}
.tcp-rr-star:hover, .tcp-rr-star.on { color: #f59e0b; }
.tcp-rr-star:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; border-radius: 4px; }
.tcp-rr-more { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 460px; margin: 4px auto 0; }
.tcp-rr-name, .tcp-rr-text {
  width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 14px; font-family: inherit; box-sizing: border-box; background: #fff;
}
.tcp-rr-text { resize: vertical; }
.tcp-rr-submit {
  align-self: center; background: #f59e0b; color: #1f2430; border: 0;
  padding: 9px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.tcp-rr-submit:hover { background: #d98a08; }
.tcp-rr-submit:disabled { opacity: .6; cursor: default; }
.tcp-rr-msg { font-size: 13px; color: #059669; min-height: 18px; }

.tcp-rr-reviews { margin: 28px 0 8px; }
.tcp-rr-reviews-title { font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.tcp-rr-review-item { padding: 12px 0; border-bottom: 1px solid #ececf0; }
.tcp-rr-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tcp-rr-review-stars { color: #f59e0b; font-size: 15px; letter-spacing: 1px; }
.tcp-rr-review-stars-empty { color: #d1d5db; }
.tcp-rr-review-author { font-weight: 600; font-size: 14px; color: #374151; }
.tcp-rr-review-body { font-size: 15px; line-height: 1.6; color: #333; }
@media (max-width: 600px) {
  .tcp-recipe-rating-avg { padding: 10px 16px 12px; }
  .tcp-recipe-rating { padding: 16px; }
}


/* ==========================================================================
   THEME-PROOF IMAGE SIZING
   Themes (Thrive, Astra, Divi, most page builders) set rules like
   `.entry-content img { width:100%; height:auto; }` at the SAME specificity as
   the plugin's own rules — and their stylesheet loads after this one, so they
   win on load order and product images render at full size. These rules are
   scoped strictly to the plugin's own containers, so nothing else on the site
   is affected.
   ========================================================================== */
.tcp-featured-box .tcp-feat-thumb {
  flex: 0 0 62px !important;
  width: 62px !important;
  height: 72px !important;
  max-width: 62px !important;
}
.tcp-featured-box .tcp-feat-thumb img {
  width: auto !important;
  height: auto !important;
  max-width: 62px !important;
  max-height: 72px !important;
  min-width: 0 !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.tcp-product-card .tcp-prod-img-wrap {
  width: 160px !important;
  max-width: 160px !important;
  flex-shrink: 0 !important;
}
.tcp-product-card .tcp-prod-img-wrap img {
  width: 160px !important;
  height: 160px !important;
  max-width: 160px !important;
  max-height: 160px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
}
.tcp-blog-card .tcp-prod-img-wrap,
.tcp-blog-card .tcp-prod-img-wrap img {
  width: 100px !important;
  height: 100px !important;
  max-width: 100px !important;
  max-height: 100px !important;
}
/* Narrow containers: shrink the thumb rather than letting it dominate the row. */
@media (max-width: 480px) {
  .tcp-product-card .tcp-prod-img-wrap,
  .tcp-product-card .tcp-prod-img-wrap img {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
  }
}