:root {
  --navy: #0b2d4d;
  --navy-2: #123f68;
  --indigo: #2438f4;
  --violet: #7112be;
  --page: #f3f5f9;
  --panel: #ffffff;
  --line: #e6e9ef;
  --muted: #8b93a5;
  --text: #343a48;
  --sidebar: 200px;
  --topbar: 64px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: var(--page); font-size: 14px; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.shell { min-width: 980px; height: 100%; display: grid; grid-template-columns: var(--sidebar) 1fr; grid-template-rows: var(--topbar) 1fr; transition:grid-template-columns .22s ease; }
.sidebar { grid-row: 1 / -1; background: linear-gradient(180deg, #071f36 0%, var(--navy) 48%, #103b62 100%); color: #a9c7df; overflow: hidden auto; border-right: 1px solid #174d79; box-shadow: 5px 0 18px rgba(4,26,45,.22); }
.brand { height: var(--topbar); display: flex; align-items: center; justify-content: center; gap: 10px; border-bottom: 1px solid #174667; color: #fff; background: rgba(255,255,255,.035); }
.brand-cn { font-size: 17px; line-height: 17px; font-weight: 750; letter-spacing: 1px; white-space:nowrap; }.brand-en { font-size: 6px; letter-spacing: 2.2px; opacity: .9; white-space:nowrap; }
.telecom-mark { position: relative; display: inline-block; width: 40px; height: 40px; flex: 0 0 auto; }
.telecom-mark::before, .telecom-mark::after, .telecom-mark i, .telecom-mark b { content:""; position:absolute; display:block; border:3px solid currentColor; border-radius:50%; }
.telecom-mark::before { width:30px; height:30px; left:5px; top:5px; border-left-color:transparent; transform:rotate(-34deg); }
.telecom-mark::after { width:19px; height:19px; left:10px; top:10px; border-right-color:transparent; transform:rotate(42deg); }
.telecom-mark i { width:8px; height:8px; left:16px; top:16px; border-width:2px; background:currentColor; }
.telecom-mark b { width:6px; height:6px; left:28px; top:5px; border:0; background:currentColor; }
.sidebar-mark { width:34px; height:34px; color:#7bc9f5; transform:scale(.85); }
.nav { padding: 4px; }
.nav-item, .nav-group-label { height: 44px; padding: 0 20px; display: flex; align-items: center; gap: 12px; color: #abc5da; text-decoration: none; border-left: 3px solid transparent; user-select: none; }
.nav-item:hover, .nav-group-label:hover { color: #fff; background: rgba(75,158,213,.16); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, #176ca3, #268fc8); border-left-color: #71cef9; box-shadow: 0 5px 16px rgba(0,12,25,.25); }
.nav-group-label { justify-content: space-between; margin-top: 2px; }
.nav-group-label.section { height: 40px; color: #c0d8e9; background: rgba(3,18,32,.28); margin-top: 4px; }
.nav-left { display: flex; align-items: center; gap: 12px; }.ico { width: 17px; text-align: center; font-size: 17px; opacity: .9; }
.chev { font-size: 12px; transition: transform .2s; }.nav-group.open .chev { transform: rotate(180deg); }
.nav-children { display: none; }.nav-group.open .nav-children { display: block; }
.nav-children .nav-item { padding-left: 47px; font-size: 13px; }

.topbar { grid-column: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: #fff; border-bottom: 1px solid #eceff4; }
.top-left { display: flex; align-items: center; gap: 22px; }.hamburger { width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:5px;background:transparent;font-size:23px;color:#273142;transition:background .16s,color .16s,transform .16s}.hamburger:hover{background:#eef5fb;color:#176ca3}.hamburger:active{transform:scale(.94)}.org-switch { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.account-area { position: relative; display: flex; align-items: center; }
.avatar { width: 36px; height: 36px; padding: 0; border: 1px solid #b9d3eb; border-radius: 50%; background: #e8f2fb; display: grid; place-items: center; color: #176ca3; transition: background .18s, border-color .18s, box-shadow .18s; }
.avatar:hover, .avatar[aria-expanded="true"] { border-color: #73add3; background: #dcecf8; box-shadow: 0 0 0 3px rgba(23,108,163,.1); }
.avatar:focus-visible, .account-action:focus-visible { outline: 2px solid #268fc8; outline-offset: 2px; }
.user-icon { position: relative; display: block; width: 20px; height: 20px; }
.user-icon::before { content: ""; position: absolute; left: 6px; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.user-icon::after { content: ""; position: absolute; left: 2px; bottom: 1px; width: 16px; height: 8px; border-radius: 9px 9px 5px 5px; background: currentColor; }
.account-menu { position: absolute; z-index: 100; top: 44px; right: 0; width: 216px; overflow: hidden; border: 1px solid #e0e7ef; border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(13,45,77,.16); color: #3d4a5c; animation: accountMenuIn .16s ease-out; }
.account-menu[hidden] { display: none; }
.account-summary { height: 66px; display: flex; align-items: center; gap: 12px; padding: 0 17px; background: linear-gradient(135deg, #0b416d, #176ca3); color: #fff; }
.account-summary strong { font-size: 16px; font-weight: 600; letter-spacing: .2px; }
.menu-avatar { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.95); color: #176ca3; box-shadow: 0 1px 4px rgba(0,32,58,.16); }
.menu-avatar .user-icon { width: 20px; height: 20px; }
.account-action { width: 100%; height: 50px; display: flex; align-items: center; justify-content: flex-start; gap: 13px; margin: 0; padding: 0 19px; border: 0; border-bottom: 1px solid #edf1f5; border-radius: 0; background: #fff; color: #465468; font-size: 14px; text-align: left; transition: background .16s, color .16s, padding-left .16s; }
.account-action:hover { padding-left: 22px; background: #f2f7fb; color: #176ca3; }
.account-action:last-child { border-bottom: 0; }
.lock-icon{position:relative;width:17px;height:15px;flex:0 0 17px;margin-top:4px;border:1.8px solid currentColor;border-radius:3px}
.lock-icon::before{content:"";position:absolute;left:50%;top:-9px;width:9px;height:9px;transform:translateX(-50%);border:1.8px solid currentColor;border-bottom:0;border-radius:7px 7px 0 0}
.lock-icon::after{content:"";position:absolute;left:50%;top:4px;width:3px;height:5px;transform:translateX(-50%);border-radius:2px;background:currentColor}
.logout-action::before { content: "↪"; width: 15px; flex: 0 0 15px; font-size: 18px; line-height: 1; text-align: center; transform: rotate(180deg); }
@keyframes accountMenuIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.account-toast{position:fixed;z-index:120;left:50%;top:82px;transform:translateX(-50%);padding:11px 18px;border-radius:3px;background:#30384a;color:#fff;box-shadow:0 8px 24px rgba(14,22,42,.2);animation:dialogIn .15s ease-out}
.workspace { grid-column: 2; position: relative; overflow: hidden; padding: 8px; }

.page { height: 100%; display: flex; gap: 8px; min-width: 0; }
.org-panel, .camera-panel { flex: 0 0 216px; background: #fff; border-radius: 3px; display: flex; flex-direction: column; min-width: 0; }
.panel-title { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.collapse-mark { font-size: 25px; font-weight: 200; color: #4e5563; }
.mini-actions { display: flex; gap: 18px; color: var(--indigo); padding: 14px 16px 4px; font-size: 18px; }
.searchbox { margin: 12px; display: flex; height: 40px; border: 1px solid #dcdfe6; background: #fff; }
.searchbox input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 0 12px; color: #555; }.searchbox button { width: 42px; border: 0; border-left: 1px solid #dcdfe6; background: white; color: #7b8493; }
.tree { flex: 1; overflow: auto; padding: 3px 12px 15px; scrollbar-width: thin; }.tree-root { padding: 8px 4px; font-weight: 600; }.tree-item { padding: 10px 4px 10px 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #535b6a; }.tree-item.selected { background: #f0efff; color: #3843d8; }

.content { flex: 1; min-width: 0; min-height: 0; background: #fff; border-radius: 3px; display: flex; flex-direction: column; overflow: hidden; }
.content.transparent { background: transparent; }
.tabs { height: 54px; display: flex; align-items: stretch; gap: 24px; padding: 0 20px; border-bottom: 1px solid var(--line); background: #fff; }
.tab { min-width: 140px; border: 0; background: transparent; border-bottom: 2px solid transparent; color: #333; }.tab.active { color: var(--indigo); border-bottom-color: var(--indigo); font-weight: 600; }
.toolbar { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #edf0f5; background: #fff; }
.toolbar .push { margin-left: auto; }.field, .toolbar select { height: 40px; min-width: 160px; border: 1px solid #dcdfe6; background: #fff; padding: 0 12px; outline: none; color: #6a7180; }.field.wide { min-width: 260px; }
.date-range { height: 40px; display: flex; align-items: center; border: 1px solid #dcdfe6; background: white; }.date-range input { height: 38px; width: 174px; border: 0; padding: 0 12px; outline: 0; }.date-range span { color: #9da4b2; }
.btn { height: 40px; padding: 0 19px; border: 1px solid #d8dce4; border-radius: 2px; background: #fff; color: #4b5260; }.btn.primary { color: white; border-color: var(--indigo); background: var(--indigo); }.btn:disabled { color: #adb3bf; background: #f5f5f5; }.link { color: var(--indigo); border: 0; background: transparent; padding: 5px; }

.table-wrap { flex: 1; min-height: 0; overflow: auto; background: white; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { height: 48px; text-align: left; padding: 0 16px; background: #fafafa; color: #303640; font-weight: 600; border-bottom: 1px solid #eef0f4; }
td { height: 58px; padding: 0 16px; border-bottom: 1px solid #edf0f3; color: #4d5563; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.status { color: #17a86b; }.actions { color: var(--indigo); }.pagination { height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: white; border-top: 1px solid var(--line); }.pagination .page-no { margin-left: auto; border: 1px solid #dfe2e9; padding: 8px 12px; color: var(--indigo); }

.empty { flex: 1; display: grid; place-items: center; min-height: 260px; background: #f7f8fb; color: #a3a9b5; }
.empty-box { text-align: center; }.empty-art { width: 62px; height: 45px; margin: 0 auto 12px; border: 2px solid #e3e5eb; border-radius: 8px; position: relative; background: linear-gradient(145deg,#fdfdff,#f1f2ff); }.empty-art::before { content:""; position:absolute; width:24px; height:24px; left:18px; top:-14px; border-radius:50%; background:#d9d9ff; box-shadow:-16px 10px 0 -5px #c8caff,16px 10px 0 -5px #c8caff; }

.alarm-content .tabs{height:52px}.alarm-content .tab{min-width:170px}.alarm-toolbar{flex:0 0 auto;overflow-x:auto;white-space:nowrap}.alarm-toolbar .date-range{flex:0 0 398px}.alarm-toolbar select{min-width:158px}.alarm-search{width:42px;flex:0 0 42px;padding:0;font-size:18px}
.alarm-filter-error{color:#e5484d;font-size:12px;line-height:38px}
.alarm-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(205px,1fr));grid-auto-rows:202px;align-content:start;gap:12px;padding:14px;background:#f5f6f8}.alarm-card{min-width:0;height:202px;display:flex;flex-direction:column;padding:10px 10px 0;border:0;background:#fff;color:#3f4652;text-align:center;box-shadow:0 0 0 1px #f0f1f4}.alarm-card img{width:100%;height:121px;object-fit:cover;display:block;background:#dfe5e3;pointer-events:none;user-select:none}.alarm-label{height:31px;display:flex;align-items:center;justify-content:center;margin-top:6px;background:#fff1f2;color:#e6525f;font-weight:600}.alarm-card strong{height:34px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;white-space:nowrap}.alarm-no-result{grid-column:1/-1;min-height:300px;display:grid;place-items:center;color:#9aa1ad}
.alarm-empty{flex:1;min-height:0;display:flex;background:#f5f6f8}.alarm-empty>.empty{width:100%;min-height:0}
.alarm-pagination{height:56px;flex:0 0 56px;display:flex;align-items:center;gap:8px;padding:0 15px;border-top:1px solid var(--line);background:#fff}.alarm-pagination select{height:34px;border:1px solid #dcdfe6;background:#fff;padding:0 8px}.alarm-pages{margin-left:auto;display:flex;gap:5px}.alarm-pages button{width:34px;height:34px;border:1px solid #e0e3e9;background:#fff;color:#596171}.alarm-pages button.active{border-color:var(--indigo);background:var(--indigo);color:#fff}
.alarm-preview-modal{width:760px}.alarm-preview{padding:20px;overflow:auto}.alarm-preview>img{display:block;width:100%;max-height:430px;object-fit:cover;background:#dfe5e3}.alarm-preview dl{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:15px 0 0;background:#e8eaf0;border:1px solid #e8eaf0}.alarm-preview dl>div{min-height:58px;display:grid;grid-template-columns:125px 1fr;align-items:center;background:#fff}.alarm-preview dt{height:100%;display:flex;align-items:center;padding:0 14px;background:#fafafa;color:#868e9b}.alarm-preview dd{margin:0;padding:0 15px;line-height:1.5}

.video-layout { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }.video-canvas { flex: 1; min-height: 310px; background: #080840; display: grid; place-items: center; color: #2c3ef4; font-size: 19px; }.video-controls { height: 67px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 18px; color: #abb0bb; }.round-control { border: 0; width: 38px; height: 38px; border-radius: 50%; color: inherit; font-size: 22px; }.camera-panel .tree { padding-top: 0; }.camera-footer { height: 60px; display: flex; align-items: center; justify-content: space-around; border-top: 1px solid var(--line); font-size: 20px; }.playback-form { padding: 8px 12px; border-top: 1px solid var(--line); }.playback-form label { display:block; margin: 10px 0; }.playback-form input, .playback-form button { width: 100%; height: 40px; margin-bottom: 10px; }
.timeline { height: 46px; position: relative; background: repeating-linear-gradient(90deg,#d8d8ff 0 1px,transparent 1px 24px),#bfc1ff; color:#fff; overflow:hidden; }.timeline::after { content:"08:00:00"; position:absolute; left:55%; top:6px; background:#d9d9ff; color:#fff; border-radius:12px; padding:3px 16px; }

.overview { flex:1; overflow:auto; padding:16px; background:#f3f5f9; }.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(180px,1fr)); gap:12px; }.metric { background:#fff; border-radius:3px; padding:22px; border-top:3px solid var(--indigo); }.metric b { display:block; font-size:28px; margin:12px 0 3px; }.metric span { color:var(--muted); }.overview-row { display:grid; grid-template-columns:1.4fr 1fr; gap:12px; margin-top:12px; }.overview-card { min-height:270px; background:#fff; padding:18px; }.card-title { font-size:16px; font-weight:600; margin-bottom:22px; }.bars { display:flex; height:170px; align-items:flex-end; gap:20px; padding:15px; }.bar { flex:1; background:linear-gradient(#5f6dff,#2638f4); min-height:15px; position:relative; }.bar::after { content:attr(data-label); position:absolute; left:50%; bottom:-27px; transform:translateX(-50%); white-space:nowrap; color:#8b93a5; font-size:12px; }
.ring { width:150px; height:150px; margin:32px auto; border-radius:50%; background:conic-gradient(var(--indigo) 0 76%,#edf0f6 76%); position:relative; }.ring::after { content:"76%\A在线率"; white-space:pre; position:absolute; inset:22px; border-radius:50%; background:white; display:grid; place-items:center; text-align:center; font-size:20px; line-height:28px; }
.login-page { width:100vw; height:100vh; min-width:900px; min-height:438px; display:flex; flex-direction:column; position:relative; overflow:hidden; background:#f7f9fe; color:#41465f; }
.login-card { display:flex; flex-direction:row; width:900px; height:438px; margin:calc(50vh - 250px) auto; overflow:hidden; background:#fff; box-shadow:0 0 10px rgba(29,51,255,.1); border-radius:4px; }
.login-visual { flex:0 1 61%; position:relative; overflow:hidden; color:white; background:linear-gradient(to bottom right,#1d84ff,#1d53ff); }
.visual-grid { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(#fff2 1px,transparent 1px),linear-gradient(90deg,#fff2 1px,transparent 1px); background-size:34px 34px; transform:perspective(360px) rotateX(63deg) scale(1.35); transform-origin:center bottom; }
.visual-orbit { position:absolute; left:50%; top:50%; border:1px solid #ffffff55; border-radius:50%; transform:translate(-50%,-50%) rotate(-12deg); }.orbit-one{width:390px;height:155px}.orbit-two{width:290px;height:290px}
.visual-building { position:absolute; bottom:68px; width:82px; background:linear-gradient(180deg,#a8d8ff55,#fff2); border:1px solid #ffffff55; box-shadow:0 18px 35px #0639b855; clip-path:polygon(50% 0,100% 22%,100% 100%,0 100%,0 22%); }.building-one{height:150px;left:75px}.building-two{height:215px;left:225px;width:104px}.building-three{height:128px;right:62px}
.visual-core { position:absolute; left:220px; top:127px; width:110px; height:110px; border:2px solid #fff8; border-radius:50%; box-shadow:0 0 30px #b8e4ff88,inset 0 0 25px #fff4; animation:loginPulse 3s ease-in-out infinite; }.visual-core span{position:absolute;inset:19px;border:2px solid #fff;border-radius:50%}.visual-core i,.visual-core b{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 14px #fff}.visual-core i{left:9px;top:45px}.visual-core b{right:7px;top:23px}@keyframes loginPulse{50%{transform:scale(1.035);box-shadow:0 0 48px #b8e4ffaa,inset 0 0 25px #fff6}}
.visual-copy { position:absolute; left:42px; bottom:29px; display:flex; flex-direction:column; gap:4px; }.visual-copy strong{font-size:22px;font-weight:600;letter-spacing:2px}.visual-copy span{font-size:12px;opacity:.78;letter-spacing:1px}
.login-area { flex:0 1 39%; background:#fff; }.login-operate { position:relative; width:240px; height:100%; margin:0 auto; padding-top:47px; }
.login-logo { margin:0 auto; width:200px; height:41px; display:flex; align-items:center; justify-content:center; gap:9px; color:#1d33ff; }.login-logo .telecom-mark{width:38px;height:38px}.login-logo strong{font-size:21px;white-space:nowrap;letter-spacing:1px}
.login-form { margin-top:50px; position:relative; }.login-field { height:40px; display:flex; align-items:center; border-bottom:1px solid #dfe3eb; transition:border-color .2s; }.login-field:focus-within{border-bottom-color:#1d33ff}.field-icon{width:25px;color:#a4abb9;text-align:left;font-size:17px}.login-field input{flex:1;min-width:0;height:39px;border:0;border-radius:0;padding:0;color:#41465f;background:transparent;outline:0}.login-field input:focus{border:0}.eye-btn{width:28px;height:38px;margin:0;padding:0;border:0;background:transparent;color:#a3aab7}.eye-btn:hover{background:transparent;color:#1d33ff}
.login-error { height:24px; padding-top:3px; color:#f6493f; font-size:12px; }.login-submit { width:100%; height:40px; margin:8px 0 0; border:0; border-radius:2px; color:#fff; background:#1d33ff; box-shadow:0 4px 12px #1d33ff33; }.login-submit:hover{background:#1428eb}.forget-btn{position:absolute;right:0;bottom:-45px;margin:0;padding:0;border:0;background:transparent;color:#1d33ff;font-size:12px}.forget-btn:hover{background:transparent}.login-copyright{position:absolute;bottom:16px;width:100%;text-align:center;color:#41465f;font-size:12px}

.filter-panel{background:#fff;border-bottom:1px solid var(--line)}
.filter-grid{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:14px 24px;padding:16px 18px 14px}
.filter-item{display:flex;align-items:center;gap:10px;min-width:0}.filter-item>span{flex:0 0 84px;text-align:right;color:#5b6270}.filter-item input,.filter-item select{height:36px;min-width:0;width:100%;border:1px solid #dcdfe6;padding:0 10px;background:#fff;color:#646b78;outline:0}
.filter-buttons{display:flex;gap:10px;align-items:center;justify-content:flex-end}.filter-buttons .btn{height:36px}.action-bar{display:flex;align-items:center;gap:9px;padding:12px 16px;border-top:1px solid #eff1f5;overflow:auto}.action-bar .btn{height:34px;padding:0 14px;white-space:nowrap}
.btn.ghost{border-color:transparent;background:transparent;color:#4c55e8}.chip{display:inline-block;min-width:52px;padding:3px 9px;border-radius:2px;text-align:center;font-size:12px}.chip.green{color:#0e9a64;background:#eaf8f2}.chip.blue{color:#334be8;background:#edf0ff}.chip.red{color:#ed4d49;background:#fff0ef}
.subscribe-tools select{min-width:150px;height:40px;border:1px solid #dcdfe6;padding:0 12px;background:#fff}.select-row{height:43px;display:flex;align-items:center;gap:8px;padding:0 20px;border-bottom:1px solid #edf0f4}

.person-grid{flex:1;min-height:0;overflow:auto;padding:14px 18px;display:grid;grid-template-columns:repeat(3,minmax(245px,1fr));grid-auto-rows:136px;gap:12px;background:#f7f8fb}
.person-card{position:relative;display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border:1px solid #e8eaf0;border-radius:3px}.person-card>input{position:absolute;left:10px;top:10px}.person-avatar{width:84px;height:100px;flex:0 0 auto;display:grid;place-items:end center;overflow:hidden;background:linear-gradient(145deg,#dfe6f8,#9eafd3);border-radius:2px}.person-avatar span{width:56px;height:67px;position:relative;border-radius:28px 28px 8px 8px;background:#7d8ead}.person-avatar span::before{content:"";position:absolute;width:36px;height:36px;left:10px;top:-28px;border-radius:50%;background:#7d8ead}.person-avatar.tone-1{background:linear-gradient(145deg,#efe6dc,#c1a98f)}.person-avatar.tone-1 span,.person-avatar.tone-1 span::before{background:#8d7966}.person-avatar.tone-2{background:linear-gradient(145deg,#d8eeee,#83b4ba)}.person-avatar.tone-2 span,.person-avatar.tone-2 span::before{background:#557e85}.person-avatar.tone-3{background:linear-gradient(145deg,#ece4f6,#b89fd0)}.person-avatar.tone-3 span,.person-avatar.tone-3 span::before{background:#7d6993}
.person-info{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0}.person-id{padding:3px 9px;border-radius:10px;background:#eef1ff;color:#3048de;font-size:11px}.person-info strong{font-size:15px}.person-info small{color:#8d95a4}
.person-photo{width:84px;height:100px;flex:0 0 auto;display:block;object-fit:cover;border-radius:2px;background:#e7ebf2}.person-pagination{height:56px;display:flex;align-items:center;gap:8px;padding:0 16px;border-top:1px solid var(--line);background:#fff}.person-pagination>div{margin-left:auto;display:flex;align-items:center;gap:5px}.person-pagination button{width:32px;height:32px;border:1px solid #e0e3e9;background:#fff;color:#596171}.person-pagination button.active{border-color:var(--indigo);background:var(--indigo);color:#fff}.person-pagination select{height:32px;border:1px solid #dcdfe6;background:#fff}
.person-group-layout{display:flex;flex:1;min-height:0}.group-column{width:228px;flex:0 0 228px;border-right:1px solid var(--line);padding:14px 12px;background:#fff}.group-add{width:100%;margin-bottom:14px}.group-item{height:44px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;color:#5a6270}.group-item.active{background:#f0efff;color:#3344df}.group-content{flex:1;min-width:0;display:flex;flex-direction:column}

.product-layout{height:100%;display:flex;gap:8px;min-width:0}.product-main{flex:1}.product-detail{width:310px;flex:0 0 310px;background:#fff;border-radius:3px;padding:22px 20px;overflow:auto}.product-detail h3{margin:0 0 12px;font-size:18px;color:#303644}.product-desc{margin:0;padding-bottom:20px;line-height:1.8;color:#777f8e;border-bottom:1px solid var(--line)}.current-version{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px;padding:19px 0;border-bottom:1px solid var(--line)}.current-version span{color:#8b93a2}.current-version b{grid-row:2;font-size:22px;color:#303aee}.current-version em{grid-row:2;font-style:normal;font-size:11px;color:#16a36d;background:#eaf8f2;padding:3px 7px;border-radius:2px}.detail-list{padding:12px 0;border-bottom:1px solid var(--line)}.detail-list p{display:flex;margin:13px 0;line-height:1.45}.detail-list span{width:78px;flex:0 0 78px;color:#8d94a1}.version-note{padding:18px 0}.version-note p{line-height:1.7;color:#555e6d}.version-note small{color:#9aa1af}.info-note{min-height:42px;display:flex;align-items:center;padding:0 15px;color:#8d6a10;background:#fff9e7;border-bottom:1px solid #f5e7b7}
.auth-summary{display:flex;align-items:center;gap:22px;padding:22px 2px;border-bottom:1px solid var(--line)}.auth-donut{width:112px;height:112px;flex:0 0 auto;border-radius:50%;background:conic-gradient(#3045ec 0 34%,#e7eaf1 34%);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.auth-donut::before{content:"";position:absolute;inset:15px;border-radius:50%;background:#fff}.auth-donut b,.auth-donut span{position:relative;z-index:1}.auth-donut b{font-size:23px}.auth-donut span{font-size:11px;color:#8c94a3}.auth-legend p{white-space:nowrap;color:#737b89}.auth-legend i{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%}.auth-legend .unused{background:#e7eaf1}.auth-legend .used{background:#3045ec}.auth-legend b{margin-left:7px;color:#343b48}

.dialog-backdrop{position:fixed;z-index:50;inset:0;display:grid;place-items:center;background:rgba(10,20,39,.48);padding:25px}.dialog-card{width:520px;max-width:100%;max-height:90vh;display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 18px 55px #07132455;animation:dialogIn .15s ease-out}.dialog-card.wide{width:780px}.dialog-card header{height:58px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--line)}.dialog-card h3{margin:0;font-size:16px}.dialog-card header button{border:0;background:transparent;font-size:24px;color:#818896}.dialog-card form{min-height:0;display:flex;flex-direction:column}.dialog-body{padding:20px;overflow:auto;display:grid;grid-template-columns:1fr;gap:16px}.dialog-card.wide .dialog-body{grid-template-columns:1fr 1fr}.dialog-field{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px;min-width:0}.dialog-field>span{text-align:right;color:#565e6d}.dialog-field i{font-style:normal;color:#f34c47;margin-right:4px}.dialog-field input,.dialog-field select{width:100%;min-width:0;height:40px;border:1px solid #dcdfe6;padding:0 11px;background:#fff;outline:0}.dialog-field input:focus,.dialog-field select:focus{border-color:#3948ef}.upload-field{height:76px;border:1px dashed #b7bdca;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#3948ef;cursor:pointer}.upload-field input{display:none}.upload-field small{margin-top:5px;color:#9aa1ad}.dialog-card footer{height:66px;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 20px;border-top:1px solid var(--line)}@keyframes dialogIn{from{opacity:0;transform:translateY(-10px) scale(.985)}}

.route-actions{display:inline-flex;align-items:center;gap:5px}.route-actions button,.card-edit{border:0;background:transparent;color:var(--indigo);padding:3px;white-space:nowrap}.route-actions i{font-style:normal;color:#c9cdd6}.card-edit{position:absolute;right:9px;top:8px;font-size:12px;opacity:0}.person-card:hover .card-edit{opacity:1}
.secondary-page{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:3px;overflow:hidden}.secondary-head{min-height:72px;display:flex;align-items:center;gap:18px;padding:0 24px;border-bottom:1px solid var(--line)}.secondary-head>button{height:38px;border:0;border-right:1px solid var(--line);padding:0 20px 0 0;background:transparent;color:#434b5b;font-size:15px}.secondary-head span{display:block;margin-bottom:5px;color:#9aa1ad;font-size:11px}.secondary-head h2{margin:0;font-size:17px}.step-strip{height:64px;display:flex;align-items:center;justify-content:center;gap:9px;border-bottom:1px solid var(--line);background:#fafbfe}.step-strip span{width:25px;height:25px;display:grid;place-items:center;border:1px solid #c9cdd6;border-radius:50%;color:#8b93a2}.step-strip span.active{border-color:var(--indigo);background:var(--indigo);color:#fff}.step-strip b{font-weight:500;color:#697180}.step-strip i{width:90px;height:1px;background:#dfe2e8;margin:0 10px}
.secondary-page form{flex:1;min-height:0;display:flex;flex-direction:column}.secondary-scroll{flex:1;min-height:0;overflow:auto;padding:0 28px 20px;background:#f7f8fb}.form-section{margin-top:16px;padding:0 22px 24px;background:#fff;border:1px solid #eceef3}.form-section h3{margin:0 -22px 22px;padding:15px 20px;border-bottom:1px solid #eceef3;font-size:15px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:18px 34px;max-width:1100px}.page-field{display:grid;grid-template-columns:128px 1fr;align-items:center;gap:12px;min-width:0}.page-field.wide{grid-column:1/-1}.page-field>span{text-align:right;color:#5a6270}.page-field>span i{font-style:normal;color:#f24d48;margin-right:4px}.page-field input:not([type=radio]):not([type=checkbox]),.page-field select,.page-field textarea{width:100%;min-width:0;border:1px solid #dcdfe6;background:#fff;padding:0 12px;outline:0}.page-field input:not([type=radio]):not([type=checkbox]),.page-field select{height:40px}.page-field textarea{height:76px;padding-top:10px;resize:vertical}.page-field input:focus,.page-field select:focus,.page-field textarea:focus{border-color:var(--indigo)}.static-value{height:40px;display:flex;align-items:center;padding:0 12px;background:#f5f6f8;border:1px solid #e4e6ea;color:#777f8e}.choice-row{min-height:40px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px}.choice-row label{display:flex;align-items:center;gap:6px;color:#555e6d}.page-upload{height:112px;border:1px dashed #b9bfca;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--indigo);cursor:pointer}.page-upload input{display:none}.page-upload small{margin-top:7px;color:#9aa1ad}.secondary-footer{height:68px;flex:0 0 68px;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:0 26px;border-top:1px solid var(--line);background:#fff}.save-state{margin-right:auto;color:#13a16b}
.form-grid.single{grid-template-columns:460px;margin-left:60px;gap:16px}.form-grid.single .page-field.wide{grid-column:auto}
.server-warning{max-width:760px;margin:18px 0 0 60px;padding:10px 14px;border:1px solid #f1dda2;background:#fff8e6;color:#8a6a16;line-height:1.55}
.detail-page{flex:1;min-height:0;overflow:auto;padding:22px 28px;background:#f7f8fb}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:1px;background:#e7e9ef;border:1px solid #e7e9ef;max-width:1050px}.detail-grid>div{min-height:68px;display:grid;grid-template-columns:145px 1fr;align-items:center;background:#fff}.detail-grid span{height:100%;display:flex;align-items:center;padding:0 18px;background:#fafafa;color:#858d9b}.detail-grid strong{padding:0 20px;font-weight:500}.event-block{max-width:1050px;margin-top:18px;padding:18px 24px;background:#fff;border:1px solid #e7e9ef}.event-block h3{margin:0 0 18px;font-size:15px}.event-block p{position:relative;margin:0;padding:0 0 22px 24px;color:#5e6675}.event-block p:not(:last-child)::before{content:"";position:absolute;left:5px;top:10px;bottom:0;width:1px;background:#dfe2e8}.event-block p i{position:absolute;left:0;top:4px;width:11px;height:11px;border:3px solid #cdd2fa;border-radius:50%;background:var(--indigo)}

.source-page{position:relative}.source-subhead{height:58px;flex:0 0 58px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--line);background:#fff}.source-subhead button{width:25px;border:0;background:transparent;color:#4d5564;font-size:22px;padding:0}.source-subhead span{margin-right:12px;color:#4e5665}.source-subhead i{height:22px;width:1px;background:#dfe2e7;margin-right:15px}.source-subhead strong{font-size:15px}.source-page form{flex:1;min-height:0;display:flex;flex-direction:column}.source-form-scroll{flex:1;overflow:auto;padding:24px 32px;background:#fff}.source-form-row{display:flex;align-items:center;gap:12px;margin-bottom:22px}.source-form-row>label{width:150px;flex:0 0 150px;text-align:right;color:#565e6c}.source-form-row>label i,.modal-form-grid i,.simple-modal-form i{font-style:normal;color:#ef4c47;margin-right:4px}.source-form-row>input,.source-form-row>select{width:310px;height:38px;border:1px solid #dcdfe6;padding:0 12px;background:#fff}.source-form-row>input:disabled{background:#f5f6f8;color:#888}.source-form-row small{color:#9aa1ad}.source-form-row.align-top{align-items:flex-start}.source-date{display:flex;align-items:center;gap:9px}.source-date input{width:150px;height:38px;border:1px solid #dcdfe6;padding:0 8px}.schedule-area{width:min(900px,calc(100vw - 520px));min-width:620px}.mode-row{height:34px;display:flex;align-items:center;gap:22px;color:#555e6c}.mode-row label{display:flex;align-items:center;gap:5px}.mode-row span{margin-left:auto;color:#4b55e9}.schedule-label{width:52px;padding-top:8px;color:#5d6573}.hour-axis{margin-left:52px;display:grid;grid-template-columns:repeat(24,1fr);font-size:10px;color:#79818e;text-align:center}.hour-track{height:34px;margin:4px 0 0 52px;display:grid;grid-template-columns:repeat(24,1fr);background:#eef0f5}.hour-cell{border:0;border-right:1px solid #fff;background:#e8ebf1;padding:0}.hour-cell.selected{background:#5263ee}.schedule-help,.resource-help{margin:8px 0 20px 52px;color:#f04b45;font-size:11px}.resource-title{width:52px;color:#5d6573;line-height:18px}.resource-bars{height:88px;margin:-34px 0 0 52px;display:grid;grid-template-columns:repeat(24,1fr);align-items:end;border-bottom:1px solid #cfd3dc;background:repeating-linear-gradient(0deg,#f0f2f6 0 1px,transparent 1px 22px)}.resource-bars>div{height:100%;display:flex;align-items:flex-end;position:relative}.resource-bars b{width:72%;margin:0 auto;background:#6f7df2}.resource-bars span{position:absolute;left:50%;top:4px;transform:translateX(-50%);font-size:9px;color:#6e7684}.hour-axis.bottom{margin-top:4px}.relation-table{width:min(900px,calc(100vw - 520px))}.relation-table>.btn{margin-bottom:12px}.relation-table .table-wrap{height:170px;border:1px solid #e6e9ef}.source-actions{height:66px;flex:0 0 66px;display:flex;align-items:center;justify-content:center;gap:12px;border-top:1px solid var(--line);background:#fff}.source-actions>span{position:absolute;left:24px;color:#16a16b}
.resource-bars>div:nth-child(-n+8) b,.resource-bars>div:nth-child(n+22) b{background:linear-gradient(#58c579,#a6df9e)}.resource-bars>div:nth-child(n+9):nth-child(-n+21) b{background:linear-gradient(#f1a646,#ffd381)}
.detail-table-wrap{flex:1;min-height:0;overflow:auto;padding:14px;background:#fff}.expand-table{min-width:1050px}.expand-table th{height:48px}.expand-table td{height:56px}.master-row>td{background:#fff}.master-row button{width:22px;height:22px;margin-right:7px;border:1px solid #dfe2e8;background:#fff;color:#606978}.detail-subrow td{background:#fafbfe}.detail-subrow.hidden{display:none}
.authorization-form{flex:1;overflow:auto;padding:28px 30px}.transfer-box{width:min(900px,calc(100vw - 520px));height:310px;display:grid;grid-template-columns:1fr 58px 1fr;gap:8px}.transfer-tree,.transfer-table{border:1px solid #e2e5eb;background:#fff;overflow:auto}.transfer-count{height:46px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #e8eaf0}.transfer-count b{margin-right:auto;font-weight:500}.transfer-count input{height:30px;width:150px;border:1px solid #dcdfe6;padding:0 8px}.transfer-count button{border:0;background:#fff}.transfer-tree>label{height:40px;display:flex;align-items:center;gap:7px;padding:0 15px}.transfer-tree .tree-child{padding-left:38px}.transfer-buttons{display:flex;flex-direction:column;justify-content:center;gap:10px}.transfer-buttons button{width:36px;height:32px;margin:auto;border:1px solid #dcdfe6;background:#fff;color:#4d55df}.transfer-table table{width:100%}.transfer-table td,.transfer-table th{height:42px}.empty-transfer td{text-align:center;color:#a0a7b3}.source-alert{padding:10px 14px;color:#755d17;background:#fff9e7;border:1px solid #f3e4aa;line-height:1.5}
.modal-route-bg{height:100%;filter:none}.source-modal-mask{position:absolute;z-index:30;inset:0;display:grid;place-items:center;background:rgba(9,20,36,.48);padding:22px}.source-modal-mask.page-level{position:fixed;z-index:80}.source-modal{width:520px;max-height:88vh;display:flex;flex-direction:column;background:#fff;border-radius:3px;box-shadow:0 18px 55px #09152755}.source-modal.large{width:min(760px,100%)}.source-modal>header{height:55px;flex:0 0 55px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #e6e9ef}.source-modal>header button{border:0;background:transparent;font-size:22px;color:#818896}.source-modal form{min-height:0;display:flex;flex-direction:column}.source-modal-body{padding:24px 28px;overflow:auto}.source-modal footer{height:64px;flex:0 0 64px;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 24px;border-top:1px solid #e6e9ef}.modal-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}.modal-form-grid>label,.simple-modal-form label{display:flex;min-width:0;flex-direction:column;gap:8px;color:#555e6c;line-height:20px}.modal-form-grid input,.modal-form-grid select,.simple-modal-form input,.adjust-row input{width:100%;min-width:0;height:40px;border:1px solid #dcdfe6;border-radius:2px;padding:0 11px;background:#fff;outline:0}.modal-form-grid input:disabled{background:#f5f6f8;color:#7b8390}.modal-form-grid input:focus,.modal-form-grid select:focus,.modal-form-grid textarea:focus{border-color:var(--indigo);box-shadow:0 0 0 2px rgba(36,56,244,.08)}.modal-form-grid textarea{width:100%;min-height:82px;border:1px solid #dcdfe6;border-radius:2px;padding:10px 11px;resize:vertical;outline:0}.modal-form-grid .wide{grid-column:1/-1}.modal-form-grid small{min-height:18px;color:#9aa1ad;line-height:1.45}.address-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.coord-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.time-row{display:grid;grid-template-columns:minmax(0,1fr) auto 82px minmax(0,1fr);gap:10px;align-items:center}.simple-modal-form{display:grid;gap:18px;padding:5px 10px}.modal-person-select{padding:0}.select-all{height:40px;display:flex;align-items:center;gap:7px}.modal-person-grid{height:440px;overflow:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:#f6f7fa;padding:10px}.modal-person-grid>label{position:relative;min-height:120px;padding:9px;background:#fff;border:1px solid #e6e9ef;display:flex;flex-direction:column;gap:5px}.modal-person-grid>label>input{position:absolute;left:7px;top:7px}.mini-avatar{height:60px;background:linear-gradient(#dfe5f3,#aebbd3);margin-bottom:2px}.modal-person-grid span{font-size:10px;color:#344ae6}.modal-person-grid b{font-size:11px;font-weight:500}.adjust-auth{display:grid;gap:15px}.adjust-auth h4{margin:0;color:#4b55df}.adjust-row{display:grid;grid-template-columns:1.3fr 1fr 100px;gap:10px;align-items:center}.adjust-row label{color:#777f8d}.record-table .table-wrap{height:180px}.camera-select-body{padding:18px}.camera-select-search{display:flex;gap:9px;margin-bottom:14px}.camera-select-search input{flex:1;height:38px;border:1px solid #dcdfe6;padding:0 10px}.camera-select-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.camera-select-grid label{position:relative;padding:15px 12px 12px 35px;border:1px solid #e3e6ed;display:flex;flex-direction:column;gap:6px}.camera-select-grid input{position:absolute;left:11px;top:17px}.camera-select-grid span{color:#4e58e8}.camera-select-grid small{color:#8e96a4}

@media (max-width: 900px) {
  :root { --sidebar: 72px; }.shell{min-width:720px}.brand-copy,.nav-item span:last-child,.nav-group-label .nav-left span:last-child,.chev{display:none}.nav-item,.nav-group-label{padding:0;justify-content:center}.nav-children .nav-item{padding-left:0}.brand{gap:0}.sidebar-mark{transform:scale(.72)}.org-panel,.camera-panel{flex-basis:190px}.metric-grid{grid-template-columns:repeat(2,1fr)}.filter-grid{grid-template-columns:repeat(2,1fr)}.person-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}.product-detail{width:255px;flex-basis:255px}.dialog-card.wide .dialog-body{grid-template-columns:1fr}.form-grid,.detail-grid{grid-template-columns:1fr}.schedule-area,.relation-table,.transfer-box{width:calc(100vw - 350px)}.source-form-row>label{width:115px;flex-basis:115px}.modal-person-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 760px){.modal-form-grid{grid-template-columns:1fr}.modal-form-grid .wide{grid-column:auto}.address-row{grid-template-columns:1fr}.time-row{grid-template-columns:1fr auto 72px 1fr}.source-modal-body{padding:20px}}

/* Organization editor: keep paired fields aligned; school number owns its row. */
.modal-form-grid>label:nth-child(3){grid-column:1/-1}
@media (max-width:760px){.modal-form-grid>label:nth-child(3){grid-column:auto}}
.query-empty-state{min-height:160px;display:grid;place-items:center;color:#9aa1ad;background:#fff;border-top:1px solid #eef0f4}
.modal-context{display:grid;grid-template-columns:90px 1fr 90px 1fr;align-items:center;gap:10px;margin-bottom:18px;padding:14px 16px;background:#f7f8fb;border:1px solid #e7e9ef}.modal-context span{color:#8a92a0}.modal-context b{font-weight:500;color:#333b49}.application-version-table .table-wrap{max-height:300px}.product-update-form{display:grid;gap:18px}.product-update-form>label{display:flex;align-items:center;gap:14px;color:#596170}.product-update-form select{width:260px;height:38px;border:1px solid #dcdfe6;padding:0 10px;background:#fff}.product-update-form .inline-radio{display:inline-flex;gap:6px;color:#444c59}

/* Secondary-page navigation uses one complete, accessible back control. */
.source-subhead>button[data-back]{width:auto;height:36px;display:flex;align-items:center;gap:5px;margin-right:12px;padding:0 8px;border-radius:4px;font-size:14px;transition:background .16s,color .16s}
.source-subhead>button[data-back] b{font-size:22px;font-weight:400;line-height:1}
.source-subhead>button[data-back] span{margin:0;color:inherit}
.source-subhead>button[data-back]:hover{background:#f1f6fa;color:#176ca3}
.source-subhead>button[data-back]:focus-visible{outline:2px solid #268fc8;outline-offset:1px}

/* Subtle pointer feedback for frequently used controls. */
.btn,.link,.route-actions button,.card-edit,.alarm-pages button,.person-pagination button{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
.btn.primary:not(:disabled):hover{border-color:#4a5cf6;background:#4a5cf6;box-shadow:0 3px 10px rgba(36,56,244,.16)}
.btn:not(.primary):not(.ghost):not(:disabled):hover{border-color:#c6d6e5;background:#f3f7fb;color:#176ca3}
.btn.ghost:not(:disabled):hover,.link:hover,.route-actions button:hover,.card-edit:hover{background:#eef5fb;color:#176ca3}
.alarm-pages button:not(.active):not(:disabled):hover,.person-pagination button:not(.active):not(:disabled):hover{border-color:#b9cee0;background:#f1f6fa;color:#176ca3}
.alarm-pages button.active:not(:disabled):hover,.person-pagination button.active:not(:disabled):hover{border-color:#4a5cf6;background:#4a5cf6}
.actions:has(.device-row-actions){min-width:300px;overflow:visible}
.device-row-actions{gap:8px;padding:0 4px}
.device-row-actions button{padding:5px 7px;border-radius:3px;line-height:20px}
.device-row-actions i{margin:0 1px;color:#d7dde5}
.device-row-actions .danger-link{color:#dc4c4c}
.device-row-actions .danger-link:hover{background:#fff1f0;color:#c93b3b}
.pagination-controls{margin-left:auto;display:flex;align-items:center;gap:6px}
.pagination-controls button{width:32px;height:32px;border:1px solid #dfe4eb;border-radius:3px;background:#fff;color:#536174;transition:background .16s,border-color .16s,color .16s}
.pagination-controls button:not(:disabled):hover{border-color:#b9cee0;background:#f1f6fa;color:#176ca3}
.pagination-controls button:disabled{cursor:not-allowed;color:#bdc4ce;background:#f6f7f9}
.pagination .pagination-controls .page-no{margin-left:0;min-width:58px;text-align:center}
.relation-table [data-relation-delete]{color:#dc4c4c}
.relation-table [data-relation-delete]:hover{background:#fff1f0;color:#c93b3b}

/* Motion and interaction polish: preserves the existing layout and proportions. */
.workspace>*{animation:pageEnter .24s cubic-bezier(.2,.75,.3,1)}
.workspace.is-loading>*{opacity:.42;filter:blur(.7px);transform:translateY(2px);pointer-events:none;transition:opacity .12s,filter .12s,transform .12s}
.workspace.is-loading::after{content:"";position:absolute;z-index:90;left:50%;top:46%;width:30px;height:30px;margin:-15px;border:3px solid rgba(23,108,163,.18);border-top-color:#176ca3;border-radius:50%;animation:loadingSpin .65s linear infinite}
@keyframes pageEnter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes loadingSpin{to{transform:rotate(360deg)}}

.nav-item,.nav-group-label{position:relative;transition:color .18s,background .18s,transform .18s,box-shadow .18s}
.nav-item:hover,.nav-group-label:hover{transform:translateX(2px)}
.nav-item:active,.nav-group-label:active,.btn:not(:disabled):active,.route-actions button:active{transform:scale(.98)}
.shell.sidebar-collapsed{grid-template-columns:72px 1fr}.shell.sidebar-collapsed .brand-copy,.shell.sidebar-collapsed .nav-item span:last-child,.shell.sidebar-collapsed .nav-group-label .nav-left span:last-child,.shell.sidebar-collapsed .chev{display:none}.shell.sidebar-collapsed .brand{gap:0}.shell.sidebar-collapsed .nav-item,.shell.sidebar-collapsed .nav-group-label{justify-content:center;padding:0}.shell.sidebar-collapsed .nav-children .nav-item{padding-left:0}.shell.sidebar-collapsed .sidebar-mark{transform:scale(.72)}
.nav-children{transform-origin:top;animation:navChildrenIn .2s ease-out}
@keyframes navChildrenIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.org-panel{position:relative;transition:flex-basis .22s ease,width .22s ease,box-shadow .18s}
.org-panel:hover{box-shadow:0 4px 18px rgba(17,53,83,.08)}
.panel-title .collapse-mark{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:4px;background:transparent;transition:background .16s,color .16s,transform .18s}
.panel-title .collapse-mark:hover{background:#eef5fb;color:#176ca3;transform:translateX(-2px)}
.tree-root{width:100%;height:38px;display:flex;align-items:center;gap:8px;padding:0 6px;border:0;border-radius:4px;background:transparent;color:#3e4958;font-weight:600;text-align:left;transition:background .16s,color .16s}
.tree-root:hover{background:#f0f6fb;color:#176ca3}
.tree-root small{margin-left:auto;padding:2px 7px;border-radius:9px;background:#edf3f8;color:#7b8795;font-size:10px;font-weight:500}
.tree-arrow{position:relative;width:16px;height:16px;flex:0 0 16px;transition:transform .2s}
.tree-arrow::before{content:"";position:absolute;left:4px;top:4px;width:7px;height:7px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg)}
.tree-root[aria-expanded="false"] .tree-arrow{transform:rotate(-90deg)}
.tree-root.static-root{cursor:default;padding-left:7px}.tree-root.static-root:hover{background:transparent;color:#3e4958}.tree-org-icon{width:16px;display:grid;place-items:center;font-size:16px;line-height:1}
.tree-children{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .22s ease,opacity .18s ease}.tree-children>*{display:none}.tree-children.expanded{grid-template-rows:1fr;opacity:1}.tree-children.expanded>*{display:block}
.tree-item{position:relative;border-radius:4px;cursor:pointer;transition:background .16s,color .16s,padding-left .16s,box-shadow .16s}
.tree-item::before{content:"";position:absolute;left:18px;top:50%;width:5px;height:5px;margin-top:-2px;border-radius:50%;background:#c8d2dc;transition:background .16s,transform .16s}
.tree-item:hover{padding-left:38px;background:#f3f7fb;color:#176ca3}.tree-item:hover::before{background:#51a5d6;transform:scale(1.35)}
.tree-item.selected{box-shadow:inset 3px 0 #3843d8}.tree-item.selected::before{background:#3843d8}
.org-panel.panel-collapsed{flex-basis:54px;width:54px}.org-panel.panel-collapsed .panel-title{justify-content:center;padding:0}.org-panel.panel-collapsed .panel-title>span,.org-panel.panel-collapsed .searchbox,.org-panel.panel-collapsed .tree,.org-panel.panel-collapsed .mini-actions{display:none}
.org-panel.panel-collapsed .collapse-mark:hover{transform:translateX(2px)}

tbody tr{transition:background-color .15s,box-shadow .15s}tbody tr:hover td{background:#f6f9fc}tbody tr:hover{box-shadow:inset 3px 0 #5aafe0}
.alarm-card,.person-card,.metric,.overview-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.alarm-card:hover,.person-card:hover,.metric:hover,.overview-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,48,76,.12)}
.alarm-card img,.person-photo{transition:transform .28s ease,filter .28s ease}.alarm-card:hover img{transform:scale(1.015);filter:saturate(1.06)}
input,select,textarea{transition:border-color .16s,box-shadow .16s,background .16s}input:hover,select:hover,textarea:hover{border-color:#adc7db}.toolbar input:focus,.toolbar select:focus,.searchbox:focus-within{border-color:#268fc8;box-shadow:0 0 0 3px rgba(38,143,200,.09)}
.chip{transition:filter .16s,transform .16s}.chip:hover{filter:brightness(.97);transform:translateY(-1px)}

.login-page::before,.login-page::after{content:"";position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}.login-page::before{width:420px;height:420px;right:-130px;top:-170px;background:radial-gradient(circle,#ddecff 0,transparent 68%);animation:loginFloat 8s ease-in-out infinite}.login-page::after{width:380px;height:380px;left:-140px;bottom:-190px;background:radial-gradient(circle,#e3e7ff 0,transparent 70%);animation:loginFloat 9s ease-in-out infinite reverse}
.login-card{position:relative;z-index:1;box-shadow:0 22px 65px rgba(25,61,118,.16);animation:loginCardIn .48s cubic-bezier(.18,.8,.3,1)}
.login-visual::after{content:"";position:absolute;inset:-60%;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.12) 49%,transparent 56%);animation:loginShine 7s ease-in-out infinite}
.visual-copy small{display:block;margin-top:9px;font-size:9px;letter-spacing:3.5px;opacity:.72}
.login-particles i{position:absolute;z-index:1;left:calc(7% + var(--i)*7.3%);top:calc(15% + (var(--i)*31%));width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 0 9px #fff;animation:particleDrift calc(3s + var(--i)*.18s) ease-in-out infinite;animation-delay:calc(var(--i)*-.25s)}
.login-field:hover{border-bottom-color:#9ba7ff}.login-submit{position:relative;overflow:hidden;transition:transform .16s,background .16s,box-shadow .16s}.login-submit:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(29,51,255,.25)}.login-submit:active{transform:translateY(0) scale(.99)}
@keyframes loginCardIn{from{opacity:0;transform:translateY(16px) scale(.988)}to{opacity:1;transform:none}}
@keyframes loginShine{0%,65%{transform:translateX(-35%)}85%,100%{transform:translateX(35%)}}
@keyframes loginFloat{50%{transform:translate(20px,14px) scale(1.04)}}
@keyframes particleDrift{50%{transform:translateY(-14px);opacity:.35}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}