/* Numerals: Inter (SIL OFL 1.1, see fonts/OFL.txt), limited by unicode-range to digits and number
   punctuation. Chinese and letters keep the existing font; only numbers change. */
@font-face { font-family: "Hub Numerals"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-numerals-regular.woff") format("woff"); unicode-range: U+0025, U+002B-002F, U+0030-003A; }
@font-face { font-family: "Hub Numerals"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-numerals-medium.woff") format("woff"); unicode-range: U+0025, U+002B-002F, U+0030-003A; }
@font-face { font-family: "Hub Numerals"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-numerals-semibold.woff") format("woff"); unicode-range: U+0025, U+002B-002F, U+0030-003A; }
@font-face { font-family: "Hub Numerals"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-numerals-bold.woff") format("woff"); unicode-range: U+0025, U+002B-002F, U+0030-003A; }
:root {
  --font-ui: "Hub Numerals", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --blue: #2e63d9;
  --blue-soft: #edf3ff;
  --line: #d2dce8;
  --muted: #536277;
  --ink: #1d2b3d;
  --radius: 12px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  font-synthesis: none;
  color: var(--ink);
  background: #eaf0f6;
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; }
body:has(.shell), #app:has(.shell) { height: 100dvh; overflow: hidden; }
button, input, textarea, select, kbd { font: inherit; color: inherit; }
h1, h2, h3, strong, b { font-weight: 600; }
h1, h2, h3, p { overflow-wrap: break-word; }
a { color: var(--blue); text-decoration: none; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #aabbd6; outline-offset: 3px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.icon { width: 19px; height: 19px; flex-shrink: 0; }
.skip { position: fixed; top: -100px; left: 16px; z-index: 60; padding: 10px 16px; background: white; border-radius: 8px; }
.skip:focus { top: 12px; }
.initial-loading { padding: 56px 24px; text-align: center; color: var(--muted); }

/* A single shell replaces the previously overlapping light and dark themes. */
.shell { display: grid; grid-template-columns: 212px minmax(0, 1fr); height: 100dvh; overflow: hidden; }
.sidebar { position: relative; top: 0; height: 100%; display: flex; flex-direction: column; padding: 28px 12px 16px; background: #dfe8f3; border-right: 1px solid #c5d2e2; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 12px 24px; flex-shrink: 0; }
.brand img { width: 36px; height: 36px; }
.brand strong { display: block; font-size: 18px; line-height: 1.35; letter-spacing: -.25px; }
.brand small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.navigation { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; min-height: 0; padding: 8px 0 20px; scrollbar-width: thin; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 43px; padding: 10px 14px; text-align: left; border: 0; border-radius: 8px; color: #4a5668; background: transparent; transition: background-color 140ms ease, color 140ms ease; }
.nav-item[aria-current=page] { background: #c8daf4; color: #164a9d; font-weight: 600; }
.nav-item .icon { width: 18px; height: 18px; }
.nav-label { padding: 20px 14px 7px; font-size: 11px; color: var(--muted); }
.text-button { border: 0; padding: 0; background: transparent; color: var(--blue); font-size: 12px; }
.workspace { display: flex; flex-direction: column; min-width: 0; height: 100dvh; overflow: hidden; }
.topbar { position: relative; z-index: 8; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: #f7f9fc; }
.global-search { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 140px; max-width: 460px; height: 40px; padding: 0 11px; border: 1px solid #d2dce8; border-radius: 8px; color: var(--muted); background: #edf2f8; transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease; }
.global-search:focus-within { background: white; border-color: #9baac2; box-shadow: 0 0 0 3px #546d9710; }
.global-search input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; font-size: 13px; }
.search-submit { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #7b8798; }
.search-submit .icon { width: 17px; height: 17px; }
.global-search kbd { padding: 1px 5px; border: 1px solid #e1e5ec; border-radius: 4px; font-size: 10px; white-space: nowrap; color: var(--muted); background: white; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.account-area { display: flex; align-items: center; gap: 12px; min-width: 0; }
.org-switcher { position: relative; flex-shrink: 0; }
.top-org { display: flex; align-items: center; gap: 8px; max-width: 205px; min-height: 38px; padding: 7px 10px; border: 1px solid #dce5f0; border-radius: 7px; background: #edf3fa; color: #354e6c; font-size: 12px; cursor: pointer; list-style: none; }
.top-org::-webkit-details-marker { display: none; }
.top-org > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-org > .icon { width: 16px; height: 16px; color: #637c9c; }
.top-org > .icon:last-child { width: 13px; height: 13px; }
.org-switcher[open] .top-org { background: white; border-color: #b7cbe4; }
.org-menu { position: absolute; z-index: 40; top: calc(100% + 7px); right: 0; width: 270px; max-height: min(380px, calc(100dvh - 100px)); overflow: auto; padding: 6px; border: 1px solid #d5e0ed; border-radius: 10px; background: white; box-shadow: 0 10px 28px #24395516; }
.org-menu-heading { padding: 7px 9px 9px; color: #71849d; font-size: 11px; }
.org-menu > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px; border: 0; border-radius: 6px; background: transparent; color: #34506f; text-align: left; }
.org-menu > button > span { min-width: 0; }
.org-menu strong { display: block; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-menu small { display: block; margin-top: 3px; color: #7588a0; font-size: 10px; }
.org-menu > button[aria-pressed=true] { background: #edf4fe; }
.org-menu > button .icon { width: 16px; height: 16px; color: #4a74b3; }
.org-menu > p { padding: 6px 9px; color: #71849d; font-size: 12px; }
.org-switcher[open][data-motion=pointer] .org-menu { opacity: 1; transform: translateY(0); transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out); }
@starting-style { .org-switcher[open][data-motion=pointer] .org-menu { opacity: 0; transform: translateY(-4px); } }
.notification-button { position: relative; display: grid; place-items: center; width: 35px; height: 35px; border: 0; border-radius: 7px; background: transparent; color: #657183; }
.notification-button [data-notification-count] { position: absolute; right: -1px; top: -2px; min-width: 15px; padding: 0 4px; border-radius: 10px; background: #dc5b63; color: white; font-size: 9px; }
.account-avatar { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border: 1px solid #e1e8f4; border-radius: 50%; background: #eef3fb; color: #526f9a; font-size: 13px; }
.account-name { max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.5; }
.account-name small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.main { flex: 1; min-height: 0; width: 100%; margin: 0; padding: 24px 20px; overflow: auto; }
.btn.mobile-menu { display: none; }
.sidebar-close { display: none; margin-left: auto; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #4a5668; }
.sidebar-close .icon { width: 18px; height: 18px; }

/* Focus surrounds each control; no decorative bottom stripes or heavy outlines. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 15px; border: 1px solid #cbd6e3; border-radius: 7px; background: white; color: #33465f; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms var(--ease-out); }
.btn .icon { width: 17px; height: 17px; }
.btn.primary { color: white; background: var(--blue); border-color: var(--blue); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--muted); }
.btn.danger { color: #b34e57; border-color: #edd3d6; }
.btn.small { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.intro h2 { margin: 0 0 9px; font-size: 24px; letter-spacing: -.4px; }
.intro p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.8; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; font-size: 14px; }
.field input, .field select, .field textarea, .search input { min-width: 0; width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #dce1e8; border-radius: 7px; outline: 0; background: white; transition: border-color 140ms ease, box-shadow 140ms ease; }
.field input:focus, .field select:focus, .field textarea:focus, .search input:focus { border-color: #94a5be; box-shadow: 0 0 0 3px #526d9710; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .search input:focus-visible { outline: 2px solid #c8d2e2; outline-offset: 2px; }
.field textarea { min-height: 100px; resize: vertical; }
.field small { font-size: 12px; color: var(--muted); line-height: 1.7; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.check-row { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0; font-size: 13px; line-height: 1.8; }
.check-row input { flex-shrink: 0; margin: 5px 0 0; accent-color: var(--blue); }
.project-scopes { margin: 14px 0 22px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 8px; }
.project-scopes legend { padding: 0 7px; color: var(--muted); font-size: 12px; }
.search { position: relative; display: block; flex: 1; min-width: 0; max-width: 380px; }
.search input { padding-left: 36px; font-size: 13px; }
.search > .icon { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; transform: translateY(-50%); color: #8390a3; pointer-events: none; }
.search.compact { max-width: 255px; width: 235px; }
.compact input { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
.compact input:focus-visible { outline-offset: 1px; }

/* Fixed workspace: only project and activity viewports scroll. */
.main[data-view=dashboard], .main[data-view=projects] { display: flex; flex-direction: column; overflow: hidden; padding: 18px 20px; --dock-height: 124px; }
.dashboard-greeting { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; min-height: 32px; margin-bottom: 12px; }
.page-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dashboard-greeting h2 { margin: 0; color: #1e3047; font-size: 22px; letter-spacing: -.3px; }
.page-title > span { padding-left: 14px; border-left: 1px solid #c8d5e4; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-date { color: var(--muted); font-size: 12px; white-space: nowrap; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex-shrink: 0; gap: 12px; margin-bottom: 14px; }
.stat-card { display: flex; align-items: center; gap: 13px; min-height: 84px; padding: 13px 18px; border: 1px solid #d2deef; border-radius: 10px; background: #edf3fc; }
.stat-card:has(.stat-icon.green) { background: #eaf4ef; border-color: #d0e3da; }
.stat-card:has(.stat-icon.orange) { background: #fbf3e7; border-color: #e8dbc5; }
.stat-card:has(.stat-icon.purple) { background: #f1edf8; border-color: #dcd4e9; }
.stat-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; }
.stat-icon .icon { width: 21px; height: 21px; }
.stat-icon.blue { color: #4c75c5; background: #e0eafb; }
.stat-icon.green { color: #3b8a72; background: #deede5; }
.stat-icon.orange { color: #b1823c; background: #f4e8d4; }
.stat-icon.purple { color: #8568ad; background: #e8e1f2; }
.stat-label { display: block; color: #40536c; font-size: 12px; }
.stat-card strong { display: block; margin-top: 3px; color: #172c45; font-size: 25px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dashboard-columns { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(270px, 24vw, 350px); flex: 1; min-height: 0; gap: 12px; }
.dashboard-columns.projects-layout { grid-template-columns: minmax(0, 1fr); }
.dashboard-primary { display: grid; grid-template-rows: minmax(0, 1fr) var(--dock-height); min-width: 0; min-height: 0; gap: 12px; }
.dashboard-aside { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 12px; }
.card { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 10px; background: white; overflow: hidden; }
.dashboard-columns .card { margin-bottom: 0; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 22px; border-bottom: 1px solid var(--line); background: #f1f5fa; }
.card-title h2 { margin: 0; font-size: 16px; }
.card-body { padding: 22px; }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; }
.panel-top h2 { margin: 0; color: #263b55; font-size: 16px; }
.panel-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.project-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-color: #ccd8e6; background: white; }
.project-panel-header { flex-shrink: 0; padding: 15px 18px 10px; background: white; }
.project-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.project-panel-heading h2 { margin: 0; font-size: 17px; color: #253b56; white-space: nowrap; }
.project-panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; }
.project-tabs { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid #e0e7f0; border-radius: 7px; background: #eef3f8; }
.project-tabs .tab { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 9px; border: 0; border-radius: 5px; color: #52657d; background: transparent; font-size: 12px; white-space: nowrap; }
.project-tabs .tab.active { color: #224c88; background: white; box-shadow: 0 1px 3px #203a5c12; font-weight: 600; }
.tab-count { padding: 0 4px; border-radius: 3px; color: #546782; font-size: 10px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.tab.active .tab-count { background: #e7effb; color: #315d9b; }
.project-result-count { color: #64768d; font-size: 11px; white-space: nowrap; }
.project-scroll { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid #e4ebf3; scrollbar-width: thin; scrollbar-color: #bfccdb transparent; overscroll-behavior: contain; }
.project-scroll:focus-visible, .activity-viewport:focus-visible { outline: 2px solid #b9cbe3; outline-offset: -2px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 15px 20px; border-bottom: 1px solid #e8edf4; text-align: left; font-size: 13px; }
th { color: #40536b; background: #eaf0f7; font-weight: 600; font-size: 12px; }
td small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
tr:last-child td { border-bottom: 0; }
.project-table { min-width: 660px; background: white; }
.project-table th, .project-table td { padding: 12px 10px; }
.project-table th { position: sticky; top: 0; z-index: 1; height: 38px; padding-top: 9px; padding-bottom: 9px; border-bottom-color: #e2e9f1; color: #536981; background: white; font-size: 11px; font-weight: 500; }
.project-table th:first-child, .project-table td:first-child { padding-left: 18px; }
.project-table th:last-child, .project-table td:last-child { padding-right: 18px; }
.project-table tr.is-selected { background: #edf4fd; }
.project-name-cell { display: flex; align-items: center; gap: 10px; min-width: 145px; max-width: 260px; }
.project-mini-mark { display: grid; place-items: center; flex-shrink: 0; width: 31px; height: 31px; border-radius: 7px; color: #587dbe; background: #edf3fe; }
.project-mini-mark .icon { width: 17px; height: 17px; }
.project-mini-mark.color-1 { color: #9671ba; background: #f5effc; }
.project-mini-mark.color-2 { color: #4b9c86; background: #edf8f3; }
.project-mini-mark.color-3 { color: #bb7981; background: #fcf0f2; }
.project-select { display: block; min-width: 0; max-width: 190px; padding: 0; border: 0; background: transparent; text-align: left; color: #253a54; }
.project-select strong { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.project-select small { max-width: 185px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.project-pinned-mark { display: inline-flex; flex-shrink: 0; color: #4f74af; }
.project-pinned-mark .icon { width: 12px; height: 12px; }
.project-addresses { display: flex; flex-direction: column; gap: 5px; min-width: 150px; max-width: 240px; }
.domain-link { display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; color: #365e9f; font-size: 11px; }
.domain-link .icon { width: 11px; height: 11px; }
.address-kind { flex-shrink: 0; min-width: 26px; padding: 0 3px; border-radius: 3px; background: #eef2f7; color: #61738a; font-size: 9px; line-height: 1.8; text-align: center; }
.address-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.address-missing, .domain-link[aria-disabled=true] { color: #8190a3; }
.project-last-visit { color: #516580; font-size: 11px; }
.row-actions { display: flex; align-items: center; gap: 6px; }
.project-table .btn.small { min-height: 31px; padding: 5px 8px; font-size: 11px; }
.pin-button { display: grid; place-items: center; flex-shrink: 0; width: 29px; height: 31px; padding: 0; border: 1px solid transparent; border-radius: 5px; color: #8393aa; background: transparent; }
.pin-button .icon { width: 16px; height: 16px; transform: rotate(35deg); }
.pin-button.is-pinned { color: #2c61b6; background: #e5eefb; border-color: #d0def1; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 5px; color: #286c50; background: #e3f3e9; font-size: 10px; font-weight: 500; white-space: nowrap; }
.pill.blue { color: #315b91; background: #e5edfa; }
.pill.neutral { color: #516174; background: #eaf0f5; }
.pill.warning { color: #835d20; background: #faefd9; }
.activity-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.activity-panel .panel-top { flex-shrink: 0; border-bottom: 1px solid #e5ebf3; }
.activity-viewport { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.activity-columns, .activity-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; column-gap: 9px; align-items: start; }
.activity-columns { position: sticky; top: 0; z-index: 1; padding: 10px 14px; border-bottom: 1px solid #edf1f6; background: white; color: #6a7b90; font-size: 11px; }
.activity-columns > :last-child { text-align: right; }
.activity-list { padding: 0 14px; margin: 0; list-style: none; }
.activity-row { padding: 9px 0; border-bottom: 1px solid #edf1f6; font-size: 11px; line-height: 1.65; }
.activity-user { color: #324963; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-action { color: #52667e; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.activity-time { color: #71829a; font-size: 10px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.empty-inline { padding: 18px 14px; color: var(--muted); font-size: 12px; }
.activity-panel .panel-top .btn, .message-panel .panel-top .btn { min-height: 29px; padding: 4px 9px; font-size: 11px; }
.message-panel { display: flex; flex-direction: column; flex: 0 0 clamp(150px, 36%, 270px); min-height: 0; }
.message-panel .panel-top { flex-shrink: 0; padding: 13px 16px; border-bottom: 1px solid #e5ebf3; }
.message-panel .panel-top h2 { display: flex; align-items: center; gap: 8px; }
.message-count { padding: 1px 5px; border-radius: 4px; background: #edf2f8; color: #678099; font-size: 10px; font-weight: 400; }
.message-status { display: inline-flex; align-items: center; flex-shrink: 0; padding: 2px 6px; border: 1px solid transparent; border-radius: 4px; font-size: 10px; line-height: 1.7; white-space: nowrap; }
.message-status.amber { color: #926819; background: #fff2d8; border-color: #f0dfb7; }
.message-status.blue { color: #3863a9; background: #eaf1fd; border-color: #d6e3f7; }
.message-status.green { color: #2f7957; background: #e8f5ec; border-color: #cfe8d8; }
.message-status.red { color: #ae4a58; background: #fbecee; border-color: #efd1d7; }
.message-viewport { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.message-viewport:focus-visible { outline: 2px solid #b9cbe3; outline-offset: -2px; }
.message-list { margin: 0; padding: 0 14px; list-style: none; }
.message-row { padding: 10px 0; border-bottom: 1px solid #edf1f6; }
.message-row:last-child { border: 0; }
.message-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.message-row time { color: #798ba1; font-size: 10px; font-variant-numeric: tabular-nums; }
.message-title { display: block; color: #344f70; font-size: 12px; line-height: 1.7; }
.message-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; color: #7a8da4; font-size: 10px; }
.message-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-empty { padding: 18px 14px; color: #7a8da4; font-size: 12px; }
.project-dock { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-row: 2; min-width: 0; min-height: 0; gap: 12px; }
.project-dock.details-only { grid-template-columns: minmax(0, 1fr); }
.identity-panel, .project-details { min-width: 0; padding: 13px 16px; }
.dock-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.dock-heading h3 { margin: 0; color: #304760; font-size: 13px; white-space: nowrap; }
.identity-values { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 12px; }
.identity-values strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-values > span { flex-shrink: 0; color: #64768d; font-size: 11px; }
.identity-panel .text-button { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.identity-panel .text-button .icon { width: 13px; height: 13px; }
.project-detail-selection { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #42689c; font-size: 12px; }
.project-detail-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.project-detail-fields > div { min-width: 0; }
.project-detail-fields dt { margin-bottom: 4px; color: #74849a; font-size: 10px; }
.project-detail-fields dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #344d69; font-size: 11px; }
.project-detail-description { margin: 9px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #667990; font-size: 11px; }
.detail-placeholder { margin: 21px 0 0; color: #79899d; font-size: 12px; }
.workspace-view-switch { display: none; }
.status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-list { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; margin: 0 0 24px; font-size: 13px; }
.settings-list dt { color: var(--muted); }
.settings-list dd { margin: 0; overflow-wrap: anywhere; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.settings-row:last-child { border: 0; }
.notice { margin-bottom: 20px; padding: 13px 16px; border: 1px solid #dce5f1; border-radius: 8px; background: #f5f8fc; color: #5c7090; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.notice.error { border-color: #efd9dc; color: #a9505c; background: #fff6f7; }
.notice.warning { border-color: #eee1c8; color: #967c4e; background: #fffbf2; }
.notice small { display: block; margin-top: 5px; font-size: 11px; }
.text-meta { color: var(--muted); font-size: 12px; line-height: 1.8; }
.code { padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #edf2f8; font: 12px/1.8 var(--font-ui); font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere; }
textarea.code { width: 100%; outline: 0; }
.empty { padding: 48px 24px; text-align: center; }
.empty .icon { width: 28px; height: 28px; color: #afbac9; }
.empty h3 { margin: 15px 0 9px; color: #526278; font-size: 16px; }
.empty p { max-width: 440px; margin: 0 auto 18px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.no-org { max-width: 680px; margin: 60px auto; padding: 32px; }

/* Native dialogs keep their focus trap; only pointer entry gets a short transition. */
dialog { width: min(600px, calc(100vw - 40px)); max-height: calc(100dvh - 64px); padding: 0; border: 1px solid #e3e7ee; border-radius: 14px; box-shadow: 0 20px 64px #17253d18; color: var(--ink); }
dialog::backdrop { background: #18243842; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 24px; border-bottom: 1px solid var(--line); background: #edf2f8; }
.dialog-head h2 { margin: 0; font-size: 18px; }
.dialog-body { padding: 24px; }
.dialog-body > p:first-child { margin-top: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; border-top: 1px solid var(--line); }
dialog[open][data-motion=pointer] { opacity: 1; transform: translateY(0) scale(1); transition: opacity 160ms var(--ease-out), transform 180ms var(--ease-out); }
@starting-style { dialog[open][data-motion=pointer] { opacity: 0; transform: translateY(5px) scale(.985); } }
#toasts { position: fixed; bottom: 24px; right: 24px; z-index: 50; max-width: min(420px, calc(100vw - 32px)); }
.toast { padding: 13px 18px; border: 1px solid #d8e8df; border-radius: 9px; background: #f5fcf8; box-shadow: 0 8px 24px #223b3510; color: #3e7d60; font-size: 13px; line-height: 1.7; opacity: 1; transition: opacity 140ms ease; }
.toast.error { color: #a9505c; border-color: #ecd8dc; background: #fff8f9; }
@starting-style { .toast { opacity: 0; } }
.login-layout { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #e7eef6; }
.login-main { width: 100%; max-width: 440px; }
.login-main .brand { justify-content: center; padding: 0 0 28px; }
.login-content { padding: 36px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 8px 32px #1f2d4406; }
.login-content h2 { margin: 0 0 12px; color: #263349; font-size: 24px; letter-spacing: -.4px; }
.login-content p { margin: 0 0 28px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.login-content .btn { width: 100%; min-height: 44px; }
.login-foot { margin-top: 24px; color: var(--muted); font-size: 11px; text-align: center; }
.login-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.login-content .login-caption { margin: 20px 0 0; font-size: 12px; line-height: 1.8; }

@media (hover: hover) and (pointer: fine) {
  .nav-item:hover { background: #f0f3f8; color: #35455e; }
  .nav-item[aria-current=page]:hover { background: #e5edfc; color: #2858bd; }
  .btn:hover { background: #f7f8fa; border-color: #ccd4df; }
  .btn.primary:hover { background: #2659c8; border-color: #2659c8; }
  .btn.quiet:hover, .notification-button:hover { background: #f3f5f8; }
  .btn:not(:disabled):active:not(:focus-visible) { transform: scale(.985); }
  .project-tabs .tab:not(.active):hover { background: #f5f8fc; color: #334f76; }
  .pin-button:hover { background: #eaf1fc; color: #2c61b6; }
  .org-menu > button:hover { background: #f1f5fb; }
  .text-button:hover, .domain-link:not([aria-disabled=true]):hover { color: #254f9e; }
  .project-table tbody tr:not(.is-selected):hover { background: #f7faff; }
}
@media (max-width: 1450px) and (min-width: 1101px) {
  .main[data-view=dashboard] .project-table th:nth-child(4), .main[data-view=dashboard] .project-table td:nth-child(4) { display: none; }
  .main[data-view=dashboard] .project-table { min-width: 560px; }
}
@media (max-width: 1100px) {
  .dashboard-columns { grid-template-columns: minmax(0, 1fr); }
  .dashboard-aside { position: absolute; inset: 0 0 calc(var(--dock-height) + 12px); display: none; }
  .dashboard-columns[data-workspace-mode=activity] .dashboard-aside { display: flex; }
  .dashboard-columns[data-workspace-mode=activity]:not(.projects-layout) .project-panel { visibility: hidden; }
  .workspace-view-switch { display: flex; flex-shrink: 0; align-self: flex-start; gap: 3px; margin-bottom: 10px; padding: 3px; border: 1px solid #d3deeb; border-radius: 7px; background: #e1eaf5; }
  .workspace-view-switch button { padding: 4px 12px; border: 0; border-radius: 5px; color: #526982; background: transparent; font-size: 11px; }
  .workspace-view-switch button[aria-pressed=true] { color: #2c568d; background: white; }
  .global-search kbd, .account-name, .dashboard-date { display: none; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; z-index: 30; left: 0; top: 0; width: min(272px, 84vw); height: 100dvh; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-100%); visibility: hidden; transition: transform 200ms cubic-bezier(.32, .72, 0, 1), visibility 0s linear 200ms; }
  .sidebar.open { transform: translateX(0); visibility: visible; box-shadow: 12px 0 32px #15263b24; transition: transform 200ms cubic-bezier(.32, .72, 0, 1), visibility 0s; }
  .sidebar .brand { padding-right: 4px; }
  .sidebar-close { display: grid; }
  .sidebar-shade { touch-action: none; }
  .sidebar[data-motion=keyboard] { transition: none; }
  .sidebar-shade { position: fixed; inset: 0; z-index: 20; border: 0; background: #15263b42; }
  .btn.mobile-menu { display: inline-flex; min-width: 33px; padding: 7px; }
  .topbar { gap: 10px; min-height: 60px; padding: 10px 14px; }
  .main { padding: 20px; }
  .main[data-view=dashboard], .main[data-view=projects] { padding: 14px 16px; }
  .intro { flex-wrap: wrap; }
  .form-grid { grid-template-columns: 1fr; }
  .project-dock { grid-template-columns: 190px minmax(0, 1fr); }
}
@media (max-width: 660px) {
  .topbar { gap: 8px; padding: 10px 12px; }
  .global-search { min-width: 0; gap: 5px; padding: 0 8px; height: 36px; }
  .global-search input { font-size: 12px; }
  .account-area { gap: 5px; }
  .account-avatar, .notification-button, .top-org > .icon:first-child { display: none; }
  .top-org { max-width: 105px; min-height: 35px; padding: 6px; font-size: 11px; gap: 5px; }
  .org-menu { right: -35px; width: min(270px, calc(100vw - 24px)); }
  .account-area [data-logout] { width: 31px; padding: 7px; font-size: 0; gap: 0; }
  .main[data-view=dashboard] { --dock-height: 190px; padding: 12px; }
  .main[data-view=projects] { --dock-height: 120px; padding: 12px; }
  .dashboard-greeting { margin-bottom: 10px; min-height: 28px; }
  .dashboard-greeting h2 { font-size: 19px; }
  .page-title { gap: 10px; }
  .page-title > span { padding-left: 10px; font-size: 11px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .stat-card { gap: 10px; min-height: 64px; padding: 10px 12px; }
  .stat-icon { width: 28px; height: 28px; }
  .stat-icon .icon { width: 17px; height: 17px; }
  .stat-label { font-size: 10px; }
  .stat-card strong { font-size: 22px; }
  .dashboard-primary { gap: 8px; }
  .dashboard-aside { bottom: calc(var(--dock-height) + 8px); }
  .project-panel-header { padding: 12px 12px 9px; }
  .project-panel-heading { flex-wrap: wrap; gap: 10px; }
  .project-panel-heading h2 { font-size: 15px; }
  .panel-actions { width: 100%; gap: 8px; }
  .search.compact { width: auto; max-width: none; }
  .project-panel-toolbar { gap: 8px; margin-top: 10px; }
  .project-tabs .tab { gap: 4px; padding: 4px 6px; font-size: 11px; }
  .project-result-count { font-size: 10px; }
  .project-table, .project-table tbody { display: block; min-width: 0; white-space: normal; }
  .project-table thead { display: none; }
  .project-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; border-bottom: 1px solid #e5ebf3; }
  .project-table tr:last-child { border: 0; }
  .project-table td { padding: 5px 0; border: 0; }
  .project-table td:first-child, .project-table td:last-child { padding-left: 0; padding-right: 0; }
  .project-table td:nth-child(2) { grid-column: 1/-1; grid-row: 2; }
  .project-table td:nth-child(3) { display: flex; align-items: center; justify-content: flex-end; grid-column: 2; grid-row: 1; }
  .project-table td:nth-child(4) { display: none; }
  .project-table td:nth-child(5) { grid-column: 1/-1; }
  .project-name-cell { min-width: 0; max-width: none; }
  .project-select small { max-width: 190px; }
  .project-addresses { max-width: none; gap: 4px; }
  .project-table .btn.small { flex: 1; min-height: 34px; font-size: 11px; }
  .pin-button { width: 32px; height: 34px; }
  .project-dock { grid-template-columns: minmax(0, 1fr); grid-template-rows: 65px minmax(0, 1fr); gap: 8px; }
  .project-dock.details-only { grid-template-rows: minmax(0, 1fr); }
  .identity-panel { position: relative; padding: 9px 12px; }
  .identity-panel .dock-heading { justify-content: flex-start; gap: 8px; margin-bottom: 6px; }
  .identity-values { justify-content: flex-start; margin: 0; max-width: calc(100% - 70px); gap: 8px; font-size: 11px; }
  .identity-panel .text-button { position: absolute; right: 12px; bottom: 12px; }
  .project-details { padding: 10px 12px; }
  .dock-heading { margin-bottom: 8px; }
  .project-detail-fields { gap: 8px; }
  .project-detail-fields dd { font-size: 10px; }
  .project-detail-description { margin-top: 7px; font-size: 10px; }
  .detail-placeholder { margin-top: 17px; font-size: 11px; }
  .settings-list { grid-template-columns: 94px minmax(0, 1fr); gap: 16px; font-size: 12px; }
  .status-grid { grid-template-columns: 1fr; }
  .card-body { padding: 20px; }
  th, td { padding: 14px 16px; }
  dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 40px); border-radius: 12px; }
  .dialog-head { padding: 16px 20px; }
  .dialog-body { padding: 20px; }
  .login-layout { padding: 28px 20px; }
  .login-content { padding: 28px; }
}
@media (max-height: 620px) {
  .main[data-view=dashboard] .stats-grid { display: none; }
  .dashboard-aside { overflow: auto; }
  .activity-panel { flex: 0 0 180px; }
  .message-panel { flex: 0 0 150px; }
}
/* Phones and short landscape screens: the fixed workspace left ~80px for the project list.
   Here the main area scrolls as one page, the project list shows at full height, the
   workspace switch stays reachable at the top and the selected project's details stay
   docked at the bottom of the screen (only once a project is selected). */
@media (max-width: 660px), (max-height: 540px) and (max-width: 1100px) {
  .main[data-view=dashboard], .main[data-view=projects] { display: block; overflow-y: auto; overscroll-behavior-y: contain; padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); scroll-padding-bottom: 96px; }
  .dashboard-greeting { margin-bottom: 10px; }
  .main[data-view=dashboard] .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
  .stat-card { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 0; padding: 8px 10px; border-radius: 8px; }
  .stat-icon { display: none; }
  .stat-label { order: 2; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
  .stat-card strong { margin: 0; font-size: 19px; }
  .stat-card > div { display: flex; flex-direction: column-reverse; min-width: 0; max-width: 100%; }
  .workspace-view-switch { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: 1fr 1fr; align-self: stretch; margin: 0 -12px 10px; padding: 8px 12px; border: 0; border-radius: 0; background: #eaf0f6; box-shadow: 0 1px 0 #d2dce8; }
  .workspace-view-switch button { min-height: 36px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; }
  .workspace-view-switch button[aria-pressed=true] { border-color: #cbd8e8; color: #1f4f8e; background: white; font-weight: 600; box-shadow: 0 1px 2px #203a5c10; }
  .dashboard-columns, .dashboard-columns.projects-layout { display: block; }
  .dashboard-primary { display: flex; flex-direction: column; gap: 10px; }
  .dashboard-columns[data-workspace-mode=activity]:not(.projects-layout) .dashboard-primary { display: none; }
  .dashboard-columns[data-workspace-mode=activity]:not(.projects-layout) .project-panel { visibility: visible; }
  .dashboard-aside { position: static; display: none; overflow: visible; gap: 10px; }
  .dashboard-columns[data-workspace-mode=activity] .dashboard-aside { display: flex; }
  .project-panel { overflow: visible; }
  .project-panel-header { border-radius: 10px 10px 0 0; }
  .project-scroll { flex: none; overflow: visible; }
  .project-table { border-radius: 0 0 10px 10px; }
  .project-dock, .project-dock.details-only { display: contents; }
  .project-details { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 5; order: 1; padding: 10px 14px; border-color: #b9cde6; box-shadow: 0 8px 28px #1b2f4a26; }
  .project-details:has(.detail-placeholder) { display: none; }
  .project-details .dock-heading { margin-bottom: 6px; }
  .identity-panel { order: 2; position: static; padding: 12px 14px; }
  .identity-panel .dock-heading { justify-content: flex-start; gap: 8px; margin-bottom: 6px; }
  .identity-values { justify-content: flex-start; max-width: none; margin: 0 0 6px; font-size: 12px; }
  .identity-panel .text-button { position: static; font-size: 12px; }
  .activity-panel, .message-panel { flex: none; }
  .activity-viewport, .message-viewport { flex: none; overflow: visible; }
  .activity-columns { position: static; }
  .activity-row { font-size: 12px; }
  .message-title { font-size: 13px; }
}
@media (max-width: 660px) {
  .project-table tr { padding: 12px 14px; }
  .project-select strong { font-size: 14px; }
  .project-select small { max-width: none; font-size: 12px; }
  .domain-link { font-size: 12px; }
  .project-table .btn.small { min-height: 38px; font-size: 12px; }
  .pin-button { width: 38px; height: 38px; }
  .project-tabs { flex: 1; min-width: 0; }
  .project-tabs .tab { flex: 1; justify-content: center; min-height: 32px; }
  .project-panel-toolbar { flex-wrap: wrap; }
  .project-detail-fields dd { font-size: 12px; }
  .project-detail-fields dt { font-size: 11px; }
  .project-detail-description { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Health information replaces the identity and project-detail dock. */
.main[data-view=dashboard]{--dock-height:190px}
.main[data-view=projects],.main[data-view=health]{--dock-height:clamp(275px,35vh,360px)}
.main[data-view=health]{display:flex;flex-direction:column;overflow:hidden;padding:18px 20px}
.health-dock{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border-color:#d5deea;background:#fff}
.health-heading{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid #e6ecf3;background:#f9fbfd;flex-shrink:0}
.health-heading h3{margin:0;color:#2d435e;font-size:14px;font-weight:600}
.health-heading>span{font-size:12px;color:#62748b;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.health-heading>a,.health-heading>.panel-actions{margin-left:auto}
.health-overview-body{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(0,1.1fr);gap:22px;padding:14px 16px;min-height:0;flex:1}
.health-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-content:center}
.health-kpis>div{display:flex;flex-direction:column;gap:6px}.health-kpis span{font-size:11px;color:#5a6d84}.health-kpis strong{font-size:25px;font-weight:600;color:#233c58;font-variant-numeric:tabular-nums}.health-kpis strong small{font-size:12px;font-weight:400}
.health-kpi-label.green{color:#178066}.health-kpi-label.yellow{color:#a76a19}.health-kpi-label.red{color:#bb4754}
.health-pill{display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border-radius:6px;font-size:11px;font-weight:500;white-space:nowrap;background:#edf1f5;color:#66768a}
.health-pill.green{background:#e6f4ee;color:#147c5b}.health-pill.yellow{background:#fff2da;color:#946414}.health-pill.red{background:#fce9ed;color:#b7384c}
.health-attention{display:flex;flex-direction:column;min-height:0;border-left:1px solid #e5ebf2;padding-left:20px}.health-attention h4,.health-detail-bottom h4{margin:0 0 9px;font-size:12px;font-weight:600;color:#415672}.health-attention h4 span{margin-left:6px;color:#7b8aa0}.health-attention-scroll{overflow:auto;min-height:0;scrollbar-width:thin}.health-attention-scroll a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:7px 0;color:inherit;text-decoration:none;border-bottom:1px solid #eef2f7;font-size:12px}.health-attention-scroll a>span:last-child{grid-column:1/-1;color:#65768c;font-size:11px}.health-empty{color:#6b7c91;font-size:12px;margin:12px 0}
.health-detail-scroll{overflow:auto;min-height:0;padding:12px 16px;scrollbar-width:thin;overscroll-behavior:contain}.health-detail-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11px;color:#65788f;margin-bottom:12px}
.health-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.health-metric{display:flex;flex-direction:column;gap:5px;background:#f5f8fc;border:1px solid #e5ebf3;border-radius:8px;padding:10px;min-width:0}.health-metric>span{font-size:11px;color:#586f88}.health-metric strong{font-size:14px;font-weight:600;color:#29435f}.health-metric small{font-size:10px;color:#728198;overflow-wrap:anywhere}.health-issues{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.health-issue{font-size:11px;padding:5px 8px;border-radius:5px;background:#fff2da;color:#906214}.health-issue.red{background:#fce9ed;color:#b7384c}
.health-detail-bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:14px}.health-detail-bottom>section{min-width:0}.health-timeline>div{display:grid;grid-template-columns:84px 52px minmax(0,1fr);gap:8px;font-size:10px;align-items:center;padding:5px 0;border-bottom:1px solid #eef2f7}.health-timeline>div>span:last-child{color:#65768c;overflow-wrap:anywhere}.health-timeline time{color:#6a7e94}.health-history-row{display:flex;gap:12px;justify-content:space-between;font-size:11px;color:#415672;padding:6px 0;margin:0;border-bottom:1px solid #eef2f7}.health-history-row time{flex-shrink:0;font-size:10px;color:#71839a}.health-error{color:#b7384c;font-size:12px}
.project-table th:nth-child(4),.project-table td:nth-child(4){display:table-cell!important}.project-table{min-width:700px}
@media(max-width:1100px){.health-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.health-overview-body{grid-template-columns:minmax(230px,.8fr) minmax(0,1fr);gap:12px}.health-attention{padding-left:12px}}
@media(max-width:700px){.main[data-view=dashboard]{--dock-height:210px}.health-overview-body{display:flex;flex-direction:column;gap:12px}.health-attention{border-left:0;padding-left:0;border-top:1px solid #e5ebf2;padding-top:10px}.health-kpis strong{font-size:20px}.health-detail-bottom{grid-template-columns:1fr}.health-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.health-expanded{min-height:300px;max-height:46vh}.main[data-view=projects],.main[data-view=health]{--dock-height:clamp(240px,40vh,360px)}}

/* ---------- 2026-10-15 fixes ---------- */
/* Row actions: buttons in one group with clear spacing (member and invitation rows). */
.row-actions { gap: 10px; flex-wrap: nowrap; }
td > .row-actions { justify-content: flex-start; }

/* Stat cards: value with its context (ratio, breakdown bar, short legend) on a neutral surface. */
.stats-grid .stat-card, .stats-grid .stat-card:has(.stat-icon.green), .stats-grid .stat-card:has(.stat-icon.orange), .stats-grid .stat-card:has(.stat-icon.purple) { display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-height: 0; padding: 12px 16px 12px; border: 1px solid #dbe3ee; border-radius: 10px; background: #fff; }
.stat-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.stat-head .stat-icon { width: 24px; height: 24px; border-radius: 6px; }
.stat-head .stat-icon .icon { width: 15px; height: 15px; }
.stat-head .stat-label { font-size: 12px; color: #4b5f78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.stats-grid .stat-value strong { margin: 0; font-size: 22px; line-height: 1.15; color: #172c45; font-variant-numeric: tabular-nums; }
.stat-total { font-size: 13px; color: #6a7c92; font-variant-numeric: tabular-nums; }
.stat-unit { font-size: 12px; color: #6a7c92; }
.stat-bar { display: flex; gap: 2px; height: 6px; border-radius: 3px; background: #edf1f6; overflow: hidden; }
.stat-bar i { display: block; flex: 0 0 auto; min-width: 4px; height: 100%; }
.stat-bar i:first-child { border-radius: 3px 0 0 3px; } .stat-bar i:last-child { border-radius: 0 3px 3px 0; } .stat-bar i:only-child { border-radius: 3px; }
.stat-bar .green, .dot.green { background: #2f9a73; }
.stat-bar .amber, .dot.amber { background: #d6a03e; }
.stat-bar .red, .dot.red { background: #d0566a; }
.stat-bar .blue, .dot.blue { background: #5b83d6; }
.stat-bar .gray, .dot.gray { background: #b6c2d1; }
.stat-bar .muted, .dot.muted { background: #dde3eb; }
.stat-meta { display: flex; flex-wrap: wrap; gap: 3px 12px; min-width: 0; font-size: 11px; line-height: 1.5; color: #55687f; }
.stat-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }

/* Health overview: one distribution of all sites + the nearest certificate expiry with its site. */
.health-overview .health-kpis { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; align-content: center; }
.health-overview .health-kpis > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.health-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.health-overview .health-kpis span { font-size: 11px; color: #5a6d84; }
.health-overview .health-kpis strong { font-size: 20px; font-weight: 600; line-height: 1.2; color: #233c58; font-variant-numeric: tabular-nums; }
.health-overview .health-kpis strong small { font-size: 12px; font-weight: 400; color: #6a7c92; }
.health-overview .stat-meta span { font-size: 11px; color: #55687f; }
.health-cert { padding-left: 16px; border-left: 1px solid #e5ebf2; }
.health-cert strong.warn { color: #a76a19; }
.health-cert em { font-style: normal; font-size: 11px; color: #6a7c92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* System status: one summary card with three items in context. */
.status-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.status-summary-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px 20px; }
.status-summary-item + .status-summary-item { border-left: 1px solid var(--line); }
.status-summary-item > div { min-width: 0; }
.status-summary-item strong { display: block; margin: 2px 0; color: #172c45; font-size: 18px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.status-summary-item small { display: block; color: var(--muted); font-size: 11px; }
.status-summary .stat-icon { width: 32px; height: 32px; border-radius: 8px; }

/* Role dropdown in dialogs: same component as the organization switcher menu. */
.select-menu { position: relative; }
.select-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; opacity: 0; pointer-events: none; }
.select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 7px 12px; border: 1px solid #dce5f0; border-radius: 7px; background: #edf3fa; color: #354e6c; text-align: left; transition: background-color 140ms ease, border-color 140ms ease; }
.select-trigger > span, .select-options > button > span { min-width: 0; }
.select-trigger strong { display: block; font-size: 13px; font-weight: 500; color: #2a4363; }
.select-trigger small { display: block; margin-top: 2px; color: #7588a0; font-size: 11px; }
.select-trigger > .icon { width: 14px; height: 14px; color: #637c9c; transition: transform 140ms ease; }
.select-menu[data-open] .select-trigger { background: white; border-color: #b7cbe4; }
.select-menu[data-open] .select-trigger > .icon { transform: rotate(180deg); }
.select-trigger:focus-visible { outline: 2px solid #aabbd6; outline-offset: 2px; }
.org-menu.select-options { top: calc(100% + 6px); left: 0; right: 0; width: auto; z-index: 5; }
.select-options > button:focus-visible { outline: 2px solid #aabbd6; outline-offset: -2px; }
.select-options > button:disabled { opacity: .5; cursor: default; }
.select-menu[data-open][data-motion=pointer] .select-options { opacity: 1; transform: translateY(0); transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out); }
@starting-style { .select-menu[data-open][data-motion=pointer] .select-options { opacity: 0; transform: translateY(-4px); } }
@media (hover: hover) and (pointer: fine) { .select-trigger:hover { border-color: #b7cbe4; } .select-options > button:hover:not(:disabled) { background: #f1f5fb; } }

@media (max-width: 1100px) { .status-summary { grid-template-columns: 1fr; } .status-summary-item + .status-summary-item { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 660px), (max-height: 540px) and (max-width: 1100px) {
  .main[data-view=dashboard] .stats-grid .stat-card { gap: 5px; padding: 8px 10px; }
  .stats-grid .stat-card > div { display: flex; flex-direction: row; }
  .stats-grid .stat-head .stat-icon, .stats-grid .stat-meta, .stat-total, .stat-unit { display: none; }
  .stats-grid .stat-value strong { font-size: 18px; }
  .stats-grid .stat-label { order: 0; font-size: 11px; }
  .health-overview .health-kpis { grid-template-columns: 1fr; }
  .health-cert { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .select-trigger > .icon { transition: none; } }

/* All form selects: single-line options, scrollable long lists, open upward near the bottom edge. */
.select-trigger { min-height: 42px; }
.org-menu.select-options { max-height: 300px; overflow: auto; overscroll-behavior: contain; }
.select-menu.drop-up .select-options { top: auto; bottom: calc(100% + 6px); }
.select-options > button { min-height: 36px; }

/* Expandable details (e.g. 排查详情 in the access log) use the same trigger and panel language. */
.main details:not(.org-switcher) > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 10px; border: 1px solid #dce5f0; border-radius: 7px; background: #edf3fa; color: #354e6c; font-size: 12px; cursor: pointer; list-style: none; transition: background-color 140ms ease, border-color 140ms ease; }
.main details:not(.org-switcher) > summary::-webkit-details-marker { display: none; }
.main details:not(.org-switcher) > summary::after { content: ""; width: 6px; height: 6px; margin: -3px 2px 0 2px; border-right: 1.5px solid #637c9c; border-bottom: 1.5px solid #637c9c; transform: rotate(45deg); transition: transform 140ms ease; }
.main details[open]:not(.org-switcher) > summary { background: white; border-color: #b7cbe4; }
.main details[open]:not(.org-switcher) > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.main details:not(.org-switcher) > .code { margin: 8px 0 0; border-color: #d5e0ed; background: white; box-shadow: 0 10px 28px #24395516; }
@media (hover: hover) and (pointer: fine) { .main details:not(.org-switcher) > summary:hover { border-color: #b7cbe4; } }
@media (prefers-reduced-motion: reduce) { .main details > summary, .main details > summary::after { transition: none; } }

/* =====================================================================
   PHONE LAYER (≤660px, and short landscape screens). Kept last in this
   file on purpose: it owns the phone layout, so desktop rules added later
   cannot override it. Scope agreed for phones: core tasks fully operable
   (status, health, approvals, entering a backend, sign-in); the other
   pages readable as stacked cards.
   ===================================================================== */
@media (max-width: 660px), (max-height: 540px) and (max-width: 1100px) {
  /* Page scrolls as a whole for dashboard, projects and health. */
  .main[data-view=dashboard], .main[data-view=projects], .main[data-view=health] { display: block; overflow-y: auto; overscroll-behavior-y: contain; padding: 12px 12px calc(20px + env(safe-area-inset-bottom)); }
  .main[data-view=health] .dashboard-columns, .main[data-view=projects] .dashboard-columns { display: block; }
  .dashboard-primary { display: flex; flex-direction: column; gap: 10px; }
  .health-dock, .health-dock.health-expanded { min-height: 0; max-height: none; overflow: visible; }
  .health-detail-scroll { overflow: visible; padding: 12px 14px; }
  .health-heading { flex-wrap: wrap; row-gap: 6px; padding: 12px 14px; }
  .health-heading > .panel-actions, .health-heading > a { margin-left: auto; }
  .health-expanded { scroll-margin-top: 8px; min-height: calc(100dvh - 96px) !important; }

  /* Stat cards: two per row with full context. */
  .main[data-view=dashboard] .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .stats-grid .stat-card, .stats-grid .stat-card:has(.stat-icon.green), .stats-grid .stat-card:has(.stat-icon.orange), .stats-grid .stat-card:has(.stat-icon.purple) { gap: 6px; padding: 10px 12px; }
  .stats-grid .stat-card > div { flex-direction: row; }
  .stats-grid .stat-head .stat-icon { display: grid; width: 20px; height: 20px; }
  .stats-grid .stat-head .stat-icon .icon { width: 13px; height: 13px; }
  .stats-grid .stat-label { font-size: 12px; }
  .stats-grid .stat-value strong { font-size: 20px; }
  .stats-grid .stat-total, .stats-grid .stat-unit { display: inline; }
  .stats-grid .stat-meta { display: flex; gap: 2px 10px; font-size: 11px; }

  /* Health overview on the dashboard. */
  .health-overview-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; }
  .health-overview .health-kpis { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
  .health-cert { padding-left: 14px; border-left: 1px solid #e5ebf2; }
  .health-attention { border-left: 0; padding-left: 0; border-top: 1px solid #e5ebf2; padding-top: 10px; }
  .health-attention-scroll { overflow: visible; }
  .health-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .health-detail-bottom { grid-template-columns: 1fr; gap: 14px; }
  .health-timeline > div { grid-template-columns: 76px 48px minmax(0, 1fr); }

  /* Project list: one card per project (6 columns: name, addresses, connection, health, last visit, actions). */
  .main .project-scroll { overflow: visible; }
  .main .project-table, .main .project-table tbody { display: block; width: 100%; min-width: 0 !important; white-space: normal; }
  .main .project-table thead { display: none; }
  .main .project-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 6px; padding: 14px; border-bottom: 1px solid #e5ebf3; }
  .main .project-table tr:last-child { border-bottom: 0; }
  .main .project-table td { display: block !important; min-width: 0; padding: 0 !important; border: 0; }
  .main .project-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .main .project-table td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .main .project-table td:nth-child(4) { grid-column: 3; grid-row: 1; }
  .main .project-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .main .project-table td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; font-size: 12px; color: #6a7c92; }
  .main .project-table td:nth-child(5)::before { content: "最近进入 "; color: #8a99ad; }
  .main .project-table td:nth-child(6) { grid-column: 1 / -1; grid-row: 4; }
  .main .project-name-cell { max-width: none; min-width: 0; }
  .main .project-select { max-width: none; }
  .main .project-select small { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .main .project-addresses { max-width: none; }
  .main .domain-link { max-width: 100%; font-size: 12px; }
  .main .project-table .row-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; gap: 8px; }
  .main .project-table .row-actions .btn.small { min-width: 0; min-height: 38px; font-size: 13px; }
  .main .project-table .pin-button { width: 38px; height: 38px; }

  /* Every other data table becomes stacked cards: "column: value" rows, the first column as title. */
  .main .card table:not(.project-table), .main .card table:not(.project-table) tbody, .main .card table:not(.project-table) tr { display: block; width: 100%; min-width: 0; white-space: normal; }
  .main .card table:not(.project-table) thead { display: none; }
  .main .card .table-wrap { overflow: visible; }
  .main .card table:not(.project-table) tr { padding: 12px 16px; border-bottom: 1px solid #e8edf4; }
  .main .card table:not(.project-table) tr:last-child { border-bottom: 0; }
  .main .card table:not(.project-table) td { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 4px 0; border: 0; font-size: 13px; overflow-wrap: anywhere; }
  .main .card table:not(.project-table) td::before { content: attr(data-label); color: #7a8ca2; font-size: 12px; }
  .main .card table:not(.project-table) td > * { grid-column: 2; }
  .main .card table:not(.project-table) td > small { margin-top: 0; }
  .main .card table:not(.project-table) td:first-child { display: block; padding: 0 0 6px; font-size: 14px; font-weight: 600; color: #1e3047; }
  .main .card table:not(.project-table) td:first-child::before { content: none; }
  .main .card table:not(.project-table) td:first-child small { font-weight: 400; }
  .main .card table:not(.project-table) td.cell-actions { display: block; padding-top: 10px; }
  .main .card table:not(.project-table) td.cell-actions::before { content: none; }
  .main .card table:not(.project-table) td.cell-actions .row-actions { flex-wrap: wrap; }
  .main .card table:not(.project-table) td .pill { justify-self: start; }
  .main .card table:not(.project-table) td details { min-width: 0; }
  .main .card table:not(.project-table) td details .code { max-width: 100%; }

  /* Page intro: title, description and primary action stacked; the action stays reachable. */
  .intro { flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .intro h2 { font-size: 20px; }
  .card-title { padding: 14px 16px; }
  .settings-list { grid-template-columns: 1fr; gap: 4px; }
  .settings-list dd { margin-bottom: 10px; }
  .status-summary-item { padding: 12px 16px; }
  .status-summary .stat-icon { display: grid; }

  /* Dialogs: nearly full width, comfortable touch targets. */
  dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 24px); }
  .dialog-body { padding: 16px; }
  .select-trigger { min-height: 46px; }
  .select-options > button { min-height: 42px; }
}
@media (max-width: 360px) {
  .main[data-view=dashboard] .stats-grid { gap: 6px; }
  .stats-grid .stat-card { padding: 9px 10px; }
  .stats-grid .stat-meta { gap: 2px 8px; }
  .main .card table:not(.project-table) td { grid-template-columns: 72px minmax(0, 1fr); }
  .main .project-table .row-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; gap: 6px; }
  .top-org { max-width: 92px; }
}