:root {
  --mov: #714b67; --mov-inchis: #5a3c52; --text: #212529; --estompat: #6c757d;
  --linie: #e2e2e7; --fond: #f6f6f9; --alb: #fff;
  --productie: #21b799; --staging: #f4a400; --dezvoltare: #4b8fd4; --pericol: #d9534f;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--text);
       font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--mov); text-decoration: none; }
h1 { font-size: 22px; margin: 0 0 16px; font-weight: 600; }
h2 { font-size: 18px; margin: 0; font-weight: 600; }
h3 { font-size: 12px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; color: var(--estompat); }

.antet { display: flex; align-items: center; gap: 24px; height: 52px; padding: 0 24px; background: #2b2b33; color: #fff; }
.logo { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.logo-sampa { color: #fff; } .logo-sh { color: #c58fb8; }
.login .logo-sampa { color: var(--text); } .login .logo-sh { color: var(--mov); }
.meniu { display: flex; gap: 18px; flex: 1; }
.meniu a { color: #d7d7df; } .meniu a:hover { color: #fff; }
.cont { display: flex; align-items: center; gap: 10px; color: #d7d7df; }
.cont form { margin: 0; }
.cont .link { color: #d7d7df; }
.avatar { width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; }

.pagina { max-width: 1100px; margin: 0 auto; padding: 28px 24px; }
.pagina.ingusta { max-width: 640px; }
.titlu-pagina { display: flex; justify-content: space-between; align-items: center; }
.card { background: var(--alb); border: 1px solid var(--linie); border-radius: 8px; padding: 18px 20px; }
.gol { text-align: center; color: var(--estompat); padding: 40px 20px; }
.grila { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.proiect { display: block; color: var(--text); transition: border-color .12s; }
.proiect:hover { border-color: var(--mov); }
.proiect-cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.proiect-ramuri { margin-top: 10px; color: var(--estompat); font-size: 13px; }
.eticheta { font-size: 11px; background: #f1eaf0; color: var(--mov); border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
.estompat { color: var(--estompat); }
.mic { font-size: 12px; }
.nowrap { white-space: nowrap; }
.dreapta { text-align: right; }

.punct { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.etapa-production { background: var(--productie); }
.etapa-staging { background: var(--staging); }
.etapa-development { background: var(--dezvoltare); }

.buton { display: inline-block; border: 1px solid #ccc; background: var(--alb); color: var(--text); border-radius: 6px;
         padding: 7px 14px; font: inherit; cursor: pointer; text-align: center; }
.buton:hover { border-color: #999; }
.buton-principal { background: var(--mov); border-color: var(--mov); color: #fff; }
.buton-principal:hover { background: var(--mov-inchis); border-color: var(--mov-inchis); }
.buton-lat { display: block; width: 100%; padding: 11px; font-size: 15px; }
.link { background: none; border: 0; padding: 0; color: var(--mov); font: inherit; cursor: pointer; }
.pericol { color: var(--pericol); }
.alerta { background: #fdecea; color: #8a1f17; border-radius: 6px; padding: 10px 12px; }

.formular label { display: block; margin-bottom: 14px; font-weight: 500; }
.formular input, .formular select, .ramura-noua input, .ramura-noua select, .muta select {
  display: block; width: 100%; margin-top: 4px; padding: 7px 9px; border: 1px solid #ccc; border-radius: 6px; font: inherit; background: #fff; }
.formular small { display: block; color: var(--estompat); font-weight: 400; margin-top: 3px; }
.rand { display: flex; gap: 12px; align-items: flex-end; }
.rand > label { flex: 1; }
.butoane { display: flex; justify-content: flex-end; gap: 10px; }

.login { min-height: calc(100vh - 100px); display: grid; place-items: center; padding: 24px; }
.login-card { width: min(380px, 100%); text-align: center; padding: 32px; }
.login-card h1 { font-size: 30px; margin-bottom: 4px; }

.proiect-layout { display: flex; min-height: calc(100vh - 52px - 40px); }
.ramuri { width: 270px; flex: none; background: var(--alb); border-right: 1px solid var(--linie); padding: 18px 14px; }
.proiect-titlu { display: flex; flex-direction: column; margin-bottom: 18px; padding: 0 6px; }
.proiect-titlu strong { font-size: 16px; }
.proiect-titlu .estompat { font-size: 12px; }
.etapa { margin-bottom: 16px; padding: 0 6px; }
.ramura { display: block; padding: 5px 8px; margin: 0 -8px; border-radius: 5px; color: var(--text); }
.ramura:hover { background: var(--fond); }
.ramura.activa { background: #f1eaf0; color: var(--mov); font-weight: 600; }
.ramura-noua { display: flex; flex-direction: column; gap: 6px; padding: 12px 6px; border-top: 1px solid var(--linie); }
.ramura-noua input, .ramura-noua select { margin-top: 0; }
.link-setari { display: block; padding: 8px 6px; border-top: 1px solid var(--linie); }
.ramura-detalii { flex: 1; padding: 22px 28px; min-width: 0; }
.ramura-cap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.muta { display: flex; gap: 8px; margin: 0; }
.muta select { margin-top: 0; width: auto; }
.taburi { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); margin-bottom: 18px; overflow-x: auto; }
.taburi a { padding: 9px 14px; color: var(--estompat); text-transform: uppercase; font-size: 12px; font-weight: 600;
            letter-spacing: .04em; border-bottom: 2px solid transparent; white-space: nowrap; }
.taburi a:hover { color: var(--text); }
.taburi a.activ { color: var(--mov); border-bottom-color: var(--mov); }

.tabel { width: 100%; border-collapse: collapse; padding: 0; margin-bottom: 16px; overflow: hidden; }
.tabel th { text-align: left; font-size: 12px; color: var(--estompat); font-weight: 600; background: #fafafc; }
.tabel th, .tabel td { padding: 9px 14px; border-bottom: 1px solid var(--linie); }
.tabel tr:last-child td { border-bottom: 0; }
.tabel form { margin: 0; }
.subsol { text-align: center; color: var(--estompat); font-size: 12px; padding: 12px; }

@media (max-width: 760px) {
  .proiect-layout { flex-direction: column; }
  .ramuri { width: auto; border-right: 0; border-bottom: 1px solid var(--linie); }
  .ramura-detalii { padding: 18px 16px; }
  .meniu { gap: 12px; }
  .cont span { display: none; }
}

.instanta { margin-bottom: 16px; }
.instanta-cap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.instanta-cap a { font-weight: 600; }
.actiuni { display: flex; gap: 8px; flex-wrap: wrap; }
.actiuni form { margin: 0; }
.instanta-noua { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linie); }
.bifa { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; }
.bifa input { width: auto !important; margin: 0 !important; }
.stare { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 2px 9px; margin-right: 8px;
         text-transform: uppercase; letter-spacing: .03em; background: #eee; color: #555; }
.stare-pornita, .stare-job-ok { background: #ddf5ee; color: #11795f; }
.stare-oprita { background: #eee; color: #555; }
.stare-creare, .stare-stergere, .stare-job-asteapta, .stare-job-ruleaza { background: #e5effa; color: #2f6db0; }
.stare-eroare, .stare-job-eroare { background: #fdecea; color: #a12a20; }
.pericol-zona { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--linie); }
.pericol-zona summary { color: var(--pericol); cursor: pointer; }
.buton-pericol { background: var(--pericol); border-color: var(--pericol); color: #fff; }
.titlu-job { margin: 10px 0 4px; }
.jurnal { background: #1e1e24; color: #d7d7df; border-radius: 8px; padding: 14px 16px; font: 12px/1.5 ui-monospace, Menlo, monospace;
          max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word; }
code { font: 12px ui-monospace, Menlo, monospace; background: #f1f1f4; border-radius: 4px; padding: 1px 5px; }
.parola { font-size: 16px; padding: 6px 10px; user-select: all; }

.loguri-bara, .backup-bara { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.backup-bara { justify-content: space-between; }
.backup-bara p { margin: 0; }
.backup-bara form, .inline { margin: 0; display: inline; }
.segmente { display: inline-flex; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; }
.segment { border: 0; background: #fff; padding: 6px 12px; font: inherit; cursor: pointer; border-right: 1px solid #ccc; }
.segment:last-child { border-right: 0; }
.segment.activ { background: var(--mov); color: #fff; }
#filtru { padding: 6px 9px; border: 1px solid #ccc; border-radius: 6px; font: inherit; min-width: 220px; }
.jurnal-live { height: 65vh; max-height: none; }
.actiuni-backup { white-space: nowrap; }
.actiuni-backup > * { margin-left: 12px; }
.restaurare { display: inline-block; text-align: left; }
.restaurare summary { color: var(--mov); cursor: pointer; display: inline; }
.restaurare[open] form { position: absolute; right: 40px; z-index: 5; width: 380px; background: #fff; border: 1px solid var(--linie);
                         border-radius: 8px; padding: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.12); white-space: normal; }
.import summary { cursor: pointer; }
.import form { margin-top: 12px; }
.mailpit { width: 100%; height: 72vh; border: 1px solid var(--linie); border-radius: 8px; background: #fff; }
.sql textarea { width: 100%; font: 13px/1.5 ui-monospace, Menlo, monospace; border: 1px solid #ccc; border-radius: 6px; padding: 10px; margin: 8px 0; }
.sql-cap { display: flex; align-items: center; gap: 10px; }
.butoane-sql { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.spatiu { flex: 1; }
.jurnal-eroare { border-left: 4px solid var(--pericol); }
.formular h3 { margin: 4px 0 10px; }
.metrici { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.metrica { background: var(--alb); border: 1px solid var(--linie); border-radius: 8px; padding: 14px 16px; }
.metrica span { display: block; color: var(--estompat); font-size: 12px; }
.metrica strong { font-size: 20px; font-weight: 600; }
.grafic { width: 100%; height: 160px; display: block; margin: 10px 0 4px; background: #fafafc; border-radius: 4px; }
.grafic-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.terminal { height: 65vh; background: #1e1e24; border-radius: 8px; padding: 8px; }