/* =============================================================================
   app.css — Tema vizuală NewsTrader (dark, orientată pe dashboard)
   ============================================================================= */
:root{
    --bg:#0b0f17; --panel:#121826; --panel-2:#0f1420; --line:#1f2937;
    --txt:#e5e9f0; --muted:#8b94a7; --accent:#4f7cff;
    --buy:#16c784; --sell:#ea3943; --hold:#f0b90b;
    --radius:12px; --shadow:0 6px 24px rgba(0,0,0,.28);
    font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);line-height:1.5;font-size:15px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:.2rem 0}
h2{font-size:1.05rem;margin:0 0 .8rem;color:#cfd6e4}
.muted{color:var(--muted)}
.small{font-size:.82rem}
code{background:#0a0e16;padding:.1rem .35rem;border-radius:6px;color:#a9c4ff}

/* ---- Bara de sus ---- */
.topbar{display:flex;align-items:center;gap:1.2rem;padding:.7rem 1.2rem;
    background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:700;font-size:1.05rem;color:var(--txt)}
.nav{display:flex;gap:.3rem;flex:1}
.nav a{padding:.4rem .8rem;border-radius:8px;color:var(--muted)}
.nav a:hover{background:var(--panel-2);text-decoration:none}
.nav a.active{background:var(--accent);color:#fff}
.user{display:flex;align-items:center;gap:.7rem}
.uname{color:var(--muted);font-size:.9rem}

/* ---- Container ---- */
.wrap{max-width:1080px;margin:0 auto;padding:1.4rem 1.2rem 3rem}
.page-head{margin-bottom:1rem}

/* ---- Carduri ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:1.1rem 1.2rem;margin-bottom:1.2rem;box-shadow:var(--shadow)}

/* ---- Statistici ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.2rem}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:1rem;text-align:center;box-shadow:var(--shadow)}
.stat-num{display:block;font-size:1.8rem;font-weight:700}
.stat-lbl{color:var(--muted);font-size:.85rem}
.stat-buy .stat-num{color:var(--buy)} .stat-sell .stat-num{color:var(--sell)} .stat-hold .stat-num{color:var(--hold)}

/* ---- Formulare ---- */
label{display:block;margin:.5rem 0;color:#cbd3e1;font-size:.9rem}
input,select,textarea{width:100%;padding:.55rem .7rem;margin-top:.25rem;
    background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:.95rem}
input:focus,select:focus{outline:none;border-color:var(--accent)}
.inline-form{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.inline-form input,.inline-form select{width:auto;margin-top:0}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;align-items:end}
.grid-form button{grid-column:1/-1;justify-self:start}

/* ---- Butoane ---- */
.btn{display:inline-block;padding:.5rem .9rem;border:1px solid var(--line);border-radius:8px;
    background:var(--panel-2);color:var(--txt);cursor:pointer;font-size:.9rem}
.btn:hover{border-color:var(--accent);text-decoration:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-ghost{background:transparent}
.btn-small{padding:.3rem .6rem;font-size:.8rem}
.btn-danger{color:#fff;background:var(--sell);border-color:var(--sell)}

/* ---- Semnale ---- */
.signals-list{display:flex;flex-direction:column;gap:.8rem}
.signal{border:1px solid var(--line);border-left-width:4px;border-radius:10px;padding:.9rem 1rem;background:var(--panel-2)}
.signal.sig-buy{border-left-color:var(--buy)} .signal.sig-sell{border-left-color:var(--sell)} .signal.sig-hold{border-left-color:var(--hold)}
.signal-head{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.symbol{font-weight:700;letter-spacing:.3px}
.badge{padding:.15rem .55rem;border-radius:999px;font-size:.78rem;font-weight:700;color:#04121a}
.badge.sig-buy{background:var(--buy)} .badge.sig-sell{background:var(--sell);color:#fff} .badge.sig-hold{background:var(--hold)}
.conf{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted)}
.conf-bar{display:inline-block;width:80px;height:7px;background:#0a0e16;border-radius:6px;overflow:hidden;vertical-align:middle}
.conf-bar>span{display:block;height:100%;background:var(--accent)}
.reasoning{margin:.6rem 0 .3rem;color:#dbe1ee}
.when{margin-left:auto}

/* ---- Tabele ---- */
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.table th{color:var(--muted);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.4px}
.reason-cell{max-width:420px;font-size:.9rem}
.actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}

/* ---- Flash ---- */
.flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;border:1px solid}
.flash-success{background:rgba(22,199,132,.12);border-color:var(--buy);color:#7ff0c4}
.flash-error{background:rgba(234,57,67,.12);border-color:var(--sell);color:#ff9ba1}
.flash-info{background:rgba(79,124,255,.12);border-color:var(--accent);color:#b9caff}

/* ---- Login ---- */
.login-card{max-width:380px;margin:8vh auto;background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow)}
.login-card h1{text-align:center}
.login-card .btn{width:100%;margin-top:1rem;text-align:center}

/* ---- Footer ---- */
.footer{max-width:1080px;margin:0 auto;padding:1.5rem 1.2rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.footer strong{color:#cdd5e4}

/* ---- Installer ---- */
.install-wrap{max-width:640px;margin:5vh auto;padding:0 1rem}
.steps{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.step-dot{flex:1;text-align:center;padding:.5rem;border-radius:8px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-size:.85rem}
.step-dot.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.step-dot.done{border-color:var(--buy);color:var(--buy)}
.check-ok{color:var(--buy)} .check-bad{color:var(--sell)}

@media(max-width:720px){
    .stats{grid-template-columns:repeat(2,1fr)}
    .nav{overflow:auto}
    .topbar{gap:.7rem;flex-wrap:wrap}
}

/* ============================================================
   Consens multi-AI: rânduri provider (admin) + chips de vot
   ============================================================ */
.provider-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin:14px 0 4px; padding-top:10px;
    border-top:1px solid var(--border, #22304a);
}
.provider-row .chk{ display:flex; align-items:center; gap:8px; margin:0; }
.provider-row .chk input{ width:auto; }
.provider-row .w{ display:flex; align-items:center; gap:6px; margin:0; font-size:.85rem; color:var(--muted,#8aa0c0); }
.provider-row .w input{ width:80px; }

.votes{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; align-items:center; }
.votes-title{ font-size:.78rem; color:var(--muted,#8aa0c0); margin-right:4px; width:100%; }
.vote-chip{
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 8px; border-radius:999px; font-size:.76rem;
    background:rgba(255,255,255,.05); border:1px solid transparent; cursor:default;
}
.vote-chip.sig-buy{  border-color:rgba(46,204,113,.5);  color:#63e6a0; }
.vote-chip.sig-sell{ border-color:rgba(231,76,60,.5);   color:#ff8a7a; }
.vote-chip.sig-hold{ border-color:rgba(241,196,15,.45); color:#f4d35e; }

/* ============================================================
   Evaluare / acuratețe: etichete de rezultat
   ============================================================ */
.out-badge{ display:inline-block; padding:2px 8px; border-radius:6px; font-size:.76rem; white-space:nowrap; }
.out-correct{ background:rgba(46,204,113,.15); color:#63e6a0; }
.out-wrong{   background:rgba(231,76,60,.15);  color:#ff8a7a; }
.out-neutral{ background:rgba(241,196,15,.12); color:#f4d35e; }
.out-pending{ background:rgba(255,255,255,.06); color:#8aa0c0; }
.out-skip{    background:rgba(255,255,255,.04); color:#6b7d99; }
.vote-out{ font-weight:700; margin-left:2px; }
.vote-out.out-correct{ color:#63e6a0; background:transparent; }
.vote-out.out-wrong{   color:#ff8a7a; background:transparent; }
.vote-out.out-neutral{ color:#f4d35e; background:transparent; }

/* ============================================================
   Paper-trading + backtest: P&L colors + sparkline
   ============================================================ */
.pos{ color:#63e6a0; }
.neg{ color:#ff8a7a; }
.stat-num.pos{ color:#63e6a0; }
.stat-num.neg{ color:#ff8a7a; }
.spark{ display:block; background:rgba(255,255,255,.02); border:1px solid var(--border,#22304a); border-radius:8px; }

/* ============================================================================
   v1.4 — UI: responsive mobil, hamburger, acordeoane, tablou, grafic, onboarding
   ============================================================================ */

/* ---- Meniu colapsabil (hamburger, fără JS) ---- */
.nav-toggle{ display:none; }
.hamburger{ display:none; cursor:pointer; font-size:1.5rem; line-height:1; padding:.1rem .5rem; color:var(--txt); user-select:none; }
.menu{ display:flex; flex:1; align-items:center; gap:1.2rem; }

@media (max-width:820px){
    .topbar{ flex-wrap:wrap; gap:.6rem 1rem; }
    .hamburger{ display:block; margin-left:auto; }
    .menu{ display:none; flex-basis:100%; flex-direction:column; align-items:stretch; gap:.4rem; }
    .nav-toggle:checked ~ .menu{ display:flex; }
    .nav{ flex-direction:column; gap:.2rem; }
    .nav a{ padding:.6rem .7rem; }
    .user{ justify-content:space-between; padding-top:.4rem; border-top:1px solid var(--line); }
}

/* ---- Tabele: scroll orizontal + variantă „stivuită” pe mobil ---- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrap .table{ min-width:560px; }

@media (max-width:640px){
    table.stack{ min-width:0; }
    table.stack thead{ display:none; }
    table.stack, table.stack tbody, table.stack tr, table.stack td{ display:block; width:100%; }
    table.stack tr{ border:1px solid var(--line); border-radius:10px; margin-bottom:.7rem;
        padding:.5rem .7rem; background:var(--panel-2); }
    table.stack td{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
        border:none; padding:.28rem 0; text-align:right; }
    table.stack td::before{ content:attr(data-label); color:var(--muted); font-size:.78rem;
        text-align:left; flex:0 0 auto; }
    table.stack td.full{ display:block; text-align:left; }
    table.stack td.full::before{ display:block; margin-bottom:.2rem; }
}

/* ---- Acordeon (reasoning / voturi pe tap) ---- */
.acc{ border:1px solid var(--line); border-radius:10px; background:var(--panel-2); margin:.5rem 0; }
.acc>summary{ cursor:pointer; padding:.5rem .7rem; list-style:none; display:flex; flex-wrap:wrap;
    align-items:center; gap:.4rem; font-size:.85rem; }
.acc>summary::-webkit-details-marker{ display:none; }
.acc>summary::after{ content:"▾"; margin-left:auto; color:var(--muted); transition:transform .15s; }
.acc[open]>summary::after{ transform:rotate(180deg); }
.acc-body{ padding:.3rem .8rem .7rem; border-top:1px solid var(--line); }
.acc-vote{ padding:.4rem 0; border-bottom:1px dashed var(--line); font-size:.86rem; }
.acc-vote:last-child{ border-bottom:none; }
.acc-vote .who{ font-weight:600; }

/* ---- Tablou pe simbol (scanare rapidă) ---- */
.board{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.8rem; }
.board-card{ background:var(--panel); border:1px solid var(--line); border-left-width:4px;
    border-radius:10px; padding:.7rem .8rem; }
.board-card.sig-buy{ border-left-color:var(--buy); }
.board-card.sig-sell{ border-left-color:var(--sell); }
.board-card.sig-hold{ border-left-color:var(--hold); }
.board-card.sig-none{ border-left-color:var(--line); }
.board-sym{ font-weight:700; font-size:1.05rem; letter-spacing:.02em; }
.board-row{ display:flex; align-items:center; justify-content:space-between; margin-top:.35rem; gap:.5rem; }
.board-price{ color:var(--muted); font-size:.85rem; }
.board-none{ color:var(--muted); font-size:.85rem; margin-top:.35rem; }

/* ---- Onboarding / start ---- */
.setup{ border:1px solid var(--accent); background:linear-gradient(180deg, rgba(79,124,255,.08), transparent); }
.setup-steps{ list-style:none; margin:.4rem 0 0; padding:0; }
.setup-step{ display:flex; align-items:flex-start; gap:.6rem; padding:.5rem 0; border-bottom:1px dashed var(--line); }
.setup-step:last-child{ border-bottom:none; }
.setup-ic{ flex:0 0 auto; width:1.5rem; height:1.5rem; border-radius:50%; display:grid; place-items:center;
    font-size:.85rem; background:var(--panel-2); border:1px solid var(--line); }
.setup-step.done .setup-ic{ background:rgba(22,199,132,.18); border-color:transparent; color:var(--buy); }
.setup-tx{ flex:1; }
.setup-tx .t{ font-weight:600; }
.empty{ text-align:center; padding:1.6rem 1rem; color:var(--muted); }
.empty .big{ font-size:1.7rem; margin-bottom:.3rem; }

/* ---- Grafic preț (SVG candlestick) ---- */
.chart{ display:block; width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; }
.chart .up{ stroke:var(--buy); fill:var(--buy); }
.chart .down{ stroke:var(--sell); fill:var(--sell); }

/* ---- Detaliu semnal ---- */
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.2rem; }
.detail-grid .k{ color:var(--muted); }
@media (max-width:640px){ .detail-grid{ grid-template-columns:1fr; } .nav a{font-size:1rem;} }
.back-link{ display:inline-block; margin-bottom:.6rem; }

/* ============================================================================
   v1.5 — Rafinare vizuală + hinturi (tooltip) + glosar. Suprascrie stilurile
   anterioare (vine ultima în cascadă).
   ============================================================================ */
:root{
    --accent:#5b8cff; --accent-2:#7aa2ff;
    --panel:#141b2b; --panel-2:#0f1523; --line:#243247;
    --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
    --glow:0 0 0 3px rgba(91,140,255,.25);
}
body{
    background:
        radial-gradient(1100px 600px at 15% -5%, rgba(91,140,255,.10), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(22,199,132,.06), transparent 55%),
        var(--bg);
    background-attachment:fixed;
}

/* ---- Bara de sus: gradient + blur ---- */
.topbar{
    background:linear-gradient(180deg, rgba(24,33,54,.92), rgba(18,24,38,.86));
    backdrop-filter:saturate(140%) blur(8px);
    border-bottom:1px solid var(--line);
}
.brand{letter-spacing:.02em}
.nav a{transition:background .15s, color .15s}
.nav a.active{box-shadow:0 4px 14px rgba(91,140,255,.35)}

/* ---- Carduri: highlight sus + hover ---- */
.card{
    background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    position:relative;
    transition:border-color .2s, transform .2s, box-shadow .2s;
}
.card::before{
    content:""; position:absolute; inset:0 0 auto 0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
    border-radius:var(--radius) var(--radius) 0 0;
}
h2{display:flex; align-items:center; gap:.5rem; letter-spacing:.01em}

/* ---- Butoane: gradient + lift + focus ring ---- */
.btn{transition:transform .12s, border-color .15s, background .15s, box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:none; box-shadow:var(--glow)}
.btn-primary{
    background:linear-gradient(180deg, var(--accent-2), var(--accent));
    border-color:transparent; box-shadow:0 6px 18px rgba(91,140,255,.35);
}
.btn-primary:hover{box-shadow:0 10px 24px rgba(91,140,255,.45)}
input,select,textarea{transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:var(--glow)}

/* ---- Carduri statistice: accent + hover + iconiță ---- */
.stat{
    position:relative; overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--panel);
    transition:transform .2s, border-color .2s;
}
.stat:hover{transform:translateY(-2px); border-color:var(--accent)}
.stat::after{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.5}
.stat-buy::after{background:var(--buy)} .stat-sell::after{background:var(--sell)} .stat-hold::after{background:var(--hold)}
.stat-num{letter-spacing:.01em}

/* ---- Badge & chips: pill cu fundal tentat ---- */
.badge{box-shadow:0 2px 8px rgba(0,0,0,.25)}
.vote-chip{transition:transform .12s}
.vote-chip:hover{transform:translateY(-1px)}

/* ---- Bara de încredere: gradient + mai înaltă ---- */
.conf-bar{height:9px; width:90px; background:#0a0e16; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.conf-bar>span{background:linear-gradient(90deg, var(--accent), var(--buy)); border-radius:6px}

/* ---- Tablou pe simbol: hover ---- */
.board-card{transition:transform .15s, border-color .15s, box-shadow .15s}
.board-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); text-decoration:none}

/* ---- Semnale (carduri): bară colorată în stânga ---- */
.signal{border-left:4px solid var(--line)}
.signal.sig-buy{border-left-color:var(--buy)}
.signal.sig-sell{border-left-color:var(--sell)}
.signal.sig-hold{border-left-color:var(--hold)}
.symbol{font-weight:700; letter-spacing:.02em}

/* ---- Acordeon: tranziție lină la deschidere ---- */
.acc{transition:border-color .15s}
.acc[open]{border-color:var(--accent)}
.acc>summary:hover{background:rgba(91,140,255,.06)}

/* ---- HINT (tooltip) — merge la hover ȘI la tap/focus (mobil) ---- */
.hint{
    display:inline-grid; place-items:center; width:16px; height:16px; margin-left:.25rem;
    border-radius:50%; background:var(--panel-2); border:1px solid var(--line);
    color:var(--muted); font-size:.7rem; font-style:italic; font-weight:700;
    cursor:help; position:relative; vertical-align:middle; user-select:none; line-height:1;
}
.hint:hover, .hint:focus{background:var(--accent); color:#fff; border-color:var(--accent); outline:none}
.hint::after{
    content:attr(data-tip);
    position:absolute; left:50%; bottom:150%; transform:translateX(-50%) translateY(4px);
    min-width:180px; max-width:260px; padding:.55rem .7rem;
    background:#0b1220; color:var(--txt); border:1px solid var(--accent);
    border-radius:10px; box-shadow:var(--shadow);
    font-size:.78rem; font-style:normal; font-weight:400; line-height:1.4; text-align:left;
    white-space:normal; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
    z-index:50;
}
.hint::before{
    content:""; position:absolute; left:50%; bottom:150%; transform:translateX(-50%) translateY(4px);
    border:6px solid transparent; border-top-color:var(--accent); opacity:0; transition:opacity .15s;
    z-index:51;
}
.hint:hover::after, .hint:focus::after{opacity:1; transform:translateX(-50%) translateY(0)}
.hint:hover::before, .hint:focus::before{opacity:1}
/* Pe ecrane înguste, ancorăm tooltipul la stânga ca să nu iasă din ecran */
@media (max-width:520px){
    .hint::after{ left:0; transform:translateX(0) translateY(4px); }
    .hint:hover::after, .hint:focus::after{ transform:translateX(0) translateY(0); }
    .hint::before{ left:8px; }
}

/* ---- Legendă culori ---- */
.legend{display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin:.2rem 0 .8rem; font-size:.82rem; color:var(--muted)}
.legend .lg{display:inline-flex; align-items:center; gap:.35rem}
.legend .dot{width:10px; height:10px; border-radius:50%; display:inline-block}
.dot.sig-buy{background:var(--buy)} .dot.sig-sell{background:var(--sell)} .dot.sig-hold{background:var(--hold)}

/* ---- Pagina Ghid (glosar) ---- */
.glossary{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
@media (max-width:640px){ .glossary{grid-template-columns:1fr} }
.gloss{background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem}
.gloss h3{margin:.1rem 0 .4rem; font-size:.98rem; color:#dbe3f4; display:flex; align-items:center; gap:.45rem}
.gloss p{margin:.2rem 0; color:var(--muted); font-size:.88rem}
.gloss .ic{font-size:1.1rem}
.caption{color:var(--muted); font-size:.84rem; margin:.1rem 0 .7rem}

/* ---- v1.7: recomandări din știri (panou) ---- */
.news-recs{display:flex;flex-direction:column;gap:.4rem}
.news-rec{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border:1px solid var(--line);
    border-radius:10px;background:var(--panel-2);transition:border-color .15s,transform .12s}
.news-rec:hover{border-color:var(--accent);transform:translateY(-1px);text-decoration:none}
.news-rec .nr-sym{font-weight:700;min-width:64px}
.news-rec .nr-sent{font-weight:700;min-width:48px}
.news-rec .nr-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
.news-rec .nr-src{flex:0 0 auto}
@media (max-width:640px){ .news-rec{flex-wrap:wrap} .news-rec .nr-title{flex-basis:100%;white-space:normal} }