/**
 * HandyToolsBox — Tool Page CSS v3
 * Class names match htb-tool-page-v2.php exactly
 */

/* Fonts loaded via wp_enqueue_style in functions.php */

:root {
  --htb-primary: #0f4c81;
  --htb-primary-light: #1a6eb5;
  --htb-accent: #00c9a7;
  --htb-dark: #0d1117;
  --htb-surface: #ffffff;
  --htb-surface-2: #f6f8fc;
  --htb-border: #e2e8f4;
  --htb-text: #1a2035;
  --htb-muted: #64748b;
  --htb-light: #94a3b8;
  --htb-star: #f59e0b;
  --htb-radius: 14px;
  --htb-radius-sm: 8px;
  --htb-shadow: 0 4px 20px rgba(15,76,129,0.10);
  --htb-shadow-lg: 0 8px 40px rgba(15,76,129,0.13);
  --htb-font-d: 'Syne', sans-serif;
  --htb-font-b: 'DM Sans', sans-serif;
}

body .htb-page-wrap, body .htb-page-wrap * { box-sizing:border-box; }

/* Remove Cadence unwanted bullets/icons from HTB lists */
body .htb-feat-item::before, body .htb-feat-item::after { display:none !important; content:none !important; }
body .htb-tips-list li::marker, body .htb-mistakes-list li::marker, body .htb-toc-list li::marker { display:none !important; content:none !important; }
body .htb-content ul, body .htb-content ol { padding-left:0 !important; margin-left:0 !important; list-style:none !important; }

/* BREADCRUMB */
body .htb-breadcrumb { background:#fff; border-bottom:1px solid var(--htb-border); padding:10px 0; width:100%; display:block !important; }
body .htb-bc-inner { max-width:900px; margin:0 auto; padding:0 20px; display:flex !important; align-items:center; gap:6px; font-size:13px; color:var(--htb-muted); flex-wrap:wrap; }
body .htb-bc-inner a { color:var(--htb-primary) !important; text-decoration:none !important; font-weight:500; }
body .htb-bc-sep { color:var(--htb-light); }

/* PAGE WRAP */
body .htb-page-wrap { max-width:900px; margin:0 auto !important; padding:0 20px 60px !important; }

/* HEADER */
body .htb-tool-header { padding:30px 0 22px; text-align:center; }
body .htb-badge { display:inline-flex !important; align-items:center; gap:6px; background:rgba(0,201,167,0.12); color:#007a63 !important; border:1px solid rgba(0,201,167,0.3); border-radius:100px; padding:4px 14px; font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; margin-bottom:12px; }
body .htb-badge::before { content:'●' !important; font-size:8px; display:inline !important; }
body .htb-tool-title { font-family:var(--htb-font-d) !important; font-size:clamp(24px,4vw,36px) !important; font-weight:800 !important; color:var(--htb-dark) !important; line-height:1.2 !important; margin:0 0 10px !important; }
body .htb-tagline { color:var(--htb-muted) !important; font-size:15px !important; max-width:540px; margin:0 auto 10px !important; }
body .htb-quick-rating { display:inline-flex !important; align-items:center; gap:8px; background:#fff; border:1px solid var(--htb-border); border-radius:100px; padding:5px 15px; font-size:13px; margin-top:8px; }
body .htb-qr-stars { color:var(--htb-star) !important; }
body .htb-qr-num { font-family:var(--htb-font-d) !important; font-weight:700; color:var(--htb-text) !important; }
body .htb-qr-cnt { color:var(--htb-muted) !important; font-size:12px; }
body .htb-last-upd { font-size:12px; color:var(--htb-light) !important; margin-top:8px; }

/* TOOL CARD */
body .htb-tool-card { background:#fff !important; border:1px solid var(--htb-border) !important; border-radius:20px !important; box-shadow:var(--htb-shadow-lg) !important; overflow:hidden; width:100%; }
body .htb-tc-head { background:linear-gradient(135deg,var(--htb-primary),var(--htb-primary-light)) !important; padding:15px 22px !important; display:flex !important; align-items:center; gap:10px; }
body .htb-t-icon { width:36px; height:36px; background:rgba(255,255,255,.2); border-radius:10px; display:flex !important; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
body .htb-tc-title { font-family:var(--htb-font-d) !important; font-size:15px !important; font-weight:700 !important; color:#fff !important; }
body .htb-tc-sub { font-size:12px !important; color:rgba(255,255,255,.75) !important; }
body .htb-tc-body { padding:22px !important; }

/* AD ZONES */
body .htb-ad-zone { width:100%; text-align:center; margin:18px 0; overflow:hidden; display:block; }

/* RATING BLOCK */
body .htb-rating-block { background:linear-gradient(135deg,#fffbf0,#fff8e6) !important; border:1.5px solid #f0d98a !important; border-radius:var(--htb-radius); padding:20px 22px; margin-top:20px; width:100%; }
body .htb-rating-header { display:flex !important; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
body .htb-rating-title { font-family:var(--htb-font-d) !important; font-weight:700 !important; font-size:14px !important; color:var(--htb-text) !important; margin-bottom:4px; }
body .htb-rating-sub { font-size:12px !important; color:var(--htb-muted) !important; }
body .htb-emoji-stars { display:flex !important; gap:9px; margin-bottom:12px; flex-wrap:wrap; }
body .htb-emoji-btn { display:flex !important; flex-direction:column; align-items:center; gap:3px; background:#fff !important; border:2px solid var(--htb-border) !important; border-radius:12px; padding:9px 12px; cursor:pointer; font-size:21px; min-width:54px; transition:all .2s; box-shadow:none !important; }
body .htb-emoji-btn span { font-size:10px !important; font-weight:600 !important; color:var(--htb-muted) !important; display:block !important; }
body .htb-emoji-btn:hover, body .htb-emoji-btn.htb-sel { border-color:var(--htb-star) !important; background:#fffbf0 !important; transform:translateY(-2px); }
body .htb-feedback-area { display:none !important; }
body .htb-feedback-area.htb-show { display:block !important; }
body .htb-feedback-area textarea { width:100%; padding:11px 13px; border:2px solid var(--htb-border) !important; border-radius:var(--htb-radius-sm); font-size:13px; resize:none; min-height:78px; outline:none; }
body .htb-feedback-submit { margin-top:9px; padding:9px 18px; background:linear-gradient(135deg,#f59e0b,#fbbf24) !important; color:#fff !important; border:none !important; border-radius:var(--htb-radius-sm); font-weight:700; font-size:13px; cursor:pointer; display:inline-flex !important; align-items:center; gap:6px; }
body .htb-r-thankyou { display:none !important; text-align:center; padding:10px 0 4px; font-size:14px; color:#10b981; font-weight:600; }
body .htb-r-thankyou.htb-show { display:block !important; }
body .htb-r-summary { display:flex !important; align-items:center; gap:12px; padding:12px 0 0; border-top:1px solid #f0d98a; margin-top:14px; }
body .htb-r-big { font-family:var(--htb-font-d) !important; font-weight:800 !important; font-size:34px !important; color:var(--htb-text) !important; line-height:1; }
body .htb-r-stars { color:var(--htb-star) !important; font-size:17px; letter-spacing:2px; }
body .htb-r-cnt { font-size:12px !important; color:var(--htb-muted) !important; margin-top:3px; }

/* BOOKMARK BUTTON */
body .htb-bookmark-btn { display:inline-flex !important; align-items:center; gap:8px; padding:9px 17px; background:#fff !important; border:2px solid var(--htb-border) !important; border-radius:100px; font-size:13px; font-weight:600; color:var(--htb-muted) !important; cursor:pointer; transition:all .22s; white-space:nowrap; }
body .htb-bookmark-btn:hover { border-color:var(--htb-primary) !important; color:var(--htb-primary) !important; background:#f0f6ff !important; }
body .htb-bookmark-btn.htb-bookmarked { border-color:#10b981 !important; color:#10b981 !important; background:#f0fdf4 !important; }

/* CONTENT WRAPPER */
body .htb-content { background:#fff; border:1px solid var(--htb-border); border-radius:20px; padding:34px 38px; margin-top:22px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
@media(max-width:600px){ body .htb-content { padding:22px 16px; } }

/* TOC */
body .htb-toc { background:linear-gradient(135deg,#f0f6ff,#f6f8fc); border:1.5px solid #d0e4ff; border-radius:var(--htb-radius); padding:17px 20px; margin-bottom:28px; }
body .htb-toc-title { font-family:var(--htb-font-d) !important; font-size:12px !important; font-weight:700 !important; color:var(--htb-primary) !important; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; display:block; }
body .htb-toc-list { list-style:none !important; counter-reset:toc; display:grid !important; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:5px; padding:0 !important; margin:0 !important; }
body .htb-toc-list li { counter-increment:toc; list-style:none !important; padding-left:0 !important; }
body .htb-toc-list li::before { display:none !important; content:none !important; }
body .htb-toc-list a { display:flex !important; align-items:center; gap:7px; color:var(--htb-primary-light) !important; text-decoration:none !important; font-size:13px; font-weight:500; padding:3px 0; }
body .htb-toc-list a::before { content:counter(toc,decimal-leading-zero) !important; font-family:var(--htb-font-d); font-size:10px; font-weight:700; color:var(--htb-accent); min-width:20px; display:inline !important; }

/* HEADINGS */
body .htb-content .htb-h2 { font-family:var(--htb-font-d) !important; font-size:clamp(17px,2.5vw,21px) !important; font-weight:800 !important; color:var(--htb-dark) !important; margin:28px 0 12px !important; padding:0 0 0 12px !important; border-left:4px solid var(--htb-accent) !important; border-bottom:none !important; line-height:1.3; }
body .htb-content p { color:var(--htb-muted) !important; font-size:15px !important; margin-bottom:13px !important; line-height:1.8 !important; }
body .htb-hr { border:none !important; border-top:1px solid var(--htb-border) !important; margin:24px 0 !important; background:none !important; height:1px !important; }

/* FEATURES GRID */
body .htb-feat-grid { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:11px; margin:14px 0; padding:0 !important; list-style:none !important; }
body .htb-feat-item { display:flex !important; gap:10px; align-items:flex-start; padding:12px !important; background:var(--htb-surface-2) !important; border-radius:var(--htb-radius-sm); border:1px solid var(--htb-border) !important; margin:0 !important; list-style:none !important; }
body .htb-feat-item::before { display:none !important; content:none !important; }
body .htb-feat-dot { width:30px !important; height:30px !important; min-width:30px; border-radius:8px; background:linear-gradient(135deg,var(--htb-primary),var(--htb-accent)) !important; display:flex !important; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
body .htb-feat-item strong { display:block !important; font-size:13px !important; font-weight:600 !important; color:var(--htb-text) !important; margin-bottom:2px; }
body .htb-feat-item span { font-size:12px !important; color:var(--htb-muted) !important; line-height:1.5; display:block !important; }

/* USE CASES TABLE */
body .htb-table { width:100% !important; border-collapse:collapse !important; margin:13px 0; font-size:14px; }
body .htb-table th { background:var(--htb-primary) !important; color:#fff !important; padding:10px 14px !important; text-align:left; font-family:var(--htb-font-d) !important; font-weight:700 !important; font-size:11px !important; text-transform:uppercase; }
body .htb-table th:first-child { border-radius:10px 0 0 0; }
body .htb-table th:last-child { border-radius:0 10px 0 0; }
body .htb-table td { padding:10px 14px !important; border-bottom:1px solid var(--htb-border) !important; color:var(--htb-muted) !important; vertical-align:top; }
body .htb-table tr:nth-child(even) td { background:var(--htb-surface-2) !important; }
body .htb-table tr:last-child td { border-bottom:none !important; }
body .htb-table td:first-child { font-weight:600 !important; color:var(--htb-text) !important; }

/* BEFORE / AFTER */
body .htb-ba-wrap { display:grid !important; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin:14px 0; background:var(--htb-surface-2); border:1.5px solid var(--htb-border); border-radius:var(--htb-radius); padding:16px; }
body .htb-ba-box { background:#fff !important; border:1px solid var(--htb-border) !important; border-radius:var(--htb-radius-sm); padding:13px; }
body .htb-ba-lbl { font-size:10.5px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.8px; margin-bottom:7px; display:block; }
body .htb-ba-in { color:#7c3aed !important; }
body .htb-ba-out { color:#059669 !important; }
body .htb-ba-content { font-size:13px; color:var(--htb-text) !important; line-height:1.7; }
body .htb-ba-arrow { font-size:22px; color:var(--htb-accent) !important; font-weight:bold; text-align:center; }

/* COMPARISON TABLE */
body .htb-comp-table { width:100% !important; border-collapse:collapse !important; margin:13px 0; font-size:14px; }
body .htb-comp-table th { background:var(--htb-primary) !important; color:#fff !important; padding:10px 14px !important; text-align:left; font-family:var(--htb-font-d) !important; font-weight:700 !important; font-size:11px !important; text-transform:uppercase; }
body .htb-comp-table th:first-child { border-radius:10px 0 0 0; }
body .htb-comp-table th:last-child { border-radius:0 10px 0 0; }
body .htb-comp-table th.htb-our { background:var(--htb-primary-light) !important; }
body .htb-comp-table td { padding:10px 14px !important; border-bottom:1px solid var(--htb-border) !important; color:var(--htb-muted) !important; }
body .htb-comp-table tr:nth-child(even) td { background:var(--htb-surface-2) !important; }
body .htb-comp-table td.htb-our { background:#f0f6ff !important; font-weight:700 !important; color:var(--htb-primary) !important; }
body .htb-comp-table td.htb-yes { color:#10b981 !important; font-weight:700 !important; }
body .htb-comp-table td.htb-no { color:#ef4444 !important; font-weight:700 !important; }

/* PRO TIPS */
body .htb-tips-list { padding:0 !important; margin:12px 0 !important; list-style:none !important; display:flex; flex-direction:column; gap:7px; }
body .htb-tips-list li { display:flex !important; gap:10px; padding:11px 13px; background:#f0fdf4 !important; border:1px solid #bbf7d0 !important; border-radius:var(--htb-radius-sm); font-size:14px !important; color:#166534 !important; line-height:1.6; list-style:none !important; margin:0 !important; }
body .htb-tips-list li::before { content:'💡' !important; font-size:15px; flex-shrink:0; display:block !important; }
body .htb-tips-list li::marker { display:none !important; content:none !important; }

/* COMMON MISTAKES */
body .htb-mistakes-list { padding:0 !important; margin:12px 0 !important; list-style:none !important; display:flex; flex-direction:column; gap:7px; }
body .htb-mistakes-list li { display:flex !important; gap:10px; padding:11px 13px; background:#fff7ed !important; border:1px solid #fed7aa !important; border-radius:var(--htb-radius-sm); font-size:14px !important; color:#9a3412 !important; line-height:1.6; list-style:none !important; margin:0 !important; }
body .htb-mistakes-list li::before { content:'⚠️' !important; font-size:15px; flex-shrink:0; display:block !important; }
body .htb-mistakes-list li::marker { display:none !important; content:none !important; }

/* FAQ */
body .htb-faq-list { margin:12px 0; }
body .htb-faq-item { border:1.5px solid var(--htb-border) !important; border-radius:var(--htb-radius) !important; margin-bottom:8px; overflow:hidden; transition:border-color .2s; background:#fff !important; }
body .htb-faq-item.htb-open { border-color:var(--htb-primary) !important; }
body .htb-faq-q { padding:14px 17px !important; cursor:pointer; display:flex !important; align-items:center; justify-content:space-between; gap:10px; font-weight:600 !important; font-size:14px !important; color:var(--htb-text) !important; background:#fff !important; user-select:none; }
body .htb-faq-q:hover { background:var(--htb-surface-2) !important; }
body .htb-faq-item.htb-open .htb-faq-q { background:#f0f6ff !important; color:var(--htb-primary) !important; }
body .htb-faq-icon { width:22px; height:22px; border-radius:50%; background:var(--htb-surface-2); display:inline-flex !important; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; transition:transform .3s,background .2s; color:var(--htb-muted) !important; }
body .htb-faq-item.htb-open .htb-faq-icon { transform:rotate(45deg); background:var(--htb-primary) !important; color:#fff !important; }
body .htb-faq-a { padding:0 17px; max-height:0; overflow:hidden; transition:max-height .35s ease,padding .2s; font-size:14px !important; color:var(--htb-muted) !important; line-height:1.8; background:#fafcff !important; }
body .htb-faq-item.htb-open .htb-faq-a { max-height:600px; padding:12px 17px 16px; }

/* AFFILIATE BOX */
body .htb-aff-box { background:linear-gradient(135deg,#f0fdf4,#dcfce7) !important; border:1.5px solid #86efac !important; border-radius:var(--htb-radius); padding:20px 22px; margin:20px 0; }
body .htb-aff-title { font-family:var(--htb-font-d) !important; font-weight:700 !important; font-size:15px !important; color:#14532d !important; margin-bottom:8px; }
body .htb-aff-box p { color:#166634 !important; font-size:14px !important; margin-bottom:12px !important; }
body .htb-aff-btn { display:inline-flex !important; align-items:center; gap:6px; background:#16a34a !important; color:#fff !important; padding:10px 22px; border-radius:var(--htb-radius-sm); font-weight:700 !important; font-size:14px; text-decoration:none !important; }

/* RELATED TOOLS */
body .htb-related-grid { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:10px; margin-top:12px; }
body .htb-rel-card { display:flex !important; align-items:center; gap:9px; padding:11px; background:var(--htb-surface-2) !important; border:1.5px solid var(--htb-border) !important; border-radius:var(--htb-radius); text-decoration:none !important; transition:all .2s; color:var(--htb-text) !important; }
body .htb-rel-card:hover { border-color:var(--htb-primary) !important; background:#f0f6ff !important; transform:translateY(-2px); }
body .htb-rel-icon { width:33px; height:33px; border-radius:9px; background:linear-gradient(135deg,var(--htb-primary),var(--htb-primary-light)) !important; display:flex !important; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
body .htb-rel-name { font-size:12.5px !important; font-weight:600 !important; color:var(--htb-text) !important; }
body .htb-rel-arrow { margin-left:auto; color:var(--htb-light) !important; font-size:16px; }

/* SHARE BUTTONS */
body .htb-share-section { margin:22px 0 0; padding-top:20px; border-top:1px solid var(--htb-border); }
body .htb-share-title { font-size:13px !important; font-weight:600 !important; color:var(--htb-muted) !important; margin-bottom:10px; display:block; }
body .htb-share-btns { display:flex !important; gap:8px; flex-wrap:wrap; }
body .htb-share-btn { padding:8px 16px !important; border-radius:var(--htb-radius-sm); font-size:13px !important; font-weight:600 !important; text-decoration:none !important; border:none !important; cursor:pointer; transition:all .2s; display:inline-flex !important; align-items:center; }
body .htb-share-x { background:#000 !important; color:#fff !important; }
body .htb-share-fb { background:#1877f2 !important; color:#fff !important; }
body .htb-share-li { background:#0a66c2 !important; color:#fff !important; }
body .htb-share-wa { background:#25d366 !important; color:#fff !important; }
body .htb-share-copy { background:var(--htb-surface-2) !important; color:var(--htb-text) !important; border:1px solid var(--htb-border) !important; }

/* AUTHOR BOX */
body .htb-author-box { display:flex !important; gap:14px; align-items:flex-start; background:var(--htb-surface-2) !important; border:1.5px solid var(--htb-border) !important; border-radius:var(--htb-radius); padding:16px 18px; margin-top:22px; }
body .htb-author-av { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--htb-primary),var(--htb-accent)) !important; display:flex !important; align-items:center; justify-content:center; font-family:var(--htb-font-d); font-weight:800; font-size:20px; color:#fff !important; flex-shrink:0; }
body .htb-author-name { font-weight:700 !important; font-size:15px !important; color:var(--htb-text) !important; margin-bottom:4px; display:block; }
body .htb-author-role { font-size:12px !important; color:var(--htb-accent) !important; font-weight:600 !important; margin-bottom:4px; display:block; }
body .htb-author-bio { font-size:13px !important; color:var(--htb-muted) !important; line-height:1.6; display:block; }

/* EMBED BOX */
body .htb-embed-box { background:var(--htb-surface-2) !important; border:1.5px solid var(--htb-border) !important; border-radius:var(--htb-radius); padding:16px 18px; margin-top:20px; }
body .htb-embed-title { font-weight:700 !important; font-size:14px !important; color:var(--htb-text) !important; margin-bottom:6px; display:block; }
body .htb-embed-sub { font-size:13px !important; color:var(--htb-muted) !important; margin-bottom:10px; display:block; }
body .htb-embed-wrap { display:flex !important; align-items:center; gap:10px; background:#fff !important; border:1px solid var(--htb-border) !important; border-radius:var(--htb-radius-sm); padding:10px 14px; }
body .htb-embed-wrap code { font-size:12px !important; color:var(--htb-muted) !important; flex:1; word-break:break-all; }
body .htb-embed-copy { padding:7px 14px; background:var(--htb-primary) !important; color:#fff !important; border:none !important; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; flex-shrink:0; }

/* CUSTOM BLOCK */
body .htb-custom-block { margin:16px 0; }

/* TOAST */
body .htb-toast { position:fixed !important; bottom:22px; right:22px; background:var(--htb-dark) !important; color:#fff !important; padding:11px 18px; border-radius:var(--htb-radius); font-size:14px; font-weight:500; display:flex !important; align-items:center; gap:8px; box-shadow:var(--htb-shadow-lg); transform:translateY(80px); opacity:0; transition:all .3s cubic-bezier(.34,1.56,.64,1); z-index:99999; pointer-events:none; }
body .htb-toast.htb-show { transform:translateY(0) !important; opacity:1 !important; }

/* RESPONSIVE */
@media(max-width:640px){
  body .htb-toc-list { grid-template-columns:1fr !important; }
  body .htb-feat-grid { grid-template-columns:1fr !important; }
  body .htb-related-grid { grid-template-columns:repeat(2,1fr) !important; }
  body .htb-table { font-size:12px !important; display:block; overflow-x:auto; }
  body .htb-ba-wrap { grid-template-columns:1fr !important; }
  body .htb-rating-header { flex-direction:column !important; }
  body .htb-bookmark-btn { width:100%; justify-content:center; }
  body .htb-emoji-btn { padding:8px 9px; min-width:48px; font-size:19px; }
  body .htb-content { padding:18px 14px !important; }
}

/* ═══════════════════════════════════════
   HEADER META — Rating + View Counter Side by Side
═══════════════════════════════════════ */
body .htb-hdr-meta { display:flex !important; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; margin-top:10px; flex-direction:row !important; }
body .htb-hdr-meta .htb-quick-rating,
body .htb-hdr-meta .htb-view-count { white-space:nowrap; flex-shrink:0; }
body .htb-view-count { display:inline-flex !important; align-items:center; gap:6px; background:#fff; border:1px solid var(--htb-border); border-radius:100px; padding:5px 15px; font-size:13px; box-shadow:0 1px 4px rgba(0,0,0,.07); }
body .htb-vc-icon { font-size:13px; }
body .htb-vc-num { font-family:var(--htb-font-d) !important; font-weight:700; color:var(--htb-primary) !important; }
body .htb-vc-lbl { color:var(--htb-muted) !important; font-size:12px; }


/* ═══════════════════════════════════════
   ADDITIONS v3.1 — Disclaimer + FAQ Highlight + Empty State
═══════════════════════════════════════ */

/* TOOL EMPTY STATE */
body .htb-tool-empty {
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:180px;
  padding:30px;
  text-align:center;
}
body .htb-tool-empty p { font-size:15px !important; color:var(--htb-muted) !important; margin:8px 0 4px !important; }
body .htb-tool-empty small { font-size:12px !important; color:var(--htb-light) !important; }

/* DISCLAIMER BOX */
body .htb-disclaimer {
  display:flex !important;
  gap:10px;
  align-items:flex-start;
  background:#fffbeb !important;
  border:1px solid #fde68a !important;
  border-radius:var(--htb-radius-sm);
  padding:11px 15px;
  margin:14px 0 0 !important;
  font-size:13px;
}
body .htb-disclaimer-ic { font-size:15px; flex-shrink:0; margin-top:1px; }
body .htb-disclaimer p { color:#92400e !important; line-height:1.55; margin:0 !important; font-size:13px !important; }

/* FAQ — HIGHLIGHT FIX */
body .htb-faq-item { transition:border-color .2s,box-shadow .2s !important; }
body .htb-faq-item.htb-open {
  border-color:var(--htb-primary) !important;
  box-shadow:0 0 0 2px rgba(15,76,129,0.08) !important;
}
body .htb-faq-item.htb-open .htb-faq-q {
  background:#f0f6ff !important;
  color:var(--htb-primary) !important;
  border-bottom:1px solid #dbeafe !important;
}
body .htb-faq-icon {
  width:22px; height:22px; border-radius:50%;
  background:var(--htb-surface-2);
  display:inline-flex !important;
  align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
  transition:transform .25s,background .2s,color .2s !important;
  color:var(--htb-muted) !important;
  border:1px solid var(--htb-border);
}
body .htb-faq-item.htb-open .htb-faq-icon {
  transform:rotate(45deg) !important;
  background:var(--htb-primary) !important;
  color:#fff !important;
  border-color:var(--htb-primary) !important;
}
body .htb-faq-a {
  padding:0 17px !important;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease,padding .2s !important;
  font-size:14px !important;
  color:var(--htb-muted) !important;
  line-height:1.8 !important;
  background:#fafcff !important;
  border-left:3px solid var(--htb-primary);
}
body .htb-faq-item.htb-open .htb-faq-a {
  max-height:600px !important;
  padding:13px 17px 17px !important;
}

/* RESPONSIVE — disclaimer */
@media(max-width:640px){
  body .htb-disclaimer { padding:10px 12px; font-size:12px; }
}


/* ═══════════════════════════════════════
   LAYOUT SYSTEM — 4 Variants
   no-sidebar | right-sidebar | left-sidebar | two-sidebar
═══════════════════════════════════════ */

/* Base wrapper */
.htb-layout-wrap {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 20px 60px;
  display: grid;
  gap: 24px;
  align-items: start;
}

/* NO SIDEBAR — full width */
.htb-layout-no-sidebar {
  grid-template-columns: 1fr;
}
.htb-layout-no-sidebar .htb-page-wrap {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}

/* RIGHT SIDEBAR only */
.htb-layout-right-sidebar {
  grid-template-columns: 1fr 300px;
}

/* LEFT SIDEBAR only */
.htb-layout-left-sidebar {
  grid-template-columns: 240px 1fr;
}

/* TWO SIDEBARS */
.htb-layout-two-sidebar {
  grid-template-columns: 240px 1fr 300px;
}

/* SIDEBAR SHARED STYLES */
.htb-sidebar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.htb-sb-widget {
  background: var(--htb-surface);
  border: 1px solid var(--htb-border);
  border-radius: var(--htb-radius);
  overflow: hidden;
}

.htb-sb-title {
  padding: 11px 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--htb-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--htb-border);
  background: var(--htb-surface-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.htb-sb-body { padding: 14px; }

/* Quick Info rows */
.htb-sb-info-rows { display: flex; flex-direction: column; }
.htb-sb-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  border-bottom: 1px solid var(--htb-border);
  font-size: 12.5px;
}
.htb-sb-info-row:last-child { border-bottom: none; }
.htb-sb-lbl { color: var(--htb-muted); }
.htb-sb-val { color: var(--htb-text); font-weight: 600; }
.htb-sb-link { color: var(--htb-primary); }
.htb-sb-free { color: #059669; }

/* Sidebar Ad */
.htb-sb-ad {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--htb-surface-2);
}

/* Sidebar placeholder (empty ad) */
.htb-sb-placeholder {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  color: var(--htb-light);
  border: 1px dashed var(--htb-border);
  border-radius: var(--htb-radius);
}
.htb-sb-placeholder span { font-size: 24px; }

/* Upgrade card */
.htb-sb-upgrade {
  background: linear-gradient(135deg, rgba(15,76,129,.08), rgba(0,201,167,.05));
  border: 1px solid rgba(15,76,129,.25) !important;
  padding: 16px;
  text-align: center;
}
.htb-sb-upgrade-title { font-size: 15px; font-weight: 800; color: var(--htb-text); margin-bottom: 4px; }
.htb-sb-upgrade-desc { font-size: 12px; color: var(--htb-muted); margin-bottom: 12px; line-height: 1.5; }
.htb-sb-upgrade-perks { text-align: left; margin-bottom: 12px; padding: 0; list-style: none; }
.htb-sb-upgrade-perks li { font-size: 12px; color: var(--htb-text); padding: 3px 0; display: flex; align-items: center; gap: 6px; }
.htb-sb-upgrade-perks li::before { content: '✓'; color: #059669; font-weight: 700; }
.htb-sb-upgrade-btn {
  display: block;
  width: 100%;
  padding: 9px;
  background: linear-gradient(135deg, var(--htb-primary), #1a6eb5);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  border-radius: var(--htb-radius);
  border: none;
  cursor: pointer;
  text-align: center;
  transition: .2s;
  text-decoration: none;
}
.htb-sb-upgrade-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15,76,129,.3); }
.htb-sb-upgrade-price { font-size: 10.5px; color: var(--htb-light); margin-top: 6px; }

/* Star rating sidebar widget */
.htb-sb-rate .htb-sb-body { text-align: center; }
.htb-sb-stars { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.htb-sb-star {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--htb-border);
  transition: color .15s, transform .1s;
  line-height: 1;
}
.htb-sb-star:hover, .htb-sb-star.htb-sel { color: #f59e0b; transform: scale(1.15); }
.htb-sb-rate-txt { font-size: 12px; color: var(--htb-muted); }

/* RESPONSIVE — collapse sidebars */
@media (max-width: 1024px) {
  .htb-layout-two-sidebar {
    grid-template-columns: 1fr 280px;
  }
  .htb-layout-two-sidebar .htb-sidebar-left { display: none; }
}
@media (max-width: 860px) {
  .htb-layout-right-sidebar,
  .htb-layout-left-sidebar,
  .htb-layout-two-sidebar {
    grid-template-columns: 1fr !important;
  }
  .htb-sidebar { position: static !important; }
}


/* ════════════════════════════════════════════════════
   HTB HEADER — 2 rows
   Fresh class names: htb-hdr-* (no conflict with Cadence)
   Every rule: body prefix + !important
   ════════════════════════════════════════════════════ */
body .htb-hdr,
body .htb-hdr * { box-sizing:border-box !important; }

body .htb-hdr {
  position:sticky !important; top:0 !important;
  z-index:9999 !important; width:100% !important;
  margin:0 !important; padding:0 !important;
}
body .htb-hdr.htb-scrolled { box-shadow:0 4px 20px rgba(0,0,0,.5) !important; }

/* ROW 1 */
body .htb-hdr-r1 {
  display:block !important; width:100% !important;
  background:#0a0f1e !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  margin:0 !important; padding:0 !important;
}
[data-theme="light"] body .htb-hdr-r1 {
  background:#fff !important; border-bottom:1px solid #e2e8f4 !important;
}
body .htb-hdr-r1-in {
  display:flex !important; flex-direction:row !important;
  align-items:center !important; flex-wrap:nowrap !important;
  max-width:1280px !important; margin:0 auto !important;
  padding:0 24px !important; height:56px !important;
  gap:14px !important; width:100% !important;
}

/* Logo */
body .htb-hdr-logo {
  display:inline-flex !important; flex-direction:row !important;
  align-items:center !important; gap:8px !important;
  text-decoration:none !important; flex-shrink:0 !important;
}
body .htb-hdr-logo-img { height:34px !important; width:auto !important; display:block !important; }
body .htb-hdr-logo-icon {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:34px !important; height:34px !important; font-size:18px !important;
  background:linear-gradient(135deg,#0f4c81,#0891b2) !important;
  border-radius:8px !important; flex-shrink:0 !important;
}
body .htb-hdr-logo-txt {
  display:inline-block !important; white-space:nowrap !important;
  font-family:'Syne',sans-serif !important; font-size:16px !important; font-weight:800 !important;
  background:linear-gradient(135deg,#38bdf8,#818cf8) !important;
  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}
[data-theme="light"] body .htb-hdr-logo-txt {
  background:linear-gradient(135deg,#0f4c81,#0891b2) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
}

/* Search */
body .htb-hdr-srch {
  display:flex !important; flex-direction:row !important; align-items:center !important;
  position:relative !important; flex:1 !important;
  max-width:460px !important; min-width:0 !important;
}
body .htb-hdr-srch-ic {
  position:absolute !important; left:11px !important; top:50% !important;
  transform:translateY(-50%) !important; font-size:13px !important;
  pointer-events:none !important; opacity:.6 !important; display:block !important;
}
body .htb-hdr-srch-inp {
  display:block !important; width:100% !important;
  padding:8px 14px 8px 34px !important;
  background:rgba(255,255,255,.08) !important;
  border:1.5px solid rgba(255,255,255,.13) !important;
  border-radius:50px !important; color:#e2e8f0 !important;
  font-size:13px !important; outline:none !important; font-family:inherit !important;
  transition:border-color .2s !important;
}
[data-theme="light"] body .htb-hdr-srch-inp {
  background:#f6f8fc !important; border-color:#e2e8f4 !important; color:#1a2035 !important;
}
body .htb-hdr-srch-inp:focus { border-color:#00c9a7 !important; box-shadow:0 0 0 3px rgba(0,201,167,.15) !important; }
body .htb-hdr-srch-inp::placeholder { color:rgba(255,255,255,.3) !important; }
[data-theme="light"] body .htb-hdr-srch-inp::placeholder { color:#94a3b8 !important; }
body .htb-hdr-srch-res {
  display:none !important; position:absolute !important;
  top:calc(100% + 6px) !important; left:0 !important; right:0 !important;
  background:#1a2035 !important; border:1px solid rgba(255,255,255,.1) !important;
  border-radius:12px !important; box-shadow:0 12px 40px rgba(0,0,0,.5) !important;
  max-height:340px !important; overflow-y:auto !important; z-index:10001 !important;
}
[data-theme="light"] body .htb-hdr-srch-res { background:#fff !important; border-color:#e2e8f4 !important; }
body .htb-hdr-srch-res.htb-open { display:block !important; }

/* Actions */
body .htb-hdr-acts {
  display:inline-flex !important; flex-direction:row !important;
  align-items:center !important; gap:8px !important;
  margin-left:auto !important; flex-shrink:0 !important;
}
body .htb-hdr-theme-btn {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:34px !important; height:34px !important; font-size:16px !important;
  background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.14) !important;
  border-radius:8px !important; cursor:pointer !important; padding:0 !important;
}
[data-theme="light"] body .htb-hdr-theme-btn { background:#f0f6ff !important; border-color:#e2e8f4 !important; }
body .htb-hdr-theme-btn:hover { border-color:#00c9a7 !important; }
body .htb-hdr-mob-btn {
  display:none !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  gap:5px !important; width:34px !important; height:34px !important;
  background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.14) !important;
  border-radius:8px !important; cursor:pointer !important; padding:0 !important; flex-shrink:0 !important;
}
body .htb-hdr-mob-btn span {
  display:block !important; width:16px !important; height:2px !important;
  background:rgba(255,255,255,.8) !important; border-radius:2px !important; transition:all .2s !important;
}
[data-theme="light"] body .htb-hdr-mob-btn span { background:#475569 !important; }
body .htb-hdr-mob-btn.htb-open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) !important; }
body .htb-hdr-mob-btn.htb-open span:nth-child(2) { opacity:0 !important; }
body .htb-hdr-mob-btn.htb-open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) !important; }

/* ROW 2 */
body .htb-hdr-r2 {
  display:block !important; width:100% !important;
  background:#0d1424 !important; margin:0 !important; padding:0 !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  overflow:hidden !important;
}
[data-theme="light"] body .htb-hdr-r2 {
  background:#eef4ff !important; border-bottom:1px solid #dbeafe !important;
}
body .htb-hdr-r2-in {
  display:flex !important; flex-direction:row !important;
  align-items:stretch !important; flex-wrap:nowrap !important;
  max-width:1280px !important; margin:0 auto !important;
  padding:0 16px !important; height:40px !important;
  overflow:hidden !important; gap:0 !important;
}
body .htb-hdr-nav-a {
  display:inline-flex !important; flex-direction:row !important;
  align-items:center !important; gap:5px !important;
  padding:0 11px !important; height:40px !important;
  font-size:12.5px !important; font-weight:600 !important;
  color:rgba(255,255,255,.62) !important; text-decoration:none !important;
  white-space:nowrap !important; flex-shrink:0 !important;
  border-bottom:2.5px solid transparent !important;
  transition:color .15s, background .15s, border-color .15s !important;
}
[data-theme="light"] body .htb-hdr-nav-a { color:#475569 !important; }
body .htb-hdr-nav-a:hover {
  color:#fff !important; background:rgba(255,255,255,.06) !important;
  border-bottom-color:rgba(0,201,167,.5) !important;
}
[data-theme="light"] body .htb-hdr-nav-a:hover {
  color:#0f4c81 !important; background:#dbeafe !important; border-bottom-color:#0f4c81 !important;
}
body .htb-hdr-nav-a.htb-hdr-nav-cur {
  color:#00c9a7 !important; border-bottom-color:#00c9a7 !important;
  background:rgba(0,201,167,.08) !important;
}
[data-theme="light"] body .htb-hdr-nav-a.htb-hdr-nav-cur {
  color:#0f4c81 !important; border-bottom-color:#0f4c81 !important; background:#dbeafe !important;
}
body .htb-hdr-nav-a:first-child {
  padding-right:13px !important; margin-right:4px !important;
  border-right:1px solid rgba(255,255,255,.1) !important;
}
[data-theme="light"] body .htb-hdr-nav-a:first-child { border-right-color:#dbeafe !important; }

/* Mobile menu */
body .htb-hdr-mob-menu {
  display:none !important; background:#0d1424 !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
}
[data-theme="light"] body .htb-hdr-mob-menu { background:#fff !important; border-color:#e2e8f4 !important; }
body .htb-hdr-mob-menu.htb-open { display:block !important; }
body .htb-hdr-mob-in {
  display:grid !important; grid-template-columns:1fr 1fr !important;
  gap:4px !important; padding:10px 16px 14px !important;
  max-width:1280px !important; margin:0 auto !important;
}
body .htb-hdr-mob-a {
  display:flex !important; flex-direction:row !important;
  align-items:center !important; gap:8px !important;
  padding:9px 12px !important; border-radius:8px !important;
  font-size:13px !important; font-weight:600 !important;
  color:rgba(255,255,255,.82) !important; text-decoration:none !important;
  transition:background .15s !important;
}
[data-theme="light"] body .htb-hdr-mob-a { color:#1a2035 !important; }
body .htb-hdr-mob-a:hover { background:rgba(0,201,167,.1) !important; color:#fff !important; }
[data-theme="light"] body .htb-hdr-mob-a:hover { background:#eef4ff !important; color:#0f4c81 !important; }
body .htb-hdr-mob-a:first-child {
  grid-column:1/-1 !important; border-bottom:1px solid rgba(255,255,255,.08) !important;
  border-radius:0 !important; padding-bottom:10px !important; margin-bottom:4px !important;
}
[data-theme="light"] body .htb-hdr-mob-a:first-child { border-color:#e2e8f4 !important; }

@media(max-width:900px){
  body .htb-hdr-r2 { display:none !important; }
  body .htb-hdr-mob-btn { display:inline-flex !important; }
  body .htb-hdr-srch { max-width:200px !important; }
}
@media(max-width:500px){
  body .htb-hdr-srch { display:none !important; }
  body .htb-hdr-logo-txt { display:none !important; }
}


/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */
body .htb-site-footer {
  background:#0d1424 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  margin-top:60px !important;
}
[data-theme="light"] body .htb-site-footer {
  background:#f6f8fc !important; border-top:1px solid #e2e8f4 !important;
}
body .htb-footer-inner {
  max-width:1260px !important; margin:0 auto !important; padding:48px 24px 0 !important;
}
body .htb-footer-grid {
  display:grid !important; grid-template-columns:2fr 1fr 1fr 1fr !important;
  gap:40px !important; padding-bottom:40px !important;
}
body .htb-footer-logo {
  margin-bottom:14px !important; display:inline-flex !important;
  align-items:center !important; gap:8px !important; text-decoration:none !important;
}
body .htb-footer-tagline {
  font-size:13px !important; line-height:1.6 !important;
  margin:10px 0 16px !important; max-width:260px !important;
  color:rgba(255,255,255,.5) !important;
}
[data-theme="light"] body .htb-footer-tagline { color:#64748b !important; }
body .htb-footer-social { display:flex !important; gap:8px !important; }
body .htb-social-link {
  width:32px !important; height:32px !important;
  background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.12) !important;
  border-radius:8px !important; display:flex !important; align-items:center !important;
  justify-content:center !important; font-size:14px !important;
  text-decoration:none !important; transition:all .2s !important;
}
[data-theme="light"] body .htb-social-link { background:#f0f6ff !important; border-color:#e2e8f4 !important; }
body .htb-social-link:hover { border-color:#00c9a7 !important; background:rgba(0,201,167,.15) !important; }
body .htb-footer-col-title {
  font-size:11px !important; font-weight:800 !important;
  text-transform:uppercase !important; letter-spacing:.6px !important;
  color:rgba(255,255,255,.4) !important; margin-bottom:14px !important; display:block !important;
}
[data-theme="light"] body .htb-footer-col-title { color:#94a3b8 !important; }
body .htb-footer-links {
  list-style:none !important; margin:0 !important; padding:0 !important;
  display:flex !important; flex-direction:column !important; gap:8px !important;
}
body .htb-footer-links li { list-style:none !important; }
body .htb-footer-links a, body .htb-footer-links li a {
  font-size:13px !important; color:rgba(255,255,255,.55) !important;
  text-decoration:none !important; transition:color .15s !important; display:block !important;
}
[data-theme="light"] body .htb-footer-links a,
[data-theme="light"] body .htb-footer-links li a { color:#64748b !important; }
body .htb-footer-links a:hover,
body .htb-footer-links li a:hover { color:#00c9a7 !important; }
[data-theme="light"] body .htb-footer-links a:hover,
[data-theme="light"] body .htb-footer-links li a:hover { color:#0f4c81 !important; }

body .htb-footer-bottom {
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  padding:18px 0 !important; font-size:12.5px !important;
  color:rgba(255,255,255,.4) !important; flex-wrap:wrap !important; gap:10px !important;
}
[data-theme="light"] body .htb-footer-bottom { border-color:#e2e8f4 !important; color:#94a3b8 !important; }
body .htb-footer-bottom-links { display:flex !important; gap:16px !important; }
body .htb-footer-bottom-links a { color:rgba(255,255,255,.4) !important; text-decoration:none !important; transition:color .15s !important; }
[data-theme="light"] body .htb-footer-bottom-links a { color:#94a3b8 !important; }
body .htb-footer-bottom-links a:hover { color:#00c9a7 !important; }

body .htb-back-top {
  position:fixed !important; bottom:22px !important; right:22px !important;
  width:40px !important; height:40px !important;
  background:#0f4c81 !important; color:#fff !important;
  border:none !important; border-radius:10px !important;
  font-size:18px !important; cursor:pointer !important;
  opacity:0 !important; transform:translateY(12px) !important;
  transition:all .25s !important; z-index:500 !important;
  box-shadow:0 4px 16px rgba(15,76,129,.4) !important;
}
body .htb-back-top.htb-show { opacity:1 !important; transform:translateY(0) !important; }
body .htb-back-top:hover { transform:translateY(-2px) !important; }

@media(max-width:860px){ body .htb-footer-grid { grid-template-columns:1fr 1fr !important; } }
@media(max-width:480px){
  body .htb-footer-grid { grid-template-columns:1fr !important; }
  body .htb-footer-bottom { flex-direction:column !important; text-align:center !important; }
}


/* ════════════════════════════════════════════════════════
   DARK / LIGHT THEME — Tool Page Full Coverage
   ════════════════════════════════════════════════════════ */

/* Body background — switches entire page */
[data-theme="dark"] body  { background:#0a0f1e !important; color:#e2e8f0 !important; }
[data-theme="light"] body { background:#f6f8fc !important; color:#1a2035 !important; }

/* ── LIGHT: Tool page components ───────────────────────── */
[data-theme="light"] body .htb-tool-title    { color:#1a2035 !important; }
[data-theme="light"] body .htb-tagline       { color:#64748b !important; }
[data-theme="light"] body .htb-breadcrumb    { background:#fff !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-breadcrumb a  { color:#0f4c81 !important; }
[data-theme="light"] body .htb-breadcrumb span { color:#94a3b8 !important; }
[data-theme="light"] body .htb-tool-card     { background:#fff !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-content       { background:#fff !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-h2            { color:#1a2035 !important; }
[data-theme="light"] body .htb-toc           { background:linear-gradient(135deg,#f0f6ff,#f6f8fc) !important; border-color:#d0e4ff !important; }
[data-theme="light"] body .htb-toc-title     { color:#1a2035 !important; }
[data-theme="light"] body .htb-toc-list a    { color:#0f4c81 !important; }
[data-theme="light"] body .htb-feat-item     { background:#f6f8fc !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-feat-item strong { color:#1a2035 !important; }
[data-theme="light"] body .htb-feat-item span   { color:#64748b !important; }
[data-theme="light"] body .htb-table td      { color:#1a2035 !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-faq-item      { background:#fff !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-faq-q         { color:#1a2035 !important; }
[data-theme="light"] body .htb-faq-a         { color:#475569 !important; }
[data-theme="light"] body .htb-faq-item.htb-open .htb-faq-q { color:#0f4c81 !important; }
[data-theme="light"] body .htb-rel-card      { background:#fff !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-rel-name      { color:#1a2035 !important; }
[data-theme="light"] body .htb-author-box    { background:#fff !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-author-name   { color:#1a2035 !important; }
[data-theme="light"] body .htb-author-role,
[data-theme="light"] body .htb-author-bio    { color:#64748b !important; }
[data-theme="light"] body .htb-quick-rating  { background:#fff !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-bookmark-btn  { background:#fff !important; border-color:#e2e8f4 !important; color:#475569 !important; }
[data-theme="light"] body .htb-share-section { background:#f6f8fc !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-share-title   { color:#1a2035 !important; }
[data-theme="light"] body .htb-disclaimer    { background:#f0f6ff !important; border-color:#d0e4ff !important; }
[data-theme="light"] body .htb-disclaimer p  { color:#475569 !important; }
[data-theme="light"] body .htb-sidebar .htb-sb-widget { background:#fff !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-sb-title      { color:#1a2035 !important; }
[data-theme="light"] body .htb-embed-box     { background:#f6f8fc !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-embed-wrap code { background:#fff !important; color:#475569 !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-ba-box        { background:#fff !important; border-color:#e2e8f4 !important; }
[data-theme="light"] body .htb-ba-content    { color:#1a2035 !important; }

/* ── DARK: Tool page components ────────────────────────── */
[data-theme="dark"] body .htb-breadcrumb   { background:#0d1424 !important; border-color:#1e293b !important; }
[data-theme="dark"] body .htb-breadcrumb a { color:#60a5fa !important; }
[data-theme="dark"] body .htb-tool-title   { color:#f1f5f9 !important; }
[data-theme="dark"] body .htb-tool-card    { background:#111827 !important; border-color:#1e293b !important; }
[data-theme="dark"] body .htb-content      { background:#111827 !important; border-color:#1e293b !important; }
[data-theme="dark"] body .htb-h2           { color:#f1f5f9 !important; }
[data-theme="dark"] body .htb-toc          { background:linear-gradient(135deg,#0f1d30,#111827) !important; border-color:#1e3a5f !important; }
[data-theme="dark"] body .htb-toc-title    { color:#e2e8f0 !important; }
[data-theme="dark"] body .htb-feat-item    { background:#1a2235 !important; border-color:#1e293b !important; }
[data-theme="dark"] body .htb-feat-item strong { color:#e2e8f0 !important; }
[data-theme="dark"] body .htb-feat-item span   { color:#94a3b8 !important; }
[data-theme="dark"] body .htb-table td     { color:#e2e8f0 !important; border-color:#1e293b !important; }
[data-theme="dark"] body .htb-faq-item     { background:#111827 !important; border-color:#1e293b !important; }
[data-theme="dark"] body .htb-faq-q        { color:#e2e8f0 !important; }
[data-theme="dark"] body .htb-faq-a        { color:#94a3b8 !important; }
[data-theme="dark"] body .htb-rel-card     { background:#111827 !important; border-color:#1e293b !important; }
[data-theme="dark"] body .htb-rel-name     { color:#e2e8f0 !important; }
[data-theme="dark"] body .htb-author-box   { background:#111827 !important; border-color:#1e293b !important; }
[data-theme="dark"] body .htb-author-name  { color:#e2e8f0 !important; }
[data-theme="dark"] body .htb-quick-rating { background:#111827 !important; border-color:#1e293b !important; }
[data-theme="dark"] body .htb-bookmark-btn { background:#111827 !important; border-color:#1e293b !important; color:#94a3b8 !important; }
[data-theme="dark"] body .htb-share-section { background:#111827 !important; border-color:#1e293b !important; }
[data-theme="dark"] body .htb-sidebar .htb-sb-widget { background:#111827 !important; border-color:#1e293b !important; }
[data-theme="dark"] body .htb-sb-title     { color:#e2e8f0 !important; }
[data-theme="dark"] body .htb-embed-box    { background:#111827 !important; border-color:#1e293b !important; }
[data-theme="dark"] body .htb-embed-wrap code { background:#1a2235 !important; color:#94a3b8 !important; }
[data-theme="dark"] body .htb-ba-box       { background:#1a2235 !important; border-color:#1e293b !important; }
[data-theme="dark"] body .htb-ba-content   { color:#e2e8f0 !important; }