:root {
    --black:#0a0a0a; --charcoal:#131313; --dark:#1c1c1c; --card:#202020;
    --border:#2a2a2a; --red:#e31c1c; --red-glow:rgba(227,28,28,0.12);
    --white:#f5f5f5; --muted:#777; --light:#aaa;
    --blue:#4ec9f0; --green:#3ecf8e; --amber:#f0a84e; --pink:#f04e7a;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--black); color:var(--white); font-family:'DM Sans',sans-serif; min-height:100vh; }
  .container { max-width:520px; margin:0 auto; padding:0 20px 88px; }
  header { padding:20px 0 16px; border-bottom:1px solid var(--border); margin-bottom:24px; display:flex; align-items:center; justify-content:space-between; }
  .header-logo img { height:38px; width:auto; object-fit:contain; }
  .header-right { display:flex; align-items:center; gap:10px; }
  .user-badge { font-size:11px; color:var(--muted); font-family:'DM Mono',monospace; }
  .signout-btn { font-size:11px; color:var(--red); background:none; border:1px solid rgba(227,28,28,0.3); border-radius:6px; padding:4px 10px; cursor:pointer; font-family:inherit; }
  .settings-btn { font-size:18px; background:none; border:none; cursor:pointer; padding:2px 4px; line-height:1; opacity:0.7; transition:opacity 0.2s; }
  .settings-btn:hover { opacity:1; }
  .nav-tabs { display:none; }

  /* --- Bottom Navigation --- */
  .bottom-nav { position:fixed; bottom:0; left:0; right:0; background:var(--charcoal); border-top:1px solid var(--border); display:flex; z-index:1000; padding-bottom:env(safe-area-inset-bottom,0); }
  .bn-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 4px 8px; background:none; border:none; cursor:pointer; color:var(--muted); transition:color 0.2s; font-family:inherit; }
  .bn-item.active { color:var(--red); }
  .bn-icon { font-size:20px; line-height:1; }
  .bn-label { font-size:9px; font-family:'DM Mono',monospace; letter-spacing:0.5px; text-transform:uppercase; }

  /* --- More Sheet --- */
  #moreSheetOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9900; }
  #moreSheetOverlay.open { display:block; }
  .more-sheet { position:absolute; bottom:0; left:0; right:0; background:var(--card); border-radius:20px 20px 0 0; border-top:1px solid var(--border); padding:8px 0 calc(68px + env(safe-area-inset-bottom,0)); animation:slideUp 0.25s ease; }
  .more-sheet-handle { width:36px; height:4px; background:var(--border); border-radius:2px; margin:8px auto 12px; }
  .more-sheet-item { display:flex; align-items:center; gap:14px; padding:15px 20px; font-size:15px; color:var(--light); cursor:pointer; transition:background 0.15s; }
  .more-sheet-item:hover { background:var(--dark); }
  .more-sheet-icon { font-size:20px; width:28px; text-align:center; }
  .more-sheet-divider { height:1px; background:var(--border); margin:4px 0; }
  .more-sheet-danger { color:var(--red); }

  /* Raise install banner above bottom nav */
  #installBanner { bottom:65px !important; }
  #loginScreen { display:none; }
  .login-logo { text-align:center; margin:40px 0 32px; }
  .login-logo img { height:90px; width:auto; object-fit:contain; }
  .login-title { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:2px; margin-top:12px; }
  .login-sub { font-size:12px; color:var(--muted); font-family:'DM Mono',monospace; letter-spacing:1px; text-transform:uppercase; margin-top:4px; }
  .form-group { margin-bottom:14px; }
  .form-label { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-family:'DM Mono',monospace; margin-bottom:5px; display:block; }
  .form-input { width:100%; background:var(--charcoal); border:1px solid var(--border); border-radius:10px; padding:13px 14px; color:var(--white); font-family:inherit; font-size:14px; outline:none; transition:border-color 0.2s; }
  .form-input:focus { border-color:var(--red); }
  .form-btn { width:100%; background:var(--red); color:white; border:none; border-radius:10px; padding:14px; font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; cursor:pointer; margin-top:4px; }
  .form-btn:disabled { opacity:0.5; cursor:not-allowed; }
  .form-error { background:rgba(227,28,28,0.1); border:1px solid rgba(227,28,28,0.3); border-radius:8px; padding:10px 12px; font-size:13px; color:#ff8080; margin-top:10px; display:none; }
  .login-coach { margin-top:32px; text-align:center; }
  .coach-pill { display:inline-flex; align-items:center; gap:8px; background:var(--charcoal); border:1px solid var(--border); border-radius:20px; padding:7px 14px; }
  .coach-dot { width:8px; height:8px; background:var(--green); border-radius:50%; animation:pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.3} }
  .coach-text { font-size:11px; color:var(--light); }
  .coach-text strong { color:var(--white); }
  #appScreen { display:none; }
  .ring-card { background:linear-gradient(135deg,var(--charcoal),var(--dark)); border:1px solid var(--border); border-radius:16px; padding:18px; margin-bottom:14px; display:flex; align-items:center; gap:16px; position:relative; overflow:hidden; }
  .ring-card::after { content:''; position:absolute; top:-20px; right:-20px; width:80px; height:80px; background:var(--red-glow); border-radius:50%; filter:blur(25px); }
  .ring { position:relative; width:72px; height:72px; flex-shrink:0; }
  .ring svg { transform:rotate(-90deg); }
  .ring-inner { position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);text-align:center; }
  .ring-num { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--red); line-height:1; }
  .ring-unit { font-size:8px; color:var(--muted); }
  .ring-info { flex:1; }
  .ring-label { font-size:12px; font-weight:600; margin-bottom:3px; }
  .ring-target { font-size:11px; color:var(--muted); margin-bottom:8px; }
  .mbar { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
  .mbar-lbl { font-size:9px; width:11px; font-family:'DM Mono',monospace; }
  .mbar-track { flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
  .mbar-fill { height:100%; border-radius:3px; transition:width 0.5s ease; }
  .mbar-val { font-size:9px; color:var(--muted); font-family:'DM Mono',monospace; width:28px; text-align:right; }
  .coach-msg { background:var(--red-glow); border:1px solid rgba(227,28,28,0.2); border-radius:13px; padding:13px 14px; display:flex; gap:10px; margin-bottom:14px; }
  .coach-av { width:32px; height:32px; background:var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; overflow:hidden; }
  .coach-av img { width:100%; height:100%; object-fit:contain; padding:2px; }
  .coach-body { font-size:12px; color:var(--light); line-height:1.6; }
  .coach-body strong { display:block; color:var(--white); font-size:10px; letter-spacing:0.5px; margin-bottom:2px; }
  .log-btn { width:100%; background:var(--red); color:white; border:none; border-radius:12px; padding:15px; font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px; transition:all 0.2s; }
  .log-btn:hover { opacity:0.9; transform:translateY(-1px); }
  .sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .sec-title { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-family:'DM Mono',monospace; }
  .sec-link { font-size:12px; color:var(--red); cursor:pointer; }
  .meal-item { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:8px; display:flex; align-items:center; gap:12px; }
  .meal-thumb { width:42px; height:42px; border-radius:9px; background:var(--dark); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
  .meal-body { flex:1; }
  .meal-name { font-size:13px; font-weight:600; margin-bottom:2px; }
  .meal-meta { font-size:10px; color:var(--muted); }
  .meal-kcal { font-family:'Bebas Neue',sans-serif; font-size:20px; color:var(--red); }
  .meal-macros { display:flex; gap:8px; margin-top:3px; }
  .mm { font-size:9px; font-family:'DM Mono',monospace; }
  .empty-state { text-align:center; padding:32px 20px; color:var(--muted); }
  .empty-icon { font-size:40px; margin-bottom:10px; opacity:0.5; }
  .empty-text { font-size:13px; }
  #logPanel { display:none; }
  .panel-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:1px; margin-bottom:16px; }
  .upload-zone { border:2px dashed var(--border); border-radius:14px; padding:32px 20px; text-align:center; cursor:pointer; background:var(--charcoal); transition:all 0.2s; position:relative; margin-bottom:14px; }
  .upload-zone:hover { border-color:var(--red); background:var(--red-glow); }
  .upload-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
  .upload-icon { width:48px; height:48px; margin:0 auto 10px; background:var(--dark); border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); }
  .upload-icon svg { width:22px; height:22px; stroke:var(--red); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .upload-title { font-size:14px; font-weight:600; margin-bottom:3px; }
  .upload-sub { font-size:12px; color:var(--muted); }
  .preview-wrap { border-radius:14px; overflow:hidden; margin-bottom:14px; position:relative; display:none; }
  .preview-wrap img { width:100%; max-height:260px; object-fit:cover; display:block; }
  .preview-overlay { position:absolute; bottom:0; left:0; right:0; padding:10px 14px; background:linear-gradient(transparent,rgba(0,0,0,0.8)); display:flex; justify-content:space-between; align-items:center; }
  .remove-btn { background:rgba(255,255,255,0.15); border:none; color:white; font-size:12px; padding:4px 10px; border-radius:20px; cursor:pointer; font-family:inherit; }
  .notes-input { width:100%; background:var(--charcoal); border:1px solid var(--border); border-radius:10px; padding:12px 14px; color:var(--white); font-family:inherit; font-size:13px; resize:none; height:70px; outline:none; margin-bottom:14px; }
  .notes-input:focus { border-color:var(--red); }
  .notes-input::placeholder { color:var(--muted); }
  .analyse-btn { width:100%; background:var(--red); color:white; border:none; border-radius:12px; padding:15px; font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px; }
  .analyse-btn:disabled { opacity:0.4; cursor:not-allowed; }
  .loading-state { display:none; text-align:center; padding:40px 0; }
  .spinner { width:44px; height:44px; border:3px solid var(--border); border-top-color:var(--red); border-radius:50%; margin:0 auto 14px; animation:spin 0.8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .loading-text strong { display:block; font-size:15px; margin-bottom:4px; }
  .loading-text p { font-size:12px; color:var(--muted); }
  .results-section { display:none; animation:fadeUp 0.4s ease forwards; }
  @keyframes fadeUp { from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)} }
  .results-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .results-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:1px; }
  .confidence-badge { font-size:11px; font-family:'DM Mono',monospace; color:var(--red); background:var(--red-glow); padding:4px 10px; border-radius:20px; border:1px solid rgba(227,28,28,0.2); }
  .calorie-hero { background:linear-gradient(135deg,var(--dark),var(--charcoal)); border:1px solid var(--border); border-radius:16px; padding:22px; text-align:center; margin-bottom:14px; }
  .calorie-label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-family:'DM Mono',monospace; margin-bottom:6px; }
  .calorie-number { font-family:'Bebas Neue',sans-serif; font-size:72px; color:var(--red); line-height:1; letter-spacing:2px; }
  .calorie-unit { font-size:14px; color:var(--muted); margin-top:2px; }
  .macro-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
  .macro-card { background:var(--charcoal); border:1px solid var(--border); border-radius:12px; padding:14px 10px; text-align:center; }
  .macro-emoji { font-size:18px; margin-bottom:5px; }
  .macro-value { font-family:'Bebas Neue',sans-serif; font-size:26px; line-height:1; margin-bottom:2px; }
  .macro-name { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
  .breakdown-card { background:var(--charcoal); border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:14px; }
  .breakdown-title { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-family:'DM Mono',monospace; margin-bottom:12px; }
  .breakdown-item { display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--border); font-size:13px; }
  .breakdown-item:last-child { border-bottom:none; }
  .breakdown-food { color:var(--light); flex:1; padding-right:12px; }
  .breakdown-kcal { font-family:'DM Mono',monospace; font-size:12px; color:var(--red); }
  .save-btn { width:100%; background:var(--green); color:var(--black); border:none; border-radius:12px; padding:15px; font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; cursor:pointer; margin-bottom:10px; font-weight:700; }
  .reset-btn { width:100%; background:transparent; color:var(--muted); border:1px solid var(--border); border-radius:12px; padding:13px; font-family:inherit; font-size:13px; cursor:pointer; }
  .save-success { background:rgba(62,207,142,0.1); border:1px solid rgba(62,207,142,0.3); border-radius:10px; padding:12px; text-align:center; font-size:13px; color:var(--green); display:none; margin-bottom:10px; }
  .error-card { display:none; background:rgba(255,60,60,0.08); border:1px solid rgba(255,60,60,0.25); border-radius:12px; padding:16px; font-size:13px; color:#ff8080; text-align:center; margin-bottom:14px; }
  #diaryPanel { display:none; }
  .diary-day { background:var(--charcoal); border:1px solid var(--border); border-radius:14px; margin-bottom:10px; overflow:hidden; }
  .diary-day-header { padding:12px 16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); background:var(--dark); }
  .diary-day-title { font-size:13px; font-weight:600; }
  .diary-day-kcal { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--red); }
  .diary-entry { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-bottom:1px solid var(--border); font-size:12px; }
  .diary-entry:last-child { border-bottom:none; }
  .diary-food { color:var(--light); flex:1; }
  .diary-macros { font-size:10px; color:var(--muted); font-family:'DM Mono',monospace; margin-right:12px; }
  .diary-kcal { font-family:'DM Mono',monospace; font-size:12px; color:var(--red); }
  .diary-loading { text-align:center; padding:30px; color:var(--muted); font-size:13px; }
  /* PHASE 4 DAILY TRACKING */
  #dailyPanel { display:none; }
  .tracking-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
  .tracking-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; }
  .tracking-icon { font-size:24px; margin-bottom:8px; }
  .tracking-lbl { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-family:'DM Mono',monospace; margin-bottom:4px; }
  .tracking-value { font-family:'Bebas Neue',sans-serif; font-size:28px; line-height:1; margin-bottom:2px; }
  .tracking-target { font-size:10px; color:var(--muted); margin-bottom:10px; }
  .track-bar { height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-bottom:12px; }
  .track-bar-fill { height:100%; border-radius:2px; transition:width 0.5s ease; }
  .track-input-row { display:flex; gap:8px; }
  .track-input { flex:1; background:var(--charcoal); border:1px solid var(--border); border-radius:8px; padding:9px 10px; color:var(--white); font-family:inherit; font-size:13px; outline:none; }
  .track-input:focus { border-color:var(--red); }
  .track-save-btn { background:var(--green); color:var(--black); border:none; border-radius:8px; padding:9px 14px; font-family:'Bebas Neue',sans-serif; font-size:14px; cursor:pointer; font-weight:700; white-space:nowrap; }
  .habits-progress-bar { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:14px; }
  .habits-ring { position:relative; width:48px; height:48px; flex-shrink:0; }
  .habits-ring svg { transform:rotate(-90deg); }
  .habits-ring-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:14px; color:var(--green); }
  .habits-ring-text h4 { font-size:13px; font-weight:600; margin-bottom:2px; }
  .habits-ring-text p { font-size:11px; color:var(--muted); }
  .habit-row { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:11px; padding:13px 14px; margin-bottom:8px; cursor:pointer; transition:border-color 0.2s; user-select:none; }
  .habit-row:hover { border-color:rgba(227,28,28,0.4); }
  .habit-row.done { border-color:rgba(62,207,142,0.4); background:rgba(62,207,142,0.05); }
  .habit-check { width:22px; height:22px; border:2px solid var(--border); border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px; transition:all 0.2s; }
  .habit-row.done .habit-check { background:var(--green); border-color:var(--green); color:var(--black); }
  .habit-info { flex:1; }
  .habit-name { font-size:13px; font-weight:600; }
  .habit-desc { font-size:11px; color:var(--muted); margin-top:2px; }
  /* PT */
  #ptPanel { display:none; }
  .admin-badge { display:inline-flex; align-items:center; gap:6px; background:var(--red-glow); border:1px solid rgba(227,28,28,0.3); border-radius:20px; padding:4px 12px; margin-bottom:16px; }
  .admin-badge-text { font-size:10px; font-family:'DM Mono',monospace; color:var(--red); letter-spacing:1px; }
  .stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
  .stat-tile { background:var(--card); border:1px solid var(--border); border-radius:11px; padding:12px 8px; text-align:center; }
  .stat-n { font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--red); line-height:1; }
  .stat-l { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; font-family:'DM Mono',monospace; margin-top:2px; }
  .client-row { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:8px; display:flex; align-items:center; gap:12px; }
  .client-av { width:36px; height:36px; background:var(--dark); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; border:1.5px solid var(--border); flex-shrink:0; }
  .client-info { flex:1; }
  .client-name { font-size:13px; font-weight:600; margin-bottom:2px; }
  .client-sub { font-size:10px; color:var(--muted); }
  .client-kcal { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--red); }
  .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .dot.g { background:var(--green); }
  .dot.a { background:var(--amber); }
  .dot.r { background:var(--red); box-shadow:0 0 6px rgba(227,28,28,0.5); }
  footer { text-align:center; padding-top:20px; border-top:1px solid var(--border); }
  footer img { height:28px; width:auto; object-fit:contain; opacity:0.6; }
  footer p { font-size:11px; color:var(--muted); margin-top:6px; }
  .disclaimer { text-align:center; font-size:11px; color:var(--muted); padding:0 10px; line-height:1.6; margin-bottom:16px; }

  /* PHASE 5: PROFILE */
  #profilePanel { display:none; }
  .profile-avatar { width:72px; height:72px; background:var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:32px; color:white; margin:0 auto 16px; }
  .profile-name { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:1px; text-align:center; margin-bottom:4px; }
  .profile-goal-badge { display:inline-block; padding:4px 14px; border-radius:20px; font-size:11px; font-family:'DM Mono',monospace; letter-spacing:1px; text-transform:uppercase; margin-bottom:20px; }
  .goal-fat_loss { background:rgba(240,168,78,0.15); color:var(--amber); border:1px solid rgba(240,168,78,0.3); }
  .goal-muscle { background:rgba(78,201,240,0.15); color:var(--blue); border:1px solid rgba(78,201,240,0.3); }
  .goal-maintenance { background:rgba(62,207,142,0.15); color:var(--green); border:1px solid rgba(62,207,142,0.3); }
  .targets-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px; }
  .target-tile { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }
  .target-tile-val { font-family:'Bebas Neue',sans-serif; font-size:32px; line-height:1; margin-bottom:2px; }
  .target-tile-lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-family:'DM Mono',monospace; }
  .weight-log-row { display:flex; gap:8px; margin-bottom:16px; }
  .weight-log-input { flex:1; background:var(--charcoal); border:1px solid var(--border); border-radius:10px; padding:12px 14px; color:var(--white); font-family:inherit; font-size:14px; outline:none; }
  .weight-log-input:focus { border-color:var(--red); }
  .weight-log-btn { background:var(--red); color:white; border:none; border-radius:10px; padding:12px 20px; font-family:'Bebas Neue',sans-serif; font-size:16px; cursor:pointer; white-space:nowrap; }
  .weight-history { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
  .weight-row { display:flex; justify-content:space-between; align-items:center; padding:11px 16px; border-bottom:1px solid var(--border); font-size:13px; }
  .weight-row:last-child { border-bottom:none; }
  .weight-date { color:var(--muted); font-size:12px; }
  .weight-val { font-family:'Bebas Neue',sans-serif; font-size:20px; color:var(--red); }
  .weight-change { font-size:11px; font-family:'DM Mono',monospace; }
  .weight-up { color:var(--pink); }
  .weight-down { color:var(--green); }

  /* PT Set Targets */
  .pt-targets-form { background:var(--charcoal); border:1px solid var(--border); border-radius:12px; padding:18px; margin-top:14px; }
  .pt-targets-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
  .pt-targets-field label { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-family:'DM Mono',monospace; margin-bottom:5px; display:block; }
  .pt-targets-field input, .pt-targets-field select { width:100%; background:var(--dark); border:1px solid var(--border); border-radius:8px; padding:10px 12px; color:var(--white); font-family:inherit; font-size:13px; outline:none; }
  .pt-targets-field input:focus, .pt-targets-field select:focus { border-color:var(--red); }
  .pt-save-targets-btn { width:100%; background:var(--red); color:white; border:none; border-radius:10px; padding:12px; font-family:'Bebas Neue',sans-serif; font-size:16px; cursor:pointer; letter-spacing:1px; }
  .pt-save-success { background:rgba(62,207,142,0.1); border:1px solid rgba(62,207,142,0.3); border-radius:8px; padding:10px; text-align:center; font-size:13px; color:var(--green); display:none; margin-top:10px; }


  /* PHASE 6: ONBOARDING + NUTRITION GUIDE */
  .onboarding-overlay { position:fixed;top:0;left:0;right:0;bottom:0;background:#0a0a0a;z-index:99999;overflow-y:auto;padding:24px 20px 40px; }
  .onboarding-logo { text-align:center;margin-bottom:24px; }
  .onboarding-logo img { height:60px;width:auto; }
  .onboarding-step { display:none; }
  .onboarding-step.active { display:block; }
  .onboarding-card { background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:16px; }
  .onboarding-title { font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:1px;color:var(--white);margin-bottom:8px;line-height:1.1; }
  .onboarding-subtitle { font-size:13px;color:var(--muted);font-family:'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px; }
  .onboarding-body { font-size:14px;color:var(--light);line-height:1.7; }
  .onboarding-body p { margin-bottom:14px; }
  .onboarding-body strong { color:var(--white); }
  .onboarding-rule { display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border); }
  .onboarding-rule:last-child { border-bottom:none; }
  .onboarding-rule-icon { font-size:18px;flex-shrink:0;margin-top:2px; }
  .onboarding-rule-text { font-size:13px;color:var(--light);line-height:1.6; }
  .onboarding-macro-row { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0; }
  .onboarding-macro-tile { background:var(--dark);border:1px solid var(--border);border-radius:10px;padding:14px 8px;text-align:center; }
  .onboarding-macro-val { font-family:'Bebas Neue',sans-serif;font-size:28px;line-height:1; }
  .onboarding-macro-lbl { font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-family:'DM Mono',monospace;margin-top:4px; }
  .onboarding-macro-pct { font-size:11px;margin-top:2px;height:16px;overflow:hidden; }
  .food-group { margin-bottom:16px; }
  .food-group-title { font-size:12px;font-family:'DM Mono',monospace;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:8px; }
  .food-tags { display:flex;flex-wrap:wrap;gap:6px; }
  .food-tag { background:var(--dark);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--light); }
  .onboarding-progress { display:flex;gap:6px;justify-content:center;margin-bottom:24px; }
  .onboarding-dot { width:8px;height:8px;border-radius:50%;background:var(--border);transition:background 0.3s; }
  .onboarding-dot.active { background:var(--red); }
  .onboarding-btn { width:100%;background:var(--red);color:white;border:none;border-radius:12px;padding:16px;font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;cursor:pointer;margin-top:8px; }
  .onboarding-skip { text-align:center;margin-top:12px;font-size:12px;color:var(--muted);cursor:pointer;text-decoration:underline; }
  /* FAQ / Help section */
  .faq-section { margin-top:24px;padding-bottom:8px; }
  .faq-category { margin-bottom:6px; }
  .faq-category-header { display:flex;justify-content:space-between;align-items:center;width:100%;padding:13px 14px;background:var(--card);border:1px solid var(--border);border-radius:10px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--white);text-align:left; }
  .faq-category-header.open { border-radius:10px 10px 0 0; }
  .faq-arrow { color:var(--muted);transition:transform 0.2s;font-style:normal; }
  .faq-category-header.open .faq-arrow { transform:rotate(180deg); }
  .faq-items { display:none;border:1px solid var(--border);border-top:none;border-radius:0 0 10px 10px;overflow:hidden; }
  .faq-items.open { display:block; }
  .faq-item { padding:12px 14px;background:var(--dark);border-top:1px solid var(--border); }
  .faq-item:first-child { border-top:none; }
  .faq-q { font-size:13px;font-weight:600;color:var(--white);margin-bottom:5px; }
  .faq-a { font-size:13px;color:var(--light);line-height:1.6; }

  /* NUTRITION GUIDE TAB */
  #nutritionPanel { display:none; }
  .nutrition-section { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:14px; }
  .nutrition-section-title { font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;margin-bottom:12px;color:var(--white); }
  .nutrition-body { font-size:13px;color:var(--light);line-height:1.7; }
  .nutrition-body p { margin-bottom:12px; }
  .tip-row { display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--light);line-height:1.5; }
  .tip-row:last-child { border-bottom:none; }
  .tip-icon { flex-shrink:0;font-size:16px; }

  /* ARTICLES FEED */
  .articles-section { margin-top:24px; }
  .article-card { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:10px; }
  .article-tag { font-size:10px;font-family:'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:var(--red);margin-bottom:6px; }
  .article-title { font-size:15px;font-weight:600;color:var(--white);margin-bottom:4px;line-height:1.3; }
  .article-preview { font-size:12px;color:var(--muted);line-height:1.5; }
  .article-date { font-size:11px;color:var(--muted);margin-top:8px;font-family:'DM Mono',monospace; }


  /* PHASE 7: FOOD SEARCH + BARCODE */
  .log-mode-tabs { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:20px; }
  .log-mode-btn { padding:10px 6px;border-radius:10px;border:1px solid var(--border);background:var(--charcoal);color:var(--muted);font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;text-align:center;transition:all 0.2s; }
  .log-mode-btn.active { background:var(--red);color:white;border-color:var(--red); }
  .food-search-wrap { display:none; }
  .food-search-wrap.active { display:block; }
  .food-search-bar { display:flex;gap:8px;margin-bottom:14px; }
  .food-search-input { flex:1;background:var(--charcoal);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--white);font-family:inherit;font-size:14px;outline:none; }
  .food-search-input:focus { border-color:var(--red); }
  .food-search-btn { background:var(--red);color:white;border:none;border-radius:10px;padding:12px 16px;font-family:'Bebas Neue',sans-serif;font-size:16px;cursor:pointer;white-space:nowrap; }
  .food-result { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:8px;cursor:pointer;transition:border-color 0.2s; }
  .food-result:hover { border-color:var(--red); }
  .food-result.selected { border-color:var(--red);background:rgba(227,28,28,0.06); }
  .food-result-name { font-size:13px;font-weight:600;color:var(--white);margin-bottom:4px; }
  .food-result-brand { font-size:11px;color:var(--muted);margin-bottom:6px; }
  .food-result-macros { display:flex;gap:10px;font-size:11px;font-family:'DM Mono',monospace; }
  .food-result-macros span { color:var(--muted); }
  .food-result-macros span strong { color:var(--light); }
  .food-portion-wrap { background:var(--card);border:1px solid var(--red);border-radius:12px;padding:16px;margin-top:10px;display:none; }
  .food-portion-wrap.active { display:block; }
  .food-portion-title { font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-family:'DM Mono',monospace;margin-bottom:12px; }
  .food-portion-row { display:flex;gap:8px;align-items:center;margin-bottom:12px; }
  .food-portion-input { width:90px;background:var(--dark);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--white);font-family:inherit;font-size:16px;font-weight:700;outline:none;text-align:center; }
  .food-portion-input:focus { border-color:var(--red); }
  .food-portion-unit { font-size:13px;color:var(--muted); }
  .food-portion-preview { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px; }
  .food-portion-tile { background:var(--dark);border-radius:8px;padding:8px 6px;text-align:center; }
  .food-portion-val { font-family:'Bebas Neue',sans-serif;font-size:20px;line-height:1; }
  .food-portion-lbl { font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px; }
  .food-add-btn { width:100%;background:var(--red);color:white;border:none;border-radius:10px;padding:12px;font-family:'Bebas Neue',sans-serif;font-size:18px;cursor:pointer;letter-spacing:1px; }
  .portion-preset { background:var(--dark);border:1px solid var(--border);border-radius:7px;padding:6px 10px;font-size:12px;color:var(--muted);cursor:pointer;font-family:'DM Mono',monospace;transition:all 0.15s; }
  .portion-preset:active,.portion-preset.active { background:var(--charcoal);border-color:var(--red);color:var(--white); }
  .food-search-empty { text-align:center;padding:32px;color:var(--muted);font-size:13px; }
  .custom-meal-wrap { display:none; }
  .custom-meal-wrap.active { display:block; }
  .cm-ingredient { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px; }
  .cm-ingredient-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
  .cm-ingredient-name { font-size:13px;font-weight:600;flex:1;margin-right:8px; }
  .cm-ingredient-del { background:none;border:none;color:var(--red);font-size:16px;cursor:pointer;padding:2px 6px; }
  .cm-ingredient-row { display:flex;align-items:center;gap:8px; }
  .cm-grams-input { width:70px;background:var(--dark);border:1px solid var(--border);border-radius:8px;padding:6px 8px;color:var(--white);font-size:13px;outline:none;text-align:center; }
  .cm-grams-input:focus { border-color:var(--red); }
  .cm-macros { font-size:10px;color:var(--muted);font-family:'DM Mono',monospace;flex:1; }

  /* RECENT FOODS */
  .recent-food-chip { background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer;transition:border-color 0.2s;flex-shrink:0; }
  .recent-food-chip:active { border-color:var(--red);background:rgba(227,28,28,0.06); }
  .recent-food-chip-name { font-size:12px;font-weight:600;color:var(--white);margin-bottom:2px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .recent-food-chip-kcal { font-size:10px;color:var(--muted);font-family:'DM Mono',monospace; }

  /* BARCODE */
  .barcode-wrap { display:none;text-align:center; }
  .barcode-wrap.active { display:block; }
  #barcodeVideo { width:100%;border-radius:12px;background:#000;max-height:260px;object-fit:cover; }
  .barcode-status { font-size:13px;color:var(--muted);margin-top:10px;min-height:20px; }

  /* DIARY EDIT/DELETE/REPEAT */
  .diary-entry-actions { display:flex;gap:5px;margin-left:8px; }
  .diary-action-btn { background:none;border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:10px;cursor:pointer;color:var(--muted);font-family:inherit; }
  .diary-action-btn:hover { border-color:var(--red);color:var(--red); }
  .diary-action-btn.del { color:#ff4444; }
  .diary-action-btn.del:hover { border-color:#ff4444; }
  .repeat-btn { background:rgba(62,207,142,0.1);border:1px solid rgba(62,207,142,0.35);border-radius:6px;padding:3px 9px;font-size:10px;cursor:pointer;color:var(--green);font-family:'DM Mono',monospace;white-space:nowrap;letter-spacing:0.3px; }
  .repeat-btn:active { background:rgba(62,207,142,0.22); }

  /* FOOD SEARCH SECTIONS */
  .search-section-hdr { font-size:9px;letter-spacing:2px;text-transform:uppercase;font-family:'DM Mono',monospace;padding:10px 2px 5px;margin-top:2px; }
  .search-section-hdr--common { color:var(--green); }
  .search-section-hdr--more { color:var(--muted);border-top:1px solid var(--border);padding-top:12px; }
  .food-result.common { border-left:2px solid rgba(62,207,142,0.4); }

  /* MY FOODS / MANUAL FOOD */
  .add-manual-link { display:block;text-align:center;padding:14px 0 4px;font-size:12px;color:var(--muted);cursor:pointer;border:none;background:none;width:100%;font-family:inherit; }
  .add-manual-link span { color:var(--blue);text-decoration:underline;text-underline-offset:3px; }
  .add-manual-link:active span { color:var(--white); }
  .mf-overlay-inner { max-width:520px;margin:0 auto;padding:20px 20px 80px; }
  .mf-sticky-hdr { display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--black);padding-top:4px;z-index:1; }
  .mf-form-label { font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-family:'DM Mono',monospace;margin-bottom:6px;margin-top:16px;display:block; }
  .mf-form-label:first-of-type { margin-top:0; }
  .mf-input { width:100%;background:var(--dark);border:1px solid var(--border);border-radius:10px;padding:13px 14px;color:var(--white);font-size:15px;outline:none;box-sizing:border-box;font-family:inherit; }
  .mf-input:focus { border-color:var(--blue); }
  .mf-macro-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px; }
  .mf-macro-preview { background:var(--dark);border:1px solid var(--border);border-radius:10px;padding:12px;margin-top:16px;display:none; }
  .mf-macro-preview.active { display:block; }
  .mf-preview-row { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px; }
  .mf-preview-tile { text-align:center;flex:1;min-width:54px; }
  .mf-preview-val { font-size:20px;font-weight:700;font-family:'DM Mono',monospace; }
  .mf-preview-lbl { font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px; }
  .mf-btn-row { display:flex;gap:10px;margin-top:20px; }
  .mf-food-card { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:10px; }
  .mf-food-card-name { font-size:14px;font-weight:700;margin-bottom:3px; }
  .mf-food-card-brand { font-size:11px;color:var(--muted);margin-bottom:8px; }
  .mf-food-card-macros { display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--muted);font-family:'DM Mono',monospace;margin-bottom:10px; }
  .mf-food-card-actions { display:flex;gap:7px;align-items:center;flex-wrap:wrap; }
  .mf-gram-input { width:70px;background:var(--dark);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--white);font-size:13px;font-family:'DM Mono',monospace;outline:none;text-align:center; }
  .mf-gram-input:focus { border-color:var(--blue); }
  .search-section-hdr--myfoods { color:var(--blue); }
  .food-result.myfood { border-left:2px solid rgba(78,201,240,0.5); }
  .mf-suggestion-note { background:rgba(255,200,0,0.08);border:1px solid rgba(255,200,0,0.25);border-radius:8px;padding:9px 12px;margin-top:14px;display:none; }
  .mf-suggestion-note.active { display:block; }
  .mf-suggestion-note-text { font-size:11px;color:rgba(255,200,0,0.85);font-family:'DM Mono',monospace;line-height:1.5; }

  /* WEIGHT EDIT/DELETE */
  .weight-row-actions { display:flex;gap:4px; }


  /* PHASE 8: AI MEAL SUGGESTION */
  .ai-suggest-btn { width:100%;background:var(--charcoal);border:1px solid var(--border);border-radius:12px;padding:14px;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;color:var(--light);cursor:pointer;margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:8px;transition:border-color 0.2s; }
  .ai-suggest-btn:hover { border-color:var(--red);color:var(--white); }
  .ai-suggest-modal { display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:9998;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:20px; }
  .ai-suggest-modal.active { display:flex;align-items:flex-start;justify-content:center; }
  .ai-suggest-card { background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;width:100%;max-width:480px;margin-top:40px; }
  .ai-suggest-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px; }
  .ai-suggest-title { font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:1px; }
  .ai-suggest-close { background:none;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:12px;font-family:inherit; }
  .ai-suggest-remaining { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:18px; }
  .ai-suggest-rem-tile { background:var(--dark);border-radius:8px;padding:8px 6px;text-align:center; }
  .ai-suggest-rem-val { font-family:'Bebas Neue',sans-serif;font-size:18px;line-height:1; }
  .ai-suggest-rem-lbl { font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px; }
  .ai-suggest-loading { text-align:center;padding:32px;color:var(--muted);font-size:13px; }
  .ai-suggest-loading .spinner { width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 12px; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .ai-suggest-result { font-size:14px;color:var(--light);line-height:1.7; }
  .ai-suggest-result strong { color:var(--white); }
  .ai-suggest-result p { margin-bottom:12px; }
  .ai-suggest-again { width:100%;background:var(--red);color:white;border:none;border-radius:10px;padding:12px;font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:1px;cursor:pointer;margin-top:16px; }
  .suggest-type-row { display:flex;gap:6px;margin:0 0 14px; }
  .suggest-type-btn { flex:1;padding:7px 4px;border:1px solid var(--border);border-radius:8px;background:var(--dark);color:var(--muted);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s; }
  .suggest-type-btn.active { background:var(--red);border-color:var(--red);color:white; }


  /* =====================================================
     PHASE 9A: RECIPES - SUGGESTED MEALS + MEAL IDEAS
     ===================================================== */

  /* --- Home screen suggested meals section --- */
  .suggested-section { margin-bottom:20px; }
  .suggested-label { font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-family:'DM Mono',monospace;margin-bottom:12px; }
  .recipe-card { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:8px;cursor:pointer;transition:border-color 0.2s; }
  .recipe-card:hover { border-color:var(--red); }
  .recipe-card-top { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px; }
  .recipe-card-title { font-size:14px;font-weight:600;color:var(--white);line-height:1.3;flex:1;margin-right:8px; }
  .recipe-card-kcal { font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--red);white-space:nowrap; }
  .recipe-card-macros { font-size:11px;color:var(--muted);font-family:'DM Mono',monospace;margin-bottom:8px; }
  .recipe-card-tags { display:flex;flex-wrap:wrap;gap:4px; }
  .recipe-tag { background:var(--dark);border:1px solid var(--border);border-radius:10px;padding:2px 8px;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px; }

  /* --- Nutrition page meal ideas section --- */
  .meal-ideas-section { margin-bottom:24px; }
  .meal-type-filter { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px; }
  .meal-type-btn { padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:var(--charcoal);color:var(--muted);font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all 0.2s; }
  .meal-type-btn.active { background:var(--red);color:white;border-color:var(--red); }

  /* --- Recipe detail modal --- */
  .recipe-modal { display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:9997;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:20px; }
  .recipe-modal.active { display:flex;align-items:flex-start;justify-content:center; }
  .recipe-modal-card { background:var(--card);border:1px solid var(--border);border-radius:16px;width:100%;max-width:480px;margin-top:20px; }
  .recipe-modal-img { width:100%;height:auto;display:block;transition:all 0.3s ease; }
  .img-fullscreen { position:fixed;top:0;left:0;width:100vw!important;height:100vh!important;object-fit:contain;z-index:99999;background:#000;border-radius:0;cursor:zoom-out; }
  .recipe-modal-img-placeholder { width:100%;height:120px;background:var(--charcoal);display:flex;align-items:center;justify-content:center;font-size:40px; }
  .recipe-modal-body { padding:20px; }
  .recipe-modal-title { font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:1px;margin-bottom:4px; }
  .recipe-modal-desc { font-size:13px;color:var(--muted);margin-bottom:16px;line-height:1.6; }
  .recipe-modal-macros { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px; }
  .recipe-modal-macro-tile { background:var(--dark);border-radius:8px;padding:10px 6px;text-align:center; }
  .recipe-modal-macro-val { font-family:'Bebas Neue',sans-serif;font-size:22px;line-height:1; }
  .unit { font-family:'DM Mono',monospace; font-size:0.62em; font-weight:400; opacity:0.55; letter-spacing:0; margin-left:1px; vertical-align:baseline; }
  .recipe-modal-macro-lbl { font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:3px; }
  .recipe-modal-section-title { font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-family:'DM Mono',monospace;margin-bottom:10px;margin-top:16px; }
  .recipe-ingredient { display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--light); }
  .recipe-ingredient:last-child { border-bottom:none; }
  .recipe-ingredient::before { content:'';width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0; }
  .recipe-step { display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--light);line-height:1.5; }
  .recipe-step:last-child { border-bottom:none; }
  .recipe-step-num { font-family:'Bebas Neue',sans-serif;font-size:18px;color:var(--red);flex-shrink:0;width:20px; }
  .recipe-modal-close { width:100%;background:var(--charcoal);color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:12px;font-family:inherit;font-size:14px;cursor:pointer;margin-top:16px; }
  .recipe-empty { text-align:center;padding:24px;color:var(--muted);font-size:13px; }

  /* --- PWA Install Banner --- */
  #installBanner { position:fixed;bottom:0;left:0;right:0;z-index:99998;padding:12px 16px 20px;background:var(--charcoal);border-top:1px solid var(--border);transform:translateY(100%);transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);display:none; }
  #installBanner.install-banner-visible { transform:translateY(0); }
  .install-banner-inner { max-width:520px;margin:0 auto;display:flex;align-items:center;gap:12px; }
  .install-banner-icon { width:44px;height:44px;border-radius:10px;flex-shrink:0;object-fit:cover; }
  .install-banner-text { flex:1;min-width:0; }
  .install-banner-title { font-size:13px;font-weight:700;color:var(--white);margin-bottom:2px; }
  #installBannerSub { font-size:11px;color:var(--muted);line-height:1.4; }
  .install-banner-btn { background:var(--red);color:white;border:none;border-radius:8px;padding:9px 16px;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1px;cursor:pointer;flex-shrink:0;transition:opacity 0.2s; }
  .install-banner-btn:hover { opacity:0.85; }
  .install-banner-close { background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 6px;flex-shrink:0;line-height:1; }
  .install-banner-close:hover { color:var(--white); }

  /* --- iOS Install Modal --- */
  #iosInstallModal { display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.75);align-items:flex-end;justify-content:center;padding:0 0 20px; }
  #iosInstallModal.ios-modal-visible { display:flex; }
  .ios-modal-card { background:var(--card);border:1px solid var(--border);border-radius:20px 20px 16px 16px;width:100%;max-width:480px;padding:24px 20px 20px;position:relative; }
  .ios-modal-title { font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1px;margin-bottom:4px; }
  .ios-modal-sub { font-size:12px;color:var(--muted);margin-bottom:20px; }
  .ios-step { display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border); }
  .ios-step:last-of-type { border-bottom:none; }
  .ios-step-icon { width:36px;height:36px;border-radius:8px;background:var(--dark);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
  .ios-step-text { font-size:13px;color:var(--light);line-height:1.4; }
  .ios-step-text strong { color:var(--white); }
  .ios-modal-close { width:100%;margin-top:16px;background:var(--charcoal);color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:12px;font-family:inherit;font-size:14px;cursor:pointer; }

  /* --- First Login Welcome Modal --- */
  #welcomeInstallModal { position:fixed;inset:0;z-index:99999;display:flex;align-items:flex-end;justify-content:center; }
  .welcome-modal-backdrop { position:absolute;inset:0;background:rgba(0,0,0,0.7); }
  .welcome-modal-card { position:relative;background:var(--card);border:1px solid var(--border);border-radius:24px 24px 0 0;width:100%;max-width:520px;padding:28px 20px 36px;animation:slideUp 0.35s cubic-bezier(0.34,1.56,0.64,1); }
  @keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
  .welcome-modal-logo { text-align:center;margin-bottom:16px; }
  .welcome-modal-logo img { height:56px;width:auto;object-fit:contain; }
  .welcome-modal-title { font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:1px;text-align:center;margin-bottom:6px; }
  .welcome-modal-sub { font-size:13px;color:var(--muted);text-align:center;line-height:1.5;margin-bottom:20px; }
  .welcome-step { display:flex;align-items:flex-start;gap:14px;padding:11px 0;border-bottom:1px solid var(--border); }
  .welcome-step:last-child { border-bottom:none; }
  .welcome-step-num { width:26px;height:26px;border-radius:50%;background:var(--red);color:white;font-family:'Bebas Neue',sans-serif;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px; }
  .welcome-step-text { font-size:13px;color:var(--light);line-height:1.5; }
  .welcome-step-text strong { color:var(--white); }
  .welcome-modal-btn { width:100%;background:var(--red);color:white;border:none;border-radius:12px;padding:15px;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:2px;cursor:pointer;margin-top:20px; }
  .welcome-modal-skip { width:100%;background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:10px;margin-top:4px; }