:root {
  color-scheme: light;
  --ink: #1f2329;
  --muted: #646a73;
  --muted-light: #8f959e;
  --line: #e2e6ed;
  --paper: #f5f6f8;
  --surface: #ffffff;
  --surface-soft: #f8f9fb;
  --accent: #3370ff;
  --accent-dark: #245bdb;
  --accent-soft: #eaf0ff;
  --success: #2f9e60;
  --danger: #d14343;
  --warning: #d98a14;
  --shadow: 0 14px 40px rgba(31, 35, 41, .10);
  --footer-height: 42px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); }
body.editor-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.topbar {
  height: 56px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between;
  color: var(--ink); background: var(--surface); border-bottom: 1px solid var(--line);
}
body.editor-open .topbar { display: none; }
.brand { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.brand-mark, .sidebar-product-icon, .editor-app-mark {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 800; line-height: 1;
}
.brand strong, .brand small, .sidebar-product strong, .sidebar-product small { display: block; }
.brand strong { font-size: 15px; }
.brand small, .sidebar-product small { margin-top: 1px; color: var(--muted-light); font-size: 10px; }
.topbar-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.version, .local-only { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); }
.topbar-link { padding: 4px 7px; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.topbar-link:hover { color: var(--accent-dark); }

.auth-view { min-height: calc(100vh - 56px - var(--footer-height)); padding: 48px 20px; display: grid; place-items: center; }
.auth-card { width: min(460px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.auth-card h1, .auth-card h2 { margin: 0 0 10px; }
.auth-card p { color: var(--muted); line-height: 1.6; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth-brand strong, .auth-brand span { display: block; }
.auth-brand span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.auth-brand > .brand-mark { display: grid; margin-top: 0; color: #fff; font-size: 16px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.auth-tabs button { padding: 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); }
.auth-tabs button.active { border-bottom-color: var(--accent); color: var(--accent-dark); font-weight: 700; }
.stack-form { display: grid; gap: 15px; }
.stack-form label > span, .invitation-form label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
.stack-form input, .stack-form select, .stack-form textarea, .invitation-form input, .invitation-form select { width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid #ccd2dc; border-radius: 9px; background: #fff; }
.stack-form textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
.stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus, .invitation-form input:focus, .invitation-form select:focus { outline: 2px solid rgba(51,112,255,.15); border-color: var(--accent); }
.sms-entry { width: 100%; margin-top: 10px; }
.sms-panel { margin-top: 12px; padding: 14px; border: 1px solid #d8dee9; border-radius: 9px; background: var(--surface-soft); color: var(--muted); }
.sms-panel.compact { margin: 8px 0; }
.sms-panel p { margin: 0 0 10px; line-height: 1.6; }
.sms-panel .stack-form { margin-top: 10px; }
.field-help, .form-message { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.form-message { min-height: 18px; color: var(--danger); }
.form-message.success { color: var(--success); }
.form-message[data-tone="progress"], .form-message[data-tone="neutral"] { color: var(--muted); }
.form-message[data-tone="error"] { color: var(--danger); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.settings-view { min-height: calc(100vh - 56px - var(--footer-height)); padding: 38px 24px 70px; }
.settings-shell { width: min(980px, 100%); margin: 0 auto; }
.settings-shell > h1 { margin: 22px 0; }
.admin-shell { width: min(1320px, 100%); margin: 0 auto; }
.admin-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.admin-heading h1 { margin: 14px 0 4px; font-size: 30px; }
.admin-heading p { margin: 0; color: var(--muted); }
.admin-tabs { margin: 24px 0 18px; padding: 5px; display: flex; gap: 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #eef1f5; }
.admin-tabs button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-weight: 700; white-space: nowrap; }
.admin-tabs button.active { background: #fff; color: var(--accent-dark); box-shadow: 0 1px 4px rgba(31,35,41,.1); }
.admin-panel { min-height: 420px; }
.admin-overview-heading { margin-bottom: 12px; }
.overview-status { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.overview-status.warning { color: var(--warning); font-weight: 650; }
.overview-status.critical { color: var(--danger); }
.metric-grid { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.metric-card { padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.metric-card span { display: block; color: var(--muted); font-size: 11px; }
.metric-card strong { display: block; margin-top: 7px; font-size: 24px; }
.metric-card small { display: block; margin-top: 4px; color: var(--muted-light); }
.filter-bar { margin-bottom: 12px; display: flex; align-items: end; gap: 8px; }
.filter-bar input, .filter-bar select { min-width: 160px; }
.filter-bar input, .filter-bar select, .document-search input, .document-search select, .pager select {
  min-height: 40px; padding: 0 36px 0 12px; border: 1px solid #ccd2dc; border-radius: 9px;
  background-color: #fff; color: var(--ink); line-height: 1.2;
}
.filter-bar input, .document-search input { padding-right: 12px; }
.filter-bar input:focus, .filter-bar select:focus, .document-search input:focus, .document-search select:focus, .pager select:focus {
  outline: 2px solid rgba(51,112,255,.15); outline-offset: 0; border-color: var(--accent);
}
.filter-bar input:disabled, .filter-bar select:disabled, .document-search input:disabled, .document-search select:disabled, .pager select:disabled {
  color: var(--muted-light); background: #f0f2f5; cursor: not-allowed;
}
.data-list { display: grid; gap: 8px; }
.filter-summary { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.data-row { padding: 12px 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.data-row-main { min-width: 0; }
.data-row-main strong, .data-row-main span, .data-row-main small { display: block; }
.data-row-main span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.data-row-main small { margin-top: 3px; color: var(--muted-light); font-size: 10px; overflow-wrap: anywhere; }
.data-row-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.data-row-actions .button { min-height: 32px; padding: 0 10px; font-size: 11px; }
.status-pill { display: inline-flex !important; width: fit-content; padding: 3px 7px; border-radius: 999px; background: #edf2ff; color: var(--accent-dark) !important; font-weight: 700; }
.status-pill.danger { background: #ffeded; color: var(--danger) !important; }
.status-pill.muted { background: #eef0f3; color: var(--muted) !important; }
.compact-form { margin-top: 14px; }
.empty-state { padding: 30px; color: var(--muted); text-align: center; }
.button.danger { color: var(--danger); border-color: #efc1c1; }
.invitation-preview { padding: 14px; border-radius: 8px; background: var(--surface-soft); }
.invitation-preview dt { color: var(--muted); font-size: 11px; }
.invitation-preview dd { margin: 3px 0 10px; font-weight: 700; }
.document-search { display: flex; gap: 8px; align-items: center; }
.document-search input { width: 190px; }
.pager { margin-top: 14px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; }
.pager label { display: inline-flex; align-items: center; gap: 6px; }
.pager select { min-height: 36px; padding-left: 9px; }
.pager .button { min-height: 36px; }
.compact-pager { padding: 10px 12px; border-top: 1px solid var(--line); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.settings-card { margin-bottom: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.settings-card h2 { margin: 0 0 16px; font-size: 17px; }
.settings-card dl { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; margin: 0 0 18px; font-size: 13px; }
.settings-card dt { color: var(--muted); }
.settings-card dd { margin: 0; }
.invitation-form { display: flex; align-items: end; gap: 12px; }
.invitation-form label { min-width: 150px; }
.invitation-result { margin-top: 16px; padding: 14px; border: 1px solid #bdccfa; border-radius: 8px; background: var(--accent-soft); }
.invitation-result code { display: block; margin-top: 6px; color: var(--accent-dark); font-size: 18px; font-weight: 800; letter-spacing: .06em; user-select: all; }
.invitation-result label, .invitation-result span { display: block; min-width: 0; }
.invitation-result .secret-input { width: 100%; margin: 8px 0; color: var(--accent-dark); }
.member-list { display: grid; gap: 10px; }
.member-row { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 8px; }
.member-row strong, .member-row span { display: block; }
.member-row span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.member-row-actions { display: flex; gap: 8px; }

main { min-height: calc(100vh - 56px - var(--footer-height)); }
.library { min-height: calc(100vh - 56px - var(--footer-height)); display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.library-sidebar {
  padding: 24px 16px; display: flex; flex-direction: column; gap: 28px;
  background: #f0f2f5; border-right: 1px solid var(--line);
}
.sidebar-product { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.sidebar-product strong { font-size: 15px; }
.library-sidebar nav { display: grid; gap: 6px; }
.nav-item {
  width: 100%; min-height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); text-align: left; font-weight: 650;
}
.nav-item:hover, .nav-item.active { background: var(--surface); color: var(--accent-dark); }
.nav-item span { width: 20px; text-align: center; font-size: 17px; }
.sidebar-note { margin-top: auto; padding: 14px; border-radius: 10px; background: rgba(255,255,255,.65); color: var(--muted); font-size: 12px; line-height: 1.6; }
.sidebar-note strong, .sidebar-note span { display: block; }
.sidebar-note strong { margin-bottom: 5px; color: var(--ink); }

.library-content { width: min(1120px, calc(100vw - 280px)); margin: 0 auto; padding: 48px 36px 90px; }
.page-intro { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-bottom: 26px; }
.page-intro h1 { margin: 4px 0 8px; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.03em; }
.page-intro p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.page-intro .greeting { margin: 0 0 8px; color: var(--accent-dark); font-size: 15px; font-weight: 700; line-height: 1.4; }
.eyebrow { margin: 0; color: var(--accent-dark); font-size: 12px; font-weight: 750; letter-spacing: .1em; }

.button {
  min-height: 40px; padding: 0 14px; border: 1px solid #d6dae1; border-radius: 9px;
  background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 650;
}
.button:hover { border-color: #aeb5c0; background: #fbfcfd; }
.button:disabled { cursor: not-allowed; opacity: .52; }
.button.primary { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: none; }
.button.primary:hover { background: var(--accent-dark); }
.button.quiet { background: transparent; }
.icon-button { border: 0; background: transparent; color: var(--muted); }

.import-panel { margin: 4px 0 28px; padding: 24px; border: 1px solid #d6dbe4; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.import-heading { display: flex; justify-content: space-between; gap: 30px; }
.import-heading h2 { margin: 0 0 7px; font-size: 20px; }
.import-heading p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 13px; }
.help-link { display: inline-block; margin-top: 8px; color: var(--accent-dark); font-size: 12px; text-underline-offset: 3px; }
.import-heading .icon-button { font-size: 26px; }
.import-panel label { display: block; margin-top: 18px; }
.import-panel label > span:first-child { display: block; margin-bottom: 7px; color: var(--muted); font-size: 13px; font-weight: 650; }
.import-panel input:not([type="file"]) { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.import-panel input:focus { outline: 2px solid rgba(51,112,255,.16); border-color: var(--accent); }
.file-drop { padding: 22px; border: 1px dashed #aeb8c7; border-radius: 9px; text-align: center; background: var(--surface-soft); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop strong, .file-drop span { display: block; }
.file-drop strong { color: var(--accent-dark); }
.file-drop span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.form-actions { display: flex; align-items: center; gap: 15px; margin-top: 18px; }
.inline-message { color: var(--danger); font-size: 13px; }

.section-heading { display: flex; justify-content: space-between; align-items: end; margin: 26px 0 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.section-heading h2 { margin: 0; font-size: 18px; }
.section-heading p { margin: 5px 0 0; color: var(--muted-light); font-size: 12px; }
.document-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.document-card { min-height: 178px; padding: 18px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 2px 8px rgba(31,35,41,.03); }
.document-card:hover { border-color: #aebbe0; box-shadow: 0 8px 24px rgba(31,35,41,.07); transform: translateY(-1px); transition: .16s ease; }
.document-card h3 { margin: 10px 0 8px; font-size: 17px; line-height: 1.4; }
.document-card p { margin: 0; color: var(--muted); font-size: 12px; }
.document-card .button { margin-top: auto; align-self: start; }
.document-card-actions { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.document-card-actions .button { margin-top: 0; }
.empty-state { grid-column: 1/-1; padding: 54px 25px; border: 1px dashed #bdc5d0; border-radius: 10px; color: var(--muted); text-align: center; background: rgba(255,255,255,.5); }

.editor-view { height: calc(100vh - var(--footer-height)); min-height: 0; display: grid; grid-template-rows: 62px 48px minmax(0,1fr); background: #e7e9ed; }
.editor-header { padding: 0 18px; display: flex; align-items: center; gap: 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.back-button { width: 34px; height: 34px; border-radius: 7px; font-size: 29px; line-height: 1; }
.back-button:hover { background: var(--surface-soft); color: var(--ink); }
.editor-app-mark { width: 30px; height: 30px; flex: none; font-size: 14px; }
.document-heading { min-width: 220px; flex: 1; display: grid; gap: 3px; }
.document-title-row { min-width: 0; width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 8px; }
.title-edit-actions { display: inline-flex; align-items: center; gap: 6px; }
.title-edit-actions .button { min-height: 32px; padding: 6px 9px; font-size: 11px; }
.title-edit-actions[hidden] { display: none; }
.document-heading input { min-width: 120px; width: clamp(160px, 25vw, 360px); padding: 3px 5px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink); font-size: 16px; font-weight: 720; text-overflow: ellipsis; cursor: text; }
.document-heading input[readonly] { cursor: pointer; }
.document-heading input[readonly]:hover, .document-heading input[readonly]:focus-visible { border-color: #c8d2e4; background: var(--surface-soft); outline: 0; }
.document-heading input:not([readonly]) { border-color: var(--accent); background: #fff; outline: 2px solid rgba(51,112,255,.14); text-overflow: clip; }
.document-heading input.title-pending { border-color: var(--warning); }
.document-heading input.title-error { border-color: var(--danger); }
.document-meta { display: flex; align-items: center; gap: 10px; color: var(--muted-light); font-size: 11px; }
#titleEditMessage { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.comment-button { display: inline-flex; align-items: center; gap: 7px; }
.comment-button span {
  min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center;
  border-radius: 999px; background: #e5484d; color: #fff; font-size: 10px; line-height: 1;
}
.save-state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.save-state > span { width: 7px; height: 7px; border-radius: 50%; background: #91a0b2; }
.save-state[data-state="saved"] > span { background: var(--success); }
.save-state[data-state="saving"] > span { background: var(--warning); animation: pulse 1s infinite; }
.save-state[data-state="dirty"] > span, .save-state[data-state="error"] > span { background: var(--danger); }

.editor-commandbar { padding: 5px 18px; display: flex; align-items: center; gap: 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.command-group { display: flex; align-items: center; gap: 4px; }
.command-divider { width: 1px; height: 22px; background: var(--line); }
.command-button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #3b4048; font-size: 12px; font-weight: 650; white-space: nowrap; }
.command-button:hover, .command-button.active { background: var(--accent-soft); color: var(--accent-dark); }
.command-button:disabled { color: #a9aeb7; background: transparent; cursor: not-allowed; }
.icon-command { display: inline-flex; align-items: center; gap: 5px; font-size: 18px; }
.icon-command span { font-size: 12px; }
.command-status { margin-left: auto; max-width: 420px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.command-menu, .split-menu { position: relative; display: inline-flex; }
.split-menu { gap: 1px; }
.split-main { border-radius: 7px 0 0 7px; }
.split-toggle { min-width: 34px; padding-inline: 8px; border-radius: 0 7px 7px 0; }
.popup-menu {
  position: absolute; z-index: 260; top: calc(100% + 5px); left: 0; min-width: 170px; padding: 6px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 12px 32px rgba(31,35,41,.18);
}
.popup-menu-right { right: 0; left: auto; }
.popup-menu[hidden] { display: none; }
.popup-menu button { width: 100%; min-height: 34px; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-align: left; white-space: nowrap; }
.popup-menu button:hover, .popup-menu button:focus-visible { background: var(--accent-soft); color: var(--accent-dark); outline: 0; }
.popup-menu button[aria-checked="true"]::before { content: "✓"; display: inline-block; width: 18px; color: var(--accent-dark); }
.popup-menu button[aria-checked="false"]::before { content: ""; display: inline-block; width: 18px; }
.popup-menu button:disabled { color: var(--muted-light); cursor: not-allowed; }

.workspace-shell { min-width: 0; min-height: 0; padding: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; overflow: hidden; background: #e9ebef; }
.revision-panel, .comment-panel {
  width: 292px; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #d2d6de; border-radius: 8px;
  background: var(--surface); box-shadow: 0 5px 18px rgba(31,35,41,.07);
}
.revision-panel[hidden] + .comment-panel[hidden] + .frame-shell { grid-column: 1 / -1; }
.revision-panel-heading { min-height: 64px; padding: 13px 14px; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.revision-panel-heading strong, .revision-panel-heading span { display: block; }
.revision-panel-heading strong { font-size: 14px; }
.revision-panel-heading span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.revision-panel-heading .icon-button { align-self: flex-start; font-size: 22px; }
.historical-notice { margin: 12px; padding: 12px; border: 1px solid #cad7ff; border-radius: 8px; background: var(--accent-soft); }
.historical-notice strong, .historical-notice span { display: block; }
.historical-notice strong { color: var(--accent-dark); font-size: 13px; }
.historical-notice span { margin: 5px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.historical-notice .button { width: 100%; }
.revision-list { min-height: 0; flex: 1; padding: 8px; overflow: auto; overscroll-behavior: contain; }
.revision-item { width: 100%; padding: 11px; display: grid; gap: 5px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; }
.revision-item:hover { background: var(--surface-soft); }
.revision-item.selected { border-color: #c6d4ff; background: var(--accent-soft); }
.revision-item-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.revision-item strong { font-size: 13px; }
.revision-item time, .revision-item small { color: var(--muted-light); font-size: 10px; }
.revision-badge { padding: 2px 6px; border-radius: 999px; background: #dfe7ff; color: var(--accent-dark); font-size: 10px; }
.revision-badge.preview { background: #fff1cf; color: #9c6300; }
.comment-panel-heading { min-height: 64px; padding: 13px 14px; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.comment-panel-heading strong, .comment-panel-heading span { display: block; }
.comment-panel-heading strong { font-size: 14px; }
.comment-panel-heading span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.comment-panel-heading .icon-button { align-self: flex-start; font-size: 22px; }
.comment-form { padding: 12px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.comment-form label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.comment-form textarea {
  width: 100%; resize: vertical; min-height: 82px; max-height: 180px; padding: 9px 10px;
  border: 1px solid #cfd4dc; border-radius: 7px; color: var(--ink); background: #fff; font-size: 12px; line-height: 1.55;
}
.comment-form textarea:focus { outline: 2px solid rgba(51,112,255,.14); border-color: var(--accent); }
.comment-form > div { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comment-form > div > span { color: var(--muted-light); font-size: 10px; }
.comment-list { min-height: 0; flex: 1; padding: 10px; overflow: auto; }
.comment-empty { padding: 30px 12px; color: var(--muted); text-align: center; font-size: 12px; line-height: 1.6; }
.comment-card { margin-bottom: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.comment-card[data-status="resolved"] { background: #f7f8fa; color: var(--muted); }
.comment-card p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; }
.comment-card-meta { margin-top: 8px; display: flex; justify-content: space-between; gap: 8px; color: var(--muted-light); font-size: 10px; }
.comment-card-actions { margin-top: 9px; display: flex; gap: 7px; }
.comment-card-actions button { padding: 0; border: 0; background: transparent; color: var(--accent-dark); font-size: 11px; }
.comment-card-actions button[data-comment-delete] { margin-left: auto; color: var(--danger); }
.frame-shell { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; overflow: hidden; border: 1px solid #cbd0d9; border-radius: 8px; background: #0a101a; box-shadow: 0 5px 18px rgba(31,35,41,.11); }
#editorFrame { width: 100%; height: 100%; display: block; border: 0; background: #07101e; }
#editorFrame.saving { pointer-events: none; }
.frame-loading { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: #111722; color: #d8dde7; font-size: 13px; }
.frame-loading-card { width: min(460px, 100%); padding: 20px; border: 1px solid #2d394b; border-radius: 12px; background: #171f2b; text-align: center; box-shadow: 0 18px 46px rgba(0,0,0,.24); }
.frame-loading-card strong { display: block; color: #fff; font-size: 15px; }
.frame-loading-card p { margin: 8px 0 0; line-height: 1.6; }
.frame-loading-detail { min-height: 20px; color: #97a6bc; font-size: 11px; }
.frame-loading-actions { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.frame-loading-actions .button { text-decoration: none; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 200; max-width: 420px; padding: 13px 17px; border-radius: 8px; background: #20242b; color: #fff; box-shadow: var(--shadow); font-size: 13px; }
.export-progress {
  position: fixed; right: 22px; bottom: 22px; z-index: 180; width: min(380px, calc(100vw - 44px));
  padding: 14px 15px; border: 1px solid #cbd6f4; border-radius: 10px; background: #fff; box-shadow: 0 16px 44px rgba(31,35,41,.18);
}
.export-progress[data-state="failed"] { border-color: #efc1c1; }
.export-progress[data-state="succeeded"] { border-color: #b9dfc9; }
.export-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.export-progress-heading strong { font-size: 13px; }
.export-progress-heading > div { display: flex; align-items: center; gap: 8px; color: var(--accent-dark); font-size: 12px; font-weight: 750; }
.export-progress-heading .icon-button { font-size: 20px; line-height: 1; }
.export-progress-track { height: 7px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: #e8ecf3; }
.export-progress-track span { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.export-progress[data-state="failed"] .export-progress-track span { background: var(--danger); }
.export-progress[data-state="succeeded"] .export-progress-track span { background: var(--success); }
.export-progress p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.export-download-link { width: 100%; min-height: 40px; margin-top: 10px; justify-content: center; text-decoration: none; }

.mobile-editor-dock, .mobile-action-sheet, .mobile-action-backdrop { display: none; }

.site-footer {
  height: var(--footer-height); padding: 0 22px; display: flex; align-items: center; justify-content: center; gap: 14px;
  border-top: 1px solid var(--line); background: var(--surface); color: var(--muted-light); font-size: 11px; white-space: nowrap;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent-dark); }
.public-security-record { display: inline-flex; align-items: center; gap: 5px; }
.public-security-record img { width: 16px; height: 16px; object-fit: contain; }

.rename-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 0; border-radius: 12px; box-sizing: border-box; box-shadow: 0 20px 60px rgba(10,20,40,.25); }
.rename-dialog::backdrop { background: rgba(15,23,42,.42); }
.rename-dialog form, .rename-dialog > .stack-form { padding: 24px; }
.dialog-brand { margin: 0; color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.operation-dialog { width: min(520px, calc(100vw - 32px)); }
.operation-dialog #operationDialogBody p { margin: 0 0 8px; color: var(--text-muted); line-height: 1.65; }
.operation-dialog .button.danger { background: #b42318; color: #fff; border-color: #b42318; }
.temporary-password-dialog { width: min(520px, calc(100vw - 32px)); }
.secret-input { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 18px; letter-spacing: .04em; user-select: all; }
.member-profile-result { grid-template-columns: 116px minmax(0,1fr); margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.member-profile-result dd { min-width: 0; overflow-wrap: anywhere; }
.audit-list { max-height: 560px; overflow: auto; align-content: start; }
.audit-row { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.audit-row summary { padding: 9px 12px; display: grid; grid-template-columns: minmax(140px,.8fr) minmax(150px,.7fr) minmax(180px,1.5fr); align-items: center; gap: 10px; cursor: pointer; list-style-position: inside; }
.audit-row summary strong { font-size: 12px; }
.audit-row summary span, .audit-row summary small { min-width: 0; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-detail { padding: 9px 28px 12px; display: grid; gap: 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.share-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 70px rgba(10,20,40,.28); }
.share-dialog::backdrop { background: rgba(15,23,42,.46); }
.share-dialog-shell { padding: 24px; display: grid; gap: 18px; }
.share-dialog-shell .section-heading { margin: 0; align-items: flex-start; }
.rework-task-entry { margin: 0 14px 12px; width: calc(100% - 28px); }
.rework-task-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.rework-import-dialog { width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 24px); }
.rework-import-dialog > .stack-form { padding: 24px; max-height: calc(100vh - 24px); overflow: auto; }
.rework-file-status { margin-top: -9px; }
.rework-file-status[data-state="retained"] { color: var(--accent-dark); font-weight: 650; }
.rework-comment-picker { border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: 0; }
.rework-comment-picker legend { padding: 0 6px; color: var(--muted); }
#reworkCommentChoices, #reworkMappingChoices { display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.rework-choice { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: start; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.rework-choice small { display: block; color: var(--muted); margin-top: 3px; }
.rework-candidate-panel { border-top: 1px solid var(--line); padding-top: 18px; }
.rework-candidate-summary { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--surface-soft); }
.rework-candidate-summary p { margin: 0; }
.rework-preview-actions { display: flex; gap: 8px; margin: 12px 0 8px; }
.rework-preview-frame { display: block; width: 100%; height: min(52vh, 540px); border: 1px solid var(--line); border-radius: 10px; background: #eef2f7; }
.rework-canvas-confirm { margin-top: 12px; padding: 11px 12px; border: 1px solid #f0cf8d; border-radius: 9px; background: #fff8e8; line-height: 1.55; }
.rework-canvas-confirm input { flex: 0 0 auto; width: 19px; min-height: 19px; height: 19px; max-height: 19px; margin: 1px 0 0; padding: 0; accent-color: var(--accent); }
.rework-mapping-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.8fr); gap: 10px; align-items: center; }
.share-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.share-summary strong, .share-summary span { display: block; }
.share-summary span { color: var(--muted); margin-top: 4px; font-size: 13px; }
.share-form { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.share-form h3 { margin: 0; }
.share-form label:not(.check-row) { display: grid; gap: 7px; }
.share-form input:not([type="checkbox"]), .share-form select, .share-link-row input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; }
.check-row { display: flex; align-items: flex-start; gap: 9px; }
.check-row input { margin-top: 3px; }
.share-link-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }
.share-actions-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-actions-panel span { color: var(--muted); }
.secret-result { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 14px; padding: 14px 16px; border-radius: 10px; border: 1px solid #f0c36a; background: #fff8e8; }
.secret-result strong { grid-column: 1 / -1; }
.secret-result code { font-size: 16px; user-select: all; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .share-summary { display: grid; }
  .share-link-row { grid-template-columns: 1fr; }
}
.session-overlay { position: fixed; inset: 0; z-index: 500; padding: 20px; display: grid; place-items: center; background: rgba(15,23,42,.72); }
.session-overlay .auth-card { box-shadow: 0 24px 80px rgba(0,0,0,.3); }

@keyframes pulse { 50% { opacity: .35; } }
@media (max-width: 980px) {
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .library { grid-template-columns: 72px minmax(0,1fr); }
  .library-sidebar { padding: 20px 10px; }
  .sidebar-product span:last-child, .nav-item { font-size: 0; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item span { font-size: 18px; }
  .sidebar-note { display: none; }
  .library-content { width: calc(100vw - 72px); padding-inline: 24px; }
  .document-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .editor-header { gap: 8px; }
  #reloadButton { display: none; }
  .command-status { display: none; }
}
@media (pointer: coarse), (max-width: 1199px) {
  .button, .command-button, .icon-button, .popup-menu button { min-height: 42px; }
  .revision-item, .comment-card-actions button { min-height: 44px; }
}
@media (max-width: 680px) {
  .admin-shell { width: calc(100% - 24px); }
  .metric-grid { grid-template-columns: 1fr; }
  .filter-bar, .document-search { align-items: stretch; flex-direction: column; }
  .topbar { padding: 0 16px; }
  .local-only { display: none; }
  .library { display: block; }
  .library-sidebar { display: none; }
  .library-content { width: 100%; padding: 32px 18px 70px; }
  .page-intro { align-items: start; }
  .document-grid { grid-template-columns: 1fr; }
  body.editor-open { overflow: hidden; }
  .editor-view { height: calc(var(--mobile-viewport-height, 100dvh) - var(--footer-height)); grid-template-rows: auto minmax(0,1fr); padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .editor-header { min-height: 62px; flex-wrap: nowrap; padding: 8px 10px; }
  .editor-app-mark { display: none; }
  .document-heading { min-width: 0; }
  .document-title-row { width: 100%; }
  .document-heading input { min-width: 0; width: 100%; font-size: 15px; }
  .document-meta { gap: 7px; }
  #titleEditMessage { max-width: 120px; }
  .title-edit-actions { position: fixed; z-index: 270; left: 8px; right: 8px; bottom: calc(70px + env(safe-area-inset-bottom)); padding: 8px; justify-content: flex-end; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
  .title-edit-actions .button { min-height: 44px; }
  .toolbar-actions, .editor-commandbar { display: none; }
  .icon-command span { display: none; }
  .workspace-shell { position: relative; padding: 7px; }
  .frame-shell { border-radius: 6px; }
  .revision-panel, .comment-panel {
    position: fixed; z-index: 250; inset: auto 0 calc(62px + env(safe-area-inset-bottom)) 0;
    width: 100%; max-height: min(70dvh, 620px); border-radius: 16px 16px 0 0; box-shadow: 0 -16px 48px rgba(31,35,41,.22);
  }
  .comment-form textarea { min-height: 96px; font-size: 16px; }
  .mobile-editor-dock {
    position: fixed; z-index: 240; left: 0; right: 0; bottom: 0; min-height: calc(62px + env(safe-area-inset-bottom));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(7, minmax(0,1fr));
    gap: 3px; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  }
  .mobile-editor-dock button {
    min-width: 0; min-height: 48px; padding: 4px 2px; display: grid; place-items: center; gap: 1px;
    border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 19px;
  }
  .mobile-editor-dock button:active, .mobile-editor-dock button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-dark); }
  .mobile-editor-dock button span, .mobile-editor-dock button strong { font-size: 10px; font-weight: 700; white-space: nowrap; }
  .mobile-action-backdrop { position: fixed; z-index: 275; inset: 0; display: block; background: rgba(15,23,42,.36); }
  .mobile-action-sheet {
    position: fixed; z-index: 280; left: 0; right: 0; bottom: 0; display: block; padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -20px 60px rgba(15,23,42,.25);
  }
  .mobile-action-sheet[hidden], .mobile-action-backdrop[hidden] { display: none; }
  .mobile-sheet-handle { width: 42px; height: 4px; margin: 0 auto 8px; border-radius: 999px; background: #cbd1dc; }
  .mobile-sheet-heading { display: flex; align-items: center; justify-content: space-between; }
  .mobile-action-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .mobile-action-grid button { min-height: 48px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink); text-align: left; }
  .export-progress { right: 8px; bottom: calc(70px + env(safe-area-inset-bottom)); width: calc(100vw - 16px); }
  body.mobile-keyboard-open .mobile-editor-dock, body.mobile-keyboard-open .site-footer { display: none; }
  body.mobile-keyboard-open .editor-view { height: var(--mobile-viewport-height, 100dvh); padding-bottom: 0; }
  body.mobile-keyboard-open .revision-panel, body.mobile-keyboard-open .comment-panel { bottom: 0; max-height: calc(var(--mobile-viewport-height, 100dvh) - 8px); }
  .rework-mapping-row { grid-template-columns: 1fr; }
  .site-footer { padding-inline: 10px; gap: 8px; overflow-x: auto; justify-content: flex-start; }
  .form-grid, .settings-grid { grid-template-columns: 1fr; }
  .invitation-form { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }