:root { --profile-panel: rgba(255,255,255,.92); --profile-soft: rgba(248,250,252,.75); --profile-ink:#172033; --profile-muted:#667085; --profile-line:#e5e9f1; --profile-accent:#6857e8; }
[data-theme="dark"] { --profile-panel: rgba(25,35,57,.92); --profile-soft:rgba(17,25,43,.74); --profile-ink:#eef2ff; --profile-muted:#9ca9c2; --profile-line:rgba(151,170,208,.2); }
.profile-page { min-height:100vh; color:var(--profile-ink); background:radial-gradient(circle at 85% 0%,rgba(80,70,210,.22),transparent 30rem),var(--bg-primary); }
.profile-main{padding:90px 0 110px}.profile-header{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}.profile-eyebrow{color:var(--profile-accent);font-size:.7rem;font-weight:900;letter-spacing:.16em}.profile-header h1{margin:12px 0 8px;font-size:clamp(2rem,4vw,3.3rem);letter-spacing:-.04em}.profile-header p{margin:0;color:var(--profile-muted);font-size:1rem}.profile-mode{padding:9px 13px;border:1px solid var(--profile-line);border-radius:99px;color:var(--profile-muted);font-size:.76rem;white-space:nowrap}.profile-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}.profile-stat-grid article,.profile-panel{border:1px solid var(--profile-line);border-radius:20px;background:var(--profile-panel);box-shadow:0 16px 55px rgba(15,23,42,.1)}.profile-stat-grid article{padding:20px}.stat-label,.profile-stat-grid small{display:block;color:var(--profile-muted);font-size:.78rem}.profile-stat-grid strong{display:block;margin:10px 0 5px;font-size:2rem;letter-spacing:-.06em}.stat-highlight{background:linear-gradient(145deg,rgba(104,87,232,.18),var(--profile-panel))!important}.stat-highlight strong{color:var(--profile-accent)}.profile-columns{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.75fr);gap:18px}.profile-panel{padding:25px}.panel-heading{display:flex;justify-content:space-between;gap:20px;align-items:start}.panel-heading h2,.next-panel h2{margin:8px 0 0;font-size:1.35rem}.panel-heading a{color:var(--profile-accent);font-size:.8rem;font-weight:800;text-decoration:none}.panel-note{margin:16px 0 22px;color:var(--profile-muted);font-size:.8rem;line-height:1.6}.topic-progress-list{display:grid;gap:14px}.topic-progress{display:grid;grid-template-columns:minmax(105px,1fr) minmax(120px,2fr) 55px;gap:14px;align-items:center}.topic-progress strong{font-size:.86rem}.topic-progress small{color:var(--profile-muted);font-size:.73rem}.topic-track{height:8px;border-radius:99px;background:var(--profile-line);overflow:hidden}.topic-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7869ef,#33c1c1)}.topic-progress-value{text-align:right;color:var(--profile-accent);font-size:.78rem;font-weight:800}.next-panel{height:fit-content}.next-item{display:grid;grid-template-columns:36px 1fr 20px;gap:11px;align-items:center;margin-top:17px;padding-top:17px;border-top:1px solid var(--profile-line)}.next-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;font-weight:900}.next-icon.purple{color:#a78bfa;background:rgba(167,139,250,.16)}.next-icon.blue{color:#38bdf8;background:rgba(56,189,248,.16)}.next-item strong,.next-item small{display:block}.next-item strong{font-size:.84rem}.next-item small{margin-top:4px;color:var(--profile-muted);font-size:.72rem}.next-item a{color:var(--profile-accent);font-size:1.25rem;text-decoration:none}.privacy-panel{display:flex;gap:12px;align-items:flex-start;margin-top:18px;background:var(--profile-soft)}.privacy-mark{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;color:#34d399;background:rgba(52,211,153,.14);font-weight:900}.privacy-panel strong{font-size:.82rem}.privacy-panel p{margin:7px 0 0;color:var(--profile-muted);font-size:.75rem;line-height:1.55}.profile-gate{max-width:520px;margin:80px auto;padding:45px 30px;border:1px solid var(--profile-line);border-radius:24px;text-align:center;background:var(--profile-panel)}.profile-gate[hidden]{display:none}.profile-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 20px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#7869ef,#33bfc0);font-size:1.8rem}.profile-gate h1{font-size:1.7rem}.profile-gate p{color:var(--profile-muted);line-height:1.7}.profile-button{display:inline-block;margin-top:12px;padding:12px 18px;border-radius:10px;color:#fff;background:var(--profile-accent);font-weight:800;text-decoration:none}.profile-toast{position:fixed;right:22px;bottom:22px;padding:13px 16px;border:1px solid var(--profile-line);border-radius:11px;color:var(--profile-ink);background:var(--profile-panel);box-shadow:0 12px 30px rgba(15,23,42,.2);opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}.profile-toast.is-visible{opacity:1;transform:translateY(0)}
.profile-guide-panel{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:18px;background:linear-gradient(105deg,rgba(104,87,232,.14),var(--profile-panel))}.profile-guide-panel h2{margin:8px 0 5px;font-size:1.25rem}.profile-guide-panel p{max-width:720px;margin:0;color:var(--profile-muted);font-size:.82rem;line-height:1.65}.profile-guide-panel .profile-button{margin-top:0;white-space:nowrap}
@media(max-width:800px){.profile-main{padding-top:52px}.profile-header{display:block}.profile-mode{display:inline-block;margin-top:18px}.profile-stat-grid{grid-template-columns:1fr 1fr}.profile-columns{grid-template-columns:1fr}.topic-progress{grid-template-columns:110px 1fr 48px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
.submissions-panel{margin-top:18px}.profile-submissions{display:grid;gap:10px}.submission-row{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:15px 0;border-top:1px solid var(--profile-line)}.submission-row:first-child{border-top:0;padding-top:0}.submission-row-main{min-width:0}.submission-row-title{display:flex;align-items:center;gap:9px}.submission-row-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}.submission-row-main>small,.submission-note{display:block;margin-top:6px;color:var(--profile-muted);font-size:.73rem}.submission-problem{padding:3px 7px;border-radius:6px;color:#7c6cf3;background:rgba(124,108,243,.12);font:700 .7rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}.submission-row-side{display:flex;align-items:center;gap:14px;flex-shrink:0}.submission-status{padding:5px 9px;border-radius:99px;font-size:.7rem;font-weight:800}.submission-status.pending{color:#b7791f;background:rgba(245,158,11,.14)}.submission-status.approved{color:#059669;background:rgba(16,185,129,.14)}.submission-status.rejected{color:#dc2626;background:rgba(239,68,68,.12)}.submission-row-side a{color:var(--profile-accent);font-size:.75rem;font-weight:800;text-decoration:none}.submission-action{color:var(--profile-muted);font-size:.72rem}.submission-empty{display:flex;align-items:center;gap:13px;padding:18px;border:1px dashed var(--profile-line);border-radius:14px;color:var(--profile-muted)}.submission-empty>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#a78bfa;background:rgba(167,139,250,.14)}.submission-empty strong,.submission-empty small{display:block}.submission-empty strong{color:var(--profile-ink);font-size:.84rem}.submission-empty small{margin-top:4px;font-size:.74rem}.submission-empty a{margin-left:auto;color:var(--profile-accent);font-size:.76rem;font-weight:800;text-decoration:none;white-space:nowrap}
@media(max-width:600px){.submission-row{display:block}.submission-row-side{justify-content:space-between;margin-top:11px}.submission-empty{align-items:flex-start;flex-wrap:wrap}.submission-empty a{margin-left:47px}}
.recent-panel{margin-top:18px}.recent-activity-list{display:grid;gap:0}.recent-activity-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--profile-line)}.recent-activity-row:first-child{border-top:0;padding-top:0}.recent-status{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;font-weight:900;font-size:.86rem;flex:none}.recent-status.completed{color:#059669;background:rgba(16,185,129,.14)}.recent-status.learning{color:#7c6cf3;background:rgba(124,108,243,.14)}.recent-status.not-started{color:var(--profile-muted);background:var(--profile-soft)}.recent-activity-main{min-width:0;flex:1}.recent-activity-main>div{display:flex;align-items:center;gap:9px;min-width:0}.recent-problem-code{color:var(--profile-accent);font:800 .72rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;text-decoration:none}.recent-activity-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}.recent-activity-main small{display:block;margin-top:5px;color:var(--profile-muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-activity-label{padding:5px 9px;border-radius:99px;font-size:.68rem;font-weight:800;white-space:nowrap}.recent-activity-label.completed{color:#059669;background:rgba(16,185,129,.14)}.recent-activity-label.learning{color:#7c6cf3;background:rgba(124,108,243,.14)}.recent-activity-label.not-started{color:var(--profile-muted);background:var(--profile-soft)}.recent-empty{display:flex;align-items:center;gap:13px;padding:18px;border:1px dashed var(--profile-line);border-radius:14px;color:var(--profile-muted)}.recent-empty>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#a78bfa;background:rgba(167,139,250,.14)}.recent-empty strong,.recent-empty small{display:block}.recent-empty strong{color:var(--profile-ink);font-size:.84rem}.recent-empty small{margin-top:4px;font-size:.74rem}.recent-empty a{margin-left:auto;color:var(--profile-accent);font-size:.76rem;font-weight:800;text-decoration:none;white-space:nowrap}
@media(max-width:600px){.recent-activity-row{gap:9px}.recent-activity-label{padding:4px 7px}.recent-empty{align-items:flex-start;flex-wrap:wrap}.recent-empty a{margin-left:47px}}
.membership-panel{margin-bottom:18px;background:linear-gradient(145deg,rgba(104,87,232,.13),var(--profile-panel))}.membership-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.membership-panel h2{margin:8px 0 0;font-size:1.25rem}.membership-status{padding:5px 9px;border:1px solid var(--profile-line);border-radius:99px;color:var(--profile-muted);font-size:.7rem;font-weight:800}.membership-status.is-active{border-color:rgba(16,185,129,.3);color:#059669;background:rgba(16,185,129,.1)}.membership-expiry{padding:12px 14px;border:1px solid var(--profile-line);border-radius:11px;color:var(--profile-muted);font-size:.76rem;background:var(--profile-soft)}.membership-expiry strong{margin-left:5px;color:var(--profile-ink);font-size:.9rem}.membership-renew-note{display:block;margin-top:10px;color:var(--profile-muted);font-size:.7rem}.membership-form{display:grid;gap:8px}.membership-form label{color:var(--profile-ink);font-size:.76rem;font-weight:800}.membership-input-row{display:flex;gap:8px}.membership-input-row input{min-width:0;flex:1;padding:11px 12px;border:1px solid var(--profile-line);border-radius:9px;outline:0;color:var(--profile-ink);background:var(--profile-soft);font:700 .78rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em}.membership-input-row input:focus{border-color:var(--profile-accent);box-shadow:0 0 0 3px rgba(104,87,232,.13)}.membership-input-row button{padding:0 13px;border:0;border-radius:9px;color:#fff;background:var(--profile-accent);font:800 .76rem/1 inherit;cursor:pointer;white-space:nowrap}.membership-input-row button:disabled{opacity:.55;cursor:wait}.membership-form>small{color:var(--profile-muted);font-size:.7rem;line-height:1.5}.membership-form-message{min-height:18px;color:var(--profile-muted);font-size:.72rem}.membership-form-message[data-state="error"]{color:#dc2626}.membership-form-message[data-state="info"]{color:var(--profile-accent)}
@media(max-width:420px){.membership-input-row{display:grid}.membership-input-row button{padding:11px}}
.submission-status.unpublished{color:#a06113;background:rgba(202,140,35,.14)}

.profile-featured-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 145px;
    align-items: center;
    gap: 26px;
    margin-bottom: 26px;
    padding: 25px 28px;
    border: 1px solid var(--profile-line);
    border-radius: 20px;
    background: linear-gradient(110deg, rgba(104, 87, 232, .2), var(--profile-panel));
    box-shadow: 0 16px 55px rgba(15, 23, 42, .1);
}
.profile-featured-copy h2 { margin: 9px 0 8px; color: var(--profile-ink); font-size: clamp(21px, 2.7vw, 29px); line-height: 1.3; }
.profile-featured-copy p { max-width: 680px; margin: 0; color: var(--profile-muted); font-size: 14px; line-height: 1.7; }
.profile-featured-link { display: inline-flex; gap: 8px; align-items: center; margin-top: 17px; padding: 10px 14px; border-radius: 9px; color: #fff; background: var(--profile-accent); font-size: 13px; font-weight: 800; text-decoration: none; }
.profile-featured-link:hover { filter: brightness(1.1); }
.profile-featured-link:focus-visible, .profile-featured-cover:focus-visible { outline: 2px solid var(--profile-accent); outline-offset: 3px; }
.profile-featured-cover { display: block; padding: 5px; border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(15, 23, 42, .2); transform: rotate(3deg); }
.profile-featured-cover img { display: block; width: 100%; height: 176px; object-fit: contain; }
@media (max-width: 600px) {
    .profile-featured-article { grid-template-columns: minmax(0, 1fr) 90px; gap: 14px; padding: 18px; }
    .profile-featured-cover img { height: 126px; }
    .profile-featured-copy p { font-size: 12px; }
}
@media (max-width: 420px) {
    .profile-featured-article { grid-template-columns: 1fr; }
    .profile-featured-cover { display: none; }
}