/* RhexPHP base styles — tokens mirror the original globals.css (HSL triplets). */

:root {
    --background: 0 0% 100%;
    --foreground: 0 0% 8%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 8%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 8%;
    --primary: 0 0% 12%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 12%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 42%;
    --accent: 0 0% 94%;
    --accent-foreground: 0 0% 12%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 88%;
    --input: 0 0% 88%;
    --ring: 0 0% 24%;
    --radius: 1rem;
    --shadow-soft: 0 14px 44px rgba(15, 23, 42, 0.08);
    --font-sans: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

[data-theme='dark'] {
    --background: 0 0% 0%;
    --foreground: 0 0% 96%;
    --card: 0 0% 8%;
    --card-foreground: 0 0% 96%;
    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 96%;
    --primary: 0 0% 96%;
    --primary-foreground: 0 0% 10%;
    --secondary: 0 0% 14%;
    --secondary-foreground: 0 0% 96%;
    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 68%;
    --accent: 0 0% 16%;
    --accent-foreground: 0 0% 96%;
    --destructive: 0 72% 52%;
    --destructive-foreground: 0 0% 96%;
    --border: 0 0% 22%;
    --input: 0 0% 22%;
    --ring: 0 0% 72%;
    --shadow-soft: 0 14px 44px rgba(0, 0, 0, 0.5);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    border-color: hsl(var(--border));
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.3;
    font-weight: 700;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 10px 16px;
    z-index: 100;
}

.skip-link:focus {
    left: 8px;
    top: 8px;
}

.text-muted {
    color: hsl(var(--muted-foreground));
}

/* ---------- header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: hsl(var(--background) / 0.88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid hsl(var(--border));
}

.site-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.brand:hover {
    text-decoration: none;
}

.brand__mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 800;
}

.brand__text {
    font-size: 16px;
    white-space: nowrap;
}

.site-nav {
    display: flex;
    gap: 4px;
    flex: 1;
}

.site-nav__link {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 14px;
    color: hsl(var(--muted-foreground));
}

.site-nav__link:hover {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    text-decoration: none;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid hsl(var(--border));
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

.icon-btn:hover {
    background: hsl(var(--muted));
}

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.btn:hover {
    text-decoration: none;
}

.btn--primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn--primary:hover {
    background: hsl(var(--primary) / 0.86);
}

.btn--ghost {
    background: transparent;
    border-color: hsl(var(--border));
    color: inherit;
}

.btn--ghost:hover {
    background: hsl(var(--muted));
}

.btn--sm {
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
}

.btn--block {
    width: 100%;
}

/* ---------- account menu ---------- */

.account-menu {
    position: relative;
}

.account-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px 0 4px;
    border-radius: 999px;
    border: 1px solid hsl(var(--border));
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.account-menu__name {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 168px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--popover));
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-menu__panel[hidden] {
    display: none;
}

.account-menu__panel a,
.account-menu__logout {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.account-menu__panel a:hover,
.account-menu__logout:hover {
    background: hsl(var(--muted));
    text-decoration: none;
}

.avatar {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    font-weight: 700;
}

.avatar--sm {
    width: 26px;
    height: 26px;
    font-size: 12px;
}

/* ---------- layout ---------- */

.site-main {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 56px;
}

.site-footer {
    border-top: 1px solid hsl(var(--border));
    background: hsl(var(--card));
}

.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

/* ---------- home ---------- */

.hero {
    padding: 24px 0 32px;
}

.hero__title {
    font-size: 34px;
    letter-spacing: -0.02em;
}

.hero__lead {
    margin: 12px 0 0;
    max-width: 640px;
    color: hsl(var(--muted-foreground));
}

.hero__stats {
    margin-top: 18px;
    display: flex;
    gap: 24px;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

.hero__stats strong {
    color: hsl(var(--foreground));
    font-size: 15px;
}

.panel {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
    overflow: hidden;
}

.panel__head {
    padding: 16px 20px;
    border-bottom: 1px solid hsl(var(--border));
}

.panel__title {
    font-size: 15px;
}

.panel__body {
    padding: 8px;
}

.board-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.board-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
}

.board-list__item:hover {
    background: hsl(var(--muted));
}

.board-list__link {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.board-list__link:hover {
    text-decoration: none;
}

.board-list__name {
    font-weight: 600;
}

.board-list__desc {
    font-size: 13px;
    color: hsl(var(--muted-foreground));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-list__count {
    font-size: 13px;
    color: hsl(var(--muted-foreground));
    font-variant-numeric: tabular-nums;
}

.empty {
    padding: 28px 12px;
    text-align: center;
    color: hsl(var(--muted-foreground));
    margin: 0;
}

/* ---------- auth ---------- */

.auth-page {
    min-height: 60vh;
    display: grid;
    place-items: center;
    padding: 24px 0;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    padding: 30px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
    box-shadow: var(--shadow-soft);
}

.auth-card__title {
    font-size: 24px;
}

.auth-card__lead {
    margin: 8px 0 22px;
    color: hsl(var(--muted-foreground));
    font-size: 14px;
}

.auth-card__foot {
    margin: 18px 0 0;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
    text-align: center;
}

.auth-card__foot a {
    color: hsl(var(--foreground));
    font-weight: 600;
}

/* ---------- forms ---------- */

.form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field__label {
    font-size: 13px;
    font-weight: 600;
}

.input {
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid hsl(var(--input));
    background: hsl(var(--background));
    color: inherit;
    font: inherit;
    font-size: 14px;
}

.input:focus {
    outline: 2px solid hsl(var(--ring) / 0.25);
    border-color: hsl(var(--ring));
}

.alert {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
}

.alert--error {
    background: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
}

.flash {
    max-width: 1200px;
    margin: 12px auto 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}

.flash--error {
    background: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
}

/* ---------- errors ---------- */

.error-page {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.error-page__code {
    font-size: 64px;
    letter-spacing: -0.04em;
}

.error-page__text {
    margin: 0;
    color: hsl(var(--muted-foreground));
}

/* ---------- auth forms (extended) ---------- */

.auth-page--wide {
    align-items: start;
}

.auth-card--wide {
    max-width: 520px;
}

.field__required {
    color: hsl(var(--destructive));
    font-style: normal;
}

.field__hint {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.field__hint--error {
    color: hsl(var(--destructive));
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.06em;
}

.notice {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--secondary));
    font-size: 13px;
}

.form-section {
    margin: 4px 0 0;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid hsl(var(--border));
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-section__legend {
    padding: 0;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}

.input-group {
    display: flex;
    gap: 8px;
}

.input-group .input {
    flex: 1;
    min-width: 0;
}

.input-group .btn {
    height: 40px;
    flex: none;
    white-space: nowrap;
}

.radio-row {
    display: flex;
    gap: 8px;
}

.radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
}

.radio input {
    accent-color: hsl(var(--primary));
    margin: 0;
}

.segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: hsl(var(--muted));
    gap: 3px;
    align-self: flex-start;
}

.segmented__item {
    padding: 6px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: hsl(var(--muted-foreground));
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.segmented__item.is-active {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.form-link {
    color: hsl(var(--muted-foreground));
}

.form-link:hover {
    color: hsl(var(--foreground));
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: hsl(var(--border));
}

.oauth-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.oauth-row .btn {
    flex: 1;
    min-width: 112px;
}

.muted-small {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

/* ---------- captcha ---------- */

.captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.captcha-image {
    height: 44px;
    border-radius: 10px;
    border: 1px solid hsl(var(--border));
    cursor: pointer;
    flex: none;
}

.captcha-row .input {
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* ---------- forum ---------- */

.page-title {
    font-size: 24px;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}

.page-lead {
    margin: 0 0 10px;
    color: hsl(var(--muted-foreground));
    font-size: 14px;
}

.page-meta {
    margin: 0;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.breadcrumb {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

.forum-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: start;
}

.forum-main {
    min-width: 0;
}

.panel__head--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.panel__desc {
    margin: 4px 0 0;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

.panel__body--flush {
    padding: 0;
}

.tabs {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: hsl(var(--muted));
}

.tabs--bar {
    margin-bottom: 14px;
}

.tabs__item {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.tabs__item:hover {
    text-decoration: none;
    color: hsl(var(--foreground));
}

.tabs__item.is-active {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.post-row {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid hsl(var(--border));
}

.post-row:last-child {
    border-bottom: 0;
}

.post-row:hover {
    background: hsl(var(--muted) / 0.5);
}

.post-row__heat {
    width: 3px;
    border-radius: 999px;
    flex: none;
    opacity: 0.85;
}

.post-row__body {
    flex: 1;
    min-width: 0;
}

.post-row__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.post-row__title a:hover {
    text-decoration: underline;
}

.post-row__excerpt {
    margin: 4px 0 0;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.post-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.post-row__board {
    color: hsl(var(--foreground));
}

.post-row__stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    font-size: 11px;
    font-weight: 600;
    vertical-align: 1px;
}

.tag--pin {
    background: hsl(var(--destructive) / 0.12);
    color: hsl(var(--destructive));
}

.tag--type {
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--foreground));
}

.tag--status {
    background: hsl(38 92% 50% / 0.16);
    color: hsl(28 80% 40%);
}

.badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
}

.badge--level {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

.badge--role {
    background: hsl(220 90% 56% / 0.14);
    color: hsl(220 70% 45%);
}

.badge--author {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.badge--accepted {
    background: hsl(142 70% 45% / 0.16);
    color: hsl(142 60% 32%);
}

.badge--vip {
    background: linear-gradient(180deg, hsl(276 70% 60% / 0.22), hsl(276 70% 52% / 0.12));
    color: hsl(276 62% 40%);
}

.badge--verified {
    background: hsl(199 89% 48% / 0.14);
    color: hsl(199 80% 34%);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.tag--cloud {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    font-size: 13px;
    text-decoration: none;
    color: hsl(var(--foreground));
}

.tag--cloud:hover {
    border-color: hsl(var(--primary) / 0.4);
    background: hsl(var(--primary) / 0.06);
}

.tag__count {
    font-size: 11px;
    color: hsl(var(--muted-foreground));
}

.user-list,
.reply-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.user-list__item,
.reply-list__item {
    padding-bottom: 12px;
    border-bottom: 1px solid hsl(var(--border) / 0.7);
}

.user-list__item:last-child,
.reply-list__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.user-list__link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.user-list__link strong {
    display: block;
    font-size: 14px;
}

.user-list__link .text-muted {
    font-size: 12px;
}

.reply-list__link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-decoration: none;
    color: inherit;
}

.reply-list__post {
    font-size: 13px;
    font-weight: 600;
}

.reply-list__excerpt {
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

.profile-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: hsl(var(--card));
}

.profile-head__main {
    flex: 1;
    min-width: 0;
}

.profile-head__bio {
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.7;
}

.profile-head__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.profile-head__actions {
    display: flex;
    gap: 8px;
}

.avatar--lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
    font-size: 26px;
    font-weight: 700;
    flex: 0 0 auto;
}

.post-appendix {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed hsl(var(--border));
}

.post-appendix__title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: hsl(var(--muted-foreground));
}

.search-bar {
    display: flex;
    gap: 8px;
}

.search-bar .input {
    flex: 1;
}

.board-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px 0;
    font-size: 13px;
}

.pagination__item {
    padding: 6px 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
}

.pagination__item:hover {
    background: hsl(var(--muted));
    text-decoration: none;
}

.pagination__info {
    color: hsl(var(--muted-foreground));
}

/* ---------- post detail ---------- */

.post-detail {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
    padding: 24px 26px 18px;
}

.post-detail__title {
    font-size: 26px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.post-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

.post-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.post-detail__tags .tag:hover {
    text-decoration: none;
    background: hsl(var(--accent));
}

.post-detail__body {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.85;
    word-break: break-word;
}

.markdown {
    min-height: 24px;
}

.markdown img {
    max-width: 100%;
    border-radius: 10px;
}

.unlock-block {
    margin: 16px 0;
    padding: 12px 14px;
    border-left: 3px solid hsl(var(--primary));
    background: hsl(var(--muted) / 0.5);
    border-radius: 0 10px 10px 0;
}

.unlock-block__label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: hsl(var(--muted-foreground));
}

.locked-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 14px 0;
    padding: 14px;
    border: 1px dashed hsl(var(--border));
    border-radius: 10px;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

.locked-block strong {
    color: hsl(var(--foreground));
    font-size: 13px;
}

.post-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid hsl(var(--border));
}

.btn.is-active {
    background: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary) / 0.3);
}

.inline-form {
    display: inline;
}

.poll {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
}

.poll__title {
    font-size: 14px;
    margin-bottom: 12px;
}

.poll__option {
    margin-bottom: 10px;
}

.poll__label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.poll__bar {
    margin-top: 4px;
    height: 6px;
    border-radius: 999px;
    background: hsl(var(--muted));
    overflow: hidden;
}

.poll__bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: hsl(var(--primary));
}

.poll__total {
    margin: 6px 0 0;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

/* ---------- comments ---------- */

.comments {
    margin-top: 24px;
}

.comments__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.comments__title {
    font-size: 17px;
}

.comment-thread {
    border-bottom: 1px solid hsl(var(--border));
}

.comment {
    padding: 14px 4px;
}

.comment--reply {
    padding-left: 16px;
    border-left: 2px solid hsl(var(--border));
    margin-left: 8px;
}

.comment-thread__replies {
    padding-left: 20px;
    margin-bottom: 6px;
}

.comment--god {
    background: hsl(45 90% 55% / 0.06);
    border-radius: 8px;
}

.comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.comment__author {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.comment__reply-to {
    color: hsl(var(--muted-foreground));
    font-size: 12px;
}

.comment__time {
    margin-left: auto;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.comment__floor {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.comment__body {
    margin: 8px 0 6px;
    padding-left: 32px;
    font-size: 14px;
    line-height: 1.75;
    word-break: break-word;
}

.comment__actions {
    display: flex;
    gap: 14px;
    padding-left: 32px;
}

.link-btn {
    padding: 0;
    border: 0;
    background: transparent;
    color: hsl(var(--muted-foreground));
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.link-btn:hover {
    color: hsl(var(--foreground));
}

.link-btn.is-active {
    color: hsl(var(--destructive));
}

.comment-form {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: hsl(var(--card));
}

.comment-form__reply {
    margin-bottom: 8px;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.comment-form__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

/* ---------- forms (wide) ---------- */

.form--wide {
    max-width: 720px;
}

.form--wide .form-section:first-of-type {
    margin-top: 8px;
}

.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.textarea {
    height: auto;
    padding: 10px 12px;
    line-height: 1.7;
    resize: vertical;
}

.textarea--tall {
    min-height: 240px;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.checkbox input {
    accent-color: hsl(var(--primary));
}

.access-denied {
    max-width: 520px;
    margin: 40px auto;
    text-align: center;
}

.access-denied__message {
    color: hsl(var(--muted-foreground));
}

.access-denied__actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

@media (max-width: 960px) {
    .forum-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .forum-side {
        display: none;
    }
}

@media (max-width: 720px) {
    .post-detail {
        padding: 18px 16px 14px;
    }

    .post-detail__title {
        font-size: 21px;
    }

    .post-row__stats {
        display: none;
    }

    .page-title {
        font-size: 20px;
    }
}

/* ---------- lottery / auction / red packet ---------- */

.lottery,
.auction,
.red-packet {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
}

.lottery__head,
.auction__head,
.red-packet__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.lottery__title,
.auction__title,
.red-packet__title {
    font-size: 15px;
}

.lottery__meta,
.red-packet__meta {
    margin: 0 0 12px;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

.lottery__prizes {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.lottery__prize {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid hsl(var(--border));
    border-radius: 10px;
}

.lottery__winners {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.lottery__winner {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background: hsl(var(--muted));
}

.lottery__winner code {
    margin-left: 6px;
}

.lottery__announcement {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 13px;
    padding: 12px;
    margin: 0 0 12px;
    border-radius: 10px;
    background: hsl(var(--muted));
}

.lottery__condition-group {
    font-size: 13px;
    margin-bottom: 8px;
}

.lottery__condition-group ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

.auction__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 0 0 12px;
}

.auction__facts dt {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.auction__facts dd {
    margin: 2px 0 0;
    font-weight: 600;
}

.auction__preview {
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 10px;
    background: hsl(var(--muted));
}

.auction__participants {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
}

.auction__participants li {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid hsl(var(--border));
}

.auction__participants li.is-leader {
    border-color: hsl(var(--primary));
    color: hsl(var(--primary));
}

.auction__bid {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.red-packet__records {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13px;
}

.red-packet__records li {
    display: flex;
    gap: 10px;
    padding: 2px 0;
}

/* ---------- user centre (M5) ---------- */

.uc-tabs {
    flex-wrap: wrap;
}

.uc-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
    box-shadow: var(--shadow-soft);
}

.uc-hero__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    font-size: 32px;
    background: hsl(var(--secondary));
    color: var(--level-color, hsl(var(--foreground)));
}

.uc-hero__main {
    min-width: 0;
    flex: 1;
}

.uc-hero__eyebrow {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}

.uc-hero__title {
    margin: 4px 0 6px;
    font-size: 24px;
    line-height: 1.25;
}

.uc-hero__meta {
    margin: 0;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

.uc-hero__actions {
    flex: none;
}

.uc-stat-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-top: 12px;
}

.uc-stat {
    padding: 14px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
}

.uc-stat__label {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}

.uc-stat__value {
    margin: 6px 0 0;
    font-size: 18px;
    font-weight: 600;
}

.uc-progress-row {
    padding: 10px 0;
    border-bottom: 1px solid hsl(var(--border));
}

.uc-progress-row:last-child {
    border-bottom: 0;
}

.uc-progress-row__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    margin-bottom: 6px;
}

.uc-progress {
    height: 8px;
    border-radius: 999px;
    background: hsl(var(--muted));
    overflow: hidden;
}

.uc-progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: hsl(var(--primary));
    transition: width 0.3s ease;
}

.uc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.uc-table th,
.uc-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid hsl(var(--border));
    vertical-align: top;
}

.uc-table th {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--muted) / 0.4);
}

.uc-table tr:last-child td {
    border-bottom: 0;
}

.uc-table tr.is-current td {
    background: hsl(var(--primary) / 0.06);
    font-weight: 600;
}

.uc-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.uc-up {
    color: #15803d;
}

.uc-down {
    color: #b91c1c;
}

.uc-level-icon {
    margin-right: 6px;
}

.uc-subtitle {
    margin: 16px 0 6px;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

/* badges */

.uc-badge-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.uc-badge-chip {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--secondary));
    color: hsl(var(--foreground));
}

.uc-badge-grid {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.uc-badge-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
}

.uc-badge-card.is-granted {
    border-color: var(--badge-color, hsl(var(--primary)));
    box-shadow: inset 0 0 0 1px var(--badge-color, hsl(var(--primary)));
}

.uc-badge-card__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 28px;
    background: hsl(var(--secondary));
    color: var(--badge-color, hsl(var(--foreground)));
}

.uc-badge-card__body {
    min-width: 0;
    flex: 1;
}

.uc-badge-card__name {
    margin: 0;
    font-size: 16px;
}

.uc-badge-card__category {
    margin: 3px 0 0;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.uc-badge-card__desc {
    margin: 8px 0 0;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
    line-height: 1.6;
}

.uc-badge-card__rules {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
}

.uc-rule {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: hsl(var(--secondary));
    color: #15803d;
}

.uc-rule.is-failed {
    color: hsl(var(--muted-foreground));
}

.uc-badge-card__status {
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: 600;
}

.uc-badge-card__actions {
    margin-top: 12px;
}

.uc-badge-card__hint {
    font-size: 12px;
}

.uc-badge-hero {
    padding: 28px 20px;
    text-align: center;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--badge-color, hsl(var(--primary))) 12%, hsl(var(--card)) 60%);
}

.uc-badge-hero__icon {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 14px;
    border-radius: 28px;
    font-size: 48px;
    background: hsl(var(--card));
    color: var(--badge-color, hsl(var(--foreground)));
}

.uc-badge-hero__title {
    margin: 4px 0 10px;
    font-size: 30px;
}

.uc-badge-hero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.uc-badge-hero__desc {
    max-width: 640px;
    margin: 14px auto 0;
    font-size: 14px;
    color: hsl(var(--muted-foreground));
    line-height: 1.7;
}

.uc-badge-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.uc-stat-grid {
    display: grid;
    gap: 12px;
    margin: 20px auto 0;
    max-width: 720px;
}

.uc-stat {
    padding: 12px 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: hsl(var(--background) / 0.75);
    text-align: left;
}

.uc-stat__label {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}

.uc-stat__value {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 600;
}

.uc-rule-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.9;
    color: hsl(var(--muted-foreground));
}

.uc-rule-list li.is-failed {
    color: hsl(var(--destructive));
}

.breadcrumbs {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

/* verification */

.uc-approved {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
}

.uc-approved__icon {
    font-size: 26px;
}

.uc-approved__name {
    margin: 0;
    font-weight: 600;
}

.uc-approved > div {
    flex: 1;
}

.uc-verify-grid {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.uc-verify-card {
    padding: 16px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
}

.uc-verify-card__head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.uc-verify-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 14px;
    background: hsl(var(--secondary));
    color: var(--verify-color, hsl(var(--foreground)));
    font-size: 22px;
}

.uc-verify-card__name {
    margin: 0;
    font-size: 16px;
}

.uc-verify-card__meta {
    margin: 3px 0 0;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.uc-verify-card__desc {
    margin: 10px 0 0;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
    line-height: 1.6;
}

.uc-verify-card__status {
    margin: 10px 0 0;
    font-size: 13px;
}

.uc-verify-form {
    margin-top: 12px;
    border-top: 1px solid hsl(var(--border));
    padding-top: 12px;
}

.uc-verify-form summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--primary));
}

.uc-verify-form form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

/* check-in calendar */

.uc-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 0;
    font-size: 13px;
}

.uc-month-nav__current {
    font-weight: 600;
}

.uc-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.uc-calendar__weekday {
    text-align: center;
    font-size: 11px;
    color: hsl(var(--muted-foreground));
    padding-bottom: 4px;
}

.uc-calendar__cell {
    position: relative;
    min-height: 56px;
    padding: 6px;
    border: 1px solid hsl(var(--border));
    border-radius: 10px;
    background: hsl(var(--background));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 12px;
}

.uc-calendar__cell--empty {
    border-color: transparent;
    background: transparent;
}

.uc-calendar__cell.is-checked {
    background: hsl(var(--primary) / 0.12);
    border-color: hsl(var(--primary) / 0.5);
}

.uc-calendar__cell.is-makeup {
    background: hsl(var(--secondary));
    border-style: dashed;
}

.uc-calendar__cell.is-today {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 1px;
}

.uc-calendar__cell.is-future {
    opacity: 0.45;
}

.uc-calendar__cell[data-make-up] {
    cursor: pointer;
}

.uc-calendar__cell[data-make-up]:hover {
    border-color: hsl(var(--primary));
}

.uc-calendar__day {
    font-weight: 600;
}

.uc-calendar__reward {
    font-size: 10px;
    color: hsl(var(--muted-foreground));
}

/* tasks */

.uc-task-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.uc-task {
    display: flex;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid hsl(var(--border));
}

.uc-task:last-child {
    border-bottom: 0;
}

.uc-task.is-completed {
    background: hsl(var(--muted) / 0.35);
}

.uc-task__main {
    flex: 1;
    min-width: 0;
}

.uc-task__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.uc-task__title {
    font-weight: 600;
}

.uc-task__desc {
    margin: 4px 0 0;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

.uc-task__condition {
    margin: 6px 0;
    font-size: 13px;
}

.uc-task__meta {
    margin: 6px 0 0;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.uc-task__action {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    max-width: 180px;
    text-align: right;
}

.uc-task__hint {
    font-size: 11px;
    line-height: 1.5;
}

/* vip */

.uc-vip-plans {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.uc-vip-plan {
    padding: 18px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.uc-vip-plan--2 {
    border-color: #a855f7;
}

.uc-vip-plan--3 {
    border-color: #eab308;
}

.uc-vip-plan__level {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}

.uc-vip-plan__label {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.uc-vip-plan__price {
    margin: 6px 0 0;
    font-size: 26px;
    font-weight: 700;
}

.uc-vip-plan__price span {
    font-size: 12px;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}

.uc-vip-plan__meta {
    margin: 0 0 8px;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

/* forms */

.uc-inline-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.uc-inline-form .field {
    margin: 0;
    min-width: 180px;
}

.uc-code-output {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.uc-code-chip {
    padding: 4px 10px;
    border-radius: 8px;
    background: hsl(var(--secondary));
    font-size: 13px;
    user-select: all;
}

.uc-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.uc-breakdown {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.uc-breakdown li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.input--sm {
    height: 34px;
    padding: 4px 10px;
    font-size: 13px;
}

@media (min-width: 720px) {
    .uc-badge-grid,
    .uc-verify-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .uc-vip-plans {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .uc-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .uc-hero {
        flex-wrap: wrap;
    }

    .uc-task {
        flex-direction: column;
    }

    .uc-task__action {
        align-items: flex-start;
        text-align: left;
    }
}

/* ---------- inbox (M6) ---------- */

/* ---- inbox chrome ---- */

.header-badge {
    position: relative;
}

.header-badge__count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: hsl(0 72% 51%);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

.inbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.inbox-head__actions {
    display: flex;
    gap: 8px;
}

.notify-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notify-item {
    padding: 14px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
}

.notify-item.is-unread {
    border-color: hsl(var(--primary) / 0.4);
    background: hsl(var(--primary) / 0.04);
}

.notify-item__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.notify-item__time {
    margin-left: auto;
    font-size: 12px;
}

.notify-item__delete {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.notify-item__link {
    display: block;
    color: inherit;
}

.notify-item__title {
    margin: 0;
    font-size: 15px;
}

.notify-item__content {
    margin: 6px 0;
    font-size: 14px;
    line-height: 1.7;
    color: hsl(var(--muted-foreground));
}

.notify-item__meta {
    margin: 0;
    font-size: 12px;
}

.badge--unread {
    background: hsl(0 80% 60% / 0.14);
    color: hsl(0 70% 45%);
}

/* ---- messages ---- */

.messages-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.messages-side,
.messages-thread {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
    min-height: 520px;
}

.messages-side__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid hsl(var(--border));
}

.messages-side__title {
    margin: 0;
    font-size: 16px;
}

.messages-side__head span {
    font-size: 12px;
}

.conversation-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 640px;
    overflow-y: auto;
}

.conversation-item {
    position: relative;
    border-bottom: 1px solid hsl(var(--border));
}

.conversation-item.is-active {
    background: hsl(var(--primary) / 0.07);
}

.conversation-item__link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 44px 12px 16px;
    color: inherit;
}

.conversation-item__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

.conversation-item__preview {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-item__meta {
    font-size: 11px;
}

.conversation-item__delete {
    position: absolute;
    right: 10px;
    top: 12px;
    font-size: 11px;
    color: hsl(var(--muted-foreground));
}

.messages-thread {
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.messages-thread__head {
    padding-bottom: 12px;
    border-bottom: 1px solid hsl(var(--border));
}

.messages-thread__title {
    margin: 0 0 4px;
    font-size: 16px;
}

.messages-thread__more {
    padding: 10px 0;
    text-align: center;
}

.message-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
    max-height: 460px;
    overflow-y: auto;
}

.message {
    max-width: 78%;
    padding: 10px 12px;
    border-radius: 14px;
    background: hsl(var(--muted));
}

.message--mine {
    align-self: flex-end;
    background: hsl(var(--primary) / 0.12);
}

.message__meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    margin-bottom: 4px;
}

.message__sender {
    font-weight: 600;
}

.message__body {
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
}

.message--image-only {
    padding: 0;
    background: transparent;
}

.message--image-only .message__meta {
    padding: 0 2px;
}

.message__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.message-markdown > *:first-child { margin-top: 0; }
.message-markdown > *:last-child { margin-bottom: 0; }

.message-markdown p {
    margin: 0;
    line-height: 1.7;
    color: inherit;
}

.message-markdown ul,
.message-markdown ol {
    margin: 6px 0;
}

.message-markdown h1,
.message-markdown h2,
.message-markdown h3,
.message-markdown h4,
.message-markdown h5,
.message-markdown h6 {
    margin: 6px 0 4px;
    font-size: 15px;
    color: inherit;
}

.message-markdown a,
.message-markdown strong,
.message-markdown em,
.message-markdown code,
.message-markdown blockquote {
    color: inherit;
}

.message-markdown pre {
    margin: 6px 0;
}

.message-file {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 288px;
    max-width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 18px;
    background: hsl(var(--background) / 0.85);
    color: hsl(var(--foreground));
    transition: background 0.15s ease;
}

.message-file:hover {
    background: hsl(var(--accent));
}

.message--mine .message-file {
    border-color: hsl(var(--primary) / 0.2);
    background: hsl(var(--background) / 0.6);
}

.message-file__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 14px;
    background: hsl(var(--secondary));
    font-size: 18px;
}

.message-file__body {
    display: block;
    min-width: 0;
    flex: 1;
}

.message-file__name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
}

.message-file__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.message-file__ext {
    padding: 1px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.message-form {
    border-top: 1px solid hsl(var(--border));
    padding-top: 12px;
}

.message-form .input {
    width: 100%;
    resize: vertical;
}

.message-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.messages-empty {
    flex: 1;
    display: grid;
    place-items: center;
}

/* ---- blocks ---- */

.block-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.block-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid hsl(var(--border));
}

.block-item:last-child {
    border-bottom: 0;
}

.block-item__link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
}

.block-item__link span span {
    display: block;
    font-size: 12px;
}

/* ---- report dialog ---- */

.report-dialog {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgb(15 23 42 / 0.45);
}

.report-dialog[hidden] {
    display: none;
}

.report-dialog__panel {
    width: min(520px, 100%);
    border-radius: var(--radius);
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    box-shadow: 0 20px 50px rgb(15 23 42 / 0.25);
    padding: 20px;
}

.report-dialog__title {
    margin: 0 0 4px;
    font-size: 17px;
}

.report-dialog__target {
    margin: 0 0 14px;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

.report-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

@media (max-width: 860px) {
    .messages-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .messages-side {
        min-height: 0;
    }
}

/* ---------- markdown (M7) ---------- */

.markdown-body {
    font-size: 15px;
    line-height: 1.85;
    color: hsl(var(--foreground));
    word-break: break-word;
}

.markdown-body > *:first-child {
    margin-top: 0;
}

.markdown-body > *:last-child {
    margin-bottom: 0;
}

.markdown-body .md-list {
    margin: 16px 0;
    padding-left: 24px;
    color: hsl(var(--foreground));
}

.markdown-body .md-list .md-list {
    margin-top: 8px;
    margin-bottom: 8px;
}

.markdown-body .md-list-unordered {
    list-style: disc;
}

.markdown-body .md-list-unordered .md-list-unordered {
    list-style: circle;
}

.markdown-body .md-list-unordered .md-list-unordered .md-list-unordered {
    list-style: square;
}

.markdown-body .md-list-ordered {
    list-style: decimal;
}

.markdown-body .md-list-ordered .md-list-ordered {
    list-style: lower-alpha;
}

.markdown-body .md-list-ordered .md-list-ordered .md-list-ordered {
    list-style: lower-roman;
}

.markdown-body .md-list-item {
    margin: 5px 0;
    line-height: 1.8;
}

.markdown-body .md-list-item::marker {
    color: hsl(var(--muted-foreground));
    font-weight: 600;
}

.markdown-body .md-task-list {
    margin: 16px 0;
    padding-left: 0;
    list-style: none;
}

.markdown-body .md-task-list .task-list-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0;
    list-style: none;
}

.markdown-body .md-task-list .task-list-item label {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.8;
    color: hsl(var(--foreground));
}

.markdown-body .md-task-list .task-list-item input[type='checkbox'] {
    margin: 6px 0 0;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    accent-color: hsl(var(--primary));
}

.markdown-body .md-task-list .task-list-item:has(input[type='checkbox']:checked) {
    color: hsl(var(--muted-foreground));
    text-decoration: line-through;
    text-decoration-color: hsl(var(--muted-foreground) / 0.6);
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    position: relative;
    scroll-margin-top: 96px;
    color: hsl(var(--foreground));
}

.markdown-body h1 { font-size: 28px; }
.markdown-body h2 { font-size: 23px; }
.markdown-body h3 { font-size: 19px; }
.markdown-body h4 { font-size: 17px; }
.markdown-body h5 { font-size: 15px; }
.markdown-body h6 { font-size: 14px; }

.markdown-body .md-heading-anchor {
    margin-left: 8px;
    color: hsl(var(--primary));
    opacity: 0;
    transition: opacity 0.15s ease;
}

.markdown-body :is(h1, h2, h3, h4, h5, h6):hover .md-heading-anchor,
.markdown-body :is(h1, h2, h3, h4, h5, h6):focus-within .md-heading-anchor {
    opacity: 1;
}

.markdown-body .md-code-block {
    position: relative;
    margin: 20px 0;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--secondary));
    font-size: 13px;
}

.markdown-body .md-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 14px;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--card) / 0.8);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}

.markdown-body .md-code-block code {
    display: block;
    overflow-x: auto;
    padding: 16px 18px;
    background: transparent;
    border-radius: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
}

.markdown-body pre:not(.md-code-block) {
    margin: 16px 0;
    padding: 14px 16px;
    overflow-x: auto;
    border-radius: 14px;
    background: hsl(var(--secondary));
    font-size: 13px;
}

.markdown-body pre:not(.md-code-block) code {
    padding: 0;
    background: transparent;
}

.markdown-body code {
    padding: 1px 5px;
    border-radius: 5px;
    background: hsl(var(--secondary));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    word-break: break-all;
}

.markdown-body .md-copy-button,
.markdown-body .md-code-toggle-button {
    padding: 3px 12px;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    background: hsl(var(--background) / 0.8);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: normal;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.markdown-body .md-copy-button:hover,
.markdown-body .md-code-toggle-button:hover {
    background: hsl(var(--accent));
    color: hsl(var(--foreground));
}

.markdown-body .md-code-bottom-toggle-button {
    display: none;
    position: absolute;
    bottom: 12px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    padding: 5px 18px;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    background: hsl(var(--background) / 0.95);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.markdown-body pre.md-code-block[data-code-collapsible='true'] {
    position: relative;
}

.markdown-body pre.md-code-block[data-code-collapsible='true'][data-code-expanded='false'] .md-code-bottom-toggle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.markdown-body pre.md-code-block[data-code-collapsible='true'][data-code-expanded='false'] code {
    max-height: min(288px, 42vh);
    overflow: hidden;
    padding-bottom: 72px;
}

.markdown-body pre.md-code-block[data-code-collapsible='true'][data-code-expanded='false']::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 88px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, hsl(var(--secondary)) 70%);
}

.markdown-body .md-callout {
    margin: 24px 0;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-left-width: 4px;
    border-radius: 14px;
    background: hsl(var(--card));
}

.markdown-body .md-callout-info { border-left-color: #3b82f6; }
.markdown-body .md-callout-tip { border-left-color: #10b981; }
.markdown-body .md-callout-success { border-left-color: #22c55e; }
.markdown-body .md-callout-warning { border-left-color: #f59e0b; }
.markdown-body .md-callout-danger { border-left-color: #ef4444; }

.markdown-body .md-callout-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 0;
}

.markdown-body .md-callout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: hsl(var(--secondary));
    font-size: 12px;
    font-weight: 700;
}

.markdown-body .md-callout-title {
    font-size: 14px;
    font-weight: 700;
}

.markdown-body .md-callout-body {
    padding: 4px 16px 14px;
    font-size: 14px;
}

.markdown-body .md-callout-body > *:first-child { margin-top: 0; }
.markdown-body .md-callout-body > *:last-child { margin-bottom: 0; }

.markdown-body .md-spoiler {
    margin: 24px 0;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--secondary) / 0.4);
}

.markdown-body .md-spoiler-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.markdown-body .md-spoiler-hint {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 400;
    color: hsl(var(--muted-foreground));
}

.markdown-body .md-spoiler-body {
    padding: 12px 16px;
    border-top: 1px solid hsl(var(--border));
}

.markdown-body .md-spoiler-body > *:first-child { margin-top: 0; }
.markdown-body .md-spoiler-body > *:last-child { margin-bottom: 0; }

.markdown-body .md-wavy {
    text-decoration: underline wavy;
    text-decoration-color: hsl(var(--muted-foreground));
    text-underline-offset: 5px;
}

.markdown-body .md-scratch-mask {
    display: inline;
    cursor: pointer;
}

.markdown-body .md-scratch-mask input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    clip: rect(0 0 0 0);
}

.markdown-body .md-scratch-mask-content {
    border-radius: 4px;
    background: hsl(var(--foreground));
    color: transparent;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.markdown-body .md-scratch-mask input:checked + .md-scratch-mask-content {
    background: transparent;
    color: inherit;
    user-select: text;
}

.markdown-body .md-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    font-size: inherit;
}

.markdown-body .md-emoji-svg {
    width: var(--md-emoji-size, 2em);
    height: var(--md-emoji-size, 2em);
}

.markdown-body .md-emoji-image {
    min-width: var(--md-emoji-size, 2em);
    min-height: var(--md-emoji-size, 2em);
    max-width: var(--md-emoji-size, 6em);
    max-height: var(--md-emoji-size, 6em);
}

.markdown-body .md-emoji-image[data-display-size] {
    width: var(--md-emoji-size);
    height: var(--md-emoji-size);
}

.markdown-body .md-emoji-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.markdown-body .md-emoji-svg .md-emoji-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.markdown-body .md-emoji-text[data-display-size] {
    font-size: var(--md-emoji-size);
}

.markdown-body .md-media {
    margin: 24px 0;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--card));
}

.markdown-body .md-media--video {
    background: #000;
}

.markdown-body .md-media__video {
    display: block;
    width: 100%;
    max-height: 70vh;
    background: #000;
}

.markdown-body .md-media__audio {
    display: block;
    width: 100%;
    padding: 8px;
}

.markdown-body .md-embed {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 14px;
    aspect-ratio: 16 / 9;
}

.markdown-body .md-table-wrap,
.markdown-body table {
    width: 100%;
}

.markdown-body table {
    margin: 16px 0;
    border-collapse: collapse;
    font-size: 14px;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid hsl(var(--border));
    padding: 8px 12px;
    vertical-align: top;
}

.markdown-body th {
    background: hsl(var(--secondary));
    font-weight: 600;
    text-align: left;
}

.markdown-body blockquote {
    margin: 16px 0;
    padding: 4px 16px;
    border-left: 3px solid hsl(var(--border));
    color: hsl(var(--muted-foreground));
}

.markdown-body blockquote > *:first-child { margin-top: 0; }
.markdown-body blockquote > *:last-child { margin-bottom: 0; }

.markdown-body hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid hsl(var(--border));
}

.markdown-body dl {
    margin: 16px 0;
}

.markdown-body dt {
    font-weight: 600;
}

.markdown-body dd {
    margin: 2px 0 10px;
    padding-left: 16px;
    border-left: 2px solid hsl(var(--border));
    color: hsl(var(--muted-foreground));
}

.markdown-body abbr {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 4px;
}

.markdown-body mark {
    padding: 1px 4px;
    border-radius: 4px;
    background: rgb(253 224 71 / 0.55);
    color: inherit;
}

.markdown-body .md-post-card {
    margin: 18px 0;
    overflow: hidden;
    border-radius: 14px;
    background: hsl(var(--muted) / 0.6);
    transition: background 0.15s ease;
}

.markdown-body .md-post-card:hover {
    background: hsl(var(--muted) / 0.85);
}

.markdown-body .md-post-card-link {
    display: block;
    padding: 8px;
    color: inherit;
    text-decoration: none;
}

.markdown-body .md-post-card-grid {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
}

.markdown-body .md-post-card-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: hsl(var(--background));
    font-size: 18px;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
}

.markdown-body .md-post-card-cover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.markdown-body .md-post-card-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px 0;
}

.markdown-body .md-post-card-title-row {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 8px;
}

.markdown-body .md-post-card-badge {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgb(255 237 213);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    color: rgb(234 88 12);
}

.markdown-body .md-post-card-title {
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: hsl(var(--foreground));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.markdown-body .md-post-card-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}

.markdown-body .md-post-card-author {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.markdown-body .md-post-card-avatar {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    object-fit: cover;
}

.markdown-body .md-post-card-author-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.markdown-body .md-post-card-metrics {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
}

.markdown-body .md-post-card-metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.markdown-body .md-post-card-metric svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.markdown-body .katex-display {
    margin: 20px 0;
    padding: 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.markdown-body .katex {
    font-family: 'Cambria Math', 'Times New Roman', serif;
    font-size: 1.02em;
}

.markdown-body .footnotes {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid hsl(var(--border));
    font-size: 14px;
    color: hsl(var(--muted-foreground));
}

.markdown-body .footnotes-list {
    margin: 0;
    padding-left: 24px;
    list-style: decimal;
}

.markdown-body .footnote-ref,
.markdown-body .footnote-backref {
    color: hsl(var(--primary));
    text-decoration: none;
}

.markdown-body .md-mermaid {
    margin: 20px 0;
    padding: 16px;
    overflow-x: auto;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--card));
}

.markdown-body .md-mermaid svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.markdown-body .md-mermaid-loading {
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

.markdown-body .md-image-fallback {
    margin: 16px 0;
    padding: 16px;
    border: 1px dashed rgb(252 211 77 / 0.8);
    border-radius: 14px;
    background: rgb(255 251 235 / 0.8);
    font-size: 13px;
    color: rgb(146 64 14);
}

.markdown-body img {
    max-width: 100%;
    border-radius: 10px;
}

.markdown-body img.cursor-zoom-in {
    cursor: zoom-in;
}

/* ---------- markdown editor ---------- */

.md-editor {
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--card));
    overflow: hidden;
}

.md-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--secondary) / 0.6);
}

.md-editor__tool {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
}

.md-editor__tool:hover {
    background: hsl(var(--accent));
    color: hsl(var(--foreground));
}

.md-editor__tool--icon {
    width: 30px;
    padding: 0;
    justify-content: center;
    font-size: 14px;
}

.md-editor__divider {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: hsl(var(--border));
}

.md-editor__spacer {
    flex: 1;
}

.md-editor__panes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.md-editor__panes[data-preview='true'] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.md-editor__input {
    min-height: 280px;
    padding: 14px 16px;
    border: 0;
    outline: none;
    resize: vertical;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    line-height: 1.75;
    color: hsl(var(--foreground));
}

.md-editor__preview {
    max-height: 620px;
    overflow-y: auto;
    padding: 14px 18px;
    border-left: 1px solid hsl(var(--border));
    background: hsl(var(--background));
}

.md-editor__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 12px;
    border-top: 1px solid hsl(var(--border));
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.md-emoji-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 320px;
    max-height: 260px;
    overflow-y: auto;
    padding: 10px;
}

.md-emoji-picker__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
}

.md-emoji-picker__item:hover {
    border-color: hsl(var(--border));
    background: hsl(var(--accent));
}

.md-emoji-picker__item img,
.md-emoji-picker__item svg {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.md-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgb(0 0 0 / 0.45);
}

.md-modal__card {
    width: 100%;
    max-width: 380px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: hsl(var(--card));
    box-shadow: var(--shadow-soft);
}

.md-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid hsl(var(--border));
    font-weight: 600;
}

.md-modal__close {
    border: 0;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
}

.md-mention-popup {
    position: fixed;
    z-index: 130;
    width: 240px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: hsl(var(--popover));
    box-shadow: var(--shadow-soft);
}

.md-mention-item {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    font-size: 13px;
    color: hsl(var(--foreground));
    cursor: pointer;
}

.md-mention-item:hover,
.md-mention-item.is-active {
    background: hsl(var(--accent));
}

.md-lightbox {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgb(0 0 0 / 0.86);
    cursor: zoom-out;
}

.md-lightbox img {
    max-width: 92vw;
    max-height: 90vh;
    border-radius: 8px;
    object-fit: contain;
}

.md-lightbox-open {
    overflow: hidden;
}

/* ---------- built-in apps (M10) ---------- */

.app-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 220;
    max-width: min(360px, calc(100vw - 32px));
    box-shadow: 0 16px 40px rgba(15, 23, 42, .2);
}

.app-dialog {
    width: min(520px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
}

.app-dialog::backdrop {
    background: rgba(15, 23, 42, .55);
}

.app-dialog__form {
    display: flex;
    flex-direction: column;
}

.app-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid hsl(var(--border));
}

.app-dialog__head h2 {
    margin: 0;
    font-size: 16px;
}

.app-dialog__close {
    border: 0;
    background: transparent;
    color: hsl(var(--muted-foreground));
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.app-dialog__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    max-height: 62vh;
    overflow-y: auto;
}

.app-dialog__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid hsl(var(--border));
}

.app-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 4px 40px;
}

/* --- funs landing --- */

.funs-page {
    max-width: 1200px;
    margin: 0 auto;
}

.funs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.funs-node {
    display: flex;
    gap: 12px;
    padding: 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}

.funs-node:hover {
    background: hsl(var(--accent));
    transform: translateY(-1px);
}

.funs-node__icon {
    font-size: 22px;
    line-height: 1.2;
}

.funs-node__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.funs-node__name {
    font-size: 15px;
}

.funs-node__desc {
    color: hsl(var(--muted-foreground));
    font-size: 12.5px;
    line-height: 1.6;
}

.funs-node__meta {
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

/* --- gobang --- */

.gobang-page {
    padding-top: 0;
}

.gobang-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

.gobang-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
    box-shadow: var(--shadow-soft);
}

.gobang-board-shell {
    width: 100%;
    max-width: 560px;
}

.gobang-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 10px;
    border-radius: 10px;
    background:
        linear-gradient(hsl(35 42% 74%) 1px, transparent 1px) 0 0 / calc(100% / 14) calc(100% / 14),
        linear-gradient(90deg, hsl(35 42% 74%) 1px, transparent 1px) 0 0 / calc(100% / 14) calc(100% / 14),
        hsl(38 52% 84%);
    box-shadow: inset 0 0 0 1px hsl(35 30% 65%), 0 10px 26px rgba(15, 23, 42, .14);
    gap: 0;
}

.gobang-point {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
}

.gobang-point:disabled {
    cursor: default;
}

.gobang-point:not(:disabled):hover .gobang-stone::after {
    content: '';
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: rgba(15, 23, 42, .18);
}

.gobang-stone {
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .32);
}

.gobang-point.is-black .gobang-stone {
    background: radial-gradient(circle at 34% 30%, #4b5563, #030712 68%);
}

.gobang-point.is-white .gobang-stone {
    background: radial-gradient(circle at 34% 30%, #ffffff, #cbd5e1 74%);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .22), inset 0 0 0 1px rgba(15, 23, 42, .14);
}

.gobang-point.is-last .gobang-stone {
    box-shadow: 0 0 0 2px hsl(var(--destructive)), 0 2px 5px rgba(15, 23, 42, .32);
}

.gobang-point.is-win .gobang-stone {
    box-shadow: 0 0 0 2px #f59e0b, 0 0 12px rgba(245, 158, 11, .8);
}

.gobang-actions {
    display: flex;
    justify-content: center;
}

.gobang-easter-egg {
    padding: 4px 12px;
    border: 1px dashed hsl(var(--border));
    border-radius: 999px;
    background: transparent;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
    cursor: pointer;
}

.gobang-easter-egg:hover {
    color: hsl(var(--foreground));
    border-color: hsl(var(--foreground) / .3);
}

.gobang-panel {
    width: 100%;
    max-width: 560px;
    padding: 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: hsl(var(--muted) / .5);
}

.gobang-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.gobang-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    background: hsl(var(--background));
    font-size: 12.5px;
}

.gobang-stat--wide {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.gobang-stat__label {
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.gobang-stat__value {
    font-size: 15px;
}

.gobang-stat__value.is-good {
    color: #16a34a;
}

.gobang-stat__value.is-bad {
    color: hsl(var(--destructive));
}

.gobang-stat__hint {
    color: hsl(var(--muted-foreground));
    font-size: 11px;
}

.gobang-message {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: hsl(var(--muted));
    font-size: 13px;
    font-weight: 600;
}

.gobang-message.is-win {
    background: #dcfce7;
    color: #166534;
}

.gobang-message.is-draw {
    background: #dbeafe;
    color: #1e40af;
}

.gobang-message.is-lose {
    background: #fee2e2;
    color: #991b1b;
}

.gobang-panel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.gobang-history {
    width: 100%;
    max-width: 560px;
    padding: 14px;
    border: 1px dashed hsl(var(--border));
    border-radius: 12px;
}

.gobang-history__title {
    margin: 0 0 8px;
    font-size: 13px;
}

.gobang-history__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid hsl(var(--border));
    font-size: 12px;
}

.gobang-history__row:first-of-type {
    border-top: 0;
}

.gobang-history__state {
    font-weight: 600;
}

.gobang-history__state.is-win {
    color: #16a34a;
}

.gobang-history__state.is-lose {
    color: hsl(var(--destructive));
}

.gobang-history__meta {
    flex: 1;
    color: hsl(var(--muted-foreground));
}

.gobang-history__moves {
    color: hsl(var(--muted-foreground));
}

.gobang-rules {
    padding: 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: hsl(var(--card));
}

.gobang-rules__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gobang-rules__title {
    margin: 0;
    font-size: 14px;
}

.gobang-rules__toggle {
    border: 0;
    background: transparent;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
    cursor: pointer;
}

.gobang-rules__list {
    margin-top: 8px;
}

.gobang-rule {
    margin: 0 0 8px;
    color: hsl(var(--muted-foreground));
    font-size: 12.5px;
    line-height: 1.75;
}

.gobang-rule:last-child {
    margin-bottom: 0;
}

.gobang-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    z-index: 5;
}

.gobang-overlay__text {
    color: #fff;
    font-size: 26px;
    letter-spacing: .22em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* --- yinyang --- */

.yy-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--accent)));
}

.yy-hero__eyebrow {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.yy-hero__title {
    margin: 4px 0 6px;
    font-size: 24px;
}

.yy-hero__lead {
    margin: 0;
    max-width: 560px;
    color: hsl(var(--muted-foreground));
    font-size: 13px;
    line-height: 1.75;
}

.yy-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, auto));
    gap: 10px;
}

.yy-stat {
    padding: 10px 12px;
    border-radius: 10px;
    background: hsl(var(--background) / .8);
    border: 1px solid hsl(var(--border));
}

.yy-stat__label {
    display: block;
    color: hsl(var(--muted-foreground));
    font-size: 11px;
}

.yy-stat__value {
    font-size: 15px;
}

.yy-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
}

.yy-toolbar__kings {
    margin-left: auto;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.yy-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    padding: 14px;
}

.yy-card {
    padding: 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: hsl(var(--card));
}

.yy-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.yy-card__author {
    color: hsl(var(--muted-foreground));
    font-size: 12px;
}

.yy-card__question {
    margin: 8px 0 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}

.yy-card__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.yy-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid hsl(var(--border));
    border-radius: 10px;
    background: hsl(var(--background));
    color: inherit;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.yy-option:hover {
    border-color: hsl(var(--foreground) / .35);
    background: hsl(var(--accent));
}

.yy-option.is-selected {
    border-color: hsl(var(--foreground));
    background: hsl(var(--foreground));
    color: hsl(var(--background));
}

.yy-option__key {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    font-size: 11px;
    font-weight: 700;
}

.yy-option__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yy-card__stake {
    margin: 10px 0 0;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.yy-answer-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}

.yy-modal {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
}

.yy-modal::backdrop {
    background: rgba(15, 23, 42, .55);
}

.yy-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid hsl(var(--border));
}

.yy-modal__head h2 {
    margin: 0;
    font-size: 16px;
}

.yy-modal__close {
    border: 0;
    background: transparent;
    color: hsl(var(--muted-foreground));
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.yy-modal__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    max-height: 60vh;
    overflow-y: auto;
}

.yy-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.yy-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid hsl(var(--border));
}

.yy-confirm__question {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
}

.yy-confirm__option {
    margin: 0;
    font-size: 13px;
}

/* --- self-serve ads --- */

.ads-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
}

.ads-hero__title {
    margin: 0 0 6px;
    font-size: 22px;
}

.ads-hero__lead {
    margin: 0;
    max-width: 620px;
    color: hsl(var(--muted-foreground));
    font-size: 13px;
    line-height: 1.75;
}

.ad-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ad-grid__images {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ad-grid--page .ad-grid__images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.ad-grid__texts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.ad-grid--page .ad-grid__texts {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.ad-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 3;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    overflow: hidden;
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    background: hsl(var(--muted) / .35);
}

.ad-grid--sidebar .ad-image {
    aspect-ratio: 16 / 3;
}

.ad-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ad-image--empty {
    flex-direction: column;
    gap: 2px;
    border-style: dashed;
    font-size: 12px;
    font-weight: 500;
}

.ad-image--empty small {
    font-size: 10.5px;
    font-weight: 400;
}

.ad-image__expiry {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 8px;
    background: rgba(15, 23, 42, .6);
    color: #fff;
    font-size: 10.5px;
}

.ad-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    min-height: 62px;
    padding: 10px 12px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: opacity .15s ease, transform .15s ease;
}

.ad-grid--page .ad-text {
    min-height: 92px;
    padding: 12px 14px;
    border: 1px solid hsl(var(--border));
}

.ad-text:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.ad-text--empty {
    align-items: center;
    justify-content: center;
    border: 1px dashed hsl(var(--border));
    background: hsl(var(--background));
    color: hsl(var(--muted-foreground));
    font-weight: 400;
    text-align: center;
}

.ad-text--empty small {
    display: block;
    font-size: 10.5px;
}

.ad-text__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ad-text__expiry {
    font-size: 10.5px;
    opacity: .75;
}

.ads-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
}

.ads-form__colors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    align-items: end;
}

.ads-form__preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ads-preview {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 12px;
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 12px;
    font-weight: 500;
    border: 1px dashed hsl(var(--border));
}

.ads-durations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.ads-duration {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid hsl(var(--border));
    border-radius: 10px;
    font-size: 12px;
    cursor: pointer;
}

.ads-duration input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ads-duration:has(input:checked) {
    border-color: hsl(var(--foreground));
    background: hsl(var(--foreground));
    color: hsl(var(--background));
}

.ads-duration__price {
    font-size: 11px;
    opacity: .75;
}

.ads-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- responsive ---------- */

@media (max-width: 720px) {
    .site-header__inner {
        height: 56px;
        gap: 12px;
        padding: 0 14px;
    }

    .site-nav {
        display: none;
    }

    .brand__text {
        font-size: 15px;
    }

    .site-main {
        padding: 20px 14px 40px;
    }

    .hero__title {
        font-size: 26px;
    }

    .gobang-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .gobang-stage {
        padding: 10px;
    }

    .gobang-board {
        padding: 6px;
    }

    .gobang-rules {
        order: -1;
    }

    .gobang-panel__grid {
        grid-template-columns: 1fr;
    }

    .gobang-stat--wide {
        grid-column: span 1;
    }

    .yy-hero {
        padding: 16px;
    }

    .yy-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .yy-list {
        grid-template-columns: minmax(0, 1fr);
        padding: 10px;
    }

    .yy-modal__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .ad-grid__texts {
        grid-template-columns: minmax(0, 1fr);
    }

    .ad-grid__images {
        grid-template-columns: minmax(0, 1fr);
    }

    .ads-hero {
        padding: 16px;
    }
}

/* ---------- payments (M11) ---------- */

.badge--muted {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

.badge--warning {
    background: hsl(38 92% 50% / 0.16);
    color: hsl(28 80% 38%);
}

[data-theme='dark'] .badge--warning {
    color: hsl(38 92% 66%);
}

/* --- top-up page --- */

.topup-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background:
        radial-gradient(120% 160% at 100% 0%, hsl(199 89% 48% / 0.12), transparent 60%),
        hsl(var(--card));
}

.topup-hero__title {
    margin: 0 0 6px;
    font-size: 22px;
}

.topup-hero__lead {
    margin: 0;
    max-width: 60ch;
    color: hsl(var(--muted-foreground));
    font-size: 14px;
}

.topup-hero__balance {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    padding: 10px 18px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--background));
}

.topup-hero__balance span,
.topup-hero__balance small {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.topup-hero__balance strong {
    font-size: 26px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.topup-panel {
    margin-top: 16px;
}

.topup-panel__status {
    margin: 0;
    padding: 10px 20px 16px;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

.topup-panel__status.is-error {
    color: hsl(var(--destructive));
}

.topup-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px 4px;
}

.topup-methods__label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
}

.topup-methods__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.topup-method {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 132px;
    padding: 10px 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: hsl(var(--background));
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.topup-method:hover {
    background: hsl(var(--accent));
}

.topup-method.is-selected {
    border-color: hsl(var(--foreground));
    background: hsl(var(--primary) / 0.06);
    box-shadow: inset 0 0 0 1px hsl(var(--foreground));
}

.topup-method__name {
    font-weight: 600;
    font-size: 14px;
}

.topup-method__code {
    font-size: 11px;
    color: hsl(var(--muted-foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.topup-method__hint {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.topup-packages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 16px 20px;
}

.topup-package {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--background));
}

.topup-package__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.topup-package__points {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.topup-package__points span {
    font-size: 12px;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}

.topup-package__hint,
.topup-package__price {
    margin: 0;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.topup-package__price {
    margin-top: 2px;
    font-size: 13px;
    color: hsl(var(--foreground));
}

.topup-package__buy {
    margin-top: 8px;
    width: 100%;
}

.topup-custom {
    margin: 0 20px 16px;
    padding: 14px 16px;
    border: 1px dashed hsl(var(--border));
    border-radius: 14px;
}

.topup-custom__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.topup-custom__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.topup-custom__hint {
    margin: 2px 0 0;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.topup-custom__estimate {
    font-size: 13px;
    font-weight: 600;
    color: hsl(142 60% 32%);
}

[data-theme='dark'] .topup-custom__estimate {
    color: hsl(142 60% 60%);
}

.topup-custom__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.topup-custom__field {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 200px;
    padding: 0 12px;
    border: 1px solid hsl(var(--input));
    border-radius: 10px;
    background: hsl(var(--background));
}

.topup-custom__field > span {
    color: hsl(var(--muted-foreground));
    font-size: 14px;
}

.topup-custom__field .input {
    flex: 1;
    border: 0;
    padding-left: 0;
    background: transparent;
}

.topup-custom__field .input:focus {
    outline: none;
    box-shadow: none;
}

.topup-custom__error {
    margin: 8px 0 0;
    font-size: 12px;
    color: hsl(var(--destructive));
}

.topup-redeem {
    margin-top: 16px;
}

.redeem-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
}

.redeem-form .input {
    flex: 1 1 220px;
}

.topup-redeem [data-redeem-status] {
    margin: 4px 12px 8px;
    font-size: 13px;
}

/* --- QR dialog --- */

.topup-dialog {
    width: min(420px, calc(100vw - 32px));
}

.topup-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 18px 18px;
    text-align: center;
}

.topup-qr__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.topup-qr p {
    margin: 0;
    font-size: 13px;
}

.topup-qr__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 232px;
    height: 232px;
    margin: 12px 0;
    padding: 8px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: #fff;
}

.topup-qr__image svg {
    width: 100%;
    height: 100%;
}

.topup-qr__link {
    font-size: 12px;
    color: hsl(199 89% 38%);
    text-decoration: underline;
}

/* --- top-up result --- */

.topup-result {
    padding: 26px 24px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
}

.topup-result.is-success {
    border-color: hsl(142 70% 45% / 0.5);
    background:
        radial-gradient(120% 160% at 0% 0%, hsl(142 70% 45% / 0.12), transparent 60%),
        hsl(var(--card));
}

.topup-result.is-failed {
    border-color: hsl(var(--destructive) / 0.45);
    background:
        radial-gradient(120% 160% at 0% 0%, hsl(var(--destructive) / 0.1), transparent 60%),
        hsl(var(--card));
}

.topup-result__title {
    margin: 0 0 6px;
    font-size: 22px;
}

.topup-result__desc {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 14px;
}

.topup-result__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.topup-result__metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: hsl(var(--background));
}

.topup-result__metric span {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.topup-result__metric strong {
    font-size: 14px;
    word-break: break-all;
}

.topup-result__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px !important;
}

.topup-result__points {
    padding: 14px 16px;
    border: 1px dashed hsl(var(--border));
    border-radius: 12px;
}

.topup-result__points p {
    margin: 0;
    font-size: 13px;
}

.topup-result__points-title {
    font-weight: 600;
    font-size: 14px !important;
    margin-bottom: 4px !important;
}

.topup-result__points-total {
    margin-top: 6px !important;
    font-weight: 700;
    font-size: 16px !important;
}

.topup-result__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.topup-result__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* --- third-party payment checkout --- */

.pay-page {
    max-width: 900px;
}

.pay-card {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
    overflow: hidden;
}

.pay-card__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 22px 24px;
    border-bottom: 1px solid hsl(var(--border));
}

.pay-card__title {
    margin: 0;
    font-size: 20px;
}

.pay-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 24px;
    padding: 22px 24px;
}

.pay-card__main,
.pay-card__side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pay-card__section {
    padding: 12px 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
}

.pay-card__section--muted {
    background: hsl(var(--muted));
}

.pay-card__section p {
    margin: 0;
    font-size: 13px;
}

.pay-card__label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
}

.pay-card__desc {
    font-size: 14px !important;
    font-weight: 500;
}

.pay-card__meta {
    margin: 0;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    word-break: break-all;
}

.pay-card__strong {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.pay-card__error {
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
    font-size: 13px;
}

.pay-card__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pay-card__metric {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
}

.pay-card__metric span {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.pay-card__metric strong {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.pay-card__divider {
    height: 1px;
    margin: 6px 0;
    background: hsl(var(--border));
}

.pay-card__link {
    font-size: 13px;
    color: hsl(199 89% 38%);
    text-decoration: underline;
}

.pay-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid hsl(var(--border));
    background: hsl(var(--muted));
}

.pay-card__foot form {
    margin: 0;
}

/* --- developer applications (Payment apps tab) --- */

.pay-app-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 12px;
}

.pay-app {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--background));
}

.pay-app__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pay-app__name {
    margin: 0 0 2px;
    font-size: 15px;
}

.pay-app__meta {
    margin: 0;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.pay-app__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    word-break: break-all;
}

.pay-app__desc {
    margin: 0;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

.pay-app__note {
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: hsl(38 92% 50% / 0.12);
    color: hsl(28 80% 34%);
    font-size: 12px;
}

[data-theme='dark'] .pay-app__note {
    color: hsl(38 92% 68%);
}

.pay-app__facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 12px;
    margin: 0;
    font-size: 12px;
}

.pay-app__facts dt {
    color: hsl(var(--muted-foreground));
}

.pay-app__facts dd {
    margin: 0;
    word-break: break-all;
}

.pay-app__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}

.pay-app-create {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 12px;
    font-size: 13px;
}

.pay-guide {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.pay-guide code {
    padding: 1px 4px;
    border-radius: 4px;
    background: hsl(var(--muted));
    font-size: 12px;
}

.pay-guide-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 18px 16px;
}

.pay-guide-body p {
    margin: 0;
    font-size: 13px;
}

.pay-code {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: hsl(var(--muted));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
}

.uc-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    font-size: 13px;
}

.oauth-apps .uc-filter {
    padding: 8px 12px 12px;
}

@media (max-width: 760px) {
    .topup-hero {
        padding: 18px;
    }

    .topup-hero__balance {
        align-items: flex-start;
        width: 100%;
    }

    .topup-packages {
        grid-template-columns: minmax(0, 1fr);
    }

    .topup-custom {
        margin: 0 14px 14px;
    }

    .pay-card__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 18px;
    }

    .pay-card__metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .pay-card__head,
    .pay-card__foot {
        padding-left: 18px;
        padding-right: 18px;
    }

    .topup-result {
        padding: 20px 18px;
    }
}

/* ---------- informational pages (M12) ---------- */

.page-narrow {
    max-width: 1100px;
    margin: 0 auto;
    padding: 22px 4px 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.page-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    color: hsl(var(--muted-foreground));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.page-card {
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--card));
    padding: 18px 20px;
}

.page-card--flush {
    padding: 0;
    overflow: hidden;
}

.page-card__title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
}

.page-text {
    margin: 0 0 10px;
    color: hsl(var(--muted-foreground));
    font-size: 13.5px;
    line-height: 1.8;
}

.page-text:last-child {
    margin-bottom: 0;
}

.page-text--pre {
    white-space: pre-line;
}

.page-back {
    margin: 4px 0 0;
    font-size: 12.5px;
}

.page-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: hsl(var(--accent));
    font-size: 19px;
    line-height: 1;
}

.page-icon--ok { background: hsl(150 60% 94%); }
.page-icon--wait { background: hsl(40 90% 93%); }
.page-icon--info { background: hsl(200 80% 94%); }

.page-grid {
    display: grid;
    gap: 14px;
}

.page-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.page-card--row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.page-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.page-card--hero {
    background:
        radial-gradient(circle at top left, hsl(199 90% 60% / 0.12), transparent 36%),
        radial-gradient(circle at bottom right, hsl(43 95% 58% / 0.12), transparent 34%),
        hsl(var(--card));
    padding: 26px 28px;
}

.page-hero__title {
    margin: 6px 0 12px;
    font-size: 27px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.page-hero__lead {
    margin: 0 0 16px;
    color: hsl(var(--muted-foreground));
    font-size: 14px;
    line-height: 1.85;
    max-width: 760px;
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.page-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.page-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 96px;
    padding: 10px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--background) / 0.8);
}

.page-metric__value {
    font-size: 20px;
    font-weight: 700;
}

.page-metric__label {
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.page-quote {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px dashed hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--background));
}

.page-quote__label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
}

.page-quote__body {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 13px;
    line-height: 1.8;
}

.page-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-section__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-section__title {
    margin: 0;
    font-size: 20px;
}

.page-section__lead {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 13px;
}

/* zones */

.zone-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--card));
}

.zone-hero__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px;
    font-size: 24px;
}

.zone-hero__icon {
    font-size: 24px;
    line-height: 1;
}

.zone-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zone-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    background: hsl(var(--background));
    font-size: 13px;
}

.zone-pill:hover {
    text-decoration: none;
    background: hsl(var(--accent));
}

.zone-pill.is-active {
    background: hsl(var(--foreground));
    border-color: hsl(var(--foreground));
    color: hsl(var(--background));
}

.zone-pill__count {
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.zone-pill.is-active .zone-pill__count {
    color: hsl(var(--background) / 0.7);
}

/* documents */

.doc-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.doc-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: hsl(var(--muted-foreground));
    font-size: 12px;
}

.tag--source {
    background: hsl(200 80% 94%);
    color: hsl(200 70% 32%);
}

.doc-card__title {
    margin: 10px 0 12px;
    font-size: 20px;
    font-weight: 500;
}

.doc-card__title.is-bold {
    font-weight: 700;
}

.doc-card__body {
    padding: 16px 18px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--background));
}

.doc-index {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--card));
}

.doc-index a {
    padding: 4px 10px;
    border-radius: 999px;
    background: hsl(var(--secondary));
    font-size: 12px;
    color: hsl(var(--secondary-foreground));
}

.doc-index a:hover {
    text-decoration: none;
    background: hsl(var(--accent));
}

.doc-section__title {
    margin: 0 0 10px;
    font-size: 17px;
}

/* help centre */

.help-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 22px 4px 48px;
    align-items: start;
}

.help-nav {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 6px;
    list-style: none;
}

.help-nav__item {
    display: block;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    color: hsl(var(--foreground));
}

.help-nav__item:hover {
    text-decoration: none;
    background: hsl(var(--accent));
}

.help-nav__item.is-active {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-weight: 600;
}

.help-nav__group {
    padding: 10px 6px 6px;
    border-top: 1px solid hsl(var(--border));
}

.help-nav__label {
    margin: 0 0 6px;
    padding: 0 12px;
    color: hsl(var(--muted-foreground));
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.help-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.help-toc {
    padding: 14px 18px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--card));
}

.help-toc__title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
}

.help-toc__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.help-toc__item--l2 { padding-left: 0; }
.help-toc__item--l3 { padding-left: 16px; color: hsl(var(--muted-foreground)); }

/* FAQ */

.faq-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 4px 48px;
}

.faq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--card));
}

.faq-tabs__item {
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}

.faq-tabs__item:hover {
    text-decoration: none;
    background: hsl(var(--accent));
    color: hsl(var(--foreground));
}

.faq-tabs__item.is-active {
    background: hsl(var(--foreground));
    color: hsl(var(--background));
}

.faq-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.faq-head .page-title {
    margin: 0;
    font-size: 26px;
}

.faq-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-grid {
    display: grid;
    gap: 12px;
}

.faq-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.faq-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.faq-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.faq-grid--sample { grid-template-columns: 220px minmax(0, 1fr); }
.faq-span-2 { grid-column: span 2; }

.faq-topic-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--card));
    transition: background-color .15s ease, transform .15s ease;
}

.faq-topic-card:hover {
    text-decoration: none;
    background: hsl(var(--accent) / 0.5);
    transform: translateY(-1px);
}

.faq-topic-card__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.faq-topic-card__desc {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 13px;
    line-height: 1.8;
}

.faq-topic-card__more {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: hsl(var(--foreground));
}

.faq-step {
    padding: 14px 16px;
    border-radius: 14px;
    background: hsl(var(--secondary) / 0.55);
}

.faq-step__label {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 11px;
    font-weight: 500;
}

.faq-step__title {
    margin: 6px 0;
    font-weight: 600;
    font-size: 14px;
}

.faq-step__desc {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 13px;
    line-height: 1.8;
}

.faq-check-list {
    margin: 0;
    padding-left: 18px;
    color: hsl(var(--muted-foreground));
    font-size: 13px;
    line-height: 2;
}

.faq-note {
    padding: 14px 16px;
    border-radius: 14px;
    background: hsl(var(--secondary) / 0.5);
    color: hsl(var(--muted-foreground));
    font-size: 13px;
    line-height: 1.85;
}

.faq-note p {
    margin: 0;
}

.faq-note__title {
    margin-bottom: 4px !important;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.faq-note-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-note--line {
    border: 1px solid hsl(var(--border));
    background: transparent;
}

.faq-stat {
    padding: 14px 16px;
    border-radius: 14px;
    background: hsl(var(--secondary) / 0.5);
}

.faq-stat__label {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.faq-stat__value {
    margin: 6px 0 0;
    font-size: 22px;
    font-weight: 700;
}

.faq-stat__hint {
    margin: 2px 0 0;
    color: hsl(var(--muted-foreground));
    font-size: 12px;
}

.faq-formula {
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: hsl(var(--secondary) / 0.55);
    font-size: 13px;
    line-height: 1.8;
}

.faq-formula--muted {
    margin: 14px 0 0;
    color: hsl(var(--muted-foreground));
}

.faq-metric {
    padding: 14px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--card));
}

.faq-metric__label {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.faq-metric__value {
    margin: 6px 0 0;
    font-size: 20px;
    font-weight: 600;
}

.faq-metric__value--lg { font-size: 28px; }
.faq-metric__value--sm { font-size: 15px; }

.faq-metric__hint {
    margin: 4px 0 0;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.faq-sample {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 12.5px;
}

.faq-sample__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
}

.heat-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.heat-stage {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    font-size: 13px;
}

.heat-stage__dot {
    width: 13px;
    height: 13px;
    border-radius: 999px;
}

.faq-price-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
}

.faq-price-row__label {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}

.faq-price-row__value {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 12.5px;
    text-align: right;
}

.faq-status {
    padding: 14px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
}

.faq-status__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
}

.faq-status__desc {
    margin: 6px 0 0;
    color: hsl(var(--muted-foreground));
    font-size: 12.5px;
    line-height: 1.8;
}

.badge-card {
    padding: 16px 18px;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--card));
}

.badge-card__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.badge-card__icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 14px;
    font-size: 21px;
    line-height: 1;
}

.badge-card__main {
    min-width: 0;
    flex: 1;
}

.badge-card__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.badge-card__name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.badge-card__rules {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: hsl(var(--secondary) / 0.45);
}

.badge-card__rules-label {
    margin: 0 0 2px;
    font-size: 11.5px;
    font-weight: 600;
}

.level-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.level-cell__icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid;
    border-radius: 12px;
    font-size: 17px;
}

.level-cell__name {
    font-weight: 600;
}

.level-cell__hint {
    color: hsl(var(--muted-foreground));
    font-size: 11px;
}

.rss-item {
    padding: 14px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--secondary) / 0.3);
}

.rss-item + .rss-item {
    margin-top: 10px;
}

.rss-item--compact {
    background: hsl(var(--card));
}

.rss-item__label {
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 600;
}

.rss-item__url {
    margin: 0 0 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    word-break: break-all;
}

/* tables */

.table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead {
    background: hsl(var(--secondary) / 0.5);
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.data-table th,
.data-table td {
    padding: 10px 14px;
    text-align: left;
    border-top: 1px solid hsl(var(--border));
}

.data-table thead th {
    border-top: 0;
}

.data-table tbody tr:hover {
    background: hsl(var(--accent) / 0.35);
}

.data-table .is-nowrap {
    white-space: nowrap;
    font-weight: 600;
}

/* sidebar extras */

.side-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12.5px;
    color: hsl(var(--muted-foreground));
}

.side-stats strong {
    color: hsl(var(--foreground));
    font-size: 14px;
}

.side-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.side-list__item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 16px;
    border-top: 1px solid hsl(var(--border) / 0.7);
    font-size: 13px;
}

.side-list__item:first-child {
    border-top: 0;
}

.side-list__rank {
    flex: 0 0 auto;
    width: 18px;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
    font-weight: 600;
}

.side-list__link {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-list__meta {
    flex: 0 0 auto;
    color: hsl(var(--muted-foreground));
    font-size: 11px;
}

.side-list--plain .side-list__item {
    align-items: center;
}

.side-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.side-links__item {
    padding: 4px 10px;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    font-size: 12px;
}

.side-links__item:hover {
    text-decoration: none;
    background: hsl(var(--accent));
}

.panel__more {
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

/* friend links */

.friend-hero {
    padding: 22px 24px;
    border: 1px solid hsl(var(--border));
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, hsl(199 90% 60% / 0.14), transparent 36%),
        radial-gradient(circle at bottom right, hsl(43 95% 58% / 0.14), transparent 32%),
        hsl(var(--card));
}

.friend-hero__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.friend-hero__actions {
    margin-top: 16px;
}

.friend-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.friend-chip {
    padding: 6px 13px;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    background: hsl(var(--background) / 0.8);
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.friend-chip strong {
    color: hsl(var(--foreground));
    font-weight: 600;
}

.friend-chip--on {
    border-color: hsl(199 80% 60% / 0.4);
    background: hsl(199 90% 60% / 0.12);
    color: hsl(199 70% 32%);
}

.friend-chip--on strong {
    color: inherit;
}

.friend-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.friend-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--background) / 0.7);
    color: hsl(var(--muted-foreground));
    font-size: 12px;
    line-height: 1.75;
}

.friend-notes p {
    margin: 0;
}

.friend-notes--inline {
    margin-top: 0;
}

.friend-list__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid hsl(var(--border));
}

.friend-list__head .page-card__title {
    margin: 0;
}

.friend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.friend-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--background));
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.friend-card:hover {
    text-decoration: none;
    transform: translateY(-1px);
    border-color: hsl(var(--foreground) / 0.2);
    box-shadow: 0 8px 20px hsl(var(--foreground) / 0.08);
}

.friend-card__logo {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: #fff;
    color: hsl(var(--muted-foreground));
    font-size: 15px;
    font-weight: 600;
}

.friend-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 4px;
}

.friend-card__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.friend-card__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}

.friend-card__host {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: hsl(var(--muted-foreground));
    font-size: 11px;
}

.friend-card__arrow {
    color: hsl(var(--muted-foreground));
    font-size: 12px;
}

/* prison */

.prison-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.prison-tab {
    min-width: 126px;
    padding: 9px 13px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--background) / 0.7);
}

.prison-tab:hover {
    text-decoration: none;
    background: hsl(var(--accent));
}

.prison-tab.is-active {
    border-color: hsl(var(--foreground) / 0.2);
    background: hsl(var(--foreground));
    color: hsl(var(--background));
}

.prison-tab__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.prison-tab__count {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: hsl(var(--muted-foreground));
}

.prison-tab.is-active .prison-tab__count {
    color: hsl(var(--background) / 0.75);
}

.prison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.prison-card {
    padding: 14px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--muted) / 0.14) 100%);
    box-shadow: 0 6px 16px hsl(var(--foreground) / 0.05);
}

.prison-card__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.prison-card__avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    overflow: visible;
    border-radius: 999px;
    background: hsl(var(--secondary));
    font-size: 14px;
    font-weight: 700;
}

.prison-card__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
}

.prison-card__stamp {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 2px solid hsl(var(--background));
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
}

.prison-card__stamp--danger {
    background: hsl(var(--destructive));
    transform: rotate(10deg);
}

.prison-card__stamp--warning {
    background: hsl(35 90% 48%);
    transform: rotate(-6deg);
}

.prison-card__main {
    min-width: 0;
    flex: 1;
}

.prison-card__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.prison-card__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 600;
}

.prison-card__link {
    color: hsl(var(--muted-foreground));
    font-size: 12px;
}

.prison-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    color: hsl(var(--muted-foreground));
    font-size: 10.5px;
}

.prison-card__reason {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: hsl(var(--background) / 0.82);
}

.prison-card__reason-label {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.prison-card__reason-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
}

.prison-pager {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.prison-pager__item,
.prison-pager__step,
.prison-pager__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid hsl(var(--border));
    border-right: 0;
    background: hsl(var(--background));
    font-size: 13px;
}

.prison-pager > :first-child {
    border-radius: 14px 0 0 14px;
}

.prison-pager > :last-child {
    border-right: 1px solid hsl(var(--border));
    border-radius: 0 14px 14px 0;
}

.prison-pager__item:hover,
.prison-pager__step:hover {
    text-decoration: none;
    background: hsl(var(--accent));
}

.prison-pager__item.is-active {
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    font-weight: 600;
}

.prison-pager__step.is-disabled {
    color: hsl(var(--muted-foreground) / 0.5);
}

/* history */

.history-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.history-metric {
    min-width: 130px;
    padding: 12px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--secondary) / 0.4);
}

.history-metric__label {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.history-metric__value {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: 700;
}

.history-list {
    display: flex;
    flex-direction: column;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-top: 1px solid hsl(var(--border) / 0.7);
}

.history-item:first-child {
    border-top: 0;
}

.history-item:hover {
    text-decoration: none;
}

.history-item__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.history-item__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
}

.history-item:hover .history-item__title {
    color: hsl(var(--primary));
}

.history-item__meta {
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.history-item__day {
    flex: 0 0 auto;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

/* universe */

.universe-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.universe-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    background: hsl(var(--background));
    font-size: 12.5px;
}

.universe-tab:hover {
    text-decoration: none;
    background: hsl(var(--accent));
}

.universe-tab.is-active {
    background: hsl(var(--foreground));
    border-color: hsl(var(--foreground));
    color: hsl(var(--background));
}

.universe-tab__logo {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    object-fit: contain;
}

.universe-tab__count {
    color: hsl(var(--muted-foreground));
    font-size: 10.5px;
}

.universe-tab.is-active .universe-tab__count {
    color: hsl(var(--background) / 0.7);
}

.universe-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.universe-card {
    padding: 16px 18px;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--card));
}

.universe-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.universe-card__source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.universe-card__source img {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    object-fit: contain;
}

.universe-card__title {
    margin: 8px 0;
    font-size: 17px;
    line-height: 1.5;
}

.universe-card__summary {
    margin: 0 0 10px;
    color: hsl(var(--muted-foreground));
    font-size: 13px;
    line-height: 1.8;
}

.universe-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: hsl(var(--muted-foreground));
    font-size: 12px;
}

.universe-action {
    padding: 3px 10px;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.universe-action:hover {
    background: hsl(var(--accent));
}

.universe-action.is-active {
    border-color: hsl(350 80% 60% / 0.5);
    background: hsl(350 90% 60% / 0.1);
    color: hsl(350 70% 45%);
}

.universe-action--static {
    border-style: dashed;
    cursor: default;
}

/* leaderboards */

.lb-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--card));
}

.lb-hero__actions {
    display: flex;
    gap: 7px;
}

.lb-tab {
    padding: 7px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    background: hsl(var(--background));
    font-size: 12.5px;
}

.lb-tab:hover {
    text-decoration: none;
    background: hsl(var(--accent));
}

.lb-tab.is-active {
    background: hsl(var(--foreground));
    border-color: hsl(var(--foreground));
    color: hsl(var(--background));
}

.lb-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.lb-main {
    min-width: 0;
}

.lb-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lb-table {
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--card));
}

.lb-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 132px;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid hsl(var(--border));
    color: inherit;
}

.lb-row:first-child {
    border-top: 0;
}

.lb-row:hover {
    text-decoration: none;
    background: hsl(var(--accent) / 0.35);
}

.lb-row--head {
    background: hsl(var(--muted) / 0.25);
    color: hsl(var(--muted-foreground));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lb-row--head:hover {
    background: hsl(var(--muted) / 0.25);
}

.lb-row.is-current {
    background: hsl(43 95% 52% / 0.1);
}

.lb-row__score {
    text-align: right;
}

.lb-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 3px 8px;
    border-radius: 999px;
    background: hsl(var(--secondary));
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
    font-weight: 600;
}

.lb-rank--top {
    background: transparent;
    font-size: 16px;
}

.lb-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.lb-user__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lb-user__name {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 500;
}

.lb-user__meta {
    color: hsl(var(--muted-foreground));
    font-size: 11px;
}

.lb-you {
    padding: 1px 7px;
    border-radius: 999px;
    background: hsl(43 95% 52% / 0.18);
    color: hsl(35 80% 38%);
    font-size: 10px;
}

.lb-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.lb-score strong {
    color: hsl(160 70% 34%);
    font-size: 14px;
}

.lb-score span {
    color: hsl(var(--muted-foreground));
    font-size: 11px;
}

.lb-empty {
    padding: 26px 16px;
    color: hsl(var(--muted-foreground));
    font-size: 13px;
}

.lb-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid hsl(var(--border));
    background: hsl(var(--muted) / 0.15);
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.lb-me {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.lb-me__rank {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: hsl(43 95% 52% / 0.18);
    color: hsl(35 80% 38%);
    font-size: 13px;
    font-weight: 700;
}

.lb-me__name {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
}

.lb-me__meta {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.lb-me__score {
    padding: 10px 12px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--background) / 0.8);
}

.lb-me__value {
    margin: 4px 0 0;
    color: hsl(160 70% 34%);
    font-size: 19px;
    font-weight: 700;
}

.lb-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* collections */

.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.collection-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--secondary) / 0.12);
    color: inherit;
    transition: background-color .15s ease;
}

.collection-card:hover {
    text-decoration: none;
    background: hsl(var(--accent) / 0.3);
}

.collection-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.collection-card__title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
}

.collection-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 12px;
    line-height: 1.7;
}

.collection-card__meta,
.collection-card__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
    color: hsl(var(--muted-foreground));
    font-size: 11px;
}

.collection-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--card));
}

.collection-hero__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.collection-hero__title-row .page-title {
    margin: 0;
}

.collection-hero__actions {
    display: flex;
    gap: 8px;
}

.collection-items {
    display: flex;
    flex-direction: column;
}

.collection-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid hsl(var(--border) / 0.7);
}

.collection-item:first-child {
    border-top: 0;
}

.collection-item__title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
}

.collection-item__meta {
    margin: 0 0 6px;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.collection-item__excerpt {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 12.5px;
    line-height: 1.7;
}

.pending-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pending-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid hsl(var(--border) / 0.7);
}

.pending-item:first-child {
    border-top: 0;
}

.pending-item__title {
    display: block;
    margin-bottom: 3px;
    font-size: 13.5px;
    font-weight: 500;
}

.pending-item__actions {
    display: flex;
    gap: 6px;
}

/* OAuth consent */

.oauth-page {
    display: flex;
    justify-content: center;
    padding: 36px 16px 60px;
}

.oauth-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    width: min(760px, 100%);
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: 18px;
    background: hsl(var(--card));
}

.oauth-card__main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
}

.oauth-card__side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border-left: 1px solid hsl(var(--border));
    background: hsl(var(--muted) / 0.25);
    font-size: 12px;
    line-height: 1.7;
    color: hsl(var(--muted-foreground));
}

.oauth-card__foot {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid hsl(var(--border));
}

.oauth-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--muted) / 0.22);
}

.oauth-account__name {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.oauth-account__handle {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.oauth-account__shield {
    font-size: 18px;
}

.oauth-scopes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oauth-scopes__title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.oauth-scope {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
}

.oauth-scope__check {
    color: hsl(var(--muted-foreground));
    font-size: 12px;
    line-height: 1.6;
}

.oauth-scope__title {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}

.oauth-scope__desc {
    margin: 1px 0 0;
    color: hsl(var(--muted-foreground));
    font-size: 11.5px;
}

.oauth-brands {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.oauth-brand {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: hsl(var(--background));
    font-weight: 600;
    color: hsl(var(--foreground));
}

.oauth-brand img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.oauth-brand__arrow {
    color: hsl(var(--muted-foreground));
    font-size: 14px;
}

.oauth-side__title {
    margin: 2px 0 0;
    text-align: center;
    font-size: 15px;
    color: hsl(var(--foreground));
}

.oauth-side__block {
    margin-top: 4px;
}

.oauth-side__label {
    margin: 0 0 2px;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.oauth-card--error {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(560px, 100%);
    padding: 26px;
}

.oauth-card--error .oauth-card__foot {
    justify-content: flex-end;
    padding: 12px 0 0;
    border-top: 1px solid hsl(var(--border));
}

.oauth-error {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px dashed hsl(var(--border));
    border-radius: 14px;
    background: hsl(var(--muted) / 0.25);
}

.oauth-error__code {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    word-break: break-all;
}

/* custom pages */

.custom-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 4px 48px;
}

.custom-page__body {
    padding: 20px 24px;
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    background: hsl(var(--card));
}

.addon-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* toasts */

.app-toast {
    padding: 11px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    font-size: 13px;
    transition: opacity .25s ease, transform .25s ease;
}

.app-toast--success {
    border-color: hsl(150 50% 70%);
    background: hsl(150 60% 96%);
    color: hsl(150 55% 26%);
}

.app-toast--error {
    border-color: hsl(0 60% 80%);
    background: hsl(0 80% 97%);
    color: hsl(0 60% 38%);
}

.app-toast.is-leaving {
    opacity: 0;
    transform: translateY(6px);
}

.access-denied__message {
    margin: 6px 0 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: hsl(var(--destructive) / 0.08);
    color: hsl(var(--destructive));
    font-size: 12.5px;
}

@media (max-width: 960px) {
    .page-grid--2,
    .page-grid--3,
    .faq-grid--2,
    .faq-grid--3,
    .faq-grid--4,
    .faq-grid--5,
    .faq-grid--sample {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq-span-2 {
        grid-column: auto;
    }

    .help-layout,
    .friend-layout,
    .lb-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .oauth-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .oauth-card__side {
        border-left: 0;
        border-top: 1px solid hsl(var(--border));
    }
}

@media (max-width: 760px) {
    .page-narrow,
    .help-layout,
    .faq-page {
        padding-left: 0;
        padding-right: 0;
    }

    .page-card--hero {
        padding: 20px 18px;
    }

    .page-hero__title {
        font-size: 22px;
    }

    .lb-row {
        grid-template-columns: 52px minmax(0, 1fr) 96px;
        gap: 8px;
        padding: 9px 12px;
    }

    .prison-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .oauth-card__main,
    .oauth-card__side {
        padding: 18px;
    }
}