/* Vox Dei platform – light, flat, sans-serif, square corners */
:root{
  --bg:#f6f8fb; --panel:#ffffff; --ink:#1f2a37; --muted:#5b6777; --line:#d9e0ea;
  --accent:#2b6cb0; --accent-d:#1f5390; --accent-l:#e8f0fa;
  --ok:#2f855a; --ok-l:#e6f4ec; --warn:#b7791f; --warn-l:#fdf3dc; --err:#c53030; --err-l:#fde9e9;
  --live:#d9480f; --live-l:#fff0e6; --video:#2b8a8a; --video-l:#e3f4f4;
  --radius:2px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16.5px;line-height:1.6;color:var(--ink);background:var(--bg)}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .6em;font-weight:600;color:#14213d}
h1{font-size:2rem} h2{font-size:1.5rem} h3{font-size:1.2rem} h4{font-size:1.05rem}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border-radius:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.main{padding-top:26px;padding-bottom:50px;min-height:60vh}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:8px 14px;z-index:999}.skip-link:focus{left:0}
.muted{color:var(--muted)} .small{font-size:.9rem} .center{text-align:center} .right{text-align:right}
.mt{margin-top:18px}.mb{margin-bottom:18px}.nowrap{white-space:nowrap}

/* top bar */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;box-shadow:0 1px 3px rgba(20,33,61,.05)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:#14213d;font-weight:600;font-size:1.15rem}.brand:hover{text-decoration:none}
.brand-logo{height:44px;width:auto;object-fit:contain}
.mainnav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mainnav a{padding:9px 14px;color:var(--ink);font-weight:500;border-bottom:3px solid transparent}
.mainnav a:hover{text-decoration:none;background:var(--accent-l)}
.mainnav a.on{border-bottom-color:var(--accent);color:var(--accent-d)}
.mainnav .btn-register{background:var(--accent);color:#fff}.mainnav .btn-register:hover{background:var(--accent-d)}
.mainnav .btn-logout{border:1px solid var(--line)}
.greet{margin-right:8px;color:var(--muted)}
.langsw{display:inline-flex;margin-left:8px;border:1px solid var(--line)}
.langsw a{padding:6px 10px;font-size:.85rem;border-bottom:0!important}
.langsw a.on{background:var(--accent);color:#fff}
.nav-toggle{display:none;background:#fff;border:1px solid var(--line);font-size:1.4rem;padding:4px 12px;cursor:pointer}

/* buttons / forms */
.btn,button.btn{display:inline-block;padding:10px 20px;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-weight:500;cursor:pointer;border-radius:var(--radius);text-align:center}
.btn:hover{background:var(--accent-d);text-decoration:none;color:#fff}
.btn-alt{background:#fff;color:var(--accent)}.btn-alt:hover{background:var(--accent-l);color:var(--accent-d)}
.btn-ok{background:var(--ok);border-color:var(--ok)}.btn-ok:hover{background:#276749}
.btn-warn{background:var(--live);border-color:var(--live)}.btn-warn:hover{background:#b83c0a}
.btn-danger{background:var(--err);border-color:var(--err)}.btn-danger:hover{background:#9b2424}
.btn-sm{padding:5px 11px;font-size:.9rem}
.btn[disabled],.btn.disabled{background:#e3e7ee;border-color:#e3e7ee;color:#8892a0;cursor:not-allowed}
label{display:block;font-weight:500;margin:12px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=datetime-local],input[type=date],input[type=search],select,textarea{
  width:100%;padding:10px 12px;border:1px solid #bcc7d6;background:#fff;font:inherit;color:var(--ink);border-radius:var(--radius)}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid #7fb0e6;outline-offset:1px}
textarea{min-height:100px;resize:vertical}
input[type=checkbox],input[type=radio]{width:auto;margin-right:8px;transform:scale(1.2)}
.check{display:flex;align-items:flex-start;font-weight:400;margin:8px 0}.check input{margin-top:6px}
.help{font-size:.88rem;color:var(--muted);margin:3px 0 0}
.row{display:grid;gap:16px}.row.c2{grid-template-columns:1fr 1fr}.row.c3{grid-template-columns:repeat(3,1fr)}.row.c4{grid-template-columns:repeat(4,1fr)}
.hp{position:absolute;left:-5000px;height:0;overflow:hidden}
.pw-wrap{position:relative}.pw-wrap input{padding-right:84px}
.pw-toggle{position:absolute;right:4px;top:4px;bottom:4px;border:0;background:var(--accent-l);color:var(--accent-d);padding:0 12px;cursor:pointer;font:inherit;font-size:.85rem}

/* panels, alerts */
.panel{background:var(--panel);border:1px solid var(--line);padding:22px;margin-bottom:22px}
.panel h2:first-child,.panel h3:first-child{margin-top:0}
.alert{padding:12px 16px;margin:0 0 16px;border-left:5px solid;background:#fff}
.alert-success{border-color:var(--ok);background:var(--ok-l)}.alert-error{border-color:var(--err);background:var(--err-l)}
.alert-info{border-color:var(--accent);background:var(--accent-l)}.alert-warning{border-color:var(--warn);background:var(--warn-l)}
.live-alert{border-left:6px solid var(--live);background:var(--live-l);padding:14px 18px;margin-bottom:14px}
.live-alert.now{border-color:var(--ok);background:var(--ok-l)}
.live-alert.late{border-color:var(--accent);background:var(--accent-l)}
.badge{display:inline-block;padding:2px 9px;font-size:.8rem;font-weight:600;border:1px solid}
.badge-live{color:var(--live);background:var(--live-l);border-color:#f3c3a3}
.badge-video{color:var(--video);background:var(--video-l);border-color:#a9d9d9}
.badge-level{color:var(--muted);background:#f0f3f7;border-color:var(--line)}
.badge-ok{color:var(--ok);background:var(--ok-l);border-color:#b4dcc6}
.badge-bad{color:var(--err);background:var(--err-l);border-color:#f1b9b9}
.badge-warn{color:var(--warn);background:var(--warn-l);border-color:#ecd49b}
.badge-gray{color:var(--muted);background:#eef1f5;border-color:var(--line)}

/* home hero + side */
.hero{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start;margin-bottom:30px}
.hero-text{background:#fff;border:1px solid var(--line);padding:30px;border-left:6px solid var(--accent)}
.hero-text h1{margin-bottom:.4em}
.side-box{background:#fff;border:1px solid var(--line);padding:20px}
.side-box h3{margin-top:0}
.clock{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;text-align:center}
.clock .time{font-size:2rem;font-weight:600;color:var(--accent-d);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clock .date{color:var(--muted)}
.nextlive{margin-top:14px;padding:12px;background:var(--live-l);border-left:5px solid var(--live)}
.nextlive h4{margin:0 0 4px;font-size:1rem}

/* course grid */
.grid{display:grid;gap:22px}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:box-shadow .15s}
.card:hover{box-shadow:0 4px 14px rgba(20,33,61,.08)}
.card-img{aspect-ratio:16/10;background:#e8edf4;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{margin:0;font-size:1.1rem}
.card .meta{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.card .short{margin:0;color:var(--muted);font-size:.95rem}
.card .actions{margin-top:auto;padding-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.card .actions .btn{flex:1}
.accent-0{border-top:5px solid #2b6cb0}.accent-1{border-top:5px solid #2f855a}.accent-2{border-top:5px solid #b7791f}
.accent-3{border-top:5px solid #805ad5}.accent-4{border-top:5px solid #d9480f}.accent-5{border-top:5px solid #2b8a8a}

/* modal */
.modal{position:fixed;inset:0;background:rgba(20,33,61,.55);display:none;align-items:flex-start;justify-content:center;z-index:100;overflow:auto;padding:30px 14px}
.modal.open{display:flex}
.modal-box{background:#fff;max-width:760px;width:100%;border-top:6px solid var(--accent);position:relative;padding:28px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.modal-close{position:absolute;right:10px;top:8px;border:0;background:none;font-size:2rem;cursor:pointer;color:var(--muted);line-height:1}
.toc{white-space:pre-line}

/* tables */
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;background:#fff}
table.t th,table.t td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:.95rem}
table.t th{background:#eef3f9;font-weight:600;white-space:nowrap}
table.t tr:hover td{background:#fafcff}
.att-ok{color:var(--ok);font-weight:700}.att-no{color:var(--err);font-weight:700}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid var(--line);margin-bottom:24px}
.tabs a{padding:11px 18px;color:var(--ink);font-weight:500;border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs a:hover{background:var(--accent-l);text-decoration:none}
.tabs a.on{border-bottom-color:var(--accent);color:var(--accent-d);background:#fff}
.tabs .cnt{background:var(--live);color:#fff;font-size:.75rem;padding:1px 7px;margin-left:5px}

/* lessons */
.lesson{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:#fff;border:1px solid var(--line);margin-bottom:10px}
.lesson.done{background:#f1f3f5;color:#6b7686}
.lesson.locked{background:#f7f8fa;color:#9aa3b0}
.lesson .no{flex:0 0 42px;height:42px;background:var(--accent-l);color:var(--accent-d);display:flex;align-items:center;justify-content:center;font-weight:700}
.lesson.done .no{background:var(--ok-l);color:var(--ok)}
.lesson .body{flex:1}
.lesson .side{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.res-list{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.res-list a.btn{padding:6px 12px;font-size:.9rem}
.progress{height:12px;background:#e3e9f1;position:relative}.progress>span{display:block;height:100%;background:var(--ok)}
.player-wrap{position:relative;aspect-ratio:16/9;background:#000;max-width:960px}
.player-wrap iframe,.player-wrap #yt{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-shield{position:absolute;inset:0;z-index:2;background:transparent;cursor:pointer}
.player-ctrl{display:flex;gap:8px;align-items:center;margin:10px 0;flex-wrap:wrap;max-width:960px}
.player-ctrl input[type=range]{flex:1;min-width:160px;padding:0}
.timecode{font-variant-numeric:tabular-nums;min-width:110px}

/* questions */
.q{background:#fff;border:1px solid var(--line);padding:16px;margin-bottom:14px}
.q .opt{display:flex;align-items:flex-start;padding:7px 10px;border:1px solid transparent}
.q .opt:hover{background:#f5f8fc}
.q .opt.good{background:var(--ok-l);border-color:#b4dcc6}.q .opt.bad{background:var(--err-l);border-color:#f1b9b9}
.q .why{font-size:.92rem;color:var(--err);margin:2px 0 6px 30px}

/* wysiwyg */
.wys{border:1px solid #bcc7d6;background:#fff}
.wys-bar{display:flex;gap:2px;border-bottom:1px solid var(--line);background:#f1f5fa;padding:4px;flex-wrap:wrap}
.wys-bar button{border:1px solid transparent;background:none;padding:5px 11px;cursor:pointer;font:inherit;min-width:36px}
.wys-bar button:hover{background:#fff;border-color:var(--line)}
.wys-area{min-height:150px;padding:12px;outline:none}
.rich p{margin:.4em 0}

/* footer */
.footer{background:#fff;border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:.93rem}
.footer-in{text-align:center}
.footer-links{list-style:none;padding:0;margin:0 0 8px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.footer .copy{margin:0}
.to-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border:0;background:var(--accent);color:#fff;font-size:1.5rem;cursor:pointer;display:none;z-index:60;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.to-top.show{display:block}.to-top:hover{background:var(--accent-d)}

.stat-box{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.stat{background:#fff;border:1px solid var(--line);padding:10px 16px;min-width:120px}
.stat b{display:block;font-size:1.5rem;color:var(--accent-d)}
.inline-form{display:inline}
details.dd summary{cursor:pointer;color:var(--accent);font-weight:500}
.cal-table td{vertical-align:top;height:104px;width:14.28%;border:1px solid var(--line);padding:4px;font-size:.85rem;background:#fff}
.cal-table td.other{background:#f3f5f8;color:#aaa}.cal-table td.today{outline:2px solid var(--accent);outline-offset:-2px}
.cal-ev{display:block;background:var(--live-l);border-left:3px solid var(--live);padding:2px 5px;margin-top:3px;color:var(--ink)}
.install-box{max-width:760px;margin:30px auto}

@media (max-width:1100px){.grid.g4{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:1fr}}
@media (max-width:820px){.grid.g4,.grid.g3{grid-template-columns:repeat(2,1fr)}.row.c3,.row.c4{grid-template-columns:1fr 1fr}
  .nav-toggle{display:block}.mainnav{display:none;width:100%;flex-direction:column;align-items:stretch}.mainnav.open{display:flex}
  .topbar-in{flex-wrap:wrap}.langsw{align-self:flex-start}}
@media (max-width:560px){.grid.g4,.grid.g3,.grid.g2,.row.c2,.row.c3,.row.c4{grid-template-columns:1fr}body{font-size:16px}.lesson{flex-direction:column}}
@media print{.topbar,.footer,.to-top,.tabs,.no-print{display:none!important}body{background:#fff}}

/* Forțăm colțurile rotunjite și fundalul pe primul element din coloana aside (caseta de autentificare) */
aside > div:first-child, 
aside .login-box, 
aside .side-box:first-of-type {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important; /* Colțuri rotunjite */
  padding: 22px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
}

/* Anulăm orice alt fundal sau chenar interior care ar putea bloca efectul */
aside > div:first-child form, 
aside .login-box form,
aside .side-box:first-of-type form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Titlul "Autentificare" */
aside h2, aside h3, aside .login-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

/* Câmpurile de text rămân curate și albe */
aside input[type="email"], 
aside input[type="password"], 
aside input[type="text"] {
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
  background-color: #fff !important;
}

/* Butonul "Intră în cont" modernizat */
aside form button[type="submit"], 
aside .login-box button[type="submit"],
aside form .btn-primary {
  width: 100% !important;
  padding: 9px 16px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  background-color: #2563eb !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
  margin-top: 4px !important;
}

aside form button[type="submit"]:hover, 
aside .login-box button[type="submit"]:hover,
aside form .btn-primary:hover {
  background-color: #1d4ed8 !important;
}

/* Linkul de înscriere de sub buton */
aside .help, aside p.register-link, aside .text-center {
  font-size: 0.85rem !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  text-align: center !important;
}
/* Corectare spațiu superior și structură card bun venit */
.hero {
  margin-top: 0 !important;
}
.hero .hero-text {
  border-radius: 10px !important;
  padding: 25px 30px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 5px solid var(--primary, #2563eb) !important;
  background: #fff !important;
}

/* Butoane estetice și uniforme pentru student home */
.hero-text .actions .btn,
.grid .actions .btn,
.grid .actions a.btn {
  padding: 8px 16px !important;
  font-size: 0.9rem !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}
.hero-text .actions .btn:hover,
.grid .actions .btn:hover,
.grid .actions a.btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}