/* =====================================================
     Portal v4.1.1 foundation
     Readable source-level implementation for migrated GAS pages.
  ===================================================== */

  :root {
    --primary: #1ABB9C;
    --primary-lt: rgba(26, 187, 156, 0.06);
    --primary-dk: #169f85;
    --sidebar-bg: #1ABB9C;
    --sidebar-hover: rgba(255, 255, 255, 0.04);
    --sidebar-active: rgba(255, 255, 255, 0.12);
    --sidebar-text: rgba(255, 255, 255, 0.72);
    --sidebar-text-hover: rgba(255, 255, 255, 0.88);
    --sidebar-text-active: #ffffff;
    --sidebar-text-muted: rgba(255, 255, 255, 0.42);
    --sidebar-border: rgba(255, 255, 255, 0.06);

    --body-bg: color-mix(in srgb, var(--primary) 20%, #f5f7fb);
    --bg-surface: #ffffff;
    --bg-surface-secondary: #f9fafb;

    --border-color: #e6e7eb;
    --border-color-light: #eff0f3;
    --border-translucent: rgba(4, 32, 69, 0.08);

    --text: #1e2633;
    --text-secondary: #626d7d;
    --text-muted: #7e8896;
    --text-disabled: #c0c7cf;

    --green: #2fb344;
    --green-lt: rgba(47, 179, 68, 0.06);
    --yellow: #f59f00;
    --yellow-lt: rgba(245, 159, 0, 0.06);
    --red: #d63939;
    --red-lt: rgba(214, 57, 57, 0.06);
    --azure: #4299e1;
    --subject-art: #d6336c;
    --subject-hindi: #2fb344;
    --subject-english: #066fd1;
    --subject-social: #ae3ec9;
    --subject-default: #7e8896;

    --success-bg: var(--green-lt);
    --success-border: rgba(47, 179, 68, 0.24);
    --success-text: var(--green);
    --warning-bg: var(--yellow-lt);
    --warning-border: rgba(245, 159, 0, 0.26);
    --warning-text: #b36b00;
    --danger-bg: var(--red-lt);
    --danger-border: rgba(214, 57, 57, 0.24);
    --danger-text: var(--red);
    --info-bg: rgba(66, 153, 225, 0.06);
    --info-border: rgba(66, 153, 225, 0.24);
    --info-text: var(--azure);

    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --shadow: rgba(30, 38, 51, 0.04) 0 2px 4px 0;
    --shadow-card: 0 0 0 1px var(--border-translucent), rgba(30, 38, 51, 0.04) 0 2px 4px 0;
    --shadow-hover: 0 10px 30px rgba(15, 23, 42, 0.18);
    --scrim: rgba(15, 23, 42, 0.54);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size: 0.875rem;
    --line-height: 1.4286;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
  }

  :root { color-scheme: light; }
  [data-theme="dark"] { color-scheme: dark; }

  [data-theme="dark"] {
    --body-bg: color-mix(in srgb, var(--primary) 10%, #0f1623);
    --bg-surface: #1a2332;
    --bg-surface-secondary: #141d2b;

    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-light: rgba(255, 255, 255, 0.05);
    --border-translucent: rgba(255, 255, 255, 0.08);

    --text: #e6ebf2;
    --text-secondary: #b3bccb;
    --text-muted: #8a93a3;
    --text-disabled: #5a6473;

    --green-lt: rgba(47, 179, 68, 0.16);
    --yellow-lt: rgba(245, 159, 0, 0.16);
    --red-lt: rgba(214, 57, 57, 0.16);

    --success-bg: var(--green-lt);
    --success-border: rgba(47, 179, 68, 0.34);
    --success-text: #74d487;
    --warning-bg: var(--yellow-lt);
    --warning-border: rgba(245, 159, 0, 0.36);
    --warning-text: #ffc04d;
    --danger-bg: var(--red-lt);
    --danger-border: rgba(214, 57, 57, 0.34);
    --danger-text: #ef7b7b;
    --info-bg: rgba(66, 153, 225, 0.16);
    --info-border: rgba(66, 153, 225, 0.34);
    --info-text: #7db7ef;

    --shadow: rgba(0, 0, 0, 0.4) 0 2px 4px 0;
    --shadow-card: 0 0 0 1px var(--border-translucent), rgba(0, 0, 0, 0.3) 0 2px 4px 0;
    --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.42);
    --scrim: rgba(0, 0, 0, 0.62);
  }

  :root,
  [data-color-preset="teal"] {
    --primary: #3A746F;
    --primary-dk: #29524E;
    --primary-lt: rgba(58, 116, 111, 0.1);
    --sidebar-bg: #3A746F;
  }
  [data-color-preset="blue"] {
    --primary: #3E638E;
    --primary-dk: #2F4A6B;
    --primary-lt: rgba(62, 99, 142, 0.1);
    --sidebar-bg: #3E638E;
  }
  [data-color-preset="indigo"] {
    --primary: #53658F;
    --primary-dk: #404E6F;
    --primary-lt: rgba(83, 101, 143, 0.1);
    --sidebar-bg: #53658F;
  }
  [data-color-preset="purple"] {
    --primary: #66527F;
    --primary-dk: #4D3E60;
    --primary-lt: rgba(102, 82, 127, 0.1);
    --sidebar-bg: #66527F;
  }
  [data-color-preset="rose"] {
    --primary: #7A5268;
    --primary-dk: #5C3E4E;
    --primary-lt: rgba(122, 82, 104, 0.1);
    --sidebar-bg: #7A5268;
  }
  [data-color-preset="brick"] {
    --primary: #884F52;
    --primary-dk: #683C3F;
    --primary-lt: rgba(136, 79, 82, 0.1);
    --sidebar-bg: #884F52;
  }
  [data-color-preset="terracotta"] {
    --primary: #8A5A44;
    --primary-dk: #684433;
    --primary-lt: rgba(138, 90, 68, 0.1);
    --sidebar-bg: #8A5A44;
  }
  [data-color-preset="ochre"] {
    --primary: #80652F;
    --primary-dk: #5B4821;
    --primary-lt: rgba(128, 101, 47, 0.1);
    --sidebar-bg: #80652F;
  }
  [data-color-preset="sage"] {
    --primary: #4C704B;
    --primary-dk: #375137;
    --primary-lt: rgba(76, 112, 75, 0.1);
    --sidebar-bg: #4C704B;
  }
  [data-color-preset="cyan"] {
    --primary: #36717B;
    --primary-dk: #265058;
    --primary-lt: rgba(54, 113, 123, 0.1);
    --sidebar-bg: #36717B;
  }
  [data-color-preset="blush-navy"] {
    --primary: #A95F78;
    --primary-dk: #87455D;
    --primary-lt: rgba(226, 177, 194, 0.1);
    --sidebar-bg: #344B70;
  }
  [data-color-preset="aqua-plum"] {
    --primary: #36777A;
    --primary-dk: #285D60;
    --primary-lt: rgba(166, 214, 211, 0.1);
    --sidebar-bg: #604C70;
  }
  [data-color-preset="apricot-teal"] {
    --primary: #A95F3D;
    --primary-dk: #87482F;
    --primary-lt: rgba(235, 184, 149, 0.1);
    --sidebar-bg: #2F6663;
  }
  [data-color-preset="lavender-navy"] {
    --primary: #745C9B;
    --primary-dk: #594778;
    --primary-lt: rgba(202, 185, 225, 0.1);
    --sidebar-bg: #3F526C;
  }
  [data-color-preset="sage-burgundy"] {
    --primary: #557B57;
    --primary-dk: #3F6041;
    --primary-lt: rgba(188, 210, 174, 0.1);
    --sidebar-bg: #704655;
  }
  [data-color-preset="coral-ink"] {
    --primary: #A9554C;
    --primary-dk: #894139;
    --primary-lt: rgba(235, 169, 156, 0.1);
    --sidebar-bg: #354F6B;
  }
  [data-color-preset="periwinkle-forest"] {
    --primary: #5D73A4;
    --primary-dk: #475B85;
    --primary-lt: rgba(181, 197, 229, 0.1);
    --sidebar-bg: #365E49;
  }
  [data-color-preset="gold-aubergine"] {
    --primary: #896526;
    --primary-dk: #6D4F1B;
    --primary-lt: rgba(224, 198, 136, 0.1);
    --sidebar-bg: #59435F;
  }
  [data-color-preset="dustyblue-cocoa"] {
    --primary: #4A728D;
    --primary-dk: #385B71;
    --primary-lt: rgba(174, 202, 219, 0.1);
    --sidebar-bg: #665047;
  }
  [data-color-preset="orchid-slate"] {
    --primary: #80578E;
    --primary-dk: #67446F;
    --primary-lt: rgba(210, 178, 221, 0.1);
    --sidebar-bg: #40566B;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html,
  body {
    min-width: 0;
    min-height: 100%;
  }

  body {
    color: var(--text);
    background: var(--body-bg);
    font-family: var(--font);
    font-size: var(--font-size);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  [hidden] {
    display: none !important;
  }

  :where(svg):not([width]):not([height]) {
    width: 1em;
    height: 1em;
  }

  /* =====================================================
     Authentication layout
  ===================================================== */

  .auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-5);
    background:
      radial-gradient(ellipse 60% 80% at 20% 30%, rgba(26, 187, 156, 0.06), transparent),
      radial-gradient(ellipse 60% 80% at 80% 70%, rgba(66, 153, 225, 0.05), transparent),
      var(--body-bg);
  }

  .auth-card {
    width: 100%;
    max-width: 400px;
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
  }

  .auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-5);
  }

  .auth-brand .brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 7px;
    background: var(--primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
  }

  .auth-brand .brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .auth-brand .brand-name {
    color: var(--text);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.2px;
  }

  .auth-title {
    margin-bottom: var(--space-1);
    color: var(--text);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.3px;
  }

  .auth-subtitle {
    margin-bottom: var(--space-5);
    color: var(--text-muted);
    font-size: 13px;
  }

  .auth-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    font-size: 12.5px;
  }

  .auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 20px 0;
    color: var(--text-muted);
    font-size: 11.5px;
  }

  .auth-divider::before,
  .auth-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--border-color);
  }

  .auth-footer {
    margin-top: 20px;
    color: var(--text-muted);
    font-size: 12.5px;
    text-align: center;
  }

  .auth-success {
    padding: var(--space-4) 0;
    text-align: center;
  }

  .auth-success svg {
    display: block;
    margin: 0 auto var(--space-2);
  }

  .auth-success .success-title {
    margin-bottom: var(--space-1);
    color: var(--text);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
  }

  .auth-success .success-desc {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
  }

  /* =====================================================
     Forms
  ===================================================== */

  .form-group {
    display: block;
    margin-bottom: var(--space-4);
  }

  .form-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
  }

  .required,
  .form-label .required {
    margin-inline-start: 2px;
    color: var(--red);
  }

  .form-control {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    outline: none;
    background: var(--bg-surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    transition: border-color 150ms, box-shadow 150ms;
  }

  .form-control:hover:not(:focus) {
    border-color: var(--text-muted);
  }

  .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-lt);
  }


  input.form-control:-webkit-autofill,
  input.form-control:-webkit-autofill:hover,
  input.form-control:-webkit-autofill:focus,
  input.form-control:-webkit-autofill:active,
  .input-group input:-webkit-autofill,
  .input-group input:-webkit-autofill:hover,
  .input-group input:-webkit-autofill:focus,
  .input-group input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 0 0 1000px var(--bg-surface) inset !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset !important;
    transition: background-color 99999s ease-out 0s;
  }

  input.form-control:-webkit-autofill:focus,
  .input-group input:-webkit-autofill:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 1000px var(--bg-surface) inset, 0 0 0 3px var(--primary-lt) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset, 0 0 0 3px var(--primary-lt) !important;
  }

  [data-theme="dark"] input,
  [data-theme="dark"] textarea,
  [data-theme="dark"] select {
    color-scheme: dark;
  }

  .form-control.is-invalid {
    border-color: var(--red);
  }

  .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--red-lt);
  }

  .form-hint,
  .form-error {
    margin-top: var(--space-1);
    font-size: 11.5px;
  }

  .form-hint {
    color: var(--text-muted);
  }

  .form-error {
    color: var(--red);
  }

  .input-group {
    position: relative;
  }

  .input-group .form-control {
    padding-inline-start: 36px;
  }

  .input-group .input-icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 11px;
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    pointer-events: none;
    transform: translateY(-50%);
  }

  .form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
  }

  .form-check input[type="checkbox"] {
    position: relative;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
  }

  .form-check input[type="checkbox"]:hover {
    border-color: var(--primary);
  }

  .form-check input[type="checkbox"]:checked {
    border-color: var(--primary);
    background: var(--primary);
  }

  .form-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 8px;
    border-inline-end: 1.5px solid #ffffff;
    border-bottom: 1.5px solid #ffffff;
    transform: translate(-50%, -55%) rotate(45deg);
  }

  .form-check input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px var(--primary-lt);
  }

  .spinner-dots {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .spinner-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    animation: dot-pulse 1.2s ease-in-out infinite;
  }

  .spinner-dots span:nth-child(2) { animation-delay: .2s; }
  .spinner-dots span:nth-child(3) { animation-delay: .4s; }

  @keyframes dot-pulse {
    0%, 80%, 100% { opacity: .3; transform: scale(.8); }
    40% { opacity: 1; transform: scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .spinner-dots span { animation-duration: 2s; }
  }

  /* =====================================================
     Skeleton loading
  ===================================================== */

  .skeleton {
    display: block;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-surface-secondary) 0%, var(--border-color-light) 50%, var(--bg-surface-secondary) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
  }

  .skeleton-text {
    height: 10px;
    margin-bottom: 8px;
  }

  .skeleton-text:last-child {
    margin-bottom: 0;
  }

  .skeleton-text-lg {
    height: 14px;
  }

  .skeleton-circle {
    border-radius: 50%;
  }

  .skeleton-rect {
    border-radius: var(--radius);
  }

  .chart-skeleton {
    width: 100%;
    height: 100%;
    min-height: inherit;
  }

  @keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .skeleton {
      opacity: .6;
      animation: none;
    }
  }

  /* =====================================================
     Buttons and links
  ===================================================== */

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 12.5px;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
  }

  .btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
  }

  .btn-primary {
    border-color: var(--primary-dk);
    background: var(--primary);
    color: #ffffff;
  }

  .btn-primary:hover:not(:disabled) {
    background: var(--primary-dk);
  }

  .btn-secondary {
    border-color: var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
  }

  .btn-secondary:hover:not(:disabled) {
    border-color: var(--text-muted);
    background: var(--secondary-bg);
    color: var(--text);
  }

  .btn-outline {
    border-color: var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
    box-shadow: var(--shadow);
  }

  .btn-outline:hover:not(:disabled) {
    background: var(--bg-surface-secondary);
    color: var(--text);
  }

  .btn-success {
    border-color: var(--green);
    background: var(--green);
    color: #ffffff;
  }

  .btn-success:hover:not(:disabled) {
    filter: brightness(0.92);
  }

  .btn-danger {
    border-color: var(--red);
    background: var(--red);
    color: #ffffff;
  }

  .btn-danger:hover:not(:disabled) {
    filter: brightness(0.92);
  }

  .btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  .auth-submit {
    width: 100%;
    height: 38px;
    justify-content: center;
  }

  .auth-link-button {
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    box-shadow: none;
    font: inherit;
    font-weight: var(--font-weight-medium);
    line-height: inherit;
    cursor: pointer;
  }

  .auth-link-button:hover {
    text-decoration: underline;
  }

  /* =====================================================
     Registration page
  ===================================================== */

  body[data-page="register"] .auth-page {
    align-items: flex-start;
  }

  body[data-page="register"] .registration-card {
    max-width: 920px;
  }

  .registration-card .auth-subtitle {
    margin-bottom: var(--space-5);
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px var(--space-5);
  }

  .form-field {
    min-width: 0;
  }

  .form-field.full-width {
    grid-column: 1 / -1;
  }

  .form-field > label {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
  }

  .form-field > input,
  .form-field > select {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    outline: none;
    background-color: var(--bg-surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    transition: border-color 150ms, box-shadow 150ms;
  }

  .form-field > select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239ba5b1' stroke-width='1.5'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }

  .form-field > input:focus,
  .form-field > select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-lt);
  }

  .form-field .is-invalid,
  .checkbox-group.is-invalid {
    border-color: var(--red);
  }

  .form-text,
  .invalid-feedback {
    margin-top: var(--space-1);
    font-size: 11.5px;
  }

  .form-text {
    color: var(--text-muted);
  }

  .invalid-feedback {
    color: var(--red);
  }

  .invalid-feedback:empty {
    display: none;
  }

  .section-title {
    margin: var(--space-5) 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-color-light);
    color: var(--text);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
  }

  .checkbox-group,
  .notification-switch-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .checkbox-group.is-invalid {
    padding: var(--space-2);
    border: 1px solid var(--red);
    border-radius: var(--radius);
  }

  .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
  }

  .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
  }

  .notification-switch-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
  }

  .notification-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex: 0 0 36px;
  }

  .notification-switch > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .notification-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--border-color);
    transition: background 150ms;
  }

  .notification-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    transition: transform 150ms;
  }

  .notification-switch input:checked + .notification-switch-track {
    background: var(--primary);
  }

  .notification-switch input:checked + .notification-switch-track::after {
    transform: translateX(16px);
  }

  .whatsapp-preference-help {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 12px;
  }

  .registration-submit-actions {
    display: flex;
    justify-content: center;
    margin-top: var(--space-5);
  }

  #registerSubmit {
    min-width: 200px;
    height: 38px;
    justify-content: center;
  }

  .registration-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 20px 0;
    color: var(--text-muted);
    font-size: 11.5px;
  }

  .registration-divider::before,
  .registration-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--border-color);
  }

  .registration-login-footer {
    color: var(--text-muted);
    font-size: 12.5px;
    text-align: center;
  }

  @media (max-width: 760px) {
    .form-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .form-field.full-width {
      grid-column: auto;
    }

    .notification-switch-list {
      align-items: flex-start;
      flex-direction: column;
      gap: 10px;
    }
  }

  /* =====================================================
     Portal icon library used by existing navigation markup
     Shapes follow currentColor and remain self-contained in the Portal theme.
  ===================================================== */

  .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
  }
  .badge .icon {
    vertical-align: -0.15em;
    margin-right: 3px;
  }
  .avatar{background:linear-gradient(135deg,var(--primary),var(--primary-dk));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:12px;font-weight:600;display:flex;position:relative}
  .avatar-lg{width:44px;height:44px;font-size:14px}
  .avatar-status{background:var(--green);border:2px solid var(--bg-surface);border-radius:50%;width:28%;min-width:6px;height:28%;min-height:6px;position:absolute;bottom:0;right:0}
  .avatar-status.away{background:var(--yellow)}
  .avatar-status.busy{background:var(--red)}
  .avatar-status.offline{background:var(--text-muted)}
  body[data-page="admin-users"] .user-card .avatar.avatar-lg{display:flex;width:44px;height:44px;min-width:44px;min-height:44px;align-items:center;justify-content:center;flex:0 0 44px;border-radius:50%;color:#fff;font-size:14px;font-weight:600;line-height:1;position:relative;overflow:visible}
  body[data-page="admin-users"] .user-card .avatar.admin-avatar-tone-0{background:#2fb344;color:#fff}
  body[data-page="admin-users"] .user-card .avatar.admin-avatar-tone-1{background:#206bc4;color:#fff}
  body[data-page="admin-users"] .user-card .avatar.admin-avatar-tone-2{background:#ae3ec9;color:#fff}
  body[data-page="admin-users"] .user-card .avatar.admin-avatar-tone-3{background:#f59f00;color:#fff}
  body[data-page="admin-users"] .user-card .avatar .avatar-status{display:block;position:absolute;right:0;bottom:0;width:28%;min-width:6px;height:28%;min-height:6px;border:2px solid var(--bg-surface);border-radius:50%}
  .list-group{border:1px solid var(--border-color);border-radius:var(--radius);flex-direction:column;display:flex;overflow:hidden}
  .list-group-item{align-items:center;gap:var(--space-3);background:var(--bg-surface);border:none;border-bottom:1px solid var(--border-color-light);color:var(--text);font:inherit;cursor:pointer;text-align:left;width:100%;padding:10px 14px;font-size:13px;text-decoration:none;transition:background .1s,color .1s;display:flex}
  .list-group-item:last-child{border-bottom:none}
  .list-group-item .meta{color:var(--text-muted);margin-left:auto;font-size:11.5px}
  .card{min-width:0;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
  .card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:44px;padding:12px 16px;border-bottom:1px solid var(--border-color-light)}
  .card-title{color:var(--text);font-size:13px;font-weight:var(--font-weight-bold)}
  .card-subtitle{margin-top:1px;color:var(--text-muted);font-size:11.5px}
  .card-body{padding:16px}
  .subject-color-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border-radius: 50%;
    background: var(--subject-color, var(--subject-default));
  }
  [data-subject="Art"] { --subject-color: var(--subject-art); }
  [data-subject="Hindi"] { --subject-color: var(--subject-hindi); }
  [data-subject="English"] { --subject-color: var(--subject-english); }
  [data-subject="Social Science"] { --subject-color: var(--subject-social); }
  .icon-doc { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%209h6M9%2013h4%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-home { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%224%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2210%22%20width%3D%227%22%20height%3D%2211%22%20rx%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-bag { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M3%209l1-5h16l1%205M3%209v10a2%202%200%20002%202h14a2%202%200%20002-2V9M3%209h18%22%2F%3E%3Cpath%20d%3D%22M9%2013a3%203%200%20006%200%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-trash { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M8%206V4h8v2M6%206l1%2015h10l1-15M10%2010v7M14%2010v7%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-clock { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M8%204v6M16%204v6%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-phone { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%2001-2.18%202%2019.79%2019.79%200%2001-8.63-3.07%2019.5%2019.5%200%2001-6-6A19.79%2019.79%200%20012.12%204.18%202%202%200%20014.11%202h3a2%202%200%20012%201.72c.13.96.36%201.9.69%202.8a2%202%200%2001-.45%202.11L6.09%209.91a16%2016%200%20006%206l1.28-1.28a2%202%200%20012.11-.45c.9.33%201.84.56%202.8.69A2%202%200%200122%2016.92z%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-chat { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M21%2011.5a8.38%208.38%200%2001-.9%203.8%208.5%208.5%200%2001-7.6%204.7%208.38%208.38%200%2001-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%2001-.9-3.8%208.5%208.5%200%20014.7-7.6%208.38%208.38%200%20013.8-.9h.5a8.48%208.48%200%20018%208v.5z%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-envelope { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%207l10%206%2010-6%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-info { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2011v5%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-cap { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M20%2021v-2a4%204%200%2000-4-4H8a4%204%200%2000-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-person { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M20%2021v-2a4%204%200%2000-4-4H8a4%204%200%2000-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-attendance { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M8%204v6M16%204v6%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-calendar { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M8%204v6M16%204v6%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-calendar-week { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M8%204v6M16%204v6%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-book { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%205.5c2.8-1.4%206.3-1.1%209.5%201v14c-3.2-2.1-6.7-2.4-9.5-1z%22%2F%3E%3Cpath%20d%3D%22M21.5%205.5c-2.8-1.4-6.3-1.1-9.5%201v14c3.2-2.1%206.7-2.4%209.5-1z%22%2F%3E%3Cpath%20d%3D%22M5%203.5c2.2-.5%204.8.1%207%202v15%22%2F%3E%3Cpath%20d%3D%22M19%203.5c-2.2-.5-4.8.1-7%202%22%2F%3E%3Cpath%20d%3D%22M7.2%209.2c1.6.1%203.2.7%204.8%201.8M16.8%209.2c-1.6.1-3.2.7-4.8%201.8%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-megaphone { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M12%203a6%206%200%2000-6%206c0%206-3%207-3%207h18s-3-1-3-7a6%206%200%2000-6-6z%22%2F%3E%3Cpath%20d%3D%22M10.5%2021a1.5%201.5%200%20003%200%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-image { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M21%2015l-5-5L5%2021%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-camera { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h3l2-3h6l2%203h3a2%202%200%20012%202v9a2%202%200%2001-2%202H4a2%202%200%2001-2-2V9a2%202%200%20012-2z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-card { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%2010h20M6%2015h4%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-people { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%229%22%20r%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M3%2020c0-3.3%202.7-6%206-6s6%202.7%206%206%22%2F%3E%3Cpath%20d%3D%22M14%2015.2c.9-.8%202-1.2%203.2-1.2%202.7%200%204.8%202.2%204.8%205%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-check { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M20%2021v-2a4%204%200%2000-4-4H8a4%204%200%2000-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-list { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M9%2010v9M15%2010v9%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-money { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M5%2021V3h14v18l-3-2-3%202-3-2-3%202-2-2z%22%2F%3E%3Cpath%20d%3D%22M9%208h6M9%2012h6M9%2016h4%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-target { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%275%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%271%27/%3E%3C/svg%3E"); }
  .icon-tick { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12l4 4L19 6%27/%3E%3C/svg%3E"); }
  .icon-alert { --icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3L2.5 20h19L12 3z%27/%3E%3Cpath d=%27M12 9v5%27/%3E%3Cpath d=%27M12 17h.01%27/%3E%3C/svg%3E"); }
  .icon-gear { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M2%2012h3M19%2012h3M5.6%205.6l2.1%202.1M16.3%2016.3l2.1%202.1M5.6%2018.4l2.1-2.1M16.3%207.7l2.1-2.1%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-shield { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M9.1%209a3%203%200%20015.8%201c0%202-3%203-3%203%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2217%22%20r%3D%220.5%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-cart { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2221%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2221%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M1%201h4l2.7%2013.4a2%202%200%20002%201.6h9.7a2%202%200%20002-1.6L23%206H6%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-building { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-key { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2215.5%22%20r%3D%224.5%22%2F%3E%3Cpath%20d%3D%22M10.7%2012.3L21%202M17%206l2%202M14%209l2%202%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-lock { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%2216%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2010V7a4%204%200%20018%200v3M12%2014v3%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-menu { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h16%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-back { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2018l-6-6%206-6%22%2F%3E%3C%2Fsvg%3E"); }
  .icon-logout { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%204H5a2%202%200%2000-2%202v12a2%202%200%20002%202h5M14%208l4%204-4%204M18%2012H9%22%2F%3E%3C%2Fsvg%3E"); }


  /* =====================================================
     Portal application shell and dashboard
     The injected sidebar, topbar, account menu, and page content use these
     components directly. Existing IDs and event handlers remain unchanged.
  ===================================================== */

  html:has(body[data-page="dashboard"]),
  html:has(body[data-page="admin-dashboard"]) {
    min-height: 100%;
    overflow: hidden;
    border: 0;
    background: var(--body-bg);
  }

  body[data-page="dashboard"],
  body[data-page="admin-dashboard"] {
    position: relative;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background: var(--body-bg);
  }

  .portal-sidebar {
    position: absolute;
    z-index: 1250;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    width: 252px;
    overflow-x: hidden;
    transition: width .22s cubic-bezier(.2, 0, 0, 1), transform .22s cubic-bezier(.2, 0, 0, 1);
    will-change: width, transform;
    overflow-y: auto;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
  }

  .portal-topbar {
    position: absolute;
    z-index: 1200;
    top: 0;
    inset-inline: 252px 0;
    transition: inset-inline-start .22s cubic-bezier(.2, 0, 0, 1);
    will-change: inset-inline-start;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--sidebar-border);
    background: var(--sidebar-bg);
    color: var(--sidebar-text-active);
    box-shadow: none;
  }

  .portal-main {
    height: 100vh;
    min-height: 0;
    margin-inline-start: 252px;
    padding: 76px var(--space-5) var(--space-5);
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--body-bg);
    transition: margin-inline-start .22s cubic-bezier(.2, 0, 0, 1);
    will-change: margin-inline-start;
  }

  @media (min-width: 769px) {
    body.dashboard-portal-shell { --dashboard-sidebar-current: 252px; }
    body.dashboard-portal-shell.dashboard-sidebar-collapsed { --dashboard-sidebar-current: 68px; }

    .portal-sidebar .app-menu-brand-name,
    .portal-sidebar .app-menu-item-label,
    .portal-sidebar .app-menu-contact-heading,
    .portal-sidebar .menu-contact-footer .contact-text {
      min-width: max-content;
      overflow: hidden;
      white-space: nowrap;
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
      transition: opacity .12s ease, transform .22s cubic-bezier(.2, 0, 0, 1), visibility 0s linear 0s;
      will-change: opacity, transform;
    }

    body.dashboard-sidebar-collapsed .portal-sidebar {
      width: var(--dashboard-sidebar-current);
    }

    body.dashboard-sidebar-collapsed .portal-topbar {
      inset-inline-start: var(--dashboard-sidebar-current);
    }

    body.dashboard-sidebar-collapsed .portal-main {
      margin-inline-start: var(--dashboard-sidebar-current);
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .app-menu-brand-name,
    body.dashboard-sidebar-collapsed .portal-sidebar .app-menu-item-label,
    body.dashboard-sidebar-collapsed .portal-sidebar .app-menu-contact-heading,
    body.dashboard-sidebar-collapsed .portal-sidebar .menu-contact-footer .contact-text {
      opacity: 0;
      visibility: hidden;
      transform: translateX(-8px);
      pointer-events: none;
      transition: opacity .1s ease, transform .22s cubic-bezier(.2, 0, 0, 1), visibility 0s linear .22s;
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .app-menu-bottom-contact {
      display: block;
      width: 68px;
      padding: var(--space-2) 7px;
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .menu-contact-footer {
      width: 54px;
      justify-items: stretch;
      margin-top: 0;
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .menu-contact-footer .contact-row {
      display: grid;
      grid-template-columns: 18px;
      place-items: center;
      width: 54px;
      min-height: 38px;
      padding: 10px 18px;
    }


    body.dashboard-sidebar-collapsed .portal-sidebar .menu-contact-footer .contact-nav-tree > .nav-toggle {
      display: grid;
      grid-template-columns: 18px;
      place-items: center;
      gap: 0;
      width: 54px;
      min-width: 54px;
      min-height: 38px;
      padding: 10px 18px;
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .menu-contact-footer .contact-nav-tree > .nav-toggle > .icon {
      grid-column: 1;
      justify-self: center;
      margin: 0;
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .menu-contact-footer .nav-chev,
    body.dashboard-sidebar-collapsed .portal-sidebar .menu-contact-footer .nav-sub {
      display: none;
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .app-menu-brand {
      width: 68px;
      min-width: 68px;
      justify-content: flex-start;
      gap: 0;
      padding-inline: 17px;
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .app-menu-brand-logo {
      display: grid;
      width: 34px;
      height: 34px;
      flex-basis: 34px;
      opacity: 1;
      visibility: visible;
      transform: none;
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .app-menu-brand-name {
      position: absolute;
      inset-inline-start: 63px;
      top: 50%;
      width: max-content;
      transform: translate(-8px, -50%);
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .app-menu-link-section {
      width: 68px;
      padding-inline: 7px;
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .app-menu-item {
      display: grid;
      grid-template-columns: 18px;
      place-items: center;
      gap: 0;
      width: 54px;
      min-width: 54px;
      padding-inline: 18px;
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .app-menu-item-label,
    body.dashboard-sidebar-collapsed .portal-sidebar .menu-contact-footer .contact-text {
      position: absolute;
      inset-inline-start: 48px;
      top: 50%;
      transform: translate(-8px, -50%);
    }


    body.dashboard-sidebar-collapsed .portal-sidebar .app-menu-item,
    body.dashboard-sidebar-collapsed .portal-sidebar .contact-nav-tree > .nav-toggle {
      pointer-events: auto;
      cursor: pointer;
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .app-menu-item-icon,
    body.dashboard-sidebar-collapsed .portal-sidebar .menu-contact-footer .contact-icon,
    body.dashboard-sidebar-collapsed .portal-sidebar .menu-contact-footer .contact-instagram-svg {
      grid-column: 1;
      justify-self: center;
      margin: 0;
    }

    body.dashboard-sidebar-collapsed .portal-sidebar .app-menu-divider {
      margin-inline: 10px;
    }
  }

  .portal-topbar .app-header-left,
  .portal-topbar .app-header-right,
  .portal-topbar .app-account-trigger {
    display: flex;
    align-items: center;
  }

  .portal-topbar .app-header-left {
    min-width: 0;
    gap: var(--space-2);
  }

  .portal-topbar .app-header-right {
    margin-inline-start: auto;
    gap: var(--space-2);
  }

  .portal-topbar .app-header-title {
    display: none;
  }

  .portal-topbar button,
  .portal-topbar .app-account-trigger {
    border: 0;
    background: transparent;
    color: var(--sidebar-text);
    cursor: pointer;
  }

  .portal-topbar .app-header-menu-btn,
  .portal-topbar .app-header-theme-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--radius-sm);
  }

  .portal-topbar .app-header-menu-btn:hover,
  .portal-topbar .app-header-theme-btn:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
  }

  .portal-topbar .app-header-theme-btn,
  [data-theme="dark"] .portal-topbar .app-header-theme-btn {
    color: var(--sidebar-text);
  }

  .portal-topbar .app-header-theme-btn svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .portal-topbar .app-header-brand-btn {
    max-width: 260px;
    overflow: hidden;
    color: var(--sidebar-text-active);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .portal-topbar .app-account-trigger {
    gap: var(--space-2);
    min-height: 36px;
  }

  .portal-topbar .app-account-trigger-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-surface-secondary);
  }

  .portal-topbar .app-account-trigger-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .portal-topbar .app-account-trigger-icon svg,
  .portal-account-menu .account-menu-avatar svg {
    display: block;
    width: 16px;
    height: 16px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .portal-topbar .app-account-trigger-icon,
  [data-theme="dark"] .portal-topbar .app-account-trigger-icon {
    border-color: var(--sidebar-border);
    background: var(--sidebar-active);
    color: var(--sidebar-text-active);
  }

  .portal-account-menu .account-menu-avatar {
    background: var(--bg-surface-secondary);
    color: var(--text-secondary);
  }

  [data-theme="dark"] .portal-account-menu .account-menu-avatar {
    border-color: var(--border-color);
    background: var(--bg-surface-secondary);
    color: var(--text-secondary);
  }

  .portal-topbar .app-account-trigger-name {
    color: var(--sidebar-text-active);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
  }


  .portal-topbar .app-account-trigger-icon img,
  .portal-account-menu .account-menu-avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }

  .portal-topbar .app-account-trigger {
    padding: 2px;
    border-radius: 50%;
  }

  .portal-topbar .app-account-trigger:hover {
    background: var(--sidebar-hover);
  }

  @media (min-width: 769px) {
    .portal-topbar {
      border-bottom-color: var(--border-color);
      background: color-mix(in srgb, var(--primary) 20%, var(--bg-surface));
      color: var(--primary);
    }
    html:not([data-theme="dark"]) .portal-topbar button,
    html:not([data-theme="dark"]) .portal-topbar .app-account-trigger,
    html:not([data-theme="dark"]) .portal-topbar .app-header-brand-btn,
    html:not([data-theme="dark"]) .portal-topbar .app-account-trigger-name,
    html:not([data-theme="dark"]) .portal-topbar .hamburger-icon,
    html:not([data-theme="dark"]) .portal-topbar .icon { color: var(--primary); }
    html:not([data-theme="dark"]) .portal-topbar .app-header-menu-btn:hover,
    html:not([data-theme="dark"]) .portal-topbar .app-header-theme-btn:hover,
    html:not([data-theme="dark"]) .portal-topbar .app-account-trigger:hover { background: var(--primary-lt); color: var(--primary-dk); }
    .portal-topbar .app-account-trigger-icon,
    [data-theme="dark"] .portal-topbar .app-account-trigger-icon { border-color: var(--border-color); background: var(--bg-surface-secondary); color: var(--text-secondary); }
    [data-theme="dark"] .portal-topbar { color: var(--text); }
    [data-theme="dark"] .portal-topbar button,
    [data-theme="dark"] .portal-topbar .app-account-trigger,
    [data-theme="dark"] .portal-topbar .hamburger-icon,
    [data-theme="dark"] .portal-topbar .icon { color: var(--text-secondary); }
    [data-theme="dark"] .portal-topbar .app-header-brand-btn,
    [data-theme="dark"] .portal-topbar .app-account-trigger-name { color: var(--text); }
  }

  .portal-sidebar .app-menu-brand,
  .portal-sidebar .app-menu-user,
  .portal-sidebar .app-menu-bottom-contact {
    padding: var(--space-4);
  }

  .portal-sidebar .app-menu-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 56px;
    min-height: 56px;
    padding-block: 0;
    overflow: hidden;
  }

  .portal-sidebar .app-menu-brand + .app-menu-divider {
    margin: 0;
  }

  .portal-sidebar .app-menu-brand-logo {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--primary);
    color: #ffffff;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .portal-sidebar .app-menu-brand-logo:empty::before {
    content: 'CR';
    font-size: 11px;
    font-weight: var(--font-weight-bold);
  }

  .portal-sidebar .app-menu-brand-logo img,
  .portal-sidebar .app-menu-avatar img,
  .portal-account-menu .account-menu-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .portal-sidebar .app-menu-brand-name,
  .portal-sidebar .app-menu-user-name {
    color: #ffffff;
    font-weight: var(--font-weight-bold);
  }

  .portal-sidebar .app-menu-user-role,
  .portal-sidebar .app-menu-contact-heading {
    color: var(--sidebar-text-muted);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .portal-sidebar .app-menu-link-section {
    display: grid;
    gap: 2px;
    padding: var(--space-2);
  }

  .portal-sidebar .app-menu-item,
  .portal-account-menu .app-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    text-align: left;
    cursor: pointer;
  }

  .portal-sidebar .app-menu-item {
    position: relative;
    color: var(--sidebar-text);
  }

  .portal-sidebar .app-menu-item:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-hover);
  }

  .portal-sidebar .app-menu-item.active {
    background: var(--sidebar-active);
    color: var(--sidebar-text-active);
  }

  .portal-sidebar .app-menu-item-icon,
  .portal-account-menu .app-menu-item-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  .portal-sidebar .app-menu-item-icon .icon,
  .portal-account-menu .app-menu-item-icon .icon {
    display: block;
    width: 18px;
    height: 18px;
  }

  .portal-sidebar .app-menu-divider {
    height: 1px;
    margin: var(--space-2) var(--space-4);
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.055);
  }

  .portal-sidebar .app-menu-bottom-contact {
    margin-top: auto;
  }

  .portal-sidebar .menu-contact-footer {
    display: grid;
    gap: 2px;
    margin-top: var(--space-2);
  }

  .portal-sidebar .menu-contact-footer .contact-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-height: 30px;
    padding: 5px 6px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-size: 11.5px;
    text-decoration: none;
  }

  .portal-sidebar .menu-contact-footer .contact-row:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-hover);
  }


  .portal-sidebar .menu-contact-footer .nav-tree { display: flex; flex-direction: column; }
  .portal-sidebar .menu-contact-footer .nav-toggle { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
  .portal-sidebar .menu-contact-footer .nav-toggle .nav-text { flex: 1; }
  .portal-sidebar .menu-contact-footer .nav-link { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-bottom: 1px; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--sidebar-text); font-size: 13px; text-decoration: none; transition: background .12s, color .12s; }
  .portal-sidebar .menu-contact-footer .nav-link:hover { color: var(--sidebar-text-hover); background: var(--sidebar-hover); }
  .portal-sidebar .menu-contact-footer .nav-link > .icon { width: 18px; height: 18px; opacity: .5; }
  .portal-sidebar .menu-contact-footer .nav-link:hover > .icon { opacity: .85; }
  .portal-sidebar .menu-contact-footer .nav-chev { flex-shrink: 0; margin-left: auto; opacity: .55; transition: transform .2s cubic-bezier(.2, 0, 0, 1), opacity .12s; }
  .portal-sidebar .menu-contact-footer .nav-tree.open > .nav-toggle .nav-chev { opacity: 1; transform: rotate(90deg); }
  .portal-sidebar .menu-contact-footer .nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s cubic-bezier(.2, 0, 0, 1); }
  .portal-sidebar .menu-contact-footer .nav-tree.open .nav-sub { grid-template-rows: 1fr; }
  .portal-sidebar .menu-contact-footer .nav-sub > .nav-sub-inner { position: relative; min-height: 0; padding: 4px 0 4px 28px; overflow: hidden; }
  .portal-sidebar .menu-contact-footer .nav-sub > .nav-sub-inner::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 19px; width: 1px; background: rgba(255, 255, 255, .1); }
  .portal-sidebar .menu-contact-footer .nav-sublink { position: relative; display: flex; align-items: center; gap: 10px; margin: 1px 0; padding: 7px 12px; border-radius: var(--radius-sm); color: var(--sidebar-text); font-size: 12.5px; text-decoration: none; transition: background .12s, color .12s, transform .12s; }
  .portal-sidebar .menu-contact-footer .nav-sublink::before { content: ''; position: absolute; top: 50%; left: -9px; width: 8px; height: 1px; background: rgba(255, 255, 255, .1); transform: translateY(-50%); }
  .portal-sidebar .menu-contact-footer .nav-sublink:hover { color: var(--sidebar-text-hover); background: var(--sidebar-hover); text-decoration: none; }
  .portal-sidebar .menu-contact-footer .nav-sublink > .icon,
  .portal-sidebar .menu-contact-footer .contact-whatsapp-icon,
  .portal-sidebar .menu-contact-footer .contact-whatsapp-svg { display: block; width: 16px; height: 16px; flex: 0 0 16px; }
  .portal-sidebar .menu-contact-footer .contact-whatsapp-icon { color: #25d366; }

  .portal-sidebar .menu-contact-footer .contact-icon,
  .portal-sidebar .menu-contact-footer .contact-icon .icon,
  .portal-sidebar .menu-contact-footer .contact-instagram-svg {
    display: block;
    width: 16px;
    height: 16px;
  }

  .portal-sidebar .menu-contact-footer .contact-text {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .collapsed-menu-flyout {
    position: fixed;
    z-index: 2700;
    display: flex;
    flex-direction: column;
    width: 200px;
    min-width: 160px;
    max-width: calc(100vw - 28px);
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12), 0 0 0 1px var(--border-translucent);
    animation: collapsed-menu-in .14s cubic-bezier(.2, 0, 0, 1);
  }

  @keyframes collapsed-menu-in {
    from { opacity: 0; transform: translateY(-2px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .collapsed-menu-flyout-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    line-height: 1.4286;
    text-decoration: none;
    transition: background .1s, color .1s;
  }

  .collapsed-menu-flyout-link:hover,
  .collapsed-menu-flyout-link:focus-visible {
    background: var(--bg-surface-secondary);
    color: var(--text);
    text-decoration: none;
  }

  .collapsed-menu-flyout-link > .icon,
  .collapsed-menu-flyout-link .contact-whatsapp-icon,
  .collapsed-menu-flyout-link .contact-whatsapp-svg {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  .collapsed-menu-flyout-link .contact-whatsapp-icon { color: #25d366; }

  .portal-account-menu {
    position: fixed;
    z-index: 1300;
    top: 48px;
    right: 12px;
    display: none;
    width: max-content;
    min-width: 160px;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 64px);
    padding: 0 0 6px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-hover);
  }

  .portal-account-menu.open {
    display: block;
  }

  .portal-account-menu .app-menu-user {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-surface-secondary);
  }

  .portal-account-menu .account-menu-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--bg-surface-secondary);
    color: var(--text-muted);
  }

  .portal-account-menu .app-menu-user-name,
  .portal-account-menu .app-menu-user-role {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .portal-account-menu .app-menu-user-name {
    color: var(--text);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
  }

  .portal-account-menu .app-menu-user-role {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.2;
  }

  .portal-account-menu .app-menu-item {
    width: calc(100% - 12px);
    min-height: 30px;
    margin: 1px 5px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.2;
  }

  .portal-account-menu .app-menu-item-icon,
  .portal-account-menu .app-menu-item-icon .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  .portal-account-menu .app-menu-item:hover {
    background: var(--bg-surface-secondary);
    color: var(--text);
  }

  .portal-account-menu .app-menu-divider {
    height: 1px;
    margin: 4px 0;
    padding: 0;
    border: 0;
    background: var(--border-color-light);
  }

  .app-menu-overlay {
    display: none;
  }

  #accountMenuOverlay.app-menu-overlay {
    position: fixed;
    z-index: 1190;
    inset: 0;
    background: transparent;
  }

  #accountMenuOverlay.app-menu-overlay.open {
    display: block;
  }

  .hamburger-icon {
    width: 18px;
    height: 18px;
  }

  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-page-heading {
    position: relative;
    margin: 0 0 var(--space-5);
  }

  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-page-kicker {
    margin-bottom: var(--space-1);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.45px;
    text-transform: uppercase;
  }

  .dashboard-welcome {
    margin: 0;
    color: var(--text);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    letter-spacing: -0.2px;
  }

  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-subtitle {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: 13px;
  }

  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-page-heading .dashboard-avatar-wrap {
    display: none !important;
  }

  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-grid.list-view { grid-template-columns: minmax(0, 1fr); }

  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 118px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: border-color 150ms, box-shadow 150ms, transform 150ms;
  }

  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-tile:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
    transform: translateY(-1px);
  }

  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-tile.disabled { cursor: not-allowed; opacity: 0.5; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-tile.disabled:hover { border-color: var(--border-color); box-shadow: var(--shadow); transform: none; }

  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 53px;
    height: 53px;
    flex: 0 0 53px;
    border-radius: var(--radius);
    background: var(--primary-lt);
    color: var(--primary);
  }

  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-icon .icon { width: 27px; height: 27px; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-content { min-width: 0; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-title { color: var(--text); font-size: 17px; font-weight: var(--font-weight-bold); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-description { margin-top: 6px; color: var(--text-muted); font-size: 13px; line-height: 1.45; }

  /* Shared Portal action-card pattern, migrated one dashboard card at a time. */
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card {
    position: relative;
    display: grid;
    grid-template-columns: 53px minmax(0, 1fr) 22px;
    align-items: center;
    gap: var(--space-4);
    min-height: 118px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: border-color 150ms, box-shadow 150ms, transform 150ms;
  }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); transform: translateY(-1px); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-icon { display: grid; place-items: center; width: 53px; height: 53px; border-radius: var(--radius-lg); background: var(--primary-lt); color: var(--primary); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-icon .icon { width: 25px; height: 25px; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-body { min-width: 0; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-title { color: var(--text); font-size: 16px; font-weight: var(--font-weight-bold); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description { margin-top: 3px; color: var(--text-muted); font-size: 13px; line-height: 1.45; font-weight: var(--font-weight-normal); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-arrow { color: var(--text-muted); font-size: 22px; line-height: 1; transition: color 120ms, transform 120ms; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card:hover .dashboard-action-card-arrow { color: var(--primary); transform: translateX(2px); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card.disabled { cursor: not-allowed; opacity: 0.5; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card.disabled:hover { border-color: var(--border-color); box-shadow: var(--shadow-card); transform: none; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-head { display: block; min-width: 0; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-pretitle { margin-bottom: 2px; color: var(--text-muted); font-size: 10px; font-weight: var(--font-weight-bold); letter-spacing: .45px; text-transform: uppercase; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-badge { position: absolute; top: 10px; right: 12px; z-index: 1; border-radius: 3px; padding: 2px 8px; font-size: 11px; font-weight: var(--font-weight-bold); letter-spacing: .25px; white-space: nowrap; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-badge.is-primary { color: var(--primary); background: var(--primary-lt); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-badge.is-success { color: var(--green); background: var(--green-lt); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-badge.is-warning { color: #b45309; background: var(--yellow-lt); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-badge.is-danger { color: var(--red); background: var(--red-lt); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-title { white-space: normal; overflow-wrap: anywhere; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-status { flex: 0 0 auto; white-space: nowrap; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-status.status { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 11.5px; font-weight: var(--font-weight-medium); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-status.status::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-status.status-red { color: var(--red); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-status.status-red::before { background: var(--red); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-status.status-yellow { color: #b45309; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-status.status-yellow::before { background: var(--yellow); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-status.status-green { color: var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-status.status-green::before { background: var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-summary { color: var(--text-muted); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-schedule-summary { color: var(--text-muted); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-schedule-status.status { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 11.5px; font-weight: var(--font-weight-medium); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-schedule-status.status::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-schedule-status.status-green { color: var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-schedule-status.status-green::before { background: var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-schedule-status.status-neutral { color: var(--text-muted); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-schedule-status.status-neutral::before { background: var(--text-muted); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description:has(.dashboard-schedule-status) { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--space-2); row-gap: 2px; min-width: 0; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-user-summary { color: var(--text-muted); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-fee-summary { color: var(--text-muted); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-fee-status.status { display:inline-flex;align-items:center;gap:var(--space-1);font-size:11.5px;font-weight:var(--font-weight-medium); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-fee-status.status::before { content:"";width:6px;height:6px;flex-shrink:0;border-radius:50%; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-fee-status.status-red { color:var(--red); } :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-fee-status.status-red::before { background:var(--red); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-fee-status.status-yellow { color:#b45309; } :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-fee-status.status-yellow::before { background:var(--yellow); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-fee-status.status-green { color:var(--green); } :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-fee-status.status-green::before { background:var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-fee-status.status-neutral { color:var(--text-muted); } :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-fee-status.status-neutral::before { background:var(--text-muted); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description:has(.dashboard-fee-status) { display:flex;align-items:center;flex-wrap:wrap;column-gap:var(--space-2);row-gap:2px;min-width:0; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-announcement-summary { color: var(--text-muted); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-inbox-summary { color: var(--text-muted); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-gallery-summary { color: var(--text-muted); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-settings-summary,
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-admin-summary { color: var(--text-muted); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-settings-status.status,
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-admin-status.status { display:inline-flex;align-items:center;gap:var(--space-1);font-size:11.5px;font-weight:var(--font-weight-medium); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-settings-status.status::before,
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-admin-status.status::before { content:"";width:6px;height:6px;flex-shrink:0;border-radius:50%; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-settings-status.status-green { color:var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-settings-status.status-green::before { background:var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-settings-status.status-yellow { color:#b45309; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-settings-status.status-yellow::before { background:var(--yellow); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-admin-status.status-neutral { color:var(--text-muted); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-admin-status.status-neutral::before { background:var(--text-muted); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description:has(.dashboard-settings-status),
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description:has(.dashboard-admin-status) { display:flex;align-items:center;flex-wrap:wrap;column-gap:var(--space-2);row-gap:2px;min-width:0; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-gallery-status.status { display:inline-flex;align-items:center;gap:var(--space-1);font-size:11.5px;font-weight:var(--font-weight-medium); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-gallery-status.status::before { content:"";width:6px;height:6px;flex-shrink:0;border-radius:50%; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-gallery-status.status-primary { color:var(--primary); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-gallery-status.status-primary::before { background:var(--primary); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-gallery-status.status-yellow { color:#b45309; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-gallery-status.status-yellow::before { background:var(--yellow); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-gallery-status.status-green { color:var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-gallery-status.status-green::before { background:var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description:has(.dashboard-gallery-status) { display:flex;align-items:center;flex-wrap:wrap;column-gap:var(--space-2);row-gap:2px;min-width:0; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description:has(.dashboard-gallery-status) > * { overflow:visible;text-overflow:clip;white-space:normal; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-inbox-status.status { display:inline-flex;align-items:center;gap:var(--space-1);font-size:11.5px;font-weight:var(--font-weight-medium); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-inbox-status.status::before { content:"";width:6px;height:6px;flex-shrink:0;border-radius:50%; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-inbox-status.status-yellow { color:#b45309; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-inbox-status.status-yellow::before { background:var(--yellow); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-inbox-status.status-green { color:var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-inbox-status.status-green::before { background:var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description:has(.dashboard-inbox-status) { display:flex;align-items:center;flex-wrap:wrap;column-gap:var(--space-2);row-gap:2px;min-width:0; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description:has(.dashboard-inbox-status) > * { overflow:visible;text-overflow:clip;white-space:normal; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-announcement-status.status { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 11.5px; font-weight: var(--font-weight-medium); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-announcement-status.status::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-announcement-status.status-yellow { color: #b45309; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-announcement-status.status-yellow::before { background: var(--yellow); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-announcement-status.status-green { color: var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-announcement-status.status-green::before { background: var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description:has(.dashboard-announcement-status) { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--space-2); row-gap: 2px; min-width: 0; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-user-status.status { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 11.5px; font-weight: var(--font-weight-medium); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-user-status.status::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-user-status.status-green { color: var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-user-status.status-green::before { background: var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-user-status.status-red { color: var(--red); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-user-status.status-red::before { background: var(--red); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description:has(.dashboard-user-status) { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--space-2); row-gap: 2px; min-width: 0; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description:has(.dashboard-user-status) > * { overflow: visible; text-overflow: clip; white-space: normal; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description:has(.dashboard-attendance-status) { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--space-2); row-gap: 2px; min-width: 0; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description:has(.dashboard-attendance-status) > * { overflow: visible; text-overflow: clip; white-space: normal; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-card-loader { min-height: 16px; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .spinner-dots { display: inline-flex; align-items: center; gap: var(--space-1); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .spinner-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: dashboard-dot-pulse 1.2s ease-in-out infinite; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .spinner-dots span:nth-child(2) { animation-delay: .2s; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .spinner-dots span:nth-child(3) { animation-delay: .4s; }
  @keyframes dashboard-dot-pulse { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) { :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .spinner-dots span { animation-duration: 2s; } }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-metric { margin-top: 6px; color: var(--text-muted); font-size: 10.5px; line-height: 1.3; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-progress { width: 100%; height: 4px; overflow: hidden; border-radius: 999px; background: var(--bg-surface-secondary); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width 180ms ease, background-color 180ms ease; }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-progress.is-success > span { background: var(--green); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-progress.is-warning > span { background: var(--yellow); }
  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-attendance-progress.is-danger > span { background: var(--red); }

  @media (max-width: 420px) {
    body[data-page="admin-dashboard"] [data-dashboard-page="admin-attendance"] .dashboard-action-card-head { align-items: flex-start; }
    body[data-page="admin-dashboard"] [data-dashboard-page="admin-attendance"] .dashboard-attendance-status.status { white-space: normal; }
    body[data-page="admin-dashboard"] [data-dashboard-page="admin-attendance"] .dashboard-action-card-badge { top: 9px; right: 11px; }
    body[data-page="admin-dashboard"] [data-dashboard-page="admin-attendance"] .dashboard-attendance-metric { margin-top: 3px; }
  }

  :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .update-bubble {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
  }

  @media (min-width: 769px) {
    :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-tile,
    :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card { min-height: 108px; padding: 18px; }
    :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-icon,
    :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-icon { width: 48px; height: 48px; }
    :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-icon { flex-basis: 48px; }
    :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card { grid-template-columns: 48px minmax(0, 1fr) 22px; }
    :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-icon .icon,
    :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-icon .icon { width: 24px; height: 24px; }
    :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-title,
    :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-title { font-size: 15px; }
    :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-description,
    :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-action-card-description { font-size: 12.5px; }
  }

  body[data-page="dashboard"] .dashboard-photo-slider {
    position: relative;
    width: 100%;
    margin: 0 0 var(--space-5);
    overflow: visible;
  }
  body[data-page="dashboard"] .dashboard-photo-slider-window {
    width: 100%;
    overflow: hidden;
    padding: 10px 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: grab;
    touch-action: pan-y;
    perspective: 1100px;
  }
  body[data-page="dashboard"] .dashboard-photo-slider-window:active { cursor: grabbing; }
  body[data-page="dashboard"] .dashboard-photo-slider-track {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.5vw, 8px);
    width: max-content;
    padding: 0;
    transform-style: preserve-3d;
    will-change: transform;
  }
  body[data-page="dashboard"] .dashboard-photo-card {
    position: relative;
    width: auto;
    height: clamp(160px, 19vw, 268px);
    flex: 0 0 clamp(130px, 14.5vw, 205px);
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: clamp(15px, 1.55vw, 24px);
    background: transparent;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transform-origin: center;
    transform: translateY(var(--curve-y, 0px)) rotateY(var(--curve-ry, 0deg)) rotate(var(--curve-r, 0deg)) scale(var(--curve-scale, 1));
    backface-visibility: hidden;
    will-change: transform;
    transition: box-shadow 220ms ease, filter 220ms ease;
  }
  body[data-page="dashboard"] .dashboard-photo-card:hover,
  body[data-page="dashboard"] .dashboard-photo-card:focus-visible {
    outline: none;
    box-shadow: var(--shadow-hover);
    filter: saturate(1.04) contrast(1.02);
  }
  body[data-page="dashboard"] .dashboard-photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
  body[data-page="dashboard"] .dashboard-photo-placeholder { background: linear-gradient(90deg, var(--bg-surface-secondary), var(--border-color-light), var(--bg-surface-secondary)); background-size: 200% 100%; animation: dashboardSkeleton 1.4s linear infinite; }
  @media (max-width: 768px) {
    body[data-page="dashboard"] .dashboard-photo-slider-window { padding: 8px 0 10px; perspective: 850px; }
    body[data-page="dashboard"] .dashboard-photo-slider-track { gap: 3px; }
    body[data-page="dashboard"] .dashboard-photo-card {
      height: clamp(123px, 34.375vw, 169px);
      flex-basis: clamp(85px, 24.25vw, 116px);
      border-radius: 12px;
      box-shadow: var(--shadow-card);
    }
  }

  @keyframes dashboardSkeleton { to { background-position: -200% 0; } }

  @media (max-width: 768px) {
    body.app-menu-open { overflow: hidden; touch-action: none; }
    .portal-topbar {
      position: fixed;
      inset: 0 0 auto 0;
      min-height: 52px;
      padding: 0 12px;
    }

    .portal-sidebar .app-menu-brand {
      height: 52px;
      min-height: 52px;
    }
    html:has(body[data-page="dashboard"]),
    html:has(body[data-page="admin-dashboard"]) {
      min-height: 100%;
      overflow: visible;
    }
    body[data-page="dashboard"],
    body[data-page="admin-dashboard"] {
      min-height: 100vh;
      max-height: none;
      overflow: visible;
    }
    .portal-main {
      height: auto;
      min-height: 100vh;
      margin-inline-start: 0;
      padding: 64px var(--space-4) var(--space-4);
      overflow: visible;
    }
    .portal-sidebar {
      position: fixed;
      z-index: 2600;
      inset: 0 auto 0 0;
      width: 252px;
      height: 100dvh;
      border-right: 1px solid var(--border-color);
      border-left: 0;
      border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
      transform: translateX(-100%);
      transition: transform 180ms ease;
      box-shadow: 18px 0 42px rgba(15, 23, 42, 0.18);
    }
    .portal-sidebar.open { transform: translateX(0); }
    #appMenuOverlay.app-menu-overlay {
      position: fixed;
      z-index: 1240;
      inset: 0;
      background: var(--scrim);
    }
    #appMenuOverlay.app-menu-overlay.open { display: block; }
    .portal-topbar .app-header-left,
    .portal-topbar .app-header-right { min-width: 0; }
    .portal-topbar .app-header-brand-btn {
      max-width: min(52vw, 220px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .portal-topbar .app-header-menu-btn,
    .portal-topbar .app-header-theme-btn,
    .portal-topbar .app-account-trigger {
      min-width: 44px;
      min-height: 44px;
      touch-action: manipulation;
    }
    .portal-topbar .app-account-trigger-name { display: none; }
    .portal-account-menu {
      position: fixed;
      z-index: 2751;
      top: 48px;
      right: 12px;
      bottom: auto;
      left: auto;
      width: max-content;
    min-width: 160px;
      max-width: calc(100vw - 24px);
      height: auto;
      max-height: calc(100dvh - 64px);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      transform-origin: top right;
    }
    :is(body[data-page="dashboard"], body[data-page="admin-dashboard"]) .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* Dashboard announcement marquee retained from the accepted portal component. */
  .flying-announcement-stack {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    width: 100%;
    margin: 0 0 var(--space-5);
    pointer-events: auto;
  }
  .flying-announcement-row {
    --announcement-duration: 23s;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: stretch;
    min-height: 30px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: linear-gradient(96deg, var(--primary-lt), var(--bg-surface-secondary), var(--primary-lt));
    color: var(--text);
    box-shadow: var(--shadow);
  }
  .flying-announcement-viewport { display: flex; align-items: center; min-width: 0; overflow: hidden; touch-action: pan-y; }
  .flying-announcement-track {
    display: flex;
    align-items: center;
    width: max-content;
    min-width: max-content;
    animation: flyingAnnouncementLeftToRight var(--announcement-duration) linear infinite;
    will-change: transform;
  }
  .flying-announcement-row.is-paused .flying-announcement-track,
  .flying-announcement-row:hover .flying-announcement-track { animation-play-state: paused; }
  .flying-announcement-segment {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: calc(100vw - 110px);
    min-height: 28px;
    padding: 0 44px 0 14px;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .flying-announcement-plane { position: relative; display: inline-block; width: 34px; height: 18px; flex: 0 0 34px; }
  .flying-announcement-plane-body { position: absolute; left: 4px; top: 8px; width: 25px; height: 5px; border-radius: 65% 28% 28% 65%; background: var(--primary-dk); }
  .flying-announcement-plane-body::before { content: ''; position: absolute; left: 11px; top: -4px; width: 6px; height: 5px; border: 1px solid var(--primary-dk); border-bottom: 0; border-radius: 5px 5px 0 0; background: var(--primary-lt); }
  .flying-announcement-plane-wing { position: absolute; left: 10px; top: 0; width: 16px; height: 18px; }
  .flying-announcement-plane-wing::before,
  .flying-announcement-plane-wing::after { content: ''; position: absolute; left: 0; width: 16px; height: 3px; border-radius: 50%; background: var(--primary); }
  .flying-announcement-plane-wing::before { top: 2px; }
  .flying-announcement-plane-wing::after { bottom: 2px; }
  .flying-announcement-plane-tail { position: absolute; right: 0; top: 4px; width: 8px; height: 11px; background: var(--primary-dk); clip-path: polygon(0 38%,68% 0,100% 8%,72% 50%,100% 92%,68% 100%,0 64%); }
  .flying-announcement-plane-propeller { display: none; }
  .flying-announcement-flag { position: relative; display: inline-block; width: 19px; height: 16px; flex: 0 0 19px; }
  .flying-announcement-flag::before { content: ''; position: absolute; left: 1px; top: 1px; width: 2px; height: 15px; border-radius: 2px; background: var(--primary-dk); }
  .flying-announcement-flag::after { content: ''; position: absolute; left: 3px; top: 2px; width: 15px; height: 9px; border-radius: 1px 3px 3px 1px; background: var(--yellow); transform-origin: left center; animation: announcementFlagWave .9s ease-in-out infinite; }
  .flying-announcement-text { color: var(--text); font: italic 800 12.5px/1.15 Georgia, serif; letter-spacing: .015em; }
  .flying-announcement-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-width: 30px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--border-color);
    border-radius: 0;
    background: var(--primary-lt);
    color: var(--text-muted);
    box-shadow: none;
    font: 800 16px/1 Georgia, serif;
    cursor: pointer;
  }
  @keyframes flyingAnnouncementLeftToRight { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes announcementFlagWave { 0%,100% { transform: perspective(28px) rotateY(0); } 50% { transform: perspective(28px) rotateY(-12deg); } }
  @media (max-width: 768px) {
    .flying-announcement-stack { width: 100%; margin: 0 0 var(--space-4); gap: 3px; }
    .flying-announcement-row { grid-template-columns: minmax(0, 1fr) 27px; min-height: 28px; }
    .flying-announcement-segment { min-width: calc(100vw + 72px); min-height: 26px; gap: 7px; padding: 0 36px 0 10px; }
    .flying-announcement-text { font-size: 11.5px; }
    .flying-announcement-close { width: 27px; min-width: 27px; min-height: 26px; font-size: 15px; }
  }

  /* =====================================================
     Validation, status, and GAS behavior adapters
  ===================================================== */

  .alert {
    position: relative;
    margin-bottom: var(--space-4);
    padding: 10px var(--space-3);
    border: 1px solid var(--info-border);
    border-radius: var(--radius);
    background: var(--info-bg);
    color: var(--info-text);
    font-size: 13px;
    line-height: 1.45;
  }


  .alert[data-state="error"],
  .alert-danger {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger-text);
  }

  .alert[data-state="success"],
  .alert-success {
    border-color: var(--success-border);
    background: var(--success-bg);
    color: var(--success-text);
  }

  .alert[data-state="warning"],
  .alert-warning {
    border-color: var(--warning-border);
    background: var(--warning-bg);
    color: var(--warning-text);
  }

  .auth-message,
  .forgot-password-alert {
    margin-top: var(--space-4);
  }

  .auth-message:empty,
  .forgot-password-alert:empty,
  .form-error:empty {
    display: none;
  }

  .auth-restore-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 160px;
    color: var(--text-muted);
    font-size: 13px;
  }

  .auth-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: portalSpin 700ms linear infinite;
  }

  .auth-submit[data-busy="true"]::before {
    content: '';
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: portalSpin 700ms linear infinite;
  }

  @keyframes portalSpin {
    to {
      transform: rotate(360deg);
    }
  }

  .toast-container {
    position: fixed;
    z-index: 17000;
    display: grid;
    gap: 10px;
    padding: 16px;
    pointer-events: none;
  }
  .toast-container-top-end { top: 0; right: 0; }
  .toast-container-bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }
  .toast {
    display: none;
    width: min(360px, calc(100vw - 32px));
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-surface);
    box-shadow: var(--shadow-hover);
    color: var(--text);
    pointer-events: auto;
  }
  .toast.show { display: block; }
  .toast-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--border-color);
  }
  .toast-header strong { flex: 1; }
  .toast-body { padding: 11px; }
  .toast-success { border-color: var(--success-border); }
  .toast-danger { border-color: var(--danger-border); }
  .toast-warning { border-color: var(--warning-border); }
  .toast-info { border-color: var(--info-border); }


  .subject-request-modal,
  .portal-modal-overlay {
    position: fixed;
    z-index: 16000;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 20px;
    background: var(--scrim);
    overflow: auto;
  }
  .subject-request-modal.open,
  .portal-modal-overlay.open { display: flex; }
  .subject-request-modal-panel,
  .portal-modal-card {
    width: min(480px, 100%);
    max-height: calc(100dvh - 40px);
    overflow: auto;
    box-sizing: border-box;
    margin: auto;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    color: var(--text);
    box-shadow: var(--shadow-hover);
  }
  .subject-request-modal-panel h3,
  .portal-modal-card h3 { margin: 0 0 8px; color: var(--text); font-size: 18px; line-height: 1.3; }
  .subject-request-modal-panel .page-subtitle,
  .portal-modal-card .page-subtitle { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
  .subject-request-modal-panel .actions,
  .portal-modal-card .actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
  }
  .subject-request-modal-panel .actions button,
  .portal-modal-card .actions button { width: auto; min-width: 0; flex: 0 0 auto; }



  @media (max-width: 480px) {
    .auth-page {
      min-height: 100vh;
      padding: 24px;
      overflow: visible;
    }
    .auth-card {
      max-width: 400px;
      padding: 32px;
      border-radius: var(--radius-lg);
    }
    body[data-page="register"] .auth-page { align-items: flex-start; }
    body[data-page="register"] .registration-card { max-width: 920px; }
    .form-control,
    input,
    select,
    textarea { font-size: 16px; }
    .auth-submit { width: 100%; }
    .toast-host.toast-container {
      top: calc(52px + env(safe-area-inset-top));
      right: 0;
      bottom: auto;
      left: 0;
      width: auto;
    }
    .toast-host .toast { width: min(360px, calc(100vw - 32px)); margin-inline: auto; }
    .subject-request-modal,
    .portal-modal-overlay { align-items: flex-end; padding: 12px; }
    .subject-request-modal-panel,
    .portal-modal-card {
      width: 100%;
      max-height: calc(100dvh - 24px);
      padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
      border-radius: var(--radius-lg);
    }
    .subject-request-modal-panel .actions,
    .portal-modal-card .actions { align-items: stretch; flex-direction: column-reverse; }
    .subject-request-modal-panel .actions button,
    .portal-modal-card .actions button { width: 100%; min-height: 44px; }
    .registration-actions { align-items: stretch; flex-direction: column; }
    #registerSubmit { width: 100%; min-width: 0; height: 44px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }

  .color-preset-popover {
    position: fixed;
    z-index: 2200;
    width: min(400px, calc(100vw - 16px));
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-surface);
    box-shadow: var(--shadow-hover);
  }
  .color-preset-strip {
    display: grid;
    grid-template-columns: repeat(10, 28px);
    grid-template-rows: repeat(2, 28px);
    grid-auto-flow: row;
    gap: 9px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 3px;
    scrollbar-width: thin;
    touch-action: pan-x;
  }
  .color-preset-swatch[data-preset="teal"] { background-color: #3A746F; }
  .color-preset-swatch[data-preset="blue"] { background-color: #3E638E; }
  .color-preset-swatch[data-preset="indigo"] { background-color: #53658F; }
  .color-preset-swatch[data-preset="purple"] { background-color: #66527F; }
  .color-preset-swatch[data-preset="rose"] { background-color: #7A5268; }
  .color-preset-swatch[data-preset="brick"] { background-color: #884F52; }
  .color-preset-swatch[data-preset="terracotta"] { background-color: #8A5A44; }
  .color-preset-swatch[data-preset="ochre"] { background-color: #80652F; }
  .color-preset-swatch[data-preset="sage"] { background-color: #4C704B; }
  .color-preset-swatch[data-preset="cyan"] { background-color: #36717B; }
  .color-preset-swatch[data-preset="blush-navy"] { background: linear-gradient(135deg, #E2B1C2 0 48%, #344B70 52% 100%); }
  .color-preset-swatch[data-preset="aqua-plum"] { background: linear-gradient(135deg, #A6D6D3 0 48%, #604C70 52% 100%); }
  .color-preset-swatch[data-preset="apricot-teal"] { background: linear-gradient(135deg, #EBB895 0 48%, #2F6663 52% 100%); }
  .color-preset-swatch[data-preset="lavender-navy"] { background: linear-gradient(135deg, #CAB9E1 0 48%, #3F526C 52% 100%); }
  .color-preset-swatch[data-preset="sage-burgundy"] { background: linear-gradient(135deg, #BCD2AE 0 48%, #704655 52% 100%); }
  .color-preset-swatch[data-preset="coral-ink"] { background: linear-gradient(135deg, #EBA99C 0 48%, #354F6B 52% 100%); }
  .color-preset-swatch[data-preset="periwinkle-forest"] { background: linear-gradient(135deg, #B5C5E5 0 48%, #365E49 52% 100%); }
  .color-preset-swatch[data-preset="gold-aubergine"] { background: linear-gradient(135deg, #E0C688 0 48%, #59435F 52% 100%); }
  .color-preset-swatch[data-preset="dustyblue-cocoa"] { background: linear-gradient(135deg, #AECADB 0 48%, #665047 52% 100%); }
  .color-preset-swatch[data-preset="orchid-slate"] { background: linear-gradient(135deg, #D2B2DD 0 48%, #40566B 52% 100%); }

  .color-preset-swatch {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--bg-surface);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--border-color);
  }
  .color-preset-swatch:hover { transform: scale(1.08); }
  .color-preset-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--primary);
  }
  .portal-topbar .app-header-color-btn { color: var(--sidebar-text); }

  /* Exact Portal v4.1.1 rules for actively adopted generic components. */
  .nav-link:focus-visible{outline-color:var(--primary);outline-offset:-2px}
    .nav-link{border-radius:var(--radius-sm);color:var(--sidebar-text);font-size:13px;font-weight:var(--font-weight-normal);cursor:pointer;align-items:center;gap:10px;min-height:32px;margin-bottom:1px;padding:6px 12px;text-decoration:none;transition:background .12s,color .12s;display:flex}
    .nav-link:hover{color:var(--sidebar-text-hover);background:var(--sidebar-hover);text-decoration:none}
    .nav-link.active{color:var(--sidebar-text-active);background:var(--sidebar-active);font-weight:var(--font-weight-medium)}
    .nav-link .icon{opacity:.5;flex-shrink:0;width:18px;height:18px}
    .nav-link:hover .icon,.nav-link.active .icon{opacity:.85}
    .nav-link .badge{border-radius:3px;margin-left:auto;padding:1px 6px;font-size:10px;font-weight:600;line-height:1.6}
    .nav-tree{flex-direction:column;display:flex}
    .nav-toggle{font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;width:100%}
    .nav-toggle .nav-text{flex:1}
    .nav-chev{opacity:.55;flex-shrink:0;margin-left:auto;transition:transform .2s cubic-bezier(.2,0,0,1),opacity .12s}
    .nav-toggle:hover .nav-chev{opacity:.9}
    .nav-tree.open>.nav-toggle .nav-chev{opacity:1;transform:rotate(90deg)}
    .nav-tree.has-active>.nav-toggle{color:var(--sidebar-text-hover)}
    .nav-tree.has-active>.nav-toggle .icon{opacity:.85}
    .nav-tree .nav-sub{grid-template-rows:0fr;transition:grid-template-rows .22s cubic-bezier(.2,0,0,1);display:grid}
    .nav-tree.open .nav-sub{grid-template-rows:1fr}
    .nav-tree .nav-sub>.nav-sub-inner{min-height:0;padding:4px 0 4px 28px;position:relative;overflow:hidden}
    .nav-tree .nav-sub>.nav-sub-inner:before{content:"";background:var(--sidebar-border);width:1px;position:absolute;top:4px;bottom:4px;left:19px}
    .nav-tree.open .nav-sub>.nav-sub-inner:before{background:#ffffff1a}
    .nav-sublink{color:var(--sidebar-text);border-radius:var(--radius-sm);align-items:center;gap:10px;margin:1px 0;padding:7px 12px;font-size:12.5px;text-decoration:none;transition:background .12s,color .12s,transform .12s;display:flex;position:relative}
    .nav-sublink:before{content:"";background:var(--sidebar-border);width:8px;height:1px;transition:background .12s,width .12s;position:absolute;top:50%;left:-9px;transform:translateY(-50%)}
    .nav-sublink:hover{color:var(--sidebar-text-hover);background:var(--sidebar-hover);text-decoration:none}
    .nav-sublink:hover:before{background:#ffffff40}
    .nav-sublink.active{color:var(--sidebar-text-active);background:var(--sidebar-active);font-weight:var(--font-weight-medium)}
    .nav-sublink.active:before{background:var(--primary);width:12px;left:-13px}
    .nav-sublink .badge{border-radius:3px;margin-left:auto;padding:1px 6px;font-size:10px;font-weight:600;line-height:1.6}
    .btn{border-radius:var(--radius-sm);height:32px;font:inherit;font-size:12.5px;font-weight:var(--font-weight-medium);cursor:pointer;white-space:nowrap;border:1px solid #0000;align-items:center;gap:5px;padding:0 12px;line-height:1;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;display:inline-flex}
    .btn svg{width:14px;height:14px}
    .btn-primary{background:var(--primary);color:#fff;border-color:var(--primary-dk)}
    .btn-primary:hover{background:var(--primary-dk)}
    .status{align-items:center;gap:var(--space-1);font-size:11.5px;font-weight:var(--font-weight-medium);display:inline-flex}
    .status:before{content:"";border-radius:50%;flex-shrink:0;width:6px;height:6px}
    .status-green{color:var(--green)}
    .status-green:before{background:var(--green)}
    .status-yellow{color:#b45309}
    .status-yellow:before{background:var(--yellow)}
    .status-red{color:var(--red)}
    .status-red:before{background:var(--red)}
    .toast-host{z-index:1000;align-items:flex-end;gap:var(--space-2);pointer-events:none;flex-direction:column;display:flex;position:fixed;bottom:16px;right:16px}
    .toast{pointer-events:auto;background:var(--bg-surface);color:var(--text);border:1px solid var(--border-color);border-radius:var(--radius);box-shadow:0 8px 24px #0f172a1f, 0 0 0 1px var(--border-translucent);font-size:13px;font-weight:var(--font-weight-medium);cursor:pointer;opacity:0;max-width:360px;padding:10px 14px;transition:opacity .18s,transform .18s cubic-bezier(.2,0,0,1);transform:translateY(8px)}
    .toast.show{opacity:1;transform:translateY(0)}
    .toast-success{border-left:3px solid var(--green);padding-left:11px}
    .toast-error{border-left:3px solid var(--red);padding-left:11px}
    .toast-warning{border-left:3px solid var(--yellow);padding-left:11px}
    .btn-danger{background:var(--red);color:#fff;border-color:#a82b2b}
    .btn-danger:hover{background:#a82b2b}
    .btn[aria-busy=true]{pointer-events:none;opacity:.85}
    .btn-group .btn{border-radius:0;margin-right:-1px}
    .btn-group .btn:hover,.btn-group .btn.active{z-index:1}
    .btn-group .btn:first-child{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}
    .btn-group .btn:last-child{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);margin-right:0}
    .btn-group .btn.active{background:var(--primary-lt);color:var(--primary);border-color:var(--primary)}
    .form-group{margin-bottom:16px;display:block}
    .form-label{font-size:12px;font-weight:var(--font-weight-medium);color:var(--text);margin-bottom:6px;display:block}
    .form-label .required{color:var(--red);margin-left:2px}
    .form-control{width:100%;height:36px;font:inherit;color:var(--text);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font);outline:none;padding:0 12px;transition:border-color .15s,box-shadow .15s;display:block}
    .form-control::placeholder{color:var(--text-disabled)}
    .form-control:hover:not(:focus){border-color:var(--text-muted)}
    .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-lt)}
    .form-control:disabled{background:var(--bg-surface-secondary);color:var(--text-muted);cursor:not-allowed}
    .form-control.is-invalid{border-color:var(--red)}
    .form-control.is-invalid:focus{box-shadow:0 0 0 3px var(--red-lt)}
    .form-error{color:var(--red);margin-top:4px;font-size:11.5px}
    textarea.form-control{resize:vertical;height:auto;min-height:90px;padding:8px 12px;line-height:1.5}
    select.form-control{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239ba5b1' stroke-width='1.5'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding-right:32px}
    .form-check{align-items:center;gap:var(--space-2);color:var(--text);cursor:pointer;padding:4px 0;font-size:13px;display:flex}
    .form-check input[type=checkbox],.form-check input[type=radio]{appearance:none;border:1.5px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-surface);cursor:pointer;flex-shrink:0;width:16px;height:16px;margin:0;transition:background .12s,border-color .12s;position:relative}
    .form-check input[type=radio]{border-radius:50%}
    .form-check input:hover{border-color:var(--primary)}
    .form-check input:checked{background:var(--primary);border-color:var(--primary)}
    .form-check input[type=checkbox]:checked:after{content:"";border-bottom:1.5px solid #fff;border-right:1.5px solid #fff;width:4px;height:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-55%)rotate(45deg)}
    .form-check input[type=radio]:checked:after{content:"";background:#fff;border-radius:50%;width:6px;height:6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
    .form-check input:focus-visible{box-shadow:0 0 0 3px var(--primary-lt)}
    .input-group .form-control{padding-left:36px}
    .input-affix .form-control{border:0;border-radius:0;flex:1;min-width:0}
    .input-affix .form-control:focus{box-shadow:none}
    .alert{border-radius:var(--radius);border:1px solid;gap:10px;margin-bottom:12px;padding:10px 12px;font-size:12.5px;line-height:1.45;display:flex}
    .alert .alert-icon{flex-shrink:0;width:16px;height:16px;margin-top:1px}
    .alert .alert-body{flex:1}
    .alert strong{font-weight:var(--font-weight-medium)}
    .alert-success{color:var(--green);background:var(--green-lt);border-color:#2fb34433}
    .alert-warning{color:#b45309;background:var(--yellow-lt);border-color:#f59f0033}
    .compose-form .form-control[id=compose-body]{resize:vertical;min-height:180px;font-family:var(--font)}
    .form-hint{color:var(--text-muted);margin-top:4px;font-size:11.5px}
    .settings-row .form-control{max-width:360px}
    .product-actions .btn{flex:1;justify-content:center;height:40px}


  .header-summary-button{border-radius:var(--radius-sm);cursor:pointer;width:32px;height:32px;color:var(--text-secondary);background:transparent;border:0;justify-content:center;align-items:center;display:flex;position:relative;padding:0;-webkit-tap-highlight-color:transparent}.header-summary-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}@media(hover:hover) and (pointer:fine){.header-summary-button:hover{background:var(--body-bg);color:var(--text)}}.header-summary-button.source-pressed{background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text)}.header-summary-button:focus:not(:focus-visible){outline:none;box-shadow:none}.header-summary-dot{display:none;background:#ef4444;border:0;border-radius:50%;width:6px;height:6px;position:absolute;top:5px;right:5px}.header-summary-button.has-unread .header-summary-dot{display:block}.header-summary-panel{display:none;position:fixed;z-index:2750;top:58px;right:56px;width:360px;max-width:calc(100vw - 24px);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;font-family:var(--font)}.header-summary-panel.open{display:block}.header-summary-panel.is-empty{width:270px}.panel-content{flex-direction:column;max-height:min(72vh,520px);display:flex}.panel-header{align-items:center;gap:var(--space-2);border-bottom:1px solid var(--border-color-light);flex-shrink:0;padding:12px 14px;display:flex}.panel-title{font-size:13px;font-weight:var(--font-weight-bold);color:var(--text)}.panel-badge{font-size:10px;font-weight:var(--font-weight-bold);background:var(--primary-lt);color:var(--primary);border-radius:10px;padding:1px 6px;white-space:nowrap}.panel-action{color:var(--primary)!important;font-size:12px!important;font-weight:var(--font-weight-medium)!important;cursor:pointer;background:transparent!important;border:0!important;margin-left:auto!important;padding:0!important;white-space:nowrap}.panel-list{flex-direction:column;flex:auto;display:flex;overflow-y:auto}.panel-row{border:0!important;border-bottom:1px solid var(--border-color-light)!important;border-radius:0!important;cursor:pointer;text-align:left;font:inherit;background:transparent!important;align-items:flex-start;gap:10px;padding:10px 14px!important;display:flex!important;position:relative;width:100%;color:inherit!important}.panel-row:last-child{border-bottom:0!important}.panel-row.unread:before{content:"";background:var(--primary);border-radius:50%;width:5px;height:5px;position:absolute;top:18px;left:5px}.panel-icon{border-radius:50%;flex:0 0 28px;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex}.panel-icon svg{width:16px;height:16px}.panel-icon-info{background:var(--blue-lt);color:var(--blue)}.panel-icon-success{background:var(--green-lt);color:var(--green)}.panel-icon-warning{background:var(--yellow-lt);color:var(--yellow)}.panel-icon-error{background:var(--red-lt);color:var(--red)}.header-message-avatar{box-sizing:border-box;color:#fff;width:28px;height:28px;min-width:28px;min-height:28px;font-size:10.5px;font-weight:var(--font-weight-bold);line-height:1;border:0;border-radius:50%;flex:0 0 28px;justify-content:center;align-items:center;display:inline-flex!important;visibility:visible!important;opacity:1!important}.header-message-avatar.avatar-0{background:var(--green)}.header-message-avatar.avatar-1{background:var(--blue)}.header-message-avatar.avatar-2{background:var(--purple)}.header-message-avatar.avatar-3{background:var(--yellow)}.header-message-avatar.avatar-4{background:#64748b}.panel-body{flex-direction:column;flex:auto;gap:1px;min-width:0;display:flex}.panel-from{font-size:12.5px;font-weight:var(--font-weight-medium);color:var(--text)}.panel-row.unread .panel-from{font-weight:var(--font-weight-bold)}.panel-text{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.panel-time{color:var(--text-muted);flex-shrink:0;margin-top:2px;font-size:11px}.panel-footer{text-align:center;border-top:1px solid var(--border-color-light);flex-shrink:0;padding:10px 14px}.panel-link{font-size:12px!important;font-weight:var(--font-weight-medium)!important;color:var(--primary)!important;background:transparent!important;border:0!important;padding:0!important;cursor:pointer}.header-summary-empty{color:var(--text-muted);font-size:12px;text-align:center;padding:28px 18px}@media(max-width:768px){.portal-topbar{display:flex!important}.portal-topbar .app-header-left{flex:1 1 auto;min-width:0;justify-content:flex-start}.portal-topbar .app-header-right{flex:0 0 auto;margin-inline-start:auto;gap:3px!important;justify-content:flex-end}.portal-topbar .app-header-brand-btn{max-width:none!important;min-width:0;font-size:13px}.header-summary-button{width:34px!important;min-width:34px!important;height:44px;min-height:44px!important}.header-summary-button.source-pressed,.portal-topbar .app-header-theme-btn.source-pressed,.portal-topbar .color-preset-button.source-pressed{background:transparent!important}.header-summary-panel{top:56px;right:8px;max-width:calc(100vw - 16px)}.header-summary-panel.is-empty{width:max-content;min-width:190px;max-width:calc(100vw - 16px)}.header-summary-panel.is-empty .header-summary-empty{padding:20px 14px;white-space:nowrap}.panel-header{padding:12px}.panel-row{padding:10px 12px!important}}

  /* Header ownership corrections: scoped to the migrated Portal dashboard shell. */
  .header-summary-panel .header-message-avatar {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    border: 0;
    border-radius: 50%;
    color: #fff !important;
    font-size: 10.5px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
  }
  .header-summary-panel .header-message-avatar.avatar-0 { background: #2fb344 !important; }
  .header-summary-panel .header-message-avatar.avatar-1 { background: #206bc4 !important; }
  .header-summary-panel .header-message-avatar.avatar-2 { background: #ae3ec9 !important; }
  .header-summary-panel .header-message-avatar.avatar-3 { background: #f59f00 !important; }
  .header-summary-panel .header-message-avatar.avatar-4 { background: #6c7a91 !important; }

  @media (max-width: 768px) {
    .portal-topbar {
      display: flex !important;
      padding-inline: 6px !important;
    }
    .portal-topbar .app-header-left {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      justify-content: flex-start !important;
      gap: 4px !important;
    }
    .portal-topbar .app-header-brand-btn {
      flex: 0 1 auto !important;
      min-width: 0 !important;
      max-width: none !important;
      margin: 0 !important;
      font-size: 13px !important;
      white-space: nowrap !important;
    }
    .portal-topbar .app-header-right {
      flex: 0 0 auto !important;
      min-width: 0 !important;
      margin-inline-start: auto !important;
      justify-content: flex-end !important;
      gap: 2px !important;
    }
    .portal-topbar .app-header-color-btn,
    .portal-topbar .app-header-theme-btn,
    .portal-topbar .header-summary-button {
      width: 32px !important;
      min-width: 32px !important;
      height: 44px !important;
      min-height: 44px !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    .portal-topbar .app-account-trigger {
      width: 40px !important;
      min-width: 40px !important;
      height: 44px !important;
      min-height: 44px !important;
      margin: 0 !important;
      padding: 0 !important;
      justify-content: center !important;
    }
  }

  /* Header summary panels overlap the topbar edge like the account menu. */
  .header-summary-panel { top: 48px; }
  @media (max-width: 768px) {
    .header-summary-panel { top: 48px; }
  }

  @media (max-width: 768px) and (pointer: coarse) {
    .portal-topbar .app-header-color-btn,
    .portal-topbar .app-header-theme-btn,
    .color-preset-popover .color-preset-swatch {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Pagination */
  .pagination{align-items:center;gap:2px;display:inline-flex}
  .page-btn{border:1px solid var(--border-color);background:var(--bg-surface);border-radius:var(--radius-sm);min-width:30px;height:30px;font:inherit;font-size:12.5px;font-weight:var(--font-weight-medium);color:var(--text-secondary);cursor:pointer;justify-content:center;align-items:center;padding:0 8px;transition:background .1s,color .1s,border-color .1s;display:inline-flex}
  .page-btn:hover:not(:disabled):not(.active){background:var(--bg-surface-secondary);color:var(--text)}
  .page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
  .page-btn:disabled{opacity:.45;cursor:not-allowed}
  .page-btn svg{width:12px;height:12px}
  .page-ellipsis{color:var(--text-disabled);padding:0 4px;font-size:12px}
  .pagination-summary{font-size:12px;color:var(--text-muted)}

  /* Manage Users: Portal User Management source structure. */
  body[data-page="admin-users"]{height:100dvh;overflow:hidden}
  body[data-page="admin-users"] .portal-main{height:100dvh;min-height:0;overflow-x:hidden;overflow-y:auto}
  body[data-page="admin-users"] .admin-users-source-page{width:100%;padding-bottom:84px}
  body[data-page="admin-users"] .admin-users-page-heading{margin:0 0 20px}
  body[data-page="admin-users"] .admin-users-summary-section{margin-bottom:20px}
  body[data-page="admin-users"] .admin-users-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  body[data-page="admin-users"] .admin-users-stat-card{appearance:none;display:flex;align-items:center;gap:16px;min-width:0;min-height:96px;padding:16px 20px;text-align:left;font:inherit;color:var(--text);cursor:pointer;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:border-color .12s,box-shadow .12s,transform .12s}
  body[data-page="admin-users"] .admin-users-stat-card:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--border-color));box-shadow:var(--shadow-card);transform:translateY(-1px)}
  body[data-page="admin-users"] .admin-users-stat-card.pending-tab.active{border-color:var(--yellow);background:var(--yellow-lt);box-shadow:var(--shadow)}
  body[data-page="admin-users"] .admin-users-stat-card.approved-tab.active{border-color:var(--green);background:var(--green-lt);box-shadow:var(--shadow)}
  body[data-page="admin-users"] .admin-users-stat-card.inactive-tab.active{border-color:var(--red);background:var(--red-lt);box-shadow:var(--shadow)}
  body[data-page="admin-users"] .admin-users-stat-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;border-radius:var(--radius-lg)}
  body[data-page="admin-users"] .admin-users-stat-icon svg{display:block;width:20px;height:20px;stroke:currentColor}
  body[data-page="admin-users"] .admin-users-stat-icon-pending{color:var(--yellow);background:var(--yellow-lt)}
  body[data-page="admin-users"] .admin-users-stat-icon-approved{color:var(--green);background:var(--green-lt)}
  body[data-page="admin-users"] .admin-users-stat-icon-inactive{color:var(--red);background:var(--red-lt)}
  body[data-page="admin-users"] .admin-users-stat-content{display:block;min-width:0}
  body[data-page="admin-users"] .admin-users-stat-label{display:block;color:var(--text-muted);font-size:12px;font-weight:var(--font-weight-bold);letter-spacing:.35px;text-transform:uppercase}
  body[data-page="admin-users"] .admin-users-stat-value{display:block;margin-top:1px;color:var(--text);font-size:24px;font-weight:var(--font-weight-bold);line-height:1.1}
  body[data-page="admin-users"] .admin-users-stat-note{display:block;margin-top:4px;color:var(--text-muted);font-size:12px}
  body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-users-filter-panel{margin-bottom:20px;padding:16px 20px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
  body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-users-toolbar{display:grid;grid-template-columns:minmax(180px,240px) minmax(200px,260px);align-items:center;gap:12px}
  body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-users-filter-summary{margin:10px 0 0;color:var(--text-muted);font-size:12px;line-height:1.5}
  body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-users-toolbar .form-control{display:block;width:100%;height:36px;margin:0;font-family:var(--font);font-size:13px;line-height:34px}
  body[data-page="admin-users"] .filter-note.card-subtitle{margin:0;padding:14px 20px 6px;color:var(--text);font-size:13px;font-weight:var(--font-weight-medium);background:var(--bg-surface);border:0}
  body[data-page="admin-users"] .admin-users-list{padding:0 0 76px;background:transparent}
  body[data-page="admin-users"] .admin-users-pagination-block{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:var(--space-4) 0 var(--space-6)}
  body[data-page="admin-users"] .section-header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:8px 0 10px}
  body[data-page="admin-users"] .section-title{margin:0;color:var(--text);font-size:14px;font-weight:var(--font-weight-bold)}
  body[data-page="admin-users"] .user-card{margin:0 0 12px;padding:16px;border:1px solid var(--border-color);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow)}
  body[data-page="admin-users"] .user-card:last-child{margin-bottom:0}
  body[data-page="admin-users"] .user-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  body[data-page="admin-users"] .user-statuses{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap}
  body[data-page="admin-users"] .user-actions{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin-top:12px}
  body[data-page="admin-users"] .admin-user-details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px;border:1px solid var(--border-color);border-radius:var(--radius);overflow:hidden;background:var(--blue-lt)}
  body[data-page="admin-users"] .admin-user-details-grid .list-group-item{cursor:default;background:transparent;border-bottom:1px solid var(--border-color-light)}
  body[data-page="admin-users"] .admin-user-details-grid .list-group-item:nth-child(odd){border-right:1px solid var(--border-color-light)}
  body[data-page="admin-users"] .admin-user-details-grid .list-group-item>span:first-child{color:var(--text);font-weight:var(--font-weight-bold)}
  body[data-page="admin-users"] .admin-user-details-grid .meta{max-width:65%;overflow-wrap:anywhere;text-align:right;color:var(--text-secondary);font-weight:var(--font-weight-normal)}
  body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-user-request-card{position:relative;margin-top:12px;overflow:hidden}
  body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-user-request-card:before{content:"";position:absolute;z-index:1;top:0;bottom:0;left:0;width:4px;background:var(--request-accent,var(--primary))}
  body:is([data-page="admin-users"],[data-page="fee-payment"]) .request-accent-registration{--request-accent:var(--yellow)}
  body:is([data-page="admin-users"],[data-page="fee-payment"]) .request-accent-enrollment{--request-accent:var(--purple)}
  body:is([data-page="admin-users"],[data-page="fee-payment"]) .request-accent-deletion{--request-accent:var(--red)}
  body:is([data-page="admin-users"],[data-page="fee-payment"]) .request-accent-password{--request-accent:var(--azure)}
  body:is([data-page="admin-users"],[data-page="fee-payment"]) .request-accent-subject{--request-accent:var(--subject-color,var(--primary))}
  body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-user-request-card .card-header{align-items:center}
  body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-user-request-card .card-header>div:first-child{min-width:0}
  body[data-page="admin-users"] .admin-user-request-actions,body[data-page="admin-users"] .enrollment-approval-actions,body[data-page="admin-users"] .subject-approval-actions{display:flex;align-items:center;flex:0 0 auto;flex-wrap:wrap;gap:6px;margin:0}
  body[data-page="admin-users"] .admin-user-request-danger{border-color:color-mix(in srgb,var(--red) 30%,var(--border-color));background:var(--red-lt)}
  body[data-page="admin-users"] .admin-user-request-info{border-color:color-mix(in srgb,var(--blue) 30%,var(--border-color));background:var(--blue-lt)}
  body[data-page="admin-users"] .admin-user-request-registration{border-color:color-mix(in srgb,var(--yellow) 35%,var(--border-color));background:var(--yellow-lt)}
  body[data-page="admin-users"] .user-actions .btn,body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-user-request-card .btn{font-family:var(--font)}
  body[data-page="admin-users"] .user-actions .btn,body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-user-request-card .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}
  body[data-page="admin-users"] .user-actions .btn-outline:hover:not(:disabled),body[data-page="admin-users"] .user-actions .btn-outline:focus-visible{background:var(--bg-surface-secondary);border-color:var(--text-muted);color:var(--text)}
  @media(max-width:768px){body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-user-request-card .card-header{align-items:flex-start;flex-direction:column}body[data-page="admin-users"] .admin-user-request-actions,body[data-page="admin-users"] .enrollment-approval-actions,body[data-page="admin-users"] .subject-approval-actions{width:100%}body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-user-request-card .btn{flex:1 1 auto}body[data-page="admin-users"] .admin-user-details-grid{grid-template-columns:1fr}body[data-page="admin-users"] .admin-user-details-grid .list-group-item:nth-child(odd){border-right:0}}
  @media(max-width:768px){body[data-page="admin-users"] .admin-users-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}body[data-page="admin-users"] .admin-users-stat-card{min-height:72px;padding:10px;gap:8px}body[data-page="admin-users"] .admin-users-stat-icon{width:34px;height:34px;flex-basis:34px}body[data-page="admin-users"] .admin-users-stat-icon svg{width:16px;height:16px}body[data-page="admin-users"] .admin-users-stat-label{font-size:10px}body[data-page="admin-users"] .admin-users-stat-card.pending-tab{padding-left:6px;padding-right:6px;gap:6px}body[data-page="admin-users"] .admin-users-stat-value{font-size:15px}body[data-page="admin-users"] .admin-users-stat-note{display:none}body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-users-filter-panel{padding:12px 14px}body:is([data-page="admin-users"],[data-page="fee-payment"]) .admin-users-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-page="admin-users"] .admin-users-list{padding:0 0 76px}body[data-page="admin-users"] .user-actions{justify-content:stretch}body[data-page="admin-users"] .user-actions .btn{flex:1 1 auto}}

  body[data-page="admin-users"] #adminUsersRequestFilter[hidden]{display:none!important}
  body[data-page="admin-users"] .admin-user-identity{display:flex;align-items:center;gap:12px;min-width:0}
  body[data-page="admin-users"] .user-name{margin:0;color:var(--text);font-weight:var(--font-weight-medium)}
  body[data-page="admin-users"] .user-meta{margin-top:2px;color:var(--text-muted);font-size:12px}
  body[data-page="admin-users"] .user-statuses>.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:var(--font-weight-medium);line-height:1.2}
  body[data-page="admin-users"] .user-statuses>.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  body[data-page="admin-users"] .badge-approved{color:var(--green);background:var(--green-lt)}
  body[data-page="admin-users"] .badge-pending{color:#b45309;background:var(--yellow-lt)}
  body[data-page="admin-users"] .badge-rejected{color:var(--red);background:var(--red-lt)}
  body[data-page="admin-users"] .badge-disabled{color:var(--text-muted);background:var(--bg-surface-secondary)}
  body[data-page="admin-users"] .btn-success{background:var(--green);border-color:#1a8a32;color:#fff}
  body[data-page="admin-users"] .btn-success:hover:not(:disabled){background:#1a8a32}
  /* Profile & Preference page: source-owned component section. */
    body[data-page="admin-users"] .admin-user-identity{display:flex;align-items:center;gap:12px;min-width:0}
body[data-page="profile"] .profile-source-page{width:100%}
  body[data-page="profile"] .profile-page-heading{margin-bottom:20px}
  body[data-page="profile"] .profile-primary-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,2fr);gap:16px;margin-bottom:16px}
  body[data-page="profile"] .profile-secondary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
  body[data-page="profile"] .profile-identity-card{display:flex;flex-direction:column;min-height:410px}
  body[data-page="profile"] .profile-identity-main{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px;text-align:center}
  body[data-page="profile"] .profile-avatar{display:flex;align-items:center;justify-content:center;width:160px;height:160px;flex:0 0 160px;margin-bottom:15px;overflow:hidden;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dk));color:#fff;font-size:42px;font-weight:600}
  body[data-page="profile"] .profile-avatar img{width:100%;height:100%;object-fit:cover}
  body[data-page="profile"] .profile-avatar svg{width:44px;height:44px}
  body[data-page="profile"] .profile-display-name{color:var(--text);font-size:14px;font-weight:600}
  body[data-page="profile"] .profile-display-meta{margin-top:2px;color:var(--text-muted);font-size:11.5px}
  body[data-page="profile"] .profile-photo-button{margin-top:12px;transition:background .12s,border-color .12s,color .12s,transform .12s}
  body[data-page="profile"] .profile-photo-button:hover,
  body[data-page="profile"] .profile-photo-button:focus-visible{background:var(--primary-lt);border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}
  body[data-page="profile"] .profile-file-name{margin-top:5px;color:var(--text-muted);font-size:10.5px}
  body[data-page="profile"] .profile-summary{display:none}
  body[data-page="profile"] .profile-completion{display:flex;flex-direction:column;align-items:center;padding:16px;border-top:1px solid var(--border-color-light)}
  body[data-page="profile"] .profile-progress{--profile-angle:calc(var(--profile-progress)*3.6deg);position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--primary) var(--profile-angle),var(--border-color) 0)}
  body[data-page="profile"] .profile-progress:before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--bg-surface)}
  body[data-page="profile"] .profile-progress span{position:relative;color:var(--text);font-size:12px;font-weight:600}
  body[data-page="profile"] .profile-completion-label{margin-top:7px;color:var(--text-muted);font-size:11px}
  body[data-page="profile"] .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  :is(body[data-page="profile"],body[data-page="register"]) .profile-phone-row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px}
  body[data-page="profile"] textarea.profile-textarea{height:64px;padding:8px 10px;resize:vertical}
  body[data-page="profile"] .profile-card-actions{display:flex;justify-content:flex-end;margin-top:auto;padding:0 16px 16px}
  body[data-page="profile"] .profile-list-body{padding:2px 16px}
  body[data-page="profile"] .profile-list-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-color-light);cursor:pointer}
  body[data-page="profile"] .profile-list-row:last-child{border-bottom:0}
  body[data-page="profile"] .profile-row-title{display:block;color:var(--text);font-size:12.5px;font-weight:500}
  body[data-page="profile"] .profile-row-description{display:block;margin-top:2px;color:var(--text-muted);font-size:10.5px}
  body[data-page="profile"] .profile-subject-table-head,
  body[data-page="profile"] .profile-subject-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,.55fr) 54px;align-items:center;gap:12px}
  body[data-page="profile"] .profile-subject-table-head{padding:8px 16px;background:var(--bg-surface-secondary);border-bottom:1px solid var(--border-color);color:var(--text-muted);font-size:10px;font-weight:600;text-transform:uppercase}
  body[data-page="profile"] .profile-subject-row{padding:10px 16px;border-bottom:1px solid var(--border-color-light);cursor:pointer}
  body[data-page="profile"] .profile-subject-row:last-child{border-bottom:0}
  body[data-page="profile"] .profile-subject-row:hover{background:var(--bg-surface-secondary)}
  body[data-page="profile"] .profile-subject-name{display:flex;align-items:center;gap:8px;color:var(--text);font-size:12.5px;font-weight:500}
  body[data-page="profile"] .profile-subject-status{font-size:11.5px;font-weight:500}
  body[data-page="profile"] .profile-subject-status.is-opted{color:var(--green)}
  body[data-page="profile"] .profile-subject-status.is-not-opted{color:var(--text-muted)}
  body[data-page="profile"] .profile-subject-select{text-align:center}
  body[data-page="profile"] .profile-subject-select input{appearance:none;position:relative;width:16px;height:16px;margin:0;border:1.5px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-surface);cursor:pointer}
  body[data-page="profile"] .profile-subject-select input:checked{background:var(--primary);border-color:var(--primary)}
  body[data-page="profile"] .profile-subject-select input:checked:after{content:"";position:absolute;left:5px;top:1px;width:4px;height:8px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg)}
  body[data-page="profile"] .profile-subject-select input:disabled{opacity:.55;cursor:not-allowed}
  body[data-page="profile"] .switch{position:relative;display:inline-flex;cursor:pointer}
  body[data-page="profile"] .switch input{position:absolute;opacity:0;pointer-events:none}
  body[data-page="profile"] .switch .track{position:relative;width:36px;height:20px;border-radius:999px;background:var(--border-color);transition:background .15s}
  body[data-page="profile"] .switch .track:before{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .15s}
  body[data-page="profile"] .switch input:checked+.track{background:var(--primary)}
  body[data-page="profile"] .switch input:checked+.track:before{transform:translateX(16px)}
  html:has(body[data-page="profile"]),body[data-page="profile"]{height:100%;overflow:hidden}
  body[data-page="profile"] .portal-main{height:100dvh;min-height:0;overflow-x:hidden;overflow-y:auto;padding-bottom:96px}
  body[data-page="profile"] .profile-information-card{display:flex;flex-direction:column}
  body[data-page="profile"] .profile-information-card .card-body{flex:1 1 auto}
  body[data-page="profile"] .profile-photo-button.is-upload-ready{background:var(--primary);border-color:var(--primary-dk);color:#fff;box-shadow:0 0 0 3px var(--primary-lt);font-weight:var(--font-weight-bold)}
  body[data-page="profile"] .profile-photo-button.is-upload-ready:hover,body[data-page="profile"] .profile-photo-button.is-upload-ready:focus-visible{background:var(--primary-dk);color:#fff;transform:translateY(-1px)}

  /* Source button-group treatment for the existing quick actions. */
  :is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .app-action-bar{position:fixed;left:50%;bottom:16px;z-index:1850;width:auto;min-height:0;transform:translateX(-50%)}
  :is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .app-action-bar-inner{display:inline-flex;align-items:stretch;min-height:0;padding:0;overflow:hidden;border:1px solid var(--border-color);border-radius:var(--radius);background:var(--bg-surface);box-shadow:0 6px 20px #0f172a1a}
  :is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .app-action-btn{display:inline-flex;align-items:center;justify-content:center;width:52px;height:40px;min-width:52px;min-height:40px;padding:0;border:0;border-right:1px solid var(--border-color);border-radius:0;background:var(--bg-surface);color:var(--text-secondary);box-shadow:none;transition:background .1s,color .1s}
  :is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .app-action-btn:last-child{border-right:0}
  :is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .app-action-btn:hover,
  :is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .app-action-btn:focus-visible{background:var(--bg-surface-secondary);color:var(--primary);outline:0}
  :is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .app-action-btn.active{background:var(--primary-lt);color:var(--primary)}
  :is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .app-action-btn.active:after{display:none}
  :is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .app-action-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:18px}
  :is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .app-action-icon svg,
  :is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .app-action-icon .icon{display:block;width:18px;height:18px}

  .modal-backdrop{position:fixed;inset:0;z-index:2200;display:flex;align-items:center;justify-content:center;padding:24px;background:#0f172a73;backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .18s}
  .modal-backdrop.show{opacity:1;pointer-events:auto}
  @media(max-width:700px){.modal-backdrop.attendance-summary-modal{backdrop-filter:none;-webkit-backdrop-filter:none}}
  .modal-dialog{display:flex;flex-direction:column;width:100%;max-width:360px;overflow:hidden;border:1px solid var(--border-color);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:0 24px 48px #0f172a2e;opacity:0;transform:translateY(8px) scale(.98);transition:transform .22s,opacity .18s}
  .modal-backdrop.show .modal-dialog{opacity:1;transform:none}
  .modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-color-light)}
  .modal-header h3{margin:0;color:var(--text);font-size:15px;font-weight:600}
  .modal-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);font-size:20px;cursor:pointer}
  .modal-close:hover{background:var(--bg-surface-secondary);color:var(--text)}
  .modal-body{padding:16px 18px}.modal-body p{margin:0;color:var(--text-secondary);font-size:13px;line-height:1.55}
  .modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--border-color-light)}
  body.modal-open{overflow:hidden}
  #confirmationModalText{white-space:pre-line}
  #confirmationModalExtra .form-group{margin:18px 0 0}
  #confirmationModalExtra label{display:block;margin-bottom:7px;font-size:13px;font-weight:var(--font-weight-semibold);color:var(--text)}
  #confirmationModalExtra textarea{width:100%;min-height:96px;resize:vertical}
  @media(max-width:920px){body[data-page="profile"] .profile-primary-grid,body[data-page="profile"] .profile-secondary-grid{grid-template-columns:1fr}}
  @media(max-width:768px){:is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .portal-topbar .app-header-back-btn{position:relative;left:3px;margin:0;padding:0;line-height:1}body[data-page="profile"] .form-row{grid-template-columns:1fr}body[data-page="profile"] .profile-avatar{width:144px;height:144px;flex-basis:144px}body[data-page="profile"] .profile-subject-table-head,body[data-page="profile"] .profile-subject-row{grid-template-columns:minmax(0,1fr) 92px 44px;gap:8px}body[data-page="profile"] .profile-card-actions .btn{width:100%}body[data-page="profile"] .portal-main{padding-bottom:84px}:is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .app-action-bar{bottom:10px}.modal-backdrop{padding:12px}:is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .toast-host{position:fixed;top:auto;right:12px;bottom:calc(68px + env(safe-area-inset-bottom));left:12px;z-index:1900;align-items:center}:is(body[data-page="profile"],body[data-page="admin-users"],body[data-page="attendance"],body[data-page="admin-attendance"],body[data-page="admin-fees"],body[data-page="fee-payment"],body[data-page="admin-schedule"],body[data-page="timetable"],body[data-page="gallery"],body[data-page="admin-gallery"],body[data-page="class-photos"],:is(body[data-page="admin-messages"],body[data-page="student-inbox"])) .toast-host .toast{width:min(360px,100%);margin-inline:auto}}




  body[data-page="attendance"] .attendance-month-field>.form-label{font-weight:var(--font-weight-bold)}
  /* Attendance pages: accepted common shell plus preserved attendance semantics. */
  :is(body[data-page="attendance"],body[data-page="admin-attendance"]) .attendance-source-page{width:100%;padding-bottom:84px}
  :is(body[data-page="attendance"],body[data-page="admin-attendance"]) .attendance-page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 20px}
  :is(body[data-page="attendance"],body[data-page="admin-attendance"]) .card{min-width:0;padding:16px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
  :is(body[data-page="attendance"],body[data-page="admin-attendance"]) .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  :is(body[data-page="attendance"],body[data-page="admin-attendance"]) .form-field label{display:block;margin-bottom:5px;color:var(--text);font-size:11.5px;font-weight:var(--font-weight-medium)}
  :is(body[data-page="attendance"],body[data-page="admin-attendance"]) .form-field input:not([type="checkbox"]):not([type="radio"]),:is(body[data-page="attendance"],body[data-page="admin-attendance"]) .form-field select{display:block;width:100%;height:34px;padding:0 10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text);font:inherit;font-size:12.5px}
  :is(body[data-page="attendance"],body[data-page="admin-attendance"]) .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
  :is(body[data-page="attendance"],body[data-page="admin-attendance"]) .btn-group{display:inline-flex;overflow:hidden;border:1px solid var(--border-color);border-radius:var(--radius)}
  :is(body[data-page="attendance"],body[data-page="admin-attendance"]) .btn-group .btn{border:0;border-right:1px solid var(--border-color);border-radius:0}
  :is(body[data-page="attendance"],body[data-page="admin-attendance"]) .btn-group .btn:last-child{border-right:0}
  @media(max-width:768px){:is(body[data-page="attendance"],body[data-page="admin-attendance"]) .attendance-page-heading{align-items:stretch;flex-direction:column}:is(body[data-page="attendance"],body[data-page="admin-attendance"]) .form-grid{grid-template-columns:1fr}:is(body[data-page="attendance"],body[data-page="admin-attendance"]) .actions .btn{width:100%}:is(body[data-page="attendance"],body[data-page="admin-attendance"]) .btn-group{display:grid;grid-template-columns:1fr}:is(body[data-page="attendance"],body[data-page="admin-attendance"]) .btn-group .btn{border-right:0;border-bottom:1px solid var(--border-color)}:is(body[data-page="attendance"],body[data-page="admin-attendance"]) .btn-group .btn:last-child{border-bottom:0}}
  /* =====================================================
     Attendance Calendar
  ===================================================== */

  .attendance-calendar {
    margin-top: 12px;
  }

  .attendance-calendar-head,
  .attendance-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
  }

  .att-day-head {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 6px 0;
  }

  .att-day-cell,
  button.att-day-cell,
  #attendanceCalendar button.att-day-cell {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-height: 38px !important;
    height: 38px !important;
    width: 100% !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--bg-surface) !important;
    background-image: none !important;
    color: var(--sidebar-text-hover) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font: inherit !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  .att-day-cell.empty,
  #attendanceCalendar .att-day-cell.empty {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: default !important;
  }

  .att-day-cell.selectable,
  button.att-day-cell.selectable,
  #attendanceCalendar button.att-day-cell.selectable {
    cursor: pointer !important;
  }

  .att-day-number,
  .att-day-cell .att-day-number,
  button.att-day-cell .att-day-number,
  #attendanceCalendar button.att-day-cell .att-day-number {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1 !important;
  }

  .att-day-cell.selectable:hover,
  button.att-day-cell.selectable:hover,
  #attendanceCalendar button.att-day-cell.selectable:hover {
    background: var(--green-lt) !important;
    border-color: var(--green) !important;
    color: var(--text) !important;
  }
  .att-day-cell.ineligible,
  button.att-day-cell.ineligible,
  #attendanceCalendar button.att-day-cell.ineligible {
    cursor: not-allowed;
  }

  .att-day-cell.is-date-ineligible {
    opacity: 0.55;
  }


  .subject-choice {
    --subject-color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 2px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .subject-choice input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--subject-color);
    outline: 0;
    box-shadow: none;
  }

  .subject-choice:focus-within {
    outline: 0;
    box-shadow: none;
  }

  .subject-choice.is-closed {
    opacity: 0.62;
    cursor: not-allowed;
  }
  .subject-choice-name {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
  }
  .subject-closed-label {
    margin-left: 1px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  .subject-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 14px;
    margin-top: 10px;
  }

  .subject-color-dot {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border-radius: 50%;
    background: var(--subject-color, var(--text-muted));
  }


  .subject-ring-cell {
    position: relative;
    isolation: isolate;
    background: var(--bg-surface) !important;
    color: var(--text) !important;
  }

  .subject-ring-cell:hover,
  .subject-ring-cell:active,
  .subject-ring-cell:focus {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
  }

  .subject-date-ring {
    position: absolute;
    box-sizing: border-box;
    inset: calc(2px + (var(--ring-index) * 4px));
    border: 3px solid var(--subject-color, var(--text-muted));
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
  }
  @media (max-width:700px) {
    .subject-date-ring { inset: calc(2px + (var(--ring-index) * 3px)); border-width: 2.5px; }
  }
  @media (min-width:701px) {
    .subject-date-ring { inset:auto;top:50%;left:50%;width:calc(32px - (var(--ring-index) * 6px));height:calc(32px - (var(--ring-index) * 6px));aspect-ratio:1 / 1;transform:translate(-50%,-50%); }
  }

  .subject-ring-cell .att-day-number {
    position: relative;
    z-index: 2;
    color: var(--text) !important;
  }

  .attendance-records-wrap {
    width: 100%;
    overflow-x: visible;
  }
  .attendance-records-table {
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 9px;
    background: transparent;
  }
  .attendance-records-table th {
    padding: 9px 14px;
    color: var(--text);
    background: color-mix(in srgb, var(--bg-surface) 44%, transparent);
    border: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .015em;
    text-align: left !important;
  }
  .attendance-records-table th:first-child { border-radius: 10px 0 0 10px; }
  .attendance-records-table th:last-child { border-radius: 0 10px 10px 0; }
  .attendance-records-table td {
    padding: 12px 14px;
    vertical-align: top;
    background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 18%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 18%, transparent);
  }
  .attendance-records-table th:first-child,
  .attendance-records-table td:first-child {
    width: 30%;
    min-width: 170px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .attendance-records-table td:first-child strong {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: clamp(14px, 1.7vw, 16px);
    line-height: 1.25;
  }
  .attendance-records-table td:first-child {
    border-left: 1px solid color-mix(in srgb, var(--border-color) 18%, transparent);
    border-radius: 12px 0 0 12px;
  }
  .attendance-records-table td:last-child {
    border-right: 1px solid color-mix(in srgb, var(--border-color) 18%, transparent);
    border-radius: 0 12px 12px 0;
  }

  body[data-page="attendance"] .attendance-month-native{display:block;max-width:360px}
  .attendance-subject-line {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--border-color-light);
    border-left: 4px solid var(--subject-color, var(--text-muted));
    border-radius: var(--radius);
    background: var(--bg-surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    line-height: var(--line-height);
  }
  .attendance-student-subject-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
  .attendance-student-subject-copy strong{color:var(--text);font-size:13px;font-weight:var(--font-weight-bold);line-height:1.35}
  .attendance-student-subject-copy small{color:var(--text-muted);font-size:11.5px;font-weight:var(--font-weight-normal);line-height:1.45}
  [data-attendance-summary-popout] {
    cursor: pointer;
  }

  [data-attendance-summary-popout]:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .32);
    outline-offset: 3px;
  }

  .attendance-student-subject-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .attendance-student-subject-copy strong { font-size: 13px; }
  .attendance-student-subject-copy small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  body[data-page="attendance"] #attendanceSubjectSummary {
    margin-top: 14px;
  }

  .attendance-record-subject {
    display: grid;
    grid-template-columns: 12px minmax(72px, auto) minmax(105px, auto) 1fr;
    align-items: center;
    gap: 7px 9px;
    padding: 6px 0;
    color: var(--text);
    font-size: 13px;
  }

  .attendance-record-subject + .attendance-record-subject {
    border-top: 1px solid color-mix(in srgb, var(--border-color) 13%, transparent);
  }

  .attendance-record-count {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  .attendance-record-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 3px;
    min-width: 0;
  }

  .attendance-date-token {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 21px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 2%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--text) 5%, var(--border-color));
    color: var(--text);
    font-size: 11px;
    font-weight: 750;
  }


  .fee-subject-label {
    margin-top: 3px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
  }



  body[data-page="admin-attendance"] .dashboard-welcome{font-size:24px;line-height:1.25}
  body[data-page="admin-attendance"] .section-title{font-size:17px;line-height:1.35;margin:0 0 16px;font-weight:700}
  body[data-page="admin-attendance"] .form-field>label{font-size:13px;font-weight:600}
  body[data-page="admin-attendance"] .top-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  body[data-page="admin-attendance"] .top-actions .btn{width:auto;min-width:0}
  body[data-page="admin-attendance"] :is(#attendanceStudentSelect,#closeStudentSelect){width:100%;max-width:520px;appearance:auto;-webkit-appearance:menulist;padding-right:30px}
  body[data-page="admin-attendance"] #attendanceSubjectBox.subject-chip-row{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
  body[data-page="admin-attendance"] #attendanceSubjectBox .subject-choice{display:grid;grid-template-columns:20px 12px minmax(0,1fr);align-items:start;gap:10px;width:100%;margin:0;padding:8px 0;border:0;background:transparent}
  body[data-page="admin-attendance"] #attendanceSubjectBox .subject-choice input[type="checkbox"]{width:18px;height:18px;margin:2px 0 0;accent-color:var(--subject-color)}
  body[data-page="admin-attendance"] #attendanceSubjectBox .subject-color-dot{width:12px;height:12px;margin-top:5px}
  body[data-page="admin-attendance"] #attendanceSubjectBox .subject-choice-content{display:grid;min-width:0;gap:2px}
  body[data-page="admin-attendance"] #attendanceSubjectBox .subject-choice-name{font-size:14px;font-weight:700;line-height:1.3}
  body[data-page="admin-attendance"] #attendanceSubjectBox :is(.subject-choice-count,.subject-choice-dates){display:block;color:var(--text-secondary);font-size:12px;font-weight:600;line-height:1.45}
  body[data-page="admin-attendance"] .attendance-hours-modal .attendance-hours-panel.modal-dialog{width:min(480px,calc(100vw - 32px));max-width:480px;margin:auto;text-align:center;border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-lg)}
  body[data-page="admin-attendance"] .attendance-hours-panel .modal-body{padding:26px 26px 18px}
  body[data-page="admin-attendance"] .attendance-hours-panel h3{margin:0 0 10px;font-size:22px;font-weight:700;line-height:1.3}
  body[data-page="admin-attendance"] .attendance-hours-context{color:var(--text-secondary);font-size:14px;font-weight:600;line-height:1.4}
  body[data-page="admin-attendance"] .attendance-hours-stepper{display:grid;grid-template-columns:48px minmax(86px,1fr) 48px;align-items:center;gap:18px;max-width:260px;margin:22px auto 10px}
  body[data-page="admin-attendance"] .attendance-hours-stepper .btn{width:48px;height:44px;padding:0;font-size:24px;line-height:42px}
  body[data-page="admin-attendance"] .attendance-hours-stepper strong{font-size:24px;font-weight:600}
  body[data-page="admin-attendance"] .attendance-hours-panel .modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--border-color)}
  body[data-page="admin-attendance"] .attendance-records-table th{font-size:12px;font-weight:700}
  body[data-page="admin-attendance"] .attendance-records-table td{font-size:12px}
  body[data-page="admin-attendance"] .attendance-records-table td:first-child strong{font-size:13px}
  body[data-page="admin-attendance"] .attendance-record-subject{font-size:12px;grid-template-columns:12px minmax(70px,auto) minmax(100px,auto) 1fr}
  body[data-page="admin-attendance"] .attendance-record-count{font-size:11px}
  body[data-page="admin-attendance"] .attendance-record-dates{font-size:11px}
  @media(max-width:767px){body[data-page="admin-attendance"] .dashboard-welcome{font-size:21px}body[data-page="admin-attendance"] .form-grid{grid-template-columns:1fr}body[data-page="admin-attendance"] :is(#attendanceStudentSelect,#closeStudentSelect){max-width:none}body[data-page="admin-attendance"] .attendance-hours-modal{padding:16px}}

  html:has(body[data-page="admin-attendance"]),html:has(body[data-page="attendance"]),body[data-page="admin-attendance"],body[data-page="attendance"]{height:100%;overflow:hidden}
  body[data-page="admin-attendance"] .portal-main,body[data-page="attendance"] .portal-main{height:100dvh;min-height:0;overflow-x:hidden;overflow-y:auto;padding-bottom:96px}
  body[data-page="admin-attendance"] #attendanceRecords{clear:both;margin-top:18px}
  body[data-page="admin-attendance"] .attendance-records-wrap{width:100%;overflow-x:auto;border:0}
  body[data-page="admin-attendance"] .attendance-records-table{width:100%;margin:0;border-collapse:separate;border-spacing:0;background:var(--bg-surface)}
  body[data-page="admin-attendance"] .attendance-records-table th{padding:11px 14px;border:0;border-bottom:2px solid var(--border-color);background:var(--secondary-bg);font-size:12px;font-weight:600;text-align:left}
  body[data-page="admin-attendance"] .attendance-records-table td{padding:12px 14px;border:0;border-bottom:1px solid var(--border-color-light);font-size:12px;vertical-align:top}
  body[data-page="admin-attendance"] .attendance-records-table tbody tr:hover{background:var(--bg-surface-secondary)}
  body[data-page="attendance"] #attendanceInfo[hidden]{display:none}
  body[data-page="attendance"] #attendanceInfo{display:block;margin-top:16px}

/* Attendance final owner aligned to Profile and Manage Users shell */
body[data-page="admin-attendance"],body[data-page="attendance"]{font-size:13px;line-height:1.42857143}
body[data-page="admin-attendance"] .portal-content,body[data-page="attendance"] .portal-content{width:100%;min-width:0}
body[data-page="admin-attendance"] .attendance-page-heading,body[data-page="attendance"] .attendance-page-heading{align-items:flex-start;margin-bottom:20px}
body[data-page="admin-attendance"] .dashboard-welcome,body[data-page="attendance"] .dashboard-welcome{font-size:24px;line-height:1.2;font-weight:600}
body[data-page="admin-attendance"] .dashboard-subtitle,body[data-page="attendance"] .dashboard-subtitle{margin-top:4px;font-size:13px;line-height:1.5;color:var(--text-secondary)}
body[data-page="admin-attendance"] .attendance-section-card,body[data-page="attendance"] .attendance-student-card{padding:0;overflow:visible}
body[data-page="admin-attendance"] .attendance-section-card>.card-header,body[data-page="attendance"] .attendance-info-header{padding:14px 18px;border-bottom:1px solid var(--border-color-light)}
body[data-page="admin-attendance"] .attendance-section-card>.card-header .card-title,body[data-page="attendance"] .attendance-info-header .card-title{font-size:15px;line-height:1.4;font-weight:600}
body[data-page="admin-attendance"] .attendance-section-card>form,body[data-page="admin-attendance"] .attendance-section-card>.form-grid,body[data-page="admin-attendance"] .attendance-section-card>.actions,body[data-page="admin-attendance"] .attendance-section-card>#attendanceRecords{margin-left:18px;margin-right:18px}
body[data-page="admin-attendance"] .attendance-section-card>form{padding-top:18px;padding-bottom:18px}
body[data-page="admin-attendance"] .attendance-section-card>.form-grid{padding-top:18px}
body[data-page="admin-attendance"] .attendance-section-card>.actions{margin-top:18px;margin-bottom:18px}
body[data-page="admin-attendance"] .top-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body[data-page="admin-attendance"] .top-actions .btn{width:auto;min-width:0;margin:0}
body[data-page="admin-attendance"] .top-actions .btn.active,body[data-page="admin-attendance"] .top-actions .btn[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
body[data-page="admin-attendance"] .top-actions .btn-outline:not(.active){background:var(--bg-surface);border-color:var(--border-color);color:var(--text)}
body[data-page="admin-attendance"] .form-grid{column-gap:24px;row-gap:18px;align-items:start}
body[data-page="admin-attendance"] .attendance-primary-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-page="admin-attendance"] .form-field{min-width:0;margin:0}
body[data-page="admin-attendance"] .form-field>label,body[data-page="attendance"] .form-field>label{display:block;margin:0 0 6px;font-size:13px;line-height:1.4;font-weight:600}
body[data-page="admin-attendance"] .form-control,body[data-page="attendance"] .form-control{height:38px;min-height:38px;font-size:13px;line-height:1.42857143}
body[data-page="admin-attendance"] .form-help,body[data-page="attendance"] .form-help{margin-top:6px;font-size:12px;line-height:1.45;color:var(--text-secondary)}
body[data-page="admin-attendance"] #attendanceRecords{clear:both;margin-top:18px;margin-bottom:18px;min-width:0}
body[data-page="admin-attendance"] .attendance-records-wrap{width:100%;max-width:100%;overflow-x:auto;border:0;border-radius:0}
body[data-page="admin-attendance"] .attendance-records-table{width:100%;margin:0;border-collapse:collapse;background:var(--bg-surface)}
body[data-page="admin-attendance"] .attendance-records-table th{padding:10px 12px;border:0;border-bottom:2px solid var(--border-color);background:var(--secondary-bg);font-size:12px;line-height:1.4;font-weight:600;text-align:left}
body[data-page="admin-attendance"] .attendance-records-table td{padding:10px 12px;border:0;border-bottom:1px solid var(--border-color-light);font-size:12px;line-height:1.45;vertical-align:top}
body[data-page="admin-attendance"] .attendance-records-table tbody tr:hover{background:var(--bg-surface-secondary)}
body[data-page="admin-attendance"] .attendance-record-subject{font-size:12px;line-height:1.4}
body[data-page="admin-attendance"] .attendance-hours-panel .modal-title{font-size:15px;line-height:1.4;font-weight:600}
body[data-page="admin-attendance"] .attendance-hours-context{font-size:13px;line-height:1.5}
body[data-page="admin-attendance"] .attendance-hours-stepper .btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;padding:0;font-size:18px;line-height:1}
body[data-page="admin-attendance"] .attendance-hours-stepper strong{font-size:15px;line-height:34px;font-weight:600}
body[data-page="attendance"] .attendance-student-card>.form-grid{padding:18px 18px 0}
body[data-page="attendance"] #attendanceList{padding:18px}
body[data-page="attendance"] .attendance-info{display:block;margin:0 18px 18px;border:1px solid var(--border-color);border-radius:var(--radius);background:var(--bg-surface)}
body[data-page="attendance"] .attendance-info[hidden]{display:none!important}
body[data-page="attendance"] .attendance-info-content{padding:8px 18px 14px}
body[data-page="attendance"] .attendance-subject-line{display:grid;grid-template-columns:12px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--border-color-light);background:transparent;font-size:13px}
body[data-page="attendance"] .attendance-subject-line:last-child{border-bottom:0}
body[data-page="attendance"] .attendance-student-subject-copy{display:grid;gap:2px;min-width:0}
body[data-page="attendance"] .attendance-student-subject-copy strong{font-size:13px;line-height:1.4;font-weight:600}
body[data-page="attendance"] .attendance-student-subject-copy small{font-size:12px;line-height:1.45;color:var(--text-secondary)}
@media(max-width:767px){body[data-page="admin-attendance"] .attendance-page-heading{display:block}body[data-page="admin-attendance"] .top-actions{margin-top:14px}body[data-page="admin-attendance"] .attendance-primary-fields{grid-template-columns:1fr}body[data-page="admin-attendance"] .dashboard-welcome,body[data-page="attendance"] .dashboard-welcome{font-size:21px}}


/* Attendance state and subject-color corrections. */
body[data-page="admin-attendance"] #closeSubjectBox .subject-radio-choice{background:transparent!important;color:var(--text)!important}
body[data-page="admin-attendance"] #closeSubjectBox .subject-radio-choice::before{display:none!important}
body[data-page="admin-attendance"] #closeSubjectBox .subject-radio-control{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;border:2px solid var(--subject-color);border-radius:50%;background:transparent;box-shadow:none}
body[data-page="admin-attendance"] #closeSubjectBox .subject-radio-control:checked{border-color:var(--subject-color);background:radial-gradient(circle,var(--subject-color) 0 4px,transparent 5px)}
body[data-page="admin-attendance"] #closeFeeCalculation{border-left-color:var(--subject-color,var(--primary))!important;border-radius:5px var(--radius) var(--radius) 5px!important}
body[data-page="attendance"] .attendance-info{margin:16px 18px 18px!important;border:0!important;border-radius:0!important;background:transparent!important}
body[data-page="attendance"] .attendance-info-content{padding:0!important}
body[data-page="attendance"] .attendance-subject-line{border:0!important;border-left:4px solid var(--subject-color)!important;border-radius:5px var(--radius) var(--radius) 5px!important;background:color-mix(in srgb,var(--subject-color) 6%,var(--bg-surface))!important;padding:12px 14px!important;margin-bottom:10px!important}


body[data-page="admin-attendance"] .attendance-upload-control{display:flex;align-items:center;gap:10px;min-height:38px}
body[data-page="admin-attendance"] .attendance-upload-control .attendance-file-control{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body[data-page="admin-attendance"] .attendance-upload-control .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:112px;margin:0}
body[data-page="admin-attendance"] .attendance-upload-control .form-help{margin:0;font-size:12px;overflow-wrap:anywhere}
body[data-page="admin-attendance"] .attendance-upload-dots{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:18px}
body[data-page="admin-attendance"] .attendance-upload-dots i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:attendanceUploadDot .8s ease-in-out infinite}
body[data-page="admin-attendance"] .attendance-upload-dots i:nth-child(2){animation-delay:.12s}body[data-page="admin-attendance"] .attendance-upload-dots i:nth-child(3){animation-delay:.24s}
@keyframes attendanceUploadDot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
@media(min-width:768px){body[data-page="admin-attendance"] .attendance-primary-fields{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:24px!important;row-gap:18px!important}body[data-page="admin-attendance"] .attendance-primary-fields>.form-field:not(.full-width){width:100%!important;max-width:none!important}body[data-page="admin-attendance"] :is(#attendanceStudentSelect,#attendanceMonth,#closeMonth,#closeStudentSelect){width:100%!important;max-width:none!important}}


body[data-page="admin-attendance"] .attendance-records-host>*,body[data-page="attendance"] .attendance-info:not([hidden]){animation:attendanceReveal .28s ease both}
@keyframes attendanceReveal{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:767px){
 body[data-page="admin-attendance"] .attendance-page-heading .top-actions{display:flex;flex-wrap:nowrap;gap:5px;width:100%;overflow:hidden}
 body[data-page="admin-attendance"] .attendance-page-heading .top-actions .btn{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;flex:1 1 0;min-width:0;padding:8px 3px;font-size:12px!important;line-height:1.2;font-weight:600;white-space:nowrap}
 body[data-page="admin-attendance"] .attendance-records-wrap{overflow:visible!important}
 body[data-page="admin-attendance"] .attendance-records-table,body[data-page="admin-attendance"] .attendance-records-table tbody,body[data-page="admin-attendance"] .attendance-records-table tr,body[data-page="admin-attendance"] .attendance-records-table td{display:block;width:100%}
 body[data-page="admin-attendance"] .attendance-records-table thead{display:none}
 body[data-page="admin-attendance"] .attendance-records-table tr{padding:12px 0;border-bottom:1px solid var(--border-color-light)}
 body[data-page="admin-attendance"] .attendance-records-table td{padding:0!important;border:0!important;font-size:12px!important}
 body[data-page="admin-attendance"] .attendance-records-table td:first-child{margin-bottom:8px;font-size:13px!important}
 body[data-page="admin-attendance"] .attendance-record-subject{grid-template-columns:12px minmax(0,1fr)!important;gap:4px 8px!important;padding:8px 0!important}
 body[data-page="admin-attendance"] .attendance-record-subject>.subject-color-dot{grid-row:1/span 3}
 body[data-page="admin-attendance"] .attendance-record-count,body[data-page="admin-attendance"] .attendance-record-dates{grid-column:2;font-size:11px!important;white-space:normal!important;overflow-wrap:anywhere}
}


/* Final Close Month alignment and subject-summary ownership. */
body[data-page="admin-attendance"] #closeSubjectBox .subject-radio-choice{align-items:center!important;line-height:1.4!important}
body[data-page="admin-attendance"] #closeSubjectBox .subject-radio-control{flex:0 0 16px;align-self:center!important}
body[data-page="admin-attendance"] #closeSubjectBox .subject-choice-content{display:flex!important;align-items:center!important;min-height:16px}
body[data-page="admin-attendance"] #closeSubjectBox .subject-choice-name{display:inline-flex;align-items:center;margin:0!important;line-height:16px!important}
body[data-page="admin-attendance"] #closeFeeCalculation.close-fee-calculation{border:0!important;border-left:4px solid var(--subject-color)!important;border-radius:6px var(--radius) var(--radius) 6px!important;background:color-mix(in srgb,var(--subject-color) 9%,var(--bg-surface))!important;box-shadow:none!important;padding:14px 16px!important}
body[data-page="admin-attendance"] #closeFeeCalculation.close-fee-calculation>strong{color:var(--text)!important}


/* Close Month subject choice: radio and wording share one horizontal center line. */
body[data-page="admin-attendance"] #closeSubjectBox .subject-radio-choice{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  vertical-align:middle;
}
body[data-page="admin-attendance"] #closeSubjectBox .subject-radio-control{
  flex:0 0 16px!important;
  align-self:center!important;
  margin:0!important;
}
body[data-page="admin-attendance"] #closeSubjectBox .subject-choice-content{
  display:inline-flex!important;
  flex:0 1 auto!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:16px!important;
  margin:0!important;
}
body[data-page="admin-attendance"] #closeSubjectBox .subject-choice-name{
  display:inline-flex!important;
  align-items:center!important;
  margin:0!important;
  line-height:16px!important;
  white-space:nowrap;
}


/* Attendance summaries: exact-origin animation target and balanced readable sizing. */
body[data-page="admin-attendance"] .attendance-record-subject{display:grid!important;grid-template-columns:12px minmax(90px,auto) minmax(0,1fr)!important;align-items:center!important;column-gap:9px!important;row-gap:5px!important}
body[data-page="admin-attendance"] .attendance-record-subject>.subject-color-dot{grid-column:1!important;grid-row:1!important}
body[data-page="admin-attendance"] .attendance-record-subject>strong{grid-column:2!important;grid-row:1!important}
body[data-page="admin-attendance"] .attendance-record-count{grid-column:3!important;grid-row:1!important;white-space:normal!important}
body[data-page="admin-attendance"] .attendance-record-dates{grid-column:3!important;grid-row:2!important;padding-top:1px}
.attendance-summary-overlay{position:fixed;inset:0;z-index:14000;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--scrim);opacity:0;visibility:hidden;transition:opacity .2s ease}
.attendance-summary-overlay.show{opacity:1;visibility:visible}
.attendance-summary-panel{position:relative!important;left:auto!important;top:auto!important;width:min(600px,calc(100vw - 40px))!important;min-height:190px;max-height:calc(100dvh - 40px);box-sizing:border-box;overflow:auto;margin:auto;padding:24px!important;border:1px solid var(--border-color)!important;border-left:4px solid var(--subject-color,var(--text-muted))!important;border-radius:var(--radius-lg)!important;background:var(--bg-surface)!important;color:var(--text)!important;box-shadow:var(--shadow-hover)!important;font-family:var(--font)!important;cursor:default!important;will-change:transform}
.attendance-summary-panel.attendance-record-subject{grid-template-columns:14px minmax(110px,auto) minmax(0,1fr)!important;align-content:center!important;column-gap:13px!important;row-gap:10px!important;font-size:14px!important;line-height:1.5!important}
.attendance-summary-panel.attendance-record-subject>strong{font-size:16px!important;line-height:1.4!important}
.attendance-summary-panel .attendance-record-count{font-size:14px!important;line-height:1.5!important}
.attendance-summary-panel .attendance-record-dates{grid-column:3!important;grid-row:2!important;font-size:13px!important;line-height:1.5!important}
.attendance-summary-panel .attendance-date-token{font-size:13px!important;min-width:25px;height:24px}
.attendance-summary-panel.attendance-subject-line{display:grid!important;grid-template-columns:14px minmax(0,1fr)!important;align-content:center!important;gap:12px!important;font-size:14px!important}
.attendance-summary-panel .attendance-student-subject-copy{gap:5px!important}
.attendance-summary-panel .attendance-student-subject-copy strong{font-size:16px!important;line-height:1.4!important}
.attendance-summary-panel .attendance-student-subject-copy small{font-size:13px!important;line-height:1.5!important}
@media(max-width:767px){body[data-page="admin-attendance"] .attendance-records-wrap{width:100%!important;max-width:100%!important;overflow-x:hidden!important}body[data-page="admin-attendance"] .attendance-records-table{display:table!important;width:100%!important;max-width:100%!important;table-layout:fixed!important}body[data-page="admin-attendance"] .attendance-records-table thead{display:table-header-group!important}body[data-page="admin-attendance"] .attendance-records-table tbody{display:table-row-group!important}body[data-page="admin-attendance"] .attendance-records-table tr{display:table-row!important;width:auto!important;padding:0!important}body[data-page="admin-attendance"] .attendance-records-table th,body[data-page="admin-attendance"] .attendance-records-table td{display:table-cell!important;width:auto!important;padding:8px 5px!important;vertical-align:top!important;overflow-wrap:anywhere}body[data-page="admin-attendance"] .attendance-records-table th:first-child,body[data-page="admin-attendance"] .attendance-records-table td:first-child{width:29%!important;margin:0!important}body[data-page="admin-attendance"] .attendance-records-table th:last-child,body[data-page="admin-attendance"] .attendance-records-table td:last-child{width:71%!important}body[data-page="admin-attendance"] .attendance-record-subject{grid-template-columns:10px minmax(58px,auto) minmax(0,1fr)!important;column-gap:6px!important;row-gap:4px!important;padding:7px 0!important}body[data-page="admin-attendance"] .attendance-record-count{font-size:10px!important;line-height:1.35!important}body[data-page="admin-attendance"] .attendance-record-dates{grid-column:3!important;grid-row:2!important;font-size:10px!important;line-height:1.4!important;white-space:normal!important;overflow-wrap:anywhere}.attendance-summary-overlay{padding:14px}.attendance-summary-panel{width:min(420px,calc(100vw - 28px))!important;min-height:170px;max-height:calc(100dvh - 28px);padding:20px 16px!important}.attendance-summary-panel.attendance-record-subject{grid-template-columns:12px minmax(82px,auto) minmax(0,1fr)!important;column-gap:9px!important;row-gap:8px!important;font-size:13px!important}.attendance-summary-panel.attendance-record-subject>strong{font-size:15px!important}.attendance-summary-panel .attendance-record-count{font-size:12px!important}.attendance-summary-panel .attendance-record-dates{grid-column:3!important;font-size:12px!important}.attendance-summary-panel .attendance-date-token{font-size:12px!important;min-width:23px;height:22px}.attendance-summary-panel .attendance-student-subject-copy strong{font-size:15px!important}.attendance-summary-panel .attendance-student-subject-copy small{font-size:12px!important}}


  /* Admin Fees migrated page owner */
  body[data-page="admin-fees"]{height:100dvh;overflow:hidden}
  body[data-page="admin-fees"] .portal-main{height:100dvh;min-height:0;overflow-x:hidden;overflow-y:auto}
  body[data-page="admin-fees"] .admin-fees-source-page{width:100%;padding-bottom:84px}
  body[data-page="admin-fees"] .admin-fees-page-heading{margin:0 0 20px}
  body[data-page="admin-fees"] .admin-fees-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}
  body[data-page="admin-fees"] .admin-fees-stat-card{appearance:none;display:flex;align-items:center;justify-content:flex-start;gap:16px;min-width:0;min-height:96px;padding:16px 20px;text-align:left;font:inherit;color:var(--text);cursor:pointer;background:var(--bg-surface);border:1px solid;border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:border-color .12s,box-shadow .12s,transform .12s}
  body[data-page="admin-fees"] .admin-fees-stat-card:hover{box-shadow:var(--shadow-card);transform:translateY(-1px)}
  body[data-page="admin-fees"] .admin-fees-stat-blue{border-color:var(--info-border);background:var(--info-bg)}
  body[data-page="admin-fees"] .admin-fees-stat-green{border-color:var(--green);background:var(--green-lt)}
  body[data-page="admin-fees"] .admin-fees-stat-red{border-color:var(--red);background:var(--red-lt)}
  body[data-page="admin-fees"] .admin-fees-stat-card[aria-pressed="true"]{box-shadow:inset 0 0 0 1px currentColor,var(--shadow-card)}
  body[data-page="admin-fees"] .admin-fees-stat-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;border-radius:var(--radius-lg);background:var(--bg-surface)}
  body[data-page="admin-fees"] .admin-fees-stat-icon .icon{width:20px;height:20px}
  body[data-page="admin-fees"] .admin-fees-stat-icon.total{color:var(--info-text)}
  body[data-page="admin-fees"] .admin-fees-stat-icon.paid{color:var(--green)}
  body[data-page="admin-fees"] .admin-fees-stat-icon.due{color:var(--red)}
  body[data-page="admin-fees"] .admin-fees-stat-copy{display:flex;min-width:0;align-items:flex-start;flex-direction:column}
  body[data-page="admin-fees"] .admin-fees-stat-label{font-size:13px;font-weight:var(--font-weight-semibold);line-height:1.2;text-transform:uppercase;color:var(--text-secondary)}
  body[data-page="admin-fees"] .admin-fees-stat-value{margin-top:4px;font-size:20px;font-weight:var(--font-weight-semibold);line-height:1.15;color:var(--text);overflow-wrap:anywhere}
  body[data-page="admin-fees"] .admin-fees-filter-panel,body[data-page="admin-fees"] .admin-fees-records-panel{margin-bottom:20px}
  body[data-page="admin-fees"] .admin-fees-filter-panel .x_content{padding-top:0}
  body[data-page="admin-fees"] .admin-fees-filter-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  body[data-page="admin-fees"] .admin-fees-filter-row .form-group{margin:0}
  body[data-page="admin-fees"] .admin-fees-filter-help{margin:10px 0 0;color:var(--text-secondary)}
  body[data-page="admin-fees"] .admin-fees-records-panel{padding:0;border:1px solid var(--border-color);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow);overflow:hidden}
  body[data-page="admin-fees"] .admin-fees-records-panel .x_content,body[data-page="admin-fees"] .admin-fees-records{min-width:0;padding:0;overflow:visible}
  body[data-page="admin-fees"] .fee-year-table-card{min-width:0;overflow:visible;border:0;background:transparent}
  body[data-page="admin-fees"] .fee-year-table{display:block;width:100%;color:var(--text);border:0}
  body[data-page="admin-fees"] .fee-year-table thead{display:none}
  body[data-page="admin-fees"] .fee-year-table tbody{display:block}
  body[data-page="admin-fees"] .fee-month-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:18px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-surface)}
  body[data-page="admin-fees"] .fee-month-row:last-child{border-bottom:0}
  body[data-page="admin-fees"] .fee-month-row>td{display:block;width:auto;padding:0;border:0;background:transparent}
  body[data-page="admin-fees"] .fee-month-cell{font-size:14px;font-weight:var(--font-weight-bold);color:var(--text)}
  body[data-page="admin-fees"] .fee-month-collapsible-cell{grid-column:1/-1}
  body[data-page="admin-fees"] .fee-month-row-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;padding:0 0 12px;border:0;background:transparent;color:var(--text);font:inherit;font-weight:var(--font-weight-bold);text-align:left;cursor:pointer}
  body[data-page="admin-fees"] .fee-month-row-chevron{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
  body[data-page="admin-fees"] .fee-month-row:not(.is-collapsed) .fee-month-row-chevron{transform:rotate(225deg)}
  body[data-page="admin-fees"] .fee-month-row.is-collapsed .fee-month-collapsible-content{display:none}
  body[data-page="admin-fees"] .fee-student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,280px));align-items:start;justify-content:start;gap:16px;min-width:0;overflow:visible}
  body[data-page="admin-fees"] .fee-student-group{display:flex;min-width:0;max-width:280px;flex-direction:column;gap:10px;padding:0;border:0;background:transparent}
  body[data-page="admin-fees"] .fee-student-group-name{display:flex;align-items:center;gap:10px;margin:0;padding:0 2px;font-size:13px;font-weight:var(--font-weight-semibold);color:var(--text)}
  body[data-page="admin-fees"] .fee-student-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;color:#fff;font-size:14px;font-weight:600;line-height:1}
  body[data-page="admin-fees"] .fee-student-avatar.admin-avatar-tone-0{background:#2fb344}
  body[data-page="admin-fees"] .fee-student-avatar.admin-avatar-tone-1{background:#206bc4}
  body[data-page="admin-fees"] .fee-student-avatar.admin-avatar-tone-2{background:#ae3ec9}
  body[data-page="admin-fees"] .fee-student-avatar.admin-avatar-tone-3{background:#f59f00}
  body[data-page="admin-fees"] .fee-student-avatar-status{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border:2px solid var(--bg-surface);border-radius:50%;background:var(--text-muted)}
  body[data-page="admin-fees"] .fee-student-avatar-status.is-verified{background:var(--green)}
  body[data-page="admin-fees"] .fee-student-avatar-status.is-submitted{background:var(--info-text)}
  body[data-page="admin-fees"] .fee-student-avatar-status.is-pending{background:var(--warning-text)}
  body[data-page="admin-fees"] .fee-student-avatar-status.is-rejected{background:var(--red)}
  body[data-page="admin-fees"] .fee-student-name-text{min-width:0;color:var(--text);font-size:14px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
  body[data-page="admin-fees"] .fee-student-subject-grid{display:flex;flex-direction:column;gap:10px}
  body[data-page="admin-fees"] .fee-student-tile{position:relative;display:block;min-width:0;max-width:100%;overflow:hidden;padding:16px;border:1px solid var(--border-color);border-radius:var(--radius);background:var(--bg-surface);box-shadow:var(--shadow);color:var(--text);cursor:pointer;overflow-wrap:anywhere;transition:border-color .12s,box-shadow .12s,transform .12s}
  body[data-page="admin-fees"] .fee-student-tile:hover,body[data-page="admin-fees"] .fee-student-tile:focus-visible{border-color:var(--primary);box-shadow:var(--shadow-card);transform:translateY(-1px);outline:0}
  body[data-page="admin-fees"] .fee-card-header{display:flex;align-items:flex-start;gap:10px;min-width:0}
  body[data-page="admin-fees"] .fee-subject-label{min-width:0;padding-right:92px;font-weight:var(--font-weight-semibold)}
  body[data-page="admin-fees"] .fee-card-status{position:absolute;top:12px;right:12px;display:flex;max-width:92px;align-items:flex-end;flex-direction:column;gap:6px}
  body[data-page="admin-fees"] .fee-status-pill{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:var(--font-weight-semibold);line-height:1;white-space:nowrap}
  body[data-page="admin-fees"] .fee-status-line{display:flex;align-items:center;justify-content:flex-end;gap:7px}
  body[data-page="admin-fees"] .fee-reminder-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--border-color);border-radius:50%;background:var(--bg-surface);color:var(--warning-text);cursor:pointer}
  body[data-page="admin-fees"] .fee-reminder-icon:disabled{cursor:not-allowed;opacity:.55}
  body[data-page="admin-fees"] .fee-reminder-bell{display:block;width:16px;height:16px}
  body[data-page="admin-fees"] .fee-reminder-count{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border:2px solid var(--bg-surface);border-radius:999px;background:var(--warning-text);color:#fff;font-size:9px;font-weight:var(--font-weight-bold);line-height:1}
  body[data-page="admin-fees"] .fee-reminder-icon.is-ringing .fee-reminder-bell{animation:feeReminderRing .7s ease-in-out;transform-origin:50% 16%}
  @keyframes feeReminderRing{0%,100%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-16deg)}45%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}
  body[data-page="admin-fees"] .fee-card-status .fee-card-proof{width:48px;max-width:48px;margin:0}
  body[data-page="admin-fees"] .fee-card-status .admin-proof-trigger{display:block;width:48px;height:48px;padding:0;overflow:hidden;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-surface-secondary);cursor:pointer}
  body[data-page="admin-fees"] .fee-card-status .admin-proof-trigger img{display:block;width:100%;height:100%;object-fit:cover}
  body[data-page="admin-fees"] .fee-card-status .admin-proof-link{display:block;max-width:92px;overflow:hidden;font-size:10px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
  body[data-page="admin-fees"] .fee-mini-line,body[data-page="admin-fees"] .fee-mini-note{margin-top:6px;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
  body[data-page="admin-fees"] .fee-action-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border-color)}
  body[data-page="admin-fees"] .fee-action-row .btn{margin:0}
  body[data-page="admin-fees"] .fee-card-viewer{z-index:3000}
  body[data-page="admin-fees"] #confirmationModal{z-index:3200}
  body[data-page="admin-fees"] .fee-card-viewer-dialog{max-width:720px}
  body[data-page="admin-fees"] .fee-card-viewer-body{padding:18px;overflow-y:auto}
  body[data-page="admin-fees"] .fee-card-viewer-body .fee-student-tile{padding:18px;border-radius:var(--radius-lg);box-shadow:none;cursor:default;transform:none}
  body[data-page="admin-fees"] .fee-card-viewer-body .fee-card-header{display:block;min-height:0;padding:0}
  body[data-page="admin-fees"] .fee-card-viewer-body .fee-card-status-expanded{position:relative;top:auto;right:auto;float:right;max-width:120px;margin:0 0 12px 18px;align-items:flex-end;transform:translateY(0)}
  body[data-page="admin-fees"] .fee-card-viewer-body .fee-card-status-expanded .fee-card-proof{margin-top:8px}
  body[data-page="admin-fees"] .fee-card-viewer-body .fee-student-tile-expanded::after{display:block;clear:both;content:""}
  body[data-page="admin-fees"] .fee-card-viewer-body .fee-subject-label{padding-right:0;font-size:15px;font-weight:var(--font-weight-semibold);color:var(--text)}
  body[data-page="admin-fees"] .fee-card-viewer-body .fee-mini-line,body[data-page="admin-fees"] .fee-card-viewer-body .fee-mini-note{margin-top:10px;padding:0;border:0;background:transparent;font-size:13px;line-height:1.5;color:var(--text-secondary)}
  body[data-page="admin-fees"] .fee-card-viewer-body .fee-history-list{margin:12px 0 0;padding-left:18px;color:var(--text-secondary);font-size:13px;line-height:1.5}
  body[data-page="admin-fees"] .fee-card-viewer-footer{justify-content:flex-end}
  body[data-page="admin-fees"] .fee-card-viewer-footer .fee-action-row{display:flex;justify-content:flex-end;margin:0 0 0 auto;padding:0;border:0}
  body[data-page="admin-fees"] .admin-proof-viewer{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,23,42,.72)}
  body[data-page="admin-fees"] .admin-proof-viewer-panel{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);overflow:hidden;border:1px solid var(--border-color);border-radius:var(--radius-lg);background:#0f172a;box-shadow:0 24px 48px rgba(15,23,42,.28);transform-origin:center}
  body[data-page="admin-fees"] .admin-proof-viewer-panel img{display:block;width:auto;height:auto;max-width:calc(100vw - 50px);max-height:calc(100dvh - 50px);object-fit:contain}
  body[data-page="admin-fees"].fee-card-viewer-open{overflow:hidden}
  @media(max-width:768px){body[data-page="admin-fees"] .admin-fees-summary-grid{gap:8px}body[data-page="admin-fees"] .admin-fees-stat-card{min-height:72px;padding:10px;gap:8px}body[data-page="admin-fees"] .admin-fees-stat-icon{width:34px;height:34px;flex-basis:34px}body[data-page="admin-fees"] .admin-fees-stat-icon .icon,body[data-page="admin-fees"] .admin-fees-stat-icon .fa,body[data-page="admin-fees"] .admin-fees-stat-icon svg{width:16px;height:16px;font-size:16px;line-height:16px}body[data-page="admin-fees"] .admin-fees-stat-label{font-size:10px}body[data-page="admin-fees"] .admin-fees-stat-value{font-size:15px}body[data-page="admin-fees"] .admin-fees-filter-row{gap:10px}body[data-page="admin-fees"] .fee-month-row{display:block;padding:16px}body[data-page="admin-fees"] .fee-month-cell{margin-bottom:12px}body[data-page="admin-fees"] .fee-student-grid{grid-template-columns:minmax(0,1fr)}body[data-page="admin-fees"] .fee-student-group{max-width:none}body[data-page="admin-fees"] .fee-card-viewer{align-items:center;padding:12px}body[data-page="admin-fees"] .fee-card-viewer-panel{width:min(100%,720px);max-height:calc(100dvh - 24px);border-radius:var(--radius-lg)}}
body[data-page="admin-fees"] .fee-card-viewer-dialog{transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
  body[data-page="admin-fees"] #feeCardViewer:not(.show) .fee-card-viewer-dialog{opacity:0;transform:translateY(8px) scale(.985)}
  @media(max-width:768px){body[data-page="admin-fees"] .admin-fees-stat-copy{min-width:0;max-width:100%}body[data-page="admin-fees"] .admin-fees-stat-card{min-width:0;overflow:hidden}body[data-page="admin-fees"] .admin-fees-stat-value{display:block;max-width:100%;font-size:clamp(13px,3.7vw,18px);line-height:1.15;letter-spacing:-.03em;white-space:nowrap}}
  body[data-page="admin-fees"] .admin-fees-stat-icon svg{display:block;width:20px;height:20px;fill:currentColor}
  body[data-page="admin-fees"] .admin-proof-placeholder{display:block;width:48px;height:48px;border-radius:6px}
  .loading-bar{background:var(--bg-surface-secondary);border-radius:3px;width:100%;height:3px;position:relative;overflow:hidden}
  .loading-bar:before{content:"";background:var(--primary);border-radius:3px;width:40%;height:100%;animation:1.4s ease-in-out infinite loading-bar-slide;position:absolute;top:0;left:-40%}
  @keyframes loading-bar-slide{0%{left:-40%}60%{left:100%}to{left:100%}}
  @media (prefers-reduced-motion:reduce){.loading-bar:before{animation-duration:2.4s}}
  body[data-page="admin-fees"] .admin-fees-stat-copy{flex:1}
  body[data-page="admin-fees"] .admin-fees-stat-value.is-loading{display:block;width:calc(100% - 8px);max-width:none;min-height:11px;overflow:visible}
  body[data-page="admin-fees"] .admin-fees-stat-value .loading-bar{margin-top:8px}
  body[data-page="admin-fees"] .fee-skeleton-month{padding:18px 20px;border-bottom:1px solid var(--border-color)}
  body[data-page="admin-fees"] .fee-skeleton-month:last-child{border-bottom:0}
  body[data-page="admin-fees"] .fee-skeleton-month-title{width:132px;margin-bottom:16px}
  body[data-page="admin-fees"] .fee-skeleton-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  body[data-page="admin-fees"] .fee-skeleton-card{min-width:0;padding:14px;border:1px solid var(--border-color);border-radius:var(--radius);background:var(--bg-surface)}
  body[data-page="admin-fees"] .fee-skeleton-person{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  body[data-page="admin-fees"] .fee-skeleton-person .skeleton-circle{flex:0 0 44px;width:44px;height:44px}
  body[data-page="admin-fees"] .fee-skeleton-copy{display:block;flex:1;min-width:0}
  body[data-page="admin-fees"] .fee-skeleton-card>.skeleton-text{margin-top:10px}
  @media(max-width:768px){body[data-page="admin-fees"] .fee-skeleton-grid{grid-template-columns:minmax(0,1fr)}body[data-page="admin-fees"] .fee-skeleton-month{padding:16px}}



  /* Student Fee Payment: migrated Portal page owner */
  body[data-page="fee-payment"] .fee-payment-source-page{width:100%;padding-bottom:84px}
  body[data-page="fee-payment"] .fee-payment-page-heading{margin:0 0 20px}
  body[data-page="fee-payment"] .student-fee-filter-panel{margin-bottom:20px}
  body[data-page="fee-payment"] .admin-users-toolbar{grid-template-columns:minmax(180px,240px)}
  body[data-page="fee-payment"] .student-fee-list{display:grid;gap:20px;margin:0;padding:0 0 76px;overflow:visible;background:transparent}
  body[data-page="fee-payment"] .student-fee-month-group{display:grid;gap:12px;margin:0;padding:0;background:transparent;border:0;box-shadow:none}
  body[data-page="fee-payment"] .student-fee-month-title{margin:0;padding:8px 0 10px;color:var(--text);font-size:14px;font-weight:var(--font-weight-bold);line-height:1.4286;text-align:left;border-bottom:1px solid var(--border-color-light)}
  body[data-page="fee-payment"] .student-fee-subject-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  body[data-page="fee-payment"] .student-fee-subject-grid.student-fee-subject-count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-page="fee-payment"] .student-fee-subject-grid.student-fee-subject-count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-page="fee-payment"] .student-fee-subject-card{--subject-color:var(--text-muted);margin:0;outline:none}
  body[data-page="fee-payment"] .student-fee-subject-card .card-body{display:grid;gap:10px;padding:16px}
  body[data-page="fee-payment"] .student-fee-subject-card:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent);border-color:var(--primary)}
  body[data-page="fee-payment"] .student-fee-subject-card[data-subject="Art"]{--subject-color:var(--subject-art)}
  body[data-page="fee-payment"] .student-fee-subject-card[data-subject="Hindi"]{--subject-color:var(--subject-hindi)}
  body[data-page="fee-payment"] .student-fee-subject-card[data-subject="English"]{--subject-color:var(--subject-english)}
  body[data-page="fee-payment"] .student-fee-subject-card[data-subject="Social Science"]{--subject-color:var(--subject-social)}
  body[data-page="fee-payment"] .student-fee-subject-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  body[data-page="fee-payment"] .student-fee-subject-copy{display:grid;gap:2px;min-width:0}
  body[data-page="fee-payment"] .fee-subject-label{color:var(--text);font-size:14px;font-weight:var(--font-weight-medium);line-height:1.4}
  body[data-page="fee-payment"] .student-fee-subject-card .page-subtitle{margin:0;color:var(--text-muted);font-size:12px;line-height:1.5}
  body[data-page="fee-payment"] .student-fee-head-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto}
  body[data-page="fee-payment"] .student-fee-remarks,body[data-page="fee-payment"] .fee-mini-note{color:var(--text-secondary);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
  body[data-page="fee-payment"] .student-fee-remarks{margin-top:2px;color:var(--text)}
  body[data-page="fee-payment"] .student-fee-proof-field{margin-top:2px}
  body[data-page="fee-payment"] .student-fee-upload-control{display:flex;align-items:center;gap:10px;min-width:0}
  body[data-page="fee-payment"] .student-fee-upload-btn{flex:0 0 auto;cursor:pointer}
  body[data-page="fee-payment"] .student-fee-upload-btn svg{width:16px;height:16px}
  body[data-page="fee-payment"] .student-fee-upload-control .file-input-name{min-width:0;overflow:hidden;color:var(--text-muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
  body[data-page="fee-payment"] .student-fee-qr-load{position:relative;display:block;width:56px;height:56px}
  body[data-page="fee-payment"] .student-fee-qr-placeholder,body[data-page="fee-payment"] .student-proof-placeholder{position:absolute;inset:0;display:block;width:56px;height:56px;border-radius:8px}
  body[data-page="fee-payment"] .fee-qr-trigger{width:56px;height:56px;padding:3px;border:1px solid var(--border-color)!important;border-radius:8px;background:#fff!important;cursor:zoom-in}
  body[data-page="fee-payment"] .fee-qr-trigger img{display:block;width:100%;height:100%;object-fit:cover;border-radius:5px}
  body[data-page="fee-payment"] .fee-qr-popout{position:fixed;inset:0;z-index:16000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.44)}
  body[data-page="fee-payment"] .fee-qr-popout-panel{width:min(420px,92vw);padding:16px;border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:0 24px 64px rgba(15,23,42,.3);will-change:transform,opacity}
  body[data-page="fee-payment"] .fee-qr-popout-panel img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
  body[data-page="fee-payment"] .fee-qr-popout.closing{pointer-events:none;background:rgba(15,23,42,0);transition:background .28s ease}
  body[data-page="fee-payment"] .student-fee-skeleton .student-fee-subject-card{min-height:132px}
  body[data-page="fee-payment"] .student-fee-skeleton .skeleton{display:block;margin-bottom:8px}
  @media(max-width:980px){body[data-page="fee-payment"] .student-fee-subject-grid.student-fee-subject-count-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:700px){body[data-page="fee-payment"] .admin-users-toolbar{grid-template-columns:minmax(0,1fr)}body[data-page="fee-payment"] .student-fee-subject-grid.student-fee-subject-count-2,body[data-page="fee-payment"] .student-fee-subject-grid.student-fee-subject-count-3{grid-template-columns:minmax(0,1fr)}body[data-page="fee-payment"] .student-fee-subject-head{align-items:flex-start}body[data-page="fee-payment"] .student-fee-upload-control{align-items:flex-start;flex-direction:column}body[data-page="fee-payment"] .fee-qr-trigger,body[data-page="fee-payment"] .student-fee-qr-load,body[data-page="fee-payment"] .student-fee-qr-placeholder,body[data-page="fee-payment"] .student-proof-placeholder{width:52px;height:52px}}


  /* Shared migrated page heading back action */
  .migrated-page-title-row{display:flex;align-items:center;gap:1px;min-width:0}
  .migrated-page-title-row .dashboard-welcome{margin:0}
  .migrated-page-back-btn{display:flex;align-items:center;justify-content:flex-start;width:32px;height:32px;min-width:32px;padding:0;background:transparent;border-color:transparent;box-shadow:none;color:var(--text)}
  .migrated-page-back-btn:hover,.migrated-page-back-btn:focus-visible{background:var(--primary-lt);border-color:transparent;box-shadow:none;color:var(--primary-dk)}
  .migrated-page-back-btn svg{display:block;width:18px;height:18px}
  @media(max-width:768px){.migrated-page-title-row{gap:0}.migrated-page-back-btn{width:34px;height:34px;min-width:34px}.migrated-page-back-btn svg{width:22px;height:22px}}

  /* Portal source popover for collapsed desktop navigation */
  .collapsed-sidebar-popover{position:fixed;z-index:2300;width:max-content;max-width:220px;padding:9px 12px;border:1px solid var(--border-color);border-radius:var(--radius);background:var(--bg-surface);box-shadow:0 8px 24px rgba(15,23,42,.18);color:var(--text);pointer-events:none;text-align:left}
  .collapsed-sidebar-popover[hidden]{display:none}
  .collapsed-sidebar-popover .popover-title{display:block;margin:0;color:var(--text);font-size:12px;font-weight:var(--font-weight-bold);line-height:1.4;white-space:nowrap}

.btn-spinner{border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;width:12px;height:12px;animation:.7s linear infinite btn-spin;display:inline-block;flex:0 0 auto}@keyframes btn-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.btn-spinner{animation-duration:1.6s}}.btn-spinner[hidden]{display:none!important}
  /* Student Timetable: accepted migrated common-shell ownership. */
  html:has(body[data-page="timetable"]),body[data-page="timetable"]{height:100%;overflow:hidden}
  body[data-page="timetable"] .portal-main{height:100dvh;min-height:0;overflow-x:hidden;overflow-y:auto;padding-bottom:96px}
  body[data-page="timetable"] .timetable-source-page{width:100%;min-width:0;padding-bottom:84px}
  body[data-page="timetable"] .timetable-page-head{display:block;margin:0 0 20px}
  body[data-page="timetable"] .timetable-page-head .dashboard-welcome{margin:0;font-size:20px;font-weight:var(--font-weight-bold);line-height:1.3}
  
  @media(max-width:768px){body[data-page="timetable"] .portal-main{padding-bottom:84px}}

body[data-page="admin-settings"] .settings-phone-row {
  display: grid;
  grid-template-columns: minmax(92px, 120px) minmax(0, 1fr);
  gap: 8px;
}
body[data-page="admin-settings"] .settings-upload-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
}
body[data-page="admin-settings"] .staged-upload-row .settings-current-image {
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-secondary);
  cursor: pointer;
}
body[data-page="admin-settings"] .settings-current-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body[data-page="admin-settings"] .settings-image-modal-content {
  display: block;
  max-width: min(76vw, 560px);
  max-height: 68vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
body[data-page="admin-settings"] .settings-subject-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body[data-page="admin-settings"] .subject-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
}
body[data-page="admin-settings"] .subject-art { background: #3498db; }
body[data-page="admin-settings"] .subject-hindi { background: #e74c3c; }
body[data-page="admin-settings"] .subject-english { background: #2ecc71; }
body[data-page="admin-settings"] .subject-social-science { background: #f39c12; }
@media (max-width: 520px) {
  body[data-page="admin-settings"] .settings-phone-row {
    grid-template-columns: 104px minmax(0, 1fr);
  }
}








@media (max-width: 768px) {
  [data-mobile-sticky-stack] {
    position: fixed;
    top: var(--mobile-sticky-top, 52px);
    right: 0;
    left: 0;
    z-index: 1250;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--body-bg);
  }
  [data-mobile-sticky-content] {
    padding-top: var(--mobile-sticky-height, 0px);
  }
}


@media (max-width: 768px) {
  [data-mobile-sticky-flow] {
    position: sticky;
    top: 0;
    z-index: 1250;
    box-sizing: border-box;
    background: var(--body-bg);
  }
}




/* Shared Portal week selector: source form-control/date-range presentation with portal week-range display. */
.schedule-week-selector{position:relative;width:220px}
.schedule-week-selector .form-control{cursor:pointer;padding-right:42px}
.schedule-week-selector::after{content:"";position:absolute;top:50%;right:12px;width:20px;height:20px;transform:translateY(-50%);background:var(--text-muted);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='17' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M8 2v4M16 2v4M3 9h18M8 13h3M13 13h3M8 17h3M13 17h3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
.schedule-week-selector .schedule-week-native{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0 10px;border:0;background:transparent;color:transparent;caret-color:transparent;font-size:0;cursor:pointer;color-scheme:light}
[data-theme="dark"] .schedule-week-selector .schedule-week-native{color-scheme:dark}
.schedule-week-selector .schedule-week-native::-webkit-datetime-edit,.schedule-week-selector .schedule-week-native::-webkit-date-and-time-value{opacity:0}
.schedule-week-selector .schedule-week-native::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
.schedule-week-selector:focus-within .form-control{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-lt)}
@media(max-width:768px){.schedule-week-selector{width:100%;min-width:0}}

/* Common blocking busy modal */
.common-busy-modal{z-index:1450;align-items:center;justify-content:center;background:rgba(15,23,42,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.common-busy-modal.show{display:flex}
.common-busy-dialog{width:min(360px,calc(100vw - 32px));padding:26px 24px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:center}
.common-busy-spinner{width:38px;height:38px;margin:0 auto 16px;border:3px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:commonBusySpin .75s linear infinite}
.common-busy-title{margin:0;color:var(--text);font-size:16px;font-weight:var(--font-weight-bold);line-height:1.35}
.common-busy-text{margin:7px 0 0;color:var(--text-muted);font-size:13px;line-height:1.5}
@keyframes commonBusySpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.common-busy-spinner{animation-duration:1.5s}}



:is(body[data-page="admin-messages"],body[data-page="student-inbox"]){overflow:hidden}:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .portal-main{height:100vh;min-height:0;padding-right:32px;padding-bottom:32px;padding-left:32px;overflow:hidden}:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .portal-content{height:100%;max-width:none;width:100%;display:flex;flex-direction:column;gap:18px;overflow:hidden}:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-card{flex:1;height:auto;min-height:0}.inbox-page-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}.inbox-page-heading .dashboard-subtitle{grid-column:1}.inbox-page-heading .page-actions{grid-column:2;grid-row:1/3;display:flex;gap:8px}.inbox-page-heading .page-actions svg{width:14px;height:14px}.inbox-card{flex:1;min-height:0;padding:0;overflow:hidden}.inbox-layout{display:grid;grid-template-columns:200px 360px minmax(0,1fr);height:100%;min-height:0}.inbox-sidebar{padding:12px 10px;border-inline-end:1px solid var(--border-color-light);overflow-y:auto}.inbox-folder{width:100%;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 10px;margin-bottom:1px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-family:var(--font);font-size:12.5px;text-align:start;cursor:pointer}.inbox-folder:hover{background:var(--bg-surface-secondary)}.inbox-folder.active{background:var(--primary-lt);color:var(--primary);font-weight:var(--font-weight-medium)}.inbox-folder svg{width:14px;height:14px}.inbox-folder span{min-width:0}.inbox-folder b{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--bg-surface-secondary);font-size:11px;font-weight:500;text-align:center}.inbox-sidebar-label{padding:18px 10px 6px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.inbox-category{display:flex;width:100%;align-items:center;gap:10px;padding:7px 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font:inherit;text-align:start;cursor:pointer}.inbox-category:hover{background:var(--bg-surface-secondary)}.inbox-category span{width:8px;height:8px;border-radius:50%;flex:0 0 auto}.inbox-list-pane{display:flex;flex-direction:column;min-width:0;border-inline-end:1px solid var(--border-color-light);overflow:hidden}.inbox-list-toolbar{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border-color-light)}.inbox-search{flex:1;height:30px;padding:0 10px;background:var(--bg-surface-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-family:var(--font);font-size:12.5px}.inbox-list{flex:1;overflow-y:auto}.inbox-item{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border-color-light);cursor:pointer;font-size:13px}.inbox-item:hover{background:var(--bg-surface-secondary)}.inbox-item.selected{background:var(--primary-lt);border-inline-start:2px solid var(--primary);padding-inline-start:10px}.inbox-star-btn{width:22px;height:22px;padding:0;border:0;background:transparent;color:var(--border-color);cursor:pointer}.inbox-star-btn.on{color:#f59e0b}.inbox-star-btn svg{width:16px;height:16px}.inbox-item-body{min-width:0}.inbox-item .sender{font-size:12.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inbox-item .subject{font-size:12.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inbox-item .preview{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inbox-item .meta{font-size:11px;color:var(--text-muted);white-space:nowrap}.inbox-item.unread .sender,.inbox-item.unread .subject{font-weight:700;color:var(--text)}.inbox-label-pill{display:inline-flex;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--label) 12%,transparent);color:var(--label);font-size:11px;font-weight:600}.inbox-reader{display:flex;flex-direction:column;min-width:0;overflow:hidden}.inbox-reader-toolbar{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 20px;border-bottom:1px solid var(--border-color-light)}.inbox-reader-toolbar>span{flex:1}.inbox-reader-action{display:inline-flex;align-items:center;gap:6px;padding:5px 7px;border:0;background:transparent;color:var(--text-secondary);font:inherit;cursor:pointer}.inbox-reader-action svg{width:16px;height:16px}.inbox-reader-content{padding:28px 36px;overflow-y:auto}.inbox-reader-subject{margin:0 0 20px}.inbox-reader-meta{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border-color-light)}.inbox-reader-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:600}.inbox-reader-meta-text{min-width:0;font-size:13px}.inbox-reader-to,.inbox-reader-time{font-size:12px;color:var(--text-muted)}.inbox-reader-time{white-space:nowrap}.inbox-reader-body{margin-top:20px;line-height:1.75}.inbox-reader-empty{display:grid;place-items:center;height:100%;min-height:240px;color:var(--text-muted)}.inbox-compose-form{display:flex;flex-direction:column;gap:10px}.inbox-compose-form textarea{min-height:220px}.recipient-dropdown{position:relative}.recipient-dropdown-btn{width:100%;justify-content:flex-start}.recipient-dropdown-panel{position:absolute;z-index:30;top:calc(100% + 5px);inset-inline:0;max-height:240px;overflow:auto;padding:10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-surface);box-shadow:var(--shadow-lg)}:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .modal-dialog.inbox-compose-dialog{width:min(760px,calc(100% - 32px));max-width:760px}:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .modal-body{padding:24px}:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .modal-footer{padding:14px 24px}
@media(max-width:1100px){.inbox-layout{grid-template-columns:180px 300px minmax(0,1fr)}}@media(max-width:850px){:is(body[data-page="admin-messages"],body[data-page="student-inbox"]){overflow:auto}:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .portal-main,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .portal-content{height:auto;overflow:visible}.inbox-page-heading{grid-template-columns:1fr}.inbox-page-heading .page-actions{grid-column:1;grid-row:auto}.inbox-layout{grid-template-columns:1fr;height:auto}.inbox-sidebar{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--border-color-light)}.inbox-folder{width:auto;grid-template-columns:18px auto auto;white-space:nowrap}.inbox-sidebar-label,#inboxCategories{display:none}.inbox-list-pane,.inbox-reader{min-height:420px}}



:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .recipient-dropdown-panel .checkbox-label{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:var(--radius-sm);white-space:normal}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) #recipientStudentList{display:grid;grid-template-columns:1fr;gap:2px}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .recipient-dropdown-panel input[type="checkbox"]{flex:0 0 auto;width:14px;height:14px;margin:0}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-item .subject{display:flex;align-items:center;gap:6px}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-item .subject-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-item .inbox-label-pill{flex:0 0 auto}



:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-page-heading .page-actions{grid-column:2;grid-row:2/4;align-self:end;margin-top:8px}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-unread-toggle{height:30px;padding:0 10px;font-size:12.5px;white-space:nowrap}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-unread-toggle.active{background:var(--primary-lt);border-color:var(--primary);color:var(--primary)}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .portal-main{padding-right:var(--space-5);padding-bottom:var(--space-5);padding-left:var(--space-5)}



:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-page-heading .page-actions{grid-column:2;grid-row:2;align-self:center;margin-top:0}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-content,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-sidebar{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.1) transparent}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list::-webkit-scrollbar,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-content::-webkit-scrollbar,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-sidebar::-webkit-scrollbar{width:6px;height:6px}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list::-webkit-scrollbar-track,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-content::-webkit-scrollbar-track,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-sidebar::-webkit-scrollbar-track{background:transparent}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list::-webkit-scrollbar-thumb,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-content::-webkit-scrollbar-thumb,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-sidebar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:3px}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list::-webkit-scrollbar-button,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-content::-webkit-scrollbar-button,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-sidebar::-webkit-scrollbar-button{display:none;width:0;height:0}
[data-theme="dark"] :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list,[data-theme="dark"] :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-content,[data-theme="dark"] :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-sidebar{scrollbar-color:rgba(255,255,255,.12) transparent}
[data-theme="dark"] :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list::-webkit-scrollbar-thumb,[data-theme="dark"] :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-content::-webkit-scrollbar-thumb,[data-theme="dark"] :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}



/* Shared source scrollbar behavior for migrated desktop components */
@media (min-width:769px){
  *{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.1) transparent}
  *::-webkit-scrollbar{width:6px;height:6px}
  *::-webkit-scrollbar-track{background:transparent}
  *::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:3px}
  *::-webkit-scrollbar-button{display:none;width:0;height:0}
  [data-theme="dark"] *{scrollbar-color:rgba(255,255,255,.12) transparent}
  [data-theme="dark"] *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}
}
/* Exact source empty-state component */
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .empty-state.inbox-reader-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:0;padding:48px 24px;text-align:center;color:var(--text-muted);gap:6px}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .empty-state.inbox-reader-empty .empty-state-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 0 8px;border-radius:50%;background:var(--bg-surface-secondary);color:var(--text-muted)}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .empty-state.inbox-reader-empty .empty-state-icon svg{width:22px;height:22px}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .empty-state.inbox-reader-empty .empty-state-title{color:var(--text);font-size:14px;font-weight:var(--font-weight-medium)}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .empty-state.inbox-reader-empty .empty-state-text{max-width:320px;color:var(--text-muted);font-size:12.5px;line-height:1.5}
/* Source star separates active icon color from toolbar wording */
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-star{color:var(--text-secondary)}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-star:hover{background:var(--bg-surface-secondary);color:var(--text-secondary)}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-star .star{color:var(--border-color)}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-star .star.on{color:var(--yellow);fill:var(--yellow)}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-star span{color:var(--text-secondary)}
/* One shared count box; Inbox fraction only receives additional width */
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-folder [data-count]{display:inline-flex;align-items:center;justify-content:center;align-self:center;justify-self:end;box-sizing:border-box;height:18px;min-width:18px;margin-inline-start:auto;padding:1px 6px;border-radius:10px;line-height:16px;vertical-align:middle}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-folder [data-count="inbox"]{min-width:36px}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .modal-footer button:disabled{cursor:default;opacity:.5;pointer-events:none}



:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-folder [data-count][hidden]{display:none}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-category.active{background:var(--primary-lt);color:var(--primary);font-weight:var(--font-weight-medium)}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-action .star.on{color:var(--yellow);fill:var(--yellow)}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-action span{color:var(--text-secondary)}



:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list-skeleton{display:block}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-skeleton-row{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;padding:12px;border-bottom:1px solid var(--border-color-light)}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-skeleton-row .skeleton-circle{width:18px;height:18px}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-skeleton-row>span:last-child{display:block;min-width:0}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-skeleton-row .skeleton-text{display:block;width:72%;height:9px;margin:0 0 7px}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-skeleton-row .skeleton-text:nth-child(2){width:88%}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-skeleton-row .skeleton-text:nth-child(3){width:58%;margin-bottom:0}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-empty{transform:translateY(-6%)}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) :is(#adminInboxUnreadBtn,#studentInboxUnreadBtn)[hidden]{display:none!important}
@media(max-width:850px){
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-layout{display:block;min-height:0}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-sidebar{display:none}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list-pane{display:flex;min-height:520px;border:0}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader{display:none;min-height:520px}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-layout.reader-open .inbox-list-pane{display:none}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-layout.reader-open .inbox-reader{display:flex}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-back{display:inline-flex}
}
@media(min-width:851px){:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-back{display:none}}



:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list>.empty-state{padding:48px 24px}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader>.inbox-reader-empty{transform:none}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) :is(#adminInboxEmptyTrashBtn,#studentInboxEmptyTrashBtn)[hidden]{display:none!important}



:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-folder-row,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-category-row{display:contents}
@media(max-width:850px){
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-sidebar{display:block;padding:0;border:0;border-bottom:1px solid var(--border-color-light);overflow:visible;background:var(--bg-surface)}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-folder-row,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-category-row{display:flex;align-items:center;gap:4px;width:100%;padding:8px 10px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-folder-row::-webkit-scrollbar,:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-category-row::-webkit-scrollbar{display:none}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-folder-row{border-bottom:1px solid var(--border-color-light)}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-sidebar-label{display:block;padding:9px 12px 2px;font-size:10px}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-category-row{padding-top:5px;padding-bottom:9px}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-folder{display:inline-flex;flex:0 0 auto;width:auto;min-width:max-content;grid-template-columns:none;gap:7px;margin:0;padding:7px 10px;white-space:nowrap}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-folder>span{display:inline;overflow:visible;text-overflow:clip;white-space:nowrap}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-folder>[data-count]{display:inline-flex;flex:0 0 auto;margin-inline-start:2px}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-category{display:inline-flex;flex:0 0 auto;width:auto;min-width:max-content;padding:7px 10px;white-space:nowrap}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-layout.reader-open .inbox-sidebar{display:none}
}



/* Exact Portal compact-pane empty state */
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list>.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box;padding:48px 24px;text-align:center;color:var(--text-muted);gap:6px;transform:none}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list>.empty-state .empty-state-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 0 8px;border-radius:50%;background:var(--bg-surface-secondary);color:var(--text-muted)}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list>.empty-state .empty-state-icon svg{width:22px;height:22px}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list>.empty-state .empty-state-title{color:var(--text);font-size:14px;font-weight:var(--font-weight-medium);line-height:1.4}
:is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-list>.empty-state .empty-state-text{max-width:320px;color:var(--text-muted);font-size:12.5px;line-height:1.5}



@media(max-width:850px){
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-toolbar{display:grid;grid-template-columns:32px minmax(0,1fr) repeat(3,auto);align-items:center;gap:4px;min-height:52px;padding:8px 10px}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-toolbar>span{min-width:0}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-back{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;padding:0}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-action{align-items:center;justify-content:center;gap:4px;min-height:32px;padding:5px 6px;font-size:12px;line-height:1;white-space:nowrap}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-reader-action.icon-only{width:32px;min-width:32px;padding:0}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-layout:not(.reader-open) .inbox-category-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:6px;width:100%;box-sizing:border-box;padding:7px 10px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-layout:not(.reader-open) .inbox-category-row>.inbox-sidebar-label{display:inline-flex;flex:0 0 auto;align-items:center;margin:0;padding:7px 4px 7px 2px;font-size:10px;line-height:1;white-space:nowrap}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-layout:not(.reader-open) .inbox-category-row>#inboxCategories{display:flex;flex:0 0 auto;align-items:center;gap:4px}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-layout:not(.reader-open) .inbox-category-row .inbox-category{display:inline-flex;flex:0 0 auto;width:auto;min-width:max-content;white-space:nowrap}
 :is(body[data-page="admin-messages"],body[data-page="student-inbox"]) .inbox-category-row::-webkit-scrollbar{display:none}
}



body[data-page="admin-announcements"] {
  overflow-x:hidden
}
body[data-page="admin-announcements"] .portal-content {
  display:grid;
  gap:16px;
  min-width:0
}
body[data-page="admin-announcements"] .admin-announcements-heading {
  margin:0 0 2px
}
body[data-page="admin-announcements"] .admin-announcements-heading .dashboard-subtitle {
  margin-top:4px;
  font-size:13px;
  line-height:1.5;
  color:var(--text-secondary)
}
body[data-page="admin-announcements"] .admin-announcement-card-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--border-color-light)
}
body[data-page="admin-announcements"] .admin-announcement-card-header .card-title {
  margin:0;
  font-size:14px;
  font-weight:var(--font-weight-bold);
  color:var(--text)
}
body[data-page="admin-announcements"] .admin-announcement-card-header .card-subtitle {
  margin:3px 0 0;
  font-size:12.5px;
  color:var(--text-muted)
}
body[data-page="admin-announcements"] .admin-announcement-card-header .btn {
  flex-shrink:0;
  margin:0
}
body[data-page="admin-announcements"] .admin-announcement-card-header .btn svg {
  width:14px;
  height:14px
}
body[data-page="admin-announcements"] .admin-announcement-form .form-grid {
  grid-template-columns:minmax(0,1fr) minmax(180px,.45fr) minmax(180px,.45fr)
}
body[data-page="admin-announcements"] .admin-announcement-form textarea {
  min-height:130px;
  resize:vertical
}
body[data-page="admin-announcements"] .admin-announcement-form .actions {
  display:flex;
  justify-content:flex-end;
  margin-top:16px
}
body[data-page="admin-announcements"] .admin-announcement-list-body {
  padding:0
}
body[data-page="admin-announcements"] .notifications-list {
  display:flex;
  flex-direction:column
}
body[data-page="admin-announcements"] .notification-row {
  display:flex;
  position:relative;
  align-items:flex-start;
  gap:var(--space-3);
  border:0;
  border-bottom:1px solid var(--border-color-light);
  background:transparent;
  padding:14px 52px 14px 20px;
  text-align:left;
  font:inherit;
  transition:background .1s
}
body[data-page="admin-announcements"] .notification-row:last-child {
  border-bottom:0
}
body[data-page="admin-announcements"] .notification-row:hover {
  background:var(--bg-surface-secondary)
}
body[data-page="admin-announcements"] .notification-row.unread:before {
  content:"";
  position:absolute;
  top:22px;
  left:8px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--primary)
}
body[data-page="admin-announcements"] .notification-row .notif-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
body[data-page="admin-announcements"] .notification-row .notif-icon svg {
  width: 16px;
  height: 16px;
}
body[data-page="admin-announcements"] .notification-row .notif-info {
  background: var(--blue-lt);
  color: var(--blue);
}
body[data-page="admin-announcements"] .notification-row .notif-task {
  background: var(--primary-lt);
  color: var(--primary);
}
body[data-page="admin-announcements"] .notification-row .notif-alert {
  background: var(--red-lt);
  color: var(--red);
}
body[data-page="admin-announcements"] .notification-row .notif-mention {
  background: var(--purple-lt);
  color: var(--purple);
}
body[data-page="admin-announcements"] .notification-row .notif-body {
  flex:1 1 auto;
  min-width:0
}
body[data-page="admin-announcements"] .notification-row .notif-from {
  display:block;
  margin-bottom:1px;
  font-size:13px;
  font-weight:var(--font-weight-medium);
  color:var(--text)
}
body[data-page="admin-announcements"] .notification-row.unread .notif-from {
  font-weight:var(--font-weight-bold)
}
body[data-page="admin-announcements"] .notification-row .notif-text {
  display:block;
  font-size:13px;
  line-height:1.45;
  color:var(--text-secondary);
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
body[data-page="admin-announcements"] .admin-announcement-meta {
  display:block;
  margin-top:5px;
  font-size:11.5px;
  color:var(--text-muted)
}
body[data-page="admin-announcements"] .notification-row .notif-time {
  flex-shrink:0;
  margin-top:4px;
  font-size:11.5px;
  color:var(--text-muted);
  white-space:nowrap
}
body[data-page="admin-announcements"] .admin-announcement-delete {
  position:absolute;
  top:12px;
  right:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text-muted);
  cursor:pointer
}
body[data-page="admin-announcements"] .admin-announcement-delete:hover {
  background:var(--red-lt);
  color:var(--red)
}
body[data-page="admin-announcements"] .admin-announcement-delete svg {
  width:15px;
  height:15px
}
body[data-page="admin-announcements"] .notifications-empty {
  padding:60px 20px;
  text-align:center;
  color:var(--text-muted)
}
body[data-page="admin-announcements"] .notifications-empty svg {
  width:40px;
  height:40px;
  margin-bottom:12px;
  color:var(--text-disabled)
}
body[data-page="admin-announcements"] .notifications-empty .empty-title {
  margin-bottom:4px;
  font-size:14px;
  font-weight:var(--font-weight-bold);
  color:var(--text)
}
body[data-page="admin-announcements"] .notifications-empty .empty-desc {
  font-size:12.5px
}
body[data-page="admin-announcements"] .admin-announcement-skeleton .notification-row {
  pointer-events:none
}
body[data-page="admin-announcements"] .admin-announcement-skeleton .skeleton-circle {
  width:32px;
  height:32px
}
body[data-page="admin-announcements"] .admin-announcement-skeleton .skeleton-text {
  display:block;
  width:min(420px,70vw);
  height:11px;
  margin:2px 0 8px
}
body[data-page="admin-announcements"] .admin-announcement-skeleton .skeleton-text:last-child {
  width:min(600px,80vw)
}
@media(max-width:768px) {
  body[data-page="admin-announcements"] .portal-content {
    gap:12px
  }
  body[data-page="admin-announcements"] .admin-announcement-card-header {
    align-items:center
  }
  body[data-page="admin-announcements"] .admin-announcement-card-header .card-subtitle {
    display:none
  }
  body[data-page="admin-announcements"] .admin-announcement-form .form-grid {
    grid-template-columns:1fr
  }
  body[data-page="admin-announcements"] .admin-announcement-form .actions .btn {
    width:100%
  }
  body[data-page="admin-announcements"] .notification-row {
    padding:13px 44px 13px 16px;
    gap:10px
  }
  body[data-page="admin-announcements"] .notification-row .notif-time {
    position:absolute;
    right:44px;
    bottom:10px;
    margin:0
  }
  body[data-page="admin-announcements"] .admin-announcement-meta {
    padding-right:78px
  }
}



body[data-page="admin-announcements"] .admin-announcements-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:0 0 2px
}
body[data-page="admin-announcements"] .admin-announcements-heading .page-actions {
  display:flex;
  align-items:center;
  gap:8px
}
body[data-page="admin-announcements"] .admin-announcements-heading .page-actions .btn {
  width:auto;
  margin:0
}
body[data-page="admin-announcements"] .admin-announcements-heading .page-actions svg {
  width:14px;
  height:14px
}
body[data-page="admin-announcements"] .admin-announcement-tabs-header {
  padding:12px 20px;
  border-bottom:1px solid var(--border-color-light)
}
body[data-page="admin-announcements"] .admin-announcement-tabs-header .chart-tabs {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2px
}
body[data-page="admin-announcements"] .admin-announcement-tabs-header .chart-tab {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}
body[data-page="admin-announcements"] .admin-announcement-tabs-header .chart-tab:hover {
  background:var(--bg-surface-secondary);
  color:var(--text)
}
body[data-page="admin-announcements"] .admin-announcement-tabs-header .chart-tab.active {
  background:var(--bg-surface);
  color:var(--text);
  box-shadow:0 1px 3px #0f172a1f
}
body[data-page="admin-announcements"] .notif-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 18px;
  height:18px;
  margin-left:3px;
  padding:0 5px;
  border-radius:9px;
  background:var(--primary-lt);
  color:var(--primary);
  font-size:10.5px;
  font-weight:var(--font-weight-bold)
}
body[data-page="admin-announcements"] .modal-dialog.admin-announcement-compose-dialog {
  width: min(720px, calc(100% - var(--space-5)));
  max-width: 720px;
}
body[data-page="admin-announcements"] .admin-announcement-modal-form {
  display:grid;
  gap:16px
}
body[data-page="admin-announcements"] .admin-announcement-modal-form .form-row {
  grid-template-columns:1fr 1fr;
  gap:16px
}
body[data-page="admin-announcements"] .admin-announcement-modal-form textarea {
  min-height:150px;
  resize:vertical
}
body[data-page="admin-announcements"].has-action-bar .portal-main {
  padding-bottom:92px
}
body[data-page="admin-announcements"] .app-action-bar {
  position:fixed;
  left:50%;
  bottom:16px;
  z-index:1850;
  width:auto;
  min-height:0;
  transform:translateX(-50%)
}
body[data-page="admin-announcements"] .app-action-bar-inner {
  display:inline-flex;
  align-items:stretch;
  min-height:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  background:var(--bg-surface);
  box-shadow:0 6px 20px #0f172a1a
}
body[data-page="admin-announcements"] .app-action-btn {
  display:inline-flex;
  position:relative;
  align-items:center;
  justify-content:center;
  width:48px;
  height:44px;
  padding:0;
  border:0;
  border-right:1px solid var(--border-color-light);
  border-radius:0;
  background:transparent;
  color:var(--text-secondary);
  cursor:pointer
}
body[data-page="admin-announcements"] .app-action-btn:last-child {
  border-right:0
}
body[data-page="admin-announcements"] .app-action-btn:hover,body[data-page="admin-announcements"] .app-action-btn:focus-visible {
  background:var(--bg-surface-secondary);
  color:var(--primary);
  outline:0
}
body[data-page="admin-announcements"] .app-action-btn.active {
  background:var(--primary-lt);
  color:var(--primary)
}
body[data-page="admin-announcements"] .app-action-btn.active:after {
  display:none
}
body[data-page="admin-announcements"] .app-action-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  font-size:18px
}
body[data-page="admin-announcements"] .app-action-icon svg {
  width:18px;
  height:18px
}
@media(max-width:768px) {
  body[data-page="admin-announcements"] .admin-announcements-heading {
    align-items:stretch;
    flex-direction:column
  }
  body[data-page="admin-announcements"] .admin-announcements-heading .page-actions {
    width: 100%;
  }
  body[data-page="admin-announcements"] .admin-announcements-heading .page-actions .btn {
    width: auto;
    min-width: 0;
  }
  body[data-page="admin-announcements"] .admin-announcement-tabs-header {
    padding:10px 12px;
    overflow-x:auto
  }
  body[data-page="admin-announcements"] .admin-announcement-tabs-header .chart-tabs {
    flex-wrap: nowrap;
    width: max-content;
    white-space: nowrap;
  }
  body[data-page="admin-announcements"] .admin-announcement-modal-form .form-row {
    grid-template-columns:1fr
  }
  body[data-page="admin-announcements"] .app-action-bar {
    bottom:10px
  }
  body[data-page="admin-announcements"] .toast-host {
    position:fixed;
    top:auto;
    right:12px;
    bottom:calc(68px + env(safe-area-inset-bottom));
    left:12px;
    z-index:1900;
    align-items:center
  }
  body[data-page="admin-announcements"] .toast-host .toast {
    width:min(360px,100%);
    margin-inline:auto
  }
}



body[data-page="announcements"] {
  overflow-x: hidden;
}
body[data-page="announcements"] .portal-content {
  display: grid;
  gap: 16px;
  min-width: 0;
}
body[data-page="announcements"] .student-announcements-heading {
  margin: 0 0 2px;
}
body[data-page="announcements"] .student-announcements-heading .dashboard-subtitle {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
body[data-page="announcements"] .student-announcement-tabs-header {
  padding: 12px 20px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-color-light);
}
body[data-page="announcements"] .student-announcement-tabs-header .chart-tabs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  width: max-content;
  white-space: nowrap;
}
body[data-page="announcements"] .student-announcement-tabs-header .chart-tab {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}
body[data-page="announcements"] .student-announcement-tabs-header .chart-tab:hover {
  background: var(--bg-surface-secondary);
  color: var(--text);
}
body[data-page="announcements"] .student-announcement-tabs-header .chart-tab.active {
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: 0 1px 3px #0f172a1f;
}
body[data-page="announcements"] .notif-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  margin-left: 3px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: var(--font-weight-bold);
}
body[data-page="announcements"] .student-announcement-list-body {
  padding: 0;
}
body[data-page="announcements"] .notifications-list {
  display: flex;
  flex-direction: column;
}
body[data-page="announcements"] .notification-row {
  display: flex;
  position: relative;
  align-items: flex-start;
  gap: var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-color-light);
  background: transparent;
  padding: 14px 20px;
  text-align: left;
  font: inherit;
  transition: background .1s;
}
body[data-page="announcements"] .notification-row:last-child {
  border-bottom: 0;
}
body[data-page="announcements"] .notification-row:hover {
  background: var(--bg-surface-secondary);
}
body[data-page="announcements"] .notification-row.unread::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
body[data-page="announcements"] .notification-row .notif-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
body[data-page="announcements"] .notification-row .notif-icon svg {
  width: 16px;
  height: 16px;
}
body[data-page="announcements"] .notification-row .notif-info {
  background: var(--blue-lt);
  color: var(--blue);
}
body[data-page="announcements"] .notification-row .notif-task {
  background: var(--primary-lt);
  color: var(--primary);
}
body[data-page="announcements"] .notification-row .notif-alert {
  background: var(--red-lt);
  color: var(--red);
}
body[data-page="announcements"] .notification-row .notif-mention {
  background: var(--purple-lt);
  color: var(--purple);
}
body[data-page="announcements"] .notification-row .notif-body {
  flex: 1 1 auto;
  min-width: 0;
}
body[data-page="announcements"] .notification-row .notif-from {
  display: block;
  margin-bottom: 1px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--text);
}
body[data-page="announcements"] .notification-row.unread .notif-from {
  font-weight: var(--font-weight-bold);
}
body[data-page="announcements"] .notification-row .notif-text {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
body[data-page="announcements"] .student-announcement-meta {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--text-muted);
}
body[data-page="announcements"] .notification-row .notif-time {
  flex-shrink: 0;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
body[data-page="announcements"] .notifications-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}
body[data-page="announcements"] .notifications-empty svg {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  color: var(--text-disabled);
}
body[data-page="announcements"] .notifications-empty .empty-title {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  color: var(--text);
}
body[data-page="announcements"] .notifications-empty .empty-desc {
  font-size: 12.5px;
}
body[data-page="announcements"] .student-announcement-skeleton .notification-row {
  pointer-events: none;
}
body[data-page="announcements"] .student-announcement-skeleton .skeleton-circle {
  width: 32px;
  height: 32px;
}
body[data-page="announcements"] .student-announcement-skeleton .skeleton-text {
  display: block;
  width: min(420px, 70vw);
  height: 11px;
  margin: 2px 0 8px;
}
body[data-page="announcements"] .student-announcement-skeleton .skeleton-text:last-child {
  width: min(600px, 80vw);
}
body[data-page="announcements"].has-action-bar .portal-main {
  padding-bottom: 92px;
}
body[data-page="announcements"] .app-action-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 1850;
  width: auto;
  min-height: 0;
  transform: translateX(-50%);
}
body[data-page="announcements"] .app-action-bar-inner {
  display: inline-flex;
  align-items: stretch;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-surface);
  box-shadow: 0 6px 20px #0f172a1a;
}
body[data-page="announcements"] .app-action-btn {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--border-color-light);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
body[data-page="announcements"] .app-action-btn:last-child {
  border-right: 0;
}
body[data-page="announcements"] .app-action-btn:hover,
body[data-page="announcements"] .app-action-btn:focus-visible {
  background: var(--bg-surface-secondary);
  color: var(--primary);
  outline: 0;
}
body[data-page="announcements"] .app-action-btn.active {
  background: var(--primary-lt);
  color: var(--primary);
}
body[data-page="announcements"] .app-action-btn.active::after {
  display: none;
}
body[data-page="announcements"] .app-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 18px;
}
body[data-page="announcements"] .app-action-icon svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 768px) {
  body[data-page="announcements"] .portal-content {
    gap: 12px;
  }
  body[data-page="announcements"] .student-announcement-tabs-header {
    padding: 10px 12px;
  }
  body[data-page="announcements"] .notification-row {
    gap: 10px;
    padding: 13px 16px;
  }
  body[data-page="announcements"] .notification-row .notif-time {
    position: absolute;
    right: 16px;
    bottom: 10px;
    margin: 0;
  }
  body[data-page="announcements"] .student-announcement-meta {
    padding-right: 78px;
  }
  body[data-page="announcements"] .app-action-bar {
    bottom: 10px;
  }
  body[data-page="announcements"] .toast-host {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    left: 12px;
    z-index: 1900;
    align-items: center;
  }
  body[data-page="announcements"] .toast-host .toast {
    width: min(360px, 100%);
    margin-inline: auto;
  }
}



body[data-page="admin-settings"] {
  overflow-x: hidden;
}
body[data-page="admin-settings"] .portal-content {
  display: grid;
  gap: 16px;
  min-width: 0;
}
body[data-page="admin-settings"] .admin-settings-heading {
  margin: 0 0 2px;
}
@media (min-width: 769px) {
  body[data-page="admin-settings"] .admin-settings-source-page {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: 24px;
  }
  body[data-page="admin-settings"] .settings-layout {
    display: contents;
  }
  body[data-page="admin-settings"] .admin-settings-heading {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  body[data-page="admin-settings"] .settings-nav {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
  body[data-page="admin-settings"] .settings-layout > .settings-content {
    grid-column: 2;
    grid-row: 2;
  }
}
body[data-page="admin-settings"] .admin-settings-heading .dashboard-subtitle {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
body[data-page="admin-settings"] .settings-layout {
  min-width: 0;
}
body[data-page="admin-settings"] .settings-layout > .settings-content {
  min-width: 0;
}
body[data-page="admin-settings"] .settings-nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body[data-page="admin-settings"] .settings-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  padding: 7px 10px;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background .12s, color .12s;
}
@media (hover: hover) and (pointer: fine) {
  body[data-page="admin-settings"] .settings-nav-link:hover {
    background: var(--bg-surface-secondary);
    color: var(--text);
  }
}
body[data-page="admin-settings"] .settings-nav-link.active {
  background: var(--primary-lt);
  color: var(--primary);
}
body[data-page="admin-settings"] .settings-nav-link svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: .7;
}
body[data-page="admin-settings"] .settings-nav-link.active svg {
  opacity: 1;
}
body[data-page="admin-settings"] .settings-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
body[data-page="admin-settings"] #settingsForm {
  display: contents;
}
body[data-page="admin-settings"] .settings-section {
  padding: 24px;
  scroll-margin-top: 72px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
body[data-page="admin-settings"] .settings-section-title {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
}
body[data-page="admin-settings"] .settings-section-desc {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 13px;
}
body[data-page="admin-settings"] .settings-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color-light);
}
body[data-page="admin-settings"] .settings-row:last-child {
  border-bottom: 0;
}
body[data-page="admin-settings"] .settings-row > label {
  padding-top: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
}
body[data-page="admin-settings"] .settings-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
body[data-page="admin-settings"] .settings-row .form-control {
  width: 100%;
  max-width: 440px;
}
body[data-page="admin-settings"] .settings-hint {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.45;
}
body[data-page="admin-settings"] .settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: 14px;
  border-top: 1px solid var(--border-color-light);
}
body[data-page="admin-settings"] .settings-subsection {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color-light);
}
body[data-page="admin-settings"] .settings-subsection-title {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
}
body[data-page="admin-settings"] .settings-rate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
body[data-page="admin-settings"] .settings-rate-grid label {
  display: grid;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: var(--font-weight-medium);
}
body[data-page="admin-settings"] .staged-upload-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
body[data-page="admin-settings"] .staged-upload-name {
  color: var(--text-muted);
  font-size: 12px;
}
body[data-page="admin-settings"] .admin-settings-data[aria-busy="true"] .settings-control {
  position: relative;
  min-height: 38px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-secondary);
}
body[data-page="admin-settings"] .admin-settings-data[aria-busy="true"] .settings-control > * {
  visibility: hidden;
}
body[data-page="admin-settings"] .admin-settings-data[aria-busy="true"] .settings-control::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 8%, transparent), transparent);
  animation: skeleton-shimmer 1.2s infinite;
}
body[data-page="admin-settings"] .settings-load-failed .settings-control {
  background: transparent;
}
body[data-page="admin-settings"].has-action-bar .portal-main {
  padding-bottom: 92px;
}
body[data-page="admin-settings"] .app-action-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 1850;
  width: auto;
  min-height: 0;
  transform: translateX(-50%);
}
body[data-page="admin-settings"] .app-action-bar-inner {
  display: inline-flex;
  align-items: stretch;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-surface);
  box-shadow: 0 6px 20px #0f172a1a;
}
body[data-page="admin-settings"] .app-action-btn {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--border-color-light);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
body[data-page="admin-settings"] .app-action-btn:last-child {
  border-right: 0;
}
body[data-page="admin-settings"] .app-action-btn:hover,
body[data-page="admin-settings"] .app-action-btn:focus-visible {
  background: var(--bg-surface-secondary);
  color: var(--primary);
  outline: 0;
}
body[data-page="admin-settings"] .app-action-btn.active {
  background: var(--primary-lt);
  color: var(--primary);
}
body[data-page="admin-settings"] .app-action-btn.active::after {
  display: none;
}
body[data-page="admin-settings"] .app-action-icon,
body[data-page="admin-settings"] .app-action-icon svg {
  width: 18px;
  height: 18px;
}




body[data-page="admin-settings"] .settings-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
body[data-page="admin-settings"] .settings-admin-grid .form-field {
  display: grid;
  gap: 6px;
}
body[data-page="admin-settings"] .settings-admin-grid label {
  color: var(--text);
  font-size: 12.5px;
  font-weight: var(--font-weight-medium);
}
body[data-page="admin-settings"] .settings-admin-form .settings-actions {
  margin-top: 16px;
}
body[data-page="admin-settings"] .settings-admin-list-section {
  margin-top: 22px;
}
body[data-page="admin-settings"] .settings-admin-list-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
body[data-page="admin-settings"] .settings-admin-list {
  display: grid;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius);
  overflow: hidden;
}
body[data-page="admin-settings"] .settings-admin-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color-light);
}
body[data-page="admin-settings"] .settings-admin-row:last-child {
  border-bottom: 0;
}
body[data-page="admin-settings"] .settings-admin-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}
body[data-page="admin-settings"] .settings-admin-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}
body[data-page="admin-settings"] .settings-admin-identity strong {
  color: var(--text);
  font-size: 13px;
}
body[data-page="admin-settings"] .settings-admin-identity span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="admin-settings"] .settings-admin-empty {
  display: grid;
  gap: 4px;
  padding: 28px 18px;
  text-align: center;
}
body[data-page="admin-settings"] .settings-admin-empty strong {
  color: var(--text);
  font-size: 13px;
}
body[data-page="admin-settings"] .settings-admin-empty span {
  color: var(--text-muted);
  font-size: 12px;
}
body[data-page="admin-settings"] .settings-admin-skeleton {
  display: grid;
  gap: 10px;
  padding: 18px;
}
body[data-page="admin-settings"] .settings-admin-skeleton .skeleton-text {
  display: block;
  width: 100%;
  height: 34px;
}




body[data-page="admin-settings"] .settings-inline-save {
  display: grid;
  grid-template-columns: minmax(0, 360px) 34px;
  align-items: center;
  gap: 8px;
}
body[data-page="admin-settings"] .settings-tick-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
}
body[data-page="admin-settings"] .settings-tick-save svg {
  width: 15px;
  height: 15px;
}
body[data-page="admin-settings"] .settings-admin-toggle {
  display: inline-flex;
  position: relative;
  align-items: center;
  cursor: pointer;
}
body[data-page="admin-settings"] .settings-admin-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
body[data-page="admin-settings"] .settings-admin-toggle-track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--text-disabled);
  transition: background .16s;
}
body[data-page="admin-settings"] .settings-admin-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #0f172a33;
  transition: transform .16s;
}
body[data-page="admin-settings"] .settings-admin-toggle input:checked + .settings-admin-toggle-track {
  background: var(--primary);
}
body[data-page="admin-settings"] .settings-admin-toggle input:checked + .settings-admin-toggle-track::after {
  transform: translateX(16px);
}
body[data-page="admin-settings"] .settings-admin-toggle input:focus-visible + .settings-admin-toggle-track {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
body[data-page="admin-settings"] .settings-admin-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
body[data-page="admin-settings"] .settings-admin-delete:hover,
body[data-page="admin-settings"] .settings-admin-delete:focus-visible {
  background: var(--red-lt);
  color: var(--red);
  outline: 0;
}
body[data-page="admin-settings"] .settings-admin-delete svg {
  width: 16px;
  height: 16px;
}
body[data-page="admin-settings"] .settings-subsection {
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}
body[data-page="admin-settings"] .settings-admin-list-section {
  margin-top: 0;
  padding-top: 18px;
  border-top: 0;
}




body[data-page="admin-settings"] .settings-admin-access-switch {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
body[data-page="admin-settings"] .settings-admin-access-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body[data-page="admin-settings"] .settings-admin-access-switch .track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--border-color);
  transition: background .15s;
}
body[data-page="admin-settings"] .settings-admin-access-switch .track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #0003;
  transition: transform .15s;
}
body[data-page="admin-settings"] .settings-admin-access-switch input:checked + .track {
  background: var(--primary);
}
body[data-page="admin-settings"] .settings-admin-access-switch input:checked + .track::before {
  transform: translateX(16px);
}
body[data-page="admin-settings"] .settings-create-admin-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
body[data-page="admin-settings"] .settings-create-admin-form .form-field {
  display: grid;
  gap: 6px;
}
body[data-page="admin-settings"] .settings-create-admin-form label {
  color: var(--text);
  font-size: 12.5px;
  font-weight: var(--font-weight-medium);
}


/* Final Admin Settings ownership: common migrated mobile shell and Student Fee image pattern. */
body[data-page="admin-settings"] .settings-current-image-shell {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  margin-left: auto;
}
body[data-page="admin-settings"] .settings-current-image-placeholder {
  position: absolute;
  inset: 0;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 8px;
}
body[data-page="admin-settings"] .staged-upload-row .settings-current-image {
  width: 56px;
  height: 56px;
  padding: 3px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface);
  cursor: zoom-in;
}
body[data-page="admin-settings"] .settings-current-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
}
body[data-page="admin-settings"] .fee-qr-popout {
  position: fixed;
  inset: 0;
  z-index: 16000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .44);
}
body[data-page="admin-settings"] .fee-qr-popout-panel {
  width: min(420px, 92vw);
  max-height: calc(100dvh - 36px);
  padding: 16px;
  overflow: auto;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .3);
  will-change: transform, opacity;
}
body[data-page="admin-settings"] .fee-qr-popout-panel img {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 68px);
  object-fit: contain;
  border-radius: var(--radius-sm);
}
body[data-page="admin-settings"] .fee-qr-popout.closing {
  pointer-events: none;
  background: rgba(15, 23, 42, 0);
  transition: background .28s ease;
}
.portal-sidebar .app-menu-brand-logo:has(img) {
  border-radius: 50%;
  background: transparent;
}
.portal-sidebar .app-menu-brand-logo:has(img) img {
  border-radius: 50%;
  object-fit: contain;
  background: transparent;
}












@media (max-width: 768px) {
  html:has(body[data-page="admin-settings"]),
  body[data-page="admin-settings"] {
    height: 100%;
    overflow: hidden;
  }
  body[data-page="admin-settings"] .portal-main {
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 84px;
  }
  body[data-page="admin-settings"] .portal-content {
    position: relative;
    display: block;
    gap: 0;
    padding-top: 0;
  }
  body[data-page="admin-settings"] .admin-settings-heading {
    position: static;
    box-sizing: border-box;
    margin: 0 0 var(--space-2);
    padding: 0;
    background: transparent;
  }
  body[data-page="admin-settings"] .admin-settings-heading .dashboard-welcome {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
  }
  body[data-page="admin-settings"] .admin-settings-heading .dashboard-subtitle {
    margin: var(--space-1) 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
  }
  body[data-page="admin-settings"] .settings-layout {
    display: block;
  }
  body[data-page="admin-settings"] .settings-layout > .settings-content {
    grid-column: auto;
  }
  body[data-page="admin-settings"] .settings-nav {
    position: -webkit-sticky;
    position: sticky;
    top: -11.5px;
    z-index: 1100;
    display: flex;
    flex-direction: row;
    width: calc(100% + (2 * var(--space-4)));
    min-height: 36px;
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-1) var(--space-4) var(--space-2);
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    background: var(--body-bg);
    box-shadow: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body[data-page="admin-settings"] .settings-nav::-webkit-scrollbar {
    display: none;
  }
  body[data-page="admin-settings"] .settings-nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  body[data-page="admin-settings"] .settings-nav-link.active {
    background: color-mix(in srgb, var(--primary) 18%, var(--bg-surface));
    color: var(--primary-dk);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
  }
  body[data-page="admin-settings"] .settings-content {
    position: relative;
    z-index: 1;
    gap: 12px;
  }
  body[data-page="admin-settings"] .settings-section {
    padding: 18px 16px;
    scroll-margin-top: 132px;
  }
  body[data-page="admin-settings"] .settings-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  body[data-page="admin-settings"] .settings-row > label {
    padding-top: 0;
  }
  body[data-page="admin-settings"] .settings-row .form-control {
    max-width: none;
  }
  body[data-page="admin-settings"] .settings-rate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  body[data-page="admin-settings"] .settings-actions {
    justify-content: flex-end;
  }
  body[data-page="admin-settings"] .settings-actions .btn {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: max-content;
  }
  body[data-page="admin-settings"] .settings-admin-grid,
  body[data-page="admin-settings"] .settings-create-admin-form {
    grid-template-columns: 1fr;
  }
  body[data-page="admin-settings"] .settings-admin-row {
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    gap: 8px;
  }
  body[data-page="admin-settings"] .settings-admin-delete {
    grid-column: auto;
    grid-row: auto;
  }
  body[data-page="admin-settings"] .settings-inline-save {
    grid-template-columns: minmax(0, 1fr) 34px;
  }
  body[data-page="admin-settings"] .toast-host {
    top: auto;
    right: 12px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    left: 12px;
    z-index: 1900;
    align-items: center;
  }
  body[data-page="admin-settings"] .toast-host .toast {
    width: min(360px, 100%);
    margin-inline: auto;
  }
}



  .modal-dialog.enrollment-request-dialog {
    max-width: 620px;
  }

  .enrollment-request-form {
    margin: 0;
  }

  .enrollment-request-help {
    margin: 0 0 16px;
  }

  .enrollment-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
  }

  .enrollment-request-grid .form-group {
    min-width: 0;
    margin: 0;
  }

  .enrollment-request-grade,
  .enrollment-request-subjects {
    grid-column: 1 / -1;
  }

  .enrollment-request-subjects {
    padding: 0;
    border: 0;
  }

  .enrollment-request-subjects .control-label {
    margin-bottom: 8px;
  }

  .enrollment-request-subject-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
  }

  .enrollment-request-subject-grid .checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    color: var(--text-secondary);
    font-size: 13px;
  }

  .enrollment-request-subject-grid input[type="checkbox"] {
    margin: 0;
  }

  .enrollment-request-message {
    min-height: 18px;
    margin: 12px 0 0;
  }

  @media (max-width: 700px) {
    .enrollment-request-grid,
    .enrollment-request-subject-grid {
      grid-template-columns: 1fr;
    }
  }