
.owned-main { padding:.3rem 1.6rem 1.2rem; }
.owned-main>.course-back { margin-left:-.5rem; }
.owned-header { position:relative; padding-right:10rem; }
.owned-header .eyebrow { margin:.3rem 0 .3rem; }
.owned-header h1 { font-size:2.2rem; line-height:2.5rem; letter-spacing:-.05rem; }
.owned-intro { color:var(--muted); font-size:1.15rem; line-height:1.45rem; margin:.3rem 0 1.1rem; }
.access-badge { position:absolute; right:0; top:.4rem; display:flex; align-items:center; gap:.6rem; padding:.7rem .8rem; border-radius:.9rem; background:#f3edff; color:var(--purple); }
.access-badge>span { display:grid; place-items:center; background:var(--purple); color:#fff; width:2.3rem; height:2.3rem; font-size:2rem; border-radius:.6rem; }
.access-badge strong { display:block; font-size:.95rem; }
.access-badge small { display:block; font-size:.8rem; margin-top:.2rem; }
.course-filters { display:flex; gap:.6rem; margin:1.2rem 0; }
.course-filters button { flex:1; white-space:nowrap; text-align:center; border-radius:.6rem; background:#f2efff; font-size:.8rem; padding:.6rem .8rem; color:#626e9d; }
.course-filters button[aria-pressed="true"] { background:var(--purple); color:#fff; }
.owned-list { display:grid; gap:1.15rem; }
.owned-course { display:grid; grid-template-columns:12rem minmax(0,1fr); gap:.7rem; min-width:0; }
.owned-course[hidden] { display:none; }
.owned-photo { min-height:10.6rem; border-radius:.9rem; background-image:url('assets/my-courses-reference.webp'); background-size:calc(51400% / 115) calc(96000% / 102); background-position:calc(72 * 100% / (514 - 115)) calc(var(--photo-y) * 100% / (960 - 102)); }
.owned-copy { position:relative; min-width:0; border:1px solid #eeeafb; border-radius:1rem; background:#ffffffa8; padding:.5rem .9rem .7rem; }
.owned-copy:after { content:'›'; position:absolute; right:1rem; top:.8rem; font-size:2.4rem; color:#8999c9; pointer-events:none; }
.course-label { display:table; background:#f2eaff; color:var(--purple); padding:.1rem .6rem; border-radius:.5rem; font-size:.8rem; }
.owned-page .owned-copy h2 { font-size:1.15rem; line-height:1.35rem; letter-spacing:-.015rem; padding-right:1.5rem; margin:.25rem 0 .1rem; }
.owned-copy>p { font-size:.92rem; line-height:1.2rem; color:var(--muted); min-height:1.3rem; }
.owned-progress { display:flex; align-items:center; gap:.8rem; margin-top:.65rem; color:var(--muted); font-size:.9rem; }
.owned-progress progress { appearance:none; width:100%; flex:1; min-width:0; height:.5rem; border:0; border-radius:1rem; overflow:hidden; background:#f0ebff; }
.owned-progress progress::-webkit-progress-bar { background:#f0ebff; }
.owned-progress progress::-webkit-progress-value { background:#9d73ff; border-radius:1rem; }
.owned-progress progress::-moz-progress-bar { background:#9d73ff; }
.owned-progress span { min-width:2.4rem; text-align:right; }
.owned-copy>small { display:block; font-size:.85rem; color:var(--muted); margin:0 0 .5rem; }
.lesson-button { width:100%; text-align:center; padding:.5rem; border-radius:.5rem; background:#9b79ed; color:#fff; font-size:.95rem; }
.extra-materials { margin-top:1.2rem; }
.owned-page h2 { font-size:1.35rem; letter-spacing:-.025rem; }
.materials-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; margin-top:.6rem; }
.materials-grid button { display:flex; flex-direction:column; align-items:center; background:#f6f2ff; text-align:center; border-radius:1rem; padding:1.1rem .3rem .8rem; }
.materials-grid svg { width:2.2rem; height:2.2rem; color:var(--purple); margin-bottom:.7rem; }
.materials-grid strong { font-size:.95rem; line-height:1.2rem; }
.materials-grid span { color:var(--muted); font-size:.85rem; line-height:1.05rem; margin-top:.45rem; }
.course-support { display:flex; align-items:center; gap:1rem; width:100%; margin-top:1.2rem; border-radius:1rem; padding:1.1rem; background:#fceffa; }
.support-heart { display:grid; place-items:center; font-size:2.8rem; color:#ff7cae; background:white; border-radius:1rem; width:3.5rem; height:3.5rem; flex-shrink:0; }
.course-support strong { font-size:1.15rem; }
.course-support small { display:block; color:#7580ae; font-size:.95rem; line-height:1.25rem; margin-top:.2rem; }
.demo-note { margin-top:1rem; text-align:center; font-size:.85rem; color:var(--muted); }
.reset-payment { background:none; color:var(--muted); text-decoration:underline; }
.course-action-status { padding:1rem; margin-top:1rem; border-radius:.8rem; background:#f1ebff; font-size:1.1rem; }
