/* The "Now" tab: Kofík in the ring, Kofík himself, drink buttons, chart, drinks list, form controls */

/* ---------- hero: Kofík in the ring ---------- */
.hero { display: grid; grid-template-columns: 270px 1fr; gap: 34px; align-items: center; position: relative; }
.heroL { display: flex; flex-direction: column; align-items: center; }
.gauge { position: relative; width: 262px; height: 262px; }
.gauge .ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dasharray .7s cubic-bezier(.2,.8,.2,1), stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1), stroke .4s, opacity .3s; }
.gauge .track { stroke: #1c1f28; stroke-linecap: butt; }
#ringGhost { opacity: 0; transition: stroke-dasharray .3s, stroke-dashoffset .3s, opacity .2s; }
#ringGhost.on { opacity: .5; animation: ghost .9s ease-in-out infinite alternate; }
@keyframes ghost { to { opacity: .2; } }
.gauge.gulp { animation: gulp .5s ease; }
@keyframes gulp { 30% { transform: scale(1.06); } 60% { transform: scale(.97); } }
.kwrap { position: absolute; left: 50%; top: 51%; width: 57%; transform: translate(-50%, -50%); cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 50%; }
.kwrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.kwrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.readout { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.big { font-size: 72px; font-weight: 800; line-height: .95; letter-spacing: -.04em; transition: color .4s; }
.big small { font-size: 28px; color: var(--muted); font-weight: 700; margin-left: 2px; }
.bigsub { color: var(--muted); font-size: 14px; }
.bubble { position: relative; display: inline-block; margin-top: 16px; padding: 11px 16px; border-radius: 16px; background: var(--card2);
  border: 1px solid var(--line2); font-weight: 600; font-size: 15px; line-height: 1.4; max-width: 560px; transition: color .3s; }
.bubble::before { content: ""; position: absolute; left: -8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--card2);
  border-left: 1px solid var(--line2); border-bottom: 1px solid var(--line2); transform: rotate(45deg); }
.bubble.pop { animation: bpop .35s ease; }
@keyframes bpop { 40% { transform: scale(1.04); } }
.after { font-size: 13px; font-weight: 700; margin-top: 8px; min-height: 17px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.dockhead { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin: 16px 0 10px; }
.dockhead b { font-size: 15px; }
.fact { padding: 0 14px; border-left: 1px solid var(--line); min-width: 0; }
.fact:first-child { padding-left: 0; border-left: 0; }
.fact .k { font-size: 12px; color: var(--muted); }
.fact .v { font-size: 19px; font-weight: 700; margin-top: 5px; letter-spacing: -.01em; }
.fact .d { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.zbar { position: relative; display: flex; gap: 2px; height: 5px; margin: 8px 0 6px; }
.zbar i { border-radius: 3px; opacity: .55; }
.zbar i:nth-child(1) { flex: 1; background: #4a4f5c; } .zbar i:nth-child(2) { flex: 4; background: #4fa8ff; }
.zbar i:nth-child(3) { flex: 5; background: #7cff4f; } .zbar i:nth-child(4) { flex: 5; background: #ffb020; } .zbar i:nth-child(5) { flex: 5; background: #ff4f5e; }
.zbar b { position: absolute; top: -4px; width: 4px; height: 13px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px var(--card); left: 0; transition: left .6s cubic-bezier(.2,.8,.2,1); }
#concZone { font-weight: 600; }
.droplabel { position: absolute; top: -8px; left: 0; width: 270px; text-align: center; font-weight: 700; font-size: 14px; color: var(--accent); opacity: 0; transition: opacity .2s; pointer-events: none; }
#heroCard { position: relative; }
.gauge::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px dashed transparent; transition: border-color .2s, box-shadow .2s; pointer-events: none; }
body.dragging .gauge::after { border-color: rgba(124,255,79,.4); }
#heroCard.dropover .gauge::after { border-style: solid; border-color: var(--accent); box-shadow: 0 0 34px rgba(124,255,79,.35), inset 0 0 34px rgba(124,255,79,.15); }
body.dragging .droplabel { opacity: .6; }
#heroCard.dropover .droplabel { opacity: 1; }

/* ---------- Kofík ---------- */
.kofik { --k1: #c9d2e8; --k2: #8d9bc2; --k3: #56628a; --kd: 2.4s; --kb: 4; --ks: 1; overflow: visible; }
.kofik .kshadow { fill: rgba(0,0,0,.35); }
.kofik .bolt { fill: #ffe066; }
.kofik .bolt-glow { fill: #ffe066; opacity: .7; }
.kofik .arm { fill: none; stroke: var(--k3); stroke-width: 7; stroke-linecap: round; }
.kofik .foot { fill: var(--k3); }
.kofik .sheen { fill: #fff; opacity: .25; }
.kofik .blush ellipse { fill: #ff7aa8; opacity: 0; transition: opacity .3s; }
.kofik.blushing .blush ellipse { opacity: .65; }
.kofik .ew { fill: #fff; }
.kofik .pupil circle { fill: #1a1d29; }
.kofik .pupil .glint { fill: #fff; }
.kofik .e-sleep path, .kofik .m-smile, .kofik .m-wobble { fill: none; stroke: #1a1d29; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.kofik .sp { fill: none; stroke: #1a1d29; stroke-width: 2.2; stroke-linecap: round; }
.kofik .e-shades rect { fill: #0c0d12; }
.kofik .e-shades .bridge { stroke: #0c0d12; stroke-width: 4; }
.kofik .e-shades .glare { stroke: rgba(255,255,255,.6); stroke-width: 2; stroke-linecap: round; }
.kofik .mo, .kofik .m-sleep { fill: #2b0d12; }
.kofik .teeth { fill: #fff; }
.kofik .tongue { fill: #ff7aa8; }
.kofik .sweat { fill: #8fd3ff; }
.kofik .zzz text { font: 800 13px system-ui, sans-serif; fill: #cfe3ff; }
.kofik .steam circle { fill: rgba(255,255,255,.55); }
.kofik .sparkles path { fill: #fff36b; }
.kofik .eyes > g, .kofik .mouth > *, .kofik .sweat, .kofik .zzz, .kofik .steam, .kofik .sparkles { display: none; }
.kofik[data-eyes="open"] .e-open, .kofik[data-eyes="wide"] .e-wide, .kofik[data-eyes="sleep"] .e-sleep,
.kofik[data-eyes="spiral"] .e-spiral, .kofik[data-eyes="shades"] .e-shades,
.kofik[data-mouth="sleep"] .m-sleep, .kofik[data-mouth="smile"] .m-smile, .kofik[data-mouth="grin"] .m-grin,
.kofik[data-mouth="wobble"] .m-wobble, .kofik[data-mouth="o"] .m-o, .kofik[data-mouth="tongue"] .m-tongue,
.kofik.sweating .sweat, .kofik.sleeping .zzz, .kofik.steaming .steam, .kofik.gulp .sparkles { display: inline; }
.kofik .kbody, .kofik .kroot, .kofik .kshake, .kofik .e-open, .kofik .e-wide, .kofik .sp, .kofik .zzz text, .kofik .sweat, .kofik .steam circle, .kofik .arm { transform-box: fill-box; }
.kofik .kbody { transform-origin: 50% 100%; animation: kbounce var(--kd) ease-in-out infinite; }
.kofik.sleeping .kbody { animation: kbreathe 3.4s ease-in-out infinite; }
@keyframes kbounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(calc(var(--kb) * -1px)) scale(.98, 1.02); } }
@keyframes kbreathe { 50% { transform: scale(1.03, .97); } }
.kofik .e-open, .kofik .e-wide { transform-origin: center; animation: kblink 4.6s infinite; }
@keyframes kblink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.kofik .pupil { animation: klook 7s ease-in-out infinite; }
@keyframes klook { 0%, 40% { transform: translate(0, 0); } 50%, 68% { transform: translate(2px, 0); } 78%, 100% { transform: translate(-1.6px, 1px); } }
.kofik .sp { transform-origin: center; animation: kspin 1.1s linear infinite; }
@keyframes kspin { to { transform: rotate(360deg); } }
.kofik .zzz text { animation: kzzz 3s ease-in infinite; }
.kofik .zzz text:nth-child(2) { animation-delay: 1s; } .kofik .zzz text:nth-child(3) { animation-delay: 2s; }
@keyframes kzzz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -20px) scale(1.15); } }
.kofik .sweat { animation: ksweat 1.6s ease-in infinite; }
@keyframes ksweat { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
.kofik .steam circle { animation: ksteam 1.4s ease-out infinite; }
.kofik .steam circle:nth-child(2) { animation-delay: .45s; } .kofik .steam circle:nth-child(3) { animation-delay: .9s; }
@keyframes ksteam { 0% { transform: translateY(0) scale(.5); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-20px) scale(1.4); opacity: 0; } }
.kofik .kroot { transform-origin: 50% 90%; }
.kofik.gulp .kroot { animation: kgulp .6s ease; }
@keyframes kgulp { 30% { transform: scale(1.12, .86); } 60% { transform: scale(.93, 1.1); } }
.kofik.poked .kroot { animation: kpoke .5s ease; }
@keyframes kpoke { 20% { transform: rotate(-9deg) scale(.95, 1.05); } 50% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.kofik.shaky .kshake { animation: kshake .13s linear infinite; }
@keyframes kshake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(calc(var(--ks) * -1px), calc(var(--ks) * .6px)); } 50% { transform: translate(calc(var(--ks) * 1px), 0); } 75% { transform: translate(0, calc(var(--ks) * -1px)); } }
.kofik.turbo .kroot { animation: hue 1s linear infinite; }
.kofik .armL { transform-origin: 100% 0; } .kofik .armR { transform-origin: 0 0; }
.kofik.hype .armL { animation: wave .5s ease-in-out infinite alternate; }
.kofik.hype .armR { animation: wave2 .5s ease-in-out infinite alternate; }
@keyframes wave { to { transform: rotate(28deg); } } @keyframes wave2 { to { transform: rotate(-28deg); } }

/* ---------- quick-add dock ---------- */
.dock { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.dbtn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-height: 116px; padding: 11px 4px 10px;
  border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, #191c24, #12141a); cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .15s, border-color .15s, box-shadow .15s; }
@media (hover: hover) { .dbtn:hover { transform: translateY(-3px); border-color: var(--line2); box-shadow: 0 10px 24px rgba(0,0,0,.35); } }
.dbtn:active { transform: scale(.95); }
.dbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dbtn svg { height: 54px; width: auto; margin-bottom: 6px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); transition: transform .25s; pointer-events: none; }
@media (hover: hover) { .dbtn:hover svg { transform: rotate(-6deg) scale(1.06); } }
.dbtn .nm { font-weight: 700; font-size: 13.5px; text-align: center; line-height: 1.2; }
.dbtn .mg { font-size: 11.5px; color: var(--muted); text-align: center; white-space: nowrap; }
.dbtn .star { position: absolute; top: 8px; right: 10px; font-size: 11px; color: var(--accent); display: none; }
.dbtn.fav { border-color: rgba(124,255,79,.4); }
.dbtn.fav .star { display: block; }
.dbtn.pop { animation: pop .45s ease; }
@keyframes pop { 0% { box-shadow: 0 0 0 0 rgba(124,255,79,.7); } 40% { transform: scale(1.05); } 100% { box-shadow: 0 0 0 14px rgba(124,255,79,0); } }

/* ---------- chart + drinks ---------- */
.chartwrap { position: relative; }
canvas#chart { width: 100%; height: 270px; display: block; cursor: crosshair; touch-action: pan-y; }
.tip { position: absolute; pointer-events: none; background: #1d2028; border: 1px solid var(--line2); border-radius: 10px; padding: 8px 11px; font-size: 12.5px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); opacity: 0; transition: opacity .12s; }
.tip b { display: block; font-size: 15px; }
.tip span { color: var(--muted); }
#log { max-height: 430px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #343844 transparent; margin: 0 -4px; padding: 0 4px; }
.entry { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 10px; }
.entry:first-child { border-top: 0; }
@media (hover: hover) { .entry:hover { background: rgba(255,255,255,.02); } }
.entry.new { animation: slideIn .35s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-6px); } }
.entry .ic svg { height: 38px; width: auto; max-width: 40px; display: block; margin: 0 auto; }
.entry .nm { font-weight: 600; }
.entry .nm span { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 6px; }
.entry .t { font-size: 12px; color: var(--muted); margin-top: 2px; }
.entry .mg { font-weight: 700; }
.x { background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); transition: .15s; }
@media (hover: hover) { .x:hover { color: var(--bad); border-color: rgba(255,79,94,.4); background: rgba(255,79,94,.08); } }
.x svg { width: 14px; height: 14px; }
.edit { grid-column: 1 / -1; display: none; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0 4px 42px; cursor: default; }
.entry.editing .edit { display: flex; }
.entry.editing { background: rgba(255,255,255,.03); }
.mini { padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line2); background: var(--bg2); font-size: 12.5px; cursor: pointer; color: var(--text2); }
@media (hover: hover) { .mini:hover { border-color: var(--accent); color: var(--text); } }
.etime { width: auto; min-width: 8.6em; padding: 5px 8px; border-radius: 9px; border: 1px solid var(--line2); background: var(--bg2); }
.empty { text-align: center; color: var(--muted); font-size: 14px; padding: 22px 0 10px; }
.empty svg { width: 46px; height: 46px; opacity: .5; display: block; margin: 0 auto 8px; }

/* ---------- form bits (the "more options" sheet, settings) ---------- */
.step { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 13px; color: var(--text2); font-weight: 500; }
.step b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #22252d; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { cursor: pointer; text-align: center; padding: 10px 4px 9px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg2); transition: border-color .15s, background .15s; }
@media (hover: hover) { .tile:hover { border-color: var(--line2); } }
.tile.sel { border-color: var(--accent); background: rgba(124,255,79,.07); }
.tile svg { height: 44px; width: auto; display: block; margin: 0 auto; }
.tile .nm { font-weight: 700; margin-top: 6px; font-size: 12.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { cursor: pointer; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); font-size: 13.5px; color: var(--text2); transition: .15s; }
@media (hover: hover) { .chip:hover { border-color: var(--line2); color: var(--text); } }
.chip.sel { border-color: var(--accent); background: rgba(124,255,79,.12); color: var(--accent); font-weight: 600; }
.chip span { color: var(--muted); font-weight: 400; }
.chip.sel span { color: inherit; opacity: .75; }
.inline { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.field { display: flex; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; transition: border-color .15s; }
.field:focus-within { border-color: var(--accent); }
.field input { background: none; border: none; outline: none; padding: 9px 0; width: 100%; min-width: 0; }
.field em { font-style: normal; color: var(--muted); font-size: 13px; }
.inline .field { width: 140px; flex: none; }
.field input[type="time"] { width: auto; min-width: 8.6em; }   /* fits "11:30 PM" plus the picker icon in every browser */
.inline .field.tfield, .bedrow .field { width: auto; }
.addrow { display: flex; gap: 12px; align-items: center; margin-top: 22px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg2); flex: none; }
.stepper button { background: none; border: none; width: 40px; height: 46px; cursor: pointer; font-size: 18px; color: var(--text2); }
@media (hover: hover) { .stepper button:hover { background: #1c1f26; color: var(--text); } }
.stepper span { min-width: 30px; text-align: center; font-weight: 700; }
.add { flex: 1; min-height: 48px; padding: 6px 16px; background: linear-gradient(135deg, #8dff63, #4fe35a); color: #08120a; font-weight: 700; border: none; border-radius: 12px;
  cursor: pointer; font-size: 15px; box-shadow: 0 8px 24px rgba(124,255,79,.25); transition: transform .12s, box-shadow .2s, filter .2s; }
@media (hover: hover) { .add:hover { filter: brightness(1.05); box-shadow: 0 10px 30px rgba(124,255,79,.35); } }
.add:active { transform: scale(.98); }
.add:disabled { filter: grayscale(1) brightness(.6); cursor: not-allowed; box-shadow: none; }
.nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.num { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 12px; transition: border-color .15s; }
.num:focus-within { border-color: var(--accent); }
.num label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.numctl { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.numctl button { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--line2); background: none; cursor: pointer; color: var(--text2); font-size: 16px; line-height: 1; }
@media (hover: hover) { .numctl button:hover { border-color: var(--accent); color: var(--accent); } }
.numval { display: flex; align-items: baseline; justify-content: center; gap: 4px; min-width: 0; }
.numval input { background: none; border: none; outline: none; padding: 0; font-size: 22px; font-weight: 700; text-align: right; width: 3ch; -moz-appearance: textfield; appearance: textfield; }
.numval input::-webkit-outer-spin-button, .numval input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.numval em { font-style: normal; font-size: 14px; color: var(--muted); }
.toggle { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; font-size: 14px; color: var(--text2); }
.toggle input { position: absolute; left: 0; top: 50%; width: 38px; height: 22px; margin: -11px 0 0; opacity: 0; cursor: pointer; }
.toggle .sw { width: 38px; height: 22px; border-radius: 999px; background: #262a33; position: relative; flex: none; transition: background .2s; }
.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #9aa0ac; transition: transform .2s, background .2s; }
.toggle input:checked + .sw { background: rgba(124,255,79,.35); }
.toggle input:checked + .sw::after { transform: translateX(16px); background: var(--accent); }
.toggle input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle small { display: block; color: var(--muted); font-size: 12px; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.btn2 { padding: 9px 14px; border-radius: 11px; border: 1px solid var(--line2); background: var(--bg2); cursor: pointer; font-size: 13.5px; color: var(--text2); transition: .15s; }
@media (hover: hover) { .btn2:hover { border-color: var(--text2); color: var(--text); } }
@media (hover: hover) { .btn2.danger:hover { border-color: var(--bad); color: var(--bad); } }
.synccode { font: 600 20px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; color: var(--accent); margin: 0 0 12px; user-select: all; word-break: break-all; }
.keylist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.kr { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 5px 0; font-size: 14px; color: var(--text2); }
.kr.dim { color: var(--muted); font-style: italic; }
kbd { display: inline-block; min-width: 28px; padding: 3px 8px; border-radius: 7px; background: #22252d; border: 1px solid var(--line2); border-bottom-width: 3px;
  font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; color: var(--text); }