body.fanfick-app { margin:0; background:#0d0d0f; }
body.fanfick-app header.pc,
body.fanfick-app .sidebar,
body.fanfick-app footer,
body.fanfick-app .floating-wrap { display:none !important; }
body.fanfick-app main { display:block; max-width:none; min-height:0; margin:0; }
body.fanfick-app main .content { display:block; min-width:0; }

body.fanfick-app .talk-page {
	max-width:480px; margin:0 auto; height:100vh; height:100svh; overflow:hidden;
	background:#0e0e11; border-left:1px solid #1c1c22; border-right:1px solid #1c1c22;
	display:flex; flex-direction:column;
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#e7e7ee;
}

@media (min-width:1000px) {
	body.fanfick-app { background:radial-gradient(900px 560px at 50% -8%, #16131f, #0a0a0d 62%); }
	body.fanfick-app .talk-page { box-shadow:0 0 60px rgba(0,0,0,.55); min-height:100vh; }
	body.fanfick-app.pc-deco .pc-shell .tp-bottomnav { display:none; }
	body.fanfick-app.pc-deco .pc-shell .talk-page .mypage-frame {
		height:auto; max-width:none; padding:0; overflow:visible;
		border:0; border-radius:0; background:none; box-shadow:none;
	}
}

.tp-top { position:sticky; top:0; z-index:5; display:flex; align-items:center; height:54px; padding:0 12px; background:#121215; border-bottom:1px solid #1c1c22; }
.tp-back { width:36px; height:36px; border:0; background:none; color:#cfcfd6; font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.tp-title { flex:1; text-align:center; font-size:16px; font-weight:800; color:#f1f1f6; letter-spacing:.3px; }
.tp-top .tp-logo { flex:1; text-align:center; font-size:18px; font-weight:900; color:#e9c46a; letter-spacing:1px; }
.tp-gear { width:36px; height:36px; border:0; background:none; color:#9a9aa3; font-size:18px; cursor:pointer; text-decoration:none; display:flex; align-items:center; justify-content:center; }
.tp-spacer { width:36px; flex-shrink:0; }
.tp-body { flex:1; overflow-y:auto; padding:18px 16px 30px; scrollbar-width:none; }
.tp-body::-webkit-scrollbar { display:none; }
.tp-body::-webkit-scrollbar { width:4px; }
.tp-body::-webkit-scrollbar-thumb { background:#2c2c33; border-radius:6px; }
.tp-body::-webkit-scrollbar-thumb:hover { background:#3a3a44; }
.tp-body::-webkit-scrollbar-track { background:transparent; }

.tp-bottomnav { flex:0 0 56px; height:56px; box-sizing:border-box; display:flex; border-top:1px solid #2c2c33; background:#1b1b1f; }
.tp-bottomnav a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#9a9aa2; font-size:11px; text-decoration:none; }
.tp-bottomnav a .bn-ico { font-size:19px; line-height:1; }
.tp-bottomnav a.on { color:#e9c46a; }

.me-hero { display:flex; align-items:center; gap:13px; }
.me-ava { width:62px; height:62px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,#8f86d6,#b9a7e6); overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; font-weight:800; }
.me-ava img { width:100%; height:100%; object-fit:cover; }

body.tier-emperor .me-ava { position:relative; }
body.tier-emperor .me-ava { box-shadow:0 0 0 2px #0e0e11, 0 0 0 4px #e9c46a, 0 0 18px rgba(233,196,106,.55); }
body.tier-emperor .me-ava::after {
	content:''; position:absolute; right:-4px; bottom:-4px; width:24px; height:24px;
	border-radius:50%;
	background:#15151b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9c46a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l4 3.5 5-6.5 5 6.5L21 8v9H3z'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E") center/13px 13px no-repeat;
	box-shadow:0 0 0 2px #0e0e11;
}
body.tier-emperor .me-ava::after { box-shadow:0 0 0 2px #0e0e11, 0 0 0 1px #e9c46a inset; }
body.tier-subscriber .me-ava { box-shadow:0 0 0 2px #0e0e11, 0 0 0 3px rgba(233,196,106,.45); }
.me-hero-meta { flex:1; min-width:0; }
.me-name-row { display:flex; align-items:center; gap:8px; }
.me-name { font-size:18px; font-weight:800; color:#fff; }
.me-tier { font-size:11px; font-weight:800; padding:3px 8px; border-radius:7px; }
.me-tier.emperor { background:rgba(124,108,240,.2); color:#b9aeff; }
.me-tier.subscriber { background:rgba(233,196,106,.1); color:#d7b765; border:1px solid rgba(233,196,106,.32); }
.me-tier.normal { background:rgba(255,255,255,.07); color:#aaa; }
.me-email { margin-top:3px; font-size:12px; color:#7e7e88; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.me-edit { flex-shrink:0; padding:7px 14px; border:1px solid #34343d; border-radius:10px; background:#1a1a20; color:#cfcfd6; font-size:12px; font-weight:700; text-decoration:none; }
.me-edit:active { transform:scale(.96); }

.me-stats { display:flex; gap:11px; margin-top:18px; }
.me-stat { flex:1; border-radius:15px; padding:14px 15px; text-align:left; cursor:pointer; font:inherit; }
.me-stat:active { transform:scale(.98); }
.me-stat-cta { margin-top:8px; font-size:11px; font-weight:700; color:#9a9aa3; }
.me-stat.flower .me-stat-cta { color:#d7b765; }
.me-stat.count  .me-stat-cta { color:#b3a7ff; }
.me-stat.flower { background:linear-gradient(160deg,#241d0f,#1a1710); border:1px solid #3a2f17; }
.me-stat.count  { background:linear-gradient(160deg,#181826,#13131d); border:1px solid #2a2a3d; }
.me-stat-label { display:flex; align-items:center; gap:6px; font-size:12px; color:#9a9aa3; font-weight:600; }
.me-stat.flower .me-stat-label { color:#d7b765; }
.me-stat.count  .me-stat-label { color:#b3a7ff; }
.me-stat-val { margin-top:7px; font-size:24px; font-weight:900; color:#fff; }
.me-stat-info { cursor:default; display:flex; flex-direction:column; justify-content:center; gap:9px; }
.me-stat-info:active { transform:none; }
.me-info-bal { display:flex; align-items:center; gap:7px; color:#d6d3e8; font-size:14px; font-weight:700; }
.me-info-bal .ic { width:15px; height:15px; vertical-align:-2px; }
.me-info-bal .mib-sep { color:#5a5a72; font-weight:400; }
.me-info-ref { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.mir-label { color:#8a86a0; font-size:11.5px; font-weight:600; }
.mir-code { font:inherit; font-size:13px; font-weight:800; letter-spacing:1px; color:#e9c46a; background:#221d0f; border:1px dashed #4a3f2a; border-radius:8px; padding:3px 9px; cursor:pointer; }
.mir-code:active { transform:scale(.97); }

.me-sec { margin-top:26px; }
.me-sec-title { font-size:15px; font-weight:800; color:#f1f1f6; }
.me-sec-desc { margin-top:4px; font-size:12px; color:#7e7e88; }

.grade-card { margin-top:13px; border-radius:16px; padding:16px; position:relative; }
.grade-card.emperor { background:linear-gradient(160deg,#241d10,#1a160d); border:1px solid #6b5526; }
.grade-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.grade-name { font-size:15px; font-weight:800; color:#fff; display:flex; align-items:center; gap:6px; }
.grade-price { font-size:14px; font-weight:800; color:#e9c46a; }
.grade-state { font-size:11px; font-weight:800; padding:4px 10px; border-radius:10px; background:rgba(255,255,255,.1); color:#cfcfd6; }
.grade-state.using { background:rgba(124,108,240,.22); color:#bcb1ff; }
.grade-perks { margin-top:9px; font-size:12.5px; color:#bdbdc7; line-height:1.7; }
.grade-perks b { color:#e9c46a; font-weight:800; }
.grade-btn { display:block; width:100%; margin-top:14px; border:0; border-radius:12px; padding:13px; background:linear-gradient(180deg,#ecc977,#e0b455); color:#241d07; font-size:14px; font-weight:800; cursor:pointer; text-align:center; }
.grade-btn:active { transform:scale(.985); }

.me-menu { margin-top:22px; border-radius:16px; overflow:hidden; border:1px solid #1f1f27; }
.me-menu a { display:flex; align-items:center; gap:12px; padding:15px 16px; background:#15151a; color:#e3e3ea; font-size:14px; font-weight:600; text-decoration:none; border-bottom:1px solid #1c1c22; }
.me-menu a:last-child { border-bottom:0; }
.me-menu a:active { background:#1c1c22; }
.me-menu .mm-ico { font-size:17px; width:22px; text-align:center; }
.me-menu .mm-go { margin-left:auto; color:#55555e; font-size:17px; }
.me-menu .ic-video { color:#4fc3d6; }
.me-menu .ic-receipt { color:#5b9dff; }
.me-menu .ic-heart { color:#ff5d7a; }
.me-menu .ic-bell { color:#ff8a4c; }
.me-menu .ic-help { color:#b3a4ff; }

@media (max-width:999px) {
	body.fanfick-app .talk-page { max-width:none; border:0; }
}