/* Prezență Student — Universitatea Politehnica Timișoara
 *
 * Direction: "Catalog". The object this replaces is a ruled register — names down the left, a
 * mark against each. So the roster is the hero, not a form with boxes underneath it: rows are
 * aligned, dense and scannable, and status is carried by a coloured edge plus a LETTER, never
 * by colour alone. That survives a colour-blind reader, a dim room and a bad projector.
 *
 * Palette from upt.ro's own stylesheets. Indigo and yellow are loud, so they are spent in two
 * places only — the institutional band and the number you actually read — and everything else
 * stays quiet. Regions are separated by ground and rule rather than by boxing each one in an
 * identical card.
 *
 * No web fonts: the hall may have no internet and twenty phones must render in under a second.
 * Numbers are tabular everywhere they are compared.
 */

:root {
  --indigo: #020373;
  --indigo-soft: #eceefb;
  --blue: #2829c7;
  --blue-bright: #4a5feb;
  --yellow: #ffd400;

  --ink: #14161d;
  --ink-2: #3b4356;
  --muted: #6d7488;
  --rule: #dde1ec;
  --rule-soft: #eaedf5;
  --ground: #f3f5fb;
  --surface: #ffffff;

  --ok: #0a6b34;
  --ok-bg: #e4f3ea;
  --ok-edge: #35a163;
  --late: #8a5a00;
  --late-bg: #fdf1d8;
  --late-edge: #d99e18;
  --exc: #1f3a93;
  --exc-bg: #e6eafa;
  --exc-edge: #5a71d4;
  --absent: #97060f;
  --absent-bg: #fbe9ea;
  --absent-edge: #d4636b;

  --r: 3px;

  --f: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
       Arial, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, Consolas, "SF Mono", monospace;
}

* { box-sizing: border-box; }

/* A class that sets `display` outranks the browser's [hidden] rule, so `el.hidden = true`
   silently stops working. The projector's "connection lost" overlay is display:flex and was
   permanently covering the QR because of exactly this. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 400 15px/1.55 var(--f);
  color: var(--ink);
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem 5rem; }

h1 {
  font-size: 1.75rem; font-weight: 650; letter-spacing: -.018em; line-height: 1.15;
  margin: 1.75rem 0 .15rem;
}
h2 {
  font-size: .95rem; font-weight: 650; letter-spacing: .005em;
  margin: 2.25rem 0 .65rem; color: var(--ink-2);
  padding-bottom: .4rem; border-bottom: 1px solid var(--rule);
}
a { color: var(--blue); text-underline-offset: 2px; }

/* --- institutional band --------------------------------------------------------------------
   Indigo with the yellow rule is the university's signature. The identity sits small and quiet;
   the page's own title is what should be large. */

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: .6rem 1.5rem;
  background: var(--indigo);
  box-shadow: inset 0 -3px 0 var(--yellow);
  color: #fff;
}
.identitate { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.identitate img { height: 30px; width: auto; }
.univ {
  font-size: .78rem; color: #a9b1e8; letter-spacing: .005em;
  border-right: 1px solid rgba(255, 255, 255, .22); padding-right: .85rem;
}
.brand { font-weight: 650; font-size: 1rem; color: #fff; text-decoration: none; }
.bar nav { display: flex; gap: 1.35rem; }
.bar nav a { color: #c3cbf2; text-decoration: none; font-size: .9rem; }
.bar nav a:hover { color: #fff; }

.banner {
  margin: 0; padding: .45rem 1.5rem;
  background: #fffdf3; border-bottom: 1px solid #efe4bd;
  color: #6b5200; font-size: .8rem;
}
.flash {
  max-width: 1180px; margin: 1rem auto 0; padding: .6rem .9rem;
  background: var(--ok-bg); border-left: 3px solid var(--ok-edge); border-radius: var(--r);
}

.muted { color: var(--muted); font-size: .88rem; }
.right { text-align: right; }
.center { text-align: center; }

/* --- the tally: two numbers facing each other ------------------------------------------------
   The one thing read from a standing position while looking up at the room. Everything here is
   sized so it survives a half-second glance. */

.tabela {
  display: grid; gap: .9rem 2rem; align-items: center;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "cifra vs delta" "bara bara bara" "detaliu detaliu detaliu"
                       "sursa sursa sursa";
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--indigo);
  border-radius: var(--r); padding: 1.15rem 1.35rem 1rem; margin-top: 1.25rem;
}
.tabela-cifra { grid-area: cifra; display: flex; align-items: baseline; gap: .65rem; }
.tabela-cifra strong {
  font-size: 4rem; line-height: .82; font-weight: 700; color: var(--indigo);
  font-variant-numeric: tabular-nums; letter-spacing: -.035em;
}
.tabela-cifra span { font-size: .82rem; color: var(--muted); line-height: 1.35; }
.tabela-cifra small { font-variant-numeric: tabular-nums; }

.tabela-vs { grid-area: vs; }
.tabela-vs label { margin: 0 0 .2rem; font-size: .78rem; color: var(--muted); font-weight: 400; }
.tabela-vs input {
  width: 5.5rem; font-size: 1.9rem; font-weight: 650; text-align: center;
  padding: .1rem .2rem; margin: 0; color: var(--ink-2);
  font-variant-numeric: tabular-nums; border-color: var(--rule);
  background: var(--ground);
}
.tabela-vs input:focus { background: #fff; }

.tabela-delta { grid-area: delta; display: flex; flex-direction: column; gap: .05rem; }
.tabela-delta b { font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; }
.tabela-delta span { font-size: .85rem; color: var(--muted); }
.tabela-delta.se-potriveste b { color: var(--ok); }
.tabela-delta.nepotrivire b { color: var(--late); }
.tabela-delta.nepotrivire.grav b { color: var(--absent); }

/* How much of the roster is accounted for, without reading a number. */
.tabela-bara {
  grid-area: bara; display: flex; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--rule-soft);
}
.tabela-bara i { display: block; height: 100%; }
.tabela-bara .b-P { background: var(--ok-edge); }
.tabela-bara .b-I { background: var(--late-edge); }
.tabela-bara .b-M { background: var(--exc-edge); }
.tabela-bara .b-A { background: var(--absent-edge); }

.tabela-detaliu {
  grid-area: detaliu; list-style: none; display: flex; flex-wrap: wrap; gap: 1.35rem;
  margin: 0; padding: .1rem 0 0;
}
.tabela-detaliu li { font-size: .85rem; color: var(--muted); }
.tabela-detaliu b {
  font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink);
  margin-right: .12rem;
}
.tabela-detaliu .d-P b { color: var(--ok); }
.tabela-detaliu .d-I b { color: var(--late); }
.tabela-detaliu .d-M b { color: var(--exc); }
.tabela-detaliu .d-A b { color: var(--absent); }
.tabela-sursa {
  grid-area: sursa; margin: 0; font-size: .82rem; padding-top: .55rem;
  border-top: 1px solid var(--rule-soft); color: var(--muted);
}

/* --- the roster: the hero -------------------------------------------------------------------
   Rows, not floating boxes. A coloured edge for peripheral vision, and a LETTER for everyone
   else — colour alone would fail a colour-blind reader and a dim lecture hall. */

/* Borders on the items, not a gap over a coloured ground: an unfilled cell at the end of the
   last row would otherwise show as a grey block. */
.chips {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  background: var(--surface);
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden;
}
/* One row per student, carrying both acts: the wide area sets attendance, the small buttons
   award or undo a point. One list of eighteen rather than the same eighteen names twice. */
.rand {
  display: flex; align-items: stretch;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.rand-prezenta { flex: 1; display: flex; min-width: 0; }
.rand-actiune { display: flex; }
.mic {
  height: 100%; width: 2.5rem; padding: 0;
  background: var(--surface); color: var(--muted);
  border: 0; border-left: 1px solid var(--rule-soft); border-radius: 0;
  font-weight: 650; font-size: .85rem; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.mic:hover:not(:disabled) { background: var(--yellow); color: #3d2f00; }
.mic:disabled { color: #c3c8d6; cursor: default; }
.mic:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: -2px; }

.chip-form { display: flex; gap: 1px; align-items: stretch; background: var(--rule); }
.chip {
  flex: 1; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  align-items: center; gap: .7rem;
  min-height: 52px; padding: .5rem .8rem; text-align: left;
  background: var(--surface); color: var(--ink); border: 0;
  border-left: 4px solid var(--rule); border-radius: 0;
  font: inherit; cursor: pointer;
}
.chip::before {
  content: "·";
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--ground); color: var(--muted);
  font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums;
}
/* Never truncate a name: an ellipsis on the one piece of content the lecturer is looking for
   defeats the whole screen. Long names wrap and the row grows. */
.chip-name { font-weight: 550; font-size: .95rem; line-height: 1.2; hyphens: auto; }
.chip-status { display: none; }              /* the letter badge says it; the word is noise */
.chip:hover { background: #f8faff; }
.chip:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: -2px; }

.chip.st-P { border-left-color: var(--ok-edge); background: var(--ok-bg); }
.chip.st-P::before { content: "P"; background: var(--ok-edge); color: #fff; }
.chip.st-I { border-left-color: var(--late-edge); background: var(--late-bg); }
.chip.st-I::before { content: "Î"; background: var(--late-edge); color: #3d2900; }
.chip.st-M { border-left-color: var(--exc-edge); background: var(--exc-bg); }
.chip.st-M::before { content: "M"; background: var(--exc-edge); color: #fff; }
.chip.st-A { border-left-color: var(--absent-edge); background: var(--absent-bg); }
.chip.st-A::before { content: "A"; background: var(--absent-edge); color: #fff; }

/* A guest from another group, here for one hour. Dashed edge so it reads as "not one of ours"
   at a glance, without competing with the status colours. */
.chip.invitat { border-left-style: dashed; }
.grupa-alta {
  display: inline-block; margin-left: .4rem; padding: 0 .35rem;
  background: var(--indigo-soft); color: var(--indigo);
  border-radius: 8px; font-size: .72rem; font-weight: 650;
}
.invitat-adauga { max-width: 34rem; }
.invitat-adauga input { margin-bottom: .5rem; }
.invitat-adauga .pick { margin: 0 0 .5rem; }
.invitat-adauga .pick-btn { min-height: 44px; font-size: .95rem; }

.pill {
  background: var(--yellow); color: #3d2f00; border-radius: 9px;
  padding: .05rem .45rem; font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- tables, cards, forms -------------------------------------------------------------------- */

table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  margin-top: .5rem; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
}
th, td { padding: .55rem .8rem; border-bottom: 1px solid var(--rule-soft); text-align: left; }
th {
  background: var(--ground); font-size: .78rem; font-weight: 650; color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
td { font-size: .92rem; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8faff; }

.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1.15rem 1.25rem; margin-top: .8rem;
}
.card ol, .card ul { margin: .5rem 0 .5rem 1.15rem; padding: 0; }
.card li { margin-bottom: .5rem; }

.row { display: flex; gap: 1.15rem; flex-wrap: wrap; align-items: flex-end; }
label {
  display: block; font-size: .8rem; color: var(--ink-2); margin-bottom: .65rem;
  font-weight: 550;
}
label.check { display: flex; align-items: center; gap: .4rem; font-weight: 400; }

input, select, textarea {
  display: block; width: 100%; padding: .45rem .6rem; margin-top: .28rem;
  font: inherit; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r); background: #fff;
}
input:focus, select:focus, textarea:focus, button:focus-visible, .btn:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--blue-bright); outline-offset: 1px;
}
textarea { font-family: var(--mono); font-size: .85rem; line-height: 1.6; }

button, .btn {
  display: inline-block; padding: .48rem .9rem; font: inherit; font-weight: 600;
  color: #fff; background: var(--blue); border: 1px solid var(--blue);
  border-radius: var(--r); cursor: pointer; text-decoration: none;
}
button:hover, .btn:hover { background: var(--blue-bright); border-color: var(--blue-bright); }
.ghost { background: var(--surface); color: var(--blue); border-color: var(--rule); }
.ghost:hover { background: var(--indigo-soft); border-color: var(--blue); color: var(--blue); }
.danger { background: var(--absent); border-color: var(--absent); }
.danger:hover { background: #b8000a; border-color: #b8000a; }
.secondary { background: var(--ok); border-color: var(--ok); }
.secondary:hover { background: #0d8440; border-color: #0d8440; }
.small { padding: .26rem .5rem; font-size: .78rem; }

/* Inline forms sit inside table cells and toolbars. Inputs are block/full-width by default,
   which stacks every field onto its own line and blows the row height up. */
.inline { display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle; }
.inline input, .inline select {
  display: inline-block; width: auto; margin-top: 0;
  padding: .28rem .45rem; font-size: .85rem;
}
td .inline + .inline { margin-left: .5rem; }

.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 1.1rem 0; }

.tag {
  display: inline-block; padding: .1rem .5rem; border-radius: 9px;
  font-size: .73rem; font-weight: 650; vertical-align: middle;
}
.tag.open { background: var(--ok-bg); color: var(--ok); }
.tag.closed { background: var(--rule-soft); color: var(--muted); }
.tag.qr { background: var(--indigo-soft); color: var(--indigo); }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.warn-tag { background: var(--late-bg); color: var(--late); }

.session-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.counter { text-align: right; }
.counter strong {
  display: block; font-size: 2.4rem; line-height: 1; font-weight: 700;
  color: var(--indigo); font-variant-numeric: tabular-nums;
}

/* --- warnings ---------------------------------------------------------------------------------
   Amber for the innocent majority, red only for the two worth looking up for. A screen that
   shouts at everything gets ignored. */

/* Closing a session is an ordinary step, not a loss. Say so, calmly. */
.stare-inchisa {
  margin: 1rem 0 0; padding: .6rem .85rem; font-size: .88rem;
  background: var(--indigo-soft); border-left: 3px solid var(--indigo);
  border-radius: 0 var(--r) var(--r) 0; color: var(--ink-2);
}
.stare-inchisa b { color: var(--indigo); }

.warnings { margin: 1.1rem 0; }
.warn {
  margin: .3rem 0; padding: .55rem .8rem; background: var(--late-bg);
  border-left: 3px solid var(--late-edge); color: #573900; font-size: .88rem; line-height: 1.5;
  border-radius: 0 var(--r) var(--r) 0;
}
.warn-ora {
  font-family: var(--mono); opacity: .6; margin-right: .5rem; font-size: .82em;
  font-variant-numeric: tabular-nums;
}
.warn form { margin-left: .4rem; }
.warn.stop { background: var(--absent-bg); border-left-color: var(--absent); color: #7d0510; }
.ok { color: var(--ok); }

/* --- grading ---------------------------------------------------------------------------------- */

.grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .8rem; }
.grade-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: .9rem 1rem;
}
.grade-card.graded { border-left: 3px solid var(--ok-edge); }
.grade-name { font-weight: 600; font-size: .98rem; }
.grade-current {
  font-size: 1.9rem; min-height: 2.2rem; color: var(--indigo); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.grade-current em { font-size: .9rem; font-weight: 400; color: var(--muted); font-style: normal; }
.pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: .28rem; margin-top: .5rem; }
.pad-btn {
  padding: .6rem 0; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); font-weight: 650; font-variant-numeric: tabular-nums;
}
.pad-btn:hover { background: var(--indigo-soft); border-color: var(--blue); color: var(--blue); }
.pad-btn.sel { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.pad-btn.wide { grid-column: span 5; font-size: .82rem; font-weight: 500; }
.motiv { margin-top: .6rem; }

footer {
  max-width: 1180px; margin: 0 auto; padding: 1.1rem 1.5rem;
  border-top: 1px solid var(--rule); display: flex; gap: 1rem; align-items: center;
  flex-wrap: wrap;
}

/* --- projector: read from the back row of a lecture hall -------------------------------------- */

body.projector { background: #fff; color: #000; }
/* .proj-wrap IS the <main> element, so it inherits the reading-width cap above. On a 1080p
   projector that cap squeezed the row to 1180px and wrapped the code above the address. */
.proj-wrap {
  max-width: none;
  display: flex; align-items: center; justify-content: center; gap: 4vw;
  min-height: 100vh; padding: 2vh 2vw; flex-wrap: wrap;
}
/* Width is set in JS to a whole multiple of the module count. Never a viewport-relative width:
   a fractional pixels-per-module scale puts every module boundary mid-pixel, which is a classic
   cause of codes that will not scan from the back rows. */
.proj-qr img { display: block; height: auto; max-width: 46vw; }
.proj-side { max-width: 42vw; }
.proj-label { font-size: 2vw; color: #4a5061; margin: .5em 0 0; font-weight: 400; }
.proj-url {
  font-size: 3.6vw; font-weight: 700; margin: .08em 0 .55em;
  word-break: break-all; color: var(--indigo); letter-spacing: -.02em;
}
.proj-code {
  font-family: var(--mono); font-size: 6.5vw; font-weight: 700;
  letter-spacing: .14em; margin: .05em 0; color: #000;
}
.proj-note { font-size: 1.4vw; color: #6d7488; margin-top: 1.2em; }
.dead {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center;
  justify-content: center; background: rgba(151, 6, 15, .96); color: #fff;
  font-size: 3vw; text-align: center; padding: 2rem; font-weight: 600;
}

/* --- the phone: five seconds, one hand --------------------------------------------------------- */

body.student { background: #fff; }
.student-wrap { max-width: 30rem; margin: 0 auto; padding: 1.4rem 1.15rem 3rem; }
.student-wrap h1 { margin-top: .3rem; color: var(--indigo); font-size: 1.5rem; }
/* The search box is the whole interaction now, so it gets the weight the roster used to have.
   Never below 16px: below that, iOS zooms the page on focus and the student loses the list. */
#cauta {
  font-size: 1.1rem; padding: .7rem .75rem; min-height: 52px; margin-top: .1rem;
  border: 1px solid var(--rule); border-bottom: 2px solid var(--blue);
}
#cauta::-webkit-search-cancel-button { cursor: pointer; }
label[for="cauta"] { font-size: .95rem; color: var(--indigo); margin-bottom: .2rem; }

.pick { list-style: none; padding: 0; margin: .9rem 0; }
.pick:empty { margin: 0; }
.pick li { margin-bottom: .35rem; }
.pick-btn {
  width: 100%; min-height: 54px; text-align: left; font-size: 1.05rem; font-weight: 500;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
  border-left: 4px solid var(--rule);
}
.pick-btn:hover, .pick-btn.chosen {
  background: var(--ok-bg); border-color: var(--ok-edge); border-left-color: var(--ok-edge);
}
.code-input {
  font-family: var(--mono);
  font-size: 2.1rem; letter-spacing: .28em; text-align: center;
  text-transform: uppercase; padding: .55rem; margin-bottom: 1rem;
}
.newcomer { margin-top: 1.5rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.newcomer summary { cursor: pointer; color: var(--blue); }
.fineprint { margin-top: 2rem; font-size: .76rem; color: var(--muted); line-height: 1.6; }

/* The login and first-run pages: the only doors into the lecturer's side. */
.poarta { padding-top: 3.5rem; }
.poarta-univ { font-size: .8rem; color: var(--muted); margin: 0 0 .2rem; }
.poarta h1 { margin-top: 0; }
.poarta form { margin-top: 1.2rem; }
.poarta input { font-size: 1.05rem; padding: .55rem .6rem; margin-bottom: .9rem; }
.poarta button { width: 100%; padding: .65rem; font-size: 1rem; }
.poarta .warn { margin-bottom: 1rem; }

.verdict { padding: 1.7rem 1.2rem; border-radius: var(--r); border-left: 4px solid; }
.verdict h1 { margin: 0 0 .3rem; font-size: 1.65rem; }
.verdict.ok { background: var(--ok-bg); color: var(--ok); border-left-color: var(--ok-edge); }
.verdict.ok h1 { color: var(--ok); }
.verdict.warn { background: var(--late-bg); color: var(--late); border-left-color: var(--late-edge); }
.verdict.warn h1 { color: var(--late); }
.verdict.stop { background: var(--absent-bg); color: var(--absent); border-left-color: var(--absent); }
.verdict.stop h1 { color: var(--absent); }

@media (max-width: 800px) {
  .tabela {
    grid-template-columns: auto 1fr;
    grid-template-areas: "cifra vs" "delta delta" "bara bara" "detaliu detaliu" "sursa sursa";
  }
}
@media (max-width: 560px) {
  main { padding: 0 1rem 4rem; }
  .tabela { grid-template-columns: 1fr; grid-template-areas: "cifra" "vs" "delta" "bara" "detaliu" "sursa"; }
  .tabela-cifra strong { font-size: 3.2rem; }
  .session-head { flex-direction: column; align-items: flex-start; }
  .univ { border-right: none; padding-right: 0; }
  .chips { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .chip, .pick-btn, .pad-btn, button, .btn { transition: background-color .1s ease; }
}

/* --- the address switch on the projector, and the network check page -------------------------- */

.proj-switch { font-size: 1.15vw; color: #6d7488; margin-top: 1.4em; line-height: 1.6; }
.proj-switch kbd {
  font-family: var(--mono); background: #eef0f5; border: 1px solid #c9cedb;
  border-bottom-width: 2px; border-radius: 4px; padding: .05em .4em; color: #2b3242;
}

.verif { list-style: none; padding: 0; margin: 1.2rem 0; }
.verif li {
  display: grid; grid-template-columns: auto 1fr auto; gap: .1rem .6rem; align-items: center;
  padding: .8rem .9rem; margin-bottom: .6rem;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface);
}
.verif-stare { grid-row: span 2; width: 14px; height: 14px; border-radius: 50%; }
.verif-stare.astept { background: #c9cedb; }
.verif-stare.merge { background: #1c7a3e; }
.verif-stare.blocat { background: #97060f; }
.verif-adresa { font-family: var(--mono); font-size: .92rem; word-break: break-all; }
.verif-eticheta { font-size: .74rem; color: var(--muted); text-align: right; }
.verif-verdict { grid-column: 2 / -1; font-size: .82rem; color: var(--ink-2); }

.verif-concluzie {
  padding: .9rem 1rem; border-radius: var(--r); border-left: 4px solid; font-size: .98rem;
  line-height: 1.55;
}
.verif-concluzie.buna { background: var(--ok-bg); border-color: var(--ok-edge); }
.verif-concluzie.atentie { background: #fdf4e3; border-color: #b8791b; }
.verif-concluzie.rea { background: #fbeaea; border-color: #97060f; }

/* The lecturer's way in from the student page. Quiet, but unmistakably a link to somewhere -
   it used to live inside .fineprint and was read as part of the privacy notice. */
.intrare-profesor {
  margin: 1.8rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule);
}
.intrare-profesor a {
  display: inline-block; padding: .5rem .85rem; font-size: .92rem; font-weight: 550;
  color: var(--blue); text-decoration: none;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface);
}
.intrare-profesor a:hover { border-color: var(--blue); }