:root {
  --black: #1d1d1f;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, .075);
  --line-strong: rgba(0, 0, 0, .14);
  --surface: #ffffff;
  --surface-soft: #f5f5f7;
  --surface-deep: #ececee;
  --lilac: #f2f0f5;
  --lilac-ink: #625d69;
  --blue: #0071e3;
  --blue-soft: #edf5ff;
  --red: #d70015;
  --red-soft: #fff1f2;
  --amber: #a24b00;
  --amber-soft: #fff5e6;
  --shadow: 0 24px 70px rgba(0, 0, 0, .14), 0 3px 12px rgba(0, 0, 0, .06);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; min-width: 0; background: #f5f5f7; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "PingFang HK", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(0, 113, 227, .28); outline-offset: 2px; }

.app-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-width: 1020px; min-height: 100vh; }
.login-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; min-height: 100vh; padding: 28px; background: radial-gradient(circle at 50% 10%, #fff 0, #f5f5f7 46%, #ececee 100%); }
.login-card { display: grid; width: min(430px, 100%); padding: 38px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 26px; background: rgba(255, 255, 255, .94); box-shadow: 0 28px 80px rgba(0, 0, 0, .15); backdrop-filter: blur(24px); }
.login-brand { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 24px; border-radius: 15px; background: var(--black); color: #fff; font-size: 18px; font-weight: 800; }
.login-card h1 { font-size: 32px; }
.login-intro { margin: 12px 0 24px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.login-card label { display: grid; gap: 7px; margin-bottom: 15px; color: #515154; font-size: 12px; font-weight: 650; }
.login-card input { width: 100%; min-height: 48px; border: 1px solid transparent; border-radius: 12px; background: #f1f1f3; padding: 0 14px; font-size: 14px; }
.login-card input:focus { border-color: rgba(0, 113, 227, .28); background: #fff; box-shadow: 0 0 0 3px rgba(0, 113, 227, .14); }
.login-card .primary-button { width: 100%; min-height: 48px; margin-top: 4px; }
.login-card > .secondary-button { margin-top: 10px; }
.login-card > small { margin-top: 18px; color: #86868b; font-size: 10px; line-height: 1.55; text-align: center; }
.login-error { min-height: 18px; margin: 0 0 8px; color: var(--red); font-size: 11px; line-height: 1.5; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 230px; display: flex; flex-direction: column; padding: 28px 18px 22px; background: var(--surface); border-right: 1px solid var(--line); z-index: 20; }
.brand { display: flex; gap: 12px; align-items: center; min-height: 60px; padding: 0 8px 28px; border-bottom: 1px solid var(--line); }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--black); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.brand strong { display: block; color: var(--black); font-size: 17px; }
.brand span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.nav-list { display: grid; gap: 7px; margin-top: 26px; }
.nav-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 15px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; transition: background .16s, color .16s, border .16s; }
.nav-item span { font-weight: 650; }
.nav-item small { color: #9a9aa1; font-size: 10px; letter-spacing: .08em; }
.nav-item:hover { border-color: var(--line); background: var(--surface-soft); }
.nav-item.active { background: var(--black); color: #fff; box-shadow: 0 8px 22px rgba(17,17,19,.18); }
.nav-item.active small { color: #b9b9bf; }
.board-sidebar { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; margin: 22px 4px 0; padding: 17px 4px 0; border-top: 1px solid var(--line); }
.board-sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 8px; color: #86868b; font-size: 11px; font-weight: 650; }
.board-sidebar-heading button { min-height: 28px; padding: 0 7px; border: 0; border-radius: 8px; background: transparent; color: #6e6e73; font-size: 11px; font-weight: 650; cursor: pointer; }
.board-sidebar-heading button:hover { background: rgba(0, 0, 0, .055); color: var(--black); }
.board-nav { display: grid; gap: 3px; min-height: 0; overflow-y: auto; align-content: start; }
.board-nav-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 0 9px; border: 0; border-radius: 9px; background: transparent; color: #515154; font-size: 12px; text-align: left; cursor: pointer; }
.board-nav-button:hover { background: rgba(0, 0, 0, .045); }
.board-nav-button.active { background: #fff; color: var(--black); box-shadow: 0 1px 4px rgba(0, 0, 0, .11); }
.board-nav-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-nav-button small { color: #8e8e93; font-size: 10px; }
.board-visibility { display: block; margin-top: 3px; color: #8e8e93; font-size: 10px; font-style: normal; font-weight: 400; }
.board-nav-button:has(.board-visibility) { min-height: 48px; padding-block: 7px; }
.sidebar-folder-button { display: flex; flex: 0 0 auto; align-items: center; gap: 11px; width: 100%; min-height: 42px; margin-top: 14px; padding: 0 12px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #6e6e73; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease; }
.sidebar-folder-button:hover { background: rgba(0, 0, 0, .045); color: var(--black); }
.sidebar-folder-button:active { background: rgba(0, 0, 0, .075); }
.sidebar-folder-button svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.main-content { grid-column: 2; min-height: 100vh; padding: 34px 40px 60px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.eyebrow, .section-kicker { margin: 0 0 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; color: var(--black); font-size: 34px; line-height: 1.08; letter-spacing: -.04em; }
h2 { margin: 0; color: var(--black); font-size: 20px; letter-spacing: -.025em; }
h3 { margin: 0; color: var(--black); font-size: 16px; }
.topbar-actions { display: flex; gap: 18px; align-items: center; }
.topbar-actions time { color: #57575e; font-size: 14px; }
.session-pill { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .72); color: #515154; font-size: 11px; font-weight: 650; }
.session-pill button { padding: 3px 0 3px 9px; border: 0; border-left: 1px solid var(--line-strong); background: transparent; color: #6e6e73; font-size: 11px; cursor: pointer; }
.session-pill button:hover { color: var(--black); }
.primary-button, .secondary-button { min-height: 42px; border-radius: 9px; padding: 0 18px; font-weight: 700; cursor: pointer; transition: transform .12s, background .12s, border .12s; }
.primary-button { border: 1px solid var(--black); background: var(--black); color: #fff; }
.primary-button:hover { background: #2b2b2f; }
.secondary-button { border: 1px solid var(--line-strong); background: var(--surface); color: var(--black); }
.secondary-button:hover { border-color: #88888f; background: var(--surface-soft); }
.primary-button:active, .secondary-button:active { transform: translateY(1px); }
.primary-button:disabled, .secondary-button:disabled { opacity: .5; cursor: wait; }
.secondary-button.small { min-height: 34px; padding: 0 13px; font-size: 12px; }
.text-button { padding: 5px; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 650; cursor: pointer; }
.text-button:hover { color: var(--black); }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: #57575e; font-size: 25px; line-height: 1; cursor: pointer; }

.view { display: none; }
.view.active { display: block; animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.owner-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 16px; }
.owner-view-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.owner-view-button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: #55555b; font-size: 12px; font-weight: 700; cursor: pointer; }
.owner-view-button:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.owner-view-button.active { border-color: var(--black); background: var(--black); color: #fff; }
.owner-view-button small { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--surface-deep); color: var(--muted); font-size: 9px; }
.owner-view-button.active small { background: rgba(255,255,255,.16); color: #fff; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.summary-card { position: relative; display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; min-height: 104px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 2px 10px rgba(20,20,24,.025); cursor: pointer; text-align: left; }
.summary-card:hover { border-color: #b7b7bd; box-shadow: 0 7px 22px rgba(20,20,24,.06); }
.summary-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--surface-deep); color: var(--black); font-size: 20px; font-weight: 800; }
.summary-icon svg { width: 21px; height: 21px; }
.summary-card span { color: #4d4d53; font-size: 14px; font-weight: 650; }
.summary-card strong { color: var(--black); font-size: 34px; line-height: 1; letter-spacing: -.04em; }
.summary-card.danger .summary-icon { background: var(--red-soft); color: var(--red); }
.summary-card.danger strong { color: var(--red); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 2px 12px rgba(20,20,24,.025); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 20px 16px; }
.storage-panel { margin-bottom: 18px; }
.storage-usage { padding: 0 20px 18px; font-size: 13px; line-height: 1.7; }
.storage-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.storage-total strong { font-size: 26px; letter-spacing: -.03em; }
.storage-total span, .storage-note { color: var(--muted); }
.storage-meter { display: block; width: 100%; height: 8px; margin: 12px 0; border: 0; border-radius: 8px; overflow: hidden; accent-color: var(--blue); }
.storage-meter::-webkit-progress-bar { background: var(--surface-deep); }
.storage-meter::-webkit-progress-value { background: var(--blue); }
.storage-meter.warning { accent-color: var(--amber); }
.storage-meter.warning::-webkit-progress-value { background: var(--amber); }
.storage-meter.critical, .storage-meter.over { accent-color: var(--red); }
.storage-meter.critical::-webkit-progress-value, .storage-meter.over::-webkit-progress-value { background: var(--red); }
.storage-breakdown { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 10px 0; }
.storage-warning { margin: 10px 0; padding: 9px 12px; border-radius: 8px; background: var(--amber-soft); color: var(--amber); }
.storage-warning.critical, .storage-warning.over { background: var(--red-soft); color: var(--red); }
.storage-note { margin: 8px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.storage-usage details { margin-top: 10px; }
.storage-usage summary { cursor: pointer; color: var(--muted); }
.storage-error { color: var(--red); }
.table-wrap { overflow: auto; }
.items-table { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; }
.priority-panel .items-table { min-width: 1040px; }
.full-table { min-width: 1120px; }
.items-table th { padding: 12px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafafa; color: #606067; font-size: 11px; font-weight: 700; text-align: left; letter-spacing: .03em; white-space: nowrap; }
.column-filter { display: grid; gap: 5px; color: inherit; font: inherit; }
.column-filter select { width: 100%; min-height: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 0 7px; color: #4f4f55; font-size: 10px; font-weight: 700; }
.items-table td { padding: 16px 14px; border-bottom: 1px solid #e8e8ea; color: #36363b; font-size: 13px; vertical-align: middle; }
.items-table tbody tr { cursor: pointer; }
.items-table tbody tr:hover { background: #fafafa; }
.items-table tbody tr:last-child td { border-bottom: 0; }
.items-table th:first-child, .items-table td:first-child { width: 27%; padding-left: 20px; }
.items-table th:first-child, .items-table td:first-child { position: sticky; left: 0; }
.items-table th:first-child { z-index: 3; background: #fafafa; box-shadow: 10px 0 16px -16px rgba(17,17,19,.45); }
.items-table tbody td:first-child { z-index: 2; background: var(--surface); box-shadow: 10px 0 16px -16px rgba(17,17,19,.35); }
.items-table tbody tr:hover td:first-child { background: #fafafa; }
.items-table th:nth-child(2) { width: 10%; }
.items-table th:nth-child(3) { width: 9%; }
.items-table th:nth-child(4) { width: 11%; }
.items-table th:nth-child(5), .items-table th:nth-child(6) { width: 14%; }
.items-table th:last-child { width: 15%; }
.full-table th:first-child { width: 28%; }
.full-table th:nth-child(2) { width: 10%; }
.full-table th:nth-child(3) { width: 9%; }
.full-table th:nth-child(4) { width: 11%; }
.full-table th:nth-child(5), .full-table th:nth-child(6) { width: 14%; }
.full-table th:last-child { width: 14%; }
.table-title { display: block; color: var(--black); font-weight: 700; }
.table-subtitle { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.quick-edit-cell { display: flex; align-items: center; gap: 7px; width: calc(100% + 12px); min-height: 36px; margin: -6px; padding: 6px; border: 0; border-radius: 7px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.quick-edit-cell > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-edit-cell small { margin-left: auto; color: var(--muted); font-size: 9px; font-weight: 700; opacity: 0; transition: opacity .12s; }
.quick-edit-cell:hover { background: var(--surface-deep); }
.quick-edit-cell:hover small, .quick-edit-cell:focus-visible small { opacity: 1; }
.time-danger { color: var(--red); font-weight: 750; }
.time-warning { color: var(--amber); font-weight: 750; }
.status-badge, .risk-chip { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 10px; border-radius: 999px; background: var(--surface-deep); color: #55555b; font-size: 11px; font-weight: 750; white-space: nowrap; }
.status-badge.pending { background: var(--lilac); color: var(--lilac-ink); }
.status-badge.danger, .risk-chip.danger { background: var(--red-soft); color: var(--red); }
.status-badge.warning, .risk-chip.warning { background: var(--amber-soft); color: var(--amber); }
.status-badge.dark { background: var(--black); color: #fff; }
.priority-badge { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); color: #55555b; font-size: 11px; font-weight: 750; white-space: nowrap; }
.priority-badge.p0 { border-color: #ebc3c3; background: var(--red-soft); color: var(--red); }
.priority-badge.p1 { border-color: var(--black); background: var(--black); color: #fff; }
.priority-badge.p3 { background: #fff; color: #77777e; }
.timeline-panel { padding-bottom: 8px; }
.recent-timeline { padding: 0 20px 12px; }
.recent-row { display: grid; grid-template-columns: 130px 130px 1fr; gap: 16px; align-items: start; padding: 13px 8px; border-top: 1px solid #e7e7e9; font-size: 12px; }
.recent-row time, .recent-row span { color: var(--muted); }
.recent-row button { padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.recent-row button:hover { color: var(--black); text-decoration: underline; }

.list-panel { min-height: calc(100vh - 160px); }
.list-toolbar { align-items: flex-end; flex-wrap: wrap; }
.list-title-row { display: flex; gap: 10px; align-items: center; }
.filter-count { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: var(--surface-deep); color: var(--muted); font-size: 10px; font-weight: 750; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: flex-end; }
.filters select, .search-box input { min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0 11px; }
.filter-field span, .search-box span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.search-box input { width: 240px; }
.filter-field select { width: 150px; }
.filter-reset { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; }
.filter-reset:hover { border-color: var(--line-strong); background: var(--surface-deep); color: var(--black); }
.empty-state { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 240px; padding: 24px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--black); }
.empty-state > button { margin-top: 8px; }

.backup-intro { display: flex; justify-content: space-between; gap: 30px; align-items: flex-end; margin-bottom: 18px; padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.backup-intro p:not(.section-kicker) { max-width: 720px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.backup-actions { display: flex; gap: 10px; }
.integrity-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.integrity-cell { padding: 16px 18px; background: var(--surface); }
.integrity-cell span, .integrity-cell strong { display: block; }
.integrity-cell span { color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.integrity-cell strong { margin-top: 7px; color: var(--black); font-size: 14px; }
.backup-list { padding: 0 20px 20px; }
.backup-row { display: grid; grid-template-columns: minmax(0, 1.4fr) .6fr .6fr auto; gap: 18px; align-items: center; padding: 15px 5px; border-top: 1px solid var(--line); }
.backup-row strong, .backup-row span { display: block; }
.backup-row strong { font-size: 13px; }
.backup-row span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.backup-row code { color: #55555b; font-size: 10px; }
.row-actions { display: flex; gap: 8px; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(15,15,18,.28); backdrop-filter: blur(2px); z-index: 40; }
.detail-drawer { position: fixed; top: 0; right: 0; z-index: 50; width: min(760px, 70vw); height: 100vh; background: var(--surface); box-shadow: -22px 0 60px rgba(15,15,18,.2); transform: translateX(105%); transition: transform .22s ease; }
.detail-drawer.open { transform: none; }
.detail-drawer:not(.open) { visibility: hidden; }
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 25px 26px 18px; border-bottom: 1px solid var(--line); }
.item-number { margin: 0 0 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.drawer-header h2 { max-width: 620px; font-size: 24px; }
.detail-alerts { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 26px 0; }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 26px 16px; border-bottom: 1px solid var(--line); }
.drawer-actions button { min-height: 36px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.drawer-actions button.emphasis { border-color: var(--black); background: var(--black); color: #fff; }
.drawer-actions button:disabled, .text-button:disabled, .drop-zone button:disabled { cursor: not-allowed; opacity: .42; }
.drawer-scroll { height: calc(100vh - 175px); overflow-y: auto; padding: 0 26px 40px; }
.detail-section { padding: 24px 0; border-bottom: 1px solid var(--line); }
.detail-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.detail-section-title span { color: var(--muted); font-size: 11px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.detail-field { min-width: 0; }
.detail-field span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.detail-field strong { color: #333338; font-size: 12px; font-weight: 650; }
.reference-link-field strong { display: block; overflow: hidden; margin-bottom: 7px; text-overflow: ellipsis; white-space: nowrap; }
.reference-link-field button, .reference-link-field a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--black); font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; }
.long-fields { display: grid; gap: 10px; margin-top: 16px; }
.long-field { padding: 13px 14px; border-radius: 9px; background: var(--surface-soft); }
.long-field span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.long-field p { margin: 0; color: #3b3b40; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.operational-fields:empty { display: none; }
.detail-empty-prompt { margin: 18px 0 0; padding: 12px 14px; border-radius: 11px; background: var(--surface-soft); color: var(--muted); font-size: 12px; line-height: 1.5; }
.detail-more, .form-more { margin-top: 18px; border-top: 1px solid var(--line); }
.detail-more summary, .form-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 2px 0; color: #515154; cursor: pointer; list-style: none; }
.detail-more summary::-webkit-details-marker, .form-more summary::-webkit-details-marker { display: none; }
.detail-more summary::after, .form-more summary::after { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border-radius: 50%; background: var(--surface-deep); color: #6e6e73; font-size: 17px; font-weight: 500; line-height: 1; }
.detail-more[open] summary::after, .form-more[open] summary::after { content: "−"; }
.detail-more summary span, .form-more summary span { color: #3a3a3c; font-size: 12px; font-weight: 650; }
.detail-more summary small, .form-more summary small { color: var(--muted); font-size: 10px; font-weight: 500; }
.detail-more-grid { margin-top: 17px; }
.detail-more .long-fields { margin-top: 14px; }
.drop-zone { position: relative; display: grid; place-items: center; min-height: 142px; padding: 20px; border: 1.5px dashed #bdbdc3; border-radius: 12px; background: #fafafa; text-align: center; cursor: pointer; transition: border .15s, background .15s; }
.drop-zone.dragging { border-color: #625968; background: var(--lilac); }
.drop-zone.disabled { cursor: not-allowed; opacity: .55; }
.drop-zone strong { font-size: 14px; }
.drop-zone span { color: var(--muted); font-size: 11px; }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attachment-link-field { display: block; margin: 12px 0; color: var(--muted); font-size: 10px; }
.attachment-link-field input { width: 100%; min-height: 38px; margin-top: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; }
.attachment-version-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 11px; line-height: 1.6; }
.upload-result { min-height: 0; color: var(--muted); font-size: 11px; }
.upload-result.error { color: var(--red); }
.attachment-list { display: grid; gap: 9px; margin-top: 12px; }
.attachment-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 10px; }
.file-type { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: var(--surface-deep); color: #48484f; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.attachment-card strong, .attachment-card span { display: block; }
.attachment-card strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-card span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.attachment-card .row-actions button, .attachment-card .row-actions a { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-size: 11px; text-decoration: none; cursor: pointer; }
.attachment-card .row-actions .attachment-delete-button { color: var(--red); }
.attachment-delete-name { overflow-wrap: anywhere; }
#attachment-delete-error:empty { display: none; }
.primary-button.attachment-delete-confirm { background: var(--red); color: #fff; }
.item-timeline { position: relative; }
.timeline-entry { position: relative; display: grid; grid-template-columns: 82px 1fr; gap: 12px; padding: 0 0 18px 18px; border-left: 1px solid #d0d0d4; }
.timeline-entry::before { content: ""; position: absolute; top: 3px; left: -4px; width: 7px; height: 7px; border: 1px solid #9999a0; border-radius: 50%; background: #fff; }
.timeline-entry:last-child { padding-bottom: 0; }
.timeline-entry time { color: var(--muted); font-size: 10px; }
.timeline-entry strong { display: block; color: var(--black); font-size: 12px; }
.timeline-entry p { margin: 5px 0 0; color: #606067; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.timeline-entry small { display: inline-block; margin-top: 5px; color: #88888e; font-size: 9px; }

dialog { padding: 0; border: 0; }
dialog::backdrop { background: rgba(12,12,15,.34); backdrop-filter: blur(3px); }
.modal { width: min(560px, calc(100vw - 40px)); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.wide-modal { width: min(850px, calc(100vw - 50px)); }
.modal-header, .preview-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; max-height: 65vh; overflow-y: auto; padding: 20px 24px; }
#item-fields { min-width: 0; margin: 0; border: 0; }
.initial-attachments-heading, .initial-drop-zone, .initial-file-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.initial-attachments-heading h3 { margin: 0; font-size: 14px; font-weight: 600; }
.initial-attachments-heading span { color: var(--muted); font-size: 12px; font-weight: 400; }
.initial-drop-zone { margin-top: 10px; padding: 16px; border: 1px dashed #c7c7cc; border-radius: 12px; background: #f7f7f9; font-size: 14px; }
.initial-drop-zone.dragging { background: var(--blue-soft); border-color: var(--blue); }
.initial-file-list { list-style: none; padding: 0; margin: 0; }
.initial-file-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.initial-file-list li > div { min-width: 0; }
.initial-file-list strong { display: block; overflow-wrap: anywhere; font-weight: 500; }
.initial-file-list small { display: block; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.initial-file-list .file-failed small { color: var(--red); }
.initial-file-list button { flex-shrink: 0; }
#initial-upload-status:empty { display: none; }
.form-grid label, .action-fields label { color: #56565c; font-size: 11px; font-weight: 650; }
.required-mark { margin-left: 3px; color: var(--red); }
.field-hint { display: block; margin-top: 5px; color: var(--muted) !important; font-size: 9px; font-weight: 500; line-height: 1.45; }
.date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.date-field { position: relative; }
.form-grid label > .date-action { display: inline-flex; align-items: center; min-height: 20px; margin-left: 7px; padding: 0 7px; border-radius: 999px; background: #1d1d1f; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.due-date-field { min-width: 0; }
.item-form-error { padding: 11px 13px; border: 1px solid #e0b0b0; border-radius: 10px; background: var(--red-soft); color: #8e1f1f; font-size: 12px; font-weight: 650; line-height: 1.5; }
.form-grid input[aria-invalid="true"] { background: #fff !important; box-shadow: 0 0 0 3px rgba(180, 35, 35, .15) !important; }
.form-grid input:not([type=checkbox]), .form-grid select, .form-grid textarea, .action-fields input, .action-fields select, .action-fields textarea { width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px 11px; color: var(--ink); resize: vertical; }
.form-grid input:not([type=checkbox]), .form-grid select, .action-fields input, .action-fields select { min-height: 40px; }
.span-2 { grid-column: span 2; }
.form-more { margin-top: 0; }
.form-more summary { padding: 16px 2px 2px; }
.more-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px 0 2px; }
.checkbox-field { display: flex; gap: 9px; align-items: center; align-self: end; min-height: 40px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; }
.checkbox-field input { width: 16px; height: 16px; margin: 0; accent-color: var(--black); }
.checkbox-field span { color: #48484e !important; }
.modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 24px 20px; border-top: 1px solid var(--line); }
.board-modal { width: min(680px, calc(100vw - 40px)); }
.board-manager { display: grid; gap: 14px; max-height: 62vh; overflow-y: auto; padding: 22px 24px; }
.board-create-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 10px; }
.board-create-row input, .board-create-row select, .board-name-control input { min-width: 0; min-height: 44px; border: 1px solid transparent; border-radius: 11px; background: #f1f1f3; padding: 0 12px; color: var(--ink); font-size: 13px; }
.board-create-row input:focus, .board-name-control input:focus { border-color: transparent; background: #fff; box-shadow: 0 0 0 3px rgba(0, 113, 227, .17); }
.board-form-error { margin: 0; padding: 11px 13px; border: 1px solid #e0b0b0; border-radius: 11px; background: var(--red-soft); color: #8e1f1f; font-size: 12px; }
.board-manager-list { display: grid; gap: 8px; }
.board-manager-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.board-manager-row.archived { background: #f7f7f9; color: #6e6e73; }
.board-name-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.board-name-control small, .board-manager-row.archived small { color: #8e8e93; font-size: 10px; }
.board-manager-row.archived strong, .board-manager-row.archived small { display: block; }
.board-manager-row.archived small { margin-top: 4px; }
.board-row-actions { display: flex; gap: 5px; }
.board-row-actions button, .board-manager-row.archived > button { min-width: 34px; min-height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: #f5f5f7; color: #515154; font-size: 11px; font-weight: 650; cursor: pointer; }
.board-row-actions button:hover, .board-manager-row.archived > button:hover { background: #e8e8ed; color: var(--black); }
.board-row-actions button:disabled { opacity: .32; cursor: default; }
.board-empty { display: grid; place-items: center; min-height: 76px; border: 1px dashed var(--line-strong); border-radius: 13px; color: #86868b; font-size: 12px; }
.archived-boards { border-top: 1px solid var(--line); padding-top: 12px; }
.archived-boards summary { margin-bottom: 10px; color: #6e6e73; font-size: 12px; font-weight: 650; cursor: pointer; }
.action-fields { display: grid; gap: 14px; padding: 22px 24px; }
.action-note { margin: 0; padding: 12px 13px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 12px; line-height: 1.6; }
.action-form-error { margin: 0 24px 16px; padding: 11px 13px; border: 1px solid #e0b0b0; border-radius: 8px; background: var(--red-soft); color: #8e1f1f; font-size: 12px; line-height: 1.5; }
.preview-modal { width: min(1100px, calc(100vw - 40px)); height: min(820px, calc(100vh - 40px)); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.preview-body { height: calc(100% - 78px); background: #ececef; }
.preview-body iframe, .preview-body img, .preview-body video { width: 100%; height: 100%; border: 0; object-fit: contain; }
.preview-body.video-preview { background: #111114; }
.preview-body video { display: block; }
.preview-body.audio-preview { display: grid; place-items: center; padding: 28px; }
.preview-body audio { width: min(720px, 100%); }
.preview-modal { display: none; }
.preview-modal[open] { display: flex; flex-direction: column; }
.preview-modal .preview-header { flex: none; min-width: 0; gap: 16px; }
.preview-modal .preview-header > div:first-child { min-width: 0; }
.preview-modal .preview-header h2 { overflow-wrap: anywhere; }
.preview-modal .preview-header .row-actions { flex: none; }
.preview-modal .preview-body { flex: 1; min-height: 0; height: auto; }
.preview-body.document-preview { overflow: auto; padding: 20px; background: #f5f5f7; }
.document-notice { color: #626268; font-size: 13px; line-height: 1.6; margin: 0 0 16px; }
.document-content { background: white; padding: 24px; border-radius: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.document-content p { margin: 0 0 12px; white-space: pre-wrap; }
.document-content pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.document-content table { border-collapse: collapse; width: auto; min-width: 100%; font-size: 14px; }
.document-content td, .document-content th { padding: 8px 12px; border: 1px solid #e3e3e8; white-space: pre-wrap; min-width: 80px; max-width: 420px; text-align: left; vertical-align: top; }
.document-content th { background: #f5f5f7; font-weight: 500; }
.document-table-wrap { overflow: auto; max-height: 60vh; }
.document-sheet-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.document-sheet-toolbar select { max-width: 280px; padding: 8px; }
.document-sheet-toolbar label { display: flex; align-items: center; gap: 8px; }
.preview-modal:has(.document-spreadsheet) { width: min(1440px, calc(100vw - 32px)); height: calc(100dvh - 32px); }
.document-content.document-spreadsheet { padding: 0; overflow: hidden; border: 1px solid #e4e4e8; border-radius: 14px; }
.document-spreadsheet .document-sheet-toolbar { padding: 16px 20px 10px; margin: 0; gap: 16px; }
.document-spreadsheet .document-sheet-toolbar label { font-size: 14px; color: #626268; }
.document-spreadsheet .document-sheet-toolbar select { font: inherit; color: #242428; background: #f7f7f9; border: 1px solid #dfdfe4; border-radius: 8px; padding: 8px 12px; }
.document-spreadsheet .document-sheet-toolbar label:first-child select { min-width: 140px; max-width: 320px; }
.document-sheet-paging { display: flex; gap: 8px; margin-left: auto; }
.document-sheet-paging[hidden] { display: none; }
.document-sheet-status { display: block; padding: 0 20px 14px; color: #717179; font-size: 13px; }
.document-spreadsheet .document-table-wrap { padding: 20px; background: #f7f7f9; border-top: 1px solid #e4e4e8; border-bottom: 1px solid #e4e4e8; max-height: calc(100dvh - 290px); min-height: 180px; overscroll-behavior: contain; }
.document-content .document-sheet-table { table-layout: fixed; min-width: 0; max-width: none; margin: 0 auto; background: white; border-collapse: separate; border-spacing: 0; border-top: 1px solid #dedee4; border-left: 1px solid #dedee4; font-size: 15px; line-height: 1.55; color: #242428; }
.document-content .document-sheet-table td, .document-content .document-sheet-table th { min-width: 0; max-width: none; border: 0; border-right: 1px solid #e4e4e9; border-bottom: 1px solid #e4e4e9; padding: 10px 12px; overflow-wrap: break-word; word-break: normal; white-space: pre-wrap; }
.document-sheet-table .document-cell-text { min-height: 22px; }
.document-content .document-sheet-table .document-empty-row > td, .document-content .document-sheet-table .document-empty-row > th { padding-top: 2px; padding-bottom: 2px; }
.document-sheet-table .document-empty-row .document-cell-text { min-height: 12px; }
.document-content .document-sheet-table th { background: #f0f0f3; color: #777780; font-size: 12px; text-align: center; padding: 7px 4px; font-weight: 500; }
.document-content .document-sheet-table thead th { position: sticky; top: -20px; z-index: 1; }
.document-content .document-sheet-table tbody th { position: sticky; left: -20px; z-index: 1; }
.document-content .document-sheet-table tbody tr:hover td { background: #fafafd; }
.document-content .document-sheet-notes { margin: 0; padding: 12px 20px; font-size: 13px; color: #717179; }
.document-spreadsheet .document-images { padding: 0 20px 20px; }
@media(max-width: 640px) { .document-spreadsheet .document-table-wrap { padding: 8px; max-height: calc(100dvh - 310px); } .document-spreadsheet .document-sheet-toolbar { padding: 12px; gap: 10px; } .document-spreadsheet .document-sheet-toolbar label:first-child select { min-width: 100px; max-width: 170px; } }
.document-slide { border-bottom: 1px solid #e3e3e8; padding: 12px 0; }
.document-images { margin-top: 28px; }
.document-images figure { margin: 20px 0; }
.document-images img { display: block; max-width: 100%; width: auto; height: auto; max-height: 800px; }
.document-images figcaption { font-size: 12px; color: #626268; margin-top: 6px; }
@media(max-width: 640px) { .preview-body.document-preview { padding: 10px; } .document-content { padding: 12px; } }
.pdf-toolbar { display:flex; align-items:center; justify-content:center; gap:16px; padding:12px; background:#fff; }
.pdf-page { height:calc(100% - 65px); overflow:auto; text-align:center; padding:20px 0; }
.pdf-page canvas { max-width:100%; background:white; box-shadow:0 2px 12px #0001; }

.toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: grid; gap: 9px; width: min(390px, calc(100vw - 48px)); }
.toast { padding: 13px 15px; border: 1px solid #bdbdc2; border-radius: 10px; background: #fff; box-shadow: 0 12px 36px rgba(15,15,18,.16); font-size: 12px; line-height: 1.5; animation: toast-in .18s ease-out; }
.toast.error { border-color: #e0b0b0; background: var(--red-soft); color: #8e1f1f; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.account-panel + .account-panel { margin-top: 22px; }
.account-panel .panel-heading p { margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.account-form { padding: 0 24px 24px; }
.account-form .form-grid { padding: 0; }
.account-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.account-row { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 18px 24px; border-top: 1px solid var(--line); }
.account-row strong { display: block; font-size: 14px; font-weight: 650; }
.account-row span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.account-row-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.account-row-actions small { color: var(--muted); font-size: 11px; }
.account-status { padding: 4px 7px; border-radius: 6px; background: var(--surface-soft); }
.form-grid select[multiple] { min-height: 112px; }
.form-grid :disabled { background: #f5f5f7; color: #86868b; cursor: not-allowed; }

/* Apple-inspired business surface: calm hierarchy, generous spacing, restrained color. */
.app-shell { grid-template-columns: 220px minmax(0, 1fr); min-width: 0; }
.sidebar {
  width: 220px;
  padding: 24px 16px 20px;
  background: rgba(249, 249, 251, .9);
  border-right-color: rgba(0, 0, 0, .07);
  backdrop-filter: saturate(180%) blur(28px);
}
.brand { min-height: 56px; padding: 0 8px 22px; border-bottom: 0; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; background: #1d1d1f; box-shadow: 0 5px 16px rgba(0, 0, 0, .14); font-size: 15px; }
.brand strong { font-size: 16px; letter-spacing: -.015em; }
.brand span { margin-top: 4px; font-size: 9px; letter-spacing: .08em; }
.nav-list { gap: 5px; margin-top: 10px; }
.nav-item { justify-content: flex-start; gap: 12px; min-height: 44px; padding: 0 13px; border: 0; border-radius: 11px; color: #55555a; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-item svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item span { font-size: 13px; font-weight: 600; }
.nav-item small { min-width: 22px; margin-left: auto; padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, .06); color: var(--muted); text-align: center; }
.nav-item:hover { border: 0; background: rgba(0, 0, 0, .045); color: var(--black); }
.nav-item.active { background: rgba(0, 0, 0, .075); color: var(--black); box-shadow: none; }
.nav-item.active small { background: rgba(0, 0, 0, .08); color: #3a3a3c; }
.main-content { min-width: 0; max-width: 100%; padding: 38px 42px 64px; }
.view, .dashboard-grid, .panel, .table-wrap { min-width: 0; max-width: 100%; }
.table-wrap { overflow-x: auto; }
.topbar { margin-bottom: 24px; }
.eyebrow, .section-kicker { margin-bottom: 8px; color: #86868b; font-size: 10px; font-weight: 650; letter-spacing: .08em; }
h1 { font-size: 40px; line-height: 1.06; letter-spacing: -.045em; }
h2 { font-size: 21px; letter-spacing: -.03em; }
h3 { font-size: 17px; letter-spacing: -.015em; }
.topbar-actions time { color: #86868b; font-size: 13px; }
.primary-button, .secondary-button { min-height: 44px; border-radius: 12px; padding-inline: 19px; font-size: 13px; font-weight: 650; }
.primary-button { border-color: #1d1d1f; background: #1d1d1f; box-shadow: 0 2px 5px rgba(0, 0, 0, .08); }
.primary-button:hover { background: #343437; }
.secondary-button { border-color: var(--line-strong); background: rgba(255, 255, 255, .86); }
.secondary-button:hover { border-color: rgba(0, 0, 0, .2); background: #fff; }
.text-button { color: #6e6e73; font-size: 13px; }
.icon-button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--surface-soft); color: #515154; font-size: 23px; transition: background .18s ease, transform .18s ease; }
.icon-button:hover { background: #e8e8ed; }

.owner-view-bar { margin: 0 0 18px; }
.owner-view-tabs { gap: 3px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .055); }
.owner-view-button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #6e6e73; font-size: 13px; font-weight: 600; }
.owner-view-button:hover { border: 0; background: rgba(255, 255, 255, .55); color: var(--black); }
.owner-view-button.active { border: 0; background: #fff; color: var(--black); box-shadow: 0 1px 4px rgba(0, 0, 0, .13); }
.owner-view-button small { background: rgba(0, 0, 0, .055); color: #6e6e73; }
.owner-view-button.active small { background: var(--surface-deep); color: #515154; }
.owner-view-button:disabled { opacity: .48; cursor: not-allowed; }
.owner-view-button small { font-size: 11px; }

.summary-grid { gap: 12px; margin-bottom: 14px; }
.summary-card { grid-template-columns: 34px 1fr auto; gap: 11px; min-height: 72px; padding: 13px 15px; border-color: rgba(0, 0, 0, .065); border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, .025); transition: border-color .18s ease, background .18s ease; }
.summary-card:hover { border-color: rgba(0, 0, 0, .16); background: #fafafa; box-shadow: none; }
.summary-card.is-zero { background: #f9f9fb; box-shadow: none; }
.summary-card.is-zero strong { color: #6e6e73; }
.summary-card.is-zero .summary-icon { background: transparent; color: #86868b; }
.summary-icon { width: 34px; height: 34px; background: #f2f2f4; color: #515154; }
.summary-icon svg { width: 18px; height: 18px; }
.summary-card span { color: #515154; font-size: 14px; font-weight: 600; }
.summary-card strong { font-size: 26px; font-weight: 680; }
.deadline-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -3px 0 18px; }
.deadline-summary:empty { display: none; }
.deadline-filter { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 11px; border: 1px solid transparent; border-radius: 10px; background: #ececee; color: #515154; font-size: 12px; font-weight: 500; cursor: pointer; }
.deadline-filter strong { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.deadline-filter svg { width: 15px; height: 15px; flex: 0 0 auto; }
.deadline-filter.danger { background: var(--red-soft); color: var(--red); }
.deadline-filter.warning { background: var(--amber-soft); color: var(--amber); }
.deadline-filter.is-zero { background: transparent; color: var(--muted); }
.deadline-filter:hover { border-color: currentColor; }
.deadline-filter:disabled { cursor: default; }
.dashboard-grid { align-items: start; gap: 16px; margin-bottom: 16px; }
.panel { border-color: rgba(0, 0, 0, .065); border-radius: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .025); }
.panel-heading { padding: 22px 24px 18px; }

.items-table th { padding: 13px 16px; border-color: var(--line); background: #f8f8fa; color: #6e6e73; font-size: 12px; font-weight: 650; letter-spacing: .015em; }
.items-table td { padding: 17px 16px; border-bottom-color: rgba(0, 0, 0, .06); color: #3a3a3c; font-size: 14px; }
.items-table tbody tr { transition: background .15s ease; }
.items-table tbody tr:hover { background: #f8f8fa; }
.items-table th:first-child { background: #f8f8fa; }
.items-table tbody td:first-child { background: #fff; }
.items-table tbody tr:hover td:first-child { background: #f8f8fa; }
.column-filter { gap: 6px; }
.column-filter select { min-height: 32px; border-color: transparent; border-radius: 9px; background: #ededf0; color: #515154; font-size: 12px; }
.table-title { font-size: 14px; font-weight: 650; letter-spacing: -.005em; }
.table-subtitle { margin-top: 5px; color: #86868b; font-size: 12px; line-height: 1.4; }
.dashboard-progress { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; color: #515154; font-size: 14px; font-weight: 400; line-height: 1.5; }
.dashboard-progress.is-empty, .dashboard-progress.muted { color: var(--muted); }
.dashboard-meta { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.45; }
.quick-edit-cell { border-radius: 9px; }
.quick-edit-cell:hover { background: #ededf0; }
.quick-edit-cell small { font-size: 11px; }
.status-badge, .risk-chip { min-height: 28px; padding: 5px 10px; background: #f0f0f2; color: #515154; font-size: 12px; font-weight: 650; }
.priority-badge { min-height: 28px; padding: 5px 9px; border-color: transparent; border-radius: 9px; background: #f0f0f2; font-size: 12px; font-weight: 650; }
.deadline-cell { display: inline-grid; gap: 3px; align-items: start; }
.dashboard-table th, .dashboard-table td { padding-inline: 12px; }
.dashboard-table th:first-child, .dashboard-table td:first-child { padding-left: 18px; }
.dashboard-table .quick-edit-cell > small { display: none; }
.dashboard-table .start-col .quick-edit-cell > span,
.dashboard-table .due-col .quick-edit-cell > span { overflow: visible; white-space: normal; }
.dashboard-table .deadline-note { display: block; margin-left: 0; color: inherit; font-size: 12px; font-weight: 700; line-height: 1.25; opacity: 1; white-space: nowrap; }
.deadline-note.danger { color: var(--red); }
.deadline-note.warning { color: var(--amber); }
.priority-panel .dashboard-table { width: 100%; min-width: 0; }
.dashboard-table th.item-col, .dashboard-table td.item-col { width: 40%; }
.dashboard-table th.priority-col, .dashboard-table td.priority-col { width: 14%; }
.dashboard-table th.start-col, .dashboard-table td.start-col { width: 15%; }
.dashboard-table th.due-col, .dashboard-table td.due-col { width: 18%; }
.dashboard-table th.status-col, .dashboard-table td.status-col { width: 13%; }
.dashboard-table.show-owner .item-col { width: 32%; }
.dashboard-table.show-owner .owner-col { width: 12%; }
.dashboard-table.show-owner .priority-col { width: 12%; }
.dashboard-table.show-owner .start-col { width: 14%; }
.dashboard-table.show-owner .due-col { width: 18%; }
.dashboard-table.show-owner .status-col { width: 12%; }
.recent-timeline { padding: 0 24px 15px; }
.recent-row { grid-template-columns: 118px 120px 1fr; gap: 18px; padding: 15px 4px; border-top-color: rgba(0, 0, 0, .06); font-size: 13px; line-height: 1.5; }

.list-panel { min-height: calc(100vh - 170px); }
.list-title-row { flex-wrap: wrap; }
.filter-count { min-height: 25px; background: #ededf0; font-size: 12px; }
.list-title-row #reorder-items { min-height: 32px; margin-left: 3px; border-radius: 9px; }
.list-title-row #reorder-items[aria-pressed="true"] { border-color: var(--black); background: var(--black); color: #fff; }
.panel-heading-actions { display: flex; align-items: center; gap: 9px; }
#dashboard-reorder-items[aria-pressed="true"] { border-color: var(--black); background: var(--black); color: #fff; }
.order-hint { margin: 9px 0 0; color: #6e6e73; font-size: 12px; line-height: 1.5; }
.priority-panel .dashboard-order-hint { margin: -4px 24px 12px; }
.filters { gap: 9px; }
.filters select, .search-box input, .filter-reset { min-height: 42px; border-color: transparent; border-radius: 11px; background: #ededf0; font-size: 13px; }
.filters select:hover, .search-box input:hover, .filter-reset:hover { background: #e7e7ea; }
.filters select:focus, .search-box input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(0, 113, 227, .18); }
.filters select:disabled, .search-box input:disabled, .filter-reset:disabled { opacity: .48; cursor: not-allowed; }
.filter-field span, .search-box span { margin-bottom: 6px; color: #86868b; font-size: 12px; font-weight: 600; }
.filter-reset { color: #515154; }
.item-title-cell { display: flex; min-width: 0; align-items: center; gap: 10px; }
.item-title-copy { display: block; min-width: 0; }
.reorder-handle { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; background: #f1f1f3; color: #6e6e73; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: element; }
.reorder-handle:hover { border-color: rgba(0, 0, 0, .2); background: #e8e8ed; color: var(--black); }
.reorder-handle:active { cursor: grabbing; }
.reorder-handle svg { width: 16px; height: 22px; fill: currentColor; }
.reorder-fixed { display: inline-grid; place-items: center; min-width: 40px; min-height: 28px; flex: 0 0 auto; padding: 0 7px; border-radius: 9px; background: #f1f1f3; color: #6e6e73; font-size: 10px; font-weight: 700; }
#all-items.reorder-active tr, #priority-items.reorder-active tr { cursor: default; }
#all-items tr.is-dragging td, #priority-items tr.is-dragging td { opacity: .42; }
#all-items tr.drop-before td, #priority-items tr.drop-before td { box-shadow: inset 0 2px 0 var(--black); }
#all-items tr.drop-after td, #priority-items tr.drop-after td { box-shadow: inset 0 -2px 0 var(--black); }
#all-items tr.drop-before td:first-child, #priority-items tr.drop-before td:first-child { box-shadow: inset 0 2px 0 var(--black), 10px 0 16px -16px rgba(17,17,19,.35); }
#all-items tr.drop-after td:first-child, #priority-items tr.drop-after td:first-child { box-shadow: inset 0 -2px 0 var(--black), 10px 0 16px -16px rgba(17,17,19,.35); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.backup-intro { padding: 28px 30px; border-color: rgba(0, 0, 0, .065); border-radius: 20px; }
.integrity-strip { gap: 0; border-color: rgba(0, 0, 0, .065); border-radius: 20px; background: #fff; }
.integrity-cell { border-right: 1px solid var(--line); }
.integrity-cell:last-child { border-right: 0; }
.drawer-backdrop { background: rgba(0, 0, 0, .24); backdrop-filter: saturate(150%) blur(10px); }
.detail-drawer { width: min(820px, 72vw); background: rgba(255, 255, 255, .98); box-shadow: -30px 0 80px rgba(0, 0, 0, .18); transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.drawer-header { padding: 28px 30px 22px; border-bottom-color: var(--line); }
.item-number { margin-bottom: 8px; color: #86868b; font-size: 11px; letter-spacing: .06em; }
.drawer-header h2 { font-size: 27px; letter-spacing: -.035em; }
.detail-alerts { padding: 14px 30px 0; }
.drawer-actions { gap: 9px; padding: 15px 30px 18px; }
.drawer-actions button { min-height: 39px; padding: 0 14px; border-color: var(--line-strong); border-radius: 10px; background: #fff; font-size: 12px; font-weight: 650; }
.drawer-scroll { height: calc(100vh - 186px); padding: 0 30px 46px; }
.detail-section { padding: 27px 0; border-bottom-color: var(--line); }
.detail-grid { gap: 18px; }
.detail-field span { margin-bottom: 7px; color: #86868b; font-size: 12px; }
.detail-field strong { font-size: 14px; font-weight: 600; }
.long-fields { gap: 11px; margin-top: 18px; }
.long-field { padding: 15px 16px; border-radius: 13px; background: #f5f5f7; }
.long-field span { font-size: 12px; }
.long-field p { font-size: 14px; }
.drop-zone { min-height: 126px; gap: 7px; border-color: rgba(0, 0, 0, .2); border-radius: 14px; background: #f7f7f9; }
.drop-zone.dragging { border-color: var(--blue); background: var(--blue-soft); }
.attachment-heading { gap: 12px; flex-wrap: wrap; }
.attachment-heading > div { display: flex; align-items: baseline; gap: 9px; }
.attachment-heading .text-button { flex: 0 0 auto; min-height: 34px; }
#attachment-section .attachment-list { margin: 0 0 14px; }
#attachment-section .attachment-list:empty { display: none; }
.has-attachments .drop-zone { grid-template-columns: 1fr auto; justify-items: start; min-height: 78px; gap: 3px 14px; padding: 15px 17px; text-align: left; }
.has-attachments .drop-zone strong, .has-attachments .drop-zone > span { grid-column: 1; }
.has-attachments .drop-zone > button { grid-column: 2; grid-row: 1 / 3; }
.attachment-copy-note { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.attachment-options { margin-top: 12px; }
.attachment-options summary { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; color: var(--muted); font-size: 12px; cursor: pointer; list-style: none; }
.attachment-options summary::-webkit-details-marker { display: none; }
.attachment-options summary::before { content: "+"; font-size: 15px; }
.attachment-options[open] summary::before { content: "−"; }
.attachment-options > p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.attachment-options .attachment-link-field { margin: 7px 0 0; }
.attachment-info { min-width: 0; }
.attachment-name { display: block; max-width: 100%; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.5; text-align: left; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
.attachment-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.excel-open-note { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.excel-sync-status { color: var(--ink); font-weight: 600; }
.excel-sync-status.sync-attention { color: #94651d; }
.excel-version-list { width: 100%; padding: 24px; align-self: flex-start; }
.excel-version-list > p { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.excel-version-list .attachment-card { grid-template-columns: minmax(0, 1fr) auto; }
.attachment-version-note, .action-note { border-radius: 12px; background: #f5f5f7; }
.attachment-link-field input { min-height: 42px; border-color: transparent; border-radius: 11px; background: #f1f1f3; }
.attachment-card { padding: 13px; border-color: rgba(0, 0, 0, .07); border-radius: 13px; }
.attachment-card strong { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
.attachment-card span { line-height: 1.5; }
.file-type { width: 40px; height: 40px; border-radius: 10px; }
.attachment-card .row-actions { align-items: center; flex-wrap: wrap; }
.attachment-action-more { position: relative; }
.attachment-action-more > summary {
  display: grid;
  place-items: center;
  width: 34px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #515154;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.attachment-action-more > summary::-webkit-details-marker { display: none; }
.attachment-action-more > summary:hover { background: #f1f1f3; color: var(--black); }
.attachment-action-more > summary:focus-visible { outline: 3px solid rgba(0, 113, 227, .24); outline-offset: 2px; }
.attachment-action-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 8;
  display: grid;
  min-width: 172px;
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .15);
}
.attachment-card .row-actions .attachment-action-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  justify-content: flex-start;
  border-color: transparent;
  background: transparent;
  font-size: 12px;
  text-align: left;
}
.attachment-card .row-actions .attachment-action-menu button:hover { background: #f1f1f3; }

dialog::backdrop { background: rgba(0, 0, 0, .28); backdrop-filter: saturate(150%) blur(12px); }
.modal { border-radius: 22px; overflow: hidden; }
.wide-modal { width: min(900px, calc(100vw - 50px)); }
.modal-header, .preview-header { padding: 25px 28px 21px; border-bottom-color: var(--line); }
.form-grid { gap: 18px; max-height: 67vh; padding: 24px 28px; }
.form-more summary > span { flex: 0 0 auto; }
#item-settings-summary { min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.form-grid label, .action-fields label { color: #515154; font-size: 13px; font-weight: 600; }
.field-hint { color: #86868b !important; font-size: 12px; }
.form-grid label > .date-action { min-height: 21px; padding-inline: 8px; font-size: 10px; }
.item-form-error { border-radius: 12px; font-size: 13px; }
.form-grid input:not([type=checkbox]), .form-grid select, .form-grid textarea, .action-fields input, .action-fields select, .action-fields textarea { margin-top: 7px; border-color: transparent; border-radius: 11px; background: #f1f1f3; padding: 11px 12px; font-size: 14px; }
.form-grid input:not([type=checkbox]), .form-grid select, .action-fields input, .action-fields select { min-height: 44px; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .action-fields input:focus, .action-fields select:focus, .action-fields textarea:focus { background: #fff; box-shadow: 0 0 0 3px rgba(0, 113, 227, .17); }
.checkbox-field { min-height: 44px; padding: 10px 12px; border-color: transparent; border-radius: 11px; background: #f5f5f7; }
.modal-footer { padding: 18px 28px 22px; border-top-color: var(--line); }
.action-fields { gap: 16px; padding: 24px 28px; }
.attachment-rename-modal { width: min(520px, calc(100vw - 40px)); }
.attachment-name-editor {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 44px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 11px;
  background: #f1f1f3;
}
.attachment-name-editor:focus-within { background: #fff; box-shadow: 0 0 0 3px rgba(0, 113, 227, .17); }
.action-fields .attachment-name-editor input {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.action-fields .attachment-name-editor input:focus { background: transparent; box-shadow: none; }
.attachment-name-extension {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 13px;
  border-left: 1px solid rgba(0, 0, 0, .08);
  color: #515154;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.attachment-name-extension.no-extension { color: #86868b; font-size: 12px; font-weight: 500; }
.attachment-rename-modal .action-form-error { margin: 0; }
.preview-modal { border-radius: 22px; overflow: hidden; }
.toast { padding: 14px 16px; border-color: rgba(0, 0, 0, .1); border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, .16); font-size: 13px; }

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

@media (max-width: 1250px) {
  .main-content { padding-inline: 26px; }
  .owner-view-bar { align-items: flex-start; flex-direction: column; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .summary-card { padding: 14px; }
}

@media (max-width: 600px) {
  .login-screen { padding: 16px; }
  .login-card { padding: 28px 22px; border-radius: 22px; }
  .login-card h1 { font-size: 28px; }
  .date-fields { grid-template-columns: 1fr; }
}

/* Apple-style refinement: system typography, restrained density and responsive working surfaces. */
body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang TC", "PingFang HK", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
}
h1 { font-size: 30px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }

.main-content {
  width: 100%;
  max-width: 1660px;
  justify-self: center;
}

.summary-card strong,
.summary-icon,
.login-brand,
.brand-mark,
.items-table th,
.filter-count,
.time-danger,
.time-warning,
.status-badge,
.risk-chip,
.priority-badge,
.reorder-fixed,
.file-type {
  font-weight: 700;
}

.primary-button,
.secondary-button,
.text-button,
.eyebrow,
.section-kicker,
.login-card label,
.nav-item span,
.board-sidebar-heading,
.board-sidebar-heading button,
.sidebar-folder-button,
.session-pill,
.session-pill button,
.owner-view-button,
.summary-card span,
.column-filter select,
.table-title,
.filter-field span,
.search-box span,
.drawer-actions button,
.detail-field strong,
.reference-link-field button,
.reference-link-field a,
.detail-more summary span,
.form-more summary span,
.form-grid label,
.action-fields label,
.board-row-actions button,
.board-manager-row.archived > button,
.archived-boards summary,
.item-form-error {
  font-weight: 600;
}

.brand span,
.nav-item small,
.board-sidebar-heading,
.board-sidebar-heading button,
.board-nav-button small,
.login-card > small,
.login-error,
.eyebrow,
.section-kicker,
.session-pill,
.session-pill button,
.owner-view-button small,
.quick-edit-cell small,
.table-subtitle,
.integrity-cell span,
.backup-row span,
.backup-row code,
.item-number,
.detail-section-title span,
.detail-field span,
.reference-link-field button,
.reference-link-field a,
.long-field span,
.detail-more summary small,
.form-more summary small,
.drop-zone span,
.attachment-link-field,
.attachment-version-note,
.upload-result,
.attachment-card span,
.attachment-card .row-actions button,
.attachment-card .row-actions a,
.file-type,
.timeline-entry time,
.timeline-entry strong,
.timeline-entry p,
.timeline-entry small,
.field-hint,
.form-grid label > .date-action,
.board-name-control small,
.board-manager-row.archived small,
.board-row-actions button,
.board-manager-row.archived > button {
  font-size: 12px;
}

.brand span,
.board-sidebar-heading,
.eyebrow,
.section-kicker,
.topbar-actions time,
.detail-field span,
.long-field span,
.field-hint,
.item-number {
  color: #6e6e73;
}

.detail-more summary span,
.form-more summary span,
.timeline-entry strong,
.timeline-entry p { font-size: 13px; }

.summary-card strong,
.filter-count,
time,
.deadline-cell,
.integrity-cell strong {
  font-variant-numeric: tabular-nums;
}

.detail-drawer {
  display: flex;
  flex-direction: column;
}
.drawer-header,
.detail-alerts,
.drawer-actions {
  flex: 0 0 auto;
}
.drawer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.item-title-copy[role="button"] {
  border-radius: 7px;
  cursor: pointer;
}
.item-title-copy[role="button"]:hover .table-title { text-decoration: underline; text-underline-offset: 3px; }
.item-title-copy[role="button"]:focus-visible { outline: 3px solid rgba(0, 113, 227, .28); outline-offset: 3px; }

.detail-action-more { position: relative; flex: 0 0 auto; }
.detail-action-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 39px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: #515154;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.detail-action-more > summary::-webkit-details-marker { display: none; }
.detail-action-more > summary:hover { background: #f5f5f7; color: var(--black); }
.detail-action-more > summary:focus-visible { outline: 3px solid rgba(0, 113, 227, .28); outline-offset: 2px; }
.detail-action-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 6;
  display: grid;
  min-width: 180px;
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .15);
}
.drawer-actions .detail-action-menu button {
  width: 100%;
  justify-content: flex-start;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.drawer-actions .detail-action-menu button:hover { background: #f1f1f3; }
.danger-action,
.danger-button { color: #515154; }
#purge-deleted-button { color: #515154; }

@media (max-width: 900px) {
  .app-shell { display: block; }

  .sidebar {
    position: sticky;
    inset: auto;
    top: 0;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "brand nav folder"
      "boards boards boards";
    gap: 8px 12px;
    padding: 10px 14px 9px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: rgba(249, 249, 251, .94);
    z-index: 35;
  }

  .brand {
    grid-area: brand;
    min-height: 44px;
    padding: 0;
  }
  .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
  .brand strong { font-size: 15px; white-space: nowrap; }

  .nav-list {
    grid-area: nav;
    display: flex;
    min-width: 0;
    gap: 4px;
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .nav-list::-webkit-scrollbar,
  .board-nav::-webkit-scrollbar,
  .owner-view-tabs::-webkit-scrollbar,
  .drawer-actions::-webkit-scrollbar { display: none; }
  .nav-item {
    width: auto;
    min-height: 44px;
    flex: 0 0 auto;
    gap: 7px;
    padding-inline: 11px;
    white-space: nowrap;
  }
  .nav-item svg { width: 18px; height: 18px; }

  .board-sidebar {
    grid-area: boards;
    min-width: 0;
    margin: 0;
    padding: 8px 0 0;
    flex-direction: row;
    align-items: center;
    border-top-color: rgba(0, 0, 0, .06);
  }
  .board-sidebar-heading { flex: 0 0 auto; padding: 0 9px 0 0; }
  .board-nav {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .board-nav-button {
    width: auto;
    min-height: 34px;
    flex: 0 0 auto;
    padding-inline: 10px;
  }
  .sidebar-folder-button {
    grid-area: folder;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding-inline: 11px;
    white-space: nowrap;
  }

  .main-content {
    grid-column: auto;
    max-width: none;
    padding: 26px 20px 48px;
  }

  .topbar { margin-bottom: 20px; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backup-intro { align-items: stretch; flex-direction: column; }
  .backup-actions { justify-content: flex-end; }
  .integrity-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integrity-cell:nth-child(2) { border-right: 0; }
  .integrity-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .sidebar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand folder"
      "nav nav"
      "boards boards";
  }

  .main-content { padding: 20px 14px 38px; }
  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
  }
  h1 { font-size: 30px; letter-spacing: -.035em; }
  h2 { font-size: 20px; }
  .topbar-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 9px;
  }
  .topbar-actions time { flex: 1 1 auto; white-space: nowrap; }
  .session-pill { flex: 0 1 auto; }
  #new-item-button { flex: 0 0 auto; }

  .owner-view-bar { width: 100%; }
  .owner-view-tabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .owner-view-button { flex: 0 0 auto; }

  .panel { border-radius: 16px; }
  .panel-heading { padding: 18px 16px 15px; }
  .panel-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
  .summary-card { border-radius: 16px; }

  .list-toolbar { display: block; }
  .filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
  }
  .search-box { grid-column: 1 / -1; }
  .search-box input,
  .filter-field select,
  .filter-reset { width: 100%; }

  .table-wrap { overflow: visible; }
  .items-table.full-table,
  .items-table.dashboard-table {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0 12px 12px;
  }
  .full-table thead,
  .dashboard-table thead { display: none; }
  .full-table tbody,
  .dashboard-table tbody {
    display: grid;
    gap: 10px;
  }
  .full-table tbody tr,
  .dashboard-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .075);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .02);
  }
  .full-table tbody tr:hover,
  .dashboard-table tbody tr:hover { background: #fff; }
  .full-table td,
  .dashboard-table td,
  .dashboard-table.show-owner td {
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    background: #fff;
    box-shadow: none;
  }
  .full-table td:first-child,
  .dashboard-table td.item-col,
  .dashboard-table td.owner-col,
  .dashboard-table td.priority-col,
  .dashboard-table td.start-col,
  .dashboard-table td.due-col,
  .dashboard-table td.status-col {
    width: auto;
  }
  .full-table td:first-child,
  .dashboard-table td.item-col {
    grid-column: 1 / -1;
    padding: 14px 12px 11px;
    border-bottom: 1px solid var(--line);
    background: #f8f8fa;
  }
  .full-table tbody tr:hover td:first-child,
  .dashboard-table tbody tr:hover td.item-col { background: #f8f8fa; }
  .full-table td:not(:first-child)::before,
  .dashboard-table td:not(.item-col)::before {
    display: block;
    margin-bottom: 4px;
    color: #6e6e73;
    font-size: 12px;
    font-weight: 500;
  }
  .full-table td:nth-child(2)::before { content: "負責人"; }
  .full-table td:nth-child(3)::before { content: "倉庫／部門"; }
  .full-table td:nth-child(4)::before { content: "重要性"; }
  .full-table td:nth-child(5)::before { content: "開始日期"; }
  .full-table td:nth-child(6)::before { content: "截止日期"; }
  .full-table td:nth-child(7)::before { content: "狀態"; }
  .dashboard-table .owner-col::before { content: "負責人"; }
  .dashboard-table .priority-col::before { content: "重要性"; }
  .dashboard-table .start-col::before { content: "開始日期"; }
  .dashboard-table .due-col::before { content: "截止日期"; }
  .dashboard-table .status-col::before { content: "狀態"; }
  .full-table td[colspan],
  .dashboard-table td[colspan] {
    grid-column: 1 / -1;
    padding: 18px 12px;
    text-align: center;
  }
  .full-table td[colspan]::before,
  .dashboard-table td[colspan]::before { content: none; }
  .full-table .quick-edit-cell,
  .dashboard-table .quick-edit-cell {
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 0;
  }
  .priority-panel .dashboard-order-hint { margin-inline: 16px; }

  .recent-timeline { padding-inline: 16px; }
  .recent-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px 12px;
    padding-block: 14px;
  }
  .recent-row button { grid-column: 1 / -1; }

  .detail-drawer { width: 100vw; max-width: none; }
  .drawer-header { padding: 21px 18px 17px; }
  .drawer-header h2 { font-size: 23px; }
  .detail-alerts { padding: 12px 18px 0; }
  .drawer-actions {
    flex-wrap: wrap;
    overflow: visible;
    padding: 12px 18px 14px;
  }
  .drawer-actions button { min-height: 44px; flex: 0 0 auto; }
  .detail-action-more > summary { min-height: 44px; }
  .drawer-scroll { padding: 0 18px 34px; }
  .detail-section { padding-block: 22px; }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  dialog.modal,
  dialog.preview-modal {
    width: calc(100vw - 20px);
    max-width: none;
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }
  dialog.modal > form {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 20px);
  }
  .modal-header,
  .preview-header { padding: 20px 18px 17px; }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-height: none;
    flex: 1 1 auto;
    padding: 20px 18px;
  }
  .form-grid .span-2 { grid-column: auto; }
  .date-fields,
  .more-fields { grid-template-columns: 1fr; }
  .action-fields {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 18px;
  }
  .modal-footer {
    flex: 0 0 auto;
    padding: 15px 18px 18px;
    background: rgba(255, 255, 255, .96);
  }
  .board-manager { padding: 20px 18px; }
  .preview-modal { height: calc(100dvh - 20px); }
  .preview-body { height: calc(100% - 74px); }

  .backup-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .backup-actions button { width: 100%; }
  .backup-row {
    grid-template-columns: 1fr;
    gap: 9px;
    padding-block: 16px;
  }
  .backup-row .row-actions { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .account-form { padding: 0 18px 18px; }
  .account-row { align-items: flex-start; padding-inline: 18px; flex-direction: column; gap: 12px; }
  .account-row-actions { width: 100%; justify-content: space-between; }
  .brand span { display: none; }
  .session-pill { max-width: 100%; white-space: nowrap; }
  .priority-panel .panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }
  .priority-panel .panel-heading-actions {
    width: 100%;
    justify-content: space-between;
  }
  .summary-grid { gap: 9px; }
  .summary-card {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 76px;
    gap: 8px;
    padding: 13px 14px;
  }
  .summary-icon { display: none; }
  .summary-card span { font-size: 13px; }
  .summary-card strong { font-size: 25px; }

  .topbar-actions time { width: 100%; flex-basis: 100%; }
  .filters { grid-template-columns: 1fr; }
  .search-box { grid-column: auto; }
  .detail-grid { grid-template-columns: 1fr; }
  .attachment-card { grid-template-columns: 40px minmax(0, 1fr); }
  .attachment-card .row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .attachment-card .row-actions:empty { display: none; }
  .board-create-row,
  .board-name-control { grid-template-columns: 1fr; }
  .board-row-actions { justify-content: flex-end; }
  .backup-actions { grid-template-columns: 1fr; }
  .integrity-strip { grid-template-columns: 1fr; }
  .integrity-cell,
  .integrity-cell:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .integrity-cell:last-child { border-bottom: 0; }
}

@media (hover: none) {
  .summary-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* Person workspaces reuse the quiet work-table language without impersonation. */
.workspace-panel { margin-bottom: 20px; }
.workspace-people { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 24px 24px; }
.workspace-person { display: grid; gap: 5px; text-align: left; min-width: 140px; padding: 14px 18px; border: 1px solid #e3e3e7; border-radius: 14px; background: #fafafa; color: #202024; }
.workspace-person small { color: #727278; }
.workspace-person.selected { border-color: #303036; box-shadow: 0 0 0 1px #303036; background: #fff; }
.workspace-note { margin: 0; padding: 0 24px 18px; color: #727278; font-size: 14px; }
.workspace-filters { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 24px 20px; }
.workspace-filters label { min-width: 160px; flex: 1; }
#workspace-items .item-title-button { display: grid; gap: 6px; text-align: left; width: 100%; padding: 0; background: none; border: none; color: inherit; }
#workspace-items .item-title-button small, #workspace-items .item-title-button span { color: #727278; font-size: 13px; }
#workspace-updated { color: #727278; }
/* Consultant reports extend the existing working surface. */
.report-panel { margin-bottom: 24px; }
.report-form { display: grid; gap: 20px; padding: 0 24px 24px; }
.report-form label { display: grid; gap: 8px; font-size: 14px; }
.report-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.report-filters { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.report-form input:not([type="checkbox"]), .report-form select, .report-form textarea { width: 100%; min-width: 0; padding: 10px 12px; font: inherit; border: 1px solid var(--border, #ddd); border-radius: 8px; background: #fff; color: #1b1b1b; }
.report-form textarea { font-size: 16px; line-height: 1.7; resize: vertical; }
.report-form textarea[readonly] { background: #fafafa; }
.report-form .checkbox-field { display: flex; align-items: flex-start; gap: 10px; }
.report-hint { color: #626262; font-size: 14px; line-height: 1.6; margin: 0; }
.report-message { margin: 0; padding: 0 24px 16px; font-size: 14px; line-height: 1.6; }
.report-message:empty { padding-bottom: 0; }
.report-error { color: #b42318; }
.report-candidates { max-height: 360px; overflow: auto; border: 1px solid #e5e5e5; border-radius: 10px; }
.report-form .report-choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid #eee; cursor: pointer; }
.report-choice:last-child { border-bottom: 0; }
.report-choice input { margin-top: 4px; }
.report-choice strong { font-size: 16px; font-weight: 500; }
.report-choice small { display: block; margin-top: 5px; color: #666; font-size: 13px; line-height: 1.5; }
.report-actions { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
#report-save-controls { display: grid; gap: 20px; }
.report-sources { padding: 16px; background: #fafafa; border: 1px solid #e5e5e5; border-radius: 10px; font-size: 14px; }
.report-sources summary { cursor: pointer; font-weight: 600; }
.report-sources section { padding-top: 16px; overflow-wrap: anywhere; }
.report-sources h3 { margin: 0 0 8px; font-size: 16px; }
.report-sources small { display: block; color: #777; font-size: 12px; }
.report-sources li { margin-bottom: 10px; }
.report-saved-list { display: grid; gap: 10px; padding: 0 24px 24px; }
.report-saved { display: grid; gap: 7px; text-align: left; padding: 16px; background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; color: #222; }
.report-saved strong { font-size: 16px; }
.report-saved span { font-size: 13px; color: #666; }
@media (max-width: 1000px) { .report-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .report-fields, .report-filters { grid-template-columns: 1fr; } .report-form { padding: 0 16px 16px; } .report-actions { flex-wrap: wrap; } }

/* Read-only item sharing */
.shared-page{background:#f4f6f8;color:#172333}.shared-main{max-width:920px;margin:40px auto;padding:0 24px}.shared-main h1{font-size:28px;line-height:1.4;overflow-wrap:anywhere}.shared-main h2{font-size:18px;margin:24px 0 12px}.shared-main .panel{padding:24px;margin:20px 0}.shared-main p{line-height:1.7}.shared-text{white-space:pre-wrap;overflow-wrap:anywhere}.shared-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.shared-facts span{display:block;color:#637080;font-size:14px;margin-bottom:6px}.shared-main article{padding:16px 0;border-top:1px solid #e3e7eb}.shared-main a{color:#1765a9;overflow-wrap:anywhere}.shared-main footer{padding:20px 0}#shared-login{max-width:420px}#shared-login label,#share-form label{display:grid;gap:8px;margin:16px 0}#share-form{padding:24px}#share-form input{width:100%}#share-form .modal-header{padding:0}#share-dialog{width:min(580px,calc(100vw - 32px))}.shared-main small{font-size:14px;color:#637080}@media(max-width:620px){.shared-main{margin:20px auto;padding:0 16px}.shared-facts{grid-template-columns:1fr 1fr}.shared-main .panel{padding:18px}}