/*
  ============================================================
  FILE        : assets/css/TMT-instructions.css
  PROJECT     : aiGodess NEET Platform
  PURPOSE     : Styles for TMT-instructions.html
  VERSION     : 1.0
  CODE RULES  : Numbered sections · Mobile-first
  ============================================================

  TABLE OF CONTENTS
  1.00  CSS VARIABLES AND RESET
  2.00  PAGE LAYOUT
  3.00  HEADER
  4.00  STATS GRID
  5.00  DUAL CLOCK PREVIEW
  6.00  TADA TABLE
  7.00  BEEP ALERTS
  8.00  INSTRUCTIONS LIST
  9.00  WARNING BOX
  10.00 CATEGORY SELECTOR
  11.00 START BUTTON
  12.00 MOBILE RESPONSIVE
  ============================================================
*/


/* ============================================================
   1.00  CSS VARIABLES AND RESET
   ============================================================ */

:root {
  --bg:        #0d1117;
  --bg2:       #12161e;
  --bg3:       #1a1030;
  --border:    #21262d;
  --border2:   #252d3d;
  --text:      #c9d1d9;
  --text2:     #6e7681;
  --text3:     #f0f6fc;
  --purple:    #7c3aed;
  --purple2:   #8b5cf6;
  --purple3:   #c4b5fd;
  --amber:     #f59e0b;
  --green:     #22c55e;
  --red:       #ef4444;
  --red-text:  #fca5a5;
  --font:      'Sora', sans-serif;
  --mono:      'JetBrains Mono', monospace;
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  min-height: 100vh;
  line-height: 1.5;
}

strong {
  font-weight: 800;
  color: var(--text3);
}


/* ============================================================
   2.00  PAGE LAYOUT
   ============================================================ */

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.container {
  max-width: 800px;
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 16px;
  border-top: 4px solid var(--purple);
  overflow: hidden;
}

.tmt-body {
  padding: 28px 32px;
}


/* ============================================================
   3.00  HEADER
   ============================================================ */

.tmt-hdr {
  background: var(--bg3);
  padding: 28px 32px;
  text-align: center;
}

.tmt-hdr-logo {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 5px;
}

.tmt-hdr-sub {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}


/* ============================================================
   4.00  STATS GRID
   ============================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}

.stat-val {
  font-size: 22px;
  font-weight: 900;
  font-family: var(--mono);
  color: var(--purple);
  line-height: 1.1;
}

.stat-amber { color: var(--amber); }
.stat-green { color: var(--green); }

.stat-lbl {
  font-size: 10px;
  color: var(--text2);
  margin-top: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}


/* ============================================================
   5.00  DUAL CLOCK PREVIEW
   ============================================================ */

.sec-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--purple2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.clocks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}

.clock-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.clock-lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
}

.clock-num {
  font-size: 28px;
  font-weight: 900;
  font-family: var(--mono);
  margin-bottom: 8px;
}

.clock-green { color: var(--green); }

.clock-desc {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.65;
}

/* 5.01 Question timer ring */
.ring-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
}

.ring-wrap svg {
  transform: rotate(-90deg);
  display: block;
}

.ring-track {
  stroke: #1e2535;
  fill: none;
  stroke-width: 5;
}

.ring-fill {
  stroke: var(--purple);
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 164;
  stroke-dashoffset: 41;
}

.ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--purple3);
}


/* ============================================================
   6.00  TADA TABLE
   ============================================================ */

.tada-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 22px;
}

.tada-table th {
  background: var(--bg3);
  color: var(--purple3);
  padding: 9px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border2);
}

.tada-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.tada-table tbody tr:last-child td {
  border-bottom: none;
}

.diff-easy { color: var(--green);  font-weight: 700; }
.diff-med  { color: var(--amber);  font-weight: 700; }
.diff-hard { color: var(--red);    font-weight: 700; }

.tada-secs {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--purple);
}


/* ============================================================
   7.00  BEEP ALERTS
   ============================================================ */

.beeps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}

.beep-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.beep-ico {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.beep-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 4px;
}

.beep-desc {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.55;
}


/* ============================================================
   8.00  INSTRUCTIONS LIST
   ============================================================ */

.instr-list {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}

.instr-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}

.instr-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.instr-ico {
  font-size: 15px;
  flex-shrink: 0;
  width: 22px;
  margin-top: 1px;
}


/* ============================================================
   9.00  WARNING BOX
   ============================================================ */

.warning-box {
  background: rgba(239,68,68,.07);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--red-text);
  line-height: 1.7;
}


/* ============================================================
   10.00 CATEGORY SELECTOR
   ============================================================ */

.cat-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--purple2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

.cat-select {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid #30363d;
  border-radius: 9px;
  color: var(--text3);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  outline: none;
  margin-bottom: 6px;
  transition: border-color .18s;
}

.cat-select:focus {
  border-color: var(--purple);
}

.cat-hint {
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 20px;
  line-height: 1.5;
}


/* ============================================================
   11.00 START BUTTON
   ============================================================ */

.start-btn {
  width: 100%;
  padding: 17px;
  background: linear-gradient(135deg, #6d28d9, #7c3aed, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--font);
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(124,58,237,.35);
  padding-bottom: 17px;
}

.start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(124,58,237,.5);
}

.start-btn:active {
  transform: translateY(0);
}

.start-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}


/* ============================================================
   12.00 MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
  .tmt-body         { padding: 20px 18px; }
  .stats-grid       { grid-template-columns: repeat(2, 1fr); }
  .clocks-grid      { grid-template-columns: 1fr; }
  .beeps-grid       { grid-template-columns: 1fr; }
  .tmt-hdr-logo     { font-size: 20px; }
  .clock-num        { font-size: 22px; }
  .tada-table       { font-size: 12px; }
  .tada-table th,
  .tada-table td    { padding: 8px 10px; }
  body              { padding: 12px; }
}