/* ═══════════════════════════════════════════════════════════════════
   cron-tool.css  -  Cron Job Generator
   Scoped entirely under  #crnt-root  (prefix: crnt-)
   Theme: Deep Ocean × Cyan - Premium SaaS UI
   Zero interference with any other tool on the page.
═══════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────── */
#crnt-root {
  --c-bg        : #060c1a;
  --c-surface   : #0b1525;
  --c-surface2  : #101e35;
  --c-surface3  : #162540;
  --c-border    : #1c2d48;
  --c-border2   : #243858;

  --c-accent    : #0ea5e9;
  --c-accent-soft: rgba(14, 165, 233, 0.12);
  --c-accent2   : #38bdf8;
  --c-accent3   : #7dd3fc;
  --c-glow      : rgba(14, 165, 233, 0.35);

  /* field colour coding - mirrors classic crontab colouring */
  --c-min-col   : #a78bfa;   /* violet  */
  --c-hr-col    : #34d399;   /* emerald */
  --c-dom-col   : #fb923c;   /* orange  */
  --c-mon-col   : #f472b6;   /* pink    */
  --c-dow-col   : #facc15;   /* yellow  */

  --c-ok        : #34d399;
  --c-ok-bg     : rgba(52, 211, 153, 0.1);
  --c-err       : #f87171;
  --c-err-bg    : rgba(248, 113, 113, 0.1);
  --c-warn      : #fbbf24;
  --c-warn-bg   : rgba(251, 191, 36, 0.1);

  --c-text      : #dde8f8;
  --c-muted     : #637b9e;
  --c-faint     : #243050;

  --c-radius    : 14px;
  --c-radius-sm : 9px;
  --c-radius-xs : 5px;
  --c-font      : 'DM Sans', 'Inter', system-ui, sans-serif;
  --c-mono      : 'JetBrains Mono', 'Fira Code', monospace;

  --c-shadow    : 0 4px 32px rgba(0, 0, 0, 0.55);
  --c-shadow-sm : 0 2px 14px rgba(0, 0, 0, 0.4);

  font-family : var(--c-font);
  color       : var(--c-text);
  background  : var(--c-bg);
  min-height  : 100vh;
  -webkit-font-smoothing: antialiased;
  box-sizing  : border-box;
}
#crnt-root *, #crnt-root *::before, #crnt-root *::after { box-sizing: inherit; }

/* ── Hero ──────────────────────────────────────────────────────── */
.crnt-hero {
  text-align : center;
  padding    : 58px 24px 42px;
  background :
    radial-gradient(ellipse 72% 52% at 50% 0%, rgba(14,165,233,0.15) 0%, transparent 70%),
    var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  position   : relative;
  overflow   : hidden;
}
.crnt-hero::before {
  content    : '';
  position   : absolute;
  inset      : 0;
  background :
    radial-gradient(circle at 18% 65%, rgba(14,165,233,0.06) 0%, transparent 50%),
    radial-gradient(circle at 82% 20%, rgba(167,139,250,0.05) 0%, transparent 45%);
  pointer-events: none;
}
.crnt-hero-badge {
  display     : inline-flex;
  align-items : center;
  gap         : 7px;
  background  : var(--c-accent-soft);
  border      : 1px solid rgba(14,165,233,0.28);
  color       : var(--c-accent3);
  font-size   : 11.5px;
  font-weight : 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding     : 5px 14px;
  border-radius: 99px;
  margin-bottom: 20px;
}
.crnt-hero-badge svg { width:13px; height:13px; flex-shrink:0; }
.crnt-hero h1 {
  font-size   : clamp(2rem, 4.5vw, 3rem);
  font-weight : 800;
  letter-spacing: -0.03em;
  line-height : 1.1;
  margin      : 0 0 14px;
  color       : var(--c-text);
}
.crnt-hero h1 span {
  background  : linear-gradient(135deg, var(--c-accent2) 0%, var(--c-accent3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.crnt-hero p {
  max-width   : 580px;
  margin      : 0 auto;
  font-size   : 1.04rem;
  line-height : 1.7;
  color       : var(--c-muted);
}

/* ── App Wrapper ───────────────────────────────────────────────── */
.crnt-app {
  max-width : 1280px;
  margin    : 0 auto;
  padding   : 36px 20px 64px;
}

/* ── Parse Bar ─────────────────────────────────────────────────── */
.crnt-parse-bar {
  display         : flex;
  align-items     : center;
  gap             : 10px;
  background      : var(--c-surface);
  border          : 1px solid var(--c-border);
  border-radius   : var(--c-radius-sm);
  padding         : 10px 14px;
  margin-bottom   : 22px;
  flex-wrap       : wrap;
}
.crnt-parse-label {
  font-size   : 12.5px;
  font-weight : 600;
  color       : var(--c-muted);
  white-space : nowrap;
}
.crnt-parse-input {
  flex        : 1 1 220px;
  min-width   : 0;
  background  : var(--c-surface2);
  border      : 1px solid var(--c-border2);
  border-radius: var(--c-radius-xs);
  color       : var(--c-text);
  font-family : var(--c-mono);
  font-size   : 13.5px;
  padding     : 7px 12px;
  outline     : none;
  transition  : border-color .18s;
}
.crnt-parse-input::placeholder { color: var(--c-faint); font-family: var(--c-font); }
.crnt-parse-input:focus { border-color: var(--c-accent); }
.crnt-parse-err {
  font-size   : 12px;
  color       : var(--c-err);
  display     : none;
}
.crnt-parse-err.is-visible { display: block; }

/* ── Presets ───────────────────────────────────────────────────── */
.crnt-presets {
  margin-bottom : 28px;
}
.crnt-presets-label {
  font-size     : 11.5px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color         : var(--c-muted);
  margin-bottom : 10px;
}
.crnt-presets-row {
  display   : flex;
  flex-wrap : wrap;
  gap       : 8px;
}
.crnt-preset-btn {
  display     : inline-flex;
  align-items : center;
  gap         : 6px;
  padding     : 6px 14px;
  border-radius: 99px;
  background  : var(--c-surface2);
  border      : 1px solid var(--c-border2);
  color       : var(--c-muted);
  font-family : var(--c-font);
  font-size   : 12.5px;
  font-weight : 600;
  cursor      : pointer;
  transition  : all .18s ease;
  white-space : nowrap;
}
.crnt-preset-btn:hover {
  background    : var(--c-accent-soft);
  border-color  : var(--c-accent);
  color         : var(--c-accent2);
}
.crnt-preset-btn.is-active {
  background    : var(--c-accent-soft);
  border-color  : rgba(14,165,233,.5);
  color         : var(--c-accent2);
}

/* ── Field Grid ────────────────────────────────────────────────── */
.crnt-fields {
  display               : grid;
  grid-template-columns : repeat(5, 1fr);
  gap                   : 14px;
  margin-bottom         : 28px;
}

/* ── Field Card ────────────────────────────────────────────────── */
.crnt-field-card {
  background    : var(--c-surface);
  border        : 1px solid var(--c-border);
  border-radius : var(--c-radius);
  overflow      : hidden;
  display       : flex;
  flex-direction: column;
  transition    : border-color .2s;
}
.crnt-field-card:focus-within { border-color: var(--c-border2); }

.crnt-field-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 11px 14px 10px;
  background      : var(--c-surface2);
  border-bottom   : 1px solid var(--c-border);
}
.crnt-field-title {
  font-size     : 12px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.crnt-field-card[data-field="minute"]  .crnt-field-title { color: var(--c-min-col); }
.crnt-field-card[data-field="hour"]    .crnt-field-title { color: var(--c-hr-col);  }
.crnt-field-card[data-field="dom"]     .crnt-field-title { color: var(--c-dom-col); }
.crnt-field-card[data-field="month"]   .crnt-field-title { color: var(--c-mon-col); }
.crnt-field-card[data-field="dow"]     .crnt-field-title { color: var(--c-dow-col); }

.crnt-tip-btn {
  width       : 18px;
  height      : 18px;
  border-radius: 99px;
  background  : var(--c-faint);
  border      : none;
  cursor      : pointer;
  display     : flex;
  align-items : center;
  justify-content: center;
  color       : var(--c-muted);
  font-family : var(--c-font);
  font-size   : 10px;
  font-weight : 700;
  flex-shrink : 0;
  position    : relative;
  transition  : background .15s;
}
.crnt-tip-btn:hover { background: var(--c-border2); color: var(--c-text); }
.crnt-tip-btn .crnt-tooltip {
  position      : absolute;
  bottom        : calc(100% + 8px);
  right         : 0;
  width         : 200px;
  background    : var(--c-surface3);
  border        : 1px solid var(--c-border2);
  border-radius : var(--c-radius-xs);
  padding       : 9px 12px;
  font-size     : 11.5px;
  font-weight   : 400;
  line-height   : 1.55;
  color         : var(--c-muted);
  text-transform: none;
  letter-spacing: normal;
  white-space   : normal;
  pointer-events: none;
  opacity       : 0;
  transform     : translateY(4px);
  transition    : all .18s ease;
  z-index       : 99;
  box-shadow    : var(--c-shadow-sm);
}
.crnt-tip-btn:hover .crnt-tooltip,
.crnt-tip-btn:focus .crnt-tooltip {
  opacity  : 1;
  transform: translateY(0);
}

/* Type selector tabs */
.crnt-type-tabs {
  display         : flex;
  border-bottom   : 1px solid var(--c-border);
  overflow-x      : auto;
  scrollbar-width : none;
}
.crnt-type-tabs::-webkit-scrollbar { display: none; }
.crnt-type-tab {
  flex       : 1;
  padding    : 6px 4px;
  background : none;
  border     : none;
  color      : var(--c-muted);
  font-family: var(--c-font);
  font-size  : 10.5px;
  font-weight: 600;
  cursor     : pointer;
  white-space: nowrap;
  text-align : center;
  border-bottom: 2px solid transparent;
  transition : all .15s;
  letter-spacing: 0.01em;
}
.crnt-type-tab:hover { color: var(--c-text); }
.crnt-type-tab.is-active {
  color        : var(--c-accent2);
  border-bottom-color: var(--c-accent);
}

/* Field body */
.crnt-field-body {
  padding : 13px 13px 10px;
  flex    : 1;
}

.crnt-field-row {
  display   : flex;
  flex-wrap : wrap;
  gap       : 6px;
  align-items: center;
  margin-bottom: 6px;
}
.crnt-field-row:last-child { margin-bottom: 0; }

.crnt-field-label-sm {
  font-size   : 11px;
  color       : var(--c-muted);
  font-weight : 600;
  min-width   : 32px;
}

/* Shared input / select styles */
.crnt-inp,
.crnt-sel {
  background    : var(--c-surface2);
  border        : 1px solid var(--c-border2);
  border-radius : var(--c-radius-xs);
  color         : var(--c-text);
  font-family   : var(--c-mono);
  font-size      : 13px;
  padding        : 5px 9px;
  outline        : none;
  transition     : border-color .18s;
  width          : 100%;
}
.crnt-inp:focus,
.crnt-sel:focus { border-color: var(--c-accent); }
.crnt-inp[type="number"] { -moz-appearance: textfield; }
.crnt-inp[type="number"]::-webkit-inner-spin-button { display: none; }
.crnt-sel { cursor: pointer; }
.crnt-sel option { background: #0b1525; color: var(--c-text); }

/* Range: from → to row */
.crnt-range-row {
  display     : grid;
  grid-template-columns: 1fr auto 1fr;
  align-items : center;
  gap         : 6px;
}
.crnt-range-arrow { color: var(--c-faint); font-size: 14px; }

/* List textarea */
.crnt-list-inp {
  background    : var(--c-surface2);
  border        : 1px solid var(--c-border2);
  border-radius : var(--c-radius-xs);
  color         : var(--c-text);
  font-family   : var(--c-mono);
  font-size      : 12.5px;
  padding        : 7px 10px;
  outline        : none;
  width          : 100%;
  resize         : none;
  line-height    : 1.5;
  height         : 54px;
  transition     : border-color .18s;
}
.crnt-list-inp:focus { border-color: var(--c-accent); }
.crnt-list-hint {
  font-size  : 10.5px;
  color      : var(--c-faint);
  margin-top : 4px;
}

/* Field preview badge */
.crnt-field-preview {
  display         : flex;
  align-items     : center;
  justify-content : center;
  padding         : 8px 12px;
  border-top      : 1px solid var(--c-border);
  background      : var(--c-surface2);
}
.crnt-field-value {
  font-family   : var(--c-mono);
  font-size     : 15px;
  font-weight   : 700;
  letter-spacing: 0.04em;
}
.crnt-field-card[data-field="minute"]  .crnt-field-value { color: var(--c-min-col); }
.crnt-field-card[data-field="hour"]    .crnt-field-value { color: var(--c-hr-col);  }
.crnt-field-card[data-field="dom"]     .crnt-field-value { color: var(--c-dom-col); }
.crnt-field-card[data-field="month"]   .crnt-field-value { color: var(--c-mon-col); }
.crnt-field-card[data-field="dow"]     .crnt-field-value { color: var(--c-dow-col); }

/* ── Output Box ────────────────────────────────────────────────── */
.crnt-output-box {
  background    : var(--c-surface);
  border        : 1px solid var(--c-border);
  border-radius : var(--c-radius);
  overflow      : hidden;
  margin-bottom : 20px;
}
.crnt-output-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 12px 18px;
  background      : var(--c-surface2);
  border-bottom   : 1px solid var(--c-border);
  flex-wrap       : wrap;
  gap             : 10px;
}
.crnt-output-title {
  font-size   : 12px;
  font-weight : 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color       : var(--c-muted);
}
.crnt-output-controls {
  display     : flex;
  align-items : center;
  gap         : 10px;
}

/* 12/24h toggle */
.crnt-toggle-wrap {
  display     : flex;
  align-items : center;
  gap         : 7px;
  font-size   : 12px;
  font-weight : 600;
  color       : var(--c-muted);
  cursor      : pointer;
  user-select : none;
}
.crnt-toggle-track {
  width        : 34px;
  height       : 18px;
  border-radius: 99px;
  background   : var(--c-faint);
  border       : 1px solid var(--c-border2);
  position     : relative;
  transition   : background .2s;
  flex-shrink  : 0;
}
.crnt-toggle-track.is-on {
  background    : var(--c-accent);
  border-color  : var(--c-accent);
}
.crnt-toggle-thumb {
  position     : absolute;
  top          : 2px;
  left         : 2px;
  width        : 12px;
  height       : 12px;
  border-radius: 99px;
  background   : #fff;
  transition   : left .2s;
}
.crnt-toggle-track.is-on .crnt-toggle-thumb { left: 18px; }

.crnt-output-body {
  padding : 22px 22px 18px;
}

/* Big expression display */
.crnt-expr-display {
  display     : flex;
  align-items : center;
  flex-wrap   : wrap;
  gap         : 6px;
  margin-bottom: 18px;
  font-family : var(--c-mono);
  font-size   : clamp(22px, 4vw, 34px);
  font-weight : 800;
  letter-spacing: 0.06em;
  line-height : 1.2;
}
.crnt-ep { transition: color .2s; }
.crnt-ep-min { color: var(--c-min-col); }
.crnt-ep-hr  { color: var(--c-hr-col);  }
.crnt-ep-dom { color: var(--c-dom-col); }
.crnt-ep-mon { color: var(--c-mon-col); }
.crnt-ep-dow { color: var(--c-dow-col); }
.crnt-ep-sep { color: var(--c-faint); font-size: .7em; align-self: center; }

/* Human readable */
.crnt-human {
  background    : var(--c-surface2);
  border        : 1px solid var(--c-border);
  border-radius : var(--c-radius-sm);
  padding       : 14px 18px;
  font-size     : 15px;
  font-weight   : 500;
  color         : var(--c-text);
  line-height   : 1.6;
  margin-bottom : 18px;
}
.crnt-human-prefix {
  font-size   : 11px;
  font-weight : 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color       : var(--c-muted);
  margin-bottom: 4px;
}

/* Action buttons */
.crnt-output-actions {
  display   : flex;
  gap       : 10px;
  flex-wrap : wrap;
}
.crnt-btn {
  display     : inline-flex;
  align-items : center;
  gap         : 7px;
  padding     : 9px 18px;
  border-radius: var(--c-radius-sm);
  font-family : var(--c-font);
  font-size   : 13.5px;
  font-weight : 600;
  cursor      : pointer;
  border      : none;
  outline     : none;
  transition  : all .18s ease;
  white-space : nowrap;
}
.crnt-btn svg { width:15px; height:15px; flex-shrink:0; }
.crnt-btn-primary {
  background  : linear-gradient(135deg, var(--c-accent) 0%, #0369a1 100%);
  color       : #fff;
  box-shadow  : 0 4px 16px rgba(14,165,233,.3);
}
.crnt-btn-primary:hover {
  transform   : translateY(-1px);
  box-shadow  : 0 6px 22px rgba(14,165,233,.45);
}
.crnt-btn-primary:active { transform: translateY(0); }
.crnt-btn-outline {
  background  : var(--c-surface2);
  color       : var(--c-muted);
  border      : 1px solid var(--c-border2);
}
.crnt-btn-outline:hover {
  background  : var(--c-border);
  color       : var(--c-text);
  border-color: var(--c-accent);
}
.crnt-btn-danger {
  background  : rgba(248,113,113,.1);
  color       : var(--c-err);
  border      : 1px solid rgba(248,113,113,.25);
}
.crnt-btn-danger:hover {
  background  : rgba(248,113,113,.2);
  border-color: rgba(248,113,113,.5);
}
.crnt-btn.is-copied {
  color       : var(--c-ok) !important;
  border-color: rgba(52,211,153,.4) !important;
  background  : var(--c-ok-bg) !important;
}

/* ── Next Runs ─────────────────────────────────────────────────── */
.crnt-next-runs {
  background    : var(--c-surface);
  border        : 1px solid var(--c-border);
  border-radius : var(--c-radius);
  overflow      : hidden;
  margin-bottom : 48px;
}
.crnt-next-header {
  display     : flex;
  align-items : center;
  gap         : 8px;
  padding     : 11px 18px;
  background  : var(--c-surface2);
  border-bottom: 1px solid var(--c-border);
  font-size   : 12px;
  font-weight : 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color       : var(--c-muted);
}
.crnt-next-header svg { width:14px; height:14px; color: var(--c-accent2); }
.crnt-runs-list {
  padding : 6px 0;
}
.crnt-run-row {
  display         : flex;
  align-items     : center;
  gap             : 14px;
  padding         : 9px 18px;
  border-bottom   : 1px solid var(--c-border);
  transition      : background .14s;
}
.crnt-run-row:last-child { border-bottom: none; }
.crnt-run-row:hover { background: var(--c-surface2); }
.crnt-run-num {
  width       : 22px;
  height      : 22px;
  border-radius: 99px;
  background  : var(--c-faint);
  display     : flex;
  align-items : center;
  justify-content: center;
  font-size   : 10.5px;
  font-weight : 700;
  color       : var(--c-muted);
  flex-shrink : 0;
}
.crnt-run-time {
  font-family : var(--c-mono);
  font-size   : 13.5px;
  font-weight : 600;
  color       : var(--c-text);
  flex        : 1;
}
.crnt-run-rel {
  font-size   : 12px;
  color       : var(--c-muted);
  white-space : nowrap;
}
.crnt-no-runs {
  padding   : 18px;
  font-size : 13px;
  color     : var(--c-muted);
  text-align: center;
}

/* ── SEO / Info Section ────────────────────────────────────────── */
.crnt-info-section {
  max-width : 960px;
  margin    : 0 auto;
  padding   : 0 20px;
}
.crnt-info-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(240px, 1fr));
  gap                   : 18px;
  margin-bottom         : 48px;
}
.crnt-info-card {
  background    : var(--c-surface);
  border        : 1px solid var(--c-border);
  border-radius : var(--c-radius);
  padding       : 22px;
}
.crnt-info-icon {
  width       : 38px;
  height      : 38px;
  border-radius: 10px;
  background  : var(--c-accent-soft);
  border      : 1px solid rgba(14,165,233,.25);
  display     : flex;
  align-items : center;
  justify-content: center;
  margin-bottom: 13px;
}
.crnt-info-icon svg { width:18px; height:18px; color: var(--c-accent2); }
.crnt-info-card h3 {
  font-size   : 14.5px;
  font-weight : 700;
  color       : var(--c-text);
  margin      : 0 0 7px;
}
.crnt-info-card p {
  font-size   : 13px;
  line-height : 1.65;
  color       : var(--c-muted);
  margin      : 0;
}

/* Cron examples table */
.crnt-examples-title {
  font-size   : 20px;
  font-weight : 800;
  color       : var(--c-text);
  margin      : 0 0 18px;
  text-align  : center;
}
.crnt-examples-table {
  width         : 100%;
  border-collapse: collapse;
  margin-bottom : 48px;
  font-size     : 13.5px;
}
.crnt-examples-table th {
  text-align    : left;
  padding       : 10px 14px;
  background    : var(--c-surface2);
  border-bottom : 2px solid var(--c-border2);
  font-size     : 11px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color         : var(--c-muted);
}
.crnt-examples-table td {
  padding       : 11px 14px;
  border-bottom : 1px solid var(--c-border);
  color         : var(--c-muted);
  vertical-align: top;
}
.crnt-examples-table tr:last-child td { border-bottom: none; }
.crnt-examples-table tr:hover td { background: var(--c-surface2); }
.crnt-examples-table .crnt-ex-expr {
  font-family : var(--c-mono);
  font-size   : 13px;
  font-weight : 600;
  color       : var(--c-accent2);
  white-space : nowrap;
}
.crnt-examples-table .crnt-ex-load {
  cursor      : pointer;
}
.crnt-examples-table .crnt-ex-load:hover {
  color       : var(--c-accent2);
  text-decoration: underline;
}

/* ── FAQ ───────────────────────────────────────────────────────── */
.crnt-faq-title {
  font-size   : 20px;
  font-weight : 800;
  color       : var(--c-text);
  margin      : 0 0 18px;
  text-align  : center;
}
.crnt-faq-list { display:flex; flex-direction:column; gap:9px; margin-bottom:60px; }
.crnt-faq-item {
  background    : var(--c-surface);
  border        : 1px solid var(--c-border);
  border-radius : var(--c-radius-sm);
  overflow      : hidden;
  transition    : border-color .2s;
}
.crnt-faq-item.is-open { border-color: var(--c-border2); }
.crnt-faq-q {
  width       : 100%;
  display     : flex;
  align-items : center;
  justify-content: space-between;
  padding     : 15px 20px;
  background  : none;
  border      : none;
  cursor      : pointer;
  font-family : var(--c-font);
  font-size   : 14px;
  font-weight : 600;
  color       : var(--c-text);
  text-align  : left;
  gap         : 12px;
  transition  : background .15s;
}
.crnt-faq-q:hover { background: var(--c-surface2); }
.crnt-faq-chevron {
  width     : 17px;
  height    : 17px;
  flex-shrink: 0;
  color     : var(--c-muted);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
}
.crnt-faq-item.is-open .crnt-faq-chevron {
  transform : rotate(180deg);
  color     : var(--c-accent2);
}
.crnt-faq-a {
  display   : none;
  padding   : 4px 20px 16px;
  font-size : 13.5px;
  line-height: 1.7;
  color     : var(--c-muted);
  border-top: 1px solid var(--c-border);
}
.crnt-faq-item.is-open .crnt-faq-a { display: block; }

/* ── Toast ─────────────────────────────────────────────────────── */
.crnt-toast {
  position  : fixed;
  bottom    : 28px;
  right     : 28px;
  background: var(--c-surface2);
  border    : 1px solid var(--c-border2);
  border-radius: var(--c-radius-sm);
  color     : var(--c-text);
  font-family: var(--c-font);
  font-size : 13.5px;
  font-weight: 600;
  padding   : 11px 18px;
  box-shadow: var(--c-shadow);
  display   : flex;
  align-items: center;
  gap       : 9px;
  z-index   : 9999;
  transform : translateY(12px);
  opacity   : 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.crnt-toast.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.crnt-toast svg { width:15px; height:15px; color:var(--c-ok); flex-shrink:0; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .crnt-fields { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .crnt-fields { grid-template-columns: repeat(2, 1fr); }
  .crnt-hero { padding: 42px 18px 30px; }
  .crnt-app { padding: 24px 14px 48px; }
  .crnt-output-actions { gap: 8px; }
  .crnt-btn { flex: 1 1 auto; justify-content: center; }
  .crnt-expr-display { font-size: clamp(20px, 6vw, 28px); }
  .crnt-examples-table { display:block; overflow-x:auto; }
}
@media (max-width: 500px) {
  .crnt-fields { grid-template-columns: 1fr 1fr; }
  .crnt-hero h1 { font-size: 1.65rem; }
  .crnt-toast { bottom:14px; right:14px; left:14px; }
}
@media (max-width: 380px) {
  .crnt-fields { grid-template-columns: 1fr; }
}