:root {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #d1d5db;
  --accent: #2563eb;
  --accent-bg: #dbeafe;
  --danger: #b91c1c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.wrap { width: min(1500px, 96%); margin: 22px auto; }
.panel, .month { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 15px; }
.panel { margin-bottom: 15px; }
.separated { margin-top: 15px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.row > label { max-width: 100%; }
.between { justify-content: space-between; align-items: center; }
.grow { flex: 1; min-width: 220px; }
label { display: block; font-size: 14px; font-weight: 600; }
label span { display: block; margin-bottom: 6px; }
input, select, button { min-height: 44px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font: inherit; background: #fff; color: var(--text); }
input[type="file"] { max-width: 100%; }
label.grow input, label.grow select { width: 100%; }
input[type="color"] { width: 72px; padding: 4px; }
button { cursor: pointer; }
button.primary { background: var(--accent-bg); border-color: var(--accent); font-weight: 700; }
button.danger { color: var(--danger); border-color: #fecaca; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.status, .muted { color: var(--muted); font-size: 14px; }
.status { margin: 10px 0 0; }
.status { overflow-wrap: anywhere; }
h2 { font-size: 16px; margin: 16px 0 10px; }

.calendar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.month { padding: 14px; min-width: 0; }
.month-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.month-head h3 { margin: 0; }
.month-head small { color: var(--muted); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dow { min-height: 24px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.day { min-height: 44px; min-width: 0; }
.day button { width: 100%; min-width: 0; min-height: 44px; border-color: transparent; padding: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 8px; }
.day button.weekend { background: #f3f4f6; }
.day button.has-range { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); }
.day button.selected-start { outline: 3px solid var(--accent); outline-offset: 1px; }
.range-label { font-size: 10px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ranges { display: flex; flex-direction: column; gap: 8px; }
.list-space { margin-top: 12px; }
.range-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.range-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.range-info > div { min-width: 0; overflow-wrap: anywhere; }
.swatch { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; }
.versions { display: flex; flex-wrap: wrap; gap: 8px; }
.versions > button { max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 1000px) {
  .calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .calendar-grid { grid-template-columns: 1fr; }
  .wrap { width: 94%; margin: 14px auto; }
  .row > button { flex: 1 1 auto; }
  .month { padding: 10px; }
}