:root {
 --bg: #f5f6f8;
 --surface: #fff;
 --ink: #222c39;
 --muted: #7f8a99;
 --line: #e5e9ef;
 --purple: #6658d9;
 --purple-dark: #5546c4;
 --light: #f0edff;
 --green: #218b6c;
 --red: #ca555e;
 --field-focus: #8d7bde;
 --bottom-nav-height: 0px;
 color-scheme: light;
}

*, *::before, *::after {
 box-sizing: border-box;
}

html {
 min-height: 100%;
 background: var(--bg);
 -webkit-text-size-adjust: 100%;
 text-size-adjust: 100%;
}

body {
 margin: 0;
 min-height: 100vh;
 min-height: 100dvh;
 overflow-x: hidden;
 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
 font-size: 14px;
 color: var(--ink);
 background: var(--bg);
}

button, input, select, textarea {
 font: inherit;
}

button, a, input, select, textarea {
 outline-offset: 3px;
}

button {
 cursor: pointer;
 transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s, filter .15s, transform .15s;
}

button:disabled {
 opacity: .55;
 cursor: not-allowed;
 filter: none;
 transform: none;
}

button:not(:disabled):active {
 transform: translateY(1px);
}

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

img, svg {
 max-width: 100%;
}

h1, h2, h3, p, b, strong, small {
 overflow-wrap: break-word;
}

h1 {
 margin: 8px 0 10px;
 font-size: clamp(24px, 2.2vw, 29px);
 font-weight: 600;
 line-height: 1.35;
 letter-spacing: -.5px;
}

h2 {
 margin: 0;
 font-size: 17px;
 font-weight: 600;
 line-height: 1.5;
}

h3 {
 margin: 0;
 font-size: 14px;
}

p {
 margin: 8px 0;
 color: var(--muted);
 font-size: 12px;
 line-height: 1.8;
}

.hidden {
 display: none !important;
}

:focus-visible {
 outline: 2px solid #8f80df;
 outline-offset: 3px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
 width: 100%;
 min-width: 0;
 min-height: 44px;
 border: 1px solid #dce1e9;
 border-radius: 9px;
 padding: 10px 13px;
 background-color: var(--surface);
 color: #354153;
 line-height: 1.5;
 box-shadow: 0 1px 2px #27324904;
 transition: border-color .15s, box-shadow .15s, background-color .15s;
}

select {
 appearance: none;
 -webkit-appearance: none;
 padding-right: 40px;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23747f90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 13px center;
 background-size: 16px;
 cursor: pointer;
}

textarea {
 min-height: 96px;
 resize: vertical;
}

input::placeholder,
textarea::placeholder {
 color: #a3aab6;
 opacity: 1;
}

input:not([type="checkbox"]):not([type="radio"]):not([readonly]):not(:disabled):hover,
select:not(:disabled):hover,
textarea:not(:disabled):hover {
 border-color: #c6ccd7;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
 border-color: var(--field-focus);
 outline: none;
 background-color: #fff;
 box-shadow: 0 0 0 3px #6658d914;
}

input:not([type="checkbox"]):not([type="radio"])[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
 border-color: #d76570;
 background-color: #fffafb;
 box-shadow: 0 0 0 3px #ca555e12;
}

input:not([type="checkbox"]):not([type="radio"]):disabled,
select:disabled,
textarea:disabled {
 border-color: #e5e8ed;
 background: #f4f5f7;
 color: #929ba8;
 cursor: not-allowed;
}

input[readonly] {
 background: #f7f5fc;
 color: #70608f;
 cursor: text;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
 -webkit-text-fill-color: #354153;
 -webkit-box-shadow: 0 0 0 1000px #fff inset;
 caret-color: #354153;
}

input[type="number"] {
 font-variant-numeric: tabular-nums;
}

input[type="checkbox"],
input[type="radio"] {
 flex: 0 0 auto;
 width: 18px;
 height: 18px;
 margin: 0;
 accent-color: var(--purple);
 cursor: pointer;
}

label {
 display: grid;
 min-width: 0;
 gap: 8px;
 margin-bottom: 17px;
 color: #606d7f;
 font-size: 12px;
 line-height: 1.5;
}

.field-error {
 display: block;
 margin: -2px 0 0;
 color: #bd4d58;
 font-size: 11px;
 font-weight: 400;
 line-height: 1.55;
 overflow-wrap: anywhere;
}

.error {
 min-height: 16px;
 margin-top: 12px;
 color: #c65461;
 font-size: 12px;
 line-height: 1.6;
 overflow-wrap: anywhere;
}

.error:empty:not(#login-error) {
 display: none;
}

.primary,
.secondary,
.danger {
 display: inline-flex;
 max-width: 100%;
 min-height: 42px;
 align-items: center;
 justify-content: center;
 gap: 10px;
 border-radius: 8px;
 padding: 10px 17px;
 font-size: 12px;
 line-height: 1.4;
 white-space: nowrap;
}

.primary {
 border: 1px solid var(--purple);
 background: var(--purple);
 color: #fff;
 box-shadow: 0 4px 10px #6658d919;
}

.secondary {
 border: 1px solid #dde2e9;
 background: #fff;
 color: #606d7f;
}

.danger {
 border: 1px solid #c95560;
 background: #c95560;
 color: #fff;
}

.text-button {
 min-height: 32px;
 border: 0;
 border-radius: 6px;
 padding: 6px;
 background: transparent;
 color: var(--purple);
 font-size: 12px;
 line-height: 1.4;
 white-space: nowrap;
}

.brand-symbol {
 display: grid;
 flex: 0 0 auto;
 width: 42px;
 height: 42px;
 place-items: center;
 border-radius: 13px;
 background: var(--purple);
 color: #fff;
 font-size: 31px;
 line-height: 1;
}

.brand {
 display: flex;
 min-width: 0;
 align-items: center;
 gap: 12px;
 font-size: 23px;
 font-weight: 700;
 letter-spacing: 2px;
}

.brand > span:last-child {
 min-width: 0;
}

.brand small {
 display: block;
 margin-top: 5px;
 color: var(--muted);
 font-size: 8px;
 letter-spacing: 1.8px;
 white-space: nowrap;
}

.app {
 display: flex;
 min-height: 100vh;
 min-height: 100dvh;
}

.sidebar {
 position: fixed;
 inset: 0 auto 0 0;
 z-index: 20;
 display: flex;
 width: 240px;
 height: 100vh;
 height: 100dvh;
 flex-direction: column;
 padding: 30px 20px 18px;
 overflow-y: auto;
 overscroll-behavior: contain;
 border-right: 1px solid var(--line);
 background: #fff;
}

.workspace-label {
 margin: 42px 16px 14px;
 color: #9ba2af;
 font-size: 11px;
 letter-spacing: 2px;
}

.workspace-label-admin,
#app .admin-nav {
 display: none;
}

#app.admin-mode .workspace-nav,
#app.admin-mode .workspace-label-workspace {
 display: none;
}

#app.admin-mode .admin-nav {
 display: grid;
}

.manage-entry {
 margin-top: 8px;
}

.admin-nav [data-manage-page="danger"] span {
 display: inline-grid;
 width: 21px;
 height: 21px;
 place-items: center;
 border-radius: 50%;
 background: #fdf0f2;
 color: #c06a74;
 font-size: 13px;
 font-weight: 700;
}

@media (min-width: 761px) {
 #app.admin-mode .workspace-label-admin {
  display: block;
 }
}

.sidebar nav {
 display: grid;
 gap: 7px;
}

.nav {
 display: flex;
 width: 100%;
 min-height: 48px;
 align-items: center;
 gap: 14px;
 margin: 0;
 border: 0;
 border-radius: 9px;
 padding: 12px 16px;
 background: transparent;
 color: #718094;
 font-weight: 500;
 text-align: left;
}

.nav span {
 flex: 0 0 23px;
 width: 23px;
 font-size: 21px;
 text-align: center;
}

.nav.active {
 background: var(--light);
 color: var(--purple);
}

.sidebar-bottom {
 flex-shrink: 0;
 margin-top: auto;
 padding-top: 24px;
}

.vault-status {
 border: 1px solid var(--line);
 border-radius: 9px;
 padding: 14px 12px;
 background: #fafbfc;
 color: #5f6e7b;
 font-size: 11px;
 line-height: 1.5;
}

.status-dot {
 display: inline-block;
 width: 6px;
 height: 6px;
 margin-right: 5px;
 border-radius: 50%;
 background: #39a484;
}

.vault-status small {
 display: block;
 margin: 8px 0 0 14px;
 color: #98a0ab;
 font-size: 10px;
 overflow-wrap: anywhere;
}

.profile {
 display: flex;
 width: 100%;
 min-width: 0;
 align-items: center;
 gap: 10px;
 margin-top: 20px;
 border: 0;
 border-top: 1px solid var(--line);
 padding: 14px 0 0;
 background: transparent;
 text-align: left;
}

.profile > span:last-child {
 flex: 0 0 auto;
 margin-left: auto;
}

#profile-name {
 flex: 1;
 min-width: 0;
}

.profile small {
 display: block;
 margin-top: 4px;
 color: var(--muted);
 font-size: 10px;
}

.avatar {
 display: inline-grid;
 flex: 0 0 auto;
 width: 34px;
 height: 34px;
 place-items: center;
 border-radius: 50%;
 background: #eeeafa;
 color: #7b64bd;
 font-weight: 600;
}

.main {
 display: flex;
 width: calc(100% - 240px);
 min-width: 0;
 min-height: 100vh;
 min-height: 100dvh;
 flex-direction: column;
 margin-left: 240px;
}

.main > header {
 display: flex;
 height: 76px;
 flex: 0 0 auto;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 border-bottom: 1px solid var(--line);
 padding: 0 36px;
 background: #fff;
 font-size: 12px;
}

.breadcrumb {
 min-width: 0;
 overflow: hidden;
 color: #98a1ad;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.breadcrumb span {
 padding: 0 14px;
 color: #c8ccd3;
}

.breadcrumb #breadcrumb-root {
 padding: 0;
 color: inherit;
}

#app.admin-mode .private-badge {
 display: none;
}

.admin-back {
 display: none;
 min-height: 34px;
 align-items: center;
 gap: 6px;
 border: 1px solid #e3e0ea;
 border-radius: 7px;
 padding: 7px 12px;
 background: #fff;
 color: #6f6685;
 font-size: 11px;
 white-space: nowrap;
}

#app.admin-mode .admin-back {
 display: inline-flex;
}

.breadcrumb b {
 color: #657080;
 font-weight: 500;
}

.header-right {
 display: flex;
 flex: 0 0 auto;
 align-items: center;
 gap: 20px;
 color: var(--muted);
 font-size: 11px;
 white-space: nowrap;
}

.private-badge {
 border: 1px solid #dfeee5;
 border-radius: 5px;
 padding: 6px 10px;
 background: #f0f8f3;
 color: #5e8c78;
}

.mobile-logout {
 display: none;
}

main {
 width: 100%;
 max-width: 1570px;
 min-width: 0;
 flex: 1 0 auto;
 margin: 0 auto;
 padding: 34px 36px;
}

footer {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 gap: 8px 20px;
 padding: 17px 36px;
 color: #a8afba;
 font-size: 10px;
 letter-spacing: 1px;
}

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

.page-heading > div {
 flex: 1 1 320px;
 min-width: 0;
}

.page-heading > :last-child:not(div) {
 flex: 0 0 auto;
}

.page-heading p {
 margin-bottom: 0;
}

.eyebrow {
 color: var(--purple);
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 2px;
}

.hero {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 margin-bottom: 24px;
 border: 1px solid #e5e0f7;
 border-radius: 12px;
 padding: 26px 29px;
 overflow: hidden;
 background: #efedf9;
}

.hero > div:first-child {
 min-width: 0;
}

.hero h2 {
 font-size: 20px;
}

.hero p {
 max-width: 530px;
 margin: 9px 0 15px;
 color: #89849f;
}

.hero-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 16px;
 color: #7c70a3;
 font-size: 10px;
}

.hero-art {
 position: relative;
 display: grid;
 width: 135px;
 height: 112px;
 flex: 0 0 auto;
 place-items: center;
}

.hero-art::before,
.hero-art::after {
 position: absolute;
 width: 95px;
 height: 95px;
 border: 1px solid #c9bdf3;
 border-radius: 26px;
 background: #e3dcfa70;
 content: "";
 transform: rotate(-18deg);
}

.hero-art::after {
 width: 69px;
 height: 79px;
 border-radius: 18px;
 background: #d4c9f7;
 transform: rotate(10deg);
}

.hero-art span {
 position: relative;
 z-index: 1;
 color: #8570d1;
 font-size: 49px;
}

.stats {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 16px;
 margin-bottom: 27px;
}

.stat {
 min-width: 0;
 border: 1px solid var(--line);
 border-radius: 10px;
 padding: 20px 22px;
 background: #fff;
}

.stat-label {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 color: #7f8998;
 font-size: 12px;
}

.stat-label > span:first-child {
 min-width: 0;
}

.stat-label > span:last-child {
 flex: 0 0 auto;
 border-radius: 8px;
 padding: 7px;
 background: #f6f4fc;
 color: #9182bf;
 font-size: 17px;
}

.stat-value {
 margin: 9px 0;
 font-size: 28px;
 font-weight: 600;
 font-variant-numeric: tabular-nums;
 line-height: 1.3;
}

.stat-value small {
 margin-left: 6px;
 color: #9ca4af;
 font-size: 12px;
 font-weight: 400;
}

.stat-note {
 color: #a1a8b3;
 font-size: 10px;
 line-height: 1.6;
}

.stat-note.green {
 color: var(--green);
}

.panel {
 min-width: 0;
 margin-bottom: 22px;
 overflow: hidden;
 border: 1px solid var(--line);
 border-radius: 10px;
 background: #fff;
}

.panel-header {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 12px 14px;
 border-bottom: 1px solid #f0f2f5;
 padding: 21px 24px;
}

.panel-header > * {
 min-width: 0;
}

.panel-header p {
 margin-bottom: 0;
 font-size: 11px;
}

.panel-body {
 min-width: 0;
 padding: 23px;
}

.badge {
 display: inline-block;
 max-width: 100%;
 border-radius: 4px;
 padding: 4px 8px;
 background: #f0f7f3;
 color: #4c9877;
 font-size: 10px;
 line-height: 1.4;
 white-space: nowrap;
}

.badge.purple {
 background: #f3f0fb;
 color: #9380b8;
}

.badge.gray {
 background: #f2f3f6;
 color: #929aa7;
}

.count-chip {
 display: inline-block;
 margin-left: 8px;
 border-radius: 5px;
 padding: 4px 8px;
 background: #f4f1fa;
 color: #9a91b2;
 font-size: 10px;
 font-weight: 400;
 white-space: nowrap;
}

.table-wrap {
 width: 100%;
 max-width: 100%;
 overflow-x: auto;
 overscroll-behavior-x: contain;
 -webkit-overflow-scrolling: touch;
}

table {
 width: 100%;
 min-width: 660px;
 border-collapse: collapse;
 text-align: left;
 white-space: nowrap;
}

th {
 padding: 13px 24px;
 background: #fcfcfd;
 color: #8e98a6;
 font-size: 10px;
 font-weight: 400;
}

td {
 border-top: 1px solid #f1f3f5;
 padding: 16px 24px;
 color: #687484;
 font-size: 12px;
 vertical-align: middle;
}

.file-cell {
 display: flex;
 min-width: 0;
 align-items: center;
 gap: 12px;
 color: #394555;
}

.file-cell > div {
 min-width: 0;
}

.file-icon {
 display: grid;
 width: 34px;
 height: 39px;
 flex: 0 0 auto;
 place-items: center;
 border-radius: 7px;
 background: #f0ebfb;
 color: #8f7ec0;
 font-size: 16px;
}

.file-icon.blue {
 background: #eef4fa;
 color: #6a94bb;
}

.file-cell b {
 display: block;
 max-width: 260px;
 overflow: hidden;
 font-weight: 500;
 text-overflow: ellipsis;
}

.file-cell small {
 display: block;
 max-width: 260px;
 margin-top: 5px;
 overflow: hidden;
 color: #a2a9b4;
 font-size: 10px;
 text-overflow: ellipsis;
}

.row-actions {
 display: flex;
 align-items: center;
 gap: 6px;
}

.row-actions button {
 display: inline-grid;
 width: 34px;
 height: 34px;
 place-items: center;
 border: 0;
 border-radius: 7px;
 padding: 5px;
 background: transparent;
 color: #8993a4;
}

.row-actions button:hover {
 background: #f4f1fb;
 color: var(--purple);
}

.bottom-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
 gap: 22px;
}

.bottom-grid > * {
 min-width: 0;
}

.policy-list {
 display: grid;
 gap: 21px;
}

.policy-row {
 display: grid;
 grid-template-columns: auto minmax(0, 1fr) auto;
 align-items: center;
 gap: 14px;
}

.policy-row .icon {
 display: grid;
 width: 36px;
 height: 36px;
 place-items: center;
 border-radius: 9px;
 background: #f6f7fa;
 color: #8f96ad;
 font-size: 18px;
}

.policy-row > div {
 min-width: 0;
}

.policy-row b {
 font-size: 12px;
 font-weight: 500;
}

.policy-row p {
 margin: 4px 0 0;
 font-size: 10px;
}

.empty {
 padding: 42px 20px;
 color: #9ba4b0;
 font-size: 12px;
 line-height: 1.8;
 text-align: center;
}

.empty-symbol {
 display: block;
 margin-bottom: 12px;
 color: #b4a8d7;
 font-size: 30px;
}

.note {
 border: 1px solid #eeeaf6;
 border-radius: 8px;
 padding: 14px;
 background: #faf9fd;
 color: #898197;
 font-size: 11px;
 line-height: 1.8;
 overflow-wrap: anywhere;
}

.space-top {
 margin-top: 22px;
}

.toolbar {
 display: flex;
 min-width: 0;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px;
}

.search {
 width: min(280px, 100%);
 background-color: #fafbfd !important;
 font-size: 12px;
}

.form-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 column-gap: 20px;
}

.form-grid > * {
 min-width: 0;
}

.form-actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 gap: 10px;
 margin-top: 12px;
}

.inline-label {
 display: flex;
 align-items: flex-start;
 gap: 9px;
}

.inline-label input {
 margin-top: 1px;
}

.danger-zone {
 border-color: #efdadd;
}

.danger-zone .panel-header {
 background: #fffafb;
}

.settings-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 22px;
}

.settings-grid > .panel {
 margin-bottom: 0;
}

.fact-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 12px;
}

.fact-grid > div {
 min-width: 0;
 border: 1px solid #f0f2f5;
 border-radius: 8px;
 padding: 13px 14px;
 background: #fcfcfd;
}

.fact-grid span {
 display: block;
 color: #9aa3b0;
 font-size: 10px;
 letter-spacing: .4px;
}

.fact-grid b {
 display: block;
 margin-top: 5px;
 color: #4b5565;
 font-size: 13px;
 font-weight: 500;
 overflow-wrap: anywhere;
}

.segmented {
 display: flex;
 max-width: 680px;
 gap: 6px;
 margin: 0 0 22px;
 border: 1px solid var(--line);
 border-radius: 10px;
 padding: 5px;
 background: #f7f7fa;
}

.segment {
 display: inline-flex;
 flex: 1;
 min-height: 42px;
 align-items: center;
 justify-content: center;
 gap: 4px;
 border: 0;
 border-radius: 7px;
 padding: 10px 12px;
 background: transparent;
 color: #7f8998;
 font-size: 12px;
 font-weight: 500;
}

.segment.active {
 background: #fff;
 color: var(--purple);
 box-shadow: 0 2px 8px #2521390d;
}

.segment .count-chip {
 margin-left: 2px;
}

.manage-links {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 16px;
}

.manage-link {
 display: flex;
 min-width: 0;
 flex-direction: column;
 align-items: flex-start;
 gap: 7px;
 border: 1px solid var(--line);
 border-radius: 10px;
 padding: 20px 22px;
 background: #fff;
 color: #4b5565;
 text-align: left;
}

.manage-link:hover {
 border-color: #ded5f1;
 background: #fcfbff;
}

.manage-link b {
 font-size: 13px;
 font-weight: 600;
}

.manage-link span {
 color: #9aa3b0;
 font-size: 11px;
 line-height: 1.7;
}

.manage-link small {
 margin-top: auto;
 color: #9380b8;
 font-size: 10px;
}

.manage-link.danger-link {
 grid-column: span 2;
 border-color: #f0dfe2;
}

.manage-link.danger-link b {
 color: #b4525d;
}

.manage-link.danger-link small {
 color: #c06a74;
}

.member-toolbar {
 flex: 1 1 320px;
 justify-content: flex-end;
}

.member-toolbar .search {
 flex: 1 1 200px;
 width: auto;
}

.member-toolbar select {
 flex: 0 1 150px;
 min-width: 125px;
}

.list-summary {
 border-bottom: 1px solid #f0f2f5;
 padding: 12px 24px;
 background: #fcfcfd;
 color: #9aa3b0;
 font-size: 10px;
 letter-spacing: .2px;
}

.create-member > summary {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 21px 24px;
 list-style: none;
 cursor: pointer;
 color: #4b5565;
 font-size: 13px;
 font-weight: 600;
}

.create-member > summary::-webkit-details-marker {
 display: none;
}

.create-member > summary small {
 margin-left: auto;
 color: #9aa3b0;
 font-size: 10px;
 font-weight: 400;
}

.create-member > summary .summary-plus {
 color: #9380b8;
 font-size: 18px;
 font-weight: 400;
 line-height: 1;
 transition: transform .18s ease;
}

.create-member[open] > summary .summary-plus {
 transform: rotate(45deg);
}

.create-member[open] > summary {
 border-bottom: 1px solid #f0f2f5;
}

.create-member > .panel-body {
 padding-top: 20px;
}

.contact-access {
 margin-bottom: 20px;
 padding: 20px 24px;
}

.contact-access-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
 align-items: start;
 gap: 24px;
}

.contact-fold {
 min-width: 0;
 border: 1px solid var(--line);
 border-radius: 10px;
 background: #fff;
}

.contact-fold summary {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 14px 16px;
 cursor: pointer;
 list-style: none;
 font-size: 12px;
 font-weight: 600;
}

.contact-fold summary::-webkit-details-marker {
 display: none;
}

.contact-fold summary::after {
 content: '＋';
 color: var(--muted);
 font-size: 14px;
 font-weight: 400;
}

.contact-fold[open] summary::after {
 content: '−';
}

.contact-fold summary small {
 margin-left: auto;
 color: var(--muted);
 font-size: 10px;
 font-weight: 400;
}

.contact-fold-body {
 padding: 0 16px 16px;
}

.contact-fold-body > p {
 margin: 0 0 10px;
 font-size: 11px;
}

.contact-requests {
 margin-top: 14px;
 border-top: 1px solid var(--line);
 padding-top: 12px;
}

.contact-requests[hidden],
.outgoing-requests-wrap[hidden] {
 display: none;
}

.contact-requests-heading {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 12px;
}

.contact-requests-heading .count-chip {
 margin-left: 0;
}

.outgoing-requests-wrap {
 margin-top: 16px;
 border-top: 1px solid var(--line);
 padding-top: 12px;
}

.outgoing-requests-wrap > b {
 font-size: 11px;
 color: var(--muted);
}

.contact-access label {
 min-width: 0;
 margin: 0;
}

.contact-access input {
 width: 100%;
}

.contact-access input[readonly] {
 font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
 font-size: 12px;
}

.id-copy-field {
 display: grid;
 min-width: 0;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 8px;
}

.id-copy-field button {
 flex-shrink: 0;
}

#contact-form {
 display: grid;
 min-width: 0;
 grid-template-columns: minmax(0, 1fr) auto;
 align-items: start;
 gap: 10px;
}

#contact-form label {
 flex: 1;
}

#contact-form button {
 margin-top: 26px;
 white-space: nowrap;
}

#contact-form:has(.field-error) button {
 margin-top: 26px;
}

.contact-access > p {
 margin: 14px 0 0;
 font-size: 12px;
}

.contact-request {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 12px 16px;
 margin-top: 16px;
 border-top: 1px solid var(--line);
 padding-top: 16px;
 font-size: 12px;
}

.contact-request > div:first-child {
 min-width: 0;
}

.contact-request code,
.member-id {
 display: block;
 margin-top: 6px;
 color: var(--muted);
 font-size: 11px;
 overflow-wrap: anywhere;
}

.request-actions {
 display: flex;
 flex: 0 0 auto;
 flex-wrap: wrap;
 gap: 8px;
}

.sessions-panel .panel-header {
 padding: 18px 22px;
}

.session-row {
 width: 100%;
 min-width: 0;
 margin: 0;
 border: 0;
 border-bottom: 1px solid var(--line);
 border-radius: 0;
 padding: 18px 22px;
}

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

.session-row:hover {
 background: #f8f6fd;
}

.contact {
 display: flex;
 align-items: center;
 gap: 12px;
 background: #fff;
 color: var(--ink);
 text-align: left;
}

.contact.active {
 background: #f2effb;
}

.session-row .avatar {
 width: 44px;
 height: 44px;
 font-size: 18px;
}

.session-detail {
 flex: 1;
 min-width: 0;
}

.session-detail b {
 display: flex;
 min-width: 0;
 flex-wrap: wrap;
 align-items: center;
 gap: 6px 9px;
 font-size: 14px;
}

.session-detail small {
 display: block;
 margin-top: 7px;
 overflow: hidden;
 color: var(--muted);
 font-size: 12px;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.session-time {
 flex: 0 0 auto;
 color: var(--muted);
 font-size: 10px;
 white-space: nowrap;
}

.session-time > span {
 margin-left: 10px;
 font-size: 22px;
}

.chat-layout {
 display: grid;
 height: calc(100dvh - 270px);
 min-height: 450px;
 grid-template-columns: 230px minmax(0, 1fr);
}

.contact-list {
 border-right: 1px solid var(--line);
 padding: 12px;
 overflow: auto;
}

.conversation {
 display: flex;
 min-width: 0;
 min-height: 0;
 flex-direction: column;
}

.conversation-head {
 display: flex;
 min-width: 0;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 border-bottom: 1px solid var(--line);
 padding: 16px 22px;
 font-size: 12px;
}

.conversation-title {
 flex: 1;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.messages {
 display: flex;
 min-height: 0;
 flex: 1;
 flex-direction: column;
 gap: 16px;
 padding: 24px;
 overflow: auto;
}

.message {
 max-width: 80%;
 min-width: 0;
 align-self: flex-start;
}

.message.own {
 align-self: flex-end;
}

.bubble {
 max-width: 100%;
 border-radius: 10px 10px 10px 2px;
 padding: 12px 15px;
 background: #f2f3f7;
 font-size: 13px;
 line-height: 1.7;
 overflow-wrap: anywhere;
 white-space: pre-wrap;
}

.own .bubble {
 border-radius: 10px 10px 2px 10px;
 background: #ede9fa;
 color: #60518f;
}

.message-meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
 margin: 5px 0;
 color: #a1a7b3;
 font-size: 9px;
}

.own .message-meta {
 justify-content: flex-end;
}

.message-meta button {
 border: 0;
 border-radius: 4px;
 padding: 4px;
 background: none;
 color: #8f96a5;
 font-size: 10px;
}

.composer {
 display: grid;
 min-width: 0;
 grid-template-columns: auto minmax(0, 1fr) auto;
 align-items: end;
 gap: 10px;
 border-top: 1px solid var(--line);
 padding: 14px 18px;
}


.composer textarea {
 height: 46px;
 min-height: 46px;
 max-height: 132px;
 padding: 11px 12px;
 overflow-y: auto;
 resize: none;
 font-size: 12px;
}

.composer button {
 min-width: 44px;
 height: 46px;
}

.composer-tools {
 display: flex;
 align-items: end;
 gap: 6px;
}

.composer-tools .secondary {
 font-size: 22px;
}

.ttl-button {
 font-size: 26px;
 color: #514a67;
}

.ttl-button.custom {
 border-color: #d9cff0;
 background: #f6f2ff;
 color: #6b4fa8;
}

.mobile-select {
 display: none;
}

html.thread-open,
html.thread-open body {
 overflow: hidden;
 overscroll-behavior: none;
}

.app.thread-mode {
 position: fixed;
 top: var(--thread-top, 0px);
 left: 0;
 z-index: 30;
 width: 100%;
 height: var(--thread-height, 100dvh);
 min-height: 0;
 overflow: hidden;
 background: #fff;
}

.thread-mode > .sidebar,
.thread-mode .main > header,
.thread-mode .main > footer {
 display: none;
}

.thread-mode .main {
 display: flex;
 width: 100%;
 height: 100%;
 min-height: 0;
 flex-direction: column;
 margin: 0;
 padding: 0;
}

.thread-mode #content {
 display: flex;
 width: 100%;
 max-width: none;
 height: 100%;
 min-height: 0;
 flex: 1;
 margin: 0;
 padding: 0;
}

.thread-mode .conversation {
 width: 100%;
 height: 100%;
 overflow: hidden;
}

.thread-mode .conversation-head {
 min-height: 68px;
 flex: 0 0 auto;
 gap: 14px;
 padding: calc(12px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
 background: #fff;
}

.thread-mode .conversation-title {
 font-size: 16px;
}

.thread-mode .conversation-head button {
 min-height: 42px;
 padding: 10px 14px;
}

.thread-mode .messages {
 flex: 1 1 0;
 padding: 22px max(20px, env(safe-area-inset-right)) 22px max(20px, env(safe-area-inset-left));
 overscroll-behavior: contain;
 background: #f7f7fb;
 scrollbar-gutter: stable;
}

.thread-mode .composer {
 flex: 0 0 auto;
 padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
 background: #fff;
}

.thread-mode .composer textarea {
 height: 48px;
 min-height: 48px;
 border-radius: 12px;
 padding: 12px;
 font-size: 16px;
 line-height: 22px;
}

.thread-mode .composer button {
 height: 48px;
 min-width: 44px;
 border-radius: 12px;
}

.connection-state {
 flex: 0 0 auto;
 background: #f4f1fa;
 color: #9380b8;
}

.connection-state.connected {
 background: #edf7f1;
 color: #258568;
}

.image-bubble {
 overflow: hidden;
 padding: 8px;
}

.image-thumb {
 display: block;
 max-width: 260px;
 min-width: 0;
 border: 0;
 border-radius: 7px;
 padding: 0;
 overflow: hidden;
 background: #e7e4ef;
 text-align: center;
}

.chat-image {
 display: block;
 width: auto;
 height: auto;
 max-width: 100%;
 max-height: 220px;
 object-fit: contain;
}

.chat-image[hidden],
.preview-stage img[hidden] {
 display: none;
}

.image-caption {
 font-size: 11px;
 overflow-wrap: anywhere;
 padding: 8px 4px 0;
}

.image-caption small {
 margin-left: 6px;
 color: var(--muted);
}

.image-actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 gap: 4px 12px;
}

.image-actions .text-button {
 padding: 8px 4px 3px;
 font-size: 10px;
}

.video-bubble {
 padding: 8px;
 overflow: hidden;
}

.video-card {
 min-width: 220px;
 max-width: 430px;
}

.chat-video {
 display: block;
 width: 100%;
 max-height: 360px;
 border-radius: 7px;
 background: #111;
}

.video-caption {
 font-size: 11px;
 overflow-wrap: anywhere;
 padding: 8px 4px 0;
}

.video-caption small {
 margin-left: 6px;
 color: var(--muted);
}

.video-actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 gap: 4px 12px;
}

.video-actions .text-button {
 padding: 8px 4px 3px;
 font-size: 10px;
}

.video-fallback {
 display: none;
 padding: 12px;
 color: #7b718e;
 font-size: 11px;
}

.preview-unavailable .chat-video {
 display: none;
}

.preview-unavailable .video-fallback {
 display: block;
}

.image-fallback {
 display: none;
 padding: 28px 12px;
 color: #7b718e;
 font-size: 11px;
}

.preview-unavailable .image-fallback {
 display: block;
}

.transfer-status {
 margin: 12px 18px;
 border: 1px solid #e7e0f6;
 border-radius: 8px;
 padding: 14px;
 background: #f6f3fc;
}

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

.transfer-heading b {
 min-width: 0;
 font-size: 12px;
 overflow-wrap: anywhere;
}

.transfer-heading button {
 flex: 0 0 auto;
}

.transfer-status progress {
 display: block;
 width: 100%;
 height: 8px;
 margin: 9px 0;
 accent-color: var(--purple);
}

.transfer-status p {
 margin: 0;
 font-size: 11px;
}

.thread-mode .transfer-status {
 flex: 0 0 auto;
 margin: 0;
 border-right: 0;
 border-left: 0;
 border-radius: 0;
 padding: 10px 18px;
}

.thread-mode .transfer-status p {
 margin: 0;
}

.thread-mode .transfer-heading b {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.upload-zone {
 margin-bottom: 16px;
 border: 1px dashed #d4cbe9;
 border-radius: 9px;
 padding: 26px;
 background: #fbfaff;
 text-align: center;
}

.upload-zone p {
 font-size: 11px;
}

#selected-upload-file {
 overflow-wrap: anywhere;
}

.login-screen {
 display: flex;
 min-height: 100vh;
 min-height: 100dvh;
 flex-direction: column;
 padding: 38px clamp(24px, 7vw, 100px);
 background: #f7f7fa;
}

.login-brand {
 display: flex;
 align-items: center;
 gap: 12px;
 font-size: 24px;
 font-weight: 600;
}

.login-brand > span:last-child {
 margin-left: 5px;
 color: #9c95ae;
 font-size: 9px;
 letter-spacing: 2px;
}

.login-layout {
 display: grid;
 width: 100%;
 max-width: 1100px;
 grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr);
 align-items: center;
 gap: clamp(40px, 7vw, 100px);
 margin: clamp(42px, 9vh, 104px) auto 40px;
}

.login-intro {
 min-width: 0;
}

.login-intro h1 {
 margin: 22px 0;
 font-size: clamp(34px, 3.5vw, 44px);
 font-weight: 500;
 line-height: 1.5;
 letter-spacing: 1px;
}

.login-intro p {
 font-size: 14px;
 line-height: 2.2;
}

.security-line {
 display: flex;
 flex-wrap: wrap;
 gap: 12px 24px;
 margin-top: 36px;
 color: #8d80af;
 font-size: 10px;
}

.login-card {
 width: 100%;
 max-width: 460px;
 min-width: 0;
 justify-self: end;
 border: 1px solid var(--line);
 border-radius: 15px;
 padding: 36px;
 background: #fff;
 box-shadow: 0 15px 45px #25213905;
}

.login-card h2 {
 margin: 13px 0;
 font-size: 23px;
}

.login-card > p {
 margin-bottom: 28px;
}

.login-card input {
 min-height: 48px;
}

.login-card .primary {
 width: 100%;
 min-height: 48px;
 justify-content: center;
 margin-top: 8px;
}

.login-qr {
 display: flex;
 align-items: center;
 gap: 16px;
 margin-top: 24px;
 border-top: 1px solid var(--line);
 padding-top: 22px;
}

.login-qr-code {
 width: 148px;
 height: 148px;
 flex: 0 0 auto;
 border: 1px solid var(--line);
 border-radius: 10px;
 padding: 6px;
 background: #fff;
}

.login-qr-code:empty {
 display: none;
}

.login-qr-code svg {
 display: block;
 width: 100%;
 height: 100%;
}

.login-qr-copy {
 display: flex;
 min-width: 0;
 flex-direction: column;
 gap: 4px;
}

.login-qr-copy b {
 color: #4b4361;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: .5px;
}

.login-qr-copy span {
 color: #8d80af;
 font-size: 10px;
 line-height: 1.6;
 overflow-wrap: anywhere;
}

.login-qr-copy small {
 color: #a4aab4;
 font-size: 10px;
 line-height: 1.6;
}

.login-qr-refresh {
 display: block;
 width: 100%;
 height: 100%;
 border: 0;
 border-radius: 7px;
 padding: 8px;
 background: #faf9fe;
 color: #675b8e;
 font-size: 11px;
}

#login-qr-status {
 color: #8d80af;
}

.web-login-dialog {
 width: min(440px, calc(100vw - 32px));
 max-width: 440px;
}

.web-login-heading {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
}

.web-login-heading h2 {
 margin: 6px 0 4px;
 font-size: 21px;
}

.web-login-heading p {
 margin: 0;
 color: var(--muted);
 font-size: 12px;
}

.web-login-heading .text-button {
 flex: 0 0 auto;
 font-size: 26px;
 line-height: 1;
}

.web-login-host {
 margin: -8px 0 18px;
 border: 1px solid var(--line);
 border-radius: 9px;
 padding: 12px;
 background: #f8f7fc;
 color: #514a67;
 font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
 font-size: 12px;
 overflow-wrap: anywhere;
}

.web-login-dialog .error {
 margin: 0 0 14px;
}

.login-note {
 margin-top: 18px;
 padding-top: 0;
 border-top: 0;
 color: #a4aab4;
 font-size: 10px;
 line-height: 1.9;
 text-align: center;
}

.login-footer {
 color: #aaa5b5;
 font-size: 10px;
 letter-spacing: 2px;
 text-align: center;
}

@media (min-width: 761px) and (max-height: 860px) {
 .login-screen {
  padding-top: 24px;
  padding-bottom: 24px;
 }

 .login-layout {
  margin-top: 24px;
  margin-bottom: 20px;
 }

 .login-card {
  padding-top: 30px;
  padding-bottom: 26px;
 }

 .login-qr {
  margin-top: 18px;
  padding-top: 18px;
 }

 .login-qr-code {
  width: 128px;
  height: 128px;
 }

 .login-note {
  margin-top: 14px;
 }
}

.toast {
 position: fixed;
 bottom: calc(26px + env(safe-area-inset-bottom));
 left: 50%;
 z-index: 1000;
 width: max-content;
 max-width: min(440px, calc(100vw - 32px));
 border-radius: 9px;
 padding: 13px 22px;
 background: #2d3447;
 box-shadow: 0 5px 25px #0002;
 color: #fff;
 font-size: 12px;
 line-height: 1.6;
 overflow-wrap: anywhere;
 text-align: center;
 pointer-events: none;
 transform: translateX(-50%);
}

.toast.error-toast {
 background: #ab4754;
}

dialog {
 width: min(420px, calc(100vw - 32px));
 max-width: 420px;
 max-height: calc(100vh - 32px);
 max-height: calc(100dvh - 32px);
 margin: auto;
 border: 1px solid var(--line);
 border-radius: 14px;
 padding: 26px;
 overflow: auto;
 background: #fff;
 box-shadow: 0 20px 60px #0002;
 color: var(--ink);
}

dialog::backdrop {
 background: #1c20394d;
 backdrop-filter: blur(3px);
}

dialog p {
 margin: 15px 0 23px;
}

.dialog-actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 gap: 10px;
}

.dialog-icon {
 display: grid;
 width: 35px;
 height: 35px;
 place-items: center;
 margin-bottom: 17px;
 border-radius: 50%;
 background: #fcebef;
 color: #c95560;
}

.ttl-dialog {
 width: min(430px, calc(100vw - 32px));
 max-width: 430px;
}

.ttl-dialog-heading {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
}

.ttl-dialog-heading h2 {
 margin: 0;
 font-size: 20px;
}

.ttl-dialog-heading .text-button {
 flex: 0 0 auto;
 font-size: 26px;
 line-height: 1;
}

.ttl-dialog-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 gap: 12px;
 margin-top: 16px;
}

.ttl-dialog-grid label {
 margin: 0;
}

.ttl-dialog .ttl-default {
 margin: 10px 0 0;
 color: var(--muted);
 font-size: 11px;
}

.ttl-dialog .error {
 margin: 8px 0 0;
}

.ttl-dialog #message-ttl-reset {
 margin-right: auto;
}

.image-dialog {
 width: min(960px, calc(100vw - 32px));
 max-width: 960px;
 padding: 0;
}

.image-dialog[open] {
 display: flex;
 flex-direction: column;
}

.preview-header {
 display: flex;
 flex: 0 0 auto;
 align-items: center;
 justify-content: space-between;
 gap: 15px;
 border-bottom: 1px solid var(--line);
 padding: 18px 22px;
}

.preview-header > div {
 min-width: 0;
}

.preview-header h2 {
 font-size: 15px;
 overflow-wrap: anywhere;
}

.preview-header p {
 margin: 6px 0 0;
 font-size: 11px;
}

.preview-header button {
 flex: 0 0 auto;
}

.preview-stage {
 display: flex;
 min-height: 180px;
 flex: 1 1 auto;
 align-items: center;
 justify-content: center;
 padding: 16px;
 overflow: auto;
 background: #f3f3f7;
}

.preview-stage img {
 display: block;
 width: auto;
 height: auto;
 max-width: 100%;
 max-height: 66dvh;
 object-fit: contain;
}

.preview-footer {
 display: flex;
 flex: 0 0 auto;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 15px 22px;
}

.preview-footer span {
 color: var(--muted);
 font-size: 11px;
}

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

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

.attachment-header .text-button {
 flex: 0 0 auto;
 font-size: 24px;
}

.attachment-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 10px;
}

.attachment-grid button {
 min-width: 0;
 min-height: 88px;
 border: 1px solid var(--line);
 border-radius: 10px;
 padding: 14px 5px;
 background: #faf9fe;
 color: #675b8e;
 font-size: 11px;
}

.attachment-grid span {
 display: block;
 margin-bottom: 9px;
 font-size: 27px;
}

.attachment-dialog > p {
 margin: 20px 0 0;
 font-size: 11px;
}

@media (hover: hover) {
 button:not(:disabled):hover {
  filter: brightness(.97);
 }
}

@media (min-width: 1500px) {
 main {
  padding-top: 44px;
 }

 .hero {
  padding: 34px;
 }

 .stats {
  gap: 22px;
 }
}

@media (max-width: 1200px) {
 .stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

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

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

 .manage-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .manage-link.danger-link {
  grid-column: auto;
 }

 .contact-access-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
 }

 #contact-form button {
  margin-top: 26px;
 }
}

@media (max-width: 1100px) {
 .sidebar {
  width: 200px;
  padding: 28px 15px 18px;
 }

 .main {
  width: calc(100% - 200px);
  margin-left: 200px;
 }

 main {
  padding: 28px 24px;
 }

 .main > header {
  padding: 0 24px;
 }

 .header-right {
  gap: 12px;
 }

 #today {
  display: none;
 }

 .stat {
  padding: 17px;
 }

 .hero-art {
  width: 105px;
 }

 th, td {
  padding-right: 17px;
  padding-left: 17px;
 }

 .login-layout {
  gap: 40px;
 }
}

@media (max-width: 760px) {
 :root {
  --bottom-nav-height: calc(68px + env(safe-area-inset-bottom));
 }

 body {
  font-size: 14px;
 }

 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
 select,
 textarea {
  min-height: 48px;
  font-size: 16px;
 }

 .primary,
 .secondary,
 .danger {
  min-height: 44px;
 }

 .sidebar {
  inset: auto 0 0;
  display: block;
  width: 100%;
  height: var(--bottom-nav-height);
  padding: 0 6px env(safe-area-inset-bottom);
  overflow: visible;
  border-top: 1px solid var(--line);
  border-right: 0;
  background: #fffffff5;
  backdrop-filter: blur(12px);
 }

 .sidebar > .brand,
 .workspace-label,
 .sidebar-bottom {
  display: none;
 }

 .sidebar nav {
  display: flex;
  height: 68px;
  align-items: stretch;
  justify-content: space-around;
  gap: 0;
 }

 #app.admin-mode .admin-nav {
  display: flex;
 }

 .manage-entry {
  margin-top: 0;
 }

 .nav {
  width: auto;
  max-width: 140px;
  min-width: 0;
  min-height: 0;
  height: 68px;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border-radius: 0;
  padding: 7px 2px 6px;
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
 }

 .nav span {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1.1;
 }

 .nav.active {
  background: transparent;
 }

 .main {
  width: 100%;
  margin: 0;
  padding-bottom: var(--bottom-nav-height);
 }

 .main > header {
  height: 62px;
  gap: 10px;
  padding: 0 16px;
 }

 .breadcrumb {
  font-size: 11px;
 }

 .breadcrumb span {
  padding: 0 8px;
 }

 .header-right {
  gap: 8px;
 }

 .mobile-logout {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 0;
  border-radius: 6px;
  padding: 8px;
  background: transparent;
  color: #8a819d;
  font-size: 11px;
 }

 .admin-back {
  min-height: 36px;
  padding: 6px 8px;
  font-size: 10px;
 }

 .private-badge {
  padding: 5px 7px;
  font-size: 9px;
 }

 main {
  min-height: 0;
  padding: 24px 16px;
 }

 footer {
  gap: 4px;
  padding: 8px 16px 14px;
  font-size: 9px;
  letter-spacing: 0;
 }

 footer span {
  display: none;
 }

 .page-heading {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 21px;
 }

 .page-heading > div {
  flex-basis: 240px;
 }

 .page-heading .primary {
  margin-top: 4px;
 }

 .eyebrow {
  font-size: 9px;
 }

 .hero {
  margin-bottom: 18px;
  padding: 22px 20px;
 }

 .hero h2 {
  font-size: 17px;
 }

 .hero p {
  font-size: 11px;
 }

 .hero-art {
  display: none;
 }

 .hero-tags {
  gap: 8px 12px;
  font-size: 9px;
 }

 .stats {
  gap: 11px;
  margin-bottom: 20px;
 }

 .stat {
  padding: 15px;
 }

 .stat-label {
  font-size: 11px;
 }

 .stat-value {
  font-size: 25px;
 }

 .panel {
  margin-bottom: 18px;
 }

 .panel-header {
  padding: 18px 16px;
 }

 .panel-header h2 {
  font-size: 14px;
 }

 .panel-body {
  padding: 18px 16px;
 }

 .panel-header > .search {
  width: 100%;
  flex: 1 1 100%;
 }

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

 .settings-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
 }

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

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

 .member-toolbar {
  flex: 1 1 100%;
  justify-content: stretch;
 }

 .member-toolbar .search {
  flex: 1 1 100%;
  width: 100%;
 }

 .member-toolbar select {
  flex: 1 1 100%;
  min-width: 0;
 }

 .list-summary {
  padding: 11px 16px;
 }

 .create-member > summary {
  padding: 18px 16px;
 }

 .segmented {
  margin-bottom: 18px;
 }

 .segment {
  min-height: 40px;
  padding: 9px 8px;
  font-size: 11px;
 }

 .contact-access {
  padding: 18px;
 }

 .contact-access input[readonly] {
  font-size: 16px;
 }

 .contact-request {
  align-items: flex-start;
 }

 .request-actions {
  width: 100%;
  justify-content: flex-end;
 }

 .sessions-panel .panel-header {
  padding: 16px;
 }

 .session-row {
  gap: 10px;
  padding: 16px;
 }

 .session-row .avatar {
  width: 40px;
  height: 40px;
 }

 .session-detail b {
  font-size: 13px;
 }

 .session-detail small {
  font-size: 11px;
 }

 .session-time {
  font-size: 9px;
 }

 .session-time > span {
  margin-left: 4px;
 }

 .message {
  max-width: 90%;
 }

 .messages {
  padding: 16px;
 }

 .composer {
  gap: 8px;
  padding: 12px;
 }

 .composer .primary,
 .composer .secondary {
  padding: 10px 13px;
 }

 .thread-mode .conversation-head {
  gap: 10px;
  padding-right: max(12px, env(safe-area-inset-right));
  padding-left: max(12px, env(safe-area-inset-left));
 }

 .thread-mode .conversation-head button {
  padding: 10px;
 }

 .thread-mode .conversation-title {
  font-size: 15px;
 }

 .thread-mode .composer {
  gap: 8px;
 }

 .thread-mode .composer .primary {
  padding: 10px 14px;
 }

 .thread-mode .messages {
  padding: 16px;
  scrollbar-gutter: auto;
 }

 .thread-mode .connection-state {
  padding: 4px 5px;
  font-size: 9px;
 }

 .image-thumb {
  max-width: 210px;
 }

 .chat-image {
  max-height: 200px;
 }

 .chat-video {
  max-height: 240px;
 }


 .transfer-status {
  margin-right: 0;
  margin-left: 0;
 }

 .upload-zone {
  padding: 22px 16px;
 }

 .login-screen {
  display: block;
  min-height: 100dvh;
  padding: calc(32px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 0%, #e9e4ff 0%, transparent 58%), #f7f8fc;
 }

 .login-brand {
  justify-content: center;
  gap: 12px;
  color: #30294d;
  font-size: 25px;
  font-weight: 650;
  letter-spacing: 3px;
 }

 .login-brand .brand-symbol {
  width: 50px;
  height: 50px;
  border-radius: 17px;
  background: linear-gradient(145deg, #8a78ed, #6252ce);
  box-shadow: 0 8px 22px #7563cf26;
  font-size: 35px;
  letter-spacing: 0;
 }

 .login-intro,
 .login-footer,
 .login-note,
 .login-qr,
 .login-card > .eyebrow,
 .login-brand > span:last-child {
  display: none;
 }

 .login-layout {
  display: block;
  max-width: 400px;
  margin: 30px auto 0;
 }

 .login-card {
  max-width: 400px;
  margin: 0 auto;
  border: 1px solid #fff;
  border-radius: 24px;
  padding: 28px 24px 22px;
  background: #ffffffed;
  box-shadow: 0 12px 45px #3d28680a;
 }

 .login-card h2 {
  margin: 0 0 9px;
  color: #292438;
  font-size: 25px;
  font-weight: 650;
  letter-spacing: .5px;
 }

 .login-card > p {
  margin: 0 0 26px;
  color: #8a8599;
  font-size: 13px;
  line-height: 1.6;
 }

 .login-card label {
  gap: 9px;
  margin-bottom: 19px;
  color: #655e76;
  font-size: 13px;
  font-weight: 500;
 }

 .login-card input {
  min-height: 54px;
  border-color: #e8e5ef;
  border-radius: 13px;
  padding: 14px 15px;
  background: #f8f8fb;
  color: #302940;
  font-size: 16px;
 }

 .login-card input::placeholder {
  color: #aaa5b7;
  font-size: 14px;
  font-weight: 400;
 }

 .login-card input:focus {
  border-color: #9485dd;
  background: #fff;
  box-shadow: 0 0 0 3px #7563cf14;
 }

 .login-card .primary {
  min-height: 54px;
  margin-top: 10px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(110deg, #7966df, #6251c9);
  box-shadow: 0 6px 16px #6c59ce26;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
 }

 .login-card .error {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
 }

 .dialog-actions > button {
  flex: 1 1 110px;
 }

 .image-dialog {
  width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
 }

 .preview-header,
 .preview-footer {
  padding: 13px;
 }

 .preview-footer span {
  font-size: 10px;
 }

 .attachment-dialog {
  width: 100%;
  max-width: none;
  max-height: 92dvh;
  margin: auto 0 0;
  border-radius: 18px 18px 0 0;
  padding: 23px 20px calc(22px + env(safe-area-inset-bottom));
 }

 .attachment-grid {
  gap: 10px;
 }

 .attachment-grid button {
  min-height: 96px;
  padding: 18px 4px;
 }

 .toast {
  bottom: calc(var(--bottom-nav-height) + 16px);
 }
}

@media (max-width: 480px) {
 .page-heading > .primary,
 .page-heading > .secondary,
 .page-heading > .danger {
  width: 100%;
  margin-top: 0;
 }

 .form-actions {
  justify-content: stretch;
 }

 .form-actions > button {
  width: 100%;
 }

 .panel-header > .danger {
  width: 100%;
 }

 .policy-row {
  grid-template-columns: auto minmax(0, 1fr);
 }

 .policy-row > .badge,
 .policy-row > .text-button {
  grid-column: 2;
  justify-self: start;
 }

 #contact-form {
  grid-template-columns: minmax(0, 1fr);
 }

 #contact-form button {
  width: 100%;
  margin-top: 0;
 }

 .session-time {
  font-size: 0;
 }

 .session-time > span {
  font-size: 20px;
 }

 .preview-footer > button {
  width: 100%;
 }
}

@media (max-width: 380px) {
 .private-badge {
  display: none;
 }

 .stats {
  gap: 9px;
 }

 .stat {
  padding: 13px;
 }

 .stat-label > span:last-child {
  padding: 5px;
 }

 .login-screen {
  padding-right: 16px;
  padding-left: 16px;
 }

 .login-card {
  padding: 25px 20px 20px;
 }

 .attachment-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (min-width: 761px) and (max-height: 700px) {
 .sidebar {
  padding-top: 20px;
 }

 .workspace-label {
  margin-top: 25px;
 }

 .sidebar-bottom {
  padding-top: 18px;
 }
}

@media (max-width: 760px) and (max-height: 600px) {
 .login-screen {
  padding-top: calc(18px + env(safe-area-inset-top));
 }

 .login-brand .brand-symbol {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  font-size: 29px;
 }

 .login-layout {
  margin-top: 18px;
 }

 .login-card {
  padding-top: 22px;
 }

 .login-card > p {
  margin-bottom: 20px;
 }
}

@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
 }
}
.edit-user-dialog{width:min(560px,94vw);max-width:560px;max-height:90dvh;overflow-y:auto}.edit-user-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.edit-user-heading .text-button{font-size:26px}.edit-user-dialog .error{margin-bottom:16px}.member-actions{display:flex;align-items:center;gap:10px}

.qr-dialog {
 width: min(540px, 94vw);
 max-width: 540px;
 max-height: 92dvh;
 padding: 22px;
 overflow-y: auto;
 background: #fbfaff;
}

.qr-dialog-heading {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
}

.qr-dialog-heading h2 {
 margin: 6px 0 4px;
 font-size: 21px;
}

.qr-dialog-heading p {
 margin: 0;
 color: #8f879e;
 font-size: 12px;
}

.qr-dialog-heading .text-button {
 flex: 0 0 auto;
 font-size: 26px;
 line-height: 1;
}

.qr-preview {
 display: grid;
 place-items: center;
 min-height: 260px;
 margin: 18px 0 10px;
}

.qr-preview canvas {
 display: block;
 width: min(100%, 380px);
 height: auto;
 border-radius: 18px;
 box-shadow: 0 14px 40px #3b2b6524;
}

.qr-empty {
 display: grid;
 width: min(100%, 380px);
 min-height: 280px;
 place-items: center;
 align-content: center;
 gap: 7px;
 border: 1px dashed #ddd6ee;
 border-radius: 18px;
 padding: 20px;
 background: #fff;
 color: #a49cb3;
 text-align: center;
}

.qr-empty-mark {
 color: #b9a9e2;
 font-size: 40px;
}

.qr-empty b {
 color: #5c526e;
 font-size: 14px;
}

.qr-empty p {
 margin: 0;
 font-size: 11px;
 line-height: 1.7;
}

.qr-status {
 min-height: 18px;
 margin: 8px 0;
 color: #8f879e;
 font-size: 11px;
 line-height: 1.7;
}

.qr-warning {
 margin: 12px 0 0;
}

.qr-actions {
 justify-content: space-between;
 gap: 8px;
}

.qr-actions button {
 flex: 1 1 120px;
}

@media (max-width: 760px) {
 .qr-dialog {
  width: calc(100vw - 24px);
  max-width: calc(100vw - 24px);
  max-height: 94dvh;
  padding: 18px;
 }

 .qr-preview {
  min-height: 220px;
 }

 .qr-preview canvas {
  width: 100%;
 }

 .qr-actions button {
  flex: 1 1 100%;
 }
}

.file-bubble {
 max-width: 100%;
 padding: 10px;
 overflow: hidden;
 white-space: normal;
}

.file-card {
 width: min(340px, calc(100vw - 100px));
 max-width: 100%;
 min-width: 0;
 color: #3e495a;
}

.file-card-heading {
 display: flex;
 min-width: 0;
 align-items: flex-start;
 gap: 12px;
}

.file-card-icon {
 display: grid;
 width: 48px;
 height: 52px;
 flex: 0 0 48px;
 place-items: center;
 border-radius: 10px;
 background: #efecf8;
 color: #7566a2;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: .3px;
}

.file-card-icon.docx {
 background: #e9f1fc;
 color: #3571b8;
}

.file-card-icon.xlsx {
 background: #e8f5ef;
 color: #27815c;
}

.file-card-icon.pptx {
 background: #fff0e7;
 color: #bd652e;
}

.file-card-icon.pdf {
 background: #fcecee;
 color: #bd4d58;
}

.file-card-info {
 flex: 1;
 min-width: 0;
}

.file-card-info strong {
 display: block;
 font-size: 13px;
 font-weight: 600;
 line-height: 1.55;
 overflow-wrap: anywhere;
}

.file-card-info span,
.file-card-info small {
 display: block;
 margin-top: 5px;
 color: #8993a2;
 font-size: 10px;
 font-weight: 400;
 line-height: 1.5;
 overflow-wrap: anywhere;
}

.file-card-info small {
 color: #a09aae;
 font-size: 9px;
}

.own .file-card-info span,
.own .file-card-info small {
 color: #82769c;
}

.file-card-actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 gap: 8px;
 margin-top: 10px;
 border-top: 1px solid #7c718414;
 padding-top: 10px;
}

.file-card-actions .secondary {
 min-height: 34px;
 flex: 0 0 auto;
 padding: 6px 13px;
 background: #ffffffa8;
 color: #6658a0;
 font-size: 11px;
}

.document-dialog {
 width: min(1180px, calc(100vw - 32px));
 max-width: 1180px;
 height: min(860px, calc(100vh - 32px));
 height: min(860px, calc(100dvh - 32px));
 max-height: calc(100vh - 32px);
 max-height: calc(100dvh - 32px);
 padding: 0;
 overflow: hidden;
}

.document-dialog[open] {
 display: flex;
 flex-direction: column;
}

.document-preview-body {
 position: relative;
 display: flex;
 min-height: 0;
 flex: 1 1 auto;
 overflow: hidden;
 background: #eff0f4;
}

.document-preview-status {
 display: flex;
 width: 100%;
 min-height: 220px;
 flex: 1;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 14px;
 padding: 30px;
 color: #7d8492;
 text-align: center;
}

.document-preview-status.rendering {
 position: absolute;
 inset: 0;
 z-index: 10;
 min-height: 0;
 background: #eff0f4f2;
 backdrop-filter: blur(2px);
}

.document-preview-status p {
 max-width: 460px;
 margin: 0;
 font-size: 12px;
}

.document-preview-status.error .preview-spinner {
 display: none;
}

.document-preview-status.error p {
 color: #b54c58;
 line-height: 1.8;
}

.preview-spinner {
 width: 28px;
 height: 28px;
 border: 3px solid #d9d4e9;
 border-top-color: var(--purple);
 border-radius: 50%;
 animation: preview-spin .8s linear infinite;
}

@keyframes preview-spin {
 to { transform: rotate(360deg); }
}

.document-preview-content {
 position: relative;
 width: 100%;
 min-width: 0;
 min-height: 0;
 flex: 1;
 overflow: auto;
 overscroll-behavior: contain;
 -webkit-overflow-scrolling: touch;
}

.document-preview-content[hidden] {
 display: none;
}

.document-preview-content > .docx-wrapper {
 min-height: 100%;
 padding: 24px !important;
 background: #eff0f4;
}

.document-preview-content .docx-wrapper > section.docx {
 max-width: 100%;
 margin-right: auto;
 margin-bottom: 22px;
 margin-left: auto;
 background: #fff;
 box-shadow: 0 2px 12px #26223812;
 overflow-wrap: break-word;
}

.document-preview-content .docx-wrapper table {
 min-width: 0;
 max-width: 100%;
 white-space: normal;
}

.document-preview-content .docx-wrapper th,
.document-preview-content .docx-wrapper td {
 white-space: normal;
 overflow-wrap: anywhere;
}

.document-preview-content .docx-wrapper img {
 max-width: 100%;
}

.pdf-page {
 display: block;
 max-width: calc(100% - 32px);
 height: auto !important;
 margin: 16px auto;
 background: #fff;
 box-shadow: 0 3px 18px #28233426;
}

.document-preview-content.pptx-viewer {
 height: 100%;
 min-height: 320px;
}

.document-preview-content .pptx-slide-container {
 min-height: 0;
}

.document-preview-content .pptx-slide-container svg {
 max-width: 100%;
 max-height: 100%;
}

.spreadsheet-wrap {
 width: max-content;
 min-width: 100%;
 padding: 16px;
}

.spreadsheet-table {
 width: max-content;
 min-width: 100%;
 border-spacing: 0;
 border-collapse: separate;
 background: #fff;
 color: #3f4956;
 font-size: 12px;
 white-space: normal;
}

.spreadsheet-table th,
.spreadsheet-table td {
 min-width: 110px;
 max-width: 280px;
 border-top: 0;
 border-right: 1px solid #e5e8ed;
 border-bottom: 1px solid #e5e8ed;
 padding: 8px 10px;
 background: #fff;
 color: #46515f;
 line-height: 1.5;
 text-align: left;
 vertical-align: top;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
}

.spreadsheet-table thead th {
 position: sticky;
 top: 0;
 z-index: 2;
 background: #f3f1f8;
 color: #766d89;
 font-size: 10px;
 font-weight: 600;
 text-align: center;
 white-space: nowrap;
}

.spreadsheet-table .spreadsheet-row-number {
 left: 0;
 width: 52px;
 min-width: 52px;
 max-width: 52px;
 background: #f7f7fa;
 color: #979eaa;
 font-size: 10px;
 text-align: center;
 white-space: nowrap;
}

.spreadsheet-table tbody .spreadsheet-row-number {
 position: sticky;
 z-index: 1;
}

.spreadsheet-table thead .spreadsheet-row-number {
 z-index: 3;
}

.document-preview-empty,
.document-preview-limit {
 margin: 0 16px 16px;
 border-radius: 8px;
 padding: 12px 14px;
 background: #fff;
 color: #857d91;
 font-size: 11px;
}

.document-preview-limit {
 border: 1px solid #e5dff0;
 background: #faf8fd;
}

.document-preview-footer {
 justify-content: space-between;
}

.document-page-controls {
 display: flex;
 min-width: 0;
 align-items: center;
 gap: 10px;
}

.document-page-controls .secondary {
 min-height: 36px;
 padding: 7px 12px;
}

#document-page-label {
 min-width: 112px;
 max-width: min(380px, 35vw);
 color: #747d8d;
 font-size: 11px;
 line-height: 1.5;
 overflow-wrap: anywhere;
 text-align: center;
}

@media (max-width: 760px) {
 .document-dialog {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
 }

 .document-dialog .preview-header {
  padding: calc(12px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
 }

 .document-dialog .preview-header h2 {
  font-size: 13px;
}

 .document-dialog .preview-footer {
  padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
 }

 .document-preview-content > .docx-wrapper {
  padding: 10px !important;
 }

 .document-preview-content .docx-wrapper > section.docx {
  padding: 28px !important;
 }

 .document-preview-content .docx-wrapper table {
  table-layout: fixed;
 }

 .document-preview-content .docx-wrapper th,
 .document-preview-content .docx-wrapper td {
  padding: 6px;
 }

 .document-preview-content .pptx-slide-container {
  padding: 8px !important;
 }

 .spreadsheet-wrap {
  padding: 10px;
 }

 .document-page-controls {
  flex: 1 1 auto;
  gap: 6px;
 }

 .document-page-controls .secondary {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 11px;
 }

 #document-page-label {
  min-width: 0;
  flex: 1;
  max-width: none;
  font-size: 10px;
 }

 .file-card-actions .secondary {
  min-height: 38px;
 }
}

@media (max-width: 480px) {
 .document-page-controls {
  width: 100%;
 }

 .document-page-controls .secondary {
  flex: 0 0 auto;
 }

 .document-preview-status {
  padding: 22px;
 }
}

@media (prefers-reduced-motion: reduce) {
 .preview-spinner {
  animation: none;
 }
}

@media (max-width: 520px) {
 .ttl-dialog-grid {
  grid-template-columns: 1fr;
 }
}

@media (max-width: 760px) {
 .composer-tools {
  gap: 0;
 }

 .thread-mode .composer-tools .secondary {
  display: grid;
  width: 40px;
  min-width: 40px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  padding: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
 }

 .thread-mode .composer-tools .ttl-button {
  font-size: 36px;
  font-weight: 600;
  color: #514a67;
 }

 .composer-tools .ttl-button.custom {
  background: #f1ebff;
  color: #6b4fa8;
 }
}