:root {
    --bg: #080c10;
    --panel: #0e141a;
    --panel-2: #141b22;
    --line: #29323b;
    --muted: #84909a;
    --text: #e4e8eb;
    --blue: #7692a8;
    --red: #bb6267;
    --gold: #b59a69;
    --tablet-width: 93vw;
    --tablet-height: 90vh;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--text); background: transparent; }
button, input, select, textarea { font: inherit; }
.hidden { display: none !important; }

#app { width: 100%; height: 100%; display: grid; place-items: center; background: transparent; }
.terminal-frame { position: relative; width: min(1480px, var(--tablet-width)); height: min(870px, var(--tablet-height)); overflow: hidden; border: 1px solid #3b4248; border-radius: 15px; background: #090d11; box-shadow: 0 40px 110px #000d, 0 0 0 7px #050708, 0 0 0 9px #30353a; }
.device-bar { height: 31px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #30373e; background: linear-gradient(#181d22, #0d1115); color: #7f8a93; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; }
.device-bar div { display: flex; align-items: center; gap: 12px; }
.device-bar i { width: 6px; height: 6px; border-radius: 50%; background: #719f82; box-shadow: 0 0 7px #719f82; }
.device-bar b { color: #bec6cc; font: 600 9px Consolas, monospace; }
.device-bar em { color: #7d898f; font-style: normal; border-left: 1px solid #343a40; padding-left: 12px; }

.login-screen { position: relative; height: calc(100% - 31px); display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 25%, rgba(74, 94, 111, .24), transparent 35%), linear-gradient(120deg, rgba(5, 8, 11, .96), rgba(14, 20, 25, .92)); }
.login-screen::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px), linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px); background-size: auto, 80px 100%; pointer-events: none; }
.login-watermark { position: absolute; left: 7%; top: 50%; transform: translateY(-50%); width: 42%; opacity: .055; filter: grayscale(1); }
.login-watermark img { width: 100%; display: block; }
.login-card { position: relative; z-index: 2; width: min(470px, 86%); padding: 31px 38px 27px; border: 1px solid #37414a; border-radius: 7px; background: linear-gradient(155deg, rgba(25, 31, 37, .97), rgba(11, 15, 19, .98)); box-shadow: 0 28px 70px #000b, inset 0 1px rgba(255,255,255,.035); text-align: center; }
.login-logo { width: 112px; height: 112px; object-fit: contain; background: transparent; filter: brightness(1.15) saturate(1.08) drop-shadow(0 8px 20px #000b); }
.login-kicker { margin: 12px 0 5px; color: #9ba7af; font-size: 8px; font-weight: 800; letter-spacing: 2.7px; }
.login-card h1 { margin: 0; color: #f0f2f3; font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 500; letter-spacing: .2px; }
.login-subtitle { margin: 7px 0 17px; color: #77838c; font-size: 10px; }
.security-rule { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: #8d989f; font-size: 7px; letter-spacing: 1.2px; }
.security-rule span { height: 1px; flex: 1; background: #343d44; }
.login-card label { display: block; margin: 11px 0 6px; color: #89949c; text-align: left; font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.credential { height: 44px; display: flex; align-items: center; border: 1px solid #343e46; border-radius: 5px; background: #0c1115; overflow: hidden; }
.credential span { width: 48px; color: #778691; border-right: 1px solid #303941; font: 600 9px Consolas, monospace; }
.credential input { height: 100%; min-width: 0; flex: 1; padding: 0 13px; border: 0; outline: 0; background: transparent; color: #d6dce0; font: 500 11px Consolas, monospace; letter-spacing: .5px; }
.login-button { width: 100%; margin-top: 18px; padding: 11px; border: 1px solid #5f788b; border-radius: 5px; background: linear-gradient(#70899b, #536c7e); color: #071017; cursor: pointer; box-shadow: inset 0 1px #ffffff33; font-weight: 800; letter-spacing: .8px; }
.login-button span, .login-button small { display: block; }
.login-button small { margin-top: 3px; font-size: 6px; letter-spacing: 1.3px; opacity: .72; }
.login-button:hover { filter: brightness(1.08); }
.login-button.authenticating { pointer-events: none; filter: saturate(.4); }
.login-notice { margin: 17px auto 0; max-width: 360px; color: #59656d; font-size: 7px; line-height: 1.55; }
.login-footer { position: absolute; left: 22px; right: 22px; bottom: 15px; display: flex; justify-content: space-between; color: #606c74; font: 600 7px Consolas, monospace; letter-spacing: .8px; }
.login-footer b { color: #8ca49a; }

.tablet { width: 100%; height: calc(100% - 31px); display: grid; grid-template-columns: 250px 1fr; overflow: hidden; background: linear-gradient(145deg, #0c1116, #080c10); }
.sidebar { padding: 26px 17px 18px; display: flex; flex-direction: column; background: linear-gradient(180deg, #10161b, #090d11); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 9px 26px; }
.brand-logo { width: 58px; height: 58px; object-fit: contain; background: transparent; filter: brightness(1.15) saturate(1.08) drop-shadow(0 5px 10px #000a); }
.brand strong { display: block; letter-spacing: 1.4px; font-size: 12px; }
.brand span { display: block; margin-top: 5px; color: var(--muted); font-size: 7px; letter-spacing: 1.3px; }
nav { display: grid; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 3px; scrollbar-width: thin; scrollbar-color: #34424c transparent; }
.nav { border: 0; border-radius: 4px; padding: 9px 13px; display: flex; gap: 12px; align-items: center; color: #85919a; background: transparent; cursor: pointer; text-align: left; font-size: 9px; font-weight: 600; letter-spacing: .2px; }
.nav span { width: 20px; color: #5e6a74; text-align: center; font: 600 8px Consolas, monospace; }
.nav:hover { color: #cbd1d5; background: #151c22; }
.nav.active { color: #edf0f2; background: linear-gradient(90deg, #25323c, #171f25); box-shadow: inset 2px 0 #849bab; }
.nav.active span { color: #9badb9; }
.system-block { margin-top: auto; padding: 13px 9px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.system-block span, .system-block b, .system-block small { display: block; }
.system-block span { color: #626f79; font-size: 7px; letter-spacing: 1.3px; }
.system-block b { margin-top: 7px; color: #91a39a; font-size: 8px; letter-spacing: .6px; }
.system-block b i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #6e987d; }
.system-block small { margin-top: 5px; color: #53606a; font: 500 7px Consolas, monospace; }
.officer-card { display: flex; align-items: center; gap: 10px; padding: 16px 9px 0; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #729982; box-shadow: 0 0 8px #729982; }
.officer-card strong, .officer-card small { display: block; }
.officer-card strong { font-size: 11px; }
.officer-card small { color: var(--muted); font-size: 8px; margin-top: 4px; }

.workspace { min-width: 0; display: flex; flex-direction: column; }
.workspace header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 20px 29px; border-bottom: 1px solid var(--line); background: #0d1217e8; }
.eyebrow { margin: 0 0 5px; color: #768997; font-size: 7px; font-weight: 800; letter-spacing: 1.6px; }
.workspace h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 500; letter-spacing: -.2px; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.header-seal { height: 42px; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px; border-right: 1px solid #303a42; color: #8f9ba3; font-size: 7px; line-height: 1.35; letter-spacing: 1px; }
.header-seal img { width: 34px; height: 34px; object-fit: contain; filter: brightness(1.3) saturate(1.12) drop-shadow(0 3px 5px #000a); }
.header-seal b { font-weight: 800; }
.secure { color: #8ca295; border: 1px solid #35423b; border-radius: 4px; padding: 8px 10px; font-size: 7px; font-weight: 700; letter-spacing: 1px; }
.header-actions button, .modal-head button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 4px; color: #9ba5ac; background: #11171c; cursor: pointer; font-size: 19px; }
.header-actions button:hover, .modal-head button:hover { color: #fff; border-color: #58636c; }
#view { overflow: auto; padding: 24px 29px 32px; scrollbar-width: thin; scrollbar-color: #3b4650 transparent; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 19px; }
.stat { padding: 18px; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(145deg, #141b21, #0e1419); }
.stat span { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.stat strong { display: block; margin-top: 9px; color: #d9dee1; font: 600 27px Consolas, monospace; }
.stat.danger strong { color: #c8787c; }
.stat.blue strong { color: #8da4b4; }
.grid-2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 17px; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 5px; background: #0e1419e8; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.panel-head small { color: var(--muted); font-size: 8px; }
.panel-body { padding: 11px; }
.list { display: grid; gap: 7px; }
.row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 12px; border: 1px solid #232d35; border-radius: 4px; background: #11171c; color: var(--text); text-align: left; }
.row:hover { border-color: #46545f; }
.row-main { min-width: 0; }
.row strong { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row small { display: block; color: var(--muted); font-size: 8px; margin-top: 5px; }
.tag { flex: none; padding: 5px 7px; border: 1px solid #3c4a55; border-radius: 3px; color: #9baeba; background: #172027; font: 600 7px Consolas, monospace; text-transform: uppercase; }
.tag.red { color: #cd8e91; border-color: #5a383b; background: #26191c; }
.tag.gold { color: #c5ad7c; border-color: #51462f; background: #211d14; }
.empty { padding: 36px 15px; text-align: center; color: #68747d; font-size: 10px; }

.searchbar { display: flex; gap: 9px; margin-bottom: 16px; }
.searchbar input, .field input, .field select, .field textarea { width: 100%; border: 1px solid #343f48; border-radius: 4px; outline: 0; background: #0c1115; color: var(--text); padding: 12px 13px; }
.searchbar input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: #687e8e; box-shadow: 0 0 0 2px #647c8c18; }
.btn { border: 1px solid #4e6473; border-radius: 4px; background: #293b47; color: #dce4e9; padding: 10px 15px; cursor: pointer; font-weight: 700; font-size: 9px; letter-spacing: .4px; }
.btn:hover { background: #344a58; }
.btn.danger { color: #d8a2a5; border-color: #684246; background: #2b1d20; }
.btn.ghost { color: #a5b0b7; border-color: #36424b; background: #10161b; }
.actions { display: flex; gap: 7px; flex-wrap: wrap; }
.profile { display: grid; grid-template-columns: 310px 1fr; gap: 16px; }
.identity { padding: 20px; }
.avatar { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 5px; background: #24333d; border: 1px solid #465a68; color: #a6b8c3; font: 700 18px Consolas, monospace; margin-bottom: 17px; }
.identity h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 500; }
.identity .cid { color: #879eac; font: 500 10px Consolas, monospace; margin: 7px 0 19px; }
.facts { display: grid; gap: 10px; }
.fact { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 9px; border-bottom: 1px solid #273039; font-size: 9px; }
.fact span { color: var(--muted); }
.profile-content { display: grid; gap: 13px; }
.section-title { margin: 3px 0 10px; font-size: 9px; color: #99a4ab; text-transform: uppercase; letter-spacing: 1px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { color: #89959d; font-size: 8px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.field textarea { min-height: 125px; resize: vertical; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 5px; }

.modal { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: transparent; backdrop-filter: none; }
.modal-card { width: min(600px, 88vw); max-height: 80vh; overflow: auto; border: 1px solid #3b474f; border-radius: 6px; background: #10161b; box-shadow: 0 25px 70px #000c; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 500; }
.modal-body { padding: 19px; }
.toast { position: fixed; right: 28px; bottom: 25px; z-index: 9; transform: translateY(80px); opacity: 0; transition: .25s; border: 1px solid #465c50; border-radius: 4px; background: #15201a; color: #a6c0b0; padding: 12px 16px; font-size: 9px; box-shadow: 0 10px 35px #0008; }
.toast.show { transform: none; opacity: 1; }
.toast.error { color: #d7a3a6; border-color: #654146; background: #281a1d; }

.page-actions { margin-bottom: 14px; }
.section-gap { margin-top: 15px !important; }
.money-stat { font-size: 20px !important; }
.person-cell { min-width: 0; display: flex; align-items: center; gap: 11px; }
.person-photo { width: 36px; height: 36px; flex: none; overflow: hidden; border: 1px solid #39434b; border-radius: 3px; background: #11171c; }
.person-photo img, .profile-photo img, .officer-photo img, .wanted-photo img { width: 100%; height: 100%; object-fit: cover; }
.face-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #93a2ab; background: linear-gradient(145deg, #1c262e, #0e1419); font: 700 13px Consolas, monospace; }
.profile-photo .face-placeholder { font-size: 23px; }
.wanted-photo .face-placeholder { font-size: 31px; }
.profile-photo { width: 82px; height: 82px; margin-bottom: 16px; overflow: hidden; border: 1px solid #48545d; border-radius: 4px; background: #10161b; }
.wanted-banner { margin: 0 0 16px; padding: 9px; border: 1px solid #633c40; border-radius: 3px; background: #2a191c; color: #d29498; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.profile-actions { margin-top: 18px; }

.personnel-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; }
.officer-tile { position: relative; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(145deg,#141b21,#0c1115); }
.rank-number { position: absolute; right: 12px; top: 10px; color: #5b6670; font: 700 12px Consolas,monospace; }
.officer-photo { width: 66px; height: 66px; overflow: hidden; border: 1px solid #424e57; border-radius: 4px; background: #0d1216; }
.officer-photo span { width: 100%; height: 100%; display: grid; place-items: center; color: #8fa0aa; background: linear-gradient(145deg, #1b252c, #10161b); font: 700 20px Consolas, monospace; }
.officer-name h3 { margin: 13px 0 4px; font-family: Georgia,"Times New Roman",serif; font-size: 16px; font-weight: 500; }
.officer-name p { margin: 0; color: #77838c; font-size: 8px; }
.officer-points { display: flex; align-items: end; gap: 8px; margin: 16px 0 12px; }
.officer-points strong { color: #a9bac5; font: 700 26px Consolas,monospace; }
.officer-points span { padding-bottom: 4px; color: #69757e; font-size: 7px; letter-spacing: 1px; }
.officer-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 13px; }
.officer-metrics span { display: flex; justify-content: space-between; padding: 7px; border: 1px solid #273139; color: #77838b; font-size: 8px; }
.officer-metrics b { color: #c7cdd1; }

.wanted-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.wanted-card { display: grid; grid-template-columns: 145px 1fr; min-height: 190px; overflow: hidden; border: 1px solid #463136; border-radius: 5px; background: #121416; }
.wanted-photo { position: relative; min-height: 190px; background: #090c0f; }
.wanted-photo img { filter: grayscale(.35) contrast(1.05); }
.wanted-photo span { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px; background: #6d353aeb; color: #f1dcde; text-align: center; font-size: 9px; font-weight: 900; letter-spacing: 2px; }
.wanted-data { padding: 16px; }
.wanted-data h3 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: 18px; font-weight: 500; }
.wanted-data p { margin: 5px 0 13px; color: #a46a6f; font: 600 9px Consolas,monospace; }
.wanted-data strong { display: block; font-size: 10px; }
.wanted-data small { display: block; min-height: 29px; margin: 6px 0 11px; color: #7c858b; font-size: 8px; line-height: 1.5; }
.wanted-reward { margin-bottom: 11px; color: #b99c67; font-size: 8px; font-weight: 800; letter-spacing: .8px; }

.case-row { display: grid; grid-template-columns: 72px minmax(0,1fr) 135px; gap: 13px; align-items: center; padding: 14px 10px; border-bottom: 1px solid #252e35; }
.case-row:last-child { border-bottom: 0; }
.case-ref { padding: 9px; border: 1px solid #34404a; text-align: center; }
.case-ref span,.case-ref strong { display: block; }
.case-ref span { color: #6e7b85; font-size: 6px; letter-spacing: 1px; }
.case-ref strong { margin-top: 4px; font: 700 15px Consolas,monospace; }
.case-main { min-width: 0; }
.case-main h3 { margin: 0 0 5px; font-size: 11px; }
.case-main p { margin: 0 0 6px; color: #89939a; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-main small { color: #626e77; font-size: 7px; }
.case-meta { display: grid; justify-items: end; gap: 7px; color: #69757e; font-size: 7px; }
.case-file { color: #cdd3d7; }
.case-file-head { display: flex; align-items: center; justify-content: space-between; color: #7a858d; font-size: 8px; }
.case-file h4 { margin: 18px 0 8px; color: #8d9aa3; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }
.case-file p { margin: 0; color: #bbc2c6; font-size: 10px; line-height: 1.7; white-space: pre-wrap; }
.case-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-record { display: inline-block; margin: 0 5px 5px 0; padding: 6px 8px; border: 1px solid #35414a; border-radius: 3px; background: #11171c; color: #aeb7bd; font-size: 8px; }
button.mini-record { cursor: pointer; }
.case-total { display: flex; justify-content: space-between; margin-top: 18px; padding: 12px; border: 1px solid #3a4248; color: #7d8991; font-size: 9px; }
.case-total strong { color: #c6b079; font: 600 13px Consolas,monospace; }

.vehicle-preview { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; }
.vehicle-preview div { padding: 13px; border: 1px solid #303a42; background: #10161b; }
.vehicle-preview span,.vehicle-preview strong { display: block; }
.vehicle-preview span { color: #69757e; font-size: 7px; letter-spacing: 1px; }
.vehicle-preview strong { margin-top: 7px; font: 600 13px Consolas,monospace; }
.impound-action { margin: 12px 0 0; }
.vehicle-id { min-width: 105px; padding-right: 13px; border-right: 1px solid #2d363e; }
.vehicle-id strong,.vehicle-id span { display: block; }
.vehicle-id strong { font: 700 13px Consolas,monospace; }
.vehicle-id span { margin-top: 4px; color: #737f87; font-size: 7px; }

.budget-hero { display: grid; grid-template-columns: 1fr 260px; gap: 14px; margin-bottom: 14px; }
.budget-hero > div { padding: 23px; border: 1px solid #354049; border-radius: 5px; background: linear-gradient(145deg,#151d22,#0d1216); }
.budget-hero span,.budget-hero strong,.budget-hero small { display: block; }
.budget-hero span { color: #7e8a92; font-size: 8px; letter-spacing: 1px; }
.budget-hero strong { margin-top: 9px; color: #d9dedf; font: 600 32px Consolas,monospace; }
.budget-hero small { margin-top: 8px; color: #626d75; font-size: 8px; }
.bonus-state strong { font-size: 20px; color: #a8b1b6; }
.bonus-state.enabled { border-color: #596347; background: linear-gradient(145deg,#1b2017,#10140d); }
.bonus-state.enabled strong { color: #c4bd80; }
.ledger-row { display: grid; grid-template-columns: 90px minmax(0,1fr) 115px 115px; gap: 12px; align-items: center; padding: 11px; border-bottom: 1px solid #252e35; }
.ledger-type { color: #87959e; font: 600 8px Consolas,monospace; text-transform: uppercase; }
.ledger-row strong,.ledger-row small { display: block; }
.ledger-row strong { font-size: 9px; }
.ledger-row small { margin-top: 4px; color: #66727b; font-size: 7px; }
.ledger-row b { text-align: right; font: 600 11px Consolas,monospace; }
.ledger-row b.income { color: #87a790; }
.ledger-row b.expense { color: #c17e82; }
.ledger-row em { color: #68747c; text-align: right; font: 500 8px Consolas,monospace; font-style: normal; }

@media (max-width: 900px) {
    .terminal-frame { width: 96vw; height: 92vh; }
    .tablet { grid-template-columns: 195px 1fr; }
    .stats { grid-template-columns: 1fr 1fr; }
    .grid-2, .profile { grid-template-columns: 1fr; }
    .workspace header, #view { padding-left: 18px; padding-right: 18px; }
    .login-watermark { display: none; }
    .personnel-grid { grid-template-columns: 1fr 1fr; }
    .wanted-grid { grid-template-columns: 1fr; }
    .vehicle-preview { grid-template-columns: 1fr 1fr 1fr; }
}

.form-note { display: block; padding: 10px 12px; border: 1px solid #3a454e; border-radius: 4px; background: #0c1217; color: #9aa6ae; font-size: 8px; line-height: 1.6; }
.mugshot-stamp { display: block; margin-top: 12px; color: #7f8d96; font: 600 7px Consolas, monospace; letter-spacing: .5px; }

.camera-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.camera-panel .panel-body { padding: 8px; }
.camera-row { width: 100%; display: grid; grid-template-columns: 36px minmax(0,1fr) 48px; align-items: center; gap: 10px; padding: 13px 11px; border: 0; border-bottom: 1px solid #27323a; background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: .16s; }
.camera-row:last-child { border-bottom: 0; }
.camera-row:hover { background: #162028; }
.camera-row .camera-icon { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #3a4a54; border-radius: 3px; color: #d9edf7; background: #10171c; box-shadow: inset 0 0 10px #0007; font-size: 13px; }
.camera-row strong, .camera-row small { display: block; }
.camera-row strong { font-size: 9px; }
.camera-row small { margin-top: 4px; color: #68757e; font-size: 7px; letter-spacing: .5px; }
.camera-row em { color: #8da1ad; font-size: 7px; font-style: normal; text-align: right; }

.fine-overlay { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(5,8,11,.18); }
.fine-ticket { width: min(470px, 88vw); padding: 24px; border: 1px solid #4e5d66; border-radius: 7px; background: linear-gradient(150deg, rgba(20,27,33,.985), rgba(8,12,16,.99)); box-shadow: 0 28px 90px #000c, inset 0 1px rgba(255,255,255,.04); color: #e5e9eb; }
.fine-ticket-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 11px; border-bottom: 1px solid #344048; color: #8d9ba4; font: 700 8px Consolas, monospace; letter-spacing: 1px; }
.fine-ticket h2 { margin: 19px 0 4px; font-family: Georgia,"Times New Roman",serif; font-size: 20px; font-weight: 500; }
.fine-ticket > strong { display: block; color: #d9c58b; font: 700 31px Consolas, monospace; }
.fine-ticket > p { min-height: 38px; margin: 12px 0 16px; color: #b9c1c6; font-size: 10px; line-height: 1.6; }
.fine-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fine-meta span { padding: 9px; border: 1px solid #303b43; color: #78858e; font-size: 8px; }
.fine-meta b { display: block; margin-top: 4px; color: #c6ced3; font-weight: 600; }
.fine-status { margin-top: 12px; padding: 10px; border-left: 2px solid #b59a69; background: #171814; color: #aaa082; font-size: 8px; line-height: 1.5; }
.fine-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.announcement-overlay { position: fixed; left: 50%; top: 7vh; z-index: 28; width: min(640px, 86vw); transform: translateX(-50%); pointer-events: none; }
.announcement-strip { padding: 15px 18px; border: 1px solid #40505a; border-left: 4px solid #829aa9; border-radius: 5px; background: linear-gradient(100deg, rgba(11,16,20,.97), rgba(21,29,35,.94)); box-shadow: 0 14px 45px #0009; }
.announcement-strip > div { display: flex; justify-content: space-between; color: #8998a2; font: 700 7px Consolas, monospace; letter-spacing: 1px; }
.announcement-strip h2 { margin: 7px 0 5px; font-family: Georgia,"Times New Roman",serif; font-size: 16px; font-weight: 500; }
.announcement-strip p { margin: 0; color: #b9c2c7; font-size: 9px; line-height: 1.55; }
.announcement-strip small { display: block; margin-top: 8px; color: #697780; font-size: 7px; }
.announcement-overlay[data-priority="urgent"] .announcement-strip { border-left-color: #bb6267; }
.announcement-overlay[data-priority="urgent"] #announcementPriority { color: #dc888c; }
.announcement-overlay[data-priority="high"] .announcement-strip { border-left-color: #b59a69; }

.cctv-overlay { position: fixed; inset: 0; z-index: 26; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px); }
.cctv-overlay::before { content:""; position:absolute; inset:24px; border:1px solid rgba(169,194,205,.42); box-shadow: inset 0 0 70px rgba(0,0,0,.32); }
.cctv-top { position: absolute; top: 37px; left: 45px; right: 45px; display: flex; align-items: center; gap: 9px; color: #d3dce0; font: 700 9px Consolas, monospace; letter-spacing: 1px; }
.cctv-top strong { margin-left: auto; padding: 7px 10px; border: 1px solid rgba(176,198,207,.35); background: rgba(4,8,10,.55); font-size: 8px; }
.rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #c7686c; box-shadow: 0 0 9px #c7686c; }
.cctv-bottom { position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); padding: 8px 12px; border: 1px solid rgba(159,183,193,.28); background: rgba(4,8,10,.6); color: #a7b5bc; font: 600 8px Consolas, monospace; letter-spacing: .6px; white-space: nowrap; }
.cctv-corner { position:absolute; width:42px; height:42px; border-color: rgba(190,210,218,.72); }
.cctv-corner.tl { top:24px; left:24px; border-top:3px solid; border-left:3px solid; }
.cctv-corner.tr { top:24px; right:24px; border-top:3px solid; border-right:3px solid; }
.cctv-corner.bl { bottom:24px; left:24px; border-bottom:3px solid; border-left:3px solid; }
.cctv-corner.br { bottom:24px; right:24px; border-bottom:3px solid; border-right:3px solid; }
.cctv-scanline { position:absolute; left:24px; right:24px; height:1px; top:30%; background:rgba(177,213,221,.08); animation:cctvScan 5s linear infinite; }
@keyframes cctvScan { from { top: 28px; } to { top: calc(100% - 28px); } }

@media (max-width: 900px) {
    .camera-grid { grid-template-columns: 1fr; }
    .fine-meta { grid-template-columns: 1fr; }
    .cctv-bottom { white-space: normal; width: calc(100% - 90px); text-align:center; }
}

:root {
    --surface: #090d11;
    --sidebar-surface: #10161b;
    --workspace-surface: #0b1014;
    --field-surface: #0c1115;
    --row-surface: #11171c;
}
html[data-theme="light"] {
    --bg: #e9eef2;
    --panel: #f7f9fa;
    --panel-2: #eef2f5;
    --line: #c4cdd4;
    --muted: #64727d;
    --text: #182229;
    --blue: #4f7087;
    --red: #a23f47;
    --gold: #886e3e;
    --surface: #edf2f5;
    --sidebar-surface: #e5ebef;
    --workspace-surface: #f5f7f8;
    --field-surface: #ffffff;
    --row-surface: #f7f9fa;
}

.terminal-frame { width: min(1640px, 96vw); height: min(920px, 94vh); }
.tablet { grid-template-columns: 286px 1fr; background: var(--workspace-surface); }
.sidebar { padding: 24px 18px 18px; background: var(--sidebar-surface); }
.brand { padding-bottom: 22px; }
.brand strong { font-size: 13px; }
.brand span { font-size: 9px; }
.nav { min-height: 42px; padding: 9px 11px; gap: 11px; font-size: 11.5px; letter-spacing: .15px; }
.nav b { font-weight: 650; }
.nav .nav-icon { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border: 1px solid #34424c; border-radius: 4px; color: #a5b4bd; background: rgba(255,255,255,.025); font: 700 13px Consolas, monospace; }
.nav.active .nav-icon { color: #e4ebef; border-color: #5f7483; background: #263641; box-shadow: inset 0 0 12px rgba(0,0,0,.28); }
.system-block span { font-size: 8.5px; }
.system-block b { font-size: 9.5px; }
.system-block small { font-size: 8px; }
.officer-card strong { font-size: 12.5px; }
.officer-card small { font-size: 9.5px; }
.device-bar { font-size: 9.5px; }
.device-bar b { font-size: 10px; }
.workspace header { min-height: 94px; padding: 21px 30px; }
.eyebrow { font-size: 8.5px; }
.workspace h1 { font-size: 25px; }
.secure { font-size: 8.5px; }
#view { padding: 25px 30px 34px; }
.stat span { font-size: 9.5px; }
.stat strong { font-size: 29px; }
.panel-head h2 { font-size: 11.5px; }
.panel-head small { font-size: 9.5px; }
.row { padding: 13px; }
.row strong { font-size: 11.5px; }
.row small { font-size: 9.5px; line-height: 1.45; }
.tag { font-size: 8.5px; }
.empty { font-size: 11px; }
.searchbar input, .field input, .field select, .field textarea { font-size: 11.5px; }
.btn { font-size: 10.5px; }
.identity h2 { font-size: 21px; }
.identity .cid { font-size: 11px; }
.fact { font-size: 10.5px; }
.section-title { font-size: 10px; }
.field label { font-size: 9.5px; }
.modal-head h2 { font-size: 17px; }
.toast { font-size: 10.5px; }
.camera-row strong { font-size: 10.5px; }
.camera-row small { font-size: 8.8px; }
.camera-row em { font-size: 8.5px; }

html[data-theme="light"] .terminal-frame { background: #eef2f5; border-color: #929fa8; box-shadow: 0 35px 95px #0007, 0 0 0 7px #22282d, 0 0 0 9px #68737b; }
html[data-theme="light"] .device-bar { background: linear-gradient(#d5dde2,#c7d0d6); color: #46545e; border-color: #aab5bd; }
html[data-theme="light"] .workspace header { background: rgba(239,244,247,.96); }
html[data-theme="light"] .panel, html[data-theme="light"] .stat, html[data-theme="light"] .officer-tile, html[data-theme="light"] .budget-hero > div { background: #f8fafb; }
html[data-theme="light"] .row, html[data-theme="light"] .searchbar input, html[data-theme="light"] .field input, html[data-theme="light"] .field select, html[data-theme="light"] .field textarea { background: var(--row-surface); color: var(--text); border-color: #cad3da; }
html[data-theme="light"] .nav:hover { background: #d8e0e5; color: #26343d; }
html[data-theme="light"] .nav.active { color: #172229; background: linear-gradient(90deg,#ccd8df,#e0e6ea); box-shadow: inset 3px 0 #536e80; }
html[data-theme="light"] .nav .nav-icon { color: #53636e; border-color: #b2bdc5; background: rgba(255,255,255,.45); }
html[data-theme="light"] .nav.active .nav-icon { color: #26343d; border-color: #8295a2; background: #edf2f5; }
html[data-theme="light"] .header-actions button, html[data-theme="light"] .modal-head button { color: #40505a; background: #f5f7f8; }
html[data-theme="light"] .modal-card { background: #f5f7f8; color: #182229; }
html[data-theme="light"] .fine-ticket { background: linear-gradient(150deg,#fbfcfd,#eef2f5); color: #1c272e; }
html[data-theme="light"] .fine-ticket > p { color: #495862; }

html[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--line); }
html[dir="rtl"] .nav { text-align: right; }
html[dir="rtl"] .workspace header, html[dir="rtl"] .panel-head, html[dir="rtl"] .row, html[dir="rtl"] .fine-ticket-top { direction: rtl; }
html[dir="rtl"] .header-actions { direction: ltr; }
html[dir="rtl"] .row-main, html[dir="rtl"] .identity, html[dir="rtl"] .field, html[dir="rtl"] .settings-card { text-align: right; }
html[dir="rtl"] .form-actions { justify-content: flex-start; }

.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.settings-card { padding: 21px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.settings-card .settings-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 14px; border: 1px solid #465762; border-radius: 5px; background: rgba(105,137,157,.10); color: #a9bdc9; font-size: 18px; }
.settings-card h2 { margin: 0 0 7px; font-size: 14px; }
.settings-card p { margin: 0 0 16px; color: var(--muted); font-size: 10.5px; line-height: 1.6; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segmented button { padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--row-surface); color: var(--text); cursor: pointer; font-size: 10.5px; font-weight: 700; }
.segmented button.active { border-color: #6f8797; background: #263843; color: #eff4f7; box-shadow: inset 0 0 18px rgba(0,0,0,.2); }
html[data-theme="light"] .segmented button.active { color: #172229; background: #d7e1e7; }

.mention-notify { position: fixed; top: 7.5vh; right: 28px; z-index: 50; width: min(430px, 35vw); min-height: 104px; display: grid; grid-template-columns: 4px 48px 1fr; overflow: hidden; border: 1px solid rgba(175,61,69,.82); border-radius: 7px; background: linear-gradient(115deg,rgba(39,13,16,.97),rgba(17,13,16,.97)); box-shadow: 0 18px 55px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.025) inset; transform: translateX(calc(100% + 45px)); opacity: 0; pointer-events: none; }
.mention-notify:not(.hidden) { animation: mentionIn .28s ease-out forwards; }
.mention-accent { background: #cf414b; box-shadow: 0 0 18px rgba(207,65,75,.55); }
.mention-icon { align-self: center; justify-self: center; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #984047; border-radius: 50%; background: #38171a; color: #ef8087; font: 800 16px Consolas,monospace; }
.mention-body { min-width: 0; padding: 13px 16px 13px 0; }
.mention-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.mention-top b { color: #ef7a82; font: 800 9px Consolas,monospace; letter-spacing: .9px; }
.mention-top span { color: #aa7377; font: 700 8px Consolas,monospace; }
.mention-body h2 { margin: 6px 0 4px; color: #f0e7e8; font-size: 13px; font-weight: 750; }
.mention-body p { margin: 0; color: #cbbabd; font-size: 10.5px; line-height: 1.45; white-space: normal; }
.mention-body small { display: block; margin-top: 7px; color: #8d7477; font-size: 8.5px; }
@keyframes mentionIn { to { transform: translateX(0); opacity: 1; } }
html[dir="rtl"] .mention-notify { right: auto; left: 28px; grid-template-columns: 1fr 48px 4px; }
html[dir="rtl"] .mention-accent { grid-column: 3; grid-row: 1; }
html[dir="rtl"] .mention-icon { grid-column: 2; grid-row: 1; }
html[dir="rtl"] .mention-body { grid-column: 1; grid-row: 1; padding: 13px 16px; text-align: right; }

.cctv-overlay { position: fixed; inset: 0; z-index: 26; pointer-events: none; background: radial-gradient(circle at center, transparent 48%, rgba(0,0,0,.10) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,.010) 0 1px, transparent 1px 4px); }
.cctv-overlay::before { display: none; }
.cctv-frame { position: absolute; inset: 26px; border: 1px solid rgba(207,224,231,.50); box-shadow: inset 0 0 0 1px rgba(0,0,0,.42), inset 0 0 85px rgba(0,0,0,.20); }
.cctv-topbar { position: absolute; top: 27px; left: 27px; right: 27px; height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 0 15px; border-bottom: 1px solid rgba(205,222,229,.36); background: linear-gradient(180deg,rgba(5,9,11,.72),rgba(5,9,11,.38)); color: #d9e5ea; }
.cctv-brand { display: flex; align-items: center; gap: 8px; }
.cctv-brand b { font: 800 10px Consolas,monospace; letter-spacing: 1.1px; }
.cctv-brand small { color: #84969e; font: 600 8px Consolas,monospace; letter-spacing: .8px; }
.cctv-topbar > strong { padding: 7px 13px; border: 1px solid rgba(190,211,220,.34); border-radius: 3px; background: rgba(4,8,10,.55); font: 700 9px Consolas,monospace; letter-spacing: .7px; }
.cctv-mode { justify-self: end; display: flex; align-items: center; gap: 8px; }
.cctv-mode span { color: #9fb0b8; font: 700 8px Consolas,monospace; }
.cctv-mode em { padding: 4px 7px; border: 1px solid rgba(207,65,75,.62); border-radius: 3px; color: #ef6971; background: rgba(85,20,25,.40); font: 800 8px Consolas,monospace; font-style: normal; }
.cctv-overlay.thermal .cctv-mode span { color: #f1bc62; }
.rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #db4a53; box-shadow: 0 0 9px rgba(219,74,83,.8); animation: cctvRec 1s infinite alternate; }
@keyframes cctvRec { to { opacity: .35; } }
.cctv-corner { width: 62px; height: 62px; border-color: rgba(220,234,239,.85); }
.cctv-corner.tl { top:26px;left:26px;border-top:3px solid;border-left:3px solid; }
.cctv-corner.tr { top:26px;right:26px;border-top:3px solid;border-right:3px solid; }
.cctv-corner.bl { bottom:26px;left:26px;border-bottom:3px solid;border-left:3px solid; }
.cctv-corner.br { bottom:26px;right:26px;border-bottom:3px solid;border-right:3px solid; }
.cctv-reticle { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%,-50%); opacity: .42; }
.cctv-reticle::before,.cctv-reticle::after { content:""; position:absolute; background: rgba(218,231,236,.70); }
.cctv-reticle::before { left:50%; top:0; bottom:0; width:1px; }
.cctv-reticle::after { top:50%; left:0; right:0; height:1px; }
.cctv-reticle i { position:absolute; inset:19px; border:1px solid rgba(218,231,236,.65); border-radius:50%; }
.cctv-reticle b { position:absolute; left:50%; top:50%; width:5px; height:5px; transform:translate(-50%,-50%); border:1px solid rgba(218,231,236,.92); border-radius:50%; }
.cctv-telemetry { position:absolute; left:46px; bottom:78px; display:grid; gap:3px; padding-left:10px; border-left:2px solid rgba(213,228,234,.55); }
.cctv-telemetry span { color:#e3edf0; font:800 9px Consolas,monospace; }
.cctv-telemetry b { color:#a9bac1; font:700 8px Consolas,monospace; }
.cctv-telemetry small { color:#778a92; font:600 7px Consolas,monospace; letter-spacing:.7px; }
.cctv-controls { position:absolute; left:50%; bottom:35px; transform:translateX(-50%); display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid rgba(179,200,208,.30); border-radius:4px; background:rgba(4,8,10,.68); color:#9eafb6; font:600 7.5px Consolas,monospace; white-space:nowrap; }
.cctv-controls span { display:flex; align-items:center; gap:5px; }
kbd { padding:3px 5px; border:1px solid rgba(194,211,218,.32); border-bottom-color:rgba(194,211,218,.55); border-radius:3px; background:rgba(255,255,255,.055); color:#d4dfe3; font:700 7px Consolas,monospace; }
.cctv-snapshot { position:absolute; top:88px; left:50%; transform:translateX(-50%); padding:8px 13px; border:1px solid rgba(116,179,137,.55); border-radius:4px; background:rgba(9,31,17,.72); color:#a9d5b7; font:700 8px Consolas,monospace; letter-spacing:.8px; }
.cctv-snapshot.error { border-color:rgba(201,83,91,.60); background:rgba(55,12,16,.72); color:#e08b91; }
.cctv-scanline { left:27px; right:27px; }

@media (max-width: 1100px) {
    .tablet { grid-template-columns: 250px 1fr; }
    .settings-grid, .camera-grid { grid-template-columns: 1fr; }
    .cctv-controls { gap:4px; font-size:6.8px; }
}

#view small { font-size: 9.5px; }
.case-main h3 { font-size: 12.5px; }
.case-main p { font-size: 10px; }
.case-main small { font-size: 9px; }
.officer-name h3 { font-size: 17px; }
.officer-name p { font-size: 9.5px; }
.officer-metrics span { font-size: 9.5px; }
.officer-points span { font-size: 8.5px; }
.ledger-type { font-size: 9px; }
.ledger-row strong { font-size: 10.5px; }
.ledger-row small { font-size: 9px; }
.ledger-row em { font-size: 9px; }
.form-note { font-size: 9.5px; }
.mugshot-stamp { font-size: 8.5px; }
.fine-ticket-top { font-size: 9px; }
.fine-ticket > p { font-size: 11px; }
.fine-meta span, .fine-status { font-size: 9.5px; }

html[data-theme="light"] .login-screen { background: radial-gradient(circle at 50% 25%, rgba(92,124,145,.18), transparent 35%), linear-gradient(120deg,rgba(232,238,242,.98),rgba(218,226,231,.96)); }
html[data-theme="light"] .login-card { border-color:#aebac2; background:linear-gradient(155deg,rgba(250,252,253,.98),rgba(232,238,242,.99)); color:#1d282f; box-shadow:0 28px 70px #0005,inset 0 1px rgba(255,255,255,.65); }
html[data-theme="light"] .login-card h1 { color:#1a252c; }
html[data-theme="light"] .login-card label, html[data-theme="light"] .login-subtitle, html[data-theme="light"] .login-notice { color:#5f6f79; }
html[data-theme="light"] .credential { border-color:#b9c4cb; background:#f7f9fa; }
html[data-theme="light"] .credential input { color:#20303a; background:transparent; }
html[data-theme="light"] .login-button { border-color:#658195; background:#d4e0e7; color:#213641; }
html[data-theme="light"] .login-footer { color:#596a74; }

.cctv-overlay { inset: 0; width: 100vw; height: 100vh; overflow: hidden; }
.cctv-frame {
    inset: 0;
    border: 2px solid rgba(214,230,236,.72);
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 95px rgba(0,0,0,.20);
}
.cctv-topbar { top: 2px; left: 2px; right: 2px; height: 52px; padding: 0 18px; }
.cctv-corner { width: 72px; height: 72px; z-index: 2; }
.cctv-corner.tl { top:0; left:0; border-top:4px solid; border-left:4px solid; }
.cctv-corner.tr { top:0; right:0; border-top:4px solid; border-right:4px solid; }
.cctv-corner.bl { bottom:0; left:0; border-bottom:4px solid; border-left:4px solid; }
.cctv-corner.br { bottom:0; right:0; border-bottom:4px solid; border-right:4px solid; }
.cctv-telemetry { left: 24px; bottom: 68px; }
.cctv-controls { bottom: 17px; }
.cctv-snapshot { top: 68px; }
.cctv-scanline { left: 2px; right: 2px; }
@keyframes cctvScan { from { top: 54px; } to { top: calc(100% - 3px); } }

button:disabled, .btn.busy { cursor: wait; opacity: .62; pointer-events: none; }
.modal { z-index: 70; }
.toast { z-index: 90; }

.mugshot-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    font-family: Consolas, 'Courier New', monospace;
    color: rgba(235,245,250,.96);
    text-shadow: 0 1px 8px rgba(0,0,0,.85);
}
.mugshot-overlay.hidden { display: none !important; }
.mugshot-overlay::before {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(230,240,245,.45);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 0 28px rgba(0,0,0,.35);
}
.mugshot-top, .mugshot-bottom {
    position: absolute;
    left: 34px;
    right: 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    opacity: .92;
}
.mugshot-top { top: 30px; }
.mugshot-bottom { bottom: 30px; }
.mugshot-plate {
    position: absolute;
    left: 50%;
    bottom: 74px;
    transform: translateX(-50%);
    min-width: 430px;
    padding: 14px 22px 15px;
    border: 1px solid rgba(255,255,255,.42);
    background: linear-gradient(180deg, rgba(7,12,16,.84), rgba(3,7,10,.70));
    box-shadow: 0 15px 55px rgba(0,0,0,.48), inset 0 0 18px rgba(255,255,255,.04);
    text-align: center;
}
.mugshot-plate small {
    display: block;
    color: #a7b4bc;
    font-size: 9px;
    letter-spacing: 2px;
    margin-bottom: 4px;
}
.mugshot-plate strong {
    display: block;
    color: #ffffff;
    font-size: 30px;
    letter-spacing: 3px;
    line-height: 1;
}
.mugshot-plate span {
    display: block;
    margin-top: 7px;
    color: #d7e2e7;
    font-size: 12px;
    letter-spacing: 1px;
}
.mugshot-plate em {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 8px;
    border: 1px solid rgba(255,190,80,.45);
    color: #ffd27a;
    background: rgba(80,48,8,.48);
    font-size: 9px;
    font-style: normal;
    letter-spacing: 1.4px;
}

.terminal-frame {
    transition: opacity .18s ease, transform .18s ease, width .18s ease, height .18s ease, border-radius .18s ease;
}
.terminal-frame.tablet-peek {
    opacity: .34;
    transform: scale(.985);
}
.terminal-frame.fullscreen-mdt {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.terminal-frame.fullscreen-mdt .login-screen,
.terminal-frame.fullscreen-mdt .tablet {
    height: calc(100vh - 31px);
}
.terminal-frame.fullscreen-mdt .device-bar {
    border-radius: 0;
}
.terminal-frame.fullscreen-mdt #view {
    padding-bottom: 44px;
}
#fullscreenButton {
    font-size: 15px;
    font-weight: 800;
}

.cctv-workspace { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr); gap:14px; align-items:start; }
.cctv-map-panel .panel-body { padding:0; }
.cctv-map-shell { position:relative; padding:12px; }
.cctv-map-viewport { position:relative; height:620px; overflow:hidden; border:1px solid #2d3942; border-radius:6px; background:#05090d; cursor:grab; box-shadow:inset 0 0 45px #000b; }
.cctv-map-viewport.dragging { cursor:grabbing; }
.cctv-map { position:absolute; left:50%; top:50%; height:100%; aspect-ratio:736/1000; transform:translate(-50%,-50%); transform-origin:center center; transition:transform .05s linear; background:#071019; }
.cctv-map-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; pointer-events:none; opacity:.98; filter:saturate(1.08) contrast(1.04) brightness(.92); }
.cctv-map.map-load-error { background:linear-gradient(135deg,#0e1820,#06090d); }
.cctv-map.map-load-error::before { content:"MAP IMAGE NOT LOADED"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#cfdae0; font:800 12px Consolas,monospace; letter-spacing:1px; z-index:1; }
.cctv-map::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at center, transparent 62%, rgba(4,9,13,.22) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 6px); }
.cctv-map-tools { position:absolute; right:22px; top:22px; z-index:3; display:flex; gap:6px; }
.btn.small { padding:7px 10px; font-size:8px; min-width:0; }
.cctv-pin { position:absolute; z-index:2; transform:translate(-50%,-50%); border:0; background:transparent; color:#f05252; cursor:pointer; text-align:center; filter:drop-shadow(0 3px 10px #000); }
.cctv-pin > span { width:24px; height:24px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.82); border-radius:50%; background:rgba(228,48,48,.94); color:#fff; font-size:12px; box-shadow:0 0 0 4px rgba(240,55,55,.16); }
.cctv-pin.pulse > span { animation:cctvPulse 1.8s infinite; }
.cctv-pin em { position:absolute; left:50%; top:28px; transform:translateX(-50%); display:block; min-width:92px; padding:6px 8px; border:1px solid #39464e; border-radius:4px; background:rgba(6,10,14,.86); color:#e5edf1; font-style:normal; font-size:8px; font-weight:800; letter-spacing:.45px; }
.cctv-pin em small { margin-left:6px; padding:2px 5px; border-radius:10px; background:#1d2a32; color:#9bb5c4; }
@keyframes cctvPulse { 0%{box-shadow:0 0 0 0 rgba(240,55,55,.38)} 70%{box-shadow:0 0 0 12px rgba(240,55,55,0)} 100%{box-shadow:0 0 0 0 rgba(240,55,55,0)} }
.cctv-sites.camera-grid { grid-template-columns:1fr; max-height:690px; overflow:auto; padding-right:4px; }
.camera-row.primary { background:linear-gradient(90deg, rgba(94,126,145,.16), transparent); border:1px solid #33434d; border-radius:4px; margin-bottom:6px; }
.camera-row.mini { grid-template-columns:36px minmax(0,1fr) 48px; padding:9px 10px; }
.camera-index { width:24px; height:24px; display:grid; place-items:center; border:1px solid #34434c; border-radius:4px; color:#9fb2bd; background:#10171c; font:800 9px Consolas, monospace; }
@media (max-width: 1150px) { .cctv-workspace { grid-template-columns:1fr; } .cctv-map-viewport { height:520px; } }

.html-camera-icon { position: relative; width: 16px; height: 12px; display: inline-block; box-sizing: border-box; border: 2px solid currentColor; border-radius: 3px; color: #e9f4f8; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02)); }
.html-camera-icon::before { content:""; position:absolute; left:2px; top:-5px; width:6px; height:3px; border-radius:2px 2px 0 0; background: currentColor; opacity:.88; }
.html-camera-icon::after { content:""; position:absolute; right:-6px; top:2px; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid currentColor; opacity:.95; }
.html-camera-icon i { position:absolute; left:5px; top:3px; width:4px; height:4px; border-radius:50%; background: currentColor; box-shadow:0 0 8px rgba(255,255,255,.35); }
.camera-row .camera-icon.drawn { color:#d9edf7; font-size:0; }
.cctv-pin > span { color:#fff; font-size:0; }
.cctv-pin > span .html-camera-icon { width:15px; height:11px; color:#fff; }
.cctv-pin em { transform: translate(calc(-50% + var(--label-x, 0px)), var(--label-y, 0px)); }
.cctv-map { height:100%; aspect-ratio:736/1000; }
.cctv-map-img { display:block; }

.cctv-workspace {
    grid-template-columns: minmax(0, 2.25fr) minmax(290px, .68fr);
    gap: 14px;
}
.cctv-map-shell { padding: 10px; }
.cctv-map-viewport {
    height: 690px;
    min-height: 600px;
    background: #071019;
    border-color: #34424c;
}
.cctv-map {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    left: 50%;
    top: 50%;
    border-radius: 4px;
    overflow: hidden;
    background: #071019;
}
.cctv-map.map-stretch .cctv-map-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.cctv-map.map-contain {
    width: min(100%, 736px);
    height: 100%;
    aspect-ratio: 736/1000;
}
.cctv-map.map-contain .cctv-map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cctv-pin {
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.7));
}
.cctv-pin > span {
    width: 26px;
    height: 26px;
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff6e6e, #d71920 68%, #8e090e);
    box-shadow: 0 0 0 2px rgba(160,8,13,.45), 0 0 16px rgba(244,40,45,.42);
}
.cctv-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 26px;
    width: 2px;
    height: 8px;
    transform: translateX(-50%);
    background: rgba(255,255,255,.80);
    border-radius: 2px;
}
.cctv-pin > span .html-camera-icon {
    width: 14px;
    height: 10px;
    color: #fff;
    border-width: 1.5px;
}
.cctv-pin > span .html-camera-icon::before { top: -4px; left: 2px; width: 5px; height: 2px; }
.cctv-pin > span .html-camera-icon::after { right: -5px; top: 2px; border-top-width: 3px; border-bottom-width: 3px; border-left-width: 5px; }
.cctv-pin > span .html-camera-icon i { left: 4px; top: 2px; width: 3px; height: 3px; }
.cctv-pin em {
    top: 32px;
    min-width: 78px;
    padding: 5px 7px;
    font-size: 7px;
    opacity: 0;
    pointer-events: none;
    transform: translate(calc(-50% + var(--label-x, 0px)), calc(var(--label-y, 0px) + 4px));
    transition: opacity .12s ease, transform .12s ease;
}
.cctv-pin.label-visible em,
.cctv-pin.label-hover:hover em {
    opacity: 1;
    transform: translate(calc(-50% + var(--label-x, 0px)), var(--label-y, 0px));
}
.cctv-pin.label-hover em { opacity: 0; }
.cctv-pin.label-hover:not(:hover) em { visibility: hidden; }
.cctv-pin.label-hover:hover em { visibility: visible; }
.cctv-pin em small { margin-left: 5px; padding: 1px 5px; font-size: 7px; }
.camera-row .camera-icon.drawn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(22,34,43,.86);
    border: 1px solid #33424b;
}
.camera-row .camera-icon.drawn .html-camera-icon {
    width: 17px;
    height: 12px;
    color: #e8f5fa;
}
@media (max-width: 1150px) {
    .cctv-map-viewport { height: 620px; }
}

.cctv-workspace {
    grid-template-columns: minmax(0, 2.35fr) minmax(285px, .64fr);
}
.cctv-map-shell {
    padding: 10px;
}
.cctv-map-viewport {
    height: 650px;
    min-height: 590px;
    background: #05090d;
    overflow: hidden;
}
.cctv-map {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: auto !important;
    aspect-ratio: 1500 / 1144;
    transform: translate(-50%,-50%);
    transform-origin: center center;
    overflow: visible;
    border-radius: 4px;
    background: #071019;
}
.cctv-map.map-stretch,
.cctv-map.map-contain {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1500 / 1144;
}
.cctv-map-img,
.cctv-map.map-stretch .cctv-map-img,
.cctv-map.map-contain .cctv-map-img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
    opacity:.98;
    filter: saturate(1.02) contrast(1.03) brightness(.96);
}
.cctv-map::after {
    background: radial-gradient(circle at center, transparent 70%, rgba(4,9,13,.15) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 7px);
}
.cctv-pin {
    width: 18px;
    height: 18px;
    padding: 0;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.75));
}
.cctv-pin > span {
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255,255,255,.95);
    background: linear-gradient(180deg, #ec3c3c, #a60c13);
    box-shadow: 0 0 0 1px rgba(105,0,0,.7), 0 0 8px rgba(239,40,43,.35);
}
.cctv-pin::after {
    top: 18px;
    height: 6px;
    width: 1.5px;
}
.cctv-pin > span .html-camera-icon {
    width: 10px;
    height: 7px;
    border-width: 1px;
}
.cctv-pin > span .html-camera-icon::before { top:-3px; left:1px; width:4px; height:2px; }
.cctv-pin > span .html-camera-icon::after { right:-4px; top:1px; border-top-width:3px; border-bottom-width:3px; border-left-width:4px; }
.cctv-pin > span .html-camera-icon i { left:3px; top:2px; width:2px; height:2px; }
.cctv-pin.pulse > span { animation: none; }
.cctv-pin em {
    top: 24px;
    min-width: 66px;
    padding: 4px 6px;
    font-size: 7px;
    background: rgba(4,8,11,.88);
}
.cctv-map-tools { right: 20px; top: 20px; }
@media (max-width: 1150px) {
    .cctv-map-viewport { height: 560px; min-height:520px; }
}

.cctv-map-viewport {
    overflow: hidden !important;
    position: relative;
    isolation: isolate;
    border: 1px solid #26333c;
}
.cctv-map {
    overflow: hidden !important;
    will-change: transform;
    max-width: none;
    max-height: none;
}
.cctv-map.map-stretch,
.cctv-map.map-contain {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1500 / 1144;
}
.cctv-map-img,
.cctv-map.map-stretch .cctv-map-img,
.cctv-map.map-contain .cctv-map-img {
    object-fit: cover !important;
}
.cctv-pin {
    width: var(--pin-size, 18px) !important;
    height: var(--pin-size, 18px) !important;
    display: grid;
    place-items: center;
    z-index: 5;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.82));
}
.cctv-pin > span {
    width: var(--pin-size, 18px) !important;
    height: var(--pin-size, 18px) !important;
    border: 1px solid rgba(255,255,255,.86) !important;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.22), 0 0 8px rgba(0,0,0,.35) !important;
}
.cctv-pin::after {
    top: var(--pin-size, 18px) !important;
    height: 5px !important;
    width: 1px !important;
    background: rgba(238,244,247,.75) !important;
}
.cctv-pin-bank > span {
    background: linear-gradient(180deg, #40b7ff, #126499) !important;
}
.cctv-pin-store > span {
    background: linear-gradient(180deg, #f5b33b, #b8670e) !important;
}
.cctv-pin-camera > span {
    background: linear-gradient(180deg, #6aa2b8, #294f61) !important;
}
.html-bank-icon,
.html-store-icon {
    position: relative;
    display: inline-block;
    color: #fff;
    box-sizing: border-box;
}
.html-bank-icon {
    width: 12px;
    height: 10px;
    border-bottom: 2px solid currentColor;
}
.html-bank-icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 4px solid currentColor;
}
.html-bank-icon::after {
    content: "";
    position: absolute;
    left: 1px;
    top: 5px;
    width: 10px;
    height: 4px;
    background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px);
}
.html-bank-icon i,
.html-bank-icon b { display: none; }
.html-store-icon {
    width: 12px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-top: 0;
    border-radius: 1px 1px 2px 2px;
}
.html-store-icon::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -4px;
    width: 12px;
    height: 4px;
    border-radius: 2px 2px 1px 1px;
    background: repeating-linear-gradient(90deg, currentColor 0 2px, rgba(255,255,255,.25) 2px 4px);
}
.html-store-icon::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: 0;
    width: 3px;
    height: 5px;
    background: currentColor;
    opacity: .92;
}
.html-store-icon i,
.html-store-icon b { display: none; }
.cctv-pin > span .html-bank-icon { width: 12px; height: 10px; }
.cctv-pin > span .html-store-icon { width: 12px; height: 10px; }
.cctv-pin > span .html-camera-icon { width: 10px; height: 7px; }
.camera-row .camera-icon.drawn.icon-bank {
    background: linear-gradient(180deg, rgba(26,91,128,.75), rgba(12,31,45,.9));
    border-color: #2d799c;
}
.camera-row .camera-icon.drawn.icon-store {
    background: linear-gradient(180deg, rgba(130,81,18,.78), rgba(48,27,10,.95));
    border-color: #986824;
}
.camera-row .camera-icon.drawn .html-bank-icon,
.camera-row .camera-icon.drawn .html-store-icon {
    transform: scale(1.25);
}

.cctv-map-viewport{overflow:hidden!important;contain:layout paint size;}
.cctv-map{aspect-ratio:768/1024!important;height:100%!important;max-width:none!important;}
.cctv-map.map-contain,.cctv-map.map-stretch{width:auto!important;height:100%!important;}
.cctv-map-img,.cctv-map.map-contain .cctv-map-img,.cctv-map.map-stretch .cctv-map-img{object-fit:contain!important;width:100%!important;height:100%!important;}
.cctv-pin{filter:drop-shadow(0 1px 4px rgba(0,0,0,.55))!important;}
.cctv-pin>span{width:20px!important;height:20px!important;border-radius:4px!important;border:1px solid rgba(255,255,255,.92)!important;box-shadow:none!important;padding:0!important;display:grid!important;place-items:center!important;}
.cctv-pin::after{display:none!important;}
.cctv-pin-bank>span{background:linear-gradient(180deg,#5cc6ff,#238bff)!important;}
.cctv-pin-store>span{background:linear-gradient(180deg,#ffb258,#ff6c44)!important;}
.cctv-pin-camera>span{background:linear-gradient(180deg,#ff6d6d,#de3535)!important;}
.cctv-pin > span .html-bank-icon,.camera-row .camera-icon.drawn .html-bank-icon{position:relative;width:12px;height:10px;display:inline-block;color:#fff;box-sizing:border-box;border:2px solid currentColor;border-top:none;border-radius:1px;background:transparent;}
.cctv-pin > span .html-bank-icon::before,.camera-row .camera-icon.drawn .html-bank-icon::before{content:'';position:absolute;left:-1px;right:-1px;top:-5px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:5px solid currentColor;}
.cctv-pin > span .html-bank-icon::after,.camera-row .camera-icon.drawn .html-bank-icon::after{content:'';position:absolute;left:1px;right:1px;bottom:1px;height:2px;background:currentColor;box-shadow:3px 0 0 currentColor,6px 0 0 currentColor;}
.cctv-pin > span .html-store-icon,.camera-row .camera-icon.drawn .html-store-icon{position:relative;width:12px;height:9px;display:inline-block;border:2px solid #fff;border-top:none;border-radius:1px;background:transparent;box-sizing:border-box;}
.cctv-pin > span .html-store-icon::before,.camera-row .camera-icon.drawn .html-store-icon::before{content:'';position:absolute;left:-2px;right:-2px;top:-4px;height:4px;border-radius:2px 2px 0 0;background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 6px), #fff;opacity:.95;}
.cctv-pin > span .html-store-icon::after,.camera-row .camera-icon.drawn .html-store-icon::after{content:'';position:absolute;left:4px;bottom:0;width:2px;height:4px;background:#fff;}
.cctv-pin > span .html-camera-icon,.camera-row .camera-icon.drawn .html-camera-icon{position:relative;width:11px;height:7px;display:inline-block;box-sizing:border-box;border:2px solid currentColor;border-radius:2px;color:#fff;}
.cctv-pin > span .html-camera-icon::before,.camera-row .camera-icon.drawn .html-camera-icon::before{content:'';position:absolute;left:1px;top:-3px;width:4px;height:2px;background:currentColor;border-radius:1px 1px 0 0;}
.cctv-pin > span .html-camera-icon::after,.camera-row .camera-icon.drawn .html-camera-icon::after{content:'';position:absolute;right:-4px;top:1px;border-top:2px solid transparent;border-bottom:2px solid transparent;border-left:4px solid currentColor;}
.cctv-pin > span .html-camera-icon i,.camera-row .camera-icon.drawn .html-camera-icon i{position:absolute;left:3px;top:1px;width:2px;height:2px;border-radius:50%;background:currentColor;}
.cctv-pin em{display:none!important;}
.camera-row.primary .camera-icon{width:18px;height:18px;border-radius:4px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);}
.camera-row-primary,.camera-row.primary{overflow:hidden;}
.camera-row-primary .html-bank-icon,.camera-row.primary.camera-row-bank .camera-icon{color:#75c7ff;}
.camera-row-primary .html-store-icon,.camera-row.primary.camera-row-store .camera-icon{color:#ffb270;}

.financial-list{display:grid;gap:10px;}
.financial-alert{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:14px;border:1px solid #2a3740;border-radius:6px;background:linear-gradient(120deg,rgba(20,28,34,.94),rgba(10,15,19,.96));}
.financial-alert h3{margin:7px 0 5px;font-size:14px;color:#f2f6f8;letter-spacing:.4px;}
.financial-alert p{margin:0;color:#aebbc3;font-size:11px;line-height:1.55;}
.financial-alert small{display:block;margin-top:7px;color:#6f8794;font-size:9px;text-transform:uppercase;letter-spacing:.6px;}
.financial-alert aside{display:grid;gap:8px;justify-items:end;min-width:135px;}
.financial-alert aside b{font-size:18px;color:#ffb465;}
.financial-alert aside span{font-size:10px;color:#ff7878;text-transform:uppercase;}
.finance-type{display:inline-block;padding:4px 7px;border-radius:999px;background:#31151b;color:#ff7d83;border:1px solid #74333b;font-size:9px;font-weight:900;letter-spacing:.6px;}

.mention-notify{z-index:999999!important;top:6vh!important;right:30px!important;width:min(470px,38vw)!important;border-color:rgba(255,70,82,.92)!important;box-shadow:0 20px 70px rgba(0,0,0,.72),0 0 36px rgba(220,57,69,.18)!important;}
.mention-icon{background:#4b1318!important;color:#ff8b92!important;box-shadow:0 0 18px rgba(255,70,82,.25)!important;}
.mention-body h2{font-size:14.5px!important;}
.mention-body p{font-size:11.5px!important;}
.cctv-overlay,.cctv-workspace,.cctv-map-panel,.cctv-sites{display:none!important;}
@media (max-width: 900px){.mention-notify{width:calc(100vw - 36px)!important;right:18px!important;}}

.nav{position:relative;}
.nav.has-mention::after{
    content:attr(data-badge);
    position:absolute;
    top:7px;
    right:9px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:grid;
    place-items:center;
    border-radius:999px;
    font:900 10px Consolas,monospace;
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 0 16px rgba(0,0,0,.36);
}
.nav.has-mention.mention-red::after{background:#5a151b;color:#ff929a;border-color:#c74650;box-shadow:0 0 18px rgba(221,54,66,.35);}
.nav.has-mention.mention-yellow::after{background:#5a4514;color:#ffd98a;border-color:#d49a30;box-shadow:0 0 18px rgba(245,179,55,.28);}
.nav.has-mention.mention-green::after{background:#153f2a;color:#8dffc1;border-color:#2faf6f;box-shadow:0 0 18px rgba(51,208,120,.25);}
html[dir="rtl"] .nav.has-mention::after{right:auto;left:9px;}
.mention-notify[data-priority="red"]{border-color:rgba(255,70,82,.95)!important;background:linear-gradient(115deg,rgba(48,10,14,.98),rgba(18,12,14,.98))!important;}
.mention-notify[data-priority="red"] .mention-accent{background:#e13f4b!important;box-shadow:0 0 22px rgba(255,65,78,.65)!important;}
.mention-notify[data-priority="red"] .mention-icon{background:#4b1318!important;color:#ff8b92!important;border-color:#af3c45!important;}
.mention-notify[data-priority="red"] .mention-top b,.mention-notify[data-priority="red"] .mention-body h2{color:#ffd7da!important;}
.mention-notify[data-priority="yellow"]{border-color:rgba(224,169,64,.95)!important;background:linear-gradient(115deg,rgba(49,37,12,.98),rgba(20,16,11,.98))!important;}
.mention-notify[data-priority="yellow"] .mention-accent{background:#e0a940!important;box-shadow:0 0 22px rgba(224,169,64,.52)!important;}
.mention-notify[data-priority="yellow"] .mention-icon{background:#4b3812!important;color:#ffd887!important;border-color:#b8862d!important;}
.mention-notify[data-priority="yellow"] .mention-top b,.mention-notify[data-priority="yellow"] .mention-body h2{color:#fff0cf!important;}
.mention-notify[data-priority="green"]{border-color:rgba(58,191,117,.9)!important;background:linear-gradient(115deg,rgba(12,42,26,.98),rgba(11,17,14,.98))!important;}
.mention-notify[data-priority="green"] .mention-accent{background:#37bd73!important;box-shadow:0 0 22px rgba(55,189,115,.46)!important;}
.mention-notify[data-priority="green"] .mention-icon{background:#143d28!important;color:#8effc2!important;border-color:#32a867!important;}
.mention-notify[data-priority="green"] .mention-top b,.mention-notify[data-priority="green"] .mention-body h2{color:#d9ffea!important;}
.tag.red{background:#43141a!important;color:#ff969e!important;border-color:#91404a!important;}
.tag.yellow,.tag.gold{background:#453514!important;color:#ffd687!important;border-color:#957133!important;}
.tag.green{background:#143b29!important;color:#8dffc1!important;border-color:#2e8d5d!important;}
.announcement-row.red{border-left:3px solid #d84854;}
.announcement-row.yellow{border-left:3px solid #d6a23d;}
.announcement-row.green{border-left:3px solid #39b974;}
html[dir="rtl"] .announcement-row.red,html[dir="rtl"] .announcement-row.yellow,html[dir="rtl"] .announcement-row.green{border-left:0;border-right-width:3px;border-right-style:solid;}
html[dir="rtl"] .announcement-row.red{border-right-color:#d84854;}html[dir="rtl"] .announcement-row.yellow{border-right-color:#d6a23d;}html[dir="rtl"] .announcement-row.green{border-right-color:#39b974;}

.module-toolbar{display:flex;gap:9px;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap}
.module-toolbar .searchbar{flex:1;min-width:260px;margin:0}
.record-code{min-width:72px;font:800 10px Consolas,monospace;letter-spacing:.6px;color:#aab9c2}
.record-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.record-meta small{color:var(--muted)}
.module-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.module-summary .stat{min-height:74px}
.status-pill{display:inline-flex;align-items:center;min-height:23px;padding:3px 8px;border:1px solid #3c4a54;border-radius:999px;background:#121a20;color:#b6c2ca;font-size:9px;font-weight:700}
.status-pill.alert{border-color:#694047;color:#f0a0a7;background:#241417}
.status-pill.good{border-color:#375848;color:#9fd2b6;background:#102018}
.compact-card{padding:12px 14px;border:1px solid var(--line);border-radius:5px;background:#0d1318}
.compact-card h3{margin:0 0 7px;font-size:11px}
.compact-card p{margin:0;color:#8e9aa2;font-size:9px;line-height:1.55}
.charge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.charge-card{padding:14px;border:1px solid var(--line);border-radius:5px;background:#0d1318}
.charge-card header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:0;border:0;background:none;min-height:0}
.charge-card h3{margin:0;font-size:11px}
.charge-card p{color:#89959d;font-size:9px;line-height:1.5}
.charge-values{display:flex;gap:8px;flex-wrap:wrap}
.charge-values span{padding:5px 7px;border:1px solid #2f3b44;border-radius:4px;color:#aeb9c0;font:700 9px Consolas,monospace}
.law-card{padding:15px;border-bottom:1px solid var(--line)}
.law-card:last-child{border-bottom:0}
.law-card h3{margin:0 0 5px;font-size:12px}
.law-card p{margin:8px 0 0;color:#96a1a8;font-size:9px;line-height:1.65}
.audit-row{display:grid;grid-template-columns:150px 100px 120px 1fr 145px;gap:10px;align-items:center;padding:10px 13px;border-bottom:1px solid var(--line);font-size:9px}
.audit-row:last-child{border-bottom:0}
.audit-row b{font-size:9px}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:280px;overflow:auto;padding:7px;border:1px solid var(--line);border-radius:5px}
.checkbox-option{display:flex;gap:8px;align-items:flex-start;padding:8px;border:1px solid #26323a;border-radius:4px;background:#0d1318;font-size:9px}
.checkbox-option input{margin-top:2px}
.chain-list{display:grid;gap:6px;margin-top:9px}
.chain-item{padding:8px 10px;border-left:2px solid #536978;background:#0d1318;font-size:8.5px;color:#9aa6ae}
.restricted-nav.nav-hidden{display:none!important}
html[data-theme="light"] .charge-card,
html[data-theme="light"] .compact-card,
html[data-theme="light"] .checkbox-option,
html[data-theme="light"] .chain-item{background:#edf2f5}
@media (max-width:1100px){.module-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.charge-grid{grid-template-columns:1fr}.audit-row{grid-template-columns:110px 80px 100px 1fr}}

.terminal-frame {
    width: min(1580px, 96vw);
    height: min(940px, 95vh);
}
.tablet {
    grid-template-columns: 228px minmax(0, 1fr);
}
.sidebar {
    padding: 14px 10px 10px;
    min-height: 0;
}
.brand {
    gap: 9px;
    padding: 0 6px 10px;
}
.brand-logo {
    width: 44px;
    height: 44px;
}
.brand strong { font-size: 10.5px; }
.brand span { margin-top: 3px; font-size: 6.5px; }
nav {
    gap: 2px;
    padding-right: 5px;
    scrollbar-width: auto;
    scrollbar-color: #61717d #11171c;
}
nav::-webkit-scrollbar,
#view::-webkit-scrollbar,
#modalBody::-webkit-scrollbar,
.checkbox-grid::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
nav::-webkit-scrollbar-track,
#view::-webkit-scrollbar-track,
#modalBody::-webkit-scrollbar-track,
.checkbox-grid::-webkit-scrollbar-track {
    background: #11171c;
    border-radius: 8px;
}
nav::-webkit-scrollbar-thumb,
#view::-webkit-scrollbar-thumb,
#modalBody::-webkit-scrollbar-thumb,
.checkbox-grid::-webkit-scrollbar-thumb {
    background: #52636f;
    border-radius: 8px;
    border: 2px solid #11171c;
}
.nav {
    min-height: 30px;
    padding: 4px 8px;
    gap: 8px;
    font-size: 10.25px;
    line-height: 1.1;
}
.nav .nav-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    font-size: 10px;
}
.system-block {
    margin-top: 7px;
    padding: 7px 6px;
}
.system-block span { font-size: 6px; }
.system-block b { margin-top: 4px; font-size: 7px; }
.system-block small { margin-top: 3px; font-size: 6px; }
.officer-card {
    padding: 8px 6px 0;
}
.officer-card strong { font-size: 9.5px; }
.officer-card small { margin-top: 2px; font-size: 7px; }

.workspace header {
    min-height: 72px;
    padding: 13px 20px;
}
.workspace h1 { font-size: 20px; }
#view { padding: 17px 20px 28px; }

.view-help {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    margin: 0 0 14px;
    padding: 11px 13px;
    border: 1px solid #31414c;
    border-radius: 5px;
    background: linear-gradient(135deg, rgba(45,63,75,.32), rgba(12,18,23,.9));
}
.view-help-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid #536b7a;
    border-radius: 50%;
    color: #c7d5dd;
    background: #18242c;
    font: 800 12px Consolas, monospace;
}
.view-help strong {
    display: block;
    margin: 1px 0 4px;
    color: #dbe3e8;
    font-size: 10.5px;
}
.view-help p {
    margin: 0;
    color: #98a7b0;
    font-size: 9.5px;
    line-height: 1.65;
}

.modal {
    padding: 12px;
}
.modal-card {
    width: min(820px, 94vw);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-card.modal-wide {
    width: min(1180px, 96vw);
}
.modal-head {
    flex: 0 0 auto;
    padding: 13px 16px;
}
#modalBody {
    min-height: 0;
    overflow: auto;
    padding: 15px 16px 17px;
    overscroll-behavior: contain;
}
.form-grid {
    align-items: start;
}
.form-note {
    display: block;
    padding: 9px 11px;
    border: 1px solid #32414b;
    border-radius: 4px;
    background: rgba(45,62,73,.18);
    color: #9eacb5;
    line-height: 1.55;
}
.booking-guide {
    display: block;
    padding: 10px 12px;
    border: 1px solid #4b5b65;
    border-radius: 5px;
    background: linear-gradient(135deg, rgba(71,91,104,.22), rgba(12,18,23,.7));
}
.booking-guide b {
    display: block;
    margin-bottom: 5px;
    color: #dce5ea;
    font-size: 10px;
}
.booking-guide span {
    display: block;
    color: #9eabb3;
    font-size: 9px;
    line-height: 1.65;
}

.booking-form .booking-charge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
    gap: 7px;
    padding: 8px;
}
.booking-form .checkbox-option {
    min-height: 58px;
    padding: 8px 9px;
    align-items: center;
}
.booking-form .checkbox-option span {
    min-width: 0;
    line-height: 1.35;
}
.booking-form .checkbox-option b {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 8.8px;
}
.booking-form .checkbox-option small {
    display: block;
    margin-top: 3px;
    color: #87969f;
    white-space: normal;
    font-size: 7.8px;
}

html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    font-family: Tahoma, "Segoe UI", Arial, sans-serif;
}
html[dir="rtl"] .view-help {
    grid-template-columns: minmax(0, 1fr) 30px;
    text-align: right;
}
html[dir="rtl"] .view-help-icon {
    grid-column: 2;
    grid-row: 1;
}
html[dir="rtl"] .view-help > div:last-child {
    grid-column: 1;
    grid-row: 1;
}
html[dir="rtl"] .field label,
html[dir="rtl"] .panel-head h2,
html[dir="rtl"] .section-title {
    letter-spacing: 0;
    text-transform: none;
}
html[dir="rtl"] .checkbox-option {
    text-align: right;
}
html[dir="rtl"] .checkbox-option input {
    flex: 0 0 auto;
}
html[dir="rtl"] .modal-head {
    direction: rtl;
}
html[dir="rtl"] .modal-head button {
    margin-right: auto;
    margin-left: 0;
}
html[dir="rtl"] .record-code {
    direction: ltr;
    text-align: center;
}
html[dir="rtl"] .cid,
html[dir="rtl"] .vehicle-id strong {
    direction: ltr;
    unicode-bidi: isolate;
}

html[data-theme="light"] .view-help,
html[data-theme="light"] .booking-guide,
html[data-theme="light"] .form-note {
    background: #edf2f5;
    color: #44535d;
    border-color: #bcc9d1;
}
html[data-theme="light"] .view-help strong,
html[data-theme="light"] .booking-guide b {
    color: #273640;
}
html[data-theme="light"] .view-help p,
html[data-theme="light"] .booking-guide span {
    color: #5d6c75;
}

@media (max-height: 820px) {
    .terminal-frame { height: 97vh; }
    .sidebar { padding-top: 9px; padding-bottom: 7px; }
    .brand { padding-bottom: 6px; }
    .brand-logo { width: 36px; height: 36px; }
    .nav { min-height: 27px; padding-top: 3px; padding-bottom: 3px; font-size: 9.5px; }
    .nav .nav-icon { width: 20px; height: 20px; flex-basis: 20px; }
    .system-block { padding-top: 5px; padding-bottom: 5px; }
    .officer-card { padding-top: 5px; }
    .workspace header { min-height: 62px; padding-top: 9px; padding-bottom: 9px; }
    #view { padding-top: 13px; }
    .modal-card { max-height: 96vh; }
    .booking-form .booking-charge-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-height: 40vh;
        overflow: auto;
    }
}
@media (max-width: 1180px) {
    .tablet { grid-template-columns: 210px minmax(0, 1fr); }
    .booking-form .booking-charge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
    .modal-card,
    .modal-card.modal-wide { width: 97vw; }
    .booking-form .booking-charge-grid {
        grid-template-columns: 1fr;
        max-height: 42vh;
        overflow: auto;
    }
    .form-grid { grid-template-columns: 1fr; }
    .field,
    .field.full,
    .form-actions { grid-column: 1; }
}

.terminal-frame {
    width: min(1780px, 98vw) !important;
    height: min(1000px, 97vh) !important;
}
.tablet { grid-template-columns: 292px minmax(0, 1fr) !important; min-height: 0; }
.sidebar { min-height: 0 !important; overflow: hidden !important; padding: 16px 13px 12px !important; }
.brand { flex: 0 0 auto; padding: 0 7px 13px !important; }
.brand strong { font-size: 12.5px !important; }
.brand span { font-size: 8px !important; }
nav {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    gap: 3px !important;
    padding: 2px 8px 8px 2px !important;
}
.nav { min-height: 38px !important; padding: 7px 10px !important; gap: 10px !important; font-size: 12.25px !important; line-height: 1.25 !important; flex: 0 0 auto; }
.nav .nav-icon { width: 25px !important; height: 25px !important; flex-basis: 25px !important; font-size: 11px !important; }
.nav.has-chat::after { content: attr(data-badge); margin-inline-start: auto; color: #8ff0bc; font-size: 16px; line-height: 1; }
.system-block { flex: 0 0 auto; margin-top: 8px !important; padding: 8px !important; }
.system-block span { font-size: 7.5px !important; }
.system-block b { font-size: 8.5px !important; }
.system-block small { font-size: 7px !important; }
.officer-card { flex: 0 0 auto; padding: 9px 7px 0 !important; }
.officer-card strong { font-size: 11.5px !important; }
.officer-card small { font-size: 9px !important; }
.workspace { min-width: 0; min-height: 0 !important; height: 100%; overflow: hidden !important; display: flex; flex-direction: column; }
.workspace header { flex: 0 0 auto; min-height: 82px !important; padding: 14px 22px !important; }
.workspace h1 { font-size: 24px !important; }
.eyebrow { font-size: 8.5px !important; }
#view {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 20px 23px 38px !important;
}
nav::-webkit-scrollbar, #view::-webkit-scrollbar, #modalBody::-webkit-scrollbar, .checkbox-grid::-webkit-scrollbar, .chat-feed::-webkit-scrollbar { width: 11px !important; }
nav::-webkit-scrollbar-thumb, #view::-webkit-scrollbar-thumb, #modalBody::-webkit-scrollbar-thumb, .checkbox-grid::-webkit-scrollbar-thumb, .chat-feed::-webkit-scrollbar-thumb { background: #6d7d88 !important; border: 2px solid #10161b !important; min-height: 42px; }
.panel-head h2 { font-size: 12.5px !important; }
.panel-head small { font-size: 10px !important; }
.panel-body { padding: 13px !important; }
.row { padding: 14px !important; }
.row strong { font-size: 12.25px !important; }
.row small { font-size: 10.25px !important; line-height: 1.55 !important; }
.btn { font-size: 11px !important; padding: 10px 14px !important; }
.field label { font-size: 10.25px !important; }
.searchbar input, .field input, .field select, .field textarea { font-size: 12px !important; min-height: 40px; }
.field textarea { min-height: 104px; }
.view-help strong { font-size: 11.5px !important; }
.view-help p { font-size: 10.5px !important; }
.charge-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; align-items: stretch; padding-bottom: 22px; }
.charge-card { min-height: 175px; padding: 16px !important; }
.charge-card h3 { font-size: 13px !important; }
.charge-card p { font-size: 10.5px !important; line-height: 1.7 !important; }
.charge-values span { font-size: 9.5px !important; }
.modal-card { max-height: 96vh !important; }
#modalBody { min-height: 0 !important; overflow-y: scroll !important; scrollbar-gutter: stable; }
.booking-form .booking-charge-grid { min-height: 0; }
.profile { align-items: start; padding-bottom: 28px; }
.profile-content { min-width: 0; padding-bottom: 28px; }
.live-weapon-panel { margin-bottom: 14px; }

.chat-layout { height: 100%; min-height: 560px; display: flex; flex-direction: column; gap: 12px; }
.chat-topbar { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.chat-topbar > div:first-child strong { display:block; font-size:12px; }
.chat-topbar > div:first-child small { display:block; margin-top:4px; color:var(--muted); font-size:8.5px; }
.chat-channels { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.chat-channel { border:1px solid #36444e; border-radius:5px; background:#11181d; color:#91a0aa; padding:8px 11px; cursor:pointer; font-size:10px; font-weight:700; }
.chat-channel.active { border-color:#668194; background:#263843; color:#eef4f7; }
.chat-panel { flex: 1 1 0; min-height: 0; display:flex; flex-direction:column; overflow:hidden; }
.chat-feed { flex:1 1 0; min-height:0; overflow-y:scroll; overscroll-behavior:contain; scrollbar-gutter:stable; padding:12px; display:grid; align-content:start; gap:8px; }
.chat-message { display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; padding:10px 12px; border:1px solid #28343d; border-radius:6px; background:#0d1318; }
.chat-message.mine { border-color:#395361; background:#101a20; }
.chat-avatar { width:40px; height:40px; display:grid; place-items:center; border:1px solid #40515d; border-radius:5px; background:#17232b; color:#b6c6cf; font:800 12px Consolas,monospace; }
.chat-message-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.chat-message-head strong { font-size:11px; }
.chat-message-head span { padding:3px 6px; border:1px solid #34444f; border-radius:999px; color:#8fa2ad; font-size:8px; }
.chat-message-head time { margin-inline-start:auto; color:#65747e; font-size:8px; }
.chat-message p { margin:6px 0 0; color:#c6cdd2; font-size:10.5px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-composer { flex:0 0 auto; display:grid; grid-template-columns:minmax(0,1fr) 100px; gap:9px; padding:11px; border-top:1px solid var(--line); background:#0b1014; }
.chat-composer textarea { resize:none; min-height:58px; max-height:110px; border:1px solid #34424c; border-radius:5px; background:#10171c; color:#d9e0e4; padding:10px 11px; font-size:11px; outline:none; }
html[data-theme="light"] .chat-channel,html[data-theme="light"] .chat-message,html[data-theme="light"] .chat-composer,html[data-theme="light"] .chat-composer textarea{background:#eef3f6;color:#24323b;border-color:#bdc9d0;}
html[dir="rtl"] .chat-message, html[dir="rtl"] .chat-topbar { direction:rtl; text-align:right; }
html[dir="rtl"] .chat-channels { justify-content:flex-start; }

@media (max-height: 850px) {
    .terminal-frame { height: 98vh !important; }
    .workspace header { min-height: 70px !important; }
    .nav { min-height: 34px !important; padding-top:5px !important; padding-bottom:5px !important; }
    .brand { padding-bottom:8px !important; }
    .system-block { display:none; }
    #view { padding-top:15px !important; }
}
@media (max-width: 1200px) {
    .tablet { grid-template-columns: 250px minmax(0,1fr) !important; }
    .nav { font-size:11.5px !important; }
    .charge-grid { grid-template-columns:1fr !important; }
}

.nav { font-size: 13px !important; }
.nav .nav-icon { font-size: 11.5px !important; }
.row strong { font-size: 12.75px !important; }
.row small { font-size: 10.75px !important; }
.btn { font-size: 11.5px !important; }
.linked-evidence-list {
    max-height: 430px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.linked-evidence-list::-webkit-scrollbar { width: 11px; }
.linked-evidence-list::-webkit-scrollbar-thumb { background: #6d7d88; border: 2px solid #10161b; min-height: 42px; }
@media (max-height: 850px) {
    .linked-evidence-list { max-height: 330px; }
    .nav { font-size: 12px !important; }
}

/* Standalone storefront demo */
.demo-ribbon{position:fixed;z-index:20000;top:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid rgba(181,154,105,.45);background:rgba(8,12,16,.94);backdrop-filter:blur(10px);box-shadow:0 12px 34px rgba(0,0,0,.35);border-radius:10px;color:#e4e8eb;font:600 12px/1.2 Arial,sans-serif;letter-spacing:.02em;max-width:calc(100vw - 28px)}
.demo-ribbon strong{color:#d9b976;letter-spacing:.12em;white-space:nowrap}.demo-ribbon span{color:#aeb8c0;white-space:nowrap}.demo-ribbon button{border:1px solid #3a4651;background:#111820;color:#e4e8eb;border-radius:7px;padding:6px 9px;font-weight:700;cursor:pointer;white-space:nowrap}.demo-ribbon button:hover{background:#1b252e}
@media(max-width:720px){.demo-ribbon{top:6px;gap:7px;padding:7px 8px;font-size:10px}.demo-ribbon span{max-width:45vw;overflow:hidden;text-overflow:ellipsis}.demo-ribbon button{padding:5px 7px;font-size:10px}}

/* ========================================================================== */
/* SKY Police MDT — standalone product showcase                               */
/* ========================================================================== */
html { scroll-behavior: smooth; background: #05080b; }
html, body.site-body { width: 100%; min-height: 100%; height: auto; overflow-x: hidden; overflow-y: auto; }
body.site-body {
    margin: 0;
    color: #eef3f7;
    background:
        radial-gradient(circle at 16% 8%, rgba(93,132,158,.14), transparent 27rem),
        radial-gradient(circle at 88% 20%, rgba(181,154,105,.08), transparent 24rem),
        linear-gradient(180deg,#06090d 0%,#090e13 38%,#060a0e 100%);
    font-family: Tahoma, "Segoe UI", Arial, sans-serif;
}
body.site-body::before {
    content:"";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom,rgba(0,0,0,.75),transparent 72%);
}
.site-noise { position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.22; background:radial-gradient(circle at 50% 10%,transparent 0,rgba(0,0,0,.32) 72%); }
.site-header, .site-main, .site-footer { direction: rtl; }
.site-main { display:block; }
.site-header {
    position: sticky;
    top: 0;
    z-index: 12000;
    width: min(1480px, calc(100% - 48px));
    min-height: 74px;
    margin: 18px auto 0;
    padding: 10px 12px 10px 18px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    border: 1px solid rgba(125,146,162,.24);
    border-radius: 14px;
    background: rgba(7,11,15,.82);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 60px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.025);
}
.site-brand { justify-self:start; display:flex; align-items:center; gap:10px; color:#edf3f6; text-decoration:none; direction:ltr; }
.site-brand-mark { width:44px; height:44px; display:grid; place-items:center; border:1px solid #38454e; border-radius:10px; background:#0d141a; box-shadow:inset 0 0 18px rgba(120,150,170,.06); }
.site-brand-mark img { width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 4px 8px #0009); }
.site-brand b,.site-brand small { display:block; }
.site-brand b { font-size:12px; letter-spacing:1.1px; }
.site-brand small { margin-top:4px; color:#667883; font:700 7px/1.2 Consolas,monospace; letter-spacing:1.5px; }
.site-nav-links { display:flex; align-items:center; justify-content:center; gap:8px; }
.site-nav-links a { position:relative; padding:10px 13px; border-radius:8px; color:#8797a2; text-decoration:none; font-size:12px; font-weight:700; transition:.18s ease; }
.site-nav-links a:hover { color:#e9eff3; background:#111920; }
.site-header-cta { justify-self:end; display:flex; align-items:center; gap:12px; padding:10px 13px; border:1px solid #4f6879; border-radius:9px; color:#eaf1f5; background:linear-gradient(135deg,#1a2b36,#111b22); text-decoration:none; font-size:11px; font-weight:800; box-shadow:inset 0 1px rgba(255,255,255,.05); }
.site-header-cta b { width:26px; height:26px; display:grid; place-items:center; border:1px solid #40545f; border-radius:7px; color:#9fb2be; }
.site-header-cta:hover { border-color:#738e9f; transform:translateY(-1px); }

.site-hero {
    width:min(1440px,calc(100% - 64px));
    min-height:700px;
    margin:0 auto;
    padding:110px 0 88px;
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(520px,1.05fr);
    align-items:center;
    gap:74px;
}
.site-hero-copy { max-width:650px; }
.site-badge { width:max-content; max-width:100%; display:flex; align-items:center; gap:9px; margin-bottom:24px; padding:8px 11px; border:1px solid #34444f; border-radius:100px; background:rgba(13,20,26,.78); box-shadow:inset 0 1px rgba(255,255,255,.02); }
.site-badge i { width:7px; height:7px; border-radius:50%; background:#72a284; box-shadow:0 0 12px #72a284; }
.site-badge span { color:#a9bdca; font:800 8px/1 Consolas,monospace; letter-spacing:1.2px; }
.site-badge b { padding-right:9px; border-right:1px solid #2c3942; color:#7e8f9a; font-size:9px; font-weight:700; }
.site-hero h1 { margin:0; color:#f2f6f8; font-size:clamp(42px,5.2vw,74px); line-height:1.12; letter-spacing:-3px; font-weight:800; }
.site-hero h1 span { color:#87a2b3; font-weight:600; }
.site-hero-copy > p { max-width:610px; margin:26px 0 0; color:#8998a2; font-size:16px; line-height:1.95; }
.site-hero-copy > p b { color:#c9d5dc; }
.site-hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:31px; }
.site-primary-btn,.site-secondary-btn { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:0 18px; border-radius:9px; text-decoration:none; font-size:12px; font-weight:800; transition:.18s ease; }
.site-primary-btn { border:1px solid #668497; color:#eff6fa; background:linear-gradient(135deg,#263c49,#182832); box-shadow:0 12px 28px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.06); }
.site-primary-btn span { font-size:18px; color:#aec3cf; }
.site-secondary-btn { border:1px solid #303c44; color:#93a1aa; background:#0b1116; }
.site-primary-btn:hover,.site-secondary-btn:hover { transform:translateY(-2px); filter:brightness(1.08); }
.site-trust-row { display:flex; gap:18px; flex-wrap:wrap; margin-top:25px; color:#657680; font-size:10px; }
.site-trust-row span { display:flex; align-items:center; gap:7px; }
.site-trust-row i { width:17px; height:17px; display:grid; place-items:center; border:1px solid #375044; border-radius:50%; color:#79a58a; font-size:9px; font-style:normal; }

.site-hero-panel { position:relative; min-height:500px; display:grid; place-items:center; perspective:1200px; }
.site-panel-glow { position:absolute; width:75%; height:75%; border-radius:50%; background:rgba(83,119,143,.17); filter:blur(80px); }
.site-mini-terminal { position:relative; width:min(650px,100%); padding:17px; overflow:hidden; border:1px solid #40505b; border-radius:15px; background:linear-gradient(145deg,#111820,#080d11 62%); box-shadow:0 45px 110px #000b,0 0 0 7px #05080a,0 0 0 8px #283139; transform:rotateY(-5deg) rotateX(2deg); }
.site-mini-terminal::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,rgba(255,255,255,.05),transparent 24%); }
.site-mini-top { display:flex; justify-content:space-between; align-items:center; padding:0 3px 13px; border-bottom:1px solid #26323a; color:#63747f; font:700 8px/1 Consolas,monospace; letter-spacing:1px; direction:ltr; }
.site-mini-top span { display:flex; align-items:center; gap:7px; }
.site-mini-top i { width:6px; height:6px; border-radius:50%; background:#6e9f7e; box-shadow:0 0 9px #6e9f7e; }
.site-mini-top b { color:#87a699; font-size:8px; }
.site-mini-brand { display:flex; align-items:center; gap:14px; padding:21px 5px 20px; direction:ltr; }
.site-mini-brand img { width:58px; height:58px; object-fit:contain; }
.site-mini-brand small,.site-mini-brand strong { display:block; }
.site-mini-brand small { color:#657783; font:700 7px Consolas,monospace; letter-spacing:1.4px; }
.site-mini-brand strong { margin-top:5px; color:#d5dee3; font-size:15px; letter-spacing:.5px; }
.site-mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.site-mini-stats div { padding:16px; border:1px solid #293640; border-radius:7px; background:#0e151a; }
.site-mini-stats span,.site-mini-stats b,.site-mini-stats small { display:block; }
.site-mini-stats span { color:#637581; font:700 7px Consolas,monospace; letter-spacing:1px; }
.site-mini-stats b { margin-top:6px; color:#d7e0e5; font:700 22px Consolas,monospace; direction:ltr; text-align:right; }
.site-mini-stats small { margin-top:4px; color:#60717b; font-size:8px; }
.site-mini-feed { margin-top:10px; overflow:hidden; border:1px solid #293640; border-radius:7px; background:#0b1116; }
.site-mini-feed span { min-height:42px; display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:10px; padding:0 13px; border-bottom:1px solid #222d34; direction:ltr; }
.site-mini-feed span:last-child { border-bottom:0; }
.site-mini-feed i { width:5px; height:5px; border-radius:50%; background:#61727c; }
.site-mini-feed i.online { background:#73a284; box-shadow:0 0 8px #73a284; }
.site-mini-feed b { color:#aab8c1; font-size:9px; }
.site-mini-feed em { color:#637782; font:700 7px Consolas,monospace; font-style:normal; }
.site-floating-card { position:absolute; z-index:3; padding:12px 14px; border:1px solid #3d4b54; border-radius:10px; background:rgba(10,15,20,.92); backdrop-filter:blur(12px); box-shadow:0 18px 40px #0008; }
.site-floating-card-a { left:-6px; top:78px; direction:ltr; }
.site-floating-card-a small,.site-floating-card-a strong { display:block; }
.site-floating-card-a small { color:#667783; font:700 7px Consolas,monospace; letter-spacing:1px; }
.site-floating-card-a strong { margin-top:5px; color:#cfb476; font:700 10px Consolas,monospace; }
.site-floating-card-b { right:-12px; bottom:70px; display:flex; align-items:center; gap:8px; direction:ltr; color:#9eb0ba; font-size:9px; }
.site-floating-card-b i { width:7px; height:7px; border-radius:50%; background:#72a284; box-shadow:0 0 9px #72a284; }

.site-strip { width:min(1440px,calc(100% - 64px)); margin:0 auto 115px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #222d34; border-bottom:1px solid #222d34; background:rgba(11,17,22,.38); }
.site-strip div { min-height:100px; display:grid; align-content:center; gap:6px; padding:0 26px; border-left:1px solid #222d34; }
.site-strip div:last-child { border-left:0; }
.site-strip b { color:#b7c6cf; font:700 22px Consolas,monospace; direction:ltr; text-align:right; }
.site-strip span { color:#60717b; font-size:10px; }

.site-section { width:min(1440px,calc(100% - 64px)); margin:0 auto; padding:86px 0; }
.site-section-heading { max-width:780px; margin-bottom:44px; }
.site-section-heading > span,.site-demo-heading > div > span,.site-final-cta > div > span { display:block; margin-bottom:13px; color:#708895; font:800 8px Consolas,monospace; letter-spacing:1.8px; direction:ltr; text-align:right; }
.site-section-heading h2,.site-demo-heading h2,.site-final-cta h2 { margin:0; color:#e8eef2; font-size:clamp(30px,3.4vw,48px); line-height:1.25; letter-spacing:-1.5px; }
.site-section-heading h2 b,.site-final-cta h2 b { color:#849fad; font-weight:600; }
.site-section-heading p { max-width:650px; margin:16px 0 0; color:#758690; font-size:13px; line-height:1.9; }
.site-section-heading.compact { margin-bottom:30px; }
.site-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.site-feature-card { position:relative; min-height:245px; padding:27px; overflow:hidden; border:1px solid #25313a; border-radius:12px; background:linear-gradient(145deg,rgba(17,24,30,.92),rgba(9,14,18,.94)); transition:.2s ease; }
.site-feature-card::after { content:""; position:absolute; width:150px; height:150px; left:-70px; bottom:-90px; border-radius:50%; background:rgba(91,128,151,.08); filter:blur(20px); }
.site-feature-card:hover { transform:translateY(-4px); border-color:#3e5361; box-shadow:0 20px 50px rgba(0,0,0,.22); }
.site-feature-num { position:absolute; left:19px; top:18px; color:#3d4c55; font:700 9px Consolas,monospace; }
.site-feature-icon { width:42px; height:42px; display:grid; place-items:center; margin-bottom:24px; border:1px solid #394b57; border-radius:9px; color:#9eb3c0; background:#101920; font:700 15px Consolas,monospace; }
.site-feature-card h3 { margin:0; color:#dce5ea; font-size:15px; }
.site-feature-card p { min-height:68px; margin:12px 0 20px; color:#71818b; font-size:11px; line-height:1.85; }
.site-feature-card small { color:#536773; font:700 7px Consolas,monospace; letter-spacing:1px; direction:ltr; }

.site-demo-guide { padding-top:45px; }
.site-step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.site-step-grid article { display:grid; grid-template-columns:auto 1fr; gap:18px; padding:23px; border-top:1px solid #2d3b44; background:linear-gradient(180deg,rgba(13,19,24,.6),transparent); }
.site-step-grid article > b { width:36px; height:36px; display:grid; place-items:center; border:1px solid #435763; border-radius:50%; color:#a6bac5; font:700 11px Consolas,monospace; }
.site-step-grid h3 { margin:2px 0 8px; color:#dce5e9; font-size:13px; }
.site-step-grid p { margin:0; color:#6f808a; font-size:10px; line-height:1.8; }

.site-demo-section { position:relative; width:100%; margin-top:70px; padding:95px max(32px,calc((100vw - 1540px)/2)) 110px; border-top:1px solid #25313a; border-bottom:1px solid #25313a; background:radial-gradient(circle at 50% 34%,rgba(76,111,134,.12),transparent 38%),#060a0e; direction:rtl; }
.site-demo-section::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.32; background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent); }
.site-demo-heading { position:relative; z-index:2; display:flex; align-items:end; justify-content:space-between; gap:30px; margin:0 auto 30px; max-width:1540px; }
.site-demo-heading h2 { font-size:38px; }
.site-demo-heading p { max-width:650px; margin:12px 0 0; color:#71818b; font-size:11px; line-height:1.8; }
.demo-ribbon { position:static; z-index:auto; top:auto; left:auto; transform:none; flex:none; max-width:none; display:flex; align-items:center; gap:11px; padding:9px 10px 9px 13px; border:1px solid #3b4850; border-radius:10px; background:#0b1116; box-shadow:none; color:#dfe7eb; font:600 10px/1.2 Tahoma,"Segoe UI",Arial,sans-serif; letter-spacing:0; }
.demo-ribbon > span { color:#778993; white-space:nowrap; }
.demo-ribbon .demo-live { display:flex; align-items:center; gap:7px; padding-left:10px; border-left:1px solid #2f3b43; color:#d0b77e; font:800 8px Consolas,monospace; letter-spacing:1px; direction:ltr; }
.demo-ribbon .demo-live i { width:6px; height:6px; border-radius:50%; background:#78a486; box-shadow:0 0 9px #78a486; }
.demo-ribbon button { min-height:34px; display:flex; align-items:center; gap:7px; border:1px solid #4b6270; background:#18262f; color:#e8eff3; border-radius:8px; padding:7px 10px; font:800 9px Consolas,monospace; cursor:pointer; white-space:nowrap; transition:.14s ease; }
.demo-ribbon button:hover { background:#233640; border-color:#6e8999; }
.demo-ribbon button:active { transform:scale(.97); }
.demo-ribbon button.reset-flash { border-color:#6d9a7c; color:#c8dfd0; background:#18271e; }
.site-demo-shell { position:relative; z-index:2; max-width:1540px; margin:0 auto; padding:22px; border:1px solid #283741; border-radius:20px; background:rgba(8,13,17,.8); box-shadow:0 50px 120px #0008,inset 0 1px rgba(255,255,255,.025); }
.site-demo-shell::before { content:""; position:absolute; inset:9px; pointer-events:none; border:1px solid rgba(87,110,124,.08); border-radius:14px; }
.site-demo-corner { position:absolute; z-index:3; width:18px; height:18px; border-color:#5b7484; opacity:.7; pointer-events:none; }
.site-demo-corner.top-right{right:10px;top:10px;border-right:1px solid;border-top:1px solid}.site-demo-corner.top-left{left:10px;top:10px;border-left:1px solid;border-top:1px solid}.site-demo-corner.bottom-right{right:10px;bottom:10px;border-right:1px solid;border-bottom:1px solid}.site-demo-corner.bottom-left{left:10px;bottom:10px;border-left:1px solid;border-bottom:1px solid}
body.site-body #app { position:relative; width:100%; height:auto; min-height:0; display:grid; place-items:center; padding:8px; background:transparent; }
body.site-body .terminal-frame { width:100%; max-width:1490px; height:clamp(690px,78vh,890px); border-color:#3d4951; box-shadow:0 34px 80px #000b,0 0 0 5px #040608,0 0 0 7px #253039; }
body.site-body .terminal-frame.fullscreen-mdt { position:fixed !important; inset:18px !important; z-index:30000 !important; width:calc(100vw - 36px) !important; max-width:none !important; height:calc(100vh - 36px) !important; margin:0 !important; }
body.site-body .modal { z-index:31000; background:rgba(4,7,9,.58); backdrop-filter:blur(4px); }
body.site-body .toast { z-index:32000; }
.site-demo-footnote { display:flex; align-items:center; gap:18px; margin:20px 8px 1px; padding-top:16px; border-top:1px solid #202c33; color:#5f717b; font-size:9px; }
.site-demo-footnote > span { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.site-demo-footnote > span:first-child { color:#7d9688; }
.site-demo-footnote > span:first-child i { width:6px; height:6px; border-radius:50%; background:#6f9a7e; box-shadow:0 0 8px #6f9a7e; }
.site-demo-footnote p { flex:1; margin:0; text-align:center; }
.site-demo-footnote > span:last-child { direction:ltr; font:700 7px Consolas,monospace; letter-spacing:.8px; }

.site-faq { padding-top:115px; padding-bottom:115px; }
.site-faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; }
.site-faq details { border:1px solid #27343c; border-radius:10px; background:rgba(12,18,23,.74); overflow:hidden; transition:.18s ease; }
.site-faq details[open] { border-color:#3d515e; background:#0e161c; }
.site-faq summary { list-style:none; min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 19px; cursor:pointer; color:#b7c4cc; font-size:12px; font-weight:700; }
.site-faq summary::-webkit-details-marker { display:none; }
.site-faq summary b { width:27px; height:27px; flex:none; display:grid; place-items:center; border:1px solid #34444f; border-radius:7px; color:#788e9b; font:500 17px/1 Arial; transition:.18s ease; }
.site-faq details[open] summary b { transform:rotate(45deg); color:#b5c7d2; border-color:#536b79; }
.site-faq details p { margin:0; padding:0 19px 20px; border-top:1px solid #222e35; padding-top:16px; color:#74858f; font-size:10.5px; line-height:1.95; }
.site-faq details p strong { color:#adbec8; font-family:Consolas,monospace; }

.site-final-cta { width:min(1440px,calc(100% - 64px)); margin:0 auto 100px; padding:54px; display:flex; align-items:center; justify-content:space-between; gap:40px; overflow:hidden; border:1px solid #30404a; border-radius:17px; background:radial-gradient(circle at 88% 20%,rgba(91,131,155,.16),transparent 30%),linear-gradient(145deg,#111920,#090e12); box-shadow:0 30px 80px rgba(0,0,0,.25); direction:rtl; }
.site-final-cta h2 { font-size:36px; }
.site-final-cta p { margin:14px 0 0; color:#6f818c; font-size:11px; }
.site-final-cta > a { flex:none; min-width:190px; height:52px; display:flex; align-items:center; justify-content:center; gap:15px; border:1px solid #5c7788; border-radius:10px; color:#e7eff4; background:#1a2b35; text-decoration:none; font-size:12px; font-weight:800; }
.site-final-cta > a span { font-size:18px; }
.site-final-cta > a:hover { filter:brightness(1.1); transform:translateY(-1px); }
.site-footer { width:min(1440px,calc(100% - 64px)); min-height:100px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; border-top:1px solid #202b32; color:#566771; }
.site-footer > div { justify-self:start; display:flex; align-items:center; gap:10px; direction:ltr; }
.site-footer img { width:34px; height:34px; object-fit:contain; opacity:.75; }
.site-footer span b,.site-footer span small { display:block; }
.site-footer span b { color:#80929d; font-size:9px; letter-spacing:1px; }
.site-footer span small { margin-top:3px; font:600 7px Consolas,monospace; }
.site-footer p { max-width:530px; margin:0; text-align:center; font-size:9px; line-height:1.7; }
.site-footer > b { justify-self:end; font:700 7px Consolas,monospace; letter-spacing:1px; direction:ltr; }

/* Keep the product page dark even when the visitor tests the MDT light theme. */
html[data-theme="light"] body.site-body { color:#eef3f7; background:radial-gradient(circle at 16% 8%,rgba(93,132,158,.14),transparent 27rem),radial-gradient(circle at 88% 20%,rgba(181,154,105,.08),transparent 24rem),linear-gradient(180deg,#06090d 0%,#090e13 38%,#060a0e 100%); }
html[data-theme="light"] .site-header,html[data-theme="light"] .site-feature-card,html[data-theme="light"] .site-faq details,html[data-theme="light"] .site-final-cta,html[data-theme="light"] .site-demo-shell { color:#eef3f7; }

@media (max-width:1180px) {
    .site-header { grid-template-columns:1fr auto; }
    .site-nav-links { display:none; }
    .site-hero { grid-template-columns:1fr 1fr; gap:40px; }
    .site-hero h1 { letter-spacing:-2px; }
    .site-feature-grid { grid-template-columns:1fr 1fr; }
    body.site-body .terminal-frame { height:760px; }
    .site-demo-heading { align-items:flex-start; flex-direction:column; }
}
@media (max-width:860px) {
    .site-header { width:calc(100% - 24px); margin-top:10px; min-height:64px; }
    .site-brand small { display:none; }
    .site-header-cta { padding:8px 10px; }
    .site-hero { width:calc(100% - 32px); min-height:0; padding:72px 0 62px; grid-template-columns:1fr; }
    .site-hero-copy { max-width:none; }
    .site-hero-panel { min-height:420px; }
    .site-mini-terminal { transform:none; }
    .site-floating-card-a { left:8px; }.site-floating-card-b { right:8px; }
    .site-strip,.site-section,.site-final-cta,.site-footer { width:calc(100% - 32px); }
    .site-strip { grid-template-columns:1fr 1fr; margin-bottom:72px; }
    .site-strip div:nth-child(2) { border-left:0; }.site-strip div:nth-child(-n+2){border-bottom:1px solid #222d34;}
    .site-feature-grid,.site-step-grid,.site-faq-grid { grid-template-columns:1fr; }
    .site-demo-section { padding:70px 12px 80px; }
    .site-demo-shell { padding:12px; border-radius:14px; overflow:auto; }
    body.site-body #app { min-width:980px; justify-content:start; }
    body.site-body .terminal-frame { width:980px; height:700px; }
    .site-demo-footnote { min-width:980px; }
    .demo-ribbon { width:100%; justify-content:space-between; flex-wrap:wrap; }
    .site-final-cta { padding:35px; align-items:flex-start; flex-direction:column; }
    .site-footer { grid-template-columns:1fr; justify-items:center; padding:28px 0; }
    .site-footer > div,.site-footer > b { justify-self:center; }.site-footer p{order:3;}
}
@media (max-width:560px) {
    .site-header { padding-left:8px; padding-right:8px; }
    .site-brand-mark { width:38px; height:38px; }.site-brand-mark img{width:31px;height:31px}.site-brand b{font-size:10px}.site-header-cta span{display:none}.site-header-cta b{width:30px;height:30px}
    .site-hero h1 { font-size:40px; letter-spacing:-1.5px; }
    .site-hero-copy > p { font-size:13px; }
    .site-hero-actions > a { width:100%; }
    .site-trust-row { display:grid; gap:10px; }
    .site-hero-panel { min-height:370px; }
    .site-mini-terminal { padding:12px; }
    .site-mini-brand { padding:16px 2px; }.site-mini-brand img{width:46px;height:46px}.site-mini-brand strong{font-size:12px}
    .site-mini-stats div { padding:12px; }.site-mini-stats b{font-size:17px}
    .site-floating-card { display:none; }
    .site-strip div { min-height:82px; padding:0 16px; }.site-strip b{font-size:18px}
    .site-section { padding:62px 0; }.site-section-heading{margin-bottom:28px}.site-section-heading h2{font-size:31px}
    .site-feature-card { min-height:0; }
    .site-demo-heading h2 { font-size:31px; }
    .demo-ribbon > span:not(.demo-live) { display:none; }
    .site-demo-footnote { gap:10px; }.site-demo-footnote p{display:none}
    .site-final-cta { margin-bottom:62px; padding:28px; }.site-final-cta h2{font-size:29px}.site-final-cta > a{width:100%}
}

/* ===== Requested refinements — preserve original showcase look ===== */
.site-header-tools { justify-self:end; display:flex; align-items:center; gap:9px; }
.site-lang-switch { display:flex; align-items:center; gap:4px; padding:4px; border:1px solid #2d3a43; border-radius:9px; background:#0a1015; }
.site-lang { min-width:34px; height:30px; border:0; border-radius:6px; background:transparent; color:#738792; font:800 9px/1 Consolas,monospace; cursor:pointer; letter-spacing:.7px; transition:.15s ease; }
.site-lang.active { color:#edf4f8; background:#1a2832; box-shadow:inset 0 1px rgba(255,255,255,.05); }
.site-lang:hover { color:#dbe7ed; }
.site-trust-row b { font-weight:600; color:inherit; }
.site-faq details p a { color:#a9c5d6; font-weight:800; text-decoration:none; }
.site-faq details p a:hover { color:#d8e8f1; text-decoration:underline; }

/* Floating system card: follows the visitor and opens the interactive system. */
.system-dock {
    position:fixed;
    z-index:18000;
    left:22px;
    bottom:22px;
    min-width:202px;
    height:58px;
    padding:0 11px 0 13px;
    display:flex;
    align-items:center;
    gap:11px;
    border:1px solid #40515d;
    border-radius:12px;
    color:#dbe7ed;
    background:linear-gradient(145deg,rgba(17,25,32,.95),rgba(7,12,16,.96));
    box-shadow:0 22px 58px #0009,0 0 0 1px rgba(255,255,255,.025) inset;
    backdrop-filter:blur(14px);
    cursor:pointer;
    transition:transform .18s ease,border-color .18s ease,filter .18s ease;
    direction:ltr;
}
.system-dock:hover { transform:translateY(-3px); border-color:#617b8b; filter:brightness(1.06); }
.system-dock-status { min-width:61px; display:grid; grid-template-columns:8px 1fr; align-items:center; gap:7px; padding-right:10px; border-right:1px solid #2b3841; }
.system-dock-status i { width:7px; height:7px; border-radius:50%; background:#75a685; box-shadow:0 0 10px #75a685; }
.system-dock-status small { color:#8ea4b1; font:800 8px/1 Consolas,monospace; letter-spacing:1.1px; }
.system-dock strong { flex:1; color:#dce6eb; font:700 11px/1.1 Tahoma,"Segoe UI",Arial,sans-serif; white-space:nowrap; }
.system-dock em { width:29px; height:29px; display:grid; place-items:center; border:1px solid #34434d; border-radius:8px; color:#90a9b7; background:#101820; font-style:normal; font-size:14px; }

/* Keep the original page design, but make the interactive system feel like an in-game tablet. */
.site-demo-shell {
    max-width:1580px;
    padding:26px 14px 18px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}
.site-demo-shell::before,.site-demo-corner { display:none !important; }
body.site-body #app { padding:18px 14px 10px; }
body.site-body .terminal-frame {
    position:relative;
    width:100%;
    max-width:1510px;
    height:clamp(700px,79vh,900px);
    border:1px solid #4a5861;
    border-radius:29px;
    background:#080d11;
    box-shadow:
        0 42px 100px rgba(0,0,0,.72),
        0 0 0 8px #030608,
        0 0 0 10px #252d32,
        inset 0 1px rgba(255,255,255,.035);
}
body.site-body .terminal-frame::before {
    content:"";
    position:absolute;
    z-index:50;
    top:-6px;
    left:50%;
    width:42px;
    height:4px;
    transform:translateX(-50%);
    border-radius:10px;
    background:#384249;
    box-shadow:0 0 0 1px #06090b,0 0 10px rgba(0,0,0,.5);
    pointer-events:none;
}
body.site-body .device-bar { border-radius:27px 27px 0 0; }
body.site-body .login-screen { border-radius:0 0 27px 27px; }
body.site-body .tablet { border-radius:0 0 27px 27px; }
.demo-ribbon { border-radius:11px; }
.site-demo-footnote { margin-top:27px; }

body.site-en .site-header,
body.site-en .site-main,
body.site-en .site-footer,
body.site-en .site-final-cta { direction:ltr; }
body.site-en .site-brand { justify-self:start; }
body.site-en .site-header-tools { justify-self:end; }
body.site-en .site-hero-copy,
body.site-en .site-section-heading,
body.site-en .site-feature-card,
body.site-en .site-step-grid,
body.site-en .site-faq { text-align:left; }
body.site-en .site-badge b { border-right:0; border-left:1px solid #2c3942; padding-right:0; padding-left:9px; }
body.site-en .system-dock { left:auto; right:22px; }

@media (max-width:1180px) {
    .site-header-tools { justify-self:end; }
}
@media (max-width:860px) {
    .site-header-tools { gap:6px; }
    .site-lang-switch { padding:3px; }
    .site-lang { min-width:30px; height:28px; }
    .system-dock { left:12px; bottom:12px; min-width:180px; height:52px; }
    body.site-en .system-dock { left:auto; right:12px; }
    .site-demo-shell { padding:14px 2px; overflow:auto; }
    body.site-body #app { min-width:980px; padding:18px 10px; }
    body.site-body .terminal-frame { width:980px; height:710px; border-radius:24px; }
}
@media (max-width:560px) {
    .site-header-tools .site-header-cta span { display:none; }
    .site-header-tools .site-header-cta { padding:6px; }
    .system-dock { min-width:166px; }
}