@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

  :root {
    --paper: #f4ede0;
    --paper-2: #ece1cf;
    --ink: #2b2622;
    --ink-soft: #5c5147;
    --terra: #c25a35;
    --terra-soft: #e7c4b3;
    --line: #d8cab3;
    --ok: #5a7d4f;
    --ok-bg: #dfe8d6;
    --warn: #b8862f;
    --warn-bg: #f0e2c2;
    --bad: #b04a32;
    --bad-bg: #f0d4cb;
    --shadow: 0 1px 0 #fff8, 0 2px 8px #2b262218;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Spline Sans Mono', monospace;
    background: var(--paper);
    background-image: radial-gradient(circle at 20% 10%, #fff6ea 0%, transparent 40%),
                      radial-gradient(circle at 80% 80%, #ead9bf 0%, transparent 45%);
    color: var(--ink);
    line-height: 1.5;
    padding: 0;
  }
  header {
    border-bottom: 2px solid var(--ink);
    padding: 22px 26px 18px;
    background: var(--paper-2);
  }
  header h1 {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: clamp(28px, 5vw, 44px);
    letter-spacing: -0.02em;
    line-height: 0.95;
  }
  header .sub {
    font-size: 13px; color: var(--ink-soft); margin-top: 6px;
  }
  .wrap {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 0;
    min-height: calc(100vh - 90px);
  }
  @media (max-width: 860px) { .wrap { grid-template-columns: 1fr; } }

  /* ---- Controls panel ---- */
  .panel {
    background: var(--paper-2);
    border-right: 2px solid var(--ink);
    padding: 20px 22px 60px;
    overflow-y: auto;
  }
  .panel h2 {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 22px 0 10px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--line);
  }
  .panel h2:first-child { margin-top: 0; }
  .field { margin-bottom: 14px; }
  .field label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px; color: var(--ink-soft); margin-bottom: 4px;
  }
  .field label .val {
    font-weight: 600; color: var(--terra); font-size: 13px;
  }
  input[type=range] {
    -webkit-appearance: none; width: 100%; height: 4px;
    background: var(--line); border-radius: 2px; outline: none;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
    background: var(--terra); cursor: pointer; border: 2px solid var(--paper);
    box-shadow: 0 1px 3px #0003;
  }
  input[type=range]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; background: var(--terra);
    cursor: pointer; border: 2px solid var(--paper);
  }
  input[type=number], input[type=time], select {
    width: 100%; font-family: inherit; font-size: 13px;
    padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px;
    background: var(--paper); color: var(--ink);
  }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .checkrow { display: flex; align-items: center; gap: 8px; font-size: 13px; }
  .toggle {
    display: flex; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden;
    margin-bottom: 4px;
  }
  .toggle button {
    flex: 1; font-family: inherit; font-size: 12px; padding: 8px 4px;
    background: var(--paper); color: var(--ink-soft); border: none; cursor: pointer;
  }
  .toggle button.active { background: var(--ink); color: var(--paper); font-weight: 600; }

  /* ---- Output ---- */
  .out { padding: 24px 30px 80px; overflow-y: auto; }
  .out h2 {
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px;
    margin: 26px 0 12px;
  }
  .out h2:first-child { margin-top: 0; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
  th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
  th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
  tr.total td { font-weight: 600; border-top: 2px solid var(--ink); }

  .step-card {
    border: 1px solid var(--line); border-left: 4px solid var(--terra);
    border-radius: 6px; padding: 12px 14px; margin-bottom: 10px;
    background: var(--paper-2); box-shadow: var(--shadow);
  }
  .step-card.f-ok { border-left-color: var(--ok); }
  .step-card.f-warn { border-left-color: var(--warn); }
  .step-card.f-bad { border-left-color: var(--bad); }
  .step-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .step-time { font-weight: 600; font-size: 15px; }
  .step-name { font-family: 'Fraunces', serif; font-size: 16px; }
  .badge {
    font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  }
  .badge.ok { background: var(--ok-bg); color: var(--ok); }
  .badge.warn { background: var(--warn-bg); color: var(--warn); }
  .badge.bad { background: var(--bad-bg); color: var(--bad); }
  .step-meta { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
  .step-detail { font-size: 13px; margin-top: 6px; }

  .note {
    background: var(--terra-soft); border-radius: 6px; padding: 10px 14px;
    font-size: 12px; margin: 8px 0 16px; color: #5e2d1a;
  }
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 10px; margin-bottom: 8px; }
  .kpi { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; background: var(--paper-2); }
  .kpi .k { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
  .kpi .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .kpi .v small { font-size: 12px; color: var(--ink-soft); font-weight: 400; }
  .footer-note { font-size: 11px; color: var(--ink-soft); margin-top: 24px; border-top: 1px dashed var(--line); padding-top: 12px; }
  .pdf-btn {
    margin-top: 18px; font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600;
    padding: 12px 20px; background: var(--ink); color: var(--paper); border: none;
    border-radius: 8px; cursor: pointer; box-shadow: var(--shadow); width: 100%;
  }
  .pdf-btn:hover { background: var(--terra); }
  .ing-row { display: grid; grid-template-columns: 1fr 70px auto; gap: 6px; align-items: center; margin-bottom: 5px; }
  .ing-row input[type=text] { font-size: 12px; padding: 5px 7px; }
  .ing-row .ing-pct { display: flex; align-items: center; gap: 3px; font-size: 12px; }
  .ing-row .ing-pct input { width: 48px; font-size: 12px; padding: 4px 5px; text-align: right; }
  .ing-row .del { background: var(--bad-bg); color: var(--bad); border: none; border-radius: 4px; cursor: pointer; padding: 5px 9px; font-family: inherit; }
  .sum-warn { color: var(--bad) !important; }
  .dayrow { display: flex; flex-wrap: wrap; gap: 4px; }
  .dayrow label {
    display: flex; align-items: center; gap: 3px; font-size: 11px;
    border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; cursor: pointer;
    background: var(--paper);
  }
  .dayrow input { margin: 0; }
  .addbtn {
    font-family: inherit; font-size: 12px; padding: 6px 10px; margin-top: 6px;
    background: var(--paper); border: 1px dashed var(--terra); color: var(--terra);
    border-radius: 4px; cursor: pointer; width: 100%;
  }
  .addbtn:hover { background: var(--terra-soft); }
  .extra-win { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 5px; align-items: center; margin-bottom: 5px; }
  .extra-win select, .extra-win input { font-size: 12px; padding: 4px 5px; }
  .extra-win .del { background: var(--bad-bg); color: var(--bad); border: none; border-radius: 4px; cursor: pointer; padding: 4px 8px; font-family: inherit; }
  .room-row { display: grid; grid-template-columns: 1fr 92px auto; gap: 6px; align-items: center; margin-bottom: 6px; }
  .room-row input[type=text] { font-size: 12px; padding: 5px 7px; }
  .room-row .rtemp { display: flex; align-items: center; gap: 4px; font-size: 12px; }
  .room-row .rtemp input { width: 100%; }
  .room-row .rval { font-size: 12px; font-weight: 600; color: var(--terra); min-width: 42px; text-align: right; }
  .room-row .del { background: var(--bad-bg); color: var(--bad); border: none; border-radius: 4px; cursor: pointer; padding: 5px 9px; font-family: inherit; }
  .alts { font-size: 11px; margin-top: 6px; border-top: 1px dashed var(--line); padding-top: 6px; }
  .alts .alt { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; color: var(--ink-soft); }
  .alts .alt.chosen { color: var(--terra); font-weight: 600; }
  details.alts-wrap { margin-top: 6px; }
  details.alts-wrap > summary {
    font-size: 11px; color: var(--ink-soft); cursor: pointer; list-style: none;
    padding: 3px 0; border-top: 1px dashed var(--line); user-select: none;
  }
  details.alts-wrap > summary::-webkit-details-marker { display: none; }
  details.alts-wrap > summary::before { content: '▸ '; color: var(--terra); }
  details.alts-wrap[open] > summary::before { content: '▾ '; }
  details.alts-wrap > summary:hover { color: var(--terra); }