:root {
  font-family:Inter,"Microsoft YaHei","PingFang SC",sans-serif;
  color:#263c34;
  background:#f6f8f7;
  font-synthesis:none;
  --green:#16644e;
  --muted:#849189;
  --line:#e8eeea;
  --soft:#edf5f0
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.kb-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); }
.kb-tabs button { padding:10px 14px; border-bottom:2px solid transparent; font-size:13px; }
.kb-tabs [aria-selected="true"] { color:var(--green); border-color:var(--green); font-weight:600; }
.kb-chat-layout { display:grid; grid-template-columns:230px minmax(0,1fr); border:1px solid var(--line); background:white; min-height:540px; height:calc(100dvh - 235px); max-height:900px; }
.kb-conversations { min-width:0; overflow:auto; border-right:1px solid var(--line); background:#fafcfb; }
.kb-list-head { display:flex; align-items:center; justify-content:space-between; padding:14px; }
.kb-list-head h2 { font-size:14px; margin:0; }
.kb-session { display:flex; align-items:center; margin:3px 8px; border-radius:6px; }
.kb-session.active { background:var(--soft); }
.kb-session > button:first-child { flex:1; min-width:0; padding:12px 8px; text-align:left; }
.kb-session strong { font-size:13px; font-weight:500; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kb-session small { display:block; margin-top:6px; font-size:11px; color:var(--muted); }
.kb-session .icon-button { flex-shrink:0; width:28px; }
.kb-conversation { display:flex; flex-direction:column; min-width:0; min-height:0; }
.kb-messages { flex:1; overflow:auto; padding:24px; scroll-behavior:smooth; }
.kb-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:260px; color:var(--muted); }
.kb-empty h2 { font-size:23px; font-weight:500; color:var(--green); }
.kb-message { padding:0 0 26px; max-width:100%; }
.kb-message-label { font-size:11px; font-weight:600; color:var(--muted); margin-bottom:8px; }
.kb-message-content { font-size:14px; line-height:1.9; overflow-wrap:anywhere; }
.kb-message-content h3 { font-size:15px; margin:12px 0 5px; }
.kb-message-content pre { background:#f3f5f4; padding:12px; overflow:auto; white-space:pre-wrap; }
.kb-message-content code { font-size:12px; background:#f3f5f4; }
.kb-user .kb-message-content { border-left:3px solid #b6d3c5; padding-left:12px; }
.kb-list-line { padding-left:8px; }
.kb-references { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; max-height:150px; overflow:auto; }
.kb-reference { display:inline-flex; gap:5px; align-items:center; padding:5px 8px; font-size:11px; max-width:100%; overflow-wrap:anywhere; background:#f0f5f2; border-radius:4px; text-align:left; }
.kb-reference .icon { width:14px; height:14px; flex-shrink:0; }
.kb-composer { border-top:1px solid var(--line); padding:14px 18px; }
.kb-composer textarea { display:block; width:100%; resize:vertical; min-height:70px; max-height:160px; border:1px solid var(--line); border-radius:6px; padding:10px; font-size:14px; }
.kb-composer-bottom { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:9px; }
.kb-composer-bottom small { color:#64766d; font-size:10px; line-height:1.7; max-width:80%; }
.kb-composer-bottom button { flex-shrink:0; }
.kb-readonly { padding:15px; text-align:center; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.kb-pagination { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; font-size:12px; }
.kb-source-section { background:white; border-top:1px solid var(--line); }
.kb-source-actions { padding:16px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kb-source-actions h2 { font-size:16px; margin:0; }
.kb-source-actions h2 small { font-size:12px; color:var(--muted); }
.kb-source-actions > div { display:flex; flex-wrap:wrap; gap:8px; }
.kb-source-meta,.kb-source-error { display:block; margin-top:7px; font-size:11px; line-height:1.6; }
.kb-source-meta { color:var(--muted); }
.kb-source-error { color:#a13d39; max-width:240px; overflow-wrap:anywhere; }
.kb-role-field { border:1px solid var(--line); padding:12px; margin-bottom:18px; display:flex; flex-wrap:wrap; gap:14px; font-size:12px; }
.kb-role-field input { width:auto; }
.kb-role-field label { display:flex; align-items:center; gap:5px; }
@media(max-width:750px) {
  .kb-chat-layout { grid-template-columns:minmax(0,1fr); height:auto; max-height:none; }
  .kb-conversations { border-right:0; border-bottom:1px solid var(--line); max-height:175px; }
  .kb-list-head { padding:8px 12px; }
  .kb-conversations nav { display:flex; overflow-x:auto; }
  .kb-session { flex:0 0 180px; }
  .kb-conversations .kb-pagination { padding:3px; }
  .kb-conversation { min-height:450px; height:calc(100dvh - 280px); }
  .kb-messages { padding:16px; }
  .kb-composer { padding:10px; }
  .kb-tabs { flex-wrap:wrap; }
  .kb-tabs button { padding:8px 9px; font-size:12px; }
  .kb-source-actions { align-items:flex-start; flex-direction:column; }
}
.document-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.document-sidebar .panel-head { border-bottom: 1px solid var(--line); }
.document-categories { padding: 10px; }
.document-category { border-radius: 8px; margin-bottom: 5px; }
.document-category.active { background: var(--soft); }
.document-category > button:first-child {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 13px 10px;
  width: 100%;
  text-align: left;
  font-size: 13px;
}
.document-category span { overflow-wrap: anywhere; }
.document-category small { display: block; margin-top: 8px; font-size: 10px; line-height: 1.8; }
.document-edit { margin: 0 10px 12px 42px; }
.document-file-title { display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; }
.document-content { min-width: 0; }
.document-actions { display: flex; align-items: center; gap: 15px; }
.document-search { padding: 0 22px 20px; }
.document-video { width: 100%; max-height: 60vh; display: block; background: #10251a; border-radius: 8px; }
#document-upload-progress { width: 100%; margin-top: 12px; accent-color: var(--green); }
[hidden] { display: none !important; }
@media (max-width: 1050px) {
  .document-layout { grid-template-columns: 1fr; }
  .document-categories { display: flex; flex-wrap: wrap; gap: 5px; }
  .document-category { flex: 1 1 180px; }
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  outline-offset:4px
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.55;
  cursor:wait
}
button,a {
  touch-action:manipulation
}
button {
  border:0;
  background:none;
  color:inherit
}
a {
  color:var(--green);
  text-decoration:none
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:27px;
  letter-spacing:-1px
}
h2 {
  font-size:17px
}
h3 {
  font-size:15px
}
small,.muted {
  color:var(--muted)
}
small {
  font-size:12px
}
.icon {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle;
  flex:none
}
.loading {
  padding:60px;
  text-align:center
}
.shell {
  display:flex;
  min-height:100vh
}
.sidebar {
  width:238px;
  overflow-y:auto;
  position:fixed;
  inset:0 auto 0 0;
  background:#fff;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  padding:33px 19px 20px
}
.sidebar > * { flex-shrink:0; }
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 14px
}
.brandmark {
  background:var(--green);
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  color:#fff;
  border-radius:11px
}
.brandmark .icon {
  width:25px;
  height:25px
}
.brand strong {
  font-size:23px;
  letter-spacing:3px
}
.brand small {
  display:block;
  letter-spacing:1px;
  font-size:10px;
  margin-top:4px
}
.nav-label {
  font-size:10px;
  letter-spacing:2px;
  color:#9aa79f;
  margin:39px 16px 14px
}
.nav {
  display:flex;
  flex-direction:column;
  gap:7px
}
.nav button {
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px 15px;
  text-align:left;
  border-radius:8px;
  font-size:14px;
  color:#77867c
}
.nav button.active {
  background:var(--soft);
  color:var(--green);
  font-weight:600
}
.nav button:hover {
  background:#f3f7f4
}
.nav-count {
  margin-left:auto;
  font-size:10px;
  padding:2px 6px;
  border-radius:5px;
  background:#d8e8df;
  color:var(--green)
}
.side-bottom {
  margin-top:auto
}
.side-note {
  margin:25px 10px;
  padding:16px;
  border-radius:10px;
  background:#f6f8f6;
  font-size:12px;
  line-height:1.9;
  color:#849189
}
.profile {
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid var(--line);
  padding:20px 9px 0
}
.avatar {
  width:35px;
  height:35px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e5eee7;
  color:#58745e;
  font-weight:600;
  font-size:12px;
  flex:none
}
.profile-text {
  flex:1;
  min-width:0
}
.profile-text strong {
  display:block;
  font-size:12px;
  margin-bottom:4px
}
.profile-text small {
  font-size:10px
}
.main {
  margin-left:238px;
  flex:1;
  min-width:0
}
.topbar {
  height:80px;
  border-bottom:1px solid var(--line);
  padding:0 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff
}
.breadcrumb {
  font-size:12px;
  color:#8a978f
}
.breadcrumb strong {
  color:#42574a;
  font-weight:500
}
.top-actions {
  display:flex;
  align-items:center;
  gap:22px;
  font-size:12px;
  color:#7e8e82
}
.environment {
  display:flex;
  align-items:center;
  gap:6px
}
.dot {
  width:6px;
  height:6px;
  display:inline-block;
  border-radius:50%;
  background:#4b9774
}
.icon-button {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid var(--line);
  border-radius:7px
}
.content {
  max-width:1510px;
  margin:auto;
  padding:35px 42px 40px
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:28px
}
.eyebrow {
  color:#8b9a90;
  font-size:11px;
  letter-spacing:1.5px;
  margin-bottom:8px
}
.subtitle {
  font-size:12px;
  color:#87968b;
  margin-top:10px;
  line-height:1.8
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:11px 17px;
  border-radius:7px;
  background:var(--green);
  color:white;
  font-size:12px;
  font-weight:500;
  white-space:nowrap
}
.button.secondary {
  background:#fff;
  color:#4b6254;
  border:1px solid #dce5de
}
.button.danger {
  background:#af4b43
}
.button .icon {
  width:15px;
  height:15px
}
.button.small {
  padding:8px 12px;
  font-size:11px
}
.button:hover {
  filter:brightness(.96)
}
.welcome {
  background:#eaf1e9;
  border:1px solid #dfe9dd;
  border-radius:12px;
  padding:27px 31px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px
}
.welcome h2 {
  font-size:22px;
  line-height:1.5;
  letter-spacing:-.5px
}
.welcome p {
  font-size:12px;
  color:#7d917e;
  line-height:1.9;
  margin-top:9px
}
.welcome-art {
  width:138px;
  height:110px;
  position:relative;
  flex:none;
  margin-right:17px
}
.art-sheet {
  position:absolute;
  background:#f9fcf6;
  border:1px solid #cddcc9;
  border-radius:7px;
  width:75px;
  height:90px;
  transform:rotate(-12deg);
  left:8px;
  top:8px;
  box-shadow:0 8px 20px #55765310
}
.art-sheet:before,.art-sheet:after {
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  height:4px;
  background:#c4d6bc;
  top:25px;
  box-shadow:0 14px 0 #d5e2cf,0 28px 0 #d5e2cf
}
.art-sheet:after {
  background:#d8e6d2;
  transform:rotate(24deg);
  left:27px;
  right:-21px;
  top:-4px;
  height:90px;
  z-index:-1;
  border-radius:6px
}
.art-check {
  position:absolute;
  right:4px;
  bottom:8px;
  background:#347356;
  border:7px solid #eaf1e9;
  color:#fff;
  width:51px;
  height:51px;
  border-radius:50%;
  display:grid;
  place-items:center
}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:17px;
  margin-bottom:27px
}
.metric {
  padding:21px 22px;
  background:white;
  border:1px solid var(--line);
  border-radius:10px
}
.metric-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#7b8e80
}
.metric-icon {
  width:32px;
  height:32px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#edf5ef;
  color:#4e8264
}
.metric-icon.orange {
  background:#fcf2e6;
  color:#c69554
}
.metric-icon.blue {
  background:#eef2fb;
  color:#7c90b3
}
.metric-icon.purple {
  background:#f3eff8;
  color:#a491b3
}
.metric-number {
  font-size:31px;
  font-weight:600;
  letter-spacing:-1px;
  margin:12px 0 10px;
  color:#294336
}
.metric-number span {
  font-size:12px;
  font-weight:400;
  margin-left:5px;
  color:#9aa69d;
  letter-spacing:0
}
.metric-foot {
  font-size:10px;
  color:#96a197
}
.metric-foot b {
  color:#5e8a6a;
  font-weight:400
}
.dashboard-grid {
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);
  gap:22px;
  align-items:start
}
.panel {
  border:1px solid var(--line);
  border-radius:11px;
  background:white;
  overflow:hidden;
  margin-bottom:22px
}
.panel-head {
  padding:22px 23px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.panel-head h2 {
  font-size:14px
}
.panel-head small {
  display:block;
  font-size:10px;
  margin-top:7px
}
.text-link {
  font-size:11px;
  color:#879b8c;
  display:inline-flex;
  align-items:center;
  gap:5px
}
.tabs {
  display:flex;
  gap:22px;
  padding:0 24px;
  border-bottom:1px solid var(--line);
  overflow:auto
}
.tabs button {
  padding:12px 0;
  font-size:12px;
  color:#8b998f;
  white-space:nowrap;
  border-bottom:2px solid transparent
}
.tabs button.active {
  color:var(--green);
  border-bottom-color:var(--green);
  font-weight:600
}
.tab-count {
  font-size:10px;
  margin-left:5px;
  background:#eff4f0;
  border-radius:4px;
  padding:1px 5px
}
.table-scroll {
  overflow:auto
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:12px
}
th {
  font-size:10px;
  font-weight:400;
  color:#8c9b90;
  background:#fafcf9;
  padding:12px 22px;
  white-space:nowrap
}
td {
  padding:18px 22px;
  border-top:1px solid #f0f4ef;
  white-space:nowrap;
  color:#687e6d
}
td.title-cell {
  white-space:normal;
  min-width:180px;
  max-width:360px;
  color:#354e3c;
  font-weight:500
}
.title-cell small {
  display:block;
  font-size:10px;
  font-weight:400;
  margin-top:7px;
  color:#96a194
}
.row-button {
  text-align:left;
  padding:0;
  font-weight:500;
  line-height:1.7
}
.row-button:hover {
  color:var(--green);
  text-decoration:underline
}
.badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 8px;
  border-radius:5px;
  font-size:10px;
  white-space:nowrap;
  background:#f0f3f0;
  color:#859285
}
.badge.pending,.badge.review,.badge.high,.badge.open {
  background:#fcf2df;
  color:#b98d40
}
.badge.confirmed,.badge.done,.badge.resolved,.badge.paid {
  background:#eaf4eb;
  color:#60916a
}
.badge.approved,.badge.doing,.badge.processing {
  background:#edf2fb;
  color:#7492b4
}
.badge.rejected {
  background:#fbeeea;
  color:#b97566
}
.badge.low {
  background:#f0f4f1;
  color:#8b9c90
}
.progress {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:#8a998d
}
.progress-track {
  width:66px;
  height:4px;
  background:#edf1ed;
  border-radius:4px;
  overflow:hidden
}
.progress-fill {
  height:100%;
  background:#68967a;
  border-radius:4px
}
.person {
  display:flex;
  align-items:center;
  gap:8px
}
.person .avatar {
  width:25px;
  height:25px;
  font-size:9px;
  background:#f0eae1;
  color:#a68c69
}
.right-list {
  padding:0 22px
}
.compact-item {
  padding:16px 0;
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-top:1px solid #f0f4ef
}
.item-icon {
  width:33px;
  height:35px;
  border-radius:7px;
  display:grid;
  place-items:center;
  color:#91a582;
  background:#f0f5eb;
  flex:none
}
.item-icon .icon {
  width:16px;
  height:16px
}
.item-content {
  flex:1;
  min-width:0
}
.item-content h3 {
  font-size:12px;
  font-weight:500;
  line-height:1.6
}
.item-content p {
  font-size:10px;
  color:#9aa497;
  margin-top:7px;
  line-height:1.8
}
.amount {
  font-size:13px;
  font-weight:600;
  color:#4b6350;
  white-space:nowrap
}
.quick-actions {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:5px 16px 21px;
  gap:8px
}
.quick {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:11px;
  color:#758c7b;
  padding:13px 0
}
.quick:hover {
  background:#f5f8f4;
  border-radius:8px
}
.quick-icon {
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  background:#eff5f0;
  border-radius:11px;
  color:#669178
}
.footer {
  font-size:10px;
  color:#a1aca3;
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:17px
}
.toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap
}
.search {
  position:relative;
  min-width:220px
}
.search input {
  padding-left:34px;
  background:#f8faf8
}
.search .icon {
  position:absolute;
  left:11px;
  top:11px;
  width:16px;
  height:16px;
  color:#8a9c90
}
input,select,textarea {
  width:100%;
  padding:11px 12px;
  border:1px solid #dfe7e0;
  border-radius:6px;
  background:#fff;
  color:#354b3b;
  font-size:12px
}
textarea {
  min-height:100px;
  resize:vertical;
  line-height:1.8
}
input:focus,select:focus,textarea:focus {
  outline:2px solid #a4c6b0;
  outline-offset:1px
}
input[type=checkbox] {
  width:auto;
  accent-color:var(--green)
}
.filter-select {
  width:auto;
  min-width:130px
}
.expense-toolbar .expense-filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  flex:1
}
.expense-filter {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  color:#61786c;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap
}
.expense-filter span {
  border-radius:4px;
  padding:1px 5px;
  background:#f0f5f2;
  font-size:11px
}
.expense-filter:hover,.expense-filter.active {
  color:var(--green);
  border-color:#bad7c8;
  background:#ecf5ef
}
.expense-filter:focus-visible {
  outline:2px solid #a4c6b0;
  outline-offset:2px
}
@media(max-width:700px) {
  .expense-toolbar .expense-filters {
    flex-basis:100%;
    order:3
  }
}
.empty {
  text-align:center;
  padding:45px 20px;
  color:#94a295;
  font-size:13px;
  line-height:2
}
.help-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  padding:22px
}
.help-card {
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px
}
.help-card h3 {
  line-height:1.8;
  font-size:14px
}
.help-card p {
  font-size:12px;
  color:#8a998e;
  line-height:1.9;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.help-card-bottom {
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  color:#9aa89d
}
.help-card .row-button {
  font-size:14px
}
.row-between {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.role-chip {
  display:inline-block;
  background:#edf4ee;
  color:#62856c;
  font-size:10px;
  padding:4px 7px;
  border-radius:4px;
  margin:2px
}
.login-page {
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  background:white
}
.login-story {
  background:#eaf1e9;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10%;
  position:relative
}
.login-story .brand {
  padding:0;
  position:absolute;
  top:50px;
  left:10%
}
.login-story h1 {
  font-size:43px;
  line-height:1.65;
  letter-spacing:-1.5px;
  margin-top:40px
}
.login-story>p {
  font-size:14px;
  line-height:2.1;
  color:#7e9380;
  margin-top:24px;
  max-width:330px
}
.login-story .welcome-art {
  margin:45px 0 0 20px;
  transform:scale(1.4);
  transform-origin:left top
}
.login-form-wrap {
  padding:60px;
  display:flex;
  align-items:center;
  justify-content:center
}
.login-form {
  width:100%;
  max-width:360px
}
.login-form h2 {
  font-size:26px;
  margin-bottom:10px
}
.login-form>p {
  font-size:12px;
  color:#8a988e;
  line-height:1.8;
  margin-bottom:29px
}
.field {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:18px
}
.field>label,.field-label {
  font-size:12px;
  color:#5e7565
}
.field-help {
  font-size:10px;
  color:#99a699;
  line-height:1.8
}
.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.form-error {
  font-size:12px;
  color:#b65f4f;
  background:#fff4ef;
  border-radius:6px;
  padding:12px;
  margin-bottom:15px;
  line-height:1.8
}
.form-error:empty {
  display:none
}
.login-form .button {
  width:100%;
  padding:13px
}
.demo-box {
  background:#f7f9f5;
  border:1px solid var(--line);
  border-radius:8px;
  padding:15px;
  margin-top:25px;
  font-size:11px;
  line-height:2;
  color:#819381
}
.demo-accounts {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:9px
}
.demo-accounts button {
  border:1px solid #dae5d8;
  border-radius:5px;
  padding:4px 9px;
  font-size:10px;
  background:#fff
}
.demo-accounts button:hover {
  border-color:var(--green);
  color:var(--green)
}
dialog {
  width:min(650px,calc(100% - 28px));
  max-height:90vh;
  padding:0;
  border:1px solid var(--line);
  border-radius:13px;
  color:#324c3a;
  box-shadow:0 30px 100px #163d3026
}
dialog::backdrop {
  background:#142e255e;
  backdrop-filter:blur(3px)
}
.modal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 27px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:#fff;
  z-index:1
}
.modal-head h2 {
  font-size:17px
}
.modal-body {
  padding:25px 27px
}
.modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid var(--line);
  padding:18px 27px
}
.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:22px 0
}
.detail-grid dt {
  font-size:11px;
  color:#99a599;
  margin-bottom:8px
}
.detail-grid dd {
  margin:0;
  font-size:13px
}
.detail-description {
  font-size:13px;
  line-height:2;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:#f7faf6;
  padding:17px;
  border-radius:7px;
  margin:15px 0 23px
}
.section-title {
  font-size:12px;
  font-weight:600;
  margin:24px 0 14px
}
.timeline {
  border-left:1px solid #dce8dd;
  margin:15px 0 20px 5px;
  padding-left:20px
}
.timeline-item {
  position:relative;
  font-size:12px;
  margin-bottom:22px
}
.timeline-item:before {
  content:"";
  width:7px;
  height:7px;
  background:#8ab19a;
  border:3px solid white;
  border-radius:50%;
  position:absolute;
  left:-27px;
  top:0
}
.timeline-item p {
  line-height:1.9;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin-top:7px;
  color:#6f8475
}
.timeline-item small {
  font-size:10px
}
.attachment {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--line);
  padding:12px;
  border-radius:6px;
  margin-bottom:8px;
  font-size:12px;
  overflow-wrap:anywhere
}
.attachment small {
  margin-left:auto;
  white-space:nowrap;
  font-size:10px
}
.inline-form {
  padding:20px;
  background:#f7faf6;
  border:1px solid var(--line);
  border-radius:8px;
  margin-top:22px
}
.inline-form h3 {
  font-size:13px;
  margin-bottom:18px
}
.inline-form .button {
  margin-top:5px
}
.checks {
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  padding:8px 0
}
.checks label {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px
}
.range-row {
  display:flex;
  gap:15px;
  align-items:center
}
.range-row input {
  padding:0;
  accent-color:var(--green)
}
.range-row output {
  font-size:14px;
  min-width:40px;
  color:var(--green)
}
#toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translate(-50%,20px);
  background:#254c39;
  color:white;
  padding:13px 24px;
  border-radius:8px;
  font-size:12px;
  z-index:10;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  max-width:90vw
}
#toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
.mobile-menu {
  display:none
}
.file-list {
  font-size:11px;
  line-height:1.9;
  color:#839588;
  margin-top:8px
}
.account-summary {
  display:flex;
  gap:15px;
  align-items:center;
  margin-bottom:24px
}
.account-summary .avatar {
  width:50px;
  height:50px;
  font-size:17px
}
.notice {
  padding:12px 15px;
  background:#fff8e9;
  color:#a18a56;
  font-size:11px;
  line-height:1.9;
  border-radius:6px;
  margin:15px 0
}
.activity-list {
  padding:0 23px 10px
}
.activity-item {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:11px;
  color:#718775;
  padding:16px 0;
  border-top:1px solid var(--line)
}
.brand strong {
  font-size:20px;
  letter-spacing:1px;
  white-space:nowrap
}
.brand small {
  font-size:10px;
  letter-spacing:2px
}
.sidebar .brand {
  padding:0 7px;
  gap:9px
}
.sidebar .brandmark {
  width:32px;
  height:32px;
  border-radius:9px
}
@media(min-width:1550px) {
  .content {
    padding-top:42px
  }
  .welcome {
    padding-top:34px;
    padding-bottom:34px
  }
  .metric {
    padding:25px
  }
  .panel-head {
    padding-top:25px;
    padding-bottom:20px
  }
}
@media(max-width:1200px) {
  .sidebar {
    width:204px;
    padding-left:13px;
    padding-right:13px
  }
  .main {
    margin-left:204px
  }
  .topbar {
    padding:0 26px
  }
  .content {
    padding:28px 26px
  }
  .dashboard-grid {
    grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);
    gap:16px
  }
  td,th {
    padding-left:15px;
    padding-right:15px
  }
  .metric {
    padding:18px
  }
  .help-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .top-actions {
    gap:15px
  }
  .welcome-art {
    margin-right:0
  }
}
@media(max-width:960px) {
  .dashboard-grid {
    grid-template-columns:1fr
  }
  .metrics {
    gap:12px
  }
  .metric {
    padding:17px 14px
  }
  .metric-top {
    font-size:11px
  }
  .metric-icon {
    width:27px;
    height:27px
  }
  .metric-number {
    font-size:27px
  }
  .welcome {
    padding:23px
  }
  .help-grid {
    padding:16px
  }
  .login-form-wrap {
    padding:35px
  }
  .login-story h1 {
    font-size:32px
  }
  .footer {
    flex-direction:column;
    gap:8px
  }
  .top-actions .date {
    display:none
  }
}
@media(max-width:700px) {
  .sidebar {
    transform:translateX(-100%);
    z-index:5;
    width:230px;
    transition:transform .2s;
    box-shadow:10px 0 40px #233f381a
  }
  .sidebar.open {
    transform:translateX(0)
  }
  .main {
    margin-left:0
  }
  .topbar {
    height:62px;
    padding:0 18px
  }
  .mobile-menu {
    display:block;
    margin-right:10px
  }
  .breadcrumb {
    display:flex;
    align-items:center;
    font-size:11px
  }
  .top-actions {
    gap:10px
  }
  .content {
    padding:25px 17px
  }
  .page-heading {
    align-items:flex-start;
    margin-bottom:22px
  }
  h1 {
    font-size:23px
  }
  .page-heading .button {
    padding:10px 12px;
    font-size:11px
  }
  .subtitle {
    font-size:11px
  }
  .metrics {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
    margin-bottom:21px
  }
  .welcome h2 {
    font-size:18px
  }
  .welcome p {
    font-size:11px
  }
  .welcome-art {
    width:90px;
    transform:scale(.8);
    transform-origin:right center;
    margin-left:-15px
  }
  .welcome {
    padding:21px 18px
  }
  .panel-head {
    padding:20px 18px 15px
  }
  .right-list {
    padding:0 18px
  }
  .help-grid {
    grid-template-columns:1fr
  }
  .login-page {
    display:block
  }
  .login-story {
    min-height:240px;
    padding:75px 28px 25px
  }
  .login-story .brand {
    top:25px;
    left:28px
  }
  .login-story h1 {
    font-size:25px;
    margin:0
  }
  .login-story>p {
    margin-top:10px;
    font-size:12px
  }
  .login-story .welcome-art {
    display:none
  }
  .login-form-wrap {
    padding:35px 28px
  }
  .login-form {
    max-width:420px
  }
  .modal-body {
    padding:22px 20px
  }
  .modal-head {
    padding:20px
  }
  .modal-actions {
    padding:17px 20px
  }
  .field-row {
    gap:12px
  }
  .search {
    min-width:0;
    flex:1
  }
  .toolbar {
    padding:15px
  }
  .tabs {
    padding:0 18px;
    gap:20px
  }
  .environment {
    font-size:10px
  }
  .footer {
    margin-top:10px
  }
  .detail-grid {
    gap:15px
  }
  .metric-foot {
    font-size:9px
  }
}

.password-control { position:relative; width:100%; }
.password-control input { padding-right:64px; width:100%; }
.password-toggle { position:absolute; right:7px; top:50%; transform:translateY(-50%); padding:8px 10px; border-radius:5px; color:var(--green); font-size:12px; font-weight:600; }
.password-toggle:hover { background:var(--soft); }
.password-toggle:focus-visible { outline:2px solid var(--green); outline-offset:1px; }

.receipt-cell { min-width:92px; }
.receipt-actions { display:flex; gap:14px; align-items:center; white-space:nowrap; }
.receipt-cell .receipt-actions { margin-top:7px; }
.receipt-filename { display:flex; align-items:center; gap:8px; min-width:0; overflow-wrap:anywhere; }
.attachment .receipt-actions { flex-shrink:0; margin-left:auto; }
#receipt-modal { width:min(1100px,calc(100vw - 32px)); max-width:1100px; }
.receipt-body { padding:20px; }
.receipt-file-list { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.receipt-file { display:flex; align-items:center; gap:14px; padding:9px 12px; border:1px solid var(--line); border-radius:6px; max-width:100%; }
.receipt-file.active { background:var(--soft); border-color:#a5cbbb; }
.receipt-file > button { display:flex; align-items:center; gap:7px; text-align:left; min-width:0; }
.receipt-file > button span { overflow-wrap:anywhere; }
.receipt-file > a { flex-shrink:0; }
.receipt-viewer { background:#f1f4f2; border:1px solid var(--line); border-radius:8px; min-height:200px; display:flex; justify-content:center; align-items:center; }
.receipt-viewer img { display:block; max-width:100%; max-height:65vh; object-fit:contain; }
.receipt-viewer iframe { display:block; width:100%; height:65vh; border:0; background:white; }
.receipt-viewer-footer { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-top:14px; font-size:12px; }
.receipt-viewer-footer span { min-width:0; overflow-wrap:anywhere; }
.receipt-viewer-footer a { flex-shrink:0; }
@media(max-width:700px) {
  .receipt-body { padding:14px; }
  .receipt-filename { flex-wrap:wrap; }
  .attachment { gap:12px; }
  .receipt-viewer img { max-height:58vh; }
  .receipt-file { width:100%; justify-content:space-between; }
}