/* ══════════════════════════════════════════════════════════
   Тооцоо — drunk-proof drink tally.  Vanilla CSS, no deps.
   Дизайны 3 зарчим:
     1) Бар бол харанхуй → default dark, өндөр контраст.
     2) Согтуу хуруу том → 100px+ tap target, gesture байхгүй.
     3) Ямар ч үйлдэл буцаагдана → Буцаах товч үргэлж харагдана.
   ══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#0a0c10;
  --bg-soft:#10131a;
  --card:#171b24;
  --card-hi:#1f2532;
  --line:#272e3d;
  --fg:#f3f6fb;
  --dim:#94a0b8;
  --dimmer:#63708a;
  --accent:#ffb020;
  --ok:#2fd66f;
  --bad:#ff4d4d;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --r:20px;
  --tab-h:60px;
  --bar-h:74px;
  --sa-b:env(safe-area-inset-bottom,0px);
  --sa-t:env(safe-area-inset-top,0px);
  --sa-l:env(safe-area-inset-left,0px);
  --sa-r:env(safe-area-inset-right,0px);
}
html[data-theme="light"]{
  --bg:#f4f6fa; --bg-soft:#ffffff; --card:#ffffff; --card-hi:#eef1f7;
  --line:#dde3ec; --fg:#101420; --dim:#5b667e; --dimmer:#8b96ab;
  --accent:#c47800; --ok:#0f9d4f; --bad:#d92020;
  --shadow:0 8px 24px rgba(16,20,32,.10);
}
@media (prefers-color-scheme:light){
  html[data-theme="auto"]{
    --bg:#f4f6fa; --bg-soft:#ffffff; --card:#ffffff; --card-hi:#eef1f7;
    --line:#dde3ec; --fg:#101420; --dim:#5b667e; --dimmer:#8b96ab;
    --accent:#c47800; --ok:#0f9d4f; --bad:#d92020;
    --shadow:0 8px 24px rgba(16,20,32,.10);
  }
}

html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 17px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  overscroll-behavior-y:none;            /* pull-to-refresh хаана */
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
}
button,input{font:inherit;color:inherit}
button{border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ─────────── shell ─────────── */
.app{
  min-height:100%;
  display:flex;flex-direction:column;
  max-width:640px;margin:0 auto;
  padding-left:var(--sa-l);padding-right:var(--sa-r);
}

.appbar{
  position:sticky;top:0;z-index:30;
  padding:calc(var(--sa-t) + 10px) 14px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg);                                        /* хуучин browser fallback */
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.place{display:flex;align-items:center;gap:7px;min-height:38px;padding:4px 10px 4px 4px;border-radius:12px;max-width:62%}
.place:active{background:var(--card)}
.place__pin{font-size:16px;line-height:1}
.place__name{font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.place__name.is-empty{color:var(--dimmer);font-weight:500}
.appbar__meta{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums;text-align:right;line-height:1.25}

.views{flex:1;min-height:0}
.view{
  padding:14px 14px calc(var(--tab-h) + var(--bar-h) + var(--sa-b) + 22px);
}
.view[data-view="menu"]{padding-bottom:calc(var(--tab-h) + var(--sa-b) + 26px)}

/* ─────────── hero ─────────── */
.hero{padding:6px 2px 18px}
.hero__t{
  margin:0 0 10px;font-size:26px;line-height:1.2;font-weight:850;letter-spacing:-.5px;
}
.hero__p{margin:0;font-size:15.5px;line-height:1.55;color:var(--dim)}
.hero__pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}

/* ─────────── үнэ таамаг гэсэн анхааруулга ─────────── */
.warn{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:16px;padding:15px 44px 15px 16px;margin-bottom:14px;
}
.warn__t{margin:0 0 5px;font-size:16px;font-weight:750}
.warn__p{margin:0 0 13px;font-size:14.5px;line-height:1.5;color:var(--dim)}
.warn__x{
  position:absolute;top:7px;right:7px;width:34px;height:34px;
  color:var(--dimmer);font-size:15px;border-radius:10px;
}
.warn__x:active{background:var(--card-hi)}
.warn--slim{display:flex;align-items:center;padding:0 4px 0 14px;min-height:52px}
.warn--slim .warn__x{position:static;flex:0 0 auto}
.warn__go{
  flex:1;text-align:left;font-size:14.5px;font-weight:600;color:var(--dim);
  min-height:52px;padding:0;
}
.warn__go b{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ─────────── үнэ засах режим ─────────── */
.editbar{display:flex;align-items:center;gap:10px;margin-bottom:11px;min-height:40px}
.editbar__t{flex:1;font-size:14px;font-weight:700;color:var(--accent)}
.editbtn{
  margin-left:auto;min-height:40px;padding:0 15px;border-radius:14px;
  background:var(--card);border:1.5px solid var(--line);
  font-size:14.5px;font-weight:700;color:var(--dim);
}
.editbtn:active{transform:scale(.95)}
.editbtn.is-on{background:var(--accent);color:#0a0c10;border-color:var(--accent)}

/* ─────────── хэн (people chips) ─────────── */
.who{
  display:flex;gap:8px;overflow-x:auto;margin:0 -14px 14px;padding:2px 14px 6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.who::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:22px;
  background:var(--card);border:1.5px solid var(--line);
  font-size:16px;font-weight:600;color:var(--dim);
  display:flex;align-items:center;gap:7px;transition:transform .08s;
}
.chip:active{transform:scale(.95)}
.chip.is-on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip__n{font-variant-numeric:tabular-nums;opacity:.65;font-weight:700}
.chip__n:empty{display:none}
.chip--add{color:var(--dimmer);font-weight:700;padding:0 15px;border-style:dashed}

/* ─────────── drink grid ─────────── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media (min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}

.tile{position:relative;border-radius:var(--r)}
.tile__add{
  width:100%;min-height:118px;border-radius:var(--r);
  background:var(--card);border:1.5px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  padding:13px 13px 11px;text-align:left;
  transition:transform .09s cubic-bezier(.2,.8,.3,1),background .15s;
}
.tile__add:active{transform:scale(.955);background:var(--card-hi)}
.tile.has::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  border:2px solid var(--c);opacity:.55;
}
.tile__emoji{font-size:32px;line-height:1;filter:saturate(1.15)}
.tile__txt{display:block;width:100%}
.tile__name{display:block;font-size:15.5px;font-weight:650;line-height:1.2;word-break:break-word}
.tile__price{display:block;font-size:13px;color:var(--dim);margin-top:2px;font-variant-numeric:tabular-nums}
.tile__count{
  position:absolute;top:8px;right:9px;pointer-events:none;   /* товшилт доорх товчинд хүрнэ */
  min-width:40px;height:40px;padding:0 8px;border-radius:14px;
  background:var(--c);color:#0a0c10;
  font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 3px 12px rgba(0,0,0,.35);
  box-shadow:0 3px 12px color-mix(in srgb,var(--c) 45%,transparent);
}
.tile.has .tile__txt{padding-right:46px}                     /* хасах товчны доор орохгүй */
.tile.has .tile__count{display:flex}
.tile__minus{
  position:absolute;bottom:6px;right:6px;
  width:46px;height:46px;border-radius:15px;
  background:var(--card-hi);border:1.5px solid var(--line);color:var(--dim);
  font-size:26px;font-weight:700;line-height:1;
  display:none;align-items:center;justify-content:center;
}
.tile.has .tile__minus{display:flex}
.tile__minus:active{background:var(--bad);color:#fff;border-color:var(--bad)}

@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.16)}100%{transform:scale(1)}}
.tile.pop .tile__count{animation:pop .3s cubic-bezier(.2,.9,.3,1)}
.tile.longing .tile__add{background:var(--card-hi);transform:scale(.97)}

/* «Шинэ төрөл» хавтан */
.tile--new .tile__add{border-style:dashed;background:none}
.tile--new .tile__emoji{font-size:28px;color:var(--dimmer);opacity:.8}
.tile--new .tile__name{color:var(--dim)}

/* Үнэ засах режим: тоо, хасах товч нуугдаж, харандаа гарна */
.tile__pen{
  display:none;position:absolute;top:8px;right:9px;pointer-events:none;
  width:40px;height:40px;border-radius:14px;
  background:var(--accent);color:#0a0c10;font-size:20px;
  align-items:center;justify-content:center;
}
.grid.is-edit .tile[data-id] .tile__pen{display:flex}
.grid.is-edit .tile__count,
.grid.is-edit .tile__minus{display:none}
.grid.is-edit .tile[data-id] .tile__add{border-color:var(--accent);border-style:dashed}
.grid.is-edit .tile[data-id] .tile__price{color:var(--accent);font-weight:700}
.grid.is-edit .tile.has .tile__txt{padding-right:0}

.tip{margin:16px 2px 0;font-size:13.5px;color:var(--dimmer);text-align:center}
.madeby{
  margin:22px 2px 4px;text-align:center;font-size:12.5px;color:var(--dimmer);
  letter-spacing:.02em;
}
.madeby__h{color:#ff5470}

/* ─────────── total bar ─────────── */
.totalbar{
  position:fixed;left:0;right:0;z-index:25;
  bottom:calc(var(--tab-h) + var(--sa-b));
  height:var(--bar-h);
  max-width:640px;margin:0 auto;
  padding:0 calc(12px + var(--sa-r)) 0 calc(16px + var(--sa-l));
  display:flex;align-items:center;gap:12px;
  background:var(--bg-soft);
  background:color-mix(in srgb,var(--bg-soft) 94%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
.totalbar[hidden]{display:none}
.totalbar__num{display:flex;align-items:baseline;gap:4px;min-width:64px}
.totalbar__count{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.totalbar__unit{font-size:13px;color:var(--dim)}
.totalbar__sum{
  flex:1;text-align:right;font-size:27px;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.6px;
}
.undo{
  flex:0 0 auto;height:52px;padding:0 15px;border-radius:16px;
  background:var(--card-hi);border:1.5px solid var(--line);
  display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:650;color:var(--dim);
  transition:transform .08s;
}
.undo:active{transform:scale(.94);background:var(--bad);color:#fff;border-color:var(--bad)}
.undo:disabled{opacity:.32}
.undo svg{width:20px;height:20px}

/* ─────────── tab bar ─────────── */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:26;
  max-width:640px;margin:0 auto;
  height:calc(var(--tab-h) + var(--sa-b));
  padding:0 var(--sa-r) var(--sa-b) var(--sa-l);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--bg-soft);
  background:color-mix(in srgb,var(--bg-soft) 96%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
.tab{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--dimmer);font-size:11px;font-weight:600;
}
.tab.is-on{color:var(--accent)}
.tab:active{opacity:.6}
.tab svg{width:23px;height:23px}
.tab__badge{
  position:absolute;top:5px;right:calc(50% - 25px);
  min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--accent);color:#0a0c10;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;
}

/* ─────────── cards / sections ─────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.card__h{padding:14px 16px 0;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dimmer)}
.card__b{padding:14px 16px}
.row{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;min-height:60px;border-top:1px solid var(--line);
}
.card__h + .row,.card > .row:first-child{border-top:0}
.row__main{flex:1;min-width:0}
.row__t{font-size:16.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row__s{font-size:13px;color:var(--dim);margin-top:2px;font-variant-numeric:tabular-nums}
.row__v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.row--tap:active{background:var(--card-hi)}
.row__x{
  flex:0 0 auto;width:44px;height:44px;border-radius:14px;color:var(--dimmer);
  font-size:20px;display:flex;align-items:center;justify-content:center;
}
.row__x:active{background:var(--bad);color:#fff}
.emoji-lg{font-size:26px;line-height:1;width:32px;text-align:center}

.empty{text-align:center;padding:52px 20px;color:var(--dimmer)}
.empty__e{font-size:52px;display:block;margin-bottom:12px;opacity:.75}
.empty p{margin:0;font-size:15.5px;line-height:1.5}

/* ─────────── big numbers (split view) ─────────── */
.big{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 18px;margin-bottom:12px;text-align:center;
}
.big__l{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dimmer)}
.big__v{font-size:42px;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-1.5px;margin-top:4px;line-height:1.05}
.big__s{font-size:14px;color:var(--dim);margin-top:5px}
.big--ok .big__v{color:var(--ok)}
.big--bad .big__v{color:var(--bad)}

/* ─────────── buttons ─────────── */
.btn{
  width:100%;min-height:56px;border-radius:17px;
  background:var(--card-hi);border:1.5px solid var(--line);
  font-size:17px;font-weight:700;color:var(--fg);
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:0 16px;transition:transform .08s;
}
.btn:active{transform:scale(.975)}
.btn--primary{background:var(--accent);color:#0a0c10;border-color:var(--accent)}
.btn--ghost{background:none}
.btn--danger{color:var(--bad)}
.btn + .btn{margin-top:10px}
.btn__row{display:flex;gap:10px}
.btn__row .btn + .btn{margin-top:0}
.btn svg{width:21px;height:21px}

/* Удаан дарж баталгаажуулах: --p (0→1) нь дүүргэлтийн өргөн */
.hold{
  background-image:linear-gradient(to right,
    var(--bad) 0%,
    var(--bad) calc(var(--p,0) * 100%),
    transparent calc(var(--p,0) * 100%));
  background-repeat:no-repeat;
  transition:transform .08s;
}
.hold[data-holding]{color:#fff;border-color:var(--bad)}
.hold__hint{font-size:12.5px;font-weight:600;color:var(--dimmer);text-align:center;margin:6px 0 0}

/* ─────────── inputs ─────────── */
.field{margin-bottom:14px}
.field__l{display:block;font-size:13px;font-weight:700;color:var(--dim);margin-bottom:7px}
.inp{
  width:100%;min-height:56px;padding:0 16px;border-radius:16px;
  background:var(--bg-soft);border:1.5px solid var(--line);
  font-size:18px;font-weight:600;
  -webkit-user-select:text;user-select:text;
}
.inp:focus{outline:none;border-color:var(--accent)}
.inp--num{text-align:center;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}

/* ─────────── үнэ бичих keypad ─────────── */
.padval{
  text-align:center;font-size:40px;font-weight:850;letter-spacing:-1.2px;
  font-variant-numeric:tabular-nums;
  padding:6px 0 14px;color:var(--accent);
  min-height:62px;
}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.pad button{
  min-height:58px;border-radius:16px;
  background:var(--card);border:1.5px solid var(--line);
  font-size:25px;font-weight:700;font-variant-numeric:tabular-nums;
  transition:transform .07s,background .1s;
}
.pad button:active{transform:scale(.94);background:var(--accent);color:#0a0c10;border-color:var(--accent)}
.pad button.pad--sm{font-size:18px;color:var(--dim)}

/* шинэ төрөл нэмэхэд хурдан сонгох нэрс */
.quick{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.quick button{
  min-height:42px;padding:0 13px;border-radius:14px;
  background:var(--card);border:1.5px solid var(--line);
  font-size:14.5px;font-weight:650;color:var(--dim);
}
.quick button:active{transform:scale(.95)}
.quick button.is-on{border-color:var(--accent);color:var(--fg);background:var(--card-hi)}

/* нэр/зураг/устгах — нугалж хийсэн, үнэ нь гол */
.more{margin-top:4px;border-top:1px solid var(--line);padding-top:10px}
.more summary{
  list-style:none;cursor:pointer;min-height:46px;display:flex;align-items:center;
  justify-content:center;font-size:14.5px;font-weight:650;color:var(--dim);
}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" ▾";opacity:.6}
.more[open] summary::after{content:" ▴"}
.more > *:not(summary){margin-top:8px}

.emorow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.emorow button{
  width:50px;height:50px;border-radius:15px;background:var(--bg-soft);
  border:1.5px solid var(--line);font-size:25px;line-height:1;
}
.emorow button.is-on{border-color:var(--accent);background:var(--card-hi)}

.switch{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:60px;border-top:1px solid var(--line)}
.switch__main{flex:1}
.switch__box{
  flex:0 0 auto;width:54px;height:32px;border-radius:16px;background:var(--line);
  position:relative;transition:background .18s;
}
.switch__box::after{
  content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
  background:#fff;transition:transform .18s cubic-bezier(.2,.8,.3,1);box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.switch.is-on .switch__box{background:var(--ok)}
.switch.is-on .switch__box::after{transform:translateX(22px)}

.seg{display:flex;background:var(--bg-soft);border:1.5px solid var(--line);border-radius:15px;padding:3px;gap:3px}
.seg button{flex:1;min-height:44px;border-radius:12px;font-size:15px;font-weight:650;color:var(--dim)}
.seg button.is-on{background:var(--card-hi);color:var(--fg)}

/* ─────────── toast ─────────── */
.toast{
  position:fixed;left:12px;right:12px;z-index:60;
  bottom:calc(var(--tab-h) + var(--bar-h) + var(--sa-b) + 14px);
  max-width:520px;margin:0 auto;
  background:var(--fg);color:var(--bg);
  border-radius:16px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;
  font-size:15.5px;font-weight:650;
  box-shadow:var(--shadow);
  opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;
  transition:opacity .19s,transform .19s cubic-bezier(.2,.8,.3,1);
}
.toast.is-on{opacity:1;transform:none;pointer-events:auto}
.toast__t{flex:1;min-width:0}
.toast__a{
  flex:0 0 auto;min-height:40px;padding:0 14px;border-radius:12px;
  background:rgba(0,0,0,.12);
  background:color-mix(in srgb,var(--bg) 14%,transparent);
  font-size:14.5px;font-weight:800;color:var(--bg);
}

/* ─────────── bottom sheet ─────────── */
.sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet__bg{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .22s}
.sheet__panel{
  position:relative;width:100%;max-width:640px;
  max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--bg-soft);
  border-radius:26px 26px 0 0;
  padding:8px 16px calc(var(--sa-b) + 18px);
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
  transform:translateY(102%);transition:transform .28s cubic-bezier(.2,.9,.25,1);
}
.sheet.is-on .sheet__bg{opacity:1}
.sheet.is-on .sheet__panel{transform:none}
.sheet__grip{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 12px}
.sheet__title{margin:0 0 16px;font-size:21px;font-weight:800;text-align:center}
.sheet__body{padding-bottom:2px}

/* ─────────── misc ─────────── */
.ver{text-align:center;font-size:12px;color:var(--dimmer);padding:6px 0 2px}
.ver b{color:var(--ok);font-weight:700}
.mono{font-variant-numeric:tabular-nums}
.sub{font-size:13.5px;color:var(--dim);line-height:1.5;margin:0 0 12px}
.pill{
  display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;
  background:var(--card-hi);font-size:12.5px;font-weight:700;color:var(--dim);
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}