:root { color-scheme: dark; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; color: #e9eef8; background: #151a23; font-size: 14px; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button, .file-button { min-height: 36px; padding: 7px 12px; border: 1px solid #465469; border-radius: 5px; background: #202733; color: #e9eef8; cursor: pointer; }
button:hover, .file-button:hover { background: #293547; }
button:disabled { opacity: .5; cursor: not-allowed; }
.primary { background: #285f94; border-color: #467eaf; }
.primary:hover { background: #326da7; }
a { color: inherit; }
:focus-visible { outline: 2px solid #65c2ff; outline-offset: 3px; }
input, select { min-height: 38px; width: 100%; border: 1px solid #465469; border-radius: 5px; background: #151a23; color: #e9eef8; padding: 7px 9px; }
label { display: grid; gap: 7px; color: #b6c0cf; }
h1 { font-size: 23px; font-weight: 600; margin: 0; }
h2 { font-size: 17px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
p { line-height: 1.7; }
.topbar { min-height: 66px; padding: 14px 28px; border-bottom: 1px solid #303947; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-size: 23px; font-weight: 650; text-decoration: none; letter-spacing: -.7px; }
.brand span { margin-left: 12px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: #b6c0cf; }
#account { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#account-name { color: #b6c0cf; }
main { max-width: 1460px; padding: 0 28px 40px; margin: auto; }
#message { min-height: 24px; margin: 12px 0; color: #a7d8ff; overflow-wrap: anywhere; }
#message.problem { color: #ffc857; }
.auth-view { width: min(100%, 360px); margin: 8vh auto 0; }
.auth-view form { display: grid; gap: 18px; margin: 26px 0 18px; }
.muted { color: #a0adbf; font-size: 13px; }
.navigation { display: flex; gap: 24px; border-bottom: 1px solid #303947; margin-bottom: 25px; }
.navigation button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 10px 0 13px; color: #a0adbf; }
.navigation button[aria-current] { color: #e9eef8; border-color: #65c2ff; }
.heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 0 20px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.file-button { position: relative; display: inline-flex; align-items: center; overflow: hidden; color: #e9eef8; }
.file-button input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.file-button:focus-within { outline: 2px solid #65c2ff; outline-offset: 3px; }
.session-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 430px; border-top: 1px solid #303947; }
aside { border-right: 1px solid #303947; padding: 18px 18px 0 0; }
.search-label { font-size: 12px; margin-bottom: 15px; }
#session-list { display: grid; align-content: start; gap: 3px; max-height: 68vh; overflow: auto; }
.session-item { display: grid; text-align: left; gap: 7px; width: 100%; border: 0; border-radius: 5px; background: transparent; padding: 13px 10px; }
.session-item[aria-current] { background: #283448; box-shadow: inset 3px 0 #65c2ff; }
.session-item strong { font-weight: 500; overflow-wrap: anywhere; }
.session-item small { font-size: 12px; color: #a0adbf; }
.detail { min-width: 0; padding: 22px 0 0 26px; }
#session-meta { margin: 8px 0 0; overflow-wrap: anywhere; }
.filters { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin: 22px 0; }
.filters label { min-width: 130px; font-size: 12px; }
#note-count { padding-bottom: 9px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { color: #a0adbf; font-size: 12px; font-weight: 500; white-space: nowrap; }
th, td { padding: 13px 12px; border-bottom: 1px solid #303947; vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
td { line-height: 1.65; }
.note-time { min-width: 145px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: pre-line; }
.note-status { white-space: pre-line; }
.note-text { min-width: 160px; max-width: 400px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cell-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.danger { color: #ffb4aa; }
.inline-form { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; padding: 20px 0 28px; border-bottom: 1px solid #303947; margin-bottom: 18px; }
.inline-form label { min-width: 150px; flex: 1; max-width: 300px; }
.inline-form h2 { align-self: center; }
.empty { color: #a0adbf; padding: 24px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) { .topbar { padding: 14px 16px; flex-wrap: wrap; } main { padding: 0 16px 30px; } .session-layout { grid-template-columns: minmax(0, 1fr); } aside { border-right: 0; border-bottom: 1px solid #303947; padding: 16px 0; } #session-list { max-height: 220px; } .detail { padding: 20px 0 0; } .heading { align-items: start; flex-wrap: wrap; } input, select { font-size: 16px; } }