:root {
  --primary:#2563eb;
  --primary-hover:#1d4ed8;
  --header-bg:#2563eb;
  --bg-body:#f1f5f9;
  --bg-card:#ffffff;
  --bg-alt:#f8fafc;
  --bg-alt-hover:#e2e8f0;
  --text-main:#1e293b;
  --text-muted:#64748b;
  --border:#e2e8f0;
  --danger:#ef4444;
  --danger-bg:#fef2f2;
  --success:#10b981
}
@media (prefers-color-scheme:dark) {
  :root {
    --primary:#3b82f6;
    --primary-hover:#60a5fa;
    --header-bg:#1d4ed8;
    --bg-body:#0f172a;
    --bg-card:#1e293b;
    --bg-alt:#334155;
    --bg-alt-hover:#475569;
    --text-main:#f8fafc;
    --text-muted:#94a3b8;
    --border:#334155;
    --danger:#f87171;
    --danger-bg:rgba(239, 68, 68, 0.15);
    --success:#34d399
  }
}
* {
  box-sizing:border-box;
  margin:0;
  padding:0
}
body {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background-color:var(--bg-body);
  color:var(--text-main);
  line-height:1.5;
  padding-bottom:3rem;
  min-height:100vh;
  color-scheme:light dark;
  transition:background-color .3s,color .3s
}
.container {
  max-width:28rem;
  margin:0 auto
}
@media (min-width:768px) {
  .container {
    max-width:36rem
  }
}
@media (min-width:1024px) {
  .container {
    max-width:42rem
  }
}
.hidden-view {
  display:none!important
}
.flex {
  display:flex
}
.flex-col {
  flex-direction:column
}
.items-center {
  align-items:center
}
.justify-center {
  justify-content:center
}
.justify-between {
  justify-content:space-between
}
.gap-2 {
  gap:.5rem
}
.flex-1 {
  flex:1
}
.text-center {
  text-align:center
}
.w-full {
  width:100%
}
.text-xs {
  font-size:.75rem
}
.text-sm {
  font-size:.875rem
}
.text-lg {
  font-size:1.125rem
}
.text-xl {
  font-size:1.25rem
}
.text-2xl {
  font-size:1.5rem
}
.font-bold {
  font-weight:700
}
.font-semibold {
  font-weight:600
}
.font-medium {
  font-weight:500
}
.text-muted {
  color:var(--text-muted)
}
.text-primary {
  color:var(--primary)
}
.tracking-tight {
  letter-spacing:-.025em
}
.mt-1 {
  margin-top:.25rem
}
.mt-2 {
  margin-top:.5rem
}
.opacity-90 {
  opacity:.9
}
svg {
  display:inline-block;
  vertical-align:middle;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:16
}
.shrink-0 {
  flex-shrink:0
}
.app-header {
  position:relative;
  background-color:var(--header-bg);
  color:#fff;
  padding:1.5rem;
  box-shadow:0 4px 6px -1px rgb(0 0 0 / .1);
  text-align:center;
  transition:background-color .3s
}
.app-header p {
  opacity:1
}
.header-title {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem
}
.menu-toggle-btn {
  position:absolute;
  top:50%;
  right:1rem;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  border:none;
  color:#fff;
  cursor:pointer;
  transition:background-color .2s
}
.menu-toggle-btn:hover {
  background:rgba(255,255,255,.3)
}
.menu-toggle-btn:active {
  transform:translateY(-50%) scale(.9)
}
.back-btn {
  position:absolute;
  left:1rem;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  color:#fff;
  text-decoration:none;
  z-index:10;
  transition:background-color .2s
}
.back-btn:hover {
  background:rgba(255,255,255,.3)
}
.menu-overlay {
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  justify-content:flex-end
}
.menu-backdrop {
  position:absolute;
  inset:0;
  background-color:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
  animation:fadeIn .3s ease-out
}
.menu-sidebar {
  position:relative;
  width:16rem;
  max-width:80vw;
  height:100%;
  background-color:var(--bg-card);
  box-shadow:-4px 0 15px rgba(0,0,0,.1);
  display:flex;
  flex-direction:column;
  animation:slideInRight .3s ease-out
}
.menu-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.5rem;
  border-bottom:1px solid var(--border)
}
.menu-close-btn {
  background:0 0;
  border:none;
  color:var(--text-muted);
  cursor:pointer;
  padding:.5rem;
  border-radius:.5rem;
  transition:background-color .2s,color .2s
}
.menu-close-btn:hover {
  background-color:var(--bg-alt);
  color:var(--text-main)
}
.menu-nav {
  display:flex;
  flex-direction:column;
  padding:1rem 0;
  overflow-y:auto
}
.menu-link {
  padding:1rem 1.5rem;
  color:var(--text-main);
  text-decoration:none;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:.75rem;
  transition:background-color .2s,color .2s
}
.menu-link:hover {
  background-color:var(--bg-alt);
  color:var(--primary)
}
.menu-footer {
  margin-top:auto;
  padding:1.5rem;
  font-size:.75rem;
  color:var(--text-muted);
  text-align:center;
  border-top:1px solid var(--border)
}
@keyframes slideInRight {
  from {
    transform:translateX(100%)
  }
  to {
    transform:translateX(0)
  }
}
main {
  padding:1rem;
  margin-top:1rem
}
.card {
  background:var(--bg-card);
  padding:1.25rem;
  border-radius:1rem;
  box-shadow:0 1px 2px 0 rgb(0 0 0 / .05);
  border:1px solid var(--border);
  margin-bottom:1.5rem;
  transition:background-color .3s,border-color .3s
}
@media (min-width:768px) {
  .card {
    padding:1.75rem
  }
}
.section-title {
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
  color:var(--text-main)
}
.label-text {
  display:block;
  font-size:.75rem;
  font-weight:500;
  color:var(--text-muted);
  margin-bottom:.25rem;
  text-transform:uppercase;
  letter-spacing:.05em
}
.input-group {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}
@media (min-width:768px) {
  .input-group {
    gap:1.5rem
  }
}
.input-field {
  width:100%;
  padding:.75rem 1rem;
  background-color:var(--bg-alt);
  color:var(--text-main);
  border:1px solid var(--border);
  border-radius:.75rem;
  outline:none;
  transition:all .2s;
  font-size:1rem;
  font-family:inherit
}
.input-field:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(37,99,235,.2)
}
.input-field:invalid:not(:focus) {
  border-color:var(--danger);
  box-shadow:0 0 0 2px rgba(239,68,68,.2)
}
select.drink-select,
select.input-field {
  appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position:right .5rem center;
  background-repeat:no-repeat;
  background-size:1.5em 1.5em;
  padding-right:2.5rem
}
@media (prefers-color-scheme:dark) {
  select.drink-select,
  select.input-field {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")
  }
}
.toggle-group {
  display:flex;
  background-color:var(--bg-alt);
  padding:.25rem;
  border-radius:.75rem;
  border:1px solid var(--border)
}
.toggle-btn {
  flex:1;
  padding:.5rem;
  border:none;
  background:0 0;
  font-size:.875rem;
  font-weight:500;
  color:var(--text-muted);
  border-radius:.5rem;
  cursor:pointer;
  transition:all .2s
}
.toggle-btn.active {
  background:var(--bg-card);
  color:var(--primary);
  box-shadow:0 1px 2px rgb(0 0 0 / .1)
}
.btn-primary {
  width:100%;
  background-color:var(--primary);
  color:#fff;
  border:none;
  padding:1rem 1.5rem;
  border-radius:1rem;
  font-weight:700;
  font-size:1.125rem;
  cursor:pointer;
  box-shadow:0 4px 14px 0 rgba(37,99,235,.3);
  transition:transform .1s,background-color .2s
}
.btn-primary:hover {
  background-color:var(--primary-hover)
}
.btn-primary:active {
  transform:scale(.98)
}
.btn-secondary {
  width:100%;
  background-color:transparent;
  color:var(--text-muted);
  border:2px dashed var(--border);
  padding:.75rem;
  border-radius:.75rem;
  font-weight:500;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  transition:all .2s
}
.btn-secondary:hover {
  color:var(--primary);
  border-color:rgba(59,130,246,.4);
  background-color:rgba(59,130,246,.05)
}
.drink-row {
  display:flex;
  flex-direction:column;
  gap:.75rem;
  background-color:var(--bg-alt);
  padding:.75rem;
  border-radius:.75rem;
  border:1px solid var(--border);
  margin-bottom:.75rem;
  transition:background-color .3s
}
@media (min-width:768px) {
  .drink-row {
    flex-direction:row;
    align-items:center
  }
}
.drink-input-group {
  display:flex;
  align-items:center;
  gap:.25rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:.5rem;
  padding:0 .5rem;
  height:2.75rem
}
.drink-select {
  width:100%;
  height:2.75rem;
  padding:0 .75rem;
  border:1px solid var(--border);
  border-radius:.5rem;
  background-color:var(--bg-card);
  color:var(--text-main);
  font-size:.875rem;
  outline:none
}
.custom-grams-input,
.drink-qty-input {
  flex:1;
  min-width:2rem;
  border:none;
  text-align:center;
  font-weight:600;
  font-size:.875rem;
  background:0 0;
  color:var(--text-main);
  outline:none
}
.btn-icon {
  padding:.5rem;
  border:none;
  background:0 0;
  color:var(--text-muted);
  border-radius:.5rem;
  cursor:pointer;
  transition:all .2s;
  display:flex;
  align-items:center;
  justify-content:center
}
.btn-icon:not(:disabled):hover {
  color:var(--danger);
  background-color:var(--danger-bg)
}
.btn-icon:disabled {
  opacity:.3;
  cursor:not-allowed
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  appearance:none;
  margin:0
}
input[type=number] {
  appearance:textfield
}
.slider-container {
  display:flex;
  align-items:center;
  gap:1rem
}
input[type=range] {
  flex:1;
  appearance:none;
  height:.5rem;
  background:var(--bg-alt-hover);
  border-radius:.5rem;
  outline:none
}
input[type=range]::-webkit-slider-thumb {
  appearance:none;
  height:1.25rem;
  width:1.25rem;
  border-radius:50%;
  background:var(--primary);
  cursor:pointer;
  box-shadow:0 2px 4px rgba(0,0,0,.2)
}
.slider-value {
  background:var(--bg-alt);
  border:1px solid var(--border);
  padding:.5rem 1rem;
  border-radius:.5rem;
  font-weight:700;
  color:var(--primary);
  min-width:4rem;
  text-align:center
}
.fade-in {
  animation:fadeIn .4s ease-out forwards
}
@keyframes fadeIn {
  from {
    opacity:0;
    transform:translateY(10px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.result-card {
  background:var(--bg-card);
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 10px 15px -3px rgb(0 0 0 / .1)
}
.result-header {
  padding:2rem;
  text-align:center;
  color:#fff;
  transition:background-color .3s
}
.result-value {
  font-size:4rem;
  font-weight:900;
  line-height:1;
  margin:.5rem 0;
  letter-spacing:-.05em
}
.result-label {
  display:inline-block;
  background:rgba(255,255,255,.2);
  padding:.25rem 1rem;
  border-radius:9999px;
  font-weight:600
}
.result-body {
  padding:1.5rem
}
.alert-box {
  display:flex;
  gap:.75rem;
  background:var(--bg-alt);
  padding:1rem;
  border-radius:.75rem;
  border:1px solid var(--border);
  margin-bottom:1.5rem
}
.alert-icon {
  font-size:1.5rem
}
.breakdown-row {
  display:flex;
  justify-content:space-between;
  padding:.5rem 0;
  border-bottom:1px solid var(--border);
  font-size:.875rem
}
.breakdown-row:last-child {
  border-bottom:none;
  color:var(--success);
  font-weight:500;
  padding-top:.75rem
}
.btn-reset {
  width:100%;
  background:var(--bg-alt);
  color:var(--text-main);
  border:none;
  padding:.75rem;
  border-radius:.75rem;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin-top:1.5rem;
  transition:background-color .2s
}
.btn-reset:hover {
  background:var(--bg-alt-hover)
}
.info-accordion {
  margin-top:1.5rem
}
.info-accordion summary {
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  cursor:pointer;
  list-style:none;
  color:var(--text-main)
}
.info-accordion summary::-webkit-details-marker { display:none }
.info-accordion summary svg { flex-shrink:0; color:var(--primary) }
.info-accordion[open] summary { margin-bottom:1rem }
.info-accordion-body h3 {
  font-size:.9rem;
  font-weight:600;
  margin:1rem 0 .25rem;
  color:var(--text-main)
}
.info-accordion-body p,
.info-accordion-body ul {
  font-size:.875rem;
  color:var(--text-muted);
  line-height:1.6;
  margin-bottom:.75rem
}
.info-accordion-body ul { padding-left:1.25rem }
.info-accordion-body a { color:var(--primary) }
.info-accordion-body code {
  font-family:monospace;
  background:var(--bg-body);
  border:1px solid var(--border);
  border-radius:.35rem;
  padding:.1rem .4rem;
  color:var(--primary);
  font-weight:700
}
footer {
  margin-top:2rem;
  text-align:center;
  color:var(--text-main);
  font-size:.75rem;
  padding:0 1rem
}
footer a {
  color:var(--primary)
}