/* ============================================================
 * KiloCell unified skin for ALL legacy HTML (tools / guides / hubs)
 * Load LAST. Ink & Signal. Does not remove tool logic.
 * ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap");

:root,
html.wu-theme,
html {
  --kc-ink: #07080c !important;
  --kc-signal: #b8ff78 !important;
  --kc-signal-dim: #7fbf4a !important;
  --kc-text: #eef2f7 !important;
  --kc-muted: #8b93a7 !important;
  --kc-faint: #5c6478 !important;
  --kc-panel: rgb(18 22 34 / 82%) !important;
  --kc-line: rgb(184 255 120 / 18%) !important;
  --kc-glow: rgb(184 255 120 / 18%) !important;

  /* Remap every common token name pages invented */
  --wu-bg: #07080c !important;
  --wu-accent: #b8ff78 !important;
  --wu-accent-strong: #7fbf4a !important;
  --wu-text: #eef2f7 !important;
  --wu-text-secondary: #8b93a7 !important;
  --wu-border: rgb(184 255 120 / 18%) !important;
  --wu-panel: rgb(18 22 34 / 82%) !important;

  --bg: #07080c !important;
  --bg-main: #07080c !important;
  --bg-deep: #07080c !important;
  --bg-color: #07080c !important;
  --bg-card: rgb(18 22 34 / 82%) !important;
  --bg-surface: rgb(18 22 34 / 82%) !important;
  --bg-input: rgb(8 10 16 / 88%) !important;
  --bg-elevated: #0e1018 !important;
  --bg-dark: #07080c !important;
  --panel: rgb(18 22 34 / 82%) !important;
  --card: rgb(18 22 34 / 82%) !important;
  --card-bg: rgb(18 22 34 / 82%) !important;
  --surface-solid: rgb(18 22 34 / 82%) !important;

  --text: #eef2f7 !important;
  --text-primary: #eef2f7 !important;
  --text-main: #eef2f7 !important;
  --text-color: #eef2f7 !important;
  --text-secondary: #a8b0c0 !important;
  /* Was #5c6478 — too dark on ink panels; labels/legends became unreadable */
  --text-muted: #a8b0c0 !important;
  --muted: #a8b0c0 !important;
  --color-text-primary: #eef2f7 !important;
  --color-text-secondary: #a8b0c0 !important;

  --primary: #b8ff78 !important;
  --primary-color: #b8ff78 !important;
  --primary-hover: #7fbf4a !important;
  --accent: #b8ff78 !important;
  --accent-color: #d4ff9a !important;
  --accent-cyan: #b8ff78 !important;
  --accent-blue: #d4ff9a !important;
  --accent-primary: #b8ff78 !important;
  --accent-secondary: #7fbf4a !important;
  --accent-teal: #b8ff78 !important;

  --border: rgb(184 255 120 / 18%) !important;
  --border-color: rgb(184 255 120 / 18%) !important;
  --border-subtle: rgb(184 255 120 / 14%) !important;
  --border-strong: rgb(184 255 120 / 32%) !important;
  --line: rgb(184 255 120 / 18%) !important;

  --radius: 14px !important;
  --radius-md: 12px !important;
  --radius-lg: 16px !important;
  --radius-sm: 8px !important;

  color-scheme: dark;
}

html {
  background: #07080c !important;
}

body {
  margin: 0 !important;
  min-height: 100vh !important;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Manrope", sans-serif !important;
  color: #eef2f7 !important;
  background-color: #07080c !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgb(184 255 120 / 12%), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 20%, rgb(80 140 255 / 8%), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath fill='none' stroke='%23b8ff78' stroke-opacity='0.12' stroke-width='1' d='M28 2 L54 17 V47 L28 62 L2 47 V17 Z'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #0e1018, #07080c 45%, #05060a) !important;
  background-size: auto, auto, 56px 64px, auto !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
h1,
h2,
h3,
.logo,
.brand-name,
.site-title {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Syne", "Manrope", sans-serif !important;
  letter-spacing: 0;
}

h1 {
  color: #b8ff78 !important;
  font-weight: 700 !important;
}

a {
  text-underline-offset: 0.15em;
}

a:hover {
  color: #b8ff78 !important;
}

/* Hide duplicate legacy headers when unified header exists */
body:has(.kc-header) > nav:not([class]):not([data-site-policy-links]),
body:has(.kc-header) nav:has(.back-home),
body:has(.kc-header) nav:has(.theme-toggle),
body:has(.kc-header) nav:has(.nav-content),
body:has(.kc-header) nav.nav-bar,
body:has(.kc-header) nav.site-nav,
body:has(.kc-header) nav.navbar,
body:has(.kc-header) header.site-header,
body:has(.kc-header) .site-header {
  display: none !important;
}

/* Containers — same centered column as site chrome / Astro pages */
.page,
.wrap,
.wrapper,
main.page {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body:has(.kc-header) .container,
body:has(.kc-header) .main-content,
body:has(.kc-header) .page-wrap,
body:has(.kc-header) .main-wrap {
  width: min(1120px, calc(100% - 2rem)) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Cards / panels / editors */
.card,
.panel,
.tool-card,
.guide-card,
.editor-container,
.workspace,
.box,
.section-card,
.hero:not(.kc-rise),
.meta-row .pill {
  background: rgb(18 22 34 / 78%) !important;
  border: 1px solid rgb(184 255 120 / 16%) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.hero {
  background: rgb(18 22 34 / 55%) !important;
  border: 1px solid rgb(184 255 120 / 16%) !important;
  border-radius: 18px !important;
}

.pill,
.badge,
.tag {
  border-radius: 999px !important;
  border-color: rgb(184 255 120 / 22%) !important;
  color: #8b93a7 !important;
  background: rgb(184 255 120 / 6%) !important;
}

/* Forms */
textarea,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="password"],
input:not([type]),
select {
  background: rgb(8 10 16 / 88%) !important;
  color: #eef2f7 !important;
  border: 1px solid rgb(184 255 120 / 18%) !important;
  border-radius: 10px !important;
  font-family: inherit !important;
}

textarea:focus,
input:focus,
select:focus {
  outline: none !important;
  border-color: #b8ff78 !important;
  box-shadow: 0 0 0 3px rgb(184 255 120 / 18%) !important;
}

/* Buttons — baseline chrome
 * Many legacy pages use `* { padding: 0 }` and omit local button rules,
 * which collapses controls to browser-default grey chips. Restore padding here.
 * Do NOT force fill colors on plain .btn / .action-btn — hundreds of tools use
 * those as primary CTAs with page-local backgrounds (and this file loads last). */ 
button:not(.kc-theme-stub):not(.theme-btn):not(.theme-toggle):not([hidden]),
.btn,
.button,
.action-btn,
.tool-btn,
.btn-copy,
.copy-btn,
.btn-outline,
.btn-secondary,
.btn-ghost,
.btn-primary,
.primary-btn,
input[type="button"],
input[type="submit"] {
  font-family: inherit !important;
  border-radius: 10px !important;
  padding: 0.45rem 0.9rem !important;
  cursor: pointer !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}

/* Classless + explicit secondary / outline / copy utilities only */
button:not([class]):not([hidden]),
.btn-outline,
.btn-secondary,
.btn-ghost,
.btn.secondary,
button.secondary,
.action-btn.secondary,
.tool-btn,
.btn-copy,
.copy-btn {
  background: transparent !important;
  color: #eef2f7 !important;
  border: 1px solid rgb(184 255 120 / 28%) !important;
  font-weight: 600 !important;
}

button:not([class]):not([hidden]):hover,
.btn-outline:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn.secondary:hover,
button.secondary:hover,
.action-btn.secondary:hover,
.tool-btn:hover,
.btn-copy:hover,
.copy-btn:hover {
  border-color: rgb(184 255 120 / 55%) !important;
  color: #b8ff78 !important;
}

button.primary,
.btn-primary,
.primary-btn,
.btn.primary,
.cta,
.cta-btn,
.format-btn,
.action-primary,
.action-btn.primary,
button.format-btn {
  background: #b8ff78 !important;
  color: #0a0b0f !important;
  border: 1px solid transparent !important;
  font-weight: 600 !important;
  padding: 0.55rem 1.15rem !important;
}

button.primary:hover,
.btn-primary:hover,
.primary-btn:hover,
.btn.primary:hover,
.cta:hover,
.cta-btn:hover,
.format-btn:hover,
.action-btn.primary:hover,
button.format-btn:hover {
  filter: brightness(1.06);
  color: #0a0b0f !important;
  border-color: transparent !important;
}

.btn-danger,
.action-btn.delete,
.action-btn.danger,
.btn-del,
button.danger {
  background: transparent !important;
  color: #fecdd3 !important;
  border: 1px solid rgb(248 113 113 / 45%) !important;
  font-weight: 600 !important;
}

.btn-danger:hover,
.action-btn.delete:hover,
.action-btn.danger:hover,
.btn-del:hover,
button.danger:hover {
  border-color: rgb(248 113 113 / 75%) !important;
  color: #fda4af !important;
}

.btn-sm,
.action-btn.sm {
  padding: 0.3rem 0.65rem !important;
  font-size: 0.8rem !important;
}

/* Hard-coded blue/cyan accents → force signal (common utilities) */
[style*="#22d3ee"],
[style*="#06b6d4"],
[style*="#3b82f6"],
[style*="#007acc"],
[style*="#4f46e5"],
[style*="#6366f1"] {
  /* can't rewrite attr; use filter on links with those inline colors via attribute selectors is limited */
}

/* Breadcrumbs */
.breadcrumb,
.breadcrumb a {
  color: #c5cad6 !important;
}
.breadcrumb a:hover {
  color: #b8ff78 !important;
}

/* Tool grids on category hubs */
.tool-grid a,
.tools-grid a,
.grid .card,
.tool-item {
  background: rgb(18 22 34 / 78%) !important;
  border: 1px solid rgb(184 255 120 / 14%) !important;
  border-radius: 14px !important;
  color: #eef2f7 !important;
  text-decoration: none !important;
}
.tool-grid a:hover,
.tools-grid a:hover,
.tool-item:hover {
  border-color: rgb(184 255 120 / 40%) !important;
}

/* Guide open-tool links */
.guide-card a[href*="/tools/"],
a.open-tool,
.tool-link {
  color: #b8ff78 !important;
}

/* Footers */
footer,
.site-footer,
.footer {
  border-top: 1px solid rgb(255 255 255 / 6%) !important;
  color: #8b93a7 !important;
  background: transparent !important;
}

/* Light theme disabled — unified dark only */
html[data-theme="light"] body,
body[data-theme="light"] {
  background-color: #07080c !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgb(184 255 120 / 12%), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 20%, rgb(80 140 255 / 8%), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath fill='none' stroke='%23b8ff78' stroke-opacity='0.12' stroke-width='1' d='M28 2 L54 17 V47 L28 62 L2 47 V17 Z'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #0e1018, #07080c 45%, #05060a) !important;
  color: #eef2f7 !important;
}

html[data-theme="light"] h1,
body[data-theme="light"] h1 {
  color: #b8ff78 !important;
}

/* Nuke leftover theme controls everywhere */
.theme-toggle,
.theme-btn,
#themeToggle,
#theme-toggle,
#theme-icon,
#themeBtn,
#theme-btn,
#lightBtn,
#darkBtn,
.theme-switch,
.dark-mode-toggle,
.light-dark-toggle,
[data-kc-theme-toggle],
.kc-theme-btn,
button[aria-label*="切换主题"],
button[aria-label*="主题"],
button[onclick*="toggleTheme"] {
  display: none !important;
}

/* ============================================================
 * Contrast lock — kill leftover light skins on tool pages
 * (white cards / #333 text / faint muted labels)
 * ============================================================ */
body:has(.kc-header) .tool-section,
body:has(.kc-header) .setup-section,
body:has(.kc-header) .main-panel,
body:has(.kc-header) .main-card,
body:has(.kc-header) .article-card,
body:has(.kc-header) .article-section,
body:has(.kc-header) .tool-guide,
body:has(.kc-header) .participant-form,
body:has(.kc-header) .grid-wrapper,
body:has(.kc-header) .editor-panel,
body:has(.kc-header) .config-panel,
body:has(.kc-header) .result-panel,
body:has(.kc-header) .sidebar-section .article-card,
body:has(.kc-header) .content-card,
body:has(.kc-header) .form-card,
body:has(.kc-header) .options-bar,
body:has(.kc-header) .control-panel {
  background: rgb(18 22 34 / 82%) !important;
  color: #eef2f7 !important;
  border-color: rgb(184 255 120 / 16%) !important;
  box-shadow: none !important;
}

body:has(.kc-header) label,
body:has(.kc-header) .form-group label,
body:has(.kc-header) .control-label,
body:has(.kc-header) .legend,
body:has(.kc-header) .legend-item,
body:has(.kc-header) .subtitle,
body:has(.kc-header) .desc,
body:has(.kc-header) .description,
body:has(.kc-header) .hint,
body:has(.kc-header) .help-text,
body:has(.kc-header) .muted,
body:has(.kc-header) .text-muted {
  color: #c5cad6 !important;
}

body:has(.kc-header) p,
body:has(.kc-header) li,
body:has(.kc-header) td,
body:has(.kc-header) th,
body:has(.kc-header) .faq-a,
body:has(.kc-header) .faq-q,
body:has(.kc-header) .how-list li {
  color: #eef2f7 !important;
}

body:has(.kc-header) .faq-a,
body:has(.kc-header) .text-secondary {
  color: #c5cad6 !important;
}

body:has(.kc-header) .participant-chip,
body:has(.kc-header) .chip,
body:has(.kc-header) .tag-chip {
  background: #12121a !important;
  color: #eef2f7 !important;
  border-color: rgb(184 255 120 / 35%) !important;
}

body:has(.kc-header) .grid-cell:not([class*="status-"]),
body:has(.kc-header) .grid-cell.name-cell,
body:has(.kc-header) .grid-cell.header {
  background-color: #12121a !important;
  color: #eef2f7 !important;
  border-color: rgb(184 255 120 / 10%) !important;
}

body:has(.kc-header) .grid-cell.header {
  background-color: #0e0e14 !important;
  color: #c5cad6 !important;
}

/* Keep semantic status cell colors readable on dark */
body:has(.kc-header) .status-available,
body:has(.kc-header) .grid-cell.status-available {
  background-color: #1a2e14 !important;
  color: #d4ff9a !important;
}
body:has(.kc-header) .status-busy,
body:has(.kc-header) .grid-cell.status-busy {
  background-color: #3a1218 !important;
  color: #fecdd3 !important;
}
body:has(.kc-header) .status-overlap,
body:has(.kc-header) .grid-cell.status-overlap {
  background-color: #b8ff78 !important;
  color: #07080c !important;
}

body:has(.kc-header) .btn-outline,
body:has(.kc-header) button.btn-outline {
  background: transparent !important;
  color: #eef2f7 !important;
  border: 1px solid rgb(184 255 120 / 28%) !important;
}

/* Inline light leftovers commonly left by MT / old templates */
body:has(.kc-header) [style*="color:#000"],
body:has(.kc-header) [style*="color: #000"],
body:has(.kc-header) [style*="color:#111"],
body:has(.kc-header) [style*="color: #111"],
body:has(.kc-header) [style*="color:#222"],
body:has(.kc-header) [style*="color:#333"],
body:has(.kc-header) [style*="color: #333"],
body:has(.kc-header) [style*="color:#555"],
body:has(.kc-header) [style*="color: #555"],
body:has(.kc-header) [style*="color:#666"],
body:has(.kc-header) [style*="color: #666"],
body:has(.kc-header) [style*="color:#2c3e50"] {
  color: #eef2f7 !important;
}

body:has(.kc-header) [style*="background:#fff"],
body:has(.kc-header) [style*="background: #fff"],
body:has(.kc-header) [style*="background:#ffffff"],
body:has(.kc-header) [style*="background: #ffffff"],
body:has(.kc-header) [style*="background-color:#fff"],
body:has(.kc-header) [style*="background-color: #fff"] {
  background: rgb(18 22 34 / 82%) !important;
  color: #eef2f7 !important;
}

/* Headings: no highlighter/green chip bg (was light-on-signal) */
body:has(.kc-header) h2,
body:has(.kc-header) h3,
body:has(.kc-header) h4 {
  color: #eef2f7 !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Do NOT zero h1 background-image: tool-layout uses gradient + text-clip titles.
   Clearing it leaves -webkit-text-fill-color:transparent with no paint → invisible titles. */

/* Tables: kill light thead cells under forced light text */
body:has(.kc-header) th,
body:has(.kc-header) thead td,
body:has(.kc-header) table thead {
  background: #0e0e14 !important;
  color: #c5cad6 !important;
}

/* SEO / guide / travel blocks still shipping light skins */
body:has(.kc-header) .seo-article,
body:has(.kc-header) .seo-card,
body:has(.kc-header) .pro-article,
body:has(.kc-header) .pro-tip,
body:has(.kc-header) .ad-placeholder,
body:has(.kc-header) .stat-card,
body:has(.kc-header) .summary-card:not(.total),
body:has(.kc-header) .travel-article,
body:has(.kc-header) .travel-article__panel,
body:has(.kc-header) .travel-faq details,
body:has(.kc-header) .travel-article__notice,
body:has(.kc-header) .travel-enhanced-block {
  background: rgb(18 22 34 / 88%) !important;
  background-image: none !important;
  color: #eef2f7 !important;
  border-color: rgb(184 255 120 / 16%) !important;
  box-shadow: none !important;
}

body:has(.kc-header) .travel-article__title,
body:has(.kc-header) .travel-article__section-title,
body:has(.kc-header) .travel-article__panel h3,
body:has(.kc-header) .seo-article h2,
body:has(.kc-header) .seo-article h3,
body:has(.kc-header) .seo-card h2 {
  color: #eef2f7 !important;
}

body:has(.kc-header) .travel-article__intro,
body:has(.kc-header) .travel-article__paragraph,
body:has(.kc-header) .travel-article__panel li,
body:has(.kc-header) .travel-article__steps li,
body:has(.kc-header) .travel-article__mistakes li,
body:has(.kc-header) .seo-article p,
body:has(.kc-header) .seo-article li {
  color: #c5cad6 !important;
}

body:has(.kc-header) .travel-article__notice {
  background: #122018 !important;
  color: #d4ff9a !important;
  border-color: rgb(184 255 120 / 22%) !important;
}

/* Broader inline slate leftovers */
body:has(.kc-header) [style*="color:#0f172a"],
body:has(.kc-header) [style*="color: #0f172a"],
body:has(.kc-header) [style*="color:#1e293b"],
body:has(.kc-header) [style*="color: #1e293b"],
body:has(.kc-header) [style*="color:#1f2937"],
body:has(.kc-header) [style*="color: #1f2937"],
body:has(.kc-header) [style*="color:#111827"],
body:has(.kc-header) [style*="color: #111827"],
body:has(.kc-header) [style*="color:#334155"],
body:has(.kc-header) [style*="color: #334155"],
body:has(.kc-header) [style*="color:#475569"],
body:has(.kc-header) [style*="color: #475569"],
body:has(.kc-header) [style*="color:#4b5563"],
body:has(.kc-header) [style*="color: #4b5563"],
body:has(.kc-header) [style*="color:#64748b"],
body:has(.kc-header) [style*="color: #64748b"],
body:has(.kc-header) [style*="color:#999"],
body:has(.kc-header) [style*="color: #999"] {
  color: #eef2f7 !important;
}

body:has(.kc-header) [style*="background:#f8fafc"],
body:has(.kc-header) [style*="background: #f8fafc"],
body:has(.kc-header) [style*="background:#f9fafb"],
body:has(.kc-header) [style*="background: #f9fafb"],
body:has(.kc-header) [style*="background:#f9f9f9"],
body:has(.kc-header) [style*="background: #f9f9f9"],
body:has(.kc-header) [style*="background-color:#f8fafc"],
body:has(.kc-header) [style*="background-color:#f9fafb"],
body:has(.kc-header) [style*="background-color:#f9f9f9"] {
  background: rgb(18 22 34 / 82%) !important;
  color: #eef2f7 !important;
}

/* Nuclear: page skins that still paint light canvases / panels */
body:has(.kc-header),
body:has(.kc-header).dark,
body:has(.kc-header).theme-dark,
html:has(.kc-header) body {
  background-color: #07080c !important;
  color: #eef2f7 !important;
}

body:has(.kc-header) .main-content,
body:has(.kc-header) .hero-side,
body:has(.kc-header) .drop-zone,
body:has(.kc-header) .focus-card,
body:has(.kc-header) .setting-card,
body:has(.kc-header) .toggle-card,
body:has(.kc-header) .gantt-form,
body:has(.kc-header) .guide,
body:has(.kc-header) .info-panel,
body:has(.kc-header) .options-grid,
body:has(.kc-header) .equation-panel,
body:has(.kc-header) .preview-panel,
body:has(.kc-header) .editor-panel,
body:has(.kc-header) header:not(.kc-header):not([class*="site"]),
body:has(.kc-header) table,
body:has(.kc-header) tbody,
body:has(.kc-header) tr,
body:has(.kc-header) td {
  background-color: transparent !important;
  background-image: none !important;
  color: #eef2f7 !important;
}

body:has(.kc-header) .drop-zone,
body:has(.kc-header) .focus-card,
body:has(.kc-header) .setting-card,
body:has(.kc-header) .toggle-card,
body:has(.kc-header) .gantt-form,
body:has(.kc-header) .guide,
body:has(.kc-header) .info-panel,
body:has(.kc-header) .options-grid,
body:has(.kc-header) .equation-panel,
body:has(.kc-header) .hero-side {
  background: rgb(18 22 34 / 88%) !important;
  border-color: rgb(184 255 120 / 16%) !important;
}

body:has(.kc-header) tbody tr:nth-child(even) td {
  background-color: rgb(14 14 20 / 70%) !important;
}