*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#111;background:#fafafa}
a{color:inherit}
.muted{color:#666}
.small{font-size:12px}
.container{max-width:1280px;margin:0 auto;padding:14px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;background:#fff;border-bottom:1px solid #e6e6e6}
.brand{display:flex;align-items:center;gap:12px}
.logo-img{height:64px;width:auto;display:block}
.brand-text{line-height:1.25}
.brand-sub{font-size:12px;color:#444}
.user-status{font-size:12px;text-align:right}
.tabs{display:flex;gap:8px;padding:10px 14px;background:#fff;border-bottom:1px solid #e6e6e6;position:sticky;top:0;z-index:5}
.tab{border:1px solid #ddd;background:#f7f7f7;padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:600;font-size:13px}
.tab.active{background:#111;color:#fff;border-color:#111}
.tabpanel{display:none}
.tabpanel.active{display:block}

.grid-2{display:grid;grid-template-columns:380px 1fr;gap:14px;align-items:start}
@media(max-width:980px){.grid-2{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:12px 12px}
.card.info{margin-top:14px}
.card.inner{padding:10px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
h2{margin:0 0 10px 0;font-size:16px}
h3{margin:0 0 8px 0;font-size:14px}

.sep{border:0;border-top:1px solid #eee;margin:12px 0}

.btn{border:1px solid #ddd;background:#f3f3f3;padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:700}
.btn.primary{background:#111;color:#fff;border-color:#111}
.btn:disabled{opacity:.55;cursor:not-allowed}

.login-grid{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center}
.login-grid label{font-size:12px;color:#333}
.email-row{display:flex;align-items:center;gap:6px}
.email-row input{width:100%}
.email-domain{font-weight:700;color:#333;font-size:12px}
.login-note{grid-column:1/-1;font-size:12px;color:#444;background:#fafafa;border:1px dashed #ddd;border-radius:10px;padding:8px}
#loginMsg{grid-column:1/-1}

textarea{width:100%;border:1px solid #ddd;border-radius:12px;padding:10px;font-family:inherit;resize:vertical;margin-top:8px}
.searchbox{width:100%;border:1px solid #ddd;border-radius:12px;padding:10px;font-family:inherit;margin:10px 0}

.row{margin-top:10px}
.row select{width:100%;border:1px solid #ddd;border-radius:12px;padding:10px;margin-top:6px;background:#fff}

.table-wrap{overflow:auto;border:1px solid #eee;border-radius:12px}
table{border-collapse:collapse;width:100%}
th,td{border-bottom:1px solid #eee;padding:8px 8px;vertical-align:top;font-size:13px}
th{position:sticky;top:0;background:#fff;z-index:2;text-align:left}
.num{text-align:right;font-variant-numeric:tabular-nums}
.mini th,.mini td{font-size:12px;padding:7px 7px}
.mini th{background:#fafafa}
.mini td{vertical-align:middle}
.mini thead tr{height:44px}
.mini tbody tr{height:60px}

#outputTable th{color:#111}
.h-quick{background:#8BC34A} /* green */
.h-abdc{background:#F4B400}  /* amber */
.h-cs{background:#FFEB3B}    /* yellow */
.h-snip{background:#FF4DA6}  /* magenta-ish */
.h-sjr{background:#29B6F6}   /* blue */
#outputTable th{border-bottom:2px solid #ddd}

.ranges-layout{display:grid;grid-template-columns:300px 1fr;gap:12px;align-items:start}
@media(max-width:980px){.ranges-layout{grid-template-columns:1fr}}
.ranges-metric-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:980px){.ranges-metric-grid{grid-template-columns:1fr}}
.metric-title{font-weight:800;padding:10px 12px;border-radius:14px;margin-bottom:8px;height:48px;display:flex;align-items:center}
.metric-title.cs{background:#FFEB3B}
.metric-title.snip{background:#FF4DA6;color:#111}
.metric-title.sjr{background:#29B6F6;color:#111}

#bandsTable input{width:84px;border:1px solid #ddd;border-radius:10px;padding:6px 6px;text-align:right;height:34px}
.row-astar td{background:#fff7f7}
.row-a td{background:#fffde7}
.row-b td{background:#f3f3f3}
.row-c td{background:#e8f5e9}

/* Same palette for computed metric mini tables */
.mini .r-Astar td{background:#fff7f7}
.mini .r-A td{background:#fffde7}
.mini .r-B td{background:#f3f3f3}
.mini .r-C td{background:#e8f5e9}

.prose{max-width:900px}
.prose p{margin-top:0}
.prose li{margin:6px 0}
.prose ol{padding-left:18px}

.corr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
@media(max-width:980px){.corr-grid{grid-template-columns:1fr}}
canvas{max-width:100%}

.press-compute{margin:10px 0;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff7ed;color:#7c2d12;font-weight:600}


/* v18: align row heights across band + metric range tables */
:root{--band-row-h:64px;}
#bandsTable tbody tr{height:var(--band-row-h);} 
#bandsTable td,#bandsTable th{vertical-align:middle;}
.mini tbody tr{height:var(--band-row-h);} 
.mini td,.mini th{padding:10px 10px;}


/* Force equal row heights for percentile tables (alignment across columns) */
:root{
  --bands-row-h: 84px;
  --bands-head-h: 46px;
  --bands-cell-pad-y: 14px;
  --bands-cell-pad-x: 16px;
}

#bandsTable{table-layout:fixed}
#bandsTable thead th{height:var(--bands-head-h)}
#bandsTable tbody tr{height:var(--bands-row-h)}
#bandsTable td,#bandsTable th{padding:var(--bands-cell-pad-y) var(--bands-cell-pad-x); vertical-align:middle}

#csRanges, #snipRanges, #sjrRanges{table-layout:fixed}
#csRanges thead th, #snipRanges thead th, #sjrRanges thead th{height:var(--bands-head-h)}
#csRanges tbody tr, #snipRanges tbody tr, #sjrRanges tbody tr{height:var(--bands-row-h)}
#csRanges td, #snipRanges td, #sjrRanges td, #csRanges th, #snipRanges th, #sjrRanges th{
  padding:var(--bands-cell-pad-y) var(--bands-cell-pad-x);
  vertical-align:middle;
}

/* Make UL inputs match row height visually */
#bandsTable input{
  height:44px;
  font-size:18px;
}

/* Keep table cells from collapsing */
.mini td, .mini th{line-height:1.2}

/* Center-align values; keep the first (Label) column left-aligned */
.mini td, .mini th{ text-align:center; }
.mini td:first-child, .mini th:first-child{ text-align:left; }
.mini .num{ text-align:center; }

/* Correlation plots */
.plots-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px;}
.plot-card{border:1px solid #e6e6e6;border-radius:10px;padding:10px;background:#fff;}
.plot-title{font-weight:600;margin-bottom:6px;font-size:14px;}
.plot{width:100%;height:320px;}
@media (max-width: 1100px){
  .plots-grid{grid-template-columns:1fr;}
  .plot{height:360px;}
}


/* Ensure percentile and range tables align visually */
#bandsTable, #csRanges, #snipRanges, #sjrRanges {table-layout:fixed; width:100%;}
#bandsTable th:nth-child(1), #bandsTable td:nth-child(1) {width:70px;}
#bandsTable th:nth-child(2), #bandsTable td:nth-child(2) {width:70px;}
#bandsTable th:nth-child(3), #bandsTable td:nth-child(3) {width:120px;}

#csRanges th:nth-child(1), #csRanges td:nth-child(1),
#snipRanges th:nth-child(1), #snipRanges td:nth-child(1),
#sjrRanges th:nth-child(1), #sjrRanges td:nth-child(1) {width:70px;}
#csRanges th:nth-child(2), #csRanges td:nth-child(2),
#snipRanges th:nth-child(2), #snipRanges td:nth-child(2),
#sjrRanges th:nth-child(2), #sjrRanges td:nth-child(2) {width:90px;}
#csRanges th:nth-child(3), #csRanges td:nth-child(3),
#snipRanges th:nth-child(3), #snipRanges td:nth-child(3),
#sjrRanges th:nth-child(3), #sjrRanges td:nth-child(3) {width:90px;}

.ranges-metric-grid{align-items:start}
.plot-canvas{width:100%;height:auto;border:1px solid #eee;border-radius:12px;background:#fff}