/* PPP KPI widget styles (v1.0.4) */
.ppp-kpi-widget, .ppp-kpi-widget *{ box-sizing:border-box; color:#e5e7eb }
.ppp-wrap{ position:relative; max-width:1100px; margin:0 auto; padding:36px 24px; background:rgba(25,25,25,.78); border:1px solid rgba(255,255,255,.12); border-radius:14px; line-height:1.6 }
.ppp-head{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:16px; margin-bottom:22px }
.ppp-head h3{ margin:0; font-size:20px; font-weight:650; color:#fff }
.ppp-scope,.ppp-status{ width:100%; font-size:12px; opacity:.95 }
.ppp-search{ position:relative; flex:1; min-width:320px }
.ppp-search input[type=search]{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.28); outline:none; color:#e5e7eb }
.ppp-dd{ position:absolute; z-index:999999; left:0; right:0; top:50px; display:none; background:#0e0e0e; border:1px solid rgba(255,255,255,.18); border-radius:10px; max-height:320px; overflow:auto; box-shadow:0 10px 24px rgba(0,0,0,.35) }
.ppp-dd button{ display:block; width:100%; text-align:left; padding:10px 14px; background:transparent; border:0; cursor:pointer; color:#e5e7eb }
.ppp-dd button:hover,.ppp-dd button.active{ background:#151515 }
.ppp-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px }
@media (max-width:900px){ .ppp-grid{ grid-template-columns:1fr } }

/* Tile with fixed row tracks to align content vertically across columns */
.ppp-tile{ display:grid; grid-template-rows:auto 44px 18px auto auto; align-items:start; padding:26px; background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.12); border-radius:12px }
.ppp-name{ font-size:16px; font-weight:600; margin:0 0 12px; color:#fff }
.ppp-value{ font-size:36px; font-weight:750; line-height:1; margin:0 0 12px; color:#fff }
.ppp-ind{ font-size:12px; opacity:.95; margin:0 }
.ppp-src{ margin-top:12px; font-size:11px; opacity:.9; min-height:14px }
.ppp-note{ font-size:11px; opacity:.9; margin-top:10px }

.ppp-good{ color:#4ade80 } .ppp-bad{ color:#f87171 }

/* Loading overlay */
.ppp-overlay{ position:absolute; inset:0; border-radius:14px; background:rgba(20,20,20,.55); display:none; align-items:center; justify-content:center; z-index:2 }
.ppp-wrap.loading .ppp-overlay{ display:flex }
.ppp-spinner{ width:28px; height:28px; border:3px solid rgba(255,255,255,.2); border-top-color:#c9a02a; border-radius:50%; animation:ppp-spin 1s linear infinite }
@keyframes ppp-spin{ to{ transform: rotate(360deg); } }