/* Live authenticated layout: same DOM, forms, API controllers and brand tokens. */
/* Keep the original body gradients and animated particle layer from styles.css. */
html { scrollbar-gutter: stable; }
body { background-attachment: fixed; }
.application-shell-v2 .bg-particles { opacity: 1; }
.application-shell-v2 .app-shell { display: block; min-width: 0; }
.application-shell-v2 .sidebar {
    position: sticky; top: 0; z-index: 30; display: flex; flex-direction: row;
    align-items: center; flex-wrap: wrap; gap: 16px 28px; height: auto; min-height: 80px;
    padding: 16px max(24px, calc((100vw - 1440px) / 2));
    border: 0; border-bottom: 1px solid var(--color-gray-800); background: #0a0a0af5;
    backdrop-filter: blur(16px);
}
.application-shell-v2 .brand { flex: 0 0 auto; gap: 12px; min-width: 0; }
.application-shell-v2 .brand img { width: 40px; height: 40px; }
.application-shell-v2 .brand strong { font-family: Georgia, serif; font-size: 23px; font-weight: 500; letter-spacing: .04em; }
.application-shell-v2 .brand small { font-size: 11px; color: var(--color-gray-400); font-weight: 400; }
.application-shell-v2 .main-nav { display: flex; flex: 1; gap: 8px; align-items: center; overflow: visible; padding: 0; }
.application-shell-v2 .main-nav > a, .application-shell-more > summary {
    min-height: 44px; padding: 10px 16px; border: 1px solid transparent;
    border-radius: 24px; font-size: 14px; font-weight: 600; white-space: nowrap;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.application-shell-v2 .main-nav > a.active { border-color: #c41e3a66; background: #c41e3a20; color: var(--color-gray-100); }
.application-shell-v2 .main-nav > a:hover, .application-shell-more > summary:hover { background: var(--color-gray-800); }
.application-shell-more { position: relative; }
.application-shell-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; color: var(--color-gray-300); }
.application-shell-more > summary::-webkit-details-marker { display: none; }
.application-shell-more > summary > [aria-hidden] { transition: transform 160ms ease; }
.application-shell-more[open] > summary > [aria-hidden] { transform: rotate(180deg); }
.application-shell-more-links {
    position: absolute; top: calc(100% + 12px); right: 0; width: 250px;
    padding: 8px; border: 1px solid var(--color-gray-700); border-radius: 14px;
    background: var(--color-gray-900); box-shadow: 0 12px 40px #0009;
}
.application-shell-more[open] .application-shell-more-links { animation: application-menu-enter 160ms ease-out both; }
.application-shell-v2 .application-shell-more-links a { border-radius: 8px; padding: 12px; font-size: 14px; }
.application-shell-v2 [hidden] { display: none !important; }
.application-shell-language { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--color-gray-400); }
.application-shell-language select { min-height: 40px; width: 66px; padding: 8px; border-radius: 10px; }
.application-shell-v2 .sidebar-card, .application-shell-v2 .mobile-nav, .application-shell-v2 .topbar-menu { display: none; }
.application-shell-v2 .content { max-width: 1440px; width: 100%; padding: 28px 32px 48px; }
.application-shell-v2 .topbar { position: static; margin: 0 0 24px; padding: 0 0 20px; background: none; backdrop-filter: none; border-bottom: 1px solid var(--color-gray-800); }
.application-shell-v2 .topbar h1 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; color: var(--color-accent-light); letter-spacing: -.015em; }
.application-shell-v2 .topbar .shell-note { font-size: 13px; margin-top: 8px; max-width: 680px; }
.application-shell-v2 .topbar-summary { max-width: 320px; font-size: 13px; }
.application-shell-v2 .view.active { animation: application-view-enter 180ms ease-out both; }
.application-shell-v2 .panel { box-shadow: none; border-color: #ffffff12; background: linear-gradient(150deg, #191919, #101010); }
.application-shell-v2 .section-title h2, .application-shell-v2 .section-heading h2 { font-size: 17px; line-height: 1.4; }
.application-shell-v2 .btn { transition: background-color 150ms ease, border-color 150ms ease, transform 140ms ease; }
.application-shell-v2 .btn:active:not(:disabled) { transform: translateY(1px); }
.application-shell-v2 :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
/* Keep the advanced personal/common profile forms; harmonize their hierarchy. */
.application-shell-v2 #profileSummary { margin: 0 0 12px; font-size: 13px; }
.application-shell-v2 .profile-workspace { gap: 16px; }
.application-shell-v2 .profile-hero { margin: 0; padding: 20px; border-color: #c41e3a30; background: radial-gradient(ellipse at 0 0, #c41e3a16, transparent 65%), linear-gradient(135deg, #161313, #111); }
.application-shell-v2 .profile-identity h2 { font-size: 25px; line-height: 1.25; color: var(--color-accent-light); }
.application-shell-v2 .profile-identity p { font-size: 14px; line-height: 1.6; }
.application-shell-v2 .profile-primary-nav { gap: 8px; padding: 0; background: transparent; border: 0; }
.application-shell-v2 .profile-primary-nav button { min-height: 48px; border: 1px solid #ffffff18; border-radius: 14px; background: #ffffff03; font-size: 14px; }
.application-shell-v2 .profile-primary-nav button.active { background: #c41e3a20; border-color: #c41e3a66; box-shadow: none; }
.application-shell-v2 .profile-module-tabs { padding: 6px; gap: 6px; border: 1px solid #ffffff12; border-radius: 14px; background: #ffffff03; }
.application-shell-v2 .profile-module-tabs button { min-height: 42px; font-size: 14px; border-radius: 9px; }
.application-shell-v2 .profile-module-tabs button.active { background: #c41e3a28; border-color: #c41e3a66; }
.application-shell-v2 .profile-section, .application-shell-v2 .profile-editor { padding: 22px; border-radius: 18px; }
.application-shell-v2 .profile-field-grid { gap: 18px 24px; }
.application-shell-v2 .profile-field-grid .field input:not([type='checkbox']):not([type='radio']),
.application-shell-v2 .profile-field-grid .field select { height: 48px; min-height: 48px; background: #ffffff03; }
.application-shell-v2 .profile-field-grid textarea { background: #ffffff03; font-size: 15px; line-height: 1.65; }
/* Restore the original outer focus treatment; field interiors stay unchanged. */
.application-shell-v2 .field input:focus,
.application-shell-v2 .field select:focus,
.application-shell-v2 .field textarea:focus,
.application-shell-v2 .composer input:focus,
.application-shell-v2 .composer textarea:focus,
.application-shell-v2 .locale-switcher select:focus {
    outline: 2px solid rgba(196, 30, 58, .38);
    outline-offset: 0;
    border-color: rgba(230, 57, 70, .65);
    box-shadow: 0 0 0 4px rgba(196, 30, 58, .1);
}
.application-shell-v2 .multi-state-choice:focus-visible,
.application-shell-v2 .multi-state-choice:focus-within {
    outline: 2px solid color-mix(in srgb, var(--msc-mark-color) 42%, transparent);
    outline-offset: 2px;
}
.application-shell-v2 .choice-pill input:focus-visible,
.application-shell-v2 .check input:focus-visible {
    outline: 2px solid rgba(47, 191, 113, .38);
    outline-offset: 2px;
}
.application-shell-v2 .profile-module-save-panel { border-color: #d4af3730; background: #15130f; }
.application-shell-v2 .relation-identity-target { border-left: 2px solid var(--color-gold); }
/* Shared UI geometry. Icons are local SVGs, never typographic approximations. */
.ui-icon { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.application-shell-v2 { color-scheme: dark; font-size: 15px; line-height: 1.55; }
.application-shell-v2 .content { margin-inline: auto; }
.application-shell-v2 .btn, .application-shell-v2 .main-nav > a { display: inline-flex; align-items: center; justify-content: center; gap: 9px; line-height: 1.25; }
.application-shell-v2 .btn { min-height: 42px; padding: 10px 16px; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.application-shell-v2 .btn.btn-compact { min-height: 34px; padding: 7px 10px; font-size: 12px; }
.application-shell-v2 .btn-primary { background: #b51e36; box-shadow: none; border: 1px solid #cf3b52; }
.application-shell-v2 .btn-primary:hover:not(:disabled) { background: #c41e3a; }
.application-shell-v2 .btn-secondary { background: #ffffff04; border: 1px solid #ffffff20; }
.application-shell-v2 .btn-secondary:hover:not(:disabled) { background: #ffffff0b; border-color: #ffffff35; }
.application-shell-v2 .btn:disabled { cursor: not-allowed; }
.application-shell-v2 .badge { font-size: 11px; font-weight: 500; padding: 4px 9px; line-height: 1.4; border-radius: 8px; }
.application-shell-language select { color: var(--color-gray-200); background: #151515; border: 1px solid #ffffff20; }
.application-shell-v2 .main-nav > a { position: relative; }
.application-shell-v2 .main-nav > a > strong { min-width: 20px; height: 20px; font-size: 10px; border-radius: 6px; }
.application-shell-v2 [data-nav-count][data-empty='true'] { display: none; }
.application-shell-v2 .main-nav > a > .ui-icon { width: 17px; height: 17px; }
.application-shell-v2 .application-shell-more-links a { display: flex; align-items: center; justify-content: flex-start; gap: 12px; text-align: left; }
.application-shell-v2 .application-shell-more-links a > strong { margin-left: auto; }
.application-shell-v2 .application-shell-more-links a > .ui-icon { width: 18px; height: 18px; color: var(--color-gray-400); }
.application-shell-more > summary > .ui-icon { width: 16px; height: 16px; }
.application-shell-v2 .section-title, .application-shell-v2 .section-heading { align-items: center; gap: 12px; }
.application-shell-v2 .section-title h2, .application-shell-v2 .section-heading h2,
.application-shell-v2 .section-heading h3 { margin: 0; font-size: 17px; font-weight: 600; text-align: left; }
.application-shell-v2 .page-title { margin-bottom: 16px; }
.application-shell-v2 .page-title h2 { font-size: 22px; font-weight: 500; line-height: 1.35; }
.application-eyebrow { margin: 0 0 8px; font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: .11em; font-weight: 600; color: var(--color-gold); }
.application-heading-icon.ui-icon { width: 32px; height: 32px; color: var(--color-gold); opacity: .8; }
.application-shell-v2 .panel { border-radius: 18px; padding: 22px; }
.application-shell-v2 .shell-note { line-height: 1.55; color: var(--color-gray-400); }
.application-shell-v2 .render-state { min-height: 130px; padding: 28px 20px; border-style: dashed; background: #ffffff02; font-size: 14px; line-height: 1.6; }
.application-shell-v2 .field > span { font-size: 13px; font-weight: 500; }
.application-shell-v2 input:not([type='checkbox']):not([type='radio']):not([type='range']),
.application-shell-v2 textarea, .application-shell-v2 select { font-family: inherit; border-radius: 10px; }
.application-shell-v2 textarea { line-height: 1.65; }
/* Landing dashboard: an editorial lead, useful continuations, then live activity. */
.application-welcome { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .85fr); gap: 36px; padding: 32px; border: 1px solid #c41e3a30; border-radius: 22px; background: radial-gradient(ellipse at 0 0, #c41e3a1c, transparent 70%), #121011; }
.application-welcome h2 { max-width: 560px; margin: 0; font-family: Georgia, serif; font-size: clamp(24px, 2.5vw, 32px); font-weight: 400; line-height: 1.3; color: #f2eeee; }
.application-welcome > div > p:not(.application-eyebrow) { max-width: 490px; margin: 14px 0 22px; color: var(--color-gray-400); font-size: 14px; line-height: 1.7; }
.application-shortcuts { display: grid; gap: 8px; align-content: center; }
.application-shortcuts a { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 14px; border: 1px solid #ffffff0e; border-radius: 12px; color: #eee; text-decoration: none; background: #ffffff03; transition: background-color 150ms ease; }
.application-shortcuts a:hover { background: #ffffff08; }
.application-shortcuts a > .ui-icon:first-child { color: var(--color-gold); opacity: .85; }
.application-shortcuts a > .ui-icon:last-child { width: 16px; height: 16px; color: var(--color-gray-500); }
.application-shortcuts strong, .application-shortcuts small { display: block; text-align: left; }
.application-shortcuts strong { font-size: 14px; font-weight: 600; }
.application-shortcuts small { margin-top: 3px; color: var(--color-gray-400); font-size: 12px; }
.application-shell-v2 .connected-home { gap: 22px; }
.application-shell-v2 .home-layout { gap: 22px; grid-template-columns: minmax(0, 1.5fr) minmax(290px, 1fr); }
.application-shell-v2 .home-context-panel { background: #ffffff02; }
.application-shell-v2 .home-context-panel .section-title { margin-bottom: 12px; }
.application-shell-v2 .queue-score, .application-shell-v2 .profile-score { display: none; } /* Legacy heuristic numbers are not a compatibility promise. */
.application-shell-v2 .queue-item { border: 1px solid #ffffff0e; border-radius: 12px; background: #ffffff02; }
.application-shell-v2 .home-side-stack { gap: 22px; }
/* Search only filters content already granted to and loaded by this session. */
.application-search { display: flex; align-items: center; gap: 18px; margin: 0 0 16px; }
.application-search > label { display: flex; align-items: center; gap: 12px; flex: 1; max-width: 620px; min-width: 0; padding: 0 16px; border: 1px solid #ffffff20; border-radius: 12px; background: #ffffff03; }
.application-search > label:focus-within { border-color: rgba(230, 57, 70, .65); box-shadow: 0 0 0 4px rgba(196, 30, 58, .1); }
.application-search .ui-icon { color: var(--color-gray-400); width: 18px; height: 18px; }
.application-shell-v2 .application-search input[type='search'] { padding: 13px 0; min-height: 48px; width: 100%; min-width: 0; color: var(--color-gray-100); border: 0; border-radius: 0; outline: none; background: none; box-shadow: none; font-size: 14px; }
.application-search-count { font-size: 12px; color: var(--color-gray-400); }
.application-search.compact { display: grid; gap: 6px; }
.application-search.compact .application-search-count:empty { display: none; }
.discovery-search { margin-bottom: 18px; }
.discovery-search .application-search { gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.discovery-search .application-search > label { max-width: none; min-width: min(260px, 100%); }
.discovery-search-options { color: var(--color-gray-400); font-size: 13px; }
.discovery-search-options summary { cursor: pointer; width: fit-content; padding: 6px 0; }
.discovery-search-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; max-width: 620px; padding-top: 10px; }
.discovery-search-fields label { display: grid; gap: 7px; min-width: 0; }
.discovery-search-fields input { width: 100%; min-width: 0; font-size: 14px; }
.discovery-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 12px; }
#discoverListNote { max-width: 80ch; font-size: 12px; line-height: 1.6; }
.discovery-action-panel { position: fixed; z-index: 60; right: max(18px, env(safe-area-inset-right)); bottom: calc(84px + env(safe-area-inset-bottom)); width: min(390px, calc(100vw - 36px)); max-height: calc(100dvh - 170px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; border: 1px solid #ffffff28; border-radius: 16px; background: #140d12; box-shadow: 0 18px 60px #0008; font-size: 13px; animation: discovery-decision-in .18s ease-out; }
.discovery-action-panel[hidden] { display: none; }
.discovery-action-panel header { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.discovery-action-panel h3 { margin: 5px 0 0; font-size: 16px; line-height: 1.4; }
.discovery-action-panel p { margin: 12px 0; line-height: 1.6; color: var(--color-gray-400); }
.discovery-action-panel .discovery-action-target { color: var(--color-gray-100); font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.discovery-action-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.discovery-action-panel .btn { min-height: 36px; padding: 8px 11px; font-size: 12px; }
.discovery-action-panel ul { list-style: none; padding: 0; margin: 12px 0; }
.discovery-action-panel li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ffffff14; }
.discovery-action-panel li span { min-width: 0; overflow-wrap: anywhere; }
.discovery-action-panel li small { display: block; margin-top: 5px; color: var(--color-gray-400); font-size: 11px; }
.discovery-action-risk { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; margin: 14px 0; }
.discovery-action-risk input { flex: 0 0 auto; margin-top: 3px; }
@keyframes discovery-decision-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .discovery-action-panel { animation: none; } }
.application-shell-v2 .discover-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.application-shell-v2 .cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.application-shell-v2 .cards-grid > .render-state { grid-column: 1 / -1; }
.application-shell-v2 .profile-card { min-height: 360px; border-radius: 18px; border: 1px solid #ffffff18; box-shadow: none; overflow: hidden; }
.application-shell-v2 .profile-card.active { border-color: #c41e3a90; }
.application-shell-v2 .profile-card .profile-info { padding: 20px; }
.application-shell-v2 .profile-card .profile-info h3 { font-size: 19px; font-weight: 600; letter-spacing: 0; }
.application-shell-v2 .profile-card .profile-info p { font-size: 13px; line-height: 1.5; }
.application-shell-v2 .profile-card .profile-badges { gap: 6px; }
.application-shell-v2 .profile-card .profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.application-shell-v2 .discover-detail { position: sticky; top: 110px; }
.application-shell-v2 .chip-row { flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.application-shell-v2 .chip { min-height: 36px; padding: 7px 13px; font-size: 12px; border-radius: 9px; }
/* Compact real profile hero: keep the entire personal/shared editor below it. */
.application-shell-v2 #profileSummary { display: none; }
.application-shell-v2 .profile-hero { grid-template-columns: 154px minmax(0, 1fr) 180px; align-items: start; gap: 24px; }
.application-shell-v2 .profile-photo-placeholder { min-height: 182px; border-radius: 14px; box-shadow: none; }
.application-shell-v2 .profile-photo-action-row { gap: 6px; }
.application-shell-v2 .profile-photo-action-row .btn { min-height: 36px; padding: 8px; font-size: 11px; }
.application-shell-v2 .profile-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.application-shell-v2 .profile-identity h2 { margin: 0; text-transform: none; font-weight: 600; font-size: 24px; }
.application-shell-v2 .profile-identity p { margin: 8px 0 14px; }
.application-shell-v2 [data-relation-identity-picker-host] { position: static; order: 1; width: 100%; max-width: 300px; }
.application-shell-v2 .relation-identity-picker { text-align: left; }
.application-shell-v2 .relation-identity-picker > span { font-size: 10px; }
.application-shell-v2 .relation-identity-picker select { font-size: 13px; font-weight: 500; }
.application-shell-v2 .profile-hero-tags { gap: 6px; }
.application-shell-v2 .profile-hero-tags span { padding: 4px 8px; font-size: 11px; font-weight: 500; }
.application-shell-v2 .profile-completion { grid-column: auto; width: auto; max-width: 180px; justify-items: end; text-align: right; gap: 6px; padding-top: 4px; }
.application-shell-v2 .profile-completion span { font-size: 30px; font-weight: 600; line-height: 1.1; }
.application-shell-v2 .profile-completion strong { font-size: 12px; }
.application-shell-v2 .profile-completion small { font-size: 11px; line-height: 1.55; }
.application-shell-v2 .profile-workspace.is-relation-identity .profile-hero { grid-template-columns: 154px minmax(0, 1fr); }
.application-shell-v2 .profile-workspace.is-relation-identity .profile-identity { min-width: 0; }
.application-shell-v2 .profile-preview-root h2 { font-size: 24px; text-transform: none; }
.application-shell-v2 .profile-preview-root h3 { font-size: 17px; }
.application-shell-v2 .profile-preview-root p { line-height: 1.7; }
.application-shell-v2 .profile-choice { border-radius: 10px; }
.application-shell-v2 .profile-choice strong { font-size: 13px; font-weight: 500; }
.application-shell-v2 .profile-choice small { font-size: 12px; }
.application-shell-v2 .profile-module-save-panel { padding: 16px 20px; }
.application-shell-v2 .profile-module-save-copy strong { font-size: 13px; }
.profile-section-index { position: relative; justify-self: end; max-width: 100%; }
.profile-section-index summary { display: flex; gap: 9px; align-items: center; min-height: 36px; padding: 8px 12px; border-radius: 9px; border: 1px solid #ffffff16; cursor: pointer; list-style: none; font-size: 12px; color: var(--color-gray-300); }
.profile-section-index summary::-webkit-details-marker { display: none; }
.profile-section-index summary .ui-icon { width: 15px; height: 15px; }
.profile-section-index[open] summary { background: #ffffff06; }
.profile-section-index nav { position: absolute; top: calc(100% + 8px); right: 0; z-index: 12; display: grid; width: 340px; max-width: calc(100vw - 32px); max-height: 360px; overflow-y: auto; padding: 8px; border: 1px solid #ffffff20; border-radius: 12px; background: #171717; box-shadow: 0 12px 36px #0008; animation: application-menu-enter 160ms ease-out both; }
.profile-section-index nav:empty { display: none; }
.profile-section-index nav button { display: flex; align-items: baseline; gap: 14px; padding: 11px 12px; border: 0; border-radius: 7px; color: var(--color-gray-200); text-align: left; font: inherit; font-size: 13px; background: none; cursor: pointer; }
.profile-section-index nav button:hover { background: #ffffff06; }
.profile-section-index nav button span { color: var(--color-gold); font-size: 10px; }
.application-shell-v2 .profile-section :is(h2, h3) { scroll-margin-top: 105px; }
/* Real thread list and content keep their current mutation and permission hooks. */
.application-shell-v2 .message-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; align-items: stretch; border: 1px solid #ffffff16; border-radius: 18px; overflow: hidden; min-height: 560px; }
.application-shell-v2 .message-layout > .panel { border: 0; border-radius: 0; background: #111; padding: 20px; }
.application-shell-v2 .message-layout > .conversation-sidebar { border-right: 1px solid #ffffff12; background: #131313; }
.application-shell-v2 .conversation-list { display: grid; gap: 6px; align-content: start; }
.application-shell-v2 .conversation { min-width: 0; padding: 12px; border-radius: 12px; border: 1px solid transparent; background: none; text-align: left; align-items: center; gap: 12px; }
.application-shell-v2 .conversation.active { border-color: #c41e3a40; background: #c41e3a14; }
.application-shell-v2 .conversation:hover { background: #ffffff06; }
.application-shell-v2 .conversation > span:not(.avatar) { min-width: 0; }
.application-shell-v2 .conversation strong { font-size: 14px; font-weight: 600; }
.application-shell-v2 .conversation small { font-size: 11px; line-height: 1.5; margin-top: 3px; }
.application-shell-v2 .avatar { width: 38px; height: 38px; min-width: 38px; border-radius: 12px; background: #c41e3a1a; color: #e3b0b8; border: 1px solid #c41e3a30; font-size: 13px; box-shadow: none; }
.application-shell-v2 .chat-panel { min-width: 0; gap: 12px; }
.application-shell-v2 #messagesThreadDetail { min-width: 0; }
.application-shell-v2 .chat-header { padding-bottom: 18px; gap: 12px; border-bottom: 1px solid #ffffff12; }
.application-shell-v2 .chat-header strong { font-size: 16px; font-weight: 600; }
.application-shell-v2 .chat-header small { font-size: 12px; color: var(--color-gray-400); }
.application-shell-v2 .thread-actions { padding: 12px 0; gap: 6px; }
.application-shell-v2 .messages { align-content: start; gap: 18px; padding: 16px 0 24px; min-height: 220px; }
.application-shell-v2 .message { max-width: min(85%, 620px); border-radius: 4px 14px 14px 14px; padding: 14px 16px; background: #1b1b1b; border: 1px solid #ffffff0d; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.application-shell-v2 .message.sent { border-radius: 14px 4px 14px 14px; background: #28171c; border-color: #c41e3a30; }
.application-shell-v2 .message p { white-space: pre-wrap; }
.application-shell-v2 .message small { font-size: 10px; margin-top: 8px; }
.application-shell-v2 .message-actions { gap: 6px; }
.application-shell-v2 .message-actions .btn { min-height: 28px; padding: 4px 8px; font-size: 10px; }
.application-shell-v2 .composer { padding: 16px 0 0; border-top: 1px solid #ffffff12; margin-top: auto; }
.application-shell-v2 .composer .shell-note { font-size: 11px; }
.application-shell-v2 .composer input { height: 48px; font-size: 15px; background: #ffffff03; }
.application-shell-v2 .composer textarea { min-width: 0; width: 100%; min-height: 84px; max-height: 240px; padding: 12px 14px; resize: vertical; border: 1px solid #ffffff22; color: var(--color-gray-100); font-size: 15px; background: #ffffff03; }
.application-shell-v2 .composer textarea:focus { border-color: #c41e3a90; }
.application-shell-v2 .composer .btn { align-self: end; }
.application-shell-v2 #messagesComposerTarget { margin: 0; font-size: 11px; }
/* Community, activity, events, media, security and staff share one card system. */
.application-shell-v2 .shell-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 22px; align-items: start; }
.application-shell-v2 .shell-panel { padding: 22px; border: 1px solid #ffffff12; border-radius: 18px; background: #131313; }
.application-shell-v2 .shell-card { border: 1px solid #ffffff12; border-radius: 12px; padding: 18px; background: #ffffff02; gap: 14px; }
.application-shell-v2 .shell-card.active { background: #c41e3a12; border-color: #c41e3a50; }
.application-shell-v2 .shell-card strong { font-size: 15px; font-weight: 600; }
.application-shell-v2 .shell-card small { margin-top: 5px; font-size: 12px; line-height: 1.6; }
.application-shell-v2 .shell-list { gap: 10px; }
.application-shell-v2 .shell-detail { gap: 14px; }
.application-shell-v2 .shell-detail > strong { font-size: 20px; line-height: 1.4; font-weight: 500; }
.application-shell-v2 .shell-detail > p { font-size: 14px; line-height: 1.7; }
.application-shell-v2 .media-form { margin-top: 22px; padding-top: 20px; border-top: 1px solid #ffffff12; }
.application-shell-v2 .activity-page-list { padding: 16px; }
.application-shell-v2 .setting-card { gap: 14px; }
.application-shell-v2 .setting-card > .ui-icon { width: 26px; height: 26px; color: var(--color-gold); }
.application-shell-v2 .setting-card > strong { font-size: 16px; font-weight: 600; }
.application-shell-v2 .setting-card > span { font-size: 13px; line-height: 1.7; }
.application-shell-v2 .moderation-page { gap: 22px; }
/* A real event calendar, not fabricated appointments or a separate demo. */
.application-shell-v2 .event-calendar { margin-bottom: 22px; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.calendar-toolbar h3 { margin: 0; font-size: 22px; font-weight: 500; text-transform: capitalize; }
.calendar-toolbar .application-eyebrow { margin-bottom: 5px; }
.calendar-navigation { display: flex; align-items: center; gap: 8px; }
.application-shell-v2 .calendar-icon-button { min-width: 40px; width: 40px; padding: 8px; }
.calendar-scope, .calendar-timezone { font-size: 12px; line-height: 1.6; color: var(--color-gray-400); margin: 16px 0; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { padding: 12px 0; font-size: 11px; color: var(--color-gray-400); text-align: center; }
.calendar-days { gap: 1px; background: #ffffff0e; border: 1px solid #ffffff0e; border-radius: 12px; overflow: hidden; }
.calendar-day { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; min-height: 74px; border: 0; border-radius: 0; padding: 12px; font: inherit; font-size: 13px; color: var(--color-gray-300); background: #141414; cursor: pointer; transition: background-color 150ms ease; }
.calendar-day.outside { color: var(--color-gray-500); background: #111; }
.calendar-day:hover { background: #21171a; }
.calendar-day.today > span:first-child { color: var(--color-gold); font-weight: 700; }
.calendar-day[aria-pressed='true'] { box-shadow: inset 0 0 0 1px #c41e3ab0; background: #2a171c; color: #fff; }
.application-shell-v2 .calendar-day:focus-visible { outline-offset: -3px; }
.calendar-event-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 5px; background: #c41e3a33; font-size: 10px; color: #e9b4bd; }
.calendar-day-detail { margin-top: 18px; }
.calendar-day-detail h4 { font-size: 14px; font-weight: 600; margin: 0 0 12px; text-transform: capitalize; }
.calendar-day-detail > p { font-size: 13px; color: var(--color-gray-400); margin: 0; }
.calendar-event { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; margin-top: 8px; padding: 14px; border: 1px solid #ffffff14; border-radius: 10px; background: #ffffff03; color: #eee; text-align: left; font: inherit; cursor: pointer; }
.calendar-event time { color: var(--color-gold); font-size: 12px; font-variant-numeric: tabular-nums; }
.calendar-event strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.calendar-event .ui-icon { width: 16px; height: 16px; color: var(--color-gray-400); }
.calendar-timezone { margin-bottom: 0; }
/* Only legacy glyph controls need a mask. SVG controls keep their single icon. */
.application-shell-v2 :is(.section-help-trigger, .relation-wizard-close, .kinky-tech-settings-close),
.auth-page .auth-modal-close { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.application-shell-v2 :is(.section-help-trigger, .relation-wizard-close):not(:has(svg)) { font-size: 0; }
.application-shell-v2 :is(.section-help-trigger, .relation-wizard-close):not(:has(svg))::before {
    content: ''; display: block; flex: 0 0 18px; width: 18px; height: 18px;
    background: currentColor; mask: var(--control-icon) center / contain no-repeat;
}
.application-shell-v2 .section-help-trigger { --control-icon: url('/assets/icons/help.svg'); width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--color-gray-300); }
.application-shell-v2 .section-help-trigger .ui-icon { width: 18px; height: 18px; }
.application-shell-v2 .relation-wizard-close { --control-icon: url('/assets/icons/close.svg'); }
/* The same restrained type, surfaces and controls on sign-in, registration and recovery. */
.auth-page { color-scheme: dark; }
.auth-page .brand strong { font-family: Georgia, serif; font-size: 25px; font-weight: 400; letter-spacing: .03em; }
.auth-page .auth-layout { max-width: 1200px; margin-inline: auto; }
.auth-page .auth-copy h1 { font-family: Georgia, serif; font-size: clamp(28px, 3.2vw, 42px); font-weight: 400; line-height: 1.2; letter-spacing: -.015em; }
.auth-page .auth-copy p { font-size: 15px; line-height: 1.8; }
.auth-page .auth-card { border-radius: 22px; border-color: #ffffff16; box-shadow: 0 16px 70px #0003; background: linear-gradient(145deg, #1b1517, #121212 65%); }
.auth-page .auth-card h2 { font-size: 24px; line-height: 1.35; font-weight: 600; }
.auth-page .auth-card .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; min-height: 44px; line-height: 1.3; box-shadow: none; }
.auth-page .auth-card .btn-primary { background: #b51e36; }
.auth-page .auth-card input:not([type='checkbox']), .auth-page .auth-card select { border-radius: 10px; font-size: 15px; }
.auth-page .trust-control { display: inline-flex; align-items: center; justify-content: center; }
.auth-page .trust-control .ui-icon { width: 20px; height: 20px; }
.auth-page .auth-modal-close .ui-icon { width: 20px; height: 20px; }
.legal-page { color-scheme: dark; }
.legal-page .legal-document { max-width: 960px; padding: 36px 40px; border: 1px solid #ffffff12; border-radius: 20px; background: #131313; }
.legal-page .brand strong { font: 400 25px/1.3 Georgia, serif; letter-spacing: .03em; }
.legal-page h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; text-align: left; }
.legal-page h2 { margin-top: 28px; font-size: 18px; font-weight: 600; line-height: 1.45; text-align: left; }
.legal-page .legal-document p, .legal-page .legal-document li { font-size: 14px; line-height: 1.85; }
.legal-page .legal-warning { border-radius: 10px; border-color: #d4af3740; background: #d4af3709; font-size: 13px; }
.legal-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; font-size: 14px; box-shadow: none; }
.legal-page .error-card { text-align: left; border-radius: 16px; background: #ffffff02; border-color: #ffffff12; }
.legal-page .error-code { font-family: Georgia, serif; font-weight: 400; color: var(--color-accent-light); }
@keyframes application-view-enter { from { opacity: .65; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes application-menu-enter { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
    .application-shell-v2 .sidebar { gap: 12px 18px; padding: 12px 20px; }
    .application-shell-v2 .brand small, .application-shell-language > span { display: none; }
    .application-shell-v2 .main-nav { justify-content: center; }
    .application-shell-v2 .main-nav > a, .application-shell-more > summary { padding: 10px 12px; }
    .application-shell-v2 .content { padding: 24px 20px 40px; }
    .application-shell-v2 .topbar { align-items: flex-start; }
    .application-shell-v2 .topbar-actions { max-width: 260px; }
    .application-shell-v2 .brand strong { font-size: 21px; }
    .application-shell-v2 .main-nav > a { gap: 6px; padding-inline: 10px; }
    .application-shell-v2 .discover-layout { grid-template-columns: minmax(0, 1fr) 280px; }
    .application-shell-v2 .cards-grid { grid-template-columns: 1fr; }
    .application-shell-v2 .home-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, .85fr); }
    .application-shell-v2 .profile-hero { grid-template-columns: 130px minmax(0, 1fr); gap: 20px; }
    .application-shell-v2 .profile-completion { grid-column: 2; max-width: none; text-align: left; justify-items: start; }
    .application-shell-v2 .profile-photo-placeholder { min-height: 170px; }
    .application-shell-v2 .message-layout { grid-template-columns: 260px minmax(0, 1fr); }
    .application-shell-v2 .shell-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); }
    .application-welcome { grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); gap: 24px; padding: 24px; }
}
@media (max-width: 700px) {
    .application-shell-v2 .sidebar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px 16px; }
    .application-shell-v2 .brand { gap: 8px; }
    .application-shell-v2 .brand strong { font-size: 17px; letter-spacing: .025em; }
    .application-shell-v2 .brand img { width: 28px; height: 28px; }
    .application-shell-language { grid-column: 2; grid-row: 1; margin-right: 68px; }
    .application-shell-language select { width: 48px; min-height: 36px; padding: 6px; font-size: 12px; }
    .application-shell-v2 .main-nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .application-shell-v2 .main-nav > a { flex-direction: column; gap: 5px; padding: 8px 2px; font-size: 11px; border-radius: 10px; justify-content: center; min-height: 58px; }
    .application-shell-v2 .main-nav > a span { white-space: normal; overflow: visible; text-align: center; }
    .application-shell-v2 .main-nav > a strong { position: absolute; right: 7px; top: 5px; min-width: 17px; width: auto; height: 17px; padding: 0 3px; font-size: 10px; }
    .application-shell-more { position: static; }
    .application-shell-more > summary { position: absolute; right: 12px; top: 12px; min-height: 36px; padding: 6px; gap: 4px; font-size: 12px; }
    .application-shell-more-links { top: 60px; right: 16px; max-width: calc(100vw - 32px); z-index: 40; }
    .application-shell-v2 .content { padding: 20px 16px 36px; }
    .application-shell-v2 .topbar { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 12px; align-items: center; padding-bottom: 16px; margin-bottom: 18px; }
    .application-shell-v2 .topbar-actions { max-width: none; justify-content: flex-start; gap: 8px; }
    .application-shell-v2 .topbar-summary { flex: 1; min-width: 120px; }
    .application-shell-v2 .topbar h1 { font-size: 24px; text-align: left; }
    .application-shell-v2 .topbar-actions { margin-left: auto; flex: 0 0 auto; }
    .application-shell-v2 .application-logout { min-width: 40px; width: 40px; height: 40px; padding: 10px; }
    .application-shell-v2 .application-logout > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .application-shell-v2 .panel, .application-shell-v2 .shell-panel { padding: 16px; border-radius: 14px; }
    .application-shell-v2 .page-title h2 { font-size: 20px; }
    .application-shell-v2 .section-title { flex-direction: row; flex-wrap: wrap; text-align: left; }
    .application-shell-v2 .section-title .section-note { font-size: 11px; }
    .application-welcome { grid-template-columns: 1fr; gap: 24px; padding: 22px 18px; border-radius: 16px; }
    .application-welcome h2 { font-size: 26px; }
    .application-shortcuts { gap: 6px; }
    .application-shortcuts a { padding: 12px; }
    .application-shell-v2 .home-layout, .application-shell-v2 .home-secondary, .application-shell-v2 .shell-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .application-shell-v2 .discover-layout { grid-template-columns: minmax(0, 1fr); }
    .application-shell-v2 .discover-detail { position: static; }
    .application-shell-v2 .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .application-shell-v2 .profile-card { min-height: 280px; }
    .application-shell-v2 .profile-card .profile-info { padding: 14px; }
    .application-search { display: grid; gap: 6px; }
    .application-shell-v2 .message-layout { grid-template-columns: minmax(0, 1fr); }
    .application-shell-v2 .message-layout > .conversation-sidebar { border-right: 0; border-bottom: 1px solid #ffffff12; }
    .application-shell-v2 #messagesThreadList { max-height: 240px; overflow-y: auto; }
    .application-shell-v2 .message-layout > .panel { padding: 16px; }
    .application-shell-v2 .message { max-width: 95%; font-size: 15px; }
    .application-shell-v2 .composer { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .application-shell-v2 .composer .btn { min-width: 44px; padding: 10px; }
    .application-shell-v2 .composer > .btn[type='submit']:has(> svg) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .application-shell-v2 .profile-hero { padding: 16px; }
    .application-shell-v2 .profile-hero, .application-shell-v2 .profile-workspace.is-relation-identity .profile-hero { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
    .application-shell-v2 .profile-workspace.is-relation-identity .profile-main-photo,
    .application-shell-v2 .profile-workspace.is-relation-identity .profile-identity { grid-column: auto; }
    .application-shell-v2 .profile-photo-placeholder { min-height: 116px; border-radius: 10px; }
    .application-shell-v2 .profile-photo-action-row { flex-wrap: wrap; }
    .application-shell-v2 .profile-photo-action-row .btn { width: 100%; font-size: 10px; min-height: 36px; }
    .application-shell-v2 .profile-photo-help { margin-inline: auto; }
    .application-shell-v2 .profile-identity { gap: 14px; }
    .application-shell-v2 .profile-identity h2 { font-size: 19px; line-height: 1.3; }
    .application-shell-v2 .profile-identity p { font-size: 12px; line-height: 1.55; margin: 8px 0; }
    .application-shell-v2 .profile-hero-tags span { font-size: 10px; padding: 3px 6px; }
    .application-shell-v2 .profile-completion { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding-top: 12px; border-top: 1px solid #ffffff12; }
    .application-shell-v2 .profile-completion span { grid-row: span 2; font-size: 27px; }
    .application-shell-v2 .profile-completion small { max-width: none; }
    .application-shell-v2 .relation-identity-picker select { min-height: 38px; font-size: 12px; padding-left: 8px; }
    .application-shell-v2 .profile-section, .application-shell-v2 .profile-editor { padding: 16px; }
    .application-shell-v2 .profile-field-grid { gap: 14px; }
    .application-shell-v2 .profile-primary-nav button { font-size: 13px; padding: 8px; }
    .calendar-toolbar { gap: 12px; }
    .calendar-toolbar h3 { font-size: 18px; }
    .calendar-toolbar .application-eyebrow { font-size: 10px; }
    .calendar-navigation { gap: 4px; }
    .application-shell-v2 .calendar-navigation .btn { font-size: 11px; padding: 8px; min-height: 36px; }
    .application-shell-v2 .calendar-icon-button { min-width: 32px; width: 32px; }
    .calendar-day { min-height: 54px; padding: 7px; gap: 5px; font-size: 12px; }
    .calendar-event-count { min-width: 14px; height: 14px; font-size: 9px; }
    .calendar-scope, .calendar-timezone { font-size: 11px; }
    .auth-page .auth-card { border-radius: 16px; }
    .auth-page .auth-card h2 { font-size: 22px; }
    .legal-page .legal-document { margin: 16px; padding: 22px 18px; width: auto; border-radius: 16px; }
    .legal-page .brand strong { font-size: 21px; }
    .legal-page .legal-header { gap: 16px; }
}
@media (max-width: 430px) {
    .application-shell-v2 .cards-grid { grid-template-columns: minmax(0, 1fr); }
    .application-shell-v2 .profile-card { min-height: 350px; }
}
@media (prefers-reduced-motion: reduce) {
    .application-shell-v2 *, .application-shell-v2 *::before, .application-shell-v2 *::after,
    .auth-page *, .auth-page *::before, .auth-page *::after,
    .legal-page *, .legal-page *::before, .legal-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}