:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #061923;
  color: #effaf6;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #061923; }
button, input { font: inherit; }
.eyebrow { color: #159b70; font-size: .75rem; font-weight: 800; letter-spacing: .16em; }
.brand { color: #fff; font-size: 1.1rem; font-weight: 850; letter-spacing: .14em; }
.brand small { color: #8fb4aa; font-size: .7rem; font-weight: 600; }
.brand-dot { color: #56dda5; text-shadow: 0 0 1rem #3de59e; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(20rem, 1.05fr) minmax(22rem, .95fr); }
.brand-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(2rem, 5vw, 5rem); background: radial-gradient(circle at 12% 88%, #0a9c7444 0, transparent 32%), radial-gradient(circle at 85% 18%, #117a6340 0, transparent 34%), linear-gradient(145deg, #092b38 0%, #061923 70%); }
.brand-panel::after { content: ""; position: absolute; width: 28rem; height: 28rem; right: -14rem; bottom: -14rem; border: 1px solid #59dfa71c; border-radius: 50%; box-shadow: 0 0 0 5rem #59dfa708, 0 0 0 10rem #59dfa706; }
.brand-panel h1 { max-width: 40rem; margin: 1.2rem 0; font-size: clamp(2.7rem, 5vw, 5.2rem); line-height: .98; letter-spacing: -.055em; }
.brand-panel p { max-width: 34rem; color: #a9c7be; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.7; }
.online, .status { display: flex; align-items: center; gap: .65rem; color: #b5cec7; font-size: .9rem; }
.online i, .status i { width: .65rem; height: .65rem; border-radius: 50%; background: #50e59d; box-shadow: 0 0 1rem #50e59d; }
.brand-footer { display: grid; gap: .8rem; }
.brand-footer a { width: fit-content; color: #8fb4aa; font-size: .78rem; text-decoration: none; }
.brand-footer a:hover { color: #56dda5; text-decoration: underline; }
.login-panel { display: grid; place-items: center; padding: 2rem; background: #f5faf8; color: #0b2630; }
.login-card { width: min(28rem, 100%); }
.login-card h2 { margin: .8rem 0 .4rem; color: #092833; font-size: clamp(2.1rem, 5vw, 3rem); letter-spacing: -.04em; }
.login-card .intro { margin: 0 0 2.2rem; color: #607a73; line-height: 1.6; }
.login-card label { display: block; margin: 1rem 0 .45rem; color: #26453e; font-size: .88rem; font-weight: 750; }
.login-card input { width: 100%; min-height: 3.35rem; padding: 0 1rem; border: 1px solid #cbdad5; border-radius: .75rem; outline: none; background: #fff; color: #0b2630; transition: border .2s, box-shadow .2s; }
.login-card input:focus { border-color: #159b70; box-shadow: 0 0 0 .22rem #159b701a; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 5rem; }
.show-password { position: absolute; right: .65rem; top: .55rem; padding: .55rem; border: 0; background: transparent; color: #167c60; cursor: pointer; font-size: .82rem; font-weight: 750; }
.primary-button { width: 100%; min-height: 3.4rem; margin-top: 1.2rem; border: 0; border-radius: .75rem; background: #087b5b; color: #fff; cursor: pointer; font-weight: 800; box-shadow: 0 .8rem 1.8rem #087b5b2c; }
.primary-button:hover { background: #066d50; }
.primary-button:disabled { cursor: wait; opacity: .7; }
.form-error { min-height: 1.4rem; padding-top: .7rem; color: #b42318; font-size: .85rem; }
.login-card small { display: block; margin-top: 1rem; color: #789087; text-align: center; }
.mobile-brand { display: none; margin-bottom: 3rem; color: #092833; }
.dashboard-body { background: radial-gradient(circle at top right, #0b795c 0, transparent 35%), #071923; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 4.5rem; padding: 0 clamp(1rem, 5vw, 4rem); border-bottom: 1px solid #ffffff17; background: #061923cc; }
.ghost-button { padding: .65rem 1rem; border: 1px solid #ffffff2c; border-radius: .65rem; background: transparent; color: #dff7ee; cursor: pointer; }
.dashboard-shell { min-height: calc(100vh - 4.5rem); display: grid; place-items: center; padding: 2rem; }
.welcome-card { width: min(46rem, 100%); padding: clamp(2rem, 6vw, 4rem); border: 1px solid #ffffff24; border-radius: 1.5rem; background: #0b2531e8; box-shadow: 0 2rem 5rem #0008; }
.welcome-card h1 { margin: 1rem 0; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.02; }
.welcome-card p { color: #b9d1ca; font-size: 1.1rem; line-height: 1.65; }
.welcome-card .status { margin-top: 2rem; }
@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; }
  .brand-panel { display: none; }
  .login-panel { min-height: 100vh; padding: 1.4rem; }
  .mobile-brand { display: block; }
}

.app-body { display: flex; min-height: 100vh; background: #f2f7f5; color: #102e35; }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 17rem; display: flex; flex-direction: column; padding: 1.5rem 1rem; background: #071e29; color: #dff5ed; }
.sidebar-brand { display: flex; gap: .7rem; align-items: center; padding: .5rem .75rem 2rem; font-weight: 850; letter-spacing: .12em; }
.sidebar-brand span:last-child { display: flex; flex-direction: column; }
.sidebar-brand small { margin-top: .2rem; color: #71958b; font-size: .62rem; font-weight: 600; letter-spacing: .06em; }
.sidebar-nav { display: grid; gap: .35rem; }
.sidebar-nav button { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .6rem; align-items: center; width: 100%; padding: .78rem .8rem; border: 0; border-radius: .65rem; background: transparent; color: #91aea6; cursor: pointer; text-align: left; font-size: .9rem; }
.sidebar-nav button:hover, .sidebar-nav button.active { background: #0d3c3a; color: #fff; }
.sidebar-nav b { color: #55d9a3; font-size: 1rem; }
.sidebar-nav em { min-width: 1.5rem; padding: .12rem .35rem; border-radius: 1rem; background: #ffffff13; font-size: .7rem; font-style: normal; text-align: center; }
.sidebar-user { margin-top: auto; display: flex; gap: .7rem; align-items: center; padding: 1rem .7rem 0; border-top: 1px solid #ffffff12; }
.sidebar-user div { min-width: 0; display: grid; }
.sidebar-user strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user small { color: #789a91; }
.avatar { width: 2.3rem; height: 2.3rem; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #159b70; color: #fff; font-weight: 800; }
.avatar.small { width: 2rem; height: 2rem; }
.app-main { width: calc(100% - 17rem); margin-left: 17rem; }
.app-topbar { height: 4.4rem; display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; padding: 0 2rem; border-bottom: 1px solid #dbe7e3; background: #fff; color: #688078; font-size: .82rem; }
.system-dot { display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: 50%; background: #18ad76; box-shadow: 0 0 .6rem #18ad7677; }
.logout-link, .menu-button { border: 0; background: transparent; color: #285349; cursor: pointer; font-weight: 750; }
.menu-button { display: none; margin-right: auto; font-size: 1.2rem; }
.dashboard-content { width: min(92rem, 100%); margin: auto; padding: clamp(1.5rem, 4vw, 3.5rem); }
.portal-view { display: none; }
.portal-view.active { display: block; }
.page-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2rem; }
.page-heading h1 { margin: .45rem 0 .2rem; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.045em; }
.page-heading p { margin: 0; color: #70867f; }
.date-chip, .panel-badge { padding: .45rem .75rem; border: 1px solid #d6e3df; border-radius: 2rem; background: #fff; color: #6c827b; font-size: .75rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.metric-grid article { display: flex; gap: 1rem; align-items: center; padding: 1.25rem; border: 1px solid #dfeae6; border-radius: 1rem; background: #fff; box-shadow: 0 .5rem 2rem #123c2d08; }
.metric-grid article div { display: grid; }
.metric-grid small { color: #71867f; }
.metric-grid strong { margin: .15rem 0; font-size: 1.75rem; }
.metric-grid em { color: #8aa098; font-size: .7rem; font-style: normal; }
.metric-icon { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: .8rem; font-size: 1.2rem; }
.metric-icon.green, .metric-icon.mint { background: #e4f8ef; color: #118a62; }
.metric-icon.blue { background: #e7f1fb; color: #347bb5; }
.metric-icon.amber { background: #fff3dd; color: #b77816; }
.status-word { color: #12865f; font-size: 1.1rem !important; }
.dashboard-grid, .management-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(18rem, .8fr); gap: 1.2rem; }
.management-grid { grid-template-columns: minmax(18rem, .7fr) minmax(0, 1.3fr); }
.panel { overflow: hidden; border: 1px solid #dfeae6; border-radius: 1rem; background: #fff; box-shadow: 0 .5rem 2rem #123c2d08; }
.panel > header { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.35rem; border-bottom: 1px solid #e8f0ed; }
.panel h2 { margin: 0; font-size: 1.05rem; }
.panel header p { margin: .25rem 0 0; color: #81958f; font-size: .75rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .9rem 1.2rem; border-bottom: 1px solid #edf2f0; text-align: left; font-size: .82rem; }
th { color: #81958f; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.cage-state-stack { display: grid; justify-items: start; gap: .35rem; min-width: 10.5rem; }
.last-seen { display: block; color: #7a9088; font-size: .65rem; white-space: nowrap; }
.cage-link { color: #087b5b; font-weight: 800; text-decoration: none; }
.cage-link:hover { text-decoration: underline; }
.state { display: inline-block; padding: .25rem .55rem; border-radius: 1rem; font-size: .68rem; font-weight: 800; }
.state.on { background: #e3f8ef; color: #087b56; }
.state.off { background: #f3f1f0; color: #857a75; }
.empty-state { display: grid; justify-items: center; padding: 3rem 1rem; color: #789087; text-align: center; }
.empty-state > span { font-size: 2rem; color: #3db388; }
.empty-state h3 { margin: .8rem 0 .2rem; color: #2b4a42; }
.empty-state p { max-width: 24rem; margin: 0; font-size: .82rem; }
.health-list, .record-list { margin: 0; padding: .5rem 1.25rem; list-style: none; }
.health-list li, .record-list li { display: flex; gap: .8rem; align-items: center; justify-content: space-between; padding: .85rem 0; border-bottom: 1px solid #edf2f0; font-size: .8rem; }
.health-list b { color: #10835e; }
.record-list li > div { min-width: 0; display: grid; margin-right: auto; }
.record-list small { color: #84968f; }
.record-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .6rem; background: #e7f7f0; color: #12865f; }
.create-form { padding: 1.4rem; }
.create-form h2 { margin-bottom: 1.2rem; }
.create-form label { display: grid; gap: .4rem; margin: .85rem 0; color: #536d65; font-size: .78rem; font-weight: 700; }
.create-form input, .create-form select { width: 100%; min-height: 2.9rem; padding: 0 .8rem; border: 1px solid #d3e1dc; border-radius: .6rem; background: #fff; color: #173a32; }
.tenant-login-form { display: grid; grid-template-columns: repeat(2, minmax(8rem, 1fr)); gap: .65rem; width: min(34rem, 100%); margin-top: .75rem; padding: .8rem; border: 1px solid #dce9e4; border-radius: .7rem; background: #f5faf8; }
.tenant-login-form label { display: grid; gap: .3rem; color: #536d65; font-size: .72rem; font-weight: 700; }
.tenant-login-form input { width: 100%; min-width: 0; min-height: 2.65rem; padding: 0 .75rem; border: 1px solid #bfd3cb; border-radius: .55rem; outline: none; background: #fff; color: #102e35; caret-color: #102e35; -webkit-text-fill-color: #102e35; }
.tenant-login-form input:focus { border-color: #159b70; box-shadow: 0 0 0 .2rem #159b701a; }
.tenant-login-form .form-message, .tenant-login-form .primary-button { grid-column: 1 / -1; }
.tenant-login-form .primary-button { margin-top: 0; }
.tenant-edit-details { margin-top: .65rem; }
.tenant-edit-details summary { width: fit-content; color: #087b5b; cursor: pointer; font-size: .75rem; font-weight: 800; }
.tenant-edit-form { display: grid; grid-template-columns: repeat(2, minmax(8rem, 1fr)); gap: .65rem; width: min(34rem, 100%); margin-top: .6rem; padding: .8rem; border: 1px solid #dce9e4; border-radius: .7rem; background: #f5faf8; }
.tenant-edit-form label { display: grid; gap: .3rem; color: #536d65; font-size: .72rem; font-weight: 700; }
.tenant-edit-form input { width: 100%; min-width: 0; min-height: 2.65rem; padding: 0 .75rem; border: 1px solid #bfd3cb; border-radius: .55rem; background: #fff; color: #102e35; -webkit-text-fill-color: #102e35; }
.tenant-edit-form .form-message, .tenant-edit-form .primary-button { grid-column: 1 / -1; }
.tenant-edit-form .primary-button { margin-top: 0; }
.edit-details { position: relative; }
.edit-details summary { color: #087b5b; cursor: pointer; font-size: .76rem; font-weight: 800; list-style: none; }
.edit-details summary::-webkit-details-marker { display: none; }
.cage-edit-form { position: absolute; z-index: 10; right: 0; top: 1.7rem; width: 17rem; padding: 1rem; border: 1px solid #cdded8; border-radius: .75rem; background: #fff; box-shadow: 0 1rem 2.5rem #102e3530; }
.cage-edit-form label { display: grid; gap: .3rem; margin-bottom: .65rem; color: #536d65; font-size: .72rem; font-weight: 700; }
.cage-edit-form input, .cage-edit-form select { width: 100%; min-height: 2.6rem; padding: 0 .7rem; border: 1px solid #bfd3cb; border-radius: .5rem; background: #fff; color: #102e35; -webkit-text-fill-color: #102e35; }
.cage-edit-form .primary-button { min-height: 2.7rem; margin-top: .2rem; }
.geofence-details { position: relative; margin-top: .4rem; }
.geofence-details summary { color: #8a651c; cursor: pointer; font-size: .76rem; font-weight: 800; list-style: none; }
.geofence-form { position: absolute; z-index: 11; right: 0; top: 1.7rem; width: 19rem; padding: 1rem; border: 1px solid #cdded8; border-radius: .75rem; background: #fff; box-shadow: 0 1rem 2.5rem #102e3530; }
.geofence-form label { display: grid; gap: .3rem; margin-bottom: .65rem; color: #536d65; font-size: .72rem; font-weight: 700; }
.geofence-form input { width: 100%; min-height: 2.6rem; padding: 0 .7rem; border: 1px solid #bfd3cb; border-radius: .5rem; background: #fff; color: #102e35; }
.geofence-form small { display: block; color: #789087; font-size: .68rem; line-height: 1.45; }
.placement-activation { display: grid; gap: .55rem; margin-bottom: .8rem; }
.placement-activation h3 { margin: 0; color: #123c39; font-size: .9rem; }
.placement-activation hr { width: 100%; margin: .35rem 0; border: 0; border-top: 1px solid #dce9e4; }
.placement-preview { min-height: 2rem; padding: .55rem; border-radius: .45rem; background: #f2f8f5; color: #45665c; font-size: .7rem; line-height: 1.4; }
.placement-activation button { width: 100%; min-height: 2.55rem; }
.secondary-button { border: 1px solid #9bc8ba; border-radius: .55rem; background: #fff; color: #087b5b; cursor: pointer; font-weight: 800; }
.placement-activation button:disabled { cursor: not-allowed; opacity: .5; }
.map-refresh { padding: .7rem 1rem; border: 1px solid #b9d6cc; border-radius: .7rem; background: #fff; color: #087b5b; cursor: pointer; font-weight: 800; }
.map-alerts { display: grid; gap: .5rem; margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid #dce8e4; border-radius: .8rem; background: #fff; color: #688078; font-size: .78rem; }
.map-alerts:has(a) { border-color: #efb5b5; background: #fff2f2; }
.map-alerts a { color: #aa2525; font-weight: 850; text-decoration: none; }
.map-panel { margin-bottom: 1.2rem; }
#cage-map { width: 100%; min-height: clamp(24rem, 58vh, 42rem); background: #dce9e4; }
.map-message { padding: .7rem 1rem; border-top: 1px solid #e3ece9; color: #688078; font-size: .74rem; }
.unlocated-panel { margin-bottom: 2rem; }
.map-list { display: grid; gap: .5rem; padding: 1rem 1.35rem; color: #688078; font-size: .78rem; }
.map-list a { color: #087b5b; font-weight: 750; text-decoration: none; }
.cage-map-marker span { display: block; width: 1.45rem; height: 1.45rem; border: .25rem solid #fff; border-radius: 50%; box-shadow: 0 .2rem .7rem #102e3566; }
.cage-map-marker .green { background: #159b70; }
.cage-map-marker .red { background: #d13e3e; animation: map-alert 1.2s infinite alternate; }
.cage-map-marker .amber { background: #dc9b2b; }
.cage-map-marker .gray { background: #7e8d88; }
.map-popup { display: grid; gap: .3rem; min-width: 13rem; color: #173a32; }
.map-popup span, .map-popup small { display: block; }
.map-popup a { margin-top: .35rem; color: #087b5b; font-weight: 800; text-decoration: none; }
@keyframes map-alert { to { box-shadow: 0 0 0 .5rem #d13e3e33; } }
.form-message { min-height: 1.2rem; color: #b42318; font-size: .75rem; }
.health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.health-card { display: flex; gap: 1rem; align-items: center; padding: 1.5rem; border: 1px solid #dfeae6; border-radius: 1rem; background: #fff; }
.health-card > span { color: #19a874; text-shadow: 0 0 .8rem #19a87488; }
.health-card div { display: grid; }
.health-card small, .health-card em { color: #82968f; font-size: .72rem; font-style: normal; }
.health-card strong { margin: .2rem 0; font-size: 1.2rem; }
@media (max-width: 1100px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .menu-open .sidebar { transform: translateX(0); }
  .app-main { width: 100%; margin-left: 0; }
  .menu-button { display: block; }
  .dashboard-grid, .management-grid, .health-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .metric-grid { grid-template-columns: 1fr; } .date-chip { display: none; } }
@media (max-width: 620px) {
  .record-list li { align-items: flex-start; }
  .tenant-login-form { grid-template-columns: 1fr; }
  .tenant-edit-form { grid-template-columns: 1fr; }
}
.detail-body { display: block; }
.detail-shell { min-height: 100vh; background: #f2f7f5; color: #102e35; }
.detail-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 4.4rem; padding: 0 clamp(1rem, 4vw, 3rem); border-bottom: 1px solid #dbe7e3; background: #fff; color: #688078; font-size: .82rem; }
.detail-topbar a { color: #087b5b; font-weight: 800; text-decoration: none; }
.detail-content { width: min(86rem, 100%); margin: auto; padding: clamp(1.4rem, 4vw, 3rem); }
.operation-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(19rem, .7fr); gap: 1.2rem; margin-bottom: 1.2rem; }
.video-panel { min-height: 26rem; overflow: hidden; border-radius: 1rem; background: #071e29; box-shadow: 0 .8rem 2.5rem #102e3524; }
.video-panel { position: relative; }
.video-panel video { display: none; width: 100%; min-height: 26rem; max-height: 36rem; object-fit: contain; background: #020b10; }
.video-panel video.active { display: block; }
.video-placeholder { min-height: 26rem; display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 2rem; color: #dff5ed; text-align: center; background: radial-gradient(circle at center, #0d4b46 0, #071e29 65%); }
.video-placeholder[hidden] { display: none; }
.video-placeholder > span { color: #55d9a3; font-size: 2.4rem; }
.video-placeholder small { max-width: 24rem; color: #84a99f; }
.video-placeholder button, .stop-stream { border: 0; border-radius: .7rem; padding: .7rem 1rem; background: #16a47b; color: #fff; font-weight: 800; cursor: pointer; }
.video-placeholder button:disabled { cursor: not-allowed; opacity: .45; }
.stop-stream { position: absolute; right: 1rem; bottom: 1rem; background: #a93232; }
.insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 1.2rem 0; }
.data-placeholder { display: grid; gap: .65rem; min-height: 5rem; color: #688078; }
.data-placeholder > strong { color: #102e35; font-size: 1.3rem; }
.data-placeholder > small { color: #688078; }
.map-link { width: fit-content; color: #087b5b; font-weight: 800; text-decoration: none; }
.report-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.report-metrics > div { display: grid; gap: .15rem; padding: .7rem; border-radius: .65rem; background: #f2f7f5; }
.report-metrics strong { color: #087b5b; font-size: 1.25rem; }
.report-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .35rem; font-size: .72rem; }
.event-history { margin-bottom: 1.2rem; }
.event-list { display: grid; }
.event-row { display: grid; grid-template-columns: minmax(11rem, 1fr) 8rem minmax(11rem, auto); gap: 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid #e4eeea; font-size: .78rem; }
.event-row:last-child { border-bottom: 0; }
.event-row span::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 50%; background: #3b9f7f; }
.event-row span[data-severity="WARNING"]::before { background: #e49b2f; }
.event-row span[data-severity="CRITICAL"]::before { background: #d84a4a; }
.event-row time { color: #688078; text-align: right; }
@media (max-width: 760px) {
  .insight-grid { grid-template-columns: 1fr; }
  .event-row { grid-template-columns: 1fr auto; }
  .event-row time { grid-column: 1 / -1; text-align: left; }
}
.control-panel { padding-bottom: 1.2rem; }
.door-state { display: grid; justify-items: center; padding: 1.7rem 1rem 1rem; }
.door-state small { color: #789087; }
.door-state strong { margin-top: .3rem; color: #087b5b; font-size: 1.7rem; }
.control-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; padding: 0 1.2rem; }
.control-buttons button { min-height: 3rem; border: 0; border-radius: .65rem; background: #087b5b; color: #fff; cursor: pointer; font-weight: 800; }
.control-buttons .danger { grid-column: 1 / -1; background: #b42318; }
.control-buttons button:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .45; }
.control-note, .command-feedback { margin: .8rem 1.2rem 0; color: #6f847d; font-size: .78rem; line-height: 1.5; }
.command-feedback { min-height: 1.2rem; color: #087b5b; font-weight: 700; }
.telemetry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.command-history { margin-bottom: 2rem; }
@media (max-width: 900px) {
  .operation-grid { grid-template-columns: 1fr; }
  .telemetry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) { .telemetry-grid { grid-template-columns: 1fr; } }
.modal-open { overflow: hidden; }
.activation-modal[hidden] { display: none; }
.activation-modal { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 1rem; }
.activation-modal__backdrop { position: absolute; inset: 0; background: #061b20c7; backdrop-filter: blur(3px); }
.activation-dialog { position: relative; width: min(48rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; border-radius: 1.1rem; background: #fff; box-shadow: 0 1.5rem 5rem #001b2055; outline: none; }
.activation-dialog > header { position: sticky; z-index: 1; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.5rem 1rem; border-bottom: 1px solid #deebe6; background: #fff; }
.activation-dialog h2 { margin: .2rem 0 0; color: #102e35; }
.activation-close { width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; background: #edf5f2; color: #285349; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.activation-callout { display: grid; gap: .3rem; margin: 1.2rem 1.5rem .6rem; padding: 1rem; border-left: .3rem solid #19a874; border-radius: .7rem; background: #eaf8f2; color: #285349; }
.activation-callout strong { color: #087b5b; }
.activation-steps { display: grid; gap: .85rem; margin: 1.1rem 1.5rem; padding-left: 2rem; }
.activation-steps li { padding-left: .3rem; color: #087b5b; font-weight: 800; }
.activation-steps li span { display: block; margin-top: .18rem; color: #58736a; font-size: .86rem; font-weight: 500; line-height: 1.5; }
.activation-note { margin: 0 1.5rem 1.2rem; padding: .85rem 1rem; border-radius: .7rem; background: #fff6df; color: #725414; font-size: .84rem; line-height: 1.5; }
.activation-dialog > footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: .65rem; padding: 1rem 1.5rem; border-top: 1px solid #deebe6; background: #fff; }
.secondary-button { border: 1px solid #b9d3ca; border-radius: .65rem; padding: .72rem 1rem; background: #fff; color: #087b5b; cursor: pointer; font-weight: 800; }
@media (max-width: 520px) {
  .activation-modal { padding: 0; }
  .activation-dialog { width: 100%; max-height: 100vh; min-height: 100vh; border-radius: 0; }
  .activation-dialog > footer { display: grid; }
}
.device-config-details { margin-top: .65rem; }
.device-config-details > summary { display: grid; grid-template-columns: 2.35rem 1fr auto; align-items: center; gap: .7rem; min-width: 15rem; padding: .72rem .8rem; border: 1px solid #cfe1db; border-radius: .75rem; background: #f6faf8; color: #153e36; cursor: pointer; list-style: none; transition: border-color .2s, background .2s, box-shadow .2s; }
.device-config-details > summary::-webkit-details-marker { display: none; }
.device-config-details > summary:hover { border-color: #7dbba7; background: #eef8f4; box-shadow: 0 .35rem 1rem #0a725414; }
.device-config-details[open] > summary { border-color: #159b70; background: #e9f7f1; }
.config-summary-icon { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .65rem; background: #0b7c5d; color: #fff; font-size: 1rem; }
.device-config-details > summary strong, .device-config-details > summary small { display: block; }
.device-config-details > summary strong { font-size: .88rem; }
.device-config-details > summary small { margin-top: .12rem; color: #6c837b; font-size: .7rem; font-weight: 500; }
.config-summary-arrow { color: #0b7c5d; font-size: 1.45rem; transform: rotate(90deg); transition: transform .2s; }
.device-config-details[open] .config-summary-arrow { transform: rotate(-90deg); }
.config-modal-open { overflow: hidden; }
.device-config-details[open]::before { content: ""; position: fixed; z-index: 1999; inset: 0; background: #061b20b8; backdrop-filter: blur(4px); }
.device-config-form { position: fixed; z-index: 2000; inset: 1.2rem; width: min(70rem, calc(100vw - 2.4rem)); max-height: calc(100vh - 2.4rem); margin: auto; padding: clamp(1rem, 2.5vw, 1.8rem); overflow-y: auto; border: 1px solid #d6e5e0; border-radius: 1rem; background: #f9fcfb; box-shadow: 0 1.6rem 5rem #001c1855; color: #163c34; }
.config-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.config-header h3 { margin: .2rem 0 .3rem; color: #123c34; font-size: 1.35rem; }
.config-header p { max-width: 43rem; margin: 0; color: #667d76; font-size: .84rem; line-height: 1.55; }
.config-header .config-refresh { flex: none; white-space: nowrap; }
.config-header-actions { display: flex; align-items: center; gap: .55rem; }
.config-close { display: grid; flex: none; place-items: center; width: 2.55rem; height: 2.55rem; border: 0; border-radius: 50%; background: #e9f1ee; color: #315d53; cursor: pointer; font-size: 1.45rem; line-height: 1; }
.config-close:hover { background: #dcebe5; color: #087b5b; }
.config-status-card { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .8rem; margin-bottom: 1rem; padding: .9rem 1rem; border: 1px solid #d6e4df; border-radius: .8rem; background: #f1f6f4; }
.config-status-dot { width: .72rem; height: .72rem; margin-top: .25rem; border-radius: 50%; background: #8da29b; box-shadow: 0 0 0 .25rem #8da29b22; }
.config-status-card.is-applied { border-color: #a9dcc9; background: #eaf8f2; }
.config-status-card.is-applied .config-status-dot { background: #12a36f; box-shadow: 0 0 0 .25rem #12a36f20; }
.config-status-card.is-pending { border-color: #ead49d; background: #fff8e7; }
.config-status-card.is-pending .config-status-dot { background: #d99520; }
.config-status-card.is-error { border-color: #efbbb6; background: #fff0ee; }
.config-status-card.is-error .config-status-dot { background: #c83d34; }
.config-status-title { display: block; color: #173f36; font-size: .9rem; }
.config-state { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .3rem 0 0; color: #607871; font-size: .74rem; }
.config-state span { display: inline-flex; gap: .25rem; }
.config-state b { color: #284f46; }
.config-state .config-error { flex-basis: 100%; color: #a62d27; font-weight: 700; }
.config-section-nav { display: flex; gap: .45rem; margin-bottom: 1rem; overflow-x: auto; scrollbar-width: thin; }
.config-section-nav button { flex: none; padding: .52rem .72rem; border: 0; border-radius: 999px; background: #eaf3f0; color: #386359; cursor: pointer; font-size: .72rem; font-weight: 750; }
.config-section-nav button:hover { background: #d9eee6; color: #087b5b; }
.device-config-details fieldset.config-section { min-width: 0; margin: 0 0 1rem; padding: 1.1rem; border: 1px solid #dbe8e3; border-radius: .9rem; background: #fff; scroll-margin-top: 1rem; }
.device-config-details .config-section legend { display: flex; align-items: center; gap: .7rem; width: auto; padding: 0 .45rem; color: #153e36; font-weight: 800; }
.device-config-details .config-section legend > span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; background: #e3f3ed; color: #087b5b; font-size: .72rem; }
.device-config-details .config-section legend div, .device-config-details .config-section legend small { display: block; }
.device-config-details .config-section legend small { margin-top: .08rem; color: #73877f; font-size: .7rem; font-weight: 500; }
.config-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.config-fields--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.config-fields > label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8.8rem, .75fr); align-items: center; gap: .8rem; min-width: 0; padding: .75rem; border: 1px solid #e1ebe7; border-radius: .7rem; background: #fbfdfc; color: #244c42; font-size: .78rem; font-weight: 750; }
.config-fields > label > span small { display: block; margin-top: .18rem; color: #798d86; font-size: .68rem; font-weight: 500; line-height: 1.35; }
.config-fields input, .config-fields select { width: 100%; min-width: 0; min-height: 2.55rem; border: 1px solid #c8dcd4; border-radius: .55rem; background: #fff; color: #173c34; }
.config-fields input { padding: .5rem .65rem; }
.config-fields select { padding: .5rem 2rem .5rem .65rem; }
.config-fields input:focus, .config-fields select:focus { outline: 0; border-color: #159b70; box-shadow: 0 0 0 .18rem #159b7018; }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 2.65rem; }
.input-suffix em { position: absolute; top: 50%; right: .65rem; color: #81948d; font-size: .68rem; font-style: normal; transform: translateY(-50%); pointer-events: none; }
.camera-profile-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-bottom: .8rem; }
.camera-profile-picker label { cursor: pointer; }
.camera-profile-picker input { position: absolute; opacity: 0; pointer-events: none; }
.camera-profile-picker label > span { display: block; min-height: 4.1rem; padding: .72rem; border: 1px solid #d9e7e2; border-radius: .7rem; background: #fbfdfc; transition: border-color .2s, background .2s, box-shadow .2s; }
.camera-profile-picker strong, .camera-profile-picker small { display: block; }
.camera-profile-picker strong { color: #244c42; font-size: .77rem; }
.camera-profile-picker small { margin-top: .2rem; color: #788c85; font-size: .66rem; }
.camera-profile-picker input:checked + span { border-color: #159b70; background: #e9f7f1; box-shadow: inset 0 0 0 1px #159b70; }
.tertiary-button { margin-top: .75rem; padding: .55rem .75rem; border: 0; border-radius: .55rem; background: #edf5f2; color: #2a6254; cursor: pointer; font-size: .72rem; font-weight: 750; }
.config-section--warning { border-color: #efdfb8 !important; }
.config-section--warning legend > span { background: #fff1cc !important; color: #8a6419 !important; }
.safety-note { display: flex; align-items: center; gap: .65rem; margin-bottom: .8rem; padding: .65rem .75rem; border-radius: .6rem; background: #fff7e4; color: #725720; font-size: .72rem; }
.safety-note strong { flex: none; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .8rem 0; padding: .8rem; border: 1px solid #e0e9e5; border-radius: .7rem; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { font-size: .8rem; }
.toggle-row small { margin-top: .18rem; color: #73877f; font-size: .68rem; }
.switch { position: relative; flex: none; width: 2.8rem; height: 1.55rem; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #aebdb8; cursor: pointer; transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #fff; box-shadow: 0 .1rem .3rem #0003; transition: transform .2s; }
.switch input:checked + span { background: #0b8965; }
.switch input:checked + span::after { transform: translateX(1.25rem); }
.switch input:focus-visible + span { outline: .18rem solid #159b7040; outline-offset: .12rem; }
.config-actions { position: sticky; bottom: -.1rem; z-index: 2; display: grid; grid-template-columns: 1fr minmax(15rem, 20rem); align-items: center; gap: 1rem; margin: 0 -.4rem -.4rem; padding: .8rem; border: 1px solid #d7e5e0; border-radius: .8rem; background: #ffffffed; box-shadow: 0 -.5rem 1.5rem #153f3210; backdrop-filter: blur(8px); }
.config-actions .form-message { color: #a62d27; font-size: .78rem; }
.config-actions .primary-button { display: grid; gap: .1rem; min-height: 3rem; margin: 0; }
.config-actions .primary-button small { color: #bde8d8; font-size: .62rem; font-weight: 500; }
@media (max-width: 1050px) {
  .config-fields--three { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .device-config-form { inset: 0; width: 100%; max-height: 100vh; padding: .9rem; border: 0; border-radius: 0; }
  .config-header { align-items: flex-start; }
  .config-fields { grid-template-columns: 1fr; }
  .camera-profile-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .config-actions { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .config-fields > label { grid-template-columns: 1fr; gap: .5rem; }
  .config-header p { display: none; }
  .config-header .config-refresh { padding-inline: .65rem; font-size: .7rem; }
  .device-config-details > summary { min-width: 13rem; }
}
.capture-card {display:grid;grid-template-columns:minmax(180px,320px) 1fr;gap:18px;padding:16px 0;border-bottom:1px solid #e4ece9}
.capture-card img {width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#e7efec}
.capture-form {display:grid;gap:9px}.capture-form label{display:grid;gap:4px}.capture-form textarea{min-height:72px}.capture-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:700px){.capture-card{grid-template-columns:1fr}}