:root {
  /* Light Theme Variables */
  --bg: #FBFBFA;
  --text: #37352F;
  --text-muted: #787774;
  --card-bg: #FFFFFF;
  --card-border: rgba(55, 53, 47, 0.09);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04);
  --input-bg: #F1F0EF;
  --primary: #37352F; 
  --accent-blue: #2383E2;
  --hover-bg: #EAE9E8;
  --focus-ring: rgba(55, 53, 47, 0.15);
  --radius: 8px;
  --header-h: 64px;
  --badge-fail: #EB5757;
  --badge-aa: #D9730D;
  --badge-aaa: #0F7B6C;
  --badge-bg: #F1F0EF;
  --badge-text: #605F5C;
  
  /* SVG Stroke override */
  --svg-stroke: #37352F;

  /* Slider Specifics (Light) */
  --slider-track: #F1F0EF;
  --slider-track-hover: #E3E2E0; /* Чуть темнее фона при ховере */
  --slider-thumb: #FFFFFF;
  --slider-border: rgba(0, 0, 0, 0.15);
  --slider-border-hover: rgba(0, 0, 0, 0.35); /* Более заметная обводка */
}

/* Dark Theme Variables */
body.dark-mode {
  --bg: #191919;
  --text: #EDEDED;
  --text-muted: #9B9B9B;
  --card-bg: #202020;
  --card-border: rgba(255, 255, 255, 0.08);
  --card-shadow: 0 1px 4px rgba(0,0,0,0.2);
  --input-bg: #2C2C2C;
  --primary: #D3D3D3;
  --hover-bg: #333333;
  --focus-ring: rgba(255, 255, 255, 0.15);
  --badge-bg: #2C2C2C;
  --badge-text: #C0C0C0;
  --svg-stroke: #D3D3D3;

  /* Slider Specifics (Dark) */
  --slider-track: #2C2C2C;
  --slider-track-hover: #3D3D3D; /* Чуть светлее фона при ховере */
  --slider-thumb: #3F3F3F;
  --slider-border: rgba(255, 255, 255, 0.2);
  --slider-border-hover: rgba(255, 255, 255, 0.6); /* Яркая обводка */
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background-color: var(--bg); 
  color: var(--text);
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 60px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* MODIFIED: Removed background-color transition to prevent load flash */
  transition: color 0.3s;
}

/* HEADER */
.top-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: var(--bg); border-bottom: 1px solid var(--card-border); z-index: 1000; display: flex; justify-content: center; transition: background 0.3s, border 0.3s; }

.header-content { width: 100%; max-width: 1080px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 100%; }
.left-section { display: flex; align-items: center; gap: 16px; }
.logo { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.logo svg { width: 24px; height: 24px; }
.logo svg pattern path { stroke: var(--text); opacity: 0.5; } 
.logo svg circle[fill="#37352F"] { fill: var(--text); }

.nav-controls { display: flex; align-items: center; gap: 8px; }
.nav-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); background: transparent; border: none; transition: background 0.2s; text-decoration: none; }
.nav-btn:hover { background: var(--hover-bg); }
.icon-btn { padding: 8px; }

/* LANG DROPDOWN */
.lang-dropdown { position: relative; margin-left: 4px; }
.lang-menu { position: absolute; top: 100%; right: 0; margin-top: 8px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; min-width: 150px; overflow: hidden; display: none; flex-direction: column; z-index: 2000; }
.lang-dropdown.open .lang-menu { display: flex; }
.lang-opt { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; transition: 0.1s; color: var(--text); font-size: 13px; font-weight: 500; }
.lang-opt:hover { background: var(--input-bg); }
.lang-flag svg, #currentFlag svg { display: block; width: 16px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }

/* LAYOUT */
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: stretch; }
@media(min-width: 768px) { .grid { grid-template-columns: 1fr 1fr; } .wcag-full { grid-column: 1 / -1; } }

/* CARD */
.card { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); border-radius: 12px; padding: 0; display: flex; flex-direction: column; overflow: hidden; transition: background 0.3s, border 0.3s; }

.abc-group { position: relative; padding: 24px 28px; padding-left: 64px; transition: background 0.2s; }
.abc-badge { position: absolute; left: 28px; top: 20px; width: 24px; height: 24px; background: var(--badge-bg); color: var(--badge-text); border-radius: 50%; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: monospace; transition: background 0.2s, color 0.2s; }
.abc-group:hover .abc-badge { background: var(--text); color: var(--bg); }

.control-group label, .wcag-lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.05em; }

/* INPUTS */
.input-row { display: flex; align-items: center; gap: 12px; background: var(--input-bg); padding: 8px 12px; border-radius: 8px; height: 44px; border: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s, background 0.3s; }
.input-row:hover { border-color: var(--focus-ring); }
.input-row:focus-within { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

.color-box { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--card-border); position: relative; overflow: hidden; flex-shrink: 0; }
.native-color { position: absolute; top: -5px; left: -5px; width: 40px; height: 40px; border: none; padding: 0; cursor: pointer; }
.native-color::-moz-color-swatch { border: none; }

.hex-text { flex-grow: 1; background: transparent; border: none; color: var(--text); font-family: monospace; font-size: 15px; font-weight: 600; text-transform: uppercase; outline: none; width: 100%; }
.hash, .unit { font-family: monospace; color: var(--text-muted); font-size: 15px; font-weight: 600; }
.v-divider { width: 1px; height: 20px; background: var(--text-muted); opacity: 0.2; margin: 0 4px; }

/* Number Input */
.num-input { width: 42px; background: transparent; border: none; font-family: monospace; font-size: 15px; font-weight: 600; color: var(--text); text-align: right; outline: none; padding-right: 2px; -moz-appearance: textfield; appearance: textfield; }
.num-input::-webkit-outer-spin-button, .num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* SLIDER */
.slider-row { display: flex; align-items: center; gap: 12px; height: 30px; margin-top: 12px; }
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; cursor: pointer; height: 30px; margin: 0; }

/* Track Styles */
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 5px; background: var(--slider-track); border-radius: 3px; border: none; transition: background 0.3s; }
input[type=range]::-moz-range-track { width: 100%; height: 5px; background: var(--slider-track); border-radius: 3px; border: none; transition: background 0.3s; }

/* Track Hover */
input[type=range]:hover::-webkit-slider-runnable-track { background: var(--slider-track-hover); }
input[type=range]:hover::-moz-range-track { background: var(--slider-track-hover); }

/* Thumb Styles */
input[type=range]::-webkit-slider-thumb { 
  -webkit-appearance: none; 
  height: 20px; 
  width: 20px; 
  border-radius: 50%; 
  background: var(--slider-thumb); 
  border: 2px solid var(--slider-border); 
  margin-top: -7.5px; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
  transition: transform 0.2s, border-color 0.2s, background 0.3s; 
}
input[type=range]::-moz-range-thumb { 
  height: 20px; 
  width: 20px; 
  border: 2px solid var(--slider-border); 
  border-radius: 50%; 
  background: var(--slider-thumb); 
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
  transition: transform 0.2s, border-color 0.2s, background 0.3s; 
  box-sizing: border-box; 
}

/* Thumb Hover Effect (Scaling + Lighter Border) */
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.1); border-color: var(--slider-border-hover); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.25); border-color: var(--primary); border-width: 2px; }

input[type=range]::-moz-range-thumb:hover { transform: scale(1.1); border-color: var(--slider-border-hover); }
input[type=range]:active::-moz-range-thumb { transform: scale(1.25); border-color: var(--primary); border-width: 2px; }


/* RESULT BOX */
.result-box { background: var(--input-bg); padding: 14px; border-radius: 8px; border: 1px solid transparent; transition: border-color 0.2s, background 0.3s; }
.result-box:hover { border-color: var(--focus-ring); }
.res-content-row { display: flex; justify-content: space-between; align-items: center; }
.res-display { display: flex; align-items: center; }
.res-hex { font-family: monospace; font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.2; display: flex; align-items: baseline; gap: 10px; }
.res-opacity { font-family: monospace; font-size: 24px; color: var(--text-muted); font-weight: 700; margin-left: 12px; }
.result-swatch { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--card-border); margin-right: 10px; }
.copy-btn { background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 6px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.copy-btn:hover { background: var(--hover-bg); color: var(--text); }
.formula { font-family: monospace; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; margin-top: 4px; }
.res-hl { font-weight: 700; color: var(--text); }

/* PREVIEW & VENN */
.preview-column { display: flex; flex-direction: column; }
@media(min-width: 768px) { .preview-column { margin-top: 0; } }
.preview-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: var(--card-shadow); height: 100%; min-height: 400px; display: flex; flex-direction: column; padding: 24px; }
.preview-header { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; margin-bottom: 8px; }

/* Venn Wrapper */
.venn-wrapper { 
  flex-grow: 1; position: relative; width: 100%; display: flex; align-items: center; justify-content: center; 
  background-color: #ffffff; 
  background-image: linear-gradient(45deg, #f4f4f4 25%, transparent 25%, transparent 75%, #f4f4f4 75%, #f4f4f4), linear-gradient(45deg, #f4f4f4 25%, transparent 25%, transparent 75%, #f4f4f4 75%, #f4f4f4); 
  background-size: 20px 20px; 
  background-position: 0 0, 10px 10px; 
  border-radius: 12px; 
  border: 1px solid rgba(0,0,0,0.05); 
  overflow: hidden; 
  
  /* FORCE LIGHT VARS FOR CONTENT INSIDE VENN */
  --badge-bg: #F1F0EF;
  --badge-text: #605F5C;
  --primary: #37352F;
  color: #37352F;
}

.venn-circle { width: 180px; height: 180px; border-radius: 50%; position: absolute; display: flex; align-items: center; justify-content: center; transition: background 0.1s, border-color 0.2s, box-shadow 0.2s; border: 1px solid rgba(0,0,0,0.1); }
.venn-circle.is-highlighted { border-color: var(--primary); border-width: 2px; box-shadow: 0 0 0 4px rgba(55, 53, 47, 0.08); }
.venn-a { top: 50%; left: 50%; transform: translate(-50%, -70%); z-index: 1; }
.venn-b { top: 50%; left: 50%; transform: translate(-50%, -30%); z-index: 2; }
.venn-badge, .venn-c-label { position: absolute; width: 24px; height: 24px; background: var(--badge-bg); color: var(--badge-text); border-radius: 50%; font-size: 12px; font-weight: 700; font-family: monospace; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 5; transition: background 0.2s, color 0.2s; }
.venn-c-label { z-index: 15; box-shadow: 0 2px 4px rgba(0,0,0,0.1); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.lbl-a { top: 15%; left: 50%; transform: translateX(-50%); }
.lbl-b { bottom: 15%; left: 50%; transform: translateX(-50%); }
.is-highlighted-badge { background: var(--primary) !important; color: #fff !important; }
#intersectionSVG { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 180px; height: 252px; z-index: 10; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
#intersectionSVG.is-highlighted { opacity: 1; }
#intersectionSVG circle { stroke: var(--primary); }

/* WCAG */
.wcag-full { margin-top: 0; }
.wcag-card { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); border-radius: 12px; padding: 28px; }
.wcag-cols { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media(min-width: 600px) { .wcag-cols { grid-template-columns: 1fr 1fr; } }

.wcag-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; height: 17px; }
.wcag-val { font-family: monospace; font-weight: 700; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; color: #fff; font-weight: 600; }
.badge-fail { background: var(--badge-fail); }
.badge-aa { background: var(--badge-aa); }
.badge-aaa { background: var(--badge-aaa); }
.wcag-preview { height: 44px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; transition: background 0.2s, color 0.2s; }

@media(max-width: 700px) { .logo span, .nav-btn span, .preview-column { display: none; } }
@media(min-width: 768px) and (max-width: 950px) { .venn-circle { width: 140px; height: 140px; } }
#toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: #37352F; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; opacity: 0; pointer-events: none; transition: 0.3s; z-index: 2000; }
#toast.show { opacity: 1; transform: translateY(0) translateX(-50%); }