@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');



  html, body { overflow-x: hidden; max-width: 100%; }



  :root {

    --red:    #FF6B00;

    --dark:   #080a06;

    --gold:   #D4A017;

    --cream:  #f0ead6;

    --smoke:  #0d1a0a;

    --grey:   #4a5a47;

    --light:  #d4cbb8;

    --green:  #0f2410;

  }



  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



  body {

    font-family: 'Inter', sans-serif;

    background: var(--dark);

    color: var(--cream);

    min-height: 100vh;

    overflow-x: hidden;

  }



  /* ── HEADER ── */

  header {

    background: var(--smoke);

    border-bottom: 3px solid var(--red);

    padding: 0 1.5rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 64px;

    position: sticky;

    top: 0;

    z-index: 100;

  }

  .logo {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 2rem;

    color: var(--gold);

    letter-spacing: 2px;

    line-height: 1;

  }

  .logo span { color: var(--red); }

  nav { display: flex; gap: .5rem; }

  .nav-btn {

    background: transparent;

    border: 1.5px solid var(--grey);

    color: var(--cream);

    padding: .4rem .9rem;

    border-radius: 6px;

    font-size: .8rem;

    font-weight: 600;

    cursor: pointer;

    transition: all .2s;

    letter-spacing: .5px;

    text-transform: uppercase;

  }

  .nav-btn:hover, .nav-btn.active {

    border-color: var(--gold);

    color: var(--gold);

    background: rgba(245,166,35,.1);

  }



  /* ── SECTIONS ── */

  .section { display: none; }

  .section.active { display: block; }



  /* ── BUILDER ── */

  .builder-layout {

    display: grid;

    grid-template-columns: 1fr 340px;

    gap: 1.5rem;

    max-width: 1200px;

    margin: 0 auto;

    padding: 1.5rem;

  }

  @media (max-width: 860px) {

    .builder-layout { grid-template-columns: 1fr; }

  }



  @media (max-width: 600px) {

    .builder-layout { padding: .8rem; gap: 1rem; }

    .ingredients-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .5rem; }

    .ingredient-card img, .ingredient-card .ing-emoji { width: 52px; height: 52px; font-size: 2rem; }

    .ingredient-card .ing-name { font-size: .65rem; }

    .burger-name-wrap input { font-size: 1.3rem; }

    .cat-label { font-size: .95rem; }

    .preview-panel { position: static; max-height: none; }

    .evaluate-btn { font-size: 1.1rem; }

    header { padding: 0 .8rem; height: 56px; }

    .logo { font-size: 1.4rem; }

    .nav-btn { font-size: .65rem; padding: .35rem .6rem; }

    .gallery-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }

    .gallery-card-name { font-size: 1rem; }

  }



  /* burger name */

  .burger-name-wrap {

    margin-bottom: 1.2rem;

  }

  .burger-name-wrap input {

    width: 100%;

    background: var(--smoke);

    border: 2px solid var(--grey);

    color: var(--cream);

    font-family: 'Bebas Neue', sans-serif;

    font-size: 1.8rem;

    padding: .5rem 1rem;

    border-radius: 10px;

    letter-spacing: 2px;

    outline: none;

    transition: border-color .2s;

  }

  .burger-name-wrap input:focus { border-color: var(--gold); }

  .burger-name-wrap input::placeholder { color: var(--grey); }



  /* ingredient categories */

  .cat-label {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 1.1rem;

    letter-spacing: 2px;

    color: var(--gold);

    margin: 1.2rem 0 .6rem;

    display: flex;

    align-items: center;

    gap: .4rem;

  }

  .cat-label .required-badge {

    font-family: 'Inter', sans-serif;

    font-size: .6rem;

    background: var(--red);

    color: white;

    padding: 2px 6px;

    border-radius: 4px;

    letter-spacing: 0;

    vertical-align: middle;

  }



  .ingredients-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    gap: .7rem;

  }



  .ingredient-card {

    background: var(--smoke);

    border: 2px solid transparent;

    border-radius: 12px;

    padding: .7rem .5rem;

    cursor: pointer;

    transition: all .18s;

    text-align: center;

    position: relative;

    user-select: none;

  }

  .ingredient-card:hover {

    border-color: var(--gold);

    transform: translateY(-2px);

  }

  .ingredient-card.selected {

    border-color: var(--red);

    background: rgba(232,41,28,.15);

  }

  .ingredient-card.selected::after {

    content: '✓';

    position: absolute;

    top: 4px; right: 7px;

    font-size: .85rem;

    color: var(--red);

    font-weight: 700;

  }

  .ingredient-card img {

    width: 68px;

    height: 68px;

    object-fit: cover;

    border-radius: 8px;

    margin-bottom: .4rem;

    display: block;

    margin: 0 auto .4rem;

  }

  .ingredient-card .ing-emoji {

    font-size: 2.8rem;

    display: block;

    margin-bottom: .3rem;

    line-height: 1;

  }

  .ingredient-card .ing-name {

    font-size: .73rem;

    font-weight: 600;

    line-height: 1.3;

    color: var(--cream);

  }

  .ingredient-card.extra-ing {

    border-color: rgba(100,160,255,.3);

    background: rgba(60,100,200,.08);

  }

  .ingredient-card.extra-ing:hover {

    border-color: #6495ED;

    background: rgba(60,100,200,.18);

  }

  .ingredient-card.extra-ing.selected {

    border-color: #4a80e8;

    background: rgba(60,100,200,.25);

  }

  .ingredient-card.extra-ing .ing-name { color: #a0bfff; }

  .extra-badge {

    font-size: .55rem;

    background: rgba(100,160,255,.2);

    color: #7aaaf5;

    border: 1px solid rgba(100,160,255,.4);

    border-radius: 3px;

    padding: 1px 4px;

    display: block;

    margin-top: 3px;

    text-align: center;

    letter-spacing: .3px;

  }

  .ingredient-card .spice-dots {

    margin-top: .3rem;

    display: flex;

    justify-content: center;

    gap: 2px;

  }

  .spice-dot {

    width: 5px; height: 5px;

    border-radius: 50%;

    background: var(--grey);

  }

  .spice-dot.hot { background: var(--red); }



  /* ── PREVIEW PANEL ── */

  .preview-panel {

    background: var(--smoke);

    border-radius: 16px;

    padding: 1.2rem;

    position: sticky;

    top: 80px;

    max-height: calc(100vh - 100px);

    overflow-y: auto;

  }

  .preview-title {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 1.3rem;

    letter-spacing: 2px;

    color: var(--gold);

    margin-bottom: 1rem;

  }



  /* Burger stack visual */

  .burger-stack {

    background: linear-gradient(to bottom, #0d1a0a, #080a06);

    border-radius: 12px;

    padding: 1rem;

    min-height: 160px;

    display: flex;

    flex-direction: column-reverse;

    align-items: center;

    gap: 2px;

    margin-bottom: 1rem;

    border: 1px solid rgba(245,166,35,.2);

    position: relative;

    overflow: hidden;

  }

  .stack-layer {

    width: 100%;

    max-width: 200px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: .4rem;

    padding: 3px 8px;

    border-radius: 6px;

    background: rgba(255,248,240,.06);

    font-size: .72rem;

    animation: slideIn .25s ease-out;

  }

  .stack-layer.layer-bun-top { border-radius: 20px 20px 4px 4px; background: rgba(245,166,35,.18); }

  .stack-layer.layer-bun-bottom { border-radius: 4px 4px 12px 12px; background: rgba(245,166,35,.18); }

  .stack-empty {

    position: absolute;

    top: 50%; left: 50%;

    transform: translate(-50%,-50%);

    font-size: .8rem;

    color: var(--grey);

    text-align: center;

  }

  @keyframes slideIn {

    from { opacity: 0; transform: translateX(-10px); }

    to   { opacity: 1; transform: translateX(0); }

  }



  /* Selected list */

  .selected-list {

    font-size: .78rem;

    color: var(--light);

    margin-bottom: 1rem;

    min-height: 30px;

  }

  .selected-list .empty-msg {

    color: var(--grey);

    font-style: italic;

  }

  .sel-item {

    display: flex;

    justify-content: space-between;

    padding: 3px 0;

    border-bottom: 1px solid rgba(255,255,255,.06);

  }

  .sel-item button {

    background: none;

    border: none;

    color: var(--red);

    cursor: pointer;

    font-size: .8rem;

    padding: 0 4px;

  }



  /* CTA */

  .evaluate-btn {

    width: 100%;

    background: var(--red);

    color: white;

    border: none;

    border-radius: 10px;

    padding: .85rem;

    font-family: 'Bebas Neue', sans-serif;

    font-size: 1.4rem;

    letter-spacing: 2px;

    cursor: pointer;

    transition: all .2s;

    margin-bottom: .7rem;

  }

  .evaluate-btn:hover { background: #c0211a; transform: translateY(-1px); }

  .evaluate-btn:disabled { background: var(--grey); cursor: not-allowed; transform: none; }



  .reset-btn {

    width: 100%;

    background: transparent;

    border: 1.5px solid var(--grey);

    color: var(--grey);

    border-radius: 8px;

    padding: .5rem;

    font-size: .8rem;

    cursor: pointer;

    transition: all .2s;

    text-transform: uppercase;

    letter-spacing: 1px;

  }

  .reset-btn:hover { border-color: var(--cream); color: var(--cream); }



  /* ── RESULT MODAL ── */

  .modal-overlay {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(10,3,0,.88);

    z-index: 1000;

    align-items: flex-start;

    justify-content: center;

    padding: 2rem 1rem;

    backdrop-filter: blur(4px);

    overflow-y: auto;

  }

  .modal-overlay.open { display: flex; }

  .modal {

    background: var(--smoke);

    border-radius: 20px;

    max-width: 500px;

    width: 100%;

    padding: 2rem;

    border: 2px solid var(--gold);

    position: relative;

    flex-shrink: 0;

    margin: auto;

  }

  .modal-close {

    position: absolute;

    top: 1rem; right: 1rem;

    background: rgba(255,255,255,.1);

    border: none;

    color: var(--cream);

    font-size: 1.4rem;

    cursor: pointer;

    line-height: 1;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

    transition: background .2s;

  }

  .modal-close:hover { background: var(--red); }

  .result-score {

    text-align: center;

    margin-bottom: 1.5rem;

  }

  .score-ring {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    border: 6px solid var(--gold);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    margin: 0 auto 1rem;

    background: rgba(245,166,35,.08);

  }

  .score-number {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 2.6rem;

    color: var(--gold);

    line-height: 1;

  }

  .score-total {

    font-size: .75rem;

    color: var(--grey);

  }

  .result-title {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 1.8rem;

    letter-spacing: 2px;

    color: var(--cream);

    margin-bottom: .3rem;

  }

  .result-verdict {

    font-size: .95rem;

    color: var(--gold);

    font-style: italic;

    margin-bottom: 1rem;

  }

  .result-categories {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: .7rem;

    margin-bottom: 1.2rem;

  }

  .result-cat {

    background: rgba(255,248,240,.05);

    border-radius: 10px;

    padding: .7rem;

    text-align: center;

  }

  .result-cat-label {

    font-size: .7rem;

    color: var(--grey);

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: .3rem;

  }

  .result-cat-bar {

    height: 6px;

    background: rgba(255,255,255,.1);

    border-radius: 3px;

    overflow: hidden;

    margin: .4rem 0 .3rem;

  }

  .result-cat-fill {

    height: 100%;

    border-radius: 3px;

    transition: width .8s ease-out;

  }

  .result-cat-value {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 1.4rem;

    color: var(--cream);

  }



  /* AI feedback */

  .ai-feedback {

    background: rgba(232,41,28,.08);

    border: 1px solid rgba(232,41,28,.3);

    border-radius: 10px;

    padding: 1rem;

    font-size: .85rem;

    line-height: 1.6;

    margin-bottom: 1.2rem;

    color: var(--light);

    min-height: 80px;

    position: relative;

  }

  .ai-feedback .loading-dots {

    display: flex;

    gap: 6px;

    justify-content: center;

    align-items: center;

    height: 40px;

  }

  .ai-feedback .loading-dots span {

    width: 8px; height: 8px;

    background: var(--red);

    border-radius: 50%;

    animation: bounce 1s infinite;

  }

  .ai-feedback .loading-dots span:nth-child(2) { animation-delay: .15s; }

  .ai-feedback .loading-dots span:nth-child(3) { animation-delay: .3s; }

  @keyframes bounce {

    0%,60%,100% { transform: translateY(0); }

    30% { transform: translateY(-8px); }

  }



  /* burger image */

  .burger-image-wrap {

    width: 100%;

    border-radius: 12px;

    overflow: hidden;

    margin-bottom: 1.2rem;

    background: rgba(0,0,0,.3);

    min-height: 180px;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  .burger-image-wrap img {

    width: 100%;

    border-radius: 12px;

  }

  .burger-image-placeholder {

    text-align: center;

    color: var(--grey);

    padding: 2rem;

    font-size: .85rem;

  }



  /* save & share */

  .modal-actions {

    display: flex;

    gap: .7rem;

  }

  .btn-save {

    flex: 1;

    background: var(--gold);

    color: var(--dark);

    border: none;

    border-radius: 8px;

    padding: .7rem;

    font-family: 'Bebas Neue', sans-serif;

    font-size: 1.1rem;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition: all .2s;

  }

  .btn-save:hover { background: #d4901f; }

  .btn-new {

    flex: 1;

    background: transparent;

    border: 1.5px solid var(--grey);

    color: var(--cream);

    border-radius: 8px;

    padding: .7rem;

    font-family: 'Bebas Neue', sans-serif;

    font-size: 1.1rem;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition: all .2s;

  }

  .btn-new:hover { border-color: var(--cream); }



  /* ── GALLERY ── */

  .gallery-header {

    padding: 1.5rem;

    max-width: 1200px;

    margin: 0 auto;

  }

  .gallery-header h2 {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 2.5rem;

    letter-spacing: 3px;

    color: var(--gold);

  }

  .gallery-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 1.2rem;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 1.5rem 2rem;

  }

  .gallery-card {

    background: var(--smoke);

    border-radius: 14px;

    overflow: hidden;

    border: 1.5px solid rgba(255,255,255,.07);

    transition: transform .2s, border-color .2s;

  }

  .gallery-card:hover { transform: translateY(-3px); border-color: var(--gold); }

  .gallery-card-img {

    width: 100%;

    height: 160px;

    object-fit: cover;

    background: var(--dark);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 3rem;

  }

  .gallery-card-body { padding: 1rem; }

  .gallery-card-name {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 1.3rem;

    letter-spacing: 1.5px;

    color: var(--cream);

    margin-bottom: .3rem;

  }

  .gallery-card-score {

    display: inline-block;

    background: var(--red);

    color: white;

    font-family: 'Bebas Neue', sans-serif;

    font-size: .95rem;

    padding: 2px 8px;

    border-radius: 6px;

    letter-spacing: 1px;

    margin-bottom: .6rem;

  }

  .gallery-card-ings {

    font-size: .72rem;

    color: var(--grey);

    line-height: 1.5;

    margin-bottom: .8rem;

  }

  .vote-btn {

    width: 100%;

    background: transparent;

    border: 1.5px solid var(--gold);

    color: var(--gold);

    border-radius: 8px;

    padding: .5rem;

    font-size: .8rem;

    font-weight: 600;

    cursor: pointer;

    transition: all .2s;

    text-transform: uppercase;

    letter-spacing: 1px;

  }

  .vote-btn:hover { background: rgba(245,166,35,.15); }

  .vote-btn.voted { background: var(--gold); color: var(--dark); }

  .vote-count {

    font-size: .75rem;

    color: var(--grey);

    margin-top: .4rem;

    text-align: center;

  }



  /* Winner badges */

  .winner-week, .winner-month {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: .68rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;

    padding: 3px 8px;

    border-radius: 5px;

    margin-bottom: .5rem;

  }

  .winner-week { background: rgba(245,166,35,.25); color: var(--gold); border: 1px solid var(--gold); }

  .winner-month { background: rgba(232,41,28,.25); color: var(--red); border: 1px solid var(--red); }



  /* ── VOTING SECTION ── */

  .voting-header {

    padding: 1.5rem;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    align-items: flex-end;

    gap: 2rem;

    flex-wrap: wrap;

  }

  .voting-header h2 {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 2.5rem;

    letter-spacing: 3px;

    color: var(--gold);

  }

  .voting-tabs {

    display: flex;

    gap: .5rem;

  }

  .vtab {

    padding: .4rem 1rem;

    border-radius: 8px;

    border: 1.5px solid var(--grey);

    background: transparent;

    color: var(--grey);

    font-size: .8rem;

    font-weight: 700;

    cursor: pointer;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all .2s;

  }

  .vtab.active { border-color: var(--red); color: var(--red); background: rgba(232,41,28,.1); }



  /* toast */

  .toast {

    position: fixed;

    bottom: 2rem;

    left: 50%;

    transform: translateX(-50%) translateY(80px);

    background: var(--smoke);

    border: 1.5px solid var(--gold);

    color: var(--cream);

    padding: .7rem 1.4rem;

    border-radius: 40px;

    font-size: .85rem;

    font-weight: 600;

    z-index: 9999;

    transition: transform .3s ease;

    white-space: nowrap;

  }

  .toast.show { transform: translateX(-50%) translateY(0); }



  /* empty state */

  .empty-state {

    text-align: center;

    padding: 3rem 1rem;

    color: var(--grey);

  }

  .empty-state .big-emoji { font-size: 3.5rem; margin-bottom: 1rem; display: block; }

  .empty-state p { font-size: .9rem; line-height: 1.6; }



  .ham-btn { display:none; background:none; border:none; color:var(--cream); font-size:1.5rem; cursor:pointer; padding:.3rem .5rem; }

  .ham-menu { display:none; position:fixed; inset:0; background:rgba(15,7,0,.97); z-index:800; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; }

  .ham-menu.open { display:flex !important; }

  .ham-close { position:absolute; top:1rem; right:1rem; background:none; border:none; color:var(--grey); font-size:2rem; cursor:pointer; }

  @media(max-width:600px) {

    .ham-btn { display:block; }

    #mainNav { display:none; }

  }

  ::-webkit-scrollbar-track { background: var(--dark); }

  ::-webkit-scrollbar-thumb { background: var(--smoke); border-radius: 3px; }



  :root {

    --red:   #FF6B00;

    --dark:  #080a06;

    --gold:  #D4A017;

    --cream: #f0ead6;

    --smoke: #0d1a0a;

    --grey:  #4a5a47;

    --light: #d4cbb8;

    --green: #0f2410;

  }



  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



  body {

    font-family: 'Inter', sans-serif;

    background: var(--dark);

    color: var(--cream);

    min-height: 100vh;

  }



  header {

    background: var(--smoke);

    border-bottom: 3px solid var(--gold);

    padding: 0 1.5rem;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: sticky;

    top: 0;

    z-index: 100;

  }

  .logo {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 1.8rem;

    color: var(--gold);

    letter-spacing: 2px;

  }

  .logo span { color: var(--red); }

  .admin-badge {

    background: var(--red);

    color: white;

    font-size: .7rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    padding: 3px 8px;

    border-radius: 4px;

  }



  .layout {

    max-width: 1200px;

    margin: 0 auto;

    padding: 1.5rem;

  }



  /* Tab nav */

  .tabs {

    display: flex;

    gap: .5rem;

    margin-bottom: 1.5rem;

    border-bottom: 1px solid rgba(255,255,255,.1);

    padding-bottom: 1rem;

  }

  .tab {

    padding: .5rem 1.2rem;

    border-radius: 8px;

    border: 1.5px solid var(--grey);

    background: transparent;

    color: var(--grey);

    font-size: .85rem;

    font-weight: 700;

    cursor: pointer;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all .2s;

  }

  .tab.active { border-color: var(--gold); color: var(--gold); background: rgba(245,166,35,.1); }



  .tab-content { display: none; }

  .tab-content.active { display: block; }



  /* Section headers */

  .section-header {

    margin-bottom: 1.5rem;

  }

  .section-header h2 {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 2rem;

    letter-spacing: 2px;

    color: var(--gold);

  }

  .section-header p {

    color: var(--grey);

    font-size: .85rem;

    margin-top: .3rem;

  }



  /* Stats cards */

  .stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    gap: 1rem;

    margin-bottom: 2rem;

  }

  .stat-card {

    background: var(--smoke);

    border-radius: 12px;

    padding: 1.2rem;

    border: 1px solid rgba(255,255,255,.08);

  }

  .stat-value {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 2.5rem;

    color: var(--gold);

    line-height: 1;

    margin-bottom: .2rem;

  }

  .stat-label {

    font-size: .75rem;

    color: var(--grey);

    text-transform: uppercase;

    letter-spacing: 1px;

  }



  /* Image Generator */

  .generator-controls {

    background: var(--smoke);

    border-radius: 14px;

    padding: 1.5rem;

    margin-bottom: 1.5rem;

    border: 1px solid rgba(255,255,255,.08);

  }

  .gen-row {

    display: flex;

    gap: 1rem;

    align-items: flex-end;

    flex-wrap: wrap;

    margin-bottom: 1rem;

  }

  .gen-row:last-child { margin-bottom: 0; }



  label {

    font-size: .75rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: var(--grey);

    display: block;

    margin-bottom: .4rem;

  }

  .form-group { flex: 1; min-width: 200px; }

  input[type="text"], textarea, select {

    width: 100%;

    background: rgba(255,255,255,.06);

    border: 1.5px solid var(--grey);

    color: var(--cream);

    padding: .6rem .9rem;

    border-radius: 8px;

    font-family: 'Inter', sans-serif;

    font-size: .88rem;

    outline: none;

    transition: border-color .2s;

  }

  input[type="text"]:focus, textarea:focus, select:focus { border-color: var(--gold); }

  textarea { min-height: 80px; resize: vertical; }

  select option { background: var(--smoke); }



  .btn {

    padding: .65rem 1.4rem;

    border-radius: 8px;

    font-family: 'Bebas Neue', sans-serif;

    font-size: 1rem;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition: all .2s;

    border: none;

    white-space: nowrap;

  }

  .btn-primary { background: var(--red); color: white; }

  .btn-primary:hover { background: #c0211a; }

  .btn-primary:disabled { background: var(--grey); cursor: not-allowed; }

  .btn-gold { background: var(--gold); color: var(--dark); }

  .btn-gold:hover { background: #d4901f; }

  .btn-outline {

    background: transparent;

    border: 1.5px solid var(--grey);

    color: var(--grey);

  }

  .btn-outline:hover { border-color: var(--cream); color: var(--cream); }

  .btn-danger { background: rgba(232,41,28,.2); border: 1.5px solid var(--red); color: var(--red); }

  .btn-danger:hover { background: var(--red); color: white; }



  .btn-sm {

    padding: .35rem .8rem;

    font-size: .85rem;

  }



  /* Progress bar */

  .progress-wrap {

    background: rgba(255,255,255,.1);

    border-radius: 4px;

    height: 6px;

    overflow: hidden;

    margin: .5rem 0;

  }

  .progress-bar {

    height: 100%;

    background: var(--gold);

    border-radius: 4px;

    transition: width .3s;

  }



  /* Ingredients image grid */

  .img-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

    gap: 1rem;

  }

  .img-card {

    background: var(--smoke);

    border-radius: 12px;

    overflow: hidden;

    border: 1.5px solid rgba(255,255,255,.08);

    transition: border-color .2s;

  }

  .img-card:hover { border-color: var(--gold); }

  .img-card img, .img-card .img-placeholder {

    width: 100%;

    height: 120px;

    object-fit: cover;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.5rem;

    background: rgba(0,0,0,.3);

  }

  .img-card .img-placeholder { background: rgba(255,255,255,.04); }

  .img-card-body { padding: .7rem .8rem; }

  .img-card-name {

    font-size: .78rem;

    font-weight: 600;

    color: var(--cream);

    margin-bottom: .3rem;

    line-height: 1.3;

  }

  .img-card-cat {

    font-size: .65rem;

    color: var(--grey);

    text-transform: uppercase;

    letter-spacing: .5px;

    margin-bottom: .6rem;

  }

  .img-card-actions {

    display: flex;

    gap: .4rem;

  }

  .img-status {

    font-size: .65rem;

    display: inline-block;

    padding: 2px 6px;

    border-radius: 4px;

    margin-bottom: .5rem;

  }

  .img-status.has-img { background: rgba(46,204,113,.2); color: var(--green); }

  .img-status.no-img { background: rgba(107,91,78,.2); color: var(--grey); }



  /* Generating overlay on card */

  .img-card.generating { opacity: .7; pointer-events: none; }

  .img-card.generating img, .img-card.generating .img-placeholder {

    animation: pulse 1.5s infinite;

  }

  @keyframes pulse {

    0%,100% { opacity: 1; }

    50% { opacity: .4; }

  }



  /* Burger management */

  .burger-table {

    width: 100%;

    border-collapse: collapse;

  }

  .burger-table th, .burger-table td {

    padding: .8rem .9rem;

    border-bottom: 1px solid rgba(255,255,255,.06);

    font-size: .82rem;

    text-align: left;

  }

  .burger-table th {

    color: var(--grey);

    font-size: .7rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 600;

  }

  .burger-table tbody tr:hover { background: rgba(255,255,255,.03); }

  .burger-mini-img {

    width: 48px; height: 48px;

    object-fit: cover;

    border-radius: 8px;

    background: var(--smoke);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

  }

  .score-badge {

    background: var(--red);

    color: white;

    font-family: 'Bebas Neue', sans-serif;

    font-size: .9rem;

    padding: 2px 7px;

    border-radius: 5px;

  }



  /* Logs */

  .log-area {

    background: rgba(0,0,0,.4);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 10px;

    padding: 1rem;

    font-family: monospace;

    font-size: .78rem;

    color: var(--light);

    max-height: 200px;

    overflow-y: auto;

    margin-top: 1rem;

  }

  .log-line { padding: 2px 0; }

  .log-line.ok { color: var(--green); }

  .log-line.err { color: var(--red); }

  .log-line.info { color: var(--gold); }



  /* Toast */

  .toast {

    position: fixed;

    bottom: 2rem; left: 50%;

    transform: translateX(-50%) translateY(80px);

    background: var(--smoke);

    border: 1.5px solid var(--gold);

    color: var(--cream);

    padding: .7rem 1.4rem;

    border-radius: 40px;

    font-size: .85rem;

    font-weight: 600;

    z-index: 9999;

    transition: transform .3s;

    white-space: nowrap;

  }

  .toast.show { transform: translateX(-50%) translateY(0); }



  .empty-state {

    text-align: center;

    padding: 3rem;

    color: var(--grey);

    font-size: .9rem;

  }



  /* API key input */

  .api-key-notice {

    background: rgba(245,166,35,.08);

    border: 1px solid rgba(245,166,35,.3);

    border-radius: 10px;

    padding: 1rem;

    margin-bottom: 1.5rem;

    font-size: .82rem;

    color: var(--light);

    line-height: 1.5;

  }

  .api-key-notice strong { color: var(--gold); }

/* ── END ── */