/* ════════════════════════════════════
ROAST PAGES — RDL GLASSMORPHISM
════════════════════════════════════ */
/* dark-roast removed — light mode only */














.roast-glass-card { background:var(--bg-card); border:1px solid var(--border-1);
border-radius:16px; padding:20px; margin-bottom:8px; backdrop-filter:blur(16px); }
.roast-glass-btn { background:rgba(201,68,32,0.05); border:1px solid rgba(201,68,32,0.12);
border-radius:10px; color:var(--text-2); font-family:'JetBrains Mono',monospace; font-weight:500; font-size:11px; padding:10px 16px; cursor:pointer; transition:all
0.2s ease; user-select:none; letter-spacing:1px; text-transform:uppercase; backdrop-filter:blur(8px); }
.roast-glass-btn:hover { background:rgba(201,68,32,0.10); border-color:rgba(201,68,32,0.20); color:var(--accent); }
.roast-glass-btn:disabled { opacity:0.3; cursor:not-allowed; }
.roast-glass-btn.active, .roast-glass-btn.marked { background:rgba(201,68,32,0.10); border-color:rgba(201,68,32,0.25); color:var(--accent); }
.roast-glass-input { background:rgba(255,255,255,0.04); border:1px solid rgba(201,68,32,0.10); border-radius:8px; padding:10px 14px;
color:var(--text-1); font-family:'Space Grotesk',sans-serif; font-size:14px; outline:none;
transition:border-color 0.2s, box-shadow 0.2s; }
.roast-glass-input:focus { border-color:var(--accent); background:rgba(255,255,255,0.04); box-shadow:0 0 0 3px rgba(201,68,32,0.06); }
.roast-glass-input::placeholder { color:var(--text-3); }
.roast-glass-input option { background:#0A0B0E; color:var(--text-1); }
.charge-btn { width:100%; padding:14px; margin-top:12px; font-size:15px; letter-spacing:2px; background:rgba(224,90,58,0.15); border-
color:rgba(224,90,58,0.30); color:var(--accent); }
.charge-btn:hover { background:rgba(224,90,58,0.22); }
.origin-preset-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.origin-btn { font-size:12px; padding:8px 14px; }
.origin-btn.active { background:rgba(212,148,14,0.12); border-color:rgba(212,148,14,0.25); color:var(--gold); }
.target-strip { font-size:11px; color:var(--text-3); padding:8px 0; margin-bottom:8px; border-bottom:1px solid var(--border-subtle); }
.roast-timer { font-family:'Outfit',sans-serif; font-weight:200; font-size:56px; color:var(--accent); text-shadow:none; letter-spacing:2px; }
.roast-timer-sub { font-size:12px; color:var(--text-3); margin-top:2px; }
.roast-phase-bar { display:flex; height:6px; border-radius:3px; overflow:hidden; background:rgba(201,68,32,0.06); margin:12px 0 4px; }
.rpb-seg { display:flex; align-items:center; justify-content:center; font-size:0; transition:flex 0.3s; min-width:0; }
.rpb-seg span { font-size:9px; color:var(--text-3); white-space:nowrap; overflow:hidden; }
.rpb-drying { background:rgba(53,116,212,0.25); }
.rpb-maillard { background:rgba(212,148,14,0.30); }
.rpb-dev { background:rgba(224,90,58,0.35); }
.roast-graph-wrap { background:var(--bg-card); border:1px solid var(--border-1);
border-radius:14px; padding:12px; margin:12px 0; backdrop-filter:blur(16px); }
.roast-graph-canvas { width:100%; height:220px; display:block; border-radius:8px; }
.ms-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin:8px 0; }
.ms-glass-btn { min-height:56px; padding:10px 8px; text-align:center; border-radius:12px; }
.ms-glass-btn .ms-label { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; }
.ms-glass-btn .ms-data { font-size:12px; margin-top:4px; color:var(--text-3); }
.ms-glass-btn.marked { background:rgba(212,148,14,0.08); border-color:rgba(212,148,14,0.20); color:var(--gold); }
.ms-glass-btn.marked .ms-data { color:var(--gold); }
.roast-controls-row { display:flex; gap:6px; margin:8px 0; }
.adj-glass-btn { background:rgba(201,68,32,0.04); border:1px solid rgba(201,68,32,0.10); border-
radius:8px; padding:8px 14px; font-size:13px; min-width:44px; text-align:center; cursor:pointer; color:var(--text-2); font-family:'JetBrains Mono',monospace; font-
weight:500; transition:all 0.2s ease; }
.adj-glass-btn:hover { background:rgba(201,68,32,0.08); color:var(--accent); }
.ref-strip { font-size:11px; color:var(--text-3); padding:6px 0; border-top:1px solid var(--border-subtle); margin-top:8px; }
.roast-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.rf-field { display:flex; flex-direction:column; gap:4px; }
.rf-wide { grid-column:1/-1; }
.rf-label { font-size:9px; font-weight:500; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-3); font-family:'JetBrains Mono',monospace; }
.rf-input {
padding:10px 14px; border:1px solid rgba(201,68,32,0.10); border-radius:8px;
font-family:'Space Grotesk',sans-serif; font-size:14px; color:var(--text-1);
background:rgba(255,255,255,0.04); outline:none; transition:border-color 0.2s, box-shadow 0.2s;
}
.rf-input:focus { border-color:var(--accent); background:rgba(255,255,255,0.04); box-shadow:0 0 0 3px rgba(201,68,32,0.06); }
.rf-input::placeholder { color:var(--text-3); }
.rf-input option { background:#0A0B0E; color:var(--text-1); }
select.rf-input { appearance:none; padding:10px 14px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C94420' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}
textarea.rf-input { padding:10px 14px; resize:vertical; }
.rf-input-lg { font-family:'Outfit',sans-serif; font-size:28px; font-weight:200; text-align:center; padding:12px 0; }
.rf-calc { font-size:13px; color:var(--text-3); margin-top:2px; }
.rf-profile-btns { display:flex; gap:8px; flex-wrap:wrap; }
.rf-profile-btn {
padding:8px 16px; border:1.5px solid var(--border-1); border-radius:8px;
font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:500;
background:transparent; color:var(--text-2); cursor:pointer; transition:all 0.15s;
}
.rf-profile-btn:hover { border-color:rgba(201,68,32,0.18); color:var(--text-1); }
.rf-profile-btn.active { border-color:rgba(201,68,32,0.22); background:rgba(201,68,32,0.06); color:var(--accent); font-weight:600; }
.hist-row { cursor:pointer; }
.hist-row:hover td { background:rgba(201,68,32,0.03) !important; }
.hist-detail { background:rgba(255,255,255,0.03); }
@media(max-width:640px) { .roast-controls-row{flex-direction:column;} .ms-row{grid-template-columns:1fr;} .roast-timer{font-size:40px;} .roast-graph-
canvas{height:180px;} .roast-form-grid{grid-template-columns:1fr;} }


/* ── Per-Page Background Imagery (Phase 3) ── */
/* Background imagery removed for light mode */

/* ── ROASTER 3D BACKGROUND ── */
#roaster-bg { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; pointer-events:none; display:none; }
#roaster-bg-canvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; }
body.roaster-bg-active #roaster-bg { display:block !important; z-index:1 !important; }
body.roaster-bg-active #roaster-bg-canvas { z-index:1 !important; }

/* ═══════════════════════════════════════════
   GIESEN W6 FULL-SCREEN HUD
═══════════════════════════════════════════ */

/* ── Full-screen takeover when roast page active ── */
body.roaster-bg-active { background:var(--hud-bg) !important; }
body.roaster-bg-active .sidebar { display:none !important; }
body.roaster-bg-active .main { margin-left:0 !important; }
body.roaster-bg-active .mobile-menu-btn { display:none !important; }
body.roaster-bg-active .main {
  position:fixed !important; inset:0 !important;
  width:100vw !important; height:100vh !important;
  overflow:hidden !important; background:transparent !important;
  z-index:10 !important; margin:0 !important; padding:0 !important;
}
body.roaster-bg-active .main::before { display:none !important; }
body.roaster-bg-active .main::after { display:none !important; }
body.roaster-bg-active #page-roast-active { position:fixed !important; inset:0; overflow:hidden; width:100vw; height:100vh; background:transparent !important; }
body.roaster-bg-active #page-roast-active .page-header { display:none !important; }
body.roaster-bg-active #page-roast-active .content { padding:0 !important; height:100vh; overflow:hidden; background:transparent !important; }
#roastHudWrapper { background:transparent; }
body.roaster-bg-active select option { background:#1a1a1e; color:var(--hud-cream); }

/* ── HUD Overlay Layers ── */
.hud-ov { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.hud-grid { z-index:3; background-image:linear-gradient(var(--hud-grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--hud-grid-color) 1px,transparent 1px); background-size:50px 50px; }
.hud-orb { z-index:3; border-radius:50%; animation:hud-op 4s ease-in-out infinite alternate; }
.hud-orb1 { top:42%; left:52%; transform:translate(-50%,-50%); width:min(700px,90vw); height:min(700px,90vw); background:radial-gradient(circle,rgba(232,69,48,0.10) 0%,rgba(184,32,32,0.05) 40%,transparent 70%); }
.hud-orb2 { top:55%; left:48%; transform:translate(-50%,-50%); width:min(450px,60vw); height:min(450px,60vw); background:radial-gradient(circle,rgba(232,69,48,0.08) 0%,transparent 55%); animation-delay:2s; }
@keyframes hud-op { 0%{opacity:.6;transform:translate(-50%,-50%) scale(1)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1.1)} }
.hud-scan { z-index:4; background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.015) 3px,rgba(0,0,0,0.015) 6px); }
.hud-vig { z-index:4; background:radial-gradient(ellipse at center,transparent 45%,rgba(10,8,6,0.65) 100%); }

/* ── Corner Brackets ── */
.hud-cr { position:fixed; width:32px; height:32px; z-index:11; pointer-events:none; }
.hud-cr::before,.hud-cr::after { content:''; position:absolute; background:rgba(232,69,48,0.2); }
.hud-ctl { top:max(16px, env(safe-area-inset-top, 16px)); left:max(16px, env(safe-area-inset-left, 16px)); } .hud-ctl::before { top:0; left:0; width:16px; height:1px; } .hud-ctl::after { top:0; left:0; width:1px; height:16px; }
.hud-ctr { top:max(16px, env(safe-area-inset-top, 16px)); right:max(16px, env(safe-area-inset-right, 16px)); } .hud-ctr::before { top:0; right:0; width:16px; height:1px; } .hud-ctr::after { top:0; right:0; width:1px; height:16px; }
.hud-cbl { bottom:max(16px, env(safe-area-inset-bottom, 16px)); left:max(16px, env(safe-area-inset-left, 16px)); } .hud-cbl::before { bottom:0; left:0; width:16px; height:1px; } .hud-cbl::after { bottom:0; left:0; width:1px; height:16px; }
.hud-cbr { bottom:max(16px, env(safe-area-inset-bottom, 16px)); right:max(16px, env(safe-area-inset-right, 16px)); } .hud-cbr::before { bottom:0; right:0; width:16px; height:1px; } .hud-cbr::after { bottom:0; right:0; width:1px; height:16px; }

/* ── Floating Particles ── */
.hud-hp { position:fixed; width:2px; height:2px; border-radius:50%; z-index:5; pointer-events:none; opacity:0; animation:hud-ri 5s linear infinite; }
.hud-hp.r { background:var(--hud-hot); } .hud-hp.d { background:var(--hud-deep); } .hud-hp.a { background:var(--hud-accent); }
@keyframes hud-ri { 0%{opacity:0;transform:translateY(0)} 8%{opacity:.55} 85%{opacity:.55} 100%{opacity:0;transform:translateY(-180px) translateX(20px)} }

/* ── HUD Frame (top + bottom bars) ── */
.hud-frame { position:fixed; top:0; left:0; width:100%; height:100%; z-index:12; pointer-events:none; padding:28px 32px; display:flex; flex-direction:column; justify-content:space-between; }
.hud-top { display:flex; justify-content:space-between; align-items:flex-start; }
.hud-bottom { display:flex; justify-content:space-between; align-items:flex-end; }

/* ── Brand ── */
.hud-brand { display:flex; align-items:center; gap:12px; }
.hud-brand-logo { height:36px; width:auto; opacity:0.85; filter:drop-shadow(0 0 6px rgba(212,135,74,0.15)); transition:opacity 0.3s; }
.hud-brand:hover .hud-brand-logo { opacity:1; }
.hud-brand-text { display:flex; flex-direction:column; gap:1px; }
.hud-title { font-family:'Syne',sans-serif; font-size:18px; font-weight:700; letter-spacing:3px; text-transform:uppercase; line-height:1.2; color:var(--hud-cream); }
.hud-subtitle { font-size:8px; color:var(--hud-dim); letter-spacing:3px; text-transform:uppercase; font-family:'JetBrains Mono',monospace; }

/* ── Pills ── */
.hud-pills { display:flex; gap:10px; }
.hud-pill { padding:5px 14px; border:1px solid var(--hud-border); border-radius:20px; font-size:10px; font-family:'JetBrains Mono',monospace; color:var(--hud-dim); background:var(--hud-card); backdrop-filter:blur(12px); display:flex; align-items:center; gap:7px; }
.hud-dot { width:5px; height:5px; border-radius:50%; animation:hud-bl 1.2s ease-in-out infinite; }
.hud-dot.live { background:#ff3b20; box-shadow:0 0 8px rgba(255,59,32,0.6); }
.hud-dot.hot { background:var(--hud-hot); }
.hud-dot.bright { background:var(--hud-bright); box-shadow:0 0 6px rgba(240,160,92,0.4); }
.hud-dot.amb { background:var(--hud-accent); }
@keyframes hud-bl { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Meta & Watermark ── */
.hud-meta { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--hud-dim); line-height:2; }
.hud-meta span { color:var(--hud-bright); }
.hud-meta .ht { color:var(--hud-hot); }
.hud-watermark { font-family:'JetBrains Mono',monospace; font-size:8px; color:rgba(212,135,74,0.12); letter-spacing:5px; text-transform:uppercase; text-align:right; line-height:2.2; }

/* ── Left / Right Columns ── */
.hud-left { position:fixed; left:32px; top:50%; transform:translateY(-50%); z-index:12; pointer-events:none; display:flex; flex-direction:column; gap:14px; }
.hud-right { position:fixed; right:32px; top:50%; transform:translateY(-50%); z-index:12; pointer-events:none; display:flex; flex-direction:column; gap:14px; max-width:220px; }

/* ── Telemetry Cards ── */
.hud-tc { padding:12px 16px; border:1px solid var(--hud-border); border-radius:10px; background:var(--hud-card); backdrop-filter:blur(14px); min-width:130px; }
.hud-tc-interactive { pointer-events:all; }
.hud-tla { font-size:8px; letter-spacing:2.5px; text-transform:uppercase; color:var(--hud-dim); font-family:'JetBrains Mono',monospace; margin-bottom:5px; }
.hud-tv { font-family:'Outfit',sans-serif; font-size:26px; font-weight:200; line-height:1; color:var(--hud-cream); }
.hud-tv.hot { color:var(--hud-hot); }
.hud-tv.crit { color:#ff3b20; text-shadow:0 0 12px rgba(255,59,32,0.3); }
.hud-tv.amb { color:var(--hud-bright); }
.hud-tv.off { color:rgba(232,213,184,0.2); font-size:18px; }
.hud-u { font-size:10px; color:var(--hud-dim); margin-left:2px; font-weight:400; }
.hud-tv-row { display:flex; align-items:center; gap:8px; }

/* ── Adjustment Buttons & Inputs ── */
.hud-adj-btn { pointer-events:all; width:32px; height:28px; border:1px solid var(--hud-border); border-radius:6px; background:var(--hud-card); color:var(--hud-cream); font-size:14px; cursor:pointer; display:grid; place-items:center; font-family:'JetBrains Mono',monospace; backdrop-filter:blur(8px); transition:background 0.2s, border-color 0.2s; }
.hud-adj-btn:hover { background:rgba(212,135,74,0.12); border-color:var(--hud-accent); }
.hud-adj-btn:active { background:rgba(212,135,74,0.20); }
.hud-input { pointer-events:all; background:rgba(212,135,74,0.06); border:1px solid var(--hud-border); border-radius:6px; color:var(--hud-cream); font-family:'JetBrains Mono',monospace; font-size:13px; padding:6px 10px; outline:none; width:100%; }
.hud-input:focus { border-color:var(--hud-accent); background:rgba(212,135,74,0.10); }
.hud-input::placeholder { color:rgba(232,213,184,0.2); }

/* ── Phase Card ── */
.hud-phase-card { padding:14px 16px; border:1px solid rgba(232,69,48,0.15); border-radius:10px; background:rgba(232,69,48,0.04); backdrop-filter:blur(14px); }
.hud-phase-name { font-family:'Outfit',sans-serif; font-size:18px; font-weight:300; color:var(--hud-hot); margin-top:4px; }
.hud-timer { font-family:'JetBrains Mono',monospace; font-size:28px; font-weight:200; color:var(--hud-cream); margin-top:6px; }
.hud-phase-bar { width:100%; height:3px; background:rgba(232,213,184,0.08); border-radius:2px; margin-top:8px; overflow:hidden; }
.hud-phase-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--hud-accent),var(--hud-hot),var(--hud-deep)); transition:width 0.5s ease; }
.hud-phase-detail { display:flex; justify-content:space-between; margin-top:8px; font-family:'JetBrains Mono',monospace; font-size:8px; color:var(--hud-dim); letter-spacing:0.5px; }

/* ── Curve Card (graph) ── */
.hud-curve-card { padding:10px 12px; border:1px solid var(--hud-border); border-radius:10px; background:var(--hud-card); backdrop-filter:blur(14px); }
.hud-curve-card .roast-graph-wrap { width:100%; height:140px; background:transparent !important; border:none !important; border-radius:0; padding:0; margin:4px 0 0; }
.hud-curve-card .roast-graph-canvas { width:100%; height:140px; }

/* ── Milestone Buttons ── */
.hud-milestones { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; pointer-events:all; }
.hud-ms-btn { pointer-events:all; padding:10px 12px; border:1px solid var(--hud-border); border-radius:10px; background:var(--hud-card); backdrop-filter:blur(14px); cursor:pointer; text-align:center; transition:all 0.2s; color:var(--hud-cream); }
.hud-ms-btn:hover:not(:disabled) { background:rgba(212,135,74,0.08); border-color:var(--hud-accent); }
.hud-ms-btn:disabled { opacity:0.3; cursor:default; }
.hud-ms-btn.marked { background:rgba(232,69,48,0.10); border-color:rgba(232,69,48,0.25); }
.hud-ms-label { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--hud-dim); font-family:'JetBrains Mono',monospace; margin-bottom:4px; }
.hud-ms-data { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--hud-bright); font-weight:500; }

/* ── Action Log ── */
.hud-log-panel { position:fixed; bottom:70px; left:50%; transform:translateX(-50%); z-index:13; pointer-events:all; width:340px; max-width:90vw; }
.hud-log-toggle { text-align:center; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--hud-dim); cursor:pointer; padding:6px 16px; border:1px solid var(--hud-border); border-radius:10px 10px 0 0; background:var(--hud-card); backdrop-filter:blur(14px); }
.hud-log-toggle:hover { color:var(--hud-bright); }
.hud-log-content { max-height:0; overflow:hidden; transition:max-height 0.3s ease; background:rgba(10,8,6,0.90); border:1px solid var(--hud-border); border-top:none; border-radius:0 0 10px 10px; padding:0 12px; font-size:11px; line-height:1.8; color:var(--hud-dim); font-family:'JetBrains Mono',monospace; backdrop-filter:blur(14px); }
.hud-log-panel.expanded .hud-log-content { max-height:180px; overflow-y:auto; padding:10px 12px; }
.hud-log-panel.expanded .hud-log-toggle { border-bottom:none; }
.hud-log-content div span { color:var(--hud-bright) !important; font-family:'JetBrains Mono',monospace !important; }

/* ── Setup Overlay ── */
.hud-setup-overlay { position:fixed; inset:0; z-index:12; display:flex; align-items:center; justify-content:center; pointer-events:none; padding:20px; }
.hud-setup-card { pointer-events:all; max-width:480px; width:100%; max-height:85vh; overflow-y:auto; padding:28px 24px; border:1px solid var(--hud-border); border-radius:14px; background:rgba(10,8,6,0.88); backdrop-filter:blur(20px); color:var(--hud-cream); }
.hud-setup-card::-webkit-scrollbar { width:4px; } .hud-setup-card::-webkit-scrollbar-thumb { background:rgba(212,135,74,0.2); border-radius:4px; }
.hud-setup-title { font-family:'Syne',sans-serif; font-size:22px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--hud-cream); margin-bottom:20px; text-align:center; }
.hud-setup-card .rf-label { color:var(--hud-dim) !important; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; }
.hud-setup-card .roast-glass-input { background:rgba(212,135,74,0.06) !important; border:1px solid var(--hud-border) !important; color:var(--hud-cream) !important; border-radius:8px; font-family:'JetBrains Mono',monospace; font-size:13px; }
.hud-setup-card .roast-glass-input:focus { border-color:var(--hud-accent) !important; }
.hud-setup-card .roast-glass-input::placeholder { color:rgba(232,213,184,0.2); }
.hud-setup-card .roast-glass-btn { background:rgba(212,135,74,0.06); border:1px solid var(--hud-border); color:var(--hud-cream); border-radius:8px; font-family:'JetBrains Mono',monospace; }
.hud-setup-card .roast-glass-btn:hover { background:rgba(212,135,74,0.12); border-color:var(--hud-accent); }
.hud-setup-card .origin-btn.active { background:rgba(212,135,74,0.15) !important; border-color:var(--hud-accent) !important; color:var(--hud-bright) !important; }
.hud-setup-card .charge-btn { background:rgba(232,69,48,0.15) !important; border:1px solid rgba(232,69,48,0.3) !important; color:var(--hud-hot) !important; font-weight:600; letter-spacing:2px; font-size:13px; padding:14px; margin-top:16px; }
.hud-setup-card .charge-btn:hover { background:rgba(232,69,48,0.25) !important; }
.hud-setup-card #lastRoastCard { background:var(--hud-card); border:1px solid var(--hud-border); color:var(--hud-cream); cursor:pointer; margin-top:8px; padding:14px; border-radius:10px; }
.hud-setup-card #lastRoastCard div:first-child { color:var(--hud-dim) !important; }
.hud-setup-card #lastRoastInfo { color:var(--hud-cream) !important; }
.hud-setup-card .target-strip { color:var(--hud-dim); font-family:'JetBrains Mono',monospace; font-size:10px; }
.hud-back-btn { pointer-events:all; position:fixed; top:max(28px, env(safe-area-inset-top, 28px)); left:max(28px, env(safe-area-inset-left, 28px)); z-index:15; background:var(--hud-card); border:1px solid var(--hud-border); border-radius:8px; color:var(--hud-dim); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1px; padding:8px 14px; cursor:pointer; backdrop-filter:blur(12px); display:flex; align-items:center; gap:6px; transition:all 0.2s; }
.hud-back-btn:hover { color:var(--hud-cream); border-color:var(--hud-accent); background:rgba(212,135,74,0.08); }
.hud-back-btn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }

/* ── Post-Roast Form ── */
.hud-post-form { border:1px solid var(--hud-border); border-radius:10px; background:rgba(10,8,6,0.85); backdrop-filter:blur(14px); padding:14px 16px; pointer-events:all; }
.hud-post-form .roast-graph-wrap { width:100%; height:120px; background:transparent !important; border:none !important; margin-bottom:10px; }
.hud-post-form .roast-graph-canvas { width:100%; height:120px; }
.hud-post-form .rf-label { color:var(--hud-dim) !important; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; }
.hud-post-form .roast-glass-input { background:rgba(212,135,74,0.06) !important; border:1px solid var(--hud-border) !important; color:var(--hud-cream) !important; font-family:'JetBrains Mono',monospace; font-size:12px; border-radius:6px; }
.hud-loss-display { font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--hud-cream); padding:6px 0; }
.hud-loss-display #rfPostProfile { color:var(--hud-bright); font-weight:600; margin-left:8px; }
.hud-post-actions { display:flex; gap:8px; margin-top:12px; }
.hud-save-btn { flex:1; pointer-events:all; padding:12px; border:1px solid rgba(232,69,48,0.3); border-radius:8px; background:rgba(232,69,48,0.15); color:var(--hud-hot); font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:2px; cursor:pointer; text-transform:uppercase; }
.hud-save-btn:hover { background:rgba(232,69,48,0.25); }
.hud-discard-btn { pointer-events:all; padding:12px 16px; border:1px solid var(--hud-border); border-radius:8px; background:var(--hud-card); color:var(--hud-dim); font-family:'JetBrains Mono',monospace; font-size:11px; cursor:pointer; }
.hud-discard-btn:hover { color:var(--hud-cream); border-color:var(--hud-accent); }

/* ── Post Summary Card ── */
.hud-summary-card { border:1px solid var(--hud-border); border-radius:10px; background:var(--hud-card); backdrop-filter:blur(14px); padding:14px 16px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--hud-cream); line-height:1.8; }

/* ── Responsive ── */
@media(max-width:900px) {
  .hud-left, .hud-right { position:static !important; transform:none !important; max-width:100%; }
  .hud-frame { position:static !important; height:auto; padding:16px; }
  #roastHudWrapper { overflow-y:auto; height:100vh; padding-bottom:max(100px, calc(env(safe-area-inset-bottom, 0px) + 100px)); }
  .hud-left { display:flex; flex-wrap:wrap; gap:8px; padding:8px 16px; }
  .hud-right { padding:8px 16px; }
  .hud-tc { min-width:90px; flex:1; }
  .hud-timer { font-size:22px !important; }
  .hud-milestones { grid-template-columns:1fr; }
  .hud-log-panel { position:static; transform:none; width:100%; margin:8px 16px; }
  .hud-pills { flex-wrap:wrap; gap:6px; }
  .hud-top { flex-direction:column; gap:10px; }
  .hud-back-btn { position:static; margin:0 16px 8px; }
  .hud-setup-overlay { position:static; padding:0; }
  .hud-setup-card { max-height:none; border-radius:0; max-width:100%; }
  .hud-curve-card .roast-graph-wrap, .hud-curve-card .roast-graph-canvas { height:120px; }
}
@media(max-width:480px) {
  .hud-brand { gap:8px; }
  .hud-brand-logo { height:30px; }
  .hud-title { font-size:15px; letter-spacing:2px; }
  .hud-timer { font-size:20px !important; }
  .hud-tv { font-size:20px; }
  .hud-right { max-width:100%; }
}