/* Coding Classroom · Colorful Classroom UI
   Visual-only patch: cards, typography, buttons, badges, panels and responsive polish.
   No learning, assessment, account, API or storage logic is changed. */

:root{
  --cc-blue:#2f6fe4;
  --cc-blue-2:#5e8ff2;
  --cc-cyan:#38b8d8;
  --cc-mint:#38b98b;
  --cc-green:#28a86f;
  --cc-yellow:#f4bf3f;
  --cc-orange:#f29a45;
  --cc-coral:#ef7d67;
  --cc-purple:#7b68d8;
  --cc-pink:#df78aa;
  --cc-ink:#183153;
  --cc-muted:#61758e;
  --cc-line:#dce8f4;
  --cc-surface:#ffffff;
  --cc-sky:#eef8ff;
  --cc-cream:#fffaf0;
  --cc-shadow:0 10px 28px rgba(41,76,119,.10);
  --cc-shadow-hover:0 16px 34px rgba(41,76,119,.15);
  --ink:var(--cc-ink);
  --muted:var(--cc-muted);
  --blue:var(--cc-blue);
  --line:var(--cc-line);
  --shadow:var(--cc-shadow);
}

html{background:#f3f9ff}
body{
  color:var(--cc-ink);
  background:
    radial-gradient(circle at 8% 6%,rgba(88,185,224,.14),transparent 24rem),
    radial-gradient(circle at 92% 16%,rgba(244,191,63,.11),transparent 22rem),
    linear-gradient(180deg,#f8fcff 0%,#f4f9ff 52%,#f8fbff 100%);
}

/* Header */
.site-header{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #d8e7f4;
  box-shadow:0 6px 20px rgba(48,86,130,.06);
  backdrop-filter:blur(12px);
}
.site-brand-new .brand-logo-new,
.site-brand-new img{filter:drop-shadow(0 5px 9px rgba(47,111,228,.15))}
.main-nav a{color:#4b607b;font-weight:750;transition:background .16s ease,color .16s ease,transform .16s ease}
.main-nav a:hover{background:#f0f7ff;color:#245fcb;transform:translateY(-1px)}
.main-nav a.active{
  background:linear-gradient(135deg,#eaf3ff,#e9fbff);
  color:#225fc9;
  box-shadow:inset 0 0 0 1px #d1e5fb;
}
.xp-pill{
  background:linear-gradient(135deg,#fff8dc,#fff0b8);
  border-color:#efd17c;
  color:#875a06;
  box-shadow:0 5px 14px rgba(180,130,16,.10);
}
.sound-button{border-color:#d6e4f2;background:#f9fcff;color:#3f638a}

/* Typography */
.page-heading h1,.home-hero h1,.section-heading h2,.section-heading h3,.teacher-tab-heading h2,.info-heading h1{
  color:#17345d;
}
.eyebrow{
  color:#3977b7;
  letter-spacing:.11em;
  font-weight:850;
}
.page-heading p:not(.eyebrow),.section-heading p,.field-hint,.local-note{color:#647990}

/* Hero */
.home-hero{
  background:
    radial-gradient(circle at 82% 22%,rgba(255,255,255,.88),transparent 12rem),
    radial-gradient(circle at 76% 78%,rgba(87,203,177,.18),transparent 14rem),
    linear-gradient(125deg,#edf7ff 0%,#eaf8ff 47%,#f9f5ff 73%,#fff8e8 100%);
  border-color:#d4e7f7;
  box-shadow:0 14px 38px rgba(54,91,130,.10);
}
.home-hero h1>span{color:#ef813e}
.hero-label{color:#2f6fa8}
.hero-content>p{color:#526f8a}
.hello-note,.code-token{border-color:#d9e9f5;box-shadow:0 8px 24px rgba(42,83,122,.10)}

/* Core buttons */
.primary-cta{
  background:linear-gradient(135deg,#3a79e8,#2862d4);
  border-color:#2c67d9;
  box-shadow:0 5px 0 #1e4fae,0 10px 18px rgba(47,111,228,.12);
  font-weight:800;
}
.primary-cta:hover{background:linear-gradient(135deg,#326fe0,#2159c4);box-shadow:0 6px 0 #1b4aa3,0 13px 22px rgba(47,111,228,.16)}
.secondary-cta,.teacher-cta{
  background:linear-gradient(180deg,#ffffff,#f5faff);
  border-color:#cfe0ef;
  color:#315c8b;
  font-weight:750;
  box-shadow:0 4px 12px rgba(46,81,117,.06);
}
.secondary-cta:hover,.teacher-cta:hover{background:#edf7ff;border-color:#a9cee9;color:#235e9f}
.logout-btn{
  background:linear-gradient(180deg,#fffefd,#fff2ee);
  border-color:#efbbb1;
  color:#a54035;
  box-shadow:0 5px 14px rgba(140,67,56,.10);
}
.logout-btn span{background:#ffe3dd;color:#a64337}
.logout-btn:hover{background:#ffebe7;border-color:#dc9f94}

/* Shared card treatment */
.age-card,.continue-card,.home-progress,.focus-card,.unit-article,.world-section,
.student-account-card,.classroom-profile-card,.classroom-join-card,.classroom-active,
.cloud-panel,.teacher-tab-panel,.teacher-settings-card,.report-panel,.profile-card,.profile-form-panel,
.first-start-card,.role-card,.info-card,.assessment-entry,.assessment-progress-section,.assessment-question,
.assessment-result-card,.assessment-status-card,.cloud-room-card,.student-manage-card,.badge-section,.transfer-card{
  border-color:#dbe7f2;
  box-shadow:var(--cc-shadow);
}

/* Age / track cards */
.age-card{border-width:1px;overflow:hidden}
.age-card:before{
  content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--accent,#4b89ea);opacity:.95;
}
.age-card:hover{box-shadow:var(--cc-shadow-hover)}
.age-card.selected{box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 18%,transparent)}
.age-icon{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)}

/* Home role cards */
.role-card{overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.role-card:hover{transform:translateY(-3px);box-shadow:var(--cc-shadow-hover)}
.role-card.role-student{
  background:linear-gradient(145deg,#ffffff 0%,#eef8ff 100%);
  border-color:#cfe5f5;
}
.role-card.role-teacher{
  background:linear-gradient(145deg,#ffffff 0%,#f4efff 100%);
  border-color:#ddd2f7;
}
.role-student .role-icon{background:#dff4ff;color:#267fae}
.role-teacher .role-icon{background:#eee7ff;color:#6f5ac4}

/* Focus cards */
.focus-card{overflow:hidden;position:relative;background:#fff;transition:transform .16s ease,box-shadow .16s ease}
.focus-card:hover{transform:translateY(-3px);box-shadow:var(--cc-shadow-hover)}
.focus-card.primary2{background:linear-gradient(155deg,#fff 30%,#eef9ff 100%);border-color:#cfe7f5}
.focus-card.middle{background:linear-gradient(155deg,#fff 30%,#f4efff 100%);border-color:#ddd4f5}
.focus-card.primary2:before{background:#45b4d6}
.focus-card.middle:before{background:#7b68d8}
.focus-card-bottom strong{color:#2f6fd9}

/* Learning path */
.world-section{
  background:linear-gradient(180deg,#fff,#fbfdff);
  border-color:#dce8f3;
}
.world-heading{border-bottom-color:#e7eff6}
.lesson-node{
  box-shadow:0 6px 16px rgba(46,80,116,.07);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.lesson-node.available:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(46,80,116,.12)}
.lesson-node.completed{background:linear-gradient(145deg,#fff,#effbf5);border-color:#9fd9bb}
.lesson-node.available{background:linear-gradient(145deg,#fff,#f3f8ff)}
.lesson-node.locked{background:#f7f9fc}
.lesson-tone-blue{--lesson-accent:#3c7fe6}
.lesson-tone-green{--lesson-accent:#35a978}
.lesson-tone-gold{--lesson-accent:#d89a1f}
.lesson-tone-coral{--lesson-accent:#e87760}
.lesson-tone-purple{--lesson-accent:#7a66cf}
.lesson-node .node-index{box-shadow:0 4px 10px rgba(53,86,120,.09)}

/* Forms */
.field input,.field select,.field textarea,.student-auth-form input,.student-auth-form select,
.create-room-form input,.create-room-form select,.teacher-pin-form input{
  border-color:#d4e3f0;
  background:#fbfdff;
  color:#203956;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.field input:focus,.field select:focus,.field textarea:focus,.student-auth-form input:focus,.student-auth-form select:focus,
.create-room-form input:focus,.create-room-form select:focus,.teacher-pin-form input:focus{
  border-color:#7fb1e8;
  background:#fff;
  box-shadow:0 0 0 4px rgba(61,129,217,.10);
}

/* Student / classroom */
.student-account-card{
  background:linear-gradient(145deg,#ffffff 0%,#f4fbff 62%,#f9f5ff 100%);
}
.student-account-heading{border-bottom-color:#dceaf5}
.account-server-badge{background:#eaf9f2!important;border-color:#a8ddc4!important;color:#197451!important}
.classroom-join-card{background:linear-gradient(145deg,#fff,#f3f8ff)}
.classroom-profile-card{background:linear-gradient(145deg,#fff,#fff9ed)}
.classroom-active{background:linear-gradient(145deg,#fff,#effaf5)}
.room-code{background:#eef5ff;color:#245eaa;border-color:#c9dcf3}

/* Teacher dashboard */
.teacher-heading-v0974 .section-symbol{
  background:linear-gradient(145deg,#e9f4ff,#f0eaff);
  color:#5f6fc8;
  box-shadow:inset 0 0 0 1px #d7e1f3;
}
.teacher-cloud,.teacher-tab-panel{background:transparent}
.teacher-dashboard-tabs{background:#eef5fb;border-color:#d8e6f2}
.teacher-dashboard-tab{color:#536a84;font-weight:750}
.teacher-dashboard-tab.is-active{background:#fff;color:#245da3;box-shadow:0 5px 14px rgba(48,82,118,.10)}
.cloud-panel{background:#fff;overflow:hidden}
.teacher-overview-online{border-top:4px solid #42b8d5}
.teacher-quick-actions{border-top:4px solid #f1b84a}
.teacher-recent-panel{border-top:4px solid #7b69d6}
.teacher-create-room{border-top:4px solid #3fae80}
.student-management-panel{border-top:4px solid #ef8c62}
.teacher-exam-bank{border-top:4px solid #5d86e6}
.cloud-assessment-report{border-top:4px solid #b06fc0}
.teacher-settings-card:nth-of-type(1){border-top:4px solid #5d86e6}
.teacher-settings-card:nth-of-type(2){border-top:4px solid #3fae80}
.teacher-settings-card:nth-of-type(3){border-top:4px solid #f1b84a}
.teacher-quick-grid button{
  border-color:#d9e6f2;
  background:linear-gradient(145deg,#fff,#f7fbff);
  box-shadow:0 5px 14px rgba(48,82,118,.06);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.teacher-quick-grid button:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(48,82,118,.12);border-color:#bdd5e8}
.teacher-quick-grid button:nth-child(1)>span{background:#eaf8f2;color:#23815c}
.teacher-quick-grid button:nth-child(2)>span{background:#eef4ff;color:#396ec4}
.teacher-quick-grid button:nth-child(3)>span{background:#fff5df;color:#a36c13}
.teacher-quick-grid button:nth-child(4)>span{background:#f3edff;color:#7259bd}

/* Tables */
.report-table{border-collapse:separate;border-spacing:0}
.report-table thead th{background:#f0f6fc;color:#3e5e80;border-bottom-color:#d9e7f2}
.report-table tbody tr:nth-child(even){background:#fbfdff}
.report-table tbody tr:hover{background:#f3f8ff}
.table-scroll{border-radius:14px;border:1px solid #e0eaf3;background:#fff}

/* Assessment */
.assessment-entry{
  background:linear-gradient(135deg,#f6fbff 0%,#eef8ff 52%,#f8f3ff 100%);
  border-color:#cfe5f6;
}
.assessment-status-card{transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.assessment-status-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(45,79,118,.10)}
.assessment-status-card:first-child{background:linear-gradient(145deg,#fff,#eef7ff);border-color:#cfe2f5}
.assessment-status-card:last-child{background:linear-gradient(145deg,#fff,#f2fbf6);border-color:#cee8db}
.assessment-status-card.is-done{background:linear-gradient(145deg,#fff,#eafaf2);border-color:#98d5b5}
.assessment-progress-grid article:nth-child(1){background:#eef7ff;border-color:#cfe2f5}
.assessment-progress-grid article:nth-child(2){background:#f0fbf5;border-color:#d0eadc}
.assessment-progress-grid article:nth-child(3){background:#fff7e8;border-color:#f0dfba}
.assessment-question:nth-child(4n+1){border-left:5px solid #4a82e4}
.assessment-question:nth-child(4n+2){border-left:5px solid #3eb18b}
.assessment-question:nth-child(4n+3){border-left:5px solid #f0b84b}
.assessment-question:nth-child(4n){border-left:5px solid #856bd3}
.assessment-question legend span{background:#e9f3ff;color:#2d6bd0}
.assessment-options label{background:#fbfdff}
.assessment-options label:hover{border-color:#bcd7ec;background:#f5faff}
.assessment-options label:has(input:checked){border-color:#5891e8;background:#edf5ff;box-shadow:0 0 0 3px rgba(65,127,222,.08)}
.assessment-result-card{background:linear-gradient(160deg,#fff 0%,#f7fbff 65%,#fffaf0 100%)}
.assessment-gate-list li{background:#f8fbff}

/* Teacher question bank */
.exam-bank-question{box-shadow:0 5px 14px rgba(51,83,117,.06)}
.exam-bank-question:nth-child(4n+1){border-top:4px solid #4a82e4}
.exam-bank-question:nth-child(4n+2){border-top:4px solid #3eb18b}
.exam-bank-question:nth-child(4n+3){border-top:4px solid #f0b84b}
.exam-bank-question:nth-child(4n){border-top:4px solid #856bd3}
.exam-q-head>span{background:linear-gradient(135deg,#2c68cc,#4b89ea)}

/* Lab: colorful but restrained, preserving layout / drag targets */
.lesson-panel,.program-panel,.stage-panel{
  box-shadow:0 10px 25px rgba(42,77,113,.09);
  border-color:#d9e6f2;
}
.lesson-panel{background:linear-gradient(180deg,#fff,#f8fcff)}
.program-panel{background:linear-gradient(180deg,#fff,#fbf9ff)}
.stage-panel{background:linear-gradient(180deg,#fff,#f7fcfa)}
.lab-heading{background:linear-gradient(135deg,#f0f8ff,#f7f3ff);border-color:#d8e7f3}
.goal-card{background:linear-gradient(135deg,#fff9e8,#fffdf6);border-color:#f0dfb2}
.hint-panel{background:linear-gradient(135deg,#f4fbff,#f8fbff);border-color:#d7e8f4}

/* Guide / About cards */
.info-card{position:relative;overflow:hidden;background:#fff}
.info-card:nth-child(4n+1){border-top:5px solid #4a82e4}
.info-card:nth-child(4n+2){border-top:5px solid #3eb18b}
.info-card:nth-child(4n+3){border-top:5px solid #f0b84b}
.info-card:nth-child(4n){border-top:5px solid #856bd3}
.info-card .step-no{background:#edf5ff;color:#2b69c9;border-color:#d3e3f7}
.developer-card{background:linear-gradient(145deg,#fff,#f3f8ff);border-color:#d8e7f3;box-shadow:var(--cc-shadow)}

/* Footer */
.site-footer-v062{
  background:linear-gradient(180deg,#ffffff,#f4f9ff);
  border-top-color:#d8e7f2;
}
.footer-version strong{color:#315a88}
.footer-links a:hover{color:#2d6bc2}

/* Status chips */
.status-badge,.mini-badge>span,.account-badge,.room-status-pill,.student-room-chip{
  box-shadow:inset 0 0 0 1px rgba(84,112,145,.06);
}

/* Responsive */
@media(max-width:900px){
  .cloud-panel,.student-account-card,.classroom-profile-card,.classroom-join-card,.assessment-entry,.assessment-progress-section{border-radius:18px}
  .teacher-quick-grid button{min-height:96px}
}
@media(max-width:700px){
  body{background:linear-gradient(180deg,#f8fcff,#f5faff)}
  .site-header{box-shadow:0 4px 16px rgba(48,86,130,.06)}
  .home-hero{background:linear-gradient(145deg,#eef8ff,#f6f2ff 72%,#fff8e9)}
  .age-card,.focus-card,.role-card,.info-card{box-shadow:0 7px 18px rgba(41,76,119,.09)}
  .primary-cta,.secondary-cta,.teacher-cta,.logout-btn{border-radius:12px}
  .assessment-question{border-left-width:4px}
}

@media(prefers-reduced-motion:reduce){
  .role-card,.focus-card,.teacher-quick-grid button,.assessment-status-card,.lesson-node{transition:none!important}
  .role-card:hover,.focus-card:hover,.teacher-quick-grid button:hover,.assessment-status-card:hover,.lesson-node.available:hover{transform:none!important}
}