/* Self-hosted Vazirmatn (Arabic/Persian subset, variable weight 400-800) — bundled in
   assets/fonts/ instead of loaded from Google Fonts, so the ZWNJ in "ایران‌دانشگاه" (and
   every other Persian ZWNJ join) always shapes correctly even when the site's host can't
   reach fonts.googleapis.com and would otherwise silently fall back to a font that
   renders ZWNJ as a visible gap. */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/vazirmatn.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* assets/panel.css — IranUni Panel design system
   Palette/tokens adapted from the "Nocturne" dark design system (deep navy ground,
   blurple accent, soft elevation) the user supplied as a reference theme, with a
   Persian/RTL font stack and a cyan+violet glow hero on the landing page. */

.ipanel-app {
  --ipanel-bg: #161826;
  --ipanel-surface: #232532;
  --ipanel-surface-2: #2b2e3d;
  --ipanel-fg: #e9e9ed;
  --ipanel-muted-fg: rgba(233, 233, 237, .58);
  --ipanel-border: rgba(233, 233, 237, .14);
  --ipanel-border-strong: rgba(233, 233, 237, .28);

  --ipanel-accent: #9184d9;      /* primary — blurple */
  --ipanel-accent-hover: #a7a1db;
  --ipanel-accent-dim: rgba(145, 132, 217, .14);
  --ipanel-accent-fg: #f5f4ff;

  --ipanel-success: #4ade80;
  --ipanel-success-dim: rgba(74, 222, 128, .14);
  --ipanel-success-fg: #b8f5cd;

  --ipanel-destructive: #fb7185;
  --ipanel-destructive-dim: rgba(251, 113, 133, .14);

  --ipanel-radius: 16px;
  --ipanel-radius-sm: 10px;
  --ipanel-shadow: 0 0 0 1px var(--ipanel-border), 0 10px 28px rgba(0, 0, 0, .45);

  font-family: 'Vazirmatn', 'Inter', Tahoma, sans-serif;
  color: var(--ipanel-fg);
  background: var(--ipanel-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.7;
}

.ipanel-app * { box-sizing: border-box; }
.ipanel-app a, .ipanel-app button, .ipanel-app select, .ipanel-app .ipanel-pill { cursor: pointer; }
.ipanel-app ::selection { background: var(--ipanel-accent); color: #fff; }
.ipanel-app input:focus-visible, .ipanel-app select:focus-visible { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  .ipanel-app { animation: ipanelFadeIn .35s ease both; }
}
@keyframes ipanelFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header — transparent on purpose: it sits directly on .ipanel-app's own background
   (or the landing page's full-bleed hero behind it) so the page reads as one continuous
   surface instead of a header "box" sitting on top of a different-colored page. */
.ipanel-header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: transparent;
  border-bottom: 1px solid var(--ipanel-border);
  flex-wrap: wrap;
}
.ipanel-app--landing .ipanel-header { border-bottom-color: rgba(53, 216, 255, .15); }
.ipanel-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ipanel-fg);
  font-weight: 700;
  font-size: 1.05rem;
}
.ipanel-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ipanel-accent-hover), var(--ipanel-accent));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 20px rgba(145, 132, 217, .45);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.ipanel-logo:hover .ipanel-logo-mark { transform: rotate(-8deg) scale(1.08); }
.ipanel-nav { display: flex; align-items: center; gap: 1rem; }
.ipanel-nav-user { color: var(--ipanel-muted-fg); font-size: .9rem; }
.ipanel-nav-logout {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--ipanel-destructive);
  text-decoration: none;
  font-weight: 600;
  font-size: .85rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(251, 113, 133, .3);
  background: rgba(251, 113, 133, .06);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.ipanel-nav-logout::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.ipanel-nav-logout:hover { background: var(--ipanel-destructive-dim); border-color: var(--ipanel-destructive); transform: translateY(-1px); }
.ipanel-nav-logout:active { transform: scale(.96); }

.ipanel-main {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* Landing — the "Nova Flux" scanner hero: near-black ground, a glowing 3D core (Three.js,
   see hero-3d.js) inside HUD targeting rings, cyan+violet glow blobs, a faint grid, and
   corner brackets. Full-bleed: .ipanel-landing-fx is position:fixed so the ground fills
   the ENTIRE viewport — behind the header too — not just a boxed section within .ipanel-main.
   All decorative layers respect prefers-reduced-motion. */
.ipanel-app--landing, .ipanel-app--auth { background: #020305; }
.ipanel-app--auth .ipanel-header { border-bottom-color: rgba(53, 216, 255, .15); }
.ipanel-landing {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -2.5rem -1.5rem -4rem;
  padding: 1rem;
}
.ipanel-landing-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ipanel-landing-grid {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, rgba(53,216,255,.05) 0px, rgba(53,216,255,.05) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient(90deg, rgba(53,216,255,.05) 0px, rgba(53,216,255,.05) 1px, transparent 1px, transparent 56px);
}
.ipanel-landing-glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.ipanel-landing-glow--cyan { top: -12%; left: -10%; width: 55%; height: 55%; background: radial-gradient(circle, rgba(53,216,255,.24), transparent 70%); }
.ipanel-landing-glow--violet { bottom: -16%; right: -10%; width: 60%; height: 60%; background: radial-gradient(circle, rgba(124,92,255,.2), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .ipanel-landing-glow--cyan { animation: ipanelDrift1 26s ease-in-out infinite; }
  .ipanel-landing-glow--violet { animation: ipanelDrift2 32s ease-in-out infinite; }
}
@keyframes ipanelDrift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-28px)} }
@keyframes ipanelDrift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-45px,32px)} }

.ipanel-landing-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.ipanel-ring { position: absolute; border-radius: 50%; }
.ipanel-ring--outer { inset: 8%; border: 1px solid rgba(53,216,255,.32); }
.ipanel-ring--dashed { inset: 14%; border: 1px dashed rgba(53,216,255,.28); }
.ipanel-ring--sweep {
  inset: 8%; overflow: hidden; mix-blend-mode: screen;
  background: conic-gradient(from 0deg, rgba(53,216,255,.5), transparent 22%, transparent 100%);
}
.ipanel-ring--inner { inset: 6%; border: 1px solid rgba(124,92,255,.24); }
@media (prefers-reduced-motion: no-preference) {
  .ipanel-ring--dashed { animation: ipanelSpin 60s linear infinite; }
  .ipanel-ring--sweep { animation: ipanelSpin 7s linear infinite; }
  .ipanel-ring--inner { animation: ipanelSpinRev 90s linear infinite; }
}
@keyframes ipanelSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes ipanelSpinRev { from{transform:rotate(360deg)} to{transform:rotate(0)} }

.ipanel-corner { position: absolute; width: 28px; height: 28px; z-index: 2; }
.ipanel-corner--tl { top: 20px; left: 20px; border-top: 1px solid rgba(53,216,255,.5); border-left: 1px solid rgba(53,216,255,.5); }
.ipanel-corner--tr { top: 20px; right: 20px; border-top: 1px solid rgba(53,216,255,.5); border-right: 1px solid rgba(53,216,255,.5); }
.ipanel-corner--bl { bottom: 20px; left: 20px; border-bottom: 1px solid rgba(53,216,255,.5); border-left: 1px solid rgba(53,216,255,.5); }
.ipanel-corner--br { bottom: 20px; right: 20px; border-bottom: 1px solid rgba(53,216,255,.5); border-right: 1px solid rgba(53,216,255,.5); }

.ipanel-hero-canvas { position: absolute; inset: 0; z-index: 1; }

.ipanel-landing-hero { position: relative; z-index: 3; text-align: center; max-width: 480px; width: 100%; margin: 0 auto; padding: 1rem; }
.ipanel-landing-card { padding: 2.5rem 2rem; }
.ipanel-landing-title {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 .75rem;
  text-shadow: 0 0 30px rgba(53, 216, 255, .25);
}
.ipanel-landing-sub { color: rgba(233,233,237,.7); font-size: 1.05rem; margin: 0 0 2rem; }

/* Cards — macOS-style frosted panels: translucent + backdrop blur, a hairline border,
   a thin top highlight (the classic macOS window sheen), and a soft multi-layer shadow. */
.ipanel-card {
  position: relative;
  /* Solid fallback first — browsers/contexts without backdrop-filter support still get a
     clearly visible panel, not something that blends into the page. */
  background: rgb(42, 44, 60);
  background: rgba(42, 44, 60, .88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    0 2px 8px rgba(0, 0, 0, .35),
    0 24px 50px rgba(0, 0, 0, .55);
  padding: 1.75rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ipanel-card::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  border-radius: 1px;
}
.ipanel-class-card:hover,
.ipanel-class-block:hover {
  transform: translateY(-3px);
  border-color: var(--ipanel-accent);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    0 0 0 1px var(--ipanel-accent),
    0 24px 48px rgba(0, 0, 0, .5);
}
.ipanel-card-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 .35rem; color: #fff; }
.ipanel-card-sub { color: var(--ipanel-muted-fg); font-size: .92rem; margin: 0 0 1.5rem; }

/* Auth pages */
.ipanel-auth-page { position: relative; z-index: 3; display: flex; justify-content: center; flex: 1; align-items: center; padding: 2rem 0; }
.ipanel-auth-card { width: 100%; max-width: 400px; }

.ipanel-steps { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; font-size: .82rem; }
.ipanel-step { color: var(--ipanel-muted-fg); }
.ipanel-step.is-active { color: var(--ipanel-accent-hover); font-weight: 700; }
.ipanel-step.is-done { color: var(--ipanel-success); }
.ipanel-step-sep { flex: 1; height: 1px; background: var(--ipanel-border); }

/* Forms */
.ipanel-form { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.25rem; }
.ipanel-field { display: flex; flex-direction: column; gap: .4rem; }
.ipanel-field-label { font-size: .85rem; font-weight: 600; color: var(--ipanel-fg); }
/* Same macOS-glass treatment as .ipanel-card: translucent + blur, hairline border,
   thin top highlight — inputs read as inset panels inside the card, not flat boxes. */
.ipanel-input {
  position: relative;
  font-family: inherit;
  font-size: 1rem;
  padding: .75rem .9rem;
  border-radius: var(--ipanel-radius-sm);
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(15, 16, 24, .55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .02);
  color: var(--ipanel-fg);
  caret-color: var(--ipanel-accent);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ipanel-input::placeholder { color: rgba(233,233,237,.35); }
.ipanel-input:hover { border-color: var(--ipanel-border-strong); }
.ipanel-input:focus {
  outline: none;
  border-color: var(--ipanel-accent);
  background: rgba(15, 16, 24, .7);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 3px var(--ipanel-accent-dim);
}

.ipanel-link { color: var(--ipanel-accent-hover); text-decoration: none; font-size: .9rem; font-weight: 600; }
.ipanel-link:hover { text-decoration: underline; }

.ipanel-alert { padding: .75rem 1rem; border-radius: var(--ipanel-radius-sm); font-size: .88rem; margin-bottom: 1.1rem; }
.ipanel-alert--error { background: var(--ipanel-destructive-dim); color: var(--ipanel-destructive); }

/* Buttons — outlined "Nocturne" style: transparent fill, accent border/text, tinted
   hover. The join-class CTA stays a solid fill since it's the one action students scan
   for — a filled high-contrast button here is a deliberate exception, not drift. */
.ipanel-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1.5px solid transparent;
  border-radius: var(--ipanel-radius-sm);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  padding: .8rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  color: var(--ipanel-fg);
  overflow: hidden;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, opacity .15s ease;
  min-height: 44px;
}
.ipanel-btn--block { width: 100%; }
.ipanel-btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }

.ipanel-btn--primary { color: var(--ipanel-accent-hover); border-color: var(--ipanel-accent); }
.ipanel-btn--primary:hover { background: var(--ipanel-accent-dim); box-shadow: 0 0 24px rgba(145, 132, 217, .3); }
.ipanel-btn--primary:active { background: rgba(145, 132, 217, .22); }

.ipanel-btn--accent {
  background: linear-gradient(135deg, #5eead4, var(--ipanel-success));
  border-color: transparent;
  color: #05261a;
}
.ipanel-btn--accent:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(74, 222, 128, .35); }

.ipanel-btn--ghost { color: var(--ipanel-fg); border-color: var(--ipanel-border); }
.ipanel-btn--ghost:hover { background: rgba(233,233,237,.06); border-color: var(--ipanel-border-strong); }

.ipanel-btn:active { transform: scale(.96) !important; }
.ipanel-btn:focus-visible { outline: 2px solid var(--ipanel-accent-hover); outline-offset: 2px; }
.ipanel-btn[disabled] {
  pointer-events: none;
  background: transparent;
  border-color: var(--ipanel-border);
  color: var(--ipanel-muted-fg);
  box-shadow: none;
  opacity: .5;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .ipanel-btn, .ipanel-card, .ipanel-class-card, .ipanel-class-block, .ipanel-pill {
    transition: none !important;
  }
}

/* Dashboard pages */
.ipanel-page-head { margin-bottom: 1.75rem; }
.ipanel-page-title { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 .3rem; }
.ipanel-page-sub { color: var(--ipanel-muted-fg); font-size: .92rem; margin: 0; }

.ipanel-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ipanel-muted-fg);
  background: rgba(35, 37, 50, .5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px dashed var(--ipanel-border-strong);
  border-radius: 14px;
}

.ipanel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.ipanel-class-card { display: flex; flex-direction: column; gap: .9rem; }
.ipanel-class-title { font-size: 1.1rem; font-weight: 700; margin: 0; color: #fff; }
.ipanel-class-title small { font-weight: 400; font-size: .8rem; color: var(--ipanel-muted-fg); }
.ipanel-class-time { margin: -.5rem 0 0; font-size: .85rem; color: var(--ipanel-muted-fg); }

.ipanel-student-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.ipanel-student-list li { font-size: .88rem; color: var(--ipanel-muted-fg); }
.ipanel-student-list:empty { display: none; }

.ipanel-badge {
  display: inline-block;
  font-size: .82rem;
  color: var(--ipanel-muted-fg);
  background: var(--ipanel-surface-2);
  border: 1px solid var(--ipanel-border);
  border-radius: 999px;
  padding: .3rem .8rem;
  width: fit-content;
}
.ipanel-badge--accent { background: var(--ipanel-success-dim); border-color: rgba(74,222,128,.35); color: var(--ipanel-success-fg); font-weight: 600; }
.ipanel-badge--makeup { background: var(--ipanel-success-dim); border-color: rgba(74,222,128,.35); color: var(--ipanel-success-fg); font-weight: 600; font-size: .72rem; padding: .2rem .6rem; margin-inline-start: .5rem; vertical-align: middle; }
.ipanel-session-status:empty { display: none; }
.ipanel-countdown:empty { display: none; }
.ipanel-countdown:not(:empty) { animation: ipanelPulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ipanel-countdown { animation: none !important; } }
@keyframes ipanelPulse {
  0%, 100% { opacity: .75; }
  50% { opacity: 1; }
}

/* Teacher class blocks */
.ipanel-class-block { margin-bottom: 1.5rem; }
.ipanel-class-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.ipanel-table-wrap { overflow-x: auto; }
.ipanel-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ipanel-table th {
  text-align: right;
  color: var(--ipanel-muted-fg);
  font-weight: 600;
  font-size: .8rem;
  padding: .6rem .75rem;
  border-bottom: 1.5px solid var(--ipanel-border-strong);
}
.ipanel-table td { padding: .8rem .75rem; border-bottom: 1px solid var(--ipanel-border); vertical-align: middle; color: var(--ipanel-fg); }
.ipanel-table tr:last-child td { border-bottom: none; }
.ipanel-table tr:hover td { background: rgba(233,233,237,.04); }
.ipanel-table-name { font-weight: 600; }
.ipanel-table-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.ipanel-pill {
  border: 1.5px solid var(--ipanel-border);
  background: transparent;
  color: var(--ipanel-fg);
  border-radius: 999px;
  padding: .45rem 1rem;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.ipanel-pill:hover { transform: translateY(-1px); }
.ipanel-pill:active { transform: scale(.95); }
.ipanel-pill:focus-visible { outline: 2px solid var(--ipanel-accent-hover); outline-offset: 2px; }
.ipanel-pill--present:hover, .ipanel-pill--present.is-selected {
  background: var(--ipanel-success-dim); border-color: var(--ipanel-success); color: var(--ipanel-success-fg);
}
.ipanel-pill--absent:hover, .ipanel-pill--absent.is-selected {
  background: var(--ipanel-destructive-dim); border-color: var(--ipanel-destructive); color: var(--ipanel-destructive);
}

@media (max-width: 640px) {
  .ipanel-main { padding: 1.5rem 1rem 3rem; }
  .ipanel-header { padding: .9rem 1rem; }
  .ipanel-grid { grid-template-columns: 1fr; }
}