:root{
  --kd-primary:#02338C; --kd-primary-700:#022a73; --kd-primary-100:#E7ECF7; --kd-on-primary:#FFFFFF;
  --kd-accent:#F06901; --kd-accent-100:#FDECE0;
  --kd-bg:#F5F7FB; --kd-surface:#FFFFFF; --kd-surface-tint:#EFF2FA; --kd-border:#D0D8EE;
  --kd-muted:#5A6E99; --kd-muted-2:#4A5E8A;
  --kd-success:#0E9F6E; --kd-success-100:#E1F5EE;
  --kd-danger:#DC2626; --kd-danger-700:#991B1B; --kd-danger-100:#FBE7E7;
  --kd-warning:#B45309; --kd-warning-100:#FCEFD9;
  --kd-radius:3px; --kd-radius-lg:4px;
  --kd-font:'Inter', -apple-system, sans-serif; --kd-mono:'JetBrains Mono', ui-monospace, monospace;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--kd-bg);font-family:var(--kd-font);color:var(--kd-primary);-webkit-font-smoothing:antialiased;}
a{color:inherit;}

.kd-shell-nav{background:var(--kd-primary-700);display:flex;align-items:center;gap:24px;padding:0 24px;min-height:56px;position:sticky;top:0;z-index:60;}
.kd-shell-nav__brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:14px;flex-shrink:0;}
.kd-shell-nav__brand-mark{width:26px;height:26px;background:var(--kd-accent);border-radius:var(--kd-radius);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;}
.kd-shell-nav__tabs{display:flex;align-items:center;gap:2px;flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.kd-shell-nav__tabs::-webkit-scrollbar{display:none;}
.kd-shell-nav__tab{white-space:nowrap;text-decoration:none;color:rgba(255,255,255,0.62);font-size:13px;font-weight:600;padding:8px 15px;border-radius:20px;transition:color .15s, background .15s;flex-shrink:0;}
.kd-shell-nav__tab:hover{color:#fff;background:rgba(255,255,255,0.08);}
.kd-shell-nav__tab.is-active{color:#fff;background:var(--kd-accent);}
.kd-shell-nav__context{color:rgba(255,255,255,0.55);font-size:11.5px;font-family:var(--kd-mono);white-space:nowrap;flex-shrink:0;}
.kd-shell-nav__context b{color:#fff;font-weight:600;}

.kd-nav-export{position:relative;flex-shrink:0;}
.kd-nav-export__btn{background:rgba(255,255,255,0.1);color:#fff;border:none;font-weight:700;font-size:12.5px;padding:8px 16px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:background .15s;}
.kd-nav-export__btn:hover{background:rgba(255,255,255,0.2);}
.kd-export-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--kd-border);border-radius:8px;box-shadow:0 12px 32px rgba(2,15,45,0.22);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:210px;z-index:100;}
.kd-export-menu__item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--kd-primary);font-family:inherit;font-size:13px;font-weight:600;padding:9px 12px;border-radius:5px;cursor:pointer;}
.kd-export-menu__item:hover{background:var(--kd-surface-tint);}
.kd-export-menu__item[data-target="all"]{border-top:1px solid var(--kd-border);margin-top:4px;padding-top:12px;}

.kd-shell-body{max-width:1180px;margin:0 auto;padding:28px 24px 64px;}

@media (max-width:760px){
  .kd-shell-nav{gap:12px;padding:0 12px;}
  .kd-shell-nav__brand-text{display:none;}
  .kd-shell-nav__context{display:none;}
  .kd-shell-nav__tab{padding:8px 12px;font-size:12.5px;}
  .kd-nav-export__btn{padding:8px 12px;font-size:12px;}
  .kd-shell-body{padding:20px 14px 48px;}
}

/* ---- print: browser-native print-to-PDF (Export button) ---- */
/* Offscreen (not display:none) while its 3 iframes load -- display:none
   would collapse their box to zero size, breaking both their internal
   layout and the scrollHeight reads used to size them before printing. */
.kd-print-all-container{position:fixed;left:-99999px;top:0;width:1040px;}
.kd-print-all-frame{width:100%;border:none;display:block;}
@media print{
  .kd-shell-nav, .kd-play-btn, .kd-video-overlay, .kd-export-menu{display:none !important;}
  body{background:#fff;}
  .kd-shell-body{max-width:none;padding:0;margin:0;}
  .kd-print-all-container{position:static;left:0;width:auto;}
  /* "All pages" (exportAllPages, non-standalone): body.kd-printing-all
     means only .kd-print-all-container's 3 iframes should print -- every
     OTHER direct child of body (nav, and whichever page's own content was
     showing when Export was clicked) must not, or that page bleeds into
     the PDF alongside the 3 intended ones. */
  body.kd-printing-all > *:not(.kd-print-all-container){display:none !important;}
  .kd-print-pagebreak{page-break-before:always;}
}

.kd-empty-state{background:var(--kd-surface);border:1px dashed var(--kd-border);border-radius:var(--kd-radius-lg);padding:48px 24px;text-align:center;color:var(--kd-muted-2);}
.kd-empty-state h2{color:var(--kd-primary);font-size:16px;margin:0 0 8px;}
.kd-empty-state p{font-size:13px;margin:0 0 16px;}
.kd-empty-state a{display:inline-block;background:var(--kd-primary);color:#fff;font-weight:700;font-size:13px;padding:9px 18px;border-radius:var(--kd-radius);text-decoration:none;}
.kd-empty-state a:hover{background:var(--kd-primary-700);}

.kd-card{background:var(--kd-surface);border:1px solid var(--kd-border);border-radius:var(--kd-radius-lg);overflow:hidden;}
.kd-card__header{padding:16px 20px;border-bottom:1px solid var(--kd-border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.kd-card__title{font-size:14px;font-weight:700;color:var(--kd-primary);}
.kd-card__body{padding:20px;}

.kd-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:0.02em;}
.kd-pill--orange{background:var(--kd-accent);color:#fff;}
.kd-pill--tint{background:var(--kd-primary-100);color:var(--kd-primary);}
.kd-pill--muted{background:var(--kd-surface-tint);color:var(--kd-muted-2);}
.kd-pill--success{background:var(--kd-success-100);color:#066a49;}
.kd-pill--danger{background:var(--kd-danger-100);color:var(--kd-danger-700);}

.kd-verdict{background:var(--kd-surface-tint);border:1px solid var(--kd-border);border-left:3px solid var(--kd-muted);border-radius:0 var(--kd-radius) var(--kd-radius) 0;padding:12px 16px;}
.kd-verdict--success{border-left-color:var(--kd-success);background:var(--kd-success-100);}
.kd-verdict--danger{border-left-color:var(--kd-danger);background:var(--kd-danger-100);}
.kd-verdict__title{font-size:13px;font-weight:700;color:var(--kd-primary);margin-bottom:3px;}
.kd-verdict--success .kd-verdict__title{color:#066a49;}
.kd-verdict--danger .kd-verdict__title{color:var(--kd-danger-700);}
.kd-verdict__sub{font-size:12.5px;color:var(--kd-muted-2);line-height:1.55;}

.kd-spinner{width:16px;height:16px;border:2px solid var(--kd-border);border-top-color:var(--kd-accent);border-radius:50%;animation:kd-spin .7s linear infinite;display:inline-block;vertical-align:middle;}
@keyframes kd-spin{to{transform:rotate(360deg);}}

.kd-play-btn{display:inline-flex;align-items:center;gap:7px;background:var(--kd-accent);color:#fff;border:none;font-weight:700;font-size:12.5px;padding:8px 16px;border-radius:20px;cursor:pointer;transition:background .15s;}
.kd-play-btn:hover{background:#d95f00;}
.kd-play-btn__icon{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #fff;}

.kd-video-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:10px;}
.kd-video-overlay__backdrop{position:absolute;inset:0;background:rgba(2,15,45,0.82);}
.kd-video-overlay__panel{position:relative;background:#0b1830;border-radius:8px;max-height:100%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.kd-video-overlay__panel.is-list{width:min(560px, 100%);}
.kd-video-overlay__panel.is-player{width:min(1180px, 98vw);height:98vh;}
.kd-video-overlay__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.08);flex-shrink:0;}
.kd-video-overlay__header > div:first-child{display:flex;align-items:baseline;gap:10px;min-width:0;}
.kd-video-overlay__counter{font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--kd-accent);flex-shrink:0;white-space:nowrap;}
.kd-video-overlay__title{font-size:14px;font-weight:600;color:#fff;line-height:1.4;}
.kd-video-overlay__close{background:rgba(255,255,255,0.1);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;flex-shrink:0;}
.kd-video-overlay__close:hover{background:rgba(255,255,255,0.2);}
@media (max-width:640px){.kd-video-overlay__title{font-size:12.5px;}}
/* Player view: counter + title share one compact line (badge, then
   ellipsized title) instead of the list view's two-line stack, so the
   header takes minimal height and the frame below gets the rest of the
   available viewport -- the vendor's embedded player has its own title/
   quality-selector/video/controls stack that needs real vertical room, and
   was getting clipped (controls scrolled out of view) when our own header
   ate too much of it. */
.kd-video-overlay__panel.is-player .kd-video-overlay__header{padding:8px 16px;}
.kd-video-overlay__panel.is-player .kd-video-overlay__title{font-size:12px;font-weight:500;color:rgba(255,255,255,0.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}

/* ---- chooser list state ---- */
.kd-video-list{padding:8px 12px 16px;display:flex;flex-direction:column;gap:6px;max-height:70vh;overflow-y:auto;}
.kd-video-list-item{display:flex;align-items:flex-start;gap:12px;text-align:left;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:6px;padding:12px 14px;cursor:pointer;transition:background .15s, border-color .15s;font-family:inherit;width:100%;}
.kd-video-list-item:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.18);}
.kd-video-list-badge{flex-shrink:0;margin-top:1px;font-size:9.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:3px 8px;border-radius:20px;}
.kd-video-list-badge.is-strength{background:var(--kd-success-100);color:#066a49;}
.kd-video-list-badge.is-weakness{background:var(--kd-danger-100);color:var(--kd-danger-700);}
.kd-video-list-label{font-size:12.5px;font-weight:500;color:#fff;line-height:1.45;}
.kd-video-list-play{flex-shrink:0;margin-left:auto;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;margin-top:1px;}
.kd-video-list-play::before{content:'';width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid #fff;margin-left:2px;}

/* ---- player state: expanded frame + persistent sidebar ----
   The embedded page isn't just a video -- it's the vendor's own player
   plus its own internal list of ~10 sub-clips for that category, so the
   frame needs real height (not a strict 16:9 video ratio) to avoid
   squashing/clipping that internal UI. */
/* Body fills whatever height the header (now compact) doesn't use --
   min-height:0 is required for a flex child to actually shrink/scroll
   correctly instead of overflowing its column-flex parent. */
.kd-video-overlay__body{display:flex;flex:1;min-height:0;}
.kd-video-overlay__main{flex:1;min-width:0;display:flex;}
/* The embedded page is cross-origin (videoplayer.cricket-21.com) -- there
   is no DOM access to hide its own title/quality-selector row directly.
   The only lever available is visual: clip the wrapper (overflow:hidden)
   and render the iframe taller than the wrapper, shifted up by roughly
   that row's height, so that strip lands above the visible crop and the
   actual video + controls slide into view underneath it instead. The
   offset is a best-effort pixel estimate (that row's height isn't
   something we can measure from outside the frame) -- nudge
   --kd-video-crop-top if the vendor's title/quality row is taller or
   shorter than assumed here. */
.kd-video-overlay__frame-wrap{position:relative;width:100%;flex:1;background:#000;overflow:hidden;--kd-video-crop-top:78px;}
.kd-video-overlay__frame{position:absolute;left:0;right:0;top:calc(-1 * var(--kd-video-crop-top));width:100%;height:calc(100% + var(--kd-video-crop-top));border:none;}
.kd-video-sidebar{width:250px;flex-shrink:0;border-left:1px solid rgba(255,255,255,0.08);overflow-y:auto;}
.kd-video-sidebar__label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.4);padding:12px 14px 6px;}
.kd-video-sidebar-item{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;background:transparent;border:none;border-left:2px solid transparent;padding:9px 14px;cursor:pointer;font-family:inherit;transition:background .12s, border-color .12s;}
.kd-video-sidebar-item:hover{background:rgba(255,255,255,0.06);}
.kd-video-sidebar-item.is-active{background:rgba(240,105,1,0.14);border-left-color:var(--kd-accent);}
.kd-video-sidebar-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;margin-top:5px;}
.kd-video-sidebar-dot.is-strength{background:var(--kd-success);}
.kd-video-sidebar-dot.is-weakness{background:var(--kd-danger);}
.kd-video-sidebar-text{font-size:11.5px;line-height:1.4;color:rgba(255,255,255,0.75);}
.kd-video-sidebar-item.is-active .kd-video-sidebar-text{color:#fff;font-weight:600;}
@media (max-width:760px){
  .kd-video-overlay__panel.is-player{width:min(560px, 100%);}
  .kd-video-overlay__body{flex-direction:column;}
  .kd-video-overlay__main{flex:2;}
  .kd-video-sidebar{width:100%;flex:1;border-left:none;border-top:1px solid rgba(255,255,255,0.08);max-height:none;}
}