/* ==========================================================================
   Bibancalia — "Istituto"
   Sistema visivo sovrapposto ai bundle: carta neutra, inchiostro quasi nero,
   accento lime, tipografia grotesque, forme squadrate. Nessuna modifica
   alla logica dell'applicazione.
   Caricato DOPO index-D55YWTpv.css.
   ========================================================================== */

:root,
:host {
  /* — Superfici neutre — */
  --color-ground: #f6f0e4;
  --color-surface: #fffdf8;
  --color-raised: #efe6d5;
  --color-line: rgba(11, 59, 46, 0.13);
  --color-line-strong: rgba(11, 59, 46, 0.38);
  --color-track: #e3dbc9;

  /* — Inchiostro — */
  --color-fg: #0b3b2e;
  --color-muted: #5d6a62;
  --color-faint: #8b948c;

  /* — Accento: inchiostro pieno, con lime come segnale — */
  --color-accent: #0b3b2e;
  --color-accent-dim: #14503f;
  --color-accent-deep: #082d22;
  --color-accent-ink: #f6f0e4;

  /* — Stati — */
  --color-danger: #b3261e;
  --color-success: #1f7a4d;

  /* — Forme squadrate — */
  --radius-control: 6px;
  --radius-panel: 10px;
  --radius-round: 9999px;

  /* — Tipografia e ombre — */
  --ui-display: "Inter Variable", Inter, "Helvetica Neue", system-ui, sans-serif;
  --ui-body: "Inter Variable", Inter, "Helvetica Neue", system-ui, sans-serif;
  --ui-lime: #e8d5ae;
  --ui-lime-deep: #cbb894;
  --ui-ink: #0b3b2e;
  --ui-paper: #f6f0e4;
  --ui-shadow: 0 1px 0 rgba(11, 59, 46, 0.08), 10px 10px 0 rgba(11, 59, 46, 0.08);
  --ui-shadow-soft: 0 18px 40px -28px rgba(11, 59, 46, 0.35);
  --ui-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='7' fill='%230b3b2e'/%3E%3Cpath d='M10 31V20a10 10 0 0 1 20 0v11' fill='none' stroke='%23e8d5ae' stroke-width='4.4'/%3E%3Ccircle cx='20' cy='23.5' r='3' fill='%23e8d5ae'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
  background-color: var(--color-ground);
}
body {
  background-color: var(--color-ground);
  color: var(--color-fg);
  font-family: var(--ui-body);
  font-feature-settings: "cv05" 1, "cv11" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--ui-lime);
  color: var(--ui-ink);
}
#app, body > div {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Tipografia: grotesque stretta, senza grazie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--ui-display);
  font-weight: 620;
  letter-spacing: -0.045em;
  color: var(--color-fg);
  text-wrap: balance;
  font-variation-settings: normal;
}
h1 em, h2 em, h3 em,
h1 strong, h2 strong, h3 strong,
h1 i, h2 i, h3 i {
  font-style: normal;
  font-weight: inherit;
}
p, li, dd, dt, label, input, select, button, textarea {
  font-family: var(--ui-body);
  letter-spacing: 0.002em;
}
.vel-measure {
  line-height: 1.62;
}

/* Etichette: mono, maiuscole, lime su fondo scuro / inchiostro su carta */
.vel-label {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-fg);
}
.vel-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
mark, .ui-hl {
  background: var(--ui-lime);
  color: var(--ui-ink);
  padding: 0 0.18em;
  border-radius: 0.12em;
}

/* --------------------------------------------------------------------------
   Intestazione
   -------------------------------------------------------------------------- */
header.sticky {
  background-color: color-mix(in oklab, var(--color-ground) 92%, transparent) !important;
  border-bottom: 1px solid var(--color-line-strong) !important;
  backdrop-filter: blur(12px) saturate(1.05);
}
header.sticky > div {
  height: 4.2rem !important;
}

/* Logo: marchio-portale + parola in minuscolo */
.vel-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 0.62rem;
}
.vel-logo__mark,
.vel-logo > svg {
  display: none !important;
}
.vel-logo::before {
  content: "";
  width: 1.95rem;
  height: 1.95rem;
  flex: none;
  background: var(--ui-mark) center / contain no-repeat;
}
.vel-logo__word {
  font-family: var(--ui-display) !important;
  font-weight: 660 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.05em !important;
  text-transform: lowercase;
  color: var(--color-fg) !important;
}
.vel-logo__word--large {
  font-size: 2rem !important;
}

/* --------------------------------------------------------------------------
   Pulsanti, campi, superfici
   -------------------------------------------------------------------------- */
.vel-sim-card,
.rounded-panel {
  border-radius: var(--radius-panel) !important;
}
button.rounded-control,
a.rounded-control,
input.rounded-control,
.vel-select > button,
[class*="rounded-control"] {
  border-radius: var(--radius-control) !important;
}
button.bg-accent {
  letter-spacing: 0.01em;
}
button.bg-accent:hover {
  background-color: var(--color-accent-dim) !important;
}

/* Cursore del range: binario inchiostro, cursore lime */
.vel-range-wrap {
  --vel-fill: 50%;
}
.vel-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.6rem;
  background: transparent;
  cursor: pointer;
}
.vel-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 0;
  background: linear-gradient(to right, var(--ui-ink) 0 var(--vel-fill), var(--color-track) var(--vel-fill) 100%);
}
.vel-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--ui-lime);
  border: 2px solid var(--ui-ink);
  box-shadow: 0 0 0 3px var(--ui-paper);
}
.vel-range::-moz-range-track {
  height: 4px;
  border-radius: 0;
  background: var(--color-track);
}
.vel-range::-moz-range-progress {
  height: 4px;
  background: var(--ui-ink);
}
.vel-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ui-lime);
  border: 2px solid var(--ui-ink);
}

/* --------------------------------------------------------------------------
   Hero: superficie d'inchiostro
   -------------------------------------------------------------------------- */
section#top {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.035), transparent 42%),
    var(--ui-ink) !important;
  color: var(--ui-paper) !important;
}
section#top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(246, 240, 228, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 240, 228, 0.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}
section#top h1,
section#top h2,
section#top h3,
section#top .text-fg {
  color: var(--ui-paper) !important;
}
section#top .vel-label {
  color: var(--ui-lime) !important;
}
section#top .text-muted,
section#top .text-faint {
  color: rgba(246, 240, 228, 0.66) !important;
}
section#top .text-accent,
section#top .vel-hero-title__line.text-accent {
  color: var(--ui-lime) !important;
  font-style: normal;
}
section#top .border-line,
section#top .border-line-strong {
  border-color: rgba(246, 240, 228, 0.22) !important;
}
section#top .bg-surface {
  background-color: var(--color-surface) !important;
}
section#top .vel-sim-card {
  color: var(--color-fg) !important;
  border-color: var(--ui-ink) !important;
  box-shadow: 10px 10px 0 rgba(232, 213, 174, 0.22);
  background: var(--color-surface) !important;
}
section#top .vel-sim-card .vel-label {
  color: var(--color-fg) !important;
}

/* --------------------------------------------------------------------------
   Dialoghi (registrazione, licenza, avvisi)
   -------------------------------------------------------------------------- */
dialog.vel-license,
dialog.vel-reg {
  background: transparent;
  border: 0;
}
dialog.vel-license::backdrop,
dialog.vel-reg::backdrop,
dialog.vel-bn::backdrop,
dialog.vel-wd::backdrop,
dialog.vel-cdraw::backdrop,
dialog.vel-ciban::backdrop,
dialog.vel-l5w::backdrop {
  background: rgba(11, 59, 46, 0.62);
  backdrop-filter: blur(3px);
}
dialog.vel-reg .vel-reg__form {
  border: 1px solid var(--ui-ink);
  border-radius: var(--radius-panel);
  box-shadow: 14px 14px 0 rgba(11, 59, 46, 0.16);
}
dialog.vel-reg input {
  border-color: var(--color-line-strong) !important;
}
dialog.vel-reg input:focus-visible {
  border-color: var(--ui-ink) !important;
}
.vel-license__shell {
  border: 1px solid var(--ui-ink);
  border-radius: var(--radius-panel);
  box-shadow: 14px 14px 0 rgba(11, 59, 46, 0.16);
}

/* --------------------------------------------------------------------------
   Tabelle e ritocchi finali
   -------------------------------------------------------------------------- */
table {
  border-color: var(--color-line) !important;
}
th, td {
  border-color: var(--color-line) !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--color-faint);
}