:root {
  --blue: #172D5A;
  --green: #C9D343;
  --light-bg: #FFFFFF;
  --light-text: #172D5A;
  --dark-bg: #172D5A;
  --dark-text: #FFFFFF;
  --surface: rgba(255,255,255,0.95);
  --surface-dark: rgba(255,255,255,0.08);
  --border-light: rgba(23,45,90,0.12);
  --border-dark: rgba(255,255,255,0.16);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--light-bg);
  color: var(--light-text);
}
body[data-theme="dark"] {
  background: var(--dark-bg);
  color: var(--dark-text);
}
.page { max-width: 1240px; margin: 0 auto; padding: 24px; }
.grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin: 20px 0; }
.card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(23,45,90,0.08);
}
body[data-theme="dark"] .card {
  background: var(--surface-dark);
  border-color: var(--border-dark);
  box-shadow: none;
}
.hero { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.brand-row { display:flex; align-items:center; gap:16px; }
.brand-mark {
  width:56px; height:56px; border-radius:16px; background:var(--green); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:30px;
}
h1 { margin:0 0 6px 0; font-size: 34px; }
.subtitle, .hint, .version { opacity: 0.88; }
.version { margin-top: 12px; font-weight: 700; }
.standalone { margin-top: 10px; display:inline-flex; }
.theme-switch-wrap { display:flex; align-items:flex-start; }
.drop-zone {
  margin-top: 12px; border: 2px dashed var(--green); border-radius: 20px; padding: 28px; text-align:center;
}
.drop-zone.dragover { background: rgba(201,211,67,0.12); }
.file-name { margin-top: 10px; font-weight:700; word-break: break-all; }
.primary-btn, .secondary-btn {
  border: 0; border-radius: 12px; padding: 12px 16px; font-weight:700; cursor:pointer;
}
.primary-btn { background: var(--green); color: var(--blue); }
.secondary-btn { background: var(--blue); color: white; }
body[data-theme="dark"] .secondary-btn { background: white; color: var(--blue); }
.actions { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.band-sliders { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.band-sliders.compact { margin-bottom: 8px; }
.band-slider-card { border:1px solid var(--border-light); border-radius: 14px; padding: 12px; }
body[data-theme="dark"] .band-slider-card { border-color: var(--border-dark); }
.band-slider-head { display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 8px; }
.band-slider-head span { font-weight: 700; color: var(--green); }
.rules-table { display:grid; gap:10px; margin-top: 16px; }
.rule-row {
  display:grid; grid-template-columns: 130px repeat(3, 1fr); gap: 10px; align-items:end;
  padding:12px; border:1px solid var(--border-light); border-radius: 14px;
}
body[data-theme="dark"] .rule-row { border-color: var(--border-dark); }
label { display:block; font-size: 14px; margin-bottom: 6px; }
input[type="number"] {
  width:100%; padding:10px 12px; border-radius: 10px; border:1px solid var(--border-light);
}
body[data-theme="dark"] input[type="number"] {
  background: rgba(255,255,255,0.08); color:white; border-color: var(--border-dark);
}
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--border-light); text-align:left; }
body[data-theme="dark"] th, body[data-theme="dark"] td { border-color: var(--border-dark); }
.messages { margin-bottom: 14px; }
.message { padding: 12px 14px; border-radius: 12px; margin-bottom: 10px; }
.message.info { background: rgba(23,45,90,0.08); }
.message.warn { background: rgba(201,211,67,0.2); }
body[data-theme="dark"] .message.info { background: rgba(255,255,255,0.08); }
body[data-theme="dark"] .message.warn { background: rgba(201,211,67,0.16); }
.overwrite-box {
  margin-top:16px; padding: 14px; border-radius: 14px; border:1px solid var(--green); background: rgba(201,211,67,0.12);
}
.hidden { display:none; }
.footer { text-align:center; padding: 12px 0 28px; font-weight:700; }
.color-chip { display:inline-flex; align-items:center; gap:8px; }
.swatch { width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,0.18); }
@media (max-width: 980px) {
  .grid { grid-template-columns: 1fr; }
  .band-sliders { grid-template-columns: 1fr; }
  .rule-row { grid-template-columns: 1fr 1fr; }
  .hero { flex-direction:column; }
}

input[type="range"] { width: 100%; accent-color: var(--green); cursor: pointer; }