/* Moodfex premium account dashboard
   Palette: cream #FBF9F3 · deep green #003D32 · soft gold #C5A572 */
.mfa-shell{
    --deep:#003D32; --deep-2:#0a4a3e; --gold:#C5A572; --gold-soft:#e7dcc4;
    --cream:#FBF9F3; --ink:#22302b; --muted:#8a8172; --line:rgba(0,61,50,.10);
    --surface:#ffffff; --shadow:0 18px 46px rgba(0,61,50,.08);
    box-sizing:border-box;
    display:grid; grid-template-columns:250px minmax(0,1fr); gap:26px;
    max-width:1240px; margin:0 auto; padding:26px 20px 60px;
    background:var(--cream); color:var(--ink); overflow-x:hidden;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.mfa-shell *{box-sizing:border-box;}
.mfa-shell h1,.mfa-shell h2,.mfa-shell h3{font-family:"DejaVu Serif",Georgia,"Times New Roman",serif;font-weight:600;}

/* ---------- Sidebar ---------- */
.mfa-side{
    align-self:start; position:sticky; top:20px; min-width:0;
    background:linear-gradient(180deg,#00463a,#003a30);
    color:#eaf1ec; border-radius:22px; padding:26px 18px;
    box-shadow:var(--shadow);
}
.mfa-brand{
    font-family:"DejaVu Serif",Georgia,serif; font-size:22px; font-weight:700;
    letter-spacing:.34em; text-indent:.34em; text-align:center; color:#fff;
    padding-bottom:20px; margin-bottom:14px; border-bottom:1px solid rgba(255,255,255,.12);
}
.mfa-nav{display:flex; flex-direction:column; gap:4px;}
.mfa-nav a{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-radius:12px;
    color:rgba(255,255,255,.82); text-decoration:none; font-size:15px; font-weight:500;
    transition:background .15s ease,color .15s ease,transform .15s ease;
}
.mfa-nav a svg{width:19px; height:19px; flex:0 0 19px; opacity:.85;}
.mfa-nav a:hover{background:rgba(255,255,255,.08); color:#fff;}
.mfa-nav a.is-active{background:var(--gold); color:var(--deep); font-weight:600;}
.mfa-nav a.is-active svg{opacity:1;}

/* ---------- Main ---------- */
.mfa-main{min-width:0; display:flex; flex-direction:column; gap:24px;}

.mfa-top{
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
    background:linear-gradient(135deg,#fff,#f6f1e6);
    border:1px solid var(--line); border-radius:22px; padding:24px 26px; box-shadow:var(--shadow);
}
.mfa-eyebrow{display:block; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; font-weight:700;}
.mfa-title{margin:0; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.01em; color:var(--deep);}
.mfa-date{display:block; margin-top:8px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}

/* The embedded daily reading brings its own greeting+date; hide it here to
   avoid duplicating the account header greeting/date. */
.mfa-col--reading .mfd-head{display:none;}

.mfa-status{display:flex; align-items:center; gap:14px; border-radius:16px; padding:14px 18px; min-width:min(340px,100%);}
.mfa-status.is-ok{background:rgba(0,61,50,.05); border:1px solid var(--line);}
.mfa-status.is-warn{background:rgba(197,165,114,.14); border:1px solid rgba(197,165,114,.5);}
.mfa-status__dot{width:10px; height:10px; border-radius:50%; background:#2e8b6f; box-shadow:0 0 0 4px rgba(46,139,111,.16); flex:0 0 10px;}
.mfa-status__text{display:flex; flex-direction:column; gap:2px; line-height:1.35;}
.mfa-status__text strong{font-size:15px; color:var(--deep);}
.mfa-status__text small{font-size:12.5px; color:var(--muted);}
.mfa-status__edit{margin-left:auto; font-size:13px; color:var(--deep); text-decoration:underline; opacity:.7;}
.mfa-status__edit:hover{opacity:1;}

/* Buttons */
.mfa-btn{
    display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
    background:var(--deep); color:#fff !important; text-decoration:none;
    border:0; border-radius:999px; padding:12px 22px; font-size:14px; font-weight:600; cursor:pointer;
    transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
}
.mfa-btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,61,50,.22); color:#fff;}
.mfa-btn--ghost{background:transparent; color:var(--deep) !important; border:1.5px solid var(--deep);}
.mfa-btn--ghost:hover{background:rgba(0,61,50,.06); box-shadow:none;}
.mfa-btn--sm{padding:9px 16px; font-size:13px;}

/* Daily section: reading + card */
.mfa-daily{display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:22px; align-items:start;}
.mfa-col{min-width:0;}
.mfa-col--reading .mfd-dashboard{max-width:none; margin:0;}
.mfa-col--card{
    background:var(--surface); border:1px solid var(--line); border-radius:22px;
    padding:22px 20px 20px; box-shadow:var(--shadow); position:sticky; top:20px;
}
.mfa-col__label{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; text-align:center; margin-bottom:16px;}
.mfa-col--card .mfd-cardwrap{max-width:100%;}
.mfa-col__hint{margin:16px 0 0; text-align:center; font-size:12.5px; color:var(--muted);}
.mfa-col__hint strong{color:var(--deep);}

/* Reports */
.mfa-reports{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:24px 26px; box-shadow:var(--shadow);}
.mfa-sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px;}
.mfa-sec-head h2{margin:0; font-size:clamp(20px,2.6vw,26px); color:var(--deep);}
.mfa-sec-head p{margin:5px 0 0; font-size:13.5px; color:var(--muted);}
.mfa-sec-link{font-size:14px; color:var(--deep); text-decoration:none; font-weight:600; white-space:nowrap;}
.mfa-sec-link:hover{color:var(--gold);}

.mfa-report-list{display:grid; gap:12px;}
.mfa-report{
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    background:linear-gradient(180deg,#fff,#fcfaf4); border:1px solid var(--line); border-radius:16px; padding:18px 20px;
    transition:box-shadow .15s ease,transform .15s ease;
}
.mfa-report:hover{box-shadow:0 12px 30px rgba(0,61,50,.08); transform:translateY(-1px);}
.mfa-report__main{min-width:0;}
.mfa-badge{display:inline-block; margin-bottom:8px; padding:5px 11px; border-radius:999px; background:#eef4e6; color:#4a6b3f; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;}
.mfa-report__main h3{margin:0; font-size:18px; color:var(--deep); font-weight:600;}
.mfa-report__main p{margin:5px 0 0; font-size:13px; color:var(--muted);}
.mfa-report__act{display:flex; gap:8px; flex:0 0 auto;}
.mfa-report__na{font-size:13px; color:var(--muted);}

.mfa-empty{text-align:center; padding:40px 22px; border:1px dashed rgba(0,61,50,.18); border-radius:18px; background:rgba(0,61,50,.02);}
.mfa-empty__mark{font-size:26px; color:var(--gold);}
.mfa-empty h3{margin:10px 0 6px; font-size:22px; color:var(--deep);}
.mfa-empty p{margin:0 auto 18px; max-width:420px; font-size:14px; color:var(--muted); line-height:1.55;}

.mfa-guard{max-width:520px; margin:40px auto; text-align:center; background:#fff; border:1px solid rgba(0,61,50,.12); border-radius:20px; padding:34px 28px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:#003D32;}
.mfa-guard p{font-size:1.05rem; margin:0 0 18px;}

/* ---------- Tablet ---------- */
@media (max-width:1080px){
    .mfa-daily{grid-template-columns:minmax(0,1fr);}
    .mfa-col--card{position:static; max-width:520px; margin:0 auto; width:100%;}
    .mfa-col--reading .mfd-dashboard{margin:0 auto;}
}

/* ---------- Small screens: menu moves BELOW the content, listed vertically ---------- */
@media (max-width:900px){
    .mfa-shell{grid-template-columns:minmax(0,1fr); gap:18px; padding:16px 14px 48px;}
    .mfa-main{order:1;}
    .mfa-side{order:2; position:static; top:auto; padding:18px 16px; border-radius:18px;}
    .mfa-brand{display:block; font-size:16px; letter-spacing:.3em; text-indent:.3em; padding-bottom:14px; margin-bottom:12px;}
    .mfa-nav{flex-direction:column; gap:6px;}
    .mfa-nav a{white-space:nowrap; padding:13px 16px; font-size:15px;}
}

/* ---------- Mobile ---------- */
@media (max-width:560px){
    .mfa-top{padding:20px; border-radius:18px;}
    .mfa-status{min-width:100%;}
    .mfa-reports{padding:20px 16px; border-radius:18px;}
    .mfa-report{flex-direction:column; align-items:stretch; gap:14px;}
    .mfa-report__act{width:100%;}
    .mfa-report__act .mfa-btn{flex:1;}
    .mfa-col--card{padding:18px 14px;}
}