/* ====================================================================
   nx-ui v8 · токените на nx-os v2
   Бялата е по подразбиране; черната идва по предпочитание на човека или
   на системата и е направена като chat-mesh v7 — островчета, през които
   прозира фонът. v7 остава непипнат за старите приложения.
   ==================================================================== */
:root{
  /* разстояния · пет стъпки, нищо между тях */
  --nx-s1:4px; --nx-s2:8px; --nx-s3:12px; --nx-s4:16px; --nx-s5:24px;
  /* островче · три отстъпа, външният е по-голям от разстоянието между тях */
  --nx-island-pad:var(--nx-s3); --nx-island-gap:var(--nx-s2); --nx-island-out:var(--nx-s4);
  /* закръгления */
  --nx-r1:10px; --nx-r2:14px; --nx-r3:18px; --nx-pill:999px;
  /* повърхности 0–3 · 0 е най-долната */
  --nx-surface-0:#f4f4f6; --nx-surface-1:#ffffff; --nx-surface-2:#ffffff; --nx-surface-3:#ffffff;
  /* текст · 4.5:1 за четене, границите 3:1 */
  --nx-text:#101114; --nx-text-2:#54565e; --nx-text-3:#6f717a;
  --nx-line:#d6d7dc; --nx-line-strong:#b6b8c0;
  /* състояния */
  --nx-accent:#2f6fe0; --nx-ok:#0f7a4d; --nx-warn:#8a5a00; --nx-err:#b3261e;
  --nx-accent-bg:#e8f0fd; --nx-ok-bg:#e6f4ec; --nx-warn-bg:#fdf3e2; --nx-err-bg:#fdeceb;
  /* сянка · две нива и нищо повече */
  --nx-shadow-1:0 1px 2px rgba(16,17,20,.08);
  --nx-shadow-2:0 8px 24px rgba(16,17,20,.14);
  /* движение */
  --nx-t1:100ms; --nx-t2:200ms; --nx-t3:300ms;
  --nx-ease:cubic-bezier(.22,1,.36,1);
  /* палецът и зумът */
  --nx-touch:48px; --nx-zoom:1; --nx-media-bg:#08090b;
  --nx-safe-top:env(safe-area-inset-top); --nx-safe-bottom:env(safe-area-inset-bottom);
}

/* Черната по chat-mesh v7: островчета върху тъмен фон, границите са светлина. */
:root[data-theme="dark"],
:root:not([data-theme="light"]) .nx-dark{
  --nx-surface-0:#0f1012; --nx-surface-1:#141519; --nx-surface-2:#17181c; --nx-surface-3:#1d1f24;
  --nx-text:#e9e9ea; --nx-text-2:#b9bac1; --nx-text-3:#8b8d94;
  --nx-line:#23252b; --nx-line-strong:#3a3d44;
  --nx-accent:#6f9bff; --nx-ok:#39d98a; --nx-warn:#f0b429; --nx-err:#ff6b6b;
  --nx-accent-bg:#161c2b; --nx-ok-bg:#12261d; --nx-warn-bg:#2a2010; --nx-err-bg:#2b1616;
  --nx-shadow-1:0 1px 2px rgba(0,0,0,.4); --nx-shadow-2:0 8px 24px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --nx-surface-0:#0f1012; --nx-surface-1:#141519; --nx-surface-2:#17181c; --nx-surface-3:#1d1f24;
    --nx-text:#e9e9ea; --nx-text-2:#b9bac1; --nx-text-3:#8b8d94;
    --nx-line:#23252b; --nx-line-strong:#3a3d44;
    --nx-accent:#6f9bff; --nx-ok:#39d98a; --nx-warn:#f0b429; --nx-err:#ff6b6b;
    --nx-accent-bg:#161c2b; --nx-ok-bg:#12261d; --nx-warn-bg:#2a2010; --nx-err-bg:#2b1616;
    --nx-shadow-1:0 1px 2px rgba(0,0,0,.4); --nx-shadow-2:0 8px 24px rgba(0,0,0,.5);
  }
}

html{font-size:calc(16px * var(--nx-zoom))}

/* `display:flex` в класа биеше атрибута `hidden` и скритото пак се виждаше —
   празното поле горе и празната лента отстрани бяха точно това. */
[hidden]{display:none !important}

/* Копчето има пет състояния и всяко се вижда и без цвят — иконата или
   рамката се менят заедно с него (контраст 3:1 по границите). */
.nx-key{display:inline-flex;align-items:center;justify-content:center;gap:var(--nx-s2);
  min-height:var(--nx-touch);min-width:var(--nx-touch);padding:0 var(--nx-s3);
  border-radius:var(--nx-r2);border:1px solid var(--nx-line);background:var(--nx-surface-2);
  color:var(--nx-text);font-size:14px;transition:background var(--nx-t1),border-color var(--nx-t1),transform var(--nx-t1)}
.nx-key:hover{border-color:var(--nx-line-strong);background:var(--nx-surface-3)}
.nx-key:active{transform:scale(.98)}
.nx-key:focus-visible{outline:2px solid var(--nx-accent);outline-offset:2px}
.nx-key[disabled],.nx-key[aria-disabled="true"]{opacity:.55;border-style:dashed;pointer-events:none}
.nx-key[aria-pressed="true"]{border-color:var(--nx-accent);background:var(--nx-accent-bg);color:var(--nx-accent)}

.nx-island{background:var(--nx-surface-2);border:1px solid var(--nx-line);border-radius:var(--nx-r3);
  padding:var(--nx-island-pad);margin:var(--nx-island-out) 0;box-shadow:var(--nx-shadow-1)}
.nx-island + .nx-island{margin-top:var(--nx-island-gap)}