* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #313338; color: #dbdee1; font-family: "Segoe UI", "Helvetica Neue", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 8px; padding: 9px 13px; color: #fff; background: #5865f2; }
button:hover { background: #6d78f5; } button:disabled { cursor: wait; opacity: .7; }
.secondary { background: #4a4d53; }.secondary:hover { background: #5d6067; }
.unlock-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, #434a70, #1e1f22 65%); }
.unlock-card { width: min(100%, 420px); padding: 32px; border: 1px solid #4b4e55; border-radius: 16px; background: #2b2d31; box-shadow: 0 18px 50px #0007; }
.lock-icon { font-size: 34px; }.unlock-card h1 { margin: 12px 0 8px; font-size: 24px; }.unlock-card p { color: #b5bac1; line-height: 1.55; }
.unlock-card label { display: block; margin: 20px 0 7px; }.password-row { display: flex; gap: 8px; }.password-row input { min-width: 0; flex: 1; }
.unlock-card > button[type=submit] { width: 100%; margin-top: 16px; }.status { min-height: 24px; color: #ffb4ab !important; }
.load-progress { margin-top: 12px; }.load-progress p { margin: 7px 0 0; font-size: 13px; text-align: center; color: #b5bac1; }.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #1e1f22; }.progress-bar { width: 0; height: 100%; border-radius: inherit; background: #5865f2; transition: width .18s ease; }
.top { position: sticky; top: 0; z-index: 100; display: flex; gap: 10px; align-items: center; padding: 14px; background: #1e1f22; border-bottom: 1px solid #3f4147; }
#search { flex: 1; min-width: 140px; } input, select { padding: 9px 12px; border: 0; border-radius: 8px; background: #2b2d31; color: #fff; } input:focus, select:focus { outline: 2px solid #5865f2; }
label { display: flex; align-items: center; gap: 4px; white-space: nowrap; } #info { padding: 10px 18px; color: #b5bac1; }.pager { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 12px; } #pageInput { width: 70px; }
#results { max-width: 1200px; margin: auto; padding: 0 16px 30px; }.msg { margin: 10px 0; padding: 14px; border-radius: 10px; background: #2b2d31; }.msg:hover { background: #32353b; }.head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; }.name { color: #6ea8fe; font-weight: 700; font-size: 17px; }.time { color: #949ba4; font-size: 13px; white-space: nowrap; }.content { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; } mark { padding: 1px 3px; border-radius: 4px; background: #f9d65c; color: #000; }
@media (max-width: 720px) { .top { flex-wrap: wrap; } #search { order: -1; flex-basis: 100%; }.head { align-items: flex-start; flex-direction: column; gap: 2px; } }