/* ══════════════════════════════════════════════
   SPACESHIELD AI v5.2 · datascience.css
   Data Science + GenAI + IA Panel
══════════════════════════════════════════════ */

/* ── SHELL ── */
.ds-shell { display: flex; flex-direction: column; min-height: 100%; background: var(--bg); }

.ds-header { padding: 12px 16px 8px; background: var(--bg2); border-bottom: 1px solid var(--border); }
.ds-brand  { font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--accent); letter-spacing: 1.5px; }
.ds-sub    { font-size: 9px; color: var(--text3); margin-top: 3px; letter-spacing: .5px; }

/* ── TAB BAR ── */
.ds-tab-bar {
    display:    flex;
    gap:        4px;
    padding:    8px 16px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    flex-wrap:  wrap;
}
.ds-tab-btn {
    font-family:  'Share Tech Mono', monospace;
    font-size:    10px;
    padding:      5px 11px;
    background:   transparent;
    color:        var(--text3);
    border:       1px solid var(--border);
    border-radius:3px;
    cursor:       pointer;
    letter-spacing:.5px;
    transition:   all .2s;
}
.ds-tab-btn:hover  { color: var(--text1); border-color: rgba(0,212,255,.3); }
.ds-tab-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(0,212,255,.08); }

/* ── BODY ── */
.ds-body { padding: 16px; overflow-y: auto; flex: 1; }

/* ── TAB CONTENT ── */
.ds-tab-content { display: flex; flex-direction: column; gap: 16px; }

/* ── ALGO BLOCK ── */
.ds-algo-block {
    background:    var(--bg3);
    border:        1px solid var(--border);
    border-radius: 6px;
    overflow:      hidden;
}
.ds-algo-header {
    display:      flex;
    align-items:  center;
    gap:          12px;
    padding:      10px 14px;
    background:   var(--bg2);
    border-bottom:1px solid var(--border);
    flex-wrap:    wrap;
}
.ds-algo-badge {
    font-size:     9px;
    padding:       3px 8px;
    border-radius: 2px;
    letter-spacing:.5px;
    white-space:   nowrap;
}
.ds-badge-accent { background: rgba(0,212,255,.12);  color: var(--accent); border: 1px solid rgba(0,212,255,.3); }
.ds-badge-green  { background: rgba(0,255,136,.1);   color: var(--green);  border: 1px solid rgba(0,255,136,.3); }
.ds-badge-yellow { background: rgba(255,214,0,.1);   color: var(--yellow); border: 1px solid rgba(255,214,0,.3); }
.ds-badge-orange { background: rgba(255,140,0,.1);   color: var(--orange); border: 1px solid rgba(255,140,0,.3); }
.ds-badge-purple { background: rgba(155,89,255,.1);  color: var(--purple); border: 1px solid rgba(155,89,255,.3); }
.ds-badge-pink   { background: rgba(255,107,157,.1); color: var(--pink);   border: 1px solid rgba(255,107,157,.3); }
.ds-algo-desc { font-size: 10px; color: var(--text3); }

.ds-algo-body { display: flex; gap: 16px; padding: 14px; flex-wrap: wrap; align-items: flex-start; }
.ds-algo-body-full { display: block; padding: 14px; }

/* ── CODE PANEL ── */
.ds-code-panel { flex: 1; min-width: 220px; }
.ds-code-title { font-size: 9px; color: var(--text3); letter-spacing: .5px; margin-bottom: 6px; }
.ds-code {
    background:    var(--bg4);
    border:        1px solid var(--border);
    border-radius: 4px;
    padding:       10px;
    font-family:   'Share Tech Mono', monospace;
    font-size:     10px;
    color:         var(--green);
    line-height:   1.6;
    white-space:   pre;
    overflow-x:    auto;
}

/* ── CHART WRAP ── */
.ds-chart-wrap { flex: 1; min-width: 240px; }
.ds-canvas { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--border); }
.ds-nn-svg { width: 100%; height: auto; background: var(--bg4); border-radius: 4px; border: 1px solid var(--border); }

/* ── TABLES ── */
.ds-table-wrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: 'Share Tech Mono', monospace; }
.ds-table th { padding: 6px 8px; color: var(--text3); font-size: 9px; letter-spacing: .5px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ds-table td { padding: 6px 8px; color: var(--text1); border-bottom: 1px solid rgba(0,212,255,.04); }
.ds-table tr:hover td { background: rgba(0,212,255,.03); }
.ds-table .ds-row-best { background: rgba(0,255,136,.05); }
.ds-num { text-align: right; }

/* ── OVERVIEW ── */
.ds-overview { display: flex; flex-direction: column; gap: 16px; }
.ds-intro-title { font-size: 11px; color: var(--accent); letter-spacing: 1px; margin-bottom: 8px; }
.ds-intro-text  { font-size: 10px; color: var(--text2); line-height: 1.6; margin-bottom: 10px; }
.ds-stats-row   { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-stat-pill   { font-size: 9px; padding: 4px 10px; background: rgba(0,212,255,.06); border: 1px solid var(--border); border-radius: 12px; color: var(--accent); }

.ds-groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 10px; }
.ds-group-card  { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 10px; }
.ds-group-title { font-size: 9px; letter-spacing: .5px; margin-bottom: 8px; }
.ds-group-accent .ds-group-title { color: var(--accent); }
.ds-group-green  .ds-group-title { color: var(--green); }
.ds-group-yellow .ds-group-title { color: var(--yellow); }
.ds-group-orange .ds-group-title { color: var(--orange); }
.ds-group-purple .ds-group-title { color: var(--purple); }
.ds-group-pink   .ds-group-title { color: var(--pink); }
.ds-group-algs  { display: flex; flex-wrap: wrap; gap: 4px; }
.ds-alg-chip    { font-size: 8px; padding: 2px 5px; background: var(--bg4); border: 1px solid var(--border); border-radius: 2px; color: var(--text3); }

.ds-all-algs-title { font-size: 9px; color: var(--text3); letter-spacing: 1px; margin-top: 4px; }
.ds-alg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: 8px; }
.ds-alg-card {
    background:    var(--bg3);
    border:        1px solid var(--border);
    border-radius: 5px;
    padding:       10px 8px;
    text-align:    center;
    cursor:        default;
    transition:    border-color .2s, background .2s;
}
.ds-alg-card:hover { background: var(--bg4); }
.ds-alg-accent:hover { border-color: var(--accent); }
.ds-alg-green:hover  { border-color: var(--green); }
.ds-alg-yellow:hover { border-color: var(--yellow); }
.ds-alg-orange:hover { border-color: var(--orange); }
.ds-alg-purple:hover { border-color: var(--purple); }
.ds-alg-pink:hover   { border-color: var(--pink); }
.ds-alg-icon  { font-size: 18px; margin-bottom: 5px; }
.ds-alg-name  { font-size: 8px; color: var(--text1); line-height: 1.3; }
.ds-alg-group { font-size: 7px; color: var(--text3); margin-top: 3px; }

/* ── TRAIN/TEST SPLIT ── */
.ds-split-wrap { display: flex; gap: 10px; flex-wrap: wrap; }
.ds-split-block { flex: 1; min-width: 100px; padding: 10px; border-radius: 4px; border: 1px solid var(--border); }
.ds-split-lbl   { font-size: 9px; letter-spacing: .5px; margin-bottom: 4px; }
.ds-split-rows  { font-size: 8px; color: var(--text3); margin-bottom: 6px; }
.ds-split-item  { font-size: 9px; color: var(--text2); padding: 2px 0; border-bottom: 1px solid rgba(0,212,255,.05); }
.ds-split-train { background: rgba(0,212,255,.04); }
.ds-split-train .ds-split-lbl { color: var(--accent); }
.ds-split-val   { background: rgba(255,214,0,.03); }
.ds-split-val   .ds-split-lbl { color: var(--yellow); }
.ds-split-test  { background: rgba(155,89,255,.04); }
.ds-split-test  .ds-split-lbl { color: var(--purple); }

/* ── DECISION TREE ── */
.ds-tree-viz { overflow-x: auto; padding: 8px; }
.ds-tree { display: flex; flex-direction: column; align-items: center; gap: 0; font-family: 'Share Tech Mono', monospace; }
.ds-tree-node { padding: 6px 12px; border-radius: 4px; text-align: center; font-size: 10px; background: var(--bg4); border: 1px solid var(--accent); color: var(--accent); margin-bottom: 4px; }
.ds-tree-root { background: rgba(0,212,255,.08); }
.ds-tree-inner { border-color: var(--purple); color: var(--purple); background: rgba(155,89,255,.08); }
.ds-tree-label { font-size: 10px; }
.ds-tree-info  { font-size: 8px; color: var(--text3); margin-top: 2px; }
.ds-tree-branches { display: flex; gap: 30px; justify-content: center; }
.ds-tree-branch { display: flex; flex-direction: column; align-items: center; position: relative; }
.ds-tree-edge  { font-size: 8px; color: var(--text3); margin-bottom: 4px; padding: 2px 6px; border: 1px dashed var(--border); border-radius: 2px; }
.ds-tree-leaf  { padding: 6px 12px; border-radius: 4px; text-align: center; font-size: 10px; line-height: 1.4; }
.ds-leaf-safe   { background: rgba(0,255,136,.1);  border: 1px solid rgba(0,255,136,.3);  color: var(--green); }
.ds-leaf-warn   { background: rgba(255,214,0,.1);  border: 1px solid rgba(255,214,0,.3);  color: var(--yellow); }
.ds-leaf-danger { background: rgba(255,43,85,.1);  border: 1px solid rgba(255,43,85,.3);  color: var(--red); }
.ds-leaf-conf   { font-size: 8px; color: var(--text3); }

/* ── RISK BADGE ── */
.ds-risk-badge { font-size: 9px; padding: 2px 6px; border-radius: 2px; }
.ds-risk-alto   { background: rgba(255,43,85,.1);  color: var(--red);    border: 1px solid rgba(255,43,85,.2); }
.ds-risk-médio  { background: rgba(255,214,0,.1);  color: var(--yellow); border: 1px solid rgba(255,214,0,.2); }
.ds-risk-baixo  { background: rgba(0,255,136,.1);  color: var(--green);  border: 1px solid rgba(0,255,136,.2); }

/* ── CLUSTER ── */
.ds-cluster-legend { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 200px; }
.ds-cluster-card { padding: 10px; border-radius: 5px; background: var(--bg4); border: 1px solid var(--border); }
.ds-cluster-0 .ds-cluster-title { color: var(--accent); }
.ds-cluster-1 .ds-cluster-title { color: var(--green); }
.ds-cluster-2 .ds-cluster-title { color: var(--purple); }
.ds-cluster-title { font-size: 10px; letter-spacing: .5px; margin-bottom: 6px; }
.ds-cluster-prods { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ds-cluster-chip  { font-size: 8px; padding: 2px 5px; background: var(--bg3); border: 1px solid var(--border); border-radius: 2px; color: var(--text2); }
.ds-cluster-stats { font-size: 8px; color: var(--text3); }

/* ── DENDRO ── */
.ds-dendro-wrap { overflow-x: auto; }
.ds-dendro { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ds-dendro-root { font-size: 11px; color: var(--accent); padding: 6px 14px; background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.3); border-radius: 4px; }
.ds-dendro-row  { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.ds-dendro-branch { text-align: center; }
.ds-dendro-node { font-size: 10px; color: var(--purple); padding: 4px 10px; border: 1px dashed rgba(155,89,255,.4); border-radius: 3px; margin-bottom: 4px; }
.ds-dendro-val  { font-size: 9px; color: var(--text3); }

/* ── CONFUSION MATRIX ── */
.ds-cm-wrap   { font-family: 'Share Tech Mono', monospace; }
.ds-cm-header,
.ds-cm-row    { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ds-cm-lbl    { font-size: 9px; color: var(--text3); min-width: 80px; text-align: center; }
.ds-cm-cell   { width: 80px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 4px; font-size: 18px; font-weight: bold; }
.ds-cm-tp { background: rgba(0,255,136,.1);  color: var(--green);  border: 1px solid rgba(0,255,136,.3); }
.ds-cm-tn { background: rgba(0,212,255,.1);  color: var(--accent); border: 1px solid rgba(0,212,255,.3); }
.ds-cm-fp { background: rgba(255,214,0,.1);  color: var(--yellow); border: 1px solid rgba(255,214,0,.3); }
.ds-cm-fn { background: rgba(255,43,85,.1);  color: var(--red);    border: 1px solid rgba(255,43,85,.3); }
.ds-cm-sub { font-size: 9px; font-weight: normal; margin-top: 2px; }
.ds-metrics-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--bg4); border-radius: 4px; border: 1px solid var(--border); min-width: 180px; }
.ds-metric-row  { display: flex; justify-content: space-between; font-size: 10px; font-family: 'Share Tech Mono', monospace; color: var(--text2); }

/* ── CROSS VALIDATION ── */
.ds-cv-wrap   { display: flex; flex-direction: column; gap: 8px; }
.ds-cv-fold   { display: flex; align-items: center; gap: 10px; font-size: 10px; }
.ds-cv-fold-lbl { min-width: 45px; color: var(--text3); }
.ds-cv-bar-wrap { flex: 1; height: 10px; background: var(--bg4); border-radius: 2px; overflow: hidden; }
.ds-cv-bar      { height: 100%; background: linear-gradient(to right, var(--accent), var(--green)); border-radius: 2px; }
.ds-cv-score    { min-width: 45px; text-align: right; }
.ds-cv-summary  { display: flex; gap: 20px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text2); }

/* ── GRID SEARCH ── */
/* table already styled */

/* ── NEURAL NETWORKS ── */
.ds-nn-viz { flex: 1; min-width: 300px; }
.ds-lstm-wrap { display: flex; flex-direction: column; gap: 14px; }
.ds-lstm-arch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 12px; background: var(--bg4); border-radius: 4px; border: 1px solid var(--border); }
.ds-lstm-cell { text-align: center; padding: 8px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; }
.ds-lstm-hidden { border-color: var(--purple); background: rgba(155,89,255,.08); }
.ds-lstm-pred   { border-color: var(--pink); background: rgba(255,107,157,.08); }
.ds-lstm-lbl    { font-size: 9px; color: var(--text3); margin-bottom: 4px; }
.ds-lstm-val    { font-size: 12px; color: var(--accent); }
.ds-lstm-gate   { font-size: 8px; color: var(--purple); }
.ds-lstm-arrow  { color: var(--text3); font-size: 16px; }

/* ── RANDOM FOREST ── */
.ds-rf-wrap { display: flex; flex-direction: column; gap: 12px; }
.ds-rf-header { display: flex; gap: 16px; flex-wrap: wrap; }
.ds-rf-stat   { text-align: center; padding: 8px 16px; background: var(--bg4); border: 1px solid var(--border); border-radius: 4px; }
.ds-rf-val    { font-size: 16px; font-family: 'Share Tech Mono', monospace; }
.ds-rf-lbl    { font-size: 8px; color: var(--text3); margin-top: 3px; }
.ds-rf-trees  { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px; background: var(--bg4); border-radius: 4px; border: 1px solid var(--border); }
.ds-rf-tree   { text-align: center; padding: 6px 8px; }
.ds-rf-tree-icon { font-size: 20px; }
.ds-rf-tree-lbl  { font-size: 8px; color: var(--text3); }
.ds-rf-tree-acc  { font-size: 9px; }
.ds-rf-dots   { font-size: 16px; color: var(--text3); }
.ds-rf-vote   { text-align: center; padding: 6px 12px; background: rgba(0,255,136,.08); border: 1px solid rgba(0,255,136,.3); border-radius: 4px; }
.ds-rf-vote-icon { font-size: 20px; }
.ds-rf-vote-lbl  { font-size: 8px; color: var(--text3); }
.ds-rf-vote-res  { font-size: 10px; }
.ds-rf-importance { background: var(--bg4); border: 1px solid var(--border); border-radius: 4px; padding: 10px; }
.ds-rf-imp-title  { font-size: 9px; color: var(--text3); letter-spacing: .5px; margin-bottom: 8px; }

/* ── NLP ── */
.ds-nlp-wrap { display: flex; flex-direction: column; gap: 14px; }
.ds-nlp-section {}
.ds-nlp-title { font-size: 9px; color: var(--text3); letter-spacing: .5px; margin-bottom: 8px; }
.ds-token-cloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: var(--bg4); border-radius: 4px; border: 1px solid var(--border); align-items: center; }
.ds-token { color: var(--accent); font-family: 'Share Tech Mono', monospace; cursor: default; transition: color .2s; }
.ds-token:hover { color: var(--green); }
.ds-sentiment-row { display: flex; height: 20px; border-radius: 3px; overflow: hidden; gap: 1px; }
.ds-sent-bar  { display: flex; align-items: center; justify-content: center; font-size: 9px; font-family: 'Share Tech Mono', monospace; transition: width .4s; }
.ds-sent-pos  { background: rgba(0,255,136,.3); color: var(--green); }
.ds-sent-neu  { background: rgba(0,212,255,.2); color: var(--accent); }
.ds-sent-neg  { background: rgba(255,43,85,.3); color: var(--red); }

/* ── CNN ── */
.ds-cnn-wrap { display: flex; flex-direction: column; gap: 14px; }
.ds-cnn-arch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-start; padding: 12px; background: var(--bg4); border-radius: 4px; border: 1px solid var(--border); overflow-x: auto; }
.ds-cnn-block { text-align: center; padding: 8px 10px; border-radius: 4px; min-width: 60px; flex-shrink: 0; }
.ds-cnn-lbl  { font-size: 9px; letter-spacing: .5px; font-family: 'Share Tech Mono', monospace; }
.ds-cnn-sub  { font-size: 7px; margin-top: 3px; }
.ds-cnn-input  { background: rgba(0,212,255,.08);  border: 1px solid rgba(0,212,255,.3);  color: var(--accent); }
.ds-cnn-conv   { background: rgba(155,89,255,.08); border: 1px solid rgba(155,89,255,.3); color: var(--purple); }
.ds-cnn-pool   { background: rgba(0,255,136,.06);  border: 1px solid rgba(0,255,136,.3);  color: var(--green); }
.ds-cnn-flat   { background: rgba(255,214,0,.08);  border: 1px solid rgba(255,214,0,.3);  color: var(--yellow); }
.ds-cnn-dense  { background: rgba(255,140,0,.08);  border: 1px solid rgba(255,140,0,.3);  color: var(--orange); }
.ds-cnn-out    { background: rgba(255,107,157,.08);border: 1px solid rgba(255,107,157,.3);color: var(--pink); }
.ds-cnn-arrow  { color: var(--text3); font-size: 14px; flex-shrink: 0; }

/* ── GEN AI ── */
.ds-genai-rag {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         14px;
    background:      var(--bg4);
    border:          1px solid var(--border);
    border-radius:   4px;
    flex-wrap:       wrap;
    justify-content: center;
    margin-bottom:   14px;
}
.ds-rag-step { text-align: center; padding: 8px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; min-width: 64px; }
.ds-rag-final { border-color: var(--pink); background: rgba(255,107,157,.08); }
.ds-rag-icon { font-size: 18px; margin-bottom: 4px; }
.ds-rag-lbl  { font-size: 8px; color: var(--text3); line-height: 1.4; }
.ds-rag-arrow { color: var(--text3); font-size: 14px; }

.ds-genai-query-panel { background: var(--bg4); border: 1px solid var(--border); border-radius: 4px; padding: 12px; }
.ds-genai-title    { font-size: 9px; color: var(--accent); letter-spacing: 1px; margin-bottom: 10px; }
.ds-genai-examples { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ds-example-btn {
    font-family:   'Share Tech Mono', monospace;
    font-size:     10px;
    padding:       6px 12px;
    background:    rgba(0,212,255,.06);
    color:         var(--accent);
    border:        1px solid rgba(0,212,255,.2);
    border-radius: 3px;
    cursor:        pointer;
    transition:    background .2s;
}
.ds-example-btn:hover { background: rgba(0,212,255,.14); }
.ds-genai-result { min-height: 80px; padding: 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; font-size: 11px; line-height: 1.6; color: var(--text1); }
.ds-genai-placeholder { color: var(--text3); font-size: 10px; }
.ds-genai-loading { color: var(--accent); font-size: 10px; display: flex; gap: 8px; align-items: center; }
.ds-genai-error   { color: var(--red); font-size: 10px; }
.ds-genai-answer  { color: var(--text1); font-size: 11px; line-height: 1.7; }

/* ── INSIGHTS ── */
.ds-insights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 14px; }
.ds-insight-card  { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 12px; }
.ds-insight-title { font-size: 9px; color: var(--accent); letter-spacing: 1px; margin-bottom: 10px; }
.ds-insight-row   { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 10px; }
.ds-ins-rank  { min-width: 22px; color: var(--text3); font-size: 9px; }
.ds-ins-name  { min-width: 90px; color: var(--text1); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-ins-bar-wrap { flex: 1; height: 8px; background: var(--bg4); border-radius: 2px; overflow: hidden; }
.ds-ins-bar  { height: 100%; background: linear-gradient(to right, var(--accent), rgba(0,212,255,.5)); border-radius: 2px; transition: width .4s; }
.ds-ins-bar-seg  { background: linear-gradient(to right, var(--purple), rgba(155,89,255,.5)); }
.ds-ins-bar-marg { background: linear-gradient(to right, var(--green),  rgba(0,255,136,.5)); }
.ds-ins-val  { min-width: 45px; text-align: right; color: var(--text2); font-size: 9px; }

/* MRR Chart */
.ds-mrr-chart { display: flex; gap: 8px; align-items: flex-end; padding: 8px 0; }
.ds-mrr-col   { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ds-mrr-bar   { width: 24px; background: linear-gradient(to top, var(--accent), rgba(0,212,255,.3)); border-radius: 2px 2px 0 0; transition: height .4s; }
.ds-mrr-lbl   { font-size: 8px; color: var(--text3); }
.ds-mrr-val   { font-size: 8px; color: var(--accent); }

/* ── EMPTY STATE ── */
.ds-empty { color: var(--text3); font-size: 10px; text-align: center; padding: 20px; }