:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #080b16;
    color: #f4f7fb;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 75% -10%, #253568 0, #0d1325 36%, #080b16 68%); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .5; }
.recorder-shell { width: min(100% - 32px, 880px); margin: 0 auto; padding: 32px 0 60px; }
.recorder-header, .card-heading, .camera-actions, .recorder-actions, .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.recorder-header { margin-bottom: 22px; }
h1, h2, p { margin: 0; }
h1 { letter-spacing: -.05em; font-size: clamp(2.25rem, 8vw, 4.6rem); line-height: .95; }
h2 { font-size: clamp(1.35rem, 4vw, 2rem); letter-spacing: -.03em; }
.eyebrow { color: #87a8ff; font-size: .72rem; font-weight: 800; letter-spacing: .17em; margin-bottom: 7px; }
.muted, .help-text, .notice-card, .footer-warning { color: #a8b2cc; }
.muted { margin-top: 8px; }
.connection-pill { border: 1px solid #405078; border-radius: 999px; padding: 8px 12px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.connection-pill.online { color: #7df2b4; border-color: #2d7257; }
.connection-pill.offline { color: #ffc078; border-color: #8a5b31; }
.status-dot, .recording-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 6px; }
.state-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; min-height: 48px; padding: 11px 14px; border: 1px solid #283655; border-radius: 13px; background: #10182b; margin-bottom: 18px; }
.state-strip strong { font-size: .82rem; letter-spacing: .1em; }
.state-label { color: #7182a9; font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.state-message { color: #a8b2cc; font-size: .83rem; flex: 1 1 220px; }
.state-recording { border-color: #a03f55; background: #251421; color: #ff7e8e; }
.state-finalizing, .state-uploading { border-color: #8f7136; background: #241e12; color: #ffcf74; }
.state-error { border-color: #9d3742; background: #2a141b; color: #ff9ca7; }
.card, .metric-card, .notice-card { border: 1px solid #283655; background: rgba(16, 24, 43, .88); border-radius: 18px; box-shadow: 0 18px 48px rgba(0,0,0,.2); }
.card { padding: clamp(18px, 4vw, 30px); }
.card-heading { align-items: flex-start; margin-bottom: 24px; }
.step-number { color: #60739e; font-size: .8rem; font-weight: 800; letter-spacing: .12em; }
form, label { display: grid; gap: 8px; }
form { gap: 16px; }
label { color: #aeb9d4; font-size: .8rem; font-weight: 700; }
.text-input { width: 100%; border: 1px solid #354565; border-radius: 11px; background: #0a1020; color: #fff; padding: 13px 14px; outline: none; }
.text-input:focus { border-color: #83a4ff; box-shadow: 0 0 0 3px rgba(131,164,255,.15); }
.primary-button, .secondary-button, .danger-button, .link-button { border: 0; border-radius: 10px; padding: 12px 16px; font-size: .74rem; font-weight: 850; letter-spacing: .08em; transition: transform .15s, filter .15s; }
.primary-button:hover, .secondary-button:hover, .danger-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.primary-button { color: #08101e; background: #91b0ff; }
.secondary-button { color: #d7e1ff; background: #1c2947; border: 1px solid #3b4d74; }
.danger-button { color: #fff; background: #ad3d55; }
.link-button { color: #9eb7ff; background: transparent; padding: 2px 0; }
.help-text { margin-top: 17px; font-size: .76rem; line-height: 1.5; }
.camera-frame { position: relative; overflow: hidden; min-height: 300px; border-radius: 14px; background: #060a13; border: 1px solid #273655; }
.camera-frame video { display: block; width: 100%; height: min(54vw, 480px); min-height: 300px; object-fit: cover; transform: scaleX(-1); }
.camera-placeholder { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 9px; color: #8c9aba; text-align: center; padding: 20px; }
.camera-placeholder strong { color: #dfe7ff; }
.camera-icon { font-size: 3rem; color: #5773b6; }
.camera-actions { justify-content: flex-start; margin: 14px 0 22px; flex-wrap: wrap; }
.field-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; }
.toggle-row { justify-content: flex-start; flex-wrap: wrap; margin: 18px 0; }
.toggle-label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.toggle-label input { accent-color: #91b0ff; }
.recorder-actions { justify-content: stretch; }
.recorder-actions button { flex: 1; min-height: 52px; }
.active-recording { margin-top: 16px; padding: 11px 13px; border-radius: 10px; background: #351722; color: #ff9ca7; font-size: .82rem; font-weight: 750; }
.recording-dot { animation: pulse 1.2s infinite; }
.order-note { margin-top: 13px; padding: 11px 13px; border-radius: 10px; color: #ffcf74; background: #302611; font-size: .78rem; line-height: 1.4; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.metric-card { display: grid; gap: 8px; padding: 16px; color: #f4f7fb; text-align: left; }
.metric-card span { color: #7182a9; font-size: .63rem; font-weight: 800; letter-spacing: .1em; }
.metric-card strong { font-size: 1.3rem; }
.metric-action { width: 100%; cursor: pointer; }
.notice-card { display: grid; gap: 7px; margin-top: 14px; padding: 15px 17px; font-size: .78rem; line-height: 1.5; }
.notice-card strong { color: #c9d7ff; }
.footer-warning { margin-top: 18px; font-size: .76rem; text-align: center; }
#blazor-error-ui { display: none; }
@keyframes pulse { 50% { opacity: .3; } }
@media (max-width: 620px) {
    .recorder-shell { width: min(100% - 20px, 880px); padding-top: 22px; }
    .recorder-header { align-items: flex-start; }
    .connection-pill { margin-top: 4px; }
    .field-grid, .metrics-grid { grid-template-columns: 1fr; }
    .camera-actions { display: grid; grid-template-columns: 1fr; }
    .camera-actions button { width: 100%; }
    .recorder-actions { display: grid; grid-template-columns: 1fr; }
}

.work-nav{display:flex;align-items:center;gap:6px;margin-bottom:14px;padding:8px;border:1px solid #283655;background:rgba(16,24,43,.92);border-radius:14px;overflow:auto}.work-nav button{width:auto;border:0;border-radius:9px;padding:10px 12px;background:transparent;color:#9ba9c7;font-size:.68rem;font-weight:850;letter-spacing:.08em;white-space:nowrap}.work-nav button.active{background:#91b0ff;color:#08101e}.work-nav .work-branch{margin-left:auto;color:#cbd6f3;font-size:.73rem;font-weight:800;white-space:nowrap}.work-nav .logout-nav{color:#ff9ca7}.operator-ready{padding:7px 10px;border:1px solid #2d7257;border-radius:999px;color:#7df2b4;font-size:.67rem;font-weight:850;letter-spacing:.08em}.evidence-label{font-size:.9rem;color:#dbe4fb}.evidence-label .evidence-input{font-size:1.05rem;font-weight:750;min-height:54px}.fit-button{width:auto}.history-search{display:grid;grid-template-columns:1fr 120px;gap:10px;margin-bottom:16px}.history-table-wrap{overflow:auto}.history-table{width:100%;border-collapse:collapse;font-size:.78rem}.history-table th,.history-table td{text-align:left;padding:11px 9px;border-bottom:1px solid #283655;white-space:nowrap}.history-table th{color:#7182a9;font-size:.63rem;letter-spacing:.08em}.history-table td{color:#cbd6ee}.status-dashboard .status-card{margin-top:14px}.status-card h2{margin-bottom:8px}@media(max-width:620px){.work-nav{margin-inline:-2px}.work-nav .work-branch{display:none}.history-search{grid-template-columns:1fr}.history-search button{width:100%}}

/* WEVIX PROOF UI/UX refinement — 2026-09-08
   Visual-only operational refinement. Recording/evidence behavior is untouched. */
body{background:#080d18;color:#eef3ff;font-size:16px;}
.recorder-shell{width:min(100% - 28px,920px);padding:26px 0 52px;}
.recorder-header{margin-bottom:18px;}
.recorder-header h1{letter-spacing:-.025em;}
.card,.metric-card,.notice-card{background:#111a2b;border-color:#2a3a55;border-radius:14px;box-shadow:none;}
.card{padding:clamp(18px,3vw,26px);}
.card-heading{margin-bottom:20px;}
.work-nav{padding:7px;border-radius:12px;background:#101a2b;border-color:#2a3a55;}
.work-nav button{min-height:42px;padding:9px 12px;border-radius:8px;font-size:.74rem;letter-spacing:.04em;}
.work-nav button.active{background:#4f7df3;color:#fff;}
.connection-pill{padding:7px 10px;font-size:.74rem;letter-spacing:.05em;background:#101a2b;}
.state-strip{min-height:60px;padding:13px 15px;border-radius:11px;background:#101a2b;border-color:#2e405e;margin-bottom:16px;}
.state-strip strong{font-size:.96rem;letter-spacing:.06em;}
.state-label{font-size:.7rem;letter-spacing:.08em;color:#8fa0c1;}
.state-message{font-size:.9rem;line-height:1.45;color:#b6c2db;}
.state-ready{border-color:#365172;background:#111d30;color:#cbd8f4;}
.state-localsafe,.state-serververified{border-color:#2f6b53;background:#10251f;color:#8ee6bd;}
.state-uploadpending{border-color:#8a6732;background:#251e11;color:#ffd38b;}
.state-recording{border-color:#8d3f52;background:#28141d;color:#ff9cac;}
.state-finalizing,.state-uploading{border-color:#7d6334;background:#241d11;color:#ffd486;}
.state-error{border-color:#8b3e48;background:#29151a;color:#ff9fac;}
.camera-frame{min-height:300px;border-radius:12px;border-color:#2d3d59;background:#050914;}
.camera-frame video{min-height:300px;height:min(52vw,470px);}
.camera-actions{margin:12px 0 18px;gap:10px;}
.field-grid{gap:12px;}
.text-input,.evidence-input{min-height:48px;border-radius:9px;border-color:#3a4d6d;background:#0b1220;font-size:16px;}
.evidence-label .evidence-input{min-height:56px;font-size:1.05rem;}
.primary-button,.secondary-button,.danger-button,.link-button{min-height:46px;border-radius:9px;padding:12px 15px;font-size:.82rem;font-weight:800;letter-spacing:.04em;}
.primary-button{background:#4f7df3;color:#fff;}
.secondary-button{background:#182641;color:#e2e9f8;border-color:#3b5074;}
.danger-button{background:#a54255;color:#fff;}
.primary-button:hover,.secondary-button:hover,.danger-button:hover{transform:none;filter:brightness(1.04);}
.recorder-actions{gap:10px;}
.recorder-actions button{min-height:54px;}
.active-recording{border:1px solid #7f3447;background:#27141c;color:#ff9cac;font-size:.9rem;}
.metrics-grid{gap:10px;}
.metric-card{padding:16px;}
.history-table-wrap{border:1px solid #2a3a55;border-radius:10px;}
.history-table{font-size:.82rem;}
.footer-warning{font-size:.82rem;line-height:1.5;}
@media(max-width:620px){
  .recorder-shell{width:min(100% - 20px,920px);padding-top:18px;}
  .recorder-header{gap:10px;}
  .state-strip{align-items:flex-start;gap:7px 10px;}
  .state-message{flex-basis:100%;}
  .camera-frame,.camera-frame video{min-height:240px;height:58vw;max-height:360px;}
  .camera-actions,.recorder-actions{display:grid;grid-template-columns:1fr;}
  .camera-actions button,.recorder-actions button{width:100%;min-height:50px;}
  .field-grid,.metrics-grid{grid-template-columns:1fr;}
  .text-input,.evidence-input,.primary-button,.secondary-button,.danger-button,.link-button{font-size:16px;}
  .work-nav button{min-height:44px;font-size:.72rem;}
}
@media(max-width:390px){
  .recorder-shell{width:calc(100% - 16px);}
  .card{padding:16px;}
  .camera-frame,.camera-frame video{min-height:220px;}
  .connection-pill{font-size:.7rem;}
}

/* =========================================================
   WEVIX PROOF — OFFICIAL VISUAL BRAND STANDARD / RECORDER.WEB
   Operational Deep Navy base; Gold is focal, never a safety-state substitute.
   Recording/error/warning/success semantic colors intentionally remain.
   ========================================================= */
:root{
  --wevix-navy:#0F2742;
  --wevix-deep-navy:#081827;
  --wevix-gold:#D4AF37;
  --wevix-soft-gold:#C9A95A;
  --wevix-white:#FFFFFF;
  --wevix-soft-gray:#F5F6F7;
  --wevix-charcoal:#1A1D21;
  background:var(--wevix-deep-navy);
  color:var(--wevix-white);
}
body{
  background:var(--wevix-deep-navy);
  color:var(--wevix-white);
}
.eyebrow{color:var(--wevix-soft-gold)}
.card,.metric-card,.notice-card,.work-nav,.state-strip,.connection-pill{
  background:var(--wevix-navy);
  border-color:rgba(255,255,255,.14);
  box-shadow:none;
}
.text-input,.evidence-input{
  background:var(--wevix-deep-navy);
  border-color:rgba(255,255,255,.20);
  color:var(--wevix-white);
}
.text-input:focus,.evidence-input:focus,
button:focus-visible,a:focus-visible,input:focus-visible{
  border-color:var(--wevix-soft-gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.15);
  outline:none;
}
.primary-button{
  background:var(--wevix-gold);
  color:var(--wevix-deep-navy);
}
.secondary-button{
  background:rgba(255,255,255,.07);
  color:var(--wevix-white);
  border-color:rgba(255,255,255,.18);
}
.link-button{color:var(--wevix-soft-gold)}
.toggle-label input{accent-color:var(--wevix-gold)}
.work-nav button{color:rgba(255,255,255,.66)}
.work-nav button.active{
  background:rgba(212,175,55,.10);
  color:var(--wevix-white);
  box-shadow:inset 0 -2px 0 var(--wevix-gold);
}
.work-nav .work-branch{color:rgba(255,255,255,.78)}
.step-number,.metric-card span,.state-label,.history-table th{color:var(--wevix-soft-gold)}
.camera-placeholder strong,.notice-card strong,.evidence-label,.history-table td{color:var(--wevix-white)}
.camera-icon{color:var(--wevix-soft-gold)}
.camera-frame{background:#050B13;border-color:rgba(255,255,255,.14)}
.history-table-wrap{border-color:rgba(255,255,255,.14)}
/* Semantic operational states below are deliberately NOT recolored to Gold. */



/* FINAL VISUAL BRAND ALIGNMENT — official compact logo; recording semantics remain dominant. */
.recorder-title{display:flex;align-items:center;gap:16px;min-width:0}.recorder-brand-logo{display:block;width:72px;height:72px;object-fit:contain;flex:0 0 auto}
.primary-button{background:var(--wevix-white);color:var(--wevix-deep-navy)}
@media(max-width:620px){.recorder-title{align-items:flex-start;gap:12px}.recorder-brand-logo{width:62px;height:62px}}

/* SIMPLE OPERATOR UX — trial/status stays informative without competing with recording. */
.trial-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:8px 11px;border:1px solid rgba(212,175,55,.24);border-radius:10px;background:rgba(255,255,255,.035);font-size:.74rem;color:rgba(255,255,255,.72)}
.trial-strip strong{color:var(--wevix-white)}
.trial-strip a{margin-left:auto;color:var(--wevix-soft-gold);font-weight:800;text-decoration:none}
.recording-options{margin:8px 0 12px;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);padding:7px 0}
.recording-options>summary{cursor:pointer;color:rgba(255,255,255,.64);font-size:.74rem;font-weight:750}
.recording-options[open] .toggle-row{margin-top:8px}
@media(max-width:620px){.trial-strip a{width:100%;margin-left:0}.recording-options .toggle-row{align-items:flex-start;flex-direction:column}}

/* TWO-DOCS STANDARD — Recorder help links to Public Docs; no local docs library. */
.work-nav .work-help{display:inline-flex;align-items:center;justify-content:center;min-height:40px;width:auto;padding:8px 10px;border-radius:8px;color:var(--wevix-soft-gold);font-size:.72rem;font-weight:850;letter-spacing:.05em;text-decoration:none;white-space:nowrap}
.work-nav .work-help:hover{background:rgba(212,175,55,.08);color:var(--wevix-white)}
.work-nav .work-help:focus-visible{outline:3px solid rgba(212,175,55,.18);outline-offset:2px}
@media(max-width:620px){.work-nav .work-help{min-height:44px}}