:root { --bg: #f5f7fb; --bg-accent: #eef2fb; --surface: #ffffff; --surface-2: #f7f9fc; --text: #1f2533; --muted: #6b7384; --accent: #2f6bff; --accent-soft: #e7eeff; --ok: #1f9d57; --warn: #c77700; --danger: #d6455d; --border: #e6e9f0; --shadow: 0 1px 2px rgba(18, 28, 53, 0.04), 0 8px 24px rgba(18, 28, 53, 0.06); --radius: 14px; } * { box-sizing: border-box; } /* min-height (not height) so grows with content — otherwise it's capped at the viewport and sticky elements (the top bar) un-stick once you scroll past one screen. */ html, body { min-height: 100vh; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); background: radial-gradient(1200px 500px at 100% -10%, var(--bg-accent), transparent 60%), var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } .topbar { display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; /* above the filters rail (30) so the language/notif menus drop over it */ } .brand { font-size: 20px; font-weight: 750; letter-spacing: -0.01em; color: var(--text); } .brand span { color: var(--accent); } .topnav { display: flex; gap: 16px; margin-inline-start: 8px; } .topnav a { color: var(--muted); font-size: 14px; font-weight: 550; } .topnav a.cta { color: var(--accent); } .session { display: flex; align-items: center; } .chip { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; } /* language switcher — flag pill; the right-hand group (bell, language, account) starts here */ .lang-switch { position: relative; } .lang-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 999px; padding: 5px 10px; font-size: 12.5px; font-weight: 600; font-family: inherit; transition: background .15s, color .15s; } .lang-btn:hover { color: var(--text); background: var(--surface-2); } .lang-btn svg { width: 16px; height: 16px; opacity: .85; } .lang-code { letter-spacing: .03em; } /* country flags (Twemoji SVGs) in the switcher */ .flag { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; display: inline-block; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0,0,0,.06); } /* small spinner over the flag while the report is being translated into the chosen language */ .lang-flagwrap { position: relative; display: inline-flex; align-items: center; } .lang-spin { display: none; } .lang-btn.lang-busy .flag { opacity: .3; } .lang-btn.lang-busy .lang-spin { display: block; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border: 2px solid rgba(0,0,0,.16); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } .gate-lang .lang-btn.lang-busy .lang-spin { border-color: rgba(255,255,255,.35); border-top-color: #fff; } .lang-opt-l { display: inline-flex; align-items: center; gap: 9px; } .lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 172px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); } .lang-menu[hidden] { display: none; } .lang-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; cursor: pointer; background: transparent; color: var(--text); border: none; border-radius: 8px; padding: 8px 10px; font-size: 13.5px; font-weight: 500; font-family: inherit; text-align: start; transition: background .12s; } .lang-opt:hover { background: var(--surface-2); } .lang-opt.active { color: var(--accent); font-weight: 650; } .lang-check { color: var(--accent); font-size: 12px; } /* authenticated user chip in the topbar — collapsed to the avatar; name + sign-out slide out on hover */ .userchip { display: flex; align-items: center; cursor: pointer; outline: none; } .userchip-info { display: flex; align-items: center; gap: 10px; white-space: nowrap; max-width: 0; opacity: 0; margin-inline-end: 0; transform: translateX(10px); overflow: hidden; transition: max-width .7s ease, opacity .7s ease, margin .7s ease, transform .7s ease; } .userchip:hover .userchip-info, .userchip:focus-within .userchip-info { max-width: 360px; opacity: 1; margin-inline-end: 12px; transform: none; } .userchip .avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: var(--surface-2); } .userchip .avatar-fallback { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 650; font-size: 14px; background: var(--accent-soft); } .userchip .uname { font-size: 13.5px; font-weight: 600; color: var(--text); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hdr-google { display: flex; align-items: center; min-height: 32px; } /* sign-in screen (strict mode) */ .login-card { max-width: 420px; margin: 8vh auto 0; text-align: center; } .login-logo { font-size: 22px; font-weight: 750; letter-spacing: -0.01em; margin-bottom: 18px; } .login-logo span { color: var(--accent); } .login-card h1 { font-size: 22px; } .login-card .muted { margin: 6px 0 22px; } .login-google { display: flex; justify-content: center; min-height: 44px; } /* sign-in gate: a full-viewport backdrop over the whole page (header included), with the card centered on top and a white language switcher floating above the dimmed chrome */ .auth-gate { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(3px); } .auth-gate .login-card { margin-top: 16vh; background: var(--surface); box-shadow: 0 24px 60px rgba(0,0,0,.3); } .auth-gate-bar { position: absolute; top: 12px; inset-inline-end: 22px; } .gate-lang .lang-btn { color: #fff; } .gate-lang .lang-btn:hover { background: rgba(255,255,255,0.14); } .gate-lang .lang-code { color: #fff; } /* lazy caption-translation indicator in the inspection header */ .translating { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .translating::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: tl-pulse 1s ease-in-out infinite; } @keyframes tl-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } /* notifications bell + dropdown panel — starts the right-hand header group */ .notif-area { position: relative; display: flex; align-items: center; margin-inline-start: auto; } .notif-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: transparent; border: none; color: var(--muted); cursor: pointer; } .notif-btn svg { width: 20px; height: 20px; flex: none; } /* flex:none — otherwise the svg shrinks to ~8px wide in the inline-flex button */ .notif-btn:hover { background: var(--surface-2); color: var(--text); } .notif-btn:hover { background: var(--surface-2); color: var(--text); filter: none; } .notif-badge { position: absolute; top: 3px; inset-inline-end: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .notif-panel { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 80; width: 320px; max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 44px rgba(0,0,0,.18); padding: 6px; } .notif-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: 8px 10px 6px; } .notif-empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13px; } .notif-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; background: transparent; border: none; cursor: pointer; padding: 9px 10px; border-radius: 10px; font-family: inherit; color: var(--text); } .notif-row:hover { background: var(--surface-2); filter: none; } .notif-row.unread { background: var(--accent-soft); } .notif-row.unread:hover { background: #dbe6ff; } .notif-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #e6f6ec; color: #1a8f4c; } .notif-ic svg { width: 16px; height: 16px; } .notif-row.fail .notif-ic { background: #fdeaee; color: var(--danger); } .notif-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .notif-title { font-size: 13px; font-weight: 600; } .notif-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notif-time { flex: none; font-size: 11px; color: var(--muted); align-self: flex-start; padding-top: 2px; } /* inline button spinner (Finalize → PDF while generating) */ .spinner-sm { display: inline-block; width: 14px; height: 14px; margin-inline-end: 8px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; } .btn-loading { opacity: .9; cursor: default; } /* in-button spinner adapts to the button's text colour so it stays visible on a light disabled button */ .btn-loading .spinner-sm { border-color: currentColor; border-top-color: transparent; opacity: .7; } .container { max-width: 980px; margin: 26px auto; padding: 0 20px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .card.narrow { max-width: 520px; margin: 0 auto; } h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; } h2 { font-size: 16px; margin: 0 0 8px; } .muted { color: var(--muted); font-size: 13px; line-height: 1.55; } .toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } /* buttons */ button, .btn { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 9px 16px; font-weight: 600; font-size: 14px; cursor: pointer; transition: filter .15s, transform .05s; font-family: inherit; } button:hover:not(:disabled), .btn:hover { filter: brightness(1.05); } button:active:not(:disabled) { transform: translateY(1px); } button:disabled { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); cursor: not-allowed; } button.ghost, .btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); } button.danger { background: #fff; color: var(--danger); border: 1px solid var(--border); } .sm { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; } /* applies to too */ /* list */ .list { display: grid; gap: 10px; } .list-row { display: flex; align-items: center; gap: 12px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow); color: var(--text); cursor: pointer; transition: border-color .15s, transform .05s; } .list-row:hover { border-color: #cdd6ea; } .list-row .addr { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-row .meta { color: var(--muted); font-size: 13px; display: flex; gap: 10px; align-items: center; justify-content: flex-end; } .list-row .meta .date { white-space: nowrap; } /* fixed-width action slot so the status+date column lines up regardless of the hover buttons */ .list-row .row-actions { flex: none; width: 56px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; } /* per-row delete: a quiet trash button that only surfaces on hover */ .row-del { background: transparent; border: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; padding: 4px 6px; border-radius: 8px; opacity: 0; transition: opacity .15s, background .15s, color .15s; } .row-del svg { width: 16px; height: 16px; } .list-row:hover .row-del, .row-del:focus-visible { opacity: .7; } .row-del:hover { opacity: 1; background: #fdeaee; color: var(--danger); filter: none; } .row-pdf { background: transparent; border: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; padding: 4px 6px; border-radius: 8px; opacity: 0; transition: opacity .15s, background .15s, color .15s; } .row-pdf svg { width: 16px; height: 16px; } .list-row:hover .row-pdf, .row-pdf:focus-visible { opacity: .7; } .row-pdf:hover { opacity: 1; background: var(--accent-soft); color: var(--accent); filter: none; } /* objects master (left) / inspections detail (right) */ /* minmax(0,1fr) (not bare 1fr) so a long, non-wrapping address can't blow the track past the viewport — the row then ellipsises instead of forcing a horizontal scrollbar. */ .obj-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; } .obj-rail { display: flex; flex-direction: column; gap: 8px; position: sticky; top: calc(var(--topbar-h, 58px) + 12px); } .obj-card { position: relative; text-align: start; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; color: var(--text); box-shadow: var(--shadow); transition: border-color .15s, background .15s, padding .15s; font-family: inherit; } .obj-card:hover { border-color: #cdd6ea; filter: none; } .obj-card.active { border-color: var(--accent); background: var(--accent-soft); } /* live spinner on the right of a card while one of its inspections is uploading/processing */ .obj-card.processing { padding-inline-end: 40px; } .obj-spin { display: none; position: absolute; top: 50%; inset-inline-end: 14px; transform: translateY(-50%); } .obj-card.processing .obj-spin { display: block; } .obj-spin::after { content: ""; display: block; width: 17px; height: 17px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } .obj-name { font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .obj-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; } /* "All" — the aggregate view, set apart from the object cards */ .obj-all { display: flex; align-items: center; gap: 11px; background: linear-gradient(180deg, var(--accent-soft), var(--surface)); } .obj-all-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; } .obj-all-icon svg { width: 18px; height: 18px; } .obj-all-text { display: flex; flex-direction: column; min-width: 0; } .rail-sep { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin: 12px 4px 0; } .obj-main { min-width: 0; } .obj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .obj-title { font-size: 17px; } @media (max-width: 760px) { .obj-layout { grid-template-columns: 1fr; } .obj-rail { position: static; flex-direction: row; flex-wrap: wrap; } .obj-card { width: auto; flex: 1 1 160px; } .rail-sep { display: none; } } /* address wizard (structured per-region form) + map insets */ .addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin: 6px 0 8px; } .addr-grid .field { display: flex; flex-direction: column; gap: 5px; margin: 0; } .addr-grid .field.full { grid-column: 1 / -1; } .addr-grid .field.half { grid-column: span 1; } .addr-grid .field input, .addr-grid .field select { width: 100%; } .addr-grid .field small { font-size: 11.5px; line-height: 1.3; color: var(--muted); } /* label text + required asterisk on one line, hugging the input below */ .field-label { font-size: 13px; color: var(--muted); display: inline-flex; align-items: baseline; gap: 3px; } .req { color: #e5484d; } /* country/date labels in the wizard: same tight grouping */ .card.narrow label.fld { display: flex; flex-direction: column; gap: 5px; margin: 14px 0 0; font-size: 13px; color: var(--muted); } .date-edit.dt-full { width: 100%; display: block; padding: 9px 12px; font-size: 14px; } .geo-status { min-height: 16px; font-size: 12.5px; margin: 2px 0 0; } .dropzone.locked { pointer-events: none; opacity: 0.55; } .addr-map { height: 240px; border-radius: 12px; overflow: hidden; margin: 4px 0 10px; border: 1px solid var(--border); } .obj-map { height: 160px; border-radius: 12px; overflow: hidden; margin-bottom: 14px; border: 1px solid var(--border); } .obj-banner { padding: 10px 12px; background: var(--accent-soft); border-radius: 10px; margin-bottom: 8px; } @media (max-width: 760px) { .addr-grid { grid-template-columns: 1fr; } } .toolbar-actions { display: flex; align-items: center; gap: 14px; } .trash-link { color: var(--muted); font-size: 13.5px; font-weight: 550; } .trash-link:hover { color: var(--text); } .backlink { color: var(--muted); font-size: 13.5px; font-weight: 550; } .trash-note { margin: -6px 0 14px; } .trash-row { cursor: default; } .trash-row:hover { border-color: var(--border); } .purge-left { font-variant-numeric: tabular-nums; } .actions-row { display: flex; gap: 10px; margin-top: 16px; } button.danger-text { color: var(--danger); } /* confirm modal */ .modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(18, 28, 53, 0.34); backdrop-filter: blur(2px); opacity: 0; transition: opacity .15s; } .modal-overlay.show { opacity: 1; } .modal { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(18, 28, 53, 0.28); transform: translateY(8px) scale(.98); transition: transform .15s; } .modal-overlay.show .modal { transform: none; } .modal-title { font-size: 17px; margin: 0 0 8px; } .modal-body { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 20px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; } button.danger-solid { background: var(--danger); color: #fff; border: none; } .badge { font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; text-transform: lowercase; } .badge.draft { background: var(--accent-soft); color: var(--accent); } .badge.ready { background: #e7f7ee; color: var(--ok); } .badge.signed { background: #e9f0ff; color: #2148c0; } .badge.processing, .badge.queued, .badge.uploading, .badge.uploaded, .badge.created { background: #fff4e0; color: var(--warn); } .badge.failed { background: #fdeaee; color: var(--danger); } /* forms */ label { display: block; font-size: 13px; color: var(--muted); margin-top: 14px; } input, select, textarea { width: 100%; margin-top: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 9px 12px; font-size: 14px; font-family: inherit; transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .row { display: flex; gap: 10px; align-items: center; margin-top: 16px; } .hidden { display: none; } .progress { height: 8px; background: var(--surface-2); border-radius: 999px; margin-top: 16px; overflow: hidden; } .progress .bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; } /* file dropzone */ .dropzone { margin-top: 8px; border: 2px dashed #c5cfe6; border-radius: 14px; background: var(--surface-2); padding: 26px 18px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .05s; user-select: none; } .dropzone:hover { border-color: var(--accent); background: #fafcff; } .dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); } .dropzone.has-file { border-style: solid; border-color: var(--ok); background: #f3fbf6; } .dz-emoji { font-size: 26px; line-height: 1; } .dz-text { margin-top: 8px; font-weight: 600; font-size: 14px; } .dz-hint { margin-top: 3px; color: var(--muted); font-size: 12.5px; } /* full-window drag overlay (visual only) */ .drop-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(47, 107, 255, 0.10); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s; } .drop-overlay.show { opacity: 1; visibility: visible; } .drop-card { pointer-events: none; background: var(--surface); border: 3px dashed var(--accent); border-radius: 22px; padding: 48px 64px; text-align: center; box-shadow: 0 20px 60px rgba(18, 28, 53, 0.18); } .drop-emoji { font-size: 42px; } .drop-title { margin-top: 10px; font-size: 22px; font-weight: 700; } .drop-sub { margin-top: 4px; color: var(--muted); } /* inspection header */ /* Title + date: full-width top row, NOT sticky → it scrolls off as you go down and returns at the top. */ .insp-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; margin: 0 0 10px; } .insp-title h1 { overflow-wrap: anywhere; margin: 0; } .insp-title .insp-meta { white-space: nowrap; } /* Actions: a sticky toolbar parked just under the global menu — always reachable while scrolling. */ .insp-bar { position: sticky; top: var(--topbar-h, 58px); z-index: 6; background: var(--surface); padding: 8px 0; margin-bottom: 14px; border-bottom: 1px solid var(--border); box-shadow: 0 8px 16px -12px rgba(0, 0, 0, .3); } .insp-bar .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } video.player { display: block; width: 100%; border-radius: 12px; background: #000; border: 1px solid var(--border); } .player-box { position: relative; } /* speed chip on the video — sits top-right, clear of the native control bar */ .speed-btn { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3; min-width: 38px; height: 28px; padding: 0 9px; border-radius: 999px; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 0; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; background: rgba(17, 24, 39, 0.6); color: #fff; cursor: pointer; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.35); opacity: .85; transition: opacity .15s, background .15s, transform .12s; } .speed-btn:hover { opacity: 1; background: rgba(17, 24, 39, 0.82); transform: none; } .speed-btn:active { transform: scale(.94); } /* inspection body: orientation-aware layout (video + transcript on one side, frames on the other) */ .insp-body.layout-landscape { display: block; } .insp-body.layout-landscape .player-box { width: 100%; background: #000; border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; max-height: 56vh; overflow: hidden; } .insp-body.layout-landscape .player-box video.player { width: auto; max-width: 100%; max-height: 56vh; border: none; border-radius: 0; background: transparent; } .insp-body.layout-landscape .transcript-wrap { margin-top: 14px; } .insp-body.layout-landscape .transcript { max-height: 28vh; } .insp-body.layout-portrait { display: flex; align-items: flex-start; gap: 20px; } .insp-body.layout-portrait .player-pane { flex: 0 0 34%; max-width: 360px; position: sticky; top: calc(var(--topbar-h, 58px) + var(--insp-head-h, 64px) + 10px); display: flex; flex-direction: column; max-height: calc(100vh - var(--topbar-h, 58px) - var(--insp-head-h, 64px) - 24px); } .insp-body.layout-portrait .player-box { flex: 0 0 auto; } .insp-body.layout-portrait .player-box video.player { max-height: 50vh; width: auto; max-width: 100%; margin: 0 auto; } .insp-body.layout-portrait .transcript-wrap { flex: 1 1 auto; min-height: 92px; display: flex; flex-direction: column; margin-top: 12px; } .insp-body.layout-portrait .transcript { flex: 1 1 auto; } .insp-body.layout-portrait .rooms-pane { flex: 1 1 auto; min-width: 0; } .insp-body.layout-portrait .items { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); } .insp-body .rooms-pane .room:first-child { margin-top: 0; } /* transcript under the video, with room-coloured key phrases and play/scrub-synced fading */ .transcript-h { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; } .transcript { position: relative; overflow-y: auto; line-height: 1.95; font-size: 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .transcript .w { transition: opacity .2s; } .transcript .w.spoken { opacity: .34; } .transcript .kw { cursor: pointer; border-radius: 5px; padding: 0 2px; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--kw) 13%, transparent); box-shadow: inset 0 -2px 0 0 var(--kw); } .transcript .kw:hover { background: color-mix(in srgb, var(--kw) 28%, transparent); } .transcript .kw .w.spoken { opacity: .6; } /* keep highlighted phrases legible even once spoken */ /* the item being played steps along with the video — make the jump unmistakable */ .item { transition: box-shadow .15s, transform .15s, opacity .3s, filter .3s; /* auto-scroll must clear the two sticky headers (top bar + inspection header) → fully visible */ scroll-margin-top: calc(var(--topbar-h, 58px) + var(--insp-head-h, 64px) + 16px); scroll-margin-bottom: 16px; } .item.active { box-shadow: 0 0 0 3px var(--room, var(--accent)), 0 10px 26px rgba(0, 0, 0, .14); transform: translateY(-2px); } /* During full video playback, spotlight the current item by dimming the rest into a backdrop. */ #rooms.playing .item:not(.active) { opacity: .22; filter: brightness(.6) saturate(.85); } #rooms.playing .item.active { position: relative; z-index: 3; box-shadow: 0 0 0 3px var(--room, var(--accent)), 0 18px 55px rgba(0, 0, 0, .5); transform: translateY(-2px) scale(1.015); } /* item frame: hover reveals a zoom button → full-size lightbox */ .thumb-frame { position: relative; } .zoom-btn { position: absolute; top: 8px; inset-inline-end: 8px; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(17, 24, 39, 0.55); color: #fff; border: none; cursor: pointer; opacity: 0; transform: scale(.9); transition: opacity .15s, transform .15s, background .15s; } .zoom-btn svg { width: 17px; height: 17px; } .zoom-btn:hover { background: rgba(17, 24, 39, 0.82); filter: none; } .thumb-frame:hover .zoom-btn, .zoom-btn:focus-visible { opacity: 1; transform: none; } /* Per-second frame scrubber: hover arrows over a warned item's frame to re-pick a better one. */ .scrub-arrow { position: absolute; top: 50%; transform: translateY(-50%) scale(.82); width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(17, 24, 39, 0.5); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); cursor: pointer; opacity: 0; z-index: 2; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); transition: opacity .16s, transform .16s, background .16s; } .scrub-arrow.left { inset-inline-start: 8px; } .scrub-arrow.right { inset-inline-end: 8px; } .scrub-arrow svg { width: 20px; height: 20px; } .scrub-frame:hover .scrub-arrow, .scrub-arrow:focus-visible { opacity: 1; transform: translateY(-50%) scale(1); } .scrub-frame .scrub-arrow:hover { background: rgba(17, 24, 39, 0.86); transform: translateY(-50%) scale(1.08); } .scrub-frame .scrub-arrow:active { transform: translateY(-50%) scale(.96); } /* Brief loading veil while the chosen second's frame is grabbed. */ .scrub-busy { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(17, 24, 39, 0.3); z-index: 3; } .scrub-frame.busy .scrub-busy { display: flex; } .scrub-busy .spinner-sm { margin: 0; width: 22px; height: 22px; border-width: 3px; } .lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(8, 12, 24, 0.82); opacity: 0; transition: opacity .15s; cursor: zoom-out; } .lightbox.show { opacity: 1; } .lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); cursor: default; } .lb-close { position: absolute; top: 18px; inset-inline-end: 22px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; background: rgba(255, 255, 255, .12); color: #fff; border: none; font-size: 18px; cursor: pointer; } .lb-close:hover { background: rgba(255, 255, 255, .22); filter: none; } .lb-stage { position: relative; display: inline-flex; } .lb-spin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .lb-spin.hidden { display: none; } .lb-spin .spinner { width: 40px; height: 40px; border-color: rgba(255,255,255,.35); border-top-color: #fff; } .lb-dl { position: absolute; top: 18px; inset-inline-end: 70px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 2; background: rgba(255, 255, 255, .12); color: #fff; border: none; cursor: pointer; } .lb-dl svg { width: 19px; height: 19px; } .lb-dl:hover { background: rgba(255, 255, 255, .22); } .lb-dl.done { background: rgba(22, 163, 74, 0.9); cursor: default; } .lb-dl.done:hover { background: rgba(22, 163, 74, 0.9); } .lb-dl:disabled { cursor: default; } /* "PDF ready" toast — fallback when a deferred popup was blocked */ .pdf-toast { position: fixed; z-index: 130; left: 50%; bottom: 26px; transform: translate(-50%, 16px); display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.18); opacity: 0; transition: opacity .25s, transform .25s; } .pdf-toast.show { opacity: 1; transform: translate(-50%, 0); } .pdf-toast span { font-size: 14px; color: var(--text, #1a1f2e); } .pdf-toast button { white-space: nowrap; } .date-edit { width: auto; display: inline-block; margin-top: 0; padding: 3px 8px; font-size: 13px; } /* per-item hide / restore / trash controls — appear only on item hover */ .item { position: relative; } .item-actions { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; } .item:hover .item-actions, .item-actions:focus-within { opacity: 1; } .it-btn { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(17, 24, 39, 0.55); color: #fff; border: none; cursor: pointer; } .it-btn svg { width: 15px; height: 15px; } .it-btn:hover { background: rgba(17, 24, 39, 0.82); filter: none; } .it-btn.danger { background: #b42740; color: #fff; } /* deep red; white trash glyph rides on top */ .it-btn.danger:hover { background: #9a1f34; color: #fff; } .item.hidden { opacity: .55; } .item.hidden .thumb { filter: grayscale(.45); } /* timecode-collision warning: amber corner badge + card highlight + clickable resolve */ .item.warn { box-shadow: 0 0 0 2px #f5a524, var(--shadow); } .warn-badge { position: absolute; top: auto; bottom: 8px; inset-inline-end: 8px; z-index: 4; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #f5a524; color: #4a3000; border: none; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); } /* full-resolution frame download — bottom-left, revealed on hover (like the zoom button) */ .dl-frame { position: absolute; bottom: 8px; inset-inline-start: 8px; z-index: 4; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(17, 24, 39, 0.55); color: #fff; border: none; cursor: pointer; opacity: 0; transform: scale(.9); transition: opacity .15s, transform .15s, background .15s; } .dl-frame svg { width: 16px; height: 16px; } .dl-frame:hover { background: rgba(17, 24, 39, 0.85); } .thumb-frame:hover .dl-frame, .dl-frame:focus-visible { opacity: 1; transform: none; } /* "already at full resolution" — green check, non-interactive, tooltip explains via title */ .dl-frame.done { background: rgba(22, 163, 74, 0.9); cursor: default; } .dl-frame.done:hover { background: rgba(22, 163, 74, 0.9); } .dl-frame:disabled { pointer-events: none; } /* spinner over a frame while the full-resolution image is loading */ .thumb-frame.frame-loading img.thumb { filter: brightness(.6); } .frame-spin { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(8, 12, 24, 0.35); pointer-events: none; } .frame-spin .spinner { width: 30px; height: 30px; border-color: rgba(255,255,255,.4); border-top-color: #fff; } .warn-badge svg { width: 16px; height: 16px; } .warn-badge:hover { background: #e69500; filter: none; } .warn-pill { display: inline-flex; align-items: center; gap: 4px; background: #fef3c7; color: #92600a; } .warn-pill svg { width: 14px; height: 14px; } .row-warn { display: inline-flex; align-items: center; color: #e69500; } .row-warn svg { width: 16px; height: 16px; } /* collapsible, dimmed per-inspection item trash (keeps the photo-zoom button) */ #albumTrash .album-trash { margin-top: 30px; } /* beats .rooms-pane .room:first-child reset */ .album-trash h2.trash-head { color: var(--muted); cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; } .trash-chevron { font-size: 12px; width: 14px; display: inline-block; } .album-trash.collapsed .trash-items { display: none; } .item.trashed { opacity: .55; transition: opacity .15s; } .item.trashed:hover { opacity: 1; } .item.trashed .thumb { filter: grayscale(.5); } /* editor item-filter panel — floats over the gray gutter, top-right, outside the white card */ /* Floating rail at the top-right holding the filter card and (when >1 room) the room-jump card. */ .side-rail { position: fixed; z-index: 30; top: calc(var(--topbar-h, 58px) + 14px); inset-inline-end: 18px; width: 175px; display: flex; flex-direction: column; gap: 10px; } /* minimal play/pause in the sticky actions bar — icon only, no background (sticks in view on scroll) */ .play-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; background: none; color: var(--muted); cursor: pointer; transition: color .15s, transform .12s; } .play-toggle:hover { color: var(--accent); } .play-toggle:active { transform: scale(.9); } .play-toggle.playing { color: var(--accent); } .play-toggle svg { width: 19px; height: 19px; margin-inline-start: 1px; } .play-toggle.playing svg { margin-inline-start: 0; } .item-filter { display: flex; flex-direction: column; gap: 6px; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); } /* No scroll: the list sizes to its rooms so they all fit. Hover widens it (anchored at its right edge) so the longest name shows in full — no tooltip. */ .room-nav { align-self: flex-end; width: 100%; transition: width .18s ease; } .room-nav:hover { width: max-content; max-width: 70vw; } .room-nav .room-flt { display: flex; align-items: center; gap: 4px; cursor: pointer; } .room-nav .room-flt .flt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .room-nav:hover .room-flt .flt-label { overflow: visible; text-overflow: clip; } /* the rename pencil takes no space until hovered, so the name gets the full width */ .room-nav .room-edit { width: 0; padding: 0; overflow: hidden; transition: width .15s, opacity .15s, color .15s, background .15s; } .room-nav .room-flt:hover .room-edit { width: 23px; padding: 4px; } .room-nav .flt-count { margin-inline-start: 0; } /* room-colour accent on the left edge of each rail item */ .room-nav .room-flt { position: relative; padding-inline-start: 15px; } .room-nav .room-flt::before { content: ""; position: absolute; inset-inline-start: 6px; inset-block: 7px; width: 3px; border-radius: 999px; background: var(--room, var(--border)); opacity: .85; transition: width .15s ease, opacity .15s ease, inset-block .15s ease; } .room-nav .room-flt:hover::before, .room-nav .room-flt:focus-visible::before { width: 4px; inset-block: 5px; opacity: 1; } /* scroll-spy: the room you've scrolled to gets a light wash in its own colour + a firmer edge accent */ .room-nav .room-flt.current { background: color-mix(in srgb, var(--room, var(--accent)) 15%, var(--surface-2)); } .room-nav .room-flt.current::before { width: 4px; inset-block: 4px; opacity: 1; } /* clicking a room scrolls its heading clear of the two sticky headers */ .room { scroll-margin-top: calc(var(--topbar-h, 58px) + var(--insp-head-h, 64px) + 16px); } /* room heading: name + count + a hover pencil to rename it inline */ .room-h { display: flex; align-items: center; gap: 8px; } /* stylish vertical colour bar before the room name (matches the room's colour) */ .room-bar { flex: none; align-self: stretch; width: 4px; min-height: 18px; border-radius: 999px; background: var(--room, var(--border)); } .room-name { overflow-wrap: anywhere; } .room-edit { background: none; border: none; padding: 4px; cursor: pointer; color: var(--muted); flex: none; display: inline-flex; align-items: center; border-radius: 6px; opacity: 0; transition: opacity .15s, color .15s, background .15s; } .room-edit svg { width: 15px; height: 15px; } .room-h:hover .room-edit, .room-flt:hover .room-edit, .room-edit:focus-visible { opacity: 1; } .room-edit:hover { color: var(--accent); background: var(--accent-soft); } .room-name-input { font: inherit; font-weight: inherit; color: var(--text); padding: 1px 6px; min-width: 140px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); } /* transcript: a subtle full-width expand toggle below the box */ /* Expanded shows the whole transcript (page scrolls); in portrait it also releases the sticky, height-capped player pane so the box can grow downward to fit all the text. */ .insp-body.transcript-expanded .transcript { max-height: none; } .insp-body.layout-portrait.transcript-expanded .player-pane { position: static; max-height: none; } .insp-body.layout-portrait.transcript-expanded .transcript { flex: 0 0 auto; } .transcript-toggle { margin-top: 6px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; color: var(--muted); font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 8px; transition: color .15s, background .15s; } .transcript-toggle:hover { color: var(--accent); background: var(--accent-soft); } .transcript-toggle svg { width: 14px; height: 14px; transition: transform .2s; } .transcript-toggle.up svg { transform: rotate(180deg); } /* prominent "don't leave the page" warning shown while a video uploads */ .upload-warn { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; background: #fff7ed; border: 1px solid #f5a524; border-radius: 12px; color: #92600a; font-size: 13.5px; font-weight: 600; line-height: 1.4; box-shadow: 0 6px 16px -8px rgba(245, 165, 36, .55); } .upload-warn.hidden { display: none; } .upload-warn svg { width: 22px; height: 22px; color: #e69500; flex: none; } .item-filter .flt-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: 2px; } .item-filter .flt { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); color: var(--text); border: 1px solid transparent; cursor: pointer; text-align: start; font-family: inherit; } .item-filter .flt:hover { border-color: #cdd6ea; filter: none; } .item-filter .flt.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .item-filter .flt-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-filter .flt-count { margin-inline-start: auto; flex: none; font-size: 11px; font-weight: 700; line-height: 18px; min-width: 20px; text-align: center; padding: 0 6px; border-radius: 999px; background: rgba(15, 23, 42, .07); color: var(--muted); } .item-filter .flt-count:empty { display: none; } .item-filter .flt.active .flt-count { background: rgba(47, 107, 255, .16); color: var(--accent); } .item-filter .flt-warn svg { width: 15px; height: 15px; color: #e69500; flex: none; } /* keep the ⚠ from shrinking next to long labels (RU) */ .item-filter .flt-warn.active { background: #fef3c7; border-color: #f5a524; color: #92600a; } .item-filter .flt-warn.active .flt-count { background: rgba(245, 165, 36, .22); color: #92600a; } @media (max-width: 1100px) { .item-filter { position: static; flex-direction: row; flex-wrap: wrap; width: auto; margin-bottom: 12px; } } .filter-empty { padding: 36px 16px; text-align: center; color: var(--muted); font-size: 14px; } /* frame-capture placeholder spinner on a freshly-added item */ .thumb-wrap { display: block; } .thumb.capturing { display: flex; align-items: center; justify-content: center; } .spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--accent); animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* stages */ .stages { display: grid; gap: 6px; margin-top: 12px; } .stage { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; } .stage .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); } .stage.done .dot { background: var(--ok); } .stage.running .dot { background: var(--accent); animation: pulse 1s infinite; } .stage.running .stage-nm { font-weight: 650; } .stage.failed .dot { background: var(--danger); } .stage.pending { color: var(--muted); } .stage-nm { flex: 1 1 auto; } .stage-t { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } /* "what's happening now" sub-line under the active stage; aligned past the dot, with a live ellipsis. */ .stage-desc { flex-basis: 100%; margin-left: 19px; color: var(--muted); font-size: 12px; line-height: 1.35; } .stage-pct { font-variant-numeric: tabular-nums; opacity: .85; } .stage-ell::after { content: ""; animation: ell 1.4s steps(4, end) infinite; } @keyframes ell { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } } /* move an item to another room — subtle hover affordances + a small picker popover */ .drag-handle { cursor: grab; opacity: 0; transition: opacity .12s; } .item:hover .drag-handle { opacity: .5; } .drag-handle:hover { opacity: 1; } .drag-handle:active { cursor: grabbing; } .item.dragging { opacity: .45; } .room-flt.drop-target { outline: 2px dashed var(--room, var(--accent)); outline-offset: 1px; background: var(--bg-accent); } .move-btn { opacity: 0; transition: opacity .12s; padding: 4px 7px; } .item:hover .move-btn { opacity: .85; } .move-btn:hover { opacity: 1; } .move-btn svg { width: 15px; height: 15px; display: block; } .room-menu { position: absolute; z-index: 1000; min-width: 184px; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,.18); padding: 6px; } .rm-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px 6px; } .rm-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; cursor: pointer; background: transparent; border: none; padding: 8px 9px; border-radius: 8px; font-family: inherit; font-size: 13px; color: var(--text); } .rm-opt:hover { background: var(--surface-2); filter: none; } .rm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--room); flex: 0 0 auto; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* processing overall progress bar */ .proc-prog { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; } .proc-track { flex: 1; height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; } .proc-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s ease; } .proc-pct { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* album */ .room { margin-top: 22px; } .room h2 { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); padding-bottom: 6px; text-transform: capitalize; } .items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; } .item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; } .item .thumb { aspect-ratio: 16/10; background: var(--surface-2); cursor: pointer; object-fit: cover; width: 100%; } .item .thumb.empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; } .item .body { padding: 10px 12px; display: grid; gap: 6px; } .item .cap { font-weight: 600; font-size: 14px; } .item .sub { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); } .cat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; } .cat.defect { color: var(--danger); } .cat.valuable { color: #2148c0; } .cat.meter { color: var(--warn); } .tc { color: var(--accent); cursor: pointer; font-variant-numeric: tabular-nums; } /* inline edit in view mode: click caption/category to edit in place */ .item .cap.editable, .item .cat.editable { cursor: pointer; transition: background .12s, box-shadow .12s, border-color .12s, color .12s; } .item .cap.editable:hover { background: var(--surface-2); border-radius: 5px; box-shadow: 0 0 0 4px var(--surface-2); } .item .cap.editing { background: none; box-shadow: none; } .item .cat.editable:hover { border-color: var(--accent); color: var(--accent); } .item .cap-edit { width: 100%; box-sizing: border-box; font-family: inherit; font-weight: 600; font-size: 14px; padding: 2px 6px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); color: var(--text); outline: none; } .item .cat-edit { font-family: inherit; font-size: 12px; padding: 1px 6px; border: 1px solid var(--accent); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; outline: none; } .item .edit { display: grid; gap: 6px; padding: 10px 12px; } .item .edit input, .item .edit select { margin-top: 0; padding: 6px 8px; font-size: 13px; } .item .edit .erow { display: flex; gap: 6px; align-items: center; } /* give the category select room for its dropdown arrow so it never overlaps (or truncates) the label */ .item .edit .erow select { flex: 1 1 auto; min-width: 0; padding-right: 22px; } .item .edit .erow input[type="number"] { flex: 0 0 72px; } /* diff */ .diff-col h3 { margin: 12px 0 6px; font-size: 14px; } .diff-item { font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--border); } .plus { color: var(--ok); } .minus { color: var(--danger); } .delta { color: var(--warn); } .empty { text-align: center; padding: 40px 20px; } .empty h1 { margin-bottom: 8px; } .err { color: var(--danger); } /* on narrow screens the portrait two-column stacks: video on top (not sticky), frames below */ @media (max-width: 820px) { .insp-body.layout-portrait { display: block; } .insp-body.layout-portrait .player-pane { max-width: 100%; position: static; max-height: none; margin-bottom: 16px; } .insp-body.layout-portrait .player-box video.player { max-height: 60vh; margin: 0 auto; } .insp-body.layout-portrait .transcript { max-height: 30vh; } .insp-body.layout-portrait .items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } @media (max-width: 640px) { .items { grid-template-columns: 1fr 1fr; } .insp-head { flex-direction: column; } } /* ---- admin / system metrics page ---- */ .admin-nav { color: var(--accent); font-weight: 650; } .admin-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; } .build-ver { flex-basis: 100%; text-align: right; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: .8; } .admin-gen { margin: -6px 0 18px; font-size: 12.5px; } .admin-h { font-size: 15px; font-weight: 700; margin: 24px 0 10px; } .admin-h3 { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 8px; } .admin-h4 { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 0 0 6px; } /* live resource cards */ .sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .sys-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface); box-shadow: 0 6px 18px -12px rgba(0,0,0,.25); } .sys-card.stale { opacity: .6; } .sys-name { display: flex; align-items: center; gap: 7px; font-weight: 700; text-transform: capitalize; } .sys-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); } .sys-card.live .sys-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(31,157,87,.18); } .sys-state { margin-inline-start: auto; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .sys-stats { display: flex; gap: 18px; margin: 10px 0 8px; } .sys-stat { display: flex; flex-direction: column; } .sys-val { font-size: 22px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; } .sys-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; } .sys-meta { font-size: 11.5px; color: var(--muted); } /* KPI tiles */ .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .kpi { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface); } .kpi-v { font-size: 21px; font-weight: 750; font-variant-numeric: tabular-nums; } .kpi-l { font-size: 11.5px; color: var(--muted); margin-top: 3px; } .kpi.total { background: linear-gradient(180deg, rgba(47,107,255,.08), rgba(47,107,255,.02)); border-color: rgba(47,107,255,.3); } /* tables */ .admin-tbl-wrap { overflow-x: auto; } .admin-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .admin-tbl th { text-align: start; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--border); } .admin-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .admin-tbl .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } .admin-tbl.small { font-size: 12.5px; } .admin-tbl.small th, .admin-tbl.small td { padding: 6px 9px; } .admin-tbl.stage-tot { max-width: 460px; } .admin-tbl .strong { font-weight: 700; } .admin-tbl.users .urow { cursor: pointer; transition: background .12s; } .admin-tbl.users .urow:hover { background: rgba(47,107,255,.05); } .admin-tbl.users .urow.open { background: rgba(47,107,255,.06); } .admin-tbl.users .urow.open td { border-bottom: none; } .uname { font-weight: 600; } .uname .sub { font-weight: 400; font-size: 11.5px; margin-top: 2px; } .uname .chev { display: inline-block; width: 12px; color: var(--muted); } .admin-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--accent); border-radius: 5px; padding: 1px 5px; vertical-align: 1px; } .free-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: #10b981; border-radius: 5px; padding: 1px 5px; vertical-align: 1px; } .udetail > td { background: rgba(0,0,0,.015); padding: 4px 14px 16px 30px; } .access-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 14px; } .udetail-grid { display: grid; grid-template-columns: minmax(240px, 0.9fr) 1.4fr; gap: 22px; align-items: start; } .udetail-grid .ins-wrap { overflow-x: auto; } @media (max-width: 820px) { .udetail-grid { grid-template-columns: 1fr; } } /* weekly history chart */ .hist-wrap { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 2px; background: var(--surface); margin-bottom: 12px; } .hist-chart { width: 100%; height: 130px; display: block; } .hist-bar { fill: var(--accent); opacity: .82; transition: opacity .12s; cursor: pointer; } .hist-bar:hover { opacity: 1; } .hist-x { font-size: 9px; fill: var(--muted); } .hist-tbl { max-width: 620px; } /* sortable user table + live (per-user) resource attribution */ .admin-tbl th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } .admin-tbl th.sortable:hover { color: var(--text); } .admin-tbl th.sorted { color: var(--accent); } .admin-tbl .live-cell .live-on { color: var(--accent); font-weight: 700; white-space: nowrap; } .admin-tbl.users .urow.live-row { background: rgba(47,107,255,.07); } .live-now { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 2px; font-size: 13px; padding: 7px 12px; border-radius: 10px; background: rgba(47,107,255,.08); border: 1px solid rgba(47,107,255,.22); } .live-now.idle { color: var(--muted); background: var(--surface-2); border-color: var(--border); } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1s infinite; } /* unit-economics: profit/loss colouring + user-table pagination */ .admin-tbl .profit-pos { color: var(--ok); } .admin-tbl .profit-neg { color: var(--danger); } .kpi.profit-neg .kpi-v { color: var(--danger); } .admin-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 4px; font-size: 13px; } /* ---- billing / plans ---- */ .bill-current { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-bottom: 18px; } .bill-plan-name { font-size: 20px; font-weight: 700; } .bill-usage { font-weight: 650; font-variant-numeric: tabular-nums; } .bill-usage.over { color: var(--danger); } .bill-current .danger-text { margin-inline-start: auto; } .plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .plan-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; } .plan-card.cur { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow); } .plan-name { font-size: 16px; font-weight: 700; } .plan-price { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; } .plan-price span { font-size: 14px; font-weight: 500; color: var(--muted); } .plan-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; flex: 1 1 auto; } .plan-feats li { font-size: 13px; color: var(--text); padding-inline-start: 20px; position: relative; } .plan-feats li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--ok); font-weight: 700; } .plan-card button { width: 100%; } .bill-h { font-size: 15px; font-weight: 700; margin: 26px 0 10px; } .danger-zone { margin-top: 34px; border-top: 1px solid var(--border); } .danger-zone .bill-h { color: var(--danger); } .danger-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 620px; } .danger-row .muted { flex: 1; min-width: 240px; font-size: 13px; } .bill-tbl { width: 100%; max-width: 620px; border-collapse: collapse; font-size: 13px; } .bill-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); } .pay-paid { color: var(--ok); font-weight: 650; } .paywall-actions { flex-wrap: wrap; } /* plan-retention notice on an inspection: quiet by default, amber + emphasized in the final week */ .archived-banner { margin-top: 8px; display: inline-block; font-size: 12.5px; font-weight: 600; color: #92600a; background: #fef3c7; border: 1px solid #f5d486; border-radius: 999px; padding: 4px 12px; } .expiry-banner { margin-top: 8px; font-size: 12.5px; color: var(--muted); } .expiry-banner.soon { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; color: #92600a; background: #fef3c7; border: 1px solid #f5d486; border-radius: 999px; padding: 4px 12px; } /* mock card payment modal */ .pay-modal { width: 100%; max-width: 380px; text-align: start; } /* Stripe Embedded Checkout, mounted in-app (the iframe auto-sizes its own height). */ .stripe-co-modal { width: 100%; max-width: 480px; padding: 0; position: relative; max-height: 92vh; overflow: hidden; } /* The mount is the scroller (the Stripe iframe is tall); the modal stays put so the close button doesn't drift into the scrollbar or scroll away. The button floats over the corner with a solid bg + shadow. */ .stripe-co-close { position: absolute; top: 8px; right: 8px; z-index: 3; border: none; background: var(--surface); color: var(--muted); width: 30px; height: 30px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgba(18,28,53,.2); } .stripe-co-close:hover { color: var(--text); } #stripeCoMount { padding: 16px; min-height: 120px; max-height: 92vh; overflow-y: auto; scrollbar-width: thin; } #stripeCoMount::-webkit-scrollbar { width: 8px; } #stripeCoMount::-webkit-scrollbar-button { display: none; } #stripeCoMount::-webkit-scrollbar-thumb { background: rgba(18,28,53,.22); border-radius: 4px; } .stripe-co-loading { color: var(--muted); text-align: center; padding: 44px 0; } .pay-head { font-size: 16px; font-weight: 700; margin-bottom: 6px; } .pay-head .muted { font-weight: 500; } .pay-mock { font-size: 12px; margin-bottom: 14px; } .pay-f { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; } .pay-f input { width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; font: inherit; background: var(--surface); color: var(--text); box-sizing: border-box; } .pay-row { display: flex; gap: 12px; } .pay-row .pay-f { flex: 1; } .pay-err { color: var(--danger); font-size: 13px; margin: -2px 0 12px; } .pay-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } .pay-hint { font-size: 11.5px; margin-top: 12px; } /* lightweight success toast */ .mini-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px); z-index: 1000; background: var(--text); color: var(--surface); padding: 10px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; transition: opacity .25s, transform .25s; } .mini-toast.show { opacity: 1; transform: translate(-50%, 0); }