:root { color: #e5edf9; background: #0e1624; font-family: Inter, ui-sans-serif, system-ui, sans-serif; } * { box-sizing: border-box; } body { margin: 0; } button, input, textarea, select { font: inherit; } button { cursor: pointer; } .layout { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; } aside { padding: 28px 18px; background: #101b2d; border-right: 1px solid #263752; }.logo { color: #fff; text-decoration: none; font-weight: 900; letter-spacing: .12em; }.logo span { color: #70e6b6; }.role { color: #8aa0c1; letter-spacing: .13em; font-size: 10px; margin: 11px 0 22px; }.staff-card { display: grid; gap: 4px; border: 1px solid #2a4162; background: #13233a; border-radius: 10px; padding: 12px; margin-bottom: 18px; }.staff-card strong { color: #70e6b6; font-size: 12px; }.staff-card span, .staff-card small { overflow-wrap: anywhere; color: #bbcae0; font-size: 12px; } aside button { width: 100%; border: 0; border-radius: 9px; background: transparent; color: #b5c4da; padding: 12px; text-align: left; margin: 2px 0; font-weight: 650; } aside button:hover, aside button.selected { background: #1e3555; color: #fff; }.lock { position: fixed; bottom: 24px; width: 216px; color: #8fa4c3; border-top: 1px solid #2a3e5d; padding-top: 18px; font-size: 12px; line-height: 1.5; }.content { padding: 55px min(6vw, 90px); } header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; } .eyebrow { color: #70e6b6; margin: 0; font-size: 12px; letter-spacing: .12em; font-weight: 800; } h1 { margin: 7px 0; font-size: clamp(33px, 5vw, 55px); letter-spacing: -.04em; }.badge { color: #bcd1ec; border: 1px solid #334f75; border-radius: 99px; padding: 8px 10px; font-size: 12px; }.intro { max-width: 760px; color: #aebed4; font-size: 16px; line-height: 1.7; margin: 22px 0; }.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; }.filter-bar button { color: #bcd1ec; border: 1px solid #334f75; border-radius: 99px; background: transparent; padding: 8px 12px; }.filter-bar button.active { background: #285071; color: #fff; border-color: #70e6b6; }.queue-layout { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.5fr); gap: 18px; align-items: start; }.queue-list, .detail-card, .empty { border: 1px solid #2c4160; border-radius: 16px; background: #142237; }.queue-list { overflow: hidden; }.deposit-row { width: 100%; padding: 16px; text-align: left; border: 0; border-bottom: 1px solid #293f5e; color: #dce8f7; background: transparent; display: flex; justify-content: space-between; gap: 12px; }.deposit-row:last-child { border-bottom: 0; }.deposit-row:hover, .deposit-row.selected { background: #1d3555; }.deposit-row span { display: grid; gap: 4px; }.deposit-row span:last-child { text-align: right; }.deposit-row small { color: #9db3cf; }.deposit-row b { color: #70e6b6; font-size: 11px; }.detail-card { padding: 24px; }.detail-heading { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 22px; }.detail-heading h2 { margin: 5px 0 0; font-size: 18px; overflow-wrap: anywhere; }.status { border: 1px solid #365a78; border-radius: 99px; padding: 6px 9px; font-size: 11px; font-weight: 800; }.status.CONFIRMED { color: #73e7b9; }.status.REJECTED, .status.REVERSED { color: #f3a5aa; }.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 0; }.details div { border-top: 1px solid #2b4161; padding-top: 9px; }.details dt { color: #91a7c5; font-size: 11px; }.details dd { margin: 5px 0 0; color: #f0f5fc; overflow-wrap: anywhere; line-height: 1.4; }.review-history { margin-top: 25px; border-top: 1px solid #2b4161; padding-top: 18px; }.review-history h3, .review-form h3 { margin: 0 0 10px; font-size: 16px; }.review-history > p { color: #9eb0c7; }.review-history article { border-left: 2px solid #4a779a; padding: 8px 11px; margin: 10px 0; display: grid; gap: 4px; }.review-history article span, .review-history small, .review-history p { color: #a9bad0; font-size: 12px; margin: 0; }.review-form { margin-top: 26px; border-top: 1px solid #2b4161; padding-top: 20px; }.field { display: grid; gap: 6px; margin: 13px 0; }.field span { color: #bcd0e9; font-size: 13px; }.field input, .field select, .field textarea { color: #edf4ff; border: 1px solid #385574; border-radius: 8px; background: #0d1b2e; padding: 10px; }.review-warning { color: #e0be80; line-height: 1.5; font-size: 13px; }.primary { border: 0; border-radius: 9px; background: #38a878; color: #071b14; padding: 11px 16px; font-weight: 850; }.primary:disabled { opacity: .6; cursor: wait; }.full { width: 100%; }.large { padding: 13px 17px; font-size: 15px; }.notice { color: #9fdcbf; line-height: 1.5; }.notice.error { color: #ffb5ba; }.final-note { color: #9bb0cb; margin-top: 22px; }.empty { padding: 25px; display: grid; gap: 8px; color: #a9bdd5; }.empty strong { color: #76e7bb; }.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, #1c3b55, #0e1624 55%); }.auth-card { width: min(100%, 500px); background: #142237; border: 1px solid #324d6c; border-radius: 18px; padding: 32px; }.auth-card h1 { font-size: 32px; }.auth-card > p:not(.eyebrow):not(.notice) { color: #adbed4; line-height: 1.6; } @media (max-width: 900px) { .queue-layout { grid-template-columns: 1fr; } } @media (max-width: 760px) { .layout { grid-template-columns: 1fr; } aside { border-right: 0; border-bottom: 1px solid #263752; } .lock { display: none; } .content { padding: 32px 18px; } .details { grid-template-columns: 1fr; } header { display: grid; } }
