/* ============================================================
   CloudCampus Kids Edition
   Visual system for 1st–6th grade (7–12 years)
   ============================================================ */
:root{
  --kid-blue:#1976f3;
  --kid-blue-dark:#153f8f;
  --kid-sky:#55c9ff;
  --kid-green:#31c48d;
  --kid-yellow:#ffc83d;
  --kid-orange:#ff9f43;
  --kid-pink:#ff6685;
  --kid-purple:#8a67f5;
  --kid-bg:#eef7ff;
  --kid-ink:#17356f;
  --kid-muted:#60779a;
  --kid-card:#ffffff;
  --kid-shadow:0 10px 28px rgba(41,91,155,.13);
  --kid-radius:22px;
}

body.kids-app{
  background:linear-gradient(180deg,#eaf7ff 0%,#f8fbff 55%,#eef8ff 100%);
  color:var(--kid-ink);
}
body.kids-app .sidebar{
  width:250px;
  background:linear-gradient(180deg,#ffffff 0%,#f5fbff 100%);
  color:var(--kid-ink);
  border-right:1px solid #dcecff;
  box-shadow:8px 0 30px rgba(48,102,166,.08);
}
body.kids-app .brand{
  height:88px;
  padding:0 22px;
  border-bottom:1px solid #e1effc;
}
body.kids-app .brand-mark{
  width:48px;height:48px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#45c8ff,#1976f3);
  color:#fff;font-size:25px;
  box-shadow:0 7px 16px rgba(25,118,243,.22);
}
body.kids-app .brand strong{color:var(--kid-ink);font-size:21px}
body.kids-app .brand strong span{color:#2d9cf3}
body.kids-app .brand small{color:#7890b0}
body.kids-app .institution-card{
  margin:16px 15px 10px;
  padding:13px;
  border:1px solid #d9ebfb;
  border-radius:18px;
  background:#fff;
  color:var(--kid-ink);
  box-shadow:0 5px 18px rgba(52,105,165,.07);
}
body.kids-app .institution-card small{color:#7890b0}
body.kids-app .crest{
  width:46px;height:46px;
  background:linear-gradient(145deg,#fff,#eaf5ff);
  color:var(--kid-blue);
  border:2px solid #cfe8ff;
}
body.kids-app nav{padding:8px 12px}
body.kids-app .nav-link{
  position:relative;
  gap:11px;
  padding:12px 13px;
  margin:5px 0;
  border-radius:15px;
  color:#36547f;
  font-weight:700;
  transition:transform .18s,background .18s,box-shadow .18s;
}
body.kids-app .nav-link:hover{
  background:#eef7ff;color:var(--kid-blue);transform:translateX(2px);
}
body.kids-app .nav-link:first-child{
  background:linear-gradient(135deg,#1685f5,#35b9ff);
  color:#fff;
  box-shadow:0 8px 18px rgba(25,118,243,.18);
}
body.kids-app .nav-link>span{font-size:13px}
body.kids-app .nav-link::first-letter{font-size:18px}
body.kids-app .nav-section{color:#8ca5c3;padding:18px 13px 6px}
body.kids-app .sidebar-bottom{border-top:1px solid #e0edf9;padding:10px 12px 16px}
body.kids-app .sidebar-bottom .nav-link:first-child{background:#f0f7ff;color:#36547f;box-shadow:none}

body.kids-app .main{margin-left:250px;width:calc(100% - 250px)}
body.kids-app .topbar{
  height:72px;
  background:rgba(255,255,255,.92);
  color:var(--kid-ink);
  border-bottom:1px solid #dfeefa;
  box-shadow:0 4px 18px rgba(51,99,157,.08);
  backdrop-filter:blur(12px);
}
body.kids-app .hamb{color:var(--kid-ink);font-size:27px}
body.kids-app .top-title{font-weight:800}
body.kids-app .top-search{
  width:390px!important;
  background:#f1f7ff!important;
  border:1px solid #dcecff!important;
  border-radius:18px!important;
  color:#7187a6!important;
}
body.kids-app .top-search input{color:var(--kid-ink)!important}
body.kids-app .user-chip{
  border:1px solid #dcecff;
  background:#fff;
  color:var(--kid-ink);
  border-radius:18px;
  box-shadow:0 4px 14px rgba(39,90,149,.07);
}
body.kids-app .user-chip small{color:#7890b0}
body.kids-app .avatar{border-radius:50%;background:linear-gradient(145deg,#dff4ff,#c6e7ff);color:var(--kid-blue)}

body.kids-app .content{padding:28px 30px 48px;max-width:1700px}
body.kids-app .page-head{margin-bottom:18px}
body.kids-app .page-head h1{font-size:35px;color:var(--kid-ink);letter-spacing:-.7px}
body.kids-app .page-head p{color:var(--kid-muted)}
body.kids-app .eyebrow{color:#1599db;letter-spacing:1.7px}
body.kids-app .date-pill{background:#fff;border:1px solid #d9eafd;color:var(--kid-blue);border-radius:16px}

/* Friendly panels and cards across the application */
body.kids-app .panel,
body.kids-app .stat,
body.kids-app .course-card,
body.kids-app .quick-card,
body.kids-app .empty-panel{
  border-radius:var(--kid-radius);
  box-shadow:var(--kid-shadow);
  border:1px solid #dcecff;
}
body.kids-app .panel{background:rgba(255,255,255,.96)}
body.kids-app .panel-head{padding:18px 21px;border-bottom:1px solid #e6f0fa}
body.kids-app .panel-head h3{color:var(--kid-ink)}
body.kids-app .panel-head a{color:var(--kid-blue)}
body.kids-app .btn{border-radius:15px;padding:12px 19px}
body.kids-app .btn.primary{background:linear-gradient(135deg,#1976f3,#31b5ff);box-shadow:0 8px 17px rgba(25,118,243,.18)}
body.kids-app .btn.ghost{background:#eef7ff;color:#2d5d99}

body.kids-app .quick-grid{gap:16px}
body.kids-app .quick-card{min-height:112px;padding:18px 19px;border:0}
body.kids-app .quick-card span{
  width:55px;height:55px;border-radius:18px;
  background:rgba(255,255,255,.94);color:var(--kid-blue);
  font-size:24px;box-shadow:0 5px 12px rgba(0,0,0,.08)
}
body.kids-app .quick-card b{font-size:16px}
body.kids-app .quick-card small{color:rgba(255,255,255,.88)}
body.kids-app .quick-card.blue{background:linear-gradient(135deg,#247bf5,#43b9ff)}
body.kids-app .quick-card.cyan{background:linear-gradient(135deg,#16a9d8,#48d0d1)}
body.kids-app .quick-card.teal{background:linear-gradient(135deg,#22b98a,#5bd69c)}
body.kids-app .quick-card.sky{background:linear-gradient(135deg,#6d75ee,#a47df7)}

/* Dashboard hero */
body.kids-app .kid-hero{
  position:relative;overflow:hidden;
  min-height:260px;margin:0 0 20px;
  border-radius:28px;
  background:linear-gradient(135deg,#2b92f6 0%,#49c9ff 55%,#6bd8d1 100%);
  box-shadow:0 16px 36px rgba(38,123,202,.18);
  color:#fff;padding:34px 38px;
}
body.kids-app .kid-hero::before,
body.kids-app .kid-hero::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.13);
}
body.kids-app .kid-hero::before{width:280px;height:280px;right:-80px;top:-120px}
body.kids-app .kid-hero::after{width:190px;height:190px;left:44%;bottom:-130px}
body.kids-app .kid-hero-copy{position:relative;z-index:2;max-width:640px}
body.kids-app .kid-hero h2{margin:0 0 9px;font-size:38px;line-height:1.05;color:#fff;letter-spacing:-1px}
body.kids-app .kid-hero p{margin:0;max-width:570px;font-size:15px;line-height:1.55;color:#effaff}
body.kids-app .kid-hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
body.kids-app .kid-hero-badges span{padding:9px 13px;border-radius:14px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);font-size:11px;font-weight:800}
body.kids-app .kid-characters{position:absolute;right:35px;bottom:0;width:360px;height:245px;z-index:1}
body.kids-app .kid-character{position:absolute;bottom:14px;width:110px;height:170px;border-radius:48% 48% 28% 28%;box-shadow:inset 0 -8px 0 rgba(0,0,0,.04)}
body.kids-app .kid-character::before{content:"";position:absolute;width:76px;height:76px;border-radius:50%;background:#ffd5ae;top:-34px;left:17px;border:5px solid #6b402d;box-shadow:inset 0 -4px 0 rgba(0,0,0,.05)}
body.kids-app .kid-character::after{content:"";position:absolute;width:18px;height:8px;border-bottom:3px solid #58392e;border-radius:50%;left:46px;top:19px}
body.kids-app .kid-character.one{left:0;background:#ff6c7e;transform:rotate(-4deg)}
body.kids-app .kid-character.two{left:105px;background:#4f8ff7;transform:translateY(-8px)}
body.kids-app .kid-character.three{left:210px;background:#57ca91;transform:rotate(4deg)}
body.kids-app .kid-star{position:absolute;width:35px;height:35px;right:245px;top:35px;background:#ffd04d;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 95%,50% 72%,21% 95%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 5px 6px rgba(0,0,0,.1))}

body.kids-app .student-context-card{
  background:#fff;border:1px solid #dcecff;border-radius:20px;box-shadow:var(--kid-shadow);padding:16px 18px;margin-bottom:18px
}
body.kids-app .student-context-icon{width:52px;height:52px;border-radius:17px;background:#e9f7ff;color:var(--kid-blue);display:grid;place-items:center;font-size:22px}

body.kids-app .welcome-panel{
  border-radius:24px!important;
  background:linear-gradient(135deg,#fff5c9,#fff)!important;
  border:1px solid #ffe7a2!important;
}

/* Courses */
body.kids-app .course-card{overflow:hidden;background:#fff}
body.kids-app .course-card .course-banner{height:150px;position:relative;overflow:hidden}
body.kids-app .course-card .course-banner::after{content:"";position:absolute;inset:auto -20px -65px -20px;height:120px;background:rgba(255,255,255,.22);border-radius:50%}
body.kids-app .course-card:nth-child(4n+1) .course-banner{background:linear-gradient(135deg,#ff6076,#ffb04a)}
body.kids-app .course-card:nth-child(4n+2) .course-banner{background:linear-gradient(135deg,#448cf6,#51c9ff)}
body.kids-app .course-card:nth-child(4n+3) .course-banner{background:linear-gradient(135deg,#41c87d,#9bdf5e)}
body.kids-app .course-card:nth-child(4n) .course-banner{background:linear-gradient(135deg,#8c68ed,#c178f4)}
body.kids-app .course-card .course-body{padding:18px 20px}

/* Classroom */
body.kids-app .cc-course-hero{
  border-radius:27px;
  background:linear-gradient(135deg,#236ff1,#44c7ff 65%,#56d0b6);
  box-shadow:0 16px 35px rgba(37,113,194,.18)
}
body.kids-app .cc-course-nav{border-radius:17px}
body.kids-app .cc-course-nav a{border-radius:12px}
body.kids-app .cc-week-card{border-radius:20px;box-shadow:0 8px 22px rgba(43,91,150,.09)}
body.kids-app .cc-week-number span{border-radius:15px;background:linear-gradient(145deg,#247af5,#45c4ff)}
body.kids-app .cc-material{border-radius:13px}

/* Grades */
body.kids-app .grade-summary-card,
body.kids-app .grade-course-card,
body.kids-app .period-card{
  border-radius:22px!important;
  box-shadow:var(--kid-shadow)!important;
}
body.kids-app .grade-total,
body.kids-app .score-circle{
  background:linear-gradient(145deg,#e8f6ff,#fff)!important;
  border:4px solid #48a5ff!important;
  color:var(--kid-blue)!important;
}

/* Forms and tables */
body.kids-app .form-panel,
body.kids-app .table-panel{border-radius:22px;box-shadow:var(--kid-shadow)}
body.kids-app .form-grid label>input,
body.kids-app .form-grid label>select,
body.kids-app .form-grid label>textarea{
  border:2px solid #dcecff;border-radius:14px;background:#fbfdff
}
body.kids-app th{background:linear-gradient(135deg,#2078ee,#35afea);border:0}
body.kids-app td{border-bottom:1px solid #eaf2fb}
body.kids-app .badge,.kids-app .group-badge,.kids-app .role-badge{border-radius:13px}

/* Mobile */
@media(max-width:1000px){
  body.kids-app .sidebar{width:230px}
  body.kids-app .main{margin-left:230px;width:calc(100% - 230px)}
  body.kids-app .top-search{width:300px!important}
  body.kids-app .kid-characters{right:-20px;opacity:.82}
}
@media(max-width:760px){
  body.kids-app .sidebar{width:250px}
  body.kids-app .main{margin-left:0;width:100%}
  body.kids-app .content{padding:16px 13px 35px}
  body.kids-app .page-head{display:block}
  body.kids-app .page-head h1{font-size:29px}
  body.kids-app .kid-hero{min-height:330px;padding:26px 23px;border-radius:23px}
  body.kids-app .kid-hero h2{font-size:30px}
  body.kids-app .kid-characters{width:250px;height:150px;right:-10px;bottom:-2px;transform:scale(.78);transform-origin:bottom right;opacity:.92}
  body.kids-app .kid-star{display:none}
  body.kids-app .quick-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  body.kids-app .quick-grid{grid-template-columns:1fr}
  body.kids-app .kid-hero{min-height:350px}
  body.kids-app .kid-characters{right:-35px}
}

/* Login */
body.kids-login{
  background:linear-gradient(135deg,#eaf7ff,#f7fbff);
  color:var(--kid-ink);
}
body.kids-login .login-page{min-height:100vh}
body.kids-login .login-left{
  background:linear-gradient(160deg,#237bf2,#43c7ff 70%,#65d7c4);
}
body.kids-login .login-right{background:#f4f9ff}
body.kids-login .login-card{border-radius:28px;box-shadow:0 20px 50px rgba(36,91,154,.14);border:1px solid #deedfb}
body.kids-login .institution-logo{
  width:300px!important;height:300px!important;max-width:300px!important;max-height:300px!important;object-fit:contain!important
}
body.kids-login .btn.primary{background:linear-gradient(135deg,#1976f3,#36b7ff);border-radius:15px}
body.kids-login input{border-radius:15px!important;border:2px solid #dcecff!important;background:#f7fbff!important}

/* Clean illustrated navigation icons */
body.kids-app .nav-icon{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;background:#eef7ff;color:#1976f3;box-shadow:inset 0 0 0 1px #d9ecff}
body.kids-app .nav-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body.kids-app .nav-link:first-child .nav-icon{background:#fff;color:#1976f3;box-shadow:none}
body.kids-app .nav-link:hover .nav-icon{background:#fff;color:#1976f3}
body.kids-app .sidebar-bottom .nav-link:first-child .nav-icon{background:#eaf5ff;color:#1976f3}
body.kids-app .nav-link:nth-of-type(2) .nav-icon{color:#ffad1f;background:#fff7df}
body.kids-app .nav-link:nth-of-type(3) .nav-icon{color:#28b980;background:#eafff5}
body.kids-app .nav-link:nth-of-type(4) .nav-icon{color:#7c68ed;background:#f0edff}
body.kids-app .nav-link:nth-of-type(5) .nav-icon{color:#ff6d82;background:#fff0f3}
body.kids-app .nav-link:nth-of-type(6) .nav-icon{color:#ff9b27;background:#fff4e5}
body.kids-app .nav-link:nth-of-type(7) .nav-icon{color:#a06bea;background:#f5edff}
body.kids-app .nav-link:nth-of-type(8) .nav-icon{color:#169ed3;background:#e8f8ff}