.template-library-page{max-width:1500px;margin:0 auto}.template-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px;padding:24px;border:1px solid rgba(34,211,238,.25);border-radius:18px;background:linear-gradient(135deg,rgba(8,31,50,.88),rgba(7,18,34,.76))}.template-hero span{color:#46e5ea;font-size:10px;font-weight:900;letter-spacing:2px}.template-hero h2{margin:5px 0 3px;color:#f5fcff;font-size:27px}.template-hero p{margin:0;color:#8fa5b7}.template-hero-badge{display:flex;align-items:center;gap:10px;min-width:260px;padding:13px;border:1px solid rgba(79,227,173,.22);border-radius:13px;background:rgba(36,184,139,.07)}.template-hero-badge>i{color:#58e6b2;font-size:25px}.template-hero-badge b,.template-hero-badge small{display:block}.template-hero-badge b{color:#caffea}.template-hero-badge small{margin-top:2px;color:#789a91;font-size:10px}.template-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 260px;gap:12px;margin-bottom:12px}.template-toolbar label{display:flex;align-items:center;gap:9px;padding:0 13px;border:1px solid rgba(148,184,205,.18);border-radius:12px;background:rgba(3,16,30,.72)}.template-toolbar input,.template-toolbar select{width:100%;min-height:46px;border:0;outline:0;background:transparent;color:#e8f8ff}.template-toolbar select{padding:0 12px;border:1px solid rgba(148,184,205,.18);border-radius:12px;background:#07182a}.template-catalog-status{min-height:22px;color:#7f96aa;font-size:11px}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.template-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid rgba(92,224,255,.2);border-radius:16px;background:linear-gradient(160deg,rgba(8,26,43,.9),rgba(4,14,27,.91));box-shadow:0 18px 44px rgba(0,4,14,.18)}.template-card-preview{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(circle at 50% 35%,rgba(34,211,238,.18),transparent 38%),#061321}.template-card-preview video{width:100%;height:100%;object-fit:cover}.template-preview-pending{display:grid;place-items:center;gap:5px;text-align:center;color:#6ce9ef}.template-preview-pending i{font-size:38px}.template-preview-pending small{color:#71869a}.template-card-badge{position:absolute;top:10px;left:10px;padding:5px 8px;border-radius:999px;background:rgba(2,12,24,.82);color:#a7f3d0;font-size:9px;font-weight:900}.template-card-body{display:flex;flex:1;flex-direction:column;padding:15px}.template-card-body h3{margin:0;color:#effaff;font-size:16px}.template-card-body>p{min-height:42px;margin:7px 0;color:#8da2b4;font-size:11px;line-height:1.55}.template-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}.template-tags span{padding:4px 7px;border-radius:999px;background:rgba(34,211,238,.08);color:#77eaf1;font-size:9px}.template-scenes-summary{display:grid;gap:5px;margin-bottom:13px}.template-scenes-summary span{display:flex;gap:6px;color:#9cb0c0;font-size:10px}.template-scenes-summary i{color:#56dfb1}.template-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}.template-card-actions button{min-width:0}.template-apply-modal{position:fixed;z-index:2147483000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(1,7,16,.82);backdrop-filter:blur(12px)}.template-apply-modal[hidden]{display:none!important}.template-apply-dialog{display:flex;width:min(900px,100%);max-height:min(760px,94dvh);flex-direction:column;overflow:hidden;border:1px solid rgba(92,224,255,.3);border-radius:18px;background:#071526;box-shadow:0 35px 100px rgba(0,0,0,.65)}.template-apply-dialog>header,.template-apply-dialog>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px}.template-apply-dialog>header{border-bottom:1px solid rgba(148,184,205,.14)}.template-apply-dialog>header small{color:#37dce5;font-size:9px;font-weight:900;letter-spacing:1.7px}.template-apply-dialog>header h3{margin:3px 0 0;color:#fff}.template-apply-dialog>header button{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:transparent;color:#fff}.template-apply-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:18px;min-height:0;overflow:auto;padding:20px}.template-apply-preview{display:grid;place-items:center;min-height:320px;overflow:hidden;border-radius:14px;background:#020914}.template-apply-preview video{width:100%;max-height:500px;object-fit:contain}.template-apply-settings{display:flex;min-width:0;flex-direction:column;gap:14px}.template-apply-meta{display:grid;gap:8px}.template-apply-meta span{display:flex;justify-content:space-between;gap:12px;padding-bottom:7px;border-bottom:1px solid rgba(148,184,205,.1);color:#849bad;font-size:11px}.template-apply-meta b{color:#e3f8ff}.template-image-picker{display:flex;align-items:center;gap:12px;padding:17px;border:1px dashed rgba(34,211,238,.42);border-radius:13px;background:rgba(34,211,238,.05);cursor:pointer}.template-image-picker input{display:none}.template-image-picker>i{color:#56e6ee;font-size:30px}.template-image-picker b,.template-image-picker small{display:block}.template-image-picker b{color:#e6fbff}.template-image-picker small{color:#7890a3}.template-image-preview{display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:10px;padding:9px;border-radius:11px;background:rgba(255,255,255,.035)}.template-image-preview img{width:78px;height:90px;border-radius:9px;object-fit:cover}.template-image-preview b,.template-image-preview small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.template-image-preview b{color:#e6fbff}.template-image-preview small{color:#7890a3}.template-apply-message{min-height:20px;color:#fca5a5;font-size:11px;line-height:1.5}.template-apply-message.success{color:#6ee7b7}.template-apply-dialog>footer{justify-content:flex-end;border-top:1px solid rgba(148,184,205,.14)}
@media(max-width:1100px){.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.template-library-page{padding-bottom:10px}.template-hero{align-items:flex-start;padding:15px;border-radius:14px}.template-hero h2{font-size:21px}.template-hero p{font-size:11px}.template-hero-badge{display:none}.template-toolbar{grid-template-columns:1fr}.template-grid{grid-template-columns:1fr;gap:12px}.template-card-preview{aspect-ratio:16/10}.template-card-body>p{min-height:0}.template-apply-modal{place-items:stretch;padding:0}.template-apply-dialog{width:100%;height:var(--firebase-auth-viewport-height,100dvh);max-height:none;border-radius:0}.template-apply-body{grid-template-columns:1fr;gap:12px;padding:14px}.template-apply-preview{min-height:210px}.template-apply-dialog>footer{position:sticky;bottom:0;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#071526}.template-apply-dialog>footer button{flex:1;min-height:48px}}
.template-media{display:grid;place-items:center;gap:8px;aspect-ratio:16/9;background:radial-gradient(circle at 50% 35%,rgba(34,211,238,.18),transparent 38%),#061321;color:#6ce9ef;text-align:center}.template-media i{font-size:38px}.template-media video{width:100%;height:100%;object-fit:cover}.template-media-large{width:100%;min-height:320px;aspect-ratio:auto}.template-card-eyebrow{margin-bottom:7px;color:#60e7ee;font-size:9px;font-weight:800;letter-spacing:.5px}.template-scene-list{display:grid;gap:8px;margin:8px 0 0;padding:0;list-style:none}.template-scene-list li{display:grid;gap:3px;padding:9px;border:1px solid rgba(148,184,205,.11);border-radius:9px}.template-scene-list b{color:#dff8ff;font-size:11px}.template-scene-list small{color:#7f96aa;line-height:1.45}.template-image-preview>span{overflow:hidden;color:#bfeff3;text-overflow:ellipsis;white-space:nowrap}.template-modal-open{overflow:hidden}
.template-media{position:relative;overflow:hidden}.template-media>img{width:100%;height:100%;object-fit:cover}.template-access-badge{position:absolute;z-index:2;top:9px;right:9px;padding:5px 8px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(2,12,24,.82);color:#a7f3d0;font-size:9px;font-weight:900;text-transform:uppercase}.template-source-badge{margin-left:7px;color:#6ee7b7;font-size:9px}.template-catalog-status[data-type="fallback"]{color:#fbbf24}.template-catalog-status[data-type="error"]{color:#fca5a5}
.template-access-badge.locked{border-color:rgba(251,191,36,.35);color:#fcd34d}.template-card-locked{border-color:rgba(251,191,36,.2)}.template-card-locked .btn-primary{background:linear-gradient(135deg,#6b4d15,#9a6c19);color:#fff4c2}

/* Social video previews: preserve the complete TikTok/Facebook 9:16 frame. */
.template-card-preview,.template-media{aspect-ratio:9/16}
.template-card-preview,.template-media:not(.template-media-large){width:min(100%,280px);align-self:center;margin:14px auto 0;border-radius:12px}
.template-card-preview video,.template-media video{object-fit:contain;background:#020914}.template-media>img{object-fit:cover;object-position:center;background:#020914}
.template-apply-preview{min-height:0;padding:12px}
.template-media-large{width:min(100%,320px);min-height:0;max-height:min(64dvh,640px);aspect-ratio:9/16;margin:auto}
.template-media-large video{max-height:none}
@media(max-width:767px){.template-card-preview,.template-media:not(.template-media-large){width:min(78vw,320px);margin-top:12px}.template-apply-preview{min-height:0;padding:10px}.template-media-large{width:min(82vw,320px);max-height:68dvh}}

/* Keep each Template card and its detail viewer proportionate to the 9:16 media. */
.template-grid{grid-template-columns:repeat(auto-fit,minmax(280px,320px));justify-content:center;align-items:start}
.template-card{width:100%;height:100%}
.template-card-preview,.template-media:not(.template-media-large){width:calc(100% - 28px);max-width:292px}
.template-card-body{min-width:0}
.template-apply-dialog{width:min(800px,100%)}
.template-apply-body{grid-template-columns:340px minmax(300px,1fr);align-items:start}
.template-apply-preview{width:340px;max-width:100%;justify-self:center}
.template-media-large{width:100%;max-width:320px}
@media(max-width:1100px) and (min-width:768px){.template-grid{grid-template-columns:repeat(auto-fit,minmax(280px,320px))}}
@media(max-width:767px){.template-grid{grid-template-columns:minmax(0,1fr);justify-items:center}.template-card{width:min(100%,350px)}.template-card-preview,.template-media:not(.template-media-large){width:calc(100% - 24px);max-width:320px}.template-apply-dialog{width:100%}.template-apply-body{grid-template-columns:1fr}.template-apply-preview{width:min(100%,340px)}}

.template-usage-guide{display:grid;gap:11px;padding:13px;border:1px solid rgba(34,211,238,.2);border-radius:13px;background:linear-gradient(145deg,rgba(34,211,238,.07),rgba(5,20,36,.7))}.template-usage-heading{display:flex;align-items:center;gap:9px}.template-usage-heading>i{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:rgba(34,211,238,.12);color:#55e7ee;font-size:18px}.template-usage-heading b,.template-usage-heading small{display:block}.template-usage-heading b{color:#eafcff;font-size:12px}.template-usage-heading small{margin-top:2px;color:#7f98aa;font-size:9px}.template-usage-guide ol{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none}.template-usage-guide li{display:flex;min-width:0;gap:8px;padding:9px;border-radius:10px;background:rgba(2,12,24,.58)}.template-usage-guide li>span{display:grid;place-items:center;width:23px;height:23px;flex:0 0 23px;border-radius:50%;background:#0b5265;color:#83f2f7;font-size:10px;font-weight:900}.template-usage-guide li b,.template-usage-guide li small{display:block}.template-usage-guide li b{color:#dff8ff;font-size:10px}.template-usage-guide li small{margin-top:3px;color:#8299aa;font-size:9px;line-height:1.4}.template-usage-guide>p{display:flex;align-items:flex-start;gap:7px;margin:0;padding-top:9px;border-top:1px solid rgba(148,184,205,.11);color:#9fd9d5;font-size:9px;line-height:1.45}.template-usage-guide>p i{margin-top:1px;color:#facc15;font-size:13px}
@media(max-width:767px){.template-usage-guide{padding:12px}.template-usage-guide ol{grid-template-columns:1fr}.template-usage-guide li{padding:10px}.template-usage-guide li b{font-size:11px}.template-usage-guide li small,.template-usage-guide>p{font-size:10px}}

.template-prompt-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.template-prompt-heading>span{color:#4de5ec;font-size:9px;font-weight:900;letter-spacing:1.4px}.template-prompt-heading>small{color:#71899b;font-size:9px;text-align:right}.template-apply-meta>p{margin:0;padding:10px 12px;border-left:3px solid #22d3ee;border-radius:0 9px 9px 0;background:rgba(34,211,238,.055);color:#dceff6;font-size:11px;line-height:1.55}.template-apply-dialog>header h3{max-width:calc(100% - 56px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:767px){.template-prompt-heading{align-items:flex-start;flex-direction:column;gap:3px}.template-prompt-heading>small{text-align:left}.template-apply-meta>p{font-size:11px}.template-apply-dialog>header h3{font-size:16px}}

/* Template names may span multiple lines; never hide them behind an ellipsis. */
.template-apply-dialog>header>div{min-width:0;flex:1;padding-right:10px}.template-apply-dialog>header h3{max-width:none;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;line-height:1.3}.template-apply-dialog>header button{flex:0 0 40px;align-self:flex-start}
@media(max-width:767px){.template-apply-dialog>header{align-items:flex-start}.template-apply-dialog>header h3{font-size:16px;line-height:1.35}}

/* Persistent per-user Template favorites. */
.template-card{position:relative}.template-favorite{position:absolute;z-index:5;top:22px;left:22px;display:flex;align-items:center;gap:6px;min-height:36px;padding:7px 10px;border:1px solid rgba(250,204,21,.62);border-radius:999px;background:rgba(36,28,4,.92);box-shadow:0 8px 24px rgba(0,0,0,.36);color:#fde68a;font-size:10px;font-weight:900;cursor:pointer;backdrop-filter:blur(8px);transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.template-favorite i{font-size:17px}.template-favorite:hover{transform:translateY(-1px);background:rgba(71,54,4,.96)}.template-favorite.active{border-color:#fde047;background:linear-gradient(135deg,#ca8a04,#facc15);box-shadow:0 0 0 3px rgba(250,204,21,.16),0 10px 28px rgba(202,138,4,.42);color:#241700}.template-favorite:disabled{opacity:.65;cursor:wait}.template-favorite:focus-visible{outline:3px solid rgba(34,211,238,.55);outline-offset:2px}
@media(max-width:767px){.template-favorite{top:20px;left:20px;min-height:40px;padding:8px 11px;font-size:11px}.template-favorite i{font-size:19px}}

/* One responsive Template card for desktop and mobile. Only the number of
   columns changes; media geometry and thumbnail rendering stay identical. */
.template-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),360px));
  justify-content:center;
  align-items:start;
  gap:18px;
}
.template-card{
  box-sizing:border-box;
  width:100%;
  max-width:360px;
  height:auto;
}
.template-card .template-media:not(.template-media-large){
  box-sizing:border-box;
  width:calc(100% - 24px);
  max-width:336px;
  aspect-ratio:9/16;
  margin:12px auto 0;
  border-radius:13px;
}
.template-card .template-media>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.template-preview-play{position:absolute;z-index:4;left:50%;top:50%;display:flex;min-width:116px;min-height:48px;align-items:center;justify-content:center;gap:8px;padding:10px 15px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(2,12,24,.78);box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 0 5px rgba(34,211,238,.1);color:#fff;font:inherit;font-size:12px;font-weight:900;cursor:pointer;backdrop-filter:blur(9px);transform:translate(-50%,-50%);transition:background .16s ease,box-shadow .16s ease,transform .16s ease}.template-preview-play i{font-size:21px;color:#5eeaf0}.template-preview-play:hover{background:rgba(7,35,54,.94);box-shadow:0 14px 38px rgba(0,0,0,.58),0 0 0 7px rgba(34,211,238,.16);transform:translate(-50%,-50%) scale(1.04)}.template-preview-play:active{transform:translate(-50%,-50%) scale(.97)}.template-preview-play:focus-visible{outline:3px solid #22d3ee;outline-offset:4px}
@media(max-width:767px){
  .template-grid{grid-template-columns:minmax(0,360px);gap:14px}
  .template-card{max-width:360px}
  .template-card .template-media:not(.template-media-large){
    width:calc(100% - 24px);
    max-width:336px;
    margin-top:12px;
  }
  .template-preview-play{min-width:128px;min-height:52px;font-size:13px}
}