:root { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: #ecf1f9; background: #0c1320; font-synthesis: none; }
* { box-sizing: border-box; }
html,body { height: 100%; margin: 0; }
body { overflow: hidden; }
button,input { font: inherit; }
button { cursor: pointer; }
button:focus-visible,input:focus-visible { outline: 2px solid #44c4c6; outline-offset: 2px; }
.hidden { display: none !important; }
.muted { color: #8795ad; }
.login-screen { min-height: 100dvh; display: grid; place-items: center; padding: 25px; background: radial-gradient(ellipse at 10% 10%, #143f49, transparent 46%), radial-gradient(ellipse at 100% 100%, #1d2949, transparent 45%), #0c1320; }
.login-card { width: min(100%, 410px); border: 1px solid #31445a; background: #142030; box-shadow: 0 22px 110px #030911aa; border-radius: 19px; padding: 36px; }
.brandmark,.logo { color: #66dfd4; }
.brandmark { font-size: 39px; }
.login-card h1 { font-size: 29px; margin: 12px 0 4px; letter-spacing: -.8px; }
.login-card p { color: #94a6bd; margin: 0 0 30px; }
.login-card label { display: block; font-size: 13px; color: #c8d7e8; margin: 14px 0 7px; }
.login-card input { display: block; width: 100%; border: 1px solid #3a5065; border-radius: 9px; background: #101929; color: white; padding: 12px 14px; }
.primary { background: #59d0c3; color: #0b2430; border: 0; font-weight: 750; border-radius: 9px; width: 100%; padding: 13px; margin-top: 23px; }
.primary:hover { background: #86e8dc; }
.form-error { color: #ff9595; font-size: 13px; min-height: 16px; margin-top: 12px; }
.shell { display: flex; height: 100dvh; flex-direction: column; }
.topbar { height: 72px; flex: none; background: #111c2b; border-bottom: 1px solid #293449; display: flex; align-items: center; justify-content: space-between; padding: 0 33px; }
.brand { display: flex; align-items: center; gap: 13px; font-size: 18px; letter-spacing: -.4px; white-space: nowrap; }
.brand .logo { border: 1px solid #346f79; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #193a44; font-size: 21px; }
.brand b { color: #60d5c8; }
.top-actions { display: flex; align-items: center; gap: 22px; font-size: 13px; color: #a2b0c2; }
.text-button { border: 0; background: transparent; color: #b9c7d8; }
.text-button:hover { color: white; }
.body-shell { display: flex; min-height: 0; flex: 1; }
.sidebar { width: 244px; flex: none; border-right: 1px solid #283449; background: #101927; padding: 29px 15px; display: flex; flex-direction: column; }
.sidebar-title { font-size: 10px; font-weight: 800; color: #7d8da3; letter-spacing: 1.5px; margin: 2px 12px 16px; }
.side-item { display: block; text-align: left; width: 100%; border-radius: 8px; padding: 11px 12px; border: 0; background: transparent; color: #d6e2ed; font-size: 13px; }
.side-item span { font-size: 19px; margin-right: 9px; }
.side-item.selected { background: #1d3842; color: #78e0d1; font-weight: 650; }
.sidebar-note { font-size: 12px; line-height: 1.7; color: #76869d; padding: 23px 13px; }
.sidebar-spacer { flex: 1; }
.server-tag { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #8fa3b7; padding: 8px 12px; }
.online-dot { width: 7px; height: 7px; background: #4cd5a7; border-radius: 50%; }
.main-pane { flex: 1; padding: 38px min(5vw,65px); overflow-y: auto; min-width: 0; }
.eyebrow { font-size: 11px; color: #61d9cb; font-weight: 800; letter-spacing: 2px; }
.content-header h1 { font-size: clamp(24px, 3vw, 32px); margin: 8px 0 13px; letter-spacing: -.6px; }
#breadcrumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 23px; font-size: 13px; color: #7e90a7; }
#breadcrumbs button { border: 0; background: transparent; padding: 0; color: #a6b8cc; }
#breadcrumbs button:hover { color: #66ddd0; }
.file-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 36px; margin-bottom: 15px; }
.search-wrap { width: min(420px, 100%); border: 1px solid #324158; display: flex; align-items: center; gap: 10px; border-radius: 9px; padding: 0 15px; background: #141f30; color: #9eb1c4; }
.search-wrap span { font-size: 24px; line-height: 1; }
.search-wrap input { width: 100%; border: 0; outline: none; background: transparent; color: white; padding: 12px 0; font-size: 13px; }
.file-list { border: 1px solid #27344a; border-radius: 12px; overflow: hidden; }
.file-row { width: 100%; display: flex; text-align: left; gap: 14px; align-items: center; background: #141f30; color: white; border: 0; border-bottom: 1px solid #29374a; padding: 15px 18px; min-height: 69px; }
.file-row:last-child { border-bottom: 0; }
.file-row:hover { background: #1b3040; }
.file-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #254455; font-size: 22px; }
.file-icon.folder { background: #283e4d; }
.file-icon.pdf { background: #4a2e39; }
.file-icon.djvu { background: #493f32; }
.file-icon.office { background: #283d53; }
.file-icon.image { background: #234637; }
.file-icon.text { background: #343b4a; }
.file-details { flex: 1; min-width: 0; }
.file-name { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-sub { font-size: 12px; color: #8297b0; margin-top: 4px; }
.file-arrow { font-size: 22px; color: #7f91aa; margin: 0 3px; }
.empty-message { color: #9caabe; text-align: center; padding: 28px; }
.footer-hint { font-size: 11px; color: #65768b; letter-spacing: .4px; margin-top: 20px; }
.viewer { position: fixed; z-index: 10; inset: 0; background: #0b111c; display: flex; flex-direction: column; }
.viewer-top { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 20px; min-height: 62px; border-bottom: 1px solid #344153; background: #152032; }
.viewer-btn { border: 1px solid #3a4961; border-radius: 8px; background: #1c2a3e; color: #d6e3f3; padding: 9px 13px; white-space: nowrap; }
.viewer-btn:hover:not(:disabled) { background: #2c4057; }
.viewer-btn:disabled { opacity: .35; cursor: default; }
.viewer-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 650; }
.viewer-tools { display: flex; gap: 6px; }
.viewer-tools .icon-btn { font-size: 19px; line-height: 16px; width: 36px; }
.view-area { position: relative; overflow: hidden; flex: 1; min-height: 0; background: #171c26; }
.tile-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.tile-canvas:active { cursor: grabbing; }
.view-status { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px 16px; background: #152033ee; border: 1px solid #374c5c; border-radius: 10px; font-size: 13px; color: #cfdeed; max-width: min(350px, 80vw); text-align: center; pointer-events: none; }
.text-content { overflow: auto; max-width: 1100px; height: 100%; margin: 0 auto; padding: 30px 25px 60px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.7; color: #e5e9f2; background: #1a2331; }
.viewer-bottom { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 10px; min-height: 58px; background: #152032; border-top: 1px solid #344153; flex: none; }
.page-counter { font-size: 13px; white-space: nowrap; }
#page-number { width: 64px; text-align: center; margin: 0 3px; background: #0c1828; color: white; border: 1px solid #3b5161; border-radius: 6px; padding: 7px 3px; }
@media (max-width: 700px) { .topbar { height: 58px; padding: 0 15px; } .top-actions { gap: 10px; } #user-tag { display:none; } .sidebar { display: none; } .main-pane { padding: 26px 17px; } .file-toolbar { margin-top: 27px; } .file-row { padding: 12px; gap: 10px; } .file-name { font-size: 13px; } .file-icon { width: 38px; height: 38px; } .footer-hint { line-height: 2; } .viewer-top { padding: 7px 8px; gap: 7px; flex-wrap: wrap; } .viewer-top #viewer-close { padding: 8px; } .viewer-tools { gap: 3px; } .viewer-tools .viewer-btn { padding: 7px; } .viewer-name { font-size: 12px; } .viewer-bottom { gap: 9px; } .viewer-bottom .viewer-btn { padding: 8px; } .page-counter { font-size: 12px; } #page-number { width: 49px; } }

/* v0.1.2 - category shortcuts, export controls and small-screen navigation */
.category-list { display:flex; flex-direction:column; gap:3px; overflow-y:auto; min-height:0; max-height:55vh; padding-bottom: 8px; }
.category-item { display:block; width:100%; text-align:left; padding:10px 12px; color:#cad8e5; border:0; border-radius:8px; background:transparent; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.category-item:hover { background:#233544; color:#fff; }
.category-item.selected { background:#1d3842; color:#78e0d1; font-weight:650; }
.category-item .folder-symbol { color:#73b5c3; margin-right:9px; }
.mobile-category-wrap { display:none; }
.viewer-export { display:flex; gap:6px; }
.viewer-export .viewer-btn { border-color:#3c7777; color:#81e2d4; }
@media (max-width: 700px) {
  .mobile-category-wrap { display:flex; flex-direction:column; gap:6px; font-size:12px; color:#8ca5bb; margin-top:22px; }
  .mobile-category-wrap select { background:#172539; color:#ecf1f9; border:1px solid #3a4f62; padding:10px; border-radius:8px; max-width:100%; }
  .viewer-top { gap:6px; }
  .viewer-export { order:3; width:100%; justify-content:flex-end; }
  .viewer-export .viewer-btn { flex:1; }
  .viewer-name { max-width:40vw; }
}