body.page-dubcard .dubcard-grid{
  max-width:none;
}

body.page-dubcard{
  --dubcard-ui-font:"IBM Plex Sans","Fira Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}

body.page-dubcard .dubcard-page,
body.page-dubcard .dubcard-page *{
  font-family:var(--dubcard-ui-font);
}

.dubcard-toolbar{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.dubcard-role-map{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:8px;
  max-height:360px;
  overflow:auto;
  padding-right:6px;
}

.dubcard-role-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.10);
}

.dubcard-role-toggle .role-title{
  font-weight:800;
}

.dubcard-role-toggle .role-sub{
  font-size:13px;
  color:#dce8ff;
}

.dubcard-role-toggle input{
  width:auto;
  min-width:20px;
  min-height:20px;
}

.dubcard-pages{
  display:grid;
  gap:16px;
}

.dubcard-page{
  width:100%;
  aspect-ratio:16 / 9;
  min-height:440px;
  padding:44px 56px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 12% 14%, rgba(120,180,255,.30), rgba(120,180,255,0) 45%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)),
    #172a50;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 14px 30px rgba(0,0,0,.30);
  overflow:auto;
}

.dubcard-page-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}

.dubcard-page-main,
.dubcard-page-side{
  display:flex;
  flex-direction:column;
}

.dubcard-page-head.only-logo{
  justify-content:center;
  margin-bottom:18px;
}

.dubcard-page-head.slim.single-title{
  justify-content:center;
  margin-bottom:20px;
}

.dubcard-logo{
  width:min(64%, 760px);
  height:auto;
  object-fit:contain;
}

.dubcard-production-title{
  text-align:center;
  font-size:34px;
  font-weight:700;
  line-height:1.15;
  margin:6px 0 16px;
}

.dubcard-page-head h2{
  margin:0;
  font-size:30px;
  line-height:1.12;
  text-align:center;
  font-weight:700;
}

.dubcard-meta-list{
  margin:0 auto;
  width:min(86%, 1180px);
  display:grid;
  gap:10px;
  max-height:calc(100% - 150px);
  overflow:auto;
  padding-right:6px;
}

.dubcard-meta-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10px;
  text-align:center;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.11);
}

.dubcard-meta-row .k{
  font-size:22px;
  font-weight:700;
  line-height:1.2;
}

.dubcard-meta-row strong{
  font-size:22px;
  line-height:1.2;
}

.dubcard-role-columns{
  margin-top:6px;
  min-height:0;
  max-height:clamp(220px, calc(100% - 120px), 560px);
  overflow:auto;
  padding-right:6px;
}

.dubcard-role-columns.main,
.dubcard-role-columns.side{
  column-count:2;
  column-gap:22px;
}

#dubcard-main-roles,
#dubcard-side-roles{
  flex:1 1 auto;
}

.dubcard-side-inline{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.20);
}

.dubcard-side-inline h3{
  margin:0 0 10px;
  text-align:center;
  font-size:22px;
  font-weight:700;
  line-height:1.15;
}

.dubcard-side-inline .dubcard-role-columns{
  min-height:0;
  max-height:220px;
  overflow:auto;
}

.dubcard-role-item{
  break-inside:avoid;
  margin:0 0 8px;
  padding:10px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(255,255,255,.10);
  text-align:center;
}

.dubcard-role-item .name{
  font-size:22px;
  font-weight:700;
  line-height:1.18;
}

.dubcard-role-item .role{
  margin-top:4px;
  font-size:22px;
  font-weight:700;
  line-height:1.18;
  color:#e9f2ff;
}

.dubcard-role-item.side-speaker .name{
  font-size:22px;
}

.dubcard-empty{
  color:#dce8ff;
  font-size:20px;
  text-align:center;
  padding:16px;
  border:1px dashed rgba(255,255,255,.28);
  border-radius:12px;
}

body.page-dubcard .dubcard-role-map,
body.page-dubcard .dubcard-meta-list,
body.page-dubcard .dubcard-role-columns{
  scrollbar-width:thin;
  scrollbar-color:rgba(210,225,255,.78) rgba(255,255,255,.08);
}

body.page-dubcard .dubcard-role-map::-webkit-scrollbar,
body.page-dubcard .dubcard-meta-list::-webkit-scrollbar,
body.page-dubcard .dubcard-role-columns::-webkit-scrollbar{
  width:10px;
}

body.page-dubcard .dubcard-role-map::-webkit-scrollbar-thumb,
body.page-dubcard .dubcard-meta-list::-webkit-scrollbar-thumb,
body.page-dubcard .dubcard-role-columns::-webkit-scrollbar-thumb{
  background:rgba(210,225,255,.70);
  border-radius:999px;
}

body.page-dubcard .dubcard-role-map::-webkit-scrollbar-track,
body.page-dubcard .dubcard-meta-list::-webkit-scrollbar-track,
body.page-dubcard .dubcard-role-columns::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:999px;
}

@media (max-width:1200px){
  .dubcard-page{
    padding:26px 24px;
    min-height:360px;
  }

  .dubcard-production-title{font-size:26px}
  .dubcard-page-head h2{font-size:24px}
  .dubcard-meta-row .k{font-size:17px}
  .dubcard-meta-row strong{font-size:17px}
  .dubcard-role-item .name{font-size:16px}
  .dubcard-role-item .role{font-size:16px}
  .dubcard-role-item.side-speaker .name{font-size:16px}
  .dubcard-side-inline h3{font-size:18px}
  .dubcard-role-columns{max-height:clamp(190px, calc(100% - 100px), 420px)}
}

@media print{
  @page{
    size:1920px 1080px;
    margin:0;
  }

  body.page-dubcard{
    background:#000 !important;
    color:#fff !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
    margin:0 !important;
    padding:0 !important;
  }

  body.page-dubcard .grid{
    padding:0 !important;
    margin:0 !important;
    display:block !important;
  }

  body.page-dubcard .card,
  body.page-dubcard .footer{
    display:none !important;
  }

  body.page-dubcard #dubcard-print{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    break-before:auto !important;
    page-break-before:auto !important;
  }

  body.page-dubcard .dubcard-page{
    width:1920px !important;
    height:1080px !important;
    box-sizing:border-box !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    padding:56px 72px !important;
    border:none !important;
    border-radius:0 !important;
    background:#000 !important;
    color:#fff !important;
    box-shadow:none !important;
    overflow:hidden !important;
    break-before:auto !important;
    page-break-before:auto !important;
    break-after:page !important;
    page-break-after:always !important;
    page-break-inside:avoid;
    break-inside:avoid-page;
  }

  body.page-dubcard .dubcard-page:first-child{
    break-before:auto !important;
    page-break-before:auto !important;
  }

  body.page-dubcard .dubcard-page:last-child{
    break-after:auto !important;
    page-break-after:auto !important;
  }

  body.page-dubcard #dubcard-print .dubcard-page,
  body.page-dubcard #dubcard-print .dubcard-page *{
    color:#fff !important;
  }

  body.page-dubcard #dubcard-print.dubcard-combined .dubcard-page-main{
    break-after:auto !important;
    page-break-after:auto !important;
  }

  body.page-dubcard #dubcard-print.dubcard-combined #dubcard-page-side{
    display:none !important;
  }

  body.page-dubcard #dubcard-print .dubcard-side-inline{
    border-top:1px solid #9aa3b2 !important;
  }

  body.page-dubcard .dubcard-meta-row,
  body.page-dubcard .dubcard-role-item{
    color:#fff !important;
    background:#000 !important;
    border-color:#9aa3b2 !important;
  }

  body.page-dubcard .dubcard-role-item .role{
    color:#fff !important;
  }
}