.upload-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.drop-zone { min-height:285px; padding:30px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; border:1.5px dashed #b9cbe1; border-radius:18px; background:var(--surface); box-shadow:var(--shadow); color:var(--muted); text-align:center; transition:.2s; }
.drop-zone:hover,.drop-zone.drag-over { border-color:var(--blue); background:#f8fbff; transform:translateY(-2px); }
.drop-zone input { position:absolute; width:1px; height:1px; opacity:0; }
.drop-zone strong { color:var(--ink); font-size:16px; }
.drop-zone>span:not(.upload-icon):not(.button) { font-size:12px; }
.drop-zone em { min-height:18px; color:#7890a8; font-size:11px; font-style:normal; }
.drop-zone.ready { border-style:solid; border-color:#bfe0cb; background:#f8fffb; }
.drop-zone.ready em { color:var(--green); font-weight:800; }
.drop-zone.invalid { border-color:#efb3b7; background:#fffafa; }
.drop-zone.invalid em { color:var(--red); font-weight:800; }
.upload-icon { width:62px; height:62px; display:grid; place-items:center; border-radius:18px; background:#eaf3ff; color:var(--blue); }
.upload-icon svg { width:31px; height:31px; }
.run-button { grid-column:1/-1; min-height:48px; font-size:13px; letter-spacing:.4px; }
.privacy-card { width:max-content; max-width:100%; display:flex; align-items:center; gap:9px; margin-top:22px; padding:10px 12px; border:1px solid #d5e7d9; border-radius:10px; background:#f7fff9; color:#2d6d48; font-size:12px; font-weight:700; }
.loading-state { min-height:calc(100vh - 76px); padding:120px 24px; text-align:center; }
.loader-mark { width:50px; height:50px; margin:0 auto 18px; display:grid; place-items:center; border-radius:15px; background:#eaf3ff; color:var(--blue); }
.loader-mark svg { width:26px; height:26px; animation:spin 1.1s linear infinite; }
.loading-state h2 { margin:0 0 4px; font-size:20px; }
.loading-state p { color:var(--muted); }
.progress-track { width:min(360px,100%); height:6px; margin:25px auto; overflow:hidden; border-radius:20px; background:#e7edf5; }
.progress-bar { width:15%; height:100%; border-radius:inherit; background:var(--blue); transition:width .3s ease; }
.kpi-layout { display:grid; grid-template-columns:minmax(215px,1.02fr) minmax(0,3fr); gap:14px; margin-bottom:23px; }
.total-card { min-height:178px; padding:19px 20px; border:1px solid #cbdcf3; border-top:4px solid var(--navy); border-radius:12px; background:#fff; box-shadow:0 4px 13px rgba(20,54,92,.04); }
.total-card-top { display:flex; align-items:center; justify-content:space-between; color:var(--navy); font-size:11px; font-weight:800; }
.total-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; background:#eaf2fc; color:var(--navy); }
.total-card strong { display:block; margin:13px 0 0; color:var(--navy); font-size:54px; line-height:1; letter-spacing:-2px; }
.total-card p { margin:7px 0 0; color:var(--muted); font-size:11px; }
.kpi-cards { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:12px; }
.kpi-card { position:relative; min-height:83px; padding:13px 11px 11px 52px; border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:10px; background:#fff; box-shadow:0 3px 10px rgba(20,54,92,.035); }
.kpi-card.ok { --accent:var(--green); --accent-bg:#eaf8f0; }
.kpi-card.divergence { --accent:var(--red); --accent-bg:#fff0f1; }
.kpi-card.review { --accent:var(--amber); --accent-bg:#fff6e5; }
.kpi-card.neutral { --accent:var(--blue); --accent-bg:#eaf3ff; }
.kpi-icon { position:absolute; left:11px; top:14px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--accent-bg); color:var(--accent); }
.kpi-label { display:block; color:var(--accent); font-size:10px; font-weight:800; line-height:1.1; text-transform:uppercase; }
.kpi-value { display:block; margin-top:4px; color:var(--ink); font-size:25px; font-weight:800; letter-spacing:-.5px; line-height:1; }
.kpi-detail { display:block; margin-top:4px; color:var(--muted); font-size:10px; }
.filter-panel { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:23px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.filter-main { display:flex; flex:1; align-items:flex-end; gap:9px; }
.search-field,.select-field { display:flex; flex-direction:column; gap:5px; color:#728198; font-size:10px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; }
.search-field { position:relative; width:280px; }
.search-field svg { position:absolute; left:10px; bottom:10px; width:15px; height:15px; color:#7990a9; }
.search-field input,.select-field select { height:35px; border:1px solid #dbe4ef; border-radius:7px; background:#fff; color:#36506c; outline:0; font-size:12px; }
.search-field input { width:100%; padding:0 10px 0 31px; }
.select-field select { min-width:150px; padding:0 8px; }
.filter-actions { display:flex; align-items:center; gap:9px; }
.filter-count,.panel-note { color:var(--muted); font-size:11px; }
.panel { border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 4px 13px rgba(20,54,92,.035); }
.panel-heading { min-height:66px; padding:17px 18px 10px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.panel-heading h2 { margin:2px 0 0; font-size:15px; letter-spacing:-.2px; }
.result-panel { margin-bottom:23px; overflow:hidden; }
.table-scroll { overflow-x:auto; }
.result-panel table { width:100%; border-collapse:collapse; font-size:12px; }
.result-panel th { padding:10px 14px; background:#f8fafd; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:#667b94; font-size:10px; letter-spacing:.3px; text-align:left; text-transform:uppercase; white-space:nowrap; }
.result-panel td { padding:12px 14px; border-bottom:1px solid #edf1f5; color:#3b536d; vertical-align:middle; }
.status-pill { display:inline-flex; align-items:center; min-width:96px; justify-content:center; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:900; text-transform:uppercase; }
.status-pill.OK { background:#e9f8ef; color:var(--green); }
.status-pill.DIVERGENCIA { background:#fff0f1; color:var(--red); }
.status-pill.REVISAO_MANUAL { background:#fff6e5; color:var(--amber); }
.info-cell { max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.diagnostic-cell { min-width:280px; }
.rules-panel { margin-bottom:23px; }
.reconciliation-panel,.breakdown-panel { margin-bottom:23px; }
.explain-text { margin:0 18px 16px; color:var(--muted); font-size:12px; line-height:1.5; }
.mini-metrics { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding:0 18px 16px; }
.mini-metrics article { padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fbfdff; }
.mini-metrics span { display:block; color:#667b94; font-size:10px; font-weight:800; text-transform:uppercase; }
.mini-metrics strong { display:block; margin-top:4px; color:var(--ink); font-size:24px; line-height:1; }
.details-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 18px 18px; }
.details-grid details { border:1px solid var(--line); border-radius:10px; background:#fff; }
.details-grid summary { padding:11px 12px; color:#34506f; font-size:12px; font-weight:800; cursor:pointer; }
.info-list { max-height:220px; overflow:auto; border-top:1px solid var(--line); }
.info-list div { display:grid; grid-template-columns:90px 1fr auto; gap:8px; padding:9px 12px; border-bottom:1px solid #eef2f6; color:#3b536d; font-size:11px; }
.info-list div:last-child { border-bottom:0; }
.info-list strong { color:var(--ink); }
.info-list em { color:var(--muted); font-style:normal; white-space:nowrap; }
.breakdown-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 18px 18px; }
.breakdown-card { padding:13px; border:1px solid var(--line); border-radius:10px; background:#fbfdff; }
.breakdown-card strong { display:block; color:var(--ink); }
.breakdown-card span { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.rules-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 18px 18px; }
.rule-card { padding:13px; border:1px solid var(--line); border-radius:10px; background:#fbfdff; }
.rule-card strong { display:block; color:var(--ink); }
.rule-card span { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.toast { position:fixed; z-index:80; right:20px; bottom:20px; max-width:420px; padding:12px 15px; display:flex; align-items:center; gap:9px; border:1px solid #d5e4f6; border-radius:10px; background:#fff; box-shadow:var(--shadow); color:#36506c; font-size:12px; }
.toast svg { flex:0 0 auto; width:17px; color:var(--blue); }