/* Motyw Arasaka (P-20261014-9, T-0011): klimat cyberpunk zostaje, paleta i ramki idą w mega-korporację.
 * Pytanie: jak wygląda DevHub w motywie Arasaka? Dane: te same tokeny znaczeń co Neon. Akcje: przełącznik Motyw na stronie Styl
 * (Neon / Arasaka, zapamiętany w przeglądarce = cofnij), odbiór właściciela na stronie Styl (2FA).
 * Zasady: czerwień marki (--brand) = zaznaczenie, akcent, fokus; ALARM (--alert) to osobny, jaśniejszy szkarłat + puls + ■ + słowo.
 * Paleta stanów Korpo (P-20261015-1) jak w Neon: --you bursztyn = jedyny „wymaga Ciebie”, --live turkus (żywe teraz) zawsze z pulsującą kropką. Kolory tylko z tokenów. */
html[data-motyw="arasaka"] {
  --bg: #050506;
  --panel: rgba(12, 12, 14, .94);
  --panel-2: #141417;
  --line: #2c1c20;
  --line-hi: #5a2630;
  --text: #e9ecf1;
  --dim: #8b9099;
  --live: #2ff3c8;
  --alert: #ff1e3c;
  --ok: #43d98a;
  --warn: #ff7a3d;
  --brand: #e8112d;
  --brand-hi: #ff2a44;
  --brand-glow: rgba(232, 17, 45, .38);
  --brand-tint: rgba(232, 17, 45, .07);
  --alert-glow: rgba(255, 30, 60, .5);
  --wnetrze: #0b0b0d;
  --cut: 10px;
}

/* tło: czerń, drobna grafitowa siatka, czerwona łuna marki u góry; bez magenty */
html[data-motyw="arasaka"] body::before {
  background: radial-gradient(ellipse at 82% -12%, rgba(232, 17, 45, .20), transparent 55%),
              radial-gradient(ellipse at -8% 112%, rgba(232, 17, 45, .10), transparent 50%),
              linear-gradient(rgba(70, 24, 32, .26) 1px, transparent 1px) 0 0 / 100% 32px,
              linear-gradient(90deg, rgba(70, 24, 32, .26) 1px, transparent 1px) 0 0 / 32px 100%; }
html[data-motyw="arasaka"] a { color: var(--text); text-decoration-color: var(--brand); text-underline-offset: 3px; }
html[data-motyw="arasaka"] :focus-visible { outline-color: var(--brand-hi); }

/* typografia korporacyjna: szerokie światło, lżejsza waga */
html[data-motyw="arasaka"] h1, html[data-motyw="arasaka"] h2, html[data-motyw="arasaka"] h3, html[data-motyw="arasaka"] .head { font-weight: 600; letter-spacing: .2em; }
html[data-motyw="arasaka"] h1 { font-size: 26px; }
html[data-motyw="arasaka"] .page-title h1 .slash { color: var(--brand); }

/* panel: grafitowy obrys, nagłówek oddzielony linią, czerwona belka marki zamiast trójkąta */
html[data-motyw="arasaka"] .panel > header { border-bottom: 1px solid var(--line); padding-bottom: 9px; }
html[data-motyw="arasaka"] .panel > header::before { width: 3px; height: 14px; background: var(--brand); clip-path: none; box-shadow: 0 0 8px var(--brand-glow); }
html[data-motyw="arasaka"] .panel > header h2 { letter-spacing: .18em; color: var(--brand-hi); }
/* więcej czerwieni (uwaga właściciela 14.10): obrys paneli w czerwieni marki, przygaszony */
html[data-motyw="arasaka"] .panel { --edge: rgba(232, 17, 45, .42); }
html[data-motyw="arasaka"] .panel.you > header::before { background: var(--you); box-shadow: none; }
html[data-motyw="arasaka"] .panel.live { --edge: rgba(47, 243, 200, .45); }
html[data-motyw="arasaka"] .panel.alert > header::before { background: var(--alert); }

/* przyciski: czerń + grafit; najechanie = czerwień marki; Decyzja żółta; STOP = alarm mono-neon */
html[data-motyw="arasaka"] .btn { --fill: var(--wnetrze); --edge: rgba(232, 17, 45, .55); font-weight: 600; letter-spacing: .18em; }
html[data-motyw="arasaka"] .btn:hover { --edge: var(--brand); --fill: #170508; color: #fff; }
html[data-motyw="arasaka"] .btn.you { --edge: var(--you); --fill: var(--you); color: #0a0a00; }
html[data-motyw="arasaka"] .btn.you:hover { --fill: #fff57a; color: #000; }
html[data-motyw="arasaka"] .btn.danger { --edge: var(--alert); --fill: #160307; color: var(--alert); text-shadow: 0 0 6px var(--alert-glow); box-shadow: none; }
html[data-motyw="arasaka"] .btn.danger:hover { --fill: var(--alert); color: #120005; text-shadow: none; animation-name: glitch-btn-a; }
@keyframes glitch-btn-a { 50% { transform: translateX(-2px); filter: drop-shadow(2px 0 var(--brand-hi)); } }
html[data-motyw="arasaka"] .btn.ghost { --edge: transparent; --fill: transparent; }
html[data-motyw="arasaka"] .btn.ghost:hover { color: var(--brand-hi); }
html[data-motyw="arasaka"] .btn[disabled] { --edge: var(--line); --fill: var(--wnetrze); color: var(--dim); }

/* pola */
html[data-motyw="arasaka"] input[type=text], html[data-motyw="arasaka"] input[type=search], html[data-motyw="arasaka"] input[type=password],
html[data-motyw="arasaka"] input:not([type]), html[data-motyw="arasaka"] textarea, html[data-motyw="arasaka"] select,
html[data-motyw="arasaka"] input[type=date], html[data-motyw="arasaka"] input[type=month] { background: var(--wnetrze); }
html[data-motyw="arasaka"] input:focus, html[data-motyw="arasaka"] textarea:focus, html[data-motyw="arasaka"] select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand-glow), 0 0 14px var(--brand-tint); }

/* znaczniki: alarm wyróżniony pulsem obrysu (tylko Night City), żywe = puls kropki w kolorze znacznika */
html[data-motyw="arasaka"] .tag { background: rgba(0, 0, 0, .35); }
html[data-motyw="arasaka"] th { color: var(--brand-hi); }
html[data-motyw="arasaka"][data-tryb="night"] .pulse .dot, html[data-motyw="arasaka"][data-tryb="night"] .dot.pulse { animation-name: puls-a; }
@keyframes puls-a { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
html[data-motyw="arasaka"][data-tryb="night"] .tag.alert,
html[data-motyw="arasaka"][data-tryb="night"] .btn.danger:not(:hover) { animation: alarm-a 1.4s ease-in-out infinite; }
@keyframes alarm-a { 50% { box-shadow: 0 0 12px var(--alert-glow); } }

/* glitch starych danych: czerwień marki zamiast cyjanu (keyframes są globalne, więc osobna nazwa) */
html[data-motyw="arasaka"][data-tryb="night"] .stale .glitchable { animation-name: glitch-a; }
@keyframes glitch-a {
  0%, 86%, 100% { text-shadow: none; transform: none; clip-path: none; }
  88% { text-shadow: -2px 0 var(--brand), 2px 0 var(--text); transform: translateX(1px); }
  90% { text-shadow: 2px 0 var(--brand), -2px 0 var(--text); clip-path: polygon(0 10%, 100% 10%, 100% 45%, 0 45%); transform: translateX(-3px); }
  92% { text-shadow: -1px 0 var(--brand), 1px 0 var(--text); clip-path: polygon(0 55%, 100% 55%, 100% 90%, 0 90%); transform: translateX(2px); }
  94% { text-shadow: none; clip-path: none; transform: none; }
}
html[data-motyw="arasaka"] .skel { background: linear-gradient(90deg, #121215 0%, #1f1f24 40%, #121215 80%) 0 0 / 200% 100%; }

/* kafle miar */
html[data-motyw="arasaka"] .tile .bar { background: var(--line); }
html[data-motyw="arasaka"] .tile.bad { --edge: var(--alert); }
html[data-motyw="arasaka"] .tile.mid { --edge: rgba(255, 166, 48, .5); }
html[data-motyw="arasaka"] .tile.good { --edge: rgba(67, 217, 138, .45); }
html[data-motyw="arasaka"][data-tryb="night"] .tile.bad .v { text-shadow: 0 0 12px var(--alert-glow); }

/* tabele: najechanie i zaznaczenie w odcieniu marki */
html[data-motyw="arasaka"] td { border-bottom-color: var(--line); }
html[data-motyw="arasaka"] tr:hover td, html[data-motyw="arasaka"] tr.klik:hover td { background: var(--brand-tint); }
html[data-motyw="arasaka"] tr.sel td { background: rgba(232, 17, 45, .11); }

/* rama aplikacji: pasek stanu, szyna, segmenty */
html[data-motyw="arasaka"] .statusbar { background: rgba(5, 5, 6, .94); box-shadow: inset 0 -2px 0 var(--brand), 0 4px 18px var(--brand-tint); }
html[data-motyw="arasaka"] .statusbar .brand, html[data-motyw="arasaka"] .login .brand { color: var(--brand); text-shadow: 0 0 10px var(--brand-glow); }
html[data-motyw="arasaka"] .rail { background: linear-gradient(180deg, rgba(40, 4, 10, .55), rgba(5, 5, 6, .75)); box-shadow: inset -1px 0 0 var(--brand-glow); }
html[data-motyw="arasaka"] .rail a[aria-current="page"] { color: var(--text); }
html[data-motyw="arasaka"] .rail a[aria-current="page"]::before { background: var(--brand); box-shadow: 0 0 10px var(--brand-glow); }
html[data-motyw="arasaka"] .rail a[aria-current="page"] svg { color: var(--brand-hi); }
html[data-motyw="arasaka"] .seg button[aria-pressed="true"] { background: var(--brand); color: #fff; }
html[data-motyw="arasaka"][data-tryb="night"] .clock { text-shadow: 0 0 8px var(--brand-glow); }
html[data-motyw="arasaka"] .login form { --edge: var(--brand); }
html[data-motyw="arasaka"] .uplink .ttl { color: var(--brand); }

/* klocki T-0009: pod-zakładki, rozwijane, suwak, dok */
html[data-motyw="arasaka"] .pz-g { background: var(--wnetrze); }
html[data-motyw="arasaka"] .pz-g:hover { border-color: var(--brand); color: var(--text); }
html[data-motyw="arasaka"] .pz-g[aria-selected="true"] { background: var(--brand); border-color: var(--brand-hi); color: #fff; box-shadow: 0 0 16px var(--brand-glow); }
html[data-motyw="arasaka"] .rw > summary:hover, html[data-motyw="arasaka"] .rw > summary:focus-visible { background: var(--brand-tint); }
html[data-motyw="arasaka"] .rw[open] { border-left-color: var(--brand); }
html[data-motyw="arasaka"] .rw.alert { border-left-color: var(--alert); }
html[data-motyw="arasaka"] .rw.ty { border-left-color: var(--you); }
html[data-motyw="arasaka"] .kr-fbtn.btn.akt { --edge: var(--brand); color: var(--brand-hi); }
html[data-motyw="arasaka"] .kr-dok { border-left-color: var(--brand); box-shadow: 0 10px 28px rgba(0, 0, 0, .75), 0 0 18px var(--brand-tint); }
html[data-motyw="arasaka"] .sw:focus-visible .sw-etk { color: var(--brand-hi); }
html[data-motyw="arasaka"] .sw-k { background: var(--brand); }
html[data-motyw="arasaka"] .sw-k.alert { background: var(--alert); }
html[data-motyw="arasaka"] .sw-kciuk::before { border-color: var(--text); box-shadow: 0 0 12px var(--brand-glow); }
html[data-motyw="arasaka"] .sw-kciuk.alert::before { border-color: var(--alert); box-shadow: 0 0 12px var(--alert-glow); }
html[data-motyw="arasaka"] .mz-narz .btn.on { --edge: var(--brand); color: var(--brand-hi); }
html[data-motyw="arasaka"] .mz-tryb { background: var(--wnetrze); border-color: rgba(232, 17, 45, .55); }
html[data-motyw="arasaka"] .mz-tryb:hover { border-color: var(--brand-hi); }
html[data-motyw="arasaka"] .mz-tryb[aria-selected="true"] { background: var(--brand); border-color: var(--brand-hi); color: #fff; box-shadow: 0 0 22px var(--brand-glow); }
html[data-motyw="arasaka"] .mz-tryb[aria-selected="true"] b { color: #fff; }
/* T-0015: suwak czasu Mózgu w czerwieni Arasaki (nie cyjan): tor = ciemna czerwień, kciuk = romb marki z poświatą */
html[data-motyw="arasaka"] .mz-suwak { -webkit-appearance: none; appearance: none; height: 18px; background: transparent; accent-color: var(--brand); cursor: pointer; }
html[data-motyw="arasaka"] .mz-suwak::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, rgba(232, 17, 45, .25), var(--brand)); border: 0; }
html[data-motyw="arasaka"] .mz-suwak::-moz-range-track { height: 3px; background: linear-gradient(90deg, rgba(232, 17, 45, .25), var(--brand)); border: 0; }
html[data-motyw="arasaka"] .mz-suwak::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; background: var(--brand); border: 1px solid var(--brand-hi); transform: rotate(45deg); box-shadow: 0 0 10px var(--brand-glow); }
html[data-motyw="arasaka"] .mz-suwak::-moz-range-thumb { width: 11px; height: 11px; border-radius: 0; background: var(--brand); border: 1px solid var(--brand-hi); transform: rotate(45deg); box-shadow: 0 0 10px var(--brand-glow); }
html[data-motyw="arasaka"] .mz-suwak:focus-visible::-webkit-slider-thumb { background: var(--brand-hi); }
html[data-motyw="arasaka"] .minibar { background: var(--brand); }
.c-brand { background: var(--brand); } /* próbka „Marka” na stronie Styl */
html[data-motyw="arasaka"] .slash { color: var(--brand); } /* ukośnik w tytułach to ozdoba marki, nie „wymaga Ciebie” */