:root {
  --navy-950: #071426;
  --navy-900: #0b1d38;
  --navy-800: #102846;
  --navy-700: #203b5f;
  --ink: #101723;
  --muted: #687487;
  --muted-2: #8d96a5;
  --line: #e4e9ef;
  --line-strong: #d4dbe4;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #f1f4f7;
  --green: #0b8c4b;
  --green-bg: #eaf8f0;
  --red: #d6232f;
  --red-bg: #fff0f1;
  --amber: #b16a00;
  --amber-bg: #fff5df;
  --blue: #1464b4;
  --blue-bg: #eaf3ff;
  --shadow: 0 12px 35px rgba(14, 31, 55, .08);
  --shadow-soft: 0 3px 16px rgba(14, 31, 55, .055);
  --radius-lg: 18px;
  --radius-md: 13px;
  --radius-sm: 9px;
  --sidebar: 224px;
  --topbar: 76px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--surface);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--surface); }
body { min-width: 320px; font-size: 14px; line-height: 1.45; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; }
svg { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -.16em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }

.auth-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 15%, #f8fbff 0, #eef3f8 50%, #e7edf4 100%); }
.auth-card { width: min(470px, 100%); border: 1px solid rgba(202, 212, 224, .8); background: rgba(255,255,255,.96); border-radius: 24px; box-shadow: 0 28px 80px rgba(11,29,56,.16); padding: 34px; }
.auth-logo { display: block; width: 230px; max-width: 70%; margin: 0 auto 28px; }
.auth-card h1 { margin: 0 0 8px; font-size: 28px; letter-spacing: -.03em; }
.auth-card p { color: var(--muted); margin: 0 0 22px; }
.auth-security-note { margin-top: 22px; color: var(--muted-2); font-size: 12px; text-align: center; }
.auth-form { display: grid; gap: 14px; }
.auth-form .primary-button { margin-top: 6px; width: 100%; min-height: 46px; }

.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: var(--sidebar); display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--line); }
.sidebar-brand { min-height: var(--topbar); display: flex; align-items: center; padding: 13px 18px 10px; border-bottom: 1px solid transparent; }
.sidebar-brand img { width: 164px; max-height: 56px; object-fit: contain; object-position: left center; }
.sidebar-close { display: none !important; margin-left: auto; }
.main-nav { flex: 1; overflow-y: auto; padding: 10px 10px; scrollbar-width: thin; }
.nav-item { width: 100%; min-height: 43px; display: grid; grid-template-columns: 12px 25px minmax(0,1fr) auto; align-items: center; gap: 6px; padding: 7px 8px 7px 5px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; transition: background .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease; }
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: linear-gradient(135deg, var(--navy-950), var(--navy-800)); color: #fff; box-shadow: 0 5px 12px rgba(11,29,56,.18); }
.nav-drag-handle { width: 12px; height: 24px; display: grid; grid-template-columns: repeat(2,3px); grid-template-rows: repeat(3,3px); place-content: center; gap: 2px; border-radius: 5px; opacity: .28; cursor: grab; touch-action: none; }
.nav-drag-handle span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.nav-item:hover .nav-drag-handle, .nav-item:focus-visible .nav-drag-handle { opacity: .7; }
.nav-item.active .nav-drag-handle { opacity: .55; }
.nav-item.nav-dragging { opacity: .78; background: var(--blue-bg); color: var(--navy-900); box-shadow: 0 12px 26px rgba(7,20,38,.18); cursor: grabbing; }
.nav-item.nav-dragging .nav-copy small { color: var(--muted); }
body.nav-reordering { cursor: grabbing; user-select: none; }
body.nav-reordering .nav-item { cursor: grabbing; }
.nav-item .nav-icon { font-size: 17px; text-align: center; }
.nav-copy { min-width: 0; display: block; }
.nav-copy strong { display: block; font-size: 12.5px; font-weight: 680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-copy small { display: block; margin-top: 1px; color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item.active .nav-copy small { color: rgba(255,255,255,.67); }
.nav-status { display: flex; gap: 5px; align-items: center; }
.status-light { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); box-shadow: 0 0 0 3px rgba(141,150,165,.13); }
.status-light.green { background: var(--green); box-shadow: 0 0 0 3px rgba(11,140,75,.14); }
.status-light.amber { background: #efa700; box-shadow: 0 0 0 3px rgba(239,167,0,.15); }
.status-light.red { background: var(--red); box-shadow: 0 0 0 3px rgba(214,35,47,.14); }
.status-light.grey { background: #9ba4b2; }
.nav-count { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--navy-900); color: #fff; font-size: 10px; font-weight: 700; }
.nav-item.active .nav-count { color: var(--navy-900); background: #fff; }
.sidebar-bottom { padding: 10px; border-top: 1px solid var(--line); display: grid; gap: 8px; background: #fff; }
.reviews-nav-card, .owner-card { width: 100%; border: 1px solid var(--line-strong); background: #fff; border-radius: 12px; min-height: 44px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; color: var(--ink); }
.reviews-nav-card span:nth-child(2) { flex: 1; text-align: left; font-weight: 650; font-size: 12px; }
.reviews-nav-card strong { min-width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-900); color: #fff; font-size: 11px; }
.owner-card { border-color: transparent; background: var(--surface-2); }
.owner-copy { flex: 1; min-width: 0; text-align: left; }
.owner-copy strong, .owner-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.owner-copy strong { font-size: 12px; }
.owner-copy small { color: var(--muted); font-size: 10px; }

.main-area { grid-column: 2; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; z-index: 20; top: 0; min-height: var(--topbar); display: flex; align-items: center; gap: 18px; padding: 13px 24px; background: rgba(255,255,255,.92); backdrop-filter: blur(15px); border-bottom: 1px solid rgba(228,233,239,.86); }
.mobile-menu { display: none !important; }
.global-search-wrap { width: min(620px, 52vw); height: 45px; margin: 0 auto; position: relative; display: flex; align-items: center; gap: 8px; padding: 0 5px 0 13px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); }
.global-search-wrap:focus-within { border-color: #aebbc9; box-shadow: 0 0 0 3px rgba(16,40,70,.07); }
.global-search-wrap input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.global-search-wrap input::placeholder { color: #58657a; }
.global-search-wrap kbd { font-size: 10px; border: 1px solid var(--line); color: var(--muted); background: var(--surface-2); padding: 3px 6px; border-radius: 6px; white-space: nowrap; }
.search-leading { color: var(--muted); }
.voice-button { width: 35px; height: 35px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--navy-900); color: #fff; }
.search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 420px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 7px; }
.search-result { width: 100%; border: 0; background: transparent; border-radius: 9px; padding: 10px; text-align: left; display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 9px; }
.search-result:hover { background: var(--surface-2); }
.search-result strong { display: block; font-size: 12px; }
.search-result small { display: block; margin-top: 2px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.topbar-button { height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line-strong); background: #fff; border-radius: 11px; color: var(--ink); font-weight: 620; font-size: 12px; white-space: nowrap; }
.topbar-button.compact { display: none; }
.count-badge { min-width: 20px; height: 20px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--navy-900); color: #fff; font-size: 10px; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 9px; color: var(--ink); }
.icon-button:hover { background: var(--surface-3); }
.notification-button { position: relative; }
.notification-count { position: absolute; right: 1px; top: -3px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: 9px; background: #f2b400; color: #111; font-size: 9px; font-weight: 800; border: 2px solid #fff; }
.avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 0; font-weight: 700; }
.avatar-navy, .avatar-photo { background: var(--navy-900); color: #fff; }
.avatar-photo { box-shadow: inset 0 0 0 2px rgba(255,255,255,.24), 0 3px 10px rgba(11,29,56,.16); }
.read-only-banner { min-height: 36px; padding: 7px 25px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #5d4600; background: #fff7d8; border-bottom: 1px solid #eedc95; font-size: 12px; }
.read-only-banner button { border: 0; background: transparent; color: var(--navy-800); text-decoration: underline; font-weight: 700; }
.page-content { flex: 1; width: 100%; max-width: 1680px; margin: 0 auto; padding: 26px 24px 30px; outline: none; }
.app-footer { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 36px; padding: 9px 20px; background: var(--navy-900); color: #fff; font-size: 11.5px; }
.app-footer span { display: inline-flex; align-items: center; gap: 6px; }
.app-footer .footer-version { margin-left: auto; opacity: .55; }

.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.page-heading h1 { margin: 0; font-size: clamp(25px, 2.2vw, 36px); letter-spacing: -.035em; line-height: 1.1; }
.page-heading p { margin: 7px 0 0; color: var(--muted); }
.heading-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.section-title { margin: 0 0 12px; font-size: 17px; letter-spacing: -.015em; }
.subtle { color: var(--muted); }
.tiny { font-size: 11px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-amber { color: var(--amber); }
.danger-text { color: var(--red) !important; }

.primary-button, .secondary-button, .ghost-button, .danger-button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 9px; font-weight: 650; font-size: 12px; }
.primary-button { border: 1px solid var(--navy-900); background: var(--navy-900); color: #fff; }
.primary-button:hover { background: var(--navy-800); }
.secondary-button { border: 1px solid var(--line-strong); background: #fff; color: var(--ink); }
.secondary-button:hover { background: var(--surface-2); }
.ghost-button { border: 1px solid transparent; background: transparent; color: var(--navy-800); }
.ghost-button:hover { background: var(--surface-2); }
.danger-button { border: 1px solid var(--red); background: var(--red); color: #fff; }
.small-button { min-height: 31px; padding: 0 10px; font-size: 11px; border-radius: 8px; }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.card-pad { padding: 18px; }
.card-header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 17px; border-bottom: 1px solid var(--line); }
.card-header h2, .card-header h3 { margin: 0; font-size: 14px; }
.card-body { padding: 16px 17px; }
.metrics-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.metric-card { min-height: 128px; padding: 17px; display: flex; flex-direction: column; justify-content: space-between; }
.metric-card-top { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 12px; }
.metric-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--navy-800); font-size: 17px; }
.metric-value { margin-top: 10px; font-size: clamp(27px, 2.2vw, 36px); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.metric-value small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.metric-foot { margin-top: 9px; min-height: 18px; color: var(--muted); font-size: 11px; }
.metric-foot strong { font-weight: 650; }
.metric-card-expandable { width: 100%; border: 1px solid var(--line); color: inherit; font: inherit; text-align: left; cursor: pointer; appearance: none; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.metric-card-expandable:hover { border-color: var(--line-strong); box-shadow: 0 9px 25px rgba(14,31,55,.08); transform: translateY(-1px); }
.metric-card-expandable:focus-visible { outline: 3px solid rgba(42,99,153,.22); outline-offset: 2px; }
.metric-card-expandable.expanded { border-color: var(--navy-700); box-shadow: 0 9px 25px rgba(14,31,55,.09); }
.metric-foot-expand { display: flex; align-items: flex-end; justify-content: space-between; gap: 9px; }
.metric-expand-cue { display: inline-flex; align-items: center; gap: 3px; color: var(--navy-800); font-weight: 650; white-space: nowrap; }
.metric-expand-cue svg { width: 14px; height: 14px; transition: transform .16s ease; }
.metric-card-expandable.expanded .metric-expand-cue svg { transform: rotate(90deg); }
.critical-items-panel { margin: -7px 0 18px; padding: 0; overflow: hidden; border-color: var(--line-strong); }
.critical-panel-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.critical-panel-header h2 { margin: 0; font-size: 14px; }
.critical-panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 10.5px; }
.critical-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.critical-items-list { display: grid; }
.critical-item-row { width: 100%; min-height: 58px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.critical-item-row:last-child { border-bottom: 0; }
.critical-item-row:hover { background: #fbfcfd; }
.critical-item-row:focus-visible { outline: 3px solid rgba(42,99,153,.2); outline-offset: -3px; }
.critical-item-copy { min-width: 0; }
.critical-item-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.critical-item-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.critical-item-status { display: flex; align-items: center; gap: 7px; }
.critical-item-status > svg { width: 15px; height: 15px; color: var(--muted); }
.critical-panel-count { margin: 0; padding: 9px 16px 11px; border-top: 1px solid var(--line); background: var(--surface-2); }
.critical-panel-loading, .critical-panel-error, .empty-panel-state { min-height: 92px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 20px; color: var(--muted); text-align: center; }
.critical-panel-loading svg { width: 18px; height: 18px; animation: critical-spin .9s linear infinite; }
.critical-panel-error { flex-direction: column; color: var(--red); }
.critical-panel-error span { color: var(--muted); }
@keyframes critical-spin { to { transform: rotate(360deg); } }
.progress-track { width: 100%; height: 7px; border-radius: 99px; background: #edf1f4; overflow: hidden; }
.progress-track > span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--navy-800); }
.progress-track.green > span { background: var(--green); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
.dashboard-main { display: grid; gap: 16px; min-width: 0; }
.dashboard-side { display: grid; gap: 16px; align-content: start; }
.calendar-card { min-height: 440px; overflow: hidden; }
.calendar-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.week-grid { min-width: 730px; display: grid; grid-template-columns: 150px repeat(5,minmax(110px,1fr)); border-top: 1px solid var(--line); }
.week-grid > div { min-height: 55px; padding: 9px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.week-grid > div:nth-child(6n) { border-right: 0; }
.week-header { min-height: 46px !important; color: var(--muted); font-size: 11px; text-align: center; background: var(--surface-2); }
.lane-label { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.lane-label strong { display: block; font-size: 12px; }
.lane-label small { display: block; color: var(--muted); }
.schedule-cell { position: relative; background: #fff; }
.schedule-event { width: 100%; display: block; border: 0; border-radius: 8px; padding: 8px; background: #e9edf2; color: var(--ink); text-align: left; font-size: 10px; }
.schedule-event.job { background: linear-gradient(135deg,#253c58,#112943); color: #fff; }
.schedule-event.estimate { background: #ffe5a8; color: #4d3700; }
.schedule-event.emergency { box-shadow: inset 3px 0 var(--red); }
.schedule-event strong { display: block; font-size: 10.5px; }
.calendar-scroll { overflow-x: auto; }
.empty-schedule { display: grid; place-items: center; text-align: center; min-height: 280px; padding: 30px; color: var(--muted); }
.empty-schedule .empty-icon { width: 52px; height: 52px; display: grid; place-items: center; background: var(--surface-2); border-radius: 15px; color: var(--navy-800); font-size: 25px; margin-bottom: 12px; }
.side-card { padding: 16px; }
.side-card h3 { margin: 0 0 14px; font-size: 14px; }
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.stat-pair strong { display: block; font-size: 26px; font-weight: 550; }
.stat-pair small { color: var(--muted); }
.system-label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 20px; background: var(--surface-2); font-size: 10px; font-weight: 650; }
.mini-list { display: grid; gap: 8px; }
.mini-list-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 42px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mini-list-row:last-child { border-bottom: 0; }
.mini-list-row strong { display: block; font-size: 11.5px; }
.mini-list-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.bottom-widget-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.widget-card { min-height: 180px; padding: 15px; }
.widget-card h3 { margin: 0 0 13px; font-size: 12px; display: flex; align-items: center; justify-content: space-between; gap: 7px; }

.tabs { display: flex; gap: 5px; padding: 4px; width: fit-content; border-radius: 11px; background: var(--surface-3); }
.tab-button { min-height: 34px; border: 0; border-radius: 8px; padding: 0 12px; background: transparent; color: var(--muted); font-weight: 620; font-size: 11px; }
.tab-button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(14,31,55,.08); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 13px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.filter-bar input, .filter-bar select { min-height: 36px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; padding: 0 10px; color: var(--ink); }
.filter-bar input { flex: 1; min-width: 190px; }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.data-table { width: 100%; border-collapse: collapse; min-width: 850px; }
.data-table th { height: 42px; padding: 0 12px; text-align: left; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .035em; }
.data-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 11.5px; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fbfcfd; }
.click-row { cursor: pointer; }
.item-title { font-weight: 650; font-size: 12px; }
.item-subtitle { margin-top: 3px; max-width: 630px; color: var(--muted); font-size: 10.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.status-pill, .priority-pill, .type-pill { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 24px; padding: 3px 8px; border-radius: 20px; font-size: 10px; font-weight: 650; white-space: nowrap; }
.status-pill { background: var(--surface-3); color: #566174; }
.status-pill.complete_system_verified, .status-pill.complete_user_confirmed, .status-pill.resolved, .status-pill.executed, .status-pill.active { background: var(--green-bg); color: var(--green); }
.status-pill.ready_to_verify, .status-pill.approved { background: var(--blue-bg); color: var(--blue); }
.status-pill.pending_information, .status-pill.pending, .status-pill.waiting, .status-pill.simulated { background: var(--amber-bg); color: var(--amber); }
.status-pill.blocked, .status-pill.critical { background: var(--red-bg); color: var(--red); }
.status-pill.ongoing, .status-pill.in_progress { background: #eeeafa; color: #6752a3; }
.priority-pill.Critical, .priority-pill.critical { background: var(--red-bg); color: var(--red); }
.priority-pill.High, .priority-pill.high { background: var(--amber-bg); color: var(--amber); }
.priority-pill.Medium, .priority-pill.medium { background: var(--blue-bg); color: var(--blue); }
.priority-pill.Low, .priority-pill.low { background: var(--surface-3); color: var(--muted); }
.type-pill { background: var(--surface-2); color: var(--navy-700); }

.todo-groups { display: grid; gap: 14px; }
.todo-group { overflow: hidden; }
.todo-group-header { min-height: 49px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.todo-group-header h3 { margin: 0; font-size: 13px; }
.todo-list { display: grid; }
.todo-row { min-height: 58px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.todo-row:last-child { border-bottom: 0; }
.todo-check { width: 21px; height: 21px; border: 1.5px solid #aab3bf; background: #fff; border-radius: 6px; }
.todo-check:hover { border-color: var(--navy-800); }
.todo-copy strong { display: block; font-size: 12px; }
.todo-copy small { display: block; color: var(--muted); margin-top: 2px; font-size: 10.5px; }
.todo-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.completed-row .todo-copy { text-decoration: line-through; opacity: .62; }
.todo-row.document-drag-active { position: relative; background: #edf6ff; box-shadow: inset 0 0 0 2px var(--blue); }
.todo-row.document-drag-active::after { content: "Drop to file in this task"; position: absolute; inset: 5px; display: grid; place-items: center; border: 1px dashed #3980c6; border-radius: 8px; background: rgba(237,246,255,.94); color: #164d82; font-size: 11px; font-weight: 750; pointer-events: none; }
.deterministic-ai-button { border-color: #77bea0; background: #edf8f2; color: #18613a; }
.task-document-vault { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.task-document-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.task-document-heading h3 { margin: 0 0 4px; font-size: 14px; }
.task-document-heading p { margin: 0; color: var(--muted); font-size: 10.5px; }
.task-document-intake { display: grid; grid-template-columns: minmax(190px,.42fr) minmax(0,1fr); gap: 12px; align-items: stretch; margin-bottom: 12px; }
.task-document-dropzone { min-height: 78px; display: grid; grid-template-columns: 30px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; column-gap: 10px; padding: 12px 15px; border: 1.5px dashed #8ca6c0; border-radius: 11px; background: #f7fafc; color: #23435f; text-align: left; }
.task-document-dropzone svg { grid-row: 1 / 3; align-self: center; width: 25px; height: 25px; }
.task-document-dropzone strong { font-size: 11.5px; }
.task-document-dropzone small { color: var(--muted); font-size: 10px; }
.task-document-dropzone:hover, .task-document-dropzone.document-drag-active { border-color: var(--blue); background: var(--blue-bg); }
.task-document-list { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.task-document-list > .subtle { padding: 13px; }
.task-document-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.task-document-row:last-child { border-bottom: 0; }
.task-document-row strong, .task-document-row small { display: block; }
.task-document-row strong { font-size: 11.5px; overflow-wrap: anywhere; }
.task-document-row small { margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.task-document-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.task-document-actions select { min-height: 31px; max-width: 180px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; padding: 0 7px; font-size: 10.5px; }
.priority-review-metrics { margin-bottom: 14px; }
.priority-review-card { padding: 17px; margin-bottom: 14px; }
.priority-review-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.priority-review-heading h3 { margin: 2px 0 5px; font-size: 16px; }
.priority-review-heading p { margin: 0; }
.priority-review-actions { display: flex; justify-content: flex-end; margin-top: 13px; }
.priority-review-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 14px; margin-bottom: 14px; }
.priority-workstream-list { display: grid; gap: 0; padding: 4px 14px; }
.priority-workstream-list > div { display: flex; align-items: center; justify-content: space-between; min-height: 42px; border-bottom: 1px solid var(--line); font-size: 12px; }
.priority-workstream-list > div:last-child { border-bottom: 0; }
.priority-workstream-list strong { min-width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--navy-800); }
.priority-evidence-note { margin: 10px 14px 14px; }

.phase-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 15px; }
.phase-card { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.phase-card strong { display: block; margin-bottom: 4px; font-size: 11px; }
.phase-card small { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-bottom: 8px; }

.two-column { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px, .42fr); gap: 16px; }
.three-column { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.action-card { overflow: hidden; }
.ai-batch-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-color: #bfe5ce; background: #f5fbf7; }
.ai-batch-toolbar strong, .ai-batch-toolbar small { display: block; }
.ai-batch-toolbar strong { color: #18613a; font-size: 12px; }
.ai-batch-toolbar small { margin-top: 3px; color: #43705a; font-size: 10px; }
.ai-batch-check { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 15px; border-bottom: 1px solid #d9eee1; background: #f5fbf7; color: #276447; font-size: 10px; font-weight: 700; }
.ai-batch-check input { width: 16px; height: 16px; }
.action-card-header { width: 100%; min-height: 58px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 13px 15px; border: 0; background: #fff; text-align: left; }
.action-card-header:hover { background: #fbfcfd; }
.action-card-title strong { display: block; font-size: 12px; }
.action-card-title small { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.action-card-body { border-top: 1px solid var(--line); padding: 12px 15px; }
.action-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.action-row:last-child { border-bottom: 0; }
.action-row strong { display: block; font-size: 12px; }
.action-row small { display: block; color: var(--muted); margin-top: 2px; font-size: 10.5px; }
.action-buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.approval-stage-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
.approval-stage { min-height: 58px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: #f7f9fb; color: var(--muted); }
.approval-stage strong, .approval-stage small { display: block; }
.approval-stage strong { font-size: 11px; color: #546273; }
.approval-stage small { margin-top: 4px; font-size: 10px; }
.approval-stage.done { background: #edf8f2; border-color: #bfe5ce; color: #247447; }
.approval-stage.done strong { color: #18613a; }
.approval-stage.current { background: var(--blue-bg); border-color: #a9cff7; color: #165992; box-shadow: inset 3px 0 0 var(--blue); }
.approval-stage.current strong { color: #164d82; }
.approval-next-step { margin-bottom: 10px; }
.approval-next-step code { display: block; width: fit-content; max-width: 100%; margin: 8px 0 6px; padding: 6px 8px; border-radius: 6px; background: #0d1929; color: #f4f8fc; font-size: 10.5px; overflow-wrap: anywhere; }
.approval-next-step small { display: block; margin-top: 6px; color: #49769f; }
.approval-details { margin-top: 10px; }
.approval-details summary { cursor: pointer; color: var(--blue); font-size: 11px; font-weight: 700; }
.approval-details .code-box { margin-top: 8px; }

.status-list { display: grid; gap: 9px; }
.status-row { min-height: 53px; display: grid; grid-template-columns: 12px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.status-row:last-child { border-bottom: 0; }
.system-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); }
.system-dot.connected { background: var(--green); }
.system-dot.delayed, .system-dot.degraded { background: #e9a400; }
.system-dot.disconnected, .system-dot.error { background: var(--red); }
.system-dot.not_configured, .system-dot.paused { background: #9ba4b2; }
.status-row strong { display: block; font-size: 11.5px; }
.status-row small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }

.mode-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(135deg,#fff,#f8fafc); }
.mode-card .mode-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mode-card h2 { margin: 0; font-size: 18px; }
.mode-card p { color: var(--muted); }
.locked-rule-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.locked-rule { padding: 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.locked-rule strong { display: block; font-size: 11px; }
.locked-rule small { display: block; color: var(--muted); margin-top: 4px; }
.script-panel { overflow: hidden; }
.script-section { border-bottom: 1px solid var(--line); }
.script-section:last-child { border-bottom: 0; }
.script-section summary { cursor: pointer; padding: 13px 15px; font-weight: 650; font-size: 12px; }
.script-copy { padding: 0 15px 15px; white-space: pre-wrap; color: #384459; font-size: 11px; line-height: 1.55; }
.warning-box, .info-box, .success-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 13px; border-radius: 10px; font-size: 11.5px; }
.warning-box { background: var(--amber-bg); color: #684900; border: 1px solid #f0d696; }
.info-box { background: var(--blue-bg); color: #164d82; border: 1px solid #c7def8; }
.success-box { background: var(--green-bg); color: #086439; border: 1px solid #bfe7d0; }

.module-gate { padding: 22px; min-height: 230px; }
.module-gate-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.module-gate-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); color: var(--navy-800); font-size: 24px; }
.module-gate h2 { margin: 0; font-size: 18px; }
.module-gate p { color: var(--muted); }
.requirements-list { display: grid; gap: 8px; margin-top: 15px; }
.requirement { display: flex; gap: 9px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.requirement:last-child { border-bottom: 0; }
.requirement span:first-child { color: var(--navy-800); }
.requirement > i { flex: 0 0 auto; margin-top: 3px; }
.requirement > span:not(.status-pill) { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
.requirement > .status-pill { flex: 0 0 auto; margin-left: auto; }
.requirement small { color: var(--muted); font-size: 10.5px; line-height: 1.45; }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { color: #354155; font-size: 10.5px; font-weight: 650; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; color: var(--ink); padding: 9px 10px; outline: none; }
.field input, .field select { min-height: 39px; }
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #9dacbd; box-shadow: 0 0 0 3px rgba(16,40,70,.07); }
.field small { color: var(--muted); font-size: 10px; }
.checkbox-field { display: flex; align-items: center; gap: 8px; min-height: 38px; }
.checkbox-field input { width: 17px; height: 17px; }
.settings-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.settings-section-head .section-title { margin-bottom: 4px; }
.settings-section-head p { margin: 0; max-width: 760px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.language-toggle { width: fit-content; display: inline-grid; grid-template-columns: repeat(2,minmax(118px,1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); }
.language-toggle label { cursor: pointer; }
.language-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.language-toggle span { min-height: 36px; display: grid; place-items: center; padding: 0 18px; border-radius: 8px; color: var(--muted); font-weight: 680; transition: .15s ease; }
.language-toggle input:checked + span { background: var(--navy-900); color: #fff; box-shadow: 0 3px 10px rgba(11,29,56,.16); }
.language-toggle input:focus-visible + span { outline: 3px solid rgba(20,100,180,.22); outline-offset: 1px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(7,20,38,.48); backdrop-filter: blur(4px); }
.modal { width: min(680px, 100%); max-height: min(820px, calc(100vh - 40px)); overflow-y: auto; border: 1px solid rgba(255,255,255,.55); border-radius: 18px; background: #fff; box-shadow: 0 30px 90px rgba(7,20,38,.28); }
.modal.wide { width: min(920px, 100%); }
.modal-header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; font-size: 17px; }
.modal-body { padding: 18px; }
.modal-footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 13px 18px; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-bottom: 15px; }
.detail-box { padding: 11px; border-radius: 9px; background: var(--surface-2); }
.detail-box strong { display: block; color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; }
.detail-box span { display: block; margin-top: 4px; font-size: 11.5px; }
.history-list { display: grid; gap: 8px; }
.history-entry { padding: 9px 11px; border-left: 3px solid var(--line-strong); background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 10.5px; }

.systems-popover { position: fixed; z-index: 90; right: 20px; top: 68px; width: min(390px, calc(100vw - 30px)); max-height: 70vh; overflow-y: auto; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.systems-popover h3 { margin: 0 0 12px; font-size: 14px; }
.owner-menu-popover { position: fixed; z-index: 95; right: 18px; top: 66px; width: 270px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.owner-menu-popover button { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 8px; background: transparent; padding: 0 10px; text-align: left; color: var(--ink); }
.owner-menu-popover button:hover { background: var(--surface-2); }
.owner-menu-summary { font-size: 10px; line-height: 1.3; color: var(--muted); padding: 4px 6px 8px; }
.owner-menu-summary-title { color: var(--ink); font-weight: 680; font-size: 11px; margin-bottom: 4px; }
.owner-menu-summary-subtitle { margin-bottom: 8px; max-height: 34px; overflow: hidden; }
.owner-menu-summary-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.owner-menu-stat { border: 1px solid var(--line); border-radius: 8px; padding: 6px 7px; background: var(--surface-2); }
.owner-menu-stat strong { display: block; color: var(--ink); font-size: 12px; line-height: 1; }
.owner-menu-stat span { color: var(--muted); font-size: 9.5px; }
.owner-menu-summary-label { margin-top: 8px; color: var(--ink); font-weight: 650; font-size: 10px; }
.owner-menu-user-list { margin-top: 6px; display: grid; gap: 6px; max-height: 150px; overflow: auto; }
.owner-menu-user-row { border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; background: var(--surface); }
.owner-menu-user-row strong { display: block; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.owner-menu-user-row small { display: block; color: var(--muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.owner-menu-subtle { color: var(--muted); }
.owner-menu-divider { height: 1px; margin: 6px 0; background: var(--line); }
.toast-root { position: fixed; z-index: 200; right: 20px; bottom: 20px; display: grid; gap: 8px; pointer-events: none; }
.toast { width: min(360px, calc(100vw - 40px)); padding: 12px 14px; border-radius: 11px; background: var(--navy-900); color: #fff; box-shadow: var(--shadow); animation: toast-in .18s ease both; }
.toast.error { background: #8d1720; }
.toast.success { background: #086b3b; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.kpi-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 9px 0; }
.kpi-line span { color: var(--muted); font-size: 11px; }
.kpi-line strong { font-size: 20px; letter-spacing: -.03em; }
.audit-chain { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px 12px; font-size: 11px; }
.audit-chain dt { color: var(--muted); }
.audit-chain dd { margin: 0; overflow-wrap: anywhere; }
.code-box { padding: 12px; border-radius: 9px; background: #0d1929; color: #d9e8f8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; overflow-x: auto; }

.sidebar-backdrop { position: fixed; z-index: 25; inset: 0; background: rgba(7,20,38,.42); }

@media (min-width: 1200px) {
  .topbar-button.compact { display: inline-flex; }
}
@media (max-width: 1280px) {
  :root { --sidebar: 210px; }
  .metrics-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .bottom-widget-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .phase-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .topbar-button.compact { display: none; }
}
@media (max-width: 1000px) {
  :root { --sidebar: 238px; }
  .app-shell { display: block; }
  .sidebar { transform: translateX(-105%); transition: transform .2s ease; box-shadow: 20px 0 50px rgba(7,20,38,.18); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close, .mobile-menu { display: grid !important; }
  .main-area { display: flex; }
  .topbar { padding: 11px 15px; gap: 8px; }
  .global-search-wrap { width: auto; flex: 1; margin: 0; }
  .global-search-wrap kbd, .voice-button { display: none; }
  .topbar-actions .topbar-button { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .two-column { grid-template-columns: 1fr; }
  .three-column { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-footer { flex-wrap: wrap; gap: 12px 24px; justify-content: flex-start; }
  .app-footer .footer-version { margin-left: 0; }
}
@media (max-width: 720px) {
  .page-content { padding: 19px 13px 24px; }
  .page-heading { display: block; }
  .heading-actions { margin-top: 13px; justify-content: flex-start; }
  .metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .metric-card { min-height: 118px; padding: 14px; }
  .critical-panel-header { align-items: flex-start; flex-direction: column; }
  .critical-panel-actions { width: 100%; justify-content: flex-start; }
  .critical-item-row { grid-template-columns: minmax(0,1fr); }
  .critical-item-status { justify-content: space-between; }
  .metric-value { font-size: 28px; }
  .dashboard-side, .bottom-widget-grid, .three-column, .locked-rule-grid, .form-grid, .detail-grid, .approval-stage-grid { grid-template-columns: 1fr; }
  .phase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .topbar-actions .notification-button { display: none; }
  .avatar-photo { width: 35px; height: 35px; }
  .read-only-banner { justify-content: flex-start; padding: 8px 13px; }
  .read-only-banner button { margin-left: auto; white-space: nowrap; }
  .tabs { width: 100%; overflow-x: auto; }
  .tab-button { white-space: nowrap; flex: 1; }
  .priority-review-grid { grid-template-columns: 1fr; }
  .priority-review-heading { flex-direction: column; }
  .priority-review-actions { justify-content: flex-start; }
  .todo-row { grid-template-columns: 30px minmax(0,1fr); }
  .todo-meta { grid-column: 2; justify-content: flex-start; }
  .task-document-intake, .task-document-row, .ai-batch-toolbar { grid-template-columns: 1fr; }
  .task-document-actions, .ai-batch-toolbar .action-buttons { justify-content: flex-start; }
  .app-footer { font-size: 10.5px; }
  .modal-backdrop { padding: 8px; }
  .modal { max-height: calc(100vh - 16px); border-radius: 14px; }
}
@media (max-width: 470px) {
  .auth-card { padding: 25px 20px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .phase-grid { grid-template-columns: 1fr; }
  .global-search-wrap { height: 40px; }
  .topbar { min-height: 61px; }
  .voice-button { display: none; }
  .app-footer span:nth-child(n+3) { display: none; }
}

.operational-safety {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.operational-source {
  align-items: center;
  background: #f6f8fb;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 10px 24px;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 10px 14px;
}

.operational-table {
  margin-top: 14px;
}

/* Windows-style Master Vault explorer */
.vault-explorer-window{border:1px solid #c8d4e3;border-radius:12px;overflow:hidden;background:#f8fafc;box-shadow:0 10px 28px rgba(30,57,91,.10);color:#17283e}
.vault-explorer-titlebar{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:linear-gradient(180deg,#fafdff 0%,#edf4fb 100%);border-bottom:1px solid #d6e0ec;font-size:.84rem}
.vault-explorer-titlebar>div{display:flex;align-items:center;gap:8px}.vault-explorer-titlebar svg{width:18px;height:18px;color:#e6a817;fill:#ffd45a}.vault-explorer-titlebar>span{color:#64748b;font-size:.76rem}
.vault-explorer-toolbar{display:grid;grid-template-columns:auto auto minmax(220px,1fr) minmax(190px,280px);gap:8px;align-items:center;padding:9px 10px;background:#fff;border-bottom:1px solid #dde5ee}
.vault-window-button,.vault-view-button{border:1px solid transparent;background:transparent;border-radius:7px;color:#24364b;min-height:34px;padding:6px 9px;display:inline-flex;align-items:center;gap:6px;font:inherit;cursor:pointer}.vault-window-button:hover:not(:disabled),.vault-view-button:hover{background:#edf5ff;border-color:#c9ddf5}.vault-window-button:disabled{opacity:.38;cursor:not-allowed}.vault-window-button svg,.vault-view-button svg{width:16px;height:16px}
.vault-address-bar{height:36px;display:flex;align-items:center;gap:8px;min-width:0;padding:0 11px;border:1px solid #cbd7e5;border-radius:7px;background:#fff}.vault-address-bar svg{width:17px;color:#d89b00;fill:#ffd45a}.vault-address-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem}
.vault-search-box{height:36px;display:flex;border:1px solid #cbd7e5;border-radius:7px;background:#fff;overflow:hidden}.vault-search-box:focus-within{border-color:#4d8ed8;box-shadow:0 0 0 2px rgba(77,142,216,.14)}.vault-search-box input{min-width:0;width:100%;border:0;outline:0;padding:0 10px;background:transparent;font:inherit;font-size:.82rem}.vault-search-box button{width:38px;border:0;border-left:1px solid #e2e8f0;background:#f8fafc;cursor:pointer;color:#334155}.vault-search-box button:hover{background:#eaf3fd}.vault-search-box svg{width:16px}
.vault-view-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:6px 10px;background:#f7f9fc;border-bottom:1px solid #dde5ee;font-size:.75rem;color:#64748b}.vault-view-toolbar>div{display:flex;gap:3px}.vault-view-button{min-height:29px;padding:4px 8px;font-size:.75rem}.vault-view-button.active{background:#dcecff;border-color:#9ec6f0;color:#0a4f8f}.vault-view-button span{display:none}
.vault-explorer-content{height:520px;overflow:auto;background:#fff;padding:12px}.vault-explorer-empty{height:100%;display:grid;place-items:center;color:#64748b}
.vault-icon-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px;align-content:start}.vault-icon-entry{min-height:118px;border:1px solid transparent;border-radius:9px;background:transparent;color:#17283e;text-decoration:none;padding:12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;text-align:center;cursor:pointer;font:inherit;min-width:0}.vault-icon-entry:hover{background:#eaf4ff;border-color:#bdd8f5}.vault-icon-entry:focus{outline:2px solid #4d8ed8;outline-offset:-2px}.vault-large-icon svg{width:43px;height:43px;color:#d69600;fill:#ffd45a;stroke-width:1.5}.vault-icon-entry:not([data-vault-folder]) .vault-large-icon svg{color:#3b78b7;fill:#d8eaff}.vault-icon-entry strong{font-size:.79rem;line-height:1.25;max-width:100%;overflow-wrap:anywhere}.vault-icon-entry small{color:#64748b;font-size:.68rem}
.vault-list-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:4px}.vault-list-entry{height:48px;border:1px solid transparent;border-radius:6px;background:transparent;color:#17283e;text-decoration:none;padding:5px 8px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;font:inherit;min-width:0}.vault-list-entry:hover{background:#eaf4ff;border-color:#c7dff7}.vault-list-icon svg{width:24px;height:24px;color:#d69600;fill:#ffd45a}.vault-list-entry:not([data-vault-folder]) .vault-list-icon svg{color:#3b78b7;fill:#d8eaff}.vault-list-copy{display:flex;flex-direction:column;min-width:0}.vault-list-copy strong{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vault-list-copy small{font-size:.68rem;color:#64748b}
.vault-details-view{min-width:720px}.vault-detail-header,.vault-detail-row{display:grid;grid-template-columns:minmax(280px,2fr) minmax(120px,1fr) minmax(145px,1fr) 90px;align-items:center;min-height:38px;padding:0 9px;border-bottom:1px solid #e8edf3;text-align:left}.vault-detail-header{position:sticky;top:-12px;z-index:2;background:#f4f7fa;color:#56677b;font-size:.7rem;font-weight:700}.vault-detail-row{width:100%;border-top:0;border-left:0;border-right:0;background:#fff;color:#24364b;text-decoration:none;font:inherit;font-size:.76rem;cursor:pointer}.vault-detail-row:hover{background:#eaf4ff}.vault-detail-name{display:flex;align-items:center;gap:8px;min-width:0}.vault-detail-name svg{width:19px;color:#d69600;fill:#ffd45a}.vault-detail-row:not([data-vault-folder]) .vault-detail-name svg{color:#3b78b7;fill:#d8eaff}.vault-detail-name strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vault-explorer-status{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#f5f8fb;border-top:1px solid #dce5ef;color:#66778b;font-size:.68rem}
@media(max-width:760px){.vault-explorer-toolbar{grid-template-columns:auto auto 1fr}.vault-search-box{grid-column:1/-1}.vault-window-button span{display:none}.vault-explorer-content{height:440px}.vault-icon-view{grid-template-columns:repeat(2,minmax(0,1fr))}.vault-list-view{grid-template-columns:1fr}.vault-view-button span{display:none}}
/* Windows explorer folder icon polish */
.vault-window-button span,.vault-view-button span{display:inline}
.vault-explorer-titlebar>div>svg,.vault-address-bar>svg{display:none}
.vault-explorer-titlebar>div::before,.vault-address-bar::before{content:"";display:inline-block;flex:0 0 auto;width:19px;height:14px;border:1px solid #c88900;border-radius:2px;background:linear-gradient(180deg,#ffd85f,#f2b719);box-shadow:inset 0 1px rgba(255,255,255,.55)}
.vault-explorer-titlebar>div::before{width:20px;height:15px}.vault-address-bar::before{width:17px;height:13px}
.vault-icon-entry[data-vault-folder] .vault-large-icon{position:relative;width:54px;height:43px;display:block}
.vault-icon-entry[data-vault-folder] .vault-large-icon svg{display:none}
.vault-icon-entry[data-vault-folder] .vault-large-icon::before{content:"";position:absolute;left:2px;bottom:2px;width:50px;height:34px;border:1px solid #c88900;border-radius:3px 5px 5px 5px;background:linear-gradient(180deg,#ffdc68 0%,#f2b81d 100%);box-shadow:inset 0 2px rgba(255,255,255,.42),0 2px 3px rgba(91,68,20,.16)}
.vault-icon-entry[data-vault-folder] .vault-large-icon::after{content:"";position:absolute;left:3px;top:2px;width:23px;height:10px;border:1px solid #c88900;border-bottom:0;border-radius:4px 4px 0 0;background:#ffd45a}
.vault-list-entry[data-vault-folder] .vault-list-icon svg,.vault-detail-row[data-vault-folder] .vault-detail-name svg{display:none}
.vault-list-entry[data-vault-folder] .vault-list-icon::before,.vault-detail-row[data-vault-folder] .vault-detail-name::before{content:"";display:inline-block;flex:0 0 auto;width:20px;height:14px;border:1px solid #c88900;border-radius:2px;background:linear-gradient(180deg,#ffda63,#f1b617)}
@media(max-width:760px){.vault-window-button span,.vault-view-button span{display:inline}.vault-view-toolbar{gap:6px}.vault-view-button{padding-inline:7px}}