:root{
    --bg: #0B0B0B;
    --panel: #161616;
    --panel-2: #1E1E1E;
    --line: #2C2C2C;
    --accent: #D4FF00;
    --accent-dim: #9BB800;
    --accent2: #D4FF00;
    --text: #F5F5F0;
    --muted: #9A9A94;
    --danger: #FF6B5C;
    --radius: 2px;
  }
  [data-theme="babypink"]{
    --bg: #FFFFFF;
    --panel: #FFF6FA;
    --panel-2: #FFFFFF;
    --line: #F4C9DC;
    --accent: #F2A6C6;
    --accent-dim: #E27FAA;
    --accent2: #F2A6C6;
    --text: #2B1E24;
    --muted: #A98A98;
    --danger: #E0607A;
  }
  [data-theme="royalblue"]{
    --bg: #FFFFFF;
    --panel: #F1F4FF;
    --panel-2: #FFFFFF;
    --line: #C4D2F5;
    --accent: #2647D6;
    --accent-dim: #1A34AD;
    --accent2: #2647D6;
    --text: #10152B;
    --muted: #6C7796;
    --danger: #D6432B;
  }
  [data-theme="cream"]{
    --bg: #F7F3EA;
    --panel: #FFFDF7;
    --panel-2: #FFFFFF;
    --line: #E4DAC0;
    --accent: #C6A15B;
    --accent-dim: #A8843F;
    --accent2: #C6A15B;
    --text: #2B2418;
    --muted: #9C917A;
    --danger: #B5502E;
  }

  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    transition: background .25s ease, color .25s ease;
  }
  h1,h2,h3{
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.03em;
    margin: 0;
  }
  .mono{ font-family: 'Space Mono', monospace; }

  .wrap{ max-width: 1180px; margin: 0 auto; padding: 28px 20px 80px; }

  header.top{
    display:flex; align-items:flex-end; justify-content:space-between;
    flex-wrap: wrap; gap: 16px;
    padding-bottom: 20px; margin-bottom: 28px;
    border-bottom: 2px solid var(--accent);
  }
  header.top .titles h1{ font-size: 42px; color: var(--text); line-height: 1; }
  header.top .titles .accent{ color: var(--accent); }
  header.top .titles p{ margin: 6px 0 0; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; }

  .themes{ display:flex; gap:8px; align-items:center; }
  .themes span.label{ font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:0.1em; margin-right:4px; }
  .swatch{
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--line);
    cursor: pointer;
    display:inline-block;
    position: relative;
    transition: transform .15s ease, border-color .15s ease;
  }
  .swatch:hover{ transform: scale(1.1); }
  .swatch.active{ border-color: var(--text); }
  .swatch[data-t="blacklime"]{ background: linear-gradient(135deg,#0B0B0B 50%, #D4FF00 50%); }
  .swatch[data-t="babypink"]{ background: linear-gradient(135deg,#FFFFFF 50%, #F2A6C6 50%); }
  .swatch[data-t="royalblue"]{ background: linear-gradient(135deg,#FFFFFF 50%, #2647D6 50%); }
  .swatch[data-t="cream"]{ background: linear-gradient(135deg,#F7F3EA 50%, #C6A15B 50%); }

  .grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 18px;
  }
  @media (max-width: 820px){ .grid{ grid-template-columns: 1fr; } }

  .card{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
  }
  .card h2{
    font-size: 22px;
    color: var(--accent);
    margin-bottom: 14px;
  }
  .card h3{
    font-size: 16px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .field{ margin-bottom: 14px; }
  .field label{
    display:block; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px;
  }
  .row{ display:flex; gap: 12px; }
  .row .field{ flex:1; }

  .required-mark{ color: var(--danger); font-weight:700; }
  .field.invalid label{ color: var(--danger); }
  .field.invalid input, .field.invalid select{
    border-color: var(--danger);
    box-shadow: 0 0 0 1px var(--danger);
  }
  .field-hint{ font-size: 11px; color: var(--danger); margin-top: 5px; display:none; }
  .field.invalid .field-hint{ display:block; }

  input[type="number"], input[type="text"], select{
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 10px 12px;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    border-radius: var(--radius);
    outline: none;
  }
  input:focus, select:focus{ border-color: var(--accent); }
  select{ font-family: 'Inter', sans-serif; }

  button{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--radius);
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    padding: 9px 16px;
    transition: background .15s ease, color .15s ease;
  }
  button:hover{ background: var(--accent); color: var(--bg); }
  button.solid{ background: var(--accent); color: var(--bg); }
  button.solid:hover{ background: var(--accent-dim); border-color: var(--accent-dim); }
  [data-theme="babypink"] button:hover,
  [data-theme="babypink"] .version-badge,
  [data-theme="babypink"] .chip-btn.suggested,
  [data-theme="cream"] button:hover,
  [data-theme="cream"] .version-badge,
  [data-theme="cream"] .chip-btn.suggested{ color: #2B2418; }
  button.ghost{ border-color: var(--line); color: var(--muted); }
  button.ghost:hover{ background: var(--panel-2); color: var(--text); }
  button.small{ padding: 5px 10px; font-size: 12px; }

  .mix-sum{ font-size: 12px; margin-top: 6px; color: var(--muted); }
  .mix-sum.bad{ color: var(--danger); }
  .mix-sum.good{ color: var(--accent); }

  .cocktail-block{
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
    background: var(--panel-2);
  }
  .cocktail-head{
    display:flex; gap:12px; align-items:flex-end; margin-bottom: 10px;
  }
  .cocktail-head .field{ margin-bottom:0; }
  .ingredient-row{
    display:grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr auto;
    gap: 8px;
    margin-bottom: 8px;
    align-items: end;
  }
  .ingredient-row label{ font-size: 10px; }
  .remove-x{
    border: none; background: transparent; color: var(--danger);
    font-family: 'Space Mono', monospace; font-size: 18px; padding: 6px 8px; line-height: 1;
  }
  .remove-x:hover{ background: var(--danger); color: var(--bg); }

  .bottle-chips{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
  .bottle-chips-row{ display:flex; gap:6px; }
  .chip-btn{
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    padding: 3px 8px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    border-radius: 999px;
    cursor: pointer;
  }
  .chip-btn:hover{ background: var(--panel); color: var(--text); border-color: var(--muted); }
  .chip-btn.suggested{
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg);
    font-weight: 700;
  }
  .chip-btn.suggested:hover{ background: var(--accent-dim); border-color: var(--accent-dim); }
  .bottle-suggestion-text{
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
  }

  .add-row-actions{ display:flex; gap:8px; margin-top: 4px; }

  .results{ margin-top: 6px; }
  .results h2{ font-size: 26px; }
  .results-top{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 18px;
  }
  .stat{
    background: var(--panel-2);
    border: 1px solid var(--line);
    padding: 14px 16px;
    border-radius: var(--radius);
  }
  .stat .num{ font-family:'Space Mono', monospace; font-size: 28px; color: var(--accent); }
  .stat:nth-child(even) .num{ color: var(--accent2); }
  .stat .lab{ font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px;}

  .shopping-list{ margin-top: 8px; }
  .shopping-section{
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
  }
  .shopping-section:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .shopping-section h3{
    font-size: 18px;
    color: var(--accent);
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: 0;
  }
  .shopping-line{
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .shopping-line:last-child{ border-bottom: none; }
  .shopping-line .label{ font-size: 14px; color: var(--text); font-weight: 600; }
  .shopping-line .sub{ font-size: 11px; color: var(--muted); margin-top: 2px; }
  .shopping-line .qty{
    font-family: 'Space Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
  }
  .qty-wrap{ display:flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
  .qty-unit{
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
    white-space: nowrap;
  }
  .cocktail-result{ margin-top: 10px; margin-bottom: 6px; }
  .cocktail-result-head{
    display:flex; justify-content: space-between; align-items: baseline;
    background: var(--panel-2);
    padding: 8px 12px;
    border-radius: var(--radius);
    margin-bottom: 2px;
  }
  .cocktail-result-head .ck-title{ font-weight: 700; font-size: 14px; }
  .cocktail-result-head .ck-servings{ font-size: 11px; color: var(--muted); font-family: 'Space Mono', monospace; }
  .cocktail-result .shopping-line{ padding-left: 12px; padding-right: 12px; }

  .export-actions{ display:flex; gap:10px; margin-top: 18px; }

  footer.note{
    margin-top: 30px; color: var(--muted); font-size: 12px; line-height: 1.6;
  }
  footer.note strong{ color: var(--text); }

  .logo-badge{
    display:flex; align-items:center; gap: 10px;
  }
  .logo-badge .chip{
    background: #FFFFFF;
    border-radius: 999px;
    padding: 8px 20px 8px 8px;
    display:flex; align-items:center; gap:8px;
    box-shadow: 0 0 0 1px var(--line);
  }
  .logo-badge img{ height: 56px; display:block; }
  .version-badge{
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--bg);
    background: var(--accent);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.05em;
  }

  .watermark{
    position: fixed;
    bottom: 14px;
    right: 16px;
    display:flex; align-items:center; gap:6px;
    opacity: 0.85;
    pointer-events: none;
    z-index: 5;
  }
  .watermark .logo-chip{ background:#FFFFFF; border-radius: 999px; padding: 4px 8px; display:flex; align-items:center; box-shadow: 0 0 0 1px var(--line); }
  .watermark img{ height: 24px; display:block; }
  .watermark span{ font-size: 10px; color: var(--muted); font-family:'Space Mono', monospace; }

  footer.legal{
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display:flex; justify-content:space-between; align-items:flex-start;
    flex-wrap: wrap; gap: 14px;
  }
  footer.legal .biz{ display:flex; align-items:center; gap:10px; }
  footer.legal .biz .logo-chip{ background:#FFFFFF; border-radius: 999px; padding: 6px 10px; display:flex; align-items:center; box-shadow: 0 0 0 1px var(--line); }
  footer.legal .biz img{ height: 32px; display:block; }
  footer.legal .copy-text{ font-size: 11px; color: var(--muted); max-width: 640px; line-height: 1.6; }
  footer.legal .legal-links{ display:flex; gap:16px; align-items:center; }
  footer.legal .legal-links a{
    font-size: 12px; color: var(--accent); text-decoration: none; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  footer.legal .legal-links a:hover{ text-decoration: underline; }

  .modal-overlay{
    display:none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 50;
    align-items: center; justify-content: center;
    padding: 20px;
  }
  .modal-overlay.open{ display:flex; }
  .modal-box{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    max-width: 560px;
    width: 100%;
    max-height: 82vh;
    overflow-y: auto;
    padding: 28px 30px;
    position: relative;
  }
  .modal-box h2{ color: var(--accent); font-size: 26px; margin-bottom: 6px; }
  .modal-box .v{ font-size: 12px; color: var(--muted); margin-bottom: 18px; font-family:'Space Mono', monospace; }
  .modal-box h4{ font-family:'Inter',sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); margin: 18px 0 6px; }
  .modal-box p, .modal-box li{ font-size: 13px; color: var(--muted); line-height: 1.7; }
  .modal-box ul{ margin: 0; padding-left: 18px; }
  .modal-close{
    position: absolute; top: 16px; right: 18px;
    background: none; border: none; color: var(--muted);
    font-size: 22px; cursor: pointer; padding: 0; line-height:1;
  }
  .modal-close:hover{ color: var(--accent); }

  @media print{
    .themes, .add-row-actions, .remove-x, #addCocktail, .export-actions, .watermark, .modal-overlay{ display:none !important; }
    body{ background: #fff; color: #111; }
    .card{ border-color:#ccc; background:#fff; }

    /* Clean list-only print view */
    .wrap{ padding: 20px; max-width: none; }
    header.top,
    #basics-card,
    #mix-card,
    #cocktails-card,
    .results-top,
    footer.note,
    footer.legal,
    #results-card > h2{
      display: none !important;
    }
    #results-card{ border: none; padding: 0; }
    .shopping-list h2{ font-size: 20px; color: #111; margin-bottom: 2px; }
    .shopping-list > p{ color: #555; margin-bottom: 16px; }

    /* Avoid flex + page-break-inside:avoid together — that combination can render
       entire sections blank in some browsers' print/PDF engines. Use plain block
       layout here instead so print output is reliable across browsers. */
    .shopping-section{ border-bottom: 1px solid #ccc; page-break-inside: auto; display: block !important; }
    .shopping-section h3{ color: #111; }
    .shopping-line{
      display: block !important;
      border-bottom: 1px solid #ddd;
      padding: 8px 0;
    }
    .shopping-line .label{ color: #111; display: inline; }
    .shopping-line .sub, .qty-unit{ color: #666; }
    .shopping-line .sub{ display: block; }
    .qty-wrap{ display: block !important; text-align: left; margin-top: 2px; }
    .shopping-line .qty{ color: #111; font-size: 16px; display: inline; }
    .cocktail-result{ display: block !important; }
    .cocktail-result-head{ display: block !important; background: #f2f2f2; }
    .cocktail-result-head .ck-title{ color: #111; }
    .cocktail-result-head .ck-servings{ color: #555; }
  }