*{box-sizing:border-box}
:root{
  --bg:#0b1220;--panel:#111a2b;--panel2:#162238;--line:#263550;--text:#e7edf7;
  --muted:#91a0b8;--accent:#5ea0ff;--accent2:#2c78e8;--ok:#43c58a;--warn:#ffbd59;
  --danger:#f06d6d;--input:#0e1727;--shadow:0 12px 35px rgba(0,0,0,.28);
}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
body{padding-bottom:env(safe-area-inset-bottom)}
button,input,textarea,select{font:inherit}
button{touch-action:manipulation}
.topbar{position:sticky;top:0;z-index:20;height:72px;padding:10px max(14px,env(safe-area-inset-left)) 10px max(14px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;background:rgba(11,18,32,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.brandMark{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-weight:800;letter-spacing:.5px;background:linear-gradient(145deg,#2d7ef0,#72aefe);box-shadow:0 7px 20px rgba(45,126,240,.35)}
.brandTitle{font-size:19px;font-weight:800;line-height:1.05}
.brandSub{font-size:11px;color:var(--muted);margin-top:3px}
.topActions{display:flex;gap:8px}
main{max-width:1500px;margin:0 auto;padding:18px max(14px,env(safe-area-inset-left)) 34px max(14px,env(safe-area-inset-right))}
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin:4px 0 20px}
.hero h1{font-size:28px;margin:0 0 6px}.hero p{margin:0;color:var(--muted);max-width:780px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{background:linear-gradient(180deg,var(--panel),#0f1828);border:1px solid var(--line);border-radius:16px;padding:17px;box-shadow:var(--shadow)}
.card.clickable{cursor:pointer;transition:.15s transform,.15s border-color}
.card.clickable:hover{transform:translateY(-2px);border-color:#3d5d8d}
.card h2,.card h3{margin:0 0 8px}.card p{color:var(--muted);margin:0;line-height:1.45}
.iconBox{font-size:25px;margin-bottom:10px}
.section{margin-top:22px}.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.sectionHead h2{font-size:19px;margin:0}.sectionHead .actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:9px 12px;cursor:pointer;font-weight:650}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent2);border-color:#438df3;color:white}.btn.ok{background:#14724c;border-color:#219a68}.btn.warn{background:#73551c;border-color:#a87a26}.btn.danger{background:#6f2a31;border-color:#a64450}.btn.ghost{background:transparent}
.btn.small{padding:6px 9px;border-radius:8px;font-size:13px}
.btn.icon{padding:7px 9px;min-width:36px}
.status{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:750;border:1px solid var(--line)}
.status.open{color:#93f1c2;background:#143629}.status.closed{color:#c8d2e3;background:#202b3d}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.list{display:grid;gap:9px}
.listItem{display:flex;gap:12px;align-items:center;padding:12px 13px;border:1px solid var(--line);background:var(--panel);border-radius:12px}
.listItemMain{flex:1;min-width:0;cursor:pointer}.listItemTitle{font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.listItemMeta{font-size:12px;color:var(--muted);margin-top:4px}.listItemActions{display:flex;gap:5px}
.empty{border:1px dashed #3b4e6e;border-radius:14px;padding:28px;text-align:center;color:var(--muted)}
.formGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}
label{font-size:12px;color:#aebad0;font-weight:700}
input,textarea,select{width:100%;background:var(--input);color:var(--text);border:1px solid #31435f;border-radius:9px;padding:10px 11px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(94,160,255,.12)}
textarea{min-height:100px;resize:vertical}.hint{font-size:12px;color:var(--muted)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sheetHeader{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,.8fr));gap:9px;padding:13px;background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:12px}
.sheetHeader .value{font-weight:760}.sheetHeader .label{font-size:11px;color:var(--muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.4px}
.tableWrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:10px 11px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:top}
th{position:sticky;top:0;background:#162238;text-align:left;font-size:12px;color:#b7c4d9;z-index:2}
td{font-size:14px}tr:last-child td{border-bottom:0}th:last-child,td:last-child{border-right:0}
tbody tr{cursor:pointer}tbody tr:hover{background:#142137}
.gmtCell{font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap;color:#a8cfff}
.descCell{min-width:300px}.mediaBadges{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.badge{font-size:11px;border:1px solid #405575;border-radius:999px;padding:2px 6px;color:#b7c7df}
.modalBack{position:fixed;inset:0;background:rgba(0,0,0,.62);display:grid;place-items:center;padding:14px;z-index:100}
.modal{width:min(820px,100%);max-height:min(90vh,900px);overflow:auto;background:#0f192a;border:1px solid #354766;border-radius:17px;box-shadow:0 24px 80px rgba(0,0,0,.55)}
.modal.wide{width:min(1120px,100%)}
.modalHead{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;background:#111c2e;border-bottom:1px solid var(--line)}
.modalHead h2{font-size:18px;margin:0}.modalBody{padding:16px}.modalFoot{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;background:#111c2e;border-top:1px solid var(--line)}
.profileCols{display:grid;gap:8px}.profileRow{display:grid;grid-template-columns:42px minmax(150px,1.4fr) minmax(130px,.8fr) 92px;gap:8px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:10px;background:#121e31}
.profileRow.locked{opacity:.78}.dragHandle{display:grid;place-items:center;color:var(--muted);font-size:18px;cursor:grab}
.noteBox{background:#121f34;border-left:3px solid var(--accent);padding:10px 12px;border-radius:8px;color:#cbd7ea;font-size:13px}
.mediaTools{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mediaGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;margin-top:10px}
.mediaCard{position:relative;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#0b1321}
.mediaCard img{width:100%;height:120px;object-fit:cover;display:block}.mediaCard .mediaMeta{padding:7px 8px;font-size:11px;color:var(--muted)}
.mediaCard .removeMedia{position:absolute;top:6px;right:6px;background:#7d2f37;border:1px solid #aa4f59;color:#fff;border-radius:8px;width:30px;height:30px}
.canvasWrap{position:relative;width:100%;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:white}
.canvasWrap canvas{display:block;width:100%;height:auto;touch-action:none}
.annotateStage{position:relative;width:100%;min-height:320px;background:#080d16;border-radius:12px;overflow:hidden;display:grid;place-items:center}
.annotateStage canvas{max-width:100%;max-height:65vh;touch-action:none}
.colorRow{display:flex;gap:7px;align-items:center}.colorBtn{width:31px;height:31px;border:3px solid transparent;border-radius:50%;cursor:pointer}.colorBtn.active{border-color:white}
.toastRoot{position:fixed;right:16px;bottom:16px;z-index:200;display:grid;gap:7px;max-width:min(380px,calc(100vw - 32px))}
.toast{background:#16233a;border:1px solid #375073;color:#ecf3ff;border-radius:11px;padding:10px 12px;box-shadow:var(--shadow);animation:toastin .15s ease-out}
@keyframes toastin{from{transform:translateY(6px);opacity:0}}
.sep{height:1px;background:var(--line);margin:14px 0}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#202c40;border:1px solid #3b4b64;padding:1px 5px;border-radius:5px}
@media(max-width:900px){
  .grid{grid-template-columns:1fr}.sheetHeader{grid-template-columns:repeat(2,minmax(0,1fr))}.sheetHeader>div:first-child{grid-column:1/-1}
}
@media(max-width:620px){
  .brandSub{display:none}.topbar{height:62px}.brandMark{width:37px;height:37px}
  .btn{padding:9px 10px}.topActions .ghost{display:none}
  main{padding-top:12px}.hero{align-items:flex-start;flex-direction:column}.hero h1{font-size:24px}
  .formGrid{grid-template-columns:1fr}.sheetHeader{grid-template-columns:1fr 1fr}
  .profileRow{grid-template-columns:34px 1fr 95px}.profileRow .colType{grid-column:2/3}.profileRow .colActions{grid-column:3/4;grid-row:1/3}
}

/* VXEventLog v0.1.2 */
.gmtInput{
  width:112px;
  min-width:112px;
  max-width:112px;
  font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.3px;
}
.eventGmtField{min-width:130px;max-width:155px}
.modal.safeBottom{
  max-height:calc(90vh - 72px);
  margin-bottom:72px;
}
.modal.safeBottom .modalBody{padding-bottom:24px}
.photoActionBar{
  position:sticky;
  top:54px;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:-4px -2px 12px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(17,28,46,.97);
  backdrop-filter:blur(12px);
}
.photoTopButtons{display:flex;gap:8px;margin-left:auto}
@media(max-width:760px){
  .modal.safeBottom{max-height:calc(100vh - 104px);margin-bottom:78px}
  .photoActionBar{top:52px;align-items:flex-start}
  .photoActionBar>.toolbar{width:100%}
  .photoTopButtons{width:100%;justify-content:flex-end}
}


/* Annotation editing v0.1.2 */
.mediaCard{cursor:pointer}
.mediaCard:hover{border-color:#4d6f9f}
.mediaEditHint{color:#8fbaff;font-weight:700}
.annotationTools{flex:1;min-width:0}
.annotationTools .btn.primary{background:var(--accent2);border-color:#438df3}
@media(max-width:760px){
  .annotationTools{gap:6px}
  .annotationTools label{width:100%;display:flex;align-items:center;gap:8px}
  .annotationTools label input{flex:1}
}


/* VXEventLog v0.1.4 — correction Safari/iPad des formulaires */
.modal .field,
.modal .formGrid,
.modal input,
.modal select,
.modal textarea{
  min-width:0;
}
.modal input,
.modal select,
.modal textarea{
  max-width:100%;
  box-sizing:border-box;
}
.newLogDateField,
.newLogGmtField{
  width:100%;
}
.newLogDateInput{
  display:block;
  width:220px !important;
  min-width:180px !important;
  max-width:100% !important;
}
.newLogGmtInput{
  display:block;
  width:118px !important;
  min-width:118px !important;
  max-width:118px !important;
  font-variant-numeric:tabular-nums;
}
@media(max-width:620px){
  .newLogDateInput{
    width:210px !important;
    min-width:170px !important;
  }
}


/* VXEventLog v0.1.7 — ergonomie VXTestLog / iPad */
.gmtHead,.gmtCell{
  width:84px !important;
  min-width:84px !important;
  max-width:84px !important;
}
.descHead,.descCell{
  min-width:300px;
}
.boolHead,.boolCell{
  width:64px !important;
  min-width:64px !important;
  max-width:64px !important;
  text-align:center !important;
}
.actionHead,.actionCell{
  width:92px !important;
  min-width:92px !important;
  max-width:92px !important;
  text-align:center !important;
}
.detailHead,.detailCell{
  width:68px !important;
  min-width:68px !important;
  max-width:68px !important;
  text-align:center !important;
}
.detailHead{
  position:sticky;
  right:0;
  z-index:5;
}
.detailCell{
  position:sticky;
  right:0;
  z-index:1;
  background:var(--panel);
}
tbody tr:hover .detailCell{background:#142137}
.tableCheckbox{
  width:24px;
  height:24px;
  margin:0;
  accent-color:var(--accent2);
  vertical-align:middle;
}
.checkField{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:5px 2px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}
.checkField input[type="checkbox"]{
  width:30px;
  height:30px;
  min-width:30px;
  margin:0;
  accent-color:var(--accent2);
}
.detailBtn{
  width:34px;
  height:34px;
  padding:0;
  border:1px solid #50627f;
  border-radius:7px;
  background:#101929;
  color:#d7e2f4;
  font-weight:900;
  font-size:19px;
  cursor:pointer;
}
.detailBtn.hasDetail{
  background:#1f6f50;
  border-color:#36a878;
  color:white;
}
.mediaTools{
  margin-top:10px;
  padding:10px;
  border:1px solid #344963;
  border-radius:11px;
  background:#101b2d;
}
.mediaAddBtn{
  min-height:46px;
  padding:10px 14px;
}
#mediaGrid.detailFocus{
  outline:3px solid rgba(94,160,255,.7);
  outline-offset:4px;
  border-radius:12px;
}
.mediaEditHint{
  color:#a9cfff;
  font-weight:700;
}
@media(max-width:760px){
  .gmtHead,.gmtCell{
    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;
  }
  .boolHead,.boolCell{
    width:58px !important;
    min-width:58px !important;
    max-width:58px !important;
  }
  .detailHead,.detailCell{
    width:62px !important;
    min-width:62px !important;
    max-width:62px !important;
  }
}