:root {
  color-scheme: dark;
  --bg: #080d18;
  --panel: rgba(14, 23, 38, 0.86);
  --panel-solid: #111b2d;
  --panel-2: rgba(20, 32, 52, 0.92);
  --panel-3: #182640;
  --text: #f8fbff;
  --muted: #a9b8cf;
  --accent: #5eead4;
  --accent-2: #7c3aed;
  --accent-3: #38bdf8;
  --danger: #fca5a5;
  --border: rgba(148, 163, 184, 0.22);
  --border-strong: rgba(148, 163, 184, 0.38);
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.32);
  --weak: #fb7185;
  --medium: #fbbf24;
  --strong: #34d399;
  --very: #67e8f9;
  --bg-radial-1: rgba(94, 234, 212, 0.18);
  --bg-radial-2: rgba(124, 58, 237, 0.18);
  --bg-start: #080d18;
  --bg-mid: #0c1424;
  --bg-end: #09111f;
  --field-bg: var(--panel-2);
  --focus-bg: var(--panel-3);
  --soft-fill: rgba(255, 255, 255, 0.02);
  --card-bg: rgba(15, 25, 42, 0.72);
  --sticky-bg: rgba(8, 13, 24, 0.72);
  --button-bg: linear-gradient(180deg, rgba(30, 43, 68, 0.96), rgba(20, 32, 52, 0.96));
  --secondary-text: #eaf3ff;
  --code-text: #f0f9ff;
  --result-bg: linear-gradient(180deg, rgba(20, 32, 52, 0.9), rgba(15, 25, 42, 0.86));
  --empty-bg: rgba(20, 32, 52, 0.58);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8fc;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-solid: #ffffff;
  --panel-2: rgba(248, 250, 252, 0.96);
  --panel-3: #eef6ff;
  --text: #102033;
  --muted: #526176;
  --accent: #0f766e;
  --accent-2: #6d28d9;
  --accent-3: #0369a1;
  --danger: #b91c1c;
  --border: rgba(71, 85, 105, 0.22);
  --border-strong: rgba(71, 85, 105, 0.38);
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  --weak: #e11d48;
  --medium: #b45309;
  --strong: #047857;
  --very: #0891b2;
  --bg-radial-1: rgba(13, 148, 136, 0.16);
  --bg-radial-2: rgba(109, 40, 217, 0.12);
  --bg-start: #f8fbff;
  --bg-mid: #eef6ff;
  --bg-end: #f9fafb;
  --field-bg: #ffffff;
  --focus-bg: #f0f9ff;
  --soft-fill: rgba(15, 23, 42, 0.03);
  --card-bg: rgba(255, 255, 255, 0.78);
  --sticky-bg: rgba(255, 255, 255, 0.82);
  --button-bg: linear-gradient(180deg, #ffffff, #eef2f7);
  --secondary-text: #102033;
  --code-text: #0f172a;
  --result-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88));
  --empty-bg: rgba(248, 250, 252, 0.7);
}

* { box-sizing: border-box; }

html { background: var(--bg); transition: background-color .22s ease, color .22s ease; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 4%, var(--bg-radial-1), transparent 28rem),
    radial-gradient(circle at 88% 0%, var(--bg-radial-2), transparent 26rem),
    linear-gradient(145deg, var(--bg-start) 0%, var(--bg-mid) 52%, var(--bg-end) 100%);
  color: var(--text);
  transition: background .22s ease, color .22s ease;
}

.site-header, .app-shell, .site-footer { width: min(1180px, calc(100% - 1.25rem)); margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0 0.2rem; gap: 1rem; }
.topbar-spacer { width: 1px; height: 1px; }
.topbar-controls { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; justify-content: flex-end; }
.topbar-picker { display: flex; gap: 0.5rem; align-items: center; color: var(--muted); font-size: 0.92rem; }
.hero { padding: 0.25rem 0 0.35rem; }
.brand-lockup { display: flex; align-items: center; gap: 0.7rem; }
.brand-mark { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 0.8rem; background: linear-gradient(135deg, rgba(94, 234, 212, 0.18), rgba(124, 58, 237, 0.22)); border: 1px solid rgba(94, 234, 212, 0.3); color: var(--accent); font-weight: 900; letter-spacing: -0.05em; box-shadow: 0 10px 28px rgba(94, 234, 212, 0.08); }
.eyebrow { display: inline-flex; color: var(--accent); font-size: 0.78rem; font-weight: 800; margin: 0.35rem 0 0; padding: 0.22rem 0.55rem; border: 1px solid rgba(94, 234, 212, 0.26); border-radius: 999px; background: rgba(94, 234, 212, 0.08); }
h1 { font-size: clamp(1.75rem, 4vw, 2.65rem); margin: 0; line-height: 0.95; letter-spacing: -0.04em; background: linear-gradient(135deg, var(--accent), var(--accent-3) 45%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subtitle { color: var(--muted); font-size: clamp(0.95rem, 1.6vw, 1.1rem); margin: 0.2rem 0 0; }

.app-shell { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr); gap: 0.75rem; padding: 0.45rem 0 1.25rem; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 1.15rem; padding: 0.75rem; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.controls h2, .results h2 { margin: 0 0 0.6rem; font-size: 1.15rem; letter-spacing: -0.02em; }
.results { min-height: 20rem; }

fieldset { border: 1px solid var(--border); border-radius: 0.95rem; padding: 0.6rem; margin: 0 0 0.55rem; background: var(--soft-fill); }
legend { color: var(--muted); padding: 0 0.35rem; font-size: 0.88rem; font-weight: 700; }
.mode-grid, .checkbox-grid, .form-grid, .split-grid { display: grid; gap: 0.5rem; }
.mode-grid, .checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid, .split-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
label { display: grid; gap: 0.36rem; color: var(--muted); font-weight: 680; font-size: 0.93rem; }
.mode-grid label, .checkbox-grid label, .split-grid label, .inline-option { display: flex; align-items: center; gap: 0.5rem; color: var(--text); font-weight: 560; min-height: 2rem; }
input, select, button { font: inherit; }
input[type="number"], input[type="text"], textarea, input[type="file"], select { width: 100%; min-height: 2.5rem; border: 1px solid var(--border-strong); border-radius: 0.78rem; background: var(--field-bg); color: var(--text); padding: 0.52rem 0.7rem; outline: none; transition: background .22s ease, border-color .22s ease, box-shadow .16s ease, color .22s ease; }
input[type="number"]:focus, input[type="text"]:focus, textarea:focus, input[type="file"]:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.18); background: var(--focus-bg); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 3px solid rgba(94, 234, 212, 0.32); outline-offset: 3px; }

.options-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 0.95rem; padding: 0.35rem; margin: 0.5rem 0; }
summary { position: relative; cursor: pointer; color: var(--text); font-weight: 820; list-style: none; border-radius: 0.72rem; padding: 0.52rem 2rem 0.52rem 0.65rem; transition: background .16s ease, color .16s ease; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "⌄"; position: absolute; right: 0.72rem; top: 50%; transform: translateY(-50%) rotate(0deg); color: var(--accent); transition: transform .16s ease; }
details[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
summary:hover { background: rgba(94, 234, 212, 0.07); }
summary:focus-visible { outline: 3px solid rgba(94, 234, 212, 0.28); outline-offset: 2px; }
summary + * { margin-top: 0.55rem; }
.options-card > :not(summary) { margin-left: 0.3rem; margin-right: 0.3rem; }
.note { color: var(--muted); line-height: 1.45; margin-bottom: 0.25rem; }
.hidden { display: none; }
.error { min-height: 1.35rem; color: var(--danger); font-weight: 760; margin: 0.3rem 0 0; }

.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.primary-actions { position: sticky; top: 0.5rem; z-index: 2; padding: 0.55rem; margin: 0 0 0.55rem; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 1rem; background: var(--sticky-bg); backdrop-filter: blur(14px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2); }
button { min-height: 2.45rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--button-bg); color: var(--text); padding: 0.55rem 0.9rem; cursor: pointer; transition: background .22s ease, border-color .22s ease, color .22s ease, transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
button:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22); }
button:focus-visible { outline: 3px solid rgba(94, 234, 212, 0.32); outline-offset: 3px; }
button:disabled { opacity: 0.42; cursor: not-allowed; box-shadow: none; }
.primary { background: linear-gradient(135deg, var(--accent), var(--accent-3) 48%, var(--accent-2)); color: #04111f; border: 0; font-weight: 880; padding-inline: 1.25rem; }
.secondary { color: var(--secondary-text); }

.results-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.55rem; }
.counter { color: var(--muted); font-size: 0.92rem; white-space: nowrap; }
.results-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.result-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.65rem; align-items: center; padding: 0.68rem; background: var(--result-bg); border: 1px solid var(--border); border-radius: 1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.result-content { min-width: 0; display: grid; gap: 0.48rem; }
.metadata-chips { display: flex; flex-wrap: wrap; gap: 0.38rem; align-items: center; }
.meta-chip { border-radius: 999px; padding: 0.28rem 0.55rem; font-size: 0.75rem; font-weight: 800; color: var(--muted); background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.16); white-space: nowrap; }
.copy-result { justify-self: end; }
.empty-results { color: var(--muted); padding: 1rem; background: var(--empty-bg); border: 1px dashed var(--border-strong); border-radius: 0.95rem; }
code { overflow-wrap: anywhere; font-size: 1rem; color: var(--code-text); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; letter-spacing: 0.01em; }
.strength { border-radius: 999px; padding: 0.28rem 0.58rem; font-size: 0.75rem; font-weight: 850; color: #05111e; white-space: nowrap; }
.weak { background: var(--weak); }
.medium { background: var(--medium); }
.strong { background: var(--strong); }
.very-strong { background: var(--very); }
.mode-section { margin-top: 0.5rem; }
.always-visible { margin-bottom: 0.55rem; }
.minimum-grid { margin-top: 0.6rem; }
.full-row { margin-top: 0.5rem; }
.compact-list { margin-top: 0.55rem; }
.compact-fieldset { margin-bottom: 0.55rem; }

@media (min-width: 1000px) {
  .mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .checkbox-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .site-header, .app-shell, .site-footer { width: min(100% - 1rem, 1180px); }
  .app-shell, .form-grid, .split-grid, .mode-grid, .checkbox-grid { grid-template-columns: 1fr; }
  .primary-actions { position: static; }
  .primary-actions button { width: 100%; }
  .result-item { grid-template-columns: 1fr; align-items: stretch; }
  .copy-result { justify-self: stretch; }
}

textarea { resize: vertical; min-height: 6rem; }
.disabled-card { opacity: 0.48; pointer-events: none; }
.custom-word-actions { align-items: center; margin-top: 0.6rem; }

.panel, fieldset, .options-card, .primary-actions, .result-item, .empty-results, .site-footer, .meta-chip { transition: background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease; }

.site-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.55rem 0.8rem; padding: 0.95rem 0 1.2rem; color: var(--muted); font-size: 0.92rem; }
.site-footer p { margin: 0; }
.site-footer .footer-action { min-height: auto; color: var(--accent); font-weight: 800; text-decoration: none; border: 1px solid rgba(94, 234, 212, 0.28); border-radius: 999px; padding: 0.38rem 0.72rem; background: rgba(94, 234, 212, 0.08); box-shadow: none; transition: background .22s ease, border-color .22s ease, color .22s ease, transform .15s ease; }
.site-footer .footer-action:hover { border-color: var(--accent); transform: translateY(-1px); }
.site-footer .footer-action:focus-visible { outline: 3px solid rgba(94, 234, 212, 0.32); outline-offset: 3px; }

@media (max-width: 520px) {
  .topbar { align-items: flex-start; }
  .topbar-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .topbar-picker { align-items: stretch; }
}

.strength-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.28rem; max-width: 18rem; }
.strength-segment { display: block; min-height: 0.42rem; border-radius: 999px; background: rgba(148, 163, 184, 0.22); border: 1px solid rgba(148, 163, 184, 0.18); }
.strength-meter.level-1 .strength-segment.active { background: var(--weak); }
.strength-meter.level-2 .strength-segment.active { background: var(--medium); }
.strength-meter.level-3 .strength-segment.active { background: var(--strong); }
.strength-meter.level-4 .strength-segment.active { background: var(--very); }
.analysis-result { grid-template-columns: 1fr; align-items: stretch; }
.analysis-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.analysis-heading { display: flex; justify-content: space-between; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.analysis-list { margin: 0.35rem 0 0; padding-left: 1.15rem; color: var(--muted); display: grid; gap: 0.18rem; }

.preset-block { margin: 0.35rem 0 0.75rem; padding: 0.65rem; border: 1px dashed var(--border-strong); border-radius: 0.9rem; background: rgba(94, 234, 212, 0.05); }
.preset-block h3 { margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.preset-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.preset-button { min-height: 2rem; padding: 0.35rem 0.65rem; font-size: 0.82rem; }
.class-chip-list { display: flex; flex-wrap: wrap; gap: 0.42rem; margin-top: 0.45rem; }
.class-chip { border-radius: 999px; padding: 0.32rem 0.62rem; font-size: 0.78rem; font-weight: 850; border: 1px solid var(--border-strong); }
.class-chip.detected { color: #04111f; background: linear-gradient(135deg, var(--accent), var(--strong)); border-color: transparent; }
.class-chip.missing { color: var(--muted); background: rgba(148, 163, 184, 0.1); }
.static-page { width: min(860px, calc(100% - 1.25rem)); margin: 2rem auto; line-height: 1.65; }
.static-page h1 { margin: 1rem 0; line-height: 1.1; }
.static-page h2 { margin-top: 1.4rem; }
.static-page a.footer-action { display: inline-flex; color: var(--accent); font-weight: 800; text-decoration: none; }
.static-header { padding-top: 0.4rem; }
.static-header .footer-action { color: var(--accent); font-weight: 800; text-decoration: none; border: 1px solid rgba(94, 234, 212, 0.28); border-radius: 999px; padding: 0.38rem 0.72rem; background: rgba(94, 234, 212, 0.08); }
.static-page ul { padding-left: 1.3rem; }