:root {
  color-scheme: dark;
  --bg: #050607;
  --surface: #050607;
  --surface-2: #101318;
  --surface-3: #191e25;
  --line: #46505c;
  --line-soft: #303741;
  --text: #ffffff;
  --muted: #d4dbe5;
  --green: #00ee30;
  --blue: #35a7ff;
  --orange: #ffb800;
  --pink: #ff4fb8;
  --danger: #ff4058;
  --role-admin: #ff4058;
  --role-smod: #dc63ff;
  --role-mod: #35a7ff;
  --role-member: #00ee30;
  --panel-radius: 4px;
  --font-vietnamese: "Times New Roman", Times, Arial, serif;
  --font-teen: "Times New Roman", Times, Arial, serif;
}

/* Account access history and second-password gate. */
.access-ip-guide>p{margin:0 0 13px;color:var(--muted);line-height:1.58}.access-ip-guide>p strong{color:var(--text)}.access-ip-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.access-ip-guide-grid>div{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.access-ip-guide-grid>div>svg{width:20px;height:20px;flex:0 0 20px;margin-top:2px;color:var(--blue)}.access-ip-guide-grid>div>span{display:grid;gap:3px}.access-ip-guide-grid strong{font-size:.86rem}.access-ip-guide-grid small{color:var(--muted);font-size:.76rem;line-height:1.45}.access-ip-guide-note{display:flex;align-items:flex-start;gap:9px;margin-top:11px;padding:11px 12px;border:1px solid #725726;border-radius:11px;background:#312819;color:#ffe0a1;font-size:.8rem;line-height:1.5}.access-ip-guide-note>svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px}.access-ip-guide-note strong{color:#fff0bd}@media(max-width:700px){.access-ip-guide-grid{grid-template-columns:1fr}}
.access-history-view{display:none;gap:14px}.access-history-view.active{display:grid}.access-security-hero,.access-secondary-settings,.access-security-panel{overflow:hidden}.access-security-current{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}.access-security-current>svg{width:30px;height:30px;color:#45c77b}.access-security-current span{display:grid;gap:3px}.access-security-current small,.access-security-explain,.access-security-panel>.panel-title small{color:var(--muted)}.access-secondary-settings>.panel-title>b{padding:5px 9px;border-radius:999px;background:#263344;color:#dbe7f7;font-size:.72rem}.access-secondary-settings>.panel-title>b.enabled{background:#173d29;color:#8ef1b3}.access-secondary-settings>.panel-title>b.disabled{background:#49351a;color:#ffd58c}.access-security-explain{margin:0 0 12px;line-height:1.55}.access-security-delay{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:10px 12px;border:1px solid #725726;border-radius:11px;background:#312819;color:#ffd58c;font-size:.82rem}.access-pin-form,.access-pin-toggle-form,.access-pin-delete-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}.access-pin-toggle-form,.access-pin-delete-form{grid-template-columns:minmax(0,1fr) auto}.access-pin-form label,.access-pin-toggle-form label,.access-pin-delete-form label{display:grid;gap:6px;color:var(--muted);font-size:.78rem}.access-pin-form input,.access-pin-toggle-form input,.access-pin-delete-form input{width:100%;min-height:42px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);box-sizing:border-box}.access-pin-form button{grid-column:1/-1}.access-pin-toggle-form button,.access-pin-delete-form button,.access-pin-form button{min-height:42px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#263344;color:var(--text);font-weight:700}.access-pin-delete-form button.danger{border-color:#7d3940;background:#4a2025;color:#ffd9dc}.access-security-list,.access-history-list{display:grid;gap:9px}.access-ip-row,.access-history-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}.access-ip-row>svg,.access-history-row>svg{display:grid;place-items:center;width:38px;height:38px;padding:9px;border-radius:11px;background:#243447;color:#8cc8ff}.access-ip-row.is-current>svg{background:#173d29;color:#8ef1b3}.access-ip-row.is-blocked{border-color:#773b42;background:#2d1d21}.access-ip-row.is-blocked>svg,.access-failure-panel .access-history-row>svg{background:#4a2025;color:#ff9ba4}.access-ip-copy,.access-history-copy{display:grid;min-width:0;gap:3px}.access-ip-copy>span,.access-history-copy>span{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.access-ip-copy strong,.access-history-copy strong{overflow-wrap:anywhere}.access-ip-copy b{padding:2px 6px;border-radius:999px;background:#273649;color:#bed4ea;font-size:.66rem}.access-ip-copy b.current{background:#1d5034;color:#9cf5bd}.access-ip-copy b.blocked{background:#632c34;color:#ffd5d9}.access-ip-copy small,.access-history-copy small{color:var(--muted);line-height:1.45}.access-ip-copy em,.access-history-copy em{color:#9ab0c8;font-size:.72rem;font-style:normal}.access-ip-action{min-width:88px;min-height:38px;padding:0 11px;border:1px solid #754047;border-radius:9px;background:#48252a;color:#ffd9dc;font-weight:700}.access-ip-action.unblock{border-color:#38694b;background:#1d3d2a;color:#aef3c6}.access-ip-action:disabled{cursor:not-allowed;filter:grayscale(.5);opacity:.5}.access-history-new{padding:2px 6px;border-radius:999px;background:#513f18;color:#ffe19c;font-size:.66rem}.account-secondary-gate{position:fixed;z-index:2147483000;inset:0;display:grid;place-items:center;padding:18px;background:rgba(3,7,12,.94);backdrop-filter:blur(14px)}.account-secondary-gate[hidden]{display:none}.account-secondary-locked{overflow:hidden}.account-secondary-card{width:min(430px,100%);padding:28px;box-sizing:border-box;border:1px solid #41546b;border-radius:22px;background:linear-gradient(145deg,#17202d,#0d131c);box-shadow:0 28px 90px #000b;text-align:center}.account-secondary-icon{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 13px;border:1px solid #3c7754;border-radius:22px;background:#173d29;color:#8ef1b3}.account-secondary-icon svg{width:35px;height:35px}.account-secondary-card>small{color:#78d89b;font-weight:800;letter-spacing:.13em}.account-secondary-card h2{margin:7px 0 8px;font-size:1.55rem}.account-secondary-card p{margin:0 0 18px;color:#b9c5d4;line-height:1.55}.account-secondary-card label{display:grid;gap:7px;color:#d6e0ec;text-align:left}.account-secondary-card input{width:100%;height:54px;box-sizing:border-box;border:1px solid #4c6078;border-radius:13px;background:#090e15;color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:.55em;text-align:center}.account-secondary-card .primary-button{width:100%;min-height:46px;margin-top:12px}.account-secondary-feedback{min-height:20px;margin-top:8px;color:#ffabb2;font-size:.8rem}.account-secondary-logout{margin-top:9px;padding:8px;border:0;background:transparent;color:#aab8c8}.account-secondary-gate button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
@media(max-width:700px){.access-pin-form,.access-pin-toggle-form,.access-pin-delete-form{grid-template-columns:1fr}.access-pin-form button{grid-column:auto}.access-ip-row,.access-history-row{grid-template-columns:auto minmax(0,1fr)}.access-ip-action{grid-column:1/-1;width:100%}.account-secondary-card{padding:22px 17px}.account-secondary-card input{letter-spacing:.4em}}

.access-history-group{overflow:hidden;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}
.access-history-group>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px;cursor:pointer;list-style:none}
.access-history-group>summary::-webkit-details-marker{display:none}
.access-history-group>summary>svg:first-child{width:38px;height:38px;padding:9px;border-radius:11px;background:var(--surface-3);color:var(--blue)}
.access-history-group.is-failure>summary>svg:first-child{color:var(--danger)}
.access-history-group-copy{display:grid;min-width:0;gap:3px}
.access-history-group-copy>span{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.access-history-group-copy strong{overflow-wrap:anywhere}
.access-history-group-copy small{overflow:hidden;color:var(--muted);line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.access-history-group-copy em{color:var(--muted);font-size:.72rem;font-style:normal;opacity:.8}
.access-history-count{padding:2px 7px;border-radius:999px;background:var(--surface-3);color:var(--text);font-size:.66rem}
.access-history-chevron{width:18px;color:var(--muted);transition:transform .18s ease}
.access-history-group[open] .access-history-chevron{transform:rotate(180deg)}
.access-history-events{display:grid;border-top:1px solid var(--line);background:var(--surface)}
.access-history-event{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line-soft)}
.access-history-event:last-child{border-bottom:0}
.access-history-event>svg{width:16px;color:var(--blue)}
.access-history-group.is-failure .access-history-event>svg{color:var(--danger)}
.access-history-event>div{display:grid;min-width:0;gap:2px}
.access-history-event strong{font-size:.8rem}
.access-history-event small,.access-history-event em{color:var(--muted);font-size:.72rem;font-style:normal}
.access-pagination{margin-top:9px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.access-ip-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}
.access-ip-copy b.safe{background:var(--surface-3);color:var(--green)}
.access-ip-action.safe{border-color:var(--line);background:var(--surface-3);color:var(--green)}
.access-ip-action.safe.active{border-color:var(--green)}
.access-blocked-panel>.panel-title>span{color:var(--danger)}
@media(max-width:700px){.access-history-group>summary{grid-template-columns:auto minmax(0,1fr) auto}.access-history-event{padding:10px}.access-pagination{position:sticky;bottom:5px;z-index:2;box-shadow:0 5px 18px rgba(0,0,0,.28)}.access-ip-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.access-ip-actions>.access-ip-action{width:100%;min-width:0}.access-ip-actions>.access-ip-action:only-child{grid-column:1/-1}}

*, *::before, *::after {
  box-sizing: border-box;
  font-family: var(--font-vietnamese) !important;
}

html { scroll-behavior: auto; scrollbar-gutter: stable; }

i[data-lucide] { display: inline-block; width: 1em; height: 1em; flex: 0 0 1em; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: #000;
  color: var(--text);
  font-family: var(--font-vietnamese);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }

button, input, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.ambient {
  position: fixed;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .09;
  pointer-events: none;
}
.ambient-one { top: -180px; left: 16%; background: #1e7fff; }
.ambient-two { right: 12%; bottom: -220px; background: #ff3f99; }

.app-shell {
  width: min(100%, 720px);
  min-height: 100vh;
  margin-inline: auto;
  background: rgba(4, 5, 7, .96);
  border-inline: 1px solid #16191e;
  box-shadow: 0 0 80px rgba(0, 0, 0, .8);
}

.global-announcement-bar {
  position: fixed;
  z-index: 92;
  isolation: isolate;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  width: min(calc(100vw - 24px), 650px);
  min-height: 48px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255, 139, 38, .78);
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(45, 3, 9, .98), rgba(116, 19, 5, .97) 46%, rgba(54, 4, 7, .98));
  color: #fff6bf;
  box-shadow: 0 0 0 1px rgba(255, 45, 0, .17), 0 10px 30px rgba(0, 0, 0, .58), 0 0 26px rgba(255, 65, 0, .34), inset 0 1px rgba(255, 224, 124, .2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  transform: translateX(-50%);
}
.global-announcement-bar::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(ellipse at 8% 120%, rgba(255, 190, 30, .7) 0 8%, rgba(255, 59, 0, .38) 18%, transparent 39%),
    radial-gradient(ellipse at 40% 125%, rgba(255, 221, 83, .55) 0 7%, rgba(255, 72, 0, .31) 19%, transparent 38%),
    radial-gradient(ellipse at 74% 118%, rgba(255, 157, 22, .64) 0 9%, rgba(255, 37, 0, .3) 20%, transparent 40%),
    linear-gradient(90deg, transparent, rgba(255, 186, 52, .13), transparent);
  background-size: 220px 100%, 260px 100%, 240px 100%, 180% 100%;
  animation: globalAnnouncementHeat 4.2s linear infinite;
  pointer-events: none;
}
.global-announcement-bar::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 9%;
  bottom: 0;
  left: 9%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ff4d00 20%, #ffe36d 50%, #ff4d00 80%, transparent);
  filter: drop-shadow(0 0 5px #ff5a00);
  animation: globalAnnouncementEmber 2.4s ease-in-out infinite;
  pointer-events: none;
}
.global-announcement-bar[hidden] { display: none; }
.global-announcement-bar[data-source="jackpot"] { border-color: #ffd45e; background: linear-gradient(110deg, rgba(54, 12, 0, .99), rgba(142, 58, 2, .98) 46%, rgba(67, 12, 0, .99)); color: #fff9ce; box-shadow: 0 0 0 1px rgba(255, 211, 68, .2), 0 10px 32px rgba(0, 0, 0, .62), 0 0 32px rgba(255, 151, 0, .45), inset 0 1px rgba(255, 244, 180, .26); }
.global-announcement-icon { position: relative; z-index: 3; width: 48px; flex: 0 0 48px; display: grid; place-items: center; border-right: 1px solid rgba(255, 207, 92, .17); background: radial-gradient(circle, rgba(255, 197, 58, .23), transparent 68%); color: #ffd85d; text-shadow: 0 0 10px #ff6a00; }
.global-announcement-icon svg { width: 21px; height: 21px; filter: drop-shadow(0 0 5px rgba(255, 115, 0, .9)); animation: globalAnnouncementIcon 1.6s ease-in-out infinite; }
.global-announcement-viewport { position: relative; z-index: 1; min-width: 0; flex: 1; overflow: hidden; display: flex; align-items: center; pointer-events: auto; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.global-announcement-text { display: inline-block; width: max-content; flex: none; white-space: nowrap; color: #fff7c7; font-size: 14px; font-weight: 900; letter-spacing: .02em; text-shadow: 0 1px 2px #4a0000, 0 0 7px rgba(255, 180, 44, .72), 0 0 14px rgba(255, 53, 0, .48); will-change: transform; }
.global-announcement-bar[data-paused="1"] { border-color: rgba(255, 220, 112, .9); box-shadow: 0 0 0 1px rgba(255, 211, 68, .2), 0 10px 30px rgba(0, 0, 0, .58), 0 0 34px rgba(255, 137, 0, .42); }
.global-announcement-pause,.global-announcement-close { position: relative; z-index: 3; width: 38px; flex: 0 0 38px; display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid rgba(255, 207, 92, .13); background: rgba(36, 2, 6, .18); color: rgba(255, 247, 207, .82); cursor: pointer; pointer-events: auto; }
.global-announcement-pause:hover,.global-announcement-pause:focus-visible,.global-announcement-close:hover,.global-announcement-close:focus-visible { outline: 0; color: #fff; background: rgba(255, 187, 63, .16); }
.global-announcement-pause svg,.global-announcement-close svg { width: 17px; height: 17px; filter: drop-shadow(0 0 4px rgba(255, 104, 0, .65)); }
@keyframes globalAnnouncementMarquee { 0%,3% { transform: translate3d(var(--global-announcement-start, 100%),0,0); } 97%,100% { transform: translate3d(-100%,0,0); } }
@keyframes globalAnnouncementHeat { from { background-position: 0 0, 40px 0, 90px 0, 100% 0; } to { background-position: 220px 0, 300px 0, 330px 0, -80% 0; } }
@keyframes globalAnnouncementEmber { 0%,100% { opacity: .55; transform: scaleX(.75); } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes globalAnnouncementIcon { 0%,100% { transform: rotate(-5deg) scale(.96); } 50% { transform: rotate(5deg) scale(1.1); } }
@media (max-width: 520px) { .global-announcement-bar { width: calc(100vw - 14px); top: max(7px, env(safe-area-inset-top)); min-height: 44px; border-radius: 13px; } .global-announcement-icon { width: 41px; flex-basis: 41px; } .global-announcement-text { font-size: 12px; } .global-announcement-pause,.global-announcement-close { width: 34px; flex-basis: 34px; } }
@media (prefers-reduced-motion: reduce) { .global-announcement-bar::before,.global-announcement-bar::after,.global-announcement-icon svg { animation: none; } }

.admin-global-announcement-form { margin-bottom: 18px; padding: 16px; border: 1px solid #4a5563; border-radius: 12px; background: #0c1015; }
.admin-global-announcement-form textarea { min-height: 96px; resize: vertical; }
.admin-global-announcement-list { display: grid; gap: 10px; }
.admin-global-announcement-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 13px; border: 1px solid #343e49; border-radius: 11px; background: #0b0f14; }
.admin-global-announcement-row.is-jackpot { border-color: #8f5b18; background: linear-gradient(135deg, #171006, #0b0f14); }
.admin-global-announcement-copy { min-width: 0; display: grid; gap: 5px; }
.admin-global-announcement-copy strong { color: #fff; overflow-wrap: anywhere; }
.admin-global-announcement-copy span { display: flex; flex-wrap: wrap; gap: 6px 12px; color: #aeb9c6; font-size: 13px; }
.admin-global-announcement-copy em { width: max-content; padding: 2px 8px; border-radius: 999px; background: #173d24; color: #77ef9b; font-size: 11px; font-style: normal; font-weight: 800; }
.admin-global-announcement-copy em.scheduled { background: #17324a; color: #7bc9ff; }
.admin-global-announcement-copy em.inactive,.admin-global-announcement-copy em.expired { background: #3a2025; color: #ff8d9a; }
.admin-global-announcement-actions { display: flex; align-items: center; gap: 7px; }
.admin-global-announcement-actions button { min-height: 36px; padding: 7px 10px; border: 1px solid #465363; border-radius: 8px; background: #171d25; color: #dce5ef; cursor: pointer; }
.admin-global-announcement-actions button.danger { border-color: #733641; color: #ff91a0; }
@media (max-width: 560px) { .admin-global-announcement-row { grid-template-columns: 1fr; } .admin-global-announcement-actions { justify-content: flex-end; } }

.site-header {
  background: linear-gradient(180deg, #202329, #111317 67%);
  border-bottom: 1px solid var(--line);
}

.brand-row {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 561px) {
  body[data-logo-alignment="center"] .brand-row {
    position: relative;
    justify-content: flex-end;
  }
  body[data-logo-alignment="center"] .brand-row > .brand {
    position: absolute;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 150px);
    flex: none;
    transform: translateX(-50%);
  }
  body[data-logo-alignment="center"] .brand-row > .live-state {
    margin-right: auto;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.brand-mark {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 4px 8px rgba(75, 152, 255, .24));
}

/* Hot Girl GocNho — bộ đặc quyền tặng riêng, chuyển bảy màu chậm và mềm. */
@keyframes sevenBloomShift {
  0% { background-position: 0 50%, 0 50%; }
  50% { background-position: 100% 50%, 55% 50%; }
  100% { background-position: 0 50%, 100% 50%; }
}
@keyframes sevenBloomBreath {
  from { filter: saturate(.92) brightness(.98); box-shadow: 0 0 12px #ff7eb62b, 0 0 22px #8bd8ff1f; }
  to { filter: saturate(1.08) brightness(1.04); box-shadow: 0 0 18px #d99bff38, 0 0 32px #7ee6b329; }
}

.profile-panel.has-profile-skin[data-skin-pattern="aurora"] {
  border: 4px solid transparent !important;
  border-radius: 22px;
  outline: 1px solid #fff3fb8c;
  outline-offset: 2px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(115deg, #ff7eb6, #ff9d78, #ffd66b, #7ee6b3, #72ccff, #8b8ff7, #d99bff, #ff7eb6) border-box;
  background-size: 100% 100%, 320% 320%;
  animation: sevenBloomShift 20s ease-in-out infinite, sevenBloomBreath 5.5s ease-in-out infinite alternate !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"]:after {
  inset: 7px;
  border: 1px solid #ffdff1b8;
  border-radius: 15px;
  box-shadow: inset 0 0 18px #ff9fd21a;
}
.profile-panel[data-skin-pattern="aurora"] .profile-skin-frame {
  inset: -7px;
  border: 1px solid #fff0f9b8;
  border-radius: 25px;
  box-shadow: inset 0 0 0 1px #ffb9dc47, 0 0 16px #bb9cff38;
  animation: none !important;
}
.profile-panel[data-skin-pattern="aurora"] .profile-skin-frame:before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed #ffd6eb99;
  border-radius: 17px;
  box-shadow: inset 0 0 14px #8bd8ff1c;
}
.profile-panel[data-skin-pattern="aurora"] .profile-skin-frame:after {
  content: "♡";
  position: absolute;
  left: 50%;
  top: -11px;
  padding: 1px 8px 3px;
  border: 1px solid #ffc8e5;
  border-radius: 999px;
  background: #251329e8;
  color: #fff2fa;
  font-size: 12px;
  line-height: 1;
  text-shadow: 0 0 7px #ff7eb6;
  transform: translateX(-50%);
}
.profile-panel[data-skin-pattern="aurora"] .profile-skin-frame > i {
  width: 21px;
  height: 21px;
  border: 2px solid #fff3fa;
  border-radius: 62% 38% 64% 36%;
  background: conic-gradient(from 20deg, #ff7eb6, #ff9d78, #ffd66b, #7ee6b3, #72ccff, #8b8ff7, #d99bff, #ff7eb6);
  box-shadow: inset 0 0 5px #fff, 0 0 10px #ff9fce, 0 0 18px #9da7ff85;
  animation: sevenBloomBreath 4.5s ease-in-out infinite alternate;
}
.profile-panel[data-skin-pattern="aurora"] .profile-skin-frame > i:before {
  inset: -7px;
  border-radius: 46% 54% 48% 52%;
  background: conic-gradient(from 10deg, #ffb8da99 0 12%, transparent 12% 25%, #ffd79c99 25% 37%, transparent 37% 50%, #9fe9d099 50% 62%, transparent 62% 75%, #c5a8ff99 75% 87%, transparent 87%);
  filter: drop-shadow(0 0 4px #ffb8da);
}
.profile-panel[data-skin-pattern="aurora"] .profile-skin-frame > i:after { inset: 5px; border-color: #fff; box-shadow: inset 0 0 4px #fff; }
.profile-panel[data-skin-pattern="aurora"] .profile-skin-frame > span,
.profile-panel[data-skin-pattern="aurora"] .profile-skin-frame > b {
  border-radius: 999px;
  background: linear-gradient(90deg, #ff7eb6, #ff9d78, #ffd66b, #7ee6b3, #72ccff, #8b8ff7, #d99bff, #ff7eb6);
  background-size: 320% 100%;
  box-shadow: 0 0 8px #ffacd3a3;
  filter: none;
  opacity: .78;
  animation: sevenBloomShift 18s ease-in-out infinite;
}
.profile-panel[data-skin-pattern="aurora"] .profile-skin-frame > span { height: 3px; }
.profile-panel[data-skin-pattern="aurora"] .profile-skin-frame > b { width: 3px; background: linear-gradient(180deg, #ff7eb6, #ff9d78, #ffd66b, #7ee6b3, #72ccff, #8b8ff7, #d99bff, #ff7eb6); background-size: 100% 320%; }
.profile-panel[data-skin-pattern="aurora"] .profile-cover { border-color: #ffc9e5; border-radius: 15px 15px 7px 7px; }
.profile-panel[data-skin-pattern="aurora"] .profile-identity-copy {
  border-color: #ffb9dd99;
  border-radius: 16px;
  background: radial-gradient(circle at 12% 18%, #ff8fc62b, transparent 35%), radial-gradient(circle at 90% 75%, #86d8ff24, transparent 38%), linear-gradient(110deg, #160e1d, #21132b, #101a25);
}
.profile-panel[data-skin-pattern="aurora"] .profile-actions,
.profile-panel[data-skin-pattern="aurora"] .profile-stats { border-color: #d7b0e5; border-radius: 14px; }

.level-skin-preview[data-skin-pattern="aurora"],
.shop-demo-stage.profile-skin-demo[data-skin-pattern="aurora"] {
  border: 3px solid transparent;
  background:
    radial-gradient(circle at 18% 22%, #ff9bc630, transparent 31%) padding-box,
    linear-gradient(145deg, #1b1025, #0e1722) padding-box,
    linear-gradient(115deg, #ff7eb6, #ff9d78, #ffd66b, #7ee6b3, #72ccff, #8b8ff7, #d99bff, #ff7eb6) border-box;
  background-size: 100% 100%, 100% 100%, 320% 320%;
  animation: sevenBloomShift 18s ease-in-out infinite;
}
.level-skin-preview[data-skin-pattern="aurora"]:after,
.shop-demo-stage.profile-skin-demo[data-skin-pattern="aurora"]:before { border-color: #ffd4e9; box-shadow: inset 0 0 13px #8bd8ff47, 0 0 10px #ff8fc652; }
.level-skin-preview[data-skin-pattern="aurora"] i,
.level-skin-preview[data-skin-pattern="aurora"] span,
.shop-demo-stage.profile-skin-demo[data-skin-pattern="aurora"] > i { border-color: #fff0f8; background: conic-gradient(#ff7eb6, #ff9d78, #ffd66b, #7ee6b3, #72ccff, #8b8ff7, #d99bff, #ff7eb6); }





/* Hot Girl GocNho v2: khung sáng, cân giữa và chỉ chuyển màu ở viền. */
@keyframes hotGirlRailFlow {
  0% { background-position: 0 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes hotGirlRailFlowVertical {
  0% { background-position: 50% 0; }
  100% { background-position: 50% 300%; }
}

.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  inset: auto;
  margin-inline: 0;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  overflow: visible;
  border: 3px solid transparent !important;
  border-radius: 18px;
  outline: 0;
  background:
    linear-gradient(145deg, #4b3855 0%, #344b60 52%, #4b3853 100%) padding-box,
    linear-gradient(115deg, #ff91c8, #ffae91, #ffe188, #92e9c2, #8cddff, #a4a2ff, #dfa9ff, #ff91c8) border-box;
  background-size: 100% 100%;
  background-position: center;
  box-shadow: 0 9px 28px #0006, 0 0 20px #ffadd44a, 0 0 30px #9cddff2e;
}

.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"]:after {
  z-index: 3;
  inset: 5px;
  display: block !important;
  border: 1px solid #fff5fac7;
  border-radius: 12px;
  background: none;
  box-shadow: inset 0 0 16px #ffd1e72e;
  opacity: .78;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] > .panel-title {
  position: relative;
  z-index: 4;
  border-bottom: 1px solid #ffd1e8 !important;
  background: linear-gradient(90deg, #513d5b, #385267 52%, #503b58) !important;
  box-shadow: inset 0 -5px 13px #ffd0e91a;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame {
  inset: -4px;
  box-sizing: border-box;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  border: 1px solid #fff3fbc7;
  border-radius: 21px;
  box-shadow: 0 0 10px #ffb9dc66;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > i {
  width: 17px;
  height: 17px;
  border: 1px solid #fff9fc;
  background: conic-gradient(from 25deg, #ff91c8, #ffe188, #92e9c2, #8cddff, #dfa9ff, #ff91c8);
  box-shadow: 0 0 8px #fff7, 0 0 12px #ff9dca77;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > i:before {
  inset: -3px;
  background: radial-gradient(circle, #fff 0 16%, #ffd8ec8c 17% 40%, transparent 42%);
  filter: none;
  opacity: .9;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > i:nth-of-type(1) { top: -5px; left: -5px; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > i:nth-of-type(2) { top: -5px; right: -5px; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > i:nth-of-type(3) { bottom: -5px; right: -5px; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > i:nth-of-type(4) { bottom: -5px; left: -5px; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > span,
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > b {
  opacity: .88;
  filter: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > span {
  height: 2px;
  background: linear-gradient(90deg, #ff91c8, #ffae91, #ffe188, #92e9c2, #8cddff, #a4a2ff, #dfa9ff, #ff91c8);
  background-size: 300% 100%;
  animation: hotGirlRailFlow 16s ease-in-out infinite alternate !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > b {
  width: 2px;
  background: linear-gradient(180deg, #ff91c8, #ffe188, #92e9c2, #8cddff, #dfa9ff, #ff91c8);
  background-size: 100% 300%;
  animation: hotGirlRailFlowVertical 16s ease-in-out infinite alternate !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-cover {
  margin: 6px 6px 0;
  border: 1px solid #ffcbe3;
  border-radius: 12px 12px 6px 6px;
  background-color: #344d63;
  box-shadow: inset 0 -42px 58px #7b4f7b24, 0 4px 12px #0004;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-cover:after {
  display: block !important;
  background: linear-gradient(115deg, #ffb7d719, transparent 38%, #a9e5ff17 62%, transparent);
  background-size: 100% 100%;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity {
  margin-inline: 6px;
  background: linear-gradient(100deg, #44334f, #34495e 58%, #43324c);
  border-color: #ffc9e2;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-copy {
  padding: 9px 11px;
  border: 1px solid #ffc7e2;
  border-radius: 12px;
  background: linear-gradient(110deg, #624764e8, #46566de8 54%, #5b4668e8);
  box-shadow: inset 0 0 16px #ffe5f31c, 0 3px 10px #0003;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-actions {
  margin: 6px;
  border-color: #e8bddd;
  background: linear-gradient(105deg, #4d3b58e8, #3d5064e8) !important;
  box-shadow: inset 0 0 15px #ffd4e51a;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-actions button {
  border-color: #d9b4d6;
  background: #4b4058;
  color: #fff8fc;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats {
  margin: 0 6px 6px;
  overflow: hidden;
  border: 1px solid #d9c2e8;
  border-radius: 12px;
  background: #7d6b8b !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats button {
  background: linear-gradient(155deg, #455b70, #403b55);
  color: #e8e5f1;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats button:hover {
  background: linear-gradient(155deg, #57768e, #594a70);
}

@media (max-width: 620px) {
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] { border-radius: 15px; }
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame {
    inset: -3px;
    border-radius: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > span,
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > b {
    animation: none !important;
  }
}
#direct-conversation-panel[data-direct-theme] .direct-conversation-head[data-message-frame-theme="aurora"],
.conversation-row[data-message-frame-theme="aurora"],
.message-frame-demo-card[data-message-frame-theme="aurora"] {
  border-color: transparent;
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 16%, #ff91c530, transparent 30%) padding-box,
    linear-gradient(145deg, #201127, #101722) padding-box,
    linear-gradient(115deg, #ff7eb6, #ff9d78, #ffd66b, #7ee6b3, #72ccff, #8b8ff7, #d99bff, #ff7eb6) border-box;
  background-size: 100% 100%, 100% 100%, 320% 320%;
  box-shadow: inset 0 0 0 1px #fff4fa2e, inset 0 0 20px #ff8fc51a, 0 0 13px #bf9cff3d;
  animation: sevenBloomShift 18s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"],
  .profile-panel[data-skin-pattern="aurora"] .profile-skin-frame > i,
  .profile-panel[data-skin-pattern="aurora"] .profile-skin-frame > span,
  .profile-panel[data-skin-pattern="aurora"] .profile-skin-frame > b,
  .level-skin-preview[data-skin-pattern="aurora"],
  .shop-demo-stage.profile-skin-demo[data-skin-pattern="aurora"],
  .direct-conversation-head[data-message-frame-theme="aurora"],
  .conversation-row[data-message-frame-theme="aurora"],
  .message-frame-demo-card[data-message-frame-theme="aurora"],
  #direct-conversation-panel[data-message-frame-theme="aurora"] .direct-message-list { animation: none !important; }
}

/* Community shortcuts: show every room at once without an inner scroll area. */
#home-rooms.room-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-flow: row;
  grid-auto-rows: 64px;
  gap: 6px;
  padding: 7px 8px 9px;
  height: auto;
  max-height: none;
  overflow: visible;
}
#home-rooms .room-card,
#home-rooms .skeleton-card {
  min-width: 0;
  width: 100%;
  min-height: 64px;
  height: 64px;
}
#home-rooms .room-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 3px;
  border-radius: 7px;
  text-align: center;
}
#home-rooms .room-card > svg { width: 20px; height: 20px; flex: 0 0 20px; }
#home-rooms .room-card strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#home-rooms .room-card span {
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#home-rooms .room-card span svg { width: 10px; height: 10px; flex: 0 0 10px; }
#home-rooms .room-card small { display: none; }
.community-room-actions { display: flex; align-items: center; gap: 3px; }
.community-room-actions > small { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.community-room-actions > small svg { width: 13px; height: 13px; }
.community-room-actions .square-action:disabled { cursor: default; opacity: .35; }
@media (max-width: 760px) { .community-room-actions > small { display: none; } }
@media (max-width: 350px) { #home-rooms.room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.brand strong {
  display: block;
  color: #f7f9fc;
  font-family: var(--font-teen) !important;
  font-size: 23px;
  line-height: 1.05;
  letter-spacing: .025em;
  text-shadow: 0 0 12px rgba(255, 255, 255, .22);
}
.brand small { display: block; margin-top: 2px; color: var(--orange); font-size: 11px; }
.brand small b { color: var(--blue); }

.live-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 24px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
.live-state[hidden] { display: none !important; }
.live-state.online { color: #46e877; text-shadow: 0 0 8px rgba(70,232,119,.38); }
.live-state.offline { color: #ff4d5e; text-shadow: 0 0 8px rgba(255,77,94,.4); }
.live-state.offline > span { animation: realtime-connection-blink .9s steps(2, end) infinite; }
.live-state button { margin-left: 6px; padding: 2px 6px; border: 1px solid #a63e49; border-radius: 4px; background: #36151a; color: #ffd9dd; cursor: pointer; font: inherit; font-size: 10px; text-shadow: none; }
.live-state button[hidden] { display: none; }
.live-state button:hover { border-color: #ff7180; background: #5a1d25; color: #fff; }
@keyframes realtime-connection-blink { 50% { opacity: .25; } }
.header-refresh-button, .header-menu-button {
  place-items: center;
  height: 42px;
  border: 1px solid #39424e;
  border-radius: 7px;
  background: linear-gradient(180deg, #1c2026, #111419);
  color: #dce5ef;
  cursor: pointer;
}
.header-refresh-button { display: none; flex: 0 0 42px; width: 42px; padding: 0; font-size: 11px; font-weight: 800; }
.header-menu-button { display: none; flex: 0 0 42px; width: 42px; padding: 0; }
.header-refresh-button svg, .header-menu-button svg { width: 19px; height: 19px; }
.header-refresh-button:hover, .header-menu-button:hover { border-color: #4d82b7; color: var(--blue); }
.header-refresh-button:disabled { cursor: wait; opacity: .7; }
.header-refresh-button.is-loading svg { animation: header-refresh-spin .65s linear infinite; }
@keyframes header-refresh-spin { to { transform: rotate(360deg); } }
@keyframes pulse-dot { 50% { opacity: .45; } }

.main-nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  min-height: 57px;
  background: #121419;
  border-bottom: 1px solid var(--line);
}
.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 6px 2px;
  border: 0;
  border-right: 1px solid #191d23;
  background: transparent;
  color: #aeb6c2;
  cursor: pointer;
  font-size: 10px;
  transition: color .18s, background .18s;
}
.nav-item:last-child { border-right: 0; }
.nav-item svg { width: 21px; height: 21px; stroke-width: 1.8; }
.nav-item > span:last-child {
  display: block;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item:hover, .nav-item.active { color: var(--blue); background: rgba(81, 157, 255, .06); }
.nav-item.active::after { content: ""; position: absolute; inset: auto 20% 0; height: 2px; background: var(--blue); box-shadow: 0 -2px 8px var(--blue); }
.nav-icon-wrap { position: relative; display: inline-flex; }
.badge {
  position: absolute;
  top: -8px;
  right: -13px;
  min-width: 19px;
  height: 17px;
  padding: 1px 4px;
  border: 1px solid #101216;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-size: 9px;
  line-height: 13px;
  text-align: center;
}
.badge.danger { background: var(--danger); }
.badge:empty, .badge[data-count="0"] { display: none; }

.profile-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 61px;
  padding: 7px 9px;
  background: #050607;
}
.account-restriction-banner {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border-block: 1px solid #7d303a;
  background: linear-gradient(90deg, #351319, #1b0d11);
  color: #ffb4bc;
}
.account-restriction-banner[hidden] { display: none; }
.account-restriction-banner > svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: #ff6575; }
.account-restriction-banner strong { display: block; color: #fff0f2; font-size: 12px; }
.account-restriction-banner span { display: block; margin-top: 1px; font-size: 10px; line-height: 1.45; }
.avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #697586;
  border-radius: 50%;
  background: linear-gradient(145deg, #2c8eff, #7555e8 52%, #fb559a);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  text-shadow: 0 1px 2px #000;
  box-shadow: inset 0 0 0 3px #0b0c0f, 0 0 0 2px rgba(66, 230, 106, .28);
}
.avatar-main { width: 45px; height: 45px; }
.avatar-small { width: 35px; height: 35px; font-size: 13px; box-shadow: inset 0 0 0 2px #0b0c0f; }
.avatar-xl { width: 68px; height: 68px; font-size: 25px; }
.profile-copy { min-width: 0; flex: 1; }
.header-inventory-button {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #4f416c;
  border-radius: 13px;
  background: linear-gradient(145deg, #251936, #121722);
  color: #c7a8ff;
  cursor: pointer;
  box-shadow: inset 0 0 12px rgba(169, 112, 255, .08), 0 4px 12px rgba(0, 0, 0, .24);
  transition: border-color .18s, background .18s, color .18s, transform .18s;
}

/* Voice: làm nổi đúng khung của người đang phát âm thanh. */
#party-room-panel .party-mic-slot.active.is-speaking {
  border-color: #61efad !important;
  box-shadow: inset 0 0 0 var(--voice-ring, 2px) rgba(97,239,173,.92), 0 0 var(--voice-glow, 12px) rgba(47,222,143,.58) !important;
}
#party-room-panel .party-mic-slot.active.is-speaking::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 3px;
  border: 2px solid rgba(151,255,205,.72);
  border-radius: 8px;
  pointer-events: none;
  animation: party-speaking-frame .85s ease-in-out infinite alternate;
}
#party-room-panel .party-mic-slot.active.is-speaking .party-stage-person > small {
  color: #9effca;
  filter: drop-shadow(0 0 5px rgba(63,255,157,.75));
}
@keyframes party-speaking-frame {
  from { opacity: .52; transform: scale(.992); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #party-room-panel .party-mic-slot.active.is-speaking::after { animation: none; }
}
.header-inventory-button > svg { width: 21px; height: 21px; }
.header-inventory-button:hover { transform: translateY(-1px); border-color: #9b70df; background: linear-gradient(145deg, #38244f, #192131); color: #eadcff; }
.header-inventory-button:focus-visible { outline: 2px solid #ae7fff; outline-offset: 2px; }
.profile-copy > div { display: flex; align-items: center; gap: 7px; }
.profile-copy strong { color: var(--orange); font-size: 14px; }
.rank { padding: 1px 6px; border: 1px solid #31433b; border-radius: 3px; color: var(--green); background: #102019; font-size: 9px; }
.role-name.role-admin, .role-admin { color: var(--role-admin) !important; }
.role-name.role-smod, .role-smod { color: var(--role-smod) !important; }
.role-name.role-mod, .role-mod { color: var(--role-mod) !important; }
.role-name.role-member, .role-member { color: var(--role-member) !important; }
.role-name { vertical-align: middle; }
.name-icon { display: inline-block; flex: 0 0 auto; margin-right: 4px; vertical-align: -2px; }
.gender-name-icon { width: 12px; height: 12px; display: inline-grid; flex: 0 0 auto; place-items: center; margin-right: 3px; object-fit: contain; vertical-align: -1px; }
.gender-name-icon-other { color: #aeb8c5; font-size: 11px; line-height: 1; filter: drop-shadow(0 0 2px rgba(156, 116, 255, .72)); }
.name-icon-admin { width: 30px; height: 12px; object-fit: contain; image-rendering: auto; }
.staff-name-icon {
  min-width: 27px;
  height: 12px;
  padding: 0 3px;
  border: 1px solid currentColor;
  background: #fff;
  font-family: Georgia, serif !important;
  font-size: 7px;
  font-weight: 800;
  font-style: italic;
  line-height: 10px;
  text-align: center;
}
.name-icon-smod { color: #b21eda; }
.name-icon-mod { color: #1571dd; }
.custom-name-icon { max-width: 70px; height: 16px; object-fit: contain; }
#header-name, #profile-preview-name { display: inline-flex; align-items: center; flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; }
#header-name > span, #profile-preview-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#header-name { padding: 0; border: 0; outline-offset: 3px; background: none; cursor: pointer; text-align: left; }
#header-name:disabled { cursor: default; }
.rank.role-admin { border-color: rgba(255,77,96,.55); background: rgba(255,77,96,.12); }
.rank.role-smod { border-color: rgba(217,108,255,.55); background: rgba(217,108,255,.12); }
.rank.role-mod { border-color: rgba(87,166,255,.55); background: rgba(87,166,255,.12); }
.rank.role-member { border-color: rgba(66,230,106,.45); background: rgba(66,230,106,.1); }
.profile-copy p { display: flex; align-items: center; gap: 4px; margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.profile-copy p svg { width: 12px; height: 12px; color: var(--orange); }
.profile-copy p b { color: #f4df65; }
.profile-meta-row { flex-wrap: wrap; }
.header-level-display { display: inline-flex; align-items: center; gap: 3px; color: #dce4ee; white-space: nowrap; }
.header-level-display > svg { width: 12px; height: 12px; color: #d9a7ff !important; }
.header-level-display > b { color: #f4df65; }
.header-meta-button { min-height: 23px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border: 1px solid #3b4551; border-radius: 999px; background: #151a20; color: #dce4ee; cursor: pointer; font: inherit; line-height: 1.2; transition: border-color .18s, background .18s, transform .18s; }
.header-meta-button:hover { transform: translateY(-1px); border-color: #667587; background: #1d242c; color: #fff; }
.header-coin-button { border-color: #655621; background: #211b0c; color: #e8d99c; }
.header-coin-button:hover { border-color: #d1aa35; background: #2c230c; }
.header-coin-button > svg { width: 13px !important; height: 13px !important; color: #ffd65e !important; }
.header-coin-button > b { color: #ffe27c !important; }
.header-level-display { border-color: #55416e; background: #1d1428; }
.header-level-display:hover { border-color: #a273d3; background: #281a37; }
.header-mood-button {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  padding: 1px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #dfe5ec;
  cursor: pointer;
  font: inherit;
  line-height: 1.3;
}
.header-mood-button > span:first-child { font-size: 14px; line-height: 1; }
.header-mood-button > #header-mood-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-mood-button > #header-mood-icon.mood-icon-vietnam-flag {
  width: 18px;
  height: 12px;
  flex: 0 0 18px;
}
.mood-flag-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}
.header-mood-button > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-mood-button > svg { width: 12px; height: 12px; color: var(--pink); }
.header-mood-button.active:hover { border-color: #62506a; background: #211727; color: #fff; }
.header-mood-button:disabled { cursor: default; opacity: .72; }
.text-action, .refresh-action, .square-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--orange);
  cursor: pointer;
  font-size: 11px;
}
.text-action svg, .refresh-action svg { width: 14px; height: 14px; }

main { min-height: 600px; padding: 8px 0 0; }
/* Page content must remain readable even while background effects are paused.
   A paused entrance fade can otherwise leave the whole view at 45% opacity. */
.view { display: none; }
.view.active { min-height: 570px; display: flex; flex-direction: column; }

.panel {
  margin: 0 0 9px;
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.panel-title {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(#202329, #181b20);
  color: var(--green);
  font-family: var(--font-teen) !important;
  font-weight: 700;
}
.panel-title > span { display: flex; align-items: center; gap: 6px; }
.panel-title svg { width: 16px; height: 16px; }
.panel-title small { color: var(--muted); font-family: inherit; font-size: 9px; font-weight: 400; }
.square-action { width: 26px; height: 24px; justify-content: center; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: #14171b; }
.square-action svg { width: 14px; height: 14px; }

.room-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px 8px; }
.room-card {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: #17191e;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s;
}
.room-card:hover { transform: translateY(-2px); border-color: #48505c; background: #1c2026; }
.room-card.room-card-roomad,
#home-rooms .room-card.room-card-roomad { position: relative; overflow: hidden; border-color: #943644; background: radial-gradient(circle at 88% 18%, rgba(255,68,83,.2), transparent 35%), linear-gradient(145deg, #42131b, #211016 68%, #121216); box-shadow: inset 0 0 0 1px rgba(255,92,105,.08), 0 0 16px rgba(185,35,51,.18); }
.room-card.room-card-roomad::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,.08) 45%, transparent 66%); transform: translateX(-115%); animation: roomAdCardGlow 4.8s ease-in-out infinite; }
.room-card.room-card-roomad:hover,
#home-rooms .room-card.room-card-roomad:hover { border-color: #ef5a68; background: radial-gradient(circle at 88% 18%, rgba(255,77,91,.28), transparent 38%), linear-gradient(145deg, #551722, #291219 70%); box-shadow: inset 0 0 0 1px rgba(255,128,138,.12), 0 0 22px rgba(221,49,66,.32); }
.room-card.room-card-roomad > svg,
#home-rooms .room-card.room-card-roomad > svg { color: #ff6876; filter: drop-shadow(0 0 6px rgba(255,68,85,.5)); }
.room-card.room-card-roomad strong,
#home-rooms .room-card.room-card-roomad strong { color: #ffadb5; text-shadow: 0 0 8px rgba(255,64,82,.3); }
.room-card.room-card-roomad span,
#home-rooms .room-card.room-card-roomad span { color: #ffd4d8; }
.room-card.room-card-roomad span svg,
#home-rooms .room-card.room-card-roomad span svg { color: #ff7a86; }
@keyframes roomAdCardGlow { 0%,65%,100% { transform: translateX(-115%); } 78% { transform: translateX(115%); } }
.room-card > svg { width: 24px; height: 24px; color: #aeb9ca; }
.room-card strong { color: var(--orange); font-family: Georgia, serif; font-size: 13px; }
.room-card span { display: flex; align-items: center; gap: 4px; color: #cbd1db; font-size: 10px; }
.room-card span svg { width: 12px; height: 12px; color: var(--blue); }
.room-card small { max-width: 100%; color: var(--muted); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skeleton-card { min-height: 92px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(90deg, #16191d, #20242a, #16191d); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.quick-menu { display: grid; grid-template-columns: 50% 50%; border-bottom: 1px solid var(--line); }
.quick-menu-left { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-width: 0; border-right: 1px solid var(--line); }
.quick-menu-left .clock-card { min-height: 0; border-right: 0; }
.quick-menu-left .quick-dating-link { display: flex; min-height: 40px; align-items: center; justify-content: flex-start; gap: 6px; padding: 6px 9px; border: 0; border-top: 1px solid var(--line); background: linear-gradient(145deg, #271217, #151116); color: #ff596b; font-family: Georgia, serif; font-size: 13px; font-weight: 800; text-align: left; cursor: pointer; }
.quick-menu-left .quick-dating-link:hover { background: #32161d; color: #ff91a0; }
.quick-menu-left .quick-dating-link svg { width: 16px; height: 16px; color: #f4f4f5; }
.quick-menu-left .quick-temporary-room-link { display: flex; min-height: 40px; align-items: center; justify-content: flex-start; gap: 6px; padding: 6px 9px; border-top: 1px solid var(--line); background: #181a1f; color: #ff596b; text-align: left; text-decoration: none; font: 800 13px Georgia, serif; }
.quick-menu-left .quick-temporary-room-link:hover { background: #20242a; color: #ff91a0; }
.quick-menu-left .quick-temporary-room-link svg { width: 16px; height: 16px; color: #f4f4f5; }
.clock-card { min-height: 99px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--line); }
.clock-card strong { font-family: Georgia, serif; color: #d4d9e0; font-size: 28px; line-height: 1.2; }
.clock-card span { margin-top: 3px; color: #94a0b1; font-family: Georgia, serif; font-size: 11px; }
.quick-links { display: grid; }
.quick-links button, .menu-grid button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #181a1f;
  color: var(--blue);
  cursor: pointer;
  text-align: left;
  font-family: Georgia, serif;
  font-size: 13px;
}
.quick-links button { padding: 5px 9px; }
.quick-links button:last-child { border-bottom: 0; }
.quick-links button:hover, .menu-grid button:hover { background: #20242a; color: #86c0ff; }
.quick-links svg, .menu-grid svg { width: 15px; height: 15px; color: #9ca7b7; }
.quick-links .quick-admincp-link { color: #ff5968; font-weight: 700; }
.quick-links .quick-admincp-link svg { color: #ff5968; }
.quick-links .quick-admincp-link:hover { color: #ff8b96; background: #2a1519; }
.quick-links .quick-access-history-link{color:#ff656d;font-weight:700}.quick-links .quick-access-history-link svg{color:#ff656d}.quick-links .quick-access-history-link span{min-width:0;flex:1}.quick-links .quick-access-history-link:hover{color:#ff8b96;background:#2a1519}.account-menu-list>.account-access-history-link>svg:first-child,.account-menu-list>.account-access-history-link strong{color:#ff656d}
.quick-links .quick-link-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--line-soft); }
.quick-links .quick-link-duo:last-child { border-bottom: 0; }
.quick-links .quick-link-duo > button, .quick-links .quick-link-duo > a { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 5px; padding: 5px 6px; border: 0; border-right: 1px solid var(--line-soft); background: #111418; color: #c6ced8; font: inherit; font-size: 10px; text-align: center; text-decoration: none; cursor: pointer; }
.quick-links .quick-link-duo > :last-child { border-right: 0; }
.quick-links .quick-link-duo > a:hover, .quick-links .quick-link-duo > button:hover { background: #20242a; color: #86c0ff; }
.quick-links a.quick-dating-link, .quick-links button.quick-dating-link { position: relative; color: #ff5a67; font-weight: 800; }
.quick-links .quick-dating-link svg { width: 15px; height: 15px; color: #ff5a67; }
.quick-links .quick-link-duo > .quick-dating-link:hover { background: #2a1519; color: #ff8b96; }
.quick-hot-badge { display: inline-grid; min-width: 24px; place-items: center; padding: 1px 3px; border-radius: 4px; background: linear-gradient(135deg, #ff293b, #ff7a31); color: #fff; font: 900 7px/1.35 Arial, sans-serif; box-shadow: 0 0 8px rgba(255,55,70,.42); }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; }
.menu-grid button { min-height: 34px; padding: 5px 8px; color: #ff656d; border-right: 1px solid var(--line); }
.menu-grid button:nth-last-child(-n+2) { border-bottom: 0; }

.announcement-panel { padding-bottom: 12px; }
.site-announcement-panel { padding-bottom: 0; }
.home-welcome-decoration { padding: 10px 0 0; background: radial-gradient(circle at 50% 4%, rgba(255,111,187,.09), transparent 46%), #050607; text-align: center; font-family: Georgia, serif; }
.home-welcome-ribbon { min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; overflow: hidden; color: var(--pink); }
.home-welcome-ribbon span { flex: 0 0 auto; font-size: 18px; text-shadow: 0 0 10px currentColor; transform: rotate(-10deg); }
.home-welcome-ribbon span:nth-of-type(2) { color: var(--blue); transform: rotate(10deg); }
.home-welcome-ribbon span:nth-of-type(3) { color: #79e58b; }
.home-welcome-ribbon span:nth-of-type(4) { color: #ffd469; transform: rotate(12deg); }
.home-welcome-ribbon i { width: 70px; border-top: 2px dashed currentColor; color: #7864b4; transform: rotate(7deg); opacity: .8; }
.home-welcome-ribbon i:nth-of-type(2) { color: #c75d8d; transform: rotate(-7deg); }
.home-welcome-ribbon i:nth-of-type(3) { color: #48a86a; }
.home-welcome-clock { color: #f2f4f7; font-family: Georgia, serif; font-size: 11px; line-height: 1.4; }
.home-welcome-clock strong { font-size: 13px; }
.home-welcome-clock b { font-weight: 400; }
.home-welcome-date { color: #fff; font-family: Georgia, serif; font-size: 11px; font-weight: 800; }
.home-fixed-greeting { padding: 4px 10px 9px; background: #050607; font-family: Georgia, serif; line-height: 1.35; text-align: center; }
.home-fixed-greeting strong, .home-fixed-greeting span { display: block; overflow-wrap: anywhere; }
.home-fixed-greeting strong { color: var(--green); font-size: 15px; font-weight: 900; }
.home-fixed-greeting span { color: var(--pink); font-size: 14px; font-weight: 900; }
.site-featured-card { margin-top: 2px; background: #050607; }
.site-featured-card .site-announcement-body { padding: 1px 10px 2px; }
.site-featured-card .site-announcement-content { line-height: 1.22; }
.featured-line { display: block; }
.featured-line-1 { color: var(--green); }
.featured-line-2 { color: var(--pink); }
.site-featured-card .site-announcement-meta { padding-bottom: 9px; }
.site-featured-card > .post-media-grid, .site-featured-card > .post-audio { margin-top: 2px; }
.site-announcement-list { display: grid; border-top: 1px solid var(--line); }
.site-announcement-loading .refresh-action { cursor: default; opacity: .62; }
.announcement-load-error .primary-button { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; }
.site-announcement-card { padding: 6px 0 4px; border-bottom: 1px solid var(--line); background: #050607; }
.site-announcement-card:last-child { border-bottom: 0; }
.site-announcement-empty { padding: 8px 9px; }
.site-announcement-empty-edit { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 8px 12px; border: 1px dashed #65513a; border-radius: 5px; background: #15120e; color: var(--orange); cursor: pointer; text-align: left; }
.site-announcement-empty-edit:hover { border-color: var(--orange); background: #21180f; }
.site-announcement-empty-edit > svg { flex: 0 0 17px; width: 17px; }
.site-announcement-empty-edit > span { display: grid; gap: 2px; }
.site-announcement-empty-edit strong { color: #e6b06f; font-size: 11px; }
.site-announcement-empty-edit small { color: #8f8273; font-size: 9px; }
.site-announcement-body { padding: 0 10px 3px; }
.site-announcement-content { margin: 0; color: inherit; font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.announcement-size-small .site-announcement-content, .announcement-editor-preview.announcement-size-small p { font-size: 9px; }
.announcement-size-normal .site-announcement-content, .announcement-editor-preview.announcement-size-normal p { font-size: 11px; }
.announcement-size-large .site-announcement-content, .announcement-editor-preview.announcement-size-large p { font-size: 14px; }
.announcement-size-xlarge .site-announcement-content, .announcement-editor-preview.announcement-size-xlarge p { font-size: 17px; }
.announcement-font-serif .site-announcement-content, .announcement-editor-preview.announcement-font-serif p { font-family: Georgia, "Times New Roman", serif !important; }
.announcement-font-handwriting .site-announcement-content, .announcement-editor-preview.announcement-font-handwriting p { font-family: "Dancing Script", "Charmonman", cursive !important; }
.announcement-font-display .site-announcement-content, .announcement-editor-preview.announcement-font-display p { font-family: "Pattaya", "Lobster", cursive !important; }
.announcement-bold .site-announcement-content, .announcement-editor-preview.announcement-bold p { font-weight: 800; }
.site-announcement-card > .post-media-grid, .site-announcement-card > .post-audio { margin-top: 2px; }
.site-announcement-meta { min-height: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; padding: 2px 9px; background: transparent; color: #6f7b8b; font-family: Georgia, serif; font-size: 9px; text-align: center; }
.site-announcement-meta button { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; font-weight: 700; }
.site-announcement-meta .site-announcement-change { display: inline-flex; align-items: center; gap: 3px; margin-left: 0; color: var(--orange); }
.site-announcement-change svg { width: 11px; }
.love-line { height: 84px; display: flex; align-items: center; justify-content: center; padding: 8px 60px 0; }
.love-line span { color: var(--pink); font-size: 28px; transform: rotate(-12deg); text-shadow: 0 0 12px rgba(255, 111, 187, .45); }
.love-line span:nth-of-type(2) { color: var(--blue); }
.love-line i { width: 70px; border-top: 2px dashed #4f9b72; transform: rotate(8deg); }
.love-line i:nth-of-type(2) { border-color: #6f92c7; transform: rotate(-8deg); }
.welcome-copy { text-align: center; font-family: Georgia, serif; }
.welcome-copy > span { color: #fff; font-size: 11px; }
.welcome-copy strong, .welcome-copy b { display: block; line-height: 1.35; }
.welcome-copy strong { color: #2fbe52; font-size: 14px; }
.welcome-copy strong em { color: var(--blue); font-style: normal; }
.welcome-copy b { color: var(--pink); font-size: 13px; }
.welcome-copy p { margin: 8px 0 0; color: #8f98a7; font-size: 10px; }
.admin-label { padding: 1px 4px; background: #47f290; color: #07130b; font-size: 8px; font-weight: 700; }

.global-chatbox-panel { overflow: hidden; }
.global-chatbox-loading [data-refresh-global-chat] { cursor: wait; opacity: .62; }
.global-chat-composer { padding: 10px; border-bottom: 1px solid var(--line); background: #0b0d10; }
.room-chat-composer { border-top: 0; border-bottom: 1px solid var(--line); }
.room-chat-composer .composer-media-preview,
.room-chat-composer .composer-style-panel { margin-left: 0; }
.message-bubble > .post-media-grid,
.message-bubble > .post-audio { margin-top: 7px; }
.message-bubble > .post-media-grid { width: min(360px, 60vw); max-width: 100%; }
.global-chat-list { background: #050607; }
.global-chat-loading-label { margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); color: #8993a1; font-size: 11px; text-align: center; }
.global-chat-error .primary-button { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; }
.global-chat-message { position: relative; padding: 11px 8px; border-bottom: 1px solid var(--line-soft); }
.room-chat-pinned[hidden] { display: none !important; }
.room-chat-pinned { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid #8b3d45; background: linear-gradient(100deg, #3b1117, #1d1115 68%, #120d10); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 5px 18px rgba(124,18,31,.16); }
.room-chat-pinned-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; background: transparent; color: #fff; cursor: pointer; text-align: left; }
.room-chat-pinned-main > svg { flex: 0 0 18px; width: 18px; color: #ff6a76; filter: drop-shadow(0 0 5px rgba(255,70,86,.38)); }
.room-chat-pinned-main > span { min-width: 0; display: grid; gap: 2px; }
.room-chat-pinned-main strong, .room-chat-pinned-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-chat-pinned-main strong { color: #ffb1b8; font-size: 11px; }
.room-chat-pinned-main small { color: #ecdadd; font-size: 10px; }
.room-chat-pinned-remove { flex: 0 0 42px; display: grid; place-items: center; border: 0; border-left: 1px solid rgba(255,112,124,.2); background: rgba(62,13,21,.45); color: #ff8993; cursor: pointer; }
.room-chat-pinned-remove:hover { background: rgba(112,25,37,.55); color: #ffd1d5; }
.room-chat-pinned-remove > svg { width: 16px; }
.global-chat-message.is-pinned { background: linear-gradient(90deg, rgba(160,31,45,.15), rgba(83,18,28,.05) 62%, transparent); box-shadow: inset 3px 0 #df4d5b; }
.global-chat-message.pin-focus { animation: roomChatPinFocus 1.35s ease; }
.global-chat-message-tools > button.global-chat-pin { color: #ffc46b; }
.global-chat-message-tools > button.global-chat-pin.is-active { border-color: #a54550; background: linear-gradient(180deg, #6a2630, #431820); color: #ffd1d5; }
.global-chat-message-tools > button.global-chat-pin svg { display: none; }
@keyframes roomChatPinFocus { 0%,100% { filter: none; } 35% { filter: brightness(1.55); box-shadow: inset 3px 0 #ff6674, 0 0 18px rgba(255,69,86,.28); } }
.global-chat-message.is-sending { background: linear-gradient(90deg, rgba(78, 161, 255, .055), transparent 55%); }
.global-chat-message.is-failed { background: linear-gradient(90deg, rgba(255, 78, 95, .075), transparent 60%); }
.chat-optimistic-message.is-sending { opacity: .72; }
.chat-optimistic-message.is-failed { opacity: .92; }
.chat-optimistic-state { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.chat-optimistic-state svg { width: 11px; height: 11px; }
.chat-optimistic-state.is-sending svg { animation: spin .8s linear infinite; }
.chat-optimistic-state.is-failed { color: #ff7884; }
.global-chat-message:last-child { border-bottom: 0; }
.global-chat-message-head { display: flex; align-items: flex-start; gap: 8px; }
.global-chat-message-head .avatar { width: 48px; height: 48px; flex: 0 0 48px; }
.global-chat-message-meta { min-width: 0; flex: 1; }
.global-chat-identity-row { min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 5px; min-height: 17px; overflow: hidden; }
.global-chat-author { min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; width: fit-content; max-width: 100%; padding: 0; overflow: hidden; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.35; text-align: left; white-space: nowrap; }
.global-chat-author .role-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-chat-level { flex: 0 0 auto; color: #e2b6ff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.global-chat-member-icon { font-size: 13px; line-height: 1; filter: saturate(.85); }
.global-chat-content-row { width: 100%; display: flex; align-items: baseline; gap: 7px; margin: 10px 0 0; }
.global-chat-content-row time { flex: 0 0 auto; color: #778291; font-size: 12px; white-space: nowrap; }
.global-chat-content-row .chat-relative-time { font-style: italic; }
.global-chat-energy { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-top: 3px; color: #8993a1; font-size: 11px; font-weight: 600; line-height: 1.4; }
.global-chat-member-stats { display: flex; flex-wrap: wrap; gap: 4px 7px; margin-top: 3px; color: var(--green); font-family: Georgia, serif; font-size: 12px; font-weight: 600; }
.global-chat-member-stats b { color: #eef2f6; font-weight: 400; }
.global-chat-message-tools { z-index: 2; flex: 0 0 34px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.global-chat-message-tools > button { width: 34px; height: 22px; min-height: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 1px 2px; border: 1px solid #59616b; border-radius: 3px; background: linear-gradient(180deg, #454b53, #30343a); box-shadow: inset 0 1px rgba(255,255,255,.13), 0 1px 2px rgba(0,0,0,.55); color: #f5f7fa; cursor: pointer; font-family: Georgia, serif; font-size: 11px; font-weight: 700; line-height: 1; text-shadow: 0 1px 1px #000; }
.global-chat-message-tools > button:hover { border-color: #7b8591; background: linear-gradient(180deg, #555c65, #393e45); color: #fff; }
.global-chat-message-tools > button.global-chat-pm,
.global-chat-message-tools > button.global-chat-tag { color: #f5f7fa; }
.global-chat-message-tools > button.global-chat-delete { color: #ff6573; }
.global-chat-message-tools > button.global-chat-delete:hover { border-color: #a84b57; color: #ff8791; }
.global-chat-delete span { display: inline; }
.global-chat-delete svg { display: none; }
.global-chat-message-tools > button.global-chat-security-lock { border-color: #8b3d49; background: linear-gradient(180deg, #5b2029, #35151b); color: #ff9da8; }
.global-chat-message-tools > button.global-chat-security-lock:hover { border-color: #e15a6d; background: linear-gradient(180deg, #702832, #461a21); color: #ffd7dc; }
.global-chat-message-tools > button.global-chat-security-lock.is-locked { border-color: #347b5d; background: linear-gradient(180deg, #245c46, #17392c); color: #9aebc5; }
.global-chat-security-lock span { display: none; }
.global-chat-security-lock svg { width: 13px; height: 13px; }
.global-chat-message-tools > button.global-chat-block { color: #ffc46b; }
.global-chat-message-tools > button.global-chat-block:hover { border-color: #96632e; color: #ffe0a8; }
.global-chat-content { min-width: 0; width: auto; flex: 1; margin: 0; padding: 8px 0; color: #fff; font-family: Georgia, serif; font-size: 17px; font-weight: 500; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.global-chat-message.is-system-bot .global-chat-content { color: #42e66a !important; }
.global-chat-message .post-mood { padding-left: 47px; }
.global-chat-message .post-media-grid, .global-chat-message .post-audio { margin-left: 47px; }
.global-chat-send-state { display: flex; align-items: center; gap: 5px; margin: 7px 0 0 47px; color: #8390a0; font-size: 11px; font-weight: 700; }
.global-chat-send-state svg { width: 13px; height: 13px; }
.global-chat-send-state.is-sending svg { animation: direct-send-spin .85s linear infinite; }
.global-chat-send-state.is-failed { color: #ff7d88; }
.global-chat-send-state button { min-height: 24px; margin-left: 3px; padding: 2px 8px; border: 1px solid #8b3e49; border-radius: 6px; background: #32181d; color: #ffb4bb; cursor: pointer; font-size: 10px; font-weight: 800; }
.global-chat-message-tools > button:disabled { cursor: wait; opacity: .42; }
.room-chat-reactions { display: flex; align-items: center; margin: 7px 0 0 47px; }
.room-chat-heart { min-width: 50px; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 3px 11px; border: 1px solid #4b535e; border-radius: 999px; background: #171b20; color: #aab2bd; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.room-chat-heart:hover { border-color: #a94958; background: #2b181d; color: #ff8794; transform: translateY(-1px); }
.room-chat-heart.is-active { border-color: #c54456; background: linear-gradient(180deg, #61232d, #3b171d); color: #ff9aa6; box-shadow: 0 0 0 1px rgba(255, 93, 112, .1), 0 3px 10px rgba(0,0,0,.28); }
.room-chat-heart.is-active svg { fill: currentColor; }
.room-chat-heart:disabled { cursor: wait; opacity: .55; transform: none; }
.room-chat-heart svg { width: 15px; height: 15px; }
.global-chat-status { width: 100%; margin: 8px 0 0; color: #f2f5f8; font-family: Georgia, serif; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.global-chat-status span { color: var(--green); font-style: normal; }
.global-chat-status em { color: #d9dde4; }
.love-chatbox-panel[hidden] { display: none !important; }
.love-chatbox-panel { overflow: hidden; background: #050607; }
.love-chatbox-toolbar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #22131c, #101419); }
.love-chatbox-toolbar > div { min-width: 0; display: flex; align-items: center; gap: 8px; }
.love-chatbox-toolbar > div:first-child > svg { flex: 0 0 22px; width: 22px; color: #ff76a9; }
.love-chatbox-toolbar > div:first-child > span { min-width: 0; display: grid; gap: 2px; }
.love-chatbox-toolbar strong { color: #f5e8ee; font-size: 14px; }
.love-chatbox-toolbar small { color: #9c8390; font-size: 10px; }
.love-chat-mode { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #485461; border-radius: 999px; background: #161b21; color: #aeb9c5; font-size: 10px; font-weight: 800; white-space: nowrap; }
.love-chat-mode svg { width: 13px; }
.love-chat-mode.anonymous { border-color: #39746e; background: #14332f; color: #9de5dc; }
.love-chatbox-toolbar button { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid #68405a; border-radius: 8px; background: #351d2c; color: #ffc1dc; cursor: pointer; font-size: 10px; font-weight: 800; }
.love-chatbox-toolbar button svg { width: 14px; }
.love-chat-anonymous .global-chat-message-head .avatar { border-color: #397a72; background: #143b37; color: #bcfff5; }
.love-chat-mask-avatar { display: grid; place-items: center; }
.love-chat-mask-avatar svg { width: 22px; height: 22px; }
.love-chat-settings-card { width: min(540px, calc(100vw - 22px)); overflow: hidden; }
.love-chat-settings-card > form { display: grid; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.love-chat-settings-card > form label { color: #d8cbd2; font-size: 12px; font-weight: 800; }
.love-chat-settings-card > form select { width: 100%; min-height: 42px; margin-top: 6px; padding: 7px 9px; border: 1px solid #51404a; border-radius: 8px; outline: 0; background: #11151a; color: #f2edf0; font-size: 13px; }
.love-chat-settings-card > form small { display: block; margin-top: 5px; color: #8b7c84; font-size: 10px; font-weight: 400; line-height: 1.5; }
.love-chat-settings-card > form .primary-button { min-height: 39px; }
.love-chat-alias-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px; border: 1px solid #315c58; border-radius: 9px; background: #102725; }
.love-chat-alias-setting[hidden] { display: none; }
.love-chat-alias-setting > div { min-width: 0; display: grid; gap: 2px; }
.love-chat-alias-setting > div span { color: #8eb8b3; font-size: 9px; font-weight: 700; }
.love-chat-alias-setting > div strong { overflow: hidden; color: #c3fff7; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.love-chat-alias-setting > button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid #43847d; border-radius: 7px; background: #19433f; color: #bcfff6; cursor: pointer; font-size: 10px; font-weight: 800; }
.love-chat-alias-setting > button:disabled { cursor: wait; opacity: .55; }
.love-chat-alias-setting > button svg { width: 14px; }
.love-chat-alias-setting > small { grid-column: 1 / -1; margin: 0 !important; color: #78a49f !important; }
.love-chat-blocked-section > header { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); background: #101318; }
.love-chat-blocked-section > header > div { min-width: 0; display: grid; gap: 2px; }
.love-chat-blocked-section > header strong { color: #efdae2; font-size: 12px; }
.love-chat-blocked-section > header span { color: #81747b; font-size: 9px; }
.love-chat-blocked-section > header button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #3d4650; border-radius: 8px; background: #171b20; color: #a7b1bc; cursor: pointer; }
.love-chat-blocked-section > header button svg { width: 14px; }
.love-chat-blocked-list { min-height: 90px; max-height: 310px; overflow-y: auto; }
.love-chat-blocked-row { min-height: 64px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.love-chat-blocked-row .avatar { flex: 0 0 42px; width: 42px; height: 42px; }
.love-chat-blocked-row > span { min-width: 0; flex: 1; display: grid; gap: 2px; }
.love-chat-blocked-row strong { overflow: hidden; color: #ecf0f3; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.love-chat-blocked-row small { color: #7f8994; font-size: 9px; }
.love-chat-blocked-row button { min-height: 31px; padding: 0 8px; border: 1px solid #4c704f; border-radius: 7px; background: #19351e; color: #9ae7a2; cursor: pointer; font-size: 9px; font-weight: 800; }
@media (max-width: 520px) {
  .love-chatbox-toolbar { align-items: flex-start; flex-direction: column; }
  .love-chatbox-toolbar > div:last-child { width: 100%; justify-content: space-between; }
  .love-chat-mode { min-width: 94px; justify-content: center; }
  .love-chat-alias-setting { grid-template-columns: 1fr; }
  .love-chat-alias-setting > button { width: 100%; }
  .love-chat-alias-setting > small { grid-column: 1; }
  .love-chat-blocked-row { align-items: flex-start; flex-wrap: wrap; }
  .love-chat-blocked-row > span { padding-top: 4px; }
  .love-chat-blocked-row button { margin-left: 51px; }
}

.quick-pm-window { position: fixed; z-index: 90; top: 50%; right: max(8px, calc((100vw - 720px) / 2 + 8px)); width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 16px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #3a4655; border-radius: 7px; background: #090b0e; box-shadow: 0 14px 50px rgba(0,0,0,.72), 0 0 0 1px rgba(87,166,255,.08); transform: translateY(-50%); }
body.quick-pm-fullscreen-open { overflow: hidden; }
.quick-pm-window.is-fullscreen { z-index: 1150; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.quick-pm-window.is-keyboard-visible { top: var(--quick-pm-viewport-top, 0) !important; bottom: auto !important; height: var(--quick-pm-viewport-height, 100dvh); max-height: var(--quick-pm-viewport-height, 100dvh); transform: none; }
.quick-pm-window.is-keyboard-visible .quick-pm-messages { min-height: 0; height: auto; }
.quick-pm-window.is-fullscreen .quick-pm-head { padding-top: max(7px, env(safe-area-inset-top)); padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
.quick-pm-window.is-fullscreen .quick-pm-messages { min-height: 0; height: auto; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.quick-pm-window.is-fullscreen .quick-pm-form { padding-right: max(10px, env(safe-area-inset-right)); padding-bottom: max(10px, env(safe-area-inset-bottom)); padding-left: max(10px, env(safe-area-inset-left)); }
.quick-pm-window.is-fullscreen .quick-pm-message > div { max-width: min(78%, 720px); }
.quick-pm-head { min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #20242a, #15181d); }
.quick-pm-head .avatar { flex: 0 0 37px; width: 37px; height: 37px; }
.quick-pm-person { min-width: 0; flex: 1; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.quick-pm-person strong { display: flex; align-items: center; min-width: 0; color: #eef2f7; font-size: 10px; }
.quick-pm-person > span { display: block; margin-top: 2px; color: #7d8896; font-size: 7px; }
.quick-pm-person > #quick-pm-status:empty { display: none; }
.quick-pm-person > .quick-pm-title { max-width: 100%; display: flex; align-items: center; gap: 6px; margin-top: 0; overflow: hidden; color: #eef2f7; white-space: nowrap; }
.quick-pm-title > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-pm-head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.quick-pm-back, .quick-pm-fullscreen, .quick-pm-minimize, .quick-pm-settings { flex: 0 0 29px; width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid #3b434e; border-radius: 4px; background: #171a1f; color: #aab4c1; cursor: pointer; }
.quick-pm-back:hover, .quick-pm-fullscreen:hover, .quick-pm-minimize:hover, .quick-pm-settings:hover { border-color: #5885b3; background: #202a36; color: #e7f3ff; }
.quick-pm-fullscreen[aria-pressed="true"] { border-color: #4c91d8; background: #17385a; color: #a9d8ff; }
.quick-pm-settings[aria-expanded="true"] { border-color: #4c91d8; background: #17385a; color: #a9d8ff; }
.quick-pm-back svg, .quick-pm-fullscreen svg, .quick-pm-minimize svg, .quick-pm-settings svg { width: 15px; }
.quick-pm-settings-menu { position: fixed; z-index: 1160; top: 8px; left: 8px; width: min(292px, calc(100vw - 16px)); padding: 8px; border: 1px solid #3a4655; border-radius: 8px; background: rgba(13,16,21,.98); box-shadow: 0 12px 32px rgba(0,0,0,.66); }
.quick-pm-settings-menu[hidden] { display: none !important; }
.quick-pm-settings-menu > label { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 7px 5px; border-bottom: 1px solid #252c35; cursor: pointer; }
.quick-pm-settings-menu > label > span { min-width: 0; flex: 1; display: grid; gap: 3px; }
.quick-pm-settings-menu strong { color: #edf4fc; font-size: 10px; }
.quick-pm-settings-menu small { color: #84909e; font-size: 8px; line-height: 1.35; }
.quick-pm-settings-menu input { width: 17px; height: 17px; accent-color: #2f90ef; }
.quick-pm-settings-menu > button { width: 100%; display: flex; align-items: center; gap: 7px; margin-top: 7px; padding: 8px; border: 1px solid #334150; border-radius: 6px; background: #171c23; color: #a9d8ff; font-size: 9px; text-align: left; cursor: pointer; }
.quick-pm-settings-menu > button svg { width: 15px; }
.quick-pm-messages { height: 380px; min-height: 220px; flex: 1 1 auto; display: flex; flex-direction: column; overflow-y: auto; padding: 9px 9px 22px; background: radial-gradient(circle at 100% 0, rgba(87,166,255,.08), transparent 42%), #060709; scrollbar-width: thin; }
.quick-pm-empty { min-height: 100%; display: grid; place-items: center; padding: 18px; color: #7b8694; font-size: 9px; text-align: center; }
.quick-pm-message { flex: 0 0 auto; display: flex; justify-content: flex-start; margin: 6px 0 18px; }
.quick-pm-message:first-of-type { margin-top: auto; }
.quick-pm-message.own { justify-content: flex-end; }
.quick-pm-message > div { position: relative; min-width: 140px; max-width: 82%; padding: 8px 11px; overflow: visible; border: 1px solid #303844; border-radius: 6px 17px 17px; background: #171b20; box-shadow: 0 2px 7px rgba(0,0,0,.22); }
.quick-pm-message.own > div { border-color: #2b5e96; border-radius: 17px 6px 17px 17px; background: #153b66; }
.quick-pm-message.is-failed > div { border-color: #9b3f49; box-shadow: 0 0 0 1px rgba(255,76,91,.13), 0 3px 10px rgba(0,0,0,.3); }
.quick-pm-message.is-failed { cursor: pointer; }
.quick-pm-message p { margin: 0; color: #e8edf3; font-size: 10px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.quick-pm-mood { margin-bottom: 3px; color: var(--pink); font-size: 12px; }
.quick-pm-message small { display: flex; align-items: center; gap: 3px; margin-top: 3px; color: #aab4c2; font-size: 7px; }
.quick-pm-message small svg { width: 10px; }
.quick-pm-message time { display: block; margin-top: 3px; color: #778391; font-size: 6px; text-align: right; }
.quick-pm-message .post-media-grid { width: min(240px, calc(100vw - 100px)); margin: 6px 0; }
.quick-pm-message .post-media-grid a, .quick-pm-message .post-media-grid.media-count-1 > a { height: 150px; aspect-ratio: auto; }
.quick-pm-message > div.has-visual-media { width: min(280px, calc(100vw - 42px)); }
.quick-pm-message .post-media-grid.media-count-1 > a { height: auto; max-height: none; }
.quick-pm-message .post-media-grid.media-count-1 img,
.quick-pm-message .post-media-grid.media-count-1 video { width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.quick-pm-message .post-media-grid.media-count-3 a, .quick-pm-message .post-media-grid.media-count-4 a { height: 86px; }
.quick-pm-message .post-audio { width: 100%; margin: 6px 0; padding: 7px; }
.quick-pm-message > div.has-audio-media { width: min(310px, calc(100vw - 34px)); max-width: 100%; }
.quick-pm-form { display: block; flex: 0 0 auto; padding: 8px; border-top: 1px solid var(--line); background: #12151a; }
.quick-pm-reply-preview { flex: 0 0 auto; }
.quick-pm-form .composer-row { display: block; min-width: 0; }
.quick-pm-form textarea { width: 100%; min-width: 0; min-height: 58px; max-height: 100px; resize: none; padding: 9px; border: 1px solid #39424e; border-radius: 4px; outline: 0; background: #090b0e; color: #edf1f6; font-size: 15px; }
.quick-pm-form textarea:focus { border-color: #427eba; }
.quick-pm-form .composer-media-preview { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 7px 0 0; }
.quick-pm-form .composer-preview-item { height: 58px; }
.quick-pm-form .composer-actions { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; padding: 0; }
.quick-pm-form .post-tools { min-width: 0; flex: 1; display: flex; flex-wrap: nowrap; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.quick-pm-form .post-tools button { flex: 0 0 31px; width: 31px; min-height: 31px; padding: 0; }
.quick-pm-form .post-tools button > span { display: none; }
.quick-pm-form .composer-symbol-tools { margin: 0; padding: 0; border: 0; }
.quick-pm-form .submit-post { flex: 0 0 auto; min-width: 64px; height: 34px; display: inline-flex; place-items: center; padding: 0 9px; border: 1px solid #3071b8; border-radius: 4px; background: #1764bd; color: #fff; cursor: pointer; font-size: 12px; }
.quick-pm-form .submit-post:disabled { opacity: .55; }
.quick-pm-form .submit-post svg { width: 17px; }
.quick-pm-inbox { position: fixed; z-index: 93; width: min(330px, calc(100vw - 20px)); max-height: min(520px, calc(100vh - 20px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #3a4655; border-radius: 8px; background: #090b0e; box-shadow: 0 16px 52px rgba(0,0,0,.76), 0 0 0 1px rgba(87,166,255,.08); }
.quick-pm-inbox-head { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px 7px 11px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #20242a, #15181d); }
.quick-pm-inbox-head > span { display: flex; align-items: center; gap: 7px; color: #eef2f7; font-size: 14px; }
.quick-pm-inbox-head > span svg { width: 17px; color: #65a9ef; }
.quick-pm-inbox-head > .quick-pm-head-actions { margin-top: 0; }
.quick-pm-inbox-head button { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid #3b434e; border-radius: 4px; background: #171a1f; color: #aab4c1; cursor: pointer; }
.quick-pm-inbox-head button svg { width: 15px; }
.quick-pm-inbox-list { min-height: 82px; overflow-y: auto; padding: 4px; scrollbar-width: thin; }
.quick-pm-inbox-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px; border: 0; border-bottom: 1px solid rgba(67,77,90,.48); border-radius: 5px; background: transparent; color: #dce3eb; cursor: pointer; text-align: left; }
.quick-pm-inbox-item:last-child { border-bottom-color: transparent; }
.quick-pm-inbox-item:hover, .quick-pm-inbox-item:focus-visible { outline: 0; background: #171d25; }
.quick-pm-inbox-item.unread { background: rgba(32,92,151,.17); }
.quick-pm-inbox-item .avatar { flex: 0 0 39px; width: 39px; height: 39px; }
.quick-pm-inbox-copy { min-width: 0; flex: 1; display: grid; gap: 4px; }
.quick-pm-inbox-name { min-width: 0; display: flex; align-items: center; gap: 5px; }
.conversation-presence-dot { width: 8px; height: 8px; flex: 0 0 8px; display: inline-block; border-radius: 50%; background: #68727e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.55); }
.conversation-presence-dot.online { background: #35df73; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 7px rgba(53,223,115,.68); }
.conversation-presence-dot.offline { background: #68727e; }
.conversation-presence-dot.system-bot { background: #9a72ff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 8px rgba(154,114,255,.75); }
.quick-pm-inbox-name strong { min-width: 0; overflow: hidden; color: #eef2f7; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.quick-pm-inbox-name .user-nick.user-nick-member:not(.has-custom-name-style) > .user-nick-text { color: var(--role-member) !important; text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.quick-pm-inbox-preview { min-width: 0; overflow: hidden; color: #8d97a4; font-size: 13px; font-weight: 400; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.quick-pm-inbox-item.unread .quick-pm-inbox-preview { color: #ffe36f; font-weight: 700; }
.quick-pm-inbox-side { flex: 0 0 auto; display: grid; justify-items: end; gap: 5px; }
.quick-pm-inbox-side time { color: #788492; font-size: 11px; white-space: nowrap; }
.quick-pm-inbox-side b { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: #2675c5; color: #fff; font-size: 10px; }
.quick-pm-inbox-empty { min-height: 110px; display: grid; place-items: center; padding: 18px; color: #7b8694; font-size: 13px; line-height: 1.5; text-align: center; }
.quick-pm-inbox-all { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-top: 1px solid var(--line); background: #13171c; color: #76b8fa; cursor: pointer; font-size: 13px; }
.quick-pm-inbox-all:hover { background: #19222c; }
.quick-pm-inbox-all svg { width: 14px; }
.quick-pm-bubble { position: fixed; z-index: 91; isolation: isolate; width: 58px; height: 58px; display: grid; place-items: center; padding: 3px; border: 2px solid #4b8bd2; border-radius: 50%; background: #11151b; cursor: grab; touch-action: none; box-shadow: 0 8px 26px rgba(0,0,0,.65), 0 0 14px rgba(87,166,255,.22); }
.quick-pm-bubble:active { cursor: grabbing; }
.quick-pm-bubble .avatar { width: 48px; height: 48px; pointer-events: none; }
.quick-pm-bubble > b { position: absolute; z-index: 240; top: -3px; right: -3px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; border-radius: 999px; background: var(--danger); color: #fff; box-shadow: 0 0 0 2px #080a0d, 0 2px 8px rgba(255,64,88,.72); font-size: 8px; line-height: 1; pointer-events: none; }
.quick-pm-bubble > b[hidden] { display: none !important; }
body:has([data-page="messages"].active #direct-inbox-panel:not([hidden])) .quick-pm-bubble { display: none !important; }
.quick-pm-drop-zone { position: fixed; z-index: 92; right: 50%; bottom: 14px; display: flex; align-items: center; gap: 7px; padding: 10px 15px; border: 1px dashed #87505a; border-radius: 999px; background: rgba(41,16,21,.94); color: #ff8994; font-size: 9px; transform: translateX(50%); pointer-events: none; transition: .15s; }
.quick-pm-drop-zone.active { border-color: var(--danger); background: #6c1e29; color: #fff; transform: translateX(50%) scale(1.05); }
.quick-pm-drop-zone svg { width: 16px; }
.quick-pm-window[hidden], .quick-pm-inbox[hidden], .quick-pm-bubble[hidden], .quick-pm-drop-zone[hidden] { display: none !important; }
.content-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 9px; border-top: 1px solid var(--line); background: #121419; }
.content-pagination:empty { display: none; }
.content-pagination button { min-width: 29px; height: 28px; display: grid; place-items: center; padding: 0 7px; border: 1px solid #343a44; border-radius: 3px; background: #191c21; color: #b9c2ce; cursor: pointer; font-size: 9px; }
.content-pagination button:hover:not(:disabled), .content-pagination button.active { border-color: #347fca; background: #164370; color: #fff; }
.content-pagination button:disabled { cursor: default; opacity: .55; }
.content-pagination button.active { opacity: 1; }
.content-pagination button svg { width: 13px; }
.content-pagination span { color: #67717e; font-size: 10px; }

@keyframes skeleton-shimmer { from { transform: translateX(-115%); } to { transform: translateX(115%); } }
.loading-skeleton { box-sizing: border-box; pointer-events: none; user-select: none; }
.skeleton-shape { position: relative; display: block; overflow: hidden; border-radius: 999px; background: #20262d; }
.skeleton-shape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.025) 30%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.025) 70%, transparent 100%); transform: translateX(-115%); animation: skeleton-shimmer 1.35s ease-in-out infinite; }
.initial-state-recovery { display:flex; min-height:118px; grid-column:1/-1; align-items:center; justify-content:center; gap:11px; padding:22px; color:#aebdcd; text-align:left; }
.initial-state-recovery > svg { width:25px; height:25px; flex:0 0 25px; color:#67a9ef; animation:initial-state-recovery-spin 1.35s linear infinite; }
.initial-state-recovery strong,.initial-state-recovery small { display:block; }
.initial-state-recovery strong { color:#e5edf6; font-size:12px; }
.initial-state-recovery small { margin-top:3px; color:#8293a5; font-size:10px; line-height:1.45; }
body.state-sync-delayed .skeleton-shape::after { animation-duration:2.8s; }
@keyframes initial-state-recovery-spin { to { transform:rotate(360deg); } }
.skeleton-line { width: 100%; height: 9px; }
.skeleton-line + .skeleton-line { margin-top: 7px; }
.skeleton-avatar { flex: 0 0 42px; width: 42px; height: 42px; }
.skeleton-pill { width: 68px; height: 28px; border-radius: 7px; }
.skeleton-media { width: 100%; height: 150px; margin-top: 14px; border-radius: 7px; }
.skeleton-bubble { width: min(330px, 76vw); height: 44px; margin-top: 7px; border-radius: 13px; }
.skeleton-duel { width: 34px; height: 34px; border-radius: 10px; }
.w-25 { width: 25%; }.w-35 { width: 35%; }.w-40 { width: 40%; }.w-45 { width: 45%; }.w-55 { width: 55%; }.w-65 { width: 65%; }.w-70 { width: 70%; }.w-75 { width: 75%; }.w-80 { width: 80%; }.w-90 { width: 90%; }
.skeleton-post { min-height: 266px; padding: 13px; border: 1px solid var(--line); border-radius: 5px; background: #111419; }
[data-loading-skeleton="post"][aria-busy="true"] { min-height: 814px; }
#global-chat-composer-mount:empty,
#love-chat-composer-mount:empty,
#room-chat-composer-mount:empty,
#anonymous-composer-mount:empty,
#party-composer-mount:empty { min-height: 148px; }
.skeleton-post > header { display: flex; align-items: center; gap: 10px; }
.skeleton-post > header > span, .skeleton-post > div { min-width: 0; flex: 1; }
.skeleton-post > div { margin-top: 17px; }
.skeleton-list-row { min-height: 68px; display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line-soft); background: #0e1115; }
.skeleton-list-row > span { min-width: 0; flex: 1; }
.skeleton-online-row { min-height: 70px; display: flex; align-items: flex-start; gap: 8px; padding: 11px 10px; border-top: 1px solid var(--line-soft); background: #0e1115; }
.skeleton-online-row:first-child { border-top: 0; }
.skeleton-online-row > .skeleton-avatar { flex: 0 0 48px; width: 48px; height: 48px; }
.skeleton-online-row > span { min-width: 0; flex: 1; padding-top: 2px; }
.skeleton-online-row > .skeleton-pill { flex: 0 0 68px; width: 68px; height: 28px; margin-top: 9px; }
.skeleton-message { min-height: 70px; display: flex; align-items: flex-start; gap: 8px; padding: 10px; }
.skeleton-message > span { min-width: 0; flex: 1; }
.skeleton-message:nth-child(even) { flex-direction: row-reverse; padding-left: 20%; }
.skeleton-message:nth-child(even) > span { display: grid; justify-items: end; }
.skeleton-room-chat { min-height: 54px; display: flex; align-items: flex-end; gap: 8px; margin-bottom: 13px; padding: 6px 0; }
.skeleton-room-chat > .skeleton-avatar { flex: 0 0 33px; width: 33px; height: 33px; }
.skeleton-room-chat > span { min-width: 0; width: min(76%, 470px); }
.skeleton-room-chat .skeleton-bubble { width: min(330px, 100%); height: 37px; margin-top: 3px; border-radius: 4px 12px 12px 12px; }
.skeleton-room-chat:nth-child(even) { flex-direction: row-reverse; }
.skeleton-room-chat:nth-child(even) > span { display: grid; justify-items: end; }
.skeleton-room-chat:nth-child(even) .skeleton-bubble { border-radius: 12px 4px 12px 12px; }
.skeleton-global-chat { min-height: 154px; padding: 11px 8px; border-bottom: 1px solid var(--line-soft); background: #050607; }
.skeleton-global-chat > header { display: flex; align-items: flex-start; gap: 8px; }
.skeleton-global-chat > header > .skeleton-avatar { flex: 0 0 48px; width: 48px; height: 48px; }
.skeleton-global-chat > header > span { min-width: 0; flex: 1; padding-top: 2px; }
.skeleton-global-chat > header > aside { flex: 0 0 34px; display: grid; gap: 2px; }
.skeleton-tool { width: 34px; height: 22px; border-radius: 3px; }
.skeleton-global-chat-content { margin-top: 10px; padding: 8px 0; }
.skeleton-global-chat-status { margin-top: 8px; }
.skeleton-announcement-featured, .skeleton-announcement { display: block; background: #050607; }
.skeleton-announcement-featured { min-height: 91px; margin-top: 2px; }
.skeleton-announcement { min-height: 76px; padding: 6px 0 4px; border-bottom: 1px solid var(--line); }
.skeleton-announcement-body { display: grid; align-content: center; min-height: 50px; padding: 8px 10px 3px; }
.skeleton-announcement-featured .skeleton-announcement-body { min-height: 63px; justify-items: center; padding-top: 10px; }
.skeleton-announcement-body .skeleton-line + .skeleton-line { margin-top: 7px; }
.skeleton-announcement-featured > footer, .skeleton-announcement > footer { min-height: 24px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 2px 9px; }
.skeleton-announcement-featured > footer .skeleton-line, .skeleton-announcement > footer .skeleton-line { margin-top: 0; }
.skeleton-announcement-featured > footer .skeleton-pill, .skeleton-announcement > footer .skeleton-pill { width: 44px; height: 16px; }
.skeleton-comment { min-height: 74px; display: flex; align-items: flex-start; gap: 9px; padding: 10px; border-bottom: 1px solid var(--line-soft); }
.skeleton-comment > span { min-width: 0; flex: 1; padding-top: 3px; }
.skeleton-room { min-height: 67px; display: grid; grid-template-columns: minmax(0,1fr) 104px; align-items: center; gap: 12px; padding: 11px; border: 1px solid #2e3741; border-radius: 10px; background: #0f1318; }
.skeleton-room > span { min-width: 0; }
.skeleton-room > aside { display: grid; justify-items: end; gap: 7px; }
.skeleton-party-room { min-height: 68px; display: grid; grid-template-columns: 48px minmax(0,1fr) 74px; align-items: center; gap: 10px; padding: 10px; border: 1px solid #29313b; border-radius: 12px; background: linear-gradient(145deg, #171c23, #0f1318); }
.skeleton-party-room > span, .skeleton-drama-room > span, .skeleton-game-room > span, .skeleton-tarot-room > span { min-width: 0; }
.skeleton-room-icon { width: 46px; height: 46px; border-radius: 13px; }
.skeleton-room-action { width: 74px; height: 34px; border-radius: 9px; }
.skeleton-anonymous-room { border-color: #2e4448; background: linear-gradient(145deg, #122024, #0b1114); }
.skeleton-drama-room { min-height: 76px; display: grid; grid-template-columns: 44px minmax(0,1fr) 58px; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid #313947; border-radius: 10px; background: linear-gradient(100deg, rgba(33,42,56,.92), rgba(20,25,34,.92)); }
.skeleton-room-id { width: 44px; height: 44px; border-radius: 50%; }
.skeleton-drama-room > aside { display: grid; justify-items: end; gap: 7px; }
.skeleton-game-room { min-height: 67px; display: grid; grid-template-columns: minmax(0,1fr) 104px; align-items: center; gap: 12px; padding: 11px; border: 1px solid #2e3741; border-radius: 10px; background: #0f1318; }
.skeleton-game-room > aside { display: grid; justify-items: end; gap: 6px; }
.skeleton-game-room .skeleton-room-action { height: 32px; }
.skeleton-race-room { min-height: 82px; gap: 10px; margin-bottom: 9px; padding: 11px 12px; border-color: #36452e; border-radius: 13px; background: radial-gradient(circle at 0 0,rgba(117,199,81,.11),transparent 42%),#10161a; }
.skeleton-race-room .skeleton-room-action { height: 33px; }
.skeleton-tarot-room { min-height: 66px; display: grid; grid-template-columns: 44px minmax(0,1fr) 74px; align-items: center; gap: 11px; padding: 11px; border: 1px solid #3b3049; border-radius: 13px; background: linear-gradient(120deg, rgba(46,29,60,.7), rgba(15,15,21,.95)); }
.skeleton-tarot-room .skeleton-room-icon { width: 42px; height: 42px; border-radius: 12px; }
.skeleton-tarot-room .skeleton-room-action { min-height: 39px; }
.skeleton-race-animal { min-height: 174px; display: grid; justify-items: center; align-content: center; gap: 5px; padding: 12px 8px; border: 1px solid #36424c; border-radius: 15px; background: radial-gradient(circle at 50% 5%,rgba(125,165,92,.13),transparent 48%),linear-gradient(160deg,#1a2027,#0c1014); }
.skeleton-animal-emoji { width: 54px; height: 54px; border-radius: 50%; }
.skeleton-race-animal .skeleton-line + .skeleton-line { margin-top: 0; }
.skeleton-race-animal .skeleton-pill { width: 68px; height: 22px; }
.skeleton-history { min-height: 78px; display: grid; grid-template-columns: minmax(0,1fr) 42px minmax(0,1fr); align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid rgba(48,58,68,.7); background: #0d1217; }
.skeleton-history > span:last-child { display: grid; justify-items: end; }
.detail-avatar-skeleton { width: 100%; height: 100%; border-radius: inherit; }
.detail-name-skeleton { width: min(190px, 46vw); height: 13px; }
.detail-meta-skeleton { width: min(150px, 38vw); height: 10px; }
.detail-status-skeleton { width: min(105px, 29vw); height: 8px; }
.detail-icon-skeleton { display: none; width: 18px; height: 18px; border-radius: 5px; }
.detail-tool-skeleton { display: none; width: 58px; height: 11px; border-radius: 5px; }
.detail-composer-skeleton { min-height: 112px; padding: 9px; border-bottom: 1px solid var(--line); background: #0e1115; }
.detail-input-skeleton { width: 100%; height: 62px; border-radius: 7px; }
.detail-composer-skeleton > span { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.detail-composer-skeleton .skeleton-pill { width: 58px; height: 25px; }
.detail-loading .direct-user-copy,
.detail-loading .direct-more-button,
.detail-loading .group-chat-tools button { pointer-events: none; }
.detail-loading .direct-more-button > svg { display: none; }
.detail-loading .direct-more-button .detail-icon-skeleton { display: block; }
.detail-loading .group-chat-tools button > svg,
.detail-loading .group-chat-tools button > span { display: none; }
.detail-loading .group-chat-tools .detail-tool-skeleton { display: block; }
.detail-loading .direct-user-avatar,
.detail-loading .group-chat-head .group-avatar { overflow: hidden; border-color: #303842; background: #171c22; box-shadow: none; }
.header-name-skeleton { width: min(170px, 48vw); height: 13px; }
.header-profile-meta-skeleton { display: none; }
.profile-strip.header-profile-loading { pointer-events: none; }
.profile-strip.header-profile-loading .header-inventory-button { visibility: hidden; }
.header-profile-loading #header-avatar { overflow: hidden; border-color: #303842; background: #171c22; box-shadow: none; }
.header-profile-loading .profile-meta-row { position: relative; min-height: 17px; color: transparent; }
.header-profile-loading .profile-meta-row > :not(.header-profile-meta-skeleton) { visibility: hidden; }
.header-profile-loading .header-profile-meta-skeleton { position: absolute; inset: 1px auto auto 0; width: min(330px, 76vw); display: flex; align-items: center; gap: 7px; visibility: visible; }
.header-profile-loading .header-profile-meta-skeleton .skeleton-line:nth-child(1) { width: 72px; height: 9px; }
.header-profile-loading .header-profile-meta-skeleton .skeleton-line:nth-child(2) { width: 64px; height: 9px; margin-top: 0; }
.header-profile-loading .header-profile-meta-skeleton .skeleton-line:nth-child(3) { width: 132px; height: 9px; margin-top: 0; }
.profile-cover-skeleton,
.profile-stat-skeleton { display: none; }
.profile-detail-loading { pointer-events: none; }
.profile-detail-loading .profile-cover { position: relative; overflow: hidden; }
.profile-detail-loading .profile-cover > span { visibility: hidden; }
.profile-detail-loading .profile-cover-skeleton { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 0; }
.profile-detail-loading .profile-wall-avatar { overflow: hidden; border-color: #303842; background: #171c22 !important; box-shadow: none !important; }
.profile-name-skeleton { width: min(245px, 58vw); height: 18px; }
.profile-id-skeleton { width: 68px; height: 8px; }
.profile-level-skeleton { width: 58px; height: 10px; }
.profile-mood-skeleton { width: min(155px, 37vw); height: 10px; }
.profile-online-skeleton { width: 90px; height: 8px; }
.profile-detail-loading .profile-level-mood > i:not(.skeleton-shape) { visibility: hidden; }
.profile-detail-loading .profile-bio .skeleton-line { margin-right: auto; margin-left: auto; }
.profile-detail-loading .profile-actions { min-height: 49px; align-items: center; padding-top: 6px; }
.profile-detail-loading .profile-actions .skeleton-pill { width: 92px; height: 34px; }
.profile-detail-loading #profile-menu-button > svg,
.profile-detail-loading #profile-menu-button > span { display: none; }
.profile-detail-loading #profile-menu-button .detail-tool-skeleton { width: 67px; height: 12px; display: block; }
.profile-detail-loading .profile-stats button > svg,
.profile-detail-loading .profile-stats button > b,
.profile-detail-loading .profile-stats button > span { visibility: hidden; }
.profile-detail-loading .profile-stats button { position: relative; }
.profile-detail-loading .profile-stats .profile-stat-skeleton { position: absolute; top: 50%; left: 21%; width: 58%; height: 34px; display: block; border-radius: 7px; transform: translateY(-50%); }
.profile-detail-loading #gift-total { width: 72px; }
.profile-detail-loading #gift-total .skeleton-line { height: 9px; }
.profile-detail-loading .received-gifts .skeleton-pill { width: 72px; height: 38px; }
.profile-info-grid p { position: relative; overflow: hidden; }
.profile-detail-loading .profile-info-grid p > * { visibility: hidden; }
.profile-detail-loading .profile-info-grid p::before { content: ""; position: absolute; top: 50%; left: 11px; width: min(300px, 68%); height: 12px; border-radius: 999px; background: #20262d; transform: translateY(-50%); }
.profile-detail-loading .profile-info-grid p::after { content: ""; position: absolute; top: 50%; left: 11px; width: min(300px, 68%); height: 12px; border-radius: 999px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.025) 30%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.025) 70%, transparent 100%); transform: translate(-115%, -50%); animation: profile-row-shimmer 1.35s ease-in-out infinite; }
@keyframes profile-row-shimmer { from { transform: translate(-115%, -50%); } to { transform: translate(115%, -50%); } }
@media (prefers-reduced-motion: reduce) { .skeleton-shape::after, .profile-detail-loading .profile-info-grid p::after { animation: none; } }
@media (max-width: 430px) {
  .skeleton-room { grid-template-columns: minmax(0,1fr) 88px; gap: 7px; padding-inline: 8px; }
  .skeleton-party-room { grid-template-columns: 40px minmax(0,1fr) 68px; gap: 8px; padding-inline: 8px; }
  .skeleton-party-room .skeleton-room-icon { width: 40px; height: 40px; border-radius: 11px; }
  .skeleton-party-room .skeleton-room-action { width: 68px; height: 30px; }
  .skeleton-drama-room { grid-template-columns: 44px minmax(0,1fr) 48px; gap: 8px; padding-inline: 8px; }
  .skeleton-game-room { grid-template-columns: minmax(0,1fr) 88px; gap: 7px; padding-inline: 8px; }
  .skeleton-race-room { grid-template-columns: 1fr; gap: 7px; }
  .skeleton-race-room > aside { grid-template-columns: 1fr auto; align-items: center; justify-items: start; }
  .skeleton-race-room > aside .skeleton-room-action { justify-self: end; }
  .skeleton-tarot-room { grid-template-columns: 42px minmax(0,1fr) 68px; gap: 8px; padding-inline: 8px; }
  .skeleton-tarot-room .skeleton-room-action { width: 68px; }
  .skeleton-race-animal { min-height: 156px; padding-inline: 5px; }
  .skeleton-race-animal .skeleton-animal-emoji { width: 48px; height: 48px; }
  .skeleton-history { grid-template-columns: minmax(0,1fr) 32px minmax(0,1fr); gap: 5px; padding-inline: 7px; }
  .skeleton-avatar { flex-basis: 36px; width: 36px; height: 36px; }
  .skeleton-media { height: 125px; }
}

.search-box { display: flex; align-items: center; gap: 8px; margin: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: #15181d; }
.search-box svg { width: 16px; color: var(--muted); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.member-filter-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: #101216; }
.member-filter-tabs button { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; border: 0; border-right: 1px solid var(--line-soft); background: transparent; color: #8994a2; cursor: pointer; font-size: 9px; }
.member-filter-tabs button:last-child { border-right: 0; }
.member-filter-tabs button.active { background: #17283c; color: var(--blue); box-shadow: inset 0 -2px #438dd8; }
.member-filter-tabs svg { width: 13px; }
.member-list { min-height: 240px; }
.member-count-button { min-height: 0; display: inline; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-family: inherit; font-size: 9px; font-weight: 400; }
.member-count-button:hover,.member-count-button:focus-visible { color: var(--muted); outline: 0; text-decoration: none; }
.members-loading #member-count { width: 62px; }
.members-loading #member-count .skeleton-line { height: 9px; }
.members-loading #member-filter-tabs,
.members-loading .search-box,
.members-loading #member-pagination { pointer-events: none; }
.member-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--line-soft); }
.member-item:first-child { border-top: 0; }
.member-item .avatar { width: 43px; height: 43px; }
.member-copy { min-width: 0; flex: 1; }
.member-copy strong { display: block; color: var(--orange); font-family: Georgia, serif; }
.member-copy span { display: block; color: var(--muted); font-size: 10px; }
.member-level-mood { display: flex; align-items: center; gap: 4px; min-width: 0; margin-top: 3px; color: #aeb8c5; font-size: 12px; line-height: 1.35; }
.member-level-mood b { flex: 0 0 auto; color: #e0b4ff; }
.member-level-mood i { flex: 0 0 auto; color: #66717f; font-style: normal; }
.member-level-mood em { min-width: 0; overflow: hidden; color: #dce3eb; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.member-online-state { margin-top: 3px; }
.online-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.member-item button { padding: 5px 8px; border: 1px solid var(--line); border-radius: 3px; background: #191c21; color: var(--blue); cursor: pointer; font-size: 10px; }
.hidden-online-backdrop { background: rgba(2,4,8,.76); backdrop-filter: blur(5px); }
.hidden-online-card { width: min(440px,calc(100vw - 18px)); max-height: min(82vh,620px); overflow: hidden; border: 1px solid rgba(255,112,174,.52); border-radius: 12px; background: radial-gradient(circle at 90% 0,rgba(255,82,153,.11),transparent 32%),linear-gradient(160deg,#151118,#090b0f 58%); box-shadow: 0 20px 55px rgba(0,0,0,.68),0 0 22px rgba(255,71,146,.12); }
.hidden-online-card > .panel-title { min-height: 42px; padding: 5px 7px 5px 11px; border-bottom: 1px solid rgba(255,121,179,.28); background: linear-gradient(110deg,rgba(255,76,147,.13),rgba(22,17,25,.96) 62%); }
.hidden-online-card > .panel-title > span { color: #ffe5f1; font-size: 12px; text-shadow: 0 0 10px rgba(255,91,160,.3); }
.hidden-online-card > .panel-title > span > svg { color: #ff79b5; }
.hidden-online-card > .panel-title .modal-close { width: 30px; height: 30px; border: 1px solid rgba(255,150,196,.3); border-radius: 50%; background: rgba(255,255,255,.035); color: #d9beca; }
.hidden-online-card > .panel-title .modal-close:hover { border-color: #ff8cbe; background: rgba(255,76,147,.17); color: #fff; }
.hidden-online-intro { display: flex; align-items: center; gap: 7px; margin: 7px 8px 4px; padding: 7px 9px; border: 1px solid rgba(255,113,173,.19); border-radius: 8px; background: rgba(61,25,43,.42); }
.hidden-online-intro > svg { flex: 0 0 14px; width: 14px; color: #ff88bc; }
.hidden-online-intro p,.hidden-online-intro strong,.hidden-online-intro span { display: block; margin: 0; }
.hidden-online-intro span { color: #bfa8b2; font-size: 9px; line-height: 1.35; }
.hidden-online-list { min-height: 88px; max-height: min(54vh,410px); overflow-y: auto; padding: 2px 8px 5px; background: transparent; scrollbar-color: #7b405c #161118; }
.hidden-online-item { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 7px; min-height: 49px; padding: 6px 7px; border-bottom: 1px solid rgba(255,255,255,.07); background: transparent; transition: background .14s ease; }
.hidden-online-item:last-child { border-bottom: 0; }
.hidden-online-item:hover { background: rgba(255,89,155,.045); }
.hidden-online-item > .avatar { width: 34px; height: 34px; border-color: #c56591; box-shadow: 0 0 0 1px rgba(255,118,175,.11); }
.hidden-online-copy { min-width: 0; display: grid; gap: 1px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.hidden-online-copy:hover strong { color: #ffadd0; }
.hidden-online-presence { display: flex; align-items: center; gap: 3px; color: #9f8c95; font-size: 8px; }
.hidden-online-presence svg { width: 10px; color: #df659b; }
.hidden-online-level { font-size: 8px; }
.hidden-online-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border: 1px solid rgba(255,119,177,.27); border-radius: 999px; background: rgba(255,70,143,.075); color: #e993b8; font-size: 8px; font-style: normal; font-weight: 700; }
.hidden-online-badge svg { width: 10px; }
.hidden-online-footer { display: flex; justify-content: flex-end; padding: 6px 8px 8px; border-top: 1px solid rgba(255,255,255,.055); background: rgba(7,8,11,.46); }
.hidden-online-footer button { min-height: 30px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid rgba(255,132,185,.3); border-radius: 7px; background: #21171d; color: #d9c5ce; cursor: pointer; font-size: 9px; }
.hidden-online-footer button:hover { border-color: #ff8ebe; background: linear-gradient(#4a2838,#2c1922); color: #fff; }
.hidden-online-footer svg { width: 12px; }
@media (max-width: 430px) { .hidden-online-card { width: calc(100vw - 16px); } }

.statistics-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(230px, .8fr); gap: 9px; align-items: start; }
.statistics-layout .panel { min-width: 0; margin-bottom: 0; }
.statistics-note { margin: 0; padding: 7px 9px; border-bottom: 1px solid var(--line-soft); background: #090b0e; color: #737e8c; font-size: 8px; line-height: 1.45; }
.statistics-member-list { min-height: 330px; background: #050607; }
.statistics-person { min-height: 67px; display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-bottom: 1px solid var(--line-soft); }
.statistics-person:last-child { border-bottom: 0; }
.statistics-person .avatar { flex: 0 0 43px; width: 43px; height: 43px; }
.statistics-person-copy { min-width: 0; flex: 1; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.statistics-person-copy strong { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: #e9edf3; font-family: Georgia, serif; font-size: 11px; }
.statistics-person-copy span, .statistics-person-copy small { display: block; margin-top: 2px; color: #727e8d; font-size: 8px; }
.statistics-person-copy small { color: #5f6976; }
.statistics-person > svg { flex: 0 0 14px; width: 14px; color: #505a67; }
.statistics-staff-list { min-height: 250px; background: #050607; }
.statistics-staff-person { display: flex; align-items: center; gap: 8px; min-height: 74px; padding: 9px; border-bottom: 1px solid var(--line-soft); border-left: 3px solid #45505f; background: linear-gradient(90deg, rgba(255,255,255,.025), transparent 70%); }
.statistics-staff-person:last-child { border-bottom: 0; }
.statistics-staff-person.role-card-admin { border-left-color: var(--role-admin); background: linear-gradient(90deg, rgba(255,77,96,.1), transparent 72%); }
.statistics-staff-person.role-card-smod { border-left-color: var(--role-smod); background: linear-gradient(90deg, rgba(255,169,64,.09), transparent 72%); }
.statistics-staff-person.role-card-mod { border-left-color: var(--role-mod); background: linear-gradient(90deg, rgba(85,185,255,.08), transparent 72%); }
.statistics-staff-person .avatar { flex: 0 0 43px; width: 43px; height: 43px; }
.statistics-staff-person > button { min-width: 0; flex: 1; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.statistics-staff-rank { display: block; margin-bottom: 3px; color: #9da8b7; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.statistics-staff-person strong { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: #e8edf3; font-family: Georgia, serif; font-size: 11px; }
.statistics-staff-person small { display: block; margin-top: 2px; color: #707b89; font-size: 8px; }
.empty-state { display: grid; place-items: center; min-height: 180px; padding: 24px; color: var(--muted); text-align: center; }
.empty-state svg { width: 36px; height: 36px; margin-bottom: 9px; color: #4b5563; }
.panel:has(.empty-state:only-child) { border-bottom-color: transparent; }
.panel:has(.empty-state:only-child) > :has(> .empty-state:only-child) { display: grid; }
.view.active > .panel:has(.empty-state:only-child) { flex: 1 0 auto; display: flex; flex-direction: column; margin-bottom: 0; }
.view.active > .panel:has(.empty-state:only-child) > :has(> .empty-state:only-child) { min-height: 0; flex: 1 1 auto; }
.view.active > .panel:has(.empty-state:only-child) > :has(> .empty-state:only-child) > .empty-state:only-child { width: 100%; height: 100%; min-height: 180px; }

.feed-heading .panel-title { border-bottom: 0; }
.feed-heading-actions { display: inline-flex; align-items: center; gap: 5px; }
.feed-heading-actions .feed-create-action { width: auto; padding: 4px 8px; border-color: #2d7445; background: #12261a; color: #58e786; white-space: nowrap; }
.feed-heading-actions .feed-create-action > span { font-size: 11px; font-weight: 700; line-height: 1; }
.feed-heading-actions .feed-create-action:hover { border-color: #58e786; background: #193824; color: #8bf5ac; }
.feed-tabs { display: flex; justify-content: center; gap: 24px; padding: 8px 10px 7px; border-top: 1px solid var(--line); color: var(--muted); font-family: Georgia, serif; }
.feed-tabs button { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--orange); cursor: pointer; font-family: inherit; font-weight: 700; }
.feed-tabs button svg { width: 14px; height: 14px; }
.feed-tabs button.active { color: #e2e6ec; }
.feed-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; background: #aab2bf; }
.feed-tabs button[data-feed-scope="hot"] { color: #ff944d; }
.feed-tabs button[data-feed-scope="hot"].active { color: #ffc074; text-shadow: 0 0 9px rgba(255,116,45,.35); }
.feed-tabs button[data-feed-scope="hot"].active::after { background: linear-gradient(90deg,#ff4d61,#ff9b42,#ffd25a); }
.feed-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 9px; border-top: 1px solid var(--line); color: var(--orange); font-family: Georgia, serif; font-size: 11px; }
.feed-filters button { padding: 2px 5px; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--orange); cursor: pointer; font-family: inherit; font-size: 10px; }
.feed-filters button:hover { border-color: var(--line); background: #16191e; }
.feed-filters button.active { border-color: #315b3d; background: #12261a; color: var(--green); }
.composer { position: relative; padding: 10px; }
.composer-row { display: flex; align-items: flex-start; gap: 9px; }
.content-composer-avatar { display: contents; }
.composer textarea, .chat-form textarea, .profile-form textarea {
  resize: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: 0;
  background: #17191e;
  color: var(--text);
}
.composer textarea { flex: 1; min-height: 82px; padding: 11px; font-size: 16px; line-height: 1.55; }
.composer textarea.composer-text-small { font-size: 14px; }
.composer textarea.composer-text-large { font-size: 18px; }
.composer textarea.composer-text-xlarge { font-size: 22px; }
.composer textarea.announcement-font-serif { font-family: Georgia, "Times New Roman", serif; }
.composer textarea.announcement-font-handwriting { font-family: "Dancing Script", "Charmonman", cursive; }
.composer textarea.announcement-font-display { font-family: "Pattaya", "Lobster", cursive; }
.composer textarea.announcement-bold { font-weight: 800; }
.composer textarea:focus, .chat-form textarea:focus, .profile-form input:focus, .profile-form textarea:focus { border-color: #4c7db1; box-shadow: 0 0 0 2px rgba(87, 166, 255, .09); }
.composer-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-left: 44px; }
.composer-actions > span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.composer-actions svg { width: 14px; height: 14px; }
.composer-actions button, .chat-form button, .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid #367fe0;
  border-radius: 4px;
  background: #1769d7;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.composer-actions button:hover, .chat-form button:hover, .primary-button:hover { background: #2479e7; }
.composer-actions button svg, .chat-form button svg, .primary-button svg { width: 15px; height: 15px; }
.content-composer-note { display: block; margin: 8px 0 0 44px; color: #b8c2cf; font-size: 12px; }
.content-composer-upload-note { color: #93a9bd; line-height: 1.45; }
.composer-send-status { display: block; min-height: 14px; margin: 4px 0 0; color: #aab4c0; font-size: 10px; line-height: 14px; }
.composer-send-status[hidden] { display: none; }
.composer-send-status[data-state="sending"] { color: #aab4c0; }
.composer-send-status[data-state="sent"] { color: #59d879; }
.composer-send-status[data-state="error"] { color: #ff596b; }
.content-composer.composer-retry-restored textarea { animation: composer-retry-restored .85s ease; }
@keyframes composer-retry-restored { 0%,100% { box-shadow: none; } 35% { border-color: #ff6977; box-shadow: 0 0 0 3px rgba(255,89,107,.18); } }
.composer-submit-group { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.composer-visibility { position: relative; width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; margin: 0; padding: 0; overflow: hidden; border: 1px solid #485360; border-radius: 4px; background: #171b21; cursor: pointer; }
.composer-visibility:hover, .composer-visibility:focus-within { border-color: #4b8ed2; background: #1c2631; box-shadow: 0 0 0 2px rgba(87,166,255,.1); }
.composer-visibility-icon { display: grid; place-items: center; color: var(--blue); pointer-events: none; }
.composer-visibility[data-visibility="friends"] .composer-visibility-icon { color: var(--green); }
.composer-visibility[data-visibility="private"] .composer-visibility-icon { color: #f2c35f; }
.composer-visibility-icon svg { width: 17px; height: 17px; }
.composer-visibility select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.content-composer-bold { position: relative; }
.content-composer-bold input { position: absolute; opacity: 0; pointer-events: none; }
.content-composer-bold span { position: relative; display: block; width: 100%; height: 29px; margin-top: 3px; border: 1px solid var(--line); border-radius: 3px; background: #1b1f25; }
.content-composer-bold span::before { content: 'B'; position: absolute; inset: 0; display: grid; place-items: center; color: #7e8997; font-size: 13px; font-weight: 900; }
.content-composer-bold input:checked + span { border-color: #378950; background: #173622; }
.content-composer-bold input:checked + span::before { color: var(--green); }
body.bbcode-open { overflow: hidden; }
.content-composer.composer-inline-open { z-index: 70; overflow: visible; }
.composer-inline-tools { position: absolute; z-index: 80; top: 100%; right: 0; left: 0; width: auto; margin-top: 4px; clear: both; }
.composer-inline-tools[hidden] { display: none; }
.composer-inline-panel { width: 100%; animation: composer-inline-reveal .16s ease-out; }
.quick-pm-form .composer-inline-tools { top: auto; bottom: 100%; margin: 0 0 4px; }
@keyframes composer-inline-reveal { from { opacity: 0; transform: translateY(-4px); } }
.bbcode-modal { position: static; display: block; width: 100%; padding: 0; background: transparent; }
.bbcode-modal[hidden] { display: none; }
.bbcode-dialog { width: 100%; max-height: none; overflow: hidden; border: 1px solid #505967; border-radius: 6px; background: #0b0d10; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.bbcode-dialog > header { min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 7px 9px 7px 12px; border-bottom: 1px solid #424a56; background: linear-gradient(180deg, #282c32, #181b20); }
.bbcode-dialog > header strong { color: var(--green); font-family: Georgia, serif; font-size: 13px; }
.bbcode-dialog > header button { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid #4c545f; border-radius: 4px; background: #171a1f; color: #c0c8d2; cursor: pointer; font-size: 20px; line-height: 1; }
.bbcode-workspace { min-height: 250px; display: grid; grid-template-columns: 98px minmax(0, 1fr); }
.bbcode-workspace > nav { display: flex; flex-direction: column; gap: 1px; padding: 5px; border-right: 1px solid #424a56; background: #15181d; overflow-y: auto; }
.bbcode-workspace > nav button { min-height: 31px; padding: 5px 6px; border: 1px solid transparent; border-radius: 3px; background: #f2f3f5; color: #173d83; cursor: pointer; font-family: Georgia, serif; font-size: 10px; font-weight: 700; text-align: left; }
.bbcode-workspace > nav button:hover, .bbcode-workspace > nav button.active { border-color: #69a0e1; background: #d7e7fb; color: #0d4c9c; }
.bbcode-options { min-width: 0; max-height: 270px; padding: 6px; overflow-y: auto; background: #747d8e; scrollbar-width: thin; }
.bbcode-color-grid { display: grid; grid-template-columns: repeat(12, minmax(20px, 1fr)); gap: 3px; }
.bbcode-color-grid button { aspect-ratio: 1; min-height: 22px; padding: 0; border: 2px solid rgba(255,255,255,.64); border-radius: 2px; background: var(--swatch); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.bbcode-color-grid button:hover { border-color: #fff; transform: scale(1.06); }
.bbcode-font-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; }
.bbcode-extra-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.bbcode-font-list button, .bbcode-choice-grid button, .bbcode-extra-list button { min-width: 0; min-height: 31px; padding: 4px 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.75); border-radius: 4px; background: #f3f4f6; color: #1c4c9a; cursor: pointer; text-align: left; text-overflow: ellipsis; }
.bbcode-font-list button { font-size: 15px; white-space: nowrap; }
.bbcode-font-list button:hover, .bbcode-choice-grid button:hover, .bbcode-extra-list button:hover { border-color: #214d91; background: #dceaff; }
.bbcode-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.bbcode-choice-grid button { color: #173d83; font-family: Georgia, serif; font-size: 11px; }
.bbcode-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 5px; }
.bbcode-emoji-grid button { display: grid; place-items: center; gap: 2px; min-width: 0; min-height: 45px; padding: 4px 2px 3px; border: 1px solid rgba(255,255,255,.65); border-radius: 5px; background: #eef1f5; cursor: pointer; color: #343943; font: 700 10px/1.05 Arial, sans-serif; }
.bbcode-emoji-grid button:hover { border-color: #e3ad22; background: #fff8d7; transform: translateY(-1px); }
.bbcode-emoji-grid button img { display: block; width: auto; height: 20px; max-width: 44px; object-fit: contain; image-rendering: auto; }
.bbcode-emoji-grid button span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbcode-extra-list button { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: center; padding: 4px 6px; text-align: center; }
.bbcode-extra-list button > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbcode-extra-list button span, .bbcode-extra-list button small { display: block; }
.bbcode-extra-list button small { margin-top: 4px; color: #53677f; font-family: "Be Vietnam Pro", sans-serif; font-size: 8px; }
.bb-font-default { font-family: "Be Vietnam Pro", sans-serif !important; }
.bb-font-amatic { font-family: "Amatic SC", cursive !important; }
.bb-font-baloo { font-family: "Baloo Bhai", cursive !important; }
.bb-font-bangers { font-family: "Bangers", cursive !important; letter-spacing: .04em; }
.bb-font-bungee-inline { font-family: "Bungee Inline", cursive !important; }
.bb-font-bungee-shade { font-family: "Bungee Shade", cursive !important; }
.bb-font-charm { font-family: "Charm", cursive !important; }
.bb-font-charmonman { font-family: "Charmonman", cursive !important; }
.bb-font-coiny { font-family: "Coiny", cursive !important; }
.bb-font-dancing { font-family: "Dancing Script", cursive !important; }
.bb-font-lemonada { font-family: "Lemonada", cursive !important; }
.bb-font-lobster { font-family: "Lobster", cursive !important; }
.bb-font-pacifico { font-family: "Pacifico", cursive !important; }
.bb-font-pattaya { font-family: "Pattaya", sans-serif !important; }
.bb-font-philosopher { font-family: "Philosopher", sans-serif !important; }
.bb-font-vt323 { font-family: "VT323", monospace !important; font-size: 1.2em; }
.rich-content .bbcode-background { padding: 1px 3px; border-radius: 2px; }
.rich-content .bbcode-shadow { text-shadow: 0 0 5px var(--bb-shadow), 0 0 9px var(--bb-shadow); }
.rich-content .bbcode-block { display: block; width: 100%; }
.rich-content .bbcode-left { text-align: left; }
.rich-content .bbcode-center { text-align: center; }
.rich-content .bbcode-right { text-align: right; }
.rich-content .bbcode-size-small { font-size: .78em; }
.rich-content .bbcode-size-large { font-size: 1.3em; }
.rich-content .bbcode-size-xlarge { font-size: 1.65em; }
.user-mention { color: #ffd84d !important; font-weight: 900 !important; text-shadow: 0 1px 0 rgba(0,0,0,.62), 0 0 8px rgba(255,216,77,.3); }
button.user-mention { display: inline; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; line-height: inherit; }
button.user-mention:hover { color: #fff19a !important; text-decoration: underline; }
.bbcode-nick { display: inline; color: #f0c735 !important; vertical-align: baseline; font-weight: 800; text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 6px rgba(240,199,53,.18); }
.bbcode-video { width: 100%; max-width: 640px; display: block; aspect-ratio: 16 / 9; margin: 8px auto; overflow: hidden; border: 1px solid #3b4652; border-radius: 7px; background: #000; box-shadow: 0 5px 18px rgba(0,0,0,.34); }
.bbcode-video iframe { width: 100%; height: 100%; display: block; border: 0; }
.bbcode-image { width: fit-content; max-width: min(100%, 420px); display: block; margin: 8px auto; overflow: hidden; border: 1px solid #3b4652; border-radius: 7px; background: #080b0e; box-shadow: 0 5px 18px rgba(0,0,0,.34); }
.bbcode-image img { width: auto; max-width: 100%; max-height: min(55vh, 420px); display: block; object-fit: contain; }
.bbcode-smiley { display: inline-block; max-width: min(160px, 70vw); margin: 3px 2px; vertical-align: middle; }
.bbcode-smiley img { display: block; width: auto; max-width: 100%; max-height: 150px; object-fit: contain; }
.quick-emoticon { display: inline-block; margin: 0 .06em; vertical-align: -.18em; filter: drop-shadow(0 1px 1px rgba(0,0,0,.22)); }
.quick-emoticon-facebook { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: 1.34em; line-height: 1; }
@media (max-width: 520px) { .quick-emoticon-facebook { font-size: 1.28em; } }
.bbcode-image-option { color: #2768b5; font-weight: 900; }
.bbcode-datetime { color: #8ed6ff; font-weight: 800; white-space: nowrap; }
.bbcode-datetime-option { color: #2768b5; font-weight: 900; }
.bbcode-status { display: inline-block; padding: 2px 7px; border: 1px solid rgba(142,214,255,.35); border-radius: 999px; background: rgba(39,104,181,.17); color: #9edcff; font-size: .92em; font-weight: 800; }
.bbcode-youtube-option { color: #ff4b55; font-weight: 900; }
.bbcode-rainbow, .bbcode-rainbow-option { color: transparent !important; background: linear-gradient(90deg, #ff4664, #ff9f43, #ffe45c, #55df83, #4dc9ff, #8d75ff, #ef65cf, #ff4664); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; font-weight: 900; animation: bbcode-rainbow-shift 3s linear infinite; }
@keyframes bbcode-rainbow-shift { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .bbcode-rainbow, .bbcode-rainbow-option { animation: none; } }
.bbcode-location-option { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 5px; color: #62d896; font-weight: 900; white-space: nowrap; }
.bbcode-location-option svg, .bbcode-map > a svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bbcode-map { width: 100%; max-width: 640px; display: block; margin: 8px auto; overflow: hidden; border: 1px solid #3b4652; border-radius: 7px; background: #080b0e; box-shadow: 0 5px 18px rgba(0,0,0,.34); }
.bbcode-map-frame { width: 100%; display: block; aspect-ratio: 16 / 9; background: #111; }
.bbcode-map-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.bbcode-map > a { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 5px; padding: 7px 9px; overflow: hidden; color: #78dba2; font-size: 12px; font-weight: 800; text-align: center; text-decoration: none; white-space: nowrap; }
.bbcode-map > a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbcode-map > a:hover { background: #132019; color: #a0f1bd; }
.bbcode-nick-admin { text-shadow: 0 0 5px rgba(255,77,96,.9), 0 0 11px rgba(255,77,96,.52); }
.bbcode-nick-smod { text-shadow: 0 0 5px rgba(255,111,187,.9), 0 0 11px rgba(255,111,187,.5); }
.bbcode-nick-mod { text-shadow: 0 0 5px rgba(87,166,255,.9), 0 0 11px rgba(87,166,255,.5); }
.bbcode-nick-member { text-shadow: 0 0 5px rgba(66,230,106,.88), 0 0 11px rgba(66,230,106,.45); }
.feed-card { margin-bottom: 8px; border-block: 1px solid var(--line); background: #050607; }
.feed-list .feed-card { content-visibility: auto; contain-intrinsic-block-size: auto 420px; }

/* Keep the main feed's scroll height stable. Feed cards range from short text
   posts to tall galleries, so a shared 420px intrinsic estimate makes the
   browser correct the page height as each card enters the viewport. */
[data-page="feed"] #feed-list .feed-card {
  content-visibility: visible;
  contain-intrinsic-size: none;
}
[data-page="feed"] #feed-list .feed-card.feed-perf-offscreen *,
body.feed-perf-scrolling [data-page="feed"].active #feed-list .feed-card * {
  animation-play-state: paused !important;
}
body.feed-perf-scrolling [data-page="feed"].active .feed-inline-video-expand,
body.feed-perf-scrolling .back-to-top {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.feed-card-head { display: flex; align-items: center; gap: 9px; padding: 9px 9px 0; }
.feed-card-head .avatar { width: 43px; height: 43px; }
.feed-author { min-width: 0; flex: 1; }
.feed-author strong { display: block; color: #f4de4e; font-family: Georgia, serif; }
.feed-author-top { min-width: 0; display: flex !important; align-items: center; gap: 6px; overflow: hidden; }
.feed-author-top > strong { min-width: 0; max-width: 100%; flex: 1 1 auto; overflow: hidden; }
.feed-post-state { min-width: 0; max-width: 100%; display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 7px !important; margin-top: 4px; }
.feed-author .feed-post-state > .feed-visibility { flex: 0 0 auto; margin-top: 0; }
.feed-post-state > time { min-width: 0; display: inline-flex; align-items: center; gap: 3px; color: #8993a1; font-size: 11px; font-weight: 400; line-height: 1.3; white-space: nowrap; }
.feed-post-state > time svg { width: 12px; height: 12px; color: var(--blue); }
.feed-pinned-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border: 1px solid #70542b; border-radius: 999px; background: #281d0d; color: #f3c86b; font-size: 11px; font-weight: 700; line-height: 1.2; }
.feed-pinned-badge svg { width: 12px; height: 12px; color: currentColor; }
.feed-author-meta { margin-top: 3px; }
.feed-author span { display: flex; align-items: center; gap: 4px; color: #8993a1; font-size: 10px; }
.feed-author span svg { width: 11px; height: 11px; color: var(--blue); }
.feed-author .feed-visibility { width: max-content; display: inline-flex; margin-top: 3px; padding: 2px 6px; border: 1px solid #343d48; border-radius: 999px; background: #11151a; color: #aeb8c5; font-size: 11px; line-height: 1.2; }
.feed-author-profile { width: 100%; display: block; }
.feed-author .feed-visibility-editable { position: relative; overflow: hidden; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.feed-author .feed-visibility-editable:hover, .feed-author .feed-visibility-editable:focus-within { border-color: #4b8ed2; background: #172230; color: #a9d6ff; }
.feed-visibility-editable > span { color: inherit; font-size: inherit; pointer-events: none; }
.feed-visibility-editable select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.feed-visibility-editable select:disabled { cursor: wait; }
.feed-author .feed-visibility-friends { border-color: #315b78; color: #76bfff; }
.feed-author .feed-visibility-private { border-color: #675532; color: #f2c35f; }
.feed-author .feed-visibility svg { width: 12px; height: 12px; color: currentColor; }
.more-button { border: 0; background: none; color: #76baff; cursor: pointer; }
.more-button svg { width: 18px; }
.feed-card-menu { position: relative; z-index: 8; flex: 0 0 auto; display: flex; align-items: center; gap: 1px; }
.feed-quick-hide-button { width: 31px; height: 31px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #858d99; cursor: pointer; }
.feed-quick-hide-button:hover, .feed-quick-hide-button:focus-visible { background: #211a2b; color: #c6a5ed; outline: none; }
.feed-quick-hide-button svg { width: 17px; height: 17px; }
.feed-more-button { display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #9ca3af; cursor: pointer; }
.feed-more-button:hover, .feed-more-button[aria-expanded="true"] { background: #171b21; color: #d4d4d8; }
.feed-more-button svg { width: 19px; height: 19px; }
.feed-card-menu-popover { position: absolute; z-index: 30; top: 34px; right: 0; width: max-content; min-width: 190px; padding: 5px; border: 1px solid #3d4652; border-radius: 7px; background: #111419; box-shadow: 0 12px 34px rgba(0,0,0,.72); }
.feed-card-menu-popover[hidden] { display: none; }
.feed-card-menu-popover button { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 0; border-radius: 5px; background: transparent; color: #d5dbe3; cursor: pointer; font-size: 12px; text-align: left; }
.feed-card-menu-popover button:hover { background: #20252d; color: #fff; }
.feed-card-menu-popover button.danger { color: #ff7582; }
.feed-card-menu-popover button.danger:hover { background: #32171c; color: #ff9ba5; }
.feed-card-menu-popover svg { flex: 0 0 auto; width: 16px; height: 16px; }
.feed-list .feed-card.feed-menu-open {
  position: relative;
  z-index: 1000 !important;
  overflow: visible !important;
  content-visibility: visible !important;
  contain: none !important;
}
.feed-card.feed-menu-open .feed-card-head {
  position: relative;
  z-index: 1001 !important;
  overflow: visible !important;
}
.feed-card.feed-menu-open .feed-card-menu {
  z-index: 1002 !important;
}
.feed-card.feed-menu-open .feed-card-menu-popover {
  z-index: 1003 !important;
  max-width: min(260px, calc(100vw - 24px));
}
.feed-content { margin: 0; padding: 9px 9px 12px; color: var(--green); font-family: Georgia, serif; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.feed-content-text { display: block; min-width: 0; }
.feed-content-text.feed-content-collapsed { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; }
.feed-content-more { display: inline-flex; align-items: center; margin-top: 5px; padding: 0; border: 0; background: transparent; color: #72b9ff; cursor: pointer; font: inherit; font-size: .82em; font-weight: 800; }
.feed-content-more:hover { color: #b9ddff; text-decoration: underline; }
.feed-content-more[hidden] { display: none; }
.feed-forum-share { min-height: 104px; display: block; margin: 10px 9px 12px; overflow: hidden; border: 1px solid #504253; border-radius: 10px; background: linear-gradient(145deg,#15121b,#0b1017); color: #edf2f8; text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.28); transition: border-color .16s,transform .16s,box-shadow .16s; }
.feed-forum-share:hover { border-color: #bd5d8d; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.feed-forum-share-copy { min-width: 0; min-height: 104px; display: grid; align-content: center; gap: 5px; padding: 12px 14px; }
.feed-forum-share-copy small { display: flex; align-items: center; gap: 5px; color: #ff91c4; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.feed-forum-share-copy small svg { width: 14px; height: 14px; }
.feed-forum-share-copy strong { overflow: hidden; color: #fff; font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.feed-forum-share-copy p { display: -webkit-box; margin: 0; overflow: hidden; color: #aeb8c5; font-size: 11px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.feed-forum-share-copy em { display: inline-flex; align-items: center; gap: 4px; color: #8fc8ff; font-size: 10px; font-style: normal; font-weight: 700; }
.feed-forum-share-copy em svg { width: 13px; height: 13px; }
@media (max-width: 560px) { .feed-forum-share { min-height: 96px; } .feed-forum-share-copy { min-height: 96px; padding: 10px; } .feed-forum-share-copy p { -webkit-line-clamp: 2; } }
.feed-party-share { position: relative; min-height: 118px; display: grid; grid-template-columns: 92px minmax(0,1fr); align-items: stretch; margin: 10px 9px 12px; overflow: hidden; border: 1px solid #543b78; border-radius: 14px; background: radial-gradient(circle at 12% 20%,rgba(202,83,255,.24),transparent 38%),linear-gradient(135deg,#191128 0%,#0a111b 58%,#071722 100%); color: #eef5ff; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,255,255,.025); transition: transform .16s,border-color .16s,box-shadow .16s; }
.feed-party-share:hover { border-color: #b86cff; color: #fff; transform: translateY(-1px); box-shadow: 0 15px 36px rgba(0,0,0,.45),0 0 22px rgba(151,69,255,.12); }
.feed-party-share-art { position: relative; display: grid; place-items: center; overflow: hidden; border-right: 1px solid rgba(190,128,255,.18); background: radial-gradient(circle,rgba(171,71,255,.38),rgba(45,21,80,.18) 48%,transparent 70%); color: #f1c9ff; }
.feed-party-share-art::before,.feed-party-share-art::after,.feed-party-share-art b,.feed-party-share-art em { content: ""; position: absolute; border: 1px solid rgba(206,141,255,.2); border-radius: 50%; }
.feed-party-share-art::before { width: 68px; height: 68px; }
.feed-party-share-art::after { width: 48px; height: 48px; border-color: rgba(83,200,255,.22); }
.feed-party-share-art b { width: 82px; height: 82px; border-style: dashed; animation: feed-party-orbit 14s linear infinite; }
.feed-party-share-art em { width: 8px; height: 8px; border: 0; background: #52d9ff; box-shadow: 0 0 13px #52d9ff; transform: translate(31px,-27px); }
.feed-party-share-art > svg { position: relative; z-index: 1; width: 31px; height: 31px; filter: drop-shadow(0 0 8px rgba(221,153,255,.72)); }
.feed-party-share-copy { min-width: 0; display: grid; align-content: center; gap: 4px; padding: 13px 14px; }
.feed-party-share-copy small { display: flex; align-items: center; gap: 5px; color: #ca8dff; font-size: 10px; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
.feed-party-share-copy small svg { width: 13px; height: 13px; color: #55d8ff; }
.feed-party-share-copy strong { overflow: hidden; color: #fff; font-size: 17px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.feed-party-share-copy p { margin: 0; color: #aeb8c9; font-size: 11px; line-height: 1.45; }
.feed-party-share-copy em { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: #63d5ff; font-size: 11px; font-style: normal; font-weight: 800; }
.feed-party-share-copy em svg { width: 13px; height: 13px; }
@keyframes feed-party-orbit { to { transform: rotate(360deg); } }
@media (max-width: 420px) { .feed-party-share { grid-template-columns: 74px minmax(0,1fr); min-height: 108px; } .feed-party-share-copy { padding: 11px 10px; } .feed-party-share-copy strong { font-size: 15px; } .feed-party-share-copy p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } }
@media (prefers-reduced-motion: reduce) { .feed-party-share-art b { animation: none; } }
.feed-art { min-height: 150px; display: grid; place-items: center; margin: 0 9px 12px; border: 1px solid var(--line); border-radius: 6px; background: radial-gradient(circle at 30% 25%, rgba(255, 113, 185, .2), transparent 30%), radial-gradient(circle at 70% 70%, rgba(75, 157, 255, .2), transparent 34%), #13161b; color: #dce4ef; text-align: center; }
.feed-art span { display: block; color: var(--pink); font-size: 34px; }
.feed-art strong { display: block; font-family: Georgia, serif; font-size: 18px; }
.feed-actions { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 5px 9px 9px; }
.feed-engagement-left { display: flex; align-items: center; gap: 6px; }
.feed-actions button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: #aab3c0; cursor: pointer; font-family: Georgia, serif; }
.feed-actions button:hover, .feed-actions button.liked { color: var(--pink); }
.feed-actions svg { width: 24px; height: 24px; fill: transparent; }
.feed-actions button.liked svg { fill: currentColor; }
.feed-actions .feed-heart-button.liked, .feed-actions .feed-heart-button.liked:hover { color: #ff304d; }
.feed-actions .feed-heart-button { min-height: 34px; padding: 3px 7px 3px 3px; border-radius: 999px; font-size: 15px; }
.feed-actions .feed-heart-button b { min-width: 15px; color: #f3f5f8; font-size: 14px; text-align: left; }
.feed-actions .feed-heart-button.liked b { color: #ff304d; }
.feed-actions .feed-stat-button { padding: 4px 7px; border: 1px solid var(--line-soft); border-radius: 999px; font-size: 9px; }
.feed-actions .feed-stat-button svg { width: 14px; height: 14px; }
.feed-card-pending { border-color: #355778; background: linear-gradient(180deg, #071018, #050708); box-shadow: inset 0 0 0 1px rgba(79,166,255,.08); }
.feed-card-pending .feed-visibility-editable, .feed-card-pending .post-media-grid a { pointer-events: none; }
.feed-card-pending .feed-post-state > time { color: #79bdf6; }
.feed-card-pending .feed-post-state > time svg { animation: feed-upload-spin 1.2s linear infinite; }
.feed-card-pending .post-media-grid { min-height: 120px; background: #080b0f; }
.feed-card-pending .post-media-grid.media-count-1 > a { width: 100%; min-height: 180px; }
.feed-upload-state { --feed-upload-progress: 0%; min-height: 50px; display: flex; align-items: center; gap: 9px; margin: 0 9px 9px; padding: 8px 9px; border: 1px solid #294e70; border-radius: 6px; background: #0b1721; }
.feed-upload-state > span { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #123354; color: #82c7ff; }
.feed-upload-state > span svg { width: 18px; height: 18px; }
.feed-upload-state > div { min-width: 0; flex: 1; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px 8px; }
.feed-upload-state strong { overflow: hidden; color: #d9eeff; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.feed-upload-state small { color: #8ecaff; font-size: 10px; font-variant-numeric: tabular-nums; }
.feed-upload-state div > i { grid-column: 1/3; height: 6px; overflow: hidden; border-radius: 999px; background: #172a3a; }
.feed-upload-state div > i > b { display: block; width: var(--feed-upload-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2d8ee8,#72d0ff); box-shadow: 0 0 8px rgba(91,193,255,.55); transition: width .18s ease-out; }
@keyframes feed-upload-spin { to { transform: rotate(360deg); } }
.feed-like-preview { position: relative; isolation: isolate; flex: 0 0 auto; display: flex !important; align-items: center; justify-content: flex-end; padding: 3px 4px 3px 9px; border: 1px solid transparent !important; border-radius: 999px; }
.feed-like-preview:hover { border-color: #4d364a !important; background: #1b111a !important; }
.feed-like-avatar,
.feed-like-avatar.has-avatar-frame { position: relative; width: 30px; height: 30px; margin-left: -20px; overflow: hidden; border: 2px solid #0a0d11 !important; border-radius: 50% !important; outline: 0 !important; background-clip: padding-box; clip-path: none !important; filter: none !important; font-size: 10px; animation: none !important; box-shadow: 0 0 0 1px #596472, 0 2px 5px rgba(0,0,0,.45) !important; }
.feed-like-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.feed-like-preview .feed-like-avatar:first-child { margin-left: 0; }
.feed-like-extra { position: relative; z-index: 5; min-width: 30px; height: 30px; display: grid; place-items: center; margin-left: -20px; border: 2px solid #0a0d11; border-radius: 50%; background: linear-gradient(145deg, #252c35, #11151b); color: #f5f7fa; font: 800 11px/1 Arial, sans-serif; box-shadow: 0 0 0 1px #596472, 0 2px 5px rgba(0,0,0,.45); }
.feed-load-more { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #75808e; font-size: 9px; }
.feed-load-more svg { width: 15px; }

.notification-total { color: #f4b24e; font-size: 9px; }
.notification-list { background: #050607; }
.notifications-loading #read-all { pointer-events: none; opacity: .62; }
.notification-total .skeleton-line { display: inline-block; width: 28px; height: 8px; margin: 0; }
.skeleton-notification { min-height: 72px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 9px; border-bottom: 1px solid var(--line); background: #050607; }
.skeleton-notification > .skeleton-avatar { flex: 0 0 46px; width: 46px; height: 46px; }
.skeleton-notification > span { flex: 1; min-width: 0; padding-top: 1px; }
.skeleton-notification-summary { min-height: 18px; display: flex; align-items: center; gap: 5px; }
.skeleton-notification-summary .skeleton-line { margin-top: 0; }
.skeleton-notification > .skeleton-arrow { align-self: center; flex: 0 0 15px; width: 15px; height: 15px; border-radius: 4px; }
.notification-load-error .primary-button { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; }
.notification-item { position: relative; width: 100%; min-height: 72px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 9px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover:not(:disabled) { background: rgba(87, 166, 255, .08); }
.notification-item:disabled { cursor: default; }
.notification-icon, .notification-avatar { flex: 0 0 46px; width: 46px; height: 46px; }
.notification-icon { display: grid; place-items: center; border: 1px solid #34465e; border-radius: 50%; background: #101925; color: var(--blue); }
.notification-icon svg { width: 20px; height: 20px; }
.notification-avatar { border-color: #586474; }
.notification-copy { flex: 1; min-width: 0; }
.notification-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; min-height: 18px; line-height: 1.45; }
.notification-summary > strong { display: inline-flex; align-items: center; color: #ff73bc; font-size: 11px; }
.notification-summary > strong.notification-title { color: #e8ecf2; }
.notification-summary > span { color: #d0d6de; font-size: 10px; }
.notification-summary time { color: #747f8e; font-size: 8px; white-space: nowrap; }
.notification-copy p { margin: 2px 0 3px; color: #9ea8b6; font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }
.notification-destination { display: inline-flex; align-items: center; gap: 4px; color: var(--orange); font-size: 9px; font-weight: 700; }
.notification-destination svg { width: 12px; height: 12px; }
.notification-item.unread { background: rgba(87, 166, 255, .055); box-shadow: inset 2px 0 var(--blue); }
.notification-unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 6px rgba(87, 166, 255, .7); }
.notification-arrow { align-self: center; flex: 0 0 auto; width: 15px; color: #657180; }

.chat-panel { overflow: hidden; }
.chat-room-loading .room-tabs, .chat-room-loading #room-chat-composer-mount { pointer-events: none; opacity: .62; }
.room-load-error .primary-button { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; }
.typing-status { color: var(--orange) !important; font-family: inherit; font-size: 9px; }
.room-tabs { display: flex; gap: 5px; padding: 8px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.room-tabs[hidden] { display: none !important; }
.room-tabs::-webkit-scrollbar { display: none; }
.room-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px 5px 9px; border: 1px solid var(--line); border-radius: 4px; background: #171a1f; color: #aeb6c2; cursor: pointer; font-size: 10px; }
.room-tab b { min-width: 20px; padding: 1px 5px; border-radius: 999px; background: #292e36; color: #9da8b6; text-align: center; font-size: 8px; }
.room-tab.active { border-color: #367fe0; background: #15355d; color: #84bdff; }
.room-tab.active b { background: #2567aa; color: #fff; }
.game-room-catalog { padding: 9px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 100% 0, rgba(255,173,34,.09), transparent 35%), #080a0d; }
.game-room-catalog[hidden] { display: none; }
.game-player-guide { margin: 0 0 10px; overflow: hidden; border: 1px solid #315a78; border-radius: 8px; background: linear-gradient(145deg, rgba(22,58,83,.92), rgba(10,24,36,.96)); color: #dcebf7; }
.game-player-guide > summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 48px; padding: 7px 10px; cursor: pointer; list-style: none; }
.game-player-guide > summary::-webkit-details-marker,
.game-guide-item > summary::-webkit-details-marker { display: none; }
.game-guide-summary-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(111,192,255,.48); border-radius: 8px; background: rgba(49,165,255,.13); color: #6fc0ff; }
.game-guide-summary-icon svg { width: 18px; height: 18px; }
.game-player-guide > summary > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.game-player-guide > summary strong { color: #eaf7ff; font-size: 15px; }
.game-player-guide > summary small { overflow: hidden; color: #aac6d9; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.game-player-guide > summary em { padding: 4px 7px; border: 1px solid rgba(111,192,255,.36); border-radius: 999px; color: #8dceff; font-size: 9px; font-style: normal; white-space: nowrap; }
.game-player-guide[open] > summary { border-bottom: 1px solid rgba(111,192,255,.24); }
.game-player-guide[open] > summary em::before { content: 'Đóng '; }
.game-player-guide[open] > summary em { font-size: 0; }
.game-player-guide[open] > summary em::before { font-size: 9px; }
.game-guide-body { max-height: min(68vh, 660px); padding: 9px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #376a8d #0d1c28; }
.game-guide-intro { margin: 0 0 8px; padding: 8px 9px; border-left: 3px solid #31a5ff; border-radius: 4px; background: rgba(0,0,0,.2); color: #d8e8f2; font-size: 13px; line-height: 1.6; }
.game-guide-intro strong { color: #79c8ff; }
.game-guide-list { display: grid; gap: 6px; }
.game-guide-item { overflow: hidden; border: 1px solid #2b4559; border-radius: 6px; background: rgba(5,13,20,.56); }
.game-guide-item > summary { display: grid; grid-template-columns: 25px minmax(0,auto) minmax(0,1fr) 18px; align-items: center; gap: 6px; min-height: 38px; padding: 6px 8px; cursor: pointer; list-style: none; }
.game-guide-item > summary > span { font-size: 17px; text-align: center; }
.game-guide-item > summary b { color: #eef8ff; font-size: 13px; }
.game-guide-item > summary small { overflow: hidden; color: #a9c2d2; font-size: 11px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.game-guide-item > summary::after { content: '+'; width: 18px; height: 18px; display: grid; place-items: center; grid-column: 4; border-radius: 50%; background: #17364c; color: #75c7ff; font-size: 13px; }
.game-guide-item[open] > summary { border-bottom: 1px solid #243c4f; background: rgba(49,165,255,.08); }
.game-guide-item[open] > summary::after { content: '−'; }
.game-guide-item > div { padding: 6px 10px 9px 39px; }
.game-guide-item ol { margin: 0; padding-left: 17px; color: #d3e0e8; font-size: 12px; line-height: 1.65; }
.game-guide-item li + li { margin-top: 5px; }
.game-guide-item li::marker { color: #66bcfb; font-weight: 800; }
.game-guide-item b { color: #83ccff; }
.game-catalog-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 2px 2px 9px; }
.game-catalog-head > span { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-weight: 800; font-size: 11px; }
.game-catalog-head > span svg { width: 16px; }
.game-catalog-head > strong { color: #9fb0c2; font-size: 8px; font-weight: 600; }
.game-catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.game-demo-tile { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; overflow: hidden; border: 1px solid #303741; border-radius: 5px; background: linear-gradient(180deg, #171b21, #101318); color: #dce3eb; cursor: pointer; text-align: center; }
.game-demo-tile:hover { border-color: #547aa4; background: linear-gradient(180deg, #1c2733, #111820); transform: translateY(-1px); }
.game-demo-tile strong { overflow: hidden; max-width: 100%; color: #f0f3f7; font-family: Georgia, serif; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.game-demo-tile small { overflow: hidden; max-width: 100%; color: #7f8b99; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.game-demo-tile em { position: absolute; top: 4px; right: 4px; padding: 1px 3px; border-radius: 2px; background: rgba(0,0,0,.65); color: var(--orange); font-size: 6px; font-style: normal; text-transform: uppercase; }
.game-demo-online { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 17px; margin-top: 2px; padding: 2px 6px; border: 1px solid #33506a; border-radius: 999px; background: #101d29; color: #9fd3ff; font-size: 8px; font-weight: 700; line-height: 1; white-space: nowrap; }
.game-demo-online svg { width: 11px; height: 11px; color: #65b8ff; }
.game-demo-online b { color: #e4f4ff; font-size: inherit; }
.game-demo-tile.game-closed { border-color: #493238; background: #151012; filter: grayscale(.55); cursor: not-allowed; opacity: .68; }
.game-demo-tile.game-closed:hover { border-color: #493238; background: #151012; transform: none; }
.game-demo-tile.game-closed em { background: #4a2027; color: #ff9ca6; }
.game-demo-art { width: 51px; height: 51px; display: grid; place-items: center; margin-bottom: 2px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; box-shadow: inset 0 0 15px rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.28); font-family: Georgia, serif !important; font-size: 25px; line-height: 1; }
.game-demo-art img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform .2s ease, filter .2s ease; }
.game-demo-tile:hover .game-demo-art img, .game-demo-tile:focus-visible .game-demo-art img { transform: scale(1.06); filter: saturate(1.08) brightness(1.05); }
.art-ludo { background: linear-gradient(145deg, #f5d72c, #e84d2d 52%, #2ca9e8); }
.art-tien-len { position: relative; display: flex; align-items: center; justify-content: center; padding-left: 8px; background: radial-gradient(circle at 50% 20%, #24845f, #073f31 72%); }
.art-tien-len i { width: 23px; height: 32px; display: grid; place-items: start center; margin-left: -8px; padding-top: 3px; border: 1px solid #e6dfcf; border-radius: 3px; box-shadow: 0 2px 5px #0007; color: #171717; background: #fffdf6; font-size: 9px; font-style: normal; font-weight: 900; transform: rotate(-8deg); }
.art-tien-len i:nth-child(2) { z-index: 2; color: #d72c34; transform: translateY(-3px); }
.art-tien-len i:nth-child(3) { z-index: 3; color: #d72c34; transform: rotate(8deg); }
.art-chess { background: radial-gradient(circle, #ead39c 0 46%, #9b652f 47% 55%, #4a2b16 56%); color: #8b1717; }
.art-caro { background: repeating-linear-gradient(0deg, rgba(42,60,84,.7) 0 1px, transparent 1px 15px), repeating-linear-gradient(90deg, rgba(42,60,84,.7) 0 1px, #f0e2bd 1px 15px); font-size: 17px; }
.art-colat { gap: 8px; background: #1d7651 url('/assets/games/co-lat/board-grid.svg?v=1') center/72px 72px repeat; box-shadow: inset 0 0 0 4px #6b4027; }
.colat-preview-disc { width: 28px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 3px 7px rgba(0,0,0,.38); }
.colat-preview-disc.black { background: radial-gradient(circle at 34% 26%, #626b74, #0b0d0f 68%); }
.colat-preview-disc.red { background: radial-gradient(circle at 34% 26%, #ff9898, #d72d38 42%, #85111b 78%); }
.art-billiard { background: radial-gradient(circle at 65% 38%, #fff 0 15%, #111 16% 26%, transparent 27%), linear-gradient(145deg, #1d895b, #102c25); }
.art-lotto { background: linear-gradient(145deg, #f7c824, #ef7b22 48%, #e63c49); }
.art-race { background: linear-gradient(145deg, #318be4, #56318e 52%, #e85e37); }
.art-farm { background: linear-gradient(#79cfff 0 45%, #72ae42 46% 70%, #76502c 71%); }
.art-ranking { background: linear-gradient(145deg, #5a351d, #1b1410); }
.game-demo-note { display: flex; align-items: center; gap: 5px; margin: 8px 1px 0; color: #707b89; font-size: 7px; }
.game-demo-note svg { flex: 0 0 auto; width: 13px; color: var(--orange); }
.chat-messages { height: min(53vh, 480px); min-height: 360px; padding: 11px 8px; overflow-y: auto; background: #050607; scrollbar-color: #303742 transparent; }
.message { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 13px; }
.message.own { flex-direction: row-reverse; }
.message .avatar { width: 33px; height: 33px; font-size: 12px; box-shadow: inset 0 0 0 2px #0b0c0f; }
.message-body { max-width: min(76%, 470px); }
.message-meta { display: flex; gap: 6px; align-items: center; margin: 0 0 3px 2px; color: #778291; font-size: 8px; }
.message-meta strong { color: var(--orange); font-family: Georgia, serif; font-size: 11px; }
.message.own .message-meta { justify-content: flex-end; margin-right: 2px; }
.message-bubble { padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; background: #181b20; color: #e3e7ed; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.own .message-bubble { border-color: #28578c; border-radius: 12px 4px 12px 12px; background: #12325a; }
.chat-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 9px 8px; border-top: 1px solid var(--line); background: #14171b; }
.chat-form .composer-send-status { order: 3; flex: 0 0 100%; width: 100%; margin-top: -3px; }
.chat-form .composer-row { min-width: 0; flex: 1; align-items: flex-end; }
.chat-form .composer-actions { flex: 0 0 auto; margin: 0; padding: 0; }
.chat-form .post-tools { display: none; }
.chat-form textarea { min-height: 37px; max-height: 120px; padding: 8px; }
.chat-form button { min-height: 37px; }

.profile-form { padding: 12px; }
.profile-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.profile-preview strong, .profile-preview span { display: block; }
.profile-preview strong { color: var(--orange); font-family: Georgia, serif; font-size: 17px; }
.profile-preview span { color: var(--green); font-size: 10px; }
.profile-form label { display: block; margin-bottom: 10px; color: #aab3c0; font-size: 10px; }
.profile-form input, .profile-form textarea { display: block; width: 100%; margin-top: 5px; padding: 9px; border: 1px solid var(--line); border-radius: 4px; outline: 0; background: #17191e; color: var(--text); }
.profile-form textarea { min-height: 70px; }
.primary-button { width: 100%; min-height: 39px; }
.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 9px; }
.game-card { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 7px; border: 1px solid var(--line); border-radius: 5px; background: #15181d; text-align: center; }
.game-card > svg { width: 28px; height: 28px; color: #788596; }
.game-card strong { color: #dbe0e7; font-family: Georgia, serif; font-size: 12px; }
.game-card span { color: var(--muted); font-size: 8px; }
.game-card button { margin-top: 4px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; background: #1d2127; color: #838e9d; font-size: 9px; }
.game-card.featured { border-color: rgba(255, 111, 187, .34); background: #20131b; }
.game-card.featured > svg { color: var(--pink); fill: rgba(255, 111, 187, .2); }
.game-card.featured span { color: var(--green); }
.game-card.featured button { border-color: #8d375f; background: #7c294f; color: #fff; cursor: pointer; }

.app-shell > footer { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 10px 30px; border-top: 1px solid var(--line); color: #5f6977; text-align: center; }
.app-shell > footer strong { color: #8893a2; font-family: Georgia, serif; letter-spacing: .08em; }
.app-shell > footer span { font-size: 9px; }
.app-shell > footer small { font-size: 8px; }

.toast-stack { position: fixed; z-index: 2500; top: 12px; right: max(12px, calc((100vw - 720px) / 2 + 12px)); display: grid; gap: 7px; width: min(340px, calc(100vw - 24px)); pointer-events: none; }
.toast { display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; border: 1px solid #38404b; border-left: 3px solid var(--blue); border-radius: 4px; background: rgba(20, 23, 28, .97); color: #dce2e9; box-shadow: 0 10px 30px rgba(0,0,0,.45); animation: toast-in .25s ease; pointer-events: auto; touch-action: pan-y; user-select: none; cursor: grab; }
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--danger); }
.toast svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; }
.toast strong { display: block; font-size: 11px; }
.toast span { display: block; margin-top: 1px; color: #9da7b5; font-size: 9px; }
.toast.leaving { opacity: 0; transform: translateY(-8px); transition: .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } }

.farm-lite-message,
.farm-option-note.show,
.caro-obstacle-notice:not([hidden]) { pointer-events: auto !important; touch-action: pan-y; user-select: none; cursor: grab; }
.swipe-notice-dragging { animation-play-state: paused !important; translate: var(--swipe-notice-x, 0) 0; cursor: grabbing; }
.swipe-notice-returning { animation-play-state: paused !important; translate: var(--swipe-notice-x, 0) 0; transition: translate .18s ease-out, opacity .18s ease-out !important; }
.swipe-notice-dismissing { animation: none !important; translate: var(--swipe-notice-x, 0) 0; transition: translate .18s ease-in, opacity .18s ease-in !important; pointer-events: none !important; }

.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.author-button, .member-name-button { min-width: 0; padding: 0; border: 0 !important; background: none !important; cursor: pointer; text-align: left; }
.member-name-button { flex: 1; }

.composer-login { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: 10px; border-bottom: 1px solid var(--line); background: #0c0e11; color: var(--muted); font-size: 10px; }
.composer-login svg { width: 16px; }
.composer-login button { padding: 5px 8px; border: 1px solid var(--line); border-radius: 3px; background: #191d22; color: var(--blue); cursor: pointer; }
.post-composer { overflow: visible; }
.composer-media-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 8px 0 0 44px; }
.composer-preview-item { position: relative; min-width: 0; height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 4px; background: #111419; overflow: hidden; }
.composer-preview-item img, .composer-preview-item video { width: 100%; height: 100%; object-fit: contain; }
.composer-preview-item > svg { width: 25px; color: var(--pink); }
.composer-preview-item small { position: absolute; right: 2px; bottom: 2px; left: 2px; padding: 2px; border-radius: 2px; background: rgba(0,0,0,.72); overflow: hidden; color: #d8dee7; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.composer-preview-item button { position: absolute; z-index: 2; top: 3px; right: 3px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid #6d333b; border-radius: 50%; background: rgba(23,8,10,.9); color: #ff7985; cursor: pointer; }
.composer-preview-item button svg { width: 12px; }
.composer-media-preview .composer-voice-preview { grid-column: 1 / -1; min-height: 82px; height: auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 9px; overflow: visible; border-color: #394654; background: linear-gradient(145deg, #151a20, #0d1116); }
.composer-voice-player { min-width: 0; flex: 1; display: grid; gap: 5px; }
.composer-voice-player > span { display: flex; align-items: center; gap: 5px; color: #dce9f5; font-size: 10px; }
.composer-voice-player > span svg { width: 15px; height: 15px; color: #67b8ff; }
.composer-voice-player audio { display: block; width: 100%; min-width: 170px; height: 34px; }
.composer-voice-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.composer-voice-preview .composer-voice-actions button { position: static; width: auto; min-width: 58px; height: 34px; display: inline-flex; grid-auto-flow: column; gap: 5px; padding: 0 9px; border-radius: 5px; font-size: 10px; font-weight: 800; }
.composer-voice-preview .composer-voice-actions button svg { width: 14px; height: 14px; }
.composer-voice-preview .composer-voice-delete { border-color: #69343b; background: #281418; color: #ff8a94; }
.composer-voice-preview .composer-voice-send { border-color: #2872b7; background: #1767b7; color: #fff; }
.quick-pm-form .composer-preview-item.composer-voice-preview { height: auto; flex-wrap: wrap; }
.quick-pm-form .composer-voice-player { flex-basis: 100%; }
.quick-pm-form .composer-voice-actions { width: 100%; justify-content: flex-end; }
.composer-style-panel { margin: 8px 0 0 44px; padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: #111419; }
.mood-picker { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 7px; border-bottom: 1px solid var(--line-soft); }
.mood-picker button { width: 34px; height: 31px; border: 1px solid var(--line); border-radius: 3px; background: #1a1d22; cursor: pointer; font-size: 17px; }
.mood-picker button.selected { border-color: var(--pink); background: #472039; box-shadow: 0 0 0 1px var(--pink); }
.style-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-top: 7px; }
.style-controls label { color: var(--muted); font-size: 8px; }
.style-controls input, .style-controls select { display: block; width: 100%; height: 29px; margin-top: 3px; border: 1px solid var(--line); border-radius: 3px; background: #1b1f25; color: #dbe1e9; font-size: 9px; }
.style-controls input[type="color"] { padding: 2px; cursor: pointer; }
.advanced-actions { padding-left: 44px; }
.post-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.composer-symbol-tools { display: inline-flex; margin-inline: 2px; padding-inline: 5px; border-inline: 1px solid #3b4551; }
.composer-symbol-tools > button { border-color: #684b75; background: #25182c; color: #ff9ed6; }
.composer-symbol-tools > button:hover { border-color: #a865b4; background: #36203f; color: #ffd2ed; }
.post-tools button { display: inline-flex; align-items: center; gap: 3px; min-height: 31px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 3px; background: #191c21; color: #a8b2bf; cursor: pointer; font-size: 9px; }
.post-tools button:hover { color: var(--blue); border-color: #3b526e; }
.post-tools button svg { width: 14px; }
.post-tools button.recording { border-color: var(--danger); background: #40161b; color: #ff98a2; animation: pulse-record 1s infinite; }
@keyframes pulse-record { 50% { opacity: .65; } }
.submit-post:disabled { opacity: .65; cursor: wait; }

.post-mood { padding: 7px 9px 0; color: var(--pink); font-family: Georgia, serif; font-size: 10px; }
.post-media-grid { display: grid; gap: 3px; margin: 0 9px 10px; overflow: hidden; border-radius: 5px; }
.post-media-grid.media-count-1 { display: flex; justify-content: center; align-items: center; }
.post-media-grid.media-count-2 { grid-template-columns: repeat(2, 1fr); }
.post-media-grid.media-count-3, .post-media-grid.media-count-4 { grid-template-columns: repeat(2, 1fr); }
.post-media-grid a { position: relative; display: grid; place-items: center; height: 360px; overflow: hidden; border: 1px solid var(--line); background: #080a0d; cursor: zoom-in; touch-action: manipulation; }
.post-media-grid.media-count-1 > a { flex: 0 1 auto; width: fit-content; height: auto; max-width: 100%; max-height: none; aspect-ratio: auto; background: linear-gradient(180deg, #202329, #16191e); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.post-media-grid.media-count-3 a, .post-media-grid.media-count-4 a { height: 240px; }
.post-media-grid img, .post-media-grid video { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .2s; }
.post-media-grid.media-count-1 img, .post-media-grid.media-count-1 video { width: auto; height: auto; max-width: 100%; max-height: 420px; object-fit: contain; }
.post-media-grid a:hover img, .post-media-grid a:hover video { transform: scale(1.025); }
/* Keep feed photos inside their tiles: intrinsic grid sizing otherwise clips tall images from the top. */
.feed-card > .post-media-grid:not(.media-count-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feed-card > .post-media-grid:not(.media-count-1) > a:not(.post-video) { display: flex; align-items: center; justify-content: center; min-width: 0; }
.feed-card > .post-media-grid > a > img { min-width: 0; min-height: 0; object-position: center; }
.feed-card > .post-media-grid:not(.media-count-1) > a > img { max-width: 100%; max-height: 100%; }
.feed-card > .post-media-grid > a:hover > img { transform: none; }
[data-protected-media="image"] { position: relative; -webkit-touch-callout: none; user-select: none; }
[data-protected-media="image"] img,
[data-protected-media-image],
[data-protected-media-viewer] img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }
.protected-media-badge { position: absolute; z-index: 3; right: 7px; bottom: 7px; display: inline-flex; align-items: center; min-height: 21px; padding: 3px 7px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(5,8,12,.76); color: #e8eef6; box-shadow: 0 2px 8px rgba(0,0,0,.36); font-size: 8px; font-weight: 800; letter-spacing: .04em; line-height: 1; pointer-events: none; backdrop-filter: blur(5px); }
[data-protected-media-viewer] { position: relative; -webkit-touch-callout: none; user-select: none; }
.protected-media-watermark { position: absolute; z-index: 5; left: 50%; bottom: 20px; max-width: calc(100% - 32px); padding: 5px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(0,0,0,.5); color: rgba(255,255,255,.82); font-size: 10px; font-weight: 800; letter-spacing: .035em; line-height: 1.25; text-align: center; white-space: nowrap; transform: translateX(-50%); pointer-events: none; backdrop-filter: blur(5px); }
.post-video > span { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(0,0,0,.58); color: #fff; transform: translate(-50%,-50%); }
.post-video > span svg { width: 20px; fill: currentColor; }
.post-audio { box-sizing: border-box; width: min(430px, calc(100% - 18px)); display: flex; align-items: center; gap: 9px; margin: 0 9px 10px; padding: 9px; border: 1px solid #334052; border-radius: 5px; background: #121923; }
.post-audio-voice { margin-top: 8px; }
.feed-card > .post-audio { margin-top: 8px; }
.feed-card > .post-audio strong { display: none; }
.post-audio > svg { flex: 0 0 24px; width: 24px; color: var(--pink); }
.post-audio > div { min-width: 0; flex: 1; }
.post-audio strong { display: block; margin-bottom: 5px; overflow: hidden; color: #ccd5e1; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.post-audio audio { display: block; min-width: 0; width: 100%; height: 38px; }
.fancybox__content img, .fancybox__content video { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }
.fancybox__slide.has-html5video > .fancybox__content { width: 90vw !important; height: 90vh !important; max-width: 90% !important; max-height: 90% !important; min-height: 0; }
.fancybox__slide.has-html5video .fancybox__html5video { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; background: #000; }

.rankings-panel { overflow: hidden; }
.ranking-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--line); background: #0b0d10; scrollbar-width: thin; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.ranking-tabs button { flex: 0 0 124px; min-width: 124px; min-height: 48px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 6px 8px; border: 0; border-right: 1px solid var(--line-soft); background: transparent; color: #8e98a8; cursor: pointer; font-size: 9px; white-space: nowrap; }
.ranking-tabs button:last-child { border-right: 0; }
.ranking-tabs button svg { width: 16px; height: 16px; }
.ranking-tabs button.active { background: #18202a; color: var(--blue); box-shadow: inset 0 -2px var(--blue); }
.ranking-tabs button[data-clan-ranking-main] { color: #f3c83e; font-weight: 900; }
.ranking-tabs button[data-clan-ranking-main].active { background: linear-gradient(180deg,rgba(104,78,9,.24),#171a1f); color: #ffd84d; box-shadow: inset 0 -2px #e7b91f; }
.ranking-tabs button[data-ranking-type="hearts"].active { color: var(--pink); box-shadow: inset 0 -2px var(--pink); }
.ranking-tabs button[data-ranking-type="level"].active { color: #41edff; box-shadow: inset 0 -2px #00d9f5; }
.ranking-periods { display: flex; gap: 5px; padding: 8px 9px; border-bottom: 1px solid var(--line-soft); background: #090b0e; }
.ranking-periods[hidden] { display: none; }
.ranking-periods button { flex: 1; min-height: 29px; border: 1px solid var(--line); border-radius: 3px; background: #171a1f; color: #909aaa; cursor: pointer; font-size: 9px; }
.ranking-periods button.active { border-color: #a33f75; background: #361628; color: #ff8bc9; }
.ranking-note { margin: 0; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); color: #707b89; font-size: 8px; }
.ranking-list { background: #050607; }
.ranking-item { min-height: 66px; display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-bottom: 1px solid var(--line-soft); }
.ranking-item:last-child { border-bottom: 0; }
.ranking-item.rank-position-1 { background: linear-gradient(90deg, rgba(255, 190, 42, .1), transparent 58%); }
.ranking-item.rank-position-2 { background: linear-gradient(90deg, rgba(190, 205, 226, .08), transparent 58%); }
.ranking-item.rank-position-3 { background: linear-gradient(90deg, rgba(220, 132, 65, .08), transparent 58%); }
.ranking-item.ranking-type-level.rank-position-1 { background: linear-gradient(90deg, rgba(0,229,255,.16), rgba(0,119,145,.06) 48%, transparent 78%); box-shadow: inset 3px 0 #00dffb; }
.ranking-position { flex: 0 0 31px; color: #8490a0; font-size: 13px; font-weight: 800; text-align: center; }
.rank-position-1 .ranking-position, .rank-position-2 .ranking-position, .rank-position-3 .ranking-position { font-size: 22px; }
.ranking-item .avatar { flex: 0 0 42px; width: 42px; height: 42px; }
.ranking-person { min-width: 0; flex: 1; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.ranking-person > strong { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: #e7ebf1; font-size: 11px; }
.ranking-person > span { display: block; margin-top: 2px; color: #697586; font-size: 8px; }
.ranking-score { flex: 0 0 auto; min-width: 76px; text-align: right; }
.ranking-score strong { color: var(--orange); font-size: 14px; }
.ranking-score > span { margin-left: 3px; color: #8e98a8; font-size: 8px; }
.ranking-score small { display: block; margin-top: 1px; color: #6f7a88; font-size: 7px; }

.profile-panel { position: relative; overflow: visible; }
.profile-panel > :not(.profile-options-menu) { position: relative; z-index: 1; }
.profile-options-menu {
  position: absolute;
  z-index: 12;
  top: 39px;
  right: 8px;
  width: min(230px, calc(100% - 16px));
  overflow: hidden;
  border: 1px solid #46515f;
  border-radius: 5px;
  background: #111419;
  box-shadow: 0 12px 36px rgba(0,0,0,.72);
}
.profile-options-menu[hidden] { display: none; }
.profile-options-menu button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid #303844;
  background: #111419;
  color: #d6dde6;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
}
.profile-options-menu button:last-child { border-bottom: 0; }
.profile-options-menu button:hover { background: #1b2027; }
.profile-options-menu button svg { width: 16px; height: 16px; color: var(--blue); }
.profile-options-menu button.danger { background: #211116; color: #ff8c98; }
.profile-options-menu button.danger:hover { background: #32161c; }
.profile-options-menu button.danger svg { color: #ff596b; }
.profile-options-menu button.success { background: #10251a; color: #8ff0af; }
.profile-options-menu button.success:hover { background: #173724; }
.profile-options-menu button.success svg { color: #55db84; }
.profile-panel#profile-main-panel > .panel-title { z-index: 201; }
.profile-panel#profile-main-panel > .profile-options-menu {
  z-index: 200 !important;
  overflow: hidden;
  isolation: isolate;
}
.profile-panel#profile-main-panel > :not(.profile-options-menu):not(.panel-title):not(.profile-cover):not(.profile-leaf-effect) { z-index: 1 !important; }
.view[data-page="profile"] .panel-title { min-height: 43px; padding: 8px 10px; font-size: 13px; }
.view[data-page="profile"] .panel-title svg { width: 17px; height: 17px; }
.view[data-page="profile"] .panel-title small { font-size: 10px; }
.view[data-page="profile"] .panel-title .refresh-action { min-height: 31px; font-size: 11px; }
.profile-cover { position: relative; min-height: 0; aspect-ratio: 2 / 1; display: grid; place-items: center; border-bottom: 1px solid var(--line); background-color: #17191e; background-image: radial-gradient(circle at 25% 25%, rgba(255,111,187,.15), transparent 30%), radial-gradient(circle at 75% 70%, rgba(87,166,255,.14), transparent 32%); background-position: center; background-size: cover; background-repeat: no-repeat; color: #9aa4b2; font-family: Georgia, serif; font-size: 12px; letter-spacing: .08em; }
.profile-identity { position: relative; min-height: 82px; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 92px; background: #050607; }
.profile-wall-avatar { position: absolute; left: 11px; bottom: 16px; width: 72px; height: 72px; padding: 0; border-color: #8c98a8; box-shadow: inset 0 0 0 3px #08090b, 0 0 0 2px rgba(255,111,187,.35), 0 0 20px rgba(82,142,255,.25); cursor: zoom-in; }
.profile-wall-avatar:focus-visible { outline: 2px solid #66afff; outline-offset: 3px; }
.profile-identity.has-couple-avatar { min-height: 112px; padding-left: 140px; }
.profile-wall-avatar.profile-couple-avatar { left: 9px; bottom: 7px; width: 122px; height: 122px; overflow: visible; padding: 0; border: 0; border-radius: 0; appearance: none; background: transparent; box-shadow: none; }
.profile-couple-avatar-stack { position: absolute; inset: 9px; display: block; overflow: visible; border: 2px solid #ff82b7; border-radius: 13px; background: #481329; box-shadow: inset 0 0 0 2px rgba(255,255,255,.3), inset 0 0 18px rgba(255,39,132,.75), 0 0 13px rgba(255,76,151,.62), 0 5px 18px rgba(255,70,145,.3); pointer-events: none; }
.profile-couple-avatar-stack:before { content: ""; position: absolute; z-index: 4; inset: 3px; border: 2px solid rgba(255,186,217,.9); border-radius: 9px; box-shadow: inset 0 0 8px 2px rgba(255,40,133,.82), inset 0 0 19px rgba(255,80,156,.62), 0 0 8px rgba(255,87,161,.8); pointer-events: none; }
.profile-couple-avatar-person { position: absolute; top: 3px; bottom: 3px; display: grid; place-items: center; overflow: hidden; box-sizing: border-box; height: auto; border: 0; outline: 0; background: linear-gradient(145deg, #2c8eff, #7555e8 52%, #fb559a); box-shadow: none; color: #fff; font-size: 24px; font-weight: 800; text-shadow: 0 1px 2px #000; transition: filter .18s ease; }
.profile-couple-avatar-person img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; }
.profile-couple-avatar-spouse { z-index: 2; right: 3px; left: 50%; border-radius: 0 8px 8px 0; }
.profile-couple-avatar-owner { z-index: 3; right: 49.5%; left: 3px; border-radius: 8px 0 0 8px; }
.profile-couple-love-vine { position: absolute; z-index: 5; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; }
.profile-couple-love-vine path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.profile-couple-love-vine-shadow { stroke: rgba(119,18,68,.72); stroke-width: 4.2; }
.profile-couple-love-vine-line { stroke: #ff78ad; stroke-width: 2.1; filter: drop-shadow(0 0 3px rgba(255,123,179,.9)); }
.profile-couple-heart { position: absolute; z-index: 6; display: block; color: #ff77aa; font-family: Arial, sans-serif; font-size: 13px; font-style: normal; line-height: 1; text-shadow: 0 1px #8c204c, 0 0 5px rgba(255,155,197,.9); animation: profile-couple-heart-beat 1.8s ease-in-out infinite alternate; }
.profile-couple-heart-one { top: -9px; left: 20px; transform: rotate(-16deg); }
.profile-couple-heart-two { top: 16px; right: -8px; font-size: 10px; animation-delay: -.5s; }
.profile-couple-heart-three { right: 15px; bottom: -9px; transform: rotate(14deg); animation-delay: -.9s; }
.profile-couple-heart-four { bottom: 17px; left: -8px; font-size: 9px; animation-delay: -1.25s; }
@keyframes profile-couple-heart-beat { to { color: #ffd0e2; filter: brightness(1.15); scale: 1.18; } }
.profile-identity.has-couple-avatar .profile-avatar-edit { left: 108px; bottom: 8px; }
.profile-identity.has-couple-avatar .profile-avatar-heart { left: 4px; bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .profile-couple-heart { animation: none; } }
@media (max-width: 430px) { .profile-identity.has-couple-avatar { padding-left: 140px; } .profile-identity.has-couple-avatar .profile-avatar-edit { left: 108px; } }
.profile-inline-photo-edit { position: absolute; z-index: 5; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid rgba(255,255,255,.44); border-radius: 999px; background: rgba(8,10,14,.82); color: #fff; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.55); backdrop-filter: blur(6px); }
.profile-inline-photo-edit[hidden] { display: none !important; }
.profile-inline-photo-edit:hover, .profile-inline-photo-edit:focus-visible { border-color: #76b9ff; background: #1768ad; outline: 0; }
.profile-inline-photo-edit svg { width: 15px; height: 15px; }
.profile-inline-photo-delete { border-color: rgba(255,139,153,.75); background: rgba(89,20,31,.92); color: #ffdce1; }
.profile-inline-photo-delete:hover, .profile-inline-photo-delete:focus-visible { border-color: #ff91a0; background: #a6263a; }
.profile-inline-photo-delete:disabled { opacity: .65; cursor: wait; }
.profile-cover-edit { top: 9px; right: 9px; }
.profile-cover-edit span { font-family: Arial, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0; }
.profile-avatar-edit { left: 62px; bottom: 10px; width: 30px; padding: 0; border-color: #dbe9f7; background: #1768ad; }
.profile-photo-heart { position: absolute; z-index: 6; min-width: 44px; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid rgba(255,255,255,.38); border-radius: 999px; background: rgba(8,10,14,.86); color: #f3f5f8; box-shadow: 0 3px 13px rgba(0,0,0,.55); backdrop-filter: blur(7px); cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.profile-photo-heart[hidden] { display: none !important; }
.profile-photo-heart:hover, .profile-photo-heart:focus-visible { border-color: #ff8aad; background: rgba(74,20,39,.94); outline: 0; transform: translateY(-1px); }
.profile-photo-heart:disabled { opacity: .7; cursor: wait; transform: none; }
.profile-photo-heart svg { width: 15px; height: 15px; color: #ff719b; stroke-width: 2.4; }
.profile-photo-heart b { color: inherit; font-family: Arial, sans-serif; font-size: 11px; line-height: 1; }
.profile-photo-heart.liked { border-color: #ff779f; background: linear-gradient(135deg, #c51f55, #ec4e7c); color: #fff; }
.profile-photo-heart.liked svg { color: #fff; fill: currentColor; }
.profile-cover-heart { right: 9px; bottom: 9px; left: auto; }
.profile-wall-music-button{position:absolute;z-index:7;top:7px;right:67px;width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.48);border-radius:50%;background:rgba(7,10,15,.88);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.58),0 0 0 2px rgba(255,115,174,.12);backdrop-filter:blur(7px);cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.profile-wall-music-button[hidden]{display:none!important}.profile-wall-music-button:hover,.profile-wall-music-button:focus-visible{outline:0;transform:translateY(-1px) scale(1.04);border-color:#ff8fbd;box-shadow:0 5px 16px #000b,0 0 12px #ff5fa45c}.profile-wall-music-disc{width:30px;height:30px;display:grid;place-items:center;overflow:hidden;border:2px solid #ff91bc;border-radius:50%;background:radial-gradient(circle,#ff77ad 0 13%,#251329 14% 34%,#080a0e 35%);box-shadow:inset 0 0 0 2px #0b0c11,0 0 8px #ff60a35c}.profile-wall-music-disc img{width:100%;height:100%;display:block;border-radius:inherit;object-fit:cover}.profile-wall-music-disc img[hidden]{display:none!important}.profile-wall-music-disc svg{width:15px;height:15px;color:#ffd7e7}.profile-wall-music-copy,.profile-wall-music-state{display:none}.profile-wall-music-button.is-playing .profile-wall-music-disc{animation:profile-wall-disc-spin 4s linear infinite}.profile-wall-music-button.is-paused .profile-wall-music-disc{filter:saturate(.65)}
@keyframes profile-wall-disc-spin{to{transform:rotate(360deg)}}
.profile-wall-music-player{position:fixed;width:1px;height:1px;left:-9999px;bottom:-9999px;overflow:hidden;pointer-events:none}
.profile-wall-music-card{width:min(650px,calc(100vw - 18px));max-height:min(82dvh,720px);display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;overflow:hidden}.profile-wall-music-current{margin:10px 11px 0}.profile-wall-music-current[hidden]{display:none!important}.profile-wall-music-current>article{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px;border:1px solid #69425a;border-radius:10px;background:linear-gradient(135deg,#25131f,#10151d)}.profile-wall-music-current img{width:54px;height:54px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #ff83b5,0 0 13px #ff5a9b55;animation:profile-wall-disc-spin 5s linear infinite}.profile-wall-music-current strong,.profile-wall-music-current small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-wall-music-current strong{color:#f7edf2;font-size:13px}.profile-wall-music-current small{margin-top:4px;color:#a895a1;font-size:10px}.profile-wall-music-current em{padding:4px 7px;border-radius:999px;background:#55203b;color:#ffafd0;font-size:9px;font-style:normal;font-weight:800}.profile-wall-music-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:10px 11px 6px}.profile-wall-music-search label{min-width:0;height:39px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid #45505d;border-radius:8px;background:#0d1218}.profile-wall-music-search label:focus-within{border-color:#d85b94;box-shadow:0 0 0 2px #d85b9426}.profile-wall-music-search label svg{width:16px;color:#d57ca5}.profile-wall-music-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#eef1f5;font-size:13px}.profile-wall-music-search button{min-height:39px;display:inline-flex;align-items:center;gap:5px;padding:0 13px}.profile-wall-music-search button svg{width:15px}.profile-wall-music-hint{display:flex;align-items:flex-start;gap:6px;margin:0;padding:0 12px 9px;color:#8d98a6;font-size:10px;line-height:1.45}.profile-wall-music-hint svg{flex:0 0 auto;width:13px}.profile-wall-music-results{min-height:180px;overflow:auto;padding:0 11px 10px}.profile-wall-music-empty{min-height:170px;display:grid;place-items:center;align-content:center;gap:8px;border:1px dashed #39434e;border-radius:10px;color:#768391;text-align:center}.profile-wall-music-empty svg{width:31px;height:31px}.profile-wall-music-results>button{width:100%;display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:9px;margin-top:7px;padding:7px;border:1px solid #323d48;border-radius:9px;background:#10161d;color:#dfe6ed;cursor:pointer;text-align:left}.profile-wall-music-results>button:hover,.profile-wall-music-results>button:focus-visible{outline:0;border-color:#c05286;background:#1e1520}.profile-wall-music-results>button:disabled{opacity:.6;cursor:wait}.profile-wall-music-results>button img{width:72px;height:46px;border-radius:6px;object-fit:cover}.profile-wall-music-results>button span{min-width:0}.profile-wall-music-results>button strong,.profile-wall-music-results>button small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-wall-music-results>button strong{font-size:12px}.profile-wall-music-results>button small{margin-top:4px;color:#8895a3;font-size:9px}.profile-wall-music-results>button>svg{width:18px;color:#ff81b4}.profile-wall-music-card>footer{min-height:48px;display:flex;justify-content:flex-end;align-items:center;padding:7px 11px;border-top:1px solid #2f3740}.profile-wall-music-card>footer button{min-height:33px;display:inline-flex;align-items:center;gap:5px;padding:6px 10px}.profile-wall-music-card>footer svg{width:14px}
.profile-wall-music-upload{padding:10px 11px 0}.profile-wall-music-upload>button{width:100%;min-height:54px;display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #386b63;border-radius:10px;background:linear-gradient(135deg,#102a26,#111821);color:#e6fff9;text-align:left;cursor:pointer}.profile-wall-music-upload>button:hover,.profile-wall-music-upload>button:focus-visible{outline:0;border-color:#58c9b4;box-shadow:0 0 0 2px #58c9b426}.profile-wall-music-upload>button:disabled{opacity:.58;cursor:wait}.profile-wall-music-upload svg{width:24px;height:24px;color:#68e4cc}.profile-wall-music-upload span{min-width:0}.profile-wall-music-upload b,.profile-wall-music-upload small{display:block}.profile-wall-music-upload b{font-size:12px}.profile-wall-music-upload small{margin-top:3px;color:#9ab9b3;font-size:9px}
.profile-wall-music-card{grid-template-rows:auto auto auto auto auto auto minmax(0,1fr) auto}.profile-wall-music-transfer{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:9px;margin:9px 11px 0;padding:10px 10px 14px;overflow:hidden;border:1px solid #396d65;border-radius:10px;background:linear-gradient(135deg,#102720,#101923);box-shadow:0 8px 24px #0004}.profile-wall-music-transfer[hidden]{display:none!important}.profile-wall-music-transfer-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#1c4d43;color:#73efd5}.profile-wall-music-transfer-icon svg{width:19px;height:19px;animation:profile-wall-transfer-breathe 1.2s ease-in-out infinite}.profile-wall-music-transfer-copy{min-width:0}.profile-wall-music-transfer-copy strong,.profile-wall-music-transfer-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-wall-music-transfer-copy strong{color:#eafffa;font-size:12px}.profile-wall-music-transfer-copy small{margin-top:3px;color:#9fc3bb;font-size:9px}.profile-wall-music-transfer time{color:#72dfca;font-size:9px;font-weight:800;white-space:nowrap}.profile-wall-music-transfer-track{position:absolute;right:0;bottom:0;left:0;height:4px;background:#18342f}.profile-wall-music-transfer-track i{position:absolute;top:0;bottom:0;width:38%;border-radius:999px;background:linear-gradient(90deg,transparent,#68e4cc,#7db8ff,transparent);animation:profile-wall-transfer-slide 1.15s ease-in-out infinite}.profile-wall-music-transfer.is-complete{border-color:#48bb78;background:linear-gradient(135deg,#123423,#101b19)}.profile-wall-music-transfer.is-complete .profile-wall-music-transfer-icon{background:#1f6b3c;color:#a5f5bd}.profile-wall-music-transfer.is-complete .profile-wall-music-transfer-track i{width:100%;animation:none;background:#58d486}.profile-wall-music-transfer.is-error{border-color:#a83d55;background:linear-gradient(135deg,#36141d,#19131a)}.profile-wall-music-transfer.is-error .profile-wall-music-transfer-icon{background:#6c2435;color:#ffadc0}.profile-wall-music-transfer.is-error .profile-wall-music-transfer-track i{width:100%;animation:none;background:#dc5574}@keyframes profile-wall-transfer-slide{0%{left:-42%}100%{left:104%}}@keyframes profile-wall-transfer-breathe{50%{transform:translateY(-2px);filter:drop-shadow(0 0 6px #67e5cc)}}@media(prefers-reduced-motion:reduce){.profile-wall-music-transfer-icon svg,.profile-wall-music-transfer-track i{animation:none}.profile-wall-music-transfer-track i{left:31%}}
@media(max-width:520px){.profile-wall-music-button{right:61px;width:36px;height:36px}.profile-wall-music-disc{width:28px;height:28px}.profile-wall-music-card{width:calc(100vw - 8px);max-height:calc(100dvh - 8px)}.profile-wall-music-search{grid-template-columns:1fr}.profile-wall-music-search button{justify-content:center}.profile-wall-music-results>button{grid-template-columns:62px minmax(0,1fr) auto}.profile-wall-music-results>button img{width:62px;height:42px}}
@media(prefers-reduced-motion:reduce){.profile-wall-music-button.is-playing .profile-wall-music-disc,.profile-wall-music-current img{animation:none}}
.profile-avatar-heart { left: 4px; bottom: 5px; height: 27px; min-width: 42px; padding: 0 7px; }
.profile-identity-copy { min-width: 0; flex: 1; }
.profile-identity-copy strong { display: block; color: var(--orange); font-family: Georgia, serif; font-size: 20px; line-height: 1.25; }
.profile-identity-copy > span { display: block; margin-top: 2px; color: var(--green); font-size: 12px; }
.profile-identity-copy > .profile-identity-id { margin-top: 3px; color: #aeb7c2; font-family: Georgia, serif; font-size: 12px; font-weight: 700; letter-spacing: .1px; }
.profile-identity-copy > .profile-id-location-row { min-width: 0; display: flex; align-items: center; gap: 8px; margin-top: 4px; overflow: hidden; color: #aeb7c2; }
.profile-id-location-row .profile-identity-id { flex: 0 0 auto; color: #aeb7c2; font-family: Georgia, serif; font-size: 12px; font-weight: 700; letter-spacing: .1px; white-space: nowrap; }
.profile-id-location-row #profile-online { min-width: 0; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-id-location-row #profile-online:before { content: "·"; flex: 0 0 auto; color: #66717f; }
.profile-identity-copy > .profile-level-mood { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 4px; line-height: 1.35; }
.profile-level-mood b { color: #e0b4ff; }
.profile-level-mood i { color: #66717f; font-style: normal; }
.profile-level-mood em { color: #dce3eb; font-style: normal; }
.profile-identity-copy small { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: #818b98; font-size: 10px; }
.profile-identity-copy small i { width: 6px; height: 6px; border-radius: 50%; background: #6f7782; }
.profile-identity-copy small.online { color: var(--green); }
.profile-identity-copy small.online i { background: var(--green); box-shadow: 0 0 7px var(--green); }
.member-role { color: var(--green); font-family: Georgia, serif; font-size: 12px; }
.profile-bio { min-height: 50px; margin: 0; padding: 12px; color: var(--green); text-align: center; font-family: Georgia, serif; font-size: 14px; line-height: 1.55; }
.profile-system-bot-notice { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 11px; margin: 0 11px 12px; padding: 12px; border: 1px solid #755ac5; border-radius: 9px; background: radial-gradient(circle at 0 0,rgba(151,104,255,.2),transparent 50%),#161224; color: #e9e1ff; box-shadow: inset 0 0 14px rgba(141,95,255,.1); }
.profile-system-bot-notice[hidden] { display: none !important; }
.profile-system-bot-notice > svg { width: 24px; height: 24px; padding: 8px; box-sizing: content-box; border-radius: 50%; background: #6f4ec4; color: #fff; }
.profile-system-bot-notice strong,.profile-system-bot-notice p { display: block; margin: 0; }
.profile-system-bot-notice strong { color: #fff; font-size: 13px; }
.profile-system-bot-notice p { margin-top: 4px; color: #c5b9e5; font-size: 11px; line-height: 1.5; }
.profile-panel.system-bot .profile-cover { background-image: radial-gradient(circle at 50% 40%,rgba(139,92,246,.28),transparent 32%),linear-gradient(135deg,#171124,#080a0d); }
.profile-panel.system-bot .profile-wall-avatar { cursor: default; box-shadow: inset 0 0 0 3px #08090b,0 0 0 2px #8b5cf6,0 0 24px rgba(139,92,246,.45); }
.profile-panel.system-bot .profile-stats button:disabled { opacity: .72; cursor: default; }
.profile-actions .profile-system-bot-action { border-color: #6f55b9; background: #211936; color: #d8c9ff; opacity: 1; }
.system-bot-meta { color: #a990ef !important; }
.profile-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; padding: 0 10px 12px; }
.profile-actions button, .profile-photo-actions button { min-height: 37px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 4px; background: #1a1d22; color: #d3d9e1; cursor: pointer; font-size: 12px; }
.profile-actions button svg, .profile-photo-actions button svg { width: 16px; height: 16px; }
.profile-actions button:disabled { opacity: .55; cursor: not-allowed; }
.profile-actions .gift-action { border-color: #755327; background: #352712; color: #ffd16e; }
.profile-actions .coin-action { border-color: #487b34; background: #1a3717; color: #8ff078; }
.profile-actions .profile-referral-action { border-color: #3979a8; background: #122d43; color: #8fd2ff; }
.profile-actions .friend-accept-action { border-color: #2f68ae; background: #174d8b; color: #fff; }
.profile-actions .profile-block-action { border-color: #7b3540; background: #32171c; color: #ff8892; }
.profile-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; padding: 1px; border-top: 1px solid #29313b; background: #29313b; }
.profile-stats button { min-width: 0; min-height: 86px; display: grid; grid-template-rows: 19px 25px auto; place-items: center; align-content: center; gap: 2px; padding: 9px 4px; border: 0; background: linear-gradient(160deg, #151a20, #0b0e12); color: #9da9b6; cursor: pointer; text-align: center; transition: background .18s ease, color .18s ease, transform .18s ease; }
.profile-stats button:hover { z-index: 1; background: linear-gradient(160deg, #203348, #111923); color: #e6edf5; transform: translateY(-1px); }
.profile-stats button:focus-visible { z-index: 2; outline: 2px solid #4b9be8; outline-offset: -2px; }
.profile-stats button > svg { width: 17px; height: 17px; color: #6e9fd3; }
.profile-stats button:nth-child(2) > svg { color: #ef7893; }
.profile-stats button:nth-child(3) > svg { color: #f4ca57; }
.profile-stats button:nth-child(4) > svg { color: #6ed6a4; }
.profile-stats button:nth-child(5) > svg { color: #9c8df1; }
.profile-stats button:nth-child(6) > svg { color: #f19a6c; }
.profile-stats button:nth-child(7) > svg { color: #4fc3f7; }
.profile-stats b { display: block; color: #f3f7fb; font-family: Georgia, serif; font-size: 20px; line-height: 1; }
.profile-stats button > span { min-width: 0; color: inherit; font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; }
.profile-actions .follow-action { border-color: #2f6b58; background: #15352c; color: #86e6bf; }
.profile-actions .follow-action.following { border-color: #365778; background: #17283a; color: #a8d4ff; }
.referral-share-card { width: min(520px, calc(100vw - 24px)); overflow: hidden; }
.referral-share-body { display: grid; gap: 12px; padding: 14px; }
.referral-share-intro { display: grid; grid-template-columns: 50px minmax(0,1fr); align-items: center; gap: 11px; padding: 12px; border: 1px solid #385d7b; border-radius: 10px; background: radial-gradient(circle at 0 0,rgba(48,157,232,.2),transparent 54%),#111c27; }
.referral-share-intro > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#2c9bdd,#176294); color: #fff; box-shadow: 0 7px 18px rgba(30,135,202,.28); }
.referral-share-intro > span svg { width: 23px; height: 23px; }
.referral-share-intro strong,.referral-share-intro p { display: block; margin: 0; }
.referral-share-intro strong { color: #eff9ff; font-size: 15px; }
.referral-share-intro p { margin-top: 4px; color: #a8c6d9; font-size: 11px; line-height: 1.5; }
.referral-qr-block { display: grid; grid-template-columns: 148px minmax(0,1fr); align-items: center; gap: 13px; padding: 11px; border: 1px solid #3a4652; border-radius: 10px; background: #0d1218; }
.referral-qr-image { width: 148px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 7px solid #fff; border-radius: 9px; background: #fff; box-sizing: border-box; }
.referral-qr-image img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.referral-qr-block strong,.referral-qr-block p { display: block; margin: 0; }
.referral-qr-block strong { color: #edf8ff; font-size: 14px; }
.referral-qr-block p { margin-top: 5px; color: #95a9b9; font-size: 10px; line-height: 1.5; }
.referral-qr-block button { width: max-content; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0 10px; border: 1px solid #3d7396; border-radius: 7px; background: #16334a; color: #9cd9ff; cursor: pointer; font-size: 10px; font-weight: 700; }
.referral-qr-block button:disabled { opacity: .65; cursor: wait; }
.referral-qr-block button svg { width: 14px; height: 14px; }
.referral-share-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.referral-share-stats article { min-width: 0; padding: 10px 5px; border: 1px solid #303b47; border-radius: 8px; background: #10151b; text-align: center; }
.referral-share-stats b,.referral-share-stats span { display: block; }
.referral-share-stats b { color: #72d7ff; font-size: 17px; }
.referral-share-stats span { margin-top: 3px; color: #8e9aa7; font-size: 9px; }
.referral-share-field { display: grid; gap: 5px; color: #b5c0ca; font-size: 10px; font-weight: 700; }
.referral-share-field > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
.referral-share-field input { min-width: 0; height: 40px; padding: 0 11px; border: 1px solid #374452; border-radius: 7px; background: #090d12; color: #e7f5ff; font-size: 12px; }
.referral-share-field button,.referral-native-share { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #3979a8; border-radius: 7px; background: #153a55; color: #a9e0ff; cursor: pointer; font-size: 11px; font-weight: 700; }
.referral-share-field button { min-width: 92px; padding: 0 10px; }
.referral-share-field button svg,.referral-native-share svg { width: 15px; height: 15px; }
.referral-native-share { min-height: 43px; width: 100%; background: linear-gradient(135deg,#1977b5,#235fc1); color: #fff; }
@media (max-width: 460px) {
  .referral-share-body { padding: 11px; }
  .referral-qr-block { grid-template-columns: 124px minmax(0,1fr); gap: 10px; padding: 9px; }
  .referral-qr-image { width: 124px; }
  .referral-share-field button { min-width: 42px; }
  .referral-share-field button span { display: none; }
}
.received-gifts { display: flex; flex-wrap: wrap; gap: 8px; min-height: 70px; align-items: center; padding: 12px; }
.received-gift { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #181b20; font-size: 26px; isolation: isolate; }
.received-gift .gift-icon { position: relative; z-index: 1; display: inline-block; }
.received-gift b { color: #dce2e9; font-family: Georgia, serif; font-size: 14px; }
.no-gifts { color: var(--muted); font-size: 11px; }
.profile-info-grid p { min-height: 41px; display: grid; grid-template-columns: 21px minmax(90px, auto) 1fr; align-items: center; gap: 7px; margin: 0; padding: 8px 11px; border-bottom: 1px solid var(--line-soft); color: var(--green); font-family: Georgia, serif; font-size: 13px; }
.profile-info-grid p:last-child { border-bottom: 0; }
.profile-info-grid svg { width: 17px; height: 17px; color: var(--green); }
.profile-info-grid b { color: #dce1e8; font-weight: 400; }
.profile-info-grid .member-role { font-weight: 700; }
.profile-relationship-value { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.profile-relationship-value > b { min-width: 0; line-height: 1.45; }
.profile-relationship-partner { display: inline; padding: 0; border: 0; background: transparent; color: #ff9aa9; cursor: pointer; font: inherit; font-weight: 700; }
.profile-relationship-partner:hover { color: #ffd0d7; text-decoration: underline; }
.profile-marriage-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.profile-marriage-days { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; padding: 3px 8px; border: 1px solid rgba(255,117,172,.48); border-radius: 999px; background: rgba(255,83,151,.12); color: #db2f78; font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; vertical-align: middle; }
.profile-marriage-days > span { color: #f0448a; font-size: 13px; line-height: 1; }
[data-theme="dark"] .profile-marriage-days { border-color: rgba(255,137,187,.55); background: rgba(255,90,158,.18); color: #ff9bc4; }
.profile-marriage-action, .profile-actions .profile-marriage-action { flex: 0 0 auto; min-height: 34px; padding: 6px 13px; border: 1px solid #ff7db3; border-radius: 8px; background: linear-gradient(180deg,#ff74b5,#d93682); color: #fff; cursor: pointer; font-size: 13px; font-weight: 900; line-height: 1.15; text-shadow: 0 1px 2px rgba(85,0,38,.42); box-shadow: 0 5px 14px rgba(236,58,137,.28); }
.profile-marriage-action:hover, .profile-actions .profile-marriage-action:hover { border-color: #ffc0db; background: linear-gradient(180deg,#ff91c5,#e54891); }
.profile-marriage-action-divorce, .profile-actions .profile-marriage-action-divorce { border-color: #a6384b; background: linear-gradient(180deg,#b52e45,#751a2a); box-shadow: 0 4px 12px rgba(168,31,55,.25); }
.profile-marriage-action-divorce:hover, .profile-actions .profile-marriage-action-divorce:hover { border-color: #e25c70; background: linear-gradient(180deg,#d43d56,#8d2032); }
.profile-marriage-action-reject, .profile-actions .profile-marriage-action-reject { border-color: #6d6d78; background: linear-gradient(180deg,#666671,#42424b); box-shadow: none; }
.profile-marriage-action-reject:hover, .profile-actions .profile-marriage-action-reject:hover { border-color: #9999a5; background: linear-gradient(180deg,#777784,#50505b); }
.profile-marriage-action:disabled { opacity: .6; cursor: wait; }
.profile-marriage-action[hidden] { display: none; }
.profile-settings-panel[hidden] { display: none; }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.profile-form { padding: 16px; }
.profile-form label { margin-bottom: 14px; font-size: 12px; }
.profile-form input, .profile-form textarea, .profile-form select { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 11px; border: 1px solid #39424e; border-radius: 5px; background: #17191e; color: var(--text); font-size: 14px; }
.profile-form textarea { min-height: 92px; }
.profile-photo-actions { display: flex; gap: 7px; margin-bottom: 13px; }
.profile-form > .primary-button { width: 100%; min-height: 44px; font-size: 13px; }
.wall-panel .post-composer { margin: 0; border-top: 0; }
.composer-restricted { border-color: #6b3038; background: #1d1014; color: #ff9aa5; line-height: 1.5; text-align: center; }

.ban-account-card { width: min(100%, 520px); max-height: min(90vh, 860px); overflow-y: auto; }
.ban-account-target { min-height: 64px; display: grid; grid-template-columns:auto minmax(0,1fr); align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line); background: #090b0e; }
.ban-account-target > span { color: #ff8495; font-size: 12px; font-weight: 900; letter-spacing: .5px; }
.ban-account-target > strong { display: flex; align-items: center; min-width: 0; color: #f5f7fa; font-family: Georgia, serif; font-size: 18px; }
.ban-current-state { display: flex; align-items: flex-start; gap: 8px; margin: 10px 10px 0; padding: 9px 10px; border: 1px solid #7a3d45; border-radius: 5px; background: #281218; color: #ffb0b8; }
.ban-current-state[hidden] { display: none; }
.ban-current-state > svg { flex: 0 0 auto; width: 17px; height: 17px; color: #ff6676; }
.ban-current-state strong, .ban-current-state span { display: block; }
.ban-current-state strong { color: #ffe9eb; font-size: 11px; }
.ban-current-state span { margin-top: 2px; font-size: 9px; line-height: 1.45; }
.ban-account-field { display: block; padding: 10px 10px 0; color: var(--green); font-size: 13px; font-weight: 700; }
.ban-account-field b { color: #ff6676; }
.ban-account-field select, .ban-account-card .ban-account-field textarea { display: block; width: 100%; min-height: 42px; margin: 5px 0 0; padding: 8px 10px; border: 1px solid #414b58; border-radius: 5px; outline: 0; background: #171b20; color: #f2f5f8; font: inherit; font-weight: 400; }
.ban-account-card .ban-account-field textarea { min-height: 88px; resize: vertical; }
.ban-account-field select:focus, .ban-account-card .ban-account-field textarea:focus { border-color: #b64a58; box-shadow: 0 0 0 2px rgba(255,89,107,.1); }
.ban-account-card > .ban-submit { min-height: 42px; margin-top: 10px; border-color: #a13d4a; background: #8c2936; }
.ban-account-card > .ban-submit:hover { background: #a93645; }
.active-ban-section { margin-top: 12px; border-top: 1px solid var(--line); background: #0a0d10; }
.active-ban-section > div:first-child { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--line-soft); }
.active-ban-section > div:first-child strong { color: #f1f4f8; font-size: 14px; }
.active-ban-section > div:first-child small { color: #9aa5b2; font-size: 11px; }
.active-ban-list { max-height: 260px; overflow-y: auto; }
.active-ban-item { display: grid; grid-template-columns:minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border-bottom: 1px solid var(--line-soft); }
.active-ban-item:last-child { border-bottom: 0; }
.active-ban-item > div { min-width: 0; }
.active-ban-item span, .active-ban-item strong, .active-ban-item small { display: block; }
.active-ban-item span { color: #ff8495; font-size: 10px; font-weight: 900; }
.active-ban-item strong { margin-top: 2px; color: #eef2f7; font-size: 14px; }
.active-ban-item small { margin-top: 3px; color: #9aa4b1; font-size: 11px; line-height: 1.4; }
.active-ban-item > button { min-height: 36px; display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid #3b8857; border-radius: 6px; background: #173a23; color: #91efae; cursor: pointer; font-size: 12px; font-weight: 800; }
.active-ban-item > button:hover { background: #20502f; }
.active-ban-item > button:disabled { opacity: .55; cursor: wait; }
.active-ban-item > button svg { width: 15px; height: 15px; }
.ban-history-section { border-top: 1px solid var(--line); background: #080a0d; }
.ban-history-section > div:first-child { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); }
.ban-history-section > div:first-child strong { color: #eef2f7; font-size: 11px; }
.ban-history-section > div:first-child small { color: #8b96a4; font-size: 9px; }
.ban-history-list { max-height: 210px; overflow-y: auto; }
.ban-history-item { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
.ban-history-item:last-child { border-bottom: 0; }
.ban-history-item > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ban-history-item strong { color: #ff8996; font-size: 11px; }
.ban-history-item time { color: #778391; font-size: 8px; text-align: right; }
.ban-history-item p { margin: 4px 0; color: #d9dfe7; font-size: 10px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ban-history-item small { color: #7f8a98; font-size: 8px; }
.ban-history-empty { padding: 18px 10px; color: #7f8a98; font-size: 10px; text-align: center; }

.account-menu-list { padding: 5px 0; }
.account-menu-list > button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 32px 1fr 18px; align-items: center; gap: 8px; padding: 8px 11px; border: 0; border-bottom: 1px solid var(--line-soft); background: #0b0d10; color: #dce2e9; text-align: left; cursor: pointer; }
.account-menu-list > button[hidden] { display: none; }
.account-menu-list > button:hover { background: #15191e; }
.account-menu-list > button > svg:first-child { width: 20px; color: var(--green); }
.account-menu-list > button > svg:last-child { width: 15px; color: #687381; }
.account-menu-list > button span { min-width: 0; }
.account-menu-list > button strong { display: block; color: #eef2f7; font-family: Georgia, serif; font-size: 12px; }
.account-menu-list > button small { display: block; margin-top: 3px; color: #747f8d; font-size: 8px; }
.account-menu-list hr { height: 7px; margin: 0; border: 0; border-block: 1px solid var(--line); background: #050607; }
.account-menu-list > button.danger-menu-item > svg:first-child, .account-menu-list > button.danger-menu-item strong { color: #ff7885; }
.account-menu-overlay { align-items: start; padding-top: max(14px, env(safe-area-inset-top)); }
.account-menu-overlay .account-menu-panel { width: min(100%, 560px); }
.account-menu-overlay .account-menu-list { max-height: calc(86vh - 42px); overflow: auto; }

.account-switch-overlay { align-items: flex-start; padding-top: max(18px, env(safe-area-inset-top)); }
.account-switch-card { width: min(94vw, 520px); overflow: hidden; border-color: #365267; box-shadow: 0 24px 70px #000c; }
.account-switch-intro { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #263642; background: linear-gradient(135deg,#102635,#101820); }
.account-switch-intro > svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: #ffc84a1c; color: #ffc84a; }
.account-switch-intro span { min-width: 0; display: grid; gap: 2px; }
.account-switch-intro strong { color: #f4f8fb; font-size: 11px; }
.account-switch-intro small { color: #8fa2b1; font-size: 9px; }
.account-switch-list { display: grid; gap: 7px; padding: 10px; background: #090d11; }
.account-switch-item { min-width: 0; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid #283540; border-radius: 9px; background: linear-gradient(135deg,#151b21,#0d1115); }
.account-switch-item.is-current { border-color: #2e7655; background: linear-gradient(135deg,#11261e,#0e1715); box-shadow: inset 3px 0 #42d889; }
.account-switch-avatar { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 2px solid #586978; border-radius: 50%; color: white; font-size: 15px; font-weight: 900; }
.account-switch-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-switch-identity { min-width: 0; display: grid; gap: 3px; }
.account-switch-identity strong { overflow: hidden; color: #f2f6fa; font: 700 12px Georgia,serif; text-overflow: ellipsis; white-space: nowrap; }
.account-switch-identity small { overflow: hidden; color: #788794; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.account-switch-actions { display: flex; align-items: center; gap: 5px; }
.account-switch-actions em { display: inline-flex; align-items: center; gap: 3px; padding: 5px 7px; border-radius: 20px; background: #34c77a1c; color: #68e7a5; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.account-switch-actions em svg { width: 11px; }
.account-switch-actions button { height: 31px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 6px; cursor: pointer; font-size: 9px; font-weight: 800; }
.account-switch-actions button:disabled { opacity: .55; cursor: wait; }
.account-switch-go { padding: 0 9px; border: 1px solid #2771b8; background: #185d9d; color: #fff; }
.account-switch-go:hover { background: #2076c2; }
.account-switch-go svg,.account-switch-unlink svg { width: 13px; }
.account-switch-unlink { width: 31px; border: 1px solid #633740; background: #261419; color: #ff8490; }
.account-switch-unlink:hover { background: #3a1b23; }
.account-switch-loading,.account-switch-error { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #8d9aa6; font-size: 10px; text-align: center; }
.account-switch-loading svg { width: 16px; animation: spin 1s linear infinite; }
.account-switch-error { color: #ff8f99; }
.account-switch-error svg { width: 17px; flex: 0 0 auto; }
.account-switch-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 11px; border-top: 1px solid #26323b; background: #11161b; }
.account-switch-form header { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.account-switch-form header span { display: inline-flex; align-items: center; gap: 5px; color: #dce5ec; font-size: 10px; font-weight: 900; }
.account-switch-form header svg { width: 15px; color: #57d79a; }
.account-switch-form header small { color: #7f8c97; font-size: 8px; }
.account-switch-form label { min-width: 0; display: grid; gap: 5px; }
.account-switch-form label > span { color: #93a0aa; font-size: 8px; font-weight: 700; }
.account-switch-form input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #34434f; border-radius: 7px; outline: 0; background: #080c0f; color: #f2f5f7; font-size: 10px; }
.account-switch-form input:focus { border-color: #2e8ed5; box-shadow: 0 0 0 2px #2e8ed51c; }
.account-switch-password { position: relative; }
.account-switch-password input { padding-right: 38px; }
.account-switch-password button { position: absolute; top: 3px; right: 3px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #7f8d99; cursor: pointer; }
.account-switch-password button svg { width: 15px; }
.account-switch-form > button[type="submit"] { grid-column: 1/-1; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #238657; border-radius: 7px; background: linear-gradient(#2c9d68,#20764e); color: white; cursor: pointer; font-size: 10px; font-weight: 900; }
.account-switch-form > button[type="submit"]:hover { filter: brightness(1.1); }
.account-switch-form > button[type="submit"] svg { width: 15px; }
.account-switch-form > p { grid-column: 1/-1; display: flex; align-items: flex-start; gap: 5px; margin: 0; color: #75838f; font-size: 8px; line-height: 1.4; }
.account-switch-form > p svg { width: 13px; flex: 0 0 auto; color: #55c98f; }
.account-switch-form.is-full label,.account-switch-form.is-full > button[type="submit"] { display: none; }

@media (max-width: 520px) {
  .account-switch-overlay { padding: 8px 5px max(8px,env(safe-area-inset-bottom)); }
  .account-switch-card { width: 100%; max-height: calc(100dvh - 16px); overflow-y: auto; }
  .account-switch-form { grid-template-columns: 1fr; }
  .account-switch-form header,.account-switch-form > button[type="submit"],.account-switch-form > p { grid-column: 1; }
  .account-switch-item { grid-template-columns: 40px minmax(0,1fr) auto; gap: 7px; padding: 7px; }
  .account-switch-avatar { width: 38px; height: 38px; }
  .account-switch-go span { display: none; }
  .account-switch-go { width: 32px; padding: 0; }
}

.home-search-form { padding: 12px; border-bottom: 1px solid var(--line); }
.home-search-form label { display: block; margin-bottom: 6px; color: var(--green); font-size: 10px; }
.home-search-form > div { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.home-search-form input { min-width: 0; height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; outline: 0; background: #17191e; color: #edf1f6; }
.home-search-form input:focus { border-color: #4c7db1; }
.home-search-form button { display: inline-flex; align-items: center; gap: 5px; padding: 0 13px; border: 1px solid #3164a3; border-radius: 4px; background: #1f6dd6; color: white; cursor: pointer; font-weight: 700; }
.home-search-form button svg { width: 15px; }
.search-home-results { min-height: 145px; }
.friend-request-panel[hidden] { display: none; }
.friend-request-panel { margin-bottom: 9px; }
.friend-request-panel .member-list { min-height: 0; }
.friends-overview-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin-bottom: 9px; padding: 7px; }
.friends-overview-tabs button { min-width: 0; min-height: 48px; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid #343d48; border-radius: 7px; background: #11161c; color: #929daa; cursor: pointer; font-size: 10px; font-weight: 800; text-align: left; }
.friends-overview-tabs button:hover { border-color: #55708d; color: #e5edf6; }
.friends-overview-tabs button.active { border-color: #3e86c6; background: #14283a; color: #bfe1ff; box-shadow: inset 0 0 0 1px rgba(83,169,240,.12); }
.friends-overview-tabs button > svg { width: 17px; }
.friends-overview-tabs button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friends-overview-tabs button > b { min-width: 20px; padding: 2px 5px; border-radius: 999px; background: #252d37; color: #b9c6d4; font-size: 9px; text-align: center; }
.friends-overview-tabs button.active > b { background: #2b6da5; color: #fff; }
.friends-tab-pane[hidden] { display: none !important; }
.friend-request-actions { flex: 0 0 auto; display: flex; gap: 4px; }
.friend-request-actions button { display: inline-flex; align-items: center; gap: 3px; color: #aeb8c5; }
.friend-request-actions button.accept { border-color: #2d6e43; background: #173b23; color: #77e895; }
.friend-request-actions button svg { width: 12px; }

.coming-soon-panel { min-height: 310px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 24px; text-align: center; }
.view.active > .coming-soon-panel { min-height: 0; flex: 1 1 auto; margin-bottom: 0; border-bottom-color: transparent; }
.coming-soon-panel > svg { width: 54px; height: 54px; color: var(--green); filter: drop-shadow(0 0 16px rgba(65,230,106,.25)); }
.coming-soon-panel strong { color: #eff3f8; font-family: Georgia, serif; font-size: 24px; }
.coming-soon-panel p { max-width: 360px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.coming-soon-panel span { padding: 5px 9px; border: 1px solid #6c5726; border-radius: 999px; background: #2c2411; color: #f5d86a; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.admincp-panel > svg { color: var(--role-admin); filter: drop-shadow(0 0 16px rgba(255,77,96,.28)); }
.admincp-shell { overflow: hidden; }
.admincp-title { min-height: 45px; color: #ff7180; }
.admincp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 1px; border-bottom: 1px solid var(--line); background: #303741; }
.admincp-tabs button { min-width: 0; min-height: 55px; display: flex; align-items: center; justify-content: flex-start; gap: 7px; padding: 8px 9px; border: 0; background: #111419; color: #aab4c1; cursor: pointer; font-size: 12px; font-weight: 700; text-align: left; }
.admincp-tabs button:hover { background: #1a2028; color: #fff; }
.admincp-tabs button.active { background: linear-gradient(135deg, #3a161d, #21151a); color: #ff8f9a; box-shadow: inset 3px 0 #ff5365; }
.admincp-tabs button svg { flex: 0 0 auto; width: 17px; height: 17px; }
.admincp-content { min-height: 430px; background: #07090b; }
.admin-section-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 100% 0, rgba(255,64,88,.1), transparent 48%), #0e1115; }
.admin-section-head > div { min-width: 0; }
.admin-section-head strong, .admin-section-head span { display: block; }
.admin-section-head strong { color: #f4f6f9; font-size: 17px; }
.admin-section-head span { margin-top: 3px; color: #8f9aa8; font-size: 11px; line-height: 1.45; }
.admin-section-head > em { flex: 0 0 auto; padding: 5px 8px; border: 1px solid #6c3c43; border-radius: 999px; background: #2a1419; color: #ff9aa5; font-size: 10px; font-style: normal; font-weight: 800; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 10px; }
.admin-stat-card { min-width: 0; min-height: 92px; display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid #343d49; border-radius: 5px; background: linear-gradient(145deg, #151a20, #0e1115); }
.admin-stat-card > svg { flex: 0 0 auto; width: 21px; height: 21px; color: #ff6575; }
.admin-stat-card > div { min-width: 0; }
.admin-stat-card span, .admin-stat-card strong, .admin-stat-card small { display: block; }
.admin-stat-card span { color: #93a0af; font-size: 10px; }
.admin-stat-card strong { margin-top: 4px; color: #fff; font-size: 18px; line-height: 1.2; }
.admin-stat-card small { margin-top: 4px; color: #6f7b89; font-size: 9px; }
.admin-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 10px 10px; }
.admin-subpanel { overflow: hidden; border: 1px solid #333c47; border-radius: 5px; background: #0c0f13; }
.admin-subpanel > header { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 10px; border-bottom: 1px solid #303844; background: #15191e; }
.admin-subpanel > header strong { color: #e9edf2; font-size: 12px; }
.admin-subpanel > header small { display: block; margin-top: 2px; color: #7f8a98; font-size: 9px; }
.admin-subpanel > header button, .admin-subpanel > header em { padding: 3px 7px; border: 1px solid #44505e; border-radius: 3px; background: #20262e; color: #9fc8ff; cursor: pointer; font-size: 9px; font-style: normal; }
.admin-module-list > article { min-height: 49px; display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-bottom: 1px solid #272e37; }
.admin-module-list > article:last-child { border-bottom: 0; }
.admin-module-list > article > svg { flex: 0 0 auto; width: 17px; color: #5aa9ff; }
.admin-module-list > article > div { min-width: 0; flex: 1; }
.admin-module-list strong, .admin-module-list span { display: block; }
.admin-module-list strong { color: #dce2e9; font-size: 11px; }
.admin-module-list span { color: #758190; font-size: 9px; }
.admin-module-list em { color: #6ce68e; font-size: 9px; font-style: normal; white-space: nowrap; }
.admin-module-list button { padding: 4px 7px; border: 1px solid #3d4b5b; border-radius: 3px; background: #172435; color: #8bc4ff; cursor: pointer; font-size: 9px; }
.admin-settings-form, .admin-editor-form { padding: 10px; }
.admin-settings-form fieldset { margin: 0 0 10px; padding: 10px; border: 1px solid #343e4a; border-radius: 5px; background: #0d1014; }
.admin-settings-form legend { padding: 0 6px; color: #ff8995; font-size: 12px; font-weight: 800; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.admin-form-grid > label, .admin-user-edit label, .admin-user-tools label { min-width: 0; color: #aab5c2; font-size: 10px; }
.admin-form-grid > label.wide, .admin-form-grid > .admin-switch.wide { grid-column: 1 / -1; }
.admin-form-grid input, .admin-form-grid select, .admin-form-grid textarea, .admin-user-edit input, .admin-user-edit select, .admin-user-tools input, .admin-search-form input { width: 100%; min-height: 40px; margin-top: 4px; padding: 7px 9px; border: 1px solid #3c4653; border-radius: 4px; outline: 0; background: #15191e; color: #f0f3f7; font-size: 13px; }
.admin-form-grid textarea { min-height: 76px; resize: vertical; }
.admin-form-grid input:focus, .admin-form-grid select:focus, .admin-form-grid textarea:focus, .admin-user-edit input:focus, .admin-user-tools input:focus { border-color: #b64c59; box-shadow: 0 0 0 2px rgba(255,83,101,.08); }
.admin-switch { min-height: 50px; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #343e49; border-radius: 4px; background: #12161b; cursor: pointer; }
.admin-switch input { flex: 0 0 auto; width: 19px; height: 19px; min-height: 0; margin: 0; accent-color: #e84f60; }
.admin-switch span, .admin-switch strong, .admin-switch small { display: block; }
.admin-switch span { min-width: 0; flex: 1; }
.admin-switch strong { color: #e7ebf0; font-size: 11px; }
.admin-switch small { color: #778392; font-size: 9px; }
.admin-settings-form > .primary-button { width: 100%; min-height: 42px; }
.admin-search-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); }
.admin-search-form input { margin: 0; }
.admin-search-form button, .admin-user-edit button, .admin-user-tools button, .admin-catalog-list button, .admin-file-list button, .admin-game-list button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 10px; border: 1px solid #3b6088; border-radius: 4px; background: #163456; color: #9dceff; cursor: pointer; font-size: 10px; font-weight: 700; }
.admin-search-form button svg, .admin-user-edit button svg, .admin-user-tools button svg, .admin-catalog-list button svg, .admin-file-list button svg, .admin-game-list button svg { width: 14px; height: 14px; }
.admin-user-list { display: grid; gap: 9px; padding: 10px; }
.admin-user-card { overflow: hidden; border: 1px solid #37414d; border-radius: 6px; background: #0d1014; }
.admin-user-card > header { min-height: 62px; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-bottom: 1px solid #303843; background: #14181d; }
.admin-user-card > header > button { min-width: 0; flex: 1; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.admin-user-card > header > button strong { display: flex; align-items: center; color: #f0f3f7; font-size: 13px; }
.admin-user-card > header > button span { display: block; color: #7e8a98; font-size: 9px; }
.admin-user-card > header > em { font-size: 10px; font-style: normal; font-weight: 800; }
.admin-user-ban { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 7px 10px; border-bottom: 1px solid #5d2d35; background: #211116; color: #ff9aa5; font-size: 9px; }
.admin-user-ban svg { flex: 0 0 auto; width: 14px; }
.admin-user-edit { display: grid; grid-template-columns: 1.5fr 1.5fr .8fr .6fr auto; align-items: end; gap: 7px; padding: 9px; }
.admin-user-edit input, .admin-user-edit select { min-height: 37px; font-size: 11px; }
.admin-user-tools { display: grid; grid-template-columns: 1.4fr .8fr; gap: 8px; padding: 0 9px 9px; }
.admin-user-tools form { display: grid; grid-template-columns: 1fr 1.4fr auto auto; align-items: end; gap: 6px; padding: 8px; border: 1px solid #2f3741; border-radius: 4px; background: #090b0e; }
.admin-user-tools form[data-admin-password-form], .admin-user-tools form[data-admin-exclusive-badge-form] { grid-template-columns: 1fr auto; }
.admin-user-tools input { min-height: 36px; font-size: 11px; }
.admin-user-tools strong { align-self: center; color: #f4dc5f; font-size: 11px; white-space: nowrap; }
.admin-coin-history { margin: 0 10px 10px; }
.admin-table-scroll { overflow-x: auto; }
.admin-table-scroll table { width: 100%; border-collapse: collapse; color: #bbc5d1; font-size: 10px; }
.admin-table-scroll th, .admin-table-scroll td { padding: 8px 9px; border-bottom: 1px solid #29313a; text-align: left; white-space: nowrap; }
.admin-table-scroll th { background: #11151a; color: #8f9ba9; font-size: 9px; }
.admin-table-scroll td small { display: block; color: #718090; }
.positive { color: #6fea91 !important; }
.negative { color: #ff7180 !important; }
.admin-editor-form { margin: 10px; border: 1px solid #39434f; border-radius: 6px; background: #0d1014; }
.admin-editor-form .admin-form-grid { margin-bottom: 10px; }
.admin-form-actions { display: flex; justify-content: flex-end; gap: 7px; }
.admin-form-actions button { min-height: 40px; padding: 6px 12px; border: 1px solid #404b58; border-radius: 4px; background: #181d23; color: #aeb9c6; cursor: pointer; }
.admin-catalog-list, .admin-game-list { display: grid; gap: 7px; padding: 0 10px 10px; }
.admin-catalog-list > article { min-height: 68px; display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid #343d48; border-radius: 5px; background: #101419; }
.admin-item-preview { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border: 1px solid #3b4653; border-radius: 5px; background: #080a0d; font-size: 20px; }
.admin-item-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.admin-catalog-list > article > div:nth-child(2) { min-width: 0; flex: 1; }
.admin-catalog-list strong, .admin-catalog-list span, .admin-catalog-list small { display: block; }
.admin-catalog-list strong { color: #eef2f6; font-size: 12px; }
.admin-catalog-list span { color: #8190a0; font-size: 9px; }
.admin-catalog-list small { color: #e3c95e; font-size: 9px; }
.admin-storage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 10px; }
.admin-storage-grid button { min-height: 66px; display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid #35404d; border-radius: 5px; background: #11151a; color: #aab5c2; cursor: pointer; text-align: left; }
.admin-storage-grid button.active { border-color: #3f81c4; background: #11253a; color: #9bcfff; }
.admin-storage-grid button > svg { flex: 0 0 auto; width: 23px; }
.admin-storage-grid span, .admin-storage-grid strong, .admin-storage-grid small { display: block; }
.admin-storage-grid span { min-width: 0; }
.admin-storage-grid strong { color: #edf1f5; font-size: 11px; }
.admin-storage-grid small { color: #788594; font-size: 9px; }
.admincp-content > .admin-subpanel { margin: 0 10px 10px; }
.admin-file-list { max-height: 480px; overflow-y: auto; }
.admin-file-list > article { min-height: 50px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid #29313a; }
.admin-file-list > article > svg { flex: 0 0 auto; width: 16px; color: #7e8b9a; }
.admin-file-list > article > div { min-width: 0; flex: 1; }
.admin-file-list strong, .admin-file-list span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-file-list strong { color: #dce2e9; font-size: 10px; }
.admin-file-list span { color: #74808e; font-size: 8px; }
.admin-file-list button { border-color: #75404a; background: #28151a; color: #ff8c98; }
.admin-cache-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.admin-cache-actions button { min-height: 90px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 12px; border: 1px solid #36537a; border-radius: 5px; background: #111e2d; color: #90c6ff; cursor: pointer; text-align: left; }
.admin-cache-actions button.danger { border-color: #75404a; background: #28151a; color: #ff929d; }
.admin-cache-actions svg { width: 23px; }
.admin-cache-actions strong { color: #edf2f7; font-size: 12px; }
.admin-cache-actions span { color: #7f8b99; font-size: 9px; }
.admin-module-form { border-color: #3a5070; }
.admin-game-list > article { padding: 10px; border: 1px solid #37414d; border-radius: 5px; background: #0e1216; }
.admin-game-list header { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.admin-game-list header strong, .admin-game-list header span { display: block; }
.admin-game-list header strong { color: #f0f3f7; font-size: 13px; }
.admin-game-list header span { color: #7f8c9b; font-size: 9px; }
.admin-game-list p { margin: 8px 0 3px; color: #adb7c4; font-size: 10px; }
.admin-game-list > article > small { color: #6f7c8b; font-size: 8px; }
.admin-game-list > article > div:last-child { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.admin-game-module { padding: 4px 7px; border: 1px solid #3c4856; border-radius: 999px; background: #161b21; color: #8e9aa8; font-size: 8px; }
.admin-game-module b { margin-right: 4px; color: #77b9ff; }
.admin-game-control-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 10px; }
.admin-game-control-grid > article { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: 10px; min-height: 94px; padding: 11px; align-items: center; border: 1px solid #35414d; border-radius: 7px; background: linear-gradient(145deg,#12171c,#0c1014); }
.admin-game-control-grid > article.is-open { border-color: #315f43; box-shadow: inset 3px 0 #43b76b; }
.admin-game-control-grid > article.is-closed { border-color: #633a42; box-shadow: inset 3px 0 #d85260; }
.admin-game-control-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #465462; border-radius: 8px; background: #192028; color: #8bc7ff; }
.admin-game-control-icon svg { width: 23px; height: 23px; }
.admin-game-control-grid article > div:nth-child(2) { min-width: 0; }
.admin-game-control-grid strong,
.admin-game-control-grid span,
.admin-game-control-grid small { display: block; }
.admin-game-control-grid strong { color: #f0f4f8; font-size: 14px; }
.admin-game-control-grid span { display: -webkit-box; overflow: hidden; margin-top: 3px; color: #8794a3; font-size: 10px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.admin-game-control-grid small { margin-top: 5px; color: #69d88a; font-size: 9px; font-weight: 700; }
.admin-game-control-grid .is-closed small { color: #ff8793; }
.admin-game-control-grid button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 10px; border: 1px solid #4b7359; border-radius: 5px; background: #173422; color: #8ee3a9; cursor: pointer; font-size: 10px; font-weight: 800; white-space: nowrap; }
.admin-game-control-grid button.danger { border-color: #76434b; background: #30181d; color: #ff9aa5; }
.admin-game-control-grid button svg { width: 14px; }
.admin-tarot-management { margin: 0 10px 10px; border-color: #58416a; }
.admin-tarot-management > header em { color: #e2bd68; }
.admin-tarot-management-body { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; padding: 10px; }
.admin-tarot-management-body form { display: flex; min-width: 0; padding: 10px; align-items: end; gap: 8px; border: 1px solid #3c3545; border-radius: 6px; background: #100e14; }
.admin-tarot-management-body label { min-width: 0; flex: 1; color: #c8b9d2; font-size: 11px; font-weight: 700; }
.admin-tarot-management-body label small { display: block; margin-top: 4px; color: #81768a; font-size: 9px; font-weight: 400; line-height: 1.45; }
.admin-tarot-management-body input { width: 100%; min-height: 40px; margin-top: 5px; padding: 7px 9px; border: 1px solid #51445d; border-radius: 5px; outline: 0; background: #17131c; color: #f5ecfa; font-size: 13px; }
.admin-tarot-management-body form > button,
.admin-tarot-management-body form > div button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 10px; border: 1px solid #68517a; border-radius: 5px; background: #34203f; color: #e8d7f1; cursor: pointer; font-size: 10px; font-weight: 800; white-space: nowrap; }
.admin-tarot-management-body form > div { display: flex; flex-direction: column; gap: 6px; }
.admin-tarot-management-body form > div button.danger { border-color: #7b414a; background: #34171d; color: #ff9ba5; }
.admin-tarot-management-body form > div button.danger-outline { border-color: #644149; background: transparent; color: #dc8992; }
.admin-tarot-management-body button svg { width: 14px; }
.admin-game-advanced { margin: 0 10px 10px; overflow: hidden; border: 1px solid #343e49; border-radius: 6px; background: #0c0f13; }
.admin-game-advanced > summary { display: flex; min-height: 44px; padding: 9px 11px; align-items: center; gap: 7px; background: #15191e; color: #a9b4c1; cursor: pointer; font-size: 11px; font-weight: 800; }
.admin-game-advanced > summary svg { width: 16px; }
.admin-game-advanced .admin-editor-form { margin: 9px; }
.admin-game-advanced .admin-game-list { padding-top: 0; }
.admin-schema-list { display: grid; gap: 9px; padding: 10px; }
.admin-schema-list .admin-subpanel { margin: 0; }
.admin-schema-list code { color: #8fc6ff; font-family: Consolas, monospace !important; font-size: 9px; }
.admin-audit-list { display: grid; }
.admin-audit-list > article { min-height: 66px; display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; border-bottom: 1px solid #2d3540; }
.admin-audit-list > article > svg { flex: 0 0 auto; width: 17px; color: #ff7d8a; }
.admin-audit-list > article > div { min-width: 0; flex: 1; }
.admin-audit-list strong, .admin-audit-list span, .admin-audit-list small { display: block; }
.admin-audit-list strong { color: #e9edf2; font-size: 11px; }
.admin-audit-list span { color: #8995a3; font-size: 9px; }
.admin-audit-list small { margin-top: 4px; color: #6f7c8a; font-size: 8px; overflow-wrap: anywhere; }
.admin-audit-list time { color: #788493; font-size: 8px; white-space: nowrap; }
.admin-empty { padding: 24px 10px; color: #7f8b99; font-size: 10px; text-align: center; }
.announcement-editor > p { margin: 0; padding: 10px; color: #8e98a8; font-size: 9px; }
.announcement-editor { width: min(100%, 540px); max-height: calc(100dvh - 20px); display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; border-color: #3d4b59; background: #090c10; box-shadow: 0 24px 70px rgba(0,0,0,.72); }
.announcement-editor > .panel-title { min-height: 48px; padding: 9px 13px; background: linear-gradient(145deg,#182029,#10151b); }
.announcement-editor > .panel-title > span { display: inline-flex; align-items: center; gap: 7px; }
.announcement-editor > .panel-title > span > svg { width: 17px; height: 17px; color: #75baff; }
.announcement-editor > .panel-title .modal-close svg { width: 15px; height: 15px; }
.announcement-editor > #announcement-editor-note { padding: 8px 13px; border-bottom: 1px solid #27313c; background: #0d1218; color: #97a6b6; font-size: 11px; line-height: 1.45; }
.announcement-editor > #announcement-composer-mount { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.announcement-editor .announcement-composer { padding: 12px; background: radial-gradient(circle at 100% 0,rgba(55,137,211,.1),transparent 38%),#090c10; }
.announcement-editor .announcement-composer .composer-row { display: block; }
.announcement-editor .announcement-composer textarea { min-height: 92px; max-height: 230px; padding: 12px 14px; border: 1px solid #405061; border-radius: 16px 16px 6px 16px; background: #151b22 !important; color: #f1f5f9 !important; font-size: 15px; line-height: 1.55; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.announcement-editor .announcement-composer textarea:focus { border-color: #4f99dc; box-shadow: 0 0 0 3px rgba(65,145,216,.14),inset 0 1px 0 rgba(255,255,255,.04); }
.announcement-editor .announcement-composer .composer-actions { align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 0; }
.announcement-editor .announcement-composer .post-tools { min-width: 0; flex: 1 1 330px; display: flex; flex-wrap: wrap; gap: 6px; }
.announcement-editor .announcement-composer .post-tools > button,
.announcement-editor .announcement-composer .composer-symbol-tools > button { min-height: 34px; border-radius: 10px; }
.announcement-editor .announcement-composer .content-composer-upload-note { display: block; margin-top: 7px; color: #7f8e9e; font-size: 9px; line-height: 1.45; }
.announcement-editor .announcement-composer .post-tools:empty { display: none; }
.announcement-editor .announcement-composer .composer-submit-group { margin-left: auto; }
.announcement-editor .announcement-composer .submit-post { min-height: 40px; gap: 6px; padding: 7px 15px; border-radius: 12px; background: linear-gradient(145deg,#3089df,#1765b4); font-size: 12px; }
.announcement-editor .announcement-composer .submit-post svg { width: 15px; height: 15px; }
/* Keep Smileys and BBCode in the announcement card instead of covering its title. */
#announcement-modal .announcement-composer { position: relative; }
#announcement-modal .announcement-composer.composer-inline-open { z-index: auto; overflow: visible; }
#announcement-modal .announcement-composer .composer-inline-tools {
  position: static;
  z-index: auto;
  width: 100%;
  display: block;
  margin: 10px 0 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}
#announcement-modal .announcement-composer .composer-inline-tools[hidden] { display: none; }
#announcement-modal .announcement-composer .composer-inline-tools > .composer-inline-panel {
  width: 100%;
  max-height: min(330px,38dvh);
  overflow: auto;
  border-radius: 9px;
  box-shadow: 0 12px 34px rgba(0,0,0,.46);
}
#announcement-modal .announcement-composer :is(.bbcode-dialog,.symbol-picker-card) { max-height: none; }
.announcement-edit-policy { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 10px 0 0; padding: 0; border: 0; }
.announcement-edit-policy legend { width: 100%; display: flex; align-items: center; gap: 6px; margin-bottom: 7px; color: #b8c5d2; font-size: 10px; font-weight: 800; }
.announcement-edit-policy legend svg { width: 14px; height: 14px; color: #77baff; }
.announcement-edit-policy label { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #35414d; border-radius: 12px; background: #11171d; cursor: pointer; }
.announcement-edit-policy label:has(input:checked) { border-color: #398bd1; background: #10263a; box-shadow: 0 0 0 1px rgba(75,159,226,.12) inset; }
.announcement-edit-policy input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: #3f9be8; }
.announcement-edit-policy span,.announcement-edit-policy strong,.announcement-edit-policy small { display: block; }
.announcement-edit-policy span { min-width: 0; }
.announcement-edit-policy strong { color: #edf3f9; font-size: 11px; }
.announcement-edit-policy small { margin-top: 2px; color: #8190a0; font-size: 9px; line-height: 1.35; }
.announcement-edit-fee { min-height: 35px; display: flex; align-items: center; gap: 7px; margin-top: 8px; padding: 7px 9px; border: 1px solid #443e2a; border-radius: 11px; background: #19160d; color: #d8c67a; font-size: 10px; }
.announcement-edit-fee > svg { width: 15px; height: 15px; color: #f0ce54; }
.announcement-edit-fee strong { color: #ffe374; }
.announcement-edit-fee small { margin-left: auto; color: #a99860; font-size: 9px; }
.announcement-insufficient-coins .announcement-edit-fee { border-color: #663941; background: #211216; color: #ff9ba5; }
.announcement-insufficient-coins .announcement-edit-fee > svg,.announcement-insufficient-coins .announcement-edit-fee strong { color: #ff818d; }
#announcement-modal { z-index: 120; }
@media (max-width: 520px) {
  #announcement-modal { align-items: flex-end; padding: 7px; }
  .announcement-editor { width: 100%; max-height: calc(100dvh - 14px); border-radius: 17px 17px 10px 10px; }
  .announcement-editor > #announcement-composer-mount { scrollbar-gutter: auto; }
  .announcement-editor .announcement-composer { padding: 10px; padding-bottom: max(10px,env(safe-area-inset-bottom)); }
  .announcement-edit-policy { grid-template-columns: 1fr; }
  .announcement-editor .announcement-composer textarea { min-height: 82px; font-size: 16px; }
  .announcement-editor .announcement-composer .composer-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .announcement-editor .announcement-composer .post-tools { width: 100%; flex: 0 0 auto; flex-wrap: nowrap; gap: 7px; overflow-x: auto; scrollbar-width: none; }
  .announcement-editor .announcement-composer .post-tools::-webkit-scrollbar { display: none; }
  .announcement-editor .announcement-composer .post-tools > button,
  .announcement-editor .announcement-composer .composer-symbol-tools > button { width: 42px; min-width: 42px; min-height: 42px; flex: 0 0 42px; padding: 0; }
  .announcement-editor .announcement-composer .composer-submit-group { width: 100%; margin: 0; }
  .announcement-editor .announcement-composer .submit-post { width: 100%; min-height: 44px; white-space: nowrap; }
}
.announcement-media-preview { margin: 0 10px 9px; padding-left: 0; }
.announcement-media-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 10px 9px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 4px; background: #111419; }
.announcement-media-actions > span { color: #7f8a98; font-size: 8px; }
.announcement-media-actions .post-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.announcement-media-actions .post-tools button { min-height: 30px; }
.announcement-style-controls { grid-template-columns: repeat(3, 1fr); margin: 0 10px 9px; padding: 0; }
.announcement-bold-control { position: relative; }
.announcement-bold-control input { position: absolute; opacity: 0; pointer-events: none; }
.announcement-bold-control span { position: relative; display: block; width: 100%; height: 29px; margin-top: 3px; border: 1px solid var(--line); border-radius: 3px; background: #1b1f25; }
.announcement-bold-control span::before { content: 'B'; position: absolute; inset: 0; display: grid; place-items: center; color: #7e8997; font-size: 13px; font-weight: 900; }
.announcement-bold-control input:checked + span { border-color: #378950; background: #173622; }
.announcement-bold-control input:checked + span::before { color: var(--green); }
.announcement-editor-preview { min-height: 72px; margin: 0 10px 10px; padding: 9px; border: 1px dashed #48515d; border-radius: 4px; text-align: center; }
.announcement-editor-preview > p { margin: 0; color: inherit; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.promoted-announcement { position: relative; padding: 0; overflow: hidden; border: 1px solid #3c4856; border-radius: 10px; background: #0f141a; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
#site-featured-announcement > .promoted-announcement { margin: 10px; }
.site-announcement-list > .promoted-announcement { margin: 10px 10px 0; }
.site-announcement-list > .promoted-announcement:last-child { margin-bottom: 10px; }
.site-announcement-promotion-head { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid #35404b; background: #171d24; }
.site-announcement-promotion-head .site-announcement-meta { min-width: 0; flex: 1 1 auto; justify-content: flex-start; padding: 0; color: #a7b1bd; text-align: left; }
.site-announcement-promotion-corner { position: static; z-index: auto; flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-announcement-expiry, .site-announcement-promotion-corner > button { height: 27px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; border: 1px solid #475463; border-radius: 5px; background: #10161c; color: #d7e0ea; font-family: Georgia, serif; font-size: 9px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: none; }
.site-announcement-expiry svg { width: 12px; height: 12px; }
.site-announcement-promotion-corner > button { padding-inline: 7px; color: #ff929b; cursor: pointer; }
.site-announcement-promotion-corner > button:hover { border-color: #6c7d90; background: #1d2630; color: #fff; }
.site-announcement-promotion-corner > button:disabled { opacity: .55; }
.site-announcement-promotion-corner > button svg { width: 11px; height: 11px; }
.promoted-announcement .site-announcement-body { padding: 12px; background: #0f141a !important; color: #edf2f7 !important; }
.promoted-announcement .site-announcement-content { line-height: 1.6; }
.promoted-announcement .site-announcement-content.promotion-content-collapsed { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.site-announcement-more { display: inline-flex; align-items: center; margin-top: 6px; padding: 0; border: 0; background: transparent; color: #72b9ff; cursor: pointer; font-family: Georgia, serif; font-size: 12px; font-weight: 800; }
.site-announcement-more:hover { color: #b9ddff; text-decoration: underline; }
.site-announcement-more[hidden] { display: none; }
.promoted-announcement .featured-line { color: inherit; }
.promoted-announcement > .post-media-grid, .promoted-announcement > .post-media-single { margin: 0 10px 10px; }
.site-announcement-actions { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 9px; border-top: 1px solid #35404b; background: #171d24; }
.site-announcement-actions button, .site-announcement-actions a { min-height: 31px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 10px; border: 1px solid #475463; border-radius: 5px; background: #10161c; color: #c6d0db; cursor: pointer; font-family: Georgia, serif; font-size: 10px; font-weight: 700; line-height: 1; text-decoration: none; }
.site-announcement-actions button:hover, .site-announcement-actions a:hover { border-color: #4d6784; color: #fff; }
.site-announcement-actions svg { width: 14px; height: 14px; }
.site-announcement-like.liked { border-color: #823b51; background: #301722; color: #ff769b; }
.site-announcement-detail { margin-left: auto; }
.site-announcement-detail b { color: #7f8b99; font-size: 8px; font-weight: 400; }
.announcement-promote-hint { width: 100%; display: grid; grid-template-columns: 22px 1fr 18px; align-items: center; gap: 7px; padding: 9px 10px; border: 0; border-top: 1px solid #3e341e; background: #151208; color: #e7d794; cursor: pointer; text-align: left; }
.announcement-promote-hint:hover { background: #211b0b; }
.announcement-promote-hint > svg { width: 17px; color: #e5b844; }
.announcement-promote-hint > span, .announcement-promote-hint > small { grid-column: 2; }
.announcement-promote-hint > span { font-size: 10px; font-weight: 800; }
.announcement-promote-hint > small { margin-top: -5px; color: #8f8973; font-size: 8px; }
.announcement-promote-hint > svg:last-child { grid-column: 3; grid-row: 1 / span 2; color: #716b57; }
.promote-post-card { width: min(100%, 500px); overflow: hidden; }
.promote-post-preview { padding: 11px 12px; border-bottom: 1px solid var(--line); background: #0a0d11; }
.promote-post-preview > span { display: block; margin-bottom: 4px; color: #788493; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.promote-post-preview > strong { display: block; max-height: 52px; overflow: hidden; color: #e2e7ed; font-size: 12px; line-height: 1.5; }
.promote-position-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; padding: 11px 12px 0; border: 0; }
.promote-position-options legend { grid-column: 1 / -1; padding: 0; color: var(--green); font-size: 10px; font-weight: 800; }
.promote-position-options label { position: relative; min-height: 62px; display: flex; align-items: center; gap: 7px; padding: 9px; border: 1px solid #343d48; border-radius: 5px; background: #14181d; cursor: pointer; }
.promote-position-options input { position: absolute; opacity: 0; pointer-events: none; }
.promote-position-options label:has(input:checked) { border-color: #c6962d; background: #30250e; box-shadow: 0 0 0 1px rgba(241,187,62,.14); }
.promote-position-options label.unavailable { opacity: .55; cursor: not-allowed; }
.promote-position-options label > span { min-width: 0; flex: 1; }
.promote-position-options strong, .promote-position-options small { display: block; }
.promote-position-options strong { color: #e7ebf0; font-size: 11px; }
.promote-position-options small { margin-top: 3px; color: #f0ca63; font-size: 9px; }
.promote-position-options label > svg { width: 18px; color: #7d8997; }
.promote-position-options label:has(input:checked) > svg { color: #ffd45d; }
.promote-duration-field { display: block; padding: 11px 12px 0; color: var(--green); font-size: 10px; font-weight: 800; }
.promote-duration-field select { display: block; width: 100%; min-height: 42px; margin-top: 5px; padding: 8px 10px; border: 1px solid #3b4552; border-radius: 4px; outline: 0; background: #171b20; color: #f2f4f7; font: inherit; }
.promote-duration-field select:focus { border-color: #c6962d; }
.promote-cost-summary { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 8px; margin: 11px 12px 0; padding: 9px 10px; border: 1px solid #4b3e20; border-radius: 5px; background: #211b0e; }
.promote-cost-summary > span { color: #a9b1bc; font-size: 9px; }
.promote-cost-summary > strong { grid-row: span 2; color: #ffe16e; font-size: 18px; }
.promote-cost-summary > small { color: #7f8a97; font-size: 8px; }
.promote-no-refund { display: flex; align-items: flex-start; gap: 6px; margin: 9px 12px; color: #d7a4a8; font-size: 9px; line-height: 1.5; }
.promote-no-refund svg { flex: 0 0 auto; width: 14px; color: #ff7d89; }
.promote-post-card > .primary-button:disabled { opacity: .5; cursor: not-allowed; }

.settings-form { padding: 13px; }
.settings-form > label:not(.switch-setting) { display: block; margin-bottom: 12px; color: var(--green); font-size: 10px; }
.settings-form > label:not(.switch-setting) small { display: block; margin-top: 4px; color: #737e8c; font-size: 8px; line-height: 1.5; }
.settings-form input[type="number"], .settings-form input[type="password"], .settings-form select { display: block; width: 100%; min-height: 40px; margin-top: 5px; padding: 9px; border: 1px solid var(--line); border-radius: 4px; outline: 0; background: #17191e; color: #eef2f7; }
.settings-form input:focus, .settings-form select:focus { border-color: #4c7db1; }
.switch-setting { min-height: 63px; display: grid; grid-template-columns: 1fr 42px; align-items: center; gap: 10px; margin: 0; padding: 10px 0; border-top: 1px solid var(--line-soft); cursor: pointer; }
.switch-setting span { min-width: 0; }
.switch-setting strong { display: block; color: #dde3eb; font-family: Georgia, serif; font-size: 11px; }
.switch-setting small { display: block; margin-top: 3px; color: #747f8c; font-size: 8px; line-height: 1.45; }
.switch-setting input { position: absolute; opacity: 0; pointer-events: none; }
.switch-setting > i { position: relative; width: 38px; height: 21px; border: 1px solid #46505d; border-radius: 999px; background: #22262c; transition: .2s; }
.switch-setting > i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #8993a0; transition: .2s; }
.switch-setting input:checked + i { border-color: #2e9651; background: #174928; }
.switch-setting input:checked + i::after { left: 18px; background: var(--green); }
.settings-form .primary-button { width: 100%; margin-top: 12px; }
.settings-panel + .settings-panel { margin-top: 10px; }
.web-push-settings { margin: 12px 0 4px; overflow: hidden; border: 1px solid #34475a; border-radius: 7px; background: linear-gradient(145deg, rgba(28,52,73,.38), rgba(10,13,17,.9)); }
.web-push-heading { min-height: 62px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid #304354; background: rgba(18,35,50,.66); }
.web-push-heading > svg { width: 24px; color: #79c6ff; }
.web-push-heading strong, .web-push-heading small { display: block; }
.web-push-heading strong { color: #e9f5ff; font-family: Georgia, serif; font-size: 12px; }
.web-push-heading small { margin-top: 3px; color: #8095a8; font-size: 8px; line-height: 1.45; }
.web-push-settings .switch-setting { padding-right: 11px; padding-left: 11px; }
.web-push-settings .web-push-master { border-top: 0; background: rgba(16,27,37,.55); }
.web-push-options { border-top: 1px solid #30404f; }
.web-push-options[hidden] { display: none; }
.web-push-options .switch-setting { min-height: 58px; }
.web-push-device-status { display: flex; align-items: flex-start; gap: 7px; padding: 9px 11px; border-top: 1px solid #2c3d4d; color: #8fa6ba; font-size: 9px; line-height: 1.5; }
.web-push-device-status > svg { flex: 0 0 auto; width: 15px; margin-top: 1px; color: #6cb6ef; }
.web-push-device-status.ready { color: #88d9a2; }
.web-push-device-status.ready > svg { color: #65d38a; }
.web-push-device-status.blocked { color: #ff9a9f; }
.web-push-device-status.blocked > svg { color: #f06a73; }
.web-push-device-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 11px 11px; }
.web-push-device-actions button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border: 1px solid #3975a6; border-radius: 4px; background: #163b59; color: #b9e3ff; cursor: pointer; font-size: 9px; font-weight: 800; }
.web-push-device-actions button:hover { border-color: #66aee5; background: #1c4b70; color: #fff; }
.web-push-device-actions button:disabled { opacity: .55; cursor: wait; }
.web-push-device-actions button > svg { width: 14px; }
.web-push-device-actions button.danger { border-color: #744047; background: #3c1c23; color: #ffb1b7; }
.web-push-device-actions button[hidden] { display: none; }

.profile-locked-notice { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; }
.profile-locked-notice[hidden] { display: none; }
.profile-locked-notice > svg { width: 40px; height: 40px; color: #f0ca61; }
.profile-locked-notice strong { color: #f1d779; font-family: Georgia, serif; font-size: 15px; }
.profile-locked-notice p { margin: 0; color: #8e99a7; font-size: 11px; line-height: 1.55; }
.profile-panel.locked .profile-stats,
.profile-panel.locked .profile-bio,
.profile-panel.locked .profile-level-mood,
.profile-panel.locked #profile-online { display: none; }
#profile-gifts-panel[hidden], #profile-info-panel[hidden], #profile-wall-panel[hidden] { display: none; }

.direct-inbox-panel[hidden], .direct-conversation-panel[hidden], .direct-reply-preview[hidden], .direct-permission-note[hidden] { display: none !important; }
.conversation-list { min-height: 0; }
.conversation-row { border-bottom: 1px solid var(--line-soft); background: #090b0e; }
.conversation-row:last-child { border-bottom: 0; }
.conversation-row.pinned { background: linear-gradient(90deg, rgba(88,132,189,.12), transparent 70%), #090b0e; }
.conversation-item { width: 100%; min-height: 72px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px 8px; border: 0; background: transparent; color: #dce2e9; text-align: left; cursor: pointer; }
.conversation-item:hover { background: #15191e; }
.conversation-list-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0; padding: 0 10px 8px; }
.conversation-list-actions button { position: relative; padding: 2px 7px; border: 0; background: transparent; color: #aeb8c5; cursor: pointer; font-size: 11px; line-height: 1.25; }
.conversation-list-actions button + button::before { content: "·"; position: absolute; left: -1px; color: #56616e; }
.conversation-list-actions button:hover { color: #fff; text-decoration: underline; }
.conversation-list-actions button:disabled { color: #66707c; cursor: not-allowed; opacity: .55; text-decoration: none; }
.conversation-list-actions button.danger,
.conversation-list-actions button.active-block { color: #ff7380; }
.conversation-list-actions button.active-pin { color: #7ebcff; }
.conversation-item .avatar { width: 40px; height: 40px; }
.conversation-copy { min-width: 0; line-height: 1.2; }
.conversation-copy strong { display: block; overflow: hidden; color: #edf2f7; font-family: Georgia, serif; font-size: 12px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.conversation-copy span { display: block; margin-top: 2px; overflow: hidden; color: #75808e; font-size: 8px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.conversation-copy > .conversation-user-meta { margin-top: 1px; }
.conversation-copy > .conversation-preview { margin-top: 2px; }
.conversation-item.unread .conversation-copy strong, .conversation-item.unread .conversation-copy span { color: var(--green); font-weight: 700; }
.conversation-meta { display: grid; justify-items: end; gap: 5px; color: #697482; font-size: 7px; }
.conversation-meta b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #d83e52; color: #fff; font-size: 8px; }

.direct-conversation-panel { position: relative; overflow: hidden; }
.direct-compose-dock { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: #0e1115; box-shadow: 0 5px 18px rgba(0,0,0,.3); }
.direct-compose-dock .content-composer { position: relative; z-index: 21; overflow: visible; }
.direct-compose-dock .composer-inline-tools { z-index: 100; }
.direct-typing-indicator { position: relative; z-index: 4; min-height: 0; display: flex; align-items: flex-end; margin: 0 0 22px; padding: 0; border: 0; background: transparent; }
.direct-typing-indicator[hidden] { display: none !important; }
.direct-typing-bubble { width: fit-content; max-width: min(82%, 540px); display: inline-block; padding: 0; border: 1px solid #313843; border-radius: 6px 17px 17px 17px; background: #0b0d10; color: #e4e9ef; box-shadow: 0 2px 8px rgba(0,0,0,.24); }
.direct-typing-content { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: inherit !important; }
.direct-typing-dots { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.direct-typing-dots i { width: 5px; height: 5px; display: block; border-radius: 50%; background: #6fd49a; animation: direct-typing-dot 1s ease-in-out infinite; }
.direct-typing-dots i:nth-child(2) { animation-delay: .14s; }
.direct-typing-dots i:nth-child(3) { animation-delay: .28s; }
@keyframes direct-typing-dot { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .direct-typing-dots i { animation: none; opacity: .78; } }
.direct-message-list { position: relative; z-index: 1; }
.direct-conversation-head { position: relative; min-height: 84px; display: grid; grid-template-columns: 62px minmax(0, 1fr) 34px; align-items: center; gap: 8px; padding: 8px 9px; border-bottom: 1px solid var(--line); background: linear-gradient(#22252a,#17191d); }
.direct-conversation-head .direct-user-avatar { width: 58px; height: 58px; flex: 0 0 58px; }
.direct-head-actions { align-self: start; display: grid; gap: 4px; margin-top: 3px; }
.direct-more-button,
.direct-back-button { display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: #111419; color: #adb6c1; cursor: pointer; }
.direct-more-button:hover,
.direct-more-button:focus-visible,
.direct-back-button:hover,
.direct-back-button:focus-visible { outline: 0; border-color: #6286ad; background: #18222d; color: #eef6ff; }
.direct-more-button svg,
.direct-back-button svg { width: 16px; }
.direct-quick-menu { position: absolute; z-index: 5; top: 8px; right: 48px; min-width: 190px; padding: 4px; border: 1px solid #39414c; border-radius: 4px; background: #0d1014; box-shadow: 0 12px 32px rgba(0,0,0,.58); }
.direct-quick-menu[hidden] { display: none; }
.direct-quick-menu button { width: 100%; display: flex; align-items: center; gap: 7px; padding: 8px; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; color: #d6dde6; cursor: pointer; text-align: left; font-size: 9px; }
.direct-quick-menu button:last-child { border-bottom: 0; }
.direct-quick-menu button.direct-menu-danger { color: #ff7b87; }
.direct-quick-menu button.direct-menu-danger.is-unblock { color: var(--green); }
.direct-quick-menu button:disabled { opacity: .42; cursor: default; }
.direct-quick-menu button:hover { background: #1a1f25; }
.direct-quick-menu svg { width: 14px; }
.direct-message-expiry-setting { display: grid; grid-template-columns: 17px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 8px; border-bottom: 1px solid var(--line-soft); color: #d6dde6; font-size: 9px; cursor: default; }
.direct-message-expiry-setting > svg { width: 14px; height: 14px; color: #e6b85b; }
.direct-message-expiry-setting > span { display: grid; gap: 2px; min-width: 0; font-weight: 700; }
.direct-message-expiry-setting small { color: #7f8995; font-size: 8px; font-weight: 500; white-space: nowrap; }
.direct-message-expiry-setting select { max-width: 76px; min-height: 26px; padding: 3px 5px; border: 1px solid #46515f; border-radius: 4px; outline: 0; background: #171b21; color: #f0f3f7; font-size: 9px; cursor: pointer; }
.direct-message-expiry-setting select:focus { border-color: #d9a944; box-shadow: 0 0 0 2px rgba(217,169,68,.13); }
.direct-message-expiry-setting select:disabled { opacity: .55; cursor: wait; }
.direct-user-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: transparent; text-align: left; cursor: pointer; }
.direct-user-copy strong { max-width: 100%; display: inline-flex; align-items: center; overflow: hidden; color: #f0f3f7; font-family: Georgia, serif; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.direct-user-copy strong .role-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-user-copy > span { max-width: 100%; display: flex; align-items: center; gap: 3px; margin-top: 2px; overflow: hidden; font-size: 8px; white-space: nowrap; }
.direct-user-copy > .direct-user-meta { display: block; margin-top: 3px; }
.direct-user-level-mood { max-width: 100%; }
#direct-user-status { color: var(--green); }
#direct-user-status.online { color: var(--green); }
#direct-user-status.offline { color: #ff5f69; }
#direct-user-status.system-bot { color: #b69aff; }
.direct-message-list { min-height: 430px; height: auto; overflow-y: visible; overflow-anchor: none; padding: 13px 8px 26px; background: radial-gradient(circle at 20% 10%,rgba(87,166,255,.06),transparent 30%),#050607; }
.direct-message { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 22px; }
.direct-message.own { justify-content: flex-end; }

.direct-message.own > .avatar { display: none; }
.direct-message-block { width: fit-content; min-width: 0; max-width: min(82%, 540px); }
.direct-message-bubble { position: relative; display: inline-block; width: fit-content; min-width: 0; max-width: 100%; overflow: visible; border: 1px solid #313843; border-radius: 6px 17px 17px 17px; background: #0b0d10; color: #e4e9ef; box-shadow: 0 2px 8px rgba(0,0,0,.24); }
.direct-message.own .direct-message-bubble { border-color: #3a3f47; border-radius: 17px 6px 17px 17px; background: #202226; }
.direct-message-text { margin: 0; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: Georgia, serif; font-size: 11px; line-height: 1.45; }
.auto-message-link { color: #79c9ff !important; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(121,201,255,.58); text-underline-offset: 2px; overflow-wrap: anywhere; word-break: break-word; }
.auto-message-link:hover { color: #b9e6ff !important; text-decoration-color: currentColor; }
.auto-message-link:focus-visible { border-radius: 2px; outline: 2px solid #65bfff; outline-offset: 2px; }
.auto-youtube-embed { clear: both; }
.external-link-backdrop { z-index: 130; }
.external-link-card { width: min(100%, 440px); padding: 22px; overflow: hidden; border-color: #465363; border-radius: 14px; background: linear-gradient(155deg, #151a21, #090b0e); text-align: center; }
.external-link-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 13px; border: 1px solid #6f5a31; border-radius: 50%; background: #2a2112; color: #ffc65c; box-shadow: 0 0 25px rgba(255,184,70,.13); }
.external-link-icon svg { width: 27px; height: 27px; }
.external-link-copy { display: grid; gap: 8px; }
.external-link-copy strong { color: #f4f7fb; font-size: 17px; line-height: 1.35; }
.external-link-copy p { margin: 0; color: #aeb8c4; font-size: 12px; line-height: 1.55; }
.external-link-copy code { display: block; max-width: 100%; padding: 8px 10px; overflow: hidden; border: 1px solid #343e49; border-radius: 7px; background: #090c10; color: #8fd4ff; font: 700 12px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.external-link-copy > span { color: #c5ced8; font-size: 12px; }
.external-link-copy > span b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: #27384a; color: #8fd4ff; }
.external-link-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; margin-top: 18px; }
.external-link-actions button { min-height: 42px; padding: 8px 12px; border: 1px solid #3b4652; border-radius: 8px; background: #171c22; color: #d6dde6; cursor: pointer; font-weight: 800; }
.external-link-actions .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-color: #3170a8; background: #185583; color: #fff; }
.external-link-actions svg { width: 16px; height: 16px; }
@media (max-width: 430px) { .external-link-card { padding: 18px 15px; } .external-link-actions { grid-template-columns: 1fr; } }
.direct-message-mood { padding: 6px 9px 0; color: #ff9bcf; font-size: 9px; }
.direct-message-recalled { margin: 0; padding: 9px 11px; color: #8a95a2; font-style: italic; font-size: 9px; }
.direct-reply-quote { margin: 5px 6px 0; padding: 6px 8px; border-left: 3px solid var(--green); border-radius: 3px; background: rgba(0,0,0,.28); }
.direct-reply-quote strong, .direct-reply-quote span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-reply-quote strong { color: var(--green); font-size: 8px; }
.direct-reply-quote span { margin-top: 2px; color: #adb7c4; font-size: 8px; }
.direct-message-bubble .post-media-grid { margin: 5px; }
.direct-message-bubble .post-media-grid a { height: 280px; }
.direct-message-bubble .post-media-grid.media-count-3 a, .direct-message-bubble .post-media-grid.media-count-4 a { height: 210px; }
.direct-message-bubble.has-visual-media { width: min(380px, calc(100vw - 78px)); }
.direct-message-bubble .post-media-grid.media-count-1 > a { height: auto; max-height: none; aspect-ratio: auto; }
.direct-message-bubble .post-media-grid.media-count-1 img,
.direct-message-bubble .post-media-grid.media-count-1 video { width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.direct-message-bubble .post-audio { margin: 5px; background: rgba(0,0,0,.2); }
.direct-message-block.has-audio-media { width: min(430px, calc(100vw - 78px)); max-width: 430px; }
.direct-message.own .direct-message-block.has-audio-media { width: min(430px, calc(100vw - 34px)); }
.direct-message-bubble.has-audio-media { display: block; width: 100%; }
.group-message-body:has(.post-audio),
.party-message-body:has(.post-audio) { width: min(430px, calc(100vw - 78px)); }
.group-message-bubble:has(.post-audio),
.party-message .group-message-bubble:has(.post-audio),
.caro-party-message .group-message-bubble:has(.post-audio) { display: block; width: 100%; }
.race-chat-message > div:has(.post-audio),
.caro-chat-message > div:has(.post-audio) { width: 100%; }
@media (max-width: 420px) {
  .post-audio { gap: 5px; padding: 6px; }
  .post-audio > svg { display: none; }
  .post-audio strong { margin-bottom: 2px; }
  .post-audio audio { height: 40px; }
}
.direct-message-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 3px; min-height: 18px; padding: 0 8px 2px; color: #87919d; font-size: 10px; }
.direct-message-state:empty { display: none; }
.direct-message-expiry { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; padding: 2px 6px; border: 1px solid rgba(229,184,89,.34); border-radius: 999px; background: rgba(229,184,89,.09); color: #e8c36d; font-size: 9px; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.direct-message-expiry svg { width: 12px; height: 12px; color: #ffd66f; animation: direct-expiry-clock-spin 1.4s linear infinite; transform-origin: center; }
@keyframes direct-expiry-clock-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .direct-message-expiry svg { animation-duration: 3s; } }
.direct-message-time { display: inline; margin-left: 4px; color: rgba(255,255,255,.58); font-size: 11px; font-style: normal; font-weight: 400; line-height: inherit; white-space: nowrap; }
.direct-message-time-only { padding: 1px 8px 4px; text-align: right; line-height: 1.2; }
.direct-message-time-only .direct-message-time { margin-left: 0; }
.direct-message-state { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: #87919d; font-size: inherit; }
.direct-message-state > button { padding: 0; border: 0; background: transparent; color: #ff5d69; cursor: pointer; font: inherit; }
.direct-message-state > button:hover { color: #ff8992; text-decoration: underline; }
.direct-message-receipt { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; color: #74808e; font-size: inherit; }
.direct-message-receipt svg { width: 13px; height: 13px; color: #66aefc; }
.direct-message-receipt.is-sending { color: #9aa5b1; }
.direct-message-receipt.is-sending svg { color: #8ea1b5; }
.direct-message-receipt.is-confirmed svg { color: #55d987; filter: drop-shadow(0 0 3px rgba(85,217,135,.28)); }
.direct-message-receipt.is-confirmed.is-seen svg { color: #6bb5ff; filter: drop-shadow(0 0 3px rgba(107,181,255,.3)); }
.direct-message-receipt.is-failed { max-width: min(330px, calc(100vw - 90px)); color: #ff858f; text-align: right; white-space: normal; }
.direct-message-receipt.is-failed svg { flex: 0 0 auto; color: #ff5967; }
.direct-message.is-sending .direct-message-bubble { opacity: .84; }
.direct-message.is-failed .direct-message-bubble { border-color: #7b353d; box-shadow: 0 0 0 1px rgba(255,76,91,.08), 0 2px 8px rgba(0,0,0,.24); }
.direct-message.is-failed { cursor: pointer; }
@keyframes direct-send-spin { to { transform: rotate(360deg); } }
.direct-message-corner { position: absolute; z-index: 2; right: 7px; bottom: -12px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 3px; white-space: nowrap; }
.direct-message-corner.has-reactions { position: relative; right: auto; bottom: auto; width: max-content; max-width: calc(100vw - 78px); margin: -1px 7px -12px auto; }
.direct-reaction-summary { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.direct-reaction-total { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 2px 7px; border: 1px solid #3b4552; border-radius: 999px; background: #15191e; color: #dce3eb; font-size: 10px; line-height: 1; white-space: nowrap; box-shadow: 0 2px 5px rgba(0,0,0,.55); }
button.direct-reaction-total { cursor: pointer; }
button.direct-reaction-total:hover { border-color: #4d79aa; background: #1c2733; }
.direct-reaction-icons { display: inline-flex; align-items: center; flex-wrap: nowrap; letter-spacing: -3px; }
.direct-reaction-icons > span { display: inline-block; font-size: 13px; }
.direct-reaction-total > b { min-width: 9px; color: #b9c4d0; font: 700 10px/1 Arial,sans-serif; text-align: center; }
.direct-message-actions { display: flex; justify-content: flex-end; gap: 2px; }
.direct-message-actions > button { display: grid; place-items: center; width: 24px; height: 22px; padding: 0; border: 1px solid #343b45; border-radius: 999px; background: #171a1f; color: #86919e; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,.55); }
.direct-message-actions > button:hover, .direct-message-actions > button:focus-visible { background: #20242a; color: #d4dbe4; outline: 0; }
.direct-message-actions > button:last-child { color: #8893a1; }
.direct-message-actions > button:last-child:hover { color: #ff6f8f; }
.direct-message-actions > button svg { width: 13px; height: 13px; }
.direct-reaction-popover { position: fixed; z-index: 1800; display: flex; align-items: stretch; flex-wrap: nowrap; gap: 2px; width: max-content; max-width: calc(100vw - 16px); padding: 3px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; -webkit-overflow-scrolling: touch; border: 1px solid #3c4652; border-radius: 9px; background: #111419; box-shadow: 0 10px 30px rgba(0,0,0,.62); }
.direct-reaction-popover::-webkit-scrollbar { display: none; }
.direct-reaction-popover[hidden] { display: none; }
.direct-reaction-popover button { position: relative; display: grid; place-items: center; flex: 0 0 auto; min-width: 40px; min-height: 42px; padding: 3px 4px; border: 1px solid transparent; border-radius: 7px; background: #1a1e24; color: #9ca6b2; cursor: pointer; line-height: 1; transition: transform .14s ease, border-color .14s ease, background .14s ease; }
.direct-reaction-popover button > span { font-size: 17px; }
.direct-reaction-popover button > small { margin-top: 3px; font-size: 8px; white-space: nowrap; }
.direct-reaction-popover button.selected { border-color: #4288d7; background: #16375d; color: #e9f4ff; }
.direct-reaction-popover button.selected::after { content: "✓"; position: absolute; top: 1px; right: 1px; display: grid; place-items: center; width: 9px; height: 9px; border-radius: 50%; background: #2f7fdc; color: #fff; font: 700 6px/1 Arial,sans-serif; }
.direct-reaction-popover button:hover, .direct-reaction-popover button:focus-visible { transform: translateY(-2px) scale(1.08); border-color: #527ca8; background: #222b35; outline: 0; }

.direct-permission-note { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; border-top: 1px solid #674126; background: #271a11; color: #e4b274; font-size: 9px; }
.direct-permission-note svg { width: 16px; }
.direct-reply-preview { display: grid; grid-template-columns: 25px 1fr 28px; align-items: center; gap: 6px; padding: 7px 9px; border-top: 1px solid #315f91; background: #101c29; }
.direct-reply-preview > svg { width: 16px; color: var(--blue); }
.direct-reply-preview div { min-width: 0; }
.direct-reply-preview strong, .direct-reply-preview span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-reply-preview strong { color: var(--blue); font-size: 8px; }
.direct-reply-preview span { margin-top: 2px; color: #a8b3c0; font-size: 8px; }
.direct-reply-preview button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 3px; background: transparent; color: #8e99a6; cursor: pointer; }
.direct-reply-preview button svg { width: 14px; }
.direct-message-form { padding: 8px; background: #0e1115; }
.direct-message-form[hidden] { display: none; }
.direct-message-form textarea { width: 100%; min-height: 58px; max-height: 130px; padding: 8px 9px; resize: vertical; border: 1px solid var(--line); border-radius: 4px; outline: 0; background: #191c21; color: #edf1f6; }
.direct-message-form textarea:focus { border-color: #4c7db1; }
.direct-message-form .content-composer-note { margin: 4px 1px 0; color: #7f8995; font-size: 9px; line-height: 1.35; }
.direct-message-form .composer-media-preview, .direct-message-form .composer-style-panel { margin-left: 0; }
.direct-message-form .composer-actions { justify-content: flex-start; gap: 7px; padding-left: 0; }
.direct-message-form .composer-actions .post-tools { flex: 1; }
.direct-composer-actions { display: flex; align-items: center; justify-content: flex-start; gap: 7px; margin-top: 7px; }
.direct-send-button { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 6px 10px; border: 1px solid #2f68ae; border-radius: 4px; background: #2071dc; color: #fff; cursor: pointer; font-weight: 700; font-size: 9px; }
.direct-send-button svg { width: 14px; }
.direct-send-button:disabled { opacity: .6; cursor: wait; }
.direct-composer-actions .post-tools { flex: 1; }

.message-inbox-title-actions { display: flex; align-items: center; gap: 7px; }
.message-inbox-title-actions button { min-height: 29px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid #356b50; border-radius: 4px; background: #133122; color: #81e8a3; cursor: pointer; font-size: 10px; font-weight: 700; }
.message-inbox-title-actions button svg { width: 14px; }
.message-inbox-title-actions .message-mark-read-all { width: 29px; min-width: 29px; justify-content: center; padding: 0; border-color: #356b50; background: #133122; color: #81e8a3; }
.message-inbox-title-actions .message-mark-read-all:hover { border-color: #57a977; background: #19412c; color: #c0ffd3; }
.message-inbox-title-actions .message-mark-read-all:disabled { opacity: .55; cursor: wait; }
.message-inbox-title-actions .message-mark-read-all[hidden], .message-inbox-title-actions #group-create-open[hidden] { display: none; }
.message-inbox-title-actions .message-mark-read-all svg { width: 15px; height: 15px; }
.message-inbox-title-actions .conversation-density-toggle { position: relative; width: 29px; min-width: 29px; justify-content: center; padding: 0; border-color: #3e5369; background: #151d26; color: #9fc8ed; }
.message-inbox-title-actions .conversation-density-toggle::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; box-sizing: border-box; border: 1.5px solid #151d26; border-radius: 50%; background: #7b8591; box-shadow: 0 0 0 1px rgba(255,255,255,.13); transition: background-color .18s ease, box-shadow .18s ease; }
.message-inbox-title-actions .conversation-density-toggle:hover { border-color: #6d98bf; background: #1d2b38; color: #fff; }
.message-inbox-title-actions .conversation-density-toggle[aria-pressed="true"] { border-color: #4f8e69; background: #183324; color: #80e5a3; box-shadow: inset 0 0 0 1px rgba(128,229,163,.08); }
.message-inbox-title-actions .conversation-density-toggle[aria-pressed="true"]::after { border-color: #183324; background: #46df7b; box-shadow: 0 0 0 1px rgba(70,223,123,.24), 0 0 6px rgba(70,223,123,.55); }
.message-inbox-title-actions .conversation-density-toggle svg { width: 15px; height: 15px; }
.message-inbox-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-bottom: 1px solid var(--line); background: #090b0e; }
.message-inbox-tabs button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #8e99a7; cursor: pointer; font-size: 11px; font-weight: 700; }
.message-inbox-tabs button.active { border-color: #37678d; background: #142a3b; color: #a9d8ff; }
.message-inbox-tabs button svg { width: 15px; }
.message-inbox-tabs button b { min-width: 18px; padding: 1px 5px; border-radius: 10px; background: #26313d; color: #d9e6f3; font-size: 9px; }
.message-inbox-tabs button b.has-unread { background: #8a5a12; color: #fff1b5; box-shadow: 0 0 0 1px #d99b32 inset; }
.waiting-notification-setting {
  min-height: 64px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-bottom: 1px solid #3a3224;
  background: linear-gradient(135deg, #211b12, #11100e);
  cursor: pointer;
}
.waiting-notification-setting[hidden] { display: none !important; }
.waiting-notification-setting-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #665535; border-radius: 50%; background: #2d2416; color: #edbf65; }
.waiting-notification-setting-icon svg { width: 17px; height: 17px; }
.waiting-notification-setting > span:nth-child(2) { min-width: 0; }
.waiting-notification-setting strong, .waiting-notification-setting small { display: block; }
.waiting-notification-setting strong { color: #f2e8d5; font-size: 12px; }
.waiting-notification-setting small { margin-top: 3px; color: #a6967b; font-size: 9px; line-height: 1.4; }
.waiting-notification-setting input { position: absolute; opacity: 0; pointer-events: none; }
.waiting-notification-setting > i { position: relative; width: 38px; height: 21px; border: 1px solid #665b4a; border-radius: 999px; background: #29251f; transition: .2s; }
.waiting-notification-setting > i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #9b907e; transition: .2s; }
.waiting-notification-setting input:checked + i { border-color: #2e9651; background: #174928; }
.waiting-notification-setting input:checked + i::after { left: 18px; background: var(--green); }
.waiting-notification-setting.is-saving { opacity: .65; pointer-events: none; }
.waiting-notification-setting.is-muted .waiting-notification-setting-icon { border-color: #664044; background: #2b171a; color: #ee8c94; }
.group-inbox[hidden], .group-chat-panel[hidden], .group-pinned-message[hidden], .group-invite-section[hidden], .group-discover-section[hidden], .group-pending-section[hidden], .group-settings-form[hidden], .group-skin-section[hidden], .group-invite-form[hidden], .group-danger-actions[hidden], .group-danger-actions button[hidden], #conversation-list[hidden], #conversation-pagination[hidden], #waiting-conversation-list[hidden], #waiting-conversation-pagination[hidden] { display: none !important; }
.group-inbox { background: #07090b; }
.group-invite-section, .group-discover-section { border-bottom: 1px solid var(--line); background: #0b0e12; }
.group-invite-section > header, .group-discover-section > header, .group-pending-section > header, .group-member-section > header { min-height: 40px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); color: #d9e2ec; }
.group-invite-section > header svg, .group-discover-section > header svg, .group-pending-section > header svg, .group-member-section > header svg { width: 16px; color: #76baff; }
.group-discover-section > header div { min-width: 0; }
.group-discover-section > header strong, .group-discover-section > header span { display: block; }
.group-discover-section > header span { margin-top: 2px; color: #7f8b99; font-size: 9px; }
.group-list, .group-discover-list { display: grid; }
.group-list > .empty-state, .group-discover-list > .empty-state { min-height: 150px; }
.group-row, .group-discover-row, .group-invite-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line-soft); background: #090b0e; transition: background .18s ease, transform .18s ease; }
.group-row:hover, .group-discover-row:hover, .group-invite-row:hover { background: #0e1217; }
.group-row:last-child, .group-discover-row:last-child, .group-invite-row:last-child { border-bottom: 0; }
.group-row.pinned { background: linear-gradient(90deg, rgba(87,166,255,.12), transparent 72%), #090b0e; }
.group-avatar { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #536f8a; border-radius: 14px; background: linear-gradient(145deg, #315b7d, #18293b); color: #e4f4ff; font-family: Georgia, serif; font-size: 17px; font-weight: 800; box-shadow: inset 0 0 0 2px rgba(5,9,13,.72), 0 6px 16px rgba(0,0,0,.24); }
.group-avatar img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.group-row-copy { min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.group-row-copy strong, .group-row-copy span, .group-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-row-copy strong { color: #eef3f8; font-size: 12px; }
.group-row-copy span { margin-top: 3px; color: #8793a1; font-size: 10px; }
.group-row-copy small { margin-top: 3px; color: #657180; font-size: 8px; }
.group-row-meta { display: grid; justify-items: end; gap: 5px; }
.group-row-meta time { color: #697482; font-size: 8px; }
.group-row-meta b { min-width: 19px; display: grid; place-items: center; padding: 2px 5px; border-radius: 10px; background: #d83e52; color: #fff; font-size: 8px; }
.group-invite-actions, .group-discover-actions { display: flex; gap: 5px; }
.group-invite-actions button, .group-discover-actions button { min-height: 28px; padding: 4px 7px; border: 1px solid #3d4b59; border-radius: 4px; background: #18202a; color: #a9c9e8; cursor: pointer; font-size: 9px; }
.group-invite-actions button.accept, .group-discover-actions button { border-color: #34704a; background: #173522; color: #83e49f; }
.group-discover-actions button:disabled { opacity: .5; cursor: default; }
.group-role-chip { display: inline-flex !important; width: fit-content; margin-top: 3px; padding: 1px 5px; border-radius: 9px; background: #242d37; color: #aac6df !important; font-size: 8px !important; font-weight: 800; }
.group-chat-panel { overflow: hidden; background: #080a0d; }
.group-chat-head { min-height: 76px; display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid #34404d; background: radial-gradient(circle at 80% -30%, rgba(92,166,255,.2), transparent 42%), linear-gradient(145deg, #252b33, #12171d); box-shadow: 0 7px 24px rgba(0,0,0,.22); }
.group-chat-head .group-avatar { width: 46px; height: 46px; }
.group-back-button, .group-manage-button { width: 33px; height: 33px; display: grid; place-items: center; padding: 0; border: 1px solid #42505f; border-radius: 10px; background: rgba(10,14,19,.72); color: #c9d5e1; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.group-back-button:hover, .group-manage-button:hover { border-color: #6ca5db; background: #172433; transform: translateY(-1px); }
.group-back-button svg, .group-manage-button svg { width: 16px; }
.group-chat-title { min-width: 0; padding: 4px 0; text-align: left; }
.group-chat-title strong, .group-chat-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-chat-title strong { color: #f1f4f7; font-size: 14px; }
.group-chat-title span { margin-top: 4px; color: #83909e; font-size: 9px; }
.group-chat-tools { display: flex; align-items: stretch; gap: 0; overflow-x: auto; border-bottom: 1px solid #303a46; background: #0d1218; scrollbar-width: thin; }
.group-chat-tools button { flex: 1 0 auto; min-width: 88px; min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border: 0; border-right: 1px solid #29323d; background: transparent; color: #b9c5d1; cursor: pointer; font-size: 12px; font-weight: 750; white-space: nowrap; }
.group-chat-tools button:last-child { border-right: 0; }
.group-chat-tools button:hover, .group-chat-tools button:focus-visible { outline: 0; background: #19232d; color: #eef6ff; }
.group-chat-tools button[hidden] { display: none !important; }
.group-chat-tools button svg { width: 17px; height: 17px; color: #82bdf2; }
.group-chat-tools .group-tool-leave { color: #ff919a; }
.group-chat-tools .group-tool-leave svg { color: #ff6f7a; }
.group-pinned-message { position: relative; padding: 8px 36px 8px 11px; border-bottom: 1px solid #6e5825; background: #28210f; color: #eadb9b; font-size: 10px; }
.group-pinned-message strong, .group-pinned-message span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-pinned-message span { margin-top: 2px; color: #c6b675; }
.group-pinned-message button { position: absolute; top: 50%; right: 8px; width: 25px; height: 25px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #e9cf69; cursor: pointer; transform: translateY(-50%); }
.group-message-form { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px; border-bottom: 1px solid #303946; background: linear-gradient(180deg, #151b22, #0c1015); box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.group-message-form textarea { min-height: 54px; max-height: 130px; margin: 0; padding: 10px 11px; resize: vertical; border: 1px solid #394755; border-radius: 12px; outline: 0; background: #090d12; color: #edf5fd; font-size: 12px; transition: border-color .18s ease, box-shadow .18s ease; }
.group-message-form textarea:focus { border-color: #4e8dcc; box-shadow: 0 0 0 3px rgba(55,130,205,.12); }
.group-message-form button { min-width: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #4289d7; border-radius: 12px; background: linear-gradient(145deg, #3187e5, #1761bd); color: #fff; cursor: pointer; font-size: 10px; font-weight: 800; box-shadow: 0 7px 17px rgba(16,90,177,.25); transition: filter .18s ease, transform .18s ease; }
.group-message-form button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.group-message-form button svg { width: 15px; }
.group-message-list { position: relative; isolation: isolate; min-height: 420px; height: auto; overflow-y: visible; overflow-anchor: none; padding: 16px 10px 28px; background: radial-gradient(circle at 20% 10%, rgba(87,166,255,.09), transparent 30%), linear-gradient(155deg, #0b1017, #05070a 64%); }
.group-message-list::before { position: absolute; z-index: -1; inset: 0; overflow: hidden; padding: 24px 15px; pointer-events: none; white-space: pre-wrap; font-family: Georgia, serif; font-size: 24px; line-height: 3.2; letter-spacing: 16px; opacity: .4; }
.group-message-list > * { position: relative; z-index: 1; }
.group-message { display: flex; align-items: flex-end; margin-bottom: 21px; }
.group-message.own { justify-content: flex-end; }
.group-message > .avatar { width: 30px; height: 30px; }
.group-profile-avatar, .chat-profile-avatar, .chat-profile-name, .group-message-author > button, .group-member-profile { min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.group-profile-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; }
.group-profile-avatar .avatar { width: 30px; height: 30px; }
.group-profile-avatar:hover .avatar, .chat-profile-avatar:hover .avatar { box-shadow: 0 0 0 2px #d9aa12; }
.group-message-author > button:hover, .group-member-profile:hover strong, .chat-profile-name:hover { color: #e5b91c; }
.group-message-body { min-width: 0; max-width: min(84%, 570px); }
.group-message-account { max-width: 100%; display: flex; align-items: center; gap: 9px; margin: 0 0 6px 2px; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.group-message-account:hover .group-message-account-avatar { box-shadow: 0 0 0 2px #d9aa12; }
.group-message-account-avatar { width: 38px; height: 38px; flex: 0 0 38px; }
.group-message-account-copy { min-width: 0; display: block; }
.group-message-account-copy .user-identity-top { overflow: visible; }
.group-message-account-copy .user-identity-top > strong { min-width: 0; }
.group-message-account-copy .user-identity-top > em { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; background: #26313d; color: #b8d8f2; font-size: 10px; font-style: normal; font-weight: 800; }
.group-message-account-meta { max-width: 100%; margin-top: 3px; font-size: 12px; }
.group-message-author { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 3px 3px; color: #9aa7b6; font-size: 9px; }
.group-message-author em { padding: 1px 5px; border-radius: 8px; background: #26313d; color: #aad0ef; font-style: normal; font-size: 7px; }
.group-message-bubble { position: relative; padding: 9px 11px 8px; border: 1px solid rgba(110,126,145,.36); border-radius: 7px 17px 17px 17px; background: linear-gradient(145deg, #2b323b, #1b2027); color: #e7ecf3; font-size: 16px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 8px 20px rgba(0,0,0,.22); backdrop-filter: blur(5px); }
.group-message.own .group-message-bubble { border-radius: 17px 7px 17px 17px; border-color: rgba(123,142,165,.42); background: linear-gradient(145deg, #2b323b, #1b2027); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.group-message-bubble time { margin-left: 5px; color: #6e7987; font-size: 7px; white-space: nowrap; }
.group-message-bubble button { display: block; margin: 6px 0 0 auto; padding: 2px 0; border: 0; background: transparent; color: #79baff; cursor: pointer; font-size: 8px; }
.group-message.own .group-message-bubble button { color: rgba(255,255,255,.75); }
.group-message.is-pinned .group-message-bubble { border-color: #806b31; box-shadow: 0 0 0 1px rgba(230,198,92,.1); }

#group-chat-panel[data-background-skin="hearts"] .group-message-list { background: radial-gradient(circle at 12% 12%, rgba(255,135,185,.3), transparent 31%), radial-gradient(circle at 88% 82%, rgba(239,82,151,.22), transparent 34%), linear-gradient(155deg, #421a35, #180d21 68%); }
#group-chat-panel[data-background-skin="hearts"] .group-message-list::before { content: "♥  ♡      ♥\A    ♡   ♥     ♡\A ♥      ♡  ♥\A      ♥    ♡"; color: #ffacd1; text-shadow: 0 0 18px rgba(255,121,184,.55); }
#group-chat-panel[data-background-skin="blossoms"] .group-message-list { background: radial-gradient(circle at 15% 10%, rgba(255,224,182,.24), transparent 31%), radial-gradient(circle at 90% 76%, rgba(255,153,186,.18), transparent 35%), linear-gradient(150deg, #183a32, #0a1c1a 65%); }
#group-chat-panel[data-background-skin="blossoms"] .group-message-list::before { content: "✿    ❀   ✾\A   ❀      ✿\A ✾    ✿     ❀\A     ❀  ✾"; color: #ffd3dc; text-shadow: 0 0 14px rgba(255,206,218,.36); }
#group-chat-panel[data-background-skin="aurora"] .group-message-list { background: radial-gradient(ellipse at 8% 15%, rgba(60,255,196,.28), transparent 38%), radial-gradient(ellipse at 88% 18%, rgba(121,93,255,.34), transparent 43%), radial-gradient(ellipse at 55% 92%, rgba(0,180,255,.2), transparent 45%), linear-gradient(155deg, #10252a, #0a1024 70%); }
#group-chat-panel[data-background-skin="aurora"] .group-message-list::before { content: "✧       ✦\A    ·    ✧\A ✦       ·\A      ✧"; color: #a6ffe8; opacity: .25; }
#group-chat-panel[data-background-skin="ocean"] .group-message-list { background: radial-gradient(circle at 12% 10%, rgba(88,227,230,.24), transparent 30%), radial-gradient(circle at 82% 86%, rgba(39,118,219,.3), transparent 39%), linear-gradient(160deg, #0d3640, #071526 69%); }
#group-chat-panel[data-background-skin="ocean"] .group-message-list::before { content: "○    ◦      ○\A   ◦     ○\A      ○   ◦\A ◦       ○"; color: #8cecf0; opacity: .25; }
#group-chat-panel[data-background-skin="starlight"] .group-message-list { background: radial-gradient(circle at 18% 12%, rgba(133,131,255,.25), transparent 29%), radial-gradient(circle at 84% 72%, rgba(83,142,255,.22), transparent 36%), linear-gradient(155deg, #151947, #070a20 70%); }
#group-chat-panel[data-background-skin="starlight"] .group-message-list::before { content: "✦  ·    ★   ·\A   ·  ✧      ★\A ★      ·   ✦\A    ✧   ·"; color: #d2dcff; text-shadow: 0 0 12px #89a8ff; }
#group-chat-panel[data-background-skin="sunset"] .group-message-list { background: radial-gradient(circle at 10% 5%, rgba(255,194,104,.34), transparent 32%), radial-gradient(circle at 86% 79%, rgba(214,79,126,.28), transparent 40%), linear-gradient(155deg, #5a2e36, #241429 70%); }
#group-chat-panel[data-background-skin="sunset"] .group-message-list::before { content: "☀       ·\A    ◦       ☼\A  ·      ◦\A      ☀"; color: #ffd59b; opacity: .23; }
#group-chat-panel[data-background-skin="lavender"] .group-message-list { background: radial-gradient(circle at 16% 13%, rgba(226,181,255,.3), transparent 31%), radial-gradient(circle at 88% 80%, rgba(119,104,255,.26), transparent 38%), linear-gradient(150deg, #382c5d, #17132f 69%); }
#group-chat-panel[data-background-skin="lavender"] .group-message-list::before { content: "❈    ✿     ❈\A    ❈  ✾\A ✿      ❈\A      ✾   ✿"; color: #ead1ff; text-shadow: 0 0 12px rgba(221,174,255,.4); }
#group-chat-panel[data-background-skin="autumn"] .group-message-list { background: radial-gradient(circle at 13% 8%, rgba(255,191,90,.32), transparent 32%), radial-gradient(circle at 86% 82%, rgba(173,65,35,.25), transparent 40%), linear-gradient(155deg, #4b2c1d, #17100d 72%); }
#group-chat-panel[data-background-skin="autumn"] .group-message-list::before { content: "🍂      ·\A   🍁   🍂\A ·      🍁\A   🍂"; color: #ffd28b; }
#group-chat-panel[data-background-skin="winter"] .group-message-list { background: radial-gradient(circle at 12% 10%, rgba(208,244,255,.32), transparent 33%), radial-gradient(circle at 88% 78%, rgba(100,168,233,.25), transparent 39%), linear-gradient(155deg, #1b4057, #091722 72%); }
#group-chat-panel[data-background-skin="winter"] .group-message-list::before { content: "❄     ·   ❅\A   ❅      ❄\A ·    ❄\A      ❅"; color: #dff8ff; }
#group-chat-panel[data-background-skin="sakura"] .group-message-list { background: radial-gradient(circle at 14% 10%, rgba(255,215,228,.34), transparent 34%), radial-gradient(circle at 88% 84%, rgba(230,113,158,.24), transparent 39%), linear-gradient(155deg, #5a3044, #21131f 72%); }
#group-chat-panel[data-background-skin="sakura"] .group-message-list::before { content: "🌸      ❀\A   ❀    🌸\A      ❀\A 🌸"; color: #ffd6e5; }
#group-chat-panel[data-background-skin="forest"] .group-message-list { background: radial-gradient(circle at 16% 12%, rgba(198,255,107,.18), transparent 31%), radial-gradient(circle at 84% 80%, rgba(58,175,115,.23), transparent 39%), linear-gradient(155deg, #183d2c, #071610 72%); }
#group-chat-panel[data-background-skin="forest"] .group-message-list::before { content: "✺      ·\A   ·   ✺\A ✧      ·\A     ✺"; color: #d9ff8f; }
#group-chat-panel[data-background-skin="candy"] .group-message-list { background: radial-gradient(circle at 12% 10%, rgba(255,168,211,.34), transparent 34%), radial-gradient(circle at 88% 80%, rgba(121,211,255,.28), transparent 40%), linear-gradient(150deg, #5c345e, #24345c 72%); }
#group-chat-panel[data-background-skin="candy"] .group-message-list::before { content: "●    ○      ●\A   ○      ●\A ●      ○"; color: #ffe1f3; }
#group-chat-panel[data-background-skin="clouds"] .group-message-list { background: radial-gradient(circle at 16% 8%, rgba(255,255,255,.36), transparent 32%), radial-gradient(circle at 84% 82%, rgba(107,192,255,.28), transparent 40%), linear-gradient(155deg, #397ba2, #14314c 72%); }
#group-chat-panel[data-background-skin="clouds"] .group-message-list::before { content: "☁        ☁\A    ☁\A       ☁\A ☁"; color: #e8f8ff; }
#group-chat-panel[data-background-skin="coffee"] .group-message-list { background: radial-gradient(circle at 14% 10%, rgba(255,220,169,.24), transparent 33%), radial-gradient(circle at 86% 82%, rgba(134,78,44,.25), transparent 40%), linear-gradient(155deg, #4d382d, #1b1411 72%); }
#group-chat-panel[data-background-skin="coffee"] .group-message-list::before { content: "☕      ·\A   ·      ☕\A      ☕\A ·"; color: #f2d2a7; }
#group-chat-panel[data-background-skin="retro"] .group-message-list { background: radial-gradient(circle at 14% 10%, rgba(255,60,197,.34), transparent 34%), radial-gradient(circle at 86% 82%, rgba(41,222,255,.28), transparent 40%), linear-gradient(155deg, #3e1558, #111239 72%); }
#group-chat-panel[data-background-skin="retro"] .group-message-list::before { content: "◆      ✦\A   ▰    ◆\A ✦      ▰"; color: #ff8ee8; }

#group-chat-panel[data-bubble-skin="rose"] .group-message .group-message-bubble { border-color: rgba(255,193,220,.62); background: linear-gradient(145deg, #f26ca7, #a83473); color: #fff; box-shadow: 0 9px 22px rgba(166,42,105,.3); }
#group-chat-panel[data-bubble-skin="ocean"] .group-message .group-message-bubble { border-color: rgba(131,229,255,.62); background: linear-gradient(145deg, #168dc8, #1554ae); color: #fff; box-shadow: 0 9px 22px rgba(14,103,180,.3); }
#group-chat-panel[data-bubble-skin="mint"] .group-message .group-message-bubble { border-color: rgba(166,255,224,.62); background: linear-gradient(145deg, #20a986, #08706f); color: #f4fffb; box-shadow: 0 9px 22px rgba(8,119,104,.28); }
#group-chat-panel[data-bubble-skin="gold"] .group-message .group-message-bubble { border-color: rgba(255,232,162,.78); background: linear-gradient(145deg, #f0bd53, #b56b1e); color: #211509; box-shadow: 0 9px 22px rgba(184,105,25,.28); }
#group-chat-panel[data-bubble-skin="gold"] .group-message .group-message-bubble time, #group-chat-panel[data-bubble-skin="gold"] .group-message .group-message-bubble button { color: rgba(38,22,8,.66); }
#group-chat-panel[data-bubble-skin="violet"] .group-message .group-message-bubble { border-color: rgba(213,181,255,.64); background: linear-gradient(145deg, #8c61dd, #5530a7); color: #fff; box-shadow: 0 9px 22px rgba(87,48,169,.3); }
#group-chat-panel[data-bubble-skin="sunset"] .group-message .group-message-bubble { border-color: rgba(255,205,171,.65); background: linear-gradient(145deg, #fa8d68, #d64b68); color: #fff; box-shadow: 0 9px 22px rgba(207,69,91,.28); }
#group-chat-panel[data-bubble-skin="glass"] .group-message .group-message-bubble { border-color: rgba(194,231,255,.62); background: linear-gradient(145deg, rgba(137,204,246,.46), rgba(82,111,179,.42)); color: #f7fbff; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 9px 22px rgba(29,68,122,.28); backdrop-filter: blur(13px); }
#group-chat-panel[data-bubble-skin="pearl"] .group-message .group-message-bubble { border-color: rgba(255,255,255,.82); background: linear-gradient(145deg, #fff8ec, #d7d5df); color: #292630; box-shadow: 0 9px 22px rgba(197,192,206,.24); }
#group-chat-panel[data-bubble-skin="pearl"] .group-message .group-message-bubble time, #group-chat-panel[data-bubble-skin="pearl"] .group-message .group-message-bubble button { color: rgba(41,38,48,.68); }
#group-chat-panel[data-bubble-skin="sakura"] .group-message .group-message-bubble { border-color: rgba(255,218,231,.76); background: linear-gradient(145deg, #f8a9c6, #c9638e); color: #fff; box-shadow: 0 9px 22px rgba(192,85,130,.28); }
#group-chat-panel[data-bubble-skin="forest"] .group-message .group-message-bubble { border-color: rgba(163,235,185,.62); background: linear-gradient(145deg, #3b9b67, #176048); color: #f5fff8; box-shadow: 0 9px 22px rgba(22,104,71,.28); }
#group-chat-panel[data-bubble-skin="sky"] .group-message .group-message-bubble { border-color: rgba(187,235,255,.7); background: linear-gradient(145deg, #5cb8e5, #337bb9); color: #fff; box-shadow: 0 9px 22px rgba(49,130,190,.28); }
#group-chat-panel[data-bubble-skin="coffee"] .group-message .group-message-bubble { border-color: rgba(239,199,151,.66); background: linear-gradient(145deg, #a96e45, #6a3d2b); color: #fff9ef; box-shadow: 0 9px 22px rgba(105,58,39,.28); }
#group-chat-panel[data-bubble-skin="ruby"] .group-message .group-message-bubble { border-color: rgba(255,152,166,.65); background: linear-gradient(145deg, #cf3e59, #791f3d); color: #fff; box-shadow: 0 9px 22px rgba(151,31,65,.3); }
#group-chat-panel[data-bubble-skin="neon"] .group-message .group-message-bubble { border-color: #5ef5ff; background: linear-gradient(145deg, #6c2ac2, #174d9d); color: #fff; box-shadow: 0 0 0 1px rgba(92,246,255,.2), 0 9px 24px rgba(131,48,222,.38); }
#group-chat-panel[data-bubble-skin="snow"] .group-message .group-message-bubble { border-color: rgba(223,249,255,.84); background: linear-gradient(145deg, #94c9df, #668eb4); color: #fff; box-shadow: 0 9px 22px rgba(91,137,176,.28); }
.group-create-card { width: min(100%, 500px); overflow: hidden; }
.group-form-body, .group-settings-form { display: grid; gap: 9px; padding: 11px; }
.group-form-body label, .group-settings-form label, .group-invite-form label { color: #aeb9c6; font-size: 10px; font-weight: 700; }
.group-form-body input, .group-form-body textarea, .group-form-body select, .group-settings-form input, .group-settings-form textarea, .group-settings-form select, .group-invite-form input { width: 100%; min-height: 40px; margin-top: 4px; padding: 7px 9px; border: 1px solid #3c4653; border-radius: 4px; outline: 0; background: #15191e; color: #f0f3f7; font: inherit; }
.group-form-body select:disabled, .group-settings-form select:disabled { opacity: .5; cursor: not-allowed; }
.group-form-body textarea, .group-settings-form textarea { min-height: 70px; resize: vertical; }
.group-form-body small { display: block; margin-top: 4px; color: #727f8e; font-size: 8px; }
.group-create-card > .primary-button { width: calc(100% - 22px); margin: 0 11px 11px; }
.group-manage-card { width: min(100%, 700px); max-height: 90vh; overflow-y: auto; border-radius: 12px; box-shadow: 0 22px 65px rgba(0,0,0,.48); }
.group-members-card { width: min(100%, 620px); max-height: min(88vh,760px); overflow: hidden auto; border-radius: 12px; box-shadow: 0 22px 65px rgba(0,0,0,.48); }
.group-invite-card { width: min(100%, 520px); overflow: hidden; border-radius: 12px; box-shadow: 0 22px 65px rgba(0,0,0,.48); }
.group-members-summary { min-height: 50px; padding: 9px 11px; border-bottom: 1px solid var(--line); background: #0b0e12; }
.group-members-summary strong, .group-members-summary span { display: block; }
.group-members-summary strong { color: #eef3f8; font-size: 12px; }
.group-members-summary span { margin-top: 3px; color: #84909e; font-size: 9px; }
.group-member-list { background: #0a0d11; }
.group-manage-summary { min-height: 58px; padding: 9px 11px; border-bottom: 1px solid var(--line); background: #0b0e12; }
.group-manage-summary strong, .group-manage-summary span { display: block; }
.group-manage-summary strong { color: #eef3f8; font-size: 14px; }
.group-manage-summary span { margin-top: 4px; color: #84909e; font-size: 9px; }
.group-settings-form { border-bottom: 1px solid var(--line); }
.group-settings-form button, .group-invite-form button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #356b50; border-radius: 4px; background: #173522; color: #82e49e; cursor: pointer; font-size: 10px; font-weight: 800; }
.group-settings-form button svg, .group-invite-form button svg { width: 14px; }
.group-invite-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px; padding: 10px; border-bottom: 1px solid var(--line); }
.group-invite-form button { padding: 0 10px; }
.group-pending-section, .group-member-section { border-bottom: 1px solid var(--line); }
.group-member-row, .group-pending-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.group-member-row:last-child, .group-pending-row:last-child { border-bottom: 0; }
.group-member-row .avatar, .group-pending-row .avatar { width: 36px; height: 36px; }
.group-member-copy { min-width: 0; }
.group-member-profile { display: block; width: 100%; }
.group-member-copy strong, .group-member-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-member-copy strong { color: #e8edf3; font-size: 11px; }
.group-member-copy span { margin-top: 3px; color: #788493; font-size: 8px; }
.group-member-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.group-member-actions button { min-height: 27px; padding: 3px 6px; border: 1px solid #3c4c5c; border-radius: 3px; background: #18222c; color: #a8cae9; cursor: pointer; font-size: 8px; }
.group-member-actions button.danger { border-color: #653943; background: #28151a; color: #ff8d99; }
.chat-profile-avatar { width: 31px; height: 31px; border-radius: 50%; }
.chat-profile-avatar .avatar { width: 30px; height: 30px; }
.chat-profile-name { font-weight: 800; }
.group-danger-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 10px; }
.group-danger-actions button { min-height: 36px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid #4c5764; border-radius: 4px; background: #1a2027; color: #b8c2cd; cursor: pointer; font-size: 9px; }
.group-danger-actions button.danger { border-color: #773743; background: #2b1419; color: #ff8a96; }
.group-avatar-settings { padding-bottom: 10px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 90% 0, rgba(96,168,255,.1), transparent 35%), #080b10; }
.group-avatar-settings > header { min-height: 54px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid #2d3540; color: #e5edf6; }
.group-avatar-settings > header > svg { width: 18px; color: #8cc9ff; }
.group-avatar-settings > header strong, .group-avatar-settings > header span { display: block; }
.group-avatar-settings > header strong { font-size: 14px; }
.group-avatar-settings > header span { margin-top: 3px; color: #d7bd6b; font-size: 12px; }
.group-skin-section { border-bottom: 1px solid var(--line); background: radial-gradient(circle at 90% 0, rgba(185,108,255,.1), transparent 35%), #080b10; }
.group-skin-section > header { min-height: 54px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid #2d3540; color: #e5edf6; }
.group-skin-section > header > svg { width: 18px; color: #d99cff; filter: drop-shadow(0 0 7px rgba(213,136,255,.4)); }
.group-skin-section > header strong, .group-skin-section > header span { display: block; }
.group-skin-section > header strong { font-size: 12px; }
.group-skin-section > header span { margin-top: 3px; color: #d7bd6b; font-size: 9px; }
.group-skin-store-launchers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 11px; border-top: 1px solid #29323c; }
.group-skin-store-launchers > button { min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 9px; padding: 10px; border: 1px solid #35414e; border-radius: 11px; background: linear-gradient(145deg,#151c24,#0e1319); color: inherit; cursor: pointer; text-align: left; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.group-skin-store-launchers > button:hover { border-color: #6485a7; background: #17222d; transform: translateY(-1px); }
.group-skin-launch-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #4a6480; border-radius: 10px; background: radial-gradient(circle at 30% 20%,rgba(122,190,255,.28),transparent 42%),#172738; color: #9bd1ff; }
.group-skin-launch-icon svg { width: 18px; }
.group-skin-store-launchers > button > span:nth-child(2) { min-width: 0; }
.group-skin-store-launchers strong, .group-skin-store-launchers small, .group-skin-store-launchers em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-skin-store-launchers strong { color: #eef4fa; font-size: 10px; }
.group-skin-store-launchers small { margin-top: 3px; color: #9eabb8; font-size: 8px; }
.group-skin-store-launchers em { margin-top: 4px; color: #6eade4; font-size: 7px; font-style: normal; font-weight: 700; }
.group-skin-store-launchers > button > svg { width: 16px; color: #708091; }
.group-skin-store-card { width: min(820px,calc(100vw - 18px)); max-height: min(91vh,820px); overflow: hidden auto; border-radius: 14px; }
.group-skin-store-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #2d3641; background: linear-gradient(145deg,#171e26,#0e1318); }
.group-skin-store-summary span { color: #9ed0ff; font-size: 10px; font-weight: 800; }
.group-skin-store-summary em { color: #d2bd71; font-size: 8px; font-style: normal; }
.group-skin-store-tabs { position: sticky; z-index: 3; top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 7px; border-bottom: 1px solid #2d3641; background: rgba(8,11,15,.96); backdrop-filter: blur(10px); }
.group-skin-store-tabs button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 8px; background: #11171e; color: #8795a4; cursor: pointer; font-size: 9px; font-weight: 800; }
.group-skin-store-tabs button.active { border-color: #4d8fca; background: #17324a; color: #b6ddff; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.group-skin-store-tabs button svg { width: 15px; }
.group-skin-store-card .group-skin-picker-form { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.group-skin-store-card .group-skin-picker-head { position: sticky; z-index: 2; top: 53px; }
.group-skin-store-card .group-skin-picker-foot { position: sticky; z-index: 2; bottom: 0; }
.group-skin-card.owned > em { color: #75d99b; }
.group-skin-card.locked > em { color: #e3c56d; }
.group-avatar-form { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 11px 12px 2px; padding: 11px; border: 1px solid #303a46; border-radius: 12px; background: linear-gradient(145deg, rgba(27,34,43,.9), rgba(12,16,21,.94)); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.group-avatar-preview { width: 50px; height: 50px; }
.group-avatar-form label, .group-avatar-file { color: #bac5d1; font-size: 10px; font-weight: 700; }
.group-avatar-form input { display: block; width: 100%; margin-top: 4px; color: #8996a5; font-size: 9px; }
.group-avatar-form small, .group-avatar-file small { display: block; margin-top: 3px; color: #6d7886; font-size: 8px; font-weight: 400; }
.group-avatar-file { min-width: 0; display: grid; gap: 4px; }
.group-avatar-file > strong { color: #bac5d1; font-size: inherit; }
.group-avatar-file > button { width: max-content; max-width: 100%; min-height: 31px; padding: 5px 8px; overflow: hidden; text-overflow: ellipsis; }
.group-avatar-form button, .group-skin-picker-form button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 10px; border: 1px solid #776333; border-radius: 10px; background: linear-gradient(145deg, #342b16, #211b0e); color: #f3d978; cursor: pointer; font-size: 9px; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 15px rgba(0,0,0,.18); transition: filter .18s ease, transform .18s ease; }
.group-avatar-form button:hover, .group-skin-picker-form button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.group-avatar-form button svg, .group-skin-picker-form button svg { width: 14px; }
.group-avatar-form button:disabled, .group-skin-picker-form button:disabled { opacity: .46; cursor: default; filter: none; transform: none; }
.group-skin-picker-form { margin: 12px; overflow: hidden; border: 1px solid #303a46; border-radius: 14px; background: rgba(11,15,20,.88); box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.group-skin-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-bottom: 1px solid #2c3540; background: linear-gradient(145deg, rgba(36,44,55,.76), rgba(17,22,28,.8)); }
.group-skin-picker-head strong, .group-skin-picker-head span { display: block; }
.group-skin-picker-head strong { color: #eff5fb; font-size: 11px; }
.group-skin-picker-head span { margin-top: 3px; color: #7f8c9a; font-size: 8px; }
.group-skin-picker-head em { flex: 0 0 auto; padding: 4px 8px; border: 1px solid #625328; border-radius: 12px; background: rgba(82,66,28,.36); color: #d9c479; font-size: 8px; font-style: normal; font-weight: 700; }
.group-skin-picker-head em b { color: #ffe07a; }
.group-skin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 11px; }
.group-skin-card { position: relative; min-width: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px; border: 1px solid #323c49; border-radius: 12px; outline: 0; background: #11161c; color: inherit; cursor: pointer; text-align: left; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.group-skin-card:hover, .group-skin-card:focus-visible { border-color: #637b96; background: #171e26; transform: translateY(-1px); }
.group-skin-card.selected { border-color: #5ba5e8; background: #142536; box-shadow: 0 0 0 2px rgba(69,149,221,.16), 0 8px 20px rgba(0,0,0,.18); }
.group-skin-preview { position: relative; height: 66px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: #080b0f; box-shadow: inset 0 0 24px rgba(0,0,0,.2); }
.group-background-preview i { color: rgba(255,255,255,.72); font-family: Georgia, serif; font-size: 25px; font-style: normal; text-shadow: 0 0 12px currentColor; }
.group-skin-card-copy { min-width: 0; padding-right: 2px; }
.group-skin-card-copy strong, .group-skin-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; }
.group-skin-card-copy strong { color: #e8eef5; font-size: 10px; white-space: nowrap; }
.group-skin-card-copy small { margin-top: 4px; color: #788594; font-size: 8px; line-height: 1.35; }
.group-skin-card > em { grid-column: 2; margin-top: -17px; color: #7090ac; font-size: 7px; font-style: normal; font-weight: 800; }
.group-skin-card.current > em { color: #75bdf3; }
.group-skin-card.selected:not(.current) > em { color: #91d0ff; }
.group-skin-picker-foot { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-top: 1px solid #29323c; background: #0c1015; }
.group-skin-picker-foot > span { min-width: 0; overflow: hidden; color: #8f9cab; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.group-skin-picker-foot button { flex: 0 0 auto; }

/* Compact skin shop */
.group-skin-store-card .group-skin-picker-form { background: #0b1016; }
.group-skin-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 10px; }
.group-skin-card { min-height: 154px; display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 7px; border-radius: 11px; }
.group-skin-card .group-skin-preview { width: 100%; height: 78px; flex: 0 0 auto; }
.group-skin-card-copy { min-height: 31px; padding: 0 2px; }
.group-skin-card-copy strong { font-size: 9px; }
.group-skin-card-copy small { margin-top: 3px; color: #8190a0; font-size: 7px; white-space: nowrap; }
.group-skin-card > em.group-skin-card-price { width: 100%; margin: auto 0 0; padding: 5px 6px; border: 1px solid #4b5867; border-radius: 7px; background: #1a222b; color: #dbe8f6; font-size: 8px; line-height: 1; text-align: center; }
.group-skin-card.locked > em.group-skin-card-price { border-color: #705d2c; background: #2a2313; color: #f0d477; }
.group-skin-card.owned > em.group-skin-card-price { border-color: #315f46; background: #14271d; color: #83e1a5; }
.group-skin-card.current > em.group-skin-card-price { border-color: #3b739e; background: #142b3e; color: #9bd5ff; }
.group-skin-detail-backdrop { z-index: 1005; }
.group-skin-detail-card { width: min(440px,calc(100vw - 18px)); overflow: hidden; border-radius: 15px; background: #0c1117; }
.group-skin-detail-preview { padding: 12px; border-bottom: 1px solid #2d3742; background: radial-gradient(circle at 50% 0,rgba(105,169,226,.16),transparent 64%),#090d12; }
.group-skin-detail-preview .group-skin-preview { width: 100%; height: 180px; border-radius: 13px; }
.group-skin-detail-preview .group-bubble-preview i { min-width: 54%; padding: 14px 18px; font-size: 11px; }
.group-skin-detail-copy { padding: 13px 14px 10px; }
.group-skin-detail-copy > span { color: #75b9ed; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.group-skin-detail-copy h3 { margin: 5px 0 0; color: #f3f7fb; font-size: 18px; }
.group-skin-detail-copy p { min-height: 34px; margin: 7px 0 0; color: #91a0af; font-size: 10px; line-height: 1.55; }
.group-skin-detail-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #28313b; }
.group-skin-detail-meta strong { color: #f3d878; font-size: 15px; }
.group-skin-detail-meta em { padding: 4px 7px; border: 1px solid #465463; border-radius: 999px; background: #171e26; color: #9fb0c1; font-size: 8px; font-style: normal; }
.group-skin-detail-action { width: calc(100% - 24px); min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 12px 12px; border: 1px solid #3f7b57; border-radius: 10px; background: linear-gradient(145deg,#25653c,#173d28); color: #d9ffe6; cursor: pointer; font-size: 10px; font-weight: 900; box-shadow: 0 8px 18px rgba(0,0,0,.22); }
.group-skin-detail-action.needs-purchase { border-color: #8a6c2b; background: linear-gradient(145deg,#70551e,#3b2c11); color: #ffe58d; }
.group-skin-detail-action:disabled { opacity: .55; cursor: default; }
.group-skin-detail-action svg { width: 16px; }

/* Group chat uses the same readable type scale as messages and community chat. */
.group-invite-section > header, .group-discover-section > header, .group-pending-section > header, .group-member-section > header { font-size: 14px; }
.group-discover-section > header span { font-size: 12px; }
.group-row-copy strong { font-size: 16px; }
.group-row-copy span { font-size: 14px; }
.group-row-copy small, .group-row-meta { font-size: 12px; }
.group-row-meta time { font-size: 12px; }
.group-row-meta b { font-size: 11px; }
.group-invite-actions button, .group-discover-actions button { min-height: 34px; font-size: 12px; }
.group-chat-title strong { font-size: 17px; }
.group-chat-title span { font-size: 13px; }
.group-pinned-message { font-size: 13px; }
.group-message-form textarea { font-size: 16px; }
.group-message-form button { font-size: 13px; }
.group-message-bubble time, .group-message-bubble button { font-size: 11px; }
.group-form-body label, .group-settings-form label, .group-invite-form label, .group-avatar-form label { font-size: 14px; }
.group-form-body input, .group-form-body textarea, .group-form-body select, .group-settings-form input, .group-settings-form textarea, .group-settings-form select, .group-invite-form input { font-size: 16px; }
.group-form-body small, .group-avatar-form small { font-size: 12px; }
.group-settings-form button, .group-invite-form button, .group-avatar-form button { font-size: 13px; }
.group-members-summary strong { font-size: 15px; }
.group-members-summary span, .group-manage-summary span { font-size: 12px; }
.group-manage-summary strong { font-size: 16px; }
.group-member-copy strong { font-size: 15px; }
.group-member-copy span { font-size: 12px; }
.group-member-actions button { min-height: 31px; font-size: 11px; }
.group-danger-actions button { font-size: 12px; }
.group-skin-store-summary span { font-size: 13px; }
.group-skin-store-summary em { font-size: 11px; }
.group-skin-store-tabs button { font-size: 13px; }
.group-skin-card-copy strong { font-size: 13px; }
.group-skin-card-copy small { font-size: 11px; }
.group-skin-card > em.group-skin-card-price { font-size: 11px; }
.group-skin-detail-copy > span { font-size: 11px; }
.group-skin-detail-copy p { font-size: 13px; }
.group-skin-detail-meta em { font-size: 11px; }
.group-skin-detail-action { font-size: 13px; }

/* Admin skin pricing and request helper */
.admin-skin-code-editor { margin: 10px 10px 0; overflow: hidden; border: 1px solid #4b5664; border-radius: 8px; background: #0d1116; }
.admin-skin-code-editor > header { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-bottom: 1px solid #303945; background: radial-gradient(circle at 100% 0,rgba(91,162,226,.13),transparent 48%),#171c22; }
.admin-skin-code-editor > header > div { min-width: 0; }
.admin-skin-code-editor > header strong, .admin-skin-code-editor > header span { display: block; }
.admin-skin-code-editor > header strong { color: #eef4fa; font-size: 13px; }
.admin-skin-code-editor > header span { margin-top: 3px; color: #8996a5; font-size: 9px; line-height: 1.45; }
.admin-skin-code-editor > header button { flex: 0 0 auto; min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #41678a; border-radius: 6px; background: #172b3d; color: #a7d7ff; cursor: pointer; font-size: 9px; font-weight: 800; }
.admin-skin-code-editor > header button svg { width: 14px; }
#admin-custom-skin-form { padding: 10px; border-bottom: 1px solid #303945; background: #0b0f14; }
.admin-skin-code-field textarea { min-height: 150px; color: #a9e7ff; font-family: Consolas,"Courier New",monospace; font-size: 11px; line-height: 1.55; tab-size: 2; }
.admin-skin-code-field small { display: block; margin-top: 5px; color: #758393; font-size: 8px; font-weight: 400; }
.admin-skin-code-actions { display: grid; grid-template-columns: minmax(0,.55fr) minmax(0,1fr); gap: 8px; margin-top: 10px; }
.admin-skin-code-actions button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #465463; border-radius: 6px; background: #1a222b; color: #c3d0dd; cursor: pointer; font-size: 9px; font-weight: 800; }
.admin-skin-code-actions button.primary-button { border-color: #38724f; background: linear-gradient(145deg,#225a37,#163824); color: #baf4ce; }
.admin-skin-code-actions button svg { width: 15px; }
.admin-custom-skin-list > article { min-height: 66px; display: grid; grid-template-columns: 74px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; border-bottom: 1px solid #29313a; }
.admin-custom-skin-list > article:last-child { border-bottom: 0; }
.admin-custom-skin-list .group-skin-preview { width: 74px; height: 48px; }
.admin-custom-skin-list > article > div { min-width: 0; }
.admin-custom-skin-list strong, .admin-custom-skin-list span, .admin-custom-skin-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-custom-skin-list strong { color: #e7edf4; font-size: 10px; }
.admin-custom-skin-list span { margin-top: 3px; color: #93a2b1; font-size: 8px; }
.admin-custom-skin-list small { margin-top: 3px; color: #657383; font-size: 7px; }
.admin-custom-skin-list code { color: #f2cf68; }
.admin-custom-skin-list > article > button { min-height: 31px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #4c5968; border-radius: 5px; background: #1b232c; color: #b8c9da; cursor: pointer; font-size: 8px; font-weight: 800; }
.admin-custom-skin-list > article > button svg { width: 13px; }
.admin-skin-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.75fr); gap: 10px; padding: 10px; }
.admin-skin-prices, .admin-skin-request { overflow: hidden; border: 1px solid #343e49; border-radius: 7px; background: #0d1116; }
.admin-skin-prices > header, .admin-skin-request > header { padding: 10px 11px; border-bottom: 1px solid #303945; background: #171c22; }
.admin-skin-prices > header strong, .admin-skin-request > header strong { display: block; color: #eef3f8; font-size: 12px; }
.admin-skin-prices > header span, .admin-skin-request > header span { display: block; margin-top: 3px; color: #7f8c9b; font-size: 9px; line-height: 1.45; }
.admin-skin-price-group { padding: 10px; border-bottom: 1px solid #29313a; }
.admin-skin-price-group > h3 { margin: 0 0 8px; color: #ff8e99; font-size: 11px; }
.admin-skin-price-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.admin-skin-price-item { min-width: 0; display: grid; grid-template-columns: 58px minmax(0,1fr) 86px; align-items: center; gap: 7px; padding: 6px; border: 1px solid #303a45; border-radius: 7px; background: #12171d; }
.admin-skin-price-item .group-skin-preview { width: 58px; height: 42px; }
.admin-skin-price-item > span { min-width: 0; }
.admin-skin-price-item strong, .admin-skin-price-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-skin-price-item strong { color: #dfe6ee; font-size: 9px; }
.admin-skin-price-item small { margin-top: 3px; color: #687585; font-size: 7px; }
.admin-skin-price-item label { color: #8190a0; font-size: 7px; }
.admin-skin-price-item input { width: 100%; height: 31px; margin-top: 3px; padding: 4px 6px; border: 1px solid #475463; border-radius: 5px; outline: 0; background: #090c10; color: #f4d677; text-align: right; }
.admin-skin-price-item input:focus { border-color: #c98b3d; }
.admin-skin-price-item input:disabled { color: #7f8995; opacity: .65; }
.admin-skin-prices > button { width: calc(100% - 20px); margin: 10px; }
.admin-skin-request-body { display: grid; gap: 9px; padding: 10px; }
.admin-skin-request-body label { color: #9aa6b4; font-size: 9px; }
.admin-skin-request-body input, .admin-skin-request-body select, .admin-skin-request-body textarea { width: 100%; min-height: 38px; margin-top: 4px; padding: 7px 8px; border: 1px solid #3b4653; border-radius: 5px; outline: 0; background: #151a20; color: #edf2f7; font-size: 10px; }
.admin-skin-request-body textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
.admin-skin-request-body textarea[readonly] { color: #9fd0ff; background: #101b25; }
.admin-skin-request-output { min-height: 150px !important; color: #e6d38f !important; background: #15130d !important; }
.admin-skin-request-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.admin-skin-request-actions button { min-height: 37px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #465464; border-radius: 6px; background: #1b232c; color: #c9d6e3; cursor: pointer; font-size: 9px; font-weight: 800; }
.admin-skin-request-actions button:last-child { border-color: #376b4c; background: #183524; color: #91e4ad; }
.group-background-preview[data-preview-skin="midnight"] { background: radial-gradient(circle at 20% 15%, rgba(87,166,255,.18), transparent 32%), linear-gradient(150deg, #111a26, #05070a); }
.group-background-preview[data-preview-skin="hearts"] { background: radial-gradient(circle at 20% 12%, rgba(255,144,191,.3), transparent 35%), linear-gradient(145deg, #5a2045, #190d20); }
.group-background-preview[data-preview-skin="blossoms"] { background: radial-gradient(circle at 78% 22%, rgba(255,190,210,.25), transparent 32%), linear-gradient(145deg, #245144, #0a1b18); }
.group-background-preview[data-preview-skin="aurora"] { background: radial-gradient(ellipse at 15% 20%, rgba(46,255,187,.45), transparent 40%), radial-gradient(ellipse at 85% 76%, rgba(130,91,255,.5), transparent 46%), #101a30; }
.group-background-preview[data-preview-skin="ocean"] { background: radial-gradient(circle at 16% 15%, rgba(91,242,239,.32), transparent 35%), linear-gradient(150deg, #10505d, #08152c); }
.group-background-preview[data-preview-skin="starlight"] { background: radial-gradient(circle at 20% 10%, rgba(139,137,255,.4), transparent 34%), linear-gradient(150deg, #202763, #080b24); }
.group-background-preview[data-preview-skin="sunset"] { background: radial-gradient(circle at 13% 7%, rgba(255,206,123,.48), transparent 37%), linear-gradient(150deg, #80414a, #2a152e); }
.group-background-preview[data-preview-skin="lavender"] { background: radial-gradient(circle at 22% 12%, rgba(233,190,255,.4), transparent 36%), linear-gradient(150deg, #57417f, #1d1739); }
.group-background-preview[data-preview-skin="autumn"] { background: radial-gradient(circle at 16% 12%,rgba(255,194,96,.42),transparent 36%),linear-gradient(150deg,#714326,#261712); }
.group-background-preview[data-preview-skin="winter"] { background: radial-gradient(circle at 18% 12%,rgba(224,248,255,.46),transparent 36%),linear-gradient(150deg,#3d7c9d,#10293b); }
.group-background-preview[data-preview-skin="sakura"] { background: radial-gradient(circle at 80% 18%,rgba(255,218,231,.45),transparent 34%),linear-gradient(150deg,#78445e,#2a1725); }
.group-background-preview[data-preview-skin="forest"] { background: radial-gradient(circle at 18% 15%,rgba(210,255,113,.3),transparent 35%),linear-gradient(150deg,#286446,#091c15); }
.group-background-preview[data-preview-skin="candy"] { background: radial-gradient(circle at 18% 13%,rgba(255,179,222,.42),transparent 35%),radial-gradient(circle at 85% 75%,rgba(121,220,255,.4),transparent 42%),#3d315f; }
.group-background-preview[data-preview-skin="clouds"] { background: radial-gradient(circle at 22% 15%,rgba(255,255,255,.52),transparent 36%),linear-gradient(150deg,#69b7df,#24557b); }
.group-background-preview[data-preview-skin="coffee"] { background: radial-gradient(circle at 18% 13%,rgba(255,221,174,.35),transparent 36%),linear-gradient(150deg,#6a4a38,#211713); }
.group-background-preview[data-preview-skin="retro"] { background: radial-gradient(circle at 18% 13%,rgba(255,58,202,.42),transparent 36%),radial-gradient(circle at 84% 76%,rgba(38,229,255,.38),transparent 42%),#27134e; }
.group-bubble-preview { justify-items: end; padding: 9px; background: radial-gradient(circle at 10% 5%, rgba(90,153,221,.12), transparent 40%), #080c11; }
.group-bubble-preview i { max-width: 94%; padding: 7px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 13px 5px 13px 13px; background: linear-gradient(145deg, #2b323b, #1b2027); color: #fff; font-size: 8px; font-style: normal; line-height: 1.25; box-shadow: 0 6px 14px rgba(0,0,0,.24); }
.group-bubble-preview i[data-custom-bubble-tone="dark"] { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.8) !important; }
.group-bubble-preview i[data-custom-bubble-tone="light"] { color: #10151b !important; text-shadow: 0 1px 1px rgba(255,255,255,.52) !important; }
.group-bubble-preview[data-preview-skin="rose"] i { background: linear-gradient(145deg,#bd4079,#76254f); color:#fff9fc; }
.group-bubble-preview[data-preview-skin="ocean"] i { background: linear-gradient(145deg,#126f9d,#0e527f); color:#f7fdff; }
.group-bubble-preview[data-preview-skin="mint"] i { background: linear-gradient(145deg,#18816e,#0b5a51); color:#f5fffb; }
.group-bubble-preview[data-preview-skin="gold"] i { background: linear-gradient(145deg,#e7b84c,#b66f1d); color:#1d1205; }
.group-bubble-preview[data-preview-skin="violet"] i { background: linear-gradient(145deg,#7651bd,#442979); color:#fdfaff; }
.group-bubble-preview[data-preview-skin="sunset"] i { background: linear-gradient(145deg,#aa463f,#813247); color:#fff9f5; }
.group-bubble-preview[data-preview-skin="glass"] i { border-color:#c2e9ff;background:linear-gradient(145deg,rgba(48,98,139,.93),rgba(37,61,102,.94));color:#fbfdff;backdrop-filter:blur(8px); }
.group-bubble-preview[data-preview-skin="pearl"] i { background:linear-gradient(145deg,#efe7dc,#c6c8d3);color:#211f27; }
.group-bubble-preview[data-preview-skin="sakura"] i { background:linear-gradient(145deg,#e88cae,#cf7298);color:#250f1a; }
.group-bubble-preview[data-preview-skin="forest"] i { background:linear-gradient(145deg,#2d774f,#18523b);color:#f6fff9; }
.group-bubble-preview[data-preview-skin="sky"] i { background:linear-gradient(145deg,#83c8e9,#4e96c3);color:#071f34; }
.group-bubble-preview[data-preview-skin="coffee"] i { background:linear-gradient(145deg,#9c643e,#613727);color:#fffaf3; }
.group-bubble-preview[data-preview-skin="ruby"] i { background:linear-gradient(145deg,#c43854,#721d39);color:#fff9fa; }
.group-bubble-preview[data-preview-skin="neon"] i { border-color:#8cffff;background:linear-gradient(145deg,#6827ad,#174d91);color:#fbfdff;box-shadow:0 0 12px rgba(94,245,255,.32); }
.group-bubble-preview[data-preview-skin="snow"] i { background:linear-gradient(145deg,#b7dce9,#789ebc);color:#0b2436; }

/* Group conversations use the same rich composer and message language as direct chat. */
.group-compose-dock { position: relative; z-index: 3; border-bottom: 1px solid #303946; background: #0e1115; box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.group-message-form { display: block; padding: 8px; border: 0; background: #0e1115; box-shadow: none; }
.group-message-form textarea { width: 100%; min-height: 58px; max-height: 130px; margin: 0; padding: 8px 9px; resize: vertical; border: 1px solid var(--line); border-radius: 4px; outline: 0; background: #191c21; color: #edf1f6; font-size: 11px; box-shadow: none; }
.group-message-form textarea:focus { border-color: #4c7db1; box-shadow: none; }
.group-message-form button { min-width: 0; border-radius: 4px; box-shadow: none; }
.group-message-form .composer-media-preview, .group-message-form .composer-style-panel { margin-left: 0; }
.group-message-form .composer-actions { justify-content: flex-start; gap: 7px; padding-left: 0; }
.group-message-form .composer-actions .post-tools { flex: 1; }
.group-message-form .direct-send-button { min-width: 62px; border: 1px solid #2f68ae; background: #2071dc; color: #fff; }
.group-message-bubble { display: inline-block; width: fit-content; min-width: 0; max-width: 100%; padding: 0; overflow: visible; white-space: normal; }
.group-message-bubble .direct-message-text { white-space: pre-wrap; }
.group-message-bubble time { margin-left: 4px; font-size: 11px; }
.group-message-bubble .direct-message-state > button { display: inline; margin: 0; padding: 0; color: #ff5d69; }
.group-message.own .group-message-bubble .direct-message-state > button { color: #ff7c87; }
.group-message-bubble .direct-message-actions > button,
.group-message-bubble button.direct-reaction-total { display: grid; margin: 0; padding: 0; }
.group-message-bubble button.direct-reaction-total { display: inline-flex; padding: 2px 7px; }

/* Paid direct-message theme gallery. */
.direct-theme-card { width: min(720px, calc(100vw - 18px)); max-height: min(88vh, 760px); overflow: hidden auto; border-radius: 14px; }
.direct-theme-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #303844; background: linear-gradient(145deg,#171d24,#0e1217); }
.direct-theme-summary span { color: #9ed0ff; font-size: 10px; font-weight: 800; }
.direct-theme-summary em { color: #8793a0; font-size: 8px; font-style: normal; }
.direct-theme-summary em b { color: #ffe276; }
.direct-background-picker { display: grid; gap: 9px; margin: 12px 12px 2px; padding: 11px; border: 1px solid #394653; border-radius: 12px; background: linear-gradient(145deg,#121820,#0b0f14); }
.direct-background-picker > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.direct-background-picker > header > span { min-width: 0; display: grid; gap: 3px; }
.direct-background-picker > header strong { display: flex; align-items: center; gap: 6px; color: #e8f1fa; font-size: 11px; }
.direct-background-picker > header strong svg { width: 14px; color: #75bdf5; }
.direct-background-picker > header small, .direct-background-picker > small { color: #83909e; font-size: 8px; line-height: 1.45; }
.direct-background-picker > header > b { flex: 0 0 auto; color: #ffe276; font-size: 9px; }
.direct-background-preview { position: relative; min-height: 142px; display: grid; align-content: center; overflow: hidden; padding: 18px 14px 31px; border: 1px solid #414e5c; border-radius: 11px; background-color: #0b0f15; background-image: radial-gradient(circle at 15% 8%,rgba(67,138,206,.22),transparent 31%),linear-gradient(155deg,#152130,#080b10); background-position: center; background-size: cover; isolation: isolate; }
.direct-background-preview.has-image { background-image: linear-gradient(rgba(4,7,11,.38),rgba(4,7,11,.48)),var(--direct-background-preview-image); background-position: center,center top; background-size: 100% 100%,100% auto; background-repeat: no-repeat,repeat-y; }
.direct-background-preview::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(3,5,8,.66)); pointer-events: none; }
.direct-background-preview-bubbles { display: grid; gap: 8px; }
.direct-background-preview-bubbles i { width: fit-content; max-width: 78%; padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px 13px 13px 5px; background: rgba(23,29,37,.88); color: #f3f7fb; font-size: 10px; font-style: normal; box-shadow: 0 5px 15px rgba(0,0,0,.3); backdrop-filter: blur(4px); }
.direct-background-preview-bubbles i:last-child { justify-self: end; border-color: rgba(93,164,244,.75); border-radius: 13px 13px 5px 13px; background: rgba(33,109,205,.9); }
.direct-background-preview > em { position: absolute; right: 9px; bottom: 8px; left: 9px; overflow: hidden; color: #e4ebf3; font-size: 8px; font-style: normal; text-align: center; text-overflow: ellipsis; text-shadow: 0 1px 5px #000; white-space: nowrap; }
.direct-background-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.direct-background-actions button { min-height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid #465462; border-radius: 9px; background: #151b22; color: #dce7f1; cursor: pointer; font-size: 9px; font-weight: 800; }
.direct-background-actions button > svg { width: 14px; }
.direct-background-actions button.primary-button { grid-column: 1 / -1; border-color: #3b83c8; background: #1d68ad; color: #fff; }
.direct-background-actions button:disabled { cursor: not-allowed; opacity: .52; }
.direct-background-actions button [data-lucide="loader-circle"] { animation: partyTransitionSpin .8s linear infinite; }
.direct-theme-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 12px; }
.direct-theme-option { min-width: 0; display: grid; grid-template-columns: 126px minmax(0,1fr); align-items: center; gap: 10px; padding: 7px; border: 1px solid #323c48; border-radius: 12px; background: #10151b; color: inherit; cursor: pointer; text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.direct-theme-option:hover, .direct-theme-option:focus-visible { border-color: #607d9c; background: #171e26; outline: 0; transform: translateY(-1px); }
.direct-theme-option.active { border-color: #5ba5e8; background: #142536; box-shadow: 0 0 0 2px rgba(69,149,221,.15); }
.direct-theme-preview { position: relative; height: 76px; display: grid; align-content: center; justify-items: end; gap: 5px; overflow: hidden; padding: 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: #080b0f; }
.direct-theme-preview::before { content: ""; position: absolute; inset: 0; opacity: .55; }
.direct-theme-preview i { position: relative; z-index: 1; justify-self: start; color: rgba(255,255,255,.8); font-size: 22px; font-style: normal; text-shadow: 0 0 12px currentColor; }
.direct-theme-preview b { position: relative; z-index: 1; max-width: 90%; padding: 6px 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px 4px 12px 12px; background: #252a31; color: #fff; font-size: 8px; box-shadow: 0 5px 12px rgba(0,0,0,.24); }
.direct-theme-option > span:last-child { min-width: 0; }
.direct-theme-option strong, .direct-theme-option small, .direct-theme-option em { display: block; }
.direct-theme-option strong { overflow: hidden; color: #eaf0f6; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.direct-theme-option small { min-height: 22px; margin-top: 4px; color: #788594; font-size: 8px; line-height: 1.35; }
.direct-theme-option em { margin-top: 6px; color: #7ebdf2; font-size: 8px; font-style: normal; font-weight: 800; }
.direct-theme-note { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid #2b333d; background: #0c1015; color: #7f8b98; font-size: 8px; }
.direct-theme-note svg { width: 14px; color: #6aaee9; }

.direct-theme-preview[data-theme-preview="goc-nho"],
#direct-conversation-panel[data-direct-theme="goc-nho"] .direct-message-list {
  background-color: #0b1024;
  background-image: linear-gradient(rgba(7,10,25,.08),rgba(7,10,25,.2)),url('/assets/images/themes/goc-nho-chat-landscape.webp?v=1');
  background-position: center;
  background-size: cover;
}
.direct-theme-preview[data-theme-preview="goc-nho"]::before,
#direct-conversation-panel[data-direct-theme="goc-nho"] .direct-message-list::before { content: ""; }
#direct-conversation-panel[data-direct-theme="goc-nho"] .direct-message.own .direct-message-bubble { border-color: #78d6cf; background: linear-gradient(145deg,#438f93,#5350a1); box-shadow: 0 7px 18px rgba(20,13,52,.26); }

.direct-theme-preview[data-theme-preview="friendship"],
#direct-conversation-panel[data-direct-theme="friendship"] .direct-message-list { background: radial-gradient(circle at 12% 12%,rgba(112,215,255,.28),transparent 34%),radial-gradient(circle at 90% 82%,rgba(73,140,231,.22),transparent 38%),linear-gradient(155deg,#183a52,#081727 70%); }
.direct-theme-preview[data-theme-preview="friendship"]::before,
#direct-conversation-panel[data-direct-theme="friendship"] .direct-message-list::before { content: "☁   ♡      ☁\A   ✦    ☁\A ☁      ♡"; color: #bdeaff; }
#direct-conversation-panel[data-direct-theme="friendship"] .direct-message.own .direct-message-bubble { border-color: #80cdf5; background: linear-gradient(145deg,#3e9bd4,#2862aa); }

.direct-theme-preview[data-theme-preview="galaxy"],
#direct-conversation-panel[data-direct-theme="galaxy"] .direct-message-list { background: radial-gradient(circle at 15% 12%,rgba(155,103,255,.4),transparent 31%),radial-gradient(circle at 85% 78%,rgba(40,139,255,.28),transparent 38%),linear-gradient(155deg,#17154c,#060719 72%); }
.direct-theme-preview[data-theme-preview="galaxy"]::before,
#direct-conversation-panel[data-direct-theme="galaxy"] .direct-message-list::before { content: "✦   ·    ★\A   ✧      ·\A ★    ·   ✦"; color: #dce1ff; }
#direct-conversation-panel[data-direct-theme="galaxy"] .direct-message.own .direct-message-bubble { border-color: #b99cff; background: linear-gradient(145deg,#7959d8,#3c3d9f); }

.direct-theme-preview[data-theme-preview="love"],
#direct-conversation-panel[data-direct-theme="love"] .direct-message-list { background: radial-gradient(circle at 12% 12%,rgba(255,139,185,.34),transparent 32%),radial-gradient(circle at 88% 82%,rgba(219,55,125,.26),transparent 38%),linear-gradient(155deg,#4f1b3b,#190c1e 70%); }
.direct-theme-preview[data-theme-preview="love"]::before,
#direct-conversation-panel[data-direct-theme="love"] .direct-message-list::before { content: "♥   ♡      ♥\A   ♡    ♥\A ♥      ♡"; color: #ffc0dc; }
#direct-conversation-panel[data-direct-theme="love"] .direct-message.own .direct-message-bubble { border-color: #ffb5d3; background: linear-gradient(145deg,#ec6da3,#a52d6f); }

.direct-theme-preview[data-theme-preview="autumn"],
#direct-conversation-panel[data-direct-theme="autumn"] .direct-message-list { background: radial-gradient(circle at 13% 8%,rgba(255,191,90,.32),transparent 32%),radial-gradient(circle at 86% 82%,rgba(173,65,35,.25),transparent 40%),linear-gradient(155deg,#4b2c1d,#17100d 72%); }
.direct-theme-preview[data-theme-preview="autumn"]::before,
#direct-conversation-panel[data-direct-theme="autumn"] .direct-message-list::before { content: "🍂      ·\A   🍁   🍂\A ·      🍁"; color: #ffd28b; }
#direct-conversation-panel[data-direct-theme="autumn"] .direct-message.own .direct-message-bubble { border-color: #e9a15b; background: linear-gradient(145deg,#c47735,#7f3d27); }

.direct-theme-preview[data-theme-preview="winter"],
#direct-conversation-panel[data-direct-theme="winter"] .direct-message-list { background: radial-gradient(circle at 12% 10%,rgba(208,244,255,.32),transparent 33%),radial-gradient(circle at 88% 78%,rgba(100,168,233,.25),transparent 39%),linear-gradient(155deg,#1b4057,#091722 72%); }
.direct-theme-preview[data-theme-preview="winter"]::before,
#direct-conversation-panel[data-direct-theme="winter"] .direct-message-list::before { content: "❄     ·   ❅\A   ❅      ❄\A ·    ❄"; color: #dff8ff; }
#direct-conversation-panel[data-direct-theme="winter"] .direct-message.own .direct-message-bubble { border-color: #bfeeff; background: linear-gradient(145deg,#63acd0,#3973a5); }

.direct-theme-preview[data-theme-preview="spring"],
#direct-conversation-panel[data-direct-theme="spring"] .direct-message-list { background: radial-gradient(circle at 12% 10%,rgba(255,199,219,.3),transparent 33%),radial-gradient(circle at 87% 80%,rgba(109,206,142,.23),transparent 39%),linear-gradient(155deg,#244b3b,#0d211b 72%); }
.direct-theme-preview[data-theme-preview="spring"]::before,
#direct-conversation-panel[data-direct-theme="spring"] .direct-message-list::before { content: "✿     ❀\A   ❀      ✿\A ✿    ·"; color: #ffd6e5; }
#direct-conversation-panel[data-direct-theme="spring"] .direct-message.own .direct-message-bubble { border-color: #c7f0cf; background: linear-gradient(145deg,#56ad78,#28765e); }

.direct-theme-preview[data-theme-preview="ocean"],
#direct-conversation-panel[data-direct-theme="ocean"] .direct-message-list { background: radial-gradient(circle at 13% 10%,rgba(86,232,230,.3),transparent 33%),radial-gradient(circle at 86% 82%,rgba(27,113,216,.28),transparent 40%),linear-gradient(155deg,#0d3f49,#071526 72%); }
.direct-theme-preview[data-theme-preview="ocean"]::before,
#direct-conversation-panel[data-direct-theme="ocean"] .direct-message-list::before { content: "◦    ≋     ○\A   ○     ◦\A ≋      ○"; color: #a3f4f1; }
#direct-conversation-panel[data-direct-theme="ocean"] .direct-message.own .direct-message-bubble { border-color: #84e4ea; background: linear-gradient(145deg,#168fc0,#15519d); }

#direct-conversation-panel[data-direct-theme]:not([data-direct-theme="classic"]) .direct-message-list { position: relative; isolation: isolate; }
#direct-conversation-panel[data-direct-theme]:not([data-direct-theme="classic"]) .direct-message-list::before { position: absolute; z-index: -1; inset: 0; padding: 28px 18px; pointer-events: none; white-space: pre-wrap; font: 25px/3.2 Georgia,serif; letter-spacing: 16px; opacity: .33; text-shadow: 0 0 15px currentColor; }
#direct-conversation-panel[data-direct-theme]:not([data-direct-theme="classic"]) .direct-message-list > * { position: relative; z-index: 1; }
#direct-conversation-panel[data-direct-theme]:not([data-direct-theme="classic"]) .direct-conversation-head,
#direct-conversation-panel[data-direct-theme]:not([data-direct-theme="classic"]) .direct-compose-dock { border-color: rgba(255,255,255,.13); background: linear-gradient(145deg,rgba(25,31,39,.97),rgba(10,13,18,.97)); }
#direct-conversation-panel[data-direct-theme]:not([data-direct-theme="classic"]) .direct-message:not(.own) .direct-message-bubble { border-color: rgba(255,255,255,.2); background: rgba(12,16,22,.88); backdrop-filter: blur(7px); }
#direct-conversation-panel[data-direct-theme].has-custom-direct-background .direct-message-list { position: relative; isolation: isolate; background-color: #090c10; background-image: linear-gradient(rgba(4,7,10,.42),rgba(4,7,10,.5)),var(--direct-chat-background-image); background-position: center,center top; background-size: 100% 100%,100% auto; background-repeat: no-repeat,repeat-y; background-attachment: local; }
#direct-conversation-panel[data-direct-theme].has-custom-direct-background .direct-message-list::before { content: ""; }
#direct-conversation-panel[data-direct-theme].has-custom-direct-background .direct-message-list > * { position: relative; z-index: 1; }
#direct-conversation-panel[data-direct-theme].has-custom-direct-background .direct-message:not(.own) .direct-message-bubble { border-color: rgba(255,255,255,.24); background: rgba(13,17,23,.86); backdrop-filter: blur(7px); }

@media (max-width: 560px) {
  #direct-conversation-panel[data-direct-theme="goc-nho"] .direct-message-list { background-image: linear-gradient(rgba(7,10,25,.08),rgba(7,10,25,.2)),url('/assets/images/themes/goc-nho-chat-portrait.webp?v=1'); }
  .message-inbox-title-actions small { display: none; }
  .message-inbox-title-actions button { padding-inline: 7px; font-size: 9px; }
  .group-row, .group-discover-row, .group-invite-row { grid-template-columns: 38px minmax(0, 1fr); }
  .group-row .group-avatar, .group-discover-row .group-avatar, .group-invite-row .group-avatar { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; }
  .group-row-meta, .group-invite-actions, .group-discover-actions { grid-column: 2; justify-items: start; }
  .group-row-meta { width: 100%; display: flex; align-items: center; justify-content: flex-end; }
  .group-invite-actions, .group-discover-actions { justify-content: flex-start; }
  .group-message-form .direct-send-button { min-width: 54px; }
  .group-message-list { min-height: 360px; height: auto; }
  .group-message-body { max-width: 92%; }
  .group-chat-tools button { min-width: 78px; min-height: 47px; padding-inline: 8px; }
  .group-message-account { gap: 7px; }
  .group-message-account-avatar { width: 34px; height: 34px; flex-basis: 34px; }
  .group-message-account-copy .user-identity-top > em { padding-inline: 5px; font-size: 9px; }
  .group-invite-form { grid-template-columns: 1fr; }
  .group-avatar-form { grid-template-columns: 44px minmax(0, 1fr); }
  .group-avatar-form button { grid-column: 1 / -1; }
  .group-skin-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 7px; }
  .group-skin-card { min-height: 139px; display: flex; padding: 6px; }
  .group-skin-card .group-skin-preview { height: 68px; }
  .group-skin-picker-head, .group-skin-picker-foot { align-items: flex-start; flex-direction: column; }
  .group-skin-picker-foot button { width: 100%; }
  .group-member-row, .group-pending-row { grid-template-columns: 34px minmax(0, 1fr); }
  .group-member-actions { grid-column: 2; justify-content: flex-start; }
  .group-skin-store-launchers { grid-template-columns: 1fr; }
  .group-skin-store-summary { align-items: flex-start; flex-direction: column; }
  .direct-theme-summary { align-items: flex-start; flex-direction: column; }
  .direct-background-picker > header { align-items: flex-start; flex-direction: column; }
  .direct-background-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .direct-theme-grid { grid-template-columns: 1fr; }
  .direct-theme-option { grid-template-columns: 112px minmax(0,1fr); }
  .admin-skin-layout { grid-template-columns: 1fr; padding: 7px; }
  .admin-skin-price-grid { grid-template-columns: 1fr; }
  .admin-skin-code-editor { margin: 7px 7px 0; }
  .admin-skin-code-editor > header { align-items: flex-start; flex-direction: column; }
  .admin-skin-code-actions { grid-template-columns: 1fr; }
  .admin-custom-skin-list > article { grid-template-columns: 62px minmax(0,1fr); }
  .admin-custom-skin-list .group-skin-preview { width: 62px; }
  .admin-custom-skin-list > article > button { grid-column: 2; justify-self: start; }
}

.view[data-page="landing"], .view[data-page="login"], .view[data-page="register"] { width: 100%; }
.auth-panel { width: 100%; max-width: none; min-height: calc(100vh - 128px); margin: 0; overflow: hidden; border-inline: 0; border-radius: 0; background: #050607; }
.auth-welcome-title { min-height: 42px; padding: 8px 13px; border-bottom: 1px solid #3b4047; background: linear-gradient(180deg, #292b30, #1d1f23); font-size: 13px; }
.auth-welcome-title span { display: inline-flex; align-items: center; gap: 6px; color: #24df48; font-weight: 800; }
.auth-welcome-title svg { width: 17px; height: 17px; color: #ff4f64; fill: currentColor; }
.auth-stage { min-height: 620px; padding: 18px 14px 30px; background: radial-gradient(circle at 50% 0, rgba(70, 120, 180, .08), transparent 36%), #050607; }
.auth-register-stage { min-height: 760px; }
.auth-hero { margin-bottom: 15px; text-align: center; }
.auth-hero strong { display: block; color: #ffad12; font-family: var(--font-teen) !important; font-size: 17px; line-height: 1.45; }
.auth-hero span { display: block; margin-top: 1px; color: #ff8bd5; font-size: 17px; letter-spacing: 1px; text-shadow: 0 0 8px rgba(255, 86, 190, .35); }
.seo-landing-stage { display: grid; min-height: 620px; align-content: center; gap: 18px; }
.seo-landing-card { width: min(100%, 760px); margin: 0 auto; padding: 30px 24px; border: 1px solid #3a4048; border-radius: 12px; background: linear-gradient(145deg, rgba(29,34,42,.98), rgba(8,10,13,.98)); box-shadow: 0 22px 58px rgba(0,0,0,.45); text-align: center; }
.seo-landing-kicker { display: inline-block; margin-bottom: 10px; color: #ffad12; font-size: 12px; font-weight: 900; letter-spacing: 1.5px; }
.seo-landing-card h1 { max-width: 680px; margin: 0 auto; color: #fff; font-family: var(--font-vietnamese) !important; font-size: clamp(26px, 5vw, 42px); line-height: 1.25; text-wrap: balance; }
.seo-landing-card > p { max-width: 650px; margin: 15px auto 0; color: #c4ceda; font-size: 14px; line-height: 1.75; }
.seo-landing-card > small { display: block; margin-top: 14px; color: #788696; font-size: 10px; }
.seo-landing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.seo-landing-actions a { display: inline-flex; min-width: 150px; min-height: 44px; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border: 1px solid #465568; border-radius: 7px; background: #171c23; color: #e8eef7; font-size: 13px; font-weight: 900; text-decoration: none; }
.seo-landing-actions a:hover { border-color: #6da7eb; background: #1d2733; color: #fff; }
.seo-landing-actions a svg { width: 17px; height: 17px; }
.seo-landing-actions .seo-landing-primary { border-color: #2f7ee3; background: linear-gradient(180deg, #347cf0, #2569db); color: #fff; }
.seo-landing-quick-room { width: min(100%, 430px); margin: 10px auto 0; }
.seo-landing-quick-room > a { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border: 1px solid #3b9a72; border-radius: 7px; background: linear-gradient(180deg, #173d31, #102b24); color: #a8f1cf; font-size: 13px; font-weight: 900; text-decoration: none; transition: .18s ease; }
.seo-landing-quick-room > a:hover { border-color: #63d9a6; background: linear-gradient(180deg, #1d4c3d, #14372e); color: #fff; }
.seo-landing-quick-room > a svg { width: 18px; height: 18px; }
.seo-landing-quick-room > small { display: block; margin-top: 8px; color: #8d9daf; font-size: 10px; line-height: 1.5; }
.seo-landing-features { display: grid; width: min(100%, 900px); margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.seo-landing-features article, .seo-landing-features > section { display: flex; align-items: flex-start; gap: 10px; padding: 15px; border: 1px solid #313843; border-radius: 9px; background: #101318; }
.seo-landing-features article > svg, .seo-landing-features > section > svg { width: 22px; height: 22px; flex: 0 0 22px; color: #63a9ff; }
.seo-landing-features h2 { margin: 0; color: #edf3fb; font-size: 13px; line-height: 1.4; }
.seo-landing-features p { margin: 5px 0 0; color: #8f9cac; font-size: 11px; line-height: 1.55; }
.seo-public-article { display: grid; width: 100%; gap: 18px; }
.seo-public-breadcrumb { display: flex; width: min(100%, 900px); align-items: center; gap: 8px; margin: 0 auto -6px; color: #8391a1; font-size: 11px; line-height: 1.45; }
.seo-public-breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; color: #a9c8ea; font-weight: 800; text-decoration: none; }
.seo-public-breadcrumb span[aria-current="page"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-public-copy, .seo-public-faq { width: min(100%, 900px); margin: 0 auto; padding: 20px; border: 1px solid #313843; border-radius: 10px; background: #101318; }
.seo-public-copy { display: grid; gap: 12px; }
.seo-public-copy p { margin: 0; color: #aeb9c7; font-size: 12px; line-height: 1.75; }
.seo-public-sections > section { display: grid; gap: 7px; }
.seo-public-sections > section + section { padding-top: 14px; border-top: 1px solid #27303a; }
.seo-public-sections h2 { margin: 0; color: #e4edf8; font-size: 14px; line-height: 1.45; }
.seo-public-faq > h2 { margin: 0 0 12px; color: #edf3fb; font-size: 16px; }
.seo-public-faq > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.seo-public-faq article { padding: 13px; border: 1px solid #2b333d; border-radius: 8px; background: #0b0e12; }
.seo-public-faq h3 { margin: 0; color: #dce8f7; font-size: 12px; line-height: 1.45; }
.seo-public-faq p { margin: 7px 0 0; color: #8f9cac; font-size: 11px; line-height: 1.6; }
.seo-public-links { display: flex; width: min(100%, 900px); flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto; }
.seo-public-links a { display: inline-flex; min-height: 44px; align-items: center; padding: 9px 12px; border: 1px solid #34404e; border-radius: 999px; background: #12171d; color: #a9c8ea; font-size: 11px; font-weight: 800; line-height: 1.35; text-decoration: none; }
.seo-public-links a:hover { border-color: #5b8fc6; color: #fff; }
.seo-public-links a[aria-current="page"] { border-color: #4f83bd; background: #18304a; color: #fff; }
.seo-related-links { margin-top: -6px; }
.seo-related-links::before { align-self: center; color: #7f8fa2; content: "Đọc tiếp:"; font-size: 11px; font-weight: 800; }
.seo-home-links { margin-top: -4px; }
.seo-landing-panel .auth-welcome-title svg { color: #24df48; fill: none; }
.home-intro-stage { min-height: auto; align-content: start; padding: 16px 14px 34px; }
.home-intro { display: grid; width: min(100%, 900px); margin: 0 auto; gap: 16px; }
.home-intro-hero,
.home-intro-feature,
.home-intro-highlights,
.home-intro-links { border: 1px solid #2f3e54; border-radius: 11px; background: #111620; }
.home-intro-hero { padding: 27px 24px; text-align: center; background: linear-gradient(145deg, #171d29, #0d1118); }
.home-intro-hero h1 { max-width: 700px; margin: 0 auto; color: #ff9f1a; font-family: var(--font-vietnamese) !important; font-size: clamp(23px, 4vw, 34px); line-height: 1.3; text-wrap: balance; }
.home-intro-hero > p { max-width: 690px; margin: 13px auto 0; color: #bdc8d8; font-size: 13px; line-height: 1.75; }
.home-intro-hero > small { display: inline-flex; align-items: center; gap: 6px; margin-top: 15px; color: #7f8ea1; font-size: 10px; }
.home-intro-hero > small svg { width: 14px; height: 14px; }
.home-intro-feature { padding: 20px; }
.home-intro-feature > header { display: flex; align-items: flex-start; gap: 12px; }
.home-intro-feature > header > span { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 10px; background: #17355f; color: #79baff; }
.home-intro-feature > header > span svg { width: 22px; height: 22px; }
.home-intro-feature h2,
.home-intro-highlights h2,
.home-intro-links > h2 { margin: 0; color: #edf4fd; font-size: 15px; line-height: 1.45; }
.home-intro-feature > header p { margin: 5px 0 0; color: #9baabc; font-size: 11px; line-height: 1.65; }
.home-intro-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.home-intro-feature-grid article { display: flex; align-items: flex-start; gap: 9px; padding: 13px; border: 1px solid #2c3746; border-radius: 8px; background: #0b0f15; }
.home-intro-feature-grid article > svg { width: 19px; height: 19px; flex: 0 0 19px; color: #67aefb; }
.home-intro-feature-grid h3 { margin: 0; color: #dfeafa; font-size: 11px; line-height: 1.45; }
.home-intro-feature-grid p { margin: 5px 0 0; color: #8594a6; font-size: 10px; line-height: 1.55; }
.home-intro-highlights { padding: 20px; }
.home-intro-highlights > header { display: flex; align-items: end; justify-content: space-between; gap: 15px; }
.home-intro-highlights > header > p { max-width: 430px; margin: 0; color: #8393a7; font-size: 10px; line-height: 1.55; text-align: right; }
.home-intro-highlights > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.home-intro-highlights article { display: grid; align-content: start; gap: 10px; padding: 15px; border: 1px solid #303a48; border-radius: 8px; background: #171b23; }
.home-intro-highlights article > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: #173962; color: #8fc7ff; }
.home-intro-highlights article > span svg { width: 18px; height: 18px; }
.home-intro-highlights h3 { margin: 0; color: #eef4fc; font-size: 12px; line-height: 1.45; }
.home-intro-highlights article p { margin: 5px 0 0; color: #93a2b5; font-size: 10px; line-height: 1.6; }
.home-intro-links { padding: 20px; }
.home-intro-links > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }
.home-intro-links > div > a { display: flex; min-width: 0; min-height: 62px; align-items: center; gap: 10px; padding: 12px; border: 1px solid #2c3949; border-radius: 8px; background: #0b1016; color: #dce9f8; text-decoration: none; transition: border-color .16s ease, background .16s ease; }
.home-intro-links > div > a:hover { border-color: #5688bd; background: #111b26; }
.home-intro-links > div > a > svg { width: 20px; height: 20px; flex: 0 0 20px; color: #66adfa; }
.home-intro-links span { display: grid; min-width: 0; gap: 3px; }
.home-intro-links strong { font-size: 11px; line-height: 1.35; }
.home-intro-links small { color: #7f8fa2; font-size: 9px; line-height: 1.4; }
.home-intro-guide { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; margin-top: 11px; border: 1px solid #3a4b5f; border-radius: 7px; background: #161d26; color: #b9d4ef; font-size: 10px; font-weight: 800; text-decoration: none; }
.home-intro-guide:hover { border-color: #5d8cbf; color: #fff; }
.home-intro-guide svg { width: 16px; height: 16px; }
.home-intro a:focus-visible { outline: 2px solid #78b8ff; outline-offset: 3px; }
.public-quick-links { display:grid; width:min(100%,900px); gap:10px; margin:0 auto; }
.public-quick-links h2 { margin:0; color:#edf3fb; font-size:14px; }
.public-quick-links>div { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:8px; }
.public-quick-links a { display:flex; min-width:0; min-height:60px; align-items:center; gap:8px; padding:11px; border:1px solid #34404e; border-radius:9px; background:#11161c; color:#dbe8f7; text-decoration:none; transition:.18s ease; }
.public-quick-links a:hover { transform:translateY(-1px); border-color:#5b8fc6; background:#17212b; }
.public-quick-links a.is-forum { border-color:#356b55; background:#102019; }
.public-quick-links a>svg { width:19px; height:19px; flex:0 0 19px; color:#69adff; }
.public-quick-links a.is-forum>svg { color:#52d98f; }
.public-quick-links span { display:grid; min-width:0; gap:2px; }
.public-quick-links strong { font-size:12px; line-height:1.35; }
.public-quick-links small { color:#8392a3; font-size:10px; line-height:1.4; }
.public-shell { min-height: 100vh; }
.public-brand { text-decoration: none; }
.app-shell > .public-footer { display: grid; gap: 10px; padding: 20px 14px 28px; color: #778594; text-align: center; }
.public-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
.public-footer a { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 5px; color: #99b9da; font-size: 11px; font-weight: 800; line-height: 1.35; text-decoration: none; }
.public-footer small { font-size: 9px; }
.public-brand:focus-visible, .seo-landing-actions a:focus-visible, .seo-landing-quick-room > a:focus-visible, .public-quick-links a:focus-visible, .seo-public-links a:focus-visible, .public-footer a:focus-visible, .public-forum-actions a:focus-visible, .public-forum-pagination a:focus-visible { outline: 2px solid #78b8ff; outline-offset: 3px; }
.public-guest .auth-switch a { color: #78b8ff; font-weight: 800; text-decoration: none; }
.public-forum-panel { overflow:hidden; }
.public-forum-hero { display:flex; align-items:flex-start; gap:14px; padding:22px; border-bottom:1px solid #313843; background:linear-gradient(145deg,#151b23,#0b0e12); }
.public-forum-hero>span { display:grid; width:44px; height:44px; flex:0 0 44px; place-items:center; border-radius:12px; background:#17365b; color:#78b8ff; }
.public-forum-hero>span svg { width:24px; }
.public-forum-hero small { color:#ffad12; font-size:9px; font-weight:900; letter-spacing:1.3px; }
.public-forum-hero h1 { margin:4px 0 0; color:#f5f8fc; font-size:clamp(20px,4vw,30px); line-height:1.35; }
.public-forum-hero p { margin:8px 0 0; color:#92a2b4; font-size:11px; line-height:1.6; }
.public-forum-list { display:grid; gap:10px; padding:18px; }
.public-forum-list article { border:1px solid #303946; border-radius:9px; background:#101419; }
.public-forum-list article>a { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:15px; color:inherit; text-decoration:none; }
.public-forum-list article>a>div:only-child { grid-column:1/-1; }
.public-forum-list-image { width:92px; height:72px; border:1px solid #34414f; border-radius:7px; object-fit:cover; }
.public-forum-list h2 { margin:0; color:#eaf2fc; font-size:14px; line-height:1.45; }
.public-forum-list p { margin:7px 0 0; color:#93a2b2; font-size:11px; line-height:1.65; }
.public-forum-list footer { display:flex; gap:14px; margin-top:10px; color:#6f8193; font-size:9px; }
.public-forum-topic { margin:18px; padding:20px; border:1px solid #313b47; border-radius:10px; background:#101419; }
.public-forum-topic-meta { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:15px; color:#7f92a6; font-size:9px; }
.public-forum-topic-meta span { display:flex; align-items:center; gap:5px; }
.public-forum-topic-meta svg { width:13px; }
.public-forum-content { color:#c8d2de; font-size:12px; line-height:1.85; overflow-wrap:anywhere; }
.public-forum-media { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:16px; }
.public-forum-media img,.public-forum-media video { width:100%; max-height:520px; border:1px solid #303c49; border-radius:8px; background:#050608; object-fit:contain; }
.public-forum-replies { display:grid; gap:9px; margin:18px; }
.public-forum-replies>h2 { margin:0 0 3px; color:#eef5fc; font-size:15px; }
.public-forum-replies article { padding:14px; border:1px solid #2e3741; border-radius:8px; background:#0d1116; }
.public-forum-replies header { display:flex; justify-content:space-between; gap:10px; color:#7890a7; font-size:9px; }
.public-forum-replies strong { color:#bcd2e8; }
.public-forum-replies p { margin:9px 0 0; color:#aebac8; font-size:11px; line-height:1.7; overflow-wrap:anywhere; }
.public-forum-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; padding:0 18px 20px; }
.public-forum-actions a,.public-forum-empty a { display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border:1px solid #3b4a5b; border-radius:7px; color:#bdd8f4; font-size:10px; font-weight:900; text-decoration:none; }
.public-forum-actions a.primary { border-color:#3477ce; background:#2567bd; color:#fff; }
.public-forum-actions svg { width:14px; }
.public-forum-empty { padding:42px 18px; color:#8394a6; text-align:center; }
.public-forum-empty>svg { width:34px; color:#5e82a9; }
.public-forum-empty h2 { margin:10px 0 0; color:#dae6f3; font-size:16px; }
.public-forum-empty p { margin:7px 0 16px; font-size:11px; }
.public-forum-pagination { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:0 18px 18px; }
.public-forum-pagination a { display:grid; width:44px; height:44px; place-items:center; border:1px solid #34404d; border-radius:6px; color:#a9c4df; font-size:11px; text-decoration:none; }
.public-forum-pagination a.active { border-color:#4388df; background:#255e9f; color:#fff; }
@media(max-width:700px){.seo-landing-card{padding:24px 15px}.seo-landing-features{grid-template-columns:1fr}.seo-landing-stage{align-content:start}.seo-landing-actions{display:grid}.seo-landing-actions a{width:100%}.public-quick-links>div{grid-template-columns:repeat(2,minmax(0,1fr))}.public-quick-links a.is-forum{grid-column:auto}}
@media(max-width:700px){.seo-public-copy,.seo-public-faq{padding:15px}.seo-public-faq>div{grid-template-columns:1fr}.seo-public-links{justify-content:flex-start}.seo-public-links a{font-size:11px}.public-forum-list-image{width:76px;height:62px}.public-forum-media{grid-template-columns:1fr}}
@media(max-width:700px){.home-intro-stage{padding:12px 10px 25px}.home-intro{gap:11px}.home-intro-hero,.home-intro-feature,.home-intro-highlights,.home-intro-links{border-radius:9px}.home-intro-hero{padding:22px 15px}.home-intro-hero>p{font-size:12px}.home-intro-feature,.home-intro-highlights,.home-intro-links{padding:15px}.home-intro-feature-grid,.home-intro-highlights>div{grid-template-columns:1fr}.home-intro-links>div{grid-template-columns:1fr}.home-intro-feature>header>span{width:38px;height:38px;flex-basis:38px}.home-intro-highlights>header{display:block}.home-intro-highlights>header>p{margin-top:5px;text-align:left}.home-intro-guide{padding:8px;text-align:center}}
.auth-form { width: min(100%, 420px); margin: 0 auto; overflow: hidden; border: 1px solid #3a4048; border-radius: 5px; background: #050607; box-shadow: 0 18px 42px rgba(0, 0, 0, .44); }
.auth-register-form { width: min(100%, 520px); }
.auth-card-title { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border-bottom: 1px solid #3a4048; background: linear-gradient(180deg, #282a2f, #1d1f23); color: #edf1f7; font-family: var(--font-teen) !important; font-size: 18px; text-shadow: 0 1px 1px #000; }
.auth-card-title svg { width: 18px; height: 18px; color: #dce8ff; }
.auth-form-body { padding: 12px; }
.auth-feedback { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px; padding: 10px 11px; border: 1px solid #70404a; border-radius: 7px; background: #251319; color: #ffdce0; font-family: var(--font-vietnamese) !important; animation: auth-feedback-in .2s ease-out; }
.auth-feedback[hidden] { display: none; }
.auth-feedback > svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; color: #ff7482; }
.auth-feedback > div { min-width: 0; }
.auth-feedback strong,.auth-feedback span { display: block; }
.auth-feedback strong { color: #fff0f2; font-size: 12px; line-height: 1.35; }
.auth-feedback span { margin-top: 2px; color: #e8b8bf; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.auth-feedback.loading { border-color: #365d83; background: #101d29; }
.auth-feedback.loading > svg { color: #72b9ff; animation: auth-feedback-spin 1s linear infinite; }
.auth-feedback.loading strong { color: #e5f2ff; }
.auth-feedback.loading span { color: #a8c8e6; }
.auth-feedback.success { border-color: #347049; background: #102218; }
.auth-feedback.success > svg { color: #57dc7a; }
.auth-feedback.success strong { color: #e5ffec; }
.auth-feedback.success span { color: #a9d9b6; }
@keyframes auth-feedback-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-feedback-spin { to { transform: rotate(360deg); } }
.auth-form label { display: block; margin-bottom: 11px; color: #25dc45; font-family: var(--font-vietnamese) !important; font-size: 13px; font-weight: 700; }
.auth-form label small { display: block; margin-top: 5px; color: #7f8996; font-size: 10px; font-weight: 400; line-height: 1.45; }
.auth-form label small.is-error { color: #ff8585; }
.auth-form input, .auth-form select { display: block; width: 100%; min-height: 42px; margin-top: 4px; padding: 9px 10px; border: 1px solid #353b44; border-radius: 4px; outline: 0; background: #17191e; color: #f1f4f8; font-size: 14px; }
.auth-form input[aria-invalid="true"] { border-color: #d95858; box-shadow: 0 0 0 2px rgba(217, 88, 88, .13); }
.auth-form input::placeholder { color: #697482; }
.auth-form input:focus, .auth-form select:focus { border-color: #5799df; box-shadow: 0 0 0 2px rgba(87,166,255,.12); background: #1a1d22; }
.auth-identity-row { display: grid; grid-template-columns: minmax(0, 1fr) 122px; gap: 4px; align-items: end; }
.auth-password-field { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 4px; align-items: end; }
.auth-password-field button { display: grid; width: 44px; height: 42px; margin-top: 4px; place-items: center; border: 1px solid #353b44; border-radius: 4px; background: #17191e; color: #d7e0ec; cursor: pointer; }
.auth-password-field button:hover { border-color: #5799df; color: #fff; }
.auth-password-field button svg { width: 17px; height: 17px; }
.auth-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -1px 0 13px; }
.auth-check { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; font-family: inherit !important; font-size: 12px !important; cursor: pointer; }
.auth-check input { width: 15px !important; min-height: 15px !important; margin: 0 !important; padding: 0 !important; accent-color: #2680ed; }
.auth-options > button, .auth-switch button { padding: 0; border: 0; background: transparent; color: #ffad12; cursor: pointer; font-size: 12px; font-weight: 800; }
.auth-options > button:hover, .auth-switch button:hover { color: #ffd36b; text-decoration: underline; }
.auth-submit { width: 100%; min-height: 42px; margin-top: 1px; border-radius: 4px; background: linear-gradient(180deg, #347cf0, #2569db); font-size: 14px; }
.auth-submit svg { width: 17px; height: 17px; }
.auth-divider { display: flex; align-items: center; gap: 9px; margin: 18px 0 10px; color: #c7cdd7; font-family: var(--font-vietnamese) !important; font-size: 12px; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; border-top: 1px dashed #68717c; content: ""; }
.auth-switch { margin: 0; color: #25dc45; text-align: center; font-family: var(--font-vietnamese) !important; font-size: 12px; }
.auth-form-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.captcha-row { display: grid; grid-template-columns: minmax(90px, 1fr) 155px 44px; gap: 6px; align-items: end; }
.captcha-row input { text-transform: uppercase; letter-spacing: 3px; font-weight: 800; }
.captcha-image { display: block; width: 155px; height: 42px; border: 1px solid #3a424e; border-radius: 4px; object-fit: cover; }
.captcha-row button { display: grid; width: 44px; height: 42px; place-items: center; border: 1px solid #3a424e; border-radius: 4px; background: #17191e; color: #9aa8b8; cursor: pointer; }
.captcha-row button:hover { border-color: #4c7db1; color: var(--green); }
.captcha-row button svg { width: 16px; }
.registration-terms-trigger { min-height: 43px; margin: 2px 0 12px !important; padding: 8px 10px; border: 1px solid #3a424e; border-radius: 5px; background: #11151a; color: #e6ebf2 !important; }
.registration-terms-trigger:hover { border-color: #55708e; background: #151a20; }
.registration-terms-trigger input { flex: 0 0 17px; width: 17px !important; min-height: 17px !important; pointer-events: none; }
.registration-terms-trigger span { line-height: 1.4; }
.registration-terms-trigger u { color: #ffbc45; text-underline-offset: 2px; }
.registration-terms-backdrop { z-index: 120; }
.registration-terms-card { width: min(620px, calc(100vw - 22px)); max-height: calc(100vh - 28px); overflow: hidden; }
.registration-terms-content { max-height: min(58vh, 520px); overflow: auto; overscroll-behavior: contain; padding: 14px; outline: 0; background: #101318; color: #d5dce6; font-family: var(--font-vietnamese) !important; font-size: 12px; line-height: 1.72; white-space: pre-wrap; scrollbar-color: #596574 #171b21; scrollbar-width: thin; }
.registration-terms-content:focus { box-shadow: inset 0 0 0 2px rgba(87,166,255,.18); }
.registration-terms-status { display: flex; align-items: center; gap: 6px; margin: 0; padding: 7px 10px; border-top: 1px solid #303741; border-bottom: 1px solid #303741; background: #15191f; color: #ffc45b; font-size: 10px; line-height: 1.4; }
.registration-terms-status svg { width: 14px; height: 14px; flex: 0 0 14px; }
.registration-terms-status.is-complete { color: #62e47b; }
.registration-terms-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 10px; background: #0d1014; }
.registration-terms-actions button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 13px; border: 1px solid #3d4854; border-radius: 5px; background: #181d23; color: #c7d0db; cursor: pointer; font-size: 11px; font-weight: 800; }
.registration-terms-actions button svg { width: 15px; }
.registration-terms-actions .primary-button { width: auto; min-width: 160px; border-color: #2c7d44; background: linear-gradient(180deg, #279247, #1d7136); color: #fff; }
.registration-terms-actions .primary-button:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .45; }
#register-submit:disabled { cursor: not-allowed; filter: grayscale(.65); opacity: .48; }
.admin-form-grid > label > small { display: block; margin-top: 4px; color: #74808e; font-size: 9px; line-height: 1.45; }
.admin-user-account-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 10px 10px;padding:10px 12px;border:1px solid #36516d;border-radius:10px;background:linear-gradient(135deg,#122438,#0c1723)}
.admin-user-account-toolbar>button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:39px;cursor:pointer}.admin-user-account-toolbar>button svg{width:16px;height:16px}.admin-user-account-toolbar>small{color:#8297ad;font-size:10px;text-align:right}.admin-user-create-form .admin-form-actions{display:flex;justify-content:flex-end;gap:8px}.admin-user-create-form .admin-form-actions button{min-height:38px;padding:7px 12px;cursor:pointer}
@media(max-width:620px){.admin-user-account-toolbar{align-items:stretch;flex-direction:column}.admin-user-account-toolbar>small{text-align:left}}

.auth-guest .main-nav, .auth-guest .profile-strip, .auth-guest .live-state, .auth-guest .header-refresh-button { display: none; }
.auth-guest main .view:not([data-page="landing"]):not([data-page="login"]):not([data-page="register"]):not([data-page="public-forum"]):not([data-page="public-dating"]):not([data-page="temporary-rooms"]) { display: none !important; }
.auth-guest .brand:not(.public-brand) { pointer-events: none; }
.auth-guest .site-header { border-bottom: 0; }
.auth-guest .brand-row { justify-content: center; padding-block: 18px 11px; }

/* High-contrast text palette for dark surfaces. */
.profile-copy p,
.panel-title small,
.room-card small,
.member-copy span,
.empty-state,
.feed-tabs,
.composer-actions > span,
.game-card span,
.composer-login,
.style-controls label,
.no-gifts,
.coming-soon-panel p {
  color: var(--muted);
}

.global-chat-content-row time,
.global-chat-energy,
.member-filter-tabs button,
.statistics-staff-person small,
.feed-author span,
.feed-load-more,
.game-demo-tile small,
.game-demo-note,
.message-meta,
.ranking-note,
.ranking-score > span,
.conversation-copy span,
.conversation-meta,
.profile-file-control > span,
.profile-file-note,
.comment-actions button,
.announcement-editor > p {
  color: #bcc7d5;
}

.feed-actions button,
.profile-form label,
.captcha-row button,
.profile-cover {
  color: #d6dee8;
}

.auth-form input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #aeb9c7;
  opacity: 1;
}

.panel-title,
.auth-welcome-title span {
  text-shadow: 0 0 7px rgba(85, 255, 119, .22);
}

.panel-title { min-height: 40px; font-size: 16px; }
.panel-title small { font-size: 12px; }
.profile-copy p,
.room-card small,
.member-copy span,
.composer-actions > span,
.style-controls label {
  font-size: 12px;
}

.auth-form input,
.auth-form select,
.composer textarea,
.profile-form input,
.profile-form textarea,
.profile-form select,
.settings-form input,
.settings-form textarea,
.settings-form select {
  color: #fff;
}

.modal-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 14px; background: rgba(0,0,0,.78); backdrop-filter: blur(3px); }
.modal-backdrop[hidden] { display: none; }
.modal-card { width: min(100%, 520px); max-height: 86vh; overflow: auto; border: 1px solid #3b424d; border-radius: 5px; background: #0b0d10; box-shadow: 0 20px 70px rgba(0,0,0,.75); }
.modal-close { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 3px; background: #16191e; color: #a9b2be; cursor: pointer; }
.modal-close svg { width: 14px; }
.account-mood-card { width: min(100%, 590px); overflow: hidden; background: radial-gradient(circle at 100% 0, rgba(255,135,204,.12), transparent 34%), #080a0d; }
.account-mood-intro { display: flex; align-items: center; gap: 12px; margin: 12px; padding: 12px; border: 1px solid #4b3b55; border-radius: 8px; background: linear-gradient(135deg, #24152b, #101725); }
.account-mood-current-icon { flex: 0 0 54px; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 17px; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 35%), linear-gradient(145deg, #ff6fbb, #7655e9); font-size: 29px; box-shadow: 0 8px 24px rgba(150,70,190,.24); }
.account-mood-intro > div:last-child { min-width: 0; }
.account-mood-intro strong { display: block; color: #fff; font-size: 17px; }
.account-mood-intro span { display: block; margin-top: 3px; color: #c6cfda; font-size: 13px; line-height: 1.45; }
.account-mood-search { position: relative; display: block; margin: 0 12px 10px; }
.account-mood-search > svg { position: absolute; z-index: 1; top: 50%; left: 11px; width: 17px; color: #9aa7b7; transform: translateY(-50%); pointer-events: none; }
.account-mood-search input { width: 100%; min-height: 43px; padding: 9px 12px 9px 38px; border: 1px solid #3d4754; border-radius: 7px; outline: 0; background: #14181e; color: #fff; font-size: 15px; }
.account-mood-search input:focus { border-color: #b95e9d; box-shadow: 0 0 0 3px rgba(255,111,187,.1); }
.account-mood-categories { display: flex; gap: 6px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; }
.account-mood-categories::-webkit-scrollbar { display: none; }
.account-mood-categories button { flex: 0 0 auto; min-height: 34px; padding: 6px 10px; border: 1px solid #3a424d; border-radius: 999px; background: #15191e; color: #c5ced9; cursor: pointer; font-size: 12px; font-weight: 700; }
.account-mood-categories button.active { border-color: #a34a88; background: #3c1830; color: #ffb5df; box-shadow: inset 0 0 0 1px rgba(255,135,204,.14); }
.account-mood-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: min(48vh, 410px); padding: 0 12px 12px; overflow-y: auto; scrollbar-color: #5e3c59 transparent; }
.account-mood-option { min-width: 0; display: grid; grid-template-columns: 43px minmax(0, 1fr) 17px; align-items: center; gap: 8px; min-height: 64px; padding: 8px; border: 1px solid #303844; border-radius: 7px; background: linear-gradient(145deg, #15191f, #101318); color: #eef2f7; cursor: pointer; text-align: left; transition: border-color .15s, transform .15s, background .15s; }
.account-mood-option:hover { border-color: #7c4e79; background: linear-gradient(145deg, #251a29, #131b25); transform: translateY(-1px); }
.account-mood-option.selected { border-color: #d765ad; background: linear-gradient(145deg, #3a1730, #192036); box-shadow: 0 0 0 1px rgba(255,135,204,.14); }
.account-mood-option:disabled { opacity: .62; cursor: wait; }
.account-mood-option-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.07); font-size: 24px; }
.account-mood-option > span:nth-child(2) { min-width: 0; }
.account-mood-option strong { display: block; overflow: hidden; color: #fff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-mood-option small { display: block; overflow: hidden; margin-top: 2px; color: #adb8c6; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-mood-option > svg { width: 16px; color: #7e8a99; }
.account-mood-option.selected > svg { color: #ff8dcd; }
.account-mood-empty { margin: 0 12px 12px; padding: 24px; border: 1px dashed #46505d; border-radius: 7px; color: #c1cbd7; font-size: 14px; text-align: center; }
.account-mood-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 9px 12px; border-top: 1px solid #303741; background: #101318; color: #9faab8; font-size: 11px; text-align: center; }
.account-mood-note svg { flex: 0 0 auto; width: 15px; color: var(--pink); }
.symbol-picker-backdrop { position: static; display: block; width: 100%; padding: 0; background: transparent; }
.symbol-picker-backdrop[hidden] { display: none; }
.symbol-picker-card { width: 100%; max-height: none; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #4c3f55; border-radius: 8px; background: radial-gradient(circle at 100% 0, rgba(255,111,187,.13), transparent 32%), #090b0e; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.symbol-picker-card > header { min-height: 45px; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 13px; border-bottom: 1px solid #3a414b; background: linear-gradient(180deg, #29242e, #1a1c22); color: #63ff83; font-size: 16px; font-weight: 800; }
.symbol-picker-card > header button { width: 29px; height: 29px; border: 1px solid #4b515b; border-radius: 4px; background: #15181d; color: #d4dbe4; cursor: pointer; font-size: 21px; line-height: 1; }
.symbol-picker-search { position: relative; display: block; margin: 10px 10px 8px; }
.symbol-picker-search > span { position: absolute; top: 50%; left: 10px; z-index: 1; font-size: 15px; transform: translateY(-50%); pointer-events: none; }
.symbol-picker-search input { width: 100%; min-height: 42px; padding: 8px 11px 8px 36px; border: 1px solid #3e4651; border-radius: 6px; outline: 0; background: #15191e; color: #fff; font-size: 15px; }
.symbol-picker-search input:focus { border-color: #a95998; box-shadow: 0 0 0 3px rgba(255,111,187,.1); }
.symbol-picker-groups { display: flex; gap: 5px; padding: 0 10px 9px; overflow-x: auto; scrollbar-width: none; }
.symbol-picker-groups::-webkit-scrollbar { display: none; }
.symbol-picker-groups button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 4px 8px; border: 1px solid #39424d; border-radius: 999px; background: #15191e; color: #c7d0dc; cursor: pointer; font-size: 11px; font-weight: 700; }
.symbol-picker-groups button.active { border-color: #a34a88; background: #3b1830; color: #ffb6df; }
.symbol-picker-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; min-height: 164px; max-height: 270px; padding: 0 9px 9px; overflow-y: auto; scrollbar-color: #5d3b58 transparent; }
.symbol-picker-grid button { min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 2px; border: 1px solid #313945; border-radius: 5px; background: #14181d; color: #cbd3dd; cursor: pointer; }
.symbol-picker-grid button:hover { border-color: #95538b; background: #261a29; transform: translateY(-1px); }
.symbol-picker-grid button > span { font-size: 23px; line-height: 1.05; }
.symbol-picker-grid button > img, .symbol-picker-grid button > video { display: block; width: 28px; height: 28px; object-fit: contain; }
.symbol-picker-grid button > small { width: 100%; overflow: hidden; font-size: 9px; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.symbol-picker-empty { padding: 28px 12px; color: #bdc6d2; font-size: 14px; text-align: center; }
.symbol-picker-card > footer { padding: 8px 10px; border-top: 1px solid #343b45; background: #101318; color: #9ca7b5; font-size: 11px; text-align: center; }
.profile-photo-modal-card { width: min(100%, 470px); overflow: hidden; }
.profile-photo-preview {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  gap: 5px;
  margin: 16px auto;
  overflow: hidden;
  border: 1px dashed #46505d;
  border-radius: 50%;
  background: linear-gradient(145deg, #171b21, #0f1216);
  color: #737f8e;
  text-align: center;
}
.profile-photo-preview > svg { width: 28px; height: 28px; align-self: end; }
.profile-photo-preview > .profile-photo-placeholder-label { align-self: start; font-size: 11px; }
.profile-photo-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-photo-preview.has-image > svg, .profile-photo-preview.has-image > .profile-photo-placeholder-label { display: none; }
.profile-photo-preview.has-avatar-frame-preview { width: 104px; height: 104px; margin-block: 52px; overflow: visible; border-style: solid; }
.profile-photo-preview.has-avatar-frame-preview > img { overflow: hidden; border-radius: inherit; }
.profile-photo-frame-preview {
  position: absolute !important;
  z-index: 6 !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: inherit;
  background: transparent !important;
  color: transparent;
  pointer-events: none;
}
.profile-photo-frame-preview[hidden] { display: none !important; }
.profile-photo-preview.cover-preview { width: calc(100% - 28px); height: auto; aspect-ratio: 2 / 1; border-radius: 5px; }
.profile-file-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  margin: 0 14px;
  overflow: hidden;
  border: 1px solid #39434f;
  border-radius: 5px;
  background: #111419;
}
.profile-file-control label, .profile-file-control > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 0 12px;
  border-right: 1px solid #3e4956;
  background: #232a33;
  color: #f0f3f7;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.profile-file-control > button { border: 0; border-right: 1px solid #3e4956; }
.profile-file-control label:hover, .profile-file-control > button:hover { background: #2b3541; }
.profile-file-control label svg, .profile-file-control > button svg { width: 15px; height: 15px; color: var(--blue); }
.profile-file-control > span { min-width: 0; align-self: center; overflow: hidden; padding: 0 10px; color: #8994a2; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.photo-source-backdrop { position: fixed; z-index: 2250; inset: 0; display: grid; place-items: center; padding: 14px; background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.photo-source-backdrop[hidden] { display: none !important; }
.photo-source-card { width: min(420px,100%); overflow: hidden; border: 1px solid #3b4653; border-radius: 16px; background: linear-gradient(155deg,#171d24,#0b0f14); box-shadow: 0 24px 70px rgba(0,0,0,.68); animation: photoSourceEnter .18s ease-out; }
.photo-source-head { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid #303945; }
.photo-source-head > span { display: inline-flex; align-items: center; gap: 8px; color: #edf3f9; }
.photo-source-head > span > svg { width: 18px; color: #69b9ff; }
.photo-source-head strong { font-size: 15px; }
.photo-source-head > button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #222a33; color: #aab5c2; cursor: pointer; }
.photo-source-head > button svg { width: 16px; }
.photo-source-card > p { margin: 0; padding: 12px 14px 5px; color: #8f9ba9; font-size: 11px; }
.photo-source-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 10px 14px 15px; }
.photo-source-actions > button { min-width: 0; min-height: 92px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 9px; padding: 11px; border: 1px solid #354353; border-radius: 12px; background: linear-gradient(145deg,#1a222c,#10151b); color: #eaf1f8; cursor: pointer; text-align: left; }
.photo-source-actions > button[hidden] { display: none !important; }
.photo-source-actions > button:hover { border-color: #4c91cf; background: linear-gradient(145deg,#1c3449,#111b24); }
.photo-source-actions > button > svg { width: 30px; height: 30px; color: #6dc1ff; }
.photo-source-actions > button:first-child > svg { color: #73dfa5; }
.photo-source-actions > button[data-photo-source-choice="goc-nho"] { grid-column: 1 / -1; min-height: 76px; border-color: #6552a2; background: linear-gradient(145deg,#252044,#121329); }
.photo-source-actions > button[data-photo-source-choice="goc-nho"] > svg { color: #b99cff; }
.photo-source-actions > button[data-photo-source-choice="video"] > svg { color: #ff9a66; }
.photo-source-actions > button[data-photo-source-choice="audio"] > svg { color: #ffd166; }
.photo-source-actions > button[data-photo-source-choice="voice"] > svg { color: #ff7f9d; }
.photo-source-actions span { min-width: 0; display: grid; gap: 3px; }
.photo-source-actions strong { color: #f2f6fa; font-size: 12px; }
.photo-source-actions small { color: #7f8c9a; font-size: 9px; line-height: 1.35; }
.photo-source-permission-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 14px 14px; padding: 10px 11px; border: 1px solid #5f5030; border-radius: 10px; background: rgba(95,72,25,.2); color: #d9c995; }
.photo-source-permission-note > svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: #f2c85b; }
.photo-source-permission-note > span { min-width: 0; display: grid; gap: 2px; }
.photo-source-permission-note strong { color: #f3e4ae; font-size: 10px; }
.photo-source-permission-note small { color: #ad9f77; font-size: 9px; line-height: 1.45; }
.goc-nho-image-card { width: min(680px,100%); max-height: min(760px,calc(100vh - 28px)); display: flex; flex-direction: column; }
.goc-nho-image-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #2d3540; background: #10151b; }
.goc-nho-image-toolbar p { margin: 0; color: #96a2af; font-size: 11px; line-height: 1.45; }
.goc-nho-image-toolbar code { color: #c9b8ff; font-size: 10px; }
.goc-nho-image-toolbar > button { flex: 0 0 auto; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid #5a4a93; border-radius: 8px; background: #282047; color: #eee9ff; cursor: pointer; font-size: 11px; font-weight: 700; }
.goc-nho-image-toolbar > button:disabled { opacity: .55; cursor: wait; }
.goc-nho-image-toolbar > button svg { width: 15px; }
.goc-nho-image-grid { min-height: 190px; max-height: min(530px,60vh); overflow-y: auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 12px; background: #090d12; }
.goc-nho-image-item { position: relative; min-width: 0; aspect-ratio: 1; margin: 0; }
.goc-nho-image-select { position: relative; width: 100%; height: 100%; overflow: hidden; padding: 0; border: 1px solid #303b47; border-radius: 9px; background: #131920; cursor: pointer; }
.goc-nho-image-select:hover { border-color: #9b7cff; box-shadow: 0 0 0 2px rgba(155,124,255,.18); }
.goc-nho-image-select img { width: 100%; height: 100%; display: block; object-fit: cover; }
.goc-nho-image-select span { position: absolute; inset: auto 5px 5px; min-height: 27px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 6px; background: rgba(8,10,15,.83); color: #f4f1ff; font-size: 9px; font-weight: 700; opacity: 0; transform: translateY(4px); transition: .16s ease; }
.goc-nho-image-select:hover span, .goc-nho-image-select:focus-visible span { opacity: 1; transform: none; }
.goc-nho-image-select span svg { width: 13px; }
.goc-nho-image-delete { position: absolute; z-index: 2; top: 5px; right: 5px; width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; background: rgba(162,30,49,.94); color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.48); cursor: pointer; transition: .16s ease; }
.goc-nho-image-delete:hover { background: #d92d49; transform: scale(1.08); }
.goc-nho-image-delete:disabled { opacity: .5; cursor: wait; transform: none; }
.goc-nho-image-delete svg { width: 14px; height: 14px; stroke-width: 2.6; }
.goc-nho-image-empty { min-height: 210px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 24px; color: #82909e; text-align: center; }
.goc-nho-image-empty[hidden] { display: none !important; }
.goc-nho-image-empty svg { width: 34px; color: #806ac5; }
.goc-nho-image-empty strong { color: #d8dfe7; font-size: 13px; }
.goc-nho-image-empty span { max-width: 300px; font-size: 10px; line-height: 1.5; }
.goc-nho-image-pagination { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; border-top: 1px solid #2d3540; background: #10151b; color: #9ca8b5; font-size: 10px; }
.goc-nho-image-pagination:empty { display: none; }
.goc-nho-image-pagination button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #394654; border-radius: 7px; background: #1c242d; color: #d8e0e8; cursor: pointer; }
.goc-nho-image-pagination button:disabled { opacity: .4; cursor: default; }
.goc-nho-image-pagination button svg { width: 14px; }
@keyframes photoSourceEnter { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@media(max-width:600px){.goc-nho-image-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:9px}.goc-nho-image-toolbar{align-items:flex-start}.goc-nho-image-toolbar p{max-width:210px}}
@media(max-width:480px){.photo-source-backdrop{place-items:end center;padding:10px}.photo-source-card{max-height:calc(100vh - 20px);overflow-y:auto;border-radius:18px 18px 12px 12px}.photo-source-actions{grid-template-columns:1fr}.photo-source-actions>button{min-height:68px}.photo-source-actions>button[data-photo-source-choice="goc-nho"]{grid-column:auto}.goc-nho-image-card{max-height:calc(100vh - 20px)}.goc-nho-image-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:58vh}.goc-nho-image-select span{opacity:1;transform:none}.goc-nho-image-delete{top:4px;right:4px;width:25px;height:25px}}
.profile-file-note { display: block; margin: 7px 14px 14px; color: #7f8b99; font-size: 10px; }
.profile-photo-submit-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; padding: 10px 14px; border-top: 1px solid var(--line); background: #101217; }
.profile-photo-submit-row button { min-height: 40px; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 14px; border: 1px solid #3b444f; border-radius: 4px; background: #1a1e24; color: #b9c2cd; cursor: pointer; font-size: 12px; }
.profile-photo-submit-row .profile-photo-delete-button { margin-right: auto; border-color: #763441; background: #31171d; color: #ff9ba6; }
.profile-photo-submit-row .profile-photo-delete-button:hover { border-color: #b44c5e; background: #421d25; color: #ffd1d6; }
.profile-photo-submit-row .primary-button { min-width: 125px; border-color: #276bbd; background: #1f6fd4; color: #fff; }
.profile-photo-submit-row button:disabled { opacity: .52; cursor: not-allowed; }
.image-cropper-backdrop { z-index: 2100; padding: 10px; }
.image-cropper-card { width: min(100%, 920px); max-height: calc(100vh - 20px); overflow-y: auto; border-radius: 15px; box-shadow: 0 26px 80px rgba(0,0,0,.72); }
.image-cropper-body { padding: 13px; background: radial-gradient(circle at 50% 0, rgba(73,143,219,.1), transparent 38%), #090c10; }
.image-cropper-workspace { display: grid; grid-template-columns: minmax(0, 580px); justify-content: center; gap: 14px; }
.image-cropper-workspace:has(.image-cropper-frame-overview:not([hidden])) { grid-template-columns: minmax(0, 580px) minmax(270px, 1fr); align-items: stretch; }
.image-cropper-editor { min-width: 0; align-self: start; }
.image-cropper-stage { position: relative; width: min(100%, 580px); margin: 0 auto; overflow: hidden; border: 1px solid #566577; border-radius: 9px; outline: 0; background-color: #050608; background-image: linear-gradient(45deg, #11161d 25%, transparent 25%), linear-gradient(-45deg, #11161d 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #11161d 75%), linear-gradient(-45deg, transparent 75%, #11161d 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; cursor: grab; touch-action: none; box-shadow: 0 14px 34px rgba(0,0,0,.36); user-select: none; }
.image-cropper-stage.dragging { cursor: grabbing; }
.image-cropper-stage:focus-visible { border-color: #69b1f3; box-shadow: 0 0 0 3px rgba(71,156,231,.18), 0 14px 34px rgba(0,0,0,.36); }
.image-cropper-stage canvas { width: 100%; height: 100%; display: block; pointer-events: none; }
.image-cropper-mask { position: absolute !important; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; border: 2px solid rgba(255,255,255,.92); border-radius: 5px; outline: 1px solid rgba(38,139,224,.9); box-shadow: 0 0 0 9999px rgba(2,5,9,.67), inset 0 0 22px rgba(255,255,255,.08), 0 0 18px rgba(54,160,244,.38); }
.image-cropper-mask::before, .image-cropper-mask::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; }
.image-cropper-mask::before { top: -3px; left: -3px; border-top: 4px solid #72c3ff; border-left: 4px solid #72c3ff; }
.image-cropper-mask::after { right: -3px; bottom: -3px; border-right: 4px solid #72c3ff; border-bottom: 4px solid #72c3ff; }
.image-cropper-stage[data-shape="circle"] .image-cropper-mask { border-radius: 50%; box-shadow: 0 0 0 9999px rgba(2,5,9,.67), inset 0 0 26px rgba(255,255,255,.12), 0 0 18px rgba(54,160,244,.38); }
.image-cropper-stage[data-shape="circle"] .image-cropper-mask::before, .image-cropper-stage[data-shape="circle"] .image-cropper-mask::after { display: none; }
.image-cropper-avatar-frame {
  position: absolute !important;
  z-index: 6 !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: inherit;
  background: transparent !important;
  color: transparent;
  pointer-events: none;
}
.image-cropper-avatar-frame[hidden], .image-cropper-stage[data-shape="rectangle"] .image-cropper-avatar-frame { display: none !important; }
.image-cropper-frame-overview { min-width: 0; min-height: 440px; display: grid; grid-template-rows: auto minmax(270px, 1fr) auto; align-self: stretch; overflow: hidden; border: 1px solid #405267; border-radius: 15px; background: linear-gradient(155deg, rgba(28,39,51,.98), rgba(9,13,18,.99) 72%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 38px rgba(0,0,0,.28); }
.image-cropper-frame-overview[hidden] { display: none !important; }
.image-cropper-frame-overview header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(124,151,178,.2); background: linear-gradient(180deg, rgba(55,75,96,.2), rgba(15,21,28,.06)); }
.image-cropper-frame-overview header span { min-width: 0; display: inline-flex; align-items: center; gap: 8px; color: #f1f7ff; }
.image-cropper-frame-overview header svg { flex: 0 0 auto; width: 18px; height: 18px; color: #78c2ff; filter: drop-shadow(0 0 5px rgba(69,160,236,.38)); }
.image-cropper-frame-overview header strong { font-size: 13px; line-height: 1.3; }
.image-cropper-frame-overview header em { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #385673; border-radius: 999px; background: rgba(30,67,99,.38); color: #9fd4ff; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .02em; }
.image-cropper-frame-overview-stage { position: relative; min-height: 270px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid rgba(124,151,178,.18); background: radial-gradient(circle at 50% 48%, rgba(70,122,170,.2) 0, rgba(22,35,48,.12) 37%, transparent 68%), linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%), #080c11; background-size: auto, 18px 18px, auto; }
.image-cropper-frame-overview-stage::before { content: ""; position: absolute; width: min(78%, 232px); aspect-ratio: 1; border: 1px solid rgba(126,179,224,.12); border-radius: 50%; box-shadow: 0 0 0 12px rgba(126,179,224,.018), 0 0 0 28px rgba(126,179,224,.012); pointer-events: none; }
.image-cropper-frame-overview-avatar { position: relative; width: min(53%, 158px); aspect-ratio: 1; display: block; border-radius: 50%; background: #111820; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 16px 32px rgba(0,0,0,.38); }
.image-cropper-frame-overview-avatar > canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; border-radius: 50%; }
.image-cropper-frame-overview-decoration { position: absolute !important; z-index: 6 !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 50%; background: transparent !important; color: transparent; pointer-events: none; }
.image-cropper-frame-overview-decoration[hidden] { display: none !important; }
.image-cropper-frame-overview-copy { display: grid; gap: 5px; padding: 13px 15px 15px; text-align: center; }
.image-cropper-frame-overview-copy strong { color: #e8f3fd; font-size: 12px; }
.image-cropper-frame-overview-copy small { max-width: 260px; margin: 0 auto; color: #91a0b0; font-size: 10px; line-height: 1.5; }
.image-cropper-help { width: min(100%, 580px); display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px auto 0; color: #94a2b1; font-size: 10px; }
.image-cropper-help span { display: inline-flex; align-items: center; gap: 5px; }
.image-cropper-help svg { width: 14px; color: #75baff; }
.image-cropper-help em { color: #818e9d; font-style: normal; }
.image-cropper-help b { color: #d3dfeb; }
.image-cropper-controls { width: min(100%, 580px); display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px auto; align-items: center; gap: 7px; margin: 10px auto 0; padding: 8px; border: 1px solid #333e4a; border-radius: 11px; background: linear-gradient(145deg, #171d24, #0f1318); }
.image-cropper-controls > button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 8px; border: 1px solid #455260; border-radius: 9px; background: #202831; color: #d3dde8; cursor: pointer; font-size: 9px; font-weight: 800; }
.image-cropper-controls > button:hover { border-color: #6d99c2; background: #263849; }
.image-cropper-controls > button svg { width: 15px; }
.image-cropper-controls label { min-width: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr) 40px; align-items: center; gap: 7px; color: #94a3b2; }
.image-cropper-controls label > svg { width: 15px; color: #79bdf7; }
.image-cropper-controls input[type="range"] { width: 100%; accent-color: #438ed4; cursor: pointer; }
.image-cropper-controls label b { color: #bfcbd8; font-size: 9px; text-align: right; }
.image-cropper-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 13px; border-top: 1px solid #303946; background: #0e1217; }
.image-cropper-actions button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 14px; border: 1px solid #3f4a56; border-radius: 10px; background: #1a2027; color: #b9c4d0; cursor: pointer; font-size: 10px; font-weight: 800; }
.image-cropper-actions button svg { width: 15px; }
.image-cropper-actions .primary-button { min-width: 130px; border-color: #337dc5; background: linear-gradient(145deg, #3186da, #185eaa); color: #fff; }
.image-cropper-actions button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 760px) {
  .image-cropper-card { width: min(100%, 650px); }
  .image-cropper-workspace, .image-cropper-workspace:has(.image-cropper-frame-overview:not([hidden])) { grid-template-columns: minmax(0, 580px); }
  .image-cropper-frame-overview { min-height: 330px; grid-template-rows: auto minmax(235px, 1fr) auto; }
  .image-cropper-frame-overview-avatar { width: min(44%, 148px); }
}
@media (max-width: 560px) {
  .image-cropper-backdrop { padding: 6px; }
  .image-cropper-card { max-height: calc(100vh - 12px); }
  .image-cropper-body { padding: 9px; }
  .image-cropper-help { align-items: flex-start; flex-direction: column; gap: 4px; }
  .image-cropper-controls { grid-template-columns: 36px minmax(0, 1fr) 36px; }
  .image-cropper-controls .image-cropper-reset { grid-column: 1 / -1; }
  .image-cropper-frame-overview { min-height: 320px; grid-template-rows: auto minmax(226px, 1fr) auto; }
  .image-cropper-frame-overview header { min-height: 52px; padding: 10px 11px; }
  .image-cropper-frame-overview header strong { font-size: 12px; }
  .image-cropper-frame-overview header em { font-size: 8px; }
  .image-cropper-frame-overview-avatar { width: min(44%, 148px); }
  .image-cropper-frame-overview-copy { padding: 11px 12px 13px; }
  .image-cropper-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .image-cropper-actions button { width: 100%; }
}
.social-list-modal .member-list { min-height: 160px; max-height: 56vh; overflow-y: auto; }
#likes-list .feed-like-person { min-height: 58px; align-items: center; gap: 10px; padding: 9px 12px; }
#likes-list .feed-like-person .avatar { flex: 0 0 40px; width: 40px; height: 40px; }
#likes-list .feed-like-id-button { min-height: 38px; display: grid; align-content: center; gap: 3px; padding: 0; border: 0; background: transparent; color: #f1c0c8; text-align: left; }
#likes-list .feed-like-id-button:hover,#likes-list .feed-like-id-button:focus-visible { color: #fff; outline: 0; }
#likes-list .feed-like-id-button > strong { color: inherit; font-family: inherit; font-size: 14px; }
#likes-list .feed-like-id-button > span { color: #7f8b9b; font-size: 10px; }
.profile-social-modal { overflow: hidden; }
.profile-social-summary { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, #10161d, #171c23); color: #8d9aa9; font-size: 11px; }
.profile-social-summary .avatar { width: 29px; height: 29px; }
.profile-social-summary strong { color: #e1e7ee; }
.profile-social-request-group { border-bottom: 1px solid #303844; background: #0b0f14; }
.profile-social-request-group > header, .profile-social-friend-heading { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); background: #10161d; }
.profile-social-request-group > header span, .profile-social-friend-heading span { display: inline-flex; align-items: center; gap: 5px; color: #d9e1ea; font-size: 10px; font-weight: 800; }
.profile-social-request-group > header svg, .profile-social-friend-heading svg { width: 14px; color: #ff8ca0; }
.profile-social-request-group > header small, .profile-social-friend-heading small { color: #8190a0; font-size: 8px; }
.profile-social-request-group .member-item { background: #0b0f14; }
.profile-social-friend-heading svg { color: #7ecbff; }
#comments-modal { align-items: center; padding: 14px; animation: comments-backdrop-in .22s ease-out both; }
.comments-modal-card { width: min(100%, 720px); height: var(--comments-sheet-height, 680px); height: min(var(--comments-sheet-height, 680px), calc(100dvh - 20px)); max-height: min(96dvh, 900px); display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; transition: height .24s ease; animation: comments-sheet-in .28s cubic-bezier(.22,.8,.24,1) both; }
.comments-modal-card > .panel-title, .comments-modal-card > #comment-pagination, .comments-modal-card > #comment-reply-hint, .comments-modal-card > #comment-blocked-note, .comments-modal-card > #comment-composer-mount { flex: 0 0 auto; }
.comments-title-actions { display: flex; align-items: center; gap: 7px; }
.comments-clear-all { min-height: 31px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid #743a45; border-radius: 9px; background: #2b171c; color: #ffabb5; cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.comments-clear-all:hover { border-color: #d85c6c; background: #48232a; color: #ffe6e9; }
.comments-clear-all:disabled { cursor: wait; opacity: .55; }
.comments-clear-all[hidden] { display: none; }
.comments-clear-all svg { width: 14px; height: 14px; }
.comment-list { min-height: 0; max-height: none; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; background: #070809; }
@keyframes comments-backdrop-in { from { background-color: rgba(0,0,0,0); backdrop-filter: blur(0); } to { background-color: rgba(0,0,0,.78); backdrop-filter: blur(3px); } }
@keyframes comments-sheet-in { from { opacity: .45; transform: translateY(calc(100% + 18px)); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  #comments-modal, .comments-modal-card { animation: none; }
  .comments-modal-card { transition: none; }
}
.comment-item { display: flex; align-items: flex-start; gap: 8px; padding: 9px; border-bottom: 1px solid var(--line-soft); }
.comment-item.is-pending { background: rgba(82,103,125,.09); opacity: .78; }
.comment-body { min-width: 0; flex: 1; }
.comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.comment-head > button { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; }
.comment-head time { color: #727e8c; font-size: 8px; }
.comment-body > p { margin: 5px 0; color: #d9dfe7; font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.comment-reactions { display: flex; align-items: center; gap: 4px; }
.comment-reaction { min-height: 25px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border: 1px solid #303844; border-radius: 999px; background: #11161c; color: #9da8b5; cursor: pointer; font: inherit; font-size: 8px; transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease; }
.comment-reaction:hover { border-color: #697788; background: #1a212a; color: #edf3fa; transform: translateY(-1px); }
.comment-reaction span { font-size: 13px; line-height: 1; }
.comment-reaction em { font-style: normal; font-weight: 700; }
.comment-reaction b { min-width: 12px; color: inherit; font-size: 8px; text-align: center; }
.comment-reaction.active { box-shadow: 0 0 0 1px currentColor inset; }
.comment-reaction.reaction-heart.active { border-color: #ff5471; background: rgba(255,84,113,.14); color: #ff8da0; }
.comment-reaction.reaction-haha.active { border-color: #f0bd3d; background: rgba(240,189,61,.14); color: #ffd86e; }
.comment-reaction.reaction-sad.active { border-color: #4b9ee9; background: rgba(75,158,233,.14); color: #86c7ff; }
.comment-reaction-preview { width: max-content; max-width: 100%; display: flex; align-items: center; margin-top: 7px; padding: 3px 8px 3px 3px; border: 1px solid #29323d; border-radius: 999px; background: #0d1116; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.comment-reaction-preview:hover { border-color: #526071; background: #151b22; transform: translateY(-1px); }
.comment-reaction-avatar,
.comment-reaction-avatar.has-avatar-frame { position: relative; width: 27px; height: 27px; margin-left: -9px; overflow: hidden; border: 2px solid #0d1116 !important; border-radius: 50% !important; outline: 0 !important; background-clip: padding-box; clip-path: none !important; filter: none !important; font-size: 9px; animation: none !important; box-shadow: 0 0 0 1px #536070, 0 2px 5px rgba(0,0,0,.45) !important; }
.comment-reaction-preview .comment-reaction-avatar:first-child { margin-left: 0; }
.comment-reaction-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.comment-reaction-extra { position: relative; z-index: 5; min-width: 27px; height: 27px; display: grid; place-items: center; margin-left: -9px; border: 2px solid #0d1116; border-radius: 50%; background: linear-gradient(145deg,#303947,#151a21); color: #f5f7fa; font: 800 9px/1 Arial,sans-serif; box-shadow: 0 0 0 1px #536070,0 2px 5px rgba(0,0,0,.45); }
.comment-reactions-backdrop { z-index: 82; }
.comment-reactions-modal-card { width: min(100%, 480px); max-height: min(82dvh, 650px); overflow: hidden; }
.comment-reactions-modal-card .member-list { min-height: 160px; max-height: 56vh; overflow-y: auto; }
.comment-reaction-person .member-copy { text-align: left; }
.comment-reaction-kind { flex: 0 0 auto; min-width: 65px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 8px; border: 1px solid #333d49; border-radius: 999px; background: #121820; color: #b8c2ce; font-size: 9px; font-weight: 700; }
.comment-reaction-kind i { font-size: 14px; font-style: normal; line-height: 1; }
.comment-actions { display: flex; gap: 8px; }
.comment-actions button { display: inline-flex; align-items: center; gap: 3px; padding: 2px 0; border: 0; background: none; color: #7f8b99; cursor: pointer; font-size: 8px; }
.comment-actions button:hover { color: var(--blue); }
.comment-actions svg { width: 11px; }
.comment-send-state { display: inline-flex; align-items: center; gap: 4px; color: #8fc8ff; font-size: 9px; font-weight: 700; }
.comment-send-state svg { width: 12px; height: 12px; animation: direct-send-spin .85s linear infinite; }
.comment-form { position: relative; padding: 9px; border-top: 1px solid var(--line); background: #111419; }
.comment-form textarea { width: 100%; min-height: 68px; margin: 0; resize: vertical; }
.comment-form .composer-actions { justify-content: flex-end; padding-left: 0; }
.comment-form .post-tools { display: flex; flex: 1; gap: 6px; }
.comment-form .post-tools > button, .comment-form .composer-symbol-tools > button { min-height: 40px; }
.comment-form .composer-inline-tools { z-index: 120; top: auto; right: 9px; bottom: calc(100% + 6px); left: 9px; margin: 0; }
.comment-form .symbol-picker-card { max-height: min(470px, calc(100dvh - 170px)); }
.comment-form .symbol-picker-grid { min-height: 120px; max-height: min(250px, calc(100dvh - 340px)); }
/* Keep the smiley panel inside the modal so it never covers the comment composer. */
.comment-form .composer-inline-tools { max-height: min(56vh, 420px); overflow: hidden; }
.comment-form .composer-inline-tools > .composer-inline-panel { max-height: 100%; overflow: auto; }
@media (max-width: 600px) {
  .comments-clear-all { width: 34px; padding: 0; }
  .comments-clear-all span { display: none; }
  .comment-form .composer-inline-tools { max-height: min(42vh, 300px); }
  .comment-form .symbol-picker-card { max-height: min(300px, 42vh); }
}
.comment-body .post-media-grid, .comment-body .post-audio { margin-top: 8px; }
.comment-reply-hint { margin-bottom: 6px; padding: 5px 7px; border-left: 2px solid var(--blue); background: #101f31; color: #9fb3ca; font-size: 9px; }
.comment-reply-hint svg { width: 12px; vertical-align: middle; }
.comment-blocked-note { min-height: 58px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-top: 1px solid #653641; background: #27151a; color: #ffb7bf; font-size: 11px; line-height: 1.45; }
.comment-blocked-note[hidden] { display: none; }
.comment-blocked-note svg { flex: 0 0 20px; width: 20px; height: 20px; color: #ff7785; }
.edit-post-modal-card, .edit-comment-modal-card { width: min(100%, 620px); overflow: hidden; }
.edit-post-modal-card { padding-bottom: 0; }
.edit-post-modal-card .mood-picker, .edit-post-modal-card .style-controls { margin: 0 10px 9px; }
.edit-post-modal-card > small { display: block; margin: 0 10px 9px; color: #7d8794; font-size: 8px; }
.edit-post-modal-card .content-composer, .edit-comment-modal-card .content-composer { padding: 12px; background: #0c0f13; }
.edit-post-modal-card .composer-row textarea, .edit-comment-modal-card .composer-row textarea { min-height: 118px; border-color: #445264; background: #15191f; }
.edit-post-modal-card .composer-media-preview { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; }
.edit-post-modal-card .composer-preview-item { height: 92px; }
.edit-post-modal-card .content-composer-note { margin: 9px 0 0; padding: 7px 9px; border-left: 2px solid #4a8fd8; background: #111a24; line-height: 1.45; }
.edit-post-modal-card .composer-visibility { margin-left: 0; }
.edit-post-modal-card .composer-actions, .edit-comment-modal-card .composer-actions { align-items: center; gap: 8px; margin-top: 10px; padding-left: 0; }
.edit-post-modal-card .composer-actions .post-tools { min-width: 0; flex: 1; }
.edit-post-modal-card .submit-post, .edit-comment-modal-card .submit-post { flex: 0 0 auto; width: auto; min-width: 138px; min-height: 40px; padding: 8px 13px; }
.edit-comment-modal-card .composer-symbol-tools { margin: 0; padding: 0; border: 0; }
.edit-comment-modal-card .post-tools { display: flex; flex: 1; }
.edit-comment-modal-card .post-tools > button { display: none; }
.edit-comment-modal-card .composer-symbol-tools > button { display: inline-flex; }
.report-post-card { width: min(100%, 470px); overflow: hidden; }
.report-post-note { margin: 0; padding: 11px 12px; border-bottom: 1px solid var(--line); color: #aab4c1; font-size: 12px; line-height: 1.5; }
.report-post-field { display: block; padding: 11px 12px 0; color: var(--green); font-size: 12px; font-weight: 700; }
.report-post-field select { width: 100%; min-height: 42px; margin-top: 6px; padding: 8px 10px; border: 1px solid #3d4652; border-radius: 5px; outline: 0; background: #171b20; color: #f2f4f7; font: inherit; }
.report-post-field select:focus, .report-post-field textarea:focus { border-color: #4d94dc; box-shadow: 0 0 0 2px rgba(77,148,220,.12); }
.report-post-card .report-post-field textarea { width: 100%; min-height: 92px; margin: 6px 0 0; font-size: 12px; font-weight: 400; }
.report-post-card > .primary-button { min-height: 42px; margin-top: 2px; }
.gift-target { margin: 0; padding: 10px; border-bottom: 1px solid var(--line); color: #b8c1ce; font-size: 10px; }
.gift-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 10px; }
.gift-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 96px; padding: 8px 4px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #171a1f; cursor: pointer; isolation: isolate; }
.gift-option .gift-icon { position: relative; z-index: 1; display: inline-block; font-size: 29px; }
.gift-option strong { color: #e2e7ed; font-family: Georgia, serif; font-size: 11px; }
.gift-option small { color: #f1d75a; font-size: 8px; line-height: 1.3; text-align: center; }
.gift-option.selected { border-color: var(--orange); background: #342611; box-shadow: 0 0 0 1px rgba(255,173,34,.25); }
.gift-option strong, .gift-option small, .received-gift b { position: relative; z-index: 2; }
.gift-rarity-common { --gift-aura: #ff7fa1; --gift-edge: #65404b; --gift-surface: #25171c; }
.gift-rarity-uncommon { --gift-aura: #62d99b; --gift-edge: #376b54; --gift-surface: #10251c; }
.gift-rarity-rare { --gift-aura: #63b9ff; --gift-edge: #376d99; --gift-surface: #102032; }
.gift-rarity-epic { --gift-aura: #c77dff; --gift-edge: #75509d; --gift-surface: #25143a; }
.gift-rarity-legendary { --gift-aura: #ffd76a; --gift-edge: #a47a28; --gift-surface: #35250c; }
.gift-option[class*="gift-rarity-"], .received-gift[class*="gift-rarity-"] { border-color: var(--gift-edge); background: radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--gift-aura) 20%, transparent), transparent 45%), linear-gradient(145deg, var(--gift-surface), #101419 74%); box-shadow: inset 0 0 13px color-mix(in srgb, var(--gift-aura) 10%, transparent); }
.gift-option[class*="gift-rarity-"]::before, .received-gift[class*="gift-rarity-"]::before { content: ""; position: absolute; z-index: 0; inset: -45%; pointer-events: none; background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--gift-aura) 32%, transparent) 49%, transparent 60%); transform: translateX(-45%) rotate(8deg); }
.gift-rarity-epic .gift-icon { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gift-aura) 75%, transparent)); }
.gift-rarity-legendary { box-shadow: inset 0 0 16px #ffd76a24, 0 0 10px #d9a92f1f !important; }
.gift-rarity-legendary .gift-icon { filter: drop-shadow(0 0 8px #ffd76aaa); }
.gift-effect-petals .gift-icon, .gift-effect-float .gift-icon { animation: giftFloat 2.4s ease-in-out infinite; }
.gift-effect-pulse .gift-icon { animation: giftPulse 1.8s ease-in-out infinite; }
.gift-effect-shimmer::before, .gift-effect-diamond::before, .gift-effect-royal::before, .gift-effect-crown::before { animation: giftShimmer 2.8s ease-in-out infinite; }
.gift-effect-sparkle::after, .gift-effect-orbit::after, .gift-effect-diamond::after, .gift-effect-royal::after, .gift-effect-crown::after { content: "✦"; position: absolute; z-index: 1; right: 7px; top: 5px; color: var(--gift-aura); font-size: 11px; text-shadow: 0 0 8px currentColor; animation: giftSparkle 1.7s ease-in-out infinite; }
.gift-effect-orbit::after { animation: giftOrbit 3.1s linear infinite; transform-origin: -29px 33px; }
.gift-effect-crown { animation: giftRoyalBorder 2.4s ease-in-out infinite alternate; }
@keyframes giftFloat { 0%,100% { transform: translateY(1px) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes giftPulse { 0%,100% { transform: scale(.96); filter: drop-shadow(0 0 2px var(--gift-aura)); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 9px var(--gift-aura)); } }
@keyframes giftShimmer { 0%,35% { transform: translateX(-52%) rotate(8deg); opacity: 0; } 55% { opacity: 1; } 85%,100% { transform: translateX(52%) rotate(8deg); opacity: 0; } }
@keyframes giftSparkle { 0%,100% { opacity: .25; transform: scale(.65) rotate(0); } 50% { opacity: 1; transform: scale(1.22) rotate(90deg); } }
@keyframes giftOrbit { to { transform: rotate(360deg); } }
@keyframes giftRoyalBorder { to { border-color: #ffe9a2; box-shadow: inset 0 0 18px #ffd76a38, 0 0 15px #ffc84238; } }
.gift-celebration { --gift-aura: #63b9ff; --gift-edge: #376d99; --gift-surface: #102032; position: fixed; z-index: 5000; left: 50%; top: 18%; width: min(430px, calc(100vw - 28px)); min-height: 92px; display: flex; align-items: center; justify-content: center; gap: 15px; padding: 15px 22px; overflow: hidden; pointer-events: none; border: 1px solid var(--gift-edge); border-radius: 18px; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--gift-aura) 30%, transparent), transparent 52%), linear-gradient(145deg, color-mix(in srgb, var(--gift-surface) 90%, #090b0e), #080a0d); box-shadow: 0 18px 50px #000b, inset 0 0 30px color-mix(in srgb, var(--gift-aura) 18%, transparent), 0 0 32px color-mix(in srgb, var(--gift-aura) 25%, transparent); animation: giftCelebration 3.2s cubic-bezier(.22,.75,.2,1) forwards; }
.gift-celebration::before { content: ""; position: absolute; inset: -80%; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--gift-aura) 35%, transparent), transparent 30%, color-mix(in srgb, var(--gift-aura) 20%, transparent), transparent 65%); animation: giftCelebrationGlow 5s linear infinite; }
.gift-celebration > * { position: relative; z-index: 1; }
.gift-celebration > i { color: var(--gift-aura); font-size: 18px; font-style: normal; text-shadow: 0 0 12px currentColor; animation: giftSparkle 1.2s ease-in-out infinite; }
.gift-celebration-icon { font-size: 50px; filter: drop-shadow(0 0 12px var(--gift-aura)); animation: giftPulse 1.45s ease-in-out infinite; }
.gift-celebration > div { display: grid; gap: 2px; }
.gift-celebration small { color: var(--gift-aura); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.gift-celebration strong { color: #fff; font-family: Georgia, serif; font-size: 20px; text-shadow: 0 1px 12px color-mix(in srgb, var(--gift-aura) 45%, transparent); }
@keyframes giftCelebration { 0% { opacity: 0; transform: translate(-50%, -24px) scale(.72); } 12%,78% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -10px) scale(.94); } }
@keyframes giftCelebrationGlow { to { transform: rotate(360deg); } }
.gift-option .gift-selected-mark { position: absolute; z-index: 5; right: 6px; top: 6px; width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #fff1ad; border-radius: 50%; background: linear-gradient(145deg,#ffd968,#b87308); color: #251500; font-size: 12px; font-style: normal; font-weight: 1000; opacity: 0; transform: scale(.35) rotate(-25deg); box-shadow: 0 0 12px #ffc83d99; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.25,1.35); }
.gift-option.selected[class*="gift-rarity-"] { z-index: 3; border-color: #ffe68a; background: radial-gradient(circle at 50% 6%, color-mix(in srgb, var(--gift-aura) 42%, #ffd55b 15%), transparent 48%), linear-gradient(145deg, color-mix(in srgb, var(--gift-surface) 76%, #5c3b09), #181006 78%); box-shadow: inset 0 0 0 1px #ffe9a76b, inset 0 0 24px color-mix(in srgb, var(--gift-aura) 26%, transparent), 0 0 0 2px #d9951f55, 0 8px 22px #0008, 0 0 18px color-mix(in srgb, var(--gift-aura) 46%, #ffc83d); transform: translateY(-3px) scale(1.035); }
.gift-option.selected .gift-selected-mark { opacity: 1; transform: scale(1) rotate(0); }
.gift-option.selected strong { color: #fff7d0; text-shadow: 0 0 8px #ffcb4c66; }
.gift-option.selected small { color: #ffe27b; }
.gift-option.selected .gift-icon { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--gift-aura) 75%, #ffd75c)); }
.gift-option.selection-pop .gift-icon { animation: giftSelectedPop .48s cubic-bezier(.2,.85,.25,1.35); }
.gift-option.selection-pop { animation: giftSelectedFlash .55s ease-out; }
.gift-selection-summary { min-height: 51px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; margin: 0 10px 9px; padding: 7px 10px; overflow: hidden; border: 1px solid #675425; border-radius: 9px; background: radial-gradient(circle at 5% 20%,#61431955,transparent 36%),linear-gradient(145deg,#241b0c,#13100a); box-shadow: inset 0 0 15px #ffd14a12; }
.gift-selection-summary > span { font-size: 28px; filter: drop-shadow(0 0 7px #ffd35c77); }
.gift-selection-summary > div { min-width: 0; display: grid; gap: 1px; }
.gift-selection-summary small { color: #aa9560; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.gift-selection-summary strong { overflow: hidden; color: #fff0b0; font-family: Georgia,serif; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.gift-selection-summary > b { color: #ffda62; font-size: 12px; white-space: nowrap; }
.gift-selection-summary.selection-pop { animation: giftSummaryPop .42s ease-out; }
@keyframes giftSelectedPop { 0% { transform: scale(.68) rotate(-10deg); } 62% { transform: scale(1.25) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes giftSelectedFlash { 0% { filter: brightness(1.65); } 100% { filter: brightness(1); } }
@keyframes giftSummaryPop { 0% { opacity: .5; transform: translateY(5px) scale(.98); } 100% { opacity: 1; transform: none; } }
.gift-quantity-label { display: grid; grid-template-columns: auto 92px 1fr; align-items: center; gap: 9px; margin: 0 10px 10px; color: var(--green); font-size: 10px; font-weight: 700; }
.gift-quantity-label input { width: 100%; min-height: 40px; padding: 7px 9px; border: 1px solid #4b5562; border-radius: 4px; outline: 0; background: #171a1f; color: #fff1a2; font-size: 15px; font-weight: 800; text-align: center; }
.gift-quantity-label input:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255,173,34,.1); }
.gift-quantity-label small { color: #f1d75a; font-size: 10px; text-align: right; }
.modal-card textarea { width: calc(100% - 20px); min-height: 70px; margin: 0 10px 10px; padding: 8px; resize: vertical; border: 1px solid var(--line); border-radius: 4px; background: #171a1f; color: #eef2f7; }
.modal-card .content-composer textarea { width: 100%; margin: 0; }
.modal-card .content-composer .composer-media-preview, .modal-card .content-composer .composer-style-panel, .modal-card .content-composer .content-composer-note { margin-left: 0; }
.modal-card .content-composer .composer-actions { padding-left: 0; }
.announcement-editor .content-composer, .edit-post-modal-card .content-composer { padding: 10px; }
.modal-card .comment-form textarea { width: 100%; margin: 0 0 7px; }
.modal-card > .primary-button { width: calc(100% - 20px); margin: 0 10px 10px; }
.coin-transfer-card { max-width: 440px; }
.coin-amount-label { display: block; margin: 0 10px 12px; color: var(--green); font-size: 10px; }
.coin-amount-label input { display: block; width: 100%; min-height: 44px; margin-top: 5px; padding: 9px 11px; border: 1px solid #3b4552; border-radius: 4px; outline: 0; background: #171b20; color: #f2dc57; font-size: 16px; font-weight: 800; }
.coin-amount-label input:focus { border-color: #54a35b; box-shadow: 0 0 0 2px rgba(66,230,106,.08); }
.coin-amount-label small { display: block; margin-top: 5px; color: #7d8997; font-size: 8px; }

/* Gmail verification gate for coin transfers and gifts. */
.transaction-email-verification { display: grid; gap: 9px; margin: 10px; padding: 12px; border: 1px solid #7a4f24; border-radius: 10px; background: linear-gradient(145deg,#2a1c0f,#17120d); box-shadow: inset 0 0 20px #ffad2210; }
.transaction-email-verification[hidden] { display: none; }
.transaction-verification-notice { display: flex; align-items: flex-start; gap: 9px; color: #ffd37b; }
.transaction-verification-notice > svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.transaction-verification-notice > span { min-width: 0; display: grid; gap: 2px; }
.transaction-verification-notice strong { color: #ffe5ae; font-size: 13px; }
.transaction-verification-notice small { color: #c9ad80; font-size: 10px; line-height: 1.45; }
.transaction-email-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.transaction-email-row input { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #5a4c3b; border-radius: 6px; outline: 0; background: #121417; color: #f4f6f8; font-size: 13px; }
.transaction-email-row input:focus { border-color: #df9d36; box-shadow: 0 0 0 2px #df9d3626; }
.transaction-email-row input:disabled { opacity: .7; cursor: wait; }
.transaction-email-row button { min-width: 106px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 11px; border: 1px solid #367fe0; border-radius: 6px; background: #1769d7; color: #fff; cursor: pointer; font-size: 12px; font-weight: 900; }
.transaction-email-row button svg { width: 17px; height: 17px; }
.transaction-email-row button:disabled { border-color: #46505d; background: #272d35; color: #8793a2; cursor: not-allowed; }
.transaction-verification-status { display: flex; align-items: flex-start; gap: 6px; color: #f2bd57; font-size: 11px; font-weight: 700; line-height: 1.45; }
.transaction-verification-status svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; }
.transaction-verification-status.is-error { color: #ff8491; }
.transaction-verification-status.is-verified { color: #58dfa0; }
.transaction-protected-content { transition: opacity .18s ease, filter .18s ease; }
.transaction-protected-content.is-verification-locked { opacity: .42; filter: grayscale(.3); pointer-events: none; user-select: none; }
.transaction-protected-content > .primary-button { width: calc(100% - 20px); margin: 0 10px 10px; }
@media(max-width:480px){.transaction-email-row{grid-template-columns:minmax(0,1fr) 48px}.transaction-email-row button{min-width:48px;padding:8px}.transaction-email-row button span{display:none}}

.transfer-history-card { width: min(100%, 560px); overflow: hidden; }
.transfer-history-person { min-height: 58px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #090b0e; }
.transfer-history-person > span { min-width: 0; }
.transfer-history-person strong, .transfer-history-person small { display: block; }
.transfer-history-person strong { color: #edf2f7; font-size: 15px; }
.transfer-history-person small { margin-top: 2px; color: #8e9aa8; font-size: 12px; }
.transfer-history-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 6px; border-bottom: 1px solid var(--line); background: #0c0f13; }
.transfer-history-tabs button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #8995a4; cursor: pointer; font-size: 14px; font-weight: 800; }
.transfer-history-tabs button svg { width: 15px; height: 15px; }
.transfer-history-tabs button.active { border-color: #35668f; background: #152c40; color: #a9d7ff; }
.transfer-history-list { min-height: 170px; max-height: 54vh; overflow-y: auto; background: #07090b; }
.transfer-history-item { position: relative; min-height: 76px; display: grid; grid-template-columns: 38px 43px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 4px 8px; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
.transfer-history-item:last-child { border-bottom: 0; }
.transfer-history-avatar { grid-row: 1 / 3; padding: 0; border: 0; background: none; cursor: pointer; }
.transfer-history-icon { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #66562d; border-radius: 50%; background: #2b2311; font-size: 22px; }
.transfer-history-icon.coins { border-color: #407447; background: #142b18; color: #79e88b; }
.transfer-history-icon svg { width: 21px; height: 21px; }
.transfer-history-copy { min-width: 0; }
.transfer-history-copy strong, .transfer-history-copy span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-history-copy strong { color: #edf1f5; font-size: 14px; }
.transfer-history-copy span { margin-top: 3px; color: #929dab; font-size: 12px; }
.transfer-history-item time { color: #7f8b99; font-size: 11px; text-align: right; }
.transfer-history-item p { grid-column: 3 / 5; margin: 0; color: #c3cbd5; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.transfer-history-empty { min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 18px; color: #8996a5; font-size: 13px; text-align: center; }
.transfer-history-empty svg { width: 24px; height: 24px; color: #5f6f82; }
.profile-game-history-card { width: min(100%, 580px); overflow: hidden; }
.profile-game-history-person { min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--line); background: #090b0e; }
.profile-game-history-person > span { min-width: 0; color: #9aa6b4; font-size: 13px; }
.profile-game-history-person strong, .profile-game-history-person small { display: block; }
.profile-game-history-person strong { color: #f1f4f8; font-size: 15px; }
.profile-game-history-person small { margin-top: 3px; color: #8d99a7; font-size: 11px; }
.profile-game-history-list { min-height: 190px; max-height: 58vh; overflow-y: auto; background: #07090b; }
.profile-game-history-item { display: grid; grid-template-columns:46px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 92px; padding: 10px 11px; border-bottom: 1px solid var(--line-soft); }
.profile-game-history-item:last-child { border-bottom: 0; }
.profile-game-history-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #455260; border-radius: 50%; background: #171d24; color: #a8c8e8; }
.profile-game-history-icon svg { width: 22px; height: 22px; }
.profile-game-history-item.win .profile-game-history-icon { border-color: #3f8255; background: #142a1b; color: #83e9a2; }
.profile-game-history-item.loss .profile-game-history-icon { border-color: #843f4c; background: #2a1419; color: #ff8e9c; }
.profile-game-history-item.draw .profile-game-history-icon { border-color: #846f3f; background: #2a2314; color: #efd07c; }
.profile-game-history-item > div { min-width: 0; }
.profile-game-history-item > div > span { color: #8e9aa8; font-size: 11px; font-weight: 800; }
.profile-game-history-item strong { display: block; margin-top: 2px; color: #f0f3f7; font-size: 14px; }
.profile-game-history-item p { margin: 3px 0 0; color: #a7b1bd; font-size: 12px; line-height: 1.4; }
.profile-game-history-item small { display: block; margin-top: 4px; color: #e5bb68; font-size: 11px; }
.profile-game-history-item time { align-self: start; color: #7f8a98; font-size: 11px; white-space: nowrap; }
.profile-game-history-empty { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; color: #8c98a6; font-size: 13px; text-align: center; }
.profile-game-history-empty svg { width: 28px; height: 28px; color: #60748a; }

/* Site-wide readable typography, calibrated from the global chatbox. */
.live-state,
.text-action,
.refresh-action,
.square-action {
  font-size: 13px;
}
.nav-item { font-size: 12px; font-weight: 700; }
.badge { font-size: 10px; }
.staff-name-icon { min-width: 32px; height: 14px; font-size: 9px; line-height: 12px; }
.profile-copy strong { font-size: 16px; }
.rank { font-size: 11px; }
.profile-copy p { font-size: 13px; }

.room-card strong { font-size: 15px; }
.room-card span,
.room-card small,
.clock-card span {
  font-size: 12px;
}
.quick-links button,
.menu-grid button {
  min-height: 40px;
  font-size: 15px;
}
.home-welcome-clock,
.home-welcome-date,
.welcome-copy > span {
  font-size: 13px;
}
.home-welcome-clock strong { font-size: 16px; }
.site-announcement-content,
.announcement-size-normal .site-announcement-content,
.announcement-editor-preview.announcement-size-normal p {
  font-size: 15px;
}
.announcement-size-small .site-announcement-content,
.announcement-editor-preview.announcement-size-small p {
  font-size: 13px;
}
.announcement-size-large .site-announcement-content,
.announcement-editor-preview.announcement-size-large p {
  font-size: 18px;
}
.announcement-size-xlarge .site-announcement-content,
.announcement-editor-preview.announcement-size-xlarge p {
  font-size: 22px;
}
.site-announcement-meta { font-size: 12px; }
.welcome-copy strong { font-size: 17px; }
.welcome-copy b { font-size: 16px; }
.welcome-copy p { font-size: 13px; }
.admin-label { font-size: 10px; }

.quick-pm-person strong { font-size: 15px; }
.quick-pm-person > span,
.quick-pm-message small,
.quick-pm-message time {
  font-size: 11px;
}
.quick-pm-empty { font-size: 13px; }
.quick-pm-message p { font-size: 15px; line-height: 1.55; }
.quick-pm-form textarea { min-height: 58px; font-size: 16px; }
.quick-pm-bubble > b,
.quick-pm-drop-zone {
  font-size: 11px;
}

.content-pagination button,
.content-pagination span {
  font-size: 12px;
}
.content-pagination button { min-width: 34px; height: 34px; }
.member-filter-tabs button { min-height: 40px; font-size: 13px; font-weight: 700; }
.member-copy strong { font-size: 16px; }
.member-copy span,
.member-item button {
  font-size: 13px;
}
.statistics-note { font-size: 12px; }
.statistics-person-copy strong,
.statistics-staff-person strong {
  font-size: 15px;
}
.statistics-person-copy span,
.statistics-person-copy small,
.statistics-staff-person small {
  font-size: 12px;
}
.statistics-staff-rank { font-size: 10px; }

.feed-tabs,
.feed-filters,
.feed-filters button {
  font-size: 13px;
}
.feed-author strong { font-size: 16px; }
.feed-author span { font-size: 13px; }
.feed-content { color: #fff; font-size: 17px; line-height: 1.65; }
.feed-actions button { font-size: 14px; }
.feed-actions .feed-stat-button,
.feed-load-more {
  font-size: 12px;
}
.post-mood { font-size: 13px; }
.post-audio strong { font-size: 12px; }
.post-tools button { min-height: 36px; font-size: 12px; }
.style-controls label { font-size: 12px; }
.style-controls input,
.style-controls select {
  height: 36px;
  font-size: 13px;
}

.notification-total { font-size: 12px; }
.notification-summary > strong { font-size: 15px; }
.notification-summary > span { font-size: 14px; }
.notification-summary time { font-size: 12px; }
.notification-copy p,
.notification-destination {
  font-size: 13px;
}

.typing-status { font-size: 12px; }
.room-tab { min-height: 37px; font-size: 13px; }
.room-tab b { font-size: 10px; }
.game-catalog-head > span { font-size: 14px; }
.game-catalog-head > strong { font-size: 12px; }
.game-demo-tile strong { font-size: 13px; }
.game-demo-tile small,
.game-demo-note {
  font-size: 11px;
}
.game-demo-tile em { font-size: 9px; }
.message-meta { font-size: 12px; }
.message-meta strong { font-size: 14px; }
.message-bubble { padding: 10px 12px; font-size: 16px; line-height: 1.55; }
.chat-form textarea { min-height: 44px; font-size: 16px; }
.chat-form button { min-height: 44px; font-size: 13px; }

.profile-preview strong { font-size: 18px; }
.profile-preview span { font-size: 13px; }
.profile-form label { font-size: 14px; }
.profile-form input,
.profile-form textarea,
.profile-form select {
  font-size: 16px;
}
.game-card strong { font-size: 15px; }
.game-card span,
.game-card button {
  font-size: 12px;
}
.app-shell > footer span { font-size: 12px; }
.app-shell > footer small { font-size: 11px; }
.toast strong { font-size: 14px; }
.toast span { font-size: 12px; }
.composer-login { font-size: 13px; }
.composer-preview-item small { font-size: 10px; }

.bbcode-dialog > header strong { font-size: 15px; }
.bbcode-workspace > nav button,
.bbcode-choice-grid button { font-size: 12px; }
.bbcode-extra-list button small { font-size: 11px; }

.ranking-tabs button,
.ranking-periods button {
  font-size: 13px;
}
.ranking-note { font-size: 12px; }
.ranking-person > strong { font-size: 15px; }
.ranking-person > span { font-size: 12px; }
.ranking-score > span { font-size: 12px; }
.ranking-score small { font-size: 11px; }

.view[data-page="profile"] .panel-title { font-size: 16px; }
.view[data-page="profile"] .panel-title small,
.view[data-page="profile"] .panel-title .refresh-action {
  font-size: 12px;
}
.profile-cover { font-size: 14px; }
.profile-identity-copy > span,
.profile-identity-copy small,
.member-role {
  font-size: 13px;
}
.profile-bio { font-size: 16px; }
.profile-actions button,
.profile-photo-actions button {
  min-height: 42px;
  font-size: 14px;
}
.profile-stats button > span { font-size: 12px; }
.received-gift b { font-size: 14px; }
.no-gifts { font-size: 13px; }
.profile-info-grid p { min-height: 46px; font-size: 15px; }
.profile-form > .primary-button { font-size: 14px; }
.account-menu-list > button { min-height: 66px; }
.account-menu-list > button strong { font-size: 15px; }
.account-menu-list > button small { font-size: 12px; }
.home-search-form label { font-size: 14px; }
.home-search-form input,
.home-search-form button {
  font-size: 15px;
}

.coming-soon-panel p { font-size: 14px; }
.coming-soon-panel span { font-size: 11px; }
.announcement-editor > p,
.announcement-media-actions > span {
  font-size: 12px;
}
.settings-form > label:not(.switch-setting) { font-size: 14px; }
.settings-form > label:not(.switch-setting) small { font-size: 12px; }
.settings-form input[type="number"],
.settings-form input[type="password"] {
  min-height: 44px;
  font-size: 16px;
}
.switch-setting strong { font-size: 15px; }
.switch-setting small { font-size: 12px; }
.profile-locked-notice p { font-size: 14px; }

.conversation-copy strong,
.direct-user-copy strong {
  font-size: 15px;
}
.conversation-copy span,
.direct-user-copy span {
  font-size: 13px;
}
.conversation-meta { font-size: 11px; }
.conversation-meta b { font-size: 10px; }
.direct-quick-menu button { font-size: 13px; }
.direct-message-footer,
.direct-message-receipt {
  font-size: 11px;
}
.direct-message-text { padding: 10px 12px; font-size: 16px; line-height: 1.55; }
.direct-message-mood,
.direct-message-recalled,
.direct-permission-note {
  font-size: 13px;
}
.direct-reply-quote strong,
.direct-reply-quote span,
.direct-reply-preview strong,
.direct-reply-preview span {
  font-size: 12px;
}
.direct-reaction-summary button,
.direct-message-actions > button {
  font-size: 11px;
}
.direct-message-form textarea { min-height: 72px; font-size: 16px; }
.direct-send-button { min-height: 38px; font-size: 13px; }

.auth-welcome-title,
.auth-form label,
.auth-submit {
  font-size: 15px;
}
.auth-form label small,
.auth-check,
.auth-options > button,
.auth-switch,
.auth-switch button,
.auth-divider {
  font-size: 13px !important;
}

.profile-photo-preview > span,
.profile-file-control > span,
.profile-file-note,
.profile-photo-submit-row button {
  font-size: 13px;
}
.comment-head time,
.comment-actions button {
  font-size: 11px;
}
.comment-body > p { font-size: 15px; }
.comment-reply-hint,
.edit-post-modal-card > small {
  font-size: 12px;
}
.gift-target,
.gift-option strong,
.gift-option small,
.coin-amount-label,
.coin-amount-label small {
  font-size: 13px;
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .app-shell { border-inline: 0; }
  #main-content { padding-inline: 3px; }
  .brand-row { min-height: 58px; }
  .brand-mark { width: 37px; height: 37px; }
  .brand strong { font-size: 19px; }
  .brand small { font-size: 11px; }
  .live-state { padding: 0; }
  .main-nav { position: sticky; top: 0; z-index: 20; }
  .nav-item { min-height: 55px; font-size: 12px; }
  .nav-item svg { width: 19px; height: 19px; }
  .profile-strip { min-height: 57px; }
  .header-inventory-button { width: 38px; height: 38px; border-radius: 11px; }
  .header-inventory-button > svg { width: 19px; height: 19px; }
  .room-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .statistics-layout { grid-template-columns: 1fr; }
  .statistics-staff-list { min-height: 0; }
  .room-card { min-height: 83px; }
  .quick-menu { grid-template-columns: 50% 50%; }
  .clock-card strong { font-size: 23px; }
  .love-line { padding-inline: 24px; }
  .game-grid { grid-template-columns: 1fr; }
  .game-card { flex-direction: row; text-align: left; }
  .game-card strong { flex: 1; }
  .advanced-actions { padding-left: 0; align-items: flex-end; }
  .composer-visibility { width: 32px; height: 32px; flex-basis: 32px; }
  .post-tools button > span { display: none; }
  .post-tools button { width: 32px; justify-content: center; padding-inline: 0; }
  .feed-card-head { align-items: flex-start; }
  .feed-card-menu-popover { min-width: 178px; }
  .feed-actions { flex-wrap: nowrap; }
  .feed-actions .feed-stat-button span { display: none; }
  .feed-like-avatar, .feed-like-avatar.has-avatar-frame { width: 26px; height: 26px; margin-left: -17px; }
  .feed-like-extra { min-width: 27px; height: 27px; margin-left: -18px; }
  .edit-post-modal-card .composer-actions { align-items: stretch; flex-direction: column; }
  .edit-post-modal-card .submit-post { width: 100%; }
  .composer-media-preview, .composer-style-panel { margin-left: 0; }
  .global-chat-content { margin-left: 0; }
  .global-chat-message .post-mood { padding-left: 0; }
  .global-chat-message .post-media-grid, .global-chat-message .post-audio { margin-left: 0; }
  .global-chat-send-state { margin-left: 0; }
  .room-chat-reactions { margin-left: 0; }
  .global-chat-status { margin-left: 0; }
  .global-chat-delete span { display: inline; }
  .quick-pm-window { top: auto; right: 8px; bottom: 8px; width: calc(100vw - 16px); transform: none; }
  .quick-pm-inbox { width: min(330px, calc(100vw - 16px)); }
  .quick-pm-messages { height: min(52vh, 380px); min-height: 200px; }
  .quick-pm-drop-zone span { display: none; }
  .style-controls { grid-template-columns: repeat(2, 1fr); }
  .post-media-grid a { height: 300px; }
  .post-media-grid.media-count-1 > a { width: fit-content; height: auto; max-height: none; aspect-ratio: auto; }
  .post-media-grid.media-count-1 img, .post-media-grid.media-count-1 video { width: auto; height: auto; max-width: 100%; max-height: 420px; object-fit: contain; }
  .post-media-grid.media-count-3 a, .post-media-grid.media-count-4 a { height: 190px; }
  .direct-message-bubble .post-media-grid a { height: 240px; }
  .direct-message-bubble .post-media-grid.media-count-1 > a { height: auto; max-height: none; aspect-ratio: auto; }
  .direct-message-bubble .post-media-grid.media-count-1 img, .direct-message-bubble .post-media-grid.media-count-1 video { width: auto; height: auto; max-width: 100%; max-height: 420px; object-fit: contain; }
  .direct-message-bubble .post-media-grid.media-count-3 a, .direct-message-bubble .post-media-grid.media-count-4 a { height: 170px; }
  .profile-cover { min-height: 0; }
  .friend-request-item { align-items: flex-start; flex-wrap: wrap; }
  .friend-request-item .member-copy { min-width: calc(100% - 55px); }
  .friend-request-actions { width: 100%; justify-content: flex-end; padding-left: 53px; }
  .gift-catalog { grid-template-columns: repeat(2, 1fr); }
  .composer-login { flex-wrap: wrap; }
  .game-catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .game-demo-tile { min-height: 92px; }
  .chat-messages { height: 51vh; min-height: 330px; }
  .chat-form button span { display: none; }
  .chat-form button { width: 44px; padding-inline: 0; }
  .direct-message-list { min-height: 400px; height: auto; }
  .direct-message-bubble { min-width: 0; }
  .quick-pm-message > div { min-width: 132px; }
  .direct-reaction-popover { gap: 2px; width: max-content; max-width: calc(100vw - 20px); padding: 3px; scroll-snap-type: x proximity; }
  .direct-reaction-popover button { min-width: 36px; min-height: 34px; padding: 2px 3px; scroll-snap-align: start; }
  .direct-reaction-popover button > span { font-size: 17px; }
  .direct-reaction-popover button > small { display: none; }
  .direct-reaction-popover button.selected::after { top: 1px; right: 1px; width: 9px; height: 9px; font-size: 6px; }
  .direct-composer-actions .post-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .profile-photo-actions { flex-direction: column; }
  .profile-photo-actions button { justify-content: center; }
  .profile-photo-preview.cover-preview { aspect-ratio: 2 / 1; }
  .bbcode-workspace { grid-template-columns: 84px minmax(0, 1fr); }
  .bbcode-workspace > nav button { min-height: 31px; padding-inline: 5px; font-size: 11px; }
  .bbcode-color-grid { grid-template-columns: repeat(8, minmax(22px, 1fr)); }
  .bbcode-font-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bbcode-emoji-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  .bbcode-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .symbol-picker-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .symbol-picker-groups button span { display: none; }
  .account-mood-card { max-height: 92vh; }
  .account-mood-grid { grid-template-columns: 1fr; max-height: 52vh; }
  .account-mood-intro { margin: 9px; }
  .account-mood-search { margin-inline: 9px; }
  .account-mood-categories { padding-inline: 9px; }
  .auth-panel { min-height: calc(100vh - 100px); }
  .auth-stage, .auth-register-stage { min-height: auto; padding: 14px 8px 23px; }
  .auth-hero { margin-bottom: 12px; }
  .auth-hero strong { font-size: 16px; }
  .auth-hero span { font-size: 15px; letter-spacing: 0; }
  .auth-card-title { min-height: 42px; font-size: 16px; }
  .auth-form-body { padding: 10px; }
  .auth-form label { font-size: 14px; }
  .auth-form input, .auth-form select { min-height: 44px; font-size: 16px; }
  .auth-identity-row { grid-template-columns: minmax(0, 1fr) 108px; }
  .auth-password-field { grid-template-columns: minmax(0, 1fr) 42px; }
  .auth-password-field button { width: 42px; height: 44px; }
  .auth-form-two { grid-template-columns: 1fr; gap: 0; }
  .auth-submit { min-height: 44px; }
  .captcha-row { grid-template-columns: minmax(70px, 1fr) 116px 40px; gap: 5px; }
  .captcha-image { width: 116px; height: 44px; }
  .captcha-row button { width: 40px; height: 44px; }
  .view[data-page="profile"] .panel-title { font-size: 15px; }
  .profile-identity { min-height: 78px; padding-left: 88px; }
  .profile-wall-avatar { width: 68px; height: 68px; }
  .profile-identity-copy strong { font-size: 18px; }
  .profile-identity-copy > span { font-size: 13px; }
  .member-role { font-size: 13px; }
  .profile-actions button, .profile-photo-actions button { font-size: 13px; }
  .profile-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .profile-stats button { min-height: 76px; padding: 7px 3px; }
  .profile-stats button > span { font-size: 11px; }
  .profile-info-grid p { grid-template-columns: 20px minmax(82px, auto) 1fr; font-size: 14px; }
  .profile-form { padding: 14px; }
  .profile-form input, .profile-form textarea, .profile-form select { font-size: 16px; }
  .form-two { grid-template-columns: 1fr; gap: 0; }
  .admincp-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admincp-tabs button { min-height: 50px; justify-content: center; flex-direction: column; gap: 3px; padding: 5px 2px; font-size: 9px; text-align: center; }
  .admincp-tabs button svg { width: 15px; height: 15px; }
  .admin-section-head { align-items: flex-start; }
  .admin-section-head strong { font-size: 15px; }
  .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-stat-card { min-height: 82px; }
  .admin-two-column, .admin-form-grid, .admin-storage-grid, .admin-cache-actions { grid-template-columns: 1fr; }
  .admin-form-grid > label.wide, .admin-form-grid > .admin-switch.wide { grid-column: auto; }
  .admin-user-edit { grid-template-columns: 1fr 1fr; }
  .admin-user-edit button { grid-column: 1 / -1; }
  .admin-user-tools { grid-template-columns: 1fr; }
  .admin-user-tools form, .admin-user-tools form[data-admin-password-form], .admin-user-tools form[data-admin-exclusive-badge-form] { grid-template-columns: 1fr; }
  .admin-user-tools form strong { justify-self: end; }
  .admin-catalog-list > article { align-items: flex-start; flex-wrap: wrap; }
  .admin-catalog-list > article > div:nth-child(2) { min-width: calc(100% - 58px); }
  .admin-catalog-list > article > button { width: 100%; }
  .admin-editor-form { margin: 7px; padding: 8px; }
  .admin-file-list > article { align-items: flex-start; flex-wrap: wrap; }
  .admin-file-list > article > div { min-width: calc(100% - 28px); }
  .admin-file-list > article > button { width: 100%; }
}

@media (max-width: 370px) {
  .brand small { display: none; }
  .composer-actions { padding-left: 0; }
  .auth-identity-row { grid-template-columns: 1fr; }
  .symbol-picker-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .brand-row { gap: 7px; padding-inline: 8px; }
  .brand { min-width: 0; flex: 1; }
  .brand > span:last-child { min-width: 0; }
  .brand strong, .brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-refresh-button { display: grid; place-items: center; gap: 0; }
  .header-refresh-button span { display: none; }
  .header-menu-button { display: grid; }
  .auth-guest .header-menu-button { display: none; }
  .main-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nav-menu-item { display: none; }
  .badge {
    top: -6px;
    right: -10px;
    min-width: 17px;
    height: 15px;
    padding: 0 3px;
    font-size: 9px;
    line-height: 14px;
  }
}

@media (max-width: 340px) {
  .brand-row { padding-inline: 6px; }
  .header-menu-button { flex-basis: 40px; width: 40px; height: 40px; }
}

.app-shell > footer.site-footer {
  display: block;
  margin-top: 7px;
  padding: 0;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #2c2e33, #1d1f24);
  color: var(--text);
  text-align: left;
}
.site-footer > nav {
  min-height: 29px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px 7px;
  border-bottom: 1px solid var(--line);
  background: #050607;
}
.site-footer > nav button {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--orange);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
}
.site-footer > nav button:hover { color: #fff; text-decoration: underline; }
.site-footer > nav i { color: #8b95a3; font-size: 12px; font-style: normal; }
.footer-theme-picker {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 2px 3px 2px 7px;
  border: 1px solid #343c47;
  border-radius: 7px;
  background: #11151a;
  color: #aeb8c4;
  white-space: nowrap;
}
.footer-theme-picker > svg { width: 13px; height: 13px; color: #e2a85a; }
.app-shell > footer.site-footer .footer-theme-picker > span {
  display: inline;
  color: #aeb8c4;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.footer-theme-picker select {
  min-height: 23px;
  max-width: 76px;
  padding: 2px 22px 2px 7px;
  border: 1px solid #424c58;
  border-radius: 5px;
  outline: 0;
  background: #080a0d;
  color: #e4e9ef;
  font-size: 10px;
  cursor: pointer;
}
.site-footer > div { padding: 6px 7px 7px; }
.app-shell > footer.site-footer strong,
.app-shell > footer.site-footer span,
.app-shell > footer.site-footer small {
  display: block;
  margin: 0;
  font-family: var(--font-vietnamese);
  letter-spacing: 0;
  line-height: 1.3;
}
.app-shell > footer.site-footer strong,
.app-shell > footer.site-footer span {
  color: var(--green);
  font-size: 14px;
  font-weight: 700;
}
.app-shell > footer.site-footer small {
  margin-top: 8px;
  color: #aab3bf;
  font-size: 11px;
}
.auth-guest .app-shell > footer.site-footer { display: none; }
@media (max-width: 520px) {
  .site-footer > nav { row-gap: 6px; padding: 6px 7px; }
  .site-footer > nav button { font-size: 12px; }
  .footer-theme-picker { flex: 1 0 100%; justify-content: center; margin-left: 0; }
}

.pwa-install-footer {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 8px;
  padding: 11px;
  border: 1px solid #3d604c;
  border-radius: 8px;
  background: radial-gradient(circle at 0 0, rgba(74, 222, 128, .13), transparent 48%), linear-gradient(145deg, #131b18, #0c1110);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .035);
}
.pwa-install-footer[hidden] { display: none; }
.pwa-install-footer > img {
  width: 52px;
  height: 52px;
  border: 1px solid #4d6c59;
  border-radius: 13px;
  background: #101713;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .32);
}
.pwa-install-footer-copy { min-width: 0; }
.pwa-install-footer-copy strong,
.pwa-install-footer-copy span { display: block; }
.pwa-install-footer-copy strong { color: #f5fff8; font-size: 15px; line-height: 1.25; }
.pwa-install-footer-copy span { margin-top: 3px; color: #a8b7ad; font-size: 12px; line-height: 1.35; }
.pwa-install-footer > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #64d88b;
  border-radius: 7px;
  background: linear-gradient(180deg, #38c971, #199350);
  color: #fff;
  box-shadow: 0 5px 15px rgba(24, 179, 87, .22), inset 0 1px rgba(255, 255, 255, .22);
  cursor: pointer;
  font: 800 12px/1 var(--font-vietnamese);
  white-space: nowrap;
}
.pwa-install-footer > button:hover { filter: brightness(1.08); }
.pwa-install-footer > button:disabled { opacity: .65; cursor: wait; }
.pwa-install-footer > button svg { width: 16px; height: 16px; }

.pwa-install-guide-card { width: min(100%, 430px); overflow: hidden; }
.pwa-install-guide-body { padding: 18px 18px 14px; text-align: center; }
.pwa-install-guide-body > img {
  width: 72px;
  height: 72px;
  border: 1px solid #496255;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .38);
}
.pwa-install-guide-body > p { margin: 11px auto 13px; color: #cbd7cf; font-size: 13px; }
.pwa-install-guide-body ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: install-step;
  text-align: left;
}
.pwa-install-guide-body li {
  position: relative;
  min-height: 38px;
  padding: 9px 10px 9px 43px;
  border: 1px solid #303a34;
  border-radius: 7px;
  background: #111714;
  color: #dce7e0;
  font-size: 13px;
  line-height: 1.45;
  counter-increment: install-step;
}
.pwa-install-guide-body li::before {
  content: counter(install-step);
  position: absolute;
  top: 8px;
  left: 9px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #227e49;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.pwa-install-guide-body > small { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 13px; color: #82978a; font-size: 11px; }
.pwa-install-guide-body > small svg { width: 14px; height: 14px; color: #5fd68a; }
.pwa-install-guide-actions { display: flex; justify-content: flex-end; padding: 10px 12px; border-top: 1px solid #30363d; background: #090c0a; }
.pwa-install-guide-actions .primary-button { min-width: 100px; }

@media (max-width: 560px) {
  .pwa-install-footer { grid-template-columns: 46px minmax(0, 1fr); padding: 10px; }
  .pwa-install-footer > img { width: 46px; height: 46px; border-radius: 12px; }
  .pwa-install-footer > button { grid-column: 1 / -1; width: 100%; }
}

.legal-page-panel,
.contact-page-panel,
.admin-rules-panel {
  overflow: hidden;
}
.legal-page-intro,
.contact-page-hero,
.admin-rules-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(249, 115, 22, .14), rgba(34, 197, 94, .07));
}
.legal-page-intro > i,
.admin-rules-intro > i,
.contact-admin-mark {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(249, 115, 22, .46);
  border-radius: 14px;
  color: var(--orange);
  background: rgba(6, 8, 10, .72);
  box-shadow: inset 0 0 18px rgba(249, 115, 22, .12);
}
.legal-page-intro > i,
.admin-rules-intro > i,
.contact-admin-mark i { width: 25px; height: 25px; }
.legal-page-intro strong,
.admin-rules-intro strong,
.contact-page-hero strong { display: block; color: #fff; font-size: 18px; line-height: 1.3; }
.legal-page-intro p,
.admin-rules-intro p,
.contact-page-hero p { margin: 3px 0 0; color: #b8c0cc; font-size: 13px; line-height: 1.5; }
.legal-terms-content {
  margin: 14px;
  padding: 16px;
  border: 1px solid #3b4048;
  border-radius: 12px;
  color: #e5e7eb;
  background: #101216;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.legal-page-note,
.contact-safety-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  padding: 0 14px 14px;
  color: #98a2b1;
  font-size: 12px;
  line-height: 1.45;
}
.legal-page-note i,
.contact-safety-note i { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--green); }
.contact-page-hero > div:last-child { min-width: 0; }
.contact-page-hero span { display: block; margin-bottom: 2px; color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.contact-method-list { display: grid; gap: 8px; padding: 14px; }
.contact-method-list :is(a, button) {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px;
  border: 1px solid #373c44;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(180deg, #20242a, #171a1f);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
.contact-method-list :is(a, button):hover { border-color: var(--orange); transform: translateY(-1px); }
.contact-method-list :is(a, button) > i:first-child { width: 22px; height: 22px; margin: auto; color: var(--orange); }
.contact-method-list :is(a, button) > i:last-child { width: 17px; height: 17px; color: #8f99a7; }
.contact-method-list :is(a, button) span { min-width: 0; }
.contact-method-list :is(a, button) small { display: block; color: #9ca6b4; font-size: 11px; }
.contact-method-list :is(a, button) strong { display: block; margin-top: 1px; overflow-wrap: anywhere; color: #fff; font-size: 16px; }
.contact-page-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 12px; }
.contact-page-actions button { min-height: 42px; justify-content: center; }

.admin-rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.admin-rules-card { overflow: hidden; border: 1px solid #343d49; border-radius: 7px; background: #0d1116; box-shadow: inset 0 1px rgba(255,255,255,.025); }
.admin-rules-card header { min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid #343d49; background: linear-gradient(180deg, #1b222c, #131820); }
.admin-rules-card header i { width: 19px; height: 19px; }
.admin-rules-card header strong { color: #f4f7fb; font-size: 15px; }
.admin-rules-duty header i { color: #ffbd54; }
.admin-rules-benefit header i { color: #61df8a; }
.admin-rules-card ul { margin: 0; padding: 13px 15px 14px 32px; color: #d2d9e3; font-size: 13px; line-height: 1.65; }
.admin-rules-card li + li { margin-top: 7px; }
.admin-rules-card li::marker { color: #ffb548; }
.admin-rules-benefit li::marker { color: #55d77d; }
.admin-rules-warning { display: flex; align-items: flex-start; gap: 9px; margin: 0 14px 14px; padding: 12px 13px; border: 1px solid #74343e; border-radius: 7px; background: rgba(116, 31, 44, .19); color: #ffacb5; font-size: 13px; line-height: 1.5; }
.admin-rules-warning i { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: #ff6677; }

@media (max-width: 420px) {
  .contact-page-actions { grid-template-columns: 1fr; }
  .legal-page-intro, .contact-page-hero, .admin-rules-intro { align-items: flex-start; padding: 13px; }
  .legal-terms-content { margin: 10px; padding: 13px; }
  .admin-rules-grid { grid-template-columns: 1fr; padding: 10px; }
  .admin-rules-warning { margin: 0 10px 10px; }
}

.live-item-enter {
  animation: live-item-enter .28s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes live-item-enter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Shared nickname module: badge/icon and nickname must always stay on one row. */
.user-nick {
  min-width: 0;
  max-width: 100%;
  width: auto;
  display: inline-flex !important;
  align-items: center !important;
  flex-flow: row nowrap !important;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap !important;
}
.user-nick > .name-icon,
.user-nick > .gender-name-icon,
.user-nick > .global-chat-member-icon {
  display: inline-block !important;
  flex: 0 0 auto !important;
}
.user-nick > .global-chat-member-icon { margin-right: 4px; }
.user-nick > .user-nick-text {
  min-width: 0;
  display: inline-block !important;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}
.shop-name-icon { width: 18px; height: 18px; margin-right: 4px; object-fit: contain; }
.staff-role-icon { animation: staff-role-blink 1.05s steps(2, end) infinite; filter: drop-shadow(0 0 4px currentColor); }
.name-icon-admin.staff-role-icon { animation: none; filter: drop-shadow(0 0 4px #ff5a72); }
.shop-name-symbol { color: #ffe26b; font-size: 16px; line-height: 1; text-shadow: 0 0 7px currentColor; animation: shop-symbol-twinkle 1.15s ease-in-out infinite alternate; }
.user-badge-after {
  flex: 0 0 auto;
  max-width: 68px;
  margin-left: 5px;
  vertical-align: middle;
}
img.user-badge-after { width: auto; height: 15px; object-fit: contain; }
.user-badge-label {
  overflow: hidden;
  padding: 1px 4px;
  border: 1px solid color-mix(in srgb, var(--badge-color) 55%, transparent);
  border-radius: 3px;
  background: var(--badge-bg);
  color: var(--badge-color);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  line-height: 12px;
  text-overflow: ellipsis;
  text-shadow: 0 0 5px var(--badge-color);
  white-space: nowrap;
}
.exclusive-bitch-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  max-width: none;
  padding: 1px 5px;
  border: 1px solid rgba(255, 117, 200, .78);
  border-radius: 8px 3px 8px 3px;
  background: linear-gradient(135deg, #5b1238, #2e0a22);
  box-shadow: 0 0 7px rgba(255, 66, 174, .65), inset 0 0 5px rgba(255, 175, 224, .22);
  color: #ff8bd1;
  font-family: "Dancing Script", cursive;
  font-size: 9px;
  font-style: italic;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: .02em;
  text-shadow: 0 0 5px #ff3ca4, 0 0 9px rgba(255, 60, 164, .72);
  white-space: nowrap;
  transform-origin: center;
  animation: exclusive-bitch-blink 1.8s ease-in-out infinite;
}
@keyframes exclusive-bitch-blink {
  0%, 38%, 58%, 100% { opacity: .86; filter: brightness(.94) saturate(.92); box-shadow: 0 0 5px rgba(255,66,174,.5), inset 0 0 4px rgba(255,175,224,.16); }
  45% { opacity: 1; filter: brightness(1.34) saturate(1.2); box-shadow: 0 0 10px rgba(255,66,174,.9), 0 0 16px rgba(255,91,190,.34), inset 0 0 6px rgba(255,210,239,.34); }
  49% { opacity: .56; filter: brightness(.78) saturate(.82); }
  53% { opacity: 1; filter: brightness(1.22) saturate(1.12); box-shadow: 0 0 9px rgba(255,66,174,.82), inset 0 0 6px rgba(255,210,239,.28); }
}
.exclusive-little-bae-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: visible;
  max-width: none;
  padding: 2px 7px 2px 5px;
  border: 1px solid rgba(255,238,230,.9);
  border-radius: 999px;
  background: linear-gradient(135deg,#ffb49c 0%,#ff825c 52%,#f56b72 100%);
  box-shadow: 0 2px 7px rgba(255,130,92,.5), inset 0 1px 0 rgba(255,255,255,.52);
  color: #fffaf7;
  font-family: "Trebuchet MS",Arial,sans-serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 10px;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(132,48,31,.42);
  white-space: nowrap;
  transform-origin: center;
  animation: exclusive-little-bae-glow 2.2s ease-in-out infinite;
}
.exclusive-little-bae-badge > i {
  color: #fff;
  font-family: Arial,sans-serif;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 4px rgba(255,255,255,.85);
}
.exclusive-little-bae-badge > b {
  color: #fffaf7;
  font: inherit;
}
.exclusive-little-bae-badge:after {
  content: "♥";
  position: absolute;
  top: -5px;
  right: 1px;
  color: #ffd8ca;
  font-family: Arial,sans-serif;
  font-size: 6px;
  line-height: 1;
  text-shadow: 0 0 4px #ff825c;
  animation: exclusive-little-bae-heart 1.3s ease-in-out infinite alternate;
}
@keyframes exclusive-little-bae-glow {
  0%,100% { filter: brightness(.98); transform: translateY(0) scale(1); box-shadow: 0 2px 6px rgba(255,130,92,.42), inset 0 1px 0 rgba(255,255,255,.46); }
  50% { filter: brightness(1.08); transform: translateY(-1px) scale(1.025); box-shadow: 0 3px 10px rgba(255,130,92,.68), inset 0 1px 0 rgba(255,255,255,.62); }
}
@keyframes exclusive-little-bae-heart { from { opacity: .45; transform: scale(.78) rotate(-8deg); } to { opacity: 1; transform: scale(1.18) rotate(8deg); } }
.exclusive-idol-badge {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  max-width: none;
  min-height: 15px;
  padding: 1px 7px 1px 5px;
  border: 1px solid rgba(255, 226, 112, .9);
  border-radius: 999px;
  background: linear-gradient(120deg, #241451 0%, #6b2fa7 42%, #253f8c 72%, #241451 100%);
  background-size: 220% 100%;
  box-shadow: inset 0 0 6px rgba(255,255,255,.24);
  color: #fff0a3;
  line-height: 11px;
  white-space: nowrap;
  transform-origin: center;
  animation: exclusive-idol-aura 2.8s ease-in-out infinite;
}
.exclusive-idol-badge:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -12px;
  bottom: -12px;
  left: -14px;
  width: 10px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
  filter: blur(.2px);
  transform: skewX(-22deg);
  animation: exclusive-idol-shine 2.15s ease-in-out infinite;
}
.exclusive-idol-badge:after {
  content: "✦";
  position: absolute;
  top: -5px;
  right: -2px;
  color: #fffbd2;
  font-size: 6px;
  line-height: 1;
  text-shadow: 0 0 5px #fff, 0 0 8px #ffdf68;
  animation: exclusive-idol-spark 1.35s ease-in-out infinite alternate;
}
.exclusive-idol-badge > i {
  color: #fff7be;
  font-size: 8px;
  font-style: normal;
  text-shadow: 0 0 4px #fff, 0 0 8px #ffce55;
  animation: exclusive-idol-star 1.1s ease-in-out infinite alternate;
}
.exclusive-idol-badge > b {
  color: #fff0a3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .025em;
  line-height: 13px;
  text-shadow: 0 0 4px rgba(255,244,173,.9), 0 0 8px rgba(177,121,255,.9);
}
@keyframes exclusive-idol-aura {
  0%,100% { background-position: 0 50%; filter: brightness(.96) saturate(1); transform: translateY(0); }
  50% { background-position: 100% 50%; filter: brightness(1.2) saturate(1.18); transform: translateY(-1px); box-shadow: inset 0 0 7px rgba(255,255,255,.34); }
}
@keyframes exclusive-idol-shine { 0%,28% { left: -16px; opacity: 0; } 42% { opacity: .9; } 62%,100% { left: calc(100% + 12px); opacity: 0; } }
@keyframes exclusive-idol-spark { from { opacity: .35; transform: scale(.72) rotate(0deg); } to { opacity: 1; transform: scale(1.25) rotate(45deg); } }
@keyframes exclusive-idol-star { from { opacity: .72; transform: scale(.86) rotate(-12deg); } to { opacity: 1; transform: scale(1.18) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) {
  .exclusive-little-bae-badge,.exclusive-little-bae-badge:after,.exclusive-idol-badge,.exclusive-idol-badge:before,.exclusive-idol-badge:after,.exclusive-idol-badge > i { animation: none !important; }
}
.admin-exclusive-badge-preview { display: inline-flex; width: fit-content; margin: 6px 0 0; }
.user-nick.has-nick-background > .user-nick-text {
  margin: 0 2px;
  padding: 0 3px 1px;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--nick-bg-a) 24%, transparent), color-mix(in srgb, var(--nick-bg-b) 32%, transparent));
  box-shadow: 0 3px 7px color-mix(in srgb, var(--nick-bg-glow) 65%, transparent), inset 0 -2px color-mix(in srgb, var(--nick-bg-a) 70%, transparent);
  animation: nickname-background-glow 1.6s ease-in-out infinite alternate;
  animation-delay: var(--nick-bg-animation-delay, 0s);
}
.user-nick.nick-bg-abyss > .user-nick-text { background-image: radial-gradient(circle at 18% 45%, #7d2ba966 0 5%, transparent 18%), linear-gradient(100deg, var(--nick-bg-a), var(--nick-bg-b), #09020f); }
.user-nick.nick-bg-hearts > .user-nick-text { background-image: radial-gradient(circle at 20% 35%, #fff6 0 6%, transparent 7%), radial-gradient(circle at 74% 70%, #fff5 0 5%, transparent 6%), linear-gradient(90deg, var(--nick-bg-a), var(--nick-bg-b)); }
.user-nick.nick-bg-ribbon > .user-nick-text { background-image: repeating-linear-gradient(135deg, #fff2 0 4px, transparent 4px 9px), linear-gradient(90deg, var(--nick-bg-a), var(--nick-bg-b)); }
.user-nick.nick-bg-paw > .user-nick-text { background-image: radial-gradient(ellipse at 18% 50%, #4c261c66 0 9%, transparent 10%), radial-gradient(ellipse at 78% 50%, #fff4 0 7%, transparent 8%), linear-gradient(90deg, var(--nick-bg-a), var(--nick-bg-b)); }
.user-nick.nick-bg-cosmos > .user-nick-text { background-image: radial-gradient(circle at 16% 26%, #fff 0 1px, transparent 2px), radial-gradient(circle at 74% 64%, #82caff 0 1px, transparent 2px), linear-gradient(100deg, var(--nick-bg-a), var(--nick-bg-b)); }
.user-nick.nick-bg-galaxy > .user-nick-text { background-image: radial-gradient(ellipse at 50% 60%, #f6b4ff80, transparent 35%), linear-gradient(110deg, #10175a, var(--nick-bg-a), var(--nick-bg-b), #1b3b79); background-size: 180% 100%; }
.user-nick.nick-bg-stars > .user-nick-text { background-image: radial-gradient(circle at 12% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 48% 74%, #ffe36f 0 1px, transparent 2px), radial-gradient(circle at 84% 25%, #fff 0 1px, transparent 2px), linear-gradient(90deg, var(--nick-bg-a), var(--nick-bg-b)); }
.user-nick.nick-bg-ocean > .user-nick-text { background-image: repeating-radial-gradient(ellipse at 50% 120%, #c7fff52e 0 3px, transparent 4px 8px), linear-gradient(90deg, var(--nick-bg-a), var(--nick-bg-b)); }
.user-nick.nick-bg-coral > .user-nick-text { background-image: radial-gradient(circle at 18% 100%, #ffdb7a66 0 12%, transparent 13%), radial-gradient(circle at 82% 110%, #ff547566 0 15%, transparent 16%), linear-gradient(90deg, var(--nick-bg-a), var(--nick-bg-b)); }
.user-nick.nick-bg-forest > .user-nick-text { background-image: radial-gradient(circle at 18% 30%, #eaff8799 0 1px, transparent 2px), radial-gradient(circle at 76% 70%, #93ffad99 0 1px, transparent 2px), linear-gradient(90deg, var(--nick-bg-a), var(--nick-bg-b)); }
.user-nick.nick-bg-sunset > .user-nick-text { background-image: linear-gradient(90deg, var(--nick-bg-a), #ff9a65, var(--nick-bg-b)); background-size: 180% 100%; }
.user-nick.nick-bg-frost > .user-nick-text { background-image: repeating-linear-gradient(55deg, #fff6 0 1px, transparent 1px 6px), linear-gradient(90deg, var(--nick-bg-a), var(--nick-bg-b)); }
.user-nick.has-custom-name-style > .user-nick-text {
  color: var(--nick-color) !important;
  -webkit-text-stroke: .35px var(--nick-border);
  paint-order: stroke fill;
  text-shadow: 0 0 3px var(--nick-text-glow), 0 0 7px var(--nick-text-glow), 0 0 10px var(--nick-border-glow);
}
.user-nick.nick-effect-shadow > .user-nick-text { font-family: Georgia, serif; letter-spacing: .03em; text-shadow: 1px 1px #050308, 0 0 5px var(--nick-text-glow), 0 0 13px var(--nick-border-glow); }
.user-nick.nick-effect-blood > .user-nick-text { font-family: "Bangers", sans-serif; letter-spacing: .05em; text-shadow: 0 2px 1px #500, 0 0 7px var(--nick-text-glow); }
.user-nick.nick-effect-love > .user-nick-text { font-family: "Dancing Script", cursive; font-size: 1.12em; font-weight: 700; }
.user-nick.nick-effect-princess > .user-nick-text { font-family: "Charm", cursive; font-weight: 700; text-shadow: 0 0 4px var(--nick-text-glow), 1px -1px 0 #ffe78b; }
.user-nick.nick-effect-candy > .user-nick-text { font-family: "Baloo 2", sans-serif; font-weight: 800; letter-spacing: .025em; }
.user-nick.nick-effect-paw > .user-nick-text { font-family: "Coiny", sans-serif; letter-spacing: .015em; }
.user-nick.nick-effect-forest > .user-nick-text { font-family: "Philosopher", serif; font-weight: 700; }
.user-nick.nick-effect-ocean > .user-nick-text { font-family: "Lobster", cursive; letter-spacing: .03em; }
.user-nick.nick-effect-coral > .user-nick-text { font-family: "Pacifico", cursive; font-size: 1.02em; }
.user-nick.nick-effect-ice > .user-nick-text { font-family: "Bungee Inline", sans-serif; font-size: .92em; letter-spacing: .02em; }
.user-nick.nick-effect-star > .user-nick-text { font-family: "Lemonada", sans-serif; font-size: .9em; font-weight: 700; }
.user-nick.nick-effect-galaxy > .user-nick-text,
.user-nick.nick-effect-cosmic > .user-nick-text,
.user-nick.nick-effect-sunset > .user-nick-text,
.user-nick.nick-effect-pearl > .user-nick-text {
  color: transparent !important;
  background-image: linear-gradient(90deg, var(--nick-color), var(--nick-text-glow), var(--nick-border-glow), var(--nick-color));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: nickname-text-shimmer 2.4s linear infinite;
  animation-delay: var(--nick-style-animation-delay, 0s);
}
.user-nick.nick-effect-cosmic > .user-nick-text { font-family: "Bungee Shade", sans-serif; font-size: .9em; }
.user-nick.nick-effect-sunset > .user-nick-text { font-family: "Pattaya", sans-serif; }
.user-nick.nick-effect-pearl > .user-nick-text { font-family: Georgia, serif; }
.user-nick.nick-effect-electric > .user-nick-text { font-family: "Bangers", sans-serif; letter-spacing: .07em; animation: nickname-electric 1.1s steps(2, end) infinite; animation-delay: var(--nick-style-animation-delay, 0s); }
.user-nick.nick-effect-keyboard-blue > .user-nick-text {
  position: relative;
  isolation: isolate;
  color: transparent !important;
  background-color: #31a5ff;
  background-image: linear-gradient(90deg, #31a5ff 0%, #31a5ff 24%, #7fd6ff 34%, #31a5ff 48%, #5cc9ff 60%, #31a5ff 72%, #8de9ff 82%, #4d88ff 90%, #31a5ff 100%);
  background-size: 260% 100%;
  background-position: 0% 50%;
  background-repeat: repeat-x;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0 transparent;
  font-weight: 800;
  text-shadow: none;
  animation: nickname-keyboard-blue 2s steps(1, end) infinite;
  animation-delay: var(--nick-style-animation-delay, 0s);
  will-change: opacity, background-position;
}
.user-nick.nick-effect-keyboard-blue > .user-nick-text::after {
  content: none;
}
@keyframes nickname-keyboard-blue {
  0%, 34% { opacity: 1; background-position: 0% 50%; }
  35%, 49% { opacity: 0; background-position: 28% 50%; }
  50%, 64% { opacity: 1; background-position: 55% 50%; }
  65%, 79% { opacity: 0; background-position: 78% 50%; }
  80%, 100% { opacity: 1; background-position: 100% 50%; }
}
/* This blink is the defining part of the exclusive style, so do not replace it
   with a static color when the device reports reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .user-nick.nick-effect-keyboard-blue > .user-nick-text {
    animation: nickname-keyboard-blue 2s steps(1, end) infinite;
    animation-delay: var(--nick-style-animation-delay, 0s);
  }
}
.admin-exclusive-name-style-preview { display: inline-flex; width: fit-content; margin: 6px 0 0; font-size: 13px; }

.avatar.has-avatar-frame {
  border: 2px solid var(--avatar-frame);
  box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 2px var(--avatar-frame-accent), 0 0 11px var(--avatar-frame-glow);
}
.avatar.has-avatar-frame.avatar-frame-pulse { animation: avatar-frame-pulse 1.55s ease-in-out infinite alternate; }
.avatar.has-avatar-frame.avatar-frame-shine { animation: avatar-frame-shine 1.8s ease-in-out infinite; }
.avatar.has-avatar-frame.avatar-frame-rainbow { animation: avatar-frame-rainbow 2.4s linear infinite; }
.avatar.has-avatar-frame.avatar-theme-skull { border-style: double; filter: grayscale(.35) contrast(1.1); }
.avatar.has-avatar-frame.avatar-theme-bat { border-radius: 38% 38% 48% 48%; }
.avatar.has-avatar-frame.avatar-theme-heart { border-radius: 50% 50% 45% 45%; }
.avatar.has-avatar-frame.avatar-theme-love-vine { position: relative; overflow: visible; border-color: var(--avatar-frame); border-radius: 15%; isolation: isolate; box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), inset 0 0 12px var(--avatar-frame-glow), 0 0 10px var(--avatar-frame-glow); }
.avatar.has-avatar-frame.avatar-theme-love-vine > img { position: relative; z-index: 1; border-radius: inherit; }
.avatar-love-vine { position: absolute; z-index: 3; inset: -16%; width: 132%; height: 132%; overflow: visible; pointer-events: none; }
.avatar-love-vine path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.avatar-love-vine-shadow { stroke: rgba(119,18,68,.78); stroke-width: 4.2; }
.avatar-love-vine-line { stroke: var(--avatar-frame); stroke-width: 2.1; filter: drop-shadow(0 0 3px var(--avatar-frame-glow)); }
.avatar-love-heart { position: absolute; z-index: 4; display: block; color: var(--avatar-frame); font-family: Arial,sans-serif; font-size: max(7px,.5em); font-style: normal; line-height: 1; text-shadow: 0 1px #8c204c,0 0 5px var(--avatar-frame-accent); pointer-events: none; animation: avatar-love-heart-beat 1.8s ease-in-out infinite alternate; }
.avatar-love-heart-one { top: -13%; left: 14%; transform: rotate(-16deg); }
.avatar-love-heart-two { top: 13%; right: -12%; font-size: max(6px,.42em); animation-delay: -.5s; }
.avatar-love-heart-three { right: 12%; bottom: -13%; transform: rotate(14deg); animation-delay: -.9s; }
.avatar-love-heart-four { bottom: 12%; left: -12%; font-size: max(6px,.4em); animation-delay: -1.25s; }
.profile-wall-avatar.avatar-theme-love-vine .avatar-love-vine { inset: -8%; width: 116%; height: 116%; }
.profile-wall-avatar.avatar-theme-love-vine .avatar-love-heart-one { top: -5%; left: 16%; }
.profile-wall-avatar.avatar-theme-love-vine .avatar-love-heart-two { top: 16%; right: -4%; }
.profile-wall-avatar.avatar-theme-love-vine .avatar-love-heart-three { right: 15%; bottom: -5%; }
.profile-wall-avatar.avatar-theme-love-vine .avatar-love-heart-four { bottom: 16%; left: -4%; }
.profile-identity .profile-avatar-heart,
.profile-identity .profile-avatar-edit { z-index: 8; }
.profile-identity.has-love-vine-avatar .profile-avatar-heart { left: 12px; bottom: 19px; height: 26px; min-width: 39px; padding-inline: 5px; z-index: 9; }
.profile-identity.has-love-vine-avatar .profile-avatar-edit { left: 53px; bottom: 19px; width: 28px; height: 28px; z-index: 9; }
@media (max-width: 480px) {
  .profile-identity.has-love-vine-avatar .profile-avatar-heart { left: 11px; min-width: 38px; padding-inline: 4px; }
  .profile-identity.has-love-vine-avatar .profile-avatar-edit { left: 50px; }
}
.avatar.has-avatar-frame.avatar-theme-love-vine.avatar-frame-pulse { animation: avatar-love-vine-glow 1.55s ease-in-out infinite alternate; }
.avatar.has-avatar-frame.avatar-theme-image-frame {
  position: relative;
  overflow: visible;
  border-color: var(--avatar-frame);
  border-radius: 50%;
  isolation: isolate;
  container-type: inline-size;
  box-shadow: inset 0 0 0 2px var(--avatar-frame-glow), 0 0 0 1px var(--avatar-frame), 0 0 8px var(--avatar-frame-glow);
}
.avatar.has-avatar-frame.avatar-theme-image-frame > img { position: relative; z-index: 1; border-radius: 50%; }
.avatar-image-frame { position: absolute; z-index: 5; inset: -42%; width: 184%; height: 184%; display: block; pointer-events: none; transform-origin: 50% 50%; animation: avatar-image-frame-sway 3.8s ease-in-out infinite; }
.avatar-image-frame > img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: contain; border-radius: 0 !important; filter: drop-shadow(0 2px 2px #0009) drop-shadow(0 0 4px var(--avatar-frame-glow)); }
.profile-wall-avatar.avatar-theme-image-frame .avatar-image-frame { inset: -36%; width: 172%; height: 172%; }
.avatar-frame-viewer-avatar.avatar-theme-image-frame .avatar-image-frame { inset: -36%; width: 172%; height: 172%; }
/* Trong khu vực Tin nhắn, khung ảnh chỉ nhô nhẹ và ôm sát avatar. */
#direct-inbox-panel .conversation-avatar-wrap > .avatar.avatar-theme-image-frame .avatar-image-frame,
#direct-conversation-panel .direct-conversation-head > .avatar.avatar-theme-image-frame .avatar-image-frame,
#direct-conversation-panel .direct-message > .avatar.avatar-theme-image-frame .avatar-image-frame {
  inset: -15%;
  width: 130%;
  height: 130%;
}
.avatar.has-avatar-frame.avatar-theme-image-frame.avatar-frame-pulse { animation: avatar-image-frame-breathe 2.4s ease-in-out infinite alternate; }
.avatar.has-avatar-frame.avatar-theme-image-frame.avatar-frame-shine { animation-name: avatar-image-frame-shine; }
.avatar.has-avatar-frame.avatar-theme-image-frame.avatar-frame-rainbow .avatar-image-frame > img { animation: avatar-frame-rainbow 5s linear infinite; }

/* Frames whose WebP already contains localized motion must not inherit the
   generic container sway/breathe animation. This keeps the avatar ring locked
   while motion inside the image (for example ears and tails) continues. */
.avatar.has-avatar-frame.avatar-theme-image-frame.avatar-frame-static-artwork,
.avatar.has-avatar-frame.avatar-theme-image-frame.avatar-frame-static-artwork .avatar-image-frame,
.avatar.has-avatar-frame.avatar-theme-image-frame.avatar-frame-static-artwork .avatar-image-frame > img {
  animation: none !important;
}
.avatar.has-avatar-frame.avatar-theme-dragon-fire {
  position: relative;
  overflow: visible;
  border: 2px solid #ffb52a;
  border-radius: 46% 54% 48% 52%;
  isolation: isolate;
  container-type: inline-size;
  box-shadow: inset 0 0 0 2px #1b0701, inset 0 0 10px #ff5b166b, 0 0 0 1px #7d1e05, 0 0 12px #ff3d00a6;
  transform-style: preserve-3d;
}
.avatar.has-avatar-frame.avatar-theme-dragon-fire > img { position: relative; z-index: 1; border-radius: inherit; }
.avatar-dragon-scene { position: absolute; z-index: 4; inset: -34%; display: block; width: 168%; height: 168%; pointer-events: none; transform-style: preserve-3d; animation: avatar-dragon-float 3.4s ease-in-out infinite; }
.avatar-dragon-frame { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 2px #000b) drop-shadow(0 0 4px #ff4513ad); transform: rotateZ(-2deg) rotateY(-7deg); transform-origin: 50% 50%; }
.avatar-dragon-frame path { stroke-linecap: round; stroke-linejoin: round; }
.avatar-dragon-depth, .avatar-dragon-body, .avatar-dragon-scales, .avatar-dragon-tail { fill: none; }
.avatar-dragon-depth { stroke: #350500; stroke-width: 15; }
.avatar-dragon-body { stroke: #aa2105; stroke-width: 11; }
.avatar-dragon-scales { stroke: #ffd34f; stroke-width: 4.5; stroke-dasharray: .6 8.2; filter: drop-shadow(0 0 2px #ffef91); animation: avatar-dragon-scales-flow 2.3s linear infinite; }
.avatar-dragon-tail { stroke: #ff8f16; stroke-width: 7; filter: drop-shadow(0 0 2px #ff3500); }
.avatar-dragon-head { transform-box: fill-box; transform-origin: 35% 70%; animation: avatar-dragon-head-sway 1.65s ease-in-out infinite alternate; }
.avatar-dragon-neck { fill: #8f1503; stroke: #4a0700; stroke-width: 2; }
.avatar-dragon-face { fill: #c62a06; stroke: #4a0700; stroke-width: 2.2; filter: drop-shadow(0 0 2px #ff5c16); }
.avatar-dragon-horn-back, .avatar-dragon-horn-front { fill: #ffd35c; stroke: #6b2100; stroke-width: 1.5; }
.avatar-dragon-brow { fill: #ffb323; stroke: #721500; stroke-width: 1; }
.avatar-dragon-eye { fill: #fff9b5; stroke: #ff3b00; stroke-width: 1.1; filter: drop-shadow(0 0 2px #fff); animation: avatar-dragon-eye-glow .8s ease-in-out infinite alternate; }
.avatar-dragon-fang { fill: #fffbd8; stroke: #712000; stroke-width: .7; }
.avatar-dragon-fire { position: absolute; z-index: 6; top: 42%; right: -16%; width: 38%; height: 22%; display: block; filter: drop-shadow(0 0 4px #ff3d00); transform: rotate(3deg); transform-origin: 0 50%; animation: avatar-dragon-fire-breath 1.35s ease-in-out infinite; }
.avatar-dragon-fire > i, .avatar-dragon-fire > b { position: absolute; left: 0; top: 50%; display: block; border-radius: 65% 15% 65% 35%; transform: translateY(-50%); transform-origin: 0 50%; }
.avatar-dragon-fire > i:nth-child(1) { width: 100%; height: 100%; background: linear-gradient(90deg,#ffdf45,#ff6a00 52%,#ff1600 82%,transparent); clip-path: polygon(0 32%,22% 3%,44% 29%,70% 0,61% 39%,100% 50%,65% 67%,76% 100%,43% 71%,18% 96%,0 66%); }
.avatar-dragon-fire > i:nth-child(2) { width: 72%; height: 60%; background: linear-gradient(90deg,#fffbd1,#ffe936 45%,#ff7800 100%); clip-path: polygon(0 25%,35% 0,45% 34%,100% 48%,53% 70%,29% 100%,0 70%); animation: avatar-dragon-flame-core .62s ease-in-out infinite alternate; }
.avatar-dragon-fire > i:nth-child(3) { left: 8%; width: 42%; height: 27%; background: #fff; box-shadow: 0 0 5px #fff5a5; opacity: .82; }
.avatar-dragon-fire > b { left: 72%; width: 21%; height: 34%; background: #ff5a00; filter: blur(.4px); animation: avatar-dragon-flame-tip .75s ease-out infinite; }
.avatar-dragon-ember { position: absolute; z-index: 7; right: -7%; top: 46%; width: max(2px,2.5cqw); height: max(2px,2.5cqw); display: block; border-radius: 50%; background: #ffe94d; box-shadow: 0 0 4px #ff3b00; animation: avatar-dragon-ember 1.4s ease-out infinite; }
.avatar-dragon-ember.ember-two { top: 39%; animation-delay: -.48s; }
.avatar-dragon-ember.ember-three { top: 52%; animation-delay: -.92s; }
.avatar.has-avatar-frame.avatar-theme-dragon-fire.avatar-frame-shine { animation: avatar-dragon-breathe 2.2s ease-in-out infinite alternate; }
.profile-wall-avatar.avatar-theme-dragon-fire .avatar-dragon-scene { inset: -28%; width: 156%; height: 156%; }
.profile-identity.has-dragon-avatar .profile-avatar-heart { left: 11px; bottom: 18px; z-index: 9; }
.profile-identity.has-dragon-avatar .profile-avatar-edit { left: 54px; bottom: 18px; z-index: 9; }
.avatar.has-avatar-frame.avatar-theme-princess { outline: 1px solid color-mix(in srgb, var(--avatar-frame-accent) 70%, transparent); outline-offset: 3px; }
.avatar.has-avatar-frame.avatar-theme-paw { border-style: dotted; }
.avatar.has-avatar-frame.avatar-theme-galaxy { filter: saturate(1.35); }
.avatar.has-avatar-frame.avatar-theme-star { clip-path: polygon(50% 0, 61% 9%, 76% 6%, 82% 20%, 96% 27%, 91% 42%, 100% 55%, 88% 66%, 87% 82%, 70% 84%, 59% 98%, 46% 90%, 31% 98%, 21% 84%, 5% 80%, 10% 63%, 0 51%, 11% 39%, 6% 23%, 23% 18%, 31% 4%); }
.avatar.has-avatar-frame.avatar-theme-ocean { border-bottom-width: 4px; }
.avatar.has-avatar-frame.avatar-theme-coral { border-radius: 42% 58% 46% 54%; }
.avatar.has-avatar-frame.avatar-theme-forest { outline: 2px dotted var(--avatar-frame-accent); outline-offset: 2px; }
.avatar.has-avatar-frame.avatar-theme-frost { border-radius: 18%; }
.avatar.has-avatar-frame.avatar-theme-royal { border-width: 3px; border-radius: 36% 36% 50% 50%; }

@keyframes shop-symbol-twinkle { to { opacity: .55; transform: scale(.82) rotate(-8deg); } }
@keyframes nickname-background-glow {
  to { box-shadow: 0 3px 11px var(--nick-bg-glow), inset 0 -2px var(--nick-bg-b); filter: brightness(1.18); }
}
@keyframes nickname-text-shimmer { to { background-position: -220% 0; } }
@keyframes nickname-electric {
  0%, 88%, 100% { filter: brightness(1); transform: translateX(0); }
  90% { filter: brightness(1.8); transform: translateX(-1px); }
  94% { filter: brightness(.8); transform: translateX(1px); }
}
@keyframes avatar-frame-pulse {
  to { box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 3px var(--avatar-frame-accent), 0 0 17px var(--avatar-frame-glow); }
}
@keyframes avatar-love-vine-glow {
  to { box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), inset 0 0 18px var(--avatar-frame-glow), 0 0 16px var(--avatar-frame-glow); filter: brightness(1.08); }
}
@keyframes avatar-love-heart-beat { to { color: #ffd0e2; filter: brightness(1.18); scale: 1.18; } }
@keyframes avatar-image-frame-sway {
  0%, 100% { transform: translateY(0) rotate(-.7deg) scale(1); }
  50% { transform: translateY(-1.6%) rotate(.8deg) scale(1.018); }
}
@keyframes avatar-image-frame-breathe { to { box-shadow: inset 0 0 0 2px var(--avatar-frame-glow),0 0 0 2px var(--avatar-frame-accent),0 0 16px var(--avatar-frame-glow); } }
@keyframes avatar-image-frame-shine {
  0%, 100% { border-color: var(--avatar-frame); box-shadow: inset 0 0 0 2px var(--avatar-frame-glow),0 0 0 2px var(--avatar-frame),0 0 10px var(--avatar-frame-glow); }
  50% { border-color: var(--avatar-frame-accent); box-shadow: inset 0 0 0 2px var(--avatar-frame),0 0 0 3px var(--avatar-frame-accent),0 0 19px var(--avatar-frame-glow); }
}
@keyframes avatar-dragon-float {
  0%, 100% { transform: translateY(0) rotateZ(-1deg) rotateY(0); }
  50% { transform: translateY(-2%) rotateZ(1.8deg) rotateY(9deg); }
}
@keyframes avatar-dragon-scales-flow { to { stroke-dashoffset: -18; } }
@keyframes avatar-dragon-head-sway { to { transform: rotate(5deg) translate(1px,-1px); } }
@keyframes avatar-dragon-eye-glow { to { fill: #fff; filter: drop-shadow(0 0 4px #fff85d); } }
@keyframes avatar-dragon-fire-breath {
  0%, 100% { opacity: .76; transform: rotate(3deg) scaleX(.68) scaleY(.82); }
  45%, 70% { opacity: 1; transform: rotate(-2deg) scaleX(1.08) scaleY(1.06); }
}
@keyframes avatar-dragon-flame-core { to { transform: translateY(-50%) scaleX(.83) scaleY(1.22); } }
@keyframes avatar-dragon-flame-tip { to { opacity: 0; transform: translate(90%,-65%) scale(.25); } }
@keyframes avatar-dragon-ember { to { opacity: 0; transform: translate(550%,-180%) scale(.2); } }
@keyframes avatar-dragon-breathe { to { box-shadow: inset 0 0 0 2px #280a02, inset 0 0 14px #ff9b287d, 0 0 0 2px #ffab26, 0 0 20px #ff3d00d1; filter: brightness(1.09) saturate(1.08); } }
@keyframes avatar-frame-shine {
  0%, 100% { box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 2px var(--avatar-frame), 0 0 9px var(--avatar-frame-glow); }
  50% { box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 3px var(--avatar-frame-accent), 0 0 19px var(--avatar-frame-glow); }
}
@keyframes avatar-frame-rainbow {
  0% { border-color: #ff5f7a; box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 2px #ffd35c, 0 0 13px #ff5f7a; }
  33% { border-color: #55efb4; box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 2px #52dfff, 0 0 13px #55efb4; }
  66% { border-color: #8c6fff; box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 2px #ff75c8, 0 0 13px #8c6fff; }
  100% { border-color: #ff5f7a; box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 2px #ffd35c, 0 0 13px #ff5f7a; }
}
@media (prefers-reduced-motion: reduce) { .avatar.has-avatar-frame.avatar-theme-love-vine, .avatar-love-heart, .avatar.has-avatar-frame.avatar-theme-image-frame, .avatar-image-frame, .avatar-image-frame > img, .avatar.has-avatar-frame.avatar-theme-dragon-fire, .avatar-dragon-scene, .avatar-dragon-scales, .avatar-dragon-head, .avatar-dragon-eye, .avatar-dragon-fire, .avatar-dragon-fire > *, .avatar-dragon-ember { animation: none !important; } }

/* Cửa hàng và túi đồ */
.shop-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 18%, rgba(126, 86, 255, .2), transparent 32%),
    radial-gradient(circle at 10% 90%, rgba(255, 76, 158, .16), transparent 38%),
    linear-gradient(135deg, #11151d, #080a0e);
}
.shop-hero-action { min-width: 0; min-height: 64px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid #394250; border-radius: 9px; background: linear-gradient(145deg,#171c24,#0d1015); color: #dce5f0; cursor: pointer; text-align: left; }
.shop-hero-action:only-child { grid-column: 1 / -1; }
.shop-hero-action:hover { border-color: #5d7190; background: linear-gradient(145deg,#1d2530,#10151c); }
.shop-hero-action > svg:first-child { width: 24px; height: 24px; margin: auto; color: #8fbfff; }
.shop-hero-action > svg:last-child { width: 16px; height: 16px; color: #778394; }
.shop-hero-action span { min-width: 0; display: grid; gap: 2px; }
.shop-hero-action small { color: #818d9c; font-size: 9px; line-height: 1.3; }
.shop-hero-action strong { overflow: hidden; color: #eef4fb; font-size: 14px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.shop-wallet { grid-template-columns: 34px minmax(0,1fr); border-color: #66552a; background: linear-gradient(145deg,#28200f,#121109); color: #ffd85f; }
.shop-wallet > svg:first-child { color: #ffd85f; }
.shop-wallet strong { display: flex; align-items: center; gap: 5px; color: #ffe27c; font-family: Georgia, serif; font-size: 16px; }
.shop-wallet strong b { min-width: 0; overflow: hidden; font: inherit; text-overflow: ellipsis; white-space: nowrap; }
.shop-wallet strong svg { flex: 0 0 16px; width: 16px; height: 16px; color: #75e995; }
.coin-history-card { width: min(100%, 590px); overflow: hidden; }
.coin-history-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); }
.coin-history-summary > span { min-width: 0; display: grid; gap: 2px; padding: 10px 12px; background: #10141a; }
.coin-history-summary small { color: #7f8a98; font-size: 9px; }
.coin-history-summary strong { overflow: hidden; color: #f0f4f8; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.coin-history-summary > span:first-child strong { color: #ffe174; }
.coin-history-list { min-height: 210px; max-height: 58vh; overflow-y: auto; background: #07090c; }
.coin-history-item { min-height: 82px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px 11px; border-bottom: 1px solid var(--line-soft); }
.coin-history-item:last-child { border-bottom: 0; }
.coin-history-direction { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #37414c; border-radius: 50%; background: #151a20; }
.coin-history-direction svg { width: 17px; height: 17px; }
.coin-history-item.positive .coin-history-direction { border-color: #2f7144; background: #10271a; color: #72df92; }
.coin-history-item.negative .coin-history-direction { border-color: #78414a; background: #2a1418; color: #ff8d99; }
.coin-history-item > div { min-width: 0; display: grid; justify-items: start; gap: 3px; }
.coin-history-item > div strong { max-width: 100%; color: #e7edf4; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.coin-history-item > div small,.coin-history-item time { color: #798593; font-size: 9px; }
.coin-history-source { display: inline-flex; align-items: center; min-height: 17px; padding: 2px 6px; border: 1px solid #3b4654; border-radius: 9px; background: #171d25; color: #9bb4d3; font-size: 8px; font-weight: 700; line-height: 1; }
.coin-history-source.unresolved { border-color: #705d31; background: #28200e; color: #e1bd68; }
.coin-history-balance-change { display: flex; align-items: center; gap: 4px; }
.coin-history-balance-change b { color: #aab4c0; font-size: inherit; font-weight: 600; }
.coin-history-balance-change svg { width: 10px; height: 10px; color: #697583; }
.coin-history-origin { display: inline-flex; align-items: flex-start; gap: 4px; color: #93a4b6 !important; line-height: 1.4; }
.coin-history-origin svg { width: 11px; height: 11px; flex: 0 0 11px; margin-top: 1px; color: #71869b; }
.coin-history-origin span { overflow-wrap: anywhere; }
.coin-history-item > b { color: #ff919d; font-size: 12px; white-space: nowrap; }
.coin-history-item.positive > b { color: #79e69a; }
.coin-history-empty { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; color: #84909f; font-size: 11px; text-align: center; }
.coin-history-empty svg { width: 26px; height: 26px; color: #718096; }
.coin-history-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 9px; border-top: 1px solid var(--line); color: #7b8795; background: #0c0f13; font-size: 9px; text-align: center; }
.coin-history-note svg { width: 13px; height: 13px; }
.shop-panel { overflow: hidden; }
.shop-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.shop-mode-tabs button { min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-right: 1px solid var(--line); background: #0b0d10; color: #8993a1; cursor: pointer; font-size: 11px; }
.shop-mode-tabs button:last-child { border-right: 0; }
.shop-mode-tabs button.active { background: #171e28; color: #72aaff; box-shadow: inset 0 -2px #4f94ff; }
.shop-mode-tabs svg { width: 16px; height: 16px; }
.shop-mode-tabs b { min-width: 17px; padding: 1px 4px; border-radius: 9px; background: #283141; color: #dce7fa; font-size: 8px; }
.shop-category-tabs { display: flex; gap: 5px; padding: 8px; overflow-x: auto; border-bottom: 1px solid var(--line-soft); background: #07090c; scrollbar-width: thin; }
.shop-category-tabs button { flex: 0 0 auto; min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid #303744; border-radius: 4px; background: #14171c; color: #8f99a6; cursor: pointer; font-size: 9px; white-space: nowrap; }
.shop-category-tabs button.active { border-color: #7953ba; background: #291b40; color: #dfc4ff; }
.shop-category-tabs svg { width: 14px; height: 14px; }
.shop-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-height: 190px; padding: 9px; scroll-margin-top: 76px; background: #050607; }
.shop-list > .empty-state { grid-column: 1 / -1; }
.shop-list .empty-state .primary-button { margin: 12px auto 0; padding: 8px 13px; }
.shop-pagination { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 5px; padding: 12px; border: 1px solid #2b3542; border-radius: 7px; background: #101419; }
.shop-pagination > small { color: #8d98a6; font-size: 10px; }
.shop-pagination > small b { color: #f2ca65; }
.shop-pagination > div { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.shop-pagination button { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 9px; border: 1px solid #364251; border-radius: 5px; background: #171d25; color: #b6c0cd; cursor: pointer; font-size: 10px; font-weight: 800; }
.shop-pagination button:hover:not(:disabled),.shop-pagination button.active { border-color: #a97920; background: #382b0e; color: #ffdc78; }
.shop-pagination button.active { box-shadow: inset 0 0 0 1px #d6a83e; }
.shop-pagination button:disabled { opacity: .38; cursor: default; }
.shop-pagination button svg { width: 14px; height: 14px; }
.shop-pagination > div > span { min-width: 18px; color: #697586; text-align: center; }
.shop-item { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 10px; overflow: hidden; border: 1px solid #28303a; border-radius: 6px; background: linear-gradient(145deg, #15191e, #0d0f12); }
.shop-item.rarity-rare { border-color: #315e87; }
.shop-item.rarity-epic { border-color: #684497; }
.shop-item.rarity-legendary { border-color: #806121; background: linear-gradient(145deg, #1c180d, #100e0a); }
.shop-rarity {
  position: absolute;
  z-index: 4;
  top: 7px;
  right: 8px;
  min-width: 38px;
  padding: 3px 7px;
  border: 1px solid #46515f;
  border-radius: 10px;
  background: rgba(8, 11, 15, .94);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .58);
  color: #b8c0ca;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.rarity-rare .shop-rarity { border-color: #315e87; background: rgba(12, 31, 48, .96); color: #7cc3ff; }
.rarity-epic .shop-rarity { border-color: #684497; background: rgba(38, 20, 58, .96); color: #d4a2ff; }
.rarity-legendary .shop-rarity { border-color: #806121; background: rgba(52, 39, 10, .97); color: #ffe079; }
.shop-preview { position: relative; width: 100%; min-height: 112px; display: grid; place-items: stretch; align-self: center; padding: 0; overflow: hidden; border: 1px solid #313b49; border-radius: 6px; background: radial-gradient(circle at 30% 30%, #263141, #0a0c10 72%); color: inherit; cursor: zoom-in; text-align: left; }
.shop-preview:hover { border-color: #526a86; background: radial-gradient(circle at 30% 30%, #2c3a4e, #0b0e13 72%); }
.shop-demo-stage { min-width: 0; min-height: 112px; display: flex; align-items: center; justify-content: center; gap: 11px; padding: 22px 12px 17px; }
.shop-demo-stage.avatar-demo { flex-direction: column; gap: 7px; text-align: center; }
.shop-demo-stage.avatar-demo > span { min-width: 0; }
.shop-demo-stage.avatar-demo small, .shop-demo-identity > small { display: block; color: #6f7d8f; font-size: 7px; font-style: normal; font-weight: 700; letter-spacing: .08em; }
.shop-demo-stage.avatar-demo strong { display: block; margin-top: 2px; color: #dfe8f4; font-family: Georgia, serif; font-size: 10px; }
.shop-demo-avatar { width: 45px; height: 45px; font-size: 15px; }
.shop-preview-avatar { width: 58px; height: 58px; font-size: 19px; }
.shop-demo-identity { min-width: 0; max-width: calc(100% - 58px); display: block; }
.shop-demo-identity > strong { max-width: 100%; display: block; margin-top: 4px; overflow: visible; font-size: 14px; line-height: 1.5; }
.shop-demo-identity > em { display: block; margin-top: 5px; color: #6f7a88; font-size: 7px; font-style: normal; }
.shop-preview .user-nick { max-width: 100%; overflow: visible; }
.shop-preview .user-nick > .user-nick-text { overflow: visible; text-overflow: clip; }
.shop-preview-expand { position: absolute; right: 7px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; color: #91a1b5; font-size: 7px; }
.shop-preview-expand svg { width: 11px; height: 11px; }
.shop-item-copy { min-width: 0; padding-top: 0; }
.shop-item-copy > strong { display: block; overflow: hidden; color: #edf1f6; font-family: Georgia, serif; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.shop-item-copy > small { display: block; margin-top: 3px; color: #8a95a3; font-size: 8px; }
.shop-item-copy > p { margin: 5px 0 0; color: #737e8c; font-size: 8px; line-height: 1.45; }
.shop-lifetime { min-height: 23px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; justify-self: start; padding: 3px 7px; border: 1px solid #554827; border-radius: 10px; background: #241e0d; color: #e6c76f; font-size: 8px; }
.shop-lifetime svg { width: 12px; height: 12px; }
.shop-lifetime.permanent { border-color: #275f3b; background: #112b1a; color: #7be99a; }
.shop-lifetime.expiring { border-color: #834d31; background: #351b10; color: #ffad78; }
.shop-modal-info .shop-lifetime { margin-top: 10px; }
.shop-item-action { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #5a491b; border-radius: 4px; background: #34290e; color: #ffd55f; cursor: pointer; font-size: 10px; font-weight: 700; }
.shop-item-action svg { width: 15px; height: 15px; }
.shop-item-action:disabled { opacity: .55; cursor: wait; }
.shop-item-action.insufficient { border-color: #463638; background: #22191b; color: #b69498; }
.shop-item-action.owned { border-color: #36516f; background: #17283a; color: #8dc8ff; }
.shop-item-action.equip { border-color: #356c45; background: #17311e; color: #89efa5; }
.shop-item-action.equipped { border-color: #705a31; background: #2f2818; color: #f2cf7c; }
.shop-item-action.privilege { border-color: #785c21; background: linear-gradient(90deg, #2c210d, #402c0c); color: #ffe182; cursor: default; opacity: 1; }
.shop-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; color: #7d8794; font-size: 9px; line-height: 1.5; }
.shop-note svg { flex: 0 0 auto; width: 15px; height: 15px; color: #6da8ff; }
.shop-note p { margin: 0; }

.shop-preview-modal-card { width: min(94vw, 570px); overflow: hidden; }
.shop-modal-demo { padding: 13px; background: #06080b; }
.shop-modal-demo .shop-demo-stage { min-height: 230px; border: 1px solid #354354; border-radius: 8px; background:
  radial-gradient(circle at 25% 20%, rgba(84, 152, 255, .22), transparent 34%),
  radial-gradient(circle at 80% 80%, rgba(213, 82, 255, .18), transparent 35%),
  linear-gradient(145deg, #1a2230, #090c11);
}
.shop-demo-stage.shop-demo-large { gap: 18px; padding: 28px 22px; }
.shop-demo-stage.shop-demo-large .shop-demo-identity { max-width: calc(100% - 104px); }
.shop-demo-stage.shop-demo-large .shop-demo-identity > small { font-size: 9px; }
.shop-demo-stage.shop-demo-large .shop-demo-identity > strong { margin-top: 7px; font-size: 23px; line-height: 1.6; }
.shop-demo-stage.shop-demo-large .shop-demo-identity > em { margin-top: 8px; font-size: 9px; }
.shop-demo-stage.shop-demo-large.avatar-demo strong { margin-top: 5px; font-size: 15px; }
.shop-demo-stage.shop-demo-large.avatar-demo small { font-size: 9px; }
.shop-modal-avatar { width: 90px; height: 90px; font-size: 28px; }
.shop-modal-demo .user-nick { max-width: 100%; overflow: visible; }
.shop-modal-demo .user-nick > .user-nick-text { overflow: visible; text-overflow: clip; }
.shop-modal-info { position: relative; padding: 13px 14px 10px; }
.shop-modal-info > small { display: block; color: #8290a0; font-size: 9px; }
.shop-modal-info > p { margin: 7px 0 0; color: #a4afbc; font-size: 11px; line-height: 1.55; }
.shop-modal-rarity { position: absolute; z-index: 2; top: 10px; right: 14px; padding: 4px 8px; border: 1px solid #394554; border-radius: 10px; background: #11161d; box-shadow: 0 2px 7px rgba(0,0,0,.45); color: #b5bfca; font-size: 8px; font-weight: 800; letter-spacing: .04em; line-height: 1.15; text-transform: uppercase; white-space: nowrap; }
.shop-modal-rarity.rarity-rare { border-color: #315e87; color: #66b7ff; }
.shop-modal-rarity.rarity-epic { border-color: #684497; color: #c58cff; }
.shop-modal-rarity.rarity-legendary { border-color: #806121; color: #ffd35f; }
.shop-modal-action { width: calc(100% - 28px); min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 14px; border: 1px solid #5a491b; border-radius: 5px; background: #34290e; color: #ffd55f; cursor: pointer; font-size: 12px; font-weight: 800; }
.shop-modal-action svg { width: 17px; height: 17px; }
.shop-modal-action.equip { border-color: #356c45; background: #17311e; color: #89efa5; }
.shop-modal-action.equipped { border-color: #705a31; background: #2f2818; color: #f2cf7c; }
.shop-modal-action.privilege { border-color: #785c21; background: linear-gradient(90deg, #2c210d, #402c0c); color: #ffe182; opacity: 1; }
.shop-modal-note { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 10px 14px 13px; color: #687483; font-size: 8px; text-align: center; }
.shop-modal-note svg { width: 13px; height: 13px; }
.avatar-frame-viewer-card { width: min(84vw,430px); min-height: min(78vh,520px); display: grid; place-items: center; align-content: center; gap: 5px; overflow: hidden; padding: 42px 28px 25px; border: 1px solid #71320f; border-radius: 18px; background: radial-gradient(circle at 50% 40%,#441305 0,#170905 42%,#060708 74%); color: #fff; text-align: center; box-shadow: inset 0 0 45px #ff4b121f,0 18px 60px #000b; }
.avatar-frame-viewer-stage { width: 100%; min-height: 330px; display: grid; place-items: center; perspective: 700px; }
.avatar-frame-viewer-avatar { width: 190px; height: 190px; font-size: 58px; }
.avatar-frame-viewer-card > strong { margin-top: 7px; color: #fff4df; font-family: Georgia,serif; font-size: 22px; text-shadow: 0 0 8px #ff651f; }
.avatar-frame-viewer-card > small { color: #d7a47d; font-size: 11px; }
.avatar-frame-viewer-meta { display: grid; justify-items: center; gap: 3px; margin-top: 2px; }
.avatar-frame-viewer-meta > strong { color: #f7e7d6; font-size: 12px; line-height: 1.35; }
.avatar-frame-viewer-meta > strong:last-child { color: #e8bd82; font-size: 11px; }
.avatar-frame-viewer-card > em { margin-top: 5px; padding: 5px 10px; border: 1px solid #97410d; border-radius: 999px; background: #381305; color: #ffd75e; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .04em; }
.avatar-frame-viewer-actions { width: min(100%,360px); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 13px; }
.avatar-frame-viewer-actions > button { min-width: 0; min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 9px; border: 1px solid #654123; border-radius: 9px; background: linear-gradient(145deg,#2b1a10,#17110e); color: #e7c7a1; cursor: pointer; font-size: 11px; font-weight: 850; line-height: 1.25; }
.avatar-frame-viewer-actions > button:hover { border-color: #bd7034; background: linear-gradient(145deg,#4b260f,#21140e); color: #fff0d7; }
.avatar-frame-viewer-actions > button:first-child { border-color: #8c3c4c; background: linear-gradient(145deg,#5d1e2b,#2c141a); color: #ffb3bd; }
.avatar-frame-viewer-actions > button:last-child { border-color: #775e22; background: linear-gradient(145deg,#4c3a12,#241c0d); color: #ffe08a; }
.avatar-frame-viewer-actions svg { flex: 0 0 16px; width: 16px; height: 16px; }
.avatar-frame-viewer-actions > button:only-child { grid-column: 1/-1; justify-self: center; width: min(100%,220px); }
@media (max-width: 520px) {
  .avatar-frame-viewer-card { width: 92vw; min-height: 470px; padding-inline: 16px; }
  .avatar-frame-viewer-stage { min-height: 295px; }
  .avatar-frame-viewer-avatar { width: 158px; height: 158px; font-size: 48px; }
  .avatar-frame-viewer-actions { grid-template-columns: 1fr; }
  .avatar-frame-viewer-actions > button:only-child { grid-column: auto; width: 100%; }
}

@media (max-width: 620px) {
  .shop-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-hero-action { min-height: 76px; grid-template-columns: 27px minmax(0,1fr); gap: 6px; padding: 8px; }
  .shop-hero-action > svg:last-child { display: none; }
  .shop-hero-action > svg:first-child { width: 21px; height: 21px; }
  .shop-hero-action strong { font-size: 12px; white-space: normal; }
  .shop-hero-action small { font-size: 8px; }
  .shop-wallet { grid-template-columns: 27px minmax(0,1fr); }
  .shop-wallet strong { font-size: 14px; }
  .shop-list { grid-template-columns: 1fr; }
  .shop-pagination { align-items: stretch; flex-direction: column; }
  .shop-pagination > small { text-align: center; }
  .shop-pagination > div { justify-content: center; }
  .shop-pagination button span { display: none; }
  .shop-preview { min-height: 126px; }
  .shop-demo-stage { min-height: 126px; }
  .shop-demo-stage.shop-demo-large { min-height: 210px; flex-direction: column; text-align: center; }
  .shop-demo-stage.shop-demo-large .shop-demo-identity { max-width: 100%; }
}

@keyframes staff-role-blink {
  0%, 45% { opacity: 1; filter: brightness(1.2) drop-shadow(0 0 5px currentColor); }
  46%, 100% { opacity: .42; filter: brightness(.8) drop-shadow(0 0 1px currentColor); }
}
.user-nick-meta {
  min-width: 0;
  max-width: 100%;
  display: flex !important;
  align-items: center !important;
  flex-flow: row nowrap !important;
  gap: 4px;
  overflow: hidden;
  color: #aeb8c5 !important;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap !important;
}
.user-nick-meta > b { flex: 0 0 auto; color: #e0b4ff !important; }
.user-nick-meta > i { flex: 0 0 auto; color: #66717f !important; font-style: normal; }
.user-nick-meta > em { min-width: 0; display: inline-block !important; overflow: hidden; color: #dce3eb !important; font-style: normal; text-overflow: ellipsis; white-space: nowrap !important; }
.quick-pm-person > .quick-pm-user-meta-wrap { display: block; max-width: 100%; margin-top: 3px; }
.quick-pm-user-meta { font-size: 11px; }

/* One shared identity rhythm, based on the home Chatbox identity block. */
.user-identity-top {
  min-width: 0;
  max-width: 100%;
  display: flex !important;
  align-items: center !important;
  flex-flow: row nowrap !important;
  gap: 5px !important;
  min-height: 17px;
  margin: 0 !important;
  overflow: hidden;
}
.user-identity-top > strong {
  min-width: 0;
  flex: 0 1 auto;
  display: flex !important;
  align-items: center;
  overflow: hidden;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-identity-top .user-nick { min-width: 0; max-width: 100%; }
.user-identity-top time,
.user-identity-time {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  margin: 0 !important;
  color: #778291 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  white-space: nowrap;
}
.user-identity-mood {
  min-width: 0;
  max-width: 100%;
  display: flex !important;
  align-items: center !important;
  flex-flow: row nowrap !important;
  gap: 3px !important;
  margin-top: 3px !important;
  color: #8993a1 !important;
  font-size: 11px !important;
  font-weight: 600;
  line-height: 1.4;
}
.member-item { align-items: flex-start; gap: 8px; padding-block: 11px; }
.member-item .avatar { flex: 0 0 48px; width: 48px; height: 48px; }
.member-copy { padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left; }
.member-copy > .member-online-state { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: #aab4c2; font-size: 11px; line-height: 1.4; }
.member-copy > .member-online-state b { color: #78d99a; font-weight: 800; }
.member-copy > .member-location { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: #aab4c2; font-size: 11px; line-height: 1.4; }
.member-copy > .member-location svg { flex: 0 0 12px; width: 12px; height: 12px; color: #6edb94; }
.member-copy > .member-location b { color: #78d99a; font-weight: 800; }

.feed-card-head { align-items: flex-start; gap: 8px; padding-top: 11px; }
.feed-card-head .avatar { flex: 0 0 48px; width: 48px; height: 48px; }
.feed-author { padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left; }
.feed-author .feed-visibility { margin-top: 4px; }

/* Keep framed avatars compact in the two dense public streams. The reserved
   margin gives transparent image frames enough room without clipping text. */
.global-chat-message-head .avatar,
.feed-card-head .avatar { flex: 0 0 42px; width: 42px; height: 42px; }
.global-chat-message-head .avatar.has-avatar-frame.avatar-theme-image-frame,
.feed-card-head .avatar.has-avatar-frame.avatar-theme-image-frame {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
  margin: 9px 11px;
}
.global-chat-message-head .avatar-theme-image-frame .avatar-image-frame,
.feed-card-head .avatar-theme-image-frame .avatar-image-frame,
#member-list .avatar-theme-image-frame .avatar-image-frame {
  inset: -32%;
  width: 164%;
  height: 164%;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none;
}
.global-chat-message-head .avatar-theme-image-frame .avatar-image-frame > img,
.feed-card-head .avatar-theme-image-frame .avatar-image-frame > img,
#member-list .avatar-theme-image-frame .avatar-image-frame > img {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Online avatars are intentionally larger than the reserved text column.
   Frame artwork may paint over nearby content without changing alignment. */
#member-list .member-item .avatar {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
}
#member-list .member-item .avatar.has-avatar-frame.avatar-theme-image-frame {
  flex-basis: 50px;
  width: 50px;
  height: 50px;
  margin: 0;
}

/* Every online row reserves the same visual avatar column. Transparent frame
   artwork may overhang the avatar itself, but it must never push the member
   name sideways or make rows with plain avatars use a different alignment. */
#member-list .member-item {
  display: grid;
  grid-template-columns: 66px minmax(0,1fr) auto;
  align-items: center;
  column-gap: 8px;
  min-height: 76px;
}
#member-list .member-avatar-slot {
  position: relative;
  z-index: 160;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  overflow: visible;
}
#member-list .member-avatar-slot .avatar-image-frame {
  z-index: 170;
}
#member-list .member-avatar-slot > .avatar {
  margin: 0 !important;
}
#member-list .member-copy {
  align-self: center;
  min-width: 0;
  width: 100%;
}
/* Online rows have room up to the mail button, so do not apply the compact
   global badge limit here. This keeps longer earned badges fully readable. */
#member-list .member-copy .user-badge-after {
  max-width: none;
}
#member-list .member-item > [data-open-chat] {
  justify-self: end;
}
#member-list .member-item > .member-chat-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 10px;
}
#member-list .member-item > .member-chat-button svg {
  width: 17px;
  height: 17px;
  pointer-events: none;
}
#member-list .member-item.conversation-row[data-message-frame] {
  min-height: 82px;
  padding-top: 13px;
}
#member-list .member-item.conversation-row[data-message-frame] > .member-chat-button {
  border-color: color-mix(in srgb, var(--message-frame-primary) 58%, #303844);
  background: color-mix(in srgb, var(--message-frame-surface) 78%, #151a21);
  color: var(--message-frame-accent);
}

.conversation-item { min-height: 80px; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 48px 7px 8px; }
.conversation-avatar-wrap { position: relative; width: 48px; height: 48px; display: block; }
.conversation-item .avatar { width: 48px; height: 48px; }
.conversation-item .conversation-avatar-presence { position: absolute; z-index: 4; right: -1px; bottom: -1px; width: 13px; height: 13px; display: none; box-sizing: border-box; border: 2px solid #090b0e; box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 2px 5px rgba(0,0,0,.75); }
.conversation-item .conversation-avatar-presence.online { background: #35df73; box-shadow: 0 0 0 1px rgba(255,255,255,.38), 0 0 8px rgba(53,223,115,.85); }
.conversation-item .conversation-avatar-presence.offline { background: #68727e; }
.conversation-item .user-identity-top > strong { font-size: 17px !important; line-height: 1.15; }
.conversation-item .user-nick.user-nick-member:not(.has-custom-name-style) > .user-nick-text { color: var(--role-member) !important; text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.conversation-item .conversation-presence-dot { margin: 0 1px 0 0; overflow: visible; }
.conversation-item .user-identity-mood { font-size: 12px !important; }
.conversation-copy > .conversation-preview { margin-top: 2px; color: #8993a1; font-size: 11px; font-weight: 400; }
.conversation-meta { align-self: center; padding-top: 0; }
.conversation-row { position: relative; }
.conversation-row.options-open { z-index: 20; background: #10151b; }
.conversation-preview-line { min-width: 0; display: flex !important; align-items: baseline; gap: 4px; margin-top: 2px !important; overflow: hidden; line-height: 1.2; }
.conversation-preview-line > .conversation-preview { min-width: 0; display: block; flex: 0 1 auto; overflow: hidden; color: #8d97a4; font-size: 14px; font-weight: 400; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.conversation-list-time { flex: 0 0 auto; color: #8995a3; font-size: 12px; font-style: italic; font-weight: 400; line-height: 1.2; white-space: nowrap; }
.conversation-item.unread .conversation-preview-line > .conversation-preview { color: #ffe36f; font-weight: 700; }
.conversation-item.unread .conversation-list-time { color: #8cf39f; font-weight: 700; }
.direct-inbox-panel.conversation-list-compact .conversation-item { min-height: 80px; }
.direct-inbox-panel.conversation-list-compact .conversation-item .user-identity-top > .conversation-presence-dot,
.direct-inbox-panel.conversation-list-compact .conversation-copy > .conversation-user-meta { display: none !important; }
.direct-inbox-panel.conversation-list-compact .conversation-item .conversation-avatar-presence { display: block; }
.direct-inbox-panel.conversation-list-compact .conversation-copy { display: grid; align-content: center; gap: 6px; }
.direct-inbox-panel.conversation-list-compact .conversation-preview-line { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px; margin-top: 0 !important; }
.direct-inbox-panel.conversation-list-compact .conversation-preview-line > .conversation-preview { width: 100%; flex: 1 1 auto; margin-top: 0; font-size: 16px; line-height: 1.25; }
.direct-inbox-panel.conversation-list-compact .conversation-list-time { justify-self: end; margin-left: auto; font-size: 12px; }
.conversation-row.unread > .conversation-item { background: linear-gradient(90deg, rgba(18,112,61,.42), rgba(10,40,27,.5) 56%, rgba(9,16,13,.9)); box-shadow: inset 3px 0 #35e879, inset 0 0 0 1px rgba(53,232,121,.13); }
.conversation-row.unread > .conversation-item:hover { background: linear-gradient(90deg, rgba(24,139,76,.5), rgba(13,55,36,.58) 58%, rgba(12,22,17,.94)); }
.conversation-row.unread .conversation-meta b { background: #22bf61; box-shadow: 0 0 9px rgba(34,191,97,.5); }
.conversation-options-toggle { position: absolute; z-index: 4; top: 50%; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid #3b4652; border-radius: 7px; background: #131920; color: #c5d0dc; cursor: pointer; transform: translateY(-50%); }
.conversation-options-toggle:hover, .conversation-options-toggle[aria-expanded="true"] { border-color: #6485a8; background: #1d2a37; color: #fff; }
.conversation-options-toggle svg { width: 16px; height: 16px; }
.conversation-options-menu { position: absolute; z-index: 25; top: 42px; right: 8px; min-width: 174px; overflow: hidden; padding: 4px; border: 1px solid #455362; border-radius: 10px; background: #0d1116; box-shadow: 0 14px 34px rgba(0,0,0,.68); }
.conversation-options-menu[hidden] { display: none !important; }
.conversation-options-menu button { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: #dce4ed; cursor: pointer; font-size: 13px; font-weight: 750; text-align: left; }
.conversation-options-menu button:hover { background: #1b242e; color: #fff; }
.conversation-options-menu button svg { width: 16px; height: 16px; color: #83bfff; }
.conversation-options-menu button.active-pin, .conversation-options-menu button.active-block { color: #ffd36d; }
.conversation-options-menu button.danger { color: #ff7d89; }
.conversation-options-menu button.danger svg, .conversation-options-menu button.active-block svg { color: #ff7180; }
.conversation-options-menu button:disabled { cursor: not-allowed; opacity: .48; }

.direct-user-copy > .direct-user-meta { display: flex; margin-top: 3px; }
.direct-conversation-head { min-height: 82px; align-items: start; }
.direct-conversation-head > .avatar { margin-top: 3px; }
.direct-user-copy > #direct-user-status { margin-top: 3px; color: #8993a1; font-size: 11px; line-height: 1.4; }
.direct-user-copy > #direct-user-status.system-bot { color: #b69aff; font-weight: 700; }
.quick-pm-head { min-height: 65px; align-items: flex-start; }
.quick-pm-head > .quick-pm-back,
.quick-pm-head > .avatar { margin-top: 3px; }
.quick-pm-person > #quick-pm-status { margin-top: 3px; font-size: 11px; }

/* Shared interaction feedback for every current and dynamically-created button. */
button {
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease, opacity .16s ease, transform .16s ease;
}
button svg {
  transform-origin: center;
  transition: color .16s ease, fill .16s ease, transform .16s ease;
}
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover {
    filter: brightness(1.18) saturate(1.08) drop-shadow(0 0 5px rgba(87, 166, 255, .2));
  }
  button:not(:disabled):hover svg {
    transform: scale(1.09);
  }
}
button:not(:disabled):active {
  filter: brightness(.92);
}
button:not(:disabled):active svg {
  transform: scale(.95);
}

/* Khung tin nhắn: chỉ dùng lớp màu và bóng tĩnh để giữ FPS ổn định. */
#direct-conversation-panel[data-direct-theme] .direct-conversation-head[data-message-frame],
.conversation-row[data-message-frame],
.message-frame-demo-card[data-message-frame] {
  position: relative;
  isolation: isolate;
  border: 2px solid var(--message-frame-primary);
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--message-frame-secondary) 20%, transparent), transparent 29%),
    radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--message-frame-primary) 17%, transparent), transparent 31%),
    linear-gradient(145deg, color-mix(in srgb, var(--message-frame-surface) 88%, #171b21), #090b0e);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--message-frame-accent) 26%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--message-frame-secondary) 12%, transparent),
    0 0 9px color-mix(in srgb, var(--message-frame-primary) 28%, transparent);
}
.direct-conversation-head[data-message-frame] { z-index: 8; min-height: 94px; margin: 6px; overflow: visible; padding-top: 19px; border-bottom-width: 2px; }
.direct-conversation-head[data-message-frame] > *:not(.direct-quick-menu),
.conversation-row[data-message-frame] > *:not(.conversation-options-toggle):not(.conversation-options-menu),
.message-frame-demo-card[data-message-frame] > * { position: relative; z-index: 2; }
.conversation-row[data-message-frame] .conversation-options-toggle {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 8px;
  left: auto;
}
.conversation-row[data-message-frame] .conversation-options-menu {
  position: absolute;
  z-index: 25;
  top: 42px;
  right: 8px;
  left: auto;
  width: min(210px, calc(100vw - 36px));
  min-width: 174px;
  font-family: "Be Vietnam Pro", sans-serif;
  text-shadow: none;
}
.conversation-row[data-message-frame] .conversation-options-menu button {
  font-family: inherit;
  text-shadow: none;
}
#direct-conversation-panel[data-message-frame] .direct-quick-menu {
  position: absolute;
  z-index: 5;
  top: 8px;
  right: 48px;
  left: auto;
  width: min(220px, calc(100vw - 36px));
  min-width: 190px;
  font-family: "Be Vietnam Pro", sans-serif;
  text-shadow: none;
}
#direct-conversation-panel[data-message-frame] .direct-quick-menu button {
  font-family: inherit;
  text-shadow: none;
}
.direct-conversation-head[data-message-frame]::before,
.conversation-row[data-message-frame]::before,
.message-frame-demo-card[data-message-frame]::before {
  content: attr(data-message-frame-label);
  position: absolute;
  z-index: 3;
  top: -1px;
  left: 50%;
  max-width: 70%;
  padding: 2px 11px 3px;
  overflow: hidden;
  border: 1px solid var(--message-frame-primary);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  background: color-mix(in srgb, var(--message-frame-surface) 90%, #090b0e);
  color: var(--message-frame-accent);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .08em;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-shadow: 0 0 5px var(--message-frame-primary);
  white-space: nowrap;
  transform: translateX(-50%);
}
.direct-conversation-head[data-message-frame]::after,
.conversation-row[data-message-frame]::after,
.message-frame-demo-card[data-message-frame]::after {
  content: attr(data-message-frame-decor);
  position: absolute;
  z-index: 1;
  right: 12px;
  bottom: 5px;
  color: var(--message-frame-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  opacity: .76;
  text-shadow: 0 0 6px var(--message-frame-secondary);
  pointer-events: none;
}
.conversation-row[data-message-frame] { margin: 7px 6px; border-bottom: 2px solid var(--message-frame-primary); overflow: visible; }
.conversation-row[data-message-frame]:last-child { border-bottom: 2px solid var(--message-frame-primary); }
.conversation-row[data-message-frame]::before { max-width: 70%; }
.conversation-row[data-message-frame] .conversation-item { min-height: 82px; padding-top: 13px; border-radius: 10px; }
.conversation-row[data-message-frame] .conversation-options-toggle { border-color: color-mix(in srgb, var(--message-frame-primary) 58%, #303844); }

#direct-conversation-panel[data-direct-theme] .direct-conversation-head[data-message-frame][data-message-frame-theme="admin"],
.conversation-row[data-message-frame-theme="admin"],
.message-frame-demo-card[data-message-frame-theme="admin"] {
  border-color: #ff293d;
  background: radial-gradient(circle at 13% 12%, #ff293d2e, transparent 27%), linear-gradient(145deg, #25080d, #0b0c0f 72%);
  box-shadow: inset 0 0 0 1px #ffd36a42, inset 0 0 16px #ff293d1f, 0 0 8px #ff293d42;
}
#direct-conversation-panel[data-direct-theme] .direct-conversation-head[data-message-frame][data-message-frame-theme="diamond"],
.conversation-row[data-message-frame-theme="diamond"],
.message-frame-demo-card[data-message-frame-theme="diamond"] {
  border-color: #f5c84b;
  background: radial-gradient(circle at 12% 20%, #5de1ff35, transparent 25%), radial-gradient(circle at 86% 70%, #f5c84b24, transparent 31%), linear-gradient(145deg, #211b08, #071217);
  box-shadow: inset 0 0 0 1px #effcff59, inset 0 0 18px #5de1ff24, 0 0 9px #f5c84b4d;
}
#direct-conversation-panel[data-direct-theme] .direct-conversation-head[data-message-frame][data-message-frame-theme="gifts"],
.conversation-row[data-message-frame-theme="gifts"],
.message-frame-demo-card[data-message-frame-theme="gifts"] {
  border-color: #ffb84d;
  background: radial-gradient(circle at 10% 20%, #ff5f9f2e, transparent 22%), radial-gradient(circle at 80% 18%, #63f0c529, transparent 22%), radial-gradient(circle at 88% 84%, #bd62ff30, transparent 26%), linear-gradient(145deg, #21100d, #110a18);
}
#direct-conversation-panel[data-direct-theme] .direct-conversation-head[data-message-frame][data-message-frame-theme="smile"],
.conversation-row[data-message-frame-theme="smile"],
.message-frame-demo-card[data-message-frame-theme="smile"] {
  border-color: #ffe158;
  background: radial-gradient(circle at 12% 15%, #ffe1582b, transparent 27%), radial-gradient(circle at 87% 84%, #42e6bd26, transparent 28%), linear-gradient(145deg, #1c1a09, #081511);
}
#direct-conversation-panel[data-direct-theme] .direct-conversation-head[data-message-frame][data-message-frame-theme="love"],
.conversation-row[data-message-frame-theme="love"],
.message-frame-demo-card[data-message-frame-theme="love"] {
  border-color: #ff73b9;
  background: radial-gradient(circle at 12% 15%, #ffd8ec30, transparent 25%), radial-gradient(circle at 84% 78%, #d99aff2c, transparent 30%), linear-gradient(145deg, #260e1d, #120a18);
  box-shadow: inset 0 0 0 1px #ffd8ec3d, inset 0 0 18px #ff73b921, 0 0 9px #ff73b947;
}
#direct-conversation-panel[data-direct-theme] .direct-conversation-head[data-message-frame][data-message-frame-theme="level"],
.conversation-row[data-message-frame-theme="level"],
.message-frame-demo-card[data-message-frame-theme="level"] {
  border-color: #00e5ff;
  background: radial-gradient(circle at 11% 14%, #70f7ff35, transparent 26%), radial-gradient(circle at 88% 82%, #00a8c630, transparent 31%), linear-gradient(145deg, #061f27, #031014 74%);
  box-shadow: inset 0 0 0 1px #d9fdff45, inset 0 0 19px #00e5ff24, 0 0 10px #00dffb59;
}

.shop-demo-stage.message-frame-demo { width: 100%; padding: 15px 10px; }
.message-frame-demo-card { width: min(100%, 390px); min-height: 88px; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 9px; padding: 17px 12px 10px; }
.message-frame-demo-card > .avatar { width: 50px; height: 50px; }
.message-frame-demo-card > span { min-width: 0; display: grid; gap: 3px; }
.message-frame-demo-card small { color: #8995a3; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.message-frame-demo-card strong { min-width: 0; overflow: hidden; color: #f5f7fa; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.message-frame-demo-card em { color: var(--message-frame-accent); font-size: 8px; font-style: normal; font-weight: 800; }
.shop-demo-stage.shop-demo-large .message-frame-demo-card { min-height: 126px; grid-template-columns: 94px minmax(0,1fr); padding: 25px 18px 16px; }
.shop-demo-stage.shop-demo-large .message-frame-demo-card > .avatar { width: 90px; height: 90px; }
.shop-demo-stage.shop-demo-large .message-frame-demo-card strong { font-size: 21px; }
@media (max-width: 620px) {
  .direct-conversation-head[data-message-frame] { margin: 5px; }
  .conversation-row[data-message-frame] { margin-inline: 5px; }
  .conversation-row[data-message-frame]::before { max-width: 42%; font-size: 5px; }
  .shop-demo-stage.shop-demo-large .message-frame-demo-card { grid-template-columns: 66px minmax(0,1fr); text-align: left; }
  .shop-demo-stage.shop-demo-large .message-frame-demo-card > .avatar { width: 62px; height: 62px; }
}

/* Bảng màu đầy đủ cho từng khung: hai phía tin nhắn, chữ, icon và trạng thái. */
#direct-conversation-panel[data-message-frame],
#direct-conversation-panel .direct-message[data-message-frame] {
  --mf-list-bg: radial-gradient(circle at 15% 8%, color-mix(in srgb, var(--message-frame-primary) 16%, transparent), transparent 31%), linear-gradient(155deg, var(--message-frame-surface), #050608 75%);
  --mf-in-bg: linear-gradient(145deg, #1c2028, #101319);
  --mf-in-border: var(--message-frame-secondary);
  --mf-in-text: #f5f8fc;
  --mf-in-muted: #c1cad6;
  --mf-own-bg: linear-gradient(145deg, color-mix(in srgb, var(--message-frame-primary) 68%, #202630), color-mix(in srgb, var(--message-frame-surface) 72%, #11151b));
  --mf-own-border: var(--message-frame-primary);
  --mf-own-text: #ffffff;
  --mf-own-muted: #d7deea;
  --mf-accent: var(--message-frame-accent);
  --mf-danger: #ff9aa5;
  --mf-control-bg: color-mix(in srgb, var(--message-frame-surface) 76%, #151a21);
  --mf-control-border: color-mix(in srgb, var(--message-frame-primary) 62%, #43505f);
}
#direct-conversation-panel[data-message-frame-theme="admin"],
#direct-conversation-panel .direct-message[data-message-frame-theme="admin"] {
  --mf-list-bg: radial-gradient(circle at 12% 8%, #ff293d26, transparent 29%), radial-gradient(circle at 88% 78%, #ff825c17, transparent 35%), linear-gradient(155deg, #19080c, #050607 74%);
  --mf-in-bg: linear-gradient(145deg, #291319, #120d10);
  --mf-in-border: #ff6678;
  --mf-in-text: #fff5f6;
  --mf-in-muted: #e9aeb7;
  --mf-own-bg: linear-gradient(145deg, #b92239, #64101f);
  --mf-own-border: #ff8b98;
  --mf-own-text: #fff8f9;
  --mf-own-muted: #ffd0d6;
  --mf-accent: #ffd36a;
  --mf-danger: #ff9aa7;
  --mf-control-bg: #2b1117;
  --mf-control-border: #c84455;
}
#direct-conversation-panel[data-message-frame-theme="diamond"],
#direct-conversation-panel .direct-message[data-message-frame-theme="diamond"] {
  --mf-list-bg: radial-gradient(circle at 12% 10%, #5de1ff24, transparent 29%), radial-gradient(circle at 88% 80%, #f5c84b1f, transparent 36%), linear-gradient(155deg, #07151b, #080806 76%);
  --mf-in-bg: linear-gradient(145deg, #112934, #09171e);
  --mf-in-border: #65ddf6;
  --mf-in-text: #f3fcff;
  --mf-in-muted: #b9e4ed;
  --mf-own-bg: linear-gradient(145deg, #745a12, #34290b);
  --mf-own-border: #f5d36d;
  --mf-own-text: #fff9dd;
  --mf-own-muted: #f1df9e;
  --mf-accent: #76e9ff;
  --mf-danger: #ff9b86;
  --mf-control-bg: #12252d;
  --mf-control-border: #55bace;
}
#direct-conversation-panel[data-message-frame-theme="gifts"],
#direct-conversation-panel .direct-message[data-message-frame-theme="gifts"] {
  --mf-list-bg: radial-gradient(circle at 11% 11%, #ff6d9d24, transparent 28%), radial-gradient(circle at 86% 78%, #63f0c51e, transparent 33%), linear-gradient(155deg, #1a0b1d, #080609 76%);
  --mf-in-bg: linear-gradient(145deg, #39204b, #1c1028);
  --mf-in-border: #cf87ff;
  --mf-in-text: #fff8ff;
  --mf-in-muted: #e4c8f3;
  --mf-own-bg: linear-gradient(145deg, #a84452, #69224e);
  --mf-own-border: #ffbf69;
  --mf-own-text: #fff9f1;
  --mf-own-muted: #ffd7c7;
  --mf-accent: #72f1cc;
  --mf-danger: #ff9ab1;
  --mf-control-bg: #28152f;
  --mf-control-border: #aa65d2;
}
#direct-conversation-panel[data-message-frame-theme="smile"],
#direct-conversation-panel .direct-message[data-message-frame-theme="smile"] {
  --mf-list-bg: radial-gradient(circle at 13% 9%, #ffe15820, transparent 28%), radial-gradient(circle at 88% 82%, #42e6bd1f, transparent 35%), linear-gradient(155deg, #0b1713, #070805 76%);
  --mf-in-bg: linear-gradient(145deg, #173a31, #0d211c);
  --mf-in-border: #58e2bf;
  --mf-in-text: #f2fff9;
  --mf-in-muted: #b8e6d9;
  --mf-own-bg: linear-gradient(145deg, #756616, #3a350c);
  --mf-own-border: #ffe477;
  --mf-own-text: #fffce8;
  --mf-own-muted: #eee5a8;
  --mf-accent: #fff08c;
  --mf-danger: #ff9f9f;
  --mf-control-bg: #183029;
  --mf-control-border: #4ebd9f;
}
#direct-conversation-panel[data-message-frame-theme="love"],
#direct-conversation-panel .direct-message[data-message-frame-theme="love"] {
  --mf-list-bg: radial-gradient(circle at 12% 10%, #ff73b926, transparent 29%), radial-gradient(circle at 88% 80%, #d99aff20, transparent 35%), linear-gradient(155deg, #210d1b, #09060b 76%);
  --mf-in-bg: linear-gradient(145deg, #44203b, #241222);
  --mf-in-border: #dc91c7;
  --mf-in-text: #fff6fb;
  --mf-in-muted: #edc6dc;
  --mf-own-bg: linear-gradient(145deg, #b63776, #6a1c49);
  --mf-own-border: #ff98ca;
  --mf-own-text: #fff8fc;
  --mf-own-muted: #ffd1e7;
  --mf-accent: #ffd8ec;
  --mf-danger: #ffb0c9;
  --mf-control-bg: #32152b;
  --mf-control-border: #b9538a;
}
#direct-conversation-panel[data-message-frame-theme="level"],
#direct-conversation-panel .direct-message[data-message-frame-theme="level"] {
  --mf-list-bg: radial-gradient(circle at 12% 9%, #00e5ff29, transparent 30%), radial-gradient(circle at 88% 82%, #70f7ff1c, transparent 35%), linear-gradient(155deg, #041a20, #03090c 76%);
  --mf-in-bg: linear-gradient(145deg, #123641, #09232b);
  --mf-in-border: #5beafa;
  --mf-in-text: #f2fdff;
  --mf-in-muted: #b5e9ef;
  --mf-own-bg: linear-gradient(145deg, #007f96, #004c5d);
  --mf-own-border: #75f4ff;
  --mf-own-text: #f4feff;
  --mf-own-muted: #c0f4f7;
  --mf-accent: #d9fdff;
  --mf-danger: #ff9ead;
  --mf-control-bg: #0c2a32;
  --mf-control-border: #22bfd2;
}

#direct-conversation-panel[data-message-frame] .direct-message-list { background: var(--mf-list-bg); }
#direct-conversation-panel[data-message-frame] .direct-message-list::before { content: none !important; }
#direct-conversation-panel[data-message-frame] .direct-message:not(.own) .direct-message-bubble {
  border-color: var(--mf-in-border);
  background: var(--mf-in-bg);
  color: var(--mf-in-text);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--mf-in-border) 10%, transparent), 0 3px 9px rgba(0,0,0,.35);
  backdrop-filter: none;
}
#direct-conversation-panel[data-message-frame] .direct-message.own .direct-message-bubble {
  border-color: var(--mf-own-border);
  background: var(--mf-own-bg);
  color: var(--mf-own-text);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--mf-own-border) 10%, transparent), 0 3px 9px rgba(0,0,0,.35);
}
#direct-conversation-panel[data-message-frame] .direct-message-text { background: transparent !important; text-shadow: 0 1px 1px rgba(0,0,0,.7); }
#direct-conversation-panel[data-message-frame] .direct-message:not(.own) .direct-message-text { color: var(--mf-in-text) !important; }
#direct-conversation-panel[data-message-frame] .direct-message.own .direct-message-text { color: var(--mf-own-text) !important; }
#direct-conversation-panel[data-message-frame] .direct-message-text *:not(.bbcode-rainbow):not(.bbcode-nick) { color: inherit !important; }
#direct-conversation-panel[data-message-frame] .direct-message-text .bbcode-background { background: rgba(0,0,0,.24) !important; color: inherit !important; }
#direct-conversation-panel[data-message-frame] .direct-message-text a,
#direct-conversation-panel[data-message-frame] .direct-message-text .bbcode-nick { color: var(--mf-accent) !important; text-decoration-color: currentColor; }
#direct-conversation-panel[data-message-frame] .direct-message:not(.own) .direct-message-time,
#direct-conversation-panel[data-message-frame] .direct-message:not(.own) .direct-message-time-only { color: var(--mf-in-muted); }
#direct-conversation-panel[data-message-frame] .direct-message.own .direct-message-time,
#direct-conversation-panel[data-message-frame] .direct-message.own .direct-message-time-only { color: var(--mf-own-muted); }
#direct-conversation-panel[data-message-frame] .direct-message-mood { color: var(--mf-accent); font-weight: 700; }
#direct-conversation-panel[data-message-frame] .direct-message-recalled { color: var(--mf-in-muted); }
#direct-conversation-panel[data-message-frame] .direct-message.own .direct-message-recalled { color: var(--mf-own-muted); }
#direct-conversation-panel[data-message-frame] .direct-reply-quote { border-left-color: var(--mf-accent); background: rgba(0,0,0,.28); }
#direct-conversation-panel[data-message-frame] .direct-reply-quote strong { color: var(--mf-accent); }
#direct-conversation-panel[data-message-frame] .direct-message:not(.own) .direct-reply-quote span { color: var(--mf-in-text); }
#direct-conversation-panel[data-message-frame] .direct-message.own .direct-reply-quote span { color: var(--mf-own-text); }
#direct-conversation-panel[data-message-frame] .direct-message-footer,
#direct-conversation-panel[data-message-frame] .direct-message-state { color: var(--mf-own-muted); }
#direct-conversation-panel[data-message-frame] .direct-message-state > button { color: var(--mf-danger); font-weight: 800; }
#direct-conversation-panel[data-message-frame] .direct-message-state > button:hover { color: #ffffff; }
#direct-conversation-panel[data-message-frame] .direct-message-receipt { color: var(--mf-own-muted); font-weight: 700; }
#direct-conversation-panel[data-message-frame] .direct-message-receipt svg { color: var(--mf-accent); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--mf-accent) 55%, transparent)); }
#direct-conversation-panel[data-message-frame] .direct-message-receipt.is-sending,
#direct-conversation-panel[data-message-frame] .direct-message-receipt.is-sending svg { color: var(--mf-own-muted); }
#direct-conversation-panel[data-message-frame] .direct-message-receipt.is-failed,
#direct-conversation-panel[data-message-frame] .direct-message-receipt.is-failed svg { color: var(--mf-danger); }
#direct-conversation-panel[data-message-frame] .direct-reaction-total { border-color: var(--mf-control-border); background: var(--mf-control-bg); color: var(--mf-accent); }
#direct-conversation-panel[data-message-frame] .direct-reaction-total > b { color: var(--mf-accent); }
#direct-conversation-panel[data-message-frame] button.direct-reaction-total:hover { border-color: var(--mf-accent); background: color-mix(in srgb, var(--mf-control-bg) 76%, #ffffff); }
#direct-conversation-panel[data-message-frame] .direct-message-actions > button { border-color: var(--mf-control-border); background: var(--mf-control-bg); color: var(--mf-accent); }
#direct-conversation-panel[data-message-frame] .direct-message-actions > button:hover,
#direct-conversation-panel[data-message-frame] .direct-message-actions > button:focus-visible { border-color: var(--mf-accent); background: color-mix(in srgb, var(--mf-control-bg) 78%, #ffffff); color: #ffffff; }
#direct-conversation-panel[data-message-frame] .direct-message-actions > button:last-child { color: var(--mf-danger); }
#direct-conversation-panel[data-message-frame] .direct-message-bubble .post-audio { border-color: var(--mf-control-border); background: rgba(0,0,0,.25); }
#direct-conversation-panel[data-message-frame] .direct-message-bubble .post-audio > svg { color: var(--mf-accent); }
#direct-conversation-panel[data-message-frame] .direct-message-bubble .post-audio strong { color: inherit; }
#direct-conversation-panel[data-message-frame] .direct-message-bubble .post-audio audio { color-scheme: dark; accent-color: var(--mf-accent); }
#direct-conversation-panel[data-message-frame] .direct-message-bubble .post-media-grid a { border-color: var(--mf-control-border); }

#direct-conversation-panel[data-message-frame] .direct-compose-dock { border-color: var(--mf-control-border); background: color-mix(in srgb, var(--message-frame-surface) 86%, #0e1115); }
#direct-conversation-panel[data-message-frame] .direct-user-copy > .direct-user-meta { color: var(--mf-in-muted); }
#direct-conversation-panel[data-message-frame] #direct-user-status.online { color: var(--mf-accent); }
#direct-conversation-panel[data-message-frame] #direct-user-status.offline { color: var(--mf-danger); }
.direct-user-copy > #direct-user-status.online,
#direct-conversation-panel[data-message-frame] #direct-user-status.online { color: #3ee978; text-shadow: 0 0 8px rgba(62,233,120,.28); }
#direct-user-status.online::before { width: 6px; height: 6px; flex: 0 0 6px; content: ""; border-radius: 50%; background: #28df68; box-shadow: 0 0 7px rgba(40,223,104,.75); }
#direct-conversation-panel[data-message-frame] .direct-more-button,
#direct-conversation-panel[data-message-frame] .direct-back-button { border-color: var(--mf-control-border); background: var(--mf-control-bg); color: var(--mf-accent); }
#direct-conversation-panel[data-message-frame] .direct-more-button:hover,
#direct-conversation-panel[data-message-frame] .direct-back-button:hover { border-color: var(--mf-accent); color: #ffffff; }
#direct-conversation-panel[data-message-frame] .direct-message-form { background: transparent; }
#direct-conversation-panel[data-message-frame] .direct-message-form textarea { border-color: var(--mf-control-border); background: rgba(4,6,8,.72); color: #ffffff; caret-color: var(--mf-accent); }
#direct-conversation-panel[data-message-frame] .direct-message-form textarea::placeholder { color: color-mix(in srgb, var(--mf-in-muted) 72%, #6d7784); opacity: 1; }
#direct-conversation-panel[data-message-frame] .direct-message-form textarea:focus { border-color: var(--mf-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mf-accent) 16%, transparent); }
#direct-conversation-panel[data-message-frame] .direct-message-form .post-tools button { border-color: var(--mf-control-border); background: var(--mf-control-bg); color: var(--mf-accent); }
#direct-conversation-panel[data-message-frame] .direct-message-form .post-tools button:hover { border-color: var(--mf-accent); color: #ffffff; }
#direct-conversation-panel[data-message-frame] .direct-send-button { border-color: var(--mf-own-border); background: var(--mf-own-bg); color: var(--mf-own-text); box-shadow: 0 0 8px color-mix(in srgb, var(--mf-own-border) 24%, transparent); }
#direct-conversation-panel[data-message-frame] .direct-reply-preview { border-color: var(--mf-control-border); background: var(--mf-control-bg); }
#direct-conversation-panel[data-message-frame] .direct-reply-preview > svg,
#direct-conversation-panel[data-message-frame] .direct-reply-preview strong { color: var(--mf-accent); }
#direct-conversation-panel[data-message-frame] .direct-reply-preview span { color: var(--mf-in-text); }
#direct-conversation-panel[data-message-frame] .direct-reply-preview button { color: var(--mf-danger); }
#direct-conversation-panel[data-message-frame] .direct-permission-note { border-color: var(--mf-control-border); background: var(--mf-control-bg); color: var(--mf-accent); }
#direct-conversation-panel[data-message-frame] .direct-permission-note svg { color: var(--mf-danger); }
#direct-conversation-panel[data-message-frame] .direct-quick-menu { border-color: var(--mf-control-border); background: color-mix(in srgb, var(--message-frame-surface) 91%, #090b0e); }
#direct-conversation-panel[data-message-frame] .direct-quick-menu button { border-color: color-mix(in srgb, var(--mf-control-border) 55%, transparent); color: var(--mf-in-text); }
#direct-conversation-panel[data-message-frame] .direct-quick-menu button svg { color: var(--mf-accent); }
#direct-conversation-panel[data-message-frame] .direct-quick-menu button.direct-menu-danger { color: var(--mf-danger); }

.direct-reaction-popover[data-message-frame] { border-color: var(--message-frame-primary); background: color-mix(in srgb, var(--message-frame-surface) 88%, #0c1015); box-shadow: 0 10px 30px rgba(0,0,0,.68), 0 0 9px color-mix(in srgb, var(--message-frame-primary) 30%, transparent); }
.direct-reaction-popover[data-message-frame] button { border-color: color-mix(in srgb, var(--message-frame-primary) 38%, transparent); background: rgba(255,255,255,.055); color: var(--message-frame-accent); }
.direct-reaction-popover[data-message-frame] button:hover,
.direct-reaction-popover[data-message-frame] button:focus-visible,
.direct-reaction-popover[data-message-frame] button.selected { border-color: var(--message-frame-accent); background: color-mix(in srgb, var(--message-frame-primary) 25%, #151922); color: #ffffff; }

/* Bong bóng nhóm: mỗi skin có cặp màu gửi/nhận và bảng màu chữ tương phản riêng. */
#group-chat-panel[data-bubble-skin] {
  --gb-in-bg: linear-gradient(145deg, #29313a, #171c22);
  --gb-in-border: #596879;
  --gb-in-text: #f4f7fb;
  --gb-in-muted: #b9c4cf;
  --gb-own-bg: linear-gradient(145deg, #31465a, #1b2c3b);
  --gb-own-border: #6386a6;
  --gb-own-text: #f7fbff;
  --gb-own-muted: #c0d4e4;
  --gb-accent: #8bcaff;
  --gb-danger: #ff8f9c;
  --gb-action-text: #eaf5ff;
  --gb-control-bg: #18212a;
  --gb-control-border: #52677b;
  --gb-text-shadow: 0 1px 1px rgba(0,0,0,.76);
}
#group-chat-panel[data-bubble-skin="rose"] {
  --gb-in-bg: linear-gradient(145deg, #8c2f60, #4c1938); --gb-in-border: #e88ab5; --gb-in-text: #fff7fb; --gb-in-muted: #ebbed2;
  --gb-own-bg: linear-gradient(145deg, #bd4079, #76254f); --gb-own-border: #ffafd0; --gb-own-text: #fff9fc; --gb-own-muted: #ffd1e2;
  --gb-accent: #ffd4e7; --gb-control-bg: #3a172b; --gb-control-border: #b64f7e;
}
#group-chat-panel[data-bubble-skin="ocean"] {
  --gb-in-bg: linear-gradient(145deg, #185382, #0c3155); --gb-in-border: #75d9ff; --gb-in-text: #f2fbff; --gb-in-muted: #bee4f3;
  --gb-own-bg: linear-gradient(145deg, #126f9d, #0e527f); --gb-own-border: #9ae9ff; --gb-own-text: #f7fdff; --gb-own-muted: #c8ecf7;
  --gb-accent: #a5eeff; --gb-control-bg: #102f45; --gb-control-border: #3e9bc0;
}
#group-chat-panel[data-bubble-skin="mint"] {
  --gb-in-bg: linear-gradient(145deg, #155f56, #0b3e3a); --gb-in-border: #79e3c8; --gb-in-text: #f2fff9; --gb-in-muted: #bce5da;
  --gb-own-bg: linear-gradient(145deg, #18816e, #0b5a51); --gb-own-border: #a0f0d8; --gb-own-text: #f5fffb; --gb-own-muted: #caeee4;
  --gb-accent: #b4f8e4; --gb-control-bg: #123c36; --gb-control-border: #45a992;
}
#group-chat-panel[data-bubble-skin="gold"] {
  --gb-in-bg: linear-gradient(145deg, #f5dc94, #c58a31); --gb-in-border: #fff0b6; --gb-in-text: #1d1508; --gb-in-muted: #4c3511;
  --gb-own-bg: linear-gradient(145deg, #e7b84c, #b66f1d); --gb-own-border: #ffe391; --gb-own-text: #1d1205; --gb-own-muted: #49300d;
  --gb-accent: #4b2804; --gb-danger: #7b1722; --gb-action-text: #211509; --gb-control-bg: rgba(255,247,218,.72); --gb-control-border: #83520f; --gb-text-shadow: 0 1px 0 rgba(255,255,255,.38);
}
#group-chat-panel[data-bubble-skin="violet"] {
  --gb-in-bg: linear-gradient(145deg, #51338e, #2d1d58); --gb-in-border: #c9a7ff; --gb-in-text: #fbf8ff; --gb-in-muted: #d7c6ee;
  --gb-own-bg: linear-gradient(145deg, #7651bd, #442979); --gb-own-border: #dec5ff; --gb-own-text: #fdfaff; --gb-own-muted: #e4d5f4;
  --gb-accent: #ead8ff; --gb-control-bg: #2d1b4a; --gb-control-border: #8058b8;
}
#group-chat-panel[data-bubble-skin="sunset"] {
  --gb-in-bg: linear-gradient(145deg, #913d55, #55243d); --gb-in-border: #ffab99; --gb-in-text: #fff8f5; --gb-in-muted: #efc6bd;
  --gb-own-bg: linear-gradient(145deg, #aa463f, #813247); --gb-own-border: #ffc0a5; --gb-own-text: #fff9f5; --gb-own-muted: #f4d1c6;
  --gb-accent: #ffd5b8; --gb-control-bg: #44202d; --gb-control-border: #ad5e63;
}
#group-chat-panel[data-bubble-skin="glass"] {
  --gb-in-bg: linear-gradient(145deg, rgba(33,65,94,.93), rgba(23,38,66,.94)); --gb-in-border: #9fdcff; --gb-in-text: #f7fbff; --gb-in-muted: #c5dbe9;
  --gb-own-bg: linear-gradient(145deg, rgba(48,98,139,.93), rgba(37,61,102,.94)); --gb-own-border: #c2e9ff; --gb-own-text: #fbfdff; --gb-own-muted: #d2e5f0;
  --gb-accent: #d9f2ff; --gb-control-bg: rgba(19,37,57,.9); --gb-control-border: #6fa8cb;
}
#group-chat-panel[data-bubble-skin="pearl"] {
  --gb-in-bg: linear-gradient(145deg, #fff9ef, #dad8e0); --gb-in-border: #ffffff; --gb-in-text: #24212a; --gb-in-muted: #514b59;
  --gb-own-bg: linear-gradient(145deg, #efe7dc, #c6c8d3); --gb-own-border: #fffaf0; --gb-own-text: #211f27; --gb-own-muted: #4c4a54;
  --gb-accent: #44345e; --gb-danger: #9c2037; --gb-action-text: #292630; --gb-control-bg: rgba(255,255,255,.7); --gb-control-border: #7b7484; --gb-text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
#group-chat-panel[data-bubble-skin="sakura"] {
  --gb-in-bg: linear-gradient(145deg, #f7b4cc, #d4779f); --gb-in-border: #ffe5ef; --gb-in-text: #28111d; --gb-in-muted: #593044;
  --gb-own-bg: linear-gradient(145deg, #e88cae, #cf7298); --gb-own-border: #ffd9e7; --gb-own-text: #250f1a; --gb-own-muted: #52273c;
  --gb-accent: #642246; --gb-danger: #86182f; --gb-action-text: #2a1020; --gb-control-bg: rgba(255,231,241,.7); --gb-control-border: #914766; --gb-text-shadow: 0 1px 0 rgba(255,255,255,.36);
}
#group-chat-panel[data-bubble-skin="forest"] {
  --gb-in-bg: linear-gradient(145deg, #286d4a, #123e30); --gb-in-border: #8cdbab; --gb-in-text: #f3fff7; --gb-in-muted: #bce0c9;
  --gb-own-bg: linear-gradient(145deg, #2d774f, #18523b); --gb-own-border: #b0edc4; --gb-own-text: #f6fff9; --gb-own-muted: #cbe8d4;
  --gb-accent: #c6f4d5; --gb-control-bg: #173e2d; --gb-control-border: #579b72;
}
#group-chat-panel[data-bubble-skin="sky"] {
  --gb-in-bg: linear-gradient(145deg, #a9dcf3, #70afd3); --gb-in-border: #e5f8ff; --gb-in-text: #092238; --gb-in-muted: #244b66;
  --gb-own-bg: linear-gradient(145deg, #83c8e9, #4e96c3); --gb-own-border: #d8f3ff; --gb-own-text: #071f34; --gb-own-muted: #1c435f;
  --gb-accent: #123f68; --gb-danger: #8c1830; --gb-action-text: #09243b; --gb-control-bg: rgba(225,247,255,.7); --gb-control-border: #326d91; --gb-text-shadow: 0 1px 0 rgba(255,255,255,.42);
}
#group-chat-panel[data-bubble-skin="coffee"] {
  --gb-in-bg: linear-gradient(145deg, #7d4d34, #4a2b21); --gb-in-border: #ddb184; --gb-in-text: #fff8ef; --gb-in-muted: #e4c7ac;
  --gb-own-bg: linear-gradient(145deg, #9c643e, #613727); --gb-own-border: #f1c79c; --gb-own-text: #fffaf3; --gb-own-muted: #edd2ba;
  --gb-accent: #ffe0ba; --gb-control-bg: #40271e; --gb-control-border: #9f704b;
}
#group-chat-panel[data-bubble-skin="ruby"] {
  --gb-in-bg: linear-gradient(145deg, #9e2944, #56152d); --gb-in-border: #ef8294; --gb-in-text: #fff7f8; --gb-in-muted: #edbdc4;
  --gb-own-bg: linear-gradient(145deg, #c43854, #721d39); --gb-own-border: #ffabb7; --gb-own-text: #fff9fa; --gb-own-muted: #f5ccd1;
  --gb-accent: #ffd3d8; --gb-control-bg: #3f1425; --gb-control-border: #9d3c55;
}
#group-chat-panel[data-bubble-skin="neon"] {
  --gb-in-bg: linear-gradient(145deg, #452080, #163b78); --gb-in-border: #5ef5ff; --gb-in-text: #f8fbff; --gb-in-muted: #cbd9ec;
  --gb-own-bg: linear-gradient(145deg, #6827ad, #174d91); --gb-own-border: #8cffff; --gb-own-text: #fbfdff; --gb-own-muted: #d8e3f1;
  --gb-accent: #9dffff; --gb-control-bg: #241c55; --gb-control-border: #52bcd7;
}
#group-chat-panel[data-bubble-skin="snow"] {
  --gb-in-bg: linear-gradient(145deg, #d7edf5, #9fbed2); --gb-in-border: #f5fdff; --gb-in-text: #102838; --gb-in-muted: #385566;
  --gb-own-bg: linear-gradient(145deg, #b7dce9, #789ebc); --gb-own-border: #e9faff; --gb-own-text: #0b2436; --gb-own-muted: #2c4c61;
  --gb-accent: #164f76; --gb-danger: #8e1d36; --gb-action-text: #102d41; --gb-control-bg: rgba(239,251,255,.72); --gb-control-border: #4d7894; --gb-text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
#group-chat-panel[data-custom-bubble-tone="dark"] {
  --gb-in-text: #ffffff; --gb-in-muted: #d5dde7; --gb-own-text: #ffffff; --gb-own-muted: #d5dde7; --gb-accent: #bce5ff; --gb-action-text: #ffffff; --gb-danger: #ffabb5; --gb-text-shadow: 0 1px 2px #000, 0 0 3px rgba(0,0,0,.82);
}
#group-chat-panel[data-custom-bubble-tone="light"] {
  --gb-in-text: #10151b; --gb-in-muted: #34414d; --gb-own-text: #10151b; --gb-own-muted: #34414d; --gb-accent: #123f70; --gb-action-text: #14202a; --gb-danger: #941b34; --gb-text-shadow: 0 1px 1px rgba(255,255,255,.72);
}

#group-chat-panel[data-bubble-skin] .group-message:not(.own) .group-message-bubble { border-color: var(--gb-in-border); background: var(--gb-in-bg); color: var(--gb-in-text) !important; box-shadow: inset 0 0 10px color-mix(in srgb,var(--gb-in-border) 9%,transparent),0 7px 18px rgba(0,0,0,.26); }
#group-chat-panel[data-bubble-skin] .group-message.own .group-message-bubble { border-color: var(--gb-own-border); background: var(--gb-own-bg); color: var(--gb-own-text) !important; box-shadow: inset 0 0 10px color-mix(in srgb,var(--gb-own-border) 9%,transparent),0 7px 18px rgba(0,0,0,.26); }
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-message-text { background: transparent !important; color: inherit !important; text-shadow: var(--gb-text-shadow) !important; }
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-message-text *:not(.bbcode-rainbow):not(.bbcode-nick) { color: inherit !important; text-shadow: inherit !important; }
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-message-text .bbcode-background { background: rgba(0,0,0,.2) !important; color: inherit !important; }
#group-chat-panel[data-bubble-skin][data-custom-bubble-tone="light"] .group-message-bubble .direct-message-text .bbcode-background,
#group-chat-panel[data-bubble-skin="gold"] .group-message-bubble .direct-message-text .bbcode-background,
#group-chat-panel[data-bubble-skin="pearl"] .group-message-bubble .direct-message-text .bbcode-background,
#group-chat-panel[data-bubble-skin="sakura"] .group-message-bubble .direct-message-text .bbcode-background,
#group-chat-panel[data-bubble-skin="sky"] .group-message-bubble .direct-message-text .bbcode-background,
#group-chat-panel[data-bubble-skin="snow"] .group-message-bubble .direct-message-text .bbcode-background { background: rgba(255,255,255,.28) !important; }
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-message-text a,
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-message-text .bbcode-nick { color: var(--gb-accent) !important; }
#direct-conversation-panel[data-message-frame] .direct-message-text .user-mention,
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-message-text .user-mention { color: #ffd84d !important; font-weight: 900 !important; text-shadow: 0 1px 0 rgba(0,0,0,.62), 0 0 8px rgba(255,216,77,.3) !important; }
#group-chat-panel[data-bubble-skin] .group-message:not(.own) .group-message-bubble time,
#group-chat-panel[data-bubble-skin] .group-message:not(.own) .direct-message-time-only { color: var(--gb-in-muted) !important; }
#group-chat-panel[data-bubble-skin] .group-message.own .group-message-bubble time,
#group-chat-panel[data-bubble-skin] .group-message.own .direct-message-time-only { color: var(--gb-own-muted) !important; }
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-message-mood,
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-reply-quote strong { color: var(--gb-accent) !important; }
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-message-recalled,
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-reply-quote span { color: inherit !important; opacity: .86; }
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-reply-quote { border-left-color: var(--gb-accent); background: rgba(0,0,0,.22); }
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-message-footer,
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-message-state { color: inherit !important; }
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-message-state > button { color: var(--gb-danger) !important; font-weight: 800; text-shadow: none; }
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-message-actions > button { border-color: var(--gb-control-border); background: var(--gb-control-bg); color: var(--gb-action-text); }
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-message-actions > button:hover { border-color: var(--gb-accent); color: var(--gb-accent); }
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-reaction-total { border-color: var(--gb-control-border); background: var(--gb-control-bg); color: var(--gb-action-text); }
#group-chat-panel[data-bubble-skin] .group-message-bubble .direct-reaction-total > b { color: var(--gb-action-text); }
#group-chat-panel[data-bubble-skin] .group-message-bubble .post-audio { border-color: var(--gb-control-border); background: rgba(0,0,0,.22); color: inherit; }
#group-chat-panel[data-bubble-skin] .group-message-bubble .post-audio > svg { color: var(--gb-accent); }
#group-chat-panel[data-bubble-skin] .group-message-bubble .post-audio strong { color: inherit; }
#group-chat-panel[data-bubble-skin] .group-message-bubble .post-audio audio { color-scheme: dark; accent-color: var(--gb-accent); }
#group-chat-panel[data-bubble-skin] .group-message.is-pinned .group-message-bubble { border-color: var(--gb-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--gb-accent) 22%,transparent),0 0 11px color-mix(in srgb,var(--gb-accent) 22%,transparent); }

.direct-reaction-popover[data-group-bubble-skin] { border-color: var(--gb-control-border); background: var(--gb-control-bg); color: var(--gb-action-text); }
.direct-reaction-popover[data-group-bubble-skin] button { border-color: color-mix(in srgb,var(--gb-control-border) 60%,transparent); background: rgba(0,0,0,.16); color: var(--gb-action-text); }
.direct-reaction-popover[data-group-bubble-skin] button:hover,
.direct-reaction-popover[data-group-bubble-skin] button:focus-visible,
.direct-reaction-popover[data-group-bubble-skin] button.selected { border-color: var(--gb-accent); background: color-mix(in srgb,var(--gb-control-bg) 72%,#ffffff); color: var(--gb-accent); }
button:focus-visible {
  outline: 2px solid rgba(87, 166, 255, .72);
  outline-offset: 2px;
}

/* Use one closing rule per large block instead of paired top/bottom rules. */
.panel {
  border-top: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
.view > .panel:last-child {
  border-bottom: 0 !important;
}
.view[data-page="messages"] > .direct-inbox-panel {
  border-bottom: 0 !important;
}
.feed-card { border-top: 0 !important; }

/* Community shortcuts and Drama rooms. */
.room-card-special {
  position: relative;
  overflow: hidden;
}
.room-card-special::after {
  content: "";
  position: absolute;
  inset: auto -22px -34px auto;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(86, 159, 255, .16), transparent 67%);
  pointer-events: none;
}
.room-tab-special b { display: inline-flex; align-items: center; justify-content: center; }
.room-tab-special svg { width: 14px; height: 14px; }

.drama-list-panel,
.drama-room-panel {
  overflow: hidden;
}
.view[data-page="drama"].active > .drama-list-panel {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  margin-bottom: 0;
}
.drama-list-panel[hidden],
.drama-room-panel[hidden] {
  display: none !important;
}
.drama-list-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.drama-list-actions .refresh-action {
  min-height: 30px;
  padding: 0 9px;
  border-color: #7e4052;
  background: #5d2434;
  color: #fff0f4;
}
.drama-list-actions .refresh-action svg { width: 13px; height: 13px; }
.drama-create-card {
  width: min(100%, 480px);
  padding-bottom: 1px;
  overflow: hidden;
}
.drama-create-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  align-items: end;
  padding: 14px 14px 5px;
}
.drama-create-grid label {
  display: grid;
  gap: 6px;
  color: #929dad;
  font-size: 11px;
  font-weight: 700;
}
.drama-create-grid label.wide { grid-column: span 2; }
.drama-create-grid input {
  width: 100%;
  min-height: 39px;
  padding: 0 11px;
  border: 1px solid #343d4b;
  border-radius: 8px;
  outline: 0;
  background: #0d1117;
  color: #e8edf4;
  font: inherit;
}
.drama-create-grid input:focus {
  border-color: #6b83a5;
  box-shadow: 0 0 0 3px rgba(91, 136, 197, .12);
}
.drama-room-list {
  display: grid;
  flex: 1 1 auto;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 15px 14px;
}
.drama-room-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 76px;
  padding: 11px 13px;
  border: 1px solid #313947;
  border-radius: 10px;
  background: linear-gradient(100deg, rgba(33, 42, 56, .92), rgba(20, 25, 34, .92));
  color: inherit;
  text-decoration: none;
}
.drama-room-card:hover {
  border-color: #7c4c61;
  background: linear-gradient(100deg, rgba(43, 50, 66, .96), rgba(32, 25, 34, .96));
  transform: translateY(-1px);
}
.drama-room-id {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  border: 1px solid #7b4151;
  border-radius: 50%;
  background: #351c25;
  color: #ff9bb5;
  font-size: 11px;
  font-weight: 900;
}
.drama-room-card > div { min-width: 0; }
.drama-room-card > div > strong {
  display: block;
  overflow: hidden;
  color: #edf1f6;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drama-room-card > div > span {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  color: #9fa9b6;
  font-size: 11px;
}
.drama-room-card > div > span b { color: #cbd3dd; }
.drama-room-card > div > span i { color: #e96889; font-size: 9px; font-style: normal; font-weight: 900; }
.drama-room-card small {
  display: block;
  margin-top: 4px;
  color: #727d8c;
  font-size: 10px;
}
.drama-room-card > em {
  color: #7f8b9a;
  font-size: 10px;
  font-style: normal;
  line-height: 1.55;
  text-align: right;
}
.drama-room-card > em span { color: #d6dee8; font-weight: 800; }

.drama-room-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px 13px;
  border-bottom: 1px solid #303846;
  background: #151a22;
}
.drama-room-head > button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #384150;
  border-radius: 9px;
  background: #202630;
  color: #cbd3de;
  cursor: pointer;
}
.drama-room-head svg { width: 17px; height: 17px; }
.drama-room-head > div { min-width: 0; }
.drama-room-head strong {
  display: block;
  overflow: hidden;
  color: #f0f3f8;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drama-room-head span {
  display: block;
  margin-top: 3px;
  color: #7f8997;
  font-size: 10px;
}
.drama-wallet {
  padding: 6px 9px;
  border: 1px solid #705d24;
  border-radius: 999px;
  background: #2c2615;
  color: #f2cd63;
  font-size: 11px;
}
.drama-room-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.drama-room-actions > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid #465160;
  border-radius: 7px;
  background: #242c36;
  color: #cbd3dd;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}
.drama-room-actions > button svg { width: 12px; height: 12px; }
.drama-room-actions > button[hidden] { display: none !important; }
.drama-room-actions > button.danger {
  border-color: #743b46;
  background: #351a21;
  color: #ff8b9c;
}
.drama-room-actions > button.danger:hover { background: #48212b; color: #ffb2bd; }
.drama-arena {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  min-height: 310px;
  border-bottom: 1px solid #313947;
  background: #0c1016;
}
.drama-side {
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}
.drama-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}
.drama-side::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .45;
  background:
    linear-gradient(115deg, transparent 48%, rgba(255,255,255,.035) 49%, transparent 50%) 0 0 / 36px 36px,
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.08), transparent 54%);
}
.drama-side-left::before { background: linear-gradient(180deg, #172b44, #111b29 55%, #0d141e); }
.drama-side-right::before { background: linear-gradient(180deg, #40212b, #28151c 55%, #1d1015); }
.drama-side > header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-height: 52px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(7px);
}
.drama-side > header strong {
  overflow: hidden;
  color: #f3f6fa;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drama-side > header button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 29px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  background: rgba(6,10,15,.38);
  color: #e5eaf1;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}
.drama-side > header button.joined {
  border-color: #9a5060;
  background: rgba(91, 35, 49, .48);
  color: #ffb3c0;
}
.drama-side > header svg { width: 12px; height: 12px; }
.drama-side-reactions {
  position: absolute;
  z-index: 20;
  top: 62px;
  display: flex;
  gap: 5px;
}
.drama-side-left .drama-side-reactions { left: 9px; }
.drama-side-right .drama-side-reactions { right: 9px; }
.drama-side-reactions button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 50px;
  height: 31px;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(4,7,11,.58);
  color: #e4e9f0;
  cursor: pointer;
  backdrop-filter: blur(5px);
}
.drama-side-reactions button span { font-size: 15px; }
.drama-side-reactions button b { font-size: 9px; }
.drama-side-reactions button:disabled {
  cursor: not-allowed;
  filter: grayscale(.78);
  opacity: .34;
}
.drama-side-event {
  position: absolute;
  z-index: 21;
  top: 105px;
  left: 8%;
  right: 8%;
  display: grid;
  gap: 4px;
  pointer-events: none;
}
.drama-throw-notice {
  justify-self: center;
  max-width: 100%;
  padding: 5px 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 209, 162, .22);
  border-radius: 999px;
  background: rgba(17, 13, 11, .68);
  color: #ffd1a2;
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  animation: drama-notice-fade 2.7s ease-out both;
}
.drama-versus {
  position: relative;
  z-index: 10;
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, #172333, #241a22);
}
.drama-versus::before,
.drama-versus::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: calc(50% - 34px);
  background: linear-gradient(transparent, #825268);
}
.drama-versus::before { top: 0; }
.drama-versus::after { bottom: 0; transform: rotate(180deg); }
.drama-versus span {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 2px solid #99576d;
  border-radius: 50%;
  background: #21171d;
  color: #ffacc2;
  box-shadow: 0 0 20px rgba(202, 79, 116, .28);
  font-size: 11px;
  font-weight: 950;
}
.drama-member-stage {
  position: relative;
  z-index: 7;
  display: block;
  min-height: 310px;
  padding: 0;
}
.drama-member {
  position: absolute;
  z-index: var(--member-z);
  left: clamp(58px, var(--member-x), calc(100% - 58px));
  top: var(--member-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 150px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e8edf4;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.drama-member:hover,
.drama-member:focus-visible { z-index: 120; }
.drama-member > strong {
  order: 1;
  display: block;
  width: max-content;
  max-width: 150px;
  padding: 2px 4px;
  overflow: visible;
  border-radius: 5px;
  background: rgba(8, 11, 16, .78);
  font-size: var(--nick-size, 10px);
  line-height: 1.2;
  text-align: center;
  overflow-wrap: normal;
  white-space: nowrap;
  text-shadow: 0 1px 4px #000;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .28);
}
.drama-member > .drama-avatar {
  order: 2;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border: 2px solid rgba(255,255,255,.65);
  box-shadow: 0 5px 12px rgba(0,0,0,.45);
  transform: rotate(var(--member-tilt)) scale(var(--avatar-scale));
}
.drama-member .user-nick {
  display: inline-flex;
  max-width: 142px;
  justify-content: center;
  overflow: visible !important;
  white-space: nowrap !important;
}
.drama-member .user-nick > .user-nick-text {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap !important;
  overflow-wrap: normal;
}
.drama-speech {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 15px);
  left: 50%;
  width: max-content;
  max-width: 145px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 10px 10px 10px 2px;
  background: rgba(244,248,252,.94);
  color: #1b2028;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
  text-shadow: 7px -9px 0 rgba(255,255,255,.08), 13px -17px 0 rgba(255,255,255,.035);
  transform: translateX(-50%);
}
.drama-speech.is-new { animation: drama-speech-in .28s ease-out; }
.drama-speech::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 13px;
  border: 5px solid transparent;
  border-top-color: rgba(244,248,252,.94);
  border-left: 0;
}
.drama-speech.is-voice {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: rgba(173, 115, 211, .58);
  background: rgba(249, 241, 255, .96);
  color: #5a286d;
  box-shadow: 0 0 0 5px rgba(188, 117, 221, .08), 0 6px 20px rgba(38, 16, 49, .28);
}
.drama-speech.is-voice > svg { width: 13px; height: 13px; }
.drama-speech.is-voice > span { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.drama-speech.is-voice > span b {
  display: block;
  width: 2px;
  height: 5px;
  border-radius: 3px;
  background: currentColor;
  animation: drama-voice-wave .72s ease-in-out infinite alternate;
}
.drama-speech.is-voice > span b:nth-child(2) { height: 12px; animation-delay: -.42s; }
.drama-speech.is-voice > span b:nth-child(3) { height: 8px; animation-delay: -.2s; }
.drama-speech.is-voice > em { font-size: 9px; font-style: normal; font-weight: 900; }
.drama-empty-side {
  position: absolute;
  left: 50%;
  bottom: 36px;
  color: rgba(220,229,239,.55);
  font-size: 10px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.drama-effect-layer,
.drama-particle-layer {
  position: absolute;
  z-index: 12;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.drama-particle-layer { z-index: 13; }
.drama-effect {
  position: absolute;
  left: var(--effect-x);
  top: var(--effect-y);
  display: block;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.drama-effect > b {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.5));
}
.drama-effect.is-flying { animation: drama-item-fly .42s cubic-bezier(.2,.75,.35,1); }
.drama-side-left .drama-effect.is-flying { animation-name: drama-item-fly-from-right; }
.drama-effect.is-settled > b { transform: rotate(var(--settle-angle, -7deg)); }
.drama-explosion {
  position: absolute;
  z-index: 4;
  inset: -20px;
  font-size: 50px;
  font-style: normal;
  opacity: 0;
}
.drama-smoke {
  position: absolute;
  z-index: 1;
  bottom: 13px;
  left: -5px;
  color: #9ba1a9;
  font-size: 34px;
  font-style: normal;
  opacity: 0;
}
.drama-dirt {
  position: absolute;
  z-index: 0;
  inset: -15px;
  display: grid;
  place-items: center;
  color: rgba(61,42,26,.75);
  font-size: 58px;
  font-style: normal;
  opacity: 0;
}
.drama-effect-explosion.is-impact > b,
.drama-effect-explosion.is-settled > b { opacity: 0; }
.drama-effect-explosion.is-impact .drama-explosion { animation: drama-explode .9s ease-out both; }
.drama-effect-explosion.is-impact .drama-smoke { animation: drama-smoke 1.8s .15s ease-out both; }
.drama-effect-explosion.is-impact .drama-dirt { animation: drama-dirt-after .9s ease-out both; }
.drama-effect-explosion.is-settled .drama-dirt { opacity: .82; }
.drama-effect-explosion.is-settled .drama-explosion,
.drama-effect-explosion.is-settled .drama-smoke { display: none; }
.drama-smell {
  position: absolute;
  z-index: 1;
  bottom: 22px;
  left: -10px;
  width: 52px;
  height: 90px;
  font-style: normal;
}
.drama-smell span {
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, rgba(201, 222, 170, .72), rgba(94, 119, 73, .28) 64%, transparent 70%);
  filter: blur(.5px);
  opacity: 0;
  animation: drama-smell-smoke 3s ease-out infinite;
}
.drama-smell span:nth-child(1) { left: 4px; animation-delay: 0s; }
.drama-smell span:nth-child(2) { left: 20px; animation-delay: .85s; }
.drama-smell span:nth-child(3) { left: 11px; animation-delay: 1.7s; }
.drama-effect-smell.is-flying .drama-smell,
.drama-effect-smell.is-impact .drama-smell { opacity: 0; }
.drama-effect-smell.is-settled .drama-smell { opacity: 1; }
.drama-particle-layer > span {
  position: absolute;
  left: var(--particle-x);
  bottom: -20px;
  font-size: 20px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
  animation: drama-particle-up 2.2s var(--particle-delay) ease-out both;
}

.drama-item-shop {
  padding: 13px 14px;
  border-bottom: 1px solid #313947;
  background: #131820;
}
.drama-item-shop > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.drama-item-shop header strong { display: block; color: #e7ecf3; font-size: 13px; }
#drama-item-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
#drama-item-list button {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 7px;
  align-items: center;
  min-height: 50px;
  padding: 7px 8px;
  border: 1px solid #37404d;
  border-radius: 8px;
  background: #1b212b;
  color: #e1e6ed;
  cursor: pointer;
  text-align: left;
}
#drama-item-list button:disabled { cursor: not-allowed; filter: grayscale(.6); opacity: .45; }
#drama-item-list button > span { grid-row: span 2; font-size: 23px; }
#drama-item-list button strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#drama-item-list button em { color: #e6bd52; font-size: 9px; font-style: normal; font-weight: 800; }
#drama-item-list button > i {
  position: absolute;
  top: -6px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border: 2px solid #131820;
  border-radius: 999px;
  background: #d9526d;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}
.drama-message-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #303846;
  background: #11161d;
}
.drama-message-input { position: relative; order: 1; min-width: 0; }
.drama-message-form textarea {
  width: 100%;
  min-height: 46px;
  max-height: 140px;
  padding: 10px 11px;
  resize: vertical;
  border: 1px solid #343d4b;
  border-radius: 9px;
  outline: 0;
  background: #0b0f15;
  color: #e4e9ef;
  font: inherit;
  font-size: 12px;
}
.drama-message-form textarea:focus { border-color: #6d4f77; box-shadow: 0 0 0 3px rgba(128, 76, 139, .12); }
.drama-message-form button {
  order: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  align-self: stretch;
  min-width: 42px;
  border: 1px solid #7e4052;
  border-radius: 9px;
  background: #69283a;
  color: #fff;
  cursor: pointer;
}
.drama-message-form button:disabled { cursor: not-allowed; opacity: .48; }
.drama-message-form .composer-send-status { grid-column: 1 / -1; order: 4; margin-top: -3px; }
.drama-message-form .drama-voice-button {
  order: 2;
  min-width: 112px;
  border-color: #545070;
  background: #28243a;
  color: #d8c8f0;
  font-size: 10px;
  font-weight: 850;
}
.drama-message-form .drama-voice-button[hidden] { display: none !important; }
.drama-message-form .drama-voice-button.recording {
  border-color: #b44c5f;
  background: #4c1c28;
  color: #ffbcc6;
  box-shadow: 0 0 0 3px rgba(218, 70, 94, .12);
}
.drama-message-form .drama-voice-button.recording svg { animation: drama-recording-pulse .8s ease-in-out infinite alternate; }
.drama-message-form .drama-voice-button.sending svg { animation: spin 1s linear infinite; }
.drama-message-form svg { width: 17px; height: 17px; }
.drama-message-list { background: #10151c; }
.drama-message {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid #252c36;
}
.drama-message > button,
.drama-message header button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.drama-message .drama-avatar { width: 40px; height: 40px; }
.drama-message > div { min-width: 0; }
.drama-message header {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.drama-message header button {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drama-message header em {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 4px;
  background: #253245;
  color: #9fc6f7;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}
.drama-message-right header em { background: #432530; color: #f1a2b7; }
.drama-message-viewer header em { background: #30343b; color: #c3c9d1; }
.drama-message header time { margin-left: auto; color: #687382; font-size: 9px; white-space: nowrap; }
.drama-message p {
  margin: 4px 0 0;
  color: #cbd3dd;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.drama-voice-message {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 390px;
  margin-top: 7px;
  padding: 6px 8px;
  border: 1px solid #393348;
  border-radius: 10px;
  background: #191724;
}
.drama-voice-message > svg { flex: 0 0 auto; width: 17px; height: 17px; color: #bc8bdd; }
.drama-voice-message audio { min-width: 0; width: 100%; height: 32px; }
.drama-voice-message > span { flex: 0 0 auto; color: #d8b35d; font-size: 8px; font-weight: 850; }

@keyframes drama-speech-in {
  from { opacity: 0; transform: translate(-50%, 7px) scale(.9); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes drama-voice-wave {
  from { transform: scaleY(.55); opacity: .6; }
  to { transform: scaleY(1.25); opacity: 1; }
}
@keyframes drama-recording-pulse {
  from { transform: scale(.82); opacity: .62; }
  to { transform: scale(1.08); opacity: 1; }
}
@keyframes drama-notice-fade {
  0% { opacity: 0; transform: translateY(10px) scale(.94); }
  14%, 66% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-16px) scale(.97); }
}
@keyframes drama-item-fly {
  0% { opacity: 0; transform: translate(-340px, -220px) rotate(-450deg) scale(.65); }
  70% { opacity: 1; transform: translate(-45%, -80%) rotate(24deg) scale(1.3); }
  100% { transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
}
@keyframes drama-item-fly-from-right {
  0% { opacity: 0; transform: translate(340px, -220px) rotate(450deg) scale(.65); }
  70% { opacity: 1; transform: translate(-55%, -80%) rotate(-24deg) scale(1.3); }
  100% { transform: translate(-50%, -50%) rotate(7deg) scale(1); }
}
@keyframes drama-explode {
  0% { opacity: 0; transform: scale(.1); }
  22% { opacity: 1; transform: scale(1.25); filter: brightness(1.6); }
  100% { opacity: 0; transform: scale(1.8); }
}
@keyframes drama-smoke {
  0% { opacity: .08; transform: translateY(5px) scale(.75); }
  50% { opacity: .4; }
  100% { opacity: 0; transform: translateY(-52px) scale(1.55); }
}
@keyframes drama-dirt-after {
  0%, 58% { opacity: 0; transform: scale(.7); }
  100% { opacity: .82; transform: scale(1); }
}
@keyframes drama-smell-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  18% { opacity: .62; }
  60% { opacity: .36; transform: translate(8px, -48px) scale(1.35); }
  100% { opacity: 0; transform: translate(-7px, -88px) scale(1.8); }
}
@keyframes drama-particle-up {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--particle-drift), -330px) scale(1.3) rotate(20deg); }
}

@media (max-width: 700px) {
  .drama-create-grid { grid-template-columns: 1fr 1fr; }
  .drama-arena { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); }
  .drama-versus span { width: 29px; height: 29px; font-size: 9px; }
  .drama-side > header { display: flex; align-items: center; min-height: 52px; padding: 7px; }
  .drama-side > header strong { min-width: 0; font-size: 10px; }
  .drama-side > header button { width: auto; min-height: 27px; justify-content: center; padding-inline: 5px; font-size: 8px; white-space: nowrap; }
  .drama-side-reactions { top: 60px; gap: 3px; }
  .drama-side-reactions button { min-width: 41px; padding: 0 5px; }
  .drama-side-event { top: 99px; }
  .drama-member-stage { min-height: 300px; padding: 0; }
  .drama-member {
    left: clamp(34px, var(--member-mobile-x), calc(100% - 34px));
    top: var(--member-mobile-y);
    max-width: 140px;
  }
  .drama-member > .drama-avatar { width: var(--avatar-mobile-size); height: var(--avatar-mobile-size); }
  .drama-member > strong,
  .drama-member .user-nick { max-width: 132px; }
  .drama-member > strong { font-size: var(--nick-mobile-size, 8px); }
  .drama-speech { max-width: 100px; padding: 5px 6px; font-size: 8px; }
  #drama-item-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drama-room-actions { display: grid; justify-items: end; }
  .drama-room-actions > button { min-height: 27px; padding-inline: 6px; font-size: 8px; }
  .drama-message-form { grid-template-columns: 1fr 1fr; }
  .drama-message-input { grid-column: 1 / -1; }
  .drama-message-form button { min-height: 39px; }
  .drama-message-form .drama-voice-button { min-width: 0; }
  .drama-voice-message { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .drama-effect,
  .drama-explosion,
  .drama-smoke,
  .drama-smell span,
  .drama-particle-layer > span,
  .drama-speech,
  .drama-speech.is-voice > span b,
  .drama-message-form .drama-voice-button svg { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Bữa tiệc */
.party-list-panel, .party-room-panel { overflow: hidden; }
.party-list-panel[hidden], .party-room-panel[hidden] { display: none !important; }
.party-list-actions, .party-room-actions, .party-mic-column > header, .party-now-playing, .party-playback-controls { display: flex; align-items: center; gap: 8px; }
.party-list-actions small { color: #8f9baa; font-size: 11px; }
.party-room-list { display: grid; gap: 9px; padding: 12px; background: linear-gradient(160deg, #0d1015, #07090c); }
.party-list-panel.room-list-loading .party-list-actions button { pointer-events: none; opacity: .62; }
.party-list-actions #party-room-count, .party-list-actions #anonymous-room-count, .drama-list-actions #drama-room-count { min-width: 48px; }
.party-list-actions #party-room-count .skeleton-line, .party-list-actions #anonymous-room-count .skeleton-line, .drama-list-actions #drama-room-count .skeleton-line { width: 48px; height: 9px; }
.party-room-list > .skeleton-party-room,
.anonymous-room-list > .skeleton-party-room,
.drama-room-list > .skeleton-drama-room,
.caro-room-list > .skeleton-game-room,
.race-room-list > .skeleton-game-room,
.tarot-room-list > .skeleton-tarot-room { width: 100%; }
.party-room-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #29313b; border-radius: 12px; background: linear-gradient(145deg, #171c23, #0f1318); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.party-room-symbol { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #754f93; border-radius: 13px; background: radial-gradient(circle at 30% 20%, #6f3a8e, #271a3b 70%); color: #f2caff; }
.party-room-symbol svg { width: 21px; height: 21px; }
.party-room-copy { min-width: 0; display: grid; gap: 3px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.party-room-copy strong { overflow: hidden; color: #f0f3f8; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.party-room-copy span { color: #b9a4ca; font-size: 12px; }
.party-room-copy small { color: #778493; font-size: 10px; }
.party-room-enter { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 12px; border: 1px solid #6e4294; border-radius: 9px; background: #3d2357; color: #f4d9ff; cursor: pointer; font-size: 11px; font-weight: 800; white-space: nowrap; }
.party-room-enter svg { width: 14px; height: 14px; }
.party-room-enter:disabled { cursor: not-allowed; opacity: .5; }
.party-my-room-row { border-color: #7354af; background: radial-gradient(circle at 8% 50%, rgba(125, 80, 191, .22), transparent 42%), linear-gradient(145deg, #1a1828, #10131a); box-shadow: inset 3px 0 0 #a47af0, 0 8px 22px rgba(0,0,0,.22); }
.party-my-room-row:hover { border-color: #a17ce0; }
.party-my-room-row .party-room-symbol { border-color: #9870d3; background: radial-gradient(circle at 30% 20%, #8051ac, #34204a 70%); color: #ffe37a; }
.party-my-room-row .party-room-copy strong { color: #eadcff; }
.party-my-room-row .party-room-enter { border-color: #8060b5; background: #523477; color: #f4eaff; }
.party-room-row.party-room-theme-pink { border-color: #b74f80; background: radial-gradient(circle at 8% 50%, rgba(255, 105, 170, .24), transparent 42%), linear-gradient(145deg, #281520, #151119); box-shadow: inset 3px 0 0 #ff79b3, 0 8px 22px rgba(47, 10, 29, .28); }
.party-room-row.party-room-theme-pink .party-room-symbol { border-color: #d26199; background: radial-gradient(circle at 30% 20%, #db6ca3, #5a2340 72%); color: #fff0f7; }
.party-room-row.party-room-theme-pink .party-room-copy strong { color: #ffd9eb; }
.party-room-row.party-room-theme-pink .party-room-copy span { color: #dc9fbd; }
.party-room-row.party-room-theme-pink .party-room-enter { border-color: #c45c91; background: #7b3156; color: #fff1f8; }
.party-public-rooms-empty { min-height: 72px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 14px; border: 1px dashed #303946; border-radius: 11px; background: #0a0e13; color: #7f8b98; font-size: 11px; text-align: center; }
.party-public-rooms-empty svg { width: 17px; color: #7f6a9c; }

.anonymous-list-panel, .anonymous-room-panel { border-color: #34444a; background: #080c0e; }
.anonymous-intro { display: flex; align-items: center; gap: 10px; margin: 10px 12px 0; padding: 11px; border: 1px solid #2c5152; border-radius: 11px; background: linear-gradient(135deg, rgba(21,89,87,.26), rgba(17,25,31,.9)); }
.anonymous-intro > svg { flex: 0 0 28px; width: 28px; height: 28px; color: #73d4c9; }
.anonymous-intro > div { min-width: 0; display: grid; gap: 3px; }
.anonymous-intro strong { color: #d7f7f1; font-size: 13px; }
.anonymous-intro span { color: #8da8a8; font-size: 10px; line-height: 1.45; }
.anonymous-room-row { border-color: #2e4448; background: linear-gradient(145deg, #122024, #0b1114); }
.anonymous-room-row .party-room-symbol { border-color: #36756f; background: radial-gradient(circle at 30% 20%, #277a72, #12332f 70%); color: #c7fff7; }
.anonymous-room-row .party-room-copy span { display: inline-flex; align-items: center; gap: 4px; color: #83aaa7; }
.anonymous-room-row .party-room-copy span svg { width: 12px; height: 12px; }
.anonymous-room-row .party-room-enter { border-color: #34736d; background: #194d48; color: #cffff8; }
.anonymous-room-head { border-color: #294345; background: linear-gradient(135deg, #102b2b, #10171b); }
.anonymous-room-head .party-room-heading strong { max-width: 100%; display: -webkit-box; overflow: hidden; color: #d8fff8; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.anonymous-room-head .party-room-heading span { color: #86aaa7; }
.anonymous-privacy-note { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-bottom: 1px solid #253b3d; background: #0d181b; color: #82aaa7; font-size: 10px; line-height: 1.45; }
.anonymous-privacy-note svg { flex: 0 0 16px; width: 16px; height: 16px; color: #68c8bd; }
.anonymous-chat { border-top: 0; }
.anonymous-chat > header span { color: #789492; font-size: 9px; }
.anonymous-message-list { min-height: 420px; background: radial-gradient(circle at 15% 6%, rgba(45,139,130,.12), transparent 30%), linear-gradient(155deg, #091113, #050809 68%); }
.anonymous-message-account { cursor: default; }
.anonymous-avatar { display: grid; place-items: center; border-color: #398077 !important; background: #143b38 !important; color: #a9f4e9 !important; }
.anonymous-avatar svg { width: 19px; height: 19px; }
.anonymous-message-time { font-style: italic; }
.anonymous-message-account .group-message-account-copy strong { color: #87e1d6; }
.anonymous-member-row > div { min-width: 0; display: grid; gap: 2px; }
.anonymous-member-row > div strong { overflow: hidden; color: #e7f4f2; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.anonymous-member-row > div span { color: #78908f; font-size: 9px; }
.anonymous-lock-button span { display: inline !important; color: inherit !important; }
.anonymous-modal-card .panel-title span { color: #bff7ef; }
.party-form-body textarea, .party-form-body select { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid #39424d; border-radius: 8px; outline: 0; background: #101319; color: #eef2f7; font: inherit; }
.party-form-body textarea { resize: vertical; line-height: 1.5; }
.party-form-body select option { background: #101319; color: #eef2f7; }
.party-form-body input:focus, .party-form-body textarea:focus, .party-form-body select:focus { border-color: #4e8f89; }
.anonymous-modal-card .modal-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 0 12px 12px; }
.anonymous-modal-card .modal-actions button { min-height: 36px; padding: 0 12px; border: 1px solid #3b4650; border-radius: 8px; background: #171c21; color: #c7cfd7; cursor: pointer; font-weight: 750; }
.anonymous-modal-card .modal-actions .primary-button { border-color: #397970; background: #20534d; color: #d6fff9; }
.anonymous-modal-card .party-danger-zone > div { display: flex; flex-wrap: wrap; gap: 7px; }
.anonymous-modal-card .party-danger-zone > div button { flex: 1 1 150px; }

.party-room-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid #303743; background: linear-gradient(135deg, #1b1425, #11161d); }
.party-room-head > button, .party-room-actions button, .party-playback-controls button, .party-mic-column button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid #3b4653; border-radius: 9px; background: #171c22; color: #d5dce5; cursor: pointer; font-size: 10px; font-weight: 750; }
.party-room-transition { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; margin: 8px 10px 0; border: 1px solid #6c4a7d; border-radius: 10px; background: linear-gradient(135deg, rgba(83,46,105,.72), rgba(35,27,43,.9)); color: #ead8f3; font-size: 10px; font-weight: 750; }
.party-room-transition[hidden] { display: none; }
.party-room-transition svg { width: 15px; animation: partyTransitionSpin .8s linear infinite; }
.party-room-panel.party-room-switching .party-stage, .party-room-panel.party-room-switching .party-chat { opacity: .58; pointer-events: none; transition: opacity .16s ease; }
@keyframes partyTransitionSpin { to { transform: rotate(360deg); } }
.party-room-head > button { width: 36px; padding: 0; }
.party-room-head button svg { width: 15px; height: 15px; }
.party-room-heading { min-width: 0; display: grid; gap: 2px; }
.party-room-heading strong { overflow: hidden; color: #f5e9ff; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.party-room-heading span { color: #9c8daa; font-size: 10px; }
.party-room-actions { justify-content: flex-end; flex-wrap: wrap; margin-left: auto; }
#party-room-panel .party-room-actions > button { width: 36px; padding: 0; }
.party-room-actions > b { color: #eacb69; font-size: 11px; white-space: nowrap; }
.party-room-mode-actions { display: inline-flex; align-items: center; gap: 5px; }
.party-room-mode-actions[hidden] { display: none !important; }
.party-room-mode-actions button { min-width: 34px; padding: 0 9px; }
.party-room-mode-actions button.active { border-color: #9d6ac1; background: #563171; color: #fff; box-shadow: 0 0 0 2px rgba(157,106,193,.14); }
.party-room-actions button.danger, .party-member-row > button.danger { border-color: #6e3038; background: #351a20; color: #ff8993; }
.party-search-launcher { display: grid; grid-template-columns: 18px minmax(0, 1fr) 34px; align-items: center; gap: 7px; margin: 9px 10px 0; padding: 5px 5px 5px 11px; border: 1px solid #3b3443; border-radius: 11px; background: linear-gradient(135deg, #111017, #0b0d12); cursor: text; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.party-search-launcher[hidden] { display: none !important; }
.party-search-launcher:hover, .party-search-launcher:focus-within { border-color: #885bad; background: linear-gradient(135deg, #17101f, #0d1015); box-shadow: 0 0 0 2px rgba(136, 91, 173, .12); }
.party-search-launcher > svg { width: 16px; height: 16px; color: #a77bc4; }
.party-search-launcher input { width: 100%; min-width: 0; height: 32px; padding: 0; border: 0; outline: 0; background: transparent; color: #e9e1ee; cursor: text; font-size: 11px; }
.party-search-launcher input::placeholder { color: #817789; opacity: 1; }
.party-search-launcher button { width: 34px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid #704792; border-radius: 8px; background: #43265d; color: #ead8f5; cursor: pointer; }
.party-search-launcher button:hover { border-color: #9664bd; background: #593278; }
.party-search-launcher button svg { width: 14px; height: 14px; }

.party-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; background: radial-gradient(circle at 20% 0, rgba(122,49,158,.16), transparent 34%), #090b0f; }
.party-player-column, .party-mic-column { min-width: 0; }
.party-player-shell { position: relative; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid #382e45; border-radius: 14px; background: #050607; box-shadow: 0 16px 36px rgba(0,0,0,.32); }
.party-mini-player{position:fixed;z-index:96;width:58px;height:58px;user-select:none;touch-action:none;animation:partyMiniEnter .22s ease-out}.party-mini-player[hidden]{display:none!important}.party-mini-player.is-expanded{width:min(370px,calc(100vw - 24px));height:62px}.party-mini-bubble{position:absolute;z-index:2;left:0;top:2px;width:56px;height:56px;display:grid;place-items:center;padding:0;border:1px solid #7e54aa;border-radius:50%;background:linear-gradient(145deg,#2e1d42,#0b0d12);box-shadow:0 12px 32px rgba(0,0,0,.58),0 0 22px rgba(147,76,224,.3);cursor:grab;touch-action:none}.party-mini-player[data-corner$="right"] .party-mini-bubble{right:0;left:auto}.party-mini-player.is-dragging .party-mini-bubble{cursor:grabbing;transform:scale(1.06)}.party-mini-panel{position:absolute;left:64px;top:0;width:calc(100% - 64px);min-height:62px;display:none;grid-template-columns:minmax(0,1fr) 40px 34px;align-items:center;gap:6px;padding:7px;border:1px solid #6b4d91;border-radius:17px;background:linear-gradient(145deg,rgba(34,24,48,.98),rgba(10,13,18,.98));box-shadow:0 16px 42px rgba(0,0,0,.62),0 0 0 1px rgba(177,109,255,.12);backdrop-filter:blur(12px)}.party-mini-player[data-corner$="right"] .party-mini-panel{right:64px;left:auto}.party-mini-player.is-expanded .party-mini-panel{display:grid;animation:partyMiniPanelIn .16s ease-out}.party-mini-main{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:6px;padding:2px 3px;border:0;background:transparent;color:#fff;cursor:pointer;text-align:left}.party-mini-main>svg{width:14px;color:#9d7dbd}.party-mini-disc{position:relative;width:46px;height:46px;display:grid;place-items:center;border:2px solid #9c6bd4;border-radius:50%;background:radial-gradient(circle,#28133e 0 19%,#0d0c12 21% 42%,#8d55bd 44% 47%,#111018 49% 68%,#673998 70%);box-shadow:0 0 13px rgba(174,93,240,.45)}.party-mini-disc>svg{position:relative;z-index:2;width:17px;height:17px;padding:4px;border-radius:50%;box-sizing:content-box;background:#15101e;color:#f0d8ff}.party-mini-disc>b{position:absolute;right:-2px;bottom:1px;width:10px;height:10px;border:2px solid #110f16;border-radius:50%;background:#7f8793}.party-mini-player.is-playing .party-mini-disc{animation:partyMiniSpin 4s linear infinite}.party-mini-player.is-playing .party-mini-disc>b{background:#54ec88;box-shadow:0 0 8px #54ec88}.party-mini-copy{min-width:0;display:grid;gap:3px}.party-mini-copy small,.party-mini-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.party-mini-copy small{color:#bca5d1;font-size:10px}.party-mini-copy strong{color:#f5effa;font-size:12px}.party-mini-control,.party-mini-close{display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer}.party-mini-control{width:38px;height:38px;border:1px solid #715095;background:#2a193b;color:#e9d4ff}.party-mini-control:disabled{border-color:#3b3f47;background:#1b1e23;color:#656c76;cursor:default}.party-mini-close{width:30px;height:30px;border:1px solid #66404a;background:#301920;color:#ff9dab}.party-mini-control>svg{width:17px}.party-mini-close>svg{width:14px}.party-mini-main:hover .party-mini-copy strong{color:#dcb7ff}.party-mini-control:not(:disabled):hover{border-color:#a976dc;background:#3a2253}.party-mini-close:hover{border-color:#a85060;background:#4b202a}@keyframes partyMiniSpin{to{transform:rotate(360deg)}}@keyframes partyMiniEnter{from{opacity:0;transform:translateY(12px) scale(.96)}}@keyframes partyMiniPanelIn{from{opacity:0;transform:scale(.94)}}
.party-mini-drop-zone{position:fixed;z-index:97;right:50%;bottom:14px;display:flex;align-items:center;gap:7px;padding:10px 15px;border:1px dashed #87505a;border-radius:999px;background:rgba(41,16,21,.94);color:#ff8994;font-size:9px;font-weight:750;transform:translateX(50%);pointer-events:none;transition:.15s}.party-mini-drop-zone[hidden]{display:none!important}.party-mini-drop-zone.active{border-color:var(--danger);background:#6c1e29;color:#fff;transform:translateX(50%) scale(1.05)}.party-mini-drop-zone svg{width:16px}.party-mini-player.is-over-drop .party-mini-bubble{border-color:#ff6675;background:linear-gradient(145deg,#5d202b,#1b0d12);box-shadow:0 0 24px rgba(255,75,94,.55)}
@media(max-width:600px){.party-mini-player.is-expanded{width:calc(100vw - 20px)}.party-mini-panel{grid-template-columns:minmax(0,1fr) 38px 32px}.party-mini-copy strong{font-size:11px}.party-mini-control{width:36px;height:36px}.party-mini-close{width:29px;height:29px}.party-mini-drop-zone span{display:none}}
@media(prefers-reduced-motion:reduce){.party-mini-player,.party-mini-player.is-expanded .party-mini-panel,.party-mini-player.is-playing .party-mini-disc{animation:none}}
.party-mini-player.has-local-mic.is-expanded{width:min(420px,calc(100vw - 24px))}.party-mini-player.has-local-mic .party-mini-panel{grid-template-columns:minmax(0,1fr) 40px 40px 34px}.party-mini-mic[hidden]{display:none!important}.party-mini-player.has-voice .party-mini-disc{border-color:#55dd8a;background:radial-gradient(circle,#153d2a 0 19%,#0d1512 21% 42%,#3eaa6a 44% 47%,#101813 49% 68%,#277548 70%);box-shadow:0 0 16px rgba(68,220,132,.46)}.party-mini-player.has-voice .party-mini-disc>b{background:#54ec88;box-shadow:0 0 9px #54ec88}.party-mini-player.has-voice.is-muted .party-mini-disc{border-color:#d79b59;box-shadow:0 0 14px rgba(215,155,89,.34)}.party-mini-player.has-voice.is-muted .party-mini-disc>b{background:#d79b59;box-shadow:0 0 7px #d79b59}.party-mini-player.has-voice .party-mini-mic{border-color:#397f58;background:#153724;color:#a9f4c7}.party-mini-player.has-voice.is-muted .party-mini-mic{border-color:#8d6335;background:#402b17;color:#ffd49f}
@media(max-width:600px){.party-mini-player.has-local-mic .party-mini-panel{grid-template-columns:minmax(0,1fr) 38px 38px 32px}}

/* Phong Bua tiec thu gon: giu voice va tro chuyen ben tren man hinh game. */
.party-mini-player.is-expanded,
.party-mini-player.has-local-mic.is-expanded {
  width: min(440px, calc(100vw - 24px));
  height: min(500px, calc(100dvh - 24px));
  user-select: auto;
  touch-action: pan-y;
}
.party-mini-player.is-expanded .party-mini-bubble { top: 8px; }
.party-mini-player.is-expanded[data-corner^="bottom"] .party-mini-bubble { top: auto; bottom: 8px; }
.party-mini-player[data-corner^="bottom"] .party-mini-panel { top: auto; bottom: 0; }
.party-mini-player .party-mini-panel {
  width: calc(100% - 64px);
  height: min(500px, calc(100dvh - 24px));
  min-height: 0;
  display: none;
  grid-template-columns: none;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: #674687;
  border-radius: 18px;
  background: radial-gradient(circle at 18% 0, rgba(139, 79, 190, .2), transparent 34%), linear-gradient(155deg, rgba(28, 20, 40, .99), rgba(7, 10, 15, .99) 72%);
  box-shadow: 0 22px 62px rgba(0, 0, 0, .72), 0 0 0 1px rgba(183, 112, 244, .12);
  backdrop-filter: blur(16px);
}
.party-mini-player.is-expanded .party-mini-panel {
  display: flex;
  flex-direction: column;
  animation: partyMiniRoomIn .2s cubic-bezier(.2, .82, .25, 1);
}
.party-mini-head {
  flex: 0 0 auto;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px 30px 30px;
  align-items: center;
  gap: 4px;
  padding: 7px;
  border-bottom: 1px solid #493559;
  background: rgba(20, 14, 29, .96);
}
.party-mini-head .party-mini-main {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 7px;
  min-height: 36px;
  padding: 2px;
}
.party-mini-head-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #8056a3;
  border-radius: 10px;
  background: #342044;
  color: #e3c3ff;
}
.party-mini-head-icon svg { width: 16px; height: 16px; }
.party-mini-head .party-mini-copy { gap: 1px; }
.party-mini-head .party-mini-copy small { color: #a98dbc; font-size: 8px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.party-mini-head .party-mini-copy strong { color: #f6f0fb; font-size: 12px; }
.party-mini-head-button,
.party-mini-head .party-mini-close {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #493b55;
  border-radius: 9px;
  background: #17121e;
  color: #bfaecb;
  cursor: pointer;
}
.party-mini-head .party-mini-close { border-color: #603640; background: #2b171d; color: #ff9daa; }
.party-mini-head-button:hover { border-color: #8a60a9; color: #f0dcff; }
.party-mini-head-button svg,
.party-mini-head .party-mini-close svg { width: 14px; height: 14px; }
.party-mini-live {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid #342a3d;
  background: linear-gradient(180deg, rgba(91, 47, 121, .14), rgba(12, 14, 19, .34));
}
.party-mini-section-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.party-mini-section-head > span { min-width: 0; display: inline-flex; align-items: center; gap: 6px; color: #f0e8f5; }
.party-mini-section-head > span svg { width: 14px; height: 14px; color: #b57ad8; }
.party-mini-section-head strong { font-size: 10px; }
.party-mini-section-head small { overflow: hidden; color: #897c92; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.party-mini-section-head > button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #b58ad0;
  cursor: pointer;
  font-size: 8px;
  font-weight: 800;
}
.party-mini-stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.party-mini-person {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 6px 3px;
  border: 1px solid #382f41;
  border-radius: 11px;
  background: #101217;
  text-align: center;
}
.party-mini-person.is-self { border-color: #6b4b83; background: #1b1422; }
.party-mini-person.is-speaking { border-color: #43c878; box-shadow: 0 0 0 2px rgba(67, 200, 120, .12), 0 0 14px rgba(67, 200, 120, .19); }
.party-mini-person-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #5b4868;
  border-radius: 50%;
  background: linear-gradient(145deg, #3b2450, #18202a);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.party-mini-person.is-speaking .party-mini-person-avatar { border-color: #54e78b; box-shadow: 0 0 10px rgba(84, 231, 139, .55); }
.party-mini-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.party-mini-person strong,
.party-mini-person small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-mini-person strong { color: #ece7f0; font-size: 8px; }
.party-mini-person small { color: #7f8994; font-size: 7px; }
.party-mini-person.is-speaking small { color: #70dc99; }
.party-mini-stage-empty {
  grid-column: 1 / -1;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed #3d3445;
  border-radius: 10px;
  color: #80758a;
  font-size: 9px;
}
.party-mini-stage-empty svg { width: 14px; height: 14px; }
.party-mini-player .party-mini-mic {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #3d855d;
  border-radius: 10px;
  background: linear-gradient(180deg, #1d5736, #153c28);
  color: #bcf5d0;
  cursor: pointer;
  font-size: 9px;
  font-weight: 850;
}
.party-mini-player .party-mini-mic[hidden] { display: none !important; }
.party-mini-player .party-mini-mic.is-muted { border-color: #846039; background: linear-gradient(180deg, #4a321c, #332114); color: #ffd19b; }
.party-mini-player .party-mini-mic.is-join { border-color: #6960ad; background: linear-gradient(180deg, #39316f, #25204d); color: #ded8ff; }
.party-mini-player .party-mini-mic:disabled { border-color: #3b3e44; background: #191c21; color: #717782; cursor: default; }
.party-mini-player .party-mini-mic svg { width: 14px; height: 14px; }
.party-mini-chat { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; background: rgba(7, 9, 13, .78); }
.party-mini-chat > .party-mini-section-head { flex: 0 0 auto; padding: 8px 10px 6px; }
.party-mini-messages { min-height: 92px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 5px 9px 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.party-mini-message { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: end; gap: 6px; }
.party-mini-message.own { grid-template-columns: minmax(0, 1fr); justify-items: end; }
.party-mini-message-avatar { width: 25px; height: 25px; display: grid; place-items: center; overflow: hidden; border: 1px solid #50415d; border-radius: 50%; background: #28202f; color: #fff; font-size: 8px; font-weight: 900; }
.party-mini-message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.party-mini-message-body { min-width: 0; max-width: 88%; display: grid; gap: 2px; }
.party-mini-message-body > strong { overflow: hidden; color: #aa9ab4; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.party-mini-message-body > p { margin: 0; padding: 6px 8px; overflow-wrap: anywhere; border: 1px solid #3d3445; border-radius: 5px 11px 11px 11px; background: #17151c; color: #e4dfe8; font-size: 9px; line-height: 1.35; }
.party-mini-message.own .party-mini-message-body > p { border-color: #754e94; border-radius: 11px 5px 11px 11px; background: linear-gradient(145deg, #5a3473, #402653); color: #fff; }
.party-mini-message-body p span { display: inline-flex; align-items: center; gap: 4px; color: #d4b8e8; font-weight: 800; }
.party-mini-message-body p span svg { width: 12px; height: 12px; }
.party-mini-message-body time { margin-left: 4px; color: #756c7c; font-size: 7px; white-space: nowrap; }
.party-mini-message-empty { min-height: 72px; display: grid; place-items: center; color: #716979; font-size: 9px; text-align: center; }
.party-mini-message-form {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: end;
  gap: 6px;
  padding: 7px 8px 8px;
  border-top: 1px solid #2d2833;
  background: #0d0f13;
}
.party-mini-message-form textarea {
  width: 100%;
  min-height: 36px;
  max-height: 68px;
  padding: 8px 9px;
  overflow-y: auto;
  resize: none;
  border: 1px solid #403848;
  border-radius: 10px;
  outline: 0;
  background: #17191f;
  color: #f3eef6;
  font: inherit;
  font-size: 10px;
  line-height: 18px;
}
.party-mini-message-form textarea:focus { border-color: #8d5bb1; box-shadow: 0 0 0 2px rgba(141, 91, 177, .12); }
.party-mini-message-form > button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #8359a4;
  border-radius: 10px;
  background: linear-gradient(180deg, #724397, #4d2b68);
  color: #fff;
  cursor: pointer;
}
.party-mini-message-form > button:disabled { opacity: .58; cursor: wait; }
.party-mini-message-form > button svg { width: 15px; height: 15px; }
.party-mini-playing {
  flex: 0 0 auto;
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-top: 1px solid #42334d;
  background: rgba(25, 18, 32, .97);
}
.party-mini-playing .party-mini-control { width: 34px; height: 34px; }
.party-mini-playing .party-mini-copy { gap: 1px; }
.party-mini-playing .party-mini-copy small { color: #917e9e; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.party-mini-playing .party-mini-copy strong { color: #e8e0ec; font-size: 9px; }
.party-mini-player.party-theme-pink .party-mini-head { border-color: #71364f; background: rgba(44, 20, 31, .97); }
.party-mini-player.party-theme-pink .party-mini-live { border-color: #5c3043; background: linear-gradient(180deg, rgba(192, 72, 126, .14), rgba(20, 11, 16, .3)); }
.party-mini-player.party-theme-pink .party-mini-message.own .party-mini-message-body > p { border-color: #c55386; background: linear-gradient(145deg, #a73c6e, #72254c); }
.party-mini-player.party-theme-pink .party-mini-message-form > button { border-color: #d26897; background: linear-gradient(180deg, #c94f85, #8d315d); }
.party-mini-player :is(button, textarea):focus-visible { outline: 2px solid #c997eb; outline-offset: 2px; }
@keyframes partyMiniRoomIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (max-width: 600px) {
  .party-mini-player.is-expanded,
  .party-mini-player.has-local-mic.is-expanded { width: calc(100vw - 20px); height: min(470px, calc(100dvh - 96px)); }
  .party-mini-player .party-mini-panel { height: min(470px, calc(100dvh - 96px)); }
  .party-mini-head { grid-template-columns: minmax(0, 1fr) 29px 29px 29px; }
  .party-mini-head-button,
  .party-mini-head .party-mini-close { width: 29px; height: 29px; }
  .party-mini-live { padding: 8px; }
  .party-mini-messages { padding-inline: 7px; }
}
@media (max-height: 560px) {
  .party-mini-player.is-expanded,
  .party-mini-player.has-local-mic.is-expanded,
  .party-mini-player .party-mini-panel { height: calc(100dvh - 24px); }
  .party-mini-live { padding-block: 7px; }
  .party-mini-person { padding-block: 4px; }
  .party-mini-person-avatar { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) { .party-mini-player.is-expanded .party-mini-panel { animation: none; } }

/* Lời mời game và bong bóng giữ ván đang chơi */
.game-invite-inline-toolbar { display: none!important; }
.game-invite-inline-toolbar button,
[data-game-invite-open].game-invite-ready { width: 38px; min-width: 38px; height: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 0; border: 1px solid #4e79a8; border-radius: 9px; background: linear-gradient(145deg,#173754,#112333); color: #e9f6ff; cursor: pointer; font-size: 11px; font-weight: 800; box-shadow: 0 8px 20px rgba(0,0,0,.28),0 0 13px rgba(73,160,233,.16); }
.game-invite-inline-toolbar button:hover,
[data-game-invite-open].game-invite-ready:hover { border-color: #77b9ed; background: linear-gradient(145deg,#1c4b70,#14314a); }
.game-invite-inline-toolbar svg,
[data-game-invite-open].game-invite-ready svg { width: 15px; height: 15px; }
[data-game-invite-open] > span { display: none !important; }
.game-title-invite-button { flex: 0 0 38px; margin: 0!important; }
.gold-game-head > .game-title-invite-button { margin-left: auto!important; }
.gold-game-head > .game-title-invite-button + button { margin-left: 0; }
.danh-lo-head > .game-title-invite-button { margin-left: 0!important; }
@media(max-width:520px){.game-title-invite-button,[data-game-invite-open].game-invite-ready{width:34px;min-width:34px;height:34px;min-height:34px}}

.game-bubble-toggle { position: fixed; z-index: 94; right: 16px; bottom: max(82px,calc(env(safe-area-inset-bottom) + 76px)); width: 56px; height: 56px; display: grid; place-items: center; padding: 0; border: 1px solid #5a89bc; border-radius: 50%; background: radial-gradient(circle at 35% 28%,#305b83,#14283b 58%,#0a1119); color: #eff9ff; cursor: pointer; box-shadow: 0 12px 32px rgba(0,0,0,.62),0 0 22px rgba(72,166,241,.3); }
.game-bubble-toggle[hidden] { display: none !important; }
.game-bubble-toggle > svg { width: 25px; height: 25px; }
.game-bubble-toggle > b { position: absolute; top: -4px; right: -4px; min-width: 21px; height: 21px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #090d12; border-radius: 999px; background: #ff4f68; color: #fff; font-size: 9px; }
.game-bubble-toggle > b[hidden] { display: none!important; }
.game-bubble-drop-zone { position: fixed; z-index: 96; right: 50%; bottom: 14px; display: flex; align-items: center; gap: 7px; padding: 10px 15px; border: 1px dashed #87505a; border-radius: 999px; background: rgba(41,16,21,.94); color: #ff8994; font-size: 9px; font-weight: 750; transform: translateX(50%); pointer-events: none; transition: .15s; }
.game-bubble-drop-zone[hidden] { display: none!important; }
.game-bubble-drop-zone.active { border-color: var(--danger); background: #6c1e29; color: #fff; transform: translateX(50%) scale(1.05); }
.game-bubble-drop-zone svg { width: 16px; }
.game-bubble-toggle.has-invite { border-color: #ffd56a; color: #fff3bd; animation: gameBubbleGlow 1.15s ease-in-out infinite; }
.game-bubble-panel { position: fixed; z-index: 93; right: 16px; bottom: max(146px,calc(env(safe-area-inset-bottom) + 140px)); width: min(350px,calc(100vw - 24px)); max-height: min(560px,calc(100vh - 180px)); overflow: auto; border: 1px solid #3f6389; border-radius: 17px; background: linear-gradient(155deg,rgba(20,34,49,.985),rgba(7,12,18,.99)); box-shadow: 0 20px 58px rgba(0,0,0,.7),0 0 0 1px rgba(111,189,255,.08); backdrop-filter: blur(16px); }
.game-bubble-panel[hidden] { display: none!important; }
.game-bubble-panel > header { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-bottom: 1px solid #2d465e; background: rgba(13,23,33,.97); }
.game-bubble-panel > header > span { display: inline-flex; align-items: center; gap: 7px; color: #f1f8ff; }
.game-bubble-panel > header svg { width: 17px; }
.game-bubble-panel > header strong { font-size: 13px; }
.game-bubble-panel > header button { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid #354a5e; border-radius: 50%; background: #101b25; color: #adbdcc; cursor: pointer; }
.game-bubble-panel section { padding: 10px; }
.game-bubble-panel section + section { border-top: 1px solid #23384b; }
.game-bubble-section-title { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; color: #9fc5e6; }
.game-bubble-section-title svg { width: 14px; }
.game-bubble-section-title strong { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.game-bubble-invite-list,.game-bubble-session-list { display: grid; gap: 7px; }
.game-bubble-invite { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) 30px; align-items: center; gap: 8px; padding: 9px; border: 1px solid #8b6d2b; border-radius: 11px; background: linear-gradient(135deg,rgba(107,75,15,.32),rgba(24,26,24,.8)); box-shadow: inset 0 0 18px rgba(255,197,63,.08),0 0 15px rgba(255,191,49,.15); }
.game-bubble-invite.is-new { animation: gameInviteCardGlow 1.35s ease-in-out infinite; }
.game-bubble-invite-main { min-width: 0; display: contents; color: inherit; cursor: pointer; }
.game-bubble-game-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,219,119,.35); border-radius: 11px; background: rgba(7,12,17,.75); font-size: 23px; }
.game-bubble-copy { min-width: 0; display: grid; gap: 2px; text-align: left; }
.game-bubble-copy strong,.game-bubble-copy span,.game-bubble-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-bubble-copy strong { color: #fff3c4; font-size: 12px; }
.game-bubble-copy span { color: #e8edf2; font-size: 10px; }
.game-bubble-copy small { color: #a5b0bb; font-size: 9px; }
.game-bubble-decline,.game-bubble-forget { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid #5b3b44; border-radius: 50%; background: #28161b; color: #ff91a0; cursor: pointer; }
.game-bubble-decline svg,.game-bubble-forget svg { width: 13px; }
.game-bubble-session { display: grid; grid-template-columns: 36px minmax(0,1fr) 28px; align-items: center; gap: 8px; padding: 8px; border: 1px solid #2f526d; border-radius: 10px; background: rgba(17,34,48,.75); }
.game-bubble-session > a { display: contents; color: inherit; text-decoration: none; }
.game-bubble-session .game-bubble-game-icon { width: 36px; height: 36px; border-color: #325d7c; font-size: 20px; }
.game-bubble-session .game-bubble-copy strong { color: #dff2ff; }
.game-bubble-forget { border-color: #34495b; background: #101a23; color: #8fa7ba; }
.game-bubble-empty { display: grid; place-items: center; gap: 6px; padding: 24px 14px; color: #778b9d; text-align: center; font-size: 10px; }
.game-bubble-empty svg { width: 24px; }

.game-invite-card { width: min(520px,calc(100vw - 22px)); max-height: min(720px,calc(100vh - 22px)); overflow: hidden; }
.game-invite-summary { display: flex; align-items: center; gap: 10px; margin: 12px 12px 8px; padding: 11px; border: 1px solid #355979; border-radius: 12px; background: linear-gradient(135deg,#132d42,#0d1822); }
.game-invite-summary > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #071019; font-size: 25px; }
.game-invite-summary > div { min-width: 0; display: grid; gap: 3px; }
.game-invite-summary strong { color: #edf8ff; font-size: 13px; }
.game-invite-summary small { overflow: hidden; color: #93acc0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.game-invite-search { display: grid; grid-template-columns: 19px minmax(0,1fr); align-items: center; gap: 6px; margin: 0 12px 8px; padding: 0 9px; border: 1px solid #364b5d; border-radius: 9px; background: #0a1117; }
.game-invite-search:focus-within { border-color: #5898c9; box-shadow: 0 0 0 2px rgba(75,149,205,.12); }
.game-invite-search svg { width: 15px; color: #7e94a6; }
.game-invite-search input { min-width: 0; height: 40px; padding: 0; border: 0; outline: 0; background: transparent; color: #eef6fc; font-size: 12px; }
.game-invite-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 12px 8px; color: #8295a5; font-size: 9px; line-height: 1.45; }
.game-invite-note svg { width: 13px; flex: 0 0 13px; }
.game-invite-online-list { max-height: min(490px,calc(100vh - 260px)); display: grid; gap: 6px; overflow: auto; padding: 0 12px 12px; }
.game-invite-person { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid #293a48; border-radius: 10px; background: #0c1319; }
.game-invite-person[hidden] { display: none!important; }
.game-invite-person .avatar { width: 42px; height: 42px; }
.game-invite-person-copy { min-width: 0; display: grid; gap: 3px; }
.game-invite-person-copy strong,.game-invite-person-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-invite-person-copy strong { color: #eaf1f7; font-size: 11px; }
.game-invite-person-copy span { color: #7f94a5; font-size: 9px; }
.game-invite-person button { min-height: 33px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid #3f7198; border-radius: 8px; background: #15334a; color: #dff3ff; cursor: pointer; font-size: 9px; font-weight: 800; }
.game-invite-person button svg { width: 13px; }
.game-invite-person button.sent { border-color: #347044; background: #14341e; color: #a8efba; }

@keyframes gameBubbleGlow { 0%,100% { box-shadow: 0 12px 32px rgba(0,0,0,.62),0 0 12px rgba(255,200,66,.32); transform: scale(1); } 50% { box-shadow: 0 12px 32px rgba(0,0,0,.62),0 0 30px rgba(255,200,66,.75); transform: scale(1.06); } }
@keyframes gameInviteCardGlow { 0%,100% { border-color:#8b6d2b; } 50% { border-color:#ffd263; box-shadow: inset 0 0 22px rgba(255,197,63,.14),0 0 20px rgba(255,191,49,.32); } }
@media (max-width:600px) { .game-bubble-toggle { right: 11px; bottom: max(72px,calc(env(safe-area-inset-bottom) + 68px)); width: 52px; height: 52px; } .game-bubble-panel { right: 10px; bottom: max(132px,calc(env(safe-area-inset-bottom) + 128px)); width: calc(100vw - 20px); max-height: calc(100vh - 155px); } .game-invite-person { grid-template-columns: 38px minmax(0,1fr) auto; } .game-invite-person .avatar { width: 38px; height: 38px; } }
@media (prefers-reduced-motion:reduce) { .game-bubble-toggle.has-invite,.game-bubble-invite.is-new { animation:none; } }
#party-youtube-player, #party-youtube-player iframe { width: 100%; height: 100%; border: 0; }
.party-player-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; padding: 20px; background: radial-gradient(circle, rgba(117,53,151,.28), transparent 54%), linear-gradient(145deg, #14101d, #080a0e); color: #93859d; text-align: center; }
.party-player-empty[hidden] { display: none; }
.party-player-empty svg { width: 38px; height: 38px; color: #c68ce6; }
.party-player-empty strong { color: #ebddf2; font-size: 15px; }
.party-player-empty span { font-size: 11px; }
.party-now-playing { justify-content: space-between; min-height: 53px; padding: 8px 2px; }
.party-now-playing > div:first-child { min-width: 0; display: grid; gap: 2px; }
.party-now-playing small, .party-mic-column > header small, .party-chat > header small { color: #887793; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.party-now-playing strong { overflow: hidden; color: #f1edf4; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.party-playback-controls { justify-content: flex-end; flex-wrap: wrap; }
.party-playback-controls[hidden] { display: none !important; }
.party-playback-controls button { min-height: 31px; padding: 0 9px; border-color: #3d4651; background: #15191e; color: #dbe2e9; }
.party-playback-controls button svg { width: 14px; height: 14px; }
.party-song-search { display: grid; gap: 6px; padding: 10px; border: 1px solid #332b3c; border-radius: 11px; background: #111017; }
.party-song-search > label { color: #c9b5d4; font-size: 10px; font-weight: 800; }
.party-song-search > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.party-song-search input { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #3b3443; border-radius: 8px; outline: 0; background: #08090d; color: #eff2f6; font-size: 12px; }
.party-song-search input:focus { border-color: #885bad; }
.party-song-search button, .party-song-actions button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 11px; border: 1px solid #774aa0; border-radius: 8px; background: #512d70; color: #f8e6ff; cursor: pointer; font-size: 10px; font-weight: 800; }
.party-song-search button svg, .party-song-results button svg { width: 14px; }
.party-song-results { display: grid; gap: 6px; max-height: 340px; margin-top: 8px; overflow-y: auto; }
.party-song-results article { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px; border: 1px solid #2f3540; border-radius: 9px; background: #12161c; }
.party-song-results img { width: 88px; height: 50px; object-fit: cover; border-radius: 6px; }
.party-song-results article > div { min-width: 0; display: grid; gap: 3px; }
.party-song-results article > .party-song-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.party-song-actions button:first-child { border-color: #38694b; background: #1c442b; color: #a1efb5; }
.party-song-actions button:disabled { cursor: default; opacity: .62; }
.party-song-results strong { overflow: hidden; color: #e7ebf0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.party-song-results span { color: #7e8995; font-size: 9px; }

.party-mic-column { padding: 10px; border: 1px solid #332b3d; border-radius: 14px; background: linear-gradient(150deg, #17131e, #0d1015); }
.party-mic-column > header { justify-content: space-between; margin-bottom: 10px; }
.party-mic-column > header > div { display: grid; gap: 2px; }
.party-mic-column > header strong { color: #f1e5f7; font-size: 14px; }
.party-mic-column > header button { border-color: #71468f; background: #43275a; color: #f2d9ff; }
.party-voice-guide { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; margin: -2px 0 10px; padding: 9px 10px; border: 1px solid #3b4050; border-radius: 11px; background: linear-gradient(135deg, #171a22, #101319); }
.party-voice-guide-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #242936; color: #aeb8c7; }
.party-voice-guide-icon svg { width: 18px; height: 18px; }
.party-voice-guide > span:last-child { min-width: 0; display: grid; gap: 3px; }
.party-voice-guide strong { color: #eef2f7; font-size: 11px; }
.party-voice-guide small { color: #a0a9b5; font-size: 9px; font-weight: 650; line-height: 1.45; }
.party-voice-guide[data-state="joining"] { border-color: #7b5b2f; background: linear-gradient(135deg, #2b2418, #171712); }
.party-voice-guide[data-state="joining"] .party-voice-guide-icon { background: #3a2d17; color: #ffd37d; }
.party-voice-guide[data-state="joining"] .party-voice-guide-icon svg { animation: partyTransitionSpin .8s linear infinite; }
.party-voice-guide[data-state="ready"] { border-color: #2f7952; background: linear-gradient(135deg, #153123, #101b17); box-shadow: inset 3px 0 0 #4ed68a; }
.party-voice-guide[data-state="ready"] .party-voice-guide-icon { background: #1c4932; color: #70eba2; }
.party-voice-guide[data-state="ready"] strong { color: #aaf3c7; }
.party-voice-guide[data-state="ready"] small { color: #94c9aa; }
.party-voice-guide[data-state="muted"] { border-color: #67557a; background: linear-gradient(135deg, #251d2e, #15131a); }
.party-voice-guide[data-state="muted"] .party-voice-guide-icon { background: #392847; color: #cf9ce9; }
.party-voice-guide[data-state="error"] { border-color: #8b4b4e; background: linear-gradient(135deg, #321c20, #1c1518); }
.party-voice-guide[data-state="error"] .party-voice-guide-icon { background: #49242a; color: #ff939b; }
.party-voice-guide[data-state="error"] strong { color: #ffc0c4; }
.party-voice-guide[data-state="error"] small { color: #d9a0a4; }
.party-mic-column button.party-audio-permission { width: 100%; min-height: 46px; justify-content: flex-start; margin: -2px 0 10px; padding: 8px 11px; border-color: #9b6934; background: linear-gradient(135deg, #3a2818, #251c18); color: #ffd59a; text-align: left; }
.party-audio-permission > svg { width: 20px; flex: 0 0 auto; }
.party-audio-permission > span { display: grid; gap: 2px; }
.party-audio-permission strong { color: #ffe4b6; font-size: 11px; }
.party-audio-permission small { color: #d9b98b; font-size: 9px; font-weight: 650; }
.party-mic-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.party-mic-slot { min-width: 0; min-height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden; padding: 10px; border: 1px solid #383344; border-radius: 13px; background: radial-gradient(circle at 50% 20%, rgba(130,65,163,.22), transparent 48%), #11131a; text-align: center; }
.party-mic-column button.party-mic-slot { min-height: 118px; display: flex; padding: 10px; border-color: #383344; border-radius: 13px; background: radial-gradient(circle at 50% 20%, rgba(130,65,163,.16), transparent 48%), #11131a; color: #717b88; }
.party-mic-slot.empty { border-style: dashed; color: #717b88; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.party-mic-slot.empty:hover { border-color: #a366c1; background: radial-gradient(circle at 50% 20%, rgba(153,75,190,.3), transparent 52%), #17131d; color: #e8c8f7; transform: translateY(-1px); }
.party-mic-slot.empty > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; background: #181b22; }
.party-mic-slot.empty svg { width: 20px; }
.party-stage-avatar { width: 58px; height: 58px; display: grid; flex: 0 0 58px; place-items: center; overflow: hidden; border: 2px solid #b576d2; border-radius: 50%; background: #29202f; color: #fff; font-weight: 800; box-shadow: 0 0 0 4px rgba(173,96,207,.1), 0 0 22px rgba(174,88,212,.25); }
.party-stage-avatar img { width: 100%; height: 100%; object-fit: cover; }
.party-mic-slot > strong { max-width: 100%; color: #eee9f1; font-size: 12px; }
.party-mic-slot > small { display: inline-flex; align-items: center; gap: 4px; color: #79d5a1; font-size: 9px; }
.party-mic-slot > small svg { width: 12px; }
.party-mic-slot.muted { opacity: .68; }
.party-mic-slot.muted > small { color: #a6aeb8; }
.party-slot-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.party-mic-column .party-slot-controls button { min-height: 27px; padding: 0 7px; border-color: #694184; background: #382047; color: #edd6f8; font-size: 8px; }
.party-mic-column .party-slot-controls button.leave { border-color: #65404a; background: #301c21; color: #f3a2ab; }
.party-mic-column .party-slot-controls button:disabled { opacity: .5; cursor: wait; }
.party-slot-controls button svg { width: 12px; height: 12px; }
.party-local-mic { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.party-local-mic button:last-child { border-color: #65404a; color: #f3a2ab; }
.party-room-panel.party-mode-video .party-mic-column { display: none; }

/* Keep voice-room rendering light on phones and integrated GPUs. Connection
   status spinners remain active, while decorative profile/message effects stop. */
body.party-room-active #party-room-panel *,
body.party-room-active #party-room-panel *::before,
body.party-room-active #party-room-panel *::after { animation: none !important; }
body.party-room-active #party-room-panel .party-room-transition svg,
body.party-room-active #party-room-panel .party-voice-guide[data-state="joining"] .party-voice-guide-icon svg { animation: partyTransitionSpin .8s linear infinite !important; }

#party-room-panel.party-theme-pink { border-color: #a84675; background: #160d13; box-shadow: 0 18px 50px rgba(73, 13, 43, .32), inset 0 0 0 1px rgba(255, 145, 191, .08); }
#party-room-panel.party-theme-pink .party-room-head { position: relative; overflow: hidden; border-color: #833757; background: radial-gradient(circle at 82% 10%, rgba(255, 150, 195, .2), transparent 30%), linear-gradient(135deg, #4b1d35, #24131f); }
#party-room-panel.party-theme-pink .party-room-head::after { content: "♥  ♡  ♥"; position: absolute; right: 13px; top: -7px; color: #ffc3dd; font-family: Georgia, serif; font-size: 24px; letter-spacing: 5px; line-height: 1; opacity: .28; transform: rotate(-7deg); pointer-events: none; }
#party-room-panel.party-theme-pink .party-room-head > * { position: relative; z-index: 1; }
#party-room-panel.party-theme-pink .party-room-heading strong { color: #ffe3f0; }
#party-room-panel.party-theme-pink .party-room-heading span { color: #dca6bd; }
#party-room-panel.party-theme-pink .party-room-actions button { border-color: #9f4971; background: #55243d; color: #ffe5f1; }
#party-room-panel.party-theme-pink .party-room-mode-actions button.active { border-color: #f28cba; background: #923d68; color: #fff; }
#party-room-panel.party-theme-pink .party-search-launcher { border-color: #71344f; background: linear-gradient(135deg, #27121e, #150e13); }
#party-room-panel.party-theme-pink .party-search-launcher > svg { color: #f08dbc; }
#party-room-panel.party-theme-pink .party-search-launcher button { border-color: #c05a8c; background: #7d3157; color: #fff0f7; }
#party-room-panel.party-theme-pink .party-stage { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 14% 0, rgba(255, 112, 173, .2), transparent 38%), radial-gradient(circle at 90% 30%, rgba(255, 190, 217, .08), transparent 26%), #120b10; }
#party-room-panel.party-theme-pink .party-stage::before { content: "♥"; position: absolute; z-index: 0; right: 5%; top: 18px; color: #ff9bc6; font-family: Georgia, serif; font-size: 25px; opacity: .13; text-shadow: -115px 78px 0 #ffd0e3, -275px 205px 0 #ff82b8; transform: rotate(9deg); pointer-events: none; }
#party-room-panel.party-theme-pink .party-stage > * { position: relative; z-index: 1; }
#party-room-panel.party-theme-pink .party-player-shell { border-color: #72344f; box-shadow: 0 16px 40px rgba(62, 11, 36, .38); }
#party-room-panel.party-theme-pink .party-player-empty { background: radial-gradient(circle, rgba(238, 94, 158, .28), transparent 55%), linear-gradient(145deg, #28121f, #100a0e); color: #c996ad; }
#party-room-panel.party-theme-pink .party-player-empty svg { color: #ff94c4; }
#party-room-panel.party-theme-pink .party-player-empty strong,
#party-room-panel.party-theme-pink .party-now-playing strong { color: #ffe5f1; }
#party-room-panel.party-theme-pink .party-now-playing small,
#party-room-panel.party-theme-pink .party-mic-column > header small { color: #c77f9f; }
#party-room-panel.party-theme-pink .party-playback-controls button { border-color: #71364f; background: #2c1721; color: #f5dce7; }
#party-room-panel.party-theme-pink .party-mic-column { border-color: #71344f; background: linear-gradient(150deg, #2d1723, #140d12); }
#party-room-panel.party-theme-pink .party-mic-column > header strong { color: #ffe5f2; }
#party-room-panel.party-theme-pink .party-mic-slot,
#party-room-panel.party-theme-pink .party-mic-column button.party-mic-slot { border-color: #6f3851; background: radial-gradient(circle at 50% 20%, rgba(255, 105, 170, .22), transparent 50%), #1c1016; }
#party-room-panel.party-theme-pink .party-mic-slot { position: relative; isolation: isolate; }
#party-room-panel.party-theme-pink .party-mic-slot::before { content: "♥"; position: absolute; z-index: 0; top: -13px; right: -7px; color: #ff8fbe; font: 58px/1 Georgia, serif; opacity: .08; transform: rotate(10deg); pointer-events: none; }
#party-room-panel.party-theme-pink .party-mic-slot > * { position: relative; z-index: 1; }
#party-room-panel.party-theme-pink .party-stage-avatar,
#party-room-panel.party-theme-pink .party-mic-slot.empty > span { box-sizing: border-box; border: 0; border-radius: 0; background: linear-gradient(145deg, #ffd0e3, #ff76ad 48%, #a91f5b); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M50 87C42 77 5 57 5 29C5 13 17 4 31 4C40 4 47 9 50 18C53 9 60 4 69 4C83 4 95 13 95 29C95 57 58 77 50 87Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M50 87C42 77 5 57 5 29C5 13 17 4 31 4C40 4 47 9 50 18C53 9 60 4 69 4C83 4 95 13 95 29C95 57 58 77 50 87Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 7px rgba(244, 90, 157, .46)); }
#party-room-panel.party-theme-pink .party-stage-avatar { width: 66px; height: 60px; flex-basis: 60px; padding: 5px; }
#party-room-panel.party-theme-pink .party-stage-avatar-inner { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; background: #4a2135; color: #fff; font-weight: 850; -webkit-mask: inherit; mask: inherit; }
#party-room-panel.party-theme-pink .party-stage-avatar-inner img { width: 100%; height: 100%; object-fit: cover; }
#party-room-panel.party-theme-pink .party-mic-slot.empty > span { position: relative; width: 56px; height: 51px; color: #fff1f7; }
#party-room-panel.party-theme-pink .party-mic-slot.empty > span::before { content: ""; position: absolute; z-index: 0; inset: 5px; background: #6e2448; -webkit-mask: inherit; mask: inherit; }
#party-room-panel.party-theme-pink .party-mic-slot.empty > span > svg { position: relative; z-index: 1; }
#party-room-panel.party-theme-pink .party-mic-slot.empty:hover { border-color: #ef7cb0; background: radial-gradient(circle at 50% 20%, rgba(255, 105, 170, .35), transparent 52%), #29131f; color: #ffe2ef; }
#party-room-panel.party-theme-pink .party-stage-avatar { border-color: #f080b3; background: #4a2135; box-shadow: 0 0 0 4px rgba(240, 112, 171, .12), 0 0 24px rgba(240, 91, 158, .3); }
#party-room-panel.party-theme-pink .party-mic-column .party-slot-controls button { border-color: #9a4770; background: #59243f; color: #ffe1ef; }
#party-room-panel.party-theme-pink .party-chat { border-color: #71344f; background: #120b0f; }
#party-room-panel.party-theme-pink .party-message-form { background: #1d1017; }
#party-room-panel.party-theme-pink .party-message-form textarea { border-color: #71364f; background: #27141e; color: #fff2f8; }
#party-room-panel.party-theme-pink .party-message-form textarea:focus { border-color: #e16d9f; }
#party-room-panel.party-theme-pink .party-message-form .direct-send-button { border-color: #c85c8d; background: linear-gradient(180deg, #c84f86, #91335f); }
#party-room-panel.party-theme-pink .party-message-list { background: radial-gradient(circle at 15% 6%, rgba(255, 105, 170, .14), transparent 30%), radial-gradient(circle at 88% 60%, rgba(255, 190, 216, .06), transparent 28%), linear-gradient(155deg, #1b0f16, #0d090c 70%); }
#party-room-panel.party-theme-pink .party-message:not(.own) .group-message-bubble { border-color: #6e354f; background: #2b1621; }
#party-room-panel.party-theme-pink .party-message.own .group-message-bubble { border-color: #c65488; background: linear-gradient(145deg, #a93d70, #74264d); }
.party-mini-player.party-theme-pink .party-mini-bubble { border-color: #df6da2; background: linear-gradient(145deg, #632743, #1b1016); box-shadow: 0 12px 32px rgba(0,0,0,.58), 0 0 24px rgba(242,91,161,.38); }
.party-mini-player.party-theme-pink .party-mini-bubble::after { content: "♥"; position: absolute; right: -2px; top: -5px; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #f28fbc; border-radius: 50%; background: #7b294f; color: #ffe6f1; font: 12px/1 Georgia, serif; box-shadow: 0 3px 9px rgba(55, 8, 32, .45); pointer-events: none; }
.party-mini-player.party-theme-pink .party-mini-panel { border-color: #a94d78; background: linear-gradient(145deg, rgba(76,28,51,.98), rgba(23,13,19,.98)); }
.party-mini-player.party-theme-pink .party-mini-disc { border-color: #ed7fb2; background: radial-gradient(circle,#5e1e42 0 19%,#160d13 21% 42%,#dc639c 44% 47%,#1c1017 49% 68%,#8d335f 70%); }

.party-chat { border-top: 1px solid #2f3540; background: #080a0d; }
.party-chat > header { padding: 11px 12px 5px; }
.party-chat > header > div { display: grid; gap: 2px; }
.party-chat > header strong { color: #e9edf2; font-size: 14px; }
.party-message-form { padding: 10px; border-bottom: 1px solid var(--line); background: #0b0d10; box-shadow: none; }
.party-message-form textarea { max-height: 130px; }
.party-message-form .composer-media-preview, .party-message-form .composer-style-panel { margin-left: 0; }
.party-message-form .direct-send-button { border-color: #367fe0; background: #1769d7; color: #fff; }
.party-message-list { min-height: 300px; padding: 16px 10px 28px; background: radial-gradient(circle at 15% 6%, rgba(148,71,184,.11), transparent 28%), linear-gradient(155deg, #0c0e13, #06070a 68%); }
.party-message { display: flex; align-items: flex-end; margin-bottom: 21px; }
.party-message.own { justify-content: flex-end; }
.party-message-body { min-width: 0; max-width: min(84%, 570px); }
.party-message-account { max-width: 100%; }
.party-message .group-message-bubble { display: inline-block; width: fit-content; min-width: 0; max-width: 100%; padding: 0; overflow: visible; white-space: normal; }
.party-message .group-message-bubble .direct-message-text { padding: 10px 12px; font-size: 17px; line-height: 1.65; white-space: pre-wrap; }
.party-message.own .group-message-bubble { border-radius: 17px 7px 17px 17px; }
.party-message .group-message-bubble time { margin-left: 4px; font-size: 12px; }
.party-message .group-message-bubble .direct-message-state > button { display: inline; margin: 0; padding: 0; color: #ff5d69; }
.party-message .group-message-bubble .direct-message-actions > button,
.party-message .group-message-bubble button.direct-reaction-total { display: grid; margin: 0; padding: 0; }
.party-message .group-message-bubble button.direct-reaction-total { display: inline-flex; padding: 2px 7px; }

.party-modal-card { width: min(460px, calc(100vw - 22px)); }
.party-share-modal-card { width: min(560px, calc(100vw - 22px)); overflow: hidden; }
.party-share-choices { display: grid; gap: 9px; padding: 12px; }
.party-share-choices[hidden], .party-share-online[hidden] { display: none !important; }
.party-share-choices > button { width: 100%; min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 10px; border: 1px solid #37414c; border-radius: 10px; background: #11161c; color: #e7edf4; cursor: pointer; text-align: left; }
.party-share-choices > button:hover { border-color: #6b65c7; background: #18172a; }
.party-share-choices > button > svg:first-child { width: 20px; height: 20px; padding: 10px; box-sizing: content-box; border-radius: 11px; background: #232044; color: #b9b4ff; }
.party-share-choices > button > svg:last-child { width: 17px; height: 17px; color: #707d8b; }
.party-share-choices > button > span { min-width: 0; display: grid; gap: 3px; }
.party-share-choices strong { color: #edf2f7; font-size: 12px; }
.party-share-choices small { color: #84909d; font-size: 9px; line-height: 1.45; }
.party-share-online { display: grid; min-height: 230px; }
.party-share-online > header { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 9px; padding: 10px 11px; border-bottom: 1px solid #303844; background: #101419; }
.party-share-online > header > button { width: 36px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #35404b; border-radius: 8px; background: #171c22; color: #aeb9c5; cursor: pointer; }
.party-share-online > header > button:hover { border-color: #626d7a; color: #fff; }
.party-share-online > header > button svg { width: 15px; height: 15px; }
.party-share-online > header > div { min-width: 0; display: grid; gap: 2px; }
.party-share-online > header strong { color: #edf2f7; font-size: 12px; }
.party-share-online > header span { overflow: hidden; color: #7f8b98; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.party-share-online-list { display: grid; align-content: start; gap: 7px; min-height: 160px; max-height: min(58vh, 480px); overflow-y: auto; padding: 10px; }
.party-share-online-person { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid #303944; border-radius: 9px; background: #11161b; }
.party-share-online-person > div { min-width: 0; display: grid; gap: 3px; }
.party-share-online-person > div > strong { overflow: hidden; color: #e8edf3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.party-share-online-person > div > span { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; color: #7f8b98; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.party-share-online-person .online-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #4fd478; box-shadow: 0 0 7px rgba(79, 212, 120, .55); }
.party-share-online-person > button { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid #376c97; border-radius: 7px; background: #142c41; color: #9bd5ff; cursor: pointer; font-size: 9px; font-weight: 850; white-space: nowrap; }
.party-share-online-person > button:hover:not(:disabled) { border-color: #5aa0d8; background: #1a3a56; color: #fff; }
.party-share-online-person > button:disabled { border-color: #326b48; background: #163421; color: #8ae0a4; cursor: default; }
.party-share-online-person > button svg { width: 13px; height: 13px; }
.party-share-pagination { padding: 8px; }
.party-form-body { display: grid; gap: 11px; padding: 12px; }
.party-form-body label { display: grid; gap: 6px; color: #b8c0cb; font-size: 11px; font-weight: 750; }
.party-form-body input { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid #39424d; border-radius: 8px; outline: 0; background: #101319; color: #eef2f7; }
.party-form-body small { color: #77818d; font-size: 9px; font-weight: 500; }
.party-modal-card > .primary-button { width: calc(100% - 24px); margin: 0 12px 12px; }
.party-form-body > .primary-button { width: 100%; margin: 2px 0 0; }
.party-theme-shop { display: grid; gap: 8px; padding-top: 2px; }
.party-theme-shop > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.party-theme-shop > header > span { display: grid; gap: 2px; }
.party-theme-shop > header strong { color: #e9d9f1; font-size: 11px; }
.party-theme-shop > header small { color: #7f8995; font-size: 9px; font-weight: 500; }
.party-theme-shop > header > b { flex: 0 0 auto; color: #f1cb68; font-size: 10px; }
.party-theme-options { display: grid; gap: 7px; }
.party-theme-card { width: 100%; min-height: 62px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid #39424d; border-radius: 10px; background: #101319; color: #dce3eb; cursor: pointer; text-align: left; }
.party-theme-card:hover:not(:disabled) { border-color: #8759a6; background: #17131d; }
.party-theme-card.current { border-color: #47795b; background: #122319; box-shadow: inset 3px 0 0 #55c582; }
.party-theme-card:disabled { cursor: default; opacity: 1; }
.party-theme-preview { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #4d5560; border-radius: 10px; }
.party-theme-preview svg { width: 20px; height: 20px; }
.party-theme-preview-default { background: radial-gradient(circle at 30% 20%, #744392, #23182f 72%); color: #efd8ff; }
.party-theme-preview-pink { position: relative; overflow: hidden; border-color: #d6679c; background: radial-gradient(circle at 30% 20%, #ff9bc7, #762c52 72%); color: #fff2f8; box-shadow: 0 0 16px rgba(242, 98, 165, .2); }
.party-theme-preview-pink::before, .party-theme-preview-pink::after { position: absolute; color: #ffe9f3; font-family: Georgia, serif; line-height: 1; opacity: .78; pointer-events: none; }
.party-theme-preview-pink::before { content: "♥"; left: 4px; bottom: 4px; font-size: 9px; }
.party-theme-preview-pink::after { content: "♡"; right: 4px; top: 4px; font-size: 11px; }
.party-theme-preview-pink svg { position: relative; z-index: 1; }
.party-theme-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.party-theme-card > span:nth-child(2) strong { color: #eef2f6; font-size: 11px; }
.party-theme-card > span:nth-child(2) small { overflow: hidden; color: #8d98a5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.party-theme-card > b { padding: 5px 7px; border-radius: 999px; background: #2a1d31; color: #d7b1e9; font-size: 8px; white-space: nowrap; }
.party-theme-card.current > b { background: #21442f; color: #9be7b7; }
.party-theme-card[data-party-theme="pink"]:not(.owned) > b { background: #54223a; color: #ffbdd9; }
#party-create-form .panel-title > span { font-size: 15px; }
#party-create-form .party-form-body { gap: 13px; padding: 14px; }
#party-create-form .party-form-body label { font-size: 14px; }
#party-create-form .party-form-body input { min-height: 44px; font-size: 15px; }
#party-create-form .party-form-body > small { font-size: 12px; line-height: 1.5; }
#party-create-form > .primary-button { min-height: 42px; font-size: 14px; }
.party-danger-zone { display: grid; gap: 5px; margin: 0 12px 12px; padding: 11px; border: 1px solid #5b3138; border-radius: 9px; background: #26161a; }
.party-danger-zone strong { color: #ffacb4; font-size: 11px; }
.party-danger-zone span { color: #a87f84; font-size: 9px; }
.party-danger-zone button { min-height: 36px; margin-top: 4px; border: 1px solid #873b46; border-radius: 7px; background: #4a2028; color: #ffb0b7; cursor: pointer; font-weight: 800; }
.party-members-card { width: min(530px, calc(100vw - 22px)); }
.party-member-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 9px 11px 0; }
.party-member-tabs[hidden], .party-member-list[hidden] { display: none !important; }
.party-member-tabs button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #343d48; border-radius: 7px; background: #11151a; color: #8d98a5; cursor: pointer; font-size: 10px; font-weight: 800; }
.party-member-tabs button.active { border-color: #705080; background: #35223f; color: #eccfff; }
.party-member-tabs button svg { width: 14px; height: 14px; }
.party-member-tabs button b { min-width: 18px; padding: 2px 5px; border-radius: 9px; background: rgba(255,255,255,.1); color: inherit; font-size: 9px; }
.party-member-list { display: grid; gap: 7px; max-height: min(68vh, 560px); overflow-y: auto; padding: 11px; }
.party-member-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid #303843; border-radius: 9px; background: #12161b; }
.party-member-row > button { min-width: 0; display: grid; gap: 2px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.party-member-row > button strong { overflow: hidden; color: #e7ecf2; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.party-member-row > button span { color: #7d8996; font-size: 9px; }
.party-member-row > button.danger { min-height: 30px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid #6e3038; border-radius: 7px; font-size: 9px; }
.party-member-row > button.party-unblock { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 9px; border: 1px solid #326946; border-radius: 7px; background: #173421; color: #87e7a1; font-size: 9px; font-weight: 800; white-space: nowrap; }
.party-member-row > button.party-unblock:disabled { cursor: wait; opacity: .55; }
.party-member-row > button.danger svg { width: 13px; }
.party-member-row > button.party-unblock svg { width: 13px; height: 13px; }
@media (max-width: 760px) {
  .party-room-head { grid-template-columns: 1fr; }
  .party-room-actions { grid-column: 1 / -1; justify-content: flex-start; }
  #party-room-panel .party-room-actions { justify-content: flex-end; margin-left: auto; }
  .party-stage { grid-template-columns: 1fr; padding: 8px; }
  .party-mic-column { padding: 8px; }
  .party-mic-grid { grid-template-columns: repeat(4, minmax(112px, 1fr)); }
  .party-mic-slot, .party-mic-column button.party-mic-slot { min-height: 112px; }
}

@media (max-width: 520px) {
  .party-share-choices { padding: 9px; }
  .party-share-choices > button { grid-template-columns: 38px minmax(0, 1fr) 16px; gap: 8px; padding: 8px; }
  .party-share-choices > button > svg:first-child { width: 18px; height: 18px; padding: 9px; }
  .party-share-online-list { padding: 8px; }
  .party-share-online-person { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 7px; padding: 7px; }
  .party-share-online-person > button { width: 34px; padding: 0; }
  .party-share-online-person > button span { display: none; }
  .party-list-panel > .panel-title { gap: 6px; padding: 8px; }
  .party-list-panel > .panel-title > span { min-width: 0; font-size: 12px; white-space: nowrap; }
  .party-list-actions { gap: 5px; }
  .party-list-actions small { min-width: 0 !important; font-size: 9px; white-space: nowrap; }
  .party-list-actions .refresh-action { min-height: 30px; padding: 0 7px; font-size: 9px; white-space: nowrap; }
  .party-list-actions .refresh-action svg { width: 13px; height: 13px; }
  .party-room-list { gap: 6px; padding: 8px; }
  .party-room-row { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 7px; min-height: 54px; padding: 7px; border-radius: 10px; }
  .party-room-symbol { width: 34px; height: 34px; border-radius: 10px; }
  .party-room-symbol svg { width: 17px; height: 17px; }
  .party-room-copy { gap: 1px; }
  .party-room-copy strong { font-size: 13px; }
  .party-room-copy span { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .party-room-copy small { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .party-room-enter { grid-column: auto; width: 36px; min-height: 34px; justify-self: stretch; padding: 0; border-radius: 9px; }
  .party-room-enter span { display: none; }
  .party-room-enter svg { width: 16px; height: 16px; }
  .party-song-search > div { grid-template-columns: 1fr; }
  .party-song-results article { grid-template-columns: 72px minmax(0, 1fr); }
  .party-song-results img { width: 72px; height: 42px; }
  .party-song-results article > .party-song-actions { grid-column: 1 / -1; justify-content: stretch; }
  .party-song-actions button { flex: 1 1 130px; min-height: 34px; }
  .party-stage-avatar { width: 50px; height: 50px; flex-basis: 50px; }
  .party-now-playing { align-items: flex-start; flex-direction: column; }
  .party-playback-controls { justify-content: flex-start; }
  .party-slot-controls button span { display: none; }
  .party-message-body { max-width: 92%; }
}

@media (max-width: 360px) {
  .party-list-panel > .panel-title > span { font-size: 11px; }
  .party-list-actions .refresh-action { width: 32px; padding: 0; font-size: 0; }
  .party-list-actions .refresh-action svg { width: 15px; height: 15px; }
  .party-room-copy span { display: none; }
}

/* Profile levels, gift resale and neon profile skins */
.received-gift.sellable{position:relative;display:inline-grid;grid-template-columns:auto auto;align-items:center;gap:6px;padding:8px 11px;border:1px solid #4a5866;background:#171c22;color:inherit;cursor:pointer;font-family:inherit;font-size:26px}.received-gift.sellable small{grid-column:1/-1;color:#69cf91;font-size:9px;font-weight:850}.received-gift.sellable:hover{border-color:#44bd78;background:#14271d;box-shadow:0 0 14px #38d77a24}
.gift-sell-card{width:min(430px,calc(100vw - 22px));padding-bottom:13px}.gift-sell-preview{display:flex;align-items:center;gap:11px;margin:13px;padding:13px;border:1px solid #3b4652;border-radius:10px;background:linear-gradient(145deg,#171d24,#0d1116)}.gift-sell-preview>span{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;background:#242c35;font-size:31px}.gift-sell-preview>div{display:grid;gap:3px}.gift-sell-preview strong{color:#f3f6fa;font-size:16px}.gift-sell-preview small{color:#7ed99c;font-size:11px}.gift-sell-card>label{display:grid;gap:6px;margin:0 13px;color:#c8d0d9;font-size:12px;font-weight:800}.gift-sell-card input{min-height:42px;padding:0 10px;border:1px solid #3b4652;border-radius:8px;outline:0;background:#090d11;color:#fff;font-size:15px}.gift-sell-card label small{color:#85919e;font-size:10px}.gift-sell-total{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px;margin:12px 13px;padding:11px;border:1px solid #625124;border-radius:9px;background:#211b0d}.gift-sell-total span{color:#bcb08b;font-size:11px}.gift-sell-total strong{color:#ffda65;font-size:18px}.gift-sell-total small{grid-column:1/-1;color:#887d5e;font-size:9px}.gift-sell-card>.primary-button{width:calc(100% - 26px);margin:0 13px}
.profile-info-grid #profile-online-info.online{color:#65df8d}.profile-panel.has-profile-skin{position:relative;isolation:isolate;overflow:hidden;border-color:color-mix(in srgb,var(--skin-primary) 72%,#38414b);background:linear-gradient(155deg,color-mix(in srgb,var(--skin-surface) 92%,#090b0e),#07090b 70%);box-shadow:0 0 0 1px color-mix(in srgb,var(--skin-secondary) 25%,transparent),0 0 28px color-mix(in srgb,var(--skin-primary) 22%,transparent)}.profile-panel.has-profile-skin:before,.profile-panel.has-profile-skin:after{content:"";position:absolute;z-index:-1;pointer-events:none}.profile-panel.has-profile-skin:before{inset:0;background:radial-gradient(circle at 10% 5%,color-mix(in srgb,var(--skin-primary) 32%,transparent),transparent 28%),radial-gradient(circle at 92% 26%,color-mix(in srgb,var(--skin-secondary) 28%,transparent),transparent 30%);opacity:.95}.profile-panel.has-profile-skin:after{inset:0;border:1px solid var(--skin-primary);box-shadow:inset 0 0 22px color-mix(in srgb,var(--skin-secondary) 20%,transparent);opacity:.55}.profile-panel.has-profile-skin .profile-cover{border-bottom:1px solid color-mix(in srgb,var(--skin-primary) 68%,transparent);box-shadow:inset 0 -30px 48px color-mix(in srgb,var(--skin-surface) 82%,transparent),0 5px 22px color-mix(in srgb,var(--skin-primary) 18%,transparent)}.profile-panel.has-profile-skin .profile-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 5%,color-mix(in srgb,var(--skin-primary) 23%,transparent) 35%,transparent 58%,color-mix(in srgb,var(--skin-secondary) 18%,transparent));background-size:220% 100%;pointer-events:none;animation:profileSkinShine 5s linear infinite}.profile-panel.has-profile-skin .profile-identity{border-color:color-mix(in srgb,var(--skin-primary) 40%,transparent)}.profile-panel.has-profile-skin .profile-wall-avatar{box-shadow:0 0 0 3px var(--skin-primary),0 0 22px var(--skin-secondary)}.profile-panel.has-profile-skin .profile-actions{position:relative;padding:9px;border:1px solid color-mix(in srgb,var(--skin-primary) 38%,transparent);border-radius:11px;background:color-mix(in srgb,var(--skin-surface) 76%,transparent)}.profile-panel.has-profile-skin .profile-actions button{border-color:color-mix(in srgb,var(--skin-primary) 48%,#3b4652);box-shadow:inset 0 0 11px color-mix(in srgb,var(--skin-secondary) 10%,transparent)}.profile-panel.has-profile-skin .profile-stats{border-top-color:color-mix(in srgb,var(--skin-primary) 52%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--skin-surface) 55%,transparent),transparent)}.profile-panel.has-profile-skin .profile-stats button:hover{background:color-mix(in srgb,var(--skin-primary) 15%,#11151a);color:#fff}.profile-panel[data-skin-animation="pulse"]{animation:profileSkinPulse 2.4s ease-in-out infinite alternate}.profile-panel[data-skin-animation="rainbow"]{animation:profileSkinHue 8s linear infinite}
.profile-level-card{width:min(720px,100%);max-width:100%;min-width:0;max-height:min(88vh,820px);overflow-x:hidden;overflow-y:auto}.level-profile-preview{position:relative;min-height:150px;display:grid;place-items:center;overflow:hidden;background:#07090d}.level-profile-preview>.level-skin-preview{position:absolute;inset:0;border-radius:0}.level-profile-preview>div:last-child{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid #ffffff26;border-radius:14px;background:#080b10d9;box-shadow:0 10px 30px #0009}.level-profile-preview>div:last-child>span{display:grid;gap:3px}.level-profile-preview>div:last-child strong{color:#fff;font-size:16px}.level-profile-preview>div:last-child small{color:#aeb8c4;font-size:10px}.level-progress-section{padding:14px;border-top:1px solid #303844;border-bottom:1px solid #303844;background:#0d1116}.level-progress-copy{display:flex;align-items:center;justify-content:space-between;gap:10px}.level-progress-copy span{color:#f1f5f9;font-size:15px;font-weight:900}.level-progress-copy strong{color:#9fcbff;font-size:11px}.level-progress-track{height:14px;margin-top:9px;overflow:hidden;border:1px solid #33404c;border-radius:999px;background:#05070a;box-shadow:inset 0 2px 5px #000}.level-progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#416dff,#a54fff,#ff5fc6);box-shadow:0 0 13px #9e62ff;transition:width .45s ease}.level-progress-section p{margin:7px 0 0;color:#8793a0;font-size:10px}.level-up-button{width:100%;margin-top:10px;background:linear-gradient(135deg,#5c37db,#d044bd)!important;box-shadow:0 0 20px #9e4cff4f}.level-skin-section>header{display:grid;gap:3px;padding:13px 14px 7px}.level-skin-section>header strong{color:#edf2f7;font-size:14px}.level-skin-section>header span{color:#7e8a98;font-size:10px;line-height:1.45}.level-skin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 13px 14px}.level-skin-item{min-width:0;display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:9px;padding:8px;border:1px solid #343e49;border-radius:10px;background:#10151a}.level-skin-item.active{border-color:#9e68ff;box-shadow:0 0 17px #794cff28}.level-skin-item.locked{opacity:.6}.level-skin-item>div:nth-child(2){min-width:0;display:grid;gap:3px}.level-skin-item strong,.level-skin-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level-skin-item strong{color:#e9eef4;font-size:11px}.level-skin-item small{color:#7f8b98;font-size:9px}.level-skin-item>button{grid-column:1/-1;min-height:32px;border:1px solid #356d91;border-radius:7px;background:#142b3b;color:#9bd8ff;cursor:pointer;font-size:10px;font-weight:800}.level-skin-item>button.equipped{border-color:#34734a;background:#153520;color:#8ce6a7}.level-skin-preview{--skin-primary:#8f6bff;--skin-secondary:#52d7ff;--skin-surface:#100720;position:relative;overflow:hidden;min-height:100px;border:1px solid var(--skin-primary);border-radius:12px;background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--skin-primary) 45%,transparent),transparent 38%),linear-gradient(145deg,var(--skin-surface),#05070b);box-shadow:inset 0 0 22px color-mix(in srgb,var(--skin-secondary) 20%,transparent),0 0 14px color-mix(in srgb,var(--skin-primary) 28%,transparent)}.level-skin-preview:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 20deg,transparent,var(--skin-primary),transparent,var(--skin-secondary),transparent);opacity:.22;animation:profileSkinRotate 9s linear infinite}.level-skin-preview i,.level-skin-preview span,.level-skin-preview b,.level-skin-preview em{position:absolute;display:block;border-radius:999px;background:var(--skin-secondary);box-shadow:0 0 10px var(--skin-primary)}.level-skin-preview i{left:12%;top:18%;width:7px;height:7px}.level-skin-preview span{right:15%;top:24%;width:4px;height:4px}.level-skin-preview b{left:28%;bottom:18%;width:5px;height:5px}.level-skin-preview em{right:27%;bottom:22%;width:8px;height:8px}.level-skin-preview.compact{min-height:62px;border-radius:8px}.shop-demo-stage.profile-skin-demo{--skin-primary:#8f6bff;--skin-secondary:#52d7ff;--skin-surface:#100720;position:relative;overflow:hidden;min-height:105px;border:1px solid var(--skin-primary);background:radial-gradient(circle at 18% 16%,color-mix(in srgb,var(--skin-primary) 42%,transparent),transparent 33%),linear-gradient(145deg,var(--skin-surface),#05070a);box-shadow:inset 0 0 25px color-mix(in srgb,var(--skin-secondary) 20%,transparent)}.shop-demo-stage.profile-skin-demo>i{width:52px;height:52px;border:3px solid var(--skin-primary);border-radius:50%;box-shadow:0 0 18px var(--skin-secondary)}.shop-demo-stage.profile-skin-demo span{position:relative;z-index:2}.shop-preview.profile-skin-preview{padding:0}
.level-daily-reward{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;margin-top:12px;padding:10px;border:1px solid #7d6426;border-radius:12px;background:radial-gradient(circle at 8% 20%,#6d4a1b52,transparent 34%),linear-gradient(135deg,#211807,#12151a);box-shadow:inset 0 0 18px #ffcb4b12}.level-daily-reward[hidden]{display:none}.level-daily-reward>svg{width:20px;height:20px;padding:9px;box-sizing:content-box;border-radius:11px;background:linear-gradient(145deg,#ffdb65,#b97617);color:#2b1900;filter:drop-shadow(0 0 7px #ffc63b66)}.level-daily-reward>span{min-width:0;display:grid;gap:3px}.level-daily-reward>span strong{color:#ffe8a0;font-size:12px}.level-daily-reward>span small{color:#b9a97f;font-size:9px;line-height:1.4}.level-daily-reward>button{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 11px;border:1px solid #d9a632;border-radius:9px;background:linear-gradient(145deg,#f2bd39,#a96512);color:#251400;cursor:pointer;font-size:10px;font-weight:950;box-shadow:0 0 14px #e5a62438}.level-daily-reward>button svg{width:14px}.level-daily-reward>button:disabled{border-color:#48505a;background:#272d34;color:#87909a;cursor:default;box-shadow:none}
.admin-profile-skin-grant{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:9px}.admin-profile-skin-grant .admin-form-grid{margin:0}.admin-profile-skin-grant>.primary-button{min-height:40px}.admin-profile-skin-list{display:grid;gap:8px;padding:0 10px 10px}.admin-profile-skin-list>article{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px;border:1px solid #343e49;border-radius:7px;background:#0d1116}.admin-profile-skin-list>article>div:nth-child(2){min-width:0;display:grid;gap:3px}.admin-profile-skin-list strong{color:#edf2f7;font-size:12px}.admin-profile-skin-list span,.admin-profile-skin-list small{color:#82909e;font-size:9px}.admin-profile-skin-list button{min-height:34px;display:inline-flex;align-items:center;gap:4px;padding:0 9px;border:1px solid #3d6083;border-radius:6px;background:#14263a;color:#9dccff;cursor:pointer;font-size:10px}.admin-profile-skin-list button svg{width:13px}
.admin-head-action.danger{border-color:#8b3f4b;background:#3b171e;color:#ffadb5}.admin-profile-skin-revoke>p{grid-column:1/-1;display:flex;align-items:flex-start;gap:6px;margin:0;padding:8px 9px;border:1px solid #5e343d;border-radius:7px;background:#251318;color:#dba0a8;font-size:9px;line-height:1.5}.admin-profile-skin-revoke>p svg{flex:0 0 14px;width:14px;color:#ff7885}.admin-profile-skin-revoke>button.danger{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;border:1px solid #8c3d49;border-radius:7px;background:linear-gradient(180deg,#6b2532,#4b1922);color:#fff;cursor:pointer;font-size:10px;font-weight:900}.admin-profile-skin-revoke>button.danger:disabled{cursor:not-allowed;opacity:.45}.admin-profile-skin-revoke>button.danger svg{width:15px}
@keyframes profileSkinShine{to{background-position:-220% 0}}@keyframes profileSkinPulse{to{box-shadow:0 0 0 1px color-mix(in srgb,var(--skin-secondary) 35%,transparent),0 0 38px color-mix(in srgb,var(--skin-primary) 32%,transparent)}}@keyframes profileSkinHue{to{filter:hue-rotate(360deg)}}@keyframes profileSkinRotate{to{transform:rotate(360deg)}}
@media(max-width:620px){.level-skin-grid{grid-template-columns:1fr}.profile-level-card{max-height:92vh}.level-daily-reward{grid-template-columns:36px minmax(0,1fr)}.level-daily-reward>button{grid-column:1/-1;width:100%}.admin-profile-skin-grant{grid-template-columns:1fr}.admin-profile-skin-list>article{grid-template-columns:76px minmax(0,1fr)}.admin-profile-skin-list>article>button{grid-column:1/-1;justify-content:center}}

/* Lightweight homepage level and daily check-in */
.room-card-checkin{border-color:#5c4f26;background:linear-gradient(150deg,#211a0b,#15191d 68%)}
.room-card-checkin:hover{border-color:#d5aa3f;background:linear-gradient(150deg,#2b210c,#1a1e24 68%)}
.room-card-checkin>svg{color:#ffd45f}.room-card-checkin strong{color:#ffe495}.room-card-checkin span{color:#f5cc69}.room-card-checkin span svg{color:#ffd45f}
.home-level-card{width:min(660px,100%);max-width:100%;min-width:0;max-height:min(90vh,820px);overflow-x:hidden;overflow-y:auto}.home-level-progress{border-top:0;padding:18px}
#profile-level-modal,#home-level-modal{overflow-x:hidden}.exp-earning-guide{width:100%;max-width:100%;min-width:0;overflow:hidden;border-bottom:1px solid #303844;background:linear-gradient(145deg,#111722,#0a0e14)}
.exp-earning-guide>header{min-width:0;padding:12px 14px 8px}.exp-earning-guide>header>div{min-width:0;display:flex;align-items:center;gap:9px}.exp-earning-guide>header>div>span{min-width:0}.exp-earning-guide>header svg{flex:0 0 20px;width:20px;height:20px;color:#ad83ff}.exp-earning-guide>header span,.exp-earning-guide>header strong,.exp-earning-guide>header small{display:block}.exp-earning-guide>header strong{color:#f1edff;font-size:14px}.exp-earning-guide>header small{margin-top:2px;color:#8996a7;font-size:10px;overflow-wrap:anywhere}
.exp-earning-grid{width:100%;max-width:100%;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0 12px 11px}.exp-earning-grid>article{width:100%;max-width:100%;min-width:0;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px;overflow:hidden;border:1px solid #343e4d;border-radius:9px;background:#0d131b}.exp-earning-grid>article>svg{width:17px;height:17px;padding:7px;box-sizing:content-box;border-radius:9px;background:#1c2740;color:#9ec7ff}.exp-earning-grid>article>div{min-width:0}.exp-earning-grid>article strong,.exp-earning-grid>article small{display:block;overflow-wrap:anywhere}.exp-earning-grid>article strong{color:#dce5ef;font-size:11px}.exp-earning-grid>article small{margin-top:2px;color:#8391a3;font-size:9px;line-height:1.4}.exp-earning-grid>article>b{max-width:100%;padding:4px 6px;border-radius:999px;background:#1b382b;color:#86e5b4;font-size:10px;white-space:nowrap}.exp-earning-empty{grid-column:1/-1;padding:18px;border:1px dashed #344254;border-radius:9px;color:#788697;text-align:center}
.exp-earning-guide>p{display:flex;align-items:flex-start;gap:6px;margin:0;padding:9px 12px;border-top:1px solid #293340;background:#10151c;color:#ad9e7d;font-size:10px;line-height:1.45}.exp-earning-guide>p svg{flex:0 0 14px;width:14px;height:14px;color:#f1c66b}
@media(max-width:620px){.profile-level-card,.home-level-card{width:100%;max-width:100%;max-height:92dvh}.exp-earning-grid{grid-template-columns:minmax(0,1fr);padding:0 8px 10px}.exp-earning-grid>article{grid-template-columns:30px minmax(0,1fr);gap:7px 8px;padding:8px}.exp-earning-grid>article>svg{grid-row:1/span 2;padding:6px}.exp-earning-grid>article>b{grid-column:2;justify-self:start;white-space:normal;overflow-wrap:anywhere}.exp-earning-guide>header{padding-inline:10px}}
.daily-checkin-card{width:min(760px,calc(100vw - 22px));max-height:min(90vh,840px);overflow-y:auto;background:#0b0e12}.checkin-hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;background:linear-gradient(145deg,#17120a,#10141a)}.checkin-hero>div{min-width:0;display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #493d22;border-radius:9px;background:#17140e}.checkin-hero>div>svg{width:25px;height:25px;color:#ffd35c}.checkin-hero span{min-width:0;display:grid;gap:2px}.checkin-hero small{color:#978d76;font-size:9px}.checkin-hero strong{overflow:hidden;color:#ffe49a;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.checkin-reset-note{display:flex;align-items:flex-start;gap:6px;margin:10px 12px 0;padding:9px;border:1px solid #743c43;border-radius:7px;background:#241217;color:#ffabb2;font-size:10px;line-height:1.45}.checkin-reset-note svg{flex:0 0 auto;width:14px;height:14px}.checkin-week-list{display:grid;gap:10px;padding:12px}.checkin-week{overflow:hidden;border:1px solid #343e49;border-radius:10px;background:#101419}.checkin-week>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid #2e3741;background:#151a20}.checkin-week>header strong{color:#edf2f7;font-size:12px}.checkin-week>header span{color:#8f9aa7;font-size:9px}.checkin-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:8px}.checkin-day{position:relative;min-width:0;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px 3px;border:1px solid #303943;border-radius:8px;background:#0b0f13;color:#87919d;text-align:center}.checkin-day>i{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#1a2027;color:#677381;font-style:normal;font-size:11px;font-weight:900}.checkin-day strong{color:#c3ccd6;font-size:9px}.checkin-day small{color:#77828e;font-size:8px;line-height:1.3}.checkin-day.claimed{border-color:#2d7548;background:#102019}.checkin-day.claimed>i{background:#2c8b50;color:#fff}.checkin-day.claimed strong{color:#85e1a5}.checkin-day.available{border-color:#4f83bd;background:#101e2d;box-shadow:inset 0 0 14px #2c78c326}.checkin-day.available>i{background:#2f7fc8;color:#fff}.checkin-day.available strong{color:#9bd2ff}.checkin-day.week-finish{border-color:#b68b2c;background:radial-gradient(circle at 50% 8%,#5f4318,#211707 58%,#100e0b);box-shadow:inset 0 0 18px #ffcb4b21,0 0 13px #d49b2d25}.checkin-day.week-finish:before{content:"★";position:absolute;right:5px;top:3px;color:#ffe073;font-size:11px}.checkin-day.week-finish>i{background:linear-gradient(145deg,#ffe07a,#b46c13);color:#261500}.checkin-day.week-finish strong{color:#ffe39a}.checkin-day.week-finish small{color:#d1ae61}.checkin-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,240px);align-items:center;gap:10px;padding:12px;border-top:1px solid #303844;background:#101419}.checkin-footer>div{display:grid;gap:2px}.checkin-footer span{color:#8793a0;font-size:9px}.checkin-footer strong{color:#ffe071;font-size:13px}.checkin-footer .primary-button{min-height:42px}.checkin-footer .primary-button:disabled{border-color:#3d4650;background:#242a31;color:#7f8994;cursor:default}
@media(max-width:620px){.checkin-hero{grid-template-columns:1fr}.checkin-days{grid-template-columns:repeat(4,minmax(0,1fr))}.checkin-day{min-height:86px}.checkin-day.week-finish{grid-column:span 2}.checkin-footer{grid-template-columns:1fr}.checkin-footer .primary-button{width:100%}}

/* Personal and shared smiley library. */
.symbol-picker-toolbar { display: flex; gap: 6px; padding: 0 10px 9px; }
.symbol-picker-toolbar button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 10px; border: 1px solid #475160; border-radius: 5px; background: #18202a; color: #b9dcff; cursor: pointer; font-size: 11px; font-weight: 800; }
.symbol-picker-toolbar button:first-child { border-color: #72547f; background: #2a1b31; color: #ffc4e6; }
.symbol-picker-toolbar .smiley-category-delete { margin-left: auto; border-color: #713942; background: #291318; color: #ff9da7; }
.symbol-picker-toolbar .smiley-category-delete:hover:not(:disabled) { border-color: #bc5661; background: #421920; color: #ffd3d7; }
.symbol-picker-toolbar button:disabled { cursor: default; filter: grayscale(1); opacity: .42; }
.symbol-picker-browser { min-height: 260px; max-height: 330px; display: grid; grid-template-columns: 136px minmax(0,1fr); overflow: hidden; border-top: 1px solid #303844; background: #080b0e; }
.symbol-picker-groups { min-width: 0; max-height: 330px; display: flex; flex-direction: column; gap: 4px; padding: 6px; overflow-x: hidden; overflow-y: auto; border-right: 1px solid #303844; background: #0d1116; scrollbar-width: thin; scrollbar-color: #63445f transparent; }
.symbol-picker-groups::-webkit-scrollbar { display: block; width: 4px; }
.symbol-picker-groups button { width: 100%; min-height: 50px; display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 7px; padding: 4px; border-radius: 7px; text-align: left; }
.symbol-picker-groups button b { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border: 1px solid #303946; border-radius: 6px; background: #080b0e; font-size: 20px; line-height: 1; }
.symbol-picker-groups button b img { display: block; width: 100%; height: 100%; object-fit: contain; }
.symbol-picker-groups button > span { min-width: 0; display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.symbol-picker-groups button.active { border-color: #a34a88; background: linear-gradient(135deg,#3b1830,#231522); color: #ffb6df; }
.symbol-picker-results { min-width: 0; min-height: 260px; max-height: 330px; display: grid; overflow: hidden; }
.symbol-picker-results > .symbol-picker-grid, .symbol-picker-results > .symbol-picker-empty { grid-area: 1 / 1; }
.symbol-picker-results > .symbol-picker-empty { align-self: center; }
.symbol-picker-results > .symbol-picker-empty[hidden] { display: none; }
.symbol-picker-grid { --smiley-cell: 56px; grid-template-columns: repeat(auto-fill,minmax(var(--smiley-cell),1fr)); grid-auto-rows: var(--smiley-cell); justify-content: stretch; align-content: start; gap: 0; min-height: 0; max-height: 330px; padding: 0; border-top: 0; background: #080b0e; }
.symbol-picker-grid button { width: 100%; height: var(--smiley-cell); aspect-ratio: auto; min-height: var(--smiley-cell); overflow: hidden; padding: 0; border-color: #27313b; border-radius: 0; background: #101419; box-shadow: none; }
.symbol-picker-grid .smiley-image-entry { position: relative; display: block; width: 100%; height: var(--smiley-cell); min-width: 0; aspect-ratio: auto; }
.symbol-picker-grid .smiley-image-entry > .smiley-image-button { position: relative; width: 100%; height: 100%; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, filter .16s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.symbol-picker-grid .smiley-image-button.smiley-picked { z-index: 1; border-color: #ff8dcc; background: radial-gradient(circle, #542640, #251421 72%); box-shadow: inset 0 0 0 2px rgba(255,141,204,.3), 0 0 16px rgba(255,92,180,.58); animation: smiley-picked-pop .5s cubic-bezier(.2,.85,.28,1); }
@keyframes smiley-picked-pop { 0% { transform: scale(.78); filter: brightness(1.45); } 48% { transform: scale(1.09); filter: brightness(1.2); } 100% { transform: scale(1); filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .symbol-picker-grid .smiley-image-button.smiley-picked { animation: none; } }
.symbol-picker-grid .smiley-delete-button { position: absolute; z-index: 2; top: 1px; right: 1px; width: 16px; height: 16px; min-height: 0; padding: 0; border: 1px solid #ff9aa3; border-radius: 50%; background: #8f1f2be8; color: #fff; aspect-ratio: auto; font-size: 10px; font-weight: 900; line-height: 13px; box-shadow: 0 2px 7px #0008; }
.symbol-picker-grid .smiley-delete-button:hover { background: #d02f3f; }
.symbol-picker-grid .smiley-image-button img { display: block; width: 46px; height: 46px; max-width: 86%; max-height: 86%; object-fit: contain; }
.symbol-picker-card > footer span.error { color: #ff929c; }

/* Composer tool buttons are icon-only and easier to tap. */
[data-composer] .post-tools { min-width: 0; display: flex; flex-wrap: nowrap; gap: 5px; overflow-x: auto; scrollbar-width: none; }
[data-composer] .post-tools::-webkit-scrollbar { display: none; }
[data-composer] .post-tools button { flex: 0 0 42px; width: 42px; min-height: 42px; justify-content: center; padding: 0; }
[data-composer] .post-tools button > span { display: none !important; }
[data-composer] .post-tools button svg { width: 22px; height: 22px; }
[data-composer] .composer-symbol-tools { flex: 0 0 auto; margin: 0; padding: 0; border: 0; }

/* Feed post composer uses the same compact media controls as chat. */
.post-composer[data-composer] .post-tools { gap: 3px; }
.post-composer[data-composer] .post-tools button {
  flex: 0 0 30px;
  width: 30px;
  min-height: 30px;
  border-radius: 3px;
}
.post-composer[data-composer] .post-tools button svg { width: 15px; height: 15px; }
.post-composer[data-composer] .composer-actions { gap: 4px; margin-top: 5px; }
.post-composer[data-composer] .composer-visibility { width: 30px; height: 30px; flex-basis: 30px; }
.post-composer[data-composer] .composer-visibility-icon svg { width: 15px; height: 15px; }
.post-composer[data-composer] .submit-post { height: 30px; min-height: 30px; padding: 0 9px; font-size: 12px; }
.post-composer[data-composer] .submit-post { position: relative; isolation: isolate; min-width: 112px; overflow: hidden; }
:is(#direct-message-form,#quick-pm-form) .direct-send-button { position: relative; isolation: isolate; overflow: hidden; }
:is(#direct-message-form,#quick-pm-form) .direct-send-button.is-uploading { min-width: 96px; }
.post-composer[data-composer] .submit-post > *,
:is(#direct-message-form,#quick-pm-form) .direct-send-button > * { position: relative; z-index: 1; }
.post-composer[data-composer] .submit-post.is-uploading::before,
:is(#direct-message-form,#quick-pm-form) .direct-send-button.is-uploading::before { content: ""; position: absolute; z-index: 0; inset: 0 auto 0 0; width: var(--composer-upload-progress,0%); background: linear-gradient(90deg,#145aa9,#2f91ea); transition: width .18s ease-out; }
.post-composer[data-composer] .submit-post.is-uploading svg,
:is(#direct-message-form,#quick-pm-form) .direct-send-button.is-uploading svg { animation: feed-upload-spin 1.2s linear infinite; }
@media(prefers-reduced-motion:reduce){.feed-card-pending .feed-post-state > time svg,.post-composer[data-composer] .submit-post.is-uploading svg,:is(#direct-message-form,#quick-pm-form) .direct-send-button.is-uploading svg{animation:none}.feed-upload-state div > i > b,.post-composer[data-composer] .submit-post.is-uploading::before,:is(#direct-message-form,#quick-pm-form) .direct-send-button.is-uploading::before{transition:none}}

/* Compact toolbars for the full inbox composer and the floating PM window. */
#direct-message-form[data-composer] .post-tools,
#quick-pm-form[data-composer] .post-tools { gap: 3px; }
#direct-message-form[data-composer] .post-tools button,
#quick-pm-form[data-composer] .post-tools button {
  flex: 0 0 30px;
  width: 30px;
  min-height: 30px;
  border-radius: 3px;
}
#direct-message-form[data-composer] .post-tools button svg,
#quick-pm-form[data-composer] .post-tools button svg { width: 15px; height: 15px; }
#direct-message-form[data-composer] .composer-actions,
#quick-pm-form[data-composer] .composer-actions { gap: 4px; margin-top: 5px; }

/* Keep Chattop's media and formatting toolbar compact. */
#global-chat-form[data-composer] .post-tools,
#party-message-form[data-composer] .post-tools { gap: 3px; }
#global-chat-form[data-composer] .post-tools button,
#party-message-form[data-composer] .post-tools button {
  flex: 0 0 30px;
  width: 30px;
  min-height: 30px;
  border-radius: 3px;
}
#global-chat-form[data-composer] .post-tools button svg,
#party-message-form[data-composer] .post-tools button svg { width: 15px; height: 15px; }
#global-chat-form[data-composer] .composer-actions,
#party-message-form[data-composer] .composer-actions { gap: 4px; margin-top: 5px; }

/* Per-account height for message/chatbox composers only. */
[data-composer="globalChat"] .post-content,
[data-composer="roomChat"] .post-content,
[data-composer="loveChat"] .post-content,
[data-composer="direct"] .post-content,
[data-composer="quickPm"] .post-content,
[data-composer="group"] .post-content,
[data-composer="party"] .post-content,
[data-composer="anonymous"] .post-content,
[data-composer="caro"] .post-content,
[data-composer="race"] .post-content,
[data-composer="ludo"] .post-content,
[data-composer="loto"] .post-content,
[data-composer="tarot"] .post-content,
#drama-message-form textarea {
  height: var(--chat-input-height, 82px);
  min-height: var(--chat-input-height, 82px) !important;
  max-height: none !important;
  overflow-y: auto;
  resize: none !important;
}

/* Large, reliable drag target for temporary chat textarea resizing. */
.chat-resizable-composer .composer-row { position: relative; }
.chat-resizable-composer .post-content,
#drama-message-form textarea {
  padding-right: 42px !important;
  padding-bottom: 28px !important;
}
[data-composer].chat-resizable-composer .chat-resize-hint,
.drama-message-input .chat-resize-hint {
  position: absolute;
  z-index: 4;
  right: 4px;
  bottom: 4px;
  width: 38px;
  height: 26px;
  min-width: 38px;
  min-height: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  box-shadow: none;
}
[data-composer].chat-resizable-composer .chat-resize-hint:focus-visible,
.drama-message-input .chat-resize-hint:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(103, 184, 255, .55);
}
.chat-input-resizing,
.chat-input-resizing * { cursor: ns-resize !important; user-select: none !important; }
.drama-message-input .chat-resize-hint { order: initial; align-self: auto; }

/* Admin shared smiley manager. */
.admin-smiley-toolbar { padding: 9px 10px; border-bottom: 1px solid #303844; background: #10151a; }
.admin-smiley-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
.admin-smiley-head-actions button:disabled { cursor: default; opacity: .45; }
.admin-smiley-head-actions .admin-head-action.active { border-color: #5f9bd5; background: #16314a; color: #b8e0ff; }
.admin-smiley-head-actions .admin-smiley-category-delete { border-color: #713942; background: #291318; color: #ff9da7; }
.admin-smiley-categories { display: grid; grid-template-columns: repeat(auto-fill,minmax(62px,1fr)); gap: 8px; padding: 10px; border-bottom: 1px solid #2a323c; background: #0d1217; }
.admin-smiley-category-item { min-width: 0; display: grid; gap: 5px; }
.admin-smiley-category-tile { width: 100%; min-height: 62px; aspect-ratio: 1; display: grid; place-items: center; padding: 5px; overflow: hidden; border: 1px solid #36424e; border-radius: 9px; background: #151b21; color: #758493; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.admin-smiley-category-tile:hover { border-color: #57718a; background: #19232d; transform: translateY(-1px); }
.admin-smiley-category-tile.active { border-color: #65aeea; background: #17334b; box-shadow: 0 0 0 2px rgba(101,174,234,.14); }
.admin-smiley-category-tile img { width: 100%; height: 100%; max-height: 72px; object-fit: contain; border-radius: 5px; background: #f2f3f5; }
.admin-smiley-category-tile > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 5px; background: #11171d; }
.admin-smiley-category-tile svg { width: 23px; height: 23px; }
.admin-smiley-category-move { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.admin-smiley-category-move button { min-height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid #3b4855; border-radius: 6px; background: #171e25; color: #a9bdd0; cursor: pointer; }
.admin-smiley-category-move button:hover:not(:disabled) { border-color: #5791c2; background: #1a344b; color: #d7eeff; }
.admin-smiley-category-move button:disabled { cursor: default; opacity: .3; }
.admin-smiley-category-move svg { width: 15px; height: 15px; }
.admin-smiley-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 7px; padding: 10px; }
.admin-smiley-grid article { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid #303a45; border-radius: 8px; background: #f2f3f5; }
.admin-smiley-grid article > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.admin-smiley-delete { position: absolute; top: 4px; right: 4px; width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid #8b3f49; border-radius: 50%; background: rgba(54,17,23,.92); color: #ffb0b7; cursor: pointer; opacity: 0; transform: scale(.84); transition: opacity .15s ease, transform .15s ease; }
.admin-smiley-grid article:hover .admin-smiley-delete, .admin-smiley-delete:focus-visible { opacity: 1; transform: scale(1); }
.admin-smiley-delete:hover { border-color: #d46570; background: #551c25; color: #fff; }
.admin-smiley-delete svg { width: 13px; height: 13px; }
.admin-smiley-grid > .admin-empty, .admin-smiley-categories > .admin-empty { grid-column: 1/-1; }
@media(max-width:620px){.symbol-picker-grid{--smiley-cell:52px;grid-template-columns:repeat(auto-fill,minmax(var(--smiley-cell),1fr));gap:0}.symbol-picker-groups button span{display:inline}.admin-smiley-head-actions{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.admin-smiley-head-actions button{flex:0 0 auto}.admin-smiley-categories{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.admin-smiley-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-smiley-delete{opacity:1;transform:scale(1)}}
@media(max-width:620px){.symbol-picker-browser{grid-template-columns:92px minmax(0,1fr)}.symbol-picker-groups{gap:3px;padding:4px}.symbol-picker-groups button{min-height:62px;grid-template-columns:1fr;justify-items:center;gap:2px;padding:4px 2px}.symbol-picker-groups button b{width:36px;height:36px}.symbol-picker-groups button>span{display:block;width:100%;font-size:9px;text-align:center}}

/* Coin top-up page */
.topup-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px;overflow:hidden;background:radial-gradient(circle at 8% 20%,#7655173d,transparent 34%),linear-gradient(145deg,#19150c,#101419 64%);border-color:#574824}.topup-hero-icon{width:66px;height:66px;display:grid;place-items:center;border:1px solid #927329;border-radius:20px;background:linear-gradient(145deg,#443313,#1c1609);box-shadow:inset 0 0 18px #ffd35b1c,0 8px 24px #0007}.topup-hero-icon svg{width:34px;height:34px;color:#ffd45f}.topup-hero>div:nth-child(2){min-width:0;display:grid;gap:4px}.topup-hero>div:nth-child(2)>span{color:#d7ad45;font-size:9px;font-weight:900;letter-spacing:.11em}.topup-hero>div:nth-child(2)>strong{color:#fff1bd;font-family:Georgia,serif;font-size:21px}.topup-hero>div:nth-child(2)>p{margin:0;color:#9f998b;font-size:10px;line-height:1.55}.topup-hero>aside{min-width:142px;display:grid;gap:3px;padding:11px 13px;border:1px solid #66562b;border-radius:10px;background:#17140d;text-align:right}.topup-hero>aside small{color:#918872;font-size:9px}.topup-hero>aside strong{color:#ffe070;font-size:19px}.topup-panel{overflow:hidden}.topup-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:12px}.topup-guide article{min-width:0;display:flex;align-items:flex-start;gap:9px;padding:12px;border:1px solid #343e49;border-radius:10px;background:#11161c}.topup-guide article>svg{flex:0 0 auto;width:25px;height:25px;color:#e9be53}.topup-guide article>span{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 6px}.topup-guide b{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#775a1d;color:#ffe18a;font-size:9px}.topup-guide strong{color:#edf1f5;font-size:11px}.topup-guide small{grid-column:1/-1;color:#7f8a97;font-size:9px;line-height:1.45}.topup-contact-button{width:calc(100% - 24px);margin:0 12px;background:linear-gradient(135deg,#9b721e,#d29e32)!important;color:#160e02!important;box-shadow:0 7px 20px #8e691a2b}.topup-safety-note{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin:10px 12px 13px;color:#8d98a5;font-size:9px;text-align:center}.topup-safety-note svg{flex:0 0 auto;width:13px;height:13px;color:#64c989}
.topup-play-warning{min-height:150px;display:flex;align-items:center;justify-content:center;gap:12px;margin:0;padding:28px 18px;color:#ffe38b;text-align:center;background:radial-gradient(circle at 50% 50%,#7655172e,transparent 62%)}.topup-play-warning svg{flex:0 0 auto;width:31px;height:31px;color:#ffb84c;filter:drop-shadow(0 0 8px #e99b3f66)}.topup-play-warning strong{font-size:clamp(21px,4.8vw,30px);line-height:1.4;text-shadow:0 2px 12px #000}
.topup-content{display:grid;gap:12px;padding:12px}.topup-admin-preview{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #896b27;border-radius:9px;background:#2b210c;color:#ffe59a;font-size:11px;font-weight:750}.topup-admin-preview svg{flex:0 0 auto;width:17px;height:17px}.topup-closed{min-height:150px;display:flex;align-items:center;justify-content:center;gap:14px;padding:24px;border:1px dashed #5d4f31;border-radius:11px;background:radial-gradient(circle,#34270f66,transparent 70%);text-align:left}.topup-closed>svg{width:36px;height:36px;color:#d9ad4a}.topup-closed>div{display:grid;gap:4px}.topup-closed strong{color:#ffe7a2;font-size:17px}.topup-closed p{margin:0;color:#989181;font-size:11px}.topup-package-section{display:grid;gap:10px}.topup-package-section>header,.topup-user-history>header{display:flex;align-items:center;justify-content:space-between;gap:10px}.topup-package-section>header>div,.topup-user-history>header>div{display:grid;gap:2px}.topup-package-section>header strong,.topup-user-history>header strong{color:#eef3f8;font-size:13px}.topup-package-section>header span,.topup-user-history>header span{color:#778391;font-size:9px}.topup-package-section>header>svg{width:24px;height:24px;color:#d6aa42}.topup-package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.topup-package{position:relative;min-width:0;display:grid;gap:3px;padding:12px 34px 12px 12px;border:1px solid #3d4650;border-radius:10px;background:linear-gradient(145deg,#151b21,#0c1014);color:#fff;text-align:left;cursor:pointer}.topup-package:hover,.topup-package.active{border-color:#b98c30;background:linear-gradient(145deg,#30240d,#121419);box-shadow:inset 0 0 0 1px #e4ba5033}.topup-package>span{overflow:hidden;color:#8e9aa7;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.topup-package>strong{color:#ffe17e;font-size:18px}.topup-package>small{color:#9da7b2;font-size:9px}.topup-package>small b{color:#70e99a}.topup-package>svg{position:absolute;right:10px;top:50%;width:17px;height:17px;color:#8b7850;transform:translateY(-50%)}.topup-payment-card{overflow:hidden;border:1px solid #856627;border-radius:12px;background:#0c1014;box-shadow:0 12px 28px #0005}.topup-payment-card>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid #4d3d1b;background:linear-gradient(135deg,#2d210b,#14130f)}.topup-payment-card>header>div{display:grid;gap:2px}.topup-payment-card>header small{color:#c79a39;font-size:8px;font-weight:900;letter-spacing:.1em}.topup-payment-card>header strong{color:#fff0b8;font-size:13px}.topup-payment-card>header button{width:30px;height:30px;display:grid;place-items:center;border:1px solid #5d4c28;border-radius:7px;background:#17140e;color:#cdbd95;cursor:pointer}.topup-payment-card>header button svg{width:15px}.topup-payment-grid{display:grid;grid-template-columns:minmax(210px,280px) minmax(0,1fr);gap:14px;padding:14px}.topup-qr{display:grid;justify-items:center;align-content:start;gap:6px;padding:8px;border:1px solid #343d46;border-radius:10px;background:#fff}.topup-qr img{display:block;width:100%;max-width:260px;aspect-ratio:1/1;object-fit:contain}.topup-qr small{color:#4a5159;font-size:9px;font-weight:700}.topup-bank-details{display:grid;align-content:start;gap:7px}.topup-bank-details>p{min-height:44px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px;margin:0;padding:7px 10px;border:1px solid #303942;border-radius:8px;background:#12171c}.topup-bank-details>p>span{grid-column:1/-1;color:#788491;font-size:8px}.topup-bank-details>p>strong{min-width:0;overflow-wrap:anywhere;color:#edf3f8;font-size:12px}.topup-bank-details>p>button{width:28px;height:28px;display:grid;place-items:center;border:1px solid #485460;border-radius:6px;background:#1c242b;color:#aab8c5;cursor:pointer}.topup-bank-details>p>button svg{width:13px}.topup-bank-details>p.important{border-color:#987329;background:#2b210d}.topup-bank-details>p.important strong{color:#ffe485;font-size:15px;letter-spacing:.04em}.topup-bank-details>.primary-button{width:100%;min-height:42px}.topup-payment-note{display:flex;align-items:flex-start;gap:6px;margin:0;padding:10px 14px;border-top:1px solid #2b3239;background:#101419;color:#9ba6b0;font-size:9px;line-height:1.5}.topup-payment-note svg{flex:0 0 auto;width:14px;height:14px;color:#f0b94c}.topup-user-history{display:grid;gap:9px;padding-top:3px}.topup-user-history>header button{display:flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid #3c4650;border-radius:7px;background:#151b21;color:#aeb9c4;font-size:9px;cursor:pointer}.topup-user-history>header button svg{width:13px}.topup-history-list{display:grid;gap:6px}.topup-history-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border:1px solid #313a43;border-radius:9px;background:#10151a}.topup-history-row>svg{width:20px;height:20px;color:#98a5b1}.topup-history-row>div{min-width:0;display:grid;gap:2px}.topup-history-row strong{color:#edf3f8;font-size:11px}.topup-history-row strong span{color:#73de96}.topup-history-row small,.topup-history-row em{overflow:hidden;color:#7e8994;font-size:8px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.topup-history-row>b{padding:3px 7px;border-radius:999px;background:#29313a;color:#b7c2cc;font-size:8px}.topup-history-row.completed{border-color:#285c3b}.topup-history-row.completed>svg{color:#59d784}.topup-history-row.completed>b{background:#173d24;color:#77ef9b}.topup-history-row.rejected{border-color:#66333c}.topup-history-row.rejected>svg{color:#ee7181}.topup-history-row.rejected>b{background:#3a2025;color:#ff8d9a}.topup-empty-history{padding:18px!important}
.admin-topup-config .admin-settings-form{display:grid!important;padding:12px}.admin-topup-webhook{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.admin-topup-webhook button{display:flex;align-items:center;gap:5px;padding:0 11px;border:1px solid #475460;border-radius:7px;background:#1b222a;color:#dce6ef;cursor:pointer}.admin-topup-webhook button svg{width:14px}.admin-topup-packages{overflow:hidden}.admin-topup-package-head,.admin-topup-package-row{display:grid;grid-template-columns:minmax(130px,1.4fr) minmax(95px,1fr) minmax(95px,1fr) 72px 92px 112px;gap:6px;align-items:center}.admin-topup-package-head{padding:8px 12px;border-bottom:1px solid #2d353e;background:#10151a;color:#75818e;font-size:8px;font-weight:800;text-transform:uppercase}.admin-topup-package-row{padding:7px 12px;border-bottom:1px solid #252d35}.admin-topup-package-row.is-new{background:#171e25}.admin-topup-package-row>input{min-width:0;width:100%;min-height:36px;padding:6px 8px;border:1px solid #3a4652;border-radius:7px;background:#0d1217;color:#edf3f8}.admin-topup-active{display:flex;align-items:center;gap:5px;color:#aeb9c4;font-size:9px}.admin-topup-package-row>div{display:flex;justify-content:flex-end;gap:5px}.admin-topup-package-row button{min-height:34px;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 8px;border:1px solid #47535e;border-radius:7px;background:#19212a;color:#dce5ed;cursor:pointer;font-size:9px}.admin-topup-package-row button svg{width:13px}.admin-topup-package-row button.danger{color:#ff8796}.admin-topup-transactions td>small{display:block;margin-top:3px;color:#73808c;font-size:8px}.admin-topup-transactions code{overflow-wrap:anywhere;color:#ffe18a}.admin-topup-status{display:inline-flex;width:max-content;padding:3px 7px;border-radius:999px;font-size:8px}.admin-topup-status.completed{background:#173d24;color:#77ef9b}.admin-topup-status.rejected{background:#3a2025;color:#ff8d9a}.admin-topup-status.processing{background:#3c341c;color:#ffe18a}.admin-topup-depositor-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:10px}.admin-topup-depositor{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:9px;padding:10px;border:1px solid #343e48;border-radius:9px;background:#10151a;color:#dce5ed;text-align:left;cursor:pointer}.admin-topup-depositor:hover,.admin-topup-depositor.active{border-color:#a27b2d;background:#241c0d;box-shadow:inset 0 0 0 1px #d6a84222}.admin-topup-depositor-avatar{width:38px;height:38px;display:grid;place-items:center;overflow:hidden;border:1px solid #5a6570;border-radius:50%;background:#202832;color:#ffe18a;font-size:14px;font-weight:850}.admin-topup-depositor-avatar img{width:100%;height:100%;object-fit:cover}.admin-topup-depositor>span:nth-child(2){min-width:0;display:grid;gap:2px}.admin-topup-depositor strong,.admin-topup-depositor small,.admin-topup-depositor em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-topup-depositor strong{color:#f0f4f8;font-size:10px}.admin-topup-depositor small{color:#87939e;font-size:8px}.admin-topup-depositor em{color:#6fd590;font-size:8px;font-style:normal}.admin-topup-depositor time{color:#78838e;font-size:8px;white-space:nowrap}.admin-topup-depositor>svg{width:15px;color:#807251}.admin-topup-history-actions{display:flex;align-items:center;gap:7px}.admin-topup-history-actions button{display:flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid #46525d;border-radius:7px;background:#182029;color:#dce5ed;cursor:pointer;font-size:9px}.admin-topup-history-actions button svg{width:13px}.admin-topup-history-actions em{font-style:normal}
@media(max-width:620px){.topup-hero{grid-template-columns:auto minmax(0,1fr);padding:13px}.topup-hero-icon{width:54px;height:54px;border-radius:16px}.topup-hero>aside{grid-column:1/-1;min-width:0;text-align:left}.topup-guide{grid-template-columns:1fr}.topup-play-warning{min-height:130px;flex-direction:column;padding:24px 14px}.header-meta-button{padding-inline:5px}}
@media(max-width:760px){.topup-package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topup-payment-grid{grid-template-columns:1fr}.topup-qr{width:min(100%,300px);justify-self:center}.admin-topup-package-head{display:none}.admin-topup-package-row{grid-template-columns:1fr 1fr}.admin-topup-package-row>input:first-of-type{grid-column:1/-1}.admin-topup-package-row>div{grid-column:1/-1}.admin-topup-package-row>div button:first-child{flex:1}.admin-topup-active{justify-content:flex-end}.admin-topup-depositor-list{grid-template-columns:1fr}.admin-topup-transactions>header{align-items:flex-start;flex-direction:column}.admin-topup-history-actions{width:100%;justify-content:space-between}}
@media(max-width:430px){.topup-content{padding:8px}.topup-package-grid{grid-template-columns:1fr}.topup-history-row{grid-template-columns:auto minmax(0,1fr)}.topup-history-row>b{grid-column:2;justify-self:start}.admin-topup-webhook{grid-template-columns:1fr}.admin-topup-webhook button{min-height:38px;justify-content:center}}
.profile-panel.has-profile-skin .profile-cover{position:relative}

/* Ornate profile frame: metal rails, jewel corners and animated light beads */
.profile-skin-frame{display:none}
.profile-panel.has-profile-skin{--skin-metal:#d8ad5a;overflow:visible;border:3px double var(--skin-metal);border-radius:14px;outline:1px solid color-mix(in srgb,var(--skin-metal) 62%,#30200a);outline-offset:3px;box-shadow:inset 0 0 0 2px #050607,inset 0 0 32px color-mix(in srgb,var(--skin-primary) 23%,transparent),0 0 0 1px color-mix(in srgb,var(--skin-primary) 60%,transparent),0 0 34px color-mix(in srgb,var(--skin-primary) 32%,transparent)}
.profile-panel.has-profile-skin:after{inset:6px;border:1px solid color-mix(in srgb,var(--skin-metal) 75%,var(--skin-primary));border-radius:9px;box-shadow:inset 0 0 0 1px #0009,inset 0 0 24px color-mix(in srgb,var(--skin-secondary) 22%,transparent);opacity:.78}
.profile-panel.has-profile-skin .profile-skin-frame{display:block;position:absolute;inset:-8px;z-index:8;pointer-events:none;border:2px solid color-mix(in srgb,var(--skin-metal) 88%,#fff);border-radius:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--skin-metal) 48%,#2c1c08),0 0 12px color-mix(in srgb,var(--skin-metal) 42%,transparent)}
.profile-skin-frame>i{position:absolute;width:22px;height:22px;z-index:2;border:3px ridge color-mix(in srgb,var(--skin-metal) 82%,#fff4bd);border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0 7%,var(--skin-secondary) 12%,var(--skin-primary) 48%,#130516 70%);box-shadow:inset 0 0 4px #fff,0 0 8px var(--skin-secondary),0 0 17px var(--skin-primary);isolation:isolate;animation:profileGemPulse 2.1s ease-in-out infinite alternate}
.profile-skin-frame>i:before{content:"";position:absolute;inset:-10px;z-index:-1;border-radius:50%;background:repeating-conic-gradient(from 7deg,var(--skin-metal) 0 7deg,#4b2f0c 8deg 11deg,transparent 12deg 28deg);filter:drop-shadow(0 1px 1px #000)}
.profile-skin-frame>i:after{content:"";position:absolute;inset:3px;border:1px solid #fff9;border-radius:50%;box-shadow:inset -2px -2px 4px #0008}
.profile-skin-frame>.top-left{left:-7px;top:-7px}.profile-skin-frame>.top-right{right:-7px;top:-7px;animation-delay:-.7s}.profile-skin-frame>.bottom-left{left:-7px;bottom:-7px;animation-delay:-1.2s}.profile-skin-frame>.bottom-right{right:-7px;bottom:-7px;animation-delay:-1.7s}
.profile-skin-frame>span,.profile-skin-frame>b{position:absolute;display:block;opacity:.92;filter:drop-shadow(0 0 5px var(--skin-primary));animation:profileFrameChase 2.8s linear infinite}
.profile-skin-frame>span{left:28px;right:28px;height:7px;background:radial-gradient(circle,var(--skin-secondary) 0 1.5px,color-mix(in srgb,var(--skin-metal) 90%,#fff) 1.7px 2.4px,transparent 2.8px) 0 50%/13px 7px repeat-x}
.profile-skin-frame>span.top{top:-4px}.profile-skin-frame>span.bottom{bottom:-4px;animation-direction:reverse}
.profile-skin-frame>b{top:28px;bottom:28px;width:7px;background:radial-gradient(circle,var(--skin-secondary) 0 1.5px,color-mix(in srgb,var(--skin-metal) 90%,#fff) 1.7px 2.4px,transparent 2.8px) 50% 0/7px 13px repeat-y}
.profile-skin-frame>b.left{left:-4px}.profile-skin-frame>b.right{right:-4px;animation-direction:reverse}
.profile-panel.has-profile-skin>.panel-title{border-bottom:2px ridge color-mix(in srgb,var(--skin-metal) 76%,var(--skin-primary));background:linear-gradient(90deg,color-mix(in srgb,var(--skin-surface) 94%,#08090c),color-mix(in srgb,var(--skin-primary) 14%,#101319),color-mix(in srgb,var(--skin-surface) 94%,#08090c));box-shadow:inset 0 -5px 13px color-mix(in srgb,var(--skin-primary) 11%,transparent)}
.profile-panel.has-profile-skin .profile-cover{margin:7px 7px 0;border:2px ridge var(--skin-metal);border-radius:10px 10px 4px 4px;box-shadow:inset 0 0 0 2px #050608,inset 0 -30px 48px color-mix(in srgb,var(--skin-surface) 78%,transparent),0 0 18px color-mix(in srgb,var(--skin-primary) 25%,transparent)}
.profile-panel.has-profile-skin .profile-actions{margin-inline:9px;border:2px ridge color-mix(in srgb,var(--skin-metal) 82%,var(--skin-primary));box-shadow:inset 0 0 0 1px #000b,inset 0 0 15px color-mix(in srgb,var(--skin-primary) 14%,transparent),0 0 12px color-mix(in srgb,var(--skin-secondary) 12%,transparent)}
.profile-panel.has-profile-skin .profile-stats{position:relative;margin:9px;border:2px ridge color-mix(in srgb,var(--skin-metal) 80%,var(--skin-primary));border-radius:11px;background:linear-gradient(180deg,color-mix(in srgb,var(--skin-surface) 70%,#10141a),color-mix(in srgb,var(--skin-surface) 92%,#07090d));box-shadow:inset 0 0 0 1px #000b,inset 0 0 20px color-mix(in srgb,var(--skin-primary) 13%,transparent),0 0 12px color-mix(in srgb,var(--skin-primary) 15%,transparent)}

.level-skin-preview{--skin-metal:#d8ad5a;border:3px ridge var(--skin-metal);border-radius:17px;box-shadow:inset 0 0 0 2px #050609,inset 0 0 26px color-mix(in srgb,var(--skin-secondary) 28%,transparent),0 0 16px color-mix(in srgb,var(--skin-primary) 38%,transparent)}
.level-skin-preview:after{content:"";position:absolute;inset:13px 18px;z-index:1;border:4px double var(--skin-metal);border-radius:999px;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--skin-secondary) 24%,transparent),transparent 58%),linear-gradient(180deg,#fff1 0 12%,transparent 29% 68%,#0007);box-shadow:inset 0 0 0 2px #030406,inset 0 0 17px var(--skin-primary),0 0 10px color-mix(in srgb,var(--skin-metal) 60%,transparent)}
.level-skin-preview i,.level-skin-preview span{top:50%;width:17px;height:17px;z-index:3;border:3px ridge var(--skin-metal);border-radius:50%;background:radial-gradient(circle at 33% 27%,#fff 0 8%,var(--skin-secondary) 13%,var(--skin-primary) 49%,#120414 72%);box-shadow:inset 0 0 3px #fff,0 0 8px var(--skin-secondary),0 0 15px var(--skin-primary);transform:translateY(-50%);isolation:isolate;animation:profileGemPulse 1.8s ease-in-out infinite alternate}
.level-skin-preview i{left:5px}.level-skin-preview span{right:5px;animation-delay:-.9s}
.level-skin-preview i:before,.level-skin-preview span:before{content:"";position:absolute;inset:-8px;z-index:-1;border-radius:50%;background:repeating-conic-gradient(from 4deg,var(--skin-metal) 0 8deg,#56370f 9deg 12deg,transparent 13deg 30deg)}
.level-skin-preview b,.level-skin-preview em{left:27px;right:27px;width:auto;height:5px;z-index:3;border-radius:0;background:radial-gradient(circle,var(--skin-secondary) 0 1.3px,var(--skin-metal) 1.6px 2.1px,transparent 2.5px) 0 50%/12px 5px repeat-x;box-shadow:none;filter:drop-shadow(0 0 4px var(--skin-primary));animation:profileFrameChase 2.4s linear infinite}
.level-skin-preview b{top:5px;bottom:auto}.level-skin-preview em{top:auto;bottom:5px;animation-direction:reverse}
.level-skin-preview.compact{border-width:2px;border-radius:10px}.level-skin-preview.compact:after{inset:8px 10px;border-width:3px}.level-skin-preview.compact i,.level-skin-preview.compact span{width:10px;height:10px;border-width:2px}.level-skin-preview.compact i{left:2px}.level-skin-preview.compact span{right:2px}.level-skin-preview.compact i:before,.level-skin-preview.compact span:before{inset:-5px}.level-skin-preview.compact b,.level-skin-preview.compact em{left:15px;right:15px;height:3px;background-size:8px 3px}.level-skin-preview.compact b{top:2px}.level-skin-preview.compact em{bottom:2px}
.shop-demo-stage.profile-skin-demo{--skin-metal:#d8ad5a;border:3px ridge var(--skin-metal);border-radius:14px;box-shadow:inset 0 0 0 2px #050608,inset 0 0 28px color-mix(in srgb,var(--skin-secondary) 24%,transparent),0 0 16px color-mix(in srgb,var(--skin-primary) 35%,transparent)}
.shop-demo-stage.profile-skin-demo:before{content:"";position:absolute;inset:15px 12px;border:4px double var(--skin-metal);border-radius:999px;background:linear-gradient(180deg,#fff1,transparent 30% 70%,#0008);box-shadow:inset 0 0 14px var(--skin-primary),0 0 9px color-mix(in srgb,var(--skin-metal) 55%,transparent)}
.shop-demo-stage.profile-skin-demo:after{content:"";position:absolute;left:30px;right:30px;top:5px;height:5px;background:radial-gradient(circle,var(--skin-secondary) 0 1.3px,var(--skin-metal) 1.6px 2.1px,transparent 2.5px) 0 50%/12px 5px repeat-x;filter:drop-shadow(0 0 4px var(--skin-primary));animation:profileFrameChase 2.5s linear infinite}
.shop-demo-stage.profile-skin-demo>i{position:relative;z-index:2;width:24px;height:24px;flex:0 0 auto;border:4px ridge var(--skin-metal);background:radial-gradient(circle at 35% 28%,#fff 0 7%,var(--skin-secondary) 13%,var(--skin-primary) 50%,#120415 72%);box-shadow:inset 0 0 4px #fff,0 0 10px var(--skin-secondary),0 0 20px var(--skin-primary);isolation:isolate;animation:profileGemPulse 1.8s ease-in-out infinite alternate}
.shop-demo-stage.profile-skin-demo>i:before{content:"";position:absolute;inset:-10px;z-index:-1;border-radius:50%;background:repeating-conic-gradient(from 5deg,var(--skin-metal) 0 8deg,#55360e 9deg 12deg,transparent 13deg 29deg)}

@keyframes profileFrameChase{to{background-position:52px 50%}}
@keyframes profileGemPulse{to{filter:brightness(1.32) saturate(1.2);box-shadow:inset 0 0 5px #fff,0 0 13px var(--skin-secondary),0 0 24px var(--skin-primary)}}
.profile-panel.has-profile-skin[data-skin-animation="pulse"],.profile-panel.has-profile-skin[data-skin-animation="rainbow"]{animation:none}
.profile-panel.has-profile-skin[data-skin-animation="pulse"] .profile-skin-frame{animation:profileOrnateBreath 2.4s ease-in-out infinite alternate}
.profile-panel.has-profile-skin[data-skin-animation="rainbow"] .profile-skin-frame{animation:profileSkinHue 8s linear infinite}
@keyframes profileOrnateBreath{to{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--skin-metal) 60%,#fff),0 0 18px color-mix(in srgb,var(--skin-metal) 65%,transparent),0 0 30px color-mix(in srgb,var(--skin-primary) 42%,transparent)}}
@media(max-width:620px){.profile-panel.has-profile-skin .profile-skin-frame{inset:-5px}.profile-skin-frame>i{width:17px;height:17px;border-width:2px}.profile-skin-frame>i:before{inset:-7px}.profile-skin-frame>.top-left{left:-5px;top:-5px}.profile-skin-frame>.top-right{right:-5px;top:-5px}.profile-skin-frame>.bottom-left{left:-5px;bottom:-5px}.profile-skin-frame>.bottom-right{right:-5px;bottom:-5px}.profile-panel.has-profile-skin .profile-cover{margin-inline:5px}.profile-panel.has-profile-skin .profile-actions,.profile-panel.has-profile-skin .profile-stats{margin-inline:6px}}
@media(prefers-reduced-motion:reduce){.profile-skin-frame,.profile-skin-frame>i,.profile-skin-frame>span,.profile-skin-frame>b,.level-skin-preview i,.level-skin-preview span,.level-skin-preview b,.level-skin-preview em,.shop-demo-stage.profile-skin-demo:after,.shop-demo-stage.profile-skin-demo>i{animation:none!important}}

/* Chat room works like a full-page feed: no internal scroll frame. */
.chat-panel.chatroom-full { overflow: visible; }
.chat-panel.chatroom-full #room-chatbox-shell { width: 100%; }
.room-chat-heading-actions { display: flex; align-items: center; gap: 8px; }
.room-chat-heading-actions .refresh-action { padding-inline: 3px; }
.chat-panel.chatroom-full .chat-messages {
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
}
#chat-form.room-chat-composer[data-composer] .composer-actions {
  gap: 4px;
  margin-top: 5px;
  padding-left: 44px;
}
#chat-form.room-chat-composer[data-composer] .post-tools { gap: 3px; }
#chat-form.room-chat-composer[data-composer] .post-tools button {
  flex: 0 0 30px;
  width: 30px;
  min-height: 30px;
  border-radius: 3px;
}
#chat-form.room-chat-composer[data-composer] .post-tools button svg { width: 15px; height: 15px; }
#chat-form.room-chat-composer[data-composer] .submit-post {
  min-width: 54px;
  min-height: 32px;
  padding: 5px 8px;
  font-size: 10px;
}

/* Keep the attachment toolbar aligned with the textarea when an avatar
   occupies the first column, including narrow phones and the room chatbox. */
.content-composer-has-avatar .composer-actions {
  padding-left: 44px;
}

/* Home and Chat room composers use the full row without a leading avatar. */
#global-chat-form .content-composer-avatar,
#chat-form .content-composer-avatar {
  display: none;
}
#global-chat-form .composer-actions,
#chat-form.room-chat-composer[data-composer] .composer-actions {
  padding-left: 0;
}

/* Keep chatbox tool icons level with the send button in every chat area. */
:is([data-composer="globalChat"],[data-composer="roomChat"],[data-composer="loveChat"],[data-composer="direct"],[data-composer="quickPm"],[data-composer="group"],[data-composer="party"],[data-composer="anonymous"],[data-composer="drama"],[data-composer="caro"],[data-composer="race"],[data-composer="ludo"],[data-composer="loto"],[data-composer="tarot"]) .post-tools button {
  flex:0 0 38px !important;
  width:38px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 !important;
}
:is([data-composer="globalChat"],[data-composer="roomChat"],[data-composer="loveChat"],[data-composer="direct"],[data-composer="quickPm"],[data-composer="group"],[data-composer="party"],[data-composer="anonymous"],[data-composer="drama"],[data-composer="caro"],[data-composer="race"],[data-composer="ludo"],[data-composer="loto"],[data-composer="tarot"]) .post-tools button svg {
  width:19px !important;
  height:19px !important;
}
:is([data-composer="globalChat"],[data-composer="roomChat"],[data-composer="loveChat"],[data-composer="direct"],[data-composer="quickPm"],[data-composer="group"],[data-composer="party"],[data-composer="anonymous"],[data-composer="drama"],[data-composer="caro"],[data-composer="race"],[data-composer="ludo"],[data-composer="loto"],[data-composer="tarot"]) :is(.submit-post,.direct-send-button) {
  height:38px !important;
  min-height:38px !important;
}

/* Skin progression: preserve cover artwork, color only the identity strip, grow complexity with level */
.profile-panel.has-profile-skin{background:var(--surface);border:3px double var(--skin-metal)!important}
.profile-panel.has-profile-skin:before,.profile-panel.has-profile-skin .profile-cover:after{display:none}
.profile-panel.has-profile-skin>.panel-title{background:linear-gradient(#202329,#181b20);box-shadow:none}
.profile-panel.has-profile-skin .profile-cover{background-color:#17191e;box-shadow:inset 0 0 0 2px #050608,0 4px 10px #0008}
.profile-panel.has-profile-skin .profile-identity{background:#050607}
.profile-panel.has-profile-skin .profile-identity-copy{position:relative;padding:8px 11px;border:1px solid color-mix(in srgb,var(--skin-primary) 54%,var(--skin-metal));border-radius:11px;background:radial-gradient(circle at 12% 15%,color-mix(in srgb,var(--skin-secondary) 18%,transparent),transparent 34%),linear-gradient(100deg,color-mix(in srgb,var(--skin-surface) 88%,#090c11),color-mix(in srgb,var(--skin-primary) 15%,#090c11),color-mix(in srgb,var(--skin-surface) 92%,#090c11));box-shadow:inset 0 0 0 1px #0009,0 0 13px color-mix(in srgb,var(--skin-primary) 16%,transparent)}
.profile-panel.has-profile-skin .profile-actions{background:#080b0f}.profile-panel.has-profile-skin .profile-stats{background:linear-gradient(#0d1116,#07090c)}

/* Tier 1 — levels 10–20: restrained single frame, no jewels */
.profile-panel.has-profile-skin[data-skin-tier="1"]{border:1px solid color-mix(in srgb,var(--skin-metal) 72%,#6f7782)!important;outline:0;box-shadow:0 0 8px color-mix(in srgb,var(--skin-primary) 15%,transparent)}
.profile-panel[data-skin-tier="1"]:after{inset:3px;border-color:color-mix(in srgb,var(--skin-metal) 52%,#505862);box-shadow:none;opacity:.55}
.profile-panel[data-skin-tier="1"] .profile-skin-frame{inset:-2px;border-width:1px;border-radius:8px;box-shadow:none}
.profile-panel[data-skin-tier="1"] .profile-skin-frame>i,.profile-panel[data-skin-tier="1"] .profile-skin-frame>b,.profile-panel[data-skin-tier="1"] .profile-skin-frame>span.bottom{display:none}
.profile-panel[data-skin-tier="1"] .profile-skin-frame>span.top{left:18%;right:18%;top:-3px;height:5px;opacity:.36;animation:none}
.profile-panel[data-skin-tier="1"]>.panel-title{border-bottom:1px solid color-mix(in srgb,var(--skin-metal) 45%,#39414a)}
.profile-panel[data-skin-tier="1"] .profile-cover{margin:3px 3px 0;border:1px solid color-mix(in srgb,var(--skin-metal) 48%,#4b535e);border-radius:5px;box-shadow:none}
.profile-panel[data-skin-tier="1"] .profile-identity-copy{border-color:color-mix(in srgb,var(--skin-primary) 32%,#46505b);background:linear-gradient(100deg,#080b0f,color-mix(in srgb,var(--skin-primary) 8%,#080b0f));box-shadow:none}
.profile-panel[data-skin-tier="1"] .profile-wall-avatar{box-shadow:0 0 0 2px color-mix(in srgb,var(--skin-metal) 55%,#66717d)}
.profile-panel[data-skin-tier="1"] .profile-actions,.profile-panel[data-skin-tier="1"] .profile-stats{border:1px solid #343c45;box-shadow:none}

/* Tier 2 — levels 30–50: two corner stones and static bead rails */
.profile-panel.has-profile-skin[data-skin-tier="2"]{border:2px double var(--skin-metal)!important;outline-color:color-mix(in srgb,var(--skin-metal) 34%,#20252b);outline-offset:2px;box-shadow:0 0 13px color-mix(in srgb,var(--skin-primary) 20%,transparent)}
.profile-panel[data-skin-tier="2"] .profile-skin-frame{inset:-5px;border-width:1px;border-radius:12px;box-shadow:0 0 7px color-mix(in srgb,var(--skin-metal) 25%,transparent)}
.profile-panel[data-skin-tier="2"] .profile-skin-frame>.top-right,.profile-panel[data-skin-tier="2"] .profile-skin-frame>.bottom-left,.profile-panel[data-skin-tier="2"] .profile-skin-frame>b{display:none}
.profile-panel[data-skin-tier="2"] .profile-skin-frame>i{width:14px;height:14px;border-width:2px;animation:none}
.profile-panel[data-skin-tier="2"] .profile-skin-frame>i:before{display:none}
.profile-panel[data-skin-tier="2"] .profile-skin-frame>span{opacity:.58;animation:none}
.profile-panel[data-skin-tier="2"] .profile-identity-copy{background:radial-gradient(circle at 10% 20%,color-mix(in srgb,var(--skin-secondary) 12%,transparent),transparent 35%),linear-gradient(100deg,#080b0f,color-mix(in srgb,var(--skin-primary) 12%,#080b0f),#080b0f)}

/* Tier 3 — levels 60–90: full jewels, side rails and layered metal */
.profile-panel.has-profile-skin[data-skin-tier="3"]{border:3px double var(--skin-metal)!important;box-shadow:inset 0 0 0 1px #050607,0 0 20px color-mix(in srgb,var(--skin-primary) 26%,transparent)}
.profile-panel[data-skin-tier="3"] .profile-skin-frame>i{width:19px;height:19px}.profile-panel[data-skin-tier="3"] .profile-skin-frame>span,.profile-panel[data-skin-tier="3"] .profile-skin-frame>b{opacity:.72;animation-duration:4.5s}
.profile-panel[data-skin-tier="3"] .profile-skin-frame:before{content:"";position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--skin-primary) 42%,var(--skin-metal));border-radius:12px;box-shadow:inset 0 0 8px #0008}

/* Tier 4 — levels 100–120 and legendary events: royal frame */
.profile-panel.has-profile-skin[data-skin-tier="4"]{border:4px double var(--skin-metal)!important;outline-width:2px;outline-color:color-mix(in srgb,var(--skin-metal) 75%,#fff1b0);box-shadow:inset 0 0 0 2px #030405,0 0 13px color-mix(in srgb,var(--skin-metal) 38%,transparent),0 0 34px color-mix(in srgb,var(--skin-primary) 38%,transparent)}
.profile-panel[data-skin-tier="4"] .profile-skin-frame{inset:-10px;border-width:3px;box-shadow:inset 0 0 0 1px #3b260a,0 0 16px color-mix(in srgb,var(--skin-metal) 52%,transparent),0 0 28px color-mix(in srgb,var(--skin-primary) 24%,transparent)}
.profile-panel[data-skin-tier="4"] .profile-skin-frame:before{content:"";position:absolute;inset:6px;border:3px double color-mix(in srgb,var(--skin-primary) 58%,var(--skin-metal));border-radius:12px;box-shadow:inset 0 0 12px color-mix(in srgb,var(--skin-secondary) 22%,transparent)}
.profile-panel[data-skin-tier="4"] .profile-skin-frame:after{content:"";position:absolute;inset:-4px;border:1px dashed var(--skin-secondary);border-radius:21px;opacity:.5;filter:drop-shadow(0 0 5px var(--skin-primary));animation:profileRoyalOrbit 7s linear infinite}
.profile-panel[data-skin-tier="4"] .profile-skin-frame>i{width:25px;height:25px;border-width:4px}.profile-panel[data-skin-tier="4"] .profile-skin-frame>i:before{inset:-12px}.profile-panel[data-skin-tier="4"] .profile-skin-frame>span,.profile-panel[data-skin-tier="4"] .profile-skin-frame>b{opacity:1;animation-duration:2s}
.profile-panel[data-skin-tier="4"] .profile-identity-copy{border-width:2px;box-shadow:inset 0 0 0 1px #000c,inset 0 0 15px color-mix(in srgb,var(--skin-secondary) 13%,transparent),0 0 18px color-mix(in srgb,var(--skin-primary) 25%,transparent)}
@keyframes profileRoyalOrbit{to{filter:hue-rotate(360deg) drop-shadow(0 0 8px var(--skin-primary))}}

/* Unique silhouettes by theme */
.profile-panel[data-skin-pattern="abyss"] .profile-skin-frame,.level-skin-preview[data-skin-pattern="abyss"]{border-radius:5px}
.profile-panel[data-skin-pattern="hearts"] .profile-skin-frame>i{border-radius:50% 50% 12% 50%;transform:rotate(45deg)}.level-skin-preview[data-skin-pattern="hearts"] i,.level-skin-preview[data-skin-pattern="hearts"] span{border-radius:50% 50% 12% 50%;transform:translateY(-50%) rotate(45deg)}
.profile-panel[data-skin-pattern="frost"] .profile-skin-frame>i{border-radius:4px;transform:rotate(45deg)}.level-skin-preview[data-skin-pattern="frost"] i,.level-skin-preview[data-skin-pattern="frost"] span{border-radius:4px;transform:translateY(-50%) rotate(45deg)}
.profile-panel[data-skin-pattern="forest"] .profile-skin-frame{border-style:groove}.profile-panel[data-skin-pattern="coral"] .profile-skin-frame{border-style:dashed}.profile-panel[data-skin-pattern="ribbon"] .profile-skin-frame{border-style:ridge}
.profile-panel[data-skin-pattern="stars"] .profile-skin-frame>i:before,.profile-panel[data-skin-pattern="cosmos"] .profile-skin-frame>i:before{background:repeating-conic-gradient(from 0deg,var(--skin-metal) 0 5deg,#fff0 6deg 13deg,var(--skin-primary) 14deg 18deg,transparent 19deg 30deg)}
.profile-panel[data-skin-pattern="ocean"] .profile-skin-frame>span{background-size:18px 7px}.profile-panel[data-skin-pattern="galaxy"] .profile-skin-frame>span{background-size:9px 7px}

/* Preview cards follow the same progression */
.level-skin-preview,.shop-demo-stage.profile-skin-demo{background:#080a0e}
.level-profile-preview>div:last-child{border-color:color-mix(in srgb,var(--skin-metal,#d8ad5a) 55%,#ffffff26);background:linear-gradient(110deg,color-mix(in srgb,var(--skin-surface,#100720) 87%,#090b0f),color-mix(in srgb,var(--skin-primary,#8f6bff) 17%,#090b0f))}
.level-skin-preview[data-skin-tier="1"]{border:1px solid color-mix(in srgb,var(--skin-metal) 70%,#5d6570);box-shadow:none}.level-skin-preview[data-skin-tier="1"]:before,.level-skin-preview[data-skin-tier="1"] i,.level-skin-preview[data-skin-tier="1"] span,.level-skin-preview[data-skin-tier="1"] em{display:none}.level-skin-preview[data-skin-tier="1"]:after{inset:11px;border:1px solid color-mix(in srgb,var(--skin-metal) 65%,#606873);box-shadow:none;background:linear-gradient(180deg,#ffffff09,#0004)}.level-skin-preview[data-skin-tier="1"] b{left:25%;right:25%;top:3px;opacity:.3;animation:none}
.level-skin-preview[data-skin-tier="2"]{border:2px double var(--skin-metal);box-shadow:0 0 7px color-mix(in srgb,var(--skin-primary) 18%,transparent)}.level-skin-preview[data-skin-tier="2"]:before,.level-skin-preview[data-skin-tier="2"] i:before,.level-skin-preview[data-skin-tier="2"] span:before,.level-skin-preview[data-skin-tier="2"] em{display:none}.level-skin-preview[data-skin-tier="2"] i,.level-skin-preview[data-skin-tier="2"] span{width:11px;height:11px;border-width:2px;animation:none}.level-skin-preview[data-skin-tier="2"] b{opacity:.5;animation:none}
.level-skin-preview[data-skin-tier="3"]:before{opacity:.13}.level-skin-preview[data-skin-tier="3"] i,.level-skin-preview[data-skin-tier="3"] span{width:15px;height:15px}.level-skin-preview[data-skin-tier="3"] b,.level-skin-preview[data-skin-tier="3"] em{opacity:.72;animation-duration:4s}
.level-skin-preview[data-skin-tier="4"]{border-width:4px;box-shadow:inset 0 0 0 2px #030405,inset 0 0 22px color-mix(in srgb,var(--skin-secondary) 25%,transparent),0 0 20px color-mix(in srgb,var(--skin-primary) 45%,transparent)}.level-skin-preview[data-skin-tier="4"]:before{opacity:.34}.level-skin-preview[data-skin-tier="4"]:after{inset:10px 15px;border-width:5px;box-shadow:inset 0 0 0 2px #020304,inset 0 0 18px var(--skin-primary),0 0 13px var(--skin-metal)}.level-skin-preview[data-skin-tier="4"] i,.level-skin-preview[data-skin-tier="4"] span{width:21px;height:21px;border-width:4px}.level-skin-preview[data-skin-tier="4"] b,.level-skin-preview[data-skin-tier="4"] em{height:7px;opacity:1}
.shop-demo-stage.profile-skin-demo[data-skin-tier="1"]{border:1px solid var(--skin-metal);box-shadow:none}.shop-demo-stage.profile-skin-demo[data-skin-tier="1"]>i,.shop-demo-stage.profile-skin-demo[data-skin-tier="1"]:after{display:none}.shop-demo-stage.profile-skin-demo[data-skin-tier="1"]:before{border-width:1px;box-shadow:none}
.shop-demo-stage.profile-skin-demo[data-skin-tier="2"]>i:before,.shop-demo-stage.profile-skin-demo[data-skin-tier="2"]:after{display:none}.shop-demo-stage.profile-skin-demo[data-skin-tier="2"]>i{width:15px;height:15px;border-width:2px;animation:none}
.shop-demo-stage.profile-skin-demo[data-skin-tier="4"]{border-width:4px;box-shadow:inset 0 0 0 2px #020304,0 0 20px color-mix(in srgb,var(--skin-primary) 42%,transparent)}.shop-demo-stage.profile-skin-demo[data-skin-tier="4"]>i{width:31px;height:31px}.shop-demo-stage.profile-skin-demo[data-skin-tier="4"]:before{border-width:5px}.shop-demo-stage.profile-skin-demo[data-skin-tier="4"]:after{height:7px;opacity:1}
@media(max-width:620px){.profile-panel[data-skin-tier="4"] .profile-skin-frame{inset:-7px}.profile-panel[data-skin-tier="4"] .profile-skin-frame>i{width:20px;height:20px;border-width:3px}.profile-panel[data-skin-tier="4"] .profile-skin-frame>i:before{inset:-9px}.level-skin-preview.compact[data-skin-tier="4"]{border-width:3px}.level-skin-preview.compact[data-skin-tier="4"]:after{inset:7px 9px;border-width:3px}.level-skin-preview.compact[data-skin-tier="4"] i,.level-skin-preview.compact[data-skin-tier="4"] span{width:13px;height:13px;border-width:2px}.level-skin-preview.compact[data-skin-tier="4"] b,.level-skin-preview.compact[data-skin-tier="4"] em{height:4px}}
@media(prefers-reduced-motion:reduce){.profile-panel[data-skin-tier="4"] .profile-skin-frame:after{animation:none!important}}

/* Performance mode: ornate skins are static; interaction uses short transitions only */
.profile-panel.has-profile-skin,
.profile-panel.has-profile-skin .profile-skin-frame,
.profile-panel.has-profile-skin .profile-skin-frame:before,
.profile-panel.has-profile-skin .profile-skin-frame:after,
.profile-panel.has-profile-skin .profile-skin-frame>i,
.profile-panel.has-profile-skin .profile-skin-frame>i:before,
.profile-panel.has-profile-skin .profile-skin-frame>i:after,
.profile-panel.has-profile-skin .profile-skin-frame>span,
.profile-panel.has-profile-skin .profile-skin-frame>b,
.level-skin-preview,
.level-skin-preview:before,
.level-skin-preview:after,
.level-skin-preview i,
.level-skin-preview i:before,
.level-skin-preview span,
.level-skin-preview span:before,
.level-skin-preview b,
.level-skin-preview em,
.shop-demo-stage.profile-skin-demo,
.shop-demo-stage.profile-skin-demo:before,
.shop-demo-stage.profile-skin-demo:after,
.shop-demo-stage.profile-skin-demo>i,
.shop-demo-stage.profile-skin-demo>i:before{animation:none!important}
.level-skin-preview.compact{contain:paint}
.level-skin-preview.compact:before{display:none!important}
.level-skin-preview.compact b,.level-skin-preview.compact em{filter:none;box-shadow:none}
.level-skin-preview.compact i,.level-skin-preview.compact span{box-shadow:inset 0 0 2px #fff,0 0 5px var(--skin-primary)}
.admin-profile-skin-list,.level-skin-grid{contain:layout style}
.profile-skin-frame>i,.level-skin-preview,.shop-demo-stage.profile-skin-demo{transition:filter .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
@media(hover:hover){.profile-panel.has-profile-skin:hover .profile-skin-frame>i{filter:brightness(1.16)}.level-skin-item:hover .level-skin-preview,.admin-profile-skin-list>article:hover .level-skin-preview{border-color:color-mix(in srgb,var(--skin-metal) 72%,#fff);transform:translateY(-1px)}.shop-demo-stage.profile-skin-demo:hover{border-color:color-mix(in srgb,var(--skin-metal) 75%,#fff)}}
.level-skin-item:active .level-skin-preview,.admin-profile-skin-list>article:active .level-skin-preview{filter:brightness(1.1);transform:scale(.985)}

/* Exclusive Admin profile frame — static red-gold royal crest */
.profile-panel.has-profile-skin[data-skin-role="admin"]{border-color:#e6b94f!important;outline-color:#ffe89a;box-shadow:inset 0 0 0 2px #23050a,0 0 12px #e6b94f59,0 0 24px #ff40583d}
.profile-panel[data-skin-role="admin"]>.panel-title{border-bottom-color:#e6b94f;color:#ffd96a}
.profile-panel[data-skin-role="admin"] .profile-skin-frame{border-style:double;border-color:#ffe082;box-shadow:inset 0 0 0 1px #5d3006,0 0 13px #e6b94f66}
.profile-panel[data-skin-role="admin"] .profile-skin-frame:before{border-color:#ff4058;box-shadow:inset 0 0 0 1px #ffe082,inset 0 0 10px #ff405829}
.profile-panel[data-skin-role="admin"] .profile-skin-frame>i{background:radial-gradient(circle at 33% 27%,#fff7c9 0 8%,#ffd96a 12%,#ff4058 48%,#4b0710 72%)}
.profile-panel[data-skin-role="admin"] .profile-skin-frame>i:before{background:repeating-conic-gradient(from 0deg,#ffe082 0 6deg,#8f5509 7deg 10deg,transparent 11deg 24deg)}
.profile-panel[data-skin-role="admin"] .profile-skin-frame>span.top:after{content:"♛";position:absolute;left:50%;top:-19px;min-width:34px;padding:0 6px;border:2px ridge #e6b94f;border-radius:4px;background:#26070d;color:#ffd96a;font-size:17px;font-style:normal;line-height:23px;text-align:center;text-shadow:0 1px #000;transform:translateX(-50%)}
.profile-panel[data-skin-role="admin"] .profile-identity-copy{border-color:#e6b94f;background:radial-gradient(circle at 12% 18%,#ff405829,transparent 35%),linear-gradient(100deg,#17070a,#350b13,#160609);box-shadow:inset 0 0 0 1px #000,0 0 13px #ff405829}
.level-skin-preview[data-skin-role="admin"],.shop-demo-stage.profile-skin-demo[data-skin-role="admin"]{border-color:#ffe082;background:linear-gradient(145deg,#25070d,#08090c);box-shadow:inset 0 0 0 2px #24050a,inset 0 0 17px #ff405824,0 0 11px #e6b94f4d}
.level-skin-preview[data-skin-role="admin"]:after,.shop-demo-stage.profile-skin-demo[data-skin-role="admin"]:before{border-color:#e6b94f;box-shadow:inset 0 0 0 2px #26070d,inset 0 0 12px #ff40583b}
.level-skin-preview[data-skin-role="admin"] i,.level-skin-preview[data-skin-role="admin"] span,.shop-demo-stage.profile-skin-demo[data-skin-role="admin"]>i{background:radial-gradient(circle at 33% 27%,#fff7c9 0 8%,#ffd96a 12%,#ff4058 48%,#4b0710 72%)}
.level-skin-preview[data-skin-role="admin"] b:after{content:"♛";position:absolute;left:50%;top:7px;padding:1px 7px;border:1px solid #e6b94f;border-radius:3px;background:#26070d;color:#ffd96a;font-size:13px;font-style:normal;line-height:18px;transform:translateX(-50%)}
.level-skin-preview.compact[data-skin-role="admin"] b:after{top:4px;padding:0 4px;font-size:8px;line-height:12px}
.shop-demo-stage.profile-skin-demo[data-skin-role="admin"]>span:after{content:"♛ ĐỘC QUYỀN ADMIN";display:block;margin-top:4px;color:#ffd96a;font-size:8px;font-weight:900;letter-spacing:.06em}

/* Admin frame refinement: lighter structure with a red-dominant palette */
.profile-panel.has-profile-skin[data-skin-role="admin"]{border:2px double var(--skin-metal)!important;outline:1px solid #db4a5b;outline-offset:2px;box-shadow:inset 0 0 0 1px #26050b,0 0 12px color-mix(in srgb,var(--skin-primary) 32%,transparent)}
.profile-panel[data-skin-role="admin"]>.panel-title{border-bottom:1px solid var(--skin-metal);color:#ff8797}
.profile-panel[data-skin-role="admin"] .profile-skin-frame{inset:-5px;border:2px double var(--skin-metal);border-radius:12px;box-shadow:0 0 8px color-mix(in srgb,var(--skin-primary) 28%,transparent)}
.profile-panel[data-skin-role="admin"] .profile-skin-frame:before{inset:4px;border:1px solid color-mix(in srgb,var(--skin-secondary) 65%,var(--skin-metal));box-shadow:none}
.profile-panel[data-skin-role="admin"] .profile-skin-frame:after,.profile-panel[data-skin-role="admin"] .profile-skin-frame>.top-right,.profile-panel[data-skin-role="admin"] .profile-skin-frame>.bottom-left,.profile-panel[data-skin-role="admin"] .profile-skin-frame>b{display:none}
.profile-panel[data-skin-role="admin"] .profile-skin-frame>i{width:15px;height:15px;border:2px solid #cb4453;background:radial-gradient(circle at 33% 27%,#ffd5da 0 8%,var(--skin-secondary) 15%,var(--skin-primary) 52%,#4b0710 75%);box-shadow:inset 0 0 2px #fff,0 0 6px color-mix(in srgb,var(--skin-primary) 55%,transparent)}
.profile-panel[data-skin-role="admin"] .profile-skin-frame>i:before{display:none}
.profile-panel[data-skin-role="admin"] .profile-skin-frame>span{opacity:.48;filter:none}
.profile-panel[data-skin-role="admin"] .profile-skin-frame>span.top:after{top:-15px;min-width:28px;padding:0 4px;border:1px solid #d18b39;background:#29060c;color:#ffd27b;font-size:14px;line-height:19px}
.profile-panel[data-skin-role="admin"] .profile-identity-copy{border:1px solid #b83a48;background:radial-gradient(circle at 12% 18%,#ff6f8224,transparent 35%),linear-gradient(100deg,#170509,#360912,#180509);box-shadow:inset 0 0 0 1px #000,0 0 8px #e31b3d26}
.level-skin-preview[data-skin-role="admin"],.shop-demo-stage.profile-skin-demo[data-skin-role="admin"]{border:2px double var(--skin-metal);background:linear-gradient(145deg,#27060d,#0a090c);box-shadow:inset 0 0 0 1px #26050a,inset 0 0 10px color-mix(in srgb,var(--skin-primary) 20%,transparent),0 0 7px color-mix(in srgb,var(--skin-primary) 24%,transparent)}
.level-skin-preview[data-skin-role="admin"]:before{display:none}.level-skin-preview[data-skin-role="admin"]:after,.shop-demo-stage.profile-skin-demo[data-skin-role="admin"]:before{border:2px solid var(--skin-metal);box-shadow:inset 0 0 8px color-mix(in srgb,var(--skin-primary) 25%,transparent)}
.level-skin-preview[data-skin-role="admin"] i,.level-skin-preview[data-skin-role="admin"] span{width:12px;height:12px;border:2px solid #cb4453;background:radial-gradient(circle at 33% 27%,#ffd5da 0 8%,var(--skin-secondary) 15%,var(--skin-primary) 52%,#4b0710 75%);box-shadow:0 0 4px color-mix(in srgb,var(--skin-primary) 50%,transparent)}
.level-skin-preview[data-skin-role="admin"] i:before,.level-skin-preview[data-skin-role="admin"] span:before,.level-skin-preview[data-skin-role="admin"] em{display:none}
.level-skin-preview[data-skin-role="admin"] b{opacity:.4;filter:none}.level-skin-preview[data-skin-role="admin"] b:after{border-color:#c98a3b;background:#28060c;color:#ffd27b}
.shop-demo-stage.profile-skin-demo[data-skin-role="admin"]:after,.shop-demo-stage.profile-skin-demo[data-skin-role="admin"]>i:before{display:none}
.shop-demo-stage.profile-skin-demo[data-skin-role="admin"]>i{width:17px;height:17px;border:2px solid #cb4453;background:radial-gradient(circle at 33% 27%,#ffd5da 0 8%,var(--skin-secondary) 15%,var(--skin-primary) 52%,#4b0710 75%);box-shadow:0 0 5px color-mix(in srgb,var(--skin-primary) 45%,transparent)}

/* Full-screen Admin Workspace */
body.admincp-open {
  overflow: hidden;
  background: #080b12;
}
body.admincp-open .ambient,
body.admincp-open .site-header,
body.admincp-open .site-footer {
  display: none !important;
}
body.admincp-open .app-shell {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  border: 0;
  background: #080b12;
  box-shadow: none;
}
body.admincp-open #main-content {
  padding: 0;
}
.admincp-view.active {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: block;
  margin: 0 !important;
  background: #080b12;
  font-size: 14px;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
}
.admincp-shell {
  width: 100%;
  height: 100dvh;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  overflow: hidden;
  background: #080b12;
}
.admincp-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid #242c3b;
  background:
    radial-gradient(circle at 0 0, rgba(239, 68, 88, .15), transparent 35%),
    linear-gradient(180deg, #111723, #0a0e16 72%);
  box-shadow: 16px 0 50px rgba(0, 0, 0, .18);
}
.admincp-brand {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #242c3b;
}
.admincp-brand > span {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 101, 119, .48);
  border-radius: 14px;
  background: linear-gradient(145deg, #5d1824, #2b1018);
  color: #ff7a8a;
  box-shadow: 0 10px 30px rgba(190, 36, 61, .2), inset 0 1px rgba(255,255,255,.08);
}
.admincp-brand > span svg { width: 23px; height: 23px; }
.admincp-brand div { min-width: 0; }
.admincp-brand strong,
.admincp-brand small { display: block; }
.admincp-brand strong { color: #f7f8fb; font-size: 16px; letter-spacing: -.02em; }
.admincp-brand small { margin-top: 4px; color: #778397; font-size: 11px; }
.admincp-sidebar-label {
  padding: 18px 18px 8px;
  color: #5f6c80;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.admincp-tabs {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding: 4px 10px 16px;
  border: 0;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: #334055 transparent;
}
.admincp-tabs button {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-height: 43px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #8c98aa;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  transition: .18s ease;
}
.admincp-tabs button:hover {
  border-color: #293449;
  background: rgba(38, 48, 65, .58);
  color: #e9edf5;
  transform: translateX(2px);
}
.admincp-tabs button.active {
  border-color: rgba(244, 81, 103, .34);
  background: linear-gradient(100deg, rgba(114, 27, 41, .75), rgba(50, 24, 33, .45));
  color: #ff9aa7;
  box-shadow: inset 3px 0 #f45167, 0 8px 24px rgba(0, 0, 0, .12);
}
.admincp-tabs button svg { width: 17px; height: 17px; }
.admincp-tabs button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admincp-tab-group { flex: 0 0 auto; min-width: 0; border: 1px solid transparent; border-radius: 12px; transition: .18s ease; }
.admincp-tab-group.is-open,
.admincp-tab-group.has-active { border-color: #273247; background: rgba(13, 18, 28, .74); }
.admincp-tabs .admincp-group-toggle { min-height: 57px; }
.admincp-tabs .admincp-group-toggle > span { flex: 1; display: block; }
.admincp-tabs .admincp-group-toggle strong,
.admincp-tabs .admincp-group-toggle small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admincp-tabs .admincp-group-toggle strong { color: inherit; font-size: 13px; }
.admincp-tabs .admincp-group-toggle small { margin-top: 3px; color: #647187; font-size: 10px; font-weight: 550; }
.admincp-tabs .admincp-group-toggle:hover { transform: none; }
.admincp-tabs .admincp-tab-group.has-active > .admincp-group-toggle { color: #ff9aa7; }
.admincp-tabs .admincp-tab-group.has-active > .admincp-group-toggle small { color: #ae7180; }
.admincp-group-chevron { flex: 0 0 auto; width: 15px !important; height: 15px !important; transition: transform .2s ease; }
.admincp-tab-group.is-open .admincp-group-chevron { transform: rotate(180deg); }
.admincp-group-children { max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: max-height .25s ease, opacity .18s ease, padding .2s ease, visibility 0s linear .25s; }
.admincp-tab-group.is-open .admincp-group-children { max-height: 320px; padding: 0 6px 7px 17px; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.admincp-tabs .admincp-group-children > button { min-height: 36px; margin-top: 2px; padding: 6px 9px; border-radius: 8px; font-size: 12px; }
.admincp-tabs .admincp-group-children > button::before { content: ""; position: absolute; left: -10px; width: 7px; height: 1px; background: #39465c; }
.admincp-tabs .admincp-group-children > button svg { width: 14px; height: 14px; }
.admincp-tabs .admincp-group-children > button.active { box-shadow: inset 2px 0 #f45167; }
.admincp-sidebar-label-inline { flex: 0 0 auto; width: 100%; padding: 18px 8px 7px; }
.admincp-sidebar-footer {
  padding: 12px;
  border-top: 1px solid #242c3b;
}
.admincp-sidebar-footer button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid #303a4c;
  border-radius: 10px;
  background: #151b27;
  color: #a9b3c2;
  cursor: pointer;
  font-size: 13px;
}
.admincp-sidebar-footer svg { width: 16px; }
.admincp-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr);
  background:
    radial-gradient(circle at 100% 0, rgba(51, 96, 171, .12), transparent 30%),
    #080b12;
}
.admincp-topbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 22px;
  border-bottom: 1px solid #242c3b;
  background: rgba(13, 18, 28, .88);
  backdrop-filter: blur(18px);
}
.admincp-topbar > div { min-width: 0; flex: 1; }
.admincp-topbar small,
.admincp-topbar strong { display: block; }
.admincp-topbar small { color: #68758a; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.admincp-topbar strong { margin-top: 3px; color: #f5f7fb; font-size: 18px; letter-spacing: -.025em; }
.admincp-topbar nav { display: flex; gap: 7px; }
.admincp-topbar nav button,
.admincp-menu-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid #303b50;
  border-radius: 10px;
  background: #151c29;
  color: #aeb9c9;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.admincp-topbar nav button:hover,
.admincp-menu-toggle:hover { border-color: #4a5c78; color: #fff; }
.admincp-topbar nav button:last-child { border-color: #5a3039; background: #28151b; color: #ff8f9c; }
.admincp-topbar svg,
.admincp-menu-toggle svg { width: 15px; height: 15px; }
.admincp-menu-toggle { display: none; width: 39px; padding: 0; }
.admincp-content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 22px;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: #37445a transparent;
}
.admincp-content :where(button, input, select, textarea, label, p, span, small, em, code, time, td, th, li) {
  font-size: clamp(13px, .75vw, 15px) !important;
  line-height: 1.45;
}
.admincp-content :where(strong) { font-size: clamp(14px, .82vw, 16px) !important; line-height: 1.4; }
.admincp-content > * { width: min(100%, 1500px); margin-inline: auto; }
.admincp-content > .empty-state { min-height: calc(100dvh - 116px); display: grid; place-items: center; }
.admincp-content .admin-section-head {
  min-height: 82px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid #293447;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(24, 31, 45, .95), rgba(13, 18, 28, .95));
  box-shadow: 0 16px 45px rgba(0, 0, 0, .18);
}
.admincp-content .admin-section-head strong { font-size: 20px !important; }
.admincp-content .admin-section-head span { max-width: 780px; margin-top: 5px; font-size: 12px; }
.admincp-content .admin-section-head > em,
.admin-head-action {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid #663a44;
  border-radius: 999px;
  background: #321821;
  color: #ff9aa6;
  cursor: pointer;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.admin-head-actions { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.admin-head-actions > em {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid #663a44;
  border-radius: 999px;
  background: #321821;
  color: #ff9aa6;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.admin-head-action svg { width: 14px; height: 14px; }
.admincp-content.admin-content-enter { animation: admin-content-in .18s ease-out; }
@keyframes admin-content-in { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.admincp-content .admin-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 0 16px; }
.admincp-content .admin-stat-card {
  min-height: 116px;
  padding: 16px;
  border-color: #293548;
  border-radius: 14px;
  background: linear-gradient(145deg, #151c29, #0d121c);
  box-shadow: 0 14px 35px rgba(0, 0, 0, .16);
}
.admincp-content .admin-stat-card > svg { width: 25px; height: 25px; }
.admincp-content .admin-stat-card span { font-size: 12px; }
.admincp-content .admin-stat-card strong { font-size: 24px !important; }
.admincp-content .admin-stat-card small { font-size: 11px; }
.admincp-content .admin-two-column { gap: 14px; padding: 0; }
.admincp-content .admin-subpanel,
.admincp-content .admin-editor-form,
.admincp-content .admin-skin-code-editor,
.admincp-content .admin-skin-prices,
.admincp-content .admin-skin-request {
  border-color: #293548;
  border-radius: 14px;
  background: #0d121b;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
}
.admincp-content .admin-subpanel > header { min-height: 50px; padding: 11px 14px; background: #151c27; }
.admincp-content .admin-subpanel > header strong { font-size: 14px; }
.admincp-content .admin-search-form {
  position: sticky;
  z-index: 3;
  top: -22px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #293548;
  border-radius: 14px;
  background: rgba(14, 19, 29, .92);
  backdrop-filter: blur(14px);
}
.admincp-content .admin-user-list,
.admincp-content .admin-catalog-list,
.admincp-content .admin-game-list,
.admincp-content .admin-profile-skin-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 0 16px; }
.admincp-content .admin-user-card,
.admincp-content .admin-catalog-list > article,
.admincp-content .admin-game-list > article,
.admincp-content .admin-profile-skin-list > article {
  border-color: #2b374a;
  border-radius: 14px;
  background: linear-gradient(145deg, #121924, #0c1119);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
}
.admincp-content .admin-user-card > header { min-height: 76px; padding: 12px 14px; border: 0; background: transparent; }
.admin-user-card-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.admin-user-card-actions em { font-size: 9px; font-style: normal; font-weight: 800; }
.admin-user-manage-button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid #3b587a !important;
  border-radius: 8px !important;
  background: #14263a !important;
  color: #9dccff !important;
  font-size: 9px !important;
  font-weight: 800;
}
.admin-user-manage-button svg { width: 13px; }
.admincp-content .admin-coin-history { margin: 0; }
.admincp-content .admin-storage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 0 16px; }
.admincp-content .admin-cache-actions { gap: 12px; padding: 0 0 16px; }
.admincp-content .admin-cache-actions strong { font-size: 14px; }
.admincp-content .admin-cache-actions span { font-size: 11px; }
.admincp-content > .admin-subpanel { margin: 0 auto 16px; }
.admin-access-unlock-search { grid-template-columns: minmax(0, 1fr) auto auto !important; }
.admin-access-unlock-search button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 13px; border: 1px solid #3a4d69; border-radius: 9px; background: #18263a; color: #c9ddf8; cursor: pointer; font-weight: 800; }
.admin-access-unlock-search button.danger { border-color: #75404b; background: #321820; color: #ff9dab; }
.admin-access-unlock-search svg { width: 15px; height: 15px; }
.admin-access-unlock-list { display: grid; gap: 13px; }
.admin-access-unlock-list > .admin-empty { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px dashed #334158; border-radius: 14px; background: #0d121b; color: #8390a3; text-align: center; }
.admin-access-unlock-list > .admin-empty svg { width: 30px; height: 30px; color: #6f9fca; }
.admin-access-unlock-card { overflow: hidden; border: 1px solid #2d3d53; border-radius: 14px; background: linear-gradient(145deg, #101823, #0b1119); box-shadow: 0 14px 32px rgba(0,0,0,.16); }
.admin-access-unlock-card.has-lock { border-color: #70404a; }
.admin-access-unlock-card > header { min-height: 72px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid #293548; background: #141c28; }
.admin-access-unlock-card > header .avatar { width: 46px; height: 46px; }
.admin-access-unlock-card > header div { min-width: 0; }
.admin-access-unlock-card > header strong,.admin-access-unlock-card > header span { display: block; }
.admin-access-unlock-card > header span { margin-top: 3px; color: #8592a5; font-size: 10px !important; }
.admin-access-unlock-card > header > em { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; background: #173327; color: #72d9a7; font-size: 9px; font-style: normal; font-weight: 900; }
.admin-access-unlock-card.has-lock > header > em { background: #421c25; color: #ff8f9e; }
.admin-access-unlock-card > header > em svg { width: 13px; height: 13px; }
.admin-access-unlock-body { display: grid; grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr); gap: 13px; padding: 13px; }
.admin-access-unlock-body > ul { margin: 0; padding: 0; border: 1px solid #293548; border-radius: 10px; background: #0c121a; list-style: none; }
.admin-access-unlock-body > ul li { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-bottom: 1px solid #253144; }
.admin-access-unlock-body > ul li:last-child { border-bottom: 0; }
.admin-access-unlock-body table { min-width: 620px; }
.admin-access-unlock-body td code { display: block; color: #d7e0eb; }
.admin-access-unlock-body td small { display: block; color: #718096; }
.admin-access-unlock-empty { display: flex; align-items: center; gap: 7px; margin: 0; padding: 12px; border: 1px dashed #344157; border-radius: 10px; color: #8996a9; }
.admin-access-unlock-empty svg { width: 17px; }
.admin-access-unlock-card > footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 13px; border-top: 1px solid #293548; background: #101722; }
.admin-access-unlock-card > footer span { color: #8592a5; font-size: 10px !important; }
.admin-access-unlock-card > footer button { flex: 0 0 auto; min-height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #39775c; border-radius: 9px; background: #143225; color: #8ce0b6; cursor: pointer; font-weight: 900; }
.admin-access-unlock-card > footer button:hover { border-color: #5fd39a; color: #c7f6df; }
.admin-access-unlock-card > footer button:disabled { opacity: .55; cursor: wait; }
.admin-access-unlock-card > footer svg { width: 15px; height: 15px; }
.admincp-content .admin-module-list > article { min-height: 56px; padding: 10px 13px; }
.admincp-content .admin-module-list strong { font-size: 13px; }
.admincp-content .admin-module-list span,
.admincp-content .admin-module-list em { font-size: 11px; }
.admincp-content .admin-module-list button { min-height: 32px; padding: 5px 9px; font-size: 11px; }
.admincp-content .admin-skin-code-editor > header strong,
.admincp-content .admin-skin-prices > header strong,
.admincp-content .admin-skin-request > header strong { font-size: 16px; }
.admincp-content .admin-skin-code-editor > header span,
.admincp-content .admin-skin-prices > header span,
.admincp-content .admin-skin-request > header span { font-size: 12px; line-height: 1.55; }
.admincp-content .admin-skin-code-editor > header button,
.admincp-content .admin-skin-code-actions button { min-height: 40px; font-size: 12px; }
.admincp-content .admin-custom-skin-list > article { min-height: 78px; padding: 10px 12px; }
.admincp-content .admin-custom-skin-list strong { font-size: 13px; }
.admincp-content .admin-custom-skin-list span { font-size: 11px; }
.admincp-content .admin-custom-skin-list small,
.admincp-content .admin-custom-skin-list > article > button { font-size: 10px; }
.admincp-content .admin-skin-price-group > h3 { margin-bottom: 11px; font-size: 16px; }
.admincp-content .admin-skin-price-grid { gap: 10px; }
.admincp-content .admin-skin-price-item {
  min-height: 76px;
  grid-template-columns: 72px minmax(0, 1fr) 108px;
  gap: 10px;
  padding: 9px;
}
.admincp-content .admin-skin-price-item .group-skin-preview { width: 72px; height: 50px; }
.admincp-content .admin-skin-price-item strong { font-size: 13px; }
.admincp-content .admin-skin-price-item small { margin-top: 4px; font-size: 10px; line-height: 1.4; }
.admincp-content .admin-skin-price-item label { font-size: 10px; }
.admincp-content .admin-skin-price-item input { height: 38px; padding: 6px 9px; font-size: 13px; }
.admincp-content .admin-skin-request-body { gap: 12px; padding: 13px; }
.admincp-content .admin-skin-request-body label { font-size: 12px; }
.admincp-content .admin-skin-request-body input,
.admincp-content .admin-skin-request-body select,
.admincp-content .admin-skin-request-body textarea { min-height: 44px; padding: 9px 10px; font-size: 13px; line-height: 1.55; }
.admincp-content .admin-skin-request-body textarea { min-height: 96px; }
.admincp-content .admin-skin-request-output { min-height: 180px !important; }
.admincp-content .admin-skin-request-actions button { min-height: 42px; font-size: 12px; }
.admincp-content .admin-tarot-management-body form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}
.admincp-content .admin-tarot-management-body label { width: 100%; min-width: 0; }
.admincp-content .admin-tarot-management-body input { width: 100%; min-height: 44px; font-size: 14px !important; }
.admincp-content .admin-tarot-management-body form > button { width: 100%; min-height: 44px; }
.admincp-content .admin-tarot-management-body form > div {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.admincp-content .admin-tarot-management-body form > div button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding-inline: 10px;
  white-space: normal;
}
.admincp-content .admin-game-control-grid { gap: 12px; padding: 0 0 16px; }
.admincp-content .admin-game-control-grid > article { cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.admincp-content .admin-game-control-grid > article:hover { transform: translateY(-2px); border-color: #5a6880; }
.admincp-content .admin-game-control-grid > article.is-selected { border-color: #f45d74; box-shadow: inset 3px 0 #f45167, 0 0 0 2px rgba(244,81,103,.1), 0 14px 34px rgba(0,0,0,.22); }
.admincp-content .admin-game-control-grid > article.is-selected .admin-game-control-icon { border-color: rgba(244,81,103,.6); background: #321820; color: #ff9aaa; }
.admin-selected-game { margin-bottom: 14px; border-color: #3a465b !important; }
.admin-selected-game-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #293448; }
.admin-selected-game-body > div { min-width: 0; min-height: 72px; padding: 12px 14px; background: #101620; }
.admin-selected-game-body span,
.admin-selected-game-body strong { display: block; }
.admin-selected-game-body span { margin-bottom: 6px; color: #69778e; font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.admin-selected-game-body strong { overflow-wrap: anywhere; color: #e5eaf2; font-size: 12px; line-height: 1.5; }
.admin-selected-game > footer { display: flex; justify-content: flex-end; padding: 10px 12px; border-top: 1px solid #273247; background: #0d131d; }
.admin-selected-game > footer button { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #4d5c74; border-radius: 8px; background: #192231; color: #dce4f1; cursor: pointer; font-size: 11px; font-weight: 750; }
.admin-selected-game > footer button svg { width: 15px; }
.admincp-content .admin-schema-list,
.admincp-content .admin-audit-list { display: grid; gap: 12px; }
.admincp-content .content-pagination { padding: 12px 0 18px; }
.admin-photo-moderation-history > div { display: grid; }
.admin-photo-moderation-history > div > .admin-empty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 82px; color: #779387; }
.admin-photo-moderation-history > div > .admin-empty svg { width: 20px; }
.admin-photo-moderation-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid #253143; }
.admin-photo-moderation-row:last-child { border-bottom: 0; }
.admin-photo-moderation-row > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #663541; border-radius: 11px; background: #29151c; color: #f17788; }
.admin-photo-moderation-row > span svg { width: 18px; }
.admin-photo-moderation-row > div { min-width: 0; }
.admin-photo-moderation-row strong,.admin-photo-moderation-row small { display: block; }
.admin-photo-moderation-row strong { color: #e9edf3; font-size: 12px; }
.admin-photo-moderation-row button { max-width: 100%; margin-top: 2px; padding: 0; overflow: hidden; border: 0; background: none; color: #f3a1af; cursor: pointer; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-photo-moderation-row small { margin-top: 2px; color: #738095; font-size: 9px; }
.admin-photo-moderation-row > em { padding: 4px 8px; border-radius: 999px; background: #261a20; color: #c68d99; font-size: 9px; font-style: normal; }

.modcp-prison-list,
.modcp-activity-list { display: grid; gap: 10px; }
.moderation-center-panel { overflow: hidden; border-color: #3a2930; background: #0d1118; }
.moderation-center-hero { min-height: 104px; display: flex; align-items: center; gap: 14px; padding: 18px; border-bottom: 1px solid #3a2930; background: radial-gradient(circle at 12% 0, rgba(231,57,83,.22), transparent 42%), linear-gradient(135deg, #241219, #111722 70%); }
.moderation-center-hero > span { flex: 0 0 auto; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255,94,116,.48); border-radius: 18px; background: linear-gradient(145deg, #661b29, #2a1118); color: #ff8090; box-shadow: 0 12px 30px rgba(164,27,50,.2); }
.moderation-center-hero > span svg { width: 28px; height: 28px; }
.moderation-center-hero > div { min-width: 0; flex: 1; }
.moderation-center-hero small,
.moderation-center-hero strong,
.moderation-center-hero p { display: block; }
.moderation-center-hero small { color: #d16070; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.moderation-center-hero strong { margin-top: 3px; color: #fff; font-size: 24px; }
.moderation-center-hero p { margin: 4px 0 0; color: #a5afbd; font-size: 11px; }
.moderation-center-hero > button { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #465166; border-radius: 10px; background: #171e2a; color: #b8c1ce; cursor: pointer; }
.moderation-center-hero > button:hover { border-color: #d75a6c; color: #fff; }
.moderation-center-hero > button svg { width: 15px; height: 15px; }
.moderation-center-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #303949; background: #111722; }
.moderation-center-tabs.moderator-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.moderation-center-tabs button { min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border: 0; border-right: 1px solid #303949; background: transparent; color: #8e9aac; cursor: pointer; text-align: left; }
.moderation-center-tabs button:last-child { border-right: 0; }
.moderation-center-tabs button:hover { background: #171f2c; color: #e9edf4; }
.moderation-center-tabs button.active { background: linear-gradient(180deg, rgba(103,25,39,.65), rgba(55,21,30,.5)); color: #ff8f9e; box-shadow: inset 0 -3px #ef5269; }
.moderation-center-tabs button > svg { flex: 0 0 auto; width: 22px; height: 22px; }
.moderation-center-tabs button span,
.moderation-center-tabs button strong,
.moderation-center-tabs button small { display: block; }
.moderation-center-tabs button strong { color: inherit; font-size: 13px; }
.moderation-center-tabs button small { margin-top: 3px; color: #758196; font-size: 9px; }
.moderation-center-content { min-height: 260px; padding: 12px; }
.moderation-center-content > .admin-section-head { margin: -12px -12px 12px; }
.moderation-center-content > .content-pagination { padding: 12px 0 4px; }
.modcp-prison-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(180px, auto);
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #293348;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(39, 19, 28, .92), rgba(15, 20, 30, .96));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}
.modcp-prison-card > .avatar { width: 54px; height: 54px; }
.modcp-prison-person { min-width: 0; }
.modcp-prison-person > button { display: block; padding: 0; border: 0; background: none; color: #f3f5f8; cursor: pointer; text-align: left; font-size: 15px; }
.modcp-prison-person > span,
.modcp-prison-person > small { display: flex; align-items: center; gap: 5px; color: #8793a5; font-size: 11px; }
.modcp-prison-person > p { margin: 7px 0 6px; color: #e4a9b0; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.modcp-prison-person > small svg { width: 13px; height: 13px; color: #ff6577; }
.modcp-prison-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; color: #8995a5; font-size: 10px; }
.modcp-prison-meta > em { padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.06); font-style: normal; font-weight: 800; }
.modcp-prison-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.modcp-prison-actions > button { min-height: 34px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #38445a; border-radius: 9px; background: #171e2b; color: #bdc6d3; cursor: pointer; }
.modcp-prison-actions > button:hover { border-color: #d9576b; color: #fff; }
.modcp-prison-actions > .modcp-unban-button { border-color: rgba(52, 190, 126, .42); background: #11291f; color: #75d9aa; }
.modcp-prison-actions > .modcp-unban-button:hover { border-color: #54d69a; background: #173528; color: #b8f5d7; }
.modcp-prison-actions > button:disabled { opacity: .55; cursor: wait; }
.modcp-prison-meta svg { width: 14px; height: 14px; }
.modcp-security-list { display: grid; gap: 11px; }
.modcp-security-note { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid #5e3d29; border-radius: 11px; background: linear-gradient(135deg, #2b2116, #171820); color: #e6b76f; }
.modcp-security-note > svg { flex: 0 0 20px; width: 20px; }
.modcp-security-note strong,.modcp-security-note span { display: block; }
.modcp-security-note strong { font-size: 12px; }
.modcp-security-note span { margin-top: 2px; color: #a89c8a; font-size: 10px; }
.modcp-security-case { overflow: hidden; border: 1px solid #3b3442; border-radius: 14px; background: #111722; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.modcp-security-case.is-active { border-color: #663642; background: linear-gradient(145deg, #20131a, #111722 55%); }
.modcp-security-case > header { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid #2d3545; }
.modcp-security-case > header .avatar { width: 46px; height: 46px; }
.modcp-security-case > header div { min-width: 0; }
.modcp-security-case > header button { max-width: 100%; padding: 0; overflow: hidden; border: 0; background: none; color: #f2f5f8; cursor: pointer; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.modcp-security-case > header span { display: block; margin-top: 3px; color: #7f8b9e; font-size: 10px; }
.modcp-security-case > header > em { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; background: #451c25; color: #ff8998; font-size: 9px; font-style: normal; font-weight: 900; white-space: nowrap; }
.modcp-security-case.is-released > header > em { background: #173529; color: #71d6a4; }
.modcp-security-case > header > em svg { width: 13px; height: 13px; }
.modcp-security-copy { padding: 11px 12px; }
.modcp-security-copy > p { margin: 0; color: #d7dde6; font-size: 12px; }
.modcp-security-copy > blockquote { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 8px 9px; border-left: 3px solid #a54655; border-radius: 0 8px 8px 0; background: rgba(105,37,50,.22); color: #ba9da3; font-size: 11px; line-height: 1.45; }
.modcp-security-copy > blockquote svg { flex: 0 0 14px; width: 14px; margin-top: 1px; }
.modcp-security-copy > small { display: block; margin-top: 8px; color: #758196; font-size: 9px; }
.modcp-security-related { padding: 0 12px 12px; }
.modcp-security-related > strong { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; color: #9da8b8; font-size: 10px; }
.modcp-security-related > strong svg { width: 14px; height: 14px; }
.modcp-security-related > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 7px; }
.modcp-security-related button { min-width: 0; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 8px; padding: 8px; border: 1px solid #293448; border-radius: 9px; background: #0c111a; color: #cdd5df; cursor: pointer; text-align: left; }
.modcp-security-related button:hover { border-color: #46556e; background: #151c28; }
.modcp-security-related button .avatar { width: 32px; height: 32px; }
.modcp-security-related button span,.modcp-security-related button strong,.modcp-security-related button small { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modcp-security-related button strong { font-size: 10px; }.modcp-security-related button small { margin-top: 2px; color: #718096; font-size: 8px; }
.modcp-security-case > footer { display: flex; justify-content: flex-end; padding: 9px 12px; border-top: 1px solid #2c3545; background: rgba(8,12,18,.48); }
.modcp-security-case > footer button { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #3f8d68; border-radius: 9px; background: #153326; color: #87e0b5; cursor: pointer; font-size: 10px; font-weight: 800; }
.modcp-security-case > footer button:hover { border-color: #65d39d; color: #c5f8de; }
.modcp-security-case > footer button:disabled { cursor: wait; opacity: .55; }
.modcp-security-case > footer button svg { width: 14px; }
.modcp-security-case > footer span { color: #778397; font-size: 9px; }
.modcp-activity-categories { display: flex; gap: 7px; margin: 0 0 12px; overflow-x: auto; padding: 2px 1px 7px; scrollbar-width: thin; }
.modcp-activity-categories button { flex: 0 0 auto; min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #2d384b; border-radius: 10px; background: #121824; color: #8e9aad; cursor: pointer; }
.modcp-activity-categories button:hover { border-color: #46536a; color: #eef1f5; }
.modcp-activity-categories button.active { border-color: rgba(244,81,103,.55); background: #3b1821; color: #ff9ca8; }
.modcp-activity-categories svg { width: 15px; height: 15px; }
.modcp-activity-categories b { min-width: 22px; padding: 2px 5px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 10px; text-align: center; }
.modcp-activity-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: start; gap: 11px; padding: 13px; border: 1px solid #293348; border-radius: 12px; background: #111722; cursor: pointer; transition: border-color .18s, background .18s; }
.modcp-activity-row:hover,.modcp-activity-row:focus-visible,.modcp-activity-row.is-open { border-color: #714050; background: #171a27; outline: none; }
.modcp-activity-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #2e1820; color: #ff7081; }
.modcp-activity-icon svg { width: 18px; height: 18px; }
.modcp-activity-row > div { min-width: 0; }
.modcp-activity-row > div > strong { display: block; color: #eef1f5; font-size: 13px; }
.modcp-activity-row > div > span { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: #aab4c3; font-size: 11px; }
.modcp-activity-row > div > span small { padding: 2px 5px; border-radius: 999px; background: rgba(255,255,255,.06); color: #778499; font-size: 9px; }
.modcp-activity-row p { margin: 6px 0 0; color: #8995a5; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.modcp-activity-row > time { display: flex; align-items: center; gap: 4px; color: #6f7d90; font-size: 10px; white-space: nowrap; }
.modcp-activity-row > time svg { width: 14px; height: 14px; transition: transform .18s; }
.modcp-activity-row.is-open > time svg { transform: rotate(180deg); }
.modcp-activity-detail { grid-column: 1 / -1; display: grid; gap: 9px; margin: 2px -2px -2px; padding: 12px; border: 1px solid #354056; border-radius: 10px; background: #0c111a; cursor: default; }
.modcp-activity-detail[hidden] { display: none; }
.modcp-activity-detail > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.modcp-activity-detail > header strong { color: #ff9aaa; font-size: 12px; }.modcp-activity-detail > header small { color: #66758a; font-size: 8px; }
.modcp-activity-subject { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #2c384c; border-radius: 9px; background: #121925; }
.modcp-activity-subject > svg { flex: 0 0 18px; width: 18px; color: #e86b7f; }.modcp-activity-subject span,.modcp-activity-subject strong,.modcp-activity-subject small { display: block; }.modcp-activity-subject strong { color: #e5eaf0; font-size: 11px; }.modcp-activity-subject small { margin-top: 2px; color: #78869a; font-size: 9px; }
.modcp-activity-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.modcp-activity-content { min-width: 0; padding: 10px; border: 1px solid #2a3649; border-radius: 9px; background: #121925; }
.modcp-activity-content > strong { display: block; margin-bottom: 7px; color: #8492a6; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }.modcp-activity-content > div,.modcp-activity-content > p { margin: 0; color: #e0e5ec; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }.modcp-activity-content.is-empty > p { color: #69778b; font-style: italic; }
.modcp-activity-attachments { overflow: hidden; padding: 10px; border: 1px solid #2a3649; border-radius: 9px; background: #111824; }.modcp-activity-attachments > strong { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #9ca8b8; font-size: 10px; }.modcp-activity-attachments > strong svg { width: 14px; }.modcp-activity-attachments .post-media-grid { margin: 0; }
.modcp-activity-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }.modcp-activity-facts p { min-width: 0; margin: 0; padding: 8px 9px; border: 1px solid #273245; border-radius: 8px; background: #121925; }.modcp-activity-facts span,.modcp-activity-facts strong { display: block; overflow-wrap: anywhere; }.modcp-activity-facts span { color: #77869b; font-size: 9px; }.modcp-activity-facts strong { margin-top: 4px; color: #d8dfe8; font-size: 11px; }
.modcp-activity-note { display: flex; align-items: center; gap: 7px; margin: 0; padding: 9px 10px; border: 1px solid #2b3b42; border-radius: 9px; background: #10201e; color: #91c8b0; font-size: 10px; }.modcp-activity-note svg { flex: 0 0 15px; width: 15px; }
.modcp-activity-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; padding-top: 8px; border-top: 1px solid #252f40; color: #748196; font-size: 9px; }.modcp-activity-meta span,.modcp-activity-meta time { display: flex; align-items: center; gap: 5px; }.modcp-activity-meta b { color: #aeb7c5; }.modcp-activity-meta svg { width: 13px; height: 13px; }
.modcp-post-modal { position: fixed; z-index: 230; inset: 0; display: grid; place-items: center; padding: 16px; }
.modcp-post-modal[hidden] { display: none; }
.modcp-post-modal-scrim { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(2,5,10,.84); backdrop-filter: blur(5px); cursor: pointer; }
.modcp-post-modal-card { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr); width: min(760px,100%); max-height: calc(100dvh - 32px); overflow: hidden; border: 1px solid #4b3540; border-radius: 15px; background: #0d131d; box-shadow: 0 30px 90px #000c; }
.modcp-post-modal-card>header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid #3d2d36; background: linear-gradient(135deg,#321822,#171522); }
.modcp-post-modal-card>header small,.modcp-post-modal-card>header strong { display: block; }.modcp-post-modal-card>header small { color: #d36d7c; font-size: 8px; font-weight: 900; letter-spacing: .13em; }.modcp-post-modal-card>header strong { margin-top: 2px; color: #f5f7fa; font-size: 15px; }
.modcp-post-modal-card>header>button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #58404a; border-radius: 9px; background: #251820; color: #d8bdc3; cursor: pointer; }.modcp-post-modal-card>header>button svg { width: 17px; }
.modcp-post-modal-body { min-height: 0; overflow-y: auto; padding: 16px; }
body.modcp-modal-open { overflow: hidden; }
.modcp-post-modal-body .admin-deleted-post-preview>.post-media-grid { margin-right: 0; margin-left: 0; }
.modcp-post-modal-body .admin-deleted-post-preview>footer { bottom: -16px; margin-right: -16px; margin-bottom: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; }
.modcp-prison-list .admin-empty,
.modcp-activity-list .admin-empty,
.modcp-security-list .admin-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 16px; border: 1px dashed #334056; border-radius: 14px; background: rgba(17,23,34,.7); }
.modcp-prison-list .admin-empty svg,
.modcp-activity-list .admin-empty svg,
.modcp-security-list .admin-empty svg { width: 28px; height: 28px; color: #617087; }
.modcp-prison-list .admin-empty strong,
.modcp-activity-list .admin-empty strong,
.modcp-security-list .admin-empty strong { color: #c7ced8; font-size: 14px; }
.modcp-prison-list .admin-empty span,
.modcp-activity-list .admin-empty span,
.modcp-security-list .admin-empty span { color: #778498; font-size: 11px; }

.admin-floating-modal {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
}
.admin-floating-modal[hidden] { display: none; }
.admin-floating-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(3, 6, 11, .78);
  backdrop-filter: blur(9px);
  cursor: default;
}
.admin-floating-card {
  position: relative;
  width: min(920px, 100%);
  max-height: min(90dvh, 900px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #3b4960;
  border-radius: 20px;
  background: #0d121b;
  box-shadow: 0 35px 120px rgba(0, 0, 0, .72), 0 0 0 1px rgba(255,255,255,.02) inset;
  animation: admin-form-in .2s ease-out both;
}
.admin-floating-card :where(button, input, select, textarea, label, p, span, small, em, code, time, td, th, li) {
  font-size: 14px !important;
  line-height: 1.45;
}
.admin-floating-card :where(strong) { font-size: 15px !important; line-height: 1.4; }
.admin-floating-card :where(input, select, textarea, button) { min-height: 42px; }
@keyframes admin-form-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.admin-floating-card > header {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 17px;
  border-bottom: 1px solid #2b3547;
  background: radial-gradient(circle at 100% 0, rgba(244, 81, 103, .14), transparent 42%), #151c28;
}
.admin-floating-card > header > div { min-width: 0; flex: 1; }
.admin-floating-card > header small,
.admin-floating-card > header strong,
.admin-floating-card > header span { display: block; }
.admin-floating-card > header small { color: #f16e80; font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.admin-floating-card > header strong { margin-top: 3px; color: #f7f9fc; font-size: 18px !important; }
.admin-floating-card > header span { margin-top: 3px; color: #7f8da1; font-size: 9px; }
.admin-floating-card > header > button {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #46546a;
  border-radius: 11px;
  background: #1b2331;
  color: #b8c2d0;
  cursor: pointer;
}
.admin-floating-card > header > button svg { width: 17px; }
.admin-floating-body { min-height: 0; overflow: auto; padding: 18px; }
.admin-floating-body > form,
.admin-floating-body > .admin-user-management,
.admin-floating-body > section {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.admin-floating-body .admin-form-grid { gap: 13px; }
.admin-floating-body .admin-form-grid > label,
.admin-floating-body .admin-user-edit label,
.admin-floating-body .admin-user-tools label { font-size: 11px; }
.admin-floating-body .admin-form-grid input,
.admin-floating-body .admin-form-grid select,
.admin-floating-body .admin-form-grid textarea,
.admin-floating-body .admin-user-edit input,
.admin-floating-body .admin-user-edit select,
.admin-floating-body .admin-user-tools input {
  min-height: 44px;
  border-color: #3a465a;
  border-radius: 9px;
  background: #151c27;
  font-size: 12px;
}
.admin-floating-body .admin-user-edit { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 0 14px; }
.admin-floating-body .admin-user-edit button { grid-column: 1 / -1; }
.admin-floating-body .admin-user-tools { grid-template-columns: 1fr; padding: 0; }
.admin-floating-body .admin-user-tools form,
.admin-floating-body .admin-user-tools form:last-child { grid-template-columns: 1fr 1.4fr auto auto; padding: 12px; border-radius: 12px; }
.admin-floating-body .admin-user-tools form[data-admin-password-form],
.admin-floating-body .admin-user-tools form[data-admin-exclusive-badge-form] { grid-template-columns: 1fr auto; }
.admin-floating-body .admin-form-actions {
  position: sticky;
  bottom: -18px;
  margin: 18px -18px -18px;
  padding: 13px 18px;
  border-top: 1px solid #2b3547;
  background: rgba(13, 18, 27, .94);
  backdrop-filter: blur(14px);
}
body.admin-modal-open { overflow: hidden; }

/* Admin CP · cửa hàng dễ quản lý */
.admin-shop-heading .admin-head-action.secondary { border-color: #3c526d; background: #182535; color: #a9d5ff; }
.admin-shop-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.admin-shop-overview > article { min-height: 82px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #2a374a; border-radius: 14px; background: linear-gradient(145deg, #141c28, #0d131c); box-shadow: 0 12px 30px rgba(0,0,0,.14); }
.admin-shop-overview > article > svg { width: 25px; height: 25px; padding: 9px; box-sizing: content-box; border-radius: 12px; background: #30202b; color: #ff8da0; }
.admin-shop-overview span,.admin-shop-overview small,.admin-shop-overview strong { display: block; }
.admin-shop-overview small { color: #7f8c9d; font-size: 10px !important; }
.admin-shop-overview strong { margin-top: 2px; color: #f3f6fa; font-size: 17px !important; }
.admin-shop-guide { margin-bottom: 14px; overflow: hidden; border: 1px solid #405779; border-radius: 16px; background: linear-gradient(145deg, #122035, #0d151f); box-shadow: 0 14px 38px rgba(0,0,0,.18); }
.admin-shop-guide[hidden] { display: none; }
.admin-shop-guide > header { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border-bottom: 1px solid #30435e; background: rgba(35,55,82,.36); }
.admin-shop-guide > header > div { display: flex; align-items: center; gap: 10px; }
.admin-shop-guide > header > div > svg { width: 22px; color: #84c5ff; }
.admin-shop-guide > header span,.admin-shop-guide > header strong,.admin-shop-guide > header small { display: block; }
.admin-shop-guide > header strong { color: #edf6ff; }
.admin-shop-guide > header small { margin-top: 2px; color: #8fa7c2; }
.admin-shop-guide > header > button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #40536c; border-radius: 9px; background: #172235; color: #aebdd0; cursor: pointer; }
.admin-shop-guide > header > button svg { width: 15px; }
.admin-shop-guide > div { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 14px; }
.admin-shop-guide article { display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 9px; padding: 11px; border: 1px solid #2d405a; border-radius: 11px; background: rgba(9,15,24,.48); }
.admin-shop-guide article > b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #294d72; color: #bfe2ff; }
.admin-shop-guide article span,.admin-shop-guide article strong,.admin-shop-guide article small { display: block; }
.admin-shop-guide article strong { color: #eaf3fc; }
.admin-shop-guide article small { margin-top: 4px; color: #91a1b5; line-height: 1.55; }
.admin-shop-guide > p { display: flex; align-items: center; gap: 8px; margin: 0 14px 14px; padding: 9px 11px; border: 1px solid #315b4d; border-radius: 9px; background: #10251f; color: #a7cdbf; }
.admin-shop-guide > p svg { width: 17px; color: #64d6aa; }
.admin-shop-workbench { display: grid; grid-template-columns: 245px minmax(0,1fr); gap: 14px; align-items: start; }
.admin-shop-categories { position: sticky; top: -6px; overflow: hidden; border: 1px solid #2a374a; border-radius: 14px; background: #0d131d; box-shadow: 0 14px 35px rgba(0,0,0,.14); }
.admin-shop-categories > header { padding: 14px; border-bottom: 1px solid #273447; background: #141c28; }
.admin-shop-categories > header strong,.admin-shop-categories > header small { display: block; }
.admin-shop-categories > header strong { color: #f0f4f9; }
.admin-shop-categories > header small { margin-top: 3px; color: #758397; }
.admin-shop-categories > button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 11px; border: 0; border-bottom: 1px solid #202b3a; background: transparent; color: #9aa8ba; text-align: left; cursor: pointer; }
.admin-shop-categories > button:last-child { border-bottom: 0; }
.admin-shop-categories > button:hover { background: #141e2c; }
.admin-shop-categories > button.active { background: linear-gradient(90deg, rgba(244,81,103,.18), rgba(244,81,103,.04)); color: #ff9aaa; box-shadow: inset 3px 0 #f45167; }
.admin-shop-categories > button > svg { width: 18px; justify-self: center; }
.admin-shop-categories > button span,.admin-shop-categories > button strong,.admin-shop-categories > button small { min-width: 0; display: block; }
.admin-shop-categories > button strong { color: #e2e8f0; }
.admin-shop-categories > button small { margin-top: 2px; overflow: hidden; color: #6f7d8f; font-size: 9px !important; text-overflow: ellipsis; white-space: nowrap; }
.admin-shop-categories > button > b { min-width: 25px; padding: 3px 6px; border-radius: 999px; background: #202c3d; color: #aab8c9; text-align: center; }
.admin-shop-main { min-width: 0; }
.admin-shop-toolbar { min-height: 58px; display: flex; gap: 8px; margin-bottom: 10px; padding: 9px; border: 1px solid #2a374a; border-radius: 14px; background: #0d131d; }
.admin-shop-toolbar > label { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #35445a; border-radius: 10px; background: #151d29; color: #77869a; }
.admin-shop-toolbar > label > svg { width: 17px; }
.admin-shop-toolbar input { width: 100%; min-height: 38px; border: 0; outline: 0; background: transparent; color: #eef2f7; }
.admin-shop-toolbar > button,.admin-shop-result-head > button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border: 1px solid #445a75; border-radius: 10px; background: #1b2c41; color: #a9d6ff; cursor: pointer; font-weight: 800; }
.admin-shop-result-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 10px; }
.admin-shop-result-head strong,.admin-shop-result-head small { display: block; }
.admin-shop-result-head strong { color: #eef2f7; font-size: 16px !important; }
.admin-shop-result-head small { margin-top: 2px; color: #748296; }
.admin-shop-result-head > button { border-color: #6b3c47; background: #331923; color: #ff9aaa; }
.admin-shop-result-head > button svg { width: 16px; }
.admin-shop-catalog { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.admin-shop-catalog > article { min-width: 0; display: grid; grid-template-columns: 112px minmax(0,1fr); grid-template-rows: minmax(132px,auto) auto; overflow: hidden; border: 1px solid #2b384b; border-radius: 15px; background: linear-gradient(145deg,#131b27,#0c121b); box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.admin-shop-catalog > article.is-hidden { opacity: .68; filter: saturate(.55); }
.admin-shop-item-visual { position: relative; min-height: 132px; display: grid; place-items: center; overflow: hidden; border-right: 1px solid #273446; background: radial-gradient(circle at 50% 28%,rgba(103,124,255,.18),transparent 58%),#0a0f17; }
.admin-shop-item-visual > img { width: 64px; height: 64px; object-fit: contain; }
.admin-shop-item-visual > span { width: 66px; height: 66px; display: grid; place-items: center; border: 2px solid var(--shop-preview-a); border-radius: 18px; background: linear-gradient(145deg,var(--shop-preview-a),var(--shop-preview-b)); color: #fff; font-size: 27px !important; text-shadow: 0 2px 7px #000; box-shadow: 0 0 22px color-mix(in srgb,var(--shop-preview-b) 50%,transparent); }
.admin-shop-item-visual > em { position: absolute; inset: auto 7px 7px; padding: 3px 6px; border: 1px solid #475469; border-radius: 999px; background: rgba(8,12,18,.84); color: #aeb9c8; font-size: 8px !important; font-style: normal; font-weight: 900; text-align: center; }
.admin-shop-item-visual > em.rarity-rare { color: #77c5ff; }.admin-shop-item-visual > em.rarity-epic { color: #d99cff; }.admin-shop-item-visual > em.rarity-legendary { color: #ffd369; }
.admin-shop-item-copy { min-width: 0; padding: 12px; }
.admin-shop-item-copy > .admin-shop-item-category { display: flex; align-items: center; gap: 4px; color: #8d9db0; font-size: 9px !important; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.admin-shop-item-copy > .admin-shop-item-category svg { width: 12px; }
.admin-shop-item-copy > strong { display: block; margin-top: 5px; color: #f1f4f8; font-size: 15px !important; }
.admin-shop-item-copy > code { display: block; margin-top: 2px; overflow: hidden; color: #728197; font-size: 9px !important; text-overflow: ellipsis; white-space: nowrap; }
.admin-shop-item-copy > p { min-height: 34px; margin: 7px 0 9px; display: -webkit-box; overflow: hidden; color: #919cac; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.admin-shop-item-copy > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.admin-shop-item-copy > div b { color: #ffd166; }
.admin-shop-item-copy > div small { color: #748196; }
.admin-shop-item-copy > div span { margin-left: auto; padding: 3px 6px; border-radius: 999px; font-size: 8px !important; font-weight: 900; }
.admin-shop-item-copy > div span.active { background: #113226; color: #72d9aa; }.admin-shop-item-copy > div span.hidden { background: #35242a; color: #d6929e; }
.admin-shop-catalog > article > footer { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border-top: 1px solid #273446; background: #273446; }
.admin-shop-catalog > article > footer button { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; background: #111925; color: #9fb1c7; cursor: pointer; }
.admin-shop-catalog > article > footer button:hover { background: #1a2636; color: #e2efff; }
.admin-shop-catalog > article > footer button:first-child { color: #9fd3ff; }.admin-shop-catalog > article > footer button:last-child { color: #eab0bb; }
.admin-shop-catalog > article > footer svg { width: 14px; }
.admin-shop-empty { grid-column: 1/-1; min-height: 270px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 25px; border: 1px dashed #35445a; border-radius: 15px; background: #0d131c; color: #7f8da1; text-align: center; }
.admin-shop-empty > svg { width: 35px; height: 35px; color: #59718d; }.admin-shop-empty > strong { color: #dbe3ed; font-size: 16px !important; }.admin-shop-empty > button { min-height: 40px; display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 7px 12px; border: 1px solid #643b45; border-radius: 9px; background: #321923; color: #ff9aaa; cursor: pointer; }
.admin-shop-editor { display: grid; gap: 16px; }
.admin-shop-editor-intro { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; gap: 14px; padding: 12px; border: 1px solid #2f3d51; border-radius: 13px; background: #111925; }
.admin-shop-editor-intro > div:last-child strong,.admin-shop-editor-intro > div:last-child span { display: block; }.admin-shop-editor-intro > div:last-child strong { color: #eef3f9; font-size: 17px !important; }.admin-shop-editor-intro > div:last-child span { margin-top: 4px; color: #8291a4; }
.admin-shop-editor-preview { min-height: 82px; display: grid; place-items: center; align-content: center; gap: 5px; overflow: hidden; border: 1px solid var(--shop-preview-a,#f45167); border-radius: 11px; background: linear-gradient(145deg,color-mix(in srgb,var(--shop-preview-a,#f45167) 24%,#101722),color-mix(in srgb,var(--shop-preview-b,#7159d9) 22%,#0b111a)); box-shadow: inset 0 0 20px color-mix(in srgb,var(--shop-preview-b,#7159d9) 16%,transparent); }
.admin-shop-editor-preview > span { font-size: 25px !important; color: #fff; text-shadow: 0 0 9px var(--shop-preview-b,#7159d9); }.admin-shop-editor-preview > img { width: 44px; height: 44px; object-fit: contain; }.admin-shop-editor-preview > small { max-width: 100px; overflow: hidden; color: #c8d3e0; font-size: 9px !important; text-overflow: ellipsis; white-space: nowrap; }
.admin-shop-asset-picker{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;margin-top:5px}.admin-shop-asset-picker>button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 11px;border:1px solid #426d9a;border-radius:8px;background:#17304a;color:#b9ddff;cursor:pointer;font-weight:800}.admin-shop-asset-picker>button:disabled{cursor:wait;opacity:.65}.admin-shop-asset-picker>button svg{width:16px}.admin-shop-asset-picker>input[name="asset_url"]{min-width:0}.admin-shop-frame-preview,.admin-shop-frame-thumb{position:relative;display:grid!important;place-items:center;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important}.admin-shop-frame-preview{width:70px!important;height:70px!important}.admin-shop-frame-thumb{width:66px!important;height:66px!important}.admin-shop-frame-preview>i,.admin-shop-frame-thumb>i{position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;border:1px solid #6980a0;border-radius:50%;background:linear-gradient(145deg,#318cef,#8d51dc);color:#fff;font-size:12px;font-style:normal;font-weight:900;box-shadow:inset 0 0 0 2px #090b0e}.admin-shop-frame-thumb>i{width:34px;height:34px;font-size:10px}.admin-shop-frame-preview>img,.admin-shop-frame-thumb>img{position:absolute;z-index:2;inset:0;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important;filter:drop-shadow(0 0 3px #ff773d88)}
@media(max-width:620px){.admin-shop-asset-picker{grid-template-columns:1fr}.admin-shop-asset-picker>button{width:100%}}
.admin-shop-editor > fieldset { margin: 0; padding: 14px; border: 1px solid #2c394c; border-radius: 13px; background: #0d141e; }
.admin-shop-editor > fieldset > legend { padding: 0 8px; color: #dbe5f0; font-weight: 800; }.admin-shop-editor > fieldset > legend b { width: 23px; height: 23px; display: inline-grid; place-items: center; margin-right: 5px; border-radius: 50%; background: #293d57; color: #a9d5ff; }
.admin-shop-config-fields { margin-bottom: 0 !important; }
.admin-shop-color-input { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 7px; margin-top: 4px; }
.admin-shop-color-input input { margin-top: 0 !important; }.admin-shop-color-input input[type="color"] { padding: 4px !important; cursor: pointer; }
.admin-shop-asset-row { margin-top: 11px; margin-bottom: 0 !important; padding-top: 11px; border-top: 1px solid #273447; }
.admin-shop-advanced { overflow: hidden; border: 1px solid #2d394c; border-radius: 12px; background: #0b1119; }
.admin-shop-advanced > summary { min-height: 54px; display: grid; grid-template-columns: 25px minmax(0,1fr) 20px; align-items: center; gap: 8px; padding: 10px 13px; color: #9ba9ba; cursor: pointer; list-style: none; }.admin-shop-advanced > summary::-webkit-details-marker { display: none; }.admin-shop-advanced > summary > svg { width: 17px; }.admin-shop-advanced > summary > span strong,.admin-shop-advanced > summary > span small { display: block; }.admin-shop-advanced > summary > span strong { color: #d5dde7; }.admin-shop-advanced > summary > span small { margin-top: 2px; color: #707e91; }.admin-shop-advanced[open] > summary > svg:last-child { transform: rotate(180deg); }
.admin-shop-advanced > label { display: block; padding: 0 13px 13px; color: #8998aa; }.admin-shop-advanced textarea { width: 100%; min-height: 150px; margin-top: 5px; padding: 10px; border: 1px solid #37465a; border-radius: 9px; outline: 0; background: #090e15; color: #bcd3ee; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; resize: vertical; }

/* Admin CP · quản lý bài viết bảng tin */
.admin-feed-manager { margin: 16px 0; overflow: hidden; border: 1px solid #2c3b50; border-radius: 16px; background: linear-gradient(145deg,#111925,#0b1119); box-shadow: 0 14px 38px rgba(0,0,0,.17); }
.admin-feed-manager > header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border-bottom: 1px solid #29374a; background: rgba(28,40,57,.58); }
.admin-feed-manager > header > div { min-width: 0; }
.admin-feed-manager > header strong,.admin-feed-manager > header span { display: block; }
.admin-feed-manager > header strong { color: #f0f5fb; font-size: 17px !important; }
.admin-feed-manager > header span { margin-top: 4px; color: #8494a8; line-height: 1.45; }
.admin-feed-manager > header nav { flex: 0 0 auto; display: flex; gap: 5px; padding: 4px; border: 1px solid #35455b; border-radius: 11px; background: #0b111a; }
.admin-feed-manager > header nav button { min-height: 39px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: #8998aa; cursor: pointer; font-weight: 800; }
.admin-feed-manager > header nav button:hover { color: #dbe8f6; background: #172233; }
.admin-feed-manager > header nav button.active { background: #203a55; color: #b9ddff; box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.admin-feed-manager > header nav button.active.deleted { background: #49242d; color: #ffb3bf; }
.admin-feed-manager > header nav button svg { width: 16px; }
.admin-feed-manager > header nav button b { min-width: 23px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.09); text-align: center; }
.admin-feed-post-search { display: flex; gap: 8px; padding: 12px 14px 0; }
.admin-feed-post-search > label { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #34445a; border-radius: 10px; background: #101823; color: #718198; }
.admin-feed-post-search > label svg { width: 17px; }
.admin-feed-post-search input { width: 100%; min-height: 40px; border: 0; outline: 0; background: transparent; color: #eef3f8; }
.admin-feed-post-search > button { min-height: 42px; padding: 8px 14px; border: 1px solid #405a77; border-radius: 10px; background: #1a3047; color: #add7ff; cursor: pointer; font-weight: 800; }
.admin-feed-post-search > button:last-child:not(:first-of-type) { border-color: #4b5665; background: #202833; color: #aeb9c7; }
.admin-feed-post-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 12px 14px 14px; }
.admin-feed-post-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #2c3a4d; border-radius: 13px; background: #0e151f; }
.admin-feed-post-card.is-deleted { border-color: #51313a; background: linear-gradient(145deg,#17151b,#10131a); }
.admin-feed-post-card.is-deleted[data-admin-deleted-post-open] { cursor: pointer; transition: border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.admin-feed-post-card.is-deleted[data-admin-deleted-post-open]:hover,.admin-feed-post-card.is-deleted[data-admin-deleted-post-open]:focus-visible { border-color: #a85668; outline: 0; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.28),0 0 0 3px rgba(225,87,111,.1); }
.admin-feed-post-card > header { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-bottom: 1px solid #273446; }
.admin-feed-post-card > header .avatar { flex: 0 0 38px; width: 38px; height: 38px; }
.admin-feed-post-card > header > div { min-width: 0; flex: 1; }
.admin-feed-post-card > header > div > button { max-width: 100%; padding: 0; overflow: hidden; border: 0; background: transparent; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.admin-feed-post-card > header strong,.admin-feed-post-card > header span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-feed-post-card > header strong { color: #e6edf5; }
.admin-feed-post-card > header span { margin-top: 2px; color: #748397; }
.admin-feed-post-card > header > em { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; background: #172b40; color: #91c9f7; font-size: 9px !important; font-style: normal; font-weight: 900; }
.admin-feed-post-card > header > em.deleted { background: #3b2028; color: #ef9eac; }
.admin-feed-post-card > header > em svg { width: 13px; }
.admin-feed-post-content { flex: 1; min-height: 92px; padding: 12px; overflow-wrap: anywhere; color: #c4ceda; line-height: 1.58; }
.admin-feed-post-content p { margin: 0; white-space: pre-wrap; }
.admin-feed-post-content > span { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: #8496aa; }
.admin-feed-post-content > span svg { width: 14px; }
.admin-feed-post-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 0 12px 11px; color: #758499; }
.admin-feed-post-meta span { display: inline-flex; align-items: center; gap: 5px; }
.admin-feed-post-meta svg { width: 14px; }
.admin-feed-deletion { display: flex; align-items: flex-start; gap: 8px; margin: 0 12px 11px; padding: 9px 10px; border: 1px solid #5d3540; border-radius: 9px; background: #28171d; color: #c999a2; line-height: 1.45; }
.admin-feed-deletion > svg { flex: 0 0 18px; width: 18px; color: #e88798; }
.admin-feed-deletion span,.admin-feed-deletion strong,.admin-feed-deletion small { display: block; }
.admin-feed-deletion strong { color: #ffb4c0; }
.admin-feed-deletion small { margin-top: 2px; color: #aa7c85; }
.admin-feed-post-card > footer { display: flex; gap: 7px; padding: 10px 12px; border-top: 1px solid #273446; background: rgba(18,27,39,.78); }
.admin-feed-post-card > footer button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 11px; border: 1px solid #3a4b61; border-radius: 9px; background: #182434; color: #a9bfd7; cursor: pointer; font-weight: 800; }
.admin-feed-post-card > footer button[data-admin-post-restore] { border-color: #2d6b55; background: #153729; color: #89dfb8; }
.admin-feed-post-card > footer svg { width: 15px; }
.admin-feed-post-card > footer code { min-width: 0; margin-left: auto; align-self: center; overflow: hidden; color: #65758a; text-overflow: ellipsis; white-space: nowrap; }
.admin-feed-post-empty { grid-column: 1/-1; min-height: 190px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 24px; border: 1px dashed #35455b; border-radius: 12px; color: #748398; text-align: center; }
.admin-feed-post-empty svg { width: 34px; height: 34px; color: #60748d; }
.admin-feed-post-empty strong { color: #d7e0eb; font-size: 16px !important; }
.admin-feed-post-empty span { max-width: 460px; }
.admin-feed-manager > .content-pagination { padding: 0 14px 14px; }
.admin-deleted-post-preview { display: grid; gap: 14px; }
.admin-deleted-post-author { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid #2b3547; }
.admin-deleted-post-author .avatar { flex: 0 0 46px; width: 46px; height: 46px; }
.admin-deleted-post-author>div { min-width: 0; flex: 1; }
.admin-deleted-post-author strong,.admin-deleted-post-author span { display: block; }
.admin-deleted-post-author span { margin-top: 3px; color: #8290a3; }
.admin-deleted-post-author>em { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; color: #ffadbb; background: #3b2028; font-style: normal; font-weight: 850; }
.admin-deleted-post-author>em svg { width: 14px; }
.admin-deleted-post-notice { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #623541; border-radius: 11px; color: #c99aa4; background: #28171d; }
.admin-deleted-post-notice>svg { flex: 0 0 19px; width: 19px; color: #ed8799; }
.admin-deleted-post-notice strong,.admin-deleted-post-notice small { display: block; }
.admin-deleted-post-notice strong { color: #ffc0ca; }.admin-deleted-post-notice small { margin-top: 2px; color: #aa7e87; }
.admin-deleted-post-content { min-height: 80px; padding: 15px; border: 1px solid #303c4e; border-radius: 12px; color: #e3e9f1; background: #101720; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-deleted-post-content.is-empty { min-height: 58px; display: grid; place-items: center; color: #77869a; }
.admin-deleted-post-preview .post-media-grid,.admin-deleted-post-preview .post-audio { margin-top: 0; }
.admin-deleted-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; color: #8998aa; }
.admin-deleted-post-meta span { display: inline-flex; align-items: center; gap: 5px; }.admin-deleted-post-meta svg { width: 15px; }.admin-deleted-post-meta code { margin-left: auto; color: #64758a; }
.admin-deleted-post-preview>footer { position: sticky; bottom: -18px; display: flex; justify-content: flex-end; gap: 8px; margin: 2px -18px -18px; padding: 12px 18px; border-top: 1px solid #2c3748; background: #111823f2; backdrop-filter: blur(8px); }
.admin-deleted-post-preview>footer button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 13px; border: 1px solid #46546a; border-radius: 9px; color: #bec9d7; background: #1a2330; cursor: pointer; font-weight: 800; }
.admin-deleted-post-preview>footer .primary-button { border-color: #2f785c; color: #bcf3d7; background: linear-gradient(145deg,#1b5d44,#164534); }

@media (max-width: 1100px) {
  .admincp-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .admincp-content { padding: 16px; }
  .admincp-content .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admincp-content .admin-user-list,
  .admincp-content .admin-catalog-list,
  .admincp-content .admin-game-list,
  .admincp-content .admin-profile-skin-list { grid-template-columns: 1fr; }
  .admin-shop-workbench { grid-template-columns: 210px minmax(0,1fr); }
  .admin-shop-catalog { grid-template-columns: 1fr; }
  .admin-feed-post-list { grid-template-columns: 1fr; }
  .admincp-content .admin-storage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .admincp-view.active { font-size: 14px; }
  .admincp-shell { display: block; }
  .admincp-sidebar {
    position: fixed;
    z-index: 180;
    inset: 0 auto 0 0;
    width: min(84vw, 290px);
    transform: translateX(-105%);
    transition: transform .22s ease;
  }
  body.admin-sidebar-open .admincp-sidebar { transform: none; }
  body.admin-sidebar-open .admincp-view::after {
    content: "";
    position: fixed;
    z-index: 170;
    inset: 0;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(3px);
    pointer-events: auto;
  }
  .admincp-workspace { height: 100dvh; grid-template-rows: 62px minmax(0, 1fr); }
  .admincp-brand strong { font-size: 16px; }
  .admincp-brand small { font-size: 12px; }
  .admincp-sidebar-label { font-size: 12px; }
  .admincp-tabs button { min-height: 48px; font-size: 14px; }
  .admincp-tabs .admincp-group-toggle { min-height: 60px; }
  .admincp-tabs .admincp-group-children > button { min-height: 40px; font-size: 12px; }
  .admincp-sidebar-footer button { min-height: 46px; font-size: 13px; }
  .admincp-topbar { padding: 0 10px; }
  .admincp-menu-toggle { display: inline-grid; }
  .admincp-topbar nav button { width: 38px; padding: 0; }
  .admincp-topbar nav button span { display: none; }
  .admincp-topbar small { font-size: 11px; }
  .admincp-topbar strong { font-size: 16px; }
  .admincp-content { padding: 9px; font-size: 14px; }
  .admincp-content button,
  .admincp-content input,
  .admincp-content select,
  .admincp-content textarea { font-size: 14px; }
  .admincp-content .admin-section-head { min-height: 72px; margin-bottom: 9px; padding: 12px; border-radius: 12px; }
  .admincp-content .admin-section-head strong { font-size: 18px; }
  .admincp-content .admin-section-head span { font-size: 13px; line-height: 1.45; }
  .admincp-content .admin-section-head > em,
  .admin-head-action { flex: 0 0 auto; max-width: 46%; font-size: 12px; }
  .admin-head-actions { max-width: 52%; flex-wrap: wrap; gap: 4px; }
  .admin-head-actions > em { min-height: 34px; padding: 5px 8px; font-size: 11px; }
  .admin-head-actions .admin-head-action { max-width: none; min-height: 30px; padding: 4px 7px; }
  .admincp-content .admin-stat-grid { gap: 7px; padding-bottom: 9px; }
  .admincp-content .admin-stat-card { min-height: 92px; padding: 11px; border-radius: 11px; }
  .admincp-content .admin-stat-card span { font-size: 12px; }
  .admincp-content .admin-stat-card strong { font-size: 20px; }
  .admincp-content .admin-stat-card small { font-size: 11px; }
  .admincp-content .admin-subpanel > header strong { font-size: 14px; }
  .moderation-center-hero { min-height: 88px; gap: 10px; padding: 13px; }
  .moderation-center-hero > span { width: 48px; height: 48px; border-radius: 14px; }
  .moderation-center-hero > span svg { width: 23px; height: 23px; }
  .moderation-center-hero strong { font-size: 20px; }
  .moderation-center-hero p { font-size: 10px; line-height: 1.35; }
  .moderation-center-hero > button { width: 36px; min-height: 36px; justify-content: center; padding: 0; }
  .moderation-center-hero > button span { display: none; }
  .moderation-center-tabs button { min-height: 62px; gap: 7px; padding: 8px; }
  .moderation-center-tabs button > svg { width: 19px; height: 19px; }
  .moderation-center-content { padding: 9px; }
  .moderation-center-content > .admin-section-head { margin: -9px -9px 9px; }
  .modcp-prison-card { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 11px; }
  .modcp-prison-card > .avatar { width: 46px; height: 46px; }
  .modcp-prison-meta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 4px; }
  .modcp-prison-actions { width: 100%; }
  .modcp-prison-actions > button { flex: 1; justify-content: center; }
  .modcp-prison-person > button { font-size: 14px; }
  .modcp-prison-person > p { font-size: 12px; }
  .moderation-center-tabs button { min-height: 61px; gap: 6px; padding: 8px 5px; text-align: center; }
  .moderation-center-tabs button > svg { width: 18px; height: 18px; }
  .moderation-center-tabs button small { display: none; }
  .modcp-security-case > header { grid-template-columns: 42px minmax(0,1fr); }
  .modcp-security-case > header .avatar { width: 40px; height: 40px; }
  .modcp-security-case > header > em { grid-column: 1 / -1; justify-self: start; }
  .modcp-activity-row { grid-template-columns: 34px minmax(0, 1fr); padding: 11px; }
  .modcp-activity-icon { width: 34px; height: 34px; }
  .modcp-activity-row > time { grid-column: 2; }
  .modcp-activity-detail { grid-column: 1 / -1; }
  .modcp-activity-compare,.modcp-activity-facts { grid-template-columns: 1fr; }
  .modcp-activity-detail > header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .modcp-post-modal { padding: 7px; }
  .modcp-post-modal-card { max-height: calc(100dvh - 14px); border-radius: 11px; }
  .modcp-post-modal-body { padding: 11px; }
  .admin-user-card-actions em,
  .admin-user-manage-button { font-size: 12px !important; }
  .admincp-content .admin-two-column,
  .admincp-content .admin-storage-grid,
  .admincp-content .admin-cache-actions,
  .admincp-content .admin-game-control-grid { grid-template-columns: 1fr; gap: 8px; }
  .admin-selected-game-body { grid-template-columns: 1fr; }
  .admincp-content .admin-search-form { top: -9px; margin-bottom: 9px; border-radius: 11px; }
  .admin-access-unlock-search { grid-template-columns: 1fr auto !important; }
  .admin-access-unlock-search button.danger { grid-column: 1 / -1; }
  .admin-access-unlock-body { grid-template-columns: 1fr; padding: 9px; }
  .admin-access-unlock-card > header { grid-template-columns: 42px minmax(0, 1fr); padding: 10px; }
  .admin-access-unlock-card > header .avatar { width: 40px; height: 40px; }
  .admin-access-unlock-card > header > em { grid-column: 1 / -1; justify-self: start; }
  .admin-access-unlock-card > footer { align-items: stretch; flex-direction: column; }
  .admin-access-unlock-card > footer button { justify-content: center; }
  .admin-floating-modal { align-items: end; padding: 0; }
  .admin-floating-card { width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0; }
  .admin-floating-card > header { min-height: 68px; padding: 11px 13px; }
  .admin-floating-card > header small { font-size: 10px; }
  .admin-floating-card > header strong { font-size: 18px; }
  .admin-floating-card > header span { font-size: 12px; }
  .admin-floating-body { padding: 13px; }
  .admin-floating-body .admin-form-grid > label,
  .admin-floating-body .admin-user-edit label,
  .admin-floating-body .admin-user-tools label { font-size: 13px; }
  .admin-floating-body .admin-form-grid input,
  .admin-floating-body .admin-form-grid select,
  .admin-floating-body .admin-form-grid textarea,
  .admin-floating-body .admin-user-edit input,
  .admin-floating-body .admin-user-edit select,
  .admin-floating-body .admin-user-tools input { font-size: 14px; }
  .admin-floating-body .admin-form-grid,
  .admin-floating-body .admin-user-edit { grid-template-columns: 1fr; }
  .admin-floating-body .admin-form-grid > label.wide { grid-column: auto; }
  .admin-floating-body .admin-user-tools form,
  .admin-floating-body .admin-user-tools form[data-admin-password-form],
  .admin-floating-body .admin-user-tools form[data-admin-exclusive-badge-form] { grid-template-columns: 1fr; }
  .admincp-content .admin-tarot-management-body { grid-template-columns: 1fr; }
  .admincp-content .admin-tarot-management-body form > div { grid-template-columns: 1fr; }
  .admin-floating-body .admin-form-actions { bottom: -13px; margin: 14px -13px -13px; padding: 11px 13px; }
  .admin-shop-overview { grid-template-columns: 1fr; gap: 7px; }
  .admin-feed-manager > header { align-items: stretch; flex-direction: column; gap: 11px; }
  .admin-feed-manager > header nav { width: 100%; }
  .admin-feed-manager > header nav button { flex: 1; justify-content: center; }
  .admin-feed-post-search { flex-wrap: wrap; }
  .admin-feed-post-search > label { flex-basis: 100%; }
  .admin-feed-post-search > button { flex: 1; }
  .admin-feed-post-list { padding: 9px; }
  .admin-shop-overview > article { min-height: 66px; padding: 10px 12px; }
  .admin-shop-guide > div { grid-template-columns: 1fr; }
  .admin-shop-workbench { display: block; }
  .admin-shop-categories { position: static; display: flex; gap: 6px; margin-bottom: 9px; padding: 7px; overflow-x: auto; border-radius: 11px; }
  .admin-shop-categories > header { display: none; }
  .admin-shop-categories > button { min-width: max-content; min-height: 42px; grid-template-columns: 22px auto auto; gap: 5px; padding: 6px 9px; border: 1px solid #29364a; border-radius: 9px; }
  .admin-shop-categories > button.active { box-shadow: inset 0 -2px #f45167; }
  .admin-shop-categories > button small { display: none; }
  .admin-shop-toolbar { min-height: 52px; padding: 6px; }
  .admin-shop-toolbar > button { padding-inline: 9px; }
  .admin-shop-result-head > button { font-size: 12px !important; }
  .admin-shop-catalog { gap: 8px; }
  .admin-shop-catalog > article { grid-template-columns: 92px minmax(0,1fr); }
  .admin-shop-item-visual { min-height: 128px; }
  .admin-shop-item-copy { padding: 10px; }
  .admin-shop-editor-intro { grid-template-columns: 88px minmax(0,1fr); padding: 9px; }
  .admin-shop-editor-preview { min-height: 72px; }
}

/* Giữ bộ Hot Girl GocNho ưu tiên hơn các quy tắc tier và bảng màu chat chung. */
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] {
  border: 3px solid transparent !important;
  border-radius: 18px;
  outline: 0;
  background:
    linear-gradient(145deg, #4b3855 0%, #344b60 52%, #4b3853 100%) padding-box,
    linear-gradient(115deg, #ff91c8, #ffae91, #ffe188, #92e9c2, #8cddff, #a4a2ff, #dfa9ff, #ff91c8) border-box;
  background-size: 100% 100%;
  background-position: center;
  box-shadow: 0 9px 28px #0006, 0 0 20px #ffadd44a, 0 0 30px #9cddff2e;
}
.profile-panel[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame {
  inset: -7px;
  border: 1px solid #fff0f9b8;
  border-radius: 25px;
  box-shadow: inset 0 0 0 1px #ffb9dc47, 0 0 16px #bb9cff38;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame:after {
  display: none !important;
  content: none !important;
  transform: none !important;
}
.profile-panel[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > i { width: 21px; height: 21px; border-width: 2px; }
.profile-panel[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > i:before { inset: -7px; }
.profile-panel[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > span,
.profile-panel[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > b { opacity: .78; animation-duration: 18s; }

/* Hot Girl GocNho v3 — ngọc trai pastel, trẻ trung và không phủ ảnh. */
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] {
  --girl-ink: #6e5269;
  --girl-deep: #8b496d;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-inline: 0;
  border: 1px solid transparent !important;
  border-radius: 25px;
  outline: 0;
  background:
    linear-gradient(145deg, #fff9fc 0%, #edf8ff 50%, #f8f0ff 100%) padding-box,
    linear-gradient(115deg, #ffc1dc, #ffd5bd, #ffe9a8, #bdebd6, #b9e7ff, #cac9ff, #e6c3ff, #ffc1dc) border-box;
  background-size: 100% 100%;
  background-position: center;
  color: var(--girl-ink);
  box-shadow: 0 12px 32px #160d1f52, 0 0 0 3px #fff8fc8c, 0 0 22px #ffb7d652;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"]:before { display: none !important; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"]:after {
  z-index: 3;
  inset: 5px;
  display: block !important;
  border: 1px solid #fff;
  border-radius: 19px;
  background: none;
  box-shadow: inset 0 0 0 1px #f5cce04d;
  opacity: .9;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] > .panel-title {
  position: relative;
  z-index: 4;
  min-height: 48px;
  padding-inline: 14px;
  border-bottom: 1px solid #efd0e0 !important;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(90deg, #fff4f9, #edf8ff 52%, #f7f0ff) !important;
  color: var(--girl-deep);
  box-shadow: inset 0 -8px 18px #f1bfd51f;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] > .panel-title .refresh-action {
  border-color: #ecc5d9;
  background: #fffafd;
  color: #8c5675;
  box-shadow: 0 3px 9px #d89ab32e;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame {
  inset: -4px;
  box-sizing: border-box;
  border: 1px solid #fff8fc;
  border-radius: 29px;
  box-shadow: 0 0 0 1px #f4b9d455, 0 0 12px #ffb9d666;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame:before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed #eebbd2a8;
  border-radius: 22px;
  background: none;
  box-shadow: none;
  transform: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame:after {
  content: "୨୧" !important;
  position: absolute;
  inset: auto auto auto 50%;
  top: -12px;
  display: block !important;
  width: 42px;
  padding: 1px 7px 3px;
  border: 1px solid #efb9d2;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #ffeaf4);
  color: #db79a7;
  font-size: 15px;
  line-height: 18px;
  text-align: center;
  text-shadow: 0 1px #fff;
  box-shadow: 0 3px 9px #cf7da146;
  opacity: 1;
  filter: none;
  transform: translateX(-50%) !important;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > i {
  width: 15px;
  height: 15px;
  border: 1px solid #fff;
  border-radius: 55% 45% 55% 45%;
  background: radial-gradient(circle at 38% 32%, #fff 0 15%, #ffd0e3 25%, #f5a5c8 58%, #c98fb8 100%);
  box-shadow: inset 0 0 3px #fff, 0 0 7px #f2a7c6a8;
  filter: none;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > i:before {
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 20deg, #ffc7dd80 0 12%, transparent 13% 30%, #c9eaff80 31% 43%, transparent 44% 62%, #e0c9ff80 63% 75%, transparent 76%);
  filter: none;
}

.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > .top-left { top: -3px; left: -3px; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > .top-right { top: -3px; right: -3px; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > .bottom-left { bottom: -3px; left: -3px; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > .bottom-right { right: -3px; bottom: -3px; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > span {
  left: 24px;
  right: 24px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffc1dc, #ffd5bd, #ffe9a8, #bdebd6, #b9e7ff, #cac9ff, #e6c3ff, #ffc1dc);
  background-size: 300% 100%;
  box-shadow: 0 0 5px #efabc98c;
  opacity: .9;
  filter: none;
  animation: hotGirlRailFlow 18s ease-in-out infinite alternate !important;
}


.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > b { display: none; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-cover {
  margin: 5px 5px 0;
  overflow: hidden;
  border: 1px solid #efd2e0;
  border-radius: 19px 19px 8px 8px;
  background-color: #eef5f9;
  box-shadow: 0 4px 12px #8d60792b;
  filter: none !important;
}

.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity {
  margin-inline: 5px;
  background: linear-gradient(100deg, #fff8fb, #eef8ff 56%, #f8f1ff);
  border-color: #efd3e1;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-wall-avatar {
  border-color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #efb9d3, 0 6px 16px #9d668344;
  filter: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-copy {
  padding: 9px 11px;
  border: 1px solid #edcadd;
  border-radius: 15px;
  background: #ffffffd9;
  box-shadow: 0 3px 10px #b9829d24;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-copy strong { color: #934c72; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-copy > span,
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-copy small,
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-id,
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-id-location-row .profile-identity-id { color: #755d72; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-bio {
  color: #76566f;
  text-shadow: 0 1px #fff;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-actions {
  margin: 4px 6px 7px;
  border: 1px solid #eccddd;
  border-radius: 16px;
  background: #fff9fc !important;
  box-shadow: 0 3px 10px #a56a8724;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-actions button {
  border-color: #e8bfd3;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #f9eaf2);
  color: #76546d;
  box-shadow: 0 2px 6px #ad718e29;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats {
  margin: 0 6px 7px;
  overflow: hidden;
  border: 1px solid #e7cbda;
  border-radius: 16px;
  background: #ead4df !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats button {
  background: linear-gradient(155deg, #fffafd, #edf7ff);
  color: #796276;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats button:nth-child(even) { background: linear-gradient(155deg, #f7f0ff, #fff8fb); }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats button:hover {
  background: linear-gradient(155deg, #ffeaf4, #e8f6ff);
  color: #754761;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats b { color: #6b4c62; }

@media (max-width: 620px) {
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] { border-radius: 20px; }
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame { inset: -3px; border-radius: 24px; }
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame:after { top: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > span { animation: none !important; }
}

/* Hot Girl GocNho v4 — chỉ có khung hồng sáng và cầu vồng, không có nền skin. */
@keyframes hotGirlRainbowFrame {
  0% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@keyframes hotGirlRainbowVertical {
  0% { background-position: 50% 0; }
  50% { background-position: 50% 100%; }
  100% { background-position: 50% 0; }
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] {
  overflow: visible;
  border: 0 !important;
  border-radius: 25px;
  outline: 0;
  background: transparent !important;
  color: inherit;
  box-shadow: 0 0 0 1px #ffb4d787, 0 0 13px #ff4fa880, 0 0 28px #ff76bd52;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"]:before {
  content: "";
  position: absolute;
  z-index: 7;
  inset: -4px;
  display: block !important;
  padding: 3px;
  border-radius: 29px;
  background: linear-gradient(90deg, #ff43aa, #ff6b72, #ffc44f, #58e08b, #48cfff, #687cff, #c45cff, #ff43aa);
  background-size: 400% 400%;
  box-shadow: none;
  opacity: 1;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px #ff4fac) drop-shadow(0 0 9px #ff8dcc80);
  animation: hotGirlRainbowFrame 7s ease-in-out infinite !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"]:after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 3px;
  display: block !important;
  border: 1px solid #fff5fb;
  border-radius: 21px;
  background: none !important;
  box-shadow: inset 0 0 5px #ff79bd91, 0 0 5px #ff7cbe73;
  opacity: .95;
  pointer-events: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] > .panel-title {
  min-height: 43px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(#202329, #181b20) !important;
  color: var(--green);
  box-shadow: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] > .panel-title .refresh-action {
  border-color: var(--line);
  background: #14171b;
  color: var(--muted);
  box-shadow: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame {
  inset: -6px;
  border: 1px solid #ff9dca;
  border-radius: 31px;
  background: none !important;
  box-shadow: inset 0 0 0 1px #fff6fbad, 0 0 8px #ff4ca6, 0 0 18px #ff6db78c;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame:before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #ffcae2d6;
  border-radius: 24px;
  background: none !important;
  box-shadow: inset 0 0 6px #ff62b164;
  transform: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame:after {
  display: none !important;
  content: none !important;
  background: none !important;
  transform: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > i {
  width: 14px;
  height: 14px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 14%, #ffb9dc 25%, #ff4ea8 58%, #b91668 100%);
  box-shadow: inset 0 0 3px #fff, 0 0 6px #fff, 0 0 12px #ff4ca8;
  filter: none;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > i:before {
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffedf7 0 18%, #ff58ae7d 20% 42%, transparent 44%);
  filter: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > i:after {
  inset: 4px;
  border: 0;
  background: #fff;
  box-shadow: 0 0 4px #fff;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > .top-left { top: -2px; left: -2px; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > .top-right { top: -2px; right: -2px; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > .bottom-left { bottom: -2px; left: -2px; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > .bottom-right { right: -2px; bottom: -2px; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > span,
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > b {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff43aa, #ff6b72, #ffc44f, #58e08b, #48cfff, #687cff, #c45cff, #ff43aa);
  background-size: 400% 100%;
  box-shadow: 0 0 5px #fff, 0 0 9px #ff4da8;
  opacity: 1;
  filter: none;
  animation: hotGirlRainbowFrame 7s ease-in-out infinite !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > span {
  left: 22px;
  right: 22px;
  height: 2px;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > span.top { top: 0; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > span.bottom { bottom: 0; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > b {
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: linear-gradient(180deg, #ff43aa, #ff6b72, #ffc44f, #58e08b, #48cfff, #687cff, #c45cff, #ff43aa);
  background-size: 100% 400%;
  animation: hotGirlRainbowVertical 7s ease-in-out infinite !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > b.left { left: 0; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > b.right { right: 0; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-cover {
  margin: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background-color: #17191e;
  box-shadow: none;
  filter: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-cover:after {
  display: none !important;
  content: none !important;
  background: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity {
  margin-inline: 0;
  background: #050607;
  border-color: transparent;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-wall-avatar {
  border-color: #ff9dcc;
  box-shadow: inset 0 0 0 3px #08090b, 0 0 0 2px #ff9dcc, 0 0 15px #ff4da879;
  filter: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-copy {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-copy strong { color: var(--orange); }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-copy > span { color: var(--green); }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-copy small,
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-id,
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-id-location-row .profile-identity-id { color: #aeb7c2; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-bio {
  color: var(--green);
  text-shadow: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-actions {
  margin: 0;
  padding: 0 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-actions button {
  border-color: var(--line);
  border-radius: 4px;
  background: #1a1d22;
  color: #d3d9e1;
  box-shadow: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats {
  margin: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid #29313b;
  border-radius: 0 0 22px 22px;
  background: #29313b !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats button,
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats button:nth-child(even) {
  background: linear-gradient(160deg, #151a20, #0b0e12);
  color: #9da9b6;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats button:hover {
  background: linear-gradient(160deg, #203348, #111923);
  color: #e6edf5;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats b { color: #f3f7fb; }

@media (max-width: 620px) {
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] { border-radius: 21px; }
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"]:before { inset: -3px; border-radius: 25px; }
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame { inset: -4px; border-radius: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"]:before,
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > span,
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-skin-frame > b { animation: none !important; }
}

/* Hot Girl GocNho v5 — viền riêng cho ảnh nền và phần dưới sáng hơn. */
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-cover {
  margin: 7px 8px 0;
  overflow: hidden;
  border: 1px solid #ff8fc5;
  border-radius: 18px 18px 10px 10px;
  background-color: #17191e;
  box-shadow: 0 0 0 2px #fff2f8a6, 0 0 10px #ff4fa875, 0 5px 16px #0007;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-cover:after {
  content: "" !important;
  position: absolute;
  z-index: 2;
  inset: 4px;
  display: block !important;
  padding: 2px;
  border: 0;
  border-radius: 13px 13px 7px 7px;
  background: linear-gradient(90deg, #ff43aa, #ff6b72, #ffc44f, #58e08b, #48cfff, #687cff, #c45cff, #ff43aa) !important;
  background-size: 400% 100% !important;
  box-shadow: none;
  opacity: .95;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 4px #ff65b5);
  animation: hotGirlRainbowFrame 8s ease-in-out infinite !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity {
  margin: 7px 8px 0;
  border: 1px solid #ff8fc59e;
  border-radius: 14px;
  background: linear-gradient(105deg, #3b2335ed, #22384aed 58%, #35273fed);
  box-shadow: inset 0 0 14px #ffb6d626, 0 4px 12px #0005;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-copy {
  padding: 8px 10px;
  border: 1px solid #ffc2dda6;
  border-radius: 11px;
  background: linear-gradient(110deg, #513449cc, #2d465acc);
  box-shadow: inset 0 0 10px #ffd9e820;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-copy strong { color: #ffb8d8; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-copy > span { color: #f4d9e9; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-copy small,
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity-id,
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-id-location-row .profile-identity-id { color: #d9c7d4; }
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-bio {
  margin: 0 8px;
  color: #ffd7ea;
  text-shadow: 0 0 8px #ff5aae59;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-actions {
  margin: 0 8px 8px;
  padding: 9px;
  border: 1px solid #ff91c69e;
  border-radius: 14px;
  background: linear-gradient(105deg, #342333ed, #203747ed) !important;
  box-shadow: inset 0 0 12px #ffbed92b, 0 4px 12px #0004;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-actions button {
  border-color: #e8aeca;
  border-radius: 9px;
  background: linear-gradient(180deg, #4c3548, #2d2c3c);
  color: #fff1f8;
  box-shadow: inset 0 1px #ffffff1f, 0 2px 7px #0004;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-actions button:hover {
  border-color: #ffc7e0;
  background: linear-gradient(180deg, #654157, #354255);
  color: #fff;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats {
  margin: 0 8px 8px;
  border: 1px solid #dc9fc2;
  border-radius: 14px 14px 19px 19px;
  background: #59405a !important;
  box-shadow: 0 4px 13px #0005, 0 0 9px #ff62b341;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats button,
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats button:nth-child(even) {
  background: linear-gradient(155deg, #3c3041, #1d3343);
  color: #e8dce6;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats button:nth-child(even) {
  background: linear-gradient(155deg, #442f42, #27354a);
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats button:hover {
  background: linear-gradient(155deg, #5d3b55, #294b60);
  color: #fff;
}
.profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats b { color: #fff7fb; }

@media (max-width: 620px) {
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-cover,
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-identity,
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-actions,
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-stats { margin-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-panel.has-profile-skin[data-skin-pattern="aurora"][data-skin-tier="4"] .profile-cover:after { animation: none !important; }
}

#direct-conversation-panel[data-message-frame-theme="aurora"],
#direct-conversation-panel .direct-message[data-message-frame-theme="aurora"] {
  --mf-list-bg: radial-gradient(circle at 12% 10%, #ff7eb61f, transparent 30%), radial-gradient(circle at 88% 82%, #72ccff1c, transparent 35%), linear-gradient(155deg, #1b1022, #081018 76%);
  --mf-in-bg: linear-gradient(145deg, #33213f, #1b1729);
  --mf-in-border: #c9a9ee;
  --mf-in-text: #fff8fc;
  --mf-in-muted: #e8cfe0;
  --mf-own-bg: linear-gradient(145deg, #a83d79, #5a347d);
  --mf-own-border: #ffb6da;
  --mf-own-text: #fff9fd;
  --mf-own-muted: #f5d7e8;
  --mf-accent: #fff0fa;
  --mf-danger: #ffabc1;
  --mf-control-bg: #2b1b37;
  --mf-control-border: #a978c3;
}
#direct-conversation-panel[data-message-frame-theme="aurora"] .direct-message-list {
  background: linear-gradient(120deg, #ff7eb610, #ff9d7810, #ffd66b0d, #7ee6b310, #72ccff12, #8b8ff712, #d99bff12), var(--mf-list-bg);
  background-size: 260% 260%, 100% 100%;
  animation: sevenBloomShift 24s ease-in-out infinite;
}
.admin-mood-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}.admin-mood-toolbar button{display:inline-flex;align-items:center;gap:7px}.admin-mood-catalog{display:grid;gap:16px}.admin-mood-category>header{align-items:center;gap:14px}.admin-mood-category.is-inactive{opacity:.7}.admin-mood-category-title{display:flex;align-items:center;gap:11px}.admin-mood-category-title>span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--soft-bg,#f4f6fb);font-size:24px}.admin-mood-category-title div{display:grid;gap:3px}.admin-mood-category-title small{color:var(--muted,#7b8190)}.admin-mood-category-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.admin-mood-category-actions button{display:inline-flex;align-items:center;gap:6px}.admin-mood-category-actions em{font-size:12px;font-style:normal;color:#16815f;background:#e9faf3;border-radius:999px;padding:5px 9px}.admin-mood-category.is-inactive .admin-mood-category-actions em{color:#8a5a12;background:#fff4dc}.admin-mood-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:10px;padding-top:14px}.admin-mood-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--line,#e6e8ef);border-radius:14px;background:var(--surface,#fff)}.admin-mood-item.is-inactive{opacity:.58}.admin-mood-item-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--soft-bg,#f5f6fa);font-size:25px}.admin-mood-item>div{display:grid;gap:3px;min-width:0}.admin-mood-item small,.admin-mood-item em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-mood-item small{color:var(--text-soft,#646b78)}.admin-mood-item em{font-size:11px;font-style:normal;color:var(--muted,#8b91a0)}.admin-mood-item>button{display:inline-flex;align-items:center;gap:5px}@media(max-width:680px){.admin-mood-category>header{align-items:flex-start}.admin-mood-category-actions{justify-content:flex-start}.admin-mood-grid{grid-template-columns:1fr}.admin-mood-item{grid-template-columns:40px minmax(0,1fr)}.admin-mood-item>button{grid-column:2;justify-self:start}}

/* Compact profile header and information list. */
#wall-cover.no-cover-image {
  aspect-ratio: 6 / 1;
}

#profile-info-panel .panel-title {
  min-height: 31px;
  padding: 3px 7px;
  font-size: 13px;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
}

.profile-info-grid::after {
  content: "";
  display: block;
  background: #050607;
}

.profile-info-grid p,
.profile-detail-loading .profile-info-grid p {
  min-width: 0;
  min-height: 31px;
  grid-template-columns: 16px minmax(72px, auto) minmax(0, 1fr);
  gap: 4px;
  padding: 3px 6px;
  border-bottom: 0;
  background: #050607;
  font-size: 12px;
  line-height: 1.3;
}

.profile-info-grid svg {
  width: 14px;
  height: 14px;
}

.profile-info-grid p > b,
.profile-info-grid .profile-relationship-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-info-grid .profile-marriage-action,
.profile-info-grid .profile-actions .profile-marriage-action {
  min-height: 24px;
  padding: 2px 6px;
  font-size: 10px;
}

@media (max-width: 520px) {
  .profile-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-info-grid::after {
    display: block;
  }

  .profile-info-grid p,
  .profile-detail-loading .profile-info-grid p {
    min-height: 42px;
    grid-template-columns: 16px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 4px;
    row-gap: 0;
    padding: 3px 5px;
    font-size: 12px;
  }

  .profile-info-grid p > svg { grid-row: 1 / 3; }
  .profile-info-grid p > :not(svg) { grid-column: 2; }
}

/* Keep marriage status first and compact on one full-width row. */
.profile-info-grid .profile-relationship-row,
.profile-detail-loading .profile-info-grid .profile-relationship-row {
  grid-column: 1 / -1;
  min-height: 35px;
  grid-template-columns: 16px 72px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-content: center;
  padding: 4px 7px;
}

/* Gia Tộc is an always-full profile row so its name and invite action never
   compete with an unrelated information cell. */
.profile-info-grid .profile-clan-row,
.profile-detail-loading .profile-info-grid .profile-clan-row {
  grid-column: 1 / -1;
  min-height: 35px;
  grid-template-columns: 16px 72px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-content: center;
  padding: 4px 7px;
}
.profile-info-grid .profile-clan-row > svg { grid-column: 1; grid-row: 1; }
.profile-info-grid .profile-clan-row > span:nth-child(2) { grid-column: 2; grid-row: 1; white-space: nowrap; }
.profile-info-grid .profile-clan-row > .profile-clan-value { grid-column: 3; grid-row: 1; min-width: 0; }

.profile-info-grid .profile-relationship-row > svg {
  grid-column: 1;
  grid-row: 1;
}

.profile-info-grid .profile-relationship-row > span:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
}

.profile-info-grid .profile-relationship-row > .profile-relationship-value {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.profile-relationship-row #profile-relationship,
.profile-marriage-copy {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
}

.profile-marriage-copy > span,
.profile-marriage-days,
.profile-relationship-row .profile-marriage-actions {
  flex: 0 0 auto;
}

.profile-marriage-copy .profile-relationship-partner {
  display: inline-flex;
  min-width: 0;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-relationship-row .profile-marriage-actions {
  flex-wrap: nowrap;
}

@media (max-width: 520px) {
  .profile-info-grid .profile-relationship-row,
  .profile-detail-loading .profile-info-grid .profile-relationship-row {
    min-height: 36px;
    grid-template-columns: 15px 62px minmax(0, 1fr);
    grid-template-rows: 1fr;
    padding: 3px 5px;
    font-size: 11px;
  }

  .profile-marriage-copy .profile-relationship-partner { max-width: 96px; }
  .profile-relationship-row .profile-marriage-days { margin-left: 3px; padding: 2px 5px; font-size: 10px; }
  .profile-relationship-row .profile-marriage-days > span { font-size: 11px; }
  .profile-info-grid .profile-clan-row,
  .profile-detail-loading .profile-info-grid .profile-clan-row {
    min-height: 36px;
    grid-template-columns: 15px 62px minmax(0, 1fr);
    grid-template-rows: 1fr;
    padding: 3px 5px;
    font-size: 11px;
  }
}

/* Admin CP: editable level and EXP catalog. */
.admin-level-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 auto 16px}.admin-level-add>form{display:flex;align-items:end;gap:10px;padding:14px}.admin-level-add>form label{display:grid;flex:1;gap:6px;color:#aeb9c6;font-size:11px}.admin-level-add>form input,.admin-level-inline-form input{min-height:38px;border:1px solid #3a4655;border-radius:6px;background:#0b1016;color:#edf4fc;padding:7px 9px}.admin-level-add>form button{min-height:38px;white-space:nowrap}.admin-level-table .admin-table-scroll{max-height:650px;overflow:auto}.admin-level-table thead{position:sticky;top:0;z-index:2}.admin-level-table td strong{color:#edf2f8}.admin-level-inline-form{display:flex;align-items:center;gap:6px}.admin-level-inline-form input{width:150px}.admin-level-inline-form span{color:#8592a2;font-size:10px}.admin-level-inline-form button{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:6px 9px;border:1px solid #3f668d;border-radius:5px;background:#14283b;color:#a9d7ff;cursor:pointer}.admin-level-inline-form button svg{width:13px;height:13px}.admin-level-start{display:inline-flex;padding:5px 8px;border-radius:999px;background:#173522;color:#89e5a8;font-size:10px;font-weight:800}
.admin-farm-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 auto 16px}.admin-farm-level-table,.admin-farm-catalog{margin-bottom:16px!important}.admin-farm-level-table .admin-table-scroll{max-height:720px;overflow:auto}.admin-farm-level-table thead{position:sticky;top:0;z-index:2}.admin-farm-unlocks{min-width:260px;white-space:normal!important;line-height:1.65}.admin-farm-unlocks>span{color:#697583}.admin-farm-catalog td:first-child strong,.admin-farm-level-table td:first-child strong{color:#edf4fb}.admin-farm-catalog td:first-child small{max-width:360px;white-space:normal;line-height:1.45}.admin-farm-catalog td.positive{color:#74e693;font-weight:800}.admin-farm-catalog td.negative{color:#ff7c89;font-weight:800}
.admin-farm-level-add{margin-bottom:16px!important}.admin-farm-level-add>form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto}.admin-farm-level-inline-form{display:grid;grid-template-columns:minmax(132px,1fr) minmax(112px,.8fr) auto;align-items:end;gap:7px;min-width:390px}.admin-farm-level-inline-form label{display:grid;gap:4px}.admin-farm-level-inline-form small{color:#8290a0;font-size:9px;white-space:nowrap}.admin-farm-level-inline-form input{width:100%;min-height:36px;border:1px solid #3a4655;border-radius:6px;background:#0b1016;color:#edf4fc;padding:6px 8px}.admin-farm-level-inline-form button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;padding:6px 9px;border:1px solid #3f668d;border-radius:6px;background:#14283b;color:#a9d7ff;cursor:pointer}.admin-farm-level-inline-form button svg{width:13px;height:13px}
@media(max-width:700px){.admin-level-stats{grid-template-columns:1fr}.admin-level-add>form{align-items:stretch;flex-direction:column}.admin-level-inline-form input{width:112px}.admin-level-table th:nth-child(4),.admin-level-table td:nth-child(4){display:none}.admin-farm-level-add>form{display:flex}.admin-farm-level-inline-form{min-width:330px;grid-template-columns:minmax(112px,1fr) minmax(96px,.8fr) auto}}
@media(max-width:900px){.admin-farm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.admin-farm-stats{grid-template-columns:1fr}.admin-farm-unlocks{min-width:210px}}

/* Profile edit modal. */
.profile-edit-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(520px,calc(100vw - 20px));max-width:100%;max-height:calc(100dvh - 20px);padding:0;overflow:hidden;box-sizing:border-box}.profile-edit-body{min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;padding:15px 16px 3px}.profile-edit-card .form-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.profile-edit-card.profile-form input,.profile-edit-card.profile-form select,.profile-edit-card.profile-form textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box}.profile-edit-card.profile-form textarea{margin:6px 0 0}.profile-edit-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:#090b0e}.profile-edit-actions button{min-height:40px;padding:8px 16px;border:1px solid #414b57;border-radius:6px;background:#171b20;color:#cfd6df;cursor:pointer;font-weight:800}.profile-edit-actions .primary-button{border-color:#367fe0;background:#1769d7;color:#fff}.profile-edit-actions button:disabled{opacity:.6;cursor:wait}@media(max-width:560px){.profile-settings-panel{padding:10px}.profile-edit-card{width:100%;max-height:calc(100dvh - 20px)}.profile-edit-body{padding:13px 12px 2px}.profile-edit-card .form-two{grid-template-columns:1fr}.profile-edit-actions{padding:10px 12px}.profile-edit-actions button{flex:1}}

/* Gmail verification inside profile editing. */
.profile-email-setting{margin-bottom:14px}.profile-email-setting>label{margin-bottom:0}.profile-email-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:stretch;gap:7px;margin-top:6px}.profile-edit-card.profile-form .profile-email-row input{margin-top:0}.profile-email-row>button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:112px;padding:8px 11px;border:1px solid #367fe0;border-radius:6px;background:#1769d7;color:#fff;cursor:pointer;font-size:12px;font-weight:900}.profile-email-row>button.profile-email-delete{min-width:78px;border-color:#a94959;background:#7d2635}.profile-email-row>button.profile-email-delete[hidden]{display:none!important}.profile-email-row>button svg{width:17px;height:17px}.profile-email-row>button:disabled{border-color:#46505d;background:#272d35;color:#8793a2;cursor:not-allowed;opacity:.82}.profile-email-verification-status{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:800;line-height:1.45}.profile-email-verification-status svg{flex:0 0 auto;width:15px;height:15px}.profile-email-verification-status.is-unverified{color:#ff7182}.profile-email-verification-status.is-pending{color:#f2bd57}.profile-email-verification-status.is-verified{color:#58dfa0}.profile-email-hint{display:block;margin-top:5px;color:#9ca9b8;font-size:11px;line-height:1.45}@media(max-width:480px){.profile-email-row{grid-template-columns:minmax(0,1fr) 48px 48px}.profile-email-row>button{min-width:48px;padding:8px}.profile-email-row>button span{display:none}}

/* Modern, device-friendly video player. */
.post-media-grid > .media-player{position:relative;isolation:isolate;contain:layout paint;display:block;min-width:0;height:360px;overflow:hidden;border:1px solid rgba(139,180,225,.28);border-radius:10px;background:#04070b;box-shadow:0 12px 34px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.025);color:#fff;aspect-ratio:16 / 9}
.post-media-grid.media-count-1 > .media-player{flex:0 1 760px;width:min(100%,760px);height:360px;max-width:100%;aspect-ratio:16 / 9}
.post-media-grid.media-count-1 > .media-player.is-portrait{flex-basis:300px;max-height:min(72vh,680px)}
.post-media-grid.media-count-3 > .media-player,.post-media-grid.media-count-4 > .media-player{height:240px;aspect-ratio:auto}
.post-media-grid .media-player video{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;background:#030508;transform:none;transition:filter .22s ease,opacity .22s ease}
.post-media-grid .media-player:hover video{transform:none}
.media-player-ambient{position:absolute;z-index:0;inset:0;background:radial-gradient(circle at 72% 18%,rgba(82,153,255,.22),transparent 38%),radial-gradient(circle at 18% 85%,rgba(255,76,166,.18),transparent 38%),linear-gradient(145deg,#101b2a,#070a10 54%,#180c18);pointer-events:none}
.media-player::after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(2,5,9,.62),transparent 28%,transparent 58%,rgba(2,4,7,.45));pointer-events:none;transition:opacity .22s ease}
.media-player.is-playing::after{opacity:.12}
.media-player-head{position:absolute;z-index:5;top:10px;right:10px;left:10px;display:flex;align-items:center;gap:8px;pointer-events:none}
.media-player-label{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:5px 9px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(4,9,15,.72);box-shadow:0 5px 18px rgba(0,0,0,.2);color:#eef7ff;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(10px)}
.media-player-label svg{width:14px;height:14px;color:#77c4ff}
.media-player-meta{min-width:0;overflow:hidden;color:rgba(238,247,255,.78);font-size:10px;font-weight:700;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 5px #000}
.media-player-head button{display:grid;width:32px;height:32px;margin-left:auto;place-items:center;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(4,9,15,.72);box-shadow:0 5px 18px rgba(0,0,0,.24);color:#fff;cursor:pointer;pointer-events:auto;backdrop-filter:blur(10px)}
.media-player-head button:hover{border-color:#7cc8ff;background:rgba(26,66,99,.9)}
.media-player-head button svg{width:15px;height:15px}
.media-player-toggle{position:absolute;z-index:4;top:50%;left:50%;display:grid;width:74px;height:74px;place-items:center;padding:4px;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;transform:translate(-50%,-50%)}
.media-player-toggle>span{display:grid;width:66px;height:66px;place-items:center;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:linear-gradient(145deg,rgba(58,154,255,.95),rgba(92,65,218,.94));box-shadow:0 14px 38px rgba(26,103,214,.45),inset 0 1px rgba(255,255,255,.3);transition:transform .18s ease,box-shadow .18s ease}
.media-player-toggle:hover>span{transform:scale(1.07);box-shadow:0 17px 44px rgba(40,128,235,.56),inset 0 1px rgba(255,255,255,.38)}
.media-player-toggle svg{width:27px;height:27px;margin-left:3px;fill:currentColor;stroke-width:1.8}
.media-player.is-playing .media-player-toggle,.media-player.is-loading .media-player-toggle,.media-player.has-error .media-player-toggle{visibility:hidden;opacity:0;pointer-events:none}
.media-player-loading{position:absolute;z-index:5;top:50%;left:50%;display:flex;align-items:center;gap:8px;max-width:calc(100% - 28px);padding:9px 13px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(3,8,14,.8);box-shadow:0 10px 30px rgba(0,0,0,.32);color:#e6f4ff;font-size:11px;font-weight:750;white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none;backdrop-filter:blur(12px)}
.media-player-loading svg{width:17px;height:17px;color:#72c8ff;animation:media-player-spin .85s linear infinite}
.media-player:not(.is-loading) .media-player-loading{display:none}
.media-player-error{position:absolute;z-index:8;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;padding:48px 18px 22px;background:radial-gradient(circle at 50% 28%,rgba(38,78,118,.28),transparent 38%),rgba(3,7,12,.94);text-align:center;backdrop-filter:blur(9px)}
.media-player-error[hidden]{display:none}
.media-player-error-icon{display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(255,180,115,.35);border-radius:50%;background:rgba(255,132,63,.12);color:#ffb16f}
.media-player-error-icon svg{width:21px;height:21px}
.media-player-error strong{font-size:14px;color:#f5f8fc}
.media-player-error p{max-width:440px;margin:0;color:#aebbc9;font-size:11px;line-height:1.55}
.media-player-error>div{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:4px}
.media-player-error button,.media-player-error a{position:static;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;height:auto;min-height:35px;padding:7px 11px;border:1px solid #3e658c;border-radius:8px;background:#12283d;color:#cce9ff;cursor:pointer;overflow:visible;aspect-ratio:auto;box-shadow:none;font:800 10px/1.2 "Be Vietnam Pro",sans-serif;text-decoration:none}
.media-player-error button[data-media-buffer]{border-color:#69508d;background:#251c38;color:#e6d7ff}
.media-player-error a{border-color:transparent;background:transparent;color:#99a9ba}
.media-player-error button:hover,.media-player-error a:hover{filter:brightness(1.18)}
.media-player-error svg{width:14px;height:14px}
.media-player:fullscreen,.media-player:-webkit-full-screen{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;border:0;border-radius:0;aspect-ratio:auto!important}
@keyframes media-player-spin{to{transform:rotate(360deg)}}
@media(max-width:620px){.post-media-grid{border-radius:8px}.post-media-grid > .media-player{height:230px;border-radius:8px}.post-media-grid.media-count-1 > .media-player{width:100%;height:230px}.post-media-grid.media-count-1 > .media-player.is-portrait{width:min(100%,300px);max-height:70dvh}.post-media-grid.media-count-3 > .media-player,.post-media-grid.media-count-4 > .media-player{height:180px}.media-player-head{top:7px;right:7px;left:7px}.media-player-label{min-height:25px;padding:4px 7px;font-size:9px}.media-player-head button{width:29px;height:29px}.media-player-toggle>span{width:58px;height:58px}.media-player-toggle svg{width:24px;height:24px}.media-player-error{padding:42px 12px 18px}.media-player-error p{font-size:10px}.media-player-error button,.media-player-error a{min-height:33px;padding:6px 9px;font-size:9px}}
@media(max-width:390px){.media-player-meta{display:none}.post-media-grid.media-count-3 > .media-player,.post-media-grid.media-count-4 > .media-player{height:150px}.media-player-error-icon{display:none}.media-player-error{gap:5px}.media-player-error>div{gap:5px}.media-player-error a{min-height:28px}}
@supports(aspect-ratio:1 / 1){.post-media-grid.media-count-1 > .media-player{height:auto}}
@media(prefers-reduced-motion:reduce){.media-player-loading svg{animation-duration:1.6s}.media-player-toggle>span{transition:none}}

/* Floating shortcut shown after the page has been scrolled. */
.back-to-top {
  position: fixed;
  z-index: 90;
  right: max(16px, calc((100vw - 1240px) / 2 + 16px));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  padding: 0;
  border: 1px solid #4d8dcc;
  border-radius: 50%;
  background: rgba(14, 26, 39, .94);
  box-shadow: 0 7px 22px rgba(0, 0, 0, .48), 0 0 14px rgba(81, 164, 244, .2);
  color: #d9edff;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { border-color: #83c3ff; background: #193853; color: #fff; transform: translateY(-2px); }
.back-to-top:focus-visible { outline: 3px solid rgba(110, 187, 255, .45); outline-offset: 3px; }
.back-to-top svg { width: 21px; height: 21px; stroke-width: 2.4; }
@media (max-width: 620px) {
  .back-to-top { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: no-preference) {
  .back-to-top { transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
}

/* Bitch: gift-only profile + message bundle, heart-heavy with no continuous motion. */
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] {
  overflow: visible;
  border: 2px solid #ff5ead;
  border-radius: 22px;
  outline: 1px solid #ffc5e2;
  outline-offset: 3px;
  background: linear-gradient(155deg, #2b0d20, #130911 48%, #250c1d) !important;
  box-shadow: inset 0 0 24px #ff4fa81f, 0 0 0 1px #ff9dca5c, 0 0 18px #ff4fa85c;
  filter: none !important;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"]:before {
  content: "♥  ♡  ♥  ♡  ♥  ♡  ♥";
  z-index: 7;
  inset: 5px 18px auto;
  height: 15px;
  overflow: hidden;
  background: none;
  color: #ff9fd1;
  font: 900 10px/15px sans-serif;
  letter-spacing: .14em;
  text-align: center;
  text-shadow: 0 0 7px #ff4fa8;
  opacity: .9;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"]:after {
  z-index: 6;
  inset: 7px;
  border: 1px solid #ff9fd17d;
  border-radius: 15px;
  background: none;
  box-shadow: inset 0 0 12px #ff4fa81f;
  opacity: 1;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] > .panel-title {
  min-height: 45px;
  padding-top: 15px;
  border-bottom: 1px solid #a94575;
  border-radius: 19px 19px 0 0;
  background: linear-gradient(180deg, #3d132d, #1c0b17) !important;
  color: #ffd6e9;
  box-shadow: inset 0 -5px 14px #ff4fa812;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame {
  inset: -7px;
  display: block;
  border: 2px solid #ff63b0;
  border-radius: 28px;
  background: none;
  box-shadow: inset 0 0 0 1px #ffc5e2, 0 0 10px #ff4fa86b;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame:before,
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame:after {
  position: absolute;
  top: auto;
  bottom: auto;
  left: 38px;
  right: 38px;
  width: auto;
  height: 13px;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #ffb4d8;
  font: 900 10px/13px sans-serif;
  letter-spacing: .16em;
  opacity: 1;
  filter: none;
  transform: none;
  animation: none !important;
  text-align: center;
  text-shadow: 0 0 6px #ff4fa8;
  white-space: nowrap;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame:before { content: "♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥"; top: -7px; }
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame:after { content: "♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡"; bottom: -7px; }
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  background: #2b0c20;
  box-shadow: 0 0 0 1px #ffb4d8, 0 0 9px #ff4fa8;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > i:before {
  content: "♥";
  position: static;
  z-index: 1;
  inset: auto;
  color: #ff71b8;
  background: none;
  filter: none;
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 0 6px #ff4fa8;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > i:after { content: none; }
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > .top-left { top: -5px; left: -5px; }
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > .top-right { top: -5px; right: -5px; }
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > .bottom-left { bottom: -5px; left: -5px; }
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > .bottom-right { right: -5px; bottom: -5px; }
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > span,
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > b {
  display: block;
  box-shadow: 0 0 5px #ff4fa875;
  filter: none;
  opacity: .88;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > span {
  left: 29px;
  right: 29px;
  height: 2px;
  background: repeating-linear-gradient(90deg, #ff5ead 0 8px, #ffd2e7 8px 12px, transparent 12px 17px);
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > span.top { top: 1px; }
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > span.bottom { bottom: 1px; }
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > b {
  top: 29px;
  bottom: 29px;
  width: 2px;
  background: repeating-linear-gradient(180deg, #ff5ead 0 8px, #ffd2e7 8px 12px, transparent 12px 17px);
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > b.left { left: 1px; }
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame > b.right { right: 1px; }
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-cover {
  margin: 8px 9px 0;
  border: 1px solid #ff71b8;
  border-radius: 15px 15px 8px 8px;
  box-shadow: 0 0 0 2px #4d1835, 0 5px 15px #0008;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-cover:after {
  content: "♥  ♡  ♥  ♡  ♥";
  inset: auto 9px 7px auto;
  background: none;
  color: #ffb4d8;
  font-size: 11px;
  letter-spacing: .12em;
  text-shadow: 0 0 6px #ff4fa8;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-identity {
  margin: 8px 9px 0;
  border: 1px solid #9c3b6b;
  border-radius: 13px;
  background: linear-gradient(120deg, #3b122c, #160b14 60%, #321026);
  box-shadow: inset 0 0 13px #ff4fa817;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-identity-copy {
  padding: 8px 10px;
  border: 1px solid #ff9fd15c;
  border-radius: 10px;
  background: #270e1dd9;
  box-shadow: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-wall-avatar {
  border-color: #ff82c1;
  box-shadow: inset 0 0 0 3px #10080e, 0 0 0 2px #ff82c1, 0 0 13px #ff4fa873;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-identity-copy strong { color: #ffb7d9; }
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-identity-copy > span,
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-bio { color: #ffe0ef; }
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-actions {
  margin: 0 9px 8px;
  border: 1px solid #943763;
  border-radius: 12px;
  background: #240d1bd9 !important;
  box-shadow: inset 0 0 10px #ff4fa815;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-actions button {
  border-color: #a94b78;
  border-radius: 8px;
  background: #351426;
  color: #ffe3f0;
  box-shadow: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-stats {
  margin: 0 9px 9px;
  border: 1px solid #a54072;
  border-radius: 12px 12px 17px 17px;
  background: #351327 !important;
  box-shadow: 0 4px 12px #0007;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-stats button,
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-stats button:nth-child(even) {
  background: linear-gradient(155deg, #321326, #160b14);
  color: #e8bfd3;
}
.profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-stats b { color: #fff0f7; }

.level-skin-preview[data-skin-pattern="bitch-hearts"],
.shop-demo-stage.profile-skin-demo[data-skin-pattern="bitch-hearts"] {
  border-color: #ff63b0;
  background: radial-gradient(circle at 20% 18%, #ff4fa836, transparent 28%), radial-gradient(circle at 82% 78%, #ff9fd126, transparent 32%), linear-gradient(145deg, #321126, #120910);
  box-shadow: inset 0 0 18px #ff4fa81f, 0 0 10px #ff4fa852;
}
.level-skin-preview[data-skin-pattern="bitch-hearts"]:before,
.shop-demo-stage.profile-skin-demo[data-skin-pattern="bitch-hearts"]:before {
  content: "♥  ♡  ♥  ♡  ♥";
  inset: 7px;
  display: grid;
  place-items: center;
  border: 1px solid #ff9fd178;
  border-radius: 10px;
  background: none;
  color: #ff9fd1;
  font-size: 11px;
  letter-spacing: .12em;
  text-shadow: 0 0 6px #ff4fa8;
  opacity: .9;
  transform: none;
  animation: none !important;
}
.level-skin-preview[data-skin-pattern="bitch-hearts"] i,
.level-skin-preview[data-skin-pattern="bitch-hearts"] span,
.level-skin-preview[data-skin-pattern="bitch-hearts"] b,
.level-skin-preview[data-skin-pattern="bitch-hearts"] em,
.shop-demo-stage.profile-skin-demo[data-skin-pattern="bitch-hearts"]:after,
.shop-demo-stage.profile-skin-demo[data-skin-pattern="bitch-hearts"] > i { animation: none !important; }

#direct-conversation-panel[data-direct-theme] .direct-conversation-head[data-message-frame-theme="bitch"],
.conversation-row[data-message-frame-theme="bitch"],
.message-frame-demo-card[data-message-frame-theme="bitch"] {
  border-color: #ff5ead;
  background: radial-gradient(circle at 12% 18%, #ff4fa832, transparent 28%), radial-gradient(circle at 86% 76%, #ff9fd126, transparent 31%), linear-gradient(145deg, #351126, #120910 75%);
  box-shadow: inset 0 0 0 1px #ffbee05c, inset 0 0 15px #ff4fa81f, 0 0 8px #ff4fa852;
  animation: none !important;
}
#direct-conversation-panel[data-message-frame-theme="bitch"],
#direct-conversation-panel .direct-message[data-message-frame-theme="bitch"] {
  --mf-list-bg: radial-gradient(circle at 11% 10%, #ff4fa82b, transparent 29%), radial-gradient(circle at 89% 82%, #ff9fd120, transparent 35%), linear-gradient(155deg, #260d1d, #09060a 76%);
  --mf-in-bg: linear-gradient(145deg, #3b182d, #21101b);
  --mf-in-border: #d76a9f;
  --mf-in-text: #fff5fa;
  --mf-in-muted: #e6bdd0;
  --mf-own-bg: linear-gradient(145deg, #b52f73, #681a49);
  --mf-own-border: #ff8bc5;
  --mf-own-text: #fff7fb;
  --mf-own-muted: #ffd0e5;
  --mf-accent: #ffe0f1;
  --mf-danger: #ff9cbd;
  --mf-control-bg: #311224;
  --mf-control-border: #ad4b7b;
}
#direct-conversation-panel[data-message-frame-theme="bitch"] .direct-message-list {
  background: radial-gradient(circle at 18% 22%, #ff4fa817 0 2px, transparent 3px), radial-gradient(circle at 76% 68%, #ff9fd112 0 2px, transparent 3px), var(--mf-list-bg);
  background-size: 58px 58px, 76px 76px, 100% 100%;
  animation: none !important;
}
@media (max-width: 620px) {
  .profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame:before,
  .profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-skin-frame:after { left: 27px; right: 27px; font-size: 8px; }
  .profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-cover,
  .profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-identity,
  .profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-actions,
  .profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"][data-skin-tier="4"] .profile-stats { margin-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-panel.has-profile-skin[data-skin-pattern="bitch-hearts"] *,
  [data-message-frame-theme="bitch"] { animation: none !important; }
}

/* Mị Dạ: gift-only profile + private-chat bundle. Restrained violet-black,
   static linework and a low-detail smoky backdrop keep the content readable. */
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] {
  overflow: visible;
  border: 1px solid #7d5a92 !important;
  border-radius: 20px;
  outline: 1px solid #30213a;
  outline-offset: 3px;
  background:
    linear-gradient(155deg, rgba(9, 5, 13, .72), rgba(5, 3, 8, .92)),
    url("/assets/images/skins/mi-da-wall-v1.webp") center / cover no-repeat,
    #07050a !important;
  box-shadow:
    inset 0 0 0 1px rgba(213, 190, 229, .08),
    inset 0 0 36px rgba(87, 43, 119, .18),
    0 12px 30px rgba(0, 0, 0, .45),
    0 0 15px rgba(108, 62, 143, .22);
  filter: none !important;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"]:before {
  content: "";
  display: block !important;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(8, 4, 12, .06), rgba(4, 2, 7, .7));
  opacity: 1;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"]:after {
  z-index: 6;
  inset: 6px;
  border: 1px solid rgba(190, 159, 211, .3);
  border-radius: 14px;
  background: none;
  box-shadow: inset 0 0 18px rgba(106, 62, 137, .08);
  opacity: 1;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] > .panel-title {
  min-height: 44px;
  padding-inline: 16px;
  border-bottom: 1px solid rgba(151, 109, 178, .42);
  border-radius: 19px 19px 0 0;
  background: linear-gradient(180deg, rgba(26, 15, 34, .96), rgba(10, 7, 14, .94)) !important;
  box-shadow: inset 0 -1px rgba(220, 198, 233, .05);
  color: #e7dced;
  letter-spacing: .015em;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] > .panel-title svg { color: #ad87c6; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] > .panel-title .refresh-action {
  border-color: rgba(143, 101, 169, .48);
  background: rgba(18, 11, 24, .82);
  color: #d8c7e2;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame {
  inset: -5px;
  display: block;
  border: 1px solid rgba(184, 148, 207, .78);
  border-radius: 25px;
  background: none;
  box-shadow: inset 0 0 0 1px rgba(49, 28, 61, .9), 0 0 10px rgba(112, 63, 145, .3);
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame:before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(147, 105, 174, .24);
  border-radius: 19px;
  box-shadow: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame:after {
  content: "☾";
  position: absolute;
  inset: -10px auto auto 50%;
  width: 34px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(190, 159, 211, .68);
  border-radius: 0 0 12px 12px;
  background: #0b0710;
  box-shadow: 0 5px 11px rgba(0, 0, 0, .42), 0 0 8px rgba(123, 73, 156, .24);
  color: #c9b2d8;
  font: 400 15px/1 Georgia, serif;
  opacity: 1;
  filter: none;
  transform: translateX(-50%);
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > i {
  width: 16px;
  height: 16px;
  border: 1px solid #a987bf;
  border-radius: 4px;
  background: linear-gradient(145deg, #21132c, #0b0710);
  box-shadow: inset 0 0 0 3px #0b0710, 0 0 6px rgba(135, 83, 169, .42);
  transform: rotate(45deg);
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > i:before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 0;
  border-radius: 50%;
  background: #d2c0dd;
  box-shadow: 0 0 5px #8d5baa;
  filter: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > i:after { content: none; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > .top-left { top: -3px; left: -3px; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > .top-right { top: -3px; right: -3px; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > .bottom-left { bottom: -3px; left: -3px; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > .bottom-right { right: -3px; bottom: -3px; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > span,
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > b {
  display: block;
  opacity: .58;
  filter: none;
  box-shadow: none;
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > span {
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #76508e 18%, #c7afd6 50%, #76508e 82%, transparent);
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > span.top { top: 1px; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > span.bottom { bottom: 1px; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > b {
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(180deg, transparent, #76508e 18%, #c7afd6 50%, #76508e 82%, transparent);
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > b.left { left: 1px; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > b.right { right: 1px; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-cover {
  margin: 8px 9px 0;
  border: 1px solid rgba(151, 110, 176, .72);
  border-radius: 14px 14px 8px 8px;
  box-shadow: inset 0 0 0 1px rgba(6, 3, 9, .72), 0 7px 16px rgba(0, 0, 0, .38);
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-cover.no-cover-image {
  background:
    linear-gradient(90deg, rgba(7, 4, 10, .35), rgba(7, 4, 10, .1), rgba(7, 4, 10, .35)),
    url("/assets/images/skins/mi-da-wall-v1.webp") center / cover no-repeat !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-identity {
  margin: 8px 9px 0;
  border: 1px solid rgba(123, 84, 148, .5);
  border-radius: 13px;
  background: linear-gradient(110deg, rgba(27, 15, 35, .88), rgba(7, 5, 10, .94) 62%, rgba(22, 12, 29, .88));
  box-shadow: inset 0 0 16px rgba(112, 63, 145, .08);
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-identity-copy {
  padding: 8px 11px;
  border: 1px solid rgba(177, 143, 198, .24);
  border-radius: 10px;
  background: rgba(13, 8, 17, .82);
  box-shadow: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-wall-avatar {
  border-color: #a27aba;
  box-shadow: inset 0 0 0 3px #08050b, 0 0 0 1px #c5add4, 0 0 12px rgba(119, 70, 151, .42);
  animation: none !important;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-identity-copy strong { color: #ebdff2; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-identity-copy > span,
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-identity-copy small,
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-bio { color: #cbbbd4; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-level-mood b,
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-level-mood em { color: #b995ce; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-bio {
  margin-inline: 12px;
  border-left: 1px solid rgba(166, 126, 190, .45);
  background: rgba(8, 5, 11, .36);
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-actions {
  margin: 0 9px 8px;
  border: 1px solid rgba(126, 88, 151, .52);
  border-radius: 11px;
  background: rgba(10, 7, 14, .78) !important;
  box-shadow: inset 0 1px rgba(225, 207, 236, .035);
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-actions button {
  border-color: rgba(128, 91, 151, .62);
  border-radius: 8px;
  background: linear-gradient(180deg, #24152e, #130c19);
  color: #dfd0e7;
  box-shadow: none;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-actions button:hover {
  border-color: #aa82c0;
  background: #2a1935;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-stats {
  margin: 0 9px 9px;
  border: 1px solid rgba(129, 91, 153, .48);
  border-radius: 11px 11px 16px 16px;
  background: rgba(8, 5, 11, .84) !important;
  box-shadow: 0 5px 13px rgba(0, 0, 0, .32);
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-stats button,
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-stats button:nth-child(even) {
  background: linear-gradient(155deg, rgba(25, 15, 32, .96), rgba(8, 5, 11, .96));
  color: #aa9bb4;
}
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-stats button:hover { background: #24152e; }
.profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-stats b { color: #e9ddf0; }

.level-skin-preview[data-skin-pattern="mi-da"],
.shop-demo-stage.profile-skin-demo[data-skin-pattern="mi-da"] {
  border: 1px solid #9270a8;
  border-radius: 13px;
  background:
    linear-gradient(rgba(7, 4, 10, .2), rgba(7, 4, 10, .52)),
    url("/assets/images/skins/mi-da-wall-v1.webp") center / cover no-repeat,
    #08050b;
  box-shadow: inset 0 0 0 1px rgba(219, 199, 231, .08), 0 0 10px rgba(105, 60, 135, .28);
}
.level-skin-preview[data-skin-pattern="mi-da"]:before {
  content: "☾";
  inset: 7px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(188, 158, 207, .42);
  border-radius: 9px;
  background: none;
  color: #cfbadb;
  font: 400 18px/1 Georgia, serif;
  text-shadow: 0 0 7px rgba(127, 78, 157, .7);
  opacity: 1;
  transform: none;
  animation: none !important;
}
.level-skin-preview[data-skin-pattern="mi-da"]:after {
  inset: 12px 17px;
  border: 0;
  border-top: 1px solid rgba(202, 178, 216, .18);
  border-bottom: 1px solid rgba(202, 178, 216, .18);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.level-skin-preview[data-skin-pattern="mi-da"] i,
.level-skin-preview[data-skin-pattern="mi-da"] span,
.level-skin-preview[data-skin-pattern="mi-da"] b,
.level-skin-preview[data-skin-pattern="mi-da"] em { display: none !important; animation: none !important; }
.shop-demo-stage.profile-skin-demo[data-skin-pattern="mi-da"]:before {
  inset: 8px;
  border: 1px solid rgba(188, 158, 207, .36);
  border-radius: 10px;
  background: none;
  box-shadow: none;
}
.shop-demo-stage.profile-skin-demo[data-skin-pattern="mi-da"]:after {
  left: 20px;
  right: 20px;
  top: auto;
  bottom: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b99dca, transparent);
  filter: none;
  opacity: .46;
  animation: none !important;
}
.shop-demo-stage.profile-skin-demo[data-skin-pattern="mi-da"] > i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #a583b9;
  border-radius: 50%;
  background: rgba(10, 6, 14, .82);
  box-shadow: inset 0 0 0 4px rgba(36, 20, 47, .72), 0 0 9px rgba(117, 70, 148, .34);
  animation: none !important;
}
.shop-demo-stage.profile-skin-demo[data-skin-pattern="mi-da"] > i:before {
  content: "☾";
  position: static;
  inset: auto;
  border: 0;
  background: none;
  color: #cfbadb;
  font: 400 18px/1 Georgia, serif;
}

#direct-conversation-panel[data-direct-theme] .direct-conversation-head[data-message-frame-theme="mi-da"],
.conversation-row[data-message-frame-theme="mi-da"],
.message-frame-demo-card[data-message-frame-theme="mi-da"] {
  border: 1px solid #805c96;
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(15, 9, 20, .62), rgba(6, 4, 9, .9)),
    url("/assets/images/skins/mi-da-wall-v1.webp") center / cover no-repeat,
    #08050b;
  box-shadow: inset 0 0 0 1px rgba(210, 189, 223, .09), inset 0 0 16px rgba(94, 53, 122, .12), 0 6px 16px rgba(0, 0, 0, .3);
  animation: none !important;
}
.direct-conversation-head[data-message-frame-theme="mi-da"]:before,
.conversation-row[data-message-frame-theme="mi-da"]:before,
.message-frame-demo-card[data-message-frame-theme="mi-da"]:before {
  border-color: #805c96;
  background: #0d0811;
  color: #d8c7e2;
  text-shadow: none;
}
.direct-conversation-head[data-message-frame-theme="mi-da"]:after,
.conversation-row[data-message-frame-theme="mi-da"]:after,
.message-frame-demo-card[data-message-frame-theme="mi-da"]:after {
  color: #b99acb;
  text-shadow: 0 0 5px rgba(110, 67, 139, .55);
  opacity: .68;
}
#direct-conversation-panel[data-message-frame-theme="mi-da"],
#direct-conversation-panel .direct-message[data-message-frame-theme="mi-da"] {
  --mf-list-bg: linear-gradient(rgba(6, 3, 9, .7), rgba(5, 3, 8, .88)), url("/assets/images/skins/mi-da-wall-v1.webp") center / 100% 100% no-repeat, #07050a;
  --mf-in-bg: linear-gradient(145deg, rgba(34, 23, 42, .98), rgba(15, 10, 20, .98));
  --mf-in-border: #725783;
  --mf-in-text: #eee7f2;
  --mf-in-muted: #ad9db6;
  --mf-own-bg: linear-gradient(145deg, #5b3572, #321c42 72%);
  --mf-own-border: #a47abd;
  --mf-own-text: #fbf7fd;
  --mf-own-muted: #d7c4e1;
  --mf-accent: #d9c6e4;
  --mf-danger: #d58aa8;
  --mf-control-bg: #18101f;
  --mf-control-border: #694c7c;
}
#direct-conversation-panel[data-message-frame-theme="mi-da"] .direct-message-list {
  background: var(--mf-list-bg);
  animation: none !important;
}
#direct-conversation-panel[data-direct-theme][data-message-frame-theme="mi-da"] .direct-message:not(.own) .direct-message-bubble {
  border-color: var(--mf-in-border);
  border-radius: 15px 15px 15px 5px;
  background: var(--mf-in-bg);
  color: var(--mf-in-text);
  backdrop-filter: none;
}
#direct-conversation-panel[data-direct-theme][data-message-frame-theme="mi-da"] .direct-message.own .direct-message-bubble {
  border-color: var(--mf-own-border);
  border-radius: 15px 15px 5px 15px;
  background: var(--mf-own-bg);
  color: var(--mf-own-text);
}
#direct-conversation-panel[data-message-frame-theme="mi-da"] .direct-message-bubble {
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 5px 13px rgba(0, 0, 0, .32);
}
#direct-conversation-panel[data-message-frame-theme="mi-da"] .direct-compose-dock {
  border-color: #5f466f;
  background: rgba(11, 7, 15, .94);
  box-shadow: inset 0 1px rgba(218, 197, 230, .04);
}
#direct-conversation-panel[data-message-frame-theme="mi-da"] .direct-send-button {
  background: linear-gradient(145deg, #684080, #3b244b);
  box-shadow: 0 4px 11px rgba(0, 0, 0, .28);
}

@media (max-width: 620px) {
  .profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] { border-radius: 16px; }
  .profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame { inset: -4px; border-radius: 20px; }
  .profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame:after { top: -9px; }
  .profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > i { width: 13px; height: 13px; }
  .profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-skin-frame > i:before { inset: 4px; }
  .profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-cover,
  .profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-identity,
  .profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-actions,
  .profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-stats { margin-inline: 6px; }
  .profile-panel.has-profile-skin[data-skin-pattern="mi-da"][data-skin-tier="4"] .profile-bio { margin-inline: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-panel.has-profile-skin[data-skin-pattern="mi-da"] *,
  [data-message-frame-theme="mi-da"] { animation: none !important; }
}

/* Compact top-up form and payment dialog */
.topup-hero{gap:9px;padding:10px 12px}.topup-hero-icon{width:42px;height:42px;border-radius:12px}.topup-hero-icon svg{width:22px;height:22px}.topup-hero>div:nth-child(2)>strong{font-size:16px}.topup-hero>div:nth-child(2)>p{font-size:9px;line-height:1.35}.topup-hero>aside{min-width:115px;padding:7px 9px}.topup-hero>aside strong{font-size:15px}.topup-content{gap:7px;padding:8px}.topup-admin-preview{padding:7px 9px;font-size:9px}.topup-compact-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:7px;padding:8px;border:1px solid #3a444e;border-radius:8px;background:#10151a}.topup-compact-form label{min-width:0;display:grid;gap:3px}.topup-compact-form label>span{color:#8e99a4;font-size:8px;font-weight:800}.topup-compact-form select{width:100%;min-height:34px;padding:5px 8px;border:1px solid #3d4852;border-radius:6px;background:#171d23;color:#edf3f8;font-size:10px}.topup-compact-form>div{display:flex;gap:5px}.topup-compact-form button,.topup-small-button{min-height:32px;padding:5px 9px;border-radius:6px;font-size:9px;white-space:nowrap}.topup-small-button{display:flex;align-items:center;justify-content:center;gap:4px;border:1px solid #4a5560;background:#1a2128;color:#c7d0d9;cursor:pointer}.topup-compact-form button svg,.topup-small-button svg{width:13px;height:13px}.topup-compact-note{display:flex;align-items:center;gap:5px;margin:0;padding:1px 3px;color:#818c97;font-size:8px;line-height:1.35}.topup-compact-note svg{flex:0 0 auto;width:12px;height:12px;color:#d6aa42}.topup-history-compact{overflow:hidden;border:1px solid #343e48;border-radius:8px;background:#0f1419}.topup-history-compact>summary{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 9px;color:#cdd5dd;font-size:9px;font-weight:800;cursor:pointer;list-style:none}.topup-history-compact>summary::-webkit-details-marker{display:none}.topup-history-compact>summary>span{display:flex;align-items:center;gap:5px}.topup-history-compact>summary svg{width:13px;height:13px;color:#d6aa42}.topup-history-compact>summary>b{min-width:20px;padding:2px 6px;border-radius:999px;background:#252e37;color:#abb6c0;font-size:8px;text-align:center}.topup-history-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 7px;border-top:1px solid #29323a;border-bottom:1px solid #29323a;background:#12181e}.topup-history-toolbar small{color:#798590;font-size:8px}.topup-history-toolbar button{display:flex;align-items:center;gap:4px;padding:4px 7px;border:1px solid #3b4650;border-radius:5px;background:#192027;color:#aeb9c4;font-size:8px;cursor:pointer}.topup-history-toolbar button svg{width:11px;height:11px}.topup-history-compact .topup-history-list{gap:3px;padding:5px}.topup-history-compact .topup-history-row{gap:6px;padding:6px 7px;border-radius:6px}.topup-history-compact .topup-history-row>svg{width:16px;height:16px}.topup-history-compact .topup-history-row strong{font-size:9px}.topup-history-compact .topup-history-row>b{padding:2px 5px;font-size:7px}.topup-payment-dialog{width:min(590px,calc(100vw - 18px));overflow:hidden}.topup-payment-compact{display:grid;grid-template-columns:190px minmax(0,1fr);gap:9px;padding:9px}.topup-qr-compact{display:grid;justify-items:center;align-content:start;gap:4px;padding:5px;border:1px solid #343d46;border-radius:8px;background:#fff}.topup-qr-compact img{display:block;width:180px;max-width:100%;aspect-ratio:1;object-fit:contain}.topup-qr-compact small{color:#4b535b;font-size:8px;font-weight:700}.topup-payment-fields{display:grid;align-content:start;gap:4px}.topup-payment-fields p{min-height:32px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:2px 6px;margin:0;padding:5px 7px;border:1px solid #303942;border-radius:6px;background:#12171c}.topup-payment-fields p>span{grid-column:1/-1;color:#788491;font-size:7px}.topup-payment-fields p>strong{min-width:0;overflow-wrap:anywhere;color:#edf3f8;font-size:10px}.topup-payment-fields p>button{width:25px;height:25px;display:grid;place-items:center;border:1px solid #485460;border-radius:5px;background:#1c242b;color:#aab8c5;cursor:pointer}.topup-payment-fields p>button svg{width:11px}.topup-payment-fields p>em{color:#6fd590;font-size:8px;font-style:normal}.topup-payment-fields p.important{border-color:#987329;background:#2b210d}.topup-payment-fields p.important strong{color:#ffe485;font-size:12px;letter-spacing:.03em}.topup-payment-compact-actions{display:flex;justify-content:flex-end;gap:5px;padding:7px 9px;border-top:1px solid #2b3239}.topup-payment-compact-actions button{min-height:31px;padding:5px 9px;border:1px solid #3c4650;border-radius:6px;background:#171d23;color:#bdc7d0;font-size:9px;cursor:pointer}.topup-payment-compact-actions button svg{width:12px;height:12px}.topup-payment-dialog .topup-payment-note{padding:7px 9px;font-size:8px}
@media(max-width:560px){.topup-hero{grid-template-columns:auto minmax(0,1fr)}.topup-hero>aside{grid-column:1/-1;min-width:0;text-align:left}.topup-compact-form{grid-template-columns:1fr}.topup-compact-form>div{justify-content:flex-end}.topup-payment-compact{grid-template-columns:1fr}.topup-qr-compact{width:min(100%,190px);justify-self:center}.topup-history-compact .topup-history-row{grid-template-columns:auto minmax(0,1fr)}.topup-history-compact .topup-history-row>b{grid-column:2;justify-self:start}}

.topup-notice{overflow:hidden;border:1px solid #4b4128;border-radius:8px;background:#15130d}.topup-notice>header{display:flex;align-items:center;gap:6px;padding:7px 9px;border-bottom:1px solid #3d351f;background:#211b0d;color:#f1cf72}.topup-notice>header svg{width:14px;height:14px}.topup-notice>header strong{font-size:10px}.topup-notice>ul{display:grid;gap:6px;margin:0;padding:8px 10px 9px 25px}.topup-notice li{padding-left:2px;color:#a8a69d;font-size:9px;line-height:1.55}.topup-notice li::marker{color:#d6aa42}.admin-topup-config textarea[name="notice"]{min-height:160px;line-height:1.55}

/* Near-fullscreen QR payment form */
.topup-payment-modal{padding:6px}.topup-payment-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:none;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.topup-payment-dialog>#topup-payment-modal-content{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto auto;overflow:hidden}.topup-payment-dialog .topup-payment-compact{min-height:0;grid-template-columns:minmax(320px,1.15fr) minmax(270px,.85fr);align-items:center;gap:18px;padding:16px;overflow:auto}.topup-payment-dialog .topup-qr-compact{width:min(100%,560px);justify-self:center;gap:7px;padding:10px;border-radius:12px}.topup-payment-dialog .topup-qr-compact img{width:min(56vh,520px);max-width:100%}.topup-payment-dialog .topup-qr-compact small{font-size:10px}.topup-qr-save{min-height:38px;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;border:1px solid #806224;border-radius:7px;background:#251d0d;color:#f4cd64;font-size:10px;font-weight:850;text-decoration:none}.topup-qr-save svg{width:15px;height:15px}.topup-payment-dialog .topup-payment-fields{gap:8px}.topup-payment-dialog .topup-payment-fields p{min-height:54px;padding:8px 11px;border-radius:8px}.topup-payment-dialog .topup-payment-fields p>span{font-size:9px}.topup-payment-dialog .topup-payment-fields p>strong{font-size:13px}.topup-payment-dialog .topup-payment-fields p.important strong{font-size:17px}.topup-payment-dialog .topup-payment-fields p>em{font-size:10px}.topup-payment-dialog .topup-payment-compact-actions{padding:9px 12px}.topup-payment-dialog .topup-payment-compact-actions button{min-height:36px;padding:7px 12px;font-size:10px}
@media(max-width:700px){.topup-payment-modal{padding:3px}.topup-payment-dialog{width:calc(100vw - 6px);height:calc(100dvh - 6px)}.topup-payment-dialog .topup-payment-compact{grid-template-columns:1fr;align-content:start;gap:10px;padding:9px}.topup-payment-dialog .topup-qr-compact{width:min(100%,360px)}.topup-payment-dialog .topup-qr-compact img{width:min(72vw,330px)}.topup-payment-dialog .topup-payment-fields{width:100%;gap:5px}.topup-payment-dialog .topup-payment-fields p{min-height:42px;padding:6px 8px}.topup-payment-dialog .topup-payment-compact-actions{justify-content:stretch}.topup-payment-dialog .topup-payment-compact-actions button{flex:1}}

.admin-topup-package-head,.admin-topup-package-row{grid-template-columns:minmax(130px,1.4fr) minmax(88px,1fr) minmax(88px,1fr) minmax(78px,.85fr) 66px 88px 106px}
@media(max-width:760px){.admin-topup-package-row{grid-template-columns:1fr 1fr}.admin-topup-package-row>input:first-of-type{grid-column:1/-1}}

/* Readable top-up typography while preserving the compact layout */
[data-page="topup"] .panel-title > span { font-size: 15px; }
.topup-hero > div:nth-child(2) > span { font-size: 11px; }
.topup-hero > div:nth-child(2) > strong { font-size: 20px; }
.topup-hero > div:nth-child(2) > p { font-size: 12px; line-height: 1.5; }
.topup-hero > aside small { font-size: 11px; }
.topup-hero > aside strong { font-size: 18px; }
.topup-admin-preview { font-size: 12px; line-height: 1.45; }
.topup-closed strong { font-size: 19px; }
.topup-closed p { font-size: 13px; line-height: 1.5; }
.topup-compact-form label > span { font-size: 12px; }
.topup-compact-form select { min-height: 38px; font-size: 13px; }
.topup-compact-form button,
.topup-small-button { min-height: 38px; font-size: 12px; }
.topup-compact-note { font-size: 12px; line-height: 1.5; }
.topup-notice > header strong { font-size: 14px; }
.topup-notice > header svg { width: 18px; height: 18px; }
.topup-notice li { font-size: 12px; line-height: 1.65; }
.topup-payment-dialog > .panel-title > span { font-size: 15px; }
.topup-payment-dialog .topup-qr-compact small,
.topup-qr-save { font-size: 12px; }
.topup-payment-dialog .topup-payment-fields p > span { font-size: 12px; }
.topup-payment-dialog .topup-payment-fields p > strong { font-size: 16px; }
.topup-payment-dialog .topup-payment-fields p.important strong { font-size: 20px; }
.topup-payment-dialog .topup-payment-fields p > em { font-size: 12px; }
.topup-payment-dialog .topup-payment-compact-actions button { font-size: 13px; }
.topup-payment-dialog .topup-payment-note { font-size: 12px; line-height: 1.5; }

/* Top-up success celebration */
.topup-success-celebration{position:fixed;z-index:6000;inset:0;display:grid;place-items:center;padding:18px;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% 44%,#22c55e24,transparent 38%),#05080cb3;backdrop-filter:blur(3px);animation:topupSuccessBackdrop .3s ease both;transition:opacity .5s ease}.topup-success-celebration.is-leaving{opacity:0}.topup-success-celebration>section{position:relative;width:min(390px,calc(100vw - 32px));display:grid;justify-items:center;gap:7px;padding:29px 22px 23px;overflow:hidden;border:1px solid #4bcd7773;border-radius:22px;background:radial-gradient(circle at 50% 0,#35dc7930,transparent 48%),linear-gradient(155deg,#17241d,#0b1110 70%);box-shadow:0 26px 80px #000c,inset 0 1px #b9ffd140,0 0 42px #22c55e2e;text-align:center;animation:topupSuccessCard .7s cubic-bezier(.16,1,.3,1) both}.topup-success-celebration>section:before{content:"";position:absolute;inset:-80%;background:conic-gradient(from 0deg,transparent,#8dffb71f,transparent 25%,#e9c85b1f,transparent 58%);animation:topupSuccessGlow 5s linear infinite}.topup-success-celebration>section>*{position:relative;z-index:1}.topup-success-check{width:72px;height:72px;display:grid;place-items:center;margin-bottom:3px;border:2px solid #7af4a5;border-radius:50%;background:linear-gradient(145deg,#3de07b,#138443);color:#fff;box-shadow:0 0 0 8px #2bd66b1c,0 9px 28px #0ab94c61,inset 0 1px #daffe6;animation:topupSuccessCheck .65s .18s cubic-bezier(.2,1.55,.45,1) both}.topup-success-check svg{width:39px;height:39px;stroke-width:3}.topup-success-celebration section>small{color:#82e9a6;font-size:10px;font-weight:950;letter-spacing:.16em}.topup-success-celebration section>strong{background:linear-gradient(90deg,#fff4b3,#ffe06a 48%,#fff8cd);background-clip:text;-webkit-background-clip:text;color:transparent;font-family:Georgia,serif;font-size:clamp(34px,9vw,47px);line-height:1.05;filter:drop-shadow(0 4px 14px #e9b92b26)}.topup-success-celebration section>p{margin:1px 0 4px;color:#d9e7df;font-size:14px}.topup-success-celebration section>div:not(.topup-success-check){display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.topup-success-celebration section>div:not(.topup-success-check)>span{display:flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid #3d644a;border-radius:999px;background:#142219;color:#a9eebe;font-size:11px;font-weight:800}.topup-success-celebration section>div:not(.topup-success-check) svg{width:14px;height:14px;color:#f4d467}.topup-success-celebration section>em{margin-top:3px;color:#758c7d;font-size:10px;font-style:normal}.topup-success-particles{position:absolute;z-index:2;inset:0}.topup-success-particles i{position:absolute;left:50%;top:50%;width:9px;height:15px;border-radius:2px;background:#56e68a;opacity:0;animation:topupSuccessParticle 1.45s var(--d) cubic-bezier(.16,.75,.25,1) both}.topup-success-particles i:nth-child(4n+2){background:#ffd85e}.topup-success-particles i:nth-child(4n+3){width:7px;height:7px;border-radius:50%;background:#62b7ff}.topup-success-particles i:nth-child(4n){background:#ff7b91}@keyframes topupSuccessBackdrop{from{opacity:0}to{opacity:1}}@keyframes topupSuccessCard{0%{opacity:0;transform:translateY(22px) scale(.72)}65%{transform:translateY(-3px) scale(1.025)}100%{opacity:1;transform:none}}@keyframes topupSuccessCheck{from{opacity:0;transform:scale(.25) rotate(-28deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes topupSuccessGlow{to{transform:rotate(360deg)}}@keyframes topupSuccessParticle{0%{opacity:1;transform:translate(-50%,-50%) scale(.25) rotate(0)}75%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1) rotate(var(--r))}}@media(prefers-reduced-motion:reduce){.topup-success-celebration,.topup-success-celebration>section,.topup-success-check{animation:none}.topup-success-celebration>section:before,.topup-success-particles{display:none}}

/* Keep every popup title and close button reachable while its content scrolls. */
.modal-backdrop :is(.modal-card,[role="dialog"])>.panel-title,
.modal-backdrop :is(.modal-card,[role="dialog"])>header,
.photo-source-backdrop [role="dialog"]>.photo-source-head,
.admin-floating-card>header,
.bbcode-dialog>header,
.farm-lite-dialog>section>header,
.danh-lo-rules-modal>section>header{
  position:sticky;
  z-index:120;
  top:0;
  flex:0 0 auto;
  box-shadow:0 5px 14px rgba(0,0,0,.32);
}
.photo-source-backdrop [role="dialog"]>.photo-source-head{background:linear-gradient(180deg,#18212b,#111820)}
.danh-lo-rules-modal>section>header{background:linear-gradient(180deg,#251722,#171119)}
.modal-backdrop :is(.modal-card,[role="dialog"])>.panel-title>.modal-close,
.modal-backdrop :is(.modal-card,[role="dialog"])>header>button,
.photo-source-backdrop [role="dialog"]>.photo-source-head>button,
.admin-floating-card>header>button,
.bbcode-dialog>header>button,
.farm-lite-dialog>section>header>button,
.danh-lo-rules-modal>section>header>button{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  touch-action:manipulation;
}
@media(max-width:620px){
  .modal-backdrop :is(.modal-card,[role="dialog"])>.panel-title,
  .photo-source-backdrop [role="dialog"]>.photo-source-head,
  .farm-lite-dialog>section>header,
  .danh-lo-rules-modal>section>header{min-height:46px;padding-top:7px}
  .modal-backdrop :is(.modal-card,[role="dialog"])>.panel-title>.modal-close,
  .photo-source-backdrop [role="dialog"]>.photo-source-head>button,
  .farm-lite-dialog>section>header>button,
  .danh-lo-rules-modal>section>header>button{width:34px;height:34px;min-width:34px;min-height:34px}
}

/* Compact smiley folders and category ordering inside chatboxes. */
.symbol-picker-card{position:relative}
.symbol-picker-close{position:absolute;z-index:4;top:10px;right:10px;width:30px;height:30px;display:grid;place-items:center;padding:0;border:1px solid #4b515b;border-radius:5px;background:#15181d;color:#d4dbe4;cursor:pointer;font-size:21px;line-height:1}
.symbol-picker-close:hover{border-color:#9c5a90;background:#2a1727;color:#fff}
.symbol-picker-search{margin:10px 48px 8px 10px}
.symbol-picker-toolbar [data-smiley-sort-options].active{border-color:#5f9bd5;background:#16314a;color:#b8e0ff}
.symbol-picker-toolbar [data-smiley-create-category]{border-color:#72547f;background:#2a1b31;color:#ffc4e6}
.symbol-picker-browser{grid-template-columns:78px minmax(0,1fr)}
.symbol-picker-groups{align-content:start;align-items:center;padding:6px}
.symbol-picker-group-item{width:100%;display:grid;justify-items:center;gap:4px}
.symbol-picker-groups .symbol-picker-group-item>button[data-symbol-group]{width:58px;height:58px;min-height:58px;display:grid;grid-template-columns:1fr;place-items:center;gap:0;padding:4px;border-radius:8px;text-align:center}
.symbol-picker-groups .symbol-picker-group-item>button[data-symbol-group] b{width:48px;height:48px}
.symbol-picker-group-move{width:58px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.symbol-picker-groups .symbol-picker-group-move button{box-sizing:border-box;width:100%;min-width:0;min-height:21px;height:21px;display:flex;align-items:center;justify-content:center;gap:0;padding:0;overflow:hidden;border:1px solid #455564;border-radius:4px;background:#17212a;color:#b9d5ec;font-family:Arial,sans-serif;font-size:10px;font-weight:700;line-height:1}
.symbol-picker-groups .symbol-picker-group-move button:hover:not(:disabled){border-color:#65aeea;background:#17334b;color:#fff}
.symbol-picker-groups .symbol-picker-group-move button:disabled{cursor:default;opacity:.3}
@media(max-width:620px){.symbol-picker-browser{grid-template-columns:70px minmax(0,1fr)}.symbol-picker-groups .symbol-picker-group-item>button[data-symbol-group]{width:54px;height:54px;min-height:54px;padding:3px}.symbol-picker-groups .symbol-picker-group-item>button[data-symbol-group] b{width:46px;height:46px}.symbol-picker-group-move{width:54px}.symbol-picker-toolbar{overflow-x:auto;scrollbar-width:thin}.symbol-picker-toolbar button{flex:0 0 auto}}
.blocked-member-panel { margin-top: 12px; }
.friends-tab-pane[data-friends-pane="blocked"] > .blocked-member-panel:first-child { margin-top: 0; }
.blocked-member-note { margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); color: #a99ca2; font-size: 11px; line-height: 1.5; }
.blocked-member-item .member-copy { min-width: 0; flex: 1; }
.blocked-member-item .member-copy > span:last-child { color: #b9989e; }
.blocked-member-item > button { flex: 0 0 auto; }
.blocked-member-item .blocked-member-unblock { border-color: #785059; background: #291b1f; color: #ffd8de; }
.blocked-member-item .blocked-member-unblock:hover { border-color: #d98998; background: #44242b; color: #fff; }
.interaction-blocked-panel .blocked-member-note { color: #9baaba; }
.blocked-member-item .interaction-unblock { border-color: #416b78; background: #152b31; color: #bdebf4; }
.blocked-member-item .interaction-unblock:hover { border-color: #6fc0d1; background: #1d3d46; }
@media(max-width:560px){.friends-overview-tabs button{grid-template-columns:1fr auto;justify-items:start;min-height:58px}.friends-overview-tabs button>svg{grid-column:1/-1}.friends-overview-tabs button>span{max-width:100%;font-size:9px}}
.topup-payment-note.processing svg{animation:spin .9s linear infinite}.topup-payment-note.rejected{border-top-color:#66333c;background:#251318;color:#ff9daa}.topup-payment-note.rejected svg{color:#ff7181}.topup-payment-note.completed{border-top-color:#285c3b;background:#102419;color:#83eba5}.topup-payment-note.completed svg{color:#59d784}.topup-payment-note span{min-width:0}.topup-payment-note b{font-weight:900}

/* Larger, easier-to-read account switching UI. */
.account-menu-list>button[data-account-switch-open] strong{font-size:17px}
.account-menu-list>button[data-account-switch-open] small{font-size:13px;line-height:1.35}
.account-switch-card .panel-title>span{font-size:17px}
.account-switch-intro strong{font-size:15px;line-height:1.3}
.account-switch-intro small{font-size:12px;line-height:1.4}
.account-switch-identity strong{font-size:15px;line-height:1.25}
.account-switch-identity small{font-size:11px;line-height:1.35}
.account-switch-actions em{font-size:10px}
.account-switch-actions button{font-size:12px}
.account-switch-loading,.account-switch-error{font-size:13px}
.account-switch-form header span{font-size:14px}
.account-switch-form header small{font-size:11px}
.account-switch-form label>span{font-size:12px;line-height:1.35}
.account-switch-form input{font-size:14px}
.account-switch-form>button[type="submit"]{font-size:13px}
.account-switch-form>p{font-size:10px;line-height:1.5}

@media(max-width:620px){
  .account-menu-list>button[data-account-switch-open] strong{font-size:16px}
  .account-menu-list>button[data-account-switch-open] small{font-size:12px}
  .account-switch-card .panel-title>span{font-size:16px}
  .account-switch-intro strong{font-size:14px}
  .account-switch-identity strong{font-size:14px}
  .account-switch-form input{font-size:16px}
}

/* The game activity bubble can be dragged with mouse or touch. */
.game-bubble-toggle{touch-action:none;user-select:none;cursor:grab}
.game-bubble-toggle.is-dragging{cursor:grabbing;animation:none!important;transform:scale(1.06);transition:none}
.game-bubble-toggle.is-over-drop{border-color:#ff6675;background:radial-gradient(circle at 35% 28%,#71303a,#32131a 62%,#17090d);box-shadow:0 0 24px rgba(255,75,94,.55)}
@media(max-width:600px){.game-bubble-drop-zone span{display:none}}

/* Admin CP: SQL setting overview, member ID tools and inline post management. */
.admin-setting-group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
.admin-setting-group-card{min-height:86px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border:1px solid #304159;border-radius:15px;background:linear-gradient(145deg,#152131,#0d151f);color:#dceafa;text-align:left;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.admin-setting-group-card:hover{border-color:#55799e;background:linear-gradient(145deg,#1a2c41,#101c29);transform:translateY(-1px)}
.admin-setting-group-card>svg{width:21px;height:21px;padding:10px;border-radius:12px;background:#203b55;color:#8fd5ff;box-sizing:content-box}
.admin-setting-group-card span,.admin-setting-group-card strong,.admin-setting-group-card small{display:block;min-width:0}
.admin-setting-group-card strong{font-size:14px!important;color:#f2f7fc}.admin-setting-group-card small{margin-top:4px;color:#8ea0b5;line-height:1.4}
.admin-setting-group-card em{min-width:30px;padding:5px 8px;border-radius:999px;background:#233c54;color:#a9d8ff;text-align:center;font-style:normal;font-weight:900}
.admin-id-search-form label{min-width:0;flex:1;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #35475e;border-radius:11px;background:#0b121b}.admin-id-search-form label svg{width:17px;color:#83c8f2}.admin-id-search-form label input{width:100%;border:0!important;background:transparent!important;padding-inline:0!important}
.admin-inline-warning{display:flex;align-items:center;gap:9px;margin:10px 0;padding:11px 13px;border:1px solid #70404a;border-radius:11px;background:#29181d;color:#ffb8c3}.admin-inline-warning svg{width:18px}
.admin-user-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:0 14px 12px}.admin-user-summary>button{min-width:0;padding:10px;border:1px solid #2a394d;border-radius:11px;background:#0d151f;color:inherit;text-align:left;cursor:pointer}.admin-user-summary>button:hover{border-color:#537797;background:#152334;transform:translateY(-1px)}.admin-user-summary>button.wallet{border-color:#4d724c;background:linear-gradient(145deg,#14271b,#101b15)}.admin-user-summary>button.wallet.farm{border-color:#7b673b;background:linear-gradient(145deg,#2a2414,#1d1a10)}.admin-user-summary>button:disabled{cursor:not-allowed;opacity:.55;transform:none}.admin-user-summary small,.admin-user-summary strong,.admin-user-summary em{display:block}.admin-user-summary small{color:#8394a9}.admin-user-summary strong{margin-top:3px;color:#edf5ff;font-size:14px!important}.admin-user-summary em{margin-top:4px;color:#708399;font-size:9px;font-style:normal;font-weight:800}.admin-user-summary>button.wallet em{color:#8fc79b}.admin-user-summary>button.wallet.farm em{color:#cbb36d}
.admin-user-post-actions{display:flex;gap:8px;padding:0 14px 14px}.admin-user-post-actions button,.admin-clear-user-post-filter{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 11px;border:1px solid #344a63;border-radius:9px;background:#152538;color:#b8dcf7;cursor:pointer;font-weight:800}.admin-user-post-actions button:last-child{border-color:#68414b;background:#2b1b20;color:#ffbdc8}.admin-user-post-actions svg,.admin-clear-user-post-filter svg{width:15px}
.admin-clear-user-post-filter{margin-top:9px;background:#152538!important;color:#b8dcf7!important;font-size:11px}
.admin-deleted-post-author>em.active{background:#173d2a!important;color:#8af0ac!important}.admin-deleted-post-preview footer .danger{border-color:#78434d;background:#391e24;color:#ffc0ca}
.admin-user-wallet-panel{display:grid;gap:14px}.admin-wallet-user-head{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #304158;border-radius:14px;background:#101a27}.admin-wallet-user-head>.avatar{width:48px;height:48px}.admin-wallet-user-head>div{min-width:0}.admin-wallet-user-head strong,.admin-wallet-user-head span{display:block}.admin-wallet-user-head strong{color:#f3f7fb;font-size:16px!important}.admin-wallet-user-head span{margin-top:3px;color:#91a3b8}
.admin-wallet-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.admin-wallet-tabs button{min-height:48px;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px;border:1px solid #34475e;border-radius:11px;background:#101923;color:#9eb0c4;cursor:pointer;font-weight:850}.admin-wallet-tabs button:hover,.admin-wallet-tabs button.active{border-color:#5e83a8;background:#1c3044;color:#d7edff}.admin-wallet-tabs button b{padding:2px 6px;border-radius:99px;background:rgba(255,255,255,.08);font-size:10px}.admin-wallet-tabs svg{width:16px}
.admin-user-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.admin-user-detail-grid article{min-width:0;padding:13px;border:1px solid #2d3c50;border-radius:12px;background:#0e161f}.admin-user-detail-grid small,.admin-user-detail-grid strong,.admin-user-detail-grid span{display:block;overflow-wrap:anywhere}.admin-user-detail-grid small{color:#7f91a6}.admin-user-detail-grid strong{margin-top:5px;color:#eef6ff;font-size:14px!important}.admin-user-detail-grid span{margin-top:3px;color:#92a5ba}
.admin-profile-photo-tools{overflow:hidden;border:1px solid #49333c;border-radius:14px;background:#100f15}.admin-profile-photo-tools>header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #3d2b33;background:#21141a}.admin-profile-photo-tools>header>div{min-width:0;flex:1}.admin-profile-photo-tools>header strong,.admin-profile-photo-tools>header small{display:block}.admin-profile-photo-tools>header strong{color:#f3dfe4}.admin-profile-photo-tools>header small{margin-top:3px;color:#997780}.admin-profile-photo-tools>header>svg{width:20px;color:#ef6d80}.admin-profile-photo-tools>div{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:10px}.admin-profile-photo-tools article{min-width:0;display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid #342932;border-radius:11px;background:#15131a}.admin-profile-photo-preview{width:64px;height:52px;display:grid;place-items:center;overflow:hidden;border:1px solid #47333d;border-radius:9px;background:#090a0e;color:#775d67}.admin-profile-photo-preview.avatar-preview{width:52px;height:52px;border-radius:50%}.admin-profile-photo-preview img{width:100%;height:100%;object-fit:cover}.admin-profile-photo-preview svg{width:23px}.admin-profile-photo-tools article>div{min-width:0}.admin-profile-photo-tools article strong,.admin-profile-photo-tools article small{display:block}.admin-profile-photo-tools article strong{color:#f1e7ea}.admin-profile-photo-tools article small{margin-top:3px;color:#8b747c}.admin-profile-photo-tools article>button{min-height:38px;display:inline-flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #77414c;border-radius:8px;background:#321820;color:#ff9baa;cursor:pointer;font-weight:800}.admin-profile-photo-tools article>button svg{width:14px}.admin-profile-photo-tools article>button:disabled{border-color:#34323a;background:#1b1b21;color:#666b74;cursor:not-allowed}
.admin-wallet-balance{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px}.admin-wallet-balance>div{display:flex;flex-direction:column;justify-content:center;padding:18px;border:1px solid #496b4a;border-radius:14px;background:linear-gradient(145deg,#16281c,#101a14);text-align:center}.admin-wallet-balance>div small,.admin-wallet-balance>div strong,.admin-wallet-balance>div span{display:block}.admin-wallet-balance>div small{color:#91ad97}.admin-wallet-balance>div strong{margin:5px 0;color:#dffff0;font-size:27px!important}.admin-wallet-balance>div span{color:#77c58d}.admin-wallet-balance form{display:grid;grid-template-columns:1fr 1.4fr auto;align-items:end;gap:9px;padding:13px;border:1px solid #304158;border-radius:14px;background:#101923}.admin-wallet-balance form label{display:grid;gap:5px;color:#9daec1;font-weight:800}.admin-wallet-balance input{width:100%;min-height:42px;padding:9px 10px;border:1px solid #3a4c62;border-radius:9px;background:#0a1119;color:#eef6ff}
.admin-wallet-history{overflow:hidden;border:1px solid #304158;border-radius:14px;background:#0b121a}.admin-wallet-history>header{padding:13px 14px;border-bottom:1px solid #2b3a4c;background:#111d29}.admin-wallet-history>header strong,.admin-wallet-history>header span{display:block}.admin-wallet-history>header strong{color:#eff6fd;font-size:14px!important}.admin-wallet-history>header span{margin-top:3px;color:#8194aa}.admin-wallet-history-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #202d3c}.admin-wallet-history-row:last-child{border-bottom:0}.admin-wallet-history-row>svg{width:18px;color:#7792ac}.admin-wallet-history-row>div strong,.admin-wallet-history-row>div span,.admin-wallet-history-row>div small{display:block}.admin-wallet-history-row>div span{margin-top:2px;color:#c2d0df}.admin-wallet-history-row>div small{margin-top:3px;color:#71859a}.admin-wallet-history-row>span{display:flex;align-items:center;gap:5px;color:#efbd78;font-size:10px}.admin-wallet-history-row>span svg{width:14px}.admin-wallet-not-started{display:grid;justify-items:center;gap:7px;padding:28px;border:1px dashed #6f5e38;border-radius:14px;background:#211d12;color:#d9c480;text-align:center}.admin-wallet-not-started svg{width:28px}.admin-wallet-not-started strong{color:#ffecab;font-size:15px!important}.admin-user-wallet-panel>footer{display:flex;justify-content:flex-end;gap:8px}.admin-user-wallet-panel>footer button{display:inline-flex;align-items:center;gap:6px;min-height:39px;padding:8px 11px;border:1px solid #354a62;border-radius:9px;background:#142235;color:#bad8ef;cursor:pointer}.admin-user-wallet-panel>footer svg{width:15px}
.admin-wallet-history [data-admin-wallet-history-list]{transition:opacity .16s ease}.admin-wallet-history.is-loading [data-admin-wallet-history-list]{opacity:.42;pointer-events:none}.admin-wallet-history>[data-admin-wallet-history-pagination]{margin:0;padding:11px 14px;border-top:1px solid #2b3a4c;background:#0f1923}
.admin-wallet-history>[data-admin-wallet-history-summary]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border-bottom:1px solid #263548;background:#263548}.admin-wallet-history>[data-admin-wallet-history-summary]>span{display:grid;gap:3px;padding:10px 12px;background:#0e1822}.admin-wallet-history>[data-admin-wallet-history-summary] small{color:#7f92a8}.admin-wallet-history>[data-admin-wallet-history-summary] strong{font-size:13px}.admin-wallet-history .positive{color:#62d98b}.admin-wallet-history .negative{color:#ff7c83}
@media(max-width:980px){.admin-setting-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.admin-user-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-wallet-balance{grid-template-columns:1fr}.admin-wallet-balance form{grid-template-columns:1fr 1fr}.admin-wallet-balance form button{grid-column:1/-1}}
@media(max-width:620px){.admin-setting-group-grid{grid-template-columns:1fr}.admin-setting-group-card{min-height:78px}.admin-user-summary{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:10px}.admin-user-post-actions{padding-inline:10px;flex-direction:column}.admin-id-search-form{align-items:stretch;flex-direction:column}.admin-id-search-form label{min-height:46px}.admin-wallet-tabs{grid-template-columns:1fr}.admin-user-detail-grid{grid-template-columns:1fr 1fr}.admin-profile-photo-tools>div{grid-template-columns:1fr}.admin-profile-photo-tools article{grid-template-columns:54px minmax(0,1fr)}.admin-profile-photo-tools article>button{grid-column:1/-1;justify-content:center}.admin-photo-moderation-row{grid-template-columns:36px minmax(0,1fr)}.admin-photo-moderation-row>span{width:34px;height:34px}.admin-photo-moderation-row>em{grid-column:2;width:max-content}.admin-wallet-balance form{grid-template-columns:1fr}.admin-wallet-balance form button{grid-column:auto}.admin-wallet-history-row{grid-template-columns:28px minmax(0,1fr)}.admin-wallet-history-row>span{grid-column:2}.admin-user-wallet-panel>footer{flex-direction:column}.admin-user-wallet-panel>footer button{justify-content:center}}
.admin-registration-ip-table .admin-table-scroll{max-height:680px;overflow:auto}.admin-registration-ip-table table{min-width:1040px}.admin-registration-ip-table td>strong{color:#eef5fd}.admin-registration-ip-status{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;font-size:10px}.admin-registration-ip-status svg{width:13px;height:13px}.admin-registration-ip-status.normal{background:#1b2b3b;color:#9fcdf2}.admin-registration-ip-status.trusted{background:#173823;color:#8ee9a8}.admin-registration-ip-status.blocked{background:#421e27;color:#ff9bab}.admin-registration-ip-limited{color:#ffbd72!important}.admin-registration-ip-form{min-width:330px;display:grid;grid-template-columns:105px minmax(130px,1fr) auto;gap:6px}.admin-registration-ip-form select,.admin-registration-ip-form input{min-height:34px;padding:6px 8px;border:1px solid #3a4a5e;border-radius:6px;background:#0c131c;color:#dce8f5}.admin-registration-ip-form button{min-height:34px;display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid #426a91;border-radius:6px;background:#17304a;color:#b9ddff;cursor:pointer}.admin-registration-ip-form button svg{width:13px}.admin-registration-ip-form button:disabled{cursor:not-allowed;opacity:.55}@media(max-width:700px){.admin-registration-ip-stats{grid-template-columns:1fr 1fr}.admin-registration-ip-table{margin-inline:0!important}.admin-registration-ip-form{min-width:300px}}
.admin-registration-ip-search-panel{margin-bottom:14px!important}.admin-ip-block-form.admin-registration-ip-search{grid-template-columns:minmax(260px,1fr) auto auto}.admin-ip-block-form.admin-registration-ip-search button{border-color:#366c91;background:#15344b;color:#bce4ff}.admin-registration-ip-address{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:#8fd0ff;cursor:pointer;text-align:left}.admin-registration-ip-address:hover strong{text-decoration:underline}.admin-registration-ip-address svg{width:14px;height:14px}.admin-registration-ip-address:disabled{cursor:wait;opacity:.55}.admin-registration-ip-results{margin-bottom:14px}.admin-registration-ip-results>.admin-clone-truncated{margin:0;padding:0 12px 12px}.admin-registration-ip-results .admin-clone-match>div>span{flex:1 1 280px}@media(max-width:700px){.admin-ip-block-form.admin-registration-ip-search{grid-template-columns:1fr}.admin-ip-block-form.admin-registration-ip-search button{width:100%}}

.admin-access-domain-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}.admin-access-domain-card{min-width:0;min-height:116px;display:grid;grid-template-columns:52px minmax(0,1fr) 20px;align-items:center;gap:13px;padding:16px;border:1px solid #344253;border-radius:14px;background:linear-gradient(145deg,#151c24,#0c1117);color:#dce8f5;text-align:left;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.035);transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}.admin-access-domain-card:hover{transform:translateY(-1px);border-color:#62778e}.admin-access-domain-card.active{border-color:#5ba9e9;box-shadow:0 0 0 2px rgba(68,151,218,.14),inset 0 1px rgba(255,255,255,.06)}.admin-access-domain-card>span{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:#1a2a39;color:#87c8ff}.admin-access-domain-card.is-chatola>span{background:linear-gradient(145deg,#43213d,#24152b);color:#ff9fd2}.admin-access-domain-card.is-gocnho>span{background:linear-gradient(145deg,#173d4a,#102733);color:#83dcf2}.admin-access-domain-card>span svg{width:25px;height:25px}.admin-access-domain-card>div{min-width:0;display:grid;gap:4px}.admin-access-domain-card small{color:#8d9bad;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.admin-access-domain-card strong{color:#f4f8fd;font-size:21px;line-height:1.2}.admin-access-domain-card em{color:#8b9aaa;font-size:10px;font-style:normal}.admin-access-domain-card>svg{width:18px;color:#718195}.admin-access-domain-note{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;padding:11px 13px;border:1px solid #344253;border-radius:11px;background:#10161d;color:#91a0af}.admin-access-domain-note>svg{flex:0 0 auto;width:18px;color:#78bdf5}.admin-access-domain-note span{font-size:11px;line-height:1.55}.admin-access-domain-note strong{color:#dce8f4}.admin-access-domain-detail{overflow:hidden}.admin-access-domain-detail>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.admin-access-domain-detail>header div{display:grid;gap:3px}.admin-access-domain-detail>header small{color:#8290a0}.admin-access-domain-detail>header em{font-style:normal;color:#91cfff}.admin-access-domain-member-list{display:grid}.admin-access-domain-member{display:grid;grid-template-columns:minmax(250px,1fr) auto 155px;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid #27313c;background:#0d1218}.admin-access-domain-member:last-child{border-bottom:0}.admin-access-domain-member:hover{background:#111923}.admin-access-domain-identity{min-width:0;display:flex;align-items:center;gap:10px}.admin-access-domain-identity>.avatar{flex:0 0 46px;width:46px;height:46px}.admin-access-domain-identity>button{min-width:0;display:grid;gap:3px;padding:0;border:0;background:transparent;color:#e9f1f9;text-align:left;cursor:pointer}.admin-access-domain-identity>button strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.admin-access-domain-identity>button span{color:#8391a1;font-size:10px}.admin-access-domain-badges{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:5px}.admin-access-domain-badges>span{display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border:1px solid #334252;border-radius:999px;background:#151d25;color:#aab8c7;font-size:9px;font-weight:800}.admin-access-domain-badges>span svg{width:12px;height:12px}.admin-access-domain-badges>span.is-online{border-color:#275b3b;background:#153120;color:#83e6a3}.admin-access-domain-member>time{display:grid;gap:2px;text-align:right}.admin-access-domain-member>time small{color:#6f7d8c;font-size:9px}.admin-access-domain-member>time strong{color:#c7d5e2;font-size:10px}.admin-access-domain-member>time em{color:#778696;font-size:9px;font-style:normal}.admin-access-domain-detail>.content-pagination{padding:12px}.admin-access-domain-empty{min-height:210px;display:grid;place-items:center;align-content:center;gap:8px;padding:30px;text-align:center;color:#8493a3}.admin-access-domain-empty>svg{width:32px;height:32px;color:#68aee6}.admin-access-domain-empty strong{color:#dce8f3;font-size:14px}.admin-access-domain-empty span{max-width:460px;font-size:11px;line-height:1.5}@media(max-width:760px){.admin-access-domain-summary{grid-template-columns:1fr}.admin-access-domain-card{min-height:104px;padding:13px}.admin-access-domain-member{grid-template-columns:1fr;gap:9px}.admin-access-domain-badges{justify-content:flex-start}.admin-access-domain-member>time{text-align:left}.admin-access-domain-detail>header{align-items:flex-start;flex-direction:column}.admin-access-domain-detail>header em{align-self:flex-start}}
.admin-ip-block-panel{margin-bottom:16px!important}.admin-ip-block-form{display:grid;grid-template-columns:minmax(170px,.7fr) minmax(260px,1.5fr) auto;gap:10px;padding:14px}.admin-ip-block-form label{display:grid;gap:5px}.admin-ip-block-form label span{color:#9daabd;font-size:11px;font-weight:700}.admin-ip-block-form input{min-height:38px;padding:8px 10px;border:1px solid #3a4a5e;border-radius:7px;background:#0a1018;color:#eef5fd}.admin-ip-block-form button,.admin-ip-unblock{min-height:36px;align-self:end;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 11px;border:1px solid #77404c;border-radius:7px;background:#3a1821;color:#ffb2bd;cursor:pointer;font-weight:700}.admin-ip-block-form button svg,.admin-ip-unblock svg{width:14px;height:14px}.admin-ip-unblock{min-height:32px;padding:5px 8px;border-color:#3d6850;background:#173426;color:#a7eac0}.admin-ip-block-form button:disabled,.admin-ip-unblock:disabled{cursor:not-allowed;opacity:.55}.admin-ip-block-readonly{display:flex;align-items:center;gap:8px;padding:14px;color:#aab5c4}.admin-ip-block-readonly svg{width:16px}.admin-ip-block-table table{min-width:820px}@media(max-width:700px){.admin-ip-block-form{grid-template-columns:1fr}.admin-ip-block-form button{width:100%}}

.admin-chat-top-lock-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}.admin-chat-top-lock-stats article{display:flex;align-items:center;gap:11px;min-height:76px;padding:13px 14px;border:1px solid #303f52;border-radius:11px;background:linear-gradient(145deg,#101722,#0c1119)}.admin-chat-top-lock-stats svg{width:22px;height:22px;color:#ff9a78}.admin-chat-top-lock-stats strong,.admin-chat-top-lock-stats span{display:block}.admin-chat-top-lock-stats strong{color:#f4f7fb;font-size:20px}.admin-chat-top-lock-stats span{margin-top:2px;color:#8795a8;font-size:10px}.admin-chat-top-lock-panel{overflow:hidden}.admin-chat-top-lock-list{display:grid;gap:8px;padding:12px}.admin-chat-top-lock-card{display:grid;grid-template-columns:minmax(230px,1.2fr) minmax(220px,1fr) auto;align-items:center;gap:12px;padding:12px;border:1px solid #303c4d;border-radius:10px;background:#0d131c}.admin-chat-top-lock-member{min-width:0;display:flex;align-items:center;gap:10px}.admin-chat-top-lock-member .avatar{width:42px;height:42px;flex:0 0 42px}.admin-chat-top-lock-member>div{min-width:0}.admin-chat-top-lock-member button{max-width:100%;padding:0;border:0;background:none;color:#edf3fa;cursor:pointer;text-align:left}.admin-chat-top-lock-member button strong{display:flex;align-items:center;overflow:hidden}.admin-chat-top-lock-member span,.admin-chat-top-lock-member small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-chat-top-lock-member span{margin-top:2px;color:#8593a6;font-size:10px}.admin-chat-top-lock-member small{margin-top:3px;color:#79c7ff;font-size:10px}.admin-chat-top-lock-reason{min-width:0}.admin-chat-top-lock-reason>span{display:flex;align-items:center;gap:6px;color:#ffad92;font-size:11px;font-weight:700}.admin-chat-top-lock-reason>span svg{width:14px;height:14px}.admin-chat-top-lock-reason strong,.admin-chat-top-lock-reason small{display:block}.admin-chat-top-lock-reason strong{margin-top:5px;color:#eef3f9;font-size:12px}.admin-chat-top-lock-reason small{margin-top:3px;color:#7f8da0;font-size:9px}.admin-chat-top-unlock{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 11px;border:1px solid #3d7052;border-radius:7px;background:#173727;color:#a9edc0;cursor:pointer;font-size:11px;font-weight:800}.admin-chat-top-unlock svg{width:15px;height:15px}.admin-chat-top-unlock:disabled{cursor:not-allowed;opacity:.55}.admin-chat-top-lock-list>.admin-empty{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed #334158;border-radius:10px;background:#0b1119}.admin-chat-top-lock-list>.admin-empty svg{width:30px;height:30px;color:#70c694}.admin-chat-top-lock-list>.admin-empty strong{color:#cbd6e2;font-size:13px}.admin-chat-top-lock-list>.admin-empty span{color:#78879a;font-size:10px}@media(max-width:850px){.admin-chat-top-lock-card{grid-template-columns:1fr 1fr}.admin-chat-top-unlock{grid-column:1/-1;width:100%}}@media(max-width:620px){.admin-chat-top-lock-stats{grid-template-columns:1fr}.admin-chat-top-lock-card{grid-template-columns:1fr}.admin-chat-top-unlock{grid-column:auto}}

.admin-chat-top-guard-panel{margin-bottom:14px;overflow:hidden;border-color:#31475e}.admin-chat-top-guard-panel>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px}.admin-chat-top-guard-panel>header>div{min-width:0}.admin-chat-top-guard-panel>header strong{display:flex;align-items:center;gap:7px;color:#edf5ff}.admin-chat-top-guard-panel>header strong svg{width:18px;color:#69d99a}.admin-chat-top-guard-panel>header small{display:block;margin-top:4px;color:#8191a5;line-height:1.45}.admin-chat-top-guard-panel.is-disabled{border-color:#57434a}.admin-chat-top-guard-panel.is-disabled>header strong svg{color:#d48e7b}.admin-chat-top-guard-toggle,.admin-chat-top-guard-panel>footer button{flex:0 0 auto;min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 12px;border:1px solid #3f7456;border-radius:8px;background:#173725;color:#b8f1ca;cursor:pointer;font-size:11px;font-weight:850}.admin-chat-top-guard-panel.is-enabled .admin-chat-top-guard-toggle{border-color:#76504a;background:#351d1d;color:#ffb1a6}.admin-chat-top-guard-toggle svg,.admin-chat-top-guard-panel>footer button svg{width:15px}.admin-chat-top-guard-toggle:disabled,.admin-chat-top-guard-panel>footer button:disabled{cursor:not-allowed;opacity:.55}.admin-chat-top-guard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 14px 14px}.admin-chat-top-guard-grid label{display:grid;gap:5px;padding:11px;border:1px solid #29394c;border-radius:9px;background:#0c131c}.admin-chat-top-guard-grid label>span{color:#cbd7e5;font-size:10px;font-weight:800}.admin-chat-top-guard-grid input{width:100%;min-height:38px;padding:7px 9px;border:1px solid #3b4b5f;border-radius:7px;outline:0;background:#111a25;color:#fff;font:800 13px/1 inherit}.admin-chat-top-guard-grid input:focus{border-color:#5ea8e8;box-shadow:0 0 0 2px rgba(94,168,232,.14)}.admin-chat-top-guard-grid small{color:#748397;font-size:9px;line-height:1.35}.admin-chat-top-guard-panel>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid #263546;background:#0c121a}.admin-chat-top-guard-panel>footer>span{display:flex;align-items:center;gap:6px;color:#8191a5;font-size:10px}.admin-chat-top-guard-panel>footer>span svg{width:14px;color:#62aeea}@media(max-width:880px){.admin-chat-top-guard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.admin-chat-top-guard-panel>header,.admin-chat-top-guard-panel>footer{align-items:stretch;flex-direction:column}.admin-chat-top-guard-toggle,.admin-chat-top-guard-panel>footer button{width:100%}.admin-chat-top-guard-grid{grid-template-columns:1fr}}

.admin-registration-ip-results .admin-ip-history-toggle{display:flex;align-items:center;gap:7px;width:100%;padding:9px 12px;border:0;border-top:1px solid #273648;background:#111e2b;color:#a8d9ff;text-align:left;cursor:pointer;font-size:12px;font-weight:700}.admin-ip-history-toggle svg{width:15px;height:15px}.admin-ip-history-toggle svg:last-child{margin-left:auto;transition:transform .15s}.admin-ip-history-toggle[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}.admin-ip-history-toggle:disabled{opacity:.6;cursor:wait}.admin-registration-ip-results .admin-ip-history[hidden]{display:none}.admin-registration-ip-results .admin-ip-history{border-top:1px solid #273648;background:#0b141e}.admin-ip-history>header{display:grid;gap:3px;padding:11px 14px;border-bottom:1px solid #273648}.admin-ip-history>header strong{color:#eff6ff;font-size:12px}.admin-ip-history>header small,.admin-ip-history-note{color:#8fa3b9;font-size:11px;line-height:1.45}.admin-ip-history-note{margin:0;padding:12px 14px}.admin-ip-history ol{margin:0;padding:0;list-style:none;max-height:460px;overflow-y:auto}.admin-ip-history li{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid #223042}.admin-ip-history-number{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:#1c344a;color:#a8d9ff;font-size:11px;font-weight:800}.admin-ip-history li>div{min-width:0;display:grid;gap:3px}.admin-ip-history li strong{color:#f4f7fc;font-size:12px}.admin-ip-history li small{color:#aebbc9;font-size:11px;overflow-wrap:anywhere}.admin-ip-history li small:last-child{color:#e2ba77}.admin-ip-history footer{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px;color:#aebbc9;font-size:11px}.admin-ip-history footer button{padding:5px 10px;border:1px solid #3d5872;border-radius:7px;background:#183047;color:#bbddf7;cursor:pointer}.admin-ip-history footer button:disabled{opacity:.4;cursor:default}

/* The couple container stays neutral so each person keeps their equipped avatar frame. */
.profile-panel .profile-wall-avatar.profile-couple-avatar,
.profile-panel.has-profile-skin .profile-wall-avatar.profile-couple-avatar {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Avatar frames need a positioning context for their decorations, but the
   profile avatar itself must stay anchored so the heart/delete controls
   continue to sit on top of it. */
.profile-identity > .avatar.profile-wall-avatar {
  position: absolute;
}

/* Admin forced mutual blocking */
.admin-forced-layout{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);align-items:start;gap:14px}.admin-forced-form,.admin-forced-active{overflow:hidden;border:1px solid #2d394b;border-radius:15px;background:linear-gradient(145deg,#111925,#0c121b);box-shadow:0 14px 34px rgba(0,0,0,.18)}.admin-forced-form{display:grid;gap:14px;padding:16px}.admin-forced-form>header,.admin-forced-active>header{display:flex;align-items:center;gap:10px}.admin-forced-form>header>span{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border:1px solid #77414b;border-radius:12px;background:#321921;color:#ff8fa0}.admin-forced-form>header>span svg{width:20px;height:20px}.admin-forced-form>header>div,.admin-forced-active>header>div{min-width:0;flex:1}.admin-forced-form>header strong,.admin-forced-form>header small,.admin-forced-active>header strong,.admin-forced-active>header span{display:block}.admin-forced-form>header small,.admin-forced-active>header span{margin-top:3px;color:#7f8c9f;font-size:10px!important}.admin-forced-id-row{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);align-items:end;gap:8px}.admin-forced-id-row>svg{width:17px;height:40px;color:#e47b8b}.admin-forced-form label{display:grid;gap:6px;color:#aab6c6;font-weight:750}.admin-forced-form label>span{font-size:10px!important}.admin-forced-form input,.admin-forced-form textarea{width:100%;border:1px solid #37465a;border-radius:9px;background:#090f17;color:#eef5ff;outline:0;transition:border-color .18s ease,box-shadow .18s ease}.admin-forced-form input{min-height:42px;padding:8px 10px}.admin-forced-form textarea{min-height:78px;resize:vertical;padding:10px}.admin-forced-form input:focus,.admin-forced-form textarea:focus{border-color:#c65e70;box-shadow:0 0 0 3px rgba(215,86,108,.12)}.admin-forced-reason small{color:#69778b;font-weight:500}.admin-forced-form>button,.admin-forced-remove{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;cursor:pointer;font-weight:800}.admin-forced-form>button{min-height:43px;border:1px solid #9b4656;background:linear-gradient(135deg,#8e3044,#5f2030);color:#fff}.admin-forced-form>button:hover{border-color:#e47587;background:linear-gradient(135deg,#a63a50,#712639)}.admin-forced-form>button svg,.admin-forced-remove svg{width:16px;height:16px}.admin-forced-form>button:disabled,.admin-forced-remove:disabled{cursor:wait;opacity:.55}.admin-forced-active>header{min-height:68px;padding:13px 15px;border-bottom:1px solid #293546;background:rgba(21,29,42,.72)}.admin-forced-active>header>b{min-width:30px;padding:5px 9px;border:1px solid #643640;border-radius:999px;background:#2d171e;color:#ff9aaa;text-align:center}.admin-forced-list{display:grid;gap:7px;padding:9px}.admin-forced-block-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(160px,.8fr) auto;align-items:center;gap:12px;padding:10px;border:1px solid #2a3646;border-radius:11px;background:#0c131c}.admin-forced-pair{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:center;gap:5px}.admin-forced-member{min-width:0;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:7px}.admin-forced-member .avatar{width:34px;height:34px}.admin-forced-member>div{min-width:0}.admin-forced-member strong,.admin-forced-member span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-forced-member strong{color:#e8eff8}.admin-forced-member span{margin-top:1px;color:#728095;font-size:9px!important}.admin-forced-link{width:26px;height:26px;display:grid;place-items:center;border:1px solid #62333e;border-radius:50%;background:#2b151c;color:#ff8193}.admin-forced-link svg{width:13px;height:13px}.admin-forced-details{min-width:0}.admin-forced-details p{display:flex;align-items:flex-start;gap:6px;margin:0;color:#b8c3cf}.admin-forced-details p svg{flex:0 0 auto;width:14px;height:14px;margin-top:2px;color:#e88898}.admin-forced-details p span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.admin-forced-details small{display:block;margin:4px 0 0 20px;color:#69778a;font-size:9px!important}.admin-forced-remove{min-height:34px;padding:6px 9px;border:1px solid #603640;background:#28171d;color:#f095a2;white-space:nowrap}.admin-forced-remove:hover{border-color:#a84d5d;background:#3a1b24;color:#ffc1ca}.admin-forced-empty{min-height:180px;display:grid;place-items:center;align-content:center;gap:6px;padding:24px;color:#768497;text-align:center}.admin-forced-empty>svg{width:34px;height:34px;color:#62c98a}.admin-forced-empty strong{color:#cbd5e0}.admin-forced-empty span{max-width:360px;font-size:10px!important}
@media(max-width:1050px){.admin-forced-layout{grid-template-columns:1fr}.admin-forced-form{max-width:none}.admin-forced-block-card{grid-template-columns:minmax(0,1fr) minmax(160px,.7fr) auto}}
@media(max-width:680px){.admin-forced-layout{gap:9px}.admin-forced-form{padding:12px}.admin-forced-id-row{grid-template-columns:1fr}.admin-forced-id-row>svg{width:100%;height:16px;transform:rotate(90deg)}.admin-forced-block-card{grid-template-columns:1fr;gap:8px}.admin-forced-details{padding-top:7px;border-top:1px solid #263140}.admin-forced-remove{width:100%}.admin-forced-active>header{padding:11px}.admin-forced-list{padding:6px}.admin-forced-member{grid-template-columns:31px minmax(0,1fr)}.admin-forced-member .avatar{width:31px;height:31px}}

/* Public account sentence history and active restriction */
.profile-ban-warning{min-height:38px;display:flex;align-items:center;justify-content:center;gap:7px;margin:-3px 11px 12px;padding:8px 11px;border:1px solid #8d3b49;border-radius:8px;background:linear-gradient(135deg,#35151d,#221016);color:#ff9dac;box-shadow:inset 0 0 14px rgba(255,70,99,.08)}.profile-ban-warning[hidden]{display:none!important}.profile-ban-warning>svg{flex:0 0 auto;width:17px;height:17px}.profile-ban-warning>strong{font-size:12px;line-height:1.4}.profile-panel.has-profile-skin .profile-ban-warning{position:relative;border-color:#a94758;background:rgba(44,14,22,.9)}
.profile-ban-history-card{width:min(100%,610px);overflow:hidden}.profile-ban-history-person{min-height:64px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 11px;border-bottom:1px solid var(--line);background:#090b0e}.profile-ban-history-person>span{min-width:0}.profile-ban-history-person strong,.profile-ban-history-person small{display:block}.profile-ban-history-person strong{color:#f0f4f8;font-size:15px}.profile-ban-history-person small{margin-top:2px;color:#8794a3;font-size:11px}.profile-ban-history-person>em{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid #7e3744;border-radius:999px;background:#30161d;color:#ff91a1;font-size:10px;font-style:normal;font-weight:800;white-space:nowrap}.profile-ban-history-person>em.clear{border-color:#326746;background:#13291b;color:#7fe29e}.profile-ban-history-person>em svg{width:13px;height:13px}.profile-ban-history-list{min-height:190px;max-height:58vh;overflow-y:auto;background:#07090b}.profile-ban-history-item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:11px;border-bottom:1px solid var(--line-soft)}.profile-ban-history-item:last-child{border-bottom:0}.profile-ban-history-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid #3c6549;border-radius:50%;background:#13251a;color:#77cf90}.profile-ban-history-item.active .profile-ban-history-icon{border-color:#914052;background:#351720;color:#ff91a4;box-shadow:0 0 15px rgba(239,73,102,.13)}.profile-ban-history-icon svg{width:20px;height:20px}.profile-ban-history-item>div{min-width:0}.profile-ban-history-item header{display:flex;align-items:center;justify-content:space-between;gap:8px}.profile-ban-history-item header strong{color:#edf3f8;font-size:14px}.profile-ban-history-item header em{padding:3px 7px;border-radius:999px;background:#162c1d;color:#76d491;font-size:9px;font-style:normal;font-weight:800}.profile-ban-history-item.active header em{background:#3a1821;color:#ff8fa0}.profile-ban-history-item p{margin:5px 0;color:#b9c3ce;font-size:12px;line-height:1.45;overflow-wrap:anywhere}.profile-ban-history-item small,.profile-ban-history-item time{display:flex;align-items:center;gap:5px;color:#748193;font-size:10px}.profile-ban-history-item small svg{width:12px;height:12px}.profile-ban-history-item time{margin-top:3px;color:#8d99a8}.profile-ban-history-empty{min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px;color:#8491a0;text-align:center}.profile-ban-history-empty svg{width:29px;height:29px;color:#68c98a}.profile-ban-history-empty strong{color:#d7dfe8}.profile-ban-history-empty span{font-size:12px}
@media(max-width:520px){.profile-ban-history-person{grid-template-columns:38px minmax(0,1fr)}.profile-ban-history-person>em{grid-column:1/-1;justify-self:start}.profile-ban-history-item{grid-template-columns:38px minmax(0,1fr);gap:8px}.profile-ban-history-icon{width:36px;height:36px}.profile-ban-history-item header{align-items:flex-start;flex-direction:column;gap:3px}.profile-ban-warning{justify-content:flex-start;text-align:left}}

/* Donate: two fixed gifts with an immediately updated thank-you */
.topup-donate-form{grid-template-columns:1fr;padding:10px}.topup-donate-form>.topup-package-section{display:grid}.topup-donate-form .topup-package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topup-donate-form .topup-package{min-height:86px;padding:13px 42px 13px 14px}.topup-donate-form .topup-package>strong{font-size:21px}.topup-donate-form .topup-package>svg{right:13px;width:21px;height:21px}.topup-donate-form .topup-package.active>svg{color:#ff7fa1;filter:drop-shadow(0 0 7px #ff5e8c88)}.topup-donate-note{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border:1px solid #6f3b4b;border-radius:9px;background:linear-gradient(135deg,#29131b,#171218);color:#e9bbc7}.topup-donate-note>svg{flex:0 0 auto;width:19px;height:19px;color:#ff86a6}.topup-donate-note>p{margin:0;font-size:12px;line-height:1.55}.topup-donate-form>.topup-donate-actions{display:flex;justify-content:flex-end;gap:6px}.topup-donate-actions>.primary-button{min-width:150px}.topup-donate-form .topup-package-section>header>svg{width:24px;height:24px;color:#e28aa2}
@media(max-width:560px){.topup-donate-form .topup-package-grid{grid-template-columns:1fr}.topup-donate-actions{justify-content:stretch}.topup-donate-actions>*{flex:1}.topup-donate-note>p{font-size:11px}}

/* Permanent G gratitude frame for members who have donated */
.avatar.has-avatar-frame.avatar-theme-donate-g{position:relative;overflow:visible;border:2px solid #f6c84c;border-radius:50%;isolation:isolate;container-type:inline-size;box-shadow:inset 0 0 0 2px #161006,inset 0 0 7px #ffe59a66,0 0 0 1px #7e5008,0 0 10px #c7891991}
.avatar.has-avatar-frame.avatar-theme-donate-g>img{position:relative;z-index:1;border-radius:50%}
.avatar-donate-g-ring{position:absolute;z-index:3;inset:-18%;width:136%;height:136%;overflow:visible;pointer-events:none}
.avatar-donate-g-ring path{fill:none;stroke-linecap:square;stroke-linejoin:bevel}
.avatar-donate-g-shadow{stroke:#4e2d03;stroke-width:7}
.avatar-donate-g-gold{stroke:url(#avatar-donate-g-gradient);stroke:#f6c84c;stroke-width:3.2;filter:drop-shadow(0 0 2px #ffdd6c)}
.avatar-donate-g-logo{position:absolute;z-index:5;left:50%;bottom:-19%;width:38%;height:27%;display:grid;place-items:center;border:1px solid #fff0a0;clip-path:polygon(13% 0,87% 0,100% 28%,88% 100%,12% 100%,0 28%);background:linear-gradient(145deg,#fff2a1 0,#e6ae24 43%,#8e5607 100%);color:#241300;font-family:Georgia,serif;font-size:clamp(7px,16cqw,16px);font-style:normal;font-weight:950;line-height:1;text-shadow:0 1px #fff1a5,0 -1px #6f4100;box-shadow:0 2px 5px #000b,0 0 5px #e9b834;transform:translateX(-50%);pointer-events:none}
.avatar.has-avatar-frame.avatar-theme-donate-g.avatar-frame-shine{animation:avatar-donate-g-breathe 2.2s ease-in-out infinite alternate}
@keyframes avatar-donate-g-breathe{to{box-shadow:inset 0 0 0 2px #181006,inset 0 0 10px #ffe7a180,0 0 0 2px #d69a22,0 0 15px #e8b637a6;filter:brightness(1.05)}}
@media(prefers-reduced-motion:reduce){.avatar.has-avatar-frame.avatar-theme-donate-g.avatar-frame-shine{animation:none!important}}

/* Chat attachments share one picker; direct-chat expiry stays beside Send. */
.direct-message-expiry-quick{height:38px;display:inline-flex;align-items:center;gap:5px;margin:0;padding:0 5px 0 7px;border:1px solid #66572f;border-radius:8px;background:#1d1a12;color:#e8ca75;cursor:default;white-space:nowrap}
.direct-message-expiry-quick>svg{flex:0 0 auto;width:14px;height:14px;color:#edc35f}
.direct-message-expiry-quick>span{font-size:10px;font-weight:800}
.direct-message-expiry-quick>small[hidden]{display:none!important}
.direct-message-expiry-quick select{width:72px;min-width:0;height:28px;padding:3px 20px 3px 6px;border:0;border-left:1px solid #554922;border-radius:0 5px 5px 0;outline:0;background:#15140f;color:#f5df9f;font-size:10px;font-weight:750;cursor:pointer}
.direct-message-expiry-quick select:focus{border-color:#e0b84f;box-shadow:0 0 0 3px rgba(224,184,79,.13)}
.direct-message-expiry-quick select:disabled{opacity:.55;cursor:wait}
@media(max-width:480px){.direct-message-expiry-quick{padding-left:6px}.direct-message-expiry-quick>span{display:none}.direct-message-expiry-quick select{width:65px}}
/* Mỵ Dạ: exclusive purple-black avatar frame */
.avatar.has-avatar-frame.avatar-theme-mi-da{position:relative;overflow:visible;border:2px solid var(--avatar-frame);border-radius:34% 46% 36% 44%;isolation:isolate;container-type:inline-size;background:#08050b;box-shadow:inset 0 0 0 2px #09050d,inset 0 0 10px #6f3d8f55,0 0 0 1px #3b1d4b,0 0 11px #6f3d8f88}
.avatar.has-avatar-frame.avatar-theme-mi-da>img{position:relative;z-index:1;border-radius:inherit}
.avatar-mi-da-ring{position:absolute;z-index:4;inset:-18%;width:136%;height:136%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 2px #6a357f)}
.avatar-mi-da-ring path{stroke-linecap:round;stroke-linejoin:round}
.avatar-mi-da-ring-shadow{fill:none;stroke:#160a1d;stroke-width:7}
.avatar-mi-da-ring-line{fill:none;stroke:var(--avatar-frame);stroke-width:2.5}
.avatar-mi-da-vine{fill:#13091a;stroke:var(--avatar-frame-accent);stroke-width:1.15;filter:drop-shadow(0 0 2px var(--avatar-frame-glow))}
.avatar-mi-da-flame{fill:#8c55ae;stroke:#e8d5f3;stroke-width:.8;filter:drop-shadow(0 0 4px #9d54c9);transform-box:fill-box;transform-origin:center;animation:avatar-mi-da-flame 1.9s ease-in-out infinite alternate}
.avatar-mi-da-flame-right{animation-delay:-.9s}
.avatar-mi-da-smoke{position:absolute;z-index:3;display:block;width:33%;height:48%;border-radius:50%;background:radial-gradient(ellipse at 50% 75%,#a86bc866 0,#5e347d3d 38%,transparent 72%);filter:blur(2px);opacity:.65;pointer-events:none;animation:avatar-mi-da-smoke 3.2s ease-in-out infinite}
.avatar-mi-da-smoke-one{top:-28%;left:2%;transform:rotate(-24deg)}
.avatar-mi-da-smoke-two{right:-2%;bottom:-28%;transform:rotate(156deg);animation-delay:-1.6s}
.avatar-mi-da-gem{position:absolute;z-index:5;top:-16%;left:50%;display:grid;place-items:center;width:21%;aspect-ratio:1;transform:translateX(-50%) rotate(45deg);border:1px solid #e8d9ef;border-radius:3px;background:linear-gradient(145deg,#e5cff0,#71418d 52%,#16091d);color:#f4eafb;font-family:Georgia,serif;font-size:clamp(5px,9cqw,11px);font-style:normal;line-height:1;text-shadow:0 0 4px #fff;box-shadow:0 0 5px #8d54ad;pointer-events:none}
.avatar.has-avatar-frame.avatar-theme-mi-da.avatar-frame-shine{animation:avatar-mi-da-breathe 2.7s ease-in-out infinite alternate}
.profile-wall-avatar.avatar-theme-mi-da .avatar-mi-da-ring{inset:-11%;width:122%;height:122%}
.profile-wall-avatar.avatar-theme-mi-da .avatar-mi-da-gem{top:-9%;width:16%}
.profile-wall-avatar.avatar-theme-mi-da .avatar-mi-da-smoke-one{top:-19%;left:7%}
.profile-wall-avatar.avatar-theme-mi-da .avatar-mi-da-smoke-two{right:7%;bottom:-19%}
@keyframes avatar-mi-da-breathe{to{box-shadow:inset 0 0 0 2px #09050d,inset 0 0 15px #8b55a877,0 0 0 2px #8f63a9,0 0 17px #744393aa;filter:brightness(1.06)}}
@keyframes avatar-mi-da-flame{to{opacity:.7;transform:scale(.82) translateY(2px);filter:drop-shadow(0 0 2px #9d54c9)}}
@keyframes avatar-mi-da-smoke{0%,100%{opacity:.25;scale:.78;translate:0 7%}50%{opacity:.7;scale:1.08;translate:5% -9%}}
@media(prefers-reduced-motion:reduce){.avatar.has-avatar-frame.avatar-theme-mi-da.avatar-frame-shine,.avatar-mi-da-flame,.avatar-mi-da-smoke{animation:none!important}}

/* Song Ngư Vân Mộng: rotating koi, drifting clouds and tail light motes */
.has-avatar-frame.avatar-theme-song-ngu{position:relative;overflow:visible;border:2px solid #66dce2;border-radius:50%;isolation:isolate;container-type:inline-size;background:#07131a;box-shadow:inset 0 0 0 2px #071016,inset 0 0 10px #66dce24a,0 0 0 1px #7558b7,0 0 12px #7256ce99}
.has-avatar-frame.avatar-theme-song-ngu>img{position:relative;z-index:2;border-radius:50%}
.avatar-song-ngu-orbit{position:absolute;z-index:6;inset:-22%;display:block;width:144%;height:144%;transform-origin:50% 50%;pointer-events:none;will-change:transform;animation:avatar-song-ngu-orbit 14s linear infinite}
.avatar-song-ngu-orbit>img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 2px #c8fbff) drop-shadow(0 0 4px #7256ce);user-select:none}
.avatar-song-ngu-spark{position:absolute;z-index:2;display:block;width:max(2px,4.4cqw);aspect-ratio:1;border-radius:50%;background:#f5feff;box-shadow:0 0 3px #fff,0 0 7px #7ee9f0;opacity:.88;animation:avatar-song-ngu-spark 1.65s ease-in-out infinite}
.avatar-song-ngu-spark:after{content:"";position:absolute;inset:35% -80%;background:#dffcff;border-radius:50%;transform:rotate(45deg);opacity:.7}
.avatar-song-ngu-spark.spark-a1{top:16%;left:77%}.avatar-song-ngu-spark.spark-a2{top:22%;left:84%;animation-delay:-.55s;scale:.72}.avatar-song-ngu-spark.spark-a3{top:29%;left:88%;animation-delay:-1.1s;scale:.48}
.avatar-song-ngu-spark.spark-b1{top:77%;left:17%;animation-delay:-.3s}.avatar-song-ngu-spark.spark-b2{top:83%;left:24%;animation-delay:-.85s;scale:.72}.avatar-song-ngu-spark.spark-b3{top:87%;left:32%;animation-delay:-1.35s;scale:.48}
.avatar-song-ngu-cloud{position:absolute;z-index:4;display:block;width:72%;height:28%;border-radius:50%;background:radial-gradient(circle at 19% 64%,#dffcffb8 0 17%,transparent 19%),radial-gradient(circle at 41% 47%,#c9ecfab0 0 24%,transparent 26%),radial-gradient(circle at 67% 60%,#b9d5f1a3 0 22%,transparent 24%),radial-gradient(ellipse at 50% 73%,#a991d88c 0 45%,transparent 68%);filter:blur(max(1px,2cqw));opacity:.34;pointer-events:none;will-change:transform,opacity;animation:avatar-song-ngu-cloud 5.6s ease-in-out infinite}
.avatar-song-ngu-cloud.cloud-one{top:-24%;left:-20%;transform:rotate(-13deg)}.avatar-song-ngu-cloud.cloud-two{right:-21%;bottom:-23%;transform:rotate(167deg);animation-delay:-2.8s}
.avatar.has-avatar-frame.avatar-theme-song-ngu.avatar-frame-shine{animation:avatar-song-ngu-halo 3.1s ease-in-out infinite alternate}
.profile-wall-avatar.avatar-theme-song-ngu .avatar-song-ngu-orbit{inset:-18%;width:136%;height:136%}.profile-wall-avatar.avatar-theme-song-ngu .avatar-song-ngu-cloud{opacity:.29}
.feed-like-avatar.avatar-theme-song-ngu{overflow:visible!important}
@keyframes avatar-song-ngu-orbit{to{transform:rotate(-360deg)}}
@keyframes avatar-song-ngu-spark{0%,100%{opacity:.18;filter:blur(.5px);translate:0 0}45%{opacity:1;filter:none;translate:15% -12%}70%{opacity:.48;translate:32% -24%}}
@keyframes avatar-song-ngu-cloud{0%,100%{opacity:.2;translate:-7% 4%;scale:.92}50%{opacity:.43;translate:10% -6%;scale:1.08}}
@keyframes avatar-song-ngu-halo{to{box-shadow:inset 0 0 0 2px #071016,inset 0 0 14px #77eaf063,0 0 0 2px #9c82df,0 0 17px #745bd0b0;filter:brightness(1.05)}}
@media(max-width:680px){.avatar-song-ngu-orbit{animation-duration:13s}.avatar-song-ngu-cloud{animation-duration:5s}}
@media(prefers-reduced-motion:reduce){.avatar.has-avatar-frame.avatar-theme-song-ngu.avatar-frame-shine,.avatar-song-ngu-orbit,.avatar-song-ngu-spark,.avatar-song-ngu-cloud{animation:none!important}}

/* Keep every avatar frame above nearby cards, text and controls in every
   surface. Image decorations remain non-interactive, so covered controls can
   still be clicked while the artwork paints over them. */
.avatar.has-avatar-frame {
  position: relative;
  z-index: 120 !important;
  overflow: visible !important;
}
.feed-like-avatar.has-avatar-frame {
  z-index: 120 !important;
  overflow: visible !important;
}
:where(a, button, article, li):has(.avatar.has-avatar-frame),
*:has(> .avatar.has-avatar-frame) {
  position: relative;
  z-index: 30;
  overflow: visible !important;
}
:is(
  .global-chat-message,
  .global-chat-message-head,
  .feed-card,
  .feed-card-head,
  .feed-like-preview,
  .member-item,
  .hidden-online-item,
  .comment-item,
  .message,
  .direct-message,
  .conversation-item,
  .conversation-avatar-wrap,
  .quick-pm-head,
  .quick-pm-inbox-item,
  .quick-pm-bubble,
  .profile-identity,
  .group-member-row,
  .group-pending-row,
  .admin-chat-top-lock-member,
  .admin-forced-member
):has(.avatar.has-avatar-frame) {
  position: relative;
  z-index: 30;
  overflow: visible !important;
}
.quick-pm-bubble:has(.avatar.has-avatar-frame) {
  position: fixed;
  z-index: 91;
}
.feed-list .feed-card:has(.avatar.has-avatar-frame) {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 420px;
}

/* Profile mascot system */
.profile-cover-heart{top:9px;right:9px;bottom:auto}
.profile-cover-edit{top:47px}
.profile-bio{text-align:center;padding-inline:14px}
#profile-main-panel{z-index:5;overflow:visible}
#profile-main-panel .profile-cover{z-index:8;overflow:visible}
.profile-pet-stage{position:absolute;z-index:40;top:85px;right:14px;bottom:-105px;width:min(42%,285px);height:auto;pointer-events:none;isolation:isolate}
.profile-pet-stage[hidden]{display:none!important}
.profile-pet-empty{position:absolute;right:0;bottom:5px;display:flex;align-items:center;gap:9px;min-width:184px;padding:10px 13px;border:1px solid #8a6aff;border-radius:14px;background:linear-gradient(135deg,#211346e8,#101d3de8);color:#e9e4ff;box-shadow:0 8px 24px #0009,inset 0 0 16px #7564ff24;backdrop-filter:blur(8px);cursor:pointer;pointer-events:auto}
.profile-pet-empty>svg{width:24px;height:24px;color:#80eaff;filter:drop-shadow(0 0 6px #4ebdff)}
.profile-pet-empty span,.profile-pet-empty strong,.profile-pet-empty small{display:block;text-align:left}
.profile-pet-empty strong{font-size:13px}.profile-pet-empty small{margin-top:2px;color:#aab8d7;font-size:9px}
.profile-pet-portrait{position:absolute;right:0;bottom:92px;width:40%;height:115px;display:grid;place-items:end center;filter:none;animation:profile-pet-float 18s cubic-bezier(.45,.05,.55,.95) infinite;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;contain:layout style;pointer-events:none}
.profile-pet-portrait>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 4px #0008) drop-shadow(0 0 5px #5e8bff66);transform:translate3d(0,0,0);backface-visibility:hidden}
.profile-pet-image-fallback{display:grid;place-items:center;width:100%;height:100%;font-size:92px;filter:drop-shadow(0 6px 6px #000)}
.profile-pet-info-dock{position:relative;z-index:45;margin:8px 12px 0}.profile-pet-info-dock[hidden]{display:none!important}.profile-pet-stage-copy{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(160px,225px) minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;column-gap:12px;padding:9px 11px;border:1px solid #6073a8;border-radius:10px;background:linear-gradient(135deg,#070b13f2,#111a2bf2);box-shadow:0 6px 17px #0007,inset 0 0 12px #526cff14;backdrop-filter:none;pointer-events:auto}
.profile-pet-reopen{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid #526a91;border-radius:10px;background:linear-gradient(135deg,#171f31,#25183b);color:#e8ecff;box-shadow:0 5px 14px #0006,inset 0 0 14px #8268d51f;cursor:pointer;text-align:left}.profile-pet-reopen>svg:first-child{flex:0 0 auto;width:23px;height:23px;color:#8ee7ff;filter:drop-shadow(0 0 5px #5f90ff88)}.profile-pet-reopen>span{min-width:0;flex:1}.profile-pet-reopen strong,.profile-pet-reopen small{display:block}.profile-pet-reopen strong{font-size:13px}.profile-pet-reopen small{margin-top:2px;overflow:hidden;color:#aebbd0;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.profile-pet-reopen>svg:last-child{flex:0 0 auto;width:16px;color:#a991e9}.profile-pet-reopen:hover{border-color:#8e75d2;background:linear-gradient(135deg,#1d2940,#33204e)}
.profile-pet-info-dock .profile-pet-name{grid-column:1;grid-row:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Georgia,serif;font-size:16px;line-height:1.25}
.profile-pet-stage-copy>span{grid-column:1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:5px;color:#c4d0e3;font-size:11px}.profile-pet-stage-copy>span b{color:#a7edff}.profile-pet-stage-copy>span i{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal}
.profile-pet-exp{grid-column:1;grid-row:3;height:4px;margin-top:4px;overflow:hidden;border:1px solid #394862;border-radius:99px;background:#02050a}.profile-pet-exp>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38cfff,#8e6cff,#ff69d7);box-shadow:0 0 8px #65bfff}
.profile-pet-stage-actions{grid-column:2;grid-row:1/4;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:5px;margin:0}.profile-pet-stage-actions button{min-height:29px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 9px;border:1px solid #526a91;border-radius:7px;background:#111a29;color:#d5e1f1;cursor:pointer;font:800 10px/1.2 Arial,sans-serif}.profile-pet-stage-actions button:first-child{flex:1 1 150px;border-color:#7c55aa;background:linear-gradient(135deg,#32204b,#172d45);color:#f2dfff}.profile-pet-stage-actions button:disabled{cursor:not-allowed;opacity:.55}.profile-pet-stage-actions svg{width:13px;height:13px}
.profile-pet-stage-actions .pet-daily-reward-action{flex:1 1 170px;border-color:#9a7937;background:linear-gradient(135deg,#493317,#2d2343);color:#ffe8a1;box-shadow:inset 0 0 12px #ffc14c16}
.pet-name-tier-1{color:#e7edf7}.pet-name-tier-2{color:#70eaa7;text-shadow:0 0 5px #34d88366}.pet-name-tier-3{color:#72cfff;text-shadow:0 0 5px #48b9ff,0 0 10px #3979ff66}.pet-name-tier-4{color:#c693ff;text-shadow:0 0 5px #9b5cff,0 0 11px #703fff}.pet-name-tier-5{color:#ff88d1;text-shadow:0 0 4px #ff58bd,0 0 10px #ff3988,0 0 16px #7b51ff}.pet-name-tier-6{color:#fff5a6;background:linear-gradient(90deg,#ff6b9e,#ffe870,#67efff,#b887ff,#ff6b9e);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 9px #ff70c788;animation:pet-name-rainbow 3s linear infinite}
@keyframes profile-pet-float{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}20%{transform:translate3d(clamp(-90px,-10vw,-48px),-52px,0) rotate(2deg)}40%{transform:translate3d(clamp(-310px,-38vw,-165px),-18px,0) rotate(-2deg)}60%{transform:translate3d(clamp(-250px,-30vw,-125px),56px,0) rotate(2deg)}80%{transform:translate3d(clamp(-82px,-9vw,-42px),34px,0) rotate(-2deg)}}
@keyframes pet-name-rainbow{to{background-position:260% 0}}
.profile-pet-card{width:min(790px,calc(100vw - 20px));max-height:min(88vh,860px);overflow:hidden}.profile-pet-modal-body{max-height:calc(88vh - 48px);overflow:auto;padding:12px;background:radial-gradient(circle at 90% 0,#533a8b20,transparent 38%),#090c12}
.profile-pet-rules{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid #5b5486;border-radius:11px;background:linear-gradient(135deg,#1a1730,#101823);color:#d9d9f1}.profile-pet-rules>svg{flex:0 0 auto;width:20px;color:#8fe9ff}.profile-pet-rules strong{display:block;color:#f2ecff}.profile-pet-rules p{margin:4px 0 0;color:#9faac0;font-size:10px;line-height:1.55}
.profile-pet-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}.profile-pet-shop-item{min-width:0;display:grid;grid-template-columns:120px minmax(0,1fr);gap:9px;padding:9px;border:1px solid #344157;border-radius:12px;background:linear-gradient(145deg,#111823,#090d13);box-shadow:0 8px 20px #0004}.profile-pet-shop-item.is-equipped{border-color:#8f70dd;box-shadow:0 0 0 1px #8066d355,0 8px 22px #0005}.profile-pet-shop-image{height:160px;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:radial-gradient(circle,#263765,#0b101b 68%)}.profile-pet-shop-image img{width:100%;height:100%;object-fit:contain}.profile-pet-shop-image .profile-pet-image-fallback{font-size:58px}.profile-pet-shop-copy{min-width:0}.profile-pet-shop-copy header{display:flex;align-items:flex-start;justify-content:space-between;gap:5px}.profile-pet-shop-copy header strong{display:block;font-family:Georgia,serif;font-size:13px}.profile-pet-shop-copy header span{display:block;margin-top:3px;color:#7f8da2;font-size:9px}.profile-pet-shop-copy header em{flex:0 0 auto;padding:3px 5px;border:1px solid #605287;border-radius:999px;background:#241b3a;color:#cbb9ff;font-size:7px;font-style:normal}.profile-pet-shop-copy>p{min-height:42px;margin:7px 0;color:#98a5b6;font-size:9px;line-height:1.5}.profile-pet-buy,.profile-pet-rename{display:grid;gap:5px}.profile-pet-buy label,.profile-pet-rename label{display:grid;gap:3px;color:#aebbd0;font-size:8px;font-weight:800}.profile-pet-buy input,.profile-pet-rename input{min-width:0;height:32px;padding:0 8px;border:1px solid #3e4d64;border-radius:7px;outline:0;background:#05080d;color:#eef4ff}.profile-pet-buy input:focus,.profile-pet-rename input:focus{border-color:#8870d8;box-shadow:0 0 0 2px #7d61d325}.profile-pet-buy button,.profile-pet-rename button,.profile-pet-owned-actions button{min-height:31px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #52627a;border-radius:7px;background:#182131;color:#dce6f5;cursor:pointer;font-size:9px;font-weight:800}.profile-pet-buy button svg,.profile-pet-rename button svg,.profile-pet-owned-actions button svg{width:13px}.profile-pet-owned-actions{display:flex;margin-top:6px}.profile-pet-owned-actions button{width:100%}.profile-pet-empty-list{grid-column:1/-1;min-height:180px;display:grid;place-items:center;align-content:center;gap:6px;color:#7f8ca0;text-align:center}.profile-pet-empty-list svg{width:34px}.profile-pet-empty-list strong{color:#cbd5e4}
.admin-pet-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding:12px;border:1px solid #38465b;border-radius:12px;background:linear-gradient(145deg,#121a27,#0c121b)}.admin-pet-toolbar>div{display:flex;align-items:center;gap:9px}.admin-pet-toolbar>div>svg{width:24px;color:#84dfff}.admin-pet-toolbar span,.admin-pet-toolbar strong,.admin-pet-toolbar small{display:block}.admin-pet-toolbar small{margin-top:3px;color:#8190a5}.admin-pet-toolbar-actions{display:flex;gap:7px}.admin-pet-toolbar-actions button{min-height:36px;display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid #42627c;border-radius:8px;background:#132534;color:#b8ddf7;cursor:pointer;font-weight:800}.admin-pet-toolbar-actions button:disabled{cursor:wait;opacity:.55}.admin-pet-toolbar-actions svg{width:14px}
.pet-catalog-pagination{grid-column:1/-1;margin-top:12px}
.admin-pet-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-pet-catalog>article{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;padding:10px;border:1px solid #344156;border-radius:12px;background:#0d141e}.admin-pet-catalog>article.is-hidden{opacity:.62}.admin-pet-image{height:170px;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:radial-gradient(circle,#273866,#090e17 70%)}.admin-pet-image img{width:100%;height:100%;object-fit:contain}.admin-pet-copy header{display:flex;justify-content:space-between;gap:6px}.admin-pet-copy header strong{color:#edf4ff}.admin-pet-copy header em{padding:3px 6px;border-radius:99px;background:#183828;color:#8ce5a8;font-size:8px;font-style:normal}.admin-pet-catalog>article.is-hidden .admin-pet-copy header em{background:#392027;color:#ef9eab}.admin-pet-copy code{display:block;margin-top:4px;color:#77a9dc}.admin-pet-copy p{min-height:45px;margin:8px 0;color:#8d9bad;font-size:10px;line-height:1.45}.admin-pet-copy>div{display:flex;justify-content:space-between;color:#79889c}.admin-pet-copy>div b{color:#ffd277}.admin-pet-catalog>article>footer{grid-column:1/-1;display:flex;gap:6px}.admin-pet-catalog>article>footer button{min-height:32px;display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid #42546b;border-radius:7px;background:#172231;color:#cbd8e7;cursor:pointer}.admin-pet-catalog>article>footer svg{width:13px}.admin-pet-editor fieldset{position:relative}.admin-pet-asset-picker{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px}.admin-pet-asset-picker button{min-height:38px;display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #496282;border-radius:8px;background:#17283a;color:#bdddff;cursor:pointer}.admin-pet-asset-picker input{min-width:0}.admin-pet-form-preview{height:240px;display:grid;place-items:center;align-content:center;margin-top:9px;overflow:hidden;border:1px dashed #526784;border-radius:12px;background:radial-gradient(circle,#283b6a,#080c13 70%)}.admin-pet-form-preview img{width:100%;height:210px;object-fit:contain}.admin-pet-image .profile-pet-image-fallback{font-size:58px}.admin-pet-copy{min-width:0}.admin-pet-form-preview span{font-size:76px}.admin-pet-form-preview small{color:#9babc1}
@media(max-width:680px){.profile-pet-stage{top:52px;right:8px;bottom:-92px;width:58%;height:auto}.profile-pet-portrait{width:43%;bottom:86px;height:95px}.profile-pet-info-dock{margin:7px 9px 0}.profile-pet-stage-copy{grid-template-columns:1fr;padding:7px 8px}.profile-pet-info-dock .profile-pet-name{grid-column:1;grid-row:1;font-size:12px}.profile-pet-stage-copy>span{grid-column:1;grid-row:2;font-size:8px}.profile-pet-exp{grid-column:1;grid-row:3}.profile-pet-stage-actions{grid-column:1;grid-row:4;margin-top:7px}.profile-pet-stage-actions button{min-height:24px;font-size:8px}.profile-pet-empty{min-width:150px;padding:8px 9px}.profile-pet-empty strong{font-size:11px}.profile-pet-catalog,.admin-pet-catalog{grid-template-columns:1fr}.profile-pet-shop-item{grid-template-columns:96px minmax(0,1fr)}.profile-pet-shop-image{height:138px}.admin-pet-toolbar{align-items:stretch;flex-direction:column}.admin-pet-catalog>article{grid-template-columns:100px minmax(0,1fr)}.admin-pet-image{height:138px}.admin-pet-asset-picker{grid-template-columns:1fr}.profile-cover-edit{top:45px}.profile-bio{padding-inline:11px}}
@media(prefers-reduced-motion:reduce){.profile-pet-portrait,.pet-name-tier-6{animation:none!important}}

/* Mỵ Dạ: black nickname with a restrained violet aura */
.user-nick.nick-effect-mi-da>.user-nick-text{color:#151019!important;-webkit-text-stroke:.66px #84678f;paint-order:stroke fill;font-family:Georgia,"Times New Roman",serif;font-weight:850;letter-spacing:.028em;text-shadow:0 1px 0 #050307,0 0 2px #654873,0 0 5px #51305f,0 0 9px #392043;animation:nickname-mi-da-aura 3.6s ease-in-out infinite alternate;animation-delay:var(--nick-style-animation-delay,0s)}
@keyframes nickname-mi-da-aura{to{color:#1c1421!important;-webkit-text-stroke-color:#9a78a6;text-shadow:0 1px 0 #050307,0 0 3px #765184,0 0 6px #5d386b,0 0 11px #43264e}}
@media(prefers-reduced-motion:reduce){.user-nick.nick-effect-mi-da>.user-nick-text{animation:none!important}}

/* Nguyệt Hoa: monthly profile + chat bundle */
.profile-panel.has-profile-skin[data-skin-pattern="moon-bloom"]{overflow:visible;border:2px solid #d36af1!important;border-radius:20px;outline:1px solid #64dbc8;outline-offset:3px;background:radial-gradient(circle at 12% 8%,#6e2c7f42,transparent 30%),radial-gradient(circle at 88% 86%,#1a9b8640,transparent 34%),linear-gradient(150deg,#23102e 0,#171322 48%,#0b2424 100%)!important;color:#f7edfb;box-shadow:inset 0 0 0 1px #f2cbff21,inset 0 0 30px #8f45a42b,0 0 0 1px #e3c38499,0 12px 30px #0009,0 0 18px #a94cc775}
.profile-panel.has-profile-skin[data-skin-pattern="moon-bloom"]:before{inset:0;border-radius:inherit;background:radial-gradient(circle at 8% 7%,#fff 0 2px,transparent 3px),radial-gradient(circle at 91% 15%,#64dbc8aa 0 1px,transparent 3px),radial-gradient(circle at 82% 88%,#d36af188 0 2px,transparent 4px);background-size:29px 29px,37px 37px,43px 43px;opacity:.86}
.profile-panel.has-profile-skin[data-skin-pattern="moon-bloom"]:after{inset:5px;border:1px solid #e3c384b8;border-radius:15px;box-shadow:inset 0 0 18px #d36af12e}
.profile-panel[data-skin-pattern="moon-bloom"]>.panel-title{border-bottom:1px solid #9e659f!important;background:linear-gradient(90deg,#32153d,#1b1b2c 52%,#11342f)!important;color:#f8eaff;box-shadow:inset 0 -5px 14px #d36af11f}
.profile-panel[data-skin-pattern="moon-bloom"]>.panel-title svg{color:#64dbc8}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame{inset:-6px;z-index:3;border:2px solid #d36af1;border-radius:24px;box-shadow:inset 0 0 0 1px #e3c38475,0 0 12px #d36af18a,0 0 20px #64dbc83d;pointer-events:none}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame:before{inset:5px;border:1px dashed #64dbc8;border-radius:18px;box-shadow:inset 0 0 10px #d36af126;opacity:.84}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame:after{content:"☾  NGUYỆT HOA  ❀";top:-13px;left:50%;width:auto;height:20px;padding:0 9px;border:1px solid #e3c384;border-radius:999px;background:#1b1124;color:#f2d9fb;font:800 9px/18px Georgia,serif;letter-spacing:.08em;text-shadow:0 0 5px #d36af1;box-shadow:0 2px 9px #0009,0 0 8px #64dbc84d;transform:translateX(-50%);white-space:nowrap}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame>i{width:22px;height:22px;border:1px solid #f0d49a;border-radius:50%;background:conic-gradient(from 15deg,#6e2d86 0 12%,#d36af1 13% 25%,#143f3b 26% 38%,#64dbc8 39% 51%,#e3c384 52% 64%,#9f4bb9 65% 77%,#f0d49a 78% 90%,#6e2d86 91%);box-shadow:inset 0 0 0 4px #17101f,0 0 8px #d36af1,0 0 12px #64dbc866;animation:moon-bloom-flower 8s linear infinite}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame>.top-left{top:-7px;left:-7px}.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame>.top-right{top:-7px;right:-7px;animation-direction:reverse}.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame>.bottom-left{bottom:-7px;left:-7px;animation-direction:reverse}.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame>.bottom-right{right:-7px;bottom:-7px}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame>span{height:2px;opacity:.9;background:repeating-linear-gradient(90deg,#d36af1 0 3px,transparent 3px 8px,#64dbc8 8px 11px,transparent 11px 16px)}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame>b{width:2px;opacity:.82;background:repeating-linear-gradient(180deg,#e3c384 0 3px,transparent 3px 9px,#64dbc8 9px 12px,transparent 12px 18px)}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-cover{border-color:#b96ace;border-radius:16px 16px 8px 8px;box-shadow:0 0 0 1px #64dbc870,0 6px 18px #0009}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-identity{border-color:#875098;background:linear-gradient(110deg,#2b1535,#12131d 58%,#10312d);box-shadow:inset 0 0 14px #d36af11c}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-identity-copy,.profile-panel[data-skin-pattern="moon-bloom"] .profile-actions,.profile-panel[data-skin-pattern="moon-bloom"] .profile-stats{border-color:#855295;background:linear-gradient(145deg,#26142f,#15151f 58%,#102824)!important;color:#f2e9f5;box-shadow:inset 0 0 12px #d36af11a,0 0 8px #0005}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-identity-copy strong,.profile-panel[data-skin-pattern="moon-bloom"] .profile-stats b{color:#fff3ff}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-identity-copy>span,.profile-panel[data-skin-pattern="moon-bloom"] .profile-identity-copy small,.profile-panel[data-skin-pattern="moon-bloom"] .profile-identity-id,.profile-panel[data-skin-pattern="moon-bloom"] .profile-bio{color:#cdbbd3}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-level-mood b,.profile-panel[data-skin-pattern="moon-bloom"] .profile-level-mood em{color:#86e1d2}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-actions button{border-color:#9c65aa;background:linear-gradient(145deg,#3b2147,#172621);color:#f8eefb;box-shadow:inset 0 1px #fff1}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-actions button:hover{border-color:#70ddcb;background:linear-gradient(145deg,#4b285a,#1b3932)}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-stats button,.profile-panel[data-skin-pattern="moon-bloom"] .profile-stats button:nth-child(even){background:linear-gradient(155deg,#291733,#111923);color:#cbbbd1}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-wall-avatar{border-color:#d36af1;box-shadow:inset 0 0 0 3px #0b1116,0 0 0 1px #64dbc8,0 0 12px #d36af17d}
.level-skin-preview[data-skin-pattern="moon-bloom"],.shop-demo-stage.profile-skin-demo[data-skin-pattern="moon-bloom"]{border-color:#d36af1;background:radial-gradient(circle at 16% 15%,#d36af13d,transparent 31%),radial-gradient(circle at 86% 82%,#64dbc82e,transparent 34%),linear-gradient(145deg,#281333,#151522 56%,#0c2926);box-shadow:inset 0 0 0 2px #e3c38480,inset 0 0 20px #d36af12f,0 0 10px #64dbc84c}
.level-skin-preview[data-skin-pattern="moon-bloom"]:before,.shop-demo-stage.profile-skin-demo[data-skin-pattern="moon-bloom"]:before{border:1px dashed #64dbc8;box-shadow:inset 0 0 10px #d36af126}
.level-skin-preview[data-skin-pattern="moon-bloom"]:after{border-color:#e3c384;box-shadow:inset 0 0 9px #d36af12b}
.level-skin-preview[data-skin-pattern="moon-bloom"] i,.level-skin-preview[data-skin-pattern="moon-bloom"] span,.shop-demo-stage.profile-skin-demo[data-skin-pattern="moon-bloom"]>i{border-color:#e3c384;background:conic-gradient(#d36af1,#64dbc8,#e3c384,#d36af1);box-shadow:inset 0 0 0 3px #17101f,0 0 8px #d36af1}
.shop-demo-stage.profile-skin-demo[data-skin-pattern="moon-bloom"]>span{color:#f4e8f8}.shop-demo-stage.profile-skin-demo[data-skin-pattern="moon-bloom"]>span small{color:#a9d9d0}

#direct-conversation-panel[data-direct-theme] .direct-conversation-head[data-message-frame-theme="moon-bloom"],.conversation-row[data-message-frame-theme="moon-bloom"],.message-frame-demo-card[data-message-frame-theme="moon-bloom"]{position:relative;overflow:hidden;border-color:#b874d8;background:linear-gradient(145deg,#1a1121,#24152e 52%,#102621);box-shadow:inset 0 0 0 1px #e3c38480,inset 0 0 17px #b874d82e,0 0 9px #74458a52}
.direct-conversation-head[data-message-frame-theme="moon-bloom"]:before,.conversation-row[data-message-frame-theme="moon-bloom"]:before,.message-frame-demo-card[data-message-frame-theme="moon-bloom"]:before{content:"☾  ❀";position:absolute;z-index:1;top:3px;right:7px;color:#e9d39e;font:700 11px Georgia,serif;letter-spacing:.14em;text-shadow:0 0 6px #b874d8;opacity:.9}
.direct-conversation-head[data-message-frame-theme="moon-bloom"]:after,.conversation-row[data-message-frame-theme="moon-bloom"]:after,.message-frame-demo-card[data-message-frame-theme="moon-bloom"]:after{content:"";position:absolute;inset:auto -12px -16px auto;width:70px;height:38px;border:1px solid #72d4c188;border-radius:50%;box-shadow:0 0 9px #72d4c14d;transform:rotate(-18deg);pointer-events:none}
#direct-conversation-panel[data-message-frame-theme="moon-bloom"],#direct-conversation-panel .direct-message[data-message-frame-theme="moon-bloom"]{--message-frame-primary:#b874d8;--message-frame-secondary:#72d4c1;--message-frame-surface:#17101f;--message-frame-accent:#f4dcaa}
#direct-conversation-panel[data-message-frame-theme="moon-bloom"] .direct-message-list{background:radial-gradient(circle at 12% 8%,#b874d81f,transparent 28%),radial-gradient(circle at 92% 88%,#72d4c11a,transparent 30%),#100b15}
#direct-conversation-panel[data-direct-theme][data-message-frame-theme="moon-bloom"] .direct-message:not(.own) .direct-message-bubble{border-color:#70507e;background:linear-gradient(145deg,#24182d,#17101f);box-shadow:inset 0 0 10px #b874d81c}
#direct-conversation-panel[data-direct-theme][data-message-frame-theme="moon-bloom"] .direct-message.own .direct-message-bubble{border-color:#529f91;background:linear-gradient(145deg,#18332e,#12231f);box-shadow:inset 0 0 10px #72d4c11f}
#direct-conversation-panel[data-message-frame-theme="moon-bloom"] .direct-compose-dock{border-color:#765087;background:linear-gradient(145deg,#1d1425,#131018)}
#direct-conversation-panel[data-message-frame-theme="moon-bloom"] .direct-send-button{border-color:#e3c384;background:linear-gradient(145deg,#b874d8,#5c8f85);color:#fff8e7}
@keyframes moon-bloom-flower{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame>i{animation:none!important}}

/* Performance pass: keep the mascot readable and animated while limiting all
   continuous work to compositor-only transforms. */
.profile-pet-exp{height:5px}
.profile-pet-shop-copy header strong{font-size:15px;line-height:1.25}
.profile-pet-shop-copy header span{font-size:11px}
.profile-pet-shop-copy>p{font-size:11px;line-height:1.55}
.profile-pet-buy label,.profile-pet-rename label{font-size:10px}
.profile-pet-buy button,.profile-pet-rename button,.profile-pet-owned-actions button{font-size:10px}

/* Nguyệt Hoa keeps its colors and ornaments, but large-area shine and border
   chase animations are disabled. Only the four tiny flowers rotate slowly. */
.profile-panel.has-profile-skin[data-skin-pattern="moon-bloom"]{
  box-shadow:inset 0 0 0 1px #f2cbff1c,0 10px 24px #0008,0 0 10px #a94cc74d
}
.profile-panel.has-profile-skin[data-skin-pattern="moon-bloom"]:before{
  background-size:58px 58px,74px 74px,86px 86px;
  opacity:.66
}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame{
  box-shadow:inset 0 0 0 1px #e3c38466,0 0 10px #a94cc75c
}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame>i{
  box-shadow:inset 0 0 0 4px #17101f,0 0 7px #b965d1;
  animation-duration:24s;
  will-change:transform;
  contain:layout style paint
}
.profile-panel[data-skin-pattern="moon-bloom"] .profile-cover:after,
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame:before,
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame:after,
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame>span,
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame>b{
  animation:none!important;
  filter:none!important
}
.level-skin-preview[data-skin-pattern="moon-bloom"]:before,
.level-skin-preview[data-skin-pattern="moon-bloom"]:after,
.level-skin-preview[data-skin-pattern="moon-bloom"]>i,
.level-skin-preview[data-skin-pattern="moon-bloom"]>span,
.level-skin-preview[data-skin-pattern="moon-bloom"]>b,
.shop-demo-stage.profile-skin-demo[data-skin-pattern="moon-bloom"]:after,
.shop-demo-stage.profile-skin-demo[data-skin-pattern="moon-bloom"]>i{
  animation:none!important;
  filter:none!important
}
@media(max-width:680px){
  .profile-pet-info-dock .profile-pet-name{font-size:15px}
  .profile-pet-stage-copy>span{font-size:10px}
  .profile-pet-stage-actions button{min-height:27px;font-size:9.5px}
  .profile-pet-shop-copy header strong{font-size:14px}
  .profile-pet-shop-copy header span,.profile-pet-shop-copy>p{font-size:10px}
  .profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame>i{animation:none!important;will-change:auto}
}

/* The compact account strip and the main editable profile avatar need less
   decorative overhang. Keep each avatar image unchanged. */
#header-avatar.has-avatar-frame > :not(img),
#profile-avatar.has-avatar-frame > :not(img){
  scale:.88;
  transform-origin:center
}

/* Transparent image frames must stay transparent in every surface. Applying
   drop-shadow to a full transparent canvas can expose its rectangular bounds
   as a dark square on some browsers and GPUs. */
.avatar.has-avatar-frame.avatar-theme-image-frame .avatar-image-frame,
.avatar.has-avatar-frame.avatar-theme-image-frame .avatar-image-frame > img{
  background:transparent!important;
  box-shadow:none!important
}
.avatar.has-avatar-frame.avatar-theme-image-frame .avatar-image-frame > img{
  filter:none!important;
  mix-blend-mode:normal
}

/* Make avatar-frame artwork more prominent in every chat surface without
   changing the avatar image or the space reserved by the message layout. */
:is(
  .global-chatbox-panel,
  #room-chatbox-shell,
  #direct-conversation-panel,
  #group-chat-panel,
  .quick-pm-window
) .avatar.has-avatar-frame > :not(img){
  scale:1.12;
  transform-origin:center
}

/* Nguyet Hoa title badges inherit opposing inset edges from the generic
   ornate frames. Reset those edges so each badge hugs its title text. */
.profile-panel[data-skin-pattern="moon-bloom"] .profile-skin-frame:after{
  right:auto;
  bottom:auto;
  width:max-content;
  max-width:calc(100% - 32px);
  box-sizing:border-box;
  opacity:1
}
.direct-conversation-head[data-message-frame-theme="moon-bloom"]:before,
.conversation-row[data-message-frame-theme="moon-bloom"]:before,
.message-frame-demo-card[data-message-frame-theme="moon-bloom"]:before{
  content:attr(data-message-frame-label);
  top:-1px;
  right:auto;
  bottom:auto;
  left:50%;
  width:max-content;
  max-width:calc(100% - 24px);
  box-sizing:border-box;
  padding:2px 8px 3px;
  overflow:hidden;
  border:1px solid #b874d8;
  border-top:0;
  border-radius:0 0 9px 9px;
  background:color-mix(in srgb,#17101f 90%,#090b0e);
  color:#f4dcaa;
  font:950 8px/1.3 "Be Vietnam Pro",sans-serif;
  letter-spacing:.08em;
  text-overflow:ellipsis;
  text-shadow:0 0 5px #b874d8;
  white-space:nowrap;
  opacity:1;
  transform:translateX(-50%)
}

/* Quỷ Đỏ Thành Manchester: one transform-only floating frame plus two small
   flame wisps. This keeps the effect lively without using a heavy GIF. */
.avatar-frame-red-devils .avatar-image-frame{
  isolation:isolate;
  will-change:transform;
  animation:red-devils-frame-float 4.8s cubic-bezier(.45,.05,.55,.95) infinite!important
}
.avatar-frame-red-devils .avatar-image-frame:before,
.avatar-frame-red-devils .avatar-image-frame:after{
  content:"";
  position:absolute;
  z-index:7;
  width:16%;
  height:25%;
  clip-path:polygon(50% 0,64% 31%,88% 17%,78% 59%,100% 52%,74% 100%,22% 100%,0 58%,24% 65%,13% 23%,39% 39%);
  background:radial-gradient(ellipse at 50% 82%,#fff3a8 0 9%,#ffc52f 18%,#ff5a16 38%,#dc0909 59%,transparent 73%);
  mix-blend-mode:screen;
  transform-origin:50% 100%;
  pointer-events:none;
  animation:red-devils-fire-flicker 1.55s ease-in-out infinite alternate
}
.avatar-frame-red-devils .avatar-image-frame:before{
  top:18%;
  left:6%;
  rotate:-19deg
}
.avatar-frame-red-devils .avatar-image-frame:after{
  right:7%;
  bottom:15%;
  rotate:24deg;
  animation-delay:-.78s
}
@keyframes red-devils-frame-float{
  0%,100%{transform:translate3d(0,0,0) rotate(-1deg) scale(1)}
  50%{transform:translate3d(0,-2.2%,0) rotate(1.4deg) scale(1.025)}
}
@keyframes red-devils-fire-flicker{
  0%{opacity:.45;transform:translate3d(0,7%,0) scale(.74,1.03)}
  45%{opacity:1;transform:translate3d(2%,-4%,0) scale(1.06,.9)}
  100%{opacity:.68;transform:translate3d(-2%,-9%,0) scale(.87,1.13)}
}
@media(prefers-reduced-motion:reduce){
  .avatar-frame-red-devils .avatar-image-frame,
  .avatar-frame-red-devils .avatar-image-frame:before,
  .avatar-frame-red-devils .avatar-image-frame:after{
    animation:none!important;
    will-change:auto
  }
}

/* Restore the evening profile-pet interactions and keep the old direct menu above the composer. */
.direct-conversation-head,
.direct-conversation-head[data-message-frame] { z-index: 60 !important; overflow: visible !important; }
.direct-quick-menu,
#direct-conversation-panel[data-message-frame] .direct-quick-menu { z-index: 90 !important; }

.feed-card-head > .avatar,
.global-chat-message-head > .avatar:not(.anonymous-avatar) { cursor: zoom-in; }
.direct-message > .avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  font-size: 18px;
}

#profile-main-panel,
#profile-main-panel.has-profile-skin { position: relative; overflow: visible !important; isolation: isolate; }
#profile-main-panel .profile-cover { z-index: auto !important; overflow: visible !important; }
.profile-pet-stage {
  z-index: 190;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: clamp(480px, 72vh, 760px);
  overflow: visible !important;
  pointer-events: none;
}
.profile-pet-stage[hidden] { display: none !important; }
.profile-pet-portrait {
  z-index: 2;
  right: auto;
  bottom: auto;
  left: 72%;
  top: 12%;
  width: clamp(120px, 22%, 176px);
  height: clamp(126px, 23vw, 184px);
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  animation: profile-pet-roam-map 24s cubic-bezier(.45,.05,.55,.95) infinite;
  transition: left .58s cubic-bezier(.2,.85,.28,1.18), top .58s cubic-bezier(.2,.85,.28,1.18), filter .2s ease;
}
.profile-pet-portrait:hover { filter: brightness(1.08); }
.profile-pet-portrait.is-roaming {
  animation: none !important;
  transition: filter .2s ease;
}
.profile-pet-portrait.is-dodging {
  animation: none !important;
  filter: brightness(1.12) drop-shadow(0 0 9px #7f8cff88);
}
.profile-pet-touch-burst {
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 8px;
  pointer-events: none;
  animation: profile-pet-touch-pop .72s ease-out forwards;
}
.profile-pet-touch-burst::before,
.profile-pet-touch-burst::after {
  content: "";
  position: absolute;
  inset: -18px;
  border: 2px solid #b8f6ff;
  border-radius: 50%;
  box-shadow: 0 0 12px #7cecff, inset 0 0 10px #936cff;
}
.profile-pet-touch-burst::after { inset: -7px; border-color: #fff2a2; }
.profile-pet-touch-burst > i,
.profile-pet-touch-burst > b { position: absolute; left: 0; top: 0; color: #fff4a6; font-style: normal; text-shadow: 0 0 8px #6eeaff; }
.profile-pet-touch-burst > i:nth-child(1) { transform: translate(-42px,-28px); }
.profile-pet-touch-burst > i:nth-child(2) { transform: translate(35px,-35px); }
.profile-pet-touch-burst > i:nth-child(3) { transform: translate(-37px,31px); }
.profile-pet-touch-burst > i:nth-child(4) { transform: translate(40px,26px); }
.profile-pet-touch-burst > i::before { content: "✦"; }
.profile-pet-touch-burst > b { transform: translate(-3px,-6px) scale(1.8); }
.profile-pet-luck-float {
  position: absolute;
  z-index: 90;
  left: 50%;
  top: 46%;
  color: #fff2a0;
  font: 950 18px/1 "Be Vietnam Pro", Arial, sans-serif;
  font-style: normal;
  text-shadow: 0 1px 2px #000, 0 0 7px #ffba26, 0 0 13px #fff06a;
  pointer-events: none;
  animation: profile-pet-luck-rise 1.35s ease-out forwards;
}
@keyframes profile-pet-roam-map {
  0%, 100% { left: 72%; top: 12%; transform: rotate(-2deg) scale(1); }
  16% { left: 12%; top: 21%; transform: rotate(2deg) scale(.96); }
  33% { left: 43%; top: 58%; transform: rotate(-1deg) scale(1.04); }
  50% { left: 78%; top: 72%; transform: rotate(2deg) scale(.98); }
  67% { left: 20%; top: 76%; transform: rotate(-2deg) scale(1.03); }
  84% { left: 48%; top: 9%; transform: rotate(1deg) scale(.97); }
}
@keyframes profile-pet-luck-rise {
  0% { opacity: 0; transform: translate(-50%, 4px) scale(.72); }
  16% { opacity: 1; transform: translate(calc(-50% + var(--luck-drift)), -8px) scale(1.08); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--luck-drift)), -92px) scale(.9); }
}
@keyframes profile-pet-touch-pop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(-18deg); }
  28% { opacity: 1; transform: translate(-50%,-50%) scale(1.15) rotate(4deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.75) rotate(18deg); }
}
@media (max-width: 680px) {
  .profile-pet-stage { top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: min(640px, 76vh); }
  .profile-pet-portrait { width: 116px; height: 130px; }
  .profile-pet-luck-float { font-size: 16px; }
}
#profile-main-panel > #wall-cover.profile-cover { z-index: auto !important; }
#profile-main-panel > :not(.profile-cover):not(.profile-options-menu):not(.profile-skin-frame):not(.profile-leaf-effect) { z-index: 3 !important; }
@media (prefers-reduced-motion: reduce) {
  .profile-pet-portrait { animation: none; }
}

/* Admin-gifted Tường Nhà effect: image-sprite leaves fall in changing wind,
   rest at the frame foot, then dissolve without intercepting profile input. */
#profile-main-panel > .profile-leaf-effect {
  position: absolute !important;
  inset: 0;
  z-index: 7 !important;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  contain: layout style paint;
  isolation: isolate;
}
.profile-leaf-effect[hidden] { display: none !important; }
.profile-leaf-fall-layer,
.profile-leaf-ground-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.profile-leaf-ground-layer { top: auto; height: 72px; }
.profile-leaf {
  position: absolute;
  display: block;
  background-image: var(--profile-leaf-atlas, url('/assets/effects/profile-leaf-atlas-v1.png'));
  background-repeat: no-repeat;
  background-size: 400% 300%;
  filter: drop-shadow(0 2px 2px #160d075c) saturate(1.06);
  transform-origin: 52% 48%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.profile-leaf.is-falling {
  top: -48px;
  left: var(--leaf-left);
  opacity: 0;
  animation: profileLeafFall var(--leaf-duration) cubic-bezier(.27,.08,.38,1) var(--leaf-delay) forwards;
}
.profile-leaf.is-settled {
  opacity: 0;
  animation: profileLeafSettle var(--leaf-rest-duration) ease-out forwards;
}
@keyframes profileLeafFall {
  0% { opacity: 0; transform: translate3d(0,-12px,0) rotate(-24deg) scale(.72); }
  7% { opacity: .96; }
  28% { transform: translate3d(var(--leaf-sway-a),var(--leaf-fall-a),0) rotate(var(--leaf-rotate-a)) scale(.94); }
  63% { transform: translate3d(var(--leaf-sway-b),var(--leaf-fall-b),0) rotate(var(--leaf-rotate-b)) scale(1); }
  91% { opacity: .99; transform: translate3d(var(--leaf-sway-c),var(--leaf-fall-c),0) rotate(var(--leaf-rotate-c)) scale(.98); }
  100% { opacity: .98; transform: translate3d(var(--leaf-drift),var(--leaf-fall),0) rotate(var(--leaf-rotate-end)) scale(.96); }
}
@keyframes profileLeafSettle {
  0% { opacity: .98; transform: translate3d(0,0,0) rotate(var(--leaf-rest-angle)) scale(.96); }
  8% { opacity: 1; transform: translate3d(var(--leaf-land-hop),-4px,0) rotate(var(--leaf-rest-angle-a)) scale(.97); }
  21% { transform: translate3d(var(--leaf-land-skid),1px,0) rotate(var(--leaf-rest-angle-b)) scale(.94); }
  39% { transform: translate3d(var(--leaf-rustle),-1px,0) rotate(var(--leaf-rest-angle-a)) scale(.935); }
  58% { transform: translate3d(0,0,0) rotate(var(--leaf-rest-angle)) scale(.93); }
  77% { opacity: .94; transform: translate3d(var(--leaf-rustle),-1px,0) rotate(var(--leaf-rest-angle-b)) scale(.925); }
  100% { opacity: 0; transform: translate3d(var(--leaf-fade-drift),5px,0) rotate(var(--leaf-rest-angle)) scale(.8); }
}

.profile-snowflake {
  position: absolute;
  display: grid;
  place-items: center;
  color: #fff;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 3px #dff7ff, 0 0 8px #77cfff9c, 0 1px 2px #16385c80;
  filter: blur(var(--snow-blur,0));
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.profile-snowflake.is-crystal { text-shadow: 0 0 4px #fff, 0 0 10px #80d8ffcc, 0 1px 2px #16486c99; }
.profile-snowflake.is-falling {
  top: -28px;
  left: var(--snow-left);
  opacity: 0;
  animation: profileSnowFall var(--snow-duration) linear var(--snow-delay) forwards;
}
.profile-snowflake.is-settled {
  opacity: 0;
  animation: profileSnowMelt var(--snow-rest-duration) ease-out forwards;
}
@keyframes profileSnowFall {
  0% { opacity: 0; transform: translate3d(0,-8px,0) rotate(0deg) scale(.68); }
  6% { opacity: var(--snow-opacity); }
  27% { transform: translate3d(var(--snow-sway-a),var(--snow-fall-a),0) rotate(var(--snow-rotate-a)) scale(.92); }
  58% { opacity: var(--snow-opacity); transform: translate3d(var(--snow-sway-b),var(--snow-fall-b),0) rotate(var(--snow-rotate-b)) scale(1); }
  83% { transform: translate3d(var(--snow-sway-c),var(--snow-fall-c),0) rotate(var(--snow-rotate-c)) scale(.96); }
  100% { opacity: var(--snow-opacity); transform: translate3d(var(--snow-drift),var(--snow-fall),0) rotate(var(--snow-rotate-end)) scale(.92); }
}
@keyframes profileSnowMelt {
  0% { opacity: var(--snow-opacity); transform: translate3d(0,0,0) rotate(var(--snow-rest-angle)) scale(.92); }
  18% { opacity: .96; transform: translate3d(var(--snow-melt-drift),1px,0) rotate(var(--snow-rest-angle)) scale(1.03,.72); }
  55% { opacity: .76; transform: translate3d(var(--snow-melt-drift),2px,0) rotate(var(--snow-rest-angle)) scale(1.16,.52); }
  100% { opacity: 0; transform: translate3d(var(--snow-melt-drift),5px,0) rotate(var(--snow-rest-angle)) scale(1.35,.2); }
}

.profile-peach-blossom {
  position: absolute;
  display: block;
  background-image: url('/assets/profile-peach-petal-atlas-v2.png?v=2');
  background-repeat: no-repeat;
  background-size: 400% 400%;
  filter: drop-shadow(0 1px 1px #40112666) saturate(.96);
  transform-origin: 50% 48%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.profile-peach-blossom.is-falling {
  top: -42px;
  left: var(--blossom-left);
  opacity: 0;
  animation: profilePeachBlossomFall var(--blossom-duration) cubic-bezier(.18,.12,.36,1) var(--blossom-delay) forwards;
}
.profile-peach-blossom.is-settled {
  opacity: 0;
  animation: profilePeachBlossomSettle var(--blossom-rest-duration) ease-out forwards;
}
@keyframes profilePeachBlossomFall {
  0% { opacity: 0; transform: translate3d(0,-12px,0) rotate(-18deg) scale(.7); }
  7% { opacity: var(--blossom-opacity); }
  100% { opacity: var(--blossom-opacity); transform: translate3d(var(--blossom-drift),var(--blossom-fall),0) rotate(var(--blossom-rotate-end)) scale(.92); }
}
@keyframes profilePeachBlossomSettle {
  0%, 58% { opacity: var(--blossom-opacity); transform: translate3d(0,0,0) rotate(var(--blossom-rest-angle)) scale(.92); }
  100% { opacity: 0; transform: translate3d(var(--blossom-fade-drift),4px,0) rotate(var(--blossom-rest-angle)) scale(.78); }
}

.shop-demo-stage.profile-effect-demo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 112px;
  border: 1px solid #98b869;
  background: radial-gradient(circle at 68% 26%,#fff5b52e,transparent 31%),linear-gradient(160deg,#203927,#101a12 65%,#3a2816);
}
.shop-demo-stage.profile-effect-demo:after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: -32%;
  left: -8%;
  height: 54%;
  border-radius: 50%;
  background: linear-gradient(180deg,#77963d,#2b4a22 72%);
  box-shadow: 0 -5px 18px #90c35630;
}
.shop-demo-stage.profile-effect-demo > span { position: relative; z-index: 2; text-align: center; text-shadow: 0 2px 5px #000; }
.shop-demo-stage.profile-effect-demo > span small { display: block; color: #e9dda1; font-size: 8px; letter-spacing: .09em; }
.shop-demo-stage.profile-effect-demo > span strong { color: #fff6d0; }
.shop-demo-stage.profile-effect-demo > i {
  position: absolute;
  z-index: 3;
  top: -28px;
  width: 25px;
  height: 25px;
  background-image: var(--profile-leaf-atlas);
  background-repeat: no-repeat;
  background-size: 400% 300%;
  filter: drop-shadow(0 1px 1px #0007);
  animation: profileLeafPreview 4.8s linear infinite;
}
.shop-demo-stage.profile-effect-demo > i:nth-of-type(1) { left: 8%; background-position: 0 0; animation-delay: -1.1s; }
.shop-demo-stage.profile-effect-demo > i:nth-of-type(2) { left: 24%; width: 18px; height: 18px; background-position: 66.667% 50%; animation-delay: -3.6s; }
.shop-demo-stage.profile-effect-demo > i:nth-of-type(3) { left: 43%; width: 31px; height: 31px; background-position: 100% 0; animation-delay: -2.2s; }
.shop-demo-stage.profile-effect-demo > i:nth-of-type(4) { left: 61%; width: 21px; height: 21px; background-position: 33.333% 100%; animation-delay: -.3s; }
.shop-demo-stage.profile-effect-demo > i:nth-of-type(5) { left: 76%; width: 28px; height: 28px; background-position: 66.667% 100%; animation-delay: -4.2s; }
.shop-demo-stage.profile-effect-demo > i:nth-of-type(6) { left: 90%; width: 16px; height: 16px; background-position: 33.333% 50%; animation-delay: -2.9s; }
@keyframes profileLeafPreview {
  0% { opacity: 0; transform: translate3d(-7px,-5px,0) rotate(0); }
  10% { opacity: 1; }
  48% { transform: translate3d(17px,62px,0) rotate(230deg); }
  100% { opacity: 0; transform: translate3d(-5px,135px,0) rotate(620deg); }
}
.shop-demo-stage.profile-effect-demo.is-snow {
  border-color: #abdffa;
  background: radial-gradient(circle at 70% 20%,#ffffff70,transparent 27%),linear-gradient(160deg,#23577d,#122a48 62%,#091828);
}
.shop-demo-stage.profile-effect-demo.is-snow:after {
  bottom: -38%;
  height: 58%;
  background: linear-gradient(180deg,#eefaff,#b8ddea 72%);
  box-shadow: 0 -5px 22px #e9faff85;
}
.shop-demo-stage.profile-effect-demo.is-snow > span small { color: #dff6ff; }
.shop-demo-stage.profile-effect-demo.is-snow > span strong { color: #fff; text-shadow: 0 2px 7px #0a2b4d; }
.shop-demo-stage.profile-effect-demo.is-snow > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle,#fff 0 38%,#d8f5ff 42% 64%,transparent 68%);
  filter: drop-shadow(0 0 4px #c5efff);
  animation: profileSnowPreview 3.9s linear infinite;
}
.shop-demo-stage.profile-effect-demo.is-snow > i:nth-of-type(1) { left: 5%; width: 6px; height: 6px; animation-delay: -1.1s; }
.shop-demo-stage.profile-effect-demo.is-snow > i:nth-of-type(2) { left: 14%; width: 11px; height: 11px; animation-delay: -3.2s; }
.shop-demo-stage.profile-effect-demo.is-snow > i:nth-of-type(3) { left: 24%; width: 7px; height: 7px; animation-delay: -2.1s; }
.shop-demo-stage.profile-effect-demo.is-snow > i:nth-of-type(4) { left: 34%; width: 13px; height: 13px; animation-delay: -.4s; }
.shop-demo-stage.profile-effect-demo.is-snow > i:nth-of-type(5) { left: 43%; width: 8px; height: 8px; animation-delay: -3.7s; }
.shop-demo-stage.profile-effect-demo.is-snow > i:nth-of-type(6) { left: 52%; width: 5px; height: 5px; animation-delay: -1.8s; }
.shop-demo-stage.profile-effect-demo.is-snow > i:nth-of-type(7) { left: 61%; width: 12px; height: 12px; animation-delay: -2.8s; }
.shop-demo-stage.profile-effect-demo.is-snow > i:nth-of-type(8) { left: 69%; width: 7px; height: 7px; animation-delay: -.9s; }
.shop-demo-stage.profile-effect-demo.is-snow > i:nth-of-type(9) { left: 77%; width: 10px; height: 10px; animation-delay: -3.5s; }
.shop-demo-stage.profile-effect-demo.is-snow > i:nth-of-type(10) { left: 84%; width: 6px; height: 6px; animation-delay: -1.5s; }
.shop-demo-stage.profile-effect-demo.is-snow > i:nth-of-type(11) { left: 91%; width: 13px; height: 13px; animation-delay: -2.4s; }
.shop-demo-stage.profile-effect-demo.is-snow > i:nth-of-type(12) { left: 97%; width: 8px; height: 8px; animation-delay: -.2s; }
@keyframes profileSnowPreview {
  0% { opacity: 0; transform: translate3d(-4px,-7px,0) rotate(0deg) scale(.7); }
  9% { opacity: .96; }
  46% { transform: translate3d(10px,60px,0) rotate(120deg) scale(1); }
  100% { opacity: 0; transform: translate3d(-7px,135px,0) rotate(300deg) scale(.86); }
}
.shop-demo-stage.profile-effect-demo.is-blossom {
  border-color: #f39ab8;
  background: radial-gradient(circle at 74% 18%,#fff9df8c,transparent 25%),linear-gradient(158deg,#b95879,#6f254d 58%,#35172e);
}
.shop-demo-stage.profile-effect-demo.is-blossom:after {
  bottom: -37%;
  height: 59%;
  background: linear-gradient(180deg,#ffd0de,#ce7596 72%);
  box-shadow: 0 -5px 22px #ffd3e49c;
}
.shop-demo-stage.profile-effect-demo.is-blossom > span small { color: #ffe3ed; }
.shop-demo-stage.profile-effect-demo.is-blossom > span strong { color: #fff7fb; text-shadow: 0 2px 7px #59162f; }
.shop-demo-stage.profile-effect-demo.is-blossom > i {
  width: 12px;
  height: 12px;
  background-image: url('/assets/profile-peach-petal-atlas-v2.png?v=2');
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: 0 0;
  filter: drop-shadow(0 1px 1px #57152d80) saturate(.96);
  animation: profilePeachBlossomPreview 4.2s linear infinite;
}
.shop-demo-stage.profile-effect-demo.is-blossom > i:nth-of-type(1) { left: 96%; animation-delay: -.2s; }
.shop-demo-stage.profile-effect-demo.is-blossom > i:nth-of-type(2) { left: 86%; width: 9px; height: 9px; animation-delay: -1.4s; }
.shop-demo-stage.profile-effect-demo.is-blossom > i:nth-of-type(3) { left: 76%; width: 13px; height: 13px; animation-delay: -2.8s; }
.shop-demo-stage.profile-effect-demo.is-blossom > i:nth-of-type(4) { left: 66%; width: 10px; height: 10px; animation-delay: -3.6s; }
.shop-demo-stage.profile-effect-demo.is-blossom > i:nth-of-type(5) { left: 56%; width: 12px; height: 12px; animation-delay: -.8s; }
.shop-demo-stage.profile-effect-demo.is-blossom > i:nth-of-type(6) { left: 46%; width: 8px; height: 8px; animation-delay: -2.1s; }
.shop-demo-stage.profile-effect-demo.is-blossom > i:nth-of-type(7) { left: 36%; animation-delay: -3.2s; }
.shop-demo-stage.profile-effect-demo.is-blossom > i:nth-of-type(8) { left: 26%; width: 13px; height: 13px; animation-delay: -1.1s; }
.shop-demo-stage.profile-effect-demo.is-blossom > i:nth-of-type(9) { left: 16%; width: 10px; height: 10px; animation-delay: -2.5s; }
.shop-demo-stage.profile-effect-demo.is-blossom > i:nth-of-type(10) { left: 6%; animation-delay: -3.9s; }
@keyframes profilePeachBlossomPreview {
  0% { opacity: 0; transform: translate3d(6px,-8px,0) rotate(0deg) scale(.78); }
  8% { opacity: .9; }
  88% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(-12px,137px,0) rotate(150deg) scale(.9); }
}
.admin-profile-effect-showcase { margin: 12px 0; padding: 10px; border: 1px solid #5d6f45; border-radius: 12px; background: linear-gradient(145deg,#111d14,#101319); }
.admin-profile-effect-showcase > header { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #dcebad; }
.admin-profile-effect-showcase > header svg { width: 20px; }
.admin-profile-effect-showcase > header span { display: grid; gap: 2px; }
.admin-profile-effect-showcase > header small { color: #8fa08e; }
.admin-profile-effect-showcase .shop-demo-stage.profile-effect-demo { width: 150px; min-width: 150px; min-height: 92px; }

@media (max-width: 680px) {
  .profile-leaf-ground-layer { height: 54px; }
  .admin-profile-effect-showcase .shop-demo-stage.profile-effect-demo { width: 112px; min-width: 112px; min-height: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  #profile-main-panel > .profile-leaf-effect { display: none !important; }
  .shop-demo-stage.profile-effect-demo > i { animation: none !important; opacity: .78; top: 16px; }
}

/* Keep the inbox options control in one stable top-right position. Avatar and
   message frames can make rows taller, so vertical centering caused drift. */
.conversation-options-toggle,
.conversation-row[data-message-frame] .conversation-options-toggle {
  top: 8px;
  right: 8px;
  transform: none;
}

.conversation-row[data-message-frame] .conversation-options-toggle {
  top: 6px;
  right: 6px;
}

/* Bữa tiệc 4.44: bố cục gọn, sân khấu camera và chat phân trang. */
#party-room-panel .party-room-head {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 48px;
  padding: 7px 9px;
}
#party-room-panel .party-room-heading strong { font-size: 14px; }
#party-room-panel .party-room-actions {
  grid-column: auto;
  flex-wrap: nowrap;
  gap: 5px;
}
#party-room-panel .party-room-actions > button,
#party-room-panel .party-room-mode-actions button { min-height: 32px; height: 32px; border-radius: 8px; }
#party-room-panel .party-members-button { position: relative; overflow: visible; }
#party-room-panel .party-members-button b {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #17131e;
  border-radius: 999px;
  background: #6f3bd2;
  color: #fff;
  font-size: 8px;
  line-height: 1;
  box-sizing: border-box;
}
#party-room-panel .party-search-launcher { margin: 7px 8px 0; }
.party-room-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  background: #080a0d;
}
#party-room-panel .party-stage { gap: 8px; padding: 8px; }
#party-room-panel .party-player-column[hidden] { display: none !important; }
#party-room-panel .party-player-shell { border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.28); transition: opacity .18s ease,border-color .18s ease; }
#party-room-panel.party-screen-collapsed .party-player-shell {
  height: 0;
  min-height: 0;
  max-height: 0;
  aspect-ratio: auto;
  border-width: 0;
  opacity: 0;
  box-shadow: none;
  pointer-events: none;
}
#party-room-panel .party-player-empty { gap: 4px; padding: 12px; }
#party-room-panel .party-player-empty svg { width: 28px; height: 28px; }
#party-room-panel .party-player-empty strong { font-size: 12px; }
#party-room-panel .party-now-playing { min-height: 40px; padding: 5px 1px 0; }
#party-room-panel .party-now-playing strong { font-size: 11px; }
#party-room-panel .party-playback-controls { gap: 5px; }
#party-room-panel .party-playback-controls button { min-height: 29px; padding: 0 7px; font-size: 9px; }
#party-room-panel .party-playback-controls button[hidden] { display: none !important; }
#party-room-panel .party-playback-controls .party-room-mode-actions { gap: 5px; }
#party-room-panel .party-screen-toggle.active {
  border-color: #55a781;
  background: #1b543c;
  color: #caffdf;
  box-shadow: 0 0 0 2px rgba(85,167,129,.14);
}
#party-room-panel.party-screen-collapsed .party-now-playing {
  min-height: 32px;
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 0;
}
#party-room-panel.party-screen-collapsed .party-now-playing > div:first-child { display: none; }
#party-room-panel .party-mic-column {
  position: relative;
  padding: 7px;
  border-radius: 11px;
}
#party-room-panel .party-mic-column > header { min-height: 29px; margin-bottom: 6px; }
#party-room-panel .party-mic-column > header strong { font-size: 12px; }
#party-room-panel .party-camera-layout-button {
  width: 31px;
  min-width: 31px;
  height: 29px;
  min-height: 29px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #71468f;
  border-radius: 8px;
  background: #43275a;
  color: #f2d9ff;
  cursor: pointer;
}
#party-room-panel .party-camera-layout-button[hidden] { display: none !important; }
#party-room-panel .party-camera-layout-button svg { width: 15px; height: 15px; }
#party-room-panel .party-camera-layout-button.active {
  border-color: #4b9b87;
  background: #1c5146;
  color: #cafff3;
  box-shadow: 0 0 0 2px rgba(75,155,135,.14);
}
#party-room-panel .party-mic-column button.party-audio-permission {
  position: absolute;
  z-index: 4;
  top: 5px;
  right: 43px;
  width: 31px;
  min-height: 29px;
  margin: 0;
  padding: 0;
  justify-content: center;
  border-radius: 8px;
}
#party-room-panel .party-audio-permission > svg { width: 15px; }
#party-room-panel .party-audio-permission > span { display: none; }
#party-room-panel .party-mic-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  overflow: visible;
  padding: 0;
}
#party-room-panel .party-mic-grid.is-single-column {
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  overflow-x: visible;
}
#party-room-panel .party-mic-grid.is-single-column > .party-mic-slot {
  width: min(100%, 760px);
  justify-self: center;
}
#party-room-panel .party-mic-grid.is-single-column > .party-mic-slot.empty {
  min-height: 84px;
}
#party-room-panel .party-mic-slot,
#party-room-panel .party-mic-column button.party-mic-slot {
  min-height: 142px;
  border-radius: 10px;
}
#party-room-panel .party-mic-slot.empty {
  gap: 4px;
  padding: 8px;
  background: #0d1015;
}
#party-room-panel .party-mic-slot.empty > span { width: 38px; height: 38px; }
#party-room-panel .party-mic-slot.empty strong { font-size: 10px; }
#party-room-panel .party-mic-slot.empty small { color: #747f8b; font-size: 8px; }
#party-room-panel .party-mic-slot.active {
  position: relative;
  display: grid;
  grid-template-rows: auto 31px;
  align-content: start;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 1;
  background: #090b0f;
}
.party-stage-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: radial-gradient(circle at 50% 30%, rgba(132,74,169,.28), transparent 52%), #0b0d12;
}
.party-stage-media video {
  position: absolute;
  z-index: 2;
  object-position: center;
  background: #050607;
  transition: filter .2s ease, transform .2s ease, opacity .2s ease;
}
.party-stage-media .party-stage-video-backdrop {
  inset: -9%;
  z-index: 1;
  width: 118%;
  height: 118%;
  object-fit: cover;
  opacity: .82;
  filter: blur(16px) brightness(.58) saturate(1.08) !important;
  transform: scale(1.08);
}
.party-stage-media .party-stage-video-backdrop.local { transform: scaleX(-1) scale(1.08); }
.party-stage-media .party-stage-video-main {
  inset: 3%;
  width: 94%;
  height: 94%;
  object-fit: contain;
  border-radius: 9px;
  box-shadow: 0 5px 18px rgba(0,0,0,.3);
  transform: scaleX(var(--party-camera-slim-scale,1));
}
.party-stage-media .party-stage-video-main.local { transform: scaleX(var(--party-camera-local-slim-scale,-1)); }
.party-stage-media .party-stage-video-main:not([data-party-camera-filter="natural"]),
.party-camera-studio-preview video:not([data-party-camera-filter="natural"]) {
  filter: brightness(var(--party-camera-brightness,1.08)) contrast(var(--party-camera-contrast,.95)) saturate(var(--party-camera-saturation,1)) blur(var(--party-camera-beauty-blur,.14px));
}
/* Mobile/touch: keep the filtered main camera, but do not composite the same
   moving stream a second time as a large blurred backdrop. */
@media (hover: none) and (pointer: coarse) {
  .party-stage-media .party-stage-video-backdrop { display: none; }
}
.party-stage-media video[hidden] { display: none; }
.party-stage-media video:not([hidden]) + .party-stage-fallback { display: none; }
.party-stage-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
#party-room-panel .party-stage-fallback .party-stage-avatar { width: 58px; height: 58px; flex-basis: 58px; }
.party-stage-person {
  position: absolute;
  z-index: 3;
  left: 6px;
  right: 6px;
  bottom: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 4px 6px;
  border-radius: 7px;
  background: rgba(5,7,10,.72);
  backdrop-filter: blur(6px);
}
.party-stage-person > strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.party-stage-person > small { display: inline-flex; align-items: center; gap: 3px; color: #8ce7ad; }
.party-stage-person > small svg { width: 11px; height: 11px; }
.party-stage-corner-avatar {
  position: absolute;
  z-index: 4;
  top: 7px;
  left: 7px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 50%;
  background: #392046;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 4px 13px rgba(0,0,0,.4);
}
.party-stage-corner-avatar img { width: 100%; height: 100%; object-fit: cover; }
#party-room-panel .party-mic-slot.camera-on .party-stage-person { display: none; }
#party-room-panel .party-slot-controls {
  min-width: 0;
  height: 31px;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  padding: 3px 5px;
  background: #10131a;
}
#party-room-panel .party-slot-controls button {
  width: 27px;
  min-width: 27px;
  min-height: 24px;
  padding: 0;
  border-radius: 7px;
}
#party-room-panel .party-slot-controls button span { display: none; }
#party-room-panel .party-slot-controls button svg { width: 12px; height: 12px; }

/* Camera phủ toàn ô; điều khiển chỉ hiện khi rê chuột hoặc chạm vào ô. */
#party-room-panel .party-mic-slot.active {
  display: block;
  aspect-ratio: 4 / 3;
}
#party-room-panel .party-mic-slot.active .party-stage-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
#party-room-panel .party-mic-slot.active .party-stage-person {
  bottom: 6px;
  transition: bottom .18s ease;
}
#party-room-panel .party-mic-slot.active .party-slot-controls {
  position: absolute;
  z-index: 5;
  right: 7px;
  left: auto;
  bottom: 7px;
  width: auto;
  height: auto;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(8,10,14,.78);
  box-shadow: 0 5px 18px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease;
  backdrop-filter: blur(8px);
}
#party-room-panel .party-stage-exit {
  position: absolute;
  z-index: 6;
  top: 7px;
  right: 7px;
  display: grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,170,180,.48);
  border-radius: 50%;
  background: rgba(63,20,28,.82);
  color: #ffd8dd;
  box-shadow: 0 5px 18px rgba(0,0,0,.32);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, background .16s ease;
  backdrop-filter: blur(8px);
}
#party-room-panel .party-stage-exit:hover { background: rgba(140,37,53,.94); }
#party-room-panel .party-stage-exit svg { width: 15px; height: 15px; }
#party-room-panel .party-mic-slot.active:hover .party-slot-controls,
#party-room-panel .party-mic-slot.active:focus-within .party-slot-controls,
#party-room-panel .party-mic-slot.active.is-controls-visible .party-slot-controls {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#party-room-panel .party-mic-slot.active:hover .party-stage-exit,
#party-room-panel .party-mic-slot.active:focus-within .party-stage-exit,
#party-room-panel .party-mic-slot.active.is-controls-visible .party-stage-exit {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#party-room-panel .party-mic-slot.active:hover .party-stage-person,
#party-room-panel .party-mic-slot.active:focus-within .party-stage-person,
#party-room-panel .party-mic-slot.active.is-controls-visible .party-stage-person { bottom: 43px; }

/* Camera Studio: filter nhẹ kiểu video dọc và chế độ xem camera toàn màn hình. */
.party-camera-quick-actions {
  position: absolute;
  z-index: 8;
  top: 7px;
  right: 7px;
  display: flex;
  gap: 5px;
}
#party-room-panel .party-camera-quick-actions button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background: rgba(5,8,12,.74);
  color: #fff;
  box-shadow: 0 5px 18px rgba(0,0,0,.34);
  backdrop-filter: blur(6px);
}
#party-room-panel .party-camera-quick-actions button:hover,
#party-room-panel .party-camera-quick-actions button:focus-visible { border-color: #25f4ee; background: rgba(18,36,40,.9); color: #9cfff9; }
#party-room-panel .party-camera-quick-actions button[data-party-camera-studio] { border-color: rgba(254,44,85,.7); background: linear-gradient(145deg,rgba(254,44,85,.86),rgba(101,42,165,.88)); }
#party-room-panel .party-camera-quick-actions svg { width: 14px; height: 14px; }
#party-room-panel .party-mic-slot.camera-on .party-stage-exit { top: 42px; }

body.party-camera-focus-open,body.party-camera-studio-open { overflow: hidden; }
#party-room-panel .party-mic-slot.active.is-camera-focused {
  position: fixed !important;
  z-index: 225;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}
#party-room-panel .party-mic-slot.active.is-camera-focused .party-stage-media { width: 100%; height: 100%; background: #000; }
#party-room-panel .party-mic-slot.active.is-camera-focused .party-stage-media .party-stage-video-backdrop { display: none; }
#party-room-panel .party-mic-slot.active.is-camera-focused .party-stage-media .party-stage-video-main { inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
#party-room-panel .party-mic-slot.active.is-camera-focused .party-camera-quick-actions {
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
}
#party-room-panel .party-mic-slot.active.is-camera-focused .party-camera-quick-actions button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  border-width: 2px;
  background: rgba(5,8,12,.8);
}
#party-room-panel .party-mic-slot.active.is-camera-focused .party-camera-quick-actions svg { width: 19px; height: 19px; }
#party-room-panel .party-mic-slot.active.is-camera-focused .party-stage-corner-avatar {
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  width: 42px;
  height: 42px;
}
#party-room-panel .party-mic-slot.active.is-camera-focused .party-slot-controls {
  right: max(18px, env(safe-area-inset-right));
  left: auto;
  bottom: max(18px, env(safe-area-inset-bottom));
}
#party-room-panel .party-mic-slot.active.is-camera-focused .party-stage-exit { bottom: max(18px, env(safe-area-inset-bottom)); top: auto; }

.party-camera-studio[hidden] { display: none !important; }
.party-camera-studio {
  position: fixed;
  z-index: 240;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
}
.party-camera-studio-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(2,3,6,.78);
  opacity: 0;
  backdrop-filter: blur(10px);
  transition: opacity .18s ease;
}
.party-camera-studio-sheet {
  position: relative;
  width: min(560px, 100%);
  max-height: min(760px, calc(100dvh - 32px));
  overflow: hidden auto;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: linear-gradient(155deg,#191c25 0,#0a0c11 56%,#11121a 100%);
  color: #f8f8fb;
  box-shadow: 0 28px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(37,244,238,.07), 0 0 34px rgba(254,44,85,.1);
  opacity: 0;
  transform: translateY(20px) scale(.97);
  transition: opacity .18s ease, transform .18s ease;
}
.party-camera-studio.open .party-camera-studio-backdrop { opacity: 1; }
.party-camera-studio.open .party-camera-studio-sheet { opacity: 1; transform: translateY(0) scale(1); }
.party-camera-studio-sheet > header {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.party-camera-studio-sheet > header > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.party-camera-studio-sheet > header > div > span { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: linear-gradient(145deg,#fe2c55,#7b3cff 56%,#25f4ee); box-shadow: 0 0 20px rgba(254,44,85,.28); }
.party-camera-studio-sheet > header > div > span svg { width: 20px; }
.party-camera-studio-sheet > header strong,.party-camera-studio-sheet > header small { display: block; }
.party-camera-studio-sheet > header strong { font-size: 15px; }
.party-camera-studio-sheet > header small { margin-top: 2px; color: #a7acb8; font-size: 10px; }
.party-camera-studio-sheet > header > button { width: 36px; min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #3c414d; border-radius: 50%; background: #20232c; color: #e6e8ed; }
.party-camera-studio-sheet > header > button svg { width: 17px; }
.party-camera-studio-preview { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin: 12px 12px 4px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: radial-gradient(circle at 50% 35%,#252a35,#050608 72%); box-shadow: 0 15px 34px rgba(0,0,0,.35); }
.party-camera-studio-preview video { width: 100%; height: 100%; display: block; object-fit: contain; background: transparent; transition: filter .2s ease,transform .2s ease; transform: scaleX(var(--party-camera-slim-scale,1)); }
.party-camera-studio-preview video.local { transform: scaleX(var(--party-camera-local-slim-scale,-1)); }
.party-camera-studio-preview > span { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(4,6,9,.72); color: #e9eef5; font-size: 9px; font-weight: 800; backdrop-filter: blur(6px); }
.party-camera-studio-preview > span svg { width: 12px; color: #fe2c55; }
.party-camera-studio-section { padding: 14px 10px 16px; }
.party-camera-studio-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 9px; }
.party-camera-studio-label strong { font-size: 13px; }
.party-camera-studio-label small { color: #858b97; font-size: 9px; }
.party-camera-filter-strip { display: flex; gap: 7px; overflow-x: auto; padding: 3px 4px 10px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.party-camera-filter-option { width: 72px; min-width: 72px; display: grid; justify-items: center; gap: 7px; padding: 5px 2px; border: 0; background: transparent; color: #aeb4bf; cursor: pointer; scroll-snap-align: center; }
.party-camera-filter-option > span { position: relative; width: 58px; height: 58px; display: grid; place-items: center; border: 2px solid #353944; border-radius: 50%; background: linear-gradient(145deg,#373c48,#151820); box-shadow: 0 8px 18px rgba(0,0,0,.3); transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.party-camera-filter-option > span::after { content: ""; position: absolute; inset: 5px; border-radius: inherit; background: linear-gradient(145deg,rgba(255,255,255,.2),transparent 60%); }
.party-camera-filter-option svg { position: relative; z-index: 2; width: 22px; color: #fff; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
.party-camera-filter-option strong { max-width: 70px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.party-camera-filter-option [data-party-camera-filter-swatch="natural"] { background: linear-gradient(145deg,#d9dee7,#68717d 58%,#242931); }
.party-camera-filter-option [data-party-camera-filter-swatch="beauty"] { background: linear-gradient(145deg,#fff4ed,#f6b8c6 56%,#b46ee8); }
.party-camera-filter-option [data-party-camera-filter-swatch="soft"] { background: linear-gradient(145deg,#fff,#f5d5e0 55%,#a4c6ff); }
.party-camera-filter-option [data-party-camera-filter-swatch="bright"] { background: linear-gradient(145deg,#fffbd7,#fff 48%,#8edcff); }
.party-camera-filter-option [data-party-camera-filter-swatch="slim"] { background: linear-gradient(145deg,#ffdbea,#cb83dd 56%,#6544bd); }
.party-camera-filter-option.active { color: #fff; }
.party-camera-filter-option.active > span { border-color: #25f4ee; box-shadow: 0 0 0 2px #0c0e13,0 0 0 4px #fe2c55,0 9px 24px rgba(37,244,238,.25); transform: translateY(-3px) scale(1.04); }
.party-camera-beauty-controls { display: grid; gap: 11px; margin: 0 14px 14px; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: linear-gradient(145deg,rgba(255,207,222,.08),rgba(137,103,255,.07)); }
.party-camera-beauty-controls label { display: grid; gap: 8px; }
.party-camera-beauty-controls label > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.party-camera-beauty-controls strong { color: #edf1f7; font-size: 10px; }
.party-camera-beauty-controls output { min-width: 42px; color: #ffb6cf; font-size: 10px; font-weight: 850; text-align: right; }
.party-camera-beauty-controls input[type="range"] { width: 100%; height: 5px; margin: 0; accent-color: #fe4b7a; cursor: pointer; }
.party-camera-beauty-controls input[type="range"]:disabled { cursor: default; filter: grayscale(1); opacity: .35; }
.party-camera-studio-sheet > footer { display: flex; align-items: flex-start; gap: 8px; margin: 0 12px 13px; padding: 10px 11px; border: 1px solid rgba(37,244,238,.15); border-radius: 12px; background: rgba(37,244,238,.06); color: #aeb8c3; font-size: 9px; line-height: 1.45; }
.party-camera-studio-sheet > footer svg { width: 15px; flex: 0 0 auto; color: #25f4ee; }

@media (max-width: 620px) {
  .party-camera-studio { place-items: end center; padding: 0; }
  .party-camera-studio-sheet { width: 100%; max-height: min(820px, 92dvh); border-width: 1px 0 0; border-radius: 24px 24px 0 0; transform: translateY(100%); }
  .party-camera-studio.open .party-camera-studio-sheet { transform: translateY(0); }
  .party-camera-studio-preview { max-height: 34dvh; }
  .party-camera-filter-option { width: 68px; min-width: 68px; }
  .party-camera-filter-option > span { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .party-camera-studio-backdrop,.party-camera-studio-sheet,.party-camera-filter-option > span,.party-stage-media video { transition: none; }
}
#party-room-panel .party-chat {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-top: 1px solid #2d333d;
  border-left: 0;
  background: #090b0f;
}
#party-room-panel .party-room-online-line {
  min-height: 29px;
  display: flex;
  align-items: center;
  padding: 5px 9px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid #31343d;
  background: #0b0d12;
  color: #2be56b;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#party-room-panel .party-room-online-line::-webkit-scrollbar { display: none; }
#party-room-panel .party-room-online-list { min-width: max-content; display: inline-flex; align-items: center; gap: 3px; color: #2be56b; }
#party-room-panel .party-room-online-name { display: inline-flex; align-items: center; gap: 1px; padding: 0; border: 0; outline-offset: 2px; background: transparent; color: #2be56b; cursor: pointer; font: inherit; font-weight: 400; line-height: inherit; }
#party-room-panel .party-room-online-name > .gender-name-icon { margin-right: 2px; }
#party-room-panel .party-room-online-name > span:last-child { white-space: nowrap; }
#party-room-panel .party-room-online-name:hover > span:last-child,
#party-room-panel .party-room-online-name:focus-visible > span:last-child { text-decoration: underline; }
#party-room-panel .party-room-online-name.is-staff { color: #ff6686; }
#party-room-panel .party-room-online-separator { color: #8b7884; }
#party-room-panel .party-online-gender { width: 12px; display: inline-grid; flex: 0 0 12px; place-items: center; font-weight: 800; line-height: 1; }
#party-room-panel .party-online-gender-male { color: #54b8ff; }
#party-room-panel .party-online-gender-female { color: #ff78b7; }
#party-room-panel .party-online-gender-other { color: #b69cff; }
#party-room-panel.party-theme-pink .party-room-online-line { border-bottom-color: #71344f; background: #180d13; }
#party-composer-mount:empty { min-height: 0; }
#party-room-panel .party-message-form { padding: 6px; }
#party-room-panel .party-message-form textarea { min-height: 40px; max-height: 72px; font-size: 12px; }
#party-room-panel .party-clear-chat-link {
  position: absolute;
  z-index: 4;
  top: 81px;
  right: 7px;
  min-height: 18px;
  display: block;
  margin: 0;
  padding: 0 3px;
  border: 0;
  border-radius: 3px;
  background: rgba(8, 11, 14, .85);
  color: #9ca7b2;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
  text-decoration: none;
  text-shadow: 0 1px 2px #000;
}
#party-room-panel .party-clear-chat-link[hidden] { display: none !important; }
#party-room-panel .party-clear-chat-link:hover,
#party-room-panel .party-clear-chat-link:focus-visible { color: #ff8f9a; text-decoration: underline; }

/* Bua tiec: dung chung bo cuc chat mot dong tren desktop va mobile. */
#party-room-panel form.game-ludo-chat-form {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px !important;
}
#party-room-panel form.game-ludo-chat-form .composer-row {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0;
  align-items: center;
}
#party-room-panel form.game-ludo-chat-form textarea.game-ludo-chat-input {
  min-height: 38px !important;
  height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  resize: none !important;
  white-space: nowrap !important;
  word-break: normal !important;
  line-height: 22px !important;
}
#party-room-panel form.game-ludo-chat-form .chat-resize-hint,
#party-room-panel form.game-ludo-chat-form .composer-send-status {
  display: none !important;
}
#party-room-panel form.game-ludo-chat-form .composer-actions {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}
#party-room-panel form.game-ludo-chat-form .post-tools {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 67px !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
#party-room-panel form.game-ludo-chat-form .post-tools .composer-symbol-tools { order: 1; }
#party-room-panel form.game-ludo-chat-form .post-tools [data-pick-media] { order: 2; }
#party-room-panel form.game-ludo-chat-form .post-tools button {
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 !important;
}
#party-room-panel form.game-ludo-chat-form .post-tools button > span { display: none !important; }
#party-room-panel form.game-ludo-chat-form .composer-submit-group {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
}
#party-room-panel form.game-ludo-chat-form .direct-send-button {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}
#party-room-panel form.game-ludo-chat-form .direct-send-button span { display: none !important; }
#party-room-panel form.game-ludo-chat-form .composer-inline-tools:not([hidden]) {
  z-index: 122;
  top: auto !important;
  bottom: calc(100% + 4px) !important;
  display: block !important;
  margin: 0 !important;
  overflow: visible;
}
#party-room-panel form.game-ludo-chat-form .composer-media-preview:not([hidden]) {
  position: absolute !important;
  z-index: 121;
  right: 5px;
  bottom: calc(100% + 4px);
  left: 5px;
  display: grid !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 1px solid #3d4a58;
  border-radius: 9px;
  background: #0d131bef;
  box-shadow: 0 8px 24px #000a;
}
#party-room-panel .party-chat:has(form.game-ludo-chat-form.composer-inline-open) {
  position: relative;
  z-index: 120;
  overflow: visible !important;
}
#party-room-panel .party-message-list {
  min-height: 180px;
  max-height: 310px;
  overflow-y: auto;
  padding: 9px 7px 12px;
  background: linear-gradient(155deg, #0c0e13, #06070a 70%);
}
#party-room-panel .party-message { margin-bottom: 9px; }
#party-room-panel .party-message-body { max-width: 96%; }
#party-room-panel .party-message .group-message-account { margin-bottom: 2px; transform: scale(.9); transform-origin: left bottom; }
#party-room-panel .party-message.own .group-message-account { transform-origin: right bottom; }
#party-room-panel .party-message .group-message-bubble .direct-message-text { padding: 7px 8px; font-size: 13px; line-height: 1.45; }
#party-room-panel .party-message .group-message-bubble time { font-size: 9px; }
#party-room-panel .party-message-pagination {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px;
  border-top: 1px solid #272d35;
  background: #0d1015;
}
#party-room-panel .party-message-pagination[hidden] { display: none !important; }
#party-room-panel .party-message-pagination button {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #3e4855;
  border-radius: 8px;
  background: #171c22;
  color: #d8dfe7;
  cursor: pointer;
}
#party-room-panel .party-message-pagination button:disabled { opacity: .35; cursor: default; }
#party-room-panel .party-message-pagination button svg { width: 14px; height: 14px; }
#party-room-panel .party-message-pagination span { color: #8f99a6; font-size: 9px; font-weight: 800; }

.party-settings-members {
  width: calc(100% - 22px);
  min-height: 58px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 9px;
  margin: 11px 11px 2px;
  padding: 8px 10px;
  border: 1px solid #71405b;
  border-radius: 10px;
  background: linear-gradient(145deg, #321827, #1b1118);
  color: #fff0f7;
  cursor: pointer;
  text-align: left;
}
.party-settings-members > svg:first-child { width: 22px; height: 22px; justify-self: center; color: #ff8fbd; }
.party-settings-members > span { min-width: 0; display: grid; gap: 2px; }
.party-settings-members strong { font-size: 13px; line-height: 1.2; }
.party-settings-members small { overflow: hidden; color: #c99aac; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.party-settings-members > b { min-width: 27px; padding: 4px 7px; border-radius: 999px; background: #a64172; color: #fff; font-size: 12px; line-height: 1; text-align: center; }
.party-settings-members > svg:last-child { width: 17px; height: 17px; color: #a97a90; }

@media (max-width: 620px) {
  #party-room-panel .party-room-head { grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
  #party-room-panel .party-room-actions { gap: 3px; }
  #party-room-panel .party-room-actions > button { width: 31px; min-width: 31px; padding: 0; }
  #party-room-panel .party-room-mode-actions { gap: 3px; }
  #party-room-panel .party-room-mode-actions button { width: 31px; min-width: 31px; padding: 0; }
  #party-room-panel .party-room-mode-actions button span { display: none; }
  #party-room-panel .party-playback-controls { width: auto; flex: 0 0 auto; justify-content: flex-end; gap: 3px; margin-left: auto; }
  #party-room-panel .party-playback-controls > button { width: 31px; min-width: 31px; padding: 0; }
  #party-room-panel .party-playback-controls > button span { display: none; }
  #party-room-panel .party-search-launcher { margin-inline: 6px; }
  #party-room-panel .party-stage { padding: 6px; }
  #party-room-panel .party-mic-column { padding: 6px; }
  #party-room-panel .party-mic-grid { gap: 5px; }
  #party-room-panel .party-mic-slot,
  #party-room-panel .party-mic-column button.party-mic-slot { min-height: 126px; }
  .party-stage-person { left: 4px; right: 4px; bottom: 35px; }
  #party-room-panel .party-message-list { max-height: 270px; }
  #party-room-panel .party-room-online-line { min-height: 27px; padding: 4px 7px; }
  #party-room-panel .party-clear-chat-link { top: 75px; right: 5px; }
}

/* Nhiệm vụ hằng ngày: nút gọn ở trang chủ, nội dung mở trong popup. */
.daily-tasks-panel { overflow: hidden; }
.daily-tasks-title { width: 100%; min-height: 48px; border: 0; color: inherit; cursor: pointer; text-align: left; }
.daily-tasks-title > span { color: var(--green); }
.daily-tasks-title:hover { background: linear-gradient(180deg, #1b2026, #12161b); }
.daily-tasks-title:focus-visible { outline: 2px solid #2ba8ed; outline-offset: -2px; }
.daily-tasks-title > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.daily-tasks-title > div > small {
  color: #9aa5b3;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.daily-tasks-title > div > small.has-reward { color: #ffd75e; }
.daily-tasks-open-label { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid #344657; border-radius: 8px; background: #151d25; color: #77cfff; font-size: 10px; font-weight: 900; white-space: nowrap; }
.daily-tasks-open-label svg { width: 14px; height: 14px; }
.daily-tasks-modal { z-index: 2280; }
.daily-tasks-modal-card { width: min(760px, 100%); max-height: min(90dvh, 820px); display: flex; flex-direction: column; overflow: hidden; border-color: #3c4b5d; border-radius: 15px; background: #0d1116; box-shadow: 0 24px 90px rgba(0,0,0,.82); animation: dailyTasksPopupIn .2s ease-out both; }
.daily-tasks-modal-card > .panel-title { flex: 0 0 auto; min-height: 52px; background: linear-gradient(135deg, #172533, #11151b 72%); }
.daily-tasks-modal-card > .panel-title > span { color: var(--green); }
.daily-tasks-modal-card > .panel-title > button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #3e4b59; border-radius: 9px; background: #171d24; color: #b9c6d2; cursor: pointer; }
.daily-tasks-modal-card > .panel-title > button:hover { border-color: #5eaee0; color: #fff; }
.daily-tasks-modal-card > .panel-title > button svg { width: 17px; height: 17px; }
@keyframes dailyTasksPopupIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.daily-tasks-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid #303844;
  padding: 12px;
  background: linear-gradient(180deg, rgba(31,38,47,.72), rgba(16,20,26,.35));
}
.daily-tasks-body[hidden] { display: none !important; }
.daily-tasks-loading {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #98a4b3;
  font-size: 12px;
  font-weight: 800;
}
.daily-tasks-loading[hidden] { display: none !important; }
.daily-tasks-loading svg { width: 18px; height: 18px; animation: spin 1s linear infinite; }
.daily-tasks-reset {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: #8e9aaa;
  font-size: 10px;
  font-weight: 700;
}
.daily-tasks-reset svg { width: 14px; height: 14px; color: #45a9ff; }
.daily-online-task {
  border: 1px solid #344152;
  border-radius: 13px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(31,98,164,.16), rgba(34,25,66,.22));
  overflow: hidden;
}
.daily-online-task > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}
.daily-online-task > header span { display: flex; align-items: center; gap: 7px; }
.daily-online-task > header svg { width: 17px; height: 17px; color: #54b8ff; }
.daily-online-task > header strong { font-size: 13px; color: #edf5ff; }
.daily-online-task > header b { color: #77d0ff; font-size: 12px; }
.daily-online-progress {
  height: 7px;
  border-radius: 999px;
  background: #202833;
  box-shadow: inset 0 0 0 1px #35404e;
  overflow: hidden;
}
.daily-online-progress > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #188bf0, #46d6ff, #8ef6c8);
  box-shadow: 0 0 12px rgba(70,214,255,.5);
  transition: width .35s ease;
}
.daily-online-milestones {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(88px, 1fr));
  gap: 7px;
  min-width: 520px;
  margin-top: 11px;
}
.daily-online-milestones::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 9%;
  right: 9%;
  height: 2px;
  background: #384453;
}
.daily-online-milestone {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #8f9aaa;
  text-align: center;
}
.daily-online-milestone > i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 2px solid #465363;
  border-radius: 50%;
  background: #171d25;
  color: #7f8a97;
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
}
.daily-online-milestone.is-ready > i,
.daily-online-milestone.is-claimed > i { border-color: #35b9ff; color: #9ee7ff; box-shadow: 0 0 12px rgba(53,185,255,.32); }
.daily-online-milestone.is-claimed > i { border-color: #34d399; color: #82f3c2; background: #173229; }
.daily-online-milestone strong { color: #e0e7ef; font-size: 10px; line-height: 1.25; }
.daily-online-milestone small { color: #ffc94d; font-size: 9px; font-weight: 900; }
.daily-online-milestone button,
.daily-task-row > button {
  border: 1px solid #3c4a5b;
  border-radius: 8px;
  background: #202936;
  color: #c8d1dc;
  padding: 5px 9px;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}
.daily-online-milestone button:not(:disabled),
.daily-task-row > button:not(:disabled) {
  border-color: #248cd3;
  background: linear-gradient(180deg, #238fde, #176bb0);
  color: #fff;
  box-shadow: 0 4px 12px rgba(17,112,180,.24);
}
.daily-online-milestone button:disabled,
.daily-task-row > button:disabled { cursor: default; opacity: .58; }
.daily-online-milestone.is-claimed button,
.daily-task-row.is-claimed > button { border-color: #31795e; background: #18382e; color: #8de4bd; opacity: 1; }
.daily-task-list { display: grid; gap: 8px; margin-top: 10px; }
.daily-task-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid #303a47;
  border-radius: 11px;
  background: rgba(23,28,35,.86);
}
.daily-task-row > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #222c39;
  color: #55b9ff;
}
.daily-task-row > i svg { width: 18px; height: 18px; }
.daily-task-copy { min-width: 0; display: grid; gap: 3px; }
.daily-task-copy > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.daily-task-copy strong { color: #edf1f7; font-size: 12px; }
.daily-task-copy b { color: #ffc94d; font-size: 10px; white-space: nowrap; }
.daily-task-copy small { color: #8f9aaa; font-size: 9px; line-height: 1.35; }
.daily-task-mini-progress { height: 4px; border-radius: 999px; overflow: hidden; background: #29323e; }
.daily-task-mini-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #278dde, #53d3ff); }
.daily-task-row.is-claimed { border-color: #315b4c; background: rgba(21,49,40,.55); }
.daily-task-row.is-claimed > i { color: #67e5ad; background: #1e3c32; }

@media (max-width: 620px) {
  .daily-tasks-title > div { gap: 6px; }
  .daily-tasks-title > div > small { font-size: 9px; }
  .daily-tasks-open-label { padding-inline: 7px; }
  .daily-tasks-modal { align-items: end; padding: 0; }
  .daily-tasks-modal-card { width: 100%; max-height: 92dvh; border-width: 1px 0 0; border-radius: 16px 16px 0 0; }
  .daily-tasks-body { padding: 9px; }
  .daily-online-task { padding: 10px 8px; overflow-x: auto; }
  .daily-online-task > header,
  .daily-online-progress { position: sticky; left: 0; width: calc(100vw - 56px); min-width: 280px; }
  .daily-task-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 7px; padding: 8px; }
  .daily-task-row > i { width: 31px; height: 31px; }
  .daily-task-row > button { padding-inline: 7px; }
}

/* Keep each inbox action and its popover above decorative message frames.
   Several framed avatars create their own z-index layer, so lifting only the
   popover is not enough: the whole hovered/open row must be raised. */
.direct-inbox-panel .conversation-row:hover,
.direct-inbox-panel .conversation-row:focus-within {
  position: relative;
  z-index: 900 !important;
  overflow: visible !important;
}
.direct-inbox-panel .conversation-row.options-open {
  z-index: 1000 !important;
  overflow: visible !important;
}
.direct-inbox-panel .conversation-row .conversation-options-toggle {
  z-index: 1001 !important;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.direct-inbox-panel .conversation-row.options-open .conversation-options-menu {
  z-index: 1002 !important;
}

/* Pause decorative work outside the viewport without changing its visible
   appearance. The observer resumes each effect before it reaches the screen. */
.effects-paused,
.effects-paused::before,
.effects-paused::after,
.effects-paused *,
.effects-paused *::before,
.effects-paused *::after {
  animation-play-state: paused !important;
  will-change: auto !important;
}

/* Background tabs do not need to keep any decorative animation alive. */
html.effects-page-hidden *,
html.effects-page-hidden *::before,
html.effects-page-hidden *::after {
  animation-play-state: paused !important;
}
.party-inline-save-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: stretch;
}

.party-inline-save-control > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(70, 196, 255, .45);
  border-radius: 10px;
  background: rgba(30, 139, 205, .16);
  color: #8edcff;
  font-weight: 700;
}

.party-inline-save-control > button:hover {
  background: rgba(30, 139, 205, .28);
}

/* Persistent, dedicated messenger workspace. */
.message-inbox-title-actions .messenger-focus-open,
.direct-focus-button,
.group-focus-button {
  width: 31px;
  min-width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #426b94;
  border-radius: 6px;
  background: #152c42;
  color: #9ed5ff;
  cursor: pointer;
}
.message-inbox-title-actions .messenger-focus-open:hover,
.direct-focus-button:hover,
.group-focus-button:hover { border-color: #68a9df; background: #1c3b58; color: #fff; }
.message-inbox-title-actions .messenger-focus-open svg,
.direct-focus-button svg,
.group-focus-button svg { width: 15px; height: 15px; }
.direct-conversation-head { grid-template-columns: 62px minmax(0, 1fr) auto; }
.direct-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 66px; }
.group-chat-head { grid-template-columns: 50px minmax(0, 1fr) 34px; }
.group-focus-button { width: 34px; min-width: 34px; height: 34px; }

.messenger-focus-toolbar,
.messenger-focus-popover,
.messenger-focus-empty { display: none; }
.messenger-focus-toolbar[hidden],
.messenger-focus-popover[hidden],
.messenger-focus-empty[hidden] { display: none !important; }
body.messenger-focus-mode { overflow: hidden !important; overscroll-behavior: none; }
body.messenger-focus-mode [data-page="messages"] {
  position: fixed;
  z-index: 2100;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: grid !important;
  grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
  grid-template-rows: 58px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #070a0e;
  isolation: isolate;
}
body.messenger-focus-mode .messenger-focus-toolbar {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: max(7px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 7px max(10px, env(safe-area-inset-left));
  border-bottom: 1px solid #2e3b48;
  background: linear-gradient(135deg, #121923, #0b0f15 70%);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.messenger-focus-toolbar button { font-family: inherit; }
.messenger-focus-menu {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #3b4c5d;
  border-radius: 9px;
  background: #17202a;
  color: #b9c9d8;
  cursor: pointer;
}
.messenger-focus-menu:hover { border-color: #6083a4; color: #fff; }
.messenger-focus-menu svg { width: 18px; height: 18px; }
.messenger-focus-brand { min-width: 0; display: flex; align-items: center; gap: 9px; }
.messenger-focus-brand > span { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid #426fa0; border-radius: 10px; background: linear-gradient(145deg, #2467a5, #173b64); color: #e7f5ff; box-shadow: 0 0 18px rgba(55,139,222,.2); }
.messenger-focus-brand > span svg { width: 18px; height: 18px; }
.messenger-focus-brand > div { min-width: 0; display: grid; gap: 1px; }
.messenger-focus-brand strong { overflow: hidden; color: #f2f7fb; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.messenger-focus-brand small { color: #7f90a1; font-size: 9px; }
.messenger-focus-actions { display: flex; align-items: center; gap: 7px; }
.messenger-focus-actions > button {
  position: relative;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #354657;
  border-radius: 9px;
  background: #151d26;
  color: #b8c5d2;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.messenger-focus-actions > button:hover,
.messenger-focus-actions > button[aria-expanded="true"] { border-color: #4e81b2; background: #19324a; color: #fff; }
.messenger-focus-actions > button svg { width: 16px; height: 16px; }
.messenger-focus-actions .messenger-focus-notice { width: 38px; padding: 0; }
.messenger-focus-notice b { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #101720; border-radius: 999px; background: #e04559; color: #fff; font-size: 8px; }
.messenger-focus-notice b[hidden] { display: none; }
.messenger-focus-actions .messenger-focus-exit { border-color: #77404a; background: #351a21; color: #ffabb4; }
.messenger-focus-actions .messenger-focus-exit:hover { border-color: #ad5b69; background: #4a222c; }

body.messenger-focus-mode #direct-inbox-panel {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-right: 1px solid #2c3743;
  border-radius: 0;
  background: #090c10;
  box-shadow: none;
  transition: opacity .26s ease, transform .32s cubic-bezier(.22,.8,.24,1);
}
body.messenger-focus-mode #direct-inbox-panel > .panel-title { flex: 0 0 auto; min-height: 52px; }
body.messenger-focus-mode #direct-inbox-panel .messenger-focus-open { display: none; }
body.messenger-focus-mode #direct-inbox-panel .message-inbox-tabs,
body.messenger-focus-mode #direct-inbox-panel .waiting-notification-setting,
body.messenger-focus-mode #direct-inbox-panel .content-pagination { flex: 0 0 auto; }
body.messenger-focus-mode #direct-inbox-panel .conversation-list,
body.messenger-focus-mode #direct-inbox-panel .group-inbox {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.messenger-focus-mode #direct-inbox-panel .group-inbox:not([hidden]) { display: flex; flex-direction: column; }
body.messenger-focus-mode #direct-inbox-panel .group-list { overflow-y: auto; }

body.messenger-focus-mode #direct-conversation-panel,
body.messenger-focus-mode #group-chat-panel,
body.messenger-focus-mode .messenger-focus-empty {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.messenger-focus-mode #direct-conversation-panel:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
body.messenger-focus-mode #direct-conversation-panel[hidden],
body.messenger-focus-mode #group-chat-panel[hidden] { display: none !important; }
body.messenger-focus-mode #direct-conversation-panel .direct-conversation-head { flex: 0 0 auto; min-height: 72px; }
body.messenger-focus-mode #direct-conversation-panel .direct-focus-button,
body.messenger-focus-mode #group-chat-panel .group-focus-button { display: none; }
body.messenger-focus-mode #direct-conversation-panel #direct-back-inbox { display: none !important; }
body.messenger-focus-mode #direct-conversation-panel .direct-message-list {
  order: 2;
  min-height: 0;
  height: auto;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: clamp(10px, 3vw, 42px);
}
body.messenger-focus-mode #direct-conversation-panel .direct-typing-indicator { order: 2; flex: 0 0 auto; padding-inline: clamp(10px, 3vw, 42px); }
body.messenger-focus-mode #direct-conversation-panel .direct-message-list + .content-pagination { order: 3; flex: 0 0 auto; }
body.messenger-focus-mode #direct-conversation-panel .direct-compose-dock { order: 1; flex: 0 0 auto; border-top: 0; border-bottom: 1px solid #2f3945; box-shadow: 0 7px 22px rgba(0,0,0,.3); }
body.messenger-focus-mode #direct-conversation-panel .direct-message-block { max-width: min(76%, 760px); }
body.messenger-focus-mode #direct-conversation-panel .direct-message-text { font-size: 15px; line-height: 1.55; }

body.messenger-focus-mode #group-chat-panel:not([hidden]) { display: flex !important; flex-direction: column; overflow: hidden; }
body.messenger-focus-mode #group-chat-panel .group-chat-head,
body.messenger-focus-mode #group-chat-panel .group-chat-tools,
body.messenger-focus-mode #group-chat-panel .group-pinned-message { flex: 0 0 auto; }
body.messenger-focus-mode #group-chat-panel .group-compose-dock { order: 3; flex: 0 0 auto; border-top: 0; border-bottom: 1px solid #2f3945; box-shadow: 0 7px 22px rgba(0,0,0,.3); }
body.messenger-focus-mode #group-chat-panel .group-message-list { order: 4; min-height: 0; height: auto; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding-inline: clamp(10px, 3vw, 42px); }

body.messenger-focus-mode .messenger-focus-empty:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: radial-gradient(circle at 50% 40%, rgba(48,121,190,.12), transparent 32%), #080b0f;
  text-align: center;
}
.messenger-focus-symbol { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid #34597c; border-radius: 24px; background: #122337; color: #79bdf6; box-shadow: 0 0 32px rgba(54,133,202,.12); }
.messenger-focus-symbol svg { width: 34px; height: 34px; }
.messenger-focus-empty > strong { color: #e9f1f8; font-size: 18px; }
.messenger-focus-empty > p { max-width: 430px; margin: 0; color: #8090a0; font-size: 11px; line-height: 1.55; }
.messenger-focus-mobile-copy,
.messenger-focus-swipe-guide { display: none; }

body.messenger-focus-mode.messenger-sidebar-collapsed [data-page="messages"] { grid-template-columns: 0 minmax(0, 1fr); }
body.messenger-focus-mode.messenger-sidebar-collapsed #direct-inbox-panel { opacity: 0; pointer-events: none; transform: translateX(-105%); }
body.messenger-focus-mode.messenger-sidebar-dragging #direct-inbox-panel { transition: none !important; will-change: transform, opacity; }
body.messenger-focus-mode.messenger-sidebar-dragging [data-page="messages"] { user-select: none; cursor: grabbing; }
.messenger-surface-dragging { transition: none !important; will-change: transform, opacity; }
.messenger-surface-settling { transition: transform .22s cubic-bezier(.22,.8,.24,1), opacity .2s ease !important; }
.messenger-tab-enter-left { animation: messengerTabEnterLeft .22s cubic-bezier(.22,.8,.24,1); }
.messenger-tab-enter-right { animation: messengerTabEnterRight .22s cubic-bezier(.22,.8,.24,1); }
.messenger-inbox-enter { animation: messengerInboxEnter .22s cubic-bezier(.22,.8,.24,1); }

@keyframes messengerTabEnterLeft { from { opacity:.58; transform:translate3d(24px,0,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes messengerTabEnterRight { from { opacity:.58; transform:translate3d(-24px,0,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes messengerInboxEnter { from { opacity:.5; transform:translate3d(-34px,0,0); } to { opacity:1; transform:translate3d(0,0,0); } }

body.messenger-focus-mode .messenger-focus-popover:not([hidden]) {
  position: fixed;
  z-index: 2140;
  top: 64px;
  right: 10px;
  width: min(390px, calc(100vw - 20px));
  max-height: min(72vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #3a4856;
  border-radius: 12px;
  background: #0d1116;
  box-shadow: 0 18px 55px rgba(0,0,0,.72);
}
body.messenger-focus-mode #messenger-online-popover:not([hidden]) { right: 122px; border-color: #397a61; }
body.messenger-focus-mode #messenger-notification-popover:not([hidden]) { right: 68px; border-color: #68537f; }
body.messenger-focus-mode[data-messenger-utility-panel="notifications"] #messenger-online-popover,
body.messenger-focus-mode[data-messenger-utility-panel="online"] #messenger-notification-popover { display: none !important; }
body.messenger-focus-mode #messenger-online-popover > header { background: #10201b; }
body.messenger-focus-mode #messenger-notification-popover > header { background: #1a1521; }
.messenger-focus-popover > header { min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid #303a45; background: #121820; }
.messenger-focus-popover > header > div { min-width: 0; display: grid; gap: 2px; }
.messenger-focus-popover > header strong { color: #edf3f8; font-size: 12px; }
.messenger-focus-popover > header span { overflow: hidden; color: #7f8d9b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.messenger-focus-popover > header > button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #3b4856; border-radius: 8px; background: #19212a; color: #aab8c5; cursor: pointer; }
.messenger-focus-popover > header > button:hover { border-color: #5e84a9; color: #fff; }
.messenger-focus-popover > header > button svg { width: 15px; height: 15px; }
.messenger-focus-people,
.messenger-focus-notifications { min-height: 150px; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.messenger-online-person { width: 100%; min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr) 30px; align-items: center; gap: 9px; padding: 8px; border: 0; border-bottom: 1px solid #29333e; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.messenger-online-person:last-child { border-bottom: 0; }
.messenger-online-person:hover { border-radius: 8px; background: #151d25; }
.messenger-online-avatar { position: relative; }
.messenger-online-avatar .avatar { width: 44px; height: 44px; }
.messenger-online-avatar > i { position: absolute; right: 0; bottom: 1px; width: 10px; height: 10px; border: 2px solid #0d1116; border-radius: 50%; background: #43d574; box-shadow: 0 0 7px rgba(67,213,116,.58); }
.messenger-online-person > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.messenger-online-person strong { overflow: hidden; color: #e8eef4; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.messenger-online-meta { overflow: hidden; color: #9ba8b5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.messenger-online-person small { overflow: hidden; color: #6f7f8e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.messenger-online-person > svg { width: 17px; height: 17px; color: #70b8f0; }
.messenger-online-pagination { flex: 0 0 auto; padding: 7px; }
.messenger-notification-item { width: 100%; min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 9px; padding: 9px; border: 0; border-bottom: 1px solid #29333e; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.messenger-notification-item:last-child { border-bottom: 0; }
.messenger-notification-item.unread { border-radius: 8px; background: #122239; }
.messenger-notification-item:hover:not(:disabled) { border-radius: 8px; background: #17283b; }
.messenger-notification-item:disabled { cursor: default; }
.messenger-notification-item > .avatar,
.messenger-notification-item > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #1d2a37; color: #85c5fa; }
.messenger-notification-item > span svg { width: 18px; height: 18px; }
.messenger-notification-item > div { min-width: 0; }
.messenger-notification-item strong { display: block; overflow: hidden; color: #e9eff5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.messenger-notification-item p { margin: 3px 0; color: #9aa7b3; font-size: 9px; line-height: 1.4; }
.messenger-notification-item small { display: block; margin: 2px 0; color: #7f8d9b; font-size: 8px; line-height: 1.4; }
.messenger-notification-item time { display: block; color: #667686; font-size: 8px; }
.messenger-notification-item em { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; color: #d7a7f4; font-size: 8px; font-style: normal; font-weight: 800; }
.messenger-notification-item em svg { width: 11px; height: 11px; }
.messenger-focus-empty-list { min-height: 145px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; color: #778695; font-size: 10px; text-align: center; }
.messenger-focus-empty-list svg { width: 26px; height: 26px; color: #57718a; }

@media (max-width: 820px) {
  body.messenger-focus-mode [data-page="messages"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 58px minmax(0, 1fr); }
  body.messenger-focus-mode.messenger-sidebar-collapsed [data-page="messages"] { grid-template-columns: minmax(0, 1fr); }
  body.messenger-focus-mode #direct-inbox-panel {
    position: absolute;
    z-index: 80;
    grid-column: 1;
    grid-row: 1 / -1;
    top: 58px;
    bottom: 0;
    left: 0;
    width: min(88vw, 370px);
    height: auto;
    border-right: 1px solid #3a4856;
    box-shadow: 12px 0 35px rgba(0,0,0,.62);
  }
  body.messenger-focus-mode #direct-conversation-panel,
  body.messenger-focus-mode #group-chat-panel,
  body.messenger-focus-mode .messenger-focus-empty { grid-column: 1; }
  body.messenger-focus-mode [data-page="messages"],
  body.messenger-focus-mode #direct-inbox-panel,
  body.messenger-focus-mode #direct-conversation-panel,
  body.messenger-focus-mode #group-chat-panel { touch-action: pan-y; overscroll-behavior-x: none; }
  body:not(.messenger-focus-mode) [data-page="messages"],
  body:not(.messenger-focus-mode) #direct-inbox-panel,
  body:not(.messenger-focus-mode) #direct-conversation-panel,
  body:not(.messenger-focus-mode) #group-chat-panel { touch-action: pan-y; overscroll-behavior-x: none; }
  body.messenger-focus-mode:not(.messenger-sidebar-collapsed) #direct-inbox-panel { opacity: 1; transform: translateX(0); }
  body.messenger-focus-mode.messenger-sidebar-collapsed #direct-inbox-panel { opacity: 0; transform: translateX(-105%); }
  .messenger-focus-brand small { display: none; }
  .messenger-focus-actions > button span { display: none; }
  .messenger-focus-actions > button { width: 38px; min-width: 38px; padding: 0; }
  .messenger-focus-actions [data-messenger-online-toggle] { width: auto; min-width: 76px; padding: 0 8px; }
  .messenger-focus-actions [data-messenger-online-toggle] span { display: inline; }
  body.messenger-focus-mode #direct-conversation-panel .direct-message-block { max-width: 88%; }
  body.messenger-focus-mode #direct-conversation-panel .direct-message-list,
  body.messenger-focus-mode #group-chat-panel .group-message-list { padding-inline: 9px; }
  body.messenger-focus-mode .messenger-focus-empty:not([hidden]) { gap: 10px; padding: 22px 18px; }
  .messenger-focus-desktop-copy,
  .messenger-focus-symbol { display: none !important; }
  .messenger-focus-mobile-copy { display: block; }
  .messenger-focus-empty > strong.messenger-focus-mobile-copy { color: #edf7ff; font-size: 18px; }
  .messenger-focus-empty > p.messenger-focus-mobile-copy { max-width: 330px; color: #9aabba; font-size: 11px; line-height: 1.6; }
  .messenger-focus-empty > small.messenger-focus-mobile-copy { max-width: 310px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; padding: 7px 10px; border: 1px solid #31455a; border-radius: 999px; background: #101923; color: #8fa3b5; font-size: 9px; line-height: 1.35; }
  .messenger-focus-empty > small.messenger-focus-mobile-copy svg { flex: 0 0 13px; width: 13px; height: 13px; color: #68baf6; }
  .messenger-focus-swipe-guide { position: relative; width: min(280px, 78vw); height: 104px; display: block; overflow: hidden; margin-bottom: 2px; border: 1px solid #31506c; border-radius: 18px; background: radial-gradient(circle at 74% 45%, rgba(65,157,232,.17), transparent 35%), #0b121a; box-shadow: inset 0 0 0 1px rgba(126,193,244,.04), 0 18px 45px rgba(0,0,0,.28); }
  .messenger-focus-swipe-guide::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #55b5f5; box-shadow: 0 0 14px rgba(85,181,245,.78); animation: messengerSwipeEdge 2.4s ease-in-out infinite; }
  .messenger-focus-drawer-preview { position: absolute; z-index: 1; top: 9px; bottom: 9px; left: 0; width: 92px; display: grid; place-items: center; border: 1px solid #416786; border-left: 0; border-radius: 0 13px 13px 0; background: linear-gradient(145deg,#19334a,#101c28); color: #8fd2ff; box-shadow: 9px 0 24px rgba(0,0,0,.35); transform: translateX(-82px); animation: messengerDrawerHint 2.4s cubic-bezier(.2,.8,.25,1) infinite; }
  .messenger-focus-drawer-preview svg { width: 25px; height: 25px; }
  .messenger-focus-swipe-hand { position: absolute; z-index: 3; left: 48px; top: 38px; width: 27px; height: 27px; color: #f4fbff; filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); animation: messengerSwipeHand 2.4s cubic-bezier(.2,.8,.25,1) infinite; }
  .messenger-focus-swipe-direction { position: absolute; z-index: 2; right: 52px; top: 38px; width: 40px; height: 28px; display: grid; place-items: center; color: #66bcf6; animation: messengerSwipeArrow 2.4s ease-in-out infinite; }
  .messenger-focus-swipe-direction svg { width: 30px; height: 30px; }
}

@keyframes messengerSwipeHand {
  0%,12% { opacity: 0; transform: translateX(0) scale(.92); }
  20% { opacity: 1; transform: translateX(0) scale(1); }
  68% { opacity: 1; transform: translateX(122px) scale(1); }
  82%,100% { opacity: 0; transform: translateX(122px) scale(.96); }
}
@keyframes messengerDrawerHint {
  0%,18% { opacity: .45; transform: translateX(-82px); }
  68%,82% { opacity: 1; transform: translateX(0); }
  100% { opacity: .45; transform: translateX(-82px); }
}
@keyframes messengerSwipeArrow {
  0%,18%,82%,100% { opacity: .2; transform: translateX(-7px); }
  42%,66% { opacity: 1; transform: translateX(7px); }
}
@keyframes messengerSwipeEdge {
  0%,100% { opacity: .35; }
  35%,72% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .messenger-focus-swipe-guide::before,
  .messenger-focus-drawer-preview,
  .messenger-focus-swipe-hand,
  .messenger-focus-swipe-direction { animation: none; }
  .messenger-focus-drawer-preview { opacity: 1; transform: translateX(-28px); }
  .messenger-focus-swipe-hand { opacity: 1; transform: translateX(74px); }
  .messenger-focus-swipe-direction { opacity: .8; transform: none; }
}

@media (max-width: 480px) {
  body.messenger-focus-mode .messenger-focus-toolbar { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 6px; padding-inline: 7px; }
  .messenger-focus-brand > span { display: none; }
  .messenger-focus-brand strong { font-size: 11px; }
  .messenger-focus-actions { gap: 4px; }
  .messenger-focus-actions > button { width: 34px; min-width: 34px; min-height: 34px; }
  .messenger-focus-actions [data-messenger-online-toggle] { width: auto; min-width: 68px; padding: 0 6px; font-size: 8px; }
  .messenger-focus-actions [data-messenger-online-toggle] span { display: inline; }
  body.messenger-focus-mode #messenger-online-popover:not([hidden]),
  body.messenger-focus-mode #messenger-notification-popover:not([hidden]) { top: 61px; right: 6px; width: calc(100vw - 12px); max-height: calc(100dvh - 68px); }
  body.messenger-focus-mode #direct-conversation-panel .direct-conversation-head { min-height: 66px; grid-template-columns: 48px minmax(0, 1fr) auto; }
  body.messenger-focus-mode #direct-conversation-panel .direct-conversation-head .direct-user-avatar { width: 44px; height: 44px; }
  body.messenger-focus-mode #direct-conversation-panel .direct-message-text { font-size: 14px; }
}

/* Account switching is an identity picker, so oversized collectible avatar
   artwork must not escape the compact row. Keep the user's image and frame
   colours, but collapse decorative layers into a stable circular thumbnail. */
.account-switch-avatar {
  position: relative;
  flex: 0 0 42px;
  aspect-ratio: 1;
  overflow: hidden !important;
  isolation: isolate;
  contain: paint;
  border-radius: 50% !important;
}
.account-switch-avatar > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.account-switch-avatar.has-avatar-frame {
  border-color: var(--avatar-frame, #586978) !important;
  filter: none !important;
  animation: none !important;
  box-shadow:
    inset 0 0 0 2px #090b0e,
    0 0 0 1px var(--avatar-frame-accent, #586978),
    0 0 7px var(--avatar-frame-glow, transparent) !important;
}
.account-switch-avatar.has-avatar-frame > :not(img) {
  display: none !important;
}
@media (max-width: 520px) {
  .account-switch-avatar { flex-basis: 38px; }
}

/* Personal wall composer: full-width input, larger touch targets and zoomable previews. */
#wall-composer-mount [data-composer="wall"] { padding: 14px; }
#wall-composer-mount [data-composer="wall"] .composer-row { display: block; }
#wall-composer-mount [data-composer="wall"] .composer-row textarea {
  width: 100%;
  min-height: 108px;
  padding: 12px 13px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.5;
}
#wall-composer-mount [data-composer="wall"] .composer-actions {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 11px;
  padding-left: 0;
}
#wall-composer-mount [data-composer="wall"] .post-tools { gap: 7px; }
#wall-composer-mount [data-composer="wall"] .post-tools button {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 8px;
}
#wall-composer-mount [data-composer="wall"] .post-tools button svg {
  width: 21px;
  height: 21px;
}
#wall-composer-mount [data-composer="wall"] .composer-submit-group {
  min-height: 44px;
  margin-left: auto;
  gap: 8px;
}
#wall-composer-mount [data-composer="wall"] .composer-visibility {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 8px;
}
#wall-composer-mount [data-composer="wall"] .composer-visibility-icon svg {
  width: 20px;
  height: 20px;
}
#wall-composer-mount [data-composer="wall"] .submit-post {
  min-width: 132px;
  height: 44px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
}
#wall-composer-mount [data-composer="wall"] .composer-media-preview,
#wall-composer-mount [data-composer="wall"] .composer-style-panel {
  margin-left: 0;
}
#wall-composer-mount [data-composer="wall"] .composer-media-preview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}
#wall-composer-mount [data-composer="wall"] .composer-preview-item {
  height: 118px;
  border-radius: 8px;
}
#wall-composer-mount [data-composer="wall"] .composer-preview-item > button {
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-width: 2px;
}
#wall-composer-mount [data-composer="wall"] .composer-preview-item > button svg {
  width: 16px;
  height: 16px;
}
.composer-preview-open {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  cursor: zoom-in;
}
.composer-preview-open > img,
.composer-preview-open > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .18s ease, filter .18s ease;
}
.composer-preview-open > span {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 50%;
  background: rgba(0,0,0,.58);
  color: #fff;
  opacity: .88;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.composer-preview-open > span svg { width: 19px; height: 19px; }
.composer-preview-open:hover > img,
.composer-preview-open:hover > video,
.composer-preview-open:focus-visible > img,
.composer-preview-open:focus-visible > video { filter: brightness(.82); transform: scale(1.025); }
.composer-preview-open:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

@media (max-width: 520px) {
  #wall-composer-mount [data-composer="wall"] { padding: 11px; }
  #wall-composer-mount [data-composer="wall"] .composer-actions { align-items: stretch; }
  #wall-composer-mount [data-composer="wall"] .post-tools,
  #wall-composer-mount [data-composer="wall"] .composer-submit-group { width: 100%; }
  #wall-composer-mount [data-composer="wall"] .post-tools button { flex: 1 1 44px !important; }
  #wall-composer-mount [data-composer="wall"] .composer-submit-group { margin-left: 0; }
  #wall-composer-mount [data-composer="wall"] .submit-post { flex: 1; }
  #wall-composer-mount [data-composer="wall"] .composer-media-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Messenger performance: cached inboxes can reveal many decorated users at
   once. Keep their visual style, but do not continuously animate every avatar,
   nickname and badge. Desktop users can preview one row by hovering it. */
:where(#direct-inbox-panel, #direct-conversation-panel, #quick-pm-inbox, #quick-pm-window)
  :where(.avatar.has-avatar-frame, .avatar.has-avatar-frame *, .user-nick, .user-nick *, .name-icon, .name-icon *, .user-badge-before, .user-badge-before *, .user-badge-after, .user-badge-after *, [data-message-frame]) {
  animation-play-state: paused !important;
  will-change: auto !important;
}
:where(#direct-inbox-panel, #direct-conversation-panel, #quick-pm-inbox, #quick-pm-window)
  :where(.avatar.has-avatar-frame, .avatar.has-avatar-frame *, .user-nick, .user-nick *, .name-icon, .name-icon *, .user-badge-before, .user-badge-before *, .user-badge-after, .user-badge-after *, [data-message-frame])::before,
:where(#direct-inbox-panel, #direct-conversation-panel, #quick-pm-inbox, #quick-pm-window)
  :where(.avatar.has-avatar-frame, .avatar.has-avatar-frame *, .user-nick, .user-nick *, .name-icon, .name-icon *, .user-badge-before, .user-badge-before *, .user-badge-after, .user-badge-after *, [data-message-frame])::after {
  animation-play-state: paused !important;
  will-change: auto !important;
}
/* Màu Xanh Nháy is an animated exclusive nickname. Keep its gradient
   transition alive inside Messenger, where generic cosmetic animations are
   otherwise paused for performance. */
:where(#direct-inbox-panel, #direct-conversation-panel, #quick-pm-inbox, #quick-pm-window)
  .user-nick.nick-effect-keyboard-blue > .user-nick-text {
  animation-play-state: running !important;
}
/* Mobile browsers can report reduced motion or briefly mark SPA content as
   offscreen while switching views. Keep this tiny text-only effect alive once
   the page is visible; the background-tab pause above still takes precedence. */
@media (max-width: 760px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  html:not(.effects-page-hidden) .user-nick.nick-effect-keyboard-blue > .user-nick-text {
    animation: nickname-keyboard-blue 2s steps(1, end) infinite !important;
    animation-delay: var(--nick-style-animation-delay, 0s) !important;
    animation-play-state: running !important;
  }
}
@media (hover: hover) {
  :where(.conversation-row:hover, .direct-conversation-head:hover, .direct-message:hover, .quick-pm-inbox-item:hover, .quick-pm-message:hover)
    :where(.avatar.has-avatar-frame, .avatar.has-avatar-frame *, .user-nick, .user-nick *, .name-icon, .name-icon *, .user-badge-before, .user-badge-before *, .user-badge-after, .user-badge-after *, [data-message-frame]),
  :where(.conversation-row:hover, .direct-conversation-head:hover, .direct-message:hover, .quick-pm-inbox-item:hover, .quick-pm-message:hover)
    :where(.avatar.has-avatar-frame, .avatar.has-avatar-frame *, .user-nick, .user-nick *, .name-icon, .name-icon *, .user-badge-before, .user-badge-before *, .user-badge-after, .user-badge-after *, [data-message-frame])::before,
  :where(.conversation-row:hover, .direct-conversation-head:hover, .direct-message:hover, .quick-pm-inbox-item:hover, .quick-pm-message:hover)
    :where(.avatar.has-avatar-frame, .avatar.has-avatar-frame *, .user-nick, .user-nick *, .name-icon, .name-icon *, .user-badge-before, .user-badge-before *, .user-badge-after, .user-badge-after *, [data-message-frame])::after {
    animation-play-state: running !important;
  }
}

/* A new message uses one short entrance animation. It must not inherit the
   paused state used above for continuous decorative frame animations. */
:where(#direct-inbox-panel, #direct-conversation-panel, #quick-pm-inbox, #quick-pm-window) .live-item-enter {
  animation-play-state: running !important;
}

/* Admin member clone check: loaded only after an Admin requests a scan. */
.admin-user-clone-button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid #705a2d !important;
  border-radius: 8px !important;
  background: #302711 !important;
  color: #ffd77e !important;
  font-size: 9px !important;
  font-weight: 800;
  cursor: pointer;
}
.admin-user-clone-button svg { width: 13px; }
.admin-clone-check-panel { display: grid; gap: 14px; }
.admin-clone-source {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #5b4825;
  border-radius: 14px;
  background: linear-gradient(145deg, #211b0f, #111923);
}
.admin-clone-source > .avatar { width: 50px; height: 50px; }
.admin-clone-source > div { min-width: 0; }
.admin-clone-source small,
.admin-clone-source strong,
.admin-clone-source span { display: block; }
.admin-clone-source small { color: #d7a94b; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.admin-clone-source strong { margin-top: 3px; color: #fff4d2; font-size: 16px !important; }
.admin-clone-source span { margin-top: 2px; color: #a9b7c8; }
.admin-clone-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #694d2b;
  border-radius: 12px;
  background: #241b10;
  color: #f1c878;
}
.admin-clone-warning > svg { flex: 0 0 auto; width: 19px; margin-top: 2px; }
.admin-clone-warning strong,
.admin-clone-warning span { display: block; }
.admin-clone-warning span { margin-top: 3px; color: #c7ad7c; }
.admin-clone-ips,
.admin-clone-results { overflow: hidden; border: 1px solid #304158; border-radius: 14px; background: #0b121a; }
.admin-clone-ips > header,
.admin-clone-results > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #29394c;
  background: #111d29;
}
.admin-clone-ips > header small,
.admin-clone-results > header small { display: block; margin-top: 2px; color: #8497ad; }
.admin-clone-results > header em { color: #ffd275; font-style: normal; font-weight: 900; }
.admin-clone-ips > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.admin-clone-ips article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #2c3b4f;
  border-radius: 11px;
  background: #101924;
}
.admin-clone-ips article > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #4c3816; color: #ffd477; font-weight: 900; }
.admin-clone-ips article strong,
.admin-clone-ips article small { display: block; overflow-wrap: anywhere; }
.admin-clone-ips article strong { color: #edf5ff; }
.admin-clone-ips article small { margin-top: 3px; color: #8496aa; }
.admin-clone-results > div { display: grid; gap: 8px; padding: 12px; }
.admin-clone-match { overflow: hidden; border: 1px solid #2c3c50; border-radius: 12px; background: #0f1823; }
.admin-clone-match > button {
  display: grid;
  width: 100%;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #273648;
  background: #14202d;
  color: #eaf4ff;
  text-align: left;
  cursor: pointer;
}
.admin-clone-match > button > .avatar { width: 36px; height: 36px; }
.admin-clone-match > button > span strong,
.admin-clone-match > button > span small { display: block; }
.admin-clone-match > button > span small { margin-top: 2px; color: #8ea2b7; }
.admin-clone-match > button > svg { width: 16px; color: #7e91a5; }
.admin-clone-match > div { display: flex; flex-wrap: wrap; gap: 7px; padding: 9px 11px; }
.admin-clone-match > div > span {
  display: grid;
  grid-template-columns: 16px auto;
  column-gap: 6px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid #4a3d22;
  border-radius: 9px;
  background: #211b11;
  color: #f5cd73;
}
.admin-clone-match > div > span > svg { grid-row: 1 / 3; width: 15px; }
.admin-clone-match > div > span small { color: #aa9873; }
.admin-clone-truncated { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0 12px 12px; color: #e0b967; }
.admin-clone-truncated svg { width: 16px; }
.admin-clone-check-panel > footer { display: flex; justify-content: flex-end; gap: 8px; }
.admin-clone-check-panel > footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #3a4e66;
  border-radius: 9px;
  background: #152235;
  color: #c2dcf4;
  cursor: pointer;
}
.admin-clone-check-panel > footer button:last-child { border-color: #705a2d; background: #302711; color: #ffd77e; }
.admin-clone-check-panel > footer svg { width: 15px; }

@media (max-width: 620px) {
  .admin-user-card-actions { flex-wrap: wrap; justify-content: flex-end; }
  .admin-clone-ips > div { grid-template-columns: 1fr; }
  .admin-clone-check-panel > footer { flex-direction: column; }
}

/* Bữa tiệc 4.45: chữ lớn, rõ hơn ở sảnh, trong phòng và các bảng thao tác. */
#party-list-panel > .panel-title > span { font-size: 16px; }
#party-list-panel .party-room-copy strong { font-size: 17px; line-height: 1.3; }
#party-list-panel .party-room-copy span { font-size: 14px; line-height: 1.35; }
#party-list-panel .party-room-copy small { font-size: 12px; line-height: 1.35; }
#party-list-panel .party-room-enter { min-height: 38px; font-size: 13px; }
#party-list-panel .party-public-rooms-empty { font-size: 13px; line-height: 1.5; }

#party-room-panel .party-room-heading strong { font-size: 17px; line-height: 1.3; }
#party-room-panel .party-room-transition,
#party-room-panel .party-search-launcher input { font-size: 13px; }
#party-room-panel .party-room-actions > button,
#party-room-panel .party-room-mode-actions button,
#party-room-panel .party-playback-controls button { font-size: 12px; }
#party-room-panel .party-player-empty strong { font-size: 15px; }
#party-room-panel .party-now-playing small,
#party-room-panel .party-mic-column > header small,
#party-room-panel .party-chat > header small { font-size: 11px; }
#party-room-panel .party-now-playing strong { font-size: 14px; line-height: 1.35; }
#party-room-panel .party-mic-column > header strong { font-size: 15px; }
#party-room-panel .party-mic-slot.empty strong,
#party-room-panel .party-mic-slot > strong { font-size: 14px; line-height: 1.3; }
#party-room-panel .party-mic-slot.empty small,
#party-room-panel .party-mic-slot > small { font-size: 11px; line-height: 1.35; }
#party-room-panel .party-stage-person > strong { font-size: 12px; }
#party-room-panel .party-stage-person > small { font-size: 11px; }
#party-room-panel .party-audio-permission strong { font-size: 13px; }
#party-room-panel .party-audio-permission small { font-size: 11px; }
#party-room-panel .party-message .group-message-bubble .direct-message-text { font-size: 16px; line-height: 1.55; }
#party-room-panel .party-message .group-message-bubble time,
#party-room-panel .party-message-pagination span { font-size: 11px; }
#party-room-panel form.game-ludo-chat-form textarea.game-ludo-chat-input { font-size: 15px; }

#party-room-panel .party-song-search > label,
#party-room-panel .party-voice-guide strong,
#party-room-panel .party-share-choices strong,
#party-room-panel .party-share-online > header strong,
#party-room-panel .party-theme-shop > header strong,
#party-room-panel .party-form-body label,
#party-room-panel .party-member-tabs button,
#party-room-panel .party-playlist-tabs button { font-size: 13px; }
#party-room-panel .party-song-results strong,
#party-room-panel .party-share-online-person > div > strong,
#party-room-panel .party-member-row > button strong,
#party-room-panel .party-media-row > div > strong,
#party-room-panel .party-theme-card > span:nth-child(2) strong { font-size: 13px; }
#party-room-panel .party-song-results span,
#party-room-panel .party-share-choices small,
#party-room-panel .party-share-online > header span,
#party-room-panel .party-share-online-person > div > span,
#party-room-panel .party-member-row > button span,
#party-room-panel .party-media-row > div > span,
#party-room-panel .party-theme-card > span:nth-child(2) small,
#party-room-panel .party-form-body small { font-size: 11px; }
#party-room-panel .party-song-search input { font-size: 14px; }
#party-room-panel .party-song-search button,
#party-room-panel .party-song-actions button,
#party-room-panel .party-share-online-person > button,
#party-room-panel .party-member-row > button.danger,
#party-room-panel .party-member-row > button.party-unblock,
#party-room-panel .party-media-actions button { font-size: 11px; }

@media (max-width: 620px) {
  #party-list-panel > .panel-title > span { font-size: 15px; }
  #party-list-panel .party-room-copy strong { font-size: 16px; }
  #party-list-panel .party-room-copy span { font-size: 13px; }
  #party-list-panel .party-room-copy small { font-size: 11px; }
  #party-list-panel .party-room-enter { font-size: 12px; }
  #party-room-panel .party-room-heading strong { font-size: 16px; }
  #party-room-panel .party-message .group-message-bubble .direct-message-text { font-size: 15px; }
}

/* Chuyển toàn bộ EXP giữa các linh thú. */
.profile-pet-owned-actions{gap:5px;flex-wrap:wrap}
.profile-pet-owned-actions .pet-exp-transfer-open{border-color:#8a6a39;background:linear-gradient(145deg,#3d2b13,#241b10);color:#ffd980}
.profile-pet-transfer-form{grid-column:1/-1;display:grid;gap:8px;margin-top:8px;padding:9px;border:1px solid #7c6036;border-radius:9px;background:linear-gradient(145deg,#21190e,#11141b);box-shadow:inset 0 0 0 1px #ffd36b12}
.profile-pet-transfer-form>div{display:flex;align-items:flex-start;gap:7px;color:#f7d479}
.profile-pet-transfer-form>div>svg{flex:0 0 auto;width:17px;margin-top:1px}
.profile-pet-transfer-form>div>span{min-width:0;display:grid;gap:2px}
.profile-pet-transfer-form>div strong{font-size:12px}
.profile-pet-transfer-form>div small{color:#b8a47a;font-size:9px;line-height:1.4}
.profile-pet-transfer-form label{display:grid;gap:4px;color:#c9b991;font-size:9px;font-weight:800}
.profile-pet-transfer-form select{width:100%;min-width:0;height:34px;padding:0 8px;border:1px solid #5b503b;border-radius:7px;outline:0;background:#080b10;color:#eef3fa;font-size:10px}
.profile-pet-transfer-form select:focus{border-color:#d2a851;box-shadow:0 0 0 2px #d2a85124}
.profile-pet-transfer-form footer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px}
.profile-pet-transfer-form footer button{min-height:33px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:5px 8px;border:1px solid #52627a;border-radius:7px;background:#182131;color:#dce6f5;cursor:pointer;font-size:9px;font-weight:800}
.profile-pet-transfer-form footer button.primary-button{border-color:#9d7437;background:#684718;color:#fff0ba}
.profile-pet-transfer-form footer svg{width:13px}
@media(max-width:680px){.profile-pet-transfer-form>div strong{font-size:11px}.profile-pet-transfer-form select{font-size:10px}}

/* Kho nhạc Bữa tiệc: tìm kiếm, nghe thử, yêu thích và đề xuất bài. */
.party-search-modal-card{width:min(760px,calc(100vw - 22px));height:min(840px,calc(100dvh - 22px));max-height:min(840px,calc(100dvh - 22px));overflow:hidden;display:flex;flex-direction:column}
.party-search-modal-card>.panel-title{flex:0 0 auto}
.party-music-summary{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid #302c38;background:linear-gradient(90deg,#181320,#11151b);color:#aeb6c2;font-size:12px}
.party-music-summary span{display:inline-flex;align-items:center;gap:5px}.party-music-summary svg{width:15px;height:15px;color:#d5a5ef}.party-music-summary strong{color:#ffe08a}
.party-search-modal-card .party-song-search{flex:0 0 auto;margin:10px 12px 0;padding:0;border:0;background:transparent}
.party-search-modal-card .party-song-search input{height:44px;padding:0 13px;font-size:14px}
.party-search-modal-card .party-song-search button{min-height:44px;padding:0 15px;font-size:12px;white-space:nowrap}
.party-music-presets{flex:0 0 auto;display:flex;gap:6px;padding:8px 12px;overflow-x:auto;scrollbar-width:thin}
.party-music-presets button,.party-music-suggestions button{flex:0 0 auto;min-height:29px;padding:4px 10px;border:1px solid #4e405d;border-radius:999px;background:#1d1725;color:#dcbbed;cursor:pointer;font-size:11px;font-weight:800}
.party-music-presets button:hover,.party-music-suggestions button:hover{border-color:#9567b1;background:#392447;color:#fff}
.party-music-preview{flex:0 0 auto;display:grid;grid-template-columns:132px minmax(0,1fr) 34px;align-items:center;gap:10px;margin:0 12px 9px;padding:8px;border:1px solid #6f4a87;border-radius:11px;background:linear-gradient(135deg,#291b34,#11151b);box-shadow:0 8px 24px #0005}
.party-music-preview[hidden]{display:none!important}.party-music-preview-player{width:132px;aspect-ratio:16/9;overflow:hidden;border-radius:7px;background:#050608}.party-music-preview iframe{width:100%;height:100%;border:0}
.party-music-preview>div:nth-child(2){min-width:0;display:grid;gap:3px}.party-music-preview small{color:#bd8bd5;font-size:10px;font-weight:900;text-transform:uppercase}.party-music-preview strong{overflow:hidden;color:#fff;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.party-music-preview>button{width:32px;height:32px;display:grid;place-items:center;border:1px solid #57445f;border-radius:8px;background:#18131e;color:#dbcde3;cursor:pointer}.party-music-preview>button svg{width:16px}
.party-music-tabs{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:0 12px 9px;border-bottom:1px solid #302c38}
.party-music-tabs button{min-width:0;min-height:37px;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px;border:1px solid #343d48;border-radius:8px;background:#11151a;color:#9ca7b4;cursor:pointer;font-size:11px;font-weight:850}.party-music-tabs button svg{width:14px;height:14px}.party-music-tabs button.active{border-color:#8557a3;background:#3c254c;color:#f3dfff}.party-music-tabs b{min-width:18px;padding:1px 5px;border-radius:9px;background:#ffffff19;color:#ffe493;font-size:9px}
.party-music-library,.party-song-results{min-height:170px;max-height:none;flex:1 1 auto;overflow-y:auto;padding:10px 12px 14px;margin:0;scrollbar-gutter:stable;scrollbar-width:thin}
.party-music-library[hidden],.party-song-results[hidden]{display:none!important}.party-music-grid{display:grid;gap:7px}
.party-music-suggestions{display:flex;align-items:center;gap:6px;margin-bottom:9px;padding-bottom:9px;overflow-x:auto;border-bottom:1px dashed #3b3444}.party-music-suggestions>span{flex:0 0 auto;color:#aab2bd;font-size:10px;font-weight:800}
.party-song-results>header{position:sticky;z-index:2;top:-10px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-10px -12px 9px;padding:9px 12px;border-bottom:1px solid #373140;background:#0c0f14ee;backdrop-filter:blur(9px)}.party-song-results>header>div{display:grid;gap:2px}.party-song-results>header strong{color:#f0e9f4;font-size:13px}.party-song-results>header span{color:#8e99a7;font-size:10px}.party-song-results>header button{display:inline-flex;align-items:center;gap:5px;min-height:31px;padding:0 9px;border:1px solid #444d59;border-radius:7px;background:#171c23;color:#d7dee7;cursor:pointer;font-size:10px;font-weight:800}.party-song-results>header button svg{width:13px}
.party-song-results .party-music-card,.party-music-card{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border:1px solid #303945;border-radius:11px;background:linear-gradient(135deg,#141920,#101319);transition:border-color .18s,transform .18s}
.party-music-card:hover{border-color:#5b4669;transform:translateY(-1px)}
.party-music-thumb{position:relative;width:104px;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;padding:0;border:0;border-radius:8px;background:#241b2c;color:#fff;cursor:pointer}.party-music-thumb>img{width:100%;height:100%;object-fit:cover}.party-music-thumb>span{display:grid;place-items:center}.party-music-thumb>i,.party-music-thumb>svg{position:absolute;width:30px;height:30px;padding:7px;border-radius:50%;background:#000a;color:#fff;filter:drop-shadow(0 2px 5px #000)}.party-music-thumb>b{position:absolute;right:4px;bottom:4px;padding:2px 5px;border-radius:4px;background:#000c;color:#fff;font-size:9px}
.party-music-copy{min-width:0;display:grid;gap:5px}.party-music-copy strong{overflow:hidden;color:#edf1f6;font-size:13px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.party-music-copy span{overflow:hidden;color:#929dab;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.party-music-card>.party-song-actions{width:190px;min-width:190px;display:flex;align-items:center;justify-content:flex-end;gap:5px}.party-music-card>.party-song-actions button{min-height:34px;padding:0 9px;font-size:10px}.party-music-card>.party-song-actions .favorite{width:34px;padding:0;border-color:#574455;background:#211720;color:#bcaabb}.party-music-card>.party-song-actions .favorite.active{border-color:#bd416b;background:#532039;color:#ff9cbb}.party-music-card>.party-song-actions .favorite.active svg{fill:currentColor}.party-music-card>.party-song-actions .queue{border-color:#38694b;background:#1c442b;color:#a1efb5}.party-music-card>.party-song-actions .play{border-color:#774aa0;background:#512d70;color:#f8e6ff}.party-music-card>.party-song-actions .request{border-color:#49658a;background:#1c334f;color:#a9d2ff}.party-music-card>.party-song-actions .approve{border-color:#43815b;background:#205036;color:#b3f5ca}.party-music-card>.party-song-actions .reject{width:34px;padding:0;border-color:#7a454d;background:#4b232a;color:#ffb6c0}
.party-request-waiting{min-height:34px;display:inline-flex;align-items:center;gap:5px;color:#d5b66d;font-size:10px;font-weight:800}.party-request-waiting svg{width:14px}.party-music-empty,.party-music-loading{min-height:150px;display:grid;place-content:center;justify-items:center;gap:8px;color:#8f99a7;text-align:center}.party-music-empty svg,.party-music-loading svg{width:30px;height:30px;color:#b27bcf}.party-music-loading svg{animation:partyTransitionSpin .8s linear infinite}.party-music-empty p{max-width:360px;margin:0;font-size:12px;line-height:1.5}.party-music-empty button{min-height:33px;padding:0 11px;border:1px solid #72518a;border-radius:8px;background:#382346;color:#efd5ff;cursor:pointer;font-size:11px;font-weight:800}
.party-music-pagination{flex:0 0 auto;min-height:47px;padding:7px 10px;border-top:1px solid #302c38;background:#0e1117}.party-music-pagination[hidden]{display:none!important}.party-music-pagination .party-music-page-total{margin:0 3px;white-space:nowrap}
@media(max-width:680px){.party-search-modal-card{height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}.party-music-summary{font-size:10px}.party-search-modal-card .party-song-search{margin:8px 9px 0}.party-search-modal-card .party-song-search>div{grid-template-columns:minmax(0,1fr) auto}.party-search-modal-card .party-song-search button{padding:0 10px}.party-music-presets{padding:7px 9px}.party-music-tabs{padding:0 9px 7px}.party-music-tabs button{min-height:34px;font-size:0}.party-music-tabs button svg{width:17px;height:17px}.party-music-tabs button b{font-size:9px}.party-music-library,.party-song-results{padding:8px 9px 12px}.party-song-results .party-music-card,.party-music-card{grid-template-columns:82px minmax(0,1fr);gap:8px}.party-music-thumb{width:82px}.party-music-card>.party-song-actions{width:auto;min-width:0;grid-column:1/-1;justify-content:stretch}.party-music-card>.party-song-actions button{flex:1}.party-music-card>.party-song-actions .favorite,.party-music-card>.party-song-actions .reject{flex:0 0 36px}.party-music-copy strong{font-size:12px}.party-music-preview{grid-template-columns:104px minmax(0,1fr) 32px;margin:0 9px 7px}.party-music-preview-player{width:104px}.party-song-results>header{top:-8px;margin:-8px -9px 8px;padding:8px 9px}.party-music-pagination{min-height:43px;padding:5px}.party-music-pagination button{min-width:30px;height:30px;padding:0 5px}.party-music-pagination .party-music-page-total{display:none}}

/* Bữa tiệc: cụm thao tác nhạc gọn, không chiếm trọn chiều ngang thẻ. */
.party-search-modal-card .party-music-card>.party-song-actions{gap:4px;flex-wrap:nowrap}
.party-search-modal-card .party-music-card>.party-song-actions button{min-width:0;min-height:27px;height:27px;padding:0 7px;border-radius:6px;font-size:9px;line-height:1}
.party-search-modal-card .party-music-card>.party-song-actions button svg{width:11px;height:11px}
.party-search-modal-card .party-music-card>.party-song-actions .favorite,.party-search-modal-card .party-music-card>.party-song-actions .reject{width:27px;flex:0 0 27px;padding:0}
@media(max-width:680px){.party-search-modal-card .party-music-card>.party-song-actions{justify-content:flex-end}.party-search-modal-card .party-music-card>.party-song-actions button{flex:0 0 auto}.party-search-modal-card .party-music-card>.party-song-actions .favorite,.party-search-modal-card .party-music-card>.party-song-actions .reject{flex:0 0 27px}}

/* Typing state inside quick chat: render as the next incoming message bubble. */
.quick-pm-messages>.quick-pm-typing-indicator{
  width:100%;
  margin-top:6px;
  margin-bottom:10px;
  padding:0;
  background:transparent;
}
.quick-pm-messages>.quick-pm-typing-indicator[hidden]{display:none!important}
.quick-pm-messages>.quick-pm-typing-indicator>div{
  min-width:0;
  width:fit-content;
  padding:10px 13px;
}
.quick-pm-messages>.quick-pm-typing-indicator .direct-typing-content{min-height:8px}
.quick-pm-messages>.quick-pm-typing-indicator[data-message-frame]{
  --mf-in-bg:linear-gradient(145deg,#1c2028,#101319);
  --mf-in-border:var(--message-frame-secondary);
  --mf-in-text:#f5f8fc;
  --mf-accent:var(--message-frame-accent);
}
.quick-pm-messages>.quick-pm-typing-indicator[data-message-frame-theme="admin"]{--mf-in-bg:linear-gradient(145deg,#291319,#120d10);--mf-in-border:#ff6678;--mf-in-text:#fff5f6;--mf-accent:#ffd36a}
.quick-pm-messages>.quick-pm-typing-indicator[data-message-frame-theme="diamond"]{--mf-in-bg:linear-gradient(145deg,#112934,#09171e);--mf-in-border:#65ddf6;--mf-in-text:#f3fcff;--mf-accent:#76e9ff}
.quick-pm-messages>.quick-pm-typing-indicator[data-message-frame-theme="gifts"]{--mf-in-bg:linear-gradient(145deg,#39204b,#1c1028);--mf-in-border:#cf87ff;--mf-in-text:#fff8ff;--mf-accent:#72f1cc}
.quick-pm-messages>.quick-pm-typing-indicator[data-message-frame-theme="smile"]{--mf-in-bg:linear-gradient(145deg,#173a31,#0d211c);--mf-in-border:#58e2bf;--mf-in-text:#f2fff9;--mf-accent:#fff08c}
.quick-pm-messages>.quick-pm-typing-indicator[data-message-frame-theme="love"]{--mf-in-bg:linear-gradient(145deg,#44203b,#241222);--mf-in-border:#dc91c7;--mf-in-text:#fff6fb;--mf-accent:#ffd8ec}
.quick-pm-messages>.quick-pm-typing-indicator[data-message-frame-theme="level"]{--mf-in-bg:linear-gradient(145deg,#123641,#09232b);--mf-in-border:#5beafa;--mf-in-text:#f2fdff;--mf-accent:#d9fdff}
.quick-pm-messages>.quick-pm-typing-indicator[data-message-frame-theme="aurora"]{--mf-in-bg:linear-gradient(145deg,#33213f,#1b1729);--mf-in-border:#c9a9ee;--mf-in-text:#fff8fc;--mf-accent:#fff0fa}
.quick-pm-messages>.quick-pm-typing-indicator[data-message-frame-theme="bitch"]{--mf-in-bg:linear-gradient(145deg,#3b182d,#21101b);--mf-in-border:#d76a9f;--mf-in-text:#fff5fa;--mf-accent:#ffe0f1}
.quick-pm-messages>.quick-pm-typing-indicator[data-message-frame-theme="mi-da"]{--mf-in-bg:linear-gradient(145deg,rgba(34,23,42,.98),rgba(15,10,20,.98));--mf-in-border:#725783;--mf-in-text:#eee7f2;--mf-accent:#d9c6e4}
.quick-pm-messages>.quick-pm-typing-indicator[data-message-frame-theme="moon-bloom"]{--mf-in-bg:linear-gradient(145deg,#24182d,#17101f);--mf-in-border:#70507e;--mf-in-text:#f4edf7;--mf-accent:#f4dcaa}
.quick-pm-messages>.quick-pm-typing-indicator[data-message-frame]>.direct-typing-bubble{
  border-color:var(--mf-in-border);
  background:var(--mf-in-bg);
  color:var(--mf-in-text);
  box-shadow:inset 0 0 12px color-mix(in srgb,var(--mf-in-border) 10%,transparent),0 3px 9px rgba(0,0,0,.35);
}
.quick-pm-messages>.quick-pm-typing-indicator[data-message-frame] .direct-typing-dots i{background:var(--mf-accent)}

/* Keep the direct-message typing state inside the conversation as a real incoming bubble. */
#direct-conversation-panel .direct-message-list>.direct-typing-indicator{
  width:100%;
  padding:0;
  background:transparent;
}
#direct-conversation-panel[data-direct-theme]:not([data-direct-theme="classic"]) .direct-typing-bubble{
  border-color:rgba(255,255,255,.2);
  background:rgba(12,16,22,.88);
  color:#edf2f7;
  backdrop-filter:blur(7px);
}
#direct-conversation-panel .direct-typing-indicator[data-message-frame]{
  --mf-in-bg:linear-gradient(145deg,#1c2028,#101319);
  --mf-in-border:var(--message-frame-secondary);
  --mf-in-text:#f5f8fc;
  --mf-accent:var(--message-frame-accent);
}
#direct-conversation-panel .direct-typing-indicator[data-message-frame-theme="admin"]{--mf-in-bg:linear-gradient(145deg,#291319,#120d10);--mf-in-border:#ff6678;--mf-in-text:#fff5f6;--mf-accent:#ffd36a}
#direct-conversation-panel .direct-typing-indicator[data-message-frame-theme="diamond"]{--mf-in-bg:linear-gradient(145deg,#112934,#09171e);--mf-in-border:#65ddf6;--mf-in-text:#f3fcff;--mf-accent:#76e9ff}
#direct-conversation-panel .direct-typing-indicator[data-message-frame-theme="gifts"]{--mf-in-bg:linear-gradient(145deg,#39204b,#1c1028);--mf-in-border:#cf87ff;--mf-in-text:#fff8ff;--mf-accent:#72f1cc}
#direct-conversation-panel .direct-typing-indicator[data-message-frame-theme="smile"]{--mf-in-bg:linear-gradient(145deg,#173a31,#0d211c);--mf-in-border:#58e2bf;--mf-in-text:#f2fff9;--mf-accent:#fff08c}
#direct-conversation-panel .direct-typing-indicator[data-message-frame-theme="love"]{--mf-in-bg:linear-gradient(145deg,#44203b,#241222);--mf-in-border:#dc91c7;--mf-in-text:#fff6fb;--mf-accent:#ffd8ec}
#direct-conversation-panel .direct-typing-indicator[data-message-frame-theme="level"]{--mf-in-bg:linear-gradient(145deg,#123641,#09232b);--mf-in-border:#5beafa;--mf-in-text:#f2fdff;--mf-accent:#d9fdff}
#direct-conversation-panel .direct-typing-indicator[data-message-frame-theme="aurora"]{--mf-in-bg:linear-gradient(145deg,#33213f,#1b1729);--mf-in-border:#c9a9ee;--mf-in-text:#fff8fc;--mf-accent:#fff0fa}
#direct-conversation-panel .direct-typing-indicator[data-message-frame-theme="bitch"]{--mf-in-bg:linear-gradient(145deg,#3b182d,#21101b);--mf-in-border:#d76a9f;--mf-in-text:#fff5fa;--mf-accent:#ffe0f1}
#direct-conversation-panel .direct-typing-indicator[data-message-frame-theme="mi-da"]{--mf-in-bg:linear-gradient(145deg,rgba(34,23,42,.98),rgba(15,10,20,.98));--mf-in-border:#725783;--mf-in-text:#eee7f2;--mf-accent:#d9c6e4}
#direct-conversation-panel .direct-typing-indicator[data-message-frame-theme="moon-bloom"]{--mf-in-bg:linear-gradient(145deg,#24182d,#17101f);--mf-in-border:#70507e;--mf-in-text:#f4edf7;--mf-accent:#f4dcaa}
#direct-conversation-panel .direct-typing-indicator[data-message-frame] .direct-typing-bubble{
  border-color:var(--mf-in-border);
  background:var(--mf-in-bg);
  color:var(--mf-in-text);
  box-shadow:inset 0 0 12px color-mix(in srgb,var(--mf-in-border) 10%,transparent),0 3px 9px rgba(0,0,0,.35);
  backdrop-filter:none;
}
#direct-conversation-panel .direct-typing-indicator[data-message-frame] .direct-typing-dots i{
  background:var(--mf-accent);
}
body.messenger-focus-mode #direct-conversation-panel .direct-message-list>.direct-typing-indicator{
  order:initial;
  flex:initial;
  padding-inline:0;
}

@media (max-width: 640px) {
  .game-player-guide > summary { grid-template-columns: 30px minmax(0,1fr) auto; gap: 7px; padding: 7px 8px; }
  .game-guide-summary-icon { width: 30px; height: 30px; }
  .game-player-guide > summary small { white-space: normal; }
  .game-player-guide > summary em { padding-inline: 6px; }
  .game-guide-body { max-height: 62vh; padding: 7px; }
  .game-guide-item > summary { grid-template-columns: 25px minmax(0,1fr) 18px; }
  .game-guide-item > summary b { grid-column: 2; }
  .game-guide-item > summary small { grid-column: 2; text-align: left; white-space: normal; }
  .game-guide-item > summary::after { grid-column: 3; grid-row: 1 / span 2; }
  .game-guide-item > div { padding: 7px 10px 10px 12px; }
  .game-guide-item ol { font-size: 11px; }
}
/* Home: keep card frames close to the page background for a calmer dark theme. */
.view[data-page="home"] > .panel {
  border-block-color: #252b33;
  background: #06080a;
}
.view[data-page="home"] > .panel > .panel-title {
  border-bottom-color: #293039;
  background: linear-gradient(180deg, #15181c, #0e1114);
}
#home-rooms .room-card {
  border-color: #303741;
  background: #0d1014;
  box-shadow: inset 0 1px rgba(255,255,255,.015);
}
#home-rooms .room-card:hover {
  border-color: #414a56;
  background: #14181d;
}
#home-rooms .room-card-special::after {
  background: radial-gradient(circle, rgba(86,159,255,.08), transparent 67%);
}
.view[data-page="home"] .quick-menu {
  border-bottom-color: #293039;
  background: #06080a;
}
.view[data-page="home"] .quick-menu-left {
  border-right-color: #293039;
}
.view[data-page="home"] .clock-card {
  background: #06080a;
}
.view[data-page="home"] .quick-links button,
.view[data-page="home"] .menu-grid button {
  border-color: #2b323b;
  background: #0d1014;
}
.view[data-page="home"] .quick-links button:hover,
.view[data-page="home"] .menu-grid button:hover {
  background: #15191e;
}
.view[data-page="home"] .quick-menu-left .quick-dating-link {
  border-top-color: #32282d;
  background: linear-gradient(145deg, #1b0e12, #0d0a0c);
}
.view[data-page="home"] .quick-menu-left .quick-temporary-room-link {
  border-top-color: #2b323b;
  background: #0d1014;
}
#home-rooms .room-card.room-card-roomad {
  border-color: #642d36;
  background: radial-gradient(circle at 88% 18%, rgba(255,68,83,.1), transparent 35%), linear-gradient(145deg, #251116, #130c0f 68%, #0b0b0d);
  box-shadow: inset 0 0 0 1px rgba(255,92,105,.035), 0 0 9px rgba(185,35,51,.1);
}
#home-rooms .room-card.room-card-roomad:hover {
  border-color: #9f3f4b;
  background: radial-gradient(circle at 88% 18%, rgba(255,77,91,.17), transparent 38%), linear-gradient(145deg, #311219, #180d11 70%);
  box-shadow: inset 0 0 0 1px rgba(255,128,138,.06), 0 0 13px rgba(221,49,66,.16);
}

/* Home chat focus mode: full-screen chat with local presence and quick notices. */
#home-global-chat-panel { position: relative; }
.global-chat-focus-toolbar { min-width: 0; }
.global-chat-focus-brand { min-width: 0; }
.global-chat-focus-brand > span { min-width: 0; display: grid; gap: 1px; }
.global-chat-focus-brand strong { overflow: hidden; color: var(--green); font-size: 14px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.global-chat-focus-brand small { color: #7f8c99; font-size: 9px; line-height: 1.2; }
.global-chat-focus-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.global-chat-focus-actions > button {
  position: relative;
  min-width: 32px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid #34404c;
  border-radius: 7px;
  background: #12181e;
  color: #aab6c2;
  cursor: pointer;
  font: 800 12px/1 var(--font-vietnamese);
  white-space: nowrap;
}
.global-chat-focus-actions > button:hover,
.global-chat-focus-actions > button[aria-expanded="true"] { border-color: #4c799f; background: #193048; color: #fff; }
.global-chat-focus-actions > button:disabled { cursor: wait; opacity: .62; }
.global-chat-focus-actions > button svg { width: 17px; height: 17px; }
.global-chat-focus-actions .global-chat-here-toggle { border-color: #315943; background: #10251a; color: #9ce5b4; }
.global-chat-here-toggle b { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: #24643b; color: #d9ffe5; font-size: 10px; }
.global-chat-focus-actions .global-chat-notification-toggle,
.global-chat-focus-actions .global-chat-focus-toggle { width: 32px; padding: 0; }
.global-chat-notification-toggle b { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border: 2px solid #11171d; border-radius: 999px; background: #e04559; color: #fff; font-size: 10px; }
.global-chat-notification-toggle b[hidden] { display: none; }
.global-chat-focus-actions .global-chat-focus-toggle { border-color: #426b94; background: #152c42; color: #9ed5ff; }
.global-chat-focus-actions .global-chat-refresh { color: var(--orange); }
body:not(.global-chat-focus-mode) .global-chat-focus-actions .global-chat-here-toggle,
body:not(.global-chat-focus-mode) .global-chat-focus-actions .global-chat-notification-toggle { display: none; }
body:not(.global-chat-focus-mode) .global-chat-focus-actions .global-chat-refresh {
  min-width: 0;
  min-height: 0;
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 11px;
}
.global-chat-focus-popover[hidden] { display: none !important; }
.global-chat-focus-popover:not([hidden]) {
  position: absolute;
  z-index: 60;
  top: 45px;
  right: 8px;
  width: min(380px, calc(100% - 16px));
  max-height: min(68vh, 590px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #3a4856;
  border-radius: 12px;
  background: #0d1116;
  box-shadow: 0 18px 55px rgba(0,0,0,.76);
}
.global-chat-here-popover:not([hidden]) { border-color: #397a61; }
.global-chat-notification-popover:not([hidden]) { border-color: #68537f; }
.global-chat-focus-popover > header { min-height: 62px; display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid #303a45; background: #121820; }
.global-chat-here-popover > header { background: #10201b; }
.global-chat-notification-popover > header { background: #1a1521; }
.global-chat-focus-popover > header > div { min-width: 0; display: grid; gap: 2px; }
.global-chat-focus-popover > header strong { color: #edf3f8; font-size: 15px; line-height: 1.25; }
.global-chat-focus-popover > header span { overflow: hidden; color: #8f9dab; font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.global-chat-focus-popover > header > button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #3b4856; border-radius: 8px; background: #19212a; color: #aab8c5; cursor: pointer; }
.global-chat-focus-popover > header > button:hover { border-color: #5e84a9; color: #fff; }
.global-chat-focus-popover > header > button svg { width: 15px; height: 15px; }
.global-chat-focus-people,
.global-chat-focus-notifications { min-height: 150px; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.global-chat-here-person { width: 100%; min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr) 22px; align-items: center; gap: 10px; padding: 10px 9px; border: 0; border-bottom: 1px solid #29333e; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.global-chat-here-person:last-child { border-bottom: 0; }
.global-chat-here-person:hover { border-radius: 8px; background: #151d25; }
.global-chat-here-avatar { position: relative; }
.global-chat-here-avatar .avatar { width: 46px; height: 46px; }
.global-chat-here-avatar > i { position: absolute; right: 0; bottom: 1px; width: 10px; height: 10px; border: 2px solid #0d1116; border-radius: 50%; background: #43d574; box-shadow: 0 0 7px rgba(67,213,116,.58); }
.global-chat-here-person > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.global-chat-here-person strong { overflow: hidden; color: #e8eef4; font-size: 14px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.global-chat-here-meta { font-size: 12px !important; line-height: 1.4; }
.global-chat-here-person small { overflow: hidden; color: #70c98b; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.global-chat-here-person > svg { width: 16px; color: #6c8295; }
.global-chat-here-pagination { flex: 0 0 auto; padding: 7px; }
.global-chat-focus-empty-list { min-height: 145px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; color: #8796a5; font-size: 12px; text-align: center; }
.global-chat-focus-empty-list svg { width: 26px; height: 26px; color: #57718a; }

#global-chat-notification-popover .messenger-notification-item { grid-template-columns: 46px minmax(0, 1fr); gap: 11px; padding: 11px 9px; }
#global-chat-notification-popover .messenger-notification-item > .avatar,
#global-chat-notification-popover .messenger-notification-item > span { width: 44px; height: 44px; }
#global-chat-notification-popover .messenger-notification-item strong { font-size: 14px; line-height: 1.3; }
#global-chat-notification-popover .messenger-notification-item p { margin: 4px 0; font-size: 12px; line-height: 1.45; }
#global-chat-notification-popover .messenger-notification-item small { margin: 3px 0; font-size: 11px; line-height: 1.45; }
#global-chat-notification-popover .messenger-notification-item time { font-size: 11px; line-height: 1.4; }
#global-chat-notification-popover .messenger-notification-item em { margin-top: 6px; font-size: 11px; }
#global-chat-notification-popover .messenger-notification-item em svg { width: 13px; height: 13px; }

body.global-chat-focus-mode { overflow: hidden !important; overscroll-behavior: none; }
body.global-chat-focus-mode #home-global-chat-panel {
  position: fixed;
  z-index: 2100;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex !important;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 0;
  background: #050607;
  box-shadow: none;
  isolation: isolate;
}
body.global-chat-focus-mode #home-global-chat-panel > .global-chat-focus-toolbar { flex: 0 0 auto; min-height: 58px; padding: max(7px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) 7px max(9px, env(safe-area-inset-left)); border-bottom-color: #2e3b48; background: linear-gradient(135deg, #121923, #0b0f15 70%); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
body.global-chat-focus-mode #global-chat-composer-mount { flex: 0 0 auto; }
body.global-chat-focus-mode #global-chat-composer-mount .global-chat-composer { padding-inline: max(10px, env(safe-area-inset-left)); }
body.global-chat-focus-mode #global-chat-list { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-inline: clamp(0px, 2vw, 28px); }
body.global-chat-focus-mode #global-chat-pagination { flex: 0 0 auto; padding-bottom: max(9px, env(safe-area-inset-bottom)); }
body.global-chat-focus-mode .global-chat-focus-popover:not([hidden]) { position: fixed; z-index: 2140; top: 64px; right: 9px; width: min(390px, calc(100vw - 18px)); max-height: min(72vh, 640px); }
body.global-chat-focus-mode .quick-pm-bubble { z-index: 2180; }
body.global-chat-focus-mode .quick-pm-inbox { z-index: 2182; }
body.global-chat-focus-mode .quick-pm-window { z-index: 2190; }
body.global-chat-focus-mode .quick-pm-settings-menu { z-index: 2192; }

@media (max-width: 560px) {
  .global-chat-focus-toolbar { gap: 6px; padding-inline: 7px; }
  body.global-chat-focus-mode .global-chat-focus-brand > svg { display: none; }
  .global-chat-focus-brand strong { font-size: 12px; }
  .global-chat-focus-brand small { display: none; }
  .global-chat-focus-actions { gap: 3px; }
  .global-chat-focus-actions > button { min-width: 34px; width: 34px; min-height: 34px; padding: 0; }
  .global-chat-focus-actions .global-chat-here-toggle { width: 40px; }
  .global-chat-here-toggle > span,
  .global-chat-refresh > span { display: none; }
  .global-chat-here-toggle b { min-width: 16px; height: 16px; padding: 0 3px; }
  .global-chat-focus-popover:not([hidden]),
  body.global-chat-focus-mode .global-chat-focus-popover:not([hidden]) { top: 61px; right: 6px; width: calc(100vw - 12px); max-height: calc(100dvh - 68px); }
  body.global-chat-focus-mode #global-chat-list { padding-inline: 0; }
}

/* Personal feed hiding controls and recovery list. */
.feed-card-menu-popover { min-width: 224px; }
.feed-hidden-panel .blocked-member-note { color: #a7a1b8; }
.feed-hidden-section + .feed-hidden-section { border-top: 1px solid var(--line-soft); }
.feed-hidden-heading { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); background: rgba(116, 91, 151, .08); }
.feed-hidden-heading > span { display: inline-flex; align-items: center; gap: 7px; color: #d1c2e7; font-size: 11px; font-weight: 700; }
.feed-hidden-heading > span svg { width: 15px; height: 15px; color: #a98bd2; }
.feed-hidden-heading > small { color: #8f849e; font-size: 10px; }
.feed-hidden-item .member-copy { min-width: 0; flex: 1; }
.feed-hidden-item .member-copy > span:last-child { overflow: hidden; color: #aaa2b4; text-overflow: ellipsis; white-space: nowrap; }
.feed-hidden-item > button { flex: 0 0 auto; border-color: #685282; background: #211a2b; color: #e2d0ff; }
.feed-hidden-item > button:hover { border-color: #a98bd2; background: #342445; color: #fff; }

@media (max-width: 560px) {
  .feed-card-menu-popover { max-width: calc(100vw - 24px); }
  .feed-hidden-item { align-items: flex-start; }
  .feed-hidden-item > button { min-height: 31px; padding-inline: 8px; font-size: 10px; }
}

/* Homepage chat stream; the rail is absent on page one. */
#global-chat-list { overflow-anchor: none; }
#global-chat-list > .global-chat-stream-page { display: flow-root; }
#global-chat-list > .global-chat-stream-page.is-parked { contain: strict; overflow: hidden; }
.global-chat-stream-page.is-parked > button { display: block; margin: 20px auto; padding: 12px; }
.global-chat-stream-tail { min-height: 48px; display: grid; place-items: center; padding: 12px; color: var(--muted); font-size: 12px; }
.global-chat-stream-tail button { border: 0; padding: 10px 18px; background: transparent; color: inherit; cursor: pointer; }
#global-chat-pagination.global-chat-page-rail {
  position: fixed; z-index: 190; top: 50%; right: max(0px, env(safe-area-inset-right));
  display: flex; align-items: center; gap: 0; padding: 0; margin: 0;
  transform: translate(calc(100% - 22px), -50%); transition: transform .32s ease, opacity .32s ease;
  opacity: .6; max-height: 76dvh; font-size: 12px; border: 0;
}
#global-chat-pagination[hidden] { display: none !important; }
#global-chat-pagination.is-visible, #global-chat-pagination:focus-within { transform: translate(0, -50%); opacity: 1; }
@media (hover:hover) { #global-chat-pagination:hover { transform: translate(0, -50%); opacity: 1; } }
.global-chat-rail-handle { width: 22px; min-width: 22px; height: 48px; border: 1px solid var(--line); border-right: 0; border-radius: 9px 0 0 9px; background: var(--panel, #171a21); color: var(--text, #fff); font: inherit; cursor: pointer; }
.global-chat-rail-pages { display: flex; flex-direction: column; gap: 3px; padding: 5px; border: 1px solid var(--line); border-radius: 10px 0 0 10px; background: var(--panel, #171a21); max-height: 76dvh; overflow-y: auto; overscroll-behavior: contain; }
.global-chat-rail-pages > button { min-height: 32px; min-width: 42px; border: 0; border-radius: 6px; background: transparent; color: var(--text, #fff); font: inherit; cursor: pointer; }
.global-chat-rail-pages > button.active { background: var(--pink, #ed5893); color: #fff; opacity: 1; }
.global-chat-rail-pages form { display: flex; flex-direction: column; width: 48px; gap: 3px; }
.global-chat-rail-pages input { min-width: 0; width: 100%; padding: 5px 2px; font-size: 11px; background: transparent; color: var(--text, #fff); border: 1px solid var(--line); border-radius: 4px; }
.global-chat-rail-pages form button { padding: 5px; border: 0; background: transparent; color: var(--text, #fff); cursor: pointer; }
body.global-chat-focus-mode #global-chat-pagination.global-chat-page-rail { z-index: 2130; padding: 0; }
@media (prefers-reduced-motion: reduce) { #global-chat-pagination.global-chat-page-rail { transition: none; } }

/* Every post surface uses the same card layout. Keep community feed and
   personal walls visually identical so fixes apply to both at once. */
.feed-list > .feed-card {
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line) !important;
  border-radius: 12px;
  padding-block: 3px;
  background: var(--surface-2);
}
.feed-list > .feed-card > :is(.feed-card-head, .feed-content, .post-mood, .feed-actions) {
  padding-inline: 12px;
}
@media (max-width: 600px) {
  .feed-list > .feed-card {
    margin-bottom: 14px;
    border-radius: 10px;
  }
}


/* Retain the new bot button alongside the restored composer layout. */
.global-chat-bot-call { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #526c8a; border-radius: 4px; background: linear-gradient(180deg,#253a50,#182735); color: #9fd0ff; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.global-chat-bot-call:hover { border-color: #71a9dd; background: linear-gradient(180deg,#304d69,#1e3346); color: #d8ecff; }
.global-chat-composer .post-tools .global-chat-bot-call { order: 0; flex: 0 0 auto; width: auto; min-width: 48px; padding: 0 7px; }
.global-chat-composer .post-tools .global-chat-bot-call > span { display: inline !important; }

/* Keep the floating Party room cheap over animated games and video. */
.party-mini-player {
  contain: layout style;
  isolation: isolate;
}
.party-mini-player .party-mini-panel {
  contain: layout paint style;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: radial-gradient(circle at 18% 0, rgba(139, 79, 190, .16), transparent 34%), linear-gradient(155deg, #1c1428, #070a0f 72%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .62), 0 0 0 1px rgba(183, 112, 244, .1);
}
.party-mini-player.party-theme-pink .party-mini-panel {
  background: radial-gradient(circle at 18% 0, rgba(219, 86, 145, .16), transparent 34%), linear-gradient(155deg, #4b1c33, #170d13 72%);
}
.party-mini-player .party-mini-bubble {
  box-shadow: 0 8px 20px rgba(0, 0, 0, .56), 0 0 12px rgba(147, 76, 224, .24);
}
.party-mini-player.party-theme-pink .party-mini-bubble {
  box-shadow: 0 8px 20px rgba(0, 0, 0, .56), 0 0 13px rgba(242, 91, 161, .28);
}
.party-mini-player.is-playing .party-mini-disc {
  animation: none;
  will-change: auto;
}

/* Clan shield: compact status and purchase control inside the Treasury panel. */
.clan-shield-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 11px;
  border: 1px solid rgba(255, 193, 61, .42);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(74, 45, 8, .72), rgba(20, 24, 31, .92));
}
.clan-shield-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffd55f;
  border: 1px solid rgba(255, 213, 95, .55);
  border-radius: 50%;
  background: rgba(255, 190, 42, .12);
}
.clan-shield-card > span svg { width: 23px; height: 23px; }
.clan-shield-card > div { min-width: 0; }
.clan-shield-card > div strong,
.clan-shield-card > div small { display: block; }
.clan-shield-card > div strong { color: #fff2bd; }
.clan-shield-card > div small { margin-top: 3px; color: #c9ced8; line-height: 1.35; }
.clan-shield-card > em {
  max-width: 115px;
  color: #e7d9aa;
  font-size: .76rem;
  font-style: normal;
  text-align: right;
}
.clan-shield-card > button {
  display: grid;
  gap: 1px;
  min-width: 112px;
  padding: 8px 11px;
  color: #171000;
  border: 1px solid #ffe38c;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe47c, #e7a91e);
  box-shadow: 0 5px 16px rgba(224, 157, 12, .2);
  cursor: pointer;
}
.clan-shield-card > button small { color: #4f3900; }
.clan-shield-card > button:disabled {
  opacity: .48;
  filter: grayscale(.35);
  cursor: not-allowed;
}
.clan-shield-card.is-active {
  border-color: rgba(61, 230, 141, .64);
  background: linear-gradient(135deg, rgba(8, 71, 48, .82), rgba(13, 29, 25, .94));
  box-shadow: inset 0 0 24px rgba(43, 218, 129, .07), 0 0 18px rgba(43, 218, 129, .08);
}
.clan-shield-card.is-active > span {
  color: #7dffba;
  border-color: rgba(125, 255, 186, .62);
  background: rgba(43, 218, 129, .14);
}
.clan-shield-card.is-active > div strong,
.clan-shield-card.is-active > em { color: #8dffc2; }

@media (max-width: 560px) {
  .clan-shield-card { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 9px; }
  .clan-shield-card > span { width: 38px; height: 38px; }
  .clan-shield-card > button,
  .clan-shield-card > em { grid-column: 2; justify-self: stretch; width: 100%; max-width: none; text-align: center; }
  .clan-shield-card > button { min-width: 0; }
}

/* Bữa tiệc: giữ toàn bộ điều khiển trình phát trên một hàng ổn định. */
#party-room-panel .party-now-playing {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#party-room-panel .party-playback-controls {
  width: auto;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 5px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
#party-room-panel .party-playback-controls::-webkit-scrollbar { display: none; }
#party-room-panel .party-playback-controls > button,
#party-room-panel .party-playback-controls .party-room-mode-actions {
  flex: 0 0 auto;
  white-space: nowrap;
}
#party-room-panel .party-playback-controls .party-room-mode-actions {
  display: inline-flex;
  flex-wrap: nowrap;
}
#party-room-panel .party-playback-controls .party-room-mode-actions[hidden] { display: none !important; }

/* Avoid re-sampling the conversation background through every message while
   a phone scrolls a long history. Keep each theme's colors and borders. */
@media (max-width: 820px), (pointer: coarse) {
  /* touch-action must be on the scroll container itself; an ancestor above
     the nearest scroller is not consulted for pointer gesture arbitration. */
  body.messenger-focus-mode :is(.direct-message-list, .group-message-list, .conversation-list, .group-inbox, .group-list) {
    touch-action: pan-y pinch-zoom;
  }
  #direct-conversation-panel .direct-message-bubble,
  #direct-conversation-panel .direct-typing-bubble,
  #group-chat-panel .group-message-bubble {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
.direct-nickname-backdrop{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:16px;background:#03070bba;backdrop-filter:blur(5px)}
.direct-nickname-dialog{width:min(100%,420px);padding:20px;border:1px solid #7b587b;border-radius:18px;background:#181b22;color:#f3edf4;box-shadow:0 24px 70px #0009}
.direct-nickname-title{display:flex;align-items:start;justify-content:space-between;gap:16px}
.direct-nickname-title small{color:#dc9ac4;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.direct-nickname-title h2{margin:4px 0 0;font-size:19px;line-height:1.3}
.direct-nickname-close{width:34px;height:34px;display:grid;place-items:center;border:1px solid #635165;border-radius:10px;background:#29242e;color:#fff;cursor:pointer}
.direct-nickname-dialog p{margin:14px 0 18px;color:#c5b9c7;font-size:13px;line-height:1.5}
.direct-nickname-dialog label{display:block;margin-bottom:7px;font-size:13px;font-weight:700}
.direct-nickname-dialog input{width:100%;min-height:44px;padding:10px 12px;border:1px solid #765f78;border-radius:10px;outline:none;background:#111820;color:#fff;font:inherit}
.direct-nickname-dialog input:focus{border-color:#ef91c4;box-shadow:0 0 0 3px #ef91c433}
.direct-nickname-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.direct-nickname-actions button{min-height:38px;padding:0 17px;border:1px solid #775f79;border-radius:10px;background:#28202b;color:#fff;cursor:pointer}
.direct-nickname-actions .direct-nickname-save{border-color:#d45aa6;background:linear-gradient(110deg,#e44d97,#9b4dbe);font-weight:700}
.direct-nickname-actions button:disabled{opacity:.55;cursor:wait}
.direct-nickname-notice{align-self:center;display:flex;align-items:center;justify-content:center;gap:7px;max-width:min(90%,560px);margin:10px auto;padding:7px 12px;border:1px solid #664c68;border-radius:999px;background:#322a36;color:#efd1e9;text-align:center;font-size:12px;line-height:1.45}
.direct-nickname-notice svg{width:14px;height:14px;flex:none}
@media(max-width:560px){.direct-nickname-backdrop{align-items:start;padding-top:max(18px,env(safe-area-inset-top))}.direct-nickname-dialog{max-height:calc(100dvh - 36px);overflow:auto;margin-top:5vh;padding:17px}}