.std-page {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  max-width: 1520px;
  margin: 0 auto;
  padding: 22px 16px 40px;
}

.std-side {
  position: sticky;
  top: 86px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.std-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.std-brandLogo {
  display: block;
  width: auto;
  height: 42px;
  object-fit: contain;
}

.std-writeCta,
.std-premiumCard a,
.std-btn,
.std-topBtn,
.std-followBtn,
.std-wideBtn,
.std-readBtn,
.std-lockBtn {
  text-decoration: none;
}

.std-writeCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2f8cff, #1d68f2);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 18px 38px rgba(29, 104, 242, 0.18);
}

.std-navGroup,
.std-premiumCard,
.std-hero,
.std-metricStrip,
.std-tabsCard,
.std-panel,
.std-coverCard,
.std-reviewCard {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.std-navGroup {
  padding: 16px;
}

.std-navTitle {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.std-navItem {
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  color: #1e293b;
  text-decoration: none;
  font-weight: 700;
}

.std-navItem.is-active {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.std-premiumCard {
  padding: 18px;
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(18, 51, 109, 0.98), rgba(15, 31, 84, 0.98)),
    url("../img/storymania_sidebar_promo_ai.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right -28px bottom -6px;
  background-size: auto, 132px;
  color: #fff;
}

.std-premiumCard p {
  margin: 8px 0 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.std-premiumCard a {
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  color: #12336d;
  font-weight: 800;
}

.std-shell {
  min-width: 0;
}

.std-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.std-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.std-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #0f172a;
  font-weight: 600;
}

.std-search button,
.std-btn,
.std-tab,
.std-readMore {
  border: none;
  cursor: pointer;
  font-weight: 800;
}

.std-search button {
  padding: 9px 12px;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
}

.std-topActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.std-topBtn,
.std-btn,
.std-followBtn,
.std-wideBtn,
.std-readBtn,
.std-lockBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border-radius: 14px;
  background: #fff;
  color: #1e293b;
  font-weight: 700;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.std-topBtn.is-primary,
.std-btn.is-primary,
.std-wideBtn,
.std-readBtn {
  background: linear-gradient(135deg, #2f8cff, #1d68f2);
  color: #fff;
}

.std-userMini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.std-userMini img,
.std-authorHead img,
.std-feedbackCard img,
.std-commentCard img,
.std-reviewHead img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.std-userMini b,
.std-storyIntro h1,
.std-authorHead b,
.std-authorCard strong,
.std-similarItem b,
.std-feedbackCard b,
.std-commentCard b,
.std-reviewHead b {
  color: #0f172a;
}

.std-userMini small,
.std-authorRow,
.std-stat span,
.std-description,
.std-metric span,
.std-panelHead a,
.std-authorHead small,
.std-authorCard p,
.std-authorStats span,
.std-similarItem small,
.std-miniMeta,
.std-feedbackCard small,
.std-commentCard small,
.std-reviewHead small,
.std-reviewActions,
.std-empty {
  color: #64748b;
}

.std-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
}

.std-main,
.std-right {
  min-width: 0;
}

.std-backLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
  margin: 4px 0 14px;
}

.std-hero {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 26px;
  padding: 22px;
}

.std-coverCard {
  overflow: hidden;
}

.std-coverCard img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

.std-storyIntro {
  min-width: 0;
}

.std-chipRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.std-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: #f4f7fb;
  color: #475569;
}

.std-chip.is-primary {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

.std-storyIntro h1 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.1;
}

.std-authorRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-weight: 600;
}

.std-authorRow a {
  color: #1d4ed8;
  font-weight: 800;
  text-decoration: none;
}

.std-ratingInline {
  width: fit-content;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #172554;
  background: linear-gradient(135deg, #fff7ed, #eff6ff);
  border: 1px solid rgba(37, 99, 235, 0.1);
  font-size: 13px;
  font-weight: 800;
}

.std-ratingInline strong {
  color: #0f172a;
  font-size: 16px;
}

.std-ratingInline span:last-child {
  color: #64748b;
  font-weight: 700;
}

.std-ratingIcon {
  color: #f59e0b;
}

.std-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 900;
}

.std-sep {
  opacity: 0.4;
}

.std-statsRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 18px;
}

.std-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
  border-radius: 18px;
  background: #f8fafc;
}

.std-stat strong,
.std-metric strong {
  font-size: 24px;
  color: #0f172a;
}

.std-actionRow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.std-btn {
  padding: 12px 18px;
}

.std-description {
  font-size: 15px;
  line-height: 1.7;
}

.std-readMore {
  margin-top: 10px;
  padding: 0;
  background: none;
  color: #2563eb;
}

.std-metricStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 18px;
  overflow: hidden;
}

.std-metric {
  padding: 18px 20px;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
}

.std-metric span,
.std-metric strong {
  display: block;
}

.std-metric span {
  margin-bottom: 6px;
}

.std-metric strong {
  line-height: 1.05;
  white-space: nowrap;
}

.std-metric:last-child {
  border-right: none;
}

.std-tabsCard {
  margin-top: 18px;
  padding: 0;
  overflow: hidden;
}

.std-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.std-tab {
  flex: 0 0 auto;
  padding: 18px 18px 14px;
  background: transparent;
  color: #64748b;
  border-bottom: 3px solid transparent;
}

.std-tab.is-active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.std-pane {
  display: none;
  padding: 18px;
}

.std-pane.is-active {
  display: block;
}

.std-chapterGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.std-groupTitle {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.std-chapterRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.std-chapterMain {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.std-chapterIcon {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  flex: 0 0 auto;
}

.std-chapterCopy {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.std-chapterCopy b {
  color: #0f172a;
}

.std-chapterBadge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.std-chapterBadge.is-free {
  background: #dcfce7;
  color: #15803d;
}

.std-chapterBadge.is-premium {
  background: #ffedd5;
  color: #ea580c;
}

.std-chapterMeta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #64748b;
  font-weight: 700;
  font-size: 13px;
}

.std-readBtn,
.std-lockBtn {
  min-width: 80px;
  padding: 10px 14px;
}

.std-lockBtn {
  background: #f8fafc;
  color: #94a3b8;
}

.std-longText {
  color: #334155;
  line-height: 1.8;
}

.std-feedbackList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.std-feedbackCard,
.std-commentCard {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

.std-ratingStars {
  margin: 6px 0 4px;
  color: #f59e0b;
  letter-spacing: 0.08em;
}

.std-commentTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.std-commentCard p,
.std-reviewCard p {
  margin: 8px 0;
  color: #334155;
  line-height: 1.6;
}

.std-panel {
  padding: 18px;
}

.std-panelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.std-panel h3 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
}

.std-authorCard p {
  margin: 10px 0 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.std-authorHead {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.std-followBtn {
  padding: 10px 14px;
  color: #2563eb;
  background: #fff;
}

.std-authorStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
  text-align: center;
}

.std-authorStats div {
  padding: 10px 8px;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
}

.std-authorStats div:last-child {
  border-right: none;
}

.std-authorStats strong {
  display: block;
  margin-top: 6px;
}

.std-wideBtn {
  width: 100%;
  padding: 12px 16px;
}

.std-similarList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.std-similarItem {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  text-decoration: none;
}

.std-similarItem > div {
  min-width: 0;
}

.std-similarItem b,
.std-similarItem small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.std-similarItem small {
  margin-top: 3px;
}

.std-similarItem img {
  width: 58px;
  height: 76px;
  border-radius: 14px;
  object-fit: cover;
}

.std-miniMeta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
}

.std-reviewCard + .std-reviewCard {
  margin-top: 12px;
}

.std-reviewHead {
  display: flex;
  gap: 12px;
  align-items: center;
}

.std-reviewActions {
  display: flex;
  gap: 16px;
  font-size: 13px;
  font-weight: 700;
}

.std-empty {
  padding: 16px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px dashed rgba(15, 23, 42, 0.12);
}

@media (max-width: 1180px) {
  .std-page {
    grid-template-columns: 1fr;
  }

  .std-side {
    position: static;
  }

  .std-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .std-topbar,
  .std-topActions,
  .std-hero {
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .std-statsRow,
  .std-metricStrip,
  .std-authorStats {
    grid-template-columns: 1fr 1fr;
  }

  .std-metric {
    border-right: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  }

  .std-metric:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .std-authorHead {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .std-followBtn {
    grid-column: 1 / -1;
  }

  .std-chapterRow,
  .std-chapterMeta,
  .std-commentTop {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .std-page {
    padding: 14px 10px 32px;
  }

  .std-statsRow,
  .std-metricStrip,
  .std-authorStats {
    grid-template-columns: 1fr;
  }
}

.std-page--shell {
  display: block;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.std-page--shell .std-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: 18px;
  align-items: start;
}

.std-page--shell .std-side,
.std-page--shell .std-topbar,
.std-page--shell .std-shell {
  display: none !important;
}

.std-page--shell .std-backLink {
  margin-top: 0;
}

.std-page--shell .std-hero {
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  border-radius: 14px;
  box-shadow: none;
}

.std-page--shell .std-coverCard,
.std-page--shell .std-metricStrip,
.std-page--shell .std-tabsCard,
.std-page--shell .std-panel,
.std-page--shell .std-reviewCard {
  border-radius: 14px;
  box-shadow: none;
}

.std-page--shell .std-coverCard {
  align-self: stretch;
}

.std-page--shell .std-coverCard img {
  max-height: 360px;
}

.std-page--shell .std-storyIntro h1 {
  font-size: 26px;
  letter-spacing: 0;
}

.std-page--shell .std-statsRow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.std-page--shell .std-stat {
  border-radius: 12px;
}

.std-page--shell .std-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 32px;
}

.std-page--shell .std-panel {
  padding: 16px;
}

@media (max-width: 1180px) {
  .std-page--shell .std-content {
    grid-template-columns: 1fr;
  }

  .std-page--shell .std-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 0;
  }
}

@media (max-width: 860px) {
  .std-page--shell .std-hero,
  .std-page--shell .std-content,
  .std-page--shell .std-right {
    grid-template-columns: 1fr;
  }

  .std-page--shell .std-coverCard img {
    max-height: none;
    aspect-ratio: 2 / 3;
  }
}