/* Copper: course-wide visual identity inspired by light, orbit and graphite. */
:root, [data-theme="dark"] {
  --bg: #111110; --bg-panel: #171615; --bg-card: #1d1b1a; --bg-input: #151413;
  --text: #f1eae4; --text-dim: #b7aaa2; --border: #3b3330;
  --cyan: #ffad77; --cyan-soft: #33231d; --green: #baca9c; --green-soft: #293023;
  --pink: #f29b9b; --pink-soft: #382425; --hero: #221c19; --button-text: #21130d;
}
[data-theme="light"] {
  --bg: #f5f0eb; --bg-panel: #fffaf6; --bg-card: #fffcf9; --bg-input: #faf3ed;
  --text: #30221d; --text-dim: #776257; --border: #ddccc0;
  --cyan: #99431e; --cyan-soft: #f4e5d9; --green: #466239; --green-soft: #eaf0df;
  --pink: #a33243; --pink-soft: #fbe7e9; --hero: #eee0d6; --button-text: #fffaf5;
}
.sidebar { background: var(--bg-panel); }
.brand .logo { color: var(--cyan); }
.brand h1 { letter-spacing: -.5px; }
.topbar { background: var(--bg); }
.content h2 { letter-spacing: -1.1px; }
.eyebrow { letter-spacing: .14em; }
.home-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--hero); border: 1px solid var(--border); border-radius: 16px; min-height: 395px; }
.hero-copy, .resume-panel { position: relative; z-index: 1; }
.hero-copy { max-width: 560px; }
.home-hero h2 { font-size: clamp(32px,3.7vw,52px); line-height: 1.06; letter-spacing: -2px; }
.home-hero .hero-description { max-width: 460px; }
.hero-orbit { position: absolute; pointer-events: none; z-index: -1; width: 430px; height: 350px; right: 180px; bottom: -180px; opacity: .65; transform: rotate(-25deg); }
.hero-orbit::before { content: ""; position: absolute; inset: 20px 50px; border-radius: 50%; background: radial-gradient(circle at 65% 20%, #3c2018, #110e0c 60%); box-shadow: inset 0 2px 2px #ffc387, 0 -4px 22px #f9772555; }
.hero-orbit::after { content: ""; position: absolute; inset: 90px -50px; border-radius: 50%; border: 3px solid #ffb06b; box-shadow: 0 0 5px #fff0d5, 0 0 16px #ff682b, 0 0 40px #e94916, inset 0 0 14px #ff6c2a; transform: rotate(-8deg); }
.resume-panel { background: var(--bg-panel); border-radius: 12px; }
.resume-panel .btn { gap: 16px; }
.btn.primary { background: var(--cyan); color: var(--button-text); }
[data-theme="dark"] .btn.primary { background: #ee9661; border-color: #ee9661; }
[data-theme="dark"] .btn.primary:hover { background: #ffad77; }
.module-grid { gap: 20px; }
.module-card, [data-reading="true"] .module-card { overflow: hidden; padding: 22px; border-radius: 12px; position: relative; }
.module-card .mc-icon { margin-top: 18px; background: var(--cyan-soft); width: 32px; height: 32px; padding: 7px; }
.module-card .mc-num { top: 180px; right: 24px; font-variant-numeric: tabular-nums; }
.module-card h3 { margin-top: 14px; }
.module-card:hover { border-color: var(--cyan); box-shadow: 0 8px 32px #0002; }
.module-art { position: relative; display: block; width: calc(100% + 44px); height: 140px; margin: -22px -22px 0; overflow: hidden; background: #100d0c; isolation: isolate; }
.module-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 110%, #aa482633, transparent 70%); }
.art-orb { position: absolute; width: 134px; height: 134px; top: 32px; left: calc(50% - 67px); border-radius: 50%; background: radial-gradient(circle at 60% 4%, #744026, #140d0a 43%, #070707 70%); box-shadow: 0 -2px 2px #ffbf83, 0 -7px 18px #ef6d3040; }
.art-ring { position: absolute; width: 265px; height: 56px; top: 84px; left: calc(50% - 132px); border-radius: 50%; border: 2px solid #ffb379; transform: rotate(-23deg); box-shadow: 0 0 5px #ffc78d, 0 0 16px #f65821, inset 0 0 8px #f65821; }
.art-1 { background: radial-gradient(ellipse at 50% 110%, #fa6d24, #50261d 24%, #130e0c 68%); }
.art-1 .art-orb { top: -72px; width: 180px; height: 180px; left: calc(50% - 90px); background: #100d0b; box-shadow: 0 2px 2px #ffbf83, 0 8px 30px #f86e26; }
.art-1 .art-ring { top: 120px; height: 30px; transform: rotate(0); opacity: .6; }
.art-2 .art-orb { border-radius: 22px; width: 86px; height: 160px; top: 16px; left: calc(50% - 43px); transform: rotate(27deg); background: linear-gradient(100deg,#ffbc7f,#e26932 12%,#472016 40%,#140e0b 75%); box-shadow: -3px 0 20px #ed6b3033; }
.art-2 .art-ring { transform: rotate(-60deg); width: 165px; height: 50px; left: calc(50% - 82px); top: 70px; opacity: .65; }
.art-3 .art-orb { width: 68px; height: 68px; top: 36px; left: calc(50% - 34px); background: radial-gradient(circle at 35% 26%,#ffe1b0,#fa893f 25%,#682512 68%,#180e09); box-shadow: 0 8px 50px #eb5f2833; }
.art-3 .art-ring { width: 116px; height: 170px; left: calc(50% - 58px); top: -16px; border-color: #9b4a2a; transform: rotate(48deg); box-shadow: 0 0 12px #dc602030; }
.art-4 { background: radial-gradient(ellipse at 50% 140%,#ff9b57,#5e2919 30%,#100d0c 65%); }
.art-4 .art-orb { width: 210px; height: 150px; top: -97px; left: calc(50% - 105px); box-shadow: 0 2px 3px #ffc587,0 6px 30px #fe6f23; background: #110d0b; }
.art-4 .art-ring { top: 113px; transform: rotate(0); width: 180px; left: calc(50% - 90px); height: 65px; }
.module-card:nth-child(n+6) .module-art { transform: scaleX(-1); }
.mc-progress > span, .progress-fill { background: var(--cyan); }
.objective { background: var(--cyan-soft); border-left: 2px solid var(--cyan); }
.callout { background: var(--cyan-soft); }
.formula { border-left: 2px solid var(--cyan); }
.lesson-step[aria-current="step"] { background: var(--cyan); color: var(--button-text); }
.lesson-footer { border-top-color: var(--border); }
.practice { background: var(--bg-card); }
.quiz-opt:not(.right):not(.wrong):has(input:checked) { border-color: var(--cyan); background: var(--cyan-soft); }
.login-screen { background: radial-gradient(ellipse at 50% 110%,#7d371930,transparent 60%),var(--bg); }
.login-box { box-shadow: 0 25px 100px #0002; }
[data-theme="light"] .hero-orbit { opacity: .22; }
@media(max-width:620px) {
  .home-hero { padding: 24px; }
  .home-hero h2 { font-size: 36px; letter-spacing: -1.4px; }
  .hero-orbit { bottom: 130px; right: -130px; opacity: .22; }
  .hero-copy { max-width: 100%; }
  .module-art { height: 126px; }
  .module-card .mc-num { top: 165px; }
}

/* Match the image's native ratio: full composition, no letterbox bands. */
.module-card .module-art.generated-art { height: auto; aspect-ratio: 3 / 2; transform: none; background: #100e0d; }
.generated-art::before { display: none; }
.generated-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.module-card.has-generated-art .mc-num { position: static; align-self: flex-end; height: 32px; line-height: 32px; margin-top: -32px; }

/* Polished graphite and copper; lesson reading surfaces remain matte. */
[data-theme="dark"] .module-card {
  background: linear-gradient(155deg, #292521 0%, #1d1b19 45%, #191817 100%);
  border-color: #4b3c32;
}
[data-theme="dark"][data-reading="true"] .module-card {
  box-shadow: inset 0 1px 0 #ffe0bd26, 0 8px 24px #0003;
}
[data-theme="dark"][data-reading="true"] .module-card:hover,
[data-theme="dark"][data-reading="true"] .module-card:focus-visible {
  border-color: #b47b53;
  box-shadow: inset 0 1px 0 #ffe0bd55, 0 12px 32px #0005, 0 0 18px #e48a3b12;
}
.module-card .generated-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 15%, #fff0d400 32%, #fff0d418 45%, #fff0d400 58%, transparent 80%);
  opacity: 0; transform: translateX(-18%);
  transition: opacity .3s ease, transform .65s ease;
}
.module-card:hover .generated-art::after,
.module-card:focus-visible .generated-art::after { opacity: 1; transform: translateX(15%); }
[data-theme="dark"] .resume-panel {
  background: linear-gradient(145deg, #28231f, #171615 65%);
  border-color: #584334;
  box-shadow: inset 0 1px 0 #ffe3c22e, 0 14px 36px #0004;
}
[data-theme="dark"] .btn.primary,
[data-theme="dark"][data-reading="true"] .btn.primary {
  background: linear-gradient(170deg, #ffd4a5 0%, #efa66c 40%, #c57542 100%);
  border-color: #f4ba86; color: #29170e;
  box-shadow: inset 0 1px 0 #fff2dca6, inset 0 -1px 0 #6c341e66, 0 4px 12px #0004;
}
[data-theme="dark"] .btn.primary:hover,
[data-theme="dark"][data-reading="true"] .btn.primary:hover {
  background: linear-gradient(170deg, #ffdfb7, #f5b67e 40%, #d98a50);
  filter: none;
  box-shadow: inset 0 1px 0 #fff5e5bf, 0 6px 18px #dc79382b;
}
[data-theme="dark"] .progress-bar, [data-theme="dark"] .mc-progress {
  background: #10100f; box-shadow: inset 0 1px 2px #0008, 0 1px 0 #ffffff0a;
}
[data-theme="dark"] .progress-fill, [data-theme="dark"] .mc-progress > span {
  background: linear-gradient(180deg, #ffdbb0, #efa46e 50%, #bc713f);
  box-shadow: 0 0 8px #ef9a5855;
}
[data-theme="dark"] .resume-panel progress::-webkit-progress-value {
  background: linear-gradient(180deg, #ffdbb0, #efa46e 50%, #bc713f);
}
[data-theme="dark"] .resume-panel progress::-moz-progress-bar {
  background: linear-gradient(180deg, #ffdbb0, #efa46e 50%, #bc713f);
}
[data-theme="dark"] .module-header.active {
  background: linear-gradient(100deg, #422c20, #241d18);
  box-shadow: inset 2px 0 0 #efae78, inset 0 1px 0 #ffe0bf12;
}
@media (prefers-reduced-motion: reduce) {
  .module-card .generated-art::after { transform: none; transition: none; }
}

/* Issuance and public certificate verification. */
.certificate-issue { max-width: 680px; margin: 28px 0; }
.certificate-issue[hidden] { display: none; }
.certificate-issue > label:first-child { display:block; margin-bottom:10px; }
.certificate-issue .cert-name-input { width:100%; box-sizing:border-box; }
.cert-disclosure { font-size:14px; line-height:1.6; color:var(--text-dim); }
.cert-consent { display:flex; gap:12px; margin:20px 0; line-height:1.5; font-size:14px; }
.cert-consent input { width:18px; height:18px; margin-top:3px; flex-shrink:0; accent-color:#d5a16f; }
.cert-preview canvas { width:100%; height:auto; display:block; border-radius:8px; border:1px solid #715137; }
.verify-page { max-width:1100px; margin:auto; padding:32px 24px 60px; }
.verify-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:60px; }
.verify-header a { color:#e9c29b; text-decoration:none; font-weight:700; letter-spacing:3px; }
.verify-header span { display:block; font-size:10px; letter-spacing:4px; color:#b5a89b; margin-top:7px; }
.verify-page h1 { font-size:clamp(26px,4vw,42px); line-height:1.2; margin:18px 0; }
.verify-status { color:#dcb58b; font-size:12px; letter-spacing:2px; }
.verify-details { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:32px 0; padding:24px; border:1px solid #483a2d; border-radius:12px; background:#1d1b18; }
.verify-details dt { color:#aa9d8e; font-size:12px; margin-bottom:8px; }
.verify-details dd { margin:0; color:#f4eee5; overflow-wrap:anywhere; }
.verify-details > div:last-child { grid-column:1/-1; }
@media(max-width:600px) { .verify-details { grid-template-columns:1fr; } .verify-header { margin-bottom:36px; } }

/* Course identity and accessible overview shortcut. */
.brand .brand-home { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; cursor:pointer; }
.brand-home img, .login-box .logo img { display:block; width:100%; height:100%; object-fit:contain; }
.brand-home:hover { background:rgba(220,165,110,.10); }
.brand-home:focus-visible { outline:2px solid var(--cyan); outline-offset:5px; }