@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#1c1917;--ink2:#44403c;--ink3:#78716c;--cream:#fdf8f0;--gold:#c9922a;--goldlt:#f0c060;--gold-hover:#b07c1c;--blush:#e8d5c4;--sage:#6b7c6e;--sagelt:#d4e0d6;--white:#fff;--border:rgba(201,146,42,.18);--shadow:0 4px 24px rgba(28,25,23,.08);--radius:14px;--nav-bg:rgba(253,248,240,.92);--bg2:#f5ede0;--card-bg:#fff;--card-border:rgba(201,146,42,.18)}
html{font-size:16px}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--ink);min-height:100vh;line-height:1.6}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 60% 40% at 10% 20%,rgba(201,146,42,.06) 0%,transparent 70%),radial-gradient(ellipse 40% 60% at 90% 80%,rgba(107,124,110,.05) 0%,transparent 70%)}
h1,h2,h3{font-family:'Playfair Display',serif;font-weight:700;line-height:1.2}
.nav{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 36px;height:60px;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-logo{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--ink);text-decoration:none}
.nav-logo span{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-avatar{width:32px;height:32px;border-radius:50%;background:var(--blush);border:2px solid var(--goldlt);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;color:var(--gold);overflow:hidden;cursor:pointer}
.nav-avatar img{width:100%;height:100%;object-fit:cover}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:9px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;border:none;cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-hover);transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2d2926}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--ink2)}
.btn-ghost:hover{border-color:var(--gold);color:var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow)}
.form-label{font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--ink3);display:block;margin-bottom:5px}
.form-input{width:100%;padding:10px 13px;border-radius:9px;border:1.5px solid var(--border);background:var(--cream);font-family:'DM Sans',sans-serif;font-size:13px;color:var(--ink);outline:none;transition:border-color .2s}
.form-input:focus{border-color:var(--gold);background:#fff}
.ring-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:9}
.ring-fill{fill:none;stroke:var(--goldlt);stroke-width:9;stroke-linecap:round;stroke-dasharray:226;stroke-dashoffset:226;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
.prog-bar{height:3px;background:rgba(201,146,42,.12);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:var(--gold);border-radius:2px;transition:width .8s}
.status-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:500}
.pill-locked{background:rgba(255,255,255,.08);color:rgba(255,255,255,.5)}
.pill-unlocked{background:rgba(240,192,96,.15);color:var(--goldlt)}
.pill-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.pill-unlocked .pill-dot{animation:pillPulse 1.4s ease-in-out infinite}
@keyframes pillPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.5)}}
.preview-scroll{animation:scrollUp 22s linear infinite}
.preview-scroll:hover{animation-play-state:paused}
@keyframes scrollUp{0%{transform:translateY(0)}85%{transform:translateY(-55%)}100%{transform:translateY(-55%)}}
.preview-fade{position:absolute;bottom:0;left:0;right:0;height:56px;background:linear-gradient(transparent,#fff);pointer-events:none}
.autosave-bar{position:fixed;bottom:22px;right:22px;z-index:300;display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:20px;background:var(--ink);color:#fff;font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none}
.autosave-bar.show{opacity:1}
.as-dot{width:6px;height:6px;border-radius:50%;background:var(--goldlt)}
.as-dot.saving{animation:blink .7s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.modal-overlay{position:fixed;inset:0;z-index:400;background:rgba(28,25,23,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--white);border-radius:18px;padding:34px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .25s}
.modal-overlay.open .modal{transform:translateY(0)}
.modal h2{font-family:'Playfair Display',serif;font-size:21px;margin-bottom:6px}
.modal .sub{font-size:13px;color:var(--ink3);margin-bottom:22px;line-height:1.6}
.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:8px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-radius:10px;border:1.5px solid rgba(201,146,42,.15);background:var(--cream);margin-bottom:14px}
.toggle-row-text p{font-size:13px;font-weight:500;margin-bottom:1px}
.toggle-row-text span{font-size:11px;color:var(--ink3)}
.toggle{width:40px;height:22px;border-radius:11px;background:#d4c5b0;border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.toggle.on{background:var(--sage)}
.toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;pointer-events:none}
.toggle.on .toggle-thumb{transform:translateX(18px)}
.share-link-box{display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:9px;border:1.5px solid rgba(107,124,110,.25);background:rgba(107,124,110,.05);margin-bottom:14px}
.share-link-box input{flex:1;border:none;background:transparent;font-size:12px;color:var(--ink2);outline:none;font-family:'DM Sans',sans-serif}
.copy-btn{padding:5px 12px;border-radius:6px;background:var(--sage);color:#fff;border:none;font-size:11px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .2s}
.copy-btn:hover{background:#5a6b5d}
.photo-drop{border:2px dashed rgba(201,146,42,.3);border-radius:12px;padding:28px;text-align:center;cursor:pointer;transition:all .2s;background:rgba(201,146,42,.02)}
.photo-drop:hover{border-color:var(--gold);background:rgba(201,146,42,.05)}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.photo-thumb{aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--blush);position:relative}
.photo-thumb img{width:100%;height:100%;object-fit:cover}
.photo-remove{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:none;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .45s ease both}
@media(max-width:768px){.nav{padding:0 16px}}

/* ── User menu dropdown ─────────────────────────────────── */
.user-menu-wrap{position:relative;display:inline-flex;align-items:center}
.user-dropdown{position:absolute;top:calc(100% + 10px);right:0;min-width:210px;background:var(--white);border-radius:13px;border:1px solid var(--border);box-shadow:0 8px 32px rgba(28,25,23,.13);z-index:500;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s,transform .18s}
.user-dropdown.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.user-dropdown-header{padding:14px 16px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:11px}
.user-dropdown-avatar{width:38px;height:38px;border-radius:50%;background:var(--blush);border:2px solid var(--goldlt);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:var(--gold);overflow:hidden;flex-shrink:0}
.user-dropdown-avatar img{width:100%;height:100%;object-fit:cover}
.user-dropdown-name{font-size:13px;font-weight:500;color:var(--ink);line-height:1.3}
.user-dropdown-email{font-size:11px;color:var(--ink3)}
.user-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;font-size:13px;color:var(--ink2);background:transparent;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .15s;text-align:left}
.user-dropdown-item:hover{background:rgba(201,146,42,.07);color:var(--ink)}
.user-dropdown-item .udi{font-size:15px;width:18px;text-align:center}
.user-dropdown-divider{height:1px;background:var(--border);margin:3px 0}
.user-dropdown-item.danger{color:#c53030}
.user-dropdown-item.danger:hover{background:rgba(197,48,48,.06)}

/* ── Profile & Change-password modal extras ─────────────── */
.profile-avatar-lg{width:72px;height:72px;border-radius:50%;background:var(--blush);border:3px solid var(--goldlt);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:500;color:var(--gold);overflow:hidden;margin:0 auto 18px;flex-shrink:0}
.profile-avatar-lg img{width:100%;height:100%;object-fit:cover}
.profile-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.profile-row:last-child{border-bottom:none}
.profile-row .pk{color:var(--ink3);font-size:12px}
.profile-row .pv{font-weight:500;color:var(--ink)}
.pw-field{margin-bottom:14px}
.pw-field label{font-size:11px;font-weight:500;color:var(--ink3);display:block;margin-bottom:5px}
.pw-field input{width:100%;padding:10px 13px;border-radius:9px;border:1.5px solid var(--border);background:var(--cream);font-family:'DM Sans',sans-serif;font-size:13px;color:var(--ink);outline:none;transition:border-color .2s}
.pw-field input:focus{border-color:var(--gold);background:#fff}
.pw-error{font-size:12px;color:#c53030;margin-top:10px;display:none}
.pw-error.show{display:block}

/* ═══════════════════════════════════════════════════════════════
   SITE THEMES  — applied via html[data-theme="X"]
   ═══════════════════════════════════════════════════════════════ */

/* ── Midnight Dark ────────────────────────────────────────────── */
html[data-theme="midnight"]{
  --cream:#181512;--ink:#e8ddd0;--ink2:#b8a896;--ink3:#786a5a;
  --white:#1f1c18;--gold:#d4a827;--goldlt:#f0c85a;--gold-hover:#b88e1a;
  --blush:#2a231c;--sage:#8a9e8d;--sagelt:#2c3a2e;
  --border:rgba(212,168,39,.18);--shadow:0 4px 24px rgba(0,0,0,.3);
  --nav-bg:rgba(24,21,18,.92);
  --bg2:#2a2218;--card-bg:#221a12;--card-border:rgba(212,168,39,.2);
}
html[data-theme="midnight"] select option{background:#2a2218;color:#e8ddd0}
html[data-theme="midnight"] select{color-scheme:dark}
html[data-theme="midnight"] body::before{
  background:radial-gradient(ellipse 60% 40% at 10% 20%,rgba(212,168,39,.07) 0%,transparent 70%),
             radial-gradient(ellipse 40% 60% at 90% 80%,rgba(138,158,141,.06) 0%,transparent 70%);
}
html[data-theme="midnight"] .form-input,
html[data-theme="midnight"] .pw-field input{color:var(--ink)}
html[data-theme="midnight"] .form-input:focus,
html[data-theme="midnight"] .pw-field input:focus{background:#2a231c}
/* prog-card uses var(--ink) as bg — fine in golden (ink=near-black) but in midnight ink=light beige, so override */
html[data-theme="midnight"] .prog-card{background:#2c2418}
html[data-theme="midnight"] .prog-stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}
html[data-theme="midnight"] .update-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#e8ddd0}
html[data-theme="midnight"] .update-btn:hover{background:rgba(255,255,255,.1)}

/* ── Ocean ────────────────────────────────────────────────────── */
html[data-theme="ocean"]{
  --cream:#f0f6ff;--ink:#0c1e35;--ink2:#1e3a5f;--ink3:#5a82aa;
  --white:#ffffff;--gold:#1d7fba;--goldlt:#4aabdc;--gold-hover:#155f8a;
  --blush:#cce3f5;--sage:#0f9975;--sagelt:#c6f0e4;
  --border:rgba(29,127,186,.2);--shadow:0 4px 24px rgba(12,30,53,.08);
  --nav-bg:rgba(240,246,255,.92);
}
html[data-theme="ocean"] body::before{
  background:radial-gradient(ellipse 60% 40% at 10% 20%,rgba(29,127,186,.07) 0%,transparent 70%),
             radial-gradient(ellipse 40% 60% at 90% 80%,rgba(15,153,117,.06) 0%,transparent 70%);
}

/* ── Forest ───────────────────────────────────────────────────── */
html[data-theme="forest"]{
  --cream:#f1f7f0;--ink:#162812;--ink2:#2a4825;--ink3:#5a8055;
  --white:#ffffff;--gold:#4a8c3a;--goldlt:#76b860;--gold-hover:#367029;
  --blush:#c8e4c4;--sage:#3a7c50;--sagelt:#c0e8d0;
  --border:rgba(74,140,58,.2);--shadow:0 4px 24px rgba(22,40,18,.08);
  --nav-bg:rgba(241,247,240,.92);
}
html[data-theme="forest"] body::before{
  background:radial-gradient(ellipse 60% 40% at 10% 20%,rgba(74,140,58,.07) 0%,transparent 70%),
             radial-gradient(ellipse 40% 60% at 90% 80%,rgba(58,124,80,.06) 0%,transparent 70%);
}

/* ── Rose ─────────────────────────────────────────────────────── */
html[data-theme="rose"]{
  --cream:#fff5f8;--ink:#3d0d1a;--ink2:#6b2538;--ink3:#a06070;
  --white:#ffffff;--gold:#c0395a;--goldlt:#e87090;--gold-hover:#9e2d49;
  --blush:#f5c8d6;--sage:#a04060;--sagelt:#fce0ea;
  --border:rgba(192,57,90,.22);--shadow:0 4px 24px rgba(61,13,26,.08);
  --nav-bg:rgba(255,245,248,.92);
}
html[data-theme="rose"] body::before{
  background:radial-gradient(ellipse 60% 40% at 10% 20%,rgba(192,57,90,.07) 0%,transparent 70%),
             radial-gradient(ellipse 40% 60% at 90% 80%,rgba(160,64,96,.05) 0%,transparent 70%);
}

/* ── Slate ────────────────────────────────────────────────────── */
html[data-theme="slate"]{
  --cream:#f6f8fc;--ink:#0f172a;--ink2:#1e293b;--ink3:#64748b;
  --white:#ffffff;--gold:#6366f1;--goldlt:#a5b4fc;--gold-hover:#4f52d4;
  --blush:#e0e7ff;--sage:#0ea5e9;--sagelt:#bae6fd;
  --border:rgba(99,102,241,.2);--shadow:0 4px 24px rgba(15,23,42,.08);
  --nav-bg:rgba(246,248,252,.92);
}
html[data-theme="slate"] body::before{
  background:radial-gradient(ellipse 60% 40% at 10% 20%,rgba(99,102,241,.07) 0%,transparent 70%),
             radial-gradient(ellipse 40% 60% at 90% 80%,rgba(14,165,233,.05) 0%,transparent 70%);
}

/* ── Theme Switcher Panel ─────────────────────────────────────── */
#mmbThemeBtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1.5px solid var(--border);background:transparent;cursor:pointer;font-size:16px;flex-shrink:0;transition:border-color .18s,background .18s}
#mmbThemeBtn:hover{border-color:var(--gold);background:rgba(0,0,0,.04)}
#mmbThemePanel{position:fixed;top:68px;right:16px;z-index:999;background:rgba(20,16,14,.94);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px;width:240px;box-shadow:0 16px 48px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(-8px) scale(.97);transition:opacity .2s,transform .2s}
#mmbThemePanel.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
#mmbThemePanel h3{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:10px}
.mmb-swatch{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:9px;border:1.5px solid transparent;background:transparent;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:13px;color:rgba(255,255,255,.7);margin-bottom:3px;text-align:left;transition:background .15s,border-color .15s}
.mmb-swatch:last-child{margin-bottom:0}
.mmb-swatch:hover{background:rgba(255,255,255,.08)}
.mmb-swatch.active{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff}
.mmb-swatch-dots{display:flex;gap:3px;flex-shrink:0}
.mmb-dot{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18)}
.mmb-swatch-check{margin-left:auto;font-size:11px;opacity:0}
.mmb-swatch.active .mmb-swatch-check{opacity:1}