/*
 * Parlerei — sistema de diseño compartido.
 *
 * Antes cada una de las 11 páginas traía su propio bloque <style>: ~25 KB de
 * CSS duplicado, tres paletas distintas y sinónimos para lo mismo (.sec y
 * .secondary, .mut y .muted, .err y .error). Acá viven los tokens y los
 * componentes; cada página conserva solo su layout propio.
 *
 * Criterio: es una herramienta de trabajo, no una landing. Densa pero
 * respirable, bordes en vez de sombras, un solo acento. Que se lea rápido a las
 * tres de la tarde con veinte conversaciones abiertas.
 */

:root {
  /* Marca: el verde venía del login y del inbox, que son la cara del producto. */
  --brand-800: #12503a;
  --brand-700: #16613f;
  --brand-600: #1d7a4f;
  --brand-100: #d4ede0;
  --brand-50:  #edf7f1;

  /* Neutrales. Un solo tono frío para que grises y verdes convivan. */
  --ink-900: #101828;
  --ink-800: #1d2939;
  --ink-700: #344054;
  --ink-600: #475467;
  --ink-500: #667085;
  --ink-400: #98a2b3;
  --ink-300: #d0d5dd;
  --ink-200: #e4e7ec;
  --ink-100: #eef1f4;
  --ink-50:  #f7f9fa;

  /* Chrome: la barra superior, común a todas las pantallas. */
  --chrome:      #16202e;
  --chrome-line: #2c3a4d;
  --chrome-text: #c7d2de;

  --danger:    #b42318;
  --danger-bg: #fef3f2;
  --warn:      #b54708;
  --warn-bg:   #fffaeb;
  --info:      #175cd3;
  --info-bg:   #eff8ff;
  --ok:        var(--brand-600);
  --ok-bg:     var(--brand-50);

  --surface: #fff;
  --page:    var(--ink-50);

  /* Escala de 4 px: todo el espaciado sale de acá. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px;

  --r-sm: 5px;   /* controles */
  --r-md: 8px;   /* tarjetas */
  --r-lg: 12px;  /* diálogos */
  --r-full: 999px;

  /* Sombras mínimas: el peso visual lo llevan los bordes. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
  --shadow-lg: 0 16px 48px rgba(16, 24, 40, .18);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --focus: 0 0 0 3px var(--brand-100);
}

/*
 * Modo oscuro. Se redefinen los tokens y nada más: todas las pantallas los usan,
 * así que cambian solas. Sigue al sistema operativo salvo que la persona elija
 * un tema en la barra (data-theme en <html>).
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --brand-100: #1c3d2d;
  --brand-50:  #13271e;
  --ink-900: #f2f4f7;
  --ink-800: #e4e7ec;
  --ink-700: #d0d5dd;
  --ink-600: #b3bcc9;
  --ink-500: #98a2b3;
  --ink-400: #6b778a;
  --ink-300: #3a4658;
  --ink-200: #2c3748;
  --ink-100: #212a38;
  --ink-50:  #131a25;
  --chrome:      #0b1119;
  --chrome-line: #243042;
  --danger:    #f97066;
  --danger-bg: #3a1714;
  --warn:      #fdb022;
  --warn-bg:   #3a2a0c;
  --info:      #84caff;
  --info-bg:   #10263f;
  --ok:        #47cd89;
  --surface: #1a2230;
  --page:    #0f151f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand-100: #1c3d2d;
  --brand-50:  #13271e;
  --ink-900: #f2f4f7;
  --ink-800: #e4e7ec;
  --ink-700: #d0d5dd;
  --ink-600: #b3bcc9;
  --ink-500: #98a2b3;
  --ink-400: #6b778a;
  --ink-300: #3a4658;
  --ink-200: #2c3748;
  --ink-100: #212a38;
  --ink-50:  #131a25;
  --chrome:      #0b1119;
  --chrome-line: #243042;
  --danger:    #f97066;
  --danger-bg: #3a1714;
  --warn:      #fdb022;
  --warn-bg:   #3a2a0c;
  --info:      #84caff;
  --info-bg:   #10263f;
  --ok:        #47cd89;
  --surface: #1a2230;
  --page:    #0f151f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-900);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 17px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }

a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* --- Barra superior ------------------------------------------------------ */

header {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s4);
  min-height: 52px;
  background: var(--chrome);
  color: #fff;
  flex-wrap: wrap;
}
header a { color: var(--chrome-text); font-size: 13px; }
header a:hover { color: #fff; text-decoration: none; }

/* Marca. Lleva a Conversaciones, que es donde se trabaja. */
header .brand {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
  margin-right: var(--s2);
}

/* Navegación única del producto (la arma auth.js). */
#plr-nav { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
#plr-nav a {
  padding: 6px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
#plr-nav a:hover { background: var(--chrome-line); color: #fff; }
/* La sección actual se marca con fondo, no solo con color: se ve de reojo. */
#plr-nav a.current { background: var(--chrome-line); color: #fff; font-weight: 500; }

/* En pantallas angostas la navegación pasa a una fila propia con scroll
   horizontal, en vez de partir el encabezado en cuatro líneas. */
@media (max-width: 900px) {
  header { padding: var(--s2) var(--s3); row-gap: var(--s2); }
  #plr-nav {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #plr-nav::-webkit-scrollbar { display: none; }
  #plr-ws-switcher { font-size: 12px; }
}

/* --- Botones ------------------------------------------------------------- */

button, .button {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 7px 12px;
  background: var(--brand-600);
  color: #fff;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
button:hover, .button:hover { background: var(--brand-700); text-decoration: none; }
button:active { background: var(--brand-800); }
button:focus-visible, .button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
/* Listas y celdas que se operan con teclado (ver auth.js). */
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-color: var(--brand-600);
}
[role="button"]:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-600); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* `.sec` y `.secondary` son el mismo botón: conviven por historia de las páginas. */
button.sec, button.secondary, .button.secondary {
  background: var(--surface);
  color: var(--ink-800);
  border-color: var(--ink-300);
}
button.sec:hover, button.secondary:hover { background: var(--ink-50); }

button.ghost {
  background: transparent;
  color: var(--ink-600);
  border-color: transparent;
  padding: 5px 8px;
}
button.ghost:hover { background: var(--ink-100); color: var(--ink-900); }

button.danger { background: var(--danger); }
button.danger:hover { background: var(--danger); }

/* --- Formularios --------------------------------------------------------- */

input, select, textarea {
  font: inherit;
  font-size: 13px;
  width: 100%;
  padding: 7px 10px;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--ink-300);
  border-radius: var(--r-sm);
}
input::placeholder, textarea::placeholder { color: var(--ink-400); }
input[type="checkbox"], input[type="radio"] { width: auto; }
textarea { resize: vertical; }

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: var(--s1);
}
.field { margin-bottom: var(--s3); }
.optional { font-weight: 400; color: var(--ink-400); }

/* --- Superficies --------------------------------------------------------- */

.card, .panel {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  padding: var(--s4);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border-bottom: 1px solid var(--ink-200);
}

/* --- Texto auxiliar ------------------------------------------------------ */

/* `.mut` y `.muted` son sinónimos heredados; `.k` es la etiqueta de un par clave/valor. */
.mut, .muted, .meta, .k { color: var(--ink-500); }
.meta, .k { font-size: 12px; }

.err, .error { color: var(--danger); font-size: 13px; }

.empty {
  color: var(--ink-500);
  font-size: 13px;
  padding: var(--s4);
  text-align: center;
}

.hidden { display: none !important; }

/* --- Píldoras y chips ---------------------------------------------------- */

.pill {
  display: inline-block;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-full);
  background: var(--ink-100);
  color: var(--ink-700);
}
.pill.ok      { background: var(--ok-bg);     color: var(--brand-700); }
.pill.warn    { background: var(--warn-bg);   color: var(--warn); }
.pill.danger  { background: var(--danger-bg); color: var(--danger); }
.pill.info    { background: var(--info-bg);   color: var(--info); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 3px 10px;
  font-size: 12px;
  border-radius: var(--r-full);
  background: var(--ink-100);
  color: var(--ink-700);
}
.chip button, .chip a {
  background: none;
  border: 0;
  padding: 0 2px;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.chip button:hover, .chip a:hover { background: none; color: var(--danger); text-decoration: none; }

/* --- Listas y pares clave/valor ------------------------------------------ */

.item {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.item:hover { background: var(--ink-100); }
.item.active { background: var(--brand-50); }

.kv {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--ink-100);
}
.kv:last-child { border-bottom: 0; }

/* --- Tablas -------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--ink-100); }
th {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-600);
  background: var(--ink-50);
  white-space: nowrap;
}
tbody tr:hover td { background: var(--ink-50); }
/* Los números se leen mejor alineados a la derecha y con ancho fijo. */
td.num, .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Diálogos ------------------------------------------------------------ */

dialog {
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s5);
  max-width: 560px;
  width: 92%;
  color: var(--ink-900);
}
dialog::backdrop { background: rgba(16, 24, 40, .45); }
dialog h3 { margin-bottom: var(--s3); font-size: 16px; text-transform: none; letter-spacing: -.01em; color: var(--ink-900); }

.actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* --- Workspace y cuenta, a la derecha del encabezado (lo arma auth.js) ---- */

#plr-ws-switcher {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-left: auto;
  font-size: 13px;
  color: var(--chrome-text);
}
#plr-ws-switcher strong { color: #fff; font-weight: 600; }
#plr-ws-switcher select {
  width: auto;
  padding: 5px 8px;
  font-size: 13px;
  background: var(--chrome-line);
  border-color: transparent;
  color: #fff;
}
#plr-ws-switcher select:hover { background: #35465c; }

/* ---------------------------------------------------------------------------
 * Application Shell
 *
 * La navegación pasó de una fila de enlaces arriba a una barra lateral. El
 * motivo es el producto: un workspace tiene TABLAS, y su cantidad crece con el
 * uso. En una fila horizontal eso no entra —ya se partía en varias líneas con
 * seis secciones fijas— y sobre todo no deja ver de un vistazo qué hay en el
 * workspace, que es justo lo que uno quiere ver al entrar.
 *
 * El shell envuelve el contenido de cada página sin que la página tenga que
 * saberlo: lo arma `shell.js` moviendo el DOM al cargar.
 * ------------------------------------------------------------------------ */

:root { --plr-header-h: 52px; --plr-side-w: 232px; }

.plr-layout { display: flex; height: calc(100vh - var(--plr-header-h)); }
.plr-content { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; }

#plr-side {
  width: var(--plr-side-w);
  flex: 0 0 var(--plr-side-w);
  background: var(--surface);
  border-right: 1px solid var(--ink-200);
  overflow-y: auto;
  padding: var(--s3) 0 var(--s5);
  font-size: 13px;
}
.plr-side-group { margin-bottom: var(--s4); }
.plr-side-title {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s4) var(--s1);
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-400);
}
.plr-side-title .plr-side-add {
  margin-left: auto; background: none; border: 0; color: var(--ink-400);
  font-size: 16px; line-height: 1; padding: 0 4px; cursor: pointer;
}
.plr-side-title .plr-side-add:hover { color: var(--brand-600); background: none; }
#plr-side a {
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px var(--s4); color: var(--ink-700); border-radius: 0;
}
#plr-side a:hover { background: var(--ink-50); text-decoration: none; }
#plr-side a.current {
  background: var(--brand-50); color: var(--brand-700); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand-600);
}
#plr-side .plr-side-icon { width: 18px; text-align: center; flex: 0 0 18px; opacity: .8; }
#plr-side .plr-side-empty { padding: 2px var(--s4); color: var(--ink-400); font-size: 12px; }

/* El botón de la barra lateral sólo aparece cuando hace falta (pantalla angosta). */
#plr-side-toggle { display: none; background: none; border: 0; color: var(--chrome-text); font-size: 18px; padding: 0 var(--s2); }

@media (max-width: 900px) {
  #plr-side {
    position: fixed; top: var(--plr-header-h); bottom: 0; left: 0; z-index: 25;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: var(--shadow-md);
  }
  #plr-side.abierta { transform: translateX(0); }
  #plr-side-toggle { display: block; }
  /* Con la barra encima del contenido, el fondo se atenúa para que se entienda
     que hay que cerrarla. */
  .plr-backdrop { position: fixed; inset: var(--plr-header-h) 0 0 0; background: rgba(16,24,40,.35); z-index: 24; }
}

/* Buscador global del encabezado. */
.plr-search { position: relative; flex: 0 1 300px; margin-left: 8px; }
.plr-search input { width: 100%; padding: 6px 10px; border: 1px solid var(--borde, var(--ink-200)); border-radius: 6px; font-size: 14px; }
.plr-search-res { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; max-height: 60vh; overflow: auto;
  background: var(--surface); color: var(--ink-900); border: 1px solid var(--borde, var(--ink-200)); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.plr-search-res .grupo { padding: 6px 0; border-bottom: 1px solid var(--ink-100); }
.plr-search-res .grupo:last-child { border-bottom: 0; }
.plr-search-res h4 { margin: 0; padding: 4px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }
.plr-search-res a { display: block; padding: 6px 12px; color: var(--ink-900); text-decoration: none; }
.plr-search-res a:hover { background: var(--ink-100); }
.plr-search-res a small { display: block; color: var(--ink-500); font-size: 12px; }
.plr-search-res .vacio { padding: 10px 12px; color: var(--ink-500); }
@media (max-width: 720px) { .plr-search { max-width: none; order: 3; flex-basis: 100%; } }

/* Kanban, galería y calendario de la pantalla Data. */
.kanban { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 12px; }
.kanban .k-col { flex: 0 0 260px; background: var(--ink-100); border-radius: 10px; padding: 8px; }
.kanban .k-head { font-weight: 600; font-size: 13px; padding: 4px 6px 8px; color: inherit; background: none; }
.kanban .k-lista { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.k-card { background: var(--surface); border: 1px solid var(--ink-200); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.k-card:hover { border-color: var(--ink-300); }
.k-card .k-dato { font-size: 12px; margin-top: 4px; }
.galeria { display: grid; gap: 12px; padding: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.calendario { padding: 12px; }
.calendario .c-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.calendario .c-semana, .calendario .c-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario .c-semana span { font-size: 12px; color: var(--ink-500); padding: 2px 4px; }
.calendario .c-dia { min-height: 86px; border: 1px solid var(--ink-200); border-radius: 6px; padding: 4px; background: var(--surface); }
.calendario .c-dia.vacio { background: var(--ink-50); border-style: dashed; }
.calendario .c-dia.hoy { border-color: var(--info); }
.calendario .c-num { font-size: 12px; color: var(--ink-500); }
.calendario .c-item { display: block; width: 100%; text-align: left; margin-top: 3px; padding: 2px 4px; font-size: 12px;
  background: var(--info-bg); color: var(--info); border: 0; border-radius: 4px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendario .c-item:hover { background: var(--info-bg); }
@media (max-width: 720px) { .calendario .c-dia { min-height: 60px; } }

/* Notas e historial en la ficha de un registro. */
.nota { border-bottom: 1px solid var(--ink-100); padding: 5px 0; font-size: 13px; }
.nota .muted { font-size: 11px; margin-left: 6px; }
.evento { font-size: 12px; color: var(--ink-600); padding: 3px 0; }

/* Campana de avisos. */
.plr-bell-wrap { position: relative; margin-left: auto; }
#plr-theme, #plr-bell { background: none; border: 0; color: inherit; font-size: 16px; cursor: pointer; padding: 4px 6px; position: relative; }
#plr-bell-n { position: absolute; top: 0; right: 0; background: var(--danger); color: #fff; font-size: 10px;
  border-radius: 9px; padding: 0 4px; line-height: 14px; }
.plr-bell-panel { position: absolute; right: 0; top: calc(100% + 6px); width: 320px; max-height: 60vh; overflow: auto;
  background: var(--surface); color: var(--ink-900); border: 1px solid var(--ink-200); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); z-index: 60; }
.plr-bell-panel .aviso { display: block; padding: 8px 12px; border-bottom: 1px solid var(--ink-100); color: inherit; text-decoration: none; }
.plr-bell-panel .aviso:hover { background: var(--ink-100); }
.plr-bell-panel .aviso.nuevo { background: var(--info-bg); }
.plr-bell-panel .aviso span, .plr-bell-panel .aviso small { display: block; color: var(--ink-500); font-size: 12px; }
.plr-bell-panel .vacio { padding: 12px; color: var(--ink-500); margin: 0; }
.plr-bell-panel button { width: 100%; border: 0; background: var(--ink-100); color: var(--ink-900); padding: 8px; cursor: pointer; font-size: 12px; }

/* Gráficos de los paneles. */
.chart-bars { display: flex; flex-direction: column; gap: 6px; }
.chart-bar { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.chart-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-track { background: var(--ink-100); border-radius: 4px; height: 14px; overflow: hidden; }
.chart-fill { display: block; height: 100%; border-radius: 4px; }
.chart-valor { font-variant-numeric: tabular-nums; color: var(--ink-700); }
.chart-svg { width: 100%; height: auto; max-height: 180px; }
.chart-pie { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.chart-pie .chart-svg { width: 140px; flex: 0 0 140px; }
.chart-leyenda { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.chart-leyenda span { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-metric { text-align: center; padding: 8px 0; }
.chart-metric strong { display: block; font-size: 30px; line-height: 1.1; }
.chart-metric span { font-size: 12px; }
.panel-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; padding: 12px; align-items: start; }
.panel-widget { border: 1px solid var(--ink-200); border-radius: 10px; background: var(--surface); padding: 12px; min-width: 0; }
.panel-widget h3 { margin: 0 0 8px; font-size: 13px; }
@media (max-width: 900px) { .panel-widget { grid-column: span 12 !important; } }

/* Widgets de tabla y texto en los paneles. */
.chart-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.chart-tabla th { text-align: left; color: var(--ink-500); font-weight: 500; border-bottom: 1px solid var(--ink-200); padding: 4px 6px; }
.chart-tabla td { padding: 4px 6px; border-bottom: 1px solid var(--ink-100); }
.chart-tabla td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.chart-texto { font-size: 13px; color: var(--ink-700); margin: 0; white-space: pre-wrap; }

/* Reordenar widgets arrastrando. */
.panel-widget[draggable="true"] { cursor: grab; }
.panel-widget[draggable="true"]:active { cursor: grabbing; }

/* Quien pidió menos movimiento al sistema operativo no tiene por qué aguantar transiciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}