/* Couple Anniversary Calculator - ROBERIN tool system */

.couple-anniversary-calculator-container,
.couple-anniversary-calculator-container *,
.couple-anniversary-calculator-container *::before,
.couple-anniversary-calculator-container *::after {
  box-sizing: border-box;
}

.couple-anniversary-calculator-container {
  --tool-paper: #f7efe0;
  --tool-paper-soft: #fff8e8;
  --tool-panel: #fffdf7;
  --tool-ink: #2d241b;
  --tool-muted: #6c5f54;
  --tool-line: #3b2a1f;
  --tool-grid: rgba(59, 42, 31, 0.08);
  --tool-mustard: #d8a32c;
  --tool-mustard-dark: #a37316;
  --tool-rose: #b85a3c;
  --tool-sage: #4f7d6d;
  --tool-teal: #2e6f77;
  --tool-blue: #405f8f;
  --tool-shadow: 7px 7px 0 rgba(59, 42, 31, 0.18);
  --tool-shadow-sm: 3px 3px 0 rgba(59, 42, 31, 0.18);
  --tool-focus: 0 0 0 3px rgba(216, 163, 44, 0.32);
  --tool-radius: 6px;
  --tool-radius-sm: 4px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(310px, 0.88fr);
  grid-template-areas:
    "header header"
    "actions actions"
    "main info";
  gap: 12px;
  width: min(100%, 1180px);
  max-width: 1180px;
  margin: 12px auto 20px;
  padding: 16px;
  background:
    linear-gradient(90deg, var(--tool-grid) 1px, transparent 1px),
    linear-gradient(180deg, var(--tool-grid) 1px, transparent 1px),
    var(--tool-paper);
  background-size: 24px 24px;
  border: 2px solid var(--tool-line);
  border-radius: var(--tool-radius);
  box-shadow: var(--tool-shadow);
  color: var(--tool-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
  line-height: 1.5;
}

.couple-anniversary-calculator-container.dark,
body[data-scheme="dark"] .couple-anniversary-calculator-container:not(.light),
body[data-scheme="inverse"] .couple-anniversary-calculator-container:not(.light) {
  --tool-paper: #1f1c19;
  --tool-paper-soft: #2a251f;
  --tool-panel: #26221e;
  --tool-ink: #f1eadc;
  --tool-muted: #c8bdae;
  --tool-line: #ead7b8;
  --tool-grid: rgba(234, 215, 184, 0.08);
  --tool-mustard: #e3b34a;
  --tool-mustard-dark: #f0c766;
  --tool-rose: #df8067;
  --tool-sage: #78a991;
  --tool-teal: #75b8bc;
  --tool-blue: #8da6d4;
  --tool-shadow: 7px 7px 0 rgba(0, 0, 0, 0.38);
  --tool-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.34);
  --tool-focus: 0 0 0 3px rgba(227, 179, 74, 0.34);
}

@media (prefers-color-scheme: dark) {
  .couple-anniversary-calculator-container:not(.light):not(.dark) {
    --tool-paper: #1f1c19;
    --tool-paper-soft: #2a251f;
    --tool-panel: #26221e;
    --tool-ink: #f1eadc;
    --tool-muted: #c8bdae;
    --tool-line: #ead7b8;
    --tool-grid: rgba(234, 215, 184, 0.08);
    --tool-mustard: #e3b34a;
    --tool-mustard-dark: #f0c766;
    --tool-rose: #df8067;
    --tool-sage: #78a991;
    --tool-teal: #75b8bc;
    --tool-blue: #8da6d4;
    --tool-shadow: 7px 7px 0 rgba(0, 0, 0, 0.38);
    --tool-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.34);
    --tool-focus: 0 0 0 3px rgba(227, 179, 74, 0.34);
  }
}

.couple-anniversary-calculator-container button,
.couple-anniversary-calculator-container input {
  font: inherit;
}

.couple-anniversary-calculator-container button {
  min-width: 0;
}

.couple-anniversary-calculator-container img.emoji {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 0.08em;
  vertical-align: -0.12em;
}

.dark-mode-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: var(--tool-panel);
  border: 2px solid var(--tool-line);
  border-radius: var(--tool-radius-sm);
  box-shadow: var(--tool-shadow-sm);
  color: var(--tool-ink);
  cursor: pointer;
}

.couple-anniv-title,
.header {
  grid-area: header;
  padding: 12px 52px 12px 16px;
  background: linear-gradient(135deg, rgba(216, 163, 44, 0.18), rgba(79, 125, 109, 0.12)), var(--tool-panel);
  border: 2px solid var(--tool-line);
  border-radius: var(--tool-radius);
  box-shadow: var(--tool-shadow-sm);
  text-align: left;
}

.couple-anniv-title h2,
.main-title {
  margin: 0;
  color: var(--tool-ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.18;
}

.couple-anniv-title .subtitle,
.header .subtitle,
.subtitle {
  max-width: 760px;
  margin: 5px 0 0;
  color: var(--tool-muted);
  font-size: 14px;
  line-height: 1.45;
}

.couple-anniv-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: minmax(150px, 0.82fr) minmax(320px, 2fr) minmax(120px, 0.65fr);
  gap: 8px;
  align-items: stretch;
  margin: 0;
}

.couple-anniv-action-cell,
.couple-anniv-action-cell--modes,
.mode-buttons,
.button-group {
  min-width: 0;
}

.couple-anniv-action-cell--modes,
.mode-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.button-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.btn-quick,
.btn-reset,
.sample-btn,
.reset-btn,
.mode-btn,
.calculate-btn,
.btn-calculate,
.copy-btn,
.calendar-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 2px solid var(--tool-line);
  border-radius: var(--tool-radius-sm);
  box-shadow: var(--tool-shadow-sm);
  color: var(--tool-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

.btn-quick,
.sample-btn {
  background: var(--tool-sage);
  color: #fff;
}

.reset-btn,
.btn-reset {
  background: var(--tool-paper-soft);
  color: var(--tool-ink);
}

.mode-btn {
  background: var(--tool-panel);
}

.mode-btn.active {
  background: var(--tool-teal);
  color: #fff;
}

.calculate-btn,
.btn-calculate {
  min-height: 48px;
  margin-top: 8px;
  background: var(--tool-mustard);
  color: #21160f;
  font-size: 15px;
}

.copy-btn {
  margin-top: 8px;
  background: var(--tool-blue);
  color: #fff;
}

.calendar-nav {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  background: var(--tool-panel);
  font-size: 22px;
}

.btn-quick:hover,
.btn-reset:hover,
.sample-btn:hover,
.reset-btn:hover,
.mode-btn:hover,
.calculate-btn:hover,
.btn-calculate:hover,
.copy-btn:hover,
.calendar-nav:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 rgba(59, 42, 31, 0.18);
  filter: brightness(1.03);
}

.couple-anniversary-calculator-container button:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

.couple-anniversary-calculator-container button:focus-visible,
.couple-anniversary-calculator-container input:focus-visible {
  outline: none;
  box-shadow: var(--tool-focus), var(--tool-shadow-sm);
}

.couple-anniv-workbench,
.couple-anniv-workbench {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(255px, 0.86fr) minmax(310px, 1fr);
  grid-template-areas:
    "input result"
    "calendar calendar";
  gap: 10px;
  min-width: 0;
  align-self: start;
}

.couple-anniv-condition,
.couple-anniv-result,
.couple-anniv-calendar,
.couple-anniv-calendar,
.couple-anniv-list-panel {
  min-width: 0;
  background: var(--tool-panel);
  border: 2px solid var(--tool-line);
  border-radius: var(--tool-radius);
  box-shadow: var(--tool-shadow-sm);
  color: var(--tool-ink);
}

.couple-anniv-condition {
  grid-area: input;
}

.couple-anniv-result {
  grid-area: result;
}

.couple-anniv-calendar,
.couple-anniv-calendar {
  grid-area: calendar;
}

.couple-anniv-condition,
.couple-anniv-result,
.couple-anniv-calendar,
.couple-anniv-calendar {
  padding: 12px;
}

.couple-anniv-list-panel {
  grid-area: info;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  align-self: stretch;
  padding: 12px;
}

.couple-anniv-panel-title,
.section-header {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--tool-line);
  color: var(--tool-ink);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.25;
}

.couple-anniv-panel-title svg,
.section-header svg {
  flex: 0 0 auto;
  stroke: currentColor;
}

.couple-anniv-condition .couple-anniv-panel-title,
.couple-anniv-condition .section-header {
  color: var(--tool-teal);
}

.couple-anniv-result .couple-anniv-panel-title,
.couple-anniv-result .section-header {
  color: var(--tool-rose);
}

.couple-anniv-calendar .couple-anniv-panel-title,
.couple-anniv-calendar .section-header,
.couple-anniv-calendar .couple-anniv-panel-title {
  color: var(--tool-blue);
}

.input-group {
  margin: 0 0 10px;
}

.input-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 5px;
  color: var(--tool-muted);
  font-size: 13px;
  font-weight: 750;
}

.date-input,
.input-group input[type="date"] {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px 11px;
  background: var(--tool-paper-soft);
  border: 2px solid var(--tool-line);
  border-radius: var(--tool-radius-sm);
  color: var(--tool-ink);
  font-size: 15px;
  font-weight: 750;
  box-shadow: inset 2px 2px 0 rgba(59, 42, 31, 0.08);
  cursor: pointer;
}

.couple-anniversary-calculator-container.dark input[type="date"]::-webkit-calendar-picker-indicator,
body[data-scheme="dark"] .couple-anniversary-calculator-container:not(.light) input[type="date"]::-webkit-calendar-picker-indicator,
body[data-scheme="inverse"] .couple-anniversary-calculator-container:not(.light) input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  .couple-anniversary-calculator-container:not(.light):not(.dark) input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }
}

.couple-anniv-helper {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: rgba(64, 95, 143, 0.1);
  border: 1px dashed var(--tool-blue);
  border-radius: var(--tool-radius-sm);
  color: var(--tool-muted);
  font-size: 12px;
  line-height: 1.45;
}

.current-info {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(150px, 0.95fr);
  gap: 8px;
  margin: 0 0 8px;
  background: transparent;
  border: 0;
}

.info-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: var(--tool-paper-soft);
  border: 2px solid var(--tool-line);
  border-radius: var(--tool-radius-sm);
  color: var(--tool-ink);
  font-size: 13px;
  font-weight: 800;
}

.info-content,
.summary-info {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.main-result,
.info-content {
  min-width: 0;
  padding: 11px;
  background: var(--tool-paper-soft);
  border: 2px solid var(--tool-line);
  border-radius: var(--tool-radius-sm);
}

.big-number,
.info-value.highlight {
  display: block;
  color: var(--tool-rose);
  font-family: "Courier New", monospace;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.result-label {
  margin-top: 5px;
  color: var(--tool-muted);
  font-size: 12px;
  font-weight: 800;
}

.info-row {
  display: grid;
  grid-template-columns: minmax(55px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  background: var(--tool-paper-soft);
  border: 1px solid rgba(59, 42, 31, 0.28);
  border-radius: var(--tool-radius-sm);
}

.info-label {
  color: var(--tool-muted);
  font-size: 12px;
  font-weight: 800;
}

.info-value {
  min-width: 0;
  color: var(--tool-ink);
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 850;
  text-align: right;
  overflow-wrap: anywhere;
}

.next-anniversary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  padding: 11px;
  background: linear-gradient(135deg, rgba(184, 90, 60, 0.14), rgba(216, 163, 44, 0.16)), var(--tool-paper-soft);
  border: 2px solid var(--tool-line);
  border-radius: var(--tool-radius-sm);
}

.next-icon {
  font-size: 26px;
  line-height: 1;
}

.next-content {
  min-width: 0;
}

.next-label {
  color: var(--tool-muted);
  font-size: 12px;
  font-weight: 800;
}

.next-text {
  color: var(--tool-rose);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.calendar-controls {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
}

.current-month,
#currentMonth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 10px;
  background: var(--tool-paper-soft);
  border: 2px solid var(--tool-line);
  border-radius: var(--tool-radius-sm);
  color: var(--tool-ink);
  font-size: 15px;
  font-weight: 900;
}

.calendar,
.calendar-grid {
  min-width: 0;
}

.calendar {
  overflow: hidden;
  border: 2px solid var(--tool-line);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-panel);
}

.calendar-header,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-grid:first-of-type,
.calendar-header {
  overflow: hidden;
  border: 2px solid var(--tool-line);
  border-bottom: 0;
  border-radius: var(--tool-radius-sm) var(--tool-radius-sm) 0 0;
}

.calendar .calendar-header {
  border: 0;
  border-bottom: 2px solid var(--tool-line);
  border-radius: 0;
}

.calendar-body {
  overflow: hidden;
  border: 2px solid var(--tool-line);
  border-radius: 0 0 var(--tool-radius-sm) var(--tool-radius-sm);
  background: var(--tool-panel);
}

.calendar .calendar-body {
  border: 0;
  border-radius: 0;
}

.weekday,
.day-header {
  min-width: 0;
  padding: 7px 3px;
  background: var(--tool-paper-soft);
  border-right: 1px solid rgba(59, 42, 31, 0.28);
  color: var(--tool-muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.weekday:last-child,
.day-header:last-child {
  border-right: 0;
}

.day-header.weekend,
.weekday:first-child,
.weekday:last-child {
  color: var(--tool-rose);
}

.calendar-day {
  position: relative;
  min-height: 42px;
  padding: 4px 3px;
  background: var(--tool-panel);
  border-right: 1px solid rgba(59, 42, 31, 0.32);
  border-bottom: 1px solid rgba(59, 42, 31, 0.32);
}

.calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-day:nth-last-child(-n+7) {
  border-bottom: 0;
}

.calendar-day.other-month {
  background: rgba(108, 95, 84, 0.08);
}

.calendar-day.today {
  background: rgba(64, 95, 143, 0.18);
}

.calendar-day.anniversary {
  background: rgba(216, 163, 44, 0.18);
}

.calendar-day.important {
  box-shadow: inset 0 0 0 2px var(--tool-rose);
}

.day-number {
  color: var(--tool-ink);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.anniversary-dot {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 7px;
  height: 7px;
  background: var(--tool-rose);
  border: 1px solid var(--tool-line);
  border-radius: 50%;
  transform: translateX(-50%);
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--tool-line);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--tool-muted);
  font-size: 12px;
  font-weight: 750;
}

.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--tool-line);
  border-radius: 50%;
}

.legend-dot.today {
  background: rgba(64, 95, 143, 0.18);
}

.legend-dot.anniversary {
  background: rgba(216, 163, 44, 0.32);
}

.legend-dot.important {
  background: var(--tool-rose);
}

.anniversary-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.anniversaries-list {
  flex: 1 1 auto;
  min-height: 250px;
  max-height: 520px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--tool-paper-soft);
  border: 2px solid var(--tool-line);
  border-radius: var(--tool-radius-sm);
}

.empty-state {
  display: grid;
  min-height: 170px;
  place-items: center;
  padding: 22px 16px;
  color: var(--tool-muted);
  text-align: center;
}

.empty-icon {
  margin-bottom: 7px;
  font-size: 28px;
  line-height: 1;
}

.empty-state p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.anniversary-item {
  padding: 10px 11px;
  border-bottom: 1px solid rgba(59, 42, 31, 0.34);
  color: var(--tool-ink);
  cursor: pointer;
}

.anniversary-item:last-child {
  border-bottom: 0;
}

.anniversary-item:hover {
  background: rgba(216, 163, 44, 0.16);
}

.anniversary-item.important {
  border-left: 5px solid var(--tool-rose);
  background: rgba(184, 90, 60, 0.1);
}

.anniversary-item.past {
  opacity: 0.68;
}

.anniversary-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 3px;
}

.anniversary-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.anniversary-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 8px;
  background: var(--tool-teal);
  border: 1px solid var(--tool-line);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.anniversary-badge.past {
  background: var(--tool-muted);
}

.anniversary-date {
  color: var(--tool-muted);
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: 750;
}

.notice {
  display: block;
  margin: 0;
  padding: 10px 11px;
  background: rgba(216, 163, 44, 0.18);
  border: 2px dashed var(--tool-mustard-dark);
  border-radius: var(--tool-radius-sm);
  color: var(--tool-ink);
  font-size: 12px;
  line-height: 1.45;
}

.notice strong {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 900;
}

.notice p,
.notice span {
  margin: 0;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  display: grid;
  gap: 2px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 12px 14px;
  background: var(--tool-panel);
  border: 2px solid var(--tool-line);
  border-radius: var(--tool-radius-sm);
  box-shadow: var(--tool-shadow);
  color: var(--tool-ink);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.toast-title {
  font-size: 13px;
  font-weight: 900;
}

.toast-value {
  color: var(--tool-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.anniversaries-list::-webkit-scrollbar {
  width: 8px;
}

.anniversaries-list::-webkit-scrollbar-track {
  background: var(--tool-paper-soft);
}

.anniversaries-list::-webkit-scrollbar-thumb {
  background: var(--tool-muted);
  border: 2px solid var(--tool-paper-soft);
  border-radius: 999px;
}

@media (max-width: 1100px) {
  .couple-anniversary-calculator-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "actions"
      "main"
      "info";
  }

  .couple-anniv-list-panel {
    grid-template-columns: minmax(0, 1.4fr) minmax(230px, 0.6fr);
    grid-template-rows: auto;
    align-items: stretch;
  }

  .anniversaries-list {
    max-height: 330px;
  }
}

@media (max-width: 780px) {
  .couple-anniversary-calculator-container {
    width: calc(100% - 16px);
    margin: 8px auto 16px;
    padding: 12px;
    gap: 10px;
  }

  .couple-anniv-title,
  .header {
    padding: 11px 48px 11px 12px;
  }

  .couple-anniv-title h2,
  .main-title {
    font-size: 23px;
  }

  .couple-anniv-actions,
  .couple-anniv-workbench,
  .couple-anniv-workbench,
  .couple-anniv-list-panel {
    grid-template-columns: 1fr;
  }

  .couple-anniv-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .couple-anniv-action-cell--sample {
    order: 1;
  }

  .couple-anniv-action-cell--reset {
    order: 2;
  }

  .couple-anniv-action-cell--modes {
    order: 3;
    grid-column: 1 / -1;
  }

  .couple-anniv-workbench,
  .couple-anniv-workbench {
    grid-template-areas:
      "input"
      "result"
      "calendar";
  }

  .couple-anniv-action-cell--modes,
  .mode-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .anniversaries-list {
    min-height: 190px;
    max-height: 310px;
  }
}

@media (max-width: 480px) {
  .couple-anniversary-calculator-container {
    width: calc(100% - 12px);
    padding: 9px;
    border-width: 2px;
    box-shadow: 5px 5px 0 rgba(59, 42, 31, 0.16);
  }

  .couple-anniv-title,
  .header,
  .couple-anniv-condition,
  .couple-anniv-result,
  .couple-anniv-calendar,
  .couple-anniv-calendar,
  .couple-anniv-list-panel {
    padding: 9px;
  }

  .couple-anniv-title h2,
  .main-title {
    font-size: 21px;
  }

  .couple-anniv-title .subtitle,
  .header .subtitle,
  .subtitle,
  .couple-anniv-helper,
  .notice,
  .empty-state p {
    font-size: 12px;
  }

  .couple-anniv-action-cell--modes,
  .mode-buttons,
  .button-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .btn-quick,
  .btn-reset,
  .sample-btn,
  .reset-btn,
  .mode-btn,
  .calculate-btn,
  .btn-calculate,
  .copy-btn {
    min-height: 40px;
    padding: 8px;
    font-size: 13px;
  }

  .current-info {
    grid-template-columns: minmax(0, 1fr) minmax(130px, 0.82fr);
  }

  .big-number,
  .info-value.highlight {
    font-size: 28px;
  }

  .info-row {
    grid-template-columns: minmax(48px, auto) minmax(0, 1fr);
  }

  .next-anniversary {
    padding: 9px;
  }

  .next-icon {
    font-size: 22px;
  }

  .calendar-day {
    min-height: 34px;
    padding: 3px 2px;
  }

  .weekday,
  .day-header,
  .day-number,
  .legend-item,
  .anniversary-date {
    font-size: 11px;
  }

  .calendar-legend {
    justify-content: flex-start;
  }

  .anniversary-header {
    grid-template-columns: 1fr;
  }

  .anniversary-badge {
    justify-self: start;
  }

  .toast {
    right: 8px;
    bottom: 8px;
  }
}

@media (max-width: 340px) {
  .current-info {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .couple-anniversary-calculator-container *,
  .couple-anniversary-calculator-container *::before,
  .couple-anniversary-calculator-container *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.couple-anniversary-calculator-container {
  --tool-paper: #faf2e8;
  --tool-paper-soft: #fff7e8;
  --tool-panel: #fffdf7;
  --tool-ink: #2b2119;
  --tool-muted: #705f50;
  --tool-line: #6b5745;
  --tool-grid: rgba(107, 87, 69, 0.1);
  --tool-mustard: #f2e3d3;
  --tool-mustard-dark: #d2aa55;
  --tool-rose: #9b513d;
  --tool-sage: #647b59;
  --tool-teal: #4f746d;
  --tool-blue: #5d718f;
  --tool-shadow: 5px 5px 0 rgba(107, 87, 69, 0.18);
  --tool-shadow-sm: 3px 3px 0 rgba(107, 87, 69, 0.16);
  --tool-focus: 0 0 0 3px rgba(210, 170, 85, 0.34);
  --tool-radius: 0;
  --tool-radius-sm: 0;
  grid-template-columns: minmax(250px, 0.82fr) minmax(260px, 0.9fr) minmax(288px, 1fr);
  grid-template-areas:
    "header header header"
    "actions actions actions"
    "input result info"
    "calendar calendar calendar";
  gap: 10px;
  width: min(100%, 1040px);
  max-width: 1040px;
  margin: 10px auto 18px;
  padding: 14px;
  border-color: var(--tool-line);
  border-radius: 0;
  box-shadow: var(--tool-shadow);
}

.couple-anniversary-calculator-container.dark,
body[data-scheme="dark"] .couple-anniversary-calculator-container:not(.light),
body[data-scheme="inverse"] .couple-anniversary-calculator-container:not(.light) {
  --tool-paper: #211e1a;
  --tool-paper-soft: #2d2821;
  --tool-panel: #27231f;
  --tool-ink: #f4ecdd;
  --tool-muted: #cdbfaa;
  --tool-line: #ead7b8;
  --tool-grid: rgba(234, 215, 184, 0.08);
  --tool-mustard: #4b3b2f;
  --tool-mustard-dark: #e0bd72;
  --tool-rose: #df8a70;
  --tool-sage: #8ca77a;
  --tool-teal: #87bbb2;
  --tool-blue: #9fb0cf;
  --tool-shadow: 5px 5px 0 rgba(0, 0, 0, 0.36);
  --tool-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  .couple-anniversary-calculator-container:not(.light):not(.dark) {
    --tool-paper: #211e1a;
    --tool-paper-soft: #2d2821;
    --tool-panel: #27231f;
    --tool-ink: #f4ecdd;
    --tool-muted: #cdbfaa;
    --tool-line: #ead7b8;
    --tool-grid: rgba(234, 215, 184, 0.08);
    --tool-mustard: #4b3b2f;
    --tool-mustard-dark: #e0bd72;
    --tool-rose: #df8a70;
    --tool-sage: #8ca77a;
    --tool-teal: #87bbb2;
    --tool-blue: #9fb0cf;
    --tool-shadow: 5px 5px 0 rgba(0, 0, 0, 0.36);
    --tool-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.3);
  }
}

.dark-mode-toggle {
  display: none !important;
}

.couple-anniv-title {
  padding: 13px 15px;
  background:
    linear-gradient(135deg, rgba(242, 227, 211, 0.9), rgba(255, 247, 232, 0.72)),
    var(--tool-panel);
  border-radius: 0;
}

body[data-scheme="dark"] .couple-anniv-title,
body[data-scheme="inverse"] .couple-anniv-title,
.couple-anniversary-calculator-container.dark .couple-anniv-title {
  background:
    linear-gradient(135deg, rgba(75, 59, 47, 0.92), rgba(45, 40, 33, 0.96)),
    var(--tool-panel);
}

.couple-anniv-title h2 {
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0;
}

.couple-anniv-title .subtitle {
  max-width: 780px;
  margin-top: 7px;
}

.couple-anniv-actions {
  grid-template-columns: minmax(136px, 0.72fr) minmax(420px, 2.2fr) minmax(126px, 0.64fr);
  gap: 8px;
}

.couple-anniv-action-cell--modes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.btn-quick,
.btn-reset,
.sample-btn,
.reset-btn,
.mode-btn,
.calculate-btn,
.btn-calculate,
.copy-btn,
.calendar-nav {
  min-height: 40px;
  padding: 8px 11px;
  border-color: var(--tool-line);
  border-radius: 0;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0;
}

.btn-quick,
.sample-btn,
.reset-btn,
.btn-reset,
.mode-btn {
  background: var(--tool-paper-soft);
  color: var(--tool-ink);
}

.mode-btn.active {
  background: #e3efd2;
  color: #26301f;
}

body[data-scheme="dark"] .mode-btn.active,
body[data-scheme="inverse"] .mode-btn.active,
.couple-anniversary-calculator-container.dark .mode-btn.active {
  background: #384a32;
  color: var(--tool-ink);
}

.calculate-btn,
.btn-calculate,
.copy-btn {
  min-height: 42px;
  margin-top: 10px;
  background: var(--tool-mustard);
  color: var(--tool-ink);
}

.calendar-nav {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  font-size: 20px;
}

.couple-anniv-workbench {
  display: contents;
}

.couple-anniv-condition,
.couple-anniv-result,
.couple-anniv-calendar,
.couple-anniv-list-panel {
  height: 100%;
  padding: 11px;
  border-radius: 0;
}

.couple-anniv-condition {
  display: flex;
  flex-direction: column;
  grid-area: input;
}

.couple-anniv-result {
  display: flex;
  flex-direction: column;
  grid-area: result;
}

.couple-anniv-list-panel {
  grid-area: info;
  grid-template-rows: minmax(0, 1fr) auto;
  align-self: stretch;
}

.couple-anniv-calendar {
  grid-area: calendar;
  padding: 12px;
}

.couple-anniv-panel-title {
  min-height: 28px;
  margin-bottom: 9px;
  padding-bottom: 7px;
  font-size: 15px;
  letter-spacing: 0;
}

.input-group {
  margin-bottom: 9px;
}

.input-group label {
  font-size: 12px;
}

.date-input,
.input-group input[type="date"] {
  min-height: 44px;
  border-radius: 0;
}

.couple-anniv-helper {
  margin-top: 9px;
  border-radius: 0;
}

.current-info {
  grid-template-columns: 1fr;
  gap: 7px;
  margin-bottom: 8px;
}

.main-result,
.info-content,
.info-header,
.info-row,
.next-anniversary,
.anniversaries-list,
.notice,
.calendar,
.calendar-grid:first-of-type,
.calendar-header,
.calendar-body,
.current-month,
#currentMonth {
  border-radius: 0;
}

.main-result {
  padding: 10px;
  text-align: center;
}

.big-number,
.info-value.highlight {
  font-size: 31px;
  letter-spacing: 0;
}

.summary-info {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-row {
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 7px 8px;
}

.info-value {
  text-align: left;
}

.next-anniversary {
  grid-template-columns: 34px minmax(0, 1fr);
  margin-bottom: 8px;
  padding: 10px;
}

.next-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--tool-line);
  background: var(--tool-panel);
  font-size: 19px;
}

.copy-btn {
  margin-top: auto;
}

.anniversary-panel {
  min-height: 0;
}

.anniversaries-list {
  min-height: 214px;
  max-height: 238px;
}

.anniversary-item {
  padding: 9px 10px;
}

.anniversary-badge {
  border-radius: 0;
}

.notice {
  padding: 9px 10px;
}

.calendar-controls {
  margin-bottom: 7px;
}

.calendar-day {
  min-height: 37px;
}

.calendar-legend {
  margin-top: 7px;
  padding-top: 7px;
}

.toast {
  border-radius: 0;
}

@media (max-width: 1100px) {
  .couple-anniversary-calculator-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "actions actions"
      "input result"
      "info info"
      "calendar calendar";
    width: calc(100% - 18px);
    max-width: 960px;
  }

  .couple-anniv-list-panel {
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
    grid-template-rows: auto;
  }

  .anniversaries-list {
    max-height: 270px;
  }
}

@media (max-width: 780px) {
  .couple-anniversary-calculator-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "actions"
      "input"
      "result"
      "info"
      "calendar";
    width: calc(100% - 14px);
    padding: 10px;
    gap: 9px;
  }

  .couple-anniv-title {
    padding: 11px;
  }

  .couple-anniv-title h2 {
    font-size: 22px;
  }

  .couple-anniv-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .couple-anniv-action-cell--sample {
    order: 1;
  }

  .couple-anniv-action-cell--reset {
    order: 2;
  }

  .couple-anniv-action-cell--modes {
    order: 3;
    grid-column: 1 / -1;
  }

  .couple-anniv-list-panel {
    grid-template-columns: 1fr;
  }

  .anniversaries-list {
    min-height: 184px;
    max-height: 282px;
  }
}

@media (max-width: 480px) {
  .couple-anniversary-calculator-container {
    width: calc(100% - 10px);
    padding: 8px;
    box-shadow: 4px 4px 0 rgba(107, 87, 69, 0.16);
  }

  .couple-anniv-title,
  .couple-anniv-condition,
  .couple-anniv-result,
  .couple-anniv-calendar,
  .couple-anniv-list-panel {
    padding: 8px;
  }

  .couple-anniv-title h2 {
    font-size: 20px;
  }

  .couple-anniv-action-cell--modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .btn-quick,
  .btn-reset,
  .sample-btn,
  .reset-btn,
  .mode-btn,
  .calculate-btn,
  .btn-calculate,
  .copy-btn {
    min-height: 40px;
    padding: 8px 7px;
    font-size: 12px !important;
  }

  .summary-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .big-number,
  .info-value.highlight {
    font-size: 27px;
  }

  .calendar-day {
    min-height: 32px;
  }

  .calendar-legend {
    justify-content: flex-start;
  }
}

@media (max-width: 370px) {
  .summary-info {
    grid-template-columns: 1fr;
  }
}