:root{
  --bg:#0b0b0c;
  --panel:#0f1113;
  --muted:#9aa3b2;
  --glass: rgba(255,255,255,0.04);
  --accent:#57a0ff;
  --success:#5ee2a3;
  --radius:14px;
  --glass-2: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0; background:var(--bg); color:#e6eef8; -webkit-font-smoothing:antialiased;
}
.app{max-width:1100px;margin:28px auto;padding:20px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-radius:12px;background:var(--panel);box-shadow:0 6px 30px rgba(2,6,23,0.6)}
.brand{font-weight:700;font-size:20px;letter-spacing:0.2px}
.controls{display:flex;gap:8px;align-items:center}
.icon-btn{background:transparent;border:0;color:var(--muted);font-size:16px;padding:8px;border-radius:10px;cursor:pointer}
.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:var(--muted);cursor:pointer}
.primary{background:linear-gradient(180deg,var(--accent),#2b87ff);border:0;color:white;padding:10px 14px;border-radius:12px;cursor:pointer;box-shadow:0 6px 18px rgba(20,80,200,0.12);}
.muted{background:transparent;border:0;color:var(--muted);padding:8px 12px;border-radius:10px;cursor:pointer}
.content{display:grid;grid-template-columns:1fr 420px;gap:18px;margin-top:18px}
.left{background:var(--panel);padding:18px;border-radius:var(--radius);box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.right{display:flex;flex-direction:column;gap:14px}
.label{display:block;margin-bottom:8px;color:var(--muted)}
textarea{width:100%;min-height:160px;padding:12px;border-radius:12px;border:0;background:var(--glass);color:inherit;resize:vertical}
.row{display:flex;gap:8px;margin-top:12px;align-items:center}
.spacer{flex:1}
.parsed-list{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.parsed-item{padding:10px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);display:flex;justify-content:space-between;align-items:center}
.card{background:var(--panel);padding:14px;border-radius:12px;box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.card.small{padding:10px}
.card-title{margin:0 0 8px 0;font-size:14px;color:var(--muted)}
#totalsList{display:flex;flex-direction:column;gap:6px}
.nutr-table{width:100%;border-collapse:collapse;margin-top:8px}
.nutr-table th{cursor:pointer;text-align:left;padding:8px;color:var(--muted);font-size:13px}
.nutr-table td{padding:8px;border-top:1px solid rgba(255,255,255,0.03)}
.nutr-table tr:hover td{background:rgba(255,255,255,0.01)}
.loader{width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,0.08);border-top-color:var(--accent);animation:spin .9s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
/* saved-recipe styles removed */
.foot{margin-top:18px;color:var(--muted);text-align:center}
.dialog{border-radius:12px;padding:16px;background:var(--panel);color:inherit}
.toast{position:fixed;right:20px;bottom:20px;background:rgba(0,0,0,0.6);padding:10px 14px;border-radius:10px;color:#fff;opacity:0;transform:translateY(8px);transition:all .28s ease}
.toast.show{opacity:1;transform:translateY(0)}
.muted.small{font-size:12px;color:var(--muted)}

@media (max-width:960px){
  .content{grid-template-columns:1fr;}
  .right{order:2}
}

/* subtle hover */
button:hover{transform:translateY(-1px)}