/* ═══════════════════════════════════════════════════════════
   Vedrix — Complete Stylesheet
   Dark / Light Theme | Mentor & Mentee Platform
   ═══════════════════════════════════════════════════════════ */

   @import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap");

   /* ── Theme Variables ─────────────────────────────────────── */
   :root {
       /* Brand */
       --brand: #f59e0b;
       --brand-light: #fcd34d;
       --brand-dark: #d97706;
       --brand-muted: rgba(245, 158, 11, 0.12);
       --brand-glow: 0 0 32px rgba(245, 158, 11, 0.25);
   
       /* Dark theme (default) */
       --bg: #09090b;
       --bg-2: #111113;
       --bg-3: #18181b;
       --bg-4: #27272a;
       --bg-5: #3f3f46;
       --border: rgba(255, 255, 255, 0.07);
       --border-2: rgba(255, 255, 255, 0.12);
       --text: #fafafa;
       --text-2: #a1a1aa;
       --text-3: #71717a;
       --card-bg: #18181b;
       --card-border: rgba(255, 255, 255, 0.07);
       --input-bg: #27272a;
       --input-border: rgba(255, 255, 255, 0.1);
       --input-focus: rgba(245, 158, 11, 0.4);
       --nav-bg: rgba(9, 9, 11, 0.85);
       --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
       --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
       --overlay: rgba(0, 0, 0, 0.85);
       --success: #22c55e;
       --success-muted: rgba(34, 197, 94, 0.12);
       --error: #ef4444;
       --error-muted: rgba(239, 68, 68, 0.12);
       --info: #3b82f6;
       --info-muted: rgba(59, 130, 246, 0.12);
       --warning: #f59e0b;
       --warning-muted: rgba(245, 158, 11, 0.12);
   
       --radius-sm: 6px;
       --radius: 10px;
       --radius-btn: 8px;
       --radius-lg: 16px;
       --radius-xl: 24px;
       --radius-2xl: 32px;
   
       --font-head: "Sora", sans-serif;
       --font-body: "DM Sans", sans-serif;
   
       --nav-h: 68px;
       --trans: 0.2s ease;

       color-scheme: dark;
   }
   
   /* ── Light Theme ─────────────────────────────────────────── */
   [data-theme="light"] {
       --bg: #fafafa;
       --bg-2: #f4f4f5;
       --bg-3: #ffffff;
       --bg-4: #e4e4e7;
       --bg-5: #d4d4d8;
       --border: rgba(0, 0, 0, 0.07);
       --border-2: rgba(0, 0, 0, 0.12);
       --text: #09090b;
       --text-2: #52525b;
       --text-3: #71717a;
       --card-bg: #ffffff;
       --card-border: rgba(0, 0, 0, 0.06);
       --input-bg: #f4f4f5;
       --input-border: rgba(0, 0, 0, 0.1);
       --nav-bg: rgba(250, 250, 250, 0.9);
       --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
       --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
       --overlay: rgba(0, 0, 0, 0.5);
       --success-muted: rgba(34, 197, 94, 0.08);
       --error-muted: rgba(239, 68, 68, 0.08);
       --info-muted: rgba(59, 130, 246, 0.08);
       --warning-muted: rgba(245, 158, 11, 0.08);

       color-scheme: light;
   }
   
   /* ── Reset ───────────────────────────────────────────────── */
   *,
   *::before,
   *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   html {
       scroll-behavior: smooth;
       font-size: 16px;
       scrollbar-width: thin;
   }
   body {
       font-family: var(--font-body);
       background: var(--bg);
       color: var(--text);
       line-height: 1.6;
       -webkit-font-smoothing: antialiased;
       overflow-x: hidden;
       transition:
           background var(--trans),
           color var(--trans);
   }
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-family: var(--font-head);
       font-weight: 700;
       line-height: 1.15;
   }
   a {
       text-decoration: none;
       color: inherit;
       transition: color var(--trans);
   }
   img {
       max-width: 100%;
       display: block;
   }
   button {
       font-family: inherit;
       cursor: pointer;
       border: none;
       outline: none;
   }

   /* All project buttons use 8px radius */
   .btn,
   button.btn,
   a.btn,
   .btn-primary,
   .btn-outline,
   .btn-ghost,
   .btn-danger,
   .btn-success,
   .btn-sm,
   .btn-lg,
   .btn-xl,
   .btn-full,
   .btn-icon,
   .duration-btn,
   .time-slot,
   .blog-filter-chip,
   .nav-btn,
   input[type="submit"],
   input[type="button"],
   input[type="reset"],
   button:not(.theme-btn):not(.hamburger):not(.banner-dot):not(.modal-close) {
       border-radius: var(--radius-btn) !important;
   }
   ::-webkit-scrollbar {
       width: 6px;
       height: 6px;
   }
   ::-webkit-scrollbar-track {
       background: var(--bg-2);
   }
   ::-webkit-scrollbar-thumb {
       background: var(--bg-5);
       border-radius: 3px;
   }
   ::-webkit-scrollbar-thumb:hover {
       background: var(--brand);
   }
   ::selection {
       background: var(--brand);
       color: #000;
   }
   
   /* ── Layout Utilities ────────────────────────────────────── */
   .container {
       max-width: 1280px;
       margin: 0 auto;
       padding: 0 24px;
   }
   .container-sm {
       max-width: 860px;
       margin: 0 auto;
       padding: 0 24px;
   }
   .section {
       padding: 80px 0;
   }
   .section-sm {
       padding: 48px 0;
   }
   .grid-2 {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 24px;
   }
   .grid-3 {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
   }
   .grid-4 {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 20px;
   }
   .flex {
       display: flex;
   }
   .flex-center {
       display: flex;
       align-items: center;
       justify-content: center;
   }
   .flex-between {
       display: flex;
       align-items: center;
       justify-content: space-between;
   }
   .flex-col {
       display: flex;
       flex-direction: column;
   }
   .gap-2 {
       gap: 8px;
   }
   .gap-3 {
       gap: 12px;
   }
   .gap-4 {
       gap: 16px;
   }
   .gap-6 {
       gap: 24px;
   }
   .gap-8 {
       gap: 32px;
   }
   .items-center {
       align-items: center;
   }
   .text-center {
       text-align: center;
   }
   .mt-auto {
       margin-top: auto;
   }
   .w-full {
       width: 100%;
   }
   .hidden {
       display: none !important;
   }
   .sr-only {
       position: absolute;
       width: 1px;
       height: 1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
   }
   
   /* ── Typography ──────────────────────────────────────────── */
   .text-xs {
       font-size: 11px;
   }
   .text-sm {
       font-size: 13px;
   }
   .text-base {
       font-size: 15px;
   }
   .text-lg {
       font-size: 17px;
   }
   .text-xl {
       font-size: 20px;
   }
   .text-2xl {
       font-size: 24px;
   }
   .text-3xl {
       font-size: 30px;
   }
   .text-4xl {
       font-size: 36px;
   }
   .text-5xl {
       font-size: 48px;
   }
   .text-6xl {
       font-size: 60px;
   }
   .font-medium {
       font-weight: 500;
   }
   .font-semibold {
       font-weight: 600;
   }
   .font-bold {
       font-weight: 700;
   }
   .font-extrabold {
       font-weight: 800;
   }
   .text-muted {
       color: var(--text-2);
   }
   .text-brand {
       color: var(--brand);
   }
   .text-success {
       color: var(--success);
   }
   .text-error {
       color: var(--error);
   }
   .label-caps {
       font-family: var(--font-head);
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       color: var(--text-3);
   }
   
   /* ── Buttons ─────────────────────────────────────────────── */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       padding: 10px 20px;
       border-radius: var(--radius-btn);
       font-family: var(--font-head);
       font-size: 13px;
       font-weight: 600;
       transition: all var(--trans);
       white-space: nowrap;
       cursor: pointer;
       border: none;
       text-decoration: none;
   }
   .btn:disabled {
       opacity: 0.5;
       cursor: not-allowed;
       pointer-events: none;
   }
   
   .btn-primary {
       background: var(--brand);
       color: #000;
   }
   .btn-primary:hover {
       background: var(--brand-light);
       transform: translateY(-1px);
       box-shadow: var(--brand-glow);
   }
   
   .btn-outline {
       background: transparent;
       color: var(--text);
       border: 1.5px solid var(--border-2);
   }
   .btn-outline:hover {
       border-color: var(--brand);
       color: var(--brand);
   }
   
   .btn-ghost {
       background: var(--bg-4);
       color: var(--text);
   }
   .btn-ghost:hover {
       background: var(--bg-5);
   }
   
   .btn-danger {
       background: var(--error);
       color: #fff;
   }
   .btn-danger:hover {
       opacity: 0.9;
   }
   
   .btn-success {
       background: var(--success);
       color: #fff;
   }
   
   .btn-sm {
       padding: 6px 14px;
       font-size: 12px;
   }
   .btn-lg {
       padding: 14px 28px;
       font-size: 15px;
   }
   .btn-xl {
       padding: 16px 36px;
       font-size: 16px;
   }
   .btn-full {
       width: 100%;
   }
   .btn-icon {
       padding: 8px;
       width: 38px;
       height: 38px;
   }
   
   /* ── Navbar ──────────────────────────────────────────────── */
   .navbar {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 1000;
       height: var(--nav-h);
       background: var(--nav-bg);
       backdrop-filter: blur(20px);
       border-bottom: 1px solid var(--border);
       display: flex;
       align-items: center;
   }
   .navbar-inner {
       width: 100%;
       max-width: 1280px;
       margin: 0 auto;
       padding: 0 24px;
       display: flex;
       align-items: center;
       gap: 32px;
   }
   .navbar-brand {
       display: flex;
       align-items: center;
       flex-shrink: 0;
       line-height: 0;
   }
   .navbar-brand img {
       height: 48px;
       width: auto;
       max-width: 200px;
       object-fit: contain;
       display: block;
   }
   .navbar-brand .logo-for-light {
       display: none !important;
   }
   .navbar-brand .logo-for-dark {
       display: block !important;
   }
   html[data-theme="light"] .navbar-brand .logo-for-light {
       display: block !important;
   }
   html[data-theme="light"] .navbar-brand .logo-for-dark {
       display: none !important;
   }
   .navbar-nav {
       display: flex;
       align-items: center;
       gap: 4px;
       list-style: none;
       margin-left: 16px;
       flex: 1;
   }
   .navbar-nav a {
       display: flex;
       align-items: center;
       gap: 6px;
       padding: 7px 14px;
       border-radius: var(--radius-sm);
       font-size: 13px;
       font-weight: 500;
       color: var(--text-2);
       transition: all var(--trans);
   }
   .navbar-nav a:hover,
   .navbar-nav a.active {
       background: var(--brand-muted);
       color: var(--brand);
   }
   .navbar-nav a.active {
       font-weight: 600;
   }
   .navbar-right {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-left: auto;
   }
   
   /* Theme Toggle */
   .theme-btn {
       width: 36px;
       height: 36px;
       border-radius: var(--radius-sm);
       background: var(--bg-4);
       border: 1px solid var(--border);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       font-size: 16px;
       color: var(--text-2);
       transition: all var(--trans);
   }
   .theme-btn:hover {
       background: var(--brand-muted);
       color: var(--brand);
   }
   
   /* User Dropdown */
   .user-menu {
       position: relative;
   }
   .user-trigger {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 6px 12px 6px 6px;
       border-radius: var(--radius);
       background: var(--bg-3);
       border: 1px solid var(--border);
       cursor: pointer;
       transition: all var(--trans);
   }
   .user-trigger:hover {
       border-color: var(--border-2);
   }
   .user-avatar {
       width: 32px;
       height: 32px;
       border-radius: 50%;
       background: linear-gradient(135deg, var(--brand), var(--brand-dark));
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: var(--font-head);
       font-weight: 700;
       font-size: 13px;
       color: #000;
       flex-shrink: 0;
       overflow: hidden;
   }
   .user-avatar img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   .user-name {
       font-size: 13px;
       font-weight: 600;
   }
   .user-role {
       font-size: 11px;
       color: var(--text-2);
   }
   .user-dropdown {
       position: absolute;
       right: 0;
       top: calc(100% + 8px);
       min-width: 200px;
       background: var(--card-bg);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       padding: 8px;
       box-shadow: var(--shadow-lg);
       opacity: 0;
       pointer-events: none;
       transform: translateY(-6px);
       transition: all var(--trans);
       z-index: 100;
   }
   .user-dropdown.open {
       opacity: 1;
       pointer-events: all;
       transform: translateY(0);
   }
   .dropdown-item {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 9px 12px;
       border-radius: var(--radius-sm);
       font-size: 13px;
       color: var(--text);
       background: transparent;
       border: none;
       width: 100%;
       cursor: pointer;
       transition: background var(--trans), color var(--trans);
       text-decoration: none;
   }
   .dropdown-item:hover {
       background: var(--bg-4);
       color: var(--brand);
   }
   .dropdown-item.danger {
       color: var(--error);
   }
   .dropdown-item.danger:hover {
       background: var(--error-muted);
       color: var(--error);
   }
   .dropdown-divider {
       height: 1px;
       background: var(--border);
       margin: 6px 0;
   }
   
   /* Hamburger */
   .hamburger {
       display: none;
       flex-direction: column;
       gap: 5px;
       padding: 6px;
       background: none;
       cursor: pointer;
   }
   .hamburger span {
       display: block;
       width: 22px;
       height: 2px;
       background: var(--text);
       border-radius: 2px;
       transition: all var(--trans);
   }
   .hamburger.open span:nth-child(1) {
       transform: translateY(7px) rotate(45deg);
   }
   .hamburger.open span:nth-child(2) {
       opacity: 0;
   }
   .hamburger.open span:nth-child(3) {
       transform: translateY(-7px) rotate(-45deg);
   }
   
   /* Mobile Menu */
   .mobile-menu {
       display: none;
       position: fixed;
       inset: 0;
       z-index: 999;
       background: var(--bg);
       padding-top: var(--nav-h);
       flex-direction: column;
       overflow-y: auto;
   }
   .mobile-menu.open {
       display: flex;
   }
   .mobile-menu-inner {
       padding: 24px;
       display: flex;
       flex-direction: column;
       gap: 4px;
   }
   .mobile-nav-item {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 14px 16px;
       border-radius: var(--radius);
       font-size: 15px;
       font-weight: 500;
       color: var(--text-2);
       transition: all var(--trans);
   }
   .mobile-nav-item:hover,
   .mobile-nav-item.active {
       background: var(--brand-muted);
       color: var(--brand);
   }
   
   /* ── Hero ────────────────────────────────────────────────── */
   .hero {
       position: relative;
       min-height: 100vh;
       padding-top: var(--nav-h);
       display: flex;
       align-items: center;
       overflow: hidden;
   }
   .hero-bg {
       position: absolute;
       inset: 0;
       pointer-events: none;
       background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(245, 158, 11, 0.08) 0%, transparent 70%),
           radial-gradient(ellipse 50% 50% at 10% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 60%);
   }
   .hero-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 60px;
       align-items: center;
   }
   .hero-eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 6px 14px;
       border-radius: 999px;
       background: var(--brand-muted);
       border: 1px solid rgba(245, 158, 11, 0.25);
       font-size: 12px;
       font-weight: 600;
       color: var(--brand);
       margin-bottom: 24px;
   }
   .hero-title {
       font-size: clamp(32px, 5vw, 58px);
       line-height: 1.08;
       margin-bottom: 20px;
   }
   .hero-title .accent {
       color: var(--brand);
   }
   .hero-desc {
       font-size: 17px;
       color: var(--text-2);
       line-height: 1.75;
       margin-bottom: 32px;
       max-width: 520px;
   }
   .hero-cta {
       display: flex;
       gap: 14px;
       flex-wrap: wrap;
       margin-bottom: 48px;
   }
   .hero-stats {
       display: flex;
       gap: 36px;
       flex-wrap: wrap;
   }
   .stat-item {
       display: flex;
       flex-direction: column;
       gap: 2px;
   }
   .stat-value {
       font-family: var(--font-head);
       font-size: 26px;
       font-weight: 800;
       color: var(--brand);
   }
   .stat-label {
       font-size: 12px;
       color: var(--text-3);
   }
   
   /* Hero Banner / Slider */
   .banner-wrap {
       position: relative;
       border-radius: var(--radius-xl);
       overflow: hidden;
       aspect-ratio: 4/3;
       max-width: 540px;
       background: var(--bg-3);
       border: 1px solid var(--border);
   }
   .banner-slide {
       position: absolute;
       inset: 0;
       padding: 36px;
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       opacity: 0;
       transition: opacity 0.6s ease;
   }
   .banner-slide.active {
       opacity: 1;
   }
   .banner-slide-bg {
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-4) 100%);
   }
   .banner-slide-content {
       position: relative;
       z-index: 1;
   }
   .banner-slide-icon {
       font-size: 56px;
       margin-bottom: 16px;
   }
   .banner-slide h3 {
       font-size: 22px;
       margin-bottom: 8px;
   }
   .banner-slide p {
       font-size: 13px;
       color: var(--text-2);
       line-height: 1.7;
   }
   .banner-dots {
       position: absolute;
       bottom: 18px;
       right: 20px;
       display: flex;
       gap: 6px;
   }
   .banner-dot {
       width: 8px;
       height: 8px;
       border-radius: 999px;
       background: var(--bg-5);
       cursor: pointer;
       transition: all var(--trans);
   }
   .banner-dot.active {
       width: 20px;
       background: var(--brand);
   }
   .banner-prev,
   .banner-next {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 36px;
       height: 36px;
       border-radius: 50%;
       background: var(--bg-4);
       border: 1px solid var(--border);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 16px;
       cursor: pointer;
       transition: all var(--trans);
       z-index: 2;
       color: var(--text);
   }
   .banner-prev {
       left: 12px;
   }
   .banner-next {
       right: 12px;
   }
   .banner-prev:hover,
   .banner-next:hover {
       background: var(--brand);
       color: #000;
       border-color: var(--brand);
   }
   
   /* Search Bar */
   .search-hero {
       background: var(--card-bg);
       border: 1px solid var(--border);
       border-radius: var(--radius-xl);
       padding: 6px 6px 6px 20px;
       display: flex;
       align-items: center;
       gap: 12px;
       max-width: 680px;
       margin: 32px auto 0;
       box-shadow: var(--shadow-lg);
   }
   .search-hero input {
       flex: 1;
       background: transparent;
       border: none;
       outline: none;
       font-size: 15px;
       color: var(--text);
       font-family: inherit;
       padding: 10px 0;
   }
   .search-hero input::placeholder {
       color: var(--text-3);
   }
   .search-filters {
       display: flex;
       gap: 8px;
       align-items: center;
       flex-shrink: 0;
   }
   .search-filter-btn {
       padding: 8px 14px;
       border-radius: var(--radius-sm);
       background: var(--bg-4);
       border: 1px solid var(--border);
       font-size: 12px;
       font-weight: 500;
       color: var(--text-2);
       cursor: pointer;
       transition: all var(--trans);
   }
   .search-filter-btn:hover,
   .search-filter-btn.active {
       background: var(--brand-muted);
       color: var(--brand);
       border-color: rgba(245, 158, 11, 0.3);
   }
   
   /* ── Cards ───────────────────────────────────────────────── */
   .card {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-lg);
       padding: 24px;
       transition: all var(--trans);
   }
   .card:hover {
       border-color: var(--border-2);
       box-shadow: var(--shadow);
   }
   .card-sm {
       padding: 16px;
       border-radius: var(--radius);
   }
   
   /* Mentor Card */
   .mentor-card {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-lg);
       padding: 20px;
       transition: all var(--trans);
       cursor: pointer;
       display: flex;
       flex-direction: column;
       gap: 0;
   }
   .mentor-card:hover {
       border-color: rgba(245, 158, 11, 0.3);
       transform: translateY(-3px);
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
   }
   .mentor-card-head {
       display: flex;
       gap: 14px;
       align-items: flex-start;
       margin-bottom: 12px;
   }
   .mentor-avatar-lg {
       width: 56px;
       height: 56px;
       border-radius: 14px;
       flex-shrink: 0;
       background: linear-gradient(135deg, var(--brand), var(--brand-dark));
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: var(--font-head);
       font-weight: 800;
       font-size: 20px;
       color: #000;
       overflow: hidden;
   }
   .mentor-avatar-lg img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   .mentor-card-info {
       flex: 1;
       min-width: 0;
   }
   .mentor-card-name {
       font-size: 15px;
       font-weight: 700;
       margin-bottom: 2px;
   }
   .mentor-card-role {
       font-size: 12px;
       color: var(--text-2);
   }
   .mentor-card-bio {
       font-size: 13px;
       color: var(--text-2);
       line-height: 1.65;
       margin-bottom: 12px;
   }
   .mentor-tags {
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
       margin-bottom: 12px;
   }
   .tag {
       padding: 3px 10px;
       border-radius: 999px;
       background: var(--bg-4);
       font-size: 11px;
       font-weight: 500;
       color: var(--text-2);
       border: 1px solid var(--border);
   }
   .tag-brand {
       background: var(--brand-muted);
       color: var(--brand);
       border-color: rgba(245, 158, 11, 0.25);
   }
   .mentor-card-meta {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding-top: 12px;
       border-top: 1px solid var(--border);
   }
   .mentor-rate {
       font-family: var(--font-head);
       font-size: 14px;
       font-weight: 700;
       color: var(--brand);
   }
   .mentor-rating {
       font-size: 12px;
       color: var(--text-2);
   }
   .mentor-card-actions {
       display: flex;
       gap: 8px;
       margin-top: 12px;
   }
   .mentor-card-actions .btn {
       flex: 1;
   }
   
   /* Feature Card */
   .feature-card {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-lg);
       padding: 28px;
       transition: all var(--trans);
   }
   .feature-card:hover {
       border-color: rgba(245, 158, 11, 0.2);
       transform: translateY(-2px);
   }
   .feature-icon {
       width: 48px;
       height: 48px;
       border-radius: var(--radius);
       background: var(--brand-muted);
       border: 1px solid rgba(245, 158, 11, 0.2);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
       margin-bottom: 16px;
   }
   .feature-card h3 {
       font-size: 16px;
       margin-bottom: 8px;
   }
   .feature-card p {
       font-size: 13px;
       color: var(--text-2);
       line-height: 1.7;
   }
   
   /* ── Badges ──────────────────────────────────────────────── */
   .badge {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       padding: 3px 10px;
       border-radius: 999px;
       font-family: var(--font-head);
       font-size: 11px;
       font-weight: 600;
       letter-spacing: 0.03em;
       text-transform: uppercase;
       border: 1px solid transparent;
   }
   .badge-brand {
       background: var(--brand-muted);
       color: var(--brand);
       border-color: rgba(245, 158, 11, 0.25);
   }
   .badge-success {
       background: var(--success-muted);
       color: var(--success);
       border-color: rgba(34, 197, 94, 0.25);
   }
   .badge-error {
       background: var(--error-muted);
       color: var(--error);
       border-color: rgba(239, 68, 68, 0.25);
   }
   .badge-info {
       background: var(--info-muted);
       color: var(--info);
       border-color: rgba(59, 130, 246, 0.25);
   }
   .badge-muted {
       background: var(--bg-4);
       color: var(--text-2);
       border-color: var(--border);
   }
   
   /* ── Forms ───────────────────────────────────────────────── */
   .form-group {
       margin-bottom: 20px;
   }
   .form-label {
       display: block;
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 0.05em;
       text-transform: uppercase;
       color: var(--text-2);
       margin-bottom: 8px;
   }
   .form-input,
   .form-select,
   .form-textarea {
       width: 100%;
       padding: 11px 14px;
       background: var(--input-bg);
       border: 1.5px solid var(--input-border);
       border-radius: var(--radius);
       color: var(--text);
       font-size: 14px;
       font-family: inherit;
       transition:
           border-color var(--trans),
           box-shadow var(--trans);
   }
   .form-input:focus,
   .form-select:focus,
   .form-textarea:focus {
       border-color: var(--brand);
       box-shadow: 0 0 0 3px var(--input-focus);
       outline: none;
   }
   .form-input::placeholder,
   .form-textarea::placeholder {
       color: var(--text-3);
   }
   .form-input.error {
       border-color: var(--error);
   }
   .form-error {
       font-size: 12px;
       color: var(--error);
       margin-top: 4px;
   }
   .form-hint {
       font-size: 12px;
       color: var(--text-3);
       margin-top: 4px;
   }
   .form-textarea {
       resize: vertical;
       min-height: 100px;
   }
   .form-select {
       cursor: pointer;
       appearance: none;
       -webkit-appearance: none;
       -moz-appearance: none;
       accent-color: var(--brand);
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a1a1aa' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 12px center;
       background-size: 16px;
       padding-right: 40px;
   }
   .form-select option {
       background: var(--bg-2);
       color: var(--text);
   }
   [data-theme="light"] .form-select {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2371717a' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
   }
   .input-prefix {
       display: flex;
       align-items: center;
       background: var(--input-bg);
       border: 1.5px solid var(--input-border);
       border-radius: var(--radius);
       overflow: hidden;
   }
   .input-prefix-label {
       padding: 11px 14px;
       background: var(--bg-4);
       border-right: 1.5px solid var(--input-border);
       font-size: 13px;
       color: var(--text-2);
       white-space: nowrap;
       flex-shrink: 0;
   }
   .input-prefix .form-input {
       border: none;
       box-shadow: none;
       background: transparent;
   }
   .input-prefix .form-input:focus {
       box-shadow: none;
   }
   .input-prefix:focus-within {
       border-color: var(--brand);
       box-shadow: 0 0 0 3px var(--input-focus);
   }
   
   /* OTP inputs */
   .otp-grid {
       display: grid;
       grid-template-columns: repeat(6, 1fr);
       gap: 8px;
   }
   .otp-input {
       aspect-ratio: 1;
       text-align: center;
       background: var(--input-bg);
       border: 2px solid var(--input-border);
       border-radius: var(--radius);
       font-size: 22px;
       font-weight: 700;
       font-family: var(--font-head);
       color: var(--text);
       transition: all var(--trans);
       width:50px;
   }
   .otp-input:focus {
       border-color: var(--brand);
       box-shadow: 0 0 0 3px var(--input-focus);
       outline: none;
   }
   .otp-input.filled {
       border-color: var(--brand);
       background: var(--brand-muted);
   }
   
   /* Role Cards */
   .role-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 12px;
       margin-bottom: 24px;
   }
   .role-card {
       border: 2px solid var(--border);
       border-radius: var(--radius-lg);
       padding: 20px;
       text-align: center;
       cursor: pointer;
       transition: all var(--trans);
       background: var(--bg-3);
   }
   .role-card:hover {
       border-color: var(--border-2);
   }
   .role-card.selected {
       border-color: var(--brand);
       background: var(--brand-muted);
   }
   .role-card .role-icon {
       font-size: 40px;
       margin-bottom: 10px;
   }
   .role-card h4 {
       font-size: 15px;
       font-weight: 700;
       margin-bottom: 4px;
   }
   .role-card p {
       font-size: 12px;
       color: var(--text-2);
   }
   
   /* ── Modals ──────────────────────────────────────────────── */
   .modal-overlay {
       position: fixed;
       inset: 0;
       z-index: 2000;
       background: var(--overlay);
       backdrop-filter: blur(4px);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 20px;
       opacity: 0;
       pointer-events: none;
       transition: opacity var(--trans);
   }
   .modal-overlay.open {
       opacity: 1;
       pointer-events: all;
   }
   .modal {
       background: var(--card-bg);
       border: 1px solid var(--border);
       border-radius: var(--radius-xl);
       width: 100%;
       max-width: 500px;
       max-height: 90vh;
       overflow-y: auto;
       transform: scale(0.95) translateY(10px);
       transition: transform var(--trans);
   }
   .modal-overlay.open .modal {
       transform: scale(1) translateY(0);
   }
   .modal-lg {
       max-width: 760px;
   }
   .modal-xl {
       max-width: 1000px;
   }
   .modal-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 20px 24px;
       border-bottom: 1px solid var(--border);
       position: sticky;
       top: 0;
       background: var(--card-bg);
       z-index: 1;
   }
   .modal-title {
       font-size: 17px;
       font-weight: 700;
   }
   .modal-close {
       width: 32px;
       height: 32px;
       border-radius: var(--radius-sm);
       background: var(--bg-4);
       color: var(--text-2);
       font-size: 18px;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all var(--trans);
   }
   .modal-close:hover {
       background: var(--error-muted);
       color: var(--error);
   }
   .modal-body {
       padding: 24px;
   }
   .modal-footer {
       padding: 16px 24px;
       border-top: 1px solid var(--border);
       display: flex;
       gap: 10px;
       justify-content: flex-end;
   }
   
   /* ── Toast ───────────────────────────────────────────────── */
   .toast-container {
       position: fixed;
       top: 80px;
       right: 20px;
       z-index: 3000;
       display: flex;
       flex-direction: column;
       gap: 10px;
       pointer-events: none;
   }
   .toast {
       pointer-events: all;
       display: flex;
       align-items: flex-start;
       gap: 12px;
       padding: 14px 18px;
       border-radius: var(--radius-lg);
       min-width: 280px;
       max-width: 380px;
       background: var(--card-bg);
       border: 1px solid var(--border);
       box-shadow: var(--shadow-lg);
       animation: toastIn 0.3s ease;
   }
   .toast-icon {
       font-size: 18px;
       flex-shrink: 0;
       margin-top: 1px;
   }
   .toast-content {
       flex: 1;
   }
   .toast-title {
       font-size: 13px;
       font-weight: 700;
       margin-bottom: 2px;
   }
   .toast-msg {
       font-size: 12px;
       color: var(--text-2);
   }
   .toast-close {
       font-size: 16px;
       color: var(--text-3);
       cursor: pointer;
       margin-top: 1px;
       flex-shrink: 0;
   }
   .toast-close:hover {
       color: var(--text);
   }
   .toast.success {
       border-left: 3px solid var(--success);
   }
   .toast.error {
       border-left: 3px solid var(--error);
   }
   .toast.info {
       border-left: 3px solid var(--info);
   }
   .toast.warning {
       border-left: 3px solid var(--warning);
   }
   @keyframes toastIn {
       from {
           opacity: 0;
           transform: translateX(100%);
       }
       to {
           opacity: 1;
           transform: translateX(0);
       }
   }
   @keyframes toastOut {
       from {
           opacity: 1;
           transform: translateX(0);
       }
       to {
           opacity: 0;
           transform: translateX(100%);
       }
   }
   .toast.removing {
       animation: toastOut 0.3s ease forwards;
   }
   
   /* ── Loader ──────────────────────────────────────────────── */
   .loader-overlay {
       position: fixed;
       inset: 0;
       z-index: 5000;
       background: var(--overlay);
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       pointer-events: none;
       transition: opacity var(--trans);
   }
   .loader-overlay.show {
       opacity: 1;
       pointer-events: all;
   }
   .spinner {
       width: 48px;
       height: 48px;
       border: 3px solid var(--border);
       border-top-color: var(--brand);
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
   }
   .spinner-sm {
       width: 20px;
       height: 20px;
       border-width: 2px;
   }
   .spinner-inline {
       display: inline-flex;
       vertical-align: middle;
   }
   @keyframes spin {
       to {
           transform: rotate(360deg);
       }
   }
   .btn-loading .btn-text {
       opacity: 0.6;
   }
   .btn-loading .btn-spinner {
       display: inline-flex !important;
   }
   
   /* ── Sidebar (Dashboard) ─────────────────────────────────── */
   .dash-layout {
       display: block;
       min-height: 100vh;
       padding-top: var(--nav-h);
   }
   .sidebar {
       position: fixed;
       top: var(--nav-h);
       left: 0;
       bottom: 0;
       width: 240px;
       background: var(--bg-2);
       border-right: 1px solid var(--border);
       overflow-y: auto;
       padding: 16px 12px;
       display: flex;
       flex-direction: column;
       gap: 4px;
       z-index: 20;
   }
   .sidebar-section-label {
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--text-3);
       padding: 12px 8px 4px;
   }
   .sidebar-item {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 9px 12px;
       border-radius: var(--radius);
       font-size: 13px;
       font-weight: 500;
       color: var(--text-2);
       cursor: pointer;
       text-decoration: none;
       transition: all var(--trans);
   }
   .sidebar-item:hover {
       background: var(--bg-4);
       color: var(--text);
   }
   .sidebar-item.active {
       background: var(--brand-muted);
       color: var(--brand);
       font-weight: 600;
   }
   .sidebar-item .si-icon {
       font-size: 16px;
       flex-shrink: 0;
   }
   .sidebar-item .si-badge {
       margin-left: auto;
       min-width: 20px;
       height: 20px;
       border-radius: 10px;
       background: var(--brand);
       color: #000;
       font-size: 10px;
       font-weight: 700;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 0 6px;
   }
   .dash-content {
       margin-left: 240px;
       padding: 32px;
       width: calc(100% - 240px);
       max-width: 100%;
       box-sizing: border-box;
       min-width: 0;
   }
   .dash-header {
       margin-bottom: 28px;
   }
   @media (max-width: 768px) {
       .dash-header {
           margin-bottom: 16px;
       }
   }
   .dash-title {
       font-size: 24px;
       font-weight: 800;
       margin-bottom: 4px;
   }
   .dash-subtitle {
       font-size: 14px;
       color: var(--text-2);
   }

   /* App-style bottom tabs — mobile only (mentor + mentee) */
   .app-bottom-nav,
   .mentor-bottom-nav {
       display: none;
   }
   
   /* ── Stats Cards ─────────────────────────────────────────── */
   .stats-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 16px;
       margin-bottom: 24px;
   }
   .stat-card {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-lg);
       padding: 20px;
       display: flex;
       flex-direction: column;
       gap: 4px;
   }
   .stat-card-label {
       font-size: 12px;
       color: var(--text-2);
       font-weight: 500;
   }
   .stat-card-value {
       font-family: var(--font-head);
       font-size: 28px;
       font-weight: 800;
   }
   .stat-card-delta {
       font-size: 12px;
       color: var(--success);
   }
   .stat-card-delta.down {
       color: var(--error);
   }
   .stat-card-icon {
       font-size: 28px;
       margin-bottom: 8px;
   }
   
   /* ── Table ───────────────────────────────────────────────── */
   .table-wrap {
       overflow-x: auto;
       border-radius: var(--radius-lg);
       border: 1px solid var(--border);
   }
   table {
       width: 100%;
       border-collapse: collapse;
       background: var(--card-bg);
   }
   thead {
       background: var(--bg-3);
   }
   th {
       padding: 12px 16px;
       text-align: left;
       font-size: 11px;
       font-weight: 700;
       color: var(--text-2);
       letter-spacing: 0.06em;
       text-transform: uppercase;
       border-bottom: 1px solid var(--border);
       white-space: nowrap;
   }
   td {
       padding: 14px 16px;
       font-size: 13px;
       border-bottom: 1px solid var(--border);
       vertical-align: middle;
   }
   tr:last-child td {
       border-bottom: none;
   }
   tbody tr:hover {
       background: var(--bg-3);
   }
   
   /* ── Pagination ──────────────────────────────────────────── */
   .pagination {
       display: flex;
       align-items: center;
       gap: 4px;
       flex-wrap: wrap;
   }
   .page-btn {
       min-width: 36px;
       height: 36px;
       border-radius: var(--radius-sm);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 13px;
       font-weight: 500;
       cursor: pointer;
       background: var(--bg-3);
       border: 1px solid var(--border);
       color: var(--text-2);
       text-decoration: none;
       transition: all var(--trans);
   }
   .page-btn:hover {
       border-color: var(--brand);
       color: var(--brand);
   }
   .page-btn.active {
       background: var(--brand);
       border-color: var(--brand);
       color: #000;
       font-weight: 700;
   }
   .page-btn.disabled {
       opacity: 0.4;
       cursor: default;
       pointer-events: none;
   }

   .dash-pagination,
   .blog-pagination {
       margin-top: 28px;
       display: flex;
       justify-content: center;
   }

   .insights-search-bar {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 10px;
       margin-bottom: 20px;
       background: transparent;
       border: none;
       padding: 0;
   }

   .insights-search-bar--toolbar {
       flex: 0 1 320px;
       min-width: 220px;
       margin-bottom: 0;
       margin-left: auto;
       justify-content: flex-end;
   }

   .insights-search-bar__field {
       position: relative;
       flex: 1;
       min-width: 220px;
       max-width: 420px;
   }

   .insights-search-bar--toolbar .insights-search-bar__field {
       max-width: none;
       width: 100%;
   }

   .insights-search-bar__field .form-input {
       width: 100%;
       padding-left: 38px;
       padding-right: 34px;
   }

   .insights-search-bar__field .session-search-icon {
       position: absolute;
       left: 12px;
       top: 50%;
       transform: translateY(-50%);
       font-size: 14px;
       opacity: 0.55;
       pointer-events: none;
   }

   .insights-search-bar__clear {
       position: absolute;
       right: 10px;
       top: 50%;
       transform: translateY(-50%);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 22px;
       height: 22px;
       border-radius: 999px;
       color: var(--text-3);
       font-size: 18px;
       line-height: 1;
       text-decoration: none;
       transition: color 0.15s ease, background 0.15s ease;
   }

   .insights-search-bar__clear:hover {
       color: var(--text);
       background: var(--bg-4);
   }

   .insights-toolbar {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-between;
       gap: 12px 16px;
       margin-bottom: 20px;
   }

   .insights-toolbar--search-only {
       justify-content: flex-end;
   }

   .insights-toolbar__filters {
       flex: 1 1 auto;
       min-width: 0;
   }

   .insights-page .session-filter-bar {
       background: transparent;
       border: none;
       padding: 0;
   }

   .insights-page .session-filter-tabs {
       background: transparent;
       border: none;
       border-radius: 0;
       padding: 0;
   }
   
   /* ── Filters ─────────────────────────────────────────────── */
   .filter-sidebar {
       background: var(--card-bg);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       padding: 20px;
       position: sticky;
       top: calc(var(--nav-h) + 20px);
   }
   .search-layout {
       display: grid;
       grid-template-columns: 260px 1fr;
       gap: 28px;
       align-items: start;
   }
   .search-filter-toggle {
       display: none;
       align-items: center;
       justify-content: center;
       gap: 8px;
       width: 100%;
       margin-bottom: 16px;
       padding: 10px 14px;
       border-radius: var(--radius);
       border: 1px solid var(--border);
       background: var(--bg-3);
       color: var(--text);
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
   }
   .filter-section {
       margin-bottom: 20px;
       padding-bottom: 20px;
       border-bottom: 1px solid var(--border);
   }
   .filter-section:last-child {
       margin-bottom: 0;
       padding-bottom: 0;
       border-bottom: none;
   }
   .filter-section-title {
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       color: var(--text-2);
       margin-bottom: 12px;
   }
   .filter-option {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 7px 0;
       cursor: pointer;
       font-size: 13px;
       color: var(--text-2);
       transition: color var(--trans);
   }
   .filter-option:hover {
       color: var(--brand);
   }
   .filter-option input[type="checkbox"] {
       accent-color: var(--brand);
       width: 15px;
       height: 15px;
       cursor: pointer;
   }
   .filter-option input[type="radio"] {
       accent-color: var(--brand);
       width: 15px;
       height: 15px;
       cursor: pointer;
   }
   .price-range {
       margin-top: 8px;
   }
   .price-range input[type="range"] {
       width: 100%;
       accent-color: var(--brand);
       cursor: pointer;
   }
   
   /* ── Steps (Onboarding) ──────────────────────────────────── */
   .steps-bar {
       display: flex;
       align-items: center;
       gap: 0;
       margin-bottom: 36px;
   }
   .step-item {
       display: flex;
       align-items: center;
       flex: 1;
   }
   .step-circle {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 13px;
       font-weight: 700;
       font-family: var(--font-head);
       border: 2px solid var(--border);
       background: var(--bg-3);
       color: var(--text-2);
       transition: all var(--trans);
   }
   .step-item.done .step-circle {
       background: var(--success);
       border-color: var(--success);
       color: #fff;
   }
   .step-item.active .step-circle {
       background: var(--brand);
       border-color: var(--brand);
       color: #000;
   }
   .step-line {
       flex: 1;
       height: 2px;
       background: var(--border);
       margin: 0 8px;
   }
   .step-item.done .step-line {
       background: var(--success);
   }
   .step-label {
       font-size: 11px;
       color: var(--text-3);
       margin-top: 4px;
   }
   
   /* ── Calendar / Availability ─────────────────────────────── */
   .calendar-grid {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
       gap: 6px;
   }
   .calendar-grid--month {
       gap: 4px;
   }
   .cal-weekday {
       text-align: center;
       font-size: 11px;
       font-weight: 600;
       color: var(--text-3);
       padding: 4px 0 8px;
   }
   .cal-day {
       aspect-ratio: 1;
       border-radius: 999px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       font-size: 13px;
       cursor: pointer;
       border: 1px solid transparent;
       background: transparent;
       transition: all var(--trans);
       color: inherit;
       font-family: inherit;
       padding: 0;
       appearance: none;
       -webkit-appearance: none;
       position: relative;
   }
   .cal-day.is-empty {
       pointer-events: none;
       border: 0;
       background: transparent;
   }
   .cal-day:hover:not(.disabled):not(.is-empty) {
       background: rgba(245, 158, 11, 0.12);
       color: var(--brand);
   }
   .cal-day.selected,
   .cal-day.selected:hover {
       background: var(--brand);
       color: #000;
       border-color: var(--brand);
       font-weight: 700;
   }
   .cal-day.disabled {
       opacity: 0.35;
       cursor: not-allowed;
       pointer-events: none;
   }
   .cal-day.unavailable {
       text-decoration: none;
       opacity: 0.4;
   }
   .cal-day.has-slots {
       font-weight: 650;
   }
   .cal-day.today:not(.selected) {
       background: rgba(245, 158, 11, 0.14);
       color: var(--brand);
   }
   .cal-day.today.selected {
       background: var(--brand);
       color: #000;
       border-color: var(--brand);
   }
   .cal-day-label {
       font-size: 9px;
       opacity: 0.7;
       line-height: 1.1;
   }
   .cal-day-num {
       font-size: 14px;
       font-weight: 700;
       line-height: 1.1;
       color: inherit;
   }
   .cal-dot {
       position: absolute;
       bottom: 4px;
       width: 5px;
       height: 5px;
       border-radius: 50%;
       background: #22c55e;
   }
   .cal-day.selected .cal-dot {
       background: #000;
   }
   .booking-cal-head {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
       margin-bottom: 10px;
       flex-wrap: wrap;
   }
   .booking-cal-head__label {
       margin: 0;
   }
   .booking-cal-nav {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
   }
   .booking-flow {
       display: flex;
       flex-direction: column;
       gap: 14px;
       min-width: 0;
   }
   .booking-card {
       border: 1px solid var(--border);
       border-radius: 14px;
       padding: 14px;
       background: var(--bg-2);
       min-width: 0;
   }
   .booking-card__label {
       margin: 0 0 12px;
   }
   .avail-day-row {
       display: grid;
       grid-template-columns: repeat(7, minmax(0, 1fr));
       gap: 6px;
       width: 100%;
   }
   .avail-day-circle {
       width: 100%;
       max-width: 42px;
       aspect-ratio: 1;
       height: auto;
       margin: 0 auto;
       border-radius: 50%;
       border: 1.5px solid var(--border);
       display: grid;
       place-items: center;
       position: relative;
       font-size: 12px;
       font-weight: 700;
       color: var(--text-3);
   }
   .avail-day-circle.is-on {
       border-color: #22c55e;
       color: #16a34a;
   }
   .avail-day-circle.is-off {
       opacity: 0.55;
   }
   .avail-day-dot {
       position: absolute;
       bottom: -2px;
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: #22c55e;
   }
   .avail-chip-row {
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
       margin-bottom: 8px;
   }
   .avail-chip {
       display: inline-flex;
       flex-direction: column;
       gap: 2px;
       min-width: 52px;
       padding: 6px 8px;
       border-radius: 10px;
       border: 1px solid var(--border);
       background: var(--bg-3);
       font-size: 11px;
       line-height: 1.2;
   }
   .avail-chip strong { font-size: 11px; }
   .avail-chip small { font-size: 9px; color: var(--text-3); }
   .avail-chip.is-on {
       border-color: rgba(34, 197, 94, 0.35);
       background: rgba(34, 197, 94, 0.1);
   }
   .avail-chip.is-on strong { color: #16a34a; }
   .avail-chip.is-off {
       opacity: 0.55;
       border-style: dashed;
   }
   .avail-hint {
       font-size: 11px;
       color: var(--text-3);
       margin: 0 0 12px;
       line-height: 1.4;
   }
   .cal-day.selected .cal-day-label {
       color: rgba(0, 0, 0, 0.75);
   }
   .cal-day.selected .cal-day-num {
       color: #000;
   }
   
   .time-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
       gap: 8px;
       margin-top: 0;
   }
   .time-slot {
       padding: 10px 10px;
       border-radius: 10px;
       text-align: center;
       font-size: 12px;
       font-weight: 600;
       cursor: pointer;
       border: 1px solid var(--border);
       background: var(--bg);
       color: var(--text-1);
       transition: all var(--trans);
       font-family: inherit;
       appearance: none;
       -webkit-appearance: none;
       width: 100%;
       line-height: 1.35;
       white-space: nowrap;
   }
   .time-slot:hover {
       border-color: var(--brand);
       color: var(--brand);
   }
   .time-slot.selected {
       background: var(--brand);
       color: #000;
       border-color: var(--brand);
       font-weight: 700;
   }
   .time-slot.booked {
       opacity: 0.4;
       cursor: default;
       pointer-events: none;
       text-decoration: line-through;
   }
   
   /* Duration selector */
   .duration-btns {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
   }
   .duration-btn {
       flex: 1;
       min-width: 64px;
       text-align: center;
       padding: 8px 10px;
       border-radius: var(--radius-btn);
       font-size: 13px;
       font-weight: 500;
       cursor: pointer;
       border: 1.5px solid var(--border);
       background: var(--bg-3);
       color: var(--text-2);
       transition: all var(--trans);
   }
   .duration-btn:hover {
       border-color: var(--brand);
       color: var(--brand);
   }
   .duration-btn.selected {
       background: var(--brand-muted);
       color: var(--brand);
       border-color: var(--brand);
       font-weight: 700;
   }
   
   /* Booking Summary */
   .booking-summary {
       background: var(--bg-3);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       padding: 20px;
   }
   .booking-summary-row {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 12px;
       padding: 8px 0;
       border-bottom: 1px solid var(--border);
       font-size: 13px;
       min-width: 0;
   }
   .booking-summary-row:last-child {
       border-bottom: none;
       font-weight: 700;
       font-size: 15px;
   }
   .booking-summary-row span:first-child {
       color: var(--text-2);
       flex-shrink: 0;
   }
   .booking-summary-row strong {
       text-align: right;
       word-break: break-word;
       overflow-wrap: anywhere;
       max-width: 58%;
   }
   .booking-summary-row--discount strong {
       color: var(--success);
   }
   .booking-summary-row--discount[hidden] {
       display: none !important;
   }
   .booking-summary-row--total strong {
       color: var(--brand);
       font-size: 18px;
   }
   .booking-slot-placeholder {
       grid-column: 1 / -1;
       text-align: center;
       padding: 12px;
   }
   .booking-empty-state {
       grid-column: 1 / -1;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 8px;
       padding: 20px 16px;
       border: 1px dashed var(--border);
       border-radius: 12px;
       background: var(--bg-2);
       text-align: center;
   }
   .booking-empty-state--compact {
       padding: 14px 12px;
   }
   .booking-empty-state__icon {
       font-size: 28px;
       line-height: 1;
   }
   .booking-empty-state__text {
       margin: 0;
       font-size: 13px;
       line-height: 1.55;
       color: var(--text-2);
       max-width: 320px;
   }

   /* Booking modal */
   .booking-modal {
       max-width: 900px;
   }
   .booking-modal__body {
       min-width: 0;
   }
   .booking-modal__layout {
       display: grid;
       grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
       gap: 24px;
       min-width: 0;
   }
   .booking-modal__summary {
       min-width: 0;
   }
   .booking-modal__footer {
       margin-top: 24px;
       padding-top: 20px;
       border-top: 1px solid var(--border);
       display: flex;
       gap: 12px;
       justify-content: flex-end;
       flex-wrap: wrap;
   }

   /* Coupon picker (booking) */
   .coupon-picker {
       min-width: 0;
   }
   .coupon-apply {
       display: flex;
       gap: 8px;
       align-items: stretch;
   }
   .coupon-apply__input {
       flex: 1;
       min-width: 0;
       text-transform: uppercase;
       letter-spacing: 0.04em;
   }
   .coupon-apply__btn {
       flex-shrink: 0;
       white-space: nowrap;
   }
   .coupon-applied {
       display: flex;
       align-items: center;
       gap: 8px;
       margin-top: 10px;
       padding: 10px 12px;
       border-radius: var(--radius);
       background: var(--success-muted);
       border: 1px solid rgba(34, 197, 94, 0.25);
       flex-wrap: wrap;
   }
   .coupon-applied[hidden] {
       display: none !important;
   }
   .coupon-applied__badge {
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       color: var(--success);
       background: rgba(34, 197, 94, 0.15);
       padding: 3px 7px;
       border-radius: 999px;
   }
   .coupon-applied__text {
       flex: 1;
       min-width: 0;
       font-size: 13px;
       color: var(--text);
       font-weight: 500;
   }
   .coupon-applied__remove {
       appearance: none;
       border: 0;
       background: transparent;
       color: var(--text-2);
       font-size: 12px;
       font-weight: 600;
       cursor: pointer;
       padding: 2px 4px;
       text-decoration: underline;
       text-underline-offset: 2px;
   }
   .coupon-applied__remove:hover {
       color: var(--error);
   }
   .coupon-picker__hint {
       margin-top: 8px;
   }
   .coupon-picker__hint[hidden] {
       display: none !important;
   }
   .coupon-picker__hint.is-error {
       color: var(--error);
   }
   .coupon-list-label {
       margin: 14px 0 8px;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       color: var(--text-3);
   }
   .coupon-list {
       display: grid;
       gap: 8px;
   }
   .coupon-card {
       display: flex;
       align-items: center;
       gap: 12px;
       width: 100%;
       text-align: left;
       padding: 12px 14px;
       border-radius: var(--radius);
       border: 1px solid var(--border-2);
       background: var(--bg-2);
       color: var(--text);
       cursor: pointer;
       transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
   }
   .coupon-card:hover {
       border-color: var(--brand);
       background: var(--brand-muted);
   }
   .coupon-card.is-selected {
       border-color: var(--brand);
       background: var(--brand-muted);
       box-shadow: inset 0 0 0 1px var(--brand);
   }
   .coupon-card__body {
       flex: 1;
       min-width: 0;
       display: flex;
       flex-direction: column;
       gap: 2px;
   }
   .coupon-card__title {
       font-size: 14px;
       font-weight: 600;
       line-height: 1.3;
   }
   .coupon-card__meta {
       font-size: 12px;
       color: var(--text-3);
       line-height: 1.35;
   }
   .coupon-card__meta strong {
       color: var(--text-2);
       font-weight: 600;
       letter-spacing: 0.03em;
   }
   .coupon-card__off {
       flex-shrink: 0;
       font-size: 13px;
       font-weight: 700;
       color: var(--brand-dark);
       white-space: nowrap;
   }
   [data-theme="dark"] .coupon-card__off {
       color: var(--brand-light);
   }
   .modal-title {
       overflow-wrap: anywhere;
       word-break: break-word;
       padding-right: 8px;
   }

   /* Session detail page */
   .session-detail-breadcrumb {
       display: flex;
       align-items: center;
       gap: 8px;
       margin-bottom: 20px;
       font-size: 13px;
       color: var(--text-2);
       flex-wrap: wrap;
   }
   .session-detail-layout {
       display: grid;
       grid-template-columns: minmax(0, 1fr) 300px;
       gap: 24px;
       align-items: start;
   }
   .session-detail-main,
   .session-detail-sidebar {
       min-width: 0;
   }
   .session-detail-sidebar {
       display: flex;
       flex-direction: column;
       gap: 20px;
   }
   .session-detail-card {
       margin-bottom: 20px;
   }
   .session-detail-header-top {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       flex-wrap: wrap;
       gap: 16px;
   }
   .session-detail-header-main {
       flex: 1;
       min-width: min(100%, 220px);
   }
   .session-detail-title-row {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 6px;
       flex-wrap: wrap;
   }
   .session-detail-title {
       font-size: 18px;
       font-weight: 800;
       line-height: 1.3;
       margin: 0;
       word-break: break-word;
   }
   .session-detail-meta {
       display: flex;
       flex-wrap: wrap;
       gap: 8px 16px;
       font-size: 13px;
       color: var(--text-2);
   }
   .session-detail-meta span {
       white-space: nowrap;
   }
   .session-detail-actions {
       display: flex;
       gap: 8px;
       flex-shrink: 0;
       flex-wrap: wrap;
       align-items: center;
   }
   .session-detail-actions .btn {
       white-space: nowrap;
   }
   .session-detail-card-head {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 10px;
       margin-bottom: 16px;
       flex-wrap: wrap;
   }
   .session-detail-card-head h3 {
       font-size: 14px;
       font-weight: 700;
       margin: 0;
   }
   .session-detail-card-hint {
       font-size: 11px;
       color: var(--text-3);
       line-height: 1.4;
   }
   .session-detail-person {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 14px;
   }
   .session-detail-person__avatar {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       background: var(--brand-muted);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       font-weight: 800;
       color: var(--brand);
       flex-shrink: 0;
       overflow: hidden;
   }
   .session-detail-person__avatar img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 50%;
   }
   .session-detail-person__name {
       font-size: 14px;
       font-weight: 700;
       word-break: break-word;
   }
   .session-detail-person__email {
       font-size: 12px;
       color: var(--text-2);
       word-break: break-word;
   }
   .session-detail-person__info {
       min-width: 0;
       flex: 1;
   }
   .session-detail-person__stats {
       font-size: 12px;
       color: var(--text-2);
       display: flex;
       flex-direction: column;
       gap: 6px;
   }
   .session-detail-person__actions {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 8px;
       margin-top: 14px;
   }
   .session-detail-person__actions .btn {
       width: 100%;
       justify-content: center;
       white-space: nowrap;
   }
   
   /* ── Section Headings ────────────────────────────────────── */
   .section-head {
       text-align: center;
       margin-bottom: 48px;
   }
   .section-head h2 {
       font-size: clamp(24px, 3.5vw, 38px);
       font-weight: 800;
       margin-bottom: 12px;
   }
   .section-head p {
       font-size: 16px;
       color: var(--text-2);
       max-width: 560px;
       margin: 0 auto;
       line-height: 1.7;
   }
   
   /* ── Testimonials ────────────────────────────────────────── */
   .testimonial-card {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-lg);
       padding: 24px;
   }
   .stars {
       color: var(--brand);
       font-size: 14px;
       letter-spacing: 2px;
       margin-bottom: 12px;
   }
   .testimonial-text {
       font-size: 14px;
       color: var(--text-2);
       line-height: 1.75;
       margin-bottom: 16px;
       font-style: italic;
   }
   .testimonial-author {
       display: flex;
       gap: 12px;
       align-items: center;
   }
   .author-avatar {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: var(--brand);
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       color: #000;
       font-size: 14px;
       flex-shrink: 0;
   }
   .author-name {
       font-size: 13px;
       font-weight: 700;
   }
   .author-role {
       font-size: 11px;
       color: var(--text-3);
   }
   
   /* ── Footer ──────────────────────────────────────────────── */
   .footer {
       background: var(--bg-2);
       border-top: 1px solid var(--border);
       padding: 60px 0 32px;
       width: 100%;
       box-sizing: border-box;
       overflow: hidden;
   }
   /* Dashboard pages: keep footer clear of the fixed left sidebar */
   body:has(.dash-layout) .footer {
       margin-left: 240px;
       width: calc(100% - 240px);
       max-width: calc(100% - 240px);
   }
   .footer-grid {
       display: grid;
       grid-template-columns: minmax(0, 280px) 1fr 1fr 1fr;
       gap: 48px;
       margin-bottom: 48px;
   }
   .footer-brand {
       min-width: 0;
   }
   .footer-brand img {
       height: 52px;
       width: auto;
       max-width: 220px;
       object-fit: contain;
       margin-bottom: 16px;
       display: block;
   }
   .footer-brand .logo-for-light {
       display: none !important;
   }
   .footer-brand .logo-for-dark {
       display: block !important;
   }
   html[data-theme="light"] .footer-brand .logo-for-light {
       display: block !important;
   }
   html[data-theme="light"] .footer-brand .logo-for-dark {
       display: none !important;
   }
   .footer-brand p {
       font-size: 13px;
       color: var(--text-2);
       line-height: 1.75;
       margin-bottom: 16px;
   }
   .footer-social {
       display: flex;
       gap: 10px;
       flex-wrap: wrap;
   }
   .social-btn {
       width: 34px;
       height: 34px;
       border-radius: var(--radius-sm);
       background: var(--bg-4);
       border: 1px solid var(--border);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
       color: var(--text-2);
       cursor: pointer;
       transition: all var(--trans);
       flex-shrink: 0;
   }
   .social-btn:hover {
       background: var(--brand-muted);
       color: var(--brand);
       border-color: rgba(245, 158, 11, 0.3);
   }
   .footer-col h4 {
       font-size: 13px;
       font-weight: 700;
       margin-bottom: 14px;
   }
   .footer-col ul {
       list-style: none;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }
   .footer-col a {
       font-size: 13px;
       color: var(--text-2);
       transition: color var(--trans);
   }
   .footer-col a:hover {
       color: var(--brand);
   }
   .footer-bottom {
       padding-top: 24px;
       border-top: 1px solid var(--border);
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
       gap: 12px;
   }
   .footer-bottom p {
       font-size: 12px;
       color: var(--text-3);
   }
   
   /* ── Auth Pages ──────────────────────────────────────────── */
   .auth-wrap {
       min-height: 100vh;
       display: grid;
       grid-template-columns: 1fr 1fr;
       padding-top: var(--nav-h);
   }
   .auth-left {
       background: var(--bg-2);
       display: flex;
       flex-direction: column;
       justify-content: center;
       padding: 60px;
       border-right: 1px solid var(--border);
       position: relative;
       overflow: hidden;
   }
   .auth-left-glow {
       position: absolute;
       inset: 0;
       background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(245, 158, 11, 0.07) 0%, transparent 70%);
       pointer-events: none;
   }
   .auth-left-inner {
       position: relative;
   }
   .auth-logo {
       height: 48px;
       width: auto;
       max-width: 180px;
       object-fit: contain;
       margin-bottom: 36px;
   }
   .auth-heading {
       font-size: 32px;
       font-weight: 800;
       line-height: 1.15;
       margin-bottom: 16px;
   }
   .auth-lead {
       font-size: 15px;
       color: var(--text-2);
       line-height: 1.75;
       margin-bottom: 36px;
   }
   .auth-features {
       display: flex;
       flex-direction: column;
       gap: 14px;
   }
   .auth-feature-item {
       display: flex;
       gap: 12px;
       align-items: flex-start;
   }
   .auth-feature-icon {
       font-size: 18px;
       width: 28px;
       flex-shrink: 0;
       line-height: 1.4;
   }
   .auth-feature-text {
       font-size: 14px;
       color: var(--text-2);
       line-height: 1.5;
   }
   .auth-right {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 40px;
       background: var(--bg);
   }
   .auth-box {
       width: 100%;
       max-width: 420px;
   }
   .auth-mobile-logo {
       display: none;
       text-align: center;
       margin-bottom: 28px;
   }
   .auth-mobile-logo img {
       height: 44px;
       width: auto;
       max-width: 180px;
       object-fit: contain;
       margin: 0 auto;
   }
   .auth-title {
       font-size: 26px;
       font-weight: 800;
       margin-bottom: 6px;
   }
   .auth-subtitle {
       font-size: 14px;
       color: var(--text-2);
       margin-bottom: 28px;
   }
   
   /* Login tabs */
   .tab-bar {
       display: flex;
       background: var(--bg-3);
       border-radius: var(--radius);
       padding: 4px;
       margin-bottom: 24px;
   }
   .tab-btn {
       flex: 1;
       padding: 8px 12px;
       border-radius: var(--radius-sm);
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       border: none;
       background: transparent;
       color: var(--text-2);
       transition: all var(--trans);
       font-family: var(--font-head);
   }
   .tab-btn.active {
       background: var(--brand);
       color: #000;
   }
   .tab-content {
       display: none;
   }
   .tab-content.active {
       display: block;
       animation: fadeIn 0.2s ease;
   }
   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(4px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* ── Section separators ──────────────────────────────────── */
   .divider {
       height: 1px;
       background: var(--border);
       margin: 24px 0;
   }
   .divider-text {
       position: relative;
       text-align: center;
       margin: 20px 0;
   }
   .divider-text::before {
       content: "";
       position: absolute;
       top: 50%;
       left: 0;
       right: 0;
       height: 1px;
       background: var(--border);
   }
   .divider-text span {
       position: relative;
       background: var(--card-bg);
       padding: 0 14px;
       font-size: 12px;
       color: var(--text-3);
   }
   
   /* ── Profile ─────────────────────────────────────────────── */
   .profile-hero {
       background: var(--bg-2);
       border-bottom: 1px solid var(--border);
       padding: 40px 0 0;
   }
   .profile-hero-inner {
       display: flex;
       gap: 28px;
       align-items: flex-end;
       padding-bottom: 0;
   }
   .profile-avatar-xl {
       width: 96px;
       height: 96px;
       border-radius: 20px;
       flex-shrink: 0;
       background: linear-gradient(135deg, var(--brand), var(--brand-dark));
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 36px;
       font-weight: 800;
       color: #000;
       font-family: var(--font-head);
       border: 3px solid var(--border);
       overflow: hidden;
   }
   .profile-avatar-xl img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   .profile-hero-info h1 {
       font-size: 24px;
       margin-bottom: 4px;
   }
   .profile-hero-tabs {
       display: flex;
       gap: 0;
       margin-top: 24px;
       border-bottom: none;
   }
   .profile-tab {
       padding: 12px 20px;
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       border-bottom: 2px solid transparent;
       color: var(--text-2);
       transition: all var(--trans);
   }
   .profile-tab:hover {
       color: var(--text);
   }
   .profile-tab.active {
       color: var(--brand);
       border-bottom-color: var(--brand);
   }
   
   /* ── Sessions ────────────────────────────────────────────── */
   .session-card {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-lg);
       padding: 20px;
       display: flex;
       gap: 16px;
       align-items: flex-start;
       margin-bottom: 12px;
   }
   .session-card-icon {
       width: 44px;
       height: 44px;
       border-radius: var(--radius);
       background: var(--brand-muted);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       flex-shrink: 0;
   }
   .session-status {
       padding: 2px 8px;
       border-radius: 999px;
       font-size: 11px;
       font-weight: 600;
   }
   .session-status.pending,
   .session-status.upcoming {
       background: var(--warning-muted);
       color: var(--warning);
   }
   .session-status.confirmed {
       background: var(--info-muted);
       color: var(--info);
   }
   .session-status.ongoing {
       background: var(--success-muted);
       color: var(--success);
   }
   .session-status.completed {
       background: var(--success-muted, rgba(34, 197, 94, 0.15));
       color: var(--success);
   }
   .session-status.cancelled {
       background: var(--error-muted, rgba(239, 68, 68, 0.15));
       color: var(--error);
   }
   .session-status.no-show {
       background: var(--bg-4);
       color: var(--text-2);
   }

   .session-card-actions {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       flex-shrink: 0;
       align-items: center;
       justify-content: flex-end;
       max-width: 100%;
   }

   .session-toolbar {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       margin-bottom: 20px;
   }
   .session-toolbar-controls {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 8px;
       flex: 1 1 280px;
       justify-content: flex-end;
       min-width: 0;
   }
   .session-toolbar-controls__search-row {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       gap: 8px;
       flex: 1 1 220px;
       min-width: 0;
   }
   .session-toolbar-controls__search-row .session-search-field {
       flex: 1 1 auto;
       min-width: 0;
       max-width: none;
   }
   .session-toolbar-controls__submit,
   .session-toolbar-controls__clear {
       flex-shrink: 0;
       white-space: nowrap;
   }
   .session-toolbar-controls .session-date-input {
       flex: 0 1 160px;
       min-width: 140px;
       max-width: 180px;
   }
   .mentor-mentees-toolbar {
       margin-bottom: 16px;
   }
   .mentor-mentees-toolbar__row {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       gap: 8px;
       width: 100%;
       min-width: 0;
   }
   .mentor-mentees-toolbar__search,
   .mentor-mentees-toolbar .session-search-field {
       flex: 1 1 auto;
       min-width: 0;
       max-width: none;
       width: auto;
   }
   .mentor-mentees-toolbar__submit,
   .mentor-mentees-toolbar__clear {
       flex-shrink: 0;
       white-space: nowrap;
   }
   .mentor-mentee-card {
       margin-bottom: 12px;
       padding: 16px 18px;
   }
   .mentor-mentee-card__row {
       display: flex;
       gap: 14px;
       align-items: center;
       min-width: 0;
   }
   .mentor-mentee-card__avatar {
       width: 48px;
       height: 48px;
       font-size: 18px;
       flex-shrink: 0;
   }
   .mentor-mentee-card__body {
       flex: 1 1 auto;
       min-width: 0;
       overflow: hidden;
   }
   .mentor-mentee-card__name {
       font-size: 15px;
       font-weight: 700;
       margin-bottom: 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   .mentor-mentee-card__email {
       font-size: 12px;
       color: var(--text-2);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       max-width: 100%;
   }
   .mentor-mentee-card__meta {
       font-size: 12px;
       color: var(--text-3);
       margin-top: 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   .mentor-mentee-card__actions {
       display: flex;
       gap: 8px;
       flex-shrink: 0;
       align-items: center;
   }
   .mentor-mentee-card__actions .btn {
       white-space: nowrap;
   }
   @media (max-width: 640px) {
       .mentor-mentee-card__row {
           display: grid;
           grid-template-columns: 48px minmax(0, 1fr);
           grid-template-areas:
               "avatar body"
               "actions actions";
           column-gap: 12px;
           row-gap: 12px;
           align-items: start;
       }
       .mentor-mentee-card__avatar { grid-area: avatar; }
       .mentor-mentee-card__body { grid-area: body; }
       .mentor-mentee-card__actions {
           grid-area: actions;
           width: 100%;
       }
       .mentor-mentee-card__actions .btn {
           flex: 1;
           justify-content: center;
       }
   }
   .mentor-requests-toolbar__search {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       gap: 8px;
       flex: 1 1 280px;
       min-width: 0;
       margin-left: auto;
   }
   .mentor-requests-toolbar__field,
   .mentor-requests-toolbar .session-search-field {
       flex: 1 1 auto;
       min-width: 0;
       max-width: 280px;
       width: auto;
   }
   .mentor-requests-toolbar__submit,
   .mentor-requests-toolbar__clear {
       flex-shrink: 0;
       white-space: nowrap;
   }
   .community-filters-toolbar__controls {
       display: flex;
       flex-direction: column;
       align-items: stretch;
       gap: 8px;
       flex: 1 1 320px;
       min-width: 0;
       margin-left: auto;
   }
   .community-filters-toolbar__row {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       gap: 8px;
       min-width: 0;
       width: 100%;
   }
   .community-filters-toolbar__row--search {
       justify-content: flex-end;
   }
   .community-filters-toolbar__row--filters {
       justify-content: flex-end;
   }
   .community-filters-toolbar__search,
   .community-filters-toolbar .session-search-field {
       flex: 1 1 200px;
       min-width: 0;
       max-width: 280px;
       width: auto;
   }
   .community-filters-toolbar__select {
       flex: 1 1 140px;
       min-width: 0;
       max-width: 180px;
       width: auto;
   }
   .community-filters-toolbar__submit,
   .community-filters-toolbar__clear {
       flex-shrink: 0;
       white-space: nowrap;
   }
   .session-search-bar {
       display: flex;
       flex-wrap: nowrap;
       gap: 10px;
       align-items: center;
       margin-bottom: 16px;
   }
   .session-search-bar > .form-select {
       width: auto;
       min-width: 180px;
       max-width: 220px;
       flex-shrink: 0;
   }
   .session-search-bar .session-search-field {
       flex: 1 1 auto;
       min-width: 160px;
       max-width: none;
   }
   .curriculum-tracks-toolbar {
       margin-bottom: 16px;
       width: 100%;
       min-width: 0;
   }
   .curriculum-tracks-toolbar__grid {
       display: flex;
       flex-direction: column;
       gap: 10px;
       width: 100%;
       min-width: 0;
   }
   .curriculum-tracks-toolbar__field {
       min-width: 0;
       width: 100%;
   }
   .curriculum-tracks-toolbar__label {
       display: block;
       font-size: 11px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.04em;
       color: var(--text-3);
       margin-bottom: 6px;
   }
   .curriculum-tracks-toolbar__select {
       width: 100%;
   }
   .curriculum-tracks-toolbar__search-row {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       gap: 8px;
       width: 100%;
       min-width: 0;
   }
   .curriculum-tracks-toolbar__search,
   .curriculum-tracks-toolbar .session-search-field {
       flex: 1 1 auto;
       min-width: 0;
       max-width: none;
       width: auto;
   }
   .curriculum-tracks-toolbar__submit,
   .curriculum-tracks-toolbar__clear {
       flex-shrink: 0;
       white-space: nowrap;
   }
   .dash-header--actions {
       flex-wrap: wrap;
       gap: 12px;
       align-items: flex-start;
   }
   .dash-header__main {
       flex: 1;
       min-width: 0;
   }
   .dash-header__actions {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       align-items: center;
   }
   .dash-header__actions .btn {
       white-space: nowrap;
   }
   .curriculum-track-card {
       margin-bottom: 12px;
       padding: 16px 18px;
   }
   .curriculum-track-card__inner {
       display: flex;
       justify-content: space-between;
       gap: 14px;
       align-items: flex-start;
       flex-wrap: wrap;
   }
   .curriculum-track-card__main {
       flex: 1;
       min-width: min(100%, 200px);
   }
   .curriculum-track-card__title-row {
       display: flex;
       align-items: center;
       gap: 8px;
       flex-wrap: wrap;
   }
   .curriculum-track-card__title {
       font-size: 15px;
       font-weight: 700;
       line-height: 1.35;
       word-break: break-word;
   }
   .curriculum-track-card__meta {
       font-size: 12px;
       color: var(--text-2);
       margin-top: 4px;
       line-height: 1.5;
       word-break: break-word;
   }
   .curriculum-track-card__actions {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
       align-items: center;
       justify-content: flex-end;
   }
   .curriculum-track-card__actions .btn {
       white-space: nowrap;
   }
   .assess-toolbar {
       align-items: center;
       justify-content: space-between;
   }
   .assess-toolbar__grid {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       gap: 8px;
       flex: 0 0 auto;
       width: auto;
       margin-left: auto;
   }
   .assess-toolbar__search,
   .assess-toolbar .session-search-field {
       flex: 0 1 260px;
       width: 260px;
       max-width: 260px;
       min-width: 180px;
   }
   .assess-toolbar__submit {
       white-space: nowrap;
       flex-shrink: 0;
   }
   .assess-questions-toolbar {
       margin-bottom: 16px;
   }
   .assess-questions-toolbar__grid {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: flex-end;
       gap: 8px;
   }
   .assess-questions-toolbar__select {
       width: 200px;
       max-width: 100%;
       flex: 0 1 200px;
       min-width: 160px;
   }
   .assess-questions-toolbar__search-row {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       gap: 8px;
       flex: 1 1 280px;
       min-width: 0;
       justify-content: flex-end;
   }
   .assess-questions-toolbar__search,
   .assess-questions-toolbar .session-search-field {
       flex: 1 1 auto;
       width: auto;
       max-width: 320px;
       min-width: 160px;
   }
   .assess-questions-toolbar__submit,
   .assess-questions-toolbar__clear {
       white-space: nowrap;
       flex-shrink: 0;
   }
   @media (max-width: 640px) {
       .assess-questions-toolbar__grid {
           flex-direction: column;
           align-items: stretch;
           justify-content: stretch;
       }
       .assess-questions-toolbar__select {
           flex: none;
           width: 100%;
           max-width: none;
           min-width: 0;
       }
       .assess-questions-toolbar__search-row {
           width: 100%;
           flex: none;
           justify-content: stretch;
       }
       .assess-questions-toolbar__search,
       .assess-questions-toolbar .session-search-field {
           flex: 1 1 auto;
           width: auto;
           max-width: none;
           min-width: 0;
       }
       .assess-questions-toolbar__submit,
       .assess-questions-toolbar__clear {
           flex: 0 0 auto;
           width: auto;
           justify-content: center;
       }
   }
   .session-search-field {
       position: relative;
       flex: 1 1 180px;
       min-width: 160px;
       max-width: 280px;
   }
   @media (max-width: 640px) {
       .session-search-bar {
           flex-wrap: wrap;
       }
   }
   .mentor-change-toolbar {
       margin-bottom: 16px;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }
   .mentor-change-toolbar__controls {
       width: 100%;
       flex: 1 1 100%;
       flex-wrap: wrap;
       justify-content: flex-start;
   }
   .mentor-change-toolbar__search-row {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       gap: 8px;
       width: 100%;
       flex: 1 1 100%;
       min-width: 0;
   }
   .mentor-change-toolbar__search-row .session-search-field,
   .mentor-change-toolbar__search {
       flex: 1 1 auto;
       min-width: 0;
       max-width: none;
   }
   .mentor-change-toolbar__submit,
   .mentor-change-toolbar__clear {
       flex-shrink: 0;
       white-space: nowrap;
   }
   .mentor-change-toolbar__field {
       width: auto;
       min-width: 180px;
       max-width: 220px;
       flex-shrink: 0;
   }
   .mentor-change-toolbar .session-search-field {
       flex: 1 1 auto;
       min-width: 160px;
       max-width: none;
   }
   .session-search-field .form-input {
       padding-left: 38px;
       width: 100%;
   }
   .session-search-icon {
       position: absolute;
       left: 12px;
       top: 50%;
       transform: translateY(-50%);
       font-size: 13px;
       pointer-events: none;
       opacity: 0.7;
   }
   .session-date-input {
       max-width: 160px;
       flex: 0 0 auto;
   }

   .session-filter-tabs {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-bottom: 0;
       width: fit-content;
       max-width: 100%;
       flex: 0 0 auto;
       background: transparent;
       border: none;
       border-radius: 0;
       padding: 0;
   }
   .session-filter-tab {
       padding: 7px 14px;
       border-radius: 8px;
       font-size: 12px;
       font-weight: 600;
       color: var(--text-2);
       text-decoration: none;
       transition: all .15s;
       white-space: nowrap;
       border: 1px solid var(--border);
       background: transparent;
   }
   .session-filter-tab:hover {
       color: var(--text);
       background: var(--bg-4);
       border-color: var(--border);
   }
   .session-filter-tab.active,
   .session-filter-tab.is-active {
       background: var(--brand);
       color: #111;
       border-color: var(--brand);
       box-shadow: var(--shadow-sm);
   }
   .session-filter-count {
       background: var(--error);
       color: #fff;
       border-radius: 99px;
       font-size: 10px;
       padding: 1px 5px;
       margin-left: 4px;
   }
   .session-filter-tab.active .session-filter-count {
       background: #111;
       color: #fff;
   }

   /* ── Dashboard layout utilities ─────────────────────────── */
   .dash-stats-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 16px;
       margin-bottom: 24px;
   }
   .wallet-balance-value {
       font-size: clamp(26px, 7vw, 36px);
       font-weight: 800;
       font-family: var(--font-head);
       color: #fff;
       line-height: 1.1;
       word-break: break-word;
   }
   .dash-filter-form {
       margin-bottom: 18px;
       padding: 14px 16px;
   }
   .dash-filter-form__grid {
       display: grid;
       grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
       gap: 10px;
       align-items: end;
   }
   .table-scroll {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
       max-width: 100%;
   }
   .data-table {
       width: 100%;
       min-width: 520px;
       border-collapse: collapse;
   }
   .data-table th,
   .data-table td {
       padding: 10px 12px;
       text-align: left;
       border-bottom: 1px solid var(--border);
       font-size: 13px;
       vertical-align: top;
   }
   .data-table th {
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       color: var(--text-3);
       white-space: nowrap;
   }
   .plan-discount-badge {
       display: inline-flex;
       align-items: center;
       font-size: 11px;
       font-weight: 800;
       letter-spacing: .02em;
       padding: 3px 8px;
       border-radius: 999px;
       background: #dcfce7;
       color: #15803d;
       white-space: nowrap;
   }
   .plan-price-row {
       display: flex;
       align-items: baseline;
       flex-wrap: wrap;
       gap: 8px;
   }
   .plan-billing-toggle {
       display: inline-flex;
       gap: 4px;
       padding: 4px;
       margin: 0 0 18px;
       border-radius: 999px;
       background: var(--bg-3);
       border: 1px solid var(--border);
   }
   .plan-billing-toggle__btn {
       appearance: none;
       border: 0;
       background: transparent;
       color: var(--text-2);
       font-size: 13px;
       font-weight: 700;
       padding: 8px 16px;
       border-radius: 999px;
       cursor: pointer;
   }
   .plan-billing-toggle__btn.is-active {
       background: var(--brand);
       color: #111;
   }
   .plan-period-block[hidden] {
       display: none !important;
   }
   .plan-price-period {
       font-size: 13px;
       font-weight: 500;
       color: var(--text-3);
   }
   .plan-history-head {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 12px;
       flex-wrap: wrap;
       margin-bottom: 14px;
   }
   .plan-history-actions {
       display: inline-flex;
       align-items: center;
       gap: 8px;
   }
   .plan-history-icon-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 32px;
       height: 32px;
       padding: 0;
       border: 1px solid var(--border);
       border-radius: 8px;
       background: var(--bg-3);
       color: var(--text-2);
       text-decoration: none;
       cursor: pointer;
       flex-shrink: 0;
   }
   .plan-history-icon-btn:hover {
       color: var(--brand);
       border-color: var(--brand);
       background: var(--bg-4);
   }
   .plan-history-icon-btn svg {
       width: 16px;
       height: 16px;
   }
   .session-card-inner {
       display: flex;
       gap: 16px;
       align-items: flex-start;
       flex-wrap: wrap;
       padding: 18px;
   }
   .session-card-body {
       flex: 1;
       min-width: min(100%, 220px);
   }
   .session-list-card {
       margin-bottom: 12px;
       padding: 0;
       overflow: hidden;
       display: flex;
       align-items: stretch;
   }
   .session-list-card__accent {
       width: 4px;
       flex-shrink: 0;
   }
   .session-list-card .session-card-inner {
       flex: 1;
       min-width: 0;
   }
   .session-list-card__avatar {
       width: 50px;
       height: 50px;
       font-size: 18px;
       flex-shrink: 0;
   }
   .session-card-header {
       display: flex;
       justify-content: space-between;
       gap: 10px;
       align-items: flex-start;
   }
   .session-card-header__main {
       flex: 1;
       min-width: 0;
   }
   .session-card-title {
       font-size: 15px;
       font-weight: 700;
       margin-bottom: 3px;
       line-height: 1.35;
       word-break: break-word;
   }
   .session-card-subtitle {
       font-size: 13px;
       color: var(--text-2);
       line-height: 1.45;
       word-break: break-word;
   }
   .session-card-ref {
       font-size: 11px;
       color: var(--text-3);
       word-break: break-all;
   }
   .session-card-meta {
       display: flex;
       flex-wrap: wrap;
       gap: 8px 16px;
       margin-top: 10px;
   }
   .session-card-meta span {
       font-size: 12px;
       color: var(--text-2);
       white-space: nowrap;
   }
   .session-card-meta__earn {
       color: var(--success) !important;
   }
   .session-card-meta__price {
       color: var(--brand) !important;
   }
   .session-card-notes {
       margin-top: 10px;
       padding: 10px;
       background: var(--bg);
       border-radius: var(--radius-sm);
       font-size: 12px;
       color: var(--text-2);
       word-break: break-word;
   }
   .session-status {
       flex-shrink: 0;
       white-space: nowrap;
   }

   @media (max-width: 768px) {
       .session-toolbar {
           flex-direction: column;
           align-items: stretch;
           gap: 12px;
           margin-bottom: 16px;
       }
       .session-filter-tabs {
           width: 100%;
           max-width: 100%;
           overflow-x: auto;
           flex-wrap: nowrap;
           -webkit-overflow-scrolling: touch;
           scrollbar-width: none;
           padding-bottom: 2px;
       }
       .session-filter-tabs::-webkit-scrollbar {
           display: none;
       }
       .session-filter-tab {
           flex-shrink: 0;
       }
       .assess-toolbar {
           align-items: stretch;
           flex-direction: column;
       }
       .assess-toolbar__grid {
           width: 100%;
           margin-left: 0;
           flex: none;
       }
       .assess-toolbar__search,
       .assess-toolbar .session-search-field {
           flex: 1 1 auto;
           width: auto;
           max-width: none;
           min-width: 0;
       }
       .mentor-requests-toolbar {
           flex-direction: column;
           align-items: stretch;
       }
       .mentor-requests-toolbar__search {
           width: 100%;
           margin-left: 0;
           flex: none;
       }
       .mentor-requests-toolbar__field,
       .mentor-requests-toolbar .session-search-field {
           flex: 1 1 auto;
           max-width: none;
           min-width: 0;
       }
       .session-toolbar-controls,
       .mentor-change-toolbar__controls {
           width: 100%;
           flex: 1 1 100%;
           flex-direction: column;
           align-items: stretch;
           justify-content: flex-start;
           gap: 10px;
       }
       .session-toolbar-controls__search-row,
       .mentor-change-toolbar__search-row {
           width: 100%;
           flex: none;
           display: flex;
           flex-direction: row;
           flex-wrap: nowrap;
           align-items: center;
           gap: 8px;
       }
       .session-toolbar-controls__search-row .session-search-field,
       .mentor-change-toolbar__search-row .session-search-field,
       .mentor-change-toolbar__search {
           flex: 1 1 auto;
           width: auto;
           max-width: none;
           min-width: 0;
       }
       .session-toolbar-controls__submit,
       .session-toolbar-controls__clear,
       .mentor-change-toolbar__submit,
       .mentor-change-toolbar__clear {
           flex-shrink: 0;
           width: auto !important;
       }
       .session-toolbar-controls > .session-date-input,
       .mentor-change-toolbar__controls > .mentor-change-toolbar__field,
       .mentor-change-toolbar__controls > .mentor-change-toolbar__clear {
           width: 100% !important;
           max-width: none !important;
           min-width: 0 !important;
           flex: none !important;
       }
       .session-toolbar-controls .btn,
       .mentor-change-toolbar__controls .btn {
           justify-content: center;
       }
       .community-filters-toolbar {
           flex-direction: column;
           align-items: stretch;
       }
       .community-filters-toolbar__controls {
           width: 100%;
           margin-left: 0;
           flex: none;
       }
       .community-filters-toolbar__row {
           width: 100%;
       }
       .community-filters-toolbar__row--search,
       .community-filters-toolbar__row--filters {
           justify-content: stretch;
       }
       .community-filters-toolbar__search,
       .community-filters-toolbar .session-search-field {
           flex: 1 1 auto;
           max-width: none;
           min-width: 0;
       }
       .community-filters-toolbar__select {
           flex: 1 1 0;
           max-width: none;
           min-width: 0;
           width: 100%;
       }
       .community-filters-toolbar__submit {
           flex-shrink: 0;
       }
       .community-filters-toolbar__clear {
           flex-shrink: 0;
       }
       .curriculum-tracks-toolbar__grid {
           display: flex;
           flex-direction: column;
           gap: 10px;
       }
       .curriculum-tracks-toolbar__search-row {
           width: 100%;
       }
       .dash-header__actions {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 8px;
           width: 100%;
       }
       .dash-header__actions .btn {
           width: 100%;
           justify-content: center;
       }
       .dash-header__actions .btn:only-child {
           grid-column: 1 / -1;
       }
       .mentor-dash__header .dash-header__actions {
           display: flex;
           width: auto;
           margin-left: auto;
       }
       .mentor-dash__header .dash-header__actions .btn {
           width: auto;
       }
       .curriculum-track-card {
           padding: 14px 16px;
       }
       .curriculum-track-card__inner {
           flex-direction: column;
           gap: 12px;
       }
       .curriculum-track-card__actions {
           width: 100%;
           justify-content: stretch;
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 8px;
       }
       .curriculum-track-card__actions .btn-primary {
           grid-column: 1 / -1;
       }
       .curriculum-track-card__actions .btn {
           width: 100%;
           justify-content: center;
       }
       .session-detail-layout {
           grid-template-columns: 1fr;
           gap: 16px;
       }
       .session-detail-breadcrumb {
           margin-bottom: 14px;
       }
       .session-detail-card {
           margin-bottom: 16px;
       }
       .session-detail-header-top {
           flex-direction: column;
           gap: 12px;
       }
       .session-detail-actions {
           width: 100%;
           display: grid;
           grid-template-columns: 1fr;
           gap: 8px;
       }
       .session-detail-actions .btn {
           width: 100%;
           justify-content: center;
       }
       .session-detail-meta span {
           white-space: normal;
       }
       .session-detail-card-head {
           flex-direction: column;
           align-items: flex-start;
           gap: 4px;
           margin-bottom: 12px;
       }
       .booking-summary {
           padding: 16px;
       }
       .session-detail-card form .btn[type="submit"],
       .session-detail-card #my-note-save {
           width: 100%;
           justify-content: center;
       }
       #my-note-save {
           margin-left: 0 !important;
       }
       .session-search-field {
           max-width: none;
       }
       .dash-stats-grid {
           grid-template-columns: 1fr;
       }
       .dash-filter-form__grid {
           grid-template-columns: 1fr;
       }
       .dash-filter-form__grid .btn {
           width: 100%;
       }
       .session-card-inner {
           display: grid;
           grid-template-columns: 48px minmax(0, 1fr);
           grid-template-areas:
               "avatar body"
               "actions actions";
           column-gap: 12px;
           row-gap: 12px;
           align-items: start;
           padding: 14px;
       }
       .session-list-card__avatar {
           grid-area: avatar;
           width: 48px !important;
           height: 48px !important;
           font-size: 16px !important;
       }
       .session-card-body {
           grid-area: body;
           min-width: 0;
       }
       .session-card-actions {
           grid-area: actions;
           width: 100%;
           justify-content: flex-start;
           margin-top: 0;
       }
       .session-card-actions .btn {
           white-space: nowrap;
       }
       .navbar-right .user-menu {
           display: none;
       }
       .search-hero {
           flex-direction: column;
           align-items: stretch;
           padding: 12px;
           gap: 10px;
           max-width: none;
       }
       .search-hero input {
           width: 100%;
           min-width: 0;
       }
       .search-filters {
           width: 100%;
           flex-direction: column;
           align-items: stretch;
           gap: 8px;
       }
       .search-filters select,
       .search-filters .btn {
           width: 100%;
       }
       .chip-wrap {
           gap: 8px;
       }
       .chip {
           font-size: 12px;
           padding: 6px 12px;
       }
       .dash-header.flex-between {
           flex-wrap: wrap;
           gap: 12px;
       }
       .flex-between.dash-header {
           align-items: flex-start;
       }
       .dash-header.flex-between > .btn,
       .dash-header.flex-between:not(.dash-header--actions) .btn {
           width: 100%;
           justify-content: center;
       }
   }

   @media (min-width: 769px) {
       .dash-header.flex-between > .btn,
       .dash-header.flex-between:not(.dash-header--actions) .btn {
           width: auto;
       }
       .dash-header__actions {
           display: flex;
           width: auto;
       }
       .dash-header__actions .btn {
           width: auto;
       }
       .curriculum-tracks-toolbar__grid {
           display: grid;
           grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
           gap: 10px;
           align-items: end;
       }
       .curriculum-tracks-toolbar__field {
           width: auto;
       }
       .curriculum-tracks-toolbar__search-row {
           min-width: 0;
       }
   }

   @media (min-width: 769px) and (max-width: 960px) {
       .curriculum-tracks-toolbar__grid {
           grid-template-columns: 1fr;
       }
   }

   @media (min-width: 769px) and (max-width: 1024px) {
       .dash-stats-grid {
           grid-template-columns: 1fr;
       }
       .dash-filter-form__grid {
           grid-template-columns: 1fr 1fr;
       }
       .dash-filter-form__grid .form-group:first-child {
           grid-column: 1 / -1;
       }
   }
   
   /* ── Alert / notice ──────────────────────────────────────── */
   .alert {
       padding: 14px 18px;
       border-radius: var(--radius);
       border-left: 3px solid;
       font-size: 13px;
       margin-bottom: 16px;
       display: flex;
       gap: 10px;
       align-items: flex-start;
   }
   .alert-icon {
       font-size: 16px;
       flex-shrink: 0;
       margin-top: 1px;
   }
   .alert-success {
       background: var(--success-muted);
       border-color: var(--success);
       color: var(--success);
   }
   .alert-error {
       background: var(--error-muted);
       border-color: var(--error);
       color: var(--error);
   }
   .alert-info {
       background: var(--info-muted);
       border-color: var(--info);
       color: var(--info);
   }
   .alert-warning {
       background: var(--warning-muted);
       border-color: var(--warning);
       color: var(--warning);
   }
   .alert p {
       color: var(--text-2);
       margin: 0;
   }
   
   /* ── Admin Masters ───────────────────────────────────────── */
   .stream-card {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-lg);
       padding: 20px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       transition: all var(--trans);
   }
   .stream-card:hover {
       border-color: var(--border-2);
   }
   .stream-icon-circle {
       width: 44px;
       height: 44px;
       border-radius: 50%;
       background: var(--brand-muted);
       border: 1px solid rgba(245, 158, 11, 0.25);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
   }
   
   /* ── CTA Section ─────────────────────────────────────────── */
   .cta-section {
       padding: 80px 0;
       text-align: center;
       background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, transparent 100%);
       border-top: 1px solid var(--border);
       border-bottom: 1px solid var(--border);
   }
   
   /* ── Empty State ─────────────────────────────────────────── */
   .empty-state {
       text-align: center;
       padding: 60px 20px;
   }
   .empty-state-icon {
       font-size: 56px;
       margin-bottom: 16px;
   }
   .empty-state h3 {
       font-size: 18px;
       margin-bottom: 8px;
   }
   .empty-state p {
       font-size: 14px;
       color: var(--text-2);
       margin-bottom: 20px;
   }
   
   /* ── Wallet / Hero Card (always dark so white text stays readable) ── */
   .wallet-card {
       position: relative;
       overflow: hidden;
       border-radius: var(--radius-lg, 16px);
       padding: 24px;
       background: linear-gradient(135deg, #1c1917 0%, #292524 45%, #431407 100%);
       border: 1px solid rgba(245, 158, 11, 0.25);
       color: #fff;
       box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
   }
   .wallet-card::before {
       content: "";
       position: absolute;
       width: 220px;
       height: 220px;
       right: -60px;
       top: -80px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(245, 158, 11, 0.28) 0%, transparent 70%);
       pointer-events: none;
   }
   .wallet-card .progress-bar {
       background: rgba(255, 255, 255, 0.15);
   }
   [data-theme="light"] .wallet-card {
       background: linear-gradient(135deg, #1c1917 0%, #292524 50%, #7c2d12 100%);
       box-shadow: 0 10px 28px rgba(28, 25, 23, 0.18);
   }

   /* ── Progress Bar ────────────────────────────────────────── */
   .progress-bar {
       height: 6px;
       background: var(--bg-4);
       border-radius: 999px;
       overflow: hidden;
   }
   .progress-fill {
       height: 100%;
       background: var(--brand);
       border-radius: 999px;
       transition: width 0.5s ease;
   }
   
   /* ── Chip Selects ────────────────────────────────────────── */
   .chip-wrap {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
   }
   .chip {
       padding: 6px 14px;
       border-radius: 999px;
       font-size: 12px;
       font-weight: 500;
       cursor: pointer;
       border: 1.5px solid var(--border);
       background: var(--bg-3);
       color: var(--text-2);
       transition: all var(--trans);
   }
   .chip:hover {
       border-color: var(--brand);
       color: var(--brand);
   }
   .chip.selected {
       background: var(--brand-muted);
       color: var(--brand);
       border-color: var(--brand);
       font-weight: 600;
   }
   
   /* ── Responsive ──────────────────────────────────────────── */
   @media (max-width: 1024px) {
       .grid-4 {
           grid-template-columns: repeat(2, 1fr);
       }
       .footer-grid {
           grid-template-columns: 1fr 1fr;
           gap: 32px;
       }
       .stats-grid {
           grid-template-columns: repeat(2, 1fr);
       }
       .hero-grid {
           grid-template-columns: 1fr;
       }
       .banner-wrap {
           display: none;
       }
       .auth-wrap {
           grid-template-columns: 1fr;
           min-height: auto;
       }
       .auth-left {
           display: none;
       }
       .auth-right {
           align-items: flex-start;
           justify-content: flex-start;
           min-height: auto;
           padding: 28px 20px 32px;
       }
       .auth-box {
           max-width: 440px;
           margin: 0 auto;
       }
       .dash-layout {
           display: block;
       }
       .sidebar {
           display: flex;
           transform: translateX(-100%);
           transition: transform 0.25s ease;
           z-index: 200;
           box-shadow: var(--shadow-lg);
       }
       .sidebar.is-open {
           transform: translateX(0);
       }
       .sidebar-backdrop {
           position: fixed;
           inset: 0;
           top: var(--nav-h);
           background: var(--overlay);
           z-index: 199;
           opacity: 0;
           visibility: hidden;
           transition: opacity 0.25s ease, visibility 0.25s ease;
       }
       .sidebar-backdrop.is-open {
           opacity: 1;
           visibility: visible;
       }
       .dash-content {
           margin-left: 0;
           width: 100%;
           padding: 20px 16px;
       }
       body:has(.dash-layout) .footer {
           margin-left: 0;
           width: 100%;
           max-width: 100%;
       }
       .search-layout {
           grid-template-columns: 1fr !important;
       }
       .filter-sidebar {
           position: static;
       }
       .filter-sidebar.is-collapsed {
           display: none;
       }
       .search-filter-toggle {
           display: flex;
       }
       .app-bottom-nav,
       .mentor-bottom-nav {
           display: flex;
           position: fixed;
           left: 0;
           right: 0;
           bottom: 0;
           z-index: 180;
           align-items: stretch;
           justify-content: space-around;
           height: calc(64px + env(safe-area-inset-bottom, 0px));
           padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
           background: var(--card-bg, #fff);
           border-top: 1px solid var(--border, rgba(0,0,0,.08));
           box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
       }
       .app-bottom-nav__item,
       .mentor-bottom-nav__item {
           flex: 1;
           min-width: 0;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           gap: 3px;
           text-decoration: none;
           color: var(--text-3, #9ca3af);
           font-size: 11px;
           font-weight: 600;
           line-height: 1.1;
       }
       .app-bottom-nav__item svg,
       .mentor-bottom-nav__item svg {
           width: 22px;
           height: 22px;
           display: block;
       }
       .app-bottom-nav__item.is-active,
       .mentor-bottom-nav__item.is-active {
           color: var(--brand, #f59e0b);
       }
       body:has(.app-bottom-nav) .dash-content,
       body:has(.mentor-bottom-nav) .dash-content {
           padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
       }
       body:has(.app-bottom-nav):not(:has(.dash-content)) {
           padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
       }
       body:has(.app-bottom-nav) .footer,
       body:has(.mentor-bottom-nav) .footer {
           display: none;
       }
   }
   @media (max-width: 768px) {
       .container {
           padding: 0 16px;
       }
       .section {
           padding: 56px 0;
       }
       .navbar-nav {
           display: none;
       }
       .hamburger {
           display: flex;
       }
       .navbar-right .btn-outline {
           display: none;
       }
       .auth-right {
           padding: 20px 16px 20px;
       }
       .auth-title {
           font-size: 22px;
       }
       .auth-subtitle {
           margin-bottom: 22px;
       }
       .grid-2,
       .grid-3 {
           grid-template-columns: 1fr;
       }
       .grid-4 {
           grid-template-columns: 1fr;
       }
       .stats-grid {
           grid-template-columns: repeat(2, 1fr);
       }
       .hero-cta {
           flex-direction: column;
       }
       .hero-stats {
           gap: 20px;
       }
       .footer-grid {
           grid-template-columns: 1fr;
           gap: 24px;
       }
       .otp-grid {
           gap: 6px;
       }
       .otp-input {
           font-size: 18px;
       }
       .time-grid {
           grid-template-columns: repeat(3, 1fr);
       }
       .steps-bar {
           overflow-x: auto;
       }
       .modal {
           margin: 0 12px;
       }
       .booking-modal {
           max-width: 100%;
           max-height: 100dvh;
           border-radius: var(--radius-lg);
       }
       #booking-modal.modal-overlay {
           padding: 12px;
           align-items: flex-end;
       }
       .booking-modal__layout {
           grid-template-columns: 1fr;
           gap: 20px;
       }
       .booking-modal__body {
           padding: 16px;
       }
       .booking-modal .modal-header {
           padding: 16px;
       }
       .booking-modal__footer {
           flex-direction: column;
           align-items: stretch;
       }
       .booking-modal__footer .btn {
           width: 100%;
           justify-content: center;
       }
       .booking-cal-head {
           flex-direction: column;
           align-items: stretch;
       }
       .booking-cal-nav {
           justify-content: space-between;
           width: 100%;
       }
       .duration-btns {
           display: grid;
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
       .duration-btn {
           min-width: 0;
       }
       .time-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
       .booking-summary-row strong {
           max-width: 55%;
       }
       .toast-container {
           right: 12px;
           left: 12px;
       }
       .toast {
           min-width: auto;
       }
       .search-hero {
           flex-direction: column;
           padding: 16px;
       }
       .search-filters {
           flex-wrap: wrap;
       }
       .profile-hero-inner {
           flex-direction: column;
       }
       .dash-header {
           flex-direction: column;
           align-items: flex-start;
           gap: 12px;
       }
       .dash-content {
           padding: 16px 12px;
       }
       .dash-title {
           font-size: 20px;
       }
       .table-responsive,
       .table-scroll {
           overflow-x: auto;
           -webkit-overflow-scrolling: touch;
       }
       .card {
           overflow: visible;
       }
   }
   /* Community channel message images — uniform size */
   .channel-msg-image {
       width: 100%;
       max-width: 320px;
       height: 200px;
       object-fit: cover;
       object-position: center;
       border-radius: 10px;
       display: block;
       background: var(--bg-2, #f3f4f6);
       border: 1px solid var(--border, rgba(0,0,0,.08));
   }
   .channel-msg-image--reply {
       max-width: 220px;
       height: 140px;
       border-radius: 8px;
   }
   .channel-msg-video {
       width: 100%;
       max-width: 420px;
       max-height: 280px;
       margin-top: 10px;
       border-radius: 10px;
       display: block;
       background: #000;
       border: 1px solid var(--border, rgba(0,0,0,.08));
   }
   .channel-msg-video--reply {
       max-width: 280px;
       max-height: 180px;
       margin-top: 6px;
       border-radius: 8px;
   }

   /* Community message composer — icon bar (image / video / send) */
   .channel-composer {
       display: flex;
       align-items: center;
       gap: 10px;
       background: var(--bg-3, #f3f4f6);
       border: 1px solid var(--border, rgba(0,0,0,.08));
       border-radius: 18px;
       padding: 10px 12px 10px 16px;
       transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
   }
   .channel-composer:focus-within {
       background: var(--bg-2, #fff);
       border-color: #60a5fa;
       box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
   }
   .channel-composer__input {
       flex: 1;
       min-width: 0;
       background: transparent !important;
       border: none !important;
       box-shadow: none !important;
       outline: none !important;
       padding: 0 !important;
       font-size: 14px;
       color: var(--text);
       line-height: 1.4;
   }
   .channel-composer__input::placeholder {
       color: var(--text-3, #9ca3af);
   }
   .channel-composer__actions {
       display: flex;
       align-items: center;
       gap: 8px;
       flex-shrink: 0;
   }
   .channel-composer__attach {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 32px;
       height: 32px;
       border-radius: 8px;
       color: var(--text-3, #9ca3af);
       cursor: pointer;
       transition: color .15s ease, background .15s ease;
   }
   .channel-composer__attach:hover,
   .channel-composer__attach.is-active {
       color: #2563eb;
       background: rgba(37, 99, 235, 0.08);
   }
   .channel-composer__attach svg {
       width: 20px;
       height: 20px;
       display: block;
   }
   .channel-composer__attach input {
       display: none !important;
   }
   .channel-composer__send {
       width: 36px;
       height: 36px;
       border: none;
       border-radius: 50%;
       background: #2563eb;
       color: #fff;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       flex-shrink: 0;
       transition: background .15s ease, transform .1s ease;
   }
   .channel-composer__send:hover {
       background: #1d4ed8;
   }
   .channel-composer__send:active {
       transform: scale(0.95);
   }
   .channel-composer__send svg {
       width: 15px;
       height: 15px;
       fill: currentColor;
       display: block;
   }
   .channel-composer__meta {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-top: 8px;
       font-size: 11px;
       color: var(--text-3);
   }
   .channel-composer__chip {
       display: none;
       align-items: center;
       gap: 6px;
       max-width: 100%;
       padding: 4px 10px;
       border-radius: 999px;
       background: var(--bg-4, #e5e7eb);
       color: var(--text-2);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   .channel-composer__chip.is-visible {
       display: inline-flex;
   }
   .channel-composer--reply {
       border-radius: 14px;
       padding: 8px 10px 8px 14px;
       gap: 8px;
   }
   .channel-composer--reply .channel-composer__attach {
       width: 28px;
       height: 28px;
   }
   .channel-composer--reply .channel-composer__attach svg {
       width: 16px;
       height: 16px;
   }
   .channel-composer--reply .channel-composer__send {
       width: 32px;
       height: 32px;
   }
   .channel-composer--reply .channel-composer__send svg {
       width: 13px;
       height: 13px;
   }

   /* Community — create / edit channel form */
   .community-channel-form-card {
       max-width: 720px;
       margin: 0 auto;
   }
   .community-channel-form-card__back {
       margin-bottom: 20px;
   }
   .community-channel-form {
       display: flex;
       flex-direction: column;
       gap: 20px;
   }
   .community-channel-form .form-group {
       margin-bottom: 0;
   }
   .community-channel-form__grid--top {
       display: grid;
       grid-template-columns: 1fr;
       gap: 20px;
   }
   @media (min-width: 640px) {
       .community-channel-form__grid--top {
           grid-template-columns: 1fr 120px;
           gap: 16px 20px;
           align-items: start;
       }
   }
   .community-channel-form__icon .form-input {
       text-align: center;
       font-size: 22px;
       padding-left: 10px;
       padding-right: 10px;
   }
   .community-visibility-options {
       display: flex;
       flex-direction: column;
       gap: 10px;
   }
   .community-visibility-option {
       display: flex;
       align-items: flex-start;
       gap: 10px;
       padding: 12px 14px;
       border: 1.5px solid var(--border);
       border-radius: var(--radius);
       background: var(--bg-2);
       cursor: pointer;
       transition:
           border-color var(--trans),
           background var(--trans);
   }
   .community-visibility-option:hover {
       border-color: var(--border-2);
   }
   .community-visibility-option:has(input:checked) {
       border-color: var(--brand);
       background: var(--brand-muted);
   }
   .community-visibility-option input {
       margin-top: 2px;
       flex-shrink: 0;
       accent-color: var(--brand);
   }
   .community-visibility-option span {
       font-size: 13px;
       color: var(--text-2);
       line-height: 1.45;
   }
   .community-category-options {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 8px;
   }
   @media (min-width: 640px) {
       .community-category-options {
           grid-template-columns: repeat(3, minmax(0, 1fr));
       }
   }
   .community-category-option {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 44px;
       padding: 10px 12px;
       border: 1.5px solid var(--border);
       border-radius: var(--radius);
       background: var(--bg-2);
       cursor: pointer;
       text-align: center;
       transition:
           border-color var(--trans),
           background var(--trans);
   }
   .community-category-option:hover {
       border-color: var(--border-2);
   }
   .community-category-option:has(input:checked) {
       border-color: var(--brand);
       background: var(--brand-muted);
   }
   .community-category-option input {
       position: absolute;
       opacity: 0;
       width: 0;
       height: 0;
       pointer-events: none;
   }
   .community-category-option span {
       font-size: 13px;
       color: var(--text-2);
       line-height: 1.35;
   }
   .community-category-option:has(input:checked) span {
       color: var(--brand);
       font-weight: 600;
   }
   .community-channel-form__actions {
       padding-top: 4px;
   }
   .community-channel-form__actions .btn {
       white-space: nowrap;
   }
   .community-image-field__row {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 12px;
   }
   .community-image-field__picker {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       cursor: pointer;
       font-size: 13px;
       font-weight: 500;
       color: var(--text-2);
       border: 1.5px solid var(--border);
       border-radius: var(--radius);
       padding: 10px 14px;
       background: var(--bg-3);
       transition:
           border-color var(--trans),
           color var(--trans),
           background var(--trans);
   }
   .community-image-field__picker:hover {
       border-color: var(--brand);
       color: var(--brand);
       background: var(--brand-muted);
   }
   .community-image-field__picker svg {
       width: 20px;
       height: 20px;
       flex-shrink: 0;
   }
   .community-image-field__chip.channel-composer__chip {
       font-size: 12px;
   }
   .community-image-field__label {
       display: block;
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 0.05em;
       text-transform: uppercase;
       color: var(--text-2);
       margin-bottom: 8px;
   }
   .community-image-field__hint {
       font-size: 12px;
       color: var(--text-3);
       margin-top: 8px;
   }

   @media (max-width: 480px) {
       .stats-grid {
           grid-template-columns: 1fr;
       }
       .time-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
       #booking-modal.modal-overlay {
           padding: 0;
           align-items: flex-end;
       }
       .booking-modal {
           margin: 0;
           border-radius: var(--radius-xl) var(--radius-xl) 0 0;
           max-height: 96dvh;
       }
       .booking-modal .modal-body {
           padding: 14px 12px;
       }
       .booking-modal .modal-header {
           padding: 14px 12px;
       }
       .booking-card {
           padding: 12px;
       }
       .cal-day-num {
           font-size: 12px;
       }
       .cal-weekday {
           font-size: 10px;
       }
       .role-grid {
           grid-template-columns: 1fr;
       }
       .hero-title {
           font-size: 28px;
       }
   }

   /* ── Mentor assessments (admin-style, theme-aware) ───────── */
   .assess-page .dash-header {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 12px;
       flex-wrap: wrap;
   }
   .assess-back {
       display: inline-block;
       font-size: 13px;
       color: var(--text-3);
       text-decoration: none;
       margin-bottom: 8px;
   }
   .assess-back:hover { color: var(--text); }
   .assess-table-wrap {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-xl);
   }
   .assess-table {
       width: 100%;
       min-width: 720px;
       border-collapse: collapse;
       background: transparent;
   }
   .assess-table thead { background: var(--bg-2); }
   .assess-table th {
       padding: 12px 18px;
       text-align: left;
       font-size: 12px;
       font-weight: 700;
       color: var(--text-2);
       border-bottom: 1px solid var(--border);
       white-space: nowrap;
   }
   .assess-table td {
       padding: 16px 18px;
       font-size: 13px;
       color: var(--text);
       border-bottom: 1px solid var(--border);
       vertical-align: middle;
   }
   .assess-table tbody tr:last-child td { border-bottom: none; }
   .assess-table tbody tr:hover { background: var(--bg-2); }
   .assess-table th.num,
   .assess-table td.num { width: 64px; color: var(--text-3); }
   .assess-table th.actions,
   .assess-table td.actions { text-align: right; width: 120px; }
   .assess-thumb {
       width: 56px;
       height: 56px;
       border-radius: 10px;
       object-fit: cover;
       background: var(--bg-4);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
   }
   .assess-thumb img,
   img.assess-thumb {
       width: 56px;
       height: 56px;
       border-radius: 10px;
       object-fit: cover;
       display: block;
   }
   .assess-title-cell { font-weight: 700; color: var(--text); }
   .assess-meta-pill {
       display: inline-flex;
       align-items: center;
       padding: 3px 10px;
       border-radius: 999px;
       background: var(--bg-4);
       color: var(--text-2);
       font-size: 11px;
       font-weight: 600;
       max-width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   .assess-desc-cell {
       color: var(--text-2);
       max-width: 420px;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }
   .assess-badge {
       display: inline-flex;
       align-items: center;
       padding: 4px 10px;
       border-radius: 999px;
       font-size: 11px;
       font-weight: 700;
   }
   .assess-badge.is-active {
       background: var(--success-muted);
       color: var(--success);
   }
   .assess-badge.is-inactive {
       background: var(--bg-4);
       color: var(--text-2);
   }
   .assess-actions {
       display: flex;
       align-items: center;
       justify-content: flex-end;
       gap: 6px;
   }
   .assess-actions form {
       display: flex;
       margin: 0;
   }
   .assess-icon-btn {
       width: 36px;
       height: 36px;
       border: 0;
       border-radius: 10px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       color: #fff;
       text-decoration: none;
       cursor: pointer;
       font-size: 14px;
   }
   .assess-icon-btn--view { background: var(--brand); color: #000; }
   .assess-icon-btn--view:hover { background: var(--brand-light); }
   .assess-icon-btn--edit { background: var(--brand); color: #000; }
   .assess-icon-btn--edit:hover { background: var(--brand-light); }
   .assess-icon-btn--delete { background: var(--error); }
   .assess-icon-btn--delete:hover { opacity: 0.88; }
   .assess-empty {
       padding: 64px 20px;
       text-align: center;
       color: var(--text-3);
   }
   .assess-empty h3 {
       font-size: 16px;
       font-weight: 700;
       color: var(--text);
       margin: 8px 0 6px;
   }
   .assess-form-card {
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-xl);
       padding: 22px;
   }
   .assess-form-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 16px;
   }
   .assess-form-grid-2 {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 16px;
       margin-top: 16px;
   }
   .assess-form-grid-3 {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 12px;
       margin-bottom: 12px;
   }
   .assess-preview {
       margin-top: 10px;
       height: 64px;
       border-radius: 10px;
       object-fit: cover;
       border: 1px solid var(--border);
   }
   .assess-preview.is-icon {
       width: 48px;
       height: 48px;
   }
   .assess-band-grid {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 16px;
       margin: 16px 0 20px;
   }
   .assess-error {
       font-size: 12px;
       color: var(--error);
       margin-top: 6px;
   }
   .assess-submit {
       width: 100%;
       height: 48px;
       border: none;
       border-radius: var(--radius-btn);
       background: var(--brand);
       color: #000;
       font-size: 15px;
       font-weight: 700;
       cursor: pointer;
       transition: all var(--trans);
   }
   .assess-submit:hover {
       background: var(--brand-light);
       transform: translateY(-1px);
       box-shadow: var(--brand-glow);
   }
   .assess-show-head {
       display: flex;
       align-items: flex-start;
       gap: 16px;
       flex-wrap: wrap;
   }
   .assess-show-head .grow { flex: 1; min-width: 180px; }
   .assess-cover {
       width: 112px;
       height: 80px;
       border-radius: 12px;
       object-fit: cover;
   }
   .assess-icon-lg {
       width: 56px;
       height: 56px;
       border-radius: 12px;
       object-fit: cover;
   }
   .assess-section-title {
       font-size: 15px;
       font-weight: 700;
       margin-bottom: 12px;
       color: var(--text);
   }
   .assess-question {
       padding: 12px 0;
       border-bottom: 1px solid var(--border);
       font-size: 14px;
       color: var(--text-2);
   }
   .assess-question:last-child { border-bottom: none; }
   .assess-question strong { color: var(--text); display: block; margin-bottom: 6px; }
   .tox-tinymce {
       border-radius: 10px !important;
       border-color: var(--input-border) !important;
   }
   html[data-theme="light"] .tox-tinymce,
   html[data-theme="light"] .tox .tox-edit-area,
   html[data-theme="light"] .tox .tox-edit-area__iframe {
       background: #ffffff !important;
   }
   html:not([data-theme="light"]) .tox-tinymce,
   html:not([data-theme="light"]) .tox .tox-edit-area,
   html:not([data-theme="light"]) .tox .tox-edit-area__iframe {
       background: #0b1220 !important;
   }

   @media (max-width: 900px) {
       .assess-form-grid,
       .assess-form-grid-2,
       .assess-band-grid {
           grid-template-columns: 1fr;
       }
   }
   @media (max-width: 768px) {
       .assess-table { min-width: 0; }
       .assess-table thead { display: none; }
       .assess-table,
       .assess-table tbody,
       .assess-table tr,
       .assess-table td {
           display: block;
           width: 100%;
       }
       .assess-table tr {
           padding: 16px;
           border-bottom: 1px solid var(--border);
       }
       .assess-table tbody tr:last-child { border-bottom: none; }
       .assess-table td {
           padding: 0;
           border-bottom: none;
       }
       .assess-table td::before { display: none; }
       .assess-table td[colspan] {
           padding: 0;
       }

       /* Assessments list — card layout (actions top-right, same as questions) */
       .assess-table--assessments tr {
           display: grid;
           grid-template-columns: 56px minmax(0, 1fr) auto;
           grid-template-areas:
               "thumb title actions"
               "desc desc desc"
               "status status status";
           gap: 8px 10px;
           align-items: start;
       }
       .assess-table--assessments td.num { display: none; }
       .assess-table--assessments td[data-label="Image"] {
           grid-area: thumb;
           align-self: start;
       }
       .assess-table--assessments td.assess-title-cell {
           grid-area: title;
           font-size: 15px;
           line-height: 1.35;
           align-self: center;
           padding-right: 8px;
       }
       .assess-table--assessments td[data-label="Status"] {
           grid-area: status;
           justify-self: start;
           align-self: center;
       }
       .assess-table--assessments td[data-label="Description"] {
           grid-area: desc;
       }
       .assess-table--assessments .assess-desc-cell {
           max-width: none;
           text-align: left;
           font-size: 13px;
           line-height: 1.45;
           -webkit-line-clamp: 3;
       }
       .assess-table--assessments td.actions {
           grid-area: actions;
           display: flex;
           width: auto;
           max-width: none;
           justify-content: flex-end;
           align-self: start;
           padding: 0;
           margin: 0;
           border-top: none;
           text-align: right;
       }
       .assess-table--assessments .assess-actions {
           width: auto;
           display: flex;
           align-items: center;
           justify-content: flex-end;
           gap: 6px;
       }
       .assess-table--assessments .assess-actions > a,
       .assess-table--assessments .assess-actions > form {
           flex: none;
           width: auto;
           min-width: 0;
           margin: 0;
       }
       .assess-table--assessments .assess-actions .assess-icon-btn {
           width: 36px;
           height: 36px;
           border-radius: 10px;
       }

       /* Questions list — card with actions top-right */
       .assess-table--questions tr {
           display: grid;
           grid-template-columns: minmax(0, 1fr) auto;
           grid-template-areas:
               "title actions"
               "meta meta";
           gap: 8px 10px;
           align-items: start;
           padding: 16px;
       }
       .assess-table--questions td.assess-title-cell {
           grid-area: title;
           font-size: 14px;
           line-height: 1.45;
           padding-right: 8px;
       }
       .assess-table--questions td[data-label="Assessment"] {
           grid-area: meta;
       }
       .assess-table--questions td.actions {
           grid-area: actions;
           display: flex;
           justify-content: flex-end;
           align-self: start;
           padding: 0;
           margin: 0;
           border-top: none;
       }
       .assess-table--questions .assess-actions {
           gap: 6px;
       }

       .assess-form-card { padding: 16px; }
       .assess-form-grid-3 { grid-template-columns: 1fr; }
   }

   /* ── Insights navbar dropdown ─────────────────────────────── */
   .nav-item-has-dropdown {
       position: relative;
   }
   .nav-dropdown-trigger {
       display: flex;
       align-items: center;
       gap: 6px;
       padding: 7px 14px;
       border-radius: var(--radius-sm);
       font-size: 13px;
       font-weight: 500;
       color: var(--text-2);
       background: transparent;
       border: none;
       cursor: pointer;
       font-family: inherit;
       transition: all var(--trans);
   }
   .nav-dropdown-trigger:hover,
   .nav-dropdown-trigger.active,
   .nav-item-has-dropdown.is-open .nav-dropdown-trigger {
       background: var(--brand-muted);
       color: var(--brand);
   }
   .nav-caret {
       font-size: 10px;
       opacity: 0.75;
   }
   .insights-dropdown {
       position: absolute;
       top: calc(100% + 10px);
       left: 0;
       min-width: 560px;
       padding: 16px;
       border-radius: 16px;
       background: var(--bg-2);
       border: 1px solid var(--border);
       box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
       opacity: 0;
       visibility: hidden;
       transform: translateY(6px);
       transition: all 0.18s ease;
       z-index: 80;
   }
   .nav-item-has-dropdown.is-open .insights-dropdown,
   .nav-item-has-dropdown:hover .insights-dropdown {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }
   .insights-dropdown-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(140px, 1fr));
       gap: 8px 18px;
   }
   .insights-dropdown-col {
       display: flex;
       flex-direction: column;
       gap: 4px;
   }
   .insights-dropdown-link {
       display: flex !important;
       align-items: center;
       gap: 10px;
       padding: 10px 12px !important;
       border-radius: 12px;
       color: var(--text-2) !important;
       font-size: 13px !important;
       font-weight: 500 !important;
       background: transparent !important;
       white-space: nowrap;
   }
   .insights-dropdown-link:hover,
   .insights-dropdown-link.active {
       background: var(--brand-muted) !important;
       color: var(--brand) !important;
   }
   .insights-dropdown-ico {
       width: 22px;
       text-align: center;
       flex-shrink: 0;
   }
   .mobile-nav-group { display: flex; flex-direction: column; }
   .mobile-nav-toggle {
       width: 100%;
       border: none;
       background: transparent;
       text-align: left;
       cursor: pointer;
       font: inherit;
       color: inherit;
   }
   .mobile-nav-sub { padding-left: 28px !important; font-size: 13px; opacity: 0.92; }

   /* ── Insights / Blogs pages ───────────────────────────────── */
   .insights-page { padding-top: var(--nav-h); }
   .insights-page .container {
       width: auto;
       max-width: none;
       margin-left: 80px;
       margin-right: 80px;
       padding-left: 0;
       padding-right: 0;
   }
   .insights-banner {
       position: relative;
       min-height: 280px;
       padding: 56px 0 52px;
       background-color: #0b0d10;
       border-bottom: none;
       overflow: hidden;
       text-align: left;
       isolation: isolate;
       display: flex;
       align-items: center;
   }
   .insights-banner--detail {
       min-height: 260px;
       padding: 52px 0 48px;
   }
   .insights-banner__bg {
       position: absolute;
       inset: 0;
       z-index: 0;
       background-image: url("../images/insights-banner.jpg");
       background-size: cover;
       background-position: center 62%;
       background-repeat: no-repeat;
   }
   .insights-banner__overlay {
       position: absolute;
       inset: 0;
       z-index: 1;
       display: block;
       pointer-events: none;
       /* Darker on the left for text; more transparent toward the right so the photo shows */
       background: linear-gradient(
           90deg,
           rgba(10, 12, 16, 0.72) 0%,
           rgba(10, 12, 16, 0.48) 42%,
           rgba(10, 12, 16, 0.28) 72%,
           rgba(10, 12, 16, 0.18) 100%
       );
   }
   .insights-banner__inner {
       position: relative;
       z-index: 2;
       width: 100%;
       max-width: 920px;
       margin-left: 0;
       margin-right: auto;
       text-align: left;
   }
   .insights-breadcrumb {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       align-items: center;
       justify-content: flex-start;
       font-size: 13px;
       font-family: var(--font-body);
       color: rgba(255, 255, 255, 0.72);
       margin-bottom: 16px;
   }
   .insights-breadcrumb a { color: rgba(255, 255, 255, 0.85); }
   .insights-breadcrumb a:hover { color: var(--brand); }
   .insights-banner__eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 7px 14px;
       border-radius: 8px !important;
       background: rgba(245, 158, 11, 0.92);
       color: #000;
       font-family: var(--font-head);
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       margin-bottom: 14px;
   }
   .insights-banner__title {
       font-family: var(--font-head);
       font-size: clamp(26px, 3.6vw, 42px);
       font-weight: 800;
       line-height: 1.15;
       color: #fff;
       margin: 0 0 12px;
       text-align: left;
       letter-spacing: -0.02em;
   }
   .insights-banner__title--sm {
       font-size: clamp(24px, 3.2vw, 40px);
       max-width: 920px;
   }
   .insights-banner__sub {
       font-family: var(--font-body);
       font-size: 15px;
       line-height: 1.7;
       color: rgba(255, 255, 255, 0.82);
       max-width: 680px;
       margin: 0;
       text-align: left;
   }
   .blog-detail-meta {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       justify-content: flex-start;
       margin-top: 18px;
   }
   .blog-detail-meta span {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 8px 14px;
       border-radius: 8px !important;
       background: rgba(15, 20, 25, 0.55);
       border: 1px solid rgba(255, 255, 255, 0.14);
       color: rgba(255, 255, 255, 0.9);
       font-family: var(--font-body);
       font-size: 13px;
   }
   html[data-theme="light"] .insights-banner__title,
   html[data-theme="light"] .insights-banner__sub,
   html[data-theme="light"] .insights-breadcrumb,
   html[data-theme="light"] .insights-breadcrumb a,
   html[data-theme="light"] .blog-detail-meta span {
       /* Keep banner readable over photo in both themes */
       color: inherit;
   }
   html[data-theme="light"] .insights-banner__title { color: #fff; }
   html[data-theme="light"] .insights-banner__sub { color: rgba(255, 255, 255, 0.82); }
   html[data-theme="light"] .insights-breadcrumb,
   html[data-theme="light"] .insights-breadcrumb a { color: rgba(255, 255, 255, 0.85); }
   html[data-theme="light"] .blog-detail-meta span { color: rgba(255, 255, 255, 0.9); }
   .insights-body {
       padding-top: 40px;
       padding-bottom: 64px;
   }
   .blog-filters {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       margin-bottom: 14px;
       padding-bottom: 18px;
       border-bottom: 1px solid var(--border);
   }
   .blog-filters--inline {
       margin-bottom: 0;
       padding-bottom: 0;
       border-bottom: none;
   }
   .blog-filter-chip {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 10px 16px;
       border-radius: 8px !important;
       border: 1px solid var(--border);
       background: var(--bg-3);
       color: var(--text-2);
       font-family: var(--font-head);
       font-size: 13px;
       font-weight: 600;
       transition: all var(--trans);
       min-height: 40px;
   }
   .blog-filter-chip:hover {
       border-color: var(--brand);
       color: var(--brand);
   }
   .blog-filter-chip.is-active {
       background: var(--brand);
       border-color: var(--brand);
       color: #000;
   }
   .blog-filters-meta {
       font-size: 13px;
       color: var(--text-3);
       margin: 0 0 8px;
   }
   .blog-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 32px;
       margin-top: 24px;
   }
   .blog-card {
       display: flex;
       flex-direction: column;
       border: 1px solid var(--border);
       border-radius: 18px;
       overflow: hidden;
       background: var(--bg-2);
       transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
       color: inherit;
       text-decoration: none;
       height: 100%;
   }
   .blog-card:hover {
       transform: translateY(-3px);
       border-color: rgba(245, 158, 11, 0.45);
       box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
   }
   .blog-card__media {
       position: relative;
       aspect-ratio: 16 / 10;
       background: var(--bg-3);
       overflow: hidden;
   }
   .blog-card__media img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }
   .blog-card__placeholder {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 36px;
       background: rgba(245, 158, 11, 0.08);
   }
   .blog-card__cat {
       position: absolute;
       top: 12px;
       left: 12px;
       padding: 5px 10px;
       border-radius: 8px;
       background: rgba(15, 20, 25, 0.82);
       color: #fff;
       font-family: var(--font-head);
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 0.05em;
       text-transform: uppercase;
   }
   .blog-card__body {
       padding: 18px 18px 20px;
       display: flex;
       flex-direction: column;
       gap: 10px;
       flex: 1;
   }
   .blog-card__title {
       font-family: var(--font-head);
       font-size: 17px;
       font-weight: 750;
       line-height: 1.35;
       color: var(--text);
       margin: 0;
   }
   .blog-card:hover .blog-card__title { color: var(--brand); }
   .blog-card__excerpt {
       font-size: 13px;
       line-height: 1.6;
       color: var(--text-2);
       margin: 0;
       flex: 1;
   }
   .blog-card__meta {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       font-size: 12px;
       color: var(--text-3);
       margin-top: 4px;
   }

   .white-paper-card {
       cursor: default;
   }
   .white-paper-card:hover .blog-card__title {
       color: var(--text);
   }
   .white-paper-card__body {
       gap: 12px;
   }
   .white-paper-download-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       width: 100%;
       margin-top: auto;
       padding: 12px 14px;
       border-radius: 10px;
       background: var(--brand);
       color: #000 !important;
       font-size: 13px;
       font-weight: 700;
       text-decoration: none;
       transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
   }
   .white-paper-download-btn:hover {
       background: var(--brand-light, #fbbf24);
       transform: translateY(-1px);
       box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
   }
   .white-paper-download-btn.is-disabled {
       background: #94a3b8;
       color: #fff !important;
       pointer-events: none;
       opacity: 0.85;
       box-shadow: none;
   }

   .case-study-card {
       cursor: default;
   }
   .case-study-card:hover .blog-card__title {
       color: var(--text);
   }
   .case-study-card__badge {
       position: absolute;
       top: 12px;
       left: 12px;
       z-index: 2;
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 6px 10px;
       border-radius: 8px;
       background: rgba(15, 23, 42, 0.88);
       color: #fff;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.02em;
       text-transform: uppercase;
   }
   .download-centre-card__badge {
       position: absolute;
       top: 12px;
       right: 12px;
       left: auto;
       z-index: 2;
       display: inline-flex;
       align-items: center;
       padding: 6px 10px;
       border-radius: 8px;
       background: var(--brand);
       color: #000;
       font-size: 11px;
       font-weight: 800;
       letter-spacing: 0.04em;
   }
   .case-study-card__body {
       gap: 12px;
   }
   .case-study-view-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       width: 100%;
       margin-top: auto;
       padding: 12px 14px;
       border-radius: 10px;
       background: var(--brand);
       color: #000 !important;
       font-size: 13px;
       font-weight: 700;
       text-decoration: none;
       transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
   }
   .case-study-view-btn:hover {
       background: var(--brand-light, #fbbf24);
       transform: translateY(-1px);
       box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
   }
   .case-study-outcome {
       margin-top: 36px;
       padding: 22px 24px;
       border-radius: 16px;
       background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
       color: #fff;
   }
   .case-study-outcome__label {
       font-size: 12px;
       font-weight: 600;
       opacity: 0.9;
       margin-bottom: 10px;
   }
   .case-study-outcome__body {
       display: flex;
       gap: 12px;
       align-items: flex-start;
   }
   .case-study-outcome__icon {
       font-size: 22px;
       line-height: 1.2;
       flex-shrink: 0;
   }
   .case-study-outcome__content {
       font-size: 16px;
       line-height: 1.55;
       font-weight: 600;
   }
   .case-study-outcome__content p {
       margin: 0 0 0.45em;
       font-weight: 600;
   }
   .case-study-outcome__content p:last-child {
       margin-bottom: 0;
       font-size: 14px;
       font-weight: 500;
       opacity: 0.92;
   }
   .case-study-aside-cta {
       border: 1px solid var(--border);
       border-radius: 18px;
       padding: 22px;
       background: #0f172a;
       color: #fff;
       margin-top: 16px;
   }
   .case-study-aside-cta h3 {
       margin: 0 0 10px;
       font-size: 18px;
       color: #fff;
   }
   .case-study-aside-cta p {
       margin: 0 0 16px;
       font-size: 14px;
       line-height: 1.55;
       color: rgba(255, 255, 255, 0.78);
   }

   .session-filter-bar {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
       margin-bottom: 28px;
   }
   .session-filter-status {
       font-size: 13px;
       color: var(--text-3);
       font-weight: 600;
   }
   .session-card {
       cursor: default;
   }
   .session-card__status {
       position: absolute;
       top: 12px;
       left: 12px;
       z-index: 2;
       padding: 6px 10px;
       border-radius: 8px;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.04em;
   }
   .session-card__status--upcoming {
       background: #16a34a;
       color: #fff;
   }
   .session-card__status--past {
       background: rgba(15, 23, 42, 0.88);
       color: #fff;
   }
   .session-card__date {
       position: absolute;
       top: 12px;
       right: 12px;
       z-index: 2;
       padding: 6px 10px;
       border-radius: 8px;
       background: rgba(15, 23, 42, 0.88);
       color: #fff;
       font-size: 11px;
       font-weight: 700;
   }
   .session-card__type {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 5px 10px;
       border-radius: 999px;
       background: rgba(59, 130, 246, 0.12);
       color: #2563eb;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.03em;
   }
   .session-card__body {
       gap: 10px;
   }
   .session-card__speaker {
       font-size: 13px;
       color: var(--text-3);
   }
   .session-view-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       margin-top: auto;
       padding: 12px 14px;
       border-radius: 10px;
       background: var(--brand);
       color: #000 !important;
       font-size: 13px;
       font-weight: 700;
       text-decoration: none;
       transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
   }
   .session-view-btn:hover {
       background: var(--brand-light, #fbbf24);
       transform: translateY(-1px);
       box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
   }
   .session-detail-meta {
       display: flex;
       flex-wrap: wrap;
       gap: 18px;
       list-style: none;
       margin: 18px 0 0;
       padding: 0;
       color: rgba(255, 255, 255, 0.92);
       font-size: 14px;
   }
   .session-detail-meta li {
       display: inline-flex;
       align-items: center;
       gap: 8px;
   }
   .session-countdown {
       margin-top: 22px;
       padding: 16px 18px;
       border-radius: 14px;
       background: rgba(15, 23, 42, 0.55);
       border: 1px solid rgba(255, 255, 255, 0.12);
       max-width: 520px;
   }
   .session-countdown__label {
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.82);
       margin-bottom: 12px;
   }
   .session-countdown__grid {
       display: grid;
       grid-template-columns: repeat(4, minmax(0, 1fr));
       gap: 10px;
   }
   .session-countdown__grid div {
       text-align: center;
       padding: 10px 8px;
       border-radius: 10px;
       background: rgba(255, 255, 255, 0.08);
   }
   .session-countdown__grid strong {
       display: block;
       font-size: 22px;
       line-height: 1.1;
       color: #fff;
   }
   .session-countdown__grid span {
       display: block;
       margin-top: 4px;
       font-size: 11px;
       color: rgba(255, 255, 255, 0.72);
       text-transform: uppercase;
   }
   .session-content-block {
       margin-bottom: 32px;
       padding: 24px;
       border: 1px solid var(--border);
       border-radius: 18px;
       background: var(--bg-2);
   }
   .session-content-block__head {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 14px;
   }
   .session-content-block__head h2 {
       margin: 0;
       font-size: 20px;
       color: var(--text);
   }
   .session-content-block__icon {
       width: 36px;
       height: 36px;
       border-radius: 999px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: rgba(59, 130, 246, 0.12);
       font-size: 16px;
   }
   .session-speaker-card {
       margin-bottom: 32px;
       padding: 24px;
       border: 1px solid var(--border);
       border-radius: 18px;
       background: var(--bg-2);
   }
   .session-speaker-card__body {
       display: flex;
       gap: 16px;
       align-items: flex-start;
   }
   .session-speaker-card__avatar {
       width: 64px;
       height: 64px;
       border-radius: 999px;
       background: linear-gradient(135deg, #3b82f6, #1d4ed8);
       color: #fff;
       font-size: 24px;
       font-weight: 700;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }
   .session-speaker-card__body h3 {
       margin: 0 0 4px;
       font-size: 18px;
       color: var(--text);
   }
   .session-speaker-card__body p {
       margin: 0 0 6px;
       font-size: 14px;
       color: var(--text-2);
   }
   .session-speaker-card__bio {
       font-size: 13px !important;
       color: var(--text-3) !important;
   }
   .session-faq-list {
       margin: 0;
       padding-left: 1.2em;
       color: var(--text-2);
       line-height: 1.7;
   }
   .session-register-card {
       border: 1px solid var(--border);
       border-radius: 18px;
       padding: 22px;
       background: var(--bg-2);
       margin-bottom: 18px;
   }
   .session-register-card__head {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 8px;
   }
   .session-register-card__head h3 {
       margin: 0;
       font-size: 18px;
       color: var(--text);
   }
   .session-register-card__sub {
       margin: 0 0 16px;
       font-size: 13px;
       color: var(--text-2);
       line-height: 1.55;
   }
   .session-register-form {
       display: grid;
       gap: 12px;
   }
   .session-register-form label {
       display: block;
       font-size: 12px;
       font-weight: 600;
       color: var(--text);
       margin-bottom: 6px;
   }
   .session-register-form input {
       width: 100%;
       border: 1px solid var(--border);
       border-radius: 10px;
       padding: 10px 12px;
       font-size: 14px;
       background: var(--bg);
       color: var(--text);
   }
   .session-register-btn {
       width: 100%;
       margin-top: 4px;
       padding: 12px 14px;
       border: none;
       border-radius: 10px;
       background: var(--brand);
       color: #000;
       font-size: 14px;
       font-weight: 700;
       cursor: pointer;
       transition: background 0.15s ease, transform 0.15s ease;
   }
   .session-register-btn:hover {
       background: var(--brand-light, #fbbf24);
       transform: translateY(-1px);
   }
   .session-register-error {
       margin: 4px 0 0;
       font-size: 12px;
       color: #dc2626;
   }
   .session-register-success {
       padding: 12px 14px;
       border-radius: 10px;
       background: rgba(22, 163, 74, 0.12);
       border: 1px solid rgba(22, 163, 74, 0.35);
       color: #15803d;
       font-size: 13px;
       line-height: 1.55;
   }

   .testimonials-intro {
       display: grid;
       grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
       gap: 28px;
       align-items: end;
       margin-bottom: 34px;
       padding-bottom: 28px;
       border-bottom: 1px solid var(--border);
   }
   .testimonials-intro__eyebrow {
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       color: var(--brand);
       margin-bottom: 10px;
   }
   .testimonials-intro__title {
       margin: 0;
       font-size: clamp(24px, 3vw, 34px);
       line-height: 1.2;
       color: var(--text);
   }
   .testimonials-intro__text {
       margin: 0;
       font-size: 15px;
       line-height: 1.7;
       color: var(--text-2);
   }
   .testimonials-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 24px;
   }
   .testimonial-card {
       position: relative;
       display: flex;
       flex-direction: column;
       min-height: 100%;
       padding: 24px 22px 20px;
       border: 1px solid var(--border);
       border-radius: 18px;
       background: var(--bg-2);
       box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
   }
   .testimonial-card__quote {
       font-size: 48px;
       line-height: 1;
       color: rgba(59, 130, 246, 0.35);
       font-family: Georgia, "Times New Roman", serif;
       margin-bottom: 4px;
   }
   .testimonial-card__stars {
       display: flex;
       gap: 4px;
       margin-bottom: 14px;
       color: var(--brand);
       font-size: 16px;
       letter-spacing: 1px;
   }
   .testimonial-card__message {
       flex: 1;
       font-size: 15px;
       line-height: 1.75;
       color: var(--text-2);
       font-style: italic;
       margin-bottom: 18px;
   }
   .testimonial-card__message p {
       margin: 0;
   }
   .testimonial-card__footer {
       display: flex;
       align-items: center;
       gap: 12px;
       padding-top: 16px;
       border-top: 1px solid var(--border);
       margin-top: auto;
   }
   .testimonial-card__avatar {
       width: 48px;
       height: 48px;
       border-radius: 999px;
       overflow: hidden;
       background: linear-gradient(135deg, #3b82f6, #1d4ed8);
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       flex-shrink: 0;
   }
   .testimonial-card__avatar img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   .testimonial-card__name {
       font-size: 15px;
       font-weight: 700;
       color: var(--text);
       line-height: 1.3;
   }
   .testimonial-card__designation {
       margin-top: 3px;
       font-size: 12px;
       line-height: 1.45;
       color: var(--text-3);
   }

   .podcast-card {
       cursor: default;
   }
   .podcast-card__media {
       position: relative;
       overflow: hidden;
       display: block;
       width: 100%;
       padding: 0;
       border: 0;
       background: transparent;
       cursor: pointer;
       text-align: left;
   }
   .podcast-card__media:focus-visible {
       outline: 2px solid var(--brand);
       outline-offset: 2px;
   }
   .podcast-card__play {
       position: absolute;
       inset: 0;
       margin: auto;
       width: 64px;
       height: 64px;
       border-radius: 999px;
       background: rgba(245, 158, 11, 0.92);
       color: #000;
       font-size: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
       transition: transform 0.15s ease, background 0.15s ease;
       z-index: 2;
       pointer-events: none;
   }
   .podcast-card__media:hover .podcast-card__play {
       transform: scale(1.06);
       background: #fbbf24;
   }
   .podcast-card__badge {
       position: absolute;
       top: 12px;
       left: 12px;
       z-index: 2;
       padding: 6px 10px;
       border-radius: 8px;
       background: rgba(15, 23, 42, 0.88);
       color: #fff;
       font-size: 11px;
       font-weight: 700;
       pointer-events: none;
   }
   .podcast-card__body {
       gap: 12px;
   }
   body.podcast-lightbox-open {
       overflow: hidden;
   }
   .podcast-lightbox {
       position: fixed;
       inset: 0;
       z-index: 1200;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 24px;
   }
   .podcast-lightbox[hidden] {
       display: none !important;
   }
   .podcast-lightbox__backdrop {
       position: absolute;
       inset: 0;
       background: rgba(2, 6, 23, 0.82);
       backdrop-filter: blur(4px);
   }
   .podcast-lightbox__dialog {
       position: relative;
       width: min(960px, 100%);
       max-height: calc(100vh - 48px);
       overflow: auto;
       border-radius: 20px;
       background: var(--bg-2);
       border: 1px solid var(--border);
       box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
       padding: 22px 22px 20px;
       z-index: 1;
   }
   .podcast-lightbox__close {
       position: absolute;
       top: 12px;
       right: 12px;
       width: 38px;
       height: 38px;
       border: none;
       border-radius: 999px;
       background: rgba(15, 23, 42, 0.08);
       color: var(--text);
       font-size: 24px;
       line-height: 1;
       cursor: pointer;
   }
   .podcast-lightbox__close:hover {
       background: rgba(245, 158, 11, 0.18);
   }
   .podcast-lightbox__title {
       margin: 0 42px 16px 0;
       font-size: clamp(20px, 2.4vw, 28px);
       line-height: 1.25;
       color: var(--text);
   }
   .podcast-lightbox__player {
       width: 100%;
       border-radius: 14px;
       overflow: hidden;
       background: #000;
   }
   .podcast-lightbox__player:not(.is-audio) {
       aspect-ratio: 16 / 9;
   }
   .podcast-lightbox__player iframe {
       width: 100%;
       height: 100%;
       border: 0;
       display: block;
   }
   .podcast-lightbox__player.is-audio {
       padding: 28px 24px;
       background: #0f172a;
   }
   .podcast-lightbox__audio {
       width: 100%;
   }
   .podcast-lightbox__external {
       display: inline-flex;
       margin-top: 14px;
       color: var(--brand);
       font-size: 14px;
       font-weight: 600;
       text-decoration: none;
   }
   .podcast-lightbox__external:hover {
       text-decoration: underline;
   }
   .podcast-lightbox__external.is-hidden {
       display: none;
   }
   @media (max-width: 768px) {
       .podcast-lightbox {
           padding: 12px;
       }
       .podcast-lightbox__dialog {
           padding: 18px 16px 16px;
       }
   }
   .podcast-player-wrap {
       margin-bottom: 32px;
   }
   .podcast-player-card {
       padding: 20px 22px;
       border: 1px solid var(--border);
       border-radius: 18px;
       background: var(--bg-2);
   }
   .podcast-player-card__label {
       font-size: 13px;
       font-weight: 700;
       color: var(--text);
       margin-bottom: 12px;
   }
   .podcast-audio-player {
       width: 100%;
   }
   .podcast-youtube-wrap {
       position: relative;
       width: 100%;
       padding-top: 56.25%;
       border-radius: 18px;
       overflow: hidden;
       border: 1px solid var(--border);
       background: #000;
   }
   .podcast-youtube-wrap iframe {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       border: 0;
   }

   .media-library-intro {
       display: grid;
       grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
       gap: 24px;
       align-items: end;
       margin-bottom: 28px;
       padding-bottom: 24px;
       border-bottom: 1px solid var(--border);
   }
   .media-library-intro__eyebrow {
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       color: var(--brand);
       margin-bottom: 10px;
   }
   .media-library-intro__eyebrow::before {
       content: "— ";
   }
   .media-library-intro__title {
       margin: 0;
       font-size: clamp(24px, 3vw, 34px);
       line-height: 1.2;
       color: var(--text);
   }
   .media-library-intro__hint {
       margin: 0;
       font-size: 14px;
       line-height: 1.65;
       color: var(--text-3);
       text-align: right;
   }
   .media-library-filters {
       margin-bottom: 24px;
   }
   .media-library-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 24px;
   }
   .media-library-card {
       display: flex;
       flex-direction: column;
       border: 1px solid var(--border);
       border-radius: 18px;
       overflow: hidden;
       background: var(--bg-2);
       box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
       cursor: pointer;
       transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
   }
   .media-library-card:hover {
       transform: translateY(-2px);
       border-color: rgba(245, 158, 11, 0.35);
       box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
   }
   .media-library-card__thumb {
       position: relative;
       display: block;
       width: 100%;
       padding: 0;
       border: 0;
       aspect-ratio: 16 / 10;
       background: var(--bg-3);
       cursor: pointer;
       overflow: hidden;
   }
   .media-library-card__thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }
   .media-library-card__placeholder {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 36px;
       background: rgba(245, 158, 11, 0.08);
   }
   .media-library-card__badge {
       position: absolute;
       top: 12px;
       left: 12px;
       z-index: 2;
       padding: 6px 10px;
       border-radius: 8px;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.02em;
       pointer-events: none;
   }
   .media-library-card__badge--youtube {
       background: rgba(15, 23, 42, 0.88);
       color: #fff;
   }
   .media-library-card__badge--audio {
       background: rgba(59, 130, 246, 0.92);
       color: #fff;
   }
   .media-library-card__play {
       position: absolute;
       inset: 0;
       margin: auto;
       width: 62px;
       height: 62px;
       border-radius: 999px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
       color: #fff;
       box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
       pointer-events: none;
       z-index: 2;
   }
   .media-library-card__play--youtube {
       background: #dc2626;
   }
   .media-library-card__play--audio {
       background: var(--brand);
       color: #000;
   }
   .media-library-card__body {
       display: flex;
       flex-direction: column;
       gap: 10px;
       padding: 18px 18px 16px;
       flex: 1;
   }
   .media-library-card__title {
       margin: 0;
       font-size: 17px;
       line-height: 1.35;
       font-weight: 700;
       color: var(--text);
   }
   .media-library-card__excerpt {
       margin: 0;
       font-size: 14px;
       line-height: 1.6;
       color: var(--text-2);
       flex: 1;
   }
   .media-library-card__cta {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       margin-top: auto;
       padding: 12px 14px;
       border-radius: 10px;
       font-size: 13px;
       font-weight: 700;
       pointer-events: none;
   }
   .media-library-card__cta--video {
       background: var(--brand);
       color: #000;
   }
   .media-library-card__cta--audio {
       background: rgba(59, 130, 246, 0.14);
       color: #2563eb;
       border: 1px solid rgba(59, 130, 246, 0.28);
   }
   body.media-lightbox-open {
       overflow: hidden;
   }
   .media-lightbox {
       position: fixed;
       inset: 0;
       z-index: 1200;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 24px;
   }
   .media-lightbox[hidden] {
       display: none !important;
   }
   .media-lightbox__backdrop {
       position: absolute;
       inset: 0;
       background: rgba(2, 6, 23, 0.82);
       backdrop-filter: blur(4px);
   }
   .media-lightbox__dialog {
       position: relative;
       width: min(960px, 100%);
       max-height: calc(100vh - 48px);
       overflow: auto;
       border-radius: 20px;
       background: var(--bg-2);
       border: 1px solid var(--border);
       box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
       padding: 22px 22px 20px;
       z-index: 1;
   }
   .media-lightbox__close {
       position: absolute;
       top: 12px;
       right: 12px;
       width: 38px;
       height: 38px;
       border: none;
       border-radius: 999px;
       background: rgba(15, 23, 42, 0.08);
       color: var(--text);
       font-size: 24px;
       line-height: 1;
       cursor: pointer;
   }
   .media-lightbox__title {
       margin: 0 42px 16px 0;
       font-size: clamp(20px, 2.4vw, 28px);
       line-height: 1.25;
       color: var(--text);
   }
   .media-lightbox__player {
       width: 100%;
       border-radius: 14px;
       overflow: hidden;
       background: #000;
   }
   .media-lightbox__player:not(.is-audio) {
       aspect-ratio: 16 / 9;
   }
   .media-lightbox__player iframe {
       width: 100%;
       height: 100%;
       border: 0;
       display: block;
   }
   .media-lightbox__player.is-audio {
       padding: 28px 24px;
       background: #0f172a;
   }
   .media-lightbox__audio {
       width: 100%;
   }
   .media-lightbox__external {
       display: inline-flex;
       margin-top: 14px;
       color: var(--brand);
       font-size: 14px;
       font-weight: 600;
       text-decoration: none;
   }
   .media-lightbox__external.is-hidden {
       display: none;
   }
   @media (max-width: 1024px) {
       .media-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
       .media-library-intro { grid-template-columns: 1fr; }
       .media-library-intro__hint { text-align: left; }
   }
   @media (max-width: 768px) {
       .media-library-grid { grid-template-columns: 1fr; }
       .media-lightbox { padding: 12px; }
   }

   .blog-empty {
       text-align: center;
       padding: 64px 16px;
       color: var(--text-2);
   }
   .blog-empty__icon { font-size: 40px; margin-bottom: 10px; }
   .blog-pagination { margin-top: 36px; }
   .blog-detail-layout {
       display: grid;
       grid-template-columns: minmax(0, 1fr) 360px;
       gap: 48px;
       align-items: start;
   }
   .blog-detail-aside {
       position: sticky;
       top: calc(var(--nav-h) + 24px);
   }
   .blog-detail-hero {
       width: 100%;
       border-radius: 18px;
       object-fit: cover;
       max-height: 480px;
       margin-bottom: 36px;
       border: 1px solid var(--border);
   }
   .prose-blog {
       font-size: 17px;
       line-height: 1.85;
       color: var(--text-2);
   }
   .prose-blog h1, .prose-blog h2, .prose-blog h3, .prose-blog h4 {
       color: var(--text);
       margin: 1.4em 0 0.55em;
       line-height: 1.25;
   }
   .prose-blog p { margin: 0 0 1em; }
   .prose-blog ul, .prose-blog ol { margin: 0 0 1em; padding-left: 1.25em; }
   .prose-blog a { color: var(--brand); }
   .prose-blog img { max-width: 100%; border-radius: 12px; }
   .blog-aside-card,
   .blog-aside-cta {
       border: 1px solid var(--border);
       border-radius: 18px;
       padding: 20px;
       background: var(--bg-2);
       margin-bottom: 18px;
   }
   .blog-aside-card h3,
   .blog-aside-cta h3 {
       margin: 0 0 14px;
       font-size: 16px;
       color: var(--text);
   }
   .blog-aside-item {
       display: flex;
       gap: 12px;
       padding: 12px 0;
       border-bottom: 1px dashed var(--border);
       color: inherit;
       text-decoration: none;
   }
   .blog-aside-item:last-child { border-bottom: none; padding-bottom: 0; }
   .blog-aside-item:first-of-type { padding-top: 0; }
   .blog-aside-thumb {
       width: 56px;
       height: 56px;
       border-radius: 12px;
       overflow: hidden;
       background: var(--bg-3);
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   .blog-aside-thumb img { width: 100%; height: 100%; object-fit: cover; }
   .blog-aside-title {
       font-size: 13px;
       font-weight: 650;
       color: var(--text);
       line-height: 1.35;
       margin-bottom: 4px;
   }
   .blog-aside-item:hover .blog-aside-title { color: var(--brand); }
   .blog-aside-date { font-size: 11px; color: var(--text-3); }
   .blog-aside-cta {
       background: linear-gradient(160deg, rgba(245, 158, 11, 0.16), rgba(15, 20, 25, 0.4));
       border-color: rgba(245, 158, 11, 0.35);
   }
   .blog-aside-cta p {
       font-size: 13px;
       color: var(--text-2);
       line-height: 1.6;
       margin: 0 0 14px;
   }
   @media (max-width: 1024px) {
       .blog-grid { grid-template-columns: repeat(2, 1fr); }
       .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
       .testimonials-intro { grid-template-columns: 1fr; }
       .blog-detail-layout { grid-template-columns: 1fr; }
       .insights-dropdown { min-width: 480px; }
       .insights-page .container {
           margin-left: 40px;
           margin-right: 40px;
       }
   }
   @media (max-width: 768px) {
       .blog-grid { grid-template-columns: 1fr; }
       .testimonials-grid { grid-template-columns: 1fr; }
       .insights-toolbar {
           flex-direction: column;
           align-items: stretch;
       }
       .insights-toolbar--search-only,
       .insights-search-bar--toolbar {
           margin-left: 0;
           justify-content: stretch;
           flex: 1 1 100%;
           max-width: none;
       }
       .insights-search-bar--toolbar .insights-search-bar__field {
           max-width: none;
       }
       .session-filter-bar {
           flex-direction: column;
           align-items: flex-start;
       }
       .insights-banner,
       .insights-banner--detail {
           min-height: 220px;
           padding: 40px 0 36px;
       }
       .insights-page .container {
           margin-left: 20px;
           margin-right: 20px;
       }
       .insights-dropdown { display: none; }
   }

   /* ── Mentor dashboard widgets ─────────────────────────────── */
   .mentor-dash__header {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 16px;
       flex-wrap: nowrap;
   }
   .mentor-dash__header .dash-header__main {
       flex: 1;
       min-width: 0;
   }
   .mentor-dash__header .dash-header__actions {
       flex-shrink: 0;
       align-self: flex-start;
       margin-top: 4px;
   }
   .mentor-dash__subtitle {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-top: 8px;
   }
   .mentor-dash__live-badge {
       letter-spacing: 0.02em;
   }
   .mentor-dash__alert {
       margin-bottom: 20px;
   }
   .mentor-dash__stats {
       margin-bottom: 20px;
   }
   .mentor-dash__stars {
       margin-top: 4px;
       font-size: 12px;
   }
   .mentor-dash__panels {
       display: grid;
       gap: 20px;
       margin-bottom: 20px;
   }
   .mentor-dash__panels--2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .mentor-dash__section {
       margin-bottom: 20px;
   }
   .mentor-dash__card-head {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 12px;
       margin-bottom: 16px;
       flex-wrap: wrap;
   }
   .mentor-dash__card-title {
       font-size: 15px;
       font-weight: 700;
       margin: 0;
   }
   .mentor-dash__card-sub {
       font-size: 12px;
       color: var(--text-2);
       margin: 4px 0 0;
   }
   .mentor-dash__card-link {
       font-size: 12px;
       color: var(--brand);
       white-space: nowrap;
       text-decoration: none;
   }
   .mentor-dash__card-link:hover {
       text-decoration: underline;
   }
   .mentor-dash__wallet-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 12px;
       margin-bottom: 16px;
   }
   .mentor-dash__wallet-stat {
       display: flex;
       flex-direction: column;
       gap: 4px;
   }
   .mentor-dash__wallet-label {
       font-size: 11px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.04em;
       color: var(--text-3);
   }
   .mentor-dash__wallet-value {
       font-size: 20px;
       font-weight: 800;
       color: var(--text);
   }
   .mentor-dash__wallet-value--muted {
       font-size: 16px;
       font-weight: 700;
       color: var(--text-2);
   }
   .mentor-dash__wallet-actions {
       display: flex;
       align-items: center;
       gap: 12px;
       flex-wrap: wrap;
   }
   .mentor-dash__wallet-hint {
       font-size: 12px;
       color: var(--text-3);
   }
   .mentor-dash__agenda {
       list-style: none;
       margin: 0;
       padding: 0;
   }
   .mentor-dash__agenda-item {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       padding: 10px 0;
       border-bottom: 1px solid var(--border);
   }
   .mentor-dash__agenda-item:last-child {
       border-bottom: none;
       padding-bottom: 0;
   }
   .mentor-dash__agenda-main {
       display: flex;
       align-items: flex-start;
       gap: 10px;
       flex: 1;
       min-width: 0;
   }
   .mentor-dash__agenda-type {
       flex-shrink: 0;
       font-size: 16px;
       line-height: 1.2;
   }
   .mentor-dash__agenda-text {
       display: flex;
       flex-direction: column;
       gap: 2px;
       min-width: 0;
   }
   .mentor-dash__agenda-label {
       font-size: 13px;
       font-weight: 600;
       color: var(--text);
       text-decoration: none;
   }
   .mentor-dash__agenda-label:hover {
       color: var(--brand);
   }
   .mentor-dash__agenda-meta {
       font-size: 12px;
       color: var(--text-3);
   }
   .mentor-dash__request-row,
   .mentor-dash__notes-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       padding: 10px 0;
       border-bottom: 1px solid var(--border);
       flex-wrap: wrap;
   }
   .mentor-dash__request-row:last-child,
   .mentor-dash__notes-row:last-child {
       border-bottom: none;
   }
   .mentor-dash__request-name,
   .mentor-dash__notes-title {
       font-weight: 600;
       font-size: 13px;
   }
   .mentor-dash__request-meta,
   .mentor-dash__notes-meta {
       font-size: 12px;
       color: var(--text-3);
   }
   .mentor-dash__request-actions {
       display: flex;
       gap: 8px;
       flex-shrink: 0;
   }
   .mentor-dash__availability-status {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
       margin-bottom: 10px;
   }
   .mentor-dash__availability-dot {
       width: 10px;
       height: 10px;
       border-radius: 50%;
       background: var(--text-3);
       flex-shrink: 0;
   }
   .mentor-dash__availability-dot.is-live {
       background: var(--success);
       box-shadow: 0 0 0 3px var(--success-muted);
   }
   .mentor-dash__availability-next {
       font-size: 13px;
       color: var(--text-2);
       margin: 0;
       line-height: 1.5;
   }
   .mentor-dash__availability-next a {
       color: var(--brand);
   }
   .mentor-dash__progress-row {
       padding: 10px 0;
       border-bottom: 1px solid var(--border);
   }
   .mentor-dash__progress-row:last-child {
       border-bottom: none;
       padding-bottom: 0;
   }
   .mentor-dash__progress-main {
       margin-bottom: 8px;
   }
   .mentor-dash__progress-name {
       font-size: 13px;
       font-weight: 600;
       color: var(--text);
       text-decoration: none;
   }
   .mentor-dash__progress-name:hover {
       color: var(--brand);
   }
   .mentor-dash__progress-track {
       display: block;
       font-size: 11px;
       color: var(--text-3);
       margin-top: 2px;
   }
   .mentor-dash__progress-bar-wrap {
       display: flex;
       align-items: center;
       gap: 10px;
   }
   .mentor-dash__progress-bar {
       flex: 1;
       margin: 0;
   }
   .mentor-dash__progress-pct {
       font-size: 11px;
       font-weight: 700;
       color: var(--text-2);
       min-width: 32px;
       text-align: right;
   }
   .mentor-dash__session-card {
       margin-bottom: 8px;
   }
   .mentor-dash__session-card:last-child {
       margin-bottom: 0;
   }
   .mentor-dash__session-main {
       flex: 1;
       min-width: 0;
   }
   .mentor-dash__session-title {
       font-size: 13px;
       font-weight: 600;
       margin-bottom: 2px;
   }
   .mentor-dash__session-meta {
       font-size: 12px;
       color: var(--text-2);
   }
   .mentor-dash__session-actions {
       display: flex;
       flex-direction: column;
       gap: 6px;
       align-items: flex-end;
       flex-shrink: 0;
   }
   .mentor-dash__review {
       margin-bottom: 12px;
       padding: 14px;
   }
   .mentor-dash__review:last-child {
       margin-bottom: 0;
   }
   .mentor-dash__review-stars {
       font-size: 12px;
   }
   .mentor-dash__review-text {
       font-size: 12px;
       margin: 6px 0 10px;
   }
   .mentor-dash__review-avatar {
       width: 30px;
       height: 30px;
       font-size: 12px;
   }
   .mentor-dash__community-row {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 0;
       border-bottom: 1px solid var(--border);
       text-decoration: none;
       color: inherit;
   }
   .mentor-dash__community-row:last-child {
       border-bottom: none;
   }
   .mentor-dash__community-row:hover .mentor-dash__community-channel {
       color: var(--brand);
   }
   .mentor-dash__community-icon {
       font-size: 18px;
       flex-shrink: 0;
   }
   .mentor-dash__community-main {
       flex: 1;
       min-width: 0;
       display: flex;
       flex-direction: column;
       gap: 2px;
   }
   .mentor-dash__community-channel {
       font-size: 12px;
       font-weight: 700;
       color: var(--text);
   }
   .mentor-dash__community-preview {
       font-size: 12px;
       color: var(--text-3);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   .mentor-dash__community-time {
       font-size: 11px;
       color: var(--text-3);
       flex-shrink: 0;
   }
   .mentor-dash__insight-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 10px;
       margin-bottom: 12px;
   }
   .mentor-dash__insight {
       display: flex;
       flex-direction: column;
       align-items: center;
       padding: 12px 8px;
       background: var(--bg-2);
       border-radius: var(--radius);
       border: 1px solid var(--border);
   }
   .mentor-dash__insight-value {
       font-size: 20px;
       font-weight: 800;
       color: var(--text);
   }
   .mentor-dash__insight-label {
       font-size: 11px;
       color: var(--text-3);
       margin-top: 2px;
   }
   .mentor-dash__insight-hint {
       font-size: 12px;
       color: var(--text-2);
       margin: 0;
   }
   .mentor-dash__insight-hint a {
       color: var(--brand);
   }
   .mentor-dash__empty {
       text-align: center;
       padding: 28px 12px;
   }
   .mentor-dash__empty-icon {
       font-size: 32px;
       line-height: 1;
       margin-bottom: 8px;
   }
   .mentor-dash__empty p {
       font-size: 13px;
       color: var(--text-2);
       margin: 0 0 12px;
   }
   .mentor-dash__profile-pct-wrap {
       display: flex;
       align-items: center;
       gap: 12px;
       flex-wrap: wrap;
   }
   .mentor-dash__profile-pct {
       font-size: 20px;
       font-weight: 800;
       color: var(--brand);
   }
   .mentor-dash__profile-bar {
       margin-bottom: 16px;
   }
   .mentor-dash__checklist {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 8px;
   }
   .mentor-dash__check-item {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
       color: var(--text-3);
   }
       .mentor-dash__check-item.is-done {
           color: var(--text-2);
       }

   /* ── Account profile settings ───────────────────────────── */
   .account-settings-page .dash-content {
       min-width: 0;
       overflow-x: hidden;
   }
   .account-settings-page__alert {
       margin-bottom: 16px;
   }
   .account-settings-page__error-list {
       margin: 0;
       padding-left: 16px;
       font-size: 13px;
   }
   .account-settings-layout {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 16px;
       align-items: start;
       width: 100%;
       min-width: 0;
   }
   .account-settings-card {
       min-width: 0;
   }
   .account-settings-card__title {
       font-size: 15px;
       font-weight: 700;
       margin: 0 0 16px;
   }
   .account-settings-avatar {
       display: flex;
       gap: 16px;
       align-items: center;
       margin-bottom: 18px;
       flex-wrap: wrap;
   }
   .account-settings-avatar__preview {
       width: 72px;
       height: 72px;
       border-radius: 16px;
       overflow: hidden;
       background: var(--brand-muted);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 28px;
       font-weight: 800;
       color: var(--brand);
       flex-shrink: 0;
   }
   .account-settings-avatar__preview img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }
   .account-settings-avatar__form {
       flex: 1;
       min-width: min(100%, 200px);
   }
   .account-settings-avatar__hint {
       margin-top: 6px;
   }
   .account-settings-form .form-group:last-of-type {
       margin-bottom: 20px;
   }
   .account-settings-form__submit {
       white-space: nowrap;
   }
   .account-settings-mentor-link {
       margin-top: 24px;
       padding-top: 18px;
       border-top: 1px solid var(--border);
   }
   .account-settings-mentor-link p {
       font-size: 13px;
       color: var(--text-2);
       margin: 0 0 10px;
   }
   .account-settings-mentor-link__btn {
       white-space: nowrap;
   }
   .account-settings-delete {
       margin-top: 16px;
       border-color: rgba(239, 68, 68, 0.35);
   }
   .account-settings-delete__title {
       font-size: 15px;
       font-weight: 700;
       margin: 0 0 6px;
       color: var(--error);
   }
   .account-settings-delete__text {
       font-size: 13px;
       color: var(--text-2);
       line-height: 1.6;
       margin: 0 0 16px;
   }

   @media (max-width: 900px) {
       .account-settings-layout {
           grid-template-columns: 1fr;
       }
   }
   @media (max-width: 768px) {
       .account-settings-avatar {
           flex-direction: column;
           align-items: flex-start;
           gap: 12px;
       }
       .account-settings-form__submit,
       .account-settings-mentor-link__btn {
           width: 100%;
           justify-content: center;
       }
       .account-settings-delete .btn-danger {
           width: 100%;
           justify-content: center;
       }
   }

   /* ── Mentee assessments list ──────────────────────────────── */
   .mentee-assess-toolbar {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       margin-bottom: 16px;
   }
   .mentee-assess-toolbar__tabs {
       flex: 1 1 auto;
       min-width: 0;
   }
   .mentee-assess-toolbar__search {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       gap: 8px;
       flex: 0 1 auto;
       min-width: 0;
   }
   .mentee-assess-toolbar__field,
   .mentee-assess-toolbar .session-search-field {
       flex: 1 1 200px;
       min-width: 0;
       max-width: 280px;
       width: auto;
   }
   .mentee-assess-toolbar__btn {
       flex-shrink: 0;
       white-space: nowrap;
   }

   /* ── Mentee quizzes list ─────────────────────────────────── */
   .mentee-quiz-toolbar {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       margin-bottom: 16px;
   }
   .mentee-quiz-toolbar__tabs {
       flex: 1 1 auto;
       min-width: 0;
   }
   .mentee-quiz-toolbar__search {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       gap: 8px;
       flex: 1 1 240px;
       min-width: 0;
       max-width: 420px;
   }
   .mentee-quiz-toolbar__field,
   .mentee-quiz-toolbar .session-search-field {
       position: relative;
       flex: 1 1 auto;
       min-width: 0;
       max-width: none;
       width: auto;
   }
   .mentee-quiz-toolbar__btn {
       flex-shrink: 0;
       white-space: nowrap;
   }
   .mentee-quiz-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
       gap: 14px;
   }
   .mentee-quiz-card {
       display: flex;
       flex-direction: column;
       padding: 16px 18px;
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-lg);
       min-width: 0;
   }
   .mentee-quiz-card__top {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 10px;
       margin-bottom: 10px;
   }
   .mentee-quiz-card__icon {
       font-size: 28px;
       line-height: 1;
   }
   .mentee-quiz-card__badges {
       display: flex;
       gap: 6px;
       flex-wrap: wrap;
       justify-content: flex-end;
   }
   .mentee-quiz-card__title {
       font-size: 15px;
       font-weight: 700;
       margin: 0 0 6px;
       line-height: 1.35;
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .mentee-quiz-card__desc {
       font-size: 13px;
       color: var(--text-2);
       margin: 0 0 12px;
       flex: 1;
       line-height: 1.5;
   }
   .mentee-quiz-card__meta {
       display: flex;
       flex-wrap: wrap;
       gap: 6px 10px;
       font-size: 12px;
       color: var(--text-3);
       margin-bottom: 14px;
   }
   .mentee-quiz-card__cta {
       width: 100%;
       justify-content: center;
   }
   .mentee-quiz-empty {
       grid-column: 1 / -1;
       padding: 48px 16px;
   }
   .mentee-quiz-empty__icon {
       font-size: 48px;
       margin-bottom: 12px;
   }
   .mentee-quiz-empty__title {
       font-size: 16px;
       font-weight: 700;
       margin-bottom: 8px;
   }
   .mentee-quiz-empty__text {
       font-size: 13px;
       color: var(--text-2);
       margin: 0;
   }
   .mentee-assess-list {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }
   .mentee-assess-card {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 16px;
       padding: 16px 18px;
       background: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--radius-lg);
       transition: border-color var(--trans), box-shadow var(--trans);
   }
   .mentee-assess-card:hover {
       border-color: var(--border-2);
       box-shadow: var(--shadow);
   }
   .mentee-assess-card__body {
       flex: 1 1 auto;
       min-width: 0;
   }
   .mentee-assess-card__title {
       margin: 0;
       font-size: 15px;
       font-weight: 700;
       line-height: 1.35;
       color: var(--text);
   }
   .mentee-assess-card__desc {
       margin: 6px 0 0;
       font-size: 13px;
       line-height: 1.5;
       color: var(--text-2);
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }
   .mentee-assess-card__meta {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 6px 10px;
       margin-top: 10px;
       font-size: 12px;
       color: var(--text-3);
       line-height: 1.4;
   }
   .mentee-assess-card__status {
       font-weight: 600;
   }
   .mentee-assess-card__status.is-done {
       color: var(--success);
   }
   .mentee-assess-card__status.is-todo {
       color: var(--brand);
   }
   .mentee-assess-card__score {
       color: var(--brand);
       font-weight: 600;
   }
   .mentee-assess-card__cta {
       flex-shrink: 0;
       align-self: center;
       white-space: nowrap;
   }
   @media (max-width: 768px) {
       .mentee-assess-toolbar {
           flex-direction: column;
           align-items: stretch;
           gap: 10px;
       }
       .mentee-assess-toolbar__search {
           width: 100%;
       }
       .mentee-assess-toolbar__field,
       .mentee-assess-toolbar .session-search-field {
           flex: 1 1 auto;
           max-width: none;
           min-width: 0;
       }
       .mentee-quiz-toolbar {
           flex-direction: column;
           align-items: stretch;
           gap: 10px;
           margin-bottom: 14px;
       }
       .mentee-quiz-toolbar__tabs {
           width: 100%;
           overflow-x: auto;
           flex-wrap: nowrap;
           -webkit-overflow-scrolling: touch;
           scrollbar-width: none;
       }
       .mentee-quiz-toolbar__tabs::-webkit-scrollbar {
           display: none;
       }
       .mentee-quiz-toolbar__search {
           width: 100%;
           max-width: none;
           flex: none;
       }
       .mentee-quiz-toolbar__field,
       .mentee-quiz-toolbar .session-search-field {
           flex: 1 1 auto;
           max-width: none;
           min-width: 0;
       }
       .mentee-quiz-toolbar__btn {
           width: auto;
           flex-shrink: 0;
       }
       .mentee-quiz-grid {
           grid-template-columns: 1fr;
           gap: 12px;
       }
       .mentee-quiz-card {
           padding: 14px 16px;
       }
       .mentee-assess-card {
           flex-direction: column;
           align-items: stretch;
           gap: 12px;
           padding: 14px 16px;
       }
       .mentee-assess-card__cta {
           align-self: stretch;
           width: 100%;
           justify-content: center;
       }
   }

   .mentee-assess-submit {
       margin-top: 8px;
       margin-bottom: 8px;
   }
   .mentee-assess-submit__btn {
       min-width: 200px;
   }
   @media (max-width: 768px) {
       .mentee-assess-submit {
           margin-top: 12px;
           margin-bottom: 24px;
       }
       .mentee-assess-submit__btn {
           display: flex;
           width: 100%;
           min-width: 0;
           justify-content: center;
           align-items: center;
           box-sizing: border-box;
       }
   }

   /* ── Mentee dashboard ─────────────────────────────────────── */
   .mentee-dash .dash-content {
       min-width: 0;
       overflow-x: hidden;
   }
   .mentee-dash__header {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 16px;
       flex-wrap: nowrap;
   }
   .mentee-dash__header .dash-header__actions {
       flex-shrink: 0;
       align-self: flex-start;
       margin-top: 4px;
   }
   .mentee-dash__stats {
       margin-bottom: 20px;
   }
   .mentee-dash__stat-link {
       font-size: 11px;
       color: var(--brand);
       text-decoration: none;
   }
   .mentee-dash__stat-link:hover {
       text-decoration: underline;
   }
   .mentee-dash__stat-progress {
       margin-top: 8px;
   }
   .mentee-dash__stat-locked {
       font-size: 16px;
   }
   .mentee-dash__mentor-card {
       margin-bottom: 20px;
   }
   .mentee-dash__card-head {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 12px;
       margin-bottom: 16px;
       flex-wrap: wrap;
   }
   .mentee-dash__card-title {
       font-size: 15px;
       font-weight: 700;
       margin: 0;
   }
   .mentee-dash__card-link {
       font-size: 12px;
       color: var(--brand);
       white-space: nowrap;
       text-decoration: none;
   }
   .mentee-dash__card-link:hover {
       text-decoration: underline;
   }
   .mentee-dash__mentor-row {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 16px;
       flex-wrap: wrap;
   }
   .mentee-dash__mentor-profile {
       display: flex;
       align-items: center;
       gap: 14px;
       text-decoration: none;
       color: inherit;
       flex: 1;
       min-width: min(100%, 220px);
   }
   .mentee-dash__mentor-avatar {
       width: 56px;
       height: 56px;
       border-radius: 16px;
   }
   .mentee-dash__mentor-info {
       min-width: 0;
       flex: 1;
   }
   .mentee-dash__mentor-name {
       font-size: 16px;
       font-weight: 700;
       word-break: break-word;
   }
   .mentee-dash__mentor-role {
       font-size: 13px;
       color: var(--text-2);
       margin-top: 2px;
       word-break: break-word;
   }
   .mentee-dash__mentor-meta {
       font-size: 12px;
       color: var(--text-3);
       margin-top: 6px;
   }
   .mentee-dash__mentor-actions {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
       flex-shrink: 0;
   }
   .mentee-dash__pending {
       margin-top: 18px;
       padding-top: 16px;
       border-top: 1px solid var(--border);
   }
   .mentee-dash__pending-label {
       font-size: 12px;
       font-weight: 700;
       color: var(--text-3);
       text-transform: uppercase;
       letter-spacing: 0.06em;
       margin-bottom: 10px;
   }
   .mentee-dash__pending-row {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 8px 0;
       flex-wrap: wrap;
   }
   .mentee-dash__pending-main {
       flex: 1;
       min-width: 0;
       font-size: 13px;
   }
   .mentee-dash__pending-main span {
       color: var(--text-3);
   }
   .mentee-dash__panels {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 20px;
       margin-bottom: 20px;
   }
   .mentee-dash__panels--2 {
       /* same as panels — explicit hook for responsive */
   }
   .mentee-dash__plan-card {
       min-width: 0;
   }
   .mentee-dash__plan-name {
       font-size: 16px;
       font-weight: 700;
       margin-bottom: 14px;
       word-break: break-word;
   }
   .mentee-dash__plan-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 12px;
   }
   .mentee-dash__plan-stat {
       display: flex;
       flex-direction: column;
       gap: 4px;
       min-width: 0;
   }
   .mentee-dash__plan-label {
       font-size: 11px;
       color: var(--text-3);
       text-transform: uppercase;
       letter-spacing: 0.04em;
   }
   .mentee-dash__plan-value {
       font-size: 18px;
       font-weight: 700;
   }
   .mentee-dash__plan-hint {
       font-size: 12px;
       color: var(--text-3);
       margin: 14px 0 0;
       line-height: 1.45;
   }
   .mentee-dash__agenda {
       list-style: none;
       margin: 0;
       padding: 0;
   }
   .mentee-dash__agenda-item {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       padding: 10px 0;
       border-bottom: 1px solid var(--border);
   }
   .mentee-dash__agenda-item:last-child {
       border-bottom: none;
       padding-bottom: 0;
   }
   .mentee-dash__agenda-main {
       display: flex;
       align-items: flex-start;
       gap: 10px;
       flex: 1;
       min-width: 0;
   }
   .mentee-dash__agenda-type {
       flex-shrink: 0;
       font-size: 18px;
       line-height: 1.2;
   }
   .mentee-dash__agenda-text {
       min-width: 0;
       flex: 1;
   }
   .mentee-dash__agenda-label {
       display: block;
       font-size: 13px;
       font-weight: 600;
       color: inherit;
       text-decoration: none;
       word-break: break-word;
   }
   .mentee-dash__agenda-label:hover {
       color: var(--brand);
   }
   .mentee-dash__agenda-meta {
       display: block;
       font-size: 12px;
       color: var(--text-3);
       margin-top: 2px;
       word-break: break-word;
   }
   .mentee-dash__activity-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       padding: 10px 0;
       border-bottom: 1px solid var(--border);
   }
   .mentee-dash__activity-row:last-child {
       border-bottom: none;
       padding-bottom: 0;
   }
   .mentee-dash__activity-main {
       flex: 1;
       min-width: 0;
   }
   .mentee-dash__activity-title {
       font-size: 13px;
       font-weight: 600;
       word-break: break-word;
   }
   .mentee-dash__activity-meta {
       font-size: 12px;
       color: var(--text-3);
       margin-top: 2px;
   }
   .mentee-dash__community-row {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 0;
       border-bottom: 1px solid var(--border);
       text-decoration: none;
       color: inherit;
   }
   .mentee-dash__community-row:last-child {
       border-bottom: none;
       padding-bottom: 0;
   }
   .mentee-dash__community-row:hover .mentee-dash__community-channel {
       color: var(--brand);
   }
   .mentee-dash__community-icon {
       flex-shrink: 0;
       font-size: 20px;
   }
   .mentee-dash__community-main {
       flex: 1;
       min-width: 0;
       display: flex;
       flex-direction: column;
       gap: 2px;
   }
   .mentee-dash__community-channel {
       font-size: 13px;
       font-weight: 600;
       word-break: break-word;
   }
   .mentee-dash__community-preview {
       font-size: 12px;
       color: var(--text-3);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   .mentee-dash__community-time {
       flex-shrink: 0;
       font-size: 11px;
       color: var(--text-3);
   }
   .mentee-dash__job-row {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 12px;
       padding: 10px 0;
       border-bottom: 1px solid var(--border);
       text-decoration: none;
       color: inherit;
   }
   .mentee-dash__job-row:last-child {
       border-bottom: none;
       padding-bottom: 0;
   }
   .mentee-dash__job-row:hover .mentee-dash__job-title {
       color: var(--brand);
   }
   .mentee-dash__job-main {
       flex: 1;
       min-width: 0;
   }
   .mentee-dash__job-title {
       font-size: 13px;
       font-weight: 600;
       word-break: break-word;
   }
   .mentee-dash__job-meta {
       font-size: 12px;
       color: var(--text-3);
       margin-top: 2px;
       word-break: break-word;
   }
   .mentee-dash__job-salary {
       flex-shrink: 0;
       font-size: 12px;
       font-weight: 600;
       color: var(--text-2);
       white-space: nowrap;
   }
   .mentee-dash__panel {
       min-width: 0;
   }
   .mentee-dash__session-card {
       margin-bottom: 8px;
       flex-wrap: wrap;
   }
   .mentee-dash__session-main {
       flex: 1;
       min-width: min(100%, 180px);
   }
   .mentee-dash__session-title {
       font-size: 13px;
       font-weight: 600;
       margin-bottom: 2px;
       word-break: break-word;
   }
   .mentee-dash__session-meta {
       font-size: 12px;
       color: var(--text-2);
       margin-top: 4px;
       word-break: break-word;
   }
   .mentee-dash__session-meta:first-of-type {
       margin-top: 0;
   }
   .mentee-dash__session-actions {
       display: flex;
       flex-direction: column;
       gap: 6px;
       align-items: flex-end;
       flex-shrink: 0;
   }
   .mentee-dash__journey-head {
       margin-bottom: 16px;
   }
   .mentee-dash__journey-stream {
       font-size: 13px;
       font-weight: 600;
       margin-bottom: 4px;
       word-break: break-word;
   }
   .mentee-dash__journey-week {
       font-size: 12px;
       color: var(--text-2);
       margin-bottom: 8px;
   }
   .mentee-dash__journey-upgrade {
       font-size: 11px;
       color: var(--text-3);
       line-height: 1.45;
       word-break: break-word;
   }
   .mentee-dash__journey-upgrade a {
       color: var(--brand);
   }
   .mentee-dash__task-row {
       display: flex;
       align-items: flex-start;
       gap: 10px;
       padding: 8px 0;
       border-bottom: 1px solid var(--border);
   }
   .mentee-dash__task-row:last-child {
       border-bottom: none;
   }
   .mentee-dash__task-icon {
       font-size: 16px;
       flex-shrink: 0;
       line-height: 1.3;
   }
   .mentee-dash__task-title {
       font-size: 13px;
       word-break: break-word;
       line-height: 1.4;
   }
   .mentee-dash__task-title.is-done {
       text-decoration: line-through;
       color: var(--text-3);
   }
   .mentee-dash__task-empty {
       font-size: 12px;
       color: var(--text-3);
       padding: 8px 0;
   }
   .mentee-dash__mentors-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 16px;
   }
   .mentee-dash__mentor-card-item {
       min-width: 0;
   }
   .mentee-dash__mentor-card-item .mentor-card-name,
   .mentee-dash__mentor-card-item .mentor-card-role {
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       word-break: break-word;
   }
   .mentee-dash__mentor-card-item .mentor-card-actions .btn {
       width: 100%;
       justify-content: center;
   }
   .mentee-dash__empty {
       text-align: center;
       padding: 28px 12px;
   }
   .mentee-dash__empty--compact {
       padding: 32px 12px;
   }
   .mentee-dash__empty-icon {
       font-size: 36px;
       line-height: 1;
       margin-bottom: 8px;
   }
   .mentee-dash__empty p {
       font-size: 13px;
       color: var(--text-2);
       margin: 0 0 12px;
   }

   @media (max-width: 900px) {
       .mentee-dash__panels,
       .mentee-dash__panels--2 {
           grid-template-columns: 1fr;
       }
       .mentee-dash__plan-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
       .mentee-dash__mentors-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   }
   @media (max-width: 768px) {
       .mentee-dash__header .dash-header__actions {
           display: flex;
           width: auto;
           margin-left: auto;
       }
       .mentee-dash__header .dash-header__actions .btn {
           width: auto;
       }
       .mentee-dash__mentor-row {
           flex-direction: column;
           align-items: stretch;
       }
       .mentee-dash__mentor-actions {
           width: 100%;
       }
       .mentee-dash__mentor-actions .btn {
           flex: 1;
           justify-content: center;
       }
       .mentee-dash__session-card {
           flex-direction: column;
           align-items: stretch;
           gap: 12px;
       }
       .mentee-dash__session-actions {
           flex-direction: row;
           justify-content: space-between;
           align-items: center;
           width: 100%;
       }
       .mentee-dash__pending-row {
           flex-direction: column;
           align-items: flex-start;
       }
       .mentee-dash__pending-row form {
           align-self: flex-end;
       }
       .mentee-dash__agenda-item {
           flex-direction: column;
           align-items: stretch;
       }
       .mentee-dash__agenda-item .btn {
           align-self: flex-start;
       }
       .mentee-dash__activity-row {
           flex-direction: column;
           align-items: stretch;
       }
       .mentee-dash__activity-row .btn {
           align-self: flex-start;
       }
       .mentee-dash__job-row {
           flex-direction: column;
           gap: 6px;
       }
   }
   @media (max-width: 540px) {
       .mentee-dash__plan-grid {
           grid-template-columns: 1fr;
       }
       .mentee-dash__mentors-grid {
           grid-template-columns: 1fr;
       }
       .mentee-dash__mentor-actions {
           flex-direction: column;
       }
       .mentee-dash__mentor-actions .btn {
           width: 100%;
       }
   }

   @media (max-width: 900px) {
       .mentor-dash__panels--2 {
           grid-template-columns: 1fr;
       }
       .mentor-dash__wallet-grid {
           grid-template-columns: 1fr;
       }
       .mentor-dash__wallet-stat:first-child {
           padding-bottom: 8px;
           border-bottom: 1px solid var(--border);
       }
   }
   @media (max-width: 480px) {
       .mentor-dash__header {
           align-items: flex-start;
       }
       .mentor-dash__header .dash-header__actions {
           display: flex;
           width: auto;
           margin-left: auto;
           margin-top: 0;
       }
       .mentor-dash__header .dash-header__actions .btn {
           width: auto;
       }
       .mentor-dash__checklist {
           grid-template-columns: 1fr;
       }
       .mentor-dash__agenda-item {
           flex-direction: column;
           align-items: flex-start;
       }
       .mentor-dash__agenda-item .btn {
           align-self: flex-end;
       }
       .mentor-dash__request-actions {
           width: 100%;
           justify-content: flex-end;
       }
   }

   /* ── Mentee journey pages (week / month) ─────────────────── */
   .journey-page .dash-content {
       min-width: 0;
       overflow-x: hidden;
   }
   .journey-page__header {
       margin-bottom: 20px;
   }
   .journey-page__breadcrumbs {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 4px 6px;
       font-size: 12px;
       margin-bottom: 10px;
       line-height: 1.4;
   }
   .journey-page__breadcrumbs a {
       color: var(--brand);
       text-decoration: none;
       word-break: break-word;
   }
   .journey-page__breadcrumbs a:hover {
       text-decoration: underline;
   }
   .journey-page__breadcrumb-sep {
       color: var(--text-3);
       flex-shrink: 0;
   }
   .journey-page__breadcrumb-current {
       color: var(--text-2);
       word-break: break-word;
   }
   .journey-page__title,
   .journey-page__subtitle {
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .journey-page__progress-card {
       margin-bottom: 20px;
   }
   .journey-page__progress-head {
       display: flex;
       justify-content: space-between;
       gap: 12px;
       font-size: 12px;
       color: var(--text-2);
       margin-bottom: 8px;
   }
   .journey-page__alert {
       margin-bottom: 16px;
   }
   .journey-page__alert-body {
       flex: 1;
       min-width: 0;
       font-size: 13px;
       line-height: 1.55;
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .journey-page__alert-body a {
       color: var(--brand);
       font-weight: 600;
       text-decoration: none;
   }
   .journey-page__alert-body a:hover {
       text-decoration: underline;
   }
   .journey-page__section {
       margin-bottom: 20px;
       min-width: 0;
   }
   .journey-page__section--last {
       margin-bottom: 0;
   }
   .journey-page__section-title {
       font-size: 15px;
       font-weight: 700;
       margin: 0 0 16px;
   }
   .journey-page__item-card {
       background: var(--bg-2);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       padding: 14px 16px;
       margin-bottom: 12px;
       min-width: 0;
   }
   .journey-page__item-card:last-child {
       margin-bottom: 0;
   }
   .journey-page__item-row {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 12px;
   }
   .journey-page__item-body {
       flex: 1;
       min-width: 0;
   }
   .journey-page__item-head {
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;
       gap: 8px;
       margin-bottom: 4px;
   }
   .journey-page__item-icon {
       flex-shrink: 0;
       line-height: 1.35;
   }
   .journey-page__item-title {
       flex: 1;
       min-width: 0;
       font-size: 14px;
       font-weight: 700;
       margin: 0;
       line-height: 1.4;
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .journey-page__item-desc {
       font-size: 13px;
       color: var(--text-2);
       line-height: 1.55;
       margin: 0 0 6px;
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .journey-page__item-meta {
       font-size: 11px;
       color: var(--text-3);
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .journey-page__item-action {
       flex-shrink: 0;
       align-self: flex-start;
   }
   .journey-page__mcq-question {
       font-size: 14px;
       font-weight: 700;
       margin: 0 0 12px;
       line-height: 1.45;
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .journey-page__mcq-options {
       display: grid;
       gap: 8px;
       min-width: 0;
   }
   .journey-page__mcq-option {
       display: flex;
       align-items: flex-start;
       justify-content: flex-start;
       gap: 8px;
       width: 100%;
       max-width: 100%;
       min-width: 0;
       padding: 12px 14px;
       text-align: left;
       white-space: normal;
       height: auto;
       line-height: 1.45;
   }
   .journey-page__mcq-option.is-correct {
       border-color: var(--success) !important;
       background: color-mix(in srgb, var(--success) 14%, transparent);
       color: var(--text);
   }
   .journey-page__mcq-option.is-selected {
       border-color: var(--brand) !important;
       background: var(--brand-muted);
   }
   .journey-page__mcq-option-tag {
       margin-left: auto;
       flex-shrink: 0;
       font-size: 10px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: .04em;
       padding: 2px 6px;
       border-radius: 999px;
       background: color-mix(in srgb, var(--success) 18%, transparent);
       color: var(--success);
   }
   .journey-page__mcq-option-tag--selected {
       background: var(--brand-muted);
       color: var(--brand);
   }
   .journey-page__mcq-option-label {
       flex-shrink: 0;
       font-weight: 700;
   }
   .journey-page__mcq-option-text {
       flex: 1;
       min-width: 0;
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .journey-page__mcq-result {
       margin-top: 10px;
       font-size: 13px;
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .journey-page__mcq-result--correct {
       color: var(--success);
       font-weight: 600;
   }
   .journey-page__mcq-result--wrong {
       color: var(--error);
       font-weight: 600;
   }
   .journey-page__mcq-result--neutral {
       color: var(--text-2);
       font-weight: 600;
   }
   .journey-page__mcq-explanation {
       color: var(--text-2);
       margin: 4px 0 0;
       line-height: 1.5;
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .journey-page__mentor-reply {
       font-size: 13px;
       background: var(--bg-2);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       padding: 12px;
       margin-bottom: 14px;
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .journey-page__mentor-reply p {
       margin: 4px 0 0;
       color: var(--text-2);
       line-height: 1.5;
   }
   .journey-page__checkin-btn {
       width: 100%;
   }
   .journey-page__empty {
       font-size: 13px;
       color: var(--text-2);
       margin: 0;
   }
   .journey-page__week-link {
       display: block;
       text-decoration: none;
       color: inherit;
   }
   .journey-page__week-card {
       margin-bottom: 12px;
       padding: 16px 18px;
       min-width: 0;
   }
   .journey-page__week-card:last-child {
       margin-bottom: 0;
   }
   .journey-page__week-row {
       display: flex;
       justify-content: space-between;
       gap: 12px;
       align-items: flex-start;
   }
   .journey-page__week-main {
       flex: 1;
       min-width: 0;
   }
   .journey-page__week-label {
       font-size: 11px;
       color: var(--brand);
       font-weight: 700;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       margin-bottom: 4px;
   }
   .journey-page__week-title {
       font-size: 15px;
       font-weight: 700;
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .journey-page__week-focus {
       font-size: 12px;
       color: var(--text-2);
       margin-top: 4px;
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .journey-page__week-pct {
       flex-shrink: 0;
       font-size: 13px;
       font-weight: 700;
       color: var(--brand);
   }
   .journey-page__week-meta {
       font-size: 11px;
       color: var(--text-3);
       margin-top: 6px;
       overflow-wrap: anywhere;
       word-break: break-word;
   }

   @media (max-width: 768px) {
       .journey-page__item-row {
           flex-direction: column;
           align-items: stretch;
       }
       .journey-page__item-action {
           align-self: flex-start;
           width: auto;
       }
       .journey-page__checkin-btn {
           width: 100%;
       }
   }

   /* ── Mentee journey track switcher ───────────────────────── */
   .mentee-tracks-switcher {
       margin-bottom: 20px;
       padding: 14px 16px;
   }
   .mentee-tracks-switcher__label {
       font-size: 11px;
       font-weight: 700;
       letter-spacing: .06em;
       text-transform: uppercase;
       color: var(--text-3);
       margin-bottom: 12px;
   }
   .mentee-tracks-switcher__list {
       display: flex;
       flex-direction: column;
       gap: 8px;
   }
   .mentee-tracks-switcher__item {
       display: flex;
       align-items: center;
       gap: 12px;
       width: 100%;
       min-width: 0;
       padding: 12px 14px;
       border: 1px solid var(--border);
       border-radius: var(--radius);
       background: var(--bg-2, var(--bg));
       text-decoration: none;
       color: inherit;
       transition: border-color .15s, background .15s, box-shadow .15s;
   }
   .mentee-tracks-switcher__item:hover {
       border-color: rgba(245, 158, 11, .45);
       background: var(--brand-muted, rgba(245, 158, 11, .08));
   }
   .mentee-tracks-switcher__item.is-active {
       border-color: var(--brand);
       background: var(--brand-muted, rgba(245, 158, 11, .14));
       box-shadow: 0 0 0 1px rgba(245, 158, 11, .2);
   }
   .mentee-tracks-switcher__icon {
       flex-shrink: 0;
       width: 36px;
       height: 36px;
       border-radius: 10px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
       font-weight: 800;
       background: var(--bg-3, var(--card-bg));
       border: 1px solid var(--border);
   }
   .mentee-tracks-switcher__item.is-active .mentee-tracks-switcher__icon {
       background: var(--brand);
       border-color: var(--brand);
       color: #111;
   }
   .mentee-tracks-switcher__body {
       flex: 1 1 auto;
       min-width: 0;
       display: flex;
       flex-direction: column;
       gap: 2px;
   }
   .mentee-tracks-switcher__name {
       font-size: 14px;
       font-weight: 700;
       line-height: 1.35;
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   .mentee-tracks-switcher__meta {
       font-size: 12px;
       color: var(--text-3);
   }
   .mentee-tracks-switcher__badge {
       flex-shrink: 0;
       font-size: 11px;
       font-weight: 700;
       padding: 4px 8px;
       border-radius: 999px;
       background: var(--brand);
       color: #111;
       white-space: nowrap;
   }
   .mentee-tracks-switcher__badge--muted {
       background: var(--bg-3, var(--bg));
       color: var(--text-2);
       border: 1px solid var(--border);
   }
   .mentee-journey-hero {
       display: grid;
       grid-template-columns: 1fr;
       gap: 16px;
       margin-bottom: 24px;
   }
   .mentee-journey-hero__title {
       font-size: 24px;
       font-weight: 800;
       font-family: var(--font-head);
       color: #fff;
       margin-bottom: 6px;
       line-height: 1.25;
       overflow-wrap: anywhere;
       word-break: break-word;
   }
   @media (min-width: 640px) {
       .mentee-tracks-switcher__list {
           display: grid;
           grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: 10px;
       }
   }
   @media (min-width: 900px) {
       .mentee-journey-hero--with-stat {
           grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr);
           align-items: stretch;
       }
       .mentee-journey-hero__title {
           font-size: 28px;
       }
   }
   @media (max-width: 480px) {
       .mentee-tracks-switcher {
           padding: 12px;
       }
       .mentee-tracks-switcher__item {
           padding: 12px;
           gap: 10px;
       }
       .mentee-tracks-switcher__icon {
           width: 32px;
           height: 32px;
           border-radius: 8px;
       }
   }

   /* Career Services detail */
   .cs-detail {
       max-width: 640px;
   }
   .cs-detail__back {
       display: inline-flex;
       font-size: 13px;
       font-weight: 600;
       color: var(--brand);
       text-decoration: none;
       margin-bottom: 12px;
   }
   .cs-detail__back:hover {
       color: var(--brand-light);
   }
   .cs-detail__hero {
       display: flex;
       gap: 12px;
       align-items: flex-start;
       margin-bottom: 14px;
   }
   .cs-detail__hero--compact .cs-detail__title {
       font-size: 22px;
   }
   .cs-detail__icon {
       width: 44px;
       height: 44px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       background: var(--brand-muted);
       border: 1px solid rgba(245, 158, 11, 0.28);
       flex-shrink: 0;
   }
   .cs-detail__title {
       margin: 0;
       font-size: 24px;
       font-weight: 800;
       color: var(--text);
       line-height: 1.2;
   }
   .cs-detail__meta-row {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       align-items: center;
       margin-top: 8px;
   }
   .cs-detail__meta {
       font-size: 12px;
       color: var(--text-3);
   }
   .cs-status {
       display: inline-flex;
       align-items: center;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.04em;
       text-transform: uppercase;
       padding: 4px 9px;
       border-radius: 999px;
   }
   .cs-status--warning {
       background: rgba(245, 158, 11, 0.16);
       color: #fbbf24;
   }
   .cs-status--success {
       background: var(--success-muted);
       color: var(--success);
   }
   .cs-status--error {
       background: rgba(239, 68, 68, 0.14);
       color: #f87171;
   }
   .cs-status--muted {
       background: var(--bg-3);
       color: var(--text-3);
   }
   .cs-detail__stack {
       display: grid;
       gap: 12px;
   }
   .cs-panel {
       padding: 16px;
   }
   .cs-panel--tight {
       padding: 14px 16px;
   }
   .cs-panel__head {
       font-size: 13px;
       font-weight: 800;
       margin-bottom: 10px;
       color: var(--text);
   }
   .cs-panel--ready {
       border-color: rgba(34, 197, 94, 0.35);
       background: linear-gradient(160deg, rgba(34, 197, 94, 0.1), transparent 70%);
   }
   .cs-panel--wait {
       border-color: rgba(245, 158, 11, 0.3);
       background: linear-gradient(160deg, rgba(245, 158, 11, 0.08), transparent 70%);
   }
   .cs-panel--error {
       border-color: rgba(239, 68, 68, 0.35);
       display: grid;
       gap: 8px;
   }
   .cs-panel__notes {
       font-size: 13px;
       line-height: 1.5;
       color: var(--text);
       white-space: pre-wrap;
       margin: 0;
   }
   .cs-panel__hint {
       margin: 0;
       font-size: 12px;
       color: var(--text-3);
   }
   .cs-ready {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       align-items: center;
       justify-content: space-between;
   }
   .cs-wait {
       display: flex;
       gap: 12px;
       align-items: flex-start;
   }
   .cs-wait strong {
       display: block;
       margin-bottom: 2px;
   }
   .cs-wait p {
       margin: 0;
       font-size: 13px;
       color: var(--text-2);
       line-height: 1.45;
   }
   .cs-wait__pulse {
       width: 10px;
       height: 10px;
       margin-top: 5px;
       border-radius: 50%;
       background: var(--brand);
       box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
       animation: cs-pulse 1.6s ease-out infinite;
       flex-shrink: 0;
   }
   @keyframes cs-pulse {
       0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
       70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
       100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
   }
   .cs-fields {
       display: grid;
       gap: 12px;
   }
   .cs-fields--compact {
       gap: 10px;
   }
   .cs-field__label {
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.07em;
       text-transform: uppercase;
       color: var(--text-3);
       margin-bottom: 6px;
   }
   .cs-field__body {
       margin: 0;
       font-size: 13px;
       color: var(--text-2);
       white-space: pre-wrap;
       line-height: 1.45;
   }
   .cs-file {
       display: flex;
       gap: 10px;
       align-items: center;
       padding: 10px 12px;
       border-radius: var(--radius);
       border: 1px solid var(--border-2);
       background: var(--bg-3);
       text-decoration: none;
       color: var(--text);
       transition: border-color 0.15s ease, background 0.15s ease;
   }
   .cs-file:hover {
       border-color: var(--brand);
       background: var(--brand-muted);
   }
   .cs-file__icon {
       width: 32px;
       height: 32px;
       border-radius: 8px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: var(--brand-muted);
       color: var(--brand);
       font-size: 13px;
       flex-shrink: 0;
   }
   .cs-file strong {
       display: block;
       font-size: 13px;
   }
   .cs-file small {
       font-size: 11px;
       color: var(--text-3);
   }
   .cs-link {
       color: var(--brand);
       font-size: 13px;
       word-break: break-all;
       line-height: 1.4;
   }
   .cs-chip {
       display: inline-flex;
       padding: 2px 8px;
       border-radius: 999px;
       font-size: 11px;
       font-weight: 700;
       background: var(--brand-muted);
       color: var(--brand);
   }
   @media (max-width: 480px) {
       .cs-detail__title {
           font-size: 20px;
       }
       .cs-ready {
           align-items: stretch;
       }
       .cs-ready .btn {
           width: 100%;
       }
   }