/* ============================================================
   PANEL UI UPGRADE 2026-10-14 — responsiveness + motion polish
   Loaded after the inline styles, so these rules win cascade ties.
   ============================================================ */

/* ---------- 1. responsive layout ---------- */
img{max-width:100%}
.main{padding:clamp(14px,2.4vw,28px) clamp(12px,3vw,32px) 64px}
@media(max-width:1280px){.sb{width:232px;flex:0 0 232px}}
@media(max-width:1023px){
  .main{padding:14px 12px 84px}
  .topbar{padding:10px 14px;gap:8px}
  .topbar .btn.sm{font-size:0;gap:0;padding:6px 8px}
  .topbar .btn.sm svg{width:16px;height:16px}
  .tb-title{font-size:12px}
}
@media(max-width:640px){
  .cards{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-num{font-size:22px}
  .kpi{padding:13px}
  .kpi .k-num{font-size:24px}
  .formgrid{grid-template-columns:1fr}
  .lure-tmpls{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .howto-grid{grid-template-columns:1fr}
  .accrow{flex-wrap:wrap}
  .accrow .accacts{max-width:none;width:100%;justify-content:flex-start}
  .tokenrow{flex-wrap:wrap}
  .tokenrow .jwt{flex:1 1 100%;order:3}
  .dcstrip{gap:8px}
  .oc-foot{flex-wrap:wrap}
  .kv{grid-template-columns:110px 1fr;gap:5px 10px}
  .filterbar .inp{min-width:0;width:100%}
  .tab{padding:6px 10px}
  #toasts{left:12px;right:12px;bottom:12px;max-width:none}
  .toast{max-width:none}
  .loginbox{padding:22px 18px;border-radius:16px}
  .pane3{min-height:0}
  .pane3 .col-body{max-height:60vh}
}
/* bottom-sheet modals on phones */
@media(max-width:640px){
  #modalRoot.show{align-items:flex-end;padding:0}
  .modal{border-radius:16px 16px 0 0;max-width:100%;width:100%;max-height:94vh;animation:sheetIn .28s cubic-bezier(.2,.9,.3,1.05)}
  .modal-bg{background:rgba(2,6,23,.6)}
}
@keyframes sheetIn{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
/* tables: touch scrolling + wrapped tokens */
.tblwrap{-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tbl td{word-break:break-word;transition:background .14s}
.ellip{max-width:60vw}
@media(min-width:1100px){.ellip{max-width:340px}}

/* ---------- 2. drawer backdrop ---------- */
#sbBackdrop{position:fixed;inset:0;z-index:45;background:rgba(2,6,23,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .22s}
#sbBackdrop.show{opacity:1;pointer-events:auto}
html.light #sbBackdrop{background:rgba(15,23,42,.35)}
@media(min-width:1024px){#sbBackdrop{display:none}}
@media(max-width:1023px){.sb.open{box-shadow:none}}

/* ---------- 3. motion / liveliness ---------- */
/* ambient aurora behind the app */
body::before,body::after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(110px);opacity:.5;pointer-events:none}
body::before{width:560px;height:560px;left:-160px;top:-180px;background:radial-gradient(circle,rgba(232,148,58,.13),transparent 65%);animation:auroraA 22s ease-in-out infinite alternate}
body::after{width:640px;height:640px;right:-220px;bottom:-240px;background:radial-gradient(circle,rgba(200,47,47,.11),transparent 65%);animation:auroraB 26s ease-in-out infinite alternate}
html.light body::before{opacity:.28}
html.light body::after{opacity:.22}
@keyframes auroraA{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,60px) scale(1.15)}}
@keyframes auroraB{from{transform:translate(0,0) scale(1.08)}to{transform:translate(-80px,-50px) scale(.95)}}

/* page switch: smoother, slightly springy */
.page.active{animation:pfade .32s cubic-bezier(.2,.8,.25,1)}

/* sidebar: sliding indicator, glow, breathing status dot */
.sb-item{position:relative;transition:background .16s,color .16s,padding .16s,transform .1s}
.sb-item:hover{padding-left:14px}
.sb-item:active{transform:scale(.985)}
.sb-item.active::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:99px;background:linear-gradient(180deg,#e8943a,#c82f2f);box-shadow:0 0 10px rgba(232,148,58,.55)}
.sb-item.active{animation:navGlow 3.5s ease-in-out infinite}
html.light .sb-item.active{animation:none}
@keyframes navGlow{0%,100%{background:rgba(232,148,58,.10)}50%{background:rgba(232,148,58,.16)}}
.sb-dot.idle{animation:dotBreath 1.8s ease-in-out infinite}
@keyframes dotBreath{0%,100%{opacity:.45}50%{opacity:1}}
.sb-logo .logo-ic{animation:lgnPulse 3.2s ease-in-out infinite}

/* topbar: glass */
.topbar{backdrop-filter:blur(10px);background:color-mix(in srgb,var(--panel) 86%,transparent)}
@supports not (backdrop-filter:blur(1px)){.topbar{background:var(--panel)}}

/* buttons: amber sheen sweep on primary hover */
.btn.primary{background:linear-gradient(135deg,#e8943a,#c8322a 55%,#e8943a);background-size:200% 100%;background-position:0% 0;transition:background-position .5s ease,transform .15s,box-shadow .18s,filter .18s}
.btn.primary:hover{background-position:100% 0}

/* cards & kpis: hover lift */
.card,.kpi,.jobcard,.accrow{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card:hover,.jobcard:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 10px 26px rgba(0,0,0,.28)}
html.light .card:hover,html.light .jobcard:hover{box-shadow:0 10px 24px rgba(15,23,42,.10)}
.kpi:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--kpic,var(--acc)) 45%,var(--line))}
.kpi .k-num{transition:text-shadow .3s}
.kpi:hover .k-num{text-shadow:0 0 24px color-mix(in srgb,var(--kpic,var(--acc)) 45%,transparent)}

/* live dot pulse on kpi subs */
.kpi .k-sub .dot{animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 4px var(--ok);transform:scale(1)}50%{box-shadow:0 0 12px var(--ok);transform:scale(1.15)}}

/* table rows */
.tbl tr:hover td{background:rgba(232,148,58,.07)}

/* inputs focus glow (amber, matches brand) */
.inp:focus,.ta:focus,.sel:focus{box-shadow:0 0 0 3px rgba(232,148,58,.16);border-color:var(--acc)}

/* toasts: springy entrance */
.toast{animation:toastin .3s cubic-bezier(.2,.9,.3,1.18)}
@keyframes toastin{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:none}}

/* modal: spring zoom (desktop; phones use sheetIn above) */
.modal{animation:mIn .24s cubic-bezier(.2,.9,.3,1.12)}
@keyframes mIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* badges / chips */
.badge,.chip{transition:filter .12s}
.badge:hover,.chip:hover{filter:brightness(1.15)}

/* progress shimmer */
.prog i{background-size:200% 100%;animation:progShimmer 2.2s linear infinite}
@keyframes progShimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* selection + scrollbars */
::selection{background:rgba(232,148,58,.35);color:#fff}
html.light ::selection{background:rgba(232,148,58,.25);color:#0f172a}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--acc);background-clip:content-box;border:2px solid transparent}

/* reduced motion: honor user preference */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  body::before,body::after{display:none}
}