/* ClipVibez — polish layer: animations, transitions, modern feel.
   CSS-only (no JS frameworks). Served from /static so it complies with
   the panel CSP (default-src 'self'). Base rules mirror the inline
   palette so the panel looks right even where inline styles are used. */
:root{
  --cv-accent:#7c3aed;
  --cv-accent2:#ec4899;
  --cv-bg:#111114;
  --cv-card:#1c1c22;
  --cv-field:#26262e;
  --cv-text:#eeeeee;
  --cv-radius:14px;
}
html{scroll-behavior:smooth}
body{background:var(--cv-bg);color:var(--cv-text)}

/* --- page/view entrance: smooth fade+rise on every screen change --- */
@keyframes cv-fade-up{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
body{animation:cv-fade-up .45s cubic-bezier(.22,.8,.32,1) both}
.card,.box{animation:cv-fade-up .55s cubic-bezier(.22,.8,.32,1) both;
  border:1px solid #2b2b34;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.5);border-color:#3a3a46}
.box{box-shadow:0 18px 44px rgba(0,0,0,.55)}

/* --- brand wordmark --- */
.brand{background:linear-gradient(92deg,var(--cv-accent),var(--cv-accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;letter-spacing:.2px}

/* --- buttons: hover lift + press feedback --- */
button{transition:transform .15s ease,box-shadow .2s ease,
  filter .2s ease,background-color .2s ease}
button:hover{filter:brightness(1.13);transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(168,85,247,.4)}
button:active{transform:translateY(1px) scale(.98);box-shadow:none}
button:focus-visible{outline:2px solid var(--cv-accent2);outline-offset:2px}

/* --- links --- */
a{transition:color .2s ease,opacity .2s ease}
a:hover{opacity:.82}

/* --- fields: smooth focus ring --- */
input,select,textarea{transition:border-color .2s ease,box-shadow .2s ease,
  background-color .2s ease}
input:focus,select:focus,textarea:focus{outline:none;
  border-color:var(--cv-accent)!important;
  box-shadow:0 0 0 3px rgba(236,72,153,.3)}

/* --- media & misc --- */
video{transition:box-shadow .3s ease,transform .3s ease}
video:hover{box-shadow:0 12px 32px rgba(0,0,0,.55)}
.badge{transition:transform .2s ease}
.card:hover .badge{transform:scale(1.06)}
table tr{transition:background-color .2s ease}
tbody tr:hover td,tr:hover td{background:rgba(255,255,255,.035)}
.result,.err,.warn{animation:cv-fade-up .4s ease both}
::selection{background:rgba(168,85,247,.55)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* --- brand logo image + gradient primary buttons --- */
.logo-img{height:46px;width:46px;border-radius:12px;vertical-align:-13px;
  margin-right:9px;box-shadow:0 8px 22px rgba(124,58,237,.4)}
.top .logo-img{height:38px;width:38px;vertical-align:-10px}
button:not([style]){background-image:linear-gradient(92deg,#7c3aed,#ec4899)}