/* ═══════════════════════════════════════════════════════════════════════════
 * PetroNavX — premium.css  v2 (refinement pass)
 * One motion system for the whole app. Tokens first, everything inherits.
 *   micro interactions 120–180ms · modals 180–260ms · entrances 250–400ms
 * Transform/opacity only (no layout-property animation). Reduced-motion safe.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Canonical color palette (single source of truth) ──────────────────
   * Each page links this file BEFORE its own <style>, so any page that still
   * declares these in its own :root keeps winning — colors are unchanged.
   * These values are the documented default + a safety net for pages that
   * link premium.css but are missing a token. Light theme: */
  --bg:#f3f4f8; --bg2:#eaecf2; --w:#fff;
  --navy:#00394d; --red:#dc1e28; --green:#1a7a40; --gold:#c8901a; --blue:#1e3fa8;
  --border:#dce0ea; --t:#1a1a2e; --t2:#556; --t3:#8892a8;

  --m-fast:140ms; --m-mod:220ms; --m-in:300ms;
  --ease:cubic-bezier(.25,.7,.3,1); --ease-pop:cubic-bezier(.25,.9,.3,1.15);
  --elev-1:0 1px 2px rgba(15,25,60,.05),0 2px 8px rgba(15,25,60,.05);
  --elev-2:0 2px 6px rgba(15,25,60,.06),0 8px 24px rgba(15,25,60,.08);
  --elev-3:0 8px 20px rgba(15,25,60,.10),0 20px 48px rgba(15,25,60,.12);
}
[data-theme="dark"]{
  --bg:#0d1117; --bg2:#161b22; --w:#1c2128;
  --navy:#58a6ff; --red:#f85149; --green:#3fb950; --gold:#d29922; --blue:#58a6ff;
  --border:#30363d; --t:#c9d1d9; --t2:#8b949e; --t3:#6e7681;

  --elev-1:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.3);
  --elev-2:0 2px 6px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --elev-3:0 8px 20px rgba(0,0,0,.5),0 20px 48px rgba(0,0,0,.45);
}

/* ── Global micro-interactions (fast, quiet) ───────────────────────────── */
button{transition:transform var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease),opacity var(--m-fast) var(--ease),background var(--m-fast) var(--ease);}
button:not(:disabled):active{transform:scale(.975);}
button:disabled{opacity:.45;cursor:not-allowed;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue,#1e3fa8)!important;box-shadow:0 0 0 3px rgba(30,63,168,.10);transition:box-shadow var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease);}
[data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{box-shadow:0 0 0 3px rgba(88,166,255,.14);}
::selection{background:rgba(30,63,168,.16);}
tbody tr{transition:background var(--m-fast) var(--ease);}

/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes pnx-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes pnx-slide-up{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes pnx-slide-in{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}}
@keyframes pnx-pop{0%{transform:scale(.7);opacity:0;}75%{transform:scale(1.04);}100%{transform:scale(1);opacity:1;}}
@keyframes pnx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,30,40,0);}50%{box-shadow:0 0 0 2px rgba(220,30,40,.10);}}
@keyframes pnx-shimmer{0%{background-position:-400px 0;}100%{background-position:400px 0;}}
@keyframes pnx-toast{from{opacity:0;transform:translate(-50%,8px);}to{opacity:1;transform:translate(-50%,0);}}

/* ── Reusable classes ──────────────────────────────────────────────────── */
.fade-in{animation:pnx-fade-in var(--m-in) var(--ease) both;}
.slide-up{animation:pnx-slide-up var(--m-in) var(--ease) both;}
.slide-in{animation:pnx-slide-in var(--m-in) var(--ease) both;}
.scale-click:active{transform:scale(.975);}
.pulse-urgent{animation:pnx-pulse 3.2s ease-in-out infinite;}

.premium-card{background:var(--w,#fff);border:1px solid var(--border,#dce0ea);border-radius:12px;transition:box-shadow var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease);}
.premium-card:hover{border-color:#c7cfdf;box-shadow:var(--elev-2);}
[data-theme="dark"] .premium-card:hover{border-color:#33415c;}

.hover-lift{transition:transform var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease);}
.hover-lift:hover{transform:translateY(-1px);box-shadow:var(--elev-2);}

.soft-glow{box-shadow:0 0 0 1px rgba(30,63,168,.08),var(--elev-1);}
[data-theme="dark"] .soft-glow{box-shadow:0 0 0 1px rgba(88,166,255,.12),var(--elev-1);}

.glass-panel{background:rgba(255,255,255,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(220,224,234,.7);border-radius:12px;}
[data-theme="dark"] .glass-panel{background:rgba(18,23,34,.74);border-color:rgba(48,54,61,.7);}

.command-card{background:var(--w,#fff);border:1px solid var(--border,#dce0ea);border-radius:12px;transition:transform var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease);}
.command-card:hover{transform:translateY(-1px);border-color:var(--blue,#1e3fa8);box-shadow:var(--elev-2);}

.premium-button{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:8px;background:var(--navy,#00394d);color:#fff;font-weight:800;font-size:11.5px;cursor:pointer;transition:transform var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease),opacity var(--m-fast) var(--ease);}
.premium-button:hover{opacity:.93;box-shadow:var(--elev-1);}

.status-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:9.5px;font-weight:800;letter-spacing:.02em;background:var(--bg,#f3f4f8);border:1px solid var(--border,#dce0ea);color:var(--t2,#556);}
.status-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7;}
.status-badge.ok{color:var(--green,#1a7a40);background:rgba(26,122,64,.08);border-color:rgba(26,122,64,.2);}
.status-badge.warn{color:var(--gold,#b8860b);background:rgba(184,134,11,.08);border-color:rgba(184,134,11,.22);}
.status-badge.bad{color:var(--red,#dc1e28);background:rgba(220,30,40,.07);border-color:rgba(220,30,40,.2);}

.skeleton{position:relative;overflow:hidden;background:var(--bg2,#eaecf2);border-radius:8px;color:transparent!important;}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);background-size:400px 100%;animation:pnx-shimmer 1.1s linear infinite;}
[data-theme="dark"] .skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);background-size:400px 100%;}

.animated-modal{animation:pnx-slide-up var(--m-mod) var(--ease-pop) both;}
.animated-dropdown{animation:pnx-slide-up 180ms var(--ease) both;transform-origin:top;}
.premium-toast,#toast,.toast{animation:pnx-toast var(--m-mod) var(--ease) both;}

.empty-state{padding:34px 20px;text-align:center;color:var(--t3,#8892a8);font-size:12px;animation:pnx-fade-in var(--m-in) var(--ease) both;}
.empty-state i{font-size:30px;display:block;margin:0 auto 8px;opacity:.8;}

/* ── Page entrance: once, quick ─────────────────────────────────────────── */
.wrap,.main,.page{animation:pnx-fade-in 250ms var(--ease) both;}

/* ── Nav polish ─────────────────────────────────────────────────────────── */
.nav-link{transition:background var(--m-fast) var(--ease),color var(--m-fast) var(--ease);}
.nav-link.active{box-shadow:0 1px 6px rgba(15,32,96,.16);}

/* ── Reduced motion: hard kill ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v3 — PREMIUM COMMAND-CENTER LIBRARY
 * Hero headers · bento grid · KPI cards · glow buttons · premium tables
 * status pills · mobile cards · cinematic backgrounds · scroll reveal · tilt
 * All additive. All transform/opacity. All reduced-motion safe.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page hero ──────────────────────────────────────────────────────────── */
.pnx-hero{position:relative;overflow:hidden;border-radius:16px;padding:26px 28px;margin-bottom:20px;color:#fff;
  background:linear-gradient(120deg,#00293a 0%,#00394d 45%,#0a4a63 100%);
  border:1px solid rgba(200,144,26,.25);box-shadow:var(--elev-2);}
.pnx-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(ellipse at 30% 0%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 30% 0%,#000 30%,transparent 75%);}
.pnx-hero::after{content:'';position:absolute;top:-60%;right:-10%;width:55%;height:220%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(200,144,26,.16),transparent 65%);}
.ph-eyebrow{position:relative;font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#e8bb45;display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.ph-eyebrow::before{content:'';width:18px;height:2px;background:#e8bb45;border-radius:2px;}
.ph-title{position:relative;font-size:23px;font-weight:800;letter-spacing:-.01em;line-height:1.15;}
.ph-sub{position:relative;font-size:12px;color:rgba(255,255,255,.62);margin-top:5px;font-weight:500;}
.ph-meta{position:relative;display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.ph-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:10px;font-weight:800;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.85);backdrop-filter:blur(6px);}
.ph-chip i{font-size:12px;color:#e8bb45;}
[data-theme="dark"] .pnx-hero{background:linear-gradient(120deg,#0a1220 0%,#10203a 50%,#13294a 100%);border-color:rgba(210,153,34,.3);}
@media(max-width:600px){.pnx-hero{padding:20px 18px;border-radius:13px;}.ph-title{font-size:19px;}}

/* ── Bento grid ─────────────────────────────────────────────────────────── */
.bento-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.bento-card{background:var(--w,#fff);border:1px solid var(--border,#dce0ea);border-radius:14px;padding:16px;position:relative;overflow:hidden;
  transition:transform var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease);}
.bento-card:hover{transform:translateY(-2px);box-shadow:var(--elev-2);border-color:#c7cfdf;}
[data-theme="dark"] .bento-card:hover{border-color:#33415c;}
.bento-card.span-2{grid-column:span 2;}
@media(max-width:640px){.bento-card.span-2{grid-column:span 1;}}

/* ── KPI cards ──────────────────────────────────────────────────────────── */
.kpi-card{background:var(--w,#fff);border:1px solid var(--border,#dce0ea);border-radius:13px;padding:15px 16px;position:relative;overflow:hidden;
  transition:transform var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease);}
.kpi-card::before{content:'';position:absolute;left:0;top:12%;bottom:12%;width:3px;border-radius:3px;background:var(--blue,#1e3fa8);opacity:.85;}
.kpi-card.gold::before{background:var(--gold,#c8901a);}
.kpi-card.green::before{background:var(--green,#1a7a40);}
.kpi-card.red::before{background:var(--red,#dc1e28);}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--elev-2);}
.kpi-value{font-size:27px;font-weight:800;line-height:1;color:var(--navy,#00394d);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.kpi-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t3,#8892a8);margin-top:5px;}
.kpi-trend{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;margin-top:6px;padding:2px 8px;border-radius:99px;}
.kpi-trend.up{color:var(--green,#1a7a40);background:rgba(26,122,64,.09);}
.kpi-trend.down{color:var(--red,#dc1e28);background:rgba(220,30,40,.08);}
[data-theme="dark"] .kpi-value{color:var(--blue,#58a6ff);}

/* ── Glow button ────────────────────────────────────────────────────────── */
.glow-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 20px;border:none;border-radius:10px;
  background:linear-gradient(135deg,#00394d,#0a5a7a);color:#fff;font-weight:800;font-size:12px;cursor:pointer;overflow:hidden;
  box-shadow:0 2px 10px rgba(0,57,77,.25);transition:transform var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease);}
.glow-btn:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(10,90,122,.4);}
.glow-btn::after{content:'';position:absolute;top:0;left:-90%;width:55%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transition:left .55s var(--ease);}
.glow-btn:hover::after{left:130%;}
.glow-btn.gold{background:linear-gradient(135deg,#c8901a,#e0a92e);color:#1a1306;box-shadow:0 2px 10px rgba(200,144,26,.3);}
.glow-btn.gold:hover{box-shadow:0 6px 22px rgba(200,144,26,.45);}
.glow-btn.danger{background:linear-gradient(135deg,#b3151f,#dc1e28);box-shadow:0 2px 10px rgba(220,30,40,.3);}

/* ── Premium table ──────────────────────────────────────────────────────── */
.premium-table{background:var(--w,#fff);border:1px solid var(--border,#dce0ea);border-radius:13px;overflow:hidden;box-shadow:var(--elev-1);}
.premium-table table{width:100%;border-collapse:collapse;}
.premium-table thead th{position:sticky;top:0;z-index:2;background:var(--bg,#f3f4f8);font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--t3,#8892a8);text-align:left;padding:10px 14px;border-bottom:1px solid var(--border,#dce0ea);}
.premium-table tbody td{padding:10px 14px;font-size:12px;border-bottom:1px solid var(--bg2,#eaecf2);}
.premium-table tbody tr:last-child td{border-bottom:none;}
.premium-table tbody tr:hover{background:rgba(30,63,168,.025);}
[data-theme="dark"] .premium-table thead th{background:#161b22;}
[data-theme="dark"] .premium-table tbody tr:hover{background:rgba(88,166,255,.05);}

/* ── Status pills (alias + extension of status-badge) ───────────────────── */
.status-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:9.5px;font-weight:800;letter-spacing:.02em;
  background:var(--bg,#f3f4f8);border:1px solid var(--border,#dce0ea);color:var(--t2,#556);}
.status-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.status-pill.ok,.status-pill.live{color:var(--green,#1a7a40);background:rgba(26,122,64,.08);border-color:rgba(26,122,64,.2);}
.status-pill.live::before{animation:pnx-live 1.8s ease-in-out infinite;}
@keyframes pnx-live{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(26,122,64,.4);}50%{opacity:.55;box-shadow:0 0 0 4px rgba(26,122,64,0);}}
.status-pill.warn{color:var(--gold,#b8860b);background:rgba(184,134,11,.08);border-color:rgba(184,134,11,.22);}
.status-pill.bad{color:var(--red,#dc1e28);background:rgba(220,30,40,.07);border-color:rgba(220,30,40,.2);}
.status-pill.info{color:var(--blue,#1e3fa8);background:rgba(30,63,168,.07);border-color:rgba(30,63,168,.2);}

/* ── Mobile app card ────────────────────────────────────────────────────── */
.mobile-card{background:var(--w,#fff);border:1px solid var(--border,#dce0ea);border-radius:16px;padding:16px;box-shadow:var(--elev-1);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease);}
.mobile-card:active{transform:scale(.985);}

/* ── Cinematic dark section background ──────────────────────────────────── */
.cine-bg{position:relative;overflow:hidden;background:radial-gradient(1200px 700px at 50% 20%,#0b1530 0%,#060b16 65%,#04070f 100%);color:#eef2fa;}
.cine-bg::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,212,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.03) 1px,transparent 1px);background-size:56px 56px;}

/* ── Scroll reveal (activated only when premium.js adds html.pnx-js) ────── */
html.pnx-js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);}
html.pnx-js [data-reveal="left"]{transform:translateX(-18px);}
html.pnx-js [data-reveal="right"]{transform:translateX(18px);}
html.pnx-js [data-reveal="scale"]{transform:scale(.96);}
html.pnx-js [data-reveal].revealed{opacity:1;transform:none;}

/* ── Hover tilt (transform driven by premium.js; CSS handles the easing) ── */
.hover-tilt{transition:transform .18s var(--ease),box-shadow .18s var(--ease);will-change:transform;}
.hover-tilt:hover{box-shadow:var(--elev-2);}

/* ── Spinner ────────────────────────────────────────────────────────────── */
.pnx-spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(127,127,127,.25);border-top-color:var(--blue,#1e3fa8);animation:pnx-rotate .7s linear infinite;display:inline-block;}
@keyframes pnx-rotate{to{transform:rotate(360deg);}}

/* ── Accessible focus (keyboard only, zero-specificity, app-wide) ───────── */
:where(button,a,select,summary,[role="button"],[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--blue,#1e3fa8);outline-offset:2px;}
[data-theme="dark"] :where(button,a,select,summary,[role="button"],[tabindex]:not([tabindex="-1"])):focus-visible{outline-color:#58a6ff;}

/* ── Reduced motion: final guard (reveal must never hide content) ───────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  html.pnx-js [data-reveal]{opacity:1!important;transform:none!important;}
  .hover-tilt{transform:none!important;}
}

/* ── Global slim scrollbars (app-wide default; any page's own scrollbar CSS
 *    still wins because page <style> loads after this file) ──────────────── */
*{scrollbar-width:thin;scrollbar-color:rgba(120,135,170,.40) transparent;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(120,135,170,.38);border-radius:8px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(120,135,170,.60);background-clip:content-box;}
[data-theme="dark"] *{scrollbar-color:rgba(120,140,180,.45) transparent;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(120,140,180,.40);background-clip:content-box;}

/* ── Magnetic hover smoothing + button loading state (drive by premium.js) ── */
.magnetic{transition:transform var(--m-fast) var(--ease);}
.is-loading{cursor:wait;pointer-events:none;}
.is-loading .pnx-spinner{vertical-align:middle;}
.glow-btn .pnx-spinner,.premium-button .pnx-spinner,.is-loading .pnx-spinner{border-color:rgba(255,255,255,.35);border-top-color:#fff;}

/* ── Staggered reveal for a container's children (opt-in: [data-stagger]) ──
 *    Only active once premium.js marks the page; reduced-motion shows all.   */
html.pnx-js [data-stagger]>*{opacity:0;animation:pnx-slide-up var(--m-in) var(--ease) both;}
html.pnx-js [data-stagger]>*:nth-child(1){animation-delay:.02s;}
html.pnx-js [data-stagger]>*:nth-child(2){animation-delay:.07s;}
html.pnx-js [data-stagger]>*:nth-child(3){animation-delay:.12s;}
html.pnx-js [data-stagger]>*:nth-child(4){animation-delay:.17s;}
html.pnx-js [data-stagger]>*:nth-child(5){animation-delay:.22s;}
html.pnx-js [data-stagger]>*:nth-child(6){animation-delay:.27s;}
html.pnx-js [data-stagger]>*:nth-child(n+7){animation-delay:.30s;}
@media (prefers-reduced-motion: reduce){html.pnx-js [data-stagger]>*{opacity:1!important;animation:none!important;}}

/* ═══════════════════════════════════════════════════════════════════════════
 * v3.1 — Honest empty / loading / error states
 * Extends the existing .empty-state. Use real copy ("No active loads"),
 * never fake data. .es-title / .es-msg / .es-action are optional children.
 * ═══════════════════════════════════════════════════════════════════════════ */
.empty-state .es-title{font-size:14px;font-weight:800;color:var(--t2,#556);margin-bottom:3px;letter-spacing:-.01em;}
.empty-state .es-msg{font-size:12px;color:var(--t3,#8892a8);max-width:340px;margin:0 auto;line-height:1.5;}
.empty-state .es-action{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:8px 16px;border-radius:8px;border:1px solid var(--border,#dce0ea);
  background:var(--w,#fff);color:var(--navy,#00394d);font-weight:800;font-size:11.5px;cursor:pointer;transition:border-color var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease);}
.empty-state .es-action:hover{border-color:var(--blue,#1e3fa8);box-shadow:var(--elev-1);}

/* Error state — explains what went wrong + how to recover; never apologetic, never vague */
.error-state{padding:34px 20px;text-align:center;color:var(--t3,#8892a8);font-size:12px;animation:pnx-fade-in var(--m-in) var(--ease) both;}
.error-state i{font-size:30px;display:block;margin:0 auto 8px;color:var(--red,#dc1e28);opacity:.9;}
.error-state .es-title{font-size:14px;font-weight:800;color:var(--t2,#556);margin-bottom:3px;}
.error-state .es-msg{font-size:12px;color:var(--t3,#8892a8);max-width:340px;margin:0 auto;line-height:1.5;}
.error-state .es-action{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:8px 16px;border-radius:8px;border:none;
  background:var(--red,#dc1e28);color:#fff;font-weight:800;font-size:11.5px;cursor:pointer;transition:opacity var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease);}
.error-state .es-action:hover{opacity:.92;box-shadow:var(--elev-1);}

/* Inline loading row — drop into a table/list while real data is fetched */
.pnx-loading-row{display:flex;align-items:center;justify-content:center;gap:9px;padding:26px 20px;color:var(--t3,#8892a8);font-size:12px;font-weight:600;}

/* Skeleton text lines — quick multi-line placeholder while data loads */
.skeleton-line{height:11px;border-radius:6px;margin:7px 0;}
.skeleton-line.w-40{width:40%;}.skeleton-line.w-60{width:60%;}.skeleton-line.w-80{width:80%;}.skeleton-line.w-100{width:100%;}