:root {
color-scheme: dark;
--bg: #070a12;
--surface: rgba(16, 23, 42, .88);
--surface-2: rgba(23, 32, 56, .92);
--line: rgba(255,255,255,.12);
--line-strong: rgba(255,255,255,.22);
--text: #edf4ff;
--muted: #95a3bd;
--accent: #67e8f9;
--accent-2: #8b5cf6;
--green: #58d68d;
--yellow: #ffd166;
--red: #ff5c7a;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
margin: 0;
font-family: Inter, "Segoe UI", Arial, sans-serif;
color: var(--text);
background:
radial-gradient(circle at 12% 8%, rgba(103,232,249,.20), transparent 25%),
radial-gradient(circle at 82% 0%, rgba(139,92,246,.18), transparent 27%),
linear-gradient(135deg, #070a12 0%, #0b1020 52%, #111827 100%);
}
button, input { font: inherit; }
button { border: 0; cursor: pointer; white-space: nowrap; }
button:disabled { opacity: .55; cursor: not-allowed; }
.hidden { display: none !important; }
.app-shell { width: min(1500px, calc(100vw - 28px)); height: 100vh; margin: 0 auto; overflow: hidden; }
.app-header {
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
width: 40px; height: 40px; border-radius: 14px;
display: grid; place-items: center;
color: #e5edf8; font-weight: 950;
background:
linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.035)),
linear-gradient(135deg, #1f2937, #05070d);
border: 1px solid rgba(148,163,184,.28);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.13),
0 14px 42px rgba(0,0,0,.34);
}
.brand h1 { margin: 0; font-size: 18px; letter-spacing: -.03em; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.status-pill, .ghost, .danger-soft, .mini {
color: #d8e0ee;
background:
linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
#111722;
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
padding: 8px 11px;
font-size: 13px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 10px 24px rgba(0,0,0,.22);
transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
}
.ghost:hover, .mini:hover {
transform: translateY(-1px);
border-color: rgba(148,163,184,.45);
background:
linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.035)),
#151c2a;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 14px 30px rgba(0,0,0,.30);
}
.status-pill { color: var(--muted); border-radius: 999px; }
.status-pill.ok { border-color: rgba(88,214,141,.45); color: var(--green); }
.status-pill.bad { border-color: rgba(255,92,122,.45); color: var(--red); }
.ghost.active {
color: #f8fafc;
border-color: rgba(148,163,184,.55);
background:
linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)),
#1a2232;
}
.danger-soft {
color: #d6dce7;
background:
linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
#121620;
border-color: rgba(255,255,255,.13);
}
.danger-soft:hover {
transform: translateY(-1px);
color: #f1f5f9;
border-color: rgba(148,163,184,.42);
background:
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
#171d2a;
}
.danger-soft.active {
color: #fff;
border-color: rgba(255,92,122,.52);
background:
linear-gradient(180deg, rgba(255,92,122,.34), rgba(127,29,29,.22)),
#17111a;
}
.primary, .download-link {
color: #f8fafc;
background:
linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.035)),
linear-gradient(135deg, #1e293b, #0f172a);
border: 1px solid rgba(148,163,184,.34);
font-weight: 900;
border-radius: 13px;
padding: 11px 15px;
text-decoration: none;
display: inline-flex;
justify-content: center;
align-items: center;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 16px 34px rgba(0,0,0,.32);
transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
}
.primary:hover, .download-link:hover {
transform: translateY(-1px);
border-color: rgba(203,213,225,.55);
background:
linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.045)),
linear-gradient(135deg, #263449, #111827);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.15),
0 20px 42px rgba(0,0,0,.40);
}
.wide { width: 100%; }
.page { height: calc(100vh - 50px); overflow: hidden; padding: 6px 0; }
.home-page { display: grid; grid-template-rows: 230px 1fr; gap: 14px; }
.home-top, .tree-panel, .control-head, .left-mini-panel, .node-panel, .phone-stage {
border: 1px solid var(--line);
background: var(--surface);
border-radius: 22px;
box-shadow: 0 22px 70px rgba(0,0,0,.28);
}
.home-top { min-height: 0; overflow: hidden; }
.builder-panel { height: 100%; display: grid; grid-template-columns: 1fr 420px; gap: 18px; padding: 18px; }
.panel-title { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.eyebrow { color: var(--accent); font-weight: 850; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
h2, h3 { margin: 0; }
.panel-title h2 { margin-top: 8px; font-size: clamp(28px, 4vw, 46px); letter-spacing: -.05em; }
.panel-title p { margin: 10px 0 0; color: var(--muted); line-height: 1.55; max-width: 760px; }
.builder-form { min-width: 0; align-self: center; }
.field { display: block; margin-bottom: 9px; }
.field span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
input {
width: 100%;
border: 1px solid rgba(255,255,255,.13);
background: rgba(5,9,18,.72);
color: var(--text);
border-radius: 13px;
padding: 11px 12px;
outline: none;
}
input:focus { border-color: rgba(103,232,249,.75); box-shadow: 0 0 0 4px rgba(103,232,249,.10); }
.inline-status { margin-top: 8px; min-height: 18px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.download-link { width: 100%; margin-top: 7px; }
.log { display: none; }
.tree-panel { min-height: 0; overflow: hidden; padding: 14px; }
.section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 10px; }
.section-head h2 { margin-top: 5px; font-size: 22px; letter-spacing: -.03em; }
.device-tree { height: calc(100% - 54px); overflow: hidden; }
.empty-state { display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: 18px; color: var(--muted); background: rgba(255,255,255,.035); }
.tree-root { height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tree-group {
min-height: 0;
border: 1px solid var(--line);
border-radius: 18px;
background: rgba(255,255,255,.035);
padding: 10px;
overflow: hidden;
}
.tree-summary { list-style: none; cursor: default; display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 850; }
.tree-summary::-webkit-details-marker { display: none; }
.tree-summary:before { content: "?"; color: var(--accent); }
.tree-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.tree-children { margin: 10px 0 0 16px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }
.tree-item {
min-width: 0;
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
background: rgba(5,9,18,.44);
padding: 10px;
display: grid;
grid-template-columns: 18px 1fr auto;
gap: 9px;
align-items: center;
transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.tree-item:hover { transform: translateY(-1px); border-color: rgba(103,232,249,.65); background: rgba(20,31,54,.85); }
.tree-line { width: 14px; height: 28px; border-left: 1px solid rgba(103,232,249,.35); border-bottom: 1px solid rgba(103,232,249,.35); border-bottom-left-radius: 8px; }
.tree-main { min-width: 0; }
.tree-id { font-family: Consolas, monospace; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-meta { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.badge { padding: 4px 8px; border-radius: 999px; font-size: 12px; background: rgba(255,255,255,.08); color: var(--muted); }
.badge.online { color: var(--green); background: rgba(88,214,141,.13); }
.badge.offline { color: #ffb0bf; background: rgba(255,92,122,.13); }
.control-page { display: grid; grid-template-rows: 50px 1fr; gap: 6px; }
.control-head { padding: 6px 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; overflow: hidden; border-radius: 18px; }
.control-head h2 { margin-top: 1px; font-size: 15px; font-family: Consolas, monospace; }
.control-head p { margin: 1px 0 0; color: var(--muted); font-size: 10px; }
.control-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.control-workspace {
min-height: 0;
display: grid;
grid-template-columns: 190px minmax(360px, 1fr) 280px;
gap: 8px;
overflow: hidden;
}
.left-mini-panel, .node-panel { padding: 10px; overflow: hidden; border-radius: 18px; }
.left-mini-panel h3, .node-panel h3 { font-size: 15px; margin-bottom: 8px; }
.left-mini-panel p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
.coord-line { margin-top: 12px; color: var(--yellow); font-family: Consolas, monospace; font-size: 12px; line-height: 1.45; overflow: hidden; }
.phone-stage { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) 40px; gap: 4px; padding: 6px; overflow: hidden; place-items: center; border-radius: 18px; }
.phone-shell {
height: min(100%, calc(100vh - 120px));
aspect-ratio: 9 / 19.5;
max-width: min(540px, 100%);
min-height: 520px;
border-radius: 28px;
padding: 5px;
background: #050505;
border: 2px solid #1d1d1f;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.10),
inset 0 0 0 4px rgba(0,0,0,.92),
0 26px 78px rgba(0,0,0,.54);
position: relative;
display: grid;
grid-template-rows: minmax(0, 1fr);
overflow: visible;
}
.phone-speaker {
position: absolute;
z-index: 5;
top: 12px;
left: 50%;
width: 10px;
height: 10px;
transform: translateX(-50%);
border-radius: 999px;
background:
radial-gradient(circle at 46% 42%, #3b4250 0 22%, #07090d 26% 58%, #252832 62% 100%);
border: 1px solid rgba(0,0,0,.92);
box-shadow:
0 0 0 1px rgba(255,255,255,.18),
0 0 0 3px rgba(0,0,0,.18);
justify-self: auto;
align-self: auto;
}
.phone-screen {
position: relative;
min-height: 0;
border-radius: 21px;
overflow: hidden;
background: #000;
border: 1px solid rgba(255,230,0,.58);
box-shadow: inset 0 0 0 1px rgba(255,230,0,.14);
}
.phone-shell:before, .phone-shell:after {
content: "";
position: absolute;
right: -5px;
width: 3px;
border-radius: 999px;
background: linear-gradient(to bottom, #2a2a2a, #090909);
box-shadow: 1px 0 2px rgba(0,0,0,.55);
}
.phone-shell:before { top: 76px; height: 72px; }
.phone-shell:after { top: 172px; height: 64px; }
.phone-home-indicator { display: none; }
svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; }
.text-dock { width: clamp(220px, 32vh, 500px); max-width: calc(100% - 16px); display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; align-items: center; }
.node-panel pre {
margin: 0;
height: calc(100% - 28px);
overflow: hidden;
white-space: pre-wrap;
color: #dbeafe;
background: rgba(0,0,0,.34);
border: 1px solid var(--line);
border-radius: 14px;
padding: 10px;
font-size: 11px;
line-height: 1.35;
}
.skeleton-screen-background { fill: #000; stroke: transparent; stroke-width: 2; vector-effect: non-scaling-stroke; }
.skeleton-window-rect { fill: none; stroke: rgba(255,230,0,.52); stroke-width: 1.5; stroke-dasharray: 10 8; vector-effect: non-scaling-stroke; }
.skeleton-window-rect.screen-edge-bottom { stroke: rgba(203,213,225,.92); }
.node-rect { fill: rgba(255,230,0,.025); stroke: #ffe600; stroke-width: 1.5; vector-effect: non-scaling-stroke; shape-rendering: geometricPrecision; pointer-events: all; }
.node-rect.clickable { fill: rgba(255,230,0,.055); stroke: #fff200; stroke-width: 2; }
.node-rect.outline-suppressed:not(.focused):not(.selected) { fill: transparent; stroke: transparent; }
.node-rect.screen-edge-bottom:not(.focused):not(.selected):not(.clickable) { stroke: rgba(203,213,225,.92); }
.node-rect.outline-suppressed.screen-edge-bottom:not(.focused):not(.selected) { fill: transparent; stroke: transparent; }
.node-rect.focused { fill: rgba(255,242,0,.07); stroke: #fff200; stroke-width: 3; }
.node-rect.selected { fill: rgba(255,242,0,.13); stroke: #ffff33; stroke-width: 4; }
.accessibility-danger-zone { fill: rgba(244,63,94,.22); stroke: rgba(255,255,255,.88); stroke-width: 3; stroke-dasharray: 16 10; vector-effect: non-scaling-stroke; pointer-events: none; filter: drop-shadow(0 0 12px rgba(244,63,94,.72)); }
.node-label { fill: #fff200; stroke: #000; stroke-width: var(--node-label-stroke, var(--skeleton-label-stroke, 2.5px)); paint-order: stroke; pointer-events: none; font-family: Inter, "Segoe UI", Arial, sans-serif; font-weight: 700; letter-spacing: 0; }
.screen-screenshot-layer,
.screen-screenshot-image { pointer-events: none; }
.tap-cross { stroke: var(--red); stroke-width: 4; vector-effect: non-scaling-stroke; }
.tap-effect-layer {
position: absolute;
inset: 0;
z-index: 9;
pointer-events: none;
overflow: hidden;
}
.screen-tap-effect {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
animation: tapEffectFade .86s cubic-bezier(.16, 1, .3, 1) forwards;
}
.screen-tap-effect span,
.screen-tap-effect:before,
.screen-tap-effect:after {
content: "";
position: absolute;
left: 0;
top: 0;
transform: translate(-50%, -50%);
border-radius: 999px;
}
.screen-tap-effect span {
width: 22px;
height: 22px;
background: rgba(255,255,255,.94);
box-shadow: 0 0 0 5px rgba(14,165,233,.32), 0 0 30px rgba(14,165,233,.85);
}
.screen-tap-effect:before {
width: 88px;
height: 88px;
border: 2px solid rgba(125,211,252,.92);
animation: tapRipple .86s cubic-bezier(.16, 1, .3, 1) forwards;
}
.screen-tap-effect:after {
width: 8px;
height: 8px;
background: #38bdf8;
box-shadow: 0 0 18px #38bdf8;
}
.screen-tap-effect b {
position: absolute;
left: 12px;
top: -34px;
padding: 4px 8px;
border-radius: 999px;
font-size: 11px;
color: rgba(255,255,255,.96);
background: rgba(2,6,23,.72);
border: 1px solid rgba(255,255,255,.22);
box-shadow: 0 10px 24px rgba(2,6,23,.30);
white-space: nowrap;
}
.phone-screen.skeleton-updated { animation: skeletonUpdated .36s ease-out; }
/* Keep the control surface responsive on integrated/low-power GPUs. The
skeleton and controls remain fully functional without expensive blur
compositing and animated aurora layers. */
body.control-mode .aurora { display: none; }
body.control-mode .glass-panel,
body.control-mode .floating-panel,
body.control-mode .info-glass-card,
body.control-mode .dock,
body.control-mode .control-lock-overlay {
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 8px 22px rgba(15, 23, 42, .14);
}
@keyframes skeletonUpdated {
0% { box-shadow: inset 0 0 0 2px rgba(255,242,0,.88), inset 0 0 24px rgba(255,230,0,.22); }
100% { box-shadow: inset 0 0 0 1px rgba(255,230,0,.14); }
}
@keyframes tapRipple {
from { transform: translate(-50%, -50%) scale(.25); opacity: .95; }
to { transform: translate(-50%, -50%) scale(1.28); opacity: 0; }
}
@keyframes tapEffectFade {
0% { opacity: 1; filter: saturate(1.35); }
72% { opacity: 1; }
100% { opacity: 0; filter: saturate(1); }
}
code { color: #a7f3d0; }
@media (max-width: 1180px) {
.control-workspace { grid-template-columns: 160px minmax(300px, 1fr) 230px; }
.control-actions .ghost, .control-actions .danger-soft { padding: 6px 8px; font-size: 11px; }
}
@media (max-width: 900px) {
.builder-panel { grid-template-columns: 1fr; }
.panel-title p { display: none; }
.home-page { grid-template-rows: 280px 1fr; }
.control-workspace { grid-template-columns: 1fr; grid-template-rows: 0 1fr 0; }
.left-mini-panel, .node-panel { display: none; }
}
/* Device Hall layout, referenced from compact management-console UI */
.app-shell { width: calc(100vw - 16px); max-width: none; }
.hall-header {
height: 56px;
background: linear-gradient(180deg, #111827, #0b1220);
border: 1px solid #1f2a3d;
border-bottom: 0;
padding: 0 12px;
margin-top: 3px;
}
.hall-header .brand h1 { font-size: 15px; color: #ffffff; }
.hall-header .brand p { color: #94a3b8; font-size: 11px; }
.hall-header .brand-mark {
width: 28px;
height: 28px;
border-radius: 6px;
color: #dff7ff;
background: linear-gradient(135deg, #0f766e, #172554);
border: 1px solid rgba(103,232,249,.30);
box-shadow: 0 10px 26px rgba(0,0,0,.26);
}
.hall-page {
height: calc(100vh - 59px);
padding: 10px 6px 6px;
display: grid;
grid-template-rows: 34px auto 34px 26px minmax(0, 1fr);
gap: 8px;
background:
radial-gradient(circle at 20% 0%, rgba(14,165,233,.10), transparent 34%),
linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
color: #e5e7eb;
border: 1px solid #1f2a3d;
border-top: 0;
}
.hall-commandbar {
min-height: 0;
display: grid;
grid-template-columns: minmax(420px, 1fr) auto auto auto;
gap: 8px;
align-items: center;
}
.hall-search, .hall-server, .hall-app-label {
height: 28px;
border-radius: 8px;
border: 1px solid #334155;
background: #111827;
color: #e2e8f0;
padding: 0 10px;
font-size: 12px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.hall-search::placeholder, .hall-server::placeholder { color: #a8b5ca; }
.hall-commandbar .ghost,
.hall-commandbar .primary,
.hall-filterbar .ghost,
.hall-filterbar .danger-outline,
.ops button {
height: 28px;
min-width: 52px;
padding: 0 10px;
border-radius: 8px;
font-size: 12px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
transform: none;
}
.hall-commandbar .primary {
color: #e8fff7;
border: 1px solid #14b8a6;
background: linear-gradient(180deg, #0f766e, #0f4f49);
}
.hall-commandbar .ghost,
.hall-filterbar .ghost,
.ops button {
color: #e5e7eb;
border: 1px solid #334155;
background: linear-gradient(180deg, #1f2937, #111827);
}
.hall-filterbar .danger-outline {
color: #fecaca;
border: 1px solid rgba(248,113,113,.45);
background: linear-gradient(180deg, rgba(127,29,29,.72), rgba(69,10,10,.72));
}
.hall-stats {
min-height: 0;
display: grid;
grid-template-columns: repeat(12, minmax(95px, 1fr));
gap: 9px;
}
.stat-card {
background: linear-gradient(180deg, #111827, #0b1220);
border: 1px solid #263244;
border-radius: 10px;
padding: 8px 10px;
box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.stat-card span {
display: block;
color: #94a3b8;
font-size: 11px;
line-height: 1;
}
.stat-card strong {
display: block;
margin-top: 7px;
color: #f8fafc;
font-size: 22px;
line-height: 1;
}
.hall-filterbar {
min-height: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
background: #111827;
border: 1px solid #263244;
border-radius: 10px;
overflow: hidden;
}
.filter-tab {
height: 24px;
padding: 0 12px;
border-radius: 999px;
color: #cbd5e1;
border: 1px solid #334155;
background: #0f172a;
font-size: 12px;
}
.filter-tab.active {
color: #ecfeff;
background: linear-gradient(180deg, #0f766e, #134e4a);
border-color: #14b8a6;
}
.hall-filterbar label {
display: inline-flex;
align-items: center;
gap: 5px;
color: #cbd5e1;
font-size: 12px;
white-space: nowrap;
}
.hall-refresh-status {
margin-left: 6px;
position: relative;
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px 0 28px;
color: #bfdbfe;
background: #0f172a;
border: 1px solid #334155;
border-radius: 999px;
font-size: 12px;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hall-refresh-status::before {
content: "";
position: absolute;
left: 9px;
width: 10px;
height: 10px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}
.hall-refresh-status:hover {
border-color: #38bdf8;
background: #172554;
}
.hall-refresh-status.off {
color: #94a3b8;
background: #111827;
border-color: #334155;
}
.hall-refresh-status.off::before {
background: #94a3b8;
box-shadow: 0 0 0 3px rgba(100,116,139,.15);
}
.hall-refresh-status.bad {
color: #fecaca;
background: #2a1116;
border-color: rgba(248,113,113,.45);
}
.hall-refresh-status.bad::before {
background: #ef4444;
box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}
.hall-filterbar input[type="checkbox"],
.device-table input[type="checkbox"] {
width: 13px;
height: 13px;
margin: 0;
padding: 0;
accent-color: #14b8a6;
}
.hall-filter-actions {
margin-left: auto;
display: flex;
gap: 8px;
}
.hall-buildline {
min-height: 0;
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
}
.hall-buildline .inline-status {
margin: 0;
color: #94a3b8;
font-size: 12px;
min-height: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hall-buildline .download-link {
height: 24px;
width: auto;
margin: 0;
padding: 0 10px;
border-radius: 3px;
font-size: 12px;
}
.hall-table-card {
min-height: 0;
overflow: hidden;
background: #0b1220;
border: 1px solid #263244;
border-radius: 10px;
}
.device-table {
width: 100%;
min-width: 0;
border-collapse: collapse;
table-layout: fixed;
color: #dbeafe;
font-size: 10px;
}
.device-table thead th {
height: 28px;
padding: 0 4px;
background: #111827;
border-bottom: 1px solid #334155;
color: #bfdbfe;
font-weight: 700;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.device-table tbody td {
height: 48px;
padding: 3px 4px;
border-bottom: 1px solid #1e293b;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.group-row td {
height: 26px !important;
background: #172033;
color: #e2e8f0;
font-weight: 800;
border-top: 1px solid #334155;
border-bottom: 1px solid #334155;
}
.twisty { color: #67e8f9; margin-right: 5px; }
.device-row:hover td { background: rgba(30,41,59,.76); }
.device-table th:nth-child(1), .device-table td:nth-child(1) { width: 28px; }
.device-table th:nth-child(2), .device-table td:nth-child(2) { width: 130px; }
.device-table th:nth-child(3), .device-table td:nth-child(3) { width: 86px; }
.device-table th:nth-child(5), .device-table td:nth-child(4) { width: 112px; }
.device-table th:nth-child(6), .device-table td:nth-child(6) { width: 92px; }
.device-table th:nth-child(7), .device-table td:nth-child(7) { width: 70px; }
.device-table th:nth-child(8), .device-table td:nth-child(8) { width: 56px; }
.device-table th:nth-child(9), .device-table td:nth-child(9) { width: 56px; }
.device-table th:nth-child(10), .device-table td:nth-child(10) { width: 74px; }
.device-table th:nth-child(11), .device-table td:nth-child(11) { width: 92px; }
.device-table th:nth-child(12), .device-table td:nth-child(12) { width: 72px; }
.device-table th:nth-child(13), .device-table td:nth-child(13) { width: 52px; }
.device-table th:nth-child(14), .device-table td:nth-child(14) { width: 112px; }
.device-table th:nth-child(15), .device-table td:nth-child(15) { width: 64px; }
.device-table th:nth-child(16), .device-table td:nth-child(16) { width: 56px; }
.device-table th:nth-child(17), .device-table td:nth-child(17) { width: 72px; }
.device-table th:nth-child(18), .device-table td:nth-child(18) { width: 42px; }
.device-table th:nth-child(19), .device-table td:nth-child(19) { width: 68px; }
.device-table th:nth-child(20), .device-table td:nth-child(20) { width: 68px; }
.device-table th:nth-child(21), .device-table td:nth-child(21) { width: 78px; }
.device-table th:nth-child(22), .device-table td:nth-child(22) { width: 74px; }
.device-name b { display: block; color: #f8fafc; font-size: 11px; }
.device-name small,
.device-table td small {
display: block;
color: #94a3b8;
font-size: 10px;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mono { font-family: Consolas, monospace; }
.remark-input {
width: 100%;
height: 22px;
padding: 0 8px;
color: #e2e8f0;
background: #0f172a;
border: 1px solid #334155;
border-radius: 7px;
font-size: 11px;
}
.pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 18px;
padding: 0 8px;
border-radius: 999px;
color: #cbd5e1;
background: #1e293b;
border: 1px solid #334155;
font-size: 10px;
}
.pill.green { color: #bbf7d0; background: rgba(22,101,52,.52); border-color: rgba(74,222,128,.40); }
.pill.red { color: #fecaca; background: rgba(127,29,29,.52); border-color: rgba(248,113,113,.40); }
.pill.amber { color: #fde68a; background: rgba(120, 70, 7, .35); border-color: rgba(250, 204, 21, .42); }
.device-status-cell { white-space: normal !important; }
.device-status-cell .pill { display: inline-flex; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-status-detail { display: block !important; margin-top: 3px !important; color: #94a3b8; }
.device-app-status.is-alive { color: #86efac; }
.device-init-status.is-pending { color: #fde68a; }
.device-install-cell { white-space: normal !important; }
.device-install-cell b { display: block; font-weight: 700; }
.installation-source { color: #fbbf24 !important; }
.precise-published { color: #34d399 !important; font-weight: 700; }
.precise-missing { color: #f59e0b !important; }
.ops { display: flex; gap: 5px; }
.ops button {
height: 22px;
min-width: 34px;
padding: 0 7px;
color: #e2e8f0;
background: #111827;
border: 1px solid #334155;
}
.empty-row {
height: 160px !important;
text-align: center;
color: #94a3b8;
background: #0b1220;
}
@media (max-width: 1280px) {
.hall-commandbar { grid-template-columns: minmax(280px, 1fr) auto auto auto; }
.hall-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1281px) and (max-width: 1650px) {
.hall-stats { grid-template-columns: repeat(6, minmax(105px, 1fr)); }
}
/* APK generator modal */
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: start center;
padding: 14px 18px;
background: rgba(15,23,42,.42);
backdrop-filter: blur(3px);
overflow: hidden;
}
.apk-modal {
width: min(1060px, calc(100vw - 56px));
height: min(840px, calc(100vh - 28px));
display: grid;
grid-template-rows: 52px minmax(310px, auto) minmax(0, 1fr) 48px;
gap: 12px;
color: #101820;
background: #eef2f3;
border: 1px solid #cfd8dc;
border-radius: 8px;
box-shadow: 0 28px 90px rgba(0,0,0,.36);
overflow: hidden;
}
.apk-modal-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 12px;
background: #f8faf9;
border-bottom: 1px solid #d6dee2;
}
.apk-modal-head h2 {
margin: 0;
font-size: 17px;
color: #1f2933;
}
.apk-modal-head p {
margin: 3px 0 0;
color: #475569;
font-size: 11px;
}
.apk-modal-actions, .apk-history-actions {
display: flex;
align-items: center;
gap: 6px;
}
.modal-light-btn, .modal-close-btn, .red-line-btn {
height: 30px;
padding: 0 12px;
border-radius: 5px;
font-size: 12px;
color: #102027;
background: #ffffff;
border: 1px solid #b8c4c9;
box-shadow: none;
}
.modal-close-btn {
width: 30px;
padding: 0;
color: #64748b;
}
.red-line-btn {
color: #dc2626;
border-color: #fca5a5;
background: #fffafa;
}
.apk-config-card, .apk-history-card {
margin: 0 12px;
background: #ffffff;
border: 1px solid #cfd8dc;
border-radius: 6px;
overflow: hidden;
}
.apk-config-card { padding-bottom: 10px; }
.apk-card-head, .apk-history-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #f8faf9;
border-bottom: 1px solid #e0e7eb;
}
.apk-card-head h3, .apk-history-head h3 {
margin: 0;
color: #111827;
font-size: 14px;
}
.apk-card-head p, .apk-history-head p, .apk-card-head span {
margin: 3px 0 0;
color: #475569;
font-size: 11px;
}
.apk-form-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 11px 14px;
padding: 12px;
}
.apk-field b {
display: block;
margin-bottom: 7px;
color: #0f172a;
font-size: 12px;
}
.apk-field input[type="text"],
.apk-field input[type="password"],
.apk-field > input,
.inline-input-row input,
.version-row input {
width: 100%;
height: 30px;
color: #111827;
background: #ffffff;
border: 1px solid #b8c4c9;
border-radius: 5px;
padding: 0 10px;
font-size: 12px;
box-shadow: inset 0 1px 2px rgba(15,23,42,.05);
}
.apk-field small {
display: block;
margin-top: 6px;
color: #52616b;
font-size: 11px;
}
.inline-input-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.version-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 94px;
gap: 8px;
}
.fake-file-row {
height: 30px;
display: flex;
align-items: center;
gap: 8px;
border: 1px dashed #b8c4c9;
border-radius: 5px;
padding: 0 8px;
color: #334155;
font-size: 12px;
}
.file-picker-button {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
cursor: pointer;
}
#iconFileName {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.visually-hidden-file {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.icon-picker-row {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.icon-preview {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 13px;
border: 1px solid #b8c4c9;
background: linear-gradient(135deg, #07111f, #0f766e);
box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 20px rgba(15,23,42,.12);
overflow: hidden;
}
.icon-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.icon-preview span {
color: #ffffff;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
}
.icon-preview.empty {
background: linear-gradient(135deg, #111827, #334155);
}
.icon-picker-main small {
margin-top: 6px;
}
.segmented {
height: 30px;
display: flex;
align-items: center;
gap: 0;
}
.seg {
height: 30px;
padding: 0 18px;
border: 1px solid #b8c4c9;
background: #ffffff;
color: #0f172a;
font-size: 12px;
}
.seg:first-child { border-radius: 5px 0 0 5px; }
.seg:nth-child(2) { border-radius: 0 5px 5px 0; border-left: 0; }
.seg.active {
color: #ffffff;
background: #0f766e;
border-color: #0f766e;
}
.hide-icon {
margin-left: 14px;
display: inline-flex;
align-items: center;
gap: 5px;
color: #334155;
font-size: 12px;
}
.hide-icon input,
.apk-protect-box input[type="checkbox"] {
width: 34px;
height: 18px;
appearance: none;
-webkit-appearance: none;
border: 1px solid #94a3b8;
border-radius: 999px;
background: #cbd5e1;
position: relative;
cursor: pointer;
vertical-align: middle;
transition: .16s ease;
}
.hide-icon input::after,
.apk-protect-box input[type="checkbox"]::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 4px rgba(15,23,42,.28);
transition: .16s ease;
}
.hide-icon input:checked,
.apk-protect-box input[type="checkbox"]:checked {
border-color: #0f766e;
background: #0f766e;
}
.hide-icon input:checked::after,
.apk-protect-box input[type="checkbox"]:checked::after {
transform: translateX(16px);
}
.apk-protect-box {
margin: 0 12px;
padding: 10px;
border: 1px solid #b8c4c9;
border-radius: 5px;
color: #0f172a;
background: #fbfdfd;
font-size: 12px;
}
.apk-protect-box p {
margin: 6px 0 0 24px;
color: #475569;
font-size: 11px;
}
.apk-history-card {
min-height: 0;
display: grid;
grid-template-rows: 48px 24px minmax(0, 1fr);
}
.blue-download {
height: 30px;
display: inline-flex;
align-items: center;
padding: 0 14px;
border-radius: 5px;
color: #ffffff;
background: #2456a6;
text-decoration: none;
font-size: 12px;
font-weight: 700;
}
.modal-build-status {
padding: 5px 12px;
color: #0f766e;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.apk-history-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 12px;
color: #111827;
}
.apk-history-table th {
height: 28px;
padding: 0 10px;
text-align: left;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #dbe3ea;
}
.apk-history-table td {
height: 32px;
padding: 0 10px;
border-bottom: 1px solid #e5ebf0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apk-history-table a {
color: #2456a6;
text-decoration: none;
font-weight: 700;
}
.apk-modal-foot {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 8px 12px 12px;
}
.apk-generate-btn {
height: 36px;
min-width: 160px;
padding: 0 18px;
border-radius: 5px;
color: #ffffff;
background: #0f766e;
border: 1px solid #0d625c;
font-size: 13px;
font-weight: 800;
box-shadow: 0 10px 28px rgba(15,118,110,.22);
}
.apk-generate-btn:disabled { opacity: .62; cursor: not-allowed; }
@media (max-width: 980px) {
.apk-form-grid { grid-template-columns: 1fr; }
.apk-modal { grid-template-rows: 52px minmax(430px, auto) minmax(0, 1fr) 48px; }
}
/* Apple-style screen control console */
body.control-mode {
background:
radial-gradient(circle at 18% 18%, rgba(255,255,255,.88), transparent 18%),
radial-gradient(circle at 74% 22%, rgba(125,211,252,.58), transparent 28%),
radial-gradient(circle at 78% 78%, rgba(37,99,235,.70), transparent 34%),
linear-gradient(135deg, #f8fbff 0%, #dff6ff 37%, #78c7ff 62%, #2360d4 100%);
}
body.control-mode .app-header { display: none; }
body.control-mode .app-shell { width: 100vw; height: 100vh; }
body.control-mode .page { height: 100vh; padding: 0; }
.control-page {
display: grid;
grid-template-rows: 38px minmax(0, 1fr);
gap: 0;
color: rgba(15, 23, 42, .92);
background:
linear-gradient(120deg, rgba(255,255,255,.84), rgba(255,255,255,.12) 38%, rgba(59,130,246,.24) 100%),
radial-gradient(circle at 16% 64%, rgba(14,165,233,.28), transparent 26%),
radial-gradient(circle at 86% 18%, rgba(224,242,254,.84), transparent 30%);
position: relative;
}
.glass-panel,
.floating-panel {
background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.22));
border: 1px solid rgba(255,255,255,.72);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.72),
0 24px 70px rgba(15,23,42,.18),
0 1px 0 rgba(255,255,255,.42);
-webkit-backdrop-filter: blur(22px) saturate(165%);
backdrop-filter: blur(22px) saturate(165%);
}
.mac-menu-bar {
height: 38px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 18px;
border-radius: 0;
border-left: 0;
border-right: 0;
border-top: 0;
color: rgba(15,23,42,.88);
z-index: 50;
}
.mac-menu-left,
.mac-menu-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mac-menu-right { font-size: 13px; color: rgba(30,41,59,.72); }
.apple-mark,
.mac-menu-title,
.mac-menu-item {
height: 28px;
padding: 0 9px;
border-radius: 9px;
background: transparent;
color: rgba(15,23,42,.90);
border: 1px solid transparent;
transition: transform .16s cubic-bezier(.2,.8,.2,1), background .16s ease, border-color .16s ease;
}
.apple-mark { font-size: 18px; font-weight: 900; padding: 0 8px; }
.mac-menu-title { font-weight: 900; }
.mac-menu-item { font-weight: 650; }
.apple-mark:hover,
.mac-menu-title:hover,
.mac-menu-item:hover {
transform: scale(1.04);
background: rgba(255,255,255,.46);
border-color: rgba(255,255,255,.58);
}
.mac-status-dot:before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 6px;
border-radius: 50%;
background: #34c759;
box-shadow: 0 0 16px rgba(52,199,89,.75);
}
.control-canvas {
position: relative;
min-height: 0;
overflow: hidden;
isolation: isolate;
}
.control-canvas:before {
content: "";
position: absolute;
inset: -8% -8% 0;
z-index: -4;
background:
linear-gradient(150deg, transparent 0 34%, rgba(255,255,255,.75) 35%, rgba(255,255,255,.08) 38%, transparent 48%),
linear-gradient(330deg, transparent 0 52%, rgba(255,255,255,.62) 53%, transparent 62%);
filter: blur(.2px);
}
.aurora { position: absolute; z-index: -3; pointer-events: none; border-radius: 999px; filter: blur(16px); opacity: .75; }
.aurora-a { width: 74vw; height: 30vh; left: -12vw; bottom: 6vh; background: linear-gradient(90deg, rgba(56,189,248,.64), rgba(255,255,255,.14)); transform: rotate(-12deg); }
.aurora-b { width: 54vw; height: 42vh; right: -12vw; top: 12vh; background: radial-gradient(circle, rgba(255,255,255,.75), rgba(96,165,250,.22) 54%, transparent 72%); }
.aurora-c { width: 58vw; height: 24vh; right: 4vw; bottom: -4vh; background: linear-gradient(90deg, rgba(29,78,216,.72), rgba(147,197,253,.12)); transform: rotate(-7deg); }
.floating-panel {
position: absolute;
z-index: 18;
border-radius: 19px;
color: rgba(15,23,42,.92);
user-select: none;
}
.floating-panel.dragging,
.phone-float.dragging { opacity: .96; cursor: grabbing; }
.floating-panel.stage-staging {
opacity: 0;
transform: translateX(-28px) scale(.96) !important;
transition: opacity .16s ease, transform .16s ease;
pointer-events: none;
}
.floating-panel.stage-hidden { display: none !important; }
.dock-hidden { display: none !important; }
.floating-panel.stage-restoring { animation: stage-panel-restore .2s ease-out; }
@keyframes stage-panel-restore {
from { opacity: 0; transform: translateX(24px) scale(.96); }
to { opacity: 1; transform: none; }
}
.stage-edge-target {
position: absolute;
z-index: 78;
left: 0;
top: 42px;
bottom: 82px;
width: 12px;
opacity: 0;
pointer-events: none;
transform: scaleX(.35);
transform-origin: left center;
background: rgba(15,118,110,.28);
border-right: 1px solid rgba(15,118,110,.62);
transition: opacity .14s ease, transform .14s ease;
}
.stage-edge-target.active { opacity: 1; transform: scaleX(1); }
.stage-rail {
position: absolute;
z-index: 82;
right: 8px;
top: 50%;
width: 68px;
display: flex;
flex-direction: column;
gap: 8px;
transform: translateY(-50%);
pointer-events: none;
}
.stage-rail:empty { display: none; }
.stage-thumbnail {
width: 68px;
min-height: 54px;
padding: 6px 4px;
display: grid;
place-items: center;
gap: 3px;
color: rgba(15,23,42,.88);
background: rgba(255,255,255,.82);
border: 1px solid rgba(255,255,255,.92);
border-radius: 8px;
box-shadow: 0 12px 28px rgba(15,23,42,.16);
pointer-events: auto;
cursor: pointer;
}
.stage-thumbnail:hover { background: rgba(255,255,255,.96); transform: translateX(-3px); }
.stage-thumbnail-icon { font-size: 17px; line-height: 1; color: #0f766e; }
.stage-thumbnail-title {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
line-height: 1.2;
}
.float-titlebar,
.phone-drag-handle {
height: 34px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 12px;
cursor: grab;
color: rgba(15,23,42,.72);
border-bottom: 1px solid rgba(15,23,42,.10);
}
.float-titlebar b { font-size: 13px; color: rgba(15,23,42,.88); }
.drag-hint { font-size: 11px; color: rgba(71,85,105,.72); }
.mini-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.mini-dot.red { background: #ff5f57; }
.mini-dot.yellow { background: #febc2e; }
.mini-dot.green { background: #28c840; }
.clue-titlebar-actions { display: flex; align-items: center; gap: 2px; }
.clue-clear-btn { width: auto; height: 22px; padding: 0 8px; font-size: 12px; color: rgba(190,30,30,.9); }
.clue-clear-btn:hover { color: #b91c1c; background: rgba(239,68,68,.12); }
.info-glass-card,
.clue-glass-card {
width: 100%;
background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.22));
border: 1px solid rgba(255,255,255,.72);
border-radius: 19px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.72),
0 24px 70px rgba(15,23,42,.18),
0 1px 0 rgba(255,255,255,.42);
-webkit-backdrop-filter: blur(22px) saturate(165%);
backdrop-filter: blur(22px) saturate(165%);
}
#deviceInfoCard,
#deviceClueCard {
width: 420px;
-ms-overflow-style: none;
scrollbar-width: none;
}
#deviceInfoCard::-webkit-scrollbar,
#deviceClueCard::-webkit-scrollbar { display: none; }
#deviceInfoCard {
top: 8px;
left: 8px;
min-height: 292px;
overflow: visible;
}
#deviceClueCard {
left: 8px;
bottom: 96px;
overflow: hidden;
}
.info-glass-card {
min-height: 292px;
overflow: visible;
}
.info-grid {
display: grid;
grid-template-columns: 72px minmax(0, 1fr) 72px minmax(0, 1fr);
gap: 7px 12px;
padding: 13px 18px 8px;
font-size: 13px;
}
.info-grid span { color: rgba(71,85,105,.76); }
.info-grid b {
min-width: 0;
overflow-wrap: anywhere;
font-size: 13px;
color: rgba(15,23,42,.94);
}
.info-details {
margin: 6px 18px 0;
border-top: 1px solid rgba(15,23,42,.10);
}
.info-section-title {
padding: 9px 0 4px;
color: #0f766e;
font-size: 12px;
font-weight: 800;
}
.info-detail-grid {
grid-template-columns: 76px minmax(0, 1fr) 76px minmax(0, 1fr);
padding: 7px 0 4px;
}
.screen-info-line {
margin: 6px 18px 0;
padding-top: 8px;
border-top: 1px solid rgba(15,23,42,.10);
color: rgba(51,65,85,.82);
white-space: pre-line;
font-size: 12px;
line-height: 1.45;
}
.info-glass-card .coord-line {
margin: 8px 18px 16px;
color: #0f766e;
font-family: Consolas, monospace;
}
.info-glass-card .coord-line:empty { display: none; }
.clue-glass-card { overflow: hidden; }
.clue-list {
margin: 0;
padding: 8px 12px 12px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 10px;
}
.clue-row {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 6px;
padding: 7px 8px 7px 10px;
min-height: 40px;
border-radius: 14px;
border: 1px solid rgba(15,23,42,.08);
background: rgba(255,255,255,.30);
box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
font-size: 13px;
line-height: 1.4;
}
.clue-row:last-child { border-bottom: 0; }
.clue-row dt {
color: rgba(71,85,105,.76);
font-weight: 500;
}
.clue-row dd {
min-width: 0;
margin: 0;
color: rgba(15,23,42,.94);
font-weight: 700;
overflow-wrap: anywhere;
}
.clue-value-button {
width: 100%;
min-height: 20px;
padding: 0;
color: inherit;
text-align: left;
background: transparent;
border: 0;
border-radius: 4px;
font: inherit;
font-weight: inherit;
letter-spacing: 0;
}
.clue-value-button:not(:disabled) { cursor: pointer; }
.clue-value-button:not(:disabled):hover { color: #0f766e; text-decoration: underline; }
.clue-value-button:disabled { cursor: default; opacity: 1; }
#deviceInfoCard.needs-scroll,
#deviceClueCard.needs-scroll {
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
}
#deviceInfoCard.needs-scroll {
min-height: 0;
max-height: var(--info-available-height);
}
#deviceClueCard.needs-scroll { max-height: var(--clue-available-height); }
.phone-float {
position: absolute;
z-index: 20;
transform: translate(-50%, -50%);
width: min(36vw, 390px);
min-width: 310px;
max-width: 430px;
user-select: none;
}
.phone-drag-handle {
justify-content: space-between;
height: 6px;
margin-bottom: 0;
border: 0;
color: rgba(15,23,42,.70);
font-weight: 750;
text-shadow: 0 1px 0 rgba(255,255,255,.42);
gap: 10px;
padding: 0;
}
.phone-screen-titlebar {
height: 34px;
padding: 0 12px;
border: 0;
border-bottom: 1px solid rgba(15,23,42,.10);
}
.phone-screen-title-left {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.phone-screen-title {
font-size: 13px;
color: rgba(15,23,42,.88);
white-space: nowrap;
}
.phone-screen-controls {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.control-page .phone-stage {
min-height: 0;
display: grid;
grid-template-rows: minmax(0, 1fr) 44px;
gap: 8px;
padding: 0;
overflow: visible;
place-items: center;
border: 0;
background: transparent;
box-shadow: none;
}
.control-page .phone-shell {
width: min(100%, 390px);
height: min(calc(100vh - 154px), 710px);
min-height: 560px;
aspect-ratio: 9 / 19.5;
border-radius: 44px;
padding: 10px;
background: #06070a;
border: 1px solid rgba(15,23,42,.42);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.55),
inset 0 0 0 8px rgba(3,7,18,.95),
0 32px 86px rgba(15,23,42,.34),
0 0 0 12px rgba(125,211,252,.12),
0 0 0 24px rgba(14,165,233,.10);
transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.control-page .phone-shell:hover {
transform: translateY(-2px) scale(1.006);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.58),
inset 0 0 0 8px rgba(3,7,18,.95),
0 38px 96px rgba(15,23,42,.40),
0 0 0 13px rgba(125,211,252,.17),
0 0 0 27px rgba(14,165,233,.13);
}
.phone-dynamic-island {
position: absolute;
z-index: 6;
top: 22px;
left: 50%;
width: 96px;
height: 30px;
transform: translateX(-50%);
border-radius: 999px;
background: #020305;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 2px 10px rgba(0,0,0,.38);
}
.control-page .phone-speaker { display: none; }
.control-page .phone-screen {
min-height: 0;
border-radius: 31px;
overflow: hidden;
background: #000;
border: 1px solid rgba(255,230,0,.72);
box-shadow: inset 0 0 0 1px rgba(255,230,0,.16);
}
.control-page .phone-home-indicator {
display: block;
position: absolute;
z-index: 6;
bottom: 18px;
left: 50%;
width: 108px;
height: 5px;
transform: translateX(-50%);
border-radius: 999px;
background: rgba(255,255,255,.72);
}
.control-page .phone-shell:before,
.control-page .phone-shell:after { right: -4px; background: linear-gradient(to bottom, #9ca3af, #111827); }
.control-page .text-dock {
width: 100%;
max-width: 390px;
display: grid;
grid-template-columns: minmax(0, 1fr) 38px 98px;
gap: 8px;
align-items: center;
padding: 6px;
border-radius: 18px;
background: rgba(255,255,255,.38);
border: 1px solid rgba(255,255,255,.68);
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
box-shadow: 0 18px 50px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.72);
}
.control-page .text-dock input {
height: 32px;
border-radius: 12px;
background: rgba(255,255,255,.54);
color: rgba(15,23,42,.92);
border-color: rgba(15,23,42,.10);
padding: 0 10px;
}
.control-page .text-dock .primary {
height: 32px;
padding: 0 12px;
border-radius: 12px;
background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(59,130,246,.70)), #2563eb;
border-color: rgba(255,255,255,.62);
box-shadow: 0 10px 24px rgba(37,99,235,.30), inset 0 1px 0 rgba(255,255,255,.50);
}
.quick-rail {
position: absolute;
z-index: 19;
top: 50%;
right: clamp(18px, 9vw, 170px);
transform: translateY(-50%);
width: 86px;
padding: 10px;
border-radius: 28px;
display: grid;
gap: 9px;
}
.rail-btn {
height: 62px;
border-radius: 20px;
display: grid;
place-items: center;
gap: 3px;
color: rgba(15,23,42,.86);
background: rgba(255,255,255,.36);
border: 1px solid rgba(255,255,255,.58);
box-shadow: inset 0 1px 0 rgba(255,255,255,.60), 0 12px 28px rgba(15,23,42,.10);
transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s ease, box-shadow .18s ease;
}
.rail-btn span { font-size: 22px; line-height: 1; }
.rail-btn b { font-size: 12px; }
.rail-btn:hover { transform: scale(1.08); background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 18px 36px rgba(15,23,42,.18); }
.node-glass-card {
width: 390px;
height: min(46vh, 370px);
min-height: 300px;
z-index: 34;
display: grid;
grid-template-rows: 34px 44px minmax(0, 1fr) auto;
overflow: hidden;
transform-origin: 100% 100%;
transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}
.node-glass-card.node-panel-collapsed {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(24px, 22px) scale(.82);
transition: opacity .18s ease, transform .18s cubic-bezier(.4,0,1,1), visibility 0s linear .18s;
}
.node-glass-card.inspect-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(0, 0) scale(1);
}
.node-count {
min-width: 30px;
height: 20px;
padding: 0 7px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #1d4ed8;
background: rgba(219,234,254,.72);
border: 1px solid rgba(59,130,246,.24);
font-size: 11px;
font-weight: 800;
}
.node-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) 82px;
gap: 7px;
padding: 6px 9px;
border-top: 1px solid rgba(255,255,255,.48);
border-bottom: 1px solid rgba(15,23,42,.08);
background: rgba(255,255,255,.24);
}
.node-toolbar input[type="search"] {
width: 100%;
height: 31px;
padding: 0 9px;
border-radius: 9px;
color: #0f172a;
background: rgba(255,255,255,.58);
border: 1px solid rgba(15,23,42,.12);
font-size: 12px;
}
.node-text-filter {
height: 31px;
padding: 0 8px;
border-radius: 9px;
display: flex;
align-items: center;
gap: 5px;
color: rgba(30,41,59,.84);
background: rgba(255,255,255,.44);
border: 1px solid rgba(15,23,42,.10);
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
.node-text-filter input { width: 14px; height: 14px; margin: 0; accent-color: #2563eb; }
.node-list {
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 5px;
background: rgba(255,255,255,.16);
scrollbar-width: thin;
scrollbar-color: rgba(37,99,235,.34) transparent;
}
.node-list-empty {
height: 100%;
display: grid;
place-items: center;
color: rgba(71,85,105,.68);
font-size: 12px;
}
.node-list-row {
min-height: 42px;
display: grid;
grid-template-columns: 28px minmax(0, 1fr) 30px;
gap: 7px;
align-items: center;
padding: 4px 5px;
border-radius: 9px;
color: rgba(15,23,42,.88);
border: 1px solid transparent;
cursor: default;
outline: none;
}
.node-list-row:hover { background: rgba(255,255,255,.46); }
.node-list-row.selected {
color: #0f3f99;
background: rgba(219,234,254,.78);
border-color: rgba(37,99,235,.34);
box-shadow: inset 3px 0 0 #2563eb;
}
.node-row-index { color: rgba(71,85,105,.58); font-size: 10px; text-align: right; }
.node-row-content { min-width: 0; display: grid; gap: 2px; }
.node-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; }
.node-row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(71,85,105,.72); font-size: 10px; }
.node-copy-icon {
width: 28px;
height: 28px;
padding: 0;
border-radius: 8px;
display: grid;
place-items: center;
color: #1d4ed8;
background: rgba(255,255,255,.58);
border: 1px solid rgba(37,99,235,.18);
font-size: 16px;
}
.node-copy-icon:disabled { opacity: .28; cursor: default; }
.selected-node-summary {
display: grid;
grid-template-columns: minmax(0, 1fr) 124px;
grid-template-rows: auto auto auto;
gap: 6px 7px;
min-height: 154px;
padding: 7px 9px 9px;
border-top: 1px solid rgba(15,23,42,.10);
background: rgba(255,255,255,.32);
}
.selected-node-fields {
grid-column: 1;
grid-row: 1;
min-width: 0;
overflow: hidden;
white-space: pre-line;
color: rgba(30,41,59,.80);
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 10px;
line-height: 1.35;
}
.node-copy-actions { grid-column: 2; grid-row: 1; display: grid; gap: 5px; }
.node-copy-actions button {
min-width: 0;
height: 36px;
padding: 0 7px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
color: #fff;
background: linear-gradient(145deg, #1d4ed8, #2563eb);
border: 1px solid rgba(255,255,255,.38);
font-size: 10px;
}
.node-copy-actions button:disabled { opacity: .36; cursor: default; filter: grayscale(.45); }
.node-action-actions {
grid-column: 1 / -1;
grid-row: 2;
min-width: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.node-action-actions button {
min-width: 0;
height: 36px;
padding: 0 7px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
color: #fff;
background: linear-gradient(145deg, #0f766e, #0d9488);
border: 1px solid rgba(255,255,255,.38);
font-size: 10px;
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.node-action-actions button:nth-child(2) { background: linear-gradient(145deg, #b45309, #d97706); }
.node-action-actions button:nth-child(3) { background: linear-gradient(145deg, #9f1239, #be123c); }
.node-action-actions button:hover:not(:disabled) { filter: brightness(1.08); }
.node-action-actions button:disabled { opacity: .36; cursor: default; filter: grayscale(.45); }
.node-action-actions button.sending { animation: node-action-pulse 1s ease-in-out infinite; }
.node-action-actions button span { flex: 0 0 auto; font-size: 14px; line-height: 1; }
.node-action-actions button b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.node-action-status {
grid-column: 1 / -1;
grid-row: 3;
min-width: 0;
min-height: 15px;
color: rgba(30,41,59,.72);
font-size: 10px;
line-height: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.node-action-status.error { color: #b91c1c; }
.node-action-status.success { color: #047857; }
@keyframes node-action-pulse { 50% { opacity: .56; } }
@media (max-width: 520px) {
.node-glass-card { width: min(390px, calc(100vw - 18px)); }
.selected-node-summary { grid-template-columns: minmax(0, 1fr) 112px; }
}
.remote-pad-card {
width: 218px;
height: 224px;
z-index: 22;
}
.remote-pad {
width: 174px;
height: 174px;
margin: 8px auto;
display: grid;
grid-template-columns: repeat(3, 52px);
grid-template-rows: repeat(3, 52px);
gap: 9px;
place-content: center;
}
.remote-key {
width: 52px;
height: 52px;
padding: 0;
border-radius: 50%;
display: grid;
place-items: center;
color: rgba(15,23,42,.90);
background: linear-gradient(150deg, rgba(255,255,255,.78), rgba(255,255,255,.28));
border: 1px solid rgba(255,255,255,.78);
box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 10px 24px rgba(15,23,42,.16);
transition: transform .16s cubic-bezier(.2,.8,.2,1), background .16s ease, box-shadow .16s ease;
touch-action: manipulation;
}
.remote-key span { font-size: 26px; line-height: 1; }
.remote-key:hover {
transform: scale(1.12);
background: rgba(255,255,255,.86);
box-shadow: inset 0 1px 0 #fff, 0 16px 34px rgba(15,23,42,.22);
}
.remote-key:active { transform: scale(.94); }
.remote-key:disabled { opacity: .50; transform: scale(.94); cursor: wait; }
.remote-up { grid-column: 2; grid-row: 1; }
.remote-left { grid-column: 1; grid-row: 2; }
.remote-enter {
grid-column: 2;
grid-row: 2;
color: #fff;
background: linear-gradient(145deg, #111827, #334155);
border-color: rgba(255,255,255,.32);
}
.remote-enter:hover { background: #0f172a; }
.remote-right { grid-column: 3; grid-row: 2; }
.remote-down { grid-column: 2; grid-row: 3; }
.utility-pad-card {
width: 300px;
height: min(500px, calc(100vh - 112px));
z-index: 24;
display: grid;
grid-template-rows: 34px minmax(0, 1fr);
overflow: hidden;
}
.utility-pad-body {
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
.utility-pad-body::-webkit-scrollbar {
display: none;
}
.utility-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 10px 12px 12px;
}
.utility-key {
min-width: 0;
height: 70px;
padding: 6px 3px;
border-radius: 15px;
display: grid;
place-items: center;
align-content: center;
gap: 4px;
color: rgba(15,23,42,.88);
background: linear-gradient(150deg, rgba(255,255,255,.76), rgba(255,255,255,.24));
border: 1px solid rgba(255,255,255,.78);
box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 9px 20px rgba(15,23,42,.12);
transition: transform .16s cubic-bezier(.2,.8,.2,1), background .16s ease, box-shadow .16s ease;
touch-action: manipulation;
}
.utility-key span { font-size: 23px; line-height: 1; }
.utility-key b {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
font-weight: 800;
}
.utility-key:hover {
transform: translateY(-2px) scale(1.04);
background: rgba(255,255,255,.88);
box-shadow: inset 0 1px 0 #fff, 0 14px 28px rgba(15,23,42,.18);
}
.utility-key:active { transform: scale(.96); }
.utility-key:disabled { opacity: .52; cursor: not-allowed; }
.utility-key.sending {
cursor: wait;
box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 0 0 3px rgba(37,99,235,.20), 0 14px 30px rgba(37,99,235,.22);
}
.utility-key.overlay-active,
.utility-key.touch-guard-active {
color: #fff;
background: #dc2626;
border-color: #fca5a5;
box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 26px rgba(185,28,28,.34);
}
.utility-key.overlay-active:hover,
.utility-key.touch-guard-active:hover { background: #b91c1c; }
.utility-key.screen-keep-awake-active {
color: #fff;
background: #d97706;
border-color: #fcd34d;
box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 26px rgba(180,83,9,.34);
}
.utility-key.screen-keep-awake-active:hover { background: #b45309; }
.utility-key.test-tab-back-active {
color: #fff;
background: #0f766e;
border-color: #5eead4;
box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 26px rgba(15,118,110,.34);
}
.utility-key.test-tab-back-active:hover { background: #115e59; }
.utility-key.details-page-back-active {
color: #fff;
background: #2563eb;
border-color: #93c5fd;
box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 26px rgba(37,99,235,.34);
}
.utility-key.details-page-back-active:hover { background: #1d4ed8; }
.guard-disabled {
opacity: .46;
cursor: not-allowed !important;
filter: grayscale(.22) saturate(.78);
}
.utility-key-accent { color: #0f766e; }
.quick-launch-section {
margin: 0 12px 12px;
padding-top: 9px;
border-top: 1px solid rgba(15,23,42,.10);
}
.quick-launch-head {
min-width: 0;
height: 29px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.quick-launch-head > div {
min-width: 0;
display: flex;
align-items: baseline;
gap: 7px;
}
.quick-launch-head b {
color: rgba(15,23,42,.86);
font-size: 11px;
}
.quick-launch-head span {
color: rgba(71,85,105,.62);
font-size: 9px;
}
.quick-launch-head button {
width: 25px;
height: 25px;
display: grid;
place-items: center;
padding: 0;
color: #0f766e;
background: rgba(255,255,255,.56);
border: 1px solid rgba(15,118,110,.18);
border-radius: 6px;
font-size: 15px;
}
.quick-launch-head button:hover { background: rgba(240,253,250,.92); border-color: rgba(15,118,110,.36); }
.quick-launch-head button:disabled { opacity: .46; cursor: wait; }
.quick-launch-grid {
min-width: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.quick-launch-empty {
grid-column: 1 / -1;
min-height: 48px;
display: grid;
place-items: center;
color: rgba(71,85,105,.58);
font-size: 10px;
}
.quick-launch-item {
min-width: 0;
height: 54px;
position: relative;
}
.quick-launch-open {
width: 100%;
height: 100%;
min-width: 0;
display: grid;
grid-template-rows: 22px 1fr;
place-items: center;
gap: 2px;
padding: 5px 15px 5px 5px;
color: #0f172a;
background: rgba(255,255,255,.58);
border: 1px solid rgba(15,23,42,.10);
border-radius: 8px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
.quick-launch-open:hover { background: rgba(255,255,255,.88); border-color: rgba(15,118,110,.30); }
.quick-launch-open:disabled {
color: #94a3b8;
background: rgba(241,245,249,.58);
cursor: not-allowed;
filter: grayscale(.5);
}
.quick-launch-glyph {
width: 22px;
height: 22px;
display: grid;
place-items: center;
color: #fff;
background: #0f766e;
border-radius: 5px;
font-size: 10px;
font-weight: 900;
}
.quick-launch-glyph img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 5px;
}
.quick-launch-glyph.has-image {
color: transparent;
background: #ffffff;
border: 1px solid #e2e8f0;
}
.quick-launch-open:disabled .quick-launch-glyph { background: #94a3b8; }
.quick-launch-label {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 9px;
font-weight: 800;
}
.quick-launch-remove {
width: 18px;
height: 18px;
position: absolute;
top: 3px;
right: 3px;
display: grid;
place-items: center;
padding: 0;
color: #64748b;
background: rgba(255,255,255,.78);
border: 0;
border-radius: 4px;
font-size: 9px;
line-height: 1;
}
.quick-launch-remove:hover { color: #b91c1c; background: #fef2f2; }
.quick-launch-action-menu {
position: fixed;
z-index: 180;
width: 224px;
padding: 8px;
display: grid;
gap: 6px;
color: #0f172a;
background: rgba(255,255,255,.98);
border: 1px solid rgba(15,23,42,.14);
border-radius: 14px;
box-shadow: 0 18px 50px rgba(15,23,42,.32);
}
.quick-launch-action-menu.hidden { display: none; }
.quick-launch-menu-head {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 9px;
padding: 3px 5px 8px;
border-bottom: 1px solid rgba(15,23,42,.08);
}
.quick-launch-menu-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
color: #fff;
background: #0f766e;
border-radius: 8px;
font-size: 12px;
font-weight: 900;
overflow: hidden;
}
.quick-launch-menu-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.quick-launch-menu-icon.has-image { background: #fff; border: 1px solid #e2e8f0; }
.quick-launch-menu-copy { min-width: 0; }
.quick-launch-menu-copy b,
.quick-launch-menu-copy code {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.quick-launch-menu-copy b { color: #0f172a; font-size: 12px; }
.quick-launch-menu-copy code { margin-top: 3px; color: #64748b; font-size: 9px; }
.quick-launch-action-btn {
min-height: 32px;
padding: 0 10px;
display: flex;
align-items: center;
gap: 8px;
color: #0f172a;
background: rgba(241,245,249,.78);
border: 1px solid rgba(148,163,184,.26);
border-radius: 8px;
font-size: 12px;
font-weight: 750;
cursor: pointer;
}
.quick-launch-action-btn:hover:not(:disabled) { background: #f8fafc; border-color: rgba(15,118,110,.38); }
.quick-launch-action-btn:disabled { opacity: .45; cursor: not-allowed; }
.quick-launch-action-btn.danger { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.quick-launch-action-btn.notify { color: #0f766e; background: #effaf7; border-color: #b8ded8; }
.quick-launch-notify-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
padding: 16px;
background: rgba(15,23,42,.42);
backdrop-filter: blur(3px);
}
.quick-launch-notify-backdrop.hidden { display: none; }
.quick-launch-notify-modal {
width: min(430px, calc(100vw - 28px));
max-height: calc(100vh - 32px);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
color: #0f172a;
background: linear-gradient(160deg, #ffffff, #f1f5f9);
border: 1px solid rgba(255,255,255,.88);
border-radius: 18px;
box-shadow: inset 0 1px 0 #fff, 0 28px 80px rgba(15,23,42,.38);
}
.quick-launch-notify-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px 12px 18px;
border-bottom: 1px solid rgba(15,23,42,.10);
background: rgba(255,255,255,.52);
}
.quick-launch-notify-head h2 { margin: 0; font-size: 17px; line-height: 1.2; }
.quick-launch-notify-head p { margin: 4px 0 0; color: #64748b; font-size: 11px; }
.quick-launch-notify-close {
flex: 0 0 auto;
width: 34px;
height: 34px;
padding: 0;
display: grid;
place-items: center;
color: #475569;
background: rgba(226,232,240,.78);
border: 1px solid rgba(148,163,184,.34);
border-radius: 50%;
font-size: 15px;
cursor: pointer;
}
.quick-launch-notify-close:hover { color: #0f172a; background: #e2e8f0; }
.quick-launch-notify-body { min-height: 0; display: grid; gap: 8px; padding: 14px 18px 16px; }
.quick-launch-notify-body label { color: #334155; font-size: 12px; font-weight: 800; }
.quick-launch-notify-body textarea {
width: 100%;
min-height: 132px;
padding: 10px 11px;
resize: vertical;
color: #0f172a;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 10px;
font: inherit;
font-size: 13px;
line-height: 1.45;
}
.quick-launch-notify-body textarea:focus { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,.12); outline: none; }
.quick-launch-notify-body input {
width: 100%;
padding: 9px 11px;
color: #0f172a;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 10px;
font: inherit;
font-size: 13px;
}
.quick-launch-notify-body input:focus { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,.12); outline: none; }
.quick-launch-notify-body input[type="checkbox"] { width: auto; padding: 0; border: 0; box-shadow: none; }
.quick-launch-notify-status { min-height: 16px; color: #64748b; font-size: 11px; }
.quick-launch-notify-status.error { color: #b91c1c; }
.quick-launch-notify-status.success { color: #0f766e; }
.quick-launch-notify-foot {
display: flex;
justify-content: flex-end;
gap: 9px;
padding: 12px 16px 14px;
border-top: 1px solid rgba(15,23,42,.08);
background: rgba(241,245,249,.70);
}
.quick-launch-notify-foot button {
min-width: 82px;
min-height: 34px;
padding: 0 14px;
border-radius: 9px;
border: 1px solid rgba(148,163,184,.38);
background: #ffffff;
color: #334155;
font-weight: 800;
cursor: pointer;
}
.quick-launch-notify-foot button.primary { color: #fff; background: #0f766e; border-color: #0f766e; }
.quick-launch-notify-foot button:disabled { opacity: .5; cursor: wait; }
.apple-dock {
position: absolute;
z-index: 42;
left: 50%;
bottom: 16px;
transform: translateX(-50%);
height: 72px;
max-width: min(88vw, 1120px);
padding: 9px 14px;
display: flex;
align-items: end;
gap: 10px;
border-radius: 28px;
background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.20));
border: 1px solid rgba(255,255,255,.68);
box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 26px 70px rgba(15,23,42,.24);
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
}
.apple-dock.dock-auto-hide {
transform: translate(-50%, calc(100% + 30px));
transition: transform .28s cubic-bezier(.22,.9,.36,1);
pointer-events: none;
}
.apple-dock.dock-auto-hide.dock-revealed {
transform: translateX(-50%);
pointer-events: auto;
}
.dock-scroll {
display: flex;
align-items: end;
gap: 10px;
min-width: 0;
}
.apple-dock.dock-overflowing .dock-scroll {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
touch-action: pan-x;
padding-bottom: 2px;
}
.apple-dock.dock-overflowing .dock-scroll::-webkit-scrollbar { display: none; }
.apple-dock.dock-overflowing .dock-item { transform: none !important; transition: filter .13s ease, box-shadow .13s ease; }
.apple-dock.dock-overflowing .dock-item:active { filter: brightness(.9) saturate(1.05); }
.apple-dock.dock-overflowing .dock-item:after { display: none; }
.dock-item {
--dock-scale: 1;
--dock-lift: 0px;
width: 50px;
height: 50px;
flex: 0 0 50px;
border-radius: 16px;
display: grid;
place-items: center;
color: rgba(15,23,42,.88);
background:
linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.18)),
linear-gradient(135deg, rgba(14,165,233,.35), rgba(37,99,235,.42));
border: 1px solid rgba(255,255,255,.70);
box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 12px 24px rgba(15,23,42,.18);
transform: translateY(var(--dock-lift)) scale(var(--dock-scale));
transform-origin: 50% 100%;
transition: transform .13s cubic-bezier(.2,.9,.2,1), filter .13s ease, box-shadow .13s ease;
position: relative;
}
.dock-item span { font-size: 25px; line-height: 1; pointer-events: none; }
.dock-item:hover { filter: brightness(1.06) saturate(1.08); }
.dock-item:active { transform: translateY(2px) scale(.94); }
.dock-item.active { box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 0 0 3px rgba(37,99,235,.22), 0 18px 34px rgba(37,99,235,.26); }
.smooth-mode-dock.active { color: #075985; background: #dff4ff; border-color: #7dd3fc; }
.control-refresh-dock.active,
.control-refresh-dock.control-refresh-active { color: #fff; background: #2563eb; border-color: #1d4ed8; box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 0 0 3px rgba(37,99,235,.26), 0 16px 32px rgba(37,99,235,.32); }
.auto-click-dock.active,
.auto-click-dock.auto-click-running { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(13,148,136,.72)), #0d9488; border-color: #0f766e; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 0 3px rgba(13,148,136,.24), 0 18px 34px rgba(13,148,136,.26); }
.danger-dock.active { background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(244,63,94,.72)), #fb7185; }
.coordinate-dock.active { background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(239,68,68,.74)), #ef4444; }
.long-press-dock.active { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(217,119,6,.78)), #d97706; }
.warn-dock { background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(251,191,36,.42)), #f59e0b; }
.dock-item.sending {
cursor: wait;
filter: grayscale(.22) brightness(.94);
box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 0 0 3px rgba(245,158,11,.20), 0 18px 34px rgba(245,158,11,.24);
}
.dock-item:after {
content: attr(data-dock-label);
position: absolute;
left: 50%;
bottom: 60px;
transform: translateX(-50%) translateY(5px);
opacity: 0;
pointer-events: none;
white-space: nowrap;
padding: 5px 9px;
border-radius: 999px;
color: rgba(15,23,42,.88);
background: rgba(255,255,255,.72);
border: 1px solid rgba(255,255,255,.82);
box-shadow: 0 10px 26px rgba(15,23,42,.14);
font-size: 12px;
transition: opacity .14s ease, transform .14s ease;
}
.dock-item:hover:after { opacity: 1; transform: translateX(-50%) translateY(0); }
.dock-separator { width: 1px; height: 42px; margin: 0 4px; background: rgba(15,23,42,.16); }
.context-menu {
position: absolute;
z-index: 80;
width: 236px;
margin: 0;
padding: 8px;
list-style: none;
border-radius: 18px;
color: rgba(15,23,42,.90);
background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.36));
border: 1px solid rgba(255,255,255,.76);
box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 24px 70px rgba(15,23,42,.22);
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
}
.context-menu li {
height: 30px;
display: flex;
align-items: center;
padding: 0 10px;
border-radius: 10px;
font-size: 13px;
cursor: default;
}
.context-menu li:not(.sep):hover { background: rgba(59,130,246,.16); }
.context-menu .sep { height: 1px; margin: 6px 4px; padding: 0; background: rgba(15,23,42,.13); }
.control-toast {
position: absolute;
z-index: 90;
left: 50%;
top: 54px;
transform: translateX(-50%);
padding: 9px 14px;
border-radius: 999px;
color: rgba(15,23,42,.88);
background: rgba(255,255,255,.70);
border: 1px solid rgba(255,255,255,.80);
box-shadow: 0 18px 46px rgba(15,23,42,.16);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
font-weight: 800;
}
.control-page .node-rect { fill: rgba(255,230,0,.025); stroke: #ffe600; }
.control-page .node-rect.clickable { fill: rgba(255,230,0,.055); stroke: #fff200; }
.control-page .node-rect.focused,
.control-page .node-rect.selected { stroke: #ffff33; }
.control-page .node-label { fill: #fff200; stroke: #000; }
@media (max-width: 1180px) {
#deviceInfoCard,
#deviceClueCard { width: 320px; }
.info-glass-card .info-grid { grid-template-columns: 82px minmax(0, 1fr); }
.remote-pad-card { left: auto !important; right: 88px !important; }
.utility-pad-card { right: 88px !important; }
.node-glass-card { right: 88px !important; width: min(390px, calc(100vw - 104px)); }
.quick-rail { right: 18px; }
.phone-float { width: min(42vw, 380px); }
}
@media (max-width: 820px) {
.mac-menu-item { display: none; }
#deviceInfoCard:not(.drag-positioned) {
left: 8px !important;
top: 54px !important;
}
#deviceInfoCard {
width: min(320px, calc(100vw - 92px));
}
#deviceClueCard:not(.drag-positioned) {
left: 8px !important;
bottom: 88px !important;
}
#deviceClueCard {
width: min(320px, calc(100vw - 92px));
}
.quick-rail { display: none; }
.phone-float { width: min(82vw, 380px); }
.apple-dock { max-width: 96vw; padding-inline: 8px; }
.dock-scroll { gap: 6px; }
.dock-item { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
.remote-pad-card { left: auto !important; right: 78px !important; top: 54% !important; transform: scale(.84); transform-origin: right center; }
.utility-pad-card { right: 78px !important; top: 8% !important; transform: scale(.78); transform-origin: top right; }
.node-glass-card.inspect-open {
left: auto !important;
right: 78px !important;
top: 74px !important;
width: calc(100vw - 94px);
height: min(58vh, 430px);
}
}
@media (prefers-reduced-motion: reduce) {
.floating-panel.stage-staging,
.floating-panel.stage-restoring,
.stage-edge-target,
.stage-thumbnail { animation: none; transition: none; }
}
/* Tight phone frame: match skeleton screen aspect and avoid Dock overlap */
.control-page .phone-float {
width: auto;
min-width: 0;
max-width: none;
}
.control-page .phone-stage {
width: max-content;
grid-template-columns: 46px max-content;
grid-template-rows: minmax(0, auto) 42px;
gap: 7px;
}
.control-page .screen-toolrail {
grid-column: 1;
grid-row: 1;
align-self: center;
justify-self: center;
}
.control-page .phone-shell {
--screen-aspect: 720 / 1600;
grid-column: 2;
grid-row: 1;
height: var(--phone-zoom-height, min(calc(100vh - 286px), 636px));
width: auto;
min-height: 0;
max-height: none;
aspect-ratio: var(--screen-aspect);
padding: 7px;
border-radius: 30px;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.55),
inset 0 0 0 5px rgba(3,7,18,.96),
0 28px 70px rgba(15,23,42,.30),
0 0 0 8px rgba(125,211,252,.12),
0 0 0 18px rgba(14,165,233,.08);
}
.control-page .phone-shell:hover {
transform: translateY(-1px) scale(1.004);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.58),
inset 0 0 0 5px rgba(3,7,18,.96),
0 34px 78px rgba(15,23,42,.36),
0 0 0 9px rgba(125,211,252,.16),
0 0 0 20px rgba(14,165,233,.10);
}
.control-page .phone-screen {
aspect-ratio: var(--screen-aspect);
width: 100%;
height: 100%;
border-radius: 22px;
background: #000;
border: 0;
box-shadow: none;
}
.control-page .phone-dynamic-island,
.control-page .phone-shell:before,
.control-page .phone-shell:after {
display: none;
}
.control-page .phone-home-indicator {
bottom: 12px;
width: 86px;
height: 4px;
opacity: .72;
}
.control-page .text-dock {
grid-column: 2;
grid-row: 2;
max-width: none;
height: 42px;
grid-template-columns: minmax(0, 1fr) 38px 92px;
padding: 5px;
background: rgba(248,252,255,.62);
border-color: rgba(255,255,255,.84);
box-shadow: 0 16px 42px rgba(15,84,140,.16), inset 0 1px 0 rgba(255,255,255,.88), 0 0 0 1px rgba(125,184,224,.28);
}
.control-page .text-dock input,
.control-page .text-dock .primary {
height: 30px;
}
.control-page .text-dock input {
color: #0f172a;
background: rgba(255,255,255,.88);
border-color: rgba(125,164,195,.46);
box-shadow: inset 0 1px 3px rgba(15,23,42,.06);
}
.control-page .text-dock input::placeholder { color: rgba(71,85,105,.68); }
.control-page .text-dock input:focus {
border-color: #0a84ff;
box-shadow: 0 0 0 3px rgba(10,132,255,.18), inset 0 1px 3px rgba(15,23,42,.04);
}
.control-page .text-dock .primary {
color: #ffffff;
background: #0a84ff;
border-color: rgba(255,255,255,.72);
box-shadow: 0 9px 20px rgba(10,132,255,.28), inset 0 1px 0 rgba(255,255,255,.34);
}
.control-page .text-dock .primary:hover:not(:disabled) { background: #0071e3; }
.control-page .text-dock .primary:active:not(:disabled) { background: #0062c9; }
.screen-toolrail {
z-index: 12;
width: 44px;
max-height: max(280px, min(calc(100vh - 286px), 636px));
box-sizing: border-box;
display: grid;
grid-template-columns: 36px;
justify-items: center;
align-content: start;
gap: 5px;
padding: 7px 3px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
border: 1px solid rgba(148,190,218,.54);
border-radius: 8px;
background: rgba(248,252,255,.78);
box-shadow: 0 12px 28px rgba(15,84,140,.15), inset 0 1px 0 rgba(255,255,255,.90);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
}
.screen-panel-switches {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
justify-items: center;
width: 36px;
padding-bottom: 2px;
border-bottom: 1px solid rgba(148,190,218,.40);
margin-bottom: 2px;
}
.screen-panel-switch .live-screen-switch-track {
width: 32px;
height: 18px;
}
.screen-panel-switch .live-screen-switch-track:after {
width: 12px;
height: 12px;
top: 2px;
left: 2px;
}
.screen-panel-switch .live-screen-switch input:checked + .live-screen-switch-track:after {
transform: translateX(14px);
}
.screen-toolrail::-webkit-scrollbar { display: none; width: 0; height: 0; }
.screen-tool-btn {
width: 28px;
height: 28px;
appearance: none;
-webkit-appearance: none;
padding: 0;
display: grid;
place-items: center;
border: 1px solid rgba(148,163,184,.30);
border-radius: 6px;
color: #334155;
background: rgba(255,255,255,.88);
box-shadow: 0 3px 8px rgba(15,84,140,.08), inset 0 1px 0 rgba(255,255,255,.86);
font-size: 18px;
font-weight: 900;
line-height: 1;
}
.screen-tool-btn:hover:not(:disabled) { color: #006edc; background: #e6f4ff; border-color: #7cc4ff; }
.screen-tool-btn:disabled { opacity: .38; cursor: not-allowed; }
.screen-tool-btn.screen-quick-action-btn {
width: 36px;
height: 23px;
font-size: 9px;
letter-spacing: 0;
white-space: nowrap;
}
.screen-tool-btn.screen-quick-action-btn.sending {
color: #ffffff;
background: #0a84ff;
border-color: #0071e3;
opacity: 1;
cursor: wait;
box-shadow: 0 4px 10px rgba(10,132,255,.25);
}
.screen-tool-btn.screen-screenshot-btn.active {
color: #ffffff;
background: #0f766e;
border-color: #0d665f;
box-shadow: 0 4px 10px rgba(15,118,110,.24);
}
.screen-tool-btn.screen-screenshot-opacity-btn {
width: 36px;
height: 23px;
font-size: 9px;
letter-spacing: 0;
white-space: nowrap;
}
.screen-tool-btn.screen-screenshot-opacity-btn[aria-expanded="true"] {
color: #075985;
background: #e0f2fe;
border-color: #7dd3fc;
}
.screen-tool-btn.screen-overlay-opacity-btn {
width: 36px;
height: 23px;
font-size: 9px;
letter-spacing: 0;
white-space: nowrap;
}
.screen-tool-btn.screen-overlay-opacity-btn[aria-expanded="true"] {
color: #7c2d12;
background: #ffedd5;
border-color: #fb923c;
}
.screen-tool-btn.screen-brightness-btn {
width: 36px;
height: 29px;
grid-template-columns: 12px minmax(0, 1fr);
gap: 1px;
padding: 0 3px;
color: #713f12;
background: rgba(255,251,235,.96);
border-color: rgba(217,119,6,.34);
}
.screen-tool-btn.screen-brightness-btn > span {
font-size: 12px;
line-height: 1;
}
.screen-tool-btn.screen-brightness-btn > small {
min-width: 0;
overflow: hidden;
font-size: 8px;
font-weight: 850;
line-height: 1;
text-overflow: clip;
white-space: nowrap;
}
.screen-tool-btn.screen-brightness-btn[aria-expanded="true"] {
color: #78350f;
background: #fef3c7;
border-color: #f59e0b;
}
.screen-tool-btn.screen-brightness-btn.sending {
border-color: #d97706;
box-shadow: 0 0 0 2px rgba(245,158,11,.16), 0 3px 8px rgba(120,53,15,.12);
}
.screen-screenshot-opacity-popover {
position: fixed;
z-index: 96;
width: 178px;
height: 38px;
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 1fr) 36px;
align-items: center;
gap: 8px;
padding: 6px 8px;
transform: translateY(-50%);
color: #334155;
background: rgba(248,252,255,.96);
border: 1px solid rgba(100,151,185,.52);
border-radius: 7px;
box-shadow: 0 12px 30px rgba(15,84,140,.22), inset 0 1px 0 rgba(255,255,255,.92);
-webkit-backdrop-filter: blur(14px) saturate(135%);
backdrop-filter: blur(14px) saturate(135%);
}
.screen-overlay-opacity-popover {
position: fixed;
z-index: 96;
width: 178px;
height: 38px;
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 1fr) 36px;
align-items: center;
gap: 8px;
padding: 6px 8px;
transform: translateY(-50%);
color: #334155;
background: rgba(255,250,245,.97);
border: 1px solid rgba(194,120,55,.52);
border-radius: 7px;
box-shadow: 0 12px 30px rgba(120,62,15,.22), inset 0 1px 0 rgba(255,255,255,.92);
-webkit-backdrop-filter: blur(14px) saturate(135%);
backdrop-filter: blur(14px) saturate(135%);
}
.screen-overlay-opacity-popover input[type="range"] {
width: 100%;
min-width: 0;
margin: 0;
accent-color: #ea580c;
cursor: pointer;
}
.screen-overlay-opacity-popover output {
width: 36px;
color: #431407;
font-size: 10px;
font-weight: 800;
line-height: 1;
text-align: right;
}
.screen-screenshot-opacity-popover input[type="range"] {
width: 100%;
min-width: 0;
margin: 0;
accent-color: #0f766e;
cursor: pointer;
}
.screen-screenshot-opacity-popover output {
width: 36px;
color: #0f172a;
font-size: 10px;
font-weight: 800;
line-height: 1;
text-align: right;
}
.screen-brightness-popover {
position: fixed;
z-index: 97;
width: min(244px, calc(100vw - 16px));
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 9px;
padding: 10px;
transform: translateY(-50%);
color: #334155;
background: rgba(255,255,255,.98);
border: 1px solid rgba(180,130,38,.48);
border-radius: 7px;
box-shadow: 0 14px 34px rgba(51,65,85,.20), inset 0 1px 0 rgba(255,255,255,.94);
-webkit-backdrop-filter: blur(14px) saturate(130%);
backdrop-filter: blur(14px) saturate(130%);
}
.screen-brightness-heading {
min-width: 0;
display: grid;
grid-template-columns: 16px minmax(0, 1fr) 38px;
align-items: center;
gap: 5px;
}
.screen-verify-popover {
position: fixed;
z-index: 97;
width: min(252px, calc(100vw - 16px));
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
padding: 10px;
transform: translateY(-50%);
color: #334155;
background: rgba(255,255,255,.98);
border: 1px solid rgba(10,132,255,.38);
border-radius: 8px;
box-shadow: 0 14px 34px rgba(30,64,175,.20), inset 0 1px 0 rgba(255,255,255,.94);
-webkit-backdrop-filter: blur(14px) saturate(130%);
backdrop-filter: blur(14px) saturate(130%);
}
.screen-verify-heading {
display: flex;
align-items: center;
gap: 7px;
}
.screen-verify-logo {
width: 30px;
height: 30px;
flex: 0 0 auto;
display: grid;
place-items: center;
color: #ffffff;
background: #0a84ff;
border: 1px solid rgba(10,132,255,.32);
border-radius: 7px;
box-shadow: 0 5px 12px rgba(10,132,255,.18);
font-size: 10px;
font-weight: 900;
}
.screen-verify-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 6px;
}
.screen-verify-heading > strong {
color: #1e293b;
font-size: 11px;
line-height: 14px;
}
.screen-verify-field {
display: grid;
gap: 3px;
color: #64748b;
font-size: 10px;
font-weight: 700;
}
.screen-verify-field input {
width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 6px 8px;
border: 1px solid #cbd5e1;
border-radius: 6px;
color: #0f172a;
background: #f8fafc;
font-size: 11px;
font-weight: 500;
}
.screen-verify-field select {
width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 6px 8px;
border: 1px solid #cbd5e1;
border-radius: 6px;
color: #0f172a;
background: #f8fafc;
font-size: 11px;
font-weight: 500;
}
.screen-verify-field input:focus,
.screen-verify-field select:focus {
outline: none;
border-color: #0a84ff;
box-shadow: 0 0 0 3px rgba(10,132,255,.16);
}
.screen-verify-launch-field {
display: none;
}
.screen-verify-launch-field.visible {
display: grid;
}
.screen-verify-launch-picker {
min-width: 0;
display: flex;
align-items: center;
gap: 7px;
}
.screen-verify-launch-picker select {
min-width: 0;
flex: 1;
}
.screen-verify-app-icon {
width: 30px;
height: 30px;
flex: 0 0 auto;
display: grid;
place-items: center;
color: #ffffff;
background: #0f766e;
border: 1px solid rgba(255,255,255,.56);
border-radius: 7px;
box-shadow: 0 5px 12px rgba(15,118,110,.18);
font-size: 11px;
font-weight: 900;
}
.screen-verify-app-icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 6px;
}
.screen-verify-app-icon.has-image {
color: transparent;
background: #ffffff;
border-color: #e2e8f0;
box-shadow: none;
}
.screen-verify-check {
display: flex;
align-items: center;
gap: 6px;
color: #334155;
font-size: 10px;
font-weight: 650;
cursor: pointer;
}
.screen-verify-check input {
width: 14px;
height: 14px;
accent-color: #0a84ff;
}
.screen-verify-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.screen-verify-actions button {
min-height: 28px;
padding: 5px 8px;
border: 1px solid #cbd5e1;
border-radius: 6px;
color: #334155;
background: #f8fafc;
font-size: 10px;
font-weight: 750;
}
.screen-verify-actions button.primary {
color: #ffffff;
background: #0a84ff;
border-color: #0a84ff;
}
.screen-verify-actions button:hover:not(:disabled) {
filter: brightness(.97);
}
.screen-verify-fallback-row {
display: flex;
align-items: center;
justify-content: space-between;
color: #64748b;
font-size: 10px;
font-weight: 700;
}
.screen-verify-fallback-row button {
padding: 3px 7px;
border: 1px solid #cbd5e1;
border-radius: 6px;
color: #334155;
background: #f8fafc;
font-size: 10px;
font-weight: 700;
cursor: pointer;
}
.screen-verify-fallback-editor {
display: grid;
gap: 6px;
}
.screen-verify-fallback-list {
display: flex;
flex-wrap: wrap;
gap: 5px;
max-height: 88px;
overflow: auto;
}
.screen-verify-fallback-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 6px;
border: 1px solid #e2e8f0;
border-radius: 999px;
color: #334155;
background: #f1f5f9;
font-size: 10px;
font-weight: 650;
}
.screen-verify-fallback-remove {
border: 0;
padding: 0;
color: #64748b;
background: transparent;
font-size: 12px;
line-height: 1;
cursor: pointer;
}
.screen-verify-fallback-add {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
}
.screen-verify-fallback-add input {
width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 6px 8px;
border: 1px solid #cbd5e1;
border-radius: 6px;
color: #0f172a;
background: #f8fafc;
font-size: 11px;
font-weight: 500;
}
.screen-verify-fallback-add button {
padding: 5px 8px;
border: 1px solid #cbd5e1;
border-radius: 6px;
color: #334155;
background: #f8fafc;
font-size: 10px;
font-weight: 750;
cursor: pointer;
}
.screen-verify-fallback-empty {
color: #94a3b8;
font-size: 10px;
}
.screen-brightness-heading > span { color: #d97706; font-size: 14px; line-height: 1; }
.screen-brightness-heading > strong {
min-width: 0;
overflow: hidden;
color: #1e293b;
font-size: 11px;
line-height: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
.screen-brightness-heading > output {
color: #713f12;
font-size: 10px;
font-weight: 850;
line-height: 14px;
text-align: right;
}
.screen-brightness-popover > input[type="range"] {
width: 100%;
min-width: 0;
margin: 0;
accent-color: #d97706;
cursor: pointer;
}
.screen-brightness-actions {
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
gap: 7px;
}
.screen-brightness-actions button,
.screen-brightness-permission button {
min-width: 0;
min-height: 27px;
padding: 4px 8px;
border: 1px solid #cbd5e1;
border-radius: 6px;
color: #334155;
background: #f8fafc;
font-size: 9px;
font-weight: 750;
letter-spacing: 0;
line-height: 1.25;
}
.screen-brightness-actions button:hover:not(:disabled),
.screen-brightness-permission button:hover:not(:disabled) {
color: #92400e;
background: #fffbeb;
border-color: #f59e0b;
}
.screen-brightness-actions button[aria-pressed="true"] {
color: #ffffff;
background: #0f766e;
border-color: #0d665f;
}
.screen-brightness-permission {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 7px;
padding-top: 8px;
border-top: 1px solid #e2e8f0;
}
.screen-brightness-permission > span {
min-width: 0;
color: #9a3412;
font-size: 9px;
font-weight: 700;
line-height: 1.35;
}
.screen-brightness-permission button {
max-width: 98px;
color: #9a3412;
border-color: #fdba74;
background: #fff7ed;
white-space: normal;
}
.screen-brightness-status {
min-height: 12px;
overflow-wrap: anywhere;
color: #64748b;
font-size: 9px;
line-height: 12px;
}
.screen-brightness-status.success { color: #047857; }
.screen-brightness-status.error { color: #b91c1c; }
@media (max-width: 420px) {
.screen-brightness-popover { width: min(218px, calc(100vw - 16px)); }
.screen-brightness-permission { grid-template-columns: minmax(0, 1fr); }
.screen-brightness-permission button { max-width: none; }
}
.screen-tool-btn.screen-tool-text { font-size: 11px; }
.screen-tool-btn.screen-tool-translate { color: #0a84ff; background: rgba(230,244,255,.96); border-color: rgba(10,132,255,.38); }
.screen-tool-btn.screen-tool-translate.active { color: #ffffff; background: #0a84ff; border-color: #0071e3; box-shadow: 0 6px 14px rgba(10,132,255,.28); }
.screen-tool-btn.screen-tool-translate.busy { color: transparent; position: relative; }
.screen-tool-btn.screen-tool-translate.busy:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border: 2px solid rgba(255,255,255,.40);
border-top-color: #ffffff;
border-radius: 50%;
animation: screenToolSpin .7s linear infinite;
}
.screen-tool-value {
width: 28px;
min-height: 14px;
overflow: hidden;
color: #64748b;
font-size: 9px;
font-weight: 850;
line-height: 14px;
text-align: center;
}
.screen-tool-divider { width: 22px; height: 1px; background: rgba(148,163,184,.34); }
@keyframes screenToolSpin { to { transform: rotate(360deg); } }
.control-canvas.phone-zoom-overflow {
overflow: auto;
scrollbar-width: none;
}
.control-canvas.phone-zoom-overflow::-webkit-scrollbar { display: none; }
.control-canvas.phone-zoom-overflow #phoneFloat:not([data-drag-normalized]) {
left: var(--phone-overflow-center-x, 50%) !important;
top: var(--phone-overflow-center-y, 50%) !important;
}
.control-canvas.phone-zoom-overflow .apple-dock {
top: var(--phone-overflow-dock-top, calc(100% + 12px));
bottom: auto;
}
@media (max-width: 820px) {
.control-canvas {
overflow: auto;
scrollbar-width: none;
}
.control-canvas::-webkit-scrollbar { display: none; }
.control-page .phone-float:not([data-drag-normalized]) {
transform: translate(-50%, -50%);
}
.control-canvas.phone-narrow-layout .utility-pad-card,
.control-canvas.phone-narrow-layout .remote-pad-card,
.control-canvas.phone-narrow-layout .node-glass-card.inspect-open {
left: var(--narrow-tools-left, 780px) !important;
right: auto !important;
transform-origin: left center;
}
.control-canvas.phone-narrow-layout .utility-pad-card { transform-origin: left top; }
}
@media (max-height: 820px) {
.screen-toolrail { max-height: max(280px, min(calc(100vh - 245px), 560px)); }
.control-page .phone-shell { height: var(--phone-zoom-height, min(calc(100vh - 245px), 560px)); }
.apple-dock { height: 62px; padding: 7px 12px; }
.dock-item { width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; }
}
@media (max-width: 520px) {
.apple-dock {
width: calc(100vw - 14px);
height: 58px;
padding: 6px 7px;
}
.dock-scroll { gap: 5px; }
.dock-item {
width: 38px;
height: 40px;
flex-basis: 38px;
border-radius: 10px;
}
.dock-item span { font-size: 18px; }
.dock-separator { height: 30px; margin: 0 1px; }
}
/* Draggable device tools */
.device-tool-window {
width: 360px;
z-index: 30;
overflow: hidden;
letter-spacing: 0;
}
.clue-history-tool {
width: min(410px, calc(100vw - 24px));
height: min(440px, calc(100vh - 160px));
}
.clue-history-title-actions { display: flex; align-items: center; gap: 2px; }
.clue-history-body {
height: calc(100% - 42px);
min-height: 0;
display: grid;
grid-template-rows: 30px minmax(0, 1fr) 26px;
padding: 0 12px 10px;
user-select: text;
}
.clue-history-summary {
display: flex;
align-items: center;
color: rgba(71,85,105,.76);
font-size: 11px;
}
.clue-history-list {
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
.clue-history-list::-webkit-scrollbar { display: none; }
.clue-history-row {
display: grid;
gap: 7px;
padding: 10px 9px;
border-bottom: 1px solid rgba(15,23,42,.08);
}
.clue-history-row:last-child { border-bottom: 0; }
.clue-history-value {
min-width: 0;
display: grid;
grid-template-columns: 24px minmax(0, 1fr) auto;
align-items: start;
gap: 8px;
}
.clue-history-value > span {
color: rgba(71,85,105,.66);
font-size: 10px;
}
.clue-history-value b {
min-width: 0;
color: #0f766e;
font-family: Consolas, monospace;
font-size: 15px;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.clue-history-value time {
min-width: 0;
color: rgba(71,85,105,.70);
text-align: right;
font-size: 10px;
overflow-wrap: anywhere;
}
.clue-history-meta {
min-width: 0;
display: flex;
justify-content: space-between;
gap: 10px;
color: rgba(71,85,105,.78);
font-size: 10px;
}
.clue-history-meta span:first-child { min-width: 0; overflow-wrap: anywhere; }
.clue-history-meta span:last-child { flex: none; }
.open-url-tool { width: 390px; }
.clipboard-tool { width: 390px; }
.memo-tool { width: 370px; }
.tool-window-close {
width: 24px;
height: 24px;
display: grid;
place-items: center;
padding: 0;
color: rgba(71,85,105,.72);
background: transparent;
border: 0;
border-radius: 6px;
font-size: 12px;
line-height: 1;
}
.tool-window-close:hover { color: #0f172a; background: rgba(255,255,255,.54); }
.device-tool-window-body {
display: grid;
gap: 9px;
padding: 12px;
user-select: text;
}
.device-tool-inline {
display: grid;
grid-template-columns: minmax(0, 1fr) 68px;
gap: 7px;
}
.device-tool-select,
.device-tool-window input,
.device-tool-window textarea {
width: 100%;
color: #0f172a;
background: rgba(255,255,255,.68);
border: 1px solid rgba(15,23,42,.13);
border-radius: 8px;
outline: none;
font: inherit;
font-size: 12px;
letter-spacing: 0;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.device-tool-select,
.device-tool-window input { height: 34px; padding: 0 9px; }
.device-tool-window textarea {
min-height: 118px;
padding: 9px 10px;
resize: vertical;
line-height: 1.5;
}
.auto-click-tool { width: min(360px, calc(100vw - 24px)); }
.auto-click-body { gap: 10px; }
.auto-click-field {
display: grid;
gap: 5px;
min-width: 0;
}
.auto-click-field > span {
color: rgba(71,85,105,.76);
font-size: 12px;
font-weight: 800;
}
.auto-click-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.auto-click-post-action {
display: flex;
align-items: center;
gap: 8px;
min-height: 28px;
color: #334155;
font-size: 11px;
font-weight: 800;
cursor: pointer;
}
.auto-click-post-action input {
width: 15px;
height: 15px;
margin: 0;
accent-color: #0f766e;
cursor: pointer;
}
.auto-click-post-action input:disabled {
cursor: not-allowed;
}
.auto-click-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.auto-click-actions button { min-width: 74px; }
.memo-tool textarea { min-height: 148px; }
.device-tool-select:focus,
.device-tool-window input:focus,
.device-tool-window textarea:focus {
background: rgba(255,255,255,.84);
border-color: #14b8a6;
box-shadow: 0 0 0 3px rgba(20,184,166,.14);
}
.device-tool-action-row {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.device-tool-action-row > div { display: flex; align-items: center; gap: 6px; }
.device-tool-count { color: rgba(71,85,105,.72); font-family: Consolas, monospace; font-size: 9px; }
.device-tool-primary,
.device-tool-secondary,
.device-tool-danger {
min-width: 58px;
height: 30px;
padding: 0 10px;
border-radius: 8px;
font-size: 11px;
font-weight: 800;
}
.device-tool-primary { color: #fff; background: #0f766e; border: 1px solid #0f766e; }
.device-tool-primary:hover { background: #115e59; border-color: #115e59; }
.device-tool-secondary { color: #334155; background: #fff; border: 1px solid #cbd5e1; }
.device-tool-secondary:hover { background: #f1f5f9; border-color: #94a3b8; }
.device-tool-danger { color: #b91c1c; background: #fff; border: 1px solid #fecaca; }
.device-tool-danger:hover { background: #fef2f2; border-color: #fca5a5; }
.device-tool-primary:disabled,
.device-tool-secondary:disabled,
.device-tool-danger:disabled,
.tool-window-close:disabled { opacity: .56; cursor: wait; }
.tool-window-status {
min-height: 18px;
overflow-wrap: anywhere;
color: rgba(71,85,105,.76);
font-size: 9px;
line-height: 1.45;
}
.tool-window-status.success { color: #0f766e; }
.tool-window-status.error { color: #b91c1c; }
.sms-tool {
width: min(760px, calc(100vw - 28px));
height: min(560px, calc(100vh - 112px));
z-index: 40;
display: grid;
grid-template-rows: 34px minmax(0, 1fr);
background: rgba(248,250,252,.98);
-webkit-backdrop-filter: blur(22px) saturate(132%);
backdrop-filter: blur(22px) saturate(132%);
}
.sms-tool-body {
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: 48px 43px minmax(0, 1fr) 30px;
overflow: hidden;
user-select: text;
}
.sms-toolbar {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: rgba(255,255,255,.62);
border-bottom: 1px solid rgba(15,23,42,.08);
}
.sms-search-field {
min-width: 0;
height: 33px;
display: grid;
grid-template-columns: 23px minmax(0, 1fr);
align-items: center;
padding: 0 7px;
color: #64748b;
background: rgba(255,255,255,.76);
border: 1px solid rgba(15,23,42,.13);
border-radius: 6px;
}
.sms-search-field > span { font-size: 12px; text-align: center; }
.sms-search-field input {
min-width: 0;
height: 31px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.sms-search-field:focus-within {
border-color: #0f766e;
box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}
.sms-search-field input:focus { border: 0; box-shadow: none; }
.sms-icon-button {
width: 34px;
height: 33px;
display: grid;
place-items: center;
padding: 0;
color: #0f766e;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 17px;
font-weight: 800;
}
.sms-icon-button:hover:not(:disabled) { background: #ecfdf5; border-color: #5eead4; }
.sms-capability-bar {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 6px 10px;
color: #475569;
background: #eef2f7;
border-bottom: 1px solid #dbe2ea;
font-size: 9px;
}
.sms-capability-bar > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sms-capability-bar > div { display: flex; align-items: center; gap: 6px; }
.sms-capability-bar button {
height: 27px;
padding: 0 8px;
color: #0f766e;
background: #fff;
border: 1px solid #99f6e4;
border-radius: 6px;
font-size: 9px;
font-weight: 800;
white-space: nowrap;
}
.sms-capability-bar button:hover:not(:disabled) { color: #fff; background: #0f766e; border-color: #0f766e; }
.sms-capability-bar button:disabled,
.sms-icon-button:disabled { opacity: .48; cursor: not-allowed; }
.sms-workspace {
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
overflow: hidden;
background: #fff;
}
.sms-list-pane,
.sms-detail-pane { min-width: 0; min-height: 0; }
.sms-list-pane {
display: grid;
grid-template-rows: 32px minmax(0, 1fr) auto;
border-right: 1px solid #e2e8f0;
}
.sms-list-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0 10px;
color: #334155;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
font-size: 9px;
}
.sms-list-head b { color: #0f172a; font-size: 10px; }
.sms-list { min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.sms-list::-webkit-scrollbar,
.sms-detail-body::-webkit-scrollbar { display: none; }
.sms-row {
width: 100%;
min-height: 78px;
display: grid;
align-content: center;
gap: 5px;
padding: 8px 10px;
color: #334155;
text-align: left;
background: #fff;
border: 0;
border-bottom: 1px solid #edf1f5;
border-radius: 0;
}
.sms-row:hover { background: #f8fafc; }
.sms-row.selected { background: #ecfdf5; box-shadow: inset 3px 0 #0f766e; }
.sms-row-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sms-row-head b,
.sms-row-head time {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sms-row-head b { color: #0f172a; font-size: 11px; }
.sms-row-head time { flex: none; max-width: 108px; color: #94a3b8; font-size: 8px; }
.sms-row-body {
display: -webkit-box;
overflow: hidden;
color: #475569;
font-size: 10px;
line-height: 1.45;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.sms-row-meta { color: #0f766e; font-size: 8px; font-weight: 700; }
.sms-empty,
.sms-detail-empty {
min-height: 150px;
display: grid;
place-items: center;
padding: 18px;
color: #94a3b8;
text-align: center;
font-size: 10px;
}
.sms-load-more {
height: 30px;
color: #0f766e;
background: #f8fafc;
border: 0;
border-top: 1px solid #e2e8f0;
border-radius: 0;
font-size: 9px;
font-weight: 800;
}
.sms-load-more:hover:not(:disabled) { background: #ecfdf5; }
.sms-detail-pane { display: grid; background: #fff; }
.sms-detail {
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) 42px;
padding: 16px 18px 10px;
}
.sms-detail-head { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sms-detail-head b,
.sms-detail-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sms-detail-head b { color: #0f172a; font-size: 14px; }
.sms-detail-head span { max-width: 160px; color: #64748b; font-size: 9px; }
.sms-detail-meta { margin-top: 5px; color: #0f766e; font-size: 9px; }
.sms-detail-body {
min-height: 0;
margin: 14px 0 8px;
overflow: auto;
color: #1e293b;
white-space: pre-wrap;
overflow-wrap: anywhere;
font-family: inherit;
font-size: 12px;
line-height: 1.65;
scrollbar-width: none;
}
.sms-detail-body.translated {
padding: 10px 11px;
color: #115e59;
background: #f0fdfa;
border: 1px solid #99f6e4;
border-radius: 6px;
}
.sms-detail-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.sms-translate-button.active { color: #fff; background: #0f766e; border-color: #0f766e; }
.sms-translate-button.busy { color: #0f766e; background: #ecfdf5; border-color: #5eead4; cursor: wait; }
.sms-detail-actions .confirming { min-width: 112px; color: #fff; background: #dc2626; border-color: #dc2626; }
.sms-tool-body > .tool-window-status {
display: flex;
align-items: center;
padding: 0 10px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}
.app-catalog-tool {
width: min(500px, calc(100vw - 28px));
height: min(560px, calc(100vh - 112px));
z-index: 38;
display: grid;
grid-template-rows: 34px minmax(0, 1fr);
background: rgba(248,250,252,.97);
-webkit-backdrop-filter: blur(22px) saturate(135%);
backdrop-filter: blur(22px) saturate(135%);
}
.app-catalog-body {
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: 48px 30px minmax(0, 1fr) 30px;
overflow: hidden;
user-select: text;
}
.app-catalog-toolbar {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 64px;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-top: 1px solid rgba(255,255,255,.46);
border-bottom: 1px solid rgba(15,23,42,.08);
background: rgba(255,255,255,.24);
}
.app-catalog-search {
min-width: 0;
height: 33px;
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: center;
padding: 0 7px;
color: #64748b;
background: rgba(255,255,255,.68);
border: 1px solid rgba(15,23,42,.13);
border-radius: 6px;
}
.app-catalog-search input {
min-width: 0;
height: 31px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.app-catalog-search:focus-within {
border-color: #0f766e;
box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}
.app-catalog-search input:focus { border: 0; box-shadow: none; }
.app-catalog-summary {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 11px;
color: #64748b;
background: rgba(248,250,252,.62);
border-bottom: 1px solid rgba(15,23,42,.07);
font-size: 9px;
}
.app-catalog-summary span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-catalog-list {
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 4px 8px 8px;
background: rgba(255,255,255,.72);
scrollbar-width: thin;
scrollbar-color: #94a3b8 transparent;
}
.app-catalog-list::-webkit-scrollbar { width: 8px; }
.app-catalog-list::-webkit-scrollbar-thumb { background: #94a3b8; border: 2px solid transparent; border-radius: 6px; background-clip: padding-box; }
.app-catalog-empty {
min-height: 180px;
display: grid;
place-items: center;
color: #94a3b8;
font-size: 11px;
}
.app-catalog-row {
min-width: 0;
min-height: 58px;
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
padding: 6px 4px;
border-bottom: 1px solid rgba(15,23,42,.07);
}
.app-catalog-row:hover { background: rgba(248,250,252,.72); }
.app-catalog-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
color: #fff;
background: #0f766e;
border: 1px solid rgba(255,255,255,.56);
border-radius: 7px;
box-shadow: 0 5px 12px rgba(15,118,110,.18);
font-size: 12px;
font-weight: 900;
}
.app-catalog-copy { min-width: 0; }
.app-catalog-copy b,
.app-catalog-copy code {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-catalog-copy b { color: #0f172a; font-size: 12px; }
.app-catalog-copy code { margin-top: 4px; color: #64748b; font-size: 9px; }
.app-catalog-copy small { margin-left: 5px; color: #64748b; font-size: 8px; font-weight: 600; }
.app-catalog-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
.app-catalog-actions button {
height: 28px;
padding: 0 9px;
border-radius: 6px;
font-size: 10px;
font-weight: 800;
}
.app-open-btn { color: #fff; background: #0f766e; border: 1px solid #0f766e; }
.app-open-btn:hover { background: #115e59; }
.app-details-btn { color: #0f766e; background: #ecfeff; border: 1px solid #99f6e4; }
.app-details-btn:hover { color: #115e59; background: #ccfbf1; border-color: #5eead4; }
.app-add-btn { color: #334155; background: #fff; border: 1px solid #cbd5e1; }
.app-add-btn:hover { border-color: #0f766e; color: #0f766e; }
.app-uninstall-btn { color: #b42318; background: #fff; border: 1px solid #f0b8b2; }
.app-uninstall-btn:hover { color: #fff; background: #b42318; border-color: #b42318; }
.app-catalog-actions button:disabled { opacity: .48; cursor: not-allowed; }
.app-catalog-body > .tool-window-status {
display: flex;
align-items: center;
padding: 0 10px;
border-top: 1px solid rgba(15,23,42,.07);
background: rgba(248,250,252,.64);
}
.system-shortcuts-tool {
width: min(580px, calc(100vw - 28px));
height: min(660px, calc(100vh - 100px));
z-index: 39;
display: grid;
grid-template-rows: 34px minmax(0, 1fr);
background: rgba(248,250,252,.98);
-webkit-backdrop-filter: blur(22px) saturate(132%);
backdrop-filter: blur(22px) saturate(132%);
}
.system-shortcuts-body {
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: 58px 28px minmax(0, 1fr) 32px;
overflow: hidden;
user-select: text;
}
.system-shortcuts-toolbar {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 8px 10px;
background: rgba(255,255,255,.64);
border-bottom: 1px solid rgba(15,23,42,.08);
}
.system-shortcuts-toolbar > div { min-width: 0; }
.system-shortcuts-toolbar b,
.system-shortcuts-toolbar span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.system-shortcuts-toolbar b { color: #0f172a; font-size: 12px; }
.system-shortcuts-toolbar span { margin-top: 4px; color: #64748b; font-size: 9px; }
.system-shortcuts-toolbar button { min-width: 76px; }
.system-shortcuts-auto-text-controls { display: flex; align-items: center; gap: 6px; min-width: 0; }
.system-shortcuts-auto-text-controls input {
width: 168px;
min-width: 90px;
height: 30px;
padding: 0 8px;
color: #273640;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 8px;
outline: 0;
font-size: 10px;
letter-spacing: 0;
}
.system-shortcuts-auto-text-controls input:focus { border-color: #56a99f; box-shadow: 0 0 0 3px rgba(27,143,130,.1); }
.system-shortcuts-auto-text-controls .auto-text-click-button { min-width: 38px; width: 38px; padding: 0; }
.system-shortcuts-auto-text-controls .auto-text-click-button.active,
.system-shortcuts-auto-text-controls .auto-text-click-button.auto-text-click-active { color: #fff; background: #059669; border-color: #047857; }
.system-shortcuts-columns {
display: grid;
grid-template-columns: minmax(0, 1fr) 116px 68px;
align-items: center;
gap: 8px;
padding: 0 12px;
color: #64748b;
background: #eef2f7;
border-bottom: 1px solid #dbe2ea;
font-size: 9px;
font-weight: 800;
}
.system-shortcuts-list {
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 0 8px 8px;
background: #fff;
scrollbar-width: none;
}
.system-shortcuts-list::-webkit-scrollbar { display: none; }
.system-shortcuts-empty {
min-height: 220px;
display: grid;
place-items: center;
padding: 20px;
color: #94a3b8;
text-align: center;
font-size: 11px;
}
.system-shortcuts-group {
height: 29px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -8px;
padding: 0 12px;
color: #334155;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
font-size: 10px;
font-weight: 900;
}
.system-shortcuts-group:first-child { border-top: 0; }
.system-shortcuts-group span { color: #94a3b8; font-size: 8px; font-weight: 700; }
.system-shortcut-row {
min-width: 0;
min-height: 62px;
display: grid;
grid-template-columns: minmax(0, 1fr) 116px 68px;
align-items: center;
gap: 8px;
padding: 7px 4px;
border-bottom: 1px solid #edf1f5;
}
.system-shortcut-copy { min-width: 0; }
.system-shortcut-copy b,
.system-shortcut-copy small {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.system-shortcut-copy b { color: #0f172a; font-size: 11px; }
.system-shortcut-copy small { margin-top: 3px; color: #64748b; font-size: 8px; }
.system-shortcut-state {
min-width: 0;
display: flex;
align-items: center;
}
.system-shortcut-state span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 4px 6px;
color: #475569;
background: #f1f5f9;
border: 1px solid #dbe3ec;
border-radius: 5px;
font-size: 8px;
font-weight: 800;
}
.system-shortcut-state .granted { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.system-shortcut-state .warning { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.system-shortcut-state .unsupported { color: #64748b; background: #f8fafc; border-color: #e2e8f0; }
.system-shortcut-action {
width: 68px;
height: 29px;
padding: 0 6px;
color: #fff;
background: #0f766e;
border: 1px solid #0f766e;
border-radius: 6px;
font-size: 9px;
font-weight: 800;
}
.system-shortcut-action:hover { background: #115e59; }
.system-shortcut-action:disabled { color: #94a3b8; background: #f1f5f9; border-color: #dbe3ec; cursor: not-allowed; }
.system-shortcuts-body > .tool-window-status {
display: flex;
align-items: center;
padding: 0 10px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}
@media (max-width: 620px) {
.device-tool-window {
width: calc(100vw - 20px);
left: 10px !important;
right: auto !important;
}
.device-tool-window-body { padding: 10px; }
.device-tool-primary, .device-tool-secondary, .device-tool-danger { min-width: 54px; padding-inline: 8px; }
.app-catalog-tool { height: min(510px, calc(100vh - 170px)); }
.app-catalog-row { grid-template-columns: 32px minmax(0, 1fr); }
.app-catalog-actions { grid-column: 2; justify-content: flex-start; }
.system-shortcuts-tool { height: min(570px, calc(100vh - 90px)); }
.system-shortcuts-auto-text-controls input { width: min(28vw, 140px); }
.system-shortcuts-columns,
.system-shortcut-row { grid-template-columns: minmax(0, 1fr) 98px 62px; }
.system-shortcut-action { width: 62px; }
.sms-tool { height: min(650px, calc(100vh - 90px)); }
.sms-tool-body { grid-template-rows: 48px auto minmax(0, 1fr) 30px; }
.sms-capability-bar { align-items: flex-start; flex-direction: column; }
.sms-capability-bar > span { width: 100%; }
.sms-workspace { grid-template-columns: 1fr; grid-template-rows: minmax(150px, 44%) minmax(0, 1fr); }
.sms-list-pane { border-right: 0; border-bottom: 1px solid #e2e8f0; }
.sms-detail { padding: 12px 13px 8px; }
}
/* Initial phone position: keep full screen and text input above Dock */
#phoneFloat:not([data-drag-normalized]) {
top: 46% !important;
}
@media (max-height: 820px) {
#phoneFloat:not([data-drag-normalized]) { top: 44% !important; }
}
/* Screen preview library */
.screen-preview-backdrop {
position: fixed;
inset: 0;
z-index: 1200;
display: grid;
place-items: center;
padding: 18px;
background: rgba(15,23,42,.46);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.screen-preview-modal {
width: min(1180px, calc(100vw - 36px));
height: min(820px, calc(100vh - 36px));
min-height: 560px;
display: grid;
grid-template-rows: 62px minmax(0, 1fr);
overflow: hidden;
color: #172033;
background: #f4f7f8;
border: 1px solid rgba(255,255,255,.82);
border-radius: 8px;
box-shadow: 0 34px 100px rgba(15,23,42,.34), inset 0 1px 0 #fff;
letter-spacing: 0;
}
.screen-preview-head {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 10px 12px 10px 18px;
background: rgba(255,255,255,.92);
border-bottom: 1px solid #d9e1e5;
}
.screen-preview-head h2 {
margin: 0;
color: #111827;
font-size: 17px;
line-height: 1.2;
letter-spacing: 0;
}
.screen-preview-head p {
max-width: min(64vw, 680px);
margin: 4px 0 0;
overflow: hidden;
color: #64748b;
font-size: 11px;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.screen-preview-actions {
display: flex;
align-items: center;
gap: 7px;
}
.preview-action-btn,
.preview-use-btn,
.preview-close-btn {
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #334155;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(15,23,42,.06);
font-size: 12px;
}
.preview-action-btn { padding: 0 11px; }
.preview-use-btn {
padding: 0 13px;
color: #fff;
background: #0f766e;
border-color: #0f766e;
font-weight: 760;
}
.preview-use-btn:hover { background: #115e59; border-color: #115e59; }
.preview-use-btn:disabled { opacity: .52; cursor: wait; }
.preview-use-btn span { font-size: 12px; }
.preview-package-use-btn { background: #1d4ed8; border-color: #1d4ed8; }
.preview-package-use-btn:hover { background: #1e40af; border-color: #1e40af; }
.preview-package-use-btn:disabled { cursor: not-allowed; }
.preview-action-btn span { font-size: 17px; line-height: 1; }
.preview-close-btn { width: 32px; padding: 0; font-size: 14px; }
.preview-action-btn:hover,
.preview-close-btn:hover { border-color: #94a3b8; background: #f8fafc; }
.screen-preview-workspace {
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 342px;
}
.screen-preview-stage {
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: 42px minmax(0, 1fr);
overflow: hidden;
background: #e7ecee;
}
.preview-file-bar {
min-width: 0;
display: grid;
grid-template-columns: 9px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
padding: 0 15px;
color: #334155;
background: #f8faf9;
border-bottom: 1px solid #d9e1e5;
font-size: 12px;
}
.preview-file-bar strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-file-bar > span:last-child {
color: #64748b;
font-family: Consolas, monospace;
font-size: 10px;
}
.preview-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #14b8a6;
box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}
.preview-phone-wrap {
min-height: 0;
display: grid;
place-items: center;
padding: 14px 24px 16px;
background:
linear-gradient(rgba(255,255,255,.34) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.34) 1px, transparent 1px),
#dce5e7;
background-size: 24px 24px;
}
.preview-phone-shell {
height: min(100%, 690px);
width: auto;
max-width: 100%;
aspect-ratio: 9 / 19.5;
position: relative;
display: grid;
grid-template-rows: 24px minmax(0, 1fr) 20px;
padding: 8px;
overflow: hidden;
background: #111827;
border: 1px solid #020617;
border-radius: 34px;
box-shadow: inset 0 0 0 2px #475569, 0 24px 58px rgba(15,23,42,.28);
}
.preview-phone-speaker {
width: 54px;
height: 5px;
align-self: center;
justify-self: center;
border-radius: 999px;
background: #64748b;
}
.preview-phone-viewport {
min-width: 0;
min-height: 0;
position: relative;
overflow: hidden;
background: #fff;
border-radius: 22px;
}
#screenPreviewFrame {
width: 100%;
height: 100%;
display: block;
border: 0;
background: #fff;
}
.preview-phone-home {
width: 78px;
height: 4px;
align-self: center;
justify-self: center;
border-radius: 999px;
background: #94a3b8;
}
.preview-empty-state {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
align-content: center;
justify-items: center;
gap: 8px;
padding: 24px;
color: #64748b;
background: #f8fafc;
text-align: center;
}
.preview-empty-state > span {
width: 48px;
height: 48px;
display: grid;
place-items: center;
color: #0f766e;
background: #e6fffb;
border: 1px solid #99f6e4;
border-radius: 8px;
font-size: 24px;
}
.preview-empty-state b { color: #334155; font-size: 13px; }
.preview-empty-state p { max-width: 220px; margin: 0; font-size: 11px; line-height: 1.5; }
.screen-preview-catalog {
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: 62px 38px minmax(0, 1fr) 34px;
overflow: hidden;
background: #fff;
border-left: 1px solid #d5dee2;
}
.preview-catalog-head {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid #e2e8f0;
}
.preview-catalog-head h3 { margin: 0; color: #111827; font-size: 14px; letter-spacing: 0; }
.preview-catalog-head p {
max-width: 250px;
margin: 4px 0 0;
overflow: hidden;
color: #64748b;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-count {
min-width: 32px;
height: 22px;
display: grid;
place-items: center;
padding: 0 8px;
color: #0f766e;
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
}
.preview-mode-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 6px 10px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.preview-mode-tab {
height: 26px;
color: #64748b;
background: #fff;
border: 1px solid #dbe4e8;
border-radius: 5px;
font-size: 11px;
font-weight: 760;
}
.preview-mode-tab:hover { color: #0f172a; border-color: #94a3b8; }
.preview-mode-tab.active {
color: #0f766e;
background: #ecfeff;
border-color: #67e8f9;
}
.preview-files-pane {
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: auto 42px minmax(120px, 1fr) auto;
}
.preview-category-tabs {
min-width: 0;
display: flex;
gap: 2px;
padding: 8px 10px 0;
overflow-x: auto;
border-bottom: 1px solid #e2e8f0;
scrollbar-width: thin;
}
.preview-category-tab {
height: 31px;
flex: 0 0 auto;
padding: 0 11px;
color: #64748b;
background: transparent;
border-bottom: 2px solid transparent;
font-size: 11px;
font-weight: 750;
}
.preview-category-tab:hover { color: #0f172a; background: #f8fafc; }
.preview-category-tab.active {
color: #0f766e;
border-bottom-color: #0f766e;
background: #f0fdfa;
}
.preview-search-field {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: center;
margin: 7px 10px 5px;
padding: 0 9px;
color: #64748b;
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 5px;
}
.preview-search-field input {
width: 100%;
height: 32px;
padding: 0;
color: #0f172a;
background: transparent;
border: 0;
outline: 0;
font-size: 11px;
}
.preview-file-list {
min-height: 0;
padding: 5px 10px 10px;
overflow-y: auto;
}
.preview-file-row {
display: flex;
align-items: center;
gap: 6px;
}
.preview-file-row .preview-file-item { flex: 1 1 auto; min-width: 0; }
.preview-package-arm {
flex: 0 0 auto;
min-width: 46px;
height: 26px;
padding: 0 8px;
color: #475569;
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 13px;
font-size: 10px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.preview-package-arm:hover:not(:disabled) { border-color: #64748b; }
.preview-package-arm.active {
color: #ffffff;
background: #059669;
border-color: #059669;
}
.preview-package-arm:disabled { opacity: .55; cursor: not-allowed; }
.preview-file-item {
width: 100%;
min-height: 54px;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
padding: 7px 9px;
color: #334155;
background: transparent;
border: 1px solid transparent;
border-bottom-color: #edf2f5;
border-radius: 5px;
text-align: left;
}
.preview-file-item:hover { background: #f8fafc; border-color: #dbe4e8; }
.preview-file-item.active {
color: #0f172a;
background: #ecfeff;
border-color: #67e8f9;
box-shadow: inset 3px 0 0 #0f766e;
}
.preview-file-type {
width: 38px;
height: 34px;
display: grid;
place-items: center;
color: #0f766e;
background: #e6fffb;
border: 1px solid #99f6e4;
border-radius: 5px;
font-size: 9px;
font-weight: 900;
}
.preview-file-copy { min-width: 0; }
.preview-file-copy b,
.preview-file-copy small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-file-copy b { font-size: 12px; }
.preview-file-copy small { margin-top: 4px; color: #64748b; font-size: 9px; }
.preview-file-size { color: #94a3b8; font-size: 9px; }
.preview-list-empty {
min-height: 170px;
display: grid;
place-items: center;
padding: 20px;
color: #94a3b8;
text-align: center;
font-size: 11px;
}
.preview-metadata-panel {
min-width: 0;
display: grid;
gap: 8px;
padding: 10px;
background: #f8fafc;
border-top: 1px solid #dbe4e8;
}
.preview-metadata-head {
min-width: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.preview-metadata-head h4,
.preview-metadata-head p { margin: 0; }
.preview-metadata-head h4 { color: #0f172a; font-size: 12px; }
.preview-metadata-head p {
margin-top: 3px;
overflow: hidden;
color: #64748b;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-metadata-source {
flex: 0 0 auto;
color: #0f766e;
font-size: 9px;
font-weight: 800;
}
.preview-metadata-fields {
min-width: 0;
display: grid;
gap: 7px;
}
.preview-metadata-field {
min-width: 0;
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
align-items: center;
gap: 7px;
color: #64748b;
font-size: 10px;
font-weight: 760;
}
.preview-metadata-field input {
width: 100%;
min-width: 0;
height: 30px;
padding: 0 8px;
color: #0f172a;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 5px;
outline: 0;
font-size: 11px;
}
.preview-metadata-field input:focus {
border-color: #0f766e;
box-shadow: 0 0 0 2px rgba(15,118,110,.14);
}
.preview-metadata-actions {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.preview-metadata-message {
min-width: 0;
overflow: hidden;
color: #b45309;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-metadata-actions .preview-save-btn {
flex: 0 0 auto;
height: 30px;
padding: 0 9px;
font-size: 10px;
}
.preview-i18n-pane {
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) 42px;
overflow: hidden;
}
.preview-i18n-toolbar {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
padding: 9px 10px 7px;
border-bottom: 1px solid #e2e8f0;
}
.preview-i18n-toolbar label {
min-width: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 7px;
padding: 0 8px;
color: #64748b;
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 5px;
font-size: 10px;
}
.preview-i18n-toolbar input {
min-width: 0;
height: 30px;
color: #0f172a;
background: transparent;
border: 0;
outline: 0;
font-family: Consolas, "Courier New", monospace;
font-size: 11px;
}
.preview-mini-btn,
.preview-save-btn {
height: 32px;
padding: 0 10px;
color: #334155;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 5px;
font-size: 11px;
font-weight: 760;
}
.preview-mini-btn:hover { border-color: #94a3b8; background: #f8fafc; }
.preview-save-btn {
color: #fff;
background: #0f766e;
border-color: #0f766e;
}
.preview-save-btn:hover { background: #115e59; border-color: #115e59; }
.preview-save-btn:disabled,
.preview-mini-btn:disabled {
opacity: .55;
cursor: not-allowed;
}
.preview-i18n-meta {
min-width: 0;
display: grid;
gap: 4px;
padding: 8px 10px;
color: #64748b;
background: #fff;
border-bottom: 1px solid #e2e8f0;
font-size: 10px;
}
.preview-i18n-meta strong,
.preview-i18n-meta span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-i18n-meta strong {
color: #0f172a;
font-family: Consolas, "Courier New", monospace;
font-size: 10px;
}
.preview-i18n-editor {
width: 100%;
height: 100%;
min-height: 0;
resize: none;
padding: 10px;
color: #0f172a;
background: #fbfdfe;
border: 0;
outline: 0;
border-bottom: 1px solid #e2e8f0;
font-family: Consolas, "Courier New", monospace;
font-size: 11px;
line-height: 1.55;
}
.preview-i18n-editor:disabled { color: #94a3b8; background: #f8fafc; }
.preview-i18n-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 5px 10px;
background: #f8fafc;
}
.preview-catalog-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
color: #94a3b8;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
font-size: 9px;
text-transform: uppercase;
}
@media (max-width: 780px) {
.screen-preview-backdrop { padding: 7px; }
.screen-preview-modal {
width: calc(100vw - 14px);
height: calc(100vh - 14px);
min-height: 0;
grid-template-rows: 58px minmax(0, 1fr);
}
.screen-preview-head { padding-left: 12px; }
.screen-preview-head p { max-width: 52vw; }
.screen-preview-workspace { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 55%) minmax(0, 45%); }
.screen-preview-catalog { border-top: 1px solid #d5dee2; border-left: 0; }
.preview-phone-wrap { padding: 10px 14px; }
.preview-phone-shell { height: min(100%, 430px); border-radius: 25px; }
.preview-phone-viewport { border-radius: 16px; }
}
@media (max-width: 460px) {
.screen-preview-head > div:first-child { display: none; }
.screen-preview-actions { width: 100%; justify-content: flex-end; gap: 5px; }
.preview-action-btn { width: 32px; padding: 0; font-size: 0; }
.preview-use-btn { min-width: 86px; padding: 0 9px; font-size: 11px; }
.preview-action-btn span { font-size: 18px; }
.screen-preview-workspace { grid-template-rows: minmax(280px, 52%) minmax(0, 48%); }
.screen-preview-catalog { grid-template-rows: 54px 36px minmax(0, 1fr) 30px; }
.preview-files-pane { grid-template-rows: auto 42px minmax(100px, 1fr) auto; }
.preview-phone-shell { height: min(100%, 370px); }
}
@media (max-width: 340px) {
.preview-use-btn { min-width: 74px; padding: 0 6px; font-size: 10px; }
}
@media (min-width: 620px) and (max-width: 820px) {
.control-page .phone-float:not([data-drag-normalized]) {
transform: translate(-50%, -50%);
}
}
.clue-row.clue-confirmed {
border-color: rgba(15,118,110,.24);
background: rgba(240,253,250,.62);
}
.clue-row.clue-confirmed dd { color: #0f766e; }
.pattern-modal-backdrop {
position: fixed;
inset: 0;
z-index: 130;
display: block;
padding: 0;
pointer-events: none;
background: transparent;
}
.pattern-modal {
position: absolute;
top: 76px;
right: 18px;
pointer-events: auto;
width: min(438px, calc(100vw - 28px));
max-height: calc(100vh - 28px);
max-height: calc(100dvh - 28px);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
color: rgba(15,23,42,.94);
background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(241,245,249,.90));
border: 1px solid rgba(255,255,255,.88);
border-radius: 19px;
box-shadow: inset 0 1px 0 #fff, 0 28px 80px rgba(15,23,42,.34);
}
.pattern-modal-head {
min-width: 0;
min-height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px 11px 18px;
cursor: grab;
border-bottom: 1px solid rgba(15,23,42,.10);
background: rgba(255,255,255,.50);
}
.pattern-modal-head:active,
.pattern-modal.is-dragging .pattern-modal-head { cursor: grabbing; }
.pattern-modal-head button { cursor: pointer; }
.pattern-modal-head > div { min-width: 0; }
.pattern-modal-head h2 {
margin: 0;
color: #0f172a;
font-size: 17px;
line-height: 1.2;
}
.pattern-modal-head p {
margin: 4px 0 0;
color: #64748b;
font-size: 11px;
line-height: 1.35;
}
.pattern-modal-close {
flex: 0 0 auto;
width: 34px;
height: 34px;
padding: 0;
display: grid;
place-items: center;
color: #475569;
background: rgba(226,232,240,.78);
border: 1px solid rgba(148,163,184,.34);
border-radius: 50%;
font-size: 15px;
}
.pattern-modal-close:hover:not(:disabled) { color: #0f172a; background: #e2e8f0; }
.pattern-modal-body {
min-height: 0;
display: grid;
justify-items: center;
align-content: start;
gap: 9px;
padding: 14px 18px 12px;
overflow: hidden;
}
.install-fcm-modal {
width: min(520px, calc(100vw - 28px));
}
.install-fcm-body {
justify-items: stretch;
gap: 9px;
overflow: auto;
}
.install-fcm-body label {
display: grid;
gap: 4px;
color: #475569;
font-size: 12px;
}
.install-fcm-body input,
.install-fcm-body textarea {
width: 100%;
box-sizing: border-box;
padding: 8px 9px;
color: #0f172a;
background: rgba(255,255,255,.84);
border: 1px solid rgba(148,163,184,.42);
border-radius: 9px;
font: inherit;
}
.install-fcm-body textarea {
resize: vertical;
}
.install-fcm-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: 2px;
}
.install-ai-balance {
margin-top: 10px;
font-size: 13px;
line-height: 1.7;
color: #8892a6;
white-space: pre-wrap;
}
.install-ai-balance.ok { color: #4ee6c4; }
.install-ai-balance.error { color: #f87171; }
.install-fcm-actions span {
color: #64748b;
font-size: 11px;
}
.pattern-board {
position: relative;
width: min(310px, calc(100vw - 70px), calc(100vh - 285px));
width: min(310px, calc(100vw - 70px), calc(100dvh - 285px));
min-width: 220px;
aspect-ratio: 1;
flex: 0 0 auto;
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
touch-action: none;
user-select: none;
}
.pattern-board.is-disabled { cursor: wait; }
.pattern-board-lines,
.pattern-board-grid {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.pattern-board-lines { pointer-events: none; }
.pattern-board-path,
.pattern-board-preview {
fill: none;
stroke: rgba(255,255,255,.72);
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 1px 2px rgba(15,23,42,.72));
}
.pattern-board-preview {
stroke: rgba(255,255,255,.72);
stroke-width: 5;
stroke-dasharray: none;
opacity: 1;
}
.pattern-board-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.pattern-dot {
width: 56px;
height: 56px;
place-self: center;
padding: 0;
border: 3px solid #cbd5e1;
border-radius: 50%;
color: #475569;
background: rgba(255,255,255,.94);
box-shadow: inset 0 1px 0 #fff, 0 7px 16px rgba(15,23,42,.12);
font-size: 16px;
font-weight: 850;
touch-action: none;
transition: transform .12s ease, color .12s ease, background .12s ease, border-color .12s ease;
}
.pattern-dot:hover:not(:disabled) {
transform: scale(1.06);
border-color: #67a8a2;
}
.pattern-dot.selected,
.pattern-dot.selected:hover {
color: #fff;
background: #0f766e;
border-color: #5eead4;
box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px rgba(15,118,110,.26);
}
.pattern-sequence {
width: 100%;
min-height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: #0f766e;
font-size: 15px;
font-weight: 850;
line-height: 1.35;
text-align: center;
overflow-wrap: anywhere;
}
.pattern-status {
width: 100%;
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
padding: 7px 10px;
color: #64748b;
background: rgba(248,250,252,.76);
border: 1px solid rgba(148,163,184,.28);
border-radius: 8px;
font-size: 11px;
line-height: 1.35;
text-align: center;
}
.pattern-status.ok { color: #0f766e; border-color: rgba(15,118,110,.28); }
.pattern-status.error { color: #b91c1c; border-color: rgba(220,38,38,.30); }
.pattern-status.busy { color: #0369a1; border-color: rgba(2,132,199,.30); }
.pattern-manual-state {
width: 100%;
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
color: #475569;
background: rgba(248,250,252,.70);
border: 1px solid rgba(148,163,184,.24);
border-radius: 8px;
font-size: 11px;
font-weight: 750;
line-height: 1.35;
text-align: center;
}
.pattern-manual-state::before {
content: '';
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: #94a3b8;
box-shadow: 0 0 0 3px rgba(148,163,184,.16);
}
.pattern-manual-state[data-state="ready"] { color: #0f766e; }
.pattern-manual-state[data-state="ready"]::before {
background: #0f766e;
box-shadow: 0 0 0 3px rgba(15,118,110,.14);
}
.pattern-manual-state[data-state="offline"] { color: #a16207; }
.pattern-manual-state[data-state="offline"]::before {
background: #d97706;
box-shadow: 0 0 0 3px rgba(217,119,6,.14);
}
.pattern-modal-foot {
min-height: 60px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: center;
gap: 8px;
padding: 10px 14px;
border-top: 1px solid rgba(15,23,42,.10);
background: rgba(248,250,252,.80);
}
.pattern-modal-foot button {
height: 38px;
min-width: 0;
padding: 0 11px;
border: 1px solid rgba(148,163,184,.42);
border-radius: 8px;
font-size: 12px;
font-weight: 800;
}
.pattern-action-secondary { color: #334155; background: #fff; }
.pattern-action-secondary:hover:not(:disabled) { background: #f1f5f9; }
.pattern-action-save {
color: #0f766e;
background: rgba(240,253,250,.96);
border-color: rgba(15,118,110,.34) !important;
}
.pattern-action-save:hover:not(:disabled) { color: #fff; background: #0f766e; }
.pattern-action-danger {
color: #b91c1c;
background: rgba(254,242,242,.92);
border-color: rgba(220,38,38,.30) !important;
}
.pattern-action-danger:hover:not(:disabled) { color: #fff; background: #dc2626; }
.pattern-action-replay {
color: #fff;
background: #0f766e;
border-color: #0f766e !important;
}
.pattern-action-replay:hover:not(:disabled) { background: #0d655e; }
.pattern-action-primary {
color: #fff;
background: #0071e3;
border-color: #0071e3 !important;
box-shadow: 0 8px 20px rgba(0,113,227,.22);
}
.pattern-action-primary:hover:not(:disabled) { background: #0062c9; }
.pattern-modal-foot button.sending { cursor: wait; }
@media (max-width: 460px) {
.pattern-modal-backdrop { padding: 0; }
.pattern-modal {
width: calc(100vw - 14px);
max-height: calc(100vh - 14px);
max-height: calc(100dvh - 14px);
right: 7px;
}
.pattern-modal-head { padding-left: 14px; }
.pattern-modal-head p { max-width: 76vw; }
.pattern-modal-body { padding: 10px 12px; }
.pattern-board {
width: min(286px, calc(100vw - 52px), calc(100vh - 315px));
width: min(286px, calc(100vw - 52px), calc(100dvh - 315px));
}
.pattern-dot { width: 48px; height: 48px; }
.pattern-modal-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pattern-modal-foot .pattern-action-primary { grid-column: auto; }
}
@media (max-height: 560px) {
.pattern-modal-body {
grid-template-rows: max-content max-content max-content;
align-content: start;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.pattern-board { width: 220px; min-height: 220px; }
.pattern-modal-head { min-height: 58px; padding-top: 8px; padding-bottom: 8px; }
}
/* Install flow workbench */
body.install-workbench-mode { overflow: hidden; background: #eef2f3; }
.install-workbench-page {
min-height: 100vh;
min-height: 100dvh;
color: #182024;
background: #eef2f3;
}
.install-workbench-header {
height: 68px;
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.2fr) auto;
align-items: center;
gap: 18px;
padding: 0 18px;
background: #fff;
border-bottom: 1px solid #d8e0e2;
}
.install-header-title, .install-header-device, .install-header-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.install-header-title h1 { margin: 0; font-size: 18px; line-height: 1.2; letter-spacing: 0; }
.install-header-title p { margin: 3px 0 0; color: #647176; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-header-device { justify-content: center; }
.install-header-device label { color: #647176; font-size: 12px; font-weight: 750; }
.install-header-device select {
width: min(310px, 42vw); height: 36px; padding: 0 30px 0 10px;
color: #182024; background: #f7f9f9; border: 1px solid #cad5d8; border-radius: 6px;
}
.install-header-actions { justify-content: flex-end; flex-wrap: wrap; }
.install-mode-segmented { flex: 0 0 auto; }
.install-icon-button {
width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0;
color: #344248; background: #fff; border: 1px solid #cbd5d8; border-radius: 6px; font-size: 18px;
}
.install-icon-button:hover { background: #f1f5f5; }
.install-primary-button, .install-secondary-button, .install-danger-button, .install-text-button {
min-height: 34px; padding: 7px 12px; border-radius: 6px; font-size: 12px; font-weight: 750; letter-spacing: 0;
}
.install-primary-button { color: #fff; background: #146c5c; border: 1px solid #146c5c; }
.install-primary-button:hover:not(:disabled) { background: #0f594c; }
.install-secondary-button { color: #26353a; background: #fff; border: 1px solid #c4d0d3; }
.install-secondary-button:hover:not(:disabled) { background: #f3f6f6; }
.install-danger-button { color: #a52a2a; background: #fff; border: 1px solid #d8adad; }
.install-text-button { padding-left: 0; color: #146c5c; background: transparent; border: 0; text-align: left; }
.install-match-badge { padding: 5px 8px; color: #8a5a0a; background: #fff7df; border: 1px solid #ead59c; border-radius: 5px; font-size: 11px; white-space: nowrap; }
.install-match-badge.precise { color: #0f6557; background: #eaf7f2; border-color: #a8d8ca; }
.install-workbench-grid {
height: calc(100vh - 68px); height: calc(100dvh - 68px);
display: grid; grid-template-columns: 276px minmax(560px, 1fr) 342px; overflow: hidden;
}
body.install-workbench-mode.install-page-mode-debug .install-workbench-grid { grid-template-columns: minmax(560px, 1fr) 342px; }
body.install-workbench-mode.install-page-mode-debug .install-library-panel,
body.install-workbench-mode.install-page-mode-debug .install-version-actions,
body.install-workbench-mode.install-page-mode-debug .install-segmented[aria-label="工作区视图"],
body.install-workbench-mode.install-page-mode-debug #installScopeSection,
body.install-workbench-mode.install-page-mode-debug #installStepInspector { display: none; }
body.install-workbench-mode.install-page-mode-debug #installRunStatusSection { display: block; }
body.install-workbench-mode.install-page-mode-editor #installRunStatusSection { display: none; }
.install-library-panel, .install-inspector-panel { min-width: 0; overflow-y: auto; background: #fff; scrollbar-width: thin; }
.install-library-panel { border-right: 1px solid #d8e0e2; }
.install-inspector-panel { border-left: 1px solid #d8e0e2; }
.install-panel-heading { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-bottom: 1px solid #e4eaec; }
.install-panel-heading > div { min-width: 0; display: grid; gap: 3px; }
.install-panel-heading b { font-size: 13px; }
.install-panel-heading span { color: #78858a; font-size: 10px; line-height: 1.3; }
.install-flow-shortcuts { padding: 9px 10px 7px; }
.install-flow-shortcuts button { width: 100%; min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; color: #0f6557; background: #edf7f4; border: 1px solid #b9dacf; border-radius: 6px; font-size: 11px; font-weight: 800; text-align: left; }
.install-flow-shortcuts button span { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; background: #146c5c; border-radius: 50%; }
.install-precision-index { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 10px 8px; padding: 9px; background: #f7f9f9; border: 1px solid #dce4e6; border-radius: 6px; }
.install-precision-index > div { grid-column: 1 / -1; display: grid; gap: 2px; }
.install-precision-index > div b { font-size: 11px; }
.install-precision-index > div span { color: #718085; font-size: 9px; }
.install-precision-index label { min-width: 0; display: grid; gap: 4px; color: #68767b; font-size: 9px; font-weight: 750; }
.install-precision-index label:last-child { grid-column: 1 / -1; }
.install-precision-index select { width: 100%; min-width: 0; height: 29px; padding: 0 25px 0 7px; color: #26353a; background: #fff; border: 1px solid #cbd6d9; border-radius: 4px; font-size: 10px; }
.install-precision-index select:disabled { color: #849095; background: #eef2f2; }
.install-flow-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 0 10px 8px; }
.install-flow-filters button { min-width: 0; height: 28px; padding: 0 3px; color: #68767b; background: #f4f7f7; border: 0; border-radius: 4px; font-size: 9px; }
.install-flow-filters button.active { color: #fff; background: #465a61; }
.install-flow-list { max-height: 270px; overflow-y: auto; border-bottom: 1px solid #dfe6e8; }
.install-flow-group-title { position: sticky; top: 0; z-index: 1; padding: 6px 13px; color: #657378; background: #f2f5f5; border-top: 1px solid #dfe6e8; border-bottom: 1px solid #dfe6e8; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.install-flow-row { width: 100%; display: grid; gap: 5px; padding: 10px 13px; color: #26353a; background: #fff; border: 0; border-bottom: 1px solid #edf1f2; text-align: left; }
.install-flow-row:hover { background: #f5f8f8; }
.install-flow-row.active { background: #eaf4f1; box-shadow: inset 3px 0 #146c5c; }
.install-flow-row b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-flow-row span { color: #718085; font-size: 10px; }
.install-flow-row i { width: max-content; padding: 2px 5px; color: #75540d; background: #fff4cf; border-radius: 3px; font-size: 9px; font-style: normal; }
.install-flow-row i.published { color: #0f6557; background: #dff3ec; }
.install-flow-row i.disabled { color: #657278; background: #e8edef; }
.install-action-heading { margin-top: 0; }
.install-search-field { height: 36px; display: flex; align-items: center; gap: 7px; margin: 9px 10px; padding: 0 9px; background: #f4f7f7; border: 1px solid #d7e0e2; border-radius: 6px; }
.install-search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 12px; }
.install-action-catalog { padding: 0 10px 14px; }
.install-action-item { width: 100%; display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 8px 4px; color: #26353a; background: transparent; border: 0; border-bottom: 1px solid #e7edee; text-align: left; }
.install-action-item:hover { color: #0f6557; background: #f3f8f6; }
.install-action-item > span { width: 26px; height: 26px; display: grid; place-items: center; color: #146c5c; background: #e2f0ec; border-radius: 5px; font-weight: 850; }
.install-action-item div { display: grid; gap: 3px; }
.install-action-item b { color: inherit; font-size: 12px; }
.install-action-item small { color: #748287; font-size: 10px; line-height: 1.35; }
.install-editor-panel { min-width: 0; display: grid; grid-template-rows: 52px 1fr; overflow: hidden; background: #e7ecee; }
.install-editor-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 34px; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #d8e0e2; }
.install-editor-toolbar > div:first-child { min-width: 0; display: grid; gap: 2px; }
.install-editor-toolbar b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-editor-toolbar span { color: #718085; font-size: 10px; }
.install-segmented { display: flex; padding: 2px; background: #edf2f2; border: 1px solid #d7dfe1; border-radius: 6px; }
.install-segmented button { height: 28px; padding: 0 10px; color: #5c696e; background: transparent; border: 0; border-radius: 4px; font-size: 11px; }
.install-segmented button.active { color: #fff; background: #34474d; }
.install-version-actions { display: flex !important; grid-auto-flow: column; gap: 6px !important; }
.install-version-actions button { min-height: 28px; padding: 4px 8px; }
.install-workspace-pane { min-height: 0; display: grid; grid-template-columns: minmax(300px, .82fr) minmax(300px, 1.18fr); overflow: hidden; }
.install-phone-stage { min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) 34px; place-items: center; padding: 18px 10px; border-right: 1px solid #ccd6d9; }
.install-phone-control-row { min-width: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.install-phone-shell { position: relative; height: min(74vh, calc(100dvh - 155px)); aspect-ratio: var(--install-screen-aspect, 9 / 19.5); max-width: 100%; overflow: hidden; background: #11181b; border: 7px solid #273339; border-radius: 26px; box-shadow: 0 16px 36px rgba(27,42,48,.18); }
#installScreenSvg { width: 100%; height: 100%; display: block; background: #f7f9f9; }
.install-phone-empty { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 24px; color: #819095; background: #f7f9f9; font-size: 12px; text-align: center; }
.install-phone-empty.hidden { display: none; }
.install-node-rect { fill: rgba(20,108,92,.035); stroke: rgba(83,104,111,.32); stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: pointer; }
.install-node-rect.clickable { fill: rgba(20,108,92,.09); stroke: rgba(20,108,92,.58); }
.install-node-rect.screen-edge-bottom:not(.selected):not(.clickable) { stroke: rgba(203,213,225,.92); }
.install-node-rect.selected { fill: rgba(216,119,6,.16); stroke: #d97706; stroke-width: 3; }
.install-node-label { fill: #25343a; stroke: rgba(255,255,255,.92); stroke-width: var(--install-label-stroke, 4px); paint-order: stroke; font-size: var(--install-label-font-size, 21px); pointer-events: none; letter-spacing: 0; }
.install-device-shortcuts { flex: 0 0 54px; max-height: min(74vh, calc(100dvh - 155px)); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scrollbar-width: thin; }
.install-shortcut-group { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid #c8d2d5; }
.install-shortcut-group:last-child { padding-bottom: 0; border-bottom: 0; }
.install-shortcut-group button { width: 50px; height: 45px; display: grid; grid-template-rows: 23px 12px; place-items: center; padding: 4px 2px; color: #34474d; background: #fff; border: 1px solid #cbd6d9; border-radius: 6px; box-shadow: 0 1px 2px rgba(31,46,51,.08); }
.install-shortcut-group button:hover:not(:disabled) { color: #0f6557; border-color: #57a291; background: #edf7f4; }
.install-shortcut-group button:focus-visible { outline: 2px solid #146c5c; outline-offset: 1px; }
.install-shortcut-group button:disabled { color: #8d999d; background: #edf1f2; cursor: wait; }
.install-shortcut-group button.active { color: #fff; background: #146c5c; border-color: #146c5c; }
.install-shortcut-group button.busy { color: #0f6557; background: #dcefe9; border-color: #57a291; }
.install-shortcut-group button b { font-size: 18px; line-height: 1; }
.install-shortcut-group button span { font-size: 9px; font-weight: 750; line-height: 1; white-space: nowrap; }
.install-key-shortcuts { grid-template-columns: 1fr; }
.install-display-shortcuts output { display: block; color: #607178; font-size: 9px; text-align: center; }
.install-skeleton-meta { align-self: end; color: #647176; font-size: 11px; }
.install-timeline-pane { min-width: 0; overflow-y: auto; background: #f8fafa; }
.install-timeline-head { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: #fff; border-bottom: 1px solid #dce4e6; }
.install-timeline-head div { display: grid; gap: 2px; }
.install-timeline-head b { font-size: 13px; }
.install-timeline-head span { color: #718085; font-size: 10px; }
.install-step-list { padding: 10px 12px 60px; }
.install-step-list > .install-phone-empty, .install-flow-list > .install-phone-empty {
position: static;
min-height: 96px;
display: grid;
place-items: center;
z-index: auto;
color: #819095;
background: transparent;
}
.install-step-row { position: relative; display: grid; grid-template-columns: 24px 30px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 58px; padding: 7px 8px; background: #fff; border-bottom: 1px solid #dde5e7; transition: transform .12s ease, box-shadow .12s ease; }
.install-step-row:first-child { border-top: 1px solid #dde5e7; }
.install-step-row.selected { background: #edf7f4; box-shadow: inset 3px 0 #146c5c; }
.install-step-row.dragging { z-index: 2; opacity: .55; box-shadow: 0 8px 18px rgba(31,46,51,.18); }
.install-step-row.drag-before::before, .install-step-row.drag-after::after { content: ''; position: absolute; left: 5px; right: 5px; height: 3px; background: #d97706; border-radius: 2px; }
.install-step-row.drag-before::before { top: -2px; }
.install-step-row.drag-after::after { bottom: -2px; }
.install-step-drag { width: 22px; height: 32px; display: grid; place-items: center; padding: 0; color: #829095; background: transparent; border: 0; border-radius: 4px; cursor: grab; touch-action: none; font-size: 16px; line-height: 1; }
.install-step-drag:hover { color: #146c5c; background: #e7eeee; }
.install-step-drag:active { cursor: grabbing; }
.install-step-index { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: #607178; border-radius: 50%; font-size: 10px; font-weight: 800; }
.install-step-index.ok { background: #0f7a64; }
.install-step-index.failed { background: #c2410c; }
.install-step-index.running { background: #d97706; }
.install-step-index.skipped { background: #7a8a90; }
.install-step-copy { min-width: 0; display: grid; gap: 4px; cursor: pointer; }
.install-step-copy b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-step-copy span { color: #718085; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-step-actions { display: flex; gap: 2px; }
.install-step-actions button { width: 27px; height: 27px; padding: 0; color: #607178; background: transparent; border: 0; border-radius: 4px; }
.install-step-actions button:hover { background: #e7eeee; }
.install-animation-pane { grid-template-columns: minmax(300px, .9fr) minmax(390px, 1.1fr); background: #f4f7f7; }
.install-semantic-library-pane { grid-template-columns: minmax(220px, .55fr) minmax(360px, 1.45fr); background: #fff; }
.install-semantic-library-list-pane { min-width: 0; overflow-y: auto; background: #f8fafa; border-right: 1px solid #ccd6d9; }
.install-semantic-library-list { padding: 0 10px 24px; }
.install-semantic-library-item { width: 100%; display: grid; gap: 4px; padding: 10px 8px; color: #344248; background: transparent; border: 0; border-bottom: 1px solid #dde5e7; text-align: left; }
.install-semantic-library-item:hover { background: #edf4f2; }
.install-semantic-library-item.active { color: #0f6557; background: #e5f2ee; box-shadow: inset 3px 0 #146c5c; }
.install-semantic-library-item b { font-size: 12px; }
.install-semantic-library-item span { color: #718085; font-size: 10px; }
.install-semantic-library-editor { min-width: 0; overflow-y: auto; background: #fff; }
.install-semantic-editor-heading { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #dce4e6; }
.install-semantic-editor-heading > div:first-child { min-width: 0; display: grid; gap: 3px; }
.install-semantic-editor-heading b { font-size: 14px; }
.install-semantic-editor-heading span { color: #718085; font-size: 10px; }
.install-semantic-library-fields { width: min(720px, 100%); display: grid; gap: 11px; padding: 16px; }
.install-semantic-library-fields > label { display: grid; gap: 5px; color: #5d6b70; font-size: 10px; font-weight: 750; }
.install-semantic-library-fields > label input,
.install-semantic-library-fields > label textarea { width: 100%; min-width: 0; padding: 9px; color: #1e2a2f; background: #fff; border: 1px solid #cbd6d9; border-radius: 5px; font-size: 12px; }
.install-semantic-library-fields > label textarea { min-height: 88px; resize: vertical; font: 12px/1.45 system-ui, sans-serif; }
.install-semantic-library-save { display: flex; justify-content: flex-end; padding-top: 4px; }
.install-semantic-library-empty { padding: 28px 8px; color: #819095; font-size: 11px; text-align: center; }
.install-brand-matrix-pane { grid-template-columns: minmax(220px, .55fr) minmax(360px, 1.45fr); background: #fff; }
.install-brand-matrix-list-pane { min-width: 0; overflow-y: auto; background: #f8fafa; border-right: 1px solid #ccd6d9; }
.install-brand-matrix-list { padding: 0 10px 24px; }
.install-brand-matrix-item { width: 100%; display: grid; gap: 4px; padding: 10px 8px; color: #344248; background: transparent; border: 0; border-bottom: 1px solid #dde5e7; text-align: left; }
.install-brand-matrix-item:hover { background: #edf4f2; }
.install-brand-matrix-item.active { color: #0f6557; background: #e5f2ee; box-shadow: inset 3px 0 #146c5c; }
.install-brand-matrix-item b { font-size: 12px; }
.install-brand-matrix-item span { color: #718085; font-size: 10px; }
.install-brand-matrix-editor { min-width: 0; overflow-y: auto; background: #fff; }
.install-brand-matrix-profile-fields { width: min(760px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px; }
.install-brand-matrix-profile-fields > label { display: grid; gap: 5px; color: #5d6b70; font-size: 10px; font-weight: 750; }
.install-brand-matrix-profile-fields > label input,
.install-brand-matrix-profile-fields > label select { width: 100%; min-width: 0; padding: 9px; color: #1e2a2f; background: #fff; border: 1px solid #cbd6d9; border-radius: 5px; font-size: 12px; }
.install-brand-matrix-tasks { padding: 0 16px 16px; }
.install-brand-task-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-top: 8px; }
.install-brand-task-item { min-width: 0; display: grid; gap: 4px; padding: 9px; color: #344248; background: #f7f9f9; border: 1px solid #d7e0e2; border-radius: 6px; text-align: left; }
.install-brand-task-item.active { color: #0f6557; border-color: #57a291; box-shadow: inset 0 0 0 1px #57a291; }
.install-brand-task-item b { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-brand-task-item span { color: #718085; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-brand-task-editor { border-top: 1px solid #dce4e6; }
.install-brand-matrix-keywords { width: min(760px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px 18px; }
.install-brand-matrix-keywords > label { display: grid; gap: 5px; color: #5d6b70; font-size: 10px; font-weight: 750; }
.install-brand-matrix-keywords textarea { width: 100%; min-width: 0; min-height: 88px; padding: 9px; color: #1e2a2f; background: #fff; border: 1px solid #cbd6d9; border-radius: 5px; font: 12px/1.45 system-ui, sans-serif; resize: vertical; }
.install-brand-matrix-keywords select { width: 100%; min-width: 0; padding: 9px; color: #1e2a2f; background: #fff; border: 1px solid #cbd6d9; border-radius: 5px; font-size: 12px; }
.install-animation-preview { min-width: 0; display: grid; place-items: center; padding: 24px; background: var(--preview-background, #f8fafc); border-right: 1px solid #ccd6d9; }
.install-preview-surface { width: min(430px, 92%); padding: 32px; color: var(--preview-text, #0f172a); background: var(--preview-surface, #fff); border: 1px solid color-mix(in srgb, var(--preview-muted, #64748b) 28%, transparent); border-radius: 8px; }
.install-preview-frame { width: 100%; height: 100%; min-height: 520px; border: 0; border-radius: 10px; background: #0a0a0f; }
.install-preview-surface > span { color: var(--preview-accent, #0f766e); font-size: 11px; font-weight: 850; }
.install-preview-surface h2 { margin: 20px 0 8px; font-size: 24px; letter-spacing: 0; }
.install-preview-surface p { min-height: 42px; margin: 0; color: var(--preview-muted, #64748b); font-size: 14px; line-height: 1.5; }
.install-preview-surface > b { display: block; margin-top: 22px; font-size: 13px; text-align: right; }
.install-preview-progress { height: 8px; margin-top: 8px; overflow: hidden; background: color-mix(in srgb, var(--preview-muted, #64748b) 18%, transparent); border-radius: 4px; }
.install-preview-progress i { width: 38%; height: 100%; display: block; background: var(--preview-primary, #2563eb); border-radius: inherit; transition: width .2s ease; }
.install-preview-surface small { display: block; margin-top: 16px; color: var(--preview-muted, #64748b); text-align: center; }
.install-template-controls { min-width: 0; overflow-y: auto; background: #fff; }
.install-template-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px; border-bottom: 1px solid #dce4e6; }
.install-template-item { min-width: 0; display: grid; gap: 4px; padding: 9px; color: #344248; background: #f7f9f9; border: 1px solid #d7e0e2; border-radius: 6px; text-align: left; }
.install-template-item.active { color: #0f6557; border-color: #57a291; box-shadow: inset 0 0 0 1px #57a291; }
.install-template-item b { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-template-item span { display: flex; gap: 3px; }
.install-template-item i { width: 14px; height: 14px; border-radius: 2px; }
.install-template-fields { display: grid; gap: 10px; padding: 14px; }
.install-template-fields label, .install-inspector-section > label, .install-form-grid label { display: grid; gap: 5px; color: #5d6b70; font-size: 10px; font-weight: 750; }
.install-template-fields input:not([type="range"]):not([type="color"]), .install-template-fields textarea,
.install-inspector-section input:not([type="checkbox"]), .install-inspector-section textarea, .install-inspector-section select {
width: 100%; min-width: 0; padding: 8px; color: #1e2a2f; background: #fff; border: 1px solid #cbd6d9; border-radius: 5px; font: inherit; font-size: 12px; font-weight: 500;
}
.install-color-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.install-color-fields input[type="color"] { width: 100%; height: 34px; padding: 2px; background: #fff; border: 1px solid #cbd6d9; border-radius: 5px; }
.install-template-actions, .install-inline-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.install-inspector-section { padding-bottom: 12px; border-bottom: 1px solid #dce4e6; }
.install-inspector-section > label, .install-inspector-section > button, .install-inspector-section > pre, .install-inspector-section > .install-inline-actions, .install-inspector-section > .install-form-grid, .install-inspector-section > .install-check { margin-left: 13px; margin-right: 13px; }
.install-run-status-section { padding-bottom: 0; }
.install-run-status-list { list-style: none; display: grid; gap: 0; margin: 0; padding: 0 13px 10px; }
.install-run-status-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid #e1e7e9; font-size: 10px; }
.install-run-status-item:last-child { border-bottom: 0; }
.install-run-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #aeb9bd; }
.install-run-status-item.ok .install-run-status-dot { background: #0f7a64; }
.install-run-status-item.failed .install-run-status-dot { background: #c2410c; }
.install-run-status-item.running .install-run-status-dot { background: #d97706; }
.install-run-status-item.skipped .install-run-status-dot { background: #7a8a90; }
.install-run-status-copy { min-width: 0; display: grid; gap: 3px; }
.install-run-status-copy b { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-run-status-copy small { color: #718085; font-size: 9px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-run-status-item em { color: #718085; font-style: normal; white-space: nowrap; }
.install-run-status-item.ok em { color: #0f7a64; }
.install-run-status-item.failed em { color: #c2410c; }
.install-run-status-item.running em { color: #d97706; }
.install-run-status-empty { padding: 14px 4px; color: #819095; font-size: 10px; text-align: center; }
.install-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; }
.install-form-grid .wide { grid-column: 1 / -1; }
.install-scope-kind { margin: 10px 13px 0; padding: 7px 9px; color: #0f6557; background: #edf7f4; border-left: 3px solid #146c5c; font-size: 10px; font-weight: 800; }
.install-inspector-section.flow-readonly input, .install-inspector-section.flow-readonly select { color: #6d7a7f; background: #f1f4f4; }
#installSelectedNode { min-height: 76px; margin-top: 10px; padding: 9px; overflow: auto; color: #344248; background: #f4f7f7; border: 1px solid #dce4e6; border-radius: 5px; font: 10px/1.5 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.install-inline-actions { margin-top: 8px; }
.install-step-semantic-binding { display: grid; gap: 7px; margin: 10px 13px 0; padding: 10px; background: #f4f7f7; border-left: 3px solid #6b7b80; }
.install-step-semantic-binding > label { display: grid; gap: 5px; color: #5d6b70; font-size: 10px; font-weight: 750; }
.install-step-semantic-binding select { width: 100%; min-width: 0; height: 34px; padding: 0 28px 0 8px; color: #26353a; background: #fff; border: 1px solid #cbd6d9; border-radius: 5px; font-size: 11px; }
.install-step-semantic-binding > span { color: #66757a; font-size: 10px; line-height: 1.4; }
.install-step-semantic-binding .install-inline-actions { margin: 0; }
.install-step-semantic-binding button { min-height: 30px; padding: 5px 8px; font-size: 10px; }
.install-semantic-language-toolbar { display: grid; gap: 5px; margin: 10px 13px 0; color: #5d6b70; font-size: 10px; font-weight: 750; }
.install-semantic-language-toolbar > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.install-semantic-language-toolbar input { min-width: 0; padding: 8px; color: #1e2a2f; background: #fff; border: 1px solid #cbd6d9; border-radius: 5px; font: inherit; font-size: 12px; font-weight: 500; }
.install-semantic-language-toolbar button { min-height: 34px; white-space: nowrap; }
.install-semantic-language-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 13px 0; padding-bottom: 6px; border-bottom: 1px solid #dce4e6; }
.install-semantic-language-head b { color: #344248; font-size: 11px; }
.install-semantic-language-head span { color: #718085; font-size: 10px; }
.install-semantic-language-list { margin: 0 13px 10px; }
.install-semantic-language-row { padding: 9px 0 10px; border-bottom: 1px solid #e1e7e9; }
.install-semantic-language-row header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.install-semantic-language-row header b { color: #344248; font-size: 11px; }
.install-semantic-language-row header code { padding: 2px 5px; color: #0f6557; background: #e8f4f0; border-radius: 3px; font: 9px Consolas, monospace; }
.install-semantic-language-row header button { width: 25px; height: 25px; display: grid; place-items: center; margin-left: auto; padding: 0; color: #8a4a4a; background: transparent; border: 0; border-radius: 4px; }
.install-semantic-language-row header button:hover { color: #a52a2a; background: #fff0f0; }
.install-semantic-language-row textarea { width: 100%; min-height: 70px; resize: vertical; padding: 8px; color: #1e2a2f; background: #fff; border: 1px solid #cbd6d9; border-radius: 5px; font: 11px/1.45 system-ui, sans-serif; }
.install-semantic-language-empty { padding: 18px 4px; color: #819095; font-size: 10px; text-align: center; }
.install-code-input { font-family: Consolas, monospace !important; font-size: 10px !important; line-height: 1.45; }
.install-check { display: flex !important; grid-template-columns: 16px 1fr; align-items: center; gap: 7px; margin-top: 9px; color: #526166; font-size: 11px; }
.install-workbench-status { position: sticky; bottom: 0; min-height: 42px; display: flex; align-items: center; padding: 9px 13px; color: #536267; background: #f7f9f9; border-top: 1px solid #d8e0e2; font-size: 11px; }
.install-workbench-status.error { color: #a52a2a; background: #fff1f1; }
.install-workbench-status.ok { color: #0f6557; background: #eaf7f2; }
@media (max-width: 1120px) {
.install-workbench-header { grid-template-columns: 1fr auto; }
.install-header-device { display: none; }
.install-workbench-grid { grid-template-columns: 230px minmax(520px, 1fr) 310px; overflow-x: auto; }
}
@media (max-width: 760px) {
html.install-workbench-mode { height: auto; overflow: auto; }
body.install-workbench-mode { overflow: auto; }
body.install-workbench-mode .app-shell { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
body.install-workbench-mode .install-workbench-page { height: auto; min-height: 0; overflow: visible; }
.install-workbench-header { height: auto; min-height: 64px; grid-template-columns: 1fr; gap: 8px; padding: 9px 10px; }
.install-header-device { display: flex; justify-content: flex-start; }
.install-header-device select { width: 100%; }
.install-header-actions { justify-content: flex-start; }
.install-workbench-grid { height: auto; display: block; overflow: visible; }
.install-library-panel, .install-inspector-panel { border: 0; border-bottom: 1px solid #d8e0e2; }
.install-library-panel { max-height: none; }
.install-flow-list { max-height: 180px; }
.install-action-catalog { max-height: 280px; overflow-y: auto; }
.install-editor-panel { min-height: 720px; }
.install-workspace-pane, .install-animation-pane { grid-template-columns: 1fr; overflow: visible; }
.install-semantic-library-pane, .install-brand-matrix-pane { grid-template-columns: 1fr; }
.install-semantic-library-list-pane { max-height: 360px; border-right: 0; border-bottom: 1px solid #ccd6d9; }
.install-semantic-library-editor { min-height: 520px; }
.install-phone-stage { min-height: 610px; border-right: 0; border-bottom: 1px solid #ccd6d9; }
.install-phone-shell { height: 550px; }
.install-phone-control-row { height: auto; flex-direction: column; }
.install-device-shortcuts { flex: 0 0 auto; width: min(100%, 550px); max-height: none; flex-direction: row; align-items: flex-start; overflow-x: auto; overflow-y: hidden; }
.install-shortcut-group { flex: 0 0 auto; grid-auto-flow: column; grid-template-columns: none; padding: 0 8px 0 0; border-right: 1px solid #c8d2d5; border-bottom: 0; }
.install-shortcut-group:last-child { padding-right: 0; border-right: 0; }
.install-key-shortcuts { grid-template-columns: none; }
.install-display-shortcuts { align-items: center; }
.install-display-shortcuts output { width: 36px; }
.install-timeline-pane { max-height: 520px; }
.install-animation-preview { min-height: 520px; border-right: 0; border-bottom: 1px solid #ccd6d9; }
.install-color-fields { grid-template-columns: repeat(3, 1fr); }
}
/* 设备大厅：与控制页一致的浅色 macOS / iOS 工作台视觉。 */
body:not(.control-mode):not(.install-workbench-mode) {
color-scheme: light;
color: #17212b;
background: linear-gradient(145deg, #dbe7f1 0%, #eef3f7 46%, #cbdce9 100%);
}
body:not(.control-mode):not(.install-workbench-mode) .app-shell {
width: 100vw;
height: 100vh;
padding: 0;
}
.hall-header {
height: 48px;
margin: 0;
padding: 0 18px;
color: #1d2731;
background: rgba(248, 251, 253, .82);
border: 0;
border-bottom: 1px solid rgba(63, 78, 92, .18);
box-shadow: 0 1px 0 rgba(255, 255, 255, .76), 0 8px 24px rgba(63, 82, 99, .08);
backdrop-filter: blur(22px) saturate(1.25);
}
.hall-header .brand { gap: 12px; }
.hall-header .brand h1 {
color: #18222c;
font-size: 14px;
font-weight: 760;
letter-spacing: 0;
}
.hall-header .brand p {
margin-top: 1px;
color: #71808d;
font-size: 10px;
}
.hall-window-lights {
display: inline-flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
}
.hall-light {
width: 11px;
height: 11px;
border-radius: 50%;
border: 1px solid rgba(20, 30, 38, .14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
}
.hall-light.red { background: #ff5f57; }
.hall-light.yellow { background: #febc2e; }
.hall-light.green { background: #28c840; }
.hall-header .status-pill {
min-height: 28px;
padding: 0 12px 0 28px;
position: relative;
display: inline-flex;
align-items: center;
color: #53616d;
background: rgba(255, 255, 255, .7);
border: 1px solid rgba(72, 89, 104, .2);
border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84);
}
.hall-header .status-pill::before {
content: "";
position: absolute;
left: 11px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #8b98a3;
}
.hall-header .status-pill.ok { color: #146c43; border-color: rgba(32, 147, 91, .24); }
.hall-header .status-pill.ok::before { background: #27b36a; box-shadow: 0 0 0 3px rgba(39, 179, 106, .12); }
.hall-header .status-pill.bad { color: #a33a38; border-color: rgba(190, 72, 68, .24); }
.hall-header .status-pill.bad::before { background: #dc514d; }
.hall-page {
height: calc(100vh - 48px);
padding: 14px 18px 16px;
display: grid;
grid-template-rows: 42px 70px 38px 18px minmax(0, 1fr);
gap: 8px;
color: #1d2933;
background: linear-gradient(145deg, rgba(213, 228, 239, .88), rgba(241, 246, 249, .92) 48%, rgba(204, 222, 235, .9));
border: 0;
}
.hall-commandbar {
min-width: 0;
display: grid;
grid-template-columns: minmax(320px, 1fr) auto auto auto;
align-items: center;
gap: 7px;
padding: 5px 6px;
background: rgba(255, 255, 255, .7);
border: 1px solid rgba(76, 93, 108, .18);
border-radius: 8px;
box-shadow: 0 12px 32px rgba(67, 87, 103, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
backdrop-filter: blur(18px) saturate(1.18);
}
.hall-search-field {
min-width: 0;
height: 30px;
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: center;
padding: 0 7px;
color: #667684;
background: rgba(247, 250, 252, .9);
border: 1px solid #c6d1d9;
border-radius: 7px;
box-shadow: inset 0 1px 2px rgba(54, 69, 82, .06);
}
.hall-search-field > span { font-size: 16px; line-height: 1; text-align: center; }
.hall-search {
height: 28px;
min-width: 0;
padding: 0 6px;
color: #202d37;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
font-size: 12px;
}
.hall-search:focus { border: 0; box-shadow: none; }
.hall-search::placeholder { color: #7f8d98; }
.hall-commandbar .ghost,
.hall-commandbar .primary,
.hall-filterbar .danger-outline,
.ops button {
height: 30px;
min-width: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 11px;
border-radius: 7px;
font-size: 11px;
font-weight: 690;
letter-spacing: 0;
transform: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 1px 2px rgba(40, 55, 68, .08);
}
.hall-commandbar .ghost {
color: #34434f;
background: #f7f9fb;
border: 1px solid #bec9d1;
}
.hall-commandbar .ghost:hover { color: #182630; background: #fff; border-color: #96a6b2; transform: none; }
.hall-commandbar .primary {
color: #fff;
background: #087f72;
border: 1px solid #087166;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 6px rgba(8, 127, 114, .18);
}
.hall-commandbar .primary:hover { background: #076f65; border-color: #075f57; transform: none; }
.hall-stats {
min-height: 0;
display: grid;
grid-template-columns: repeat(8, minmax(96px, 1fr));
gap: 0;
overflow: hidden;
background: rgba(255, 255, 255, .72);
border: 1px solid rgba(76, 93, 108, .18);
border-radius: 8px;
box-shadow: 0 14px 34px rgba(67, 87, 103, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
backdrop-filter: blur(18px) saturate(1.16);
}
.stat-card {
min-width: 0;
padding: 10px 13px;
background: transparent;
border: 0;
border-right: 1px solid rgba(91, 106, 119, .14);
border-radius: 0;
box-shadow: none;
}
.stat-card:last-child { border-right: 0; }
.stat-card span { color: #73818d; font-size: 10px; line-height: 1.2; }
.stat-card strong {
margin-top: 7px;
color: #172630;
font-size: 20px;
font-weight: 740;
line-height: 1;
letter-spacing: 0;
}
.hall-filterbar {
min-width: 0;
display: flex;
align-items: center;
gap: 3px;
padding: 4px;
overflow: hidden;
background: rgba(255, 255, 255, .68);
border: 1px solid rgba(76, 93, 108, .18);
border-radius: 8px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
backdrop-filter: blur(16px) saturate(1.12);
}
.filter-tab {
height: 28px;
padding: 0 14px;
color: #596875;
background: transparent;
border: 0;
border-radius: 6px;
font-size: 11px;
font-weight: 680;
}
.filter-tab:hover { color: #22313c; background: rgba(214, 223, 230, .55); }
.filter-tab:focus { outline: none; }
.hall-page button:focus-visible,
.hall-header button:focus-visible {
outline: 2px solid #2f8fd8;
outline-offset: 2px;
}
.filter-tab.active {
color: #17242d;
background: #fff;
border: 0;
box-shadow: 0 1px 4px rgba(55, 71, 84, .16), inset 0 0 0 1px rgba(75, 91, 105, .1);
}
.hall-filter-actions { margin-left: auto; }
.hall-filterbar .danger-outline {
height: 28px;
color: #a34340;
background: #fff8f7;
border: 1px solid #e8b8b5;
box-shadow: none;
}
.hall-filterbar .danger-outline:hover { color: #8c302e; background: #fff; border-color: #d58e8a; }
.hall-refresh-status {
height: 28px;
max-width: min(48vw, 650px);
margin-left: 5px;
padding: 0 10px 0 27px;
overflow: hidden;
color: #496172;
background: rgba(237, 243, 247, .86);
border: 1px solid #c6d1d9;
border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
font-size: 10px;
text-overflow: ellipsis;
}
.hall-refresh-status::before { left: 10px; width: 8px; height: 8px; background: #24aa62; box-shadow: 0 0 0 3px rgba(36, 170, 98, .11); }
.hall-refresh-status:hover { color: #293b48; background: #fff; border-color: #9cabb6; }
.hall-refresh-status.off { color: #778590; background: #eef2f5; border-color: #c6d1d9; }
.hall-refresh-status.bad { color: #9e3e3b; background: #fff5f4; border-color: #e1aaa6; }
.hall-buildline { min-width: 0; gap: 8px; padding: 0 4px; }
.hall-buildline .inline-status { margin: 0; min-height: 0; color: #657581; font-size: 10px; }
.hall-buildline .inline-status code { color: #156b62; }
.hall-buildline .download-link {
width: auto;
height: 22px;
margin: 0;
padding: 0 9px;
color: #fff;
background: #087f72;
border: 1px solid #087166;
border-radius: 6px;
box-shadow: none;
font-size: 10px;
}
.hall-table-card {
min-height: 0;
display: grid;
grid-template-rows: 38px minmax(0, 1fr);
overflow: hidden;
color: #24313b;
background: rgba(255, 255, 255, .86);
border: 1px solid rgba(69, 85, 99, .2);
border-radius: 8px;
box-shadow: 0 22px 54px rgba(59, 79, 96, .16), inset 0 1px 0 rgba(255, 255, 255, .95);
backdrop-filter: blur(22px) saturate(1.15);
}
.hall-table-titlebar {
min-width: 0;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
padding: 0 13px;
background: rgba(245, 248, 250, .92);
border-bottom: 1px solid #d2dce3;
}
.hall-table-titlebar b { color: #25333d; font-size: 11px; letter-spacing: 0; }
.hall-table-titlebar > span { color: #75838e; font-size: 10px; }
.hall-table-scroll { min-height: 0; overflow: auto; scrollbar-color: #aebbc4 transparent; scrollbar-width: thin; }
.device-table {
width: 100%;
min-width: 1720px;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
color: #293741;
background: rgba(255, 255, 255, .72);
font-size: 10.5px;
}
.device-table thead th {
position: sticky;
top: 0;
z-index: 3;
height: 34px;
padding: 0 7px;
color: #657480;
background: rgba(241, 245, 248, .98);
border-bottom: 1px solid #ccd7df;
font-size: 9px;
font-weight: 750;
letter-spacing: 0;
}
.device-sort-button {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 3px;
width: 100%;
height: 100%;
min-width: 0;
padding: 0;
color: inherit;
background: transparent;
border: 0;
border-radius: 3px;
font: inherit;
font-weight: inherit;
letter-spacing: 0;
text-align: left;
}
.device-sort-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.smooth-control-mode .tap-cross { display: none !important; }
body.smooth-control-mode .coord-line { visibility: hidden; }
body.smooth-control-mode #controlToast:not(.feedback-error) { display: none !important; }
body.smooth-control-mode .coord-line.smooth-ack {
visibility: visible;
color: #0f766e;
font-family: inherit;
font-weight: 700;
}
.device-sort-indicator {
flex: 0 0 9px;
width: 9px;
color: #8a9aa5;
font-size: 8px;
line-height: 1;
text-align: center;
}
.device-sort-indicator::before { content: "\21C5"; opacity: .48; }
.device-sort-button:hover { color: #176f67; }
.device-sort-button:hover .device-sort-indicator::before { opacity: .85; }
.device-sort-button:focus-visible {
outline: 2px solid rgba(23, 111, 103, .46);
outline-offset: -2px;
}
.device-table thead th[aria-sort="ascending"],
.device-table thead th[aria-sort="descending"] {
color: #0f6d63;
background: #e7f2f0;
}
.device-table thead th[aria-sort="ascending"] .device-sort-indicator::before {
content: "\25B2";
opacity: 1;
}
.device-table thead th[aria-sort="descending"] .device-sort-indicator::before {
content: "\25BC";
opacity: 1;
}
.device-table tbody td {
height: 55px;
padding: 5px 7px;
color: #34424c;
background: rgba(255, 255, 255, .68);
border-bottom: 1px solid #e1e7eb;
}
.device-row {
/* Keep the full list scrollable while allowing Chromium to skip layout and
paint work for rows outside the viewport. */
content-visibility: auto;
contain-intrinsic-size: 55px;
}
.device-row:hover td { background: #f2f8fb; }
.group-row td {
height: 27px !important;
padding: 0 10px;
color: #3e5362;
background: #eaf1f5;
border-top: 0;
border-bottom: 1px solid #d3dee5;
font-size: 10px;
font-weight: 760;
}
.twisty { color: #087f72; }
.device-name b { color: #1e2d37; font-size: 10.5px; }
.device-name small,
.device-table td small { color: #7b8994; font-size: 9px; }
.mono { color: #314b5a; font-family: Consolas, "SFMono-Regular", monospace; }
.remark-input {
height: 27px;
padding: 0 8px;
color: #273640;
background: #f8fafb;
border: 1px solid #cad5dc;
border-radius: 6px;
font-size: 10px;
box-shadow: inset 0 1px 2px rgba(55, 69, 80, .04);
}
.remark-input:focus { border-color: #56a99f; box-shadow: 0 0 0 3px rgba(27, 143, 130, .1); }
.pill {
min-width: 32px;
height: 20px;
padding: 0 7px;
color: #596874;
background: #edf1f4;
border: 1px solid #d1dae0;
border-radius: 999px;
font-size: 9px;
font-weight: 680;
}
.pill.green { color: #136940; background: #e9f7ef; border-color: #abdabe; }
.pill.red { color: #a13b38; background: #fff0ef; border-color: #e7b2af; }
.pill.blue { color: #1458a6; background: #e8f1ff; border-color: #a8c7f2; }
.pill.amber { color: #8a6414; background: #fff8df; border-color: #ead79a; }
.pill.gray { color: #68757f; background: #f1f4f5; border-color: #d2d9df; }
.ops { gap: 5px; }
.ops button {
height: 25px;
min-width: 38px;
padding: 0 8px;
color: #285266;
background: #f3f8fa;
border: 1px solid #bdd0da;
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.ops button:hover { color: #0d5e58; background: #fff; border-color: #72aea8; }
.device-table thead th:last-child,
.device-row td:last-child {
position: sticky;
right: 0;
z-index: 2;
box-shadow: -8px 0 14px rgba(64, 83, 98, .05);
}
.device-table th:nth-child(22),
.device-table td:nth-child(22) { width: 104px; }
.device-row:hover td:last-child { background: #f2f8fb; }
.device-table thead th:last-child { z-index: 4; }
.empty-row { height: 180px !important; color: #7a8893; background: rgba(255, 255, 255, .7); }
@media (max-width: 980px) {
.hall-page { padding: 10px; grid-template-rows: 78px 66px 72px 18px minmax(0, 1fr); }
.hall-commandbar { grid-template-columns: minmax(0, 1fr) repeat(3, auto); align-content: center; }
.hall-search-field { grid-column: 1 / -1; }
.hall-stats { grid-template-columns: repeat(8, 112px); overflow-x: auto; }
.hall-filterbar { flex-wrap: wrap; align-content: center; }
.hall-filter-actions { margin-left: 0; }
.hall-refresh-status { order: 5; max-width: 100%; flex: 1 1 100%; }
}
@media (max-width: 620px) {
.hall-header { padding: 0 11px; }
.hall-header .status-pill { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hall-page { padding: 8px; grid-template-rows: 114px 64px 72px 18px minmax(0, 1fr); }
.hall-commandbar { grid-template-columns: repeat(3, 1fr); }
.hall-commandbar .ghost, .hall-commandbar .primary { min-width: 0; padding: 0 7px; }
.filter-tab { flex: 1 1 0; padding: 0 7px; }
.hall-filter-actions { display: none; }
.hall-table-titlebar { grid-template-columns: auto 1fr auto; gap: 9px; }
}
/* Account access and multi-tenant operations */
.auth-page {
width: 100%; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
padding: 24px; background: #0b1017;
}
.auth-panel {
width: min(400px, 100%); padding: 34px; border: 1px solid #2a3442; border-radius: 8px;
background: #111923; box-shadow: 0 28px 80px rgba(0,0,0,.42);
}
.auth-brand-mark {
width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #4b6579;
border-radius: 6px; color: #f5fbff; background: #173646; font-size: 22px; font-weight: 900;
}
.auth-heading { margin: 22px 0 28px; }
.auth-heading h1 { margin: 0; font-size: 21px; letter-spacing: 0; color: #f4f7fa; }
.auth-heading p { margin: 6px 0 0; color: #91a0ae; font-size: 13px; }
.auth-form { display: grid; gap: 15px; }
.auth-form label { display: grid; gap: 7px; color: #b8c3ce; font-size: 12px; }
.auth-form input { height: 42px; border-radius: 6px; border-color: #344452; background: #0b1219; }
.auth-form button {
height: 42px; border-radius: 6px; color: #f5ffff; background: #0f766e;
border: 1px solid #18a59a; font-weight: 800;
}
.auth-status { min-height: 18px; margin: 0; color: #ff9caa; font-size: 12px; }
.user-badge {
display: grid; align-content: center; min-width: 110px; height: 34px; padding: 0 10px;
color: #e6edf4; border-left: 1px solid #334155; font-size: 12px; line-height: 1.2;
}
.user-badge small { color: #91a0ae; font-size: 10px; }
.hall-header .user-badge { color: #263740; border-left-color: #c6d1d7; }
.hall-header .user-badge small { color: #74838d; }
.icon-command { min-width: 34px; width: 34px; padding: 0; font-size: 17px; }
.runtime-restart-button {
min-width: 88px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
white-space: nowrap;
}
.runtime-restart-icon { font-size: 16px; line-height: 1; }
.runtime-restart-button.is-restarting .runtime-restart-icon { animation: runtime-restart-spin .8s linear infinite; }
@keyframes runtime-restart-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.runtime-restart-button.is-restarting .runtime-restart-icon { animation: none; }
}
.clue-filter select, .account-create-form select, .account-table select {
min-width: 120px; height: 28px; padding: 0 26px 0 8px; color: #dce6ef;
background: #0e1720; border: 1px solid #334657; border-radius: 6px;
}
.hall-filterbar .clue-filter { color: #526570; }
.device-row.device-pinned td:first-child::before { content: "\2605"; color: #d8a72d; margin-right: 3px; }
.device-row.device-busy { background: rgba(148,163,184,.09); }
.operator-cell b { display: block; color: #1e604f; }
.operator-cell small { display: block; color: #70808d; }
.device-table th:nth-child(22), .device-table td:nth-child(22) { width: 96px; }
.device-table th:nth-child(23), .device-table td:nth-child(23) { width: 190px; }
.ops { gap: 4px; }
.ops button { min-width: 42px; padding: 0 7px; }
.ops .row-danger { color: #8d302e; border-color: #d7a09c; background: #fff5f4; }
.ops .row-secondary { color: #35515d; background: #f4f7f8; }
.ops .row-block { color: #6b1f1c; border-color: #c08a86; background: #fce9e7; }
.ops .row-block.row-blocked { color: #9aa4ad; border-color: #d4dae0; background: #f2f4f6; cursor: not-allowed; }
.device-row.device-blocked { opacity: .62; }
.control-remark-input {
width: 150px; height: 28px; padding: 0 8px; color: #25313a; background: rgba(255,255,255,.72);
border: 1px solid rgba(30,41,59,.2); border-radius: 5px; font-size: 12px;
}
.mac-action-button {
height: 28px; padding: 0 9px; border-radius: 5px; border: 1px solid rgba(30,41,59,.18);
color: #26343e; background: rgba(255,255,255,.64); font-size: 12px; font-weight: 700;
}
.mac-action-button.active { color: #fff; background: #0f766e; border-color: #0f766e; }
.mac-action-button.danger { color: #8a302f; }
.control-lock-overlay {
position: absolute; inset: 42px auto auto 50%; z-index: 60; width: min(440px, calc(100% - 32px));
transform: translateX(-50%); display: grid; gap: 9px; padding: 16px; color: #25313a;
background: rgba(247,250,251,.96); border: 1px solid rgba(48,65,76,.25); border-radius: 7px;
box-shadow: 0 18px 55px rgba(15,23,42,.28);
}
.control-lock-overlay span { color: #63727e; font-size: 13px; }
.control-lock-overlay button {
justify-self: start; height: 30px; padding: 0 12px; border-radius: 5px; color: #fff; background: #334b5a;
}
.device-offline-notice {
position: absolute; top: 10px; left: 50%; z-index: 55; transform: translateX(-50%);
display: flex; align-items: center; gap: 9px; width: min(520px, calc(100% - 32px));
min-height: 34px; padding: 6px 9px 6px 12px; color: #713f12;
background: rgba(255, 247, 237, .94); border: 1px solid rgba(234, 145, 49, .55);
border-radius: 6px; box-shadow: 0 10px 26px rgba(120, 72, 16, .16);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
font-size: 12px; font-weight: 700;
}
.device-offline-notice.hidden { display: none; }
.device-offline-icon { color: #b45309; font-size: 15px; line-height: 1; }
.device-offline-notice #deviceOfflineNoticeText { min-width: 0; flex: 1; }
.device-offline-notice button {
width: 26px; height: 26px; flex: 0 0 26px; padding: 0; color: #7c3f12;
background: rgba(255, 255, 255, .72); border: 1px solid rgba(180, 83, 9, .28); border-radius: 5px;
font-size: 16px; line-height: 1;
}
.device-offline-notice button:hover { background: #fff; }
.command-unavailable,
button.command-unavailable:disabled,
input.command-unavailable:disabled,
textarea.command-unavailable:disabled,
select.command-unavailable:disabled {
cursor: not-allowed !important;
}
.command-unavailable:not(.sending) { filter: grayscale(.18); }
body.lease-blocked #controlCanvas > :not(#controlLockOverlay) { pointer-events: none; }
body.lease-blocked #controlPage .mac-menu-bar button:not([data-control-action="home"]),
body.lease-blocked #controlPage .mac-menu-bar input,
body.lease-blocked #controlPage .apple-dock button,
body.lease-blocked #controlPage .apple-dock input,
body.lease-blocked #installFlowPage button:not(#installBackBtn),
body.lease-blocked #installFlowPage input,
body.lease-blocked #installFlowPage textarea,
body.lease-blocked #installFlowPage select { pointer-events: none; }
.account-modal {
width: min(1180px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px));
display: grid; grid-template-rows: 66px 42px minmax(0,1fr) 38px; overflow: hidden;
color: #24313a; background: #f5f7f8; border: 1px solid #8797a2; border-radius: 8px;
box-shadow: 0 32px 100px rgba(0,0,0,.5);
}
.account-modal-head {
display: flex; align-items: center; justify-content: space-between; padding: 0 18px;
color: #eef4f7; background: #263743; border-bottom: 1px solid #18252d;
}
.account-modal-head h2 { margin: 0; font-size: 17px; letter-spacing: 0; }
.account-modal-head p { margin: 4px 0 0; color: #b9c6ce; font-size: 11px; }
.account-tabs {
display: flex; gap: 2px; padding: 6px 12px 0; background: #e8edef; border-bottom: 1px solid #c8d1d6;
}
.account-tabs button {
min-width: 82px; padding: 0 14px; color: #5d6b75; background: transparent; border-bottom: 2px solid transparent;
}
.account-tabs button.active { color: #135e59; border-bottom-color: #0f766e; }
.account-modal-body { min-height: 0; overflow: auto; padding: 14px; }
.account-tab-pane { min-height: 100%; }
.account-create-form {
display: grid; grid-template-columns: 160px repeat(4,minmax(130px,1fr)) auto; gap: 8px;
align-items: center; padding: 10px 0; border-bottom: 1px solid #d4dce0;
}
#createEmployeeForm { grid-template-columns: 160px 150px repeat(4,minmax(110px,1fr)) auto; }
.account-create-form h3 { margin: 0; color: #344650; font-size: 13px; }
.account-create-form input, .security-form input, .ip-row input {
height: 34px; padding: 0 9px; color: #25313a; background: #fff;
border: 1px solid #b9c5cc; border-radius: 5px;
}
.account-create-form select { height: 34px; color: #25313a; background: #fff; border-color: #b9c5cc; }
.account-create-form button, .security-form button, .account-table button,
.approval-item button, .group-row-actions button, .ip-row button {
height: 32px; padding: 0 10px; border-radius: 5px; color: #fff; background: #166a63;
border: 1px solid #0f766e; font-size: 12px;
}
.account-table-wrap { overflow: auto; margin-top: 12px; border: 1px solid #cbd5da; }
.account-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.account-table th { position: sticky; top: 0; padding: 8px; text-align: left; color: #4e5f69; background: #e7edef; }
.account-table td { padding: 8px; border-top: 1px solid #dce2e5; vertical-align: middle; }
.account-table td small { display: block; color: #7c8a93; margin-top: 2px; }
.account-table input[type="number"] { width: 76px; height: 30px; padding: 0 6px; color: #25313a; background: #fff; border-radius: 4px; }
.account-table .danger, .approval-item .danger, .group-row-actions .danger {
color: #8b302e; background: #fff; border-color: #d6a19d;
}
.account-groups-list, .approval-list { display: grid; gap: 8px; margin-top: 12px; }
.account-group-row, .approval-item, .ip-row {
display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: 12px; align-items: center;
padding: 10px 12px; background: #fff; border: 1px solid #ccd5da; border-radius: 6px;
}
.account-group-row small, .approval-item small { display: block; margin-top: 3px; color: #73818a; }
.group-row-actions { display: flex; gap: 6px; }
.security-form {
display: grid; grid-template-columns: 180px 230px 230px auto; gap: 9px;
align-items: center; padding-bottom: 14px; border-bottom: 1px solid #d4dce0;
}
.security-form h3, .ip-allowlist-editor h3 { margin: 0; font-size: 13px; }
.ip-allowlist-editor { margin-top: 14px; }
#ipAllowlistRows { display: grid; gap: 7px; margin-top: 9px; }
.ip-row { grid-template-columns: 220px minmax(280px,1fr) auto; }
.account-modal-foot {
display: flex; align-items: center; padding: 0 14px; color: #5f6e77;
background: #e8edef; border-top: 1px solid #cbd5da; font-size: 12px;
}
/* Device hall date filtering and multi-device assignment */
.install-date-filter {
min-width: 174px;
height: 28px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 5px 0 9px;
color: #526570;
background: rgba(247, 250, 252, .9);
border: 1px solid #c6d1d9;
border-radius: 6px;
font-size: 10px;
white-space: nowrap;
}
.install-date-filter input {
min-width: 0;
width: 112px;
height: 24px;
padding: 0 3px;
color: #263740;
background: transparent;
border: 0;
font: inherit;
}
.install-date-filter input:focus { outline: none; }
.install-date-filter button {
width: 20px;
height: 22px;
padding: 0;
color: #778792;
background: transparent;
border: 0;
border-radius: 4px;
font-size: 11px;
}
.install-date-filter button:hover { color: #9d3a36; background: #fff; }
.hall-selection-actions {
min-width: 0;
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: auto;
color: #526570;
font-size: 10px;
white-space: nowrap;
}
.hall-selection-actions button {
height: 27px;
padding: 0 8px;
color: #355466;
background: #f7fafb;
border: 1px solid #bdccd4;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
}
.hall-selection-actions button.primary {
color: #fff;
background: #087f72;
border-color: #087166;
}
.hall-selection-actions button:disabled { opacity: .5; cursor: not-allowed; }
.hall-auto-package-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
height: 27px;
padding: 0 3px 0 2px;
color: #526570;
cursor: pointer;
user-select: none;
}
.hall-auto-package-toggle input {
appearance: none;
position: relative;
width: 30px;
height: 17px;
flex: 0 0 30px;
margin: 0;
padding: 0;
border: 1px solid #b9c9d1;
border-radius: 999px;
background: #dfe7eb;
box-shadow: inset 0 1px 2px rgba(55, 69, 80, .14);
cursor: pointer;
transition: background .14s ease, border-color .14s ease;
}
.hall-auto-package-toggle input::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(36, 54, 65, .3);
transition: transform .14s ease;
}
.hall-auto-package-toggle input:checked {
border-color: #087f72;
background: #1aa18f;
}
.hall-auto-package-toggle input:checked::after { transform: translateX(13px); }
.hall-auto-package-toggle input:focus-visible { outline: 2px solid rgba(23, 111, 103, .45); outline-offset: 2px; }
.hall-auto-package-toggle input:disabled { opacity: .5; cursor: not-allowed; }
.hall-auto-package-toggle:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.device-select-head,
.device-select-cell { width: 34px !important; text-align: center; }
.device-select-cell {
white-space: nowrap;
}
.device-select-cell > span { margin-left: 3px; }
.device-select-checkbox,
.device-select-head input {
width: 14px;
height: 14px;
margin: 0;
accent-color: #0f766e;
vertical-align: middle;
}
.device-assignment { color: #0f766e !important; }
.clue3-cell { color: #155e59; font-weight: 700; }
.device-table th:nth-child(24),
.device-table td:nth-child(24) { width: 190px; }
.assign-devices-modal {
width: min(460px, calc(100vw - 28px));
overflow: hidden;
color: #24313a;
background: #f5f7f8;
border: 1px solid #8797a2;
border-radius: 8px;
box-shadow: 0 32px 100px rgba(0, 0, 0, .5);
}
.assign-devices-form {
display: grid;
gap: 13px;
padding: 18px;
}
.assign-devices-form label { display: grid; gap: 6px; color: #526570; font-size: 12px; font-weight: 700; }
.assign-devices-form select {
width: 100%;
height: 36px;
padding: 0 9px;
color: #25313a;
background: #fff;
border: 1px solid #b9c5cc;
border-radius: 5px;
font-size: 12px;
}
.assign-devices-summary {
padding: 9px 10px;
color: #155e59;
background: #e8f5f2;
border: 1px solid #b9ded8;
border-radius: 5px;
font-size: 12px;
font-weight: 750;
}
.assign-devices-status { min-height: 18px; margin: 0; color: #5f6e77; font-size: 11px; }
.assign-devices-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.assign-devices-actions button {
height: 34px;
padding: 0 14px;
border-radius: 5px;
font-size: 12px;
font-weight: 750;
}
.assign-devices-actions .ghost { color: #526570; background: #fff; border: 1px solid #bdccd4; }
.assign-devices-actions .primary { color: #fff; background: #087f72; border: 1px solid #087166; }
.assign-devices-actions button:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 900px) {
.header-actions #health { display: none; }
.user-badge { min-width: 0; }
.account-create-form { grid-template-columns: 1fr 1fr; }
#createEmployeeForm { grid-template-columns: 1fr 1fr; }
.account-create-form h3 { grid-column: 1 / -1; }
.security-form, .ip-row { grid-template-columns: 1fr; }
.control-remark-input { display: none; }
.mac-action-button { padding: 0 6px; }
}
@media (max-width: 620px) {
.hall-header .brand p, .hall-header .user-badge small { display: none; }
.hall-header .user-badge { min-width: 70px; padding: 0 6px; }
.account-modal { width: calc(100vw - 12px); height: calc(100vh - 12px); grid-template-rows: 58px 40px minmax(0,1fr) 34px; }
.account-modal-body { padding: 10px; }
.hall-selection-actions { width: 100%; margin-left: 0; overflow-x: auto; }
.install-date-filter { flex: 1 1 100%; }
.account-tabs { padding-left: 5px; padding-right: 5px; }
.account-tabs button { min-width: 0; flex: 1 1 0; padding: 0 5px; }
.account-create-form, #createEmployeeForm { grid-template-columns: 1fr; }
.account-create-form h3 { grid-column: auto; }
.mac-menu-left { gap: 4px; }
.mac-menu-title { max-width: 112px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.mac-menu-right { gap: 3px; }
#controlRemarkSaveBtn, #controlMenuLatency, #controlMenuClock { display: none; }
.mac-action-button { height: 26px; padding: 0 5px; font-size: 10px; }
.mac-status-dot { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Device hall: compact operations workspace. */
body:not(.control-mode):not(.install-workbench-mode) {
color: #1f2933;
background: #eef1f3;
}
body:not(.control-mode):not(.install-workbench-mode) .app-shell {
width: 100vw;
height: 100vh;
height: 100dvh;
padding: 0;
}
.hall-header {
height: 50px;
margin: 0;
padding: 0 16px;
color: #1f2933;
background: #fff;
border: 0;
border-bottom: 1px solid #d7dde2;
box-shadow: none;
backdrop-filter: none;
}
.hall-header .brand { gap: 0; }
.hall-header .brand h1 {
color: #17212b;
font-size: 14px;
font-weight: 760;
letter-spacing: 0;
}
.hall-header .brand p {
margin-top: 2px;
color: #6c7882;
font-size: 10px;
}
.hall-header .status-pill {
min-height: 28px;
padding: 0 9px 0 24px;
color: #53616c;
background: #f7f9fa;
border: 1px solid #cfd6dc;
border-radius: 5px;
box-shadow: none;
}
.hall-header .status-pill::before { left: 9px; width: 7px; height: 7px; }
.hall-header .status-pill.ok::before { box-shadow: none; }
.hall-page {
height: calc(100vh - 50px);
height: calc(100dvh - 50px);
min-height: 0;
padding: 12px 16px 14px;
display: grid;
grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
gap: 8px;
color: #1f2933;
background: #eef1f3;
border: 0;
}
.hall-page > .hall-commandbar { grid-row: 1; }
.hall-page > .hall-daily-stats { grid-row: 2; }
.hall-page > .hall-filterbar { grid-row: 3; }
.hall-page > .hall-selection-actions { grid-row: 4; }
.hall-page > .hall-buildline { grid-row: 5; }
.hall-page > .hall-table-card { grid-row: 6; }
.hall-commandbar {
min-width: 0;
display: grid;
grid-template-columns: minmax(260px, 1fr) auto minmax(148px, 230px) auto;
align-items: center;
gap: 7px;
padding: 5px;
background: #fff;
border: 1px solid #d2d9df;
border-radius: 6px;
box-shadow: none;
backdrop-filter: none;
}
.hall-search-field {
min-width: 0;
height: 32px;
display: grid;
grid-template-columns: 24px minmax(0, 1fr) 28px;
align-items: center;
padding: 0 3px 0 7px;
color: #65727c;
background: #f7f9fa;
border: 1px solid #c6d0d7;
border-radius: 5px;
box-shadow: none;
}
.hall-search-field:focus-within {
border-color: #4e8f89;
box-shadow: 0 0 0 2px rgba(15, 118, 110, .12);
}
.hall-search-field > span { font-size: 15px; line-height: 1; text-align: center; }
.hall-search {
height: 30px;
min-width: 0;
padding: 0 5px;
color: #1f2d36;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
font-size: 12px;
}
.hall-search:focus { border: 0; box-shadow: none; outline: 0; }
.hall-search::placeholder { color: #7b8790; }
.hall-search-clear {
width: 26px;
height: 26px;
display: grid;
place-items: center;
padding: 0;
color: #697780;
background: transparent;
border: 0;
border-radius: 4px;
font-size: 16px;
}
.hall-search-clear:hover { color: #26343d; background: #e7ecef; }
.hall-commandbar .ghost,
.hall-commandbar .primary,
.hall-filterbar .danger-outline,
.hall-more-actions summary,
.ops button {
height: 32px;
min-width: 66px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 11px;
border-radius: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
transform: none;
box-shadow: none;
}
.hall-commandbar .ghost {
color: #35444e;
background: #fff;
border: 1px solid #bcc7ce;
}
.hall-commandbar .ghost:hover { color: #17232c; background: #f5f7f8; border-color: #8e9da7; transform: none; }
.hall-commandbar .primary {
color: #fff;
background: #0f766e;
border: 1px solid #0b675f;
box-shadow: none;
}
.hall-commandbar .primary:hover { background: #0b675f; border-color: #095a54; transform: none; }
.hall-refresh-status {
position: relative;
order: 0;
height: 32px;
min-width: 0;
max-width: none;
margin: 0;
padding: 0 10px 0 27px;
overflow: hidden;
color: #315d57;
background: #edf7f5;
border: 1px solid #9dc8c2;
border-radius: 5px;
box-shadow: none;
font-size: 10px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.hall-refresh-status::before {
content: "";
position: absolute;
left: 10px;
width: 8px;
height: 8px;
border-radius: 2px;
background: #1f9d6a;
box-shadow: none;
}
.hall-refresh-status:hover { color: #254d48; background: #e5f2f0; border-color: #73aaa3; }
.hall-refresh-status.off {
color: #5f6c75;
background: #f2f4f5;
border-color: #c7d0d6;
}
.hall-refresh-status.off::before { background: #8b969e; }
.hall-refresh-status.bad { color: #983c38; background: #fff3f2; border-color: #dba8a4; }
.hall-refresh-status.bad::before { background: #c94d47; }
.hall-stats {
position: relative;
min-height: 66px;
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
grid-template-rows: minmax(44px, auto) 20px;
gap: 0;
overflow: visible;
background: #fff;
border: 1px solid #d2d9df;
border-radius: 6px;
box-shadow: none;
backdrop-filter: none;
}
.hall-stats .stat-card {
min-width: 0;
padding: 7px 12px 5px;
overflow: hidden;
background: transparent;
border: 0;
border-right: 1px solid #e1e6e9;
border-radius: 0;
box-shadow: none;
}
.hall-stats .stat-card:nth-of-type(8) { border-right: 0; }
.hall-stats .stat-card[data-stat-key="offline-rate"] strong { color: #a13b38; }
.hall-stats .stat-card[data-stat-key="offline-aging"] strong { color: #8a6414; font-size: 15px; }
.hall-stats .stat-card span {
display: block;
overflow: hidden;
color: #68757f;
font-size: 10px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.hall-stats .stat-card strong {
display: block;
margin-top: 3px;
color: #17252e;
font-size: 18px;
font-weight: 750;
line-height: 1;
letter-spacing: 0;
}
.hall-stats .stat-card[data-stat-key="today-confirmed-install"] strong { color: #0c625a; }
.hall-stats .stat-card[data-stat-key="today-first-access-estimate"] strong { color: #8a6414; }
.hall-stats-snapshot {
grid-column: 1 / -1;
min-width: 0;
display: flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 0 11px;
overflow: hidden;
color: #7a858d;
background: #fafbfb;
border-top: 1px solid #e7ebee;
font-size: 9px;
line-height: 19px;
text-overflow: ellipsis;
white-space: nowrap;
}
.hall-daily-stats {
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
padding: 7px 10px 8px;
overflow: hidden;
background: #fff;
border: 1px solid #d2d9df;
border-radius: 6px;
}
.hall-daily-header {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.hall-daily-header b { color: #2b3a44; font-size: 12px; }
.hall-daily-header input[type="date"] {
width: 136px;
height: 24px;
padding: 0 6px;
color: #26323b;
background: #fbfcfc;
border: 1px solid #cbd4da;
border-radius: 4px;
font-size: 11px;
}
.hall-daily-header button {
min-width: 26px;
height: 24px;
padding: 0 7px;
color: #33424d;
background: #f4f7f8;
border: 1px solid #cbd4da;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.hall-daily-header button:hover { background: #e9f0f2; }
.hall-daily-sample, .hall-daily-scope { color: #7a858d; font-size: 10px; }
.hall-daily-error { color: #a13b38; font-size: 10px; }
.hall-daily-trend { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.hall-daily-chip {
min-width: 0;
height: 21px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 7px;
color: #42515c;
background: #f4f7f8;
border: 1px solid #dbe2e6;
border-radius: 10px;
font-size: 10px;
cursor: pointer;
}
.hall-daily-chip em { color: #0c625a; font-style: normal; font-weight: 700; }
.hall-daily-chip.active { color: #fff; background: #0f766e; border-color: #0f766e; }
.hall-daily-chip.active em { color: #d7f3ef; }
.hall-daily-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border: 1px solid #e1e6e9;
border-radius: 4px;
overflow: hidden;
}
.hall-daily-stat {
min-width: 0;
padding: 5px 10px 6px;
border-right: 1px solid #e1e6e9;
background: #fbfcfc;
}
.hall-daily-stat:last-child { border-right: 0; }
.hall-daily-stat span {
display: block;
overflow: hidden;
color: #68757f;
font-size: 10px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.hall-daily-stat strong {
display: block;
margin-top: 2px;
color: #17252e;
font-size: 17px;
font-weight: 750;
line-height: 1;
}
.hall-daily-stat strong.green { color: #0c625a; }
.hall-daily-stat strong.red { color: #a13b38; }
.hall-daily-stat i {
display: block;
margin-top: 2px;
overflow: hidden;
color: #8a959d;
font-size: 9px;
font-style: normal;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 700px) {
.hall-daily-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hall-filterbar {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 5px;
overflow: visible;
background: #fff;
border: 1px solid #d2d9df;
border-radius: 6px;
box-shadow: none;
backdrop-filter: none;
}
.hall-filter-groups,
.hall-status-filters,
.hall-view-filters,
.hall-filter-fields {
min-width: 0;
display: flex;
align-items: center;
}
.hall-filter-groups { gap: 6px; overflow: hidden; }
.hall-status-filters,
.hall-view-filters { gap: 2px; }
.hall-view-filters {
padding-left: 6px;
border-left: 1px solid #dce2e6;
}
.hall-filter-fields { justify-content: flex-end; gap: 6px; }
.filter-tab {
height: 29px;
flex: 0 0 auto;
padding: 0 11px;
color: #53616b;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
font-size: 11px;
font-weight: 680;
}
.filter-tab:hover { color: #24323c; background: #f0f3f5; }
.filter-tab.active {
color: #0c625a;
background: #eaf5f3;
border-color: #b9d7d2;
box-shadow: none;
}
.clue-filter,
.install-date-filter {
min-width: 0;
height: 29px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 5px 0 9px;
color: #52616b;
background: #f8f9fa;
border: 1px solid #cbd4da;
border-radius: 4px;
font-size: 10px;
white-space: nowrap;
}
.clue-filter select {
width: 112px;
height: 25px;
padding: 0 20px 0 4px;
color: #26343d;
background: transparent;
border: 0;
border-radius: 0;
font: inherit;
}
.clue-filter select:focus { outline: 0; }
.install-date-filter { min-width: 174px; }
.install-date-filter input { width: 112px; height: 25px; }
.install-date-filter button { height: 23px; }
.hall-more-actions,
.hall-column-settings { position: relative; }
.hall-more-actions summary,
.hall-column-settings summary {
list-style: none;
cursor: pointer;
user-select: none;
}
.hall-more-actions summary::-webkit-details-marker,
.hall-column-settings summary::-webkit-details-marker { display: none; }
.hall-more-actions summary {
min-width: 76px;
height: 29px;
padding: 0 9px;
color: #4f5d66;
background: #fff;
border: 1px solid #c5cfd5;
}
.hall-more-actions summary::after { content: "\25BE"; margin-left: 5px; color: #7d8991; }
.hall-more-actions[open] summary { color: #26343d; background: #f1f4f5; }
.hall-more-actions:has(#clearOfflineBtn.hidden) { display: none; }
.hall-more-menu,
.hall-column-settings-menu {
position: absolute;
top: calc(100% + 5px);
right: 0;
z-index: 15;
min-width: 172px;
padding: 6px;
color: #5e6b74;
background: #fff;
border: 1px solid #bcc7ce;
border-radius: 5px;
box-shadow: 0 8px 22px rgba(35, 49, 59, .14);
font-size: 10px;
}
.hall-filterbar .danger-outline {
width: 100%;
height: 30px;
color: #a13f3b;
background: #fff;
border: 1px solid #ddb0ad;
box-shadow: none;
}
.hall-filterbar .danger-outline:hover { color: #87302d; background: #fff4f3; border-color: #cc8e8a; }
.hall-selection-actions {
min-width: 0;
min-height: 38px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0;
padding: 5px 7px 5px 11px;
color: #36504e;
background: #edf6f4;
border: 1px solid #b9d7d2;
border-left: 3px solid #0f766e;
border-radius: 4px;
font-size: 10px;
white-space: nowrap;
}
.hall-selection-actions:not(.has-selection) { display: none; }
.hall-selection-controls {
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
}
.hall-selection-actions button { height: 28px; border-radius: 4px; }
.hall-selection-actions button.primary { background: #0f766e; border-color: #0b675f; }
.hall-buildline {
min-width: 0;
min-height: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 0 3px;
}
.hall-buildline:has(#buildStatus:empty) { display: none; }
.hall-buildline .inline-status { margin: 0; min-height: 0; color: #65727c; font-size: 10px; }
.hall-buildline .download-link { height: 24px; border-radius: 4px; }
.hall-table-card {
min-height: 0;
display: grid;
grid-template-rows: 36px minmax(0, 1fr);
overflow: hidden;
color: #26343d;
background: #fff;
border: 1px solid #cbd4da;
border-radius: 6px;
box-shadow: none;
backdrop-filter: none;
}
.hall-table-titlebar {
position: relative;
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
padding: 0 8px 0 11px;
background: #f7f9fa;
border-bottom: 1px solid #d5dde2;
}
.hall-table-titlebar b { color: #25333c; font-size: 11px; letter-spacing: 0; }
.hall-table-titlebar > span { color: #748089; font-size: 10px; }
.hall-column-settings summary {
height: 26px;
display: inline-flex;
align-items: center;
padding: 0 8px;
color: #53616b;
background: #fff;
border: 1px solid #c4ced4;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
}
.hall-column-settings summary::before { content: "\2637"; margin-right: 5px; color: #74828a; }
.hall-column-settings[open] summary { color: #0c625a; background: #eaf5f3; border-color: #a9cec8; }
.hall-column-settings-menu { display: none; }
.hall-column-settings[open] .hall-column-settings-menu { display: block; width: 256px; max-height: min(62vh, 480px); overflow: auto; }
.hall-column-settings-note { margin: 2px 0 6px; color: #8a959d; font-size: 9px; }
.hall-column-list { list-style: none; margin: 0; padding: 0; }
.hall-column-list li { display: flex; align-items: center; gap: 4px; padding: 3px 2px; border-bottom: 1px solid #eef2f4; }
.hall-column-list li.is-hidden { opacity: .55; }
.hall-column-list label { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.hall-column-list input[type="checkbox"] { accent-color: #0f766e; }
.hall-column-settings-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.hall-column-settings-actions button { height: 24px; padding: 0 8px; font-size: 10px; color: #42515c; background: #f4f7f8; border: 1px solid #cbd4da; border-radius: 4px; }
.hall-column-list .col-move { width: 22px; height: 20px; padding: 0; font-size: 9px; color: #53616b; background: #f1f4f5; border: 1px solid #d5dde2; border-radius: 3px; }
.hall-column-list .col-move:hover:not(:disabled) { background: #e3ecee; }
.hall-table-scroll {
min-height: 0;
overflow: auto;
scrollbar-color: #aeb9c0 transparent;
scrollbar-width: thin;
}
.device-table {
width: 100%;
min-width: 0;
table-layout: auto;
border-collapse: separate;
border-spacing: 0;
color: #293740;
background: #fff;
font-size: 10.5px;
}
.device-table thead th {
height: 34px;
padding: 0 7px;
color: #606e78;
background: #f3f6f7;
border-bottom: 1px solid #ccd6dc;
font-size: 9px;
font-weight: 750;
letter-spacing: 0;
}
.device-table tbody td {
height: 52px;
padding: 5px 7px;
overflow: hidden;
color: #34424b;
background: #fff;
border-bottom: 1px solid #e2e7ea;
text-overflow: ellipsis;
}
.device-foreground-app {
max-height: 52px;
vertical-align: middle;
white-space: normal;
}
.device-foreground-app b,
.device-foreground-app small {
width: 100%;
min-width: 0;
display: block;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.device-foreground-app b {
color: #263740;
font: 760 10.5px/12px Inter, "Segoe UI", Arial, sans-serif;
}
.device-foreground-app small {
margin-top: 1px;
color: #74838d;
font: 9px/10px Consolas, "SFMono-Regular", monospace;
}
.device-foreground-app .device-monitor-state {
margin-top: 1px;
color: #176b62;
font: 720 9px/10px Inter, "Segoe UI", Arial, sans-serif;
}
.device-apk-version {
white-space: nowrap;
vertical-align: middle;
}
.device-apk-version small {
display: block;
margin-top: 1px;
color: #74838d;
font: 9px/10px Inter, "Segoe UI", Arial, sans-serif;
}
.workflow-cell { white-space: nowrap; vertical-align: middle; }
.wf-btn {
min-width: 40px;
height: 22px;
margin-right: 3px;
padding: 0 6px;
color: #53616b;
background: #fff;
border: 1px solid #c6d0d7;
border-radius: 4px;
font-size: 9px;
font-weight: 700;
}
.wf-btn:last-child { margin-right: 0; }
.wf-btn:hover { border-color: #8f9fa8; }
.wf-btn.is-on.wf-checked { color: #116b46; background: #e9f7ef; border-color: #abdabe; }
.wf-btn.is-on.wf-transferred { color: #1458a6; background: #e8f1ff; border-color: #a8c7f2; }
.wf-btn.is-on.wf-password-error { color: #a13b38; background: #fff0ef; border-color: #e7b2af; }
.monitor-hit-column,
.monitor-hit-cell {
width: 180px;
min-width: 180px;
}
.monitor-hit-cell {
max-height: 52px;
vertical-align: middle;
white-space: normal;
}
.monitor-hit-summary,
.monitor-hit-cell small {
width: 100%;
min-width: 0;
display: block;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.monitor-hit-summary {
color: #53616b;
font: 760 10.5px/12px Inter, "Segoe UI", Arial, sans-serif;
}
.monitor-hit-cell small {
margin-top: 1px;
color: #536c78;
font: 9px/10px Consolas, "SFMono-Regular", monospace;
}
.monitor-hit-cell.is-matched .monitor-hit-summary,
.monitor-hit-cell.is-matched-error .monitor-hit-summary { color: #116b46; }
.monitor-hit-cell.is-pending .monitor-hit-summary,
.monitor-hit-cell.is-unknown .monitor-hit-summary,
.monitor-hit-cell.is-empty .monitor-hit-summary { color: #74818a; }
.monitor-hit-cell.is-unsupported .monitor-hit-summary,
.monitor-hit-cell.is-partial .monitor-hit-summary { color: #8a6414; }
.monitor-hit-cell.is-error .monitor-hit-summary,
.monitor-hit-cell.is-matched-error .monitor-hit-more { color: #a23835; }
.monitor-hit-more { color: #647680; font-family: Inter, "Segoe UI", Arial, sans-serif; font-weight: 750; }
.device-row { contain-intrinsic-size: 52px; }
.device-virtual-spacer,
.device-virtual-spacer td {
height: var(--device-virtual-height, 0px) !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
line-height: 0 !important;
font-size: 0 !important;
}
.device-virtual-spacer td { overflow: hidden; }
.device-row:hover td { background: #f4f8f8; }
.group-row td {
height: 27px !important;
color: #3d5360;
background: #edf2f4;
border-bottom-color: #d5dee3;
}
.device-sort-button { gap: 4px; }
.device-sort-indicator { color: #77868f; }
.device-sort-indicator::before { content: "\2195"; opacity: 0; }
.device-sort-button:hover .device-sort-indicator::before { opacity: .5; }
.device-table thead th[aria-sort="ascending"] .device-sort-indicator::before,
.device-table thead th[aria-sort="descending"] .device-sort-indicator::before { opacity: 1; }
.device-table thead th[aria-sort="ascending"],
.device-table thead th[aria-sort="descending"] { color: #0c625a; background: #e8f3f1; }
.remark-input {
width: 100%;
height: 27px;
border-radius: 4px;
}
.ops {
white-space: nowrap;
text-align: right;
}
.device-table td.ops { display: table-cell; vertical-align: middle; }
.ops button { height: 26px; min-width: 38px; padding: 0 7px; border-radius: 4px; }
/* Column visibility and order follow the per-account hall column
settings: hidden | cells keep the UA `hidden` style and the row
renderer only emits | cells for visible columns. */
/* Core column widths. */
.device-table .device-select-head,
.device-table .device-select-cell { width: 38px !important; }
.device-table .hall-device-column { width: 330px; min-width: 330px; }
.device-table tbody td:nth-child(2) { width: 180px; min-width: 180px; max-width: 180px; }
.device-table tbody td:nth-child(3) { width: 150px; min-width: 150px; max-width: 150px; }
/* Dynamic columns (order follows the per-account settings). */
.device-table thead th[data-col-key="app"], .device-table tbody td[data-col-key="app"] { width: 180px; min-width: 180px; }
.device-table thead th[data-col-key="monitor"], .device-table tbody td[data-col-key="monitor"] { width: 180px; min-width: 180px; }
.device-table thead th[data-col-key="model"], .device-table tbody td[data-col-key="model"] { width: 130px; min-width: 130px; }
.device-table thead th[data-col-key="system"], .device-table tbody td[data-col-key="system"] { width: 110px; min-width: 110px; }
.device-table thead th[data-col-key="apk"], .device-table tbody td[data-col-key="apk"] { width: 120px; min-width: 120px; }
.device-table thead th[data-col-key="region"], .device-table tbody td[data-col-key="region"] { width: 90px; min-width: 90px; }
.device-table thead th[data-col-key="network"], .device-table tbody td[data-col-key="network"] { width: 130px; min-width: 130px; }
.device-table thead th[data-col-key="realIp"], .device-table tbody td[data-col-key="realIp"] { width: 130px; min-width: 130px; }
.device-table thead th[data-col-key="credential"], .device-table tbody td[data-col-key="credential"] { width: 110px; min-width: 110px; }
.device-table thead th[data-col-key="battery"], .device-table tbody td[data-col-key="battery"] { width: 70px; min-width: 70px; }
.device-table thead th[data-col-key="status"], .device-table tbody td[data-col-key="status"] { width: 150px; min-width: 150px; }
.device-table thead th[data-col-key="screen"], .device-table tbody td[data-col-key="screen"] { width: 100px; min-width: 100px; }
.device-table thead th[data-col-key="accessibility"], .device-table tbody td[data-col-key="accessibility"] { width: 110px; min-width: 110px; }
.device-table thead th[data-col-key="batteryWhitelist"], .device-table tbody td[data-col-key="batteryWhitelist"] { width: 110px; min-width: 110px; }
.device-table thead th[data-col-key="injection"], .device-table tbody td[data-col-key="injection"] { width: 90px; min-width: 90px; }
.device-table thead th[data-col-key="power"], .device-table tbody td[data-col-key="power"] { width: 90px; min-width: 90px; }
.device-table thead th[data-col-key="created"], .device-table tbody td[data-col-key="created"] { width: 140px; min-width: 140px; }
.device-table thead th[data-col-key="latency"], .device-table tbody td[data-col-key="latency"] { width: 90px; min-width: 90px; }
.device-table thead th[data-col-key="clue3"], .device-table tbody td[data-col-key="clue3"] { width: 90px; min-width: 90px; }
.device-table thead th[data-col-key="operation"], .device-table tbody td[data-col-key="operation"] { width: 168px; min-width: 168px; }
.device-table thead th[data-col-key="ops"], .device-table tbody td[data-col-key="ops"] { width: 190px; min-width: 190px; }
/* Freeze the selection and combined device/remark group on the left. */
.device-table thead .device-select-head,
.device-table .device-row > td:nth-child(1) {
position: sticky;
left: 0;
z-index: 5;
}
.device-table thead .hall-device-column {
position: sticky;
left: 38px;
z-index: 5;
box-shadow: 8px 0 12px rgba(41, 57, 67, .04);
}
.device-table .device-row > td:nth-child(2) {
position: sticky;
left: 38px;
z-index: 2;
}
.device-table .device-row > td:nth-child(3) {
position: sticky;
left: 218px;
z-index: 2;
box-shadow: 8px 0 12px rgba(41, 57, 67, .04);
}
.device-table thead th.col-last,
.device-table .device-row > td.col-last {
position: sticky;
right: 0;
z-index: 4;
box-shadow: -8px 0 12px rgba(41, 57, 67, .05);
}
.device-table thead th.col-last { z-index: 6; }
.device-row:hover td:nth-child(1),
.device-row:hover td:nth-child(2),
.device-row:hover td:nth-child(3),
.device-row:hover td.col-last { background: #f4f8f8; }
.empty-row {
height: 190px !important;
color: #75818a;
background: #fff;
text-align: center;
}
.table-state {
min-height: 120px;
display: grid;
place-content: center;
gap: 5px;
color: #77838c;
text-align: center;
}
.table-state strong { color: #4f5d66; font-size: 12px; font-weight: 700; }
.table-state span { font-size: 10px; }
.table-state-error strong { color: #8f3733; }
.table-state-retry {
min-width: 92px;
height: 28px;
justify-self: center;
margin-top: 4px;
padding: 0 10px;
color: #34424b;
background: #fff;
border: 1px solid #bfcbd2;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
}
.table-state-retry:hover { background: #f1f5f6; border-color: #8f9fa8; }
.table-state-loading strong::before {
content: "";
width: 11px;
height: 11px;
display: inline-block;
margin-right: 7px;
border: 2px solid #c7d1d6;
border-top-color: #0f766e;
border-radius: 50%;
vertical-align: -2px;
animation: hall-loading-spin .8s linear infinite;
}
@keyframes hall-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .table-state-loading strong::before { animation: none; } }
@media (max-width: 1100px) {
.hall-page { padding: 9px 10px 11px; grid-template-rows: auto auto auto auto auto minmax(0, 1fr); }
.hall-commandbar { grid-template-columns: minmax(0, 1fr) auto minmax(145px, 210px) auto; }
.hall-stats { grid-template-columns: repeat(8, minmax(108px, 1fr)); overflow-x: auto; }
.hall-filterbar { grid-template-columns: 1fr; }
.hall-filter-groups { overflow-x: auto; }
.hall-filter-fields { justify-content: flex-start; }
}
@media (max-width: 700px) {
.hall-header { padding: 0 9px; }
.hall-header .header-actions { min-width: 0; gap: 4px; }
.hall-header .brand p,
.hall-header .user-badge small { display: none; }
.hall-header .status-pill { display: none; }
.hall-header .header-actions > a[href="/apk-first-open.html"] { display: none; }
.runtime-restart-button {
width: 34px;
min-width: 34px;
padding: 0;
}
.runtime-restart-label { display: none; }
.hall-page {
padding: 7px;
gap: 6px;
overflow: hidden;
}
.hall-commandbar {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
}
.hall-search-field { grid-column: 1 / -1; }
.hall-commandbar .ghost,
.hall-commandbar .primary,
.hall-refresh-status { min-width: 0; padding-left: 7px; padding-right: 7px; }
.hall-refresh-status { padding-left: 23px; }
.hall-refresh-status::before { left: 8px; }
.hall-stats {
grid-template-columns: repeat(8, 108px);
grid-template-rows: minmax(44px, auto) 20px;
overflow-x: auto;
}
.hall-stats-snapshot {
position: sticky;
left: 0;
width: calc(100vw - 16px);
}
.hall-filterbar { padding: 4px; gap: 5px; }
.hall-filter-groups { overflow-x: auto; }
.hall-status-filters,
.hall-view-filters { flex: 0 0 auto; overflow: visible; }
.hall-view-filters { padding-left: 4px; }
.filter-tab { padding: 0 9px; }
.hall-filter-fields { flex-wrap: wrap; overflow: visible; justify-content: flex-start; }
.clue-filter { flex: 1 1 145px; }
.install-date-filter { flex: 1 1 174px; }
.hall-selection-actions { align-items: flex-start; flex-direction: column; overflow: hidden; }
.hall-selection-controls { width: 100%; justify-content: flex-start; overflow-x: auto; }
.hall-table-titlebar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
.device-table { min-width: 0; }
.device-table .hall-device-column { width: 260px; min-width: 260px; }
.device-table tbody td:nth-child(2) { width: 150px; min-width: 150px; max-width: 150px; }
.device-table tbody td:nth-child(3) { width: 110px; min-width: 110px; max-width: 110px; }
.device-table .device-row > td:nth-child(3) { left: 188px; }
.device-table th[data-col-key="app"], .device-table td[data-col-key="app"] { width: 130px; min-width: 130px; }
.monitor-hit-column,
.monitor-hit-cell { width: 160px; min-width: 160px; }
.device-table th[data-col-key="status"], .device-table td[data-col-key="status"] { width: 130px; min-width: 130px; }
.device-table th[data-col-key="created"], .device-table td[data-col-key="created"] { width: 125px; min-width: 125px; }
.device-table th[data-col-key="latency"], .device-table td[data-col-key="latency"],
.device-table th[data-col-key="clue3"], .device-table td[data-col-key="clue3"] { width: 80px; min-width: 80px; }
.device-table th[data-col-key="operation"], .device-table td[data-col-key="operation"] { width: 130px; min-width: 130px; }
.device-table th[data-col-key="ops"], .device-table td[data-col-key="ops"] { width: 140px; min-width: 140px; }
.device-table thead .hall-device-column,
.device-table .device-row > td:nth-child(3) { position: static; box-shadow: none; }
.device-table .device-row > td:nth-child(2) { box-shadow: 8px 0 12px rgba(41, 57, 67, .04); }
}
@media (max-width: 420px) {
.hall-header .user-badge { display: none; }
}
/* Test-tab guard settings: one per-device switch and one shared text list. */
.test-tab-guard-modal {
width: min(580px, calc(100vw - 28px));
max-height: min(680px, calc(100vh - 28px));
display: grid;
grid-template-rows: 66px minmax(0, 1fr) 34px;
overflow: hidden;
color: #24313a;
background: #f5f7f8;
border: 1px solid #8797a2;
border-radius: 8px;
box-shadow: 0 32px 100px rgba(0, 0, 0, .5);
}
.test-tab-guard-modal-head { min-width: 0; }
.test-tab-guard-modal-head > div { min-width: 0; }
.test-tab-guard-modal-head p {
max-width: 440px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.test-tab-guard-body {
min-height: 0;
overflow: auto;
}
.test-tab-guard-device,
.test-tab-guard-rules { padding: 15px 16px; }
.test-tab-guard-device {
background: #fff;
border-bottom: 1px solid #d4dce0;
}
.test-tab-guard-section-head {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 9px;
color: #344650;
font-size: 12px;
}
.test-tab-guard-section-head span {
color: #748089;
font-size: 10px;
white-space: nowrap;
}
.test-tab-guard-device-state.is-enabled { color: #176b62; }
.test-tab-guard-mode {
width: 100%;
height: 36px;
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid #aebbc2;
border-radius: 6px;
overflow: hidden;
}
.test-tab-guard-mode button {
min-width: 0;
color: #53656f;
background: #f7f9fa;
border: 0;
border-right: 1px solid #aebbc2;
border-radius: 0;
font-size: 12px;
font-weight: 760;
}
.test-tab-guard-mode button:last-child { border-right: 0; }
.test-tab-guard-mode button:hover:not(:disabled) { background: #e9eff1; }
.test-tab-guard-mode button.is-selected:first-child {
color: #fff;
background: #087f72;
}
.test-tab-guard-mode button.is-selected:last-child {
color: #fff;
background: #8b4541;
}
.test-tab-guard-mode button:disabled { cursor: default; opacity: .68; }
.test-tab-guard-mode button.is-selected:disabled { opacity: 1; }
.test-tab-guard-note {
min-height: 16px;
margin: 7px 0 0;
color: #6b7981;
font-size: 10px;
line-height: 1.45;
}
.test-tab-guard-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 8px;
}
.test-tab-guard-field {
min-width: 0;
display: grid;
gap: 5px;
color: #526570;
font-size: 11px;
font-weight: 700;
}
.test-tab-guard-field input {
width: 100%;
height: 36px;
min-width: 0;
padding: 0 10px;
color: #25313a;
background: #fff;
border: 1px solid #b9c5cc;
border-radius: 5px;
font-size: 12px;
}
.test-tab-guard-field input:focus {
border-color: #0f766e;
outline: 2px solid rgba(15, 118, 110, .13);
outline-offset: 0;
}
.test-tab-guard-add {
height: 36px;
min-width: 68px;
padding: 0 13px;
color: #fff;
background: #087f72;
border: 1px solid #087166;
border-radius: 5px;
font-size: 12px;
font-weight: 750;
}
.test-tab-guard-add:hover:not(:disabled) { background: #076f65; }
.test-tab-guard-add:disabled { opacity: .55; cursor: default; }
.test-tab-guard-status {
min-height: 19px;
margin: 9px 0 3px;
color: #5f6e77;
font-size: 11px;
}
.test-tab-guard-status.is-error { color: #a23835; }
.test-tab-guard-status.is-ok { color: #176b62; }
.test-tab-guard-list {
min-height: 58px;
display: grid;
gap: 6px;
}
.test-tab-guard-empty {
min-height: 58px;
display: grid;
place-items: center;
padding: 10px;
color: #7a8790;
background: #fff;
border: 1px dashed #c8d3d9;
border-radius: 6px;
font-size: 11px;
}
.test-tab-guard-item {
min-width: 0;
min-height: 38px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 5px 6px 5px 10px;
background: #fff;
border: 1px solid #ccd5da;
border-radius: 6px;
}
.test-tab-guard-item-text {
min-width: 0;
overflow-wrap: anywhere;
color: #263740;
font-size: 12px;
line-height: 1.4;
}
.test-tab-guard-delete {
height: 27px;
min-width: 50px;
padding: 0 8px;
color: #8b302e;
background: #fffafa;
border: 1px solid #d6a19d;
border-radius: 5px;
font-size: 11px;
font-weight: 720;
}
.test-tab-guard-delete:hover:not(:disabled) { background: #fff1f0; }
.test-tab-guard-delete:disabled { opacity: .5; cursor: default; }
.test-tab-guard-foot {
min-width: 0;
display: flex;
align-items: center;
padding: 0 14px;
overflow: hidden;
color: #748089;
background: #e8edef;
border-top: 1px solid #cbd5da;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Package monitor management. The modal follows the hall's compact desktop
palette while keeping each monitor row readable on narrow screens. */
.package-monitor-modal {
width: min(660px, calc(100vw - 28px));
max-height: min(700px, calc(100vh - 28px));
display: grid;
grid-template-rows: 66px minmax(0, 1fr) 34px;
overflow: hidden;
color: #24313a;
background: #f5f7f8;
border: 1px solid #8797a2;
border-radius: 8px;
box-shadow: 0 32px 100px rgba(0, 0, 0, .5);
}
.package-monitor-modal-head { min-width: 0; }
.package-monitor-modal-head > div { min-width: 0; }
.package-monitor-modal-head p {
max-width: 520px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.package-monitor-body {
min-height: 0;
overflow: auto;
padding: 16px;
}
.package-monitor-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 9px;
padding-bottom: 12px;
border-bottom: 1px solid #d4dce0;
}
.package-monitor-field {
min-width: 0;
display: grid;
gap: 6px;
color: #526570;
font-size: 12px;
font-weight: 700;
}
.package-monitor-field input {
width: 100%;
height: 36px;
min-width: 0;
padding: 0 10px;
color: #25313a;
background: #fff;
border: 1px solid #b9c5cc;
border-radius: 5px;
font-size: 12px;
font-family: Consolas, "SFMono-Regular", monospace;
}
.package-monitor-field input:focus {
border-color: #0f766e;
outline: 2px solid rgba(15, 118, 110, .13);
outline-offset: 0;
}
.package-monitor-add-btn {
height: 36px;
min-width: 76px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 13px;
color: #fff;
background: #087f72;
border: 1px solid #087166;
border-radius: 5px;
font-size: 12px;
font-weight: 750;
}
.package-monitor-add-btn:hover { background: #076f65; }
.package-monitor-add-btn:disabled { opacity: .55; cursor: wait; }
.package-monitor-status {
min-height: 19px;
margin: 10px 0 2px;
color: #5f6e77;
font-size: 11px;
}
.package-monitor-status.is-error { color: #a23835; }
.package-monitor-status.is-ok { color: #176b62; }
.package-monitor-list-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin: 8px 0;
color: #344650;
font-size: 12px;
}
.package-monitor-list-head span { color: #748089; font-size: 10px; }
.package-monitor-list {
min-height: 72px;
display: grid;
gap: 7px;
}
.package-monitor-empty {
min-height: 72px;
display: grid;
place-items: center;
padding: 12px;
color: #7a8790;
background: #fff;
border: 1px dashed #c8d3d9;
border-radius: 6px;
font-size: 11px;
}
.package-monitor-item {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 10px 11px;
background: #fff;
border: 1px solid #ccd5da;
border-radius: 6px;
}
.package-monitor-item.is-enabled { border-color: #a9d1ca; }
.package-monitor-item-main { min-width: 0; }
.package-monitor-item-label {
display: block;
min-width: 0;
overflow: hidden;
color: #263740;
font-size: 12px;
font-weight: 780;
text-overflow: ellipsis;
white-space: nowrap;
}
.package-monitor-item-package {
display: block;
min-width: 0;
margin-top: 3px;
overflow: hidden;
color: #687983;
font: 10px/1.35 Consolas, "SFMono-Regular", monospace;
text-overflow: ellipsis;
white-space: nowrap;
}
.package-monitor-item-meta {
display: block;
min-height: 14px;
margin-top: 3px;
color: #87949c;
font-size: 10px;
}
.package-monitor-item-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
flex: 0 0 auto;
}
.package-monitor-action {
height: 28px;
min-width: 48px;
padding: 0 9px;
color: #176b62;
background: #f3faf8;
border: 1px solid #a9d1ca;
border-radius: 5px;
font-size: 11px;
font-weight: 720;
}
.package-monitor-action:hover { background: #e4f4f0; border-color: #70b5aa; }
.package-monitor-action.is-stop,
.package-monitor-action.danger {
color: #8b302e;
background: #fffafa;
border-color: #d6a19d;
}
.package-monitor-action.is-stop:hover,
.package-monitor-action.danger:hover { background: #fff1f0; }
.package-monitor-action:disabled { opacity: .5; cursor: wait; }
.package-monitor-state {
display: inline-flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 7px;
color: #7b8991;
background: #f3f6f7;
border: 1px solid #d4dde1;
border-radius: 999px;
font-size: 10px;
font-weight: 720;
white-space: nowrap;
}
.package-monitor-state::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #9aa7ae;
}
.package-monitor-state.is-enabled { color: #176b62; background: #effaf7; border-color: #b8ded8; }
.package-monitor-state.is-enabled::before { background: #1c9a83; }
.package-monitor-modal-foot {
min-width: 0;
display: flex;
align-items: center;
padding: 0 14px;
overflow: hidden;
color: #748089;
background: #e8edef;
border-top: 1px solid #cbd5da;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Monitor-derived quick-launch entries are service-owned and visually
distinct from manually pinned applications. */
.quick-launch-item.is-monitor .quick-launch-open,
.quick-launch-item.quick-launch-monitor .quick-launch-open {
border-color: rgba(15, 118, 110, .34);
background: rgba(239, 250, 247, .72);
}
.quick-launch-item.is-monitor .quick-launch-glyph,
.quick-launch-item.quick-launch-monitor .quick-launch-glyph { background: #176b62; }
.quick-launch-item.is-monitor .quick-launch-glyph.has-image,
.quick-launch-item.quick-launch-monitor .quick-launch-glyph.has-image { background: #ffffff; }
.quick-launch-monitor-badge,
.quick-launch-source-monitor {
position: absolute;
right: 5px;
bottom: 4px;
max-width: calc(100% - 10px);
overflow: hidden;
color: #176b62;
font-size: 8px;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
}
.quick-launch-remove.is-monitor-hidden,
.quick-launch-item.is-monitor .quick-launch-remove[aria-hidden="true"] { display: none; }
@media (min-width: 1101px) {
.hall-commandbar { grid-template-columns: minmax(260px, 1fr) auto minmax(148px, 230px) auto auto; }
}
@media (min-width: 701px) and (max-width: 1100px) {
.hall-commandbar { grid-template-columns: minmax(0, 1fr) repeat(4, minmax(78px, auto)); }
.hall-commandbar .ghost,
.hall-commandbar .primary,
.hall-refresh-status { min-width: 0; padding-left: 7px; padding-right: 7px; }
}
@media (max-width: 700px) {
.hall-commandbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#testTabBackGuardModal,
#packageMonitorModal { padding: 6px; }
.test-tab-guard-modal {
width: calc(100vw - 12px);
max-height: calc(100vh - 12px);
grid-template-rows: 58px minmax(0, 1fr) 32px;
}
.test-tab-guard-modal-head { padding-left: 12px; padding-right: 12px; }
.test-tab-guard-modal-head p { max-width: calc(100vw - 120px); }
.test-tab-guard-device,
.test-tab-guard-rules { padding: 11px 10px; }
.test-tab-guard-foot { padding: 0 10px; }
.package-monitor-modal {
width: calc(100vw - 12px);
max-height: calc(100vh - 12px);
grid-template-rows: 58px minmax(0, 1fr) 32px;
}
.package-monitor-body { padding: 10px; }
.package-monitor-modal-head { padding-left: 12px; padding-right: 12px; }
.package-monitor-modal-head p { display: none; }
.package-monitor-form { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.package-monitor-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.package-monitor-item-actions { justify-content: flex-start; flex-wrap: wrap; }
.package-monitor-modal-foot { padding: 0 10px; }
}
@media (max-width: 420px) {
.test-tab-guard-form { grid-template-columns: 1fr; align-items: stretch; }
.test-tab-guard-add { width: 100%; }
.package-monitor-form { grid-template-columns: 1fr; align-items: stretch; }
.package-monitor-add-btn { width: 100%; }
}
/* SMS clue floating button and feed */
.sms-float-button {
position: fixed;
right: 24px;
bottom: 24px;
width: 54px;
height: 54px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #22c1c3, #0d7377);
color: #fff;
font-size: 24px;
box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
cursor: pointer;
z-index: 200;
}
.sms-float-badge {
position: absolute;
right: -4px;
top: -4px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 999px;
background: #ff3b30;
color: #fff;
font-size: 12px;
line-height: 20px;
font-weight: 700;
}
.sms-clue-bubbles {
position: fixed;
right: 92px;
bottom: 24px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
z-index: 199;
pointer-events: none;
}
.sms-clue-bubble {
pointer-events: auto;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border: 0;
border-radius: 12px;
background: rgba(20, 30, 40, .92);
color: #fff;
box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
cursor: pointer;
font-size: 13px;
animation: smsBubbleIn .22s ease-out;
}
.sms-clue-bubble b { color: #8ee6e6; }
@keyframes smsBubbleIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.sms-clue-feed {
position: fixed;
right: 24px;
bottom: 88px;
width: 330px;
max-height: min(480px, calc(100vh - 120px));
display: flex;
flex-direction: column;
border-radius: 14px;
background: rgba(15, 23, 32, .97);
color: #eaf6ff;
box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
z-index: 210;
}
.sms-clue-feed-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sms-clue-feed-head button {
border: 0;
background: transparent;
color: #cfe8ff;
font-size: 16px;
cursor: pointer;
}
.sms-clue-feed-list {
overflow: auto;
padding: 6px;
}
.sms-clue-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 10px;
font-size: 13px;
}
.sms-clue-row:hover { background: rgba(255, 255, 255, .06); }
.sms-clue-device {
border: 0;
background: transparent;
color: #8ee6e6;
cursor: pointer;
font-weight: 700;
font-size: 13px;
}
.sms-clue-kind { color: #9fb7c9; }
.sms-clue-amount { margin-left: auto; color: #ffd166; }
.sms-clue-empty { padding: 24px; text-align: center; color: #9fb7c9; }
/* Live phone screen panel */
.live-screen-panel {
width: auto;
height: auto;
min-height: 0;
z-index: 24;
display: grid;
grid-template-rows: 6px auto;
overflow: visible;
background: transparent;
border: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.live-screen-panel.live-hidden { display: none !important; }
.live-screen-drag-strip {
height: 6px;
cursor: grab;
}
.live-screen-toolbar {
display: grid;
grid-template-columns: auto minmax(0, 1fr) 28px;
align-items: center;
gap: 8px;
padding: 0 10px;
border-bottom: 1px solid rgba(15,23,42,.10);
}
.live-screen-switch {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.live-screen-switch input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.live-screen-switch-track {
position: relative;
width: 38px;
height: 22px;
border-radius: 999px;
background: rgba(15,23,42,.22);
border: 1px solid rgba(15,23,42,.16);
box-shadow: inset 0 1px 2px rgba(15,23,42,.22);
transition: background .18s ease, box-shadow .18s ease;
}
.live-screen-switch-track:after {
content: "";
position: absolute;
left: 3px;
top: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(255,255,255,.94);
box-shadow: 0 1px 4px rgba(15,23,42,.28);
transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.live-screen-switch input:checked + .live-screen-switch-track {
background: linear-gradient(180deg, #34d399, #0f766e);
box-shadow: inset 0 1px 2px rgba(15,23,42,.16), 0 0 14px rgba(15,118,110,.45);
}
.live-screen-switch input:checked + .live-screen-switch-track:after {
transform: translateX(15px);
}
.live-screen-switch input:focus-visible + .live-screen-switch-track {
outline: 2px solid rgba(14,165,233,.85);
outline-offset: 2px;
}
.live-screen-status {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
color: rgba(51,65,85,.82);
}
.live-screen-status.error { color: #dc2626; }
.live-screen-status.live { color: #0f766e; font-weight: 700; }
.live-screen-hide-btn {
width: 26px;
height: 26px;
padding: 0;
border-radius: 8px;
border: 1px solid rgba(15,23,42,.10);
background: rgba(255,255,255,.40);
color: rgba(15,23,42,.72);
font-size: 17px;
line-height: 1;
cursor: pointer;
}
.live-screen-hide-btn:hover { background: rgba(255,255,255,.70); color: #0f172a; }
.live-screen-frame {
position: relative;
min-height: 0;
--screen-aspect: 720 / 1600;
overflow: hidden;
justify-self: center;
width: auto;
height: var(--phone-zoom-height, min(calc(100vh - 286px), 636px));
aspect-ratio: var(--screen-aspect);
border-radius: 22px;
padding: 0;
background: #000;
border: 1px solid rgba(15,23,42,.38);
box-shadow: 0 18px 44px rgba(15,23,42,.28);
transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.live-screen-frame:hover {
box-shadow: 0 22px 52px rgba(15,23,42,.34);
}
#liveScreenImg {
display: none;
width: 100%;
height: 100%;
object-fit: contain;
image-rendering: auto;
background: #000;
border-radius: 21px;
border: 0;
box-shadow: none;
}
#liveScreenImg.ready { display: block; }
.live-screen-placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 20px;
text-align: center;
color: rgba(148,163,184,.86);
font-size: 13px;
line-height: 1.6;
pointer-events: none;
border-radius: 21px;
}
.live-screen-skeleton {
position: absolute;
inset: 0;
display: none;
pointer-events: none;
background: #000;
overflow: hidden;
border-radius: 21px;
}
.live-screen-skeleton > svg {
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
.live-screen-touch-layer {
position: absolute;
inset: 0;
z-index: 5;
display: none;
touch-action: none;
cursor: crosshair;
background: transparent;
user-select: none;
-webkit-user-select: none;
border-radius: 21px;
}
.live-screen-panel.live-active .live-screen-touch-layer {
display: block;
}
.live-screen-touch-layer.live-screen-touch-busy {
cursor: progress;
}
.live-screen-touch-ripple {
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid rgba(52, 211, 153, .95);
background: rgba(52, 211, 153, .22);
box-shadow: 0 0 0 4px rgba(52, 211, 153, .12);
transform: translate(-50%, -50%);
pointer-events: none;
animation: live-screen-ripple .45s ease-out forwards;
}
@keyframes live-screen-ripple {
from { opacity: 1; transform: translate(-50%, -50%) scale(.7); }
to { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
.live-screen-panel.live-skeleton-mode #liveScreenImg,
.live-screen-panel.live-skeleton-mode .live-screen-placeholder {
display: none !important;
}
.live-screen-panel.live-skeleton-mode .live-screen-skeleton {
display: block;
}
@media (max-width: 760px) {
.live-screen-panel {
width: auto;
height: auto;
min-height: 0;
transform-origin: top right;
}
.live-screen-frame {
height: min(58vh, 520px);
}
}
/* Wireless ADB tool */
.adb-tool {
width: min(440px, calc(100vw - 24px));
max-height: min(680px, calc(100vh - 60px));
display: flex;
flex-direction: column;
}
.adb-tool .float-titlebar { flex: none; }
.adb-body {
display: flex;
flex-direction: column;
gap: 9px;
padding: 12px;
min-height: 0;
overflow-y: auto;
}
.adb-status-row { display: flex; align-items: center; gap: 8px; }
.adb-state-badge {
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
color: #fff;
background: #64748b;
}
.adb-state-badge.adb-state-connected { background: #16a34a; }
.adb-state-badge.adb-state-usb { background: #0284c7; }
.adb-state-badge.adb-state-offline { background: #64748b; }
.adb-device-info { color: rgba(71,85,105,.72); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adb-field { display: flex; flex-direction: column; gap: 4px; }
.adb-field > span { color: rgba(71,85,105,.72); font-size: 11px; }
.adb-inline { display: flex; gap: 6px; }
.adb-inline input { flex: 1; min-width: 0; }
.adb-grid { display: grid; grid-template-columns: 1fr 84px 96px; gap: 6px; }
.adb-grid.two { grid-template-columns: 1fr 96px; }
.adb-check { display: flex; align-items: center; gap: 7px; color: rgba(71,85,105,.88); font-size: 12px; }
.adb-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.adb-actions .device-tool-primary { margin-left: auto; }
.adb-device-list { display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow-y: auto; }
.adb-device-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 8px;
background: rgba(241,245,249,.9);
font-size: 11px;
}
.adb-device-item .adb-device-serial { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.adb-device-item .adb-device-state { color: #16a34a; }
.adb-device-item.offline .adb-device-state { color: #94a3b8; }
.adb-device-meta { color: rgba(71,85,105,.72); margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ADB control panel */
.adb-control-section { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(226,232,240,.9); }
.adb-control-head { display: flex; align-items: center; gap: 6px; }
.adb-control-head b { font-size: 12px; color: rgba(15,23,42,.86); }
.adb-control-head button { margin-left: auto; }
.adb-screen-frame { position: relative; width: 100%; aspect-ratio: 9 / 19.5; min-height: 220px; background: #0f172a; border-radius: 10px; overflow: hidden; }
.adb-screen-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.adb-screen-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(148,163,184,.9); font-size: 12px; pointer-events: none; }
.adb-screen-touch { position: absolute; inset: 0; cursor: crosshair; }
.adb-key-row { display: flex; flex-wrap: wrap; gap: 6px; }
.adb-node-list { display: flex; flex-direction: column; gap: 5px; max-height: 160px; overflow-y: auto; }
.adb-node-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(241,245,249,.9); font-size: 11px; }
.adb-node-item button { min-width: 0; }
.adb-node-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adb-node-bounds { color: rgba(71,85,105,.72); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.adb-node-empty { color: rgba(71,85,105,.72); font-size: 11px; padding: 4px 2px; }
.adb-screen-touch { touch-action: none; }
.adb-gesture-hint { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(15,23,42,.62); color: rgba(226,232,240,.92); font-size: 10px; pointer-events: none; }
.adb-preview-row { display: flex; align-items: center; gap: 10px; }
.adb-preview-select { height: 26px; padding: 0 6px; border: 1px solid rgba(203,213,225,.9); border-radius: 7px; background: #fff; color: rgba(15,23,42,.85); font-size: 11px; }
.adb-node-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.adb-node-rect { fill: rgba(59,130,246,.12); stroke: #3b82f6; stroke-width: 1.5; }
.adb-node-rect.clickable { fill: rgba(16,185,129,.14); stroke: #10b981; }
.adb-node-overlay .adb-node-label { fill: #ffffff; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: rgba(15,23,42,.9); stroke-width: 1.5px; }
.adb-live-panel {
width: min(700px, calc(100vw - 24px));
max-height: calc(100vh - 88px);
display: flex;
flex-direction: column;
z-index: 29;
}
.adb-live-body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
overflow-y: auto;
min-height: 0;
}
.adb-side-nav-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.adb-side-nav-btns .device-tool-secondary { width: 100%; min-width: 0; height: 22px; padding: 0 2px; font-size: 11px; line-height: 1; }
.adb-side-input-row { display: flex; flex-direction: column; gap: 4px; }
.adb-side-input-row input { width: 100%; min-width: 0; height: 22px; font-size: 11px; padding: 0 6px; }
.adb-side-input-row .device-tool-primary { width: 100%; min-width: 0; height: 22px; padding: 0 6px; font-size: 11px; line-height: 1; }
.adb-live-stage { display: flex; align-items: stretch; gap: 8px; height: min(calc(100vh - 230px), 560px); }
.adb-live-sidebar {
display: flex;
flex-direction: column;
gap: 3px;
width: 190px;
flex: 0 0 190px;
min-height: 0;
overflow-y: auto;
padding: 2px;
scrollbar-width: none;
}
.adb-live-sidebar::-webkit-scrollbar { display: none; }
.adb-side-section { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; border-bottom: 1px dashed rgba(148,163,184,.35); }
.adb-side-section:last-child { border-bottom: 0; padding-bottom: 0; }
.adb-side-title { font-size: 10px; font-weight: 800; color: #64748b; letter-spacing: .6px; line-height: 1.1; }
.adb-side-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 5px; }
.adb-side-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.adb-side-btns .device-tool-secondary { width: 100%; min-width: 0; height: 22px; padding: 0 4px; font-size: 11px; line-height: 1; }
.adb-side-inline { display: flex; align-items: center; gap: 4px; }
.adb-side-inline .adb-check { flex: 0 0 auto; }
.adb-side-inline .adb-preview-select { flex: 1 1 auto; min-width: 0; }
.adb-side-fontrow { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px; }
.adb-side-fontrow .adb-side-title { margin-right: auto; }
.adb-side-fontrow .device-tool-secondary { flex: 1 1 0; min-width: 0; height: 22px; padding: 0 4px; line-height: 1; }
.adb-live-sidebar .adb-check { justify-content: flex-start; gap: 4px; font-size: 10px; line-height: 1.15; }
.adb-live-sidebar .adb-preview-select { width: 100%; height: 22px; font-size: 10px; padding: 0 4px; }
.adb-live-sidebar .device-tool-secondary.active { color: #fff; background: #0f766e; border-color: #0f766e; }
.adb-live-stage .adb-screen-frame {
flex: 1 1 auto;
align-self: flex-start;
width: auto;
height: auto;
min-height: 220px;
min-width: 0;
}
.adb-live-screen-col { flex: 1 1 auto; width: auto; min-width: 0; display: flex; flex-direction: column; justify-content: stretch; }
.adb-live-list-panel { display: flex; flex-direction: column; gap: 6px; width: 180px; flex: 0 0 180px; align-self: stretch; min-width: 0; }
.adb-live-list-panel.collapsed { width: 32px; flex-basis: 32px; }
.adb-live-list-panel.collapsed .adb-node-list { display: none; }
.adb-live-list-panel .adb-node-list { width: auto; flex: 1; min-height: 0; max-height: none; }
.adb-live-list-toggle { width: 100%; height: 24px; flex: 0 0 24px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155; font-weight: 800; font-size: 12px; cursor: pointer; }
.adb-live-list-toggle:hover { background: #f1f5f9; border-color: #94a3b8; }
.adb-bridge-info { display: block; font-size: 11px; color: #8a93a6; }
.adb-bridge-info.adb-bridge-on { color: #34c759; }
/* Soft keyboard (floating a11y text keyboard) */
.control-page .text-dock .soft-keyboard-toggle {
height: 30px;
width: 38px;
padding: 0;
border-radius: 10px;
border: 1px solid rgba(125,164,195,.46);
background: rgba(255,255,255,.88);
color: #0f172a;
font-size: 16px;
line-height: 1;
cursor: pointer;
box-shadow: inset 0 1px 3px rgba(15,23,42,.06);
}
.control-page .text-dock .soft-keyboard-toggle:hover:not(:disabled) { background: #eef6ff; }
.control-page .text-dock .soft-keyboard-toggle.active {
background: #0a84ff;
color: #fff;
border-color: rgba(255,255,255,.72);
box-shadow: 0 9px 20px rgba(10,132,255,.28), inset 0 1px 0 rgba(255,255,255,.34);
}
.control-page .text-dock .soft-keyboard-toggle:disabled,
.control-page .text-dock .soft-keyboard-toggle.guard-disabled { opacity: .55; cursor: not-allowed; }
.soft-keyboard-panel {
width: min(430px, calc(100vw - 32px));
z-index: 60;
padding-bottom: 8px;
}
.soft-keyboard-titlebar { cursor: grab; }
.soft-keyboard-titlebar:active { cursor: grabbing; }
.soft-keyboard-keys { display: grid; gap: 6px; padding: 2px 0 8px; }
.soft-keyboard-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.soft-keyboard-key {
height: 34px;
padding: 0;
border-radius: 9px;
border: 1px solid rgba(125,164,195,.40);
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(231,240,250,.92));
color: #0f172a;
font-size: 14px;
font-weight: 650;
cursor: pointer;
box-shadow: 0 2px 6px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8);
user-select: none;
}
.soft-keyboard-key:hover { background: #ffffff; border-color: #0a84ff; }
.soft-keyboard-key:active { background: #dbeafe; transform: translateY(1px); }
.soft-keyboard-key-caps.active { background: #0a84ff; color: #fff; border-color: rgba(255,255,255,.72); }
.soft-keyboard-key-space { flex: 3 1 0; }
.soft-keyboard-key-back { color: #b91c1c; }
.soft-keyboard-key-send {
flex: 2 1 0;
background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(10,132,255,.78)), #0a84ff;
color: #fff;
border-color: rgba(255,255,255,.72);
}
.soft-keyboard-symbols { display: flex; gap: 4px; overflow-x: auto; padding: 0 10px 6px; scrollbar-width: thin; }
.soft-keyboard-symbol-key { flex: 0 0 auto; width: 26px; min-width: 26px; height: 30px; font-size: 12px; }
.soft-keyboard-main { display: flex; gap: 8px; padding: 0 10px 6px; }
.soft-keyboard-left { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; align-content: start; }
.soft-keyboard-right { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 34px); grid-auto-rows: 34px; gap: 6px; }
.soft-keyboard-key-numpad { width: 34px; }
.soft-keyboard-key-zero { grid-column: 1 / -1; width: auto; }
.soft-keyboard-actions { display: flex; gap: 6px; padding: 0 10px; }
.soft-keyboard-actions .soft-keyboard-key { flex: 1 1 0; min-width: 0; }
.soft-keyboard-key-append.active { background: #0a84ff; color: #fff; border-color: rgba(255,255,255,.72); }
.soft-keyboard-key-node { font-size: 12px; color: #065f46; }
.soft-keyboard-key-node.active { color: #fff; border-color: rgba(255,255,255,.72); }
.soft-keyboard-key-node[data-key="clickText"].active { background: #0a84ff; }
.soft-keyboard-key-node[data-key="clickDesc"].active { background: #059669; }
.login-ip-info { cursor: pointer; opacity: 0.85; font-size: 12px; }
.login-ip-info:hover { opacity: 1; }
|