/* CrossKit dark mode (P4).
 *
 * Strategy: flip the design-system tokens under html.ck-dark, then patch the
 * handful of surfaces that hard-code `background: white`. Images and brand
 * gradients are left untouched so product shots stay correct.
 */

html.ck-dark {
  --gray-0:   #12141a;
  --gray-50:  #171a21;
  --gray-100: #1d212a;
  --gray-200: #262b35;
  --gray-300: #333a47;
  --gray-400: #6b7280;
  --gray-500: #9aa3b2;
  --gray-600: #c3cad6;
  --gray-700: #dfe4ec;
  --gray-800: #eef1f6;
  --gray-900: #f6f8fb;

  --brand-soft: #1e1b4b;
  --brand-bg:   #17172e;

  --bg-primary:   #0f1117;
  --bg-secondary: #171a21;
  --text-primary: #e6e8ee;
  --text-secondary: #a8b0c0;
  --border-color: #2a2f3a;
  color-scheme: dark;
}

/* Base surfaces */
html.ck-dark body {
  background: #0f1117;
  color: #e6e8ee;
}
html.ck-dark body.homepage,
html.ck-dark .site-header,
html.ck-dark .contact-footer {
  background: #12141a;
  color: #e6e8ee;
}

/* Cards / panels that hard-code white */
html.ck-dark .tool-card,
html.ck-dark .card,
html.ck-dark .ck-related-inner,
html.ck-dark .ck-related-card,
html.ck-dark .related-card,
html.ck-dark .tip-item,
html.ck-dark .feature-badge,
html.ck-dark .ck-anatomy-block,
html.ck-dark .tool-help-banner,
html.ck-dark .blog-tools-cta,
html.ck-dark .blog-tool-card,
html.ck-dark .ck-ux-panel,
html.ck-dark .ck-ux-item,
html.ck-dark .ck-ux-save input,
html.ck-dark .ck-chain-item,
html.ck-dark .tool-category,
html.ck-dark .tool-item,
html.ck-dark .faq-item,
html.ck-dark .pricing-card {
  background: #171a21 !important;
  color: #e6e8ee;
  border-color: #2a2f3a;
}

/* Forms */
html.ck-dark input,
html.ck-dark textarea,
html.ck-dark select {
  background: #171a21;
  color: #e6e8ee;
  border-color: #2a2f3a;
}
html.ck-dark input::placeholder,
html.ck-dark textarea::placeholder {
  color: #6b7280;
}

/* Text helpers */
html.ck-dark h1,
html.ck-dark h2,
html.ck-dark h3,
html.ck-dark h4,
html.ck-dark .ck-related-name,
html.ck-dark .tool-header h1 {
  color: #f2f4f9;
}
html.ck-dark a {
  color: #8ea9ff;
}
html.ck-dark a:hover {
  color: #b3c4ff;
}
html.ck-dark .breadcrumb-nav a,
html.ck-dark .ck-related-title {
  color: #c3cad6;
}

/* Buttons keep the brand gradient, only neutral ones are re-tinted */
html.ck-dark .btn:not(.btn-primary):not(.btn-gradient),
html.ck-dark .copy-btn,
html.ck-dark .ck-sample-btn {
  background: #1d212a;
  color: #e6e8ee;
  border-color: #333a47;
}

/* Tables / code-ish output */
html.ck-dark table,
html.ck-dark th,
html.ck-dark td {
  border-color: #2a2f3a;
}
html.ck-dark th {
  background: #1d212a;
}

/* Theme toggle button (injected by theme.js into the header) */
.ck-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 8px;
  border: 1px solid #dfe3ee;
  border-radius: 8px;
  background: #fff;
  color: #4b5563;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ck-theme-toggle:hover {
  background: #eef2ff;
  color: #2b6cff;
  border-color: #c7d2fe;
}
html.ck-dark .ck-theme-toggle {
  background: #1d212a;
  border-color: #333a47;
  color: #e6e8ee;
}
html.ck-dark .ck-theme-toggle:hover {
  background: #262b35;
  color: #ffd479;
}
@media (max-width: 600px) {
  .ck-theme-toggle { width: 30px; height: 30px; font-size: 13px; }
}

/* Favourites / recently-used strip + favourite button (P4) */
.ck-memory-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 18px;padding:12px 14px;background:#f7f9fc;border:1px solid #e6ebf2;border-radius:12px}
.ck-memory-block{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ck-memory-title{font-size:13px;font-weight:700;color:#4b5563;margin-right:2px}
.ck-memory-chips{display:flex;flex-wrap:wrap;gap:6px}
.ck-memory-chip{display:inline-block;padding:5px 11px;background:#fff;border:1px solid #dfe3ee;border-radius:999px;font-size:13px;color:#2b3654;text-decoration:none;transition:border-color .15s ease,color .15s ease}
.ck-memory-chip:hover{border-color:#8ea9e8;color:#2b6cff}
.ck-memory-clear{margin-left:auto;border:none;background:transparent;color:#98a2b3;font-size:12px;cursor:pointer;text-decoration:underline}
.ck-memory-clear:hover{color:#d9534f}
.ck-fav-btn{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 14px;border:1px solid #dfe3ee;background:#fff;border-radius:999px;font-size:13px;font-weight:600;color:#4b5563;cursor:pointer;transition:all .15s ease}
.ck-fav-btn:hover{border-color:#c7d2fe;color:#2b6cff}
.ck-fav-btn.active{border-color:#ffd479;background:#fff8e6;color:#b45309}
.ck-fav-btn.active i{color:#f59e0b}
html.ck-dark .ck-memory-strip{background:#171a21;border-color:#2a2f3a}
html.ck-dark .ck-memory-title{color:#c3cad6}
html.ck-dark .ck-memory-chip{background:#1d212a;border-color:#333a47;color:#e6e8ee}
html.ck-dark .ck-memory-chip:hover{border-color:#8ea9ff;color:#8ea9ff}
html.ck-dark .ck-fav-btn{background:#1d212a;border-color:#333a47;color:#e6e8ee}
html.ck-dark .ck-fav-btn.active{background:#3a2f12;border-color:#8a6d1f;color:#ffd479}
@media (max-width:600px){.ck-memory-strip{gap:8px;padding:10px 12px}.ck-memory-clear{margin-left:0}}

/* Batch mode panel (P2) */
.ck-batch-panel{margin:22px 0 0;background:#f7f9fc;border:1px solid #e6ebf2;border-radius:14px;padding:18px 20px 20px}
.ck-batch-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ck-batch-head h3{font-size:16px;margin:0;color:#1f2a44}
.ck-batch-free{font-size:12px;color:#6b7280}
.ck-batch-hint{margin:0 0 14px;font-size:13px;line-height:1.6;color:#4b5563}
.ck-batch-row{margin-bottom:12px}
.ck-batch-row label{display:block;font-size:13px;font-weight:600;color:#4b5563;margin-bottom:6px}
.ck-batch-row textarea,.ck-batch-row input[type=file]{width:100%;border:1px solid #dfe3ee;border-radius:8px;padding:10px;font-size:14px;font-family:inherit;background:#fff;color:#1f2a44}
.ck-batch-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.ck-batch-status{font-size:12px;color:#6b7280}
.ck-batch-results{overflow-x:auto}
.ck-batch-table{border-collapse:collapse;width:100%;font-size:13px}
.ck-batch-table th,.ck-batch-table td{border:1px solid #e6ebf2;padding:6px 8px;text-align:left;word-break:break-all}
.ck-batch-table th{background:#eef2ff;color:#2b3654}
.ck-batch-upsell{margin-top:12px;background:#fff8e6;border:1px solid #ffe2a8;color:#8a6d00;border-radius:8px;padding:10px 12px;font-size:13px}
.ck-batch-upsell a{color:#b45309;font-weight:600}
html.ck-dark .ck-batch-panel{background:#171a21;border-color:#2a2f3a}
html.ck-dark .ck-batch-head h3{color:#f2f4f9}
html.ck-dark .ck-batch-hint,html.ck-dark .ck-batch-row label,html.ck-dark .ck-batch-status{color:#a8b0c0}
html.ck-dark .ck-batch-row textarea,html.ck-dark .ck-batch-row input[type=file]{background:#1d212a;border-color:#333a47;color:#e6e8ee}
html.ck-dark .ck-batch-table th,html.ck-dark .ck-batch-table td{border-color:#2a2f3a}
html.ck-dark .ck-batch-table th{background:#1e1b4b;color:#c7d2fe}
html.ck-dark .ck-batch-upsell{background:#3a2f12;border-color:#8a6d1f;color:#ffd479}
html.ck-dark .ck-batch-upsell a{color:#ffd479}
@media (max-width:600px){.ck-batch-panel{padding:14px}}

/* Privacy-first landing page (P5) + tool-page trust strip */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:22px 0 26px}
.pf-card{background:#fff;border:1px solid #e6ebf2;border-radius:14px;padding:20px 22px}
.pf-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#eef2ff;color:#2b6cff;font-size:17px;margin-bottom:10px}
.pf-card h2{font-size:17px;margin:0 0 8px;color:#1f2a44}
.pf-card p{margin:0;font-size:14px;line-height:1.7;color:#4b5563}
.pf-local{background:#f7f9fc;border:1px solid #e6ebf2;border-radius:12px;padding:18px 20px;margin-bottom:24px}
.pf-local h2{font-size:16px;margin:0 0 12px;color:#1f2a44}
.pf-local-list{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.pf-local-list a{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e6ebf2;border-radius:8px;padding:8px 12px;font-size:14px;color:#2b3654;text-decoration:none}
.pf-local-list a:hover{border-color:#c7d2fe;color:#2b6cff}
.pf-local-list i{color:#1f7a45;font-size:12px}
.pf-local-note{margin:0;font-size:13px;color:#6b7280}
.pf-cta{background:#eef2ff;border:1px solid #c7d2fe;border-radius:12px;padding:20px 22px;text-align:center}
.pf-cta h2{font-size:18px;margin:0 0 8px;color:#1f2a44}
.pf-cta p{margin:0 0 14px;font-size:14px;color:#4b5563}
.pf-cta .btn{margin:0 5px}

.ck-next-strip{margin:26px auto 0;max-width:1080px;padding:0 16px}
.ck-next-inner{background:#f7f9fc;border:1px solid #e6ebf2;border-radius:14px;padding:16px 20px}
.ck-privacy-badge{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;background:#eafaf0;border:1px solid #b6e8c8;border-radius:10px;font-size:13px;color:#1f7a45}
.ck-privacy-badge strong{font-size:14px}
.ck-privacy-badge span{color:#2b3654}
.ck-privacy-badge a{font-weight:600;color:#1f7a45;text-decoration:underline}
.ck-privacy-badge--server{background:#fff8e6;border-color:#ffe2a8;color:#8a6d00}
.ck-privacy-badge--server a{color:#8a6d00}
.ck-next-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ck-next-label{font-size:13px;font-weight:700;color:#4b5563;margin-right:2px}
.ck-next-link{padding:6px 12px;background:#fff;border:1px solid #dfe3ee;border-radius:999px;font-size:13px;color:#2b3654;text-decoration:none}
.ck-next-link:hover{border-color:#8ea9e8;color:#2b6cff}
.ck-next-aff{border-style:dashed}
html.ck-dark .pf-card,html.ck-dark .pf-local,html.ck-dark .ck-next-inner{background:#171a21;border-color:#2a2f3a}
html.ck-dark .pf-card h2,html.ck-dark .pf-local h2,html.ck-dark .pf-cta h2{color:#f2f4f9}
html.ck-dark .pf-card p,html.ck-dark .pf-local-note,html.ck-dark .pf-cta p,html.ck-dark .ck-next-label{color:#a8b0c0}
html.ck-dark .pf-local-list a{background:#1d212a;border-color:#333a47;color:#e6e8ee}
html.ck-dark .pf-cta{background:#1e1b4b;border-color:#3730a3}
html.ck-dark .ck-privacy-badge{background:#122b1c;border-color:#2f6b47;color:#8ee0ab}
html.ck-dark .ck-privacy-badge span{color:#c3cad6}
html.ck-dark .ck-next-link{background:#1d212a;border-color:#333a47;color:#e6e8ee}
@media (max-width:600px){.pf-grid{grid-template-columns:1fr}.ck-next-strip{padding:0 12px}}

/* Legal disclaimer banner (risk-control tools) */
html.ck-dark .ck-disclaimer-banner{background:#2a2010;border-color:#8a6d1f;color:#d4a853}
html.ck-dark .ck-disclaimer-banner strong{color:#e2b44a}
html.ck-dark .ck-disclaimer-banner p{color:#c4a060}
html.ck-dark .ck-disclaimer-banner li{color:#b89550}
html.ck-dark .ck-disclaimer-banner i.fa-exclamation-triangle{color:#e2b44a}