:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --blue: #0879f9; --ink: #101625; --muted: #7c89a4; --line: #e6edf7; --green: #12b76a;
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#fff; }
body { color: var(--ink); background: transparent; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid rgba(8,121,249,.24); outline-offset: 2px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-shell { position: relative; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(160deg,#fff 0%,#f9fbfe 72%,#f1f7ff 100%); border: 1px solid rgba(133,158,193,.18); border-radius: 27px; box-shadow: 0 22px 65px rgba(39,70,114,.2); }
.window-drag { position: absolute; z-index: 30; left: 72px; right: 72px; top: 0; height: 24px; -webkit-app-region: drag; }
.window-actions { position: absolute; z-index: 40; right: 8px; top: 5px; display: flex; opacity: 0; transition: opacity .18s; }
.app-shell:hover .window-actions { opacity: 1; }
.window-actions button { width: 27px; height: 22px; border: 0; border-radius: 8px; color: #7d8aa1; background: rgba(239,244,250,.92); cursor: pointer; line-height: 1; }
.window-actions button:last-child:hover { color: #fff; background: #f04438; }
.page { position: absolute; inset: 0; display: none; overflow-x: hidden; overflow-y: auto; padding: 24px 18px 106px; scrollbar-width: none; -webkit-overflow-scrolling:touch; }
.page::-webkit-scrollbar { display: none; }
.page.active { display: block; animation: page-in .22s ease both; }
@keyframes page-in { from { opacity: .25; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.app-header { height: 48px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.brand-lockup { display: flex; align-items: center; gap: 10px; }.brand-lockup strong { font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.brand-logo { display:block; width:36px; height:36px; object-fit:contain; border-radius:10px; box-shadow:0 8px 17px rgba(8,121,249,.23); }
.icon-button { position: relative; width: 38px; height: 38px; padding: 7px; border: 0; background: transparent; cursor: pointer; }.icon-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.notice-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #f04438; border: 1.5px solid #fff; }
.centered-header { display: grid; grid-template-columns: 38px 1fr 38px; text-align: center; }.centered-header h1 { margin: 0; font-size: 19px; font-weight: 750; }
.machine-tabs { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; margin-bottom: 11px; }.machine-tab { min-width: 0; height: 47px; padding: 4px 2px; border: 1px solid #e2eaf5; border-radius: 11px; background: #f6f8fc; cursor: pointer; }.machine-tab strong { display: block; font-size: 14px; line-height: 18px; white-space: nowrap; }.machine-tab span { display: block; color: #737f96; font-size: 10px; white-space: nowrap; }.machine-tab.active { color: #fff; border-color: transparent; background: linear-gradient(135deg,#168aff,#0861ef); box-shadow: 0 7px 16px rgba(8,121,249,.2); }.machine-tab.active span { color: #fff; }
.device-hero { position: relative; height: 166px; overflow: hidden; border-radius: 14px; color: #fff; background: linear-gradient(125deg,#062e5d 0%,#073e72 48%,#087fbe 100%); box-shadow: 0 10px 23px rgba(4,50,99,.18); }.device-hero::after { content:""; position:absolute; width:190px; height:190px; right:-55px; top:-80px; border-radius:50%; background:rgba(21,186,255,.18); filter:blur(3px); }
.device-copy { position: relative; z-index: 2; padding: 17px 0 0 18px; }.device-title { display:flex; align-items:center; gap:9px; }.device-title h1 { margin:0; font-size:22px; font-weight:750; }.online-dot { width:11px; height:11px; margin-top:2px; border-radius:50%; background:#19db8e; box-shadow:0 0 12px rgba(25,219,142,.75); }.online-line { margin-top:6px; color:#1ce59a; font-size:14px; }.online-line b { margin-left:7px; color:#fff; }.output-line { margin-top:5px; color:#d4e6fa; font-size:14px; }.output-line strong { margin-left:8px; color:#fff; font-size:20px; }
.mini-pc { position:absolute; z-index:2; right:20px; top:28px; width:116px; height:73px; transform:skewY(-2deg); }.pc-top { position:absolute; inset:0 0 12px; border-radius:12px; background:linear-gradient(155deg,#273b55,#0e1827 70%); box-shadow:0 18px 21px rgba(0,0,0,.28); transform:skewX(-9deg); }.pc-top::after { content:""; position:absolute; inset:6px; border-radius:8px; border:1px solid rgba(255,255,255,.05); }.pc-face { position:absolute; left:4px; right:2px; bottom:1px; height:24px; border-radius:0 0 8px 8px; background:linear-gradient(#101c2d,#07111e); box-shadow:0 3px 6px rgba(0,0,0,.3); }.pc-face i { position:absolute; left:10px; top:9px; width:28px; height:3px; border-radius:3px; background:#1fe48e; box-shadow:0 0 6px rgba(31,228,142,.7); }.pc-face b { position:absolute; right:10px; top:8px; width:5px; height:5px; border-radius:50%; background:#28de8b; }.pc-face span { position:absolute; left:45px; top:7px; color:#5b7189; font-size:5px; letter-spacing:.08em; }
.device-actions { position:absolute; z-index:3; left:0; right:0; bottom:0; height:45px; display:grid; grid-template-columns:repeat(3,1fr); background:#087df5; }.device-actions button { border:0; color:#fff; background:transparent; cursor:pointer; font-size:12px; }.device-actions button+button { border-left:1px solid rgba(255,255,255,.2); }.device-actions span { margin-right:5px; }
.section { margin-top:17px; }.section-head { min-height:31px; display:flex; align-items:center; justify-content:space-between; }.section-head h2 { margin:0; font-size:17px; font-weight:750; letter-spacing:-.02em; }.section-head h2 small { color:#8792a8; font-size:13px; font-weight:500; }.section-head>button { display:flex; align-items:center; gap:1px; padding:3px 0; border:0; color:#7d899e; background:transparent; cursor:pointer; font-size:12px; }.section-head>button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
.filter-tabs,.period-tabs,.warehouse-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }.filter-tabs button,.period-tabs button,.warehouse-tabs button { height:31px; border:0; border-radius:9px; color:#78849b; background:#f0f4fa; cursor:pointer; font-size:12px; }.filter-tabs button.active,.period-tabs button.active,.warehouse-tabs button.active { color:#fff; background:linear-gradient(135deg,#168aff,#0765ed); box-shadow:0 5px 12px rgba(8,121,249,.18); }
.phone-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px 10px; margin-top:12px; }.phone-item { min-width:0; }.game-thumb { position:relative; height:58px; overflow:hidden; border-radius:7px; background:radial-gradient(circle at 68% 34%,#ba4f31 0 7%,transparent 8%),linear-gradient(140deg,#172334,#44332f 55%,#101723); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 4px 9px rgba(25,40,62,.13); }.game-thumb::before { content:""; position:absolute; left:24px; top:8px; width:26px; height:44px; clip-path:polygon(45% 0,65% 12%,61% 34%,100% 100%,0 100%,34% 34%,29% 10%); background:linear-gradient(#d6b198,#2d3038 44%,#111820); filter:drop-shadow(0 2px 2px #000); }.game-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,11,22,.58),transparent 55%); }.phone-state-dot { position:absolute; z-index:2; left:4px; bottom:4px; width:7px; height:7px; border-radius:50%; background:#18d68b; box-shadow:0 0 0 2px rgba(0,0,0,.28); }.phone-item strong { display:block; margin-top:4px; font-size:12px; }.phone-item b { display:block; margin-top:1px; font-size:12px; }.phone-item em { display:inline-block; margin-top:3px; padding:1px 5px; border-radius:4px; color:#12a66b; background:#e5faef; font-size:10px; font-style:normal; }.phone-item.warning em { color:#f04438; background:#fff0ed; }.phone-item.warning .phone-state-dot { background:#ff5b4b; }.phone-item.offline { filter:grayscale(.9); opacity:.6; }.phone-item.offline em { color:#7f8a9f; background:#edf1f6; }
.period-tabs { margin:4px 0 12px; }.period-tabs button { height:36px; font-size:13px; }.metric-card { position:relative; overflow:hidden; border-radius:13px; }.blue-card { min-height:139px; padding:16px 17px; color:#fff; background:linear-gradient(135deg,#0868ef,#18a8f7); box-shadow:0 9px 20px rgba(7,108,239,.22); }.blue-card::before { content:""; position:absolute; width:200px; height:200px; right:-90px; top:-110px; border-radius:50%; background:rgba(255,255,255,.12); }.metric-card-head { position:relative; z-index:2; display:flex; justify-content:space-between; font-size:13px; }.metric-card-head b { font-size:17px; opacity:.7; }.big-metric { position:relative; z-index:2; display:flex; align-items:center; gap:7px; margin-top:5px; }.diamond { font-size:38px; font-weight:200; line-height:1; transform:scaleX(1.25) rotate(45deg); }.big-metric strong { font-size:34px; line-height:1.12; letter-spacing:.015em; }.compare { position:relative; z-index:2; margin-top:9px; font-size:12px; }.compare em { margin-left:10px; color:#35f2b0; font-style:normal; }.bars { position:absolute; right:18px; bottom:14px; display:flex; align-items:end; gap:7px; height:62px; }.bars i { width:8px; border-radius:2px 2px 0 0; background:rgba(255,255,255,.42); }.bars i:nth-child(1){height:21px}.bars i:nth-child(2){height:32px}.bars i:nth-child(3){height:42px}.bars i:nth-child(4){height:53px}.bars i:nth-child(5){height:65px}
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:11px; }.stat-grid article { padding:10px; border:1px solid var(--line); border-radius:11px; background:#fff; box-shadow:0 5px 14px rgba(55,77,112,.05); }.stat-grid span,.stat-grid strong,.stat-grid em { display:block; }.stat-grid span { color:#6f7b90; font-size:10px; }.stat-grid strong { margin-top:3px; font-size:16px; }.stat-grid em { margin-top:3px; color:#0fa967; font-size:10px; font-style:normal; }.mini-tabs { display:flex; padding:2px; border-radius:9px; background:#eef3f9; }.mini-tabs button { min-width:62px; height:25px; padding:0 8px; border:0; border-radius:7px; color:#7b879c; background:transparent; font-size:10px; }.mini-tabs button.active { color:#fff; background:var(--blue); }
.line-chart { position:relative; height:178px; margin-top:8px; padding:5px 0 22px 41px; }.line-chart>svg { width:100%; height:145px; overflow:visible; }.chart-grid { fill:none; stroke:#eaf0f7; stroke-width:1; }.chart-area { fill:url(#chartFill); }.chart-line { fill:none; stroke:#087afa; stroke-width:2.4; vector-effect:non-scaling-stroke; }.line-chart circle { fill:#087afa; stroke:#fff; stroke-width:2; }.chart-tip rect { fill:#087afa; }.chart-tip text { fill:#fff; font-size:11px; text-anchor:middle; }.chart-labels { position:absolute; left:0; top:2px; bottom:24px; display:flex; flex-direction:column; justify-content:space-between; color:#8995a8; font-size:9px; }.chart-dates { position:absolute; left:40px; right:0; bottom:2px; display:flex; justify-content:space-between; color:#8995a8; font-size:8px; }
.ranking-section { margin-top:7px; }.ranking-row { display:grid; grid-template-columns:24px 1fr 58px 39px; align-items:center; gap:6px; min-height:38px; font-size:12px; }.rank-avatar { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:#966300; background:#ffd052; font-size:10px; }.rank-track { height:6px; margin-top:4px; border-radius:6px; background:#edf2f8; }.rank-track i { display:block; height:100%; border-radius:inherit; background:#087afa; }.ranking-row>strong { text-align:right; }.ranking-row>em { color:#10a866; font-size:10px; font-style:normal; text-align:right; }
.warehouse-tabs { grid-template-columns:repeat(3,1fr); margin-bottom:12px; }.warehouse-card { min-height:158px; }.warehouse-card>span { font-size:13px; }.warehouse-card .big-metric { margin-top:7px; }.warehouse-stats { position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.22); }.warehouse-stats div { padding:9px 18px; }.warehouse-stats div+div { border-left:1px solid rgba(255,255,255,.22); }.warehouse-stats span,.warehouse-stats strong { display:block; }.warehouse-stats span { font-size:10px; opacity:.84; }.warehouse-stats strong { margin-top:2px; font-size:14px; }
.select-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:11px 0 7px; }.select-row button { height:34px; border:1px solid #e1e9f3; border-radius:8px; color:#58657b; background:#fff; font-size:10px; }.account-row { min-height:53px; display:grid; grid-template-columns:24px 38px 1fr auto; align-items:center; gap:9px; border-bottom:1px solid #edf1f6; }.check { width:19px; height:19px; display:grid; place-items:center; border:1.5px solid #b8c4d5; border-radius:5px; color:transparent; background:#fff; cursor:pointer; font-size:12px; }.check.checked { color:#fff; border-color:var(--blue); background:var(--blue); }.account-avatar { width:35px; height:35px; border-radius:5px; background:linear-gradient(145deg,#172131,#5a382c 60%,#131720); position:relative; overflow:hidden; }.account-avatar::after { content:""; position:absolute; left:10px; top:5px; width:17px; height:29px; border-radius:50% 50% 35% 35%; background:linear-gradient(#ca9a7a 0 30%,#1c2836 31%); }.account-meta strong { font-size:12px; }.account-meta span { margin-left:13px; color:#8893a6; font-size:10px; }.account-row>strong { font-size:13px; }.warehouse-footer { position:sticky; bottom:-1px; min-height:74px; margin:5px -18px -106px; padding:10px 18px 12px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #e9eef5; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }.warehouse-footer>div { color:#718097; font-size:11px; }.warehouse-footer>div>strong { display:block; margin-top:5px; color:#182034; font-size:14px; }.warehouse-footer b { margin-left:5px; font-size:22px; }.warehouse-footer button { width:134px; height:47px; border:0; border-radius:14px; color:#fff; background:linear-gradient(135deg,#148cff,#0665ee); box-shadow:0 9px 18px rgba(8,121,249,.2); font-weight:700; cursor:pointer; }
.profile-block { display:grid; grid-template-columns:66px 1fr 18px; align-items:center; gap:12px; padding:7px 0 13px; }.profile-block>svg { width:17px; height:17px; fill:none; stroke:#6f7c91; stroke-width:2; }.avatar { position:relative; width:64px; height:64px; overflow:hidden; border-radius:50%; background:linear-gradient(145deg,#d6ecff,#8fbceb); box-shadow:inset 0 0 0 4px rgba(255,255,255,.5); }.avatar .hair { position:absolute; width:42px; height:30px; left:11px; top:9px; border-radius:50% 50% 35% 35%; background:#3d2c27; }.avatar .face { position:absolute; width:35px; height:35px; left:15px; top:20px; display:grid; place-items:center; border-radius:42% 42% 50% 50%; color:#5d4037; background:#f2c5a1; font-size:12px; }.profile-copy>div { display:flex; align-items:center; gap:9px; }.profile-copy strong { font-size:17px; }.profile-copy>span { display:block; margin-top:6px; color:#8590a4; font-size:12px; }.vip { padding:3px 7px; border-radius:99px; color:#5e410b; background:#ffd986; font-size:10px; font-weight:700; }
.membership { min-height:70px; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-radius:13px; color:#f9e8c2; background:linear-gradient(110deg,#151b28,#080d15); box-shadow:0 10px 20px rgba(11,18,31,.14); }.membership strong,.membership span { display:block; }.membership strong { font-size:15px; }.membership span { margin-top:6px; color:#929bad; font-size:10px; }.membership button { height:33px; padding:0 16px; border:0; border-radius:99px; color:#5f4215; background:linear-gradient(#fff4d8,#ffd995); font-size:11px; font-weight:700; cursor:pointer; }
.menu-groups { margin-top:14px; }.menu-group { overflow:hidden; margin-top:11px; border:1px solid #e8edf4; border-radius:13px; background:rgba(255,255,255,.9); box-shadow:0 5px 16px rgba(54,75,108,.04); }.menu-group button { width:100%; height:58px; display:grid; grid-template-columns:31px 1fr auto 18px; align-items:center; gap:10px; padding:0 13px; border:0; background:transparent; cursor:pointer; text-align:left; }.menu-group button+button { border-top:1px solid #edf1f6; }.menu-group button>span { font-size:14px; }.menu-group button>svg { width:16px; height:16px; fill:none; stroke:#99a4b6; stroke-width:2; }.menu-icon { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; color:#fff; }.menu-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.menu-icon.blue{background:#168aff}.menu-icon.orange{background:#ff7446}.menu-icon.green{background:#14bc7b}.menu-icon.amber{background:#ffb020}.menu-icon.purple{background:#a44cf4}.menu-icon.royal{background:#4c7ff4}.menu-icon.gray{background:#a7b2c4}.red-badge { min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center; border-radius:99px; color:#fff; background:#f0444e; font-size:10px; }
.menu-icon.ink { background:#111820; }
.menu-version { padding:3px 7px; border-radius:99px; color:#667286; background:#f0f3f7; font-size:9px; font-weight:650; white-space:nowrap; }
.bottom-nav { position:absolute; z-index:20; left:0; right:0; bottom:0; height:66px; padding:12px 21px 3px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #e3e9f1; background:#fff; }.bottom-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; color:#273244; background:transparent; cursor:pointer; font-size:12px; font-weight:600; line-height:1.2; }.bottom-nav button.active { color:#0870fa; font-weight:600; }.nav-icon-wrap { position:relative; width:26px; height:26px; display:block; flex:0 0 26px; }.bottom-nav .nav-icon { position:absolute; inset:0; width:26px; height:26px; display:block; object-fit:contain; pointer-events:none; }.bottom-nav .nav-icon.outline { opacity:1; }.bottom-nav .nav-icon.solid { opacity:0; }.bottom-nav button.active .nav-icon.outline { opacity:0; }.bottom-nav button.active .nav-icon.solid { opacity:1; }
.toast { position:fixed; z-index:100; left:50%; bottom:96px; max-width:80%; padding:10px 15px; border-radius:10px; color:#fff; background:rgba(15,23,42,.92); box-shadow:0 10px 25px rgba(0,0,0,.18); opacity:0; pointer-events:none; transform:translate(-50%,10px); transition:.2s; font-size:12px; text-align:center; }.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error { background:rgba(190,31,42,.94); }
@media(max-height:780px){.page{padding-top:18px}.app-header{margin-bottom:8px}.device-hero{height:152px}.menu-group button{height:52px}}
.diamond { transform: scaleX(1.2); }
.metric-diamond { width:30px; height:30px; flex:0 0 30px; fill:rgba(216,240,255,.18); stroke:#dff3ff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* Web/PWA shell */
.web-app { position:fixed; inset:0; display:grid; place-items:center; width:auto; height:auto; min-height:100%; overflow:visible; background:#fff; }
.web-app .app-shell { width:min(100%,430px); height:100%; min-height:0; max-height:none; overflow:visible; border:0; border-radius:0; background:#fff; }
.web-app .window-drag,.web-app .window-actions { display: none; }
.web-app .page { padding-top:env(safe-area-inset-top,0px); }
.pull-refresh { position:absolute; z-index:19; left:50%; top:max(4px,env(safe-area-inset-top,0px)); display:flex; align-items:center; gap:7px; padding:5px 10px; border:1px solid rgba(209,217,228,.84); border-radius:99px; color:#778395; background:rgba(255,255,255,.94); box-shadow:0 4px 14px rgba(33,53,80,.09); opacity:0; pointer-events:none; transform:translate3d(-50%,-44px,0); transition:transform .22s cubic-bezier(.2,.72,.2,1),opacity .18s ease; font-size:10px; white-space:nowrap; }
.pull-refresh.visible { opacity:1; transform:translate3d(-50%,4px,0); }
.pull-refresh i { width:14px; height:14px; border:1.7px solid #d5dce6; border-top-color:#101821; border-radius:50%; transform:rotate(var(--pull-rotate,0deg)); }
.pull-refresh b { font-weight:650; }
.pull-refresh.refreshing i { animation:pull-spin .72s linear infinite; }
.page.pull-settling { transition:transform .28s cubic-bezier(.22,.76,.22,1); }
@keyframes pull-spin { to { transform:rotate(360deg); } }
.profile-block { cursor:pointer; }
.web-app.loading::after { content:""; position:fixed; inset:0; z-index:300; background:#fff url('/banban-logo-blue.png?v=110-clean-icons') center/154px auto no-repeat; }
.login-view { width:min(100% - 32px,420px); padding:34px 28px; border:1px solid rgba(137,164,199,.22); border-radius:25px; background:rgba(255,255,255,.94); box-shadow:0 28px 70px rgba(48,83,129,.17); }
.login-brand { display:flex; align-items:center; }.login-brand img { display:block; width:188px; height:75px; object-fit:cover; object-position:center; }
.login-view>h1 { margin:34px 0 7px; font-size:25px; }.login-view>p { margin:0 0 28px; color:#7b879b; font-size:14px; }
.login-view form label { display:block; margin-bottom:8px; font-size:13px; font-weight:650; }.login-view input { width:100%; height:51px; padding:0 15px; border:1px solid #dfe7f1; border-radius:12px; outline:0; background:#f9fbfe; font:inherit; }.login-view input:focus { border-color:#168aff; box-shadow:0 0 0 4px rgba(8,121,249,.1); }.login-view form>button { width:100%; height:52px; margin-top:14px; border:0; border-radius:13px; color:#fff; background:linear-gradient(135deg,#168aff,#075eea); box-shadow:0 10px 20px rgba(8,121,249,.22); font-weight:750; cursor:pointer; }.login-view form em { display:block; min-height:18px; margin-top:10px; color:#e5484d; font-size:12px; font-style:normal; text-align:center; }
.modal-backdrop { position:fixed; z-index:200; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-top:42px; background:rgba(8,17,32,.38); backdrop-filter:blur(3px); }.modal-backdrop[hidden] { display:none; }.sheet { width:min(100%,430px); max-height:87dvh; overflow:hidden; border-radius:24px 24px 0 0; background:#fff; box-shadow:0 -20px 60px rgba(10,31,61,.23); animation:sheet-in .22s ease both; }.sheet>header { display:flex; align-items:flex-start; justify-content:space-between; min-height:74px; padding:20px 20px 12px; border-bottom:1px solid #edf1f6; }.sheet h2 { margin:0; font-size:20px; }.sheet header p { margin:5px 0 0; color:#8290a5; font-size:11px; }.sheet header button { width:34px; height:34px; border:0; border-radius:50%; color:#68768b; background:#eef3f8; font-size:23px; cursor:pointer; }.sheet-body { max-height:calc(87dvh - 74px); overflow:auto; padding:16px 20px 32px; }
@keyframes sheet-in { from { transform:translateY(35px); opacity:.5 } to { transform:none; opacity:1 } }
.sheet-card { margin-bottom:12px; padding:14px; border:1px solid #e7edf5; border-radius:13px; background:#fbfcfe; }.sheet-card h3 { margin:0 0 10px; font-size:15px; }.sheet-card p { margin:6px 0; color:#69778d; font-size:12px; line-height:1.55; }.sheet-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:47px; padding:7px 0; border-bottom:1px solid #edf1f6; }.sheet-row:last-child { border-bottom:0; }.sheet-row small,.sheet-row strong { display:block; }.sheet-row small { margin-top:3px; color:#8995a8; font-size:10px; }.sheet-row strong { font-size:13px; }.status-pill { padding:4px 8px; border-radius:99px; color:#0b9b61; background:#e8f9f0; font-size:10px; white-space:nowrap; }.status-pill.offline { color:#8b96a8; background:#eef1f5; }.form-field { display:block; margin-bottom:14px; }.form-field>span { display:block; margin-bottom:7px; font-size:12px; font-weight:650; }.form-field input,.form-field select,.form-field textarea { width:100%; min-height:45px; padding:10px 12px; border:1px solid #dfe7f1; border-radius:10px; outline:0; background:#fff; font:inherit; font-size:13px; }.form-field textarea { min-height:82px; resize:vertical; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.sheet-actions { display:flex; gap:9px; margin-top:14px; }.sheet-actions button,.sheet-button { min-height:43px; padding:0 16px; border:1px solid #dfe7f1; border-radius:10px; background:#fff; cursor:pointer; font-size:12px; font-weight:650; }.sheet-actions button { flex:1; }.sheet-actions .primary,.sheet-button.primary { color:#fff; border-color:transparent; background:linear-gradient(135deg,#168aff,#0765ed); }.sheet-actions .danger { color:#e5484d; }.sheet-empty { padding:38px 12px; color:#8995a8; text-align:center; font-size:13px; }.sheet-list-button { width:100%; min-height:52px; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:0; border-bottom:1px solid #edf1f6; background:#fff; cursor:pointer; text-align:left; }.sheet-list-button span { color:#718097; font-size:11px; }.live-label { display:inline-flex; align-items:center; gap:5px; color:#0da86a; font-size:10px; }.live-label::before { content:""; width:6px; height:6px; border-radius:50%; background:#13c879; }
.status-pill.warning { color:#d92d20; background:#fff0ed; }
.account-source { display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:11px 13px; border:1px solid #e7edf3; border-radius:11px; background:#f8fafc; }
.account-source>i { width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:#8b96a8; box-shadow:0 0 0 4px rgba(139,150,168,.11); }
.account-source>div { min-width:0; }
.account-source strong,.account-source small { display:block; }
.account-source strong { color:#111820; font-size:13px; font-weight:760; }
.account-source small { margin-top:3px; color:#7f8b9e; font-size:10px; }
.account-source.app.online { border-color:#d9eee6; background:#f3fbf7; }
.account-source.app.online>i { background:#10c98a; box-shadow:0 0 0 4px rgba(16,201,138,.12),0 0 8px rgba(16,201,138,.35); }
.account-source.app.connecting>i { background:#f0a124; box-shadow:0 0 0 4px rgba(240,161,36,.12); animation:sourcePulse 1.5s ease-in-out infinite; }
.account-source.script>i { background:#7d8798; }
@keyframes sourcePulse { 50% { opacity:.38; transform:scale(.82); } }
.vision-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:6px 0; padding:10px 0; border-top:1px solid #edf1f6; border-bottom:1px solid #edf1f6; }
.vision-stat-grid>div { min-width:0; text-align:center; }
.vision-stat-grid>div+div { border-left:1px solid #e7ecf2; }
.vision-stat-grid span,.vision-stat-grid strong { display:block; }
.vision-stat-grid span { color:#8792a4; font-size:10px; }
.vision-stat-grid strong { margin-top:5px; color:#10151c; font-size:18px; font-weight:780; font-variant-numeric:tabular-nums; }
.sheet-warning-value { color:#d94a35; }
@media(min-width:700px){.web-app .app-shell{height:min(920px,calc(100dvh - 36px));overflow:hidden;border-radius:27px}.sheet{border-radius:24px;margin-bottom:18px}.modal-backdrop{align-items:flex-end}.login-view{padding:40px 34px}}

/* Final UI refinements */
.phone-item strong,.phone-item b { display:flex; align-items:baseline; gap:3px; white-space:nowrap; }
.phone-item small { color:#8b96aa; font-size:8px; font-weight:500; }
.check { width:20px; min-width:20px; max-width:20px; height:20px; min-height:20px; max-height:20px; padding:0; margin:0; display:grid; place-items:center; aspect-ratio:1; line-height:1; }
.page[data-page="profile"] { padding-top:32px; }
.web-app .page[data-page="profile"] { padding-top:max(8px,env(safe-area-inset-top,0px)); }
.sheet header button#sheetClose { width:34px; min-width:34px; max-width:34px; height:34px; min-height:34px; max-height:34px; padding:0; display:grid; place-items:center; flex:0 0 34px; aspect-ratio:1; border-radius:50%; line-height:1; }
.red-badge[hidden],.notice-dot[hidden] { display:none !important; }
.phone-info { display:grid; gap:2px; margin-top:6px; }
.phone-info>div { min-width:0; min-height:15px; display:grid; grid-template-columns:27px minmax(0,1fr); align-items:center; column-gap:3px; }
.phone-info span { color:#8b96aa; font-size:8px; line-height:1; }
.phone-info strong,.phone-info b { min-width:0; display:block; margin:0; overflow:hidden; color:#172033; font-size:11px; line-height:15px; text-overflow:ellipsis; white-space:nowrap; }
.phone-info em { justify-self:start; margin:0; padding:1px 5px; font-size:9px; line-height:13px; }
.page[data-page="warehouse"] { overflow:hidden; padding-bottom:84px; }
.page[data-page="warehouse"].active { display:flex; flex-direction:column; }
.page[data-page="warehouse"]>.app-header,.page[data-page="warehouse"]>.warehouse-tabs,.page[data-page="warehouse"]>.warehouse-card,.page[data-page="warehouse"]>.select-row { flex:0 0 auto; }
.page[data-page="warehouse"]>.account-list { min-height:0; flex:1 1 auto; overflow-y:auto; padding:0 4px 8px 0; scrollbar-width:none; }
.page[data-page="warehouse"]>.account-list::-webkit-scrollbar { display:none; }
.page[data-page="warehouse"]>.warehouse-footer { position:static; flex:0 0 74px; width:auto; min-height:74px; margin:0 -18px; padding:10px 18px 12px; }
html,body,.app-shell { touch-action:pan-y; overscroll-behavior:none; }
.app-shell { user-select:none; -webkit-user-select:none; }
input,textarea,select { user-select:text; -webkit-user-select:text; }
.window-drag { pointer-events:none; -webkit-app-region:no-drag; }
.bottom-nav button { outline:none; -webkit-tap-highlight-color:transparent; transition:color .18s ease; }
.bottom-nav button:focus,.bottom-nav button:focus-visible { outline:none; box-shadow:none; }
.bottom-nav button:active { transform:none; }
.page.active { animation:none; }
.web-app .bottom-nav { position:fixed; left:50%; right:auto; bottom:0; width:100%; max-width:430px; height:calc(66px + env(safe-area-inset-bottom,0px)); padding:12px 21px calc(3px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:#fff; backdrop-filter:none; }
.web-app .bottom-nav button { color:#273244; }
.web-app .bottom-nav button.active { color:#0870fa; }
.web-app .page[data-page="warehouse"] { padding-bottom:74px; }
@media(display-mode:standalone){
  html,body,.web-app,.web-app .app-shell { min-height:100%; background:#fff; }
  .web-app .bottom-nav { bottom:0; }
}
html.standalone-app .web-app .bottom-nav { height:calc(60px + env(safe-area-inset-bottom,0px)); padding:11px 21px env(safe-area-inset-bottom,0px); }

/* Immersive account thumbnails */
.device-list-section { margin-top:20px; }
.device-list-section.phone-only-list { margin-top:4px; }
.phone-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 10px; margin-top:0; }
.phone-item,.phone-item.offline { min-width:0; filter:none; opacity:1; cursor:pointer; }
.game-thumb { isolation:isolate; width:100%; height:auto; aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(73,125,181,.46); border-radius:12px; background:#071524 url('/ui-assets/device-card-normal-v5.webp') center/cover no-repeat; box-shadow:0 4px 10px rgba(7,22,42,.15),inset 0 0 0 1px rgba(180,215,255,.06); }
.game-thumb::before { display:none; }
.game-thumb::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(2,10,22,.78),rgba(2,12,26,.2) 48%,rgba(2,9,19,.5)); pointer-events:none; }
.game-art { display:none; }
.scene-0 { background-position:42% center; }
.scene-1 { background-position:50% center; }
.scene-2 { background-position:58% center; }
.scene-3 { background-position:46% center; }
.scene-4 { background-position:54% center; }
.scene-5 { background-position:62% center; }
.phone-number,.phone-diamonds,.phone-status { position:absolute; z-index:2; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.82); }
.phone-number,.phone-diamonds { top:6px !important; height:20px; box-sizing:border-box; display:flex !important; align-items:center !important; justify-content:center; margin:0 !important; padding-top:0; padding-bottom:0; font-size:10px !important; font-weight:700; line-height:1 !important; }
.phone-number { left:5px; min-width:33px; padding-left:5px; padding-right:5px; border:1px solid rgba(198,228,255,.25); border-radius:99px; background:rgba(8,35,69,.62); box-shadow:inset 0 1px rgba(255,255,255,.1),0 1px 3px rgba(3,16,37,.25); text-align:center; }
.phone-diamonds { right:5px; min-width:0; max-width:calc(100% - 47px); gap:2px !important; padding-left:4px; padding-right:4px; overflow:hidden; border:1px solid rgba(155,220,255,.32); border-radius:8px; background:rgba(8,76,153,.62); box-shadow:inset 0 1px rgba(255,255,255,.12),0 1px 3px rgba(3,16,37,.24); font-variant-numeric:tabular-nums; letter-spacing:-.15px; }
.phone-diamonds svg { display:block; width:10px; min-width:10px; height:10px; flex:0 0 10px; overflow:visible; fill:rgba(37,157,255,.38); stroke:#e5f8ff; stroke-width:1.55; }
.phone-gold { position:absolute; z-index:2; left:19px; bottom:6px; max-width:calc(100% - 72px); overflow:hidden; color:rgba(255,255,255,.88)!important; font-size:8px!important; font-weight:650!important; line-height:15px; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.9); }
.game-thumb .phone-state-dot { left:6px; bottom:6px; width:8px; height:8px; background:#05e5ae; box-shadow:0 0 0 1.5px rgba(0,0,0,.3),0 0 8px rgba(5,229,174,.8); }
.phone-item .phone-status { right:5px; bottom:5px; min-width:40px; margin:0; padding:2px 7px; border:1px solid #21dfa6; border-radius:99px; color:#fff; background:rgba(0,107,82,.92); box-shadow:inset 0 0 8px rgba(10,255,184,.18),0 0 6px rgba(9,211,156,.26); font-size:10px; font-style:normal; line-height:13px; text-align:center; }
.phone-item.warning .game-thumb { border-color:#ff4b48; background-image:url('/ui-assets/device-card-warning-v5.webp'); box-shadow:0 0 0 1px rgba(255,37,32,.35),0 4px 10px rgba(126,8,12,.24); }
.phone-item.warning .game-thumb::after { background:linear-gradient(135deg,rgba(92,0,7,.1),rgba(220,0,20,.2)); }
.phone-item.warning .game-thumb .phone-state-dot { background:#ff493e; box-shadow:0 0 0 1.5px rgba(0,0,0,.3),0 0 8px #ff342d; }
.phone-item.warning .phone-status { color:#fff; border-color:#ff7668; background:rgba(167,8,8,.9); box-shadow:inset 0 0 8px rgba(255,132,78,.23),0 0 7px rgba(255,34,25,.45); }
.phone-item.offline .game-thumb { border-color:#748397; background-image:url('/ui-assets/device-card-offline-v5.webp'); box-shadow:0 4px 9px rgba(31,42,56,.16),inset 0 0 0 1px rgba(255,255,255,.06); }
.phone-item.offline .game-thumb::after { background:rgba(28,37,48,.12); }
.phone-item.offline .game-thumb .phone-state-dot { background:#b7c4d8; box-shadow:0 0 0 1.5px rgba(0,0,0,.3); }
.phone-item.offline .phone-status { color:#eef2f7; border-color:#c1c8d2; background:rgba(54,62,73,.88); box-shadow:none; }

/* Holographic device in the main card */
.device-copy { z-index:4; }
.hero-device-art { position:absolute; z-index:2; right:-18px; top:0; width:72%; height:121px; object-fit:cover; object-position:58% center; border-radius:0 14px 0 0; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 100%); mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 100%); pointer-events:none; }
.mini-pc { z-index:3; right:2px; top:2px; width:204px; height:120px; transform:none; filter:drop-shadow(0 7px 11px rgba(0,147,255,.33)); }
.mini-pc::before { content:""; position:absolute; left:43px; right:8px; bottom:4px; height:34px; border-radius:50%; background:radial-gradient(ellipse,rgba(45,210,255,.55),rgba(0,120,255,.22) 38%,transparent 70%); filter:blur(4px); }
.holo-beam { position:absolute; left:98px; top:12px; width:33px; height:82px; clip-path:polygon(43% 0,57% 0,82% 100%,18% 100%); background:linear-gradient(180deg,rgba(115,236,255,.03),rgba(40,186,255,.33)); filter:blur(2px); }
.holo-top { position:absolute; z-index:4; left:65px; top:8px; width:99px; height:34px; border:1.5px solid #87edff; clip-path:polygon(50% 0,100% 31%,50% 63%,0 31%); background:linear-gradient(180deg,rgba(112,232,255,.24),rgba(0,110,255,.08)); box-shadow:0 0 7px #22baff,inset 0 0 7px rgba(122,239,255,.7); }
.holo-top::after { content:""; position:absolute; left:32px; top:7px; width:34px; height:10px; border:1px solid rgba(187,248,255,.82); border-radius:50%; box-shadow:0 0 6px #34caff; }
.holo-panel { position:absolute; z-index:1; top:48px; width:48px; height:39px; padding:6px; border:1px solid rgba(79,208,255,.55); background:linear-gradient(135deg,rgba(0,95,190,.18),rgba(33,188,255,.08)); box-shadow:inset 0 0 8px rgba(28,174,255,.2),0 0 5px rgba(0,156,255,.3); opacity:.78; }
.holo-panel-left { left:16px; transform:skewY(9deg); }
.holo-panel-right { right:3px; transform:skewY(-9deg); }
.holo-panel i { display:block; width:74%; height:2px; margin:3px 0; border-radius:2px; background:#48cfff; box-shadow:0 0 3px #35bfff; }
.holo-panel i:nth-child(2) { width:48%; }.holo-panel i:nth-child(3) { width:88%; }.holo-panel-right i { width:5px; height:16px; display:inline-block; margin:9px 2px 0 0; vertical-align:bottom; }.holo-panel-right i:nth-child(2){height:23px}.holo-panel-right i:nth-child(3){height:12px}.holo-panel-right i:nth-child(4){height:28px}
.holo-rings { position:absolute; z-index:1; left:48px; bottom:1px; width:137px; height:39px; }
.holo-rings i { position:absolute; left:50%; bottom:3px; border:1px solid rgba(81,221,255,.72); border-radius:50%; transform:translateX(-50%); box-shadow:0 0 6px rgba(29,187,255,.6); }
.holo-rings i:nth-child(1){width:137px;height:36px}.holo-rings i:nth-child(2){width:103px;height:27px;bottom:7px}.holo-rings i:nth-child(3){width:67px;height:18px;bottom:11px}
.mini-pc .pc-top { inset:auto; z-index:3; left:65px; top:48px; width:99px; height:43px; border:1px solid #76eaff; border-radius:10px 10px 5px 5px; background:linear-gradient(155deg,rgba(65,207,255,.72),rgba(0,92,224,.72) 42%,rgba(0,42,127,.88)); box-shadow:inset 0 0 13px rgba(126,240,255,.85),0 0 11px #0aa4ff; transform:perspective(100px) rotateX(5deg) skewX(-3deg); }
.mini-pc .pc-top::before { content:""; position:absolute; inset:5px 9px 10px; border:1px solid rgba(181,246,255,.53); border-radius:7px; background:radial-gradient(circle at 50% 0,rgba(124,239,255,.42),transparent 58%); }
.mini-pc .pc-top::after { inset:4px; border-color:rgba(205,250,255,.34); }
.mini-pc .pc-face { z-index:5; left:68px; right:auto; bottom:25px; width:95px; height:30px; border:1px solid #60dcff; border-radius:3px 3px 8px 8px; background:linear-gradient(180deg,#0753b7,#032f86); box-shadow:inset 0 0 10px rgba(66,210,255,.6),0 0 8px #0b9fff; }
.mini-pc .pc-face i { left:12px; top:12px; width:16px; height:5px; background:#8ff4ff; transform:rotate(-35deg); box-shadow:0 0 7px #62e8ff; }
.mini-pc .pc-face b { right:9px; top:11px; background:#56f1ff; box-shadow:0 0 6px #57edff; }
.mini-pc .pc-face span { left:35px; top:9px; color:#d8f8ff; font-size:7px; letter-spacing:.14em; text-shadow:0 0 5px #51d9ff; }

/* Outbound workflow v0.6.3 */
.warehouse-header { margin-bottom:10px; }
.warehouse-more { width:38px; height:38px; border:0; color:#172033; background:transparent; font-size:18px; font-weight:800; letter-spacing:1px; cursor:pointer; }
.page[data-page="warehouse"] { padding-left:18px; padding-right:18px; overflow-x:hidden; overflow-y:auto; }
.warehouse-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 0 12px; gap:7px; }
.warehouse-tabs button { min-width:0; height:39px; border-radius:12px; font-size:12px; font-weight:650; }
.warehouse-tabs button b { display:inline; font:inherit; }
.warehouse-tabs button.active { color:#fff; background:#0879f9; box-shadow:0 7px 16px rgba(8,121,249,.2); }
.warehouse-view { display:none; min-height:0; }
.warehouse-view.active { display:block; }

.warehouse-summary-card { position:relative; overflow:hidden; min-height:104px; padding:12px 14px 13px; border-radius:16px; color:#fff; background:linear-gradient(125deg,#075fcf 0%,#087ff0 58%,#11a1eb 100%); box-shadow:0 9px 22px rgba(7,99,204,.17); }
.warehouse-summary-card::before { content:""; position:absolute; right:-33px; top:-56px; width:144px; height:144px; border:28px solid rgba(255,255,255,.055); border-radius:50%; }
.warehouse-summary-head { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; height:22px; }
.warehouse-summary-head>span { display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.8); font-size:10px; font-weight:650; }
.warehouse-summary-head>span::before { content:""; width:5px; height:5px; border-radius:50%; background:#67e7ff; box-shadow:0 0 8px rgba(103,231,255,.75); }
.warehouse-summary-head button { padding:4px 7px; border:1px solid rgba(255,255,255,.24); border-radius:99px; color:#fff; background:rgba(255,255,255,.09); font-size:8px; cursor:pointer; }
.warehouse-summary-head button i { margin-left:2px; font-style:normal; }
.warehouse-summary-body { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(126px,1fr); align-items:end; gap:12px; margin-top:7px; }
.warehouse-summary-total { min-width:0; }
.warehouse-summary-total>span { display:block; overflow:hidden; margin-bottom:5px; color:rgba(255,255,255,.76); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.warehouse-summary-total>strong { display:flex; align-items:center; gap:6px; min-width:0; font-size:26px; line-height:1; letter-spacing:-.04em; }
.warehouse-summary-total>strong svg { width:21px; height:21px; flex:0 0 21px; fill:rgba(255,255,255,.08); stroke:#e5f6ff; stroke-width:1.8; }
.warehouse-summary-total>strong b { overflow:hidden; font:inherit; text-overflow:ellipsis; white-space:nowrap; }
.warehouse-summary-stats { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.warehouse-summary-stats>div { min-width:0; padding:7px 8px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.09); }
.warehouse-summary-stats span,.warehouse-summary-stats strong { display:block; }
.warehouse-summary-stats span { overflow:hidden; color:rgba(255,255,255,.7); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.warehouse-summary-stats strong { overflow:hidden; margin-top:3px; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.warehouse-zone-tabs { display:flex; flex:0 0 auto; gap:7px; margin:11px 0 9px; overflow-x:auto; scrollbar-width:none; }
.warehouse-zone-tabs::-webkit-scrollbar { display:none; }
.warehouse-zone-tabs button { min-width:67px; height:34px; padding:0 15px; border:0; border-radius:10px; color:#738096; background:#eff3f8; font-size:11px; white-space:nowrap; cursor:pointer; }
.warehouse-zone-tabs button.active { color:#fff; background:#0879f9; box-shadow:0 5px 12px rgba(8,121,249,.16); }
.warehouse-tools { display:grid; flex:0 0 auto; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:6px; }
.warehouse-tools button { height:34px; overflow:hidden; border:1px solid #e1e9f3; border-radius:9px; color:#647187; background:#fff; font-size:10px; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.warehouse-account-scroll { min-height:0; overflow:visible; }
.warehouse-account-scroll::-webkit-scrollbar { display:none; }
.warehouse-account-groups { padding-bottom:9px; }
.account-group { margin-top:8px; overflow:hidden; border:1px solid #e7edf5; border-radius:15px; background:#fff; box-shadow:0 5px 15px rgba(36,66,105,.035); }
.account-group>header { min-height:37px; display:flex; align-items:center; justify-content:space-between; padding:7px 12px; border-bottom:1px solid #edf2f7; background:#f8faff; }
.account-group>header strong { margin-right:7px; font-size:12px; }
.account-group>header span { color:#8a96a9; font-size:9px; }
.account-group>header button { border:0; color:#0879f9; background:transparent; font-size:10px; cursor:pointer; }
.account-group .account-row { min-height:59px; grid-template-columns:21px 36px minmax(0,1fr) auto; gap:9px; padding:5px 11px; transition:background .16s; }
.account-group .account-row.selected { background:#f2f8ff; }
.account-group .account-row:last-child { border-bottom:0; }
.account-group .account-meta { min-width:0; }
.account-group .account-meta strong,.account-group .account-meta span { display:block; overflow:hidden; margin:0; text-overflow:ellipsis; white-space:nowrap; }
.account-group .account-meta strong { font-size:12px; }
.account-group .account-meta span { margin-top:4px; color:#8a96a9; font-size:9px; }
.account-group .account-row>strong { font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.account-group .account-row>strong small { margin-left:2px; color:#8a96a9; font-size:8px; font-weight:500; }
.warehouse-footer { position:sticky!important; z-index:8; bottom:0; width:auto!important; min-height:67px!important; margin:0 -18px!important; padding:8px 18px 9px!important; border-top:1px solid #e6ecf4; background:rgba(255,255,255,.97); }
.warehouse-footer>div { min-width:0; }
.warehouse-footer>div>strong { margin-top:3px; white-space:nowrap; }
.warehouse-footer b { margin:0 3px; font-size:20px; }
.warehouse-footer button { width:145px; height:45px; border-radius:13px; background:#0879f9; box-shadow:0 8px 17px rgba(8,121,249,.2); }
.warehouse-footer button:disabled { color:#a1adbd; background:#e9eef4; box-shadow:none; cursor:not-allowed; }
.warehouse-empty { display:grid; place-items:center; gap:6px; min-height:150px; padding:25px 15px; color:#909caf; font-size:11px; text-align:center; }
.warehouse-empty strong { color:#536077; font-size:13px; }

.pending-summary { display:grid; flex:0 0 auto; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-bottom:11px; }
.pending-summary>div { min-width:0; padding:11px 7px; border:1px solid #e7edf5; border-radius:13px; background:#fff; text-align:center; }
.pending-summary span,.pending-summary strong { display:block; }
.pending-summary span { overflow:hidden; color:#7d899d; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.pending-summary strong { margin-top:5px; font-size:18px; }
.pending-list { min-height:0; overflow:visible; padding:0 1px 14px; scrollbar-width:none; }
.pending-list::-webkit-scrollbar { display:none; }
.pending-card { margin-bottom:10px; overflow:hidden; border:1px solid #e5ecf5; border-radius:17px; background:#fff; box-shadow:0 7px 20px rgba(42,68,105,.055); }
.pending-card>header { min-height:44px; display:flex; align-items:center; justify-content:space-between; padding:10px 13px; border-bottom:1px solid #edf2f7; }
.pending-card>header>strong { font-size:12px; }
.order-status { display:inline-flex; align-items:center; justify-content:center; padding:5px 8px; border-radius:99px; color:#0879f9; background:#eaf4ff; font-size:9px; font-weight:650; white-space:nowrap; }
.order-status.partial { color:#e87520; background:#fff0e6; }.order-status.review { color:#c77b09; background:#fff5dc; }.order-status.dispatching { color:#6557d9; background:#f0edff; }.order-status.completed { color:#15905c; background:#e9f9f0; }.order-status.cancelled { color:#7f8a9d; background:#eef1f5; }
.pending-main { display:grid; grid-template-columns:.8fr 1fr 1.25fr; padding:14px 13px; }
.pending-main>div { min-width:0; }
.pending-main>div+div { padding-left:12px; border-left:1px solid #edf1f6; }
.pending-main b,.pending-main span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pending-main b { font-size:13px; }.pending-main span { margin-top:5px; color:#8995a8; font-size:8px; }
.order-progress { height:5px; margin:-2px 13px 10px; overflow:hidden; border-radius:99px; background:#e8edf5; }.order-progress i { display:block; height:100%; border-radius:inherit; background:#0879f9; }
.pending-card>footer { min-height:51px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 13px; border-top:1px solid #edf2f7; }
.pending-card>footer>span { color:#8a96a9; font-size:9px; }
.pending-card>footer>button { min-width:105px; height:35px; padding:0 12px; border:1px solid #dfe8f3; border-radius:10px; color:#0879f9; background:#fff; font-size:10px; font-weight:650; cursor:pointer; }
.pending-card>footer>button.primary { color:#fff; border-color:#0879f9; background:#0879f9; box-shadow:0 5px 12px rgba(8,121,249,.16); }

.history-summary { display:grid; flex:0 0 auto; grid-template-columns:1.25fr 1fr .7fr; margin-bottom:10px; overflow:hidden; border:1px solid #e5ecf5; border-radius:16px; background:#f8fbff; }
.history-summary>div { min-width:0; padding:13px 10px; }.history-summary>div+div { border-left:1px solid #e5ecf5; }
.history-summary span,.history-summary strong { display:block; }.history-summary span { color:#8290a5; font-size:8px; }.history-summary strong { margin-top:6px; overflow:hidden; color:#0879f9; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }.history-summary strong small { margin-left:2px; color:#8290a5; font-size:8px; }
.history-filters { display:flex; flex:0 0 auto; gap:7px; margin-bottom:9px; }.history-filters button { height:31px; padding:0 16px; border:0; border-radius:9px; color:#77849a; background:#eff3f8; font-size:10px; }.history-filters button.active { color:#fff; background:#0879f9; }
.warehouse-history-list { min-height:0; overflow:visible; padding-bottom:14px; scrollbar-width:none; }.warehouse-history-list::-webkit-scrollbar { display:none; }
.history-card { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; padding:12px 13px; border:1px solid #e7edf5; border-radius:14px; background:#fff; box-shadow:0 5px 16px rgba(42,68,105,.04); }
.history-card>div { min-width:0; }.history-card strong,.history-card span,.history-card small,.history-card b { display:block; }.history-card strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.history-card span { margin-top:5px; color:#6f7c91; font-size:10px; }.history-card small { margin-top:4px; color:#9aa5b5; font-size:8px; }.history-card>div:last-child { text-align:right; }.history-card b { margin-bottom:7px; font-size:13px; white-space:nowrap; }

.report-preview { margin-bottom:16px; overflow:hidden; border:1px solid #dce9f7; border-radius:14px; background:#f5faff; }.report-preview header { display:flex; justify-content:space-between; gap:10px; padding:11px 13px; border-bottom:1px solid #dfeaf6; }.report-preview header strong { font-size:12px; }.report-preview header span { color:#738198; font-size:9px; }.report-preview pre { max-height:135px; overflow:auto; margin:0; padding:13px; color:#1e3452; font:600 12px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; }
.listing-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 14px; }.listing-title strong,.listing-title span { display:block; }.listing-title strong { font-size:15px; }.listing-title span { margin-top:4px; color:#8995a8; font-size:9px; }.listing-title button { border:0; color:#0879f9; background:transparent; font-size:10px; }
.listing-notice { margin:-2px 0 13px; padding:10px 12px; border-radius:10px; color:#58708f; background:#f2f7fd; font-size:9px; line-height:1.55; }
.sheet-actions button:disabled { color:#a7b1c0!important; border-color:#e5eaf0!important; background:#edf1f5!important; box-shadow:none!important; cursor:not-allowed; }
.receipt-order-card { padding:13px 14px; }.receipt-order-card>strong,.receipt-order-card>span { display:block; }.receipt-order-card>strong { font-size:14px; }.receipt-order-card>span { margin-top:4px; color:#0879f9; font-size:10px; }.receipt-order-card>p { margin:9px 0 0; }
.price-input { height:45px; display:grid; grid-template-columns:28px minmax(0,1fr) 38px; align-items:center; overflow:hidden; border:1px solid #dfe7f1; border-radius:10px; background:#fff; }.price-input>span { color:#0879f9; font-size:15px; font-weight:700; text-align:center; }.price-input>input { width:100%; height:43px; padding:0; border:0; outline:0; background:transparent; font-family:inherit; font-size:15px; font-weight:700; line-height:1; }.price-input>small { color:#8b97a9; font-size:9px; }
.merchant-overview { min-height:74px; display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:13px; margin-bottom:14px; padding:12px 14px; border-radius:15px; color:#fff; background:linear-gradient(125deg,#0768db,#0a92ee); box-shadow:0 8px 20px rgba(7,105,218,.16); }.merchant-overview>div { text-align:center; }.merchant-overview strong,.merchant-overview span { display:block; }.merchant-overview strong { font-size:25px; line-height:1; }.merchant-overview span { margin-top:4px; color:rgba(255,255,255,.72); font-size:9px; }.merchant-overview p { margin:0; color:rgba(255,255,255,.84); font-size:10px; line-height:1.55; }
.merchant-list { display:grid; gap:8px; }.merchant-card { min-height:62px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 11px; border:1px solid #e5ecf5; border-radius:13px; background:#fff; box-shadow:0 4px 13px rgba(36,66,105,.04); }.merchant-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#0879f9; background:#eaf4ff; font-size:16px; font-weight:750; }.merchant-card>div { min-width:0; }.merchant-card strong,.merchant-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.merchant-card strong { font-size:13px; }.merchant-card small { margin-top:5px; color:#8a96a9; font-size:9px; }.merchant-card>button { height:29px; padding:0 9px; border:0; border-radius:8px; color:#e5484d; background:#fff0f0; font-size:9px; cursor:pointer; }.merchant-in-use { padding:5px 8px; border-radius:99px; color:#0879f9; background:#eaf4ff; font-size:9px; white-space:nowrap; }
.merchant-empty { padding:27px 12px; border:1px dashed #dce5f0; border-radius:13px; color:#8b97aa; text-align:center; }.merchant-empty strong,.merchant-empty span { display:block; }.merchant-empty strong { color:#59667b; font-size:13px; }.merchant-empty span { margin-top:6px; font-size:9px; }
.merchant-add-form { display:grid; grid-template-columns:minmax(0,1fr) 76px; align-items:end; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid #edf1f6; }.merchant-add-form label>span { display:block; margin-bottom:7px; font-size:11px; font-weight:650; }.merchant-add-form input { width:100%; height:41px; padding:0 11px; border:1px solid #dfe7f1; border-radius:10px; outline:0; font:inherit; font-size:12px; }.merchant-add-form input:focus { border-color:#168aff; box-shadow:0 0 0 3px rgba(8,121,249,.09); }.merchant-add-form>button { height:41px; border:0; border-radius:10px; color:#fff; background:#0879f9; font-size:11px; font-weight:700; cursor:pointer; }
.review-order { margin-bottom:12px; padding:13px; border:1px solid #e5ecf5; border-radius:12px; color:#5d6b82; background:#f8faff; font-size:11px; }
.review-stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px; }.review-stats>div { padding:13px; border:1px solid #dce9f8; border-radius:13px; background:#f4f9ff; }.review-stats span,.review-stats strong { display:block; }.review-stats span { color:#78869b; font-size:10px; }.review-stats strong { margin-top:7px; color:#0879f9; font-size:19px; }.review-stats .danger { border-color:#ffe0da; background:#fff7f5; }.review-stats .danger strong { color:#f15343; }
.review-difference { margin-bottom:12px; padding:14px; border:1px solid #ffc885; border-radius:14px; background:#fffaf2; }.review-difference>strong { color:#d66c0d; font-size:13px; }.review-difference>div { display:grid; grid-template-columns:repeat(3,1fr); margin:13px 0; }.review-difference span { color:#7d6a58; font-size:9px; }.review-difference span+span { padding-left:10px; border-left:1px solid #f4dcc0; }.review-difference b { display:block; margin-top:5px; color:#263044; font-size:14px; }.review-difference span:last-child b { color:#e76b12; }.review-difference p { margin:0; padding-top:11px; border-top:1px dashed #efca9c; color:#725e49; font-size:11px; }.review-difference p b { display:inline; color:#e76b12; }
.review-success { margin-bottom:12px; padding:20px; border:1px solid #ccefdc; border-radius:14px; color:#168457; background:#f1fbf6; font-size:12px; text-align:center; }.review-note { margin-bottom:13px; padding:11px 12px; border-radius:11px; color:#4f6f9e; background:#edf6ff; font-size:9px; line-height:1.55; }

@media(max-height:780px){.warehouse-summary-card{min-height:98px;padding-top:10px;padding-bottom:11px}.warehouse-summary-total>strong{font-size:24px}.account-group .account-row{min-height:53px}.pending-card{margin-bottom:8px}}

/* Keep the complete outbound action bar above the fixed PWA navigation. */
.web-app .page[data-page="warehouse"] {
  bottom:calc(66px + env(safe-area-inset-bottom,0px));
  padding-bottom:0;
}
html.standalone-app .web-app .page[data-page="warehouse"] {
  bottom:calc(60px + env(safe-area-inset-bottom,0px));
}

/* Device overview v0.6.4 */
.brand-header { height:44px; margin-bottom:12px; }
.brand-lockup-image {
  display:block;
  width:88px;
  height:35px;
  object-fit:cover;
  object-position:center;
}
.machine-card-list { display:grid; gap:9px; padding-bottom:8px; }
.machine-card {
  --card-bg:url('/ui-assets/device-card-normal-v5.webp');
  position:relative;
  isolation:isolate;
  width:100%;
  height:128px;
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:15px;
  color:#fff;
  background:#071a32 var(--card-bg) center/cover no-repeat;
  box-shadow:0 8px 18px rgba(8,27,52,.12);
  cursor:pointer;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.machine-card::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(2,13,28,.87) 0,rgba(3,17,34,.63) 42%,rgba(3,17,34,.13) 74%,rgba(3,17,34,.27) 100%);
}
.machine-card::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(0deg,rgba(2,9,19,.42),transparent 56%);
}
.machine-card.warning { --card-bg:url('/ui-assets/device-card-warning-v5.webp'); box-shadow:0 8px 18px rgba(105,12,18,.16); }
.machine-card.offline { --card-bg:url('/ui-assets/device-card-offline-v5.webp'); box-shadow:0 8px 18px rgba(27,38,54,.1); }
.machine-card-top { position:absolute; z-index:2; left:12px; right:12px; top:10px; display:flex; align-items:center; gap:10px; }
.machine-index {
  width:36px;
  height:32px;
  display:grid;
  place-items:center;
  flex:0 0 36px;
  border:1px solid rgba(116,185,255,.24);
  border-radius:10px;
  background:rgba(15,79,154,.72);
  box-shadow:inset 0 1px rgba(255,255,255,.12);
  font-size:15px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.machine-card.warning .machine-index { border-color:rgba(255,126,134,.28); background:rgba(139,39,52,.72); }
.machine-card.offline .machine-index { border-color:rgba(197,211,231,.2); background:rgba(75,91,114,.72); }
.machine-name { overflow:hidden; flex:1; font-size:18px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.machine-status {
  min-width:68px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 11px;
  border:1px solid rgba(14,222,168,.52);
  border-radius:12px;
  color:#18e7b4;
  background:rgba(0,73,61,.68);
  font-size:13px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-style:normal;
  font-weight:650;
  letter-spacing:.04em;
}
.machine-status i { width:9px; height:9px; border-radius:50%; background:currentColor; box-shadow:0 0 9px currentColor; }
.machine-card.warning .machine-status { color:#ff6868; border-color:rgba(255,89,89,.62); background:rgba(91,17,25,.74); }
.machine-card.offline .machine-status { color:#c1ccdc; border-color:rgba(185,200,220,.43); background:rgba(31,43,60,.72); }
.machine-card.offline .machine-status i { box-shadow:none; }
.machine-card-metrics { position:absolute; z-index:2; left:13px; bottom:10px; display:grid; grid-template-columns:123px 1px 96px; align-items:end; gap:13px; }
.machine-card-metrics>i { width:1px; height:38px; margin-bottom:1px; background:rgba(220,234,251,.64); }
.machine-metric { display:block; min-width:0; }
.machine-metric-label { display:block; margin-bottom:2px; color:#b8c9df; font-size:11px; font-weight:600; }
.machine-card-metrics strong { display:flex; align-items:baseline; gap:3px; font-size:27px; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.machine-metric:last-child strong { font-size:21px; font-weight:700; letter-spacing:-.02em; }
.machine-card-metrics small { color:#e9f1fb; font-size:12px; font-weight:700; letter-spacing:0; }
.machine-card-chevron { position:absolute; z-index:2; right:12px; bottom:27px; width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.add-machine-card {
  width:100%;
  height:128px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1.5px dashed #cbd6e5;
  border-radius:15px;
  color:#17191d;
  background:rgba(255,255,255,.82);
  box-shadow:0 6px 17px rgba(49,72,106,.045);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.add-machine-card:active { background:#f7faff; }
.add-machine-plus { height:39px; font-size:49px; font-weight:250; line-height:34px; }
.add-machine-card strong { font-size:14px; font-weight:700; }
.detail-header { height:48px; display:grid; grid-template-columns:38px 1fr 38px; align-items:center; margin-bottom:8px; border-bottom:1px solid #edf0f4; }
.detail-header>div { min-width:0; text-align:center; }
.detail-header h1 { overflow:hidden; margin:0; color:#11151b; font-size:17px; font-weight:750; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
.detail-header div span { display:block; margin-top:1px; color:#8b93a1; font-size:10px; }
.detail-header-spacer { width:38px; height:38px; }
.detail-back svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.machine-detail[hidden],.machine-overview[hidden] { display:none!important; }

/* The latest navigation uses a neutral black selected state. */
.web-app .bottom-nav button { color:#8b95a8; }
.web-app .bottom-nav button.active { color:#090b0f; font-weight:700; }
.bottom-nav .nav-icon.outline { opacity:.5; }
.bottom-nav button.active .nav-icon.solid { filter:grayscale(1) contrast(4); }

@media(max-width:370px) {
  .machine-card { height:121px; }
  .add-machine-card { height:121px; }
  .machine-card-metrics { grid-template-columns:112px 1px 88px; gap:10px; }
  .machine-card-metrics strong { font-size:24px; }
}

/* Rich security center preview. The controls persist UI state only. */
.security-page { background:linear-gradient(180deg,#fff 0,#f9fbfe 48%,#f4f7fb 100%); }
.security-header { margin-bottom:12px; }
.security-hero {
  position:relative;
  min-height:162px;
  overflow:hidden;
  padding:20px 18px 17px;
  border:0;
  border-radius:13px;
  background:#06101e url('/ui-assets/security-hero-bg-v3.webp?v=110-clean-icons') right center/auto 100% no-repeat;
  box-shadow:0 10px 28px rgba(3,18,39,.16);
  color:#fff;
}
.security-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#051222 0%,rgba(5,18,34,.99) 49%,rgba(3,14,28,.42) 72%,rgba(2,10,20,.08) 100%),linear-gradient(0deg,rgba(1,7,15,.76),transparent 56%); pointer-events:none; }
.security-hero::after { content:""; position:absolute; inset:auto -25px -80px auto; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle,rgba(34,139,255,.26),transparent 68%); pointer-events:none; }
.security-hero-copy { position:relative; z-index:2; max-width:274px; }
.security-hero-copy h1 { display:flex; align-items:center; gap:11px; margin:0; color:#fff; font-size:23px; font-weight:820; letter-spacing:-.035em; line-height:1.18; }
.security-hero-copy h1 i { width:11px; height:11px; flex:0 0 auto; border-radius:50%; background:#27ddb2; box-shadow:0 0 0 3px rgba(39,221,178,.15),0 0 10px rgba(39,221,178,.65); }
.security-hero-copy p { margin:13px 0 0 3px; color:#d9e7f8; font-size:11.5px; line-height:1.4; white-space:nowrap; }
.security-stats { position:absolute; z-index:3; left:21px; right:96px; bottom:16px; display:grid; grid-template-columns:repeat(3,1fr); }
.security-stats>div { position:relative; min-width:0; padding:0 0 0 13px; text-align:left; }
.security-stats>div:first-child { padding-left:0; }
.security-stats>div+div::before { content:""; position:absolute; left:0; top:50%; width:1px; height:30px; background:rgba(182,211,241,.42); transform:translateY(-50%); }
.security-stats span,.security-stats strong { display:block; }
.security-stats span { margin-top:7px; color:#d7e2f0; font-size:10.5px; white-space:nowrap; }
.security-stats strong { color:#fff; font-size:25px; font-weight:760; line-height:1; font-variant-numeric:tabular-nums; }
.security-stats small { margin-left:2px; font-size:11px; font-weight:650; }
.security-feature-list { display:grid; gap:10px; margin-top:13px; }
.security-feature-card {
  min-height:96px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 54px;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid #e8ecf2;
  border-radius:12px;
  background:rgba(255,255,255,.97);
  box-shadow:0 8px 20px rgba(42,63,94,.055);
}
.security-feature-icon { width:52px; height:52px; display:grid; place-items:center; overflow:visible; color:#080b10; background:transparent; font-style:normal; box-shadow:none; }
.security-feature-icon img { display:block; width:100%; height:100%; object-fit:contain; }
.security-feature-icon svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.security-feature-icon.windows-icon svg { width:29px; height:29px; fill:currentColor; stroke:none; }
.security-feature-card>div { min-width:0; }
.security-feature-copy strong,.security-feature-copy span,.security-feature-copy small { display:block; }
.security-feature-copy strong { color:#0d1117; font-size:15px; font-weight:780; letter-spacing:-.02em; }
.security-feature-copy>span { margin-top:5px; color:#788496; font-size:10.8px; line-height:1.42; }
.security-feature-copy>small { margin-top:5px; color:#28313e; font-size:10.5px; font-weight:650; line-height:1.3; }
.security-card-control { align-self:center; display:flex; min-width:54px; flex-direction:column; align-items:center; gap:5px; }
.security-switch { position:relative; width:52px; height:44px; padding:7px 0; border:0; border-radius:99px; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.security-switch::before { content:""; position:absolute; left:0; right:0; top:8px; height:28px; border-radius:99px; background:#c8ced7; box-shadow:inset 0 0 0 1px rgba(40,48,59,.07); transition:background .2s ease; }
.security-switch i { position:absolute; z-index:1; top:11px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.28); transition:transform .2s ease; }
.security-switch.is-on::before { background:#111821; }
.security-switch.is-on i { transform:translateX(24px); }
.security-switch:focus-visible { outline:2px solid #408cff; outline-offset:1px; }
.security-switch:active i { width:24px; }
.security-card-control>small { display:block; margin-top:-4px; color:#111820; font-size:10.5px; font-weight:650; white-space:nowrap; }
.security-events-card { min-height:88px; grid-template-columns:52px minmax(0,1fr) 20px; }
.security-events-card>div strong { display:block; color:#0d1117; font-size:15px; font-weight:780; }
.security-events-card>div span { display:block; margin-top:5px; color:#788496; font-size:10.8px; line-height:1.42; }
.security-chevron { width:20px; height:20px; fill:none; stroke:#8d98a8; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.security-remote-card { min-height:119px; }
.remote-tool-row { display:flex; gap:5px; margin-top:7px; }
.remote-tool-row i { width:24px; height:24px; display:grid; place-items:center; border-radius:6px; color:#fff; background:#ff9d00; font-size:11px; font-style:normal; font-weight:800; box-shadow:0 2px 5px rgba(26,55,90,.12); }
.remote-tool-row i:nth-child(2) { background:#35b94a; }
.remote-tool-row i:nth-child(3) { background:#2694eb; }
.remote-tool-row i:nth-child(4) { background:#ef4f4f; }
.remote-tool-row i:nth-child(5) { background:#f28c16; color:#161616; }
.remote-tool-row i:nth-child(6) { background:#5d6675; }
.remote-tool-row i:nth-child(7) { background:#e4e8ee; color:#667080; }
@media(max-width:370px) {
  .security-hero { min-height:158px; padding-left:15px; padding-right:15px; }
  .security-hero-copy h1 { font-size:20px; }
  .security-hero-copy p { font-size:11px; }
  .security-stats { left:18px; right:79px; bottom:14px; }
  .security-stats>div+div { padding-left:8px; }
  .security-stats strong { font-size:22px; }
  .security-stats span { font-size:9.5px; }
  .security-feature-card { grid-template-columns:45px minmax(0,1fr) 51px; gap:9px; padding-left:10px; padding-right:10px; }
  .security-feature-icon { width:44px; height:44px; }
  .security-feature-icon svg { width:27px; height:27px; }
  .security-feature-copy strong { font-size:14px; }
  .security-feature-copy>span { font-size:10px; }
  .remote-tool-row { gap:3px; }
  .remote-tool-row i { width:21px; height:21px; }
  .security-switch { width:49px; }
  .security-switch.is-on i { transform:translateX(21px); }
}