:root {
  --blloe-container: 100%;
  --blloe-mobile-pad: 12px;
  
  --bg-body: #fff;
  --bg-card: #fff;
  --bg-input: #f0f0f0;
  --bg-hover: #e8e8e8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-gutter: stable; overflow-anchor:none; }


a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg-body); color:#222;
  overflow-y: scroll;
  overflow-anchor:none;
}
body.dark {
  background:#111; color:#eee;
}
body.dark .site-header {
  background:#111; border-bottom-color:#222;
}
body.dark .site-header.header-glass {
  background:rgba(20,20,20,0.9);
}
body.dark .topbar { background:#111; }
body.dark .topbar-logo .logo-link { color:#f3f4f6; }
body.dark .logo-text { color:#f3f4f6; }
body.dark .logo-mark { background:#f3f4f6; color:#111; }
body.dark .topbar-publish { background:#f3f4f6; color:#111; }
body.dark .topbar-publish:hover { background:#fff; }
body.dark .login-btn { color:#d1d5db; }
body.dark .login-btn .iconfont { color:#d1d5db; }
body.dark .login-btn svg { color:#d1d5db; }
body.dark nav a { color:#d1d5db; }
body.dark nav a:hover { color:#ff4b6a; background:rgba(255,75,106,0.12); }
body.dark nav .current-menu-item > a,
body.dark nav .current-menu-ancestor > a {
  color:#ff4b6a; background:rgba(255,75,106,0.16);
}
body.dark nav .menu-item-has-children > a::after { opacity:0.7; }
body.dark nav ul ul {
  background:#171717; border-color:#2a2a2a; box-shadow:0 14px 30px rgba(0,0,0,0.4);
}
body.dark nav ul ul::before {
  background:#171717; border-left-color:#2a2a2a; border-top-color:#2a2a2a;
}
body.dark .icon-btn:hover { background:#222; color:#ff4b6a; }
body.dark .login-btn:hover { border-color:rgba(255,75,106,0.35); background:rgba(255,75,106,0.12); color:#ff4b6a; }
body.dark .card { background:transparent; }
body.dark .card-inner { background:#181818; border-color:#222; box-shadow:none; }
body.dark .card-title { color:#e5e7eb; }
body.dark .card-excerpt { color:#9aa3af; }
body.dark .card-meta-row { color:#9aa3af; }
body.dark .grid-header,
body.dark .meta-tags,
body.dark .card-meta {
  color:#aaa;
}
body.dark .login-btn {
  background:rgba(40,40,40,0.9); color:#ddd; border-color:#333;
}


body.dark .post-author-meta { color:#9aa3af; }
body.dark .post-author-name { color:#e5e7eb; }
body.dark .post-title { color:#f3f4f6; }
body.dark .post-content { color:#d1d5db; }
body.dark .post-content a { color:#ff7a92; border-bottom-color:rgba(255,122,146,0.4); }
body.dark .post-content a:hover { color:#ff4b6a; border-bottom-color:#ff4b6a; }
body.dark .post-content a:visited { color:#ff6f89; }
body.dark .post-breadcrumbs { color:#8b93a1; }
body.dark .post-breadcrumbs a { color:#8b93a1; }
body.dark .post-breadcrumbs a:hover { color:#ff4b6a; }
body.dark .post-breadcrumbs__sep { color:#444; }
body.dark .post-breadcrumbs__current { color:#d1d5db; }
body.dark .section-title { color:#e5e7eb; }
body.dark .related-card { background:#1a1a1a; }
body.dark .related-title { color:#d1d5db; }
body.dark .post-tag { background:#222; color:#9aa3af; }
body.dark .post-tag svg { color:#666; }
body.dark .post-tag:hover { background:#2a2a2a; color:#ff4b6a; }
body.dark .post-tag:hover svg { color:#ff4b6a; }
body.dark .post-related,
body.dark .post-comments { border-top-color:#222; }


body.dark .blloe-comments__title { color:#f3f4f6; }
body.dark .blloe-comment__author { color:#f3f4f6; }
body.dark .blloe-comment__content { color:#d1d5db; }
body.dark .blloe-comment__replying { color:#9aa3af; }
body.dark .blloe-comments__divider { background:#222; }
body.dark .blloe-comments__summary { color:#9aa3af; }
body.dark .blloe-comments__count { color:#e5e7eb; }
body.dark .blloe-comments .comment-list > li.depth-1 + li.depth-1 { border-top-color:#222; }
body.dark .blloe-comment__author { color:#e5e7eb; }
body.dark .blloe-comment__badge { background:rgba(255,75,106,0.18); color:#ff98aa; }
body.dark .blloe-comment__badge--pin { background:rgba(245,158,11,0.2); color:#fbbf24; }
body.dark .blloe-comment__more-btn { color:#9aa3af; }
body.dark .blloe-comment__more-menu { background:#15181d; border-color:#2a2f36; box-shadow:0 10px 24px rgba(0,0,0,0.35); }
body.dark .blloe-comment__more-item { color:#e5e7eb; }
body.dark .blloe-comment__more-item:hover { background:#1f232a; }
body.dark .blloe-comments .comment-list .children::before { background:#2a2a2a; }
body.dark .blloe-comment__avatar img,
body.dark .blloe-comment-form__avatar img { background:#222; }
body.dark .blloe-comment-form__user { color:#9aa3af; }

body.dark .post-comments #commentform input[type="text"],
body.dark .post-comments #commentform input[type="email"],
body.dark .post-comments #commentform input[type="url"],
body.dark .post-comments #commentform textarea {
  background:#1b1b1b;
  color:#e5e7eb;
}
body.dark .post-comments #commentform input::placeholder,
body.dark .post-comments #commentform textarea::placeholder { color:#6b7280; }
body.dark .post-comments #commentform input[type="text"]:focus,
body.dark .post-comments #commentform input[type="email"]:focus,
body.dark .post-comments #commentform input[type="url"]:focus,
body.dark .post-comments #commentform textarea:focus {
  background:#111;
}
body.dark .blloe-reply-banner { background:#1f2126; border-color:#2a2f36; color:#cbd5e1; }
body.dark .blloe-comments__empty p { color:#9aa3af; }


body.dark .sidebar-card { background:#181818; box-shadow:none; }
body.dark .sidebar-title { color:#e5e7eb; }
body.dark .post-sidebar .sidebar-card a { color:#d1d5db; }
body.dark .post-sidebar .sidebar-card .tagcloud a { background:#222; color:#cbd5e1; }


body.dark .login-modal__shell { background:#1a1a1a; }
body.dark .login-modal__main { background:#1a1a1a; }
body.dark .login-modal__close { color:#aaa; }
body.dark .login-modal__close:hover { color:#fff; }
body.dark .login-modal__title { color:#f3f4f6; }
body.dark .login-modal__head-link { color:#9aa3af; }
body.dark .login-modal__head-link:hover { color:#ff4b6a; }
body.dark .login-modal__subtitle { color:#cbd5e1; }
body.dark .login-modal__subtitle a { color:#ff4b6a; }
body.dark .login-modal__tabs { border-bottom-color:#333; }
body.dark .login-modal__tab { color:#888; }
body.dark .login-modal__tab.is-active { color:#e5e7eb; }
body.dark .login-modal__qrcode-box { background:#252525; box-shadow:0 0 0 1px #333 inset; }
body.dark .login-modal__body label { color:#999; }
body.dark .login-modal__body input[type="text"],
body.dark .login-modal__body input[type="password"],
body.dark .login-modal__body input[type="email"] { background:#252525; border-color:#333; color:#e5e7eb; }
body.dark .login-modal__body input[type="text"]:focus,
body.dark .login-modal__body input[type="password"]:focus,
body.dark .login-modal__body input[type="email"]:focus { background:#2a2a2a; border-color:#ff4b6a; }
body.dark .login-modal__code-btn { background:#252525; border-color:#333; color:#bbb; }
body.dark .login-modal__code-btn:hover { border-color:#ff4b6a; color:#ff4b6a; }
body.dark .login-modal__body .login-remember label { color:#888; }
body.dark .login-modal__body .login-remember input[type="checkbox"] { border-color:#555; }
body.dark .login-modal__links a { color:#888; }
body.dark .login-modal__links a:hover { color:#ff4b6a; }
body.dark .login-modal__other { border-top-color:#333; color:#888; }
body.dark .login-modal__other-line::before,
body.dark .login-modal__other-line::after { background:#333; }
body.dark .login-modal__oauth-icon { background:#252525; color:#888; }
body.dark .login-modal__oauth-icon:hover { background:rgba(255,75,106,0.12); color:#ff4b6a; }
body.dark .login-modal__tips a { color:#9aa3af; }
body.dark .login-modal__tips a:hover { color:#ff4b6a; }
a { color:inherit; text-decoration:none; }
.site-header {
  position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #eee; transition:background 0.2s ease, backdrop-filter 0.2s ease, border-color 0.2s ease;
}
.site-header.header-glass {
  background:rgba(255,255,255,0.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.topbar { background:#fff; }
.topbar-inner {
  max-width:var(--blloe-container); margin:0 auto; display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr);
  align-items:center; gap:14px; padding:10px 24px; min-height:64px;
}
.topbar-logo .logo-link { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:1px; color:#111; }
.topbar-logo img { max-height:30px; width:auto; display:block; }
.topbar-logo .logo-icon { width:28px; height:28px; border-radius:6px; object-fit:cover; }
.topbar-logo { min-width:0; justify-self:start; }
.logo-mark { width:28px; height:28px; border-radius:50%; background:#111; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.logo-text { font-size:16px; }

.topbar-search{position:relative; width:100%; max-width:520px; justify-self:center;}
.topbar-searchbar{
  display:flex; align-items:center; gap:8px; width:100%;
  height:40px; padding:0 12px 0 16px; border-radius:999px; background:#f6f6f6; border:1px solid #eee;
}
.topbar-searchbar-input{
  flex:1; border:none; background:transparent; color:#555; font-size:14px; outline:none; padding:0; min-width:0;
}
.topbar-searchbar-input::placeholder{color:#b0b0b0}
.topbar-searchbar-btn{
  width:30px; height:30px; border:none; background:transparent; color:#777; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.topbar-searchbar-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.topbar-searchbar-image{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#777;
}
.topbar-searchbar-image svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.topbar-searchbar:hover{background:#f1f1f1;border-color:#e8e8e8}
.topbar-searchbar-results{
  position:absolute; left:0; right:0; top:calc(100% + 8px);
  background:#fff; border:1px solid #eee; border-radius:14px; padding:10px;
  box-shadow:0 16px 40px rgba(0,0,0,0.12); display:none; max-height:60vh; overflow:auto;
}
.topbar-searchbar-results.is-active{display:block;}
.topbar-searchbar-results .search-results-title{font-size:14px; margin:2px 0 10px;}
.topbar-searchbar-results .search-results-list{display:flex; flex-direction:column; gap:10px;}
.topbar-searchbar-results .search-result-item{border-radius:12px; padding:10px;}
.topbar-search-btn{
  display:none; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px;
  border:1px solid #eee; background:#fff; color:#555; cursor:pointer;
}
.topbar-search-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.dark .topbar-searchbar{background:#1a1a1a;border-color:#2a2a2a}
body.dark .topbar-searchbar-input{color:#e5e7eb}
body.dark .topbar-searchbar-input::placeholder{color:#6b7280}
body.dark .topbar-searchbar-btn{color:#9aa3af}
body.dark .topbar-searchbar:hover{background:#202020}
body.dark .topbar-searchbar-image{color:#9aa3af}
body.dark .topbar-searchbar-results{background:#151515;border-color:#2a2a2a;box-shadow:0 16px 40px rgba(0,0,0,0.45)}
body.dark .topbar-search-btn{background:#151515;border-color:#2a2a2a;color:#9aa3af}
body.dark .topbar-search-btn:hover{background:#1f1f1f}


.blloe-auth-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:1;
  vertical-align:middle;
}


.blloe-vip-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 6px;
  margin-left:6px;
  font-size:11px;
  line-height:1;
  font-weight:600;
  border-radius:999px;
  background:rgba(245, 158, 11, 0.18);
  color:#b45309;
  white-space:nowrap;
}
body.dark .blloe-vip-badge{
  background:rgba(245, 158, 11, 0.2);
  color:#fbbf24;
}
.note-card__avatar .blloe-auth-badge,
.post-list-avatar .blloe-auth-badge,
.blloe-comment__avatar .blloe-auth-badge,
.post-author-avatar .blloe-auth-badge{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:14px;
  height:14px;
  border-radius:50%;
  box-shadow:0 0 0 2px var(--bg-body);
}
.note-card__avatar .blloe-auth-badge,
.post-list-avatar .blloe-auth-badge{
  width:10px;
  height:10px;
  right:-1px;
  bottom:-1px;
  box-shadow:0 0 0 1px var(--bg-body);
}
.post-author-avatar .blloe-auth-badge{ width:16px; height:16px; }
.post-detail-comments .blloe-comment__avatar .blloe-auth-badge{ width:12px; height:12px; }
.blloe-auth-trigger {
  cursor:pointer;
}
.blloe-auth-badge__svg {
  width:100%;
  height:100%;
  display:block;
}
.blloe-auth-badge:focus {
  outline:none;
}
.blloe-auth-badge:focus-visible {
  outline:2px solid var(--auth-badge-color, #FF4B6A);
  outline-offset:2px;
  border-radius:999px;
}
.blloe-auth-modal {
  position:fixed;
  inset:0;
  z-index:10060;
  display:none;
}
.blloe-auth-modal.is-open {
  display:block;
}
.blloe-auth-modal__backdrop {
  position:absolute;
  inset:0;
  background:rgba(15, 23, 42, 0.45);
}
.blloe-auth-modal__dialog {
  position:relative;
  margin:12vh auto 0;
  width:min(560px, 92vw);
  background:#ffffff;
  border-radius:14px;
  border:1px solid #e6eefc;
  box-shadow:0 24px 60px rgba(15, 23, 42, 0.25);
  overflow:hidden;
}
.blloe-auth-modal__hero {
  position:relative;
  background:linear-gradient(180deg, #eef5ff 0%, #e7f0ff 100%);
  padding:20px 24px 22px;
  text-align:center;
}
.blloe-auth-modal__hero::before,
.blloe-auth-modal__hero::after {
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  background:rgba(255,255,255,0.6);
  z-index:0;
}
.blloe-auth-modal__hero::before {
  top:-70px;
  left:-30px;
}
.blloe-auth-modal__hero::after {
  bottom:-90px;
  right:-40px;
}
.blloe-auth-modal__badge {
  position:relative;
  z-index:1;
  width:54px;
  height:54px;
  margin:0 auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.blloe-auth-modal__badge svg {
  width:100%;
  height:100%;
}
.blloe-auth-modal__hero-title {
  position:relative;
  z-index:1;
  margin:0;
  font-size:20px;
  font-weight:700;
  color:#4f6ef7;
}
.blloe-auth-modal__content {
  padding:18px 22px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.blloe-auth-modal__intro {
  margin:0;
  font-size:13px;
  color:#6b7280;
  line-height:1.6;
}
.blloe-auth-modal__desc {
  margin:0;
  font-size:14px;
  color:#6b7280;
  line-height:1.6;
}
.blloe-auth-modal__time {
  font-size:12px;
  color:#9ca3af;
}
.blloe-auth-modal__close {
  position:absolute;
  right:12px;
  top:12px;
  width:32px;
  height:32px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,0.9);
  color:#6b7280;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
}
.blloe-auth-modal__close:hover {
  background:rgba(15, 23, 42, 0.08);
}
.blloe-auth-modal__close svg {
  width:18px;
  height:18px;
}
body.blloe-auth-modal-open {
  overflow:hidden;
}
body.dark .blloe-auth-modal__dialog {
  background:#151515;
  border-color:#1f2937;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
body.dark .blloe-auth-modal__hero {
  background:linear-gradient(180deg, #1d2433 0%, #19202e 100%);
}
body.dark .blloe-auth-modal__hero::before,
body.dark .blloe-auth-modal__hero::after {
  background:rgba(255,255,255,0.06);
}
body.dark .blloe-auth-modal__hero-title {
  color:#7aa2ff;
}
body.dark .blloe-auth-modal__intro,
body.dark .blloe-auth-modal__desc {
  color:#9aa3af;
}
body.dark .blloe-auth-modal__time {
  color:#6b7280;
}
body.dark .blloe-auth-modal__close {
  color:#cbd5f5;
  background:rgba(15, 23, 42, 0.6);
}
body.dark .blloe-auth-modal__close:hover {
  background:rgba(15, 23, 42, 0.8);
}

.topbar-nav { flex:1; display:flex; justify-content:center; min-width:0; }
.topbar-nav ul { list-style:none; display:flex; align-items:center; gap:6px; font-size:14px; color:#555; }
.topbar-nav ul li { position:relative; }
.topbar-nav ul ul {
  list-style:none; position:absolute; top:100%; left:0; min-width:180px; padding:8px; margin-top:10px;
  background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:12px; box-shadow:0 14px 30px rgba(0,0,0,0.14);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index:30;
}
.topbar-nav ul ul li { width:100%; }
.topbar-nav ul ul a { height:auto; padding:8px 10px; border-radius:10px; font-size:13px; color:#555; width:100%; }
.topbar-nav ul li:hover > ul { opacity:1; visibility:visible; transform:translateY(0); }

.topbar-actions { display:flex; align-items:center; gap:10px; justify-self:end; min-width:0; }
.topbar-publish {
  display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:18px; background:#111; color:#fff; font-size:13px;
}
.topbar-publish:hover { background:#222; }
.topbar-drawer-toggle{
  display:none; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border-radius:10px;
  border:1px solid #eee; background:#fff; color:#555; cursor:pointer;
}
.topbar-drawer-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.topbar-drawer-toggle:hover{background:#f5f5f5}
body.dark .topbar-drawer-toggle{background:#151515;border-color:#2a2a2a;color:#9aa3af}
body.dark .topbar-drawer-toggle:hover{background:#1f1f1f}
nav ul ul ul { left:100%; top:0; margin-top:0; margin-left:8px; }
nav ul ul::before {
  content:""; position:absolute; top:-6px; left:18px; width:10px; height:10px;
  background:#fff; border-left:1px solid rgba(0,0,0,0.06); border-top:1px solid rgba(0,0,0,0.06);
  transform:rotate(45deg);
}
nav ul ul ul::before { left:12px; top:14px; }
nav ul ul li + li { margin-top:4px; }
nav ul ul a:hover { background:rgba(255,75,106,0.08); color:#ff4b6a; }
nav a {
  display:inline-flex; align-items:center; height:36px; padding:0 12px; border-radius:10px; color:#555; font-weight:500; transition:color 0.15s ease, background 0.15s ease;
}
nav .menu-item-has-children > a::after {
  content:""; display:inline-block; margin-left:6px; width:6px; height:6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:0.6;
}
nav .menu-item-has-children:hover > a::after { opacity:1; }
nav a:hover { color:#ff4b6a; background:rgba(255,75,106,0.08); }
nav .current-menu-item > a,
nav .current-menu-ancestor > a {
  color:#ff4b6a; background:rgba(255,75,106,0.12);
}
.nav-actions { display:flex; align-items:center; gap:10px; font-size:13px; color:#888; min-width:152px; justify-content:flex-end; }
.login-avatar { width:26px; height:26px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.login-avatar img { width:100%; height:100%; border-radius:50%; display:block; }
.login-user-name { display:none; }
.nav-user { position:relative; }
.nav-user-menu {
  position:absolute;
  right:0;
  top:42px;
  min-width:200px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,0.16);
  padding:10px;
  font-size:14px;
  color:#555;
  display:none;
}
.nav-user.open .nav-user-menu { display:block; }
.nav-user-menu a {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  white-space:nowrap;
  color:inherit;
}
.nav-user-menu a:hover { background:#f5f5f5; }
.nav-user-badge{
  margin-left:auto;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  line-height:18px;
  text-align:center;
}
.nav-user-divider{
  height:1px;
  background:#eee;
  margin:6px 6px;
  border-radius:999px;
}
body.dark .nav-user-menu { background:#181818; color:#d1d5db; box-shadow:0 18px 40px rgba(0,0,0,0.5); }
body.dark .nav-user-menu a:hover { background:#222; }
body.dark .nav-user-divider{ background:#2a2a2a; }
.icon-btn {
  width:36px; height:36px; border-radius:10px; border:none; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background:rgba(0,0,0,0.04); transform:translateY(-1px); color:#ff4b6a; }
.icon-btn .iconfont { font-size:20px; line-height:1; }
.icon-btn.theme { background:transparent; border:none; }
.icon-btn.theme .iconfont { color:#ffca28; }
.login-btn {
  height:36px; border-radius:10px; border:1px solid transparent; background:transparent; color:#555; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0 10px; box-shadow:none; transition:border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.login-btn:hover { border-color:rgba(255,75,106,0.3); background:rgba(255,75,106,0.08); color:#ff4b6a; }
.login-btn .login-text { display:none; }
.login-btn .iconfont { display:block; font-size:20px; }
.login-btn svg { display:block; width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
main { max-width:var(--blloe-container); margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px; }
.mobile-drawer { position:fixed; inset:0; z-index:30; pointer-events:none; }
.mobile-drawer__overlay { position:absolute; inset:0; background:rgba(0,0,0,0.25); opacity:0; transition:opacity 0.25s ease; }
.mobile-drawer__panel {
  position:absolute; top:0; right:0; width:260px; max-width:85%; height:100%;
  background:#fff; box-shadow:-4px 0 16px rgba(0,0,0,0.15); transform:translateX(100%);
  transition:transform 0.25s ease; padding:16px 18px; display:flex; flex-direction:column; gap:12px;
}
.mobile-drawer__title { font-size:14px; color:#666; }
.mobile-more-list { display:flex; flex-direction:column; gap:8px; }
.mobile-more-item { font-size:15px; color:#444; padding:8px 10px; border-radius:10px; }
.mobile-more-item:hover { background:#f5f5f5; }
.mobile-more-theme { display:flex; flex-direction:column; gap:8px; }
.mobile-more-title { font-size:13px; color:#888; }
.mobile-more-actions { display:flex; gap:8px; }
.mobile-more-actions .js-theme-toggle {
  flex:1; height:34px; border-radius:10px; border:1px solid #eee; background:#fff; color:#555; cursor:pointer;
}
.mobile-more-actions .js-theme-toggle.is-active { background:#111; color:#fff; border-color:#111; }
body.dark .mobile-drawer__panel { background:#151515; }
body.dark .mobile-drawer__title { color:#9aa3af; }
body.dark .mobile-more-item { color:#d1d5db; }
body.dark .mobile-more-item:hover { background:#1f1f1f; }
body.dark .mobile-more-actions .js-theme-toggle { background:#1f1f1f; border-color:#2a2a2a; color:#9aa3af; }
body.dark .mobile-more-actions .js-theme-toggle.is-active { background:#fff; color:#111; border-color:#fff; }
.mobile-drawer.open { pointer-events:auto; }
.mobile-drawer.open .mobile-drawer__overlay { opacity:1; }
.mobile-drawer.open .mobile-drawer__panel { transform:translateX(0); }
.mobile-tabbar { position:fixed; left:0; right:0; bottom:0; z-index:25; background:#fff; border-top:1px solid #f0f0f0; display:none; transition:transform 0.2s ease, opacity 0.2s ease; }
.mobile-tabbar.is-hidden { transform:translateY(100%); opacity:0; pointer-events:none; }
.mobile-tabbar__inner { max-width:var(--blloe-container); margin:0 auto; padding:8px 16px 10px; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:4px; }
.mobile-tabbar__item { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; color:#9aa3af; text-decoration:none; padding:6px 0; justify-content:center; }
.mobile-tabbar__item.is-text-only { gap:0; padding-top:12px; padding-bottom:12px; }
.mobile-tabbar__item:hover,
.mobile-tabbar__item:active,
.mobile-tabbar__item:focus { color:inherit; background:transparent; }
.mobile-tabbar__item.is-active:hover,
.mobile-tabbar__item.is-active:active,
.mobile-tabbar__item.is-active:focus { color:#9aa3af; }
.mobile-tabbar__icon { font-size:20px; line-height:1; color:currentColor; }
.mobile-tabbar__icon i { display:inline-block; font-size:inherit; line-height:1; }
.mobile-tabbar__badge{
  position:absolute;
  top:2px;
  left:50%;
  right:auto;
  transform: translate(8px, -45%);
  min-width:16px;
  height:16px;
  padding:0 4px;
  background:#ff4b6a;
  color:#fff;
  font-size:10px;
  font-weight:600;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.mobile-tabbar__plus { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; background:#e5e7eb; color:#6b7280; font-size:20px; line-height:1; box-shadow:none; }
.mobile-tabbar__text { line-height:1; }
.mobile-tabbar__item.is-active { color:#9aa3af; }
.mobile-tabbar__item--follow,
.mobile-tabbar__item--follow.is-active { color:#9aa3af; }
.mobile-tabbar__item.is-center .mobile-tabbar__icon { width:42px; height:42px; border-radius:999px; background:#e5e7eb; color:#6b7280; display:flex; align-items:center; justify-content:center; font-size:18px; margin-top:-10px; box-shadow:none; }
.mobile-tabbar__item.is-center .mobile-tabbar__text { margin-top:2px; }
body.dark .mobile-tabbar { background:#111; border-top-color:#222; }
body.dark .mobile-tabbar__item { color:#7f8794; }
body.dark .mobile-tabbar__item.is-active { color:#7f8794; }
body.dark .mobile-tabbar__item--follow,
body.dark .mobile-tabbar__item--follow.is-active { color:#7f8794; }
body.dark .mobile-tabbar__plus { background:#1f1f1f; color:#9aa3af; }
body.dark .mobile-tabbar__item.is-center .mobile-tabbar__icon { background:#1f1f1f; color:#9aa3af; box-shadow:none; }
@media (max-width:980px){
  .topbar-inner { display:flex; }
  .mobile-tabbar { display:block; }
  main { padding-bottom:calc(40px + 70px); }
  .topbar-publish { display:none; }
  .topbar-drawer-toggle { display:inline-flex; }
  .topbar-search { display:none; }
  .topbar-search-btn { display:inline-flex; }
  .topbar-actions { margin-left:auto; }
  .topbar-search-btn,
  .topbar-drawer-toggle,
  .topbar-actions .login-btn {
    width:40px; height:40px; border-radius:999px; border:none; background:transparent; color:#6b7280; box-shadow:none; padding:0;
  }
  .topbar-search-btn svg,
  .topbar-drawer-toggle svg,
  .topbar-actions .login-btn svg {
    width:20px;
    height:20px;
  }
  .topbar-search-btn:hover,
  .topbar-drawer-toggle:hover,
  .topbar-actions .login-btn:hover {
    background:transparent; color:#6b7280;
  }
  body.dark .topbar-search-btn,
  body.dark .topbar-drawer-toggle,
  body.dark .topbar-actions .login-btn {
    color:#9aa3af;
  }
  body.dark .topbar-search-btn:hover,
  body.dark .topbar-drawer-toggle:hover,
  body.dark .topbar-actions .login-btn:hover {
    background:transparent; color:#9aa3af;
  }
}
main { margin-top:14px; margin-bottom:40px; padding-top:0; padding-bottom:40px; }
main.has-home-bottom{ margin-bottom:0; padding-bottom:0; }
.content { flex:1 1 auto; }
.grid-header { display:flex; align-items:center; justify-content:space-between; margin:12px 0 18px; font-size:14px; color:#888; }
.home-widget-area,
.home-content-widgets { display:flex; flex-direction:column; gap:18px; margin:0 0 18px; }
.wall-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; width:100%; }
.post-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.post-grid[data-cols="2"] { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.post-grid[data-cols="4"] { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.post-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.post-list-item { background:var(--bg-card); border-radius:16px; overflow:hidden; border:1px solid #f0f0f0; box-shadow:0 8px 20px rgba(0,0,0,0.04); transition:transform 0.18s ease, box-shadow 0.18s ease; }
.post-list-item:hover { transform:none; box-shadow:none; }
body.dark .post-list-item:hover { box-shadow:none; }
.post-list-link { display:grid; grid-template-columns:180px 1fr; gap:16px; color:inherit; text-decoration:none; align-items:stretch; padding:14px; }
.post-list-item--no-thumb .post-list-link { grid-template-columns:1fr; }
.post-list-thumb { border-radius:12px; overflow:hidden; background:var(--bg-input); align-self:center; min-height:120px; aspect-ratio:4/3; }
.post-list-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.post-list-body { min-width:0; display:flex; flex-direction:column; gap:8px; }
.post-list-title { font-size:16px; font-weight:600; color:#222; margin:0; line-height:1.4; }
.post-list-excerpt { font-size:13px; color:#777; margin:0; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-list-meta { font-size:12px; color:#9aa3af; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }
.post-list-author { display:flex; align-items:center; gap:8px; color:#666; min-width:0; }
.post-list-avatar { position:relative; width:24px; height:24px; border-radius:50%; overflow:visible; background:#f2f2f2; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.post-list-avatar img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.post-list-author-name { font-size:12px; color:#666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }
.post-list-stats { display:flex; align-items:center; gap:10px; white-space:nowrap; color:#999; }
.post-list-link:hover .post-list-title { color:#ff4b6a; }
body.dark .post-list-item { background:#161616; border-color:#222; box-shadow:none; }
body.dark .post-list-title { color:#e5e7eb; }
body.dark .post-list-excerpt { color:#9aa3af; }
body.dark .post-list-meta,
body.dark .post-list-author,
body.dark .post-list-author-name,
body.dark .post-list-stats { color:#6b7280; }
body.dark .post-list-avatar { background:#1f1f1f; }

.wall-grid .card { margin:0; border:none; border-radius:0; background:transparent; overflow:hidden; }
.wall-grid .card-link { display:block; color:inherit; text-decoration:none; }
.wall-grid .card,
.wall-grid .card-link,
.wall-grid .card-link *{ -webkit-tap-highlight-color:transparent; }
.wall-grid .card:active,
.wall-grid .card:focus-within,
.wall-grid .card-link:active,
.wall-grid .card-link:focus{ box-shadow:none; outline:none; transform:none; }
.post-list-link,
.post-list-link *{ -webkit-tap-highlight-color:transparent; }
.post-list-item:active,
.post-list-item:focus-within,
.post-list-link:active,
.post-list-link:focus{ box-shadow:none; outline:none; transform:none; }
.post-grid .card,
.post-grid .card-link,
.post-grid .card-link *{ -webkit-tap-highlight-color:transparent; }
.post-grid .card:active,
.post-grid .card:focus-within,
.post-grid .card-link:active,
.post-grid .card-link:focus{ box-shadow:none; outline:none; transform:none; }
@media (min-width:768px) {
  .wall-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
}
@media (min-width:1024px) {
  .wall-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
}
@media (max-width:980px) {
  .wall-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
}
@media (max-width:460px) {
  .wall-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
}
.note-card { overflow:hidden; cursor:pointer; width:100%; box-sizing:border-box; }
.note-card__media { position:relative; width:100%; aspect-ratio:3/4; background:#f5f5f5; border-radius:6px; overflow:hidden; }
body.dark .note-card__media { background:#151515; }
.note-card__bg { position:absolute; top:-10%; left:-10%; width:120%; height:120%; object-fit:cover; filter:blur(20px); transform:scale(1.1); opacity:.6; }
.note-card__image { position:relative; width:100%; height:100%; object-fit:contain; display:block; z-index:1; }
.note-card__badge { position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:4px; background:rgba(0,0,0,.5); color:#fff; font-size:11px; padding:2px 6px; border-radius:999px; z-index:2; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.note-card__badge svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.note-card__badge-text { font-size:11px; line-height:1; }
.note-card__badge--video svg { fill:currentColor; stroke:none; }
.note-card__badge--video { gap:0; }
.note-card__body { padding:10px 0 12px; }
.note-card__text { margin:0 0 8px; font-size:14px; line-height:1.4; color:#333; font-weight:500; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
body.dark .note-card__text { color:#e5e7eb; }
.note-card__meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.note-card__author { display:flex; align-items:center; gap:6px; color:#666; font-size:12px; min-width:0; text-decoration:none; flex:1; }
body.dark .note-card__author { color:#9aa3af; }
.note-card__avatar { position:relative; width:18px; height:18px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.note-card__avatar img { width:100%; height:100%; border-radius:50%; display:block; object-fit:cover; }
.note-card__author img { width:100%; height:100%; border-radius:50%; display:block; object-fit:cover; }
.note-card__author-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }
.note-card__meta .card-like { display:flex; align-items:center; gap:3px; border:none; background:transparent; color:#9b9b9b; font-size:12px; cursor:pointer; padding:0; flex-shrink:0; line-height:1; }
body.dark .note-card__meta .card-like { color:#9aa3af; }
.note-card__meta .card-like .card-like-icon { width:14px; height:14px; color:currentColor; }
.note-card__meta .card-like-count { line-height:1; }
.note-card__meta .card-like-icon--on { display:none; }
.note-card__meta .card-like.is-liked { color:#ff2442; }
.note-card__meta .card-like.is-liked .card-like-icon--off { display:none; }
.note-card__meta .card-like.is-liked .card-like-icon--on { display:inline-block; }
.note-card--text,
.note-card.text-only { background:#fff; border-radius:6px; min-height:150px; display:flex; flex-direction:column; border:1px solid #f0f0f0; }
body.dark .note-card--text,
body.dark .note-card.text-only { background:#151515; border-color:#222; }
.note-card--text .note-card__body,
.note-card.text-only .note-card__body { flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:16px; }
.note-card--text .note-card__text,
.note-card.text-only .note-card__text { -webkit-line-clamp:8; font-weight:400; line-height:1.6; margin-bottom:12px; color:#333; font-size:15px; }
body.dark .note-card--text .note-card__text,
body.dark .note-card.text-only .note-card__text { color:#e5e7eb; }
.card { position:relative; margin-bottom:26px; background:transparent; border-radius:16px; border:none; transition:transform 0.18s ease, box-shadow 0.18s ease; break-inside:avoid; }


.site-layout{
  max-width:var(--blloe-container);
  margin:14px auto 40px;
  padding:0 var(--blloe-mobile-pad,12px) 40px;
  display:grid;
  grid-template-columns:200px minmax(0, 1fr);
  gap:20px;
  align-items:start;
}
.site-layout.has-home-bottom{
  margin-bottom:0;
  padding-bottom:16px;
}
.site-content{ min-width:0; }
.site-layout .post-layout{ max-width:none; margin:0; padding:0; display:block; }
.site-layout .post-main{ width:100%; }
.site-layout .post-detail-page{ margin:0; }


.home-bottom{grid-column:1 / -1; display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:center; padding:18px 0 24px}
.home-bottom-right{grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; color:#666}
.home-bottom-right a{color:#666}
.home-bottom-right a:hover{color:#111}
.home-bottom-sep{margin:0 4px; color:#bbb}
body.dark .home-bottom-right{color:#9aa3af}
body.dark .home-bottom-right a{color:#9aa3af}
body.dark .home-bottom-right a:hover{color:#fff}
body.dark .home-bottom-sep{color:#444}


.home-sidebar{position:sticky;top:80px;align-self:start;height:calc(100vh - 80px)}
.home-sidebar-inner{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;padding-bottom:56px}
.home-side-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:999px;color:#666;font-size:16px;font-weight:400;background:transparent;border:none;appearance:none;text-decoration:none;cursor:pointer;transition:background .2s ease}
.home-side-item.is-active{background:#f3f3f3;color:#222;font-weight:600}
body.dark .home-side-item{color:#9aa3af}
body.dark .home-side-item.is-active{background:#1f1f1f;color:#fff}
.home-side-item:hover{background:transparent;color:inherit}
.home-side-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:inherit;flex:0 0 22px;font-size:18px}
.home-side-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.home-side-icon i{font-size:18px;line-height:1;color:inherit}
.home-side-icon--emoji{font-size:18px;line-height:1}
.home-side-icon{position:relative}
.home-side-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;display:block}
.home-side-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  background:#ff4b6a;
  color:#fff;
  font-size:10px;
  font-weight:600;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.home-side-more{position:absolute;left:0;right:0;bottom:8px}
.home-side-item--more{color:#666}
.home-side-panel{
  position:absolute; left:0; right:0; bottom:52px; width:auto; background:#fff; border-radius:18px;
  box-shadow:0 16px 40px rgba(0,0,0,.12); padding:10px; display:none; z-index:10;
  max-height:60vh; overflow:auto; overscroll-behavior:contain;
}
.home-side-more.is-open .home-side-panel{display:block}
.home-side-panel-group{padding:6px 0}
.home-side-panel-group + .home-side-panel-group{border-top:1px solid #f2f2f2;margin-top:6px;padding-top:10px}
.home-side-panel-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:12px; color:#444; font-size:14px;
}
.home-side-panel-item:hover{background:#f6f6f6}
.home-side-panel-text{display:inline-flex; align-items:center; gap:8px; font-weight:500}
.home-side-panel-text i{font-size:16px; color:#666}
.home-side-panel-arrow{width:8px; height:8px; border-right:2px solid #bbb; border-bottom:2px solid #bbb; transform:rotate(-45deg)}
body.dark .home-side-panel{background:#151515; box-shadow:0 16px 40px rgba(0,0,0,.4)}
body.dark .home-side-panel-group + .home-side-panel-group{border-top-color:#2a2a2a}
body.dark .home-side-panel-item{color:#ddd}
body.dark .home-side-panel-item:hover{background:#1f1f1f}
body.dark .home-side-panel-text i{color:#aaa}
body.dark .home-side-panel-arrow{border-color:#666}
.home-side-panel-item--toggle{cursor:default}
.home-side-theme{display:inline-flex; gap:8px; background:#f3f3f3; border-radius:999px; padding:4px}
.home-theme-btn{width:32px; height:28px; border:none; border-radius:999px; background:transparent; color:#666; cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.home-theme-btn.is-active{background:#fff; color:#111; box-shadow:0 2px 6px rgba(0,0,0,.08)}
body.dark .home-side-theme{background:#1f1f1f}
body.dark .home-theme-btn{color:#888}
body.dark .home-theme-btn.is-active{background:#111; color:#fff}

.post-layout { max-width:var(--blloe-container); margin:14px auto 40px; padding:0 16px 40px; display:flex; align-items:flex-start; gap:22px; }

@media (max-width:980px){
  .site-layout{grid-template-columns:1fr; padding:0 var(--blloe-mobile-pad,12px) 24px;}
  .site-layout.has-home-bottom{ padding-bottom:12px; }
  main.has-home-bottom{ padding-bottom:calc(40px + 70px); }
  .home-sidebar{display:none}
  .home-bottom{grid-template-columns:1fr; gap:12px; justify-items:start}
  .home-bottom-right{grid-column:1 / -1; justify-content:center}
}
.post-main { flex:1 1 auto; }
.post-sidebar { width:280px; flex:0 0 280px; }
.blloe-fluid-widgets { max-width:var(--blloe-container); margin:0 auto; padding:0 16px; }
.blloe-fluid-widget { margin:16px 0; }
.blloe-content-widget { margin:0 0 18px; }
.post-main-card { margin-bottom:0; padding:0; border-radius:0; background:transparent; box-shadow:none; }
.post-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:#999; margin:6px 0 12px; }
.post-breadcrumbs a { color:#999; text-decoration:none; }
.post-breadcrumbs a:hover { color:#ff4b6a; }
.post-breadcrumbs__sep { color:#ccc; }
.post-breadcrumbs__current { color:#666; font-weight:500; }
.post-header { margin-bottom:12px; padding:0; border-radius:0; background:transparent; box-shadow:none; display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.post-header-left { flex:1 1 auto; }
.post-author { display:flex; align-items:center; gap:10px; margin-bottom:6px; min-height:88px; }
.post-author-avatar { position:relative; flex-shrink:0; transition:transform 0.2s ease; }
.post-author-avatar:hover { transform:scale(1.05); }
.post-author-avatar img { width:40px; height:40px; border-radius:50%; display:block; }
.author-verify-badge { position:absolute; right:-2px; bottom:-2px; width:16px; height:16px; border:2px solid var(--bg-body); border-radius:50%; }
body.dark .author-verify-badge { border-color:#111; }
.post-author-meta { font-size:12px; color:#999; line-height:1.5; display:flex; flex-direction:column; gap:2px; }
.post-author-name-row { display:flex; align-items:center; flex-wrap:wrap; }
.post-author-name { font-weight:500; color:#333; font-size:13px; transition:color 0.2s ease; }
.post-author-name:hover { color:#ff4b6a; }
.post-date { font-size:11px; color:#999; }
.post-title { font-size:20px; font-weight:600; color:#222; }
.post-header-right { display:flex; align-items:flex-start; justify-content:flex-end; min-height:88px; }
.post-actions { display:flex; align-items:center; gap:12px; }
.post-detail-page {
  max-width:none;
  margin:0;
  padding:0;
  background:#fff;
  position:relative;
}
.blloe-detail-app{width:100%}
.blloe-detail-app.is-mounted .blloe-detail-ssr{display:none}
.post-detail-topbar {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  background:rgba(255,255,255,0.95);
  border-bottom:1px solid #f3f4f6;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:100;
}
.post-detail-back {
  width:40px;
  height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#6b7280;
  background:transparent;
  border:none;
  padding:0;
}
.post-detail-back svg { width:24px; height:24px; }
.post-detail-back:hover { background:transparent; color:#6b7280; }
.post-detail-topbar-title {
  flex:1;
  text-align:center;
  font-size:14px;
  font-weight:600;
  color:#111;
  max-width:180px;
  margin:0 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.post-detail-topbar-actions { display:flex; align-items:center; gap:12px; }
.post-detail-topbar-btn {
  width:40px;
  height:40px;
  border:none;
  background:transparent;
  color:#6b7280;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.post-detail-topbar-btn svg { width:20px; height:20px; display:block; }
.post-detail-topbar-btn:hover { background:transparent; color:#6b7280; }
.post-detail-topbar-spacer { width:36px; height:36px; }
.post-detail-more { position:relative; }
.post-detail-more-menu {
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  min-width:120px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:6px;
  box-shadow:0 10px 24px rgba(0,0,0,0.12);
  display:flex;
  flex-direction:column;
  gap:4px;
  z-index:80;
}
.post-detail-more-menu[hidden]{ display:none; }
.post-detail-more-item{
  border:none;
  background:transparent;
  color:#374151;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
}
.post-detail-more-item:hover{ background:#f3f4f6; }
.post-detail-more-item svg{ width:16px; height:16px; flex:0 0 auto; }
.post-detail-mask { display:none; }
.post-detail-dialog { position:relative; }
.post-detail-close { display:none; }
.post-detail-overlay {
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:32px;
  z-index:1200;
}
.post-detail-open { overflow:hidden; }
.post-detail-overlay.is-open { display:flex; }
.post-detail-overlay-mask {
  position:absolute;
  inset:0;
  background:rgba(8,10,12,0.58);
}
.post-detail-overlay-dialog {
  position:relative;
  z-index:1;
  width:min(1100px, calc(100vw - 80px));
  height:80vh;
  max-height:80vh;
  display:flex;
  overflow:visible;
}
.post-detail-overlay-body { width:100%; height:100%; position:relative; z-index:1; }
.post-detail-empty { padding:24px; text-align:center; color:#9aa3af; }
.post-detail-overlay-close {
  position:absolute;
  top:-40px;
  right:-40px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(0,0,0,0.55);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
}
.post-detail-overlay-close svg { width:16px; height:16px; display:block; }
.post-detail-wrap { padding:48px 0 0; }
.post-detail-modal {
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:0;
  overflow:hidden;
}
.post-detail-modal--text { max-width:760px; margin:0 auto; }
.post-detail-media-col {
  background:#000;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.post-detail-carousel {
  position:relative;
  overflow:hidden;
  background:#000;
  height:100%;
}
.post-detail-track { display:flex; transition:transform 0.35s ease; width:100%; height:100%; }
.post-detail-slide { min-width:100%; display:flex; }
.post-detail-media {
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  max-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#000;
}
.post-detail-media.post-gallery { margin:0; column-count:1; column-gap:0; }
.post-detail-media-bg {
  position:absolute;
  inset:-12%;
  width:124%;
  height:124%;
  object-fit:cover;
  filter:blur(26px);
  opacity:0.55;
  pointer-events:none;
}
.post-detail-media-main {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.post-detail-media-main img,
.post-detail-media-main video {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
.post-detail-media--video .blloe-video {
  width:100%;
  height:100%;
  margin:0;
}
.post-detail-media--video .blloe-dplayer,
.post-detail-media--video .blloe-video__player,
.post-detail-media--video .blloe-video__ratio {
  width:100%;
  height:100%;
}
.post-detail-media--video .blloe-video__ratio {
  padding-bottom:0;
}
.post-detail-media-main img { cursor:zoom-in; }
.post-detail-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.92);
  color:#333;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
}
.post-detail-nav svg { width:18px; height:18px; display:block; }
.post-detail-nav--prev { left:10px; }
.post-detail-nav--next { right:10px; }
.post-detail-indicators {
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,0.35);
  z-index:2;
}
.post-detail-indicator {
  width:6px;
  height:6px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,0.5);
}
.post-detail-indicator.is-active { width:18px; background:#fff; }
.post-detail-body {
  background:#fff;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.post-detail-head {
  padding:16px;
  border-bottom:1px solid #f0f0f0;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.post-follow-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#444;
  font-size:12px;
  cursor:pointer;
}
.post-follow-btn .post-follow-icon {
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.post-follow-btn .post-follow-icon svg { width:14px; height:14px; }
.post-follow-btn .post-follow-icon--check { display:none; }
.post-follow-btn.is-following {
  background:#f3f4f6;
  border-color:#e5e7eb;
  color:#666;
}
.post-follow-btn.is-following .post-follow-icon--add { display:none; }
.post-follow-btn.is-following .post-follow-icon--check { display:inline-flex; }
.post-detail-head .post-author { margin:0; min-height:auto; }
.post-detail-scroll {
  flex:1 1 auto;
  min-height:0;
  padding:16px;
  -webkit-overflow-scrolling:touch;
}
.post-detail-title { margin:0 0 12px; font-size:18px; line-height:1.6; font-weight:600; color:#222; }
.post-detail-body .post-content { margin-top:6px; }
.post-detail-scroll .post-content { font-size:15px; line-height:1.8; color:#333; }
.post-detail-scroll .post-content p { margin-bottom:12px; }
.post-detail-scroll .post-content img { max-width:100%; border-radius:4px; margin:8px 0; }
.post-detail-meta {
  font-size:13px;
  color:#999;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid #f0f0f0;
}
.post-detail-comments { margin:16px 0 0; padding:0 0 16px; }
.post-detail-comments .blloe-comments { display:block; min-height:0; }
.post-detail-comments .blloe-comments__summary {
  margin:0 0 16px;
  font-size:15px;
  font-weight:500;
  color:#333;
}
.post-detail-comments .blloe-comments__head { display:flex; align-items:center; gap:8px; padding:0; margin-bottom:16px; }
.post-detail-comments .blloe-comments__icon { width:20px; height:20px; color:#333; }
.post-detail-comments .blloe-comments__title { font-size:15px; font-weight:500; color:#333; margin:0; }
.post-detail-comments .blloe-comments__divider { height:1px; background:#f0f0f0; margin:8px 0; }
.post-detail-comments .comment-list > li { padding:14px 0; }
.post-detail-comments .comment-list > li:first-child { padding-top:0; }
.post-detail-comments .comment-list > li:last-child { padding-bottom:0; }
.post-detail-comments .blloe-comment-form { display:flex; gap:12px; margin-bottom:16px; }
.post-detail-comments .blloe-comment-form__avatar img { width:40px; height:40px; border-radius:50%; }
.post-detail-comments .blloe-comment-form__body textarea { min-height:88px; }
.post-detail-comments .blloe-comment__row { gap:10px; }
.post-detail-comments .blloe-comment__avatar img { width:32px; height:32px; border-radius:50%; }
.post-detail-comments .blloe-comment__author { font-size:14px; font-weight:600; color:#333; }
.post-detail-comments .blloe-comment__content { font-size:14px; line-height:1.7; color:#333; }
.post-detail-comments .blloe-comment__time { font-size:12px; color:#999; }
.post-detail-comments .blloe-comment__reply { font-size:12px; color:#9aa3af; }
.post-detail-comments .blloe-comment__like { color:#9aa3af; }
.post-detail-comments .blloe-comments__empty {
  min-height:220px;
  padding:0;
}
.post-detail-comments .blloe-comments__empty img { width:96px; margin-bottom:6px; }
.post-detail-comments .blloe-comments__empty-icon { width:40px; height:40px; margin-bottom:6px; }
.post-detail-comments #commentform { margin:0; }
.post-detail-comments #reply-title,
.post-detail-comments .comment-reply-title { display:none; }
.post-detail-comments #commentform p { margin:0; }
.post-detail-comments #commentform { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.post-detail-comments #commentform .comment-form-comment { grid-column:1 / -1; }
.post-detail-comments #commentform .comment-form-url { grid-column:1 / -1; }
.post-detail-comments #commentform .form-submit { grid-column:1 / -1; }
.post-detail-comments #commentform label { display:none; }
.post-detail-comments #commentform .comment-notes,
.post-detail-comments #commentform .logged-in-as,
.post-detail-comments #commentform .comment-form-cookies-consent { display:none; }
.post-detail-comments #commentform input[type="text"],
.post-detail-comments #commentform input[type="email"],
.post-detail-comments #commentform input[type="url"],
.post-detail-comments #commentform textarea {
  width:100%;
  box-sizing:border-box;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:var(--bg-input);
  font-size:13px;
  color:#333;
}
.post-detail-comments #commentform input[type="text"],
.post-detail-comments #commentform input[type="email"],
.post-detail-comments #commentform input[type="url"] {
  height:40px;
  padding:0 14px;
}
.post-detail-comments #commentform textarea {
  min-height:100px;
  padding:12px 14px;
  resize:vertical;
}
.post-detail-comments #commentform input::placeholder,
.post-detail-comments #commentform textarea::placeholder { color:#9aa3af; }
.post-detail-comments #commentform input[type="text"]:focus,
.post-detail-comments #commentform input[type="email"]:focus,
.post-detail-comments #commentform input[type="url"]:focus,
.post-detail-comments #commentform textarea:focus {
  outline:none;
  background:var(--bg-card);
  box-shadow:0 0 0 2px rgba(255,75,106,0.2);
}
.post-detail-comments #commentform .form-submit { display:flex; justify-content:flex-end; margin:4px 0 0; }
.post-detail-comments #commentform input[type="submit"] {
  height:42px;
  padding:0 28px;
  border-radius:12px;
  border:none;
  background:#ff4b6a;
  color:#fff;
  font-size:14px;
  cursor:pointer;
}
.post-detail-comments #commentform input[type="submit"]:hover { background:#ff3256; }
.post-detail-bottom {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-top:1px solid #f0f0f0;
  background:#fff;
}
.post-detail-comment-bar { flex:1; min-width:0; }
.post-detail-comment-wrap { flex:1; min-width:0; }
.post-detail-bottom .comment-respond { margin:0; flex:1; min-width:0; }
.post-detail-bottom #reply-title,
.post-detail-bottom .comment-reply-title,
.post-detail-bottom .logged-in-as,
.post-detail-bottom .comment-notes { display:none; }
.post-detail-comment-form {
  display:flex;
  align-items:stretch;
  gap:10px;
  margin:0;
  background:transparent;
  border:none;
  border-radius:0;
  padding:6px 0;
  min-width:0;
}
.post-detail-comment-form .comment-form-comment {
  flex:1;
  min-width:0;
  margin:0;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  box-sizing:border-box;
}
.post-detail-comment-input {
  width:100%;
  min-height:44px;
  height:44px;
  border-radius:999px;
  border:none;
  background:#f3f4f6;
  color:#2f2f2f;
  font-size:15px;
  line-height:1.4;
  padding:10px 16px;
  box-sizing:border-box;
  resize:none;
  outline:none;
}
.post-detail-comment-input::placeholder { color:#9aa3af; }
.post-detail-comment-input:focus { background:#f1f3f5; }
.blloe-comment-tools {
  display:flex;
  align-items:center;
  gap:14px;
  padding:0;
  width:100%;
  box-sizing:border-box;
  flex-wrap:wrap;
}
.blloe-comment-tool {
  border:none;
  background:transparent;
  color:#8b95a5;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  padding:0;
}
.blloe-comment-tool__text { display:none; }
.blloe-comment-tool svg {
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.blloe-comment-tool.is-loading { opacity:0.6; pointer-events:none; }
.blloe-comment-smilie-panel {
  position:absolute;
  left:0;
  bottom:100%;
  margin-bottom:8px;
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:6px;
  padding:10px;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
  max-width:320px;
  max-height:220px;
  overflow:auto;
  z-index:20;
}
.blloe-comment-smilie-panel[hidden] { display:none; }
.blloe-comment-smilie-item {
  border:none;
  background:transparent;
  padding:0;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.blloe-comment-smilie-item img {
  width:22px;
  height:22px;
  display:block;
}
.blloe-comment-mention-panel {
  position:absolute;
  left:0;
  bottom:100%;
  margin-bottom:8px;
  min-width:220px;
  max-width:320px;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
  z-index:20;
  overflow:hidden;
}
.blloe-comment-mention-panel[hidden] { display:none; }
.blloe-comment-mention-loading,
.blloe-comment-mention-empty {
  padding:12px;
  font-size:13px;
  color:#9aa3af;
}
.blloe-comment-mention-list {
  max-height:240px;
  overflow:auto;
}
.blloe-comment-mention-item {
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:none;
  background:transparent;
  cursor:pointer;
  text-align:left;
}
.blloe-comment-mention-item:hover { background:#f7f7f8; }
.blloe-comment-mention-avatar {
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
}
.blloe-comment-mention-name {
  font-size:13px;
  color:#111827;
}
.post-detail-comment-submit {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
}
.post-detail-comment-send {
  height:36px;
  padding:0 20px;
  border-radius:18px;
  border:none;
  background:#ff4b6a;
  color:#fff;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
  margin-right:0;
}
.post-detail-comment-cancel {
  height:36px;
  padding:0 18px;
  border-radius:18px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#6b7280;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
}
.post-detail-comment-form:not(.is-focus) .blloe-comment-tools { display:none; }
.post-detail-comment-form:not(.is-focus) .post-detail-comment-cancel { display:none; }
.post-detail-comment-form.is-focus .post-detail-comment-input { background:#f1f3f5; }
.post-detail-comment-send:hover { background:#ff3256; }
.post-detail-comment-login,
.post-detail-comment-disabled {
  display:flex;
  align-items:center;
  height:36px;
  border-radius:18px;
  background:#f5f5f5;
  color:#999;
  font-size:14px;
  padding:0 14px;
  text-decoration:none;
}
.post-detail-bottom .post-actions { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.post-detail-bottom .post-actions { margin-left:auto; }
.post-detail-bottom.is-comment-focus .post-actions { display:none; }
.post-detail-bottom .post-action {
  position:static;
  width:auto;
  height:auto;
  padding:0;
  border-radius:0;
  background:transparent;
  border:none;
  display:flex;
  align-items:center;
  gap:4px;
  box-shadow:none;
  color:#9aa3af;
}
.post-detail-bottom .post-action:hover { background:transparent; transform:none; }
.post-detail-bottom .post-action.is-active { color:#9aa3af; }
.post-detail-bottom .post-action--report { color:#9aa3af; }
.post-detail-bottom .post-action--report:hover { color:#6b7280; }
.post-detail-bottom .post-action-icon-wrap { width:20px; height:20px; }
.post-detail-bottom .post-action-icon { width:20px; height:20px; }
.post-detail-bottom .post-action-count {
  position:static;
  min-width:0;
  height:auto;
  padding:0;
  border-radius:0;
  background:transparent;
  color:#666;
  font-size:13px;
  font-weight:400;
}
.post-detail-bottom .post-action--share .post-action-icon { width:20px; height:20px; }

body.dark .post-detail-page { background:#0c0f14; }
body.dark .post-detail-topbar { background:rgba(20,22,26,0.95); border-bottom-color:#222; }
body.dark .post-detail-back { color:#9aa3af; }
body.dark .post-detail-topbar-title { color:#e5e7eb; }
body.dark .post-detail-topbar-btn { color:#9aa3af; }
body.dark .post-detail-more-menu { background:#15181d; border-color:#2a2f36; }
body.dark .post-detail-more-item { color:#e5e7eb; }
body.dark .post-detail-more-item:hover { background:#1f232a; }
body.dark .post-detail-modal { background:#14161a; box-shadow:none; }
body.dark .post-detail-head { background:#14161a; border-bottom-color:#222; }
body.dark .post-detail-body { background:#14161a; }
body.dark .post-detail-title { color:#f3f4f6; }
body.dark .post-detail-scroll .post-content { color:#e5e7eb; }
body.dark .post-detail-meta { color:#9aa3af; border-top-color:#222; }
body.dark .post-detail-bottom { background:#14161a; border-top-color:#222; }
body.dark .post-detail-comment-form { background:transparent; border-color:#262b33; }
body.dark .post-detail-comment-input { background:#20242b; color:#e5e7eb; }
body.dark .post-detail-comment-form.is-focus .post-detail-comment-input { background:#232833; }
body.dark .post-detail-comment-input::placeholder { color:#6b7280; }
body.dark .post-detail-comment-login,
body.dark .post-detail-comment-disabled { background:#1b1f26; color:#9aa3af; }
body.dark .blloe-comment-tool { color:#9aa3af; }
body.dark .post-detail-comment-cancel { background:#14161a; border-color:#2a2f36; color:#9aa3af; }
body.dark .blloe-comment-smilie-panel { background:#151515; border-color:#2a2a2a; box-shadow:0 10px 24px rgba(0,0,0,0.35); }
body.dark .blloe-comment-mention-panel { background:#15181d; border-color:#2a2f36; box-shadow:0 10px 24px rgba(0,0,0,0.35); }
body.dark .blloe-comment-mention-item:hover { background:#1f232a; }
body.dark .blloe-comment-mention-name { color:#e5e7eb; }
body.dark .post-detail-comments .blloe-comments__icon { color:#e5e7eb; }
body.dark .post-detail-comments .blloe-comments__title { color:#e5e7eb; }
body.dark .post-detail-comments .blloe-comments__summary { color:#e5e7eb; }
body.dark .post-detail-comments .blloe-comments__divider { background:#222; }
body.dark .post-detail-comments .blloe-comment__author,
body.dark .post-detail-comments .blloe-comment__content { color:#e5e7eb; }
body.dark .post-detail-comments .blloe-comment__time { color:#9aa3af; }
body.dark .post-follow-btn { background:#1b1d22; border-color:#2a2d33; color:#e5e7eb; }
body.dark .post-follow-btn.is-following { background:#22262b; border-color:#2f343c; color:#cbd5e1; }
body.dark .post-detail-comments #commentform input[type="text"],
body.dark .post-detail-comments #commentform input[type="email"],
body.dark .post-detail-comments #commentform input[type="url"],
body.dark .post-detail-comments #commentform textarea {
  background:#1b1b1b;
  border-color:#2a2a2a;
  color:#e5e7eb;
}
body.dark .post-detail-comments #commentform input::placeholder,
body.dark .post-detail-comments #commentform textarea::placeholder { color:#6b7280; }
body.dark .post-detail-comments #commentform input[type="text"]:focus,
body.dark .post-detail-comments #commentform input[type="email"]:focus,
body.dark .post-detail-comments #commentform input[type="url"]:focus,
body.dark .post-detail-comments #commentform textarea:focus {
  background:#111;
  box-shadow:0 0 0 2px rgba(255,75,106,0.25);
}
body.dark .post-detail-bottom .post-action-count { color:#9aa3af; }
body.dark .post-detail-bottom .post-action--report { color:#9aa3af; }
body.dark .post-detail-bottom .post-action--report:hover { color:#cbd5e1; }
body.dark .post-detail-nav { background:rgba(15,17,21,0.9); color:#e5e7eb; }
body.dark .post-detail-media-col,
body.dark .post-detail-carousel { background:#000; }

@media (min-width:901px) {
  .post-detail-topbar { display:none; }
  .post-detail-wrap { padding:24px 16px 60px; }
  .post-detail-page { background:#f5f6f8; }
  .post-detail-page.is-detail-modal { background:#0f1115; }
  .post-detail-page.is-detail-modal .post-detail-mask {
    display:block;
    position:fixed;
    inset:0;
    background:rgba(8,10,12,0.58);
    z-index:80;
  }
  .post-detail-page.is-detail-modal .post-detail-wrap { position:relative; z-index:90; }
  .post-detail-page.is-detail-modal .post-detail-dialog { position:relative; }
  .post-detail-page.is-detail-modal .post-detail-close {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid #e5e7eb;
    background:#fff;
    color:#333;
    position:absolute;
    top:12px;
    right:12px;
    z-index:92;
    cursor:pointer;
  }
  .post-detail-page.is-detail-modal .post-detail-close svg { width:16px; height:16px; display:block; }
  .post-detail-modal {
    display:grid;
    grid-template-columns:minmax(0, 1.08fr) minmax(0, 0.92fr);
    border-radius:16px;
    box-shadow:0 16px 50px rgba(0,0,0,0.12);
    max-width:1100px;
    margin:0 auto;
    min-height:70vh;
    height:calc(100vh - 140px);
    max-height:calc(100vh - 140px);
  }
  .post-detail-overlay .post-detail-modal {
    max-width:none;
    margin:0;
    height:100%;
    max-height:100%;
    min-height:100%;
    border-radius:16px;
    box-shadow:0 16px 50px rgba(0,0,0,0.15);
  }
  .post-detail-overlay .post-detail-media { height:100%; max-height:100%; }
  .post-detail-overlay .post-detail-media-col { min-height:0; height:100%; }
  .post-detail-modal--text { grid-template-columns:1fr; max-width:760px; }
  .post-detail-body { height:100%; }
  .post-detail-head { position:sticky; top:0; z-index:6; }
  .post-detail-scroll { overflow:auto; }
  .post-detail-bottom { position:sticky; bottom:0; padding:12px 16px 16px; }
  .post-detail-media { aspect-ratio:auto; height:100%; max-height:100%; }
  .post-detail-media-col { min-height:0; height:100%; }
  .post-detail-comments #commentform { grid-template-columns:1fr 1fr; gap:12px; }
  .post-detail-comments #commentform textarea { min-height:110px; }
  .post-detail-page:not(.is-detail-modal) { background:#fff; }
  .post-detail-page:not(.is-detail-modal) .post-detail-wrap { padding:24px 16px 60px; }
  .post-detail-page:not(.is-detail-modal) .post-detail-modal {
    display:grid;
    grid-template-columns:minmax(0, 1.08fr) minmax(0, 0.92fr);
    max-width:1180px;
    margin:0 auto;
    min-height:0;
    height:calc(100vh - 140px);
    max-height:calc(100vh - 140px);
    border-radius:16px;
    box-shadow:0 12px 28px rgba(0,0,0,0.08);
  }
  .post-detail-page:not(.is-detail-modal) .post-detail-modal--text { max-width:820px; grid-template-columns:1fr; }
  .post-detail-page:not(.is-detail-modal) .post-detail-body { height:100%; }
  .post-detail-page:not(.is-detail-modal) .post-detail-head { position:sticky; top:0; }
  .post-detail-page:not(.is-detail-modal) .post-detail-scroll { overflow:auto; }
  .post-detail-page:not(.is-detail-modal) .post-detail-bottom { position:sticky; bottom:0; padding:12px 16px 16px; }
  .post-detail-page:not(.is-detail-modal) .post-detail-media { aspect-ratio:auto; height:100%; max-height:100%; }
  .post-detail-page:not(.is-detail-modal) .post-detail-media-col { min-height:0; height:100%; }
  .post-detail-page:not(.is-detail-modal) .post-detail-comments #commentform { grid-template-columns:1fr 1fr; gap:12px; }
  .post-detail-page:not(.is-detail-modal) .post-detail-comments #commentform textarea { min-height:110px; }
}

body.dark .post-detail-page.is-detail-modal .post-detail-close {
  background:#14161a;
  border-color:#222;
  color:#e5e7eb;
}

@media (max-width:900px) {
  body.single .site-header { display:none; }
  .post-detail-page {
    padding-bottom:88px;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
  }
  .post-detail-wrap { padding-left:0; padding-right:0; }
  .post-detail-bottom {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:40;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }
  .post-detail-topbar-title { font-size:14px; }
  .post-detail-nav { display:none; }
  .post-detail-scroll { padding-bottom:calc(44px + env(safe-area-inset-bottom)); }
  .post-detail-comments #commentform { grid-template-columns:1fr; gap:8px; }
  .post-detail-comments #commentform textarea { min-height:88px; }
  .post-detail-comments .blloe-comments__empty { min-height:180px; padding:0; }
  .post-detail-comments .blloe-comments__empty img { width:80px; margin-bottom:4px; }
  .post-detail-comments .blloe-comments__empty-icon { width:36px; height:36px; margin-bottom:4px; }
  .post-detail-overlay { display:none !important; }
  .post-detail-bottom .post-action--report { display:none; }
}

.blloe-pay-modal { display:none; }
.blloe-qr-modal { display:none; }


.post-action {
  position:relative;
  width:44px;
  height:44px;
  padding:0;
  border-radius:12px;
  background:var(--bg-input);
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  transition:background 0.15s ease, transform 0.15s ease;
}
.post-action:hover { background:var(--bg-hover); transform:translateY(-1px); }
.post-action.is-loading { opacity:0.6; pointer-events:none; transform:none; }

.post-action-icon-wrap { width:22px; height:22px; }
.post-action-icon { width:22px; height:22px; display:block; }
.post-action-icon--on { display:none; }
.post-action.is-active .post-action-icon--on { display:block; }
.post-action.is-active .post-action-icon--off { display:none; }


.post-action-count {
  position:absolute;
  right:-6px;
  top:-6px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#ff4b6a;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  line-height:1;
}


body.dark .post-action { background:#1b1b1b; }
body.dark .post-action:hover { background:rgba(255,75,106,0.14); }
.post-gallery { margin:4px -2px 12px; column-count:3; column-gap:8px; }
.post-gallery-item { margin-bottom:12px; border-radius:14px; overflow:hidden; background:transparent; box-shadow:none; }
.post-gallery-item img { width:100%; height:auto; display:block; object-fit:cover; cursor:zoom-in; }
.post-content { padding:0; border-radius:0; background:transparent; box-shadow:none; font-size:14px; line-height:1.8; color:#444; margin-bottom:10px; }
.post-content p { margin-bottom:10px; }
.post-content ul { list-style:disc; padding-left:20px; margin:0 0 12px; }
.post-content ol { list-style:decimal; padding-left:20px; margin:0 0 12px; }
.post-content li { margin-bottom:10px; }
.post-content table { width:100%; margin:0 0 25px; border-top:1px solid rgba(50,50,50,0.06); border-left:1px solid rgba(50,50,50,0.06); border-collapse:collapse; }
.post-content table th { background:transparent; text-align:center; }
.post-content table td,
.post-content table th { border-bottom:1px solid rgba(50,50,50,0.06); border-right:1px solid rgba(50,50,50,0.06); padding:5px 10px; }
.post-content img { max-width:100%; height:auto; display:block; margin:0 auto 10px; }
.post-content img.alignleft { margin-left:0; margin-right:auto; }
.post-content img.alignright { margin-left:auto; margin-right:0; }
.post-content .aligncenter { display:table; margin:0 auto 10px; }
.post-content a { color:#ff4b6a; text-decoration:none; border-bottom:1px dashed rgba(255,75,106,0.45); padding-bottom:1px; }
.post-content a:hover { color:#ff3256; border-bottom-color:#ff3256; }
.post-content a:visited { color:#e33f5a; }
.post-content a img { display:block; }
.blloe-block-title { display:flex; align-items:center; gap:10px; margin:16px 0 12px; }
.blloe-block-title__bar { width:4px; height:16px; border-radius:3px; background:#ff4b6a; flex:0 0 4px; }
.blloe-block-title__text { margin:0; font-size:18px; font-weight:600; color:#222; line-height:1.3; }
body.dark .blloe-block-title__text { color:#f3f4f6; }
.blloe-block-highlight { margin:16px 0; }
.blloe-block-highlight__grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.blloe-block-highlight__card { border:1px solid #ededed; border-radius:12px; padding:16px; background:#fff; color:#555; box-shadow:0 6px 16px rgba(0,0,0,0.04); display:flex; flex-direction:column; gap:6px; }
.blloe-block-highlight__card i { font-size:20px; color:#ff4b6a; }
.blloe-block-highlight__title { font-size:15px; font-weight:600; color:#222; }
.blloe-block-highlight__desc { font-size:13px; color:#777; line-height:1.6; }
.blloe-block-postcard { display:flex; gap:12px; border:1px solid #e8e8e8; border-radius:14px; padding:12px 14px; overflow:hidden; background:transparent; margin:16px 0; box-shadow:none; align-items:center; text-decoration:none; color:inherit; }
.blloe-block-postcard__thumb { width:88px; height:88px; background:#e5e7f7; flex:0 0 88px; border-radius:14px; overflow:hidden; position:relative; }
.blloe-block-postcard__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.blloe-block-postcard__body { padding:2px 0; display:flex; flex-direction:column; gap:6px; min-width:0; flex:1 1 auto; }
.blloe-block-postcard__title { font-size:15px; font-weight:600; color:#222; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blloe-block-postcard:hover .blloe-block-postcard__title { color:#ff4b6a; }
.blloe-block-postcard__meta { font-size:12px; color:#9aa3af; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:2px; line-height:1; }
.blloe-block-postcard__time,
.blloe-block-postcard__likes,
.blloe-block-postcard__favs { display:inline-flex; align-items:center; gap:6px; line-height:1; }
.blloe-block-postcard__meta-right { display:inline-flex; align-items:center; gap:12px; line-height:1; }
.blloe-block-postcard__icon { width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; top:1px; }
.blloe-block-postcard__icon-wrap { width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; top:1px; }
.blloe-block-postcard__icon-wrap svg { width:14px; height:14px; display:block; }
.blloe-block-postcard__likes img,
.blloe-block-postcard__favs img { display:inline-flex; vertical-align:middle; }
.blloe-block-postcard__meta i { font-size:13px; color:#b0b7c3; }
.blloe-block-postcard__excerpt { font-size:13px; color:#6b6f8e; line-height:1.6; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }
.blloe-block-postcard__link { display:none; }
body.dark .blloe-block-postcard { background:transparent; border-color:#222; }
body.dark .blloe-block-postcard__title { color:#e5e7eb; }
body.dark .blloe-block-postcard__excerpt { color:#9aa3af; }
.blloe-block-postcard__thumb-placeholder { width:100%; height:100%; display:block; background:#e5e7f7; }
.blloe-block-quote { margin:16px 0; padding:16px 18px 16px 52px; border:1px solid #eee; border-radius:12px; background:#f7f7f7; color:#666; position:relative; }
.blloe-block-quote:before { content:"“"; position:absolute; left:16px; top:10px; font-size:34px; color:#c2c2c2; line-height:1; }
.blloe-block-quote__content { font-size:14px; line-height:1.7; }
.blloe-block-quote__cite { margin-top:8px; display:block; font-size:12px; color:#999; }
body.dark .blloe-block-quote { background:#1a1a1a; color:#cbd5e1; border-color:#222; }
body.dark .blloe-block-quote__cite { color:#9aa3af; }
.blloe-accordion { border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; margin:16px 0; }
.blloe-accordion__item { border-top:1px solid #eee; }
.blloe-accordion__item:first-child { border-top:none; }
.blloe-accordion__title { cursor:pointer; padding:12px 16px; font-size:14px; font-weight:600; color:#222; list-style:none; }
.blloe-accordion__title::-webkit-details-marker { display:none; }
.blloe-accordion__content { padding:0 16px 12px; font-size:13px; color:#666; line-height:1.7; }
.blloe-accordion__item[open] .blloe-accordion__title { color:#ff4b6a; }
.blloe-tabs { border:1px solid #eee; border-radius:12px; background:#fff; margin:16px 0; overflow:hidden; }
.blloe-tabs__nav { display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid #eee; background:#fafafa; flex-wrap:wrap; }
.blloe-tabs__tab { border:none; background:transparent; padding:6px 10px; border-radius:8px; font-size:13px; cursor:pointer; color:#666; }
.blloe-tabs__tab.is-active { background:#ffedf1; color:#ff4b6a; font-weight:600; }
.blloe-tabs__panes { padding:12px 16px 16px; }
.blloe-tabs__pane { display:none; }
.blloe-tabs__pane.is-active { display:block; }
.blloe-tabs__content { font-size:13px; color:#666; line-height:1.7; }
.blloe-video { margin:16px 0; position:relative; }
.blloe-video__ratio { width:100%; pointer-events:none; display:block; }
.blloe-video__player,
.blloe-video__frame,
.blloe-dplayer { position:absolute; inset:0; width:100%; height:100%; border:none; border-radius:12px; }
.blloe-dplayer.dplayer { position:absolute !important; inset:0; width:100% !important; height:100% !important; }
.blloe-video__placeholder { height:240px; border-radius:12px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; color:#999; font-size:13px; }
.blloe-video__title { margin-top:8px; font-size:13px; color:#666; }
.blloe-video-series { margin:16px 0; }
.blloe-video-series__player { position:relative; border-radius:12px; overflow:hidden; background:#000; }
.blloe-video-series__list { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.blloe-video-series__item { border:1px solid #eee; background:#fff; padding:6px 10px; border-radius:8px; font-size:12px; cursor:pointer; color:#666; display:flex; align-items:center; gap:8px; }
.blloe-video-series__label { flex:1; text-align:left; }
.blloe-video-series__playing { display:none; align-items:flex-end; gap:2px; height:12px; }
.blloe-video-series__bar { display:block; width:3px; height:5px; background:currentColor; border-radius:2px; animation:blloe-eq 1s ease-in-out infinite; }
.blloe-video-series__bar:nth-child(2) { animation-delay:0.15s; height:9px; }
.blloe-video-series__bar:nth-child(3) { animation-delay:0.3s; height:7px; }
.blloe-video-series__item.is-active { background:#ffedf1; border-color:#ffd3dd; color:#ff4b6a; font-weight:600; }
.blloe-video-series__item.is-active .blloe-video-series__playing { display:inline-flex; }
@keyframes blloe-eq {
  0%, 100% { transform:scaleY(0.6); }
  50% { transform:scaleY(1.2); }
}
.blloe-notice { display:flex; gap:12px; padding:14px 16px; border-radius:12px; border:1px solid #eee; background:#fafafa; margin:16px 0; }
.blloe-notice__icon { font-size:18px; color:#ff4b6a; }
.blloe-notice__title { font-size:14px; font-weight:600; margin-bottom:4px; color:#222; }
.blloe-notice__content { font-size:13px; color:#666; line-height:1.7; }
.blloe-notice--success { border-color:#bbf7d0; background:#ecfdf5; }
.blloe-notice--success .blloe-notice__icon { color:#10b981; }
.blloe-notice--warning { border-color:#ffe0c2; background:#fff7ed; }
.blloe-notice--warning .blloe-notice__icon { color:#f59e0b; }
.blloe-notice--danger { border-color:#fecaca; background:#fef2f2; }
.blloe-notice--danger .blloe-notice__icon { color:#ef4444; }
@media (max-width:720px) {
  .blloe-block-highlight__grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .blloe-block-postcard { padding:10px 12px; gap:10px; }
  .blloe-block-postcard__thumb { width:72px; height:72px; flex:0 0 72px; }
}
.post-content .wp-block-embed.is-type-video > div { padding-bottom:56%; position:relative; overflow:hidden; }
.post-content .wp-block-embed.is-type-video.wp-embed-aspect-21-9 > div { padding-bottom:43%; }
.post-content .wp-block-embed.is-type-video.wp-embed-aspect-18-9 > div { padding-bottom:50%; }
.post-content .wp-block-embed.is-type-video.wp-embed-aspect-4-3 > div { padding-bottom:75%; }
.post-content .wp-block-embed.is-type-video.wp-embed-aspect-1-1 > div { padding-bottom:100%; }
.post-content .wp-block-embed.is-type-video.wp-embed-aspect-9-16 > div { padding-bottom:178%; }
.post-content .wp-block-embed.is-type-video.wp-embed-aspect-1-2 > div { padding-bottom:200%; }
.post-content .wp-block-embed.is-type-video iframe { position:absolute; left:0; top:0; width:100%; height:100%; }
.post-content .wp-block-video video { width:100%; height:auto; display:block; }
.post-content figure.wp-block-image a,
.post-content .wp-block-image a,
.post-content .gallery a,
.post-content a:has(img) { border-bottom:none; padding-bottom:0; }
body.dark .post-content a:has(img),
body.dark .post-content figure.wp-block-image a,
body.dark .post-content .wp-block-image a,
body.dark .post-content .gallery a { border-bottom:none; padding-bottom:0; }
.blloe-lightbox { position:fixed; inset:0; z-index:1600; opacity:0; pointer-events:none; transition:opacity 0.25s ease; }
.blloe-lightbox--open { opacity:1; pointer-events:auto; }
.blloe-lightbox__backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.9); }
.blloe-lightbox__inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; }
.blloe-lightbox__viewport { position:relative; width:100%; max-width:960px; max-height:90vh; overflow:hidden; border-radius:12px; background:transparent; }
.blloe-lightbox__track { display:flex; width:100%; height:100%; transition:transform 0.35s cubic-bezier(0.22,0.61,0.36,1); will-change:transform; }
.blloe-lightbox__slide { flex:0 0 100%; display:flex; align-items:center; justify-content:center; background:transparent; }
.blloe-lightbox__slide img { max-width:100%; max-height:90vh; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }
.blloe-lightbox__close,
.blloe-lightbox__nav,
.blloe-lightbox__play { position:absolute; width:34px; height:34px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.55); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; }
.blloe-lightbox__close { top:18px; right:18px; z-index:2; font-size:26px; }
.blloe-lightbox__nav--prev { left:18px; top:50%; transform:translateY(-50%); }
.blloe-lightbox__nav--next { right:18px; top:50%; transform:translateY(-50%); }
.blloe-lightbox__play { top:18px; right:58px; transform:none; }
.blloe-lightbox__counter { position:absolute; left:24px; top:18px; color:#fff; font-size:13px; z-index:2; padding:4px 10px; border-radius:999px; background:rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.08); }
.blloe-lightbox__toolbar { position:absolute; top:18px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:999px; background:rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.08); z-index:2; }
.blloe-lightbox__btn { min-width:30px; height:30px; padding:0 8px; border-radius:8px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.05); color:#fff; cursor:pointer; font-size:12px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.blloe-lightbox__btn:hover { background:rgba(255,255,255,0.18); }
.blloe-lightbox__btn:active { transform:scale(0.96); }
.blloe-lightbox__play--active { background:rgba(255,255,255,0.18); }
.blloe-no-scroll { overflow:hidden; touch-action:none; }
@media (max-width:720px) {
  .blloe-lightbox__viewport { max-width:100%; border-radius:0; }
  .blloe-lightbox__nav { width:30px; height:30px; font-size:16px; }
  .blloe-lightbox__toolbar { top:auto; bottom:18px; }
}
.post-tags { margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
.post-tag {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  background:none;
  color:#3b5998;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
}
.post-tag::before { content:"#"; }
.post-tag svg { display:none; }
.post-tag:hover { opacity:0.7; }
body.dark .post-tag { color:#8aa4e6; }
.post-related { margin:18px 0 0; padding:18px 0 0; border-radius:0; background:transparent; box-shadow:none; border-top:1px solid #f2f2f2; }
.section-title { font-size:16px; font-weight:600; margin-bottom:16px; color:#222; display:flex; align-items:center; gap:8px; }
.section-title svg { width:20px; height:20px; color:#ff4b6a; flex-shrink:0; }
body.dark .section-title { color:#f3f4f6; }
.related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.related-card { display:block; border-radius:16px; overflow:hidden; text-decoration:none; transition:transform 0.18s ease; position:relative; }
.related-card:hover { transform:translateY(-4px); }
.related-thumb { position:relative; width:100%; height:180px; overflow:hidden; background:var(--bg-input); border-radius:16px; }
.related-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.25s ease-out; }
.related-card:hover .related-thumb img { transform:scale(1.04); }
.related-like { position:absolute; right:10px; top:10px; width:40px; height:40px; border-radius:12px; border:none; background:rgba(255,255,255,0.95); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; opacity:0; transform:scale(0.8); transition:opacity 0.2s ease, transform 0.2s ease, background 0.15s ease; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.related-card:hover .related-like { opacity:1; transform:scale(1); }
.related-like:active { transform:scale(0.92); }
.related-like-icon { width:22px; height:22px; color:#ccc; transition:color 0.15s ease; }
.related-like-icon--on { display:none; color:#ff4b6a; }
.related-like-icon--off { display:block; }
.related-like.is-liked .related-like-icon--on,
.related-like.is-active .related-like-icon--on { display:block; }
.related-like.is-liked .related-like-icon--off,
.related-like.is-active .related-like-icon--off { display:none; }
.related-like.is-liked,
.related-like.is-active { background:rgba(255,240,244,0.95); }
body.dark .related-like { background:rgba(40,40,40,0.9); }
body.dark .related-like.is-liked,
body.dark .related-like.is-active { background:rgba(255,75,106,0.2); }
body.dark .related-like-icon { color:#666; }
.related-overlay { position:absolute; left:0; right:0; bottom:0; padding:8px 12px 10px; background:linear-gradient(to top, rgba(0,0,0,0.7), transparent); opacity:0; transform:translateY(6px); transition:opacity 0.18s ease, transform 0.18s ease; pointer-events:none; }
.related-card:hover .related-overlay,
.related-card:focus-within .related-overlay { opacity:1; transform:translateY(0); }
.related-overlay-title { margin:0; color:#fff; font-size:13px; font-weight:500; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.post-comments { margin:18px 0 0; padding:18px 0 0; border-radius:0; background:transparent; box-shadow:none; border-top:1px solid #f2f2f2; }
.post-comments #comments { margin:0; }


.blloe-comments__head { display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.blloe-comments__icon { width:34px; height:34px; border-radius:999px; background:transparent; display:flex; align-items:center; justify-content:center; flex:0 0 34px; }
.blloe-comments__icon svg { width:20px; height:20px; fill:#ff4b6a; display:block; }
.blloe-comments__title { margin:0; font-size:18px; font-weight:600; color:#222; }
.blloe-comments__summary { margin:0 0 10px; font-size:13px; color:#666; }
.blloe-comments__count { font-weight:600; color:#222; }


.blloe-comment-form { display:grid; grid-template-columns:56px 1fr; gap:10px; margin:0 0 12px; align-items:stretch; }
.blloe-comment-form__avatar { width:56px; min-height:140px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; padding:2px 0; }
.blloe-comment-form__avatar img { width:46px; height:46px; border-radius:50%; display:block; background:#f1f3f6; }
.blloe-comment-form__user { width:56px; font-size:12px; color:#6b7280; text-align:center; line-height:1.2; word-break:break-all; font-weight:600; }

.post-comments #commentform { margin:0; }
.post-comments #reply-title,
.post-comments .comment-reply-title { display:none; }
.post-comments #commentform p { margin:0 0 12px; }
.post-comments #commentform label { display:none; }
.post-comments #commentform .comment-notes,
.post-comments #commentform .logged-in-as,
.post-comments #commentform .comment-form-cookies-consent { display:none; }

.post-comments #commentform input[type="text"],
.post-comments #commentform input[type="email"],
.post-comments #commentform input[type="url"],
.post-comments #commentform textarea {
  width:100%;
  box-sizing:border-box;
  border:none;
  border-radius:12px;
  background:var(--bg-input);
  font-size:13px;
  color:#333;
}
.post-comments #commentform input[type="text"],
.post-comments #commentform input[type="email"],
.post-comments #commentform input[type="url"] {
  height:44px;
  padding:0 14px;
}
.post-comments #commentform textarea {
  min-height:140px;
  padding:12px 14px;
  resize:vertical;
}
.post-comments #commentform input::placeholder,
.post-comments #commentform textarea::placeholder { color:#9aa3af; }

.post-comments #commentform input[type="text"]:focus,
.post-comments #commentform input[type="email"]:focus,
.post-comments #commentform input[type="url"]:focus,
.post-comments #commentform textarea:focus {
  outline:none;
  background:var(--bg-card);
  box-shadow:0 0 0 2px rgba(255,75,106,0.25);
}

.post-comments #commentform .form-submit { display:flex; justify-content:flex-end; margin:6px 0 0; }
.post-comments #commentform input[type="submit"] {
  height:44px;
  padding:0 30px;
  border-radius:12px;
  border:none;
  background:#ff4b6a;
  color:#fff;
  font-size:14px;
  cursor:pointer;
}
.post-comments #commentform input[type="submit"]:hover { background:#ff3256; }


.blloe-comments__divider { height:1px; background:#f2f2f2; margin:12px 0 14px; }


.blloe-reply-banner {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0;
    padding:6px 10px;
    border-radius:999px;
    background:#f6f6f7;
    border:1px solid #eee;
    color:#6b7280;
    font-size:12px;
    max-width:100%;
    white-space:nowrap;
  }
.blloe-reply-banner__who {
    color:#ff4b6a;
    font-weight:600;
    text-decoration:none;
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:inline-block;
  }
.blloe-reply-banner__who:hover { text-decoration:underline; }
.blloe-reply-banner__cancel {
    margin-left:4px;
    border:none;
    background:transparent;
    color:#9aa3af;
    font-size:12px;
    cursor:pointer;
  }
.blloe-reply-banner__cancel:hover { color:#ff4b6a; }


.post-detail-comment-bar{ position:relative; }
.blloe-reply-anchor{
  position:absolute;
  left:0;
  top:0;
  height:0;
  width:100%;
  pointer-events:none;
}
.blloe-reply-anchor .blloe-reply-banner{
  transform:translateY(calc(-100% - 8px));
  pointer-events:auto;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
@media (max-width:768px){
  .blloe-reply-anchor .blloe-reply-banner{
    transform:translateY(calc(-100% - 6px));
  }
}


.blloe-comments__empty {
  min-height:280px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px 0;
}
.blloe-comments__empty img { width:150px; height:auto; display:block; margin:0 auto 10px; opacity:0.9; }
.blloe-comments__empty-icon {
  width:44px;
  height:44px;
  color:#cbd5e1;
  display:block;
  margin:0 auto 8px;
}
.blloe-comments__empty p { margin:0; font-size:14px; color:#9aa3af; }
body.dark .blloe-comments__empty-icon { color:#4b5563; }

.blloe-comment-login {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid #f0f0f0;
  border-radius:12px;
  background:#fafafa;
  margin-bottom:12px;
}
.blloe-comment-login__text { font-size:13px; color:#666; }
.blloe-comment-login__btn {
  height:32px;
  padding:0 14px;
  border-radius:999px;
  border:none;
  background:#ff4b6a;
  color:#fff;
  font-size:12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.blloe-comment-login__btn:hover { background:#ff3256; }
body.dark .blloe-comment-login { background:#1b1b1b; border-color:#2a2a2a; }
body.dark .blloe-comment-login__text { color:#9aa3af; }


.blloe-comments .comment-list,
.blloe-comments .comment-list .children { list-style:none; margin:0; padding:0; }

.blloe-comments .comment-list > li { padding:18px 0; }

.blloe-comments .comment-list > li.depth-1 + li.depth-1 { border-top:1px solid #f2f2f2; }

.blloe-comments .comment-list .children > li { border-top:none; }

.blloe-comment__row { display:flex; align-items:flex-start; gap:14px; }
.blloe-comment__avatar { position:relative; flex-shrink:0; }
.blloe-comment__avatar img { width:46px; height:46px; border-radius:50%; display:block; background:#f1f3f6; }
.blloe-comment__main { flex:1 1 auto; min-width:0; }

.blloe-comment__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.blloe-comment__author-wrap { display:flex; align-items:center; gap:6px; min-width:0; }
.blloe-comment__author { font-size:15px; font-weight:600; color:#222; line-height:1.2; }
.blloe-comment__author a { color:inherit; }
.blloe-comment__badge {
  font-size:11px;
  color:#ff4b6a;
  background:rgba(255,75,106,0.1);
  padding:2px 6px;
  border-radius:999px;
  line-height:1.2;
}
.blloe-comment__badge--pin {
  color:#f59e0b;
  background:rgba(245,158,11,0.15);
}
.blloe-comment__more { position:relative; flex:0 0 auto; }
.blloe-comment__more-btn {
  width:28px;
  height:28px;
  border:none;
  background:transparent;
  color:#9aa3af;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.blloe-comment__more-btn svg { width:18px; height:18px; fill:currentColor; }
.blloe-comment__more-menu {
  position:absolute;
  right:0;
  top:100%;
  margin-top:6px;
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  min-width:110px;
  padding:6px 0;
  z-index:30;
}
.blloe-comment__more-menu[hidden] { display:none; }
.blloe-comment__more-item {
  width:100%;
  text-align:left;
  background:transparent;
  border:none;
  padding:8px 12px;
  font-size:13px;
  color:#374151;
  cursor:pointer;
}
.blloe-comment__more-item:hover { background:#f5f5f5; }

.blloe-comment__like {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  background:transparent;
  padding:0;
  color:#9aa3af;
  font-size:13px;
  cursor:pointer;
}
.blloe-comment__like svg { width:20px; height:20px; display:block; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.blloe-comment__like:hover { color:#ff4b6a; }
.blloe-comment__like.is-liked { color:#ff4b6a; }
.blloe-comment__like.is-liked svg { fill:currentColor; }
.blloe-comment__like.is-loading { opacity:0.6; pointer-events:none; }

.blloe-comment__content { margin-top:8px; font-size:14px; line-height:1.8; color:#333; word-break:break-word; }
.blloe-comment__content p { margin:0; }
.blloe-comment__content p + p { margin-top:8px; }
.blloe-comment__content .blloe-comment-smilie { width:22px; height:22px; display:inline-block; vertical-align:-4px; }
.blloe-comment__content .blloe-comment-image { max-width:220px; max-height:220px; width:auto; height:auto; border-radius:10px; display:block; margin-top:8px; }
.blloe-comment__pending { display:block; margin-top:6px; font-size:12px; color:#9aa3af; }

.blloe-comment__replying { margin:0 0 2px; font-size:14px; color:#6b7280; }
.blloe-comment__at { color:#ff4b6a; font-weight:600; text-decoration:none; }
.blloe-comment__at:hover { text-decoration:underline; }

.blloe-comment__foot { margin-top:10px; display:flex; flex-direction:column; gap:8px; color:#9aa3af; font-size:13px; }
.blloe-comment__meta { display:flex; align-items:center; gap:10px; }
.blloe-comment__time { color:#9aa3af; }
.blloe-comment__location { color:#9aa3af; font-size:13px; }

.blloe-comment__actions { display:flex; align-items:center; gap:16px; }
.blloe-comment__reply,
.blloe-comment__like {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  background:transparent;
  padding:0;
  color:#9aa3af;
  font-size:13px;
  cursor:pointer;
}
.blloe-comment__reply svg {
  width:20px;
  height:20px;
  display:block;
  stroke:currentColor;
  stroke-width:1.8;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.blloe-comment__reply:hover { color:#ff4b6a; }


.blloe-comments .comment-list .children {
  margin:10px 0 0 60px;
  padding-left:18px;
  position:relative;
}
.blloe-comments .comment-list .children::before {
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:2px;
  background:#eee;
  border-radius:999px;
}
.blloe-comments .comment-list .children > li { padding:14px 0 0; }
.sidebar-card { border-radius:16px; background:var(--bg-card); box-shadow:0 6px 18px rgba(0,0,0,0.05); padding:12px 14px 14px; margin-bottom:14px; }
.sidebar-title { font-size:14px; font-weight:500; margin-bottom:8px; color:#333; }


.post-sidebar .sidebar-card ul { list-style:none; margin:0; padding:0; }
.post-sidebar .sidebar-card li+li { margin-top:8px; }
.post-sidebar .sidebar-card a { color:#555; font-size:13px; }
.post-sidebar .sidebar-card a:hover { color:#ff5a5f; }
.post-sidebar .sidebar-card .tagcloud a { display:inline-block; padding:2px 8px; margin:0 6px 6px 0; border-radius:999px; background:var(--bg-input); font-size:11px !important; color:#777; }
.blloe-widget-empty { font-size:12px; color:#999; padding:6px 2px; }
.blloe-postlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.blloe-postlist li+li { margin-top:0; }
.blloe-postlist-item { margin:0; padding:8px 4px; border-radius:12px; background:transparent; border:none; transition:background 0.2s ease, color 0.2s ease; }
.blloe-postlist-item:hover { background:var(--bg-input); }
.blloe-postlist-link { display:flex; align-items:flex-start; gap:10px; color:inherit; text-decoration:none; width:100%; }
.blloe-postlist-thumb { width:96px; height:64px; border-radius:10px; overflow:hidden; background:var(--bg-input); flex:0 0 96px; display:flex; align-items:center; justify-content:center; }
.blloe-postlist-img { width:100%; height:100%; object-fit:cover; display:block; }
.blloe-postlist-thumb-placeholder { width:30px; height:30px; border-radius:10px; background:rgba(0,0,0,0.08); }
.blloe-postlist-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.blloe-postlist-title-row { display:flex; align-items:flex-start; gap:8px; }
.blloe-postlist-rank { width:18px; height:18px; border-radius:5px; font-size:11px; line-height:1; color:#9ca3af; background:rgba(156,163,175,0.12); border:1px solid rgba(156,163,175,0.2); display:flex; align-items:center; justify-content:center; flex:0 0 18px; margin-top:2px; }
.blloe-postlist-item:nth-child(1) .blloe-postlist-rank { color:#ff4b6a; background:rgba(255,75,106,0.12); border-color:rgba(255,75,106,0.25); }
.blloe-postlist-item:nth-child(2) .blloe-postlist-rank { color:#ff8a34; background:rgba(255,138,52,0.14); border-color:rgba(255,138,52,0.25); }
.blloe-postlist-item:nth-child(3) .blloe-postlist-rank { color:#5c7cff; background:rgba(92,124,255,0.14); border-color:rgba(92,124,255,0.25); }
.blloe-postlist-item:nth-child(4) .blloe-postlist-rank { color:#3bb78f; background:rgba(59,183,143,0.14); border-color:rgba(59,183,143,0.25); }
.blloe-postlist-item:nth-child(5) .blloe-postlist-rank { color:#9ca3af; background:rgba(156,163,175,0.12); border-color:rgba(156,163,175,0.2); }
.blloe-postlist-title { font-size:13px; font-weight:600; color:#2b2b2b; line-height:1.45; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.blloe-postlist-meta { font-size:11px; color:#9aa3af; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }
.blloe-postlist-time { display:inline-flex; align-items:center; gap:4px; }
.blloe-postlist-views { display:inline-flex; align-items:center; gap:4px; color:#9aa3af; }
.blloe-postlist-views svg { width:14px; height:14px; stroke:#b0b7c3; }
.blloe-postlist-link:hover .blloe-postlist-title { color:#ff4b6a; }
.blloe-postlist-item--skeleton { background:transparent; border:none; box-shadow:none; }
.blloe-postlist-thumb-skeleton,
.blloe-postlist-text-skeleton,
.blloe-postlist-meta-skeleton { background:linear-gradient(118deg, rgba(121,121,121,0.12) 25%, rgba(121,121,121,0.2) 37%, rgba(121,121,121,0.12) 63%); animation:blloe-placeholder 1.5s ease infinite; background-size:400% 100%; }
body.dark .blloe-postlist-thumb-skeleton,
body.dark .blloe-postlist-text-skeleton,
body.dark .blloe-postlist-meta-skeleton { background:linear-gradient(118deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.16) 37%, rgba(255,255,255,0.08) 63%); }
.blloe-postlist-thumb-skeleton { width:100%; height:100%; border-radius:10px; display:block; }
.blloe-postlist-item--skeleton .blloe-postlist-title { display:block; -webkit-line-clamp:unset; -webkit-box-orient:unset; }
.blloe-postlist-text-skeleton { width:100%; height:12px; border-radius:6px; display:block; }
.blloe-postlist-text-skeleton + .blloe-postlist-text-skeleton { margin-top:6px; }
.blloe-postlist-text-skeleton--short { width:70%; }
.blloe-postlist-meta-skeleton { height:10px; border-radius:6px; display:block; }
.blloe-postlist-meta-skeleton--time { width:40%; }
.blloe-postlist-meta-skeleton--views { width:30%; }
@keyframes blloe-placeholder {
  0% { background-position:100% 50%; }
  100% { background-position:0 50%; }
}
@media (min-width: 992px) {
  .post-sidebar.is-sticky { position:sticky; top:88px; align-self:flex-start; }
}
body.dark .blloe-postlist-item { background:transparent; }
body.dark .blloe-postlist-title { color:#e5e7eb; }
body.dark .blloe-postlist-meta { color:#9ca3af; }
body.dark .blloe-postlist-views svg { stroke:#9ca3af; }

.blloe-author-card { display:flex; flex-direction:column; gap:12px; }
.blloe-author-card__top { display:flex; gap:12px; align-items:flex-start; }
.blloe-author-card__avatar { position:relative; display:block; }
.blloe-author-card__avatar img { width:54px; height:54px; border-radius:50%; display:block; box-shadow:0 0 0 1px rgba(0,0,0,0.06); }
.blloe-author-card__badge { position:absolute; right:-2px; bottom:-2px; width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
.blloe-author-card__badge .profile-user-badge { width:18px; height:18px; display:block; }
.blloe-author-card__meta { flex:1 1 auto; min-width:0; }
.blloe-author-card__name { display:inline-block; font-size:14px; font-weight:600; color:#333; text-decoration:none; }
.blloe-author-card__name:hover { color:#ff4b6a; }
.blloe-author-card__desc { font-size:12px; color:#999; line-height:1.5; margin-top:4px; max-height:3em; overflow:hidden; }
.blloe-author-card__stats { display:flex; gap:16px; padding:0; }
.blloe-author-card__stat { flex:1 1 0; text-align:center; }
.blloe-author-card__label { display:block; font-size:11px; color:#888; margin-bottom:2px; }
.blloe-author-card__count { font-size:14px; font-weight:600; color:#333; }
.blloe-author-card__actions { margin-top:2px; }
.blloe-author-card .profile-follow-btn { width:100%; justify-content:center; padding:8px 16px; font-size:13px; border-radius:12px; }
body.dark .blloe-author-card__name { color:#e5e7eb; }
body.dark .blloe-author-card__desc { color:#9ca3af; }
body.dark .blloe-author-card__count { color:#e5e7eb; }

.blloe-widget-toc { display:flex; flex-direction:column; gap:8px; }
.blloe-toc-empty { font-size:12px; color:#999; }
.blloe-toc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.blloe-toc-item { margin:0; }
.blloe-toc-link { color:#555; font-size:12px; text-decoration:none; display:block; padding:4px 6px; border-radius:8px; transition:background 0.2s ease, color 0.2s ease; }
.blloe-toc-link:hover { color:#ff4b6a; background:rgba(255,75,106,0.08); }
.blloe-toc-h3 .blloe-toc-link { padding-left:14px; }
.blloe-toc-h4 .blloe-toc-link { padding-left:22px; }
      .login-modal { position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; }
      .login-modal.open { display:flex; }
      .login-modal__overlay { position:absolute; inset:0; background:rgba(15,23,42,0.55); backdrop-filter:blur(4px); }
      .login-modal__panel { position:relative; z-index:1; width:880px; max-width:96%; background:transparent; border-radius:18px; }
      .login-modal__shell { display:flex; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 20px 60px rgba(15,23,42,0.35); height:520px; transition:height 0.3s ease; }
      .login-modal__shell.has-register { height:580px; }
      .login-modal__shell.has-lost { height:480px; }
      .login-modal__side { flex:3 1 0; min-width:0; background:#000; }
      .login-modal__side-img { width:100%; height:100%; display:block; object-fit:cover; }
      .login-modal__main { position:relative; flex:2 1 0; min-width:0; background:#fff; padding:36px 32px 68px; min-height:0; display:flex; flex-direction:column; justify-content:flex-start; overflow-y:auto; }
      .login-modal__close { position:absolute; top:16px; right:18px; border:none; background:transparent; font-size:26px; line-height:1; cursor:pointer; color:#999; z-index:1; }
      .login-modal__header { text-align:left; margin-bottom:16px; }
      .login-modal__head-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
      .login-modal__head-link { font-size:12px; color:#9aa3af; text-decoration:none; }
      .login-modal__head-link:hover { color:#ff4b6a; }
      .login-modal__title { font-size:22px; font-weight:600; letter-spacing:-0.02em; margin:0; color:#222; }
      .login-modal__subtitle { font-size:13px; color:#666; margin:0; font-weight:500; }
      .login-modal__subtitle a { color:#ff4b6a; }
      .login-modal__tabs { display:flex; align-items:flex-end; border-bottom:1px solid #f0f0f0; margin:8px 0 16px; }
      .login-modal__tab { flex:0 0 auto; padding:0 0 10px; margin-right:24px; border:none; background:transparent; font-size:14px; color:#888; cursor:pointer; position:relative; }
      .login-modal__tab.is-active { color:#333; font-weight:500; }
      .login-modal__tab.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#ff4b6a; border-radius:999px; }
      .login-modal__pane { display:none; }
      .login-modal__pane.is-active { display:block; }
.login-modal__qrcode-box { width:220px; height:220px; margin:12px auto 8px; border-radius:16px; background:var(--bg-input); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px #e8e8e8 inset; }
      .login-modal__qrcode-desc { text-align:center; font-size:12px; color:#999; }
      .login-modal__body { font-size:13px; max-width:360px; margin:0; }
      .login-modal__body label { font-size:12px; color:#777; display:block; margin-bottom:4px; }
      .login-modal__body .login-username,
      .login-modal__body .login-password { margin-bottom:14px; }
      .login-modal__body .login-remember { margin-bottom:12px; }
      .login-modal__body .login-submit { margin-bottom:0; }
      .login-modal__body input[type="text"],
      .login-modal__body input[type="password"],
      .login-modal__body input[type="email"] { width:100%; padding:8px 10px; border-radius:8px; border:1px solid #e0e0e0; font-size:13px; margin-bottom:8px; outline:none; transition:border-color 0.15s ease, box-shadow 0.15s ease; }
      .login-modal__body input[type="text"]:focus,
      .login-modal__body input[type="password"]:focus,
      .login-modal__body input[type="email"]:focus { border-color:#ff4b6a; box-shadow:0 0 0 1px rgba(255,75,106,0.25); }
      .login-modal__code-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
      .login-modal__code-row input { margin-bottom:0; }
      .login-modal__code-btn { padding:8px 12px; border-radius:8px; border:1px solid #e0e0e0; background:#fff; font-size:12px; color:#666; cursor:pointer; white-space:nowrap; transition:border-color 0.15s ease, color 0.15s ease; }
      .login-modal__code-btn:hover { border-color:#ff4b6a; color:#ff4b6a; }
      .login-modal__code-btn.is-disabled { cursor:not-allowed; opacity:0.65; }
      .login-modal__body input[type="submit"] { width:100%; padding:9px 0; border-radius:999px; border:none; background:#ff4b6a; color:#fff; font-size:14px; cursor:pointer; display:inline-block; }
      .login-modal__body .login-remember label { display:flex; align-items:center; gap:6px; font-size:12px; color:#999; }
      .login-modal__body .login-remember input[type="checkbox"] { width:14px; height:14px; border-radius:4px; border:1px solid #ddd; }
      .login-modal__body input[type="submit"]:hover { background:#ff3256; }
      .login-modal__links { margin:12px 0 0; font-size:12px; display:flex; justify-content:space-between; gap:12px; color:#999; max-width:360px; }
      .login-modal__links--single { justify-content:flex-start; }
      .login-modal__links a { color:#999; }
      .login-modal__other { position:absolute; left:32px; right:32px; bottom:20px; border-top:1px solid #f5f5f5; padding-top:8px; font-size:12px; color:#999; text-align:center; }
      .login-modal__other-line { margin:10px 0 6px; display:flex; align-items:center; justify-content:center; gap:10px; }
      .login-modal__other-line::before,
      .login-modal__other-line::after { content:""; width:60px; height:1px; background:#eee; }
.login-modal__oauth { display:flex; justify-content:center; gap:18px; margin-top:6px; }
      .login-modal__oauth-icon { width:36px; height:36px; border-radius:50%; background:#f5f5f5; display:flex; align-items:center; justify-content:center; color:#999; transition:background 0.15s ease, transform 0.15s ease, color 0.15s ease; }
      .login-modal__oauth-icon i { font-size:18px; line-height:1; }
      .login-modal__oauth-icon:hover { background:#ffe4ea; color:#ff4b6a; transform:translateY(-1px); }
      .login-modal__tips { margin-top:10px; font-size:11px; color:#bbb; text-align:center; }
      .login-modal__tips a { color:#999; text-decoration:none; }
      .login-modal__tips a:hover { color:#ff4b6a; }
.card::before { display:none; }
.card-inner { position:relative; border-radius:16px; overflow:hidden; background:var(--bg-card); border:1px solid #f0f0f0; box-shadow:0 8px 20px rgba(0,0,0,0.04); transition:transform 0.18s ease, box-shadow 0.18s ease; }
.card:hover .card-inner { transform:none; box-shadow:none; }
.card-link { -webkit-tap-highlight-color: transparent; }
.card-link:focus { outline:none; }
.card-link:focus-visible { outline:none; }
.home-grid .card-inner,
.home-grid .card:hover .card-inner { box-shadow:none; transform:none; }
.card-link { display:flex; flex-direction:column; color:inherit; text-decoration:none; }
.card-thumb { position:relative; overflow:hidden; background:var(--bg-input); width:100%; border-radius:16px 16px 0 0; }
.card-thumb img { width:100%; height:auto; display:block; transition:transform 0.25s ease-out; }
.card:hover .card-thumb img { transform:scale(1.04); }
.cat-pill { position:absolute; left:10px; top:10px; padding:4px 12px; border-radius:999px; background:rgba(0,0,0,0.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff; font-size:12px; font-weight:500; z-index:2; }


.card--vertical .card-like,
.card--waterfall .card-like,
.card--category-grid .card-like { position:absolute; right:10px; top:10px; width:40px; height:40px; border-radius:12px; border:none; background:rgba(255,255,255,0.95); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; opacity:0; transform:scale(0.8); transition:opacity 0.2s ease, transform 0.2s ease, background 0.15s ease; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.card--vertical:hover .card-like,
.card--waterfall:hover .card-like,
.card--category-grid:hover .card-like { opacity:1; transform:scale(1); }
.card--vertical .card-like:active,
.card--waterfall .card-like:active,
.card--category-grid .card-like:active { transform:scale(0.92); }
.card--vertical .card-like-icon,
.card--waterfall .card-like-icon,
.card--category-grid .card-like-icon { width:22px; height:22px; color:#ccc; transition:color 0.15s ease; }
.card-like-icon--on { display:none; color:#ff4b6a; }
.card-like-icon--off { display:block; }
.card-like.is-liked .card-like-icon--on { display:block; }
.card-like.is-liked .card-like-icon--off { display:none; }
.card--vertical .card-like.is-liked,
.card--waterfall .card-like.is-liked,
.card--category-grid .card-like.is-liked { background:rgba(255,240,244,0.95); }
body.dark .card--vertical .card-like,
body.dark .card--waterfall .card-like,
body.dark .card--category-grid .card-like { background:rgba(40,40,40,0.9); }
body.dark .card--vertical .card-like.is-liked,
body.dark .card--waterfall .card-like.is-liked,
body.dark .card--category-grid .card-like.is-liked { background:rgba(255,75,106,0.2); }
body.dark .card--vertical .card-like-icon,
body.dark .card--waterfall .card-like-icon,
body.dark .card--category-grid .card-like-icon { color:#666; }

.card-body { position:relative; padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; }
.card-title { font-size:15px; font-weight:600; margin:0; color:#222; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-excerpt { font-size:13px; color:#777; margin:0; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-meta-row { font-size:12px; color:#9aa3af; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-meta { display:inline-flex; align-items:center; gap:6px; }
.card-link:hover .card-title { color:#ff4b6a; }
.card--waterfall .card-inner { background:transparent; border:none; box-shadow:none; }
.card--waterfall:hover .card-inner { transform:none; box-shadow:none; }
.card--waterfall .card-thumb { border-radius:16px; }
.card--waterfall .card-body { position:absolute; left:0; right:0; bottom:0; padding:6px 10px 8px; background:linear-gradient(to top,rgba(0,0,0,0.7),transparent); opacity:0; transform:translateY(6px); transition:opacity 0.18s ease,transform 0.18s ease; pointer-events:none; }
.card--waterfall:hover .card-body,
.card--waterfall:focus-within .card-body { opacity:1; transform:translateY(0); }
.card--waterfall .card-title { font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card--waterfall .card-link:hover .card-title { color:#fff; }
.card--waterfall .card-excerpt { color:rgba(255,255,255,0.85); font-size:12px; }
.card--waterfall .card-meta-row { color:rgba(255,255,255,0.7); font-size:11px; }
.card--category-grid .card-inner { border-radius:12px; background:transparent; border:none; box-shadow:none; }
.card--category-grid:hover .card-inner { transform:none; box-shadow:none; }
.card--category-grid .card-thumb { border-radius:12px; aspect-ratio:4/3; }
.card--category-grid .card-thumb img { height:100%; object-fit:cover; }
.card--category-grid:hover .card-thumb img { transform:scale(1.08); }
.card--category-grid .card-body { position:absolute; left:0; right:0; bottom:0; padding:16px 12px; background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 70%, transparent 100%); opacity:1; transition:opacity 0.25s ease; pointer-events:none; }
.card--category-grid:hover .card-body,
.card--category-grid:focus-within .card-body { opacity:1; }
.card--category-grid .card-title { font-size:13px; color:#fff; line-height:1.4; white-space:normal; -webkit-line-clamp:2; }
.card--category-grid .card-link:hover .card-title { color:#fff; }
.card--category-grid .card-excerpt,
.card--category-grid .card-meta-row { display:none; }
.card--category-grid .card-like { width:32px; height:32px; border-radius:8px; right:8px; top:8px; opacity:0; transform:scale(0.85); transition:opacity 0.25s ease, transform 0.25s ease, background 0.2s ease; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.card--category-grid:hover .card-like { opacity:1; transform:scale(1); }
.card--category-grid.card--no-thumb .card-body { position:relative; opacity:1; background:var(--bg-card); pointer-events:auto; }
.card--category-grid.card--no-thumb .card-title { color:#222; }
.card--category-grid.card--no-thumb .card-link:hover .card-title { color:#ff4b6a; }
body.dark .card--category-grid.card--no-thumb .card-body { background:#181818; }
body.dark .card--category-grid.card--no-thumb .card-title { color:#e5e7eb; }
.meta-tags { color:#999; }
.load-more { margin:20px auto 0; display:block; padding:6px 18px; border-radius:999px; border:1px solid #ddd; font-size:13px; color:#666; background:#fff; cursor:pointer; text-align:center; transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.load-more:hover { background:#f8f8f8; border-color:#ccc; }
body.dark .load-more { background:#2a2a2a; border-color:#444; color:#aaa; }
body.dark .load-more:hover { background:#333; border-color:#555; color:#ccc; }
.load-more.is-loading { pointer-events:none; color:transparent; position:relative; }
.load-more.is-loading::after { content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border:2px solid #ddd; border-top-color:#ff4b6a; border-radius:50%; animation:load-more-spin 0.6s linear infinite; }
body.dark .load-more.is-loading::after { border-color:#555; border-top-color:#ff4b6a; }
@keyframes load-more-spin { to { transform:rotate(360deg); } }
.load-more.is-end { cursor:default; opacity:0.6; border-style:dashed; }
.load-more.is-end:hover { background:#fff; border-color:#ddd; }
body.dark .load-more.is-end:hover { background:#2a2a2a; border-color:#444; }
.blloe-infinite-scroll .load-more { opacity:0; height:1px; padding:0; margin:0; border:0; pointer-events:none; }
.blloe-infinite-scroll .load-more.is-end { opacity:0.8; height:auto; padding:6px 18px; margin:20px auto 0; border:1px dashed #ddd; pointer-events:none; }
body.dark .blloe-infinite-scroll .load-more.is-end { border-color:#444; }


.category-card-like {
  position:absolute;
  right:10px;
  top:10px;
  width:40px;
  height:40px;
  border-radius:12px;
  border:none;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
  opacity:0;
  transform:scale(0.8);
  transition:opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.category-card:hover .category-card-like {
  opacity:1;
  transform:scale(1);
}

.category-card-like:active {
  transform:scale(0.92);
}

.category-card-like-icon {
  width:22px;
  height:22px;
  color:#ccc;
  transition:color 0.15s ease;
}

.category-card-like-icon--on {
  display:none;
  color:#ff4b6a;
}

.category-card-like-icon--off {
  display:block;
}

.category-card-like.is-liked .category-card-like-icon--on {
  display:block;
}

.category-card-like.is-liked .category-card-like-icon--off {
  display:none;
}

.category-card-like.is-liked {
  background:rgba(255,240,244,0.95);
}


body.dark .category-card-inner {
  background:#181818;
}

body.dark .category-card:hover .category-card-inner {
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}

body.dark .category-card-body {
  background:#181818;
}

body.dark .category-card-title {
  color:#f3f4f6;
}

body.dark .category-card-date {
  color:#666;
}

body.dark .category-card-like {
  background:rgba(40,40,40,0.9);
}

body.dark .category-card-like.is-liked {
  background:rgba(255,75,106,0.2);
}

body.dark .category-card-like-icon {
  color:#666;
}


.widget-grid-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.widget-grid-more {
  width:32px;
  height:32px;
  border-radius:8px;
  background:#f5f5f5;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  flex-shrink:0;
}

.widget-grid-more:hover {
  background:#e8e8e8;
  transform:translateY(-2px);
}

.widget-grid-more img {
  width:16px;
  height:16px;
  opacity:0.5;
  transition:opacity 0.2s ease;
  filter:brightness(0);
}

.widget-grid-more:hover img {
  opacity:0.7;
}

body.dark .widget-grid-more {
  background:#2a2a2a;
}

body.dark .widget-grid-more:hover {
  background:#333;
}

body.dark .widget-grid-more img {
  filter:brightness(0) invert(1);
  opacity:0.5;
}

body.dark .widget-grid-more:hover img {
  opacity:0.7;
}

.widget-grid-cards { margin-top:0; }
.widget-grid-cards .card { margin-bottom:0; }


.blloe-dual-module-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.blloe-dual-module-card {
  display:grid;
  grid-template-columns:42% 1fr;
  gap:16px;
  padding:14px;
  border-radius:16px;
  background:var(--bg-card);
  border:1px solid #f0f0f0;
  box-shadow:0 8px 20px rgba(0,0,0,0.04);
  align-items:stretch;
}

.blloe-dual-module-thumb {
  border-radius:14px;
  overflow:hidden;
  background:var(--bg-input);
  position:relative;
  min-height:140px;
}

.blloe-dual-module-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.blloe-dual-module-badge {
  position:absolute;
  left:10px;
  top:10px;
  background:rgba(255,75,106,0.9);
  color:#fff;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
}

.blloe-dual-module-body {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.blloe-dual-module-title {
  font-size:18px;
  font-weight:600;
  margin:0;
  color:#222;
  line-height:1.35;
}

.blloe-dual-module-desc {
  font-size:13px;
  color:#666;
  margin:0;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.blloe-dual-module-meta {
  font-size:12px;
  color:#999;
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:2px;
}

.blloe-dual-module-more {
  margin-left:auto;
  background:#f3f4f7;
  border-radius:8px;
  padding:4px 10px;
  font-size:12px;
  color:#555;
  text-decoration:none;
}

.blloe-dual-module-more:hover {
  background:#e9ecf2;
  color:#333;
}

.blloe-dual-module-list {
  margin:6px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.blloe-dual-module-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:#333;
}

.blloe-dual-module-item a {
  display:flex;
  align-items:center;
  gap:6px;
  color:inherit;
  text-decoration:none;
  min-width:0;
}

.blloe-dual-module-item a:hover { color:#ff4b6a; }

.blloe-dual-module-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ff4b6a;
  flex-shrink:0;
}

.blloe-dual-module-item-title {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.blloe-dual-module-time {
  white-space:nowrap;
  font-size:12px;
  color:#999;
}

body.dark .blloe-dual-module-card {
  background:#161616;
  border-color:#222;
  box-shadow:none;
}

body.dark .blloe-dual-module-title { color:#e5e7eb; }
body.dark .blloe-dual-module-desc { color:#9aa3af; }
body.dark .blloe-dual-module-meta,
body.dark .blloe-dual-module-item,
body.dark .blloe-dual-module-time { color:#6b7280; }
body.dark .blloe-dual-module-more { background:#222; color:#cbd5e1; }

@media (max-width:900px) {
  .blloe-dual-module-grid { grid-template-columns:1fr; }
}

@media (max-width:720px) {
  .blloe-dual-module-card { grid-template-columns:140px 1fr; }
}


.archive-header { text-align:center; padding:32px 16px 20px; }
.archive-title { font-size:26px; font-weight:600; color:#222; margin:0 0 8px; }
.archive-desc { font-size:14px; color:#888; margin:0; max-width:560px; margin:0 auto; line-height:1.6; }
.tag-icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#ff4b6a 0%,#ff8a9b 100%); color:#fff; margin-bottom:12px; }
.tag-icon svg { width:22px; height:22px; }
.tag-results-header { text-align:center; margin:0 0 24px; padding:20px 0; }
.tag-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 20px;
  background:#fff5f5;
  color:#ff2442;
  font-size:18px;
  font-weight:600;
  border-radius:999px;
  margin-bottom:8px;
}
.tag-badge-text { display:inline-flex; align-items:center; }
.tag-badge-text::before { content:"#"; margin-right:6px; }
.tag-badge svg { width:16px; height:16px; }
.tag-results-count { margin:0; font-size:14px; color:#999; }
body.dark .archive-title { color:#f3f4f6; }
body.dark .archive-desc { color:#9aa3af; }
body.dark .tag-icon { background:linear-gradient(135deg,#ff4b6a 0%,#ff6b7f 100%); }
body.dark .tag-badge { background:rgba(255,36,66,0.16); color:#ff6b81; }
body.dark .tag-results-count { color:#9aa3af; }


.pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin:28px 0 0; flex-wrap:wrap; }
.pagination ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:6px; }
.pagination .page-numbers { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:6px; }
.pagination li { margin:0; padding:0; }
.pagination .page-numbers li { margin:0; padding:0; }
.pagination a,
.pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 12px; border-radius:10px; font-size:13px; color:#555; background:var(--bg-card); border:1px solid #e8e8e8; transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.pagination a:hover { background:#ff4b6a; color:#fff; border-color:#ff4b6a; }
.pagination .current { background:#ff4b6a; color:#fff; border-color:#ff4b6a; font-weight:500; }
.pagination .dots { background:transparent; border:none; color:#999; }
body.dark .pagination a,
body.dark .pagination span { background:#181818; border-color:#222; color:#ccc; }
body.dark .pagination a:hover { background:#ff4b6a; color:#fff; border-color:#ff4b6a; }
body.dark .pagination .current { background:#ff4b6a; color:#fff; border-color:#ff4b6a; }
body.dark .pagination .dots { background:transparent; border:none; color:#666; }


.archive-empty { text-align:center; padding:60px 20px; color:#999; font-size:14px; }
body.dark .archive-empty { color:#666; }
body.page-template-page-follow-php .archive-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:260px;
}
body.page-template-page-follow-php .archive-empty .login-btn{ margin-top:12px; }
body.page-template-page-follow-php .home-grid.is-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:320px;
}
body.page-template-page-follow-php .home-grid.is-empty .archive-empty{
  padding:0;
  min-height:0;
}

footer { border-top:1px solid #f3f3f3; padding:16px 24px; font-size:13px; color:#888; background:#fff; }
.footer-top { border-bottom:1px solid #f3f3f3; padding:26px 24px; background:#fff; }
.footer-top-inner { max-width:var(--blloe-container); margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.footer-widgets { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; }
.footer-widget { background:transparent; }
.footer-widget-title { font-size:14px; font-weight:600; margin:0 0 10px; color:#333; }
.blloe-links { display:flex; flex-wrap:wrap; gap:10px; }
.blloe-link { color:#666; text-decoration:none; font-size:13px; padding:4px 8px; border-radius:8px; background:#f7f7f7; }
.blloe-link:hover { color:#ff4b6a; background:rgba(255,75,106,0.12); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; max-width:var(--blloe-container); margin:0 auto; flex-wrap:wrap; gap:8px; padding:12px 0; }
.footer-links { max-width:var(--blloe-container); margin:0 auto; padding:8px 0 16px; display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:#777; }
.footer-links a { color:#777; }
.footer-links a:hover { color:#111; }
.footer-left { display:flex; align-items:center; flex-wrap:wrap; gap:0; }
.footer-sep { margin:0 8px; color:#ccc; }
.footer-right { color:#aaa; }
body.dark footer { background:#111; color:#777; border-top-color:#222; }
body.dark .footer-top { background:#111; border-bottom-color:#222; }
body.dark .footer-widget-title { color:#e5e7eb; }
body.dark .blloe-link { color:#9aa3af; background:#1b1b1b; }
body.dark .blloe-link:hover { color:#ff4b6a; background:rgba(255,75,106,0.12); }
body.dark .footer-links a { color:#888; }
body.dark .footer-sep { color:#444; }
body.dark .footer-right { color:#555; }
@media (max-width:720px) { .footer-top { padding:24px 18px; } .footer-columns { grid-template-columns:1fr; } .footer-inner { flex-direction:column; text-align:center; } .footer-left { justify-content:center; } .footer-links { justify-content:center; } }

.qmsg.qmsg-wrapper {
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-size:13px;
  font-variant:tabular-nums;
  line-height:1;
  list-style:none;
  font-feature-settings:"tnum";
  position:fixed;
  top:72px;
  left:0;
  z-index:9999999;
  width:100%;
  pointer-events:none;
  color:#000;
}
.qmsg .qmsg-item {
  padding:8px;
  text-align:center;
  -webkit-animation-duration:.3s;
  animation-duration:.3s;
  position:relative;
}
.qmsg .qmsg-item .qmsg-count {
  text-align:center;
  position:absolute;
  left:-4px;
  top:-4px;
  background-color:#FF3355;
  color:#fff;
  font-size:12px;
  line-height:16px;
  border-radius:2px;
  display:inline-block;
  min-width:16px;
  height:16px;
  -webkit-animation-duration:.3s;
  animation-duration:.3s;
}
.qmsg .qmsg-item:first-child {
  margin-top:-8px;
}
.qmsg .qmsg-content {
  text-align:left;
  position:relative;
  display:inline-block;
  padding:10px 16px;
  background:#fff;
  border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  pointer-events:all;
  max-width:80%;
  min-width:80px;
}

.qmsg .qmsg-content-error {
  background:#ffecec;
  color:#c0392b;
}
.qmsg .qmsg-content-success {
  background:#e9ffed;
  color:#1e7e34;
}
.qmsg .qmsg-content-info {
  background:#e8f4ff;
  color:#1f5fbf;
}
.qmsg-content > div {
  display:flex;
  align-items:center;
}
.qmsg .qmsg-content [class^="qmsg-content-"] {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:flex;
  align-items:center;
}
.qmsg .qmsg-content .qmsg-content-with-close {
  padding-right:20px;
}
.qmsg .qmsg-icon {
  display:inline-block;
  color:inherit;
  font-style:normal;
  text-align:center;
  text-transform:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  top:0;
  margin-right:8px;
  font-size:16px;
}
.qmsg .qmsg-icon svg {
  display:inline-block;
}
.qmsg .qmsg-content-info .qmsg-icon {
  color:#1890ff;
  user-select:none;
}
.qmsg .qmsg-icon-close {
  position:absolute;
  top:11px;
  right:5px;
  padding:0;
  overflow:hidden;
  font-size:12px;
  line-height:22px;
  background-color:transparent;
  border:none;
  outline:none;
  cursor:pointer;
  color:rgba(0,0,0,.45);
  transition:color .3s;
}
.qmsg .qmsg-icon-close:hover>svg path {
  stroke:#555;
}

.search-modal {
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding-top:100px;
}
.search-modal.is-active {
  display:flex;
}
.search-modal__overlay {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.search-modal__content {
  position:relative;
  width:640px;
  max-width:90%;
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
  animation:searchModalSlideIn 0.3s ease;
}
@keyframes searchModalSlideIn {
  from { opacity:0; transform:translateY(-20px); }
  to { opacity:1; transform:translateY(0); }
}
.search-modal__close {
  position:absolute;
  right:12px;
  top:12px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:#999;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s ease, color 0.2s ease;
  z-index:2;
}
.search-modal__close:hover {
  background:#f5f5f5;
  color:#333;
}
.search-modal__close .iconfont {
  font-size:20px;
}
.search-modal__header {
  padding:24px 24px 20px;
  border-bottom:1px solid #eee;
}
.search-modal__form {
  display:flex;
  align-items:center;
  gap:12px;
}
.search-modal__input {
  flex:1;
  border:none;
  outline:none;
  font-size:16px;
  color:#333;
  background:transparent;
  padding:0;
}
.search-modal__input::placeholder {
  color:#aaa;
}
.search-modal__submit {
  width:40px;
  height:40px;
  border-radius:10px;
  border:none;
  background:#f5f5f5;
  color:#666;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s ease, color 0.2s ease;
  flex-shrink:0;
}
.search-modal__submit:hover {
  background:#eee;
  color:#333;
}
.search-modal__submit:active {
  background:#e5e5e5;
}
.search-modal__submit .iconfont {
  font-size:20px;
  line-height:1;
}
.search-modal__body {
  padding:24px;
  max-height:500px;
  overflow-y:auto;
}
.search-modal__tips {
  text-align:center;
  color:#999;
  font-size:14px;
}
.search-modal__tips p {
  margin:0;
}
.search-modal__image-btn {
  width:40px;
  height:40px;
  border-radius:10px;
  border:none;
  background:#f5f5f5;
  color:#666;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  flex-shrink:0;
}
.search-modal__image-btn:hover {
  background:#eee;
  color:#333;
}
.search-modal__image-btn svg {
  width:20px;
  height:20px;
  display:block;
}


.image-search-loading {
  text-align:center;
  padding:20px;
}
.loading-spinner {
  width:40px;
  height:40px;
  border:3px solid #f0f0f0;
  border-top-color:#ff4b6a;
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin:0 auto 12px;
}
@keyframes spin {
  to { transform:rotate(360deg); }
}
.loading-progress {
  font-size:13px;
  color:#666;
  margin-top:8px;
}


.image-search-results {
  
}
.search-results-title {
  font-size:15px;
  font-weight:600;
  color:#333;
  margin:0 0 12px;
  padding:0 4px;
}
.search-results-list {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.search-result-item {
  display:flex;
  gap:12px;
  padding:12px;
  background:#f8f9fa;
  border-radius:10px;
  text-decoration:none;
  transition:all 0.2s;
}
.search-result-item:hover {
  background:#f0f1f3;
  transform:translateY(-1px);
}
.search-result-thumb {
  flex-shrink:0;
  width:80px;
  height:60px;
  border-radius:6px;
  overflow:hidden;
  background:#e5e5e5;
}
.search-result-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.search-result-content {
  flex:1;
  min-width:0;
}
.search-result-title {
  margin:0 0 6px;
  font-size:14px;
  font-weight:600;
  color:#333;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.search-result-excerpt {
  margin:0 0 6px;
  font-size:12px;
  color:#666;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.search-result-meta {
  display:flex;
  gap:8px;
  font-size:11px;
  color:#999;
}
.search-result-similarity {
  color:#4caf50;
  font-weight:600;
}
.search-result-category {
  color:#ff4b6a;
}
.search-results-empty {
  text-align:center;
  padding:40px 20px;
  color:#999;
}


body.dark .search-modal__content {
  background:#1a1a1a;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
body.dark .search-modal__close {
  color:#888;
}
body.dark .search-modal__close:hover {
  background:#2a2a2a;
  color:#ddd;
}
body.dark .search-modal__header {
  border-bottom-color:#333;
}
body.dark .search-modal__input {
  color:#e5e7eb;
}
body.dark .search-modal__input::placeholder {
  color:#666;
}
body.dark .search-modal__tips {
  color:#777;
}
body.dark .search-modal__image-btn {
  background:#2a2a2a;
  color:#888;
}
body.dark .search-modal__image-btn:hover {
  background:#333;
  color:#ddd;
}
body.dark .search-modal__submit {
  background:#2a2a2a;
  color:#888;
}
body.dark .search-modal__submit:hover {
  background:#333;
  color:#ddd;
}
body.dark .search-modal__submit:active {
  background:#3a3a3a;
}
body.dark .search-results-title {
  color:#e5e7eb;
}
body.dark .search-result-item {
  background:#2a2a2a;
}
body.dark .search-result-item:hover {
  background:#333;
}
body.dark .search-result-thumb {
  background:#1a1a1a;
}
body.dark .search-result-title {
  color:#e5e7eb;
}
body.dark .search-result-excerpt {
  color:#aaa;
}
body.dark .search-result-meta {
  color:#777;
}
body.dark .search-result-similarity {
  color:#66bb6a;
}
body.dark .search-results-empty {
  color:#777;
}


.search-results-header {
  text-align:center;
  padding:32px 16px 28px;
}
.search-results-title {
  font-size:24px;
  font-weight:600;
  color:#333;
  margin:0 0 8px;
}
.search-keyword {
  color:#ff4b6a;
}
.search-results-count {
  font-size:14px;
  color:#888;
  margin:0;
}
.search-results-count strong {
  color:#ff4b6a;
  font-weight:600;
}


.search-empty {
  text-align:center;
  padding:80px 20px;
  max-width:540px;
  margin:0 auto;
}
.search-empty-icon {
  width:200px;
  height:auto;
  margin:0 auto 24px;
}
.search-empty-icon img {
  width:100%;
  height:auto;
  display:block;
}
.search-empty-title {
  font-size:22px;
  font-weight:600;
  color:#333;
  margin:0 0 12px;
}
.search-empty-text {
  font-size:15px;
  color:#666;
  line-height:1.6;
  margin:0 0 32px;
}
.search-empty-text strong {
  color:#ff4b6a;
}
.search-empty-tips {
  background:var(--bg-card);
  border-radius:12px;
  padding:20px;
  margin:0 0 28px;
  text-align:left;
  border:1px solid #eee;
}
.search-tip-title {
  font-size:14px;
  font-weight:600;
  color:#555;
  margin:0 0 12px;
}
.search-tips-list {
  list-style:none;
  margin:0;
  padding:0;
}
.search-tips-list li {
  font-size:13px;
  color:#777;
  line-height:1.8;
  padding-left:20px;
  position:relative;
}
.search-tips-list li::before {
  content:"•";
  position:absolute;
  left:6px;
  color:#ff4b6a;
  font-weight:bold;
}
.search-empty-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 32px;
  border-radius:24px;
  background:#ff4b6a;
  color:#fff;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:background 0.2s ease, transform 0.2s ease;
}
.search-empty-button:hover {
  background:#ff3355;
  transform:translateY(-2px);
}


body.dark .search-results-title {
  color:#f3f4f6;
}
body.dark .search-results-count {
  color:#9aa3af;
}
body.dark .search-empty-icon img {
  opacity:0.7;
}
body.dark .search-empty-title {
  color:#f3f4f6;
}
body.dark .search-empty-text {
  color:#9aa3af;
}
body.dark .search-empty-tips {
  background:#181818;
  border-color:#333;
}
body.dark .search-tip-title {
  color:#d1d5db;
}
body.dark .search-tips-list li {
  color:#9aa3af;
}


img[data-src] {
  opacity:0;
  transition:opacity 0.3s ease;
}

img.lazy-loaded {
  opacity:1;
}


img[data-src][src*="loading.gif"],
img[data-src][src$=".gif"] {
  opacity:1;
  object-fit:contain;
  background:transparent;
}


.lazy-fade {
  opacity:0;
  transition:opacity 0.4s ease;
}

.lazy-fade.lazy-loaded {
  opacity:1;
}


.lazy-blur {
  filter:blur(5px);
  transition:filter 0.4s ease;
}

.lazy-blur.lazy-loaded {
  filter:blur(0);
}


.lazy-scale {
  transform:scale(1.1);
  opacity:0;
  transition:transform 0.4s ease, opacity 0.4s ease;
}

.lazy-scale.lazy-loaded {
  transform:scale(1);
  opacity:1;
}


.lazy-none {
  opacity:1;
}


.lazy-error {
  opacity:0.5;
  background:#f0f0f0;
}

body.dark .lazy-error {
  background:#2a2a2a;
}

@media (max-width:720px) {
  .search-results-header {
    padding:24px 12px 20px;
  }
  .search-results-title {
    font-size:20px;
  }
  .search-empty {
    padding:60px 16px;
  }
  .search-empty-icon {
    width:160px;
  }
  .search-empty-title {
    font-size:18px;
  }
  .search-empty-text {
    font-size:14px;
  }
  .search-empty-tips {
    padding:16px;
  }
}

@media (max-width:1024px) {
  .post-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .category-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:960px) {
  .post-layout { flex-direction:column; }
  .post-sidebar { width:100%; flex:0 0 auto; }
  .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .category-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:900px) {
  .site-header { background:rgba(255,255,255,0.86); }
  .topbar-inner { padding:10px 14px; max-width:100%; }
  .topbar-nav { display:none; }
  .topbar-actions { gap:12px; }
  .icon-btn,
  .login-btn { width:36px; height:36px; border-radius:999px; padding:0; box-shadow:none; background:transparent; border:none; }
  .login-btn .login-text { display:none; }
  .icon-btn.theme { background:transparent; border:none; }
  .login-btn .iconfont { display:block; font-size:20px; }
  .post-list { grid-template-columns:1fr; }
  .login-modal__panel { width:760px; }
}
@media (max-width:720px) {
  
  .search-modal__content {
    width:calc(100% - 24px);
    max-width:100%;
    margin:0;
  }
  .search-modal__header {
    padding:16px;
  }
  .search-modal__form {
    gap:8px;
  }
  .search-modal__submit {
    width:36px;
    height:36px;
    border-radius:8px;
  }
  .search-modal__submit .iconfont {
    font-size:18px;
  }
  .search-modal__image-btn {
    width:36px;
    height:36px;
    border-radius:8px;
  }
  .search-modal__image-btn svg {
    width:18px;
    height:18px;
  }
  .search-modal__body {
    padding:16px;
    max-height:calc(90vh - 120px);
  }
  
  .wall-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .post-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:14px; }
  .post-grid[data-cols="2"],
  .post-grid[data-cols="3"],
  .post-grid[data-cols="4"] { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  .post-list { grid-template-columns:1fr; }
  .post-list-link { grid-template-columns:120px 1fr; padding:12px; }
  .post-list-item--no-thumb .post-list-link { grid-template-columns:1fr; }
  .post-gallery { column-count:2; }
  .category-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
  .category-card-thumb { height:180px; }
  
  main { padding-left:var(--blloe-mobile-pad); padding-right:var(--blloe-mobile-pad); }
  .post-detail-page { padding-left:0; padding-right:0; }
  .post-layout { padding-left:var(--blloe-mobile-pad); padding-right:var(--blloe-mobile-pad); }

  .post-actions { gap:8px; }
  .post-action { width:38px; height:38px; }

  
  .archive-header { padding:24px 12px 16px; }
  .archive-title { font-size:22px; }
  .tag-results-header { padding:16px 0; margin-bottom:18px; }
  .tag-badge { font-size:16px; padding:8px 16px; }
  .pagination { gap:4px; }
  .pagination a,
  .pagination span { min-width:32px; height:32px; padding:0 8px; font-size:12px; border-radius:8px; }

  .login-modal__panel { width:calc(100% - 32px); max-width:420px; }
  .login-modal__shell { flex-direction:column; height:auto !important; max-height:90vh; overflow-y:auto; }
  .login-modal__side { display:none; }
  .login-modal__main { position:static; padding:28px 24px 24px; min-height:auto; justify-content:flex-start; overflow-y:visible; }
  .login-modal__close { font-size:28px; }
  .login-modal__header { margin-bottom:20px; }
  .login-modal__head-row { flex-direction:column; align-items:flex-start; gap:6px; }
  .login-modal__title { font-size:20px; }
  .login-modal__head-link { font-size:12px; }
  .login-modal__subtitle { font-size:13px; }
  .login-modal__tabs { margin-bottom:20px; }
  .login-modal__tab { font-size:15px; padding:0 0 12px; margin-right:20px; }
  .login-modal__body { max-width:100%; }
  .login-modal__body input[type="text"],
  .login-modal__body input[type="password"],
  .login-modal__body input[type="email"] { font-size:16px; padding:10px 14px; }
  .login-modal__body input[type="submit"] { font-size:15px; padding:11px 0; }
  .login-modal__qrcode-box { width:200px; height:200px; margin:16px auto 12px; }
  .login-modal__other { position:static; left:auto; right:auto; bottom:auto; margin-top:24px; padding-top:16px; }
  .login-modal__oauth { gap:16px; margin-top:8px; }
  .login-modal__oauth-icon { width:40px; height:40px; }
  .login-modal__oauth-icon i { font-size:20px; }
}
@media (max-width:540px) {
  .post-gallery { column-count:2; }
}


.user-center-page { max-width:var(--blloe-container); margin:0 auto; padding:24px 16px 40px; }
.user-center-container { display:flex; gap:24px; max-width:var(--blloe-container); margin:0 auto; }


.user-center-sidebar { width:240px; flex-shrink:0; }
.sidebar-nav { background:var(--bg-card); border-radius:16px; padding:12px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.sidebar-nav-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; color:#555; font-size:14px; text-decoration:none; transition:all 0.2s ease; margin-bottom:4px; }
.sidebar-nav-item:last-child { margin-bottom:0; }
.sidebar-nav-item .nav-icon { width:18px; height:18px; color:#999; transition:color 0.2s ease; flex-shrink:0; }
.sidebar-nav-item:hover { background:#f5f5f5; color:#222; }
.sidebar-nav-item:hover .nav-icon { color:#ff4b6a; }
.sidebar-nav-item.is-active { background:linear-gradient(135deg, #ff4b6a, #ff7096); color:#fff; font-weight:500; }
.sidebar-nav-item.is-active .nav-icon { color:#fff; }
body.dark .sidebar-nav { background:#181818; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
body.dark .sidebar-nav-item { color:#d1d5db; }
body.dark .sidebar-nav-item:hover { background:#222; color:#f3f4f6; }


.user-center-main { flex:1; min-width:0; }


.avatar-upload-section { margin-bottom:20px; }
.avatar-upload-card { background:var(--bg-card); border-radius:16px; padding:32px; box-shadow:0 2px 8px rgba(0,0,0,0.06); display:flex; flex-direction:column; align-items:center; }
.avatar-preview { position:relative; margin-bottom:12px; }
.avatar-preview img { width:120px; height:120px; border-radius:50%; display:block; box-shadow:0 4px 16px rgba(0,0,0,0.1); }
.avatar-upload-btn { position:absolute; right:-4px; bottom:-4px; width:40px; height:40px; border-radius:50%; border:3px solid var(--bg-body); background:#ff4b6a; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 0.2s ease; }
.avatar-upload-btn:hover { transform:scale(1.1); }
.avatar-upload-btn svg { width:20px; height:20px; }
.avatar-upload-info { text-align:center; }
.avatar-upload-tip { font-size:13px; color:#999; margin:0; }
body.dark .avatar-upload-card { background:#181818; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
body.dark .avatar-upload-btn { border-color:#111; }


.cover-upload-section { margin-bottom:20px; }
.cover-upload-card { background:var(--bg-card); border-radius:16px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,0.06); display:flex; gap:20px; align-items:center; }
.cover-preview { width:240px; height:120px; border-radius:12px; background-size:cover; background-position:center; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.cover-upload-info { flex:1; }
.cover-upload-label { font-size:14px; font-weight:600; color:#222; margin:0 0 12px; }
.cover-upload-btn { padding:8px 16px; border-radius:20px; border:none; background:#f0f0f0; color:#555; font-size:13px; font-weight:500; cursor:pointer; transition:background 0.2s ease; display:inline-flex; align-items:center; gap:6px; margin-bottom:8px; }
.cover-upload-btn:hover { background:#e0e0e0; }
.cover-upload-tip { font-size:12px; color:#999; margin:0; }
body.dark .cover-upload-card { background:#181818; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
body.dark .cover-upload-label { color:#f3f4f6; }
body.dark .cover-upload-btn { background:#222; color:#d1d5db; }
body.dark .cover-upload-btn:hover { background:#2a2a2a; }


.settings-section { background:var(--bg-card); border-radius:16px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,0.06); overflow:hidden; }
.settings-section__title { font-size:16px; font-weight:600; color:#222; padding:20px 24px 16px; margin:0; border-bottom:1px solid #f0f0f0; }
body.dark .settings-section { background:#181818; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
body.dark .settings-section__title { color:#f3f4f6; border-bottom-color:#2a2a2a; }


.setting-row { display:flex; align-items:center; padding:16px 24px; border-bottom:1px solid #f5f5f5; }
.setting-row:last-child { border-bottom:none; }
.setting-row__label { width:80px; font-size:14px; color:#999; flex-shrink:0; }
.setting-row__value { flex:1; font-size:14px; color:#333; }
.setting-row__action { margin-left:auto; flex-shrink:0; }
.setting-row__action-link { font-size:13px; color:#ff4b6a; text-decoration:none; }
.setting-row__action-link:hover { text-decoration:underline; }
body.dark .setting-row { border-bottom-color:#222; }
body.dark .setting-row__label { color:#666; }
body.dark .setting-row__value { color:#d1d5db; }


.setting-card { background:var(--bg-card); border-radius:16px; padding:20px 24px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:box-shadow 0.2s ease; }
.setting-card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.setting-card-header { display:flex; align-items:center; gap:12px; flex:1; }
.setting-icon { width:40px; height:40px; border-radius:12px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.setting-icon svg { width:20px; height:20px; }
.setting-label { font-size:15px; font-weight:500; color:#222; }
.setting-value { font-size:13px; color:#999; margin:4px 0 0; }
.setting-action-btn { padding:8px 20px; border-radius:20px; border:none; background:#ff4b6a; color:#fff; font-size:13px; font-weight:500; cursor:pointer; transition:background 0.2s ease; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.setting-action-btn:hover { background:#ff3256; }
.setting-action-bind { background:#f0f0f0; color:#555; }
.setting-action-bind:hover { background:#e0e0e0; color:#222; }
body.dark .setting-card { background:#181818; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
body.dark .setting-card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.3); }
body.dark .setting-icon { background:#222; }
body.dark .setting-label { color:#f3f4f6; }
body.dark .setting-value { color:#666; }
body.dark .setting-action-bind { background:#222; color:#d1d5db; }
body.dark .setting-action-bind:hover { background:#2a2a2a; }


.setting-modal { display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; padding:20px; }
.setting-modal-content { background:var(--bg-card); border-radius:20px; padding:0; max-width:480px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.setting-modal-header { display:flex; align-items:center; justify-content:space-between; padding:24px 24px 20px; border-bottom:1px solid #f0f0f0; }
.setting-modal-header h3 { font-size:18px; font-weight:600; color:#222; margin:0; }
.setting-modal-close { width:32px; height:32px; border-radius:50%; border:none; background:#f0f0f0; color:#555; font-size:24px; line-height:1; cursor:pointer; transition:background 0.2s ease; display:flex; align-items:center; justify-content:center; padding:0; }
.setting-modal-close:hover { background:#e0e0e0; }
.setting-modal-form { padding:24px; }
.form-group { margin-bottom:20px; }
.form-group:last-of-type { margin-bottom:0; }
.form-group label { display:block; margin-bottom:8px; font-size:14px; font-weight:500; color:#555; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea { width:100%; padding:12px 16px; border:1px solid #e8e8e8; border-radius:12px; font-size:14px; color:#333; background:var(--bg-card); transition:border-color 0.2s ease, box-shadow 0.2s ease; }
.form-group input:focus,
.form-group textarea:focus { outline:none; border-color:#ff4b6a; box-shadow:0 0 0 3px rgba(255,75,106,0.1); }
.form-group textarea { resize:vertical; min-height:100px; }
.char-count { display:block; margin-top:4px; font-size:12px; color:#999; text-align:right; }
.form-actions { margin-top:24px; display:flex; justify-content:flex-end; gap:12px; }
.btn { padding:10px 24px; border-radius:20px; border:none; font-size:14px; font-weight:500; cursor:pointer; transition:transform 0.2s ease, background 0.2s ease; display:inline-flex; align-items:center; gap:6px; }
.btn:hover { transform:translateY(-1px); }
.btn:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.btn-primary { background:#ff4b6a; color:#fff; }
.btn-primary:hover { background:#ff3256; }
.btn-secondary { background:#f0f0f0; color:#555; }
.btn-secondary:hover { background:#e0e0e0; }
body.dark .setting-modal-content { background:#181818; }
body.dark .setting-modal-header { border-bottom-color:#222; }
body.dark .setting-modal-header h3 { color:#f3f4f6; }
body.dark .setting-modal-close { background:#222; color:#d1d5db; }
body.dark .setting-modal-close:hover { background:#2a2a2a; }
body.dark .form-group label { color:#d1d5db; }
body.dark .form-group input,
body.dark .form-group textarea { background:#1b1b1b; border-color:#333; color:#e5e7eb; }
body.dark .form-group input:focus,
body.dark .form-group textarea:focus { border-color:#ff4b6a; background:#111; }
body.dark .btn-secondary { background:#222; color:#d1d5db; }
body.dark .btn-secondary:hover { background:#2a2a2a; }


@media (max-width:900px) {
  .user-center-container { flex-direction:column; }
  .user-center-sidebar { width:100%; }
  .sidebar-nav { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
  .sidebar-nav-item { flex-direction:column; gap:6px; padding:12px 8px; text-align:center; }
  .sidebar-nav-item span { font-size:12px; }
}

@media (max-width:720px) {
  .user-center-page { padding:16px var(--blloe-mobile-pad) 32px; }
  .user-center-container { gap:16px; }
  .avatar-upload-card { padding:24px 20px; }
  .avatar-preview img { width:100px; height:100px; }
  .avatar-upload-btn { width:36px; height:36px; }
  .cover-upload-card { flex-direction:column; padding:16px; }
  .cover-preview { width:100%; height:160px; }
  .cover-upload-info { width:100%; }
  .setting-card { padding:16px 18px; }
  .setting-icon { width:36px; height:36px; }
  .setting-icon svg { width:18px; height:18px; }
  .setting-label { font-size:14px; }
  .setting-action-btn { padding:7px 16px; font-size:12px; }
  .sidebar-nav { grid-template-columns:repeat(2, 1fr); }
}


.user-profile-page { width:100%; max-width:100%; margin:0; padding:0; }
.user-profile-container { max-width:100%; margin:0; }


.profile-cover-section { position:relative; margin:0; }
.profile-cover { position:relative; height:400px; background-size:cover; background-position:center; overflow:visible; border-radius:16px; }
.profile-cover::before { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2)); border-radius:16px; }
.profile-edit-link { position:absolute; right:32px; top:32px; padding:10px 24px; border-radius:24px; border:none; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#222; font-size:13px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all 0.2s ease; z-index:2; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.profile-edit-link:hover { background:#fff; transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.12); }
.profile-edit-link svg { width:16px; height:16px; }
body.dark .profile-edit-link { background:rgba(24,24,24,0.95); color:#f3f4f6; }
body.dark .profile-edit-link:hover { background:#181818; }


.profile-change-cover-btn { position:absolute; right:32px; bottom:32px; padding:10px 24px; border-radius:24px; border:none; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#222; font-size:13px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all 0.2s ease; z-index:2; box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.profile-change-cover-btn:hover { background:#fff; transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.12); }
.profile-change-cover-btn:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.profile-change-cover-btn svg { width:16px; height:16px; }
body.dark .profile-change-cover-btn { background:rgba(24,24,24,0.95); color:#f3f4f6; }
body.dark .profile-change-cover-btn:hover { background:#181818; }


.profile-avatar-wrapper { position:absolute; left:80px; bottom:0; z-index:10; transform:translateY(50%); }
.profile-avatar-container { position:relative; width:160px; height:160px; padding:0; background:transparent; border-radius:50%; box-shadow:none; }
.profile-avatar-container::before { content:none; }
.profile-avatar-inner { position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; background:transparent; }
.profile-avatar-inner img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:2px solid var(--uc-border, #e5e7eb); }
.profile-verify-badge { position:absolute; right:4px; bottom:4px; width:36px; height:36px; border:4px solid #fff; border-radius:50%; z-index:1; }
 .profile-verify-badge { pointer-events:auto; }
body.dark .profile-avatar-inner { background:transparent; }
body.dark .profile-avatar-inner img { border-color:#222; }
body.dark .profile-verify-badge { border-color:#111; }


.profile-info-section { position:relative; padding:80px 80px 40px 280px; background:var(--bg-body); }
.profile-display-name { font-size:32px; font-weight:700; margin:0 0 12px; color:#222; letter-spacing:-0.5px; line-height:1.2; position:relative; top:-80px; margin-bottom:-68px; }
.profile-meta-row { display:flex; align-items:center; gap:24px; margin-bottom:16px; flex-wrap:wrap; }
.profile-verify-text { display:inline-flex; align-items:center; gap:6px; color:var(--auth-badge-color, #ff4b6a); font-size:14px; font-weight:500; }
.profile-verify-text svg { width:18px; height:18px; flex-shrink:0; }
.profile-subscriber-text { display:inline-flex; align-items:center; gap:6px; color:#666; font-size:14px; font-weight:500; }
.profile-subscriber-text svg { width:18px; height:18px; flex-shrink:0; }
body.dark .profile-subscriber-text { color:#9aa3af; }
.profile-location { display:inline-flex; align-items:center; gap:6px; color:#666; font-size:14px; font-weight:500; }
.profile-location svg { width:18px; height:18px; flex-shrink:0; }
body.dark .profile-location { color:#9aa3af; }
.profile-details { display:flex; align-items:center; gap:24px; font-size:14px; color:#666; }
.profile-detail-item { color:#666; white-space:nowrap; }
.profile-detail-item svg { width:16px; height:16px; color:#999; flex-shrink:0; }
.profile-detail-item a { color:#ff4b6a; text-decoration:none; font-weight:500; }
.profile-detail-item a:hover { text-decoration:underline; }
.profile-bio { margin:16px 0 0; color:#555; font-size:15px; line-height:1.7; max-width:600px; }
.profile-stats { display:none; }
body.dark .profile-info-section { background:#0a0a0a; }
body.dark .profile-display-name { color:#f3f4f6; }
body.dark .profile-bio { color:#d1d5db; }
body.dark .profile-detail-item { color:#9aa3af; }
body.dark .profile-detail-item svg { color:#666; }


.profile-posts-section { padding:20px 0 40px; }
.profile-section-header { margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid #f0f0f0; }
.profile-section-title { font-size:18px; font-weight:600; color:#222; margin:0; }


.profile-tabs-wrapper { display:block; }
.profile-tabs{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  row-gap:6px;
  width:100%;
  margin:0 0 16px;
  padding:6px 0 8px;
  background:transparent;
  border-radius:0;
  position:static;
  border-bottom:1px solid #f0f0f0;
  overflow-anchor:none;
}
.profile-tab{
  padding:8px 0;
  border:none;
  background:transparent;
  color:#666;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:color 0.2s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:0;
  justify-content:flex-start;
  text-align:left;
  position:relative;
}
.profile-tab svg{ display:none; }
.profile-tab::after{ display:none; }
.profile-tab:hover{ color:#222; background:transparent; }
.profile-tab.active{ color:#222; }
.profile-tab.active::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:#222;
}
.profile-content-area { flex:1; min-width:0; }
.profile-tab-content { display:block; margin-top:0; padding-top:0; }
.profile-tabs-wrapper,
.profile-tab-content{ overflow-anchor:none; }
body.dark .profile-tabs{ border-bottom-color:#222; }
body.dark .profile-tab{ color:#9aa3af; }
body.dark .profile-tab:hover{ color:#f3f4f6; }
body.dark .profile-tab.active{ color:#f3f4f6; }
body.dark .profile-tab.active::before{ background:#f3f4f6; }


.profile-empty-state { grid-column:1 / -1; text-align:center; padding:80px 20px; display:block; }
.profile-empty-state .empty-state-image { width:200px; height:auto; opacity:0.6; display:block; margin:0 auto 16px; }
.profile-empty-state .empty-state-text { color:#999; font-size:15px; margin:0; display:block; }
body.dark .profile-posts-section { background:#0a0a0a; }
body.dark .profile-section-header { border-bottom-color:#222; }
body.dark .profile-section-title { color:#f3f4f6; }
body.dark .empty-state-text { color:#666; }
body.dark .empty-state-image { opacity:0.4; }


.profile-stats-row { display:flex; align-items:center; gap:32px; margin:16px 0 8px; }
.profile-stat-item { display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; color:inherit; cursor:pointer; transition:all 0.2s; padding:8px 16px; border-radius:8px; }
.profile-stat-item:hover { background:rgba(255,75,106,0.08); }
.profile-stat-count { font-size:20px; font-weight:700; color:#222; line-height:1; }
.profile-stat-label { font-size:13px; color:#888; }
body.dark .profile-stat-count { color:#f3f4f6; }
body.dark .profile-stat-label { color:#9aa3af; }
body.dark .profile-stat-item:hover { background:rgba(255,75,106,0.15); }

.profile-follow-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 32px; border:2px solid #e5e5e5; border-radius:24px; font-size:15px; font-weight:600; cursor:pointer; transition:all 0.2s ease; background:#fff; color:#666; }
.profile-follow-btn:hover { border-color:#ff4b6a; color:#ff4b6a; background:#fff5f7; }
.profile-follow-btn:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.profile-follow-btn .follow-icon { width:18px; height:18px; }
.profile-follow-btn .follow-icon--add { display:block; }
.profile-follow-btn .follow-icon--check { display:none; }
.profile-follow-btn.is-following { background:#f0f0f0; color:#666; border-color:#e5e5e5; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.profile-follow-btn.is-following:hover { background:#e5e5e5; border-color:#e5e5e5; box-shadow:0 4px 12px rgba(0,0,0,0.12); transform:none; }
.profile-follow-btn.is-following .follow-icon--add { display:none; }
.profile-follow-btn.is-following .follow-icon--check { display:block; color:#22c55e; }
body.dark .profile-follow-btn { background:#1a1a1a; border-color:#333; color:#9aa3af; }
body.dark .profile-follow-btn:hover { border-color:#ff4b6a; color:#ff4b6a; background:rgba(255,75,106,0.1); }
body.dark .profile-follow-btn.is-following { background:#2a2a2a; color:#9aa3af; border-color:#333; }
body.dark .profile-follow-btn.is-following:hover { background:#333; border-color:#333; }


.profile-action-row { position:absolute; right:80px; top:50%; transform:translateY(-50%); margin:0; display:flex; gap:12px; }
.profile-message-btn { display:inline-flex; align-items:center; gap:6px; padding:12px 24px; border:2px solid #e5e5e5; border-radius:24px; font-size:15px; font-weight:500; cursor:pointer; transition:all 0.2s ease; background:#fff; color:#666; }
.profile-message-btn svg { width:18px; height:18px; }
.profile-message-btn:hover { border-color:#ff4b6a; color:#ff4b6a; background:#fff5f7; }
body.dark .profile-message-btn { background:#1a1a1a; border-color:#333; color:#9aa3af; }
body.dark .profile-message-btn:hover { border-color:#ff4b6a; color:#ff4b6a; background:rgba(255,75,106,0.1); }
.profile-report-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:12px 24px; border:2px solid #e5e5e5; border-radius:24px; font-size:15px; font-weight:500; cursor:pointer; transition:all 0.2s ease; background:#fff; color:#666; }
.profile-report-btn:hover { border-color:#ff4b6a; color:#ff4b6a; background:#fff5f7; }
body.dark .profile-report-btn { background:#1a1a1a; border-color:#333; color:#9aa3af; }
body.dark .profile-report-btn:hover { border-color:#ff4b6a; color:#ff4b6a; background:rgba(255,75,106,0.1); }
.profile-action-row .profile-follow-btn,
.profile-action-row .profile-message-btn,
.profile-action-row .profile-report-btn { min-height:44px; padding:12px 18px; font-size:15px; border-radius:24px; line-height:1; }


.nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; background:#ff4b6a; color:#fff; font-size:11px; font-weight:600; border-radius:9px; margin-left:auto; }


.chat-modal { position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; display:none; align-items:center; justify-content:center; }
.chat-modal.open { display:flex; }
.chat-modal__overlay { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
.chat-modal__panel { position:relative; background:#fff; border-radius:16px; width:90%; max-width:900px; height:80vh; max-height:700px; display:flex; box-shadow:0 20px 60px rgba(0,0,0,0.2); animation:profileChatSlideUp 0.25s ease; overflow:hidden; }

.chat-sidebar { width:280px; border-right:1px solid #f0f0f0; display:flex; flex-direction:column; flex-shrink:0; }
.chat-sidebar__header { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid #f0f0f0; }
.chat-sidebar__title { font-size:18px; font-weight:600; color:#222; margin:0; }
.chat-mark-all-btn { width:32px; height:32px; border:none; background:#f5f5f5; color:#666; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.chat-mark-all-btn:hover { background:#ff4b6a; color:#fff; }
.chat-conversations { flex:1; overflow-y:auto; }
.chat-conv-item { display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; transition:background 0.2s; position:relative; }
.chat-conv-item:hover { background:#f9f9f9; }
.chat-conv-item.is-active { background:#fff0f3; }
.chat-conv-item.has-unread { background:#fffbfc; }
.chat-conv-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.chat-conv-info { flex:1; min-width:0; }
.chat-conv-top { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.chat-conv-name { font-size:15px; font-weight:600; color:#222; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-conv-time { font-size:12px; color:#aaa; flex-shrink:0; }
.chat-conv-preview { font-size:13px; color:#888; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:30px; }
.chat-conv-badge { position:absolute; right:16px; bottom:14px; min-width:18px; height:18px; padding:0 5px; background:#ff4b6a; color:#fff; font-size:11px; font-weight:600; border-radius:9px; display:flex; align-items:center; justify-content:center; }

.chat-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.chat-main__empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#999; }
.chat-main__empty img { width:120px; height:auto; opacity:0.5; margin-bottom:16px; }
.chat-main__empty p { margin:0; font-size:14px; }
.chat-main__content { flex:1; display:flex; flex-direction:column; min-height:0; }
.chat-main__header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f0f0f0; flex-shrink:0; }
.chat-user-link { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.chat-user-link:hover .chat-user-name { color:#ff4b6a; }

.chat-actions { position:relative; }
.chat-actions-btn { width:36px; height:36px; border:none; background:#f5f5f5; color:#666; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.chat-actions-btn:hover { background:#e5e5e5; color:#222; }
.chat-actions-menu { position:absolute; top:100%; right:0; margin-top:8px; background:#fff; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,0.15); padding:8px 0; min-width:140px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:all 0.2s; z-index:100; }
.chat-actions.is-open .chat-actions-menu { opacity:1; visibility:visible; transform:translateY(0); }
.chat-action-item { display:flex; align-items:center; gap:10px; width:100%; padding:10px 16px; border:none; background:none; font-size:14px; color:#444; cursor:pointer; text-decoration:none; transition:background 0.2s; }
.chat-action-item:hover { background:#f5f5f5; }
.chat-action-item svg { flex-shrink:0; color:#888; }
.chat-action-block.is-blocked { color:#ff4b6a; }
.chat-action-block.is-blocked svg { color:#ff4b6a; }
body.dark .chat-actions-btn { background:#2a2a2a; color:#9aa3af; }
body.dark .chat-actions-btn:hover { background:#333; color:#fff; }
body.dark .chat-actions-menu { background:#222; box-shadow:0 4px 20px rgba(0,0,0,0.4); }
body.dark .chat-action-item { color:#d1d5db; }
body.dark .chat-action-item:hover { background:#2a2a2a; }
body.dark .chat-action-item svg { color:#9aa3af; }
.chat-user-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.chat-user-name { font-size:16px; font-weight:600; color:#222; transition:color 0.2s; }
.chat-messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; }
.chat-date-divider { text-align:center; font-size:12px; color:#aaa; padding:8px 0; }
.chat-bubble { max-width:70%; padding:12px 16px; border-radius:16px; position:relative; }
.chat-bubble.is-self { align-self:flex-end; background:#ff4b6a; color:#fff; border-bottom-right-radius:4px; }
.chat-bubble.is-other { align-self:flex-start; background:#f5f5f5; color:#222; border-bottom-left-radius:4px; }
.chat-bubble__text { margin:0; font-size:14px; line-height:1.6; word-break:break-word; }
.chat-bubble__image { max-width:200px; max-height:200px; border-radius:8px; cursor:pointer; display:block; transition:opacity 0.2s; }
.chat-bubble__image:hover { opacity:0.9; }
.chat-bubble__time { display:block; font-size:11px; margin-top:6px; opacity:0.7; }
.chat-bubble.is-self .chat-bubble__time { text-align:right; }

.chat-input-area { display:flex; flex-direction:column; gap:12px; padding:16px 20px; border-top:1px solid #f0f0f0; flex-shrink:0; background:#fff; position:relative; }
.chat-input { width:100%; padding:14px 16px; border:2px solid #ff4b6a; border-radius:12px; font-size:14px; color:#222; resize:vertical; min-height:70px; max-height:150px; font-family:inherit; transition:border-color 0.2s, box-shadow 0.2s; box-sizing:border-box; }
.chat-input:focus { outline:none; box-shadow:0 0 0 3px rgba(255,75,106,0.15); }
.chat-input::placeholder { color:#aaa; }
.chat-toolbar { display:flex; align-items:center; justify-content:space-between; }
.chat-toolbar__left { display:flex; align-items:center; gap:8px; }
.chat-tool-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid #e5e5e5; border-radius:20px; background:#fff; color:#666; font-size:13px; cursor:pointer; transition:all 0.2s; }
.chat-tool-btn:hover { border-color:#ff4b6a; color:#ff4b6a; background:#fff5f7; }
.chat-tool-btn:disabled { opacity:0.5; cursor:not-allowed; }
.chat-tool-btn svg { flex-shrink:0; }
.chat-send-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border:none; background:#ff4b6a; color:#fff; border-radius:20px; font-size:14px; font-weight:500; cursor:pointer; transition:all 0.2s; }
.chat-send-btn:hover { background:#e8435f; }
.chat-send-btn:disabled { opacity:0.5; cursor:not-allowed; }
.chat-send-btn svg { flex-shrink:0; }
body.dark .chat-input-area { background:#1a1a1a; }
body.dark .chat-input { background:#111; border-color:#ff4b6a; color:#f3f4f6; }
body.dark .chat-input:focus { box-shadow:0 0 0 3px rgba(255,75,106,0.2); }
body.dark .chat-input::placeholder { color:#666; }
body.dark .chat-tool-btn { background:#222; border-color:#333; color:#9aa3af; }
body.dark .chat-tool-btn:hover { border-color:#ff4b6a; color:#ff4b6a; background:rgba(255,75,106,0.1); }

.chat-image-modal { position:absolute; bottom:100%; left:0; right:0; padding:12px; display:none; z-index:10; }
.chat-image-modal.open { display:block; }
.chat-image-modal__content { background:#fff; border-radius:12px; padding:16px; box-shadow:0 4px 20px rgba(0,0,0,0.15); }
.chat-image-modal__title { margin:0 0 12px; font-size:14px; color:#333; font-weight:500; }
.chat-image-modal__input { width:100%; min-height:80px; padding:12px; border:1px solid #e5e5e5; border-radius:8px; font-size:14px; color:#222; resize:none; font-family:inherit; box-sizing:border-box; }
.chat-image-modal__input:focus { outline:none; border-color:#ff4b6a; }
.chat-image-modal__input::placeholder { color:#aaa; }
.chat-image-modal__actions { display:flex; justify-content:flex-end; gap:12px; margin-top:12px; }
.chat-image-modal__btn { padding:8px 20px; border-radius:6px; font-size:14px; cursor:pointer; transition:all 0.2s; }
.chat-image-modal__upload { background:#fff; border:1px solid #ff4b6a; color:#ff4b6a; }
.chat-image-modal__upload:hover { background:#fff5f7; }
.chat-image-modal__upload:disabled { opacity:0.6; cursor:not-allowed; }
.chat-image-modal__confirm { background:#e8f4fd; border:1px solid #b3d9f7; color:#1890ff; }
.chat-image-modal__confirm:hover { background:#d6ebfa; }
body.dark .chat-image-modal__content { background:#222; box-shadow:0 4px 20px rgba(0,0,0,0.4); }
body.dark .chat-image-modal__title { color:#f3f4f6; }
body.dark .chat-image-modal__input { background:#111; border-color:#333; color:#f3f4f6; }
body.dark .chat-image-modal__input:focus { border-color:#ff4b6a; }
body.dark .chat-image-modal__upload { background:#222; }
body.dark .chat-image-modal__upload:hover { background:rgba(255,75,106,0.1); }
body.dark .chat-image-modal__confirm { background:rgba(24,144,255,0.1); border-color:rgba(24,144,255,0.3); }
.chat-loading, .chat-empty { text-align:center; padding:40px 20px; color:#999; font-size:14px; }


.profile-chat-modal { position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; display:none; align-items:flex-end; justify-content:center; }
.profile-chat-modal.open { display:flex; }
.profile-chat-modal__overlay { position:absolute; inset:0; background:rgba(0,0,0,0.5); animation:profileChatFadeIn 0.25s ease; }
@keyframes profileChatFadeIn { from { opacity:0; } to { opacity:1; } }
.profile-chat-modal__panel { position:relative; background:#fff; width:100%; max-width:480px; height:70vh; max-height:600px; display:flex; flex-direction:column; box-shadow:0 -4px 30px rgba(0,0,0,0.2); border-radius:16px 16px 0 0; overflow:hidden; }
.profile-chat-modal__panel.slide-up { animation:profileChatSlideUp 0.3s ease; }
.profile-chat-modal__panel.scale-in { animation:profileChatScaleIn 0.25s ease; }
@keyframes profileChatSlideUp { from { opacity:0; transform:translateY(100%); } to { opacity:1; transform:translateY(0); } }
@keyframes profileChatScaleIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
.profile-chat-header { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid #f0f0f0; flex-shrink:0; background:#fff; }
.profile-chat-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.profile-chat-name { flex:1; font-size:16px; font-weight:600; color:#222; }
.profile-chat-close { width:32px; height:32px; border:none; background:#f5f5f5; color:#666; font-size:20px; line-height:1; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.profile-chat-close:hover { background:#e5e5e5; color:#222; }
.profile-chat-messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; background:#fafafa; }

.profile-chat-input-area { border-radius:0 0 16px 16px; }
.profile-chat-input {  }
body.dark .profile-chat-modal__panel { background:#1a1a1a; }
body.dark .profile-chat-header { border-bottom-color:#333; background:#1a1a1a; }
body.dark .profile-chat-name { color:#f3f4f6; }
body.dark .profile-chat-close { background:#2a2a2a; color:#9aa3af; }
body.dark .profile-chat-close:hover { background:#333; color:#fff; }
body.dark .profile-chat-messages { background:#111; }
body.dark .profile-chat-input-area { border-top-color:#333; background:#1a1a1a; }
body.dark .profile-chat-input { background:#222; border-color:#333; color:#f3f4f6; }
body.dark .profile-chat-input:focus { border-color:#ff4b6a; }
body.dark .profile-chat-input::placeholder { color:#666; }
@media (min-width:769px) {
  .profile-chat-modal { align-items:center; }
  .profile-chat-modal__panel { border-radius:16px; height:auto; max-height:70vh; min-height:450px; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
  .profile-chat-messages { min-height:300px; }
  .profile-chat-header { border-radius:16px 16px 0 0; }
  .profile-chat-input-area { border-radius:0 0 16px 16px; }
}

body.dark .chat-modal__panel { background:#1a1a1a; }
body.dark .chat-modal__close { background:#2a2a2a; color:#9aa3af; }
body.dark .chat-modal__close:hover { background:#333; color:#fff; }
body.dark .chat-sidebar { border-right-color:#333; }
body.dark .chat-sidebar__header { border-bottom-color:#333; }
body.dark .chat-sidebar__title { color:#f3f4f6; }
body.dark .chat-mark-all-btn { background:#2a2a2a; color:#9aa3af; }
body.dark .chat-conv-item:hover { background:#222; }
body.dark .chat-conv-item.is-active { background:rgba(255,75,106,0.15); }
body.dark .chat-conv-item.has-unread { background:rgba(255,75,106,0.08); }
body.dark .chat-conv-name { color:#f3f4f6; }
body.dark .chat-conv-preview { color:#9aa3af; }
body.dark .chat-main__empty { color:#666; }
body.dark .chat-main__header { border-bottom-color:#333; }
body.dark .chat-user-name { color:#f3f4f6; }
body.dark .chat-bubble.is-other { background:#2a2a2a; color:#f3f4f6; }
body.dark .chat-input-area { border-top-color:#333; }
body.dark .chat-input { background:#111; border-color:#333; color:#f3f4f6; }
body.dark .chat-input:focus { border-color:#ff4b6a; }
body.dark .chat-input::placeholder { color:#666; }
body.dark .chat-loading, body.dark .chat-empty { color:#666; }

@media (max-width:768px) {
  .chat-modal__panel { flex-direction:column; height:90vh; max-height:none; }
  .chat-sidebar { width:100%; height:auto; max-height:40%; border-right:none; border-bottom:1px solid #f0f0f0; }
  .chat-main { min-height:60%; }
  .chat-bubble { max-width:85%; }
  .chat-modal__close { top:12px; right:12px; }
  body.dark .chat-sidebar { border-bottom-color:#333; }
}


.profile-user-list { display:flex; flex-direction:column; gap:12px; padding:0; }
.profile-user-item { display:flex; align-items:center; gap:16px; padding:16px 20px; background:#fff; border-radius:12px; border:1px solid #f0f0f0; transition:all 0.2s ease; }
.profile-user-item:hover { border-color:#e5e5e5; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.profile-user-avatar { flex-shrink:0; }
.profile-user-avatar img { width:60px; height:60px; border-radius:50%; object-fit:cover; display:block; }
.profile-user-info { flex:1; min-width:0; }
.profile-user-name { display:inline-flex; align-items:center; gap:6px; font-size:16px; font-weight:600; color:#222; text-decoration:none; transition:color 0.2s; }
.profile-user-name:hover { color:#ff4b6a; }
.profile-user-badge { width:18px; height:18px; flex-shrink:0; }
.profile-user-bio { margin:6px 0 0; font-size:14px; color:#888; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.dark .profile-user-item { background:#181818; border-color:#2a2a2a; }
body.dark .profile-user-item:hover { border-color:#333; }
body.dark .profile-user-name { color:#f3f4f6; }
body.dark .profile-user-bio { color:#9aa3af; }


.profile-user-list .profile-empty-state { text-align:center; padding:60px 20px; }
.profile-user-list .empty-state-image { width:240px; height:auto; opacity:0.6; display:block; margin:0 auto 16px; }
.profile-user-list .empty-state-text { color:#999; }
body.dark .profile-user-list .empty-state-image { opacity:0.4; }

@media (max-width:900px) {
  .profile-cover { height:320px; border-radius:12px; }
  .profile-cover::before { border-radius:12px; }
  .profile-avatar-wrapper { left:40px; }
  .profile-avatar-container { width:130px; height:130px; padding:0; }
  .profile-info-section { padding:70px 40px 30px 200px; }
  .profile-display-name { font-size:26px; top:-65px; margin-bottom:-53px; }
  .profile-posts-section { padding:20px 0 32px; }
  .profile-action-row { right:40px; }
}

@media (max-width:768px) {
  .profile-cover-section{
    width:calc(100% + (var(--blloe-mobile-pad, 12px) * 2));
    margin-left:calc(-1 * var(--blloe-mobile-pad, 12px));
    margin-right:calc(-1 * var(--blloe-mobile-pad, 12px));
    box-sizing:border-box;
  }
  .profile-cover,
  .profile-cover::before{
    border-radius:0;
  }
}

@media (max-width:720px) {
  .profile-cover { height:240px; border-radius:0; }
  .profile-cover::before { border-radius:0; }
  .profile-edit-link { right:16px; top:16px; padding:8px 16px; font-size:12px; }
  .profile-edit-link svg { width:14px; height:14px; }
  .profile-change-cover-btn { right:16px; bottom:16px; padding:8px 16px; font-size:12px; }
  .profile-change-cover-btn svg { width:14px; height:14px; }
  .profile-avatar-wrapper { left:24px; }
  .profile-avatar-container { width:100px; height:100px; padding:0; }
  .profile-verify-badge { width:28px; height:28px; right:2px; bottom:2px; border-width:3px; }
  .profile-info-section { padding:60px 16px 24px 140px; }
  .profile-display-name { font-size:22px; top:-50px; margin-bottom:-38px; }
  .profile-meta-row { flex-direction:column; align-items:flex-start; gap:12px; }
  .profile-verify-text { font-size:13px; }
  .profile-subscriber-text { font-size:13px; }
  .profile-details { flex-wrap:wrap; gap:16px; font-size:13px; }
  .profile-bio { font-size:14px; margin-top:12px; }
  .profile-posts-section { padding:16px 0 24px; }
  .profile-section-title { font-size:16px; }
  
  .profile-tabs-wrapper { display:block; }
  .profile-tabs{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    row-gap:6px;
    width:100%;
    margin:0 0 14px;
    padding:6px 0 8px;
    background:transparent;
    border-radius:0;
    border-bottom:1px solid #f0f0f0;
    position:static;
  }
  .profile-tab{
    padding:8px 0;
    font-size:13px;
    background:transparent;
    border-radius:0;
    justify-content:flex-start;
    flex-direction:row;
    gap:6px;
    text-align:left;
    color:#6b7280;
    position:relative;
  }
  .profile-tab svg{ display:none; }
  .profile-tab::after{ display:none; }
  .profile-tab:hover{
    background:transparent;
    color:#111;
  }
  .profile-tab.active{
    color:#111;
    font-weight:600;
  }
  .profile-tab.active::before{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:2px;
    background:#111;
  }

  body.dark .profile-tabs{ border-bottom-color:#222; }
  body.dark .profile-tab{ color:#9aa3af; }
  body.dark .profile-tab:hover{ color:#f3f4f6; }
  body.dark .profile-tab.active{ color:#f3f4f6; }
  body.dark .profile-tab.active::before{ background:#f3f4f6; }
  .profile-empty-state .empty-state-image { width:160px; }
  .profile-empty-state .empty-state-text { font-size:14px; }
  
  .profile-action-row { position:static; transform:none; margin:16px 0 0; flex-wrap:nowrap; gap:8px; justify-content:flex-start; margin-left:-124px; }
  .profile-action-row .profile-follow-btn,
  .profile-action-row .profile-message-btn,
  .profile-action-row .profile-report-btn { flex:0 0 auto; width:84px; justify-content:center; box-sizing:border-box; white-space:nowrap; }
  .profile-follow-btn { padding:8px 12px; font-size:12px; gap:4px; border-radius:14px; }
  .profile-follow-btn .follow-icon { width:12px; height:12px; }
  .profile-message-btn { padding:8px 12px; font-size:12px; gap:4px; border-radius:14px; }
  .profile-message-btn svg { width:12px; height:12px; }
  .profile-report-btn { padding:8px 12px; font-size:12px; border-radius:14px; }
  .profile-user-item { padding:12px 16px; gap:12px; }
  .profile-user-avatar img { width:50px; height:50px; }
  .profile-user-name { font-size:15px; }
  .profile-user-bio { font-size:13px; }
  .profile-user-list .profile-empty-state { padding:40px 16px; }
  .profile-user-list .empty-state-icon { width:56px; height:56px; }
}



.share-modal {
  position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center;
}
.share-modal.share-modal--open {
  display: flex;
}
.share-modal__overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6);
}
.share-modal__panel {
  position: relative; background: #fff; border-radius: 22px; padding: 28px 24px 22px; width: 90%; max-width: 360px; box-shadow: 0 24px 80px rgba(0,0,0,0.25); animation: shareModalSlideUp 0.25s ease;
}
.share-modal__close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: none; background: #f2f2f2; color: #666; font-size: 20px; line-height: 1; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 1;
}
.share-modal__close:hover {
  background: #e6e6e6; color: #222;
}
.share-modal__content {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.share-qr__header {
  font-size: 18px; font-weight: 600; color: #222; letter-spacing: 0.5px;
}
.share-qr__code {
  width: 220px; height: 220px; border-radius: 16px; background: #fafafa; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; padding: 14px;
}
.share-qr__image {
  width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 10px;
}
.share-qr__tip {
  font-size: 13px; color: #8f8f8f;
}
.share-qr__actions {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 28px; padding-top: 14px; margin-top: 6px; border-top: 1px solid #eee;
}
.share-qr__action {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid #eee; background: #f8f8f8; color: #8d8d8d; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
}
.share-qr__action i {
  font-size: 18px;
}
.share-qr__action:hover {
  background: #eee; color: #666;
}

@keyframes shareModalSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

body.dark .share-modal__panel {
  background: #1a1a1a; color: #f3f4f6;
}
body.dark .share-modal__close {
  background: #2a2a2a; color: #a1a1a1;
}
body.dark .share-modal__close:hover {
  background: #343434; color: #f3f4f6;
}
body.dark .share-qr__header {
  color: #f3f4f6;
}
body.dark .share-qr__code {
  background: #141414; border-color: #2a2a2a;
}
body.dark .share-qr__image {
  background: #1a1a1a;
}
body.dark .share-qr__tip {
  color: #8a8a8a;
}
body.dark .share-qr__actions {
  border-top-color: #2a2a2a;
}
body.dark .share-qr__action {
  border-color: #2a2a2a; background: #1f1f1f; color: #9aa3af;
}
body.dark .share-qr__action:hover {
  background: #2a2a2a; color: #d1d5db;
}

@media (max-width:900px) {
  .share-modal__panel {
    width: 92%; max-width: 360px; padding: 24px 20px 18px;
  }
  .share-qr__code {
    width: 200px; height: 200px;
  }
}

@media (max-width:720px) {
  .share-modal__panel {
    padding: 20px 18px 16px;
  }
  .share-modal__close {
    top: 8px; right: 8px; width: 28px; height: 28px; font-size: 18px;
  }
  .share-qr__header {
    font-size: 17px;
  }
  .share-qr__code {
    width: 180px; height: 180px; border-radius: 14px;
  }
  .share-qr__actions {
    gap: 24px;
  }
}


.geetest-captcha-wrapper {
  margin:16px 0;
}
.geetest-captcha {
  margin:12px 0;
}
.login-modal__body .geetest-captcha-wrapper {
  margin:12px 0;
}
.login-modal__body .geetest-captcha {
  margin:8px 0;
}
.geetest-comment-wrapper {
  margin:12px 0;
}
body.dark .geetest-captcha {
  filter:invert(0.9) hue-rotate(180deg);
}