/* Desktop website shell; all mobile and admin styles remain independent. */
.desktop-section-heading,.desktop-sidebar,.desktop-rail,.desktop-page-title { display:none; }
@media (min-width: 1024px) {
  :root { --desktop-width:min(792px,calc(100vw - 280px)); --desktop-reading:var(--desktop-width); --desktop-nav:208px; --desktop-shell:calc(var(--desktop-nav) + 24px + var(--desktop-width)); --desktop-start:calc((100vw - var(--desktop-shell)) / 2); --desktop-content-left:calc(var(--desktop-start) + var(--desktop-nav) + 24px); }
  .view { position:fixed; inset:20px auto 20px var(--desktop-content-left); width:var(--desktop-width); max-width:none; min-height:0; height:calc(100dvh - 40px); overflow:hidden; border:1px solid var(--border-color); border-radius:22px; box-shadow:var(--shadow-soft); }
  .view.active { transform:none; animation:none; }
  #view-post-detail { min-height:0; }
  .main-header { position:relative; width:100%; max-width:none; margin:0; flex-shrink:0; background:var(--card-background); border:0; border-bottom:1px solid var(--border-color); transform:none!important; margin-bottom:0!important; }
  .header-inner { width:calc(100% - 48px); max-width:none; height:88px; padding:0; }
  .header-tabs,.header-brand { display:none; }
  .desktop-page-title { display:block; margin-right:auto; }
  .desktop-page-title h1 { font-size:20px; line-height:1.5; letter-spacing:.3px; }
  .desktop-page-title p { font-size:12px; color:var(--text-secondary); margin-top:3px; }
  .header-right { gap:12px; }
  .main-scroll { display:block; flex:1; min-height:0; width:100%; max-width:none; margin:0; padding:24px 24px 40px; border:0; overflow-y:auto; overflow-x:hidden; }
  .recommend-section,.discover-section,.subscribe-guide-section { width:100%; padding:0; }
  .recommend-section.active { display:block; }
  .rec-top-banner { position:static; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin:0 0 24px; }
  .banner-carousel { min-width:0; align-self:start; }
  .rec-top-card { display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:16px; padding:18px; margin:0; border-radius:16px; background-image:radial-gradient(ellipse at top right,rgba(91,124,250,.12),transparent 70%); }
  .rec-top-avatar { width:56px; height:56px; }
  .rec-top-name { font-size:18px; margin-bottom:4px; }
  .rec-top-tags { gap:8px; }
  .rec-top-fans { font-size:13px; margin-top:6px; }
  .rec-top-sub-btn { min-width:100px; min-height:40px; background:linear-gradient(135deg,#5B7CFA,#4F64E6); }
  .desktop-section-heading { display:flex; align-items:baseline; gap:14px; margin:0 0 18px; }
  .desktop-section-heading h2 { margin:0; font-size:18px; color:var(--text-primary); }
  .desktop-section-heading p { margin:0; font-size:13px; color:var(--text-secondary); }
  .recommend-list,.discover-section-list,.discover-list { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; padding:0; align-items:start; }
  .recommend-more { padding:28px 0 0; }
  .recommend-list .discover-card,.discover-section-list .discover-card,.discover-list .discover-card { min-width:0; margin:0; }
  .discover-card-header { padding:16px; gap:12px; }
  .discover-card-name { font-size:16px; }
  .discover-card-members { margin-top:4px; }
  .discover-search-bar { width:calc(100% - 48px); max-width:none; margin:0 auto 20px; height:46px; }
  .discover-search-float { display:none; }
  .subscribe-guide-section { max-width:var(--desktop-width); margin:0 auto; }
  .my-sub-list { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
  .my-subs-header,.my-subs-discover,.my-subs-svip-tip { grid-column:1/-1; }
  .my-sub-card { margin-bottom:0; }
  #view-main[data-section="creator"] .main-scroll { display:block; }
  .hero-section { grid-column:1/-1; grid-row:1; margin:0; }
  .hero-banner { aspect-ratio:2.4; max-height:320px; }
  .creator-info { grid-column:1; grid-row:2; padding:64px 0 0; }
  .subscribe-section { grid-column:1; grid-row:3; padding:20px 0; }
  .posts-section { min-width:0; padding-top:16px; }
  .post-list { grid-template-columns:minmax(0,1fr); gap:18px; }
  .post-card { min-width:0; }
  .post-list>p { grid-column:1/-1; }
  .detail-header,.account-header,.chat-header,.af-header,.pc-header,.chatroom-header { flex-shrink:0; width:100%; max-width:none!important; min-height:88px; margin:0; padding-inline:24px; background:var(--card-background); border-bottom:1px solid var(--border-color); }
  #view-discover .detail-header { max-width:var(--desktop-width)!important; padding:0 32px; }
  .detail-scroll,.settings-scroll,.likes-scroll,.account-body,.checkout-scroll,.af-scroll,.discover-scroll,.chat-list-body,.pay-success-body { width:100%; max-width:var(--desktop-reading)!important; min-height:0; flex:1!important; margin:0 auto; overflow-y:auto!important; padding-bottom:40px; scrollbar-gutter:stable; }
  .discover-scroll { max-width:var(--desktop-width)!important; padding:24px 32px 48px; }
  .chat-body { width:100%; max-width:var(--desktop-reading); flex:1; min-height:0; overflow-y:auto; padding:28px; border-left:1px solid var(--border-color); border-right:1px solid var(--border-color); }
  .chat-input-bar { width:100%; max-width:var(--desktop-reading); flex-shrink:0; padding:16px 24px; margin:0 auto; }
  .chatroom-header,.chatroom-input-bar { width:100%; max-width:var(--desktop-reading); margin:0 auto; flex-shrink:0; }
  .chatroom-header { min-height:72px; }
  .chatroom-body { width:100%; max-width:var(--desktop-reading); min-height:0; margin:0 auto; padding:28px; border-left:1px solid var(--border-color); border-right:1px solid var(--border-color); }
  .chatroom-input-bar { padding:16px 24px; }
  .chatroom-input { min-height:44px; }
  .chat-media-wrap img,.chat-media-wrap video { max-height:60vh; object-fit:contain; }
  #view-account .account-header { justify-content:flex-start; gap:16px; }
  #view-account .account-body { padding:24px 24px 40px; border:0; }
  .account-profile { padding:28px; margin-bottom:16px; border:1px solid var(--border-color); border-radius:20px; background:radial-gradient(ellipse at top right,rgba(139,107,211,.13),transparent 65%),var(--card-background); gap:20px; }
  .account-avatar { width:72px; height:72px; }
  .account-name { font-size:22px; }
  .account-profile { grid-template-columns:72px minmax(0,1fr) auto; }
  .account-stats { padding:24px 16px; }
  .account-stat-num { font-size:28px; }
  .account-grid-item { min-height:88px; padding:20px 24px; }
  .account-row-item { padding:20px 24px; }
  .account-creator-banner { padding:24px; }
  .account-section-hd { margin-top:28px; }
  .account-content-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .account-setting-item,.account-grid-item { transition:background .15s; }
  .account-setting-item:hover,.account-grid-item:hover { background:var(--bg-hover); }
  #view-private-custom .pc-body { width:100%; max-width:var(--desktop-reading); margin:auto; }
  .detail-media img,.detail-media video { max-height:75vh; object-fit:contain; }
  .modal-overlay { align-items:center; padding:24px; }
  .modal-overlay>.modal-sheet,.recharge-sheet,.promo-sheet,.pc-pay-sheet { max-height:calc(100dvh - 48px); overflow-y:auto; border-radius:24px; }
  .membership-page { width:100%; max-width:1060px; max-height:calc(100dvh - 48px); overflow-y:auto; }
  .membership-carousel { padding:24px; gap:24px; }
  .membership-card { width:calc(50% - 12px); max-width:460px; }
  .card-image { height:260px; }
  button,a,input,textarea,select { touch-action:manipulation; }
  button:focus-visible,a:focus-visible { outline:2px solid var(--primary-blue); outline-offset:3px; }
  .discover-card { border-radius:18px; box-shadow:none; }
  .discover-card:hover { border-color:var(--border-strong); }
  .discover-card-header { padding:18px 20px; }
  .discover-card-media { width:100%; max-height:540px; }
  .my-sub-item { min-height:96px; padding:20px 24px; }
  .my-subs-header { padding:28px; border-radius:20px; }
  .chatroom-body,.chat-body { border:0; background:var(--page-background); }
  .chatroom-input-bar,.chat-input-bar { border-top:1px solid var(--border-color); background:var(--card-background); }
  .chat-list-body { padding:12px 24px 32px; }
  .settings-scroll,.af-scroll { padding:24px; }
  .checkout-ui .checkout-scroll { max-width:580px!important; padding:28px; }
  .desktop-sidebar { display:flex; flex-direction:column; position:fixed; left:var(--desktop-start); top:32px; bottom:28px; width:var(--desktop-nav); z-index:2; overflow-y:auto; }
  .desktop-brand { display:flex; gap:12px; align-items:center; padding:8px 12px 36px; color:var(--text-primary); font-size:27px; font-weight:800; }
  .desktop-brand img { width:44px; height:44px; }
  .desktop-brand small { display:block; font-weight:400; font-size:11px; letter-spacing:1px; color:var(--text-secondary); margin-top:3px; }
  .desktop-nav-label { font-size:11px; color:var(--text-muted); letter-spacing:1px; padding:0 18px 12px; }
  .desktop-nav { display:flex; flex-direction:column; gap:8px; }
  .desktop-nav button { display:flex; align-items:center; gap:16px; min-height:56px; padding:0 18px; text-align:left; border-radius:14px; color:var(--text-secondary); font-size:16px; font-weight:500; transition:background .15s,color .15s; }
  .desktop-nav .material-icons-round { font-size:23px; }
  .desktop-nav button:hover,.desktop-history:hover,.desktop-theme:hover { background:var(--hover-background); color:var(--text-primary); }
  .desktop-nav button.is-active { color:var(--primary-blue); background:rgba(91,124,250,.12); font-weight:700; }
  .desktop-nav button.is-active::after { content:''; width:5px; height:5px; background:var(--primary-blue); border-radius:50%; margin-left:auto; }
  #desktopMessageBadge { width:7px; height:7px; background:var(--accent-pink); border-radius:50%; margin-left:auto; }
  #desktopMessageBadge[hidden] { display:none; }
  .desktop-sidebar-bottom { margin-top:auto; padding-top:36px; }
  .desktop-history,.desktop-theme { display:flex; align-items:center; width:100%; gap:12px; padding:14px 18px; color:var(--text-secondary); font-size:13px; border-radius:12px; }
  .desktop-history .material-icons-round,.desktop-theme .material-icons-round { font-size:19px; }
  .desktop-history .material-icons-round:last-child { margin-left:auto; }
  .desktop-identity { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:16px 10px; margin-top:12px; border-top:1px solid var(--border-color); }
  .desktop-user-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:rgba(91,124,250,.15); color:var(--primary-blue); font-weight:700; }
  .desktop-user-avatar img { width:100%; height:100%; object-fit:cover; }
  .desktop-user-copy { min-width:0; flex:1; }
  .desktop-user-copy strong { display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .desktop-user-copy small { display:block; color:var(--text-muted); font-size:10px; margin-top:4px; }
  .desktop-identity>.material-icons-round { font-size:20px; color:var(--text-secondary); }
  .desktop-rail { position:fixed; top:20px; bottom:20px; width:272px; left:calc(var(--desktop-content-left) + var(--desktop-width) + 24px); overflow-y:auto; flex-direction:column; gap:20px; }
  .desktop-search { display:flex; align-items:center; gap:10px; padding:16px; min-height:54px; border:1px solid var(--border-color); border-radius:14px; background:var(--card-background); text-align:left; color:var(--text-secondary); font-size:12px; }
  .desktop-search:hover { border-color:var(--primary-blue); }
  .desktop-search .material-icons-round { font-size:20px; }
  .desktop-member-card { position:relative; overflow:hidden; flex-shrink:0; padding:24px 20px 20px; border-radius:20px; background:radial-gradient(ellipse at top right,rgba(210,174,91,.22),transparent 65%),linear-gradient(135deg,#242433,#181c28); color:#f4e4bb; border:1px solid #514731; }
  .desktop-member-mark { display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:1.3px; font-weight:700; }
  .desktop-member-mark .material-icons-round { font-size:26px; color:#e3c784; }
  .desktop-member-card h2 { font-size:21px; line-height:1.5; margin:20px 0 10px; font-weight:700; }
  .desktop-member-card p { font-size:12px; line-height:1.9; color:#c1bba9; }
  .desktop-member-benefits { display:flex; gap:16px; margin:20px 0; font-size:10px; color:#d9c895; }
  .desktop-member-benefits span { display:flex; align-items:center; gap:5px; }
  .desktop-member-benefits .material-icons-round { font-size:16px; }
  #desktopMembershipButton { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; width:100%; background:linear-gradient(110deg,#f4dfae,#d9b879); color:#372917; border-radius:11px; font-size:12px; font-weight:700; }
  #desktopMembershipButton .material-icons-round { font-size:18px; }
  #desktopMembershipButton:disabled { opacity:.5; cursor:default; }
  /* Keep both arrow tracks reserved so the photo stays centered at either end. */
  .lightbox-overlay { display:grid; grid-template-columns:48px auto 48px; grid-template-rows:minmax(0,1fr); column-gap:24px; padding:60px 24px; }
  .lightbox-content { display:contents; }
  .lightbox-media { grid-column:2; grid-row:1; justify-self:center; width:auto; height:auto; max-width:calc(100vw - 192px); max-height:calc(100dvh - 120px); }
  .lightbox-arrow { position:static; grid-row:1; align-self:center; transform:none; }
  .lightbox-prev { grid-column:1; }
  .lightbox-next { grid-column:3; }
  .desktop-rail-card { padding:20px 16px; border:1px solid var(--border-color); background:var(--card-background); border-radius:18px; flex-shrink:0; }
  .desktop-rail-card h2 { font-size:14px; font-weight:700; }
  .desktop-rail-heading { display:flex; align-items:center; justify-content:space-between; margin:0 4px 14px; gap:6px; }
  .desktop-rail-heading>button { display:flex; align-items:center; gap:3px; font-size:11px; color:var(--primary-blue); }
  .desktop-rail-heading>button .material-icons-round { font-size:14px; }
  .desktop-creator { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:12px 4px; border-radius:10px; }
  .desktop-creator:hover { background:var(--hover-background); }
  .desktop-creator img { width:38px; height:38px; border-radius:50%; object-fit:cover; }
  .desktop-creator>span:not(.material-icons-round) { flex:1; min-width:0; }
  .desktop-creator strong { display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .desktop-creator small { display:block; font-size:10px; color:var(--text-secondary); margin-top:4px; }
  .desktop-creator>.material-icons-round { font-size:18px; color:var(--text-muted); }
  .desktop-rail-empty { font-size:12px; padding:14px 4px; color:var(--text-secondary); }
  .desktop-shortcuts h2 { margin:0 4px 12px; }
  .desktop-shortcuts button { display:flex; align-items:center; gap:10px; width:100%; padding:12px 4px; text-align:left; border-radius:10px; }
  .desktop-shortcuts button:hover { background:var(--hover-background); }
  .desktop-shortcuts button>.material-icons-round:first-child { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:rgba(139,107,211,.12); color:var(--accent-purple); font-size:20px; }
  .desktop-shortcuts button>span:nth-child(2) { flex:1; }
  .desktop-shortcuts strong { display:block; font-size:12px; font-weight:500; }
  .desktop-shortcuts small { display:block; font-size:10px; color:var(--text-muted); margin-top:4px; }
  .desktop-shortcuts button>.material-icons-round:last-child { color:var(--text-muted); font-size:18px; }
  .desktop-footer { font-size:11px; color:var(--text-muted); padding:0 8px 12px; line-height:1.8; }
  .desktop-footer>span { margin:0 8px; }
  .desktop-footer p { font-size:10px; margin-top:6px; }
  .desktop-footer button:hover { color:var(--primary-blue); }
  /* Keep wheel, touchpad and keyboard scrolling without visible scroll tracks. */
  html,body,.view,.view *,.modal-overlay,.modal-overlay *,.desktop-sidebar,.desktop-rail { scrollbar-width:none; -ms-overflow-style:none; scrollbar-gutter:auto; }
  html::-webkit-scrollbar,body::-webkit-scrollbar,.view::-webkit-scrollbar,.view *::-webkit-scrollbar,.modal-overlay::-webkit-scrollbar,.modal-overlay *::-webkit-scrollbar,.desktop-sidebar::-webkit-scrollbar,.desktop-rail::-webkit-scrollbar { display:none; width:0; height:0; }
}
@media (min-width:1440px) {
  :root { --desktop-shell:calc(var(--desktop-nav) + 48px + var(--desktop-width) + 272px); }
  .desktop-rail { display:flex; }
}
@media (min-width:1024px) and (max-height:780px) {
  .desktop-brand { padding-bottom:20px; }
  .desktop-nav { gap:4px; }
  .desktop-nav button { min-height:48px; }
  .desktop-sidebar-bottom { padding-top:20px; }
}