/* Vearuny subscriber portal - mobile first, self-contained, no external assets. */
:root{
  --bg:#FEFAE0; --surface:#FFFFFF; --ink:#283618; --primary:#606C38;
  --muted:#6b7355; --line:rgba(40,54,24,.14);
  --ok:#2f6b34; --ok-bg:#e6f2e6;
  --warn:#8a6100; --warn-bg:#fdf1d6;
  --info:#1d5a7a; --info-bg:#e1eef5;
  --bad:#8c2f2f; --bad-bg:#f8e4e4;
  --idle:#4a4a4a; --idle-bg:#ececec;
  --font:'Telugu Sangam MN','Noto Sans Khmer',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
/* Author rules such as .screen{display:grid} outrank the browser's default
   [hidden]{display:none} at equal specificity, so hidden would stop hiding.
   Forcing it here keeps the JS toggles reliable. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.5;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
h1,h2,h3{margin:0 0 .5rem;line-height:1.25}
h1{font-size:1.5rem;color:var(--primary)}
h2{font-size:1.05rem;margin:22px 0 10px}
.muted{color:var(--muted);font-size:.88rem}
button{font:inherit;cursor:pointer}

/* ---------- auth screens ---------- */
.screen{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px}
.card{background:var(--surface);border-radius:16px;padding:28px 22px;width:min(420px,100%);
  box-shadow:0 2px 12px rgba(40,54,24,.10)}
.card form{display:flex;flex-direction:column}
label{margin-top:16px;font-size:.84rem;color:var(--muted)}
input{margin-top:6px;padding:13px 14px;border:1px solid var(--line);border-radius:11px;
  font:inherit;background:#fff;color:var(--ink);min-height:50px;width:100%}
#code{letter-spacing:.4em;font-size:1.3rem;text-align:center}
.card button[type=submit]{margin-top:22px;padding:14px;border:0;border-radius:11px;
  background:var(--primary);color:#fff;font-weight:600;min-height:50px;font-size:1rem}
.card button[type=submit]:disabled{opacity:.6}
.error{color:var(--bad);margin:14px 0 0;font-size:.88rem}
.row{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.link{background:none;border:0;color:var(--primary);font-size:.88rem;padding:8px 0;
  text-decoration:underline;min-height:40px}
.link:disabled{color:var(--muted);text-decoration:none}

/* ---------- signed in ---------- */
main{max-width:640px;margin:0 auto;padding:16px 16px 48px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 0 14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.hello{display:block;font-size:1.2rem;font-weight:700}
.ref{display:block;font-size:.78rem}

/* ---------- subscription ---------- */
.sub{background:var(--surface);border-radius:16px;padding:18px;margin-top:16px;
  border:1px solid var(--line)}
.sub-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.sub-title{font-size:1.1rem;font-weight:700}
.meals{font-size:1.65rem;font-weight:700;margin-top:12px;line-height:1.2}
.meals small{display:block;font-size:.88rem;font-weight:400;color:var(--muted);margin-top:2px}
.progress{height:10px;background:var(--idle-bg);border-radius:999px;overflow:hidden;margin-top:12px}
.progress span{display:block;height:100%;background:var(--primary)}
.carried{margin-top:8px;font-size:.8rem;color:var(--muted)}
.next{margin-top:16px;padding:14px;border-radius:12px;background:var(--ok-bg);color:var(--ok)}
.next strong{display:block;font-size:1.05rem}
.detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 16px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.detail .k{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.detail .v{display:block;margin-top:2px;font-size:.94rem}

/* ---------- day cards ---------- */
.cards{display:flex;flex-direction:column;gap:8px}
.day{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.day-date{font-weight:600;min-width:112px}
.day-meta{color:var(--muted);font-size:.84rem}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:600;
  background:var(--idle-bg);color:var(--idle);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.info{background:var(--info-bg);color:var(--info)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}

.empty{background:var(--surface);border:1px dashed var(--line);border-radius:12px;
  padding:28px 18px;text-align:center;color:var(--muted)}
.foot{margin-top:28px;text-align:center;font-size:.82rem}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:30;margin:0;
  background:var(--ink);color:#fff;padding:12px 16px;border-radius:10px;font-size:.9rem;
  max-width:calc(100vw - 32px);box-shadow:0 4px 16px rgba(40,54,24,.3)}
.toast.bad{background:var(--bad)}

@media (min-width:560px){
  main{padding:22px 20px 56px}
}