:root{
  --green:#52b44a;
  --green-ink:#b7f2bf;
  --bg: #0b0b0b;
  --panel:#111214;
  --panel-2:#141518;
  --ink:#e9f6ec;
  --muted:#9ca3af;
  --ring:rgba(82,180,74,.35);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5;font-size:17px}
a{color:var(--green)}
.container{max-width:980px;margin:0 auto;padding:24px 16px}

.brandbar{background:#000;border-bottom:1px solid rgba(255,255,255,.06);position:static;top:auto;z-index:50}
.brandwrap{display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:10px 12px}
.brandwrap img{height:64px;width:auto;display:block}
.brandwrap .title{font-weight:800;letter-spacing:.5px;color:#fff;font-size:18px;opacity:.92}

.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid rgba(255,255,255,.06);border-radius:16px;box-shadow:var(--shadow);padding:18px;margin:18px 0}

h1{font-size:clamp(26px, 3.2vw, 32px);margin:16px 0 6px}
h2{font-size:clamp(18px, 2.2vw, 22px);margin:12px 0 6px;color:#f3f4f6}
p.sub{color:var(--muted);margin:0 0 12px}

label .lbl, .lbl{display:block;color:#d1d5db;font-size:15px;margin-bottom:6px}
input[type="text"],input[type="number"],input[type="email"],input[type="tel"],input[type="date"],select,textarea{width:100%;background:#0f1012;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#e5f1e8;padding:14px 16px;min-height:48px;outline:none;font-size:17px}
textarea{min-height:48px;resize:vertical;max-height:320px;transition:height .12s ease;}

/* Taller reflection boxes */
.textarea-tall{min-height:140px}
@media(max-width:640px){.textarea-tall{min-height:160px}}

input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 4px var(--ring)}

.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-wide{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end}
.row-compact{grid-template-columns:2fr 1fr 1fr}

.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.choice{display:flex;gap:10px;align-items:center}
.choice input{accent-color:var(--green)}

.help{color:#9aa3a9;font-size:12px}

.btn{display:inline-block;border-radius:12px;padding:12px 16px;border:2px solid var(--green);color:#e8f7ec;background:transparent;text-decoration:none;cursor:pointer;box-shadow:0 0 18px rgba(82,180,74,.15);font-weight:600}
.btn:hover{background:rgba(82,180,74,.08)}
.btn.primary{background:var(--green);color:#031406;border-color:transparent;box-shadow:0 8px 24px rgba(82,180,74,.35)}
.btn.primary:hover{filter:brightness(1.05)}

.actions{display:flex;gap:12px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}

.hint{font-size:12px;color:#a0a6ac}

.hidden{display:none !important}

@media(max-width:560px){
  .brandwrap img{height:52px}
  .brandwrap .title{font-size:16px}
}


/* --- Mobile friendliness polish --- */
@media(max-width:640px){
  .container{padding:18px 12px}
  .card{padding:16px;margin:14px 0}
  .actions{justify-content:stretch}
  .btn{width:100%; text-align:center}
  .brandwrap{gap:10px; padding:8px 10px}
}
/* Larger tap targets and safe-areas */
:root{ --safe-pad: env(safe-area-inset-bottom, 0px) }
.actions{ padding-bottom: var(--safe-pad) }
html, body { -webkit-tap-highlight-color: rgba(0,0,0,0); }



@media(max-width:640px){
  html,body{font-size:16.5px}
  .brandwrap img{height:52px}
  .card{padding:18px}
  .btn{font-size:16.5px}
}



/* --- Mobile photo picker previews --- */
.preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-top:10px}
.preview .thumb{position:relative;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0e0f11}
.preview .thumb img{width:100%;height:84px;object-fit:cover;display:block}
.preview .thumb button{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:10px;padding:4px 6px;font-size:11px;cursor:pointer}
.preview .meta{font-size:11px;color:#9aa3a9;padding:6px 2px 0}

/* Spinner overlay for compression */
#uploadSpinner{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:999}
#uploadSpinner .box{background:#0f1113;border:1px solid rgba(255,255,255,.08);padding:16px 18px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#uploadSpinner .txt{color:#eaf6ed;font-weight:600;margin-top:8px;text-align:center}
.loader{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.15);border-top-color:#52b44a;animation:spin 1s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}



/* Hide native file input but keep it in DOM for Netlify + JS */
.hiddenfile{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.filepick .btn{padding:10px 14px}
.filepick .hint{margin-left:8px}


/* ===== v4: white cards + improved spacing ===== */
.card{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  color:#111827 !important;
}
.card h2,.card h3{
  color:#111827 !important;
}
.lbl, label .lbl, .label{
  color:#374151 !important;
}
.help, .hint, .subtle{
  color:#6b7280 !important;
}
.row{
  gap:16px !important;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
}
.card{padding:20px !important; margin:18px 0 !important;}
.container{padding:22px 14px !important;}
/* Inputs on white cards */
input[type="text"],input[type="number"],input[type="email"],input[type="tel"],select,textarea{
  background:#f9fafb !important;
  border:1px solid #d1d5db !important;
  color:#111827 !important;
}
input::placeholder, textarea::placeholder{
  color:#9ca3af !important;
}
input:focus,select:focus,textarea:focus{
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(82,180,74,.18) !important;
}
/* Keep green buttons readable on white */
.btn, button{
  color:#0b1a0f !important;
}
/* Tiny text */
.small, small{
  color:#6b7280 !important;
}


/* --- White cards override for readability (PT Weekly Check-In) --- */
.card{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.28) !important;
}
.card h2,.card h3,.card .lbl,.card label,.card .txt{
  color:#0f172a !important;
}
.card .hint,.card .help,.card .small,.card small{
  color:#475569 !important;
}
.card input[type="text"],
.card input[type="email"],
.card input[type="tel"],
.card input[type="number"],
.card input[type="date"],
.card input[type="time"],
.card select,
.card textarea{
  background:#f8fafc !important;
  color:#0f172a !important;
  border:1px solid rgba(15,23,42,.18) !important;
}
.card input::placeholder,
.card textarea::placeholder{
  color:#64748b !important;
}