@layer primitives {
    :is(.btn-primary, .btn-secondary, .btn-danger, .btn-danger-outline, .btn-danger-quiet, .btn-ghost, .btn-selection, .btn-icon) {
        display: var(--button-display, inline-flex);
        align-items: center;
        justify-content: center;
        gap: var(--button-gap, var(--space-8));
        min-height: var(--button-height, var(--control-height));
        padding: var(--button-padding, var(--space-8) var(--space-16));
        border: 1px solid var(--button-border, var(--color-border-strong));
        border-radius: var(--button-radius, var(--radius-lg));
        background: var(--button-background, var(--color-control));
        color: var(--button-color, var(--color-text));
        font-family: var(--font-body);
        font-size: var(--button-text-size, var(--text-sm));
        font-weight: var(--weight-semibold);
        line-height: 1.4;
        text-decoration: none;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        box-shadow: none;
        transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
    }
    .btn-primary, .btn-secondary[aria-pressed="true"] { --button-background: var(--color-primary); --button-border: var(--color-primary); --button-color: var(--color-on-primary); }
    .btn-primary:hover:not(:disabled) { --button-background: var(--color-primary-hover); --button-border: var(--color-primary-hover); }
    .btn-secondary:hover:not(:disabled) { --button-border: var(--color-primary); }
    .btn-danger { --button-background: var(--color-danger); --button-border: var(--color-danger); --button-color: var(--color-on-danger); }
    .btn-danger:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--color-on-danger); }
    .btn-danger-outline { --button-background: transparent; --button-border: var(--color-danger-text); --button-color: var(--color-danger-text); }
    .btn-danger-quiet { --button-background: transparent; --button-border: transparent; --button-color: var(--color-danger-text); }
    :is(.btn-danger-outline, .btn-danger-quiet):hover:not(:disabled) { --button-background: var(--color-control); --button-border: var(--color-danger-text); }
    .btn-ghost { --button-background: transparent; --button-border: transparent; --button-color: var(--color-muted); }
    .btn-ghost:hover:not(:disabled) { --button-background: var(--color-control); --button-color: var(--color-text); }
    .btn-selection { --button-background: transparent; --button-border: transparent; --button-color: var(--color-muted); }
    .btn-selection:hover:not(:disabled) { --button-color: var(--color-text); }
    .btn-selection[data-selected="true"] { --button-color: var(--color-on-primary); }
    .ui-selection-indicator { position: absolute; pointer-events: none; border-radius: var(--selection-radius, var(--radius-lg)); background: var(--color-primary); }
    .ui-disclosure-panel { display: grid; grid-template-rows: var(--disclosure-rows, 0fr); visibility: var(--disclosure-visibility, hidden); transition: grid-template-rows var(--motion-layout) var(--ease-out), visibility 0s var(--motion-layout); }
    .ui-disclosure-panel > * { min-height: 0; overflow: hidden; }
    .ui-disclosure-trigger[aria-expanded="true"] + .ui-disclosure-panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
    .ui-disclosure-chevron { transition: transform var(--motion-layout) var(--ease-out); }
    .ui-disclosure-trigger[aria-expanded="true"] .ui-disclosure-chevron { transform: rotate(180deg); }
    .btn-icon { --button-padding: var(--space-8); width: var(--button-height, var(--control-height)); flex-shrink: 0; }
    .btn-sm { --button-height: var(--control-height-sm); --button-padding: var(--space-4) var(--space-8); --button-text-size: var(--text-xs); }
    :is(.btn-primary, .btn-secondary, .btn-danger, .btn-danger-outline, .btn-danger-quiet, .btn-ghost, .btn-selection, .btn-icon):focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
    :is(.btn-primary, .btn-secondary, .btn-danger, .btn-danger-outline, .btn-danger-quiet, .btn-ghost, .btn-selection, .btn-icon):disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
    .ui-card { min-width: 0; padding: var(--card-padding, var(--space-16)); border: var(--card-border-width, 1px) solid var(--card-border-color, var(--color-border)); border-radius: var(--card-radius, var(--radius-lg)); background: var(--card-background, var(--color-surface)); color: var(--color-text); overflow: hidden; }
    .ui-card { transition: border-color var(--motion-fast) var(--ease-standard); }
    :is(.ui-card:is(a, button), .ui-card-interactive):hover { border-color: var(--color-primary); }
    .ui-card:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
    .ui-card-interactive:focus-within { border-color: var(--color-primary); }
    .ui-card-flat { --card-padding: 0; --card-border-width: 0; --card-background: transparent; }
    .avatar-frame { flex-shrink: 0; overflow: hidden; border: var(--avatar-border-width, 1px) solid var(--color-border-strong); border-radius: var(--avatar-radius, var(--radius-xl)); background: transparent; }
    .avatar-frame > .avatar-image { box-sizing: border-box; width: 100%; height: 100%; border-radius: 0; }
    .avatar-frame:has(> .presence-indicator) { overflow: visible; }
    .avatar-frame:has(> .presence-indicator) > .avatar-image { overflow: hidden; border-radius: calc(var(--avatar-radius, var(--radius-xl)) - var(--avatar-border-width, 1px)); }
    .avatar-image { display: block; object-fit: contain; object-position: center; }
    .avatar-image-contain { object-fit: contain; }
    .friend-avatar { aspect-ratio: 1; }
    .avatar-image[data-avatar-state="loading"] { opacity: 0; }
    .avatar-image[data-avatar-state="fallback"] { object-fit: contain; padding: 20%; background: var(--color-control); }
    .ui-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: var(--count-badge-size, var(--space-24)); height: var(--count-badge-size, var(--space-24)); padding-inline: var(--count-badge-padding-inline, var(--space-6)); border-radius: var(--radius-full); background: var(--count-badge-background, var(--color-primary)); color: var(--count-badge-color, var(--color-on-primary)); font-size: var(--count-badge-text-size, var(--text-xs)); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; line-height: 1; vertical-align: middle; white-space: nowrap; }
    .ui-meta-chip { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--space-8); min-height: var(--chip-height, 28px); padding: var(--space-2) var(--space-12); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--chip-background, transparent); color: var(--color-muted); font-size: var(--chip-text-size, var(--text-sm)); font-weight: var(--weight-normal); line-height: 20px; }
    .ui-meta-chip :is(strong, a, dd) { color: var(--color-text-subtle); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
    .ui-meta-chip a { text-decoration: none; }
    .ui-meta-chip a:hover { color: var(--color-link); text-decoration: underline; }
    .ui-meta-chip > :is(dt, dd) { display: inline-flex; align-items: center; gap: var(--space-6); margin: 0; }
    .presence-indicator { --presence-color: var(--palette-muted-mid); display: grid; place-items: center; width: var(--presence-cutout-size, 24px); height: var(--presence-cutout-size, 24px); flex: 0 0 var(--presence-cutout-size, 24px); padding: var(--presence-cutout-padding, 6px); border: 0; border-radius: var(--radius-full); background: var(--presence-cutout, var(--color-canvas)); box-sizing: border-box; }
    .presence-indicator::after { content: ''; width: 100%; height: 100%; border-radius: var(--radius-full); background: var(--presence-color); }
    .presence-indicator.online { --presence-color: var(--palette-online); }
    .presence-indicator.in-game { --presence-color: var(--palette-in-game); }
    .presence-indicator.in-studio { --presence-color: var(--color-primary); }
    .ui-tooltip-portal { position: fixed; z-index: 1200; max-width: min(280px, calc(100vw - var(--space-16))); padding: var(--space-6) var(--space-10); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-control); color: var(--color-text); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.35; text-align: center; overflow-wrap: anywhere; pointer-events: none; }
    .ui-tooltip-portal::after { content: ''; position: absolute; left: var(--tooltip-arrow-x); width: 8px; height: 8px; background: var(--color-control); border: solid var(--color-border-strong); transform: translateX(-50%) rotate(45deg); }
    .ui-tooltip-portal[data-side="above"]::after { bottom: -5px; border-width: 0 1px 1px 0; }
    .ui-tooltip-portal[data-side="below"]::after { top: -5px; border-width: 1px 0 0 1px; }
    .ui-dialog { width: min(var(--dialog-width, 440px), calc(100% - var(--space-32))); max-height: var(--dialog-max-height, calc(100dvh - var(--space-32))); margin: var(--dialog-margin, auto); padding: var(--space-24); overflow: auto; border: 1px solid var(--color-border-strong); border-radius: var(--dialog-radius, var(--radius-xl)); background: var(--color-canvas); color: var(--color-text); }
    .ui-dialog::backdrop { background: var(--color-backdrop); }
    .ui-dialog h2 { margin: 0; font-size: var(--text-2xl); line-height: 1.25; font-weight: var(--weight-bold); overflow-wrap: anywhere; }
    .ui-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16); }
    .ui-dialog-header .btn-icon { margin: calc(-1 * var(--space-8)); }
    .report-dialog { --dialog-width: 520px; }
    .ui-dialog-description { margin-top: var(--space-12); color: var(--color-muted); font-size: var(--text-md); line-height: 1.5; }
    .ui-dialog-body { display: grid; gap: var(--space-16); margin-top: var(--space-24); }
    .ui-dialog-floating { position: fixed; inset: 0; z-index: 1101; height: fit-content; }
    .ui-dialog-overlay { position: fixed; inset: 0; z-index: 1100; background: var(--color-backdrop); }
    .action-dialog-captcha { display: flex; justify-content: center; margin-top: var(--space-16); min-height: 78px; }
    .join-pop { position: absolute; z-index: 1000; width: 300px; display: grid; gap: var(--space-8); padding: var(--space-12); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-canvas); color: var(--color-text); box-shadow: 0 8px 24px rgb(0 0 0 / 0.35); }
    .join-pop-head { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-4) var(--space-4) var(--space-8); }
    .join-pop-thumb { width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); object-fit: cover; background: var(--color-surface); }
    .join-pop-text { display: grid; min-width: 0; line-height: 1.3; }
    .join-pop-text span { color: var(--color-muted); font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .join-pop-text strong { font-size: var(--text-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .join-pop a { display: flex; justify-content: center; }
    .ui-dialog-error { margin-top: var(--space-16); color: var(--color-error); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
    .ui-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-24); }
    .ui-field { display: flex; flex-direction: column; gap: var(--space-8); color: var(--color-text-subtle); font-size: var(--text-sm); font-weight: var(--weight-medium); }
    .ui-input { width: 100%; min-width: 0; min-height: var(--control-height-touch); padding: var(--input-padding, var(--space-12)); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-control); color: var(--color-text); font: inherit; font-size: var(--text-sm); line-height: 1.5; }
    .ui-input:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
    textarea.ui-input { min-height: 120px; resize: vertical; }
    .ui-select { position: relative; display: block; }
    .ui-select select { width: 100%; appearance: none; font-weight: var(--weight-semibold); cursor: pointer; --input-padding: var(--space-12) var(--space-40) var(--space-12) var(--space-16); }
    .ui-select > img { position: absolute; top: 50%; right: var(--space-16); transform: translateY(-50%); pointer-events: none; }
    .ui-input::placeholder { color: var(--color-muted); }
    @media (max-width: 440px) {
        .ui-dialog { padding: var(--space-20); }
        .ui-dialog-actions > button { flex: 1; }
    }
}

@layer components {
    .avatar-image-contain { object-fit: contain; }
    .person-card { --person-card-size: var(--avatar-size-md); --person-card-height: var(--person-card-size); min-width: 0; color: var(--color-text); text-decoration: none; }
    .person-card-row { display: grid; grid-template-columns: var(--person-card-columns, var(--person-card-size) minmax(0, 1fr) auto); align-items: center; min-height: var(--person-card-size); height: var(--person-card-height); gap: var(--space-12); --card-padding: 0; --card-radius: var(--radius-2xl); }
    .person-card-row:not(:has(.person-card-actions)) { --person-card-columns: var(--person-card-size) minmax(0, 1fr); }
    .person-card-portrait { position: relative; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; background: var(--color-control); }
    .person-card-portrait.has-presence { overflow: visible; }
    .person-card-row > .person-card-portrait { align-self: stretch; width: var(--person-card-size); min-height: var(--person-card-size); --avatar-radius: 0; --avatar-border-width: 0; }
    .person-card-avatar { box-sizing: border-box; padding: var(--person-card-avatar-inset, 0); background: var(--color-control); object-fit: contain; object-position: center; }
    .person-card-body { min-width: 0; }
    .person-card-row > .person-card-body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding: var(--space-8) 0; }
    .person-card-name { display: block; min-width: 0; color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 20px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .person-card-name:hover { color: var(--color-link); }
    .person-card-meta { display: flex; align-items: center; gap: var(--space-4); min-width: 0; color: var(--color-muted); font-size: var(--text-xs); line-height: 18px; }
    .person-card-actions { display: flex; align-items: center; gap: var(--space-8); min-width: 0; padding: var(--space-8) var(--space-12) var(--space-8) 0; }
    .person-card-tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
    .person-card-tile .person-card-body { display: contents; }
    .person-card-tile > .person-card-portrait { width: 100%; aspect-ratio: 1; }
}