@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Noto+Sans+KR:wght@400;700&display=swap');
:root { --bg-dark: #0f172a; --bg-panel: #1e293b; --border: #334155; --text-primary: #e2e8f0; }
body { font-family: 'Noto Sans KR', 'JetBrains Mono', sans-serif; background-color: var(--bg-dark); color: var(--text-primary); margin: 0; padding: 0; }

.section-header { 
    display: flex; align-items: center; 
    font-size: 1.15rem; font-weight: 700; 
    margin-bottom: 0.25rem; /* 제목 상단 공백 최소화 */
    margin-top: -0.25rem; 
}
.section-header i { margin-right: 14px; } /* 아이콘 간격 확대 */

.tool-card { background-color: var(--bg-panel); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.custom-input { background-color: #0f172a; border: 1px solid var(--border); padding: 0.6rem 0.8rem; border-radius: 0.6rem; width: 100%; color: #fbbf24; outline: none; font-family: 'JetBrains Mono'; }
.custom-input:focus { border-color: #3b82f6; }
.bit-box { display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #475569; border-radius: 4px; background-color: #0f172a; }
.bit-box.active { background-color: #3b82f6; color: white; border-color: #60a5fa; box-shadow: 0 0 12px rgba(59, 130, 246, 0.4); }
.animate-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Standalone site frame */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
a { color: inherit; }
.site-shell { min-height: 100vh; background: #f3f5f8; color: #172033; }
.site-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 0 5vw; border-bottom: 1px solid #dce4ef; background: rgba(255,255,255,.92); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 11px; color: #172033; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
.brand strong { color: #176f75; }
.brand-mark { display: block; width: 35px; height: 35px; flex: 0 0 35px; border: 1px solid #9ccbc7; border-radius: 9px; background: #eef7f6; object-fit: cover; }
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a, .site-footer a { color: #607089; font-size: .82rem; font-weight: 700; text-decoration: none; }
.site-nav a:hover, .site-footer a:hover { color: #176f75; }
.hero-section { position: relative; max-width: 1180px; margin: 38px auto 42px; padding: 76px 64px 62px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 28px; background: linear-gradient(135deg, #0e1b33 0%, #172b4d 58%, #153d56 100%); box-shadow: 0 28px 70px rgba(22,39,65,.18); }
.hero-section::before { content: ''; position: absolute; width: 330px; height: 330px; right: -90px; top: -150px; border-radius: 50%; border: 1px solid rgba(103,232,249,.18); box-shadow: 0 0 0 46px rgba(103,232,249,.035), 0 0 0 92px rgba(103,232,249,.025); }
.hero-section::after { content: ''; position: absolute; right: 70px; bottom: -130px; width: 340px; height: 240px; background: radial-gradient(circle, rgba(45,212,191,.18), transparent 68%); }
.eyebrow { margin: 0 0 14px; color: #2870d8; font: 700 .68rem 'JetBrains Mono', monospace; letter-spacing: .15em; }
.hero-section .eyebrow { color: #67e8f9; }
.hero-section h1 { position: relative; z-index: 1; max-width: 760px; margin: 0; color: #f8fbff; font-size: clamp(2.25rem, 5vw, 4.15rem); line-height: 1.1; letter-spacing: -.055em; }
.hero-section h1 span:last-child { color: #69d5ca; }
.hero-copy { position: relative; z-index: 1; max-width: 680px; margin: 22px 0 0; color: #b9c7d9; font-size: clamp(.96rem, 1.6vw, 1.08rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 22px; border-radius: 10px; font-size: .9rem; font-weight: 800; text-decoration: none; }
.button.primary { position: relative; z-index: 1; background: linear-gradient(135deg, #238b87, #176f75); color: white; box-shadow: 0 12px 30px rgba(23,111,117,.3); }
.button.primary:hover { background: linear-gradient(135deg, #2b9992, #13656b); transform: translateY(-1px); }
.button.secondary { border: 1px solid #cbd6e5; background: #fff; color: #405069; }
.trust-list { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 30px 0 0; padding: 0; color: #9fb0c6; font-size: .78rem; list-style: none; }
.trust-list li::before { content: '✓'; margin-right: 7px; color: #34d399; }
.tool-section { padding: 74px max(24px, 5vw) 92px; border-top: 1px solid #dde3eb; background: linear-gradient(180deg, #eef2f6 0%, #f6f7f9 100%); }
.section-heading, .about-strip { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; max-width: 1180px; margin: 0 auto; align-items: end; }
.section-heading h2, .about-strip h2 { margin: 0; color: #172033; font-size: clamp(1.65rem, 3vw, 2.25rem); letter-spacing: -.04em; }
.section-heading > p, .about-strip > p { margin: 0; color: #607089; line-height: 1.75; }
.category-block { max-width: 1180px; margin: 58px auto 0; }
.category-block h3 { margin: 0 0 18px; color: #65758c; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-tile { position: relative; display: grid; grid-template-columns: 50px 1fr; grid-template-rows: auto auto; gap: 5px 15px; min-height: 116px; padding: 22px; overflow: hidden; border: 1px solid #dce3ec; border-radius: 17px; background: rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(38,54,78,.055); text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.tool-tile::after { content: '›'; position: absolute; right: 18px; top: 18px; color: #c3cfdd; font-size: 1.25rem; transition: transform .2s ease, color .2s ease; }
.tool-tile:hover { transform: translateY(-4px); border-color: #9bb9df; box-shadow: 0 16px 38px rgba(31,52,82,.12); }
.tool-tile:hover::after { transform: translateX(3px); color: #397bd1; }
.tool-tile.featured { border-color: #d7e0eb; background: #fff; }
.tool-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #c9ddf5; border-radius: 14px; background: linear-gradient(145deg, #f4f9ff, #e7f1fd); color: #2670cd; font-size: 1.05rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.category-block:nth-of-type(3) .tool-icon { border-color: #c9e6df; background: linear-gradient(145deg, #f0fbf8, #e3f4f0); color: #12806f; }
.category-block:nth-of-type(4) .tool-icon { border-color: #e6d8ef; background: linear-gradient(145deg, #fbf7fd, #f0e8f6); color: #7b4aa3; }
.tool-tile strong { align-self: end; color: #263349; font-size: .94rem; }
.tool-tile small { align-self: start; color: #708097; font-size: .75rem; line-height: 1.45; }
.about-strip { padding: 88px 24px; align-items: center; background: linear-gradient(90deg, transparent, rgba(218,228,240,.38), transparent); }
.site-footer { display: flex; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 28px 24px; border-top: 1px solid #dce4ef; color: #74839a; font-size: .75rem; }
.site-footer div { display: flex; gap: 20px; }

@media (max-width: 820px) {
  .site-header { padding: 0 18px; }
  .site-nav a:nth-child(3), .site-nav a:nth-child(4) { display: none; }
  .hero-section { margin: 20px 16px 32px; padding: 58px 32px 48px; }
  .section-heading, .about-strip { grid-template-columns: 1fr; gap: 18px; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .site-nav { gap: 14px; }
  .tool-grid { grid-template-columns: 1fr; }
  .hero-section h1 { font-size: 2.75rem; }
  .site-footer { flex-direction: column; gap: 16px; }
}
.language-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #cbd6e5; border-radius: 9px; background: #fff; }
.language-switch button { min-width: 38px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: #64748b; cursor: pointer; font: 800 .68rem 'JetBrains Mono', monospace; }
.language-switch button.active { background: #176f75; color: #fff; }

/* Shared light shell for every standalone tool. */
body.tool-page-shell { min-height: 100vh; padding: 0 !important; background: linear-gradient(180deg,#edf2f7 0,#f5f7fa 340px,#edf2f6 100%) !important; color: #25324a; }
.tool-site-header { width: 100%; }
.tool-breadcrumb { display: flex; align-items: center; gap: 12px; width: min(1280px, calc(100% - 48px)); margin: 28px auto 34px; color: #607089; font-size: .74rem; }
.tool-breadcrumb a { display: inline-flex; padding: 8px 11px; border: 1px solid #d3deeb; border-radius: 8px; background: #fff; color: #50627c; font-weight: 800; text-decoration: none; }
.tool-breadcrumb a:hover { border-color: #7aa7ef; color: #2563eb; }
.tool-breadcrumb + div, .tool-breadcrumb + main, .tool-breadcrumb + section { margin-bottom: 74px !important; }
.tool-site-footer { width: min(1180px, calc(100% - 48px)); margin-top: 72px; }
body.tool-page-shell .tool-card, body.tool-page-shell .input-card { background: #fbfdff !important; border-color: #bfcfe1 !important; box-shadow: 0 13px 34px rgba(31,51,76,.11) !important; }
body.tool-page-shell .tool-card { border-top-color: #7ba7de !important; }
body.tool-page-shell article.tool-card { background: linear-gradient(135deg,#edf5fc,#e7f5f2) !important; border-color: #b9d4d5 !important; }
body.tool-page-shell [class*="bg-slate-950"], body.tool-page-shell [class~="bg-slate-900"], body.tool-page-shell [class~="bg-slate-900/50"], body.tool-page-shell [class~="bg-slate-900/40"], body.tool-page-shell [class~="bg-slate-800/40"] { background-color: #e7f0f8 !important; }
body.tool-page-shell [class~="bg-slate-800"] { background-color: #dfe9f3 !important; }
body.tool-page-shell [class*="bg-[#0f172a]"], body.tool-page-shell [class*="bg-[#090d16]"], body.tool-page-shell [class*="bg-[#0a0f1d]"] { background-color: #e8f1f7 !important; }
body.tool-page-shell [class*="border-indigo-500/"], body.tool-page-shell [class*="border-blue-500/"] { background-color: #edf1ff !important; }
body.tool-page-shell [class*="border-emerald-500/"], body.tool-page-shell [class*="border-teal-500/"] { background-color: #e8f8f3 !important; }
body.tool-page-shell [class~="text-white"], body.tool-page-shell [class~="text-slate-200"], body.tool-page-shell [class~="text-slate-300"] { color: #26354c !important; }
body.tool-page-shell [class~="text-slate-400"] { color: #5f7088 !important; }
body.tool-page-shell [class~="text-slate-500"] { color: #718198 !important; }
body.tool-page-shell [class~="text-blue-300"], body.tool-page-shell [class~="text-blue-400"] { color: #1d5fc4 !important; }
body.tool-page-shell [class~="text-emerald-300"], body.tool-page-shell [class~="text-emerald-400"], body.tool-page-shell [class~="text-green-400"] { color: #087a57 !important; }
body.tool-page-shell [class~="text-amber-300"], body.tool-page-shell [class~="text-amber-400"], body.tool-page-shell [class~="text-amber-500"], body.tool-page-shell [class~="text-yellow-400"], body.tool-page-shell [class~="text-yellow-500"] { color: #a85408 !important; }
body.tool-page-shell [class~="text-rose-300"], body.tool-page-shell [class~="text-rose-400"], body.tool-page-shell [class~="text-pink-400"], body.tool-page-shell [class~="text-pink-500"] { color: #c02667 !important; }
body.tool-page-shell [class~="text-indigo-300"], body.tool-page-shell [class~="text-indigo-400"] { color: #5145cd !important; }
body.tool-page-shell [class~="text-teal-300"], body.tool-page-shell [class~="text-teal-400"], body.tool-page-shell [class~="text-cyan-300"], body.tool-page-shell [class~="text-cyan-400"] { color: #087f8c !important; }
body.tool-page-shell [class*="text-teal-500/"], body.tool-page-shell [class*="text-cyan-500/"] { color: #08707c !important; }
body.tool-page-shell [class~="text-purple-300"], body.tool-page-shell [class~="text-purple-400"] { color: #7047b7 !important; }
body.tool-page-shell [class*="text-white/"] { color: #607089 !important; }
body.tool-page-shell [class*="border-slate-800"], body.tool-page-shell [class*="border-slate-700"] { border-color: #d8e2ee !important; }
body.tool-page-shell input:not([type="color"]):not([type="range"]), body.tool-page-shell textarea, body.tool-page-shell select { background-color: #fff !important; border-color: #b9cbe0 !important; box-shadow: inset 0 1px 2px rgba(35,55,78,.04); }
body.tool-page-shell input:not([type="color"]):not([type="range"]), body.tool-page-shell textarea, body.tool-page-shell select { color: #26354c !important; }
body.tool-page-shell input::placeholder, body.tool-page-shell textarea::placeholder { color: #8a98ab !important; opacity: 1; }
body.tool-page-shell pre { background-color: #172033 !important; color: #8fe3b5 !important; }
body.tool-page-shell [class~="bg-blue-600"].text-white, body.tool-page-shell [class~="bg-emerald-600"].text-white { color: #fff !important; }
body.tool-page-shell [class~="bg-blue-600"].text-white *, body.tool-page-shell [class~="bg-emerald-600"].text-white * { color: inherit !important; }
body.tool-page-shell .toast { background: #172033 !important; color: #fff !important; border-color: #4f86dc !important; }
body.tool-page-shell .toast * { color: inherit !important; }
body.tool-page-shell .bit-box { background: #e4edf7; border-color: #afc3da; color: #50627c; }
body.tool-page-shell .bit-box.active { background: #2563eb; border-color: #2563eb; color: #fff; }
body.tool-page-shell .lsb-display,
body.tool-page-shell .conversion-group,
body.tool-page-shell .converter-card,
body.tool-page-shell .formula-box,
body.tool-page-shell .dropzone,
body.tool-page-shell .monitor-container,
body.tool-page-shell .table-container,
body.tool-page-shell .node-config-card,
body.tool-page-shell .res-input-card,
body.tool-page-shell .timeline-area,
body.tool-page-shell .cursor-tray,
body.tool-page-shell .mode-toggle,
body.tool-page-shell .mode-switch,
body.tool-page-shell .calc-btn,
body.tool-page-shell .action-btn,
body.tool-page-shell .preset-btn,
body.tool-page-shell .node-step-btn,
body.tool-page-shell .unit-btn,
body.tool-page-shell .unit-btn-small,
body.tool-page-shell .opt-btn { background-color: #e6eef7 !important; border-color: #bdcde0 !important; color: #465b76 !important; }
body.tool-page-shell .opt-btn.active,
body.tool-page-shell .mode-toggle button.active,
body.tool-page-shell .mode-switch button.active,
body.tool-page-shell .tab-btn.active,
body.tool-page-shell .calc-btn.op { background-color: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }
body.tool-page-shell .opt-btn.active *, body.tool-page-shell .mode-toggle button.active *, body.tool-page-shell .mode-switch button.active *, body.tool-page-shell .tab-btn.active * { color: inherit !important; }
body.tool-page-shell .custom-input,
body.tool-page-shell .input-field,
body.tool-page-shell .table-input,
body.tool-page-shell .node-ctrl-input,
body.tool-page-shell .step-input { background-color: #f7f9fc !important; border-color: #cbd7e6 !important; color: #2563eb !important; }
body.tool-page-shell .result-table td, body.tool-page-shell .signal-row { border-color: #dce4ee !important; }
body.tool-page-shell .signal-row:hover, body.tool-page-shell .table-input:focus, body.tool-page-shell .node-config-card:focus-within, body.tool-page-shell .res-input-card:focus-within { background-color: #edf4fc !important; }
body.tool-page-shell button[class*="bg-blue-600/20"] { background: #e3efff !important; border-color: #9bbcf0 !important; color: #1859b5 !important; }
body.tool-page-shell .main-display, body.tool-page-shell .mode-value, body.tool-page-shell .calc-btn { color: #26354c !important; }
body.tool-page-shell .calc-btn.equals { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }
body.tool-page-shell .calc-mode-row.active { color: #1859b5 !important; background: #e5effe !important; }
body.tool-page-shell .tq-label-value { color: #26354c !important; }
body.tool-page-shell .active-row td { color: #1d4f91 !important; }
body.tool-page-shell .cursor-btn.active-a { color: #8a4b00 !important; background: #fff4cc !important; }
body.tool-page-shell [class~="bg-slate-700"].text-white { background: #e7edf5 !important; border-color: #cbd7e6 !important; color: #26354c !important; }
body.tool-page-shell .step-btn { background: #e1e8f1 !important; border-color: #c4d0df !important; color: #52627a !important; }

/* Focused tool palettes: neutral surfaces with color reserved for actions and state. */
body.register-page .tool-card { background: #fcfdff !important; border-color: #c7d4e2 !important; }
body.register-page .tool-card:first-of-type { border-top-color: #2f8f83 !important; }
body.register-page .bit-box { background: #fff; border-color: #aebfd2; color: #38536f; box-shadow: 0 2px 5px rgba(35,55,78,.05); }
body.register-page .bit-box:hover { border-color: #5387b8; background: #f2f7fb; }
body.register-page .bit-box.active { background: #147d76; border-color: #147d76; color: #fff; box-shadow: 0 5px 12px rgba(20,125,118,.22); }
body.register-page [class*="bg-slate-950"] { background: #f5f7fa !important; border-color: #d1dae5 !important; }
body.register-page #decOutput, body.register-page #selectedBits { color: #176b70 !important; }
body.register-page #binOutput { color: #315f7c !important; }
body.register-page #codeGenArea { background: #182638 !important; border-color: #263c55 !important; color: #b7e4d8 !important; box-shadow: inset 0 1px 8px rgba(5,15,28,.18); }
body.register-page .register-copy-btn { background-color: #176f75 !important; background-image: linear-gradient(135deg,#226f9d,#147d76) !important; border: 1px solid #176f75 !important; color: #fff !important; box-shadow: 0 7px 16px rgba(24,96,116,.2); }
body.register-page .register-copy-btn:hover { filter: brightness(1.06); }
body.register-page .text-indigo-300, body.register-page .text-indigo-400 { color: #176b70 !important; }
body.register-page [class*="text-indigo-"] { color: #176b70 !important; }
body.register-page .mode-toggle button { background: #f3f6f9 !important; border-color: #cbd6e1 !important; color: #52667c !important; }
body.register-page .mode-toggle button.active { background: #176f75 !important; border-color: #176f75 !important; color: #fff !important; box-shadow: none; }
body.register-page button[onclick="clearBitfield()"] { background: #e7edf3 !important; border-color: #cbd6e1 !important; color: #40566f !important; }
body.register-page button[onclick="clearBitfield()"]:hover { background: #dce6ee !important; border-color: #b9c9d8 !important; color: #9a4d56 !important; }

body.memory-layout-page .tool-card { background: #fcfdff !important; border-color: #c7d4e2 !important; }
body.memory-layout-page .table-container { border: 1px solid #d6dfe8; border-radius: 10px; background: #fff; }
body.memory-layout-page table thead { background: #eef2f6 !important; color: #53677e; }
body.memory-layout-page table tbody tr { background: #fff; }
body.memory-layout-page table tbody tr:nth-child(even) { background: #f7f9fb; }
body.memory-layout-page table tbody tr:hover { background: #eef5f7; }
body.memory-layout-page .table-input { background: rgba(255,255,255,.82) !important; border-color: #c5d1de !important; color: #274d6b !important; }
body.memory-layout-page .opt-btn { background: #f3f6f9 !important; border-color: #cbd6e1 !important; color: #52667c !important; }
body.memory-layout-page .opt-btn:hover:not(.active):not(:disabled) { background: #e9eff4 !important; color: #30465d !important; }
body.memory-layout-page .opt-btn.active { background: #176f75 !important; border-color: #176f75 !important; color: #fff !important; box-shadow: 0 4px 10px rgba(23,111,117,.18); }
body.memory-layout-page .opt-btn.active * { color: inherit !important; }
body.memory-layout-page button[class*="bg-blue-600"],
body.memory-layout-page button[class*="bg-emerald-600"] { background-color: #176f75 !important; border-color: #176f75 !important; color: #fff !important; box-shadow: 0 5px 12px rgba(23,111,117,.17); }
body.memory-layout-page button[class*="bg-blue-600"] *,
body.memory-layout-page button[class*="bg-emerald-600"] * { color: inherit !important; }
body.memory-layout-page #unit-btn-kb[class*="bg-blue-600"],
body.memory-layout-page #unit-btn-mb[class*="bg-blue-600"] { background-color: #176f75 !important; border-color: #176f75 !important; color: #fff !important; box-shadow: none; }
body.memory-layout-page button[class*="bg-blue-600/20"] { background: #eef7f6 !important; border-color: #9ccbc7 !important; color: #176f75 !important; box-shadow: none; }
body.memory-layout-page button[class*="bg-blue-600/20"]:hover { background: #176f75 !important; color: #fff !important; }

/* Calculator: keep actions distinct without the old sky-blue cast. */
body.calculator-page .tool-card { background: #fcfdff !important; border-color: #c9d5e1 !important; color: #26394f !important; box-shadow: 0 12px 30px rgba(42,65,91,.09) !important; }
body.calculator-page .active-calc { border-color: #2f837d !important; box-shadow: 0 0 0 2px rgba(47,131,125,.12), 0 14px 32px rgba(42,65,91,.12) !important; }
body.calculator-page .main-display { color: #176f75 !important; }
body.calculator-page .card-standard .main-display { color: #176f75 !important; }
body.calculator-page .calc-label, body.calculator-page [class*="text-blue-"], body.calculator-page [class*="text-emerald-"] { color: #176f75 !important; }
body.calculator-page .calc-mode-row { color: #50657b; }
body.calculator-page .calc-mode-row.active { background: #eaf5f3 !important; border-left-color: #2f837d !important; color: #176f75 !important; }
body.calculator-page .mode-value { color: #293d53 !important; }
body.calculator-page .calc-btn { background: #f4f7fa !important; border-color: #cad6e2 !important; color: #344b63 !important; }
body.calculator-page .calc-btn:hover:not(:disabled) { background: #e8eef4 !important; border-color: #afbfce !important; }
body.calculator-page .calc-btn.op { background: #edf5f4 !important; border-color: #b9d4d1 !important; color: #176f75 !important; }
body.calculator-page .calc-btn.action { background: #e8edf2 !important; border-color: #c4d0dc !important; color: #53677d !important; }
body.calculator-page .calc-btn.equals { background: #176f75 !important; border-color: #176f75 !important; color: #fff !important; }
body.calculator-page button[onclick*="addNewCalculator('programmer')"] { background: #176f75 !important; border-color: #176f75 !important; color: #fff !important; }
body.calculator-page button[onclick*="addNewCalculator('standard')"] { background: #e5ecf2 !important; border-color: #c5d1dc !important; color: #40566e !important; }

/* Text compare: light editor and diff surfaces with readable diff states. */
body.text-compare-page .input-card { background: #fcfdff !important; border-color: #c9d5e1 !important; }
body.text-compare-page .text-panel { background: #f7f9fb !important; border-color: #c6d3df !important; color: #263b51 !important; caret-color: #176f75; }
body.text-compare-page .text-panel:focus { background: #fff !important; border-color: #2f837d !important; box-shadow: 0 0 0 3px rgba(47,131,125,.1); }
body.text-compare-page .diff-viewer { background: #f7f9fb !important; border-color: #c9d5e1 !important; }
body.text-compare-page .diff-pane { background: #fff; scrollbar-color: #b8c6d3 #eef2f6; }
body.text-compare-page .diff-gutter { background: #eef2f6 !important; border-color: #cbd6e1 !important; }
body.text-compare-page .diff-gutter .diff-row { background: #eef2f6 !important; color: #60758a !important; }
body.text-compare-page .diff-gutter button { background: #fff !important; border: 1px solid #cbd6e1 !important; color: #176f75 !important; }
body.text-compare-page .diff-gutter button:hover { background: #176f75 !important; border-color: #176f75 !important; color: #fff !important; }
body.text-compare-page .diff-row { color: #31475d; }
body.text-compare-page .line-num { background: #f0f4f7 !important; border-color: #d4dde6 !important; color: #718196; }
body.text-compare-page .diff-added { background: #e8f5f0 !important; color: #176c5c !important; }
body.text-compare-page .diff-removed { background: #fbecef !important; color: #9a4652 !important; }
body.text-compare-page .diff-modified { background: #fff6df !important; color: #86601f !important; }
body.text-compare-page .char-added { background: #bce9d8 !important; color: #075e50 !important; }
body.text-compare-page .char-removed { background: #f2c3ca !important; color: #873b47 !important; }
body.text-compare-page .diff-empty { background: #f1f4f7 !important; color: #8694a5 !important; background-image: repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(129,148,167,.08) 10px,rgba(129,148,167,.08) 20px) !important; }
body.text-compare-page .diff-empty .line-num { background: #e9eef3 !important; color: #a3afbc !important; }

/* Binary converter: consistent light surfaces and teal actions. */
body.binary-converter-page .input-card { background: #fcfdff !important; border-color: #c9d5e1 !important; }
body.binary-converter-page .input-field { background: #f7f9fb !important; border-color: #c6d3df !important; color: #2d455c !important; }
body.binary-converter-page .input-field:focus { background: #fff !important; border-color: #2f837d !important; box-shadow: 0 0 0 3px rgba(47,131,125,.1) !important; }
body.binary-converter-page .dropzone { background: #f4f7fa !important; border-color: #b8c8d6 !important; color: #52677d !important; }
body.binary-converter-page .dropzone:hover, body.binary-converter-page .dropzone.dragover { background: #edf7f5 !important; border-color: #2f837d !important; }
body.binary-converter-page button[onclick="convertAndDownload()"] { background: #176f75 !important; border: 1px solid #176f75 !important; color: #fff !important; box-shadow: 0 7px 16px rgba(23,111,117,.18) !important; }
body.binary-converter-page .tab-btn { background: transparent !important; border: 1px solid transparent !important; color: #60758a !important; }
body.binary-converter-page .tab-btn.active { background: #176f75 !important; border-color: #176f75 !important; color: #fff !important; }
body.binary-converter-page .tab-btn:not(.active):hover { background: #e7eef3 !important; color: #344b62 !important; }
body.binary-converter-page .monitor-container { background: #f4f7fa !important; border-color: #c9d5e1 !important; color: #31485f !important; }
body.binary-converter-page .hex-address { color: #718196 !important; }
body.binary-converter-page .hex-data { color: #2f465d !important; }
body.binary-converter-page .hex-ascii { color: #176f75 !important; }
body.binary-converter-page [class*="bg-slate-950"] { background: #edf2f6 !important; border-color: #cbd6e1 !important; }

/* RS485 controls */
body.rs485-page .mode-switch { background: #edf2f6 !important; border-color: #c8d4df !important; }
body.rs485-page .mode-switch button { background: transparent !important; border: 1px solid transparent !important; color: #5b7086 !important; }
body.rs485-page .mode-switch button.active, body.rs485-page .toggle-btn.active { background: #176f75 !important; border-color: #176f75 !important; color: #fff !important; }
body.rs485-page .toggle-btn:not(.active) { background: #f3f6f9 !important; border-color: #cbd6e1 !important; color: #5b7086 !important; }
body.rs485-page .node-step-btn, body.rs485-page .unit-btn-small { background: #edf2f6 !important; border-color: #c4d1dc !important; color: #40576f !important; }
body.rs485-page .node-step-btn:hover, body.rs485-page .unit-btn-small:hover { background: #176f75 !important; border-color: #176f75 !important; color: #fff !important; }

/* CAN / CAN FD mode controls */
body.can-timing-page #btn-std, body.can-timing-page #btn-fd { background: transparent !important; border: 1px solid transparent !important; color: #5b7086 !important; box-shadow: none !important; }
body.can-timing-page #btn-std[class*="bg-blue-600"], body.can-timing-page #btn-fd[class*="bg-blue-600"] { background: #176f75 !important; border-color: #176f75 !important; color: #fff !important; }
body.can-timing-page .active-row { background: #eaf5f3 !important; border-left-color: #176f75 !important; }
body.can-timing-page .active-row td { color: #28445a !important; }

/* ASCII converter options */
body.ascii-page .opt-btn { background: #f3f6f9 !important; border-color: #cbd6e1 !important; color: #52667c !important; }
body.ascii-page .opt-btn.active { background: #176f75 !important; border-color: #176f75 !important; color: #fff !important; }
body.ascii-page .opt-btn:hover:not(.active):not(:disabled) { background: #e7eef3 !important; border-color: #b8c7d5 !important; color: #30475e !important; }
body.ascii-page button[onclick="clearAllFields()"] { background: #e8edf2 !important; border-color: #c6d2dd !important; color: #52667c !important; }
body.ascii-page button[onclick="clearAllFields()"]:hover { background: #f7e9ec !important; border-color: #dfb7bf !important; color: #9a4652 !important; }
body.ascii-page .table-container { background: #fff !important; border-color: #c9d5e1 !important; }

/* Flowchart: a diagramming canvas, not a dark code panel. */
body.flowchart-page .input-card { background: #fcfdff !important; border-color: #c9d5e1 !important; }
body.flowchart-page .input-field, body.flowchart-page .table-input { background: #f7f9fb !important; border-color: #c6d3df !important; color: #2d455c !important; }
body.flowchart-page .input-field:focus, body.flowchart-page .table-input:focus { background: #fff !important; border-color: #2f837d !important; }
body.flowchart-page #visual-map-container { background-color: #fff; border-color: #c9d5e1 !important; background-image: radial-gradient(#d8e1e9 1px, transparent 1px); background-size: 20px 20px; box-shadow: inset 0 1px 8px rgba(42,65,91,.05); }
body.flowchart-page .opt-btn { background: #f3f6f9 !important; border-color: #cbd6e1 !important; color: #52667c !important; }
body.flowchart-page .opt-btn.active { background: #176f75 !important; border-color: #176f75 !important; color: #fff !important; }
body.flowchart-page button[class*="bg-blue-600"], body.flowchart-page button[class*="bg-emerald-600"] { background: #176f75 !important; border-color: #176f75 !important; color: #fff !important; }
body.flowchart-page button[class*="bg-blue-600/20"] { background: #eef7f6 !important; border-color: #9ccbc7 !important; color: #176f75 !important; }
body.flowchart-page .table-container thead { background: #edf2f6 !important; }
body.flowchart-page .table-container tbody { color: #344b62 !important; }

@media (max-width: 820px) {
  .tool-breadcrumb { width: calc(100% - 32px); margin: 20px auto 28px; }
  .tool-site-footer { width: calc(100% - 32px); }
}

/* Contact and privacy pages */
.info-page { min-height: 100vh; display: flex; flex-direction: column; }
.info-main { width: min(1120px, calc(100% - 48px)); margin: 42px auto 72px; flex: 1; }
.info-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 72px 1fr; gap: 26px; align-items: start; padding: 46px 50px; color: #fff; border: 1px solid rgba(255,255,255,.09); border-radius: 24px; background: radial-gradient(circle at 88% 12%, rgba(45,212,191,.18), transparent 29%), linear-gradient(135deg,#101a2f 0%,#172642 58%,#123c46 100%); box-shadow: 0 24px 60px rgba(22,34,54,.18); }
.info-hero::after { content: ''; position: absolute; right: -55px; bottom: -95px; width: 260px; height: 260px; border: 1px solid rgba(94,234,212,.16); border-radius: 50%; }
.info-hero-icon { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid rgba(153,246,228,.24); border-radius: 18px; background: rgba(15,118,110,.22); color: #99f6e4; font-size: 1.55rem; }
.info-hero .eyebrow { margin: 2px 0 10px; color: #5eead4; font: 800 .72rem/1 'JetBrains Mono', monospace; letter-spacing: .16em; }
.info-hero h1 { margin: 0; max-width: 760px; font-size: clamp(2rem,4vw,3.15rem); line-height: 1.15; letter-spacing: -.045em; }
.info-hero p:not(.eyebrow) { max-width: 710px; margin: 16px 0 0; color: #bdcadb; font-size: .98rem; line-height: 1.8; }
.contact-layout { display: grid; grid-template-columns: 1.18fr .82fr; gap: 22px; margin-top: 22px; }
.info-card, .topic-card, .policy-card { border: 1px solid #dfe5ec; background: rgba(255,255,255,.9); box-shadow: 0 14px 38px rgba(35,49,70,.07); }
.info-card { padding: 40px; border-radius: 20px; }
.card-label { margin: 0 0 14px; color: #0f766e; font: 800 .7rem 'JetBrains Mono', monospace; letter-spacing: .13em; }
.info-card h2 { margin: 0; color: #172033; font-size: 1.5rem; letter-spacing: -.03em; }
.info-card > p:not(.card-label) { margin: 14px 0 28px; color: #64748b; line-height: 1.75; }
.email-link { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; padding: 15px 18px; border: 1px solid #b9d8d4; border-radius: 12px; background: #edf9f7; color: #0f766e; font-weight: 800; text-decoration: none; }
.email-link span { overflow-wrap: anywhere; }
.email-link .fa-arrow-up-right-from-square { margin-left: 8px; font-size: .72rem; opacity: .65; }
.email-link:hover { border-color: #5bb7aa; background: #e2f6f2; }
.contact-topics { display: grid; gap: 12px; }
.topic-card { display: grid; grid-template-columns: 46px 1fr; gap: 15px; align-items: center; padding: 21px; border-radius: 17px; }
.topic-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }
.topic-icon.rose { color: #be3455; background: #fff0f3; }.topic-icon.amber { color: #a9600b; background: #fff6dd; }.topic-icon.teal { color: #087c70; background: #e7f8f5; }
.topic-card h2 { margin: 0 0 5px; color: #243047; font-size: .94rem; }.topic-card p { margin: 0; color: #718096; font-size: .79rem; line-height: 1.55; }
.policy-date { display: inline-block; margin-top: 18px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #c6d3df; background: rgba(255,255,255,.06); font-size: .72rem; }
.policy-card { margin-top: 22px; padding: 12px 42px; border-radius: 20px; }
.policy-card article { display: grid; grid-template-columns: 48px 1fr; gap: 22px; padding: 30px 0; border-bottom: 1px solid #e6ebf0; }
.policy-card article:last-child { border-bottom: 0; }
.policy-card article > span { color: #0f8a7d; font: 800 .76rem 'JetBrains Mono', monospace; }
.policy-card h2 { margin: -4px 0 10px; color: #202d42; font-size: 1.05rem; }
.policy-card p { max-width: 850px; margin: 0; color: #66758a; font-size: .9rem; line-height: 1.8; }
.text-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; color: #0f766e; font-weight: 800; font-size: .84rem; text-decoration: none; }
.text-link:hover { gap: 13px; }
.site-nav a[aria-current="page"] { color: #0f766e; }
@media (max-width: 760px) {
  .info-main { width: calc(100% - 28px); margin-top: 20px; }
  .info-hero { grid-template-columns: 1fr; padding: 34px 26px; }
  .info-hero-icon { width: 54px; height: 54px; }
  .contact-layout { grid-template-columns: 1fr; }
  .info-card { padding: 28px 24px; }
  .policy-card { padding: 4px 24px; }
  .policy-card article { grid-template-columns: 36px 1fr; gap: 12px; }
}