/* Low-glare sage and warm-neutral theme for the browser workspace. */
:root {
  color-scheme: light;
  --green: #416a57;
  --line: #d5ddd3;
  --muted: #68796d;
  --lime: #dce7d4;
  color: #293b32;
  background: #e9eee7;
}

html, body { background: #e9eee7; color: #293b32; }
body { background: linear-gradient(145deg, #eef1e9 0%, #e7ece4 62%, #e5ebe5 100%); }
::selection { background: #c6d9c5; color: #23392e; }
button, input, select, textarea { color: inherit; }
button { transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
button:hover:not(:disabled) { filter: none; }
button:focus-visible, a:focus-visible { outline-color: #638b70; }

.sidebar {
  background: #e0e8df;
  border-color: #d0d9cf;
  box-shadow: 1px 0 12px #344a3b0a;
}
.brand, .user-card { color: #304a3b; }
.brand small { color: #73867a; }
.brand img { filter: none; }
.navlabel { color: #788a7b; }
.nav button { color: #53695a; }
.nav button:hover { background: #d7e2d6; color: #304e3d; }
.nav button.active {
  background: #cdddcf;
  color: #2e5942;
  border: 1px solid #c1d2c2;
  box-shadow: inset 3px 0 #65866c;
}
.workspace-note { background: #e8eee3; border-color: #d2ddce; color: #566a59; }
.workspace-note strong { color: #365843; }
.user-card { border-color: #d1dbd0; }
.avatar { background: #cbdcc8; color: #3c6148; }

.topbar {
  background: #f1f2eb;
  border-color: #d7ded4;
  color: #6b796e;
  box-shadow: 0 2px 10px #35433708;
}
.topbar strong { color: #354d3e; }
.topbar .divider { color: #a6b0a5; }
.dot { background: #688c69; }
.main { max-width: 1540px; }
.eyebrow { color: #728774; }
.page-head h1 { color: #304c3a; }
.page-head p { color: #68796d; }

.metric, .panel {
  background: #f3f4ed;
  border-color: #d4ddd2;
  box-shadow: 0 4px 18px #32453808;
}
.metric { padding: 19px 21px; }
.metric-top { color: #687a6c; }
.metric-value { color: #385b45; }
.metric-value small, .metric .muted { color: #718174; }
.panel-head h2 { color: #354f3e; }
.banner { background: #edf0e2; border-color: #dce2c9; color: #687253; }

.btn {
  background: #52775e;
  color: #f7f7ef;
  box-shadow: 0 2px 5px #31483512;
}
.btn:hover:not(:disabled) { background: #466c54; box-shadow: 0 3px 9px #31483518; }
.btn.secondary { background: #e4ebe0; color: #3d6048; border: 1px solid #d4dfd1; }
.btn.secondary:hover:not(:disabled) { background: #dce7d9; }
.btn.plain { color: #5b7161; }
.btn.danger { background: #f1e5df; color: #8d5143; }
.pill { background: #e2ebde; color: #4c704f; }
.pill.gray { background: #e9ece7; color: #65746a; border-color: #dfe4dd; }
.pill.warn { background: #f2ebd9; color: #806b3d; }

input, select, textarea {
  background: #f8f8f2;
  color: #2e4035;
  border-color: #cbd6ca;
}
input::placeholder, textarea::placeholder { color: #89978a; }
input:focus, textarea:focus, select:focus {
  border-color: #719078;
  box-shadow: 0 0 0 3px #77967b20;
}
label { color: #526858; }
.muted, .small-note, .hint, .settings-list { color: #68796d; }
.filters button { color: #5e7162; }
.filters button.active { background: #dce8d9; color: #365e43; }
.account { background: #f3f4ed; border-color: #d4ddd2; }
.account:hover { border-color: #aabda9; }
.account-title { color: #354e3d; }
.account-details { color: #738174; }
.account-footer { border-color: #dce2d9; }
.phrase { border-color: #dce2d9; }
.phrase button, .phrase strong { color: #3f634a; }
.phrase p { color: #68796d; }
.empty, .empty p { color: #718174; }
.empty h3 { color: #45664b; }
.empty .empty-mark { color: #789476; }

table { color: #34483b; font-size: 13px; }
th { background: #e9eee5; color: #5e7261; font-size: 12px; }
td { border-color: #dce2d9; }
tbody tr:hover { background: #edf1e9; }
td .btn { box-shadow: none; }
#page > .panel:first-of-type:has(> h2) .table-wrap table { min-width: 0; table-layout: fixed; }
#page > .panel:first-of-type:has(> h2) .table-wrap th,
#page > .panel:first-of-type:has(> h2) .table-wrap td { padding: 13px 10px; overflow-wrap: anywhere; }
#page > .panel:first-of-type:has(> h2) .table-wrap th:nth-child(1) { width: 26%; }
#page > .panel:first-of-type:has(> h2) .table-wrap th:nth-child(2) { width: 24%; }
#page > .panel:first-of-type:has(> h2) .table-wrap th:nth-child(3) { width: 14%; }
#page > .panel:first-of-type:has(> h2) .table-wrap th:nth-child(4) { width: 12%; }
#page > .panel:first-of-type:has(> h2) .table-wrap th:nth-child(5) { width: 24%; }
#page > .panel:first-of-type:has(> h2) .table-wrap td:nth-child(3) { white-space: nowrap; }

dialog, .route-dialog {
  background: #f1f2eb;
  border-color: #cbd6ca;
  color: #2e4035;
  box-shadow: 0 18px 60px #26382d24;
}
dialog::backdrop, .route-dialog::backdrop { background: #34453a55; backdrop-filter: blur(2px); }
.dialog-head h2 { color: #354f3e; }
.form-stack .dialog-check { background: #e7ede2; color: #4f6654; }
.form-stack .dialog-check input { accent-color: #55785e; }
.switch-list { display: grid; gap: 10px; }
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 15px;
  border: 1px solid #d5ded2;
  border-radius: 11px;
  background: #e9eee6;
  cursor: pointer;
}
.switch-copy { display: grid; gap: 4px; }
.switch-copy strong { color: #385640; font-size: 13px; font-weight: 650; }
.switch-copy small { color: #68796d; font-size: 11px; line-height: 1.6; }
.switch-control { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; }
.switch-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
.switch-track {
  width: 42px;
  height: 24px;
  display: block;
  position: relative;
  border-radius: 20px;
  background: #bdc8bc;
  transition: background-color .16s ease;
}
.switch-track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f8f8f2;
  box-shadow: 0 1px 3px #26382d30;
  transition: transform .16s ease;
}
.switch-control input:checked + .switch-track { background: #64846a; }
.switch-control input:checked + .switch-track::after { transform: translateX(18px); }
.switch-control input:focus-visible + .switch-track { outline: 3px solid #75937870; outline-offset: 3px; }
.error { color: #a05443; }
.outcome { background: #e8ede3; color: #465c4a; }
#toast { background: #3f654c; color: #f6f6ee; box-shadow: 0 5px 18px #27392d2b; }
a { color: #426b4e; }

.server-picker {
  background: #e8eee5 !important;
  color: #526c58 !important;
  border-color: #ccd8cb !important;
}
.server-picker:hover { background: #dfe9dc !important; }
.route-heading h2 { color: #354f3e; }
.route-heading small, .route-close, .route-node button { color: #66816a; }
.route-dialog p, .route-node small { color: #66776a; }
.route-option { background: #e7ede2; border-color: #cbd8c9; }
.route-option strong { color: #385640; }
.route-option small { color: #68796d; }
.route-option em { background: #d4e2d0; color: #37563d; }
.route-node { background: #e8ede5; border-color: #d0dacf; }
.route-node strong, .route-node dd { color: #354c3b; }
.route-node p { color: #607360; }
.route-state { color: #527950; }
.route-state.offline { color: #a05443; }
.route-primary { background: #52775e; color: #f7f7ef; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #e7ece5; }
::-webkit-scrollbar-thumb { background: #bdcbbd; border: 2px solid #e7ece5; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #aabca9; }

@media (max-width: 800px) {
  .sidebar { background: #e0e8df; }
  .topbar { background: #f1f2eb; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}