/* ---------------------------------------------------------------- FONTURI
   ADUSE LOCAL (§154). Materialul primit le cerea de la Google Fonts; regula
   casei (§55) o interzice — pe un sit care vorbeste despre leziuni, fiecare
   pagina ar fi trimis adresa de IP a omului la un tert, inainte ca el sa
   apuce sa citeasca ceva. Fisierele sunt sub licenta OFL, deci se pot tine
   la noi: designul iese identic, doar ca nu mai pleaca nimic afara.

   `font-display: swap` e cel din materialul primit: textul se citeste din
   prima, cu litera de rezerva, si se schimba cand fontul e gata. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;      /* fisier VARIABIL: toate grosimile intr-unul */
  font-display: swap;
  src: url("../fonts/nou/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/nou/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nou/dmserif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nou/dmserif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #081333;
  --navy-soft: #14234d;
  --muted: #596d92;
  --line: #cad9e9;
  --purple: #5931d9;
  --purple-dark: #4b22c9;
  --blue: #1978e9;
  --cyan: #1e9fe3;
  --pink: #d70a61;
  --orange: #fb5a18;
  --green: #149968;
  --surface: #ffffff;
  --page: #f5f9fe;
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", "Segoe UI", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  min-width: 320px;
  color: var(--navy);
  background:
    radial-gradient(circle at 22% 5%, rgba(75, 150, 255, 0.055), transparent 23rem),
    radial-gradient(circle at 82% 8%, rgba(119, 84, 236, 0.045), transparent 24rem),
    var(--page);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  z-index: 0;
  inset: -18vh -12vw;
  background:
    radial-gradient(circle at 18% 24%, rgba(37, 165, 226, 0.12), transparent 22%),
    radial-gradient(circle at 83% 18%, rgba(104, 68, 231, 0.1), transparent 21%),
    radial-gradient(circle at 72% 78%, rgba(231, 45, 146, 0.065), transparent 20%);
  content: "";
  pointer-events: none;
  animation: ambient-drift 18s ease-in-out infinite alternate;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.material-symbols-outlined {
  display: inline-block;
  direction: ltr;
  font-family: "Material Symbols Outlined";
  font-size: 22px;
  font-style: normal;
  font-weight: normal;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
}

@keyframes ambient-drift {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  100% { transform: translate3d(1.5%, 1.2%, 0) scale(1.035); }
}

@keyframes header-arrive {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* FARA TRANSLATIE (§173, semnalat de medic: „la /calcul cardurile din
   stanga se suprapun").

   Blocul pornea cu 18 px mai jos, iar jgheabul dintre blocuri e tot de
   18: cat tine animatia, cele doua se ating si se calca. Masurat pe
   randare in chiar clipa aceea — antetul se termina la 349, banda de sub
   el incepea la 327.

   `transform` NU misca asezarea, deci nimic nu poate fi „impins la loc":
   singura reparatie e sa nu se mai deplaseze. Aceeasi hotarare ca la
   `art-arrive`, redus tot la opacitate inca de la §160. */
@keyframes content-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes art-arrive {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: 1; filter: blur(0); }
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  background: var(--navy);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.page-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1388px);
  margin: 0 auto;
  overflow: hidden;
}

.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  height: 82px;
  margin: 10px 28px 0;
  padding: 0 21px 0 24px;
  border: 1px solid rgba(176, 201, 228, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 7px 27px rgba(28, 75, 132, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* FARA `both`, si e miezul reparatiei (§170): `animation-fill-mode:
     both` tine elementul in starea `from` INAINTE de rulare, iar
     `header-arrive` porneste de la `opacity: 0` — deci bara de sus era
     NEVAZUTA pana rula animatia. Cand aceea nu rula (filă deschisă în
     fundal, unde animatiile sunt oprite; o restaurare din istoric),
     bara ramanea pur si simplu invizibila — chiar ce a semnalat
     medicul: „uneori bara de sus uita sa mai apara".

     Fara fill-mode si fara intarziere, starea de baza e cea FINALA:
     daca animatia nu ruleaza, bara e acolo. Aceeasi regula ca la
     florile din ghid (§166 lsjml): starea de baza e floarea inflorita,
     animatia merge dinspre mugure spre ea. */
  animation: header-arrive 420ms cubic-bezier(.22, .8, .25, 1);
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  min-width: 360px;
}

.brand-mark {
  position: relative;
  display: block;
  width: 57px;
  height: 62px;
  overflow: hidden;
  border-radius: 8px;
}

.brand-mark-fallback {
  position: absolute;
  top: -20px;
  left: -52px;
  width: 1388px;
  height: 1133px;
  max-width: none;
}

.brand-mark-original {
  position: absolute;
  z-index: 2;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  object-fit: contain;
  background: #fff;
}

.brand-copy {
  display: grid;
  gap: 0;
  transform: translateY(-1px);
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.brand-tagline {
  margin-top: 5px;
  color: #4f689c;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.header-menu {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-right: 34px;
  white-space: nowrap;
}

.main-nav a {
  position: relative;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.main-nav a::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  content: "";
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 160ms ease, transform 160ms ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.account-actions {
  display: flex;
  gap: 12px;
}

.header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.header-button svg {
  width: 19px;
  height: 19px;
}

.header-button--outline {
  min-width: 132px;
  border: 1px solid #8e78ff;
  color: #4e30d3;
  background: #fff;
}

.header-button--solid {
  min-width: 109px;
  color: #fff;
  background: linear-gradient(135deg, #6445e2, #4d20cf);
  /* umbra plată a machetei a ieșit la §190 — relieful vine din jetoane */
}

.header-button:hover,
.button:hover {
  transform: translateY(-2px);
}

.header-button:focus-visible,
.main-nav a:focus-visible,
.button:focus-visible,
.mode-card:focus-visible,
.menu-toggle:focus-visible {
  outline: 3px solid rgba(31, 114, 235, 0.38);
  outline-offset: 3px;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--purple);
  background: #fff;
}

.menu-toggle svg {
  width: 23px;
  height: 23px;
  margin: auto;
}

.hero {
  position: relative;
  min-height: 585px;
  padding: 44px 44px 0;
}

.hero-copy {
  position: relative;
  z-index: 4;
  width: 626px;
  animation: content-arrive 420ms cubic-bezier(.22, .8, .25, 1) both;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 31px;
  margin: 0 0 20px -6px;
  padding: 0 18px;
  border-radius: 999px;
  color: #47699c;
  background: linear-gradient(90deg, #eaf9ff, #daf3fb);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.eyebrow svg {
  width: 18px;
  height: 18px;
  color: #1979e9;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 22px;
  font-family: var(--font-serif);
  font-size: clamp(58px, 4.95vw, 69px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

h1 span {
  color: transparent;
  background: linear-gradient(92deg, #177ce8 0%, #3f67f1 33%, #7750ea 61%, #d426c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-description {
  margin-bottom: 29px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: -0.018em;
}

.benefits {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 33px;
}

.benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.benefit > span:last-child {
  display: grid;
  gap: 3px;
}

.benefit strong {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.benefit small {
  color: #7381a1;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.benefit-icon {
  display: grid;
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 7px 18px rgba(27, 77, 139, 0.12);
}

.benefit-icon svg {
  width: 23px;
  height: 23px;
}

.benefit-icon--orange { background: linear-gradient(145deg, #ff761b, #ef3c12); }
.benefit-icon--blue { background: linear-gradient(145deg, #1d9ce1, #0567c9); }
.benefit-icon--pink { background: linear-gradient(145deg, #e40c70, #bd004b); }

.hero-actions {
  display: flex;
  align-items: center;
  gap: 21px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.button svg {
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
}

.button--primary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  width: 382px;
  padding: 0 22px 0 29px;
  color: #fff;
  background: linear-gradient(103deg, #6030db 0%, #5730df 58%, #6637e3 100%);
  box-shadow: 0 14px 28px rgba(88, 46, 218, 0.21);
}

.button--primary small {
  margin-left: 15px;
  font-size: 10px;
  font-weight: 800;
}

.button--secondary {
  width: 222px;
  gap: 14px;
  border: 1px solid #c9d6e8;
  color: #263861;
  background: rgba(255, 255, 255, 0.85);
}

.button--secondary svg {
  width: 21px;
  height: 21px;
  color: var(--purple);
}

.hero-art {
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 650px;
  width: calc(100% - 650px);
  height: 574px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 82%, rgba(0, 0, 0, 0.72) 91%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 82%, rgba(0, 0, 0, 0.72) 91%, transparent 100%);
  pointer-events: none;
  animation: art-arrive 520ms ease-out both;
}

.hero-art img {
  position: absolute;
  top: -82px;
  left: -650px;
  width: 1388px;
  height: 1133px;
  max-width: none;
}

.modes {
  padding: 0 38px;
}

.section-heading {
  text-align: center;
}

.section-heading h2 {
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.heading-line {
  display: block;
  width: 55px;
  height: 3px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: var(--purple);
}

.section-heading p {
  margin-bottom: 17px;
  color: var(--muted);
  font-size: 16px;
  letter-spacing: -0.02em;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.mode-card {
  position: relative;
  display: block;
  min-height: 277px;
  padding: 14px 30px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 10px 28px rgba(48, 84, 129, 0.055);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.mode-card::after {
  position: absolute;
  z-index: 0;
  top: -70%;
  bottom: -70%;
  left: -48%;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: rotate(16deg);
  transition: left 650ms ease, opacity 250ms ease;
}

.mode-card:hover::after {
  left: 118%;
  opacity: 1;
}

.mode-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(48, 84, 129, 0.095);
}

.mode-card--blue:hover { border-color: rgba(37, 137, 232, 0.4); }
.mode-card--orange { border-color: #f3e3d9; }
.mode-card--orange:hover { border-color: rgba(248, 111, 51, 0.42); }

.card-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 29px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.card-label--blue {
  color: #087dc2;
  background: #ddf4ff;
}

.card-label--orange {
  color: #f05e20;
  background: #fff0e8;
}

.mode-card h3 {
  position: relative;
  z-index: 2;
  margin: 7px 0 6px;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.card-description {
  position: relative;
  z-index: 2;
  max-width: 475px;
  margin-bottom: 11px;
  color: #607197;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: -0.012em;
}

.mode-card ul {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  color: #5d6e93;
  font-size: 12px;
  list-style: none;
}

.mode-card li {
  display: flex;
  align-items: center;
  gap: 11px;
}

.mode-card li svg {
  width: 15px;
  height: 15px;
  color: var(--green);
  stroke-width: 2.35;
}

.card-footer {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 0;
  left: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  border-top: 1px solid #dfe7f1;
}

.price strong {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
}

.price small {
  color: #65779b;
  font-size: 11px;
}

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
}

.card-cta svg {
  width: 20px;
  height: 20px;
}

.card-cta--blue { color: #0875e7; }
.card-cta--orange { color: #f15a18; }

.card-art {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 13px;
  display: block;
  width: 205px;
  height: 176px;
  overflow: hidden;
  pointer-events: none;
}

.card-art-fallback {
  position: absolute;
  width: 1388px;
  height: 1133px;
  max-width: none;
}

.card-art--manual .card-art-fallback {
  top: -794px;
  left: -464px;
}

.card-art--documents .card-art-fallback {
  top: -794px;
  left: -1132px;
  -webkit-clip-path: inset(0 0 0 1182px);
  clip-path: inset(0 0 0 1182px);
}

.card-art-original {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.assurances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 62px;
  align-items: center;
  margin: 20px 190px 0;
  padding-bottom: 10px;
  color: #58709b;
}

.assurances article {
  display: flex;
  align-items: center;
  gap: 14px;
}

.assurances article > svg {
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  stroke-width: 1.65;
}

.assurances span {
  display: grid;
  gap: 2px;
}

.assurances strong {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.assurances small {
  color: #7d8dad;
  font-size: 9px;
  white-space: nowrap;
}

.section-heading--wide {
  max-width: 900px;
  margin: 0 auto 38px;
}

.section-kicker {
  margin-bottom: 8px !important;
  color: #5268a6 !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

.heading-line--coral {
  background: linear-gradient(90deg, #fb5a18, #da166b);
}

.heading-line--pink {
  background: linear-gradient(90deg, #e10b62, #6e42e6);
}

.pricing-section {
  position: relative;
  margin-top: 43px;
  padding: 88px 38px 72px;
  overflow: hidden;
  border-top: 1px solid rgba(205, 220, 239, 0.72);
  border-bottom: 1px solid rgba(205, 220, 239, 0.7);
  background:
    radial-gradient(circle at 10% 6%, rgba(58, 168, 239, 0.11), transparent 20rem),
    radial-gradient(circle at 92% 15%, rgba(131, 71, 230, 0.09), transparent 22rem),
    linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
}

.pricing-section::before,
.pricing-section::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.pricing-section::before {
  top: 118px;
  left: -62px;
  width: 125px;
  height: 125px;
  border: 1px solid rgba(36, 133, 235, 0.12);
}

.pricing-section::after {
  right: -45px;
  bottom: 80px;
  width: 95px;
  height: 95px;
  border: 1px solid rgba(188, 35, 158, 0.12);
}

.pricing-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.pricing-card {
  --card-accent: var(--orange);
  --card-soft: #fff1e9;
  position: relative;
  display: flex;
  min-height: 493px;
  padding: 31px 29px 28px;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(206, 220, 237, 0.95);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 15px 38px rgba(36, 75, 126, 0.075);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.pricing-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 58%, #7b50ef));
  content: "";
}

.pricing-card::after {
  position: absolute;
  top: -58px;
  right: -58px;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background: var(--card-soft);
  content: "";
  opacity: 0.75;
}

.pricing-card:hover {
  border-color: color-mix(in srgb, var(--card-accent) 32%, #dce6f2);
  box-shadow: 0 22px 46px rgba(36, 75, 126, 0.13);
  transform: translateY(-5px);
}

.pricing-card--orange {
  --card-accent: #f65b1b;
  --card-soft: #fff0e8;
}

.pricing-card--blue {
  --card-accent: #0d8fc7;
  --card-soft: #e5f8ff;
}

.pricing-card--pink {
  --card-accent: #cc0ab0;
  --card-soft: #fce9fb;
}

.pricing-card--featured {
  border-color: rgba(38, 153, 206, 0.42);
  box-shadow: 0 20px 48px rgba(13, 143, 199, 0.14);
  transform: translateY(-9px);
}

.pricing-card--featured:hover {
  transform: translateY(-13px);
}

.popular-label {
  position: absolute;
  z-index: 3;
  top: 15px;
  right: 18px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #08779f;
  background: #e2f8ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pricing-card__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 53px;
  padding-right: 64px;
}

.pricing-icon {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 70%, #fff), var(--card-accent));
  box-shadow: 0 9px 18px color-mix(in srgb, var(--card-accent) 24%, transparent);
}

.pricing-icon svg {
  width: 23px;
  height: 23px;
}

.pricing-card__header h3 {
  margin: 0 0 3px;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.12;
}

.pricing-card__header small {
  display: block;
  color: #7381a0;
  font-size: 12px;
}

.pricing-amount {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 102px;
  align-content: center;
  margin: 23px 0 18px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 13%, #e5ebf4);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--card-soft), rgba(255, 255, 255, 0.9));
}

.pricing-amount strong {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}

.pricing-amount strong span {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0;
}

.pricing-amount small {
  margin-top: 8px;
  color: #687899;
  font-size: 12px;
}

.pricing-amount small b {
  display: inline-flex;
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--card-accent);
  background: #fff;
  font-size: 10px;
}

.pricing-list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin: 0 0 27px;
  padding: 0;
  color: #526387;
  font-size: 13px;
  line-height: 1.45;
  list-style: none;
}

.pricing-list li {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 9px;
  align-items: start;
}

.pricing-list svg {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: #13986a;
  stroke-width: 2.35;
}

.pricing-list .is-unavailable {
  color: #8490a9;
}

.pricing-list .is-unavailable svg {
  color: #e05e69;
  stroke-width: 2;
}

.pricing-button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  margin-top: auto;
  padding: 0 19px;
  border: 1px solid var(--card-accent);
  border-radius: 11px;
  color: var(--card-accent);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.pricing-button svg {
  width: 19px;
  height: 19px;
}

.pricing-card--featured .pricing-button {
  color: #fff;
  background: linear-gradient(110deg, #0796c5, #087fae);
  box-shadow: 0 10px 22px rgba(8, 143, 190, 0.22);
}

.pricing-button:hover {
  color: #fff;
  background: var(--card-accent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--card-accent) 20%, transparent);
  transform: translateY(-2px);
}

.pricing-button:focus-visible,
.professional-list span:focus-visible,
.footer-links a:focus-visible,
.footer-brand:focus-visible {
  outline: 3px solid rgba(31, 114, 235, 0.34);
  outline-offset: 3px;
}

.pricing-note {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 28px auto 0;
  color: #72809f;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.professional-section {
  padding: 41px 38px 45px;
  border-bottom: 1px solid rgba(204, 220, 239, 0.8);
  background: #f3f7fc;
  text-align: center;
}

.professional-section > p {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 25px;
  color: #51678e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.professional-section > p::before,
.professional-section > p::after {
  flex: 1;
  height: 1px;
  background: #d8e3ef;
  content: "";
}

.professional-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  max-width: 1050px;
  margin: 0 auto;
}

.professional-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  color: #405a89;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.professional-list svg {
  width: 19px;
  height: 19px;
  color: #178ac8;
}

.trust-section {
  padding: 66px 38px 79px;
  background:
    radial-gradient(circle at 50% 0%, rgba(95, 79, 222, 0.05), transparent 27rem),
    #f5f8fc;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(210, 222, 237, 0.88);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 16px 38px rgba(34, 78, 132, 0.085);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}

.trust-grid article {
  position: relative;
  min-height: 218px;
  padding: 32px 27px 29px;
  text-align: center;
}

.trust-grid article + article::before {
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 0;
  width: 1px;
  background: #dbe5f0;
  content: "";
}

.trust-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 50%;
}

.trust-icon svg {
  width: 24px;
  height: 24px;
}

.trust-icon--blue { color: #176fdf; background: #eaf3ff; }
.trust-icon--cyan { color: #078dab; background: #e3f8fb; }
.trust-icon--purple { color: #6246dc; background: #f0edff; }
.trust-icon--coral { color: #ef5b22; background: #fff0e9; }

.trust-grid h3 {
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
}

.trust-grid p {
  margin: 0 auto;
  color: #6e7d9b;
  font-size: 12px;
  line-height: 1.6;
}

.result-section {
  padding: 88px 38px 92px;
  background: transparent;
}

.result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 30px;
  align-items: stretch;
}

.document-preview {
  position: relative;
  min-width: 0;
  padding: 30px;
  overflow: hidden;
  border: 1px solid #cfdeed;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 18px 44px rgba(31, 75, 127, 0.095);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.document-preview::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg, #2ab8de, #5d4ce4 54%, #dc276f);
  content: "";
}

.document-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 21px;
  border-bottom: 1px solid #e0e8f1;
}

.mini-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mini-brand__mark {
  position: relative;
  display: block;
  width: 38px;
  height: 42px;
  overflow: hidden;
  border-radius: 6px;
}

/* SIGLA NOASTRA, NU O PLANSA DE SEMNE (§173).
   Macheta avea aici o imagine-plansa si taia din ea o fereastra de 38x42,
   pozitionand-o la (-39, -15) si umfland-o la 1041 px. Sigla noastra e o
   imagine de sine statatoare, deci regula aceea nu decupa un semn — ii
   arata un PETIC marit de 1041 px dintr-un fisier de 916. Masurat pe
   randare: `naturalWidth 916`, randat 1041x1046, cu 38x42 vizibili. */
.mini-brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mini-brand > span:last-child {
  display: grid;
}

.mini-brand strong {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
}

.mini-brand small {
  margin-top: 3px;
  color: #7382a1;
  font-size: 10px;
}

.document-badge {
  padding: 6px 10px;
  border-radius: 999px;
  color: #6650d5;
  background: #f0edff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.document-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 15px;
  color: #657598;
  font-size: 12px;
}

.document-summary strong {
  color: var(--purple);
  font-size: 14px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid #dce6f0;
  border-radius: 12px;
}

.document-preview table {
  width: 100%;
  border-collapse: collapse;
  color: #405276;
  font-size: 12px;
  line-height: 1.45;
}

.document-preview th,
.document-preview td {
  padding: 13px 14px;
  border-bottom: 1px solid #e3eaf2;
  text-align: left;
}

.document-preview th {
  color: #53688f;
  background: #f5f8fc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.document-preview th:last-child,
.document-preview td:last-child {
  text-align: right;
  white-space: nowrap;
}

.document-preview tbody tr:last-child td {
  border-bottom: 0;
}

.document-preview .total-row td {
  color: var(--navy);
  background: #f0f5ff;
  font-weight: 750;
}

.document-note {
  margin: 20px 0 0;
  color: #6a7896;
  font-size: 12px;
  line-height: 1.65;
}

.document-note strong {
  color: var(--navy);
}

.result-copy {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 16px;
  align-content: start;
}

.quote-card {
  position: relative;
  padding: 29px 30px;
  overflow: hidden;
  border: 1px solid #d8e6f4;
  border-radius: 18px;
  background: linear-gradient(135deg, #eef7ff, #f8f6ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.quote-card::after {
  position: absolute;
  top: -19px;
  right: 17px;
  color: rgba(86, 52, 220, 0.08);
  font-family: Georgia, serif;
  font-size: 112px;
  line-height: 1;
  content: "“";
}

.quote-stars {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
  color: #d60b68;
  font-size: 15px;
  letter-spacing: 0.14em;
}

.quote-card blockquote {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  color: #293b63;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
}

.quote-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #7482a1;
  font-size: 11px;
}

.legal-notice {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
  padding: 20px 22px;
  border: 1px solid #f5dbc4;
  border-left: 4px solid #f26622;
  border-radius: 13px;
  background: linear-gradient(105deg, #fff6e8, #fffafb);
}

.legal-notice__icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #ed5d25;
  background: #fff;
}

.legal-notice__icon svg {
  width: 21px;
  height: 21px;
}

.legal-notice p {
  margin: 0;
  color: #665a57;
  font-size: 12px;
  line-height: 1.6;
}

.legal-notice strong {
  color: #70330e;
}

.result-button {
  width: 100%;
  max-width: 420px;
  height: 52px;
}

.site-footer {
  padding: 24px 28px;
  border-top: 0;
  background: transparent;
}

.footer-card {
  padding: 28px 34px;
  border: 1px solid rgba(185, 207, 231, 0.96);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 17px 42px rgba(39, 76, 123, 0.12);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 27px;
  border-bottom: 1px solid rgba(202, 217, 234, 0.78);
}

.footer-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-badges > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(199, 216, 234, 0.82);
  border-radius: 999px;
  color: #50668d;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.footer-badges .material-symbols-outlined,
.footer-badges .ico {
  color: #4e48d7;
  font-size: 18px;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.7fr);
  gap: 55px;
}

.footer-about {
  min-width: 0;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.footer-brand .brand-mark {
  width: 50px;
  height: 56px;
}

.footer-brand > span:last-child {
  display: grid;
  gap: 3px;
}

.footer-brand > span:last-child strong {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
}

.footer-brand > span:last-child small {
  color: #667a9e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-disclaimer {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  margin-top: 23px;
}

.footer-disclaimer > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #167bad;
  background: #e7f7ff;
}

.footer-disclaimer svg {
  width: 19px;
  height: 19px;
}

.footer-disclaimer p {
  margin: 0;
  color: #61708e;
  font-size: 12px;
  line-height: 1.6;
}

.footer-disclaimer strong {
  display: block;
  margin-bottom: 3px;
  color: #26385f;
}

.footer-legal {
  margin: 16px 0 0 46px;
  color: #8691a8;
  font-size: 10px;
  line-height: 1.6;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 25px 0;
}

.footer-links > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-link-group {
  min-height: 205px;
  padding: 20px 18px 17px;
  border: 1px solid rgba(211, 224, 238, 0.78);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.footer-link-group:hover {
  border-color: rgba(112, 91, 224, 0.25);
  background: rgba(255, 255, 255, 0.68);
  transform: translateY(-2px);
}

.footer-links h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px;
  color: #43587f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.footer-links h3 .material-symbols-outlined,
.footer-links h3 .ico {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  color: #5844d5;
  background: #efedff;
  font-size: 17px;
}

.footer-links a {
  position: relative;
  margin-bottom: 9px;
  color: #627291;
  font-size: 12px;
  line-height: 1.4;
  transition: color 150ms ease, transform 150ms ease;
}

.footer-external-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}

.footer-external-link .material-symbols-outlined,
.footer-external-link .ico {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 14px;
}

.footer-links a:hover {
  color: var(--purple);
  transform: translateX(2px);
}

.footer-legal-band {
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  padding: 19px 21px;
  border: 1px solid rgba(187, 216, 235, 0.9);
  border-radius: 15px;
  background: linear-gradient(110deg, rgba(228, 247, 255, 0.8), rgba(244, 241, 255, 0.72));
}

.footer-legal-icon {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #1f9ed2, #5c42d8);
  box-shadow: 0 9px 19px rgba(61, 87, 191, 0.2);
  font-size: 23px;
}

.footer-legal-band p {
  margin: 0;
  color: #536686;
  font-size: 12px;
  line-height: 1.6;
}

.footer-legal-band p strong {
  color: #22365d;
}

.footer-legal-band .footer-legal {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 7px 0 0;
  color: #7d8ba4;
  font-size: 10px;
}

.footer-legal-band .footer-legal .material-symbols-outlined,
.footer-legal-band .footer-legal .ico {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #6177a2;
  font-size: 15px;
}

.footer-legal-band .footer-legal a {
  color: #5a4bc2;
  text-decoration: underline;
  text-decoration-color: rgba(90, 75, 194, 0.35);
  text-underline-offset: 2px;
}

.footer-bottom {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(202, 217, 234, 0.72);
  color: #8490a7;
  font-size: 11px;
  text-align: center;
}

.footer-bottom strong {
  color: #61708e;
}

.main-nav a[aria-current="page"] {
  color: var(--purple);
}

.main-nav a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Pagina Despre */
.about-page {
  padding: 0 38px;
}

.about-body .page-shell {
  overflow: clip;
}

.about-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.72fr);
  gap: 68px;
  align-items: center;
  min-height: 510px;
  padding: 58px 28px 48px;
}

.about-hero::before {
  position: absolute;
  z-index: -1;
  top: 30px;
  right: -10%;
  width: 58%;
  height: 88%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 145, 242, 0.12), rgba(110, 68, 226, 0.055) 43%, transparent 72%);
  content: "";
  filter: blur(8px);
  pointer-events: none;
}

.about-hero__copy {
  animation: content-arrive 420ms cubic-bezier(.22, .8, .25, 1) both;
}

.about-hero .eyebrow {
  margin-left: 0;
}

.about-hero .eyebrow .material-symbols-outlined,
.about-hero .eyebrow .ico {
  color: #1979e9;
  font-size: 18px;
}

.about-hero h1 {
  max-width: 680px;
  margin-bottom: 24px;
  font-size: clamp(61px, 5.6vw, 82px);
  line-height: 0.97;
}

.about-lead {
  max-width: 690px;
  margin-bottom: 32px;
  color: #617497;
  font-size: 18px;
  line-height: 1.75;
}

.about-hero__actions,
.about-cta__actions {
  display: flex;
  gap: 14px;
  align-items: center;
}

.about-primary-button {
  min-width: 330px;
}

.about-primary-button > span,
.about-primary-button > small {
  white-space: nowrap;
}

.about-primary-button .material-symbols-outlined,
.about-primary-button .ico {
  font-size: 21px;
}

.about-hero .button--secondary .material-symbols-outlined,
.about-hero .button--secondary .ico,
.about-cta .button--secondary .material-symbols-outlined,
.about-cta .button--secondary .ico {
  color: var(--purple);
  font-size: 20px;
}

.about-proof {
  position: relative;
  min-height: 345px;
  padding: 34px 32px 29px;
  overflow: hidden;
  border: 1px solid rgba(190, 209, 234, 0.82);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(244, 248, 255, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 24px 54px rgba(45, 77, 132, 0.12);
  backdrop-filter: blur(23px) saturate(145%);
  -webkit-backdrop-filter: blur(23px) saturate(145%);
  animation: art-arrive 520ms ease-out both;
}

.about-proof::after {
  position: absolute;
  right: -68px;
  bottom: -80px;
  width: 245px;
  height: 245px;
  border: 1px solid rgba(91, 69, 220, 0.13);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 28px rgba(87, 62, 220, 0.035), 0 0 0 60px rgba(28, 153, 226, 0.03);
}

.about-proof__glow {
  position: absolute;
  top: -85px;
  right: -58px;
  width: 225px;
  height: 225px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 38%, rgba(42, 184, 231, 0.3), rgba(101, 70, 230, 0.16) 45%, transparent 70%);
  filter: blur(3px);
}

.about-proof__icon {
  position: relative;
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, #1b9fe0, #6138d8);
  box-shadow: 0 13px 28px rgba(68, 77, 204, 0.23);
}

.about-proof__icon .material-symbols-outlined,
.about-proof__icon .ico {
  font-size: 29px;
}

.about-proof__eyebrow {
  position: relative;
  margin-bottom: 6px;
  color: #55729f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.about-proof h2 {
  position: relative;
  max-width: 430px;
  margin-bottom: 12px;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.12;
}

.about-proof > p:not(.about-proof__eyebrow) {
  position: relative;
  max-width: 440px;
  margin-bottom: 23px;
  color: #647696;
  font-size: 14px;
  line-height: 1.65;
}

.about-proof__stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(198, 214, 232, 0.82);
}

.about-proof__stats span {
  display: grid;
  gap: 1px;
  padding: 18px 10px 0;
}

.about-proof__stats span:first-child {
  padding-left: 0;
}

.about-proof__stats span + span {
  border-left: 1px solid rgba(205, 218, 233, 0.74);
}

.about-proof__stats strong {
  color: #273c67;
  font-size: 17px;
  line-height: 1.25;
}

.about-proof__stats small {
  color: #7b89a4;
  font-size: 9px;
  line-height: 1.35;
}

.about-toc {
  position: sticky;
  z-index: 12;
  top: 12px;
  display: flex;
  gap: 25px;
  align-items: center;
  margin: 0 0 30px;
  padding: 13px 17px 13px 21px;
  border: 1px solid rgba(197, 214, 234, 0.86);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 30px rgba(39, 76, 123, 0.09);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.about-toc strong {
  flex: 0 0 auto;
  color: #364c76;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-toc > div {
  display: flex;
  flex: 1;
  gap: 7px;
  justify-content: flex-end;
}

.about-toc a {
  padding: 8px 12px;
  border-radius: 9px;
  color: #5f7092;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.about-toc a:hover,
.about-toc a:focus-visible {
  color: var(--purple);
  background: rgba(91, 62, 220, 0.08);
  transform: translateY(-1px);
}

.about-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.about-card,
.about-panel,
.about-cta {
  scroll-margin-top: 92px;
  border: 1px solid rgba(185, 207, 231, 0.95);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 18px 42px rgba(43, 78, 126, 0.08);
  backdrop-filter: blur(19px) saturate(140%);
  -webkit-backdrop-filter: blur(19px) saturate(140%);
}

.about-card {
  position: relative;
  min-height: 480px;
  padding: 32px 32px 29px;
  overflow: hidden;
  border-radius: 21px;
}

.about-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #22a4dc, #6140dc);
  content: "";
}

.about-card--warning::before {
  background: linear-gradient(90deg, #fa9a42, #ee4e78);
}

.about-card__head {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 23px;
}

.about-card__icon,
.about-section-icon {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #1ca0dd, #5439d6);
  box-shadow: 0 10px 22px rgba(49, 92, 192, 0.19);
  font-size: 24px;
}

.about-card--warning .about-card__icon,
.about-panel--ambiguities .about-section-icon {
  background: linear-gradient(145deg, #ff963e, #e24e70);
  box-shadow: 0 10px 22px rgba(223, 91, 90, 0.18);
}

.about-card__head small,
.about-section-head > div > p {
  display: block;
  margin: 0 0 3px;
  color: #6c7c99;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.about-card h2,
.about-section-head h2,
.about-cta h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.12;
}

.about-card h2 {
  font-size: 31px;
}

.about-card > p {
  color: #5f7193;
  font-size: 15px;
  line-height: 1.73;
}

.about-card > p strong {
  color: #24395f;
}

.about-card__note {
  padding: 14px 16px;
  border-left: 3px solid #5d47dc;
  border-radius: 0 10px 10px 0;
  background: rgba(239, 237, 255, 0.7);
  font-size: 13px !important;
}

.about-card__source-copy {
  color: #7886a0 !important;
  font-size: 12px !important;
}

.about-warning-box {
  margin-bottom: 19px;
  padding: 18px 19px;
  border: 1px solid rgba(242, 164, 120, 0.5);
  border-radius: 14px;
  background: linear-gradient(110deg, rgba(255, 245, 235, 0.88), rgba(255, 239, 244, 0.68));
}

.about-warning-box strong {
  display: block;
  margin-bottom: 7px;
  color: #a33b37;
  font-size: 15px;
}

.about-warning-box p {
  margin: 0;
  color: #7b5b63;
  font-size: 13px;
  line-height: 1.67;
}

.about-source-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #4f38cd;
  font-size: 12px;
  font-weight: 800;
}

.about-source-link .material-symbols-outlined,
.about-source-link .ico {
  font-size: 17px;
}

.about-source-link .material-symbols-outlined:last-child,
.about-source-link .ico:last-child {
  font-size: 14px;
}

.about-panel {
  margin-bottom: 24px;
  padding: 32px;
  border-radius: 21px;
}

.about-section-head {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 25px;
}

.about-section-head h2 {
  font-size: 32px;
}

.about-section-badge {
  padding: 8px 12px;
  border-radius: 999px;
  color: #5538cc;
  background: #f0edff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.about-section-badge--blue {
  color: #0a7aa9;
  background: #e3f7ff;
}

.about-section-badge--orange {
  color: #bb4c2b;
  background: #fff0e6;
}

.about-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(205, 219, 235, 0.84);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.46);
  outline: none;
}

.about-table-wrap:focus-visible {
  outline: 3px solid rgba(31, 114, 235, 0.3);
  outline-offset: 3px;
}

.about-table {
  width: 100%;
  border-collapse: collapse;
  color: #526687;
  font-size: 13px;
  line-height: 1.58;
}

.about-table th,
.about-table td {
  padding: 15px 18px;
  border-bottom: 1px solid rgba(214, 225, 238, 0.82);
  text-align: left;
  vertical-align: top;
}

.about-table thead th {
  color: #52617d;
  background: rgba(239, 245, 252, 0.76);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about-table tbody tr:last-child th,
.about-table tbody tr:last-child td {
  border-bottom: 0;
}

.about-table tbody tr {
  transition: background 160ms ease;
}

.about-table tbody tr:hover {
  background: rgba(242, 247, 255, 0.76);
}

.about-table tbody th {
  width: 235px;
  color: #2f436a;
  font-weight: 750;
}

.about-table tbody th small {
  color: #7c89a1;
  font-size: 10px;
  font-weight: 600;
}

.about-table td strong {
  color: #283f67;
}

.about-table--salary {
  min-width: 660px;
}

.about-table--salary th:nth-child(3),
.about-table--salary td:nth-child(3) {
  text-align: right;
}

.about-table--salary td:last-child {
  color: #7a89a3;
}

.about-table--salary .is-current {
  background: linear-gradient(90deg, rgba(226, 248, 255, 0.72), rgba(240, 237, 255, 0.52));
}

.current-pill {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: #0b7d73;
  background: #dcf7ef;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.about-footnote {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 2px 0;
  color: #6f7f9c;
  font-size: 12px;
  line-height: 1.6;
}

.about-footnote .material-symbols-outlined,
.about-footnote .ico {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #5380bd;
  font-size: 19px;
}

.ambiguity-intro {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(239, 180, 139, 0.55);
  border-radius: 15px;
  background: linear-gradient(110deg, rgba(255, 246, 233, 0.84), rgba(255, 240, 245, 0.64));
}

.ambiguity-intro > .material-symbols-outlined,
.ambiguity-intro > .ico {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: #cf5636;
  background: rgba(255, 255, 255, 0.72);
  font-size: 22px;
}

.ambiguity-intro p {
  margin: 0;
  color: #745d68;
  font-size: 13px;
  line-height: 1.7;
}

.interpretation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.interpretation-card {
  padding: 23px 23px 20px;
  border: 1px solid rgba(211, 222, 236, 0.86);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.interpretation-card:hover {
  border-color: rgba(105, 81, 220, 0.25);
  background: rgba(255, 255, 255, 0.74);
  transform: translateY(-2px);
}

.interpretation-card__label {
  display: inline-flex;
  margin-bottom: 13px;
  padding: 6px 9px;
  border-radius: 8px;
  color: #b04a2f;
  background: #fff0e8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.interpretation-card h3 {
  margin-bottom: 12px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
}

.interpretation-card p {
  margin-bottom: 11px;
  color: #647493;
  font-size: 13px;
  line-height: 1.68;
}

.interpretation-card p:last-child {
  margin-bottom: 0;
}

.interpretation-card strong {
  color: #394b6c;
}

.about-cta {
  display: flex;
  gap: 35px;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 0;
  padding: 30px 32px;
  overflow: hidden;
  border-color: rgba(170, 194, 230, 0.78);
  border-radius: 20px;
  background: linear-gradient(112deg, rgba(229, 248, 255, 0.8), rgba(241, 238, 255, 0.76) 58%, rgba(255, 241, 247, 0.68));
}

.about-cta > div:first-child {
  position: relative;
  padding-left: 55px;
}

.about-cta > div:first-child > .material-symbols-outlined,
.about-cta > div:first-child > .ico {
  position: absolute;
  top: 2px;
  left: 0;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #159dda, #5d3bd8);
  font-size: 22px;
}

.about-cta p {
  margin-bottom: 4px;
  color: #55709a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about-cta h2 {
  max-width: 520px;
  font-size: 27px;
}

.about-cta__actions {
  flex: 0 0 auto;
}

.about-cta .about-primary-button {
  min-width: 290px;
}

.about-cta .button--secondary {
  width: 205px;
}

/* Pagini interioare: barem, experți și întrebări */
.inner-body .page-shell {
  overflow: clip;
}

.resource-page {
  padding: 0 38px;
}

.resource-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.52fr);
  gap: 58px;
  align-items: center;
  min-height: 500px;
  padding: 58px 28px 48px;
}

.resource-hero::before,
.faq-resource-hero::before {
  position: absolute;
  z-index: -1;
  top: 25px;
  right: -8%;
  width: 54%;
  height: 88%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 166, 228, 0.13), rgba(100, 65, 223, 0.06) 45%, transparent 72%);
  content: "";
  filter: blur(8px);
}

.resource-hero__copy {
  animation: content-arrive 420ms cubic-bezier(.22, .8, .25, 1) both;
}

.resource-hero .eyebrow,
.faq-resource-hero .eyebrow {
  margin-left: 0;
}

.resource-hero .eyebrow .material-symbols-outlined,
.resource-hero .eyebrow .ico,
.faq-resource-hero .eyebrow .material-symbols-outlined,
.faq-resource-hero .eyebrow .ico {
  color: #1979e9;
  font-size: 18px;
}

.resource-hero h1 {
  max-width: 850px;
  margin-bottom: 22px;
  font-size: clamp(52px, 5.2vw, 75px);
  line-height: 0.98;
}

.resource-lead {
  max-width: 760px;
  margin-bottom: 28px;
  color: #627596;
  font-size: 17px;
  line-height: 1.72;
}

.resource-search {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  max-width: 775px;
  min-height: 58px;
  padding: 6px 6px 6px 17px;
  border: 1px solid rgba(184, 205, 231, 0.92);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 14px 34px rgba(42, 78, 129, 0.09);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.resource-search > .material-symbols-outlined,
.resource-search > .ico {
  color: #5b45d6;
  font-size: 22px;
}

.resource-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #20365d;
  background: transparent;
  font: inherit;
  font-size: 14px;
}

.resource-search input::placeholder {
  color: #8794ab;
}

.resource-search:focus-within {
  border-color: rgba(91, 63, 218, 0.55);
  box-shadow: 0 0 0 4px rgba(91, 63, 218, 0.08), 0 18px 38px rgba(42, 78, 129, 0.12);
}

.resource-search button {
  min-width: 105px;
  height: 46px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #6545e1, #4d21ce);
  box-shadow: 0 9px 20px rgba(79, 42, 202, 0.2);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.search-status {
  margin: 10px 3px 0;
  color: #7a88a3;
  font-size: 11px;
  font-weight: 650;
}

.resource-hero__card {
  position: relative;
  min-height: 305px;
  padding: 31px 29px 27px;
  overflow: hidden;
  border: 1px solid rgba(190, 210, 233, 0.86);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(242, 248, 255, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 24px 55px rgba(41, 76, 130, 0.12);
  backdrop-filter: blur(23px) saturate(145%);
  -webkit-backdrop-filter: blur(23px) saturate(145%);
  animation: art-arrive 520ms ease-out both;
}

.resource-hero__card::after {
  position: absolute;
  right: -62px;
  bottom: -82px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(87, 62, 220, 0.14);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 28px rgba(87, 62, 220, 0.035), 0 0 0 58px rgba(31, 157, 221, 0.03);
}

.resource-hero__card-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 21px;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, #1aa1df, #5e3bd9);
  box-shadow: 0 12px 26px rgba(57, 83, 193, 0.22);
  font-size: 28px;
}

.resource-hero__card > small {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 5px;
  color: #6f7e99;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.resource-hero__card > strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.08;
}

.resource-hero__card > p {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  color: #687996;
  font-size: 12px;
  line-height: 1.6;
}

.resource-hero__card > div {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 15px;
  border-top: 1px solid rgba(201, 216, 233, 0.82);
}

.resource-hero__card > div span {
  display: grid;
  color: #77859e;
  font-size: 10px;
}

.resource-hero__card > div span + span {
  padding-left: 15px;
  border-left: 1px solid rgba(205, 219, 234, 0.8);
}

.resource-hero__card > div b {
  color: #30466d;
  font-size: 18px;
}

.resource-hero__card > a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #533bcf;
  font-size: 11px;
  font-weight: 800;
}

.resource-hero__card > a .material-symbols-outlined,
.resource-hero__card > a .ico {
  font-size: 15px;
}

.catalog-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 24px;
  align-items: start;
}

.catalog-panel,
.experts-panel,
.faq-overview-new,
.faq-glass-section,
.faq-sources-new {
  border: 1px solid rgba(184, 206, 231, 0.95);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 18px 43px rgba(43, 78, 126, 0.075);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.catalog-panel {
  padding: 28px;
}

.resource-section-head {
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 22px;
}

.resource-section-head > .material-symbols-outlined,
.resource-section-head > .ico {
  display: grid;
  width: 47px;
  height: 47px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #1ca0dd, #573ad7);
  box-shadow: 0 10px 23px rgba(56, 84, 193, 0.19);
  font-size: 23px;
}

.resource-section-head p {
  margin: 0 0 2px;
  color: #74839f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.resource-section-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 29px;
  font-weight: 400;
  line-height: 1.12;
}

.resource-section-head > small {
  padding: 7px 10px;
  border-radius: 999px;
  color: #5740cc;
  background: #f0edff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.catalog-intro {
  margin: -3px 0 19px;
  color: #6d7d99;
  font-size: 13px;
  line-height: 1.65;
}

.catalog-list {
  display: grid;
  gap: 8px;
}

.catalog-row {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) 23px;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 8px 12px 8px 10px;
  border: 1px solid rgba(214, 225, 238, 0.82);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.5);
  transition: border-color 170ms ease, background 170ms ease, transform 170ms ease, box-shadow 170ms ease;
}

.catalog-row:hover,
.catalog-row:focus-visible {
  border-color: rgba(91, 63, 218, 0.28);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 25px rgba(53, 82, 128, 0.08);
  transform: translateY(-2px);
}

.catalog-row__index,
.catalog-row__icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 11px;
  color: #4d3bc6;
  background: #efedff;
  font-size: 10px;
  font-weight: 850;
}

.catalog-row__icon {
  color: #087daa;
  background: #e5f7ff;
  font-size: 19px;
}

.catalog-row__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.catalog-row__body strong {
  color: #314568;
  font-size: 13px;
  line-height: 1.35;
}

.catalog-row__body small {
  color: #8793a8;
  font-size: 10px;
}

.catalog-row__arrow {
  color: #7b6ad9;
  font-size: 19px;
  transition: transform 170ms ease;
}

.catalog-row:hover .catalog-row__arrow {
  transform: translateX(3px);
}

[data-filter-item][hidden],
[data-filter-group][hidden],
/* §164: si ce se da la o parte cat timp se cauta. `hidden` PIERDE in fata
   unui `display` din foaie — `.faq-chapter-grid` e `display: grid`, deci
   fara randul asta grila capitolelor ramanea la vedere peste rezultate
   (masurat pe randare, nu banuit). */
[data-search-hide][hidden],
.search-empty[hidden] {
  display: none !important;
}

.search-empty {
  margin: 20px 0;
  padding: 35px 20px;
  border: 1px dashed #c9d7e8;
  border-radius: 18px;
  color: #6e7f9c;
  background: rgba(255, 255, 255, 0.58);
  text-align: center;
}

.search-empty .material-symbols-outlined,
.search-empty .ico {
  display: block;
  margin-bottom: 7px;
  color: #6148d5;
  font-size: 31px;
}

.search-empty strong {
  display: block;
  margin-bottom: 4px;
  color: #34496f;
}

.search-empty p {
  margin: 0;
  font-size: 12px;
}

.resource-source-note,
.experts-disclaimer {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  margin-top: 24px;
  padding: 21px 23px;
  border: 1px solid rgba(184, 213, 235, 0.88);
  border-radius: 17px;
  background: linear-gradient(110deg, rgba(228, 248, 255, 0.8), rgba(243, 240, 255, 0.72));
}

.resource-source-note > .material-symbols-outlined,
.resource-source-note > .ico,
.experts-disclaimer > .material-symbols-outlined,
.experts-disclaimer > .ico {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #1d9ed8, #5c3bd6);
  font-size: 23px;
}

.resource-source-note strong,
.experts-disclaimer strong {
  color: #294064;
  font-size: 13px;
}

.resource-source-note p,
.experts-disclaimer p {
  margin: 3px 0 0;
  color: #627492;
  font-size: 12px;
  line-height: 1.65;
}

.resource-source-note > a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 10px 13px;
  border: 1px solid rgba(91, 64, 210, 0.2);
  border-radius: 10px;
  color: #553bce;
  background: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.resource-source-note > a .material-symbols-outlined,
.resource-source-note > a .ico {
  font-size: 15px;
}

.experts-panel {
  padding: 28px;
}

.experts-table-wrap {
  overflow: auto;
  border: 1px solid rgba(205, 219, 235, 0.85);
  border-radius: 15px;
  outline: 0;
}

.experts-table-wrap:focus-visible {
  outline: 3px solid rgba(31, 114, 235, 0.3);
  outline-offset: 3px;
}

.experts-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  color: #546887;
  font-size: 12px;
}

.experts-table th,
.experts-table td {
  padding: 13px 15px;
  border-bottom: 1px solid rgba(214, 225, 238, 0.8);
  text-align: left;
}

.experts-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  color: #53617b;
  background: rgba(239, 245, 252, 0.96);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.experts-table tbody tr:last-child th,
.experts-table tbody tr:last-child td {
  border-bottom: 0;
}

.experts-table tbody tr {
  background: rgba(255, 255, 255, 0.42);
  transition: background 150ms ease;
}

.experts-table tbody tr:hover {
  background: rgba(239, 245, 255, 0.78);
}

.experts-table tbody th {
  color: #2d4267;
  font-size: 12px;
  font-weight: 750;
}

.expert-number {
  width: 58px;
  color: #8a96aa;
  text-align: center !important;
}

.experts-table td a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #566b8d;
}

.experts-table td a:hover {
  color: #543bd0;
}

.experts-table td a .material-symbols-outlined,
.experts-table td a .ico {
  color: #5a48ce;
  font-size: 16px;
}

.experts-disclaimer {
  grid-template-columns: 46px minmax(0, 1fr);
  margin-bottom: 0;
  border-color: rgba(235, 189, 153, 0.64);
  background: linear-gradient(110deg, rgba(255, 247, 235, 0.8), rgba(255, 241, 246, 0.66));
}

.experts-disclaimer > .material-symbols-outlined,
.experts-disclaimer > .ico {
  background: linear-gradient(145deg, #f7963f, #df4f70);
}

.faq-resource-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 55px;
  align-items: center;
  min-height: 455px;
  padding: 56px 28px 44px;
}

.faq-resource-hero h1 {
  max-width: 900px;
  margin-bottom: 22px;
  font-size: clamp(49px, 5vw, 72px);
  line-height: 1;
}

.faq-meta {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.faq-meta span {
  padding: 8px 11px;
  border: 1px solid rgba(198, 215, 234, 0.82);
  border-radius: 999px;
  color: #6f7f9b;
  background: rgba(255, 255, 255, 0.62);
  font-size: 10px;
}

.faq-meta strong {
  color: #4e3bc3;
}

.faq-hero-notice {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 24px 22px;
  border: 1px solid rgba(235, 173, 133, 0.62);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 249, 239, 0.86), rgba(255, 238, 245, 0.7));
  box-shadow: 0 18px 43px rgba(111, 72, 89, 0.08);
  backdrop-filter: blur(18px);
}

.faq-hero-notice > .material-symbols-outlined,
.faq-hero-notice > .ico {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #fa9340, #df4c71);
  font-size: 25px;
}

.faq-hero-notice strong {
  display: block;
  margin: 3px 0 5px;
  color: #8f3c43;
  font-size: 14px;
}

.faq-hero-notice p {
  margin: 0;
  color: #795e68;
  font-size: 12px;
  line-height: 1.6;
}

.faq-overview-new {
  padding: 28px;
}

.faq-overview-copy p {
  margin: 0 0 3px;
  color: #74839e;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.faq-overview-copy h2 {
  margin-bottom: 20px;
  font-family: var(--font-serif);
  font-size: 31px;
  font-weight: 400;
}

.faq-search {
  max-width: none;
}

.faq-chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.faq-chapter-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 4px 11px;
  align-items: center;
  min-height: 78px;
  padding: 11px 13px;
  border: 1px solid rgba(211, 224, 238, 0.82);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.5);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.faq-chapter-link:hover,
.faq-chapter-link:focus-visible {
  border-color: rgba(91, 65, 215, 0.25);
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

.faq-chapter-link > span {
  display: grid;
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #513bc9;
  background: #efedff;
  font-size: 10px;
  font-weight: 850;
}

.faq-chapter-link strong {
  color: #35496d;
  font-size: 11px;
  line-height: 1.35;
}

.faq-chapter-link small {
  color: #8a96aa;
  font-size: 9px;
}

.faq-content-new {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

.faq-glass-section {
  scroll-margin-top: 20px;
  padding: 28px;
}

.faq-section-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 20px;
}

.faq-section-head > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #1b9fde, #5b39d7);
  box-shadow: 0 10px 23px rgba(57, 83, 194, 0.19);
  font-size: 11px;
  font-weight: 850;
}

.faq-section-head p {
  margin: 0 0 2px;
  color: #7b89a2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.faq-section-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
}

.faq-section-head small {
  padding: 7px 10px;
  border-radius: 999px;
  color: #5841cc;
  background: #f0edff;
  font-size: 9px;
  font-weight: 800;
}

.faq-items {
  display: grid;
  gap: 8px;
}

.faq-glass-item {
  overflow: hidden;
  border: 1px solid rgba(212, 224, 238, 0.84);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.48);
  transition: border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.faq-glass-item[open] {
  border-color: rgba(93, 67, 215, 0.25);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 11px 27px rgba(45, 75, 122, 0.07);
}

.faq-glass-item summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: center;
  min-height: 65px;
  padding: 10px 15px 10px 11px;
  color: #304568;
  cursor: pointer;
  list-style: none;
}

.faq-glass-item summary::-webkit-details-marker {
  display: none;
}

.faq-item-number {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #5740cc;
  background: #f0edff;
  font-size: 9px;
  font-weight: 850;
}

.faq-glass-item summary strong {
  font-size: 13px;
  line-height: 1.45;
}

.faq-item-toggle {
  color: #6c59d2;
  font-size: 22px;
  transition: transform 170ms ease;
}

.faq-glass-item[open] .faq-item-toggle {
  transform: rotate(180deg);
}

.faq-answer {
  margin: 0 15px 15px 61px;
  padding: 16px 18px;
  border-top: 1px solid rgba(213, 224, 238, 0.82);
  color: #617391;
}

.faq-answer > p:first-child {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.75;
}

.faq-legal-line,
.faq-editorial-note {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: 9px 0 0;
  padding: 11px 12px;
  border-radius: 10px;
  color: #667896;
  background: rgba(239, 242, 255, 0.72);
  font-size: 11px;
  line-height: 1.55;
}

.faq-legal-line .material-symbols-outlined,
.faq-legal-line .ico,
.faq-editorial-note .material-symbols-outlined,
.faq-editorial-note .ico {
  color: #5743cc;
  font-size: 18px;
}

.faq-legal-line strong {
  display: block;
  color: #405479;
}

.faq-editorial-note {
  background: rgba(255, 245, 231, 0.76);
}

.faq-editorial-note .material-symbols-outlined,
.faq-editorial-note .ico {
  color: #c45b35;
}

.faq-sources-new {
  margin-top: 24px;
  padding: 28px;
}

.faq-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.faq-source-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: start;
  min-height: 105px;
  padding: 15px;
  border: 1px solid rgba(211, 224, 238, 0.84);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.faq-source-card:hover,
.faq-source-card:focus-visible {
  border-color: rgba(91, 65, 215, 0.28);
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

.faq-source-card > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #513bc9;
  background: #efedff;
  font-size: 10px;
  font-weight: 850;
}

.faq-source-card strong {
  color: #34486b;
  font-size: 12px;
  line-height: 1.4;
}

.faq-source-card p {
  margin: 5px 0 0;
  color: #7b89a1;
  font-size: 10px;
  line-height: 1.55;
}

.faq-source-card > .material-symbols-outlined,
.faq-source-card > .ico {
  color: #6d59d3;
  font-size: 17px;
}

.faq-final-disclaimer {
  margin-top: 24px;
}

/* Panou de accesibilitate păstrat pentru pagina existentă */
.a11y-trigger {
  position: fixed;
  z-index: 80;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: 52px;
  height: 52px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #1a9dda, #5b36d8);
  box-shadow: 0 15px 34px rgba(64, 62, 183, 0.28);
  cursor: pointer;
}

.a11y-trigger .material-symbols-outlined,
.a11y-trigger .ico {
  font-size: 27px;
}

.a11y-panel {
  position: fixed;
  z-index: 90;
  right: 22px;
  bottom: 84px;
  width: min(380px, calc(100vw - 32px));
  max-height: min(690px, calc(100vh - 110px));
  overflow: auto;
  border: 1px solid rgba(191, 210, 234, 0.9);
  border-radius: 20px;
  background: rgba(250, 252, 255, 0.9);
  box-shadow: 0 24px 64px rgba(27, 49, 98, 0.24);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.a11y-panel[hidden] {
  display: none;
}

.a11y-panel__header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(207, 220, 236, 0.88);
  background: rgba(251, 253, 255, 0.92);
  backdrop-filter: blur(16px);
}

.a11y-panel__header > div {
  display: flex;
  gap: 9px;
  align-items: center;
}

.a11y-panel__header h2 {
  margin: 0;
  font-size: 15px;
}

.a11y-panel__header > div > .material-symbols-outlined,
.a11y-panel__header > div > .ico {
  color: var(--purple);
  font-size: 22px;
}

.a11y-close {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid #d9e3ef;
  border-radius: 10px;
  color: #526889;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.a11y-close .material-symbols-outlined,
.a11y-close .ico {
  font-size: 19px;
}

.a11y-panel__body {
  padding: 10px 14px 16px;
}

.a11y-group-title {
  margin: 10px 5px 7px;
  color: #60728f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.a11y-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 43px;
  margin-bottom: 5px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #425779;
  background: rgba(255, 255, 255, 0.48);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.a11y-option:hover,
.a11y-option[aria-checked="true"] {
  border-color: rgba(102, 76, 220, 0.2);
  background: #f0edff;
}

.a11y-option > .material-symbols-outlined,
.a11y-option > .ico,
.a11y-letter {
  color: #5a42d2;
  font-size: 19px;
  font-weight: 750;
  text-align: center;
}

.a11y-option small {
  color: #687791;
  font-size: 12px;
  font-weight: 700;
}

.a11y-option[aria-checked="true"] small {
  color: #0c695a;
}

.a11y-reset {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 1px solid #cbd8e8;
  border-radius: 11px;
  color: #4a5f82;
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.a11y-reset .material-symbols-outlined,
.a11y-reset .ico {
  font-size: 18px;
}

.a11y-privacy {
  margin: 10px 0 0;
  color: #667791;
  font-size: 12px;
  text-align: center;
}

.reading-guide {
  position: fixed;
  z-index: 70;
  top: var(--reader-y, 50vh);
  right: 0;
  left: 0;
  display: none;
  height: 54px;
  border-top: 2px solid rgba(52, 83, 186, 0.32);
  border-bottom: 2px solid rgba(52, 83, 186, 0.32);
  background: rgba(88, 117, 222, 0.08);
  pointer-events: none;
  transform: translateY(-50%);
}

html.a11y-ghid-citire .reading-guide {
  display: block;
}

html.a11y-text-mare {
  font-size: 118.75%;
}

html.a11y-text-mare body {
  zoom: 1.12;
}

html.a11y-citire-usoara body,
html.a11y-citire-usoara h1,
html.a11y-citire-usoara h2,
html.a11y-citire-usoara h3,
html.a11y-citire-usoara .brand-name {
  font-family: Arial, Verdana, sans-serif;
  letter-spacing: 0.01em;
}

html.a11y-legaturi a:not(.button):not(.header-button) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px;
}

html.a11y-contrast {
  --navy: #000;
  --navy-soft: #000;
  --muted: #263247;
  --line: #5a6578;
}

html.a11y-contrast .about-card,
html.a11y-contrast .about-panel,
html.a11y-contrast .about-proof,
html.a11y-contrast .footer-card,
html.a11y-contrast .about-toc,
html.a11y-contrast .legal-hero__aside,
html.a11y-contrast .legal-toc,
html.a11y-contrast .legal-card,
html.a11y-contrast .contact-email-stage,
html.a11y-contrast .contact-panel,
html.a11y-contrast .contact-purpose-card,
html.a11y-contrast .contact-warning {
  border-color: #3f4a5c;
  background: rgba(255, 255, 255, 0.96);
}

html.a11y-gri .page-shell,
html.a11y-gri .a11y-trigger,
html.a11y-gri .a11y-panel {
  filter: grayscale(1);
}

html.a11y-invers .page-shell {
  filter: invert(1) hue-rotate(180deg);
}

html.a11y-invers .page-shell img {
  filter: invert(1) hue-rotate(180deg);
}

html.a11y-focus :focus-visible {
  outline: 5px solid #ff6a00 !important;
  outline-offset: 4px !important;
}

html.a11y-cursor-mare,
html.a11y-cursor-mare * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 2l19 19-9 1 5 8-4 2-5-8-6 6z' fill='%23fff' stroke='%23081333' stroke-width='2'/%3E%3C/svg%3E") 3 2, auto !important;
}

html.a11y-fara-miscare *,
html.a11y-fara-miscare *::before,
html.a11y-fara-miscare *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}

html.a11y-fara-miscare .reveal {
  opacity: 1 !important;
  filter: none !important;
  translate: 0 0 !important;
}

.reveal {
  opacity: 0;
  filter: blur(2px);
  translate: 0 22px;
  transition: opacity 620ms cubic-bezier(.22, .8, .25, 1), translate 620ms cubic-bezier(.22, .8, .25, 1), filter 620ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  translate: 0 0;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1240px) {
  .brand { min-width: 300px; }
  .main-nav { gap: 22px; margin-right: 22px; }
  .header-button { padding: 0 15px; }
  .hero-art {
    left: 575px;
    width: calc(100% - 575px);
  }
  .hero-art img { left: -650px; }
  .assurances { margin-right: 100px; margin-left: 100px; }
  .pricing-card { padding-right: 24px; padding-left: 24px; }
  .pricing-card__header h3 { font-size: 19px; }
  .trust-grid article { padding-right: 21px; padding-left: 21px; }
  .footer-main { gap: 38px; }
  .footer-links { gap: 14px; }
}

/* ======================================================================
   §175b — BURGERUL APARE LA 1180, NU LA 1080.

   Găsit măsurând suprapunerea de la §175, pe alt drum decât cel căutat:
   între 1081 și 1170 px, NUMELE SITULUI stă sub meniu. Mecanismul e o
   capcană cunoscută a lui flex: `.header-menu` are `flex: 1` cu
   `min-width: 0`, deci se strânge oricât, dar conținutul lui
   (`.main-nav` e `white-space: nowrap`) nu se strânge deloc — iar cu
   `justify-content: flex-end` prisosul iese pe STÂNGA, adică peste marcă.

   MĂSURAT pe randare, la 1150 px: caseta meniului are 732 px, conținutul
   lui cere 753 (nav 478 + 22 + contul 253) — 21 px care se scriu peste
   „TraumaScore". La 1090 px suprapunerea e de 81. Sub 1050 nu se mai
   vede, fiindcă acolo intra burgerul.

   Rândul cere 1171 px ca să încapă (marcă 300 + meniu 753 + ramele
   118). Pragul e 1180, adică primul număr rotund de deasupra lui.

   Se mută DOAR regulile antetului: cele de hero, carduri și prețuri au
   rămas la 1080, unde erau — nimic din ce nu se suprapunea nu se atinge.
   ====================================================================== */
@media (max-width: 1180px) {
  .site-header {
    justify-content: space-between;
  }

  .brand {
    min-width: auto;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
  }

  .header-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    display: none;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 34px rgba(28, 75, 132, 0.16);
  }

  .site-header.menu-open .header-menu {
    display: grid;
    gap: 18px;
  }

  .main-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 0;
  }

  .main-nav a {
    padding: 8px;
  }

  .account-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 1080px) {
  .hero {
    min-height: 560px;
  }

  .hero-copy {
    width: 570px;
  }

  .hero-art {
    left: 555px;
    width: calc(100% - 555px);
    opacity: 0.76;
  }

  .mode-card {
    min-height: 310px;
  }

  .card-art {
    opacity: 0.55;
  }

  .card-description {
    max-width: 390px;
  }

  .assurances {
    gap: 24px;
    margin-right: 38px;
    margin-left: 38px;
  }

  .pricing-section {
    padding-right: 28px;
    padding-left: 28px;
  }

  .pricing-grid {
    gap: 17px;
  }

  .pricing-card {
    min-height: 520px;
    padding-right: 21px;
    padding-left: 21px;
  }

  .pricing-card__header {
    gap: 11px;
    padding-right: 0;
  }

  .pricing-card__header h3 {
    font-size: 18px;
  }

  .popular-label {
    display: none;
  }

  .professional-list {
    gap: 9px;
  }

  .professional-list span {
    font-size: 11px;
  }

  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-grid article {
    min-height: 205px;
    padding-right: 28px;
    padding-left: 28px;
  }

  .trust-grid article + article::before {
    display: none;
  }

  .trust-grid article:nth-child(even) {
    border-left: 1px solid #dbe5f0;
  }

  .trust-grid article:nth-child(n + 3) {
    border-top: 1px solid #dbe5f0;
  }

  .result-grid {
    gap: 22px;
  }

  .quote-card blockquote {
    font-size: 16px;
  }

  .footer-main {
    grid-template-columns: 1fr;
  }

  .footer-about {
    max-width: 720px;
  }

  .footer-top {
    align-items: flex-start;
  }
}

@media (max-width: 820px) {
  .page-shell {
    overflow: visible;
  }

  .site-header {
    height: 72px;
    margin: 10px 14px 0;
    padding: 0 14px;
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 48px;
    height: 54px;
  }

  .brand-mark-fallback {
    top: -18px;
    left: -53px;
  }

  .brand-name {
    font-size: 24px;
  }

  .brand-tagline {
    font-size: 8px;
  }

  .main-nav {
    grid-template-columns: 1fr;
  }

  .account-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero {
    min-height: auto;
    padding: 38px 22px 0;
  }

  .hero-copy {
    width: 100%;
  }

  .eyebrow {
    max-width: 100%;
    height: auto;
    min-height: 31px;
    margin-left: 0;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 10px;
  }

  h1 {
    font-size: clamp(43px, 12.5vw, 62px);
  }

  .hero-description {
    font-size: 15px;
  }

  .desktop-only {
    display: none;
  }

  .benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .button--primary,
  .button--secondary {
    width: 100%;
  }

  .hero-art {
    position: relative;
    top: auto;
    left: 50%;
    width: calc(100% + 44px);
    height: 390px;
    margin-top: 14px;
    transform: translateX(-50%);
    opacity: 1;
  }

  .hero-art img {
    top: -124px;
    left: 50%;
    width: 1040px;
    height: auto;
    transform: translateX(-70%);
  }

  .modes {
    padding: 26px 18px 0;
  }

  .section-heading h2 {
    font-size: 31px;
  }

  .section-heading p {
    font-size: 14px;
  }

  .mode-grid {
    grid-template-columns: 1fr;
  }

  .mode-card {
    min-height: 300px;
  }

  .assurances {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 22px 30px 0;
    padding-bottom: 24px;
  }

  .assurances strong,
  .assurances small {
    white-space: normal;
  }

  .pricing-section {
    margin-top: 34px;
    padding: 69px 18px 57px;
  }

  .section-heading--wide {
    margin-bottom: 30px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 19px;
  }

  .pricing-card,
  .pricing-card--featured {
    min-height: auto;
    padding: 28px 25px 25px;
    transform: none;
  }

  .pricing-card:hover,
  .pricing-card--featured:hover {
    transform: translateY(-3px);
  }

  .pricing-card__header {
    padding-right: 75px;
  }

  .pricing-card__header h3 {
    font-size: 21px;
  }

  .popular-label {
    display: block;
  }

  .pricing-button {
    width: 100%;
  }

  .professional-section {
    padding: 36px 18px 40px;
  }

  .professional-section > p {
    gap: 12px;
    line-height: 1.55;
  }

  .professional-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .professional-list span {
    min-height: 45px;
    white-space: normal;
  }

  .trust-section {
    padding: 51px 18px 61px;
  }

  .trust-grid article {
    min-height: 196px;
  }

  .result-section {
    padding: 69px 18px 72px;
  }

  .result-grid {
    grid-template-columns: 1fr;
  }

  .document-preview {
    padding: 25px;
  }

  .result-button {
    max-width: none;
  }

  .site-footer {
    padding: 20px 14px;
  }

  .footer-card {
    padding: 31px 25px;
  }

  .footer-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 22px;
  }

  .footer-badges {
    justify-content: flex-start;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 22px;
  }

  .footer-link-group {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .brand-tagline {
    display: none;
  }

  .brand-name {
    font-size: 22px;
  }

  .header-button {
    min-width: 0;
    padding: 0 10px;
    font-size: 12px;
  }

  .hero {
    padding-right: 18px;
    padding-left: 18px;
  }

  .benefits {
    grid-template-columns: 1fr;
  }

  .hero-art {
    width: calc(100% + 36px);
    height: 340px;
  }

  .hero-art img {
    top: -96px;
    width: 900px;
    transform: translateX(-56%);
  }

  .mode-card {
    min-height: 346px;
    padding-right: 22px;
    padding-left: 22px;
  }

  .card-art {
    right: -35px;
    opacity: 0.28;
  }

  .card-description {
    max-width: 100%;
  }

  .card-description br {
    display: none;
  }

  .card-footer {
    right: 22px;
    left: 22px;
    height: 61px;
  }

  .price {
    display: grid;
  }

  .price small {
    margin-left: 0;
  }

  .pricing-card,
  .pricing-card--featured {
    padding: 25px 21px 22px;
  }

  .pricing-card__header {
    padding-right: 0;
  }

  .popular-label {
    position: static;
    align-self: flex-start;
    margin: -8px 0 17px;
  }

  .pricing-amount strong {
    font-size: 34px;
  }

  .professional-list {
    grid-template-columns: 1fr;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid article:nth-child(even) {
    border-left: 0;
  }

  .trust-grid article:nth-child(n + 2) {
    border-top: 1px solid #dbe5f0;
  }

  .document-preview {
    padding: 20px;
  }

  .document-preview__header {
    align-items: flex-start;
  }

  .mini-brand small {
    max-width: 160px;
  }

  .document-preview th,
  .document-preview td {
    padding: 11px 10px;
  }

  .quote-card {
    padding: 24px 22px;
  }

  .legal-notice {
    grid-template-columns: 1fr;
  }

  .footer-card {
    padding: 28px 21px;
  }

  .footer-badges {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .footer-badges > span {
    justify-content: center;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }

  .footer-disclaimer {
    grid-template-columns: 1fr;
  }

  .footer-legal {
    margin-left: 0;
  }

  .footer-legal-band {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .footer-bottom {
    line-height: 1.55;
    text-align: left;
  }
}

@media (max-width: 1240px) {
  .about-hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
    gap: 38px;
  }

  .about-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 1080px) {
  .about-page {
    padding-right: 24px;
    padding-left: 24px;
  }

  .about-hero {
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 26px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .about-hero h1 {
    font-size: clamp(54px, 6.8vw, 72px);
  }

  .about-proof {
    padding-right: 25px;
    padding-left: 25px;
  }

  .about-proof__stats {
    grid-template-columns: 1fr;
    gap: 7px;
    padding-top: 14px;
  }

  .about-proof__stats span,
  .about-proof__stats span:first-child {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 0;
  }

  .about-proof__stats span + span {
    border-left: 0;
  }

  .about-toc {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .about-toc > div {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .about-card {
    min-height: 520px;
  }

  .about-section-head {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .about-section-badge {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 820px) {
  .about-page {
    padding: 0 18px;
  }

  .about-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 0;
    padding: 42px 0 30px;
  }

  .about-hero::before {
    right: -25%;
    width: 100%;
  }

  .about-hero h1 {
    font-size: clamp(48px, 13vw, 69px);
  }

  .about-lead {
    font-size: 16px;
  }

  .about-proof {
    min-height: 0;
  }

  .about-proof__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .about-proof__stats span,
  .about-proof__stats span:first-child {
    display: grid;
    gap: 1px;
    padding: 15px 9px 0;
  }

  .about-proof__stats span:first-child {
    padding-left: 0;
  }

  .about-proof__stats span + span {
    border-left: 1px solid rgba(205, 218, 233, 0.74);
  }

  .about-toc {
    top: 8px;
    margin-bottom: 20px;
    padding: 12px 14px;
  }

  .about-toc > div {
    padding-bottom: 3px;
  }

  .about-intro-grid,
  .interpretation-grid {
    grid-template-columns: 1fr;
  }

  .about-card {
    min-height: 0;
  }

  .about-panel,
  .about-card {
    padding: 26px 24px;
  }

  .about-section-head h2 {
    font-size: 29px;
  }

  .about-table--rules {
    min-width: 760px;
  }

  .about-cta {
    padding: 27px 24px;
  }

  .about-cta__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .about-cta .about-primary-button,
  .about-cta .button--secondary {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .about-page {
    padding: 0 14px;
  }

  .about-hero__actions,
  .about-cta__actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .about-primary-button {
    width: 100%;
  }

  .about-proof,
  .about-panel,
  .about-card,
  .about-cta {
    padding-right: 19px;
    padding-left: 19px;
    border-radius: 17px;
  }

  .about-proof__stats {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .about-proof__stats span,
  .about-proof__stats span:first-child {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 0;
  }

  .about-proof__stats span + span {
    border-left: 0;
  }

  .about-card__head,
  .about-section-head {
    align-items: flex-start;
  }

  .about-card__icon,
  .about-section-icon {
    width: 43px;
    height: 43px;
  }

  .about-section-head {
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 12px;
  }

  .about-section-head h2 {
    font-size: 26px;
  }

  .about-section-badge {
    grid-column: 1 / -1;
  }

  .about-table th,
  .about-table td {
    padding: 13px 14px;
  }

  .ambiguity-intro {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .about-cta > div:first-child {
    padding-left: 0;
  }

  .about-cta > div:first-child > .material-symbols-outlined,
.about-cta > div:first-child > .ico {
    position: static;
    margin-bottom: 13px;
  }

  .about-cta h2 {
    font-size: 25px;
  }

  .a11y-trigger {
    right: 14px;
    bottom: 14px;
  }

  .a11y-panel {
    right: 14px;
    bottom: 76px;
  }
}

@media (max-width: 1240px) {
  .resource-hero,
  .faq-resource-hero {
    gap: 35px;
  }

  .resource-page {
    padding-right: 28px;
    padding-left: 28px;
  }
}

@media (max-width: 1080px) {
  .resource-hero {
    grid-template-columns: minmax(0, 1fr) 325px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .resource-hero h1 {
    font-size: clamp(48px, 6.7vw, 66px);
  }

  .catalog-layout {
    grid-template-columns: 1fr;
  }

  .faq-resource-hero {
    grid-template-columns: minmax(0, 1fr) 300px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .faq-chapter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .resource-page {
    padding: 0 18px;
  }

  .resource-hero,
  .faq-resource-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 0;
    padding: 42px 0 30px;
  }

  .resource-hero::before,
  .faq-resource-hero::before {
    right: -25%;
    width: 100%;
  }

  .resource-hero h1,
  .faq-resource-hero h1 {
    font-size: clamp(43px, 11.5vw, 62px);
  }

  .resource-lead {
    font-size: 15px;
  }

  .resource-hero__card {
    min-height: 0;
  }

  .catalog-panel,
  .experts-panel,
  .faq-overview-new,
  .faq-glass-section,
  .faq-sources-new {
    padding: 24px;
  }

  .resource-source-note {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .resource-source-note > a {
    grid-column: 2;
    justify-self: start;
  }

  .experts-table-wrap {
    overflow: visible;
    border: 0;
  }

  .experts-table {
    min-width: 0;
  }

  .experts-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .experts-table tbody {
    display: grid;
    gap: 9px;
  }

  .experts-table tbody tr {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 4px 11px;
    padding: 12px;
    border: 1px solid rgba(211, 224, 238, 0.84);
    border-radius: 13px;
  }

  .experts-table tbody th,
  .experts-table tbody td {
    padding: 2px 0;
    border: 0;
  }

  .experts-table tbody th {
    align-self: center;
    font-size: 12px;
  }

  .experts-table .expert-number {
    display: grid;
    grid-row: 1 / 4;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: #5740cc;
    background: #f0edff;
    font-weight: 850;
  }

  .experts-table tbody td:not(.expert-number) {
    grid-column: 2;
  }

  .experts-table td a {
    word-break: break-word;
  }

  .experts-disclaimer {
    align-items: start;
  }

  .faq-chapter-grid,
  .faq-source-grid {
    grid-template-columns: 1fr;
  }

  .faq-section-head {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .faq-section-head > small {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 520px) {
  .resource-page {
    padding: 0 14px;
  }

  .resource-search {
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 10px;
  }

  .resource-search button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .resource-hero__card,
  .catalog-panel,
  .experts-panel,
  .faq-overview-new,
  .faq-glass-section,
  .faq-sources-new {
    padding-right: 18px;
    padding-left: 18px;
    border-radius: 17px;
  }

  .resource-section-head {
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 11px;
  }

  .resource-section-head > .material-symbols-outlined,
.resource-section-head > .ico {
    width: 43px;
    height: 43px;
  }

  .resource-section-head > small {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .catalog-row {
    grid-template-columns: 37px minmax(0, 1fr) 20px;
    gap: 9px;
    padding-right: 9px;
  }

  .catalog-row__index,
  .catalog-row__icon {
    width: 37px;
    height: 37px;
  }

  .resource-source-note,
  .experts-disclaimer {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .resource-source-note > a {
    grid-column: 1;
    white-space: normal;
  }

  .faq-meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .faq-hero-notice {
    grid-template-columns: 43px minmax(0, 1fr);
    padding: 18px;
  }

  .faq-hero-notice > .material-symbols-outlined,
.faq-hero-notice > .ico {
    width: 43px;
    height: 43px;
  }

  .faq-overview-copy h2,
  .resource-section-head h2 {
    font-size: 26px;
  }

  .faq-chapter-link {
    min-height: 72px;
  }

  .faq-section-head {
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 11px;
  }

  .faq-section-head > span {
    width: 43px;
    height: 43px;
  }

  .faq-section-head h2 {
    font-size: 24px;
  }

  .faq-section-head > small {
    grid-column: 1 / -1;
  }

  .faq-glass-item summary {
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    gap: 9px;
    padding-right: 10px;
  }

  .faq-item-number {
    width: 34px;
    height: 34px;
  }

  .faq-answer {
    margin: 0 10px 10px;
    padding: 14px;
  }

  .faq-answer > p:first-child {
    font-size: 13px;
  }

  .faq-source-card {
    grid-template-columns: 31px minmax(0, 1fr) 18px;
    gap: 9px;
    padding: 13px;
  }
}

/* Pagina Calculator */
.calculator-page {
  padding: 0 38px;
}

.calculator-intro {
  position: relative;
  display: grid;
  gap: 27px;
  padding: 48px 28px 24px;
}

.calculator-intro::before {
  position: absolute;
  z-index: -1;
  top: -35px;
  right: -12%;
  width: 58%;
  height: 330px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 160, 224, 0.12), rgba(93, 61, 220, 0.055) 46%, transparent 72%);
  content: "";
  filter: blur(7px);
  pointer-events: none;
}

.calculator-intro__copy {
  animation: content-arrive 420ms cubic-bezier(.22, .8, .25, 1) both;
}

.calculator-intro .eyebrow {
  margin-left: 0;
}

.calculator-intro .eyebrow .material-symbols-outlined,
.calculator-intro .eyebrow .ico {
  color: #1979e9;
  font-size: 19px;
}

.calculator-intro h1 {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: clamp(50px, 5.1vw, 72px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.calculator-intro h1 span {
  color: var(--purple);
}

.calculator-intro__copy > p:last-child {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.calculator-info-strip {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(186, 213, 234, 0.9);
  border-radius: 18px;
  background: linear-gradient(110deg, rgba(228, 248, 255, 0.8), rgba(242, 240, 255, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 14px 35px rgba(43, 78, 126, 0.07);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.calculator-info-strip__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #1ca1df, #5b3bd7);
  box-shadow: 0 10px 23px rgba(57, 84, 192, 0.2);
  font-size: 24px;
}

.calculator-info-strip strong {
  color: #294064;
  font-size: 14px;
}

.calculator-info-strip p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.calculator-info-strip > a,
.calculator-legal-note > a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(91, 64, 210, 0.22);
  border-radius: 11px;
  color: #5439cc;
  background: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}

.calculator-info-strip > a:hover,
.calculator-info-strip > a:focus-visible,
.calculator-legal-note > a:hover,
.calculator-legal-note > a:focus-visible {
  border-color: rgba(91, 64, 210, 0.42);
  box-shadow: 0 8px 20px rgba(63, 66, 160, 0.1);
  transform: translateY(-2px);
}

.calculator-info-strip > a .material-symbols-outlined,
.calculator-info-strip > a .ico,
.calculator-legal-note > a .material-symbols-outlined,
.calculator-legal-note > a .ico {
  font-size: 17px;
}

.calculator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.calculator-panel {
  min-width: 0;
  padding: 28px;
  border: 1px solid rgba(181, 204, 230, 0.96);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 20px 48px rgba(41, 77, 126, 0.12);
  backdrop-filter: blur(22px) saturate(142%);
  -webkit-backdrop-filter: blur(22px) saturate(142%);
}

.calculator-case-panel {
  position: sticky;
  top: 24px;
}

.calculator-panel__header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(205, 219, 235, 0.82);
}

.calculator-panel__header--picker {
  grid-template-columns: 52px minmax(0, 1fr);
}

.calculator-panel__icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 11px 24px rgba(48, 86, 183, 0.2);
  font-size: 26px;
}

.calculator-panel__icon--cyan {
  background: linear-gradient(145deg, #1cb3dc, #1c7fd0);
}

.calculator-panel__icon--purple {
  background: linear-gradient(145deg, #6c4ae3, #4e26ce);
}

.calculator-panel__header p {
  margin: 0 0 2px;
  color: #62738f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.calculator-panel__header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 29px;
  font-weight: 400;
  line-height: 1.1;
}

.calculator-score {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 6px;
  align-items: baseline;
  min-width: 101px;
  padding: 11px 13px;
  border: 1px solid rgba(77, 67, 208, 0.15);
  border-radius: 14px;
  color: #5a42d1;
  background: linear-gradient(135deg, #f0edff, #eef8ff);
  text-align: right;
}

.calculator-score strong {
  font-family: var(--font-serif);
  font-size: 29px;
  font-weight: 400;
  line-height: 1;
}

.calculator-score > span {
  font-size: 12px;
  font-weight: 800;
}

.calculator-score small {
  grid-column: 1 / -1;
  color: #62738f;
  font-size: 12px;
  font-weight: 650;
}

.calculator-empty-state {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 255px;
  padding: 43px 28px 38px;
  text-align: center;
}

.calculator-empty-state > .material-symbols-outlined:first-child,
.calculator-empty-state > .ico:first-child {
  display: grid;
  width: 67px;
  height: 67px;
  margin-bottom: 16px;
  place-items: center;
  border: 1px solid rgba(106, 85, 217, 0.13);
  border-radius: 22px;
  color: #6548da;
  background: linear-gradient(145deg, #f2efff, #e8f7ff);
  box-shadow: 0 13px 30px rgba(55, 82, 148, 0.09);
  font-size: 31px;
}

.calculator-empty-state h3 {
  margin: 0 0 9px;
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 400;
}

.calculator-empty-state p {
  max-width: 380px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.calculator-empty-state__arrow {
  position: absolute;
  right: 8px;
  bottom: 18px;
  color: rgba(91, 64, 210, 0.35);
  font-size: 34px;
  transform: rotate(-18deg);
}

.calculator-explainer {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  padding: 17px;
  border: 1px solid rgba(185, 216, 235, 0.86);
  border-radius: 15px;
  background: linear-gradient(110deg, rgba(228, 248, 255, 0.75), rgba(243, 240, 255, 0.68));
}

.calculator-explainer > .material-symbols-outlined,
.calculator-explainer > .ico {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: #177fb4;
  background: rgba(255, 255, 255, 0.82);
  font-size: 22px;
}

.calculator-explainer strong {
  color: #2c4268;
  font-size: 14px;
}

.calculator-explainer p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.calculator-quota {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 20px 0;
  padding: 12px 14px;
  border: 1px solid rgba(40, 156, 116, 0.2);
  border-radius: 13px;
  color: #276a55;
  background: rgba(229, 249, 241, 0.74);
}

.calculator-quota > .material-symbols-outlined,
.calculator-quota > .ico {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #25a276;
  font-size: 18px;
}

.calculator-quota p {
  margin: 0;
  font-size: 13px;
}

.calculator-quota strong {
  font-size: 16px;
}

.calculator-search > label {
  display: block;
  margin: 0 0 8px 2px;
  color: #344a70;
  font-size: 13px;
  font-weight: 800;
}

.calculator-search > div {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 5px 5px 5px 15px;
  border: 1px solid rgba(183, 204, 231, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 12px 28px rgba(45, 76, 126, 0.07);
  transition: border-color 170ms ease, box-shadow 170ms ease;
}

.calculator-search > div:focus-within {
  border-color: rgba(91, 63, 218, 0.55);
  box-shadow: 0 0 0 4px rgba(91, 63, 218, 0.08), 0 14px 31px rgba(45, 76, 126, 0.1);
}

.calculator-search > div > .material-symbols-outlined,
.calculator-search > div > .ico {
  color: #6248d5;
  font-size: 22px;
}

.calculator-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #263b61;
  background: transparent;
  font: inherit;
  font-size: 14px;
}

.calculator-search input::placeholder {
  color: #62738f;
}

.calculator-search button {
  min-width: 92px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #6545e1, #4d21ce);
  box-shadow: 0 8px 18px rgba(79, 42, 202, 0.19);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.calculator-list-heading {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin: 21px 2px 11px;
}

.calculator-list-heading p,
.calculator-list-heading span {
  margin: 0;
  color: #62738f;
  font-size: 12px;
  font-weight: 700;
}

.calculator-list-heading span {
  color: #5a43ce;
}

.calculator-chapter-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.calculator-chapter {
  --chapter-color: #178ec8;
  --chapter-soft: #e8f8ff;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 19px;
  gap: 10px;
  align-items: center;
  min-height: 67px;
  padding: 9px 10px;
  border: 1px solid rgba(210, 224, 238, 0.86);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.52);
  transition: border-color 170ms ease, background 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}

.calculator-chapter--amber { --chapter-color: #dc7818; --chapter-soft: #fff4e4; }
.calculator-chapter--green { --chapter-color: #178d67; --chapter-soft: #e9f8f1; }
.calculator-chapter--red { --chapter-color: #d44855; --chapter-soft: #fff0f1; }
.calculator-chapter--violet { --chapter-color: #6748d9; --chapter-soft: #f0edff; }
.calculator-chapter--blue { --chapter-color: #2674da; --chapter-soft: #edf4ff; }
.calculator-chapter--pink { --chapter-color: #ca3b87; --chapter-soft: #fff0f8; }

.calculator-chapter[hidden] {
  display: none;
}

.calculator-chapter:hover,
.calculator-chapter:focus-visible,
.calculator-chapter.is-selected {
  border-color: color-mix(in srgb, var(--chapter-color) 32%, #d8e4f0);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 25px rgba(48, 77, 122, 0.08);
  transform: translateY(-2px);
}

.calculator-chapter.is-selected {
  outline: 2px solid color-mix(in srgb, var(--chapter-color) 35%, transparent);
  outline-offset: 1px;
}

.calculator-chapter__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: var(--chapter-color);
  background: var(--chapter-soft);
  font-size: 22px;
}

.calculator-chapter > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.calculator-chapter strong {
  color: #34496f;
  font-size: 12px;
  line-height: 1.35;
}

.calculator-chapter small {
  color: #62738f;
  font-size: 11px;
}

.calculator-chapter > .material-symbols-outlined:last-child,
.calculator-chapter > .ico:last-child {
  color: var(--chapter-color);
  font-size: 18px;
}

.calculator-search-empty {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin-top: 10px;
  padding: 17px;
  border: 1px dashed rgba(149, 167, 191, 0.7);
  border-radius: 13px;
  color: #697a97;
  background: rgba(246, 249, 253, 0.74);
}

.calculator-search-empty[hidden] {
  display: none;
}

.calculator-search-empty > .material-symbols-outlined,
.calculator-search-empty > .ico {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 13px;
  color: #644bd2;
  background: #efedff;
}

.calculator-search-empty strong {
  display: block;
  color: #354a70;
  font-size: 14px;
}

.calculator-search-empty p {
  margin: 3px 0 0;
  font-size: 12px;
}

.calculator-legal-note {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid rgba(187, 214, 235, 0.9);
  border-radius: 17px;
  background: linear-gradient(110deg, rgba(229, 248, 255, 0.8), rgba(244, 241, 255, 0.72));
}

.calculator-legal-note > .material-symbols-outlined,
.calculator-legal-note > .ico {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #1d9ed8, #5c3bd6);
  box-shadow: 0 10px 22px rgba(55, 84, 190, 0.18);
  font-size: 23px;
}

.calculator-legal-note strong {
  color: #294064;
  font-size: 14px;
}

.calculator-legal-note p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 1080px) {
  .calculator-grid {
    grid-template-columns: 1fr;
  }

  .calculator-case-panel {
    position: static;
  }
}

@media (max-width: 820px) {
  .faq-content-new {
    gap: 20px;
  }

  .calculator-page {
    padding: 0 18px;
  }

  .calculator-intro {
    gap: 20px;
    padding: 40px 4px 20px;
  }

  .calculator-intro h1 {
    font-size: clamp(45px, 10vw, 58px);
  }

  .calculator-info-strip {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .calculator-info-strip > a {
    grid-column: 2;
    justify-self: start;
  }

  .calculator-panel {
    padding: 24px;
  }

  .calculator-grid {
    gap: 20px;
  }

  .calculator-legal-note {
    grid-template-columns: 46px minmax(0, 1fr);
    margin-top: 20px;
  }

  .calculator-legal-note > a {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .calculator-chapter-list {
    grid-template-columns: 1fr;
  }

  .calculator-info-strip {
    grid-template-columns: 1fr;
  }

  .calculator-info-strip > a {
    grid-column: 1;
    justify-self: stretch;
    justify-content: center;
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .calculator-page {
    padding: 0 14px;
  }

  .calculator-intro {
    padding-top: 34px;
  }

  .calculator-intro h1 {
    font-size: 44px;
  }

  .calculator-intro__copy > p:last-child {
    font-size: 15px;
  }

  .calculator-info-strip,
  .calculator-panel,
  .calculator-legal-note {
    padding-right: 18px;
    padding-left: 18px;
    border-radius: 17px;
  }

  .calculator-panel {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .calculator-panel__header {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
  }

  .calculator-panel__icon {
    width: 48px;
    height: 48px;
  }

  .calculator-panel__header h2 {
    font-size: 26px;
  }

  .calculator-score {
    grid-column: 1 / -1;
    justify-self: stretch;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    text-align: left;
  }

  .calculator-score small {
    grid-column: auto;
    justify-self: end;
  }

  .calculator-empty-state {
    min-height: 235px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .calculator-empty-state__arrow {
    display: none;
  }

  .calculator-explainer {
    grid-template-columns: 1fr;
  }

  .calculator-search > div {
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 10px;
  }

  .calculator-search button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .calculator-list-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .calculator-legal-note {
    grid-template-columns: 1fr;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .calculator-legal-note > a {
    grid-column: 1;
    justify-self: stretch;
    justify-content: center;
    white-space: normal;
  }
}

/* Pagini juridice și de contact */
.legal-page,
.contact-page {
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 0 28px 84px;
}

.legal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 34px;
  align-items: center;
  padding: 62px 10px 34px;
}

.legal-hero__copy .eyebrow,
.contact-hero__copy .eyebrow {
  margin-left: 0;
}

.legal-hero h1,
.contact-hero h1 {
  max-width: 820px;
  margin: 12px 0 16px;
  font-family: var(--font-serif);
  font-size: clamp(48px, 5.7vw, 78px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.legal-hero h1 span,
.contact-hero h1 span {
  color: var(--purple);
}

.legal-lead,
.contact-lead {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}

.legal-hero__aside {
  position: relative;
  overflow: hidden;
  min-height: 245px;
  padding: 28px;
  border: 1px solid rgba(179, 204, 231, 0.96);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 12%, rgba(104, 71, 225, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(237, 247, 255, 0.78));
  box-shadow: inset 0 1px 0 #fff, 0 20px 50px rgba(42, 76, 124, 0.12);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.legal-hero__aside::after {
  position: absolute;
  right: -34px;
  bottom: -42px;
  width: 150px;
  height: 150px;
  border: 30px solid rgba(77, 180, 223, 0.09);
  border-radius: 50%;
  content: "";
}

.legal-hero__icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #1aa8dd, #5c36dc);
  box-shadow: 0 14px 30px rgba(73, 72, 190, 0.24);
  font-size: 29px;
}

.legal-hero__aside small {
  display: block;
  margin-bottom: 7px;
  color: #62738f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.legal-hero__aside strong {
  display: block;
  max-width: 340px;
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.18;
}

.legal-hero__aside p {
  position: relative;
  z-index: 1;
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.legal-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 6px;
  max-height: calc(100vh - 48px);
  padding: 20px;
  overflow: auto;
  border: 1px solid rgba(181, 205, 231, 0.96);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 #fff, 0 16px 38px rgba(40, 75, 120, 0.1);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.legal-toc strong {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
  color: #34486d;
  font-size: 13px;
}

.legal-toc strong .material-symbols-outlined,
.legal-toc strong .ico {
  color: var(--purple);
  font-size: 19px;
}

.legal-toc a {
  padding: 8px 10px;
  border-radius: 10px;
  color: #526789;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  color: #4f32cf;
  background: rgba(93, 61, 215, 0.08);
  transform: translateX(3px);
}

.legal-content {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.legal-card,
.contact-panel,
.contact-purpose-card,
.contact-warning {
  border: 1px solid rgba(181, 205, 231, 0.96);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 #fff, 0 18px 44px rgba(40, 75, 120, 0.1);
  backdrop-filter: blur(21px) saturate(142%);
  -webkit-backdrop-filter: blur(21px) saturate(142%);
}

.legal-card {
  padding: 28px 30px;
  scroll-margin-top: 28px;
}

.legal-card--summary {
  background:
    linear-gradient(120deg, rgba(226, 248, 255, 0.78), rgba(244, 239, 255, 0.76)),
    rgba(255, 255, 255, 0.86);
}

.legal-card__head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 19px;
}

.legal-card__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  color: #5637d5;
  background: linear-gradient(145deg, #f0edff, #e8f8ff);
  box-shadow: inset 0 0 0 1px rgba(94, 65, 211, 0.09);
  font-size: 24px;
}

.legal-card__head small {
  display: block;
  margin-bottom: 3px;
  color: #62738f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-card h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(25px, 2.5vw, 32px);
  font-weight: 400;
  line-height: 1.15;
}

.legal-card h3 {
  margin: 24px 0 10px;
  color: #31476d;
  font-size: 16px;
}

.legal-card p,
.legal-card li,
.legal-definition dd {
  color: #4f6385;
  font-size: 15px;
  line-height: 1.75;
}

.legal-card p {
  margin: 0 0 14px;
}

.legal-card p:last-child {
  margin-bottom: 0;
}

.legal-card a:not(.button) {
  color: #5135ce;
  font-weight: 750;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal-list,
.legal-steps {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-list li,
.legal-steps li {
  position: relative;
  padding: 13px 15px 13px 45px;
  border: 1px solid rgba(199, 216, 234, 0.9);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.72);
}

.legal-list li::before {
  position: absolute;
  top: 16px;
  left: 17px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #19a8d7, #4e65dd);
  content: "✓";
  font-size: 11px;
  font-weight: 900;
}

.legal-steps {
  counter-reset: legal-step;
}

.legal-steps li {
  counter-increment: legal-step;
}

.legal-steps li::before {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, #6946e3, #4d2bc9);
  content: counter(legal-step);
  font-size: 11px;
  font-weight: 900;
}

.legal-callout {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  margin: 18px 0;
  padding: 16px 17px;
  border: 1px solid rgba(111, 86, 219, 0.18);
  border-radius: 15px;
  background: linear-gradient(110deg, rgba(239, 236, 255, 0.86), rgba(231, 247, 255, 0.78));
}

.legal-callout--warning {
  border-color: rgba(227, 145, 81, 0.27);
  background: linear-gradient(110deg, rgba(255, 245, 230, 0.92), rgba(255, 239, 240, 0.78));
}

.legal-callout > .material-symbols-outlined,
.legal-callout > .ico {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: #5b3bd4;
  background: rgba(255, 255, 255, 0.88);
  font-size: 21px;
}

.legal-callout--warning > .material-symbols-outlined,
.legal-callout--warning > .ico {
  color: #d46b31;
}

.legal-callout p {
  margin: 0;
  color: #455c80;
  font-size: 14px;
  line-height: 1.65;
}

.legal-definition {
  display: grid;
  grid-template-columns: minmax(165px, 0.35fr) minmax(0, 1fr);
  margin: 15px 0 20px;
  overflow: hidden;
  border: 1px solid rgba(197, 215, 234, 0.92);
  border-radius: 15px;
}

.legal-definition dt,
.legal-definition dd {
  margin: 0;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(207, 222, 238, 0.82);
}

.legal-definition dt {
  color: #354b71;
  background: rgba(236, 245, 253, 0.78);
  font-size: 13px;
  font-weight: 800;
}

.legal-definition dd {
  background: rgba(255, 255, 255, 0.56);
  font-size: 14px;
}

.legal-definition > :nth-last-child(-n + 2) {
  border-bottom: 0;
}

.legal-table-wrap {
  margin: 18px 0;
  overflow-x: auto;
  border: 1px solid rgba(190, 211, 232, 0.96);
  border-radius: 15px;
}

.legal-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.62);
}

.legal-table th,
.legal-table td {
  padding: 13px 15px;
  border-bottom: 1px solid rgba(207, 222, 238, 0.8);
  color: #4d6283;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  color: #31476d;
  background: rgba(232, 243, 253, 0.82);
  font-weight: 800;
}

.legal-table tr:last-child td {
  border-bottom: 0;
}

.legal-tag-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 15px 0 20px;
}

.legal-tag-line > span,
.legal-tag-line > a {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(93, 67, 207, 0.16);
  border-radius: 999px;
  color: #4c35ba;
  background: rgba(240, 237, 255, 0.82);
  font-size: 11px;
  font-weight: 800;
}

.legal-updated {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 20px !important;
  color: #4f668b !important;
  font-size: 13px !important;
  font-weight: 750;
}

.legal-updated .material-symbols-outlined,
.legal-updated .ico {
  color: var(--purple);
  font-size: 19px;
}

.contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: 44px;
  align-items: center;
  padding: 64px 10px 38px;
}

.contact-hero__copy {
  padding-left: 4px;
}

.contact-hero h1 {
  max-width: 650px;
}

.contact-email-stage {
  position: relative;
  display: grid;
  min-height: 330px;
  place-items: center;
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(172, 200, 231, 0.96);
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 20%, rgba(33, 180, 222, 0.2), transparent 35%),
    radial-gradient(circle at 85% 78%, rgba(111, 66, 224, 0.21), transparent 42%),
    rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 #fff, 0 26px 65px rgba(46, 75, 128, 0.16);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.contact-email-stage::before,
.contact-email-stage::after {
  position: absolute;
  border: 1px solid rgba(91, 61, 213, 0.12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.contact-email-stage::before {
  width: 290px;
  height: 290px;
  animation: contact-orbit 18s linear infinite;
  box-shadow: 88px 0 0 -83px #18a8d9, -88px 0 0 -83px #6942df;
}

.contact-email-stage::after {
  width: 210px;
  height: 210px;
  border-style: dashed;
  animation: contact-orbit 14s linear infinite reverse;
}

.contact-email-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(100%, 480px);
  padding: 27px 24px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 45px rgba(54, 72, 140, 0.15);
  text-align: center;
}

.contact-email-icon {
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 15px;
  place-items: center;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #19acdc, #6438dc 70%, #ff675f);
  box-shadow: 0 14px 30px rgba(75, 71, 192, 0.27);
  animation: contact-float 4.5s ease-in-out infinite;
  font-size: 31px;
}

.contact-email-card small {
  color: #62738f;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-email-link {
  max-width: 100%;
  margin: 8px 0 20px;
  overflow-wrap: anywhere;
  color: #26395e;
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.3vw, 31px);
  line-height: 1.2;
}

.contact-email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.contact-copy-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 0 16px;
  border: 1px solid rgba(78, 58, 190, 0.2);
  border-radius: 12px;
  color: #5036c6;
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}

.contact-copy-button:hover,
.contact-copy-button:focus-visible {
  border-color: rgba(78, 58, 190, 0.42);
  box-shadow: 0 9px 22px rgba(66, 67, 154, 0.11);
  transform: translateY(-2px);
}

.contact-copy-button .material-symbols-outlined,
.contact-copy-button .ico {
  font-size: 19px;
}

.contact-copy-status {
  min-height: 20px;
  margin: 11px 0 -7px;
  color: #526789;
  font-size: 12px;
  font-weight: 700;
}

.contact-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  gap: 22px;
}

.contact-panel {
  padding: 28px 30px;
}

.contact-panel__head,
.contact-warning__head {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 19px;
}

.contact-panel__head > .material-symbols-outlined,
.contact-panel__head > .ico,
.contact-warning__head > .material-symbols-outlined,
.contact-warning__head > .ico {
  display: grid;
  width: 47px;
  height: 47px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 15px;
  color: #5637d5;
  background: linear-gradient(145deg, #f0edff, #e7f8ff);
  font-size: 24px;
}

.contact-panel h2,
.contact-warning h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 29px;
  font-weight: 400;
}

.contact-identity-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.contact-identity-list > div {
  display: grid;
  grid-template-columns: 44px minmax(135px, 0.45fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(205, 220, 236, 0.82);
}

.contact-identity-list > div:last-child {
  border-bottom: 0;
}

.contact-identity-list .material-symbols-outlined,
.contact-identity-list .ico {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  color: #237fb4;
  background: rgba(229, 247, 255, 0.85);
  font-size: 20px;
}

.contact-identity-list dt,
.contact-identity-list dd {
  margin: 0;
}

.contact-identity-list dt {
  color: #647592;
  font-size: 12px;
  font-weight: 800;
}

.contact-identity-list dd {
  color: #30466d;
  font-size: 14px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.contact-side-stack {
  display: grid;
  gap: 22px;
}

.contact-data-card {
  background:
    linear-gradient(125deg, rgba(232, 249, 255, 0.76), rgba(242, 238, 255, 0.75)),
    rgba(255, 255, 255, 0.84);
}

.contact-data-card p,
.contact-warning p,
.contact-purpose-card p {
  margin: 0;
  color: #506486;
  font-size: 14px;
  line-height: 1.7;
}

.contact-panel a,
.contact-warning a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: 16px;
  color: #5136ca;
  font-size: 13px;
  font-weight: 800;
}

.contact-panel a .material-symbols-outlined,
.contact-panel a .ico,
.contact-warning a .material-symbols-outlined,
.contact-warning a .ico {
  font-size: 18px;
}

.contact-purpose-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
  margin-top: 22px;
}

.contact-purpose-card {
  padding: 22px;
}

.contact-purpose-card > .material-symbols-outlined,
.contact-purpose-card > .ico {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 15px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #1ca7d9, #5735d6);
  box-shadow: 0 10px 23px rgba(65, 77, 177, 0.2);
  font-size: 22px;
}

.contact-purpose-card:nth-child(2) > .material-symbols-outlined,
.contact-purpose-card:nth-child(2) > .ico {
  background: linear-gradient(145deg, #6243de, #9b3cc2);
}

.contact-purpose-card:nth-child(3) > .material-symbols-outlined,
.contact-purpose-card:nth-child(3) > .ico {
  background: linear-gradient(145deg, #e56f52, #d64378);
}

.contact-purpose-card h3 {
  margin: 0 0 8px;
  color: #2f456b;
  font-size: 15px;
}

.contact-warning {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 22px;
  padding: 25px 28px;
  border-color: rgba(229, 155, 112, 0.4);
  background:
    linear-gradient(115deg, rgba(255, 246, 231, 0.9), rgba(255, 237, 242, 0.78)),
    rgba(255, 255, 255, 0.84);
}

.contact-warning__head {
  margin-bottom: 8px;
}

.contact-warning__head > .material-symbols-outlined,
.contact-warning__head > .ico {
  color: #d5623c;
  background: rgba(255, 255, 255, 0.74);
}

@keyframes contact-orbit {
  to { transform: rotate(360deg); }
}

@keyframes contact-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

@media (max-width: 1080px) {
  .legal-hero,
  .contact-hero {
    grid-template-columns: 1fr;
  }

  .legal-hero__aside {
    min-height: 220px;
  }

  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }

  .legal-toc strong {
    grid-column: 1 / -1;
  }

  .contact-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .legal-page,
  .contact-page {
    padding-right: 18px;
    padding-left: 18px;
  }

  .legal-hero,
  .contact-hero {
    gap: 24px;
    padding-top: 42px;
  }

  .legal-hero h1,
  .contact-hero h1 {
    font-size: clamp(44px, 10vw, 59px);
  }

  .contact-purpose-grid {
    grid-template-columns: 1fr;
  }

  .contact-warning {
    grid-template-columns: 1fr;
  }

  .contact-warning .button {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .legal-page,
  .contact-page {
    padding-right: 14px;
    padding-left: 14px;
  }

  .legal-toc {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .legal-toc strong {
    grid-column: auto;
  }

  .legal-card,
  .contact-panel,
  .contact-warning {
    padding: 21px 18px;
    border-radius: 18px;
  }

  .legal-card__head {
    grid-template-columns: 43px minmax(0, 1fr);
  }

  .legal-card__icon {
    width: 43px;
    height: 43px;
  }

  .legal-callout {
    grid-template-columns: 1fr;
  }

  .legal-definition {
    grid-template-columns: 1fr;
  }

  .legal-definition dt,
  .legal-definition dd {
    border-bottom: 1px solid rgba(207, 222, 238, 0.82) !important;
  }

  .legal-definition > :last-child {
    border-bottom: 0 !important;
  }

  .contact-email-stage {
    min-height: 305px;
    padding: 20px 14px;
    border-radius: 23px;
  }

  .contact-email-stage::before {
    width: 245px;
    height: 245px;
  }

  .contact-email-stage::after {
    width: 180px;
    height: 180px;
  }

  .contact-email-card {
    padding: 24px 15px;
  }

  .contact-email-actions {
    width: 100%;
  }

  .contact-email-actions .button,
  .contact-copy-button {
    width: 100%;
  }

  .contact-identity-list > div {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .contact-identity-list dd {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1 !important;
    filter: none !important;
    translate: 0 0 !important;
  }
}

/* ================================================================
   Dashboard — cockpit clinic luminos
   ================================================================ */

.dashboard-body {
  min-height: 100vh;
  color: #102043;
  background:
    radial-gradient(circle at 68% -8%, rgba(91, 58, 224, 0.13), transparent 31rem),
    radial-gradient(circle at 94% 42%, rgba(28, 166, 225, 0.1), transparent 34rem),
    linear-gradient(145deg, #f8fbff 0%, #f2f7fd 54%, #f8f7ff 100%);
}

.dashboard-body::before {
  inset: 0;
  background:
    linear-gradient(rgba(56, 84, 132, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 84, 132, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: none;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.dashboard-body a:focus-visible,
.dashboard-body button:focus-visible {
  outline: 3px solid #ff8b48;
  outline-offset: 3px;
}

.dashboard-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

.dashboard-sidebar {
  position: fixed;
  z-index: 45;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: 276px;
  height: 100vh;
  height: 100svh;
  padding: 24px 18px 18px;
  overflow: hidden auto;
  color: rgba(241, 246, 255, 0.82);
  border-right: 1px solid rgba(172, 200, 240, 0.15);
  background:
    radial-gradient(circle at 4% 2%, rgba(56, 166, 234, 0.22), transparent 17rem),
    radial-gradient(circle at 104% 41%, rgba(113, 68, 233, 0.25), transparent 20rem),
    linear-gradient(162deg, #081530 0%, #0c1734 48%, #11183a 100%);
  box-shadow: 18px 0 55px rgba(15, 34, 73, 0.13);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.dashboard-sidebar::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.06), transparent 28%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
  content: "";
  pointer-events: none;
}

.dashboard-sidebar__glow {
  position: absolute;
  top: -155px;
  right: -120px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(114, 201, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(50, 133, 244, 0.12), inset 0 0 60px rgba(100, 74, 230, 0.13);
  pointer-events: none;
}

.dashboard-brand,
.dashboard-plan-chip,
.dashboard-nav,
.dashboard-sidebar__foot {
  position: relative;
  z-index: 1;
}

.dashboard-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 8px;
  color: #fff;
}

.dashboard-brand__mark {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 57px;
  height: 62px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(180, 207, 235, 0.86);
  border-radius: 8px;
  color: #fff;
  background: #fff;
  box-shadow: 0 12px 26px rgba(20, 76, 137, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.dashboard-brand__mark::after {
  content: none;
}

.dashboard-brand__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dashboard-brand__copy strong {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}

.dashboard-brand__copy small {
  color: rgba(190, 207, 237, 0.72);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.dashboard-plan-chip {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 25px 5px 22px;
  padding: 12px 13px;
  border: 1px solid rgba(173, 205, 245, 0.13);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.dashboard-plan-chip > .material-symbols-outlined,
.dashboard-plan-chip > .ico {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: #6ce4dd;
  background: rgba(36, 207, 193, 0.12);
  font-size: 19px;
}

.dashboard-plan-chip > span:last-child {
  display: grid;
  gap: 1px;
}

.dashboard-plan-chip small {
  color: rgba(188, 205, 235, 0.73);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dashboard-plan-chip strong {
  color: #f8fbff;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-nav {
  display: grid;
  gap: 5px;
}

.dashboard-nav__label {
  margin: 19px 12px 7px;
  color: rgba(169, 189, 225, 0.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dashboard-nav__link {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 45px;
  padding: 0 13px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 13px;
  color: rgba(221, 231, 248, 0.73);
  font-size: 13px;
  font-weight: 650;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.dashboard-nav__link::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 20px;
  border-radius: 0 4px 4px 0;
  background: transparent;
  content: "";
  transform: translateY(-50%);
}

.dashboard-nav__link > .material-symbols-outlined,
.dashboard-nav__link > .ico {
  width: 23px;
  color: rgba(159, 187, 231, 0.72);
  font-size: 20px;
  text-align: center;
  transition: color 180ms ease, transform 180ms ease;
}

.dashboard-nav__link small {
  margin-left: 5px;
  padding: 2px 6px;
  border: 1px solid rgba(164, 132, 255, 0.28);
  border-radius: 20px;
  color: #c8b9ff;
  background: rgba(109, 70, 223, 0.14);
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dashboard-nav__link:hover {
  color: #fff;
  border-color: rgba(171, 200, 242, 0.13);
  background: rgba(255, 255, 255, 0.055);
  transform: translateX(2px);
}

.dashboard-nav__link:hover > .material-symbols-outlined,
.dashboard-nav__link:hover > .ico {
  color: #70d3ff;
  transform: scale(1.06);
}

.dashboard-nav__link.is-active {
  color: #fff;
  border-color: rgba(149, 184, 239, 0.18);
  background: linear-gradient(110deg, rgba(44, 148, 226, 0.19), rgba(105, 65, 225, 0.16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 24px rgba(4, 14, 37, 0.14);
}

.dashboard-nav__link.is-active::before {
  background: linear-gradient(#45cbef, #7a5cf0);
  box-shadow: 0 0 13px rgba(71, 196, 240, 0.58);
}

.dashboard-nav__link.is-active > .material-symbols-outlined,
.dashboard-nav__link.is-active > .ico {
  color: #75dcff;
  font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 24;
}

.dashboard-sidebar__foot {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 25px;
}

.dashboard-credit-mini {
  display: grid;
  grid-template-columns: 34px 1fr 30px;
  gap: 9px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(164, 197, 239, 0.14);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.055);
}

.dashboard-credit-mini > .material-symbols-outlined,
.dashboard-credit-mini > .ico {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #d6c6ff;
  background: rgba(113, 72, 232, 0.18);
  font-size: 19px;
}

.dashboard-credit-mini > span:nth-child(2) {
  display: grid;
  gap: 1px;
}

.dashboard-credit-mini small {
  color: rgba(180, 199, 232, 0.66);
  font-size: 10px;
}

.dashboard-credit-mini strong {
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.dashboard-credit-mini > a {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #6450ea, #7632d7);
  box-shadow: 0 7px 15px rgba(72, 42, 191, 0.32);
}

.dashboard-credit-mini > a .material-symbols-outlined,
.dashboard-credit-mini > a .ico {
  font-size: 17px;
}

.dashboard-logout {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 12px;
  color: rgba(213, 224, 242, 0.68);
  font-size: 12px;
  font-weight: 650;
  transition: color 180ms ease, background 180ms ease;
}

.dashboard-logout .material-symbols-outlined,
.dashboard-logout .ico {
  font-size: 19px;
}

.dashboard-logout:hover {
  color: #fff;
  background: rgba(236, 83, 126, 0.1);
}

.dashboard-scrim {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: none;
  padding: 0;
  border: 0;
  background: rgba(5, 13, 33, 0.54);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.dashboard-mobile-nav {
  display: none;
}

.dashboard-workspace {
  min-width: 0;
  margin-left: 276px;
}

.dashboard-topbar {
  position: sticky;
  z-index: 35;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 10px clamp(22px, 3vw, 46px);
  border-bottom: 1px solid rgba(183, 204, 229, 0.63);
  background: rgba(247, 250, 255, 0.78);
  box-shadow: 0 10px 30px rgba(43, 75, 119, 0.035);
  backdrop-filter: blur(23px) saturate(150%);
  -webkit-backdrop-filter: blur(23px) saturate(150%);
}

.dashboard-topbar__start,
.dashboard-topbar__actions,
.dashboard-account,
.dashboard-public-link {
  display: flex;
  align-items: center;
}

.dashboard-topbar__start {
  gap: 13px;
}

.dashboard-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(181, 203, 228, 0.9);
  border-radius: 13px;
  color: #273a61;
  background: rgba(255, 255, 255, 0.78);
  font: inherit;
  cursor: pointer;
}

.dashboard-breadcrumb {
  display: grid;
  gap: 1px;
}

.dashboard-breadcrumb small {
  color: #607292;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.dashboard-breadcrumb strong {
  color: #17284d;
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.1;
}

.dashboard-topbar__actions {
  gap: 9px;
}

.dashboard-public-link {
  gap: 7px;
  min-height: 39px;
  padding: 0 13px;
  border: 1px solid rgba(181, 203, 228, 0.77);
  border-radius: 12px;
  color: #42577d;
  background: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 750;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.dashboard-public-link .material-symbols-outlined,
.dashboard-public-link .ico {
  font-size: 18px;
}

.dashboard-public-link:hover {
  color: #4c2fd2;
  border-color: rgba(98, 70, 221, 0.29);
  background: #fff;
}

.dashboard-icon-button {
  position: relative;
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid rgba(181, 203, 228, 0.77);
  border-radius: 12px;
  color: #4c6085;
  background: rgba(255, 255, 255, 0.65);
}

.dashboard-icon-button .material-symbols-outlined,
.dashboard-icon-button .ico {
  font-size: 19px;
}

.dashboard-account {
  gap: 9px;
  min-height: 48px;
  margin-left: 2px;
  padding: 4px 7px 4px 5px;
  border: 1px solid rgba(180, 202, 228, 0.78);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 7px 18px rgba(34, 70, 118, 0.06);
}

.dashboard-account__avatar {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #2b9fe2, #5a36dd 66%, #d92f80);
  box-shadow: 0 7px 14px rgba(73, 73, 196, 0.2);
  font-family: var(--font-serif);
  font-size: 14px;
}

.dashboard-account__copy {
  display: grid;
  gap: 1px;
  min-width: 120px;
}

.dashboard-account__copy strong {
  color: #1e3158;
  font-size: 11px;
}

.dashboard-account__copy small {
  color: #637595;
  font-size: 9px;
  font-weight: 650;
}

.dashboard-account__arrow {
  color: #91a0b9;
  font-size: 17px;
}

.dashboard-main {
  width: min(100%, 1640px);
  margin: 0 auto;
  padding: 30px clamp(22px, 3vw, 46px) 38px;
}

.dashboard-welcome {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  min-height: 220px;
  overflow: hidden;
  border: 1px solid rgba(142, 175, 226, 0.27);
  border-radius: 27px;
  color: #fff;
  background:
    radial-gradient(circle at 76% 26%, rgba(84, 196, 241, 0.19), transparent 18rem),
    radial-gradient(circle at 94% 114%, rgba(219, 40, 139, 0.22), transparent 24rem),
    linear-gradient(125deg, #091735 0%, #101b46 52%, #39217b 100%);
  box-shadow: 0 24px 55px rgba(21, 43, 90, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  isolation: isolate;
}

.dashboard-welcome::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.045), transparent 28%),
    linear-gradient(rgba(161, 197, 241, 0.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(161, 197, 241, 0.048) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
  content: "";
  mask-image: linear-gradient(90deg, #000, transparent 86%);
  pointer-events: none;
}

.dashboard-welcome::after {
  position: absolute;
  z-index: -1;
  top: -160px;
  left: 42%;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 100px rgba(77, 116, 239, 0.14), inset 0 0 120px rgba(75, 61, 203, 0.12);
}

.dashboard-welcome__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px clamp(27px, 3.5vw, 52px);
}

.dashboard-kicker {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 13px;
  color: #9ddcff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.dashboard-kicker > span {
  width: 17px;
  height: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, #46d8e3, #9c79ff);
  box-shadow: 0 0 9px rgba(70, 216, 227, 0.7);
}

.dashboard-welcome h1 {
  max-width: 700px;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(35px, 3.4vw, 49px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.dashboard-welcome h1 span {
  color: #bdadff;
  background: linear-gradient(100deg, #89e5ff, #baa9ff 48%, #ff9fc7);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dashboard-welcome__copy > p:not(.dashboard-kicker) {
  max-width: 650px;
  margin: 12px 0 0;
  color: rgba(221, 232, 250, 0.76);
  font-size: 14px;
  line-height: 1.58;
}

.dashboard-welcome__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 17px;
}

.dashboard-button {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 750;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.dashboard-button > .material-symbols-outlined,
.dashboard-button > .ico {
  font-size: 19px;
}

.dashboard-button > .material-symbols-outlined:last-child,
.dashboard-button > .ico:last-child {
  margin-left: 4px;
  font-size: 17px;
}

.dashboard-button--primary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(135deg, #6245e6, #7534d7 55%, #c42889);
  box-shadow: 0 14px 26px rgba(51, 24, 145, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.19);
}

.dashboard-button--ghost {
  color: #eaf3ff;
  border-color: rgba(188, 213, 246, 0.24);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dashboard-button:hover {
  transform: translateY(-2px);
}

.dashboard-button--primary:hover {
  box-shadow: 0 18px 34px rgba(51, 24, 145, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.dashboard-button--ghost:hover {
  border-color: rgba(188, 213, 246, 0.4);
  background: rgba(255, 255, 255, 0.12);
}

.dashboard-welcome__art {
  position: relative;
  min-height: 220px;
  overflow: hidden;
}

.dashboard-art-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 132px;
  height: 132px;
  place-content: center;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(200, 226, 255, 0.25);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(64, 176, 227, 0.18), rgba(97, 53, 210, 0.26));
  box-shadow: 0 0 0 16px rgba(143, 182, 238, 0.035), 0 30px 70px rgba(3, 8, 32, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translate(-50%, -50%);
}

.dashboard-art-core::after {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 50deg, transparent 0 42%, rgba(255, 255, 255, 0.17) 48%, transparent 54% 100%);
  content: "";
  animation: dashboard-core-light 9s linear infinite;
}

.dashboard-art-core > * {
  position: relative;
  z-index: 1;
}

.dashboard-art-core .material-symbols-outlined,
.dashboard-art-core .ico {
  margin-bottom: 8px;
  color: #8ce7ff;
  font-size: 29px;
  filter: drop-shadow(0 0 14px rgba(88, 211, 249, 0.42));
}

.dashboard-art-core strong {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
}

.dashboard-art-core small {
  margin-top: 4px;
  color: rgba(212, 226, 248, 0.63);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dashboard-orbit {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(176, 213, 249, 0.17);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.dashboard-orbit::before,
.dashboard-orbit::after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #78e7ff;
  box-shadow: 0 0 12px #78e7ff;
  content: "";
}

.dashboard-orbit::before { top: 13%; left: 13%; }
.dashboard-orbit::after { right: 10%; bottom: 16%; background: #ff87bf; box-shadow: 0 0 12px #ff87bf; }

.dashboard-orbit--one {
  width: 195px;
  height: 195px;
  animation: dashboard-orbit 18s linear infinite;
}

.dashboard-orbit--two {
  width: 258px;
  height: 258px;
  border-style: dashed;
  opacity: 0.62;
  animation: dashboard-orbit 28s linear infinite reverse;
}

.dashboard-orbit-dot {
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 20px currentColor;
}

.dashboard-orbit-dot--one { top: 18%; left: 21%; color: #74dff8; background: #74dff8; }
.dashboard-orbit-dot--two { right: 16%; bottom: 18%; color: #ff78ba; background: #ff78ba; }

.dashboard-art-tag {
  position: absolute;
  z-index: 4;
  display: flex;
  gap: 7px;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(209, 227, 252, 0.18);
  border-radius: 11px;
  color: rgba(241, 247, 255, 0.85);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 15px 28px rgba(6, 11, 36, 0.18);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-art-tag .material-symbols-outlined,
.dashboard-art-tag .ico {
  color: #90e1ff;
  font-size: 16px;
}

.dashboard-art-tag--ai { top: 23%; left: 4%; }
.dashboard-art-tag--legal { right: 5%; bottom: 20%; }
.dashboard-art-tag--legal .material-symbols-outlined,
.dashboard-art-tag--legal .ico { color: #e8b7ff; }

@keyframes dashboard-orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes dashboard-core-light {
  to { transform: rotate(360deg); }
}

.dashboard-overview,
.dashboard-analysis,
.dashboard-reports {
  margin-top: 31px;
}

.dashboard-section-heading {
  display: flex;
  gap: 20px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}

.dashboard-section-heading p,
.dashboard-reports__header p {
  margin: 0 0 3px;
  color: #6250ca;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.dashboard-section-heading h2,
.dashboard-reports__header h2 {
  margin: 0;
  color: #122248;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.1vw, 31px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.dashboard-date,
.dashboard-section-note {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(183, 205, 230, 0.75);
  border-radius: 10px;
  color: #617291;
  background: rgba(255, 255, 255, 0.53);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-date .material-symbols-outlined,
.dashboard-date .ico,
.dashboard-section-note .material-symbols-outlined,
.dashboard-section-note .ico {
  color: #654bdc;
  font-size: 17px;
}

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(179, 203, 231, 0.75);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 19px 45px rgba(45, 75, 119, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}

.dashboard-stat {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 210px;
  padding: 19px 18px 17px;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(198, 216, 237, 0.68);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.67);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.dashboard-stat::after {
  position: absolute;
  right: -48px;
  bottom: -62px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--stat-color-soft);
  content: "";
  filter: blur(2px);
  pointer-events: none;
}

.dashboard-stat:hover {
  border-color: color-mix(in srgb, var(--stat-color) 32%, #c7d9ec);
  box-shadow: 0 15px 30px rgba(38, 71, 116, 0.085);
  transform: translateY(-2px);
}

.dashboard-stat--violet { --stat-color: #673ee1; --stat-color-soft: rgba(103, 62, 225, 0.085); }
.dashboard-stat--blue { --stat-color: #158ed6; --stat-color-soft: rgba(21, 142, 214, 0.085); }
.dashboard-stat--coral { --stat-color: #e33f82; --stat-color-soft: rgba(227, 63, 130, 0.085); }
.dashboard-stat--green { --stat-color: #0d9d78; --stat-color-soft: rgba(13, 157, 120, 0.08); }

.dashboard-stat__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 17px;
}

.dashboard-stat__icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 12px;
  color: var(--stat-color);
  background: color-mix(in srgb, var(--stat-color) 10%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stat-color) 12%, transparent);
  font-size: 20px;
}

.dashboard-stat__trend {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--stat-color);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dashboard-stat__trend .material-symbols-outlined,
.dashboard-stat__trend .ico {
  font-size: 13px;
}

.dashboard-stat__trend--quiet {
  color: #657591;
}

.dashboard-stat > p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #637597;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dashboard-stat__value {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1px;
  margin-top: 3px;
}

.dashboard-stat__value strong {
  color: #14244a;
  font-family: var(--font-serif);
  font-size: 37px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.dashboard-stat__value span {
  min-height: 19px;
  color: #637593;
  font-size: 11px;
  font-weight: 600;
}

.dashboard-stat > a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  width: fit-content;
  margin-top: auto;
  color: var(--stat-color);
  font-size: 11px;
  font-weight: 800;
}

.dashboard-stat > a .material-symbols-outlined,
.dashboard-stat > a .ico {
  font-size: 15px;
  transition: transform 180ms ease;
}

.dashboard-stat > a:hover .material-symbols-outlined,
.dashboard-stat > a:hover .ico {
  transform: translateX(3px);
}

.dashboard-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.dashboard-action-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 454px;
  padding: clamp(27px, 3vw, 39px);
  overflow: hidden;
  flex-direction: column;
  border-radius: 25px;
  isolation: isolate;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.dashboard-action-card:hover {
  transform: translateY(-3px);
}

.dashboard-action-card--ai {
  color: #fff;
  border: 1px solid rgba(194, 211, 255, 0.22);
  background:
    radial-gradient(circle at 92% 12%, rgba(72, 211, 240, 0.25), transparent 17rem),
    radial-gradient(circle at 8% 110%, rgba(232, 38, 143, 0.28), transparent 23rem),
    linear-gradient(137deg, #1a1b5a 0%, #4631aa 53%, #6d2aca 100%);
  box-shadow: 0 23px 50px rgba(47, 31, 132, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dashboard-action-card--manual {
  color: #14244b;
  border: 1px solid rgba(173, 201, 231, 0.88);
  background:
    radial-gradient(circle at 102% 2%, rgba(252, 110, 41, 0.1), transparent 16rem),
    radial-gradient(circle at 0 100%, rgba(49, 170, 224, 0.1), transparent 21rem),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 20px 45px rgba(41, 73, 116, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}

.dashboard-action-card__shine {
  position: absolute;
  z-index: -1;
  top: -105px;
  right: -66px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255, 255, 255, 0.025), 0 0 0 76px rgba(255, 255, 255, 0.018), inset 0 0 65px rgba(86, 198, 249, 0.13);
}

.dashboard-action-card__mesh {
  position: absolute;
  z-index: -1;
  right: -32px;
  bottom: -38px;
  width: 250px;
  height: 250px;
  opacity: 0.36;
  background:
    linear-gradient(rgba(77, 114, 165, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 114, 165, 0.13) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(circle, #000, transparent 68%);
  transform: rotate(-9deg);
}

.dashboard-action-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.dashboard-action-card__icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 24px rgba(11, 10, 65, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.13);
  font-size: 25px;
}

.dashboard-action-card--manual .dashboard-action-card__icon {
  color: #e44b45;
  border-color: rgba(238, 116, 80, 0.16);
  background: linear-gradient(145deg, rgba(255, 128, 76, 0.12), rgba(214, 55, 134, 0.09));
  box-shadow: 0 12px 23px rgba(194, 90, 73, 0.1);
}

.dashboard-recommended,
.dashboard-guided {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  color: rgba(243, 247, 255, 0.96);
  background: rgba(255, 255, 255, 0.075);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-recommended > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #75ebd8;
  box-shadow: 0 0 10px rgba(117, 235, 216, 0.85);
}

.dashboard-guided {
  color: #9a4d32;
  border-color: rgba(227, 94, 55, 0.16);
  background: rgba(249, 111, 67, 0.065);
}

.dashboard-guided .material-symbols-outlined,
.dashboard-guided .ico {
  font-size: 14px;
}

.dashboard-action-card__eyebrow {
  margin: 0 0 7px !important;
  color: rgba(200, 217, 250, 0.67) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
}

.dashboard-action-card--manual .dashboard-action-card__eyebrow {
  color: #8b6d76 !important;
}

.dashboard-action-card h3 {
  max-width: 520px;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(29px, 2.6vw, 40px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.dashboard-action-card h3 span {
  color: #91e7ff;
}

.dashboard-action-card--manual h3 span {
  color: #dd4f56;
}

.dashboard-action-card > p:not(.dashboard-action-card__eyebrow) {
  max-width: 650px;
  margin: 18px 0 0;
  color: rgba(223, 232, 252, 0.86);
  font-size: 13px;
  line-height: 1.7;
}

.dashboard-action-card--manual > p:not(.dashboard-action-card__eyebrow) {
  color: #566885;
}

.dashboard-action-card__promise {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  padding: 11px 12px;
  border: 1px solid rgba(191, 217, 251, 0.15);
  border-radius: 13px;
  color: rgba(226, 237, 255, 0.87);
  background: rgba(255, 255, 255, 0.065);
  font-size: 11px;
  line-height: 1.55;
}

.dashboard-action-card__promise .material-symbols-outlined,
.dashboard-action-card__promise .ico {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  color: #74e6dc;
  background: rgba(58, 218, 198, 0.1);
  font-size: 17px;
}

.dashboard-manual-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 23px;
}

.dashboard-manual-steps > span {
  display: grid;
  gap: 5px;
  min-height: 66px;
  align-content: center;
  padding: 9px 10px;
  border: 1px solid rgba(181, 204, 231, 0.67);
  border-radius: 12px;
  color: #53698f;
  background: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  font-weight: 700;
}

.dashboard-manual-steps b {
  color: #d73842;
  font-size: 10px;
  letter-spacing: 0.05em;
}

.dashboard-card-cta {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 49px;
  margin-top: auto;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  font-size: 12px;
  font-weight: 800;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.dashboard-card-cta .material-symbols-outlined,
.dashboard-card-cta .ico {
  font-size: 19px;
}

.dashboard-card-cta .material-symbols-outlined:last-child,
.dashboard-card-cta .ico:last-child {
  margin-left: auto;
  font-size: 17px;
}

.dashboard-action-card--manual .dashboard-card-cta {
  color: #fff;
  border-color: rgba(90, 58, 214, 0.2);
  background: linear-gradient(135deg, #5837dd, #7132d4);
  box-shadow: 0 12px 22px rgba(78, 48, 190, 0.2);
}

.dashboard-card-cta:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.dashboard-action-card--manual .dashboard-card-cta:hover {
  background: linear-gradient(135deg, #4d2bce, #6526c7);
  box-shadow: 0 16px 28px rgba(78, 48, 190, 0.26);
}

.dashboard-reports {
  overflow: hidden;
  border: 1px solid rgba(175, 201, 229, 0.83);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 46px rgba(39, 72, 118, 0.085), inset 0 1px 0 rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.dashboard-reports__header {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 25px 20px;
  border-bottom: 1px solid rgba(191, 211, 234, 0.65);
}

.dashboard-reports__header > a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(102, 70, 216, 0.16);
  border-radius: 10px;
  color: #5c40d5;
  background: rgba(100, 66, 218, 0.055);
  font-size: 11px;
  font-weight: 800;
}

.dashboard-reports__header > a .material-symbols-outlined,
.dashboard-reports__header > a .ico {
  font-size: 16px;
  transition: transform 180ms ease;
}

.dashboard-reports__header > a:hover .material-symbols-outlined,
.dashboard-reports__header > a:hover .ico {
  transform: translateX(3px);
}

.dashboard-table-wrap {
  overflow-x: auto;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

.dashboard-table th,
.dashboard-table td {
  padding: 13px 12px;
  text-align: left;
  vertical-align: middle;
}

.dashboard-table th:first-child,
.dashboard-table td:first-child { padding-left: 25px; }
.dashboard-table th:last-child,
.dashboard-table td:last-child { padding-right: 25px; }

.dashboard-table th {
  height: 43px;
  color: #60718f;
  background: rgba(238, 244, 251, 0.52);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dashboard-table th:nth-child(1) { width: 18%; }
.dashboard-table th:nth-child(2) { width: 11%; }
.dashboard-table th:nth-child(3) { width: 13%; }
.dashboard-table th:nth-child(4) { width: 32%; }
.dashboard-table th:nth-child(5) { width: 15%; }
.dashboard-table th:nth-child(6) { width: 11%; }

.dashboard-table td {
  height: 62px;
  border-top: 1px solid rgba(202, 218, 237, 0.62);
  color: #536789;
  font-size: 11px;
  line-height: 1.45;
  transition: background 160ms ease;
}

.dashboard-table tbody tr:hover td {
  background: rgba(235, 243, 252, 0.63);
}

.dashboard-table td:nth-child(4) {
  overflow: hidden;
  color: #344b72;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-report-id {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #24395f;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-report-id .material-symbols-outlined,
.dashboard-report-id .ico {
  color: #6849dc;
  font-size: 17px;
}

.dashboard-method {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(98, 64, 218, 0.13);
  border-radius: 30px;
  color: #6042cd;
  background: rgba(99, 67, 217, 0.06);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-method .material-symbols-outlined,
.dashboard-method .ico {
  font-size: 13px;
}

.dashboard-points {
  color: #152951;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-points small {
  color: #64748f;
  font-size: 9px;
  font-weight: 650;
}

.dashboard-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.dashboard-row-actions > a {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border: 1px solid rgba(179, 201, 228, 0.77);
  border-radius: 10px;
  color: #5d7195;
  background: rgba(255, 255, 255, 0.63);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.dashboard-row-actions > a .material-symbols-outlined,
.dashboard-row-actions > a .ico {
  font-size: 17px;
}

.dashboard-row-actions > a:hover {
  color: #fff;
  border-color: #6844db;
  background: #6844db;
  transform: translateY(-1px);
}

.dashboard-reports__foot {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  min-height: 47px;
  padding: 8px 25px;
  border-top: 1px solid rgba(193, 213, 236, 0.63);
  color: #63738e;
  background: rgba(244, 248, 253, 0.48);
  font-size: 10px;
  font-weight: 650;
}

.dashboard-reports__foot > span:first-child {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.dashboard-reports__foot .material-symbols-outlined,
.dashboard-reports__foot .ico {
  color: #159878;
  font-size: 15px;
}

.dashboard-legal-note {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  margin-top: 18px;
  padding: 14px 17px;
  border: 1px solid rgba(183, 205, 230, 0.7);
  border-radius: 16px;
  color: #607290;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  font-size: 10px;
}

.dashboard-legal-note > .material-symbols-outlined,
.dashboard-legal-note > .ico {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #159778;
  background: rgba(18, 166, 126, 0.09);
  font-size: 19px;
}

.dashboard-legal-note p {
  margin: 0;
  line-height: 1.55;
}

.dashboard-legal-note strong {
  color: #334c72;
}

.dashboard-legal-note a {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: #5e42ce;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-legal-note a .material-symbols-outlined,
.dashboard-legal-note a .ico {
  font-size: 14px;
}

html.a11y-contrast .dashboard-welcome,
html.a11y-contrast .dashboard-stat-grid,
html.a11y-contrast .dashboard-stat,
html.a11y-contrast .dashboard-action-card,
html.a11y-contrast .dashboard-reports,
html.a11y-contrast .dashboard-legal-note {
  border-width: 2px;
  border-color: #202938;
}

html.a11y-contrast .dashboard-stat,
html.a11y-contrast .dashboard-action-card--manual,
html.a11y-contrast .dashboard-reports,
html.a11y-contrast .dashboard-legal-note {
  background: #fff;
}

html.a11y-gri .dashboard-shell {
  filter: grayscale(1);
}

html.a11y-invers .dashboard-shell {
  filter: invert(1) hue-rotate(180deg);
}

@media (max-width: 1370px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-stat {
    min-height: 190px;
  }

  .dashboard-table th:nth-child(1) { width: 20%; }
  .dashboard-table th:nth-child(2) { width: 11%; }
  .dashboard-table th:nth-child(3) { width: 15%; }
  .dashboard-table th:nth-child(4) { width: 27%; }
  .dashboard-table th:nth-child(5) { width: 15%; }
  .dashboard-table th:nth-child(6) { width: 12%; }
}

@media (max-width: 1150px) {
  body.dashboard-menu-open {
    overflow: hidden;
  }

  .dashboard-sidebar {
    width: min(86vw, 290px);
    box-shadow: 24px 0 65px rgba(5, 13, 35, 0.28);
    transform: translateX(-105%);
    transition: transform 250ms cubic-bezier(.22, .8, .25, 1);
  }

  .dashboard-menu-open .dashboard-sidebar {
    transform: translateX(0);
  }

  .dashboard-menu-open .dashboard-scrim {
    display: block;
  }

  .dashboard-workspace {
    margin-left: 0;
  }

  .dashboard-menu-toggle {
    display: grid;
  }

  .dashboard-welcome {
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  }
}

@media (max-width: 900px) {
  .dashboard-topbar {
    min-height: 70px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .dashboard-main {
    padding: 22px 18px 32px;
  }

  .dashboard-welcome {
    grid-template-columns: minmax(0, 1fr) 270px;
  }

  .dashboard-welcome__copy {
    padding: 27px 25px;
  }

  .dashboard-art-tag {
    display: none;
  }

  .dashboard-action-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-action-card {
    min-height: 420px;
  }

  .dashboard-table {
    min-width: 850px;
  }
}

@media (max-width: 680px) {
  .dashboard-body {
    padding-bottom: calc(71px + env(safe-area-inset-bottom));
  }

  .dashboard-breadcrumb small,
.dashboard-public-link span:not(.material-symbols-outlined),
.dashboard-public-link span:not(.ico),
.dashboard-account__copy,
.dashboard-account__arrow {
    display: none;
  }

  .dashboard-breadcrumb strong {
    font-size: 18px;
  }

  .dashboard-public-link {
    width: 39px;
    padding: 0;
    justify-content: center;
  }

  .dashboard-account {
    padding: 4px;
  }

  .dashboard-main {
    padding: 14px 12px 30px;
  }

  .dashboard-mobile-nav {
    position: fixed;
    z-index: 38;
    right: 9px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 9px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 61px;
    padding: 5px;
    border: 1px solid rgba(168, 194, 226, 0.77);
    border-radius: 19px;
    background: rgba(248, 251, 255, 0.88);
    box-shadow: 0 17px 42px rgba(26, 49, 88, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(23px) saturate(145%);
    -webkit-backdrop-filter: blur(23px) saturate(145%);
  }

  .dashboard-mobile-nav a {
    position: relative;
    display: grid;
    gap: 2px;
    min-width: 0;
    min-height: 50px;
    place-content: center;
    place-items: center;
    border-radius: 14px;
    color: #71819e;
    font-size: 8px;
    font-weight: 750;
  }

  .dashboard-mobile-nav a .material-symbols-outlined,
.dashboard-mobile-nav a .ico {
    font-size: 20px;
  }

  .dashboard-mobile-nav a.is-active {
    color: #5b3bd8;
    background: linear-gradient(145deg, rgba(70, 163, 224, 0.1), rgba(102, 62, 220, 0.11));
  }

  .dashboard-mobile-nav a.is-active::after {
    position: absolute;
    top: 4px;
    width: 15px;
    height: 2px;
    border-radius: 3px;
    background: linear-gradient(90deg, #29b8e2, #7046df);
    content: "";
  }

  body.dashboard-body .a11y-trigger {
    right: 15px;
    bottom: calc(81px + env(safe-area-inset-bottom));
  }

  body.dashboard-body .a11y-panel {
    right: 14px;
    bottom: calc(143px + env(safe-area-inset-bottom));
    max-height: calc(100vh - 165px - env(safe-area-inset-bottom));
  }

  .dashboard-welcome {
    display: block;
    min-height: 0;
    border-radius: 22px;
  }

  .dashboard-welcome__copy {
    padding: 23px 20px 20px;
  }

  .dashboard-welcome h1 {
    font-size: clamp(36px, 11vw, 47px);
  }

  .dashboard-welcome__copy > p:not(.dashboard-kicker) {
    font-size: 11px;
    line-height: 1.65;
  }

  .dashboard-welcome__actions {
    display: grid;
  }

  .dashboard-button {
    width: 100%;
  }

  .dashboard-welcome__art {
    min-height: 158px;
    border-top: 1px solid rgba(190, 214, 247, 0.09);
  }

  .dashboard-art-core {
    width: 104px;
    height: 104px;
  }

  .dashboard-art-core .material-symbols-outlined,
.dashboard-art-core .ico {
    margin-bottom: 4px;
    font-size: 28px;
  }

  .dashboard-art-core strong { font-size: 15px; }
  .dashboard-art-core small { font-size: 6px; }
  .dashboard-orbit--one { width: 145px; height: 145px; }
  .dashboard-orbit--two { width: 194px; height: 194px; }

  .dashboard-overview,
  .dashboard-analysis,
  .dashboard-reports {
    margin-top: 24px;
  }

  .dashboard-section-heading {
    align-items: start;
  }

  .dashboard-section-heading h2,
  .dashboard-reports__header h2 {
    font-size: 25px;
  }

  .dashboard-date,
  .dashboard-section-note {
    display: none;
  }

  .dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    border-radius: 20px;
  }

  .dashboard-stat {
    min-height: 187px;
    padding: 15px 13px 14px;
    border-radius: 15px;
  }

  .dashboard-stat:nth-child(n + 3) {
    grid-column: 1 / -1;
    min-height: 178px;
  }

  .dashboard-stat__top {
    margin-bottom: 14px;
  }

  .dashboard-stat__icon {
    width: 35px;
    height: 35px;
  }

  .dashboard-stat__trend {
    display: none;
  }

  .dashboard-stat > p {
    font-size: 7px;
  }

  .dashboard-stat__value strong {
    font-size: 30px;
  }

  .dashboard-action-card {
    min-height: 0;
    padding: 25px 21px;
    border-radius: 21px;
  }

  .dashboard-action-card h3 {
    font-size: 31px;
  }

  .dashboard-action-card > p:not(.dashboard-action-card__eyebrow) {
    font-size: 12px;
  }

  .dashboard-action-card__promise,
  .dashboard-manual-steps {
    margin-top: 17px;
  }

  .dashboard-manual-steps {
    grid-template-columns: 1fr;
  }

  .dashboard-manual-steps > span {
    min-height: 45px;
    grid-template-columns: 26px 1fr;
    align-items: center;
  }

  .dashboard-card-cta {
    margin-top: 23px;
  }

  .dashboard-reports {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .dashboard-reports__header {
    padding: 0 3px 13px;
    border: 0;
  }

  .dashboard-table-wrap {
    overflow: visible;
  }

  .dashboard-table,
  .dashboard-table tbody {
    display: block;
    min-width: 0;
  }

  .dashboard-table thead {
    display: none;
  }

  .dashboard-table tbody {
    display: grid;
    gap: 9px;
  }

  .dashboard-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "report points"
      "date method"
      "subject subject"
      "actions actions";
    gap: 10px 12px;
    padding: 16px;
    border: 1px solid rgba(178, 203, 231, 0.81);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 28px rgba(39, 72, 116, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .dashboard-table td,
  .dashboard-table td:first-child,
  .dashboard-table td:last-child {
    display: flex;
    gap: 7px;
    align-items: center;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .dashboard-table td::before {
    flex: 0 0 auto;
    color: #8b98ad;
    content: attr(data-label);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .dashboard-table td:nth-child(1) { grid-area: report; }
  .dashboard-table td:nth-child(2) { grid-area: date; }
  .dashboard-table td:nth-child(3) { grid-area: method; justify-content: flex-end; }
  .dashboard-table td:nth-child(4) { grid-area: subject; display: grid; gap: 4px; padding: 11px 0; border-top: 1px solid rgba(196, 214, 235, 0.65); border-bottom: 1px solid rgba(196, 214, 235, 0.65); }
  .dashboard-table td:nth-child(5) { grid-area: points; justify-content: flex-end; }
  .dashboard-table td:nth-child(6) { grid-area: actions; }

  .dashboard-table td:nth-child(1)::before,
  .dashboard-table td:nth-child(5)::before,
  .dashboard-table td:nth-child(6)::before {
    display: none;
  }

  .dashboard-row-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }

  .dashboard-row-actions > a {
    display: flex;
    gap: 7px;
    width: auto;
    height: 43px;
    justify-content: center;
  }

  .dashboard-row-actions > a:first-child::after { content: "Vezi fișa"; }
  .dashboard-row-actions > a:last-child::after { content: "Descarcă"; }

  .dashboard-reports__foot {
    margin-top: 9px;
    padding: 10px 4px;
    border: 0;
    background: transparent;
  }

  .dashboard-reports__foot > span:last-child {
    display: none;
  }

  .dashboard-legal-note {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    padding: 13px;
  }

  .dashboard-legal-note > .material-symbols-outlined,
.dashboard-legal-note > .ico {
    width: 34px;
    height: 34px;
  }

  .dashboard-legal-note a {
    grid-column: 2;
  }
}

@media (max-width: 390px) {
  .dashboard-topbar {
    padding-right: 10px;
    padding-left: 10px;
  }

  .dashboard-topbar__actions {
    gap: 5px;
  }

  .dashboard-menu-toggle,
  .dashboard-public-link,
  .dashboard-icon-button {
    width: 37px;
    height: 37px;
  }

  .dashboard-account__avatar {
    width: 35px;
    height: 35px;
  }

  .dashboard-main {
    padding-right: 9px;
    padding-left: 9px;
  }

  .dashboard-stat-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-stat,
  .dashboard-stat:nth-child(n + 3) {
    grid-column: auto;
    min-height: 171px;
  }

  .dashboard-reports__header > a {
    width: 36px;
    overflow: hidden;
    color: transparent;
  }

  .dashboard-reports__header > a .material-symbols-outlined,
.dashboard-reports__header > a .ico {
    flex: 0 0 auto;
    color: #5c40d5;
  }
}

/* ================================================================
   Analiză din documente — laborator de text medical
   ================================================================ */

.document-analysis-body {
  background:
    radial-gradient(circle at 13% 7%, rgba(25, 159, 227, 0.1), transparent 26rem),
    radial-gradient(circle at 91% 18%, rgba(94, 57, 218, 0.1), transparent 29rem),
    radial-gradient(circle at 71% 64%, rgba(220, 36, 125, 0.045), transparent 28rem),
    #f5f9fe;
}

.document-analysis-page {
  padding: 48px 28px 25px;
}

.document-intro {
  width: min(100%, 1268px);
  margin: 0 auto 25px;
}

.document-intro__copy {
  position: relative;
  max-width: 870px;
  padding-left: 4px;
}

.document-back-link {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 20px;
  color: #51688f;
  font-size: 13px;
  font-weight: 750;
}

.document-back-link .material-symbols-outlined,
.document-back-link .ico {
  font-size: 18px;
  transition: transform 180ms ease;
}

.document-back-link:hover .material-symbols-outlined,
.document-back-link:hover .ico {
  transform: translateX(-3px);
}

.document-intro .eyebrow {
  margin-bottom: 10px;
}

.document-intro h1 {
  margin: 0;
  color: #0c1735;
  font-family: var(--font-serif);
  font-size: clamp(42px, 5vw, 69px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.document-intro h1 span {
  color: #5a38dc;
  background: linear-gradient(100deg, #166fcf, #6542df 55%, #d32378);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.document-lead {
  max-width: 780px;
  margin: 18px 0 0;
  color: #536b91;
  font-size: 17px;
  line-height: 1.72;
}

.document-mode-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.document-mode-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 15px;
  min-height: 136px;
  padding: 21px 23px;
  overflow: hidden;
  border: 1px solid rgba(172, 201, 231, 0.86);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.69);
  box-shadow: 0 15px 36px rgba(37, 72, 118, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}

.document-mode-card::after {
  position: absolute;
  right: -52px;
  bottom: -72px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.document-mode-card--local::after {
  background: rgba(25, 159, 222, 0.075);
}

.document-mode-card--ai::after {
  background: rgba(104, 56, 218, 0.08);
}

.document-mode-card__icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  color: #0d8bc9;
  background: linear-gradient(145deg, rgba(34, 179, 225, 0.14), rgba(44, 127, 220, 0.08));
  box-shadow: inset 0 0 0 1px rgba(26, 151, 213, 0.08);
  font-size: 25px;
}

.document-mode-card--ai .document-mode-card__icon {
  color: #6641df;
  background: linear-gradient(145deg, rgba(108, 65, 224, 0.14), rgba(211, 48, 132, 0.08));
}

.document-mode-card > div {
  position: relative;
  z-index: 1;
}

.document-mode-card__tag {
  display: inline-flex;
  min-height: 23px;
  padding: 0 8px;
  align-items: center;
  border-radius: 20px;
  color: #0d759f;
  background: rgba(23, 158, 207, 0.09);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.document-mode-card--ai .document-mode-card__tag {
  color: #6040ca;
  background: rgba(102, 64, 218, 0.09);
}

.document-mode-card h2 {
  margin: 8px 0 3px;
  color: #15264b;
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.08;
}

.document-mode-card p {
  margin: 0;
  color: #566885;
  font-size: 14px;
  line-height: 1.58;
}

.document-form {
  width: min(100%, 1268px);
  margin: 0 auto;
}

.document-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 354px;
  gap: 15px;
  align-items: start;
}

.document-editor-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(161, 195, 228, 0.92);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 22px 52px rgba(34, 68, 112, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}

.document-editor-card::before {
  position: absolute;
  z-index: 0;
  top: -100px;
  right: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(97, 61, 220, 0.065);
  content: "";
  filter: blur(2px);
  pointer-events: none;
}

.document-editor-card__header,
.document-toolbar,
.document-editor-workspace,
.document-editor-footer {
  position: relative;
  z-index: 1;
}

.document-editor-card__header {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 91px;
  padding: 20px 23px;
  border-bottom: 1px solid rgba(188, 211, 234, 0.73);
}

.document-editor-identity {
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.document-editor-identity__icon {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #189bd5, #6541dd 67%, #ce2b7b);
  box-shadow: 0 12px 24px rgba(73, 69, 194, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-size: 23px;
}

.document-editor-identity label {
  display: block;
  color: #17294f;
  font-size: 16px;
  font-weight: 800;
}

.document-editor-identity label span {
  color: #d6206e;
}

.document-editor-identity p {
  margin: 4px 0 0;
  color: #687b9b;
  font-size: 13px;
  line-height: 1.45;
}

.document-editor-mode {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid rgba(39, 155, 191, 0.17);
  border-radius: 30px;
  color: #167995;
  background: rgba(30, 169, 201, 0.065);
  font-size: 12px;
  font-weight: 750;
}

.document-editor-mode > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #21b89e;
  box-shadow: 0 0 0 4px rgba(33, 184, 158, 0.1);
}

.document-toolbar {
  display: flex;
  gap: 15px;
  align-items: center;
  min-height: 59px;
  padding: 9px 16px 9px 22px;
  border-bottom: 1px solid rgba(191, 212, 235, 0.7);
  background: rgba(240, 246, 252, 0.6);
}

.document-toolbar__label {
  flex: 0 0 auto;
  color: #7182a0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-toolbar__actions {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.document-toolbar button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 0 10px;
  border: 1px solid rgba(179, 202, 228, 0.84);
  border-radius: 10px;
  color: #425a7f;
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 170ms ease, border-color 170ms ease, background 170ms ease, transform 170ms ease;
}

.document-toolbar button:hover {
  color: #5335ce;
  border-color: rgba(92, 58, 210, 0.3);
  background: #fff;
  transform: translateY(-1px);
}

.document-toolbar button .material-symbols-outlined,
.document-toolbar button .ico {
  font-size: 18px;
}

.document-toolbar__separator {
  width: 1px;
  height: 24px;
  margin: 0 2px;
  background: rgba(176, 199, 225, 0.85);
}

.document-toolbar button.document-toolbar__danger {
  margin-left: auto;
  color: #b32c58;
  border-color: rgba(210, 58, 105, 0.18);
  background: rgba(224, 45, 102, 0.055);
}

.document-toolbar button.document-toolbar__danger:hover {
  color: #fff;
  border-color: #c83266;
  background: #c83266;
}

.document-editor-workspace {
  padding: 17px;
  background:
    linear-gradient(rgba(36, 74, 123, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 74, 123, 0.025) 1px, transparent 1px),
    rgba(234, 242, 250, 0.52);
  background-size: 24px 24px, 24px 24px, auto;
}

.document-editor-workspace__bar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  min-height: 37px;
  padding: 0 6px 9px;
  color: #70819f;
  font-size: 12px;
  font-weight: 750;
}

.document-editor-workspace__bar > span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.document-editor-workspace__bar > span > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1fa3db;
  box-shadow: 0 0 0 4px rgba(31, 163, 219, 0.1);
}

.document-editor-workspace__bar strong {
  color: #17856d;
  font-size: 12px;
}

.document-paper {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(164, 193, 224, 0.93);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(43, 72, 111, 0.1), inset 0 0 0 1px rgba(245, 249, 253, 0.8);
}

.document-paper textarea {
  display: block;
  width: 100%;
  min-height: 510px;
  padding: 29px 31px 34px 37px;
  resize: vertical;
  border: 0;
  border-radius: inherit;
  outline: 0;
  color: #1b2c4d;
  background:
    linear-gradient(90deg, rgba(224, 67, 117, 0.11) 1px, transparent 1px) 25px 0 / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0, transparent 30px, rgba(181, 202, 225, 0.25) 31px),
    #fff;
  font: 500 16px/31px var(--font-sans);
  caret-color: #5b37db;
}

.document-paper textarea::placeholder {
  color: #8a9ab2;
  opacity: 1;
}

.document-paper:focus-within {
  border-color: #6750da;
  box-shadow: 0 0 0 4px rgba(100, 72, 218, 0.11), 0 16px 38px rgba(51, 75, 116, 0.13);
}

.document-paper__accent {
  position: absolute;
  top: 17px;
  right: 17px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #754dde;
  box-shadow: 0 0 0 5px rgba(117, 77, 222, 0.08);
  pointer-events: none;
}

.document-editor-footer {
  padding: 17px 20px 18px;
  border-top: 1px solid rgba(188, 210, 233, 0.72);
}

.document-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: stretch;
}

.document-metrics > span {
  display: grid;
  gap: 3px;
  min-height: 55px;
  padding: 8px 11px;
  align-content: center;
  border: 1px solid rgba(188, 209, 232, 0.66);
  border-radius: 11px;
  background: rgba(246, 249, 253, 0.75);
}

.document-metrics small {
  color: #7c8da8;
  font-size: 12px;
  font-weight: 700;
}

.document-metrics strong {
  color: #30476e;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.document-metrics b {
  color: #5233d0;
  font-size: 15px;
}

.document-metrics > span.document-dirty {
  grid-template-columns: 9px auto;
  gap: 7px;
  align-items: center;
  min-width: 137px;
  color: #71819b;
}

.document-dirty i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #aab5c6;
}

.document-dirty strong {
  color: #71819b;
  font-size: 12px;
}

.document-editor-card.is-dirty .document-dirty i {
  background: #1da67e;
  box-shadow: 0 0 0 4px rgba(29, 166, 126, 0.1);
}

.document-editor-card.is-dirty .document-dirty strong {
  color: #13765e;
}

.document-limit-track {
  height: 5px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 8px;
  background: #e2eaf3;
}

.document-limit-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d9fd7, #6544de);
  transition: width 180ms ease, background 180ms ease;
}

.document-editor-card.is-near-limit .document-limit-track > span {
  background: linear-gradient(90deg, #ef9d2f, #e65b37);
}

.document-editor-card.is-over-limit .document-limit-track > span {
  background: #d72d60;
}

.document-editor-card.is-over-limit .document-paper {
  border-color: #d72d60;
  box-shadow: 0 0 0 4px rgba(215, 45, 96, 0.09);
}

.document-editor-status {
  margin: 11px 3px 0;
  color: #6c7d98;
  font-size: 13px;
  line-height: 1.45;
}

.document-action-panel {
  position: sticky;
  top: 98px;
  display: grid;
  gap: 10px;
  padding: 21px;
  overflow: hidden;
  border: 1px solid rgba(165, 195, 227, 0.91);
  border-radius: 24px;
  background:
    radial-gradient(circle at 105% -5%, rgba(99, 60, 218, 0.12), transparent 15rem),
    rgba(255, 255, 255, 0.76);
  box-shadow: 0 20px 46px rgba(38, 69, 111, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(23px) saturate(140%);
  -webkit-backdrop-filter: blur(23px) saturate(140%);
}

.document-action-panel::before {
  position: absolute;
  top: -85px;
  right: -85px;
  width: 195px;
  height: 195px;
  border: 1px solid rgba(105, 67, 219, 0.12);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 29px rgba(105, 67, 219, 0.025), 0 0 0 58px rgba(105, 67, 219, 0.018);
  pointer-events: none;
}

.document-action-panel > * {
  position: relative;
  z-index: 1;
}

.document-action-panel__top {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.document-action-panel__top > .material-symbols-outlined,
.document-action-panel__top > .ico {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 13px;
  color: #6040d4;
  background: rgba(99, 62, 216, 0.1);
  font-size: 22px;
}

.document-action-panel__top p {
  margin: 0 0 2px;
  color: #7d8ca5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-action-panel__top h2 {
  margin: 0;
  color: #14254a;
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.05;
}

.document-submit {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 19px;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 77px;
  padding: 10px 13px;
  border-radius: 15px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.document-submit--ai {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background:
    radial-gradient(circle at 100% 0, rgba(64, 206, 235, 0.21), transparent 9rem),
    linear-gradient(135deg, #5536dc, #702eca 65%, #c62980);
  box-shadow: 0 14px 29px rgba(77, 47, 185, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.document-submit--local {
  color: #19335c;
  border: 1px solid rgba(37, 146, 209, 0.22);
  background: linear-gradient(135deg, rgba(22, 159, 216, 0.1), rgba(43, 116, 216, 0.07)), rgba(255, 255, 255, 0.73);
}

.document-submit:hover {
  transform: translateY(-2px);
}

.document-submit--ai:hover {
  box-shadow: 0 18px 35px rgba(77, 47, 185, 0.33), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.document-submit--local:hover {
  border-color: rgba(27, 136, 204, 0.42);
  box-shadow: 0 13px 26px rgba(33, 113, 180, 0.11);
}

.document-submit__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: inherit;
  background: rgba(255, 255, 255, 0.13);
  font-size: 21px;
}

.document-submit--local .document-submit__icon {
  color: #178cce;
  background: rgba(20, 147, 210, 0.1);
}

.document-submit > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.document-submit strong {
  font-size: 14px;
  font-weight: 800;
}

.document-submit small {
  color: rgba(240, 243, 255, 0.73);
  font-size: 12px;
  font-weight: 600;
}

.document-submit--local small {
  color: #6b7f9f;
}

.document-submit > .material-symbols-outlined:last-child,
.document-submit > .ico:last-child {
  font-size: 18px;
}

.document-action-divider {
  display: flex;
  align-items: center;
  margin: 5px 0;
  color: #8a98ad;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.document-action-divider::before,
.document-action-divider::after {
  flex: 1;
  height: 1px;
  background: rgba(183, 205, 230, 0.75);
  content: "";
}

.document-action-divider span {
  padding: 0 9px;
}

.document-secondary-action {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid rgba(184, 205, 230, 0.76);
  border-radius: 13px;
  color: #40577d;
  background: rgba(255, 255, 255, 0.62);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 170ms ease, border-color 170ms ease, background 170ms ease;
}

.document-secondary-action:hover {
  color: #5133cb;
  border-color: rgba(92, 60, 209, 0.29);
  background: #fff;
}

.document-secondary-action > .material-symbols-outlined,
.document-secondary-action > .ico {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 10px;
  color: #5a3bd1;
  background: rgba(91, 59, 209, 0.08);
  font-size: 18px;
}

.document-secondary-action > span:last-child {
  display: grid;
  gap: 1px;
}

.document-secondary-action strong {
  font-size: 13px;
}

.document-secondary-action small {
  color: #7c8ca6;
  font-size: 11px;
}

.document-privacy-note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  margin-top: 5px;
  padding: 12px;
  border: 1px solid rgba(31, 157, 124, 0.16);
  border-radius: 13px;
  color: #597769;
  background: rgba(26, 163, 126, 0.065);
}

.document-privacy-note .material-symbols-outlined,
.document-privacy-note .ico {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #15926f;
  background: rgba(26, 163, 126, 0.09);
  font-size: 18px;
}

.document-privacy-note p {
  margin: 0;
  font-size: 12px;
  line-height: 1.48;
}

.document-privacy-note strong {
  display: block;
  margin-bottom: 2px;
  color: #21755f;
}

/* BARA SE VEDE ORIUNDE AR FI OMUL (09.09.2026, semnalat de medic: „cel care
   introduce textul apasă butonul și nu vede bara, că este jos").

   Panoul stătea în fluxul paginii, sub textarea și sub contoare — iar butonul
   e sus, în coloana din dreapta. Cât ține analiza se desprinde și stă lipit de
   marginea de jos a ECRANULUI, nu a documentului.

   Nu acoperă nimic de apăsat: pe timpul analizei toate butoanele sunt oprite.
   `margin-top` rămâne 0 — scos din flux, n-ar mai însemna nimic. */
.document-analysis-progress {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: min(760px, calc(100vw - 32px));
  transform: translateX(-50%);
  padding: 17px 19px;
  border: 1px solid rgba(106, 73, 216, 0.27);
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(125deg, #10234c, #32206e 66%, #542186);
  box-shadow: 0 18px 37px rgba(39, 32, 107, 0.16);
}

/* `hidden` pierde in fata unui `display` din CSS (lectia casei, §6.2):
   panoul nu declara `display`, dar garda ramane scrisa ca sa nu se piarda
   la prima adaugare. */
.document-analysis-progress[hidden] {
  display: none !important;
}

.document-analysis-progress > div:first-child {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.document-analysis-progress > div:first-child > .material-symbols-outlined,
.document-analysis-progress > div:first-child > .ico {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  color: #92e7ff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 21px;
}

.document-analysis-progress p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.document-analysis-progress strong {
  font-size: 14px;
}

.document-analysis-progress small {
  color: rgba(220, 231, 249, 0.72);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.document-analysis-progress__track {
  height: 7px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
}

.document-analysis-progress__track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #55d9e7, #9c79ff, #ff77b3);
  box-shadow: 0 0 18px rgba(111, 218, 238, 0.4);
  transition: width 250ms linear;
}

/* PE PAGINA COMENZII (§376) cutia stă ÎN PANOU, sub „Fișa se face acum", nu
   lipită de marginea ecranului: acolo omul nu așteaptă cu butoanele oprite, ci
   poate citi restul panoului ori închide pagina. Selectorul cu două clase bate
   `position: fixed` de sus oriunde s-ar muta regula. */
.document-analysis-progress.document-analysis-progress--panou {
  position: static;
  z-index: auto;
  width: auto;
  margin-top: 20px;
  transform: none;
  box-shadow: 0 12px 28px rgba(39, 32, 107, 0.14);
}

.document-analysis-progress--panou .document-analysis-progress__mesaj {
  font-size: 14.5px;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .document-analysis-progress__track > span {
    transition: none;
  }
}

.document-safety-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 1268px);
  margin: 17px auto 0;
}

.document-safety-strip article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 86px;
  padding: 13px 15px;
  border: 1px solid rgba(178, 202, 229, 0.78);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.57);
  box-shadow: 0 11px 25px rgba(37, 70, 111, 0.05);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.document-safety-strip article > .material-symbols-outlined,
.document-safety-strip article > .ico {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  color: #5e3dd4;
  background: rgba(94, 61, 212, 0.08);
  font-size: 20px;
}

.document-safety-strip strong {
  color: #2c446c;
  font-size: 13px;
}

.document-safety-strip p {
  margin: 2px 0 0;
  color: #72819b;
  font-size: 12px;
  line-height: 1.42;
}

.document-expert-note {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  width: min(100%, 1268px);
  margin: 14px auto 0;
  padding: 15px 17px;
  border: 1px solid rgba(179, 203, 229, 0.77);
  border-radius: 17px;
  color: #617594;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.document-expert-note > .material-symbols-outlined,
.document-expert-note > .ico {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: #159171;
  background: rgba(20, 157, 118, 0.09);
  font-size: 21px;
}

.document-expert-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.document-expert-note strong {
  color: #29476b;
}

.document-expert-note a {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: #5a3bd0;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.document-expert-note a .material-symbols-outlined,
.document-expert-note a .ico {
  font-size: 16px;
}

.document-editor-card.is-fullscreen {
  position: fixed;
  z-index: 70;
  inset: 14px;
  width: auto;
  height: auto;
  overflow: auto;
  border-radius: 20px;
  background: #f8fbff;
  box-shadow: 0 30px 90px rgba(5, 19, 48, 0.35);
}

.document-editor-card.is-fullscreen .document-toolbar {
  position: sticky;
  z-index: 3;
  top: 0;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.document-editor-card.is-fullscreen .document-paper textarea {
  min-height: calc(100vh - 355px);
}

body.document-editor-fullscreen {
  overflow: hidden;
}

html.a11y-contrast .document-mode-card,
html.a11y-contrast .document-editor-card,
html.a11y-contrast .document-action-panel,
html.a11y-contrast .document-safety-strip article,
html.a11y-contrast .document-expert-note {
  border-width: 2px;
  border-color: #2d3748;
  background: #fff;
}

@media (max-width: 1080px) {
  .document-analysis-page {
    padding-right: 22px;
    padding-left: 22px;
  }

  .document-workbench {
    grid-template-columns: 1fr;
  }

  .document-action-panel {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-action-panel__top,
  .document-action-divider,
  .document-privacy-note {
    grid-column: 1 / -1;
  }

  .document-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .document-metrics > span.document-dirty {
    grid-column: 1 / -1;
    min-height: 42px;
  }
}

@media (max-width: 820px) {
  .document-analysis-page {
    padding-top: 34px;
  }

  .document-intro h1 {
    font-size: clamp(40px, 8.5vw, 57px);
  }

  .document-mode-strip {
    grid-template-columns: 1fr;
  }

  .document-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .document-toolbar__actions {
    width: 100%;
  }

  .document-toolbar button.document-toolbar__danger {
    margin-left: 0;
  }

  .document-toolbar__separator {
    display: none;
  }

  .document-safety-strip {
    grid-template-columns: 1fr;
  }

  .document-expert-note {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .document-expert-note a {
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  .document-analysis-page {
    padding: 27px 12px 20px;
  }

  .document-back-link {
    margin-bottom: 16px;
  }

  .document-intro h1 {
    font-size: clamp(37px, 12.5vw, 49px);
  }

  .document-lead {
    font-size: 15px;
  }

  .document-mode-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 17px 15px;
    border-radius: 17px;
  }

  .document-mode-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .document-mode-card h2 {
    font-size: 21px;
  }

  .document-mode-card p {
    font-size: 13px;
  }

  .document-editor-card,
  .document-action-panel {
    border-radius: 19px;
  }

  .document-editor-card__header {
    align-items: flex-start;
    padding: 17px 15px;
  }

  .document-editor-identity {
    grid-template-columns: 41px minmax(0, 1fr);
    gap: 10px;
  }

  .document-editor-identity__icon {
    width: 41px;
    height: 41px;
  }

  .document-editor-mode {
    display: none;
  }

  .document-toolbar {
    padding: 12px;
  }

  .document-toolbar__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-toolbar button {
    width: 100%;
    min-height: 44px;
  }

  .document-toolbar button.document-toolbar__danger {
    grid-column: 1 / -1;
  }

  .document-editor-workspace {
    padding: 10px;
  }

  .document-editor-workspace__bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 9px;
  }

  .document-paper textarea {
    min-height: 390px;
    padding: 22px 19px 28px 27px;
    background:
      linear-gradient(90deg, rgba(224, 67, 117, 0.11) 1px, transparent 1px) 18px 0 / 1px 100% no-repeat,
      repeating-linear-gradient(to bottom, transparent 0, transparent 30px, rgba(181, 202, 225, 0.25) 31px),
      #fff;
    font-size: 15px;
  }

  .document-editor-footer {
    padding: 13px 11px 15px;
  }

  .document-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-action-panel {
    display: grid;
    grid-template-columns: 1fr;
    padding: 17px;
  }

  .document-action-panel__top,
  .document-action-divider,
  .document-privacy-note {
    grid-column: auto;
  }

  .document-submit,
  .document-secondary-action {
    min-height: 68px;
  }

  .document-safety-strip article {
    min-height: 78px;
  }

  .document-expert-note {
    padding: 13px;
  }

  .document-editor-card.is-fullscreen {
    inset: 5px;
    border-radius: 15px;
  }

  .document-editor-card.is-fullscreen .document-paper textarea {
    min-height: calc(100vh - 405px);
  }
}

/* Cum se completează — ghid vizual */

.guide-body {
  background:
    radial-gradient(circle at 8% 8%, rgba(31, 166, 224, 0.11), transparent 24rem),
    radial-gradient(circle at 92% 16%, rgba(102, 65, 220, 0.1), transparent 27rem),
    radial-gradient(circle at 79% 72%, rgba(232, 50, 139, 0.065), transparent 25rem),
    #f4f8fd;
}

.guide-page {
  width: min(100%, 1250px);
  margin: 0 auto;
  padding: 48px 28px 40px;
}

.guide-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(153, 184, 220, 0.78);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 26px 70px rgba(36, 67, 114, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}

.guide-hero__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 55px clamp(34px, 5vw, 68px);
}

.guide-hero__copy .eyebrow {
  margin-bottom: 20px;
}

.guide-hero__copy h1 {
  max-width: 720px;
  margin: 0;
  color: #101b3a;
  font-family: var(--font-serif);
  font-size: clamp(50px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.042em;
}

.guide-hero__copy h1 span {
  color: #5b36db;
  background: linear-gradient(100deg, #187fdc, #6337dc 53%, #cf287f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.guide-hero__copy > p:not(.eyebrow) {
  max-width: 650px;
  margin: 23px 0 0;
  color: #4b6086;
  font-size: 17px;
  line-height: 1.75;
}

.guide-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.guide-hero__facts > span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(153, 183, 219, 0.62);
  border-radius: 999px;
  color: #344d76;
  background: rgba(248, 252, 255, 0.86);
  font-size: 13px;
  font-weight: 750;
}

.guide-hero__facts .material-symbols-outlined,
.guide-hero__facts .ico {
  color: #5c3bd7;
  font-size: 18px;
}

.guide-hero__art {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border-left: 1px solid rgba(172, 194, 228, 0.14);
  background:
    linear-gradient(rgba(159, 194, 238, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 194, 238, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 20% 18%, rgba(41, 188, 226, 0.29), transparent 31%),
    radial-gradient(circle at 85% 80%, rgba(218, 46, 143, 0.23), transparent 35%),
    linear-gradient(145deg, #0a1738, #14204f 52%, #48237e);
  background-size: 38px 38px, 38px 38px, auto, auto, auto;
  isolation: isolate;
}

.guide-hero__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(157, 214, 247, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(122, 96, 226, 0.055), 0 0 85px rgba(49, 181, 226, 0.16);
  transform: translate(-50%, -50%);
}

.guide-hero__image {
  position: absolute;
  z-index: 2;
  object-fit: contain;
  filter: drop-shadow(0 28px 28px rgba(3, 10, 37, 0.26));
}

.guide-hero__image--one {
  top: 2%;
  left: -9%;
  width: 68%;
  transform: rotate(-6deg);
}

.guide-hero__image--two {
  right: -12%;
  bottom: -2%;
  width: 68%;
  transform: rotate(7deg);
}

.guide-hero__route {
  position: absolute;
  z-index: 4;
  right: 22px;
  bottom: 20px;
  display: flex;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(204, 225, 252, 0.17);
  border-radius: 999px;
  background: rgba(9, 18, 52, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.guide-hero__route i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #dceaff;
  background: rgba(255, 255, 255, 0.09);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.guide-hero__route i:first-child {
  color: #fff;
  background: linear-gradient(145deg, #24a9df, #6540df);
}

.guide-toc {
  position: relative;
  z-index: 15;
  top: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  padding: 10px;
  overflow-x: auto;
  border: 1px solid rgba(158, 187, 220, 0.76);
  border-radius: 18px;
  background: rgba(248, 252, 255, 0.88);
  box-shadow: 0 15px 38px rgba(31, 58, 99, 0.1), inset 0 1px 0 #fff;
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  scrollbar-width: thin;
}

.guide-toc strong,
.guide-toc a {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 11px;
  white-space: nowrap;
}

.guide-toc strong {
  color: #182c51;
  font-size: 13px;
}

.guide-toc strong .material-symbols-outlined,
.guide-toc strong .ico {
  color: #5e3bd9;
  font-size: 19px;
}

.guide-toc a {
  color: #52698f;
  font-size: 13px;
  font-weight: 700;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.guide-toc a:hover,
.guide-toc a:focus-visible {
  color: #4e2ed0;
  background: rgba(91, 56, 216, 0.09);
  transform: translateY(-1px);
}

.guide-paths,
.guide-route-section,
.guide-report-section,
.guide-start {
  scroll-margin-top: 82px;
}

.guide-paths {
  padding: 68px 0 54px;
}

.guide-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
  column-gap: 55px;
  align-items: end;
  margin-bottom: 25px;
}

.guide-section-heading > p,
.guide-route-heading p,
.guide-report-details > div > p,
.guide-start > div:first-child > p {
  margin: 0 0 8px;
  color: #5f3ada;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.guide-section-heading h2 {
  grid-row: 2;
  margin: 0;
  color: #101b39;
  font-family: var(--font-serif);
  font-size: clamp(38px, 4vw, 53px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.guide-section-heading > span {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #53698e;
  font-size: 16px;
  line-height: 1.75;
}

.guide-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.guide-path-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  min-height: 238px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(151, 183, 220, 0.72);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 48px rgba(36, 67, 110, 0.1), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.guide-path-card::after {
  position: absolute;
  right: -75px;
  bottom: -100px;
  width: 235px;
  height: 235px;
  border-radius: 50%;
  content: "";
  opacity: 0.6;
  pointer-events: none;
}

.guide-path-card--manual::after {
  background: radial-gradient(circle, rgba(28, 157, 224, 0.18), transparent 68%);
}

.guide-path-card--text::after {
  background: radial-gradient(circle, rgba(107, 55, 218, 0.17), transparent 68%);
}

.guide-path-card:hover {
  border-color: rgba(101, 68, 208, 0.5);
  box-shadow: 0 24px 55px rgba(38, 64, 111, 0.14), inset 0 1px 0 #fff;
  transform: translateY(-3px);
}

.guide-path-card__number {
  position: absolute;
  top: 19px;
  right: 23px;
  color: rgba(52, 69, 114, 0.12);
  font-family: var(--font-serif);
  font-size: 50px;
  line-height: 1;
}

.guide-path-card__icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  font-size: 29px;
  box-shadow: 0 13px 28px rgba(43, 54, 151, 0.19);
}

.guide-path-card--manual .guide-path-card__icon {
  background: linear-gradient(145deg, #22b7df, #177bdc);
}

.guide-path-card--text .guide-path-card__icon {
  background: linear-gradient(145deg, #7645e8, #d52a85);
}

.guide-path-card > div {
  position: relative;
  z-index: 1;
}

.guide-path-card > div > p {
  margin: 1px 0 5px;
  color: #607292;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guide-path-card h3 {
  margin: 0;
  color: #162242;
  font-family: var(--font-serif);
  font-size: 29px;
  font-weight: 400;
  line-height: 1.12;
}

.guide-path-card > div > span {
  display: block;
  margin-top: 12px;
  color: #556a8d;
  font-size: 15px;
  line-height: 1.68;
}

.guide-path-card a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: 17px;
  color: #5230d0;
  font-size: 14px;
  font-weight: 800;
}

.guide-path-card a .material-symbols-outlined,
.guide-path-card a .ico {
  font-size: 17px;
}

.guide-layout {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.guide-rail {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 7px;
  padding: 17px;
  border: 1px solid rgba(159, 188, 222, 0.76);
  border-radius: 20px;
  background: rgba(249, 252, 255, 0.83);
  box-shadow: 0 16px 42px rgba(37, 63, 103, 0.09), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.guide-rail > p {
  margin: 0 0 6px;
  padding: 0 5px;
  color: #7586a3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guide-rail a {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
  min-height: 62px;
  padding: 8px;
  border-radius: 14px;
  transition: color 160ms ease, background 160ms ease;
}

.guide-rail a:hover,
.guide-rail a:focus-visible {
  color: #4f2dce;
  background: rgba(91, 55, 215, 0.08);
}

.guide-rail a > span {
  grid-row: 1 / span 2;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(113, 92, 206, 0.2);
  border-radius: 11px;
  color: #5b37d7;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
}

.guide-rail strong {
  align-self: end;
  color: #263a60;
  font-size: 12px;
}

.guide-rail small {
  align-self: start;
  color: #8190a9;
  font-size: 10px;
}

.guide-content {
  display: grid;
  gap: 54px;
  min-width: 0;
}

.guide-route-section,
.guide-report-section {
  display: grid;
  gap: 19px;
}

.guide-route-heading {
  display: flex;
  gap: 17px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid rgba(151, 183, 221, 0.72);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 15px 39px rgba(37, 65, 107, 0.08), inset 0 1px 0 #fff;
}

.guide-route-heading__number {
  display: grid;
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  place-items: center;
  border-radius: 19px;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 27px;
  box-shadow: 0 14px 28px rgba(42, 47, 145, 0.18);
}

.guide-route-heading--manual .guide-route-heading__number {
  background: linear-gradient(145deg, #21b5de, #197cde);
}

.guide-route-heading--text .guide-route-heading__number {
  background: linear-gradient(145deg, #7041e4, #bf2f9b);
}

.guide-route-heading--report .guide-route-heading__number {
  background: linear-gradient(145deg, #f27a32, #dc315f);
}

.guide-route-heading p {
  margin-bottom: 3px;
}

.guide-route-heading h2 {
  margin: 0;
  color: #121e3d;
  font-family: var(--font-serif);
  font-size: clamp(31px, 3.3vw, 43px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.guide-route-heading div > span {
  display: block;
  margin-top: 5px;
  color: #637697;
  font-size: 13px;
  font-weight: 650;
}

.guide-route-lead {
  margin: 0 4px 1px;
  color: #52688e;
  font-size: 16px;
  line-height: 1.72;
}

.guide-step {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  gap: 22px;
  align-items: stretch;
  min-height: 370px;
  padding: 22px;
  border: 1px solid rgba(153, 183, 219, 0.75);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 20px 52px rgba(34, 64, 106, 0.1), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.guide-step--reverse {
  grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.08fr);
}

.guide-step--reverse .guide-step__copy {
  order: 2;
}

.guide-step--reverse .guide-shot {
  order: 1;
}

.guide-step__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(13px, 2.5vw, 28px);
}

.guide-step__badge {
  display: inline-flex;
  align-self: flex-start;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(95, 62, 207, 0.22);
  border-radius: 999px;
  color: #5835d5;
  background: rgba(99, 61, 218, 0.07);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-step h3 {
  margin: 15px 0 11px;
  color: #14203e;
  font-family: var(--font-serif);
  font-size: clamp(27px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.guide-step__copy > p {
  margin: 0;
  color: #50668b;
  font-size: 15px;
  line-height: 1.75;
}

.guide-step__copy > p + p:not(.guide-step__tip) {
  margin-top: 11px;
}

.guide-step__tip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 17px !important;
  padding: 12px 13px;
  border: 1px solid rgba(34, 150, 204, 0.22);
  border-radius: 14px;
  color: #36587e !important;
  background: linear-gradient(135deg, rgba(38, 184, 218, 0.08), rgba(102, 66, 216, 0.05));
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.guide-step__tip .material-symbols-outlined,
.guide-step__tip .ico {
  flex: 0 0 auto;
  color: #158bc7;
  font-size: 20px;
}

.guide-shot {
  position: relative;
  display: grid;
  min-height: 326px;
  margin: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(170, 197, 225, 0.68);
  border-radius: 20px;
  isolation: isolate;
}

.guide-shot::before,
.guide-report-preview::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(119, 155, 204, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 155, 204, 0.052) 1px, transparent 1px);
  background-size: 31px 31px;
  content: "";
  pointer-events: none;
}

.guide-shot--blue {
  background: radial-gradient(circle at 72% 20%, rgba(46, 184, 226, 0.18), transparent 45%), linear-gradient(145deg, #f5fbff, #eaf3ff);
}

.guide-shot--violet {
  background: radial-gradient(circle at 20% 82%, rgba(92, 64, 222, 0.17), transparent 46%), linear-gradient(145deg, #faf8ff, #eef0ff);
}

.guide-shot--orange {
  background: radial-gradient(circle at 76% 18%, rgba(243, 109, 47, 0.15), transparent 43%), linear-gradient(145deg, #fffaf7, #f9effa);
}

.guide-shot img {
  position: relative;
  z-index: 1;
  width: min(83%, 315px);
  height: 270px;
  object-fit: contain;
  filter: drop-shadow(0 22px 22px rgba(38, 62, 102, 0.13));
  transition: transform 220ms ease;
}

.guide-shot:hover img {
  transform: scale(1.025) translateY(-3px);
}

.guide-shot__label {
  position: absolute;
  z-index: 3;
  top: 13px;
  left: 13px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(145, 175, 211, 0.55);
  border-radius: 999px;
  color: #5e7192;
  background: rgba(255, 255, 255, 0.83);
  box-shadow: 0 7px 18px rgba(38, 60, 98, 0.08);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.guide-shot__label .material-symbols-outlined,
.guide-shot__label .ico {
  font-size: 16px;
}

.guide-shot figcaption {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  left: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(151, 179, 213, 0.52);
  border-radius: 12px;
  color: #536889;
  background: rgba(255, 255, 255, 0.84);
  font-size: 11px;
  line-height: 1.45;
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}

.guide-interval-note,
.guide-ai-choice,
.guide-legal-note {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(124, 94, 212, 0.3);
  border-radius: 19px;
  color: #3b5075;
  background: linear-gradient(135deg, rgba(82, 177, 224, 0.1), rgba(105, 61, 214, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.guide-interval-note > .material-symbols-outlined,
.guide-interval-note > .ico,
.guide-ai-choice > .material-symbols-outlined,
.guide-ai-choice > .ico,
.guide-legal-note > .material-symbols-outlined,
.guide-legal-note > .ico {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #238ed9, #6540dc);
  box-shadow: 0 10px 22px rgba(54, 52, 152, 0.18);
  font-size: 24px;
}

.guide-interval-note p,
.guide-legal-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.68;
}

.guide-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 14px;
  align-items: center;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(25, 140, 211, 0.24);
  border-radius: 15px;
  background: rgba(238, 248, 255, 0.77);
}

.guide-price small {
  color: #657a9b;
  font-size: 11px;
  font-weight: 750;
}

.guide-price strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #174da0;
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 400;
}

.guide-price span {
  color: #16875f;
  font-size: 11px;
  font-weight: 750;
}

.guide-ai-choice {
  grid-template-columns: 52px minmax(0, 1fr);
  padding: 22px;
  border-color: rgba(128, 84, 207, 0.34);
  background: linear-gradient(135deg, rgba(107, 59, 218, 0.1), rgba(227, 52, 140, 0.07));
}

.guide-ai-choice > .material-symbols-outlined,
.guide-ai-choice > .ico {
  width: 52px;
  height: 52px;
  background: linear-gradient(145deg, #7041e2, #d42f88);
}

.guide-ai-choice h3 {
  margin: 0 0 5px;
  color: #202d51;
  font-size: 17px;
}

.guide-ai-choice p {
  margin: 0;
  color: #53698e;
  font-size: 14px;
  line-height: 1.68;
}

.guide-ai-choice a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  color: #5a32d1;
  font-size: 13px;
  font-weight: 800;
}

.guide-ai-choice a .material-symbols-outlined,
.guide-ai-choice a .ico {
  font-size: 16px;
}

.guide-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.guide-report-preview {
  position: relative;
  display: grid;
  min-height: 430px;
  margin: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(151, 183, 219, 0.76);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 19px 49px rgba(37, 65, 105, 0.09), inset 0 1px 0 #fff;
}

.guide-report-preview--first {
  background: radial-gradient(circle at 50% 33%, rgba(43, 172, 224, 0.14), transparent 47%), rgba(255, 255, 255, 0.86);
}

.guide-report-preview--second {
  background: radial-gradient(circle at 50% 33%, rgba(106, 58, 217, 0.13), transparent 47%), rgba(255, 255, 255, 0.86);
}

.guide-report-preview img {
  position: relative;
  z-index: 1;
  width: 78%;
  height: 330px;
  object-fit: contain;
  filter: drop-shadow(0 23px 25px rgba(29, 52, 91, 0.14));
}

.guide-report-preview figcaption {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(152, 181, 215, 0.56);
  border-radius: 14px;
  color: #617391;
  background: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.guide-report-preview figcaption strong {
  color: #203357;
  font-size: 14px;
}

.guide-report-details {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: 30px;
  padding: 28px;
  border: 1px solid rgba(151, 183, 219, 0.76);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 48px rgba(37, 64, 105, 0.08), inset 0 1px 0 #fff;
}

.guide-report-details h3 {
  margin: 0;
  color: #172342;
  font-family: var(--font-serif);
  font-size: 31px;
  font-weight: 400;
  line-height: 1.12;
}

.guide-report-details ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-report-details li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  color: #52688b;
  font-size: 13px;
  line-height: 1.58;
}

.guide-report-details li .material-symbols-outlined,
.guide-report-details li .ico {
  color: #159568;
  font-size: 21px;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.guide-legal-note {
  border-color: rgba(24, 149, 104, 0.28);
  background: linear-gradient(135deg, rgba(25, 157, 111, 0.09), rgba(36, 147, 208, 0.07));
}

.guide-legal-note > .material-symbols-outlined,
.guide-legal-note > .ico {
  background: linear-gradient(145deg, #20ae7d, #187fc1);
}

.guide-start {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.38fr);
  gap: 28px;
  align-items: center;
  margin-top: 60px;
  overflow: hidden;
  padding: 32px;
  border: 1px solid rgba(183, 205, 242, 0.17);
  border-radius: 27px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 20%, rgba(49, 193, 229, 0.21), transparent 18rem),
    radial-gradient(circle at 96% 115%, rgba(221, 43, 144, 0.26), transparent 24rem),
    linear-gradient(125deg, #091735, #16204e 55%, #46227d);
  box-shadow: 0 24px 58px rgba(24, 42, 86, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.guide-start::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(167, 199, 240, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 199, 240, 0.045) 1px, transparent 1px);
  background-size: 36px 36px;
  content: "";
  mask-image: linear-gradient(90deg, transparent, #000);
  pointer-events: none;
}

.guide-start > * {
  position: relative;
  z-index: 1;
}

.guide-start > div:first-child > p {
  color: #8ddff7;
}

.guide-start h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
}

.guide-start > div:first-child > span {
  display: block;
  margin-top: 9px;
  color: rgba(219, 232, 250, 0.74);
  font-size: 13px;
}

.guide-start__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.guide-start__actions .button {
  min-height: 48px;
  padding-right: 16px;
  padding-left: 16px;
  font-size: 12px;
}

.guide-start__actions .button--secondary {
  color: #f0f6ff;
  border-color: rgba(196, 217, 245, 0.24);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.guide-start__actions .material-symbols-outlined,
.guide-start__actions .ico {
  font-size: 19px;
}

.guide-start__help {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(199, 218, 247, 0.12);
  color: rgba(219, 231, 249, 0.7);
  font-size: 12px;
  text-align: right;
}

.guide-start__help a {
  color: #a7e8ff;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guide-body .site-footer {
  margin-top: 0;
}

html.a11y-contrast .guide-hero,
html.a11y-contrast .guide-toc,
html.a11y-contrast .guide-path-card,
html.a11y-contrast .guide-rail,
html.a11y-contrast .guide-route-heading,
html.a11y-contrast .guide-step,
html.a11y-contrast .guide-report-preview,
html.a11y-contrast .guide-report-details {
  border-width: 2px;
  border-color: #2d3748;
  background: #fff;
}

@media (max-width: 1080px) {
  .guide-page {
    padding-right: 22px;
    padding-left: 22px;
  }

  .guide-hero {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.72fr);
  }

  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-rail {
    display: none;
  }
}

@media (max-width: 880px) {
  .guide-hero {
    grid-template-columns: 1fr;
  }

  .guide-hero__copy {
    padding-bottom: 42px;
  }

  .guide-hero__art {
    min-height: 330px;
    border-top: 1px solid rgba(173, 197, 229, 0.14);
    border-left: 0;
  }

  .guide-section-heading {
    display: block;
  }

  .guide-section-heading > span {
    display: block;
    margin-top: 15px;
  }

  .guide-step,
  .guide-step--reverse {
    grid-template-columns: 1fr;
  }

  .guide-step--reverse .guide-step__copy,
  .guide-step--reverse .guide-shot {
    order: initial;
  }

  .guide-report-details {
    grid-template-columns: 1fr;
  }

  .guide-start {
    grid-template-columns: 1fr;
  }

  .guide-start__actions {
    justify-content: flex-start;
  }

  .guide-start__help {
    text-align: left;
  }
}

@media (max-width: 680px) {
  .guide-page {
    padding: 27px 12px 24px;
  }

  .guide-hero {
    min-height: 0;
    border-radius: 23px;
  }

  .guide-hero__copy {
    padding: 31px 22px 29px;
  }

  .guide-hero__copy h1 {
    font-size: clamp(41px, 12vw, 54px);
  }

  .guide-hero__copy > p:not(.eyebrow) {
    margin-top: 17px;
    font-size: 15px;
    line-height: 1.65;
  }

  .guide-hero__facts {
    margin-top: 21px;
  }

  .guide-hero__facts > span {
    min-height: 35px;
    padding: 0 10px;
    font-size: 11px;
  }

  .guide-hero__art {
    min-height: 270px;
  }

  .guide-hero__halo {
    width: 210px;
    height: 210px;
  }

  .guide-hero__image--one {
    left: -9%;
    width: 65%;
  }

  .guide-hero__image--two {
    right: -12%;
    width: 65%;
  }

  .guide-toc {
    top: auto;
    margin-top: 12px;
    padding: 7px;
    border-radius: 15px;
  }

  .guide-toc strong,
  .guide-toc a {
    min-height: 35px;
    padding: 0 10px;
    font-size: 11px;
  }

  .guide-paths {
    padding: 45px 0 38px;
  }

  .guide-section-heading h2 {
    font-size: 38px;
  }

  .guide-section-heading > span {
    font-size: 14px;
    line-height: 1.65;
  }

  .guide-path-grid,
  .guide-rail,
  .guide-report-grid {
    grid-template-columns: 1fr;
  }

  .guide-path-card {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 20px 17px;
    border-radius: 20px;
  }

  .guide-path-card__icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    font-size: 25px;
  }

  .guide-path-card h3 {
    font-size: 25px;
  }

  .guide-path-card > div > span {
    font-size: 13px;
  }

  .guide-rail > p {
    grid-column: auto;
  }

  .guide-content {
    gap: 42px;
  }

  .guide-route-heading {
    align-items: flex-start;
    padding: 16px;
    border-radius: 19px;
  }

  .guide-route-heading__number {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    font-size: 22px;
  }

  .guide-route-heading h2 {
    font-size: 31px;
  }

  .guide-route-heading div > span {
    font-size: 11px;
    line-height: 1.45;
  }

  .guide-route-lead {
    font-size: 14px;
  }

  .guide-step {
    gap: 13px;
    min-height: 0;
    padding: 12px;
    border-radius: 21px;
  }

  .guide-step__copy {
    padding: 16px 10px 10px;
  }

  .guide-step h3 {
    font-size: 29px;
  }

  .guide-step__copy > p {
    font-size: 14px;
    line-height: 1.7;
  }

  .guide-shot {
    min-height: 310px;
    border-radius: 17px;
  }

  .guide-shot img {
    width: 78%;
    height: 245px;
  }

  .guide-interval-note,
  .guide-ai-choice,
  .guide-legal-note {
    grid-template-columns: 41px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
  }

  .guide-interval-note > .material-symbols-outlined,
.guide-interval-note > .ico,
.guide-ai-choice > .material-symbols-outlined,
.guide-ai-choice > .ico,
.guide-legal-note > .material-symbols-outlined,
.guide-legal-note > .ico {
    width: 41px;
    height: 41px;
    border-radius: 12px;
    font-size: 21px;
  }

  .guide-report-preview {
    min-height: 350px;
    border-radius: 20px;
  }

  .guide-report-preview img {
    height: 275px;
  }

  .guide-report-details {
    gap: 21px;
    padding: 20px 17px;
    border-radius: 20px;
  }

  .guide-report-details h3 {
    font-size: 27px;
  }

  .guide-start {
    margin-top: 42px;
    padding: 24px 19px;
    border-radius: 22px;
  }

  .guide-start__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .guide-start__actions .button {
    width: 100%;
  }
}

/* ======================================================================
   BLOCUL CASEI (§154) — ce adaugam noi peste foaia adusa.
   Sta la COADA si nu atinge nimic din ce a venit: cand materialul se
   reimprospateaza, se inlocuieste foaia si se lipeste blocul la loc.
   ====================================================================== */

/* ---------------------------------------------- MENIUL FARA JAVASCRIPT
   Materialul deschide meniul dintr-un buton cu o clasa pusa din JS. La noi
   il deschide o CASETA DE BIFAT ascunsa, iar regula de mai jos o aprinde —
   „un meniu care are nevoie de JS ca sa se deschida e un meniu care se poate
   strica tacut". Infatisarea ramane a materialului: aceleasi declaratii ca
   `.site-header.menu-open .header-menu`, doar alt declansator.

   Caseta e ascunsa fara `display:none`: asa ramane focalizabila prin eticheta
   si nu iese din arborele de accesibilitate. */
#meniu-comutator {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Eticheta e un buton, deci se poarta ca unul: se poate apasa cu tastatura. */
.menu-toggle {
  cursor: pointer;
}

@media (max-width: 1180px) {
  #meniu-comutator:checked ~ .header-menu {
    display: grid;
    gap: 18px;
  }
}

/* Inelul de focus al etichetei: caseta e ascunsa, deci `:focus-visible` cade
   pe ea, nu pe eticheta. Fara regula asta, cine umbla cu tastatura n-ar vedea
   unde e. */
#meniu-comutator:focus-visible ~ .menu-toggle,
.menu-toggle:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}

/* ------------------------------------------------------ ICONURILE CASEI
   Materialul cere 8 iconuri Material Symbols de la Google. Toate opt exista
   deja ca SVG in `<x-ico>`, deci le folosim pe ale noastre — o legatura in
   afara mai putin, si o cerere de retea mai putin la fiecare pagina.
   Regulile de dedesubt le dau MARIMEA pe care o aveau glifele. */
.footer-badges svg,
.footer-link-group h3 svg,
.footer-legal svg,
.footer-external-link svg,
.header-button svg,
.footer-legal-icon svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-external-link svg {
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.35em;
  vertical-align: -0.1em;
}

.footer-legal-icon svg {
  width: 1.5em;
  height: 1.5em;
}

.menu-toggle svg {
  width: 24px;
  height: 24px;
}

/* Produsul care NU se poate cumpara acum isi spune MOTIVUL, in locul
   butonului. Macheta n-are starea asta — toate produsele ei sunt
   disponibile — deci regula e a casei. Sta SUB buton: legatura ramane
   acolo oricum, iar nota spune de ce nu se poate acum. */
.pricing-indisponibil {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin: 10px 0 0;
  color: #72809f;
  font-size: 13px;
  line-height: 1.5;
}

/* DESENUL EROULUI E UN FISIER, nu un decupaj dintr-o captura.
   Regula machetei aseaza imaginea la `top: -82px; left: -650px` si
   `1388x1133`, fiindca acolo desenul era o bucata dintr-o poza a paginii
   intregi. Al nostru e chiar desenul (1426x1103), deci umple fereastra;
   cu decalajele vechi ar fi iesit din ea si s-ar fi vazut un colt. */
.hero-art img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* CONTAIN, nu COVER: raportul desenului (1,293) e cu o idee mai lat
     decat fereastra (1,286), deci `cover` taia 2 px de fiecare parte —
     iar acolo, in coltul din dreapta jos, sta chiar fraza scrisa de mana.
     Cu `contain` nu se taie nimic; raman 3 px de aer la baza. */
  object-fit: contain;
  object-position: center;
  /* ...si `transform: none`, altfel raman decalajele de pe ecran ingust:
     macheta muta desenul cu `translateX(-70%)` la <=820px si -56% la
     <=520px, tot ca sa decupeze din captura. Cu desenul adevarat, care
     intra intreg, mutarea lasa la vedere doar coltul din dreapta —
     vazut de medic pe telefon. */
  transform: none;
}

/* STINGEREA DIN DREAPTA, mult mai scurta decat a machetei.
   Acolo desenul era un decupaj dintr-o captura si se termina cu o muchie
   dreapta, care avea nevoie de o stingere lunga (de la 82%) ca sa se
   piarda in pagina. Desenul nostru are fundalul lui deschis, deci muchia
   nu se vede — iar stingerea lunga inghitea ultimele litere din
   „Pentru evaluari corecte. Pentru oameni." (masurat pe randare). */
.hero-art {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 96%, transparent 100%);
}

/* SIGLA UMPLE CASETA marcii, ca in macheta.
   Acolo sigla era tot un decupaj din captura si acoperea caseta intreaga
   (57x62); regula pentru un fisier ADEVARAT (`.brand-mark-original`) o
   trage la 3 px de margine, iar `<img>`-ul nostru n-avea deloc clasa —
   se randa la 44x44, cu un sfert mai mic decat in macheta. Masurat, si
   vazut de medic. Sigla noastra e patrata (916x920) si are marginile ei
   in desen, deci nu-i trebuie inca 3 px de aer. */
.brand-mark-original {
  inset: 0;
  width: 100%;
  height: 100%;
  background: none;
}

/* NICIO LEGATURA SUBLINIATA.
   Sublinierea vine chiar din macheta
   (`.footer-legal-band .footer-legal a`), doar ca pagina ei nu are nicio
   legatura acolo — masurat: 0 subliniate din 32. La noi subsolul trimite
   la Monitorul Oficial, deci regula se vedea. Selectorul e scris la fel
   de adanc ca al ei; mai scurt, pierdea la specificitate (masurat).
   Semnul ca legatura duce afara e pictograma, nu linia. */
.footer-legal-band .footer-legal a,
.footer-legal-band .footer-legal a:hover,
.footer-legal a,
.footer-legal a:hover,
.footer-external-link,
.footer-external-link:hover {
  text-decoration: none;
}

/* ======================================================================
   PODUL DE STIL — paginile noastre, in infatisarea machetei.

   Paginile de temei (Termeni, Confidentialitate, Accesibilitate, Contact,
   Despre) isi pastreaza TEXTUL si structura lor; aici primesc suprafata
   noua. Declaratiile sunt copiate din regulile machetei — `.legal-card`,
   `.legal-toc`, `.legal-callout` — ca sa nu se nasca o a treia forma.
   ====================================================================== */

/* CARDUL — clasa de suprafata a intregii aplicatii (86 de folosiri in 46
   de vederi) — capata suprafata machetei (`.legal-card`). Asa primesc
   TOATE paginile stilul nou deodata, fara ca vreun text sa fie atins. */
.card,
.pagina-text .card {
  border: 1px solid rgba(181, 205, 231, 0.96);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 #fff, 0 18px 44px rgba(40, 75, 120, 0.1);
  backdrop-filter: blur(21px) saturate(142%);
  -webkit-backdrop-filter: blur(21px) saturate(142%);
  padding: 28px 30px;
  scroll-margin-top: 28px;
}

/* CUPRINSUL lateral = `.legal-toc` (numai acolo unde chiar sta lateral,
   adica de la 1300 px in sus; sub el ramane banda de pastile a casei) */
@media (min-width: 1300px) {
  .pagina-cuprins {
    padding: 20px;
    border: 1px solid rgba(181, 205, 231, 0.96);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: inset 0 1px 0 #fff, 0 16px 38px rgba(40, 75, 120, 0.1);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
  }
}

/* NOTA de atentie = `.legal-callout` */
.nota-atentie {
  border: 1px solid rgba(111, 86, 219, 0.18);
  border-radius: 15px;
  background: linear-gradient(110deg, rgba(239, 236, 255, 0.86), rgba(231, 247, 255, 0.78));
  padding: 16px 17px;
  margin: 18px 0;
}

/* Contrastul ridicat din panoul de accesibilitate stie de `.legal-card`;
   cardurile noastre intra in aceeasi regula, altfel ar ramane pe dinafara
   tocmai la omul care a cerut contrast. */
html.a11y-contrast .card,
html.a11y-contrast .pagina-cuprins {
  border-color: #1b2a44;
  background: #fff;
}

/* SEMNUL BUTONULUI DE ACCESIBILITATE, cat il face macheta.
   Ea ii da glifei `font-size: 27px` intr-un buton de 52 — adica 52% din
   el. Desenul nostru se randa la 17 px (32%), fiindca lua marimea
   obisnuita a familiei. Masurat pe randare, nu ales din ochi. */
.a11y-trigger .ico {
  width: 27px;
  height: 27px;
}

/* NICIO LEGATURA SUBLINIATA, IN TOATA PLATFORMA.
   Macheta n-are niciuna — masurat: 0 din 32. Foaia veche subliniaza in
   opt locuri (`a:hover`, notele, subsolul, cota calculului, „inapoi").
   Aici se sting toate deodata, in ambele stari.

   Optiunea „Evidentiaza legaturile" din panoul de accesibilitate ramane
   si castiga: regula ei are `!important` si e scrisa mai sus, deci cine
   o cere primeste sublinierea inapoi — chiar pentru asta exista. */
a,
a:hover,
a:focus,
.nota a,
.nota a:hover {
  text-decoration: none;
}

/* STAREA GOALA a unei liste. Macheta n-are asa ceva — listele ei sunt
   mereu pline — deci regula e a casei, in aceeasi familie cu cardurile. */
.catalog-empty {
  margin: 0;
  padding: 22px 24px;
  border: 1px dashed rgba(181, 205, 231, 0.96);
  border-radius: 16px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.6);
}

/* SUBTITLUL UNEI SECTIUNI si nota lui — pe pagina „Despre", deasupra
   cardurilor de interpretare. Macheta n-are treapta asta, deci regula e
   a casei, in scara ei de marimi. */
.about-subtitlu {
  margin: 4px 0 6px;
  font-size: 1.05rem;
}

.about-subtitlu-nota {
  margin: 0 0 16px;
  color: #64748b;
  font-size: .92rem;
}

/* =====================================================================
   CATALOGUL REGULILOR (§338, 13.09.2026) — documentul medicului pe
   „Despre platformă", în ordinea și cu câmpurile docx-ului.

   Tentele categoriilor sunt MĂSURATE, codul pe placheta lui / pe alb:
   G 6,14 / 6,92 · S 7,25 / 8,41 · R 5,31 / 6,03 · D 6,18 / 6,77 ·
   N 6,96 / 7,68. Corpul textului 8,91, textul stins 5,37, eticheta
   câmpului pe fundalul ei 5,86.
   ===================================================================== */
.catalog-tenta-lege {
  --catalog-tenta: #155f8a;
  --catalog-tenta-palid: #e8f3fa;
}

.catalog-tenta-anexa {
  --catalog-tenta: #4f33b8;
  --catalog-tenta-palid: #efecff;
}

.catalog-tenta-recomandare {
  --catalog-tenta: #0b6f66;
  --catalog-tenta-palid: #e0f5ef;
}

.catalog-tenta-deductie {
  --catalog-tenta: #b8003b;
  --catalog-tenta-palid: #fff1f5;
}

.catalog-tenta-neclar {
  --catalog-tenta: #9a2c00;
  --catalog-tenta-palid: #fdf3dd;
}

.catalog-reguli .about-section-head h2 {
  text-wrap: balance;
}

.catalog-subtitlu {
  margin: -8px 0 18px;
  color: #3b4a66;
  font-size: 15px;
  font-weight: 650;
}

.catalog-subtitlu span {
  display: inline-block;
  margin-left: 8px;
  color: #5d6b85;
  font-size: 12px;
  font-weight: 600;
}

/* Trei paragrafe pe trei coloane: pe o singură coloană de 78ch, jumătatea
   dreaptă a panoului rămânea goală (măsurat la 1280 px: panoul are 1189). */
.catalog-intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px 26px;
  margin-bottom: 22px;
}

.catalog-intro p,
.catalog-grupa__intro {
  margin: 0;
  color: #3b4a66;
  font-size: 14px;
  line-height: 1.7;
}

.catalog-sinteza {
  margin-bottom: 10px;
}

.catalog-sinteza__tabel tbody th {
  width: 72px;
}

.catalog-sinteza__tabel thead th:last-child,
.catalog-sinteza__numar {
  width: 90px;
  text-align: right;
}

.catalog-sinteza__numar {
  color: #283f67;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.catalog-sinteza__legatura {
  color: #283f67;
  font-weight: 650;
  text-decoration: none;
}

.catalog-sinteza__legatura:hover,
.catalog-sinteza__legatura:focus-visible {
  text-decoration: underline;
}

.catalog-cod {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border-radius: 9px;
  color: var(--catalog-tenta, #283f67);
  background: var(--catalog-tenta-palid, #eef3f9);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.catalog-sinteza__tabel .catalog-cod {
  text-decoration: none;
}

.catalog-sinteza__tabel .catalog-cod:hover,
.catalog-sinteza__tabel .catalog-cod:focus-visible {
  text-decoration: underline;
}

.catalog-nota {
  max-width: 78ch;
  margin: 0 0 22px;
  color: #5d6b85;
  font-size: 12.5px;
  line-height: 1.6;
}

.catalog-bara {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 6px;
  padding: 12px 14px;
  border: 1px solid rgba(205, 219, 235, 0.84);
  border-radius: 13px;
  background: rgba(245, 248, 252, 0.8);
}

.catalog-bara p {
  margin: 0;
  color: #52617d;
  font-size: 13px;
}

.catalog-comutator {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid #cfd7e4;
  border-radius: 999px;
  color: #283f67;
  background: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.catalog-comutator:hover {
  border-color: #9fb3cf;
}

.catalog-comutator:focus-visible {
  outline: 3px solid rgba(31, 114, 235, 0.3);
  outline-offset: 2px;
}

.catalog-grupa {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(214, 225, 238, 0.82);
}

.catalog-grupa__cap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.catalog-grupa__cap h3,
.catalog-anexa h3 {
  margin: 0;
  color: #16213a;
  font-size: 20px;
  line-height: 1.3;
  text-wrap: balance;
}

.catalog-grupa__numar {
  color: #5d6b85;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.catalog-grupa__intro {
  max-width: 78ch;
  margin-bottom: 14px;
}

.catalog-pozitii {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-pozitie {
  scroll-margin-top: 110px;
}

.catalog-detalii {
  border: 1px solid rgba(214, 225, 238, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.catalog-detalii[open] {
  border-color: #c9d6e6;
  background: #ffffff;
}

.catalog-detalii > summary {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto 18px;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-radius: 12px;
  color: #16213a;
  cursor: pointer;
  list-style: none;
}

.catalog-detalii > summary::-webkit-details-marker {
  display: none;
}

.catalog-detalii > summary::after {
  content: '';
  grid-column: 4;
  justify-self: center;
  width: 8px;
  height: 8px;
  border-right: 2px solid #7a89a3;
  border-bottom: 2px solid #7a89a3;
  transform: rotate(-45deg);
  transition: transform 160ms ease;
}

.catalog-detalii[open] > summary::after {
  transform: rotate(45deg);
}

.catalog-detalii > summary:hover {
  background: #f2f7ff;
}

.catalog-detalii > summary:focus-visible {
  outline: 3px solid rgba(31, 114, 235, 0.3);
  outline-offset: 2px;
}

.catalog-pozitie__cod {
  grid-column: 1;
  color: var(--catalog-tenta, #283f67);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.catalog-pozitie__titlu {
  grid-column: 2;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.45;
}

.catalog-suplimentara {
  grid-column: 3;
  padding: 3px 8px;
  border: 1px solid #fbd5e0;
  border-radius: 999px;
  color: #b8003b;
  background: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Poziția deschisă: textul la stânga, „Aplicare și limite" și temeiul la
   dreapta, tabelul (S26) pe toată lățimea. Textul pornește sub titlu:
   14 px padding + 52 px cod + 12 px spațiu = 78 px. */
.catalog-pozitie__corp {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 12px 26px;
  align-items: start;
  padding: 2px 16px 16px 78px;
}

.catalog-pozitie__text {
  display: grid;
  gap: 10px;
}

.catalog-pozitie__corp p {
  margin: 0;
  color: #3b4a66;
  font-size: 14px;
  line-height: 1.7;
}

.catalog-campuri {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
}

.catalog-campuri > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f5f8fc;
}

.catalog-campuri dt {
  padding-top: 2px;
  color: #52617d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.catalog-campuri dd {
  margin: 0;
  color: #3b4a66;
  font-size: 13.5px;
  line-height: 1.6;
}

.catalog-trimitere {
  color: var(--catalog-tenta, #155f8a);
  font-weight: 700;
}

.catalog-tabel {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.catalog-tabel .about-table tbody th {
  width: auto;
}

.catalog-tabel td:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.catalog-anexa {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(214, 225, 238, 0.82);
}

.catalog-anexa h3 {
  margin-bottom: 12px;
}

.catalog-corespondenta tbody th {
  width: 280px;
}

.catalog-temeiuri {
  display: grid;
  gap: 8px;
  max-width: 84ch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-temeiuri li {
  color: #3b4a66;
  font-size: 13.5px;
  line-height: 1.6;
}

.catalog-temeiuri strong {
  display: inline-block;
  min-width: 46px;
  color: #283f67;
  font-variant-numeric: tabular-nums;
}

.catalog-temeiuri .catalog-temeiuri__nota {
  margin: 6px 0 2px;
  color: #5d6b85;
  font-style: italic;
}

@media (max-width: 820px) {
  .catalog-detalii > summary {
    grid-template-columns: 44px minmax(0, 1fr) 18px;
  }

  .catalog-detalii > summary::after {
    grid-column: 3;
    grid-row: 1;
  }

  .catalog-suplimentara {
    grid-column: 2;
    justify-self: start;
  }

  .catalog-pozitie__corp {
    grid-template-columns: 1fr;
    padding: 2px 14px 14px;
  }

  .catalog-corespondenta tbody th {
    width: auto;
  }

  .catalog-grupa__cap {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .catalog-grupa__numar {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-detalii > summary::after {
    transition: none;
  }
}

@media print {
  .catalog-bara,
  .catalog-detalii > summary::after {
    display: none;
  }
}

/* =====================================================================
   „TEXTUL NU SE POATE TRIMITE LA ANALIZĂ" (§338) — cardul de pe pagina de
   citire, când textul lipit e stricat. Măsurat pe fundalul lui: eticheta
   6,36, titlul 14,97, textul 7,21; exemplele 7,59; „Ce faci" 9,16 cu
   eticheta 5,99; semnul de alertă, ca obiect grafic, 6,17.
   ===================================================================== */
.verificare-text {
  margin: 20px 0;
  padding: 22px 24px;
  border: 1px solid #e9c9ad;
  border-radius: 18px;
  background: #fff6ec;
  box-shadow: 0 10px 30px rgba(168, 48, 0, 0.08);
}

.verificare-text:focus {
  outline: none;
}

.verificare-text:focus-visible {
  outline: 3px solid rgba(168, 48, 0, 0.35);
  outline-offset: 3px;
}

.verificare-text__cap {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.verificare-text__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: #a83000;
  background: #fdf3dd;
  font-size: 22px;
}

.verificare-text__ico .ico {
  width: 22px;
  height: 22px;
}

.verificare-text__eticheta {
  margin: 0 0 4px;
  color: #a83000;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.verificare-text h2 {
  margin: 0;
  color: #16213a;
  font-size: 22px;
  line-height: 1.3;
  text-wrap: balance;
}

.verificare-text__lead {
  margin: 6px 0 0;
  color: #46536e;
  font-size: 14px;
  line-height: 1.6;
}

.verificare-text__probleme {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.verificare-text__problema {
  padding: 14px 16px;
  border: 1px solid #f0dcc8;
  border-radius: 13px;
  background: #ffffff;
}

.verificare-text__problema h3 {
  margin: 0 0 4px;
  color: #16213a;
  font-size: 16px;
}

.verificare-text__problema p {
  margin: 0;
  color: #46536e;
  font-size: 14px;
  line-height: 1.6;
}

.verificare-text__problema .verificare-text__exemple {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.verificare-text__exemple span {
  font-size: 12.5px;
  font-weight: 700;
}

.verificare-text__exemple code {
  padding: 2px 8px;
  border-radius: 7px;
  color: #9f0034;
  background: #fff1f5;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
}

.verificare-text__problema .verificare-text__ce-faci {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #1f4a37;
  background: #edf7f1;
}

.verificare-text__ce-faci strong {
  color: #0f6b41;
}

.verificare-text__final {
  margin: 14px 0 0;
  color: #46536e;
  font-size: 13.5px;
}

@media (max-width: 520px) {
  .verificare-text {
    padding: 18px 16px;
  }

  .verificare-text__cap {
    grid-template-columns: 1fr;
  }
}

/* PASTILA DE CAUTARE A CALCULATORULUI — asezarea o face MACHETA.
   Regula ei, `.calculator-search > div`, e o grila de trei coloane
   (iconita 23px · campul 1fr · butonul auto) si se potriveste deja peste
   invelisul nostru. O stricau regulile vechi din foaia veche: invelisul
   `position: relative`, iconita asezata ABSOLUT peste camp, si campul cu
   `width: 100%` — de aceea butonul ramanea singur pe rand si se intindea
   pe toata latimea (masurat: 472 px in loc de ~92). Se desfac doar ele. */
.calculator-search .calc-cauta-camp {
  position: static;
}

.calculator-search .calc-cauta-camp .ico {
  position: static;
  transform: none;
  width: 23px;
  height: 23px;
}

.calculator-search .calc-cauta-camp input {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.calculator-search .calc-cauta-camp input:focus-visible {
  outline: 0;
}

/* FRAZA EXPLICATIVA DIN ANTETUL PANOULUI ramane frază, nu supratitlu.
   Regula machetei (`.calculator-panel__header p`) e scrisa pentru
   SUPRATITLU — 12 px, greutate 800 — si prindea si fraza noastra de sub
   titlu, care iesea ca o a doua eticheta ingrosata. Supratitlul e `p`-ul
   FARA clasa; al nostru poarta `.stins`, deci se deosebesc. */
.calculator-panel__header .calc-cap-text p.stins {
  margin: 4px 0 0;
  color: var(--text-stins, #64748b);
  font-size: .82rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* JGHEABUL SE DA O SINGURA DATA — de clasa de pagina, ca in macheta.
   Invelisul nostru (`.invelis`) isi are propriul `max-width` si propriul
   `padding`; peste jgheabul clasei de pagina ele adaugau inca unul, iar
   continutul iesea cu 36 px mai inauntru si cu 74 px mai ingust decat bara
   si subsolul. Masurat la 1440: bara 47/1332, noi 93/1238, macheta 57/1312. */
/* Golul de la coada paginii de lucru se dadea tot aici, anuland
   `--gol-final` al invelisului. De la §176 calculatorul nu mai are
   inveliș: ritmul lui de jos e scris acolo, pe `.calcul-page`. */
.resource-page > .invelis,
.about-page > .invelis,
.legal-page > .invelis,
.contact-page > .invelis,
.guide-page > .invelis,
.document-analysis-page > .invelis,
.document-analysis-page > .invelis-citire {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  /* SI GOLUL DE SUS, semnalat de medic („distanta margini de sus").
     Peste jgheabul de sus al clasei de pagina venea si al invelisului:
     masurat la 1440 px, de la bara pana la primul card ieseau 43 px in
     plus pe termeni, confidentialitate, accesibilitate, contact si ghid,
     si 28 pe citirea textului. Paginile despre/barem/calcul/experti/
     intrebari erau deja bune — acolo invelisul n-are jgheab de sus. */
  padding-top: 0;
}

/* COLOANA DE CITIT NU STRANGE ARANJAMENTUL MACHETEI.
   Paginile noastre de temei au o coloana de citit de 760 px
   (`.pagina-text > * { max-width: … }`, §143) — buna cand textul curge
   singur pe pagina. Macheta le da alt aranjament: cuprins de 268 px plus
   continut, adica 1264 in total, cu coloana de citit chiar in el (972).
   Masurat: fara regula asta, aranjamentul iesea 760 in loc de 1264. */
.legal-page .legal-hero,
.legal-page .legal-layout,
.contact-page .contact-hero,
.contact-page .contact-main-grid,
.contact-page .contact-purpose-grid,
.contact-page .contact-warning,
.contact-page .nota {
  max-width: none;
}

/* GOLUL DE DEASUPRA SUBSOLULUI, strans (cerut de medic, de mai multe ori).
   Macheta lasa 108 px pe paginile de temei (84 din pagina + 24 din subsol)
   si 24 pe celelalte — masurat pe amandoua. Aici jumatatea de sus scade,
   ca subsolul sa vina mai aproape de ultimul card. */
.legal-page,
.contact-page {
  padding-bottom: 28px;
}

/* ...si pagina de lucru: acolo golul venea din `--gol-final` al invelisului,
   care e ADANC in pagina, nu copil direct — de aceea regula de mai sus nu-l
   prindea (masurat: 24 px la calcul fata de 2 la barem). */
/* DISTANTA DINTRE CARDURI pe paginile de temei (semnalata de medic).
   In macheta, `.legal-content` e o grila cu gap 18 si cardurile n-au
   margine proprie. La noi cardurile poarta `margin-bottom: 24px` din
   foaia veche, care se ADUNA la gap: masurat, 42 px in loc de 18, iar
   acolo unde intre carduri mai cade ceva, 64 in loc de 40. Golul dintre
   ele il da grila, nu cardul. */
.legal-content > .card {
  margin-bottom: 0;
}

/* PLACUTELE DESENELOR pe pagina de citire. Macheta le da prin selectorul
   `.material-symbols-outlined` — fontul Google,
/* PLACUTELE DESENELOR pe pagina de citire. Macheta le da prin selectorul
   `.ico` — fontul Google,
pe care nu-l aducem (§55:
   desenele si literele sunt LOCALE). Desenele noastre sunt `<svg class="ico">`,
deci regulile ei nu-i ating: masurat,
ieseau 20x20 fara placuta,
acolo unde
   macheta are 34-43 px cu fundal si colt rotunjit.
   Placuta se face cu `padding` + `box-sizing`,
nu cu `place-items`: la un SVG,
latimea data din CSS e chiar panza — fara padding,
desenul s-ar intinde pe
   toata placuta. Valorile sunt CHIAR ale machetei. */
.document-action-panel__top > .ico {
  width: 43px;
  height: 43px;
  padding: 11px;
  box-sizing: border-box;
  border-radius: 13px;
  color: #6040d4;
  background: rgba(99, 62, 216, 0.1);
}

.document-secondary-action > .ico {
  width: 35px;
  height: 35px;
  padding: 9px;
  box-sizing: border-box;
  border-radius: 10px;
  color: #5a3bd1;
  background: rgba(91, 59, 209, 0.08);
}

.document-privacy-note > .ico {
  width: 34px;
  height: 34px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 10px;
  color: #15926f;
  background: rgba(26, 163, 126, 0.09);
}

.document-safety-strip article > .ico {
  width: 40px;
  height: 40px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 12px;
  color: #5e3dd4;
  background: rgba(94, 61, 212, 0.08);
}

.document-expert-note > .ico {
  width: 42px;
  height: 42px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 12px;
  color: #159171;
  background: rgba(20, 157, 118, 0.09);
}

.document-expert-note a .ico {
  width: 16px;
  height: 16px;
}

/* Cutia de asteptare are si ea o placuta, tot pe `.ico`
   in macheta (`> div:first-child > …`). */
.document-analysis-progress > div:first-child > .ico {
  width: 40px;
  height: 40px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 12px;
  color: #92e7ff;
  background: rgba(255, 255, 255, 0.08);
}

/* GHIDUL ARE ARANJAMENTUL LUI, nu coloana de citit a paginilor de temei.
   `.pagina-text:has(> .pagina-cuprins)` face din pagina o grila de doua
   coloane (cuprins 340 + coloana 760, §143) — buna acolo unde textul curge
   singur. Macheta ghidului are altceva: antet lat, cuprins pe toata latimea,
   apoi `guide-layout` cu sina si continutul lui. Masurat fara regula asta:
   antetul iesea 760@457 in loc de 1194@116, iar cuprinsul 248 in loc de 1194.
   Se stinge grila si plafonul, iar cuprinsul iese din stanga lipicioasa. */
.guide-page .pagina-text {
  display: block;
}

.guide-page .pagina-text > * {
  max-width: none;
  margin-inline: 0;
}

/* Cuprinsul ghidului e o BANDA, nu panoul lateral al paginilor de temei.
   Podul de stil (§155) da `.pagina-cuprins` suprafata lui `legal-toc`,
   cu `padding: 20px` — si o da dintr-un `@media`, adica mai greu decat
   `.guide-toc` al machetei. Masurat: banda iesea inalta de 87 px in loc
   de 60, si cu 22 px de gol in plus deasupra. Aici se pun CHIAR cifrele
   machetei. */
.guide-page .pagina-text > .pagina-cuprins {
  position: static;
  width: auto;
  max-height: none;
  margin: 18px 0 0;
  padding: 10px;
}

/* CAPTURILE GHIDULUI SUNT ADEVARATE, nu ilustratii. In macheta, rama
   `.guide-shot` tine imaginea la `min(83%, 315px)` si 270 px inaltime —
   buna pentru desenul de umplutura pe care il avea acolo („Imagine
   temporara"). Ale noastre sunt ecrane reale, facute anume ca omul sa
   vada platforma (§142): la 315 px, un ecran de 1200 iese la un sfert si
   nu se mai citeste nimic din el. Rama ramane a machetei; imaginea o umple
   si-si tine proportia. */
/* CAPTURILE TREBUIE SA SE VADA (medicul, 07.09.2026). In macheta, pasul e
   pe doua coloane si rama capturii tine imaginea la `min(83%, 315px)` cu 270
   px inaltime — buna pentru desenul de umplutura pe care il avea acolo
   („Imagine temporara"). Ale noastre sunt ECRANE REALE, facute anume ca omul
   sa vada platforma (§142): la 315 px, un ecran de 1200 iese la un sfert si
   nu se mai citeste nimic din el.

   Deci pasul se aseaza pe UN SINGUR RAND — textul deasupra, captura dedesubt,
   pe toata latimea continutului (946 px la 1440). Rama, culorile si chenarul
   raman ale machetei; se pierde alternanta stanga/dreapta, si e schimbul
   asumat: o captura care nu se citeste nu e o captura, e un ornament. */
.guide-page .guide-step {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.guide-page .guide-shot {
  display: block;
  min-height: 0;
  padding: 13px;
}

.guide-page .guide-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Explicatia iese DE SUB imagine, nu peste ea: in macheta sta suprapusa in
   coltul de jos, unde ar fi acoperit tocmai partea de jos a ecranului real. */
.guide-page .guide-shot figcaption {
  position: static;
  margin-top: 11px;
}

.guide-page .guide-report-preview img {
  width: calc(100% - 26px);
  height: auto;
}

/* JGHEABUL ECRANULUI DE LUCRU. `panou.css` se incarca DUPA `nou.css` (coaja
   are nevoie de el pentru bara laterala), deci `.p-continut { padding: 24px
   28px 40px }` bate `.dashboard-main` al machetei — aceeasi specificitate,
   foaia de dupa castiga. Masurat la 1440 px: continutul iesea la 302 in loc
   de 319. Se cere elementul, ca sa cantareasca mai mult; valorile sunt chiar
   ale machetei. */
main.dashboard-main {
  padding: 30px clamp(22px, 3vw, 46px) 38px;
}

/* ECRANELE DE CONT, in limbajul dashboardului (§157). Macheta n-are pagini
   de „fisele mele" / „credite" / „facturi", dar are chiar tabelul lor pe
   dashboard. Aici se adauga numai ce paginile astea au si dashboardul nu:
   un `h1` in antetul sectiunii, cautarea, paginarea si un rand de actiuni
   cu butoane late. */
/* Titlurile sectiunilor din ecranele de cont. Selectorul cere si
   `.dashboard-main`: `panou.css` se incarca DUPA `nou.css` si are
   `.p-continut h1/h2` cu aceeasi specificitate — masurat, titlul iesea
   22 px in loc de 30. */
.dashboard-main .dashboard-reports__header h1,
.dashboard-main .dashboard-reports__header h2,
.dashboard-main .dashboard-section-heading h1,
.dashboard-main .dashboard-section-heading h2 {
  margin: 0;
  color: #122248;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.1vw, 31px);
  font-weight: 400;
  line-height: 1.08;
}

/* Desenele noastre, acolo unde macheta coloreaza `.ico`. */
.dashboard-reports__foot .ico {
  width: 15px;
  height: 15px;
  color: #159878;
}

.dashboard-section-note .ico {
  width: 15px;
  height: 15px;
}

.panou-cauta {
  margin: 18px 25px 4px;
}

.panou-cauta-toate {
  margin: 10px 25px 0;
}

.panou-paginare {
  padding: 4px 25px 18px;
}

/* Randul de actiuni cu BUTOANE (nu doar cu desene): cel al machetei e facut
   pentru doua iconite de 34 px si le-ar fi strans. */
.dashboard-row-actions--lat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.dashboard-row-actions--lat form {
  margin: 0;
}

/* Desenul din banda cuprinsului: macheta ii da 19 px (font-size pe glifa).
   Al nostru e un SVG cu marimea lui, iar banda iesea 67 px in loc de 60. */
.guide-toc strong .ico {
  width: 19px;
  height: 19px;
  color: #5e3bd9;
}

/* ...si `legal-toc` ii da lui `strong` o marja de jos de 7 px (acolo,
   cuprinsul e o COLOANA, deci marja separa antetul de legaturi). In
   banda ghidului, randul e orizontal: marja aceea inalta banda de la 60
   la 67 px si impingea legaturile cu 4 px sub antet — masurat. */
.guide-toc strong {
  margin-bottom: 0;
}

/* Corpul unei sectiuni de cont (text si formulare), pe jgheabul antetului
   ei — macheta n-are asa ceva pe dashboard, unde sub antet vine direct
   tabelul. */
.panou-corp {
  padding: 18px 25px 22px;
}

.panou-corp > p {
  margin: 0 0 12px;
}

.panou-rand {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin: 0;
}

.panou-rand .form-group {
  margin: 0;
}

.panou-rand__larg {
  flex: 1 1 220px;
}

/* Semnul miscarii de credite: verde in plus, rosu in minus. Culorile sunt
   ale casei, nu inventate aici. */
.panou-plus {
  color: var(--bine);
}

.panou-minus {
  color: var(--rau);
}

/* POD DE STIL pentru ecranele de cont care inca poarta cardurile vechi
   (Setari cont, Ajutor). Declaratiile sunt copiate din `.dashboard-reports`
   si `.dashboard-reports__header` — ca sa nu se nasca o a treia forma —, iar
   marcajul paginilor nu se atinge. Cand vor fi rescrise pe sectiuni, podul
   se scoate. */
.dashboard-main .card,
.dashboard-main .p-card {
  margin: 0 0 18px;
  padding: 0;
  border: 1px solid rgba(191, 211, 234, 0.86);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 44px rgba(30, 56, 96, 0.08), inset 0 1px 0 #fff;
}

.dashboard-main .card > *:not(.card-cap):not(.p-card-cap),
.dashboard-main .p-card > *:not(.card-cap):not(.p-card-cap) {
  margin-left: 25px;
  margin-right: 25px;
}

.dashboard-main .card > *:last-child,
.dashboard-main .p-card > *:last-child {
  margin-bottom: 22px;
}

.dashboard-main .card-cap,
.dashboard-main .p-card-cap {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 18px;
  padding: 24px 25px 20px;
  border-bottom: 1px solid rgba(191, 211, 234, 0.72);
}

.dashboard-main .card-cap h1,
.dashboard-main .card-cap h2,
.dashboard-main .p-card-cap h1,
.dashboard-main .p-card-cap h2 {
  margin: 0;
  color: #122248;
  font-family: var(--font-serif);
  font-size: clamp(22px, 1.9vw, 27px);
  font-weight: 400;
  line-height: 1.1;
}

/* Titlul paginilor de cont care inca n-au sectiuni proprii (Ajutor, Setari
   cont): aceeasi litera ca titlurile machetei, ca sa nu se citeasca doua
   scari de titlu in acelasi ecran. */
.dashboard-main .p-titlu-rand h1 {
  margin: 0;
  color: #122248;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.1vw, 31px);
  font-weight: 400;
  line-height: 1.08;
}

.dashboard-main .p-titlu-rand {
  margin: 0 0 18px;
}

/* LATIMEA PAGINII DE GHID, aliniata la restul sitului (medicul, de mai multe
   ori: „bara de sus cat are width si cardul cat mai are").
   Macheta o plafoneaza singura la 1250 px (`.guide-page { width: min(100%,
   1250px) }`), deci la 1440 continutul iesea 116@1194 — cel mai retras din
   tot situl: despre/barem/calcul/experti/intrebari stau la 57@1312, iar bara
   si subsolul la 47@1332. Aici se ia jgheabul celorlalte pagini (38 px), ca
   ghidul sa nu fie singura pagina vizibil mai ingusta decat bara.
   Se da inapoi dintr-un rand: plafonul de 1250 e chiar al machetei. */
.guide-page {
  width: 100%;
  padding-right: 38px;
  padding-left: 38px;
}

/* CARCASA DE LUCRU, pe scheletul machetei (§158). Grila veche (`.lucru`)
   rezerva o coloana pentru bara laterala; bara machetei e insa FIXA, iar
   spatiul de lucru isi ia singur marginea din stanga — masurat, continutul
   incepea la 552 in loc de 276, adica bara era numarata de doua ori. */
.lucru.dashboard-shell {
  display: block;
}

/* Deconectarea e la noi un BUTON intr-un formular (POST cu jeton — un `<a>`
   ar putea fi declansat de o cerere straina), pe cand macheta are o legatura.
   Un buton nu se intinde singur: masurat, iesea 127 px in loc de 239. */
.dashboard-sidebar__foot form {
  margin: 0;
}

.dashboard-sidebar__foot button.dashboard-logout {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Ecranele de cont cu DOUA COLOANE (Ajutor). Macheta n-are asa ceva pe
   dashboard — acolo sectiunile curg una sub alta — dar intrebarile si
   formularul se citesc mai bine alaturi. Sub 1150 px se stivuiesc. */
.panou-doua-coloane {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.panou-stiva {
  display: grid;
  gap: 18px;
}

@media (max-width: 1150px) {
  .panou-doua-coloane {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Formularele din corpul unei sectiuni de cont: campurile pe toata latimea,
   cu acelasi aer ca restul corpului. */
.panou-corp .form-group {
  margin: 0 0 12px;
}

.panou-corp .form-group input,
.panou-corp .form-group textarea,
.panou-corp .form-group select {
  width: 100%;
}

/* Butonul care DISTRUGE, in limbajul dashboardului: rosu, ca sa nu se
   citeasca la fel cu „Salveaza". Culorile sunt jetoanele casei. */
.panou-buton-rau {
  color: var(--rau);
  border: 1px solid var(--rau);
  background: transparent;
}

.panou-buton-rau:hover {
  color: #fff;
  background: var(--rau);
}

/* ECRANELE DE CONT (logare, inregistrare, parola uitata). Macheta n-are asa
   ceva, deci se folosesc piesele ei: pastila de deasupra, titlul in doua
   tonuri si panoul `legal-card`. Titlul e mai mic decat al paginilor de temei
   (48-78 px): panoul are 430 px, iar acolo un titlu de 60 s-ar rupe in patru
   randuri. */
.cont-titlu h1 {
  margin: 12px 0 12px;
  color: #122248;
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.cont-titlu h1 span {
  color: var(--purple);
}

.cont-titlu .eyebrow {
  margin-left: 0;
}

.cont-titlu .legal-lead {
  margin: 0 auto;
  font-size: 15px;
}

/* Panoul e mai lat decat cutia veche de 430: campurile machetei au 44 px si
   un jgheab de 30, iar la 430 randul de doua campuri (parola noua / repeta)
   se strange. */
.cont-cutie {
  max-width: 520px;
}

/* Butonul principal al ecranelor de cont se intinde pe toata latimea
   panoului: acolo e o singura actiune, iar un buton ingust langa doua campuri
   late se citeste ca o nota de subsol. */
.cont-buton {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

/* ======================================================================
   §160 — PAGINA DE ACASĂ, a doua trecere (medicul, 07.09.2026).
   ====================================================================== */

/* ---------------------------------------------------------------------
   1. DESENUL EROULUI SE STINGE ȘI ÎN SUS, ȘI LA STÂNGA.

   Cerut: „un efect de transparență la marginea superioară și cea din
   stânga". Până acum se stingea DOAR la dreapta, iar sus desenul se
   termina cu o muchie dreaptă, vizibilă: măsurat chiar în fișier, primii
   **64 px din 1103** sunt o bandă albastru-cenușie continuă, pe toată
   lățimea (#adc5da…#b0c7e6). Ea desena linia orizontală de sub bară.
   La stânga muchia e mai blândă (coloana x=0 e albă), dar petele palide
   (#f5f9fc) ating marginea și lasă tot o linie dreaptă.

   Cele trei stingeri se compun cu `mask-composite`: fiecare strat taie
   din ce a rămas. Unde `mask-composite` nu se poate, rămâne prima
   stingere — adică exact purtarea de până acum, nu o pagină stricată.
   --------------------------------------------------------------------- */
.hero-art {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ---------------------------------------------------------------------
   2. BANDA PREȚURILOR N-ARE LINIE DEASUPRA.

   Cerut: „bara superioară de «Simplu și transparent», să fie fără
   border". Era `border-top: 1px solid rgba(205,220,239,.72)` — o linie
   pe toată lățimea, chiar deasupra pastilei. Fundalul benzii (#fbfdff)
   o deosebește oricum de pagina de deasupra. Linia de JOS rămâne: acolo
   banda se schimbă în alta.
   --------------------------------------------------------------------- */
.pricing-section {
  border-top: 0;
}

/* ---------------------------------------------------------------------
   3. RITMUL PAGINII — un singur număr pentru golul dintre carduri.

   Cerut: „vreau o distanță constantă între toate cardurile… stabilește o
   regulă, 40px". Până acum fiecare gol venea din alt loc. Măsurat pe
   randare, la 1440 px, de la conținut la conținut:

       erou → moduri ......  21 px
       moduri → garanții ..  20
       garanții → prețuri .  54
       prețuri → profesii .. 114
       profesii → încredere  112
       încredere → rezultat  167   ← chiar cel arătat: „Clar de la prima vedere"
       rezultat → subsol ... 145

   REGULA: între conținutul a două secțiuni vecine stă exact un ritm.
   Benzile colorate se ating între ele (cutiile lor n-au gol), deci
   fiecare pune JUMĂTATE de ritm de fiecare parte; unde nu e bandă,
   secțiunea pune ritmul întreg.

   Se dau NUMAI căptușelile pe verticală: cele orizontale se schimbă pe
   ecran îngust și rămân ale machetei.
   --------------------------------------------------------------------- */
:root {
  --ritm: 40px;
  --ritm-jumate: calc(var(--ritm) / 2);
  /* Aerul propriu al subsolului — el e pe TOATE paginile, deci nu se
     atinge; ultima secțiune a paginii adaugă doar restul până la ritm. */
  --subsol-aer: 24px;
}

/* Eroul se încheie la un ritm sub desen. Desenul e așezat absolut
   (`top: -10px`, `height: 574px`), deci se termină la 564 px de creștetul
   eroului — sub atât, `.modes` ar urca peste el (la ≤1080px chiar asta se
   întâmpla: înălțimea minimă era 560, adică 4 px PESTE desen). */
@media (min-width: 821px) {
  .hero {
    min-height: calc(564px + var(--ritm));
  }
}

/* Sub 821px desenul intră în flux, deci golul îl dă chiar eroul — iar
   `.modes` își pierde cei 26px de căptușeală proprie, altfel s-ar aduna
   peste ritm (măsurat la 800px: 66 px în loc de 40). */
@media (max-width: 820px) {
  .hero {
    padding-bottom: var(--ritm);
  }

  .modes {
    padding-top: 0;
  }
}

/* PUNTEA dintre cardurile de sus și banda prețurilor (medicul, 07.09.2026:
   „și aici mai frumos tranziția, parcă icoanele stau pe card").

   Rândul de garanții e o fâșie de trei icoane mici, prinsă între două
   blocuri grele — cardurile albe deasupra, banda colorată dedesubt. La un
   ritm de 40px de fiecare parte, icoanele se citeau ca un subsol al
   cardului de deasupra: n-aveau nicio suprafață a lor.

   Acum fâșia POARTĂ ÎNCEPUTUL BENZII: fundalul crește din nimic până la
   chiar culoarea de sus a benzii (#fbfdff), iar banda continuă de acolo,
   fără treaptă. Golul de deasupra intră în fâșie ca și căptușeală (nu ca
   margine), altfel gradientul ar fi început abia sub el.

   Stingerea se scrie cu ALFA ZERO pe aceeași culoare, nu cu `transparent`:
   `transparent` înseamnă negru transparent, iar interpolarea prin el lasă
   o dungă cenușie la mijloc. */
.assurances {
  margin: 0;
  padding: var(--ritm) 190px 0;
  background: linear-gradient(180deg, rgba(251, 253, 255, 0) 0%, #fbfdff 100%);
}

/* Jgheaburile fâșiei rămân cele ale machetei — erau margini, acum sunt
   căptușeli, ca fundalul să se întindă de la o muchie la alta. */
@media (max-width: 1240px) {
  .assurances { padding-inline: 100px; }
}

@media (max-width: 1080px) {
  .assurances { padding-inline: 38px; }
}

@media (max-width: 820px) {
  .assurances { padding-inline: 30px; }
}

.pricing-section {
  margin-top: 0;
  padding-top: var(--ritm);
  padding-bottom: var(--ritm-jumate);
}

.professional-section {
  padding-top: var(--ritm-jumate);
  padding-bottom: var(--ritm-jumate);
}

.trust-section {
  padding-top: var(--ritm-jumate);
  padding-bottom: var(--ritm-jumate);
}

.result-section {
  padding-top: var(--ritm-jumate);
  padding-bottom: calc(var(--ritm) - var(--subsol-aer));
}

.site-footer {
  padding-top: var(--subsol-aer);
}

/* ---------------------------------------------------------------------
   4. ANIMAȚIILE NU MAI ÎNTÂRZIE.

   Cerut: „animațiile au o întârziere, câteodată întârzie". Două cauze,
   amândouă măsurate în foaia adusă:

   a) FIECARE bloc intra cu `filter: blur(2px)` animat 620 ms, iar desenul
      eroului cu `blur(8px)` pe o imagine de 738×574. Blurul e singura
      proprietate de aici care NU se poate face pe placa video fără
      redesenarea întregii suprafețe, cadru de cadru — de acolo vine
      poticnirea. Opacitatea și mutarea rămân, amândouă ieftine.
   b) 620 ms de tranziție PLUS până la 300 ms de decalaj în trepte
      înseamnă aproape o secundă până se așază un rând de carduri.
      Acum: 380 ms și cel mult 135 ms de decalaj.
   --------------------------------------------------------------------- */
.reveal {
  filter: none;
  transition:
    opacity 380ms cubic-bezier(.22, .8, .25, 1),
    translate 380ms cubic-bezier(.22, .8, .25, 1);
}

/* STAREA DE BAZA E CEA VAZUTA (§173), aceeasi regula ca la bara de sus
   (§170): `.reveal` pornea cu `opacity: 0`, iar vizibilitatea a vreo
   treizeci de blocuri ale sitului atarna de un `is-visible` pus din
   JavaScript. O eroare in `nou.js` inainte de bucla aceea, si pagina
   ramanea alba — fara nicio eroare pe ecran.

   Ascunderea se face acum DOAR daca scriptul chiar a apucat sa spuna ca
   se ocupa el (`html.js-reveal`, pus ca primul lucru al blocului). Fara
   JavaScript, totul e la vedere.

   Iar deplasarea a coborat de la 22 la 10 px: cel mai stramt jgheab
   dintre doua blocuri e de 18, deci 22 il manca intreg. */
.reveal {
  opacity: 1;
  translate: none;
}

html.js-reveal .reveal:not(.is-visible) {
  opacity: 0;
  translate: 0 10px;
}

.reveal.is-visible {
  filter: none;
}

/* Desenul eroului intră din opacitate, nu din blur. */
@keyframes art-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-art {
  animation-duration: 520ms;
  animation-delay: 90ms;
}

.hero-copy {
  animation-duration: 480ms;
  animation-delay: 60ms;
}

.site-header {
  animation-duration: 420ms;
}

/* ======================================================================
   NOTA DESPRE COOKIE-URI (§161).

   E o NOTĂ, nu o poartă: nu acoperă pagina, nu prinde tastatura și nu
   cere nimic. Situl pune doar cookie-uri strict necesare, pentru care
   legea cere informare, nu consimțământ — vezi comentariul componentei.

   Stă în stânga-jos, iar butonul de accesibilitate rămâne în dreapta:
   niciunul nu-l acoperă pe celălalt. `z-index: 90` — peste conținut, sub
   panoul de accesibilitate deschis (970).
   ====================================================================== */
.nota-cookie {
  position: fixed;
  z-index: 90;
  bottom: 22px;
  left: 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: min(560px, calc(100vw - 44px - 74px));
  padding: 16px 18px;
  border: 1px solid rgba(185, 207, 231, 0.96);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 18px 44px rgba(39, 76, 123, 0.18);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  color: var(--navy);
  font-size: 13px;
  line-height: 1.55;
}

/* Ascunsă pentru cine a citit-o. Clasa o pune scriptul din `<head>`,
   înaintea primei randări — altfel nota ar clipi la fiecare încărcare. */
html.cookie-vazut .nota-cookie {
  display: none;
}

.nota-cookie__icon {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: rgba(89, 49, 217, 0.1);
  color: var(--purple);
}

.nota-cookie__icon .ico {
  width: 19px;
  height: 19px;
}

.nota-cookie__text {
  min-width: 0;
  color: var(--muted);
}

.nota-cookie__text strong {
  color: var(--navy);
}

.nota-cookie__text a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.nota-cookie__text a:hover,
.nota-cookie__text a:focus-visible {
  text-decoration: underline;
}

.nota-cookie__buton {
  flex: 0 0 auto;
  align-self: center;
  padding: 9px 16px;
  border: 0;
  border-radius: 11px;
  background: var(--purple);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.nota-cookie__buton:hover {
  background: var(--purple-dark);
}

/* Pe ecran îngust nota se stivuiește și urcă deasupra butonului de
   accesibilitate (52px + 14px de margine), ca să nu se acopere. */
@media (max-width: 620px) {
  .nota-cookie {
    /* URCĂ DEASUPRA butonului de accesibilitate (52px, la 14px de muchie),
       fiindcă pe lat nota ține toată lățimea și l-ar acoperi. Comentariul
       primei forme spunea că urcă, dar regula scria tot `bottom: 14px` —
       măsurat pe randare, cele două cutii se călcau. */
    bottom: 78px;
    left: 14px;
    width: calc(100vw - 28px);
    flex-wrap: wrap;
    padding-bottom: 14px;
  }

  .nota-cookie__buton {
    width: 100%;
    margin-top: 2px;
    padding: 11px 16px;
  }
}

/* ======================================================================
   §162 — RITMUL, dus mai departe pe paginile care stivuiesc blocuri.

   Regula e a lui §160 — între două blocuri vecine stă exact un ritm — dar
   scrisă pe COPIII paginii, nu pe fiecare bloc în parte: un bloc adăugat
   mâine primește ritmul de la sine, fără să umble nimeni prin foaie.

   Măsurat înainte pe `/despre`, de la o muchie la alta: 65 · 30 · 24 · 24 ·
   24 · 24, iar sus, de la bara de meniu la pastilă, 75 px. Șase numere
   pentru același lucru.

   EROUL își dă singur golul de sus (căptușeala lui) și pe cel de jos îl
   lasă vecinului, care oricum pune un ritm — altfel s-ar aduna două.
   ====================================================================== */
.about-page > *,
.resource-page > * {
  margin-bottom: 0;
}

.about-page > * + *,
.resource-page > * + * {
  margin-top: var(--ritm);
}

/* Ultimul bloc adaugă doar cât lipsește până la ritm: aerul propriu al
   subsolului e pe toate paginile și nu se atinge (vezi §160). */
.about-page > :last-child,
.resource-page > :last-child {
  margin-bottom: calc(var(--ritm) - var(--subsol-aer));
}

.about-page > .about-hero,
.resource-page > .resource-hero {
  padding-top: var(--ritm);
  padding-bottom: 0;
}

/* EROUL PAGINII „Despre" NU MAI ARE ÎNĂLȚIME DE REZERVĂ (§162).

   Medicul: „un management mai bun al spațiului de sus și jos [la] cardul
   «Despre platformă»". Măsurat, golul nu venea din căptușeală, ci din
   `min-height: 510px` pusă pe un erou al cărui conținut cel mai înalt are
   **369 px**: cele 141 de px rămași se împărțeau de `align-items: center`
   în 90 sus și 50 jos. Adică aer pe care nu-l cerea nimic.

   Acum înălțimea o dă conținutul, iar cele două coloane pornesc de la
   aceeași linie — ca eroul paginii de acasă. Golul de sus e chiar ritmul
   (căptușeala de la regula de mai sus), cel de jos îl pune vecinul. */
.about-page > .about-hero,
.resource-page > .resource-hero {
  min-height: 0;
  align-items: start;
}

/* CARDUL SURSEI se încheie pe linia casetei de căutare (§162).

   Medicul: „cardul să fie cu marginea inferioară în linie cu bara de
   căutare". Măsurat înainte pe `/barem`: caseta se termină la 377 px de
   creștetul eroului, cardul la 432 — cu 55 mai jos.

   Nu se taie conținut și nu se pune o înălțime fixă: se strânge RITMUL
   dinăuntru, care era generos (21 + 20 + 20 + 15 + 58 de căptușeală).
   Aceleași valori dau și simetria pe care o cerea în același mesaj. */
.resource-hero__card {
  padding-top: 26px;
  /* 18, nu 22: cu 22 cardul se încheia cu 4 px sub casetă — măsurat pe
     randare, nu socotit pe hârtie. */
  padding-bottom: 18px;
}

.resource-hero__card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  font-size: 24px;
}

.resource-hero__card > strong {
  margin-bottom: 6px;
}

.resource-hero__card > p {
  margin-bottom: 13px;
  line-height: 1.5;
}

.resource-hero__card > div {
  padding-top: 12px;
}

/* CARDUL SE ÎNCHEIE PE LINIA CASETEI DE CĂUTARE (§162), pe amândouă
   paginile de resurse — fără niciun număr ghicit.

   Medicul, de două ori: „cardul să fie cu marginea inferioară în linie cu
   bara de căutare". Greu era că rândul de sub casetă („31 de intrări
   disponibile") făcea coloana de text mai lungă decât caseta, iar cardul
   se alinia — dacă se alinia — la el.

   Rezolvarea e STRUCTURALĂ, nu o margine potrivită din ochi: rândul de
   stare a ieșit din coloana de text și a devenit al DOILEA rând al grilei.
   Așa, rândul întâi se încheie chiar cu caseta, iar cardul — întins pe
   toată înălțimea lui — se încheie exact acolo. Merge la orice lățime și
   la orice text, fiindcă nu depinde de nicio măsurătoare. */
.resource-page > .resource-hero {
  grid-template-rows: auto auto;
  /* Jgheabul machetei (58px) e ÎNTRE COLOANE. Lăsat și între rânduri, ar
     fi împins rândul de stare la 68 px sub casetă — măsurat. */
  column-gap: 58px;
  row-gap: 0;
}

.resource-hero > .resource-hero__copy {
  grid-column: 1;
  grid-row: 1;
}

.resource-hero > .search-status {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.resource-hero > .resource-hero__card {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
}

/* Pe ecran îngust eroul e o singură coloană: plasarea se dă la o parte,
   altfel `grid-column: 2` ar naște o a doua coloană acolo unde macheta
   cere una singură. */
@media (max-width: 820px) {
  .resource-hero > .resource-hero__copy,
  .resource-hero > .search-status,
  .resource-hero > .resource-hero__card {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ======================================================================
   §163 — LEZIUNEA SE DESFACE ÎN LISTĂ.

   Medicul: „la cele găsite am un plus, click + și îmi arată leziunile, să
   nu mai fie nevoie de redirecționare, go back".

   E un `<details>` adevărat, nu un panou deschis din JavaScript: merge
   fără JavaScript, se poate tipări deschis și îl știu cititoarele de
   ecran. Rândul rămâne exact cel din machetă (`catalog-row`) — se schimbă
   doar din legătură în deschizător, iar săgeata devine un „+" care se
   întoarce în „×" când e deschis.
   ====================================================================== */
.catalog-acord > summary {
  list-style: none;
  cursor: pointer;
}

.catalog-acord > summary::-webkit-details-marker {
  display: none;
}

.catalog-acord[open] > summary {
  border-bottom-color: transparent;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: rgba(255, 255, 255, 0.86);
}

.catalog-acord__semn {
  transition: transform 200ms cubic-bezier(.22, .8, .25, 1);
}

/* „+" devine „×" — aceeași formă, întoarsă; nu se schimbă desenul. */
.catalog-acord[open] .catalog-acord__semn {
  transform: rotate(45deg);
}

.catalog-acord__corp {
  padding: 4px 14px 16px;
  border: 1px solid rgba(214, 225, 238, 0.82);
  border-top: 0;
  border-radius: 0 0 13px 13px;
  background: rgba(255, 255, 255, 0.86);
}

.catalog-acord__jos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(214, 225, 238, 0.7);
}

.catalog-acord__jos a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.catalog-acord__jos a:hover,
.catalog-acord__jos a:focus-visible {
  text-decoration: underline;
}

.catalog-acord__jos .ico {
  width: 15px;
  height: 15px;
}

/* --- cele trei feluri de punctaj ------------------------------------- */
.lez-fel + .lez-fel {
  margin-top: 18px;
}

.lez-fel__cap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 9px;
}

.lez-fel__cap h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
}

.lez-fel__cap small {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

/* Pastila felului: aceeași formă ca insignele machetei, cu o treaptă de
   gravitate în culoare — leziunea inițială, complicația, consecința
   permanentă. */
.lez-fel__semn {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.05em;
}

/* Culoarea o poartă FELUL, nu pastila: așa clasa compusă are chiar ea o
   regulă (plasa din `StilTest` cere asta — o clasă compusă fără regulă se
   randează transparent, fără niciun mesaj), iar pastila o citește. */
.lez-fel--lt {
  --fel-cerneala: #0a5fa9;
  --fel-fundal: #e4f1ff;
}

.lez-fel--cp {
  /* #a8421f, nu #bb4c2b: acela măsura 4,51 pe fundalul lui — trecea, dar
     pe muchie. Aici e 5,4. */
  --fel-cerneala: #a8421f;
  --fel-fundal: #fff0e6;
}

.lez-fel--cpp {
  --fel-cerneala: #a81252;
  --fel-fundal: #ffe9f1;
}

.lez-fel__semn {
  color: var(--fel-cerneala);
  background: var(--fel-fundal);
}

.lez-tabel th[scope="row"] {
  font-weight: 500;
}

.lez-tabel__motiv {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}

.lez-tabel__puncte {
  width: 108px;
  text-align: right;
  font-weight: 800;
  white-space: nowrap;
}

/* ======================================================================
   §164 — PAGINA ÎNTREBĂRILOR: simetria eroului și nota în carmin.
   ====================================================================== */

/* EROUL, ca la celelalte pagini de resurse (§162): înălțimea o dă
   conținutul, iar cele două coloane pornesc de la aceeași linie. Avea
   `min-height: 455px` și `align-items: center`, deci nota plutea la
   mijlocul dreptei, cu aer nefolosit deasupra și dedesubt. */
.resource-page > .faq-resource-hero {
  min-height: 0;
  align-items: start;
  padding-top: var(--ritm);
  padding-bottom: 0;
}

/* NOTA SE ÎNTOARCE: fundal carmin, literă deschisă (medicul, 07.09.2026:
   „la card să inversăm culorile, un carmin background").

   E fraza care deosebește o estimare de un act medico-legal — singura de
   pe pagină care trebuie citită înainte de orice altceva. Ca pată palidă
   se pierdea lângă titlu; plină, se vede din prima privire. */
.faq-hero-notice {
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(140deg, #a11241, #7d0f3a);
  box-shadow: 0 20px 46px rgba(125, 15, 58, 0.28);
}

.faq-hero-notice > .material-symbols-outlined,
.faq-hero-notice > .ico {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.faq-hero-notice strong {
  color: #fff;
}

.faq-hero-notice p {
  color: rgba(255, 255, 255, 0.88);
}

/* ======================================================================
   §164 — CELE DOUĂ BUTOANE DIN BARĂ, în relief moale (neumorfism).

   Medicul, după prima formă: „altceva, fără bara gri, [să fie] frumos,
   rafinat, în stil neumorfism".

   „Bara gri" era umbra: `0 10px 22px` cu alfa 0,28 sub un buton de 48px
   se citește ca o dungă, nu ca adâncime. REGULA neumorfismului, și e
   chiar ce lipsea: umbrele nu sunt niciodată CENUȘII — sunt din materia
   de dedesubt, întunecată și luminată. Aici bara e aproape albă peste
   `--page` (#f5f9fe), deci umbra e albăstruie, iar lumina e albă curată.

   Perechea: aceeași pastilă, aceeași înălțime, aceeași lumină din
   stânga-sus. Unul iese din materia barei, celălalt din materia mărcii.
   Apăsat, amândouă se ADÂNCESC (umbre `inset`) — în relief, apăsarea nu
   e o coborâre de 2px, e o scobitură.
   ====================================================================== */
.header-button {
  border: 0;
  border-radius: 999px;
  letter-spacing: 0.005em;
  transition: box-shadow 200ms ease, background 200ms ease, transform 200ms ease;
}

/* Ridicarea de 2px a machetei se dă la o parte: în relief, mișcarea o fac
   umbrele. Cu amândouă, butonul „sare" și pierde tocmai moliciunea. */
.header-button:hover {
  transform: none;
}

/* --- din materia barei -----------------------------------------------
   UMBRELE au ieșit de aici la §190: valorile astea sunt chiar jetoanele
   `--neu-*`, iar scrise în două locuri s-ar fi despărțit la prima
   schimbare. Aici rămâne MATERIA — culoarea și umplerea. */
.header-button--outline {
  color: var(--purple-dark);
  background: linear-gradient(145deg, #ffffff, #eef3fa);
}

.header-button--outline:hover {
  background: linear-gradient(145deg, #ffffff, #e9f0f9);
}

.header-button--outline:active {
  background: #eef3fa;
}

/* --- din materia mărcii ----------------------------------------------- */
.header-button--solid {
  color: #fff;
  background: linear-gradient(145deg, #6b41e8, #4f24cd);
}

.header-button--solid:hover {
  background: linear-gradient(145deg, #7449ef, #5528d8);
}

.header-button--solid:active {
  background: linear-gradient(145deg, #5528d8, #6b41e8);
}

.header-button .ico {
  width: 17px;
  height: 17px;
}

/* ======================================================================
   §165 — TABELELE SPECIALE ȘI PREJUDICIUL ESTETIC.

   Sunt pagini de CALCUL, nu de citit: au formular și rezultat. De aceea
   poartă familia calculatorului (`calculator-page`), nu pe cea a
   resurselor.

   `tabel-special` ține stilul câmpurilor DOAR aici. `.rand`, `.alegere` și
   `.pasi` vin din foaia veche și sunt folosite de încă cinci pagini
   nemutate (`/calcul`, cererea de fișă, logarea, gradările din
   administrare); îmbrăcate global, s-ar fi schimbat și acelea, nevăzute.
   ====================================================================== */
/* Ultimul bloc adaugă doar cât lipsește până la ritm: aerul propriu al
   subsolului e pe toate paginile și nu se atinge (§160). Cu un
   `padding-bottom` întreg ieșeau 64, nu 40 — măsurat. */
.tabel-special > :last-child {
  margin-bottom: calc(var(--ritm) - var(--subsol-aer));
}

/* Ritmul paginii, ca la celelalte familii (§162). */
.tabel-special > * {
  margin-bottom: 0;
}

.tabel-special > * + * {
  margin-top: var(--ritm);
}

.tabel-special > .calculator-intro {
  padding-top: var(--ritm);
  padding-bottom: 0;
}

/* Rândul de câmpuri: aceleași jgheaburi ca panourile machetei. */
.tabel-special .rand {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin-top: 4px;
}

/* CÂMPURILE celor DOUĂ familii de lucru, dintr-o singură regulă (§166):
   tabelele speciale și ecranele de cumpărare. Scrise separat, valorile
   s-ar despărți la prima schimbare — iar restul paginilor care folosesc
   `.form-group` rămân, ca și până acum, în afara ei. */
.tabel-special label,
.comanda-page label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.tabel-special select,
.tabel-special input[type="text"],
.comanda-page select,
.comanda-page input[type="text"],
.comanda-page input[type="email"],
.comanda-page input[type="date"] {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(190, 210, 233, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--navy);
  font: inherit;
  font-size: 13px;
}

.tabel-special select:focus-visible,
.tabel-special input:focus-visible,
.comanda-page select:focus-visible,
.comanda-page input:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Rândul de ales: cutia machetei, cu starea „bifat" pe tenta mărcii. */
.tabel-special .alegere {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
  margin-top: 8px;
  padding: 11px 14px;
  border: 1px solid rgba(214, 225, 238, 0.82);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: border-color 170ms ease, background 170ms ease;
}

.tabel-special .alegere:hover {
  border-color: rgba(89, 49, 217, 0.34);
  background: rgba(255, 255, 255, 0.9);
}

.tabel-special .alegere:has(:checked) {
  border-color: rgba(89, 49, 217, 0.55);
  background: rgba(89, 49, 217, 0.06);
}

.tabel-special .alegere-text {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.55;
}

.tabel-special .alegere-punctaj {
  color: var(--purple-dark);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* Sectorul din calculul estetic: un grup de câmpuri, nu o casetă de
   sistem — legenda devine etichetă, chenarul se potrivește cu restul. */
.estetic-sector {
  margin-top: 16px;
  padding: 14px 16px 16px;
  border: 1px solid rgba(214, 225, 238, 0.82);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.55);
}

.estetic-sector legend {
  padding: 0 8px;
  color: var(--purple-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tabel-actiuni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(205, 219, 235, 0.82);
}

/* Butonul principal al machetei e o grilă de 382px, croită pentru eroul
   paginii de acasă. Aici e un buton obișnuit, deci se strânge la
   conținutul lui. */
.tabel-actiuni .button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  padding: 0 22px;
}

.tabel-rezultat {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(205, 219, 235, 0.82);
}

.tabel-rezultat .calculator-score {
  justify-content: start;
  width: fit-content;
  text-align: left;
}

.tabel-pasi {
  margin-top: 16px;
}

.tabel-pasi > p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
}

.tabel-special .pasi {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

/* ======================================================================
   §166 — CEREREA FIȘEI: casă de marcat, nu formular gol.

   Cele două ecrane de cumpărare — fișa din calcul manual și fișa din
   analiza textului — stăteau pe foaia veche, cu stilurile scrise în
   marcaj. Poartă de-acum familia calculatorului (au formular și o
   singură acțiune la capăt) plus aranjamentul de casă de marcat:
   formularul în stânga, ce cumperi în dreapta, la vedere cât timp
   completezi.
   ====================================================================== */

/* Ritmul paginii, ca la celelalte familii (§162, §165). */
.comanda-page > * {
  margin-bottom: 0;
}

.comanda-page > * + * {
  margin-top: var(--ritm);
}

.comanda-page > .calculator-intro {
  padding-top: var(--ritm);
  padding-bottom: 0;
}

/* Ultimul bloc adaugă doar cât lipsește până la ritm: aerul propriu al
   subsolului e pe toate paginile și nu se atinge (§160). */
.comanda-page > :last-child {
  margin-bottom: calc(var(--ritm) - var(--subsol-aer));
}

.comanda-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--ritm);
  align-items: start;
}

/* REZUMATUL NU E LIPICIOS, și merită spus de ce, ca să nu se reîncerce:
   `.page-shell` are `overflow: hidden`, iar un strămoș cu overflow diferit
   de `visible` devine scrollportul lui `position: sticky` — care apoi nu se
   mai agață de nimic. Măsurat pe randare: cu regula pusă, rezumatul tot
   pleca de pe ecran (top −180 la o derulare de 600 px). Scoaterea lui
   `overflow: hidden` din învelișul machetei ar atinge tot situl, pentru un
   câștig mic aici. */

/* ȘINA din dreapta: ce cumperi, apoi ce urmează după plată. Al doilea
   bloc nu e umplutură — fără el, coloana rămânea goală pe vreo 700 px sub
   rezumat, adică tocmai „jumătatea de pagină" semnalată la §143. */
/* Aceeasi sina si in paginile de cont (§173): un teanc de panouri intr-o
   coloana. O regula, doua nume — scrise separat, s-ar desparti la prima
   schimbare. */
.comanda-sina,
.panou-sina {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}

@media (max-width: 900px) {
  .comanda-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Pe ecran îngust șina URCĂ deasupra formularului: ce cumperi se
     citește înainte de a completa, nu după. */
  .comanda-grid > .comanda-sina {
    order: -1;
  }
}

/* ------------------------------------------------- ce urmează după plată -- */

.comanda-pasi {
  padding: 20px 22px 22px;
  border: 1px solid rgba(205, 219, 235, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.66);
}

.comanda-pasi h2 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.comanda-pasi ol {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pas;
}

.comanda-pasi li {
  position: relative;
  margin-top: 14px;
  padding-left: 34px;
  counter-increment: pas;
}

.comanda-pasi li:first-child {
  margin-top: 0;
}

.comanda-pasi li::before {
  content: counter(pas);
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: rgba(89, 49, 217, 0.1);
  color: var(--purple-dark);
  font-size: 11.5px;
  font-weight: 800;
  place-items: center;
}

/* Firul care leagă pașii — se oprește înaintea ultimului. */
.comanda-pasi li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: -12px;
  left: 11px;
  border-left: 1px dashed rgba(89, 49, 217, 0.28);
}

.comanda-pasi strong {
  display: block;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 800;
}

.comanda-pasi span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ------------------------------------------------ rezumatul comenzii -- */

.comanda-sumar {
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(181, 204, 230, 0.96);
  border-radius: 22px;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.95), rgba(237, 245, 255, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 20px 48px rgba(41, 77, 126, 0.12);
}

.comanda-sumar__cap {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(205, 219, 235, 0.82);
}

.comanda-sumar__cap > .ico {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 14px;
  background: rgba(89, 49, 217, 0.1);
  color: var(--purple-dark);
}

.comanda-sumar__cap p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.comanda-sumar__cap h2 {
  margin: 2px 0 0;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
}

/* Cifra cazului e ÎN frază, nu alături de ea: în lista de dinainte
   numărul era o bucată separată dintr-un rând `flex`, iar textul copiat
   de pe pagină ieșea „3leziuni" (semnalat de medic, 07.09.2026). */
.comanda-sumar__caz {
  margin: 18px 0 0;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.55;
}

.comanda-sumar__caz strong {
  font-weight: 800;
}

.comanda-sumar__lista {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.comanda-sumar__lista li {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Semnul de bifat poarta VERDELE CASEI, nu pe cel al machetei: pe capatul
   mai inchis al gradientului cardului, verdele machetei da 3,31 - trece ca
   obiect grafic, dar pe muchie; `--bine` da 4,91. Masurat pe randare. */
.comanda-sumar__lista .ico {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--bine);
  stroke-width: 2.6;
}

.comanda-pret {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(205, 219, 235, 0.82);
}

.comanda-pret strong {
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
}

.comanda-pret span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* §339 — CÂT PLĂTEȘTI, LA BUTON (cerut de medic): cifra mare deasupra
   butonului, rândul mic dedesubt. Chenarul de deasupra butoanelor urcă peste
   cifră, ca ea să stea în același bloc cu ele. */
.comanda-cost {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(205, 219, 235, 0.82);
}

.comanda-cost .tabel-actiuni {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

.comanda-cost__cifra {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
}

.comanda-cost__mic {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* §339 — LEGĂTURILE DIN „CAUTĂ MAI PRECIS": sunt căutări de apăsat, deci se
   văd ca legături de text, în forma casei (`.footer-legal-band .footer-legal a`):
   violet, cu sublinierea moale. Regula generală `a` le lăsa în culoarea
   textului — măsurat: rgb(8, 19, 51), fără subliniere, adică de nedeosebit. */
.caz-indemn a {
  color: #5a4bc2;
  text-decoration: underline;
  text-decoration-color: rgba(90, 75, 194, 0.35);
  text-underline-offset: 2px;
}

/* ------------------------------------------------- câmpurile comenzii -- */

.comanda-page .form-group {
  margin-top: 18px;
}

.comanda-page .form-group > label {
  display: block;
  margin-bottom: 5px;
}

/* Nota de sub un câmp: lămurirea lui, nu un al doilea text. */
.camp-nota {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.comanda-subtitlu {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(205, 219, 235, 0.82);
}

.comanda-subtitlu h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
}

.comanda-subtitlu h3 .ico {
  width: 18px;
  height: 18px;
  color: var(--purple-dark);
}

.comanda-subtitlu p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ACORDUL: o casetă de bifat lângă un text lung, deci rândul e o grilă —
   caseta nu se strânge, textul nu se strecoară sub ea. Aceeași casetă și la
   a doua confirmare a ștergerii contului (§279), nu o a doua formă. */
.comanda-page .comanda-acord,
.profil-stergere .comanda-acord {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin: 0;
  padding: 15px 16px;
  border: 1px solid rgba(214, 225, 238, 0.82);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.65;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.comanda-page .comanda-acord:has(:checked),
.profil-stergere .comanda-acord:has(:checked) {
  border-color: rgba(89, 49, 217, 0.5);
  background: rgba(89, 49, 217, 0.05);
}

.comanda-page .comanda-acord input,
.profil-stergere .comanda-acord input {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin-top: 3px;
  accent-color: var(--purple);
}

/* `.eroare-camp` e mesajul câmpurilor de facturare (partialul comun cu
   Setări cont, §273): pe pagina comenzii arată ca mesajele vecinelor. */
.comanda-page .eroare,
.comanda-page .eroare-camp {
  margin: 7px 0 0;
  color: var(--pink);
  font-size: 12.5px;
}

/* DATELE PENTRU FACTURĂ în formularul comenzii (§273). Partialul vine din
   dashboard, unde rândurile au jgheab propriu; aici aerul dintre rânduri îl
   dă deja marginea de sus a fiecărui câmp (18 px), deci jgheabul se scoate —
   altfel între rânduri ar ieși 32 px, față de 18 între câmpurile de sub ele.
   Alegerea felului primește aceeași margine, ca să nu stea lipită de text. */
.comanda-page .cont-fel {
  margin: 18px 0 0;
}

.comanda-page .cont-grup + .panou-rand,
.comanda-page .panou-rand + .panou-rand {
  margin-top: 0;
}

/* RÂNDURILE DE CÂMPURI se aliniază SUS, nu jos (§273). `.panou-rand`
   aliniază la bază fiindcă e făcut pentru un câmp lângă un buton (§197);
   pe un rând numai de câmpuri, un mesaj de eroare sub unul singur îl
   împingea în sus — măsurat: județul urca cu 26 px față de vecinii lui. */
.panou-rand--campuri {
  align-items: flex-start;
}

/* Nota „Pentru factură mai trebuie" și câmpurile de sub ea (§273). Nota are
   aer numai deasupra, iar alegerea felului numai dedesubt — măsurat, pe
   Setări cont stăteau lipite (0 px), iar la credite la fel. Aerul se pune
   doar aici: pe celelalte ecrane nota e urmată de secțiuni cu margine proprie. */
.dashboard-legal-note + form,
.dashboard-legal-note + .cont-fel {
  margin-top: 18px;
}

.comanda-page .req {
  color: var(--pink);
}

/* ======================================================================
   §167 — PLATA ȘI PAGINA COMENZII.

   Ultimele două ecrane ale drumului de cumpărare, după `fisa/cere`
   (§166). Aceeași familie și același aranjament: ce ai de făcut în
   stânga, în dreapta o șină cu datele comenzii.
   ====================================================================== */

/* Coloana din stânga poate purta mai multe panouri (plata cu credite ȘI
   drumul cu cardul; fișa ȘI factura) — au nevoie de aer între ele. */
.comanda-coloana {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}

.comanda-panou-text {
  margin: 18px 0 0;
  color: var(--navy);
  font-size: 13.5px;
  line-height: 1.65;
}

.comanda-panou-text + .comanda-panou-text {
  margin-top: 11px;
}

/* Pastila stării, în rândul de sub titlu. Culorile rămân cele de casă
   (foaia veche le are pe toate trei); aici se schimbă doar forma, ca să
   stea în același rând cu data. */
.comanda-page .comanda-stare {
  display: inline-block;
  margin-right: 10px;
  padding: 4px 12px;
  /* Chenarul se DERIVĂ din cerneala stării, nu se scrie pe fiecare din
     cele trei: pe fundalul albăstrui al paginii, chenarul foii vechi
     (croit pentru card alb) iese la 1,30 față de pagină — pastila se
     citește, dar forma ei aproape că nu se vede. La 72% din cerneală:
     3,78 la „așteaptă plata", 4,02 la „plătită", 2,58 la „anulată" (o
     stare stinsă, unde o muchie moale e chiar ce trebuie). Pragul de 3
     nu e obligatoriu aici — starea o poartă CUVÂNTUL, cu 6,17 — dar un
     chenar care abia se vede arată a scăpare. */
  border: 1px solid color-mix(in srgb, currentColor 72%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Datele comenzii: perechi etichetă/valoare, nu un tabel. Un tabel de
   două coloane într-o șină de 500 px își rupe eticheta pe două rânduri
   și lasă valoarea singură. */
.comanda-detalii {
  margin: 18px 0 0;
}

.comanda-detalii > div {
  display: grid;
  gap: 2px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(205, 219, 235, 0.7);
}

.comanda-detalii > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.comanda-detalii dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.comanda-detalii dd {
  margin: 0;
  color: var(--navy);
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ------------------------------------- ce a răspuns AI-ul (diagnostic) -- */

/* Panoul de diagnostic e o DESFĂȘURARE, nu o pagină de citit: rămâne cu
   litera lui măruntă și cu listele lui, doar că stă acum pe toată
   lățimea și în chenarul machetei. */
.comanda-diag > p,
.comanda-diag > ul,
.comanda-diag > ol {
  margin-top: 12px;
}

.comanda-diag > p:first-of-type {
  margin-top: 18px;
}

.comanda-diag .lista {
  padding-left: 20px;
  line-height: 1.6;
}

.comanda-diag .lista li + li {
  margin-top: 7px;
}

.comanda-diag__campuri {
  margin: 2px 0 4px;
}

/* ======================================================================
   §168 — CÂMPURILE DE PAROLĂ din Setări cont.

   Trei câmpuri care fac același lucru arătau la trei lățimi: „Parola de
   acum" stătea singură pe rândul ei, iar `.panou-rand__larg` e
   `flex: 1 1 220px` — deci se întindea pe toată lățimea, de două ori cât
   cele de dedesubt. Rândul ei are de-acum jumătatea lui.
   ====================================================================== */

.panou-rand__jumate {
  flex: 0 1 calc(50% - 6px);
  min-width: 220px;
}

/* Butonul „Arată" stă ÎN câmp; îl pune `nou.js`, deci fără JavaScript nu
   există nici el, nici locul lui. */
.camp-parola {
  position: relative;
}

.camp-parola input {
  padding-right: 46px;
}

.camp-parola__ochi {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(190, 210, 233, 0.9);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--purple-dark);
  cursor: pointer;
}

.camp-parola__ochi .ico {
  width: 17px;
  height: 17px;
}

.camp-parola__ochi:hover {
  border-color: rgba(89, 49, 217, 0.4);
  background: rgba(89, 49, 217, 0.06);
}

.camp-parola__ochi:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* ======================================================================
   §169 — DATELE DE FACTURARE PE CONT.

   Contul poate fi al unei persoane ori al unei firme, iar ecranul arată
   câmpurile felului ales. Fără JavaScript rămân amândouă grupurile la
   vedere — salvarea le ține pe amândouă, deci nimic nu se pierde.
   ====================================================================== */

.cont-fel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.cont-fel legend {
  padding: 0;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.cont-fel__optiune {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid rgba(214, 225, 238, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: border-color 170ms ease, background 170ms ease;
}

.cont-fel__optiune:hover {
  border-color: rgba(89, 49, 217, 0.34);
  background: rgba(255, 255, 255, 0.9);
}

.cont-fel__optiune:has(:checked) {
  border-color: rgba(89, 49, 217, 0.55);
  background: rgba(89, 49, 217, 0.06);
}

.cont-fel__optiune input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--purple);
}

.cont-fel__optiune strong {
  display: block;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 800;
}

.cont-fel__optiune small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Grupul ascuns de JS. `hidden` singur PIERDE în fața unui `display` din
   foaie — capcana de casă; de aceea regula e explicită. */
.cont-grup[hidden] {
  display: none !important;
}

.cont-grup + .panou-rand,
.panou-rand + .panou-rand,
.panou-rand + .comanda-acord {
  /* ultima: a doua confirmare a ștergerii (§279) stătea lipită de câmpul
     parolei — măsurat 0 px între ele */
  margin-top: 14px;
}

/* Nota „mai trebuie pentru factură": aceeași casetă ca notele legale ale
   dashboardului, în chihlimbar — e o lipsă, nu o confirmare. */
.dashboard-legal-note--atentie {
  border-color: rgba(198, 132, 12, 0.28);
  background: linear-gradient(110deg, rgba(255, 247, 231, 0.9), rgba(255, 251, 242, 0.8));
}

/* Două rânduri într-o celulă de tabel (§170): ce era coloană proprie
   coboară ca rând al doilea, ca tabelul să încapă în cele șase coloane
   pentru care e croită foaia. */
.panou-rand-doua {
  display: grid;
  gap: 2px;
}

.panou-rand-doua small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

/* ======================================================================
   §171 — ANTETUL PAGINII DE CITIRE: cardul stă LÂNGĂ titlu.

   Medicul: „poți să pui cardul «Cere analiza AI» în dreapta, la același
   nivel cu «Citește textul actului» / «Lipești textul actului»".

   Până acum antetul era un bloc peste altul: copia sus, iar dedesubt o
   grilă de două coloane pentru cele două drumuri. Pe un cont obișnuit
   există un singur drum, deci cardul rămânea pe jumătatea din stânga,
   sub titlu — un gol cât el în dreapta.
   ====================================================================== */

.document-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

/* Copia nu mai are nevoie de plafonul ei de 870 px: îl dă coloana. */
.document-intro__copy {
  max-width: none;
}

/* În șina din dreapta cardurile se STIVUIESC. La admin sunt două, iar
   două cărți una lângă alta într-o jumătate de pagină ies cât o coloană
   de ziar. */
.document-intro > .document-mode-strip {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

@media (max-width: 980px) {
  .document-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* Pe ecran îngust se întoarce la forma de dinainte: copia sus, cardul
     dedesubt, cu aerul lui. */
  .document-intro > .document-mode-strip {
    margin-top: 28px;
  }
}

/* Șina de jos a Setărilor: parola și ștergerea, una lângă alta (§171). */
.profil-jos {
  display: grid;
  /* 2:1, nu 1,35:1 — masurat: la 1,35 coloana parolei iese 548 px, iar
     cele trei campuri (cu butonul „Arata" in ele) cer 654, deci se rup pe
     trei randuri si sectiunea creste de la 264 la 454 px. La 2:1 coloana
     are ~690 si incap toate trei pe un rand. Cardul de stergere e doar o
     bara cat timp e inchis, deci n-are nevoie de latime. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .profil-jos {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ȘTERGEREA se desface la cerere: e singura acțiune fără întoarcere de pe
   ecran și se face o dată în viața unui cont. */
.profil-stergere > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 25px;
  cursor: pointer;
  list-style: none;
}

.profil-stergere > summary::-webkit-details-marker {
  display: none;
}

.profil-stergere > summary small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profil-stergere > summary strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
}

.profil-stergere > summary > span {
  flex: 1 1 auto;
  min-width: 0;
}

.profil-stergere > summary .ico {
  width: 19px;
  height: 19px;
  color: var(--muted);
  transition: rotate 180ms ease;
}

.profil-stergere[open] > summary .ico {
  rotate: 180deg;
}

.profil-stergere > summary:hover strong {
  color: var(--purple-dark);
}

/* În șina de jos coloana are ~600 px, nu 1061: cele trei câmpuri de parolă
   n-ar încăpea la un minim de 200 și s-ar rupe pe două rânduri (măsurat:
   secțiunea creștea de la 264 la 454 px). */
.profil-jos .panou-rand__treime {
  min-width: 150px;
}

/* TREI PE RÂND (§171). Baza e „33,333% − 12", nu „− 8": jgheabul lui
   `.panou-rand` e de 12 px, iar cu minus 8 cele trei câmpuri însumează
   EXACT lățimea containerului și se rup la prima rotunjire — măsurat,
   secțiunea parolei creștea de la 264 la 359 px, cu câmpurile pe două
   rânduri. `flex-wrap` le rupe oricum singure pe ecran îngust. */
.panou-rand__treime {
  flex: 1 1 calc(33.333% - 12px);
  min-width: 180px;
}

/* Alegerea felului pe ecranul de înregistrare: aceleași cutii ca în Setări,
   dar strânse — acolo au și o lămurire dedesubt, aici doar numele. */
.cont-fel--strans {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.cont-fel--strans .cont-fel__optiune {
  padding: 10px 12px;
  border-radius: 12px;
}

.cont-fel--strans .cont-fel__optiune strong {
  font-size: 13px;
}

.cont-camp__optional {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
}

/* ======================================================================
   §173 — ULTIMELE TREI PAGINI DE CONT intră în limbajul dashboardului.

   Documentele, Șabloanele și Analiza stăteau pe foaia veche (`p-card`,
   `p-tabel`, `p-alerta`), cu stiluri scrise în marcaj. Regulile, rutele
   și textele n-au fost atinse — se schimbă numai haina.
   ====================================================================== */

.panou-doua {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.panou-doua--egale {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  .panou-doua,
  .panou-doua--egale {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Cele două drumuri de pe pagina de analiză: nu carduri peste carduri —
   stau ÎN panoul lor, despărțite doar de un chenar. */
.panou-drum {
  min-width: 0;
  padding: 20px 22px 22px;
  border: 1px solid rgba(205, 219, 235, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
}

.panou-drum__semn {
  display: grid;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  place-items: center;
}

.panou-drum__semn .ico {
  width: 21px;
  height: 21px;
}

.panou-drum__semn--albastru {
  background: rgba(25, 120, 233, 0.12);
  color: var(--blue);
}

.panou-drum__semn--auriu {
  background: rgba(251, 90, 24, 0.12);
  color: var(--orange);
}

.panou-drum h3 {
  margin: 14px 0 0;
  color: var(--navy);
  font-size: 15.5px;
  font-weight: 800;
}

.panou-drum h3 small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.panou-drum p {
  margin: 9px 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.panou-drum .camp-nota {
  margin-top: 10px;
}

/* Documentele de bifat înaintea unei analize. */
.panou-alegeri {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.panou-alegere {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid rgba(214, 225, 238, 0.82);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.panou-alegere:has(:checked) {
  border-color: rgba(89, 49, 217, 0.5);
  background: rgba(89, 49, 217, 0.05);
}

.panou-alegere input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--purple);
}

.panou-alegere strong {
  display: block;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
}

.panou-alegere small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

/* Rândul care spune că un șablon s-a făcut sub o versiune veche a
   baremului: e o avertizare, nu un amănunt. */
.panou-rau {
  /* `--rau` e tokenul rosu al casei; `--color-danger` NU e declarat
     nicaieri — marcajul vechi al sabloanelor il cerea, iar randul de
     avertizare iesea fara nicio culoare. Prins de plasa care pazeste
     tocmai asta (StilTest). */
  color: var(--rau) !important;
}

/* ======================================================================
   §174 — RITMUL PE GHID.

   Medicul, încă de la începutul zilei: „la /ghid, dimensiuni, distanța
   carduri". Măsurat pe randare, golurile dintre cele cinci blocuri ale
   paginii erau **18 · 0 · 0 · 60**, iar până la subsol 64 — fiindcă
   fiecare bloc își purta propriul aer, în padding: cuprinsul 18 de sus,
   drumurile 68 sus și 54 jos, restul nimic.

   Acum e ritmul casei, ca peste tot (§160): 40 între blocuri, iar ultimul
   adaugă doar cât lipsește până la el, fiindcă subsolul își are aerul lui.
   ====================================================================== */

.guide-page > .invelis > * {
  margin-bottom: 0;
}

.guide-page > .invelis > * + * {
  margin-top: var(--ritm);
}

/* Pana la subsol tot ritmul, nici mai mult: 80 se adunau din trei locuri
   deodata — marginea ultimului bloc (16), aerul invelisului (24) si al
   paginii (40). Acum aerul de jos e intr-un SINGUR loc, iar subsolul isi
   pastreaza pe al lui. Masurat: 80 -> 16. */
.guide-page > .invelis > :last-child {
  margin-bottom: 0;
}

.guide-page > .invelis {
  padding-bottom: 0;
}

.guide-page {
  padding-bottom: calc(var(--ritm) - var(--subsol-aer));
}

/* Aerul propriu al blocurilor iese: îl dă de-acum ritmul. Altfel s-ar
   aduna cu el și golurile ar sări de la 40 la 108. */
.guide-page > .invelis > .guide-toc {
  margin-top: var(--ritm);
}

.guide-page .guide-paths {
  padding-top: 0;
  padding-bottom: 0;
}

/* ======================================================================
   §175 — CELE DOUĂ CARDURI DIN STÂNGA LUI /calcul NU SE MAI ATING.

   Semnalat de medic de două ori: „aranjează aici cardurile din stânga,
   se suprapun", apoi „nu ai rezolvat suprapunerea". Prima oară am căutat
   greșit, și merită scris de ce: am măsurat CUTIILE
   (`getBoundingClientRect`) la șapte lățimi, cu chiar cazul din captura
   lui, și n-am găsit nicio suprapunere — fiindcă nu era una.

   Cutiile doar se ATING: cazul se termină la 926, „Rezultatul" începe la
   926, iar coloana din stânga e un `<div>` simplu, fără niciun jgheab
   între copii. Suprapunerea e a UMBRELOR: `.card` are
   `0 18px 44px rgba(40, 75, 120, .1)`, adică umbra cardului de sus e
   desenată 62 px ÎN cardul de dedesubt, iar cel de dedesubt — pictat
   după el — îi acoperă muchia cu propriul chenar și cu propriul colț de
   22 px. Cele două raze rotunjite se întrepătrund, și exact asta se vede
   în captura medicului: o linie dublă, ciupită la capete.

   LECȚIA, mai valoroasă decât regula: o sondă pe cutii NU vede
   `box-shadow` — el se desenează în AFARA cutiei. Două carduri lipite,
   fiecare cu umbra lui, se suprapun pe ecran fără ca vreo măsurătoare
   de geometrie să spună ceva.

   Jgheabul e chiar cel dintre coloane (`gap` pe `.calculator-grid`), ca
   pe verticală și pe orizontală aerul să fie același. `align-content:
   start` ține cardurile la înălțimea lor: fără el, coloana le-ar întinde
   și cazul ar avea 500 px de alb sub ultima leziune. */
.calculator-grid > * {
  display: grid;
  align-content: start;
  gap: 24px;
  min-width: 0;
}

/* CAZUL NU E LIPICIOS, și rămâne scris de ce — regula era acolo, dar
   moartă: `.page-shell` are `overflow: hidden`, deci el e scrollportul, iar
   ce se agață de el nu se mai agață de nimic (măsurat: la o derulare de
   600 px, cardul pleacă la −187). Sub 1080 px o regulă îl trecea oricum pe
   `static`, iar sub 820 `overflow` redevine `visible` — adică singura
   fereastră în care lipirea ar fi mușcat e tocmai cea în care e inertă.
   Lăsată acolo, ar fi fost o capcană: cine scoate cândva `overflow:
   hidden` ar primi cardul lipit peste „Rezultatul", care i-ar trece pe
   dedesubt. */
.calculator-case-panel {
  position: static;
}

/* ======================================================================
   §176 — /calcul IESE DE SUB ÎNVELIȘUL FOII VECHI.

   Era ultima pagină care mai purta `<div class="invelis invelis-lucru">`.
   Măsurat pe randare, la 1440 px, ÎNAINTE de a scoate ceva: învelișul nu
   mai dădea NIMIC — toate cele cinci declarații ale lui erau deja anulate
   (`max-width: none`, `padding` 0 pe toate patru laturile), de regulile
   scrise aici la §155. Adică era o cutie care nu mai făcea decât să stea
   între `main.calculator-page` și cele trei blocuri ale paginii.

   Lățimea și jgheabul le dă de mult clasa de pagină
   (`.calculator-page { padding: 0 38px }`, 18 sub 820, 14 sub 520) — nu s-a
   mutat nimic acolo, fiindcă nu era nimic de mutat.

   CÂRLIGUL RITMULUI E O CLASĂ NOUĂ, `calcul-page`, nu `calculator-page`.
   Familia calculatorului e purtată de ȘASE vederi — tabelele speciale și
   prejudiciul estetic (`+ tabel-special`), cele patru ecrane de cumpărare
   (`+ comanda-page`) și calculatorul. O regulă scrisă pe `.calculator-page`
   ar fi căzut peste toate șase, iar primele cinci își au deja ritmul lor
   (§165, §166). E chiar tiparul de acolo: familia dă suprafața, a doua
   clasă dă ritmul.
   ====================================================================== */

/* Ultimul bloc adaugă doar cât lipsește până la ritm: aerul propriu al
   subsolului e pe toate paginile și nu se atinge (§160). Măsurat înainte:
   `#calc-viu` se termina exact acolo unde începe subsolul — 0 px, adică
   pagina de lucru era singura fără ritm la coadă. */
.calcul-page > :last-child {
  margin-bottom: calc(var(--ritm) - var(--subsol-aer));
}

/* ----------------------------------------------------------------------
   CELE 44 DE `style="..."` din marcaj, trecute pe clase.

   Erau 44 de atribute, dar numai 19 declarații distincte: capul rândului
   de leziune se repeta de șase ori, `margin:4px 0 0` de cinci, iar
   `display:inline` de cinci. Niciunul nu era calculat din Blade, deci
   toate au putut deveni clase statice; singurul condiționat, `<tr>`-ul
   rândului CPP nesocotit, a trecut pe `@class([...])`.

   Numele intră în familiile care există deja în foaia veche — `caz-*`
   pentru rândul cazului, `incadrare-*` pentru formularul de încadrare —
   ca să se citească lângă surorile lor, nu ca un colț nou.

   `.lez-cap` NU s-a refolosit, deși pare că descrie același lucru: are
   `gap: 14px` și `align-items: flex-start`, nu 10 și `baseline`. E o
   regulă orfană a altcuiva; refolosită, i-aș fi schimbat tăcut valorile.
   ---------------------------------------------------------------------- */

/* CAPUL RÂNDULUI de caz: titlul, pastilele și, la dreapta, punctajul ori
   ieșirea. `baseline`, nu `center`: pastilele stau pe linia literelor. */
.caz-leziune-cap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
}

/* Locul din dreapta capului de rând. Aici stătea PUNCTAJUL rândului; de la
   §177 (07.09.2026) elementul se randează GOL, fiindcă estimarea gratuită nu
   mai arată nicio cifră.

   REGULA NU S-A ȘTERS ODATĂ CU CIFRA, și ăsta e miezul: `margin-left: auto`
   pe un span gol absoarbe golul dintre pastile și butonul „Înlătură" și îl
   ține lipit la marginea dreaptă. Măsurat pe randare, la 552 px de coloană:
   gol, butonul rămâne la 0 px de margine (marginea calculată urcă de la 193
   la 234 px, adică ia și locul cifrei); ȘTERS cu totul, butonul sare 244 px
   spre stânga, peste pastile. Pe 360 px golirea chiar câștigă un rând —
   capul scade de la 68,8 la 34,8 px.

   `color` și `font-weight` rămân pentru orice conținut care ar reveni aici
   (pe fișă spanul e gol dinainte); fără conținut nu pictează nimic. */
.caz-puncte {
  margin-left: auto;
  color: var(--text);
  font-weight: 700;
}

/* NOTELE rândului. `p` are `margin: 0 0 1em` din reset (stil.css), deci
   fiecare clasă scrie marginea ÎNTREAGĂ — cu `margin-top` singur ar
   reapărea spațiul de jos de un rând sub fiecare notă, iar pe un rând cu
   trei note s-ar aduna vizibil, fără nicio eroare. */
.caz-nota        { margin: 4px 0 0; }  /* prima notă, sub cap */
.caz-nota-lipita { margin: 2px 0 0; }  /* nota care continuă alta */
.caz-nota-jos    { margin: 6px 0 0; }  /* nota de la piciorul unui tabel sau al unei liste */

/* Formularul cu un singur buton, sub notele rândului. */
.caz-actiune {
  margin-top: 8px;
}

/* Listele CONSEMNATE (constatări negative, acuze). Marginea și rândul sunt
   DOUĂ clase, nu una: la acuze rândul e primul copil al învelișului care
   poartă marginea, iar o singură clasă ar fi pus-o de două ori. */
.caz-consemnat {
  margin-top: 6px;
}

.caz-rand {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

/* Formular ținut în rândul de text. La trei din cele cinci locuri e inert
   azi (părintele e un rând flex, iar itemii flex se blochifică oricum) —
   dar clasa se pune la toate cinci: dacă mâine cineva scoate `flex` de pe
   rând, butoanele „scoate" și „Înlătură" ar sări pe rândul lor, fără să
   se plângă nimic. */
.forma-in-rand {
  display: inline;
}

/* Blocurile fără punctaj se sting puțin. Semnul îl poartă TEXTUL — pastila
   „fără punctaj" —, pălirea doar îl întărește: cine n-o vede tot citește
   ce scrie. */
.caz-leziune-stins {
  opacity: .85;
}

/* Tabelul de detaliu al rândului (LT / CP / CPP). */
.caz-tabel {
  margin-top: 8px;
}

/* Coloana pastilei, ca cele trei feluri să stea una sub alta. Măsurat că
   `table.date th, table.date td` nu declară `width`, deci specificitatea
   mai mică de aici nu e bătută; cine adaugă vreodată `width` acolo ia
   tăcut cei 64 px. */
.col-pastila {
  width: 64px;
}

/* Rândul care NU intră în sumă: la CPP se reține cel mai sever.
   ATENȚIE: clasa se pune prin `@class([...])`, iar StilTest scoate
   directivele Blade înainte să citească clasele — deci regula asta NU e
   păzită de plasă. Ștearsă, rândurile neadjudecate n-ar mai păli și
   nimeni n-ar mai vedea care CPP a fost reținut. */
.rand-nesocotit {
  opacity: .5;
}

/* Câmpul din formularul de încadrare (care os, care deget) și nota lui. */
.incadrare-camp      { margin-top: 12px; }
.incadrare-camp-nota { margin-top: 4px; }

/* PAR-01 (§352): PARTEA — titlul arată ca eticheta celorlalte câmpuri („Care
   os"), iar cele trei alegeri stau pe un rând. `label` e bloc și aldin în
   stil.css, deci alegerea își ia aici înapoi forma de rând; titlul e `span`
   (grupul de butoane radio n-are un singur câmp căruia să-i fie etichetă). */
.incadrare-camp-titlu {
  display: block;
  margin-bottom: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
}
.alegere-parte {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 18px 0 0;
  font-size: .95rem;
  font-weight: 400;
  cursor: pointer;
}
.alegere-parte input {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  accent-color: var(--purple);
}

/* Lămurirea grupului, sub `<summary>`. */
.incadrare-lamurire {
  margin: 6px 0 8px;
}

/* Propunerea motorului CONTINUĂ lămurirea de deasupra — de aceea marginea
   de sus e negativă: cele două se citesc ca un bloc, nu ca două note.
   Nu e o scăpare de curățat. */
.incadrare-propunere {
  margin: -4px 0 8px;
}

/* Bifă care nu face parte din lista de poziții (coeficientul local,
   membrul dominant): se desprinde de lista de deasupra. */
.alegere-aparte {
  margin-top: 10px;
}

/* Butonul de ieșire din capul rândului de ÎNCADRAT, împins la dreapta.
   Regula e contextuală, nu o clasă pe element: proba din
   `UrmaCautariiTest` cere ca butonul acela să poarte exact
   `class="buton buton-alb buton-mic"` — o clasă în plus o rupe.
   Selectorul e îngust dinadins: `.caz-leziune-cap .buton` ar fi prins și
   „Înlătură" de pe rândul unei leziuni PUSE, care stă în alt cap și vine
   după `.caz-puncte` — două margini `auto` pe același rând își împart
   golul, adică altă așezare. Aici e singurul buton care e fiu DIRECT al
   capului dintr-un rând `.caz-leziune-noua`. */
.caz-leziune-noua > .caz-leziune-cap > .buton {
  margin-left: auto;
}

/* Capul cardului „Rezultatul": păstrează cei 10 px pe care îi avea scris
   în marcaj. Fără regula asta ar fi luat gap-ul de 14 al lui `.card-cap`,
   adică o mutare reală de 4 px — mică, dar o schimbare de randare, nu o
   îmbrăcare. */
.card-cap-strans {
  gap: 10px;
}

/* ======================================================================
   §175d — PASTILA DE SECȚIUNE NU MAI STĂ PESTE TITLU.

   Găsită măturând situl la 1090 px, după reparația antetului. Pe
   `/analiza-documente`, pastila „Patru pași" e desenată PESTE primul rând
   din „Cum lucrează." — măsurat pe randare: fundalul ei coboară 10 px
   peste caseta textului titlului, pe toată lățimea pastilei.

   CAUZA e o capcană clasică a modelului de cutie: `.about-section-badge`
   n-are nicio declarație de `display`, deci un `<span>` rămâne ÎN LINIE —
   iar pe un element în linie **căptușeala verticală nu ridică rândul**.
   Cei 8 px de sus și de jos se pictează pe deasupra vecinilor, fără să
   rezerve loc. Cutia ei iese 30 px înaltă, dar rândul ei ține doar 15.

   `inline-block` o face să-și ceară locul. Pe `/despre` nu schimbă nimic,
   și e măsurat, nu presupus: acolo pastilele sunt copii direcți ai unei
   grile, deci sunt deja transformate în blocuri (`display: block` citit pe
   randare) și nici nu se ating pe orizontală de titlu.

   MARCAJUL S-A ALINIAT ȘI EL, la hotărârea medicului: pe
   `/analiza-documente` pastila a ieșit din `<div>`-ul textului și a
   devenit fiu DIRECT al antetului-grilă, ca pe `/despre` — deci își
   primește coloana ei (măsurat: `50px 1144px 86px`, pastila la 1283,
   titlul până la 322). Regula de mai jos RĂMÂNE, și nu e moartă: ea
   apără orice pagină viitoare care ar stivui pastila în loc s-o pună
   în grilă. Sub 1080 px grila se strânge la două coloane, pastila
   coboară pe rândul ei, și tot atunci `inline-block` chiar lucrează.

   Regula stă AICI, la coada foii, nu în blocul machetei de la §2321:
   materialul adus se poate reîmprospăta, iar corecturile casei trebuie să
   supraviețuiască înlocuirii lui (§154). */
.about-section-badge {
  display: inline-block;
}

/* ======================================================================
   §177 — ESTIMAREA GRATUITĂ NU MAI ARATĂ NICIO CIFRĂ DE PUNCTAJ.

   Hotărârea medicului (07.09.2026): „la estimarea gratuită trebuie să
   scoatem rezultatul, pentru că se va putea teoretic calcula o fișă
   întreagă: adaugi trei, după încă trei". Limita de trei leziuni chiar se
   resetează golind cazul, deci punctele lăsate pe ecran se puteau aduna din
   cap, rundă cu rundă — iar totalul le dădea de-a gata.

   Aproape totul s-a făcut în marcaj: cardul de capăt refolosește clase care
   existau deja (`.fisa-gata`, `.fisa-gata-cifra`, `.bife`, `.nota`), tocmai
   ca StilTest să nu ceară reguli noi. Comentariul lui `.caz-puncte` (mai sus
   în foaie, la §175) s-a rescris la locul lui: regula rămâne, elementul se
   golește, iar de el atârnă poziția butonului „Înlătură".

   Aici rămâne SINGURUL lucru care chiar cere o regulă nouă.
   ---------------------------------------------------------------------- */

/* RÂNDUL DE SUB CIFRĂ, pe cardul de capăt al estimării.

   `.fisa-gata-cifra small` a fost scris pentru fișă, unde spune „fără
   limită" — de aceea e VERDE, cu majuscule: acolo e o veste bună. Pe
   estimare același rând spune „din cele 3 ale estimării", adică exact pe
   dos: o limită. Verdele aldin ar citi-o ca pe o izbândă.

   NU e o chestiune de contrast, și e măsurat, nu presupus: pe fundalul REAL
   al cardului (rgb 245 249 254) verdele dă 5,09, peste pragul de 4,5 — la fel
   ca stinsul, 5,18 (sonda probată de fiecare dată pe cazul-limită, alb pe
   negru = 21,00). E o chestiune de înțeles: culoarea spune altceva decât
   cuvintele. Rămân majusculele și grosimea, care poartă rolul de etichetă. */
.estimare-capat .fisa-gata-cifra small {
  color: var(--text-stins);
}


/* ----------------------------------------------------------------------
   §179 (07.09.2026) — ÎNCADRAREA, ACOLO UNDE ERA CIFRA.

   Ecranele-rezolvitor (`/tabel/{cod}`, `/estetic`) nu mai tipăresc
   punctajul CAZULUI: „rămâne tabelul, pleacă răspunsul socotit”. În locul
   lui vine ce s-a hotărât — care rând din tabel se aplică.

   O SINGURĂ regulă nouă era de neocolit: lista rândurilor alese. Restul
   se sprijină pe clase care există deja (`.tabel-rezultat` desenează
   caseta, `.stins mic` scrie notele, `.legal-callout` poartă refuzurile),
   tocmai ca StilTest să nu ceară mai mult decât e nevoie.

   Culorile vin din jetoane, nu din hexuri: blocul se așază de la sine pe
   amândouă temele.
   ---------------------------------------------------------------------- */

.tabel-incadrare {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tabel-incadrare-titlu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* iconița de bifă poartă verdele de „gata", ca pe restul aplicației */
.tabel-incadrare-titlu svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--bine);
}

/* rândurile alese din tabel: identitatea încadrării, adică exact ce
   vindem. Marcatorul e o linie verticală, nu un buline — rândurile de
   barem sunt fraze lungi, iar bulina le-ar rupe alinierea. */
.tabel-incadrare-randuri {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tabel-incadrare-randuri li {
  border-left: 3px solid var(--zima);
  padding: 2px 0 2px 10px;
  line-height: 1.45;
}
/* Avertismentul legal al carcasei: stă la capătul conținutului, pe
   drumurile de calcul. Doar așezare — culorile și chenarul vin din
   `.nota.nota-atentie`, care îl desenează de mult. */
.avertisment-legal {
  margin: 24px 0 8px;
}

/* ======================================================================
   §190 — RELIEFUL MOALE, DE LA PERECHEA DIN BARĂ LA TOATE BUTOANELE.

   §164 a pus neumorfismul pe cele două butoane din bară, la cererea
   medicului („frumos, rafinat, în stil neumorfism"). Restul sitului a
   rămas pe umbra plată de dedesubt — deci două limbaje pe aceeași
   pagină, iar butonul cel mai important, cel de plată, era în cel vechi.

   REGULA lui §164 rămâne întreagă și e chiar miezul: umbra nu e
   niciodată CENUȘIE, e din materia de dedesubt — albăstruie pe pagină,
   violetă pe marcă, aproape neagră pe panoul închis. Iar apăsat, butonul
   nu coboară cu 2px: se ADÂNCEȘTE (umbre `inset`).

   VALORILE STAU ÎN JETOANE, o singură dată. Scrise în fiecare familie,
   s-ar despărți la prima schimbare — chiar defectul pe care îl tot
   reparăm. Cele din bară (§164) devin și ele jetoane, ca perechea de
   acolo să nu rămână singura cu valori proprii.

   CE NU SE SCHIMBĂ, deliberat: nicio culoare de umplere, nicio literă,
   niciun chenar. Contrastul măsurat la §158/§167 e neatins — relieful se
   ADAUGĂ peste ce era, nu înlocuiește. Neumorfismul „curat", cu butonul
   din chiar materia fundalului, ar fi șters tocmai marginea care se
   vede; aici materia dă adâncimea, culoarea dă lizibilitatea.
   ====================================================================== */
:root {
  /* MATERIA PAGINII (#f5f9fe sub carduri albe): lumină albă curată din
     stânga-sus, umbră albăstruie din dreapta-jos. */
  --neu-sus:
    -5px -5px 12px rgba(255, 255, 255, 0.95),
    6px 7px 16px rgba(74, 106, 156, 0.16);
  --neu-sus-tare:
    -6px -6px 14px rgba(255, 255, 255, 1),
    8px 9px 20px rgba(74, 106, 156, 0.2);
  --neu-jos:
    inset -4px -4px 9px rgba(255, 255, 255, 0.95),
    inset 5px 5px 11px rgba(74, 106, 156, 0.22);

  /* MATERIA MĂRCII (violetul plin): lumina e violetul deschis, umbra
     violetul închis. Firul alb de sus (`inset 0 1px 0`) e muchia
     luminată — fără el, umplerea în gradient pare tipărită, nu turnată. */
  --neu-marca-sus:
    -5px -5px 12px rgba(148, 116, 255, 0.4),
    6px 7px 18px rgba(56, 24, 148, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  --neu-marca-sus-tare:
    -6px -6px 14px rgba(148, 116, 255, 0.48),
    8px 9px 22px rgba(56, 24, 148, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --neu-marca-jos:
    inset -4px -4px 10px rgba(148, 116, 255, 0.34),
    inset 5px 5px 12px rgba(46, 18, 128, 0.42);

  /* MATERIA PANOULUI ÎNCHIS (bleumarinul din panoul de cont): pe fundal
     închis lumina se stinge aproape de tot, iar umbra se apropie de
     negru — altfel butonul ar părea că plutește deasupra unei coli albe. */
  --neu-noapte-sus:
    -5px -5px 12px rgba(255, 255, 255, 0.06),
    6px 7px 18px rgba(4, 10, 28, 0.5);
  --neu-noapte-sus-tare:
    -6px -6px 14px rgba(255, 255, 255, 0.09),
    8px 9px 22px rgba(4, 10, 28, 0.58);
  --neu-noapte-jos:
    inset -4px -4px 10px rgba(255, 255, 255, 0.05),
    inset 5px 5px 12px rgba(4, 10, 28, 0.55);
}

/* --- perechea din bară, de-acum pe jetoane (§164, valorile neatinse) --- */
.header-button--outline {
  box-shadow: var(--neu-sus);
}

.header-button--outline:hover {
  box-shadow: var(--neu-sus-tare);
}

.header-button--outline:active {
  box-shadow: var(--neu-jos);
}

.header-button--solid {
  box-shadow: var(--neu-marca-sus);
}

.header-button--solid:hover {
  box-shadow: var(--neu-marca-sus-tare);
}

.header-button--solid:active {
  box-shadow: var(--neu-marca-jos);
}

/* --- familia principală: `.button` -----------------------------------
   Ridicarea de 2px se dă la o parte peste tot, ca în bară: cu ea, butonul
   „sare" în loc să se ridice din materie. Tranziția cuprinde de-acum și
   umbra — fără ea, adâncirea la apăsare ar fi instantanee, adică un
   pocnet. */
.button:hover {
  transform: none;
}

.button {
  transition: box-shadow 200ms ease, background 200ms ease;
}

.button--primary {
  background: linear-gradient(145deg, #6b41e8, #4f24cd);
  box-shadow: var(--neu-marca-sus);
}

.button--primary:hover {
  background: linear-gradient(145deg, #7449ef, #5528d8);
  box-shadow: var(--neu-marca-sus-tare);
}

.button--primary:active {
  background: linear-gradient(145deg, #5528d8, #6b41e8);
  box-shadow: var(--neu-marca-jos);
}

/* Chenarul rămâne: el e marginea MĂSURATĂ a butonului deschis, iar
   relieful nu ține loc de contrast (regula de la §158). */
.button--secondary {
  background: linear-gradient(145deg, #ffffff, #eef3fa);
  box-shadow: var(--neu-sus);
}

.button--secondary:hover {
  background: linear-gradient(145deg, #ffffff, #e9f0f9);
  box-shadow: var(--neu-sus-tare);
}

.button--secondary:active {
  background: #eef3fa;
  box-shadow: var(--neu-jos);
}

/* --- butoanele panoului de cont --------------------------------------
   `--primary` stă pe panoul închis, deci relieful lui e cel de noapte
   peste umplerea proprie; `--ghost` e chiar materia panoului. */
.dashboard-button:hover {
  transform: none;
}

.dashboard-button--primary {
  box-shadow: var(--neu-marca-sus);
}

.dashboard-button--primary:hover {
  box-shadow: var(--neu-marca-sus-tare);
}

.dashboard-button--primary:active {
  box-shadow: var(--neu-marca-jos);
}

.dashboard-button--ghost {
  box-shadow: var(--neu-noapte-sus);
}

.dashboard-button--ghost:hover {
  box-shadow: var(--neu-noapte-sus-tare);
}

.dashboard-button--ghost:active {
  box-shadow: var(--neu-noapte-jos);
}

/* Butoanele de acțiune ale panoului, cele albe pe card: aceeași materie
   ca `.button--secondary`. Se aleg pe „nu e nici primar, nici fantomă",
   ca unul adăugat mâine să intre singur în socoteală. */
.dashboard-button:not(.dashboard-button--primary):not(.dashboard-button--ghost) {
  box-shadow: var(--neu-sus);
}

.dashboard-button:not(.dashboard-button--primary):not(.dashboard-button--ghost):hover {
  box-shadow: var(--neu-sus-tare);
}

.dashboard-button:not(.dashboard-button--primary):not(.dashboard-button--ghost):active {
  box-shadow: var(--neu-jos);
}

/* --- butonul de preț -------------------------------------------------
   Are accentul lui pe card (`--card-accent`), deci umbra colorată se
   compune din el: o umbră violetă sub un buton turcoaz ar fi tocmai
   umbra „străină de materie" pe care §164 a scos-o. */
.pricing-button {
  box-shadow: var(--neu-sus);
}

.pricing-button:hover {
  box-shadow:
    -6px -6px 14px rgba(255, 255, 255, 1),
    8px 9px 22px color-mix(in srgb, var(--card-accent) 30%, transparent);
  transform: none;
}

.pricing-button:active {
  box-shadow:
    inset -4px -4px 10px rgba(255, 255, 255, 0.9),
    inset 5px 5px 12px color-mix(in srgb, var(--card-accent) 34%, transparent);
}

.pricing-card--featured .pricing-button {
  box-shadow:
    -5px -5px 12px rgba(120, 214, 245, 0.42),
    6px 7px 18px rgba(6, 96, 130, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.pricing-card--featured .pricing-button:hover {
  box-shadow:
    -6px -6px 14px rgba(120, 214, 245, 0.5),
    8px 9px 22px rgba(6, 96, 130, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.pricing-card--featured .pricing-button:active {
  box-shadow:
    inset -4px -4px 10px rgba(120, 214, 245, 0.36),
    inset 5px 5px 12px rgba(5, 78, 106, 0.45);
}

/* --- butoanele mici: copiere, iconiță, meniul de telefon --------------- */
.contact-copy-button,
.dashboard-icon-button,
.menu-toggle {
  transition: box-shadow 200ms ease, background 200ms ease;
  box-shadow: var(--neu-sus);
}

.contact-copy-button:hover,
.dashboard-icon-button:hover,
.menu-toggle:hover {
  box-shadow: var(--neu-sus-tare);
  transform: none;
}

.contact-copy-button:active,
.dashboard-icon-button:active,
.menu-toggle:active {
  box-shadow: var(--neu-jos);
}

/* --- FAMILIA VECHE (`.buton`), tot în relief -------------------------
   Podul de la §154 ține două foi deodată, iar calculatorul — pagina cea
   mai deschisă din sit — și toate ecranele de administrare încă poartă
   familia veche. Lăsate pe umbra lor de un pixel, tocmai ele ar fi rămas
   în afara limbajului. Regulile stau AICI, nu în `stil.css`: foaia nouă
   se încarcă a doua, iar când podul se scoate, relieful pleacă odată cu
   ea, dintr-un singur loc.

   Materiile sunt cele ale paletei VECHI (Zima), nu ale mărcii: umbra e
   din materia butonului, nu una împrumutată.

   Pe ecran ajung azi trei variante — `.buton-alb` (28 folosiri),
   `.buton-zima` (13) și `.buton-plin` (3). Celelalte (contur, gol,
   rotund, auriu, cele cu tentă) sunt nefolosite; primesc și ele relief ca
   familia să fie întreagă dacă se folosesc mâine, dar plasa nu le cere —
   n-ar păzi nimic de pe ecranul nimănui. */
:root {
  --neu-zima-sus:
    -5px -5px 12px rgba(86, 190, 224, 0.42),
    6px 7px 18px rgba(9, 58, 77, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  --neu-zima-sus-tare:
    -6px -6px 14px rgba(86, 190, 224, 0.5),
    8px 9px 22px rgba(9, 58, 77, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --neu-zima-jos:
    inset -4px -4px 10px rgba(86, 190, 224, 0.34),
    inset 5px 5px 12px rgba(7, 46, 61, 0.44);

  --neu-carmin-sus:
    -5px -5px 12px rgba(255, 110, 150, 0.4),
    6px 7px 18px rgba(120, 0, 34, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  --neu-carmin-sus-tare:
    -6px -6px 14px rgba(255, 110, 150, 0.48),
    8px 9px 22px rgba(120, 0, 34, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --neu-carmin-jos:
    inset -4px -4px 10px rgba(255, 110, 150, 0.34),
    inset 5px 5px 12px rgba(96, 0, 27, 0.44);
}

.buton-alb,
.buton-contur,
.buton-rotund {
  box-shadow: var(--neu-sus);
}

.buton-alb:hover,
.buton-contur:hover,
.buton-rotund:hover {
  box-shadow: var(--neu-sus-tare);
}

.buton-alb:active,
.buton-contur:active,
.buton-rotund:active {
  box-shadow: var(--neu-jos);
}

/* Relieful repară pe drum o scăpare veche: `.buton-zima:hover` schimba
   fundalul pe `--zima-text`, care e ACEEAȘI culoare cu `--zima-umplere`
   (#177b9f amândouă) — deci butonul nu răspundea deloc la maus. Acum
   răspunde prin umbră, fără să se atingă nicio culoare. */
.buton-zima {
  box-shadow: var(--neu-zima-sus);
}

.buton-zima:hover {
  box-shadow: var(--neu-zima-sus-tare);
}

.buton-zima:active {
  box-shadow: var(--neu-zima-jos);
}

.buton-auriu {
  box-shadow: var(--neu-carmin-sus);
}

.buton-auriu:hover {
  box-shadow: var(--neu-carmin-sus-tare);
}

.buton-auriu:active {
  box-shadow: var(--neu-carmin-jos);
}

/* `.buton-plin` (Autentificare) e tot pe umplerea ZIMA, nu pe carmin —
   verificat în foaia veche, nu presupus după nume. Iar hover-ul lui e și
   el mort (aceeași culoare), ca la `.buton-zima`. */
.buton-plin {
  box-shadow: var(--neu-zima-sus);
}

.buton-plin:hover {
  box-shadow: var(--neu-zima-sus-tare);
}

.buton-plin:active {
  box-shadow: var(--neu-zima-jos);
}

/* Butoanele CU TENTĂ ale prețurilor: fiecare are accentul lui în `--t`,
   deci umbra se compune din el — ca la `.pricing-button`. Cele conturate
   stau pe alb, deci lumina rămâne a paginii; cel plin e din materia lui. */
.buton-t-foc,
.buton-t-cyan,
.buton-t-magenta {
  box-shadow:
    -5px -5px 12px rgba(255, 255, 255, 0.95),
    6px 7px 16px color-mix(in srgb, var(--t) 24%, transparent);
}

.buton-t-foc:hover,
.buton-t-cyan:hover,
.buton-t-magenta:hover {
  box-shadow:
    -6px -6px 14px rgba(255, 255, 255, 1),
    8px 9px 20px color-mix(in srgb, var(--t) 30%, transparent);
}

.buton-t-foc:active,
.buton-t-cyan:active,
.buton-t-magenta:active {
  box-shadow:
    inset -4px -4px 10px rgba(255, 255, 255, 0.9),
    inset 5px 5px 12px color-mix(in srgb, var(--t) 34%, transparent);
}

.buton-t-plin {
  box-shadow:
    -5px -5px 12px color-mix(in srgb, var(--t) 34%, #ffffff),
    6px 7px 18px color-mix(in srgb, var(--t) 52%, #000000),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.buton-t-plin:hover {
  box-shadow:
    -6px -6px 14px color-mix(in srgb, var(--t) 40%, #ffffff),
    8px 9px 22px color-mix(in srgb, var(--t) 58%, #000000),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.buton-t-plin:active {
  box-shadow:
    inset -4px -4px 10px color-mix(in srgb, var(--t) 30%, #ffffff),
    inset 5px 5px 12px color-mix(in srgb, var(--t) 60%, #000000);
}

/* `.buton-gol` stă pe o bandă colorată, cu literă albă: acolo lumina se
   stinge și umbra se apropie de negru, ca la panoul închis al contului. */
.buton-gol {
  box-shadow: var(--neu-noapte-sus);
}

.buton-gol:hover {
  box-shadow: var(--neu-noapte-sus-tare);
}

.buton-gol:active {
  box-shadow: var(--neu-noapte-jos);
}

/* --- CONTRAST MĂRIT: relieful se dă la o parte ------------------------
   Aici e răspunsul cinstit la singurul cusur al neumorfismului. Umbrele
   moi NU ating 3:1 față de pagină (măsurat: chenarul unui buton deschis
   1,39, punctul cel mai întunecat al umbrei 1,23) — deci cine a apăsat
   „contrast mărit" tocmai fiindcă are nevoie de muchii n-are ce face cu
   ele. Pe modul acela relieful dispare cu totul și fiecare buton capătă
   o muchie NEAGRĂ de 2px: 21:1 față de pagină, oricare i-ar fi umplerea.

   Se face din chiar mecanismul care există (`html.a11y-contrast`), nu cu
   unul nou — panoul de accesibilitate rămâne singurul comutator. */
html.a11y-contrast .button,
html.a11y-contrast .header-button,
html.a11y-contrast .dashboard-button,
html.a11y-contrast .pricing-button,
html.a11y-contrast .contact-copy-button,
html.a11y-contrast .dashboard-icon-button,
html.a11y-contrast .menu-toggle,
html.a11y-contrast .buton,
html.a11y-contrast .buton-rotund {
  border: 2px solid #000;
  box-shadow: none;
}

/* ------------------------------------------------------------------ §193
   POARTA DE FINALIZARE pe ecranul „Cere fișa": punctele de confirmat (bifă +
   motiv), blocantele, observațiile informative pliate. Fără culori noi:
   moștenește litera și tenta paginii. */
.poarta-lista { margin: .4rem 0 0 1.1rem; padding: 0; font-size: .92rem; line-height: 1.45; }
.poarta-lista li { margin: .2rem 0; }
.poarta-punct { padding: .6rem .8rem; border-radius: 10px; background: rgba(127, 127, 127, .07); }
.poarta-bifa { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; cursor: pointer; }
.poarta-bifa input { margin-top: .25em; flex: 0 0 auto; }
.poarta-punct textarea { width: 100%; margin-top: .45rem; font: inherit; }
.poarta-informative { margin: .4rem 0 1rem; }
.poarta-informative summary { cursor: pointer; font-size: .92rem; opacity: .8; }
.poarta-blocant { margin-bottom: 1rem; }


/* ====================================================================== §197
   SPAȚIUL DE LUCRU: bara laterală grupată, ecranele strânse, butoanele albe.

   Cerut de medic (09.09.2026), pe două capturi: „meniul din stânga să-l
   grupezi, e prea mare distanța dintre butoane"; „să micșorezi cardurile
   astfel încât să încapă și «Alege cum vrei să începi»"; „buton alb și aici
   aranjează mai grupat, rafinat"; „când deschid un buton, pagina deschisă să
   fie mai aranjată, să nu fie nevoie de scroll".

   Regulile stau la COADA foii, într-un singur loc, ca despicarea să se poată
   citi și da înapoi dintr-o bucată — nu împrăștiate peste macheta de la §158.
   ====================================================================== */

/* ---------------------------------------------------------- bara laterală */

/* Intrările unei secțiuni stau STRÂNS (2 px), iar aerul se mută ÎNTRE
   grupuri: opt intrări la 50 px pas citeau ca o scară fără capăt. Măsurat
   înainte: navigația ținea 533 px din 900. */
.dashboard-nav {
  gap: 0;
}

.dashboard-nav__grup {
  display: grid;
  gap: 2px;
  padding: 5px 0 7px;
}

/* Linia care desparte grupurile — subțire, în materia barei, nu o culoare
   nouă. Primul grup n-o are: sub el nu e nimic de despărțit. */
.dashboard-nav__grup + .dashboard-nav__grup {
  border-top: 1px solid rgba(172, 200, 240, 0.11);
}

.dashboard-nav__label {
  margin: 9px 12px 5px;
  font-size: 9px;
  letter-spacing: 0.15em;
}

/* 40 în loc de 45: rândul rămâne o țintă bună de atins (peste 36 px), dar
   opt dintre ele nu mai împing piciorul barei. */
.dashboard-nav__link {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 11px;
}

.dashboard-nav__link > .material-symbols-outlined,
.dashboard-nav__link > .ico {
  width: 21px;
  font-size: 18px;
}

/* «Dashboard», intrarea de deasupra secțiunilor, își ține aerul ei. */
.dashboard-nav > .dashboard-nav__link:first-child {
  margin-bottom: 3px;
}

.dashboard-plan-chip {
  margin: 16px 5px 12px;
  padding: 10px 12px;
}

.dashboard-plan-chip > .material-symbols-outlined,
.dashboard-plan-chip > .ico {
  width: 30px;
  height: 30px;
  font-size: 17px;
}

.dashboard-sidebar {
  padding: 20px 16px 16px;
}

.dashboard-sidebar__foot {
  gap: 8px;
  padding-top: 16px;
}

.dashboard-credit-mini {
  padding: 9px 10px;
}

.dashboard-logout {
  min-height: 38px;
}

/* ------------------------------------------------ dashboardul, pe un ecran

   MĂSURAT ÎNAINTE (1600×900): titlul „Alege cum vrei să începi" cădea la
   706 px, iar cele două cartonașe ale lui abia începeau la 754 și se
   terminau la 1208 — adică omul vedea un titlu și două margini. Cerința
   medicului: „să micșorezi cardurile astfel încât să încapă și «Alege cum
   vrei să începi»".

   Nu se scoate nimic din ele. Se strânge aerul: bannerul 220 → 168,
   cartela de cifre 210 → 158, cartonașul 454 → 344, iar distanța dintre
   secțiuni 31 → 22. Litera rămâne cea de până acum, afară de cifra mare a
   cartelei (37 → 30), care era mai înaltă decât titlul secțiunii. */

.dashboard-main {
  padding: 22px clamp(18px, 2.4vw, 38px) 28px;
}

.dashboard-overview,
.dashboard-analysis,
.dashboard-reports {
  margin-top: 22px;
}

.dashboard-section-heading {
  margin-bottom: 11px;
}

/* bannerul */
.dashboard-welcome {
  min-height: 168px;
  border-radius: 22px;
}

.dashboard-welcome__copy {
  padding: 20px clamp(22px, 2.8vw, 40px);
}

.dashboard-welcome__art {
  min-height: 168px;
}

.dashboard-kicker {
  margin-bottom: 9px;
}

/* cartelele de cifre */
.dashboard-stat {
  min-height: 158px;
  padding: 15px 16px 14px;
  border-radius: 16px;
}

.dashboard-stat__value strong {
  font-size: 30px;
}

/* cele două cartonașe de pornire */
.dashboard-action-card {
  min-height: 344px;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: 21px;
}

/* ...iar micșorarea se face pe CONȚINUT, nu pe `min-height`: măsurat, cutiile
   erau mai înalte decât minimul lor (banner 205 din 168, cartelă 184 din 158,
   cartonaș 408 din 344), deci minimul nu lega nimic. Se taie de unde e aerul:
   titlurile (49 → 38 în banner, 40 → 30 pe cartonaș — rămân cele mai mari de
   pe ecran), rândul de sus al cartelei și marginile dintre blocuri. */

.dashboard-welcome h1 {
  font-size: clamp(30px, 2.6vw, 38px);
}

.dashboard-welcome__copy > p:not(.dashboard-kicker) {
  margin-top: 9px;
  font-size: 13px;
}

.dashboard-welcome__actions {
  margin-top: 13px;
}

/* cartela de cifre */
.dashboard-stat__top {
  margin-bottom: 11px;
}

.dashboard-stat__icon {
  width: 34px;
  height: 34px;
}

.dashboard-stat__value strong {
  font-size: 26px;
}

.dashboard-stat > a {
  margin-top: 8px;
}

/* cartonașul de pornire */
.dashboard-action-card h3 {
  font-size: clamp(24px, 2vw, 30px);
}

.dashboard-action-card__head {
  margin-bottom: 15px;
}

.dashboard-action-card__icon {
  width: 44px;
  height: 44px;
}

.dashboard-action-card > p:not(.dashboard-action-card__eyebrow) {
  margin-top: 13px;
  font-size: 12.5px;
}

.dashboard-action-card__promise {
  margin-top: 14px;
  padding: 9px 11px;
}

.dashboard-manual-steps {
  margin-top: 14px;
}

.dashboard-manual-steps > span {
  min-height: 58px;
}

.dashboard-card-cta {
  min-height: 44px;
}

/* butoanele bannerului, pe măsura lui */
.dashboard-welcome__actions .dashboard-button {
  min-height: 40px;
}

/* ...și socoteala care închide cerința. Pe 1600×900, cu topbarul de 76 și
   marginea de 22, blocurile trebuie să încapă în 900:

     76 + 22 + banner 173 + 22 + (antet 57 + cartele 160) + 22 + (antet 57
     + cartonașe 327) = 916, din care ultimii 24 sunt marginea de jos a
     cartonașului — deci butonul lui cade la ~897.

   Fiecare cifră de mai jos vine dintr-o măsurătoare pe randare, nu dintr-o
   preferință: se taie aerul, nu textul. */

.dashboard-welcome__copy {
  padding: 16px clamp(20px, 2.6vw, 36px);
}

.dashboard-kicker {
  margin-bottom: 6px;
}

/* antetul de secțiune: titlul rămâne cel mai mare de pe rândul lui */
.dashboard-section-heading h1,
.dashboard-section-heading h2,
.dashboard-reports__header h1,
.dashboard-reports__header h2 {
  font-size: clamp(21px, 1.8vw, 26px);
}

.dashboard-section-heading p,
.dashboard-reports__header p {
  margin-bottom: 2px;
}

/* cartela de cifre */
.dashboard-stat {
  padding: 13px 15px 12px;
}

.dashboard-stat__top {
  margin-bottom: 9px;
}

.dashboard-stat__icon {
  width: 30px;
  height: 30px;
}

.dashboard-stat > a {
  margin-top: 6px;
}

/* cartonașul de pornire */
.dashboard-action-card {
  padding: clamp(18px, 1.9vw, 24px);
}

.dashboard-action-card__head {
  margin-bottom: 12px;
}

.dashboard-action-card__icon {
  width: 40px;
  height: 40px;
}

.dashboard-action-card > p:not(.dashboard-action-card__eyebrow) {
  font-size: 12px;
}

.dashboard-action-card__promise {
  padding: 8px 10px;
}

/* ...iar titlurile de secțiune cer selectorul LOR: regula machetei e scrisă
   cu `.dashboard-main` în față (0,3,1), fiindcă `panou.css` se încarcă după
   `nou.css` — a mea, fără el, nu lega nimic (măsurat: 31 px, nu 26). */
.dashboard-main .dashboard-reports__header h1,
.dashboard-main .dashboard-reports__header h2,
.dashboard-main .dashboard-section-heading h1,
.dashboard-main .dashboard-section-heading h2 {
  font-size: clamp(21px, 1.8vw, 26px);
}

/* rama grilei de cartele: cele 8 px de jur împrejur se adaugă la fiecare
   ecran de lucru, iar cartelele își au deja marginea lor */
.dashboard-stat-grid {
  gap: 7px;
  padding: 7px;
  border-radius: 20px;
}

/* distanțele dintre secțiuni, ultima dată */
.dashboard-main {
  padding-top: 16px;
}

.dashboard-overview,
.dashboard-analysis,
.dashboard-reports {
  margin-top: 16px;
}

.dashboard-section-heading {
  margin-bottom: 9px;
}

.dashboard-action-card__eyebrow {
  margin-bottom: 5px;
}

.dashboard-action-card > p:not(.dashboard-action-card__eyebrow) {
  margin-top: 10px;
}

.dashboard-action-card__promise,
.dashboard-manual-steps {
  margin-top: 10px;
}

.dashboard-card-cta {
  min-height: 42px;
}

/* ...și marginea conținutului, cu selectorul machetei: ea e scrisă
   `main.dashboard-main` (0,1,1), iar `.dashboard-main` (0,1,0) nu o poate
   bate — măsurat: 30 px, nu 16. A treia regulă din sesiunea asta bătută de
   specificitate; de acum, orice override se verifică pe valoarea CALCULATĂ,
   nu pe faptul că a fost scris. */
main.dashboard-main {
  padding: 16px clamp(18px, 2.4vw, 38px) 26px;
}

/* ultimii milimetri, ca butonul cartonașului să cadă în ecran la 900 */
.dashboard-stat {
  padding: 12px 15px 10px;
}

.dashboard-action-card {
  padding: clamp(16px, 1.7vw, 22px);
}

/* casetele celor trei pași: 58 px pentru un număr și două cuvinte */
.dashboard-manual-steps > span {
  min-height: 50px;
  padding: 7px 9px;
}

/* ...iar acum minimul e cel care leagă: conținutul strâns a coborât sub el.
   324 e măsura celor două cartonașe cu tot ce au în ele. */
.dashboard-action-card {
  min-height: 324px;
}

/* CELE PATRU CARTELE RĂMÂN PE UN RÂND până la 1250 px (macheta le rupea la
   1370). Măsurat: la 1366 ruperea în două rânduri dubla secțiunea — 231 →
   394 px — și împingea „Alege cum vrei să începi" cu 180 px sub ecran, adică
   exact ce s-a strâns mai sus. Cartelele sunt acum cu 46 px mai scunde și
   încap patru pe un rând de 1046; sub 1250 se rup ca înainte. */
@media (min-width: 1251px) and (max-width: 1370px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------- butoanele albe

   FANTOMA e LUMINOASĂ de acum, fiindcă acolo stă: din opt folosiri, șapte
   sunt pe carduri albe (fișe, credite, șabloane, setări cont, drumul din
   „Analiză nouă") și doar una pe bannerul închis. Măsurat înainte: pe alb
   ieșea text #eaf3ff pe fundal alb 7% — invizibil. Bannerul își păstrează
   fantoma lui, scrisă anume mai jos. */
.dashboard-button--ghost {
  color: #2a3f6b;
  border-color: rgba(168, 192, 224, 0.9);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--neu-sus);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dashboard-button--ghost:hover {
  color: #14244a;
  border-color: #6844db;
  background: #fff;
  box-shadow: var(--neu-sus-tare);
}

.dashboard-button--ghost:active {
  box-shadow: var(--neu-jos);
}

/* ...iar pe bannerul închis rămâne cea de noapte */
.dashboard-welcome .dashboard-button--ghost {
  color: #eaf3ff;
  border-color: rgba(188, 213, 246, 0.24);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dashboard-welcome .dashboard-button--ghost:hover {
  color: #fff;
  border-color: rgba(188, 213, 246, 0.4);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: var(--neu-noapte-sus-tare);
}

/* pe banner relieful rămâne cel de noapte — fundalul de acolo e închis */
.dashboard-welcome .dashboard-button--ghost {
  box-shadow: var(--neu-noapte-sus);
}

.dashboard-welcome .dashboard-button--ghost:active {
  box-shadow: var(--neu-noapte-jos);
}

/* PASTILA DE ACȚIUNE nu mai calcă butoanele adevărate. `.dashboard-row-actions
   > a` desenează pătrățelul de 33 px cu iconiță — bun pentru „vezi" și
   „descarcă", greșit pentru un buton cu text. Rândul lat (`--lat`) poartă
   butoane, deci acolo pastila se dă la o parte. */
.dashboard-row-actions--lat > .dashboard-button,
.dashboard-row-actions--lat form > .dashboard-button {
  display: inline-flex;
  width: auto;
  height: auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 11px;
  white-space: nowrap;
}

.dashboard-row-actions--lat > a.dashboard-button--primary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(135deg, #6245e6, #7534d7 55%, #c42889);
}

.dashboard-row-actions--lat > a.dashboard-button--primary:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, #6b4dee, #7f3ae0 55%, #d02d93);
}

/* ...și coloana lor primește lățimea de care are nevoie: 11% dintr-un tabel
   de 1300 px înseamnă 143, iar două butoane cu text cer 230. Se ia din
   coloana persoanei, cea mai largă (32%). */
.dashboard-table--cu-butoane th:nth-child(4) { width: 20%; }
.dashboard-table--cu-butoane th:nth-child(6) { width: 23%; }

/* --------------------------------------------------------------- paginarea

   Vederea casei (`resources/views/componente/paginare.blade.php`). Pastile
   mărunte, cifre cu lățime egală, starea listei la stânga. */
.paginare {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.paginare__stare {
  margin: 0;
  color: #576682;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.paginare__lista {
  display: flex;
  gap: 5px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.paginare__numar,
.paginare__sageata,
.paginare__puncte {
  display: grid;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  place-items: center;
  border: 1px solid rgba(179, 201, 228, 0.77);
  border-radius: 10px;
  color: #40527a;
  background: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.paginare__puncte {
  border-color: transparent;
  background: none;
  color: #90a0bd;
}

.paginare__numar:hover,
.paginare__sageata:hover {
  color: #fff;
  border-color: #6844db;
  background: #6844db;
}

.paginare__numar.is-activa {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #6245e6, #7534d7);
}

.paginare__sageata .ico {
  width: 15px;
  height: 15px;
}

.paginare__sageata.is-stinsa {
  opacity: 0.42;
  pointer-events: none;
}

.panou-paginare {
  margin-top: 12px;
}

/* ------------------------------------------------- setări cont, două taburi

   Cerute de medic: „la setări cont poți să faci două taburi, unul cu cine
   ești și celălalt cu parola, frumos cu icoane în inputuri". Taburile sunt
   legături adevărate (`?tab=parola`), nu comutatoare din JavaScript. */
.cont-taburi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px;
  border: 1px solid rgba(179, 203, 231, 0.75);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 19px 45px rgba(45, 75, 119, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.cont-tab {
  display: flex;
  gap: 11px;
  align-items: center;
  min-height: 56px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #40527a;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.cont-tab > .ico {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  color: #5e3bd9;
  background: rgba(104, 68, 219, 0.1);
}

.cont-tab span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.cont-tab strong {
  font-size: 13px;
  font-weight: 750;
}

.cont-tab small {
  color: #576682;
  font-size: 11px;
}

.cont-tab:hover {
  border-color: rgba(179, 203, 231, 0.75);
  background: rgba(255, 255, 255, 0.72);
}

.cont-tab.is-activ {
  color: #14244a;
  border-color: transparent;
  background: linear-gradient(110deg, rgba(98, 69, 230, 0.13), rgba(117, 52, 215, 0.09));
  box-shadow: inset 0 0 0 1px rgba(104, 68, 219, 0.22);
}

.cont-tab.is-activ > .ico {
  color: #fff;
  background: linear-gradient(135deg, #6245e6, #7534d7);
}

@media (max-width: 720px) {
  .cont-taburi {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------- desenul din câmp */
.camp-cu-ico {
  position: relative;
  display: block;
}

.camp-cu-ico > .ico {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 17px;
  height: 17px;
  color: #7d8dab;
  pointer-events: none;
  transform: translateY(-50%);
}

.camp-cu-ico > input,
.camp-cu-ico > select {
  width: 100%;
  padding-left: 39px;
}

.camp-cu-ico:focus-within > .ico {
  color: #5e3bd9;
}

/* „Arată" stă mai departe în dreapta: `nou.js` îl pune în PĂRINTELE câmpului,
   iar părintele e de acum chiar învelișul cu desen. Câmpul face loc
   amândurora — desenul la stânga, butonul la dreapta. */
.camp-cu-ico.camp-parola > input {
  padding-right: 44px;
}

/* ...iar butonul se strânge: cele trei câmpuri de parolă stau câte trei pe
   rând (206 px), din care desenul lua 39 și butonul 84 — rămâneau 83 px de
   text. Cu butonul la 48, rămân 101. */
.camp-cu-ico.camp-parola .camp-parola__ochi {
  width: 28px;
  height: 28px;
}

/* ================================================================== §197j
   LITERA CARE SE POATE CITI — măsurat pe randare, nu presupus.

   TITLURILE DE PE SUPRAFEȚELE ÎNCHISE ERAU NEVĂZUTE. `stil.css` dă
   `h1 { color: var(--text) }` și `h3` la fel — bleumarin. O regulă pusă chiar
   pe element bate culoarea albă MOȘTENITĂ, iar bannerul chiar declară
   `color: #fff` pe el însuși: moștenirea pierde în fața oricărei reguli care
   nimerește elementul, oricât de slabă ar fi. Măsurat, pe randare:

       „Bun venit,"        bleumarin pe bannerul închis   1,11
       „Analiză Automată"  bleumarin pe cartonașul AI     2,08

   Se vedea doar bucata din `<span>`, care are culoarea ei — de aceea pe ecran
   rămânea un gol înaintea numelui, iar cartonașul părea să înceapă cu „cu AI".
   Defectul e mai vechi decât §197 (verificat: nicio declarație de culoare n-a
   fost scoasă de aici); §197 doar l-a scos la iveală măturând paginile.

   Cartonașul MANUAL e deschis, deci NU intră: acolo bleumarinul e corect. */
.dashboard-welcome :is(h1, h2, h3),
.dashboard-action-card--ai :is(h1, h2, h3) {
  color: #fff;
}

/* CULOAREA CARTELEI, când e LITERĂ măruntă. Aceeași nuanță e și pastilă, și
   desen, și rama de la trecerea mausului — acolo e bună. Ca text de 7-11px pe
   card alb pica: albastru 3,52 · corai 3,90 · verde 3,38. Deci cerneala se
   desparte de umplere, ca la `--color-danger` / `--color-danger-fill`: umplerea
   rămâne vie, litera se închide până trece 4,5. Violetul trecea deja (6,16) și
   NU se atinge — o valoare schimbată degeaba e o valoare care minte. */
.dashboard-stat--violet { --stat-text: #673ee1; }
.dashboard-stat--blue { --stat-text: #127ab8; }
.dashboard-stat--coral { --stat-text: #dd206d; }
.dashboard-stat--green { --stat-text: #0b8565; }

.dashboard-stat > a,
.dashboard-stat__trend {
  color: var(--stat-text, var(--stat-color));
}

/* --------------------------------------------- soldul din capul secțiunii
   (§197) Ține locul cartelei mari scoase de pe /credite: aceeași cifră, în
   capul secțiunii care o folosește. Nu e o cartelă — e o pastilă de citit
   dintr-o privire, alături de preț. */
.credite-sold {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
}

.credite-sold__acum {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(104, 68, 219, 0.22);
  border-radius: 11px;
  color: #3c2a86;
  background: linear-gradient(110deg, rgba(98, 69, 230, 0.11), rgba(117, 52, 215, 0.07));
  font-size: 12px;
  font-weight: 700;
}

.credite-sold__acum .ico {
  width: 15px;
  height: 15px;
  color: #5e3bd9;
}

.credite-sold__acum strong {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.credite-sold__pret {
  color: #607290;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================================================== §197l
   DESENUL DIN BANNER — se văd sateliții.

   Măsurat: caseta e 462x171, iar inelele erau 195 și 258, deci mai ÎNALTE
   decât ea; `overflow: hidden` le tăia, iar punctele de pe ele ieșeau din
   ramă. Acum amândouă intră în casetă, cu aer între ele și miez:

       miez 84  ·  inel 112  ·  inel 152   (casetă 171)

   Miezul nu mai are text, deci semnul poate crește și marginea de sub el
   dispare — ea era pusă ca să despartă semnul de numele de dedesubt. */
.dashboard-art-core {
  width: 84px;
  height: 84px;
}

.dashboard-art-core .material-symbols-outlined,
.dashboard-art-core .ico {
  margin-bottom: 0;
  font-size: 33px;
}

.dashboard-orbit--one {
  width: 112px;
  height: 112px;
}

.dashboard-orbit--two {
  width: 152px;
  height: 152px;
}

/* ------------------------------------------------ butonul de pe rândul lat

   (§197) Măsurat: `.panou-rand` aliniază la BAZĂ, dar alinierea flex se face
   pe cutia CU margine, iar câmpul are 12 px dedesubt. Deci butonul atârna cu
   12 px sub select — și pe rândul de cumpărare, și pe cel de rambursare:

       select   326 → 371        buton  340 → 383
       input    594 → 638        buton  607 → 650

   Marginea se scoate DOAR aici, unde câmpurile stau umăr la umăr cu butonul;
   în formularele obișnuite ea desparte rândurile și rămâne neatinsă. */
.panou-rand > .form-group {
  margin-bottom: 0;
}

/* ------------------------------- tabelele de administrare ies din card (§201)

   Semnalat de medic cu captura de pe /admin/fise: ultima coloană („Credite")
   cădea lipită de muchia cardului, iar restul aveau aer la stânga.

   CAUZA, măsurată: regula de mai sus dă fiecărui copil al cardului 25 px de
   margine laterală, iar `stil.css` dă tabelelor `width: 100%`. Procentul se
   socotește însă din containerul ÎNTREG, nu din ce rămâne după margini — deci
   tabelul iese pe dreapta cu exact suma lor:

       card 1233 · tabel 1231 · stânga 26 · dreapta −24

   Cardul are `padding: 0` și `overflow: visible`, deci nimic nu taia și nimic
   nu se plângea. Sunt 23 de tabele pe 12 ecrane de administrare, toate la fel.

   Se corectează LĂȚIMEA, nu marginile: marginile sunt aerul cardului și îl
   împart cu celelalte blocuri. Doar tabelele care sunt CHIAR copii ai cardului
   primesc regula; cele dintr-un înveliș își iau oricum 100% din el. */
.dashboard-main .card > table,
.dashboard-main .p-card > table {
  width: calc(100% - 50px);
}

/* =============================================== §205
   CARDURILE DE ADMINISTRARE — cât ține conținutul, nu invers.

   Medicul: „chiar este nevoie ca cardurile să fie așa de mari?" și „cum ai
   făcut la utilizator, fă și la admin: aranjate, mai mici, uniform".

   1. CARTELA avea `min-height: 180px` pentru ~103 px de conținut — adică
      77–87 px de gol în FIECARE, pe fiecare ecran cu cartele (Panou, Plăți,
      Suport). Rezerva era pusă pentru cartelele care au un rând jos
      (`.p-cartela-jos`, lipit cu `margin-top:auto`); acolo rămâne, în rest
      cade. Se taie de unde e aerul, nu din literă. */
.p-cartela {
  padding: 16px;
  min-height: 0;
}

.p-cartela:has(.p-cartela-jos) {
  min-height: 148px;
}

/* 2. GRILA CARTELELOR urmează NUMĂRUL lor: pe „Suport" sunt trei, iar a
      patra pistă rămânea goală, așa că cele trei nu ajungeau la marginea
      cardului. NU `auto-fit` — comentariul din `panou.css` spune de ce (lasă
      o cartelă orfană pe al doilea rând, măsurat 3+1); aici se numără chiar
      copiii. Doar peste 1280 px, ca treptele machetei să rămână neatinse. */
@media (min-width: 1281px) {
  .p-cartele:has(> :last-child:nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .p-cartele:has(> :last-child:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 3. RÂNDURILE DE CARDURI nu mai întind cardul scurt la înălțimea celui
      lung. Măsurat pe „Panou de control": 155 și 109 px de gol sub conținut.
      Marginea de jos devine zimțată, și e alegerea mai bună dintre două —
      golul DIN card se citește ca o greșeală, golul DINTRE carduri ca aer.
      Aceeași hotărâre ca la §197, pe ecranele de lucru. */
.p-rand-2,
.p-rand-3 {
  align-items: start;
}


/* ============================================================ §206
   NOTIFICĂRILE — clopoțelul numără, iar mesajul are unde să stea.

   Clasele scrise în marcaj nu dovedesc că există un stil pentru ele
   (lecția §198 din lsjml): cele patru de mai jos au fost căutate în
   TOATE cele patru foi pe care le încarcă șina de lucru — zero reguli.
   Restul (`pastila`, `p-bine`, `stins`, `mic`) trăiesc în `stil.css`,
   care e încărcată de coajă, deci se rezolvă. */

/* 1. NUMĂRUL de pe clopoțel. Carminul casei, cu alb pe el (5,36 măsurat
      la §158) — nu o culoare nouă. Inelul în culoarea barei desparte
      pastila de glifă, altfel cifra pare lipită de clopot. */
.dashboard-clopotel-numar {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--auriu-umplere);
  box-shadow: 0 0 0 2px var(--fundal);
  color: var(--alb);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* Butonul cu semn primește chenarul carmin: cifra singură e mică, iar
   semnul trebuie să se vadă și din colțul ochiului. */
.dashboard-icon-button--cu-semn {
  border-color: var(--auriu-chenar);
  color: var(--auriu-umplere);
}

/* 2. RÂNDUL de notificare. Cele necitite poartă dunga carmin — același
      tipar ca la restul listelor de lucru. */
.notif-rand {
  padding: 12px 14px;
  border: 1px solid var(--chenar);
  border-radius: 12px;
  background: var(--fundal);
}

.notif-rand + .notif-rand {
  margin-top: 10px;
}

.notif-rand--noua {
  border-left: 3px solid var(--auriu-umplere);
  background: var(--auriu-palid);
}

.notif-rand__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.notif-rand__text {
  margin: 0;
  color: var(--text-mediu);
  line-height: 1.55;
}

/* Pastila „nouă" poartă carminul dungii, nu verdele de succes:
   verdele înseamnă „gata", iar aici înseamnă „necitit" — semnalul
   spunea pe dos și se bătea cu dunga de lângă el. */
.notif-noua {
  background: var(--auriu-chenar);
  color: var(--auriu-inchis);
}

/* 3. FORMULARUL administratorului, strâns într-un `details` ca rândul de
      tabel să rămână scurt. Fără JavaScript: `details` e HTML curat. */
.notif-trimite > summary {
  cursor: pointer;
  color: var(--zima-text);
  font-size: .875rem;
  font-weight: 600;
  list-style: none;
}

.notif-trimite > summary::-webkit-details-marker {
  display: none;
}

.notif-trimite > summary::before {
  content: "✉︎";
  margin-right: 5px;
}

.notif-trimite[open] > summary::before {
  content: "✕";
}

.notif-trimite[open] > summary {
  color: var(--text-stins);
}

.notif-trimite > summary {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 5px;
}

.notif-trimite > summary::before {
  grid-column: 1;
  width: 1em;
  margin-right: 0;
  text-align: center;
}

.notif-trimite__deschide,
.notif-trimite__inchide {
  grid-column: 2;
  grid-row: 1;
}

.notif-trimite:not([open]) .notif-trimite__inchide,
.notif-trimite[open] .notif-trimite__deschide {
  visibility: hidden;
}

.notif-trimite[open] > summary {
  margin-bottom: 8px;
}

.notif-trimite {
  position: relative;
}

.notif-trimite[open] > form {
  position: absolute;
  right: 0;
  z-index: 30;
  width: 260px;
  padding: 10px;
  border: 1px solid var(--chenar);
  border-radius: 10px;
  background: var(--fundal);
  box-shadow: 0 10px 28px rgba(22, 33, 58, .16);
  text-align: left;
}

.notif-trimite:not([open]) > form {
  display: none;
}

.notif-trimite:focus-within > form {
  z-index: 31;
}

.notif-trimite__renunta {
  margin-left: 8px;
}

.notif-trimite textarea {
  width: 100%;
  resize: vertical;
}


/* ============================================================ §207
   RANDURILE CARE SE Încheie DREPT — fără să se umple de gol.

   Semnalat de medic pe „Panou de control": *„la admin chiar nu găsești o
   formă de aranjare"*. Măsurat: cele trei carduri aveau **309 / 354 / 441
   px**, adică marginea de jos zimțată cu **131**; rândul de dedesubt, cu 195.

   §205 le lăsase DELIBERAT la înălțimea lor (`align-items: start`), fiindcă
   întinse lăsau gol În card — chiar aici se măsuraseră 155 și 109 px. Deci
   și una, și alta dădeau prost, iar alegerea părea Între două rele.

   IEȘIREA nu e alinierea, e CONȚINUTUL: cardurile astea au desene, care pot
   să CREASCĂ. Întinse cu desenul lăsat mic, rămâne golul de la §205 (măsurat
   iar: 167 și 154). Întinse cu desenul care umple, rămâne **zero**.

   Măsurat, la 1600: zimțat **131 → 0**, graficul 119 → 250 px, iar inelul își
   păstrează rotunjimea (`preserveAspectRatio` implicit îl încadrează și îl
   centrează, nu îl turtește).

   Se cere ANUME, cu o clasă pe rând — nu pe toate `.p-rand-*`. Un card al
   cărui conținut NU poate crește (o cifră și o etichetă) trebuie să rămână la
   înălțimea lui, altfel se Întoarce chiar defectul pe care §205 l-a reparat.
   ============================================================ */
.p-rand-egal {
  align-items: stretch;
}

@media (min-width: 1200px) {
  .p-rand-egal > .p-card {
    max-height: 300px;
  }

  /* `auto`, nu `scroll`: cardurile care incap n-au bara deloc. Se prinde
     ORICE copil in afara de cap — nu doar `.p-card-corp`, fiindca nu toate
     cardurile isi numesc corpul la fel. */
  .p-rand-egal > .p-card > :not(.p-card-cap) {
    min-height: 0;
    overflow-y: auto;
  }
}

.p-rand-egal > .p-card {
  display: flex;
  flex-direction: column;
}

.p-rand-egal > .p-card > .p-card-corp {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

/* Desenul umple ce i s-a dat. `preserveAspectRatio` (implicit) îl ține
   nedeformat — inelul rămâne rotund, graficul se înalță. */
.p-rand-egal > .p-card > .p-card-corp > svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
}


/* ============================================================ §209
   DRUMURILE UNEI ADJUDECĂRI — LT-ul numit se dă ca BUTON.

   Cardul de acuză avea un singur buton („Consemnează în caz"). Când
   adjudecarea știe sub ce LT poate intra fraza — anemia posthemoragică sub
   „Ruptură vasculară" — drumul se dă la apăsare, nu ca text pe care omul
   să-l caute singur. Butonul NU adaugă leziunea: duce la căutarea ei.

   Regula există fiindcă pot fi MAI MULTE drumuri: atunci stau pe un rând,
   cu aer între ele, și se rup abia când nu încap. */
.caz-drumuri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* VARIANTELE DIN ACT, sub randul punctat (09.09.2026): citate scurte,
   fiecare pe randul lui, retrase ca sa se citeasca drept temei, nu ca text
   al fisei. */
.fisa-citate {
  margin: 3px 0 0 0;
  padding-left: 9px;
  border-left: 2px solid rgba(120, 132, 160, 0.35);
}

.fisa-citate > div + div {
  margin-top: 2px;
}


/* ============================================================ §274
   ECRANELE DE LUCRU, RAFINATE — butoanele din Setări cont, notificările în
   bara din stânga, cele două panouri.

   Cerut de medic: „aranjează și butoanele frumos" (Setări cont), „notificări
   nu are un buton în bara din stânga, decât clopoțelul", „rafinează dashul
   de utilizator și pe cel de admin". Fiecare regulă de aici pleacă dintr-o
   măsurătoare pe pagina randată, la 1280 px.
   ============================================================ */

/* 1. RÂNDUL DE ACȚIUNI al unui formular de cont. „Salvează", „Schimbă
      parola" și „Șterge contul definitiv" stăteau LIPITE de ultimul rând de
      câmpuri — 0 px, măsurat —, fiindcă `.panou-rand .form-group` n-are
      margine. Aceeași linie și același aer ca `.tabel-actiuni` din
      formularul de comandă; butonul rămâne la STÂNGA, unde nu-l poate
      acoperi butonul de accesibilitate din colțul din dreapta. */
.panou-actiuni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(205, 219, 235, 0.82);
}

.panou-actiuni__nota {
  flex: 1 1 240px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* 2. NUMĂRUL NECITITELOR, pe intrarea „Notificări": carminul clopoțelului
      (alb pe el: 5,36 — §158), lipit de marginea din dreapta a intrării. */
.dashboard-nav__numar {
  min-width: 19px;
  height: 19px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--auriu-umplere);
  color: var(--alb);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

/* 3. AER SUB CONȚINUT pentru butonul de accesibilitate. El stă FIX în colț
      (52 px, la 22 px de margini), iar la capătul paginii acoperea ce era
      dedesubt — pe panou, chiar legătura „Despre metodă". 22 + 52 + 22 =
      96 px: la derularea până jos, ultimul bloc se oprește deasupra lui. Sub
      681 px butonul are alt loc (deasupra barei de jos), deci regula nu
      coboară acolo. */
@media (min-width: 681px) {
  main.dashboard-main {
    padding-bottom: 96px;
  }
}

/* 4. PANOUL DE ADMIN: cartelele pe UN rând de la 1251 px, ca pe panoul de
      utilizator (acolo pragul a coborât de la 1370 la 1250 tocmai ca să nu
      se dubleze înălțimea). Măsurat la 1280: două rânduri de 116 px pentru
      patru cifre. Grila urmează numărul cartelelor, ca la §205 — o pagină cu
      trei nu primește o a patra pistă goală. */
@media (min-width: 1251px) {
  .p-cartele:has(> :last-child:nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .p-cartele:has(> :last-child:nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .p-cartele:has(> :last-child:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 5. GRAFICUL ȘI INELUL pe un rând, ACTIVITATEA dedesubt, pe toată lățimea.
      La 1280 rândul de trei nu-și încăpea conținutul: legenda graficului și
      „Vezi toate" treceau pe al doilea rând (capete de 110 px în loc de 72),
      iar lista de activitate avea o cutie de 148 px pentru 343 px de rânduri
      — derula înăuntrul cardului, pe care §207 îl ține la cel mult 300 px.
      Graficul are nevoie de lățime, inelul nu: 1,8 la 1. */
.p-rand-grafice {
  margin-bottom: 22px;
}

@media (min-width: 900px) {
  .p-rand-grafice {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  }
}

.p-card-activitate {
  margin-bottom: 22px;
}

/* Rândul de activitate (numai în cardul panoului: Categorii și Suport au
   liste cu aceleași clase și nu se ating): pictograma aliniată cu titlul
   cardului (lista are deja marginea cardului), ora lângă titlu, subiectul — de obicei o adresă
   de e-mail — pe un singur rând, întreg la trecerea mausului. */
.p-card-activitate .p-activitate-rand {
  align-items: center;
  padding: 9px 0;
}

.p-card-activitate .p-activitate-rand .p-patrat {
  width: 28px;
  height: 28px;
}

.p-card-activitate .p-activitate-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;
}

.p-card-activitate .p-activitate-titlu {
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
}

.p-card-activitate .p-activitate-cand {
  grid-row: 1;
  grid-column: 2;
  margin-top: 0;
  white-space: nowrap;
}

.p-card-activitate .p-activitate-sub {
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pe toată lățimea încap toate trei pe UN rând: titlul, subiectul, ora. */
@media (min-width: 900px) {
  .p-card-activitate .p-activitate-text {
    grid-template-columns: minmax(0, 15em) minmax(0, 1fr) auto;
  }

  .p-card-activitate .p-activitate-sub {
    grid-row: 1;
    grid-column: 2;
  }

  .p-card-activitate .p-activitate-cand {
    grid-column: 3;
  }
}

/* =====================================================================
   §275 — ADMINISTRAREA FACTURILOR
   Registrul pe luni: filtrele, rândul de acțiuni, tabelul cu două
   rânduri de text pe celulă, documentele. Pastilele verde și roșie
   lipseau din panou (erau doar gri, albastru, auriu).
   ===================================================================== */
.p-pastila-verde { background: #e7f6ee; color: #17663b; }
.p-pastila-rosu  { background: #fdecec; color: #a3242f; }

.facturi-filtre { padding: 2px 18px 14px; gap: 10px 12px; }
.facturi-filtre label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .045em;
  color: var(--p-cerneala-3); font-weight: 650;
}
.facturi-filtre select,
.facturi-filtre input[type="search"] { min-height: 38px; }
.facturi-cauta { flex: 1 1 240px; }
/* capătul primului rând de filtre: căutarea, luna, ordinea; al doilea
   rând le strânge pe cele care îngustează lista */
.facturi-rupe { flex-basis: 100%; height: 0; }
.facturi-cauta input { width: 100%; }
.facturi-filtre .buton .ico,
.facturi-actiuni .buton .ico { width: 15px; height: 15px; margin-right: 6px; }

.facturi-actiuni {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--p-chenar-slab);
}
.facturi-actiuni form { margin: 0; }
.facturi-nota { font-size: .76rem; color: var(--text-stins); }

/* Tabelul are șase coloane într-o cutie de ~876 px (la 1280): cu umplutura
   obișnuită de 18 px ieșea 72 px peste ea și cerea derulare laterală.
   Capetele rămân la 18, ca marginea cardului. */
.facturi-tabel th, .facturi-tabel td { padding-left: 11px; padding-right: 11px; }
.facturi-tabel th:first-child, .facturi-tabel td:first-child { padding-left: 18px; }
.facturi-tabel th:last-child, .facturi-tabel td:last-child { padding-right: 18px; }
.facturi-tabel td { height: auto; padding-top: 11px; padding-bottom: 11px; }
.facturi-sub { font-size: .72rem; color: var(--text-stins); margin-top: 2px; }
.facturi-nr { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* adresa de e-mail se taie cu puncte, nu rupe rândul: întreagă stă în «title» */
.facturi-mail { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facturi-tabel .p-pastila, .facturi-pb summary { white-space: nowrap; }

.facturi-documente { align-items: center; flex-wrap: nowrap; gap: 6px; }
.facturi-documente form { margin: 0; }
/* O PERECHE pe document: numele îl deschide în filă nouă, săgeata îl
   descarcă. Lipite, ca să se citească drept un singur lucru. */
.facturi-pereche { display: inline-flex; border-radius: 8px; overflow: hidden; }
.facturi-doc {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 9px;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: var(--p-mov);
  background: var(--p-mov-pal); text-decoration: none; white-space: nowrap;
}
.facturi-doc--jos { padding: 0 7px; border-left: 1px solid #fff; }
/* pe fundalul mai plin, cerneala urcă un ton: movul obișnuit ar da 4,16 */
.facturi-doc:hover { background: #e3d9ff; color: var(--p-mov-inchis); text-decoration: none; }
.facturi-doc .ico { width: 14px; height: 14px; }

.facturi-pb summary {
  display: inline-block; cursor: pointer; list-style: none;
  padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 600;
  background: #fff4e3; color: #8a5200;
}
.facturi-pb summary::-webkit-details-marker { display: none; }
.facturi-lista { margin: 6px 0 0; padding-left: 16px; font-size: .74rem; line-height: 1.45; }
.facturi-pb .facturi-lista { max-width: 34ch; color: var(--p-cerneala-2); }

.facturi-despre { margin-top: 18px; }
.facturi-despre p { font-size: .84rem; color: var(--text-mediu); margin: 0 0 8px; max-width: 75ch; }
.facturi-despre p:last-child { margin-bottom: 0; }

/* ======================================================================
   §277 — CE A RĂSPUNS AI-UL, pentru administrator
   Butonul din lista fișelor nu se rupe pe două rânduri (măsurat: 150 px,
   două rânduri, rândul lui 71 px față de 64 alături). Pe pagina lui, primul
   rând al desfășurării nu mai adună marginea panoului de pe comandă peste
   umplutura cardului: 54 px sub titlu, acum cât umplutura.
   ====================================================================== */
.fise-ai-buton { white-space: nowrap; }
.fise-ai-buton .ico { width: 15px; height: 15px; margin-right: 6px; }
.fisa-ai-corp > p:first-of-type { margin-top: 0; }

/* ======================================================================
   §435 — BANNERUL PRELANSĂRII, pe prima pagină (hotărârea medicului,
   18.09.2026). Marginile laterale sunt chiar ale eroului (44 / 22 / 18 px),
   ca bannerul să stea pe aceeași linie cu textul de sub el. Semnul violet
   poartă litera albă: 7,1:1; textul e cerneala paginii pe o spoială de
   6–7% — practic pe alb.
   ====================================================================== */
.prelansare-banda {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 18px 44px 0;
  padding: 12px 18px;
  border: 1px solid rgba(89, 49, 217, 0.22);
  border-radius: 16px;
  color: var(--navy);
  background:
    linear-gradient(90deg, rgba(89, 49, 217, 0.07), rgba(30, 159, 227, 0.06)),
    var(--surface);
  font-size: 14px;
  line-height: 1.5;
  scroll-margin-top: 96px;
}
.prelansare-banda p { flex: 1 1 320px; margin: 0; }
/* 439: bannerul are doua paragrafe (textul medicului) - stau in aceeasi coloana, unul sub altul */
.prelansare-banda__text { flex: 1 1 320px; }
.prelansare-banda__text p { flex: none; margin: 0 0 6px; }
.prelansare-banda__text p:last-child { margin-bottom: 0; }
.prelansare-banda__semn {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--purple);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 820px) {
  .prelansare-banda { margin: 14px 22px 0; }
}
@media (max-width: 520px) {
  .prelansare-banda { margin: 12px 18px 0; padding: 12px 14px; }
}

/* ======================================================================
   §438 — PĂREREA despre fișa din prelansare, pe pagina comenzii: cele trei
   răspunsuri pe un rând (se rup pe ecran îngust), fără chenarul implicit
   al lui <fieldset>.
   ====================================================================== */
.parere-raspunsuri {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 4px 0 14px;
  padding: 0;
  border: 0;
}
.parere-raspunsuri label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}