:root{font-family:Arial,Helvetica,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{
  overflow:hidden;color:#fff;
  background:
    linear-gradient(90deg,#064515 0%,#0b5f20 42%,#24123f 58%,#351166 100%);
}

/* Diagonal accents only — no circular background shape. */
.left-stripes,.right-stripes{position:fixed;pointer-events:none;opacity:.24}
.left-stripes{
  left:-100px;top:-65px;width:500px;height:220px;transform:rotate(-38deg);
  background:linear-gradient(#8de13c 0 17%,transparent 17% 31%,#1e7d24 31% 50%,transparent 50% 63%,#0a3112 63%);
}
.right-stripes{
  right:-120px;bottom:95px;width:530px;height:220px;transform:rotate(-40deg);
  background:linear-gradient(#a961e6 0 17%,transparent 17% 31%,#742caf 31% 50%,transparent 50% 63%,#251240 63%);
}

/* Soft paw prints only. */
.pawmark{position:fixed;width:150px;height:150px;pointer-events:none;opacity:.04;z-index:0}
.pawmark i{position:absolute;display:block;background:#fff}
.pawmark .pad{width:74px;height:60px;left:38px;top:63px;border-radius:52% 52% 45% 45% / 58% 58% 42% 42%}
.pawmark .toe{width:30px;height:42px;border-radius:55% 55% 48% 48%}
.pawmark .t1{left:17px;top:24px;transform:rotate(-26deg)}
.pawmark .t2{left:48px;top:5px;transform:rotate(-8deg)}
.pawmark .t3{right:43px;top:6px;transform:rotate(9deg)}
.pawmark .t4{right:13px;top:28px;transform:rotate(27deg)}
.paw-left-big{left:330px;top:330px;transform:scale(1.7) rotate(-12deg);opacity:.022}
.paw-right-top{right:110px;top:36px;transform:scale(.7) rotate(16deg);opacity:.045}

.dashboard{
  position:relative;z-index:2;
  height:calc(100vh - 110px);
  padding:28px 36px 18px;
  display:grid;
  grid-template-columns:330px minmax(430px,1fr) 340px;
  gap:28px;
}

.left-column,.center-column,.right-column{min-width:0}

.brand-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.header-bear{
  width:54px;height:54px;object-fit:contain;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.30))
}
.school{font-size:14px;font-weight:800;letter-spacing:.22em}
.portal{font-size:10px;letter-spacing:.30em;color:#7ce464;margin-top:5px}

.time-card{margin:4px 0 16px 8px}
.time-card strong{display:block;font-size:58px;font-weight:300;line-height:.95}
.time-card span{display:block;margin-top:8px;color:#7ce665;font-size:16px}

.search{
  height:50px;border-radius:16px;background:rgba(4,22,13,.76);
  border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;
  padding:0 12px;margin-bottom:16px;box-shadow:0 12px 28px rgba(0,0,0,.20)
}
.search-icon{font-size:22px;color:#72df63;margin-right:8px}
.search input{flex:1;border:0;outline:0;background:transparent;color:white;font-size:15px}
.search button{width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#4285f4;font-weight:900}

.panel{
  border:1px solid rgba(255,255,255,.13);border-radius:18px;
  background:rgba(5,16,14,.58);backdrop-filter:blur(13px);
  box-shadow:0 14px 34px rgba(0,0,0,.20)
}
.panel-title{font-size:11px;letter-spacing:.12em;font-weight:800}

.shortcuts{padding:17px;margin-bottom:16px}
.shortcut-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:15px}
.shortcut-grid a{text-decoration:none;color:white;text-align:center;font-size:10px}
.shortcut-grid a img{
  width:52px;height:52px;margin:0 auto 7px;display:block;border-radius:14px;
  background:rgba(255,255,255,.96);padding:7px;object-fit:contain;
  border:1px solid rgba(255,255,255,.12)
}
.shortcut-grid a b{display:block;font-weight:500}

.reminders{padding:16px}
.reminder-line{
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;gap:10px;font-size:12px
}
.reminder-line:last-child{border-bottom:0}
.reminder-line a{color:#7fe66d;text-decoration:none;text-align:right}

/* Center */
.center-column{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-bottom:20px;
}
.badge-stage{
  width:min(500px,92%);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.badge-stage::before{
  content:"";
  position:absolute;
  width:78%;
  height:78%;
  border-radius:42%;
  background:linear-gradient(90deg,rgba(4,70,24,.36),rgba(70,25,116,.36));
  filter:blur(42px);
  opacity:.8;
}
.portal-badge{
  position:relative;
  width:100%;
  max-height:500px;
  object-fit:contain;
  border-radius:36px;
  mix-blend-mode:normal;
  opacity:.90;
  filter:
    saturate(.95)
    contrast(1.02)
    drop-shadow(0 20px 36px rgba(0,0,0,.26));
  -webkit-mask-image:radial-gradient(ellipse at center, #000 61%, rgba(0,0,0,.96) 72%, transparent 96%);
  mask-image:radial-gradient(ellipse at center, #000 61%, rgba(0,0,0,.96) 72%, transparent 96%);
}

.expectations-main{margin-top:4px;width:min(430px,90%)}
.expectations-main>div{
  display:grid;grid-template-columns:46px 1fr;align-items:center;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.13)
}
.expectations-main>div:last-child{border-bottom:0}
.symbol{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;font-size:18px}
.shield,.heart{color:#75e45f;border:1px solid rgba(117,228,95,.45)}
.handshake{color:#bd73ff;border:1px solid rgba(189,115,255,.45)}
.expectations-main strong{font-size:20px;letter-spacing:.06em}

blockquote{
  width:min(620px,95%);margin:18px 0 0;padding:13px 18px;
  border-radius:16px;background:rgba(3,18,13,.42);
  border:1px solid rgba(255,255,255,.10);font-size:15px
}
blockquote small{display:block;color:#74df63;margin-top:6px}

/* Right column */
.right-column{display:flex;flex-direction:column;gap:16px;padding-top:54px}
.student-card{padding:18px;background:rgba(20,10,37,.68)}
.student-main{display:flex;align-items:center;gap:13px;margin-top:16px}
.avatar{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  font-size:22px;font-weight:900;background:linear-gradient(135deg,#0d7a31,#6d2aaa);
  border:2px solid rgba(255,255,255,.75)
}
.student-main h3{margin:0 0 4px;font-size:16px}
.student-main span,.student-main small{display:block}
.student-main span{font-size:11px;color:#8be777}
.student-main small{font-size:10px;opacity:.7;margin-top:3px}
.student-status{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:16px;padding:13px 0;border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);font-size:11px
}
.student-status b{color:#8ce879}
.schedule-btn{
  display:block;margin-top:14px;padding:11px 12px;text-align:center;border-radius:12px;
  background:rgba(30,85,45,.75);border:1px solid rgba(120,224,100,.2);
  color:#a5f193;text-decoration:none;font-size:12px;font-weight:800
}

.expectations-card{padding:18px;background:rgba(20,10,37,.68)}
.expectations-card>div:not(.panel-title){padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.expectations-card>div:last-child{border-bottom:0}
.expectations-card b,.expectations-card span{display:block}
.expectations-card b{font-size:12px;color:#79e665}
.expectations-card>div:nth-of-type(3) b{color:#bd75ff}
.expectations-card span{margin-top:5px;font-size:11px;line-height:1.45;opacity:.78}

.quick-links{padding:18px;background:rgba(20,10,37,.68)}
.quick-links a{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;color:white;text-decoration:none;font-size:12px;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.quick-links a:last-child{border-bottom:0}
.quick-links a span{font-size:18px;opacity:.65}

@media(max-width:1200px){
  .dashboard{grid-template-columns:290px minmax(360px,1fr) 300px;gap:20px;padding:22px 26px 18px}
  .time-card strong{font-size:50px}
  .portal-badge{max-height:420px}
  .shortcut-grid{gap:10px}
  .right-column{padding-top:48px}
}


/* --- v15 Announcements --- */
.right-column{
  gap:12px;
  padding-top:28px;
}
.student-card,
.expectations-card,
.quick-links,
.announcements-card{
  padding:15px;
}

.panel-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.live-dot{
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
  color:#84ed6c;
  border:1px solid rgba(132,237,108,.25);
  background:rgba(24,88,38,.28);
  padding:4px 7px;
  border-radius:999px;
}
.announcements-card{
  background:rgba(20,10,37,.68);
}
.announcements-list{
  margin-top:11px;
}
.announcement{
  position:relative;
  padding:10px 0 10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.announcement:last-child{
  border-bottom:0;
  padding-bottom:2px;
}
.announcement::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  bottom:13px;
  width:3px;
  border-radius:99px;
  background:#7cdf64;
}
.announcement.priority-important::before{
  background:#ffb342;
}
.announcement.priority-urgent::before{
  background:#ff6464;
}
.announcement-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.announcement-title{
  font-size:12px;
  font-weight:900;
  line-height:1.25;
}
.announcement-priority{
  flex:0 0 auto;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.7;
}
.announcement-message{
  margin-top:4px;
  font-size:10px;
  line-height:1.45;
  opacity:.82;
}
.announcement-meta{
  margin-top:5px;
  font-size:8px;
  color:#94e983;
  opacity:.85;
}
.announcement-status{
  padding:12px 0 4px;
  font-size:10px;
  line-height:1.45;
  opacity:.62;
}
.announcement-status.error{
  color:#ffc7c7;
}


/* v16: BEARS EXPECTATIONS card removed to create more usable dashboard space. */
.right-column{
  padding-top:36px;
  gap:16px;
}
.announcements-card{
  min-height:190px;
}
.announcements-list{
  max-height:245px;
  overflow:auto;
  padding-right:3px;
}
.quick-links{
  margin-top:0;
}


/* v17: school expectations in one centered horizontal line */
.expectations-main{
  width:min(720px,96%);
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  flex-wrap:nowrap;
}
.expectations-main>div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:8px 0;
  border-bottom:0;
  white-space:nowrap;
}
.expectations-main .symbol{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:9px;
  font-size:16px;
}
.expectations-main strong{
  font-size:15px;
  letter-spacing:.045em;
}
@media(max-width:1200px){
  .expectations-main{gap:16px}
  .expectations-main strong{font-size:12px}
  .expectations-main .symbol{width:27px;height:27px;flex-basis:27px;font-size:14px}
}