/* ================================================================
   Digital Communications Tutor Pro — v2.0 Styles
   Aesthetic: Engineering lab / oscilloscope / dark precision
   Font: IBM Plex Mono for code, Syne for headings
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --dct-bg:       #080e1a;
  --dct-bg2:      #0e1827;
  --dct-bg3:      #152035;
  --dct-card:     #111d30;
  --dct-border:   #1e3050;
  --dct-border2:  #2a4070;

  --dct-cyan:     #00d4ff;
  --dct-blue:     #3b82f6;
  --dct-purple:   #8b5cf6;
  --dct-green:    #10b981;
  --dct-yellow:   #f59e0b;
  --dct-red:      #ef4444;
  --dct-orange:   #f97316;

  --dct-text:     #e2eaf7;
  --dct-muted:    #6b85aa;
  --dct-code:     #00d4ff;

  --dct-r:        10px;
  --dct-r-sm:     6px;
  --dct-shadow:   0 8px 40px rgba(0,0,0,.5);
  --dct-t:        .18s ease;
  
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

/* ── Reset / Base ─────────────────────────────────────────── */
.dct-app *, .dct-app *::before, .dct-app *::after { box-sizing: border-box; }

.dct-app {
  background: var(--dct-bg);
  border: 1px solid var(--dct-border);
  border-radius: var(--dct-r);
  font-family: var(--font-body);
  color: var(--dct-text);
  max-width: 960px;
  margin: 2rem auto;
  box-shadow: var(--dct-shadow);
  overflow: hidden;
  position: relative;
}

/* scan-line texture overlay */
.dct-app::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,212,255,.012) 2px,
    rgba(0,212,255,.012) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Header ───────────────────────────────────────────────── */
.dct-header {
  background: linear-gradient(135deg, #0b1525 0%, #0f1e38 100%);
  border-bottom: 1px solid var(--dct-border);
  position: relative;
  z-index: 1;
}
.dct-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}
.dct-logo { display: flex; align-items: center; gap: .8rem; }
.dct-logo-icon { font-size: 1.8rem; filter: drop-shadow(0 0 8px var(--dct-cyan)); }
.dct-logo strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--dct-text);
  letter-spacing: .02em;
}
.dct-logo span { font-size: .75rem; color: var(--dct-muted); }
.dct-header-badge {
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: .3rem .7rem;
  border: 1px solid var(--dct-cyan);
  border-radius: 20px;
  color: var(--dct-cyan);
  opacity: .7;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.dct-tabs {
  display: flex;
  background: var(--dct-bg2);
  border-bottom: 1px solid var(--dct-border);
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 1;
}
.dct-tabs::-webkit-scrollbar { display: none; }
.dct-tab {
  flex: 1;
  min-width: fit-content;
  padding: .7rem .9rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dct-muted);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dct-t), background var(--dct-t), border-color var(--dct-t);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.dct-tab span { font-size: 1em; }
.dct-tab:hover { color: var(--dct-text); background: var(--dct-bg3); }
.dct-tab.active {
  color: var(--dct-cyan);
  background: var(--dct-bg);
  border-bottom-color: var(--dct-cyan);
}

/* ── Panels ───────────────────────────────────────────────── */
.dct-panel { display: none; padding: 1.5rem; position: relative; z-index: 1; }
.dct-panel.active { display: block; }

/* ── Section ──────────────────────────────────────────────── */
.dct-section h2 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  margin: 0 0 .3rem;
  color: var(--dct-text);
}
.dct-subtitle { color: var(--dct-muted); margin: 0 0 1.1rem; font-size: .88rem; }

/* ── Inputs ───────────────────────────────────────────────── */
.dct-input-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }

.dct-input, .dct-textarea {
  flex: 1;
  min-width: 180px;
  padding: .65rem 1rem;
  background: var(--dct-bg2);
  border: 1px solid var(--dct-border);
  border-radius: var(--dct-r-sm);
  color: var(--dct-text);
  font-family: var(--font-body);
  font-size: .92rem;
  outline: none;
  transition: border-color var(--dct-t), box-shadow var(--dct-t);
}
.dct-input:focus, .dct-textarea:focus {
  border-color: var(--dct-cyan);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
}
.dct-input::placeholder, .dct-textarea::placeholder { color: var(--dct-muted); }
.dct-textarea { resize: vertical; width: 100%; flex: none; }

.dct-select {
  padding: .65rem .8rem;
  background: var(--dct-bg2);
  border: 1px solid var(--dct-border);
  border-radius: var(--dct-r-sm);
  color: var(--dct-text);
  font-size: .88rem;
  cursor: pointer;
}

/* ── Buttons ──────────────────────────────────────────────── */
.dct-btn {
  padding: .65rem 1.3rem;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  border: none;
  border-radius: var(--dct-r-sm);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: opacity var(--dct-t), transform var(--dct-t), box-shadow var(--dct-t);
  white-space: nowrap;
}
.dct-btn:hover:not(:disabled) {
  opacity: .9;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(14,165,233,.3);
}
.dct-btn:disabled { opacity: .45; cursor: not-allowed; }
.dct-btn-sm { padding: .38rem .8rem; font-size: .8rem; }
.dct-btn-outline {
  background: transparent;
  border: 1px solid var(--dct-cyan);
  color: var(--dct-cyan);
}
.dct-btn-outline:hover { background: rgba(0,212,255,.08); box-shadow: none; }

/* ── Quick chips ──────────────────────────────────────────── */
.dct-quick-topics { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.dct-chip {
  padding: .28rem .7rem;
  background: var(--dct-bg2);
  border: 1px solid var(--dct-border2);
  border-radius: 20px;
  font-size: .79rem;
  color: var(--dct-muted);
  cursor: pointer;
  transition: border-color var(--dct-t), color var(--dct-t), background var(--dct-t);
}
.dct-chip:hover { border-color: var(--dct-cyan); color: var(--dct-cyan); background: rgba(0,212,255,.06); }

/* ── Output / Explanation ─────────────────────────────────── */
.dct-output {
  background: var(--dct-card);
  border: 1px solid var(--dct-border);
  border-left: 3px solid var(--dct-cyan);
  border-radius: var(--dct-r-sm);
  padding: 1.2rem 1.4rem;
  line-height: 1.75;
  font-size: .93rem;
  animation: dct-fadein .3s ease;
}
.dct-output h2, .dct-output h3, .dct-output h4, .dct-output h5 {
  font-family: var(--font-head);
  color: var(--dct-cyan);
  margin-top: 1.1rem;
  margin-bottom: .4rem;
}
.dct-output code {
  font-family: var(--font-mono);
  background: rgba(0,212,255,.08);
  color: var(--dct-cyan);
  padding: .12rem .4rem;
  border-radius: 4px;
  font-size: .86rem;
}
.dct-output pre {
  background: #060d18;
  border: 1px solid var(--dct-border);
  border-radius: var(--dct-r-sm);
  padding: .9rem 1.1rem;
  overflow-x: auto;
}
.dct-output pre code { background: none; padding: 0; }
.dct-output ul, .dct-output ol { padding-left: 1.4rem; }
.dct-output li { margin-bottom: .3rem; }
.dct-output strong { color: var(--dct-yellow); }

/* ── Spinner ──────────────────────────────────────────────── */
.dct-spinner {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--dct-muted);
  padding: 1.4rem;
  font-size: .9rem;
}
.dct-spinner::before {
  content: '';
  width: 18px; height: 18px;
  border: 2px solid var(--dct-border2);
  border-top-color: var(--dct-cyan);
  border-radius: 50%;
  animation: dct-spin .6s linear infinite;
  flex-shrink: 0;
}
@keyframes dct-spin { to { transform: rotate(360deg); } }
@keyframes dct-fadein { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* ── Topics Grid ──────────────────────────────────────────── */
.dct-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.dct-topic-card {
  background: var(--dct-card);
  border: 1px solid var(--dct-border);
  border-radius: var(--dct-r-sm);
  padding: 1rem 1.1rem 1rem;
  transition: border-color var(--dct-t), transform var(--dct-t), box-shadow var(--dct-t);
}
.dct-topic-card:hover {
  border-color: var(--dct-cyan);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,212,255,.1);
}
.dct-topic-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .5rem; }
.dct-topic-icon { font-size: 1.5rem; }
.dct-topic-card h3 { margin: 0 0 .5rem; font-family: var(--font-head); font-size: .92rem; }
.dct-subtopic-list { margin: 0 0 .6rem; padding-left: 1.1rem; font-size: .79rem; color: var(--dct-muted); line-height: 1.55; }
.dct-subtopic-list .dct-more { color: var(--dct-cyan); list-style: none; margin-left: -1.1rem; }
.dct-exam-hint {
  font-size: .77rem;
  color: var(--dct-yellow);
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 4px;
  padding: .35rem .6rem;
  margin-bottom: .7rem;
  line-height: 1.4;
}
.dct-topic-actions { display: flex; gap: .4rem; }

/* ── Weight badges ────────────────────────────────────────── */
.dct-weight-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.dct-w-vh { color: var(--dct-red);    border-color: var(--dct-red);    background: rgba(239,68,68,.1); }
.dct-w-h  { color: var(--dct-orange); border-color: var(--dct-orange); background: rgba(249,115,22,.1); }
.dct-w-m  { color: var(--dct-yellow); border-color: var(--dct-yellow); background: rgba(245,158,11,.1); }
.dct-w-lm { color: var(--dct-green);  border-color: var(--dct-green);  background: rgba(16,185,129,.1); }

/* ── Quiz ─────────────────────────────────────────────────── */
.dct-quiz-card {
  background: var(--dct-card);
  border: 1px solid var(--dct-border);
  border-radius: var(--dct-r-sm);
  padding: 1.2rem 1.4rem;
  animation: dct-fadein .3s ease;
}
.dct-formula-bar {
  background: rgba(0,212,255,.06);
  border: 1px solid rgba(0,212,255,.2);
  border-radius: var(--dct-r-sm);
  padding: .5rem .9rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--dct-cyan);
  margin-bottom: .9rem;
}
.dct-quiz-question {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem;
  line-height: 1.55;
}
.dct-quiz-options { display: flex; flex-direction: column; gap: .5rem; }
.dct-quiz-option {
  background: var(--dct-bg2);
  border: 1px solid var(--dct-border);
  border-radius: var(--dct-r-sm);
  padding: .7rem 1rem;
  cursor: pointer;
  font-size: .9rem;
  text-align: left;
  color: var(--dct-text);
  font-family: var(--font-body);
  transition: border-color var(--dct-t), background var(--dct-t);
}
.dct-quiz-option:hover:not(:disabled) { border-color: var(--dct-cyan); background: var(--dct-bg3); }
.dct-quiz-option.correct { border-color: var(--dct-green); background: rgba(16,185,129,.1); color: var(--dct-green); }
.dct-quiz-option.wrong   { border-color: var(--dct-red);   background: rgba(239,68,68,.1);  color: #fca5a5; }
.dct-quiz-result {
  margin-top: .9rem;
  padding: 1rem 1.1rem;
  border-radius: var(--dct-r-sm);
  font-size: .88rem;
  line-height: 1.65;
}
.dct-quiz-result.correct { background: rgba(16,185,129,.08); border: 1px solid var(--dct-green); color: #6ee7b7; }
.dct-quiz-result.wrong   { background: rgba(239,68,68,.08);  border: 1px solid var(--dct-red);   color: #fca5a5; }
.dct-quiz-result code { font-family: var(--font-mono); background: rgba(0,0,0,.3); padding: .1rem .35rem; border-radius: 3px; font-size: .83rem; color: var(--dct-cyan); }

.dct-score-bar { margin-top: .9rem; color: var(--dct-muted); font-size: .86rem; }
.dct-score-pct { margin-left: .5rem; color: var(--dct-cyan); font-weight: 700; font-family: var(--font-mono); }
.dct-streak    { margin-left: .8rem; color: var(--dct-yellow); font-size: .82rem; }

/* ── Formula Sheet ────────────────────────────────────────── */
.dct-formula-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.dct-formula-card {
  background: var(--dct-card);
  border: 1px solid var(--dct-border);
  border-radius: var(--dct-r-sm);
  padding: 1rem 1.1rem;
}
.dct-formula-card h3 {
  font-family: var(--font-head);
  font-size: .88rem;
  color: var(--dct-cyan);
  margin: 0 0 .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--dct-border);
}
.dct-formula-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.dct-formula-table tr + tr td { border-top: 1px solid var(--dct-border); }
.dct-formula-table td { padding: .35rem .3rem; vertical-align: middle; }
.dct-f-name { color: var(--dct-muted); width: 40%; }
.dct-f-eq code {
  font-family: var(--font-mono);
  background: rgba(0,212,255,.07);
  color: var(--dct-cyan);
  padding: .12rem .4rem;
  border-radius: 4px;
  font-size: .8rem;
  display: inline-block;
}
.dct-explain-formula { padding: .22rem .55rem !important; font-size: .75rem !important; }

/* ── Predictor ────────────────────────────────────────────── */
.dct-predict-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.dct-predict-card {
  background: var(--dct-card);
  border: 1px solid var(--dct-border);
  border-radius: var(--dct-r-sm);
  padding: 1rem 1.1rem;
  transition: border-color var(--dct-t), transform var(--dct-t);
}
.dct-predict-card:hover { border-color: var(--dct-purple); transform: translateY(-2px); }
.dct-predict-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; gap: .5rem; }
.dct-predict-head strong { font-family: var(--font-head); font-size: .92rem; }
.dct-prob-badge { font-size: .72rem; font-weight: 700; padding: .18rem .55rem; border-radius: 20px; border: 1px solid; white-space: nowrap; }
.dct-predict-type { font-size: .75rem; color: var(--dct-purple); margin-bottom: .5rem; font-family: var(--font-mono); }
.dct-predict-card p { font-size: .85rem; color: var(--dct-muted); line-height: 1.55; margin: 0 0 .6rem; }
.dct-predict-formula {
  font-size: .79rem;
  font-family: var(--font-mono);
  color: var(--dct-yellow);
  background: rgba(245,158,11,.06);
  border: 1px solid rgba(245,158,11,.15);
  border-radius: 4px;
  padding: .35rem .6rem;
  line-height: 1.4;
}

/* AI prediction output cards */
.dct-ai-pred-card {
  background: var(--dct-card);
  border: 1px solid var(--dct-border);
  border-left: 3px solid var(--dct-purple);
  border-radius: var(--dct-r-sm);
  padding: 1rem 1.2rem;
  margin-bottom: .8rem;
  animation: dct-fadein .4s ease both;
}
.dct-ai-pred-card:nth-child(1){animation-delay:.05s}
.dct-ai-pred-card:nth-child(2){animation-delay:.1s}
.dct-ai-pred-card:nth-child(3){animation-delay:.15s}
.dct-ai-pred-card:nth-child(4){animation-delay:.2s}
.dct-ai-pred-card:nth-child(5){animation-delay:.25s}
.dct-ai-pred-rank { font-family: var(--font-mono); font-size: .75rem; color: var(--dct-muted); margin-bottom: .4rem; }
.dct-ai-pred-topic { font-family: var(--font-head); font-size: 1rem; color: var(--dct-text); margin-bottom: .3rem; }
.dct-ai-pred-prob { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--dct-red); margin-bottom: .5rem; }
.dct-ai-pred-type { display: inline-block; font-size: .75rem; color: var(--dct-purple); margin-left: .6rem; font-family: var(--font-mono); }
.dct-ai-pred-q { font-size: .88rem; color: var(--dct-text); margin: .4rem 0; font-style: italic; background: var(--dct-bg2); padding: .6rem .8rem; border-radius: 4px; line-height: 1.5; }
.dct-ai-pred-why { font-size: .8rem; color: var(--dct-muted); margin-bottom: .4rem; }
.dct-ai-pred-tip { font-size: .8rem; font-family: var(--font-mono); color: var(--dct-yellow); }

/* ── Chat ─────────────────────────────────────────────────── */
.dct-chat-messages {
  height: 370px;
  overflow-y: auto;
  background: var(--dct-bg2);
  border: 1px solid var(--dct-border);
  border-radius: var(--dct-r-sm);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-bottom: .8rem;
  scroll-behavior: smooth;
}
.dct-msg { max-width: 82%; display: flex; flex-direction: column; gap: .2rem; }
.dct-msg strong { font-size: .74rem; color: var(--dct-muted); font-family: var(--font-mono); }
.dct-msg-user { align-self: flex-end; }
.dct-msg-ai   { align-self: flex-start; }
.dct-msg-user .dct-msg-bubble {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff;
  padding: .65rem 1rem;
  border-radius: 12px 12px 2px 12px;
  font-size: .9rem; line-height: 1.6;
}
.dct-msg-ai .dct-msg-bubble {
  background: var(--dct-card);
  border: 1px solid var(--dct-border);
  color: var(--dct-text);
  padding: .65rem 1rem;
  border-radius: 12px 12px 12px 2px;
  font-size: .9rem; line-height: 1.65;
}
.dct-msg-bubble code {
  font-family: var(--font-mono);
  background: rgba(0,212,255,.1);
  color: var(--dct-cyan);
  padding: .1rem .35rem;
  border-radius: 3px;
  font-size: .83rem;
}
.dct-msg-bubble strong { color: var(--dct-yellow); }
.dct-msg-bubble h3, .dct-msg-bubble h4 { font-family: var(--font-head); color: var(--dct-cyan); font-size: .95rem; margin: .7rem 0 .3rem; }
.dct-msg-bubble ul { padding-left: 1.3rem; margin: .4rem 0; }

.dct-chat-input-row { display: flex; gap: .6rem; }
.dct-chat-input-row .dct-input { flex: 1; }
.dct-chat-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }

.dct-chat-messages::-webkit-scrollbar { width: 4px; }
.dct-chat-messages::-webkit-scrollbar-track { background: var(--dct-bg2); }
.dct-chat-messages::-webkit-scrollbar-thumb { background: var(--dct-border2); border-radius: 99px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .dct-input-row { flex-direction: column; }
  .dct-topics-grid { grid-template-columns: 1fr 1fr; }
  .dct-predict-grid { grid-template-columns: 1fr; }
  .dct-formula-grid { grid-template-columns: 1fr; }
  .dct-msg { max-width: 94%; }
  .dct-tab { padding: .6rem .6rem; font-size: .76rem; }
}