@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
.hidden{display:none!important}
body{font-family:system-ui,-apple-system,sans-serif;background:#f5f5f5;color:#1a1a1a;font-size:14px}
a{color:#E21E24;text-decoration:none}

/* ── Header ── */
.hdr{background:#E21E24;color:#fff;height:56px;display:flex;align-items:center;padding:0 24px;gap:20px;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.hdr-logo{display:flex;align-items:center;text-decoration:none;gap:0}
.hdr-logo img{height:36px;width:auto;display:block}
.logo-wrap{display:flex;align-items:center;gap:3px;line-height:1}
.logo-viva{font-family:'Nunito','Arial Black',Arial,sans-serif;font-weight:900;font-size:28px;letter-spacing:-1px;background:linear-gradient(170deg,#4a0000 0%,#8b0000 55%,#5c0000 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding-bottom:1px}
.logo-signal{display:flex;align-items:flex-start;padding-top:3px;color:#5c0000;opacity:.9}
.hdr-nav{display:flex;gap:2px;flex:1;margin-left:20px}
.nav-link{color:rgba(255,255,255,.85);padding:6px 14px;font-size:13px;font-weight:500;transition:all .15s;border-radius:3px}
.nav-link:hover,.nav-link.active{color:#fff;background:rgba(0,0,0,.2)}
.hdr-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.hdr-user{color:rgba(255,255,255,.8);font-size:13px}
.hdr-logout{color:rgba(255,255,255,.7);font-size:12px;padding:4px 10px;border:1px solid rgba(255,255,255,.3);border-radius:3px;transition:all .15s}
.hdr-logout:hover{color:#fff;border-color:rgba(255,255,255,.7)}

/* ── Main ── */
.main-wrap{max-width:1400px;margin:0 auto;padding:24px}
.page-hdr{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.page-hdr h1{font-size:20px;font-weight:700;color:#1a1a1a}
.badge-count{background:#fde8e8;color:#c01a1f;font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px}

/* ── Filters ── */
.filter-bar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.filter-bar select{padding:7px 12px;border:1px solid #ddd;background:#fff;font-size:13px;font-family:inherit;color:#333;outline:none;border-radius:3px}
.filter-bar select:focus{border-color:#E21E24}

/* ── Table ── */
.tbl-wrap{background:#fff;border:1px solid #e5e5e5;border-radius:4px;overflow:hidden;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:10px 14px;background:#fafafa;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#888;border-bottom:1px solid #e5e5e5;white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid #f5f5f5;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:#fff8f8;cursor:pointer}
.td-id{color:#bbb;width:44px;font-size:12px}
.td-title a{font-weight:600;color:#1a1a1a}
.td-title a:hover{color:#E21E24}
.td-sub{font-size:11px;color:#aaa;margin-top:2px}
.td-date{white-space:nowrap;color:#777}
.td-amount{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.empty{text-align:center;padding:60px 20px;color:#aaa;font-size:15px}

/* ── Chips ── */
.chip{display:inline-block;padding:2px 8px;font-size:11px;font-weight:600;border-radius:3px;white-space:nowrap}
.chip-cat{background:#fde8e8;color:#c01a1f}
.chip-st-active{background:#d1fae5;color:#065f46}
.chip-st-expired{background:#fef3c7;color:#92400e}
.chip-st-terminated{background:#fee2e2;color:#991b1b}
.chip-st-draft{background:#f3f4f6;color:#6b7280}

/* ── OCR dot ── */
.ocr-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}
.ocr-pending{background:#d1d5db}.ocr-processing{background:#fbbf24}.ocr-done{background:#34d399}.ocr-failed{background:#f87171}

/* ── Pager ── */
.pager{display:flex;gap:4px;justify-content:center;padding:16px}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:13px;font-weight:600;border:1px solid #e5e5e5;background:#fff;border-radius:3px;color:#555}
.pager a:hover{border-color:#E21E24;color:#E21E24}
.pager .cur{background:#E21E24;border-color:#E21E24;color:#fff}

/* ── Buttons ── */
.btn-primary{display:inline-block;padding:9px 20px;background:#E21E24;color:#fff;font-size:13px;font-weight:600;border:none;cursor:pointer;font-family:inherit;border-radius:3px;transition:background .15s}
.btn-primary:hover{background:#c01a1f}
.btn-secondary{display:inline-block;padding:9px 20px;background:#f5f5f5;color:#333;font-size:13px;font-weight:600;border:1px solid #ddd;cursor:pointer;font-family:inherit;border-radius:3px}
.btn-secondary:hover{background:#ebebeb}
.btn-scan{display:flex;align-items:center;gap:8px;padding:10px 18px;background:#fff;border:1.5px dashed #ddd;color:#555;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;border-radius:3px;width:100%;justify-content:center;margin-top:8px;transition:all .15s}
.btn-scan:hover{border-color:#E21E24;color:#E21E24}

/* ── Alerts ── */
.alert{padding:10px 16px;font-size:13px;border-radius:3px;margin-bottom:16px}
.alert-ok{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7}
.alert-err{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}

/* ── Form ── */
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#888}
.fg input,.fg select,.fg textarea{padding:9px 12px;font-size:14px;border:1px solid #ddd;outline:none;font-family:inherit;color:#1a1a1a;background:#fff;border-radius:3px}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:#E21E24;box-shadow:0 0 0 3px rgba(226,30,36,.08)}
.fg textarea{resize:vertical;min-height:70px}

/* ── Upload form ── */
.upload-form{background:#fff;border:1px solid #e5e5e5;border-radius:4px;padding:28px;max-width:900px}
.upload-drop{border:2px dashed #ddd;border-radius:4px;padding:32px;text-align:center;cursor:pointer;transition:border-color .15s;margin-bottom:8px}
.upload-drop:hover,.upload-drop.drag-over{border-color:#E21E24;background:#fff8f8}
.upload-drop input[type=file]{display:none}
.drop-icon{font-size:32px;margin-bottom:8px}
.drop-hint{font-size:11px;color:#aaa;margin-top:4px}
.file-chosen{margin-top:8px;font-size:13px;color:#059669;font-weight:600}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.span-2{grid-column:span 2}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:20px}

/* ── Login ── */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f5f5f5}
.login-card{background:#fff;border:1px solid #e5e5e5;border-radius:6px;padding:40px;width:100%;max-width:380px;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.login-logo{display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.login-logo img{height:44px;width:auto}
.login-sub{font-size:13px;color:#aaa;margin-bottom:28px;text-align:center}
.login-divider{width:40px;height:3px;background:#E21E24;margin:0 auto 24px;border-radius:2px}
.login-card .fg{margin-bottom:14px}
.login-card .btn-primary{width:100%;margin-top:4px;padding:11px;font-size:14px}

/* ── Doc view ── */
.doc-view{background:#fff;border:1px solid #e5e5e5;border-radius:4px;padding:28px}
.doc-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;gap:16px}
.doc-hdr h1{font-size:18px;font-weight:700;margin-bottom:8px}
.doc-meta-row{display:flex;gap:8px;flex-wrap:wrap}
.doc-num{font-size:13px;color:#999}
.doc-grid{display:grid;grid-template-columns:340px 1fr;gap:24px}
.info-tbl{width:100%;border-collapse:collapse}
.info-tbl th{text-align:left;padding:7px 10px;font-size:11px;font-weight:700;text-transform:uppercase;color:#aaa;width:130px}
.info-tbl td{padding:7px 10px;border-top:1px solid #f5f5f5;font-size:13px}
.doc-note{margin-top:16px;padding:12px;background:#fafafa;border-radius:3px;font-size:13px;color:#444}
.text-warn{color:#d97706;font-weight:600}
.ocr-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#aaa;margin-bottom:8px}
.ocr-text{font-size:12px;line-height:1.6;white-space:pre-wrap;max-height:500px;overflow-y:auto;background:#fafafa;padding:12px;border-radius:3px;color:#333;font-family:monospace}
.ocr-pending{color:#d97706;font-size:13px;padding:20px 0}

/* ── Search ── */
.search-form{display:flex;gap:10px;margin-bottom:20px}
.search-form input{flex:1;padding:11px 16px;font-size:15px;border:1.5px solid #ddd;border-radius:3px;outline:none;font-family:inherit}
.search-form input:focus{border-color:#E21E24}
.search-count{font-size:13px;color:#999;margin-bottom:12px}
.search-results{display:flex;flex-direction:column;gap:8px}
.search-item{background:#fff;border:1px solid #e5e5e5;border-radius:4px;padding:16px;cursor:pointer;transition:border-color .15s}
.search-item:hover{border-color:#E21E24}
.si-title a{font-size:15px;font-weight:600;color:#1a1a1a}
.si-num{font-size:12px;color:#aaa;margin-left:8px}
.si-meta{font-size:12px;color:#777;margin-top:4px}
.si-snippet{font-size:12px;color:#444;margin-top:8px;line-height:1.5;background:#fafafa;padding:8px;border-radius:3px}
.si-snippet b{background:#fde8e8;padding:0 2px}

/* ── AI Chat ── */
#chat-bubble{position:fixed;bottom:28px;right:28px;width:52px;height:52px;background:#E21E24;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;box-shadow:0 4px 16px rgba(226,30,36,.4);z-index:1000;transition:transform .15s}
#chat-bubble:hover{transform:scale(1.08)}
.chat-panel{position:fixed;bottom:90px;right:28px;width:360px;height:480px;background:#fff;border:1px solid #e5e5e5;border-radius:6px;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,.12);z-index:1000}
.chat-panel.hidden{display:none}
.chat-hdr{padding:14px 16px;background:#E21E24;color:#fff;border-radius:6px 6px 0 0;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600}
.chat-hdr button{background:none;border:none;color:rgba(255,255,255,.8);font-size:16px;cursor:pointer}
.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.chat-msg{padding:8px 12px;border-radius:4px;font-size:13px;line-height:1.5;max-width:90%;white-space:pre-wrap}
.chat-user{background:#fde8e8;color:#9b1217;align-self:flex-end}
.chat-assistant{background:#f5f5f5;color:#1a1a1a;align-self:flex-start}
.chat-input-row{padding:10px 12px;border-top:1px solid #eee;display:flex;gap:8px}
.chat-input-row input{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:3px;font-size:13px;font-family:inherit;outline:none}
.chat-input-row input:focus{border-color:#E21E24}
.chat-input-row button{padding:8px 14px;background:#E21E24;color:#fff;border:none;border-radius:3px;cursor:pointer;font-size:14px}
.chat-input-row button:hover{background:#c01a1f}

/* ── Settings tabs ── */
.stabs{display:flex;gap:2px;margin-bottom:20px;border-bottom:2px solid #e5e5e5;padding-bottom:0}
.stab{padding:8px 18px;font-size:13px;font-weight:600;color:#888;border-radius:3px 3px 0 0;text-decoration:none;transition:all .15s;margin-bottom:-2px;border-bottom:2px solid transparent}
.stab:hover{color:#E21E24;background:#fff8f8}
.stab-active{color:#E21E24;border-bottom-color:#E21E24;background:#fff}

/* ── Categories two-column ── */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:900px){.cat-grid{grid-template-columns:1fr}}

/* ── User management ── */
.upanel{background:#fff;border:1px solid #e5e5e5;border-radius:4px;margin-bottom:16px}
.upanel-hdr{padding:12px 20px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#888;border-bottom:1px solid #f0f0f0}
.upanel-body{padding:20px}
.panel-row td{padding:0!important;border-bottom:1px solid #f0f0f0}
.panel-row .upanel-body{background:#fafafa;border-top:2px solid #E21E24}
.row-dim td{opacity:.5}
.td-email{color:#555;font-size:13px}
.u-actions{display:flex;gap:6px;align-items:center;white-space:nowrap}
.act-btn{padding:4px 10px;font-size:12px;font-weight:600;border:1px solid #ddd;background:#fff;color:#444;border-radius:3px;cursor:pointer;font-family:inherit;transition:all .15s}
.act-btn:hover{border-color:#E21E24;color:#E21E24}
.act-del{color:#c01a1f;border-color:#fca5a5}
.act-del:hover{background:#fee2e2;border-color:#E21E24}
.chip-role-admin{background:#fde8e8;color:#9b1217;font-weight:700}
.chip-role-mgr{background:#eff6ff;color:#1d4ed8;font-weight:700}
.check-label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;font-weight:500;color:#333}
.check-label input[type=checkbox]{width:16px;height:16px;accent-color:#E21E24;cursor:pointer}

/* ── Responsive ── */
@media(max-width:768px){
  .main-wrap{padding:14px}
  .doc-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .chat-panel{width:calc(100vw - 32px);right:16px}
  .hdr-nav .nav-link span{display:none}
}