/* KACS Premium Design System — ported from Next.js globals.css */
:root {
  --background: #f7f4ef;
  --foreground: #1e2a4a;
  --navy: #1e2a4a;
  --navy-muted: #3d4f6f;
  --beige: #f5f0e6;
  --beige-soft: #faf8f3;
  --pastel-blue: #b8d4e8;
  --pastel-blue-dark: #6ba3cc;
  --pastel-peach: #ffd4bc;
  --pastel-peach-dark: #f0a882;
  --soft-pink: #f5c6d0;
  --soft-pink-dark: #e8a0b0;
  --lavender: #ddd6fe;
  --lavender-dark: #a78bfa;
  --gold: #d4af37;
  --gold-soft: #f5e6a8;
  --light-gray: #eef1f6;
  --muted: #6b7a94;
  --card: rgba(255,255,255,0.82);
  --card-border: rgba(212,196,168,0.35);
  --shadow-soft: 0 8px 32px rgba(30,42,74,0.08);
  --shadow-card: 0 4px 24px rgba(30,42,74,0.06);
  --shadow-glow-blue: 0 0 40px rgba(107,163,204,0.15);
  --shadow-glow-pink: 0 0 40px rgba(232,160,176,0.12);
  --shadow-glow-gold: 0 0 30px rgba(212,175,55,0.18);
  --radius-xl: 1.5rem;
  --radius-2xl: 1.75rem;
  --radius-3xl: 2rem;
  --gradient-page: linear-gradient(135deg,#faf8f3 0%,#f7f4ef 35%,#eef6fc 70%,#f5f0e6 100%);
  --gradient-gold: linear-gradient(90deg,#d4af37,#f5e6a8,#d4af37);
  --sidebar-width: 260px;
  --danger: #dc2626;
  --success: #059669;
  --warning: #d97706;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Noto Sans Arabic', system-ui, sans-serif;
  background: var(--gradient-page);.
  
  background-attachment: fixed;
  color: var(--foreground);
  min-height: 100vh;
}
body.rtl { font-family: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; }

/* Ambient */
.ambient-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ambient-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; }
.ambient-blob-1 { width: 420px; height: 420px; background: var(--pastel-blue); top: -120px; inset-inline-start: -80px; }
.ambient-blob-2 { width: 360px; height: 360px; background: var(--soft-pink); bottom: -100px; inset-inline-end: -60px; }
.ambient-blob-3 { width: 280px; height: 280px; background: var(--gold-soft); top: 40%; inset-inline-start: 45%; opacity: .25; }

/* Shell */
.app-shell { display: flex; min-height: 100vh; position: relative; z-index: 1; }
.main-content { flex: 1; margin-inline-start: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }

/* Sidebar Premium */
.sidebar-premium {
  width: var(--sidebar-width);
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 100;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg,rgba(255,255,255,.94) 0%,rgba(236,245,252,.9) 45%,rgba(255,244,248,.88) 100%);
  backdrop-filter: blur(24px);
  border-inline-end: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 40px rgba(107,163,204,.12), inset 1px 0 0 rgba(255,255,255,.8);
}
.sidebar-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 20% 10%,rgba(212,175,55,.08),transparent 40%),
              radial-gradient(circle at 80% 90%,rgba(107,163,204,.1),transparent 45%);
}
.sidebar-brand-link {
  position: relative; display: flex; align-items: center; gap: .5rem;
  height: 4.75rem; padding: 0 1rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid rgba(255,255,255,.3); transition: background .2s;
}
.sidebar-brand-link:hover { background: rgba(255,255,255,.25); }
.sidebar-brand-link .gold-accent-line { position: absolute; inset-inline: 1rem; bottom: 0; opacity: .7; }

.sidebar-role-card {
  margin: 1rem .75rem 0; padding: .65rem .85rem; border-radius: var(--radius-xl);
  border: 1px solid rgba(212,196,168,.3);
  background: linear-gradient(135deg,rgba(250,248,243,.9),rgba(255,255,255,.8));
}
.sidebar-role-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.sidebar-role-title { margin-top: .15rem; font-size: .75rem; font-weight: 600; color: var(--navy); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 1rem .75rem; }
.nav-section-label { margin-bottom: .5rem; padding: 0 .75rem; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.nav-link-premium {
  position: relative; display: flex; align-items: center; gap: .75rem;
  padding: .65rem .75rem; margin-bottom: .15rem; border-radius: var(--radius-xl);
  text-decoration: none; font-size: .875rem; font-weight: 500; color: var(--navy-muted);
  transition: all .2s;
}
.nav-link-premium:hover { background: rgba(255,255,255,.55); color: var(--navy); box-shadow: var(--shadow-card); }
.nav-link-premium.active {
  background: linear-gradient(90deg, #89c4e8, #b8dff5);
  color: #111;
  font-weight: 700;
  border: 1px solid #5eb3e0;
  box-shadow: 0 4px 14px rgba(126, 200, 232, .22);
}
.nav-link-premium.active::before {
  content: ''; position: absolute; inset-block: .25rem; width: 4px; border-radius: 999px;
  background: linear-gradient(180deg,var(--gold),var(--pastel-blue-dark),var(--soft-pink-dark));
  inset-inline-start: 0;
}
.nav-icon-box {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .85rem; flex-shrink: 0;
  background: rgba(255,255,255,.4); font-size: 1rem; transition: all .2s;
}
.nav-link-premium.active .nav-icon-box {
  background: #fff; color: #0369a1; box-shadow: 0 2px 8px rgba(126, 200, 232, .2);
}
.nav-link-premium:hover .nav-icon-box { background: rgba(255,255,255,.7); }

.sidebar-footer { border-top: 1px solid rgba(255,255,255,.35); padding: .75rem; }
.lang-switch { display: flex; gap: .35rem; margin-bottom: .65rem; }
.lang-switch a {
  flex: 1; text-align: center; font-size: .7rem; font-weight: 600; padding: .35rem;
  border-radius: .65rem; text-decoration: none; color: var(--muted); border: 1px solid transparent;
}
.lang-switch a.active { color: var(--navy); border-color: rgba(212,175,55,.4); background: rgba(245,230,168,.5); }
.sidebar-user { font-size: .8rem; font-weight: 600; color: var(--navy); margin-bottom: .25rem; }
.logout-link { font-size: .75rem; color: var(--pastel-blue-dark); text-decoration: none; }
.logout-link:hover { text-decoration: underline; }

/* Header Premium */
.header-premium {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.5); backdrop-filter: blur(24px);
}
.header-premium .gold-accent-line { margin: 0 1.5rem; opacity: .5; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 4.5rem; padding: 0 1.5rem; gap: 1rem;
}
.text-display { font-size: clamp(1.75rem,3vw,2.25rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--navy); }
.text-heading { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; color: var(--navy); }
.header-subtitle { display: flex; align-items: center; gap: .4rem; margin-top: .15rem; font-size: .875rem; color: var(--muted); }
.breadcrumbs-premium { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; font-size: .75rem; color: var(--muted); }
.breadcrumbs-premium a { color: var(--pastel-blue-dark); text-decoration: none; }
.breadcrumbs-premium a:hover { text-decoration: underline; }
.breadcrumbs-premium .sep { color: rgba(184,212,232,.6); }
.breadcrumbs-premium .current { font-weight: 600; color: var(--navy); }

.header-actions { display: flex; align-items: center; gap: .5rem; }
.user-chip {
  display: none; align-items: center; gap: .75rem;
  padding: .5rem .85rem; border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.5);
  box-shadow: var(--shadow-card); backdrop-filter: blur(8px);
}
.user-chip-name { font-size: .875rem; font-weight: 600; color: var(--navy); }
.user-chip-role { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Glass & Cards */
.glass-card-premium {
  background: var(--card); backdrop-filter: blur(24px);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.6);
  border-radius: var(--radius-2xl); position: relative; overflow: hidden;
}
.glass-card-premium::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 50%,rgba(212,175,55,.04) 100%);
}
.glow-blue { box-shadow: var(--shadow-card), var(--shadow-glow-blue); }
.glow-pink { box-shadow: var(--shadow-card), var(--shadow-glow-pink); }
.glow-gold { box-shadow: var(--shadow-card), var(--shadow-glow-gold); }
.gold-accent-line { height: 3px; background: var(--gradient-gold); border-radius: 999px; }

.premium-panel { margin-bottom: 1.25rem; }
.premium-panel-header { position: relative; padding: 1.25rem 1.5rem .5rem; }
.premium-panel-body { position: relative; padding: .5rem 1.5rem 1.5rem; }

/* Stat Cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.premium-stat-link { text-decoration: none; color: inherit; display: block; }
.premium-stat-link.is-active .premium-stat {
  box-shadow: var(--shadow-glow-blue);
  border: 2px solid var(--pastel-blue-dark);
}
.premium-stat {
  position: relative; overflow: hidden; padding: 1.25rem;
  border-radius: var(--radius-2xl); border: 1px solid var(--card-border);
  background: var(--card); backdrop-filter: blur(24px);
  box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s;
}
.premium-stat-link:hover .premium-stat { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.premium-stat-gradient { position: absolute; inset: 0; opacity: .7; }
.premium-stat-blue .premium-stat-gradient { background: linear-gradient(135deg,rgba(184,212,232,.4),rgba(255,255,255,.2),rgba(184,212,232,.05)); }
.premium-stat-peach .premium-stat-gradient { background: linear-gradient(135deg,rgba(255,212,188,.4),rgba(255,255,255,.2),rgba(255,212,188,.05)); }
.premium-stat-pink .premium-stat-gradient { background: linear-gradient(135deg,rgba(245,198,208,.4),rgba(255,255,255,.2),rgba(245,198,208,.05)); }
.premium-stat-gold .premium-stat-gradient { background: linear-gradient(135deg,rgba(245,230,168,.5),rgba(255,255,255,.2),rgba(245,230,168,.1)); }
.premium-stat-gray .premium-stat-gradient { background: linear-gradient(135deg,rgba(238,241,246,.6),rgba(255,255,255,.2)); }
.premium-stat-body { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.premium-stat-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--navy-muted); }
.premium-stat-value { margin-top: .5rem; font-size: 1.875rem; font-weight: 700; color: var(--navy); }
.premium-stat-icon {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: var(--radius-xl); border: 1px solid;
}
.premium-stat-blue .premium-stat-icon { background: rgba(107,163,204,.15); color: var(--pastel-blue-dark); border-color: rgba(184,212,232,.2); }
.premium-stat-peach .premium-stat-icon { background: rgba(240,168,130,.15); color: var(--pastel-peach-dark); border-color: rgba(255,212,188,.2); }
.premium-stat-pink .premium-stat-icon { background: rgba(232,160,176,.15); color: var(--soft-pink-dark); border-color: rgba(245,198,208,.2); }
.premium-stat-gold .premium-stat-icon { background: rgba(212,175,55,.15); color: #b45309; border-color: rgba(212,175,55,.2); }
.premium-stat-gray .premium-stat-icon { background: rgba(238,241,246,.5); color: var(--navy-muted); }
.premium-stat-lavender .premium-stat-gradient { background: linear-gradient(135deg,rgba(200,180,230,.4),rgba(255,255,255,.2),rgba(200,180,230,.05)); }
.premium-stat-lavender .premium-stat-icon { background: rgba(180,160,220,.15); color: #6b5b95; border-color: rgba(200,180,230,.2); }
.premium-stat-rose .premium-stat-gradient { background: linear-gradient(135deg,rgba(251,207,232,.45),rgba(255,255,255,.2),rgba(251,207,232,.1)); }
.premium-stat-rose .premium-stat-icon { background: rgba(244,114,182,.12); color: #be185d; border-color: rgba(251,207,232,.3); }

/* Dashboard enhancements */
.dashboard-filters { padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.dashboard-filters-form { display: grid; grid-template-columns: 1fr repeat(3, minmax(120px, 160px)) auto auto; gap: .75rem; align-items: end; }
.dashboard-stats { margin-bottom: 1.5rem; }
.schedule-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.schedule-card-head h4 { display: flex; align-items: center; gap: .4rem; font-size: .9rem; margin: 0; color: var(--navy); }
.schedule-empty { font-size: .8rem; color: var(--text-muted); margin: 0; }
.schedule-item { display: flex; flex-direction: column; gap: .15rem; padding: .55rem 0; border-bottom: 1px solid rgba(0,0,0,.04); text-decoration: none; color: inherit; transition: background .15s; }
.schedule-item:hover { background: rgba(168,208,240,.08); margin: 0 -.5rem; padding-inline: .5rem; border-radius: .5rem; }
.schedule-item-static { text-decoration: none; cursor: default; }
.schedule-item-static:hover { background: transparent; margin: 0; padding-inline: 0; }
.schedule-item-time { font-size: .7rem; color: var(--text-muted); }
.schedule-item-title { font-size: .85rem; color: var(--navy); font-weight: 500; }
.schedule-card-warn { border-color: rgba(251,191,36,.35); }
.dashboard-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.dashboard-panel-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.notif-item { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.notif-item.unread { background: rgba(168,208,240,.12); border-radius: var(--radius-lg); padding: .65rem; margin-bottom: .35rem; }
.notif-item.read { opacity: .75; }
.notif-date { font-size: .7rem; color: var(--text-muted); display: block; margin-top: .25rem; }
.notif-item-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.dashboard-task-form-wrap { margin-bottom: 1rem; }
.dashboard-task-form { display: flex; flex-direction: column; gap: .65rem; }
.dashboard-task-form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.dashboard-task-form-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.dashboard-task-list { display: flex; flex-direction: column; gap: .65rem; }
.dashboard-task-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .85rem; border-radius: var(--radius-lg); border: 1px solid var(--card-border); background: rgba(255,255,255,.5); }
.dashboard-task-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dashboard-task-desc { font-size: .8rem; color: var(--text-muted); margin: .35rem 0 0; }
.dashboard-task-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; font-size: .75rem; color: var(--text-muted); }
.dashboard-task-actions { display: flex; gap: .35rem; flex-shrink: 0; }
.dashboard-submissions { margin-top: 1.25rem; padding: 1rem 1.25rem; }

@media (max-width: 900px) {
  .dashboard-filters-form { grid-template-columns: 1fr 1fr; }
  .dashboard-filters-form .admin-search-bar { grid-column: 1 / -1; }
  .dashboard-filters-form button, .dashboard-filters-form a.ui-btn { grid-column: span 1; }
  .stats-grid.dashboard-stats { grid-template-columns: repeat(2, 1fr); }
  .schedule-grid { grid-template-columns: 1fr; }
  .grid-2.dashboard-panels { grid-template-columns: 1fr; }
  .dashboard-task-form-row { grid-template-columns: 1fr; }
  .dashboard-hero-inner { flex-direction: column; align-items: stretch; }
  .hero-actions { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .stats-grid.dashboard-stats { grid-template-columns: 1fr; }
  .dashboard-task-row { flex-direction: column; }
  .dashboard-task-actions { width: 100%; justify-content: flex-end; }
}

/* Dashboard Hero */
.dashboard-hero-premium {
  position: relative; overflow: hidden; margin-bottom: 1.5rem;
  border-radius: var(--radius-3xl); border: 1px solid rgba(255,255,255,.6);
  background: linear-gradient(135deg,rgba(184,212,232,.25),rgba(255,255,255,.8),rgba(245,198,208,.2));
  padding: 1.5rem 2rem; box-shadow: var(--shadow-soft); backdrop-filter: blur(20px);
}
.hero-blob { position: absolute; border-radius: 50%; filter: blur(48px); }
.hero-blob-blue { width: 12rem; height: 12rem; top: -4rem; inset-inline-start: -4rem; background: rgba(184,212,232,.3); }
.hero-blob-pink { width: 10rem; height: 10rem; bottom: -3rem; inset-inline-end: -3rem; background: rgba(245,198,208,.25); }
.dashboard-hero-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.hero-subtitle { margin-top: .5rem; font-size: .875rem; color: var(--navy-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Buttons */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: none; cursor: pointer; text-decoration: none; font-weight: 600;
  border-radius: var(--radius-xl); transition: all .25s; white-space: nowrap;
}
.ui-btn-default { height: 2.75rem; padding: 0 1.25rem; font-size: .875rem; background: linear-gradient(135deg,var(--pastel-blue-dark),#5a96bd); color: #fff; box-shadow: var(--shadow-card); }
.ui-btn-default:hover { box-shadow: var(--shadow-glow-blue); transform: scale(1.02); }
.ui-btn-luxury { height: 2.75rem; padding: 0 1.25rem; font-size: .875rem; background: var(--navy); color: #fff; box-shadow: 0 4px 20px rgba(30,42,74,.2); }
.ui-btn-luxury:hover { box-shadow: var(--shadow-glow-blue); transform: scale(1.02); }
.ui-btn-secondary { height: 2.75rem; padding: 0 1.25rem; font-size: .875rem; background: rgba(255,255,255,.8); color: var(--navy); border: 1px solid rgba(255,255,255,.6); }
.ui-btn-secondary:hover { background: #fff; box-shadow: var(--shadow-soft); }
.ui-btn-sm { height: 2.25rem; padding: 0 1rem; font-size: .75rem; border-radius: .85rem; }
.ui-btn-ghost { width: 2.75rem; height: 2.75rem; padding: 0; background: transparent; color: var(--navy); }
.ui-btn-ghost:hover { background: rgba(255,255,255,.6); }
.ui-btn-danger { background: linear-gradient(135deg,#ef4444,#dc2626); color: #fff; height: 2.25rem; padding: 0 1rem; font-size: .75rem; }

/* Badges */
.ui-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .75rem; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .03em; border: 1px solid;
}
.ui-badge-default { background: rgba(184,212,232,.25); color: var(--pastel-blue-dark); border-color: rgba(184,212,232,.35); }
.ui-badge-success { background: rgba(236,253,245,.9); color: #047857; border-color: rgba(167,243,208,.8); }
.ui-badge-warning { background: rgba(255,251,235,.9); color: #b45309; border-color: rgba(253,230,138,.8); }
.ui-badge-danger { background: rgba(255,241,242,.9); color: #be123c; border-color: rgba(254,205,211,.8); }
.ui-badge-info { background: rgba(240,249,255,.9); color: #0369a1; border-color: rgba(186,230,253,.8); }
.ui-badge-neutral { background: rgba(255,255,255,.7); color: var(--navy-muted); border-color: rgba(226,232,240,.6); }
.ui-badge-gold { background: rgba(245,230,168,.4); color: #92400e; border-color: rgba(212,175,55,.3); }

/* School Logo & Brand Bar */
.school-logo { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.school-logo-img {
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
  border: 2px solid rgba(212,196,168,.45);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.school-logo-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 2px; }
.school-logo-name { font-weight: 700; color: var(--navy); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.school-logo-dept { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-brand-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 1rem; margin-bottom: 1rem; border-radius: .85rem;
  border: 1px solid rgba(212,196,168,.3);
  background: linear-gradient(to left,rgba(250,248,243,1),rgba(255,255,255,1));
}
.form-brand-sys { font-size: .75rem; color: var(--muted); }

/* Page Content */
.page-body { flex: 1; }
.page-content { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.page-content-module { gap: 1.25rem; }

/* Filters & Search */
.filter-panel {
  display: grid; gap: .75rem; padding: 1rem; margin-bottom: 1rem;
  border-radius: var(--radius-xl); border: 1px solid var(--card-border);
  background: rgba(250,248,243,.5);
}
.filter-panel-cols-3 { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.filter-panel-cols-5 { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
.form-select, .form-input, .form-textarea {
  width: 100%; padding: .65rem .9rem; border-radius: .85rem;
  border: 1px solid rgba(212,196,168,.5); background: rgba(255,255,255,.7);
  font-size: .875rem; color: var(--navy);
}
.form-label { display: block; font-size: .75rem; font-weight: 600; margin-bottom: .35rem; color: var(--navy-muted); }

.admin-search-bar { position: relative; margin-bottom: 1rem; }
.admin-search-bar i, .admin-search-bar svg {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 1.1rem; height: 1.1rem; color: var(--muted);
  inset-inline-start: 1rem;
}
.admin-search-input {
  width: 100%; padding: .75rem 1rem .75rem 2.75rem;
  border-radius: var(--radius-xl); border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.6); font-size: .875rem; color: var(--navy);
}
[dir="rtl"] .admin-search-input { padding: .75rem 2.75rem .75rem 1rem; }

/* Premium Table */
.premium-table-wrap {
  overflow-x: auto; border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.3); backdrop-filter: blur(8px);
}
.premium-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.premium-table thead tr { background: linear-gradient(90deg,rgba(184,212,232,.35),rgba(245,198,208,.2)); }
.premium-table th {
  padding: .875rem 1rem; text-align: start; font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--navy-muted);
  border-bottom: 1px solid rgba(184,212,232,.3);
}
.premium-table td { padding: .875rem 1rem; font-size: .875rem; border-bottom: 1px solid rgba(238,241,246,.8); transition: background .2s; }
.premium-table tbody tr:hover td { background: rgba(184,212,232,.08); }
.premium-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.35); }

/* Notification & Task items */
.notif-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.notif-item {
  padding: .85rem 1rem; border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.4);
  backdrop-filter: blur(8px); transition: box-shadow .2s;
}
.notif-item:hover { box-shadow: var(--shadow-soft); }
.notif-item strong { font-size: .875rem; color: var(--navy); }
.notif-item p { margin-top: .15rem; font-size: .75rem; color: var(--muted); }
.task-item { padding: .65rem .85rem; border-radius: .85rem; background: rgba(238,241,246,.4); font-size: .875rem; margin-bottom: .35rem; }

/* Schedule grid */
.schedule-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.schedule-card { padding: 1.25rem; }
.schedule-card h4 { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin-bottom: .75rem; color: var(--navy); }

/* Forms Hub */
.forms-hero {
  overflow: hidden; border-radius: var(--radius-3xl);
  border: 1px solid rgba(212,196,168,.4);
  background: linear-gradient(135deg,#fff,rgba(250,248,243,1),#eef4fa);
  padding: 1.5rem 2rem; box-shadow: var(--shadow-card);
}
.forms-hero-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pastel-blue-dark); }
.forms-hero h2 { margin-top: .5rem; font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.forms-hero p { margin-top: .5rem; max-width: 42rem; font-size: .875rem; color: var(--muted); }
.category-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.category-tab {
  padding: .65rem 1rem; border-radius: var(--radius-xl); font-size: .875rem; font-weight: 600;
  text-decoration: none; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.9);
  color: var(--navy-muted); transition: all .2s;
}
.category-tab:hover { border-color: rgba(107,163,204,.4); box-shadow: var(--shadow-card); }
.category-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: var(--shadow-card); }
.form-list-panel { padding: 1.25rem; border-radius: var(--radius-3xl); border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.9); box-shadow: var(--shadow-card); }
.form-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem; border-radius: var(--radius-xl); border: 1px solid var(--light-gray);
  background: rgba(250,248,243,.5); margin-bottom: .75rem;
}
.form-row-icon { width: 2.5rem; height: 2.5rem; border-radius: .85rem; background: #eef6fc; color: var(--pastel-blue-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.form-row-body { flex: 1; min-width: 0; }
.form-row-title { font-weight: 600; color: var(--navy); }
.form-row-meta { font-size: .7rem; color: var(--muted); margin-top: .15rem; }

/* Calendar */
.calendar-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 0 1.5rem .5rem; }
.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.view-tabs { display: flex; gap: .35rem; }
.view-tab { padding: .45rem 1rem; border-radius: .85rem; font-size: .8rem; font-weight: 600; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.7); cursor: pointer; color: var(--navy-muted); text-decoration: none; display: inline-block; }
.view-tab.active { background: linear-gradient(135deg,var(--pastel-blue-dark),#5a96bd); color: #fff; border-color: transparent; }
.cal-grid-week { grid-template-columns: repeat(7, 1fr); gap: .35rem; background: transparent; border: none; }
.cal-day-week { min-height: 5.5rem; border-radius: var(--radius-xl); border: 1px solid var(--card-border); padding: .5rem; }
.cal-dow-inline { padding: .25rem 0; background: transparent; font-size: .65rem; }
.cal-week-event { font-size: .7rem; padding: .35rem; border-radius: .5rem; border-left: 3px solid; margin-top: .35rem; }
.cal-week-event strong { display: block; font-size: .75rem; }
.cal-agenda { display: flex; flex-direction: column; gap: .65rem; }
.cal-agenda-month { font-size: .85rem; font-weight: 700; color: var(--navy); margin: 1rem 0 .35rem; padding-bottom: .35rem; border-bottom: 2px solid var(--gold); }
.cal-agenda-item { padding: 1rem; }
.cal-agenda-item-head { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Teacher performance */
.teacher-performance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.teacher-performance-card { padding: 1rem; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.teacher-performance-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.teacher-performance-inner { display: flex; align-items: center; gap: .75rem; }
.teacher-avatar-premium { width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(135deg, var(--pastel-blue), var(--soft-pink)); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.teacher-performance-name { font-weight: 600; font-size: .9rem; color: var(--navy); }
.teacher-performance-class { font-size: .75rem; color: var(--text-muted); }
.star-rating { display: inline-flex; gap: .15rem; margin-top: .25rem; }
.star-icon { width: 14px; height: 14px; color: #d1d5db; }
.star-icon.star-filled { color: var(--gold); fill: var(--gold); }
.form-row-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.form-actions-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.form-document-wrap { padding: 1.5rem; }
.eval-form-grid { display: grid; grid-template-columns: 1fr 280px; gap: 1rem; align-items: start; }
.eval-form-side { padding: 1.25rem; position: sticky; top: 5rem; }
.rating-row { display: flex; justify-content: space-between; align-items: center; padding: .65rem 0; border-bottom: 1px solid rgba(212,196,168,.2); gap: 1rem; }
.star-input-group { display: flex; gap: .25rem; }
.star-input-label { cursor: pointer; color: #d1d5db; transition: color .15s; }
.star-input-label input { display: none; }
.star-input-label.is-active,
.star-input-label.is-hover,
.star-input-label:has(input:checked) { color: var(--gold); }
.star-input-label svg { width: 18px; height: 18px; fill: currentColor; }

.eval-criteria-toolbar { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.eval-criteria-accordion { display: flex; flex-direction: column; gap: .5rem; }
.eval-criteria-panel { border: 1px solid var(--card-border); border-radius: var(--radius-xl); background: rgba(255,255,255,.7); overflow: hidden; }
.eval-criteria-panel[open] { box-shadow: var(--shadow-card); }
.eval-criteria-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; cursor: pointer; font-weight: 700; color: var(--navy); list-style: none; }
.eval-criteria-summary::-webkit-details-marker { display: none; }
.eval-criteria-title { display: flex; align-items: center; gap: .5rem; }
.eval-criteria-icon { font-size: 1.1rem; }
.eval-section-score { font-size: .8rem; color: var(--gold); font-weight: 700; white-space: nowrap; }
.eval-criteria-body { padding: 0 1rem 1rem; border-top: 1px solid rgba(212,196,168,.2); }
.eval-criteria-subtitle { font-size: .82rem; font-weight: 700; color: var(--navy-muted); margin: 1rem 0 .35rem; text-transform: uppercase; letter-spacing: .04em; }
.eval-textarea-lg { min-height: 110px; }
.eval-action-plan-table .form-input { min-width: 0; width: 100%; }
.eval-action-plan-table th:last-child, .eval-action-plan-table td:last-child { width: 48px; }
.eval-voice-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.eval-voice-status { font-size: .8rem; color: var(--text-muted); }
.eval-signature-wrap { display: flex; flex-direction: column; gap: .5rem; }
.eval-signature-canvas { width: 100%; max-width: 520px; height: 160px; border: 2px dashed rgba(212,196,168,.6); border-radius: var(--radius-xl); background: #fff; touch-action: none; cursor: crosshair; }
.eval-score-summary { text-align: center; padding: 1rem 0; }
.eval-score-ring { display: flex; align-items: baseline; justify-content: center; gap: .15rem; }
.eval-score-value { font-size: 2.5rem; font-weight: 800; color: var(--navy); line-height: 1; }
.eval-score-max { font-size: 1rem; color: var(--text-muted); }
.eval-score-stars { font-size: 1rem; font-weight: 700; color: var(--gold); margin: .5rem 0 .25rem; }
.eval-score-count { font-size: .8rem; color: var(--text-muted); margin: 0; }
.rating-row-label { flex: 1; font-size: .88rem; color: var(--navy); }

/* Cambridge form document */
.cambridge-document { max-width: 900px; margin: 0 auto; }
.cambridge-doc-header { text-align: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--gold); }
.cambridge-doc-header h2 { font-size: 1.25rem; color: var(--navy); }
.cambridge-doc-meta { font-size: .75rem; color: var(--text-muted); }
.cambridge-section-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 1.25rem 0 .75rem; }
.cambridge-subtitle { font-size: .9rem; font-weight: 600; color: var(--navy); margin: 1rem 0 .5rem; }
.cambridge-note { font-size: .8rem; color: var(--navy-muted); margin: .75rem 0; }
.cambridge-fields { display: grid; gap: .75rem; margin: 1rem 0; }
.cambridge-fields-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cambridge-fields-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cambridge-fields-cols-4 { grid-template-columns: repeat(4, 1fr); }
.cambridge-field-wide { grid-column: 1 / -1; }
.cambridge-field-label { font-size: .75rem; font-weight: 600; color: var(--navy-muted); display: block; margin-bottom: .25rem; }
.cambridge-field-line { display: block; height: 1.75rem; border-bottom: 1px solid #c5d5e8; }
.cambridge-field-input { margin-top: .15rem; }
.cambridge-line { height: 1.75rem; border-bottom: 1px solid #dde5ef; margin: .35rem 0; }
.cambridge-table { width: 100%; border-collapse: collapse; font-size: .8rem; margin: .75rem 0; }
.cambridge-table th, .cambridge-table td { border: 1px solid #dde5ef; padding: .5rem; text-align: start; }
.cambridge-table th { background: #f4f8fc; font-weight: 600; }
.cambridge-th-center, .cambridge-td-center { text-align: center; }
.cambridge-radio { display: inline-block; width: 14px; height: 14px; border: 2px solid #9cb8d4; border-radius: 50%; }
.cambridge-check-item { display: flex; align-items: center; gap: .5rem; font-size: .85rem; padding: .25rem 0; }
.cambridge-checkbox { width: 14px; height: 14px; border: 2px solid #9cb8d4; border-radius: 3px; flex-shrink: 0; }
.cambridge-signatures { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.cambridge-signature-line { height: 2rem; border-bottom: 1px solid var(--navy); margin-top: 1.5rem; }
.cambridge-signature-date { font-size: .7rem; color: var(--text-muted); margin-top: .35rem; display: block; }
.form-export-body { padding: 2rem; background: #fff; }
@media (max-width: 900px) { .eval-form-grid { grid-template-columns: 1fr; } .cambridge-fields-cols-3, .cambridge-fields-cols-4 { grid-template-columns: 1fr 1fr; } }

/* Form Rich Editor */
.form-editor-hero {
  background: linear-gradient(135deg, var(--navy), #3d5a80);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  color: #fff;
  box-shadow: var(--shadow-card);
}
.form-editor-hero-inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.form-editor-eyebrow { font-size: .75rem; color: #b8d4e8; margin: 0 0 .25rem; }
.form-editor-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.form-editor-sub { font-size: .8rem; color: rgba(255,255,255,.75); margin: .35rem 0 0; }
.form-editor-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; align-items: center; }
.form-editor-status { font-size: .75rem; color: rgba(255,255,255,.8); }
.form-editor-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.form-editor-meta { padding: 1rem 1.25rem; margin-bottom: 1rem; }
.form-editor-lang { display: flex; gap: .35rem; margin-bottom: .75rem; }
.form-lang-btn {
  padding: .35rem .85rem; border-radius: var(--radius-full); font-size: .75rem; font-weight: 600;
  text-decoration: none; color: var(--navy); background: rgba(255,255,255,.6); border: 1px solid var(--card-border);
}
.form-lang-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.form-editor-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.form-editor-toolbar-wrap { margin-bottom: 1rem; }
.form-editor-toolbar-label { font-size: .75rem; font-weight: 600; color: var(--text-muted); margin: 0 0 .5rem; }
.form-editor-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem; background: rgba(255,255,255,.85); border-radius: var(--radius-xl); border: 1px solid var(--card-border); }
.form-editor-tool-group { display: flex; gap: .25rem; padding-inline-end: .5rem; border-inline-end: 1px solid var(--card-border); }
.form-editor-tool-group:last-child { border: none; }
.form-editor-tool-btn {
  min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: .5rem; border: 1px solid transparent;
  background: transparent; color: var(--navy); font-size: .75rem; font-weight: 700; cursor: pointer;
}
.form-editor-tool-btn:hover { background: rgba(168,208,240,.25); border-color: #b8d4e8; }
.form-editor-document { padding: 0; overflow: hidden; }
.form-document-editor-content {
  min-height: 720px; padding: 2rem; outline: none; font-size: .9rem; color: var(--navy); line-height: 1.6;
}
.form-document-editor-content.imported-docx-mode {
  font-family: Calibri, 'Segoe UI', Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.55;
  color: #1a202c;
  padding: 2rem 2.5rem;
}
.form-document-editor-content.imported-docx-mode .ProseMirror {
  outline: none;
  min-height: 680px;
}
.form-document-editor-content.imported-docx-mode h1 {
  display: block;
  text-align: center;
  color: #17365D;
  font-size: 26pt;
  font-weight: 400;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid #4F81BD;
  line-height: 1.3;
}
.form-document-editor-content.imported-docx-mode[dir="rtl"] h2,
.form-document-editor-content.imported-docx-mode[dir="rtl"] p:not([style*="text-align:center"]) {
  text-align: right;
}
.form-document-editor-content.imported-docx-mode h2 {
  display: block;
  color: #365F91;
  font-size: 14pt;
  font-weight: 700;
  margin: 1.1em 0 0.35em !important;
  line-height: 1.35;
}
.form-document-editor-content.imported-docx-mode p {
  display: block;
  margin: 0.35em 0 0.65em;
  line-height: 1.55;
}
.form-document-editor-content.imported-docx-mode p[style*="text-align:center"],
.form-document-editor-content.imported-docx-mode h1 + p {
  text-align: center;
}
.form-document-editor-content.imported-docx-mode ul {
  display: block;
  margin: 0.5em 0 1em;
  padding-inline-start: 1.75em;
  list-style: disc;
}
.form-document-editor-content.imported-docx-mode li {
  display: list-item;
  margin: 0.3em 0;
  line-height: 1.5;
}
.form-document-editor-content.imported-docx-mode span {
  display: inline;
}
.form-document-editor-content.imported-docx-mode br {
  display: block;
  content: '';
  margin-top: 0.15em;
}
.form-document-editor-content:focus { outline: none; }
.form-document-editor-content table { border-collapse: collapse; width: 100%; }
.form-document-editor-content td, .form-document-editor-content th { border: 1px solid #b8d4e8; padding: 6px 8px; }
.cambridge-form-header { margin-bottom: 1.5rem; }
.cambridge-title-banner { text-align: center; padding: 1rem; background: linear-gradient(135deg, rgba(168,208,240,.2), rgba(255,255,255,.5)); border-radius: var(--radius-lg); margin-bottom: 1rem; }
.cambridge-title-banner h2 { margin: 0; font-size: 1.1rem; color: var(--navy); }
.cambridge-form-footer { text-align: center; font-size: .7rem; color: var(--text-muted); margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--card-border); }
.form-document-print-root { background: #fff; }

/* Archive hub */
.archive-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.archive-hub-card { padding: 1.25rem; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.archive-hub-card:hover, .archive-hub-card.active { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--pastel-blue-dark, #6ba3cc); }
.archive-hub-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg); background: rgba(168,208,240,.25); display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; }
.archive-hub-card h3 { font-size: .95rem; margin: 0 0 .35rem; color: var(--navy); }
.archive-hub-card p { font-size: .8rem; color: var(--text-muted); margin: 0; }
.archive-section-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.archive-pill { padding: .4rem .9rem; border-radius: var(--radius-full); font-size: .8rem; text-decoration: none; color: var(--navy); background: rgba(255,255,255,.7); border: 1px solid var(--card-border); }
.archive-pill.active, .archive-pill:hover { background: var(--navy); color: #fff; }
.form-archive-list { display: flex; flex-direction: column; gap: .75rem; }
.form-archive-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.form-archive-item h4 { margin: 0 0 .25rem; font-size: .95rem; color: var(--navy); }
.form-archive-meta { font-size: .75rem; color: var(--text-muted); margin: 0; }
.form-archive-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

@media print { .no-print { display: none !important; } .form-document-wrap { box-shadow: none; border: none; } .form-editor-document { border: none; box-shadow: none; } }
.cal-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.cal-month-title { font-weight: 700; color: var(--navy); min-width: 120px; text-align: center; font-size: .9rem; }
.calendar-widget-wrap {
  max-width: 680px;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-3xl);
}
.calendar-widget-wrap .calendar-toolbar { margin-bottom: .85rem; }
.calendar-table-scope { font-size: .85rem; color: var(--navy-muted); margin: 0 0 1rem; font-weight: 600; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  background: rgba(238,241,246,.9); border-radius: 1rem; overflow: hidden;
  border: 1px solid rgba(212,196,168,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.cal-dow { padding: .5rem .25rem; text-align: center; font-size: .65rem; font-weight: 700; text-transform: uppercase; color: var(--navy-muted); background: linear-gradient(90deg,rgba(184,212,232,.3),rgba(245,198,208,.18)); }
.cal-day { min-height: 3.75rem; padding: .3rem .25rem; background: #fff; position: relative; cursor: pointer; transition: background .15s; }
.cal-day:hover { background: rgba(238,246,252,.85); }
.cal-day.empty { background: rgba(250,250,250,.55); cursor: default; min-height: 3.75rem; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--pastel-blue-dark); }
.cal-day.selected { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(245,230,168,.12); }
.cal-day-num { font-size: .7rem; font-weight: 700; color: var(--navy-muted); display: block; margin-bottom: .15rem; }
.cal-day.today .cal-day-num { background: rgba(212,175,55,.25); color: #92400e; border-radius: 999px; padding: 0 .3rem; display: inline-block; }
.cal-event-chip { font-size: .58rem; padding: 1px 3px; border-radius: 3px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.3; }
.cal-grid-week {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem;
  background: transparent; border: none; box-shadow: none;
}
.cal-day-week {
  min-height: 5.5rem; max-height: 7.5rem; overflow-y: auto;
  border-radius: .75rem; border: 1px solid var(--card-border);
  padding: .4rem; background: rgba(255,255,255,.85);
}
.cal-day-week.today { border-color: var(--pastel-blue-dark); box-shadow: 0 0 0 2px rgba(107,163,204,.2); }
.cal-week-event { font-size: .65rem; padding: .3rem; border-radius: .4rem; border-inline-start: 3px solid; margin-top: .3rem; line-height: 1.35; }
.cal-week-event strong { display: block; font-size: .68rem; font-weight: 600; }
.cal-day-detail { margin-top: 1rem; }

/* Calendar view tabs */
.calendar-view-tabs-wrap {
  max-width: 680px;
  margin: 0 auto .85rem;
  display: flex;
  justify-content: center;
}
.calendar-view-tabs { justify-content: center; }

/* Academic calendar document (agenda view) — full page width on screen */
.calendar-agenda-document-wrap {
  width: 100%;
  max-width: none;
  margin: 0 0 1.5rem;
}
.calendar-agenda-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-start;
  margin-bottom: 1rem;
}
.cal-doc-root.cal-doc-screen {
  width: 100%;
  max-width: none;
  background: #fff;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.cal-doc-page {
  padding: 20px 24px 24px;
  box-sizing: border-box;
  min-height: 0;
}
.cal-doc-page-2 {
  border-top: 1px dashed rgba(107,163,204,.35);
}
.cal-doc-header-table { width: 100%; border: none; border-collapse: collapse; margin: 0 0 12px; }
.cal-doc-header-table td { border: none; padding: 0; vertical-align: middle; }
.cal-doc-header-logo { width: 88px; text-align: center; }
.cal-doc-header-text { text-align: center; }
.cal-doc-logo { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto; }
.cal-doc-academy { font-size: 1.35rem; font-weight: 700; color: #000; margin: 0 0 4px; line-height: 1.15; }
.cal-doc-dept { font-size: .95rem; color: #333; margin: 0 0 4px; line-height: 1.15; }
.cal-doc-title { font-size: 1.05rem; font-weight: 700; color: #000; margin: 0; line-height: 1.15; }
.cal-doc-table-frame {
  border: 2px solid #0F3157;
  padding: 0;
  margin: 0;
}
.cal-doc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .82rem;
  line-height: 1.25;
  color: #000;
}
.cal-doc-table th, .cal-doc-table td {
  border: 1px solid #000;
  padding: 4px 6px;
  vertical-align: top;
}
.cal-doc-table th {
  background: #B4C6E7;
  font-weight: 700;
  text-align: center;
  font-size: .82rem;
  padding: 6px 8px;
}
.cal-doc-month { text-align: center; font-weight: 700; vertical-align: middle !important; }
.cal-doc-week { text-align: center; font-weight: 600; vertical-align: middle !important; }
.cal-doc-day { white-space: nowrap; }
.cal-doc-month-ar { font-size: .72rem; font-weight: 600; display: block; }
.cal-doc-row-empty td { background: #EEF2F7; }
.cal-doc-occ-item {
  display: block;
  padding: 3px 5px;
  margin: 0 0 2px;
  line-height: 1.2;
  border-radius: 2px;
}
.cal-doc-occ-item:last-child { margin-bottom: 0; }

@media print {
  body.calendar-agenda-printing .sidebar-premium,
  body.calendar-agenda-printing .header-premium,
  body.calendar-agenda-printing .no-print,
  body.calendar-agenda-printing .calendar-badges,
  body.calendar-agenda-printing .form-brand-bar,
  body.calendar-agenda-printing .page-toolbar,
  body.calendar-agenda-printing .calendar-view-tabs-wrap { display: none !important; }
  body.calendar-agenda-printing .main-content { margin: 0 !important; }
  body.calendar-agenda-printing .page-content { padding: 0 !important; }
  body.calendar-agenda-printing .calendar-agenda-document-wrap { max-width: none; margin: 0; }
  body.calendar-agenda-printing .cal-doc-root {
    box-shadow: none;
    border: none;
    border-radius: 0;
  }
  body.calendar-agenda-printing .cal-doc-page {
    padding: 0;
    border: none;
  }
  body.calendar-agenda-printing .cal-doc-page-2 {
    page-break-before: always;
    border-top: none;
  }
  body.calendar-agenda-printing .cal-doc-table { font-size: 6.5pt; }
  body.calendar-agenda-printing .cal-doc-table th { font-size: 6.5pt; }
  body.calendar-agenda-printing .cal-doc-table-frame {
    border: 2px solid #0F3157;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.calendar-agenda-printing .cal-doc-table th,
  body.calendar-agenda-printing .cal-doc-row-empty td,
  body.calendar-agenda-printing .cal-doc-occ-item {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  @page { size: A4 portrait; margin: 0.45in 0.42in; }
}


/* Empty & Alerts */
.premium-empty, .empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.premium-empty-icon, .empty-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.premium-empty h3, .empty-state h3 { font-size: 1rem; color: var(--navy); margin-bottom: .5rem; }
.alert { padding: .85rem 1.1rem; border-radius: var(--radius-xl); margin: 0 1.5rem 1rem; font-size: .875rem; }
.alert-error { background: #fff1f2; color: #dc2626; border: 1px solid #fecaca; }
.alert-success { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }

/* Pagination */
.pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding: .75rem 1rem; background: rgba(250,248,243,.6); border-radius: .85rem; border: 1px solid var(--card-border); }
.pagination-info { font-size: .8rem; color: var(--muted); }
.pagination-btns { display: flex; gap: .5rem; }
.pagination-btns .disabled { pointer-events: none; opacity: .45; }

/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.icon-inline { width: 1rem; height: 1rem; display: inline; vertical-align: middle; }
.text-gold { color: var(--gold); }

/* Animations */
@keyframes fadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.animate-fade-in { animation: fadeIn .5s cubic-bezier(.22,1,.36,1) forwards; }

/* Misc legacy compat */
.card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-2xl); padding: 1.25rem; box-shadow: var(--shadow-card); margin-bottom: 1rem; }
.action-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.sidebar-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--navy); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,var(--pastel-blue),var(--soft-pink)); border-radius: 999px; }

/* Responsive */
@media (min-width: 640px) { .user-chip { display: flex; } }
@media (max-width: 768px) {
  .sidebar-premium { transform: translateX(-100%); transition: transform .3s; }
  body.rtl .sidebar-premium { transform: translateX(100%); }
  .sidebar-premium.open { transform: translateX(0); }
  .main-content { margin-inline-start: 0; }
  .sidebar-toggle { display: block; }
  .grid-2 { grid-template-columns: 1fr; }
  .header-inner { height: auto; min-height: 4rem; flex-wrap: wrap; padding: .75rem 1rem; }
  .page-content { padding: 1rem; }
}

/* Login Premium — split layout */
.login-shell { display: flex; min-height: 100vh; position: relative; overflow: hidden; }
.login-panel-brand { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; background: linear-gradient(135deg, rgba(30,42,74,.04), rgba(107,163,204,.08)); position: relative; }
.login-panel-form { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; position: relative; gap: .85rem; }
.login-logo-ring-lg { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; border: 6px solid rgba(255,255,255,.9); box-shadow: var(--shadow-glow-blue); margin: 0 auto; background: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; }
.login-logo-ring-lg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.login-brand-title { font-family: var(--font-display); font-size: 2rem; color: var(--navy); text-align: center; margin-top: 2rem; }
.login-brand-tag { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.5rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: var(--gold); }
@media (min-width: 1024px) { .login-panel-brand { display: flex; } .login-page { padding: 0; } .login-page .login-card { max-width: 400px; box-shadow: none; border: none; background: transparent; backdrop-filter: none; } .login-brand-mobile { display: none; } }
.login-page::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--navy) 0%, #1a3a5c 40%, var(--pastel-blue) 100%); opacity: .08; }
.login-ambient { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; pointer-events: none; }
.login-ambient-1 { width: 400px; height: 400px; background: var(--pastel-blue); top: -100px; inset-inline-start: -100px; }
.login-ambient-2 { width: 300px; height: 300px; background: var(--soft-pink); bottom: -80px; inset-inline-end: -60px; }
.login-card { width: 100%; max-width: 440px; background: rgba(255,255,255,.94); backdrop-filter: blur(20px); border-radius: var(--radius-3xl); padding: 2.25rem; box-shadow: var(--shadow-soft), 0 0 0 1px rgba(255,255,255,.5); border: 1px solid var(--card-border); position: relative; z-index: 1; }
.login-brand { text-align: center; margin-bottom: 1.75rem; }
.login-brand .school-logo { justify-content: center; flex-direction: column; gap: .75rem; }
.school-logo-ring, .school-logo-ring-login { border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 4px 20px rgba(26,58,92,.12); display: flex; align-items: center; justify-content: center; padding: 3px; }
.school-logo-ring-login { padding: 8px; border: 2px solid var(--gold); }
.login-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); text-align: center; margin-bottom: .25rem; }
.login-sub { text-align: center; color: var(--text-muted); font-size: .875rem; margin-bottom: 1.5rem; }
.login-lang { display: flex; justify-content: center; gap: .5rem; margin-bottom: 1.25rem; }
.login-lang a { padding: .35rem .75rem; border-radius: var(--radius-full); font-size: .8rem; text-decoration: none; color: var(--text-muted); border: 1px solid var(--card-border); }
.login-lang a.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.login-debug-details {
  margin: .65rem 0 0;
  padding: .55rem .65rem;
  border-radius: var(--radius-md);
  background: rgba(26,54,93,.06);
  font-size: .68rem;
  line-height: 1.45;
  white-space: pre-wrap;
  direction: ltr;
  text-align: left;
  color: #334155;
}

/* Mobile app download card */
.login-mobile-download { width: 100%; max-width: 440px; margin-top: 0; }
.mobile-download-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(201,162,39,.35);
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(184,223,245,.18));
  box-shadow: 0 6px 18px rgba(26,54,93,.07);
  max-width: 440px;
}
.mobile-download-card.is-unavailable { border-color: var(--card-border); background: rgba(248,250,252,.95); }
.mobile-download-card__icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 12px rgba(26,54,93,.12);
}
.mobile-download-card__app-icon { width: 100%; height: 100%; object-fit: cover; display: block; }
.mobile-download-card__body { min-width: 0; }
.mobile-download-card__eyebrow { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin: 0 0 .15rem; font-weight: 700; }
.mobile-download-card__title { font-family: var(--font-display); font-size: .92rem; color: var(--navy); margin: 0; line-height: 1.25; }
.mobile-download-card__app-name { margin: .1rem 0 .35rem; color: var(--text-muted); font-size: .72rem; }
.mobile-download-card__meta { display: flex; flex-wrap: wrap; gap: .35rem .55rem; font-size: .68rem; color: var(--text-muted); margin-bottom: .55rem; }
.mobile-download-card__meta span { display: inline-flex; align-items: center; gap: .2rem; }
.mobile-download-card__notice { font-size: .72rem; color: var(--text-muted); margin: .25rem 0 .5rem; line-height: 1.45; }
.mobile-download-card__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.mobile-download-card__btn { min-height: 2rem !important; height: auto !important; padding: .4rem .8rem !important; font-size: .74rem !important; }
.header-push-bell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full);
  border: 1px solid var(--card-border); background: rgba(255,255,255,.9);
  color: var(--navy); cursor: pointer; margin-inline-end: .35rem;
}
.header-push-bell:hover { border-color: var(--gold); color: var(--gold); }
.header-push-bell.is-enabled { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Public complaint form */
.public-form-page .public-form-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1rem 3rem;
  position: relative;
  z-index: 1;
}
.public-form-page .public-form-brand { margin-bottom: 1.25rem; max-width: 720px; width: 100%; }
.public-form-page .public-form-card {
  width: 100%;
  max-width: 720px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-3xl);
  padding: 2rem;
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(255,255,255,.5);
  border: 1px solid var(--card-border);
}
.public-form-page .public-form-head { margin-bottom: 1.25rem; }
.public-complaint-form .form-textarea { min-height: 120px; }
@media (max-width: 900px) {
  .complaint-detail-grid { grid-template-columns: 1fr !important; }
}

/* Page Hero */
.page-hero-premium { background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(230,240,250,.6)); border: 1px solid var(--card-border); border-radius: var(--radius-2xl); padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-card); }
.page-hero-dark { background: linear-gradient(135deg, var(--navy) 0%, #2a4a6e 100%); border-radius: var(--radius-2xl); padding: 1.75rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-soft); }
.page-hero-baby {
  background: linear-gradient(135deg, #d4ecfa 0%, #b8dff5 50%, #e8f4fc 100%);
  border-radius: var(--radius-2xl); padding: 1.75rem; margin-bottom: 1.5rem;
  box-shadow: 0 12px 32px rgba(126, 200, 232, .22);
  border: 1px solid rgba(94, 179, 224, .4); color: #111;
}
.page-hero-baby .page-hero-eyebrow { color: #0369a1; font-weight: 700; }
.page-hero-baby h2 { color: #111 !important; }
.page-hero-baby .page-hero-sub { color: #374151 !important; }
.page-hero-eyebrow { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin-bottom: .35rem; }
.page-hero-sub { color: var(--text-muted); font-size: .9rem; margin-top: .35rem; }

/* Hub Cards */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.hub-card { display: block; padding: 1.25rem; text-decoration: none; color: inherit; position: relative; transition: transform .2s, box-shadow .2s; }
.hub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.hub-card-icon { font-size: 1.75rem; margin-bottom: .75rem; }
.hub-card h3 { font-size: 1rem; margin-bottom: .35rem; }
.hub-card p { font-size: .8rem; color: var(--text-muted); margin: 0; line-height: 1.4; }
.hub-card-arrow { position: absolute; top: 1rem; inset-inline-end: 1rem; color: var(--text-muted); opacity: .5; }

/* Inbox */
.inbox-list { display: flex; flex-direction: column; gap: .65rem; }
.inbox-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; text-decoration: none; color: inherit; transition: transform .15s; }
.inbox-item:hover { transform: translateX(-2px); }
body.rtl .inbox-item:hover { transform: translateX(2px); }
.inbox-item-main { flex: 1; min-width: 0; }
.inbox-item-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.inbox-item-preview { font-size: .8rem; color: var(--text-muted); margin: .25rem 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-item-date { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
.inbox-item-chevron { color: var(--text-muted); opacity: .4; flex-shrink: 0; }

/* Thread */
.thread-wrap { max-width: 720px; }
.thread-bubble { padding: 1rem 1.25rem; border-radius: var(--radius-xl); margin-bottom: .75rem; max-width: 85%; }
.thread-bubble.sent { background: linear-gradient(135deg, var(--navy), #2a4a6e); color: #fff; margin-inline-start: auto; }
.thread-bubble.received { background: rgba(255,255,255,.85); border: 1px solid var(--card-border); }
.thread-meta { font-size: .7rem; opacity: .7; margin-top: .35rem; }

/* Dev Notice */
.dev-notice { text-align: center; padding: 2rem; margin: 1rem 0; }

/* Print tabs */
.print-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.print-tab { padding: .5rem 1rem; border-radius: var(--radius-full); font-size: .85rem; text-decoration: none; color: #374151; background: rgba(255,255,255,.85); border: 1px solid rgba(94, 179, 224, .3); transition: all .2s; font-weight: 600; }
.print-tab:hover { background: rgba(184, 223, 245, .45); color: #111; border-color: #89c4e8; }
.print-tab.active {
  background: linear-gradient(135deg, #89c4e8, #b8dff5);
  color: #111;
  border-color: #5eb3e0;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(126, 200, 232, .25);
}
.print-job-card { padding: 1.25rem; margin-bottom: .75rem; }
.print-job-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

/* Premium form panel */
.form-panel { padding: 1.25rem; margin-bottom: 1rem; }
.form-panel h3 { font-size: .95rem; margin-bottom: 1rem; color: var(--navy); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; align-items: end; }
.form-grid .form-group { margin: 0; }

/* Report tabs */
.report-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1.25rem; overflow-x: auto; padding-bottom: .25rem; }

/* Reports hub */
.report-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.report-filters-sparkle { width: 1rem; height: 1rem; color: var(--gold); flex-shrink: 0; }
.report-filters-label { font-size: .85rem; font-weight: 600; color: var(--navy); }
.report-filters-select {
  border-radius: var(--radius-xl); border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.6); padding: .55rem 1rem; font-size: .85rem;
  min-width: 9rem; box-shadow: var(--shadow-sm);
}
.report-hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.report-hub-card {
  position: relative; overflow: hidden; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.report-hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.report-hub-accent {
  position: absolute; inset: 0; opacity: .55; pointer-events: none;
}
.report-hub-accent-blue { background: linear-gradient(135deg, rgba(168,208,240,.35), rgba(168,208,240,.05)); }
.report-hub-accent-lavender { background: linear-gradient(135deg, rgba(200,180,230,.35), rgba(200,180,230,.05)); }
.report-hub-accent-pink { background: linear-gradient(135deg, rgba(255,182,193,.35), rgba(255,182,193,.05)); }
.report-hub-accent-peach { background: linear-gradient(135deg, rgba(255,218,185,.4), rgba(255,218,185,.08)); }
.report-hub-accent-gold { background: linear-gradient(135deg, rgba(212,175,55,.3), rgba(212,175,55,.08)); }
.report-hub-accent-rose { background: linear-gradient(135deg, rgba(251,207,232,.45), rgba(251,207,232,.1)); }
.report-hub-body { position: relative; padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; height: 100%; }
.report-hub-head { display: flex; align-items: center; gap: .75rem; }
.report-hub-icon {
  width: 3rem; height: 3rem; border-radius: var(--radius-xl);
  background: rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(255,255,255,.8); flex-shrink: 0;
}
.report-hub-icon i { width: 1.25rem; height: 1.25rem; color: var(--pastel-blue-dark, #4a7fa8); }
.report-hub-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0; line-height: 1.35; }
.report-hub-desc { font-size: .85rem; color: var(--text-muted); margin: 0; flex: 1; }
.report-hub-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }

.report-view-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: 1rem;
}
.report-view-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.report-view-wrap { padding: 1.25rem; }

.report-panel { padding: .5rem 0; }
.report-panel-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--card-border);
}
.report-panel-meta { text-align: end; font-size: .8rem; color: var(--text-muted); }
.report-panel-sub { margin: .35rem 0 0; }
.report-panel-title { font-size: 1.35rem; font-weight: 700; color: var(--navy); margin: 0 0 1rem; }
.report-summary-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem; margin-bottom: 1.25rem;
}
.report-panel-footer {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--card-border);
  text-align: center; font-size: .75rem; color: var(--text-muted);
}
.report-print-body { background: #fff; padding: 1.5rem; max-width: 960px; margin: 0 auto; }

/* Shared page layout */
.page-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-toolbar-main { flex: 1; min-width: 0; }
.page-toolbar-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; flex-shrink: 0; }
.page-filters { padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.page-filters-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; align-items: end; }
.page-filters-form .admin-search-bar { grid-column: 1 / -1; }
.hub-section-title { margin: 1.5rem 0 1rem; font-size: 1rem; }
.settings-page-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }
.settings-add-panel { padding: 1.25rem; }
.settings-add-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.settings-add-panel-body .form-grid { margin: 0; }
.teacher-performance-card.selected { border: 2px solid var(--pastel-blue-dark); box-shadow: var(--shadow-glow-blue); }
.teacher-performance-meta { font-size: .7rem; color: var(--muted); margin-top: .25rem; }
.teacher-profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.teacher-profile-meta p { margin: 0; font-size: .875rem; color: var(--navy-muted); }

.calendar-schedule-table-wrap { overflow-x: auto; margin-top: .5rem; }
.calendar-schedule-table { width: 100%; min-width: 720px; }
.calendar-schedule-table th { font-size: .75rem; white-space: nowrap; }
.calendar-schedule-table td { font-size: .82rem; vertical-align: top; padding: .65rem .75rem; }
.cal-td-month { font-weight: 700; color: var(--navy); min-width: 5rem; }
.cal-month-ar { font-size: .7rem; color: var(--muted); font-weight: 500; }
.cal-td-week { text-align: center; font-weight: 600; color: var(--pastel-blue-dark); width: 3.5rem; }
.cal-td-occasion { min-width: 220px; }
.cal-td-actions { white-space: nowrap; }
.calendar-event-form { margin-top: .5rem; }

@media (max-width: 900px) {
  .page-toolbar { flex-direction: column; }
  .page-toolbar-actions { width: 100%; }
  .page-filters-form { grid-template-columns: 1fr 1fr; }
  .page-filters-form .admin-search-bar { grid-column: 1 / -1; }
  .teacher-performance-grid { grid-template-columns: repeat(2, 1fr); }
  .category-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .35rem; }
  .form-row { flex-direction: column; align-items: stretch; }
  .form-row-actions { justify-content: flex-start; }
  .calendar-toolbar { flex-direction: column; align-items: stretch; }
  .cal-grid-week { grid-template-columns: repeat(4, 1fr); }
  .calendar-widget-wrap { max-width: 100%; }
  .report-hub-grid { grid-template-columns: 1fr; }
  .report-view-toolbar { flex-direction: column; align-items: stretch; }
  .hub-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .page-filters-form { grid-template-columns: 1fr; }
  .teacher-performance-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .cal-grid-week { grid-template-columns: repeat(2, 1fr); }
  .cal-day { min-height: 3.25rem; }
}

/* ─── Student Portal — Premium Shell ─────────────────────── */
.student-portal-body {
  --sp-gold: #c9a227; --sp-gold-light: #f4e4b8; --sp-navy-deep: #0f2341;
  background: linear-gradient(180deg, #f0f4f8 0%, #f8fafc 40%, #eef2f7 100%);
}
.header-student-compact,
.header-portal-compact { padding-block: .65rem 0; background: transparent; box-shadow: none; }
.header-student-compact .header-inner,
.header-portal-compact .header-inner { padding-bottom: .5rem; }
.main-content-student .page-body,
.student-portal-mode .main-content-portal .page-body {
  max-width: none;
  width: 100%;
}
.teacher-portal-mode .main-content-portal .page-body,
.supervisor-portal-mode .main-content-portal .page-body {
  max-width: none;
  width: 100%;
}
.teacher-portal-mode .page-content,
.supervisor-portal-mode .page-content {
  padding: clamp(1rem, 1.8vw, 1.75rem) clamp(1.25rem, 3vw, 2.75rem) 2.5rem;
  max-width: none;
}
.student-portal-mode .page-content {
  padding: clamp(1rem, 1.8vw, 1.75rem) clamp(1.25rem, 3vw, 2.75rem) 2.5rem;
  max-width: none;
}
.student-portal-mode .main-content-portal .page-body,
.student-portal-mode .page-content {
  max-width: none;
  width: 100%;
}
.student-portal-mode .page-content {
  padding: clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 3vw, 2.5rem) 2rem;
}
.student-portal-mode .page-body,
.teacher-portal-mode .page-body,
.supervisor-portal-mode .page-body { padding-top: 0; }
.header-student-eyebrow { margin: 0; font-size: .8rem; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }

.student-portal-body,
.teacher-portal-body,
.supervisor-portal-body {
  --portal-baby: #b8dff5;
  --portal-text: #111827;
  color: var(--portal-text);
}
.student-portal-body,
.teacher-portal-body,
.supervisor-portal-body {
  background: linear-gradient(180deg, #eef7fc 0%, #f8fbfe 45%, #e8f4fc 100%);
}
.header-student-eyebrow { margin: 0; font-size: .8rem; font-weight: 600; color: #374151 !important; letter-spacing: .02em; }

.sidebar-student,
.sidebar-teacher,
.sidebar-supervisor,
.sidebar-print {
  background: linear-gradient(180deg, #e8f6fd 0%, #d4ecfa 50%, #c5e4f7 100%) !important;
  border-inline-end: 1px solid rgba(94, 179, 224, .35) !important;
  border-inline-start: none !important;
}
.sidebar-student .sidebar-role-card,
.sidebar-teacher .sidebar-role-card,
.sidebar-supervisor .sidebar-role-card,
.sidebar-print .sidebar-role-card {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(94, 179, 224, .35) !important;
}
.sidebar-student .sidebar-role-eyebrow,
.sidebar-teacher .sidebar-role-eyebrow,
.sidebar-supervisor .sidebar-role-eyebrow,
.sidebar-print .sidebar-role-eyebrow { color: #0369a1 !important; }
.sidebar-student .sidebar-role-title,
.sidebar-teacher .sidebar-role-title,
.sidebar-supervisor .sidebar-role-title,
.sidebar-print .sidebar-role-title { color: #111 !important; }
.sidebar-student .nav-section-label,
.sidebar-teacher .nav-section-label,
.sidebar-supervisor .nav-section-label,
.sidebar-print .nav-section-label { color: #4b5563 !important; }
.sidebar-student .nav-link-premium,
.sidebar-teacher .nav-link-premium,
.sidebar-supervisor .nav-link-premium,
.sidebar-print .nav-link-premium { color: #111 !important; }
.sidebar-student .nav-link-premium:hover,
.sidebar-teacher .nav-link-premium:hover,
.sidebar-supervisor .nav-link-premium:hover,
.sidebar-print .nav-link-premium:hover {
  background: rgba(255,255,255,.7) !important;
  color: #111 !important;
}
.sidebar-student .nav-link-premium.active,
.sidebar-teacher .nav-link-premium.active,
.sidebar-supervisor .nav-link-premium.active,
.sidebar-print .nav-link-premium.active {
  background: linear-gradient(90deg, #89c4e8, #b8dff5) !important;
  color: #111 !important;
  border: 1px solid #5eb3e0 !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(126, 200, 232, .25) !important;
}
.sidebar-student .nav-icon-box,
.sidebar-teacher .nav-icon-box,
.sidebar-supervisor .nav-icon-box,
.sidebar-print .nav-icon-box { background: rgba(255,255,255,.65) !important; }
.sidebar-student .nav-link-premium.active .nav-icon-box,
.sidebar-teacher .nav-link-premium.active .nav-icon-box,
.sidebar-supervisor .nav-link-premium.active .nav-icon-box,
.sidebar-print .nav-link-premium.active .nav-icon-box {
  background: #fff !important;
  color: #0369a1 !important;
}
.sidebar-student .sidebar-user,
.sidebar-teacher .sidebar-user,
.sidebar-supervisor .sidebar-user,
.sidebar-print .sidebar-user { color: #111 !important; }
.sidebar-student .logout-link,
.sidebar-teacher .logout-link,
.sidebar-supervisor .logout-link,
.sidebar-print .logout-link { color: #dc2626 !important; }
.sidebar-student .lang-switch a,
.sidebar-teacher .lang-switch a,
.sidebar-supervisor .lang-switch a,
.sidebar-print .lang-switch a {
  color: #374151 !important;
  border-color: rgba(94, 179, 224, .35) !important;
}
.sidebar-student .nav-link-premium.active::before,
.sidebar-teacher .nav-link-premium.active::before,
.sidebar-supervisor .nav-link-premium.active::before,
.sidebar-print .nav-link-premium.active::before {
  background: #0369a1 !important;
}
.sidebar-student .lang-switch a.active,
.sidebar-teacher .lang-switch a.active,
.sidebar-supervisor .lang-switch a.active,
.sidebar-print .lang-switch a.active {
  background: #89c4e8 !important;
  color: #111 !important;
  border-color: #5eb3e0 !important;
  font-weight: 700;
}

.sp-shell { display: grid; gap: 1.25rem; margin-bottom: 0; }
.sp-shell-full { width: 100%; }
.sp-content-full { width: 100%; }

/* Hero — baby blue */
.sp-hero,
.tp-hero,
.sv-hero {
  position: relative; overflow: hidden; border-radius: 20px;
  background: linear-gradient(135deg, #d4ecfa 0%, #b8dff5 50%, #e8f4fc 100%);
  color: #111;
  box-shadow: 0 12px 32px rgba(126, 200, 232, .22);
  border: 1px solid rgba(94, 179, 224, .4);
}
.sp-hero-compact,
.tp-hero,
.sv-hero { padding: 1.15rem 1.5rem; }
.sp-hero-title,
.tp-hero-title,
.sv-hero-title { color: #111 !important; }
.sp-hero-meta,
.tp-hero-meta,
.sv-hero-desc { color: #374151 !important; }
.sp-hero-badge,
.tp-hero-badge,
.sv-hero-badge {
  background: rgba(137, 196, 232, .35) !important;
  color: #111 !important;
  border: 1px solid rgba(94, 179, 224, .45) !important;
}
.sp-hero-avatar-initial { color: #111 !important; }
.tp-page-title,
.tp-page-desc,
.sp-page-intro-title,
.sp-page-intro-desc,
.sv-hero-desc { color: #111; }
.sp-page-intro-desc,
.tp-page-desc { color: #374151 !important; }
.sp-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.sp-hero-glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .4; }
.sp-hero-glow-1 { width: 180px; height: 180px; background: #c9a227; top: -70px; inset-inline-end: -30px; }
.sp-hero-glow-2 { width: 140px; height: 140px; background: #6eb5ff; bottom: -50px; inset-inline-start: 8%; opacity: .22; }
.sp-hero-inner { position: relative; z-index: 1; }
.sp-hero-profile { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sp-hero-avatar-ring {
  padding: 3px; border-radius: 50%;
  background: linear-gradient(135deg, #89c4e8, #b8dff5, #d4ecfa);
  box-shadow: 0 8px 24px rgba(126, 200, 232, .25);
}
.sp-hero-compact .sp-hero-avatar { width: 64px; height: 64px; }
.sp-hero-avatar {
  border-radius: 50%; overflow: hidden;
  background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center;
}
.sp-hero-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.sp-hero-compact .sp-hero-avatar-initial { font-size: 1.5rem; }
.sp-hero-avatar-initial { font-weight: 700; color: #111; }
.sp-hero-meta { margin: 0; font-size: .82rem; color: #374151 !important; display: flex; align-items: center; gap: .35rem; }
.sp-hero-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .22rem .55rem; border-radius: 999px;
  background: rgba(137, 196, 232, .35); border: 1px solid rgba(94, 179, 224, .45); color: #111;
}
.sp-hero-compact .sp-hero-title { margin: .3rem 0 .1rem; font-size: clamp(1.1rem, 2vw, 1.45rem); }
.sp-hero-title { font-weight: 700; line-height: 1.25; }

/* Page intro — replaces duplicate quick nav */
.sp-page-intro {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
  background: rgba(255,255,255,.92); border: 1px solid rgba(26,54,93,.08);
  border-radius: 18px; box-shadow: 0 10px 28px rgba(26,54,93,.05);
}
.sp-page-intro-icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(201,162,39,.18), rgba(168,208,240,.22));
  display: flex; align-items: center; justify-content: center; color: var(--navy);
}
.sp-page-intro-icon svg { width: 22px; height: 22px; }
.sp-page-intro-title { margin: 0 0 .15rem; font-size: 1.05rem; font-weight: 700; color: var(--navy); }
.sp-page-intro-desc { margin: 0; font-size: .84rem; color: var(--text-muted); line-height: 1.5; }

.sp-content { display: grid; gap: 1rem; }
.sp-feed-list { display: grid; gap: 1.15rem; }

/* Sections */
.sp-section {
  background: rgba(255,255,255,.88); backdrop-filter: blur(10px);
  border: 1px solid rgba(26, 54, 93, .08); border-radius: 20px;
  box-shadow: 0 12px 36px rgba(26, 54, 93, .06);
  overflow: hidden;
}
.sp-section-head {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid rgba(26, 54, 93, .06);
  background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.6));
}
.sp-section-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(201,162,39,.18), rgba(168,208,240,.25));
  display: flex; align-items: center; justify-content: center; color: var(--navy);
}
.sp-section-icon svg { width: 20px; height: 20px; }
.sp-section-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--navy); }
.sp-section-body { padding: 1.25rem; }

.sp-panel { padding: 1.5rem; border-radius: 20px; }
.sp-panel-glass {
  background: rgba(255,255,255,.9); border: 1px solid rgba(26, 54, 93, .08);
  box-shadow: 0 12px 36px rgba(26, 54, 93, .06);
}

/* Empty state */
.sp-empty { text-align: center; padding: 2rem 1rem; }
.sp-empty-icon {
  width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%;
  background: linear-gradient(135deg, rgba(168,208,240,.25), rgba(201,162,39,.15));
  display: flex; align-items: center; justify-content: center; color: var(--navy);
}
.sp-empty-icon svg { width: 32px; height: 32px; }
.sp-empty h4 { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--navy); }
.sp-empty p { margin: 0 auto; max-width: 28rem; font-size: .9rem; color: var(--text-muted); line-height: 1.6; }
.sp-empty-actions { margin-top: 1.25rem; display: flex; justify-content: center; }

/* Profile — full-width international academy layout */
.sp-profile-showcase {
  position: relative; overflow: hidden; border-radius: 24px;
  background: #fff; border: 1px solid rgba(94, 179, 224, .35);
  box-shadow: 0 16px 40px rgba(126, 200, 232, .15); width: 100%;
}
.sp-profile-showcase-cover {
  position: relative; height: clamp(140px, 18vw, 200px);
  background: linear-gradient(125deg, #89c4e8 0%, #b8dff5 50%, #d4ecfa 100%);
}
.sp-profile-showcase-pattern {
  position: absolute; inset: 0; opacity: .12;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.4) 0, transparent 45%),
    linear-gradient(90deg, transparent 0%, rgba(201,162,39,.3) 50%, transparent 100%);
}
.sp-profile-showcase-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.sp-profile-showcase-glow-1 { width: 280px; height: 280px; background: #c9a227; top: -120px; inset-inline-end: 5%; opacity: .35; }
.sp-profile-showcase-glow-2 { width: 220px; height: 220px; background: #6eb5ff; bottom: -100px; inset-inline-start: 15%; opacity: .2; }
.sp-profile-showcase-body {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  margin-top: -56px; position: relative; z-index: 1;
}
.sp-profile-showcase-main { display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.sp-profile-showcase-avatar-ring {
  width: clamp(110px, 12vw, 140px); height: clamp(110px, 12vw, 140px); flex-shrink: 0;
  padding: 4px; border-radius: 50%;
  background: linear-gradient(135deg, #89c4e8, #b8dff5);
  box-shadow: 0 12px 32px rgba(126, 200, 232, .25);
}
.sp-profile-showcase-avatar-img,
.sp-profile-showcase-avatar-initial {
  width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef4fa, #fff8e8); border: 4px solid #fff;
}
.sp-profile-showcase-avatar-img { object-fit: cover; }
.sp-profile-showcase-avatar-initial { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--navy); }
.sp-profile-showcase-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(201,162,39,.14); color: #8a6d12; margin-bottom: .5rem;
}
.sp-profile-showcase-badge svg { width: 13px; height: 13px; }
.sp-profile-showcase-name {
  margin: 0 0 .35rem; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; color: var(--navy); line-height: 1.2;
}
.sp-profile-showcase-email {
  margin: 0; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; color: var(--text-muted);
}
.sp-profile-showcase-email svg { width: 15px; height: 15px; opacity: .65; }
.sp-profile-showcase-chips {
  display: flex; flex-wrap: wrap; gap: .55rem; align-self: flex-end;
}
.sp-profile-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(26,54,93,.1);
  box-shadow: 0 6px 20px rgba(26,54,93,.06);
  font-size: .84rem; font-weight: 600; color: var(--navy);
}
.sp-profile-chip svg { width: 16px; height: 16px; color: #2d6a9f; }
.sp-profile-chip-gold { border-color: rgba(201,162,39,.28); background: linear-gradient(135deg, rgba(255,251,235,.95), #fff); }
.sp-profile-chip-gold svg { color: #c9a227; }

.sp-profile-grid {
  display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 1.5rem; align-items: start;
}
.sp-profile-main .sp-section { height: 100%; }
.sp-profile-side .sp-section { position: sticky; top: 1rem; }
.sp-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.sp-info-grid-wide { grid-template-columns: repeat(3, 1fr); }
.sp-info-tile {
  display: flex; align-items: flex-start; gap: .85rem; padding: 1.1rem 1.15rem;
  border-radius: 16px; background: linear-gradient(145deg, #fff, rgba(248,250,252,.9));
  border: 1px solid rgba(26, 54, 93, .07); transition: .2s;
  box-shadow: 0 4px 16px rgba(26,54,93,.04);
}
.sp-info-tile:hover {
  border-color: rgba(201, 162, 39, .3);
  box-shadow: 0 10px 28px rgba(26, 54, 93, .08);
  transform: translateY(-2px);
}
.sp-info-tile-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(15,35,65,.08), rgba(201,162,39,.14));
  display: flex; align-items: center; justify-content: center; color: var(--navy);
}
.sp-info-tile-icon svg { width: 20px; height: 20px; }
.sp-info-tile-label {
  display: block; font-size: .7rem; font-weight: 700; color: var(--text-muted);
  margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .04em;
}
.sp-info-tile-value { display: block; font-size: 1rem; font-weight: 600; color: var(--navy); word-break: break-word; }

.sp-upload-form { display: grid; gap: 1rem; }
.sp-upload-form-side { gap: 1.15rem; }
.sp-upload-zone { cursor: pointer; display: block; position: relative; }
.sp-upload-zone input { position: absolute; opacity: 0; width: 0; height: 0; }
.sp-upload-zone-inner {
  padding: 2.25rem 1.5rem; border-radius: 18px; text-align: center;
  border: 2px dashed rgba(201,162,39,.25); background: linear-gradient(180deg, rgba(255,251,235,.4), rgba(248,250,252,.8));
  transition: .2s;
}
.sp-upload-zone-premium .sp-upload-zone-inner { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sp-upload-zone:hover .sp-upload-zone-inner { border-color: rgba(201, 162, 39, .55); background: rgba(255,251,235,.65); }
.sp-upload-zone-inner svg { width: 36px; height: 36px; color: #8a6d12; margin-bottom: .65rem; }
.sp-upload-zone-inner span { display: block; font-weight: 600; color: var(--navy); margin-bottom: .3rem; font-size: .95rem; }
.sp-upload-zone-inner small { color: var(--text-muted); font-size: .78rem; }
.sp-upload-btn { justify-self: start; }
.sp-upload-btn-full { width: 100%; justify-content: center; }

/* Legacy profile aliases */
.sp-profile-banner, .sp-profile-layout { display: contents; }

/* Supervisor showcase */
.sp-supervisor-showcase { display: flex; justify-content: center; padding: .5rem 0 1rem; }
.sp-supervisor-card {
  position: relative; width: min(100%, 480px); text-align: center;
  padding: 2.5rem 2rem 2rem; border-radius: 24px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(201, 162, 39, .2);
  box-shadow: 0 24px 56px rgba(26, 54, 93, .1);
}
.sp-supervisor-card-glow {
  position: absolute; inset: -1px; border-radius: 24px; pointer-events: none;
  background: linear-gradient(135deg, rgba(201,162,39,.15), transparent 40%, rgba(168,208,240,.12));
}
.sp-supervisor-avatar-ring {
  width: 132px; height: 132px; margin: 0 auto 1rem; padding: 4px; border-radius: 50%;
  background: linear-gradient(135deg, #c9a227, #f4e4b8, #1a365d);
}
.sp-supervisor-avatar {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  background: linear-gradient(135deg, var(--pastel-blue), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 2.75rem; font-weight: 700; color: var(--navy);
}
.sp-supervisor-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 700; padding: .3rem .75rem; border-radius: 999px;
  background: rgba(201, 162, 39, .15); color: #8a6d12; margin-bottom: .75rem;
}
.sp-supervisor-name { margin: 0 0 .35rem; font-size: 1.5rem; color: var(--navy); }
.sp-supervisor-title { margin: 0 0 1rem; font-size: .95rem; font-weight: 600; color: #8a6d12; }
.sp-supervisor-bio { text-align: start; font-size: .9rem; line-height: 1.7; color: var(--text-muted); padding: 1rem; border-radius: 14px; background: rgba(248,250,252,.8); }

/* Notifications */
.sp-toolbar-form { margin-bottom: 1rem; }
.sp-notifications-list { display: grid; gap: .65rem; }
.sp-notification-link { text-decoration: none; color: inherit; display: block; }
.sp-notification-item {
  display: flex; gap: .85rem; padding: 1rem 1.1rem; border-radius: 14px;
  background: rgba(248,250,252,.85); border: 1px solid rgba(26, 54, 93, .06);
  transition: .2s;
}
.sp-notification-link:hover .sp-notification-item { border-color: rgba(201, 162, 39, .3); transform: translateY(-1px); }
.sp-notification-item.is-unread { background: linear-gradient(135deg, rgba(255,251,235,.9), rgba(248,250,252,.9)); border-color: rgba(201, 162, 39, .35); }
.sp-notification-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .45rem; flex-shrink: 0; background: rgba(26,54,93,.15); }
.sp-notification-item.is-unread .sp-notification-dot { background: #c9a227; box-shadow: 0 0 0 4px rgba(201,162,39,.2); }
.sp-notification-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
.sp-notification-head strong { color: var(--navy); font-size: .92rem; }
.sp-notification-new { font-size: .65rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; background: #c9a227; color: #fff; }
.sp-notification-body p { margin: 0 0 .35rem; font-size: .85rem; color: var(--text-muted); line-height: 1.5; }
.sp-notification-body time { font-size: .75rem; color: var(--text-muted); }

/* Complaints */
.sp-complaints-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.sp-form { display: grid; gap: 1rem; }
.sp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sp-label { display: flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--navy); margin-bottom: .35rem; }
.sp-label svg { width: 14px; height: 14px; opacity: .6; }
.sp-input {
  width: 100%; padding: .7rem .9rem; border-radius: 12px;
  border: 1px solid rgba(26, 54, 93, .12); background: #fff;
  font: inherit; color: var(--navy); transition: .2s;
}
.sp-input:focus { outline: none; border-color: rgba(201, 162, 39, .55); box-shadow: 0 0 0 3px rgba(201, 162, 39, .12); }
.sp-textarea { min-height: 120px; resize: vertical; }
.sp-complaints-list { display: grid; gap: .75rem; }
.sp-complaint-card {
  padding: 1rem; border-radius: 14px; background: rgba(248,250,252,.9);
  border: 1px solid rgba(26, 54, 93, .06);
}
.sp-complaint-card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.sp-complaint-card time { font-size: .78rem; color: var(--text-muted); }
.sp-complaint-card > p { margin: .5rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--navy); }
.sp-complaint-reply { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed rgba(26, 54, 93, .12); }
.sp-complaint-reply span { font-size: .72rem; font-weight: 700; color: #8a6d12; text-transform: uppercase; letter-spacing: .03em; }
.sp-complaint-reply p { margin: .35rem 0 0; font-size: .85rem; line-height: 1.55; color: var(--navy); }

/* Password */
.sp-password-center { max-width: 520px; margin-inline: auto; }
.sp-password-form { max-width: 100%; }
.sp-password-hint { margin: -.25rem 0 .5rem; font-size: .78rem; color: var(--text-muted); }
.sp-password-submit { width: 100%; justify-content: center; }

/* Portal password change */
.portal-password-wrap {
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}
.portal-password-wrap-settings { max-width: 620px; }
.portal-password-card {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 22px;
  border: 1px solid rgba(94, 179, 224, .3);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 16px 40px rgba(126, 200, 232, .14);
}
.portal-password-card-head {
  display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem;
}
.portal-password-card-icon {
  width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(137, 196, 232, .35), rgba(184, 223, 245, .5));
  display: flex; align-items: center; justify-content: center; color: #0369a1;
}
.portal-password-card-icon svg { width: 24px; height: 24px; }
.portal-password-card-title { margin: 0 0 .25rem; font-size: 1.1rem; font-weight: 700; color: #111; }
.portal-password-card-desc { margin: 0; font-size: .85rem; color: #6b7280; line-height: 1.5; }
.portal-password-alert { margin-bottom: 1rem; }
.portal-password-fields { display: grid; gap: 1rem; }
.portal-password-field { margin: 0; }
.portal-password-label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600; color: #111; margin-bottom: .45rem;
}
.portal-password-label svg { width: 15px; height: 15px; color: #0369a1; }
.portal-password-input-wrap {
  position: relative; display: flex; align-items: center;
}
.portal-password-input {
  width: 100%; height: 46px; padding: .65rem 2.85rem .65rem 1rem;
  border-radius: 14px; border: 1px solid rgba(94, 179, 224, .35);
  font: inherit; font-size: .92rem; color: #111; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
body.rtl .portal-password-input { padding: .65rem 1rem .65rem 2.85rem; }
.portal-password-input:focus {
  outline: none; border-color: #5eb3e0;
  box-shadow: 0 0 0 3px rgba(184, 223, 245, .55);
}
.portal-password-toggle {
  position: absolute; inset-inline-end: .55rem; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; border-radius: 10px;
  background: rgba(184, 223, 245, .35); color: #0369a1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: .2s;
}
.portal-password-toggle:hover { background: #b8dff5; }
.portal-password-toggle svg { width: 18px; height: 18px; }
.portal-password-hint { margin: -.15rem 0 0; font-size: .78rem; color: #6b7280; }
.portal-password-submit { width: 100%; justify-content: center; margin-top: .25rem; }

.post-comment-reply-btn {
  margin-inline-start: .35rem; padding: .15rem .55rem; border-radius: 999px;
  border: 1px solid rgba(94, 179, 224, .4); background: rgba(184, 223, 245, .35);
  color: #0369a1; font-size: .72rem; font-weight: 700; cursor: pointer; transition: .2s;
}
.post-comment-reply-btn:hover { background: #b8dff5; }
.post-comment-reply-form-wrap {
  margin-top: .65rem; padding: .75rem; border-radius: 12px;
  background: rgba(232, 244, 252, .75); border: 1px solid rgba(94, 179, 224, .25);
}
.post-comment-reply-form-wrap.is-hidden { display: none; }
.post-comment-reply-to { margin: 0 0 .5rem; font-size: .8rem; color: #374151; }
.post-comment-reply { margin-top: .55rem; margin-inline-start: 1.25rem; padding-inline-start: .75rem; border-inline-start: 2px solid rgba(94, 179, 224, .45); }
.sp-alert { border-radius: 12px; margin-bottom: 1rem; }

/* Student portal post feed cards */
.sp-post-card {
  position: relative; overflow: hidden; padding: 0 !important;
  border-radius: 22px !important; border: 1px solid rgba(26,54,93,.1) !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 14px 36px rgba(15,35,65,.07) !important;
}
.sp-post-accent,
.tp-post-accent {
  height: 4px;
  background: linear-gradient(90deg, #89c4e8, #b8dff5 50%, #d4ecfa);
}
.sp-post-author-line strong,
.tp-post-author-line strong,
.sp-post-body,
.tp-post-body,
.sp-section-title,
.tp-section-title,
.sv-section-head h3,
.sp-info-tile-value,
.sv-showcase-name,
.sp-profile-showcase-name { color: #111 !important; }
.sp-post-header { padding: 1.1rem 1.3rem .45rem; margin: 0 !important; }
.sp-post-avatar {
  width: 50px !important; height: 50px !important; font-size: 1.1rem !important;
  background: linear-gradient(135deg, #89c4e8, #b8dff5) !important;
  color: #111 !important; box-shadow: 0 6px 18px rgba(126, 200, 232, .2);
}
.sp-post-author-meta { display: grid; gap: .15rem; }
.sp-post-author-line { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.sp-post-author-line strong { font-size: .98rem; color: var(--navy); }
.sp-post-author-badge {
  display: inline-flex; align-items: center; gap: .25rem; font-size: .66rem; font-weight: 700;
  padding: .12rem .45rem; border-radius: 999px; background: rgba(201,162,39,.14); color: #8a6d12;
}
.sp-post-author-badge svg { width: 11px; height: 11px; }
.sp-post-date {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem !important; color: var(--text-muted) !important;
}
.sp-post-date svg { width: 13px; height: 13px; opacity: .65; }
.sp-post-body {
  padding: .3rem 1.3rem .95rem; font-size: .95rem; line-height: 1.75; color: var(--navy); margin: 0 !important;
}
.sp-post-media { padding: 0 1.3rem; margin: 0 0 .45rem !important; }
.sp-post-interact {
  padding: .7rem 1.3rem 1.1rem; border-top: 1px solid rgba(26,54,93,.06);
  background: linear-gradient(180deg, rgba(248,250,252,.5), rgba(255,255,255,.7));
}
.sp-post-actions { margin: 0 0 .65rem !important; }
.sp-like-btn {
  padding: .48rem .95rem !important; font-weight: 600;
  border: 1px solid rgba(26,54,93,.12) !important;
}
.sp-like-btn.is-liked {
  background: linear-gradient(135deg, rgba(220,53,69,.09), rgba(201,162,39,.05)) !important;
  border-color: rgba(220,53,69,.28) !important; color: #c0392b !important;
}
.sp-comment-pill {
  padding: .42rem .8rem; border-radius: 999px; background: rgba(184, 223, 245, .45);
  color: #111; font-weight: 600;
}
.sp-post-comment-form {
  display: grid !important; gap: .55rem !important; margin: 0 !important;
  grid-template-columns: 1fr auto !important; align-items: end !important;
}
.sp-post-textarea {
  width: 100%; padding: .7rem .95rem; border-radius: 14px; border: 1px solid rgba(26,54,93,.12);
  font: inherit; color: var(--navy); background: #fff; min-height: 68px; resize: vertical;
}
.sp-post-textarea:focus {
  outline: none; border-color: rgba(201,162,39,.45); box-shadow: 0 0 0 3px rgba(201,162,39,.1);
}
.sp-comment-submit { white-space: nowrap; }
.sp-post-comments {
  padding: .95rem 1.3rem 1.15rem !important; margin: 0 !important;
  background: rgba(248,250,252,.55); border-top: 1px solid rgba(26,54,93,.06) !important;
}
.sp-comments-head {
  display: flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700;
  color: var(--navy); margin-bottom: .65rem; letter-spacing: .02em;
}
.sp-comments-head svg { width: 15px; height: 15px; color: #c9a227; }
.sp-post-comment {
  background: #fff !important; border: 1px solid rgba(26,54,93,.07) !important;
  border-radius: 14px !important; padding: .7rem !important;
}
.sp-comment-row { display: flex; gap: .6rem; align-items: flex-start; }
.sp-comment-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(201,162,39,.2), rgba(168,208,240,.2));
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: var(--navy);
}
.sp-comment-content { flex: 1; min-width: 0; }

@media (max-width: 1100px) {
  .sp-info-grid-wide { grid-template-columns: repeat(2, 1fr); }
  .sp-profile-grid { grid-template-columns: 1fr; }
  .sp-profile-side .sp-section { position: static; }
}
@media (max-width: 900px) {
  .sp-complaints-grid { grid-template-columns: 1fr; }
  .sp-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sp-hero-compact { padding: 1rem 1.1rem; border-radius: 16px; }
  .sp-hero-profile { gap: .85rem; }
  .sp-page-intro { flex-direction: column; align-items: flex-start; text-align: start; }
  .sp-post-comment-form { grid-template-columns: 1fr !important; }
  .sp-comment-submit { width: 100%; justify-content: center; }
  .sp-info-grid-wide { grid-template-columns: 1fr; }
  .sp-profile-showcase-body { flex-direction: column; align-items: flex-start; margin-top: -44px; }
  .sp-profile-showcase-main { flex-direction: column; align-items: flex-start; }
  .sp-profile-showcase-chips { align-self: stretch; }
}

/* Legacy aliases */
.student-feed-shell { margin-top: 0; }
.student-feed-empty { text-align: center; padding: 2.5rem 1.5rem; }
.student-feed-empty-icon {
  width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%;
  background: rgba(168, 208, 240, .2); display: flex; align-items: center; justify-content: center; color: var(--navy);
}
.student-feed-empty h4 { margin: 0 0 .5rem; color: var(--navy); }
.student-feed-empty p { margin: 0 0 1rem; font-size: .9rem; color: var(--text-muted); }

/* Supervisor profile + posts */
.supervisor-profile-view { max-width: none; width: 100%; margin: 1.25rem 0 0; }
.supervisor-profile-card { text-align: center; padding: 2rem 1.5rem; }
.supervisor-profile-avatar {
  width: 120px; height: 120px; margin: 0 auto 1rem; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--pastel-blue), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(26, 54, 93, .12);
}
.supervisor-profile-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.supervisor-profile-avatar-initial { font-size: 2.5rem; font-weight: 700; color: var(--navy); }
.supervisor-profile-name { margin: 0 0 .35rem; font-size: 1.35rem; color: var(--navy); }
.supervisor-profile-title { margin: 0 0 1rem; font-size: .9rem; color: var(--gold-dark); font-weight: 600; }
.supervisor-profile-bio { margin: 0; font-size: .9rem; color: var(--text-muted); line-height: 1.6; text-align: start; }
.posts-admin-list { display: grid; gap: 1rem; margin-top: 1rem; }
.posts-admin-item { position: relative; }
.posts-admin-delete { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(26, 54, 93, .08); }
.post-card { padding: 1.25rem; }
.post-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .75rem; }
.post-card-date { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }
.post-card-body { font-size: .95rem; line-height: 1.65; color: var(--navy); margin-bottom: .75rem; }
.post-card-actions { flex-shrink: 0; }
.post-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .65rem; margin: .75rem 0; }
.post-media-item img, .post-media-item video { width: 100%; border-radius: 10px; max-height: 280px; object-fit: cover; background: #000; }
.post-media-embed {
  position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;
  border-radius: 12px; background: #0f172a;
}
.post-media-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px;
}
.post-audience-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.post-audience-chip {
  font-size: .72rem; padding: .2rem .55rem; border-radius: 999px;
  background: rgba(168, 208, 240, .25); color: var(--navy);
}
.post-audience-fieldset { border: 1px solid rgba(26, 54, 93, .12); border-radius: 12px; padding: 1rem; margin: 0; }
.post-audience-fieldset legend { font-weight: 600; color: var(--navy); padding: 0 .35rem; }
.post-audience-hint { font-size: .8rem; color: var(--text-muted); margin: 0 0 .75rem; }
.post-audience-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.post-audience-check { display: flex; align-items: center; gap: .45rem; font-size: .875rem; cursor: pointer; }
.post-audience-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; margin-top: 1rem; }
.post-target { display: none; }
.post-upload-hint { font-size: .8rem; color: var(--text-muted); margin: .35rem 0 0; }
.post-existing-media { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 1rem; }
.post-media-remove { display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .75rem; }
.post-media-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; }
.post-publish-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin: .5rem 0 1rem; }

/* Feed interactions + notifications */
.posts-feed-shell { margin-top: 1rem; }
.posts-feed-list { display: grid; gap: 1.25rem; }
.post-feed-card { padding: 1.25rem; }
.post-feed-header { margin-bottom: .75rem; }
.post-feed-author { display: flex; align-items: center; gap: .75rem; }
.post-feed-author-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pastel-blue), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--navy); flex-shrink: 0;
}
.post-feed-actions { display: flex; align-items: center; gap: 1rem; margin: .75rem 0; flex-wrap: wrap; }
.post-feed-readonly span { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; color: var(--text-muted); }
.post-like-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 999px; border: 1px solid rgba(26, 54, 93, .12);
  background: #fff; color: var(--navy); cursor: pointer; font-size: .85rem; transition: .2s;
}
.post-like-btn:hover { border-color: var(--gold); }
.post-like-btn.is-liked { background: rgba(220, 53, 69, .08); border-color: rgba(220, 53, 69, .35); color: #c0392b; }
.post-like-btn.is-liked svg { fill: currentColor; }
.post-comment-count-label { font-size: .85rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: .35rem; }
.post-comment-form { margin-top: .75rem; display: grid; gap: .5rem; }
.post-comment-form textarea { min-height: 64px; resize: vertical; }
.post-comments-list { margin-top: 1rem; border-top: 1px solid rgba(26, 54, 93, .08); padding-top: .75rem; display: grid; gap: .65rem; }
.post-comment-item { padding: .65rem .75rem; background: rgba(248, 250, 252, .8); border-radius: 10px; }
.post-comment-item.is-highlighted {
  background: rgba(184, 223, 245, .55);
  box-shadow: 0 0 0 2px rgba(94, 179, 224, .45);
  transition: background .3s ease, box-shadow .3s ease;
}
.post-comment-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.post-comment-date { font-size: .75rem; color: var(--text-muted); margin-inline-start: auto; }
.post-comment-role { font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(168, 208, 240, .35); color: var(--navy); }
.post-comment-body { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--navy); }
.post-feed-notice { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.25rem; margin-bottom: 1rem; font-size: .875rem; color: var(--navy); }
.post-feed-notice svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-dark); margin-top: .1rem; }
.header-notif-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(26, 54, 93, .1);
  background: rgba(255,255,255,.85); color: var(--navy); margin-inline-end: .75rem;
  transition: .2s;
}
.header-notif-bell:hover { border-color: var(--gold); color: var(--gold-dark); }
.header-notif-badge {
  position: absolute; top: -2px; inset-inline-end: -2px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: #dc3545; color: #fff;
  font-size: .65rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.header-notif-badge.is-hidden { display: none; }
.notifications-list { display: grid; gap: .65rem; }
.notification-link { text-decoration: none; color: inherit; display: block; }
.notification-item {
  padding: .85rem 1rem; border-radius: 12px; border: 1px solid rgba(26, 54, 93, .08);
  background: rgba(255,255,255,.7); transition: .2s;
}
.notification-link:hover .notification-item { border-color: var(--gold-light); }
.notification-item.is-unread { border-color: rgba(212, 175, 55, .45); background: rgba(255, 251, 235, .6); }
.notification-item-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.notification-item-msg { margin: .35rem 0 0; font-size: .85rem; color: var(--text-muted); }
.notification-item-date { font-size: .75rem; color: var(--text-muted); margin-top: .35rem; display: block; }
.complaints-student-list { display: grid; gap: .75rem; }
.complaint-student-item { padding: 1rem; }
.complaint-student-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.complaint-student-date { font-size: .8rem; color: var(--text-muted); margin: .25rem 0; }
.complaint-student-preview { font-size: .875rem; color: var(--navy); margin: 0; line-height: 1.5; }
.complaint-student-note { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed rgba(26, 54, 93, .12); }
.complaint-student-note p { margin: .25rem 0 0; font-size: .85rem; white-space: pre-wrap; }

.post-comment-role-coord { background: rgba(137, 196, 232, .35) !important; color: #111 !important; }
.post-comments-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .48rem .95rem; border-radius: 999px; border: 1px solid rgba(94, 179, 224, .35);
  background: rgba(184, 223, 245, .35); color: #111; cursor: pointer; font-size: .85rem; font-weight: 600; transition: .2s;
}
.post-comments-toggle:hover,
.post-comments-toggle.is-open { background: #b8dff5; border-color: #5eb3e0; }
.post-comments-chevron { width: 16px; height: 16px; transition: transform .2s; }
.post-comments-panel {
  overflow: hidden; max-height: 0; opacity: 0; transition: max-height .3s ease, opacity .25s ease, margin .25s;
  margin-top: 0;
}
.post-comments-panel.is-open {
  max-height: 2000px; opacity: 1; margin-top: .75rem;
}
.post-comments-panel.is-collapsed { max-height: 0; opacity: 0; }
.post-comments-panel .post-comments-list { margin-top: 0; border-top: none; padding-top: 0; }
.post-comments-panel .post-comment-form { margin-top: .75rem; }
.post-admin-interactions {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(94, 179, 224, .25);
  display: grid; gap: 1rem;
}
.post-admin-likes { padding: 1rem; border-radius: 14px; background: rgba(232, 244, 252, .7); border: 1px solid rgba(94, 179, 224, .2); }
.post-likes-summary {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #111;
  margin-bottom: .65rem; background: transparent; border: none; padding: 0; font: inherit;
}
.post-likes-list { list-style: none; display: grid; gap: .45rem; margin: 0; padding: 0; }
.post-like-item {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .55rem .75rem; border-radius: 10px; background: #fff; font-size: .85rem; color: #111;
}
.post-like-item svg { width: 14px; height: 14px; color: #e74c3c; }
.post-like-date { font-size: .75rem; color: #6b7280; margin-inline-start: auto; }
.post-admin-empty { margin: 0; font-size: .85rem; color: #6b7280; }
.post-admin-comments .post-comments-panel.is-open { max-height: 3000px; opacity: 1; }

/* ─── Teacher Portal — Premium ───────────────────────────── */
.tp-shell-full,
.sv-shell-full { width: 100%; }
.tp-content-full,
.sv-content-full { width: 100%; }
.tp-shell { display: grid; gap: 1rem; }
.tp-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.tp-hero-glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .4; }
.tp-hero-glow-1 { width: 200px; height: 200px; background: #6eb5ff; top: -70px; inset-inline-end: -30px; }
.tp-hero-glow-2 { width: 160px; height: 160px; background: #c9a227; bottom: -50px; inset-inline-start: 8%; opacity: .22; }
.tp-hero-inner { position: relative; z-index: 1; display: grid; gap: 1rem; }
.tp-hero-profile { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.tp-hero-avatar-ring { padding: 4px; border-radius: 50%; background: linear-gradient(135deg, #89c4e8, #b8dff5); }
.tp-hero-avatar {
  width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.65);
  display: flex; align-items: center; justify-content: center; font-size: 1.85rem; font-weight: 700; color: #111;
  overflow: hidden;
}
.tp-hero-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.tp-hero-avatar-initial { font-weight: 700; color: #111; }
.tp-avatar-upload-form { margin: 0; }
.tp-hero-avatar-editable {
  position: relative; display: inline-block; cursor: pointer; margin: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tp-hero-avatar-editable:hover { transform: translateY(-1px); }
.tp-hero-avatar-editable .tp-avatar-input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.tp-hero-avatar-edit {
  position: absolute; inset: 4px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 17, 17, .45); color: #fff; opacity: 0;
  transition: opacity .2s ease;
}
.tp-hero-avatar-editable:hover .tp-hero-avatar-edit,
.tp-hero-avatar-editable:focus-within .tp-hero-avatar-edit { opacity: 1; }
.tp-hero-avatar-edit svg { width: 22px; height: 22px; }
.tp-page-head { padding-top: .5rem; border-top: 1px solid rgba(94, 179, 224, .25); }
.tp-content { display: grid; gap: 1rem; }
.tp-notice {
  display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.2rem;
  border-radius: 16px; background: linear-gradient(135deg, rgba(110,181,255,.1), rgba(255,255,255,.9));
  border: 1px solid rgba(45, 106, 159, .15); font-size: .875rem; color: var(--navy);
}
.tp-notice svg { width: 20px; height: 20px; flex-shrink: 0; color: #2d6a9f; margin-top: .1rem; }
.tp-notice p { margin: 0; line-height: 1.55; }
.tp-panel { padding: 1.5rem; border-radius: 20px; background: rgba(255,255,255,.9); border: 1px solid rgba(26,54,93,.08); box-shadow: 0 12px 32px rgba(26,54,93,.06); }
.tp-empty { text-align: center; padding: 2rem 1rem; }
.tp-empty-icon { width: 68px; height: 68px; margin: 0 auto 1rem; border-radius: 50%; background: linear-gradient(135deg, rgba(110,181,255,.2), rgba(201,162,39,.12)); display: flex; align-items: center; justify-content: center; color: var(--navy); }
.tp-empty h4 { margin: 0 0 .5rem; color: var(--navy); }
.tp-empty p { margin: 0; color: var(--text-muted); font-size: .9rem; }
.tp-panel-glass {
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border: 1px solid rgba(110, 181, 255, .15);
}

.tp-feed-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
}
.tp-feed-stat {
  display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem;
  border-radius: 16px; background: rgba(255,255,255,.92);
  border: 1px solid rgba(45,106,159,.1); box-shadow: 0 8px 24px rgba(26,54,93,.05);
}
.tp-feed-stat > svg { width: 22px; height: 22px; color: #2d6a9f; flex-shrink: 0; }
.tp-feed-stat strong { display: block; font-size: 1rem; color: var(--navy); line-height: 1.2; }
.tp-feed-stat span { font-size: .75rem; color: var(--text-muted); }

.tp-section {
  background: rgba(255,255,255,.92); border: 1px solid rgba(26,54,93,.08);
  border-radius: 20px; box-shadow: 0 12px 36px rgba(26,54,93,.06); overflow: hidden;
}
.tp-section-head {
  display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(26,54,93,.06);
  background: linear-gradient(180deg, rgba(232,244,255,.55), #fff);
}
.tp-section-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(110,181,255,.22), rgba(201,162,39,.12));
  display: flex; align-items: center; justify-content: center; color: var(--navy);
}
.tp-section-icon svg { width: 20px; height: 20px; }
.tp-section-head h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--navy); }
.tp-section-body { padding: 1.25rem; }

.tp-notif-toolbar { margin-bottom: 1rem; }
.tp-notifications-list { display: grid; gap: .65rem; }
.tp-notification-link { text-decoration: none; color: inherit; display: block; }
.tp-notification-item {
  display: flex; gap: .75rem; padding: .9rem 1rem; border-radius: 14px;
  background: rgba(248,250,252,.85); border: 1px solid rgba(26,54,93,.08); transition: .2s ease;
}
.tp-notification-link:hover .tp-notification-item { border-color: rgba(110,181,255,.35); transform: translateY(-1px); }
.tp-notification-item.is-unread {
  background: linear-gradient(135deg, rgba(232,244,255,.9), rgba(248,250,252,.9));
  border-color: rgba(45,106,159,.28);
}
.tp-notification-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .45rem; flex-shrink: 0; background: rgba(26,54,93,.15); }
.tp-notification-item.is-unread .tp-notification-dot { background: #2d6a9f; box-shadow: 0 0 0 4px rgba(110,181,255,.2); }
.tp-notification-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
.tp-notification-head strong { color: var(--navy); font-size: .92rem; }
.tp-notification-new { font-size: .65rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; background: #2d6a9f; color: #fff; }
.tp-notification-body p { margin: 0 0 .35rem; font-size: .85rem; color: var(--text-muted); line-height: 1.5; }
.tp-notification-body time { font-size: .75rem; color: var(--text-muted); }

.tp-feed-list { display: grid; gap: 1.25rem; }

/* Teacher posts feed cards */
.tp-post-card {
  position: relative; overflow: hidden; padding: 0 !important;
  border-radius: 22px !important; border: 1px solid rgba(94, 179, 224, .25) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 16px 40px rgba(126, 200, 232, .12) !important;
}
.tp-post-header { padding: 1.15rem 1.35rem .5rem; margin: 0 !important; }
.tp-post-author { align-items: center; }
.tp-post-avatar {
  width: 52px !important; height: 52px !important; font-size: 1.15rem !important;
  background: linear-gradient(135deg, #89c4e8, #b8dff5) !important;
  color: #111 !important; box-shadow: 0 8px 20px rgba(126, 200, 232, .2);
}
.tp-post-author-meta { display: grid; gap: .2rem; }
.tp-post-author-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tp-post-author-line strong { font-size: 1rem; color: var(--navy); }
.tp-post-author-badge {
  display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 700;
  padding: .15rem .5rem; border-radius: 999px; background: rgba(201,162,39,.14); color: #8a6d12;
}
.tp-post-author-badge svg { width: 12px; height: 12px; }
.tp-post-date {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem !important; color: var(--text-muted) !important;
}
.tp-post-date svg { width: 14px; height: 14px; opacity: .7; }
.tp-post-body {
  padding: .35rem 1.35rem 1rem; font-size: .96rem; line-height: 1.75; color: var(--navy); margin: 0 !important;
}
.tp-post-media { padding: 0 1.35rem; margin: 0 0 .5rem !important; }
.tp-post-interact {
  padding: .75rem 1.35rem 1.15rem; border-top: 1px solid rgba(26,54,93,.06);
  background: linear-gradient(180deg, rgba(248,250,252,.4), rgba(255,255,255,.6));
}
.tp-post-actions { margin: 0 0 .75rem !important; }
.tp-like-btn {
  padding: .5rem 1rem !important; font-weight: 600;
  border: 1px solid rgba(45,106,159,.15) !important; background: #fff !important;
}
.tp-like-btn:hover { border-color: rgba(201,162,39,.45) !important; }
.tp-like-btn.is-liked {
  background: linear-gradient(135deg, rgba(220,53,69,.1), rgba(201,162,39,.06)) !important;
  border-color: rgba(220,53,69,.3) !important; color: #c0392b !important;
}
.tp-comment-pill {
  padding: .45rem .85rem; border-radius: 999px; background: rgba(110,181,255,.1);
  color: #2d6a9f; font-weight: 600;
}
.tp-post-comment-form {
  display: grid !important; gap: .6rem !important; margin: 0 !important;
  grid-template-columns: 1fr auto !important; align-items: end !important;
}
.tp-post-textarea {
  width: 100%; padding: .75rem 1rem; border-radius: 14px; border: 1px solid rgba(45,106,159,.15);
  font: inherit; color: var(--navy); background: #fff; min-height: 72px; resize: vertical;
}
.tp-post-textarea:focus {
  outline: none; border-color: rgba(45,106,159,.4);
  box-shadow: 0 0 0 3px rgba(110,181,255,.15);
}
.tp-comment-submit { white-space: nowrap; }
.tp-post-comments {
  padding: 1rem 1.35rem 1.25rem !important; margin: 0 !important;
  background: rgba(248,250,252,.5); border-top: 1px solid rgba(26,54,93,.06) !important;
}
.tp-comments-head {
  display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700;
  color: var(--navy); margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .03em;
}
.tp-comments-head svg { width: 16px; height: 16px; color: #2d6a9f; }
.tp-post-comment {
  background: #fff !important; border: 1px solid rgba(26,54,93,.08) !important;
  border-radius: 14px !important; padding: .75rem !important;
}
.tp-comment-row { display: flex; gap: .65rem; align-items: flex-start; }
.tp-comment-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(110,181,255,.25), rgba(201,162,39,.15));
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: var(--navy);
}
.tp-comment-content { flex: 1; min-width: 0; }
.post-comment-role-student { background: rgba(110,181,255,.2) !important; }

@media (max-width: 768px) {
  .tp-feed-summary { grid-template-columns: 1fr; }
  .tp-post-comment-form { grid-template-columns: 1fr !important; }
  .tp-comment-submit { width: 100%; justify-content: center; }
}

/* ─── Supervisor Portal — Premium ──────────────────────────── */
.sv-shell { display: grid; gap: 1rem; }
.sv-hero-icon svg { width: 28px; height: 28px; color: #0369a1; }
.sv-content { display: grid; gap: 1.25rem; }
.sv-quick-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.sv-profile-showcase,
.sp-profile-showcase {
  position: relative; overflow: hidden; border-radius: 24px;
  background: #fff; border: 1px solid rgba(94, 179, 224, .35);
  box-shadow: 0 16px 40px rgba(126, 200, 232, .15); width: 100%;
}
.sv-profile-showcase-cover,
.sp-profile-showcase-cover {
  position: relative;
  height: clamp(120px, 14vw, 180px);
  background: linear-gradient(125deg, #89c4e8 0%, #b8dff5 50%, #d4ecfa 100%);
}
.sv-profile-showcase-pattern,
.sp-profile-showcase-pattern {
  position: absolute; inset: 0; opacity: .25;
  background: radial-gradient(circle at 25% 50%, #fff 0, transparent 50%);
}
.sv-profile-showcase-body,
.sp-profile-showcase-body {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  margin-top: -52px; position: relative; z-index: 1;
}
.sv-profile-showcase-main,
.sp-profile-showcase-main { display: flex; align-items: flex-end; gap: 1.25rem; flex-wrap: wrap; }
.sv-profile-showcase-info { color: #111; }
.sv-profile-showcase-bio-wrap { flex: 1; min-width: 280px; max-width: none; }
.sv-profile-grid { width: 100%; }
.sv-showcase-avatar-ring {
  width: clamp(100px, 10vw, 128px); height: clamp(100px, 10vw, 128px); flex-shrink: 0;
  padding: 4px; border-radius: 50%;
  background: linear-gradient(135deg, #89c4e8, #b8dff5); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(126, 200, 232, .25);
}
.sv-showcase-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid #fff; }
.sv-showcase-avatar-initial { font-size: 2.5rem; font-weight: 700; color: #111; }
.sv-showcase-badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700;
  padding: .3rem .75rem; border-radius: 999px; background: rgba(137, 196, 232, .3); color: #111; margin-bottom: .65rem;
}
.sv-showcase-name { margin: 0 0 .3rem; font-size: clamp(1.4rem, 2.5vw, 2rem); color: #111; }
.sv-showcase-title { margin: 0; font-size: .95rem; font-weight: 600; color: #374151; }
.sv-showcase-bio { text-align: start; font-size: .9rem; line-height: 1.7; color: #111; padding: 1rem; border-radius: 14px; background: rgba(232, 244, 252, .7); }
.sv-showcase-bio h4 { margin: 0 0 .5rem; font-size: .8rem; color: #374151; }

.sv-section {
  background: rgba(255,255,255,.9); border: 1px solid rgba(94, 179, 224, .25);
  border-radius: 20px; box-shadow: 0 12px 36px rgba(126, 200, 232, .1); overflow: hidden;
}
.sv-section-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(94, 179, 224, .2); background: linear-gradient(180deg, rgba(232, 244, 252, .7), #fff); }
.sv-section-toggle {
  width: 100%; border: none; background: transparent; text-align: inherit; cursor: pointer;
  font: inherit; color: inherit; display: flex; align-items: center; gap: .75rem;
}
.sv-section-toggle:hover { background: rgba(184, 223, 245, .2); }
.sv-section-chevron { width: 18px; height: 18px; margin-inline-start: auto; color: #0369a1; transition: transform .2s; flex-shrink: 0; }
.sv-section-collapsible .sv-section-head { border-bottom: none; }
.sv-section-collapsible:has(.sv-section-panel.is-open) .sv-section-head,
.sv-section-collapsible:has(.sv-section-toggle[aria-expanded="true"]) .sv-section-head {
  border-bottom: 1px solid rgba(94, 179, 224, .2);
}
.sv-section-panel {
  overflow: hidden; max-height: 0; opacity: 0; transition: max-height .3s ease, opacity .25s ease;
}
.sv-section-panel.is-open { max-height: 3000px; opacity: 1; }
.sv-section-panel.is-collapsed { max-height: 0; opacity: 0; }
.sv-section-collapsible .sv-section-panel.is-open { padding: 1.25rem; }
.sv-section-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, rgba(137, 196, 232, .35), rgba(184, 223, 245, .25)); display: flex; align-items: center; justify-content: center; color: #0369a1; }
.sv-section-icon svg { width: 20px; height: 20px; }
.sv-section-head h3 { margin: 0; font-size: 1rem; font-weight: 700; color: #111; }
.sv-section-body { padding: 1.25rem; }
.sv-label { display: block; font-size: .8rem; font-weight: 600; color: #111; margin-bottom: .35rem; }
.sv-input {
  width: 100%; padding: .7rem .9rem; border-radius: 12px; border: 1px solid rgba(94, 179, 224, .3);
  font: inherit; color: #111; background: #fff;
}
.sv-input:focus { outline: none; border-color: #5eb3e0; box-shadow: 0 0 0 3px rgba(184, 223, 245, .5); }
.sv-textarea { min-height: 100px; resize: vertical; }
.sv-form { display: grid; gap: 1rem; }
.sv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sv-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.sv-panel { padding: 1.5rem; border-radius: 20px; background: rgba(255,255,255,.9); border: 1px solid rgba(26,54,93,.08); }
.sv-empty { text-align: center; padding: 2rem 1rem; }
.sv-empty-icon { width: 68px; height: 68px; margin: 0 auto 1rem; border-radius: 50%; background: linear-gradient(135deg, rgba(201,162,39,.18), rgba(139,92,246,.1)); display: flex; align-items: center; justify-content: center; color: var(--navy); }
.sv-empty h4 { margin: 0 0 .5rem; color: var(--navy); }
.sv-empty p { margin: 0 0 1rem; color: var(--text-muted); }
.sv-posts-list { display: grid; gap: 1rem; }
.sv-post-admin-card {
  padding: 1.25rem; border-radius: 20px; background: rgba(255,255,255,.92);
  border: 1px solid rgba(26,54,93,.08); box-shadow: 0 12px 32px rgba(42,31,77,.06);
}
.sv-post-admin-card .post-card { padding: 0; box-shadow: none; background: transparent; border: none; }
.sv-post-delete { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid rgba(26,54,93,.08); }

.sv-post-comment-form {
  display: grid !important; gap: .6rem !important; margin: 0 !important;
  grid-template-columns: 1fr auto !important; align-items: end !important;
}
.sv-post-textarea {
  width: 100%; padding: .75rem 1rem; border-radius: 14px; border: 1px solid rgba(94, 179, 224, .3);
  font: inherit; color: #111; background: #fff; min-height: 72px; resize: vertical;
}
.sv-post-textarea:focus {
  outline: none; border-color: #5eb3e0; box-shadow: 0 0 0 3px rgba(184, 223, 245, .45);
}
.sv-comment-row { display: flex; gap: .75rem; align-items: flex-start; }
.sv-comment-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #89c4e8, #b8dff5); color: #111;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.sv-comment-content { flex: 1; min-width: 0; }
.post-card-body,
.post-comment-body { color: #111; }

.sv-notif-toolbar { margin-bottom: 1rem; }
.sv-notifications-list { display: grid; gap: .65rem; }
.sv-notification-link { text-decoration: none; color: inherit; display: block; }
.sv-notification-item {
  display: flex; gap: .75rem; padding: .9rem 1rem; border-radius: 14px;
  background: rgba(248,250,252,.85); border: 1px solid rgba(26,54,93,.08); transition: .2s ease;
}
.sv-notification-link:hover .sv-notification-item { border-color: rgba(201, 162, 39, .3); transform: translateY(-1px); }
.sv-notification-item.is-unread { background: linear-gradient(135deg, rgba(255,251,235,.9), rgba(248,250,252,.9)); border-color: rgba(201, 162, 39, .35); }
.sv-notification-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .45rem; flex-shrink: 0; background: rgba(26,54,93,.15); }
.sv-notification-item.is-unread .sv-notification-dot { background: #c9a227; box-shadow: 0 0 0 4px rgba(201,162,39,.2); }
.sv-notification-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
.sv-notification-head strong { color: var(--navy); font-size: .92rem; }
.sv-notification-new { font-size: .65rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; background: #c9a227; color: #fff; }
.sv-notification-body p { margin: 0 0 .35rem; font-size: .85rem; color: var(--text-muted); line-height: 1.5; }
.sv-notification-body time { font-size: .75rem; color: var(--text-muted); }

/* Supervisor post editor */
.sv-post-editor { display: grid; gap: 1.25rem; width: 100%; }
.sv-post-editor-section {
  background: rgba(255,255,255,.96); border: 1px solid rgba(94, 179, 224, .28);
  border-radius: 22px; box-shadow: 0 14px 36px rgba(126, 200, 232, .12); overflow: hidden;
}
.sv-post-editor-head {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.35rem;
  border-bottom: 1px solid rgba(94, 179, 224, .18);
  background: linear-gradient(180deg, rgba(232, 244, 252, .75), rgba(255,255,255,.9));
}
.sv-post-editor-icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(137, 196, 232, .4), rgba(184, 223, 245, .5));
  display: flex; align-items: center; justify-content: center; color: #0369a1;
}
.sv-post-editor-icon svg { width: 22px; height: 22px; }
.sv-post-editor-head h3 { margin: 0 0 .2rem; font-size: 1.05rem; font-weight: 700; color: #111; }
.sv-post-editor-head p { margin: 0; font-size: .82rem; color: #6b7280; line-height: 1.5; }
.sv-post-editor-body { padding: 1.25rem 1.35rem 1.35rem; display: grid; gap: 1rem; }
.sv-post-editor-label { display: block; font-size: .82rem; font-weight: 600; color: #111; margin-bottom: .45rem; }
.sv-post-editor-textarea,
.sv-post-editor-input {
  width: 100%; padding: .85rem 1rem; border-radius: 14px; border: 1px solid rgba(94, 179, 224, .35);
  font: inherit; font-size: .92rem; color: #111; background: #fff; transition: .2s;
}
.sv-post-editor-textarea {
  min-height: 180px; resize: vertical; line-height: 1.7;
}
.sv-post-editor-textarea:focus,
.sv-post-editor-input:focus {
  outline: none; border-color: #5eb3e0; box-shadow: 0 0 0 3px rgba(184, 223, 245, .5);
}
.sv-post-audience-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .55rem;
}
.sv-post-audience-pill {
  display: flex; align-items: center; gap: .5rem; padding: .65rem .85rem;
  border-radius: 14px; border: 1px solid rgba(94, 179, 224, .28);
  background: rgba(248, 251, 254, .9); cursor: pointer; transition: .2s;
}
.sv-post-audience-pill:hover { border-color: #89c4e8; background: #fff; }
.sv-post-audience-pill input { accent-color: #0369a1; }
.sv-post-audience-pill span { font-size: .85rem; font-weight: 600; color: #111; }
.sv-post-audience-pill:has(input:checked) {
  border-color: #5eb3e0; background: linear-gradient(135deg, rgba(184, 223, 245, .45), #fff);
  box-shadow: 0 4px 14px rgba(126, 200, 232, .18);
}
.sv-post-target { margin: 0; }
.sv-media-dropzone {
  display: block; border: 2px dashed rgba(94, 179, 224, .45); border-radius: 18px;
  padding: 1.75rem 1.25rem; text-align: center; cursor: pointer; transition: .2s;
  background: rgba(232, 244, 252, .35);
}
.sv-media-dropzone input { display: none; }
.sv-media-dropzone.is-dragover,
.sv-media-dropzone:hover { border-color: #5eb3e0; background: rgba(184, 223, 245, .25); }
.sv-media-dropzone-inner { display: grid; gap: .35rem; justify-items: center; color: #374151; }
.sv-media-dropzone-inner svg { width: 36px; height: 36px; color: #0369a1; }
.sv-media-dropzone-inner strong { font-size: .92rem; color: #111; }
.sv-media-dropzone-inner span { font-size: .78rem; color: #6b7280; }
.sv-media-file-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.sv-media-file-chip {
  padding: .35rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: rgba(184, 223, 245, .45); color: #111; border: 1px solid rgba(94, 179, 224, .3);
}
.sv-video-urls-input { min-height: 88px; font-family: inherit; }
.sv-video-preview-list { display: grid; gap: 1rem; }
.sv-video-preview-item {
  padding: .85rem; border-radius: 14px; border: 1px solid rgba(94, 179, 224, .25);
  background: rgba(248, 251, 254, .9);
}
.sv-video-preview-label { margin: 0 0 .65rem; font-size: .78rem; color: #374151; word-break: break-all; }
.sv-video-preview-item video { width: 100%; border-radius: 12px; max-height: 280px; background: #000; }
.sv-video-preview-embed { margin-top: .25rem; }
.sv-existing-media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .85rem;
}
.sv-existing-media-item {
  position: relative; display: grid; gap: .45rem; padding: .75rem;
  border-radius: 14px; border: 1px solid rgba(94, 179, 224, .25); background: #fff; cursor: pointer;
}
.sv-existing-media-item:has(input:checked) { border-color: #ef4444; background: rgba(254, 242, 242, .6); }
.sv-existing-media-thumb { width: 100%; height: 100px; object-fit: cover; border-radius: 10px; }
.sv-existing-media-embed .post-media-embed { padding-bottom: 56.25%; }
.sv-existing-media-label { font-size: .78rem; font-weight: 600; color: #111; text-align: center; }
.sv-existing-media-remove { font-size: .72rem; color: #dc2626; text-align: center; font-weight: 700; }
.sv-post-editor-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem; border-radius: 18px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(94, 179, 224, .25);
  box-shadow: 0 10px 28px rgba(126, 200, 232, .1);
}
.sv-post-publish-toggle {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: #111; cursor: pointer;
}
.sv-post-publish-toggle span { display: inline-flex; align-items: center; gap: .4rem; }
.sv-post-publish-toggle svg { width: 16px; height: 16px; color: #0369a1; }
.sv-post-editor-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 768px) {
  .tp-hero, .sv-hero { padding: 1.35rem 1.15rem; border-radius: 18px; }
  .tp-hero-profile, .sv-hero-inner { flex-direction: column; text-align: center; }
  .sv-form-grid { grid-template-columns: 1fr; }
}

@media print { .no-print, .sidebar-premium { display: none !important; } .main-content { margin: 0 !important; } }