.app, .app *{box-sizing:border-box;}
.app{
  --ink:#172B4D;
  --teal-dark:#0B1F3A;
  --teal:#1B3A66;
  --teal-pale:#EAF1F8;
  --paper:#F5F7FA;
  --card:#FFFFFF;
  --line:#D9E1EA;
  --amber:#F0A202;
  --amber-pale:#fdf1d9;
  --red:#DC3545;
  --red-pale:#fbe4e7;
  --green:#198754;
  --green-pale:#e3f3ea;
  --gray:#5B677A;
  --font-display: 'Inter', Arial, Helvetica, sans-serif;
  --font-body: 'Inter', Arial, Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  max-width:1280px; margin:0 auto; padding:0 24px 80px;
  background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:14px; line-height:1.5; overflow-x:hidden;
}

.brand-strip{
  background:var(--teal-dark); color:#cbd6e6; text-align:center; font-size:10.5px; letter-spacing:.12em;
  padding:5px 0; margin:0 -24px 20px; text-transform:uppercase; font-weight:600;
}

header.app-header{
  display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:14px;
  background:var(--teal-dark); color:#fff; border-radius:12px; padding:18px 22px; margin-bottom:16px;
}
header.app-header .header-left{display:flex; align-items:flex-start; gap:14px;}
header.app-header .header-icon{
  width:38px; height:38px; border-radius:9px; background:var(--amber); color:var(--teal-dark);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
}
header.app-header h1{margin:0; font-size:20px; font-weight:700; color:#fff; letter-spacing:-0.01em;}
header.app-header .header-sub{font-size:12.5px; color:#b7c3d6; margin-top:3px;}
.header-pills{display:flex; gap:8px; flex-wrap:wrap;}
.pill{
  font-size:11px; font-weight:600; padding:5px 11px; border-radius:20px; background:rgba(255,255,255,0.12);
  color:#dbe4f0; white-space:nowrap;
}
.pill.good{background:rgba(25,135,84,0.25); color:#8be0b1;}

.important-note{
  background:var(--amber-pale); border:1px solid #f0d9a8; border-radius:10px; padding:14px 18px;
  margin-bottom:18px; font-size:12.5px; color:var(--ink);
}
.important-note .title{font-weight:700; color:#9a6400; margin-bottom:6px; font-size:13px;}
.important-note ol{margin:0; padding-left:18px;}
.important-note li{margin-bottom:4px;}
.important-note code{background:#fff; padding:1px 4px; border-radius:3px; font-family:var(--font-mono); font-size:11.5px;}

.step-head{display:flex; align-items:center; gap:10px; margin-bottom:4px;}
.step-head h3{margin:0;}
.step-num{
  width:24px; height:24px; border-radius:50%; background:var(--teal-dark); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; flex-shrink:0;
}

.field-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:12px;}
@media(max-width:820px){.field-row{grid-template-columns:1fr;}}
.field label{display:block; font-size:11px; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:.03em; margin-bottom:5px;}
.field input[type=text], .field input[type=number]{
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:6px; font-family:var(--font-mono); font-size:14px;
}
.field-hint{font-size:11.5px; margin-top:5px; color:var(--gray);}

.segmented{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.segmented label{margin:0; cursor:pointer; font-weight:600; font-size:12.5px;}
.segmented input{position:absolute; opacity:0; pointer-events:none;}
.segmented span{display:block; padding:9px 16px; color:var(--teal-dark); background:#fff;}
.segmented input:checked + span{background:var(--teal-dark); color:#fff;}

.active-period-label{margin-top:8px; font-size:12px; font-weight:600; color:var(--teal-dark);}

.dz-label{font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--gray); margin-bottom:6px;}
.dz-icon{font-size:22px; margin-bottom:4px;}

.run-bar{
  margin-top:18px; background:var(--teal-dark); border-radius:9px; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.run-bar .run-btn{background:#3a4f6e;}
.run-bar .run-btn:not(:disabled):hover{background:#4a628a;}
.run-bar .run-btn:disabled{background:#3a4f6e; opacity:.55;}
.run-status{color:#b7c3d6; font-size:12.5px; font-weight:500;}

.legal-tabs-bar{display:flex; gap:4px; margin-top:24px; border-bottom:1px solid var(--line);}
.legal-tab{
  padding:8px 14px; font-size:12.5px; font-weight:600; color:var(--gray); cursor:pointer;
  border-bottom:2px solid transparent;
}
.legal-tab.active{color:var(--teal-dark); border-bottom-color:var(--teal-dark);}
.legal-panel{display:none; font-size:11.5px; color:var(--gray); line-height:1.6; padding:12px 2px;}
.legal-panel.active{display:block;}
.legal-panel b{color:var(--ink);}

.bottom-bar{
  margin-top:30px; background:var(--teal-dark); color:#b7c3d6; border-radius:10px; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12px;
}
.bottom-bar b{color:#fff;}

header.top{
  border-bottom:3px solid var(--teal-dark); padding-bottom:16px; margin-bottom:24px;
}
header.top .top-row{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px;}
header.top h1{
  font-family:var(--font-display); font-weight:700; font-size:26px; margin:0; color:var(--teal-dark);
  letter-spacing:-0.01em;
}
header.top .brand-line{font-size:13px; color:var(--teal); font-weight:600; margin-top:2px;}
header.top .subtitle{font-size:14px; color:var(--gray); margin-top:6px;}
header.top .tag{font-family:var(--font-mono); font-size:11px; color:var(--gray); text-transform:uppercase; letter-spacing:0.08em;}

footer.app-footer{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line); text-align:center;
  color:var(--gray); font-size:12.5px; line-height:1.8;
}
footer.app-footer .powered{font-weight:500; color:var(--gray); font-size:12.5px;}

.setup-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:20px;}
@media(max-width:820px){.setup-grid{grid-template-columns:1fr;}}

.card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 20px;}
.card h3{margin:0 0 4px; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--teal-dark);}
.card .sub{font-size:12px; color:var(--gray); margin-bottom:12px;}

input[type=text], input[type=number], select, textarea{
  transition: border-color .15s;
}
input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--teal-dark); box-shadow:0 0 0 2px rgba(11,31,58,0.12);
}

.dropzone{
  border:2px dashed var(--line); border-radius:8px; padding:22px; text-align:center;
  cursor:pointer; transition:border-color .15s, background .15s; background:var(--paper);
}
.dropzone:hover, .dropzone.drag{border-color:var(--teal); background:var(--teal-pale);}
.dropzone input{display:none;}
.dropzone .fname{font-family:var(--font-mono); font-size:12.5px; color:var(--teal-dark); margin-top:8px; word-break:break-all;}
.dropzone .hint{font-size:12px; color:var(--gray);}
.dropzone .status{font-size:12px; margin-top:6px;}
.dropzone .status.ok{color:var(--green);}
.dropzone .status.err{color:var(--red);}

.controls-row{display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap;}
.controls-row label{font-size:13px; font-weight:600; color:var(--teal-dark);}
.controls-row input[type=number]{
  width:110px; padding:7px 9px; border:1px solid var(--line); border-radius:6px; font-family:var(--font-mono);
  font-size:13px;
}
.controls-row select{
  padding:7px 9px; border:1px solid var(--line); border-radius:6px; font-family:var(--font-body);
  font-size:13px; color:var(--ink); background:#fff; max-width:260px;
}
.btn{
  background:var(--teal-dark); color:#fff; border:none; border-radius:7px; padding:10px 22px;
  font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer; transition:background .15s;
}
.btn:hover{background:var(--teal);}
.btn:disabled{background:#a9b4c2; cursor:not-allowed;}
.btn.secondary{background:#fff; color:var(--teal-dark); border:1px solid var(--teal-dark);}
.btn.secondary:hover{background:var(--teal-pale);}

#resultsWrap{display:none;}

.summary-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:22px;
}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:9px; padding:14px 16px;
  border-left:4px solid var(--teal);
}
.stat.warn{border-left-color:var(--amber);}
.stat.bad{border-left-color:var(--red);}
.stat.verify{border-left-color:#7C4DBD;}
.stat .num{font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--ink);}
.stat .lbl{font-size:11.5px; color:var(--gray); text-transform:uppercase; letter-spacing:.04em;}

.tabs{display:flex; gap:2px; flex-wrap:wrap; border-bottom:2px solid var(--line); margin-bottom:0;}
.tab{
  padding:9px 16px; font-size:13px; font-weight:600; color:var(--gray); cursor:pointer;
  border-radius:8px 8px 0 0; background:transparent; position:relative; top:2px;
}
.tab .badge{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:20px; font-size:11px;
  background:var(--line); color:var(--ink);
}
.tab .badge.err{background:var(--red); color:#fff;}
.tab.active{background:var(--card); color:var(--teal-dark); border:2px solid var(--line); border-bottom:2px solid var(--card);}
.tab-panel{display:none; background:var(--card); border:2px solid var(--line); border-top:none; border-radius:0 0 10px 10px; padding:18px 20px 24px; max-width:100%;}
/* Tables scroll inside their OWN container (both axes) rather than the panel. This is what makes
   position:sticky headers actually work: sticky positions against the nearest scrolling ancestor,
   so the header needs a real scroll box around the table. Note CSS forces overflow-y to auto when
   overflow-x is auto, so mixing them on the panel itself can never produce a working sticky header. */
.table-scroll{overflow:auto; max-height:72vh; max-width:100%; border:1px solid var(--line); border-radius:6px;}
.tab-panel.active{display:block;}
.pager-bar{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:12px 0 8px; font-size:13px; color:var(--ink);}
.pager-bar select, .pager-bar input[type=search]{padding:6px 8px; border:1px solid var(--line); border-radius:4px; font:inherit; background:#fff; color:var(--ink);}
.pager-bar input[type=search]{min-width:200px;}
.pager-bar .pg-btn{padding:6px 12px; border:1px solid var(--teal-dark); background:#fff; color:var(--teal-dark); border-radius:4px; cursor:pointer; font:inherit;}
.pager-bar .pg-btn:hover:not(:disabled){background:var(--teal-pale);}
.pager-bar .pg-btn:disabled{opacity:.45; cursor:default;}
.pager-bar .pg-info{color:var(--gray); margin-left:auto;}


.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:8px;}
.panel-head h4{margin:0; font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--teal-dark);}
.panel-head .counts{font-size:12.5px; color:var(--gray);}

table.reco{width:100%; border-collapse:collapse; font-size:13px;}
table.reco th{
  text-align:left; padding:8px 10px; background:var(--teal-dark); color:#fff;
  font-weight:600; position:sticky; top:0; z-index:3; font-size:13px; letter-spacing:.01em;
}
/* Second header row (the field-label row under the BOOKS/PORTAL/DIFFERENCE group row) gets its
   own sticky offset, set at render time from the first row's measured height. */
table.reco thead tr:nth-child(2) th{z-index:2;}
table.reco th.th-einvoice{background:#2E6FCB;}
table.reco td{padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top; font-size:13px;}
table.reco tr:nth-child(even) td{background:var(--paper);}
table.reco tbody td.td-einvoice{background:var(--teal-pale);}
table.reco tr:nth-child(even) td.td-einvoice{background:#dcebf7;}
.remark{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600;
}
.remark.match{background:var(--green-pale); color:var(--green);}
.remark.mismatch{background:var(--amber-pale); color:var(--amber);}
.remark.missing{background:var(--red-pale); color:var(--red);}
.remark.gstin-mismatch{background:#f0e7fa; color:#7C4DBD;}
.remark.notetype-mismatch{background:#fde9f0; color:#c2185b;}
.remark.rate-mismatch{background:#e6f0fb; color:#1a5fa8;}
.remark.info{background:var(--teal-pale); color:var(--teal-dark);}
.num-cell{font-family:var(--font-mono); text-align:right;}
.diff-pos{color:var(--red); font-weight:600;}
.diff-neg{color:var(--teal-dark); font-weight:600;}
.empty-note{padding:30px; text-align:center; color:var(--gray); font-style:italic;}

.info-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
.info-card{border:1px solid var(--line); border-radius:8px; padding:12px 14px;}
.info-card .k{font-size:11.5px; color:var(--gray); text-transform:uppercase;}
.info-card .v{font-family:var(--font-mono); font-size:15px; margin-top:2px;}
.info-card .v small{color:var(--gray); font-size:11px; display:block; font-family:var(--font-body);}
.info-card .diff{font-size:12px; margin-top:4px;}

footer.note{margin-top:30px; font-size:12px; color:var(--gray); border-top:1px solid var(--line); padding-top:14px;}
footer.disclaimer{margin-top:14px; font-size:11.5px; color:var(--gray); line-height:1.6;}
footer.disclaimer b{color:var(--ink);}

#monthChipsWrap{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px;
}
.month-chip{
  padding:14px 15px; border:1.5px solid var(--line); border-radius:10px; cursor:pointer; font-size:14px;
  font-weight:600; background:#fff; color:var(--ink); position:relative; transition:border-color .15s;
  display:flex; flex-direction:column; gap:10px;
}
.month-chip:hover{border-color:var(--teal);}
.month-chip.active{border-color:var(--teal-dark); background:var(--teal-pale); color:var(--teal-dark);}
.month-chip .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px;}
.month-chip .dot.empty{background:var(--line);}
.month-chip .dot.partial{background:var(--amber);}
.month-chip .dot.ready{background:#2E6FCB;}
.month-chip .dot.reconciled{background:var(--green);}
.month-chip .chip-top{display:flex; align-items:center; justify-content:space-between;}
.month-chip .chip-x{
  font-size:16px; font-weight:700; color:var(--gray); line-height:1; padding:3px 6px; cursor:pointer; border-radius:5px;
}
.month-chip .chip-x:hover{color:var(--red); background:var(--red-pale);}
.month-chip .chip-mini-btns{display:flex; gap:7px;}
.month-chip .chip-mini-btn{
  flex:1; text-align:center; font-size:12.5px; font-weight:700; padding:8px 0; border-radius:6px;
  border:1px solid var(--line); background:#fdfcf9; color:var(--teal-dark); cursor:pointer; transition:background .15s;
}
.month-chip .chip-mini-btn:hover{background:var(--teal-pale); border-color:var(--teal);}
.month-chip .chip-mini-btn.loaded{background:var(--green-pale); border-color:var(--green); color:var(--green);}