:root{
  --navy:#071b35; --navy-2:#0d294c; --pink:#f2005d;
  --ink:#102033; --muted:#64748b; --line:#e4eaf1; --surface:#fff;
  --surface-2:#f5f8fb; --shadow:0 18px 50px rgba(7,27,53,.10);
  --sidebar:330px; --topbar:72px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--surface-2)}
body{overflow:hidden}
button,input{font:inherit}
.topbar{height:var(--topbar);background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:relative;z-index:5;box-shadow:0 2px 18px rgba(0,0,0,.12)}
.brand{display:flex;align-items:center;gap:16px;color:#fff;text-decoration:none;font-weight:700;letter-spacing:-.02em}
.brand img{width:128px;height:auto}
.brand span{border-left:1px solid rgba(255,255,255,.24);padding-left:16px;color:#d9e5f4;font-weight:500}
.top-actions{display:flex;align-items:center;gap:12px}
.search{width:min(390px,42vw);height:42px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:10px;display:flex;align-items:center;padding:0 12px;gap:9px}
.search span{font-size:22px;color:#bcd0e5}
.search input{border:0;outline:0;background:transparent;color:#fff;width:100%;font-size:14px}
.search input::placeholder{color:#a9bdd2}
.search kbd,.hint kbd{font-size:10px;color:#9fb4ca;border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:3px 6px;white-space:nowrap}
.icon-button{height:42px;width:42px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:white;cursor:pointer}
.app{height:calc(100vh - var(--topbar));display:grid;grid-template-columns:var(--sidebar) 1fr}
.sidebar{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.sidebar-heading{padding:26px 22px 18px;display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:800;color:var(--pink)}
.sidebar-heading h1{margin:5px 0 0;font-size:20px;letter-spacing:-.03em}
.text-button{border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer}
.tree{padding:14px 10px;overflow:auto;flex:1}
.tree-node{user-select:none}
.tree-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;cursor:pointer;color:#34465a;font-size:13px;text-decoration:none}
.tree-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-row:hover{background:#f2f6fa}
.tree-row.active{background:#fde7ef;color:#c2185b;font-weight:700}
.tree-toggle{width:18px;text-align:center;color:#8291a4;font-size:11px}
.tree-icon{width:auto;min-width:18px;text-align:center;color:#7d8da1}
.tree-children{padding-left:18px}
.tree-children.collapsed{display:none}
.pdf-icon{font-size:9px;font-weight:800;border:1px solid #dbe3ec;border-radius:3px;padding:2px 3px;margin-right:6px;color:#d34747;background:#fff}
.sidebar-footer{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;color:var(--muted);font-size:11px}
.status-dot{width:7px;height:7px;background:#25b875;border-radius:50%;box-shadow:0 0 0 3px #e7f8f0}
.content{min-width:0;display:flex;flex-direction:column;background:#eef3f7}
.viewer-toolbar{height:62px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:15px}
.breadcrumbs{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.breadcrumbs strong{color:var(--ink)}
.viewer-actions{display:flex;gap:8px}
.button{border:0;border-radius:8px;padding:9px 13px;font-size:12px;font-weight:700;cursor:pointer}
.button:disabled{opacity:.45;cursor:not-allowed}
.button.secondary{background:#f0f4f8;color:#30455d}
.button.primary{background:var(--pink);color:#fff}
.viewer-shell{padding:22px;min-height:0;flex:1;overflow:hidden}
.empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.empty-mark{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,var(--navy),#123b69);display:grid;place-items:center;margin-bottom:22px}
.empty-mark img{width:43px}
.empty-state h2{margin:8px 0 8px;font-size:28px;letter-spacing:-.04em}
.empty-state p{margin:0;color:var(--muted);font-size:14px}
.hint{margin-top:26px;display:flex;gap:9px;align-items:center;color:#8291a4;font-size:12px}
.hint kbd{color:#62748a;border-color:#d8e0e9;background:#f5f8fb}
.hint kbd{font-size:10px}
.document-view{height:100%;display:flex;flex-direction:column;gap:12px}
.hidden{display:none!important}
.document-header{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 18px;box-shadow:0 4px 16px rgba(7,27,53,.05)}
.document-header h2{margin:4px 0 0;font-size:18px;letter-spacing:-.025em}
.pdf-badge{font-size:9px;font-weight:900;color:#d34747;border:1px solid #f0caca;border-radius:5px;padding:5px 7px}
.pdf-frame-wrap{min-height:0;flex:1;background:#dce4ec;border:1px solid #d1dbe5;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.pdf-frame{width:100%;height:100%;border:0}
#pdfFrame{width:100%;height:100%;border:0}
.loading{padding:25px 15px;color:var(--muted);font-size:12px;display:flex;align-items:center;gap:10px}
.spinner{width:15px;height:15px;border:2px solid #d8e2ec;border-top-color:var(--pink);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:20px;right:20px;background:var(--navy);color:#fff;padding:11px 15px;border-radius:8px;font-size:12px;box-shadow:var(--shadow);transform:translateY(20px);opacity:0;pointer-events:none;transition:.2s;z-index:20}
.toast.show{transform:translateY(0);opacity:1}
body.dark{--surface:#0b1727;--surface-2:#07111e;--ink:#e8f0f8;--muted:#8fa2b8;--line:#1d3045}
body.dark .sidebar,body.dark .viewer-toolbar,body.dark .document-header,body.dark .empty-state{background:#0d1b2c}
body.dark .tree-row{color:#b7c7d8} body.dark .tree-row:hover{background:#12263e}
body.dark .button.secondary{background:#15283e;color:#c9d8e7}
body.dark .viewer-shell{background:#07111e}
@media(max-width:800px){
  :root{--sidebar:280px}
  .brand span{display:none}.topbar{padding:0 14px}.search{width:48vw}.viewer-toolbar{padding:0 14px}.viewer-shell{padding:12px}
}
@media(max-width:620px){
  body{overflow:auto}.app{height:auto;min-height:calc(100vh - var(--topbar));grid-template-columns:1fr}
  .sidebar{height:42vh;min-height:250px;border-right:0;border-bottom:1px solid var(--line)}
  .content{height:58vh;min-height:500px}.viewer-actions .button.secondary{display:none}.search{width:44vw}
}