/* Cellar — modern mobile wine app
   Cool slate/charcoal neutrals, Poppins, flat surfaces, tight corners. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

:root{
  --bg:#f5f6f8;
  --bg2:#edeef1;
  --card:#ffffff;
  --ink:#1a1d23;
  --muted:#6b7280;
  --faint:#9ca3af;
  --line:rgba(26,29,35,.08);
  --line2:rgba(26,29,35,.13);
  --wine:#6d1f2f;
  --wine2:#561120;
  --wine-tint:#f3e1e2;
  --gold:#a8782f;
  --gold-tint:#f5eddf;
  --green:#3d8b5e;
  --amber:#c07a1e;
  --red:#b5334b;
  --slate:#5e6a70;
  --sans:'Poppins',system-ui,-apple-system,sans-serif;
  --serif:var(--sans);
  --mono:ui-monospace,'SF Mono',monospace;
  --safe-b:env(safe-area-inset-bottom,0px);
  --tabh:56px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg2);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{ font-family:inherit; color:inherit; cursor:pointer; border:none; background:none; }
input,textarea{ font-family:inherit; color:inherit; }

/* ----- App shell ----- */
#root{ min-height:100dvh; display:flex; justify-content:center; background:var(--bg2); }
.app{
  width:100%; max-width:440px; min-height:100dvh; position:relative;
  background:var(--bg); display:flex; flex-direction:column;
}
.screen-wrap{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(var(--tabh) + var(--safe-b) + 14px); }
.screen-wrap::-webkit-scrollbar{ display:none; }

/* ----- Top bar ----- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 12px;
  background:var(--bg);
}
.topbar h1{ font-weight:600; font-size:28px; line-height:1.1; margin:0; letter-spacing:-.3px; }
.topbar .sub{ font-size:14px; color:var(--muted); margin-top:2px; white-space:nowrap; font-weight:400; }
.icon-btn{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--card); border:1px solid var(--line2); }

/* ----- Bottom tab bar — minimal, solid background ----- */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:440px; z-index:40;
  display:grid; grid-template-columns:repeat(5,1fr);
  padding:6px 6px calc(6px + var(--safe-b));
  background:var(--bg);
  border-top:1px solid var(--line2);
}
.tab{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 0; color:var(--faint); font-size:12px; font-weight:500; letter-spacing:.1px; transition:color .15s; }
.tab svg{ width:22px; height:22px; }
.tab.on{ color:var(--wine); font-weight:600; }
.tab.scan-tab{ position:relative; }
.tab.scan-tab .scan-fab{
  width:48px; height:48px; border-radius:50%; margin-top:-20px; margin-bottom:1px;
  background:var(--wine); color:#fff; display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(109,31,47,.35);
}
.tab.scan-tab .scan-fab svg{ width:24px; height:24px; }

/* ----- Cards / surfaces — flat, subtle border ----- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:10px; }
.section-label{ font-size:12px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); }
.serif{ font-family:var(--sans); }

/* ----- Chips ----- */
.chip{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-size:14px; font-weight:500; padding:5px 11px; border-radius:8px;
  background:var(--bg2); color:var(--ink); border:1px solid transparent;
}
.chip.line{ background:transparent; border-color:var(--line2); }
.chip.on{ background:var(--wine); color:#fff; }
.chip.gold{ background:var(--gold-tint); color:#7a571c; }
.chip svg{ width:14px; height:14px; }
.chip-row{ display:flex; gap:6px; overflow-x:auto; padding:2px 0; scrollbar-width:none; }
.chip-row::-webkit-scrollbar{ display:none; }

/* status pills */
.stat-pill{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; padding:3px 9px; border-radius:6px; letter-spacing:.1px; }
.st-now{ background:#e2f0e8; color:var(--green); }
.st-soon{ background:#f5ead6; color:var(--amber); }
.st-hold{ background:#e8ebed; color:var(--slate); }
.st-past{ background:#f5dde2; color:var(--red); }
.dot{ width:6px; height:6px; border-radius:50%; }
.dot.now{ background:var(--green);} .dot.soon{ background:var(--amber);} .dot.hold{ background:var(--slate);} .dot.past{ background:var(--red);}

/* ----- Buttons ----- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:16px; padding:12px 18px; border-radius:10px; background:var(--card); border:1px solid var(--line2); }
.btn.primary{ background:var(--wine); color:#fff; border-color:var(--wine); }
.btn.block{ width:100%; }
.btn.ghost{ background:transparent; border-color:var(--line2); }
.btn svg{ width:18px; height:18px; }
.btn.sm{ padding:9px 13px; font-size:15px; border-radius:8px; }

/* ----- Inputs ----- */
.field{ width:100%; background:var(--card); border:1px solid var(--line2); border-radius:8px; padding:12px 14px; font-size:16px; font-weight:400; }
.field:focus{ outline:none; border-color:var(--wine); box-shadow:0 0 0 3px rgba(109,31,47,.10); }
textarea.field{ resize:none; line-height:1.5; }

/* ----- Wine color swatch (replaces bottle art) ----- */
.wine-swatch{
  width:42px; height:42px; border-radius:10px; flex:0 0 auto;
  display:grid; place-items:center;
}
.wine-swatch .dot-inner{
  width:18px; height:18px; border-radius:50%;
}

/* bottle-art kept for detail/scan screens that still use it */
.bottle-art{ position:relative; border-radius:10px; overflow:hidden; background:var(--bg2); display:grid; place-items:center; flex:0 0 auto; }
.bottle-art .glass{ position:relative; width:34%; height:88%; border-radius:9px 9px 11px 11px; background:linear-gradient(105deg, rgba(255,255,255,.22), rgba(0,0,0,.10)); }
.bottle-art .glass::before{ content:''; position:absolute; top:-13%; left:50%; transform:translateX(-50%); width:34%; height:16%; border-radius:3px 3px 0 0; background:inherit; }
.bottle-art .label-band{ position:absolute; left:8%; right:8%; bottom:16%; height:42%; border-radius:3px; background:rgba(255,253,249,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9%; padding:6% 8%; }
.bottle-art .label-band i{ display:block; height:7%; min-height:2px; border-radius:2px; background:rgba(36,28,27,.32); }
.bottle-art img{ width:100%; height:100%; object-fit:cover; }

/* drink-window meter */
.meter{ position:relative; height:6px; border-radius:30px; background:var(--bg2); overflow:hidden; }
.meter .peak{ position:absolute; top:0; bottom:0; background:linear-gradient(90deg,var(--gold),#caa44f); opacity:.5; }
.meter .now{ position:absolute; top:-4px; width:2px; height:14px; border-radius:3px; background:var(--ink); }
.meter-axis{ display:flex; justify-content:space-between; font-size:12px; color:var(--faint); margin-top:4px; font-weight:500; }

/* trait bars */
.trait{ display:grid; grid-template-columns:68px 1fr; align-items:center; gap:10px; font-size:14px; }
.trait .bar{ height:5px; border-radius:30px; background:var(--bg2); overflow:hidden; }
.trait .bar i{ display:block; height:100%; background:var(--wine); border-radius:30px; }

/* list row */
.wine-row{ display:flex; gap:13px; align-items:center; padding:11px 0; }
.wine-row + .wine-row{ border-top:1px solid var(--line); }
.wine-name{ font-weight:400; font-size:18px; line-height:1.15; letter-spacing:-.1px; }
.wine-name .cuvee{ font-weight:600; }
.wine-meta{ font-size:14px; color:var(--muted); margin-top:2px; font-weight:400; }

/* sheets / modal */
.sheet-scrim{ position:fixed; inset:0; z-index:60; background:rgba(26,29,35,.38); display:flex; align-items:flex-end; justify-content:center; }
.sheet{ width:100%; max-width:440px; max-height:88dvh; overflow-y:auto; background:var(--bg); border-radius:14px 14px 0 0; padding-bottom:env(safe-area-inset-bottom,0); }
.sheet::-webkit-scrollbar{ display:none; }
.sheet .grab{ width:36px; height:4px; border-radius:30px; background:var(--line2); margin:8px auto 2px; }
.full-screen{ position:fixed; top:0; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:440px; z-index:60; background:var(--bg); display:flex; flex-direction:column; }
.scan-cam{ position:fixed; inset:0; z-index:60; background:#111318; display:flex; flex-direction:column; width:100vw; height:100dvh; }

.fade-in{ animation:fade .2s ease both; }
@keyframes fade{ from{ opacity:0;} to{ opacity:1;} }
@keyframes sheet-up{ from{ transform:translateY(40px); opacity:0;} to{ transform:translateY(0); opacity:1;} }
.spin{ animation:spin 1s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg);} }

.empty{ text-align:center; color:var(--muted); padding:50px 30px; }
.divider{ height:1px; background:var(--line); margin:0; border:none; }
.muted{ color:var(--muted); } .gold{ color:var(--gold); } .wine-c{ color:var(--wine); }
.num{ font-weight:600; }