/* ─────────────────────────────────────────────────────────────
   ESPACE ISAT — REDESIGN
   Glass-pill dashboard inspired by Crextio reference,
   anchored on ISAT brand tokens (green / navy / mint).
   ───────────────────────────────────────────────────────────── */

:root{
  /* Brand */
  --g:#65910A; --gd:#4F7508; --gs:#A4C463; --gm:#E0F6B2; --gm-2:#EFF8D0;
  --n:#202030; --n2:#2D2D45; --n3:#3a3a4a;
  --ink:#1c1c28; --ink2:#3a3a4a; --ink3:#6b6b78; --ink4:#9d9da8;
  --line:rgba(32,32,48,.08);
  --line-soft:rgba(32,32,48,.05);

  /* Cream surface */
  --bg-a:#f5efe0;   /* warm cream */
  --bg-b:#fbf8ee;   /* paper */
  --bg-c:#e9f1cf;   /* mint tint */

  /* Glass */
  --glass:rgba(255,255,255,.62);
  --glass-soft:rgba(255,255,255,.42);
  --glass-line:rgba(255,255,255,.85);
  --glass-line-2:rgba(32,32,48,.06);

  /* Shadows */
  --sh-card: 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 50px -22px rgba(32,32,48,.18), 0 6px 14px -8px rgba(32,32,48,.10);
  --sh-soft: 0 6px 16px -10px rgba(32,32,48,.18);
  --sh-glow: 0 14px 40px -12px rgba(101,145,10,.45);

  /* Radii */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  /* Type */
  --f-sans:'Inter','SF Pro Display',system-ui,-apple-system,sans-serif;
  --f-serif:'Instrument Serif','Cormorant Garamond',Georgia,serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{ min-height:100%; background:#f3ecdb }
body{
  font-family:var(--f-sans);
  color:var(--ink);
  background:#f3ecdb;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01','cv11';
  line-height:1.5;
  overflow-x:hidden;
}

/* ───────── PAGE FRAME ───────── */
.frame{
  min-height:100vh;
  padding:22px;
  position:relative;
  background:
    radial-gradient(900px 600px at 92% -10%, rgba(101,145,10,.18), transparent 60%),
    radial-gradient(700px 500px at 8% 110%, rgba(164,196,99,.22), transparent 55%),
    linear-gradient(160deg, #f6efde 0%, #fbf8ee 38%, #ecf3d4 100%);
}
/* grain */
.frame::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(32,32,48,.04) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode:multiply;
  opacity:.35;
}

.shell{
  position:relative; z-index:1;
  max-width:1400px; margin:0 auto;
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.75);
  border-radius:36px;
  padding:18px 22px 26px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 30px 80px -30px rgba(32,32,48,.20),
    0 8px 24px -12px rgba(32,32,48,.08);
  backdrop-filter: blur(8px);
}

/* ───────── TOP NAV ───────── */
.topnav{
  display:flex; align-items:center; gap:14px;
  margin-bottom:22px;
}
.brand{
  display:grid; place-items:center; flex-shrink:0;
  width:64px; height:64px; padding:0;
  background:transparent; border:0; box-shadow:none;
}
.brand-mark{ width:60px; height:60px; display:grid; place-items:center; flex-shrink:0; animation:brandFloat 3.4s ease-in-out infinite }
.brand-mark img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(32,32,48,.25)) }
.brand:active .brand-mark{ animation:brandSpin .6s var(--ease) }
@keyframes brandFloat{ 0%,100%{ transform:translateY(0) rotate(0deg) } 50%{ transform:translateY(-4px) rotate(-4deg) } }
@keyframes brandSpin{ 0%{ transform:rotate(0) scale(1) } 50%{ transform:rotate(-12deg) scale(1.12) } 100%{ transform:rotate(0) scale(1) } }
.brand-name{ display:none }

.nav-pills{
  display:flex; gap:2px; align-items:center;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.7);
  padding:5px; border-radius:var(--r-pill);
  margin:0 auto;
  backdrop-filter:blur(10px);
}
.np{
  appearance:none; border:none; background:transparent; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink2);
  padding:9px 16px; border-radius:var(--r-pill);
  transition:all .25s var(--ease);
  letter-spacing:-.005em; white-space:nowrap;
}
.np:hover{ color:var(--n) }
.np.on{
  background:var(--n); color:#fff;
  box-shadow:0 6px 16px -8px rgba(32,32,48,.45);
}

.nav-right{ display:flex; align-items:center; gap:8px }
.iconbtn{
  width:42px; height:42px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:#fff; border:1px solid rgba(32,32,48,.08);
  color:var(--n); cursor:pointer; transition:.2s;
  position:relative;
}
.iconbtn:hover{ background:var(--gm); border-color:rgba(101,145,10,.25) }
.iconbtn .dotnotif{
  position:absolute; top:9px; right:11px;
  width:8px; height:8px; border-radius:50%;
  background:var(--g); box-shadow:0 0 0 2px #fff;
}
.iconbtn svg{ width:18px; height:18px }
.role-pill{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid rgba(32,32,48,.08);
  padding:4px 4px 4px 14px; border-radius:var(--r-pill);
  font-size:13px; font-weight:700; color:var(--n);
}
.role-pill .sep{ width:1px; height:18px; background:rgba(32,32,48,.1); margin:0 2px }
.role-toggle{
  display:flex; gap:2px;
  background:#f3efe2; border-radius:var(--r-pill); padding:3px;
}
.role-toggle button{
  appearance:none; border:none; background:transparent; cursor:pointer;
  padding:7px 12px; font-family:inherit; font-size:12px; font-weight:700;
  color:var(--ink3); border-radius:var(--r-pill); transition:.2s;
  white-space:nowrap;
}
.role-toggle button.on{ background:var(--g); color:#fff; box-shadow:0 4px 10px -4px rgba(101,145,10,.6) }

/* ───────── HERO ROW ───────── */
.hero-row{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:32px; margin-top:24px; padding:0 8px }
.greet{
  font-family:var(--f-serif);
  font-weight:400; font-size:clamp(48px,5.5vw,72px);
  letter-spacing:-.02em; line-height:.95; color:var(--n);
}
.greet em{ font-style:italic; color:var(--n); position:relative; padding-right:.15em }
.greet .name{ color:var(--g); font-style:italic }
.greet .wave{ display:inline-block; transform-origin:70% 70%; animation:wave 2.5s ease-in-out infinite; font-family:var(--f-sans); font-size:.55em }
@keyframes wave{ 0%,80%,100%{transform:rotate(0)} 10%{transform:rotate(14deg)} 20%{transform:rotate(-8deg)} 30%{transform:rotate(14deg)} 40%{transform:rotate(-4deg)} 50%{transform:rotate(10deg)} }

.hero-meta{ display:flex; align-items:center; gap:30px; padding-bottom:10px }
.hmeta{ display:flex; align-items:center; gap:10px }
.hmeta-ico{
  width:30px; height:30px; border-radius:50%;
  background:rgba(32,32,48,.06); display:grid; place-items:center;
  color:var(--n);
}
.hmeta-ico svg{ width:15px; height:15px }
.hmeta-n{
  font-family:var(--f-serif); font-size:42px; line-height:.9;
  letter-spacing:-.02em; color:var(--n);
  font-feature-settings:'tnum';
}
.hmeta-l{ font-size:11px; color:var(--ink3); font-weight:600; margin-top:2px; letter-spacing:.04em }

/* ───────── PROGRESS STRIP ───────── */
.prog-row{
  margin-top:22px; padding:6px 8px;
  display:grid; grid-template-columns:auto 1fr; gap:42px; align-items:center;
}
.prog-labels{ display:flex; gap:30px }
.pl{ display:flex; flex-direction:column; gap:6px }
.pl-l{ font-size:11px; color:var(--ink3); font-weight:600; letter-spacing:.02em }
.pl-pill{
  background:var(--n); color:#fff;
  font-size:12px; font-weight:700; padding:5px 14px;
  border-radius:var(--r-pill); align-self:flex-start;
  font-feature-settings:'tnum';
}
.pl-pill.mint{ background:var(--gm); color:var(--gd) }
.pl-pill.green{ background:var(--g); color:#fff }
.pl-pill.ghost{ background:transparent; color:var(--n); border:1px solid rgba(32,32,48,.15) }
.pl-track{
  height:32px; border-radius:var(--r-pill);
  background:repeating-linear-gradient(45deg, rgba(32,32,48,.06) 0 6px, transparent 6px 12px);
  border:1px solid rgba(32,32,48,.08);
  display:flex; align-items:center; padding:0 14px;
  font-size:12px; color:var(--ink3); font-weight:600;
}

/* ───────── CARD GRID ───────── */
.grid-main{
  display:grid; grid-template-columns: 1.05fr 1.25fr 1.1fr 1.1fr;
  gap:18px; margin-top:24px;
}

.card{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-xl);
  padding:22px;
  position:relative;
  box-shadow:var(--sh-card);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.card.dark{
  background:#202030;
  color:#fff;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 30px 60px -28px rgba(32,32,48,.55), 0 8px 18px -10px rgba(32,32,48,.30);
}
.card.dark::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px 280px at 100% 0%, rgba(101,145,10,.18), transparent 60%);
}
.card.mint{ background:var(--gm); border:1px solid rgba(101,145,10,.15) }

.card h3, .card .ttl{
  font-size:18px; font-weight:600; color:var(--n);
  letter-spacing:-.01em; margin-bottom:14px;
  display:flex; justify-content:space-between; align-items:center;
}
.card.dark h3, .card.dark .ttl{ color:#fff }

.ttl .arr{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:var(--n);
  border:1px solid rgba(32,32,48,.08); cursor:pointer; transition:.2s;
}
.ttl .arr:hover{ background:var(--g); color:#fff; border-color:var(--g) }
.card.dark .ttl .arr{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.1) }

/* ── PROFILE CARD ── */
.card-profile{ padding:0; overflow:hidden; min-height:380px; display:flex; flex-direction:column }
.cp-photo{
  flex:1; min-height:240px;
  background:
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.6), transparent 60%),
    linear-gradient(155deg, #c8d4a8 0%, #9bb060 55%, #607f30 100%);
  position:relative; overflow:hidden;
}
.cp-photo .ph-svg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.cp-foot{
  padding:18px 20px 20px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.7);
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
}
.cp-name{ font-size:18px; font-weight:700; color:var(--n); letter-spacing:-.01em }
.cp-role{ font-size:12px; color:var(--ink3); margin-top:2px }
.cp-pill{
  background:#fff; color:var(--n); border:1px solid rgba(32,32,48,.08);
  padding:6px 14px; border-radius:var(--r-pill);
  font-size:13px; font-weight:700; white-space:nowrap;
  font-feature-settings:'tnum';
}

/* ── PROGRESS / BAR CHART CARD ── */
.prog-num{
  font-family:var(--f-serif); font-size:54px; line-height:.95;
  color:var(--n); letter-spacing:-.02em; display:flex; align-items:baseline; gap:10px;
}
.prog-num small{
  font-family:var(--f-sans); font-size:11px; color:var(--ink3);
  font-weight:600; line-height:1.3; letter-spacing:.01em; max-width:90px;
}
.bars{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:6px; height:120px; margin-top:14px;
  padding:24px 4px 0;
  position:relative;
}
.bars::before{
  content:""; position:absolute; left:0; right:0; bottom:28px;
  border-top:1px dashed rgba(32,32,48,.12);
}
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; align-self:stretch; justify-content:flex-end }
.bar{
  width:10px; min-width:10px; border-radius:99px; background:var(--n);
  position:relative;
}
.bar.mute{ background:rgba(32,32,48,.18) }
.bar.peak{ background:var(--g) }
.bar.peak::after{
  content:attr(data-v);
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  background:var(--gm); color:var(--gd);
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px;
  white-space:nowrap;
}
.bar-l{ font-size:11px; color:var(--ink3); font-weight:600 }

/* ── GAUGE CARD ── */
.gauge-wrap{
  position:relative; height:200px; display:grid; place-items:center;
}
.gauge-svg{ width:170px; height:170px; transform:rotate(-90deg) }
.gauge-track{ stroke:rgba(32,32,48,.08); fill:none; stroke-width:14 }
.gauge-bar{ stroke:var(--g); fill:none; stroke-width:14; stroke-linecap:round; transition:stroke-dashoffset 1s var(--ease) }
.gauge-ticks{ position:absolute; inset:0; pointer-events:none }
.gauge-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center;
}
.gauge-n{ font-family:var(--f-serif); font-size:34px; line-height:1; color:var(--n); letter-spacing:-.02em }
.gauge-l{ font-size:11px; color:var(--ink3); font-weight:600; margin-top:4px }
.card-gauge .ctrls{
  display:flex; gap:10px; align-items:center; margin-top:10px;
}
.btn-circ{
  width:38px; height:38px; border-radius:50%;
  background:#fff; border:1px solid rgba(32,32,48,.08);
  display:grid; place-items:center; cursor:pointer;
  color:var(--n); transition:.2s;
}
.btn-circ:hover{ background:var(--n); color:#fff }
.btn-circ.dark{ background:var(--n); color:#fff; border-color:var(--n) }
.btn-circ.dark:hover{ background:var(--n2) }
.btn-circ.float{ position:absolute; right:18px; bottom:18px }

/* ── TASK / EVAL DARK CARD ── */
.card-tasks{ padding:22px 22px 16px }
.tasks-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px }
.tasks-head h3{ margin:0; font-size:18px; color:#fff; font-weight:600 }
.tasks-count{
  background:rgba(255,255,255,.08); color:#fff;
  font-family:var(--f-serif); font-size:24px; padding:2px 14px;
  border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.1);
  letter-spacing:-.01em;
}
.tasks-count small{ font-size:13px; opacity:.6; font-family:var(--f-sans); font-weight:600 }
.task{
  display:flex; align-items:center; gap:12px;
  padding:11px 4px; border-bottom:1px solid rgba(255,255,255,.06);
}
.task:last-child{ border-bottom:none }
.task-ico{
  width:34px; height:34px; border-radius:10px;
  background:rgba(255,255,255,.08); display:grid; place-items:center;
  color:rgba(255,255,255,.85); font-size:15px;
}
.task-body{ flex:1; min-width:0 }
.task-t{ font-size:13.5px; font-weight:600; color:#fff }
.task.done .task-t{ color:rgba(255,255,255,.45); text-decoration:line-through; text-decoration-color:rgba(255,255,255,.25) }
.task-m{ font-size:11.5px; color:rgba(255,255,255,.45); margin-top:1px; font-feature-settings:'tnum' }
.task-check{
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  font-size:11px; color:rgba(255,255,255,.6);
}
.task.done .task-check{ background:var(--g); color:#fff; border-color:var(--g) }

/* ───────── SECOND ROW ───────── */
.grid-2{
  display:grid; grid-template-columns: 1fr 1.6fr 1.05fr; gap:18px; margin-top:18px;
}

/* Collapsible list card */
.list-card{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-xl); padding:6px;
  box-shadow:var(--sh-card);
  backdrop-filter:blur(20px) saturate(1.2);
}
.lc-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; cursor:pointer;
  border-radius:24px; transition:.2s;
}
.lc-row:hover{ background:rgba(255,255,255,.5) }
.lc-row + .lc-row{ border-top:1px solid rgba(32,32,48,.06) }
.lc-t{ font-size:14.5px; font-weight:600; color:var(--n) }
.lc-chev{ color:var(--ink3); font-size:14px }
.lc-body{
  padding:6px 12px 12px;
  display:flex; flex-direction:column; gap:6px;
}
.lc-item{
  display:flex; align-items:center; gap:14px;
  padding:10px 12px; border-radius:14px;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(32,32,48,.04);
}
.lc-item img, .lc-item .lc-ico{
  width:38px; height:38px; border-radius:10px; object-fit:cover;
  background:var(--gm); display:grid; place-items:center;
  flex-shrink:0; font-size:16px;
}
.lc-item .lc-ico.dark{ background:var(--n); color:#fff }
.lc-name{ font-size:13.5px; font-weight:600; color:var(--n) }
.lc-sub{ font-size:11.5px; color:var(--ink3); margin-top:1px }
.lc-meta{ margin-left:auto; font-size:11px; color:var(--ink3); font-weight:600; font-feature-settings:'tnum'; flex-shrink:0; white-space:nowrap }

/* CALENDAR */
.cal{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.8);
  border-radius:var(--r-xl);
  padding:18px 22px 20px;
  box-shadow:var(--sh-card);
  position:relative;
  backdrop-filter:blur(20px) saturate(1.2);
}
.cal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px }
.cal-month{
  font-family:var(--f-serif); font-size:26px; letter-spacing:-.01em; color:var(--n);
  white-space:nowrap;
}
.cal-nav{ display:flex; gap:8px; align-items:center }
.cal-nav .lbl{
  font-size:13px; color:var(--ink3); padding:4px 12px;
  border-radius:99px; border:1px solid rgba(32,32,48,.1);
  font-weight:600;
}
.cal-days{
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px;
}
.cd{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 4px 12px;
  border-radius:18px;
  background:rgba(255,255,255,.3);
  border:1px solid rgba(32,32,48,.04);
}
.cd .d-lbl{ font-size:10.5px; color:var(--ink3); font-weight:600; text-transform:uppercase; letter-spacing:.05em }
.cd .d-num{ font-family:var(--f-serif); font-size:24px; line-height:1; color:var(--n) }
.cd.today{ background:var(--n); border-color:var(--n) }
.cd.today .d-lbl{ color:rgba(255,255,255,.55) }
.cd.today .d-num{ color:#fff }
.cd.has-evt{ background:var(--gm); border-color:rgba(101,145,10,.15) }
.cd.has-evt .d-lbl{ color:var(--gd) }
.cd.has-evt .d-num{ color:var(--gd) }

/* Small detail card */
.kpi-card{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-xl); padding:22px;
  box-shadow:var(--sh-card);
  backdrop-filter:blur(20px) saturate(1.2);
}
.kpi-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }
.kpi-num{ font-family:var(--f-serif); font-size:54px; line-height:.95; color:var(--n); letter-spacing:-.02em }
.kpi-sub{ font-size:12px; color:var(--ink3); margin-top:6px; font-weight:500 }
.kpi-foot{
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(32,32,48,.06);
  display:flex; align-items:center; gap:10px;
}

/* ── PROFILE COMPACT (mini) for in-card use ── */
.mini-id{ display:flex; align-items:center; gap:12px }
.mini-av{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(155deg,var(--g),var(--gd));
  color:#fff; font-weight:800; font-size:14px;
  display:grid; place-items:center; box-shadow:var(--sh-glow);
}

/* tags */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:99px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
}
.tag.mint{ background:var(--gm); color:var(--gd) }
.tag.dark{ background:var(--n); color:#fff }
.tag.ghost{ border:1px solid rgba(32,32,48,.1); color:var(--n); background:#fff }

/* TABLE (cours/résultats) */
.tbl-card{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-xl); padding:6px;
  box-shadow:var(--sh-card);
  backdrop-filter:blur(20px) saturate(1.2);
  overflow:hidden;
}
.tbl-head{ display:grid; grid-template-columns: 2.4fr .9fr .8fr .8fr .8fr .9fr .7fr; padding:14px 20px; gap:10px; font-size:11px; color:var(--ink3); font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.tbl-row{ display:grid; grid-template-columns: 2.4fr .9fr .8fr .8fr .8fr .9fr .7fr; padding:14px 20px; gap:10px; font-size:13.5px; align-items:center; border-radius:18px; transition:.15s }
.tbl-row + .tbl-row{ border-top:1px solid rgba(32,32,48,.05) }
.tbl-row:hover{ background:rgba(255,255,255,.55) }
.tbl-row .nm{ font-weight:600; color:var(--n) }
.tbl-row .meta{ color:var(--ink3); font-size:11.5px; margin-top:2px }
.cell-mono{ font-family:var(--f-mono); font-size:13px; color:var(--ink2); font-feature-settings:'tnum' }
.cell-grade{ font-family:var(--f-serif); font-size:22px; color:var(--n); letter-spacing:-.01em }
.cell-grade.ok{ color:var(--g) }
.cell-grade.bad{ color:#D9534F }
.cell-grade.muted{ color:var(--ink4) }

/* simple buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:var(--r-pill);
  font-family:inherit; font-size:13.5px; font-weight:700;
  cursor:pointer; border:none; transition:.2s;
}
.btn.p{ background:var(--g); color:#fff; box-shadow:var(--sh-glow) }
.btn.p:hover{ background:var(--gd); transform:translateY(-1px) }
.btn.n{ background:var(--n); color:#fff }
.btn.g{ background:#fff; color:var(--n); border:1px solid rgba(32,32,48,.1) }
.btn.g:hover{ background:var(--gm); border-color:rgba(101,145,10,.25) }

.saisir-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:18px 0 16px;
}
.seg{
  display:inline-grid; grid-template-columns:repeat(4,minmax(48px,1fr));
  gap:4px; padding:4px;
  background:rgba(32,32,48,.045);
  border:1px solid rgba(32,32,48,.08);
  border-radius:14px;
}
.seg button{
  border:0; background:transparent; color:var(--ink3);
  min-width:52px; padding:9px 14px; border-radius:11px;
  font:800 13px var(--f-sans); cursor:pointer; transition:.2s var(--ease);
}
.seg button:hover{ color:var(--n); background:rgba(255,255,255,.55) }
.seg button.on{
  background:#fff; color:var(--n);
  box-shadow:0 8px 18px -14px rgba(32,32,48,.42);
}
.saisir-bar .sel{ min-height:40px; max-width:min(320px,100%) }

/* Grade entry matrix */
.matrix{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-xl); padding:6px;
  box-shadow:var(--sh-card);
  backdrop-filter:blur(20px) saturate(1.2);
  overflow:hidden;
}
.mx-head{ display:grid; grid-template-columns: 1.8fr repeat(4, 1fr) .7fr; padding:14px 20px; gap:10px; font-size:11px; color:var(--ink3); font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.mx-row{ display:grid; grid-template-columns: 1.8fr repeat(4, 1fr) .7fr; padding:10px 20px; gap:10px; align-items:center; border-radius:14px }
.mx-row + .mx-row{ border-top:1px solid rgba(32,32,48,.05) }
.mx-row .who{ display:flex; align-items:center; gap:10px }
.mx-row .av{ width:34px; height:34px; border-radius:50%; background:var(--gm); color:var(--gd); display:grid; place-items:center; font-size:11px; font-weight:800; flex-shrink:0 }
.mx-name{ font-size:13.5px; font-weight:600; color:var(--n) }
.mx-id{ font-size:11px; color:var(--ink3); font-feature-settings:'tnum' }
.mx-input{
  width:100%;
  background:#fff; border:1px solid rgba(32,32,48,.08); border-radius:10px;
  padding:9px 12px; font-family:var(--f-mono); font-size:13px; color:var(--ink); text-align:center;
  transition:.2s;
}
.mx-input:focus{ outline:none; border-color:var(--g); box-shadow:0 0 0 3px rgba(101,145,10,.18) }
.mx-input.locked{ background:rgba(101,145,10,.06); color:var(--gd); font-weight:700 }
.mx-moy{ font-family:var(--f-serif); font-size:20px; color:var(--n); text-align:center; letter-spacing:-.01em }

/* Profile compact card */
.id-card{
  background:linear-gradient(155deg, rgba(255,255,255,.7), rgba(255,255,255,.4));
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-xl); padding:28px;
  box-shadow:var(--sh-card);
  backdrop-filter:blur(20px) saturate(1.2);
  display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center;
}
.id-av-l{
  width:96px; height:96px; border-radius:30px;
  background:linear-gradient(155deg, #c8d4a8 0%, #809f3e 60%, #4F7508 100%);
  display:grid; place-items:center; color:#fff;
  font-size:32px; font-weight:800; letter-spacing:-.02em;
  box-shadow: 0 18px 40px -16px rgba(101,145,10,.5);
  position:relative; overflow:hidden;
}
.id-av-l::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 50%);
}
.id-name{ font-family:var(--f-serif); font-size:36px; color:var(--n); letter-spacing:-.02em; line-height:1 }
.id-line{ display:flex; gap:14px; margin-top:8px; flex-wrap:wrap }
.id-line .tag{ font-weight:600 }
.id-line .lbl-k{ font-size:11px; color:var(--ink3); font-weight:600; letter-spacing:.04em; text-transform:uppercase }
.id-line .lbl-v{ font-size:13px; color:var(--n); font-weight:600; font-feature-settings:'tnum' }

/* utility */
.hide{ display:none !important }
.row{ display:flex; align-items:center; gap:10px }
.spacer{ flex:1 }

/* RESPONSIVE */
@media(max-width:1200px){
  .grid-main{ grid-template-columns: repeat(2, 1fr); }
  .grid-2{ grid-template-columns: 1fr 1fr; }
  .grid-2 > :nth-child(3){ grid-column: 1 / -1 }
}
@media(max-width:1080px){
  .hero-row{ grid-template-columns:1fr; align-items:flex-start; gap:18px }
  .hero-meta{ gap:24px }
  .hmeta-n{ font-size:34px }
  .greet{ font-size:48px }
  .prog-row{ grid-template-columns:1fr; gap:14px }
  .prog-row > div:last-child{ grid-template-columns:1fr auto !important }
}
@media(max-width:860px){
  .frame{ padding:12px }
  .shell{ padding:14px 14px 22px; border-radius:24px }
  .nav-pills{ display:none }
  .role-toggle{ display:none }
  .grid-main, .grid-2{ grid-template-columns:1fr !important }
  .grid-2 > :nth-child(3){ grid-column: auto }
  .hero-row{ grid-template-columns:1fr; align-items:flex-start; gap:16px }
  .hero-meta{ gap:18px; flex-wrap:wrap }
  .hmeta-n{ font-size:32px }
  .tbl-head, .tbl-row{ grid-template-columns: 1.5fr .8fr .8fr; }
  .tbl-head > :nth-child(n+4), .tbl-row > :nth-child(n+4){ display:none }
  .id-card{ grid-template-columns:1fr; text-align:left }
  .mx-head, .mx-row{ grid-template-columns: 1.5fr .8fr .8fr; }
  .mx-head > :nth-child(n+4), .mx-row > :nth-child(n+4){ display:none }
}

/* ═════════════════════════ POINTAGE ═════════════════════════ */
.pt-wrap{display:grid;grid-template-columns:1fr;gap:18px;margin-top:22px}
.pt-card{padding:24px}
.pt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.pt-now{display:inline-flex;align-items:center;gap:6px;background:var(--gm);color:var(--gd);padding:8px 14px;border-radius:var(--r-pill);font-size:12px;font-weight:700;letter-spacing:.02em}
.pt-now.off{background:rgba(32,32,48,.06);color:var(--ink3)}
.pt-err{display:none;align-items:center;gap:8px;background:#FCE6E0;color:#A4391A;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;margin-bottom:14px}
.pt-err.on{display:flex}

.pt-scan-area{aspect-ratio:1;max-width:380px;margin:0 auto 14px;background:var(--n);border-radius:18px;overflow:hidden;position:relative;display:none}
.pt-scan-area.on{display:block}
.pt-scan-area video{width:100%;height:100%;object-fit:cover}
.pt-reticle{position:absolute;inset:18%;border:3px solid var(--g);border-radius:14px;box-shadow:0 0 0 9999px rgba(0,0,0,.4);pointer-events:none}
.pt-reticle::after{content:'';position:absolute;left:8%;right:8%;height:2px;background:var(--gs);top:0;animation:pt-scan 2s ease-in-out infinite;border-radius:99px;box-shadow:0 0 12px var(--gs)}
@keyframes pt-scan{0%,100%{top:0}50%{top:calc(100% - 2px)}}
.pt-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-weight:700;font-size:12px;letter-spacing:.04em;text-shadow:0 1px 4px rgba(0,0,0,.6)}

.pt-actions{display:flex;justify-content:center;margin-bottom:14px}
.pt-or{text-align:center;color:var(--ink4);font-size:11px;font-weight:700;letter-spacing:.06em;margin:14px 0 10px;text-transform:uppercase}
.pt-manual{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:420px;margin:0 auto}
.pt-manual input{padding:13px 16px;border:1.5px solid rgba(32,32,48,.1);border-radius:12px;background:#fff;font-family:inherit;font-size:14px;font-weight:600;color:var(--n);outline:none;transition:border-color .2s,box-shadow .2s}
.pt-manual input:focus{border-color:var(--g);box-shadow:0 0 0 4px rgba(101,145,10,.12)}

/* Active session card */
.pt-sess{background:linear-gradient(135deg,var(--gm),var(--gm-2));border:1.5px solid var(--gs);border-radius:16px;padding:18px 20px;margin-bottom:18px}
.pt-sess-room{font-size:11px;font-weight:800;color:var(--gd);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pt-sess-subj{font-size:20px;font-weight:800;color:var(--n);margin-top:6px;letter-spacing:-.01em}
.pt-sess-meta{font-size:13px;color:var(--ink2);font-weight:600;margin-top:4px}
.pt-tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.04em}
.pt-tag.ok{background:#fff;color:var(--gd)}
.pt-tag.late{background:#FBE6CC;color:#B36A1E}

.pt-roll-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.btn-mini{background:var(--bg-b);color:var(--n);border:1.5px solid rgba(32,32,48,.08);padding:7px 13px;border-radius:10px;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:.18s}
.btn-mini:hover{background:var(--gm);border-color:var(--gs)}

.pt-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.pt-sum{background:var(--bg-b);border-radius:12px;padding:12px;text-align:center}
.pt-sum strong{display:block;font-size:22px;font-weight:800;color:var(--n);line-height:1}
.pt-sum span{font-size:10.5px;color:var(--ink3);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:4px;display:block}
.pt-sum.p strong{color:var(--gd)}
.pt-sum.l strong{color:#B36A1E}
.pt-sum.a strong{color:#A4391A}

.pt-row{display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line-soft)}
.pt-row:last-child{border-bottom:0}
.pt-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(155deg,var(--gs),var(--gd));color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:800;flex-shrink:0}
.pt-info{flex:1;min-width:0}
.pt-info strong{display:block;font-size:14px;font-weight:700;color:var(--n);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-info span{font-size:11.5px;color:var(--ink3)}
.pt-seg{display:flex;background:var(--bg-b);border-radius:10px;padding:3px;gap:2px}
.pt-seg button{padding:7px 12px;border-radius:7px;font-family:inherit;font-size:11.5px;font-weight:800;color:var(--ink3);background:transparent;border:none;cursor:pointer;transition:.16s;min-width:34px}
.pt-seg button:hover{color:var(--n)}
.pt-seg button.on.p{background:var(--g);color:#fff}
.pt-seg button.on.l{background:#E8A547;color:#fff}
.pt-seg button.on.a{background:#E07A7A;color:#fff}

.pt-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}

@media(max-width:680px){
  .pt-summary{grid-template-columns:repeat(2,1fr)}
  .pt-manual{grid-template-columns:1fr}
  .pt-foot{flex-direction:column}
  .pt-foot .btn{width:100%;justify-content:center}
}

/* ═════════════════════════════════════════════════════════════════
   TEACHER DASHBOARD v2 — semester toggle, redesign, mobile, bottom nav
   ═════════════════════════════════════════════════════════════════ */

.sem-switch{
  display:inline-flex; gap:4px; padding:4px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-soft);
  margin:0 0 18px 0;
  backdrop-filter: blur(8px);
}
.sem-switch button{
  border:0; cursor:pointer; background:transparent;
  padding:9px 16px; border-radius:99px;
  font:700 12.5px var(--f-sans); letter-spacing:.02em;
  color:var(--ink3); transition:.22s var(--ease);
  white-space:nowrap;
}
.sem-switch button:hover{ color:var(--n); background:rgba(101,145,10,.06) }
.sem-switch button.on{
  background:linear-gradient(150deg,var(--n2),var(--n));
  color:#fff; box-shadow:0 6px 14px -6px rgba(32,32,48,.45);
}
.sem-switch button.on .sem-dot{ background:var(--gs) }
.sem-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--ink4); margin-right:7px; vertical-align:middle;
}

.greet-v2{
  font:800 56px/1.04 var(--f-sans);
  letter-spacing:-.035em; color:var(--n);
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.greet-v2 em{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  letter-spacing:-.02em;
  background:linear-gradient(180deg, var(--n) 0%, var(--gd) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.greet-v2 .wave{ font-size:36px; animation:wave 2.4s ease-in-out infinite }
@keyframes wave{ 0%,60%,100%{transform:rotate(0)} 10%{transform:rotate(14deg)} 20%{transform:rotate(-8deg)} 30%{transform:rotate(14deg)} 40%{transform:rotate(-4deg)} 50%{transform:rotate(10deg)} }

.today-card{
  padding:22px 22px 14px;
  background:linear-gradient(155deg,#272740 0%,#202030 60%,#191928 100%);
  border-radius:var(--r-lg); color:#fff;
  position:relative; overflow:hidden;
  min-height:380px; display:flex; flex-direction:column;
}
.today-card::before{
  content:""; position:absolute; top:-40%; right:-25%;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(164,196,99,.22), transparent 65%);
  pointer-events:none;
}
.today-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; position:relative; z-index:1 }
.today-head h3{ font:800 17px var(--f-sans); letter-spacing:-.01em; margin:0 }
.today-date{
  font:700 11px var(--f-mono); color:var(--gs);
  background:rgba(164,196,99,.15);
  padding:5px 10px; border-radius:99px; letter-spacing:.04em;
}
.today-sub{ font:600 12px var(--f-sans); color:rgba(255,255,255,.5); margin-bottom:14px; position:relative; z-index:1 }
.today-list{ display:flex; flex-direction:column; gap:9px; position:relative; z-index:1; flex:1 }
.today-slot{
  display:grid; grid-template-columns:54px 1fr auto;
  gap:12px; align-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:11px 12px;
  transition:.22s var(--ease);
}
.today-slot:hover{ background:rgba(255,255,255,.08); transform:translateX(2px) }
.today-slot .ts-time{ font:800 13px var(--f-mono); color:var(--gs); text-align:center; line-height:1.15 }
.today-slot .ts-time small{ display:block; font:600 10.5px var(--f-mono); color:rgba(255,255,255,.4); margin-top:2px }
.today-slot .ts-info{ min-width:0 }
.today-slot .ts-subj{ font:700 13.5px var(--f-sans); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.005em }
.today-slot .ts-meta{ font:600 11px var(--f-sans); color:rgba(255,255,255,.5); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.today-slot .ts-tag{ font:800 10px var(--f-sans); letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:99px; background:rgba(164,196,99,.16); color:var(--gs) }
.today-slot .ts-tag.now{ background:#65910A; color:#fff; animation:nowPulse 2s infinite }
.today-slot .ts-tag.past{ background:rgba(255,255,255,.06); color:rgba(255,255,255,.4) }
@keyframes nowPulse{ 0%{box-shadow:0 0 0 0 rgba(101,145,10,.6)} 70%{box-shadow:0 0 0 10px rgba(101,145,10,0)} 100%{box-shadow:0 0 0 0 rgba(101,145,10,0)} }
.today-empty{ text-align:center; padding:30px 10px; color:rgba(255,255,255,.55); font:600 13px var(--f-sans) }
.today-empty .ico{ font-size:34px; margin-bottom:8px; display:block; opacity:.6 }
.today-foot{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1 }
.today-foot .lnk{ font:700 12px var(--f-sans); color:var(--gs); cursor:pointer; display:inline-flex; align-items:center; gap:4px; text-decoration:none; background:transparent; border:0 }
.today-foot .lnk:hover{ color:#fff }

.pub-card{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 80% at 110% 0%, rgba(101,145,10,.18), transparent 55%),
    linear-gradient(155deg, #fbf8ee 0%, #f6efde 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px; min-height:280px;
  box-shadow:var(--sh-card);
  display:flex; flex-direction:column;
}
.pub-card::after{
  content:""; position:absolute; bottom:-60px; left:-60px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(164,196,99,.25), transparent 65%);
  filter:blur(6px); pointer-events:none;
  animation:pubGlow 6s ease-in-out infinite;
}
@keyframes pubGlow{ 0%,100%{transform:translate(0,0) scale(1); opacity:.7} 50%{transform:translate(20px,-10px) scale(1.1); opacity:1} }
.pub-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; position:relative; z-index:1 }
.pub-num{
  font:800 64px/1 var(--f-sans);
  letter-spacing:-.045em;
  background:linear-gradient(165deg, var(--n) 0%, var(--gd) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  display:flex; align-items:baseline; gap:4px;
  margin:6px 0 4px;
}
.pub-num small{ font-size:24px; color:var(--gs); font-weight:600; -webkit-text-fill-color:var(--gs) }
.pub-progress{ height:8px; background:rgba(32,32,48,.07); border-radius:99px; overflow:hidden; margin:10px 0 14px; position:relative; z-index:1 }
.pub-progress > i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--gs), var(--g) 60%, var(--gd)); border-radius:99px; transition:width 1.4s cubic-bezier(.16,1,.3,1); box-shadow:0 0 10px rgba(101,145,10,.4); position:relative; overflow:hidden }
.pub-progress > i::after{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(90deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%); animation:pubShine 2.4s ease-in-out infinite }
@keyframes pubShine{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.pub-sub{ font:600 12.5px var(--f-sans); color:var(--ink3); line-height:1.55; position:relative; z-index:1 }
.pub-foot{ margin-top:auto; padding-top:14px; position:relative; z-index:1 }
.pub-mini-id{ display:flex; gap:10px; align-items:center }
.pub-mini-av{ width:36px; height:36px; border-radius:50%; background:linear-gradient(155deg,#2D2D45,#202030); color:#fff; font:800 12px var(--f-sans); display:grid; place-items:center }

.qa-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0 4px }
.qa-btn{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; cursor:pointer; text-align:left; font-family:inherit; transition:.22s var(--ease); backdrop-filter: blur(8px) }
.qa-btn:hover{ background:#fff; transform:translateY(-2px); box-shadow:var(--sh-soft) }
.qa-btn .qa-ico{ width:36px; height:36px; border-radius:11px; background:linear-gradient(155deg, var(--gs), var(--gd)); color:#fff; display:grid; place-items:center; font-size:17px; flex-shrink:0 }
.qa-btn.dark .qa-ico{ background:linear-gradient(155deg,#2D2D45,#202030) }
.qa-btn .qa-l{ min-width:0 }
.qa-btn .qa-t{ font:800 13px var(--f-sans); color:var(--n); letter-spacing:-.005em }
.qa-btn .qa-d{ font:600 11px var(--f-sans); color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.cal-edt{ padding:14px 18px 18px; min-height:380px; display:flex; flex-direction:column }
.cal-edt-events{ margin-top:14px; flex:1; display:flex; flex-direction:column; gap:6px; overflow-y:auto; max-height:280px }
.cal-edt-evt{ display:grid; grid-template-columns:64px 1fr; gap:10px; padding:9px 10px; border-radius:10px; background:rgba(101,145,10,.05); border:1px solid rgba(101,145,10,.1); transition:.18s }
.cal-edt-evt:hover{ background:rgba(101,145,10,.09) }
.cal-edt-evt .ce-t{ font:800 11.5px var(--f-mono); color:var(--gd); text-align:center; line-height:1.2; padding-top:2px }
.cal-edt-evt .ce-t small{ display:block; font-weight:600; color:var(--ink3); margin-top:1px }
.cal-edt-evt .ce-i .ce-s{ font:700 13px var(--f-sans); color:var(--n); letter-spacing:-.005em }
.cal-edt-evt .ce-i .ce-m{ font:600 11px var(--f-sans); color:var(--ink3); margin-top:1px }
.cal-edt-empty{ text-align:center; padding:30px 10px; color:var(--ink4); font:600 12.5px var(--f-sans) }

.m-botnav{
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  padding:0 10px calc(10px + env(safe-area-inset-bottom));
  pointer-events:none;
}
.m-botnav-row{
  pointer-events:auto;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0;
  max-width:520px; margin:0 auto;
  background:rgba(255,255,255,.95); backdrop-filter:blur(16px);
  border:1px solid rgba(32,32,48,.07); border-radius:26px;
  padding:7px 6px 6px;
  box-shadow:0 18px 40px -16px rgba(32,32,48,.38), 0 1px 0 rgba(255,255,255,.9) inset;
}
.m-bn-btn{
  background:transparent; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:2px 0 3px; min-height:48px;
  font:700 10px var(--f-sans); color:var(--ink3);
  position:relative; -webkit-tap-highlight-color:transparent;
  transition:color .25s var(--ease);
}
.m-bn-ico{
  width:42px; height:27px; border-radius:99px;
  display:grid; place-items:center;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.m-bn-btn svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease) }
.m-bn-btn:active .m-bn-ico{ transform:scale(.86) }
.m-bn-btn.on{ color:var(--gd) }
.m-bn-btn.on .m-bn-ico{ background:var(--gm) }
.m-bn-btn.on svg{ animation:bnPop .45s var(--ease) }
@keyframes bnPop{ 0%{transform:scale(.65)} 55%{transform:scale(1.18)} 100%{transform:scale(1)} }

@media(max-width:860px){
  body{ padding-bottom:78px }
  .greet-v2{ font-size:34px }
  .greet-v2 .wave{ font-size:24px }
  .sem-switch{ width:100%; justify-content:center; flex-wrap:wrap }
  .sem-switch button{ flex:1; min-width:0; padding:9px 8px; font-size:11.5px }
  .qa-row{ grid-template-columns:repeat(2,1fr) }
  .today-card{ min-height:auto }
  .pub-num{ font-size:48px }
  .pub-num small{ font-size:18px }
  .cal-edt{ min-height:auto }
  .cal-edt-events{ max-height:240px }
  .m-botnav{ display:block }
  body{ padding-bottom:92px }
  .topnav{ flex-wrap:nowrap; gap:8px; justify-content:space-between; margin-bottom:14px }
  .nav-pills{ display:none }
  .nav-right{ margin-left:auto }
  .nav-right .iconbtn{ display:none }
  .role-pill{
    font-size:12px; padding:5px 6px 5px 13px; cursor:pointer;
    background:#fff; border:1px solid rgba(32,32,48,.08); border-radius:999px;
    display:flex; align-items:center; gap:8px; min-height:44px;
    box-shadow:0 2px 8px -4px rgba(32,32,48,.10);
  }
  .role-pill .sep{ display:none }
  .shell{ padding:12px 12px 18px; border-radius:20px }
}
@media(max-width:480px){
  .greet-v2{ font-size:28px; gap:8px }
  .qa-row{ grid-template-columns:1fr 1fr; gap:8px }
  .qa-btn{ padding:10px 11px }
  .qa-btn .qa-ico{ width:32px; height:32px; border-radius:9px; font-size:15px }
  .qa-btn .qa-t{ font-size:12.5px }
  .qa-btn .qa-d{ font-size:10.5px }
  .today-card{ padding:18px 16px 12px }
  .today-slot{ grid-template-columns:48px 1fr auto; padding:10px }
  .today-slot .ts-tag{ font-size:9px; padding:3px 7px }
  .pub-card{ padding:18px }
  .pub-num{ font-size:42px }
}

/* ═════════════════════════════════════════════════════════════════
   MES CLASSES — redesign
   ═════════════════════════════════════════════════════════════════ */
.mc-toolbar{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  margin:18px 0 20px;
}
.mc-search{
  flex:1; min-width:240px;
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:10px 16px;
  box-shadow:var(--sh-soft);
  backdrop-filter:blur(8px);
}
.mc-search span{ font-size:14px; opacity:.5 }
.mc-search input{
  border:0; outline:0; background:transparent; flex:1;
  font:600 13.5px var(--f-sans); color:var(--n);
}
.mc-search input::placeholder{ color:var(--ink4) }
.mc-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}
.mc-card{
  position:relative; cursor:pointer;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(32,32,48,.08); border-radius:18px;
  padding:18px; display:flex; flex-direction:column; gap:11px;
  min-height:250px;
  box-shadow:0 16px 36px -24px rgba(32,32,48,.28);
  transition:.25s var(--ease);
  overflow:hidden;
}
.mc-card::before{ content:none }
.mc-card:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -24px rgba(32,32,48,.34); border-color:rgba(101,145,10,.24) }
.mc-head{ display:flex; gap:12px; align-items:center; position:relative; z-index:1 }
.mc-badge{
  width:48px; height:48px; border-radius:14px;
  color:#fff; display:grid; place-items:center;
  font:800 11px var(--f-mono); letter-spacing:.02em;
  box-shadow:0 6px 14px -6px rgba(32,32,48,.30);
  text-align:center; padding:0 5px;
}
.mc-head-r{ flex:1; min-width:0 }
.mc-code{ font:800 11px var(--f-mono); letter-spacing:.06em; color:var(--ink3); text-transform:uppercase }
.mc-niv{ font:600 10.5px var(--f-sans); color:var(--ink4); margin-top:2px }
.mc-session{ font:800 11px var(--f-mono); color:var(--g2); background:rgba(101,145,10,.10); border:1px solid rgba(101,145,10,.18); padding:6px 8px; border-radius:999px }
.mc-title{ font:800 17px/1.22 var(--f-sans); color:var(--n); letter-spacing:-.01em }
.mc-spec{ font:650 12px var(--f-sans); color:var(--ink3); margin-top:-4px }
.mc-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  background:rgba(250,249,245,.88);
  border:1px solid rgba(101,145,10,.12);
  border-radius:12px; padding:9px 6px;
}
.mc-stat{ text-align:center }
.mc-stat-n{ font:850 18px/1 var(--f-sans); color:var(--n); letter-spacing:0 }
.mc-stat-l{ font:750 9px var(--f-sans); color:var(--ink3); letter-spacing:.04em; text-transform:uppercase; margin-top:3px }
.mc-subjects{ display:flex; flex-wrap:wrap; gap:6px; min-height:30px }
.mc-chip{
  display:inline-block; font:700 10.5px var(--f-sans);
  background:rgba(32,32,48,.05); color:var(--n);
  padding:4px 9px; border-radius:99px;
  max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mc-chip.mc-more{ background:var(--n); color:#fff }
.mc-empty{ font:600 11.5px var(--f-sans); color:var(--ink4); padding:6px 2px }
.mc-actions{ display:flex; align-items:center; gap:8px; margin-top:auto }
.mc-action{
  width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(32,32,48,.10); background:#fff; color:var(--n);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:800 13px var(--f-sans); cursor:pointer; transition:.2s var(--ease);
  box-shadow:0 8px 18px -14px rgba(32,32,48,.35);
}
.mc-action span{ font-size:16px; line-height:1 }
.mc-action:hover{ transform:translateY(-1px); border-color:rgba(101,145,10,.28); color:var(--g2) }
.mc-action.primary{
  flex:1; width:auto; justify-content:center;
  background:var(--g); color:#fff; border-color:var(--g);
  box-shadow:0 12px 22px -14px rgba(101,145,10,.70);
}
.mc-action.primary:hover{ color:#fff; background:var(--g2) }

@media(max-width:680px){
  .mc-grid{ grid-template-columns:1fr }
  .mc-card{ min-height:auto }
  .mc-search{ width:100%; min-width:auto }
}

/* ═════════════════════════════════════════════════════════════════
   WIDGET CUSTOMIZATION (teacher dashboard)
   ═════════════════════════════════════════════════════════════════ */
.dash-edit-bar{
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  margin:-4px 0 14px;
}
.dash-edit-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:9px 16px; cursor:pointer;
  font:700 12.5px var(--f-sans); color:var(--n);
  transition:.22s var(--ease);
  backdrop-filter:blur(8px);
}
.dash-edit-btn:hover{ background:#fff; box-shadow:var(--sh-soft) }
.dash-edit-btn.on{ background:linear-gradient(150deg,var(--g),var(--gd)); color:#fff; border-color:transparent }
.dash-edit-btn .de-ico{ font-size:13px }

.t-widget{ position:relative; margin-bottom:14px }
.t-widget:last-child{ margin-bottom:0 }
#tDash .grid-main > .t-widget,
#tDash .grid-2 > .t-widget{ margin-bottom:0 }
body.t-cust-on .t-widget{
  cursor:grab;
  outline:2px dashed rgba(101,145,10,.45);
  outline-offset:6px;
  border-radius:var(--r-lg);
}
body.t-cust-on .t-widget:active{ cursor:grabbing }
body.t-cust-on .t-widget.dragging{ opacity:.45; transform:scale(.97) }
body.t-cust-on .t-widget.drag-over{ outline:3px solid var(--g); outline-offset:4px }
body.t-cust-on .t-widget.t-hidden{ opacity:.4; filter:saturate(.3) }
body.t-cust-on .t-widget.t-hidden::after{
  content:"Masqué"; position:absolute; inset:0;
  display:grid; place-items:center; pointer-events:none;
  font:800 16px var(--f-sans); color:var(--n);
  background:rgba(255,255,255,.4); border-radius:var(--r-lg);
}
.t-w-bar{
  display:none; position:absolute; top:8px; right:8px; z-index:5;
  gap:4px; background:rgba(255,255,255,.95);
  border:1px solid var(--line); border-radius:99px;
  padding:4px; box-shadow:var(--sh-soft);
}
body.t-cust-on .t-widget .t-w-bar{ display:inline-flex }
.t-w-bar button{
  border:0; cursor:pointer; background:transparent;
  width:28px; height:28px; border-radius:99px;
  font:800 12px var(--f-sans); color:var(--ink3);
  display:grid; place-items:center; transition:.18s;
}
.t-w-bar button:hover{ background:rgba(32,32,48,.06); color:var(--n) }
.t-w-bar button.danger:hover{ background:#FFE7E1; color:#A4391A }

/* widget tray */
.t-tray{
  display:none; margin:12px 0 18px; padding:14px;
  background:rgba(255,255,255,.7); border:1px dashed rgba(101,145,10,.4);
  border-radius:var(--r-md);
}
body.t-cust-on .t-tray{ display:block }
.t-tray-head{ font:800 11.5px var(--f-sans); color:var(--ink3); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px }
.t-tray-row{ display:flex; flex-wrap:wrap; gap:8px }
.t-tray-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--line);
  border-radius:99px; padding:7px 13px; cursor:pointer;
  font:700 12px var(--f-sans); color:var(--n);
  transition:.18s var(--ease);
}
.t-tray-chip:hover{ background:var(--gm); border-color:var(--gs) }
.t-tray-chip.on{ background:var(--gd); color:#fff; border-color:transparent }
.t-tray-chip .tc-x{ font-size:12px; opacity:.7 }



/* ───────── SIMPLE STUDENT DASHBOARD (mobile-first) ───────── */
.sd-wrap{ max-width:640px; margin:0 auto }
.sd-head{ padding:8px 8px 0 }
.sd-greet{ font-size:32px; font-weight:600; letter-spacing:-.03em; color:var(--n); line-height:1.12 }
.sd-greet em{ font-family:var(--f-serif); font-style:italic; font-weight:400 }
.sd-sub{ margin-top:6px; font:600 13px var(--f-sans); color:var(--ink3) }
.sd-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin:18px 0 14px; background:#fff;
  border:1px solid var(--line); border-radius:22px;
  box-shadow:var(--sh-soft); overflow:hidden;
}
.sd-stat{ padding:18px 8px 15px; text-align:center }
.sd-stat + .sd-stat{ border-left:1px solid var(--line-soft) }
.sd-stat-n{ font:400 30px/1 var(--f-serif); color:var(--n) }
.sd-stat-n small{ font-size:16px; color:var(--ink4) }
.sd-stat-l{ margin-top:7px; font:700 10.5px var(--f-sans); text-transform:uppercase; letter-spacing:.06em; color:var(--ink3) }
.sd-alert{
  margin:0 0 14px; padding:14px 16px; border-radius:16px;
  background:#FDEEEB; border:1.5px solid #F5B0A2; color:#B04545;
  font:700 13.5px/1.45 var(--f-sans); cursor:pointer;
}
.sd-cardx{
  background:#fff; border:1px solid var(--line); border-radius:22px;
  box-shadow:var(--sh-soft); overflow:hidden;
}
.sd-card-head{ padding:17px 18px 11px; font:800 15px var(--f-sans); color:var(--n) }
.sd-mat{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid var(--line-soft); min-height:62px }
.sd-mat-ref{
  width:44px; height:44px; flex-shrink:0; border-radius:14px;
  background:var(--n); color:#fff; display:grid; place-items:center;
  font:700 13px var(--f-mono);
}
.sd-mat-body{ min-width:0; flex:1 }
.sd-mat-nom{ font:700 14px var(--f-sans); color:var(--n); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sd-mat-sub{ margin-top:1px; font:600 12px var(--f-sans); color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sd-mat-moy{ font:700 15px var(--f-mono); color:var(--n); flex-shrink:0 }
.sd-mat-moy.muted{ color:var(--ink4) }
.sd-mat-moy.ok{ color:var(--gd) }
.sd-mat-moy.bad{ color:#B04545 }
.sd-empty{ padding:32px 18px; text-align:center; color:var(--ink4); font:600 13px/1.6 var(--f-sans) }
.sd-card-foot{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px; min-height:54px; border:0; border-top:1px solid var(--line-soft);
  background:transparent; cursor:pointer;
  font:800 14px var(--f-sans); color:var(--n); font-family:var(--f-sans);
}
.sd-card-foot:active{ background:rgba(32,32,48,.04) }
@media(max-width:480px){
  .sd-greet{ font-size:26px }
  .brand{ width:48px; height:48px }
  .brand-mark{ width:36px; height:36px }
  .frame{ padding:8px }
  .shell{ padding:10px 10px 16px; border-radius:18px }
  .sd-head{ padding:6px 4px 0 }
  .sd-stat-n{ font-size:26px }
  .sd-mat{ padding:12px 14px; gap:10px }
  .sd-mat-ref{ width:40px; height:40px }
  .sd-card-head{ padding:15px 14px 9px }
  .sd-card-foot{ padding:15px 14px }
  .sd-form{ padding:2px 14px 16px }
  .sd-doc-grid{ padding:2px 14px 14px }
}


/* ── COURS (PDF) ── */
.sd-ref-pdf{ background:#B04545 !important; font-size:11px !important; letter-spacing:.04em }
.sd-file-btn{
  flex-shrink:0; display:grid; place-items:center;
  min-width:44px; min-height:40px; padding:0 12px;
  border:1px solid var(--line); border-radius:12px;
  background:#fff; color:var(--n); cursor:pointer;
  font:700 12.5px var(--f-sans); text-decoration:none;
}
.sd-file-btn:active{ background:rgba(32,32,48,.05) }
.sd-file-btn.danger{ color:#B04545; border-color:#F5B0A2 }
.sd-form{ display:grid; gap:8px; padding:4px 18px 18px }
.sd-form label{ font:700 11px var(--f-sans); color:var(--ink3); text-transform:uppercase; letter-spacing:.05em; margin-top:6px }
.sd-form select, .sd-form input[type="text"]{
  width:100%; padding:12px 14px; min-height:46px;
  border:1.5px solid #E0DCD2; border-radius:12px; background:#fff;
  font:600 14px var(--f-sans); color:var(--n); outline:none;
}
.sd-form input[type="file"]{
  width:100%; padding:10px; border:1.5px dashed #E0DCD2; border-radius:12px;
  background:#fff; font:600 13px var(--f-sans); color:var(--ink3);
}
.sd-form button{
  margin-top:10px; width:100%; min-height:50px; border:0; border-radius:13px;
  background:var(--g); color:#fff; font:800 14.5px var(--f-sans); cursor:pointer;
}
.sd-form button:disabled{ opacity:.6; cursor:wait }


/* ── DEMANDE DE PAPIERS ── */
.sd-doc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:4px 18px 16px }
.sd-doc-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  min-height:68px; padding:12px 13px; text-align:left;
  background:var(--bg-b); border:1px solid var(--line); border-radius:15px;
  cursor:pointer; font-family:var(--f-sans);
  transition:transform .15s var(--ease);
}
.sd-doc-btn:active{ transform:scale(.97) }
.sd-doc-btn .ico{ font-size:19px; line-height:1 }
.sd-doc-btn .t{ font:700 12.5px/1.25 var(--f-sans); color:var(--n) }
.sd-req-status{ flex-shrink:0; font:700 10.5px var(--f-sans); padding:5px 10px; border-radius:99px }
.sd-req-status.wait{ background:#FCF0DC; color:#B36A1E }
.sd-req-status.ok{ background:var(--gm); color:var(--gd) }
.sd-req-status.no{ background:#FDE3DD; color:#B04545 }


/* ── EMPLOI DU TEMPS (étudiant) ── */
.scal-strip{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:18px 0 14px }
.scal-day{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 2px 7px; min-height:66px;
  border:1px solid var(--line); border-radius:16px; background:#fff;
  cursor:pointer; font-family:var(--f-sans);
  transition:all .2s var(--ease); -webkit-tap-highlight-color:transparent;
}
.scal-day .scal-l{ font:700 10px var(--f-sans); text-transform:uppercase; letter-spacing:.04em; color:var(--ink3) }
.scal-day .scal-n{ font:400 20px/1 var(--f-serif); color:var(--n) }
.scal-day .scal-dot{ width:5px; height:5px; border-radius:50%; background:var(--g) }
.scal-day .scal-dot.off{ background:transparent }
.scal-day.today{ border-color:var(--gs); box-shadow:0 0 0 2px var(--gm) }
.scal-day.on{ background:var(--n); border-color:var(--n) }
.scal-day.on .scal-l{ color:rgba(255,255,255,.6) }
.scal-day.on .scal-n{ color:#fff }
.scal-day.on .scal-dot{ background:var(--gs) }
.scal-slot{ display:flex; gap:12px; padding:14px 18px; border-top:1px solid var(--line-soft); align-items:center; min-height:60px }
.scal-time{ width:52px; flex-shrink:0; display:flex; flex-direction:column }
.scal-time span{ font:700 13px var(--f-mono); color:var(--n) }
.scal-time small{ font:600 11px var(--f-mono); color:var(--ink4); margin-top:1px }
.scal-bar{ width:4px; align-self:stretch; border-radius:99px; background:linear-gradient(180deg,var(--gs),var(--g)); flex-shrink:0 }
.scal-info{ min-width:0 }
.scal-subj{ font:700 14px var(--f-sans); color:var(--n) }
.scal-meta{ font:600 12px var(--f-sans); color:var(--ink3); margin-top:1px }
@media(max-width:480px){
  .scal-strip{ gap:4px }
  .scal-day{ min-height:62px; border-radius:14px }
  .scal-slot{ padding:13px 14px }
}

/* download button on Emploi tab */
.sd-dl-btn{
  width:100%; min-height:50px; margin-top:16px;
  border:1px solid var(--line); border-radius:15px;
  background:#fff; color:var(--n); cursor:pointer;
  font:800 13.5px var(--f-sans);
  box-shadow:var(--sh-soft);
}
.sd-dl-btn:active{ background:rgba(32,32,48,.04) }

/* teacher dashboard progress */
.sd-progress{ padding:4px 18px 16px }
.sd-progress-txt{ font:600 13px var(--f-sans); color:var(--ink3); margin-bottom:9px }
.sd-progress-txt strong{ font:400 22px var(--f-serif); color:var(--n); margin-right:2px }
.sd-progress-track{ height:9px; border-radius:99px; background:rgba(32,32,48,.07); overflow:hidden }
.sd-progress-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gs),var(--g)); transition:width .8s var(--ease) }

/* green primary card-foot button */
.sd-card-foot.primary{
  background:var(--g); color:#fff; border-top:0;
  margin:6px 14px 14px; width:calc(100% - 28px);
  border-radius:14px; min-height:52px;
  box-shadow:0 10px 22px -10px rgba(101,145,10,.55);
}
.sd-card-foot.primary:active{ background:var(--gd) }