/* =====================================================================
   Course app styles (dashboard, modules, community, etc.)
   ===================================================================== */

body.app { background: var(--cream); }

/* top app bar */
.appbar {
  position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.appbar .container { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 14px; }
.appbar .brand { font-size: 1.2rem; }
.appbar nav { display: flex; align-items: center; gap: 6px; }
.appbar nav a {
  color: var(--ink); font-weight: 500; font-size: .95rem; padding: 8px 14px; border-radius: 999px;
}
.appbar nav a:hover { background: var(--blush); color: var(--pink-dark); }
.appbar nav a.active { background: var(--blush); color: var(--pink-dark); }
.appbar nav a.community-link { background: linear-gradient(135deg,#d8bd6e,var(--gold)); color:#4a3a05; font-weight:600; }
.appbar nav a.community-link:hover { filter: brightness(1.03); color:#4a3a05; }
.avatar-mini { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pink-soft); background: var(--blush);
  display:inline-flex; align-items:center; justify-content:center; font-size: .9rem; color: var(--pink-dark); font-weight:700; }

/* hamburger for mobile */
.nav-toggle { display:none; background:none; border:0; font-size:1.6rem; color:var(--pink); cursor:pointer; }
@media (max-width: 880px){
  .nav-toggle{ display:block; }
  .appbar nav { position:absolute; top:66px; left:0; right:0; background:#fff; flex-direction:column; align-items:stretch;
    padding:10px 16px 16px; border-bottom:1px solid var(--line); box-shadow: var(--shadow); display:none; }
  .appbar nav.open { display:flex; }
  .appbar nav a { padding:12px 14px; }
}

/* page shell */
.app-main { padding: 32px 0 70px; }
.page-title { margin-bottom: 4px; }
.page-sub { color: var(--ink-soft); margin-top: 0; }

/* auth screens */
.auth-wrap { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 30px 18px;
  background: radial-gradient(900px 500px at 70% -10%, var(--pink-soft), transparent 55%), linear-gradient(180deg, var(--blush), var(--cream)); }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .brand { justify-content:center; margin-bottom: 6px; font-size:1.5rem; }
.auth-card .center .help a { font-weight:600; }

/* dashboard layout */
.dash-head { background: linear-gradient(135deg, var(--pink), var(--pink-dark)); color:#fff; border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow); }
.dash-head h1, .dash-head p { color:#fff; }
.dash-head .progress-track { background: rgba(255,255,255,.3); margin-top: 14px; }
.dash-head .progress-fill { background: linear-gradient(90deg,#fff, var(--gold-soft)); }
.dash-stats { display:flex; gap: 26px; flex-wrap:wrap; margin-top: 16px; font-size:.95rem; }
.dash-stats b { font-size:1.3rem; display:block; font-family:var(--serif); }

.section-label { display:flex; align-items:center; gap:14px; margin: 36px 0 16px; }
.section-label h2 { font-size: 1.3rem; margin:0; }
.section-label .line { flex:1; height:1px; background: var(--line); }

/* module list cards */
.mlist { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 900px){ .mlist{ grid-template-columns:1fr; } }
.mrow { display:flex; flex-direction:column; }
.mrow .top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.mrow .mnum { width:42px; height:42px; border-radius:12px; background:var(--blush); color:var(--pink-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--serif); flex:0 0 auto; }
.mrow.done .mnum { background:var(--pink); color:#fff; }
.mrow.locked { opacity:.7; }
.mrow h3 { font-size:1.08rem; margin:.5rem 0 .35rem; }
.mrow p { font-size:.9rem; color:var(--ink-soft); margin:0 0 14px; flex:1; }
.mrow .foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* checkpoint card */
.checkpoint { border: 2px dashed var(--gold-soft); background: #fffdf6; }
.checkpoint .cp-ic { font-size: 1.8rem; }
.checkpoint h3 { color: #8a6d12; }
.checkpoint.confirmed { border-style: solid; border-color:#b9e6cd; background:#f3fbf6; }

/* module reading view */
.lesson { background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 34px; }
.lesson-head { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 22px; }
.lesson h3 { margin-top: 1.6rem; color: var(--pink-dark); }
.lesson ul, .lesson ol { padding-left: 1.3rem; }
.lesson li { margin-bottom: .5rem; }
/* slightly smaller reading text inside modules */
.lesson-body { font-size: .95rem; line-height: 1.72; }
.lesson-body h3 { font-size: 1.18rem; }
.objectives, .takeaways { font-size: .92rem; }
/* bold "important" callout inside a lesson */
.lesson-important { background:#fdecef; border:2px solid var(--pink); border-left-width:6px; border-radius:12px;
  padding:16px 20px; margin:24px 0; font-weight:700; color:var(--pink-dark); font-size:1.05rem; line-height:1.5; }
/* softer "tip / note" callout inside a lesson */
.lesson-note { background:var(--blush); border-left:4px solid var(--gold); border-radius:10px;
  padding:14px 18px; margin:18px 0; font-size:.95rem; line-height:1.6; }
.lesson-note strong { color:var(--pink-dark); }
/* lesson images/video + view-only protection */
.lesson-figure { margin:20px 0; }
.lesson-figure img { max-width:100%; display:block; border-radius:12px; border:1px solid var(--line); }
.lesson-figure figcaption { font-size:.85rem; color:var(--ink-soft); text-align:center; margin-top:8px; }
.lesson-video { position:relative; margin:20px 0; }
.lesson-video video, .lesson-video iframe { width:100%; border:0; border-radius:12px; aspect-ratio:16/9; display:block; }
.lesson-video figcaption { font-size:.85rem; color:var(--ink-soft); text-align:center; margin-top:8px; }
.lesson img, .lesson video, .lesson-figure img, .noselect,
.lesson-figure, .lesson-video { -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-user-drag:none; }
.lesson img { pointer-events:none; }
/* media placeholders (shot list) + worked examples inside lessons */
.media-ph { border:2px dashed var(--pink-soft); background:var(--cream); border-radius:12px;
  padding:18px 20px; margin:16px 0; color:var(--ink-soft); font-size:.9rem; text-align:center; }
.media-ph.video { border-color:var(--gold-soft); background:#fffdf6; }
.media-ph .mph-icon { font-size:1.7rem; display:block; margin-bottom:4px; }
.media-ph strong { color:var(--pink-dark); }
.media-ph .mph-note { display:block; margin-top:4px; font-size:.8rem; opacity:.8; }
.worked-example { border-left:4px solid var(--gold); background:#fffdf6; border-radius:0 10px 10px 0;
  padding:14px 18px; margin:16px 0; font-size:.95rem; }
.worked-example .we-label { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#8a6d12; background:#f7eecf; padding:2px 9px; border-radius:999px; margin-bottom:6px; }
.objectives { background: var(--blush); border-radius: var(--radius-sm); padding: 18px 22px; }
.objectives ul { margin:.4rem 0 0; }
.takeaways { background:#fffdf6; border:1px solid var(--gold-soft); border-radius: var(--radius-sm); padding: 18px 22px; }

.block-title { display:flex; align-items:center; gap:10px; margin: 34px 0 14px; }
.block-title .b-ic { width:38px;height:38px;border-radius:10px;background:var(--blush);color:var(--pink);display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
.block-title h2 { margin:0; font-size:1.35rem; }

/* quiz */
.quiz .q { border:1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 16px; }
.quiz .q .qtext { font-weight:600; margin-bottom: 12px; }
.quiz .opt { display:block; padding: 11px 14px; border:1.5px solid var(--line); border-radius: 10px; margin-bottom: 8px; cursor:pointer; transition: all .12s; }
.quiz .opt:hover { border-color: var(--pink-soft); background: var(--cream); }
.quiz .opt input { margin-right: 10px; }
.quiz .opt.correct { border-color:#74c79a; background:#eafaf1; }
.quiz .opt.wrong { border-color:#f0a8b6; background:#fdeef1; }
.quiz .explain { font-size:.88rem; color:var(--ink-soft); margin-top:8px; padding:10px 12px; background:var(--blush); border-radius:8px; display:none; }
.quiz .explain.show { display:block; }
.quiz-result { font-weight:600; padding: 14px 18px; border-radius: var(--radius-sm); margin-top: 6px; }

/* upload box */
.dropbox { border: 2px dashed var(--pink-soft); border-radius: var(--radius-sm); padding: 26px; text-align:center; background: var(--cream); }
.dropbox .big { font-size: 2rem; }
.thumb-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap:10px; margin-top:14px; }
.thumb-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--line); }

/* community */
.community-layout { display:grid; grid-template-columns: 230px 1fr; gap: 24px; }
@media (max-width: 820px){ .community-layout{ grid-template-columns:1fr; } }
.topic-list { list-style:none; padding:0; margin:0; position: sticky; top: 90px; }
.topic-list a { display:block; padding:10px 14px; border-radius:10px; color:var(--ink); font-weight:500; }
.topic-list a:hover, .topic-list a.active { background:var(--blush); color:var(--pink-dark); }
.post { border:1px solid var(--line); border-radius: var(--radius); background:#fff; padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.post-head { display:flex; align-items:flex-start; gap:12px; margin-bottom: 10px; }
.post-head .avatar-mini { width:42px; height:42px; }
.post-head .who { font-weight:600; }
.post-head .meta { font-size:.82rem; color:var(--ink-soft); }
.post .topic-tag { font-size:.75rem; }
.post h3 { font-size:1.15rem; margin:.2rem 0 .5rem; }
.reply { border-left: 3px solid var(--blush); padding: 10px 0 10px 16px; margin: 12px 0 0 8px; }
.reply .post-head .avatar-mini { width:32px; height:32px; }
.reply-form { margin-top: 14px; }
.reply-form textarea { min-height: 60px; }

/* profile */
.profile-avatar { width:120px; height:120px; border-radius:50%; object-fit:cover; border:3px solid var(--pink-soft); background:var(--blush);
  display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:var(--pink-dark);font-weight:700; }

/* submission cards + instructor feedback */
.sub-card { border:1px solid var(--line); border-radius: var(--radius-sm); padding:14px 16px; margin-top:12px; background:var(--cream); }
.sub-card .thumb-grid { margin-top:0; }
.sub-note { white-space:pre-wrap; margin:10px 0 6px; }
.feedback { margin-top:12px; padding:12px 16px; border-radius:10px; background:var(--blush); border-left:4px solid var(--pink); }
.feedback strong { color:var(--pink-dark); }
.feedback p { white-space:pre-wrap; margin:.35rem 0 0; }

/* community photos + instructor reply highlight */
.post-photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin:10px 0; }
.post-photos img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.reply.instructor { border-left-color: var(--gold); background:#fffdf6; border-radius:0 10px 10px 0; }
.badge-instructor { display:inline-block; background:linear-gradient(135deg,#d8bd6e,var(--gold)); color:#4a3a05;
  font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:999px; margin-left:6px; letter-spacing:.03em; vertical-align:middle; }
.file-preview { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.file-preview .chip { font-size:.8rem; background:var(--blush); color:var(--pink-dark); padding:4px 10px; border-radius:999px; }

/* locked overlay note */
.locked-note { text-align:center; padding: 50px 20px; }
.locked-note .lock { font-size: 3rem; }

/* ---- Mobile: slightly smaller course text so more fits on screen ---- */
@media (max-width: 600px){
  body.app { font-size: 15.5px; }
  .lesson { font-size: .95rem; }
  .lesson-body, .lesson-body p, .lesson-body li,
  .lesson p, .lesson li { font-size: .9rem; line-height: 1.55; }
  .lesson h2 { font-size: 1.25rem; }
  .lesson h3 { font-size: 1.08rem; }
  .lesson-important { font-size: .98rem; }
  .objectives { font-size: .9rem; }
}

/* ---- Community author profile chips (location shown inline above) ---- */
.author-info { min-width:0; }
.author-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.pchip { font-size:.72rem; background:var(--blush); color:var(--pink-dark); border-radius:999px;
  padding:3px 10px; line-height:1.35; white-space:nowrap; }
.pchip-ig { text-decoration:none; transition:background .15s ease; }
.pchip-ig:hover { background:var(--pink-soft); color:var(--pink-dark); }

/* ---- Standalone profile details ---- */
.profile-details { display:grid; gap:8px; margin:2px 0 22px; padding:16px 18px; background:var(--blush); border-radius:var(--radius-sm); }
.pd-row { display:flex; gap:12px; font-size:.92rem; }
.pd-label { flex:0 0 158px; color:var(--ink-soft); font-weight:600; }
.pd-val { color:var(--ink); min-width:0; }
@media (max-width:520px){ .pd-row{ flex-direction:column; gap:1px; } .pd-label{ flex-basis:auto; } }

/* ---- Clickable community author name ---- */
.who-link { color:inherit; text-decoration:none; }
.who-link:hover { color:var(--pink-dark); text-decoration:underline; }

/* ---- Clickable avatar + 'View profile' affordance ---- */
.avatar-link { display:inline-flex; text-decoration:none; border-radius:50%; }
.avatar-link:hover { box-shadow:0 0 0 3px var(--pink-soft); }
.view-profile { font-size:.72rem; color:var(--pink); font-weight:600; text-decoration:none; white-space:nowrap; margin-left:2px; }
.view-profile:hover { text-decoration:underline; }

/* ---- Nail shape chart (SVG) ---- */
.shape-chart { display:block; width:100%; max-width:640px; height:auto; margin:14px auto 6px; }