/* CYBLI app & cabinets — shared tokens (world: LAN production kit) */
:root {
  --blue: #2B2EF0;
  --blue-deep: #1D1FB8;
  --ink: #0D0E11;
  --steel: #17191E;
  --steel-2: #1F2228;
  --line: #2C2F37;
  --alu: #DCDFE4;
  --alu-2: #C5CAD1;
  --pvc: #F6F7F9;
  --tape: #FFD60A;
  --tape-ink: #1A1600;
  --rec: #FF3B1F;
  --ok: #37F07A;
  --on-dark-2: #A3A8B3;
  --on-light-2: #474C56;
  --on-blue-2: #D7D9FF;
  --f-display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --f-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--tape); color: var(--tape-ink); }
:focus-visible { outline: 3px solid var(--tape); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--f-mono); letter-spacing: .06em; }
.mark { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 4.6; stroke-linecap: square; }

.btn {
  --bg: var(--steel-2); --fg: #fff; --bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: .7em 1.2em; border-radius: 999px;
  background: var(--bg); color: var(--fg); border: 2px solid var(--bd);
  font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease-out), background-color .2s, border-color .2s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; }
.btn--tape { --bg: var(--tape); --fg: var(--tape-ink); --bd: var(--tape); }
.btn--blue { --bg: var(--blue); --bd: var(--blue); }
.btn--line { --bg: transparent; --bd: #3a3e48; }
.btn--danger { --bg: transparent; --fg: #ff8a78; --bd: #5a2a24; }
.btn--sm { min-height: 36px; padding: .45em .9em; font-size: .9rem; }
.btn--block { width: 100%; }
.btn.is-busy { opacity: .7; pointer-events: none; }

.tape {
  display: inline-block; background: var(--tape); color: var(--tape-ink);
  font: 700 .7rem/1 var(--f-mono); letter-spacing: .08em; padding: .45em .65em .4em; transform: rotate(-1.5deg);
  clip-path: polygon(0 6%, 3% 0, 97% 4%, 100% 0, 99% 94%, 96% 100%, 2% 96%, 0 100%);
}
.linkbtn { background: none; border: 0; padding: 0; color: var(--tape); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 100;
  max-width: min(92vw, 420px); padding: 12px 16px; border-radius: 12px;
  background: #2a1512; color: #ffd4cc; border: 1px solid #5a2a24; font-weight: 500;
  transform: translate(-50%, 20px); opacity: 0; transition: transform .35s var(--ease-out), opacity .3s;
  box-shadow: 0 16px 32px -16px #000;
}
.toast--ok { background: #0f2a1a; color: #b9f7cf; border-color: #1f5a36; }
.toast.is-in { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}