:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17283b; background: #f4f6f9; font-size: 15px; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; gap: 1.5rem; align-items: center; padding: 1rem 1.75rem; border-bottom: 1px solid #d9e0e8; background: #fff; }
header strong { font-size: 1.3rem; margin-right: auto; }
.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 75px); }
.sidebar { padding: 1.25rem; border-right: 1px solid #d9e0e8; background: #fff; }
.sidebar button { display: block; width: 100%; text-align: left; margin-bottom: .35rem; text-transform: capitalize; }
.content { padding: 2rem; min-width: 0; }
h1 { font-size: 1.9rem; line-height: 1.25; margin: .5rem 0 1rem; font-weight: 650; }
h2 { font-size: 1.15rem; }
p { line-height: 1.6; }
.eyebrow { font-size: .72rem; color: #53657c; font-weight: 700; letter-spacing: .13em; margin-top: 1.5rem; }
.muted { color: #53657c; font-size: .85rem; }
.panel { padding: 1.5rem; border: 1px solid #d9e0e8; border-radius: 10px; background: #fff; margin: 1rem 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.cards .panel { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin: 1rem 0; }
.toolbar .field { flex: 1 1 180px; }
button { font: inherit; cursor: pointer; padding: .65rem .95rem; border: 1px solid #c4cfdb; border-radius: 6px; color: #223a53; background: #fff; line-height: 1.2; }
button:hover { background: #eaf0f7; border-color: #8ba0b8; }
button:disabled { cursor: wait; opacity: .6; }
button.primary { background: #194f91; color: #fff; border-color: #194f91; }
button.primary:hover { background: #103e76; }
button.danger { color: #a82330; }
button + button { margin-left: .4rem; }
.sidebar button + button { margin-left: 0; }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .9rem; font-size: .9rem; }
.field > span { font-weight: 600; }
input, select, textarea { border: 1px solid #b4c2d2; background: white; color: #17283b; border-radius: 5px; padding: .65rem; font: inherit; width: 100%; min-width: 0; }
input:disabled, select:disabled, textarea:disabled { background: #edf0f4; }
:focus-visible { outline: 3px solid #3677c0; outline-offset: 3px; }
.record-form { max-width: 760px; }
.notice { padding: 1rem; background: #e5f2ec; border: 1px solid #91bfa7; border-radius: 6px; margin-bottom: 1rem; white-space: pre-wrap; }
.notice.error { background: #fff0ef; color: #8d2030; border-color: #dfa6ac; }
[hidden] { display: none !important; }
.table-wrap { overflow: auto; background: white; border: 1px solid #d9e0e8; border-radius: 8px; margin: 1rem 0; }
table { border-collapse: collapse; min-width: 100%; font-size: .9rem; }
th, td { padding: .8rem 1rem; border-bottom: 1px solid #e5eaf0; text-align: left; white-space: pre-wrap; max-width: 400px; overflow-wrap: anywhere; }
th { background: #edf2f8; font-weight: 600; }
tbody tr:hover { background: #f7f9fc; }
.empty { padding: 1rem; color: #53657c; }
.details { display: grid; grid-template-columns: minmax(130px, 1fr) 3fr; gap: 1rem; }
dt { font-weight: 600; }
.mask-section { border: 1px solid #d9e0e8; border-radius: 6px; padding: 1rem; margin: 0 0 1rem; min-width: 0; }
.mask-section legend { font-weight: 600; padding: 0 .4rem; }
dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.login { width: min(440px, calc(100% - 2rem)); margin: 8vh auto; padding: 2rem; }
.login button { width: 100%; }
summary { cursor: pointer; font-weight: 600; padding: .5rem 0; }
.code, pre { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
dialog { border: 1px solid #b4c2d2; border-radius: 10px; width: min(650px, 90vw); max-height: 80vh; overflow: auto; }
dialog::backdrop { background: #17283b80; }
dialog button { margin: .3rem; }
a { color: #194f91; }
@media (max-width: 760px) { .layout { grid-template-columns: 1fr; } .sidebar { border-right: 0; border-bottom: 1px solid #d9e0e8; } .sidebar button { display: inline-block; width: auto; } .content { padding: 1rem; } .details { grid-template-columns: 1fr; } header { padding: 1rem; gap: .7rem; } }