@import url("/static/fonts.css");
:root {
  font-family: Inter, Arial, sans-serif;
  color: #142738;
  background: #f2f4f4;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
header {
  height: 90px;
  background: #101f2b;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 4vw;
  color: #c9d2d9;
}
header img {
  width: 160px;
  max-height: 52px;
  object-fit: contain;
}
header #identity {
  margin-left: auto;
  font-size: 13px;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
}
#demo {
  background: #e9e0b9;
  color: #4b432b;
  text-align: center;
  padding: 8px;
  font-size: 11px;
  letter-spacing: 1px;
}
main {
  max-width: 1450px;
  margin: auto;
  padding: 48px 4vw;
  min-height: 75vh;
}
.topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
h1 {
  font-size: 38px;
  letter-spacing: -1.4px;
  margin: 9px 0 12px;
  font-weight: 500;
}
h2 {
  font-size: 25px;
  font-weight: 500;
  margin: 8px 0 12px;
}
h3 {
  font-size: 17px;
  font-weight: 600;
}
p {
  line-height: 1.65;
  color: #617280;
  font-size: 14px;
}
button,
.button {
  border: 1px solid #ccd4d8;
  background: white;
  padding: 11px 17px;
  color: #243a49;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover,
.button:hover {
  background: #e7edef;
}
button.primary {
  background: #bfcf92;
  color: #192b22;
  border-color: #bfcf92;
}
button.danger {
  color: #a0423c;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
.stat {
  padding: 20px 24px;
  border: 1px solid #dce1e2;
  background: #fff;
  border-radius: 5px;
}
.stat strong {
  font-size: 30px;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}
.stat span {
  font-size: 12px;
  color: #697c88;
}
.workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
}
.rooms {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.room-button {
  text-align: left;
  padding: 18px;
  display: block;
  border-color: transparent;
  background: transparent;
}
.room-button.selected {
  background: #fff;
  border: 1px solid #cbd5d9;
  border-left: 3px solid #708c63;
}
.room-button strong {
  display: block;
  font-size: 14px;
  margin-bottom: 9px;
}
.room-button span {
  color: #73818b;
  font-size: 12px;
}
.panel {
  background: #fff;
  border: 1px solid #dce1e2;
  border-radius: 6px;
  padding: 28px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.badge {
  display: inline-block;
  padding: 5px 9px;
  background: #edf2e7;
  color: #526347;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-radius: 3px;
}
.badge.muted {
  background: #f0eeee;
  color: #806561;
}
.policy {
  display: flex;
  gap: 18px;
  border-top: 1px solid #e7ebed;
  border-bottom: 1px solid #e7ebed;
  padding: 15px 0;
  margin: 22px 0;
  font-size: 11px;
  color: #657682;
  flex-wrap: wrap;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 17px;
  margin: 20px 0 34px;
}
.card {
  border: 1px solid #dce2e5;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  padding: 0;
  text-align: left;
}
.card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  background: #edf0f1;
}
.card .info {
  padding: 17px;
  display: block;
}
.card strong {
  display: block;
  font-size: 14px;
  margin: 9px 0;
  line-height: 1.4;
}
.card small {
  font-size: 11px;
  color: #7b8890;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
}
.section-head h3 {
  margin: 0;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 16px;
}
td,
th {
  text-align: left;
  padding: 13px 8px;
  border-bottom: 1px solid #e9edef;
}
th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #7a8791;
  font-weight: 500;
}
td button {
  padding: 6px 10px;
  font-size: 11px;
}
.audit {
  list-style: none;
  padding: 0;
  font-size: 12px;
  max-height: 230px;
  overflow: auto;
}
.audit li {
  padding: 10px 0;
  border-bottom: 1px solid #edf0f2;
  color: #5d7080;
}
.audit time {
  float: right;
  color: #8a959d;
  font-size: 11px;
}
footer {
  border-top: 1px solid #d8e0e3;
  margin: 0 4vw;
  padding: 23px 0;
  color: #6b7c87;
  font-size: 11px;
  display: flex;
  gap: 30px;
  letter-spacing: 1px;
}
footer span:last-child {
  margin-left: auto;
}
dialog {
  border: 1px solid #cbd4d9;
  border-radius: 8px;
  max-width: min(92vw, 650px);
  width: 650px;
  padding: 32px;
  color: #142738;
  max-height: 90vh;
}
dialog::backdrop {
  background: #10212bc9;
}
dialog.viewer {
  width: 1080px;
  max-width: 94vw;
}
.close {
  position: absolute;
  right: 12px;
  top: 10px;
  border: 0;
  font-size: 24px;
  background: transparent;
  padding: 4px 9px;
}
label {
  display: block;
  margin: 18px 0 8px;
  font-size: 12px;
  color: #536875;
}
input,
select,
textarea {
  font: inherit;
  padding: 12px;
  border: 1px solid #cad4d9;
  border-radius: 3px;
  width: 100%;
  background: #fff;
  color: #1c3445;
}
input[type="checkbox"] {
  width: auto;
  margin-right: 9px;
}
label.check {
  display: flex;
  align-items: center;
}
form .actions {
  margin-top: 26px;
}
.login {
  max-width: 540px;
  margin: 35px auto;
  padding: 42px;
  background: #fff;
  border: 1px solid #dae1e4;
  border-radius: 6px;
}
.login button {
  width: 100%;
  margin-top: 16px;
}
.lock {
  font-size: 34px;
  color: #648264;
  margin-bottom: 25px;
}
.viewer-image {
  width: 100%;
  display: block;
  margin-top: 20px;
}
video {
  width: 100%;
  margin-top: 20px;
  background: #101f2b;
}
.empty {
  padding: 35px;
  text-align: center;
  background: #f6f8f8;
  border: 1px dashed #d1dadf;
  border-radius: 5px;
}
.outbox {
  word-break: break-all;
  background: #f2f5f6;
  padding: 18px;
  margin: 12px 0;
  font-size: 13px;
}
.outbox a {
  color: #345d71;
}
#notice {
  position: fixed;
  right: 25px;
  top: 110px;
  max-width: 450px;
  background: #233c4b;
  color: white;
  box-shadow: 0 4px 25px #0003;
  z-index: 10;
  padding: 18px 24px;
  border-radius: 5px;
  font-size: 13px;
}
.error {
  color: #a0423c;
}
.viewer-note {
  font-size: 11px;
}
#version {
  font-size: 10px;
}
@media (max-width: 850px) {
  .workspace {
    grid-template-columns: 1fr;
  }
  .rooms {
    flex-direction: row;
    overflow: auto;
  }
  .room-button {
    min-width: 210px;
  }
  .panel {
    padding: 18px;
  }
  main {
    padding: 28px 5vw;
  }
  header {
    gap: 15px;
  }
  header .eyebrow {
    display: none;
  }
  h1 {
    font-size: 30px;
  }
  .topline {
    align-items: flex-start;
  }
  .stats {
    gap: 7px;
  }
  .stat {
    padding: 14px;
  }
  table {
    display: block;
    overflow: auto;
  }
  .panel-head {
    flex-wrap: wrap;
  }
}
video {
  max-height: 60vh;
}
.viewer-image {
  object-fit: contain;
}

/* Keep the native file input accessible while giving the picker a branded face. */
.file-picker {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 22px;
  border: 1px dashed #a5b7a0;
  border-radius: 12px;
  background: #f5f8f2;
  cursor: pointer;
}
.file-picker:hover { border-color: #536d43; background: #edf3e7; }
.file-picker:focus-within { outline: 3px solid #536d43; outline-offset: 3px; }
.file-picker input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.file-picker-button {
  padding: 11px 18px;
  border-radius: 7px;
  background: #182d26;
  color: white;
  font-size: 13px;
  font-weight: 600;
}
.file-picker-name { flex: 1; min-width: 140px; overflow-wrap: anywhere; font-size: 13px; }
.file-picker-hint { flex-basis: 100%; color: #617280; font-size: 12px; }

#modal-error { color: #8b2424; background: #fff0ed; padding: 12px 16px; border-radius: 8px; overflow-wrap: anywhere; }
progress {width:100%;height:12px;accent-color:var(--accent);margin:8px 0 16px}
.upload-job {padding:14px 0;border-bottom:1px solid #dce3e4}
.upload-job p {margin:6px 0;font-size:.9rem}
.reader-toolbar {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}
.reader-toolbar label {display:flex;align-items:center;gap:8px;margin:0}
.reader-toolbar select {width:auto;margin:0}
.reader-scroll {overflow:auto;max-height:68vh;background:#d9dfe3;padding:12px}
.reader-scroll .viewer-image {margin:0;max-width:none;background:white;box-shadow:0 2px 10px #0002}
.zoom-100 .viewer-image {width:100%}
.zoom-150 .viewer-image {width:150%}
.zoom-200 .viewer-image {width:200%}
.zoom-300 .viewer-image {width:300%}
dialog.viewer.reader-expanded {width:100vw;max-width:none;max-height:none;height:100vh;border-radius:0}
dialog.viewer.reader-expanded .reader-scroll {max-height:80vh}

dialog.viewer.reader-expanded {margin:0;inset:0;box-sizing:border-box}

/* Documents use a scrolling page, independent of the native video player. */
dialog.document-reader.reader-expanded {
  padding:0;border:0;overflow:hidden;height:100dvh;width:100vw;
}
dialog.document-reader.reader-expanded #modal-body {height:100%;min-height:0}
dialog.document-reader.reader-expanded #modal-body > h2,
dialog.document-reader.reader-expanded #modal-body > .actions {display:none}
dialog.document-reader.reader-expanded .reader-scroll {
  position:absolute;inset:0;max-height:none;height:100%;padding:0;
  overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling:touch;
}
.document-reader .reader-scroll .viewer-image {height:auto;max-height:none;object-fit:initial}
dialog.document-reader.reader-expanded .reader-toolbar {
  position:absolute;z-index:2;right:max(8px,env(safe-area-inset-right));
  bottom:max(8px,env(safe-area-inset-bottom));margin:0;gap:4px;
  max-width:calc(100% - 16px);justify-content:flex-end;background:transparent;
}
dialog.document-reader.reader-expanded .reader-toolbar button,
dialog.document-reader.reader-expanded .reader-toolbar select {
  min-height:44px;border:0;box-shadow:none;background:rgba(255,255,255,.82);
  border-radius:6px;color:#142738;padding:8px;
}
dialog.document-reader.reader-expanded .reader-toolbar label {font-size:0;gap:0}
dialog.document-reader.reader-expanded .reader-toolbar select {font-size:12px;max-width:108px}
dialog.document-reader.reader-expanded #close {z-index:3;background:#ffffffb8;min-width:44px;min-height:44px}
@media (max-width: 900px) and (pointer: coarse), (max-width: 600px) {
  dialog.document-reader {
    margin:0;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;
    border:0;border-radius:0;padding:0;overflow:hidden;
  }
  dialog.document-reader #modal-body {height:100%;min-height:0}
  dialog.document-reader #modal-body > h2,
  dialog.document-reader #modal-body > .actions {display:none}
  dialog.document-reader .reader-scroll {
    position:absolute;inset:0;height:100%;max-height:none;padding:0;
    overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling:touch;
  }
  dialog.document-reader .reader-toolbar {
    position:absolute;z-index:2;right:max(8px,env(safe-area-inset-right));
    bottom:max(8px,env(safe-area-inset-bottom));margin:0;gap:4px;
    max-width:calc(100% - 16px);justify-content:flex-end;background:transparent;
  }
  dialog.document-reader .reader-toolbar button,
  dialog.document-reader .reader-toolbar select {
    min-height:44px;border:0;box-shadow:none;background:rgba(255,255,255,.82);
    border-radius:6px;color:#142738;padding:8px;
  }
  dialog.document-reader .reader-toolbar label {font-size:0;gap:0}
  dialog.document-reader .reader-toolbar select {font-size:12px;max-width:108px}
  dialog.document-reader #close {z-index:3;background:#ffffffb8;min-width:44px;min-height:44px}
}

.library-document{margin-block:20px}.library-version{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid #ddd}.library-version img{width:90px;height:100px;object-fit:contain}.library-version div{flex:1;overflow-wrap:anywhere}@media(max-width:600px){.library-version{flex-wrap:wrap}.library-version button{width:100%}}

/* Compact searchable customer navigation, including narrow screens. */
.workspace {grid-template-columns:minmax(280px,380px) minmax(0,1fr)}
.rooms {display:block;min-width:0;overflow:visible}
.room-filters {display:grid;grid-template-columns:1fr;gap:6px;margin-bottom:12px}
.room-filters label {margin:0;font-size:12px}
.room-filters input,.room-filters select {width:100%;margin:0;min-width:0}
#room-count {color:var(--muted);padding:4px 0}
#room-list {max-height:65dvh;overflow:auto}
.rooms .room-button {display:flex;align-items:center;gap:8px;width:100%;min-width:0;padding:9px 10px;margin:0;border-radius:0;border-bottom:1px solid #e0e5e2;white-space:nowrap;min-height:42px}
.rooms .room-button strong {flex:1;min-width:0;font-size:13px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rooms .room-button span {flex:0 1 40%;min-width:0;font-size:11px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rooms .room-button small {flex:0 0 auto;font-size:11px;color:#617280}
.reader-scroll {height:68dvh;scrollbar-gutter:stable;box-sizing:border-box}
#reader-pages {box-sizing:border-box;position:relative}
#reader-image {display:block}
.reader-toolbar .zoom-control {display:flex;align-items:center;gap:6px;font-size:12px}
.reader-toolbar .zoom-control input {width:110px;min-width:65px;margin:0;min-height:32px;padding:0;accent-color:#182d26}
.reader-toolbar .zoom-control output {min-width:42px;font-size:12px;color:#142738}
.reader-expanded .zoom-control {background:rgba(255,255,255,.82);border-radius:6px;padding:0 8px;min-height:44px}
.reader-expanded .zoom-control > span {display:none}
@media(max-width:900px) {
 .workspace {grid-template-columns:1fr}
 #room-list {max-height:34dvh}
 .room-filters {grid-template-columns:minmax(0,1fr) minmax(130px,180px)}
 .room-filters label[for="room-search"] {grid-column:1;grid-row:1}
 #room-search {grid-column:1;grid-row:2}
 .room-filters label[for="room-sort"] {grid-column:2;grid-row:1}
 #room-sort {grid-column:2;grid-row:2}
 #room-count {grid-column:1 / -1}
}
@media(max-width:900px) and (pointer:coarse), (max-width:600px) {
 .document-reader .zoom-control {background:rgba(255,255,255,.82);border-radius:6px;padding:0 8px;min-height:44px}
 .document-reader .zoom-control > span {display:none}
 .reader-toolbar .zoom-control input {width:95px}
}

.narration-controls {display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;max-width:100%}
.audio-status {font-size:11px;max-width:240px;color:#142738;background:#ffffffcf;border-radius:4px;padding:2px 6px}
.audio-player {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px;max-width:100%}
.audio-player[hidden] {display:none}
.audio-player audio {width:300px;max-width:100%;height:44px}
.reader-toolbar .audio-player label {font-size:12px}
.audio-player select[aria-label="Audio chapter"] {max-width:180px}
.reader-expanded .narration-controls {flex-basis:100%}
@media(max-width:600px) {.narration-controls {flex-basis:100%}.audio-player {width:100%}.audio-player audio {width:100%}.audio-status {max-width:180px}}