@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@400;500;600;800&display=swap");

/* ===== AtLogic v2 — światło z PRAWEGO GÓRNEGO rogu: blik w prawo-górę, cień i ścianka bloku w lewo-dół. ===== */
:root{
  --al-gold-grad: linear-gradient(225deg, var(--gold-100) 0%, var(--gold-300) 18%, var(--gold-500) 42%, var(--gold-700) 66%, var(--gold-300) 86%, var(--gold-700) 100%);
  --al-face-grad: linear-gradient(225deg, var(--bg-600) 0%, var(--bg-700) 48%, var(--bg-800) 100%);
  --al-dome: radial-gradient(120% 95% at 78% 12%, rgba(255,255,255,.24) 0%, rgba(255,255,255,.07) 36%, transparent 60%),
             radial-gradient(120% 110% at 18% 105%, rgba(0,0,0,.42) 0%, transparent 58%);
  --al-panel-grad: linear-gradient(225deg, rgba(29,50,96,.94) 0%, rgba(15,27,53,.96) 50%, rgba(10,19,38,.98) 100%);
  /* ścianka bloku: warstwy w lewo-dół, coraz ciemniejsze */
  --al-wall: -1px 1.5px 0 var(--wall-1), -2px 3px 0 var(--wall-2), -3px 4.5px 0 var(--wall-2), -4px 6px 0 var(--wall-3);
  --al-wall-up: -1px 1.5px 0 var(--wall-1), -2px 3px 0 var(--wall-2), -3px 4.5px 0 var(--wall-2), -4px 6px 0 var(--wall-2), -5px 7.5px 0 var(--wall-3), -6px 9px 0 var(--wall-3);
  --al-wall-down: -1px 1px 0 var(--wall-2);
  --al-face-light: inset -1px 1px 0 rgba(255,255,255,.22), inset 3px -4px 8px rgba(0,0,0,.42);
  --al-circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07'%3E%3Cpath d='M0 60h70l20 20h60'/%3E%3Cpath d='M240 150h-60l-20-20V40'/%3E%3Cpath d='M120 240v-50l25-25h50'/%3E%3Cpath d='M30 0v30l20 20'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.13'%3E%3Ccircle cx='150' cy='80' r='2.5'/%3E%3Ccircle cx='160' cy='40' r='2.5'/%3E%3Ccircle cx='195' cy='165' r='2.5'/%3E%3Ccircle cx='50' cy='50' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --al-ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------- TŁO ---------- */
.al-bg{
  color: var(--ink); font-family: var(--font-sans);
  background-color: var(--bg-900);
  background-image:
    radial-gradient(1100px 650px at 100% 0%, rgba(90,140,255,.15), transparent 62%),
    radial-gradient(900px 600px at 0% 100%, rgba(0,0,0,.5), transparent 70%),
    linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.035) 45%, transparent 53%, transparent 70%, rgba(255,255,255,.02) 76%, transparent 82%),
    var(--al-circuit),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, auto, auto, 240px 240px, 40px 40px, 40px 40px;
}

/* ---------- ZŁOTY TEKST, IKONY ---------- */
.al-gold-text{ background: var(--al-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(-1px 1.5px .5px rgba(0,0,0,.85)); }
.al-ico{ width: 28px; height: 28px; flex: none; fill: none; stroke: url(#al-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(-1px 1.5px 0 var(--gold-900)) drop-shadow(-1.5px 2.5px 1.5px rgba(0,0,0,.75)); overflow: visible; }
.al-ico .fill{ fill: url(#al-gold); stroke: none; }
.al-ico{ transition: transform .3s var(--al-ease), filter .3s; }
:is(.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) .al-ico{ transform: translate(1px,-1px) scale(1.1); filter: brightness(1.2) drop-shadow(-1px 1.5px 0 var(--gold-900)) drop-shadow(-2px 4px 2px rgba(0,0,0,.8)) drop-shadow(0 0 6px rgba(255,192,97,.55)); }

/* ---------- BLOK 3D: przyciski menu, ikony, filtry, select ---------- */
.al-navbtn, .al-iconbtn, .al-btn, .al-select, .al-tile{
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border: var(--gold-border) solid transparent; border-radius: var(--radius-md);
  background: var(--al-dome) padding-box, var(--al-face-grad) padding-box, var(--al-gold-grad) border-box;
  box-shadow: var(--al-face-light), var(--al-wall), var(--shadow-float);
  font-family: var(--font-display); cursor: pointer; text-decoration: none; color: var(--ink);
  transition: transform .22s var(--al-ease), box-shadow .22s var(--al-ease);
  -webkit-tap-highlight-color: transparent;
}
.al-navbtn{ flex-direction: column; gap: var(--space-1); width: var(--nav-button); height: var(--nav-button); }
.al-navbtn .al-label, .al-btn .al-label, .al-select .al-label{ font-weight: 600; font-size: 12px; line-height: 14px; letter-spacing: .05em;
  background: var(--al-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(-1px 1.5px .5px rgba(0,0,0,.85)); white-space: nowrap; }
.al-iconbtn{ width: var(--control-h); height: var(--control-h); }
.al-iconbtn .al-ico{ width: 22px; height: 22px; }
.al-btn{ height: var(--control-h); padding: 0 18px; gap: var(--space-2); }
.al-btn .al-label{ font-size: 17px; line-height: 20px; }
.al-btn .al-ico{ width: 20px; height: 20px; }
.al-select{ height: var(--control-h); padding: 0 12px 0 16px; justify-content: space-between; gap: var(--space-4); min-width: 200px; }
.al-select .al-label{ font-size: 17px; line-height: 20px; }
.al-select .al-ico{ width: 18px; height: 18px; }

/* laser pod blokiem */
.al-navbtn::after, .al-iconbtn::after, .al-btn::after, .al-select::after, .al-tile::after{
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -11px; height: 3px; border-radius: 3px;
  background: var(--laser); box-shadow: var(--shadow-laser);
  opacity: 0; transform: scaleX(.25); transition: opacity .2s ease, transform .26s var(--al-ease); pointer-events: none;
}
.al-navbtn:hover, .al-iconbtn:hover, .al-btn:hover, .al-select:hover,
.al-navbtn.is-hover, .al-iconbtn.is-hover, .al-btn.is-hover,
.al-navbtn.is-active, .al-navbtn[aria-current="page"], .al-btn.is-active, .al-iconbtn.is-active{
  transform: translate(1px,-2px);
  box-shadow: var(--al-face-light), var(--al-wall-up), var(--shadow-lift);
}
.al-navbtn:hover::after, .al-iconbtn:hover::after, .al-btn:hover::after, .al-select:hover::after,
.al-navbtn.is-hover::after, .al-iconbtn.is-hover::after, .al-btn.is-hover::after,
.al-navbtn.is-active::after, .al-navbtn[aria-current="page"]::after, .al-btn.is-active::after, .al-iconbtn.is-active::after{ opacity: 1; transform: scaleX(1); }
.al-navbtn:active, .al-iconbtn:active, .al-btn:active, .al-tile:active{ transform: translate(-2px,3px); box-shadow: var(--al-face-light), var(--al-wall-down), var(--shadow-pressed); transition-duration: .08s; }
.al-navbtn:focus-visible, .al-iconbtn:focus-visible, .al-btn:focus-visible, .al-select:focus-visible, .al-tile:focus-visible{ outline: 2px solid var(--gold-300); outline-offset: 5px; }

/* ---------- KAFEL Z IKONĄ (pulpit / launcher) ---------- */
.al-tile{ flex-direction: column; gap: 14px; width: 100%; min-height: 200px; padding: 24px 14px 20px; border-radius: 22px; box-sizing: border-box;
  transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--lx,0px), var(--ly,0px)); }
.al-tile::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx,70%) var(--my,20%), rgba(255,236,190,.16), transparent 60%); }
.al-tile .al-hico{ width: 92px; height: 92px; }
.al-tile .al-tile__label{ font: 700 15px/1.25 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-shadow: -1px 2px 6px rgba(0,0,0,.8); }
.al-tile:hover, .al-tile.is-hover, .al-tile:focus-visible{ --lx: 1px; --ly: -6px; box-shadow: var(--al-face-light), var(--al-wall-up), var(--shadow-lift), 0 0 26px rgba(255,138,31,.16); }
.al-tile:hover::before, .al-tile.is-hover::before{ opacity: 1; }
.al-tile:hover::after, .al-tile.is-hover::after, .al-tile:focus-visible::after{ opacity: 1; transform: scaleX(1); }

/* ---------- MENU BOCZNE ---------- */
.al-sidebar{ display: flex; flex-direction: column; align-items: center; gap: 24px; padding: var(--space-4) 12px; width: var(--nav-collapsed); box-sizing: border-box; transition: width .25s ease; }
.al-sidebar .al-navbtn .al-ico{ width: 30px; height: 30px; }
.al-sidebar .al-brand{ display: block; width: 64px; filter: drop-shadow(-2px 3px 2px rgba(0,0,0,.8)); margin-bottom: 4px; }
.al-sidebar.is-expanded{ width: var(--nav-expanded); align-items: stretch; }
.al-sidebar.is-expanded .al-brand{ align-self: center; width: 88px; }
.al-sidebar.is-expanded .al-navbtn{ flex-direction: row; justify-content: flex-start; width: 100%; height: 54px; padding: 0 16px; gap: 14px; }
.al-sidebar.is-expanded .al-navbtn .al-ico{ width: 26px; height: 26px; }
.al-sidebar.is-expanded .al-navbtn .al-label{ font-size: 18px; line-height: 22px; }
.al-sidebar .al-spacer{ flex: 1; }
.al-toggle{ align-self: center; }
.al-toggle svg{ transition: transform .25s; }
.al-sidebar.is-expanded .al-toggle svg{ transform: rotate(180deg); }
.al-sidebar--bottom{ flex-direction: row; justify-content: space-around; width: 100%; gap: var(--space-2); padding: 12px 10px calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg-950), rgba(10,19,38,.88)); border-top: 1px solid var(--gold-700); }
.al-sidebar--bottom .al-navbtn{ width: 58px; height: 58px; }
.al-sidebar--bottom .al-navbtn .al-ico{ width: 24px; height: 24px; }
.al-sidebar--bottom .al-navbtn .al-label{ font-size: 10px; line-height: 12px; }
.al-sidebar--bottom .al-spacer, .al-sidebar--bottom .al-toggle, .al-sidebar--bottom .al-brand{ display: none; }
@media (max-width: 720px){
  .al-sidebar[data-responsive]{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; flex-direction: row; justify-content: space-around; width: 100%; gap: var(--space-2);
    padding: 12px 10px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg-950), rgba(10,19,38,.88)); border-top: 1px solid var(--gold-700); }
  .al-sidebar[data-responsive] .al-navbtn{ width: 58px; height: 58px; flex-direction: column; padding: 0; gap: 2px; }
  .al-sidebar[data-responsive] .al-navbtn .al-label{ font-size: 10px; line-height: 12px; }
  .al-sidebar[data-responsive] .al-navbtn .al-ico{ width: 24px; height: 24px; }
  .al-sidebar[data-responsive] .al-spacer, .al-sidebar[data-responsive] .al-toggle, .al-sidebar[data-responsive] .al-brand{ display: none; }
}

/* ---------- KONTROLKI W PEŁNI ZŁOTE ---------- */
.al-switch{ appearance: none; -webkit-appearance: none; position: relative; width: 52px; height: 28px; border-radius: var(--radius-pill); cursor: pointer; margin: 0;
  background: linear-gradient(225deg, var(--gold-700), var(--gold-900)); box-shadow: inset -2px 3px 5px rgba(0,0,0,.55), -3px 5px 8px rgba(0,0,0,.5); transition: background .2s; }
.al-switch::before{ content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 70% 25%, var(--gold-100), var(--gold-300) 40%, var(--gold-500) 70%, var(--gold-700));
  box-shadow: -2px 3px 4px rgba(0,0,0,.6), inset -1px 1px 1px rgba(255,255,255,.6); transition: transform .22s var(--al-ease); }
.al-switch:checked{ background: var(--al-gold-grad); box-shadow: inset -2px 3px 5px rgba(0,0,0,.35), -3px 5px 8px rgba(0,0,0,.5), 0 0 14px rgba(240,207,122,.35); }
.al-switch:checked::before{ transform: translateX(24px); }
.al-switch:focus-visible{ outline: 2px solid var(--gold-300); outline-offset: 3px; }
.al-range{ appearance: none; -webkit-appearance: none; width: 220px; height: 8px; border-radius: var(--radius-pill); cursor: pointer; margin: 0;
  background: linear-gradient(90deg, var(--gold-300) 0 var(--p,50%), var(--gold-900) var(--p,50%) 100%); box-shadow: inset -1px 2px 3px rgba(0,0,0,.6), -2px 3px 5px rgba(0,0,0,.4); }
.al-range::-webkit-slider-thumb{ -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 70% 25%, var(--gold-100), var(--gold-300) 40%, var(--gold-500) 70%, var(--gold-700)); box-shadow: -2px 3px 5px rgba(0,0,0,.7); }
.al-range::-moz-range-thumb{ width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--al-gold-grad); box-shadow: -2px 3px 5px rgba(0,0,0,.7); }
.al-arrow{ width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; display: inline-grid; place-items: center;
  background: radial-gradient(circle at 70% 25%, var(--gold-100), var(--gold-300) 35%, var(--gold-500) 65%, var(--gold-700));
  box-shadow: -1px 1.5px 0 var(--gold-700), -2px 3px 0 var(--gold-900), -4px 7px 9px rgba(0,0,0,.6), inset -1px 1px 1px rgba(255,255,255,.55); transition: transform .15s; }
.al-arrow svg{ width: 18px; height: 18px; fill: none; stroke: var(--bg-900); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.al-arrow:hover{ transform: translate(1px,-1px); }
.al-arrow:active{ transform: translate(-2px,3px); box-shadow: inset -2px 3px 5px rgba(0,0,0,.45); }
.al-segment{ display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: rgba(6,11,24,.7); box-shadow: inset -1px 2px 4px rgba(0,0,0,.6); border: 1px solid var(--gold-700); }
.al-segment button{ border: 0; background: none; cursor: pointer; padding: 4px 14px; border-radius: var(--radius-pill); font: 600 12px/16px var(--font-display); letter-spacing: .06em; color: var(--gold-300); transition: background .2s; }
.al-segment button[aria-pressed="true"]{ background: var(--al-gold-grad); color: var(--bg-950); box-shadow: -2px 3px 5px rgba(0,0,0,.5); }

/* ---------- PANEL / KONTENER (unosi się i lekko przechyla przy najechaniu) ---------- */
.al-panel{ position: relative; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--radius-lg);
  background: var(--al-panel-grad) padding-box, var(--al-gold-grad) border-box;
  box-shadow: inset -1px 1px 0 rgba(255,255,255,.09), -1px 1.5px 0 var(--wall-2), -2px 3px 0 var(--wall-3), var(--shadow-panel);
  padding: var(--space-4); color: var(--ink);
  transform: perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ly,0px));
  transition: transform .4s var(--al-ease), box-shadow .4s var(--al-ease); will-change: transform; }
.al-panel::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(225deg, rgba(255,255,255,.08), transparent 30%); }
.al-panel::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx,80%) var(--my,10%), rgba(255,236,190,.09), transparent 55%);
  box-shadow: inset 0 0 0 1px rgba(255,214,140,.35); }
.al-panel.is-lifted, .al-panel.is-hover{ --ly: -6px;
  box-shadow: inset -1px 1px 0 rgba(255,255,255,.12), -1px 1.5px 0 var(--wall-2), -2px 3px 0 var(--wall-2), -3px 4.5px 0 var(--wall-3), -16px 26px 40px rgba(0,0,0,.6), 0 0 24px rgba(255,170,80,.12); }
.al-panel.is-lifted::after, .al-panel.is-hover::after{ opacity: 1; }
.al-panel.is-tracking{ transition: transform .12s linear, box-shadow .4s var(--al-ease); }
.al-panel[data-static]{ transform: none !important; }
.al-panel__head{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.al-panel__title{ margin: 0; font: 500 18px/24px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.al-muted{ color: var(--ink-muted); } .al-faint{ color: var(--ink-faint); }

/* ---------- KPI ---------- */
.al-kpi{ --c: var(--ink); }
.al-kpi__label{ font: 500 15px/20px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.al-kpi__row{ display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.al-kpi__value{ font: 600 44px/48px var(--font-display); color: var(--c); text-shadow: 0 0 18px color-mix(in srgb, var(--c) 55%, transparent); font-variant-numeric: tabular-nums; transition: text-shadow .3s; }
.al-kpi.is-lifted .al-kpi__value{ text-shadow: 0 0 26px color-mix(in srgb, var(--c) 80%, transparent); }
.al-kpi__delta{ font: 500 20px/24px var(--font-display); color: var(--c); opacity: .9; }
.al-c-blue{ --c: var(--data-blue); } .al-c-green{ --c: var(--data-green); } .al-c-yellow{ --c: var(--data-yellow); }
.al-c-orange{ --c: var(--data-orange); } .al-c-red{ --c: var(--data-red); } .al-c-pink{ --c: var(--data-pink); } .al-c-violet{ --c: var(--data-violet); }

/* ---------- WYKRESY (neon) ---------- */
.al-chart text{ fill: var(--ink-muted); font: 400 11px var(--font-sans); }
.al-chart .grid{ stroke: rgba(255,255,255,.07); }
.al-chart .line{ fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--c)); }
.al-chart .dot{ fill: var(--bg-900); stroke: var(--c); stroke-width: 2; }
.al-chart .bar{ fill: var(--c); fill-opacity: .82; filter: drop-shadow(0 0 6px var(--c)); transform-box: fill-box; transform-origin: 50% 100%; transition: fill-opacity .25s; }
.al-chart .bar:hover{ fill-opacity: 1; }
.al-chart .ring{ fill: none; stroke: var(--c); stroke-width: 16; filter: drop-shadow(0 0 5px var(--c)); }
.al-chart .track{ fill: none; stroke: rgba(255,255,255,.06); stroke-width: 16; }
.is-lifted .al-chart .line{ stroke-width: 3; }

/* ---------- TABELA ---------- */
.al-table{ width: 100%; border-collapse: collapse; font: 500 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; }
.al-table th{ text-align: left; padding: 8px 12px; font: 500 14px/18px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--gold-700); }
.al-table td{ padding: 8px 12px; color: var(--ink); border-bottom: 1px solid rgba(255,255,255,.05); transition: background .2s; }
.al-table tbody tr:nth-child(odd) td{ background: rgba(255,255,255,.025); }
.al-table tbody tr:hover td{ background: rgba(51,198,255,.07); }
.al-chip{ display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font: 600 12px/18px var(--font-display); letter-spacing: .05em;
  color: var(--c, var(--ink)); background: color-mix(in srgb, var(--c, #fff) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c, #fff) 45%, transparent); }

/* ---------- LOGO ---------- */
.al-logo{ display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.al-logo img{ display: block; filter: drop-shadow(-2px 3px 2px rgba(0,0,0,.8)); }
.al-logo__word{ font: 700 15px/1 var(--font-display); letter-spacing: .04em; }
.al-logo__at{ color: var(--logo-at); text-shadow: 0 0 6px rgba(255,138,31,.45); }
.al-logo__rest{ color: var(--ink); text-shadow: 0 0 6px rgba(255,255,255,.65), 0 0 1px #fff; }

/* =====================================================================
   IKONY Z RUCHEM
   .al-ico  – ikony biblioteki (Tabler, 24 px): na hover „rysują się” od nowa.
   .al-hico – ikony bohaterów AtLogic (64 px): każda ma własny ruch + refleks światła.
   Ruch odpala hover/focus rodzica (przycisk, kafel, panel) albo klasa .is-hover/.al-play.
   ===================================================================== */
.al-hico{ display: block; overflow: visible; flex: none; }
.al-hico .base{ fill: none; stroke: url(#al-gold64); stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(-1.5px 2px 0 #6e3d0a) drop-shadow(-2px 4px 3px rgba(0,0,0,.85)) drop-shadow(0 0 3px rgba(230,163,75,.45)); transition: filter .35s; }
.al-hico .base .f{ fill: url(#al-gold64); stroke: none; }
.al-hico .glint{ fill: none; stroke: #fffbea; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.al-hico .glint .f{ fill: #fffbea; stroke: none; }
.al-hico .ink{ stroke: #5c3a0e !important; fill: none !important; }
.al-hico .beam{ stroke: var(--laser) !important; filter: drop-shadow(0 0 3px var(--laser)); opacity: 0; }
.al-hico .band{ transform: translateX(-60px); }
.al-hico *{ transform-box: fill-box; }

/* „Draw” dla ikon biblioteki */
.al-ico .al-dr{ stroke-dasharray: 1; stroke-dashoffset: 0; }

/* --- uruchamianie --- */
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) .al-ico .al-dr, .al-play .al-ico .al-dr{animation: al-draw .9s var(--al-ease) both;}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) .al-hico .base, .al-play .al-hico .base{filter: brightness(1.25) saturate(1.1) drop-shadow(-2px 3px 0 #6e3d0a) drop-shadow(-3px 6px 4px rgba(0,0,0,.85)) drop-shadow(0 0 9px rgba(255,192,97,.7));}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) .al-hico .glint, .al-play .al-hico .glint{opacity: .95;}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) .al-hico .band, .al-play .al-hico .band{animation: al-sweep 1.05s ease-out .08s both;}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) [data-anim="shipment"] .a-wheel, .al-play [data-anim="shipment"] .a-wheel{animation: al-spin .7s linear 2;}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) [data-anim="shipment"] .a-speed, .al-play [data-anim="shipment"] .a-speed{animation: al-speed .45s ease-in-out 3;}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) [data-anim="shipment"] .a-body, .al-play [data-anim="shipment"] .a-body{animation: al-bob .35s ease-in-out 4;}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) [data-anim="inventory"] .a-box, .al-play [data-anim="inventory"] .a-box{animation: al-drop .6s var(--al-ease) both; animation-delay: calc(var(--i) * .09s);}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) [data-anim="analytics"] .a-bar, .al-play [data-anim="analytics"] .a-bar{animation: al-grow .6s var(--al-ease) both; animation-delay: calc(var(--i) * .1s);}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) [data-anim="analytics"] .a-arrow, .al-play [data-anim="analytics"] .a-arrow{stroke-dasharray: 1; animation: al-draw .8s var(--al-ease) .25s both;}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) [data-anim="analytics"] .a-head, .al-play [data-anim="analytics"] .a-head{animation: al-pop .4s var(--al-ease) .85s both;}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) [data-anim="schedule"] .a-rings, .al-play [data-anim="schedule"] .a-rings{animation: al-ring .5s ease-in-out 2;}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) [data-anim="schedule"] .a-truck, .al-play [data-anim="schedule"] .a-truck{animation: al-drive .8s var(--al-ease) both;}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) [data-anim="scanner"] .beam, .al-play [data-anim="scanner"] .beam{opacity: 1; animation: al-scan 1.1s ease-in-out 2;}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) [data-anim="scanner"] .a-corners, .al-play [data-anim="scanner"] .a-corners{animation: al-focus .55s ease-in-out 2;}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) [data-anim="settings"] .a-gear, .al-play [data-anim="settings"] .a-gear{animation: al-turn 1s var(--al-ease) both;}
:is(.al-tile,.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-hover):is(:hover,:focus-visible,.is-hover) [data-anim="pulse"] .a-all, .al-play [data-anim="pulse"] .a-all{animation: al-pulse .6s var(--al-ease);}

@keyframes al-draw{ from{ stroke-dashoffset: 1; } to{ stroke-dashoffset: 0; } }
@keyframes al-sweep{ from{ transform: translateX(-60px); } to{ transform: translateX(110px); } }
@keyframes al-spin{ to{ transform: rotate(360deg); } }
@keyframes al-speed{ 0%,100%{ transform: translateX(0); opacity: 1; } 50%{ transform: translateX(-5px); opacity: .45; } }
@keyframes al-bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-1.2px); } }
@keyframes al-drop{ 0%{ transform: translateY(-14px); opacity: 0; } 60%{ transform: translateY(2px); opacity: 1; } 100%{ transform: translateY(0); } }
@keyframes al-grow{ 0%{ transform: scaleY(.15); } 70%{ transform: scaleY(1.08); } 100%{ transform: scaleY(1); } }
@keyframes al-pop{ 0%{ transform: scale(.2); opacity: 0; } 70%{ transform: scale(1.25); opacity: 1; } 100%{ transform: scale(1); } }
@keyframes al-ring{ 0%,100%{ transform: rotate(0); } 30%{ transform: rotate(-9deg); } 70%{ transform: rotate(9deg); } }
@keyframes al-drive{ 0%{ transform: translateX(-26px); opacity: 0; } 60%{ transform: translateX(3px); opacity: 1; } 100%{ transform: translateX(0); } }
@keyframes al-scan{ 0%{ transform: translateY(-26px); } 50%{ transform: translateY(0); } 100%{ transform: translateY(-26px); } }
@keyframes al-focus{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(.9); } }
@keyframes al-turn{ 0%{ transform: rotate(0); } 75%{ transform: rotate(100deg); } 100%{ transform: rotate(90deg); } }
@keyframes al-pulse{ 0%,100%{ transform: scale(1); } 45%{ transform: scale(1.12); } }
.al-hico .a-wheel, .al-hico .a-gear, .al-hico .a-head, .al-hico .a-corners, .al-hico .a-all{ transform-origin: center; }
.al-hico .a-rings{ transform-origin: 50% 100%; }

@media (prefers-reduced-motion: reduce){
  .al-tile, .al-panel, .al-navbtn, .al-iconbtn, .al-btn{ transition: none !important; }
  .al-panel, .al-tile{ --rx: 0deg !important; --ry: 0deg !important; }
  .al-hico *, .al-ico *{ animation: none !important; }
}

/* =====================================================================
   WARIANT PODŚWIETLENIA „GLOW” (z EventPlatform: .card-3d + „Fire Orange”)
   Domyślnie: laser pod blokiem. Atrybut data-al-hover="glow" na <html>, <body>
   albo dowolnym kontenerze przełącza wszystko w środku na podświetlenie całego kafla.
   ===================================================================== */

:root{
  --al-glow-rim: linear-gradient(225deg, #fff1d2 0%, #ffc067 22%, #ff9a1f 48%, #ff7a00 72%, #ff5a1f 100%);
  --al-glow: 0 0 0 1px rgba(255,170,60,.9), 0 0 18px 2px rgba(255,140,0,.75), 0 0 46px 8px rgba(255,110,20,.45), 0 0 110px 20px rgba(255,90,30,.22);
  --al-glow-in: inset 0 0 26px rgba(255,140,0,.32), inset 0 0 6px rgba(255,200,120,.35);
  --al-spring: cubic-bezier(.175,.885,.32,1.275);
}
[data-al-hover="glow"] :is(.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-tile)::after{ display: none; }
[data-al-hover="glow"] :is(.al-navbtn,.al-iconbtn,.al-btn,.al-select,.al-tile){ transition: transform .45s var(--al-spring), box-shadow .3s ease, filter .3s ease; }
[data-al-hover="glow"] :is(.al-navbtn,.al-iconbtn,.al-btn,.al-select):is(:hover,.is-hover,.is-active,[aria-current="page"]),
[data-al-hover="glow"] .al-tile:is(:hover,.is-hover,:focus-visible){
  border-width: 2px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,150,40,.20), transparent 60%) padding-box, var(--al-dome) padding-box, var(--al-face-grad) padding-box, var(--al-glow-rim) border-box;
  box-shadow: var(--al-face-light), var(--al-glow-in), var(--al-wall-up), var(--shadow-lift), var(--al-glow);
  filter: saturate(1.25) brightness(1.15);
}
[data-al-hover="glow"] :is(.al-navbtn,.al-iconbtn,.al-btn,.al-select):is(:hover,.is-hover){ transform: translate(1px,-4px) scale(1.06); }
[data-al-hover="glow"] :is(.al-navbtn,.al-btn):is(.is-active,[aria-current="page"]):not(:hover){ transform: translate(1px,-2px); }
[data-al-hover="glow"] .al-tile:is(:hover,.is-hover,:focus-visible){ --lx: 0px; --ly: -14px; --rx: 2deg !important; --ry: 0deg !important; transform: perspective(1000px) rotateX(2deg) translateY(-14px) scale(1.04); z-index: 2; }
[data-al-hover="glow"] .al-tile:is(:hover,.is-hover) .al-tile__label{ color: #fff3e0; text-shadow: 0 0 12px rgba(255,150,40,.9), -1px 2px 6px rgba(0,0,0,.8); }
[data-al-hover="glow"] .al-tile:is(:hover,.is-hover) .al-hico .base{ filter: brightness(1.35) saturate(1.2) drop-shadow(-2px 3px 0 #6e3d0a) drop-shadow(0 0 14px rgba(255,170,60,.95)); }
[data-al-hover="glow"] :is(.al-navbtn,.al-iconbtn,.al-btn,.al-tile):active{ transform: translate(-1px,2px) scale(.96); }
/* panele jak .card-3d, mocniej: w górę o 12 px, przechył 2°, sprężyste wejście, złoto-pomarańczowa poświata */
[data-al-hover="glow"] .al-panel{ transition: transform .45s var(--al-spring), box-shadow .4s ease; }
[data-al-hover="glow"] .al-panel:is(.is-lifted,.is-hover){ --ly: -12px; --rx: 2deg !important; --ry: 0deg !important;
  box-shadow: inset -1px 1px 0 rgba(255,255,255,.14), inset 0 0 30px rgba(253,185,49,.12), -1px 1.5px 0 var(--wall-2), -2px 3px 0 var(--wall-3),
    0 30px 70px rgba(0,0,0,.9), 0 0 0 1px rgba(255,190,90,.85), 0 0 26px 3px rgba(253,185,49,.5), 0 0 70px 10px rgba(255,140,0,.22); }
[data-al-hover="glow"] .al-panel:is(.is-lifted,.is-hover)::after{ opacity: 1; box-shadow: inset 0 0 0 1px rgba(255,214,140,.9); }
[data-al-hover="glow"] .al-panel.is-tracking{ transition: transform .45s var(--al-spring), box-shadow .4s ease; }

/* =====================================================================
   ANIMOWANE LOGO  — <div data-al-logo="draw|spin|shine|bounce"></div>
   gra przy wejściu, przy najechaniu i kliknięciu; data-loop="6" = co 6 s
   ===================================================================== */
.al-logoanim{ position: relative; width: 240px; aspect-ratio: 974 / 924; perspective: 900px; cursor: pointer; }
.al-logoanim .lg-layer{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.al-logoanim .lg-mark{ transform-origin: 50% 46%; filter: drop-shadow(-3px 5px 3px rgba(0,0,0,.75)); }
.al-logoanim .lg-word{ transform-origin: 50% 85%; }
.al-logoanim .lg-letter{ fill: var(--ink); }
.al-logoanim .lg-at{ fill: var(--logo-at); }
.al-logoanim .lg-glint{ opacity: 0; pointer-events: none; }
.al-logoanim .lg-band{ transform: translateX(-200px); }
.al-logoanim *{ transform-box: fill-box; }
.al-logoanim .lg-node, .al-logoanim .lg-letter{ transform-origin: 50% 50%; }
.al-logoanim .g-dash{ transform-origin: center; }
.al-logoanim .lg-guides *{ vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference){ .al-logoanim[data-anim="draw"]:not(.is-playing) :is(.lg-mark,.lg-word,.lg-guides){ opacity: 0; } }

/* 1 · RYSOWANIE — linie konstrukcyjne kreślą się, ramiona obrysowują i wypełniają, węzły wskakują, litery wchodzą */
.al-logoanim[data-anim="draw"].is-playing .g-line{ stroke-dasharray: 1; animation: lg-draw 1s ease-out both; }
.al-logoanim[data-anim="draw"].is-playing .g-dash{ animation: lg-orbit 1.1s ease-out both; }
.al-logoanim[data-anim="draw"].is-playing .lg-base .lg-arm{ stroke-width: 4; stroke-dasharray: 1; fill-opacity: 0; animation: lg-draw .9s ease-in-out .5s both, lg-fill .5s ease-out 1.3s both; }
.al-logoanim[data-anim="draw"].is-playing .lg-base .lg-node{ animation: lg-pop .45s var(--al-spring) both; animation-delay: calc(1.3s + var(--i) * .07s); }
.al-logoanim[data-anim="draw"].is-playing .lg-word > g:first-of-type .lg-letter{ animation: lg-rise .5s var(--al-ease) both; animation-delay: calc(1.7s + var(--i) * .07s); }
/* 2 · OBRÓT 360 — znak obraca się jak moneta, orbity kręcą się w przeciwną stronę */
.al-logoanim[data-anim="spin"].is-playing .lg-mark{ animation: lg-spin 1.6s cubic-bezier(.6,0,.25,1) both; }
.al-logoanim[data-anim="spin"].is-playing .g-dash{ animation: lg-turn 1.6s cubic-bezier(.6,0,.25,1) both; }
/* 3 · BŁYŚNIĘCIE — po złocie i napisie przelatuje refleks, węzły iskrzą */
.al-logoanim[data-anim="shine"].is-playing .lg-glint{ opacity: .9; }
.al-logoanim[data-anim="shine"].is-playing .lg-band{ animation: lg-sweep 1.2s ease-in-out both; }
.al-logoanim[data-anim="shine"].is-playing .lg-word .lg-band{ animation-delay: .25s; }
.al-logoanim[data-anim="shine"].is-playing .lg-mark{ animation: lg-flash 1.2s ease-in-out both; }
.al-logoanim[data-anim="shine"].is-playing .lg-base .lg-node{ animation: lg-spark .5s ease-out both; animation-delay: calc(.2s + var(--i) * .08s); }
/* 4 · PODSKOCZENIE — przysiad, skok, lądowanie; węzły i litery odbijają się falą */
.al-logoanim[data-anim="bounce"].is-playing .lg-mark{ transform-origin: 50% 74%; animation: lg-jump 1.1s ease both; }
.al-logoanim[data-anim="bounce"].is-playing .lg-base .lg-node{ animation: lg-hop .55s ease both; animation-delay: calc(.55s + var(--i) * .05s); }
.al-logoanim[data-anim="bounce"].is-playing .lg-word > g:first-of-type .lg-letter{ animation: lg-hop .5s ease both; animation-delay: calc(.7s + var(--i) * .05s); }

@keyframes lg-draw{ from{ stroke-dashoffset: 1; } to{ stroke-dashoffset: 0; } }
@keyframes lg-fill{ from{ fill-opacity: 0; } to{ fill-opacity: 1; } }
@keyframes lg-orbit{ from{ opacity: 0; transform: rotate(-60deg) scale(.85); } to{ opacity: 1; transform: none; } }
@keyframes lg-pop{ 0%{ transform: scale(0); } 70%{ transform: scale(1.25); } 100%{ transform: scale(1); } }
@keyframes lg-rise{ from{ opacity: 0; transform: translateY(40px); } to{ opacity: 1; transform: none; } }
@keyframes lg-spin{ from{ transform: rotateY(0); } to{ transform: rotateY(360deg); } }
@keyframes lg-turn{ from{ transform: rotate(0); } to{ transform: rotate(-90deg); } }
@keyframes lg-sweep{ from{ transform: translateX(-300px); } to{ transform: translateX(1600px); } }
@keyframes lg-flash{ 0%,100%{ filter: drop-shadow(-3px 5px 3px rgba(0,0,0,.75)); } 45%{ filter: brightness(1.45) drop-shadow(-3px 5px 3px rgba(0,0,0,.75)) drop-shadow(0 0 14px rgba(255,200,110,.85)); } }
@keyframes lg-spark{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.3); } }
@keyframes lg-jump{ 0%{ transform: none; } 18%{ transform: scale(1.08,.86); } 42%{ transform: translateY(-16%) scale(.95,1.07); } 62%{ transform: scale(1.07,.9); } 78%{ transform: translateY(-4%); } 100%{ transform: none; } }
@keyframes lg-hop{ 0%,100%{ transform: none; } 45%{ transform: translateY(-40px); } }
@media (prefers-reduced-motion: reduce){ .al-logoanim *{ animation: none !important; } }

/* =====================================================================
   MOBILE / TABLET — elementy kompaktowe
   ===================================================================== */
.al-topbar{ display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: linear-gradient(to bottom, var(--bg-950), rgba(10,19,38,.85)); border-bottom: 1px solid var(--gold-700); }
.al-topbar__title{ flex: 1; font: 600 18px/22px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.al-kpi--sm{ padding: 12px; }
.al-kpi--sm .al-kpi__label{ font-size: 11px; line-height: 14px; }
.al-kpi--sm .al-kpi__value{ font-size: 28px; line-height: 32px; }
.al-kpi--sm .al-kpi__delta{ font-size: 14px; }
.al-tile--sm{ min-height: 0; padding: 14px 6px 12px; gap: 8px; border-radius: 16px; }
.al-tile--sm .al-hico{ width: 44px; height: 44px; }
.al-tile--sm .al-tile__label{ font-size: 10.5px; letter-spacing: .08em; }
.al-mcard{ display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; }
.al-mcard__title{ font: 600 15px/20px var(--font-sans); color: var(--ink); }
.al-mcard__meta{ font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.al-mcard__num{ font: 600 16px/20px var(--font-display); text-align: right; font-variant-numeric: tabular-nums; }
.al-fab{ position: absolute; right: 18px; bottom: 96px; width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 70% 25%, var(--gold-100), var(--gold-300) 35%, var(--gold-500) 65%, var(--gold-700));
  box-shadow: -1px 1.5px 0 var(--gold-700), -3px 4px 0 var(--gold-900), -6px 12px 16px rgba(0,0,0,.65), inset -1px 1px 1px rgba(255,255,255,.55); }
.al-fab svg{ width: 26px; height: 26px; fill: none; stroke: var(--bg-900); stroke-width: 2.6; stroke-linecap: round; }

/* =====================================================================
   PALETA STANDARDOWA — data-al-palette="standard" (dawniej "strong") na kontenerze podmienia neon na nasycone kolory
   ===================================================================== */
[data-al-palette="strong"],[data-al-palette="standard"]{
  --data-blue: var(--data-blue-strong); --data-green: var(--data-green-strong); --data-yellow: var(--data-yellow-strong);
  --data-orange: var(--data-orange-strong); --data-red: var(--data-red-strong); --data-pink: var(--data-pink-strong); --data-violet: var(--data-violet-strong);
  --status-ok: var(--data-green-strong); --status-warn: var(--data-yellow-strong); --status-error: var(--data-red-strong); --status-info: var(--data-blue-strong);
}
[data-al-palette="strong"] .al-chart .bar, [data-al-palette="strong"] .al-chart .seg{ fill-opacity: 1; }
[data-al-palette="strong"] .al-chart .line, [data-al-palette="strong"] .al-chart .ring, [data-al-palette="strong"] .al-chart .bar{ filter: none; }
[data-al-palette="strong"] .al-kpi__value{ text-shadow: none; }

/* ---------- WYKRES SŁUPKOWY SKUMULOWANY ---------- */
.al-chart .seg{ fill: var(--c); fill-opacity: .88; stroke: var(--bg-900); stroke-width: 1.5; transition: fill-opacity .2s, filter .2s; }
.al-chart .stack:hover .seg{ fill-opacity: 1; filter: drop-shadow(0 0 6px var(--c)); }
.al-chart .stack .total{ fill: var(--ink); font: 600 13px var(--font-display); }
.al-chart .stack:hover .total{ fill: var(--gold-300); }
.al-legend{ display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.al-legend span{ display: inline-flex; align-items: center; gap: 7px; }
.al-legend i{ width: 12px; height: 12px; border-radius: 3px; background: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }

/* ---------- WSKAŹNIK OKRĄGŁY ---------- */
.al-gauge{ --c: var(--status-ok); position: relative; display: inline-block; width: 200px; aspect-ratio: 1; container-type: inline-size; }
.al-gauge svg{ width: 100%; height: 100%; overflow: visible; }
.al-gauge .g-track{ fill: none; stroke: rgba(255,255,255,.07); stroke-width: 14; stroke-linecap: round; }
.al-gauge .g-val{ fill: none; stroke: var(--c); stroke-width: 14; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--c)); transition: stroke-dashoffset 1.2s var(--al-ease); }
.al-gauge .g-tick{ stroke: var(--gold-300); stroke-width: 3; stroke-linecap: round; }
.al-gauge .g-ticks{ stroke: rgba(255,255,255,.18); stroke-width: 1.5; }
.al-gauge__center{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.al-gauge__value{ font: 600 23cqw/1 var(--font-display); color: var(--c); text-shadow: 0 0 16px color-mix(in srgb, var(--c) 60%, transparent); font-variant-numeric: tabular-nums; }
.al-gauge__value small{ font-size: .5em; margin-left: 2px; }
.al-gauge__label{ margin-top: 3cqw; font: 500 max(10px,6.5cqw)/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.al-gauge__target{ margin-top: 1cqw; font: 400 max(10px,6cqw)/1.3 var(--font-sans); color: var(--ink-faint); }
.al-gauge.is-bad{ --c: var(--status-error); }
.al-gauge.is-warn{ --c: var(--status-warn); }
[data-al-palette="strong"] .al-gauge .g-val{ filter: none; }
[data-al-palette="strong"] .al-gauge__value{ text-shadow: none; }

/* ---------- TABELA EDYTOWALNA ---------- */
.al-etable input, .al-etable select{ width: 100%; box-sizing: border-box; background: rgba(6,11,24,.45); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-sm);
  color: var(--ink); font: 500 14px/20px var(--font-sans); padding: 6px 9px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; font-variant-numeric: tabular-nums; }
.al-etable input:hover, .al-etable select:hover{ border-color: rgba(212,166,72,.45); }
.al-etable input:focus, .al-etable select:focus{ border-color: var(--gold-300); background: rgba(21,37,72,.8); box-shadow: 0 0 0 3px rgba(240,207,122,.18), 0 3px 0 -1px var(--laser); }
.al-etable input.is-invalid{ border-color: var(--status-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-error) 25%, transparent); }
.al-etable input.num{ text-align: right; }
.al-etable select{ appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-300) 50%), linear-gradient(135deg, var(--gold-300) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.al-etable select option{ background: var(--bg-800); color: var(--ink); }
.al-etable td{ padding: 6px 8px; }
.al-etable tr.is-new td{ animation: al-rowin .5s var(--al-ease); }
.al-etable tfoot td{ border-top: 1px solid var(--gold-700); font: 600 15px/20px var(--font-display); color: var(--gold-300); padding: 10px 12px; }
.al-etable tfoot td.num{ text-align: right; }
.al-etable .al-del{ width: 32px; height: 32px; }
.al-etable .al-del .al-ico{ width: 16px; height: 16px; }
.al-etable [data-status]{ font-weight: 600; }
.al-etable select[data-v="ok"]{ color: var(--status-ok); } .al-etable select[data-v="warn"]{ color: var(--status-warn); } .al-etable select[data-v="err"]{ color: var(--status-error); }
@keyframes al-rowin{ from{ background: rgba(255,138,31,.18); } to{ background: transparent; } }

:is([data-al-palette="standard"]) .al-chart .bar, :is([data-al-palette="standard"]) .al-chart .seg{ fill-opacity: 1; }
:is([data-al-palette="standard"]) :is(.al-chart .line,.al-chart .ring,.al-chart .bar,.al-gauge .g-val){ filter: none; }
:is([data-al-palette="standard"]) :is(.al-kpi__value,.al-gauge__value){ text-shadow: none; }

/* ---------- MAPA (kropkowa mapa świata + trasy laserowe) ---------- */
.al-map{ display: block; overflow: visible; }
.al-map .m-land circle{ fill: #2b4b85; opacity: .55; }
.al-map .m-arc{ fill: none; stroke: var(--laser); stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--laser)) drop-shadow(0 0 8px rgba(255,122,26,.55));
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: al-draw 1.4s var(--al-ease) forwards; animation-delay: calc(var(--i) * .12s); }
.al-map .m-node .m-dot{ fill: #ffb347; filter: drop-shadow(0 0 4px #ff8a1f); }
.al-map .m-node.is-hub .m-dot{ fill: var(--gold-100); stroke: var(--gold-500); stroke-width: 1.5; filter: drop-shadow(0 0 8px var(--gold-300)); }
.al-map .m-halo{ fill: none; stroke: #ff8a1f; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: al-halo 2.4s ease-out infinite; animation-delay: calc(var(--i) * .2s); }
.al-map .m-node{ cursor: pointer; }
.al-map .m-node:hover .m-dot{ fill: #fff3cf; }
@keyframes al-halo{ 0%{ opacity: .9; transform: scale(.4); } 100%{ opacity: 0; transform: scale(2.2); } }
@media (prefers-reduced-motion: reduce){ .al-map .m-arc{ animation: none; stroke-dashoffset: 0; } .al-map .m-halo{ animation: none; } }

/* =====================================================================
   UKŁAD APLIKACJI (szkielet z starter/) + laser na wszystkich obiektach
   ===================================================================== */
.al-app{ display: flex; min-height: 100vh; }
.al-app > .al-sidebar{ position: sticky; top: 0; height: 100vh; flex: none; overflow-y: auto; }
.al-app > main{ flex: 1; min-width: 0; padding: 18px 28px 40px 8px; display: flex; flex-direction: column; gap: 24px; box-sizing: border-box; }
.al-mobile-only{ display: none !important; }
@media (max-width: 720px){
  .al-app > .al-sidebar{ position: fixed; height: auto; top: auto; }
  .al-app > main{ padding: 0 14px 120px; gap: 16px; }
  .al-mobile-only{ display: flex !important; }
  .al-desktop-only{ display: none !important; }
  .al-grid{ grid-template-columns: 1fr 1fr !important; }
  .al-grid--1m{ grid-template-columns: 1fr !important; }
}
.al-grid{ display: grid; gap: 24px; }
/* laser pod podniesionym panelem (tabele, wykresy, KPI) – wariant A */
.al-panel.is-lifted:not([data-static]){ box-shadow: inset -1px 1px 0 rgba(255,255,255,.12), -1px 1.5px 0 var(--wall-2), -2px 3px 0 var(--wall-2), -3px 4.5px 0 var(--wall-3), -16px 26px 40px rgba(0,0,0,.6), 0 9px 0 -6px var(--laser), 0 14px 22px -8px var(--laser); }
[data-al-hover="glow"] .al-panel.is-lifted:not([data-static]){ box-shadow: inset -1px 1px 0 rgba(255,255,255,.14), inset 0 0 30px rgba(253,185,49,.12), 0 30px 70px rgba(0,0,0,.9), 0 0 0 1px rgba(255,190,90,.85), 0 0 26px 3px rgba(253,185,49,.5), 0 0 70px 10px rgba(255,140,0,.22); }
/* wiersz tabeli: laser z lewej przy najechaniu i dla wiersza wybranego */
.al-table tbody tr{ cursor: default; }
.al-table tbody tr:hover td:first-child, .al-table tbody tr.is-active td:first-child{ box-shadow: inset 3px 0 0 var(--laser); }
.al-table tbody tr.is-active td{ background: rgba(255,122,26,.08); }
.al-segment button{ white-space: nowrap; }