/* Profile & account tools */
.profile-panel { background:#f4f1e9;transition:transform .55s cubic-bezier(.22,1,.36,1); }
.profile-topbar { height:82px;flex:none;display:flex;align-items:center;gap:17px;padding:0 max(20px,calc((100vw - 720px)/2));background:#222920;color:#f8f3e7;position:relative;z-index:1; }
.profile-back { width:44px;height:44px;border-radius:50%;border:1px solid rgba(248,243,231,.27);background:transparent;color:#f8f3e7;display:grid;place-items:center;cursor:pointer;transition:transform .25s,background .25s; }
.profile-back svg { width:20px;height:20px; }
.profile-back:hover { transform:translateX(-3px);background:rgba(255,255,255,.1); }
.profile-topbar-title { display:flex;flex-direction:column;gap:3px;flex:1; }
.profile-topbar-title span { font:700 9px 'DM Sans';letter-spacing:.18em;color:#d7a28b; }
.profile-topbar-title strong { font:400 30px/1 'Bebas Neue';letter-spacing:.08em; }
.profile-topbar-mark { color:#93988b;border:1px solid rgba(255,255,255,.2);border-radius:50%;width:39px;height:39px;display:grid;place-items:center;font:18px 'Bebas Neue';letter-spacing:.04em; }
.profile-body { padding:0 0 42px;align-items:stretch; }
.profile-av-hero { width:100%;min-height:206px;position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:20px;padding:26px max(24px,calc((100vw - 680px)/2));margin:0 0 24px;background:#222920;color:#fbf5e8; }
.profile-av-hero:after { content:'';position:absolute;z-index:-1;right:-65px;bottom:-191px;width:340px;height:340px;border:1px solid rgba(245,240,226,.16);border-radius:50%;box-shadow:0 0 0 29px rgba(245,240,226,.04),0 0 0 75px rgba(245,240,226,.035); }
.profile-hero-orbit { position:absolute;z-index:-1;right:25%;top:-150px;width:210px;height:210px;border:1px solid rgba(245,240,226,.08);border-radius:50%; }
.profile-av-btn { position:relative;flex:none;border-radius:25px;animation:profile-avatar-enter .65s .06s both cubic-bezier(.22,1,.36,1); }
.profile-avatar-large { width:94px;height:94px;border:3px solid rgba(250,245,232,.86);border-radius:24px;background:#e65a3c;box-shadow:0 10px 25px rgba(0,0,0,.2);font-size:34px; }
.profile-av-camera { width:32px;height:32px;right:-7px;bottom:-7px;border:3px solid #222920;background:#e85d3f;box-shadow:none; }
.profile-av-camera svg { width:17px;height:17px; }
.profile-identity { position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;animation:profile-copy-enter .65s .12s both cubic-bezier(.22,1,.36,1); }
.profile-identity-kicker { color:#e4aa91;font:700 9px 'DM Sans';letter-spacing:.15em; }
.profile-uname { color:#fff9ec;font-size:clamp(34px,9vw,49px);line-height:.95;letter-spacing:.045em; }
.profile-tap-hint { color:#c0c7b8;font-size:12px; }
.profile-hero-number { margin-left:auto;align-self:flex-end;color:#a1a796;font:400 51px/.72 'Bebas Neue';text-align:right;letter-spacing:.04em;opacity:.82; }
.profile-hero-number i { font:700 8px 'DM Sans';letter-spacing:.17em;color:#c7b6a0; }
.profile-sections { width:min(100% - 40px,600px);max-width:600px;margin:0 auto;gap:9px; }
.profile-group-label { display:flex;align-items:center;justify-content:space-between;color:#8c8e81;font:700 9px 'DM Sans';letter-spacing:.16em;padding:9px 3px 2px;margin-top:5px; }
.profile-group-label span:last-child { color:#b4afa2; }
.profile-section-card { background:#fffdf8;border:1px solid #ded9cf;border-radius:17px;box-shadow:0 5px 18px rgba(38,42,34,.035);transition:transform .25s,border-color .25s,box-shadow .25s; }
.profile-section-card:hover { border-color:#cfc5b6;box-shadow:0 10px 24px rgba(38,42,34,.075); }
.profile-row { min-height:68px;padding:12px 14px;gap:12px; }
.profile-row-icon { width:41px;height:41px;border-radius:13px; }
.profile-row-icon svg { width:18px;height:18px; }
.profile-row-label { font-size:14px;font-weight:700; }
.profile-row-value { border-radius:30px;background:#f3f0e8;padding:6px 9px;font-size:10px;font-weight:700;letter-spacing:.025em;color:#777c70;white-space:nowrap; }
.profile-row-chevron { width:17px;height:17px;color:#8e9285; }
.profile-section-card .profile-row:hover .profile-row-chevron,.profile-section-card:hover .profile-row-chevron { transform:translateX(3px); }
.profile-row-sep { margin:0 14px 0 67px;background:#ebe6dc; }
#profile-pw-form { padding:2px 14px 15px; }
.profile-pw-save { border-radius:12px;background:#252d24;box-shadow:none; }
.profile-pw-save:hover { background:#384232;box-shadow:0 5px 15px rgba(34,41,32,.18); }
.profile-panel.on .profile-group-label,.profile-panel.on .profile-section-card { animation:profile-row-enter .48s both cubic-bezier(.22,1,.36,1); }
.profile-panel.on .profile-group-label:nth-child(1) { animation-delay:.1s; }
.profile-panel.on .profile-section-card:nth-child(2) { animation-delay:.14s; }
.profile-panel.on .profile-group-label:nth-child(3) { animation-delay:.18s; }
.profile-panel.on .profile-section-card:nth-child(4) { animation-delay:.22s; }
.profile-panel.on .profile-group-label:nth-child(5) { animation-delay:.26s; }
.profile-panel.on .profile-section-card:nth-child(6) { animation-delay:.3s; }
@keyframes profile-row-enter { from { opacity:0;transform:translateY(14px); } to { opacity:1;transform:translateY(0); } }
@keyframes profile-avatar-enter { from { opacity:0;transform:translateX(-18px) scale(.88); } to { opacity:1;transform:translateX(0) scale(1); } }
@keyframes profile-copy-enter { from { opacity:0;transform:translateX(12px); } to { opacity:1;transform:translateX(0); } }
.profile-panel :is(button):focus-visible { outline:3px solid #ed7352;outline-offset:3px; }
@media (max-width:430px) { .profile-topbar { height:72px;gap:12px;padding:0 20px; }.profile-topbar-title strong { font-size:26px; }.profile-topbar-mark { width:34px;height:34px;font-size:16px; }.profile-av-hero { min-height:182px;gap:15px;padding:22px 23px; }.profile-avatar-large { width:78px;height:78px;border-radius:21px; }.profile-uname { font-size:36px; }.profile-hero-number { font-size:38px; }.profile-sections { width:calc(100% - 36px); } }
@media (max-width:355px) { .profile-av-hero { gap:12px;padding-left:18px;padding-right:18px; }.profile-avatar-large { width:70px;height:70px;border-radius:19px; }.profile-identity-kicker { font-size:8px; }.profile-uname { font-size:32px; }.profile-hero-number { font-size:32px; }.profile-hero-number i { font-size:7px; }.profile-row { gap:8px;padding-left:10px;padding-right:10px; }.profile-row-icon { width:36px;height:36px; } }
@media (prefers-reduced-motion:reduce) { .profile-panel,.profile-panel.on .profile-group-label,.profile-panel.on .profile-section-card,.profile-av-btn,.profile-identity { animation:none;transition:none; } }
