/* Typography reverted: Inter for UI/body, Poppins for headings; Lexend only in a11y mode */
        :root{
            --font-ui: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
            --font-head: 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
            --font-a11y: 'Lexend', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

            --bg: #f8f9fb;          /* soft off-white */
            --bg-2: #f4f6f8;        /* deeper off-white */
            --surface: #ffffff;     /* pure white cards */
            --surface-2: #0f2032;   /* dark sidebar */
            --text: #1a202c;        /* dark text */
            --muted: #4a5568;       /* muted gray */
            --primary: #1e5aa4;     /* Oxford blue */
            --primary-600:#174a7e;  
            --accent: #00b3b8;      /* turquoise */
            --accent-600:#00959a;
            --ring: rgba(0,179,184,0.25);
            --shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
            --radius: 14px;
            --trans-fast: .15s;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; }
        body {
            font-family: var(--font-ui);
            -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
            background:
                radial-gradient(1200px 600px at 20% -10%, rgba(0,179,184,0.03) 0%, transparent 60%),
                radial-gradient(900px 500px at 120% 20%, rgba(30,90,164,0.05) 0%, transparent 55%),
                linear-gradient(180deg, var(--bg), var(--bg-2));
            color: var(--text);
            line-height: 1.7;
            min-height: 100vh;
        }

        .container { display: flex; min-height: 100vh; }

        /* Sidebar */
        .sidebar {
            width: 225px;
            background: linear-gradient(180deg, var(--surface-2) 0%, #0c1b2d 100%);
            padding: 2rem 1.5rem;
            border-right: 1px solid rgba(255,255,255,0.06);
            box-shadow: 2px 0 24px rgba(0, 0, 0, 0.25);
        }
        .logo {
            font-family: var(--font-head) !important;
            font-size: 1.9rem;
            font-weight: 800;
            letter-spacing: -0.4px;
            margin-bottom: 1.2rem;
            background: linear-gradient(90deg, var(--accent), var(--primary));
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }

        /* Accessibility toggle */
        .a11y-panel{ display:flex; align-items:center; gap:.75rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding:.85rem 1rem; margin-bottom:1.2rem; border-radius: var(--radius); }
        .switch{ position: relative; display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; user-select:none; }
        .switch input{ position:absolute; opacity:0; pointer-events:none; }
        .slider{ width:44px; height:24px; background: rgba(255,255,255,0.15); border-radius:999px; position:relative; transition: background var(--trans-fast); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
        .slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; border-radius:50%; background:#fff; transition: transform var(--trans-fast); }
        .switch input:checked + .slider{ background: linear-gradient(135deg, var(--accent), var(--primary)); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
        .switch input:checked + .slider::before{ transform: translateX(20px); }
        .switch-text{ color: #f0f6ff; font-weight: 800; font-size:.95rem; }

        .nav-button { display: block; width: 100%; text-align: left; cursor: pointer; padding: 0.95rem 1.1rem; margin-bottom: 0.9rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); font-size: 1.02rem; font-weight: 700; color: #e6eef8; transition: transform var(--trans-fast), box-shadow .2s ease, border-color .2s ease, background .2s ease; }
        .nav-button:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: var(--shadow); background: rgba(255,255,255,0.06); }
        .nav-button:focus { outline: 3px solid var(--ring); outline-offset: 2px; }
        .nav-button.active { color: #07131f; background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); border-color: transparent; box-shadow: 0 10px 24px rgba(0, 179, 184, 0.28); }

        /* Main */
        .main-content { flex: 1; padding: .5rem .5rem; }
        .welcome-section { max-width: 980px; }
        .welcome-title { font-family: var(--font-head) !important; font-size: 2.5rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.6rem; color: #1a202c; }
        .welcome-subtitle { font-size: 1.05rem; color: var(--muted); margin-bottom: 2.2rem; font-weight: 600; }

        /* Stats */
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2.6rem; }
        .stat-card { position: relative; background: var(--surface); padding: 1.6rem 1.6rem 1.4rem; border-radius: var(--radius); border: 1px solid rgba(0,0,0,0.06); box-shadow: var(--shadow); overflow: hidden; }
        .stat-card::before{ content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--accent), var(--primary)); opacity: 0.9; }
        .stat-number { font-family: var(--font-head) !important; font-size: 2rem; font-weight: 800; color: var(--accent); margin: 0.2rem 0 0.4rem; }
        .stat-label { font-size: .95rem; color: var(--muted); font-weight: 700; letter-spacing: .15px; }

        /* Quick actions */
.section-title { font-family: var(--font-head) !important; font-size: 1.35rem; font-weight: 800; color: #FFFFFF; margin-bottom: 1rem; }
.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.action-card { position: relative; background: var(--surface); padding: 1.6rem; border-radius: var(--radius); border: 1px solid rgba(0,0,0,0.06); box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; cursor: pointer; }
.action-card::after{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: var(--radius) 0 0 var(--radius); background: linear-gradient(180deg, var(--primary), var(--accent)); opacity: .9; }
.action-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 18px 34px rgba(0,0,0,0.12); background: #f9fafb; }
.action-card:focus { outline: 3px solid var(--ring); outline-offset: 3px; }
.action-title { font-family: var(--font-head) !important; font-size: 1.1rem; font-weight: 800; color: #1a202c; margin-bottom: 0.35rem; }
.action-description { font-size: 1rem; color: var(--muted); line-height: 1.55; font-weight: 600; }

/* ---- Auth / Sign-in ---- */
.skip-link{ position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus{ position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; padding: .6rem .9rem; background: var(--accent); color: #07131f; border-radius: .5rem; box-shadow: var(--shadow); z-index: 1000; }

.sidebar-benefits ul{ list-style: none; margin-top: .75rem; }
.sidebar-benefits li{ color: #cfe7ff; opacity:.92; font-weight: 700; margin: .6rem 0; }
.sidebar-benefits strong{ color: #fff; }

.auth-main{ display:grid; place-items:center; padding: 3rem 1.5rem; }
.auth-full{ display:grid; padding: .5rem .5rem; }
.auth-wrap{ width: 100%; max-width: 520px; }
.auth-header{ margin-bottom: 1rem; }

.auth-card{ background: var(--surface); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem; }
.form-row{ margin-bottom: 1rem; }
.label-row{ display:flex; justify-content: space-between; align-items: baseline; }
label{ font-weight: 800; color: #1a202c; display:block; margin-bottom: .4rem; }
input[type="email"], input[type="password"]{ width: 100%; padding: .9rem 1rem; border-radius: 12px; border: 1px solid rgba(0,0,0,0.12); background: #fff; font-size: 1rem; transition: box-shadow var(--trans-fast), border-color var(--trans-fast); }
input[type="email"]:focus, input[type="password"]:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.hint{ font-size: .9rem; color: var(--muted); }
.row-between{ display:flex; justify-content: space-between; align-items:center; margin-top: .6rem; }
.checkbox{ display:flex; align-items:center; gap: .5rem; font-weight: 600; color: var(--muted); }

.btn-primary{ display:block; width:100%; border: none; border-radius: 12px; padding: .95rem 1rem; font-weight: 800; font-size: 1rem; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--primary)); color: #07131f; box-shadow: 0 12px 22px rgba(0, 179, 184, 0.24); transition: transform .1s ease, box-shadow .2s ease; }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 16px 28px rgba(0, 179, 184, 0.3); }

.btn-ghost{ width:100%; border: 1px solid rgba(0,0,0,0.12); background: #fff; padding: .85rem 1rem; border-radius: 12px; font-weight: 700; display:flex; align-items:center; justify-content:center; gap:.6rem; cursor:pointer; }
.btn-icon{ width: 1.2rem; height: 1.2rem; display:inline-flex; align-items:center; justify-content:center; }
.link-button{ appearance: none; border: none; background: none; font-weight: 800; color: var(--primary); cursor: pointer; }
.link-button:focus{ outline: 3px solid var(--ring); outline-offset: 2px; }

.divider{ position: relative; margin: 1.2rem 0; height: 1px; background: rgba(0,0,0,0.08); }
.divider::before{ content: "or"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 .5rem; background: var(--surface); color: var(--muted); font-weight: 700; }

.sso-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .4rem; }
.small-text{ font-size: .95rem; color: var(--muted); text-align:center; margin-top: .8rem; }
.muted-link{ color: var(--primary); font-weight: 800; text-decoration: none; }
.muted-link:hover{ text-decoration: underline; }
.score {
      font-size: 1.5em;
      text-align: center;
      margin: 20px 0;
    }
      /* Overlay background */
    .overlay {
      display: none; /* hidden by default */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    /* Help box */
    .overlay-content {
      background: #fff;
      padding: 30px;
      border-radius: 10px;
      width: 80%;
      max-width: 500px;
      text-align: left;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }

    .overlay-content h2 {
      margin-top: 0;
    }

    .close-btn {
      margin-top: 20px;
      padding: 8px 16px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .close-btn:hover {
      background: #0056b3;
    }

    .cat_button {
        background: linear-gradient(135deg, #00b3b8, #1e5aa4);
        color: white;
        border: none;
        padding: 15px 25px;
        border-radius: 25px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        font-family: 'Nunito Sans', sans-serif;
        display: block;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }

    th, td {
      padding: 2px;
      border-bottom: 1px solid #ddd;
      text-align: center;
    }

    th {
      background-color: #e9ecef;
    }

    .correct {
      color: green;
      font-weight: bold;
    }

    .incorrect {
      color: red;
      font-weight: bold;
    }

    a {
      color: #007bff;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    /* The calculator popup */
  #calculator {
    display: none;
    position: fixed;
    top: 100px;
    left: 100px;
    width: 240px;
    background: #f8f8f8;
    border: 2px solid #555;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 9999;
  }

  /* Draggable header */
  #calcHeader {
    background: #007BFF;
    color: white;
    padding: 8px;
    cursor: move;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  #calcDisplay {
    width: 90%;
    margin: 10px;
    padding: 5px;
    font-size: 1.2em;
    text-align: right;
  }
   #display {
    width: 90%;
    margin: 10px;
    padding: 5px;
    font-size: 1.2em;
    text-align: right;
  }
  #memory-indicator {
    position: absolute;
    left: 8px;
    top: 50px;
    font-size: 14px;
    color: #080;
    visibility: hidden;
  }

  .calc-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 10px;
  }

  .calc-buttons button {
    padding: 10px;
    font-size: 0.8em;
    cursor: pointer;
  }

  #closeCalc {
    float: right;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
  }

  
	.trainer-card {
  	background: var(--surface);
  	border-radius: var(--radius);
  	box-shadow: var(--shadow);
  	padding: 2rem;
  	max-width: 700px;
  	width:100%;
	}

	.hud {display:flex; justify-content:space-between; margin-bottom:2rem; font-weight:600;}

	.problem {font-size:2.5rem; font-family: var(--font-head); text-align:center; margin-bottom:1.5rem;}

	.answer-input {
  	width:100%;
  	font-size:1.5rem;
  	padding:0.8rem 1rem;
  	border-radius: var(--radius);
  	border:2px solid #ccc;
  	margin-bottom:1.5rem;
  	text-align:center;
	}

	.keypad {display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem;}
	.keypad button {
  	padding:1rem;
  	font-size:1.2rem;
  	border:none;
  	border-radius: var(--radius);
  	background:#f4f6f8;
  	cursor:pointer;
  	transition: background .2s;
	}
	.keypad button:hover {background:#e2e8f0;}

	.submit-btn {
  	width:100%;
  	background: linear-gradient(135deg, var(--accent), var(--primary));
  	color:white;
  	border:none;
  	border-radius: var(--radius);
  	font-size:1.2rem;
  	font-weight:700;
  	padding:1rem;
  	cursor:pointer;
	}


/* A11y mode: Lexend for readability */
        body.a11y-on, body.a11y-on * { font-family: var(--font-a11y) !important; }
        body.a11y-on{ font-size: 1.05em; line-height: 1.9; }
        body.a11y-on *:focus{ outline: 3px solid #79e2e5 !important; outline-offset: 4px !important; }
        body.a11y-on .nav-button:hover, body.a11y-on .action-card:hover{ transform: none !important; }
        body.a11y-on .nav-button, body.a11y-on .action-card{ transition: none !important; }

        @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation: none !important; transition: none !important; } }
        @media (max-width: 1024px){ .main-content{ padding: 2.2rem 1.6rem; } }
        @media (max-width: 768px){ .container{ flex-direction: column; } .sidebar{ width:100%; padding:1.25rem 1rem; } .welcome-title{ font-size:2.1rem; } }

        /* Force headings to heading font */
        h1, h2, h3, h4, h5, h6,
        .welcome-title, .section-title, .stat-number, .action-title { font-family: var(--font-head) !important; }