:root {
  --green:#0B6B3A;
  --emerald:#10B981;
  --ink:#0F172A;
  --muted:#64748B;
  --line:#E2E8F0;
  --paper:#F8FAFC;
  --amber:#F59E0B;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:#eaf0f0;
  background-image:radial-gradient(ellipse at 50% 35%,#fff 0%,#eff3f3 57%,#e3ebeb 100%);
  min-height:100vh
}
button,input,select {
  font:inherit
}
button,a,select,input {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.45
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible {
  outline:3px solid #10b981;
  outline-offset:3px
}
button {
  color:inherit
}
a {
  color:inherit;
  text-decoration:none
}
svg {
  flex-shrink:0
}
.icon {
  width:21px;
  height:21px;
  stroke:currentColor;
  stroke-width:1.7;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}
.workbench {
  max-width:1376px;
  margin:auto;
  padding:28px 40px 22px
}
.masthead {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:26px
}
.brand {
  display:flex;
  align-items:center;
  gap:11px
}
.brand-mark {
  height:36px;
  width:36px;
  background:var(--green);
  color:#fff;
  border-radius:10px;
  display:grid;
  place-items:center
}
.brand-name {
  font-weight:800;
  letter-spacing:2px;
  font-size:14px
}
.brand-sub {
  font-size:9px;
  letter-spacing:2.2px;
  color:var(--muted);
  margin-top:5px
}
.presentation-label {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:11px;
  color:#64748b
}
.pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:6px 9px;
  font:10px var(--mono);
  white-space:nowrap;
  background:#fff
}
.pill.green {
  background:#edf8f1;
  color:var(--green);
  border-color:#d5eadc
}
.pill.amber {
  background:#fffbeb;
  color:#925a08;
  border-color:#f9e5b5
}
.dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--emerald)
}
.presentation {
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 8px 12px
}
.presentation-title {
  min-width:105px;
  font-size:10px;
  letter-spacing:1.4px;
  font-weight:700;
  color:#64748b
}
.steps {
  display:flex;
  gap:5px;
  flex:1;
  overflow:auto
}
.step {
  min-width:52px
}
.app-lockup {
  min-height:52px
}
.officer {
  min-width:52px
}
.step {
  min-height:52px;
  flex:1;
  border:1px solid transparent;
  background:transparent;
  border-radius:9px;
  position:relative;
  color:#718087;
  font-family:var(--mono);
  font-size:11px
}
.step:hover {
  background:#fff
}
.step.active {
  background:#fff;
  border-color:#d6e4dc;
  color:var(--green);
  box-shadow:0 3px 10px #16322a08
}
.step.active:after {
  content:'';
  width:13px;
  height:3px;
  border-radius:3px;
  position:absolute;
  bottom:5px;
  left:calc(50% - 6px);
  background:var(--green)
}
.presentation select {
  min-height:52px;
  max-width:192px;
  border:1px solid #d8e1df;
  border-radius:9px;
  background:#f8faf9;
  padding:0 10px;
  font-size:11px;
  color:#43554c
}
.tablet {
  position:relative;
  background:#242d2b;
  padding:18px 22px 22px;
  border-radius:39px;
  box-shadow:0 40px 50px -30px #253c4166,0 10px 18px -6px #203f4330,inset 0 0 0 2px #48504d,inset 0 0 0 6px #2e3834
}
.tablet:before {
  content:'';
  position:absolute;
  left:50%;
  top:5px;
  width:7px;
  height:7px;
  border-radius:100%;
  background:#101e20;
  box-shadow:inset 0 0 0 2px #3d4846
}
.tablet:after {
  content:'';
  position:absolute;
  right:-3px;
  top:110px;
  height:72px;
  width:4px;
  background:#3b4642;
  border-radius:0 4px 4px 0
}
.screen {
  background:var(--paper);
  border-radius:22px;
  overflow:hidden;
  position:relative
}
.osbar {
  height:28px;
  padding:0 23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  font:9px var(--mono);
  color:#54625b;
  border-bottom:1px solid #f0f3f5
}
.osbar .osright {
  display:flex;
  align-items:center;
  gap:12px
}
.osright svg {
  width:12px;
  height:12px
}
.app-header {
  height:69px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px
}
.app-lockup {
  display:flex;
  align-items:center;
  gap:10px
}
.app-lockup .brand-mark {
  width:32px;
  height:32px;
  border-radius:8px
}
.app-name {
  font-size:14px;
  font-weight:750;
  letter-spacing:-.4px
}
.app-name small {
  display:block;
  font-size:9px;
  font-weight:500;
  letter-spacing:1.1px;
  color:#64748b;
  margin-top:4px
}
.header-right {
  display:flex;
  align-items:center;
  gap:14px
}
.officer {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:52px;
  border:0;
  background:transparent;
  text-align:left;
  padding:0 0 0 12px;
  border-left:1px solid var(--line)
}
.avatar {
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e7eee3;
  color:#426340;
  font-size:12px;
  font-weight:700;
  height:33px;
  width:33px;
  border:3px solid #f6f8f3
}
.officer b {
  font-size:11px;
  display:block
}
.officer small {
  font-size:9px;
  color:#64748b
}
.workspace {
  display:grid;
  grid-template-columns:164px 1fr;
  height:579px
}
.sidebar {
  background:#fff;
  border-right:1px solid var(--line);
  padding:23px 12px 15px;
  display:flex;
  flex-direction:column
}
.nav-heading {
  font-size:8px;
  color:#94a3b8;
  font-weight:700;
  letter-spacing:1.8px;
  padding:0 13px;
  margin:0 0 11px
}
.nav-item {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 13px;
  border-radius:8px;
  font-size:11px;
  color:#64748b;
  margin-bottom:5px
}
.nav-item .icon {
  width:17px;
  height:17px
}
.nav-item.active {
  background:#edf6ef;
  color:var(--green);
  font-weight:650
}
.nav-item:hover {
  background:#f1f5f4
}
.nav-count {
  font:9px var(--mono);
  background:#fff;
  border:1px solid #e2e8e6;
  border-radius:4px;
  padding:2px 5px;
  margin-left:auto
}
.sidebar-bottom {
  margin-top:auto;
  padding:13px 11px 0;
  border-top:1px solid var(--line)
}
.sidebar-bottom p {
  font-size:9px;
  line-height:1.7;
  margin:5px 0;
  color:#64748b
}
.sidebar-bottom strong {
  font:10px var(--mono);
  color:#334d40
}
.content {
  padding:24px 28px 96px;
  overflow-y:auto;
  position:relative;
  scrollbar-width:thin;
  scrollbar-color:#d5e1db transparent
}
.eyebrow {
  font:9px var(--mono);
  letter-spacing:1.3px;
  color:var(--green);
  text-transform:uppercase;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:7px
}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:20px
}
.page-heading h1 {
  font-family:var(--display);
  font-size:27px;
  line-height:1.12;
  letter-spacing:-1px;
  margin:0 0 7px;
  font-weight:600
}
.page-heading p {
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
  margin:0
}
.page-heading .date {
  text-align:right;
  line-height:1.8;
  font:9px var(--mono);
  color:#64748b;
  white-space:nowrap
}
.card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 3px 6px #183b2703
}
.card-pad {
  padding:19px
}
.section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px
}
.section-label h2 {
  font-size:12px;
  letter-spacing:-.2px;
  margin:0;
  font-weight:650
}
.section-label small {
  font:9px var(--mono);
  color:#64748b
}
.home-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 244px;
  gap:17px
}
.welcome-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line)
}
.stat {
  border-right:1px solid var(--line);
  padding-left:20px
}
.stat:first-child {
  padding-left:0
}
.stat:last-child {
  border:0
}
.stat strong {
  font:600 28px var(--display);
  letter-spacing:-1px
}
.stat label {
  display:block;
  font-size:9px;
  color:#64748b;
  margin-top:4px
}
.stat .up {
  font:9px var(--mono);
  color:var(--green);
  margin-left:5px
}
.action-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px
}
.action-tile {
  min-height:105px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  text-align:left;
  padding:14px 12px;
  transition:transform .15s,border-color .15s,box-shadow .15s;
  position:relative
}
.action-tile:hover {
  transform:translateY(-2px);
  border-color:#80b897;
  box-shadow:0 5px 14px #163e2110
}
.tile-icon {
  width:32px;
  height:32px;
  border-radius:8px;
  background:#edf6ef;
  color:var(--green);
  display:grid;
  place-items:center;
  margin-bottom:12px
}
.action-tile:nth-child(2) .tile-icon {
  color:#3377a8;
  background:#edf5fb
}
.action-tile:nth-child(3) .tile-icon {
  color:#987344;
  background:#f8f3e9
}
.action-tile:nth-child(6) .tile-icon {
  color:#b27819;
  background:#fff7e8
}
.action-tile b {
  font-size:10px;
  font-weight:650
}
.action-tile .arrow {
  position:absolute;
  right:11px;
  top:15px;
  color:#a3b2aa;
  font-size:14px
}
.task-strip {
  display:flex;
  align-items:center;
  gap:11px;
  background:#f0f6f1;
  border:1px solid #dceadd;
  border-radius:10px;
  margin-top:15px;
  padding:9px 12px;
  min-height:57px
}
.task-strip .icon {
  color:var(--green)
}
.task-strip b {
  font-size:10px;
  display:block
}
.task-strip small {
  display:block;
  color:#64748b;
  font-size:9px;
  margin-top:4px
}
.task-strip a {
  margin-left:auto;
  display:grid;
  place-items:center;
  min-width:52px;
  min-height:52px;
  font-size:16px;
  color:var(--green)
}
.health-card {
  padding:17px 17px 13px;
  overflow:hidden;
  position:relative;
  background:linear-gradient(145deg,#fff 20%,#f2f8ef)
}
.health-card h2 {
  font-size:12px;
  margin:0 0 5px
}
.health-card p {
  font-size:9px;
  color:#64748b;
  margin:0
}
.ring {
  position:relative;
  width:162px;
  height:162px;
  margin:10px auto 0
}
.ring svg {
  width:100%;
  height:100%;
  transform:rotate(-90deg)
}
.ring-track {
  fill:none;
  stroke:#e2eddc;
  stroke-width:8
}
.ring-value {
  fill:none;
  stroke:var(--green);
  stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:400 427
}
.ring-core {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}
.ring-core small {
  font-size:8px;
  color:#64748b;
  margin-bottom:4px
}
.ring-core strong {
  font:600 44px var(--display);
  letter-spacing:-2px
}
.ring-core strong span {
  font-size:21px;
  letter-spacing:-1px
}
.ring-core b {
  font-size:9px;
  color:var(--green);
  margin-top:3px
}
.health-caption {
  text-align:center;
  font:8px var(--mono);
  color:#718475;
  padding-bottom:14px
}
.telemetry {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #dce8d7;
  padding-top:12px;
  gap:5px
}
.telemetry div {
  text-align:center;
  flex:1
}
.telemetry .icon {
  height:16px;
  width:16px;
  color:var(--green);
  margin-bottom:3px
}
.telemetry small {
  display:block;
  color:#6a786d;
  font-size:8px
}
.telemetry b {
  display:block;
  font-size:9px;
  font-weight:600;
  margin-top:5px
}
.location-card {
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:12px;
  padding:13px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px
}
.location-card .icon {
  color:var(--green)
}
.location-card b {
  font-size:10px;
  display:block
}
.location-card small {
  font:8px var(--mono);
  color:#64748b;
  display:block;
  margin-top:4px
}
.dock {
  position:absolute;
  bottom:15px;
  left:calc(164px + 28px);
  right:28px;
  min-height:65px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:7px 9px 7px 17px;
  background:#ffffffed;
  backdrop-filter:blur(16px);
  border:1px solid #dce5df;
  border-radius:14px;
  box-shadow:0 10px 28px #2c4a3214;
  z-index:3
}
.dock-info {
  display:flex;
  gap:10px;
  align-items:center
}
.dock-info>.icon {
  color:#a37517;
  width:19px
}
.dock-info b {
  display:block;
  font-size:10px;
  font-weight:600
}
.dock-info small {
  display:block;
  color:#64748b;
  font-size:9px;
  margin-top:4px
}
.dock-actions {
  display:flex;
  align-items:center;
  gap:8px
}
.btn {
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 17px;
  border-radius:9px;
  border:1px solid #dbe5df;
  background:#fff;
  font-size:11px;
  font-weight:600;
  white-space:nowrap
}
.btn.primary {
  background:var(--green);
  border-color:var(--green);
  color:#fff;
  box-shadow:0 3px 5px #0b6b3a13
}
.btn.primary:hover {
  background:#07562e
}
.btn.secondary {
  background:#edf6ef;
  color:var(--green);
  border-color:#dcebdd
}
.btn.ghost {
  background:transparent;
  border-color:transparent;
  color:#64748b
}
.btn .icon {
  width:17px;
  height:17px
}
.btn.square {
  padding:0;
  min-width:52px
}
.workbench-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:22px 8px 0;
  font:9px var(--mono);
  color:#7a8b84;
  letter-spacing:.4px
}
.footer-left {
  display:flex;
  align-items:center;
  gap:15px
}
.footer-left b {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:700;
  color:#4a6055;
  letter-spacing:1px
}
.screen-index {
  color:#496653
}
.columns {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:18px
}
.muted {
  color:var(--muted)
}
.small {
  font-size:11px;
  line-height:1.7
}
.field-label {
  font-size:10px;
  font-weight:600;
  display:block;
  margin:0 0 9px
}
.form-group {
  margin-bottom:19px
}
.form-input {
  width:100%;
  min-height:52px;
  border:1px solid var(--line);
  background:#f8fafc;
  border-radius:9px;
  padding:12px;
  font-size:12px;
  color:#0f172a
}
.chips {
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.chip {
  min-height:52px;
  flex:1;
  border:1px solid var(--line);
  background:#fff;
  border-radius:9px;
  padding:0 10px;
  font-size:10px;
  font-weight:500
}
.chip.selected {
  background:#edf8f1;
  color:var(--green);
  border-color:#6dad86;
  box-shadow:inset 0 0 0 1px #6dad86
}
.chip.danger.selected {
  border-color:#be5656;
  color:#9b3030;
  background:#fff3f3
}
.height-label {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.height-label strong {
  font:600 25px var(--display);
  color:var(--green)
}
input[type=range] {
  width:100%;
  accent-color:var(--green);
  min-height:52px
}
.range-labels {
  display:flex;
  justify-content:space-between;
  font:9px var(--mono);
  color:#64748b
}
.info-note {
  background:#f4f7f5;
  border-radius:9px;
  padding:12px;
  font-size:10px;
  color:#597063;
  line-height:1.7;
  border:1px solid #e4ece6
}
.record-id {
  font:12px var(--mono);
  color:var(--green)
}
.data-rows {
  margin:0
}
.data-rows>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 0;
  border-bottom:1px solid #edf1f3;
  gap:12px;
  min-height:51px
}
.data-rows>div:last-child {
  border:0
}
.data-rows dt {
  font-size:10px;
  color:#64748b
}
.data-rows dd {
  font-size:11px;
  font-weight:600;
  margin:0;
  text-align:right
}
.data-rows dd.mono {
  font:10px var(--mono)
}
.big-icon {
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  background:#eaf6ee;
  border:1px solid #d6e9dc;
  border-radius:17px;
  color:var(--green);
  margin-bottom:18px
}
.big-icon .icon {
  width:29px;
  height:29px
}
.profile-hero {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px
}
.profile-hero .avatar {
  width:66px;
  height:66px;
  font-size:21px
}
.profile-hero h2 {
  font:600 22px var(--display);
  margin:0 0 6px
}
.profile-hero p {
  font-size:10px;
  color:#64748b;
  margin:0
}
.list {
  display:flex;
  flex-direction:column;
  gap:10px
}
.list-card {
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:15px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  min-height:83px
}
.list-card:hover {
  border-color:#78a98a
}
.list-card.selected {
  border-color:#67a782;
  box-shadow:inset 0 0 0 1px #67a782;
  background:#f7fbf8
}
.list-card .tile-icon {
  margin:0;
  width:42px;
  height:42px
}
.list-card h3 {
  font-size:12px;
  margin:0 0 6px
}
.list-card p {
  font-size:10px;
  color:#64748b;
  margin:0
}
.list-card>.icon:last-child {
  margin-left:auto;
  color:#78917f;
  width:17px
}
.list-card .pill {
  margin-left:auto
}
.map {
  height:193px;
  border-radius:11px;
  background:#edf2e8;
  position:relative;
  overflow:hidden;
  border:1px solid #dce5d6
}
.map svg {
  width:100%;
  height:100%
}
.map-label {
  position:absolute;
  top:13px;
  left:13px;
  background:#fff;
  padding:7px 9px;
  border-radius:6px;
  font:8px var(--mono);
  color:#426748;
  border:1px solid #dbe5d7
}
.map-coords {
  position:absolute;
  bottom:12px;
  left:12px;
  font:9px var(--mono);
  background:#fffffff0;
  padding:7px;
  border-radius:5px;
  color:#426748
}
.login-layout {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:38px;
  align-items:center;
  max-width:700px;
  margin:6px auto
}
.login-intro h1 {
  font:600 39px/1.06 var(--display);
  letter-spacing:-1.9px;
  margin:18px 0 15px
}
.login-intro h1 span {
  color:var(--green)
}
.login-intro>p {
  font-size:11px;
  color:#64748b;
  line-height:1.8;
  max-width:240px
}
.login-intro .map {
  margin-top:22px;
  height:136px
}
.pin-card {
  padding:24px
}
.pin-card h2 {
  font-size:15px;
  margin:0 0 7px
}
.pin-card>p {
  font-size:10px;
  color:#64748b;
  margin:0 0 16px
}
.pin-dots {
  display:flex;
  gap:12px;
  margin:20px 0;
  justify-content:center
}
.pin-dot {
  width:13px;
  height:13px;
  border:1px solid #bacbc1;
  border-radius:50%;
  background:#f4f8f5
}
.pin-dot.filled {
  background:var(--green);
  border-color:var(--green)
}
.pin-pad {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px
}
.pin-key {
  min-height:52px;
  border:1px solid var(--line);
  background:#f8fafc;
  border-radius:8px;
  font:500 20px var(--display)
}
.pin-key:hover {
  background:#edf6ef
}
.pin-key .icon {
  margin:auto;
  color:var(--green)
}
.pin-hint {
  text-align:center;
  font-size:9px!important;
  margin:14px 0 0!important
}
.check-row {
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid #edf1f3
}
.check-row:last-child {
  border:0
}
.check-icon {
  height:30px;
  width:30px;
  background:#eaf7ee;
  color:var(--green);
  border-radius:50%;
  display:grid;
  place-items:center
}
.check-icon .icon {
  height:16px;
  width:16px
}
.check-row b {
  font-size:11px;
  display:block
}
.check-row small {
  font-size:9px;
  color:#64748b;
  display:block;
  margin-top:5px
}
.check-row>.pill {
  margin-left:auto
}
.pending .check-icon {
  background:#fff7e7;
  color:#ad7313
}
.evidence-zone {
  height:257px;
  border:1px dashed #aac4b3;
  border-radius:12px;
  background:repeating-linear-gradient(0deg,transparent,transparent 31px,#dce7e42b 32px),repeating-linear-gradient(90deg,#f4f8f5,#f4f8f5 31px,#dce7e44a 32px);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:11px
}
.evidence-zone .icon {
  width:33px;
  height:33px;
  color:#629478
}
.evidence-zone b {
  font-size:12px
}
.evidence-zone p {
  font-size:10px;
  color:#64748b;
  margin:0
}
.evidence-zone img {
  height:100%;
  width:100%;
  object-fit:contain;
  background:#ecf2ef
}
.evidence-zone.has-image {
  border-style:solid
}
.watermark {
  position:absolute;
  bottom:10px;
  left:10px;
  right:10px;
  background:#ffffffed;
  border:1px solid #7cae8e;
  border-radius:6px;
  padding:9px;
  color:#07552e;
  font:8px/1.8 var(--mono);
  overflow-wrap:anywhere;
  pointer-events:none
}
.crosshairs {
  position:absolute;
  left:50%;
  top:40%;
  height:28px;
  width:28px;
  border:1px solid #10b981;
  border-radius:50%;
  transform:translate(-50%,-50%)
}
.crosshairs:before,.crosshairs:after {
  content:'';
  position:absolute;
  background:#10b981
}
.crosshairs:before {
  height:42px;
  width:1px;
  left:13px;
  top:-7px
}
.crosshairs:after {
  width:42px;
  height:1px;
  left:-7px;
  top:13px
}
.upload-label {
  cursor:pointer;
  margin-top:12px;
  width:100%
}
.hash {
  font:9px/1.8 var(--mono);
  overflow-wrap:anywhere;
  color:#326448;
  background:#f0f7f2;
  padding:12px;
  border-radius:8px
}
.success-view {
  max-width:550px;
  margin:3px auto;
  text-align:center
}
.success-view .big-icon {
  margin:0 auto 16px;
  width:76px;
  height:76px;
  border-radius:50%;
  box-shadow:0 0 0 8px #f0f8f3
}
.success-view h2 {
  font:600 25px var(--display);
  letter-spacing:-.8px;
  margin:20px 0 9px
}
.success-view>p {
  font-size:11px;
  color:#64748b;
  line-height:1.8;
  margin:0 auto 20px;
  max-width:370px
}
.success-view .card {
  text-align:left
}
.success-view .saved-count {
  font:600 33px var(--display);
  color:var(--green)
}
.progress-track {
  height:9px;
  background:#e8efe9;
  border-radius:10px;
  overflow:hidden;
  margin:19px 0 13px
}
.progress-fill {
  height:100%;
  background:var(--green);
  border-radius:10px;
  transition:width .3s ease;
  width:0
}
.sync-visual {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:24px 0
}
.sync-node {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  font-size:9px;
  color:#64748b
}
.sync-node .big-icon {
  margin:0
}
.sync-line {
  height:1px;
  flex:1;
  background:repeating-linear-gradient(to right,#a1bda9 0,#a1bda9 5px,transparent 5px,transparent 10px);
  position:relative
}
.sync-line .dot {
  position:absolute;
  top:-3px;
  left:40%
}
.sync-line.running .dot {
  animation:transmit 1.3s infinite linear
}
@keyframes transmit {
  from {
    left:0
  }
  to {
    left:100%
  }}
.battery-bar {
  height:7px;
  width:90px;
  background:#edf2ee;
  border-radius:5px;
  overflow:hidden
}
.battery-bar i {
  display:block;
  height:100%;
  background:var(--green);
  width:88%
}
.toast {
  position:absolute;
  bottom:94px;
  left:50%;
  transform:translateX(-50%);
  max-width:90%;
  background:#173e2b;
  color:#fff;
  font-size:11px;
  line-height:1.5;
  border-radius:9px;
  padding:12px 18px;
  z-index:10;
  box-shadow:0 7px 20px #173e2b25
}
.toast[hidden] {
  display:none
}
.modal-backdrop {
  position:absolute;
  inset:0;
  background:#0f172a55;
  backdrop-filter:blur(4px);
  z-index:8;
  display:grid;
  place-items:center;
  padding:25px
}
.modal {
  background:#fff;
  border:1px solid var(--line);
  border-radius:17px;
  width:460px;
  max-width:100%;
  padding:25px;
  box-shadow:0 20px 40px #0f172a20
}
.modal h2 {
  font:600 24px var(--display);
  margin:0 0 7px
}
.modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:20px
}
.inline-actions {
  display:flex;
  gap:10px;
  margin-top:18px
}
.progress-steps {
  display:flex;
  gap:8px;
  margin-bottom:18px
}
.progress-steps span {
  height:3px;
  flex:1;
  background:#e2e8f0;
  border-radius:5px
}
.progress-steps span.done {
  background:var(--green)
}
.security-footnote {
  font-size:9px;
  color:#64748b;
  line-height:1.7;
  margin:12px 0 0
}
.mobile-note {
  display:none
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.demo-tag {
  font:8px var(--mono);
  color:#819188;
  letter-spacing:.3px
}
.scroll-content {
  animation:appear .2s ease
}
@keyframes appear {
  from {
    opacity:.4;
    transform:translateY(4px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }}
@media(min-width:1440px) {
  .workbench {
    padding-top:44px
  }
  .workspace {
    height:615px
  }
  .content {
    padding-top:29px
  }
  .home-grid {
    gap:22px
  }
  .action-tile {
    min-height:119px
  }
  .health-card {
    padding-top:20px
  }
  .ring {
    width:180px;
    height:180px
  }
  .evidence-zone {
    height:285px
  }}
@media(max-width:1150px) {
  .workbench {
    padding:20px
  }
  .workspace {
    grid-template-columns:140px 1fr
  }
  .sidebar {
    padding-left:7px;
    padding-right:7px
  }
  .content {
    padding:22px 20px 97px
  }
  .dock {
    left:160px;
    right:20px
  }
  .home-grid {
    grid-template-columns:1fr 220px;
    gap:12px
  }
  .action-tile {
    padding:12px 9px
  }
  .action-tile b {
    font-size:9px
  }
  .page-heading h1 {
    font-size:25px
  }
  .login-layout {
    gap:20px
  }
  .login-intro h1 {
    font-size:34px
  }
  .presentation {
    gap:9px
  }
  .presentation select {
    max-width:162px
  }}
@media(max-width:900px) {
  .workbench {
    padding:18px 12px
  }
  .tablet {
    padding:17px 12px;
    border-radius:30px
  }
  .sidebar {
    display:none
  }
  .workspace {
    grid-template-columns:1fr;
    height:600px
  }
  .dock {
    left:20px
  }
  .presentation-title {
    display:none
  }
  .brand-sub {
    font-size:8px
  }
  .workbench-footer {
    font-size:8px
  }
  .home-grid {
    grid-template-columns:1fr 230px
  }
  .action-tile b {
    font-size:10px
  }}
@media(max-width:600px) {
  .workbench {
    padding:16px 8px
  }
  .masthead {
    padding:0 7px;
    margin-bottom:14px
  }
  .brand-name {
    font-size:11px;
    letter-spacing:1.5px
  }
  .brand-sub {
    font-size:6px;
    letter-spacing:1.4px
  }
  .presentation-label>span:not(.pill) {
    display:none
  }
  .presentation-label .pill {
    font-size:8px;
    padding:6px
  }
  .presentation {
    flex-wrap:wrap;
    margin:0 4px 10px;
    gap:4px
  }
  .steps {
    overflow:auto;
    min-width:100%;
    gap:2px
  }
  .step {
    min-width:52px
  }
  .presentation select {
    max-width:none;
    width:100%;
    min-height:52px
  }
  .tablet {
    padding:16px 8px;
    border-radius:25px
  }
  .screen {
    border-radius:16px
  }
  .app-header {
    padding:0 14px;
    height:64px
  }
  .app-name {
    font-size:12px
  }
  .app-name small {
    font-size:7px
  }
  .header-right>.pill {
    display:none
  }
  .officer {
    border:0;
    padding:0
  }
  .officer>span:last-child {
    display:none
  }
  .osbar {
    padding:0 14px;
    font-size:8px
  }
  .workspace {
    height:660px
  }
  .content {
    padding:20px 14px
  }
  .page-heading {
    align-items:flex-start
  }
  .page-heading h1 {
    font-size:26px
  }
  .page-heading .date {
    display:none
  }
  .home-grid,.columns,.login-layout {
    grid-template-columns:1fr
  }
  .home-grid {
    gap:17px
  }
  .action-tile {
    min-height:112px;
    padding:12px 9px
  }
  .action-tile b {
    font-size:9px
  }
  .welcome-stats {
    margin-bottom:16px
  }
  .stat {
    padding-left:13px
  }
  .stat strong {
    font-size:26px
  }
  .health-card .ring {
    width:170px;
    height:170px
  }
  .dock {
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin:0 8px 10px;
    min-height:81px;
    gap:5px;
    padding:8px
  }
  .dock-info {
    gap:5px
  }
  .dock-info b {
    font-size:9px
  }
  .dock-info small {
    font-size:8px;
    max-width:83px;
    line-height:1.5
  }
  .dock-info>.icon {
    display:none
  }
  .dock-actions {
    gap:3px
  }
  .dock-actions .btn {
    font-size:9px;
    padding:0 10px
  }
  .dock-actions .btn.ghost {
    padding:0 6px
  }
  .dock-actions .btn .icon {
    width:14px
  }
  .workbench-footer {
    display:block;
    text-align:center;
    line-height:2.3;
    margin-top:15px
  }
  .footer-left {
    justify-content:center
  }
  .login-intro h1 {
    font-size:30px
  }
  .login-intro .map {
    display:none
  }
  .login-intro>p {
    max-width:none
  }
  .login-layout {
    gap:16px;
    margin:0
  }
  .pin-card {
    padding:18px
  }
  .login-intro .eyebrow {
    margin-top:0
  }
  .login-intro h1 {
    margin:10px 0
  }
  .pin-pad {
    gap:6px
  }
  .list-card {
    padding:12px;
    gap:10px
  }
  .list-card h3 {
    font-size:11px
  }
  .list-card p {
    font-size:9px
  }
  .list-card .pill {
    font-size:8px;
    padding:5px
  }
  .chips {
    gap:5px
  }
  .chip {
    font-size:9px;
    padding:0 7px
  }
  .evidence-zone {
    height:245px
  }
  .mobile-note {
    display:block;
    text-align:center;
    font-size:8px;
    color:#64748b;
    margin:10px 0 0
  }}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }}
/* Desktop launcher and application lifecycle */ .presentation-tools {
  margin:0 8px 12px
}
.presentation-tools>summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-height:52px;
  font-size:10px;
  color:#62756a
}
.presentation-tools>summary::-webkit-details-marker {
  display:none
}
.presentation-tools[open] {
  border-bottom:1px solid #dce5df
}
.presentation-tools .presentation {
  margin-top:5px
}
.presentation-tools>summary:focus-visible {
  outline:3px solid var(--emerald);
  border-radius:6px
}
.device-desktop {
  height:676px;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  background:#f5f8f6;
  overflow:hidden
}
.desktop-wallpaper {
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(ellipse at 27% 24%,#fff 0%,#f8faf8 40%,#e5eee6 100%)
}
.desktop-wallpaper i {
  position:absolute;
  width:950px;
  height:950px;
  right:-520px;
  bottom:-720px;
  border-radius:43%;
  transform:rotate(-29deg);
  background:linear-gradient(155deg,#d8e7d938,#b0c9b680);
  border:1px solid #fff9;
  box-shadow:0 -18px 60px #71997a08
}
.desktop-wallpaper i:nth-child(2) {
  right:-400px;
  bottom:-780px;
  transform:rotate(-36deg);
  background:linear-gradient(160deg,#dce9dd35,#93b29c80)
}
.desktop-wallpaper i:nth-child(3) {
  right:-270px;
  bottom:-850px;
  transform:rotate(-42deg);
  background:linear-gradient(150deg,#cddfcb38,#7eaa9070)
}
.desktop-heading {
  padding:35px 39px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px
}
.desktop-kicker {
  font-size:10px;
  font-weight:750;
  letter-spacing:2px;
  color:#496350
}
.desktop-heading p {
  font:9px var(--mono);
  color:#7d8e81;
  margin:9px 0
}
.desktop-heading p span {
  color:#bac8be;
  margin:0 5px
}
.desktop-managed {
  display:flex;
  align-items:center;
  gap:7px;
  color:#687d6e;
  font-size:9px;
  padding-top:2px
}
.desktop-apps {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 20px 30px
}
.desktop-shortcut {
  display:flex;
  align-items:center;
  flex-direction:column;
  border:1px solid transparent;
  background:transparent;
  border-radius:16px;
  padding:22px 30px 18px;
  min-width:194px;
  transition:background .2s,transform .2s,border-color .2s
}
.desktop-shortcut:hover {
  background:#ffffff70;
  border-color:#d5e4d9;
  transform:translateY(-3px)
}
.desktop-shortcut:active {
  transform:scale(.97)
}
.application-icon {
  display:grid;
  place-items:center;
  position:relative;
  width:88px;
  height:88px;
  border-radius:24px;
  color:#fff;
  background:linear-gradient(145deg,#248655,#07522e);
  border:1px solid #267648;
  box-shadow:inset 0 1px 1px #ffffff60,inset 0 -4px 10px #043c2725,0 12px 25px -7px #1b624b55,0 0 0 5px #ffffff90;
  margin-bottom:21px
}
.application-icon .icon {
  height:42px;
  width:42px;
  stroke-width:1.35
}
.shortcut-badge {
  position:absolute;
  bottom:-4px;
  right:-5px;
  height:24px;
  width:24px;
  background:#fff;
  border:1px solid #dce8df;
  border-radius:7px;
  display:grid;
  place-items:center;
  color:#25613d;
  font-size:15px;
  box-shadow:0 2px 5px #1a3c2720
}
.desktop-shortcut strong {
  font-size:14px;
  font-weight:650;
  letter-spacing:-.25px;
  color:#203b2b
}
.shortcut-publisher {
  font:8px var(--mono);
  letter-spacing:1.1px;
  color:#768d7c;
  margin-top:7px
}
.launch-hint {
  font-size:10px;
  color:#809086;
  margin:14px 0 0
}
.desktop-signature {
  text-align:center;
  font:400 11px var(--display);
  letter-spacing:1px;
  color:#8b9e8f;
  padding:0 15px 37px
}
.desktop-taskbar {
  height:65px;
  background:#ffffffb5;
  backdrop-filter:blur(25px);
  border-top:1px solid #ffffffc9;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 25px
}
.desktop-system {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  color:#45614d
}
.desktop-system small {
  display:block;
  font:7px var(--mono);
  letter-spacing:1.2px;
  color:#89988d;
  margin-top:4px
}
.system-glyph {
  width:22px;
  height:22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  transform:perspective(100px) rotateY(-12deg)
}
.system-glyph i {
  background:#588067;
  border-radius:1px
}
.system-tray {
  display:flex;
  align-items:center;
  gap:16px;
  color:#56735f
}
.system-tray .icon {
  height:16px;
  width:16px
}
.system-tray>div {
  text-align:right;
  font:10px var(--mono);
  padding-left:2px
}
.system-tray>div>span {
  display:block;
  font-size:8px;
  color:#84948a;
  margin-top:5px
}
.windowbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:52px;
  background:#edf2ee;
  border-bottom:1px solid #dfe7e1;
  padding-left:20px
}
.window-identity {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  color:#365942
}
.window-identity .icon {
  width:17px;
  height:17px
}
.window-identity b {
  font-weight:600
}
.window-context {
  color:#87968c;
  font:8px var(--mono);
  letter-spacing:.7px;
  border-left:1px solid #cfdad1;
  margin-left:6px;
  padding-left:14px
}
.window-actions {
  display:flex;
  height:52px
}
.window-actions button {
  min-width:52px;
  min-height:52px;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  color:#6a7e70;
  font-size:20px
}
.window-actions button:hover {
  background:#dfe8e1
}
.window-actions button:last-child:hover {
  background:#f8e1e1;
  color:#a63e3e
}
.window-actions .icon {
  width:15px;
  height:15px
}
.screen:not(.is-desktop) .device-desktop {
  display:none
}
.screen.is-desktop>.windowbar,.screen.is-desktop>.osbar,.screen.is-desktop>.app-header,.screen.is-desktop>.workspace,.screen.is-desktop>.dock {
  display:none
}
.screen.onboarding .sidebar,.screen.onboarding .officer {
  display:none
}
.screen.onboarding .workspace {
  grid-template-columns:1fr
}
.screen.onboarding .content {
  padding-left:42px;
  padding-right:42px
}
.screen.onboarding .dock {
  left:42px;
  right:42px
}
.screen.onboarding .login-layout {
  max-width:760px
}
.enrollment-trail {
  display:flex;
  align-items:center;
  gap:20px;
  max-width:760px;
  margin:0 auto 24px;
  padding-bottom:17px;
  border-bottom:1px solid var(--line)
}
.enrollment-stage {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:#91a098
}
.enrollment-stage b {
  font:9px var(--mono);
  height:22px;
  width:22px;
  border:1px solid #dce5df;
  border-radius:50%;
  display:grid;
  place-items:center
}
.enrollment-stage.current {
  color:var(--green);
  font-weight:600
}
.enrollment-stage.current b {
  color:white;
  background:var(--green);
  border-color:var(--green)
}
.enrollment-stage.complete {
  color:#49775a
}
.launching .application-icon {
  animation:launchPulse .7s ease infinite alternate
}
.launching .desktop-shortcut {
  pointer-events:none
}
.launching .shortcut-badge {
  display:none
}
@keyframes launchPulse {
  to {
    box-shadow:inset 0 1px 1px #ffffff60,0 15px 35px -4px #1b624b55,0 0 0 11px #ffffffa0;
    transform:translateY(-3px)
  }}
@media(min-width:1440px) {
  .device-desktop {
    height:712px
  }}
@media(max-width:900px) {
  .screen.onboarding .content {
    padding-left:24px;
    padding-right:24px
  }
  .screen.onboarding .dock {
    left:24px;
    right:24px
  }}
@media(max-width:600px) {
  .presentation-tools {
    margin-bottom:6px
  }
  .device-desktop {
    height:660px
  }
  .desktop-heading {
    padding:25px 21px;
    display:block
  }
  .desktop-managed {
    margin-top:15px;
    font-size:8px
  }
  .desktop-heading p {
    font-size:8px
  }
  .desktop-apps {
    padding-bottom:35px
  }
  .desktop-signature {
    font-size:9px;
    padding-bottom:30px
  }
  .desktop-taskbar {
    padding:0 17px
  }
  .desktop-system {
    font-size:10px
  }
  .system-tray {
    gap:10px
  }
  .windowbar {
    padding-left:13px
  }
  .window-context {
    display:none
  }
  .screen.onboarding .content {
    padding:20px 14px
  }
  .screen.onboarding .dock {
    left:auto;
    right:auto
  }
  .enrollment-trail {
    gap:13px;
    margin-bottom:19px
  }
  .enrollment-stage {
    font-size:9px;
    gap:5px
  }
  .enrollment-stage b {
    width:20px;
    height:20px
  }
  .screen.onboarding .login-layout {
    gap:15px
  }
  .screen.onboarding .login-intro>p {
    margin:8px 0
  }
  .screen.onboarding .login-intro .security-footnote {
    display:none
  }
  .screen.onboarding .login-intro h1 {
    font-size:27px
  }}
@media(prefers-reduced-motion:reduce) {
  .launching .application-icon {
    animation:none
  }}
/* Milestone 1: physical landscape tablet shell. No simulated device or desktop chrome. */ :root {
  --surface:#F8FAFC;
  --panel:#FFFFFF;
  --border:#CBD5E1;
  --ink:#0F172A;
  --institutional-green:#0B6B3A;
  --status-emerald:#10B981;
  --hazard-amber:#F59E0B;
  --green:var(--institutional-green);
  --emerald:var(--status-emerald);
  --amber:var(--hazard-amber);
  --line:var(--border);
  --paper:var(--surface)
}
html,body {
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--surface)
}
body {
  min-width:1024px;
  min-height:600px;
  background:var(--surface);
  color:var(--ink)
}
.workbench {
  width:100vw;
  height:100vh;
  max-width:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.masthead,.presentation-tools,.workbench-footer,.mobile-note,.tablet:before,.tablet:after,.osbar,.windowbar,.device-desktop {
  display:none!important
}
.tablet {
  width:100%;
  height:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  padding:0;
  border-radius:0;
  box-shadow:none
}
.screen {
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border-radius:0;
  overflow:hidden
}
.app-header {
  height:56px;
  min-height:56px;
  padding:0 20px;
  background:var(--panel);
  border-bottom:1.5px solid var(--border);
  gap:18px
}
.app-lockup {
  min-width:315px;
  height:56px;
  min-height:56px;
  gap:10px
}
.app-name {
  font-size:14px;
  font-weight:800;
  color:var(--ink)
}
.app-name small {
  font-size:9px;
  letter-spacing:.65px;
  margin-top:2px;
  color:#475569
}
.gps-telemetry {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:0 14px;
  border:1.5px solid #86EFAC;
  border-radius:999px;
  background:#F0FDF4;
  color:#07552e;
  font:600 10px var(--mono);
  letter-spacing:.2px;
  white-space:nowrap
}
.gps-telemetry.searching {
  border-color:#FCD34D;
  background:#FFFBEB;
  color:#92400E
}
.gps-telemetry .dot {
  width:8px;
  height:8px;
  background:var(--status-emerald)
}
.gps-telemetry.searching .dot {
  background:var(--hazard-amber)
}
.gps-telemetry[data-gps-state="LOCKED"] {
  border-color:#10B981;
  background:#F0FDF4;
  color:#0B6B3A
}
.gps-telemetry[data-gps-state="ACCEPTABLE"] {
  border-color:#1E88E5;
  background:#EFF6FF;
  color:#1E88E5
}
.gps-telemetry[data-gps-state="COARSE"] {
  border-color:#F59E0B;
  background:#FFFBEB;
  color:#92400E
}
.gps-telemetry[data-gps-state="REJECTED_IP"],.gps-telemetry[data-gps-state="OFFLINE"] {
  border-color:#EF4444;
  background:#FEF2F2;
  color:#B91C1C
}
.gps-guidance {
  margin:12px 0 0;
  padding:12px 14px;
  border:1.5px solid #F59E0B;
  border-radius:10px;
  background:#FFFBEB;
  color:#78350F;
  font-size:11px;
  font-weight:600;
  line-height:1.5
}
.dock-actions .btn[data-action="save"] {
  cursor:pointer;
  pointer-events:auto!important;
  position:relative;
  z-index:100
}
.header-right {
  margin-left:auto;
  gap:12px;
  height:56px
}
.header-right>.pill {
  display:none
}
.system-indicators {
  display:flex;
  align-items:center;
  gap:12px;
  color:#334155;
  font:600 10px var(--mono);
  white-space:nowrap
}
.system-indicators span {
  display:inline-flex;
  align-items:center;
  gap:5px
}
.connectivity-badge {
  min-height:36px;
  padding:0 10px;
  border:1.5px solid #FCD34D;
  border-radius:999px;
  background:#FFFBEB;
  color:#92400E;
  font:700 9px var(--mono);
  letter-spacing:.3px
}
.officer {
  min-height:56px;
  padding-left:12px
}
.avatar {
  border-color:#E2E8F0
}
.officer b {
  font-size:10px
}
.officer small {
  font-size:8px
}
.workspace {
  height:auto;
  min-height:0;
  flex:1;
  grid-template-columns:188px minmax(0,1fr)
}
.sidebar {
  padding:16px 12px;
  background:var(--panel);
  border-right:1.5px solid var(--border)
}
.nav-item {
  min-height:60px;
  margin-bottom:7px;
  border:1px solid transparent;
  font-size:12px
}
.nav-item.active {
  border-color:#BBF7D0;
  background:#F0FDF4
}
.sidebar-bottom {
  padding-top:15px
}
.content {
  padding:22px 28px 112px;
  background:var(--surface)
}
.card {
  background:var(--panel);
  border:1.5px solid var(--border);
  box-shadow:none
}
.card-pad {
  padding:20px
}
.page-heading h1 {
  font-size:30px
}
.page-heading p {
  font-size:12px
}
.columns,.home-grid {
  gap:20px
}
.action-tile,.list-card,.location-card,.chip,.form-input,.pin-key,.btn {
  border-width:1.5px;
  border-color:var(--border)
}
.action-tile,.list-card {
  min-height:72px
}
.action-tile {
  min-height:116px
}
.btn,.chip,.form-input,.pin-key {
  min-height:60px
}
.task-strip {
  min-height:60px;
  border-width:1.5px
}
.dock {
  left:216px;
  right:28px;
  bottom:18px;
  min-height:72px;
  border:1.5px solid var(--border);
  box-shadow:0 8px 18px #0F172A14
}
.dock-actions .btn {
  min-height:60px
}
.modal-backdrop {
  position:fixed
}
.modal {
  border:1.5px solid var(--border)
}
button,a,select,input,.action-tile,.list-card {
  touch-action:manipulation
}
.pill {
  border-width:1.5px
}
.pill.green {
  border-color:#86EFAC;
  background:#F0FDF4
}
.pill.amber {
  border-color:#FCD34D;
  background:#FFFBEB;
  color:#92400E
}
@media (max-width:1100px) {
  body {
    min-width:0
  }
  .app-lockup {
    min-width:260px
  }
  .workspace {
    grid-template-columns:168px minmax(0,1fr)
  }
  .dock {
    left:196px;
    right:20px
  }
  .content {
    padding-left:20px;
    padding-right:20px
  }
  .system-indicators {
    gap:8px
  }
  .header-right {
    gap:8px
  }}
@media (max-width:820px) {
  .app-header {
    padding:0 12px
  }
  .app-lockup {
    min-width:0
  }
  .app-name small,.system-indicators {
    display:none
  }
  .workspace {
    grid-template-columns:1fr
  }
  .sidebar {
    display:none
  }
  .dock {
    left:16px;
    right:16px
  }
  .home-grid,.columns {
    grid-template-columns:1fr
  }}
/* Tri-Angle forensic console: one deliberate capture surface, then a compact audit rail. */ .tri-console {
  display:grid;
  grid-template-columns:minmax(0,1fr) 270px;
  gap:16px;
  align-items:stretch;
  margin-bottom:16px
}
.tri-viewfinder {
  min-height:330px;
  height:clamp(330px,43vh,440px);
  background:#0f172a;
  border:1px solid #1e293b;
  border-radius:14px;
  overflow:hidden;
  position:relative
}
.tri-viewfinder video {
  width:100%;
  height:100%;
  object-fit:cover
}
.tri-viewfinder .empty-state {
  height:100%;
  display:grid;
  place-items:center;
  text-align:center;
  padding:32px;
  color:#cbd5e1;
  background:radial-gradient(circle at 50% 30%,#26354a,#0f172a 68%)
}
.tri-viewfinder .empty-state:before {
  content:'CAMERA STANDBY';
  font:700 10px var(--mono);
  letter-spacing:1.4px;
  color:#86efac;
  position:absolute;
  top:18px;
  left:20px
}
.tri-capture-panel {
  display:flex;
  flex-direction:column;
  gap:12px
}
.tri-capture-panel .card {
  flex:1
}
.tri-target {
  font:700 18px var(--display);
  margin:4px 0
}
.tri-sequence {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}
.tri-slot {
  position:relative;
  min-height:126px;
  border:1.5px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:10px;
  text-align:left;
  overflow:hidden;
  transition:border-color .15s,box-shadow .15s,transform .15s
}
.tri-slot:hover {
  border-color:#75ad8a;
  transform:translateY(-1px)
}
.tri-slot.active {
  border-color:var(--green);
  box-shadow:0 0 0 3px #0b6b3a12
}
.tri-slot.done {
  border-color:#9cd1ae
}
.tri-slot-index {
  font:700 9px var(--mono);
  color:var(--green);
  letter-spacing:.7px
}
.tri-slot b {
  font-size:10px;
  display:block;
  margin-top:6px
}
.tri-slot small {
  font-size:8px;
  line-height:1.35;
  display:block;
  color:var(--muted);
  margin-top:4px
}
.tri-slot img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.tri-slot .tri-slot-overlay {
  position:absolute;
  inset:auto 0 0;
  padding:20px 9px 8px;
  color:#fff;
  background:linear-gradient(transparent,rgba(15,23,42,.88));
  font-size:9px;
  font-weight:700
}
.tri-retake {
  position:absolute;
  right:7px;
  top:7px;
  z-index:1;
  min-height:32px!important;
  min-width:32px;
  padding:0!important;
  border-radius:50%!important;
  background:#ffffffed!important
}
.tri-control-row {
  display:flex;
  gap:9px;
  flex-wrap:wrap
}
.tri-control-row .btn {
  flex:1;
  min-width:150px
}
.tri-required-note {
  font-size:9px;
  color:var(--muted);
  margin:0
}
.tri-live-badge {
  position:absolute;
  top:15px;
  right:15px;
  z-index:2
}
.tri-shutter {
  min-height:62px!important;
  background:#0B6B3A!important;
  border-radius:12px!important;
  font-size:12px!important;
  letter-spacing:.2px
}
.tri-shutter:disabled {
  background:#94a3b8!important;
  border-color:#94a3b8!important
}
@media (max-width:820px) {
  .tri-console {
    grid-template-columns:1fr
  }
  .tri-viewfinder {
    min-height:260px
  }
  .tri-capture-panel {
    display:contents
  }
  .tri-sequence {
    order:2
  }
  .tri-control-row {
    order:3
  }}
.evidence-preview-overlay {
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(2,6,23,.94);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  padding:20px;
  backdrop-filter:blur(8px)
}
.evidence-preview-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:#fff;
  max-width:1240px;
  width:100%;
  margin:0 auto 14px
}
.evidence-preview-toolbar h2 {
  font:600 16px var(--display);
  margin:0
}
.evidence-preview-toolbar p {
  font:10px var(--mono);
  color:#cbd5e1;
  margin:5px 0 0
}
.evidence-preview-image {
  display:block;
  max-width:100%;
  max-height:calc(100vh - 104px);
  width:auto;
  height:auto;
  object-fit:contain;
  margin:auto;
  border:1px solid #475569;
  border-radius:10px;
  background:#0f172a;
  box-shadow:0 24px 70px rgba(0,0,0,.45)
}