:root { font-family: system-ui, sans-serif; color: #17263a; background: #f3f5f8; line-height: 1.5; }
* { box-sizing: border-box; }
body { margin: 0; }
header { background: #132b45; color: white; padding: 1.25rem 3vw; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
header strong { font-size: 1.4rem; margin-right: 1rem; }
main { max-width: 1400px; margin: auto; padding: 1rem 3vw 2rem; }
h1, h2 { font-size: 1.3rem; margin: 0 0 1rem; } h3 { font-size: 1rem; margin-top: 1.75rem; }
section { background: white; border: 1px solid #dce2e9; border-radius: 8px; padding: 1.4rem; min-width: 0; }
.workspace { display: grid; grid-template-columns: minmax(280px, 2fr) minmax(340px, 3fr); gap: 1rem; margin-top: 1rem; align-items: start; }
.controls, .section-heading, .actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.section-heading { justify-content: space-between; margin-bottom: 1rem; }.section-heading h2 { margin: 0; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: .8rem; text-align: right; border-bottom: 1px solid #e7ebf0; white-space: nowrap; } th:first-child, td:first-child { text-align: left; } th { font-size: .875rem; color: #526378; }
button, input, select, textarea { font: inherit; } button { padding: .6rem .85rem; border: 1px solid #b9c7d6; border-radius: 5px; background: white; color: #163c66; cursor: pointer; } button:hover { background: #edf4fd; } button:disabled { opacity: .5; cursor: default; } .primary { background: #1859a0; color: white; }.primary:hover { background: #12457c; }
label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 1rem; } input, select, textarea { width: 100%; padding: .65rem; margin-top: .35rem; border: 1px solid #afbdcd; border-radius: 5px; background: white; color: #17263a; } textarea { resize: vertical; } header label { margin: 0; } header select { width: auto; margin: 0 0 0 .5rem; }
.tag { display: inline-block; font-size: .875rem; padding: .2rem .5rem; border-radius: 4px; background: #e8eef7; color: #284666; }.request { display: flex; justify-content: space-between; text-align: left; align-items: center; gap: .75rem; width: 100%; margin-bottom: .6rem; padding: 1rem; }.request.selected { border-color: #1859a0; background: #f0f6fe; }.request strong { overflow-wrap: anywhere; }.request .tag { flex-shrink: 0; }
small { display: block; color: #526378; font-size: .875rem; margin-top: .25rem; }.note, footer, .empty { color: #526378; }.note, footer { font-size: .875rem; } footer { padding: 1.25rem 0; }.empty { padding: 1rem 0; }.actions { margin: 1rem 0; }.amount { font-size: 1.7rem; font-weight: 700; margin: .5rem 0; }.reason { white-space: pre-wrap; overflow-wrap: anywhere; }
.notice { padding: .85rem 1rem; margin: 1rem 0; border-left: 4px solid; border-radius: 4px; }.success { background: #eaf5ee; color: #205736; }.error { background: #fff0ee; color: #922d24; }.history { padding-left: 1.3rem; }.history li { margin-bottom: .8rem; overflow-wrap: anywhere; }:focus-visible { outline: 3px solid #d58b00; outline-offset: 3px; }
@media (max-width: 760px) { .workspace { grid-template-columns: 1fr; } header { padding: 1rem; } main { padding: 1rem; } section { padding: 1rem; } .controls { align-items: start; } .request { flex-wrap: wrap; } }