:root{
  --navy:#003580; --gold:#B8950A; --bg:#0E1B35;
  --panel:#111c33; --panel-2:#0b1530; --line:#24324f;
  --text:#EAF0FF; --sub:#9fb0d0; --good:#19a974; --warn:#d99000; --info:#3b82f6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Cairo','Segoe UI',Arial,sans-serif;
  background:linear-gradient(180deg,#08122a,#0E1B35 40%);color:var(--text);min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:12px 20px;background:rgba(8,18,42,.94);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-weight:900;
  background:linear-gradient(135deg,var(--gold),#f0d270);color:#251b00}
.brand h1{font-size:16px;font-weight:800}
.brand .sub{font-size:11.5px;color:var(--sub)}
.top-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.gen{font-size:11px;color:var(--sub)}
.badge{font-size:10.5px;font-weight:800;padding:5px 11px;border-radius:99px;
  background:rgba(25,169,116,.16);color:#4fd6a5;border:1px solid rgba(25,169,116,.4)}
.pill{border:1px solid var(--line);background:var(--panel);color:var(--text);
  padding:7px 12px;border-radius:9px;font-size:12.5px;font-weight:700;transition:.15s}
.pill:hover{border-color:#3c5480;background:#16233f}
.pill.active{background:linear-gradient(135deg,var(--navy),#0a4fb0);border-color:#2f6fd0;color:#fff}
.pill.disabled{opacity:.4;pointer-events:none}
.pill.sq{padding:6px 11px;font-size:15px;line-height:1}

.loading{padding:40px;text-align:center;color:var(--sub)}

.layout{display:grid;grid-template-columns:290px 1fr;min-height:calc(100vh - 66px)}
.sidebar{border-inline-end:1px solid var(--line);background:var(--panel-2);
  display:flex;flex-direction:column;max-height:calc(100vh - 66px);position:sticky;top:66px}
.side-head{padding:14px 14px 8px}
.side-head h2{font-size:13.5px;margin-bottom:9px;color:var(--sub)}
.search{width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--line);
  background:#0a142b;color:var(--text);font-size:13px}
.search::placeholder{color:#5f7297}
.page-list{overflow:auto;padding:0 10px 16px;display:flex;flex-direction:column;gap:6px}
.page-item{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:10px 12px;border-radius:10px;border:1px solid transparent;background:transparent;
  color:var(--text);text-align:start;font-size:13.5px;font-weight:600;width:100%}
.page-item:hover{background:#131f3a}
.page-item.active{background:linear-gradient(135deg,#0d2a5c,#123a7d);border-color:#2f6fd0}
.pi-chip{font-size:10px;padding:3px 8px;border-radius:99px;white-space:nowrap;font-weight:800}
.pi-chip.matched{background:rgba(25,169,116,.18);color:#4fd6a5}
.pi-chip.site-only{background:rgba(59,130,246,.18);color:#8ab4ff}
.pi-chip.gated{background:rgba(159,176,208,.16);color:#c3cfe6}
.pi-chip.none{background:rgba(218,41,28,.16);color:#ff8a80}

.main{padding:14px 16px 36px;min-width:0}
.page-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.pb-left{display:flex;align-items:center;gap:12px}
.pb-left h2{font-size:19px;font-weight:800}
.page-status{font-size:11px;font-weight:800;padding:4px 10px;border-radius:99px;background:#1a2743;color:var(--sub)}
.page-status.matched{background:rgba(25,169,116,.2);color:#4fd6a5}
.page-status.site-only{background:rgba(59,130,246,.2);color:#8ab4ff}
.page-status.gated,.page-status.none{background:rgba(159,176,208,.18);color:#c3cfe6}
.pb-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.group{display:flex;gap:6px;align-items:center;background:rgba(10,20,43,.6);
  padding:5px;border-radius:11px;border:1px solid var(--line)}
.group.zoom{gap:4px}
.zoom-label{font-size:12px;font-weight:800;color:var(--sub);min-width:44px;text-align:center}

.warn{margin:8px 0;padding:11px 14px;border-radius:10px;font-size:13px;font-weight:700;
  background:rgba(217,144,0,.14);border:1px solid rgba(217,144,0,.5);color:#f2b64d}

.compare-shell{position:relative}
.compare{--split:50%;--imgw:700px;position:relative;display:grid;
  grid-template-columns:var(--split) 1fr;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:#08122a;height:min(74vh,940px)}
.pane{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.pane-head{display:flex;align-items:center;gap:8px;padding:8px 13px;background:#0d1730;
  border-bottom:1px solid var(--line);font-size:12.5px}
.pane-head b{font-weight:800}
.pane-head .meta{margin-inline-start:auto;font-size:10.5px;color:var(--sub);
  background:#0a142b;padding:2px 8px;border-radius:6px;direction:ltr}
.dot{width:9px;height:9px;border-radius:50%}
.dot.ref{background:var(--gold)}
.dot.site{background:var(--info)}
/* The image width is set to the SAME absolute pixel value for both sides, so
   both are rendered at exactly the same scale. `height:auto` keeps the original
   proportions (never stretched, cropped, or distorted). */
.pane-scroll{overflow:auto;background:#0a142b;flex:1;position:relative}
.pane-scroll img{display:block;width:var(--imgw);height:auto;max-width:none}
.pane-msg{display:none;padding:44px 20px;text-align:center;color:var(--sub);font-size:13.5px;line-height:1.9}
.divider{position:absolute;top:0;bottom:0;inset-inline-start:var(--split);width:14px;
  transform:translateX(-50%);cursor:col-resize;z-index:20;display:grid;place-items:center}
.divider span{width:4px;height:44px;border-radius:99px;background:#3c5480;opacity:.9}
.divider:hover span{background:#66a0ff}

.compare.mode-left,.compare.mode-right{grid-template-columns:1fr}
.compare.mode-left .pane-right,.compare.mode-left .divider{display:none}
.compare.mode-right .pane-left,.compare.mode-right .divider{display:none}
.compare.mode-left .pane-left,.compare.mode-right .pane-right{grid-column:1/-1}

/* Overlay: real captures stacked; the top one is wiped by a draggable handle. */
.overlay{display:none;position:absolute;inset:0;background:#0a142b;z-index:15;
  overflow:auto}
.overlay img{position:absolute;top:0;inset-inline-start:0;width:var(--imgw);height:auto;max-width:none}
.overlay .overlay-top{clip-path:inset(0 0 0 var(--ov,50%))}
.overlay-slider{position:absolute;top:0;bottom:0;inset-inline-start:var(--ov,50%);
  width:16px;transform:translateX(-50%);cursor:col-resize;z-index:5;display:grid;place-items:center}
.overlay-slider span{width:3px;height:100%;background:linear-gradient(#66a0ff,#2b62c8);box-shadow:0 0 6px rgba(0,0,0,.6)}
.compare.mode-overlay{display:block;height:min(74vh,940px)}
.compare.mode-overlay .pane,.compare.mode-overlay .divider{display:none}
.compare.mode-overlay .overlay{display:block}

.summary{margin-top:22px}
.summary h2{font-size:15.5px;margin-bottom:12px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px;display:flex;flex-direction:column;gap:6px}
.card .num{font-size:25px;font-weight:900}
.card.ok{border-color:rgba(25,169,116,.5)}.card.ok .num{color:#4fd6a5}
.card.warn{border-color:rgba(217,144,0,.5)}.card.warn .num{color:#f2b64d}
.card.info{border-color:rgba(59,130,246,.5)}.card.info .num{color:#8ab4ff}
.card span:last-child{font-size:12px;color:var(--sub)}
.lists{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.lists h3{font-size:12.5px;color:var(--sub);margin-bottom:6px}
.lists p{font-size:13px;line-height:1.9;background:#0d1730;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;min-height:44px}
.pair-metrics{margin:8px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  padding:10px 14px;background:#0d1730;border:1px solid var(--line);border-radius:10px;font-size:12.5px}
.pair-metrics .pm-title{font-weight:900;color:var(--acc)}
.pair-metrics .pm-item{color:var(--sub)}
.pair-metrics .pm-item b{color:var(--text)}
.pair-metrics .pm-item.muted{font-style:italic}
.metric-table-wrap{margin-top:18px;overflow-x:auto}
.metric-table-wrap h3{font-size:13px;color:var(--sub);margin-bottom:8px}
.metric-table{width:100%;min-width:640px;border-collapse:collapse;font-size:12.5px;background:#0d1730;
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.metric-table th{text-align:start;padding:9px 12px;background:#111c38;color:var(--sub);font-weight:800;border-bottom:1px solid var(--line)}
.metric-table td{padding:8px 12px;border-bottom:1px solid var(--line);color:var(--text)}
.metric-table tr:last-child td{border-bottom:none}
.sim-chip{display:inline-block;min-width:52px;text-align:center;padding:2px 8px;border-radius:20px;
  font-weight:900;font-size:11.5px}
.sim-chip.ok{background:rgba(25,169,116,.18);color:#4fd6a5}
.sim-chip.mid{background:rgba(59,130,246,.18);color:#8ab4ff}
.sim-chip.low{background:rgba(217,144,0,.2);color:#f2b64d}
td.muted,.muted{color:var(--sub)}
.notes{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);color:var(--sub);font-size:12.5px;line-height:1.95}
.notes p{margin-bottom:6px}

@media(max-width:1000px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;max-height:none;border-inline-end:none;border-bottom:1px solid var(--line)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .lists{grid-template-columns:1fr}
  .compare{height:auto}
  .compare .pane-scroll{max-height:64vh}
  .compare.mode-overlay{height:70vh}
}
@media(max-width:640px){
  .brand .sub,.gen{display:none}
  .cards{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr!important;height:auto}
  .pane-left,.pane-right{grid-column:1/-1}
  .divider{display:none}
  .compare .pane-scroll{max-height:56vh}
}