:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --text: #17202a;
  --muted: #667085;
  --border: #dfe3ea;
  --primary: #176b5b;
  --primary-dark: #105247;
  --green: #16794b;
  --green-bg: #e8f7ef;
  --red: #b42318;
  --red-bg: #fff0ee;
  --yellow: #9a6700;
  --yellow-bg: #fff7d6;
  --blue: #175cd3;
  --blue-bg: #eef4ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--primary); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem max(1rem, calc((100vw - 1400px) / 2)); background: #11231f; color: white; }
.topbar a { color: white; text-decoration: none; }
.brand { font-weight: 750; letter-spacing: -.02em; }
.topbar nav { display: flex; gap: 1.2rem; font-size: .93rem; }
.container { max-width: 1400px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.4rem; }
h1 { margin: 0 0 .55rem; font-size: 1.75rem; }
h2 { margin-top: 0; }
p { color: var(--muted); line-height: 1.55; }
.heading-actions, .actions, .form-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 6px 25px rgb(16 24 40 / 5%); }
table { width: 100%; border-collapse: collapse; font-size: .91rem; }
th, td { padding: .9rem .8rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .045em; background: #fafbfc; }
tr:last-child td { border-bottom: 0; }
.status-row-available { box-shadow: inset 4px 0 var(--green); }
.status-row-unavailable, .status-row-error { box-shadow: inset 4px 0 var(--red); }
.status-row-session_expired { box-shadow: inset 4px 0 #eaaa08; }
.status-row-checking { box-shadow: inset 4px 0 var(--blue); }
.highlighted { animation: highlight 2s ease-out; }
@keyframes highlight { 0% { background: #eaf7f3; } 100% { background: transparent; } }
.path, .subtle, .capture { display: block; color: var(--muted); font-size: .78rem; margin-top: .3rem; max-width: 350px; overflow-wrap: anywhere; }
.capture { color: var(--blue); }
.capture-error { color: var(--red); }
.badge { display: inline-block; padding: .25rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.badge-available { color: var(--green); background: var(--green-bg); }
.badge-unavailable, .badge-error { color: var(--red); background: var(--red-bg); }
.badge-session_expired { color: var(--yellow); background: var(--yellow-bg); }
.badge-checking { color: var(--blue); background: var(--blue-bg); }
.badge-unknown { color: #475467; background: #f2f4f7; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--primary); border-radius: 8px; background: var(--primary); color: white; padding: .58rem .85rem; cursor: pointer; font: inherit; font-weight: 650; text-decoration: none; }
.button:hover { background: var(--primary-dark); }
.button:disabled { cursor: wait; opacity: .55; }
.button-small { padding: .38rem .58rem; font-size: .78rem; }
.button-secondary { background: white; color: #344054; border-color: #cfd5dd; }
.button-secondary:hover { background: #f7f8fa; }
.button-success { background: var(--green); border-color: var(--green); }
.button-warning { background: #c48200; border-color: #c48200; }
.button-danger { background: white; color: var(--red); border-color: #f2b8b5; }
.button-danger:hover { background: var(--red-bg); }
.error-details { margin-top: .35rem; max-width: 360px; color: var(--red); font-size: .78rem; }
.error-details summary { cursor: pointer; }
.error-details span { display: block; margin-top: .25rem; overflow-wrap: anywhere; }
.rename-form { margin-top: .45rem; font-size: .78rem; color: var(--muted); }
.rename-form summary { cursor: pointer; }
.rename-inline { display: flex; gap: .4rem; align-items: center; margin-top: .45rem; }
.rename-inline input[type="text"] { min-width: 170px; padding: .4rem .5rem; }
.flashes { display: grid; gap: .5rem; margin-bottom: 1rem; }
.flash { border-radius: 9px; padding: .75rem 1rem; border: 1px solid; }
.flash-success { color: var(--green); background: var(--green-bg); border-color: #a7dfc1; }
.flash-error { color: var(--red); background: var(--red-bg); border-color: #f2b8b5; }
.flash-warning { color: var(--yellow); background: var(--yellow-bg); border-color: #ecd17a; }
.form-card, .empty-state { max-width: 680px; margin: 1.5rem auto; padding: 1.6rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 6px 25px rgb(16 24 40 / 5%); }
.stacked-form { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.or-divider { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .8rem; margin: .2rem 0; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
label { display: grid; gap: .4rem; font-weight: 650; }
input[type="text"], input[type="password"], input[type="file"] { width: 100%; border: 1px solid #cbd1d9; border-radius: 8px; padding: .68rem .75rem; background: white; color: var(--text); font: inherit; }
input:focus { outline: 3px solid rgb(23 107 91 / 15%); border-color: var(--primary); }
small { color: var(--muted); font-weight: 400; }
.warning-box { color: var(--yellow); background: var(--yellow-bg); padding: .75rem; border-radius: 8px; margin: 0; }
.selection-box { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; padding: .85rem 1.1rem; border: 1px solid #a7dfc1; border-radius: 10px; background: var(--green-bg); color: var(--green); }
.selection-box .subtle { margin-top: 0; }
.creds-form { margin-top: .45rem; font-size: .82rem; }
.creds-form summary { cursor: pointer; color: var(--primary); }
.creds-inline { display: grid; gap: .5rem; margin-top: .55rem; padding: .6rem; border: 1px solid var(--border); border-radius: 8px; background: #fafbfc; min-width: 240px; }
.creds-inline label { font-weight: 600; font-size: .76rem; }
.creds-inline input { padding: .4rem .5rem; font-size: .8rem; }
footer { padding: 1rem; text-align: center; color: var(--muted); font-size: .82rem; }
.instruction-list { display: grid; gap: .8rem; padding-left: 1.4rem; line-height: 1.5; }
code { overflow-wrap: anywhere; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin: 1rem 0 1.3rem; }
.metric-grid.compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.metric-card, .panel-card, .service-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 6px 25px rgb(16 24 40 / 5%); }
.metric-card { padding: 1rem; }
.metric-card span { display: block; color: var(--muted); font-size: .78rem; margin-bottom: .4rem; }
.metric-card strong { font-size: 1.2rem; overflow-wrap: anywhere; }
.panel-card { padding: 1.2rem; margin: 1rem 0; }
.panel-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.panel-title-row h2 { margin-bottom: .35rem; }
.panel-title-row p { margin: 0; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; }
.service-card { padding: 1rem; box-shadow: none; }
.service-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.service-card .actions { margin-top: .9rem; }
.log-view { max-height: 34rem; overflow: auto; padding: 1rem; border-radius: 10px; background: #0b1412; color: #d9eee8; font: .8rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
.log-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.log-grid .panel-card { margin: 0; }
.log-view-short { min-height: 14rem; max-height: 20rem; }

@media (max-width: 760px) {
  .topbar, .page-heading, .panel-title-row { align-items: flex-start; flex-direction: column; }
  .log-grid { grid-template-columns: 1fr; }
  .topbar { gap: .7rem; }
  .topbar nav { flex-wrap: wrap; }
}