/* ==========================================================================
   FONTURILE SITE-ULUI — SURSA UNICA. Schimbi fontul intregului site de AICI
   (si, daca e webfont nou, actualizezi <link>-ul Google Fonts din App.razor).
     --font-ui        : interfata (meniu, texte, butoane)
     --font-calc      : paginile de calcul (aer de terminal; acopera greaca:
                        a/b/g -> alfa beta gama etc. Courier New NU le avea)
     --font-narrative : pasajele narative din breviare (serif)
   ========================================================================== */
:root {
    --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-calc: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
    --font-narrative: Georgia, 'Times New Roman', serif;
    --bs-body-font-family: var(--font-ui);

    /* ── SCARA TIPOGRAFICA A PAGINILOR DE CALCUL ─────────────────────────────
       Trei trepte, nu cinci. Inainte, un singur .beam-result-card continea
       11.84 / 12.48 / 13.6 / 15.2 / 16 px in trei familii de litere (mono,
       Georgia, serif-ul TeX din MathJax) — de aici senzatia de text dezordonat.

       Fiindca --font-calc si --font-ui au ACELASI raport x-height (0.55em) si
       aceeasi inaltime de majuscula (0.73em), px-ii sunt direct comparabili
       intre ele. Georgia NU: 0.48em, deci acelasi px arata mai mic — motiv in
       plus sa nu amestecam serif-ul in cardurile de calcul.

       --fs-micro : etichete uppercase de camp (.beam-label, .beam-subheading)
       --fs-small : titluri de sectiune uppercase (.beam-card-header)
       --fs-body  : TOT continutul care se citeste — proza, tabele, text de
                    ajutor, verdicte SI formulele MathJax. Un singur pas.
       --fs-title : titlul paginii (h1) */
    --fs-micro: 0.68rem;
    --fs-small: 0.74rem;
    --fs-body: 0.8rem;
    --fs-title: 1.1rem;
}

html, body {
    font-family: var(--font-ui);
}

/* Etichetele din SVG-urile generate folosesc atribute font-family (in care
   var() nu functioneaza) — le suprascriem central: CSS bate atributele de
   prezentare SVG. Acopera toate variantele ("Courier New", 'Courier New',
   monospace etc.) prin potrivire de substring. */
text[font-family*="Courier"], tspan[font-family*="Courier"] {
    font-family: var(--font-calc);
}
text[font-family*="Georgia"], tspan[font-family*="Georgia"] {
    font-family: var(--font-narrative);
}

/* Simbolurile grecesti din etichetele cu text-transform: uppercase trebuie
   exceptate: uppercase(a-grec) = A-mare grec, vizual identic cu A latin
   (la fel beta->B, niu->N). Se aplica pe <span class="sym">a_cc</span>. */
.sym { text-transform: none; }

a, .btn-link {
    color: var(--bs-link-color);
}

.btn-primary {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary-border-subtle);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ===== JointLib Logo ===== */
:root                    { --logo-mark-color: #2c74a6; }
[data-bs-theme="dark"]   { --logo-mark-color: #5fa9d6; }

.logo-mark-svg   { color: var(--logo-mark-color); }
.logo-wordmark   { font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; }

/* Marca de brand folosită ca iconiță inline (JointMark.razor) — se poartă ca un bi-icon.
   Dimensiunea vine din atributele width/height=1em ale SVG-ului; aici doar alinierea. */
.joint-mark      { vertical-align: -0.15em; }
.logo-api        { color: #1e6fa8; }
[data-bs-theme="dark"] .logo-api { color: #4a90b8; }

/* ===== Sidebar collapse (driven by html.sidebar-collapsed set via JS) =====
   DOAR desktop: sub 641px bara e o banda orizontala, iar "ingustarea la 68px"
   n-ar avea niciun sens acolo. Fara media query, o preferinta salvata de pe
   telefon (localStorage e comun) ar strica layoutul la urmatoarea vizita. */
@media (min-width: 641px) {
    html.sidebar-collapsed .sidebar               { width: 68px; }
    html.sidebar-collapsed .logo-wordmark         { display: none; }
    html.sidebar-collapsed .navbar-brand          { justify-content: center !important;
                                                    padding-left: 0 !important;
                                                    padding-right: 0 !important;
                                                    gap: 0 !important; }
    html.sidebar-collapsed .link-label            { display: none; }
    html.sidebar-collapsed .collapse-arrow        { display: none; }
    html.sidebar-collapsed .nav-item              { padding-left: 0 !important; padding-right: 0 !important; }
    html.sidebar-collapsed .nav-link              { justify-content: center !important; padding: 0.75rem 0.5rem; gap: 0; }
    html.sidebar-collapsed .collapse              { display: none !important; }
    html.sidebar-collapsed .sidebar .container-fluid { justify-content: center !important; padding: 0; }
    html.sidebar-collapsed .sidebar .top-row        { padding-left: 16px !important; padding-right: 0 !important; justify-content: center !important; }
}


/* ===== Meniu pe mobil (sub 641px) =====
   Lista de navigare e ascunsa implicit (regula din NavMenu.razor.css) si se deschide
   de aici. Selectorul tinteste <html>, deci NU poate sta in CSS-ul scoped.
   Specificitate: `html.sidebar-open .nav-scrollable` = (0,2,1), peste `.nav-scrollable[b-x]`
   = (0,2,0) al regulii scoped care o ascunde — deci castiga, fara !important.

   Starea NU se salveaza in localStorage: pe mobil meniul se poarta ca un dropdown
   (deschis intentionat, inchis dupa ce alegi), nu ca o preferinta de layout. */
@media (max-width: 640.98px) {
    html.sidebar-open .nav-scrollable {
        display: block;
        max-height: 70vh;
        overflow-y: auto;
    }
}


/* ===== Login & Register — center the auth card ===========================
   Login/Register render inside MainLayout's <main> (AccountLayout uses
   @layout MainLayout) and carry a marker class `.auth-page` on their root
   div. The background is now the plain dashboard <main>, identical to every
   other page — the decorative SVG was removed. Only the vertical centering of
   the login/register card is kept.
   <main> is a flex column (top bar + content + footer); .content fills the
   middle, so making it a centered flex column drops the card exactly between
   the top bar and the footer. No magic numbers, no extra scrollbar; a tall
   form just grows and scrolls normally — never clipped.
   The `mt-4` class was removed from the page roots so centering is symmetric. */
main:has(.auth-page) > .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* ===== end login/register centering ====================================== */

/* Aceeași centrare verticală pentru pagina de mesaje: fereastra ei are înălțime
   fixă și rămânea lipită de bara de sus (spațiu doar jos). Centrată în .content,
   spațiul se distribuie simetric sus/jos, între bara de sus și footer. */
main:has(.messages-page) > .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ===== Content cards (panel pentru pagini de listă/grid pe fundal plat) =====
   Folosit pe /my-tools și /library ca să nu mai pară conținutul „lipit" pe
   fundalul monocrom. Theme-aware: lift subtil în dark, alb în light. */
.page-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    background: var(--bs-body-bg);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
    padding: 24px 28px 30px;
}

[data-bs-theme="dark"] .page-card {
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.30);
}


/* ===== Consolă (panouri: dashboard personal, dashboard de firmă) ===========
   Aceeași înfățișare ca paginile de calcul (/bim/fundatie-izolata): un cadru
   exterior în nuanța --fd-bg (mov deschis în light, aproape negru în dark) pe
   care cardurile interioare (--fd-card-bg: alb / #12121f) ies în relief.
   Paleta --fd-* e definită mai jos, o singură dată pentru ambele teme. */
.jl-console {
    background: var(--fd-bg);
    border: 1px solid var(--fd-border);
    border-radius: 16px;
    box-shadow: var(--fd-shadow);
    padding: 22px 24px 26px;
    color: var(--fd-text);
}

/* Taburi „dosar", ca la fundația izolată. Funcționează și pe <a>, și pe <button>. */
.jl-console-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--fd-border);
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.jl-console-tabs::-webkit-scrollbar { display: none; }

.jl-console-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--fd-card-bg);
    border: 1px solid var(--fd-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    color: var(--fd-muted);
    padding: 7px 16px;
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.jl-console-tab:hover:not(.active) { color: var(--fd-accent); }

.jl-console-tab.active {
    background: var(--fd-card-bg2);
    color: var(--fd-accent);
    border-color: var(--fd-border2);
    font-weight: 700;
    position: relative;
    bottom: -1px;
}

.jl-console-card {
    background: var(--fd-card-bg);
    border: 1px solid var(--fd-border);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: none;
}

.jl-console-card--warn { border-color: #f59e0b; border-width: 2px; }

/* Paginile de firmă folosesc carduri Bootstrap în interiorul consolei; le aliniem
   la paletă aici, o dată, în loc să reetichetăm fiecare pagină. Cardurile cu
   bordură explicită (`border-danger`, `border-warning`) își păstrează culoarea. */
.jl-console .card { background: var(--fd-card-bg); box-shadow: none; }
.jl-console .card:not([class*="border-"]) { border-color: var(--fd-border); }
/* `border-0` e folosit peste tot ca „card curat"; în consolă are nevoie de contur,
   altfel albul cardului se pierde pe fundalul mov din tema light. */
.jl-console .card.border-0 { border: 1px solid var(--fd-border) !important; }

.jl-console-title {
    color: var(--fd-accent);
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}


/* ===== Login / Register — card autentificare stilizat ======================
   Design curat, centrat: titlu mare, câmpuri rotunjite, buton accent indigo,
   buton Google alb, link-uri accent. Theme-aware (light identic cu referința,
   dark = variantă întunecată cu același layout). Accentul e independent de
   --bs-primary ca să rămână indigo-ul din design. */
.jl-auth {
    --jl-accent: #5b5be6;
    --jl-accent-hover: #4a4ad6;
    display: flex;
    justify-content: center;
}

.jl-auth-card {
    width: 100%;
    max-width: 440px;
    padding: 40px;
    background: #ffffff;
    border: 1px solid #ececf2;
    border-radius: 18px;
    box-shadow: 0 18px 50px -12px rgba(30, 27, 75, 0.20),
                0 6px 16px -8px rgba(30, 27, 75, 0.12);
}

.jl-auth-title {
    margin: 0 0 6px;
    text-align: center;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1e1b3a;
}

.jl-auth-sub {
    margin: 0 0 30px;
    text-align: center;
    font-size: 0.9rem;
    color: #9a97a8;
}

.jl-auth-field {
    margin-bottom: 18px;
}

/* Rând cu două coloane (Prenume / Nume) — se sparge sub 380px. */
.jl-auth-2col {
    display: flex;
    gap: 12px;
}

.jl-auth-2col > .jl-auth-field {
    flex: 1 1 0;
    min-width: 0;
}

.jl-auth-optional {
    color: #b4b1bf;
    font-weight: 400;
}

.jl-auth-hint {
    margin-top: 6px;
    font-size: 0.78rem;
    color: #9a97a8;
}

.jl-auth-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #2f2b45;
}

.jl-req {
    color: #e5484d;
}

.jl-auth .jl-auth-input.form-control {
    height: 46px;
    padding: 10px 14px;
    font-size: 0.92rem;
    color: #1e1b3a;
    background: #ffffff;
    border: 1px solid #e2e2ea;
    border-radius: 10px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jl-auth .jl-auth-input.form-control::placeholder {
    color: #b4b1bf;
}

.jl-auth .jl-auth-input.form-control:focus {
    border-color: var(--jl-accent);
    box-shadow: 0 0 0 3px rgba(91, 91, 230, 0.15);
}

.jl-auth-password {
    position: relative;
}

.jl-auth-password .jl-auth-input.form-control {
    padding-right: 44px;
}

.jl-auth-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #9a97a8;
    border-radius: 8px;
    cursor: pointer;
}

.jl-auth-eye:hover {
    color: #5b5be6;
    background: rgba(91, 91, 230, 0.08);
}

.jl-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 24px;
}

.jl-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.88rem;
    color: #2f2b45;
    cursor: pointer;
}

.jl-auth-remember .form-check-input {
    width: 17px;
    height: 17px;
    margin: 0;
    border-radius: 5px;
    border-color: #cfcdd8;
    cursor: pointer;
}

.jl-auth-remember .form-check-input:checked {
    background-color: var(--jl-accent);
    border-color: var(--jl-accent);
}

/* Rând Termeni (înregistrare) — text pe mai multe rânduri, checkbox aliniat sus. */
.jl-auth-terms-row {
    margin: 4px 0 24px;
}

.jl-auth-terms {
    align-items: flex-start;
    line-height: 1.45;
}

.jl-auth-terms .form-check-input {
    margin-top: 2px;
    flex: 0 0 auto;
}

.jl-auth-link {
    color: var(--jl-accent);
    text-decoration: none;
    font-size: 0.88rem;
}

.jl-auth-link:hover {
    color: var(--jl-accent-hover);
    text-decoration: underline;
}

.jl-auth-btn {
    position: relative;
    width: 100%;
    height: 48px;
    margin-bottom: 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #6d6df2 0%, #5b5be6 48%, #7c4de0 100%);
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 10px 22px -8px rgba(91, 91, 230, 0.60),
                0 2px 6px -2px rgba(91, 91, 230, 0.45);
    transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.jl-auth-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 14px 28px -8px rgba(91, 91, 230, 0.70),
                0 4px 12px -3px rgba(91, 91, 230, 0.50);
}

.jl-auth-btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
    box-shadow: 0 6px 14px -6px rgba(91, 91, 230, 0.50);
}

.jl-auth-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 91, 230, 0.40),
                0 10px 22px -8px rgba(91, 91, 230, 0.60);
}

.jl-auth-google {
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #e2e2ea;
    border-radius: 10px;
    background: #ffffff;
    color: #2f2b45;
    font-size: 0.94rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.jl-auth-google:hover {
    background: #f7f7fb;
    border-color: #d5d5e0;
}

.jl-auth-foot {
    margin: 20px 0 0;
    text-align: center;
    font-size: 0.88rem;
    color: #9a97a8;
}

.jl-auth-foot + .jl-auth-foot {
    margin-top: 8px;
}

/* Dark mode — același layout, suprafețe întunecate, accent indigo păstrat. */
[data-bs-theme="dark"] .jl-auth-card {
    background: #1a1a24;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.55);
}

[data-bs-theme="dark"] .jl-auth-title { color: #f2f1f8; }
[data-bs-theme="dark"] .jl-auth-sub  { color: #8b889c; }
[data-bs-theme="dark"] .jl-auth-label { color: #d7d5e2; }
[data-bs-theme="dark"] .jl-auth-remember { color: #d7d5e2; }

[data-bs-theme="dark"] .jl-auth .jl-auth-input.form-control {
    color: #f2f1f8;
    background: #2a2e3d;
    border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .jl-auth .jl-auth-input.form-control::placeholder {
    color: #7c8095;
}

/* Autofill (Chrome) — forțează același slate + text, ca inputurile completate
   (login) să arate identic cu cele goale (sign-up). Fără asta, Chrome pune peste
   ele propriul albastru și cele două pagini diferă. */
[data-bs-theme="dark"] .jl-auth .jl-auth-input.form-control:-webkit-autofill,
[data-bs-theme="dark"] .jl-auth .jl-auth-input.form-control:-webkit-autofill:hover,
[data-bs-theme="dark"] .jl-auth .jl-auth-input.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #f2f1f8;
    -webkit-box-shadow: inset 0 0 0 1000px #2a2e3d;
    caret-color: #f2f1f8;
    transition: background-color 9999s ease-in-out 0s;
}

.jl-auth .jl-auth-input.form-control:-webkit-autofill,
.jl-auth .jl-auth-input.form-control:-webkit-autofill:hover,
.jl-auth .jl-auth-input.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #1e1b3a;
    -webkit-box-shadow: inset 0 0 0 1000px #ffffff;
    caret-color: #1e1b3a;
    transition: background-color 9999s ease-in-out 0s;
}

[data-bs-theme="dark"] .jl-auth-google {
    background: #23232f;
    border-color: rgba(255, 255, 255, 0.10);
    color: #f2f1f8;
}

[data-bs-theme="dark"] .jl-auth-google:hover {
    background: #2b2b38;
}

[data-bs-theme="dark"] .jl-auth-hint { color: #8b889c; }
[data-bs-theme="dark"] .jl-auth-optional { color: #6f6c80; }

[data-bs-theme="dark"] .jl-auth-eye:hover {
    background: rgba(91, 91, 230, 0.18);
}

/* Umbră de contur (preluată din .page-card) aplicată TUTUROR cardurilor
   Bootstrap, ca să aibă același stil ca paginile cu .page-card (ex. /library). */
.card {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}

[data-bs-theme="dark"] .card {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.30);
}

/* Carduri pentru articolele din blog.
   position:relative e OBLIGATORIU: `.stretched-link::after` se întinde peste primul
   strămoș poziționat. Fără el, zonele de click ale TUTUROR articolelor se suprapuneau
   peste toată pagina — cursorul schimba link-ul din bara de stare la fiecare mișcare,
   iar click-ul ajungea pe articolul aflat deasupra, nu pe cel țintit. */
.blog-card {
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    /* Fundal distinct de .page-card (alb): altfel cardul interior era alb pe alb.
       --bs-tertiary-bg e nuanța subtilă folosită și de celelalte pagini pentru
       cardurile imbricate. */
    background: var(--bs-tertiary-bg);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .blog-card {
    background: rgba(255, 255, 255, 0.05);
}


/* ===== Top-bar action cluster (limbă · temă · notificări · avatar) — pct. 1 ===
   Stă global (+ inline pe element în MainLayout.razor), NU în .razor.css scoped,
   ca să rămână orizontal chiar dacă bundle-ul scoped e cache-uit. `!important`
   anulează vechiul `.top-row ::deep a { margin-left: 1.5rem }` rămas în cache. */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.topbar-actions a,
.topbar-actions .btn-link,
.topbar-actions button {
    margin-left: 0 !important;
}

/* ===== Top-bar icon buttons (limbă, notificări) — pct. 1 =====================
   Folosite de LanguageMenu.razor și NotificationBell.razor (componente separate,
   deci stilul stă global aici, nu în .razor.css scoped). */
.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 10px;
    color: #b6bcc6;
    font-size: 1.05rem;
    line-height: 1;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

[data-bs-theme="light"] .topbar-icon-btn {
    color: #6b7280;
}

.topbar-icon-btn:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
}

/* ===== Selector de limbă (LanguageMenu.razor) ===============================
   Butonul arată și codul limbii lângă glob, deci scapă de latura fixă de 38px. */
.lang-menu .topbar-icon-btn {
    width: auto;
    gap: 0.3rem;
    padding: 0 0.55rem;
}

.lang-menu-code {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Săgeata mică de dropdown de lângă codul limbii — discretă, se rotește la deschidere. */
.lang-menu-caret {
    font-size: 0.6rem;
    opacity: 0.6;
    transition: transform 0.15s ease;
}
.lang-menu .topbar-icon-btn[aria-expanded="true"] .lang-menu-caret {
    transform: rotate(180deg);
}

.lang-menu-list {
    min-width: 12rem;
    padding: 0.35rem;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color-translucent);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
}

/* Fiecare limbă: steag + nume pe un rând, cu o bifă la limba activă. Rând, nu coloană —
   fără nota de „indisponibil”, opțiunile sunt acum simple și simetrice. */
.lang-menu-list .lang-menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    font-size: 0.86rem;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.lang-menu-list .lang-menu-item:hover,
.lang-menu-list .lang-menu-item:focus {
    background-color: var(--bs-secondary-bg);
}

/* Limba activă: pastilă indigo discretă, nu inversul plin al Bootstrap (care ar strica
   contrastul steagului). */
.lang-menu-list .lang-menu-item.active {
    background-color: rgba(109, 109, 242, 0.14);
    color: var(--bs-body-color);
    font-weight: 600;
}

.lang-menu-flag {
    font-size: 1.05rem;
    line-height: 1;
}

.lang-menu-name {
    flex: 1;
}

.lang-menu-check {
    color: #6d6df2;
    font-size: 0.95rem;
}

/* Buton „Autentifică-te" din bara de sus (utilizator nelogat) — CTA indigo cu
   gradient, în același limbaj vizual cu butonul din paginile de login/register. */
.topbar-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #6d6df2 0%, #5b5be6 50%, #7c4de0 100%);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 16px -6px rgba(91, 91, 230, 0.55);
    transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.topbar-login-btn:hover {
    color: #ffffff;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 22px -6px rgba(91, 91, 230, 0.65);
}

.topbar-login-btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
    box-shadow: 0 5px 12px -6px rgba(91, 91, 230, 0.50);
}

.topbar-login-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 91, 230, 0.40),
                0 6px 16px -6px rgba(91, 91, 230, 0.55);
}

/* No lingering chrome/outline box after a mouse click (the <button> keeps :focus
   even though it does nothing yet) — that was the ugly square around the icon. */
.topbar-icon-btn:focus {
    outline: none;
    box-shadow: none;
}

/* Clean accent ring only for keyboard navigation. */
.topbar-icon-btn:focus-visible {
    outline: none;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-primary);
    box-shadow: 0 0 0 2px var(--bs-primary);
}

/* Punct roșu pentru mesaje necitite (clopoțelul de notificări). */
.topbar-icon-btn .notif-dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #dc3545;
    border: 2px solid var(--bs-body-bg);
}

/* ===== Meniu „Comunitate" — grup de rețele sociale (dropdown grid stil UBold).
   Folosit de SocialMenu.razor. Global aici (nu scoped), ca restul topbar-*. */
.social-menu-panel {
    width: 264px;
    padding: 0.5rem;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.social-menu-head {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding: 0.25rem 0.5rem 0.5rem;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
}

.social-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.8rem 0.25rem;
    border-radius: 10px;
    color: var(--bs-body-color);
    text-decoration: none;
    text-align: center;
    transition: background-color 0.15s ease;
}

.social-tile:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
}

.social-tile-icon {
    font-size: 1.55rem;
    line-height: 1;
}

.social-tile-label {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.social-tile.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Avatar „card" în bara de sus — cadru vizibil, colțuri rotunjite (nu cerc). Pct. 1.
   Stă global (nu scoped) ca să se încarce sigur; dimensiunea e fixată și inline pe
   <img>, deci poza rămâne mică chiar dacă acest stylesheet e cache-uit. */
.avatar-card {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    line-height: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.avatar-card-img {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    object-fit: cover;
}

.avatar-menu-btn:hover .avatar-card,
.avatar-menu-btn[aria-expanded="true"] .avatar-card {
    border-color: var(--bs-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

/* Comutator temă soare/lună — stilul de buton îl moștenește de la .topbar-icon-btn
   (fără margine, fundal transparent). Culoarea o suprascriem în gri deschis (nu
   albastru ca restul), cu specificitate .topbar-icon-btn.theme-toggle. */
.theme-toggle .tt-icon {
    width: 19px;
    height: 19px;
}

.theme-toggle .tt-sun,
.theme-toggle .tt-moon {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle .tt-sun {
    display: block;
}

[data-bs-theme="light"] .theme-toggle .tt-moon {
    display: block;
}

/* Meniul avatar (dropdown utilizator) — stil curat, colturi rotunjite, umbra difuza,
   iconite line monocrome. Global (nu scoped) ca sa acopere .dropdown-menu Bootstrap. */
.avatar-dropdown {
    --am-fg: var(--bs-body-color);
    min-width: 244px;
    padding: 6px;
    margin-top: 8px;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: var(--bs-body-bg);
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.28),
                0 4px 10px -4px rgba(15, 23, 42, 0.16);
}

.avatar-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--am-fg);
    transition: background-color 0.12s ease, color 0.12s ease;
}

.avatar-dropdown .dropdown-item:hover,
.avatar-dropdown .dropdown-item:focus-visible {
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    color: var(--bs-primary);
}

.avatar-dropdown .dropdown-item:active {
    background: color-mix(in srgb, var(--bs-primary) 18%, transparent);
    color: var(--bs-primary);
}

/* Comutatorul de context (persoană ↔ firme): fiecare opțiune e un form POST, deci
   butonul trebuie să arate exact ca un dropdown-item obișnuit. */
.avatar-dropdown .am-ctx-form {
    margin: 0;
}

.avatar-dropdown .am-ctx-form button {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
}

.avatar-dropdown .am-ctx-dot {
    flex: 0 0 auto;
    width: 10px;
    font-size: 10px;
    line-height: 1;
    color: var(--bs-primary);
}

.avatar-dropdown .dropdown-header {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding: 8px 12px 4px;
}

.avatar-dropdown .am-icon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    color: var(--bs-secondary-color);
    transition: color 0.12s ease;
}

.avatar-dropdown .dropdown-item:hover .am-icon,
.avatar-dropdown .dropdown-item:focus-visible .am-icon {
    color: var(--bs-primary);
}

.avatar-dropdown .dropdown-divider {
    margin: 6px 4px;
    border-top-color: var(--bs-border-color);
    opacity: 1;
}

.avatar-dropdown form {
    margin: 0;
}

/* Deconectare — accent rosu discret, se aprinde la hover. */
.avatar-dropdown .am-danger,
.avatar-dropdown .am-danger .am-icon {
    color: var(--bs-danger);
}

.avatar-dropdown .am-danger:hover,
.avatar-dropdown .am-danger:focus-visible,
.avatar-dropdown .am-danger:hover .am-icon,
.avatar-dropdown .am-danger:focus-visible .am-icon {
    background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
    color: var(--bs-danger);
}

/* ── Breviar — formule de calcul (display, aliniate la stanga) ───────────────
   Folosit pe paginile de verificare metal (rezistenta + stabilitate).
   MathJax centreaza display-math implicit; il aliniem la stanga.
   Formulele detaliate pot fi late => scroll orizontal in loc de a sparge layout-ul. */
.breviar-formula {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}
.breviar-formula mjx-container,
.breviar-formula mjx-container[display="true"] {
    text-align: left !important;
    margin: 0.4em 0 !important;
}



/* ==========================================================================
   PALETA COMUNA A PAGINILOR DE CALCUL (dedup din <style>-urile inline)
   Familii: --beam-* (beton/FEM/metal), --col-* (stalpi), --fd-* (fundatii),
   --pu-* (strapungere). SURSA UNICA: modifici aici -> se schimba peste tot.
   Abaterile per pagina raman ca override in <style>-ul paginii (vin dupa
   app.css in DOM, deci castiga la specificitate egala).
   ========================================================================== */
:root,
[data-bs-theme="dark"] {
    --beam-accent: #a78bfa;
    --beam-accent-soft: rgba(167,139,250,.16);
    --beam-bg: #0a0a14;
    --beam-border: #2a2a3e;
    --beam-border2: #3a3a5e;
    --beam-border3: #2a2a4e;
    --beam-btn-grad1: #4c1d95;
    --beam-btn-grad2: #6d28d9;
    --beam-card-bg: #12121f;
    --beam-card-bg2: #1a1a2e;
    --beam-error-bg: #2a0a0a;
    --beam-error-border: #7f1d1d;
    --beam-error-text: #f87171;
    --beam-fail: #f87171;
    --beam-faint: #444;
    --beam-faintest: #2a2a4e;
    --beam-grid-line: #141420;
    --beam-input-bg: #0a0a14;
    --beam-input-color: #e0e0e0;
    --beam-muted: #888;
    --beam-ok: #34d399;
    --beam-ok-bg: #0c2a16;
    --beam-ok-border: #1f7a3d;
    --beam-ok-text: #4ade80;
    --beam-shadow: 0 8px 30px rgba(0, 0, 0, 0.30);
    --beam-svg-bg: #0a0a14;
    --beam-text: #e0e0e0;
    --beam-tooltip-bg: #0d0d1c;
    --beam-warn-bg: #2a230a;
    --beam-warn-border: #7a661f;
    --beam-warn-text: #fbbf24;
    --beam-zero-axis: #2a2a3e;
    --col-accent: #a78bfa;
    --col-bg: #0a0a14;
    --col-border: #2a2a3e;
    --col-border2: #3a3a5e;
    --col-btn-add: #1e3a5f;
    --col-btn-add2: #1a4a7a;
    --col-btn-g1: #4c1d95;
    --col-btn-g2: #6d28d9;
    --col-card-bg: #12121f;
    --col-card-bg2: #1a1a2e;
    /* Accent secundar (aria de armătură pe față). Era scris #a5f3fc direct în pagină,
       adică o culoare de dark hardcodată — pe cardul alb din light nu se citea. */
    --col-cyan: #a5f3fc;
    --col-err-bg: #2a0a0a;
    --col-err-border: #7f1d1d;
    --col-err-text: #f87171;
    --col-fail: #f87171;
    --col-faint: #444;
    --col-faintest: #2a2a4e;
    --col-grid: #141420;
    --col-input-bg: #0a0a14;
    --col-input-color: #e0e0e0;
    --col-muted: #888;
    --col-pass: #4ade80;
    --col-svg-bg: #0a0a14;
    --col-text: #e0e0e0;
    --fd-accent: #a78bfa;
    --fd-bg: #0a0a14;
    --fd-border: #2a2a3e;
    --fd-border2: #3a3a5e;
    --fd-btn-g1: #4c1d95;
    --fd-btn-g2: #6d28d9;
    --fd-card-bg: #12121f;
    --fd-card-bg2: #1a1a2e;
    --fd-err-bg: #2a0a0a;
    --fd-err-border: #7f1d1d;
    --fd-err-text: #f87171;
    --fd-fail: #f87171;
    --fd-faint: #444;
    --fd-faintest: #2a2a4e;
    --fd-grid: #141420;
    --fd-input-bg: #0a0a14;
    --fd-input-color: #e0e0e0;
    --fd-muted: #888;
    --fd-pass: #4ade80;
    --fd-shadow: 0 8px 30px rgba(0, 0, 0, 0.30);
    --fd-svg-bg: #0a0a14;
    --fd-svg-fill: #c4881a;
    --fd-svg-stroke: #a78bfa;
    --fd-text: #e0e0e0;
    --fi-accent: #a78bfa;
    --fi-bg: #0a0a14;
    --fi-border: #2a2a3e;
    --fi-border2: #3a3a5e;
    --fi-border3: #2a2a4e;
    --fi-btn-grad1: #4c1d95;
    --fi-btn-grad2: #6d28d9;
    --fi-card-bg: #12121f;
    --fi-card-bg2: #1a1a2e;
    --fi-dim-bg: #0a0a14;
    --fi-dim-border: #3a3a5e;
    --fi-dim-color: #e0e0e0;
    --fi-faint: #444;
    --fi-faintest: #2a2a4e;
    --fi-input-bg: #0a0a14;
    --fi-input-color: #e0e0e0;
    --fi-muted: #888;
    --fi-svg-fill: #c4881a;
    --fi-svg-stroke: #a78bfa;
    --fi-tab-active: #1a1a2e;
    --fi-tab-inactive: #12121f;
    --fi-text: #e0e0e0;
    --fi-verif-val: #818cf8;
    --pu-col: #3a3a5e;
    --pu-dim: #888;
    --pu-edge: #f87171;
    --pu-perim: #a78bfa;
}

[data-bs-theme="light"] {
    --beam-accent: #6d28d9;
    --beam-accent-soft: rgba(109,40,217,.10);
    --beam-bg: #f4f3ff;
    --beam-border: #d8d4f5;
    --beam-border2: #b8b0e8;
    --beam-border3: #ccc8ee;
    --beam-btn-grad1: #6d28d9;
    --beam-btn-grad2: #8b5cf6;
    --beam-card-bg: #ffffff;
    --beam-card-bg2: #f0effe;
    --beam-error-bg: #fff0f0;
    --beam-error-border: #fca5a5;
    --beam-error-text: #dc2626;
    --beam-fail: #dc2626;
    --beam-faint: #9990b8;
    --beam-faintest: #ebe8fa;
    --beam-grid-line: #ece9fd;
    --beam-input-bg: #faf9ff;
    --beam-input-color: #1e1b2e;
    --beam-muted: #6b6880;
    --beam-ok: #059669;
    --beam-ok-bg: #eafff0;
    --beam-ok-border: #86efac;
    --beam-ok-text: #16a34a;
    --beam-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
    --beam-svg-bg: #f4f3ff;
    --beam-text: #1e1b2e;
    --beam-tooltip-bg: #ffffff;
    --beam-warn-bg: #fffbeb;
    --beam-warn-border: #fcd34d;
    --beam-warn-text: #b45309;
    --beam-zero-axis: #d0caf0;
    --col-accent: #6d28d9;
    --col-bg: #f4f3ff;
    --col-border: #d8d4f5;
    --col-border2: #b8b0e8;
    --col-btn-add: #dbeafe;
    --col-btn-add2: #bfdbfe;
    --col-btn-g1: #6d28d9;
    --col-btn-g2: #8b5cf6;
    --col-card-bg: #ffffff;
    --col-cyan: #0e7490;
    --col-card-bg2: #f0effe;
    --col-err-bg: #fff0f0;
    --col-err-border: #fca5a5;
    --col-err-text: #dc2626;
    --col-fail: #dc2626;
    --col-faint: #9990b8;
    --col-faintest: #ebe8fa;
    --col-grid: #ece9fd;
    --col-input-bg: #faf9ff;
    --col-input-color: #1e1b2e;
    --col-muted: #6b6880;
    --col-pass: #16a34a;
    --col-svg-bg: #f4f3ff;
    --col-text: #1e1b2e;
    --fd-accent: #6d28d9;
    --fd-bg: #f4f3ff;
    --fd-border: #d8d4f5;
    --fd-border2: #b8b0e8;
    --fd-btn-g1: #6d28d9;
    --fd-btn-g2: #8b5cf6;
    --fd-card-bg: #ffffff;
    --fd-card-bg2: #f0effe;
    --fd-err-bg: #fff0f0;
    --fd-err-border: #fca5a5;
    --fd-err-text: #dc2626;
    --fd-fail: #dc2626;
    --fd-faint: #9990b8;
    --fd-faintest: #ebe8fa;
    --fd-grid: #ece9fd;
    --fd-input-bg: #faf9ff;
    --fd-input-color: #1e1b2e;
    --fd-muted: #6b6880;
    --fd-pass: #16a34a;
    --fd-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
    --fd-svg-bg: #f4f3ff;
    --fd-svg-fill: #E8821A;
    --fd-svg-stroke: #6d28d9;
    --fd-text: #1e1b2e;
    --fi-accent: #6d28d9;
    --fi-bg: #f4f3ff;
    --fi-border: #d8d4f5;
    --fi-border2: #b8b0e8;
    --fi-border3: #ccc8ee;
    --fi-btn-grad1: #6d28d9;
    --fi-btn-grad2: #8b5cf6;
    --fi-card-bg: #ffffff;
    --fi-card-bg2: #f0effe;
    --fi-dim-bg: #faf9ff;
    --fi-dim-border: #b8b0e8;
    --fi-dim-color: #1e1b2e;
    --fi-faint: #9990b8;
    --fi-faintest: #ebe8fa;
    --fi-input-bg: #faf9ff;
    --fi-input-color: #1e1b2e;
    --fi-muted: #6b6880;
    --fi-svg-fill: #E8821A;
    --fi-svg-stroke: #6d28d9;
    --fi-text: #1e1b2e;
    --fi-verif-val: #6d28d9;
    --pu-col: #c9c2f0;
    --pu-dim: #6b6880;
    --pu-edge: #dc2626;
    --pu-perim: #6d28d9;
}

/* ─────────────────────────────────────────────────────────────────────
   PAGINI LEGALE  (/cookies, /termeni-si-conditii)  — dark + light
───────────────────────────────────────────────────────────────────── */
.legal {
    /* Dark (default) */
    --lg-ink:    #e6e8f2;
    --lg-ink2:   #b8bfd9;
    --lg-ink3:   #7e87a8;
    --lg-accent: #a99cff;
    --lg-panel:  #131a2e;
    --lg-panel2: #0f1424;
    --lg-line:   #232b4a;
    --lg-soft:   #1a2340;

    max-width: 860px;
    margin: 0 auto;
    padding: 8px 4px 64px;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--lg-ink2);
    line-height: 1.65;
    font-size: 15px;
}
[data-bs-theme="light"] .legal {
    --lg-ink:    #16192e;
    --lg-ink2:   #3d4466;
    --lg-ink3:   #6b74a0;
    --lg-accent: #5b4ee0;
    --lg-panel:  #ffffff;
    --lg-panel2: #f6f7fc;
    --lg-line:   #d8ddf0;
    --lg-soft:   #eef0fa;
}

.legal .lg-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: .12em; color: var(--lg-accent);
    padding: 5px 12px; border: 1px solid var(--lg-line); border-radius: 999px;
    background: rgba(139,124,248,.05); margin-bottom: 18px;
}
.legal h1 {
    color: var(--lg-ink); font-weight: 700; letter-spacing: -.02em;
    font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin: 0 0 10px;
}
.legal .lg-updated { color: var(--lg-ink3); font-size: 13px; margin: 0 0 8px; }
.legal .lg-lead { color: var(--lg-ink2); font-size: 16px; margin: 0 0 28px; }

.legal h2 {
    color: var(--lg-ink); font-weight: 700; letter-spacing: -.01em;
    font-size: 20px; margin: 34px 0 12px; padding-top: 20px;
    border-top: 1px solid var(--lg-line); scroll-margin-top: 90px;
}
.legal h2 .lg-num {
    font-family: 'JetBrains Mono', monospace; color: var(--lg-accent);
    font-size: 15px; margin-right: 8px;
}
.legal h3 { color: var(--lg-ink); font-weight: 600; font-size: 16px; margin: 22px 0 8px; }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin: 0 0 8px; }
.legal a { color: var(--lg-accent); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--lg-ink); font-weight: 650; }
.legal code {
    font-family: 'JetBrains Mono', monospace; font-size: .88em;
    background: var(--lg-soft); border: 1px solid var(--lg-line);
    padding: 1px 6px; border-radius: 5px; color: var(--lg-ink2);
}

/* Card evidențiat (ex. clauza de fork) */
.legal .lg-callout {
    background: var(--lg-panel); border: 1px solid var(--lg-line);
    border-left: 3px solid var(--lg-accent); border-radius: 12px;
    padding: 18px 20px; margin: 18px 0 22px;
}
.legal .lg-callout p:last-child { margin-bottom: 0; }
.legal .lg-callout .lg-callout-h {
    font-weight: 700; color: var(--lg-ink); margin: 0 0 8px;
    display: flex; align-items: center; gap: 8px;
}

/* Tabel (inventar cookie-uri) */
.legal .lg-table-wrap { overflow-x: auto; margin: 0 0 22px; }
.legal table {
    width: 100%; border-collapse: collapse; font-size: 13.5px;
    background: var(--lg-panel); border: 1px solid var(--lg-line);
    border-radius: 10px; overflow: hidden;
}
.legal th, .legal td {
    text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--lg-line);
    vertical-align: top;
}
.legal th {
    background: var(--lg-panel2); color: var(--lg-ink);
    font-weight: 600; font-size: 12.5px; letter-spacing: .02em;
    white-space: nowrap;
}
.legal tr:last-child td { border-bottom: 0; }
.legal td code { white-space: nowrap; }

/* Buton acțiune (deschide preferințe cookie) */
.legal .lg-btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 600;
    padding: 11px 20px; border-radius: 10px; border: 1px solid transparent;
    background: var(--lg-accent); color: #0a0e1a; text-decoration: none;
    transition: transform .12s, filter .15s;
}
[data-bs-theme="light"] .legal .lg-btn { background: #6d28d9; color: #fff; }
.legal .lg-btn:hover { transform: translateY(-1px); filter: brightness(1.08); color: #0a0e1a; }
[data-bs-theme="light"] .legal .lg-btn:hover { color: #fff; }

.legal .lg-toc {
    background: var(--lg-panel); border: 1px solid var(--lg-line);
    border-radius: 12px; padding: 16px 20px; margin: 0 0 30px;
}
.legal .lg-toc-h {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: .14em; color: var(--lg-ink3); margin: 0 0 10px;
}
.legal .lg-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.legal .lg-toc li { margin: 0 0 6px; break-inside: avoid; }
@media (max-width: 560px) { .legal .lg-toc ol { columns: 1; } }

.legal .lg-foot {
    margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--lg-line);
    color: var(--lg-ink3); font-size: 13px;
}


/* ==========================================================================
   ARTICOLUL EDITORIAL DE SUB CALCULATOARE (componenta PageArticle)
   Textul vine din markdown -> nu putem pune clase pe elemente, deci stilam
   descendentii dupa tag. Tokenii --bs-* tin tema light/dark singuri.
   ========================================================================== */
.page-article {
    max-width: 820px;                 /* ~85 caractere pe rand: limita de lizibilitate */
    margin: 2.5rem 0 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    line-height: 1.7;
}

.page-article h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 2rem 0 0.75rem;
}
.page-article h2:first-child { margin-top: 0; }

.page-article h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
}

.page-article p,
.page-article li { font-size: 0.95rem; }

.page-article ul { padding-left: 1.25rem; }
.page-article li { margin-bottom: 0.4rem; }

.page-article strong { font-weight: 600; }

.page-article a {
    color: var(--bs-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Formulele pot fi late — scroll orizontal, la fel ca la .breviar-formula,
   ca sa nu sparga layout-ul pe telefon.
   Regula prinde SI formulele inline (fara display="true"): o relatie lunga scrisa
   in mijlocul unei fraze nu se poate rupe pe randuri si iesea din ecran la 375px. */
.page-article mjx-container {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
.page-article mjx-container[display="true"] {
    margin: 1rem 0 !important;
}


/* Firul Ariadnei de deasupra titlului (componenta Breadcrumbs). */
.page-breadcrumbs {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.page-breadcrumbs a { color: var(--bs-secondary-color); text-decoration: none; }
.page-breadcrumbs a:hover { color: var(--bs-link-color); text-decoration: underline; }
.page-breadcrumbs .bc-sep { opacity: 0.5; }
.page-breadcrumbs .bc-current { color: var(--bs-body-color); }

/* Tabele in articolul editorial (markdown pipe tables). */
.page-article table {
    width: 100%;
    margin: 1rem 0;
    font-size: 0.9rem;
    border-collapse: collapse;
}
.page-article th,
.page-article td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    text-align: left;
    vertical-align: top;
}
.page-article th {
    font-weight: 600;
    border-bottom-width: 2px;
    white-space: nowrap;
}
/* Tabelele late nu au voie sa impinga pagina — scroll propriu, ca la formule. */
.page-article > table { display: block; overflow-x: auto; }


/* ===== „Informații tool" — articolul SEO pliat sub un buton =================
   <details> nativ: textul rămâne ÎNTOTDEAUNA în HTML-ul livrat de server, doar
   vizibilitatea se comută. Ascunderea prin CSS nu scoate textul din pagină, deci
   Google îl indexează normal — vezi comentariul din PageArticle.razor. */
.page-info {
    margin-top: 28px;
}

/* <summary> stilizat ca buton mic. `display:inline-flex` + regulile de marker scot
   triunghiul implicit (Chrome/Safari/Firefox au fiecare alt mecanism). */
.page-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.page-info-btn::-webkit-details-marker { display: none; }
.page-info-btn::marker { content: ""; }

.page-info-btn:hover {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.page-info-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 91, 230, 0.35);
}

.page-info-caret {
    font-size: 0.7rem;
    opacity: 0.7;
    transition: transform 0.15s ease;
}
.page-info[open] .page-info-caret { transform: rotate(180deg); }

/* Cardul care apare la deschidere.

   Lățimea: `.page-article` are max-width 820px (limita de lizibilitate), dar aici
   cardul trebuie să se alinieze cu cardul calculatorului de deasupra, altfel arată
   ca o coloană rătăcită sub o planșă lată. Textul rămâne totuși îngustat — vezi
   `.page-info-card > *` mai jos: limităm rândul, nu cutia.

   Culoarea: aceeași pereche `--beam-bg` / `--beam-border` ca `<Card>`-ul paginii de
   calcul. `--bs-body-bg` era identic cu fundalul paginii în dark, deci cardul se
   topea în pagină — exact ce nu voiam. */
.page-info-card {
    max-width: none;
    margin-top: 14px;
    padding: 22px 26px 26px;
    border: 1px solid var(--beam-border);
    border-radius: 14px;
    background: var(--beam-bg);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

[data-bs-theme="dark"] .page-info-card {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.30);
}

/* Cutia e lată, rândul nu: fiecare bloc de text din articol își păstrează lungimea
   de rând citibilă. Tabelele și formulele au voie să folosească toată lățimea. */
.page-info-card > * { max-width: 820px; }
.page-info-card > table,
.page-info-card > mjx-container,
.page-info-card > .page-article-wide { max-width: none; }


/* ===== Figurile SVG generate de paginile de calcul =========================
   Desenele se construiesc în C# şi ieşeau pe toată lăţimea coloanei de rezultat,
   unde o secţiune de grindă de 30 cm ajungea cât un ecran. Clasa ţine scara într-un
   singur loc: `.calc-svg` e comportamentul de bază (ce era înainte inline), iar
   modificatorii îngustează cutia şi centrează figura.

   Sub 900px reintră pe toată lăţimea — pe telefon 60% ar face cotele ilizibile. */
.calc-svg { display: block; width: 100%; height: auto; font-family: var(--font-calc); }
.calc-svg-80 { max-width: 80%; margin-inline: auto; }
.calc-svg-60 { max-width: 60%; margin-inline: auto; }
@media (max-width: 900px) {
    .calc-svg-80, .calc-svg-60 { max-width: 100%; }
}


/* ===== Plăcuţele de sumar din capul rezultatului ===========================
   Rândul de carduri mici care scot în faţă mărimile determinante (v_Ed, l_cr,
   verdictul). Erau copiate local în Strapungere / ProcenteArmare / AcoperireBeton /
   SectiuneBetonArmat; aici e definiţia globală, pentru paginile care le folosesc
   fără `<style>` propriu. Copiile locale vin după în DOM şi câştigă la egalitate,
   deci paginile alea rămân neschimbate. */
.sa-stat-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px; margin-bottom: 20px;
}
.sa-stat {
    background: var(--beam-card-bg); border: 1px solid var(--beam-border);
    border-radius: 10px; padding: 12px 14px;
}
.sa-stat .lbl { color: var(--beam-muted); font-size: var(--fs-micro); letter-spacing: 1px; text-transform: uppercase; }
.sa-stat .val { font-size: 1.15rem; font-variant-numeric: tabular-nums; margin-top: 3px; }
.sa-stat .rat { font-size: var(--fs-micro); margin-top: 2px; color: var(--beam-muted); }

/* ===== Numarul-titlu al unui rezultat ======================================
   Rezultatul pentru care se deschide pagina — F la taluz, R/A' la fundatie.
   Sta aici, nu in pagina: doua pagini aveau nevoie de aceeasi marime, si un
   `font-size` scris local e fix felul in care scara s-a fragmentat inainte.
   E a cincea treapta a scarii, deliberat, pentru UN numar per pagina. */
.beam-result-hero {
    font-size: 1.9rem; line-height: 1.15; letter-spacing: 1px;
    font-variant-numeric: tabular-nums; color: var(--beam-accent);
}
.beam-result-hero-ok { color: var(--beam-ok); }
.beam-result-hero-no { color: var(--beam-fail); }


/* ===== Comutatorul de tip „switch" =========================================
   Definiţia stătea DOAR în `<style>`-ul din ProcenteArmare, dar clasele erau
   folosite şi în TijeLemnPagina, AglomerareZapadaPagina şi SuprasarciniPagina —
   unde nu exista nimic, aşa că bifa ieşea cu textul la mărimea implicită a
   browserului, de două ori cât restul cardului. Aici e definiţia comună. */
.beam-toggle-row { display: flex; align-items: center; gap: 12px; }
.beam-switch { position: relative; width: 46px; height: 24px; flex-shrink: 0; }
.beam-switch input { opacity: 0; width: 0; height: 0; }
.beam-slider {
    position: absolute; inset: 0; background: var(--beam-border2);
    border-radius: 24px; cursor: pointer; transition: background 0.2s;
}
.beam-slider:before {
    content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: transform 0.2s;
}
.beam-switch input:checked + .beam-slider { background: var(--beam-accent); }
.beam-switch input:checked + .beam-slider:before { transform: translateX(22px); }
.beam-switch-lbl {
    color: var(--beam-muted); font-size: var(--fs-micro); letter-spacing: 1.5px;
    text-transform: uppercase; cursor: pointer;
}


/* ===== Pagini de calcul — clase comune promovate global ====================
   `.beam-wrapper/.beam-card/.beam-input/.beam-btn/...` sunt deja globale în
   tool-renderer.css. Aici adaug restul claselor pe care paginile de calcul
   (Beton, Geotehnică, Fundații) le duplicau local, ca paginile Metal — și
   oricare altă pagină — să le folosească fără `<style>` propriu. Regulile sunt
   IDENTICE cu copiile locale, deci acolo unde încă există local nu se schimbă
   nimic (definiția din pagină vine după în DOM și câștigă la egalitate). */
.beam-select {
    width: 100%; box-sizing: border-box;
    background: var(--beam-input-bg); border: 1px solid var(--beam-border2);
    border-radius: 6px; color: var(--beam-accent); cursor: pointer;
    padding: 6px 8px; font-size: var(--fs-body); font-family: var(--font-calc); outline: none;
    /* Caret propriu (background) + appearance:none ⇒ săgeata nativă nu mai ocupă
       spațiu asimetric la dreapta, așa că valoarea centrată chiar apare pe centru. */
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%238b8b9a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    /* Text centrat și fără să curgă din casetă (ex. „-- selectați oțel --"). */
    text-align: center; text-align-last: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.beam-select option { text-align: center; }
.beam-select:focus { border-color: var(--beam-accent); }
.beam-heading { color: var(--beam-accent); letter-spacing: 3px; margin-bottom: 4px; font-size: var(--fs-title); }
.beam-subheading { color: var(--beam-muted); font-size: var(--fs-micro); margin-bottom: 22px; letter-spacing: 1px; }
.beam-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Cand o eticheta se rupe pe doua randuri („a pana la axa barei [mm]"), input-ul ei
   cobora cu un rand fata de vecin si perechea arata stramba. Celula devine coloana
   flex lipita de baza, deci input-urile stau pe aceeasi linie oricate randuri are
   eticheta.

   DOUA conditii, amandoua necesare:
   - `> div:has(> .beam-label)` — doar celula „eticheta + camp"; celulele cu alt
     continut (bifa cu text pe acelasi rand) raman neatinse;
   - `.beam-row2:not(:has(.beam-help-text))` — randul intreg. Daca o celula are text
     de ajutor SUB camp, ea se termina cu ajutorul, nu cu campul: lipite de baza,
     campul ei ar urca fata de al vecinului si alinierea ar iesi mai rea decat
     inainte. Randurile alea raman cum erau. */
.beam-row2:not(:has(.beam-help-text)) > div:has(> .beam-label) {
    display: flex; flex-direction: column; justify-content: flex-end;
}
.beam-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.beam-btn-full { width: 100%; }
.beam-btn-calc { width: 100%; letter-spacing: 3px; padding: 13px; text-transform: uppercase; }
.beam-btn-stale { background: linear-gradient(135deg, #b45309, #d97706);
    animation: beamStalePulse 1.6s ease-in-out infinite; }
@keyframes beamStalePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(217,119,6,0.55); }
    50%     { box-shadow: 0 0 0 7px rgba(217,119,6,0); }
}
/* --beam-warn / --beam-pass* / --beam-fail-bg sunt definite in tool-renderer.css
   (tematizate dark/light), NU in blocul de tokeni de mai sus din acest fisier. */
.stale-banner { background: color-mix(in srgb, var(--beam-warn) 15%, transparent);
    border: 1px solid var(--beam-warn); color: var(--beam-warn); border-radius: 8px;
    padding: 10px 14px; font-size: var(--fs-body); margin-bottom: 16px; font-family: var(--font-calc); }

/* Blocul de rezultate (breviar live) al paginilor de calcul: text narativ,
   formule centrate MathJax, verdict colorat. Nume generice `.beam-*` ca să fie
   refolosibile pe orice pagină (nu existau înainte, deci fără coliziuni). */
.beam-note { color: var(--beam-text); font-size: var(--fs-body); margin: 12px 0 2px; font-family: var(--font-calc); line-height: 1.65; }
/* ── Mărimea formulelor MathJax ──────────────────────────────────────────────
   MathJax rulează pe ieşire SVG (`tex-svg.js`), deci glifele sunt trasee
   vectoriale coapte, referite prin <use href="#MJX-TEX-...">. Nu există text de
   restilizat: `font-family` NU are efect asupra literelor, nici pentru greceşti.
   Ca să schimbi FORMA literelor ţi-ar trebui MathJax 4, care aduce fonturi
   matematice selectabile prin `output.font` (mathjax-fira, mathjax-dejavu sunt
   sans) — nu există niciun font matematic monospaţiat, deci potrivirea exactă cu
   JetBrains Mono nu e posibilă oricum.

   Singurul lucru pe care fontul din jur îl controlează e MĂRIMEA, fiindcă
   mjx-container se dimensionează în unităţi `ex`, adică după înălţimea-x a
   fontului moştenit. Şi asta e de ajuns: --font-calc are ex = 0.55em, iar
   MathJax construieşte glifele la exact 1ex înălţime-x, deci punând formula pe
   --fs-body (acelaşi pas ca proza din jur) înălţimile-x coincid exact.
   Înainte formula stătea la 15.2px lângă proză de 12.5–13.6px. */
.beam-formula { text-align: center; margin: 10px 0 14px; overflow-x: auto; overflow-y: hidden; font-size: var(--fs-body); }
.beam-formula mjx-container { color: inherit; }
.beam-verdict { border-radius: 6px; padding: 10px 14px; font-size: var(--fs-body); margin-top: 10px; font-family: var(--font-calc); }
.beam-verdict-ok   { background: var(--beam-pass-bg); border: 1px solid var(--beam-pass); color: var(--beam-pass); }
.beam-verdict-fail { background: var(--beam-fail-bg); border: 1px solid var(--beam-fail); color: var(--beam-fail); }
.beam-result-empty { color: var(--beam-muted); font-size: var(--fs-body); text-align: center; padding: 60px 20px; font-family: var(--font-calc); border: 1px dashed var(--beam-border); border-radius: 12px; }
/* Cardul care înconjoară breviarul live (formule + verdict + butoane), ca zona de
   rezultat să arate ca un card la fel ca panourile de input, nu text „liber". */
.beam-result-card { background: var(--beam-card-bg); border: 1px solid var(--beam-border); border-radius: 12px; padding: 22px 26px; }

/* ── Tabelele din breviarele live ────────────────────────────────────────────
   `.beam-table` sta pe 63 de tabele, dar NU avea nicio regula CSS nicaieri —
   singurele declaratii care o prindeau veneau din Bootstrap (border-collapse,
   text-align). Deci tabelele mosteneau 16px, marimea implicita a browserului:
   erau cel mai MARE text din pagina, peste titlurile de deasupra lor (11.8px).

   Prindem si tabelele neclasate din cardul de rezultate (din 110 tabele, 47 nu
   au nicio clasa), ca sa nu fie nevoie sa atingem 47 de fisiere. */
.beam-table, .beam-result-card table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-calc);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--beam-text);
    margin: 4px 0 14px;
}
.beam-table th, .beam-result-card table th {
    color: var(--beam-muted);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    padding: 6px 10px 6px 0;
    border-bottom: 1px solid var(--beam-border2);
}
/* NU --beam-grid-line pentru separatorul de rand: in dark e #141420 pe un card
   de #12121f, adica invizibil. --beam-border are contrast in ambele teme. */
.beam-table td, .beam-result-card table td {
    padding: 5px 10px 5px 0;
    border-bottom: 1px solid var(--beam-border);
    vertical-align: top;
}
.beam-table tr:last-child td,
.beam-result-card table tr:last-child td { border-bottom: none; }
.beam-table th:last-child, .beam-table td:last-child,
.beam-result-card table th:last-child,
.beam-result-card table td:last-child { padding-right: 0; }
/* Indicii (c_pe,10) nu trebuie sa mareasca inaltimea randului. */
.beam-table sub, .beam-table sup,
.beam-result-card table sub, .beam-result-card table sup { font-size: 0.75em; line-height: 0; }
/* Tabel lat pe telefon: scroll in interiorul lui, nu pe toata pagina. Doar sub
   640px — `display:block` pe <table> creeaza o cutie de tabel anonima inauntru,
   deci il tinem in afara cazului obisnuit, unde nu aduce nimic. */
@media (max-width: 639.98px) {
    .beam-table, .beam-result-card table { display: block; overflow-x: auto; white-space: nowrap; }
}