@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#F7F5EF; --surface:#FFFFFF; --border:#E7E2D5;
  --forest:#233028; --smoke:#69645A; --ink:#22201B;
  --rust:#B5502F; --amber:#C98A3E; --amber-soft:#F3E4CC;
  --shadow:0 1px 2px rgba(30,25,15,0.04), 0 4px 14px rgba(30,25,15,0.05);
  --radius:14px;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.55;}
h1,h2,h3{font-weight:600; letter-spacing:-0.01em; margin:0;}
a{color:inherit; text-decoration:none;}

/* Topbar */
.topbar{background:var(--surface); border-bottom:1px solid var(--border); padding:14px 0;}
.topbar-inner{max-width:1240px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; align-items:center;}
.logo{font-size:22px; font-weight:700; color:var(--ink); display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; gap:0;}
.logo-accent{color:var(--rust);}
.logo-sub{font-size:13px; font-weight:500; color:var(--smoke); margin-top:1px;}
.user-box{display:flex; gap:12px; align-items:center; font-size:14px; color:var(--smoke);}

.btn{border:none; border-radius:10px; padding:11px 18px; font-weight:600; cursor:pointer; font-size:14px; transition:transform .1s, filter .15s;}
.btn:active{transform:scale(0.98);}
.btn-solid{background:var(--rust); color:#fff;}
.btn-solid:hover{filter:brightness(1.08);}
.btn-outline{background:var(--surface); border:1px solid var(--border); color:var(--ink);}
.btn-outline:hover{border-color:var(--rust); color:var(--rust);}
.btn-outline.small{padding:6px 12px; font-size:12px; border-radius:8px;}
.btn-ghost-light{background:transparent; border:1px solid #D9CFC0; color:var(--smoke); padding:8px 14px; border-radius:8px; font-size:13px; cursor:pointer;}

/* Auth */
.auth-wrap{display:flex; justify-content:center; padding:72px 24px;}
.auth-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:36px; max-width:400px; width:100%;}
.auth-sub{font-size:14px; color:var(--smoke); margin-bottom:22px;}
.tabs{display:flex; gap:20px; margin-bottom:22px; border-bottom:1px solid var(--border);}
.tab-btn{background:none; border:none; padding:10px 2px; font-size:14px; cursor:pointer; color:var(--smoke); border-bottom:2px solid transparent;}
.tab-btn.active{color:var(--ink); border-bottom-color:var(--rust); font-weight:600;}
.auth-form{display:flex; flex-direction:column; gap:14px;}
.auth-form label{font-size:13px; color:var(--smoke); display:flex; flex-direction:column; gap:6px;}
.auth-form input{padding:11px 12px; border:1px solid var(--border); border-radius:9px; font-size:14px;}
.auth-form input:focus-visible{outline:2px solid var(--amber);}
.form-msg{font-size:13px; color:var(--rust); min-height:18px;}

/* Hero banner */
.hero-banner{
  position:relative; overflow:hidden; border-radius:18px; margin-bottom:24px; padding:36px 32px;
  background:linear-gradient(115deg, #14100D 0%, #1C1512 40%, #2A1B14 70%, #3A2318 100%);
  min-height:180px; display:flex; align-items:center;
}
.hero-content{position:relative; z-index:2; max-width:60%;}
.hero-content h1{color:#F5F1E7; font-size:32px; margin-bottom:10px;}
.hero-content p{color:#C9BFAE; font-size:14px; max-width:44ch;}
.hero-lang{position:absolute; top:18px; right:20px; z-index:3; display:flex; gap:6px;}
.lang-btn{background:rgba(245,241,231,0.08); border:1px solid rgba(245,241,231,0.25); color:#F5F1E7; font-size:12px; font-weight:600; padding:6px 12px; border-radius:8px; cursor:pointer;}
.lang-btn.active{background:var(--amber); color:#2A1B14; border-color:var(--amber);}

.hero-art{position:absolute; right:28px; bottom:18px; width:120px; height:130px; z-index:1; opacity:0.95;}
.hero-art svg{width:100%; height:100%; filter:drop-shadow(0 8px 16px rgba(0,0,0,0.35));}
@media (max-width:760px){
  .hero-banner{padding:20px; display:block;}
  .hero-lang{position:static; justify-content:flex-end; margin-bottom:16px;}
  .hero-content{max-width:100%;}
  .hero-content h1{font-size:26px;}
  .hero-art{display:none;}
}

/* Weight banner */
.weight-banner{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; border-color:var(--amber); background:var(--amber-soft);}

/* Main tabs */
.main-tabs{display:flex; gap:6px; margin-bottom:20px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:5px;}
.main-tab-btn{flex:1; background:none; border:none; padding:11px 14px; font-size:13px; font-weight:600; color:var(--smoke); cursor:pointer; border-radius:8px;}
.main-tab-btn.active{background:var(--forest); color:#fff;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* Layout */
.wrap{max-width:1240px; margin:0 auto; padding:28px 24px 72px;}
.page-head{margin-bottom:22px;}
.page-head p{color:var(--smoke); font-size:14px; margin-top:4px;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; margin-bottom:20px;}
.card h2{font-size:15px; margin-bottom:14px;}
.card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}

/* Stat tiles */
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;}
.stats-row-5{grid-template-columns:repeat(5,1fr);}
.stat-tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px;}
.stat-tile .num{font-size:24px; font-weight:700; color:var(--ink);}
.stat-tile .lbl{font-size:12px; color:var(--smoke); margin-top:2px;}
.stat-tile.accent .num{color:var(--rust);}
@media (max-width:720px){ .stats-row, .stats-row-5{grid-template-columns:1fr 1fr;} }

/* Chart card */
.chart-toggle{display:flex; gap:6px;}
.chart-toggle button{background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:6px 12px; font-size:12px; cursor:pointer; color:var(--smoke);}
.chart-toggle button.active{background:var(--forest); color:#fff; border-color:var(--forest);}
#trend-chart{width:100%; max-height:220px;}

/* Two column layout */
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:760px){ .calc-grid{grid-template-columns:1fr;} }

/* Chips (favorites) */
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:8px 14px; font-size:13px; cursor:pointer; display:flex; gap:6px; align-items:center; transition:background .12s;}
.chip:hover{background:var(--amber-soft); border-color:var(--amber);}
.chip .star{color:var(--amber);}
.chip .meal-tag{font-size:10px; background:var(--forest); color:#fff; border-radius:6px; padding:1px 5px;}
.empty-note{font-size:13px; color:var(--smoke);}

/* Search */
.input-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.input-row input{flex:1; min-width:160px; padding:11px 12px; border:1px solid var(--border); border-radius:9px; font-size:14px;}
.input-row input:focus-visible{outline:2px solid var(--amber);}
.scanner-wrap{display:none; margin-bottom:12px;}
.scanner-wrap.active{display:block;}
#reader{max-width:320px; margin:0 auto; border-radius:10px; overflow:hidden;}
.scanner-note{font-size:12px; color:var(--smoke); text-align:center;}

.results{display:flex; flex-direction:column; gap:6px; max-height:200px; overflow-y:auto; margin-bottom:8px;}
.result-item{text-align:left; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:10px 12px; cursor:pointer; font-size:13px; display:flex; justify-content:space-between; gap:8px;}
.result-item:hover{border-color:var(--amber);}
.result-item .brand{color:var(--smoke); font-size:12px;}
.hint{font-size:12px; color:var(--smoke);}

/* --- Nutrition label card: kept as-is per feedback, only shadow/radius aligned --- */
.label-card{background:var(--forest); color:#EDE6D6; min-height:220px; display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.label-head{padding:16px 18px; border-bottom:2px solid var(--amber); display:flex; justify-content:space-between; gap:10px;}
.label-head h3{margin:0; font-size:16px;}
.label-head .brand{font-size:12px; color:#CFC8B8; margin-top:2px;}
.star-btn{background:none; border:none; font-size:20px; cursor:pointer; color:rgba(237,230,214,0.3);}
.star-btn.active{color:var(--amber);}
.portion-row{display:flex; gap:6px; flex-wrap:wrap; padding:12px 18px 0;}
.portion-btn{background:transparent; border:1px solid rgba(237,230,214,0.4); color:#EDE6D6; padding:6px 10px; border-radius:7px; font-size:12px; cursor:pointer;}
.portion-btn.active{background:var(--amber); color:var(--forest); border-color:var(--amber);}
.amount-row{display:flex; align-items:center; gap:8px; padding:10px 18px 0;}
.amount-row input{width:70px; padding:6px; border:1px solid rgba(237,230,214,0.4); border-radius:7px; background:transparent; color:#EDE6D6; font-size:13px;}
.label-rows{padding:12px 18px;}
.label-row{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid rgba(237,230,214,0.2); font-size:13px;}
.label-row.kcal{font-weight:700; font-size:14px; border-bottom:2px solid var(--amber);}
.label-empty{padding:30px 18px; color:#CFC8B8; font-size:13px; text-align:center; margin:auto;}
.add-btn{margin:0 18px 18px; background:var(--rust); color:#fff; border:none; border-radius:9px; padding:11px; font-weight:600; cursor:pointer; font-size:13px;}
.add-btn:hover{filter:brightness(1.08);}

/* Meal builder */
.meal-builder-items{display:flex; flex-direction:column; gap:6px; margin:12px 0;}
.meal-builder-item{display:flex; justify-content:space-between; align-items:center; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:8px 12px; font-size:13px;}
.meal-builder-item .rm{background:none; border:none; color:var(--rust); cursor:pointer; font-size:13px;}
.meal-builder-total{display:flex; justify-content:space-between; font-weight:600; font-size:13px; padding-top:10px; border-top:1px solid var(--border); margin-top:6px;}
.meal-save-row{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.meal-save-row input{flex:1; min-width:160px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; font-size:14px;}

/* Water */
.water-target-card{border-color:var(--amber);}
.water-quick.active-hover{background:var(--amber-soft);}

/* Log list */
.log-item{display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px;}
.log-item .rm{background:none; border:none; color:var(--rust); cursor:pointer; font-size:13px;}