@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@700;800&display=swap');
  * { margin:0; padding:0; box-sizing:border-box; }
  html { position:fixed; overflow:hidden; height:100%; width:100%; touch-action:none; overscroll-behavior:none; }
  body { overflow:hidden; height:100%; overscroll-behavior:none; touch-action:none; }
  body { background:#0d0d0d; color:#f0f0f0; font-family:'DM Mono',monospace; min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:12px 20px; }
  .app { width:100%; max-width:390px; display:flex; flex-direction:column; gap:16px; }

  .login-screen { display:flex; flex-direction:column; gap:12px; }
  .login-title { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; color:#c8f542; letter-spacing:0.1em; text-transform:uppercase; }
  .login-input { width:100%; padding:12px 14px; background:#1a1a1a; border:1.5px solid #2a2a2a; border-radius:12px; color:#f0f0f0; font-family:'DM Mono',monospace; font-size:13px; outline:none; transition:border-color 0.2s; }
  .login-input:focus { border-color:#c8f542; }
  .login-row { display:flex; gap:8px; }
  .login-row select { flex:1; padding:12px 14px; background:#1a1a1a; border:1.5px solid #2a2a2a; border-radius:12px; color:#f0f0f0; font-family:'DM Mono',monospace; font-size:13px; outline:none; }
  .login-btn { width:100%; padding:14px; background:#c8f542; color:#0d0d0d; border:none; border-radius:12px; font-family:'Syne',sans-serif; font-size:14px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; }

  .main-screen { display:none; flex-direction:column; gap:16px; }
  .main-screen.visible { display:flex; }

  .header { display:flex; align-items:center; gap:4px; }
  .header-name { font-family:'DM Mono',monospace; font-size:13px; font-weight:400; color:#f0f0f0; letter-spacing:0.1em; flex:1; text-align:center; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .header-kcal { font-size:11px; color:#666; letter-spacing:0; }
  .header-kcal span { color:#c8f542; }

  .stats-zone { background:#111; border-radius:16px; padding:16px; cursor:pointer; position:relative; overflow:hidden; border:1.5px solid #1e1e1e; transition:border-color 0.2s; min-height:80px; }
  .stats-zone:hover { border-color:#c8f542; }
  .stats-zone.active { border-color:#c8f542; cursor:default; }

  .stat-item { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
  .stat-label-row { display:flex; justify-content:space-between; }
  .stat-label { font-size:10px; color:#666; letter-spacing:0.12em; text-transform:uppercase; }
  .stat-value { font-size:10px; color:#f0f0f0; }
  .stat-value-calories { display:flex; align-items:center; font-size:10px; line-height:1; }
  .cal-burned { color:rgba(255,160,0,0.95); }
  .cal-flame { font-size:13px; line-height:1; display:inline-flex; align-items:center; margin:0 5px; position:relative; top:1px; }
  .cal-sep { color:#444; margin:0 3px; }
  .stat-bar-bg { position:relative; height:5px; background:#1e1e1e; border-radius:3px; overflow:visible; }

  .stat-bar { position:relative; height:100%; border-radius:3px; transition:width 0.4s ease; z-index:2; }
  .bar-burned-overlay { position:absolute; top:-3px; left:0; height:11px; border-radius:5px; background:linear-gradient(90deg,rgba(255,140,0,0.18),rgba(255,180,0,0.22)); border:1px solid rgba(255,160,0,0.3); z-index:1; box-shadow:0 0 8px rgba(255,140,0,0.15); pointer-events:none; transition:width 0.4s ease; }
  .sel-row { display:flex; align-items:center; gap:8px; }
  .sel-row .stat-bar-bg { flex:1; }
  .sel-pct { position:absolute; top:50%; transform:translateY(-50%); right:4px; font-size:7px; color:rgba(255,255,255,0.45); font-family:'DM Mono',monospace; z-index:3; pointer-events:none; }
  .sel-warning { font-size:13px; flex-shrink:0; }
  .bar-macro { background:#c8f542; }
  .bar-micro { background:#4ecdc4; }
  .separator { height:1px; background:#1e1e1e; margin:8px 0; }

  .stats-overlay { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; background:#000; border-radius:14px; z-index:10; }
  .stats-overlay.visible { display:flex; }
  .stats-overlay video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:14px; }
  .overlay-capture { position:relative; z-index:2; display:flex; gap:10px; align-items:flex-end; justify-content:center; width:100%; padding:12px; }
  .capture-btn { background:rgba(0,0,0,0.75); border:1.5px solid #c8f542; color:#c8f542; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.1em; padding:7px 16px; border-radius:8px; cursor:pointer; text-transform:uppercase; }
  .preview-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:14px; display:none; z-index:10; background:#000; }
  .preview-overlay { position:absolute; bottom:10px; right:10px; z-index:2; display:none; }
  .preview-overlay.visible { display:flex; }

  .desc-zone { display:flex; flex-direction:column; gap:6px; }
  .desc-label { font-size:10px; color:#666; letter-spacing:0.12em; text-transform:uppercase; }
  textarea { width:100%; height:80px; background:#1a1a1a; border:1.5px solid #2a2a2a; border-radius:12px; color:#f0f0f0; font-family:'DM Mono',monospace; font-size:12px; line-height:1.6; padding:12px; resize:none; outline:none; transition:border-color 0.2s; }
  textarea::placeholder { color:#666; }
  textarea:focus { border-color:#c8f542; }

  .send-btn { width:100%; padding:14px; background:#c8f542; color:#0d0d0d; border:none; border-radius:12px; font-family:'Syne',sans-serif; font-size:14px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:opacity 0.15s; }
  .send-btn.loading { opacity:0.5; pointer-events:none; }
  .send-btn.disabled { opacity:0.3; pointer-events:none; background:#888; cursor:not-allowed; }

  .repas-scroll { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .repas-scroll::-webkit-scrollbar { display:none; }
  .repas-card { flex:0 0 95px; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:10px; padding:8px; text-align:center; position:relative; cursor:pointer; transition:border-color 0.2s; }
  .repas-card.selected { border-color:#c8f542; background:#1e1e1e; }
  .repas-delete { position:absolute; top:4px; right:4px; width:16px; height:16px; background:#2a2a2a; border:none; border-radius:50%; color:#666; font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .repas-delete:hover { background:#c8f542; color:#0d0d0d; }
  .repas-nom { font-size:9px; color:#888; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:85px; }
  .repas-heure { font-size:11px; color:#f0f0f0; }
  .repas-kcal { font-size:11px; color:#c8f542; margin-top:2px; }

  .response { background:#1a1a1a; border:1.5px solid #2a2a2a; border-left:3px solid #c8f542; border-radius:12px; padding:12px; font-size:11px; line-height:1.7; color:#aaa; display:none; white-space:pre-wrap; }
  .response.visible { display:block; }
  .status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#c8f542; margin-right:6px; animation:pulse 1.5s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

  /* POPUP GAIN */
  .popup-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .popup-overlay.visible { display:flex; }
  .popup { background:#111; border:1.5px solid #c8f542; border-radius:20px; padding:24px; width:100%; max-width:360px; animation:popIn 0.3s cubic-bezier(0.34,1.56,0.64,1); }
  @keyframes popIn { from{opacity:0;transform:scale(0.85)} to{opacity:1;transform:scale(1)} }

  .popup-header { text-align:center; margin-bottom:16px; }
  .popup-aliment { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; color:#f0f0f0; }
  .popup-poids { font-size:11px; color:#666; letter-spacing:0.1em; text-transform:uppercase; margin-top:4px; }
  .popup-divider { height:1px; background:#1e1e1e; margin:14px 0; }

  .popup-stat-row { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
  .popup-stat-label { font-size:10px; color:#666; text-transform:uppercase; letter-spacing:0.1em; width:68px; flex-shrink:0; }
  .popup-bar-wrap { flex:1; height:5px; background:#1a1a1a; border-radius:3px; overflow:hidden; position:relative; }
  .popup-bar-objective { position:absolute; top:0; left:0; height:100%; width:100%; background:#2e2e2e; border-radius:3px; }
  .popup-bar-objective::after { content:""; position:absolute; right:0; top:-3px; height:11px; width:1.5px; background:#555; border-radius:1px; }
  .popup-bar-before { height:100%; border-radius:3px; position:absolute; left:0; top:0; }
  .popup-bar-gain { height:100%; border-radius:3px; position:absolute; top:0; animation:barGrow 0.6s ease forwards; }
  @keyframes barGrow { from{width:0} }
  .pb-macro-before { background:#5a6e1a; }
  .pb-macro-gain   { background:#c8f542; }
  .pb-micro-before { background:#1a4a48; }
  .pb-micro-gain   { background:#4ecdc4; }

  .popup-gain-tag { font-size:10px; white-space:nowrap; width:54px; text-align:right; flex-shrink:0; animation:fadeUp 0.5s ease forwards; opacity:0; }
  @keyframes fadeUp { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
  .gain-nonzero { color:#c8f542; }
  .gain-zero    { color:#333; }

  .popup-close { width:100%; padding:12px; background:#c8f542; color:#0d0d0d; border:none; border-radius:10px; font-family:'Syne',sans-serif; font-size:13px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; margin-top:16px; }
  .spark-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .spark-label { font-size:9px; color:#666; text-transform:uppercase; letter-spacing:0.08em; width:64px; flex-shrink:0; }
  .spark-arrow { font-size:14px; width:14px; text-align:right; flex-shrink:0; }
  .complements-screen { display:none; flex-direction:column; gap:16px; }
  .complements-screen.visible { display:flex; }
  #dropZone { width:100%; height:80px; background:#1a1a1a; border:1.5px solid #2a2a2a; border-radius:12px; color:#444; font-family:'DM Mono',monospace; font-size:12px; display:flex; align-items:center; justify-content:center; text-transform:uppercase; letter-spacing:0.05em; transition:border-color 0.2s,color 0.2s; box-sizing:border-box; }
  #inventaireZone { min-height:200px; }
  .inventaire-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .item-card { background:#1a1a1a; border-radius:12px; padding:12px; text-align:center; cursor:grab; user-select:none; transition:transform 0.15s,opacity 0.15s; -webkit-user-select:none; position:relative; touch-action:none; }
  .item-card.dragging { opacity:0.5; transform:scale(0.95); }
  .item-stock-badge { position:absolute; top:6px; right:6px; background:#c8f542; color:#0d0d0d; font-family:'DM Mono',monospace; font-size:9px; font-weight:500; padding:2px 5px; border-radius:6px; line-height:1.4; }
  .item-stock-badge.low { background:#ff4444; color:#fff; }
  .item-card-emoji { font-size:28px; margin-bottom:4px; }
  .item-card-nom { font-size:11px; color:#f0f0f0; }
  .item-card-info { font-size:10px; color:#4ecdc4; margin-top:2px; }
  .item-add { background:#111; border:1px dashed #333; border-radius:12px; padding:12px; text-align:center; cursor:pointer; opacity:.5; }
  .comp-consomme-label { font-size:10px; color:#666; letter-spacing:.05em; text-transform:uppercase; }
  .comp-card { background:#1a1a1a; border:1px solid #2a2a2a; border-radius:10px; padding:10px 14px; display:flex; align-items:center; gap:10px; }
  .comp-card-emoji { font-size:18px; }
  .comp-card-nom { font-size:11px; color:#f0f0f0; }
  .comp-card-detail { font-size:10px; color:#4ecdc4; }
  .comp-card-heure { font-size:10px; color:#444; flex-shrink:0; }
  .comp-delete { background:none; border:none; color:#444; font-size:14px; cursor:pointer; padding:2px 6px; }