/* Premium component layer. Loaded after the legacy feature sheet so every
   existing page receives the same geometry without changing its behavior. */
html { background: var(--color-canvas); }
body {
  color: var(--color-text);
  font-family: var(--font-body);
  background: var(--gradient-atmosphere);
  letter-spacing: -0.005em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
a { color: var(--color-amber); }
a:hover { color: #f1c474; }
*:focus-visible { outline: 1px solid var(--color-ember-light); outline-offset: 3px; }
::selection { background: rgba(228,95,58,.38); color: #fff; }

.wrap { width: min(var(--content-width), calc(100% - 2.5rem)); }
.main-wrap { width: min(var(--content-width), calc(100% - 2.5rem)); padding: 1.65rem 0 4rem; }

.topbar {
  height: 64px;
  border-bottom: 1px solid rgba(240,231,220,.09);
  background: linear-gradient(180deg, rgba(16,16,23,.94), rgba(9,10,15,.9));
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  backdrop-filter: blur(22px) saturate(1.15);
}
.topbar::after {
  height: 1px;
  bottom: -1px;
  opacity: .55;
  background: linear-gradient(90deg, transparent 4%, rgba(142,99,216,.2) 24%, rgba(215,83,121,.55) 52%, rgba(228,95,58,.2) 78%, transparent 96%);
}
.topbar-inner { gap: 1.35rem; }
.brand { font-weight: 720; letter-spacing: .045em; text-transform: none; }
.brand-with-logo { gap: .68rem; }
.brand-text > span {
  color: inherit;
  background: var(--gradient-ember);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-logo-wrap { width: 38px; height: 38px; }
.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(228,95,58,.42)) drop-shadow(0 -5px 12px rgba(231,169,67,.13));
  animation: brand-breathe 4.2s ease-in-out infinite;
}
.brand-logo-wrap::before {
  inset: auto 9% -2px;
  height: 38%;
  background: radial-gradient(ellipse, rgba(228,95,58,.52), transparent 68%);
  filter: blur(7px);
  animation: ember-bed 3.8s ease-in-out infinite;
}
.brand-logo-wrap::after { display: none; }
.brand-embers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.brand-embers i {
  position: absolute;
  bottom: 5px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--color-amber);
  opacity: 0;
  box-shadow: 0 0 5px rgba(231,169,67,.8);
  animation: ember-rise 3.4s ease-out infinite;
}
.brand-embers i:nth-child(1) { left: 10px; animation-delay: .2s; }
.brand-embers i:nth-child(2) { left: 22px; animation-delay: 1.4s; }
.brand-embers i:nth-child(3) { left: 29px; animation-delay: 2.4s; }
@keyframes brand-breathe { 50% { filter: drop-shadow(0 0 10px rgba(228,95,58,.58)) drop-shadow(0 -6px 13px rgba(231,169,67,.2)); } }
@keyframes ember-bed { 50% { opacity: .82; transform: scaleX(1.12); } }
@keyframes ember-rise { 0% { opacity: 0; transform: translateY(0) scale(.8); } 18% { opacity: .8; } 72% { opacity: .22; } 100% { opacity: 0; transform: translateY(-22px) translateX(4px) scale(.35); } }

.topnav { gap: .18rem; }
.topnav a {
  position: relative;
  padding: .52rem .68rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: .86rem;
  font-weight: 590;
}
.topnav a:hover { color: var(--color-text); background: rgba(255,255,255,.025); border-color: var(--color-line); }
.topnav a.is-active {
  color: var(--color-text);
  border-color: rgba(228,95,58,.22);
  background: linear-gradient(135deg, rgba(142,99,216,.1), rgba(228,95,58,.075));
  box-shadow: 0 1px rgba(255,255,255,.035) inset;
}
.topnav a.is-active::after {
  content: "";
  position: absolute;
  left: 24%; right: 24%; bottom: -9px; height: 1px;
  background: var(--gradient-ember);
  box-shadow: 0 0 8px rgba(228,95,58,.7);
}
.topsearch input {
  min-width: 180px;
  background: rgba(5,6,9,.52);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}
.topsearch input:focus { border-color: rgba(228,95,58,.45); box-shadow: var(--shadow-focus); }
.icon-btn, .avatar-btn {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.icon-btn:hover, .avatar-btn:hover, .menu.open > .icon-btn, .menu.open > .avatar-btn {
  border-color: var(--color-line);
  background: rgba(255,255,255,.035);
}
.icon-link { display: inline-flex; color: var(--color-muted); }

.dropdown {
  padding: 6px;
  border: 1px solid rgba(240,231,220,.11);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(26,21,33,.98), rgba(12,13,18,.99));
  box-shadow: 0 24px 70px rgba(0,0,0,.54), 0 1px rgba(255,255,255,.04) inset;
}
.dropdown-item, button.dropdown-item {
  min-height: 38px;
  width: 100%;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dropdown-item:hover { background: var(--gradient-ember-soft); color: #fff; }
.dropdown-form { margin: 0; }
.dropdown-sep { background: var(--color-line); }

.panel, .node-block, .data-card, .product-card, .conversation-message, .trophy-card {
  border: 1px solid var(--color-line);
  background: var(--gradient-panel);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(10px);
}
.panel, .product-card, .conversation-message, .trophy-card { border-radius: var(--radius-lg); }
.node-block, .data-card { border-radius: var(--radius-lg); overflow: hidden; }
.panel { padding: 1.25rem 1.35rem; }
.panel::before, .product-card::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0 14% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,169,67,.28), rgba(228,95,58,.34), transparent);
}
.panel, .product-card { position: relative; }

.node-cat {
  padding: .78rem 1.05rem;
  color: #e8c08c;
  background: linear-gradient(100deg, rgba(142,99,216,.13), rgba(215,83,121,.075) 45%, rgba(12,13,18,.2));
  border-bottom: 1px solid rgba(142,99,216,.19);
  font-size: .7rem;
  letter-spacing: .17em;
}
.node-row { border-top-color: rgba(240,231,220,.055); }
.node-row:hover { background: linear-gradient(100deg, rgba(142,99,216,.06), rgba(228,95,58,.035)); }
.node-icon {
  border: 1px solid rgba(142,99,216,.24);
  background: linear-gradient(145deg, rgba(142,99,216,.18), rgba(228,95,58,.09));
  box-shadow: 0 0 0 3px rgba(142,99,216,.04), 0 8px 22px rgba(0,0,0,.22);
}
.node-title, .tr-title { font-weight: 650; }

.page-hero { margin: .3rem 0 1.35rem; }
.page-hero-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.page-title { color: var(--color-text); font-weight: 720; letter-spacing: -.035em; }
.page-lead { max-width: 690px; margin: .4rem 0 0; color: var(--color-muted); }
.eyebrow, .section-label {
  display: block;
  margin: 0 0 .45rem;
  color: #c2a9eb;
  font-size: .68rem;
  font-weight: 720;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.crumbs { color: #7f7872; }
.crumbs a { color: #938982; }

.form-stack { gap: .92rem; }
.form-stack label { color: var(--color-text-soft); font-size: .82rem; font-weight: 570; }
.form-stack input, .form-stack textarea, .form-stack select,
.search-page-form input, .compact-form input {
  border: 1px solid rgba(240,231,220,.12);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(5,6,9,.62), rgba(10,11,16,.66));
  color: var(--color-text);
  box-shadow: 0 1px rgba(255,255,255,.025) inset;
}
.form-stack input:hover, .form-stack textarea:hover, .form-stack select:hover { border-color: rgba(240,231,220,.19); }
.form-stack input:focus, .form-stack textarea:focus, .form-stack select:focus,
.search-page-form input:focus, .compact-form input:focus {
  outline: 0;
  border-color: rgba(228,95,58,.62);
  background: rgba(7,8,12,.85);
  box-shadow: var(--shadow-focus), 0 1px rgba(255,255,255,.03) inset;
}
.btn {
  min-height: 40px;
  padding: .62rem 1.08rem;
  border: 1px solid rgba(245,190,126,.38);
  border-radius: var(--radius-sm);
  background: var(--gradient-ember);
  color: #170d09;
  font-weight: 740;
  box-shadow: 0 1px rgba(255,255,255,.24) inset, 0 9px 24px rgba(143,55,31,.22);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}
.btn:hover {
  color: #100a07;
  filter: saturate(1.06) brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 1px rgba(255,255,255,.3) inset, 0 13px 30px rgba(143,55,31,.3);
}
.btn:active { transform: translateY(0); box-shadow: 0 1px rgba(255,255,255,.18) inset, 0 4px 12px rgba(0,0,0,.28); }
.btn:disabled { cursor: not-allowed; filter: grayscale(.45); opacity: .45; transform: none; }
.btn-ghost {
  color: var(--color-text-soft);
  border-color: rgba(240,231,220,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  box-shadow: 0 1px rgba(255,255,255,.025) inset;
}
.btn-ghost:hover { color: #fff; border-color: rgba(228,95,58,.34); background: var(--gradient-ember-soft); }
.btn-small, .btn-tiny { min-height: 34px; padding: .43rem .72rem; font-size: .78rem; }
.btn-block { width: 100%; }
.form-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.draft-status { color: var(--color-muted); font-size: .75rem; }

.gate-page {
  background: radial-gradient(circle at 50% 12%, rgba(102,87,78,.11), transparent 34%), radial-gradient(circle at 20% 92%, rgba(61,57,66,.1), transparent 30%), linear-gradient(155deg, #0b0c11, #07080b 64%, #050609);
}
.gate-page::before { opacity: .12; }
.gate-page .main-wrap { width: 100%; padding: 0; }
.gate { min-height: 100svh; padding: 2rem 1.2rem; }
.gate-brand {
  margin-bottom: 1.35rem;
  color: #e9e3dc;
  font-size: clamp(2.2rem, 6vw, 3.65rem);
  font-weight: 690;
  letter-spacing: -.045em;
  text-transform: none;
}
.gate-brand span { color: #a69e96; }
.gate-card {
  width: min(400px, 100%);
  padding: 1.4rem;
  border-color: rgba(240,231,220,.11);
  background: linear-gradient(150deg, rgba(22,23,30,.94), rgba(11,12,17,.97));
  box-shadow: 0 28px 80px rgba(0,0,0,.45), 0 1px rgba(255,255,255,.035) inset;
}
.gate-card::before { background: linear-gradient(90deg, transparent, rgba(207,197,188,.18), transparent); }
.gate-card-head h1 { margin: 0 0 1.1rem; font-size: 1.25rem; letter-spacing: -.02em; }
.gate-card .section-label { color: #8e8780; }
.gate-alt { margin: 1rem 0 0; text-align: center; font-size: .82rem; }
.gate-alt a { color: #aaa29a; }

.notice { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-text-soft); }
.notice-warn { border-color: rgba(231,169,67,.3); background: linear-gradient(110deg, rgba(231,169,67,.08), rgba(228,95,58,.035)); }
.messages li { border-radius: var(--radius-sm); background: var(--gradient-panel); }

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.product-card { padding: 1.35rem; overflow: hidden; }
.product-card h2 { margin: 0; font-size: 1.28rem; }
.product-card-head p, .product-description { color: var(--color-muted); }
.product-description { margin: .8rem 0; font-size: .9rem; }
.product-description p { margin: .35rem 0; }
.plan-list { display: grid; gap: .55rem; margin-top: 1rem; }
.plan-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .82rem; border: 1px solid rgba(240,231,220,.08); border-radius: var(--radius-sm); background: rgba(255,255,255,.018); }
.plan-row > div:first-child { display: grid; gap: .18rem; }
.plan-row span { color: var(--color-muted); font-size: .78rem; }
.plan-buy { display: flex; align-items: center; gap: .85rem; }
.plan-buy form { margin: 0; }
.plan-price { color: var(--color-text) !important; font-size: .94rem !important; font-weight: 700; white-space: nowrap; }

.data-card { margin: 1rem 0; }
.data-list { display: grid; }
.data-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 1rem; min-height: 68px; padding: .8rem 1rem; border-top: 1px solid rgba(240,231,220,.065); color: var(--color-text); }
.data-row:first-child { border-top: 0; }
.data-row:hover { background: var(--gradient-ember-soft); color: #fff; }
.data-row > div { display: grid; gap: .18rem; }
.data-row > div span, .data-row > time { color: var(--color-muted); font-size: .8rem; }
.card-header { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--color-line); background: rgba(255,255,255,.018); }
.card-header h2 { margin: 0; font-size: .9rem; }
.empty-state { padding: 1.6rem; color: var(--color-muted); text-align: center; }
.status-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 27px; padding: .26rem .56rem; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-muted); font-size: .69rem; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }
.status-settled { color: #72d8a6; border-color: rgba(55,209,141,.28); background: rgba(55,209,141,.07); }
.status-pending, .status-created { color: #e5b963; border-color: rgba(231,169,67,.28); background: rgba(231,169,67,.07); }
.status-invalid, .status-canceled, .status-expired { color: #e7858d; border-color: rgba(255,65,82,.25); background: rgba(255,65,82,.055); }

.detail-grid, .split-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(290px,.65fr); gap: 1rem; align-items: start; }
.detail-list { margin: 0 0 1rem; }
.detail-list > div { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--color-line); }
.detail-list dt { color: var(--color-muted); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.subtle-panel { color: var(--color-muted); }
.subtle-panel h2 { color: var(--color-text); }

.conversation-list { margin: 0; }
.conversation-row { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-top: 1px solid var(--color-line); color: var(--color-text); }
.conversation-row:first-child { border-top: 0; }
.conversation-row:hover { background: var(--gradient-ember-soft); }
.conversation-row > div { display: grid; gap: .2rem; }
.conversation-row span, .conversation-row time { color: var(--color-muted); font-size: .78rem; }
.compose-card { margin: 0; }
.conversation-messages { display: grid; gap: .75rem; margin: 1rem 0; }
.conversation-message { padding: 1rem; }
.conversation-message > header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; padding-bottom: .55rem; border-bottom: 1px solid var(--color-line); }
.conversation-message time { color: var(--color-muted); font-size: .75rem; }
.attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .55rem; margin-top: .9rem; }
.attachment-grid a { display: block; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: #08090c; }
.attachment-grid img { display: block; width: 100%; height: 150px; object-fit: cover; }
.file-field input { padding: .55rem !important; }
.file-field > span { color: var(--color-muted); font-size: .72rem; }

.activity-feed { display: grid; gap: .65rem; }
.activity-row { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .8rem; padding: .9rem 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: rgba(17,19,26,.72); }
.activity-row p { margin: .32rem 0; color: var(--color-text-soft); }
.trophy-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; }
.trophy-card { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: .85rem; padding: 1rem; opacity: .58; }
.trophy-card.is-earned { opacity: 1; border-color: rgba(142,99,216,.28); background: linear-gradient(145deg, rgba(37,30,53,.82), rgba(17,19,26,.96)); }
.trophy-card h2 { margin: 0; font-size: 1rem; }
.trophy-card p { margin: .3rem 0; color: var(--color-muted); font-size: .84rem; }
.trophy-card span { color: #c2a9eb; font-size: .72rem; }
.trophy-mark { width: 42px; height: 42px; border: 1px solid rgba(142,99,216,.3); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(215,83,121,.2), rgba(142,99,216,.08) 48%, transparent 50%); box-shadow: 0 0 20px rgba(142,99,216,.12); }

.moderation-list { display: grid; }
.moderation-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.65fr); gap: 1rem; padding: 1rem; border-top: 1px solid var(--color-line); }
.moderation-row:first-child { border-top: 0; }
.moderation-row p { margin: .35rem 0; }
.compact-form { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.compact-form input { flex: 1 1 160px; min-height: 36px; padding: .45rem .62rem; }

.poll-card { margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid rgba(142,99,216,.2); border-radius: var(--radius-md); background: linear-gradient(130deg, rgba(142,99,216,.075), rgba(17,19,26,.88)); }
.poll-card h2 { margin: 0 0 .8rem; font-size: 1rem; }
.poll-options { display: grid; gap: .45rem; }
.poll-option { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.tag-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }
.tag { padding: .2rem .46rem; border: 1px solid rgba(142,99,216,.22); border-radius: 999px; color: #bca7df; background: rgba(142,99,216,.05); font-size: .7rem; }
.moderation-tools { margin: .8rem 0; padding: .8rem; border: 1px solid rgba(228,95,58,.2); border-radius: var(--radius-md); background: rgba(228,95,58,.035); }
.moderation-tools summary { cursor: pointer; color: #c2a9eb; font-weight: 650; }
.moderation-tool-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin-top: .75rem; }

.avatar-wrap .avatar { width: 100%; height: 100%; }
.avatar-size-28 { width: 28px; height: 28px; font-size: 12px; }
.avatar-size-30 { width: 30px; height: 30px; font-size: 13px; }
.avatar-size-32 { width: 32px; height: 32px; font-size: 13px; }
.avatar-size-36 { width: 36px; height: 36px; font-size: 15px; }
.avatar-size-40 { width: 40px; height: 40px; font-size: 17px; }
.avatar-size-44 { width: 44px; height: 44px; font-size: 18px; }
.avatar-size-48 { width: 48px; height: 48px; font-size: 20px; }
.avatar-size-64 { width: 64px; height: 64px; font-size: 27px; }
.avatar-size-72 { width: 72px; height: 72px; font-size: 30px; }
.avatar-size-96 { width: 96px; height: 96px; font-size: 40px; }
.avatar-size-128 { width: 128px; height: 128px; font-size: 54px; }
.avatar-tone-0 { background: linear-gradient(145deg,#9b4938,#5d2334); }
.avatar-tone-1 { background: linear-gradient(145deg,#aa603c,#663b34); }
.avatar-tone-2 { background: linear-gradient(145deg,#9c713f,#5f4731); }
.avatar-tone-3 { background: linear-gradient(145deg,#7a7740,#454c30); }
.avatar-tone-4 { background: linear-gradient(145deg,#477b5b,#29483e); }
.avatar-tone-5 { background: linear-gradient(145deg,#39766f,#29464f); }
.avatar-tone-6 { background: linear-gradient(145deg,#3f6c84,#2d3c58); }
.avatar-tone-7 { background: linear-gradient(145deg,#536291,#343651); }
.avatar-tone-8 { background: linear-gradient(145deg,#6a5591,#44334f); }
.avatar-tone-9 { background: linear-gradient(145deg,#81517c,#4e3048); }
.avatar-tone-10 { background: linear-gradient(145deg,#915164,#55313d); }
.avatar-tone-11 { background: linear-gradient(145deg,#96503f,#57312d); }
.profile-banner { overflow: hidden; }
.profile-banner-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-banner-fallback { position: absolute; inset: 0; opacity: .72; }

.announce-green { --announce-accent: #37d18d; }
.announce-yellow { --announce-accent: #e7a943; }
.announce-red { --announce-accent: #e85b66; }
.announce-blue { --announce-accent: #609bd8; }
.announce-accent { --announce-accent: #e45f3a; }
.announce-custom { --announce-accent: #e45f3a; }
.role-swatch { display: inline-block; width: 10px; height: 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }

/* Shared layout utilities replace CSP-incompatible inline declarations. */
.native-emoji { display: inline-block; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; line-height: 1; vertical-align: -.08em; }
.bb-color-white { color: #f6f1eb; }
.bb-color-gray { color: var(--color-muted); }
.bb-color-red { color: #e85b66; }
.bb-color-ember { color: var(--color-ember-light); }
.bb-color-amber { color: var(--color-amber); }
.bb-color-green { color: #60dba0; }
.bb-color-blue { color: #78afe7; }
.bb-color-violet { color: #ac8ce4; }
.bb-color-rose { color: #e17798; }
.bb-size-1 { font-size: .7em; }
.bb-size-2 { font-size: .85em; }
.bb-size-3 { font-size: 1em; }
.bb-size-4 { font-size: 1.15em; }
.bb-size-5 { font-size: 1.35em; }
.bb-size-6 { font-size: 1.6em; }
.bb-size-7 { font-size: 2em; }
.auth-state-card { width: min(480px, 100%); margin: 3rem auto; text-align: center; }
.auth-state-title { margin: 0 0 .5rem; font-family: var(--font-display); }
.hero-compact { padding-top: 2rem; padding-bottom: 1rem; }
.hero-compact h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.actions-centered { justify-content: center; margin-top: 1.5rem; }
.space-top-xs { margin-top: .5rem !important; }
.space-top-sm { margin-top: .75rem !important; }
.space-top-md { margin-top: 1rem !important; }
.space-top-lg { margin-top: 1.25rem !important; }
.space-top-xl { margin-top: 1.5rem !important; }
.space-bottom-md { margin-bottom: 1rem !important; }
.text-danger { color: var(--danger) !important; }
.title-reset { margin: 0 !important; }
.toolbar-spaced { margin-bottom: 1rem; }
.form-separated { margin-top: 1.25rem; }
.loader-build-fill.is-complete { width: 100%; }
.inline-action-form { margin: -.45rem 0 .2rem; }
.link-button { padding: 0; border: 0; background: transparent; color: var(--color-amber); font: inherit; cursor: pointer; }
.link-button:hover { color: var(--color-text); text-decoration: underline; }
.link-button:focus-visible { outline: 2px solid var(--color-ember); outline-offset: 3px; border-radius: 2px; }

.ic-bookmark, .ic-eye, .ic-trophy { display: inline-block; width: 16px; height: 16px; background: currentColor; opacity: .8; }
.ic-bookmark { clip-path: polygon(18% 5%,82% 5%,82% 95%,50% 72%,18% 95%); }
.ic-eye { clip-path: polygon(0 50%,18% 24%,50% 12%,82% 24%,100% 50%,82% 76%,50% 88%,18% 76%); }
.ic-trophy { clip-path: polygon(18% 5%,82% 5%,78% 44%,62% 62%,57% 72%,75% 78%,75% 94%,25% 94%,25% 78%,43% 72%,38% 62%,22% 44%); }

@media (max-width: 1160px) {
  .topnav a { padding-inline: .52rem; }
  .topsearch { display: none; }
  .product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .topbar { height: auto; min-height: 60px; }
  .topbar-inner { min-height: 60px; flex-wrap: wrap; padding-block: .55rem; }
  .topnav { order: 3; width: 100%; overflow-x: auto; padding-bottom: .1rem; }
  .topnav a { white-space: nowrap; }
  .topnav a.is-active::after { bottom: -3px; }
  .split-layout, .detail-grid { grid-template-columns: 1fr; }
  .trophy-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .wrap, .main-wrap { width: min(100% - 1.1rem, var(--content-width)); }
  .brand-text, .avatar-name { display: none; }
  .topuser { gap: .25rem; }
  .page-hero-split { align-items: flex-start; flex-direction: column; }
  .data-row { grid-template-columns: 1fr; gap: .5rem; }
  .plan-row, .plan-buy { align-items: flex-start; flex-direction: column; }
  .plan-buy { width: 100%; }
  .plan-buy form, .plan-buy .btn { width: 100%; }
  .moderation-row { grid-template-columns: 1fr; }
  .moderation-tool-grid, .trophy-grid { grid-template-columns: 1fr; }
  .detail-list > div { grid-template-columns: 1fr; gap: .2rem; }
  .attachment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .brand-embers { display: none; }
}