/* Global reset + the design's decorative animations. Layout/colors for each
   page are inline (mirroring the original design spec 1:1); this file only
   holds what can't be expressed inline: keyframes, :hover, scrollbars. */

/* Monocraft (SIL OFL) — pixel font styled after Minecraft's own typeface,
   self-hosted from github.com/IdreesInc/Monocraft. No Cyrillic coverage, so
   it's only ever put first in a stack ahead of Baloo 2/JetBrains Mono —
   digits and Latin text render pixelated, Cyrillic falls through untouched. */
@font-face {
  font-family: 'Monocraft';
  src: url('../fonts/Monocraft-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Self-hosted UI fonts. Keeping these on forum.hipposmp.ru removes three
   extra DNS/TLS connections that are slow or unavailable for some Russian
   providers. The WOFF2 files are the official variable Google Fonts builds. */
@font-face {
  font-family: 'Baloo 2';
  src: url('../fonts/Baloo2-Latin.woff2') format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Baloo 2 has no Cyrillic glyphs. Without a matching face, Russian headings
   silently fell back to the browser default (Arial on most Windows phones),
   while Latin text kept the brand font. Map the Cyrillic range to our Inter
   variable file under the same family name so every existing Baloo heading
   has one predictable, self-hosted fallback without rewriting inline styles. */
@font-face {
  font-family: 'Baloo 2';
  src: url('../fonts/Inter-Cyrillic.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Cyrillic.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Cyrillic.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Latin.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Monocraft';
  src: url('../fonts/Monocraft-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Monocraft's pixel edges turn to mush under normal font antialiasing,
   especially at small UI sizes — a 1px outline (the same trick Minecraft's
   own HUD text uses) redraws a crisp edge around the blur so it reads as
   pixel-art instead of a smudge. Matches on the inline font-family value
   itself so every current/future Monocraft spot picks it up automatically,
   no per-element class needed. The outline color flips with the theme: most
   Monocraft text is dark-on-light in the light theme, where a black rim
   barely shows against already-dark glyphs — a light rim reads instead. */
:root[data-theme="dark"] [style*="'Monocraft'"] {
  text-shadow: 1px 0 0 rgba(0,0,0,.5), -1px 0 0 rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(0,0,0,.5);
}
:root[data-theme="light"] [style*="'Monocraft'"] {
  text-shadow: 1px 0 0 rgba(255,255,255,.75), -1px 0 0 rgba(255,255,255,.75), 0 1px 0 rgba(255,255,255,.75), 0 -1px 0 rgba(255,255,255,.75);
}

* { box-sizing: border-box; }
/* Long unbreakable Russian words (e.g. "конфиденциальность") in a big heading
   can be wider than a narrow phone's viewport with no spaces to wrap on —
   found overflowing privacy.php's H1 at 375px. Applies sitewide so the same
   class of bug can't recur in any other heading/paragraph later. */
h1, h2, h3, p { overflow-wrap: break-word; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body { font-family: 'Inter', sans-serif; line-height: 1.5; animation: fadeIn .12s ease both; }
a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
textarea, input, select { font: inherit; }
img { max-width: 100%; }
button, a { overflow-wrap: anywhere; }

/* Hide scrollbars sitewide (chat/comment/friends lists, modal panels, the
   page itself, any overflow:auto/scroll container) — keeps the scroll
   working, just without the OS/browser's gray scrollbar track taking up
   space and looking like stray chrome next to rounded modal corners.
   .hip-scrollbar-hide (used explicitly on a few horizontally-scrolling chip
   rows) is now redundant with this but left in place, harmless either way. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }
.hip-scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }
.hip-scrollbar-hide::-webkit-scrollbar { display: none; }

/* Drag-and-drop file target highlight (see hipEnableDropzone in app.js) —
   fixed brand-purple regardless of theme, same reasoning as .hip-tooltip:
   cheaper than threading theme colors through a CSS file that has none. */
.hip-dropzone-active {
  outline: 2px dashed #A78BFA !important;
  outline-offset: -2px;
  background: rgba(167, 139, 250, 0.08) !important;
  border-radius: 14px;
}

/* Smoothness pass: every interactive element gets a quick, consistent
   transition instead of snapping instantly, without having to touch the
   hundreds of inline style="" colors scattered across every page. */
a, button, input, select, textarea {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .12s ease, opacity .15s ease, filter .15s ease;
}
a[href]:hover, button:not(:disabled):hover { filter: brightness(1.08); }
button:not(:disabled):active, a[href]:active { transform: scale(0.97); }
button:disabled { filter: none !important; cursor: default; }

/* Set by hipPost() in app.js on whichever button triggered an in-flight
   request — see the comment there. Distinct from plain :disabled (which
   covers "this action isn't valid right now", e.g. an empty required
   field) so a mid-request button still visually reads as "about to
   finish", not "stuck". */
button.hip-btn-busy {
  opacity: 0.6;
  cursor: default !important;
  pointer-events: none;
}

/* Notification sound toggle contains one wrapper span, so the button's own
   flex/gap does not align the SVG with its text. Make the wrapper the flex
   row and keep the tiny speaker icon from shrinking into the label. */
.hip-mute-btn-inner {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; line-height: 1;
}
.hip-mute-btn-inner svg { display: block; flex: 0 0 13px; width: 13px; height: 13px; }

/* Opt-in live maxlength indicator generated by app.js. Kept deliberately
   compact so it works below both full-width textareas and narrow modal
   fields without changing their established visual hierarchy. */
.hip-char-counter {
  display: block; margin: 4px 2px 8px; text-align: right;
  font: 600 11px 'JetBrains Mono', monospace; color: #8C8298; opacity: .78;
}
.hip-char-counter-near { color: #EF8354; opacity: 1; }

/* Quiet autosave feedback for longer forms. The state stays in the form
   instead of producing a toast on every keystroke. */
[data-hip-draft-status]:not(:empty) {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  opacity: .76; transition: opacity .16s ease;
}
[data-hip-draft-status]:not(:empty)::before {
  content: '✓'; display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%;
  font: 700 9px/1 'Inter', sans-serif;
}
[data-hip-draft-status][data-state='restored']::before { content: '↺'; font-size: 10px; }

/* Every text input/textarea/select on the site sets outline:none inline
   with no replacement — real keyboard-navigation gap (:focus-visible only,
   not plain :focus, so mouse clicks don't get a ring, only Tab). !important
   is required to beat the inline outline:none. */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #8B5CF6 !important;
  outline-offset: 1px;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid #8B5CF6 !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect the OS "reduce motion" setting: the decorative floating cubes loop
   forever (constant tiny repaints), and every fade/slide replays on each
   navigation — for motion-sensitive users, collapse all of that to instant
   instead of animated. Standard safe pattern: don't delete animations (some
   rely on their end state), just make them effectively immediate. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floatCube { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes floatCube2 { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-9px) rotate(-3deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hipSheetUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }

/* Shared animated-banner keyframes (VIP-only presets, see
   banner_gradient_presets() in includes/helpers.php) — kept to just these
   three so adding more animated presets never means adding more CSS. */
@keyframes hipBannerPan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes hipBannerHue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes hipBannerPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
@keyframes hipBankCardFlow { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes hipBankCardAurora { 0% { background-position:0% 20%; } 100% { background-position:100% 80%; } }
@media (prefers-reduced-motion:reduce) {
  .hip-bank-card-main,.hip-bank-card-visual,.hip-bank-card-preview { animation:none!important; }
}
/* Deliberately does NOT respect prefers-reduced-motion: unlike an ambient
   page-wide animation, this one only ever plays when the player themselves
   clicks the banner "dice" to pick an animated preset — an explicit opt-in
   overrides the general ambient-motion preference for that one element. */

/* --hover-bg/--border were never actually defined anywhere (this codebase
   themes via PHP-injected inline styles, not CSS custom properties) — both
   rules below silently no-op'd, and the scrollbar-thumb one specifically
   fell back to the browser's own default (often a pale/white pill on a dark
   background, reading as a stray light stripe on scrollable panes like the
   DM thread). Given real values per theme instead of an undefined var(). */
:root[data-theme="dark"] .hip-hover:hover { background: #2E2444 !important; }
:root[data-theme="light"] .hip-hover:hover { background: #EFE7FB !important; }

.hip-scroll::-webkit-scrollbar { width: 8px; }
:root[data-theme="dark"] .hip-scroll::-webkit-scrollbar-thumb { background: #372A4D; border-radius: 4px; }
:root[data-theme="light"] .hip-scroll::-webkit-scrollbar-thumb { background: #E4D8F6; border-radius: 4px; }

.hip-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 14px;
  padding: 14px 22px; border-radius: 14px; z-index: 200;
  animation: toastIn .2s ease both;
}

.hip-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 90;
  animation: fadeIn .15s ease both;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  overscroll-behavior: contain;
}

.hip-modal-panel { animation: slideUp .2s ease both; }

/* Shared tooltip box for any [data-tooltip] element (badges, icon-only role
   tags) - see app.js. Fixed dark styling regardless of site theme, matching
   how most OS-level tooltips behave, so it doesn't need theme colors passed
   in from PHP. */
.hip-tooltip {
  display: none; position: fixed; z-index: 200; transform: translate(-50%, calc(-100% - 10px));
  background: #1B1626; color: #F1EAFB; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3); animation: fadeIn .1s ease both;
}
.hip-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1B1626;
}

@media (max-width: 860px) {
  .hip-desktop-only { display: none !important; }
  /* .hip-desktop-only inside .hip-login-hero's 2-column grid is display:none below this
     breakpoint, but display:none doesn't remove the grid's own column tracks - the
     remaining login card was landing in the first 1fr column alone instead of the full
     width. Force a single column here so the visible card gets 100% of the row. */
  .hip-login-hero { grid-template-columns: 1fr !important; }
}
/* feed.php's fixed 300px recommendations sidebar doesn't shrink like a
   fr-track would, so on narrow phones it plus its neighbor overflows the
   viewport instead of wrapping - stack it below the feed instead. */
@media (max-width: 760px) {
  .hip-feed-layout { grid-template-columns: 1fr !important; }
}
@media (min-width: 861px) {
  .hip-mobile-only { display: none !important; }
}

/* account.php's topbar (unlike header.php's) always shows 6 icon buttons
   (lang/theme/menu/messages/notifications/avatar) instead of collapsing most
   of them into the hamburger menu, since quick access to the notif bell
   there matters — but that plus the full "hippo-land" wordmark doesn't fit
   next to each other below ~420px (iPhone SE and similar). Drop the
   wordmark, keep the icon, only that narrow. */
@media (max-width: 420px) {
  .hip-logo-text-narrow { display: none; }
}

/* Even with the wordmark gone, 6 icon buttons at 40px + 12px gaps (account.php's
   topbar, see .hip-topbar-icons) still don't fit under ~400px — shrink the
   icons and tighten the gap just on the narrowest phones. */
@media (max-width: 400px) {
  .hip-topbar-icons { gap: 6px !important; }
  .hip-topbar-icons .hip-icon-btn { width: 34px !important; height: 34px !important; }
}

/* Messages modal: the sidebar (conversation list) + chat pane side-by-side
   layout doesn't fit narrow screens, so below 600px only one pane shows at
   a time — see the hip-conv-active class + "back" arrow in
   includes/account_modals.php. */
@media (max-width: 600px) {
  /* !important needed — the site sets width/max-width/height inline on
     these elements, which normally beats any external stylesheet rule
     regardless of media query specificity. */
  #modal-messages .hip-modal-panel { max-width: 94vw !important; width: 94vw !important; height: 88vh !important; }
  #modal-messages .hip-msg-sidebar { width: 100% !important; }
  #modal-messages.hip-conv-active .hip-msg-sidebar { display: none !important; }
  #modal-messages:not(.hip-conv-active) .hip-msg-chat { display: none !important; }
  #modal-messages.hip-conv-active .hip-msg-back { display: flex !important; }
}

@media (max-width: 520px) {
  .hip-modal-backdrop { padding: 12px !important; align-items: stretch !important; }
  #modal-city .hip-modal-panel,
  #modal-edit .hip-modal-panel,
  #modal-bank .hip-modal-panel {
    border-radius: 18px !important;
    max-height: 92vh !important;
    padding: 18px !important;
  }
  #modal-messages .hip-modal-panel { border-radius: 18px !important; }
  #hip-dm-attach-name,
  #hip-wall-attach-name { min-width: 0; }
}

/* ---------- Unified interactive controls ---------- */
.hip-ui-icon-btn {
  width: 44px; height: 44px; flex: 0 0 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hip-border); border-radius: 13px;
  color: var(--hip-text); background: var(--hip-surface); cursor: pointer;
  line-height: 0; transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.hip-ui-icon-btn svg { display:block; flex:none; }
.hip-ui-icon-btn:hover { transform:translateY(-1px); border-color:currentColor; }
.hip-ui-icon-btn:active { transform:translateY(0) scale(.96); }
header :where(a,button) { -webkit-tap-highlight-color:transparent; }
header :where(a,button):not(.hip-global-search-backdrop) { transition:transform .12s ease,opacity .12s ease,background-color .12s ease,border-color .12s ease; }
header :where(a,button):active { transform:scale(.95); }
header :where(a,button) > svg { display:block; flex:none; }
:where(a,button,input,textarea,select):focus-visible {
  outline: 3px solid color-mix(in srgb, #8B5CF6 34%, transparent);
  outline-offset: 2px;
}

/* ---------- Global search ---------- */
.hip-section-hero-main { display:flex; align-items:center; gap:15px; min-width:0; text-align:left; }
.hip-section-hero-icon { width:54px; height:54px; flex:0 0 54px; display:flex; align-items:center; justify-content:center; border:1px solid var(--hip-hero-border); border-radius:16px; background:linear-gradient(145deg,var(--hip-hero-pill),var(--hip-hero-surface)); color:var(--hip-hero-primary); box-shadow:0 10px 25px rgba(43,31,61,.08); }
.hip-section-hero-copy { min-width:0; }
.hip-section-hero-eyebrow { display:block; margin-bottom:4px; color:var(--hip-hero-primary); font:800 10px 'Baloo 2',sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.hip-section-hero-main h1 { margin:0 0 6px!important; font:800 32px/1 'Baloo 2',sans-serif!important; }
.hip-section-hero-main p { max-width:650px!important; margin:0!important; color:var(--hip-hero-soft)!important; font-size:13.5px!important; line-height:1.5!important; }
.hip-content-composer { position:relative; overflow:hidden; background-image:linear-gradient(145deg,color-mix(in srgb,#8B5CF6 4%,transparent),transparent 45%)!important; box-shadow:0 10px 30px rgba(25,15,42,.055); }
.hip-content-composer::before { content:''; position:absolute; top:0; left:20px; right:20px; height:2px; border-radius:0 0 3px 3px; background:linear-gradient(90deg,transparent,#8B5CF6,transparent); opacity:.65; }
.hip-content-composer :is(input,textarea,select) { transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease; }
.hip-content-composer :is(input,textarea,select):focus { border-color:#8B5CF6!important; box-shadow:0 0 0 3px rgba(139,92,246,.1); }
.hip-content-card { position:relative; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; background-image:linear-gradient(145deg,transparent,color-mix(in srgb,#8B5CF6 2.5%,transparent))!important; }
.hip-content-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,#8B5CF6 35%,var(--hip-card-border,#372A4D))!important; box-shadow:0 13px 32px rgba(25,15,42,.1); }
.hip-content-card :where(img,video) { box-shadow:0 8px 22px rgba(20,12,34,.1); }
.hip-content-empty { padding:42px 24px!important; border:1px dashed var(--hip-empty-border); border-radius:16px; background:linear-gradient(145deg,transparent,color-mix(in srgb,#8B5CF6 4%,transparent)); text-align:center; color:var(--hip-empty-soft); font-size:13.5px; }
.hip-content-empty::before { content:'◇'; display:block; margin-bottom:7px; color:#8B5CF6; font-size:25px; line-height:1; }
.hip-guide-search { transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease; }
.hip-guide-search:focus { border-color:#8B5CF6!important; box-shadow:0 0 0 3px rgba(139,92,246,.1); }
.hip-guide-card { position:relative; overflow:hidden; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; background-image:linear-gradient(145deg,transparent,color-mix(in srgb,#8B5CF6 2.5%,transparent))!important; }
.hip-guide-card::after { content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background:linear-gradient(180deg,#8B5CF6,transparent); opacity:0; transition:opacity .15s ease; }
.hip-guide-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,#8B5CF6 35%,var(--hip-guide-border))!important; box-shadow:0 12px 28px rgba(25,15,42,.085); }
.hip-guide-card:hover::after { opacity:.7; }
.hip-guide-card :where(.hip-rule-edit,.hip-faq-edit) :is(input,textarea):focus { border-color:#8B5CF6!important; box-shadow:0 0 0 3px rgba(139,92,246,.1); }
@media (max-width:560px) {
  .hip-section-hero-main { gap:11px; }
  .hip-section-hero-icon { width:44px; height:44px; flex-basis:44px; border-radius:13px; }
  .hip-section-hero-icon svg { width:22px; height:22px; }
  .hip-section-hero-main h1 { font-size:27px!important; }
  .hip-section-hero-main p { font-size:12.5px!important; }
  .hip-content-composer,.hip-content-card { border-radius:14px!important; padding:16px!important; }
  .hip-content-card { transform:none!important; }
  .hip-guide-card { border-radius:14px!important; padding:17px!important; transform:none!important; }
  .hip-guide-card :where(.hip-rule-view,.hip-faq-view)>div { gap:12px!important; }
}

/* ---------- Global search ---------- */
.hip-global-search { display:none; position:fixed; inset:0; z-index:240; padding:8vh 18px 24px; align-items:flex-start; justify-content:center; }
.hip-global-search.is-open { display:flex; }
.hip-global-search-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(14,10,22,.62); backdrop-filter:blur(5px); cursor:default; animation:fadeIn .14s ease both; }
.hip-global-search-panel { position:relative; width:min(680px,100%); max-height:min(760px,84vh); display:flex; flex-direction:column; border:1px solid; border-radius:22px; padding:20px; box-shadow:0 28px 80px rgba(15,8,28,.34); animation:slideUp .18s ease both; overflow:hidden; }
.hip-global-search-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.hip-global-search-head h2 { margin:0 0 3px; font:800 22px/1.2 'Baloo 2',sans-serif; }
.hip-global-search-head p { margin:0; font-size:12.5px; opacity:.62; }
.hip-global-search-field { height:52px; display:flex; align-items:center; gap:11px; padding:0 14px; border:1px solid; border-radius:15px; transition:border-color .15s ease,box-shadow .15s ease; }
.hip-global-search-field:focus-within { border-color:#8B5CF6!important; box-shadow:0 0 0 3px rgba(139,92,246,.13); }
.hip-global-search-field input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:500 15px 'Inter',sans-serif; }
.hip-global-search-field input:focus-visible { outline:none !important; }
.hip-global-search-field kbd { font:600 10px 'Inter',sans-serif; opacity:.55; border:1px solid currentColor; border-radius:6px; padding:3px 6px; }
.hip-global-search-results { min-height:150px; margin-top:14px; padding-right:4px; overflow:auto; overscroll-behavior:contain; }
.hip-global-search-hint { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font-size:13px; opacity:.72; }
.hip-global-search-panel { background-image:linear-gradient(155deg,color-mix(in srgb,#8B5CF6 5%,transparent),transparent 38%) !important; }
.hip-global-search-title-wrap { display:flex; align-items:center; gap:12px; }
.hip-global-search-title-icon { width:42px; height:42px; flex:0 0 42px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:rgba(139,92,246,.12); color:#A78BFA; }
.hip-global-search-title-copy { min-width:0; }
.hip-global-search-head .hip-ui-icon-btn { border-color:transparent; background:rgba(139,92,246,.07); }
.hip-global-search-field { height:56px; padding:0 15px; border-color:transparent !important; background:rgba(139,92,246,.075) !important; box-shadow:inset 0 0 0 1px rgba(139,92,246,.15); }
.hip-global-search-field:focus-within { border-color:transparent !important; box-shadow:inset 0 0 0 2px #8B5CF6,0 8px 24px rgba(139,92,246,.12); }
.hip-global-search-field>svg { width:19px; height:19px; color:#A78BFA; }
.hip-global-search-field kbd { border:0; background:rgba(139,92,246,.13); padding:4px 7px; }
.hip-global-search-hint-icon { width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:18px; background:rgba(139,92,246,.09); color:#A78BFA; }
.hip-global-search-hint { min-height:190px; gap:12px; opacity:1; }
.hip-global-search-hint span { opacity:.68; }
.hip-global-search-scopes { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:2px; }
.hip-global-search-scopes small { padding:5px 9px; border-radius:999px; background:rgba(139,92,246,.08); font:700 10px 'Baloo 2',sans-serif; opacity:.72; }
.hip-search-group + .hip-search-group { margin-top:16px; }
.hip-search-group-title { margin:0 0 6px; padding:0 7px; font:800 11px 'Baloo 2',sans-serif; letter-spacing:.08em; text-transform:uppercase; opacity:.58; }
.hip-search-result { display:flex; align-items:center; gap:12px; padding:10px; border-radius:13px; color:inherit; text-decoration:none; transition:background .12s ease,transform .12s ease; }
.hip-search-result:hover,.hip-search-result.is-active { background:rgba(139,92,246,.11); transform:translateX(2px); }
.hip-search-result-media { width:40px; height:40px; flex:0 0 40px; display:flex; align-items:center; justify-content:center; border-radius:11px; overflow:hidden; background:rgba(139,92,246,.12); color:#8B5CF6; }
.hip-search-result-media img { width:100%; height:100%; object-fit:cover; }
.hip-search-result-text { min-width:0; flex:1; }
.hip-search-result-title { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 14px 'Baloo 2',sans-serif; }
.hip-search-result-subtitle { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; font-size:11.5px; opacity:.62; }
.hip-search-result-arrow { opacity:.34; }
.hip-search-loading { display:grid; gap:9px; padding:4px; }
.hip-search-loading i { height:55px; border-radius:12px; background:linear-gradient(90deg,rgba(139,92,246,.06),rgba(139,92,246,.15),rgba(139,92,246,.06)); background-size:220% 100%; animation:hipShimmer 1.1s linear infinite; }
@keyframes hipShimmer { to { background-position:-220% 0; } }

/* ---------- Mobile bottom navigation ---------- */
.hip-mobile-bottom-nav { display:none; }
@media (max-width:860px) {
  body { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  footer { margin-bottom:0; }
  #hip-to-top { bottom:calc(86px + env(safe-area-inset-bottom))!important; }
  .hip-toast { bottom:calc(88px + env(safe-area-inset-bottom)); }
  .hip-mobile-bottom-nav {
    position:fixed; left:10px; right:10px; bottom:calc(8px + env(safe-area-inset-bottom)); z-index:120;
    height:66px; display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
    background:color-mix(in srgb,var(--hip-surface) 92%,transparent); border:1px solid var(--hip-border);
    border-radius:20px; box-shadow:0 12px 36px rgba(20,12,34,.22); backdrop-filter:blur(16px); padding:5px 5px;
  }
  .hip-mobile-bottom-nav :where(a,button) { height:55px; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:transparent; color:var(--hip-text-soft); text-decoration:none; font:700 10.5px/1.1 'Baloo 2','Inter',sans-serif; cursor:pointer; }
  .hip-mobile-bottom-nav :where(a,button)>svg { width:21px; height:21px; }
  .hip-mobile-bottom-nav :where(a,button).is-active { color:var(--hip-primary); }
  .hip-mobile-bottom-nav :where(a,button).is-active>svg { stroke-width:2.5; }
  .hip-mobile-search-orb { width:40px; height:40px; margin-top:-22px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--hip-primary); color:#fff; box-shadow:0 8px 18px color-mix(in srgb,var(--hip-primary) 35%,transparent); }
  .hip-mobile-search-orb svg { width:20px; height:20px; }
  .hip-mobile-nav-dot { position:absolute; top:7px; right:calc(50% - 17px); width:7px; height:7px; border-radius:50%; background:#F0655C; border:2px solid var(--hip-surface); }
}
/* iOS zooms the entire page when a focused form control is below 16px.
   Several compact forms use 13–14.5px inline, so keep their desktop density
   but use the native mobile-safe size on touch-sized layouts. */
@media (max-width:600px) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  select,
  textarea { font-size:16px !important; }
}
@media (max-width:520px) {
  .hip-global-search { padding:0; align-items:stretch; }
  .hip-global-search-panel { width:100%; max-height:none; height:100%; border-radius:0; border:0; padding:18px 14px calc(88px + env(safe-area-inset-bottom)); }
  .hip-global-search-head h2 { font-size:20px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* ---------- Notification center ---------- */
.hip-notif-wrap { position:relative; }
.hip-notif-trigger { position:relative; width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--hip-border); border-radius:13px; background:var(--hip-surface); color:var(--hip-text); cursor:pointer; }
.hip-notif-badge { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--hip-surface); border-radius:10px; background:var(--hip-danger); color:#fff; font:800 9px 'Baloo 2',sans-serif; }
.hip-notif-badge[hidden] { display:none !important; }
.hip-notif-panel { display:none; position:absolute; top:52px; right:0; width:380px; max-height:min(620px,75vh); overflow:hidden; z-index:140; border:1px solid var(--hip-border); border-radius:19px; background:var(--hip-surface); color:var(--hip-text); box-shadow:0 18px 48px rgba(12,8,20,.25); animation:slideUp .16s ease both; }
.hip-notif-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 15px 11px; }
.hip-notif-head>div:first-child { display:flex; flex-direction:column; min-width:0; }
.hip-notif-head strong { font:800 16px 'Baloo 2',sans-serif; }
.hip-notif-summary { margin-top:1px; color:var(--hip-text-soft); font-size:10.5px; }
.hip-notif-head-actions { display:flex; gap:6px; }
.hip-notif-head-actions>button { width:32px; height:32px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--hip-border); border-radius:10px; background:transparent; color:var(--hip-text-soft); cursor:pointer; }
.hip-notif-head-actions>button:hover { color:var(--hip-primary); border-color:var(--hip-primary); }
.hip-notif-head-actions .hip-mute-btn-inner { width:16px; height:16px; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:0; }
.hip-notif-tabs { display:flex; gap:4px; margin:0 12px 8px; padding:4px; border-radius:11px; background:var(--hip-bg); }
.hip-notif-tabs button { flex:1; height:31px; border:0; border-radius:8px; background:transparent; color:var(--hip-text-soft); font:700 11px 'Baloo 2',sans-serif; cursor:pointer; }
.hip-notif-tabs button.is-active { background:var(--hip-surface); color:var(--hip-primary); box-shadow:0 1px 4px rgba(20,12,34,.1); }
.hip-notif-list { max-height:440px; padding:2px 8px 6px; overflow-y:auto; overscroll-behavior:contain; }
.hip-notif-item { position:relative; display:flex; align-items:center; min-width:0; border-radius:12px; }
.hip-notif-item:hover { background:var(--hip-pill); }
.hip-notif-item.is-read { opacity:.66; }
.hip-notif-item-link { flex:1; min-width:0; display:flex; align-items:flex-start; gap:10px; padding:10px 35px 10px 9px; color:inherit; text-decoration:none; }
.hip-notif-item-icon { width:34px; height:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--hip-pill); color:var(--hip-primary); }
.hip-notif-item[data-section="admin"] .hip-notif-item-icon { color:var(--hip-danger); }
.hip-notif-item-copy { min-width:0; display:flex; flex-direction:column; padding-top:1px; }
.hip-notif-item-text { font-size:12.5px; line-height:1.38; }
.hip-notif-item-time { margin-top:3px; color:var(--hip-text-soft); font-size:10.5px; }
.hip-notif-item[data-kind="notification"][data-read="0"]::before { content:''; position:absolute; left:2px; top:50%; width:5px; height:5px; transform:translateY(-50%); border-radius:50%; background:var(--hip-primary); }
.hip-notif-delete { position:absolute; top:50%; right:7px; width:27px; height:27px; display:flex; align-items:center; justify-content:center; transform:translateY(-50%); opacity:0; border:0; border-radius:8px; background:transparent; color:var(--hip-text-soft); cursor:pointer; }
.hip-notif-item:hover .hip-notif-delete,.hip-notif-delete:focus-visible { opacity:1; }
.hip-notif-delete:hover { color:var(--hip-danger); background:color-mix(in srgb,var(--hip-danger) 10%,transparent); }
.hip-notif-empty { padding:34px 14px; text-align:center; color:var(--hip-text-soft); font-size:12.5px; }
.hip-notif-footer { padding:8px 12px 11px; border-top:1px solid var(--hip-border); text-align:center; }
.hip-notif-footer button { border:0; background:transparent; color:var(--hip-text-soft); font:700 11px 'Baloo 2',sans-serif; cursor:pointer; }
.hip-notif-footer button:hover { color:var(--hip-danger); }
.hip-notif-panel[data-filter="unread"] .hip-notif-item:not([data-kind="notification"][data-read="0"]),
.hip-notif-panel[data-filter="attention"] .hip-notif-item:not([data-kind="attention"]) { display:none; }
@media(max-width:520px) {
  .hip-notif-panel { position:fixed; left:10px; right:10px; top:auto; bottom:calc(82px + env(safe-area-inset-bottom)); width:auto; max-height:70vh; border-radius:19px; }
  .hip-notif-list { max-height:calc(70vh - 148px); }
  .hip-notif-delete { opacity:.7; }
}

/* ---------- Compact header overflow ---------- */
.hip-main-nav { display:flex; align-items:center; gap:5px; }
.hip-main-nav-link { width:46px; height:46px; flex:0 0 46px; display:flex; align-items:center; justify-content:center; border-radius:14px; color:var(--hip-text-soft); background:transparent; text-decoration:none; transition:color .14s ease,background .14s ease,transform .14s ease,box-shadow .14s ease; }
.hip-main-nav-link svg { display:block; flex:none; transition:transform .14s ease; }
.hip-main-nav-link:hover { color:var(--hip-primary); background:var(--hip-pill); transform:translateY(-1px); }
.hip-main-nav-link:hover svg { transform:scale(1.07); }
.hip-main-nav-link.is-active { color:#fff; background:var(--hip-primary); box-shadow:0 7px 18px color-mix(in srgb,var(--hip-primary) 32%,transparent); }
.hip-main-nav-link.is-active svg { stroke-width:2.25; }
.hip-main-nav-utility { width:42px; height:42px; flex:0 0 42px; display:flex; align-items:center; justify-content:center; border-radius:12px; color:var(--hip-text-soft); text-decoration:none; transition:color .14s ease,background .14s ease,transform .14s ease; }
.hip-main-nav-utility:hover { color:var(--hip-primary,#8B5CF6); background:var(--hip-pill); transform:translateY(-1px); }
.hip-main-nav-utility svg { display:block; flex:none; }
.hip-context-nav-shell { position:sticky; top:74px; z-index:48; display:block; width:100%; max-width:1080px; box-sizing:border-box; margin:16px auto 2px; padding:0 32px; }
.hip-context-nav { width:100%; min-height:60px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:5px; padding:7px 9px; overflow-x:auto; scrollbar-width:none; border:1px solid color-mix(in srgb,var(--hip-border) 82%,var(--hip-primary) 18%); border-radius:17px; background:color-mix(in srgb,var(--hip-surface) 94%,var(--hip-pill) 6%); box-shadow:0 10px 30px rgba(20,12,34,.055),inset 0 1px 0 rgba(255,255,255,.035); }
.hip-context-nav::-webkit-scrollbar { display:none; }
.hip-context-nav-link { position:relative; min-width:0; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:9px; flex:1 1 0; padding:0 13px; border:1px solid transparent; border-radius:11px; color:var(--hip-text-soft); text-decoration:none; white-space:nowrap; font:700 13px 'Baloo 2',sans-serif; transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease; }
.hip-context-nav-link svg { width:18px; height:18px; flex:0 0 18px; opacity:.82; transition:opacity .16s ease,transform .16s ease; }
.hip-context-nav-link:hover { color:var(--hip-text); background:color-mix(in srgb,var(--hip-pill) 70%,transparent); transform:translateY(-1px); }
.hip-context-nav-link:hover svg { opacity:1; transform:scale(1.05); }
.hip-context-nav-link.is-active { color:var(--hip-primary); border-color:color-mix(in srgb,var(--hip-primary) 18%,transparent); background:color-mix(in srgb,var(--hip-pill) 78%,var(--hip-surface) 22%); box-shadow:0 4px 14px color-mix(in srgb,var(--hip-primary) 9%,transparent); }
.hip-context-nav-link.is-active::after { content:''; position:absolute; left:50%; bottom:4px; width:18px; height:2px; transform:translateX(-50%); border-radius:999px; background:var(--hip-primary); opacity:.72; }
.hip-context-nav-link.is-active svg { opacity:1; stroke-width:2.3; }
body.hip-navigation-pending::after { content:''; position:fixed; z-index:1000; top:0; left:0; width:38%; height:2px; border-radius:0 999px 999px 0; background:var(--hip-primary,#8B5CF6); box-shadow:0 0 12px color-mix(in srgb,var(--hip-primary,#8B5CF6) 45%,transparent); pointer-events:none; animation:hipNavigationProgress .7s ease-out forwards; }
@keyframes hipNavigationProgress { from { width:7%; opacity:.65; } to { width:78%; opacity:1; } }
/* Skip layout/paint work for cards far below the viewport. The intrinsic
   placeholder keeps the scrollbar stable until a card approaches view. */
:where(.hip-player-card,.hip-market-card,.hip-gallery-tile,.hip-content-card,.hip-profile-wall-card) { content-visibility:auto; contain-intrinsic-size:auto 190px; }
.hip-profile-wall-card { position:relative; overflow:hidden; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.hip-profile-wall-card::before { content:''; position:absolute; inset:0 auto 0 0; width:2px; background:linear-gradient(180deg,var(--profile-accent,var(--hip-primary,#8B5CF6)),transparent 75%); opacity:0; transition:opacity .16s ease; }
.hip-profile-wall-card:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--profile-accent,var(--hip-primary,#8B5CF6)) 28%,var(--hip-border,#372A4D))!important; box-shadow:0 12px 30px rgba(25,15,42,.09)!important; }
.hip-profile-wall-card:hover::before { opacity:.72; }
.hip-wall-more { transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s ease; }
.hip-wall-more:hover:not(:disabled) { transform:translateY(-1px); border-color:var(--profile-accent,var(--hip-primary,#8B5CF6))!important; color:var(--profile-accent,var(--hip-primary,#8B5CF6))!important; }
.hip-wall-more:disabled { opacity:.55; cursor:wait!important; }
.hip-city-role-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.hip-city-role-chip{display:inline-flex;align-items:center;gap:5px;max-width:160px;padding:2px 7px;border:1px solid color-mix(in srgb,var(--city-role-color,#9B7AE8) 38%,transparent);border-radius:999px;background:color-mix(in srgb,var(--city-role-color,#9B7AE8) 11%,transparent);color:var(--city-role-color,#9B7AE8);font:700 10px 'Baloo 2',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hip-city-role-chip i{width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:currentColor}
.hip-city-role-more{border-style:dashed;color:var(--hip-text-soft);background:transparent;cursor:help}

/* Profile headers: a small number of deliberate actions and achievements.
   Secondary/account-management controls live in one menu instead of forming
   a row of unrelated square buttons beside the nickname. */
.hip-profile-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0}
.hip-profile-action{height:38px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border:0;border-radius:11px;text-decoration:none;white-space:nowrap;font:700 12.5px 'Baloo 2',sans-serif;transition:background-color .15s,color .15s,transform .15s}
.hip-profile-action>svg{width:15px;height:15px;flex:none}
.hip-profile-action-primary{background:var(--profile-accent,var(--hip-primary));color:#fff}
.hip-profile-action-secondary{background:var(--hip-pill);color:var(--hip-text)}
.hip-profile-action-icon{width:38px;padding:0;background:transparent;color:var(--hip-text-soft);border:1px solid var(--hip-border)}
.hip-profile-action-icon:hover{background:var(--hip-pill);color:var(--hip-text)}
.hip-profile-menu-wrap{position:relative}
.hip-profile-menu{display:none;position:absolute;top:46px;right:0;z-index:90;width:230px;box-sizing:border-box;padding:7px;border:1px solid var(--hip-border);border-radius:15px;background:var(--hip-surface);box-shadow:0 18px 42px rgba(16,10,28,.22);animation:slideUp .14s ease both}
.hip-profile-menu-action{width:100%;min-height:42px;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:var(--hip-text);text-align:left;font:600 12.5px 'Inter',sans-serif}
.hip-profile-menu-action:hover{background:var(--hip-bg);transform:none!important}
.hip-profile-menu-action>svg{width:17px;height:17px;flex:none;color:var(--profile-accent,var(--hip-primary))}
.hip-profile-menu-action>span{min-width:0;flex:1}
.hip-profile-menu-action>small{flex:none;color:var(--hip-text-soft);font:700 10.5px 'Baloo 2',sans-serif}
.hip-profile-menu-action.is-danger,.hip-profile-menu-action.is-danger>svg{color:var(--hip-danger)}
.hip-profile-menu-action.is-active>svg{color:var(--profile-accent,var(--hip-primary))}
.hip-profile-menu-divider{height:1px;margin:5px 7px;background:var(--hip-border)}
.hip-profile-menu form{margin:0}
.hip-profile-meta-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:4px;min-height:17px}
.hip-profile-title-inline{color:var(--profile-accent,var(--hip-primary));font:500 11.5px 'Monocraft','Baloo 2',sans-serif;letter-spacing:.01em}
.hip-profile-status-inline{display:inline-flex;align-items:center;gap:5px;color:var(--hip-text-soft);font:500 11.5px 'Inter',sans-serif}
.hip-profile-status-inline>span:first-child{color:var(--profile-accent,var(--hip-primary));font-size:9px}
.hip-profile-badge-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:9px}
.hip-profile-badge{width:30px;height:30px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--badge-color) 17%,var(--hip-border));border-radius:9px;background:color-mix(in srgb,var(--badge-color) 8%,var(--hip-pill));color:var(--badge-color)}
.hip-profile-badge>svg{width:15px;height:15px}
.hip-profile-badges-more{position:relative}
.hip-profile-badges-more>summary{list-style:none;width:30px;height:30px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:1px dashed var(--hip-border);border-radius:9px;background:transparent;color:var(--hip-text-soft);cursor:pointer;font:800 10px 'Baloo 2',sans-serif}
.hip-profile-badges-more>summary::-webkit-details-marker{display:none}
.hip-profile-badges-more[open]>summary{border-style:solid;border-color:var(--profile-accent,var(--hip-primary));background:var(--hip-pill);color:var(--profile-accent,var(--hip-primary))}
.hip-profile-badge-panel{position:absolute;left:0;top:42px;z-index:85;width:250px;box-sizing:border-box;padding:12px;border:1px solid var(--hip-border);border-radius:15px;background:var(--hip-surface);box-shadow:0 18px 42px rgba(16,10,28,.22)}
.hip-profile-badge-panel>strong{display:block;margin:0 0 8px;color:var(--hip-text-soft);font:700 10.5px 'Baloo 2',sans-serif;text-transform:uppercase;letter-spacing:.06em}
.hip-profile-badge-list{display:flex;flex-direction:column;gap:3px;max-height:240px;overflow:auto}
.hip-profile-badge-item{display:flex;align-items:center;gap:9px;padding:7px;border-radius:9px}
.hip-profile-badge-item:hover{background:var(--hip-bg)}
.hip-profile-badge-item>span{width:29px;height:29px;display:flex;align-items:center;justify-content:center;flex:0 0 29px;border-radius:9px;background:color-mix(in srgb,var(--badge-color) 11%,var(--hip-pill));color:var(--badge-color)}
.hip-profile-badge-item b{display:block;color:var(--hip-text);font:700 11.5px 'Baloo 2',sans-serif}
.hip-profile-badge-item small{display:block;margin-top:1px;color:var(--hip-text-soft);font:500 10.5px 'Inter',sans-serif;line-height:1.3}
@media(max-width:620px){.hip-profile-actions{width:100%;justify-content:flex-start}.hip-profile-action-primary,.hip-profile-action-secondary{flex:1}.hip-profile-menu{left:auto;right:0}.hip-profile-badge-panel{left:auto;right:0;width:min(250px,calc(100vw - 56px))}}
@media(prefers-reduced-motion:reduce){.hip-profile-wall-card,.hip-wall-more{transition:none}.hip-profile-wall-card:hover,.hip-wall-more:hover:not(:disabled){transform:none}}
.hip-header-more-wrap { position:relative; }
.hip-header-more-trigger { width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--hip-border); border-radius:13px; background:var(--hip-surface); color:var(--hip-text); cursor:pointer; }
.hip-header-more-trigger svg { display:block; }
.hip-header-more-panel { display:none; position:absolute; top:52px; right:0; z-index:150; width:220px; padding:7px; border:1px solid var(--hip-border); border-radius:15px; background:var(--hip-surface); color:var(--hip-text); box-shadow:0 16px 40px rgba(12,8,20,.22); animation:slideUp .14s ease both; }
.hip-header-more-panel :where(button,a) { width:100%; min-height:42px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:inherit; text-decoration:none; font:600 12.5px 'Inter',sans-serif; cursor:pointer; }
.hip-header-more-panel :where(button,a):hover { background:var(--hip-bg); transform:none; }
.hip-header-more-panel :where(button,a)>span { display:flex; align-items:center; gap:9px; }
.hip-header-more-panel :where(button,a)>span svg { width:17px; height:17px; flex:0 0 17px; color:var(--hip-primary); }
.hip-header-more-panel b,.hip-header-more-panel small { color:var(--hip-text-soft); font:700 10.5px 'Baloo 2',sans-serif; }
@media(max-width:520px) {
  .hip-header-more-panel { position:fixed; top:70px; right:10px; width:min(240px,calc(100vw - 20px)); }
}
.hip-global-messages-loading-panel{width:min(720px,calc(100% - 24px));height:min(80vh,620px);border-radius:22px;padding:20px;box-shadow:0 24px 64px rgba(0,0,0,.25)}
:root[data-theme="dark"] .hip-global-messages-loading-panel{background:#241C33}
:root[data-theme="light"] .hip-global-messages-loading-panel{background:#FFFFFF}
.hip-global-messages-loading-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;font-family:'Baloo 2',sans-serif;font-size:18px}
.hip-messages-loader-dot{width:9px;height:9px;border-radius:50%;background:#a78bfa;box-shadow:0 0 0 5px rgba(167,139,250,.12);animation:pulseDot 1.2s ease-in-out infinite}
.hip-messages-skeleton{height:54px;margin-bottom:10px;border-radius:13px;background:linear-gradient(100deg,rgba(167,139,250,.07) 20%,rgba(167,139,250,.17) 40%,rgba(167,139,250,.07) 60%);background-size:220% 100%;animation:hipMessagesShimmer 1.2s linear infinite}
@keyframes hipMessagesShimmer{to{background-position-x:-220%}}
.hip-dm-chat-heading,.hip-dm-chat-heading *{caret-color:transparent!important;-webkit-user-select:none;user-select:none}
.hip-dm-profile-link:focus{outline:none}
#hip-dm-draft{caret-color:auto;-webkit-user-select:text;user-select:text}

/* Keep native dropdown menus consistent with the active theme. Individual
   feature pages may replace the arrow, but the opened OS menu must never
   fall back to a bright grey rectangle in dark mode. */
:root[data-theme="dark"] select { color-scheme:dark; }
:root[data-theme="light"] select { color-scheme:light; }
:root[data-theme="dark"] select option { background:#241C33; color:#F1EAFB; }
:root[data-theme="light"] select option { background:#FFFFFF; color:#2B1F3D; }
:root[data-theme="dark"] select option:checked { background:#7C5CBF; color:#fff; }
:root[data-theme="light"] select option:checked { background:#8B5CF6; color:#fff; }
#modal-messages,#modal-messages *{caret-color:transparent!important}
#modal-messages #hip-dm-draft{caret-color:var(--hip-primary,#a78bfa)!important;-webkit-user-select:text;user-select:text}
#modal-messages #hip-dm-draft:focus,#modal-messages #hip-dm-draft:focus-visible{border-color:var(--hip-primary,#a78bfa)!important;outline:none!important;outline-offset:0!important;box-shadow:none!important}
/* Wall media spoilers: the media stays in place, so revealing it causes no
   layout jump. The blur is deliberately strong enough that screenshots and
   video frames cannot be guessed through it. */
.hip-post-attachment{position:relative;overflow:hidden;border-radius:14px;margin-top:8px;isolation:isolate}
.hip-post-attachment-media{transition:filter .22s ease,transform .22s ease,opacity .22s ease}
.hip-post-attachment[data-spoiler="1"]:not(.is-revealed){min-height:112px;background:linear-gradient(135deg,rgba(155,122,232,.16),rgba(85,191,163,.1))}
.hip-post-attachment[data-spoiler="1"]:not(.is-revealed) .hip-post-attachment-media{filter:blur(26px) saturate(.65);transform:scale(1.06);opacity:.72;pointer-events:none;user-select:none}
.hip-spoiler-reveal{display:none;position:absolute;inset:0;z-index:2;width:100%;border:0;background:rgba(24,17,36,.38);color:#fff;cursor:pointer;align-items:center;justify-content:center;gap:10px;padding:18px;font-family:'Baloo 2',sans-serif;text-shadow:0 1px 8px rgba(0,0,0,.28)}
.hip-post-attachment[data-spoiler="1"]:not(.is-revealed)>.hip-spoiler-reveal{display:flex}
.hip-spoiler-reveal span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.hip-spoiler-reveal strong{font-size:13px;font-weight:800}.hip-spoiler-reveal small{margin-top:3px;font-size:10.5px;font-weight:500;opacity:.82}
.hip-post-attachment.is-revealed .hip-post-attachment-media{filter:none;transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.hip-post-attachment-media{transition:none}}
div[id^="hip-post-"]:target{animation:hipPostTarget 1.8s ease-out}
div[id^="hip-feed-post-"]:target{animation:hipPostTarget 1.8s ease-out}
@keyframes hipPostTarget{0%,28%{box-shadow:0 0 0 3px rgba(155,122,232,.58),0 10px 30px rgba(43,31,61,.14)}100%{box-shadow:none}}
@media(prefers-reduced-motion:reduce){div[id^="hip-post-"]:target,div[id^="hip-feed-post-"]:target{animation:none;outline:2px solid rgba(155,122,232,.58);outline-offset:2px}}

/* ---------- 2026 UI consistency pass ---------- */
html { scrollbar-gutter:stable; }
body { accent-color:var(--hip-primary,#8B5CF6); scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--hip-primary,#8B5CF6) 42%,var(--hip-border,#372A4D)) transparent; }
body::-webkit-scrollbar,.hip-scroll::-webkit-scrollbar { width:9px; height:9px; }
body::-webkit-scrollbar-track,.hip-scroll::-webkit-scrollbar-track { background:transparent; }
body::-webkit-scrollbar-thumb,.hip-scroll::-webkit-scrollbar-thumb { border:3px solid transparent; border-radius:999px; background-clip:padding-box; background-color:color-mix(in srgb,var(--hip-primary,#8B5CF6) 42%,var(--hip-border,#372A4D)); }
.hip-scroll { scrollbar-width:thin!important; scrollbar-color:color-mix(in srgb,var(--hip-primary,#8B5CF6) 42%,var(--hip-border,#372A4D)) transparent!important; }
::selection { background:color-mix(in srgb,var(--hip-primary,#8B5CF6) 32%,transparent); color:var(--hip-text,inherit); }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),select,textarea) { min-height:42px; color:var(--hip-text,inherit); caret-color:var(--hip-primary,#8B5CF6); }
:where(input,textarea)::placeholder { color:var(--hip-text-soft,#8C8298); opacity:.72; }
:where(input,textarea,select):disabled { opacity:.58; cursor:not-allowed; }
select:not([multiple]) { cursor:pointer; }
:where(input,textarea,select):focus-visible { outline:none!important; border-color:var(--hip-primary,#8B5CF6)!important; box-shadow:none!important; }
#modal-messages #hip-dm-draft:focus-visible { box-shadow:none!important; }
.hip-modal-panel { border:1px solid var(--hip-border,rgba(139,92,246,.18)); color:var(--hip-text,inherit); box-shadow:0 24px 70px rgba(13,8,24,.32),0 2px 10px rgba(13,8,24,.12); }
.hip-modal-backdrop { background:rgba(10,7,16,.62); backdrop-filter:blur(5px); }
.hip-content-card:hover { transform:none; box-shadow:0 11px 28px rgba(25,15,42,.075); }
:where(a,button).hip-content-card:hover,.hip-market-card:hover,.hip-player-card:hover { transform:translateY(-1px); }
.hip-admin-panel,.hip-bank-audit-card { border-radius:18px!important; }
.hip-admin-panel > h2,.hip-content-card > h2 { line-height:1.2; letter-spacing:-.01em; }
.hip-admin-panel :where(input,select,textarea) { min-height:42px; }
.hip-admin-empty,.hip-bank-player-empty,.hip-court-player-empty { border-radius:11px; line-height:1.45; }
.hip-market-card { border-radius:16px!important; padding:14px!important; box-shadow:0 7px 20px rgba(25,15,42,.055); }
.hip-market-card:hover { border-color:color-mix(in srgb,var(--hip-primary,#8B5CF6) 30%,var(--hip-border,#372A4D))!important; box-shadow:0 13px 30px rgba(25,15,42,.1); }
.hip-market-card-media { border-radius:12px!important; }
.hip-market-card-seller { transition:color .14s ease; }
.hip-market-card-seller:hover { color:var(--hip-primary,#8B5CF6)!important; filter:none; }
.market-editor { border-radius:20px!important; }
.hip-market-toolbar { border-radius:16px!important; padding:14px!important; box-shadow:0 8px 24px rgba(25,15,42,.055); }
.hip-market-search input,.hip-market-select,.hip-market-create { border-radius:11px!important; }
.hip-market-segment { padding:4px!important; border-radius:11px!important; }
.hip-market-segment button { border-radius:8px!important; }
.market-editor :where(input,select,textarea),.market-editor-footer button { border-radius:11px!important; }
.hip-market-empty { border-radius:16px!important; }
.hip-court-segment { padding:4px!important; border-radius:11px!important; }
.hip-court-segment button { border-radius:8px!important; }
.hip-court-sort { border-radius:11px!important; }
.hip-content-empty { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.5; }
.hip-home-card-cta { display:inline-flex; align-items:center; min-height:36px; }
@media(max-width:620px) {
  .hip-footer-links a,.hip-home-card-cta { min-height:42px; display:inline-flex; align-items:center; }
}
@media (prefers-contrast:more) { .hip-content-card,.hip-admin-panel,.hip-modal-panel { border-width:2px!important; } :where(input,textarea,select):focus-visible { box-shadow:0 0 0 3px var(--hip-primary,#8B5CF6)!important; } }