/* ================================================================
   PRIYO STORY — PAGES
   ================================================================ */

/* ---------------- create ---------------- */
.cr-head{ margin-bottom:16px; }
.cr-head h1{ font-size:24px; font-weight:800; margin-bottom:4px; }
.cr-head p{ font-size:15px; color:var(--muted, #6b7a72); line-height:1.7; }

.cr-card{
  background:var(--card, #fff);
  border-radius:15px;
  padding:20px;
  margin-bottom:16px;
  box-shadow:0 1px 3px rgba(15,81,50,.06);
}
.cr-sub{ font-size:17px; font-weight:700; margin-bottom:12px; }
.cr-foot{
  display:flex; align-items:center; gap:12px;
  margin-top:16px; padding-top:16px;
  border-top:1px solid var(--border, #e2e8e4);
}
.cr-foot .cp-submit{ margin-left:auto; }

.cr-soon{
  background:#fff6e5;
  border:1px solid #f0dcae;
  border-radius:11px;
  padding:13px 15px;
  font-size:14px; line-height:1.8;
  color:#7a5510;
}

/* a small taste of what the page will look like */
.cr-preview{ margin-top:16px; }
.cr-prev-label{
  font-size:12.5px; font-weight:700;
  color:var(--muted, #6b7a72);
  margin-bottom:7px;
}
.cr-prev-card{
  border:1px solid var(--border, #e2e8e4);
  border-radius:13px;
  overflow:hidden;
}
.cr-prev-cover{
  height:78px;
  background:linear-gradient(120deg, #0f5132 0%, #1fa855 100%);
}
.cr-prev-card.shop .cr-prev-cover{
  background:linear-gradient(120deg, #123b2a 0%, #2b7a55 100%);
}
.cr-prev-row{
  display:flex; align-items:center; gap:12px;
  padding:0 15px 12px;
  margin-top:-22px;
}
.cr-prev-pic{
  width:52px; height:52px; border-radius:50%;
  background:var(--bg, #f0f2f0);
  border:3px solid var(--card, #fff);
  flex-shrink:0;
}
.cr-prev-card.shop .cr-prev-pic{ border-radius:14px; }
.cr-prev-row b{ display:block; font-size:16px; font-weight:800; padding-top:20px; }
.cr-prev-row i{ font-style:normal; font-size:13px; color:var(--muted, #6b7a72); }
.cr-prev-chips{
  display:flex; gap:6px; flex-wrap:wrap;
  padding:0 15px 14px;
}
.cr-prev-chips span{
  font-size:12.5px;
  padding:5px 12px;
  border-radius:20px;
  background:var(--bg, #f0f2f0);
  color:var(--muted, #6b7a72);
}

.cr-mine{
  display:flex; align-items:center; gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--border, #e2e8e4);
  text-decoration:none; color:inherit;
}
.cr-mine:last-child{ border-bottom:none; }
.cr-mine-pic{
  width:46px; height:46px; border-radius:12px;
  background:var(--green-light, #e8f5ee);
  overflow:hidden; flex-shrink:0;
}
.cr-mine-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.cr-mine-main{ flex:1; min-width:0; }
.cr-mine-main b{ display:block; font-size:15px; font-weight:700; }
.cr-mine-main i{ font-style:normal; font-size:12.5px; color:var(--muted, #6b7a72); }
.cr-mine-go{ color:var(--muted, #6b7a72); font-size:18px; }

/* ================================================================
   PAGE VIEW
   ================================================================ */
.pg-loading{
  text-align:center; padding:44px 20px;
  color:var(--muted, #6b7a72); font-size:15px;
}

.pg-top{
  background:var(--card, #fff);
  border-radius:0 0 15px 15px;
  overflow:hidden;
  margin-bottom:16px;
  box-shadow:0 1px 3px rgba(15,81,50,.06);
}
.pg-cover{
  position:relative;
  aspect-ratio:16 / 5;
  background:linear-gradient(120deg, #0f5132 0%, #1fa855 100%);
  overflow:hidden;
}
.pg-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.pg-cover-btn{
  position:absolute; right:14px; bottom:14px;
  border:none; background:rgba(255,255,255,.92);
  border-radius:9px; padding:9px 15px;
  font-family:inherit; font-size:13.5px; font-weight:700;
  cursor:pointer;
}

.pg-idbar{
  display:flex; align-items:flex-end; gap:18px;
  padding:0 22px 18px;
  flex-wrap:wrap;
}
.pg-avatar{
  position:relative;
  width:150px; height:150px;
  border-radius:50%;
  margin-top:-56px;
  background:var(--green-light, #e8f5ee);
  border:5px solid var(--card, #fff);
  overflow:hidden;
  flex-shrink:0;
}
.pg-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
/* a shop is a brand, not a face — square reads better */
body.pg-shop .pg-avatar{ border-radius:22px; }

.pg-avatar-btn{
  position:absolute; right:6px; bottom:6px;
  width:34px; height:34px; border-radius:50%;
  border:none; background:var(--card, #fff);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  font-size:15px; cursor:pointer;
}

.pg-idmain{ flex:1; min-width:200px; padding-bottom:4px; }
.pg-name{
  font-size:28px; font-weight:800;
  display:flex; align-items:center; gap:7px;
  line-height:1.3;
}
.pg-tick{ width:22px; height:22px; color:#1877f2; flex-shrink:0; }
.pg-tag{ font-size:15px; color:var(--muted, #6b7a72); margin-top:2px; }
.pg-meta{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:14px; color:var(--muted, #6b7a72);
  margin-top:6px;
}

.pg-actions{ display:flex; gap:9px; flex-wrap:wrap; padding-bottom:4px; }
.pg-btn{
  border:1.5px solid var(--border, #e2e8e4);
  background:var(--card, #fff);
  color:var(--text, #1f2a24);
  border-radius:10px;
  padding:11px 20px;
  font-family:inherit; font-size:14.5px; font-weight:700;
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center;
}
.pg-btn:hover{ background:var(--bg, #f0f2f0); }
.pg-btn.primary{
  background:var(--green-dark, #0f5132);
  border-color:var(--green-dark, #0f5132);
  color:#fff;
}
.pg-btn.primary:hover{ opacity:.93; }

.pg-tabs{
  display:flex; gap:4px;
  padding:0 14px;
  border-top:1px solid var(--border, #e2e8e4);
  overflow-x:auto;
  scrollbar-width:none;
}
.pg-tabs::-webkit-scrollbar{ display:none; }
.pg-tab{
  border:none; background:transparent;
  padding:14px 18px;
  font-family:inherit; font-size:15px; font-weight:600;
  color:var(--muted, #6b7a72);
  cursor:pointer;
  border-bottom:3px solid transparent;
  white-space:nowrap;
}
.pg-tab:hover{ color:var(--text, #1f2a24); }
.pg-tab.on{
  color:var(--green-dark, #0f5132);
  border-bottom-color:var(--green-dark, #0f5132);
  font-weight:700;
}

/* ---------------- panels ---------------- */
.pg-card{
  background:var(--card, #fff);
  border-radius:14px;
  padding:18px;
  margin-bottom:16px;
  box-shadow:0 1px 3px rgba(15,81,50,.06);
}
.pg-h2{ font-size:17px; font-weight:700; margin-bottom:12px; }
.pg-intro p{ font-size:15px; line-height:1.85; margin-bottom:10px; }
.pg-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; padding:9px 0;
  border-bottom:1px solid var(--border, #e2e8e4);
  font-size:14.5px; line-height:1.7;
}
.pg-row:last-child{ border-bottom:none; }
.pg-row span{ color:var(--muted, #6b7a72); flex-shrink:0; }
.pg-row b{ text-align:right; word-break:break-word; }
.pg-row a{ color:var(--green-dark, #0f5132); }

.pg-shopbar{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:14px 16px;
}
.pg-shopbar span{
  font-size:13.5px; font-weight:600;
  background:var(--bg, #f0f2f0);
  border-radius:20px;
  padding:8px 14px;
}

.pg-write{
  width:100%;
  display:flex; align-items:center; gap:12px;
  background:var(--card, #fff);
  border:1px solid var(--border, #e2e8e4);
  border-radius:26px;
  padding:13px 18px;
  margin-bottom:16px;
  font-family:inherit; font-size:15px;
  color:var(--muted, #6b7a72);
  cursor:pointer;
  text-align:left;
}
.pg-write:hover{ background:var(--bg, #f0f2f0); }
.pg-write-pic{
  width:38px; height:38px; border-radius:50%;
  background:var(--green-light, #e8f5ee);
  flex-shrink:0;
}

.pg-empty{
  padding:30px 18px;
  text-align:center;
  color:var(--muted, #6b7a72);
  font-size:14.5px; line-height:1.9;
}

.cp-aspage{
  background:var(--green-light, #e8f5ee);
  color:var(--green-dark, #0f5132);
  font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:20px;
}

/* ---------------- responsive ---------------- */
@media (max-width:880px){
  .pg-top{ border-radius:0; margin-left:-14px; margin-right:-14px; }
  .pg-idbar{ padding:0 16px 16px; gap:14px; }
  .pg-avatar{ width:110px; height:110px; margin-top:-40px; border-width:4px; }
  .pg-name{ font-size:23px; }
  .pg-actions{ width:100%; }
  .pg-actions .pg-btn{ flex:1; justify-content:center; }
}

@media (max-width:600px){
  .cr-head h1{ font-size:21px; }
  .pg-idbar{ flex-direction:column; align-items:flex-start; }
  .pg-idmain{ min-width:0; width:100%; }
  .pg-avatar{ width:96px; height:96px; margin-top:-34px; }
  .pg-name{ font-size:20px; }
  .pg-tag, .pg-meta{ font-size:13.5px; }
  .pg-tab{ padding:12px 14px; font-size:14px; }
  .pg-row{ flex-direction:column; gap:2px; }
  .pg-row b{ text-align:left; }
}

/* ================================================================
   SWITCHED INTO A PAGE
   ================================================================ */
.act-bar{
  display:flex; align-items:center; gap:11px;
  background:var(--green-dark, #0f5132);
  color:#fff;
  padding:9px 18px;
  font-size:14px;
  flex-wrap:wrap;
}
.act-pic{
  width:30px; height:30px; border-radius:8px;
  background:rgba(255,255,255,.2);
  overflow:hidden; flex-shrink:0;
}
.act-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.act-text{ flex:1; min-width:0; }
.act-text b{ font-weight:800; }
.act-go{
  color:#fff; text-decoration:underline;
  font-weight:700; font-size:13.5px;
}
.act-out{
  border:1px solid rgba(255,255,255,.5);
  background:transparent; color:#fff;
  border-radius:8px; padding:7px 13px;
  font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer;
}
.act-out:hover{ background:rgba(255,255,255,.14); }

.acc-switch{
  border-bottom:1px solid var(--border, #e2e8e4);
  padding:8px 0;
  margin-bottom:4px;
}
.acc-switch-head{
  font-size:12px; font-weight:700;
  color:var(--muted, #6b7a72);
  padding:4px 14px 7px;
}
.acc-switch-item{
  width:100%;
  display:flex; align-items:center; gap:10px;
  border:none; background:transparent;
  padding:9px 14px;
  font-family:inherit; font-size:14.5px;
  color:var(--text, #1f2a24);
  cursor:pointer; text-align:left;
}
.acc-switch-item:hover{ background:var(--bg, #f0f2f0); }
.acc-switch-pic{
  width:32px; height:32px; border-radius:9px;
  background:var(--green-light, #e8f5ee);
  overflow:hidden; flex-shrink:0;
}
.acc-switch-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.acc-switch-pic.self{ border-radius:50%; }
.acc-switch-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-switch-tick{ color:var(--green-dark, #0f5132); font-weight:800; opacity:0; }
.acc-switch-item.on .acc-switch-tick{ opacity:1; }
.acc-switch-item.on{ font-weight:700; }

/* ================================================================
   PAGE COMPOSER
   ================================================================ */
.pg-composer{
  background:var(--card, #fff);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:16px;
  box-shadow:0 1px 3px rgba(15,81,50,.06);
}
.pg-comp-top{ display:flex; align-items:center; gap:12px; }
.pg-comp-pic{
  width:42px; height:42px; border-radius:50%;
  background:var(--green-light, #e8f5ee);
  overflow:hidden; flex-shrink:0;
}
.pg-comp-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.pg-comp-input{
  flex:1; min-width:0;
  border:none; background:var(--bg, #f0f2f0);
  border-radius:24px;
  padding:12px 18px;
  font-family:inherit; font-size:15px;
  color:var(--muted, #6b7a72);
  cursor:pointer; text-align:left;
}
.pg-comp-input:hover{ background:#e6ebe8; }
.pg-comp-row{
  display:flex; gap:6px;
  margin-top:11px; padding-top:11px;
  border-top:1px solid var(--border, #e2e8e4);
}
.pg-comp-btn{
  flex:1;
  border:none; background:transparent;
  border-radius:9px; padding:9px 6px;
  font-family:inherit; font-size:14px; font-weight:600;
  color:var(--muted, #6b7a72);
  cursor:pointer;
}
.pg-comp-btn:hover{ background:var(--bg, #f0f2f0); }

/* ---------------- pinning ---------------- */
.pg-pinbar{
  display:flex; align-items:center; gap:10px;
  padding:0 0 8px;
}
.pg-pin{
  border:1px solid var(--border, #e2e8e4);
  background:var(--card, #fff);
  border-radius:8px; padding:6px 12px;
  font-family:inherit; font-size:12.5px; font-weight:700;
  color:var(--muted, #6b7a72);
  cursor:pointer;
}
.pg-pin:hover{ border-color:var(--green, #1a7a4c); color:var(--green-dark, #0f5132); }
.pg-pinned-tag{
  font-size:12.5px; font-weight:700;
  color:var(--green-dark, #0f5132);
  background:var(--green-light, #e8f5ee);
  padding:5px 12px; border-radius:20px;
}
article.is-pinned{
  border:2px solid var(--green, #1a7a4c);
}
.pg-cpin{
  border:none; background:transparent;
  color:var(--muted, #6b7a72);
  font-family:inherit; font-size:12px; font-weight:700;
  cursor:pointer; padding:2px 6px;
}
.pg-cpin:hover{ color:var(--green-dark, #0f5132); }
.sp-cmt.is-pinned-comment{
  background:var(--green-light, #e8f5ee);
  border-radius:12px;
}

/* ================================================================
   PAGE LIST
   ================================================================ */
.pl-bar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin-bottom:16px;
}
.pl-chip{
  border:1.5px solid var(--border, #e2e8e4);
  background:var(--card, #fff);
  border-radius:20px; padding:9px 16px;
  font-family:inherit; font-size:14px; font-weight:600;
  cursor:pointer;
}
.pl-chip.on{
  background:var(--green-dark, #0f5132);
  border-color:var(--green-dark, #0f5132);
  color:#fff; font-weight:700;
}
.pl-new{
  margin-left:auto;
  background:var(--green-dark, #0f5132);
  color:#fff; text-decoration:none;
  border-radius:10px; padding:10px 18px;
  font-size:14px; font-weight:700;
}

.pl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:16px;
}
.pl-card{
  background:var(--card, #fff);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(15,81,50,.06);
  position:relative;
}
.pl-cover{
  display:block; height:88px;
  background:linear-gradient(120deg, #0f5132 0%, #1fa855 100%);
}
.pl-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.pl-pic{
  display:block;
  width:66px; height:66px; border-radius:50%;
  background:var(--green-light, #e8f5ee);
  border:4px solid var(--card, #fff);
  overflow:hidden;
  margin:-36px auto 0;
  position:relative;
}
.pl-pic.square{ border-radius:18px; }
.pl-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.pl-body{ padding:10px 14px 16px; text-align:center; }
.pl-name{
  display:block; font-size:16px; font-weight:700;
  color:inherit; text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pl-sub{ font-size:13px; color:var(--muted, #6b7a72); margin-top:2px; }
.pl-count{ font-size:12.5px; color:var(--muted, #6b7a72); margin:5px 0 11px; }
.pl-btn{
  width:100%;
  border:none;
  background:var(--green-dark, #0f5132);
  color:#fff;
  border-radius:9px; padding:10px;
  font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; text-decoration:none; display:block;
}
.pl-btn.on{ background:var(--bg, #f0f2f0); color:var(--green-dark, #0f5132); }
.pl-btn.ghost{ background:var(--bg, #f0f2f0); color:var(--text, #1f2a24); }

@media (max-width:600px){
  .pl-grid{ grid-template-columns:1fr 1fr; gap:11px; }
  .pl-name{ font-size:14.5px; }
  .act-bar{ font-size:13px; padding:8px 12px; }
  .act-out{ font-size:12px; padding:6px 10px; }
}
@media (max-width:380px){
  .pl-grid{ grid-template-columns:1fr; }
}