:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #10151c; color: #e8edf3; }
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; }
header { min-height: 56px; display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; gap: 24px; padding: 12px 20px; background: #19222d; border-bottom: 1px solid #354252; }
main { flex: 1; min-height: 0; overflow: auto; }
header > div:first-child { margin-right: auto; }
.badge { color: #f1c36d; border: 1px solid #806538; padding: 2px 6px; font-size: 11px; border-radius: 4px; margin-left: 10px; }
button { border: 1px solid #556c84; border-radius: 5px; background: #26394e; color: inherit; padding: 9px 16px; cursor: pointer; font: inherit; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #77b7ff; outline-offset: 3px; }
#login { margin: 70px auto; padding: 28px; width: min(440px, calc(100% - 32px)); background: #19222d; border: 1px solid #354252; border-radius: 8px; }
h1 { font-size: 23px; margin-top: 0; }
label { display: block; margin: 16px 0; font-size: 14px; }
input, select { display: block; width: 100%; margin-top: 6px; border: 1px solid #556575; background: #111923; color: inherit; border-radius: 4px; padding: 10px; font: inherit; }
.note { color: #a8b8c8; font-size: 13px; line-height: 1.6; margin-bottom: 0; }
#status { color: #c2d5e8; line-height: 1.5; }
#remaining { font-variant-numeric: tabular-nums; color: #b8c8da; }
#remaining.warning { color: #f5c775; }
#viewport { height: 100%; overflow: auto; background: #070a0f; outline: none; }
#input-status { position: fixed; bottom: 8px; left: 8px; z-index: 2; pointer-events: none; padding: 4px 8px; border-radius: 4px; background: #19222de6; color: #b8c8da; font-size: 12px; }
[hidden] { display: none !important; }
@media (max-width: 680px) { header { gap: 10px; flex-wrap: wrap; } #remaining { font-size: 12px; } }

#metrics { font-size: 12px; color: #b8c8da; font-variant-numeric: tabular-nums; }
header .scroll-control { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: #b8c8da; }
header .scroll-control select { width: auto; margin: 0; padding: 7px; }

#paste-panel { padding: 16px 20px; background: #19222d; border-bottom: 1px solid #354252; max-height: 50dvh; overflow: auto; }
#paste-panel label { margin: 0 0 8px; }
#paste-text { display: block; width: 100%; padding: 10px; font: inherit; color: inherit; background: #111923; border: 1px solid #556575; border-radius: 4px; }
#paste-text:focus-visible { outline: 2px solid #77b7ff; }

.clipboard-consent { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.clipboard-consent input { width: auto; flex-shrink: 0; }
#received-text { width: 100%; color: inherit; background: #111923; border: 1px solid #556575; font: inherit; }