:root{
  --ink:#0f172a;--muted:#64748b;--bg:#f8fafc;--card:#ffffff;--border:#e2e8f0;
  --accent:#3b82f6;--accent-d:#2563eb;--soft:#f1f5f9;--soft-2:#eef2ff;--danger:#b91c1c;--ok:#16a34a;
  --overlay: rgba(2,6,23,.5);
  --cta-grad: linear-gradient(90deg,#6366f1,#22c55e);
  
  /* Color variables for scaffolded mode */
  --green-light: #dcfce7;
  --green-medium: #86efac;
  --green-dark: #065f46;
  --orange-primary: #f59e0b;
  --orange-light: #fff7ed;
  --orange-medium: #fef3c7;
  --orange-dark: #92400e;
  
  /* Typography scale */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  
  /* Spacing scale */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;    /* 24px */
  
  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* Shadow scale */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}
body{max-width:980px;margin:2rem auto;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;background:var(--bg);color:var(--ink);padding:0 1rem}
h2{margin-bottom:1.2rem}
form{background:var(--card);border:1px solid var(--border);padding:1.5rem;border-radius:12px;box-shadow:0 4px 18px rgba(2,6,23,.06)}
label{font-weight:600;display:block;margin:1rem 0 .5rem}
select,input[type="text"],textarea{width:100%;padding:.8rem .9rem;border:1px solid var(--border);border-radius:8px;font-size:1rem;background:#fff;color:var(--ink);box-sizing:border-box}
select:focus,input:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
textarea{resize:vertical;min-height:420px}
.note{font-size:.92rem;color:var(--muted);margin-top:.3rem}
.checkbox-line{display:flex;align-items:center;gap:.6rem;margin:.8rem 0}
.btn{background:var(--accent);color:#fff;border:none;padding:.9rem 1.2rem;font-size:1rem;border-radius:8px;cursor:pointer;transition:background .15s ease,transform .06s ease}
.btn:hover{background:var(--accent-d)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:#fff;border:1px solid var(--border);color:var(--ink)}
.btn-cta{background:var(--cta-grad); border:none; color:#fff; box-shadow:0 6px 18px rgba(16,185,129,.25)}
.btn-cta:hover{filter:brightness(1.03)}
.hint{font-size:.9rem;color:var(--muted);margin-left:.8rem}
.counter{font-size:.88rem;color:var(--muted);text-align:right;margin-top:.3rem}
.error{color:var(--danger);margin-top:.5rem;font-size:.92rem;display:none}
.success{color:var(--ok)}

/* Source option active state */
.source-option input[type="radio"]:checked + div,
.source-option:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  background: var(--soft-2);
  border-width: 2px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .question-gen-controls {
    flex-direction: column;
  }
  .slider-container {
    width: 100%;
  }
  .inline-gap-container,
  .error-inline-container {
    display: inline !important;
    width: auto;
    margin: 0 1px;
    margin: 0.5rem 0;
  }
  .btn, button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
  }
  body {
    padding: 0 0.5rem;
  }
  form {
    padding: 1rem;
  }
}

/* Top hero CTA (visible until a scheme is chosen) */
.hero{display:flex;align-items:flex-start;justify-content:space-between;gap:.9rem;padding:1rem 1.2rem;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg,#f8faff,#f0fdf4);box-shadow:0 2px 12px rgba(2,6,23,.06);margin-bottom:1rem}
.hero h3{margin:0;font-size:1.05rem;padding-top:0}
.hero .btn-cta{margin-top:-0.25rem;align-self:flex-start}
.kbd{border:1px solid #e5e7eb;background:#fff;border-radius:6px;padding:.1rem .35rem;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}

/* Picker */
.picker{border:1px solid var(--border);border-radius:12px;background:#fff;padding:.75rem}
.picker-row{display:flex;gap:.6rem;align-items:center}
.picker-input{flex:1;padding:.7rem .9rem;border:1px solid var(--border);border-radius:8px}
.picker-clear{border:1px solid var(--border);background:#fff;padding:.55rem .7rem;border-radius:8px;cursor:pointer}
.picker-filters{display:flex;gap:.6rem;margin:.6rem 0 0}
.picker-filter{flex:1;padding:.6rem .7rem;border:1px solid var(--border);border-radius:8px;background:#fff}
.picker-panel{margin-top:.6rem;border:1px solid var(--border);border-radius:10px;max-height:320px;overflow:auto;background:#fff;box-shadow:inset 0 10px 25px rgba(2,6,23,.04)}
.picker-list{list-style:none;margin:0;padding:0}
.picker-item{padding:.7rem .9rem;border-bottom:1px solid #f1f5f9;cursor:pointer}
.picker-item:hover{background: var(--soft)}
.picker-item[aria-selected="true"]{background: var(--soft-2)}
.picker-title{display:flex;gap:.5rem;align-items:center;font-weight:600}
.badge{display:inline-block;font-size:.75rem;padding:.15rem .45rem;border-radius:999px;background:#eef2ff;color:#3730a3;border:1px solid #e0e7ff}
.meta{font-size:.86rem;color:var(--muted);margin-top:.25rem}
.picker-status{padding:.6rem .9rem;color:var(--muted);font-size:.9rem}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid #cbd5e1;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:.4rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* Preview card */
.preview{margin-top:.75rem;border:1px solid var(--border);border-radius:12px;background:#fff}
.preview-hd{padding:.9rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.preview-title{font-weight:700}
.preview-badges{display:flex;gap:.4rem;flex-wrap:wrap}
.preview-bd{padding:1rem}
.question-text{white-space:pre-wrap;line-height:1.6;font-size:1rem}
.question-text.clamped{max-height:600px;overflow:auto}

/* Answer editor */
.editor-shell{margin-top:1rem;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.editor-bar{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;padding:.5rem .6rem;border-bottom:1px solid var(--border);background:#f8fafc}
.tb-btn{border:1px solid var(--border);background:#fff;border-radius:8px;padding:.4rem .6rem;cursor:pointer;font-size:.9rem}
.tb-btn:hover{background:#f1f5f9}
.editor-tabs{margin-left:auto;display:flex;gap:.4rem}
.tab-btn{border:1px solid var(--border);background:#fff;border-radius:8px;padding:.35rem .7rem;cursor:pointer;font-size:.9rem}
.tab-btn[aria-pressed="true"]{background:var(--soft-2);border-color:#c7d2fe}
.editor-body{display:block}
.editor-split .editor-body{display:grid;grid-template-columns:1fr 1fr}
.pane{min-height:300px}
.pane-write{border-right:1px solid var(--border);position:relative}
.pane-write textarea{border:0;border-radius:0;width:100%;height:100%;padding:1rem;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.pane-preview{padding:0;overflow:auto;background:#020617;border-left:1px solid #1f2937}
.katex-display{overflow-x:auto}
pre[class*="language-"]{border-radius:8px;border:1px solid #e2e8f0}

/* Code editor look for previewed code blocks - inspired by GeeksforGeeks/LeetCode/VS Code */
.pane-preview{
  padding:0 !important;
  overflow:auto;
  background:#1e1e1e !important; /* VS Code dark background */
  border-left:1px solid #3e3e42;
  position:relative;
}

/* Full-width code blocks that fill the preview pane - Professional editor style */
.pane-preview pre[class*="language-"]{
  margin:0 !important;
  padding:16px 20px !important;
  background:#1e1e1e !important; /* Dark editor background */
  color:#d4d4d4 !important; /* Light text - fallback */
  font-family:'Consolas', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace !important;
  font-size:14px !important;
  line-height:1.6 !important;
  letter-spacing:0.01em;
  border-radius:0 !important;
  border:none !important;
  box-shadow:none !important;
  overflow-x:auto;
  overflow-y:visible;
  width:100%;
  box-sizing:border-box;
  tab-size:4 !important;
  -moz-tab-size:4 !important;
  -webkit-tab-size:4 !important;
  white-space:pre !important; /* CRITICAL: preserve whitespace and indentation */
  word-wrap:normal !important;
  word-break:normal !important;
  text-align:left !important;
}

/* Code element styling - don't override Prism's token colors */
.pane-preview code[class*="language-"]{
  background:transparent !important;
  font-family:inherit !important;
  font-size:inherit !important;
  padding:0 !important;
  border-radius:0 !important;
  white-space:pre !important; /* Preserve formatting */
  display:block;
  width:100%;
  tab-size:4 !important;
  -moz-tab-size:4 !important;
  -webkit-tab-size:4 !important;
}

/* Enhanced Prism token colors for better visibility (Python-specific improvements) */
.pane-preview .token.keyword,
.pane-preview .token.operator,
.pane-preview .token.boolean,
.pane-preview .token.function {
  color:#569cd6 !important; /* Blue for keywords */
}

.pane-preview .token.string,
.pane-preview .token.char {
  color:#ce9178 !important; /* Orange for strings */
}

.pane-preview .token.comment {
  color:#6a9955 !important; /* Green for comments */
  font-style:italic;
}

.pane-preview .token.number {
  color:#b5cea8 !important; /* Light green for numbers */
}

.pane-preview .token.class-name,
.pane-preview .token.builtin {
  color:#4ec9b0 !important; /* Cyan for class names */
}

.pane-preview .token.punctuation {
  color:#d4d4d4 !important; /* Light gray for punctuation */
}

.pane-preview .token.variable,
.pane-preview .token.property {
  color:#9cdcfe !important; /* Light blue for variables */
}

/* Let Prism's tomorrow theme handle token colors, but ensure they're visible */
.pane-preview .token {
  /* Don't override - let Prism theme handle colors */
  color: inherit;
}

/* Regular text in preview (non-code) should still be readable */
.pane-preview .markdown-body{
  padding:1rem;
  color:#d4d4d4;
}
.pane-preview .markdown-body > *:not(pre){
  color:#d4d4d4;
}

/* STT (Speech-to-Text) Controls */
.mic-controls{position:absolute;top:0.75rem;right:0.75rem;display:flex;align-items:center;gap:.5rem;z-index:10}
.btn-mic,.btn-mic-cancel,.btn-mic-restart{background:#fff;border:1px solid var(--border);border-radius:6px;padding:.35rem .5rem;cursor:pointer;font-size:0.9rem;transition:all .15s ease;box-shadow:0 1px 2px rgba(0,0,0,0.05)}
.btn-mic:hover{background:#f1f5f9;border-color:var(--accent);box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.btn-mic.recording{background:#fee2e2;border-color:#dc2626;animation:pulse 1.5s ease-in-out infinite}
.btn-mic-cancel,.btn-mic-restart{display:none;background:#fff;border:1px solid var(--border);border-radius:6px;padding:.35rem .5rem;font-size:0.9rem}
.btn-mic-cancel:hover{background:#fee2e2;border-color:#dc2626}
.btn-mic-restart:hover{background:#dbeafe;border-color:#2563eb}
.mic-privacy{font-size:.75rem;color:var(--muted);margin-left:auto}
.stt-error{font-size:.85rem;color:var(--danger);margin-top:.5rem;padding:.5rem;background:rgba(217,164,65,.1);border-left:2px solid var(--danger);border-radius:4px;animation:fadeIn .3s ease}
.stt-success{font-size:.85rem;color:#10b981;background:#d1fae5;border:1px solid #6ee7b7;border-radius:4px;padding:.5rem;margin-top:.5rem;animation:fadeIn .3s ease}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

/* Submit row */
.submit-row{display:flex;align-items:center;gap:.75rem;margin-top:.9rem}

/* Modal (Quick Generator) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:var(--overlay);z-index:50;padding:1rem}
.modal[aria-hidden="false"]{display:flex}
.modal-card{width:100%;max-width:720px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 40px rgba(2,6,23,.2)}
.modal-hd{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.modal-bd{padding:1rem 1.25rem}
.modal-ft{padding:1rem 1.25rem;border-top:1px solid var(--border);display:flex;gap:.6rem;justify-content:flex-end}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.seg{display:flex;gap:.4rem;margin-bottom:.6rem}
.seg .seg-btn{flex:1;padding:.45rem .6rem;border:1px solid var(--border);background:#fff;border-radius:8px;cursor:pointer}
.seg .seg-btn[aria-pressed="true"]{background:var(--soft-2);border-color:#c7d2fe}
.hide{display:none}
@media (max-width:980px){.editor-split .editor-body{display:block}.pane-write{border-right:0}}
@media (max-width:720px){.row-2{grid-template-columns:1fr}}

/* Scaffold Answer Styling - Static CSS to ensure it always loads */
#scaffoldText {
  padding: 1rem !important;
  background: #f8fafc !important;
  border: none !important;
  border-radius: 0 !important;
  line-height: 1.6 !important;
  min-height: auto !important;
  color: #0f172a !important;
  font-size: 1rem !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  word-wrap: break-word !important;
  white-space: normal !important; /* Changed from pre-wrap to normal to prevent unwanted line breaks */
  max-width: 100% !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

#scaffoldText .scaffold-text,
#scaffoldText p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
  color: #0f172a !important;
  font-size: 1rem !important;
  white-space: normal !important; /* Normal wrapping, no preserved newlines */
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Only preserve whitespace for code blocks */
#scaffoldText pre,
#scaffoldText .code-block {
  white-space: pre-wrap !important;
}

/* Force gap marker styling - highest specificity */
#scaffoldText .gap-wrapper .gap-marker,
#scaffoldText span.gap-wrapper span.gap-marker,
#scaffoldText .gap-marker[data-gap-id],
#scaffoldText .gap-marker {
  display: inline !important;
  background: #EFF6FF !important;
  border: 1px solid #93C5FD !important;
  border-bottom: 2px solid #3B82F6 !important;
  border-radius: 3px !important;
  padding: 2px 4px !important;
  margin: 0 1px !important;
  font-size: 0.95rem !important;
  color: #1E40AF !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  vertical-align: baseline !important;
  position: relative !important;
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2) !important;
  text-align: center !important;
  text-decoration: none !important;
}

#scaffoldText .gap-wrapper .gap-marker::after,
#scaffoldText .gap-marker[data-gap-id]::after,
#scaffoldText .gap-marker::after {
  content: ' (click to fill)' !important;
  font-size: 0.75rem !important;
  color: #64748B !important;
  font-weight: normal !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  margin-left: 2px !important;
}

#scaffoldText .gap-wrapper .gap-marker:hover,
#scaffoldText span.gap-wrapper span.gap-marker:hover,
#scaffoldText .gap-marker[data-gap-id]:hover,
#scaffoldText .gap-marker:hover {
  background: #DBEAFE !important;
  border-color: #2563EB !important;
  border-bottom-width: 3px !important;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3) !important;
  transform: translateY(-1px) !important;
}

#scaffoldText .gap-wrapper .gap-marker:hover::after,
#scaffoldText .gap-marker[data-gap-id]:hover::after,
#scaffoldText .gap-marker:hover::after {
  opacity: 1 !important;
}

#scaffoldText .gap-wrapper {
  display: inline !important;
  position: relative !important;
  vertical-align: baseline !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#scaffoldText .gap-input-expanded {
  display: block !important;
  width: 100% !important;
  min-width: 200px !important;
  padding: 0.75rem 1rem !important;
  margin: 0.5rem 0 !important;
  border: 2px solid #3B82F6 !important;
  border-radius: 6px !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  background: #FFFFFF !important;
  color: #0f172a !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

#scaffoldText .gap-marker.gap-marker--block {
  background: #FFEDD5 !important;
  border-color: #FB923C !important;
  border-bottom-color: #F97316 !important;
  color: #9A3412 !important;
}

#scaffoldText .gap-input-expanded.gap-input-expanded--block {
  min-height: 220px !important;
}

#scaffoldText .gap-input-expanded.gap-input-expanded--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  white-space: pre !important;
}

#scaffoldText .gap-input-expanded.gap-input-expanded--math {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

#scaffoldText .gap-input-expanded::placeholder {
  color: #64748B !important;
  opacity: 1 !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
}

#scaffoldText .error-marker {
  text-decoration: underline !important;
  text-decoration-style: wavy !important;
  text-decoration-color: #EF4444 !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
  color: inherit !important;
  background: transparent !important;
}