@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@300;400;500&display=swap');

/* ─── RESET ─── */
*{margin:0;padding:0;box-sizing:border-box}

/* ══════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════ */
#login-page{
  position:fixed;inset:0;display:flex;align-items:stretch;
  background:url('../assets/rome.jpg') center/cover no-repeat;
  z-index:9999;overflow:hidden;
  font-family:'DM Mono',monospace;
}

/* ── Left hero: SCULPTOR text ── */
#login-hero{
  flex:3;
  display:flex;
  align-items:center;
  justify-content:center;
  /* subtle dark gradient so text pops on photo */
  background:linear-gradient(to right, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.08) 70%, rgba(0,0,0,0.3) 100%);
}
#login-hero-title{
  font-family:'Inter',sans-serif;
  font-size:clamp(52px,6.5vw,108px);
  font-weight:900;
  color:#fff;
  letter-spacing:-0.03em;
  line-height:1;
  text-shadow:0 2px 48px rgba(0,0,0,0.45), 0 0 1px rgba(0,0,0,0.2);
  user-select:none;
}

/* ── Right panel: login card ── */
#login-panel{
  width:25vw;
  min-width:340px;
  max-width:420px;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:60px 40px;
  overflow-y:auto;
  border-left:1px solid rgba(255,255,255,0.25);
}
#login-card{
  width:100%;
  padding:0;
  border:none;
  margin:0;
  flex-shrink:0;
}
.lf-group{margin-bottom:18px}
.lf-label{
  font-size:9px;color:#999;text-transform:uppercase;letter-spacing:2px;
  margin-bottom:6px;display:block;
}
.lf-input{
  width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:0;
  font-family:'DM Mono',monospace;font-size:13px;color:#000;
  outline:none;transition:border-color .15s;background:#fff;
}
.lf-input:focus{border-color:#000}
#login-sep{
  border:none;border-top:1px solid #f0f0f0;margin:24px 0 18px;
}
.lf-key-row{display:flex;gap:8px}
.lf-key-row .lf-input{flex:1}
#login-btn{
  width:100%;padding:12px;border:1px solid #000;background:#000;color:#fff;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer;transition:all .15s;margin-top:8px;
}
#login-btn:hover{background:#fff;color:#000}
#login-err{
  font-size:10px;color:#c00;margin-top:12px;text-align:center;
  min-height:16px;letter-spacing:.5px;
}
#login-hint{
  font-size:9px;color:#ddd;text-align:center;margin-top:20px;
  letter-spacing:1px;
}

/* ─── AWS Config Panel ─── */
#aws-config-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0 8px;cursor:pointer;user-select:none;
  border-top:1px solid #f0f0f0;margin-top:20px;
}
#aws-config-toggle .cfg-label{
  font-size:9px;text-transform:uppercase;letter-spacing:2px;color:#bbb;
}
#aws-config-toggle .cfg-arrow{
  font-size:10px;color:#ccc;transition:transform .2s;
}
#aws-config-toggle.open .cfg-arrow{ transform:rotate(180deg); }
#aws-config-panel{
  display:none;padding:12px 0 4px;
  border-bottom:1px solid #f5f5f5;margin-bottom:4px;
}
#aws-config-panel.visible{ display:block; }
.cfg-row{ margin-bottom:10px; }
.cfg-row .lf-label{ color:#aaa; }
.cfg-row .lf-input{
  font-size:11px;padding:8px 10px;border-color:#eee;color:#555;
}
.cfg-row .lf-input:focus{ border-color:#000;color:#000; }
#cfg-save-btn{
  width:100%;padding:8px;border:1px solid #ddd;background:#fff;
  color:#999;font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;
  transition:all .15s;
}
#cfg-save-btn:hover{ border-color:#000;color:#000; }
#cfg-status{
  font-size:9px;text-align:center;margin-top:6px;min-height:14px;
  letter-spacing:.5px;
}
.cfg-ok{ color:#00884a; }
.cfg-mode{
  font-size:9px;text-align:center;margin-top:8px;
  color:#bbb;letter-spacing:1px;
}
.cfg-mode span{ color:#999;font-weight:500; }

/* ══════════════════════════════════════════
   COCOPSE PANE
══════════════════════════════════════════ */
#cp-list{
  width:320px;min-width:320px;background:#fff;border-right:1px solid #e8e8e8;
  display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;
}
/* ── CP tab bar ── */
#cp-tab-bar{
  display:flex;flex-shrink:0;border-bottom:2px solid #f0f0f0;
}
.cp-tab-btn{
  flex:1;padding:9px 4px 8px;font-size:11px;font-family:'DM Mono',monospace;
  text-transform:uppercase;letter-spacing:.3px;font-weight:500;
  background:none;border:none;cursor:pointer;color:#bbb;
  border-bottom:2px solid transparent;margin-bottom:-2px;
  transition:color .15s, border-color .15s;
}
.cp-tab-btn:hover{color:#2563eb}
.cp-tab-active{color:#2563eb;border-bottom-color:#2563eb;}
/* ── RAW panel wraps existing list content ── */
#cp-raw-panel{
  display:flex;flex-direction:column;flex:1;overflow:hidden;
}
/* ── UPDATED panel header ── */
#cp-upd-pager{
  display:flex;align-items:center;gap:4px;padding:5px 10px;
  border-bottom:1px solid #f5f5f5;font-size:9px;color:#bbb;
  letter-spacing:.5px;flex-shrink:0;
}
/* ── pager action buttons (Reload, Upload, Select) ── */
.cp-pager-btn{
  font-size:8px;padding:4px 10px;border:1px solid #333;background:#fff;
  color:#333;cursor:pointer;font-family:'DM Mono',monospace;
  letter-spacing:1px;text-transform:uppercase;transition:background .08s,color .08s;
  flex-shrink:0;
}
.cp-pager-btn:hover{ border-color:#111;color:#111; }
.cp-pager-btn:active{ background:#333;color:#fff; }
.cp-pager-btn:disabled{opacity:.4;cursor:not-allowed}
/* outline variant — same as default now that default is outline-style */
.cp-pager-btn-outline{
  font-size:8px;padding:4px 10px;border:1px solid #bbb;background:#fff;
  color:#888;cursor:pointer;font-family:'DM Mono',monospace;
  letter-spacing:1px;text-transform:uppercase;transition:background .08s,color .08s,border-color .08s;
  flex-shrink:0;
}
.cp-pager-btn-outline:hover{ border-color:#333;color:#333; }
.cp-pager-btn-outline:active{ background:#333;color:#fff;border-color:#333; }
/* Cloud btn — white bg, purple border */
.cp-pager-btn-cloud{
  font-size:8px;padding:4px 10px;border:1px solid #7c3aed;background:#fff;
  color:#7c3aed;cursor:pointer;font-family:'DM Mono',monospace;
  letter-spacing:1px;text-transform:uppercase;transition:background .08s,color .08s;
  flex-shrink:0;
}
.cp-pager-btn-cloud:hover{ border-color:#6d28d9;color:#6d28d9; }
.cp-pager-btn-cloud:active{ background:#7c3aed;color:#fff; }
#cp-upd-photo-list::-webkit-scrollbar{width:2px}
#cp-upd-photo-list::-webkit-scrollbar-thumb{background:#ddd}
#cp-upd-empty{
  padding:20px 12px;text-align:center;color:#ccc;
  font-size:9px;letter-spacing:1.5px;text-transform:uppercase;line-height:1.7;
}
#cp-load-btn{ margin-left:auto; }   /* push to right */
/* pager label colours */
#cp-pager-counts{ display:flex;flex-direction:column;gap:1px;line-height:1.2; }
#cp-total-lbl, #cp-upd-total-lbl{ color:#ea580c;font-weight:300;font-size:14px; }
#cp-edited-lbl{ font-size:12px;color:#2563eb;font-weight:200;letter-spacing:.3px; }
#cp-range-lbl, #cp-upd-range-lbl{ color:#111;font-weight:200;font-size:14px; }
#cp-pager{
  display:flex;align-items:center;gap:4px;padding:5px 10px;
  border-bottom:1px solid #f5f5f5;font-size:9px;color:#bbb;
  letter-spacing:.5px;flex-shrink:0;
}
#cp-ph-loading{
  padding:12px;text-align:center;color:#bbb;font-size:9px;letter-spacing:1px;
}
#cp-photo-list{flex:1;overflow-y:auto}
#cp-photo-list::-webkit-scrollbar{width:2px}
#cp-photo-list::-webkit-scrollbar-thumb{background:#ddd}
#cp-ph-empty{
  padding:20px 12px;text-align:center;color:#ccc;
  font-size:9px;letter-spacing:1.5px;text-transform:uppercase;line-height:1.7;
}
#cp-viewer{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#f8f8f8;overflow:hidden;position:relative;
}
#cp-nosel{
  display:flex;flex-direction:column;align-items:center;gap:8px;color:#ccc;
}

/* ── detail: keypoints + image ── */
#cp-detail{
  position:absolute;inset:0;display:flex;flex-direction:row;overflow:hidden;
}

/* keypoints panel */
#cp-kp-panel{
  width:270px;min-width:270px;background:#fff;
  border-right:1px solid #e8e8e8;
  display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;
}
/* ── Bbox section ── */
#cp-bbox-section{
  border-top:1px solid #e8e8e8;
  padding:8px 12px 4px;
}
#cp-bbox-hdr{
  display:flex;align-items:baseline;gap:6px;
  margin-bottom:4px;
}
.cp-bbox-lbl{
  font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
  font-weight:500;color:#555;font-family:'DM Mono',monospace;
}
.cp-bbox-sub{
  font-size:9px;color:#aaa;font-family:'DM Mono',monospace;
}
.cp-bbox-row{
  display:grid;
  grid-template-columns:30px 1fr 1fr;
  align-items:center;
  gap:6px;
  padding:3px 0;
  font-size:12px;
  font-family:'DM Mono',monospace;
}
.cp-bbox-row.cp-bbox-changed .cp-bbox-inp{ color:#2563eb; }
.cp-bbox-field-lbl{
  font-size:10px;color:#777;text-align:right;padding-right:6px;
}
.cp-bbox-orig{
  font-size:10px;color:#111;text-align:right;padding-right:10px;
}
.cp-bbox-inp{
  font-size:10px;
  font-family:'DM Mono',monospace;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  width:100%;
  box-sizing:border-box;
  text-align:right;
  color:#111;
}
.cp-bbox-inp:focus{
  outline:none;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
/* ── */
#cp-kp-save-bar{
  padding:8px 12px 10px;
}
#cp-kp-save-btn{
  display:block;width:100%;padding:7px 0;
  font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  background:#fff;color:#16a34a;border:1.5px solid #16a34a;
  border-radius:5px;cursor:pointer;
}
#cp-kp-save-btn:hover{ background:#f0fdf4; }
#cp-kp-save-btn:active{ background:#dcfce7; }
#cp-kp-save-btn.saved{ color:#15803d;border-color:#15803d;background:#f0fdf4; }
#cp-kp-hdr{
  display:flex;align-items:center;
  padding:6px 12px 5px 14px;border-bottom:1px solid #f0f0f0;flex-shrink:0;
  font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#555;font-weight:600;
}
#cp-kp-hdr .cp-kp-idx{
  color:#ea580c; /* keep # orange */
}
#cp-kp-hdr .cp-kp-name,
#cp-kp-hdr .cp-kp-x,
#cp-kp-hdr .cp-kp-y,
#cp-kp-hdr .cp-kp-vis{
  color:#2563eb;font-size:8px;
}
/* Y header: match data column width + alignment */
#cp-kp-hdr .cp-kp-y{
  width:46px;text-align:right;flex-shrink:0;
}
/* VIS header spans vis-value + button area so text lands at the far right */
#cp-kp-hdr .cp-kp-vis{
  width:48px;
  text-align:right;
  margin-right:0;
  flex-shrink:0;
}
.cp-kp-btn-ph{ width:20px;flex-shrink:0; }
#cp-kp-list{
  overflow-y:visible;padding:2px 0;
}
#cp-kp-list::-webkit-scrollbar{width:2px}
#cp-kp-list::-webkit-scrollbar-thumb{background:#eee}
.cp-kp-row{
  display:flex;flex-direction:column;padding:4px 12px 4px 14px;
  border-bottom:1px solid #f7f7f7;transition:background .1s;
}
.cp-kp-row:hover{background:#fafafa}
.cp-kp-row.cp-kp-dim{opacity:.35}
/* main line */
.cp-kp-main{display:flex;align-items:center;gap:0}
.cp-kp-idx{
  width:22px;font-size:8px;color:#ea580c;flex-shrink:0;letter-spacing:.2px;font-weight:600;
}
.cp-kp-name{
  flex:1;min-width:0;font-size:9px;color:#555;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cp-kp-x,.cp-kp-y{
  width:46px;font-size:9px;color:#aaa;text-align:right;flex-shrink:0;
}
.cp-kp-vis{
  width:20px;font-size:9px;font-weight:700;text-align:right;
  flex-shrink:0;margin-right:8px;
}
.cp-vis-on{color:#16a34a}
.cp-vis-off{color:#dc2626}
.cp-kp-btn{
  width:20px;height:20px;border-radius:50%;border:none;cursor:pointer;
  font-size:10px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:0;line-height:1;transition:background .15s;
}
.cp-btn-on{background:#dcfce7;color:#16a34a}
.cp-btn-on:hover{background:#bbf7d0}
.cp-btn-off{background:#fee2e2;color:#dc2626}
.cp-btn-off:hover{background:#fecaca}
/* new coords row (shown when position changed) */
.cp-kp-new-coords{
  display:flex;align-items:center;gap:0;
  padding-left:22px;   /* skip idx column */
  padding-right:48px;  /* skip vis(28px) + btn(20px) to align under orig x/y */
  margin-top:1px;
}
.cp-kp-new-lbl{
  flex:1;font-size:8px;color:#93c5fd;letter-spacing:.3px;
}
.cp-kp-new-x,.cp-kp-new-y{
  width:46px;font-size:9px;color:#3b82f6;text-align:right;
  flex-shrink:0;font-weight:600;
}

/* image panel */
#cp-img-panel{
  flex:1;display:flex;flex-direction:column;align-items:center;
  background:#f5f5f5;overflow:hidden;padding:16px 24px 12px;gap:10px;
}
#cp-img-status{
  font-size:9px;color:#bbb;letter-spacing:.5px;font-family:'DM Mono',monospace;
  text-align:center;flex-shrink:0;min-height:14px;
}
/* image + canvas wrapper */
#cp-img-wrap{
  position:relative;flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  width:100%;overflow:hidden;
}
#cp-img{
  max-width:100%;max-height:100%;object-fit:contain;display:block;
  border:1px solid #e0e0e0;background:#fff;
  box-shadow:0 2px 16px rgba(0,0,0,.06);
  user-select:none;-webkit-user-drag:none;
}
#cp-kp-canvas{
  position:absolute;top:0;left:0;
  cursor:crosshair;pointer-events:all;z-index:1;
}
/* tooltip */
#cp-kp-tooltip{
  position:fixed;display:none;z-index:9999;
  background:rgba(0,0,0,.72);color:#fff;
  font-size:9px;letter-spacing:.5px;padding:3px 8px;border-radius:3px;
  pointer-events:none;white-space:nowrap;
  font-family:'DM Mono',monospace;
}
/* round nav buttons — overlay on left/right edges of image wrap */
#cp-nav-prev,#cp-nav-next{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(255,255,255,.88);
  color:#444;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:background .15s,box-shadow .15s;padding:0;
}
#cp-nav-prev{ left:10px; }
#cp-nav-next{ right:10px; }
#cp-nav-prev:hover,#cp-nav-next:hover{
  background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.26);color:#000;
}
#cp-nav-prev:disabled,#cp-nav-next:disabled{opacity:.25;cursor:not-allowed;box-shadow:none;}
#cp-nav-pos{font-size:9px;color:#bbb;letter-spacing:.5px;text-align:center;flex-shrink:0;}

/* ══════════════════════════════════════════
   MAIN APP SHELL
══════════════════════════════════════════ */
#main-app{
  display:none;flex-direction:column;height:100vh;width:100vw;overflow:hidden;
  font-family:'DM Mono',monospace;
}

/* ─── TAB BAR ─── */
#tab-bar{
  display:flex;align-items:stretch;height:46px;
  border-bottom:1px solid #e0e0e0;background:#fff;flex-shrink:0;
  z-index:100;position:relative;
}
#tab-bar-logo{
  padding:0 20px 0 18px;display:flex;align-items:center;gap:10px;
  border-right:1px solid #e8e8e8;white-space:nowrap;
}
#app-brand{
  font-family:'Inter',sans-serif;font-size:17px;font-weight:900;
  letter-spacing:-.04em;color:#000;line-height:1;
  cursor:pointer;
}
#app-project-name{
  font-family:'Inter',sans-serif;font-size:17px;font-weight:200;
  letter-spacing:.05em;color:#000;text-transform:uppercase;line-height:1;
}
.tab-btn{
  padding:0 20px;border:none;background:none;
  font-family:'Inter',sans-serif;font-size:10px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:#aaa;cursor:pointer;
  border-right:1px solid #f0f0f0;position:relative;
  transition:color .15s;
}
.tab-btn:hover{color:#555}
.tab-btn.active{color:#1755F4;font-weight:600}
.tab-btn.active::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#1755F4;
}
#tab-bar-end{
  margin-left:auto;display:flex;align-items:center;padding:0 16px;gap:10px;
}
/* ── Quy chuẩn modal ── */
#quy-chuan-modal{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.45);align-items:center;justify-content:center;
}
#quy-chuan-modal.open{ display:flex; }
#quy-chuan-card{
  background:#fff;width:560px;max-width:92vw;max-height:82vh;
  display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,.18);
}
#quy-chuan-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid #e8e8e8;flex-shrink:0;
  font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#111;
}
#quy-chuan-header button{
  background:none;border:none;cursor:pointer;font-size:14px;color:#999;padding:0 2px;
}
#quy-chuan-header button:hover{ color:#111; }
#quy-chuan-body{
  padding:18px 22px;overflow-y:auto;font-size:12px;line-height:1.75;color:#333;
  font-family:'DM Sans','DM Mono',sans-serif;
}
#quy-chuan-body p{ margin:10px 0 4px; }
#quy-chuan-body ul{ margin:4px 0 10px;padding-left:20px; }
#quy-chuan-body li{ margin-bottom:4px; }
#quy-chuan-kp-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:3px 8px;
  background:#f8f8f8;padding:10px 12px;margin:6px 0;
  font-size:11px;font-family:'DM Mono',monospace;color:#555;
}
#user-menu{
  position:relative;cursor:pointer;
}
#user-badge{
  font-size:9px;color:#1755F4;letter-spacing:1px;text-transform:uppercase;font-weight:600;
  user-select:none;
}
#user-dropdown{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  background:#fff;border:1px solid #e8e8e8;box-shadow:0 4px 12px rgba(0,0,0,.1);
  min-width:120px;z-index:999;
}
#user-dropdown.open{ display:block; }
/* ── User dropdown items ── */
#user-dropdown .ud-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:0;
  padding:9px 14px;
  text-align:left;
  background:none;
  border:none;
  cursor:pointer;
  font-family:'DM Mono',monospace;
  font-size:11px;
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
  color:#111;
  white-space:nowrap;
}
#user-dropdown .ud-item:hover{ background:#f5f5f5; }
#user-dropdown .ud-item.ud-danger{ color:#cc2200; }
#user-dropdown .ud-item.ud-danger:hover{ background:#fff4f2; }
#user-dropdown .ud-label{ flex:1; }

/* ── Service warning bar (below tab-bar) ── */
#svc-warning{
  display:none;padding:5px 16px;background:#fff5f0;border-bottom:1px solid #ffd0bb;
  font-size:10px;color:#c04000;letter-spacing:.5px;font-family:'DM Mono',monospace;
  flex-shrink:0;align-items:center;gap:12px;
}
#svc-warning.show{display:flex}
#svc-warning-close{
  margin-left:auto;cursor:pointer;font-size:12px;color:#c04000;opacity:.6;
}
#svc-warning-close:hover{opacity:1}

/* ─── TAB CONTENTS ─── */
#tab-contents{flex:1;overflow:hidden;position:relative}
.tab-pane{position:absolute;inset:0;display:none}
.tab-pane.active{display:flex}

/* ══════════════════════════════════════════
   TAB 1: PHOTO BROWSER
══════════════════════════════════════════ */
#tab1-pane{flex-direction:row;overflow:hidden}

/* ── Photo list (left panel) ── */
#t1-photos{
  width:220px;min-width:220px;background:#fff;border-right:1px solid #e8e8e8;
  display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;
}
#t1-photos::-webkit-scrollbar{width:2px}
#t1-photos::-webkit-scrollbar-thumb{background:#ddd}
#t1-ph-hdr{
  padding:10px 12px 8px;border-bottom:1px solid #f0f0f0;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
}
.t1-ph-htitle{font-size:9px;text-transform:uppercase;letter-spacing:2px;color:#bbb}
#t1-load-btn{
  font-size:8px;padding:3px 8px;border:1px solid #ddd;background:#fff;
  color:#999;cursor:pointer;font-family:'DM Mono',monospace;
  letter-spacing:1px;text-transform:uppercase;transition:all .15s;
}
#t1-load-btn:hover{border-color:#000;color:#000}
#t1-ph-loading{padding:12px;text-align:center;color:#bbb;font-size:9px;letter-spacing:1px;display:none}
#t1-photo-list{flex:1;overflow-y:auto}
#t1-photo-list::-webkit-scrollbar{width:2px}
#t1-photo-list::-webkit-scrollbar-thumb{background:#ddd}
.t1-photo-item{
  display:flex;align-items:center;gap:9px;padding:7px 10px;
  border-bottom:1px solid #f5f5f5;cursor:pointer;transition:background .1s;
}
.t1-photo-item:hover{background:#f8f8f8}
.t1-photo-item.selected{background:#eef4ff;border-left:2px solid #0088cc;padding-left:8px}
.t1-thumb{width:40px;height:40px;object-fit:cover;border:1px solid #e8e8e8;flex-shrink:0;background:#f0f0f0;display:block}
.t1-thumb-ph{
  width:40px;height:40px;background:#f0f0f0;border:1px solid #e8e8e8;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;
}
.t1-item-info{flex:1;min-width:0}
.t1-item-name{font-size:9px;color:#555;font-family:'DM Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.t1-item-date{font-size:8px;color:#bbb;letter-spacing:.5px}
.t1-item-yaw{font-size:8px;padding:2px 5px;background:#eef4ff;color:#0088cc;font-family:'DM Mono',monospace;white-space:nowrap;border:1px solid #c8dff8;flex-shrink:0}
#t1-ph-empty{padding:20px 12px;text-align:center;color:#ccc;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;line-height:1.7}

/* ── Tab 1 info sidebar (middle) ── */
#t1-sb{
  width:260px;min-width:260px;background:#fff;border-right:1px solid #e8e8e8;
  overflow-y:auto;display:flex;flex-direction:column;padding:14px;gap:12px;flex-shrink:0;
}
#t1-sb::-webkit-scrollbar{width:2px}
#t1-sb::-webkit-scrollbar-thumb{background:#ddd}
#t1-nosel{
  flex:1;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:8px;color:#ddd;
}
.t1-nosel-icon{font-size:26px}
.t1-nosel-txt{font-size:9px;letter-spacing:2px;text-transform:uppercase}

/* ── Angle comparison card ── */
.t1-ac-row{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.t1-ac-lbl{font-size:9px;color:#999;text-transform:uppercase;letter-spacing:1.5px;min-width:68px}
.t1-ac-val{font-size:22px;font-family:'Inter',sans-serif;font-weight:300;color:#000;line-height:1}
.t1-ac-unit{font-size:10px;color:#aaa}
#t1-delta-bar{height:3px;background:#e8e8e8;border-radius:2px;overflow:hidden;margin:6px 0 4px}
#t1-delta-fill{height:100%;background:#0088cc;border-radius:2px;width:0%;transition:width .3s,background .3s}
#t1-delta-val{font-size:11px;color:#555;font-family:'DM Mono',monospace}

/* ── Tab 1 right column (viewports + S3 photo) ── */
#t1-right-col{
  flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;
}
#t1-views{
  flex:1;display:grid;
  grid-template-columns:4fr 7fr 7fr;
  grid-template-rows:1fr 1fr;
  grid-template-areas:"vp3d vp3d vptop" "vpcam vpside vpfront";
  gap:1px;background:#e0e0e0;min-height:0;
  height:100%;
}
#t1-vp-3d   { grid-area: vp3d; }
#t1-vp-top  { grid-area: vptop; }
#t1-vp-cam  { grid-area: vpcam; background:#111; }
#t1-vp-side { grid-area: vpside; }
#t1-vp-front{ grid-area: vpfront; }
#t1-photo-row{
  display:flex;justify-content:center;margin-bottom:10px;width:100%;
}
#t1-s3-area{
  width:100%;
  aspect-ratio:9/16;
  border:1px solid #e8e8e8;
  background:#f5f5f5;display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
/* Camera viewport in t1-views */
#t1-vp-cam canvas{background:#111;}
#t1-vp-cam .cam-lbl{opacity:.7;}
#t1-vp-cam .vp-label{display:none;}
#t1-s3-area .s3-lbl{
  position:absolute;top:6px;left:8px;font-size:8px;text-transform:uppercase;
  letter-spacing:2px;color:#ccc;font-family:'DM Mono',monospace;
}
#t1-s3-area .s3-meta{
  position:absolute;bottom:5px;left:8px;right:8px;font-size:8px;color:#bbb;
  font-family:'DM Mono',monospace;word-break:break-all;line-height:1.3;
}
#t1-s3-img{
  max-height:100%;max-width:100%;object-fit:contain;display:none;
}
#t1-s3-placeholder{
  font-size:9px;color:#ccc;text-transform:uppercase;letter-spacing:1.5px;
  font-family:'DM Mono',monospace;text-align:center;padding:0 12px;
}
.t1-s3-err{
  font-size:9px;color:#ee2222;letter-spacing:.6px;font-family:'DM Mono',monospace;
  text-align:center;padding:0 12px;line-height:1.6;font-weight:500;
}

/* ── list item: ID only ── */
.t1-item-id{
  flex:1;font-size:10px;color:#333;font-family:'DM Mono',monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.t1-item-sub{
  font-size:8px;color:#bbb;letter-spacing:.3px;margin-top:1px;
  font-family:'DM Mono',monospace;
}
.cp-status-badge{
  display:inline-block;font-size:7px;padding:1px 5px;
  font-family:'DM Mono',monospace;letter-spacing:.5px;
  text-transform:uppercase;font-weight:700;vertical-align:middle;
}
.cp-status-fixed{background:#dcfce7;color:#16a34a;border:1px solid #bbf7d0}
.cp-status-same{ background:#f3f4f6;color:#9ca3af;border:1px solid #e5e7eb}
/* Cloud uploaded icon */
.cp-cloud-icon{
  width:18px;height:18px;margin-left:4px;vertical-align:middle;
  flex-shrink:0;object-fit:contain;
  filter:invert(28%) sepia(80%) saturate(1500%) hue-rotate(245deg) brightness(90%);
}
/* Select mode checkbox */
.cp-upd-check{
  width:14px;height:14px;accent-color:#2563eb;cursor:pointer;
  flex-shrink:0;margin-right:4px;
}
/* Select All row */
#cp-upd-select-all-row{
  display:flex;align-items:center;gap:6px;padding:6px 10px 5px;
  border-bottom:1px solid #eff6ff;background:#f8faff;cursor:pointer;
  font-size:9px;font-family:'DM Mono',monospace;font-weight:700;
  color:#2563eb;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0;
}
#cp-upd-select-all-row:hover{background:#eff6ff}

/* ── Upload modal ── */
#cp-upload-modal{ display:none; }
#cp-upload-modal.open{ display:flex !important; }
#cp-upload-card{
  background:#fff;padding:28px 28px 22px;min-width:320px;max-width:400px;width:90%;
  box-shadow:0 8px 40px rgba(0,0,0,.18);
}
#cp-upload-title{
  font-size:13px;font-weight:700;letter-spacing:.3px;margin-bottom:4px;color:#111;
  font-family:'DM Mono',monospace;text-transform:uppercase;
}
#cp-upload-sub{
  font-size:9px;color:#aaa;letter-spacing:.5px;margin-bottom:14px;
  font-family:'DM Mono',monospace;
}
#cp-upload-sub strong{ color:#333;font-weight:700; }
#cp-upload-err{
  min-height:18px;font-size:9px;color:#dc2626;font-family:'DM Mono',monospace;
  margin-top:6px;letter-spacing:.3px;
}
#cp-upload-actions{
  display:flex;gap:8px;justify-content:flex-end;margin-top:16px;
}
#cp-upload-cancel-btn{
  font-size:9px;padding:7px 18px;border:1px solid #ddd;background:#fff;
  color:#888;cursor:pointer;font-family:'DM Mono',monospace;
  letter-spacing:1px;text-transform:uppercase;
}
#cp-upload-cancel-btn:hover{border-color:#888;color:#333}
#cp-upload-confirm-btn{
  font-size:9px;padding:7px 18px;border:1px solid #2563eb;background:#2563eb;
  color:#fff;cursor:pointer;font-family:'DM Mono',monospace;
  letter-spacing:1px;text-transform:uppercase;transition:background .15s;
}
#cp-upload-confirm-btn:hover{background:#1d4ed8;border-color:#1d4ed8}
#cp-upload-confirm-btn:disabled{opacity:.5;cursor:not-allowed}
/* "Edited" badge in RAW DATA list */
.cp-edited-badge{
  display:inline-block;font-size:7px;padding:1px 4px;flex-shrink:0;
  font-family:'DM Mono',monospace;letter-spacing:.5px;font-weight:700;
  text-transform:uppercase;vertical-align:middle;
  background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;
}
.t1-s3-badge{
  font-size:8px;padding:2px 5px;border-radius:0;margin-left:4px;
  font-family:'DM Mono',monospace;white-space:nowrap;
}
.t1-s3-badge.ok{background:#e8f5ee;color:#008844;border:1px solid #b8e0c8}
.t1-s3-badge.err{background:#fef0f0;color:#c04000;border:1px solid #f0c0b0}
.t1-s3-badge.pending{background:#f0f0f0;color:#bbb;border:1px solid #ddd}

/* ── Dynamic ALL fields renderer ── */
#t1-all-fields-wrap{display:none}
.t1-field-section{margin-bottom:12px}
.t1-field-section-title{
  font-size:8px;text-transform:uppercase;letter-spacing:2px;color:#bbb;
  margin-bottom:6px;padding-bottom:3px;border-bottom:1px solid #f0f0f0;
}
.t1-field-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:3px 0;border-bottom:1px solid #f8f8f8;font-size:10px;gap:8px;
}
.t1-field-key{color:#999;min-width:80px;flex-shrink:0;font-size:9px;letter-spacing:.3px}
/* Seq stats (d1/d2/pitch) — larger bold values */
#t1-seq-stats .t1-field-val{font-size:13px;font-weight:700;color:#000}
#t1-seq-stats .t1-field-key{font-size:9px;color:#aaa}
.t1-field-val{
  color:#333;text-align:right;word-break:break-all;font-family:'DM Mono',monospace;
  font-size:10px;
}
.t1-field-map{
  width:100%;margin-top:2px;padding-left:10px;border-left:2px solid #f0f0f0;
}

/* ── Seq data buttons ── */
#t1-seq-pnl{display:none;border-top:1px solid #f0f0f0;padding-top:10px;margin-top:4px}
.t1-seq-hdr{font-size:8px;text-transform:uppercase;letter-spacing:2px;color:#bbb;
  margin-bottom:7px;display:flex;align-items:center;justify-content:space-between}
.t1-seq-cnt{font-size:9px;color:#ccc;letter-spacing:0;font-weight:400}
#t1-seq-btns{display:flex;flex-wrap:wrap;gap:3px}
.t1-seq-btn{
  width:26px;height:26px;border:1px solid #e0e0e0;background:#fff;
  font-size:9px;font-family:'DM Mono',monospace;cursor:pointer;
  color:#222;font-weight:500;transition:all .1s;line-height:1;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.t1-seq-btn:hover{border-color:#aaa;background:#f5f5f5}
/* selected / active → blue background, white text always */
.t1-seq-btn.active{background:#1755F4 !important;color:#fff !important;border-color:#1755F4;font-weight:700}
/* high-delta → only the number turns red, bg stays white */
.t1-seq-btn.over-delta{color:#ee2222;font-weight:700}
#t1-seq-play{
  font-size:9px;padding:2px 8px;border:1px solid #bbb;background:#fff;
  cursor:pointer;font-family:'DM Mono',monospace;letter-spacing:1px;
  transition:all .15s;color:#333;
}
#t1-seq-play:hover{border-color:#1755F4;color:#1755F4}
#t1-seq-play.playing{border-color:#cc2200;color:#cc2200}

/* ── Dark mode: seq buttons ── */

/* ── Dark mode overrides for Tab 1 ── */

/* ══════════════════════════════════════════
   PSS SIMULATION (TAB 2) — from PSS-FullAngle
══════════════════════════════════════════ */
#tab2-pane{flex-direction:row}

:root{
  --bg:#fff;--surface:#fff;--border:#e0e0e0;--text:#000;
  --dim:#999;--cyan:#000;--mag:#000;--yel:#000;
  --grn:#555;--orn:#444;--pur:#666;--red:#000;--blu:#555
}

#pss-app{display:flex;height:100%;width:100%;overflow:hidden}

#sb{
  width:300px;min-width:300px;background:#fff;border-right:none;
  padding:16px;overflow-y:auto;display:flex;flex-direction:column;
  gap:14px;z-index:10;
}
#sb::-webkit-scrollbar{width:1px}
#sb::-webkit-scrollbar-thumb{background:#ddd}
#sb::-webkit-scrollbar-track{background:transparent}
#sb h1{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:#000;
}
.sub{font-size:9px;color:#999;text-transform:uppercase;letter-spacing:3px;font-weight:400}
.pnl{background:#fff;border:none;border-radius:0;padding:0}
.pt{
  font-family:'Inter',sans-serif;font-size:10px;text-transform:uppercase;
  letter-spacing:2px;color:#999;margin-bottom:6px;display:flex;
  align-items:center;gap:6px;font-weight:500;
}
.pt .d{width:5px;height:5px;border-radius:0}
.dr{
  display:flex;justify-content:space-between;padding:4px 0;
  font-size:12px;border-bottom:none;
}
.dr .l{color:#999;font-size:11px}.dr .v{font-weight:500;font-size:12px}
.vc{color:#000}.vm{color:#000}.vg{color:#555}.vy{color:#000}
.bn{
  font-family:'Inter',sans-serif;font-size:40px;font-weight:300;
  text-align:center;padding:6px 0;line-height:1;letter-spacing:-1px;
}
.bl{text-align:center;font-size:8px;text-transform:uppercase;letter-spacing:3px;color:#bbb;margin-top:4px;font-weight:400}
.btn-row{display:flex;gap:5px;flex-wrap:wrap}
.tb{
  flex:1;min-width:50px;padding:7px 5px;border:1px solid #ddd;border-radius:0;
  background:#fff;color:#999;font-family:'DM Mono',monospace;font-size:10px;
  cursor:pointer;transition:all .15s;text-align:center;text-transform:uppercase;letter-spacing:1px;
}
.tb.on{border-color:#000;color:#000;background:#f5f5f5}
.tb:hover{border-color:#000}
.fb{background:#fafafa;border:none;border-radius:0;padding:10px;font-size:11px;line-height:1.8}
.fb .s1{color:#000;font-weight:500}.fb .s2{color:#000;font-weight:500}.fb .s4{color:#000;font-weight:500}
.ins{font-size:10px;color:#bbb;line-height:1.6;padding:8px 0;border-top:none}
.ins b{color:#000;font-weight:500}

#cam-panel{
  position:relative;width:100%;padding-bottom:177%;
  border:1px solid #ccc;border-radius:0;overflow:hidden;background:#111;
}
#cam-panel canvas{display:block;position:absolute;top:0;left:0;width:100%;height:100%}
.cam-lbl{
  position:absolute;top:8px;left:10px;font-size:9px;font-weight:500;
  color:#fff;pointer-events:none;z-index:3;text-transform:uppercase;letter-spacing:2px;opacity:.6;
}
.cam-ang{
  position:absolute;bottom:8px;left:10px;font-family:'Inter',sans-serif;
  font-size:13px;font-weight:400;color:#fff;pointer-events:none;z-index:3;letter-spacing:1px;opacity:.8;
}
.cam-dst{
  position:absolute;bottom:8px;right:10px;font-size:11px;color:#fff;
  font-weight:400;pointer-events:none;z-index:3;opacity:.6;
}
.cam-rec{
  position:absolute;top:8px;right:10px;font-size:7px;color:#e00;
  font-weight:500;display:flex;align-items:center;gap:3px;
  pointer-events:none;z-index:3;text-transform:uppercase;letter-spacing:1px;
}
.cam-rec .rd{width:5px;height:5px;border-radius:50%;background:#e00;animation:bk 1.2s infinite}
@keyframes bk{0%,100%{opacity:1}50%{opacity:.15}}
.cam-xh{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:3;opacity:.15;
}
.cam-zoom-lbl{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:400;color:rgba(255,255,255,.4);
  pointer-events:none;z-index:3;letter-spacing:1px;
}
#zoom-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:0;
  background:#000;cursor:pointer;border:none;
}
#reset-btn{
  padding:8px;border:1px solid #000;border-radius:0;background:#fff;
  color:#000;font-family:'DM Mono',monospace;font-size:10px;font-weight:400;
  cursor:pointer;transition:all .15s;text-align:center;
  text-transform:uppercase;letter-spacing:1.5px;
}
#reset-btn:hover{background:#000;color:#fff}

#views{
  flex:1;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:1px;background:#e0e0e0;
}
.vp{position:relative;background:#fafafa;overflow:hidden}
.vp canvas{display:block;width:100%;height:100%;cursor:crosshair}
.vp canvas.grabbing{cursor:grabbing}
.vp-label{
  position:absolute;top:10px;left:12px;font-size:10px;font-weight:500;
  color:#aaa;pointer-events:none;display:flex;align-items:center;
  gap:6px;text-transform:uppercase;letter-spacing:2px;
}
.vp-label .tag{
  padding:2px 8px;border-radius:0;font-size:9px;font-weight:600;
  letter-spacing:1.5px;background:none;border:none;color:#aaa;
}
.vp-hint{position:absolute;bottom:8px;right:10px;font-size:9px;color:#ccc;pointer-events:none;letter-spacing:1px}

/* ─── UWB Input Panel ─── */
#uwb-input-panel{
  background:#f8f8f8;border:1px solid #e8e8e8;padding:12px;
}
#uwb-input-panel .pt{margin-bottom:10px}
.uwb-inp-row{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.uwb-inp-lbl{
  font-size:10px;color:#777;min-width:28px;letter-spacing:.5px;
}
.uwb-inp{
  flex:1;padding:5px 8px;border:1px solid #ddd;
  font-family:'DM Mono',monospace;font-size:12px;color:#000;
  outline:none;border-radius:0;background:#fff;
  transition:border-color .15s;
}
.uwb-inp:focus{border-color:#000}
.uwb-inp-unit{font-size:10px;color:#bbb;min-width:14px}
#uwb-apply-btn{
  width:100%;padding:7px;margin-top:4px;
  border:1px solid #000;background:#000;color:#fff;
  font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;
  transition:all .15s;
}
#uwb-apply-btn:hover{background:#fff;color:#000}
#uwb-msg{
  font-size:9px;text-align:center;margin-top:6px;min-height:14px;
  letter-spacing:.5px;
}
.uwb-ok{color:#00884a}
.uwb-err{color:#cc2200}

/* ─── Dark Mode ─── */
body:not(.dark) .cam-lbl{color:#000;opacity:.5}
body:not(.dark) .cam-ang{color:#000;opacity:.9}
body:not(.dark) .cam-dst{color:#000;opacity:.7}
body:not(.dark) .cam-zoom-lbl{color:rgba(0,0,0,.4)}
body:not(.dark) .cam-rec{color:#c00}
body:not(.dark) .cam-rec .rd{background:#c00}

/* ── Pagination bar (Tab 1) ── */
#t1-pager{
  padding:5px 10px 5px 12px;border-bottom:1px solid #f0f0f0;
  display:flex;align-items:center;gap:5px;background:#fafafa;flex-shrink:0;
  min-height:28px;
}
#t1-total-lbl{
  font-size:8px;color:#bbb;letter-spacing:.5px;
  font-family:'DM Mono',monospace;flex:1;white-space:nowrap;
}
#t1-range-lbl{
  font-size:9px;color:#1755F4;letter-spacing:.5px;font-weight:600;
  font-family:'DM Mono',monospace;white-space:nowrap;
}
.t1-pg-btn{
  width:22px;height:22px;border:1px solid #ddd;background:#fff;color:#666;
  font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;line-height:1;transition:all .15s;flex-shrink:0;
  font-family:'DM Mono',monospace;
}
.t1-pg-btn:hover:not(:disabled){border-color:#1755F4;color:#1755F4;background:#f0f4ff}
.t1-pg-btn:disabled{opacity:.3;cursor:not-allowed}

/* ── Angle comparison color coding ── */
/* Computed θ (yaw) → orange */
#t1-theta-computed{ color:#e07010!important; font-weight:700 }
/* Pitch φ → purple */
#t1-seq-pitch     { color:#9944cc!important; font-weight:600 }
/* Distance d → bright green */
#t1-seq-dist      { color:#00bb44!important; font-weight:600 }