@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Sora:wght@400;500;600;700&display=swap");

:root {
  --role-prem-ink: #eaf3ff;
  --role-prem-muted: #aec2d9;
  --role-prem-border: rgba(168, 203, 234, 0.34);
  --role-prem-border-soft: rgba(168, 203, 234, 0.22);
  --role-prem-a: #0a162a;
  --role-prem-b: #102845;
  --role-prem-c: #16365c;
  --role-prem-gold: #d8b983;
  --role-prem-gold-soft: rgba(216, 185, 131, 0.3);
  --role-prem-accent: #87c7f5;
  --role-prem-ok: #a8e4bf;
  --role-prem-warn: #f2d298;
  --role-prem-danger: #f6b5bd;
}

/* Teacher Login */
body.teacher-sovereign {
  font-family: "Sora", sans-serif;
  color: var(--role-prem-ink);
  background:
    radial-gradient(1100px 640px at 50% -20%, rgba(120, 175, 221, 0.24), transparent 68%),
    radial-gradient(860px 420px at 88% 10%, rgba(216, 185, 131, 0.16), transparent 72%),
    linear-gradient(155deg, #050f1e 0%, #0b1f36 46%, #123053 100%);
}

body.teacher-sovereign .login-stage {
  border-color: var(--role-prem-border);
  border-radius: 22px;
  background: linear-gradient(152deg, rgba(20, 38, 61, 0.9), rgba(13, 26, 45, 0.86));
  box-shadow:
    0 30px 58px rgba(3, 10, 23, 0.62),
    inset 0 1px 0 rgba(235, 244, 255, 0.16);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

body.teacher-sovereign .identity-block .kicker,
body.teacher-sovereign .auth-form label,
body.teacher-sovereign .login-install-status {
  color: var(--role-prem-muted);
}

body.teacher-sovereign .auth-form input {
  border-color: var(--role-prem-border-soft);
  background: linear-gradient(145deg, rgba(22, 41, 67, 0.9), rgba(14, 30, 53, 0.84));
  color: var(--role-prem-ink);
}

body.teacher-sovereign .sovereign-button {
  border-color: var(--role-prem-border);
  background:
    linear-gradient(150deg, rgba(163, 204, 236, 0.22), rgba(163, 204, 236, 0.04)),
    linear-gradient(145deg, rgba(44, 80, 123, 0.96), rgba(27, 54, 88, 0.9));
  color: #f1f7ff;
}

body.teacher-sovereign .sovereign-button:hover,
body.teacher-sovereign .sovereign-button:focus-visible {
  border-color: rgba(215, 233, 249, 0.6);
  box-shadow: 0 14px 28px rgba(5, 14, 30, 0.48), 0 0 0 1px rgba(216, 185, 131, 0.22);
}

/* Teacher Dashboard */
body.teacher-console {
  --td-bg-0: #040e1d;
  --td-bg-1: #091c34;
  --td-bg-2: #113057;
  --td-panel-top: rgba(20, 40, 65, 0.92);
  --td-panel-bottom: rgba(12, 25, 44, 0.9);
  --td-border: var(--role-prem-border);
  --td-border-soft: var(--role-prem-border-soft);
  --td-text: var(--role-prem-ink);
  --td-muted: var(--role-prem-muted);
  --td-accent: #9ccff3;
  --td-gold: var(--role-prem-gold);
  --td-good: var(--role-prem-ok);
  --td-warn: var(--role-prem-warn);
  --td-danger: var(--role-prem-danger);
  background:
    radial-gradient(1240px 700px at 50% -24%, rgba(129, 184, 231, 0.24), transparent 70%),
    radial-gradient(920px 460px at 88% 8%, rgba(216, 185, 131, 0.17), transparent 72%),
    linear-gradient(160deg, var(--td-bg-0) 0%, var(--td-bg-1) 46%, var(--td-bg-2) 100%);
}

body.teacher-console .teacher-atmosphere {
  opacity: 0.9;
  background:
    linear-gradient(130deg, rgba(226, 241, 255, 0.08), transparent 42%),
    repeating-linear-gradient(90deg, rgba(224, 237, 252, 0.032) 0, rgba(224, 237, 252, 0.032) 1px, transparent 1px, transparent 42px);
}

body.teacher-console .panel {
  border-color: var(--td-border);
  box-shadow:
    0 20px 40px rgba(3, 10, 23, 0.56),
    inset 0 1px 0 rgba(240, 248, 255, 0.16);
}

body.teacher-console .panel::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: inherit;
  border: 1px solid rgba(188, 216, 241, 0.1);
  pointer-events: none;
}

body.teacher-console .btn,
body.teacher-console .quick-action,
body.teacher-console .planner-filter,
body.teacher-console .view-mode-btn,
body.teacher-console .panel-collapse-btn,
body.teacher-console .teacher-queue-chip,
body.teacher-console .planner-toggle,
body.teacher-console .planner-delete {
  border-color: rgba(174, 206, 235, 0.46);
  background:
    linear-gradient(150deg, rgba(216, 185, 131, 0.14), rgba(216, 185, 131, 0.02)),
    linear-gradient(145deg, rgba(45, 79, 119, 0.96), rgba(29, 54, 88, 0.94));
  color: #eff6ff;
}

body.teacher-console .btn:hover,
body.teacher-console .quick-action:hover,
body.teacher-console .planner-filter:hover,
body.teacher-console .view-mode-btn:hover,
body.teacher-console .panel-collapse-btn:hover,
body.teacher-console .teacher-queue-chip:hover {
  border-color: rgba(220, 236, 250, 0.66);
  box-shadow: 0 12px 24px rgba(4, 13, 29, 0.46), 0 0 0 1px var(--role-prem-gold-soft);
}

body.teacher-console .view-mode-btn.is-active,
body.teacher-console .planner-filter.is-active {
  border-color: rgba(216, 185, 131, 0.62);
  color: #f6e6ca;
}

body.teacher-console .attendance-form input,
body.teacher-console .attendance-form select,
body.teacher-console .leave-form input,
body.teacher-console .leave-form select,
body.teacher-console .planner-form input,
body.teacher-console .planner-form select,
body.teacher-console .form-grid input,
body.teacher-console .teacher-profile-menu-companion input {
  border-color: var(--td-border-soft);
  background: linear-gradient(145deg, rgba(22, 40, 65, 0.94), rgba(14, 29, 52, 0.9));
  color: var(--td-text);
}

body.teacher-console .teacher-data-status {
  border-color: var(--role-prem-border);
  background: linear-gradient(145deg, rgba(25, 46, 74, 0.86), rgba(16, 31, 53, 0.8));
}

body.teacher-console .teacher-mobile-tab.is-active,
body.teacher-console .teacher-mobile-tab[aria-current="page"] {
  border-color: rgba(216, 185, 131, 0.62);
  color: #f7e6c8;
}

/* Teacher Marks Entry */
body.marks-sanctum {
  --marks-bg-1: #04101f;
  --marks-bg-2: #0a2038;
  --marks-bg-3: #14355b;
  --marks-line: var(--role-prem-border);
  --marks-line-soft: var(--role-prem-border-soft);
  --marks-text: var(--role-prem-ink);
  --marks-muted: var(--role-prem-muted);
  --marks-good: var(--role-prem-ok);
  --marks-warn: var(--role-prem-warn);
  --marks-danger: var(--role-prem-danger);
  background:
    radial-gradient(1180px 680px at 50% -18%, rgba(130, 182, 227, 0.24), transparent 66%),
    radial-gradient(920px 500px at 86% 8%, rgba(216, 185, 131, 0.14), transparent 70%),
    linear-gradient(152deg, var(--marks-bg-1) 0%, var(--marks-bg-2) 52%, var(--marks-bg-3) 100%);
}

body.marks-sanctum .glass {
  border-color: var(--marks-line);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(19, 38, 61, 0.92), rgba(11, 24, 42, 0.9));
  box-shadow: 0 20px 38px rgba(3, 10, 23, 0.54), inset 0 1px 0 rgba(240, 248, 255, 0.15);
}

body.marks-sanctum .btn,
body.marks-sanctum .save-btn,
body.marks-sanctum .batch-toggle {
  border-color: rgba(174, 206, 235, 0.46);
  background:
    linear-gradient(150deg, rgba(216, 185, 131, 0.14), rgba(216, 185, 131, 0.02)),
    linear-gradient(145deg, rgba(45, 79, 119, 0.96), rgba(29, 54, 88, 0.94));
  color: #eff6ff;
}

body.marks-sanctum .btn-link {
  background:
    linear-gradient(150deg, rgba(216, 185, 131, 0.08), rgba(216, 185, 131, 0.01)),
    linear-gradient(145deg, rgba(39, 71, 109, 0.94), rgba(24, 47, 77, 0.9));
}

body.marks-sanctum .batch-mark-select {
  border-color: var(--marks-line-soft);
  background: linear-gradient(145deg, rgba(22, 40, 65, 0.94), rgba(14, 29, 52, 0.9));
  color: var(--marks-text);
}

body.marks-sanctum .insight-table-wrap,
body.marks-sanctum .roster-wrap {
  border-color: rgba(159, 194, 225, 0.34);
  background: rgba(11, 24, 42, 0.62);
}

body.marks-sanctum .insight-table th,
body.marks-sanctum .roster-table th {
  background: rgba(18, 35, 58, 0.88);
  color: #c0d3e7;
}

body.marks-sanctum .marks-mobile-tab.is-active,
body.marks-sanctum .marks-mobile-tab[aria-current="page"] {
  border-color: rgba(216, 185, 131, 0.62);
  color: #f7e6c8;
}

/* Student Login */
body.student-sovereign {
  font-family: "Sora", sans-serif;
  color: var(--role-prem-ink);
  background:
    radial-gradient(1120px 660px at 50% -18%, rgba(125, 177, 222, 0.24), transparent 68%),
    radial-gradient(860px 460px at 88% 10%, rgba(216, 185, 131, 0.16), transparent 72%),
    linear-gradient(155deg, #05101e 0%, #0b2138 46%, #123254 100%);
}

body.student-sovereign .sovereign-atmosphere {
  opacity: 0.7;
}

body.student-sovereign .glass,
body.student-sovereign .login-stage,
body.student-sovereign .authority-panel {
  border-color: var(--role-prem-border);
  border-radius: 22px;
  background: linear-gradient(152deg, rgba(20, 38, 61, 0.9), rgba(13, 26, 45, 0.86));
  box-shadow:
    0 30px 58px rgba(3, 10, 23, 0.62),
    inset 0 1px 0 rgba(235, 244, 255, 0.16);
}

body.student-sovereign .micro-label,
body.student-sovereign .panel-kicker,
body.student-sovereign .location-line,
body.student-sovereign .panel-note,
body.student-sovereign .chamber-note,
body.student-sovereign .login-install-status,
body.student-sovereign .auth-form label {
  color: var(--role-prem-muted);
}

body.student-sovereign .auth-form input {
  border-color: var(--role-prem-border-soft);
  background: linear-gradient(145deg, rgba(22, 41, 67, 0.9), rgba(14, 30, 53, 0.84));
  color: var(--role-prem-ink);
}

body.student-sovereign .sovereign-button {
  border-color: var(--role-prem-border);
  background:
    linear-gradient(150deg, rgba(163, 204, 236, 0.22), rgba(163, 204, 236, 0.04)),
    linear-gradient(145deg, rgba(44, 80, 123, 0.96), rgba(27, 54, 88, 0.9));
  color: #f1f7ff;
}

/* Student Dashboard */
body.student-record.student-dashboard-v2 {
  --stu-bg-0: #04101f;
  --stu-bg-1: #0a2038;
  --stu-bg-2: #13375f;
  --stu-panel: linear-gradient(155deg, rgba(19, 38, 61, 0.92), rgba(11, 24, 42, 0.9));
  --stu-panel-border: var(--role-prem-border);
  --stu-panel-soft: var(--role-prem-border-soft);
  --stu-text: var(--role-prem-ink);
  --stu-muted: var(--role-prem-muted);
  --stu-focus: var(--role-prem-accent);
  --stu-accent: #8acfb0;
  --stu-accent-gold: var(--role-prem-gold);
  --stu-danger: var(--role-prem-danger);
  --stu-ok: var(--role-prem-ok);
  background:
    radial-gradient(1120px 660px at 50% -18%, rgba(125, 177, 222, 0.24), transparent 68%),
    radial-gradient(860px 460px at 88% 10%, rgba(216, 185, 131, 0.16), transparent 72%),
    linear-gradient(155deg, var(--stu-bg-0) 0%, var(--stu-bg-1) 46%, var(--stu-bg-2) 100%);
}

body.student-record.student-dashboard-v2 .panel {
  border-color: var(--stu-panel-border);
  background: var(--stu-panel);
  box-shadow: 0 20px 40px rgba(3, 10, 23, 0.56), inset 0 1px 0 rgba(240, 248, 255, 0.15);
}

body.student-record.student-dashboard-v2 .panel::before {
  border-color: rgba(188, 216, 241, 0.1);
}

body.student-record.student-dashboard-v2 .btn,
body.student-record.student-dashboard-v2 .student-avatar-btn,
body.student-record.student-dashboard-v2 .student-profile-trigger,
body.student-record.student-dashboard-v2 .student-mobile-tab,
body.student-record.student-dashboard-v2 .planner-filter,
body.student-record.student-dashboard-v2 .student-planner-action,
body.student-record.student-dashboard-v2 .student-panel-collapse-btn,
body.student-record.student-dashboard-v2 .student-view-btn {
  border-color: rgba(174, 206, 235, 0.46);
  background:
    linear-gradient(150deg, rgba(216, 185, 131, 0.14), rgba(216, 185, 131, 0.02)),
    linear-gradient(145deg, rgba(45, 79, 119, 0.96), rgba(29, 54, 88, 0.94));
  color: #eff6ff;
}

body.student-record.student-dashboard-v2 .btn:hover,
body.student-record.student-dashboard-v2 .student-avatar-btn:hover,
body.student-record.student-dashboard-v2 .student-profile-trigger:hover,
body.student-record.student-dashboard-v2 .student-mobile-tab:hover,
body.student-record.student-dashboard-v2 .planner-filter:hover,
body.student-record.student-dashboard-v2 .student-planner-action:hover,
body.student-record.student-dashboard-v2 .student-view-btn:hover {
  border-color: rgba(220, 236, 250, 0.66);
  box-shadow: 0 12px 24px rgba(4, 13, 29, 0.46), 0 0 0 1px var(--role-prem-gold-soft);
}

body.student-record.student-dashboard-v2 .student-view-btn.is-active,
body.student-record.student-dashboard-v2 .planner-filter.is-active,
body.student-record.student-dashboard-v2 .student-mobile-tab.is-active {
  border-color: rgba(216, 185, 131, 0.62);
  color: #f7e6c8;
}

body.student-record.student-dashboard-v2 .student-planner-form input,
body.student-record.student-dashboard-v2 .student-planner-form select,
body.student-record.student-dashboard-v2 .student-reset-form input,
body.student-record.student-dashboard-v2 .student-companion-settings input,
body.student-record.student-dashboard-v2 .orchestrator-grid input,
body.student-record.student-dashboard-v2 .orchestrator-grid select {
  border-color: var(--stu-panel-soft);
  background: linear-gradient(145deg, rgba(22, 40, 65, 0.94), rgba(14, 29, 52, 0.9));
  color: var(--stu-text);
}

body.student-record.student-dashboard-v2 .student-data-status {
  border-color: var(--stu-panel-border);
  background: linear-gradient(145deg, rgba(25, 46, 74, 0.86), rgba(16, 31, 53, 0.8));
}

body.student-record.student-dashboard-v2 .student-mobile-dock {
  border-color: rgba(174, 206, 235, 0.28);
  background: rgba(10, 22, 39, 0.94);
}

body.student-record.student-dashboard-v2 .record-table th,
body.student-record.student-dashboard-v2 .subject-analytics-table th {
  background: rgba(18, 35, 58, 0.88);
  color: #c0d3e7;
}

body.student-record.student-dashboard-v2 .record-table tbody tr:nth-child(even),
body.student-record.student-dashboard-v2 .subject-analytics-table tbody tr:nth-child(even) {
  background: rgba(20, 39, 63, 0.52);
}

body.student-record.student-dashboard-v2 .record-table tbody tr:hover,
body.student-record.student-dashboard-v2 .subject-analytics-table tbody tr:hover {
  background: rgba(35, 59, 90, 0.62);
}

/* Status color harmonization */
body.teacher-console .status.success,
body.student-record.student-dashboard-v2 .student-avatar-status.success,
body.student-record.student-dashboard-v2 .student-companion-status.success,
body.student-sovereign .status.success,
body.teacher-sovereign .status.success,
body.marks-sanctum .status.success {
  color: var(--role-prem-ok);
}

body.teacher-console .status.error,
body.student-record.student-dashboard-v2 .student-avatar-status.error,
body.student-record.student-dashboard-v2 .student-companion-status.error,
body.student-sovereign .status.error,
body.teacher-sovereign .status.error,
body.marks-sanctum .status.error {
  color: var(--role-prem-danger);
}