/* Coding Classroom v0.7.1 — Classic Home · Premium Blue
   Keeps the calm v0.6.4 landing structure while introducing a richer
   navy / royal blue / sky visual system across the v0.7 learner + teacher features. */

:root{
  --premium-navy:#081f46;
  --premium-navy-2:#0d326d;
  --premium-blue:#2563eb;
  --premium-blue-2:#3b82f6;
  --premium-sky:#38bdf8;
  --premium-ice:#eaf6ff;
  --premium-pale:#f5faff;
  --premium-white:#ffffff;
  --premium-ink:#102a4c;
  --premium-muted:#637b96;
  --premium-line:#d5e6f5;
  --premium-shadow:0 18px 55px rgba(15,58,111,.11);
  --premium-shadow-soft:0 10px 30px rgba(15,58,111,.07);
}

body{
  background:
    radial-gradient(circle at 7% 0%,rgba(56,189,248,.14),transparent 26rem),
    radial-gradient(circle at 95% 10%,rgba(37,99,235,.10),transparent 28rem),
    radial-gradient(circle at 50% 80%,rgba(125,211,252,.08),transparent 30rem),
    linear-gradient(180deg,#fbfdff 0%,#f3f8fd 46%,#f8fbff 100%);
  color:var(--premium-ink);
}
body:before{
  background-image:
    linear-gradient(rgba(17,75,137,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,75,137,.022) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.55) 34%,transparent 76%);
}

/* Header — cleaner, brighter glass with a stronger brand anchor. */
.site-header{
  border-bottom:1px solid rgba(180,210,238,.68);
  background:rgba(250,253,255,.88);
  box-shadow:0 10px 34px rgba(7,43,91,.08);
  backdrop-filter:blur(22px) saturate(150%);
}
.site-brand{color:var(--premium-navy);letter-spacing:-.015em}
.brand-mark{
  border:1px solid rgba(164,203,237,.75);
  background:linear-gradient(145deg,#fff,#eef8ff);
  box-shadow:0 9px 24px rgba(21,75,133,.14),inset 0 0 0 1px rgba(255,255,255,.8);
}
.brand-secondary{color:#4e7397}
.main-nav a{color:#55708e}
.main-nav a:hover{background:#edf7ff;color:#164d92}
.main-nav a.active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,var(--premium-navy-2),var(--premium-blue));
  box-shadow:0 9px 22px rgba(37,99,235,.19),inset 0 1px 0 rgba(255,255,255,.18);
}
.xp-pill{
  color:#17437c;
  border-color:#cfe3f7;
  background:linear-gradient(180deg,#f7fcff,#eaf7ff);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);
}
.sound-button,.header-right select{border-color:#cfe0ef;background:rgba(255,255,255,.92)}

/* v0.7 learner bar — make it feel intentional rather than bolted on. */
.learner-bar{
  margin-top:14px;
  padding:12px 16px;
  border:1px solid #d8e8f6;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(239,248,255,.92));
  box-shadow:0 7px 22px rgba(18,64,115,.055);
}
.learner-bar-label{color:#6e88a4}.learner-bar strong{color:#153d70}
.learner-bar-actions a{
  border-radius:10px;
  border-color:#cfe1f1;
  background:rgba(255,255,255,.9);
  color:#245ca9;
  box-shadow:0 4px 12px rgba(25,70,120,.04);
}
.learner-bar-actions a:hover{border-color:#9fc5e8;background:#f8fcff}

/* Classic v0.6.4 landing structure with deeper premium treatment. */
#view-home{padding-top:22px}
#view-home .home-hero-classic{
  min-height:440px;
  grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr);
  gap:46px;
  padding:48px 54px;
  border:1px solid rgba(172,208,239,.75);
  border-radius:30px;
  background:
    radial-gradient(circle at 82% 12%,rgba(255,255,255,.96),transparent 21%),
    radial-gradient(circle at 96% 86%,rgba(56,189,248,.18),transparent 29%),
    radial-gradient(circle at 8% 112%,rgba(37,99,235,.10),transparent 35%),
    linear-gradient(125deg,#fafdff 0%,#f1f8ff 45%,#e7f5ff 100%);
  box-shadow:0 28px 74px rgba(11,52,103,.12),inset 0 1px 0 rgba(255,255,255,.9);
}
#view-home .home-hero-classic:before{
  content:"</>";
  position:absolute;
  right:-25px;
  top:-42px;
  font:900 158px/1 ui-monospace,monospace;
  color:rgba(37,99,235,.05);
  transform:rotate(-8deg);
  pointer-events:none;
}
#view-home .home-hero-classic:after{
  content:"";
  left:54px;right:auto;bottom:0;width:255px;height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--premium-blue),var(--premium-sky),transparent);
  box-shadow:0 0 20px rgba(56,189,248,.36);
}
#view-home .hero-label{
  display:flex;width:auto;max-width:none;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;color:#1b5eaa;
  font-size:.86rem;font-weight:820;letter-spacing:.045em;margin-bottom:16px;gap:9px;
}
#view-home .hero-label>span{border:0;padding-left:0;color:#6c829a;font-weight:680;letter-spacing:0}
#view-home .home-hero h1{
  font-size:clamp(2.2rem,3.35vw,3.45rem);
  line-height:1.3;
  font-weight:850;
  letter-spacing:-.045em;
  color:var(--premium-navy);
}
#view-home .home-hero h1>span{
  background:linear-gradient(90deg,#1d4ed8 0%,#2563eb 48%,#159fd3 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
#view-home .hero-content>p:not(.hero-label){max-width:730px;margin:17px 0 24px;color:#55728f;font-size:1.03rem;line-height:1.95}
#view-home .hero-actions{gap:12px}
#view-home .hero-actions .primary-cta{min-width:148px}
#view-home .hero-actions .secondary-cta{min-width:132px;justify-content:center;background:rgba(255,255,255,.76)}
#view-home .hero-footnote{margin-top:27px;color:#627c95;font-size:.81rem}
#view-home .hero-footnote span{font-weight:680}
#view-home .hero-footnote i{background:#86a9c8}

.primary-cta{
  border-color:transparent;
  color:#fff;
  background:linear-gradient(135deg,#174eaa 0%,#2563eb 58%,#2d80ef 100%);
  box-shadow:0 12px 28px rgba(37,99,235,.24),inset 0 1px 0 rgba(255,255,255,.2);
}
.primary-cta:hover{
  background:linear-gradient(135deg,#113f91 0%,#1e58d6 58%,#2474df 100%);
  box-shadow:0 16px 34px rgba(37,99,235,.30);
}
.secondary-cta,.teacher-cta{
  color:#174d8b;
  border-color:#c6ddf1;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(243,250,255,.96));
  box-shadow:0 7px 18px rgba(30,73,121,.06);
}
.secondary-cta:hover,.teacher-cta:hover{border-color:#8ebee6;background:#fff}

.continue-card{
  isolation:isolate;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(116,177,232,.26);
  background:
    radial-gradient(circle at 88% 10%,rgba(56,189,248,.28),transparent 25%),
    radial-gradient(circle at 0 110%,rgba(37,99,235,.26),transparent 36%),
    linear-gradient(150deg,#071d43 0%,#0b326d 58%,#0e4f91 100%);
  box-shadow:0 26px 56px rgba(6,31,70,.26),inset 0 1px 0 rgba(255,255,255,.08);
}
.continue-card:before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.38;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(135deg,#000,transparent 75%);
}
.continue-card:after{border-color:rgba(125,211,252,.08)}
.continue-link{color:#0e3d77;background:linear-gradient(180deg,#fff,#edf8ff);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.continue-card .meter>span{background:linear-gradient(90deg,#60a5fa,#38bdf8,#7dd3fc)}

.role-entry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin:20px 0 32px}
.role-card{
  position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:16px;
  min-height:120px;padding:22px 23px;border:1px solid #d4e6f4;border-radius:18px;
  color:#153557;background:rgba(255,255,255,.93);
  box-shadow:0 12px 32px rgba(18,60,108,.065),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  overflow:hidden;
}
.role-card:before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,#2563eb,#38bdf8,transparent 72%);
}
.role-card:after{content:"";position:absolute;right:-55px;bottom:-74px;width:185px;height:185px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.10),rgba(37,99,235,.03) 58%,transparent 70%);pointer-events:none}
.role-card:hover{transform:translateY(-4px);border-color:#9bc8ea;box-shadow:0 20px 44px rgba(16,64,119,.12)}
.role-icon{
  display:grid;place-items:center;width:58px;height:58px;border-radius:16px;
  font:800 1.32rem/1 ui-monospace,monospace;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.role-student .role-icon{color:#1553ae;background:linear-gradient(145deg,#ddecff,#eef8ff);border:1px solid #c6def5}
.role-teacher .role-icon{color:#0d477e;background:linear-gradient(145deg,#dff7ff,#eefaff);border:1px solid #c9e9f7}
.role-copy{display:block;min-width:0}.role-copy small{display:block;margin-bottom:3px;color:#6f88a1;font-size:.66rem;font-weight:820;letter-spacing:.12em}.role-copy strong{display:block;font-size:1.08rem;color:#11365f}.role-copy>span{display:block;margin-top:4px;color:#678099;font-size:.81rem;line-height:1.62}.role-arrow{position:relative;z-index:1;font-size:1.3rem;color:#3f6f9f;transition:transform .18s}.role-card:hover .role-arrow{transform:translateX(4px)}

.focus-section-classic{
  position:relative;overflow:hidden;margin:0 0 20px;padding:30px;
  border:1px solid #d8e7f4;border-radius:20px;
  background:
    radial-gradient(circle at 94% 0,rgba(56,189,248,.08),transparent 20rem),
    linear-gradient(180deg,#fbfdff 0%,#f7fbff 44%,#fff 100%);
  box-shadow:0 14px 38px rgba(21,62,108,.06);
}
.focus-section-classic:after{content:"";position:absolute;right:-80px;top:-105px;width:240px;height:240px;border-radius:50%;border:1px solid rgba(56,189,248,.11);box-shadow:0 0 0 28px rgba(56,189,248,.025),0 0 0 56px rgba(37,99,235,.018);pointer-events:none}
.focus-section-classic .section-heading{align-items:flex-end;margin-bottom:21px}.focus-section-classic .section-heading h2{margin-top:4px;font-size:1.5rem;color:#103965}.focus-section-classic .section-heading>span{color:#758ea6;font-size:.79rem;font-weight:680}.focus-section-classic .section-intro{max-width:730px;margin:6px 0 0;color:#6c849d;font-size:.89rem;line-height:1.75}.focus-section-classic .focus-grid{gap:15px}
.focus-section-classic .focus-card{
  min-height:194px;padding:23px 24px;border-radius:16px;border:1px solid #dce8f3;
  background:linear-gradient(160deg,#fff 0%,#fbfdff 62%,#f2f9ff 100%);
  box-shadow:0 9px 24px rgba(17,61,111,.045);
}
.focus-section-classic .focus-card:before{width:4px;background:linear-gradient(180deg,#2563eb,#38bdf8)}
.focus-section-classic .focus-card.middle{background:linear-gradient(145deg,#f3f7ff,#edf7ff)}
.focus-section-classic .focus-card:hover{border-color:#aed0eb;box-shadow:0 16px 34px rgba(14,65,123,.09)}
.focus-section-classic .focus-card h3{font-size:1.27rem;color:#123d6d}.focus-section-classic .focus-card p{color:#698199;line-height:1.67}
.other-tracks{margin:0 0 24px;border-color:#d9e8f4;background:rgba(255,255,255,.74);box-shadow:0 7px 20px rgba(18,63,113,.035)}
.home-progress{margin-top:0;border-color:#d6e7f4;background:rgba(255,255,255,.92);box-shadow:0 12px 34px rgba(18,63,113,.06)}

/* General cards and information pages */
.page-heading h1,.section-heading h2{color:#12375f}.eyebrow{color:#2a65a7}
.page-heading .section-symbol,.transfer-symbol{color:#2b6ac6}
.track-tab.selected{background:linear-gradient(180deg,#edf6ff,#e6f2ff);border-color:#8eb9e5}
.world-section,.unit-article,.transfer-card,.info-card,.about-main,.developer-card,.share-classroom,.teacher-note,.teacher-report-entry{
  border-color:#d7e6f3;
  box-shadow:0 12px 34px rgba(14,55,101,.055);
}
.transfer-card,.share-classroom{background:linear-gradient(145deg,#fff,#f5fbff)}
.info-card{background:linear-gradient(160deg,#fff,#f8fcff)}
.info-card .step-no{color:#2361ac;background:#eaf5ff;border-color:#cfe6f7}
.developer-card{background:linear-gradient(155deg,#0b2c60,#0f4b88);color:#fff;border-color:rgba(125,211,252,.22)}
.developer-card .eyebrow,.developer-card p,.developer-card small{color:#cfe9ff}.developer-card h2{color:#fff}.developer-card hr{border-color:rgba(255,255,255,.15)}
.feature-pills span{background:#eef7ff;border-color:#cfe5f6;color:#275a90}

/* Profiles + teacher reports now share the richer visual language. */
.profile-card,.profile-form-panel,.report-panel{
  border-color:#d6e5f2;
  background:rgba(255,255,255,.94);
  box-shadow:0 11px 30px rgba(16,58,104,.055);
}
.profile-card.selected{border-color:#8ab8e5;background:linear-gradient(145deg,#f8fbff,#edf6ff)}
.profile-avatar{background:linear-gradient(145deg,#dfeeff,#edf8ff);color:#1f5cad;border:1px solid #cee3f5}
.teacher-summary article{border-color:#d6e5f2;background:linear-gradient(160deg,#fff,#f4faff);box-shadow:0 10px 26px rgba(16,58,104,.045)}
.teacher-summary strong{color:#164f91}.report-local-note{color:#385d83;background:linear-gradient(180deg,#eef7ff,#eaf4ff);border-color:#cfe2f3}
.report-table thead th{background:#f0f7fd;color:#4c6c8e}.report-table tbody tr:hover{background:#f7fbff}.report-learner{color:#1f5fba}
.field input,.field select{border-color:#c7dceb;background:#fff}.field input:focus,.field select:focus{outline-color:#4a8de1}

/* Lab: preserve editor contrast but connect it to the premium blue system. */
.mission-strip{border-color:#d6e5f2;background:linear-gradient(180deg,#fff,#f6fbff)}
.mission-tab.active{color:#164f91;border-color:#8fc4e8;background:linear-gradient(180deg,#eaf7ff,#e4f2ff)}
.lesson-panel,.stage-panel{border-color:#d6e5f2;box-shadow:0 13px 34px rgba(13,52,98,.065)}
.program-panel{
  border-color:#173f70;
  box-shadow:0 18px 44px rgba(6,29,66,.16);
}
.run-btn{background:linear-gradient(135deg,#1552b0,#2563eb,#2684e8);box-shadow:0 9px 22px rgba(37,99,235,.25)}
.next-btn{background:linear-gradient(135deg,#174eaa,#2563eb)}
.feedback,.goal-box,.hint-box{border-color:#cfe4f4}
.stage-wrap{background:linear-gradient(180deg,#eef9ff,#e5f4ff)}
.progress-bar{background:linear-gradient(90deg,#2563eb,#38bdf8,#7dd3fc)}

/* Footer — stronger finish and clear author credit. */
.site-footer-v062{
  border-top:0;
  background:
    radial-gradient(circle at 86% 10%,rgba(56,189,248,.18),transparent 20rem),
    linear-gradient(120deg,#071c40 0%,#0b326d 58%,#0d4b84 100%);
  box-shadow:0 -14px 40px rgba(8,35,76,.08);
}
.site-footer-v062,.site-footer-v062 a{color:#dbeeff}.site-footer-v062 small,.site-footer-v062 span{color:#a9cbe7}.footer-developer strong,.footer-version strong,.footer-brand strong{color:#fff}.footer-links a:hover{color:#7dd3fc}

@media (max-width:900px){
  #view-home .home-hero-classic{grid-template-columns:1fr;padding:36px 32px;gap:26px}
  .role-entry{grid-template-columns:1fr}
  .focus-section-classic{padding:25px}
}
@media (max-width:700px){
  #view-home{padding-top:10px}
  #view-home .home-hero-classic{padding:29px 21px;border-radius:22px;gap:22px}
  #view-home .home-hero-classic:after{left:21px;width:180px}
  #view-home .hero-label{align-items:flex-start;flex-direction:column;gap:2px}
  #view-home .home-hero h1{font-size:2.08rem}
  #view-home .hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  #view-home .hero-actions .primary-cta,#view-home .hero-actions .secondary-cta{width:100%;min-width:0}
  #view-home .hero-footnote{gap:8px;flex-wrap:wrap}
  .role-entry{margin-top:15px;gap:11px}
  .role-card{grid-template-columns:48px minmax(0,1fr) auto;min-height:104px;padding:18px 16px;gap:12px;border-radius:15px}
  .role-icon{width:48px;height:48px;border-radius:13px}.role-copy>span{font-size:.76rem}
  .focus-section-classic{padding:21px 17px;border-radius:16px}.focus-section-classic .section-heading{display:block}.focus-section-classic .section-heading>span{display:block;margin-top:8px}
  .learner-bar{margin-top:8px;border-radius:12px}
}
@media (max-width:430px){
  #view-home .home-hero h1{font-size:1.92rem}
  #view-home .hero-actions{grid-template-columns:1fr}
  .role-copy>span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .role-card{transition:none!important}.role-card:hover{transform:none!important}
}