/* DataForge Academy — Frontend Styles */
:root {
  --dfa-bg:      #0a0a0f;
  --dfa-surface: #111118;
  --dfa-s2:      #1a1a24;
  --dfa-border:  #2a2a3a;
  --dfa-text:    #e8e8f0;
  --dfa-muted:   #6b6b80;
  --dfa-sql:     #f59e0b;
  --dfa-sqld:    rgba(245,158,11,0.12);
  --dfa-py:      #22d3ee;
  --dfa-pyd:     rgba(34,211,238,0.12);
  --dfa-bi:      #a78bfa;
  --dfa-bid:     rgba(167,139,250,0.12);
  --dfa-ai:      #34d399;
  --dfa-aid:     rgba(52,211,153,0.12);
  --dfa-accent:  #ff4d6d;
  --dfa-r:       12px;
}

.dfa-platform { font-family: 'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; color: var(--dfa-text); background: var(--dfa-bg); border-radius: 16px; overflow: hidden; }

/* ── NAV ── */
.dfa-nav { display:flex; align-items:center; justify-content:space-between; padding:16px 32px; background: rgba(10,10,15,0.95); border-bottom:1px solid var(--dfa-border); position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); }
.dfa-nav-logo { font-weight:800; font-size:1.1rem; letter-spacing:-0.5px; }
.dfa-nav-logo em { font-style:normal; color:var(--dfa-accent); }
.dfa-nav-tabs { display:flex; gap:4px; }
.dfa-nav-tab { font-size:0.72rem; font-weight:700; padding:6px 14px; border-radius:6px; border:1px solid transparent; cursor:pointer; transition:all 0.2s; background:none; color:var(--dfa-muted); letter-spacing:0.06em; text-transform:uppercase; }
.dfa-nav-tab:hover,.dfa-nav-tab.active { color:var(--dfa-text); }
.dfa-nav-tab[data-track="sql"].active { border-color:var(--dfa-sql); color:var(--dfa-sql); background:var(--dfa-sqld); }
.dfa-nav-tab[data-track="python"].active { border-color:var(--dfa-py); color:var(--dfa-py); background:var(--dfa-pyd); }
.dfa-nav-tab[data-track="bi"].active { border-color:var(--dfa-bi); color:var(--dfa-bi); background:var(--dfa-bid); }
.dfa-nav-tab[data-track="ai"].active { border-color:var(--dfa-ai); color:var(--dfa-ai); background:var(--dfa-aid); }
.dfa-nav-tab[data-track="lb"].active { border-color:var(--dfa-accent); color:var(--dfa-accent); }
.dfa-xp-badge { font-size:0.72rem; font-weight:700; padding:5px 12px; border-radius:100px; background:var(--dfa-s2); border:1px solid var(--dfa-border); color:var(--dfa-ai); }

/* ── PANELS ── */
.dfa-panel { display:none; padding:32px; }
.dfa-panel.active { display:block; }

/* ── SECTION HEADER ── */
.dfa-section-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:28px; gap:24px; }
.dfa-track-label { font-size:0.65rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:8px; }
.dfa-track-label.sql { color:var(--dfa-sql); }
.dfa-track-label.py  { color:var(--dfa-py); }
.dfa-track-label.bi  { color:var(--dfa-bi); }
.dfa-track-label.ai  { color:var(--dfa-ai); }
.dfa-section-head h2 { font-size:1.6rem; font-weight:800; letter-spacing:-0.5px; margin:0; }
.dfa-progress-info { text-align:right; }
.dfa-progress-num  { font-size:2rem; font-weight:800; letter-spacing:-1px; }
.dfa-progress-num.sql { color:var(--dfa-sql); } .dfa-progress-num.py { color:var(--dfa-py); }
.dfa-progress-num.bi  { color:var(--dfa-bi); }  .dfa-progress-num.ai { color:var(--dfa-ai); }
.dfa-progress-bar  { width:180px; height:5px; background:var(--dfa-border); border-radius:3px; overflow:hidden; margin-top:6px; }
.dfa-progress-fill { height:100%; border-radius:3px; transition:width 0.6s; }
.fill-sql { background:var(--dfa-sql); } .fill-py { background:var(--dfa-py); }
.fill-bi  { background:var(--dfa-bi); }  .fill-ai { background:var(--dfa-ai); }

/* ── CODE PANEL ── */
.dfa-code-panel { background:var(--dfa-surface); border:1px solid var(--dfa-border); border-radius:var(--dfa-r); overflow:hidden; }
.dfa-code-header { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:var(--dfa-s2); border-bottom:1px solid var(--dfa-border); }
.dfa-code-dots { display:flex; gap:5px; }
.dfa-dot { width:10px; height:10px; border-radius:50%; }
.dot-r{background:#ff5f57}.dot-y{background:#febc2e}.dot-g{background:#28c840}
.dfa-code-fname { font-family:monospace; font-size:0.72rem; color:var(--dfa-muted); margin-left:8px; }
.dfa-code-body  { padding:20px; font-family:'Consolas','Monaco',monospace; font-size:0.82rem; line-height:1.8; color:#cdd6f4; background:#0d1117; min-height:180px; white-space:pre-wrap; }
.dfa-code-output { padding:14px 20px; background:#060810; border-top:1px solid var(--dfa-border); font-family:monospace; font-size:0.78rem; min-height:60px; color:var(--dfa-ai); white-space:pre-wrap; }
.dfa-output-label { font-size:0.6rem; color:var(--dfa-muted); margin-bottom:4px; letter-spacing:0.1em; text-transform:uppercase; }
textarea.dfa-code-input { width:100%; min-height:180px; background:#0d1117; color:#cdd6f4; border:none; padding:20px; font-family:'Consolas','Monaco',monospace; font-size:0.82rem; line-height:1.8; resize:vertical; outline:none; }
textarea.dfa-code-input:focus { box-shadow:inset 0 0 0 2px rgba(108,108,240,0.3); }

/* ── SQL LAYOUT ── */
.dfa-sql-layout  { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.dfa-problem-panel { background:var(--dfa-surface); border:1px solid var(--dfa-border); border-radius:var(--dfa-r); padding:24px; }
.dfa-diff { font-size:0.65rem; font-weight:700; padding:3px 9px; border-radius:4px; display:inline-block; margin-bottom:16px; text-transform:uppercase; }
.diff-easy  {background:rgba(34,211,238,0.15);color:#22d3ee}
.diff-medium{background:rgba(245,158,11,0.15);color:#f59e0b}
.diff-hard  {background:rgba(255,77,109,0.15);color:#ff4d6d}
.dfa-prob-title { font-size:1.1rem; font-weight:700; margin-bottom:10px; }
.dfa-prob-desc  { font-size:0.85rem; color:var(--dfa-muted); line-height:1.7; margin-bottom:18px; }
.dfa-schema-table { width:100%; border-collapse:collapse; font-family:monospace; font-size:0.74rem; margin-bottom:20px; }
.dfa-schema-table th { text-align:left; padding:7px 10px; background:var(--dfa-s2); color:var(--dfa-muted); border:1px solid var(--dfa-border); }
.dfa-schema-table td { padding:7px 10px; border:1px solid var(--dfa-border); }
.col-key{color:var(--dfa-sql)} .col-type{color:var(--dfa-py)}
.dfa-problem-list { display:flex; flex-direction:column; gap:4px; max-height:400px; overflow-y:auto; }
.dfa-prob-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:all 0.15s; font-size:0.85rem; }
.dfa-prob-item:hover { background:var(--dfa-s2); }
.dfa-prob-item.active { background:var(--dfa-sqld); border-color:var(--dfa-sql); }
.dfa-prob-item.solved { color:var(--dfa-muted); }
.dfa-prob-item.solved::after { content:'✓'; margin-left:auto; color:var(--dfa-ai); font-size:0.75rem; }
.dfa-prob-num { font-family:monospace; font-size:0.65rem; color:var(--dfa-muted); min-width:32px; }

/* ── PYTHON LAYOUT ── */
.dfa-py-layout { display:grid; grid-template-columns:220px 1fr; gap:20px; }
.dfa-module-list { display:flex; flex-direction:column; gap:3px; }
.dfa-mod-item { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:all 0.15s; font-size:0.84rem; }
.dfa-mod-item:hover { background:var(--dfa-s2); }
.dfa-mod-item.active { background:var(--dfa-pyd); border-color:var(--dfa-py); color:var(--dfa-py); }
.dfa-mod-item.done { color:var(--dfa-muted); }
.dfa-mod-item.done::after { content:'✓'; margin-left:auto; color:var(--dfa-ai); font-size:0.72rem; }
.dfa-mod-num { font-family:monospace; font-size:0.62rem; color:var(--dfa-muted); min-width:22px; }
.dfa-repl-panel { background:var(--dfa-s2); border:1px solid var(--dfa-border); border-radius:var(--dfa-r); overflow:hidden; }
.dfa-repl-top { padding:18px 22px; border-bottom:1px solid var(--dfa-border); }
.dfa-repl-tabs { display:flex; background:var(--dfa-surface); border-bottom:1px solid var(--dfa-border); }
.dfa-rtab { font-family:monospace; font-size:0.72rem; padding:10px 18px; cursor:pointer; color:var(--dfa-muted); border-bottom:2px solid transparent; transition:all 0.2s; }
.dfa-rtab.active { color:var(--dfa-py); border-color:var(--dfa-py); }

/* ── BI LAYOUT ── */
.dfa-bi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.dfa-asn-card { background:var(--dfa-surface); border:1px solid var(--dfa-border); border-radius:var(--dfa-r); padding:22px; cursor:pointer; transition:all 0.2s; position:relative; }
.dfa-asn-card::before { content:''; position:absolute; top:0;left:0;right:0;height:3px; background:var(--dfa-bi); transform:scaleX(0); transition:transform 0.3s; transform-origin:left; border-radius:var(--dfa-r) var(--dfa-r) 0 0; }
.dfa-asn-card:hover::before { transform:scaleX(1); }
.dfa-asn-card:hover { border-color:var(--dfa-bi); transform:translateY(-2px); }
.dfa-asn-title { font-size:1rem; font-weight:700; margin-bottom:8px; }
.dfa-asn-desc  { font-size:0.82rem; color:var(--dfa-muted); line-height:1.6; margin-bottom:16px; }
.dfa-asn-meta  { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.dfa-asn-due   { font-family:monospace; font-size:0.65rem; color:var(--dfa-muted); }
.dfa-xp        { font-family:monospace; font-size:0.65rem; font-weight:700; padding:3px 8px; border-radius:4px; background:var(--dfa-bid); color:var(--dfa-bi); }
.dfa-status-badge { font-size:0.65rem; font-weight:700; padding:3px 8px; border-radius:4px; text-transform:uppercase; }
.status-open     { background:rgba(34,211,238,0.15); color:#22d3ee; }
.status-started  { background:rgba(245,158,11,0.15); color:#f59e0b; }
.status-submitted{ background:rgba(52,211,153,0.15); color:#34d399; }

/* ── AI LAYOUT ── */
.dfa-ai-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:24px; }
.dfa-proj-card { background:var(--dfa-s2); border:1px solid var(--dfa-border); border-radius:var(--dfa-r); padding:24px; cursor:pointer; transition:all 0.2s; position:relative; overflow:hidden; }
.dfa-proj-card::after { content:''; position:absolute; top:0;left:0;right:0; height:3px; background:var(--dfa-ai); transform:scaleX(0); transition:transform 0.3s; transform-origin:left; }
.dfa-proj-card:hover::after { transform:scaleX(1); }
.dfa-proj-card:hover { border-color:var(--dfa-ai); transform:translateY(-2px); }
.dfa-proj-card.locked { opacity:0.45; cursor:default; }
.dfa-proj-card.locked:hover { transform:none; border-color:var(--dfa-border); }
.dfa-proj-card.locked::after { display:none; }
.dfa-proj-icon  { font-size:1.8rem; margin-bottom:14px; }
.dfa-proj-title { font-size:0.95rem; font-weight:700; margin-bottom:7px; }
.dfa-proj-desc  { font-size:0.8rem; color:var(--dfa-muted); line-height:1.6; margin-bottom:14px; }
.dfa-tech-tags  { display:flex; flex-wrap:wrap; gap:5px; }
.dfa-ttag { font-family:monospace; font-size:0.6rem; padding:2px 7px; border-radius:3px; background:var(--dfa-aid); color:var(--dfa-ai); }
.dfa-proj-status { display:flex; align-items:center; gap:5px; font-family:monospace; font-size:0.62rem; color:var(--dfa-muted); margin-top:12px; }
.dfa-sdot { width:6px; height:6px; border-radius:50%; }
.sdot-live  { background:var(--dfa-ai); animation:dfa-pulse 2s infinite; }
.sdot-build { background:var(--dfa-sql); animation:dfa-pulse 2s infinite; }
.sdot-lock  { background:var(--dfa-muted); }
@keyframes dfa-pulse { 0%,100%{opacity:1}50%{opacity:0.3} }

.dfa-deploy-panel { background:var(--dfa-surface); border:1px solid var(--dfa-border); border-radius:var(--dfa-r); padding:24px; }
.dfa-deploy-title { font-size:0.95rem; font-weight:700; margin-bottom:20px; }
.dfa-steps-row { display:flex; margin-bottom:20px; }
.dfa-step { flex:1; text-align:center; position:relative; }
.dfa-step::after { content:''; position:absolute; top:17px; left:50%; width:100%; height:2px; background:var(--dfa-border); z-index:0; }
.dfa-step:last-child::after { display:none; }
.dfa-step-circle { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 6px; position:relative; z-index:1; font-family:monospace; font-size:0.7rem; font-weight:700; }
.sc-done    { background:var(--dfa-ai); color:#0a0a0f; }
.sc-active  { background:var(--dfa-sql); color:#0a0a0f; }
.sc-pending { background:var(--dfa-s2); color:var(--dfa-muted); border:1px solid var(--dfa-border); }
.dfa-step-lbl { font-size:0.68rem; color:var(--dfa-muted); }

/* ── LEADERBOARD ── */
.dfa-lb { background:var(--dfa-surface); border:1px solid var(--dfa-border); border-radius:var(--dfa-r); overflow:hidden; }
.dfa-lb-head { padding:16px 24px; background:var(--dfa-s2); border-bottom:1px solid var(--dfa-border); font-weight:700; }
.dfa-lb-row { display:grid; grid-template-columns:44px 1fr repeat(4,70px); align-items:center; gap:12px; padding:12px 24px; border-bottom:1px solid var(--dfa-border); transition:background 0.15s; }
.dfa-lb-row:hover { background:var(--dfa-s2); }
.dfa-lb-row:last-child { border:none; }
.dfa-lb-row.you { background:rgba(245,158,11,0.05); border-left:3px solid var(--dfa-sql); }
.dfa-lb-rank { font-family:monospace; font-size:0.75rem; color:var(--dfa-muted); text-align:center; }
.dfa-lb-name { font-size:0.86rem; }
.dfa-lb-sc   { font-family:monospace; font-size:0.75rem; text-align:center; }

/* ── BUTTONS ── */
.dfa-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:8px; border:none; cursor:pointer; font-size:0.78rem; font-weight:700; transition:all 0.15s; letter-spacing:0.02em; }
.dfa-btn-sql { background:var(--dfa-sql); color:#0a0a0f; }
.dfa-btn-sql:hover { background:#fbbf24; transform:translateY(-1px); }
.dfa-btn-py  { background:var(--dfa-py);  color:#0a0a0f; }
.dfa-btn-py:hover  { background:#67e8f9; transform:translateY(-1px); }
.dfa-btn-bi  { background:var(--dfa-bi);  color:#0a0a0f; }
.dfa-btn-bi:hover  { background:#c4b5fd; transform:translateY(-1px); }
.dfa-btn-ai  { background:var(--dfa-ai);  color:#0a0a0f; }
.dfa-btn-ai:hover  { background:#6ee7b7; transform:translateY(-1px); }
.dfa-btn-ghost { background:transparent; color:var(--dfa-text); border:1px solid var(--dfa-border); }
.dfa-btn-ghost:hover { border-color:var(--dfa-text); }
.dfa-btn-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

/* ── MODAL ── */
.dfa-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:9999; display:none; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
.dfa-modal-overlay.open { display:flex; }
.dfa-modal { background:var(--dfa-surface); border:1px solid var(--dfa-border); border-radius:16px; max-width:620px; width:90%; padding:36px; position:relative; animation:dfa-modal-in 0.2s ease-out; }
@keyframes dfa-modal-in { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.dfa-modal-close { position:absolute; top:16px; right:16px; background:var(--dfa-s2); border:1px solid var(--dfa-border); color:var(--dfa-muted); width:28px; height:28px; border-radius:6px; cursor:pointer; font-size:0.85rem; display:flex; align-items:center; justify-content:center; }
.dfa-modal-close:hover { color:var(--dfa-text); }
.dfa-modal-track-label { font-size:0.62rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:8px; }
.dfa-modal h3 { font-size:1.3rem; font-weight:800; margin-bottom:12px; }
.dfa-modal p  { font-size:0.86rem; color:var(--dfa-muted); line-height:1.7; margin-bottom:16px; }

/* ── TOAST ── */
.dfa-toast { position:fixed; bottom:24px; right:24px; z-index:99999; padding:12px 20px; border-radius:10px; font-size:0.85rem; font-weight:600; color:#fff; transform:translateY(60px); opacity:0; transition:all 0.3s; pointer-events:none; }
.dfa-toast.show { transform:translateY(0); opacity:1; }
.dfa-toast.success { background:#166534; border:1px solid #16a34a; }
.dfa-toast.error   { background:#991b1b; border:1px solid #dc2626; }

@media(max-width:768px){
  .dfa-nav{padding:12px 16px}
  .dfa-panel{padding:20px 16px}
  .dfa-sql-layout,.dfa-py-layout,.dfa-bi-grid,.dfa-ai-grid{grid-template-columns:1fr}
  .dfa-lb-row{grid-template-columns:36px 1fr 60px}
  .dfa-lb-sc:not(:nth-child(3)){display:none}
}