/* account.css -- F2 account section (Settings, Billing & Plan, My Certificates).
   Loaded AFTER dashboard.css, which provides the F2 base: tokens (:root vars),
   .nav/.brand/.wrap, .card/.ck/.row/.crow/.stat(s)/.empty/.foot/.prog, etc.
   This file only adds the account shell + page-specific components. */

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;font-weight:600;font-size:14px;padding:10px 18px;cursor:pointer;border:1px solid transparent;font-family:inherit;transition:transform .16s var(--ease),background .16s,border-color .16s,color .16s;text-align:center}
.btn-primary{background:#155c40;color:#fff}.btn-primary:hover{background:#10452f;transform:translateY(-1px)}
.btn-out{background:var(--panel);border-color:var(--line);color:var(--ink)}.btn-out:hover{border-color:var(--ink)}
.btn-danger{background:var(--panel);border-color:color-mix(in srgb,var(--res) 40%,var(--line));color:var(--res)}.btn-danger:hover{border-color:var(--res)}
.btn-sm{padding:7px 13px;font-size:13px;border-radius:9px;gap:6px}
.btn svg{width:15px;height:15px;flex:none}

/* page shell: left account rail + content */
.pagewrap{display:grid;grid-template-columns:228px 1fr;gap:40px;align-items:start;padding:30px 0 0}
.acctnav{position:sticky;top:84px}
.acctnav .sk{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 10px;padding:0 12px}
.acctnav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--body);margin-bottom:2px;border-left:2px solid transparent;transition:background .15s,color .15s}
.acctnav a svg{width:17px;height:17px;flex:none;color:var(--faint)}
.acctnav a:hover{background:var(--line2);color:var(--ink)}
.acctnav a.on{background:color-mix(in srgb,var(--ds) 9%,var(--panel));color:var(--ds);border-left-color:var(--ds)}
.acctnav a.on svg{color:var(--ds)}
@media(max-width:860px){.pagewrap{grid-template-columns:1fr;gap:20px}.acctnav{position:static;display:flex;flex-wrap:wrap;gap:6px}.acctnav .sk{width:100%}.acctnav a{margin:0;border-left:0;border:1px solid var(--line)}}

.ph{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(26px,3.5vw,34px);letter-spacing:-.025em;color:var(--ink)}
.pl{font-size:15px;color:var(--body);margin:5px 0 22px}
.card{margin-bottom:16px}
.subt{font-size:12.5px;color:var(--faint);margin:3px 0 16px}
.secthd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:26px 0 12px}
.secthd h2{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.015em}
.secthd .all{font-size:13px;font-weight:600;color:var(--ds)}

/* profile block */
.prof{display:flex;align-items:center;gap:16px;margin:10px 0 18px}
.prof .pav{width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:21px;flex:none}
.prof .pn b{font-family:'Inter Tight',sans-serif;font-size:18px;font-weight:700;color:var(--ink);display:block;line-height:1.2}
.prof .pn span{font-size:13.5px;color:var(--faint)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field .lbl{font-size:10.5px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;display:block;margin-bottom:5px}
.field .val{font-size:14.5px;color:var(--ink);font-weight:500;word-break:break-word}
.note{font-size:12.5px;color:var(--faint);margin-top:16px;line-height:1.55}
.note a{color:var(--ds);font-weight:600}
@media(max-width:560px){.frow{grid-template-columns:1fr}}

/* sessions */
.sess{display:flex;align-items:center;gap:13px;padding:13px 2px;border-bottom:1px solid var(--line2)}
.sess:last-child{border-bottom:0}
.sess .si{flex:none;width:34px;height:34px;border-radius:10px;background:var(--line2);color:var(--body);display:flex;align-items:center;justify-content:center}
.sess .si svg{width:17px;height:17px}
.sess .sd{flex:1;min-width:0}
.sess .sd b{font-size:14px;font-weight:600;color:var(--ink);display:block}
.sess .sd span{font-size:12px;color:var(--faint)}
.sess .cur{font-size:10px;font-weight:600;color:var(--free);border:1px solid color-mix(in srgb,var(--free) 35%,var(--line));border-radius:999px;padding:2px 9px;flex:none}
.sess .rev{font-size:12.5px;font-weight:600;color:var(--res);cursor:pointer;background:none;border:0;font-family:inherit;flex:none}
.sess .rev:hover{text-decoration:underline}
.actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* billing plan card */
.plan{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.plan .pinfo b.dp{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:24px;color:var(--ink);display:block;letter-spacing:-.02em}
.plan .psub{font-size:13.5px;color:var(--body);margin-top:6px}
.plan .psub b{color:var(--ink);font-weight:600}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:600;padding:4px 11px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.badge svg{width:12px;height:12px}
.badge.pro{color:var(--pro);background:color-mix(in srgb,var(--pro) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--pro) 28%,var(--line))}
.badge.free{color:var(--ds);background:color-mix(in srgb,var(--ds) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--ds) 26%,var(--line))}
.unlocks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.unlocks li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--body)}
.unlocks li svg{width:16px;height:16px;color:var(--ds);flex:none}

/* certificate cards */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 8px}
@media(max-width:560px){.stat-strip{grid-template-columns:1fr}}
.certgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:16px;margin-top:4px}
.ccard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);box-shadow:var(--sh1);display:flex;flex-direction:column}
.ccard .frame{background:var(--ink);color:#fff;padding:20px 20px 18px;position:relative}
.ccard .frame::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--pro)}
.ccard .cseal{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.1);color:var(--pro);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.ccard .cseal svg{width:20px;height:20px}
.ccard .clbl{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ccard .cnm{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:19px;color:#fff;margin:4px 0 0;letter-spacing:-.015em}
.ccard .awd{font-size:12px;color:rgba(255,255,255,.6);margin-top:8px}.ccard .awd b{color:#fff;font-weight:600}
.ccard .cmeta{display:flex;gap:6px 16px;flex-wrap:wrap;padding:13px 20px;border-bottom:1px solid var(--line2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:var(--faint)}
.ccard .cmeta .score{color:var(--ds);font-weight:600}
.ccard .cacts{display:flex;gap:8px;flex-wrap:wrap;padding:14px 20px;margin-top:auto}

/* claimable */
.claim{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid color-mix(in srgb,var(--pro) 32%,var(--line));background:color-mix(in srgb,var(--pro) 6%,var(--panel));border-radius:14px;margin-bottom:12px}
.claim .ci{flex:none;width:40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--pro) 14%,var(--panel));color:var(--pro);display:flex;align-items:center;justify-content:center}
.claim .ci svg{width:20px;height:20px}
.claim .ct{flex:1;min-width:0}.claim .ct b{font-size:15px;color:var(--ink);font-weight:600;display:block}.claim .ct span{font-size:12.5px;color:var(--faint)}

.dh-skel{opacity:.5}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:12px;font-size:13.5px;font-weight:500;box-shadow:var(--sh2);z-index:200;opacity:0;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}