/* GCSE Exam Prep – minimal responsive styling */
:root {
  --bg-color: #f8f9fc;
  --text-color: #111;
  --header-bg: #fff;
  --header-border: #e5e7eb;
  --nav-link: #4b5563;
  --hero-gradient: url("https://aisolutionforyou.com/wp-content/uploads/2025/07/Hero-Doodle.jpg") center/cover no-repeat;
  --hero-text-color: #1E5AA8;
  --hero-paragraph: #374151;
  --cta-bg: #F9A72C;
  --tile-bg: #fff;
  --tile-heading: #1E5AA8;
  --future-gradient: linear-gradient(to right, #fdf6e3, #fff3cd);
  --future-heading: #1E5AA8;
  --future-text: #374151;
  --footer-color: #6b7280;
  --footer-bg: #f1f5f9;
}

.dark-mode {
  --bg-color: #1b1b1b;
  --text-color: #f1f5f9;
  --header-bg: #111;
  --header-border: #333;
  --nav-link: #9ca3af;
  --hero-gradient: url("https://aisolutionforyou.com/wp-content/uploads/2025/07/Hero-Doodle.jpg") center/cover no-repeat;
  --hero-text-color: #93c5fd;
  --hero-paragraph: #d1d5db;
  --cta-bg: #f59e0b;
  --tile-bg: #2d2d2d;
  --tile-heading: #93c5fd;
  --future-gradient: linear-gradient(to right, #333236, #3b3b3d);
  --future-heading: #93c5fd;
  --future-text: #d1d5db;
  --footer-color: #d1d5db;
  --footer-bg: #111;
}

.gcse-container           {
  width: 92%;
  max-width: 480px;
  margin: 20px auto;
  padding: 20px;
  background-image: linear-gradient(135deg, #dbeafe, #93c5fd);
  border-radius: 8px;
  border: 6px solid;
  border-image: linear-gradient(90deg,#60a5fa,#1e40af) 1;
}
.gcse-chat-container { max-width: 700px; }
.gcse-pdf-summary { max-width: 800px; }
.gcse-summary-output {
  white-space: pre-wrap;
  background: #fff;
  overflow: auto;
  padding: 10px;
  border: 1px solid #ccc;
}
.gcse-container label     { display: block; margin-bottom: 6px; font-weight: 600; }
.gcse-container input,
.gcse-container select    { width: 100%; padding: 10px; margin-bottom: 15px;
                             font-size: 16px; box-sizing: border-box; }
.gcse-chat-box { border:2px solid; border-image: linear-gradient(90deg,#60a5fa,#1e40af) 1; }
.gcse-chat-history-container { margin-top: 15px; }
.gcse-chat-history {
  max-height: 200px;
  overflow-x: auto;
  overflow-y: auto;
  background: #fff;
  padding: 10px;
  border: 1px solid #ccc;
}
.gcse-container input[type="checkbox"] { width: auto; margin-right: 6px; }
.gcse-container button    { width: 100%; padding: 12px; background:#0073aa;
                             color:#fff; border:none; font-size:16px; cursor:pointer; }
.gcse-container button:hover { background:#005f8d; }
.submit-answer-container {
  padding: 20px;
  background-image: linear-gradient(135deg, #93c5fd, #3b82f6);
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
}

/* Ensure all text elements inside the answer form are white and bold */
.submit-answer-container label,
.submit-answer-container p,
.submit-answer-container a,
.submit-answer-container input,
.submit-answer-container select,
.submit-answer-container button {
  color: #fff;
  font-weight: bold;
}
#gcse-test-id,
#gcse-test-id option {
  color: #000;
  font-weight: bold;
}

.submit-answer-container .gcse-tip {
  color: #fff;
}
.submit-answer-container .gcse-processing-text {
  color: #c00 !important;
  font-weight: bold !important;
}
.gcse-tip { font-size: 0.9em; color: #555; margin-top: -5px; margin-bottom: 15px; }
.gcse-error { background:#fed7d7; border:1px solid #f56565; padding:10px; margin-bottom:15px; }
.gcse-success { background:#e6ffed; border:1px solid #38a169; padding:10px; margin-bottom:15px; 
.gcse-mode label          { display: block; margin-bottom: 8px; font-weight: 500; }

/* QuizCam question type selector */
#gcse-scan-form fieldset {
  border: none;
  padding: 0;
  margin-bottom: 15px;
  display: flex;
  gap: 0.5rem;
}

#gcse-scan-form fieldset label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f8f9fc;
  cursor: pointer;
}

#gcse-scan-form fieldset label.qa-option {
  background-color: #d1fae5; /* light green */
}

#gcse-scan-form fieldset label.qa-option input[type="radio"] {
  accent-color: #38a169; /* green */
}

#gcse-scan-form fieldset label.mcq-option {
  background-color: #ebf8ff; /* light blue */
}

#gcse-scan-form fieldset label.mcq-option input[type="radio"] {
  accent-color: #3182ce; /* blue */
}

#gcse-scan-form fieldset label.qa-option.selected {
  background-color: #a7f3d0; /* slightly darker green */
  border-color: #38a169;
}

#gcse-scan-form fieldset label.mcq-option.selected {
  background-color: #bee3f8; /* slightly darker blue */
  border-color: #3182ce;
}

#gcse-scan-form fieldset input[type="radio"] {
  margin-right: 0.5rem;
}
.gcse-summary            { width: 100%; border-collapse: collapse; margin-top: 20px; }
.gcse-summary th,
.gcse-summary td         { border: 1px solid #ccc; padding: 8px; text-align: left; }
.gcse-thumb             { width: 80px; height: auto; margin-right: 6px; vertical-align: middle; }
.gcse-chart              {
  display: block;
  width: 100%;
  max-width: none;
  height: 400px;
  margin: 20px auto;
}
  body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
  }
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .logo {
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--hero-text-color);
  }
nav a {
  margin-left: 1.5rem;
  color: var(--nav-link);
  text-decoration: none;
  font-weight: 500;
}
.beta-banner {
  background-color: #FFEDD5;
  color: #B45309;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}
.dark-mode .beta-banner {
  background-color: #333236;
  color: #F9A72C;
}
.hero {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 4rem 1.5rem;
  background: var(--hero-gradient);
  position: relative;
}
.hero h1 {
  font: 800 2.5rem 'Poppins', sans-serif;
  color: #102A78;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.hero h1 span { color:#FF6F61; }
.hero p {
  font-size: 1.25rem;
  color:#374151;
  margin:1rem 0 2rem;
}
.hero .cta-button {
  display:inline-block;
  background-image: linear-gradient(90deg, #3b82f6, #1e40af);
  color:#fff;
  padding:1rem 2rem;
  border:none;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
}
.btn-primary {
  background:#7CFF6B;
  color:#101010;
  padding:1rem 1.8rem;
  border-radius:8px;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 4px 14px rgba(0,0,0,0.2);}
.main-illus{width:300px;}
.doodle{position:absolute;animation:bob 4s ease-in-out infinite;opacity:.9;}
.doodle.pencil{top:10%;left:40%;width:40px;transform:rotate(-20deg);}
.doodle.bolt{bottom:15%;right:25%;width:36px;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.hero-left{flex:1;}
.hero-right{flex:1;position:relative;}
  .grid-section {
    max-width: 1100px;
    margin: 4rem auto;
    padding: 1rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .tile-item {
    display: flex;
    flex-direction: column;
  }
  .tile-item p {
    margin-top: .75rem;
    line-height: 1.5;
    color: #000;
  }
  .grid-tile {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    color: var(--tile-heading);
    display: flex;
    align-items: center;
    padding: 1.8rem;
    font-family: 'Poppins', sans-serif;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
  }
  .grid-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
  }
  .grid-tile h3 {
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,.25);
    color: #fff;
  }
  .tile-item:nth-child(4n+1) .grid-tile{
    background-image:linear-gradient(135deg,#f8b4ff 0%,#b1c5ff 100%);
    color:#fff;
  }
  .tile-item:nth-child(4n+2) .grid-tile{background-image:linear-gradient(135deg,#ff1f8f 0%,#4d1aff 100%); color:#fff;}
  .tile-item:nth-child(4n+3) .grid-tile{background-image:linear-gradient(135deg,#18c964 0%,#007cf0 100%); color:#fff;}
  .tile-item:nth-child(4n+4) .grid-tile{
    background-image:linear-gradient(135deg,#ffc233 0%,#ff5630 100%);
    color:#fff;
  }
  .grid-tile::before{
    content:'';
    position:absolute;inset:0;
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGNk+M/wHwAFSQJ/t7UcTAAAAABJRU5ErkJggg==");
    opacity:.25;
    mix-blend-mode:overlay;
    pointer-events:none;
  }

  /* Modern steps layout for revision hub */
  .revision-wrap {
    background: #f5f7ff;
    padding: 4rem 1.5rem;
    border-radius: 1rem;
    margin: 2rem auto;
    max-width: 1200px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
  }
  .revision-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: center;
  }
  .revision-text {
    flex: 1 1 340px;
  }
  .revision-text h2 {
    font-size: 2rem;
    margin-bottom: .75rem;
  }
  .revision-text .lead {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 1.75rem;
    color: #475569;
  }
  .benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    font-size: 1rem;
    color: #475569;
  }
  .benefits li {
    margin-bottom: 0.5rem;
  }
  .revision-cta {
    display: inline-block;
    background: #0a5bff;
    color: #fff;
    padding: .9rem 1.8rem;
    border-radius: .5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background .2s;
  }
  .revision-cta:hover { background: #004adc; }
  .revision-cards {
    flex: 1 1 420px;
    background: #fff;
    border: 2px solid;
    border-image: linear-gradient(45deg, #6EE7B7, #3B82F6) 1;
    border-radius: 1.25rem;
    padding: 2rem;
  }
  .cards-title {
    text-align: center;
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: #334155;
  }
  .cards-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .card {
    background: #fdfdfd;
    border: 1px solid #e2e8f0;
    border-radius: .875rem;
    padding: 1.25rem;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  }
  .card-icon {
    font-size: 2rem;
    margin-bottom: .5rem;
  }
  .card h4 { margin: .25rem 0 .5rem; font-size: 1.05rem; }
  .card p { font-size: .9rem; color: #475569; }
  @media (max-width: 768px) {
    .revision-inner { flex-direction: column; }
    .revision-cards { border-width: 3px; }
  }
  .future {
    background: var(--future-gradient);
    text-align: center;
    padding: 4rem 2rem;
  }
  .future h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--future-heading);
  }
  .future ul {
    list-style: none;
    padding: 0;
    max-width: 700px;
    margin: 0 auto;
    color: var(--future-text);
    font-size: 1.1rem;
  }
  .future li {
    margin: 0.75rem 0;
  }
  footer {
    text-align: center;
    padding: 2rem;
    font-size: 0.9rem;
    color: var(--footer-color);
    background: var(--footer-bg);
  }

/* Styling for generated questions */
.gcse-question-list {
  list-style: decimal;
  padding-left: 1.2em;
  margin: 1em 0;
}
.gcse-question-list li {
  margin-bottom: 0.75em;
  overflow-wrap: anywhere;
}
.gcse-textanswer {
  width: 100%;
  padding: 10px;
  margin-top: 0.5em;
  margin-bottom: 1em;
  font-size: 16px;
  box-sizing: border-box;
  min-height: 80px;
}

#dark-mode-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  padding: 8px 12px;
  background: var(--cta-bg);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.gcse-date-filter {
  margin-bottom: 20px;
}

.gcse-divider {
  margin: 30px 0;
  border: none;
  border-top: 1px solid #ccc;
}

.gcse-pagination {
  margin-top: 20px;
}
.gcse-pagination a,
.gcse-pagination span {
  display: inline-block;
  padding: 4px 8px;
  margin-right: 4px;
  border: 1px solid #ccc;
  text-decoration: none;
}
.gcse-pagination .current-page {
  background: #0073aa;
  color: #fff;
  border-color: #0073aa;
}

/* Loading animation displayed while processing OCR/AI calls */
.gcse-loader {
  display: inline-block;
  margin-left: 6px;
}
.gcse-loader span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 1px;
  background: #0073aa;
  border-radius: 50%;
  animation: gcse-bounce 1.4s infinite ease-in-out both;
}
.gcse-loader span:nth-child(1) { animation-delay: -0.32s; }
.gcse-loader span:nth-child(2) { animation-delay: -0.16s; }

/* Full-page overlay shown while processing */
.gcse-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a202c;
}
.gcse-processing-text {
  color: #c00 !important;
  font-weight: bold !important;
}

@keyframes gcse-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

/* MCQ option grid */
.mcq-page {
  max-width: 800px;
  margin: 2rem auto;
  font-family: 'Inter', sans-serif;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1.5rem;
  background-color: #fff;
}

.mcq-header {
  margin-bottom: 1.5rem;
}

.mcq-progress {
  display: inline-block;
  color: #4a5568;
  font-size: 0.9rem;
  margin-right: 0.5rem;
  margin-bottom: 0;
}

.mcq-question-text {
  font-size: 1.75rem;
  font-weight: 600;
  color: #1a202c;
  margin: 0;
}

.mcq-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mcq-option {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #ebf2ff;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mcq-option:hover {
  background-color: #dbe6ff;
}

.mcq-option input[type="radio"] {
  margin-right: 0.75rem;
  accent-color: #4299e1;
}

.mcq-badge {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background-color: #4299e1;
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  margin-right: 1rem;
  font-size: 1rem;
}

.mcq-label {
  font-size: 1rem;
  color: #2d3748;
}

.mcq-option.selected {
  background-color: #c6f6d5;
}

.mcq-option.selected .mcq-badge {
  background-color: #48bb78;
}

.mcq-option.selected .mcq-label {
  color: #22543d;
}

/* Fallback for browsers without JavaScript */
.mcq-option:has(input[type="radio"]:checked) {
  background-color: #c6f6d5;
}
.mcq-option:has(input[type="radio"]:checked) .mcq-badge {
  background-color: #48bb78;
}
.mcq-option:has(input[type="radio"]:checked) .mcq-label {
  color: #22543d;
}

/* QuizCam MCQ custom styles */
#ocr-mcq-container .mcq-option {
  background-color: #fff5f5;
}
#ocr-mcq-container .mcq-option input[type="radio"] {
  accent-color: #4299e1;
}
/* User Dashboard */
.ai-dashboard { max-width:1200px; margin:2rem auto; font-family:Inter,sans-serif; }
.ai-dashboard .dash-row { display:flex; flex-wrap:wrap; gap:1.5rem; margin-bottom:1.5rem; }
.ai-dashboard .dash-card { flex:1 1 48%; padding:1.5rem; background:#fff; border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,0.06); }
.ai-dashboard .dash-card.welcome{background:#FEF9C3;}
.ai-dashboard .dash-card.activity{background:#DCFCE7;}
.ai-dashboard .welcome { text-align:center; }
.ai-dashboard .welcome img { border-radius:50%; margin-bottom:.5rem; }
.ai-dashboard .activity-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-dashboard .activity-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  padding: 0.75rem;
  text-align: center;
  font-size: 0.95rem;
}
.ai-dashboard .activity-type {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.ai-dashboard .activity-date { color:#4a5568; font-size:0.85rem; }
.ai-dashboard .kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
}
.ai-dashboard .kpi-row .kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  padding: 1.25rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  text-align: center;
}
.ai-dashboard .kpi-row .kpi-card:nth-child(1){background:#BFDBFE;}
.ai-dashboard .kpi-row .kpi-card:nth-child(2){background:#FBCFE8;}
.ai-dashboard .kpi-row .kpi-card:nth-child(3){background:#C7D2FE;}
.ai-dashboard .kpi-title { display:block; font-size:0.9rem; color:#4a5568; }
.ai-dashboard .kpi-value { font-size:2rem; color:#1a202c; font-weight:600; margin:0.3rem 0; }
@media(max-width:768px){
  .ai-dashboard .dash-card { flex:1 1 100%; }
  .ai-dashboard .kpi-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

.usage-stats{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin:2rem auto;
}
.usage-tile{ text-align:center; }
.usage-stats .usage-item{
  background:var(--tile-bg);
  padding:1rem 1.5rem;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  text-align:center;
}
.usage-number{
  display:block;
  font-size:2rem;
  font-weight:600;
  color:var(--hero-text-color);
}
.usage-label{
  display:block;
  font-size:0.9rem;
  color:#4a5568;
  margin-top:0.25rem;
}