/* Codlandia — tema vizuală (varianta 1D, „Liquid Glass”). Se încarcă după style.css și îl suprascrie.
   Fără fonturi externe: pe Apple se folosește fontul sistemului (SF Pro), pe Windows Segoe UI, pe Android Roboto. */
:root {
  --bg: #f5f5f7;
  --card: rgba(255, 255, 255, .72);
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --line: rgba(60, 60, 67, .14);
  --accent: #2F6BFF;
  --accent-soft: rgba(47, 107, 255, .12);
  --good: #1FA971;
  --good-soft: rgba(46, 211, 160, .16);
  --bad: #FF3B5C;
  --bad-soft: rgba(255, 92, 122, .12);
  --warn: #FF9F1C;
  --radius: 24px;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 40px rgba(20, 20, 60, .10);
  --cl-violet: #7C4DFF;
  --cl-oranj: #FF9F1C;
  --cl-roz: #FF5C7A;
  --cl-menta: #2ED3A0;
  --cl-noapte: #1C1F3A;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: 64px;   /* loc pentru butonul „Raportează o problemă” */
}
/* petele de culoare de sub sticlă */
body::before, body::after {
  content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: .45;
}
body::before { width: 560px; height: 560px; top: -160px; left: -120px; background: #7FA6FF; animation: cl-drift1 22s ease-in-out infinite; }
body::after { width: 520px; height: 520px; bottom: -180px; right: -120px; background: #B39DFF; animation: cl-drift2 26s ease-in-out infinite; }
@keyframes cl-drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(80px, 50px) scale(1.1); } }
@keyframes cl-drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-70px, -60px) scale(.92); } }
@keyframes cl-reveal { from { opacity: 0; transform: translateY(24px) scale(.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cl-plutire { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes cl-lumina { 0% { transform: translateX(-60%) rotate(8deg); } 100% { transform: translateX(160%) rotate(8deg); } }

h1, h2, h3 { letter-spacing: -.025em; font-weight: 700; }
h1 { font-size: 2.6rem; letter-spacing: -.035em; }
h2 { font-size: 1.6rem; }
a { color: #0066cc; }

/* sticla */
.glass, .card, .modal, .topbar, .prog-card, .traseu-card, .badges-row .b, .fisa, .prereq-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .32));
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--shadow);
}
.card { border-radius: var(--radius); padding: 24px; }
.modal { border-radius: 28px; }
.modal-back { background: rgba(20, 20, 40, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* bara de sus: o capsulă de sticlă care plutește */
.topbar {
  position: sticky; top: 12px; z-index: 30;
  margin: 12px auto 0; max-width: 1180px; width: calc(100% - 24px);
  border-radius: 999px; padding: 8px 10px 8px 20px; gap: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .45));
}
.topbar .brand { gap: 8px; font-weight: 800; letter-spacing: -.04em; font-size: 1.15rem; }
.topbar .brand svg { width: 30px !important; height: 30px !important; }
.topbar .chip { background: var(--accent-soft); color: var(--accent); }
.iconbtn { border: none; background: rgba(120, 120, 128, .12); border-radius: 999px; padding: 6px 14px; color: var(--ink); font-size: .9rem; }
.iconbtn:hover { background: rgba(120, 120, 128, .2); }
.cl-cuv { color: var(--ink); }
.cl-cuv b { background: linear-gradient(90deg, #2F6BFF, #7C4DFF); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }

/* butoane rotunde, ca în iOS */
.btn {
  border-radius: 999px; padding: 12px 24px; font-weight: 600; font-size: 1rem;
  background: #2F6BFF; color: #fff; box-shadow: 0 6px 20px rgba(47, 107, 255, .32);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.btn:hover { transform: scale(1.03); }
.btn:active { transform: scale(.98); box-shadow: 0 2px 8px rgba(47, 107, 255, .3); }
.btn.secondary { background: rgba(255, 255, 255, .7); color: var(--ink); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 4px 14px rgba(20, 20, 60, .08); }
.btn.good { background: #1FA971; box-shadow: 0 6px 20px rgba(31, 169, 113, .3); }
.btn.small { padding: 7px 16px; font-size: .9rem; }
.btn:disabled { background: rgba(120, 120, 128, .3); box-shadow: none; transform: none; }
.pill { border-radius: 999px; }

/* harta și cardurile de program */
.map-wrap { border-radius: 28px; overflow: hidden; }
.map-wrap svg.map rect:first-of-type { rx: 24px; }
.prog-card, .traseu-card { border-radius: 22px; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
.prog-card:hover, .traseu-card:hover { transform: translateY(-4px); }
.prog-card.sel { outline: 3px solid var(--accent); outline-offset: 2px; }
.badges-row .b { border-radius: 18px; }

/* ---------- paginile noi: prezentare, curs, cursurile mele ---------- */
.cl-wrap { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.cl-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 64px 0 0; }
.cl-hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.04; margin: 0; }
.cl-grad { background: linear-gradient(90deg, #2F6BFF, #7C4DFF 50%, #FF5C7A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-lead { font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--ink-soft); max-width: 680px; margin: 0; }
.cl-sec { padding: 100px 0 0; display: flex; flex-direction: column; gap: 22px; }
.cl-sec > h2, .cl-titlu { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.07; letter-spacing: -.03em; text-align: center; margin: 0; }
.cl-r { animation: cl-reveal 1s cubic-bezier(.2, .8, .2, 1) both; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.cl-tile {
  border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 10px; color: var(--ink); text-decoration: none;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s;
}
a.cl-tile:hover, button.cl-tile:hover { transform: translateY(-6px) scale(1.012); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 60px rgba(20, 20, 60, .16); }
button.cl-tile { font: inherit; text-align: left; cursor: pointer; }
.cl-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 30px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 16px rgba(0, 0, 0, .15); }
.cl-mic { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.cl-nume { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.cl-jos { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; gap: 8px; }
.cl-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.cl-tag.ok { color: #1E7B4F; background: rgba(46, 211, 160, .18); }
.cl-tag.gri { color: #6e6e73; background: rgba(120, 120, 128, .14); }
.cl-tag.blu { color: #2F6BFF; background: rgba(47, 107, 255, .12); }
.cl-tag.ora { color: #A35400; background: rgba(255, 159, 28, .2); }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; gap: 2px; }
.seg button { min-height: 40px; padding: 0 20px; border-radius: 999px; border: none; background: transparent; font: inherit; font-weight: 600; font-size: .95rem; color: var(--ink);
  transition: background .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
.seg button.on { background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .12); }
.cl-bar { height: 6px; border-radius: 6px; background: rgba(60, 60, 67, .12); flex: 1; }
.cl-bar > i { display: block; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #2F6BFF, #7C4DFF); }
.cl-pasi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.cl-pasi .nr { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; }
.cl-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.cl-bento > * { grid-column: span 2; min-height: 150px; justify-content: flex-end; }
.cl-bento > .lat { grid-column: span 4; }
.cl-bento > .jum { grid-column: span 3; }
.cl-pret { border-radius: 36px; padding: 52px 36px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cl-subsol { color: var(--ink-soft); font-size: .78rem; text-align: center; padding: 40px 0 60px; }
.cl-curs-sus { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; padding-top: 48px; }
.cl-fereastra { border-radius: 24px; padding: 18px; animation: cl-plutire 7s ease-in-out infinite; }
.cl-ecran { position: relative; overflow: hidden; border-radius: 20px; min-height: 260px; color: #fff; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; }
.cl-ecran::after { content: ""; position: absolute; top: -50%; bottom: -50%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent); animation: cl-lumina 6s cubic-bezier(.4, 0, .2, 1) infinite; }
.cl-puncte { display: flex; gap: 8px; padding: 2px 4px 14px; }
.cl-puncte span { width: 12px; height: 12px; border-radius: 50%; }
.cl-module { border-radius: 28px; padding: 8px 26px; }
.cl-modul { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); }
.cl-modul:first-of-type { border-top: 0; }
.cl-modul .n { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; background: rgba(120, 120, 128, .14); }
.cl-modul .n.demo { background: #2F6BFF; color: #fff; }
.cl-modul .t { flex: 1; }
.cl-modul .t div { color: var(--ink-soft); font-size: .92rem; }
.cl-2col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
.cl-lipicios { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; }
.cl-suma { font-size: 3rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.cl-nav-sus { display: flex; justify-content: center; padding: 14px 16px 0; position: sticky; top: 0; z-index: 30; }
.cl-nav { border-radius: 999px; padding: 8px 8px 8px 20px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: center; }
.cl-nav a { color: var(--ink); font-size: .9rem; text-decoration: none; }
.cl-nav a.btn { color: #fff; padding: 0 16px; min-height: 36px; font-size: .9rem; }
.cl-logo, .cl-logo:hover { text-decoration: none !important; }
.cl-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.2rem; letter-spacing: -.04em; color: var(--ink) !important; }
.cl-logo svg { width: 30px; height: 30px; }


/* ---------- bara de sus a contului (capsula din machete) ---------- */
.cl-nav a.on { font-weight: 600; color: var(--accent); }
.cl-nav-ic { border: none; background: rgba(120, 120, 128, .12); border-radius: 999px; width: 34px; height: 34px; font-size: .95rem; }
.cl-pastila { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 4px 14px 4px 4px; font-size: .88rem; font-weight: 600; }
.cl-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg, #2F6BFF, #7C4DFF); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.cl-nav-ies { border: none; background: none; color: var(--ink-soft); font-size: .85rem; font-weight: 600; padding: 0 8px 0 0; }
.cl-nav-ies:hover { color: var(--bad); }

/* ---------- cursurile mele (2D) și harta unui curs (4D) ---------- */
.cl-h2 { font-size: 2.1rem; margin: 0; letter-spacing: -.025em; }
.cl-tile h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.cl-insigne { border-radius: 24px; padding: 22px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cl-insigna { width: 58px; height: 58px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .12)); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.cl-insigna:hover { transform: scale(1.1) rotate(-4deg); }
.cl-insigna svg { width: 100%; height: 100%; }
.cl-insigna.mic { width: 48px; height: 48px; }
.cl-insigna.off { filter: grayscale(1); opacity: .35; }
.cl-progres { border-radius: 24px; padding: 16px 22px; display: flex; gap: 18px; align-items: center; }
.cl-harta-card { border-radius: 28px; padding: 18px 10px; }
.cl-harta { display: block; }
.cl-ins { cursor: pointer; outline: none; }
.cl-ins circle { transition: transform .45s cubic-bezier(.2, .8, .2, 1); transform-box: fill-box; transform-origin: center; }
.cl-ins:hover circle, .cl-ins:focus circle { transform: scale(1.08); }
.cl-ins.blocat, .cl-ins.curand { cursor: default; }
.cl-urm { color: #fff; border: none; }
.cl-setari { margin: 40px 0 60px; gap: 10px; }
.modal h2 { font-size: 1.4rem; }
.modal .row { margin-top: 14px; }
.status-line .pill, .pill { background: rgba(120, 120, 128, .14); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: .85rem; font-weight: 600; }
.pill.good { background: var(--good-soft); color: #1E7B4F; }
.pill.warn { background: rgba(255, 159, 28, .18); color: #8A4B00; }

/* ---------- pagina de părinte (5D) ---------- */
.cl-parinte { padding-bottom: 60px; }
.cl-p-sus { padding-top: 44px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.cl-p-sus h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); margin: 0; }
.cl-cifre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-top: 30px; }
.cl-cifra .n { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.cl-p-card { border-radius: 28px; padding: 16px 20px; }
table.cl-tabel, .card table, table.res { border-collapse: collapse; width: 100%; font-size: .95rem; }
table.cl-tabel th, .card table th, table.res th { text-align: left; font-size: .8rem; color: var(--ink-soft); font-weight: 600; padding: 10px 12px; background: none; border: none; }
table.cl-tabel td, .card table td, table.res td { padding: 12px; border: none; border-top: 1px solid var(--line); }
.cl-bifa { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.cl-bifa:first-child { border-top: 0; }
.cl-chk, .checklist input[type=checkbox] { width: 22px; height: 22px; accent-color: #2F6BFF; flex: none; }
.pinbox { max-width: 440px; margin: 70px auto; text-align: center; border-radius: 32px; padding: 40px; }
.pinbox input { width: 220px; text-align: center; }
details.guide { border-radius: 18px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .7); padding: 12px 16px; margin: 8px 0; }
details.guide > summary { cursor: pointer; font-weight: 600; }
@media (max-width: 820px) { .cl-cifre { grid-template-columns: 1fr 1fr; } }

/* ---------- personajele (machetele P1–P5) ---------- */
.cl-pers-w { display: inline-block; flex: none; line-height: 0; }
.cl-pers-w svg { width: 100%; height: 100%; overflow: visible; }
.cl-coperta { height: 150px; border-radius: 20px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.cl-coperta .cl-pers-w { margin: 0 -14px -4px; }
.cl-univers { border-radius: 32px; padding: 26px 30px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px; align-items: center; width: 100%; }
.cl-univers h3 { font-size: 1.9rem; margin: 4px 0 8px; letter-spacing: -.025em; }
.cl-sir { display: flex; align-items: flex-end; justify-content: flex-end; gap: 2px; flex-wrap: nowrap; }
.cl-sir > div { display: flex; flex-direction: column; align-items: center; font-size: .75rem; font-weight: 600; color: #3a3a3c; max-width: 86px; text-align: center; line-height: 1.2; }
.cl-pers-card { border-radius: 24px; padding: 18px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cl-pers-card span.r2 { font-size: .8rem; color: var(--ink-soft); line-height: 1.3; }
.cl-portret { flex: none; width: 96px; height: 96px; border-radius: 22px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.cl-ecran .cl-colt { position: absolute; right: 6px; bottom: -6px; }
.cl-lume i { overflow: hidden; align-items: flex-end !important; }
@media (max-width: 820px) { .cl-univers { grid-template-columns: 1fr; } .cl-sir { justify-content: flex-start; flex-wrap: wrap; } }

/* ---------- câmpuri de formular (toate paginile) ---------- */
label.field, .field { font-size: .9rem; font-weight: 600; margin: 12px 0; }
label.field input, label.field select, .nastere select, .modal input:not([type=checkbox]):not([type=radio]), .modal select, .modal textarea, .pinbox input {
  height: 48px; border-radius: 14px; border: 1px solid rgba(60, 60, 67, .18); background: rgba(255, 255, 255, .78);
  padding: 0 16px; font: inherit; font-size: 1rem; font-weight: 400; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.modal textarea { height: auto; padding: 12px 16px; }
.pinbox input { height: 64px; font-size: 2rem; letter-spacing: 12px; }
label.field input:focus, label.field select:focus, .nastere select:focus, .modal input:focus, .modal select:focus, .pinbox input:focus {
  outline: none; border-color: #2F6BFF; box-shadow: 0 0 0 4px rgba(47, 107, 255, .15);
}
.nastere { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 8px; margin-top: 6px; }
.hint { font-weight: 400; font-size: .82rem; color: var(--ink-soft); margin-top: 6px; }
.msg { border-radius: 14px; padding: 10px 14px; margin: 8px 0; font-weight: 600; font-size: .95rem; }
.msg.no { background: var(--bad-soft); color: #B4233F; }
.msg.ok { background: var(--good-soft); color: #1E7B4F; }
.msg.info { background: rgba(255, 159, 28, .14); color: #8A4B00; font-weight: 500; }
.limba { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(120, 120, 128, .12); gap: 2px; }
.limba .lb { border: none; background: transparent; border-radius: 999px; padding: 4px 10px; font-weight: 600; font-size: .8rem; color: var(--ink); }
.limba .lb.on { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); color: var(--accent); }

/* ---------- conectare și cont nou (machetele 7D / 8D) ---------- */
.cl-auth { max-width: 1100px; margin: 0 auto; padding: 40px 22px 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.cl-auth-panou { position: relative; overflow: hidden; border-radius: 32px; padding: 44px; color: #fff; min-height: 600px;
  background: linear-gradient(150deg, #1C1F3A 0%, #2F6BFF 55%, #7C4DFF 100%); display: flex; flex-direction: column; gap: 20px; }
.cl-auth-panou::after { content: ""; position: absolute; top: -50%; bottom: -50%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); animation: cl-lumina 7s cubic-bezier(.4, 0, .2, 1) infinite; pointer-events: none; }
.cl-auth-panou h1 { color: #fff; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.05; margin: auto 0 0; }
.cl-auth-panou p { margin: 0; font-size: 1.15rem; opacity: .88; max-width: 420px; }
.cl-logo.alb, .cl-logo.alb .cl-cuv { color: #fff !important; font-size: 1.35rem; }
.cl-logo.alb .cl-cuv b { background: linear-gradient(90deg, #BFD3FF, #E2D6FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-logo.alb svg { width: 36px; height: 36px; }
.cl-lumi { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.cl-lume { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .16); }
.cl-lume i { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 19px; flex: none; }
.cl-lume div div { font-size: .8rem; opacity: .8; }
.cl-auth-forma { border-radius: 32px; padding: 44px; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.cl-auth-forma h2 { font-size: 2.2rem; margin: 0; letter-spacing: -.03em; }
.cl-auth-forma .sub { color: var(--ink-soft); margin: 4px 0 8px; }
.cl-auth-forma .btn { width: 100%; justify-content: center; margin-top: 10px; min-height: 50px; }
.cl-auth-forma .links { display: flex; justify-content: space-between; margin-top: 14px; font-size: .95rem; flex-wrap: wrap; gap: 8px; }
.cl-auth-forma .links a { cursor: pointer; }
.cl-auth-forma input.code { font-size: 1.8rem; letter-spacing: 10px; text-align: center; height: 60px; }
.cl-auth-nota { border-radius: 18px; padding: 14px 16px; margin-top: 16px; font-size: .88rem; display: flex; gap: 10px; align-items: center; color: var(--ink-soft); }
.cl-auth-nota b { color: var(--ink); }
.cl-2camp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pw { position: relative; }
.pw input { padding-right: 84px !important; }
.pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin-top: 3px; border: none; background: none; color: var(--ink-soft); font-size: .85rem; font-weight: 600; }
@media (max-width: 820px) { .cl-auth { grid-template-columns: 1fr; } .cl-auth-panou { min-height: 0; } .cl-auth-panou h1 { margin-top: 20px; } .cl-2camp { grid-template-columns: 1fr; } }

@media (max-width: 820px) {
  .cl-curs-sus, .cl-2col { grid-template-columns: 1fr; }
  .cl-bento > *, .cl-bento > .lat, .cl-bento > .jum { grid-column: span 6; }
  .cl-lipicios { position: static; }
  .topbar { border-radius: 24px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  body::before, body::after { display: none; }
  .glass, .card, .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; box-shadow: none; }
}

/* butonul „Raportează o problemă” (ca în Aventura Scratch): pe fiecare pagină, în colțul din dreapta jos, cu text */
.raport-btn { left: auto !important; right: 16px; bottom: 16px; border: 1px solid rgba(255, 255, 255, .8) !important; border-radius: 999px !important;
  background: rgba(255, 255, 255, .78) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 6px 20px rgba(20, 20, 60, .14);
  padding: 9px 16px !important; font-size: .85rem !important; font-weight: 600; opacity: 1 !important; }
.raport-btn:hover { border-color: rgba(47, 107, 255, .5) !important; }
@media (max-width: 700px) { .raport-btn span { display: none; } }
@media print { .raport-btn { display: none !important; } }