/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities;
@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Patrick+Hand&display=swap");
:root {
  --font-heading: "DM Serif Display", Georgia, serif;
  --font-body: "Manrope", Arial, sans-serif;
  --text-body: 400 16px/1.5 var(--font-body);
  --color-primary: #b83b24;
  --color-primary-tint: #f8dfd8;
  --color-secondary: #d99024;
  --color-tertiary: #59322a;
  --color-bg-page: #f9f0e4;
  --color-surface: #fff8ee;
  --color-surface-raised: #fffdf8;
  --color-text-primary: #2d1a14;
  --color-text-secondary: #6d5147;
  --color-text-inverse: #fff8ee;
  --color-border: #e7ceba;
  --color-success: #2e7966;
  --color-success-tint: #dcefe8;
  --color-warning: #a95a12;
  --color-warning-tint: #fbe7c6;
  --color-error: #ad3040;
  --color-error-tint: #f9dce0;
  --color-info: #405f9a;
  --color-info-tint: #dde7fa;
  --color-navbar-bg: var(--color-surface);
  @supports (color: color-mix(in lab, red, red)) {
    --color-navbar-bg: color-mix(in srgb, var(--color-surface) 92%, transparent);
  }
  --color-navbar-text: var(--color-text-primary);
  --color-tabbar-bg: var(--color-tertiary);
  @supports (color: color-mix(in lab, red, red)) {
    --color-tabbar-bg: color-mix(in srgb, var(--color-tertiary) 96%, transparent);
  }
  --color-tabbar-text: #ead7c5;
  --color-tabbar-active: var(--color-secondary);
  --spacing-page: 20px;
  --card-gap: 14px;
  --radius: 20px;
  --height-navbar: 64px;
  --height-tabbar: 80px;
  --height-actionbar: 84px;
  --transition-fast: 150ms ease;
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 2px var(--color-tertiary), 0 4px 10px var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-tertiary) 14%, transparent), 0 4px 10px color-mix(in srgb, var(--color-primary) 8%, transparent);
  }
  --shadow-md: 0 2px 4px var(--color-tertiary), 0 12px 28px var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --shadow-md: 0 2px 4px color-mix(in srgb, var(--color-tertiary) 14%, transparent), 0 12px 28px color-mix(in srgb, var(--color-primary) 13%, transparent);
  }
  --shadow-lg: 0 5px 12px var(--color-tertiary), 0 24px 54px var(--color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    --shadow-lg: 0 5px 12px color-mix(in srgb, var(--color-tertiary) 18%, transparent), 0 24px 54px color-mix(in srgb, var(--color-primary) 18%, transparent);
  }
  --chart-1: var(--color-primary);
  --chart-2: var(--color-secondary);
  --chart-3: #77549a;
  --chart-4: var(--color-info);
  --chart-5: var(--color-success);
  --chart-6: #c95c62;
}
@layer base {
  body {
    font: var(--text-body);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    background-image: radial-gradient(circle at 88% 4%, var(--color-primary-tint), transparent 30%), linear-gradient(145deg, var(--color-bg-page), var(--color-surface));
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text-primary);
  }
  h1 {
    font-size: 34px;
    line-height: 1.02;
  }
  h2 {
    font-size: 25px;
    line-height: 1.12;
  }
  h3 {
    font-size: 19px;
    line-height: 1.2;
  }
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
  }
}
@layer components {
  .surface-raised {
    background: linear-gradient(145deg, var(--color-surface-raised), var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }
  .kitchen-board {
    background-color: var(--color-tertiary);
    background-image: repeating-linear-gradient(94deg, var(--color-text-primary) 0 1px, transparent 1px 9px), linear-gradient(135deg, var(--color-secondary), transparent 55%);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: repeating-linear-gradient(94deg, color-mix(in srgb, var(--color-text-primary) 22%, transparent) 0 1px, transparent 1px 9px), linear-gradient(135deg, color-mix(in srgb, var(--color-secondary) 18%, transparent), transparent 55%);
    }
    border: 1px solid var(--color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--color-secondary) 45%, transparent);
    }
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--color-text-inverse);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-lg), inset 0 1px 0 color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
    }
  }
  .floating-glass {
    background: var(--color-surface-raised);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-surface-raised) 78%, transparent);
    }
    border: 1px solid var(--color-text-inverse);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--color-text-inverse) 74%, transparent);
    }
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(16px) saturate(125%);
  }
  .button-primary {
    color: var(--color-text-inverse);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 74%, var(--color-tertiary)));
    }
    border: 1px solid var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--color-primary) 72%, var(--color-tertiary));
    }
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-body);
    font-weight: 800;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
  }
  .button-primary:hover {
    box-shadow: var(--shadow-md);
    filter: saturate(1.08);
    transform: translateY(-1px);
  }
  .button-secondary {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-body);
    font-weight: 800;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  }
  .button-secondary:hover {
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
  .hover-lift {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  }
  .hover-lift:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .filter-tab {
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  }
  .filter-tab:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-1px);
  }
  .filter-tab.active {
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
  }
  .stat-card {
    color: var(--color-text-primary);
    background: radial-gradient(circle at 100% 0%, var(--color-primary-tint), transparent 52%), linear-gradient(145deg, var(--color-surface-raised), var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }
  .stat-card.is-secondary {
    background: radial-gradient(circle at 100% 0%, var(--color-warning-tint), transparent 52%), linear-gradient(145deg, var(--color-surface-raised), var(--color-surface));
  }
  .stat-card.is-tertiary {
    background: radial-gradient(circle at 100% 0%, var(--color-info-tint), transparent 52%), linear-gradient(145deg, var(--color-surface-raised), var(--color-surface));
  }
  .recipe-tile {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .recipe-tile:hover {
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-md);
  }
  .ingredient-tile {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  }
  .ingredient-tile.selected {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
  }
  .ingredient-tile:hover {
    border-color: var(--color-secondary);
    transform: translateY(-1px);
  }
  .badge-success, .badge-warning, .badge-error, .badge-info {
    color: var(--color-text-primary);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }
  .badge-success {
    background: var(--color-success-tint);
    border-color: var(--color-success);
  }
  .badge-warning {
    background: var(--color-warning-tint);
    border-color: var(--color-warning);
  }
  .badge-error {
    background: var(--color-error-tint);
    border-color: var(--color-error);
  }
  .badge-info {
    background: var(--color-info-tint);
    border-color: var(--color-info);
  }
  .form-input, .form-textarea, .form-select {
    color: var(--color-text-primary);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 var(--color-text-inverse);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text-inverse) 68%, transparent);
    }
    font-family: var(--font-body);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  }
  .form-input, .form-select {
    min-height: 48px;
    padding: 0 14px;
  }
  .form-textarea {
    min-height: 112px;
    padding: 14px;
  }
  .form-input:focus, .form-textarea:focus, .form-select:focus {
    background-color: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-tint);
    outline: none;
  }
  .form-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    padding-right: 40px;
  }
  .data-table-wrap {
    background: linear-gradient(145deg, var(--color-surface-raised), var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: auto;
  }
  .data-table {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
    border-collapse: separate;
    border-spacing: 0;
  }
  .data-table thead {
    color: var(--color-text-secondary);
    background: var(--color-primary-tint);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .data-table tbody tr {
    border-color: var(--color-border);
    transition: background-color var(--transition-fast);
  }
  .data-table tbody tr:hover {
    background-color: var(--color-primary-tint);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-primary-tint) 48%, var(--color-surface-raised));
    }
  }
  .progress-track {
    background: var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .progress-bar {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--radius);
    box-shadow: 0 0 12px var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 42%, transparent);
    }
    transition: width var(--transition-normal);
  }
  .chart-surface {
    background: linear-gradient(145deg, var(--color-surface-raised), var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  .step-panel {
    color: var(--color-text-inverse);
    background: linear-gradient(150deg, var(--color-tertiary), var(--color-tertiary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(150deg, var(--color-tertiary), color-mix(in srgb, var(--color-tertiary) 72%, var(--color-primary)));
    }
    border: 1px solid var(--color-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--color-secondary) 50%, transparent);
    }
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
  }
  .skeleton-line, .skeleton-circle {
    background: linear-gradient(90deg, var(--color-border), var(--color-surface-raised), var(--color-border));
    background-size: 200% 100%;
    animation: kitchen-shimmer 1.35s linear infinite;
  }
  .skeleton-line {
    border-radius: var(--radius);
  }
  .skeleton-circle {
    border-radius: 50%;
  }
  @keyframes kitchen-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .button-primary, .button-secondary, .hover-lift, .filter-tab, .ingredient-tile, .progress-bar, .data-table tbody tr, .skeleton-line, .skeleton-circle {
      animation: none;
      transition-duration: 0ms;
    }
  }
}

/* Hand-drawn hamburger atelier — global visual language */
:root {
  --font-heading: "Patrick Hand", "Comic Neue", cursive;
  --font-body: "Comic Neue", ui-rounded, system-ui, sans-serif;
  --text-body: 700 16px/1.45 var(--font-body);
  --color-primary: #e3512d;
  --color-primary-tint: #ffe5d5;
  --color-secondary: #f2b845;
  --color-tertiary: #31322e;
  --color-bg-page: #fff8e8;
  --color-surface: #fffdf5;
  --color-surface-raised: #fffef9;
  --color-text-primary: #2e342f;
  --color-text-secondary: #647066;
  --color-text-inverse: #fffdf5;
  --color-border: #343b34;
  --color-success: #438061;
  --color-success-tint: #dff1d8;
  --color-warning: #bc741c;
  --color-warning-tint: #fff0b9;
  --color-error: #bd3e44;
  --color-error-tint: #ffe0dd;
  --color-info: #4a7895;
  --color-info-tint: #ddecf2;
  --color-navbar-bg: #fff8e8;
  --color-tabbar-bg: #31322e;
  --color-tabbar-text: #f8eed6;
  --color-tabbar-active: #f6c855;
  --radius: 16px 19px 15px 18px;
  --shadow-sm: 2px 3px 0 #343b34;
  --shadow-md: 4px 5px 0 #343b34;
  --shadow-lg: 6px 7px 0 #343b34;
}

@layer base {
  body {
    background-color: var(--color-bg-page);
    background-image: radial-gradient(#eadfc6 1px, transparent 1px), radial-gradient(#f5e9ce 1px, transparent 1px);
    background-position: 0 0, 12px 12px;
    background-size: 24px 24px;
    letter-spacing: .01em;
  }
  h1, h2, h3 { letter-spacing: .025em; }
  h1 { font-size: 38px; line-height: .95; }
  h2 { font-size: 27px; line-height: 1; }
  h3 { font-size: 20px; }
  button, a, input, textarea, select { font-family: var(--font-body); }
}

@layer components {
  .surface-raised, .stat-card, .chart-surface, .recipe-tile, .ingredient-tile, .data-table-wrap {
    background: var(--color-surface-raised);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  .surface-raised:nth-child(even), .stat-card.is-secondary { border-radius: 20px 14px 19px 15px; }
  .stat-card.is-tertiary { border-radius: 14px 20px 15px 19px; }
  .kitchen-board {
    background-color: #495242;
    background-image: repeating-linear-gradient(12deg, rgba(255,255,255,.055) 0 1px, transparent 1px 12px), repeating-linear-gradient(96deg, rgba(0,0,0,.12) 0 1px, transparent 1px 16px);
    border: 2px solid var(--color-border);
    border-radius: 22px 17px 20px 15px;
    box-shadow: var(--shadow-md);
  }
  .floating-glass {
    background: #fffdf5;
    border: 2px solid var(--color-border);
    border-radius: 18px 14px 19px 15px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
  }
  .button-primary, .button-secondary {
    border: 2px solid var(--color-border);
    border-radius: 13px 17px 14px 16px;
    box-shadow: 2px 3px 0 var(--color-border);
    font-family: var(--font-body);
    font-weight: 700;
  }
  .button-primary { background: var(--color-primary); color: #fffdf5; }
  .button-secondary { background: #fffdf5; color: var(--color-text-primary); }
  .button-primary:hover, .button-secondary:hover { box-shadow: 3px 4px 0 var(--color-border); transform: translate(-1px, -1px); filter: none; }
  .filter-tab {
    border: 2px solid var(--color-border);
    border-radius: 999px 900px 850px 999px;
    background: #fffdf5;
    box-shadow: 1px 2px 0 var(--color-border);
    font-weight: 700;
  }
  .filter-tab.active { background: var(--color-secondary); color: var(--color-text-primary); border-color: var(--color-border); box-shadow: 2px 3px 0 var(--color-border); }
  .badge-success, .badge-warning, .badge-error, .badge-info {
    border: 1.5px solid currentColor;
    border-radius: 999px 850px 999px 900px;
    font-weight: 700;
  }
  .form-input, .form-textarea, .form-select {
    border: 2px solid var(--color-border);
    border-radius: 13px 17px 14px 16px;
    box-shadow: 2px 2px 0 #d8ceb8;
    background: #fffef9;
  }
  .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 3px 3px 0 var(--color-primary-tint); }
  .progress-track { border: 1.5px solid var(--color-border); border-radius: 999px; }
  .progress-bar { background: var(--color-primary); box-shadow: none; }
  .step-panel { background: #3d463c; border: 2px solid #242b24; border-radius: 21px 15px 20px 17px; box-shadow: var(--shadow-md); }
  .hover-lift:hover { transform: translate(-1px, -2px) rotate(-.25deg); box-shadow: var(--shadow-md); }
  .recipe-tile { overflow: hidden; }
  .recipe-tile img, .summary-hero-image, #recipe-image, .celebration-image { filter: saturate(.8) contrast(1.07) sepia(.14); }
}

/* Teppanyaki fire-grill overhaul — shared across every screen */
:root {
  --font-heading: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --font-body: "Trebuchet MS", Arial, sans-serif;
  --text-body: 600 16px/1.48 var(--font-body);
  --color-primary: #f24b18; --color-primary-tint: #4a170c; --color-secondary: #ffb11b;
  --color-tertiary: #100b08; --color-bg-page: #120d09; --color-surface: #1d1510; --color-surface-raised: #241912;
  --color-text-primary: #fff1d2; --color-text-secondary: #d0b99d; --color-text-inverse: #fff4df; --color-border: #724026;
  --color-success: #9ac35a; --color-success-tint: #24331c; --color-warning: #ffae1b; --color-warning-tint: #4d2b0a;
  --color-error: #ff6a49; --color-error-tint: #4a1914; --color-info: #f29b45; --color-info-tint: #42291b;
  --color-navbar-bg: #100b08; --color-tabbar-bg: #100b08; --color-tabbar-text: #d8c4a7; --color-tabbar-active: #ffbf35;
  --radius: 12px; --shadow-sm: 0 1px 0 rgba(255,183,64,.25), 0 8px 18px rgba(0,0,0,.36); --shadow-md: 0 1px 0 rgba(255,183,64,.3), 0 16px 35px rgba(0,0,0,.5); --shadow-lg: 0 1px 0 rgba(255,183,64,.3), 0 26px 55px rgba(0,0,0,.66);
}
@layer base {
  body { color: var(--color-text-primary); background-color: #120d09; background-image: radial-gradient(ellipse at 50% -15%, rgba(173,53,12,.38), transparent 42%), repeating-linear-gradient(0deg, rgba(255,184,72,.025) 0 1px, transparent 1px 5px), linear-gradient(110deg, #0c0907, #21130b 52%, #0b0907); letter-spacing: .015em; }
  h1,h2,h3 { font-family: var(--font-heading); font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
  h1 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: .94; } h2 { font-size: clamp(1.35rem, 4vw, 2rem); line-height: .98; } h3 { font-size: 1.05rem; }
}
@layer components {
  .surface-raised, .stat-card, .chart-surface, .recipe-tile, .ingredient-tile, .data-table-wrap, .floating-glass { color: var(--color-text-primary); background: linear-gradient(145deg, rgba(51,33,23,.98), rgba(27,18,13,.98)); border: 1px solid var(--color-border); border-top-color: rgba(255,183,64,.48); border-radius: var(--radius); box-shadow: var(--shadow-md); }
  .recipe-tile { position: relative; } .recipe-tile > * { position: relative; z-index: 1; }
  .recipe-tile img, .summary-hero-image, #recipe-image, .celebration-image { filter: saturate(1.25) contrast(1.14) brightness(.93) sepia(.1); }
  .recipe-tile img { border-bottom: 1px solid rgba(255,177,27,.36); }
  .kitchen-board { background-color: #17110d; background-image: radial-gradient(ellipse at 50% 100%, rgba(240,67,13,.34), transparent 62%), repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 8px); border: 1px solid #7d4627; border-radius: var(--radius); box-shadow: inset 0 0 36px #090604, var(--shadow-lg); }
  .button-primary { color: #fff8e8; background: linear-gradient(180deg, #ff6430, #b52a0d); border: 1px solid #ff9b52; border-bottom-color: #701a09; border-radius: 8px; box-shadow: 0 5px 0 #5b180a, 0 11px 20px rgba(0,0,0,.36); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
  .button-primary:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 7px 0 #5b180a, 0 14px 24px rgba(0,0,0,.42); }
  .button-secondary { color: var(--color-text-primary); background: linear-gradient(180deg, #39251a, #1c120d); border: 1px solid #875132; border-radius: 8px; box-shadow: inset 0 1px rgba(255,205,123,.18), 0 4px 12px rgba(0,0,0,.28); font-weight: 800; }
  .button-secondary:hover { color: #fff8e8; border-color: var(--color-secondary); background: #422819; transform: translateY(-1px); }
  .filter-tab { color: #e7cfaf; background: #241810; border: 1px solid #704027; border-radius: 999px; box-shadow: inset 0 1px rgba(255,211,147,.1); }
  .filter-tab.active { color: #fff9e8; background: linear-gradient(180deg, #e94a1b, #9d260f); border-color: #ff9e43; box-shadow: 0 3px 12px rgba(236,68,16,.4); }
  .badge-success,.badge-warning,.badge-error,.badge-info { color: #fff0d0; border: 1px solid currentColor; border-radius: 4px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
  .form-input,.form-textarea,.form-select { color: var(--color-text-primary); background: #160f0b; border: 1px solid #79482c; border-radius: 7px; box-shadow: inset 0 2px 8px rgba(0,0,0,.45); }
  .form-input:focus,.form-textarea:focus,.form-select:focus { background: #1c120d; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(255,177,27,.18); }
  .progress-track { background: #100b08; border-color: #78472a; } .progress-bar { background: linear-gradient(90deg,#e64114,#ffb21b); }
}