:root{
  --bg:#070a10;
  --panel: rgba(255,255,255,.04);
  --panel2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.10);
  --text:#e9eefc;
  --muted:rgba(233,238,252,.70);
  --gold:#f6b500;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background-color: #0c0c0c;
  background-image: linear-gradient(to bottom, #284672, #293656, #23283c, #1a1a24, #0c0c0c);
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  color:var(--text);
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans Bengali", sans-serif;
}

a{color:inherit;text-decoration:none}
.pc-container{max-width:1180px;margin:0 auto;padding:0 18px}

/* Topbar */
.pc-topbar{
  position:sticky;top:0;z-index:20;
  background: rgba(7,10,16,.65);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
}
.pc-topbar__inner{height:64px;display:flex;align-items:center;gap:18px;justify-content:space-between}
.pc-brand{
  font-weight:900;
  letter-spacing:.2px;
  color:var(--gold);
  padding:10px 12px;
  border-radius:12px;
}
.pc-nav{display:flex;gap:14px;align-items:center;color:var(--muted);flex-wrap:wrap}
.pc-nav a{padding:10px 10px;border-radius:10px}
.pc-nav a:hover{background:var(--panel);color:var(--text)}
.pc-nav a.is-active{background:var(--panel);border:1px solid var(--border);color:var(--text)}
.pc-try{
  background: linear-gradient(135deg, #f6b500, #ffcc4a);
  color:#0b0b0b;
  font-weight:800;
  border-radius:12px;
  padding:10px 14px;
}

/* Page */
.pc-page{padding:26px 0 40px}
.pc-title{margin:18px 0 16px;font-size:34px;letter-spacing:-.02em}

.pc-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:start;
}

.pc-card{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.pc-card__head{
  padding:16px 16px 12px;
  border-bottom:1px solid var(--border);
  background: rgba(0,0,0,.20);
}
.pc-card__head h2{margin:0;font-size:18px}
.pc-card__head p{margin:6px 0 0;color:var(--muted);font-size:13px}

/* Preview area */
.pc-previewWrap{padding:14px}
.pc-preview{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  padding:14px;
}

.pc-frame{
  width:100%;
  max-width:720px;
  margin:0 auto;
  border-radius:16px;
  background:#d7eef8;
  padding:16px;
  position:relative;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.pc-photo{
  background: rgba(255,255,255,.60);
  border-radius:14px;
  padding:12px;
  border:1px solid rgba(0,0,0,.10);
}
.pc-photo img{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:12px;
  display:none; /* JS এলে দেখাবে */
}
.pc-placeholder{
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background: rgba(0,0,0,.06);
  border: 2px dashed rgba(0,0,0,.18);
  color: rgba(0,0,0,.45);
}
.pc-placeholder__icon{font-size:38px}

.pc-body{padding:14px 6px 6px}
.pc-headline{
  font-weight:900;
  color:#0b0b0b;
  font-size:40px;
  line-height:1.15;
  text-align:center;
  padding:8px 6px;
}

/* Bottom */
.pc-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  color:#1c2b35;
  font-size:14px;
}
.pc-bottom__center{flex:1;display:flex;justify-content:center}
.pc-redbox{
  display:inline-flex;
  padding:6px 12px;
  border-radius:6px;
  font-weight:900;
  background:#e12929;
  color:#fff;
  border:1px solid rgba(0,0,0,.10);
}
.pc-bottom__right{display:flex;align-items:center;gap:6px}
.pc-globe{opacity:.85}

/* Logo */
.pc-logo{
  position:absolute;
  right:16px;
  bottom:16px;
  width:72px;
  height:72px;
  object-fit:contain;
  border-radius:12px;
  display:none; /* JS এলে দেখাবে */
  background: rgba(255,255,255,.65);
  padding:6px;
  border:1px solid rgba(0,0,0,.10);
}

/* Actions */
.pc-actions{
  display:flex;
  gap:10px;
  padding:12px 14px 14px;
  border-top:1px solid var(--border);
  background: rgba(0,0,0,.14);
}
.pc-btn{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
}
.pc-btn:hover{background: rgba(255,255,255,.06)}
.pc-btn--primary{
  background: linear-gradient(135deg, #f6b500, #ffcc4a);
  color:#0b0b0b;
  border-color: rgba(246,181,0,.55);
}
.pc-note{padding:0 14px 14px;color:var(--muted);font-size:12px}

/* Controls */
.pc-controls{padding:14px}
.pc-control{margin-bottom:14px}
.pc-control label{display:block;font-weight:800;margin-bottom:8px;color:rgba(233,238,252,.88);font-size:13px}
.pc-control input[type="text"],
.pc-control input[type="file"],
.pc-control textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color:var(--text);
  padding:10px 12px;
  outline:none;
}
.pc-control textarea{resize:vertical;min-height:74px}
.pc-control input[type="range"]{width:100%}
.pc-control input[type="color"]{
  width:100%;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  padding:6px;
}
.pc-help{margin-top:6px;color:var(--muted);font-size:12px}

.pc-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

/* Footer */
.pc-footer{
  border-top:1px solid var(--border);
  padding:18px 0;
  color:var(--muted);
  background: rgba(0,0,0,.18);
}
.pc-footer__inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pc-footer__links{display:flex;gap:14px}
.pc-footer__links a:hover{color:var(--text)}

/* Desktop -> tablet */
@media (max-width: 980px){
  .pc-grid{grid-template-columns:1fr}
  .pc-nav{display:none}
  .pc-photo img,.pc-placeholder{height:260px}
}

/* =========================================================
   MOBILE PRO PATCH
   ========================================================= */

/* iOS input zoom fix */
@media (max-width: 640px){
  .pc-control input[type="text"],
  .pc-control input[type="file"],
  .pc-control textarea{
    font-size:16px !important;
  }
}

/* Make preview + text scale nicely on phones */
@media (max-width: 640px){
  .pc-container{ padding-left:14px !important; padding-right:14px !important; }

  .pc-previewWrap{ padding:12px !important; }
  .pc-preview{ padding:12px !important; border-radius:16px !important; }

  .pc-frame{
    padding:12px !important;
    border-radius:18px !important;
  }

  .pc-photo{ padding:10px !important; border-radius:16px !important; }
  .pc-photo img, .pc-placeholder{ height:240px !important; border-radius:14px !important; }

  .pc-headline{
    font-size:26px !important;
    line-height:1.18 !important;
    padding:8px 6px !important;
  }

  .pc-bottom{ gap:8px !important; }
  .pc-bottom__left, .pc-bottom__right{ font-size:12px !important; }
  .pc-redbox{ padding:6px 10px !important; font-size:12px !important; border-radius:10px !important; }

  /* Sticky action bar feel */
  .pc-actions{
    position: sticky;
    bottom: 10px;
    z-index: 50;
    border-radius:16px !important;
    backdrop-filter: blur(10px);
    background: rgba(0,0,0,.35) !important;
  }

  .pc-btn{
    padding:14px 12px !important;
    border-radius:14px !important;
    font-size:16px !important;
  }
}

/* =========================================================
   TEMPLATES / CREATE TABS + GRID (Scoped)
   Use wrapper: <div class="pc-scope"> ... </div>
   ========================================================= */

.pc-scope .pc-hero{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:16px;
}
.pc-scope .pc-hero h2{margin:0;color:var(--text);font-size:22px}
.pc-scope .pc-hero p{margin:8px 0 0;color:var(--muted);line-height:1.55}

/* Title pill */
.pc-scope .pc-titlePill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:16px;
  font-weight:900;
  font-size:20px;
  background:#f7c948;
  color:#111827;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
}
.pc-scope .pc-subtitle{
  margin-top:10px;
  color: rgba(255,255,255,.70);
  font-size:14px;
}

/* Tabs */
.pc-scope .pc-pillRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.pc-scope .pc-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.pc-scope .pc-pill:hover{ transform: translateY(-1px); }
.pc-scope .pc-pill:active{ transform: translateY(0); filter: brightness(.98); }

/* Variant colors (requested) */
.pc-scope .pc-pill--news{ background:#f59e0b; color:#111827; } /* কমলা */
.pc-scope .pc-pill--funny{ background:#2563eb; color:#ffffff; } /* নীল */
.pc-scope .pc-pill--more{ background:#2563eb; color:#ffffff; } /* নীল */
.pc-scope .pc-pill--my{ background:#2563eb; color:#ffffff; }   /* নীল */

/* Active: NEVER override background, only add ring */
.pc-scope .pc-pill.is-active{
  outline: 2px solid rgba(255,255,255,.18);
  outline-offset: 2px;
  box-shadow: 0 14px 30px rgba(0,0,0,.55);
}

/* Mobile tab row: horizontal scroll */
@media (max-width: 640px){
  .pc-scope .pc-pillRow{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling: touch;
  }
  .pc-scope .pc-pill{ flex:0 0 auto; white-space:nowrap; }
}
@media (max-width:520px){
  .pc-scope .pc-pillRow{ justify-content:center; }
  .pc-scope .pc-pill{ padding:10px 14px; }
  .pc-scope .pc-titlePill{ font-size:18px; }
}

/* Template tiles */
.pc-scope .pc-tiles{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}
@media (max-width: 1024px){ .pc-scope .pc-tiles{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 768px){ .pc-scope .pc-tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 380px){ .pc-scope .pc-tiles{ grid-template-columns: 1fr; } }

.pc-scope .pc-tile{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
}
.pc-scope .pc-thumb{ aspect-ratio: 1 / 1; background: rgba(0,0,0,.22); }
.pc-scope .pc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.pc-scope .pc-tileBody{ padding:12px 14px; }
.pc-scope .pc-tileTitle{ margin:0; color:var(--text); font-weight:900; }
.pc-scope .pc-tileMeta{ margin-top:6px; color:var(--muted); font-size:12px; }

/* Premium (locked) label above the CTA */
.pc-scope .pc-premiumWrap{ margin-top:12px; }
.pc-scope .pc-premiumLabel{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.6px;
  color:#ff7a00; /* bold orange */
}

/* Keep the locked button tight under the Premium label */
.pc-scope .pc-premiumWrap .pc-tileBtn{ margin-top:0; }

.pc-scope .pc-tileBtn{
  margin-top:12px;
  display:inline-flex;
  width:100%;
  justify-content:center;
  padding:11px 12px;
  border-radius:14px;
  background: linear-gradient(135deg, #f6b500, #ffcc4a);
  color:#0b0b0b;
  font-weight:900;
  text-decoration:none;
}

/* Locked state (when user has no subscription) */
.pc-scope .pc-tileBtn.is-locked{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
  filter: blur(.7px);
  opacity: .92;
}

.pc-scope .pc-tileBtn.is-locked::before{
  content: "\1F512"; /* lock emoji */
  margin-right:8px;
  transform: translateY(-1px);
}

/* More panel boxed */
.pc-scope .pc-comingBox{
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  background: rgba(11,18,32,.85);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.pc-scope .pc-comingTitle{ color:#fff; font-weight:900; font-size:22px; }
.pc-scope .pc-comingText{ margin-top:6px; color: rgba(255,255,255,.82); font-size:16px; font-weight:800; }
.pc-scope .pc-comingHint{ margin-top:10px; color: rgba(255,255,255,.65); font-size:13px; line-height:1.5; }
.pc-scope .pc-comingBtn{
  margin-top:14px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:#111827;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

/* =====================================
   PHOTOCARD TEMPLATES ( /photocard/templates )
   New UI matching the reference screenshots
   Scope: .pc-tpl
   ===================================== */

.pc-tpl{
  padding: 36px 0 60px;
}

.pc-tpl__container{
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 22px;
}

.pc-tpl__hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-top: 10px;
}

.pc-tpl__kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,122,24,0.28);
  background: rgba(15,23,42,0.55);
  color: rgba(255,175,120,0.98);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .8px;
}

.pc-tpl__kickerIcon{ color: rgba(255,140,40,.95); }

.pc-tpl__title{
  margin: 14px 0 0;
  font-size: 52px;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.pc-tpl__sub{
  margin: 10px 0 0;
  color: rgba(233,238,252,.70);
  max-width: 560px;
  line-height: 1.6;
}

.pc-tpl__heroRight{min-width: 320px;}

.pc-tpl__search{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.65);
  padding: 12px 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.pc-tpl__searchIcon{opacity:.75}
.pc-tpl__search input{
  width:100%;
  border:0;
  outline:none;
  background: transparent;
  color: rgba(233,238,252,.90);
  font-size: 14px;
}
.pc-tpl__search input::placeholder{color: rgba(233,238,252,.45)}

.pc-tpl__pills{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 22px;
  flex-wrap:wrap;
}

.pc-tpl__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(15,23,42,.70);
  color: rgba(233,238,252,.60);
  font-weight: 800;
  font-size: 13px;
}

.pc-tpl__pill.is-active{
  background: linear-gradient(90deg, #ff8a00, #ff6a00);
  color: #ffffff;
  border-color: rgba(255,122,24,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.45), 0 10px 26px rgba(255,122,24,.26);
}

.pc-tpl__pill.is-disabled{
  opacity: .45;
  cursor: not-allowed;
}

.pc-tpl__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
@media (max-width: 1100px){ .pc-tpl__grid{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (max-width: 560px){ .pc-tpl__grid{grid-template-columns: 1fr;} }

.pc-tplCard{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  transition: transform .14s ease, border-color .14s ease;
}
.pc-tplCard:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18)}

.pc-tplCard__thumb{
  position:relative;
  height: 178px;
  background: rgba(0,0,0,.22);
}
.pc-tplCard__thumb img{width:100%; height:100%; object-fit:cover; display:block;}

.pc-tplCard__badge{
  position:absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8a00, #ff6a00);
  color: #ffffff;
  font-weight: 900;
  font-size: 11px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.pc-tplCard__body{padding: 16px 16px 18px;}

.pc-tplCard__tag{
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .9px;
  color: rgba(255,122,24,.95);
}

.pc-tplCard__title{
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 900;
  color: rgba(233,238,252,.95);
}

.pc-tplCard__meta{margin-top: 10px;}
.pc-tplCard__id{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(233,238,252,.65);
  font-size: 12px;
}

.pc-tplCard__btn{
  margin-top: 14px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  position: relative;
  padding: 12px 46px 12px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, #ff7a00, #ff4d00);
  color: #ffffff;
  font-weight: 900;
  text-decoration:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.pc-tplCard__btnIcon{opacity:.9; position:absolute; right:18px;}

.pc-tplCard__btn.is-locked{
  background: rgba(255,255,255,.08);
  color: rgba(233,238,252,.80);
  border: 1px solid rgba(255,255,255,.12);
}

@media (max-width: 820px){
  .pc-tpl__hero{flex-direction:column;}
  .pc-tpl__heroRight{min-width: 100%; max-width: 520px;}
  .pc-tpl__title{font-size: 40px;}
}