:root {
  --ink: #18201d;
  --muted: #69736f;
  --paper: #f5f3ed;
  --panel: rgba(255, 255, 255, 0.88);
  --line: #dddcd4;
  --green: #1d5c47;
  --green-dark: #174b3b;
  --green-soft: #dce9e3;
  --orange: #d96334;
  --orange-soft: #f8e2d8;
  --red: #9f3630;
  --red-soft: #f4dddd;
  --shadow: 0 22px 58px rgba(24, 32, 29, 0.09);
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "Noto Sans JP", "Yu Gothic UI", "Hiragino Sans", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 90% 0, rgba(217, 99, 52, 0.14), transparent 28rem),
    radial-gradient(circle at 0 48%, rgba(29, 92, 71, 0.11), transparent 32rem),
    var(--paper);
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }

.page-shell { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 36px 0 70px; }
.topbar { display: flex; justify-content: space-between; gap: 30px; align-items: center; margin-bottom: 28px; }
.brand h1 { margin: 0; font-family: Georgia, "Yu Mincho", serif; font-size: clamp(1.9rem, 4vw, 3.25rem); font-weight: 500; letter-spacing: -0.045em; }
.eyebrow, .section-number { margin: 0 0 7px; color: var(--orange); font-size: 0.69rem; font-weight: 800; letter-spacing: 0.17em; }
.header-actions { display: flex; gap: 10px; align-items: center; }

.tabs { display: flex; gap: 6px; margin-bottom: 22px; padding: 5px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 255, 255, 0.62); width: fit-content; }
.tab { min-height: 42px; padding: 0 18px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.84rem; font-weight: 800; }
.tab.active { background: var(--ink); color: white; box-shadow: 0 6px 18px rgba(24, 32, 29, 0.18); }
.tab-page.active { animation: reveal 180ms ease-out; }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.panel { border: 1px solid rgba(221, 220, 212, 0.94); border-radius: 23px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.control-panel, .status-panel, .previews-panel, .collection-panel, .editor-panel, .history-panel { padding: 27px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); gap: 21px; align-items: start; }
.previews-panel { margin-top: 21px; }
.preset-panel { margin-bottom: 21px; padding: 27px; }
.preset-lead { margin: -10px 0 20px; color: var(--muted); font-size: 0.8rem; line-height: 1.7; }
.preset-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 11px; }
.preset-card { display: grid; gap: 11px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 255, 255, 0.68); }
.preset-card[data-synced="true"] { border-color: #b8d2c6; background: rgba(220, 233, 227, 0.48); }
.preset-card h3 { margin: 0; font-size: 0.86rem; line-height: 1.5; }
.preset-card p { margin: 0; color: var(--muted); font-size: 0.72rem; line-height: 1.65; }
.preset-card .preset-criteria { color: var(--ink); font-weight: 700; }
.preset-card .preset-destinations { color: var(--green); }
.preset-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.preset-card footer span { color: var(--muted); font-size: 0.68rem; font-weight: 800; }
.preset-card[data-synced="true"] footer span { color: var(--green); }
.preset-card .button { min-height: 38px; padding: 0 13px; font-size: 0.73rem; }
.manager-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 21px; align-items: start; }
.collection-panel { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 23px; }
.panel-heading h2 { margin: 0; font-size: 1.28rem; letter-spacing: -0.025em; }
.section-number { margin-bottom: 4px; }
.subtle { color: var(--muted); font-size: 0.75rem; }

.config-badge, .status-pill { padding: 7px 11px; border-radius: 999px; background: #ecece7; color: var(--muted); font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.config-badge[data-ready="true"] { color: var(--green); background: var(--green-soft); }
.config-badge[data-ready="false"] { color: var(--red); background: var(--red-soft); }
.status-pill[data-status="running"] { color: var(--green); background: var(--green-soft); }
.status-pill[data-status="stopping"] { color: #8b5525; background: #f6e7cf; }
.notice { padding: 13px 15px; border-radius: 12px; background: var(--red-soft); color: #792b27; font-size: 0.82rem; line-height: 1.55; }
.global-notice { margin-bottom: 20px; }
.run-context { margin: -12px 0 17px; color: var(--muted); font-size: 0.76rem; }

.field { display: grid; gap: 8px; margin-bottom: 19px; }
.field > span, fieldset legend { font-size: 0.82rem; font-weight: 800; }
.field small { color: var(--muted); font-size: 0.73rem; line-height: 1.55; }
.field-grid { display: grid; grid-template-columns: 1fr 145px; gap: 15px; }
.field-grid.three-columns { grid-template-columns: minmax(180px, 1fr) 150px 125px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; outline: none; background: rgba(255, 255, 255, 0.94); color: var(--ink); transition: border-color 150ms, box-shadow 150ms; }
input, select { min-height: 47px; padding: 10px 12px; }
textarea { min-height: 280px; padding: 14px; resize: vertical; line-height: 1.75; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(29, 92, 71, 0.1); }

.live-confirm { margin: 2px 0 19px; padding: 15px; border: 1px solid #e8c1ad; border-radius: 14px; background: var(--orange-soft); }
.live-confirm > small { display: block; margin-top: 10px; color: var(--muted); font-size: 0.72rem; line-height: 1.55; }
.check-row { display: flex; gap: 10px; align-items: flex-start; margin: 13px 0 15px; font-size: 0.82rem; line-height: 1.55; }
.check-row input, .switch-row input { width: 18px; min-height: 18px; flex: 0 0 auto; margin-top: 2px; }
.compact-field { margin: 0; }
.weekday-fieldset { margin: 0 0 19px; padding: 0; border: 0; }
.weekday-fieldset legend { margin-bottom: 9px; }
.weekday-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.weekday-grid label { cursor: pointer; }
.weekday-grid input { position: absolute; opacity: 0; pointer-events: none; }
.weekday-grid span { width: 43px; height: 39px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.weekday-grid input:checked + span { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.switch-stack { display: grid; gap: 9px; margin: 22px 0 15px; }
.switch-row { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, 0.65); }
.switch-row span, .switch-row strong, .switch-row small { display: block; }
.switch-row strong { margin-bottom: 3px; font-size: 0.82rem; }
.switch-row small { color: var(--muted); font-size: 0.71rem; line-height: 1.45; }
.live-switch { border-color: #e8c1ad; background: rgba(248, 226, 216, 0.56); }
.schedule-meta { margin: 8px 0 18px; color: var(--muted); font-size: 0.72rem; line-height: 1.55; word-break: break-word; }

.actions { display: flex; gap: 10px; }
.align-right { justify-content: flex-end; }
.button { min-height: 47px; padding: 0 19px; border: 0; border-radius: 11px; cursor: pointer; font-weight: 800; transition: transform 150ms, opacity 150ms, background 150ms; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: 0.45; }
.button.primary { flex: 1; color: white; background: var(--green); }
.button.primary:hover:not(:disabled) { background: var(--green-dark); }
.button.secondary { color: #713a22; background: var(--orange-soft); }
.button.ghost { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.72); color: var(--muted); }
.button.danger { background: var(--red-soft); color: var(--red); }
.button.flex-none { flex: 0 0 auto; min-width: 130px; }
.compact-button { min-height: 38px; padding: 0 13px; font-size: 0.75rem; }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 19px; }
.metrics div { padding: 13px 8px; border-radius: 13px; background: rgba(238, 238, 232, 0.85); text-align: center; }
.metrics strong, .metrics span { display: block; }
.metrics strong { margin-bottom: 3px; font-size: 1rem; }
.metrics span { color: var(--muted); font-size: 0.66rem; }
.event-log { height: 275px; overflow: auto; padding-right: 8px; }
.empty-state { color: var(--muted); font-size: 0.82rem; line-height: 1.65; }
.log-entry { display: grid; grid-template-columns: 50px 1fr; gap: 8px; margin: 0; padding: 9px 0; border-bottom: 1px solid #ecebe5; font-size: 0.77rem; line-height: 1.55; }
.log-entry time { color: #969b98; font-variant-numeric: tabular-nums; }
.log-error span { color: var(--red); font-weight: 700; }

.previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 15px; }
.empty-preview { grid-column: 1 / -1; min-height: 140px; display: grid; place-items: center; padding: 28px; border: 1px dashed #c8c9c2; border-radius: 15px; color: var(--muted); text-align: center; }
.preview-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.88); }
.preview-card header span { color: var(--orange); font-size: 0.7rem; font-weight: 800; }
.preview-card h3 { margin: 6px 0 13px; font-size: 0.98rem; line-height: 1.55; }
.preview-reason { margin: 0 0 12px; color: var(--muted); font-size: 0.77rem; line-height: 1.65; }
.evidence-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.evidence-list span { padding: 5px 8px; border-radius: 8px; background: var(--green-soft); color: var(--green); font-size: 0.68rem; }
details { border-top: 1px solid #ecebe5; padding-top: 12px; }
summary { cursor: pointer; color: var(--green); font-size: 0.76rem; font-weight: 800; }
pre { margin: 13px 0 0; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 0.76rem; line-height: 1.75; }

.collection-list { display: grid; gap: 8px; }
.collection-item { width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.62); cursor: pointer; text-align: left; }
.collection-item:hover { border-color: #b8beb9; }
.collection-item.active { border-color: var(--green); background: var(--green-soft); }
.collection-item span, .collection-item strong, .collection-item small { display: block; }
.collection-item strong { margin-bottom: 5px; font-size: 0.82rem; }
.collection-item small { color: var(--muted); font-size: 0.67rem; line-height: 1.4; }
.collection-item em { padding: 5px 7px; border-radius: 999px; background: #ecece7; color: var(--muted); font-size: 0.62rem; font-style: normal; font-weight: 800; }
.collection-item.active em { background: white; color: var(--green); }

.history-heading { align-items: flex-end; }
.history-filters { display: flex; align-items: flex-end; gap: 9px; }
.history-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 0.68rem; font-weight: 800; }
.history-filters select { min-width: 105px; min-height: 38px; padding: 7px 10px; }
.history-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.history-metrics div { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 255, 255, 0.66); }
.history-metrics span, .history-metrics strong { display: block; }
.history-metrics span { margin-bottom: 8px; color: var(--muted); font-size: 0.69rem; font-weight: 700; }
.history-metrics strong { font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.history-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: 21px; margin-top: 21px; }
.history-table-panel { margin-top: 21px; }
.daily-chart { height: 250px; display: flex; align-items: stretch; gap: 5px; overflow-x: auto; padding: 8px 2px 0; }
.daily-column { min-width: 22px; flex: 1 0 22px; display: grid; grid-template-rows: 20px minmax(130px, 1fr) 22px; gap: 5px; align-items: end; text-align: center; }
.daily-column strong { color: var(--green); font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.daily-column small { min-height: 18px; color: var(--muted); font-size: 0.58rem; white-space: nowrap; }
.daily-track { height: 100%; display: flex; align-items: flex-end; border-radius: 8px 8px 3px 3px; background: rgba(220, 233, 227, 0.55); overflow: hidden; }
.daily-track i { width: 100%; display: block; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #2f8064, var(--green)); }
.condition-summary { display: grid; gap: 15px; }
.condition-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; align-items: center; }
.condition-summary-row span { overflow: hidden; font-size: 0.76rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.condition-summary-row strong { color: var(--green); font-size: 0.73rem; }
.condition-summary-row div { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 999px; background: var(--green-soft); }
.condition-summary-row i { height: 100%; display: block; border-radius: inherit; background: var(--green); }
.table-scroll { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; min-width: 980px; }
.history-table th, .history-table td { padding: 12px 10px; border-bottom: 1px solid #e8e7e0; text-align: left; vertical-align: top; font-size: 0.72rem; line-height: 1.5; }
.history-table th { color: var(--muted); font-size: 0.64rem; letter-spacing: 0.04em; white-space: nowrap; }
.history-table td:nth-child(1), .history-table td:nth-child(2), .history-table td:nth-child(6) { white-space: nowrap; }
.history-table td[data-status="sent"] { color: var(--green); font-weight: 800; }
.history-table td[data-status="skipped"] { color: #79613d; font-weight: 800; }
.history-table td[data-status="previewed"] { color: #8b5525; font-weight: 800; }
.history-table td[data-status="failed"] { color: var(--red); font-weight: 800; }
.history-message-details { margin-top: 8px; min-width: 300px; color: var(--ink); font-weight: 400; }
.history-message-details summary { color: var(--green); cursor: pointer; font-weight: 800; }
.history-message-details pre { max-width: 560px; margin: 9px 0 14px; padding: 12px; overflow: auto; border-radius: 10px; background: #f7f6f1; font: inherit; line-height: 1.75; white-space: pre-wrap; }
.history-message-details strong { display: block; margin-top: 8px; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(440px, 100%); padding: 38px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); }
.login-card h1 { margin: 0 0 12px; font-family: Georgia, "Yu Mincho", serif; font-size: 2rem; font-weight: 500; }
.login-card > p:not(.eyebrow):not(.form-message) { margin: 0 0 28px; color: var(--muted); font-size: 0.84rem; line-height: 1.7; }
.login-card .button { width: 100%; }
.form-message { margin: -7px 0 16px; font-size: 0.78rem; }
.error-text { color: var(--red); }
.toast { position: fixed; z-index: 20; right: 22px; bottom: 22px; max-width: min(420px, calc(100% - 44px)); padding: 13px 17px; border-radius: 12px; background: var(--ink); color: white; box-shadow: 0 16px 40px rgba(24, 32, 29, 0.24); font-size: 0.8rem; line-height: 1.5; }
.toast[data-type="error"] { background: var(--red); }

@media (max-width: 920px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .header-actions { width: 100%; justify-content: flex-end; }
  .dashboard-grid, .manager-grid, .history-grid { grid-template-columns: 1fr; }
  .history-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .collection-panel { position: static; max-height: none; }
}

@media (max-width: 620px) {
  .page-shell { width: min(100% - 24px, 1240px); padding-top: 24px; }
  .header-actions { align-items: stretch; flex-direction: column; }
  .tabs { width: 100%; overflow-x: auto; }
  .tab { flex: 1 0 auto; padding: 0 13px; }
  .control-panel, .status-panel, .previews-panel, .preset-panel, .collection-panel, .editor-panel, .history-panel { padding: 20px; border-radius: 18px; }
  .field-grid, .field-grid.three-columns { grid-template-columns: 1fr; gap: 0; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .history-heading { align-items: flex-start; }
  .history-heading, .history-filters { flex-direction: column; }
  .history-filters { width: 100%; align-items: stretch; }
  .history-filters label { width: 100%; }
  .history-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions { flex-direction: column-reverse; }
  .button.flex-none { width: 100%; }
  .login-card { padding: 28px 22px; }
}