/* Calorie Deficit Calculator — calorie-deficit.css
   Mobile-first. Scoped to .cd-wrap */

.cd-wrap *,.cd-wrap *::before,.cd-wrap *::after{box-sizing:border-box;margin:0;padding:0}
.cd-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#1e293b;max-width:960px;margin:0 auto;background:#fff;border-radius:16px;border:1px solid #e2e8f0;overflow:hidden}

/* Header */
.cd-header{display:flex;align-items:center;gap:14px;padding:20px 24px;background:#0f172a}
.cd-header-icon{width:44px;height:44px;background:rgba(255,255,255,.12);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#818cf8;flex-shrink:0}
.cd-title{font-size:19px;font-weight:700;color:#fff;margin-bottom:3px}
.cd-subtitle{font-size:12.5px;color:#818cf8}

/* Layout */
.cd-body{display:flex;flex-direction:column}
@media(min-width:720px){.cd-body{flex-direction:row;align-items:flex-start}.cd-form{width:50%;border-right:1px solid #e2e8f0}.cd-results{width:50%;position:sticky;top:0;max-height:100vh;overflow-y:auto}}

/* Form */
.cd-form{padding:20px;display:flex;flex-direction:column;gap:16px}
.cd-field{display:flex;flex-direction:column;gap:6px}
.cd-label{font-size:12px;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:.05em}
.cd-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Buttons */
.cd-btn-group{display:flex;gap:8px}
.cd-btn-2{display:grid;grid-template-columns:1fr 1fr}
.cd-choice{padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;background:#f8fafc;font-size:13.5px;font-weight:600;color:#475569;cursor:pointer;transition:all .15s;text-align:center}
.cd-choice:hover{border-color:#4f46e5;color:white}
.cd-choice.active{background:#0f172a;border-color:#0f172a;color:#fff}

/* Select */
.cd-select{width:100%;padding:10px 32px 10px 14px;height:46px;border:1.5px solid #cbd5e1;border-radius:10px;font-size:14px;color:#1e293b;background:#f8fafc;appearance:none;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;transition:border-color .18s}
.cd-select:focus{border-color:#4f46e5;background-color:#fff}

/* Inputs */
.cd-suffix-wrap{display:flex;align-items:center;border:1.5px solid #cbd5e1;border-radius:10px;overflow:hidden;background:#f8fafc;transition:border-color .18s}
.cd-suffix-wrap:focus-within{border-color:#4f46e5;background:#fff}
.cd-suffix{padding:0 12px;font-size:13px;font-weight:600;color:#64748b;background:#f1f5f9;height:46px;display:flex;align-items:center;border-left:1px solid #e2e8f0;flex-shrink:0}
.cd-input{flex:1;border:none;background:transparent;padding:0 14px;height:46px;font-size:14px;color:#1e293b;outline:none;-moz-appearance:textfield;min-width:0}
.cd-input::-webkit-outer-spin-button,.cd-input::-webkit-inner-spin-button{-webkit-appearance:none}

/* Deficit grid */
.cd-deficit-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cd-def-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;border:1.5px solid #e2e8f0;border-radius:10px;background:#f8fafc;cursor:pointer;transition:all .15s;text-align:center}
.cd-def-btn:hover{border-color:#4f46e5;background:#f5f3ff}
.cd-def-btn.active{border-color:#4f46e5;background:#f5f3ff;box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.cd-def-name{font-size:13px;font-weight:700;color:#1e293b}
.cd-def-sub{font-size:11.5px;color:#64748b}
.cd-def-cal{font-size:11px;font-weight:700;color:#4f46e5;margin-top:2px}

/* Disclaimer */
.cd-disclaimer{display:flex;align-items:flex-start;gap:8px;background:#fefce8;border:1px solid #fde047;border-radius:9px;padding:10px 14px;font-size:12px;color:#854d0e;line-height:1.5}
.cd-disclaimer svg{flex-shrink:0;margin-top:1px;color:#ca8a04}

/* Results */
.cd-results{background:#f8fafc;padding:20px}
.cd-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;gap:14px;color:#94a3b8;text-align:center}
.cd-placeholder p{font-size:13.5px;line-height:1.6;max-width:220px}

/* Hero */
.cd-hero{background:#0f172a;border-radius:14px;padding:22px;text-align:center;margin-bottom:14px}
.cd-hero-label{font-size:11px;font-weight:700;color:#818cf8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.cd-hero-amount{font-size:56px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1}
.cd-hero-sub{font-size:13px;color:#818cf8;margin-top:5px}

/* Stats */
.cd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.cd-stat{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:12px;text-align:center}
.cd-stat-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;margin-bottom:4px}
.cd-stat-val{font-size:20px;font-weight:800;color:#1e293b}
.cd-stat-sub{font-size:11px;color:#94a3b8;margin-top:2px}

/* Safety warning */
.cd-safety{display:flex;align-items:flex-start;gap:8px;background:#fff7ed;border:1px solid #fdba74;border-radius:9px;padding:10px 14px;font-size:12.5px;color:#9a3412;margin-bottom:12px;line-height:1.5}
.cd-safety svg{flex-shrink:0;margin-top:1px;color:#ea580c}

/* Macros */
.cd-macros{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;margin-bottom:14px}
.cd-macros-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:12px}
.cd-macro-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.cd-macro-row:last-child{margin-bottom:0}
.cd-macro-bar-wrap{flex:1;height:8px;background:#f1f5f9;border-radius:6px;overflow:hidden}
.cd-macro-bar{height:100%;border-radius:6px;transition:width .5s ease}
.cd-macro-info{display:flex;align-items:center;gap:8px;min-width:160px}
.cd-macro-name{font-size:12.5px;font-weight:600;color:#334155;min-width:50px}
.cd-macro-val{font-size:13px;font-weight:700;color:#1e293b;min-width:40px}
.cd-macro-cal{font-size:11.5px;color:#94a3b8}

/* Projection */
.cd-projection{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px}
.cd-proj-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:12px}
.cd-proj-grid{display:flex;flex-direction:column;gap:6px}
.cd-proj-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
.cd-proj-row:last-child{border-bottom:none}
.cd-proj-month{color:#475569}
.cd-proj-weight{font-weight:700;color:#1e293b}
.cd-proj-diff{font-size:11.5px;color:#16a34a;font-weight:600}

@media(max-width:480px){
  .cd-header,.cd-form,.cd-results{padding:16px}
  .cd-title{font-size:17px}
  .cd-hero-amount{font-size:44px}
  .cd-stats{grid-template-columns:1fr 1fr 1fr}
  .cd-stat-val{font-size:16px}
  .cd-macro-info{min-width:120px}
}