/* Anwar Al-Fayhaa visual layer: generous spacing, layered school colours and quiet motion. */
:root {
  --night: #103a43;
  --ocean: #0b6972;
  --lagoon: #13a5aa;
  --sky: #d8f2f3;
  --paper: #fbfdfc;
  --warm: #f5f0e7;
  --edge: #d8eae8;
  --shadow: 0 18px 50px rgba(13, 73, 77, .08);
}
body {background: #f7fbfa;color:var(--night)}
button, input, select, textarea {touch-action: manipulation}
button {transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,background-color .22s ease,border-color .22s ease}
.shell {min-height:100vh;grid-template-columns:258px minmax(0,1fr)}
.sidebar {
  position:sticky;top:0;height:100vh;overflow:auto;isolation:isolate;
  padding:1.8rem 1.35rem;
  background:linear-gradient(165deg,#124f57 0%,#0b3c48 52%,#102e40 100%);
  box-shadow:-13px 0 45px rgba(16,58,67,.1);
}
.sidebar::before,.sidebar::after {content:"";position:absolute;border:1px solid #ffffff1c;border-radius:50%;z-index:-1;pointer-events:none}
.sidebar::before {width:310px;height:310px;top:-135px;left:-145px;box-shadow:0 0 0 42px #ffffff08,0 0 0 95px #ffffff04}
.sidebar::after {width:260px;height:260px;bottom:10%;right:-180px;box-shadow:0 0 0 39px #ffffff08}
.sidebar .brand {padding:.25rem .3rem 1.3rem;border-bottom:1px solid #ffffff24;align-items:center}
.sidebar .school-emblem {width:58px;height:58px;background:transparent;box-shadow:none}
.sidebar .brand strong {font-size:1.17rem;color:#fff}
.sidebar .brand small {font-size:.77rem;color:#bcdfdd}
.side-nav {gap:.48rem}
.side-nav button {min-height:49px;border-radius:13px;font-size:.94rem;padding:.8rem 1rem;position:relative}
.side-nav button::before {content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#64c8c7;margin-inline-end:.8rem;opacity:.58}
.side-nav button.active {background:#ffffff24;box-shadow:inset -3px 0 0 #73dfd8,0 8px 22px #061e2a27}
.side-nav button.active::before {background:#a7f4e8;opacity:1;box-shadow:0 0 0 5px #b6f8e828}
.side-nav button:hover {transform:translateX(-3px);background:#ffffff1c}
.side-bottom {padding:1rem;border:1px solid #ffffff28;border-radius:17px;background:#ffffff0d;backdrop-filter:blur(7px)}
.side-bottom strong {display:block;color:#fff;line-height:1.5}
.side-bottom small {margin-top:.25rem}
.side-bottom button {margin-top:.6rem;border-radius:10px}
.workspace {
  position:relative;isolation:isolate;
  background:radial-gradient(circle at 86% 4%,#d8f1ef 0,transparent 28%),
    radial-gradient(circle at 8% 43%,#edf8f5 0,transparent 35%),#f8fbfa;
}
.workspace::before {content:"";position:absolute;inset:100px 0 auto;height:480px;pointer-events:none;z-index:-1;opacity:.38;
  background-image:radial-gradient(#7dbab5 1px,transparent 1px);background-size:28px 28px;
  mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.topbar {min-height:88px;padding:1rem clamp(1.2rem,3vw,3rem);background:#ffffffd9;backdrop-filter:blur(20px);border-bottom:1px solid #d9e9e8;position:relative;z-index:3}
.topbar h1 {font-size:1.42rem;letter-spacing:-.035em}
.topbar .muted {font-size:.86rem}
.topbar > .btn {box-shadow:0 8px 19px #08716c29}
.content {width:min(1360px,100%);padding:clamp(1.15rem,2.7vw,2.7rem);padding-bottom:4rem;animation:view-enter .48s cubic-bezier(.2,.8,.2,1) both}
.dashboard-hero {
  min-height:318px;position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;padding:clamp(1.65rem,4vw,3.2rem);
  border-radius:31px;color:#fff;
  background:linear-gradient(118deg,#064e58 0%,#0a747a 48%,#1ba7a5 100%);
  box-shadow:0 25px 60px #0c77752b;
}
.dashboard-hero::before {content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background:
  radial-gradient(circle at 74% 70%,#c3f7e979 0,transparent 25%),
  linear-gradient(145deg,transparent 40%,#ffffff13 40%,transparent 69%)}
.dashboard-hero::after {content:"";position:absolute;inset:auto -18% -185px 10%;height:320px;border:1px solid #ffffff45;border-radius:50%;transform:rotate(-15deg);pointer-events:none}
.hero-copy {position:relative;z-index:2;width:min(610px,71%)}
.hero-kicker {display:inline-flex;align-items:center;gap:.62rem;padding:.5rem .82rem;border:1px solid #ffffff5a;border-radius:100px;background:#ffffff20;backdrop-filter:blur(8px);font-size:.78rem;font-weight:700;color:#e8fffd}
.live-dot {width:8px;height:8px;border-radius:50%;background:#a4f5dc;box-shadow:0 0 0 5px #a4f5dc26,0 0 15px #a4f5dca0}
.hero-copy h2 {font-size:clamp(2rem,4vw,3.3rem);line-height:1.27;letter-spacing:-.055em;margin:1.1rem 0 .75rem}
.hero-copy h2 em {font-style:normal;color:#c2f9eb}
.hero-copy p {max-width:520px;color:#e2f5f1;line-height:1.85;margin:0;font-size:1.02rem}
.hero-actions {display:flex;align-items:center;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem}
.hero-primary.btn {color:#105359!important;background:#fff!important;border-radius:12px;display:inline-flex;align-items:center;gap:1.3rem;padding-inline:1.1rem;box-shadow:0 12px 25px #063a3d36}
.hero-primary span {font-size:1.35rem;line-height:1}
.hero-primary:hover {background:#dffff9!important;box-shadow:0 15px 30px #063a3d42!important}
.hero-link {border:0;background:transparent;color:#fff;font-weight:750;padding:.75rem}
.hero-link:hover {transform:translateX(-4px);text-decoration:underline}
.hero-art {position:absolute;left:6%;top:0;width:38%;height:100%;pointer-events:none;display:grid;place-items:center}
.hero-art::before {content:"";width:270px;height:270px;border-radius:40%;position:absolute;background:linear-gradient(130deg,#dfffff55,#ffffff10);filter:blur(2px);transform:rotate(-27deg);animation:hero-breathe 8s ease-in-out infinite}
.hero-art img {width:clamp(130px,19vw,220px);height:clamp(130px,19vw,220px);object-fit:contain;position:relative;z-index:1;padding:0;background:transparent;filter:drop-shadow(0 17px 23px #043b4380);animation:hero-float 7s ease-in-out infinite}
.hero-ring {position:absolute;border:1px solid #ffffff65;border-radius:50%}
.ring-one {width:310px;height:310px;transform:rotate(-23deg) scaleX(1.3)}
.ring-two {width:380px;height:380px;opacity:.34;transform:rotate(27deg) scaleX(.7)}
.hero-status {position:absolute;left:1.8rem;bottom:1.45rem;z-index:2;background:#ffffffd9;color:var(--night);border:1px solid #fff;border-radius:18px;padding:.75rem 1rem;box-shadow:0 13px 33px #07384339;backdrop-filter:blur(12px);min-width:134px;display:grid;gap:.1rem}
.hero-status span,.hero-status small {font-size:.7rem;color:#4b7475}
.hero-status strong {font-size:2rem;line-height:1.05;color:#087277}
.stats-grid {margin-top:1.25rem}
.stat {min-height:158px;border-radius:21px;padding:1.2rem 1.35rem;background:#fff;border:1px solid #d9ece9;box-shadow:var(--shadow);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease;animation:card-rise .5s ease both}
.stat:nth-child(2){animation-delay:.07s}.stat:nth-child(3){animation-delay:.14s}.stat:nth-child(4){animation-delay:.21s}
.stat::before {height:0}.stat:hover {transform:translateY(-5px);box-shadow:0 20px 42px #105c6020}
.stat-icon {display:grid;place-items:center;float:left;width:40px;height:40px;border-radius:12px;background:#ddf5f0;color:#0f7e78;font-size:1.45rem}
.stat-1 .stat-icon{background:#fff2dd;color:#ad7725}.stat-2 .stat-icon{background:#e4f2fc;color:#3c83ac}.stat-3 .stat-icon{background:#e5f6e8;color:#39865a}
.stat small{font-weight:650;color:#557574}.stat strong{font-size:2.5rem;margin:.55rem 0 .1rem;color:#126b71}
.stat-note{display:block;color:#829b97;font-size:.75rem}
.section-heading {margin:2.35rem 0 1rem;align-items:end}
.section-heading .eyebrow {display:block;color:#178588;font-size:.7rem;letter-spacing:.05em;margin-bottom:.3rem}
.section-heading h2 {font-size:1.35rem;letter-spacing:-.025em}
.section-heading .link-button {font-size:.83rem;text-decoration:none;border:1px solid #bededb;border-radius:100px;background:#fff;padding:.55rem .85rem}
.section-heading .link-button:hover {background:#eaf8f6;transform:translateX(-3px)}
.list {gap:.75rem}
.list-button {border-radius:18px;border-color:var(--edge);min-height:82px;padding:1rem 1.25rem;box-shadow:0 8px 24px #0c505009;position:relative;overflow:hidden}
.list-button::before {content:"";position:absolute;inset:12px 0 12px auto;width:3px;border-radius:10px;background:#57bcb5;transition:height .2s ease,background .2s ease}
.list-button:hover {border-color:#8fccc6;box-shadow:0 16px 30px #0c626017}
.list-button:active,.btn:active {transform:scale(.985)!important}
.pill {border:1px solid currentColor;font-weight:750}
.journey {margin-top:2.4rem;border:1px solid #d8e9e7;border-radius:25px;padding:1.5rem clamp(1.2rem,3vw,2.3rem);background:linear-gradient(120deg,#ffffff,#eef8f7);box-shadow:var(--shadow)}
.journey-head h2 {margin:.25rem 0;color:var(--night);font-size:1.32rem}
.journey-head p {margin:.25rem 0 1.3rem;color:#668482;font-size:.88rem}
.journey-track {display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;position:relative}
.journey-track::before {content:"";position:absolute;top:24px;right:12%;left:12%;height:1px;background:linear-gradient(90deg,#a9e3dc,#61b9b6,#a9e3dc)}
.journey-track > div {position:relative;display:grid;gap:.35rem;justify-items:start;padding:.15rem .5rem}
.journey-track span {width:47px;height:47px;display:grid;place-items:center;border-radius:16px;background:#e3f7f3;border:1px solid #98d3cc;color:#0f7776;font-weight:850;font-size:.82rem;box-shadow:0 5px 13px #237d761b}
.journey-track strong {font-size:.88rem;color:#234b50}
.journey-track small {font-size:.72rem;color:#77918e}
.auth {background:radial-gradient(circle at 15% 21%,#cbe9ed 0,transparent 27%),radial-gradient(circle at 92% 79%,#d4f4e9 0,transparent 25%),#f7fbfa}
.auth-layout {box-shadow:0 38px 90px #125c6729;border:1px solid #fff;border-radius:31px}
.auth-card {position:relative}
.auth-card::before {content:"";position:absolute;top:0;right:0;width:100%;height:5px;background:linear-gradient(90deg,#0f777e,#58c6be,#b3e7dc)}
.auth-visual::after {inset:42% 0 0;background:linear-gradient(transparent,#0c4655db)}
.auth-visual-caption {border-right:3px solid #96e7df;padding-right:1rem}
.auth-layout .brand {padding-bottom:.8rem;border-bottom:1px solid #e5efed}
.auth-layout h1 {letter-spacing:-.04em;font-size:1.9rem!important}
.auth-layout .btn[type=submit] {background:linear-gradient(95deg,#0d7379,#0c8e8d);box-shadow:0 11px 23px #08716c27}
.form input:focus,.form select:focus,.form textarea:focus {outline:2px solid #58b6b0;box-shadow:0 0 0 5px #72c9c222}
dialog {border:1px solid #e4eeeb;border-radius:24px;box-shadow:0 28px 85px #062f3f55}
dialog::backdrop {background:#12384299;backdrop-filter:blur(5px)}
dialog[open] {animation:dialog-arrive .24s cubic-bezier(.2,.8,.2,1) both}
.team-intro {background:linear-gradient(115deg,#eef9f5,#eaf4fa);border:1px solid #d7e8e5;border-radius:24px}
.team-row {border-radius:20px;border-color:#d9e9e6;box-shadow:0 9px 27px #0b55540a}
.team-row .row {gap:.55rem}
.team-row .btn.warn,.action-row .btn.warn {background:#fff2ef;color:#9f3e36;border:1px solid #e7b7b0;box-shadow:none}
.team-row .btn.warn:hover,.action-row .btn.warn:hover {background:#a63d37;color:#fff;border-color:#a63d37}
.detail .action-row {border-top:1px solid #dbeae7;padding-top:1.2rem;gap:.6rem}
.detail .action-row .btn {border-radius:12px}
#toast:not(:empty) {bottom:calc(1rem + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 2rem);border:1px solid #8bd9cc;background:#143f3e;box-shadow:0 18px 40px #163e3e4d;text-align:center}
.conversation {background:linear-gradient(140deg,#f9fdfc,#ecf7f4)}
.site-credit {background:linear-gradient(180deg,#f9fcfb,#eaf5f2);border-top-color:#cde2df}
.credit-inner {padding-block:1.8rem;gap:.8rem}
.reveal {opacity:0;transform:translateY(13px)}
.reveal.is-visible {opacity:1;transform:translateY(0);transition:opacity .48s ease,transform .48s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible.list-button:hover {transform:translateY(-2px)}
@keyframes view-enter {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes card-rise {from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-float {0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes hero-breathe {0%,100%{transform:rotate(-27deg) scale(1)}50%{transform:rotate(-17deg) scale(1.08)}}
@keyframes dialog-arrive {from{opacity:0;transform:translateY(13px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:1000px){.dashboard-hero{min-height:305px}.hero-art{left:1%;width:37%}.hero-status{left:.75rem;bottom:.8rem}.stat{padding:1rem;min-height:145px}}
@media(max-width:850px){
  .shell{grid-template-columns:1fr}.sidebar{position:fixed;height:100dvh;overflow:auto;inset:0 0 0 auto!important;transform:translateX(110%);display:flex!important;z-index:15;width:min(310px,84vw);transition:transform .3s ease;box-shadow:-25px 0 60px #092d3355}
  .sidebar.open{transform:translateX(0)}.sidebar:not(.open){pointer-events:none}
  .workspace{grid-column:1}.topbar{min-height:74px}.content{padding:1.1rem;padding-bottom:3rem}
  .dashboard-hero{min-height:315px}.hero-art{left:-4%;opacity:.55}.hero-copy{width:76%}.hero-status{left:1rem}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .team-row .row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;align-items:stretch}
  .team-row .row .pill,.team-row .row select {grid-column:1/-1;justify-self:start}
  .team-row .row .btn {width:100%;white-space:normal;min-height:46px}
  .detail .action-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail .action-row .btn {min-height:48px;font-size:.82rem;line-height:1.4;white-space:normal;padding:.55rem}
  .dashboard-hero{min-height:360px;border-radius:24px;padding:1.4rem;align-items:start}
  .hero-copy{width:100%}.hero-copy h2{font-size:2.15rem;margin:.9rem 0 .55rem}.hero-copy p{font-size:.85rem;max-width:300px;line-height:1.65}
  .hero-kicker{font-size:.66rem}.hero-art{width:200px;height:200px;left:-57px;top:122px;opacity:.42}
  .hero-art img{width:135px;height:135px}.hero-art::before{width:180px;height:180px}.hero-ring{display:none}
  .hero-actions{margin-top:1.15rem;gap:.25rem}.hero-primary.btn{font-size:.79rem;padding:.62rem .75rem;gap:.4rem;min-height:40px}.hero-link{font-size:.75rem}
  .hero-status{bottom:1rem;left:1rem;min-width:92px;padding:.55rem .75rem}.hero-status strong{font-size:1.55rem}
  .stats-grid{gap:.7rem;margin-top:.8rem}.stat{min-height:134px;border-radius:17px;padding:.85rem}.stat-icon{width:29px;height:29px;font-size:1.1rem;border-radius:8px}.stat small{font-size:.73rem}.stat strong{font-size:2rem;margin:.7rem 0 0}.stat-note{font-size:.63rem}
  .journey-track{grid-template-columns:repeat(2,1fr);gap:1.1rem}.journey-track::before{display:none}
  .list-button{padding:.88rem;gap:.5rem;align-items:flex-start;flex-direction:column}.list-button .pill{align-self:flex-start}
  .section-heading h2{font-size:1.15rem}.topbar{padding:.8rem}.topbar h1{font-size:1.05rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .hero-art img,.hero-art::before{transform:none!important}
}