/* Retro macOS-ish window */
.krg-window{
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(#fbfbfb, #ededed);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
  margin: 14px 0;
  font-family: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.krg-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  background: linear-gradient(#f7f7f7, #e6e6e6);
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.krg-toolbar-left,
.krg-toolbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.krg-toolbar-label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.62);
}

.krg-btn{
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  padding: 6px 10px;
  background: linear-gradient(#ffffff, #eaeaea);
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.74);
  cursor: pointer;
}
.krg-btn:disabled{
  opacity: .6;
  cursor: default;
}

/*
  Layout note:
  Some themes (or optimization plugins) may override display rules.
  Use a higher-specificity selector and flexbox for robustness.
  Goal: keep the relationship filter on the right on PC, and stack on mobile.
*/
.krg-window .krg-body{
  display:flex !important;
  align-items:stretch;
}

.krg-window .krg-graph{
  flex: 1 1 auto;
  min-width: 0;
}

.krg-window .krg-side{
  flex: 0 0 320px;
  max-width: 320px;
}

.krg-graph{
  width:100%;
  /* 4:3 canvas balances overview for network/cluster layouts without excessive side whitespace. */
  aspect-ratio: 4 / 3;
  height:auto;
  min-height: 520px;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.95), rgba(245,245,245,.85));
}

.krg-side{
  border-left: 1px solid rgba(0,0,0,.12);
  background: linear-gradient(#f7f7f7, #ededed);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
}

.krg-filter{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.72);
}
.krg-filter h4{
  margin: 0 0 8px;
  font-size: 13px;
}
.krg-filter label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  margin: 6px 0;
}

.krg-clusters{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.72);
}
.krg-clusters h4{
  margin: 0 0 8px;
  font-size: 13px;
}
.krg-cluster-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom: 8px;
}
.krg-cluster-controls label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size: 12px;
  margin: 0;
}
.krg-cluster-controls input[type="range"]{
  width: 120px;
}
.krg-cluster-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.krg-clusters .krg-mini{
  font-size: 11px;
  font-weight: 800;
  color: rgba(0,0,0,.55);
}
.krg-cluster-list{
  list-style:none;
  margin: 0;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.krg-cluster-item{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  padding: 8px;
}
.krg-cluster-item button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.krg-cluster-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.krg-swatch{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  flex: 0 0 auto;
}
.krg-cluster-name{
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.78);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.krg-cluster-count{
  font-size: 11px;
  font-weight: 900;
  color: rgba(0,0,0,.55);
  flex: 0 0 auto;
}
.krg-cluster-meta{
  margin-top: 4px;
  font-size: 11px;
  color: rgba(0,0,0,.58);
  line-height: 1.3;
}
.krg-cluster-item.is-active{
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.18);
  background: rgba(255,255,255,.78);
}



.krg-card{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.76);
}
.krg-card-inner{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.krg-card-thumb img{
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #ddd;
}
.krg-card-title{
  font-weight: 900;
  font-size: 14px;
  color: rgba(0,0,0,.82);
  margin-bottom: 4px;
}
.krg-card-meta{
  font-size: 12px;
  color: rgba(0,0,0,.58);
  margin-bottom: 6px;
}
.krg-card-links a{
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.72);
  text-decoration: none;
  border-bottom: 1px dotted rgba(0,0,0,.25);
}

/*
  Switch to a single column only on smaller viewports.
  Many themes constrain content width; keeping the side panel on the right on typical PCs improves usability.
*/
/* Container-width responsive: JS toggles .krg-wide/.krg-narrow on .krg-window */
.krg-window.krg-wide .krg-body{ flex-direction: row !important; }
.krg-window.krg-narrow .krg-body{ flex-direction: column !important; }
.krg-window.krg-narrow .krg-side{
  max-width: none;
  border-left:0;
  border-top: 1px solid rgba(0,0,0,.12);
}

@media (max-width: 720px){
  .krg-window .krg-body{ flex-direction: column !important; }
  .krg-window .krg-side{
    max-width: none;
    border-left:0;
    border-top: 1px solid rgba(0,0,0,.12);
  }
}

@media (max-width: 520px){
  .krg-graph{ min-height: 360px; }
}

/* Export hint */
.krg-export-hint{
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.46);
  white-space: nowrap;
}

/* Episode warp UI */
.krg-episode-warp{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 320px;
}
.krg-episode-warp .krg-mini{
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.58);
  white-space: nowrap;
}
.krg-episode-warp input{
  width: 64px;
  padding: 5px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: linear-gradient(#ffffff, #f7f7f7);
  font-size: 12px;
}
.krg-episode-warp .krg-mode{
  display:inline-flex;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  overflow:hidden;
  background: rgba(255,255,255,.65);
}
.krg-episode-warp .krg-mode button{
  border: 0;
  background: transparent;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.68);
  cursor: pointer;
}
.krg-episode-warp .krg-mode button[aria-pressed="true"]{
  background: linear-gradient(#fdfdfd, #e6e6e6);
  color: rgba(0,0,0,.82);
}

/* Episode cast shortcode UI */
.krg-castbox{ border:1px solid rgba(0,0,0,.12); border-radius:14px; padding:14px; background:rgba(255,255,255,.72); }
.krg-muted{ font-size: 12px; color: rgba(0,0,0,.58); margin: 0; }
.krg-castlist{ margin:10px 0 0; padding-left: 18px; }
.krg-casttag{
  display:inline-block; margin-left:8px; padding:2px 8px;
  border-radius:999px; border:1px solid rgba(0,0,0,.14);
  font-size:12px; font-weight:800; color:rgba(0,0,0,.58); background:rgba(255,255,255,.7);
}
.krg-castgrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
@media (max-width: 800px){ .krg-castgrid{ grid-template-columns: 1fr; } }

.krg-card-excerpt{font-size:12px;line-height:1.4;margin-top:6px;color:#222}
.krg-card-mini{font-size:11px;opacity:.85;margin-top:4px}

.krg-toolbar select{font-size:12px;border:1px solid rgba(0,0,0,.25);border-radius:10px;padding:4px 8px;background:#fff}
.krg-toolbar input[type=number]{font-size:12px;border:1px solid rgba(0,0,0,.25);border-radius:10px;padding:4px 8px;background:#fff}