/* Schooldesk reference-site visual layer
   Keeps the existing product logic intact while matching the bright,
   premium, mobile-first academy workspace design. */

:root{
  --ref-ink:#26304a;
  --ref-muted:#7f869a;
  --ref-coral:#ff7693;
  --ref-coral-soft:#ffe8ee;
  --ref-lilac:#9c8dff;
  --ref-lilac-soft:#efebff;
  --ref-blue:#75c9ee;
  --ref-blue-soft:#e8f7ff;
  --ref-mint:#68d8ad;
  --ref-mint-soft:#e6fbf2;
  --ref-cream:#fffafc;
  --ref-white:rgba(255,255,255,.78);
  --ref-line:rgba(74,84,118,.10);
  --ref-shadow:0 22px 70px rgba(82,74,124,.10);
  --ref-shadow-soft:0 10px 30px rgba(73,76,111,.07);
  --ref-radius-xl:30px;
  --ref-radius-lg:24px;
  --ref-radius-md:18px;
}

html{background:#fff9fc}
body{
  background:
    radial-gradient(circle at 0 0,rgba(255,218,231,.60),transparent 31%),
    radial-gradient(circle at 94% 2%,rgba(226,221,255,.72),transparent 29%),
    radial-gradient(circle at 88% 88%,rgba(218,251,239,.58),transparent 26%),
    linear-gradient(145deg,#fffafd 0%,#fbfbff 48%,#f8fffc 100%);
  color:var(--ref-ink);
}
body:before,body:after{
  content:"";position:fixed;pointer-events:none;z-index:-1;border-radius:999px;filter:blur(10px);opacity:.65
}
body:before{width:240px;height:240px;left:-80px;bottom:12%;background:rgba(255,226,235,.62)}
body:after{width:300px;height:300px;right:-110px;top:30%;background:rgba(230,226,255,.58)}

/* --- App shell --------------------------------------------------------- */
.topbar{
  height:74px;
  padding:12px 22px;
  background:rgba(255,255,255,.58)!important;
  border-bottom:1px solid rgba(76,87,125,.07)!important;
  box-shadow:0 6px 26px rgba(78,74,109,.035);
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
}
.topbar .brand strong{font-size:20px;text-transform:lowercase;letter-spacing:-.65px}
.topbar .brand small{font-size:11px;font-weight:700;letter-spacing:.02em}
.topbar .brand img{width:40px;height:40px;border-radius:13px;box-shadow:0 8px 22px rgba(128,112,205,.14)}
.top-actions{gap:10px}
.top-actions .pill,.top-actions .demo-badge{
  min-height:34px;border:1px solid rgba(255,255,255,.82);box-shadow:0 7px 18px rgba(73,76,111,.05)
}
.demo-badge{background:linear-gradient(135deg,#f1edff,#e9f4ff)!important;color:#6256b9!important}
.role-name{background:rgba(255,255,255,.70);color:#60677d}

.layout{grid-template-columns:258px minmax(0,1fr);min-height:calc(100vh - 74px)}
.sidebar{
  padding:22px 15px 28px;
  background:linear-gradient(180deg,rgba(255,255,255,.54),rgba(255,255,255,.31));
  border-right:1px solid rgba(76,87,125,.07)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.ref-sidebar-head{padding:4px 5px 18px}
.ref-sidebar-kicker,.ref-section-kicker,.ref-hero-kicker{
  font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:#9b91b5
}
.ref-workspace-card{
  margin-top:9px;display:flex;align-items:center;gap:11px;padding:12px;border-radius:18px;
  background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.82);box-shadow:var(--ref-shadow-soft)
}
.ref-workspace-avatar{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  font-weight:900;font-size:13px;color:#6759c9;background:linear-gradient(135deg,#ffe8ee,#eeebff)
}
.ref-workspace-copy b{display:block;font-size:13px;line-height:1.2}
.ref-workspace-copy small{display:block;font-size:10px;color:var(--ref-muted);margin-top:3px}
.ref-nav-label{margin:4px 8px 7px;font-size:9px;font-weight:900;letter-spacing:.16em;color:#aaa0bb;text-transform:uppercase}
.nav-list{gap:4px;top:92px}
.nav-btn{
  min-height:43px;padding:10px 12px;border-radius:14px;font-size:13px;font-weight:780;color:#7b8194;
  transition:background .16s ease,transform .16s ease,color .16s ease,box-shadow .16s ease
}
.nav-btn:hover{transform:translateX(2px)}
.nav-btn.active{
  color:#31384d!important;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(246,243,255,.92))!important;
  box-shadow:0 9px 24px rgba(75,72,112,.08)!important;border:1px solid rgba(255,255,255,.88)
}
.nav-ico{width:24px;height:24px;border-radius:9px;display:grid;place-items:center;font-size:14px;background:rgba(255,255,255,.66)}
.nav-btn.active .nav-ico{background:linear-gradient(135deg,#ffe9ef,#efebff);color:#6759c9}
.ref-sidebar-note{
  margin:18px 5px 0;padding:14px;border-radius:17px;background:linear-gradient(135deg,rgba(255,237,243,.70),rgba(239,236,255,.74));
  color:#6d6f83;font-size:11px;line-height:1.55;border:1px solid rgba(255,255,255,.78)
}
.ref-sidebar-note b{display:block;color:#3d4458;font-size:12px;margin-bottom:3px}
.ref-sidebar-foot{margin:14px 8px 0;font-size:10px;color:#a0a5b3;line-height:1.5}

.main{padding:30px 34px 110px;max-width:1500px;width:100%;margin:0 auto}
.page-head{margin-bottom:19px;align-items:center}
.page-head h1{font-size:29px;letter-spacing:-.9px;font-weight:900}
.page-head p{font-size:13px;color:#9096a7}
.page-head .actions{align-items:center}

/* --- Reference hero / overview --------------------------------------- */
.ref-demo-strip{
  margin:0 0 15px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border-radius:19px;
  background:linear-gradient(135deg,rgba(239,235,255,.82),rgba(231,247,255,.82));border:1px solid rgba(255,255,255,.88);box-shadow:var(--ref-shadow-soft)
}
.ref-demo-strip .left{display:flex;align-items:center;gap:11px;min-width:0}
.ref-demo-strip .dot{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:#fff;color:#7262ce;font-weight:900;box-shadow:0 7px 18px rgba(94,83,162,.10)}
.ref-demo-strip b{display:block;font-size:13px}
.ref-demo-strip small{display:block;color:#7f879b;font-size:11px;margin-top:2px;line-height:1.4}
.ref-demo-strip .actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}

.ref-overview-hero{
  position:relative;overflow:hidden;margin:0 0 18px;padding:25px 26px;border-radius:var(--ref-radius-xl);
  background:linear-gradient(120deg,rgba(255,255,255,.88),rgba(255,239,245,.78) 40%,rgba(240,237,255,.80) 100%);
  border:1px solid rgba(255,255,255,.91);box-shadow:var(--ref-shadow)
}
.ref-overview-hero:after{
  content:"";position:absolute;right:-60px;bottom:-95px;width:260px;height:260px;border-radius:999px;
  background:radial-gradient(circle,rgba(139,210,244,.24),rgba(159,143,255,.12) 48%,transparent 70%)
}
.ref-overview-hero h2{position:relative;z-index:1;font-size:31px;line-height:1.05;letter-spacing:-1.1px;margin:8px 0 8px;max-width:680px}
.ref-overview-hero p{position:relative;z-index:1;margin:0;color:#7d8497;line-height:1.6;font-size:14px;max-width:680px}
.ref-overview-hero .ref-hero-kicker{position:relative;z-index:1;color:#9a72a8}

.ref-overview .grid-4{gap:13px}
.ref-overview .metric{
  min-height:145px;padding:18px 18px 16px;border:1px solid rgba(255,255,255,.91);box-shadow:0 16px 42px rgba(79,77,112,.08)
}
.ref-overview .metric .label{font-size:12px;font-weight:850;color:#777e92}
.ref-overview .metric .value{font-size:30px;letter-spacing:-1.1px}
.ref-overview .metric .hint{font-size:11px;line-height:1.45}
.ref-overview .metric:nth-child(1){order:2}
.ref-overview .metric:nth-child(2){order:1}
.ref-overview .metric:nth-child(3){order:3}
.ref-overview .metric:nth-child(4){order:4}

.ref-overview .section-title{margin-top:27px;margin-bottom:11px}
.ref-section-title-wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.ref-section-title-wrap h2{margin:3px 0 0;font-size:19px}
.ref-overview .quick-actions{gap:11px}
.ref-overview .quick{
  min-height:155px;padding:17px;border:1px solid rgba(255,255,255,.86);background:rgba(255,255,255,.66);box-shadow:var(--ref-shadow-soft);
  transition:transform .16s ease,box-shadow .16s ease
}
.ref-overview .quick:hover{transform:translateY(-2px);box-shadow:0 16px 35px rgba(73,76,111,.10)}
.ref-overview .quick .qicon{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#ffe8ef,#efebff);color:#5e54b5}
.ref-overview .quick b{font-size:14px}
.ref-overview .quick small{font-size:11px;line-height:1.45}
.ref-quick-link{display:inline-block;margin-top:10px;font-size:11px;font-weight:850;color:#6761a7}

.ref-attention{
  margin-top:17px;padding:18px;border-radius:24px;background:rgba(255,255,255,.61);border:1px solid rgba(255,255,255,.88);box-shadow:var(--ref-shadow-soft)
}
.ref-attention-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:11px}
.ref-attention-head h3{margin:3px 0 0;font-size:18px}
.ref-attention-count{padding:6px 9px;border-radius:999px;background:#f4f1ff;color:#6c60bd;font-size:10px;font-weight:900}
.ref-attention-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.ref-attention-item{padding:13px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid var(--ref-line)}
.ref-attention-item span{display:block;color:#9aa0ae;font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.ref-attention-item b{display:block;font-size:12px;margin-top:5px;line-height:1.35}
.ref-attention-item small{display:block;color:#888fa1;font-size:10px;margin-top:4px;line-height:1.4}

.ref-fee-health{
  margin-top:18px;display:grid;grid-template-columns:1.25fr repeat(3,.65fr);gap:10px;padding:17px;border-radius:24px;
  background:linear-gradient(135deg,rgba(233,248,255,.72),rgba(239,236,255,.72));border:1px solid rgba(255,255,255,.88);box-shadow:var(--ref-shadow-soft)
}
.ref-fee-intro h3{margin:4px 0 5px;font-size:18px}.ref-fee-intro p{margin:0;color:#8c92a4;font-size:11px;line-height:1.5}
.ref-fee-stat{padding:12px;border-radius:15px;background:rgba(255,255,255,.72)}
.ref-fee-stat small{display:block;color:#9197a8;font-size:10px}.ref-fee-stat b{display:block;font-size:17px;margin-top:4px}

/* --- Cards, forms, lists --------------------------------------------- */
.card,.quick,.form-card,.finance-card,.receipt-card,.course-card{
  border-color:rgba(255,255,255,.86)!important;
}
.card{box-shadow:0 15px 46px rgba(80,77,112,.075);background:rgba(255,255,255,.68)}
.input,.select,.textarea{
  background:rgba(255,255,255,.82)!important;border:1px solid rgba(81,91,125,.10)!important;box-shadow:0 6px 18px rgba(79,79,112,.035)
}
.input:focus,.select:focus,.textarea:focus{border-color:rgba(156,141,255,.58)!important;box-shadow:0 0 0 4px rgba(156,141,255,.09)!important}
.btn{box-shadow:0 8px 22px rgba(73,76,111,.07)}
.btn-primary{background:linear-gradient(135deg,#ff7895,#ff91aa 48%,#9b8cff)!important;box-shadow:0 12px 28px rgba(255,118,147,.20)!important}
.btn-ghost{background:rgba(255,255,255,.62)!important}
.filters{padding:11px;border-radius:21px;background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.80);box-shadow:0 12px 32px rgba(73,76,111,.045)}
.chip{background:rgba(255,255,255,.70)!important;border-color:rgba(76,87,125,.09)!important}
.chip.active{background:linear-gradient(135deg,#f1edff,#e9f4ff)!important;color:#6359b4!important}
.list-row{background:rgba(255,255,255,.66)!important;border-color:rgba(79,87,118,.08)!important}
.section-title h2{letter-spacing:-.35px}

/* --- Attendance: highest-priority mobile surface --------------------- */
.student-grid{gap:13px}
.student-card{
  border-radius:23px!important;padding:15px 11px 12px!important;background:rgba(255,255,255,.72)!important;
  box-shadow:0 14px 40px rgba(73,76,111,.075)!important;transform:translateZ(0)
}
.student-card:hover{transform:translateY(-2px);box-shadow:0 18px 45px rgba(73,76,111,.10)!important}
.student-card .avatar.big{width:96px!important;height:96px!important;border-radius:27px!important;box-shadow:0 10px 25px rgba(80,78,111,.10)}
.student-card h3{font-size:16px!important;font-weight:900;letter-spacing:-.2px}
.student-card .last{font-size:12px!important}
.student-card .course{font-size:10px!important;line-height:1.45!important}
.att-btn{min-height:41px!important;border-radius:12px!important}
.att-btn.present{background:#f0fbf6!important}.att-btn.present.active{background:#def8ed!important;color:#267659!important}
.att-btn.absent{background:#fff4f6!important}.att-btn.absent.active{background:#ffe4eb!important;color:#b34a61!important}
.sticky-save{
  background:rgba(255,255,255,.82)!important;border:1px solid rgba(255,255,255,.90)!important;box-shadow:0 20px 54px rgba(69,68,100,.17)!important;
  backdrop-filter:blur(22px) saturate(140%)!important;-webkit-backdrop-filter:blur(22px) saturate(140%)!important
}

/* --- Login ------------------------------------------------------------ */
.login-wrap{
  width:min(1120px,100%);margin:0 auto;grid-template-columns:1fr minmax(390px,460px);gap:46px;align-items:center;padding:34px
}
.ref-login-story{padding:30px 16px;max-width:560px}
.ref-login-story .ref-hero-kicker{color:#9a78a8}
.ref-login-story h2{font-size:48px;line-height:1.02;letter-spacing:-2px;margin:10px 0 14px;max-width:540px}
.ref-login-story p{font-size:15px;line-height:1.7;color:#7e8598;max-width:500px}
.ref-login-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:22px}
.ref-login-point{padding:13px;border-radius:17px;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.82);font-size:11px;color:#73798e;line-height:1.45}
.ref-login-point b{display:block;color:#394055;font-size:12px;margin-bottom:4px}
.login-card{border-radius:32px!important;padding:30px!important;background:rgba(255,255,255,.68)!important;box-shadow:0 30px 90px rgba(78,72,115,.14)!important}
.login-card h1{font-size:31px!important}.login-card>p{font-size:13px}

/* --- Mobile ----------------------------------------------------------- */
.mobile-nav{
  background:rgba(255,255,255,.82)!important;border-top:1px solid rgba(79,87,118,.08)!important;backdrop-filter:blur(22px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(145%)!important;box-shadow:0 -12px 34px rgba(72,72,103,.07)
}
.mobile-nav button{font-size:10px;color:#868b9c}.mobile-nav button.active{color:#514a8f}.mobile-nav button span{font-size:17px}

@media(max-width:1100px){
  .layout{grid-template-columns:220px minmax(0,1fr)}
  .main{padding-left:24px;padding-right:24px}
  .ref-overview .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ref-overview .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ref-fee-health{grid-template-columns:repeat(3,minmax(0,1fr))}.ref-fee-intro{grid-column:1/-1}
}

@media(max-width:760px){
  .topbar{height:64px;padding:10px 13px}.topbar .brand small,.role-name{display:none!important}.topbar .brand img{width:36px;height:36px}
  .layout{display:block;min-height:calc(100vh - 64px)}.sidebar{display:none}.main{padding:17px 12px 112px}
  .page-head{align-items:flex-start;margin-bottom:14px}.page-head h1{font-size:25px}.page-head p{font-size:11px}
  .ref-demo-strip{align-items:flex-start;padding:12px}.ref-demo-strip .actions{display:none}
  .ref-overview-hero{padding:20px 17px;border-radius:24px;margin-bottom:13px}.ref-overview-hero h2{font-size:26px;line-height:1.07}.ref-overview-hero p{font-size:12px}
  .ref-overview .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.ref-overview .metric{min-height:126px;padding:14px}.ref-overview .metric .value{font-size:24px}.ref-overview .metric .label{font-size:11px}
  .ref-overview .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.ref-overview .quick{min-height:145px;padding:14px}.ref-overview .quick .qicon{width:38px;height:38px}
  .ref-attention{padding:14px}.ref-attention-grid{grid-template-columns:1fr}.ref-fee-health{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px}.ref-fee-intro{grid-column:1/-1}
  .filters{padding:9px;border-radius:18px}.student-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.student-card{padding:13px 8px 10px!important}.student-card .avatar.big{width:90px!important;height:90px!important;border-radius:24px!important}.student-card h3{font-size:15px!important}.att-actions{gap:5px}.att-btn{font-size:11px!important;min-height:39px!important}
  .sticky-save{left:10px!important;right:10px!important;transform:none!important;bottom:74px!important;justify-content:space-between;border-radius:17px!important}.sticky-save .btn{min-height:43px}
  .login-wrap{width:100%;display:block;padding:18px}.ref-login-story{display:none}.login-card{width:100%!important;max-width:480px;margin:0 auto;padding:24px!important}
}

@media(max-width:390px){
  .main{padding-left:9px;padding-right:9px}.ref-overview .metric{padding:12px;min-height:119px}.ref-overview .metric .value{font-size:22px}.student-card .avatar.big{width:84px!important;height:84px!important}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}