/* Kaireen panel UI kit for the live demos. The values are the panel's own tokens,
   copied from cep-extension/client/styles.css :root, so what the site shows is the
   panel's real look with sample data, not an invented mockup. Everything is scoped
   under .kp (panel) and .tl (timeline) so it cannot leak into the page. */

.kp{--bg-app:#1A1A1F;--bg-panel:#232328;--bg-card:#2C2C33;--bg-el:#35353D;--bg-input:#1F1F24;
    --acc:#8B6CFF;--acc-h:#A98CFF;--acc-sub:rgba(139,108,255,.14);--acc-bd:rgba(139,108,255,.34);
    --coral:#45E0C8;--t1:#F5F5F7;--t2:#B8B8C0;--t3:#6E6E78;--bd:#2E2E36;--bd2:#3A3A42;
    --ok:#4CD174;--warn:#F5B340;--bad:#E5484D;--info:#5B9DEF;
    background:var(--bg-panel);border:1px solid var(--bd);border-radius:12px;color:var(--t1);
    font-family:var(--sans);font-size:12.5px;line-height:1.35;overflow:hidden;position:relative}

.kp-head{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;
         background:var(--bg-app);border-bottom:1px solid var(--bd)}
.kp-logo{display:flex;align-items:center;gap:7px;font-weight:700;letter-spacing:.2em;font-size:10.5px}
.kp-logo i{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);
           background:linear-gradient(135deg,#b7a3ff,#6d4de0)}
.kp-logo b{font-weight:500;color:var(--t3);letter-spacing:.2em}
.kp-dots{display:flex;gap:5px;margin-left:6px}
.kp-dot{min-width:16px;height:16px;padding:0 5px;border-radius:9px;font-size:10px;font-weight:700;
        display:inline-flex;align-items:center;justify-content:center;color:#15151a;
        transition:transform .35s var(--ease),opacity .35s}
.kp-dot.amber{background:var(--warn)} .kp-dot.blue{background:var(--info)}
.kp-dot.gone{transform:scale(0);opacity:0}
.kp-live{margin-left:auto;font-size:10.5px;color:var(--ok);display:flex;align-items:center;gap:5px}
.kp-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}

.kp-tabs{display:flex;gap:4px;padding:8px 10px;background:var(--bg-panel);border-bottom:1px solid var(--bd)}
.kp-tab{flex:1;text-align:center;padding:6px 4px;border-radius:7px;color:var(--t2);font-size:11.5px;
        transition:background .3s,color .3s;white-space:nowrap}
.kp-tab.on{background:var(--acc);color:#fff}

.kp-body{padding:12px;display:flex;flex-direction:column;gap:10px}
.kp-card{background:var(--bg-card);border:1px solid var(--bd);border-radius:8px;padding:10px}
.kp-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.kp-row{display:flex;align-items:center;gap:8px}
.kp-muted{color:var(--t3)} .kp-dim{color:var(--t2)}

.kp-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 14px;
        border-radius:7px;background:var(--acc);color:#fff;font-weight:600;font-size:12px;
        transition:transform .15s,filter .15s,background .3s}
.kp-btn.apply{background:var(--ok);color:#10210f}
.kp-btn.ghost{background:var(--bg-el);color:var(--t1)}
.kp-btn.wide{width:100%}
.kp-btn.press{transform:scale(.95);filter:brightness(1.18)}

.kp-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;
         background:var(--bg-el);color:var(--t2);font-size:11px;white-space:nowrap;
         transition:background .3s,color .3s,border-color .3s;border:1px solid transparent}
.kp-chip.on{background:var(--acc-sub);border-color:var(--acc-bd);color:var(--t1)}
.kp-swatch{width:8px;height:8px;border-radius:2px;flex:0 0 auto}

.kp-status{font-size:11px;color:var(--t3);min-height:15px;transition:color .3s}
.kp-status.ok{color:var(--ok)}
.kp-bar{height:4px;border-radius:2px;background:var(--bg-el);overflow:hidden}
.kp-bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .9s linear}

.kp-score{font-family:var(--mono);font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;
          background:var(--acc-sub);color:var(--acc-h)}

/* list rows that slide in one by one */
.kp-list{display:flex;flex-direction:column;gap:5px}
.kp-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:var(--bg-input);
         border:1px solid var(--bd);opacity:0;transform:translateY(6px);
         transition:opacity .35s var(--ease),transform .35s var(--ease),border-color .3s,background .3s}
.kp-item.in{opacity:1;transform:none}
.kp-item.hi{border-color:var(--acc-bd);background:var(--acc-sub)}

/* ---------- timeline kit ---------- */
.tl{background:#16161a;border-top:1px solid #26262c;font-family:var(--mono);font-size:10px;color:#8a8a94;
    position:relative;padding:6px 0 8px;user-select:none}
.tl-ruler{height:14px;margin-left:34px;position:relative;border-bottom:1px solid #26262c}
.tl-ruler span{position:absolute;top:0;font-size:9px;color:#5c5c66;transform:translateX(-50%)}
.tl-track{display:flex;align-items:center;height:22px;margin-top:3px}
.tl-track.tall{height:30px}
.tl-name{width:34px;flex:0 0 34px;text-align:center;color:#6e6e78}
.tl-lane{position:relative;flex:1;height:100%;margin-right:8px;border-radius:3px;background:#1d1d22}
.clip{position:absolute;top:2px;bottom:2px;border-radius:3px;overflow:hidden;
      transform-origin:left center;transition:transform .45s var(--ease),opacity .3s}
.clip.enter{transform:scaleX(0);opacity:0}
.clip.a{background:#6d5bd0} .clip.b{background:#2f9e8f} .clip.w{background:#4a5670}
.clip.cap{background:#b58a2a} .clip.sfx{background:#c2603a} .clip.mute{background:#2a2a31}
.clip em{position:absolute;left:5px;top:50%;transform:translateY(-50%);font-style:normal;
         font-size:9px;color:rgba(255,255,255,.85);white-space:nowrap}
.wave{position:absolute;inset:0;width:100%;height:100%}
.wave path{fill:#3d8a5a;transition:fill .25s}
.wave.hot path{fill:#6fe39b}
.gap-band{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,
          rgba(229,72,77,.35) 0 4px,rgba(229,72,77,.12) 4px 8px);transition:opacity .35s,transform .45s var(--ease)}
.gap-band.cut{opacity:0;transform:scaleX(0)}
.playhead{position:absolute;top:0;bottom:0;width:1px;background:#ff5a5a;left:34px;z-index:2;
          box-shadow:0 0 0 .5px rgba(255,90,90,.4)}
.playhead::before{content:"";position:absolute;top:0;left:-4px;border:4px solid transparent;border-top-color:#ff5a5a}
.marker{position:absolute;top:-2px;width:0;height:0;border:5px solid transparent;border-top:7px solid var(--warn,#F5B340);
        transform:translateX(-5px) scale(0);transition:transform .35s var(--ease)}
.marker.in{transform:translateX(-5px) scale(1)}
.map-row{display:flex;align-items:center;gap:7px;font-size:11.5px}