.kjh-topbar,
.kjf-footer {
  display: none !important;
}

.content-container,
#content {
  background: #f6f8ff !important;
  padding: 0 !important;
}

.stp-shell,
.stp-shell * {
  box-sizing: border-box;
}

.stp-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  color: #101828;
  background:
    radial-gradient(circle at top left, rgba(124, 92, 255, 0.1), transparent 24%),
    radial-gradient(circle at top right, rgba(255, 77, 143, 0.08), transparent 18%),
    linear-gradient(180deg, #fbfcff 0%, #f4f7ff 100%);
  font-family: "Segoe UI", Arial, sans-serif;
}

.stp-shell svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stp-sidebar {
  min-height: 100vh;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  border-right: 1px solid rgba(98, 117, 255, 0.12);
}

.stp-brandWrap { padding: 22px 22px 14px; }
.stp-brand { display:inline-flex; align-items:center; text-decoration:none; }
.stp-brandLogo { display:block; width:auto; height:42px; object-fit:contain; }
.stp-sidebarBody { padding: 8px 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.stp-newStory { height: 44px; border-radius: 12px; display:flex; align-items:center; justify-content:center; text-decoration:none; color:#fff; font-size:14px; font-weight:800; background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 100%); box-shadow:0 14px 24px rgba(90,76,214,.24); }
.stp-navGroup { display:flex; flex-direction:column; gap:6px; }
.stp-navTitle { padding:0 10px; color:#667085; font-size:11px; font-weight:800; text-transform:uppercase; }
.stp-navItem { min-height:42px; padding:9px 10px; border-radius:14px; display:flex; align-items:center; gap:12px; color:#344054; text-decoration:none; font-size:14px; font-weight:600; }
.stp-navItem:hover { color:#2f61ff; background:linear-gradient(90deg,rgba(47,97,255,.12),rgba(124,92,255,.05)); }
.stp-navIcon { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; }
.stp-badge,.stp-count { margin-left:auto; min-width:22px; height:22px; padding:0 8px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; }
.stp-badge { color:#2f61ff; background:rgba(47,97,255,.12); }
.stp-count { color:#fff; background:#ff365d; }
.stp-upgrade { margin-top:auto; position:relative; overflow:hidden; padding:16px 14px; border-radius:18px; color:#fff; background-image:linear-gradient(165deg,rgba(53,44,129,.98) 0%,rgba(97,59,255,.98) 100%), url("../img/storymania_sidebar_promo_ai.png"); background-repeat:no-repeat, no-repeat; background-position:center, right -30px bottom -8px; background-size:auto, 136px; }
.stp-upgrade strong { font-size:15px; }
.stp-upgrade p { margin:8px 0 0; color:rgba(255,255,255,.78); font-size:12px; line-height:1.55; }
.stp-upgrade a { display:inline-flex; margin-top:14px; width:100%; height:40px; border-radius:12px; align-items:center; justify-content:center; text-decoration:none; color:#315eff; background:#fff; font-weight:800; }

.stp-app { min-width:0; }
.stp-topbar { padding:18px 22px 12px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.stp-topLeft,.stp-topRight { display:flex; align-items:center; gap:14px; }
.stp-menuBtn,.stp-iconBtn { width:46px; height:46px; border:1px solid rgba(106,122,255,.14); border-radius:16px; background:rgba(255,255,255,.92); color:#46536b; position:relative; }
.stp-search { min-width:340px; height:46px; padding:0 14px; border-radius:16px; border:1px solid rgba(106,122,255,.14); background:rgba(255,255,255,.92); display:flex; align-items:center; gap:10px; }
.stp-search input { width:100%; border:none; background:transparent; outline:none; color:#111827; font-size:14px; }
.stp-diamond { padding:0 14px; height:46px; border-radius:14px; display:inline-flex; align-items:center; gap:8px; text-decoration:none; background:rgba(255,255,255,.92); border:1px solid rgba(106,122,255,.14); color:#2356f6; font-weight:800; }
.stp-iconBtn em { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#ff365d; color:#fff; font-size:10px; font-style:normal; display:inline-flex; align-items:center; justify-content:center; }
.stp-user { min-width:160px; padding:8px 12px 8px 8px; border-radius:16px; background:rgba(255,255,255,.92); border:1px solid rgba(106,122,255,.14); display:flex; align-items:center; gap:10px; }
.stp-user img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.stp-user b { display:block; font-size:14px; font-weight:800; }
.stp-user small { display:block; margin-top:2px; color:#667085; font-size:12px; }
.stp-caret { margin-left:auto; color:#667085; }

.stp-main { padding:0 22px 22px; }
.stp-hero { border-radius:28px; overflow:hidden; background:rgba(255,255,255,.92); border:1px solid rgba(102,126,234,.12); box-shadow:0 18px 34px rgba(109,124,171,.08); }
.stp-banner { height:150px; background-size:cover; background-position:center; display:flex; justify-content:flex-end; padding:16px; }
.stp-bannerBtn { height:38px; padding:0 14px; border-radius:12px; display:inline-flex; align-items:center; gap:8px; color:#4f46e5; text-decoration:none; background:rgba(255,255,255,.92); font-weight:700; }
.stp-profileCard { padding:0 20px 20px; }
.stp-profileHead { margin-top:-68px; display:grid; grid-template-columns:140px minmax(0,1fr) auto; gap:18px; align-items:end; }
.stp-avatarWrap { position:relative; }
.stp-avatar { width:136px; height:136px; border-radius:50%; border:6px solid #fff; object-fit:cover; background:#fff; }
.stp-avatarEdit { position:absolute; right:6px; bottom:12px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#6f5bff; background:#fff; box-shadow:0 10px 20px rgba(111,91,255,.2); }
.stp-nameRow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.stp-nameRow h1 { margin:0; font-size:22px; font-weight:900; }
.stp-verified { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:#5c6cff; }
.stp-handleRow { margin-top:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:#667085; font-size:13px; font-weight:700; }
.stp-brandTag { padding:6px 10px; border-radius:999px; color:#5c47ff; background:rgba(92,71,255,.1); }
.stp-identity p { margin:10px 0 0; color:#475467; font-size:14px; line-height:1.6; }
.stp-metaRow { margin-top:12px; display:flex; gap:18px; flex-wrap:wrap; color:#667085; font-size:13px; }
.stp-metaRow span { display:inline-flex; align-items:center; gap:6px; }
.stp-profileActions { display:flex; gap:10px; }
.stp-btn { height:42px; padding:0 16px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-size:14px; font-weight:800; }
.stp-btnGhost { color:#344054; border:1px solid rgba(106,122,255,.14); background:#fff; }
.stp-btnIcon { width:42px; padding:0; color:#4f46e5; border:1px solid rgba(106,122,255,.14); background:#fff; }
.stp-followWrap .btn { border-radius:14px !important; }

.stp-statRow { margin-top:20px; padding-top:18px; border-top:1px solid rgba(102,126,234,.12); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.stp-statCard { min-height:74px; padding:14px; border-radius:18px; display:flex; align-items:center; gap:12px; }
.stp-statIcon { width:44px; height:44px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.72); }
.stp-statCard small { display:block; color:#667085; font-size:12px; }
.stp-statCard strong { display:block; margin-top:4px; font-size:18px; font-weight:900; }
.stp-statCard.is-violet { background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(255,255,255,.96)); }
.stp-statCard.is-mint { background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(255,255,255,.96)); }
.stp-statCard.is-blue { background:linear-gradient(135deg,rgba(59,130,246,.14),rgba(255,255,255,.96)); }
.stp-statCard.is-sky { background:linear-gradient(135deg,rgba(125,211,252,.2),rgba(255,255,255,.96)); }
.stp-statCard.is-pink { background:linear-gradient(135deg,rgba(255,77,143,.14),rgba(255,255,255,.96)); }

.stp-tabs { margin-top:18px; padding:0 6px; display:flex; gap:20px; border-bottom:1px solid rgba(102,126,234,.12); }
.stp-tab { padding:16px 0 12px; border:none; background:transparent; color:#475467; font-size:14px; font-weight:800; position:relative; }
.stp-tab em { margin-left:6px; padding:2px 6px; border-radius:999px; background:#eef2ff; font-style:normal; font-size:11px; }
.stp-tab.is-active { color:#4f46e5; }
.stp-tab.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:999px; background:#5c6cff; }

.stp-grid { margin-top:18px; display:grid; grid-template-columns:minmax(0,1.6fr) 320px; gap:18px; align-items:start; }
.stp-mainCol,.stp-sideCol { display:flex; flex-direction:column; gap:18px; }
.stp-card { padding:20px; border-radius:24px; border:1px solid rgba(102,126,234,.12); background:rgba(255,255,255,.92); box-shadow:0 18px 34px rgba(109,124,171,.08); }
.stp-cardHead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.stp-cardHead h2,.stp-cardHead h3 { margin:0; font-size:16px; font-weight:900; }
.stp-cardHead a { color:#5c47ff; text-decoration:none; font-size:13px; font-weight:800; }
.stp-about { margin:0; color:#475467; line-height:1.8; font-size:14px; }
.stp-tags { margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; }
.stp-tags span { padding:8px 12px; border-radius:999px; color:#5c47ff; background:rgba(92,71,255,.08); font-size:12px; font-weight:800; }
.stp-divider { margin:18px 0; height:1px; background:rgba(102,126,234,.12); }
.stp-achievements { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.stp-achItem { text-align:center; }
.stp-achItem img,.stp-achItem span { width:48px; height:48px; margin:0 auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#f59e0b; background:rgba(245,158,11,.12); overflow:hidden; }
.stp-achItem img { object-fit:cover; background:#fff; }
.stp-achItem strong { display:block; font-size:13px; }
.stp-achItem small { display:block; margin-top:4px; color:#667085; font-size:12px; }

.stp-storyList,.stp-activityList,.stp-fanList,.stp-statList { display:flex; flex-direction:column; gap:12px; }
.stp-storyRow { display:grid; grid-template-columns:48px minmax(0,1fr) 92px 92px 18px; gap:12px; align-items:center; text-decoration:none; color:inherit; }
.stp-storyRow img { width:48px; height:48px; border-radius:12px; object-fit:cover; }
.stp-storyMeta strong { display:block; font-size:15px; font-weight:800; }
.stp-storyMeta small { display:block; margin-top:4px; color:#667085; font-size:12px; }
.stp-storyStat { display:inline-flex; align-items:center; gap:6px; color:#475467; font-size:13px; font-weight:700; }
.stp-storyMore { color:#98a2b3; }

.stp-levelBox { display:flex; align-items:center; gap:16px; }
.stp-levelBadge { width:100px; height:100px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at center,#efeaff 0%,#d8cfff 65%,#c7b9ff 100%); color:#7c5cff; overflow:hidden; }
.stp-levelBadge img { width:82px; height:82px; object-fit:contain; }
.stp-levelMeta strong { display:block; font-size:28px; font-weight:900; }
.stp-levelMeta span { display:block; margin-top:6px; color:#667085; font-size:14px; }
.stp-levelBar { margin-top:18px; height:8px; border-radius:999px; background:rgba(92,71,255,.12); overflow:hidden; }
.stp-levelBar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5c6cff 0%,#7c3aed 100%); }
.stp-levelFoot { margin-top:10px; display:flex; align-items:center; justify-content:space-between; color:#667085; font-size:12px; font-weight:700; }
.stp-levelHint { margin-top:16px; padding:14px; border-radius:16px; color:#5c47ff; background:rgba(92,71,255,.08); font-size:13px; font-weight:700; text-align:center; }

.stp-chipBtn { height:32px; padding:0 12px; border:none; border-radius:12px; color:#475467; background:#f8faff; font-size:12px; font-weight:800; }
.stp-statLine { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; }
.stp-statLine span { color:#475467; font-size:14px; }
.stp-statLine strong { font-size:14px; font-weight:900; }
.stp-statLine small { color:#12b76a; font-size:12px; font-weight:800; }

.stp-fanRow { display:grid; grid-template-columns:18px 42px minmax(0,1fr) auto; gap:10px; align-items:center; }
.stp-fanRank { color:#667085; font-size:13px; font-weight:800; }
.stp-fanRow img,.stp-reviewUser img { width:42px; height:42px; border-radius:50%; object-fit:cover; }
.stp-fanMeta strong { display:block; font-size:14px; font-weight:800; }
.stp-fanMeta small { display:block; margin-top:2px; color:#667085; font-size:12px; }
.stp-fanValue { display:inline-flex; align-items:center; gap:4px; color:#2356f6; font-size:13px; font-weight:800; }

.stp-review { border-radius:20px; padding:18px; background:linear-gradient(180deg,rgba(124,92,255,.08),rgba(255,255,255,.95)); }
.stp-reviewQuote { color:#344054; line-height:1.8; font-size:15px; }
.stp-reviewStars { margin-top:16px; color:#f59e0b; letter-spacing:3px; }
.stp-reviewUser { margin-top:16px; display:flex; align-items:center; gap:10px; }
.stp-reviewUser strong { display:block; font-size:14px; }
.stp-reviewUser small { display:block; margin-top:2px; color:#667085; font-size:12px; }

.stp-activityRow { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; }
.stp-activityIcon { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.stp-activityIcon.is-chapter { color:#5c47ff; background:rgba(92,71,255,.1); }
.stp-activityIcon.is-gift { color:#2563eb; background:rgba(37,99,235,.1); }
.stp-activityIcon.is-comment { color:#10b981; background:rgba(16,185,129,.12); }
.stp-activityCopy strong { display:block; font-size:14px; font-weight:800; }
.stp-activityCopy small { display:block; margin-top:4px; color:#667085; font-size:12px; }
.stp-activityTime { color:#667085; font-size:12px; font-weight:700; }
.stp-empty { padding:16px; border-radius:16px; color:#667085; background:#fafbff; text-align:center; font-size:14px; }

@media (max-width: 1360px) {
  .stp-statRow { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .stp-achievements { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 1180px) {
  .stp-shell { grid-template-columns: 1fr; }
  .stp-topbar { flex-direction: column; align-items: stretch; }
  .stp-grid { grid-template-columns: 1fr; }
  .stp-profileHead { grid-template-columns: 1fr; align-items: start; margin-top: -40px; }
}

@media (max-width: 760px) {
  .stp-main, .stp-topbar { padding-left: 14px; padding-right: 14px; }
  .stp-topLeft, .stp-topRight { flex-wrap: wrap; }
  .stp-search { min-width: 0; width: 100%; }
  .stp-statRow { grid-template-columns: 1fr 1fr; }
  .stp-achievements { grid-template-columns: 1fr 1fr; }
  .stp-storyRow { grid-template-columns: 48px minmax(0,1fr); }
  .stp-storyStat, .stp-storyMore { display: none; }
}