/* SPA View Management */
    .view {
      display: none;
    }

    .view.active {
      display: block;
    }

    .sub-view {
      display: none;
    }

    .sub-view.active {
      display: block;
    }



    /* Auth Page layout */
    .auth-shell {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
      width: 100%;
    }

    @media (max-width: 900px) {
      .auth-left {
        display: none;
      }

      .auth-shell {
        grid-template-columns: 1fr;
      }
    }

    .auth-left {
      position: relative;
      overflow: hidden;
      background: linear-gradient(160deg, rgba(0, 219, 233, 0.08) 0%, rgba(190, 194, 255, 0.04) 50%, transparent 100%);
      border-right: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: var(--unit-12);
    }

    .auth-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--unit-12) var(--unit-8);
    }

    .auth-form-container {
      width: 100%;
      max-width: 420px;
    }

    .auth-tabs {
      display: flex;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin-bottom: var(--unit-8);
    }

    .auth-tab {
      flex: 1;
      padding: 12px;
      text-align: center;
      font-weight: 600;
      font-size: 15px;
      color: var(--on-surface-variant);
      cursor: pointer;
    }

    .auth-tab.active {
      background: var(--tertiary);
      color: var(--tertiary-container);
    }

    .auth-error {
      display: none;
      padding: 12px;
      background: rgba(255, 180, 171, 0.08);
      border: 1px solid rgba(255, 180, 171, 0.2);
      border-radius: var(--radius-lg);
      color: var(--error);
      font-size: 14px;
      margin-bottom: var(--unit-4);
      align-items: center;
      gap: 8px;
    }

    .auth-error.show {
      display: flex;
    }

    .btn-loading {
      position: relative;
      pointer-events: none;
    }

    /* Target Schools dedicated list view */
    .schools-view-header {
      margin-bottom: var(--unit-8);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--unit-4);
    }

    .search-filter-row {
      display: flex;
      gap: var(--unit-4);
      width: 100%;
      margin-bottom: var(--unit-8);
      flex-wrap: wrap;
    }

    .search-input-wrapper {
      position: relative;
      flex: 1;
      min-width: 280px;
    }

    .search-icon-inside {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--on-surface-variant);
      pointer-events: none;
    }

    .search-input-wrapper input {
      padding-left: 48px;
    }

    #school-search::placeholder {
      text-align: center;
    }

    .filter-select {
      background: rgba(25, 27, 35, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 14px 20px;
      border-radius: var(--radius-lg);
      color: var(--on-surface);
      outline: none;
      font-size: 15px;
    }

    /* Immersive Interview room styles */
    .interview-canvas {
      position: relative;
      z-index: 10;
      width: 100%;
      min-height: 100vh;
      height: auto;
      display: flex;
      flex-direction: column;
      padding: var(--unit-4) var(--unit-6);
      gap: var(--unit-4);
    }

    .interview-grid {
      flex: 1;
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: var(--unit-5);
      min-height: 0;
    }

    @media (max-width: 1024px) {
      .interview-grid {
        grid-template-columns: 1fr;
      }
    }

    .left-hud {
      display: flex;
      flex-direction: column;
      gap: var(--unit-4);
      height: 100%;
      min-height: 0;
    }

    .biometric-panel {
      padding: var(--unit-5);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      gap: var(--unit-4);
      flex: 1;
      background: rgba(26, 32, 38, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .biometric-title {
      font-family: 'Geist Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--on-surface-variant);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      padding-bottom: var(--unit-2);
    }

    .metric-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 6px;
      font-size: 15px;
    }

    .metric-val {
      font-family: 'Geist Mono', monospace;
      font-size: 13px;
      font-weight: 600;
    }

    .coaching-panel {
      padding: var(--unit-5);
      border-radius: 20px;
      background: rgba(26, 32, 38, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.06);
      margin-top: 0;
    }

    .coaching-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-family: 'Geist Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .main-frame {
      position: relative;
      border-radius: 40px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: var(--surface-container-lowest);
      display: flex;
      flex-direction: column;
    }

    .ai-backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(160deg, rgba(0, 219, 233, 0.08) 0%, rgba(8, 15, 20, 0.9) 60%, rgba(8, 15, 20, 1) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ai-avatar-icon {
      font-size: 180px;
      color: rgba(180, 197, 255, 0.07);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .ai-glow {
      position: absolute;
      width: 60%;
      height: 60%;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      background: radial-gradient(ellipse, rgba(0, 219, 233, 0.1) 0%, transparent 70%);
      pointer-events: none;
    }

    .frame-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 65%;
      background: linear-gradient(to top, var(--background) 0%, transparent 100%);
      z-index: 5;
      pointer-events: none;
    }

    .user-pip {
      position: absolute;
      top: var(--unit-8);
      right: var(--unit-8);
      width: 200px;
      height: 260px;
      border-radius: 24px;
      overflow: hidden;
      border: 2px solid rgba(180, 197, 255, 0.35);
      z-index: 20;
      background: linear-gradient(135deg, rgba(25, 27, 35, 1), rgba(40, 42, 50, 1));
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    }

    .user-pip-label {
      position: absolute;
      bottom: var(--unit-4);
      left: var(--unit-4);
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(8px);
      padding: 3px 10px;
      border-radius: var(--radius-full);
      font-family: 'Geist Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .pip-rec {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 8px;
      height: 8px;
      background: #ef4444;
      border-radius: 50%;
      animation: pulse 1.5s ease infinite;
    }

    .bottom-hud {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: var(--unit-8);
      z-index: 30;
      display: flex;
      flex-direction: column;
      gap: var(--unit-4);
    }

    .question-card {
      max-width: 680px;
      margin: 0 auto;
      width: 100%;
      padding: var(--unit-6);
      border-radius: 32px;
      border: 1px solid rgba(180, 197, 255, 0.15);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    .question-label {
      font-family: 'Geist Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--primary);
      margin-bottom: 8px;
    }

    .question-text {
      font-size: 18px;
      font-weight: 600;
      color: var(--on-surface);
      line-height: 1.45;
    }

    .transcript-scroll {
      max-width: 680px;
      margin: 0 auto;
      width: 100%;
      height: 72px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 0 var(--unit-4);
      mask-image: linear-gradient(to bottom, transparent, black 30%, black);
    }

    .transcript-line {
      font-size: 14px;
      line-height: 1.5;
    }

    .transcript-speaker {
      font-weight: 700;
      margin-right: 4px;
    }

    .transcript-speaker.ai {
      color: var(--primary);
    }

    .transcript-speaker.you {
      color: var(--tertiary);
    }

    .control-bar {
      height: 72px;
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--unit-8);
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .waveform-visual {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 24px;
      overflow: hidden;
    }

    .control-btns {
      display: flex;
      gap: var(--unit-3);
      align-items: center;
    }

    .ctrl-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      transition: all 0.2s;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
      color: var(--on-surface-variant);
    }

    .ctrl-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      color: var(--on-surface);
    }

    .ctrl-btn.active {
      background: rgba(180, 197, 255, 0.12);
      color: var(--primary);
      border-color: rgba(180, 197, 255, 0.2);
    }

    .ctrl-btn.danger {
      background: var(--error-container);
      color: var(--error);
      border-color: rgba(255, 180, 171, 0.2);
    }

    .ctrl-btn.danger:hover {
      background: rgba(147, 0, 10, 0.7);
    }

    /* Performance Report specific styles */
    .score-ring-wrap {
      position: relative;
      width: 192px;
      height: 192px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto var(--unit-6);
    }

    .score-ring-wrap svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .progress-chart {
      height: 200px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 8px;
      padding: 0 8px;
    }

    .chart-bar-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      flex: 1;
      height: 100%;
    }

    .chart-bar-wrap {
      flex: 1;
      width: 100%;
      display: flex;
      align-items: flex-end;
      position: relative;
    }

    .chart-bar {
      width: 100%;
      border-radius: 8px 8px 0 0;
      background: rgba(180, 197, 255, 0.15);
      transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
    }

    .chart-bar.active {
      background: var(--primary);
      box-shadow: 0 8px 24px rgba(180, 197, 255, 0.3);
    }

    .chart-tip {
      position: absolute;
      top: -24px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Geist Mono', monospace;
      font-size: 11px;
      font-weight: 600;
      color: var(--primary);
    }

    .skill-bento {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: var(--unit-6);
    }

    @media (max-width: 1024px) {
      .skill-bento {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 640px) {
      .skill-bento {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .skill-tile {
      border-radius: 24px;
      padding: var(--unit-6);
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: transform 0.25s ease;
      cursor: default;
    }

    .skill-tile:hover {
      transform: translateY(-4px);
    }

    /* Immersive GMAT Room Layout & Spacing Upgrades */
    #view-interview.visible~.aura-orb-container,
    #view-interview[style*="display: block"]~.aura-orb-container,
    #view-interview.active~.aura-orb-container {
      display: none !important;
    }

    .main-frame {
      display: flex !important;
      flex-direction: column !important;
      gap: var(--unit-4) !important;
      padding: var(--unit-4) !important;
      background: var(--surface-container-lowest) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-radius: 24px !important;
      height: auto !important;
      min-height: 520px !important;
      position: relative !important;
      overflow-y: auto !important;
    }

    .room-top-section {
      display: grid !important;
      grid-template-columns: 1.2fr 0.8fr !important;
      gap: var(--unit-4) !important;
      min-height: 240px !important;
    }

    .room-card {
      background: rgba(26, 32, 38, 0.3) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      border-radius: 20px !important;
      padding: var(--unit-4) !important;
      display: flex !important;
      flex-direction: column !important;
      position: relative !important;
      overflow: hidden !important;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    .question-panel-card {
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
      gap: var(--unit-3) !important;
    }

    .card-header-row {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      width: 100% !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
      padding-bottom: var(--unit-2) !important;
      margin-bottom: var(--unit-2) !important;
    }

    .card-header-row .material-symbols-outlined {
      font-size: 20px !important;
    }

    .question-label {
      font-family: 'Geist Mono', monospace !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.12em !important;
      color: var(--primary) !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }

    .question-body {
      flex: 1 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      overflow-y: auto !important;
    }

    .question-text {
      font-size: 18px !important;
      font-weight: 600 !important;
      color: var(--on-surface) !important;
      line-height: 1.6 !important;
      text-align: center !important;
      width: 100% !important;
    }

    .camera-panel-card {
      padding: 0 !important;
      background: #000 !important;
    }

    .camera-feed-container {
      width: 100% !important;
      height: 100% !important;
      position: relative !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 20px !important;
      overflow: hidden !important;
    }

    #user-webcam {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block;
    }

    .camera-fallback {
      display: flex;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: var(--unit-2) !important;
      color: rgba(255, 255, 255, 0.2) !important;
    }

    .camera-fallback .material-symbols-outlined {
      font-size: 56px !important;
    }

    .camera-fallback p {
      font-family: 'Geist Mono', monospace !important;
      font-size: 12px !important;
      text-transform: uppercase !important;
      letter-spacing: 0.08em !important;
    }

    .camera-indicator-overlay {
      position: absolute !important;
      top: 12px !important;
      left: 12px !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      background: rgba(0, 0, 0, 0.4) !important;
      backdrop-filter: blur(8px) !important;
      padding: 4px 10px !important;
      border-radius: var(--radius-full) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      z-index: 5 !important;
    }

    .user-pip-label {
      position: static !important;
      background: transparent !important;
      backdrop-filter: none !important;
      padding: 0 !important;
      font-family: 'Geist Mono', monospace !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.1em !important;
      color: #fff !important;
    }

    .pip-rec {
      position: static !important;
      width: 8px !important;
      height: 8px !important;
      background: #ef4444 !important;
      border-radius: 50% !important;
    }

    .speech-capture-card {
      flex: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: var(--unit-2) !important;
      min-height: 150px !important;
    }

    .speech-display-wrapper {
      flex: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      min-height: 0 !important;
    }

    #live-speech-display {
      flex: 1 !important;
      min-height: 90px !important;
      max-height: 120px !important;
      overflow-y: auto !important;
      font-size: 15px !important;
      line-height: 1.6 !important;
      padding: var(--unit-3) var(--unit-4) !important;
      border-radius: var(--radius-md) !important;
      background: rgba(255, 255, 255, 0.015) !important;
      border: 1px solid rgba(255, 255, 255, 0.03) !important;
      color: var(--on-surface) !important;
      transition: all 0.3s ease !important;
      white-space: pre-wrap !important;
    }

    #live-speech-display.text-muted {
      color: var(--on-surface-variant) !important;
      font-style: italic !important;
    }

    .control-bar-card {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      height: 72px !important;
      padding: 0 var(--unit-6) !important;
      flex: none !important;
    }

    .status-left {
      display: flex !important;
      align-items: center !important;
      gap: var(--unit-3) !important;
      width: 35% !important;
    }

    .mic-status-container {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
    }

    .status-center {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      width: 30% !important;
    }

    .status-right {
      display: flex !important;
      justify-content: flex-end !important;
      width: 35% !important;
    }

    .pulse-dot {
      width: 8px !important;
      height: 8px !important;
      border-radius: 50% !important;
      background: var(--tertiary) !important;
      animation: pulse 1.5s infinite ease-in-out !important;
      display: inline-block !important;
    }

    .ai-speaking-glow {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 6px 14px !important;
      border-radius: var(--radius-full) !important;
      background: rgba(0, 219, 233, 0.06) !important;
      border: 1px solid rgba(0, 219, 233, 0.12) !important;
      box-shadow: 0 0 15px rgba(0, 219, 233, 0.1) !important;
    }

    .card-state-overlay {
      position: absolute !important;
      inset: 0 !important;
      background: rgba(14, 20, 26, 0.9) !important;
      backdrop-filter: blur(8px) !important;
      display: flex;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: var(--unit-3) !important;
      z-index: 10 !important;
      animation: fadeIn 0.3s ease forwards !important;
    }

    .spinner {
      width: 28px !important;
      height: 28px !important;
      border: 2.5px solid rgba(255, 255, 255, 0.1) !important;
      border-top-color: var(--tertiary) !important;
      border-radius: 50% !important;
      animation: spin 0.8s linear infinite !important;
    }

    .question-panel-card.fade-in {
      animation: fade-in-up 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
    }

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

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes fade-in-up {
      from {
        opacity: 0;
        transform: translateY(12px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 1024px) {
      .room-top-section {
        grid-template-columns: 1fr !important;
        flex: none !important;
        height: auto !important;
      }

      .question-panel-card {
        height: 200px !important;
      }

      .camera-panel-card {
        height: 200px !important;
      }

      .control-bar-card {
        flex-direction: column !important;
        height: auto !important;
        padding: var(--unit-4) !important;
        gap: var(--unit-3) !important;
      }

      .status-left,
      .status-center,
      .status-right {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
      }
    }

    /* Premium Skill Analysis Dashboard styling overrides and extensions */
    .skill-bento-premium {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--unit-6);
      margin-bottom: var(--unit-12);
    }

    @media (max-width: 1024px) {
      .skill-bento-premium {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {
      .skill-bento-premium {
        grid-template-columns: 1fr;
      }
    }

    .skill-analysis-card {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: var(--unit-8);
      background: rgba(26, 32, 38, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-2xl);
      padding: var(--unit-8);
      position: relative;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(24px);
      margin-bottom: var(--unit-8);
      animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @media (max-width: 900px) {
      .skill-analysis-card {
        grid-template-columns: 1fr;
      }
    }

    .sa-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .sa-radar-container {
      width: 100%;
      height: 300px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sa-radar-svg {
      width: 100%;
      height: 100%;
      max-width: 300px;
      max-height: 300px;
      overflow: visible;
    }

    .sa-radar-polygon {
      fill: url(#radarGrad);
      stroke: var(--tertiary);
      stroke-width: 2;
      filter: drop-shadow(0 0 6px rgba(0, 219, 233, 0.5));
      transition: points 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .sa-radar-point {
      fill: #fff;
      stroke: var(--tertiary);
      stroke-width: 2;
      r: 4;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .sa-radar-point:hover {
      r: 6;
      fill: var(--tertiary);
      filter: drop-shadow(0 0 8px var(--tertiary));
    }

    .sa-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--unit-4);
    }

    .sa-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      padding-bottom: var(--unit-4);
    }

    .sa-breakdown-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .sa-skill-row {
      display: grid;
      grid-template-columns: 140px 1fr 100px;
      align-items: center;
      gap: 16px;
    }

    @media (max-width: 600px) {
      .sa-skill-row {
        grid-template-columns: 100px 1fr 70px;
      }
    }

    .sa-skill-name-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .sa-skill-icon {
      font-size: 18px !important;
      opacity: 0.8;
    }

    .sa-skill-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--on-surface);
    }

    .sa-progress-bar-bg {
      height: 6px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }

    .sa-progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--secondary) 0%, var(--tertiary) 100%);
      border-radius: 3px;
      width: 0%;
      transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .sa-skill-meta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .sa-skill-val {
      font-family: 'Geist Mono', monospace;
      font-size: 13px;
      font-weight: 600;
      color: var(--on-surface);
      text-align: right;
      width: 36px;
    }

    .sa-badge {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 4px;
      letter-spacing: 0.03em;
    }

    .sa-badge.excellent {
      background: rgba(0, 219, 233, 0.1);
      color: var(--tertiary);
      border: 1px solid rgba(0, 219, 233, 0.2);
    }

    .sa-badge.strong {
      background: rgba(190, 194, 255, 0.1);
      color: var(--secondary);
      border: 1px solid rgba(190, 194, 255, 0.2);
    }

    .sa-badge.good {
      background: rgba(187, 199, 224, 0.1);
      color: var(--primary);
      border: 1px solid rgba(187, 199, 224, 0.2);
    }

    .sa-badge.needs-improvement {
      background: rgba(255, 180, 171, 0.1);
      color: var(--error);
      border: 1px solid rgba(255, 180, 171, 0.2);
    }

    /* Overall Score Gauge styling */
    .sa-score-gauge-container {
      display: flex;
      align-items: center;
      gap: 16px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.05);
      padding: 10px 16px;
      border-radius: var(--radius-xl);
    }

    .sa-score-gauge-ring {
      width: 60px;
      height: 60px;
      position: relative;
    }

    .sa-score-gauge-ring svg {
      transform: rotate(-90deg);
      width: 60px;
      height: 60px;
    }

    .sa-score-gauge-val {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      color: var(--on-surface);
    }

    .sa-score-info {
      display: flex;
      flex-direction: column;
    }

    .sa-score-rating {
      font-size: 14px;
      font-weight: 700;
      color: var(--tertiary);
    }

    .sa-score-readiness {
      font-size: 11px;
      color: var(--on-surface-variant);
      margin-top: 2px;
    }

    /* AI Insight Panel */
    .sa-insight-panel {
      background: rgba(26, 32, 38, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: var(--radius-2xl);
      padding: var(--unit-6);
      backdrop-filter: blur(16px);
      margin-top: var(--unit-8);
      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .sa-insight-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: var(--unit-6);
      margin-top: var(--unit-4);
    }

    @media (max-width: 900px) {
      .sa-insight-grid {
        grid-template-columns: 1fr;
      }
    }

    .sa-insight-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: var(--radius-xl);
      padding: var(--unit-4);
    }

    .sa-competency-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .sa-competency-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.01);
      border-radius: 8px;
    }

    .sa-competency-item.strength {
      border-left: 3px solid var(--tertiary);
    }

    .sa-competency-item.growth {
      border-left: 3px solid var(--secondary);
    }

    .sa-practice-item {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
    }

    .sa-practice-icon {
      font-size: 20px !important;
      color: var(--tertiary);
      margin-top: 2px;
    }

    .sa-practice-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--on-surface);
    }

    .sa-practice-desc {
      font-size: 12px;
      color: var(--on-surface-variant);
      margin-top: 2px;
    }

    /* Premium Interactive Timeline Dashboard Styles */
    .timeline-tooltip {
      position: absolute;
      display: none;
      background: rgba(17, 19, 27, 0.85);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius-xl);
      padding: 12px 16px;
      color: var(--on-surface);
      font-family: var(--font-sans);
      font-size: 13px;
      z-index: 1000;
      pointer-events: none;
      box-shadow: var(--shadow-xl);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .timeline-tooltip h5 {
      margin: 0 0 6px 0;
      color: var(--primary);
      font-size: 14px;
      font-weight: 600;
    }

    .timeline-tooltip p {
      margin: 4px 0;
      color: var(--on-surface-variant);
      font-size: 12px;
    }

    .timeline-tooltip span {
      color: var(--tertiary);
      font-weight: 600;
    }

    .chart-bar-col {
      cursor: pointer;
    }

    .chart-bar {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .chart-bar:hover {
      filter: brightness(1.2);
      box-shadow: 0 0 12px var(--tertiary);
    }

    .chart-bar.selected {
      background: var(--tertiary) !important;
      box-shadow: 0 0 16px var(--tertiary);
      transform: scaleY(1.05);
      border: 1.5px solid #ffffff;
    }

    .chart-bar.faded {
      opacity: 0.35;
    }

    .fade-in-up {
      animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0.5;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Premium AI Interview Dashboard Redesign Styles */
    .premium-card {
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      border: 1px solid rgba(255, 255, 255, 0.05);
      background: rgba(18, 22, 30, 0.45);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-radius: 20px;
      position: relative;
      overflow: hidden;
    }

    .premium-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0, 219, 233, 0.3);
      box-shadow: 0 16px 36px rgba(0, 219, 233, 0.08), 0 0 1px rgba(0, 219, 233, 0.25) inset;
      background: rgba(18, 22, 30, 0.55);
    }

    .premium-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(800px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(255, 255, 255, 0.03), transparent 40%);
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .premium-card:hover::before {
      opacity: 1;
    }

    @keyframes pulse-cyan {
      0% {
        box-shadow: 0 0 0 0 rgba(0, 219, 233, 0.3);
        border-color: rgba(0, 219, 233, 0.3);
      }

      70% {
        box-shadow: 0 0 0 8px rgba(0, 219, 233, 0);
        border-color: rgba(0, 219, 233, 0.15);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(0, 219, 233, 0);
        border-color: rgba(0, 219, 233, 0.3);
      }
    }

    .pulse-cyan-glow {
      animation: pulse-cyan 2.5s infinite;
    }

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

      100% {
        background-position: 200% 0;
      }
    }

    .shimmer-loader {
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 25%, rgba(255, 255, 255, 0.06) 37%, rgba(255, 255, 255, 0.02) 63%);
      background-size: 200% 100%;
      animation: shimmer-bg 1.8s infinite linear;
    }

    .sparkline-path {
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      animation: draw-sparkline 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes draw-sparkline {
      to {
        stroke-dashoffset: 0;
      }
    }

    .radar-grid-bg {
      background-image: radial-gradient(rgba(0, 219, 233, 0.04) 1px, transparent 1px);
      background-size: 16px 16px;
    }

    .glowing-btn {
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 16px rgba(0, 219, 233, 0.2);
      transition: all 0.3s ease;
    }

    .glowing-btn:hover {
      box-shadow: 0 0 24px rgba(0, 219, 233, 0.4);
      transform: scale(1.02);
    }

    .text-glow {
      text-shadow: 0 0 10px rgba(0, 219, 233, 0.4);
    }

    .school-fit-card {
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.04);
      background: rgba(25, 28, 38, 0.4);
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .school-fit-card:hover {
      border-color: rgba(0, 219, 233, 0.2);
      background: rgba(25, 28, 38, 0.5);
      transform: translateY(-2px);
    }

    /* Style selector cards in practice setup modal */
    .style-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      padding: 16px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .style-card:hover {
      background: rgba(255, 255, 255, 0.05) !important;
      border-color: rgba(0, 219, 233, 0.2) !important;
      transform: translateY(-2px);
    }

    .style-card.active {
      background: rgba(0, 219, 233, 0.04) !important;
      border-color: var(--tertiary) !important;
      box-shadow: 0 0 15px rgba(0, 219, 233, 0.15) !important;
    }

    .style-card.active span.material-symbols-outlined {
      color: var(--tertiary) !important;
    }

    /* 2-Interviewer Panel & 7-Round Stepper Styles */
    .round-step {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      color: var(--on-surface-variant);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      white-space: nowrap;
      transition: all 0.3s ease;
    }

    @keyframes stepActivate {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.06);
        box-shadow: 0 0 20px rgba(0, 219, 233, 0.45);
      }

      100% {
        transform: scale(1);
      }
    }

    .round-step.active {
      background: rgba(0, 219, 233, 0.12);
      border-color: var(--tertiary);
      color: #fff;
      box-shadow: 0 0 12px rgba(0, 219, 233, 0.25);
      animation: stepActivate 0.4s ease-out;
    }

    .round-step.completed {
      background: rgba(46, 204, 113, 0.12);
      border-color: #2ecc71;
      color: #2ecc71;
    }

    .round-step .step-num {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
    }

    .round-step.active .step-num {
      background: var(--tertiary);
      color: #000;
    }

    .round-step.completed .step-num {
      background: #2ecc71;
      color: #000;
    }

    .interviewer-card {
      transition: all 0.3s ease;
    }

    .interviewer-card.active {
      background: rgba(0, 219, 233, 0.08) !important;
      border: 1.5px solid var(--tertiary) !important;
      opacity: 1 !important;
      box-shadow: 0 0 20px rgba(0, 219, 233, 0.2) !important;
    }

    .speaker-glow-active {
      animation: activeSpeakerGlow 2s infinite alternate;
    }

    @keyframes activeSpeakerGlow {
      from {
        box-shadow: 0 0 10px rgba(0, 219, 233, 0.2);
      }

      to {
        box-shadow: 0 0 25px rgba(0, 219, 233, 0.5);
      }
    }

    /* ── GMAT MOCK TESTS STYLES ───────────────────────────────── */
    .mock-badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 600;
    }
    .mock-badge.not-started {
      background: rgba(255, 255, 255, 0.06);
      color: var(--on-surface-variant);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .mock-badge.in-progress {
      background: rgba(255, 193, 7, 0.12);
      color: #ffc107;
      border: 1px solid rgba(255, 193, 7, 0.3);
    }
    .mock-badge.completed {
      background: rgba(46, 204, 113, 0.12);
      color: #2ecc71;
      border: 1px solid rgba(46, 204, 113, 0.3);
    }

    .mock-option-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.03);
      border: 1.5px solid rgba(255, 255, 255, 0.08);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .mock-option-item:hover {
      background: rgba(0, 219, 233, 0.05);
      border-color: rgba(0, 219, 233, 0.3);
    }
    .mock-option-item.selected {
      background: rgba(0, 219, 233, 0.12) !important;
      border-color: var(--tertiary) !important;
      box-shadow: 0 0 15px rgba(0, 219, 233, 0.15);
    }
    .mock-option-item .option-key {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 13px;
      color: #fff;
    }
    .mock-option-item.selected .option-key {
      background: var(--tertiary);
      color: #000;
    }

    .nav-q-btn {
      position: relative;
      height: 38px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.03);
      color: var(--on-surface-variant);
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .nav-q-btn.answered {
      background: rgba(0, 219, 233, 0.15);
      color: var(--tertiary);
      border-color: rgba(0, 219, 233, 0.3);
    }
    .nav-q-btn.current {
      border: 2px solid #fff !important;
      font-weight: 800;
      color: #fff;
    }
    .nav-q-btn.flagged .flag-dot {
      position: absolute;
      top: 3px;
      right: 3px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ffc107;
    }

    .pulse-warning {
      animation: timerWarning 1s infinite alternate;
    }
    @keyframes timerWarning {
      from { opacity: 1; }
      to { opacity: 0.5; }
    }

    /* ── Modal Overlay & Content ──────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: none; /* toggled to flex by JS */
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .modal-content {
      width: 100%;
      max-width: 560px;
      max-height: 90vh;
      overflow-y: auto;
      animation: modalSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes modalSlideIn {
      from { opacity: 0; transform: scale(0.92) translateY(16px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* ── Mock Exam Room ───────────────────────────────────── */
    #view-mock-room {
      min-height: 100vh;
      overflow-y: auto;
      background: #070b12;
    }

/* ─── PRINT MEDIA STYLES FOR CLEAN REPORT PRINTING ───────── */
@media print {
  body, html {
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 11pt !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  aside,
  aside.sidebar,
  .sidebar,
  .aura-orb-container,
  .no-print,
  button,
  .btn,
  #mock-perf-header,
  #mock-history-container {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
  }

  #view-app-layout {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
  }

  .sub-view {
    display: block !important;
    padding: 0 !important;
  }

  .glass-panel, .premium-card {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #111111 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 16px !important;
  }

  h1, h2, h3, h4, h5, h6, strong, p, span, div, td, th {
    color: #111111 !important;
    text-shadow: none !important;
  }

  .text-tertiary, .text-secondary {
    color: #007680 !important;
  }

  .progress-track {
    background: #e5e7eb !important;
  }

  .progress-fill {
    background: #007680 !important;
  }

  /* STRICT PAGE BREAK PREVENTION FOR QUESTION CARDS IN PRINT */
  .glass-panel,
  .premium-card,
  tr,
  div[style*="border-left"] {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    break-inside: avoid-page !important;
    -webkit-column-break-inside: avoid !important;
  }

  @page {
    margin: 1cm;
    size: portrait;
  }
}