:root {
    --ink: #182230;
    --muted: #718096;
    --line: #e8edf3;
    --surface: #ffffff;
    --canvas: #f5f7fb;
    --primary: #5b5ce2;
    --primary-soft: #eeefff;
    --sidebar: 248px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-shell { min-height: 100vh; display: flex; }
.app-sidebar { width: var(--sidebar); background: #fff; border-right: 1px solid var(--line); padding: 28px 16px 18px; display: flex; flex-direction: column; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 750; font-size: 16px; padding: 0 12px 28px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 11px; background: linear-gradient(135deg, #7778ef, #4849ca); box-shadow: 0 7px 18px rgba(91,92,226,.25); }
.sidebar-label { color: #a3adba; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 700; padding: 16px 14px 8px; }
.app-nav { display: flex; flex-direction: column; gap: 4px; }
.app-nav a { display: flex; align-items: center; gap: 12px; color: #687586; text-decoration: none; border-radius: 10px; padding: 11px 14px; font-size: 13px; font-weight: 600; transition: .2s; }
.app-nav a:hover, .app-nav a.active { color: var(--primary); background: var(--primary-soft); }
.app-nav i { font-size: 17px; width: 18px; }
.sidebar-bottom { margin-top: auto; border-top: 1px solid var(--line); padding: 18px 6px 0; display:flex; align-items:center; gap: 8px; }
.user-chip { display:flex; align-items:center; gap:9px; min-width:0; flex:1; }.user-chip > span { width:31px; height:31px; display:grid; place-items:center; color:#fff; background:#f19a77; border-radius:50%; font-size:12px; font-weight:700; }.user-chip strong,.user-chip small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.user-chip strong { font-size:12px; }.user-chip small { color:var(--muted); font-size:10px; margin-top:2px; }.logout-link { color:#9aa5b1; padding:5px; }
.app-main { min-width: 0; flex: 1; }.topbar { height: 74px; padding: 0 38px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:22px; }.topbar-search { flex:1; max-width:520px; position:relative; display:flex; align-items:center; color:#99a3b1; }.topbar-search i { position:absolute; left:14px; }.topbar-search input { width:100%; background:#f7f8fb; border:1px solid transparent; border-radius:10px; outline:0; padding:11px 70px 11px 39px; font-size:13px; }.topbar-search input:focus { border-color:#c7c8f5; background:#fff; }.topbar-search kbd { position:absolute; right:12px; color:#a2acb8; background:#fff; border:1px solid var(--line); border-radius:5px; padding:2px 5px; font-size:10px; }.quick-upload { margin-left:auto; color:#fff; background:var(--primary); text-decoration:none; border-radius:9px; padding:10px 15px; font-size:12px; font-weight:700; }.mobile-brand { display:none; }.content-area { padding: 34px 38px; max-width: 1500px; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }.page-heading h1 { margin:0 0 5px; font-size:30px; letter-spacing:-.04em; font-weight:800; }.page-heading p { margin:0; color:var(--muted); font-size:13px; }.eyebrow { color:var(--primary); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }.heading-actions { display:flex; gap:9px; }.heading-actions .btn { padding:10px 14px; border-radius:9px; font-size:12px; font-weight:700; }.card { border-radius:14px !important; box-shadow: 0 5px 20px rgba(30,45,75,.035) !important; }.card-header { padding:18px 20px; border-bottom:1px solid var(--line); }.soft-pill { color:var(--primary); background:var(--primary-soft); border-radius:999px; padding:8px 12px; font-size:11px; font-weight:700; }.search-hero { background:linear-gradient(135deg,#fff 0%,#f3f3ff 100%); }.search-result-item { padding:20px 4px; border-bottom:1px solid var(--line); }.search-result-item:last-child { border-bottom:0; }.search-result-item h6 { font-size:15px; }.document-reader { border:0 !important; border-radius:18px !important; overflow:hidden; }.document-reader .modal-header { padding:22px 26px; background:#fbfbff; border-bottom:1px solid var(--line); }.reader-content { white-space:pre-wrap; word-break:break-word; max-width:900px; margin:0 auto; font:15px/1.9 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#344054; background:transparent; border:0; }.stat-card { transition: transform .2s, box-shadow .2s; }.stat-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(30,45,75,.08) !important; }.stat-icon { border-radius:11px; }.btn-primary { background:var(--primary); border-color:var(--primary); }.table > :not(caption) > * > * { padding:14px 12px; border-bottom-color:var(--line); }.preview-content { background:#f8f9fc; border:1px solid var(--line); }.search-result-item:hover { background:#fafaff; }.login-wrapper { background: radial-gradient(circle at 15% 15%, #8788f4, #3f419c 75%); }.loading-overlay { backdrop-filter: blur(3px); }
#categoryModal .modal-content, #uploadModal .modal-content, #createTemplateModal .modal-content { border:0; border-radius:18px; overflow:hidden; box-shadow:0 24px 70px rgba(24,34,48,.18); } #categoryModal .modal-header, #uploadModal .modal-header, #createTemplateModal .modal-header { padding:22px 24px; background:#fbfbff; border-bottom:1px solid var(--line); } #categoryModal .modal-body, #uploadModal .modal-body, #createTemplateModal .modal-body { padding:24px; } #categoryList .list-group-item, .type-filter { border:0; margin:2px 8px; border-radius:8px; font-size:12px; } .list-group-item-action:hover { background:var(--primary-soft); color:var(--primary); } @media (max-width: 900px) { .app-sidebar { width: 70px; padding:20px 10px; }.brand { padding:0 8px 22px; }.brand > span:last-child, .sidebar-label, .app-nav a:not(:has(i)) { display:none; }.app-nav a { justify-content:center; padding:12px; }.app-nav a i { margin:0; }.user-chip div, .logout-link { display:none; }.topbar { padding:0 18px; }.mobile-brand { display:block; font-weight:700; white-space:nowrap; }.topbar-search { max-width:none; }.content-area { padding:24px 18px; } }
@media (max-width: 600px) { .topbar-search { display:none; }.quick-upload { margin-left:auto; }.content-area { padding:20px 14px; } }