/* ═══ Link2Page · Personal account area ═══
   Profile head, tabs, avatars, settings cards.
   Load order matters — index.html loads css files in numeric order. */

/* ── My Account (personal area) ── */
#profilePage .prof-inner{max-width:1060px;margin:0 auto;padding:2.2rem 4vw 6rem}
#profilePage .prof-head{display:flex;align-items:center;gap:18px;margin-bottom:1.8rem}
#profilePage .prof-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:26px;font-weight:800;flex:0 0 64px;box-shadow:0 0 30px rgba(108,99,255,.35)}
#profilePage .prof-head h2{font-family:var(--fd);font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:-1px}
#profilePage .prof-email{font-size:14px;color:var(--text3);margin-top:2px}
#profilePage .prof-handle{font-size:13px;color:var(--accent2);margin-top:2px}
#profilePage .acc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
#profilePage .acc-card-btn{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.3rem;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s;color:var(--text)}
#profilePage .acc-card-btn:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.22)}
#profilePage .acc-card-ic{width:44px;height:44px;border-radius:13px;background:rgba(108,99,255,.14);display:flex;align-items:center;justify-content:center}
#profilePage .acc-card-ic .ic{width:22px;height:22px;stroke:var(--accent2)}
#profilePage .acc-card-btn.danger .acc-card-ic{background:rgba(244,63,94,.12)}
#profilePage .acc-card-btn.danger .acc-card-ic .ic{stroke:#fda4af}
#profilePage .acc-card-t{font-family:var(--fd);font-size:16px;font-weight:700}
#profilePage .acc-card-d{font-size:12.5px;color:var(--text3);line-height:1.5}
#profilePage .acc-panel{display:none}
#acctSheet{display:none;position:fixed;inset:0;z-index:490}
#acctSheet.open{display:block}
#acctSheet .as-scrim{position:absolute;inset:0;background:rgba(5,5,12,.6);backdrop-filter:blur(4px);animation:asFade .25s ease}
#acctSheet .as-panel{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--bg);border-left:1px solid var(--border2);box-shadow:-30px 0 80px rgba(0,0,0,.4);overflow-y:auto;animation:asSlide .32s cubic-bezier(.22,1,.36,1)}
#acctSheet .as-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
#acctSheet .as-title{font-family:var(--fd);font-size:19px;font-weight:800}
#acctSheet .as-body{padding:22px}
@keyframes asFade{from{opacity:0}to{opacity:1}}
@keyframes asSlide{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
@media(max-width:600px){#acctSheet .as-panel{width:100%}}
@keyframes accFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* panels are physically moved into #acctSheet when opened, so scope to both */
:is(#profilePage,#acctSheet) .prof-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.6rem;transition:border-color .25s;margin-bottom:16px}
:is(#profilePage,#acctSheet) .prof-card:hover{border-color:var(--border2)}
:is(#profilePage,#acctSheet) .prof-card h4{font-family:var(--fd);font-size:16px;font-weight:700;margin-bottom:.4rem}
:is(#profilePage,#acctSheet) .card-sub{font-size:13px;color:var(--text3);line-height:1.6;margin-bottom:1.2rem}
:is(#profilePage,#acctSheet) label{display:block;font-size:13px;color:var(--text2);margin:0 0 6px 2px}
:is(#profilePage,#acctSheet) .pf-input{margin-bottom:1rem}
:is(#profilePage,#acctSheet) .prof-note{font-size:12px;color:var(--text3);line-height:1.6;margin-bottom:1.1rem}
.read-more{background:none;border:none;padding:0;font-family:var(--fb);font-size:inherit;color:var(--accent2);cursor:pointer;text-decoration:underline;text-underline-offset:2px;transition:opacity .15s}
.read-more:hover{opacity:.75}
#infoModal{z-index:540}  /* above the account sheet (z-490) */
#infoModal .qm-card{text-align:left}
#infoModal h3{font-size:19px}
#infoModal p{margin-bottom:1.2rem}
#infoModal .qm-btns{justify-content:flex-end}
:is(#profilePage,#acctSheet) .auth-msg{margin:0;margin-top:1rem;display:none}
:is(#profilePage,#acctSheet) .auth-btn{width:auto;padding:11px 24px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:600;font-family:var(--fb);cursor:pointer;transition:all .2s;box-shadow:0 10px 30px rgba(108,99,255,.25)}
:is(#profilePage,#acctSheet) .auth-btn:hover{transform:translateY(-1px);box-shadow:0 0 40px rgba(108,99,255,.4)}
:is(#profilePage,#acctSheet) .auth-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
:is(#profilePage,#acctSheet) .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:16px}
:is(#profilePage,#acctSheet) .stat-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.2rem}
:is(#profilePage,#acctSheet) .stat-num{font-family:var(--fd);font-size:26px;font-weight:800;color:var(--text)}
:is(#profilePage,#acctSheet) .stat-lbl{font-size:12px;color:var(--text3);margin-top:3px}
:is(#profilePage,#acctSheet) .usage-bar{height:8px;background:var(--bg2);border:1px solid var(--border);border-radius:100px;overflow:hidden;margin:10px 0 8px}
:is(#profilePage,#acctSheet) .usage-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:100px;transition:width .5s ease}
:is(#profilePage,#acctSheet) .usage-note{font-size:13px;color:var(--text2);line-height:1.6}
:is(#profilePage,#acctSheet) .plan-pill{display:inline-block;font-size:12px;font-weight:600;padding:4px 12px;border-radius:100px;background:rgba(108,99,255,.14);color:var(--accent2);border:1px solid rgba(108,99,255,.3);margin-bottom:10px}
:is(#profilePage,#acctSheet) .av-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:1.1rem;padding:4px 2px}
:is(#profilePage,#acctSheet) .av-opt{position:relative;width:54px;height:54px;border-radius:50%;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--fd);font-weight:800;font-size:19px;text-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:inset 0 2px 5px rgba(255,255,255,.28),inset 0 -4px 9px rgba(0,0,0,.28),0 5px 14px rgba(0,0,0,.28);transition:transform .22s cubic-bezier(.34,1.6,.64,1),box-shadow .22s}
:is(#profilePage,#acctSheet) .av-opt::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.55),rgba(255,255,255,.14) 36%,transparent 58%);pointer-events:none}
:is(#profilePage,#acctSheet) .av-opt:hover{transform:translateY(-4px) scale(1.07);box-shadow:inset 0 2px 5px rgba(255,255,255,.28),inset 0 -4px 9px rgba(0,0,0,.28),0 12px 26px rgba(0,0,0,.36)}
:is(#profilePage,#acctSheet) .av-opt.sel{transform:scale(1.05);box-shadow:inset 0 2px 5px rgba(255,255,255,.28),inset 0 -4px 9px rgba(0,0,0,.28),0 0 0 2.5px var(--bg),0 0 0 5px var(--accent),0 0 24px rgba(108,99,255,.55)}
:is(#profilePage,#acctSheet) .av-opt.sel:hover{transform:translateY(-3px) scale(1.08)}
:is(#profilePage,#acctSheet) .av-check{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);box-shadow:0 3px 8px rgba(0,0,0,.35);z-index:1}
:is(#profilePage,#acctSheet) .av-check .ic{width:10px;height:10px;stroke:#fff;stroke-width:2.6;vertical-align:0}
@media(prefers-reduced-motion:reduce){:is(#profilePage,#acctSheet) .av-opt,:is(#profilePage,#acctSheet) .av-opt:hover,:is(#profilePage,#acctSheet) .av-opt.sel{transform:none}}
:is(#profilePage,#acctSheet) .plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
:is(#profilePage,#acctSheet) .plan-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:1.3rem;position:relative;display:flex;flex-direction:column}
:is(#profilePage,#acctSheet) .plan-card.best{border-color:rgba(108,99,255,.45)}
:is(#profilePage,#acctSheet) .plan-tag{position:absolute;top:-10px;right:14px;font-size:11px;font-weight:700;background:var(--accent);color:#fff;padding:3px 10px;border-radius:100px}
:is(#profilePage,#acctSheet) .plan-name{font-family:var(--fd);font-size:15px;font-weight:700}
:is(#profilePage,#acctSheet) .plan-price{font-family:var(--fd);font-size:28px;font-weight:800;margin:8px 0 2px}
:is(#profilePage,#acctSheet) .plan-price span{font-size:13px;font-weight:400;color:var(--text3)}
:is(#profilePage,#acctSheet) .plan-desc{font-size:12.5px;color:var(--text3);line-height:1.6;margin-bottom:12px;flex:1}
:is(#profilePage,#acctSheet) .plan-btn{font-family:var(--fb);font-size:13px;padding:9px;border-radius:9px;border:1px solid var(--border2);background:transparent;color:var(--text3);cursor:not-allowed;width:100%}
:is(#profilePage,#acctSheet) .empty-box{text-align:center;padding:2rem 1rem;border:1px dashed var(--border2);border-radius:14px;color:var(--text3);font-size:14px;line-height:1.7}
:is(#profilePage,#acctSheet) .empty-box .e-icon{font-size:28px;margin-bottom:8px}
:is(#profilePage,#acctSheet) .soon-note{display:flex;gap:10px;align-items:flex-start;background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.25);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--text2);line-height:1.6;margin-top:14px}
:is(#profilePage,#acctSheet) .prof-danger{color:#fda4af;border-color:rgba(244,63,94,.25)}
:is(#profilePage,#acctSheet) .prof-danger:hover{background:rgba(244,63,94,.08);color:#fda4af}
:is(#profilePage,#acctSheet) .quick-row{display:flex;gap:10px;flex-wrap:wrap}
:is(#profilePage,#acctSheet) .quick-row .back-btn{flex:0 0 auto}
@media(max-width:820px){

}