body.cron-page {
  color-scheme: light;
  /* Theme colors */
  --cron-page: #f4f6f8;
  --cron-surface: #ffffff;
  --cron-surface-soft: #f6f8fa;
  --cron-border: #d0d7de;
  --cron-text: #1f2328;
  --cron-muted: #57606a;
  --cron-accent: #0969da;
  --cron-accent-hover: #0757b5;
  --cron-success: #1a7f37;
  --cron-warning: #9a6700;
  --cron-warning-bg: #fff8c5;
  --cron-danger: #cf222e;
  --cron-notice-text: #0550ae;
  --cron-notice-bg: #ddf4ff;
  --cron-notice-border: #b6e3ff;
  --cron-focus-ring: rgba(9, 105, 218, 0.24);
  --cron-shadow: 0 14px 36px rgba(31, 35, 40, 0.07);
  /* Layout and component contracts */
  --cron-border-rule: 1px solid var(--cron-border);
  --cron-panel-radius: 12px;
  --cron-builder-radius: 10px;
  --cron-table-radius: 9px;
  --cron-control-radius: 8px;
  --cron-control-height: 39px;
  --cron-panel-padding: 18px;
  --cron-grid-gap: 12px;
  --cron-code-font: "Cascadia Code", Consolas, monospace;
  --cron-on-accent: #ffffff;
  min-block-size: 100vh;
  margin: 0;
  color: var(--cron-text);
  background: var(--cron-page);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.cron-page[data-theme="dark"] {
  color-scheme: dark;
  --cron-page: #0d1117;
  --cron-surface: #161b22;
  --cron-surface-soft: #21262d;
  --cron-border: #30363d;
  --cron-text: #f0f6fc;
  --cron-muted: #9da7b3;
  --cron-accent: #58a6ff;
  --cron-accent-hover: #79c0ff;
  --cron-success: #56d364;
  --cron-warning: #e3b341;
  --cron-warning-bg: #332701;
  --cron-danger: #ff7b72;
  --cron-notice-text: #79c0ff;
  --cron-notice-bg: #0c2d4a;
  --cron-notice-border: #1f6feb;
  --cron-focus-ring: rgba(88, 166, 255, 0.3);
  --cron-shadow: none;
}

/* Page foundation */
.cron-page,
.cron-page * {
  box-sizing: border-box;
}

.cron-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cron-main {
  inline-size: min(1380px, calc(100% - 32px));
  margin-inline: auto;
  padding-block: 38px;
}

.cron-page-header {
  margin-block-end: 18px;
}

.cron-page-header h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

.cron-page-header > p,
.cron-panel-description {
  margin-block: 7px 0;
  color: var(--cron-muted);
  line-height: 1.65;
}

.cron-page .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 12px;
  color: var(--cron-muted);
  font-size: 0.9rem;
}

.cron-page a {
  color: var(--cron-accent);
  font-weight: 700;
  text-decoration: none;
}

.cron-page a:is(:hover, :focus-visible) {
  text-decoration: underline;
}

/* Panels */
.cron-notice,
.cron-panel {
  margin-block-end: 16px;
  border: var(--cron-border-rule);
  border-radius: var(--cron-panel-radius);
  background: var(--cron-surface);
  box-shadow: var(--cron-shadow);
}

.cron-notice {
  padding-block: 12px;
  padding-inline: 14px;
  border-color: var(--cron-notice-border);
  color: var(--cron-notice-text);
  background: var(--cron-notice-bg);
  line-height: 1.65;
}

.cron-panel {
  padding: var(--cron-panel-padding);
}

.cron-panel-heading {
  margin-block-end: 14px;
}

.cron-panel-heading--actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cron-panel :is(h2, h3) {
  margin-block-start: 0;
}

.cron-panel-title {
  margin-block-end: 0;
  font-size: 1.1rem;
}

/* Form layout */
.cron-grid {
  display: grid;
  gap: var(--cron-grid-gap);
}
.cron-settings-grid--primary { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.cron-settings-grid--schedule { grid-template-columns: minmax(260px, 2fr) minmax(130px, 1fr); max-inline-size: 620px; margin-block-start: 14px; }
.cron-field-builder { grid-template-columns: repeat(7, minmax(110px, 1fr)); }
.cron-about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cron-field { display: grid; align-content: start; gap: 6px; color: var(--cron-muted); font-weight: 700; }
.cron-control,
.cron-button { min-block-size: var(--cron-control-height); border: var(--cron-border-rule); border-radius: var(--cron-control-radius); color: var(--cron-text); background: var(--cron-surface); font: inherit; }
.cron-control {
  inline-size: 100%;
  padding-block: 7px;
  padding-inline: 10px;
}
.cron-code-control { font-family: var(--cron-code-font); font-size: 1rem; }
.cron-expression-field { margin-block-start: 14px; }
.cron-help {
  margin-block: 6px 12px;
  margin-inline: 0;
  color: var(--cron-muted);
  font-size: 0.85rem;
}
.cron-builder { min-inline-size: 0; margin: 0; padding: 14px; border: var(--cron-border-rule); border-radius: var(--cron-builder-radius); }
.cron-builder legend { padding-inline: 6px; font-weight: 700; }

/* Buttons and messages */
.cron-button {
  padding-block: 7px;
  padding-inline: 13px;
  background: var(--cron-surface-soft);
  font-weight: 700;
  cursor: pointer;
}
.cron-button:hover:not(:disabled) { border-color: var(--cron-accent); color: var(--cron-accent); }
.cron-button--primary { border-color: var(--cron-accent); color: var(--cron-on-accent); background: var(--cron-accent); }
.cron-button--primary:hover:not(:disabled) { border-color: var(--cron-accent-hover); color: var(--cron-on-accent); background: var(--cron-accent-hover); }

/* Interaction states */
.cron-button:disabled { cursor: not-allowed; opacity: 0.5; }
.cron-page :is(.cron-button, input, select):focus-visible { outline: 3px solid var(--cron-focus-ring); outline-offset: 2px; }

.cron-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cron-actions--end { justify-content: flex-end; margin-block-start: 14px; }
.cron-message { min-block-size: 22px; margin-block: 10px 0; color: var(--cron-muted); font-size: 0.9rem; }

/* Status states */
.cron-message[data-type="success"] { color: var(--cron-success); }
.cron-message[data-type="warning"] { color: var(--cron-warning); }
.cron-message[data-type="error"] { color: var(--cron-danger); }
.cron-warning {
  margin-block-end: 14px;
  padding-block: 10px;
  padding-inline: 12px;
  border: 1px solid var(--cron-warning);
  border-radius: var(--cron-control-radius);
  color: var(--cron-warning);
  background: var(--cron-warning-bg);
}

/* Results */
.cron-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  margin-block-end: 16px;
  border-block-start: var(--cron-border-rule);
  border-inline-start: var(--cron-border-rule);
}

.cron-stat {
  min-inline-size: 0;
  padding-block: 10px;
  padding-inline: 12px;
  border-block-end: var(--cron-border-rule);
  border-inline-end: var(--cron-border-rule);
}
.cron-stat dt { color: var(--cron-muted); font-size: 0.8rem; }
.cron-stat dd {
  margin: 0;
  margin-block-start: 4px;
  overflow-wrap: anywhere;
  font-weight: 700;
}
.cron-table-wrap { overflow-x: auto; border: var(--cron-border-rule); border-radius: var(--cron-table-radius); }
.cron-table { inline-size: 100%; border-collapse: collapse; }
.cron-table th,
.cron-table td {
  padding-block: 10px;
  padding-inline: 12px;
  border-block-end: var(--cron-border-rule);
  text-align: start;
  white-space: nowrap;
}
.cron-table th { background: var(--cron-surface-soft); }
.cron-table tbody tr:last-child td { border-block-end: 0; }
.cron-table td:last-child { font-family: var(--cron-code-font); font-size: 0.85rem; }

/* Matching and help content */
.cron-match-row { display: grid; grid-template-columns: minmax(260px, 480px) auto; align-items: end; gap: 10px; }
.cron-about { line-height: 1.7; }
.cron-about li + li { margin-block-start: 5px; }

/* Responsive layout */
@media (max-width: 980px) {
  .cron-settings-grid--primary { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .cron-field-builder { grid-template-columns: repeat(4, minmax(110px, 1fr)); }
}

@media (max-width: 640px) {
  .cron-main { inline-size: min(100% - 24px, 1380px); padding-block: 24px; }
  .cron-settings-grid--primary,
  .cron-settings-grid--schedule,
  .cron-field-builder,
  .cron-stats,
  .cron-about-grid,
  .cron-match-row { grid-template-columns: 1fr; max-inline-size: none; }
  .cron-panel-heading--actions { align-items: flex-start; flex-direction: column; }
  .cron-actions--end { justify-content: stretch; }
  .cron-actions--end .cron-button { flex: 1 1 100%; }
}