:root {
    --global-page-background-solid: #070d15;
    --global-page-background:
        radial-gradient(circle at 14% 0%, rgba(88, 171, 255, 0.16) 0%, rgba(10, 16, 25, 0) 44%),
        radial-gradient(circle at 90% 4%, rgba(31, 109, 186, 0.2) 0%, rgba(10, 16, 25, 0) 42%),
        linear-gradient(180deg, #0d1420 0%, #0a111b 100%);
    --main-bg-color: hsl(0, 0%, 100%);
    --stream-bg-color: hsl(0, 0%, 85%);
    --shell-bg-color: hsl(0, 0%, 0%);
    --text-shadow-color: hsl(218, 67%, 95%);
    --header-bg-color: hsl(0, 0%, 95%);
    --controls-bg-color: hsla(0, 0%, 95%, 0.8);
    --control-buttons-bg-color: hsl(0, 0%, 95%);
    --text-color: hsl(210, 16%, 22%);
    --text-color-light: hsl(200, 16%, 52%);
    --link-color: hsl(218, 85%, 43%);
    --link-color-light: hsl(218, 85%, 73%);
    --link-color_visited: hsl(271, 68%, 32%);
    --link-color_visited-light: hsl(271, 68%, 72%);
    --svg-checkbox-bg-color: hsl(172, 100%, 37%);
    --svg-button-fill: hsl(199, 17%, 46%);
    --kill-button-hover-color: hsl(342, 100%, 37%);
    --url-color: hsl(0, 0%, 60%);
    --button-text-color: hsl(214, 82%, 51%);
    --button-border-color: hsl(0, 0%, 70%);
    --progress-background-color: hsla(225, 100%, 50%, 0.2);
    --progress-background-error-color: hsla(0, 100%, 50%, 0.2);
    --font-size: 14px;
    --side-control-bar-size: 3.6rem;
    --side-control-bar-padding: .4rem;
    --side-control-button-size: 2.45rem;
    --side-control-button-gap: .28rem;
    --side-control-icon-size: 1.214rem;
    --side-control-button-radius: .45rem;
    --side-control-bar-background: linear-gradient(180deg, #171b27 0%, #111722 100%);
    --side-control-hover-border-color: rgba(130, 181, 225, .28);
    --side-control-hover-background: rgba(53, 72, 94, .48);
}

@media (prefers-color-scheme: dark) {
    :root {
        --main-bg-color: hsl(0, 0%, 14%);
        --stream-bg-color: hsl(0, 0%, 20%);
        --shell-bg-color: hsl(0, 0%, 0%);
        --text-shadow-color: hsl(218, 17%, 18%);
        --header-bg-color: hsl(0, 0%, 20%);
        --controls-bg-color: hsla(201, 18%, 19%, 0.8);
        --control-buttons-bg-color: hsl(201, 18%, 19%);
        --text-color: hsl(0, 0%, 90%);
        --text-color-light: hsl(0, 0%, 60%);
        --link-color: hsl(218, 63%, 70%);
        --link-color-light: hsl(218, 63%, 50%);
        --link-color_visited: hsl(267, 31%, 47%);
        --link-color_visited-light: hsl(267, 31%, 27%);
        --svg-checkbox-bg-color: hsl(172, 100%, 27%);
        --svg-button-fill: hsl(0, 0%, 100%);
        --kill-button-hover-color: hsl(342, 100%, 27%);
        --url-color: hsl(0, 0%, 60%);
        --device-list-stripe-color: hsl(0, 0%, 16%);
        --device-list-default-color: hsl(0, 0%, 14%);
        --button-text-color: hsl(214, 82%, 76%);
        --button-border-color: hsl(213, 5%, 39%);
        --progress-background-color: hsla(225, 100%, 50%, 0.2);
        --progress-background-error-color: hsla(0, 100%, 50%, 0.2);
    }
}

html {
    font-size: var(--font-size);
}

a {
    color: var(--link-color);
}

a:visited {
    color: var(--link-color_visited);
}

body {
    color: var(--text-color);
    background-color: var(--global-page-background-solid);
    background: var(--global-page-background);
    position: absolute;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}


body.shell {
    background-color: var(--global-page-background-solid);
    background: var(--global-page-background);
}

body.stream {
    background-color: var(--global-page-background-solid);
    background: var(--global-page-background);
}

.terminal-container {
    width: 100%;
    height: 100%;
    padding: 5px;
}

:focus {
    outline: none;
}

.flex-center {
    display: flex;
    align-items: center;
}

.wait {
    cursor: wait;
}

.device-view {
    z-index: 1;
    float: right;
    display: inline-block;
}

.video-layer {
    position: absolute;
    z-index: 0;
}

.touch-layer {
    position: absolute;
    z-index: 1;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.video {
    float: right;
    max-height: 100%;
    max-width: 100%;
    background-color: #000000;
}


.control-buttons-list {
    float: right;
    width: 3.715rem;
    background-color: var(--control-buttons-bg-color);
}

.control-button {
    margin: .357rem .786rem;
    padding: 0;
    width: 2.143rem;
    height: 2.143rem;
    border: none;
    opacity: 0.75;
    background-color: var(--control-buttons-bg-color);
}

.control-button:hover {
    opacity: 1;
}

.control-wrapper > input[type=checkbox] {
    display: none;
}

.control-wrapper > label {
    display: inline-block;
}

.control-button > svg {
    fill: var(--svg-button-fill);
}

.control-wrapper > input[type=checkbox].two-images:checked + label > svg.image-on {
    display: block;
}

.control-wrapper > input[type=checkbox].two-images:not(:checked) + label > svg.image-on {
    display: none;
}

.control-wrapper > input[type=checkbox].two-images:checked + label > svg.image-off {
    display: none;
}

.control-wrapper > input[type=checkbox].two-images:not(:checked) + label > svg.image-off {
    display: block;
}

.control-wrapper > input[type=checkbox]:checked + label > svg {
    fill: var(--svg-checkbox-bg-color);
}

.goog-device-view {
    float: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 100%;
    align-items: center;
    background: linear-gradient(180deg, #070d15 0%, #060b12 100%);
}

.goog-device-view .video {
    float: none;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    max-height: calc(100% - 4.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: #04080f;
}

/* Side-mounted controls use the same button order as the bottom toolbar. */
.goog-device-view.controls-position-left,
.goog-device-view.controls-position-right {
    flex-direction: row;
    align-items: stretch;
}

.goog-device-view.controls-position-left .video,
.goog-device-view.controls-position-right .video {
    width: auto;
    max-width: none;
    max-height: 100%;
    min-width: 0;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav {
    width: 4.5rem;
    min-width: 4.5rem;
    height: 100%;
    min-height: 100%;
    flex: 0 0 4.5rem;
    flex-direction: column-reverse;
    justify-content: center;
    gap: .45rem;
    padding: .5rem;
    border-top: 0;
    border-bottom: 0;
    box-sizing: border-box;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav {
    order: -1;
    border-right: 1px solid rgba(125, 163, 198, 0.28);
}

.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav {
    order: 1;
    border-left: 1px solid rgba(125, 163, 198, 0.28);
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav > .control-button,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav > .control-button {
    width: 2.5rem;
    flex: 0 0 2.5rem;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .control-button-collapse-actions > svg {
    transform: rotate(0deg);
}

.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .control-button-collapse-actions > svg {
    transform: rotate(180deg);
}

.goog-device-view.controls-position-left .control-buttons-restore-toggle,
.goog-device-view.controls-position-right .control-buttons-restore-toggle {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.goog-device-view.controls-position-left .control-buttons-restore-toggle {
    left: .6rem;
    right: auto;
}

.goog-device-view.controls-position-right .control-buttons-restore-toggle {
    left: auto;
    right: .6rem;
}

.goog-device-view.controls-position-left .control-buttons-restore-toggle > svg {
    transform: rotate(0deg);
}

.goog-device-view.controls-position-right .control-buttons-restore-toggle > svg {
    transform: rotate(180deg);
}

.goog-device-view.controls-position-left.controls-collapsed .video,
.goog-device-view.controls-position-right.controls-collapsed .video {
    max-width: 100%;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav.control-buttons-collapsed {
    transition: width 140ms ease, height 140ms ease, padding 140ms ease;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav.control-buttons-collapsed,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav.control-buttons-collapsed {
    width: 0;
    min-width: 0;
    flex-basis: 0;
    height: 100%;
    min-height: 100%;
    padding: 0;
    border-left-color: transparent;
    border-right-color: transparent;
}

.goog-device-view .video .stream-disconnect-overlay {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 18%, rgba(34, 55, 79, 0.34) 0%, rgba(9, 15, 23, 0.84) 58%),
        linear-gradient(180deg, rgba(7, 11, 17, 0.86) 0%, rgba(4, 8, 13, 0.92) 100%);
}

.goog-device-view .video .stream-disconnect-card {
    width: min(34rem, 100%);
    border: 1px solid rgba(255, 164, 124, 0.5);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(30, 20, 18, 0.88) 0%, rgba(19, 13, 12, 0.94) 100%);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.44);
    padding: 1.1rem 1.2rem;
    color: #ffe9dd;
}

.goog-device-view .video .stream-disconnect-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 188, 156, 0.68);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffd8c4;
    background: rgba(121, 58, 34, 0.34);
}

.goog-device-view .video .stream-disconnect-title {
    margin-top: 0.6rem;
    font-size: 1.28rem;
    line-height: 1.25;
    font-weight: 800;
    color: #fff1e8;
}

.goog-device-view .video .stream-disconnect-message {
    margin-top: 0.55rem;
    font-size: 0.96rem;
    line-height: 1.45;
    color: #ffd9c8;
}

.goog-device-view .video .stream-disconnect-hint {
    margin-top: 0.4rem;
    font-size: 0.86rem;
    line-height: 1.4;
    color: #ffc6ab;
}

.goog-device-view .video .stream-disconnect-meta {
    margin-top: 0.8rem;
    font-size: 0.74rem;
    line-height: 1.35;
    color: rgba(255, 213, 191, 0.82);
    border-top: 1px solid rgba(255, 186, 153, 0.24);
    padding-top: 0.58rem;
    word-break: break-word;
}

.goog-device-view .video .stream-disconnect-overlay.unauthorized .stream-disconnect-card {
    border-color: rgba(255, 170, 126, 0.56);
}

.goog-device-view .video .video-layer,
.goog-device-view .video .touch-layer {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.goog-device-view .video .floating-config-button {
    position: absolute;
    z-index: 11;
    width: 2.95rem;
    height: 2.95rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 74, 134, 0.95);
    background: radial-gradient(circle at 32% 30%, rgba(35, 54, 78, 0.72) 0%, rgba(19, 31, 47, 0.88) 72%);
    box-shadow: 0 0 0 1px rgba(255, 74, 134, 0.18), 0 7px 16px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
    user-select: none;
    transition:
        transform 120ms ease,
        border-color 120ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease;
}

.goog-device-view .video .floating-config-button > svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: rgba(255, 84, 140, 0.96);
    filter: drop-shadow(0 0 4px rgba(255, 84, 140, 0.35));
}

.goog-device-view .video .floating-config-button:hover {
    border-color: rgba(255, 114, 152, 1);
    background: radial-gradient(circle at 32% 30%, rgba(46, 72, 103, 0.8) 0%, rgba(24, 42, 64, 0.92) 72%);
    transform: scale(1.05);
    box-shadow: 0 0 0 1px rgba(255, 102, 156, 0.28), 0 8px 18px rgba(0, 0, 0, 0.42);
}

.goog-device-view .video .floating-config-button:active,
.goog-device-view .video .floating-config-button.dragging {
    cursor: grabbing;
    transform: scale(0.96);
    transition: none;
}

.goog-device-view .video .floating-config-button.active {
    border-color: rgba(110, 208, 145, 0.95);
    background: radial-gradient(circle at 32% 30%, rgba(29, 90, 56, 0.8) 0%, rgba(18, 56, 35, 0.94) 72%);
    box-shadow: 0 0 0 1px rgba(110, 208, 145, 0.32), 0 7px 16px rgba(0, 0, 0, 0.38);
}

.goog-device-view .video .floating-config-button.active > svg {
    fill: rgba(126, 227, 160, 0.98);
    filter: drop-shadow(0 0 4px rgba(126, 227, 160, 0.3));
}

.goog-device-view .video .floating-config-button.snapping {
    transition:
        left 180ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 120ms ease,
        border-color 120ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav {
    float: none;
    width: 100%;
    height: 4.5rem;
    min-height: 4.5rem;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    box-sizing: border-box;
    padding: .5rem;
    background: linear-gradient(180deg, rgba(20, 30, 43, 0.96) 0%, rgba(12, 20, 30, 0.98) 100%);
    border-top: 1px solid rgba(125, 163, 198, 0.28);
}

.goog-device-view.controls-collapsed .video {
    max-height: 100%;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav.control-buttons-collapsed {
    height: 0;
    min-height: 0;
    padding: 0;
    border-top-color: transparent;
    background: transparent;
    gap: 0;
    overflow: visible;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav.control-buttons-collapsed .control-button,
.goog-device-view .control-buttons-list.control-buttons-bottom-nav.control-buttons-collapsed .extra-controls-panel {
    display: none;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button {
    margin: 0;
    width: auto;
    height: 2.5rem;
    flex: 1 1 0;
    border: 1px solid rgba(173, 202, 228, 0.22);
    border-radius: .7rem;
    background: linear-gradient(180deg, rgba(19, 28, 39, 0.78) 0%, rgba(9, 14, 22, 0.88) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.4);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        border-color 120ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease,
        transform 120ms ease;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button > svg {
    width: 1.214rem;
    height: 1.214rem;
    transition: transform 120ms ease, fill 120ms ease;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button:hover {
    border-color: rgba(128, 194, 255, 0.66);
    background: linear-gradient(180deg, rgba(28, 53, 78, 0.82) 0%, rgba(14, 34, 54, 0.9) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(79, 158, 228, 0.22);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button:active {
    transform: translateY(1px) scale(0.985);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button:focus-visible {
    outline: 2px solid rgba(126, 195, 255, 0.88);
    outline-offset: 1px;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button.active {
    border-color: rgba(132, 226, 166, 0.74);
    background: linear-gradient(180deg, rgba(25, 72, 49, 0.85) 0%, rgba(14, 46, 31, 0.92) 100%);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button.control-button-exit-fullscreen {
    display: none;
    border-color: rgba(226, 132, 132, 0.58);
    background: linear-gradient(180deg, rgba(72, 25, 25, 0.85) 0%, rgba(46, 14, 14, 0.92) 100%);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: rgba(173, 202, 228, 0.14);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button:hover > svg {
    transform: scale(1.08);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button.control-button-more-menu > svg {
    transform: rotate(90deg);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button.control-button-more-menu:hover > svg {
    transform: rotate(90deg) scale(1.08);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button.control-button-collapse-actions > svg {
    transform: rotate(-90deg);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button.control-button-collapse-actions:hover > svg {
    transform: rotate(-90deg) scale(1.08);
}

.goog-device-view .control-buttons-restore-toggle {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    z-index: 20;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: .75rem;
    border: 1px solid rgba(173, 202, 228, 0.36);
    background: linear-gradient(180deg, rgba(19, 28, 39, 0.9) 0%, rgba(9, 14, 22, 0.94) 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 140ms ease, transform 140ms ease, border-color 120ms ease;
}

.goog-device-view .control-buttons-restore-toggle.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.goog-device-view .control-buttons-restore-toggle > svg {
    width: 1.08rem;
    height: 1.08rem;
    fill: rgba(225, 238, 250, .96);
    transform: rotate(90deg);
}

.goog-device-view .control-buttons-restore-toggle:hover {
    border-color: rgba(128, 194, 255, 0.72);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .extra-controls-panel {
    position: absolute;
    display: none;
    right: .5rem;
    bottom: calc(100% + .5rem);
    z-index: 10;
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
    padding: .5rem;
    border-radius: .65rem;
    background: linear-gradient(180deg, rgba(29, 41, 56, 0.94) 0%, rgba(18, 27, 38, 0.95) 100%);
    border: 1px solid rgba(173, 202, 228, 0.22);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    flex-direction: column;
    gap: .45rem;
    transform: translateY(6px);
    opacity: 0;
    transform-origin: bottom right;
    transition: transform 140ms ease, opacity 140ms ease;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .extra-controls-panel,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .extra-controls-panel {
    bottom: .5rem;
    max-height: calc(100vh - 1rem);
    transform: translateX(6px);
    transform-origin: bottom center;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .extra-controls-panel {
    left: calc(100% + .5rem);
    right: auto;
}

.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .extra-controls-panel {
    left: auto;
    right: calc(100% + .5rem);
    transform: translateX(-6px);
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .extra-controls-panel.open,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .extra-controls-panel.open {
    transform: translateX(0);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .extra-controls-panel.open {
    display: flex;
    transform: translateY(0);
    opacity: 1;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .extra-control-button {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .5rem;
    flex: 0 0 auto;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .extra-control-button.active {
    border-color: rgba(132, 226, 166, 0.74);
    background: linear-gradient(180deg, rgba(25, 72, 49, 0.85) 0%, rgba(14, 46, 31, 0.92) 100%);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .extra-control-button > svg {
    width: 1.1rem;
    height: 1.1rem;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .control-button-device-actions > svg {
    width: 1.1rem;
    height: 1.1rem;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .device-actions-panel {
    position: absolute;
    right: .5rem;
    bottom: calc(100% + .55rem);
    z-index: 14;
    width: min(17rem, calc(100vw - 1.5rem));
    display: none;
    flex-direction: column;
    gap: .55rem;
    padding: .6rem;
    border: 1px solid rgba(143, 190, 229, 0.3);
    border-radius: .85rem;
    background: linear-gradient(155deg, rgba(22, 36, 52, .98), rgba(9, 17, 27, .98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .device-actions-panel.open {
    display: flex;
    animation: server-device-actions-in 130ms ease-out both;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .device-actions-panel,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .device-actions-panel {
    bottom: .5rem;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .device-actions-panel {
    left: calc(100% + .55rem);
    right: auto;
}

.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .device-actions-panel {
    left: auto;
    right: calc(100% + .55rem);
}

.device-actions-scope-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
}

.device-actions-scope-button,
.device-actions-submenu-button {
    min-height: 2rem;
    border: 1px solid rgba(155, 199, 235, .2);
    border-radius: .55rem;
    background: rgba(8, 17, 28, .74);
    color: #dcecff;
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.device-actions-scope-button:hover,
.device-actions-scope-button.active,
.device-actions-submenu-button:hover {
    border-color: rgba(105, 222, 163, .65);
    background: rgba(26, 91, 68, .72);
    color: #effff6;
}

.device-actions-scope-button:active,
.device-actions-submenu-button:active {
    transform: translateY(1px);
}

.device-actions-content {
    display: grid;
    gap: .35rem;
    max-height: min(20rem, 52vh);
    overflow: auto;
    padding-right: .1rem;
}

.device-actions-submenu-button {
    min-height: 2.15rem;
    padding: .2rem .55rem;
    text-align: left;
}

.device-actions-submenu-button:disabled {
    cursor: wait;
    opacity: .55;
}

.server-device-action-toast {
    position: fixed;
    z-index: 130;
    left: 50%;
    bottom: 5.2rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: min(32rem, calc(100% - 2rem));
    transform: translateX(-50%);
    padding: .55rem .8rem;
    border: 1px solid rgba(107, 226, 162, .42);
    border-radius: .65rem;
    background: rgba(11, 28, 24, .94);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .42);
    color: #dffff0;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
    animation: server-device-actions-in 140ms ease-out both;
}

.server-device-action-toast.pending {
    border-color: rgba(117, 191, 255, .44);
    background: rgba(10, 26, 43, .96);
    color: #dff0ff;
}

.server-device-action-spinner {
    width: .78rem;
    height: .78rem;
    flex: 0 0 auto;
    border: 2px solid rgba(211, 236, 255, .3);
    border-top-color: #78c7ff;
    border-radius: 50%;
    animation: server-device-action-spin .75s linear infinite;
}

.server-device-action-toast.error {
    border-color: rgba(255, 135, 135, .48);
    background: rgba(46, 17, 22, .95);
    color: #ffe3e3;
}

.server-device-input-overlay,
.server-device-apps-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(2, 8, 15, .72);
    backdrop-filter: blur(8px);
}

.server-device-input-panel,
.server-device-apps-panel {
    width: min(32rem, calc(100vw - 2rem));
    max-height: min(44rem, calc(100vh - 2rem));
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(121, 177, 220, .35);
    border-radius: .95rem;
    background: linear-gradient(155deg, rgba(20, 35, 52, .99), rgba(8, 16, 27, .99));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
    color: #edf7ff;
}

.server-device-input-panel {
    display: grid;
    gap: .65rem;
    padding: 1rem;
}

.server-device-input-title {
    color: #a9eacb;
    font-size: 1rem;
    font-weight: 800;
}

.server-device-input-field {
    width: 100%;
    min-height: 2.7rem;
    max-height: 13rem;
    box-sizing: border-box;
    resize: vertical;
    padding: .65rem .7rem;
    border: 1px solid rgba(139, 181, 215, .28);
    border-radius: .6rem;
    outline: none;
    background: rgba(4, 11, 20, .78);
    color: #f0f7ff;
    font: .82rem/1.45 "IBM Plex Mono", "JetBrains Mono", monospace;
}

.server-device-input-field:focus {
    border-color: rgba(91, 220, 150, .66);
    box-shadow: 0 0 0 3px rgba(51, 192, 118, .12);
}

.server-device-input-error {
    min-height: 1.1rem;
    color: #ff9eaa;
    font-size: .75rem;
}

.server-device-input-actions,
.server-device-apps-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
}

.server-device-input-actions button,
.server-device-apps-header button,
.server-device-app-actions button {
    min-height: 2rem;
    padding: .25rem .65rem;
    border: 1px solid rgba(143, 190, 229, .28);
    border-radius: .5rem;
    background: rgba(13, 27, 42, .82);
    color: #cfe3f5;
    font: inherit;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
}

.server-device-input-actions button.primary {
    border-color: rgba(94, 220, 150, .46);
    background: linear-gradient(135deg, rgba(38, 156, 100, .9), rgba(35, 106, 117, .9));
    color: #f2fff8;
}

.server-device-input-actions button:disabled,
.server-device-app-actions button:disabled {
    cursor: wait;
    opacity: .5;
}

.server-device-apps-panel {
    width: min(70rem, calc(100vw - 2rem));
    padding: .8rem;
}

.server-device-apps-header {
    justify-content: space-between;
    padding: .1rem .1rem .65rem;
}

.server-device-apps-header strong {
    color: #a9eacb;
    font-size: 1rem;
}

.server-device-apps-status {
    padding: .45rem .1rem .65rem;
    color: #8da8c0;
    font-size: .76rem;
}

.server-device-apps-table-wrap {
    max-height: min(32rem, 62vh);
    overflow: auto;
    border: 1px solid rgba(130, 172, 211, .2);
    border-radius: .6rem;
}

.server-device-apps-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    font-size: .74rem;
}

.server-device-apps-table th,
.server-device-apps-table td {
    padding: .5rem .55rem;
    border-bottom: 1px solid rgba(130, 172, 211, .12);
    text-align: left;
    vertical-align: middle;
}

.server-device-apps-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #122337;
    color: #9ab6ce;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.server-device-app-cell {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 10rem;
    color: #e9f4ff;
    font-weight: 700;
}

.server-device-app-cell img {
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    border-radius: .45rem;
    object-fit: cover;
    background: rgba(255, 255, 255, .08);
}

.server-device-app-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .28rem;
}

.server-device-app-actions button.cache {
    border-color: rgba(246, 178, 72, .34);
    color: #f5c878;
}

.server-device-app-actions button.export {
    border-color: rgba(91, 173, 255, .35);
    color: #8fc8ff;
}

.server-device-app-actions button.backup,
.server-device-app-actions button.restore {
    border-color: rgba(107, 226, 162, .34);
    color: #91e8ba;
}

.server-device-app-actions button.uninstall {
    border-color: rgba(255, 101, 120, .34);
    color: #ffacb7;
}

@keyframes server-device-actions-in {
    from { opacity: 0; transform: translateY(5px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes server-device-action-spin {
    to { transform: rotate(360deg); }
}

/* Keep the collapse control pointing away from the side-mounted toolbar. */
.goog-device-view.controls-position-left .control-buttons-restore-toggle.visible,
.goog-device-view.controls-position-right .control-buttons-restore-toggle.visible {
    transform: translateY(-50%);
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav .side-control-button {
    display: flex;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav {
    width: var(--side-control-bar-size);
    min-width: var(--side-control-bar-size);
    flex-basis: var(--side-control-bar-size);
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--side-control-button-gap);
    padding: var(--side-control-bar-padding);
    background: var(--side-control-bar-background);
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav > .control-button,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav > .control-button {
    width: var(--side-control-button-size);
    height: var(--side-control-button-size);
    flex: 0 0 var(--side-control-button-size);
    align-self: center;
    border-color: transparent;
    border-radius: var(--side-control-button-radius);
    background: transparent;
    box-shadow: none;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav > .control-button > svg,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav > .control-button > svg {
    width: var(--side-control-icon-size);
    height: var(--side-control-icon-size);
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav > .control-button:hover,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav > .control-button:hover,
.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav > .control-button.active,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav > .control-button.active {
    border-color: var(--side-control-hover-border-color);
    background: var(--side-control-hover-background);
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .side-control-button,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .side-control-button {
    display: flex;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav.control-buttons-collapsed .side-control-button,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav.control-buttons-collapsed .side-control-button {
    display: none;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .control-button-collapse-actions,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .control-button-collapse-actions {
    order: 0;
    margin-bottom: .55rem;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .control-button-device-actions,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .control-button-device-actions {
    order: 10;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .side-control-stream-settings,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .side-control-stream-settings {
    order: 11;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .side-control-keyboard,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .side-control-keyboard {
    order: 12;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .side-control-volume-up,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .side-control-volume-up {
    order: 13;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .side-control-volume-down,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .side-control-volume-down {
    order: 14;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .side-control-power,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .side-control-power {
    order: 15;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .side-control-screenshot,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .side-control-screenshot {
    order: 16;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .side-control-fullscreen,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .side-control-fullscreen,
.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .control-button-exit-fullscreen,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .control-button-exit-fullscreen {
    order: 17;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .control-button-fit-view,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .control-button-fit-view {
    order: 18;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .control-button-more-menu,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .control-button-more-menu {
    order: 19;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .control-button-nav-back,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .control-button-nav-back {
    order: 30;
    margin-top: auto;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .control-button-nav-home,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .control-button-nav-home {
    order: 31;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .control-button-nav-overview,
.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .control-button-nav-overview {
    order: 32;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav > .control-button-exit-fullscreen {
    display: none;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav.control-buttons-fullscreen > .side-control-fullscreen {
    display: none;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav.control-buttons-fullscreen > .control-button-exit-fullscreen {
    display: flex;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav.control-buttons-fit > .control-button-more-menu {
    display: none;
}

.goog-device-view .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow > .control-button {
    display: none;
}

.goog-device-view
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow:not(.control-buttons-collapsed)
    > .control-button-nav-back,
.goog-device-view
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow:not(.control-buttons-collapsed)
    > .control-button-nav-home,
.goog-device-view
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow:not(.control-buttons-collapsed)
    > .control-button-nav-overview,
.goog-device-view
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow:not(.control-buttons-collapsed)
    > .control-button-device-actions,
.goog-device-view
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow:not(.control-buttons-collapsed)
    > .control-button-more-menu {
    display: flex;
}

.goog-device-view.controls-position-bottom
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-nav,
.goog-device-view.controls-position-bottom
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-device-actions,
.goog-device-view.controls-position-bottom
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-more-menu {
    flex: 0 0 2.5rem;
}

.goog-device-view.controls-position-bottom
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-nav-overview {
    order: 0;
}

.goog-device-view.controls-position-bottom
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-nav-back {
    order: 2;
}

.goog-device-view.controls-position-bottom
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-nav-home {
    order: 1;
}

.goog-device-view.controls-position-bottom
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-device-actions {
    order: 10;
    margin-left: auto;
}

.goog-device-view.controls-position-bottom
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-more-menu {
    order: 11;
}

.goog-device-view.controls-position-left
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-nav-overview,
.goog-device-view.controls-position-right
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-nav-overview {
    order: 30;
    margin-top: auto;
}

.goog-device-view.controls-position-left
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-nav-home,
.goog-device-view.controls-position-right
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-nav-home {
    order: 31;
}

.goog-device-view.controls-position-left
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-nav-back,
.goog-device-view.controls-position-right
    .control-buttons-list.control-buttons-bottom-nav.control-buttons-overflow
    > .control-button-nav-back {
    order: 32;
    margin-top: 0;
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .control-button-collapse-actions > svg {
    transform: rotate(0deg);
}

.goog-device-view.controls-position-left .control-buttons-list.control-buttons-bottom-nav .control-button-collapse-actions:hover > svg {
    transform: rotate(0deg) scale(1.08);
}

.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .control-button-collapse-actions > svg {
    transform: rotate(180deg);
}

.goog-device-view.controls-position-right .control-buttons-list.control-buttons-bottom-nav .control-button-collapse-actions:hover > svg {
    transform: rotate(180deg) scale(1.08);
}

@media (max-width: 620px) {
    .goog-device-view .control-buttons-list.control-buttons-bottom-nav .device-actions-panel {
        right: .25rem;
        width: min(17rem, calc(100vw - 1rem));
    }

    .server-device-apps-overlay,
    .server-device-input-overlay {
        padding: .5rem;
    }

    .server-device-input-panel,
    .server-device-apps-panel {
        width: calc(100vw - 1rem);
    }
}

.text-area {
    width: 100%;
    resize: vertical;
    min-height: 4rem;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.4rem;
    background: rgba(8, 14, 20, 0.55);
    color: var(--text-color);
    padding: 0.4rem;
}

.more-box {
    display: none;
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 5.2rem;
    box-sizing: border-box;
    background: rgba(20, 30, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.6rem;
    z-index: 12;
    padding: 0.6rem;
    overflow: auto;
    backdrop-filter: blur(3px);
}

.goog-device-view.controls-position-left .more-box {
    left: 5.2rem;
    right: .5rem;
    bottom: .5rem;
}

.goog-device-view.controls-position-right .more-box {
    left: .5rem;
    right: 5.2rem;
    bottom: .5rem;
}

.more-box .more-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.more-box .more-box-title {
    font-size: 1rem;
    font-weight: 600;
}

.more-box .more-box-close-button {
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 0.4rem;
    padding: 0.2rem 0.6rem;
    background: rgba(8, 14, 20, 0.45);
    color: var(--text-color);
}

.more-box p,
.more-box div {
    margin: 0.3rem 0;
}

.more-box p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.more-box button,
.more-box input {
    box-sizing: border-box;
}

.more-box input {
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 0.35rem;
    background: rgba(8, 14, 20, 0.45);
    color: var(--text-color);
    padding: 0.15rem 0.35rem;
}

.more-box button {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.35rem;
    background: rgba(8, 14, 20, 0.45);
    color: var(--text-color);
    padding: 0.15rem 0.45rem;
    cursor: pointer;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease,
        transform 120ms ease,
        color 120ms ease;
}

.more-box button:hover {
    border-color: rgba(120, 190, 255, 0.65);
    background: rgba(40, 92, 140, 0.45);
    box-shadow: 0 0 0 1px rgba(120, 190, 255, 0.28) inset;
}

.more-box button:active {
    transform: scale(0.98);
}

.more-box button.action-success {
    border-color: rgba(107, 214, 122, 0.85);
    background: rgba(28, 105, 42, 0.55);
    color: #d8ffd8;
}

.more-box button.action-error {
    border-color: rgba(255, 123, 123, 0.9);
    background: rgba(138, 28, 28, 0.58);
    color: #ffd9d9;
}

.text-with-shadow, .more-box label {
    color: var(--text-color);
    text-shadow: var(--text-shadow-color) 0 0 .357rem;
}

.spoiler > input ~ .box {
    display: none;
}

.spoiler > input:checked ~ .box {
    display: block;
}

.spoiler > label::before {
    content: '►';
    margin-right: 5px;
}

.spoiler > input:checked ~ label::before {
    content: '▼';
}

.spoiler > input:checked ~ div {
    display: block;
    padding: 10px;
}

.spoiler > input {
    display: none;
}

.slider-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0.35rem 0;
}

.slider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.slider-label {
    margin: 0;
}

.slider-value {
    font-variant-numeric: tabular-nums;
    color: var(--text-color-light);
    min-width: 4.2rem;
    text-align: right;
}

.slider-input {
    width: 100%;
}

.sharpness-button-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin: 0.35rem 0;
}

.sharpness-button-label {
    min-width: 3.6rem;
}

.sharpness-level-button {
    min-width: 5.6rem;
}

.sharpness-level-button.active {
    border-color: rgba(132, 226, 166, 0.84);
    background: rgba(25, 72, 49, 0.6);
    color: #dcffde;
    box-shadow: 0 0 0 1px rgba(132, 226, 166, 0.26) inset;
}

.custom-video-settings {
    display: none;
    width: 100%;
    border: 1px solid rgba(132, 188, 238, 0.2);
    border-radius: 0.45rem;
    padding: 0.4rem 0.45rem;
    background: rgba(10, 18, 27, 0.45);
}

.custom-video-settings.visible {
    display: block;
}

:root {
    --cfg-dialog-radius: 0.9rem;
}

.dialog-background {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 15% 10%, rgba(66, 122, 171, 0.2) 0%, rgba(0, 0, 0, 0) 42%),
        rgba(5, 10, 16, 0.74);
    backdrop-filter: blur(5px);
}

.dialog-container {
    width: min(980px, 96vw);
    max-height: min(860px, 94vh);
    display: flex;
    flex-direction: column;
    border-radius: var(--cfg-dialog-radius);
    border: 1px solid rgba(136, 182, 224, 0.24);
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(20, 33, 48, 0.96) 0%, rgba(12, 22, 35, 0.98) 100%);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    color: #eaf2ff;
    font-family: "Segoe UI", "Ubuntu", sans-serif;
}

.dialog-container.ready {
    height: auto;
    min-height: 0;
}

.dialog-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    background: rgba(27, 43, 62, 0.82);
    border-bottom: 1px solid rgba(150, 190, 226, 0.22);
}

.dialog-header .control-button {
    margin: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(170, 205, 236, 0.26);
    background: rgba(20, 34, 51, 0.9);
    opacity: 1;
}

.dialog-header .control-button:hover {
    border-color: rgba(124, 193, 255, 0.72);
}

.dialog-header .dialog-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f3f9ff;
    letter-spacing: 0.01em;
}

.dialog-body {
    padding: 0.95rem;
    overflow: auto;
    background: rgba(10, 19, 29, 0.66);
}

.dialog-body.hidden {
    display: none;
}

.dialog-body.visible {
    display: block;
}

.controls {
    display: grid;
    grid-template-columns: minmax(130px, 170px) 1fr;
    gap: 0.45rem 0.7rem;
    align-items: center;
    padding: 0.8rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(146, 187, 223, 0.2);
    border-radius: 0.75rem;
    background: rgba(24, 40, 57, 0.58);
}

.controls .label {
    font-size: 0.87rem;
    color: #b8ccde;
}

.controls .input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid rgba(163, 199, 231, 0.24);
    border-radius: 0.45rem;
    color: #eaf2ff;
    background: rgba(9, 17, 27, 0.78);
    padding: 0.28rem 0.42rem;
    font-size: 0.87rem;
    font-family: "Segoe UI", "Ubuntu", sans-serif;
}

.controls .input:focus {
    outline: 2px solid rgba(122, 191, 255, 0.6);
    outline-offset: 0;
}

.controls .fit-toggle-label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.controls .fit-toggle-label > svg {
    width: 2.9rem;
    height: 1.8rem;
    fill: rgba(190, 210, 230, 0.78);
    transition: transform 120ms ease, filter 120ms ease, fill 120ms ease;
}

.controls .fit-toggle-label:hover > svg {
    filter: drop-shadow(0 0 6px rgba(128, 194, 255, 0.28));
    transform: scale(1.03);
}

.controls input[type='range'].input {
    padding: 0;
    height: 1.05rem;
    background: transparent;
    border: none;
}

.controls .button {
    grid-column: 2;
}

.controls .button,
.dialog-footer button {
    border: 1px solid rgba(163, 199, 231, 0.26);
    border-radius: 0.48rem;
    padding: 0.32rem 0.6rem;
    color: #dff0ff;
    background: rgba(35, 67, 98, 0.62);
    cursor: pointer;
    font-size: 0.87rem;
    font-family: "Segoe UI", "Ubuntu", sans-serif;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.controls .button:hover,
.dialog-footer button:hover {
    border-color: rgba(120, 191, 255, 0.75);
    background: rgba(45, 88, 126, 0.78);
}

.controls .button:active,
.dialog-footer button:active {
    transform: scale(0.985);
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    border-top: 1px solid rgba(150, 190, 226, 0.2);
    background: rgba(9, 17, 27, 0.88);
}

.dialog-footer span.subtitle {
    color: #a9bfd4;
    font-size: 0.82rem;
}

.dialog-footer button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 760px) {
    .dialog-background {
        padding: 0.4rem;
    }

    .dialog-container {
        width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0.65rem;
    }

    .controls {
        grid-template-columns: 1fr;
    }

    .controls .button {
        grid-column: 1;
    }
}

:root {
    --device-card-bg: linear-gradient(135deg, rgba(16, 28, 40, 0.88) 0%, rgba(10, 17, 27, 0.94) 100%);
    --device-card-border: rgba(140, 184, 225, 0.24);
    --device-card-border-hover: rgba(126, 195, 255, 0.48);
    --device-surface-2: rgba(31, 53, 77, 0.42);
    --device-surface-3: rgba(16, 29, 43, 0.58);
    --device-muted: hsl(212, 18%, 67%);
    --device-primary: hsl(205, 86%, 72%);
    --device-good: hsl(132, 67%, 58%);
    --device-off: hsl(0, 64%, 60%);
    --device-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}

body.list {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: auto;
    background-color: var(--global-page-background-solid, #070d15) !important;
    background: var(
        --global-page-background,
        radial-gradient(circle at 14% 0%, rgba(88, 171, 255, 0.16) 0%, rgba(10, 16, 25, 0) 44%),
        radial-gradient(circle at 90% 4%, rgba(31, 109, 186, 0.2) 0%, rgba(10, 16, 25, 0) 42%),
        linear-gradient(180deg, #0d1420 0%, #0a111b 100%)
    );
    color: #e8f0fb;
}

#devices {
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    padding: 1.6rem 1.8rem 2rem 1.8rem;
}

#devices .device-list-actions {
    max-width: 1360px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    letter-spacing: 0;
    text-transform: none;
}

#devices .device-list-action {
    min-height: 2.45rem;
    padding: 0.38rem 1rem;
    border: 1px solid rgba(142, 194, 236, 0.42);
    border-radius: 0.62rem;
    background: rgba(12, 27, 42, 0.9);
    color: #dcecff;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 120ms ease, filter 120ms ease, transform 120ms ease;
}

#devices .device-list-action.primary {
    border-color: rgba(83, 225, 177, 0.72);
    background: linear-gradient(180deg, rgba(35, 126, 95, 0.96), rgba(22, 91, 68, 0.98));
    color: #e2fff5;
}

#devices .device-list-action:hover {
    border-color: rgba(142, 218, 255, 0.9);
    filter: brightness(1.08);
    transform: translateY(-1px);
}

body.stream #devices {
    background-color: transparent;
    opacity: 1;
    position: absolute;
    inset: 0;
    z-index: 3;
}

body.list #device_list_menu {
    display: none;
}

#device_list_menu {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 4;
}

#devices .tracker-name {
    max-width: 1360px;
    margin: 0 auto 1.2rem auto;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--device-card-border);
    border-radius: 0.95rem;
    background: var(--device-surface-2);
    color: #eef5ff;
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

#devices .tracker-title-text {
    min-width: min(100%, 320px);
}

#devices .tracker-summary-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
    text-transform: none;
    letter-spacing: 0;
}

#devices .tracker-name.tracker-name-with-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    flex-wrap: nowrap;
}

#devices .tracker-name-with-actions .tracker-title-text {
    grid-column: 1;
    min-width: 0;
    justify-self: start;
}

#devices .tracker-name-with-actions .device-list-actions {
    grid-column: 2;
    max-width: none;
    margin: 0;
    justify-self: center;
}

#devices .tracker-name-with-actions .tracker-summary-meta {
    grid-column: 3;
    justify-self: end;
}

#devices .tracker-summary-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: 0.18rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(145, 195, 238, 0.35);
    background: rgba(16, 31, 48, 0.72);
    color: #cfe5ff;
    font-size: 0.78rem;
    font-weight: 700;
}

#devices .tracker-summary-badge.connected {
    border-color: rgba(116, 235, 153, 0.55);
    background: rgba(29, 78, 50, 0.42);
    color: #dcffe7;
}

#devices .tracker-summary-badge.error {
    border-color: rgba(255, 121, 121, 0.52);
    background: rgba(91, 32, 39, 0.48);
    color: #ffd3d3;
}

#devices .device-list {
    width: 100%;
}

#devices .device-list > div[id^='tracker_instance'] {
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    gap: 1.1rem;
}

#devices .device-list > div[id^='tracker_instance'] > .tracker-name {
    grid-column: 1 / -1;
    margin: 0;
}

#devices .device-list div.device {
    border: 1px solid var(--device-card-border);
    border-radius: 1rem;
    background: var(--device-card-bg);
    box-shadow: var(--device-shadow);
    padding: 1rem;
    color: #e4edf7;
    transition: border-color 130ms ease, transform 130ms ease, box-shadow 130ms ease;
}

#devices .device-list div.device:hover {
    border-color: var(--device-card-border-hover);
    transform: translateY(-1px);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.38);
}

#devices .device-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
    align-items: start;
}

#devices .device-name {
    font-size: 1.22rem;
    font-weight: 700;
    color: #f7fbff;
    margin-right: 0.55rem;
}

#devices .device-name-row {
    min-width: 0;
    gap: 0.55rem;
}

#devices .device-order-badge {
    flex: 0 0 auto;
    min-width: 4.2rem;
    min-height: 2rem;
    padding: 0.18rem 0.58rem;
    border-radius: 0.62rem;
    border: 1px solid rgba(117, 226, 153, 0.72);
    background: linear-gradient(180deg, rgba(34, 96, 61, 0.84) 0%, rgba(19, 67, 42, 0.9) 100%);
    color: #e8ffef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.84rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    box-shadow: 0 0 0 1px rgba(102, 238, 148, 0.12), 0 8px 18px rgba(0, 0, 0, 0.22);
}

#devices .device-order-badge.missing {
    border-color: rgba(255, 199, 117, 0.55);
    background: linear-gradient(180deg, rgba(89, 63, 29, 0.72) 0%, rgba(65, 45, 23, 0.82) 100%);
    color: #ffe3ad;
}

#devices .device-order-editor {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    flex-wrap: wrap;
}

#devices .device-order-edit-form {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

#devices .device-order-edit-form.hidden,
#devices .device-order-edit-button.hidden {
    display: none;
}

#devices .device-order-input {
    width: 4.2rem;
    min-height: 1.9rem;
    padding: 0.12rem 0.42rem;
    border-radius: 0.42rem;
    border: 1px solid rgba(143, 193, 234, 0.5);
    background: rgba(4, 12, 22, 0.72);
    color: #f4fbff;
    font-size: 0.82rem;
    font-weight: 800;
}

#devices .device-order-edit-button,
#devices .device-order-save-button,
#devices .device-order-cancel-button {
    min-height: 1.9rem;
    padding: 0.12rem 0.48rem;
    border-radius: 0.42rem;
    border: 1px solid rgba(143, 193, 234, 0.42);
    background: rgba(21, 45, 76, 0.72);
    color: #d9eeff;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

#devices .device-order-save-button {
    border-color: rgba(116, 235, 153, 0.62);
    background: rgba(27, 91, 55, 0.72);
    color: #e7fff0;
}

#devices .device-order-cancel-button {
    border-color: rgba(156, 177, 209, 0.32);
    background: rgba(22, 30, 44, 0.78);
}

#devices .device-order-edit-button:disabled,
#devices .device-order-save-button:disabled,
#devices .device-order-cancel-button:disabled {
    cursor: wait;
    opacity: 0.65;
}

#devices .device-order-status {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--device-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

#devices .device-order-status.pending {
    color: #ffe3ad;
}

#devices .device-order-status.success {
    color: #a8f0bf;
}

#devices .device-order-status.error {
    color: #ffb4b4;
}

#devices .device-header > div {
    display: inline-flex;
    align-items: baseline;
}

#devices .device-header > .device-name-row {
    align-items: center;
}

#devices .device-serial {
    color: var(--device-muted);
    font-size: 0.78rem;
}

#devices .device-version {
    margin-left: 0.5rem;
    font-weight: 600;
}

#devices .device-version .release-version {
    color: var(--device-primary);
}

#devices .device-version .sdk-version {
    margin-left: 0.3rem;
    color: var(--device-muted);
    font-size: 0.74rem;
}

#devices .device-state {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    background-color: var(--device-off);
    margin-left: 0.55rem;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

#devices .device.active .device-state {
    background-color: var(--device-good);
    box-shadow: 0 0 0 2px rgba(110, 218, 139, 0.16), 0 0 10px rgba(110, 218, 139, 0.35);
}

#devices .device-render-window {
    min-width: 250px;
    border: 1px solid var(--device-card-border);
    border-radius: 0.75rem;
    background: var(--device-surface-3);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

#devices .device-render-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

#devices .device-render-window .stream-status-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--device-muted);
}

#devices .device-render-window .stream-status-label.open {
    color: var(--device-good);
}

#devices .device-render-window .stream-close-button {
    font-size: 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.45rem;
    padding: 0.1rem 0.55rem;
    color: #d8e7f8;
    background: rgba(42, 67, 94, 0.58);
}

#devices .device-render-window .stream-close-button.active {
    cursor: pointer;
}

#devices .device-render-window .stream-close-button:not(.active) {
    color: var(--device-muted);
}

#devices .stream-session-list {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

#devices .stream-session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.33rem 0.4rem;
    border-radius: 0.52rem;
    border: 1px solid rgba(158, 198, 234, 0.2);
    background: rgba(25, 42, 61, 0.58);
}

#devices .stream-session-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.08rem;
}

#devices .stream-session-title {
    font-size: 0.81rem;
    font-weight: 700;
    color: #eef6ff;
}

#devices .stream-session-subtitle {
    font-size: 0.72rem;
    color: var(--device-muted);
}

#devices .stream-session-close {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.42rem;
    background: rgba(65, 32, 43, 0.48);
    color: #ffdbe4;
    font-size: 0.74rem;
    padding: 0.09rem 0.44rem;
    cursor: pointer;
}

#devices .stream-session-close:hover {
    border-color: rgba(255, 146, 176, 0.65);
    background: rgba(112, 40, 63, 0.62);
}

#devices .stream-session-empty {
    font-size: 0.74rem;
    color: var(--device-muted);
    border: 1px dashed rgba(157, 196, 231, 0.2);
    border-radius: 0.45rem;
    padding: 0.3rem 0.4rem;
}

#devices .services {
    margin-top: 0.78rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#devices .device-list div.desc-block {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    border: 1px solid var(--device-card-border);
    border-radius: 0.5rem;
    background: rgba(19, 33, 48, 0.56);
    padding: 0.24rem 0.4rem;
    white-space: nowrap;
}

#devices .device-list div.desc-block.hidden {
    display: none;
}

#devices .device-rental-assignment-wrap {
    border-style: solid;
    border-color: rgba(255, 214, 148, 0.42);
    background: linear-gradient(180deg, rgba(76, 52, 26, 0.58) 0%, rgba(60, 41, 22, 0.64) 100%);
}

#devices .device-rental-assignment {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #ffe6bf;
}

#devices .device-list div.desc-block.stream,
#devices .device-list div.desc-block.server_pid,
#devices .device-list div.desc-block.net_interface {
    overflow: hidden;
}

#devices .device-list div.desc-block button {
    fill: var(--text-color);
}

#devices .device-list div.desc-block button > span {
    padding: 0 0.35rem;
}

#devices .device-list div.desc-block button > span,
#devices .device-list div.desc-block button > svg {
    vertical-align: middle;
}

#devices .device-list div.desc-block button > svg {
    width: var(--font-size);
    height: var(--font-size);
}

#devices .device-list div.desc-block button > svg > path {
    fill: var(--text-color);
}

#devices .device-list div.device div.desc-block .action-button {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(34, 57, 80, 0.6);
    color: #e3effa;
    border-radius: 0.44rem;
    padding: 0.18rem 0.52rem;
    cursor: pointer;
    font-size: 0.84rem;
}

#devices .device-list div.device div.desc-block .action-button.active:hover {
    border-color: rgba(126, 195, 255, 0.72);
    background: rgba(38, 76, 116, 0.72);
}

#devices .device-list div.device div.desc-block .action-button.disconnect-device-button.active {
    border-color: rgba(255, 106, 106, 0.68);
    color: #ffd0d0;
}

#devices .device-list div.device div.desc-block .action-button.disconnect-device-button.active:hover {
    border-color: rgba(255, 106, 106, 0.96);
    background: rgba(116, 35, 42, 0.76);
}

#devices .device-list div.device div.desc-block .action-button.reboot-device-button.active {
    border-color: rgba(255, 174, 94, 0.58);
    color: #ffe0bd;
}

#devices .device-list div.device div.desc-block .action-button.reboot-device-button.active:hover {
    border-color: rgba(255, 174, 94, 0.9);
    background: rgba(116, 63, 29, 0.72);
}

#devices .device-list div.device div.desc-block .action-button.device-public-button.active {
    border-color: rgba(132, 226, 166, 0.84);
    background: rgba(25, 72, 49, 0.62);
    color: #dcffde;
}

#devices .device-list div.device div.desc-block .action-button.device-public-button:disabled {
    opacity: 0.68;
    cursor: wait;
}

#devices .device-list div.device select {
    color: #e7f2ff;
    background-color: rgba(9, 19, 31, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.42rem;
    padding: 0.18rem 0.34rem;
    font-size: 0.82rem;
}

#devices .device-list .device.not-active {
    opacity: 0.66;
}

#devices .device-list .device.not-active a {
    color: hsl(207, 58%, 76%);
}

#devices .device-list .device.not-active a:visited {
    color: hsl(262, 52%, 77%);
}

#devices .device-list a {
    color: hsl(205, 92%, 74%);
    text-decoration: none;
    font-size: 0.86rem;
    border-bottom: 1px dashed rgba(126, 195, 255, 0.4);
}

#devices .device-list a:hover {
    color: hsl(201, 100%, 85%);
    border-bottom-color: rgba(177, 223, 255, 0.78);
}

#devices .device-list a.link-list-files,
#devices .device-list a.link-shell,
#devices .device-list a.link-devtools {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    padding: 0.2rem 0.54rem;
    border-radius: 0.56rem;
    border: 1px solid rgba(144, 196, 241, 0.34);
    border-bottom-width: 1px;
    background: linear-gradient(180deg, rgba(25, 44, 64, 0.88) 0%, rgba(17, 30, 46, 0.92) 100%);
    color: hsl(205, 95%, 82%);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition:
        color 120ms ease,
        border-color 120ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease,
        transform 120ms ease;
}

#devices .device-list a.link-list-files::before,
#devices .device-list a.link-shell::before,
#devices .device-list a.link-devtools::before {
    content: '';
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(173, 215, 248, 0.25);
}

#devices .device-list a.link-list-files::before {
    background: rgba(132, 236, 161, 0.9);
}

#devices .device-list a.link-shell::before {
    background: rgba(247, 200, 109, 0.9);
}

#devices .device-list a.link-devtools::before {
    background: rgba(120, 209, 255, 0.95);
}

#devices .device-list a.link-list-files:hover,
#devices .device-list a.link-shell:hover,
#devices .device-list a.link-devtools:hover {
    border-color: rgba(177, 223, 255, 0.85);
    background: linear-gradient(180deg, rgba(33, 61, 89, 0.92) 0%, rgba(22, 41, 61, 0.95) 100%);
    transform: translateY(-1px);
}

#devices .device-list a.player-stream-link {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.2rem 0.52rem;
    border: 1px solid rgba(137, 187, 229, 0.35);
    border-radius: 0.56rem;
    border-bottom-width: 1px;
    background: linear-gradient(180deg, rgba(24, 43, 62, 0.88) 0%, rgba(16, 29, 44, 0.92) 100%);
    color: hsl(204, 96%, 82%);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition:
        color 120ms ease,
        border-color 120ms ease,
        text-shadow 120ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease,
        transform 120ms ease;
}

#devices .device-list a.player-stream-link::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(159, 194, 226, 0.36);
    box-shadow: inset 0 0 0 1px rgba(184, 219, 248, 0.28);
}

#devices .device-list a.player-stream-link.stream-link-active {
    color: hsl(143, 86%, 82%);
    border-color: hsla(141, 84%, 68%, 0.78);
    background: linear-gradient(180deg, rgba(25, 71, 49, 0.92) 0%, rgba(18, 51, 36, 0.95) 100%);
    text-shadow: 0 0 8px rgba(110, 232, 140, 0.35);
    box-shadow: 0 0 0 1px rgba(122, 232, 155, 0.28);
}

#devices .device-list a.player-stream-link.stream-link-active::before {
    background: rgba(110, 232, 140, 0.96);
    box-shadow: 0 0 0 1px rgba(83, 190, 114, 0.5), 0 0 10px rgba(110, 232, 140, 0.64);
}

#devices .device-list a.player-stream-link.stream-link-active::after {
    content: 'VIEW ON';
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #082615;
    background: hsla(141, 86%, 73%, 0.95);
    border-radius: 999px;
    padding: 0.07rem 0.38rem;
}

#devices .device-list a.player-stream-link:hover {
    border-color: rgba(160, 212, 255, 0.88);
    background: linear-gradient(180deg, rgba(32, 58, 83, 0.92) 0%, rgba(21, 39, 58, 0.95) 100%);
    transform: translateY(-1px);
}

#devices .device-list a.player-stream-link.stream-link-active:hover {
    border-color: rgba(139, 242, 170, 0.92);
    background: linear-gradient(180deg, rgba(29, 81, 55, 0.96) 0%, rgba(19, 58, 40, 0.98) 100%);
}

/* Worker port badge on device card */
#devices .device-worker-port {
    font-size: 0.76rem;
    font-weight: 700;
    color: #0a1a2a;
    background: var(--device-primary);
    border-radius: 0.36rem;
    padding: 0.08rem 0.42rem;
    letter-spacing: 0.03em;
    margin-left: 0.4rem;
}

body.device-controls-modal-open {
    overflow: hidden;
}

.device-controls-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background: rgba(2, 8, 14, 0.76);
    backdrop-filter: blur(8px);
}

.device-controls-modal-backdrop.hidden {
    display: none;
}

.device-controls-modal {
    width: min(820px, 100%);
    max-height: calc(100vh - 2.4rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(139, 193, 235, 0.34);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(17, 33, 50, 0.99), rgba(8, 18, 29, 0.99));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58);
    color: #e8f0fb;
}

.device-settings-modal {
    width: min(560px, 100%);
}

.device-controls-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(145, 198, 239, 0.2);
    background: rgba(13, 28, 43, 0.74);
}

.device-controls-modal-header h3,
.device-controls-modal-header p {
    margin: 0;
}

.device-controls-modal-header h3 {
    margin-top: 0.18rem;
    color: #f0f8ff;
    font-size: 1.05rem;
}

.device-controls-modal-header p {
    margin-top: 0.3rem;
    color: var(--device-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.device-controls-modal-eyebrow {
    color: #79d9bb;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.device-controls-modal-close {
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 auto;
    border: 1px solid rgba(151, 194, 230, 0.3);
    border-radius: 0.58rem;
    background: rgba(7, 17, 28, 0.82);
    color: #cfdeec;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.device-controls-modal-close:hover {
    border-color: rgba(255, 142, 151, 0.62);
    color: #ffd9dc;
}

.device-controls-modal-body {
    min-height: 0;
    padding: 1rem 1.1rem 1.15rem;
    overflow: auto;
}

.device-connect-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.45rem;
    margin-bottom: 1rem;
    padding: 0.28rem;
    border-radius: 0.72rem;
    background: rgba(5, 14, 24, 0.7);
}

.device-connect-tabs button {
    min-height: 2.4rem;
    border: 1px solid transparent;
    border-radius: 0.56rem;
    background: transparent;
    color: #91a9bd;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.device-connect-tabs button.active {
    border-color: rgba(93, 222, 181, 0.5);
    background: linear-gradient(120deg, rgba(35, 126, 96, 0.78), rgba(31, 83, 128, 0.78));
    color: #effff9;
}

.device-connect-pane[hidden] {
    display: none;
}

.device-connect-pane-copy,
.device-settings-copy {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.device-connect-pane-copy {
    margin-bottom: 0.8rem;
}

.device-connect-pane-copy strong,
.device-settings-copy strong {
    color: #eef7ff;
    font-size: 0.9rem;
}

.device-connect-pane-copy small,
.device-settings-copy small {
    color: var(--device-muted);
    font-size: 0.72rem;
}

.device-connect-pane .adb-tcp-connect {
    width: 100%;
    padding: 0;
    border: 0;
    flex-wrap: wrap;
}

.device-connect-pane .adb-tcp-status {
    max-width: 100%;
}

.device-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--device-card-border);
    border-radius: 0.78rem;
    background: rgba(8, 20, 32, 0.72);
}

.device-settings-row .global-control-bar-select {
    min-width: 7.2rem;
    min-height: 2.35rem;
    padding: 0.3rem 0.62rem;
    border: 1px solid rgba(132, 190, 235, 0.36);
    border-radius: 0.58rem;
    background: rgba(6, 16, 27, 0.88);
    color: #eef7ff;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 750;
    cursor: pointer;
}

/* PHONE_WORKER config panel */
.phone-worker-config {
    max-width: 1360px;
    margin: 0 auto 1rem auto;
    padding: 0.86rem 1rem;
    border: 1px solid rgba(140, 184, 225, 0.32);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(17, 33, 50, 0.9) 0%, rgba(13, 24, 37, 0.94) 100%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
    position: relative;
    overflow: hidden;
}

.phone-worker-config::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(146, 218, 255, 0.85) 0%, rgba(88, 179, 255, 0.35) 100%);
}

.phone-worker-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.phone-worker-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.68rem;
    min-width: 260px;
}

.phone-worker-label {
    font-size: 0.84rem;
    font-weight: 800;
    color: #ecf7ff;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.phone-worker-hint {
    font-size: 0.76rem;
    color: var(--device-muted);
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    padding-left: 0.62rem;
}

.phone-worker-connected {
    min-height: 1.65rem;
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(116, 235, 153, 0.48);
    background: rgba(29, 78, 50, 0.36);
    color: #dcffe7;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.phone-worker-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.phone-worker-input {
    width: 74px;
    height: 33px;
    padding: 0.24rem 0.45rem;
    border: 1px solid rgba(160, 212, 255, 0.38);
    border-radius: 0.52rem;
    background: rgba(8, 20, 33, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #e7f2ff;
    font-size: 0.89rem;
    font-weight: 700;
    text-align: center;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    appearance: textfield;
    -moz-appearance: textfield;
}

.phone-worker-input::-webkit-inner-spin-button,
.phone-worker-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.phone-worker-input:focus {
    outline: none;
    border-color: rgba(145, 218, 255, 0.92);
    box-shadow: 0 0 0 2px rgba(89, 173, 233, 0.22);
}

.phone-worker-save {
    min-height: 33px;
    border: 1px solid rgba(138, 236, 174, 0.88);
    border-radius: 0.52rem;
    background: linear-gradient(180deg, rgba(37, 110, 74, 0.86) 0%, rgba(24, 79, 52, 0.9) 100%);
    color: #deffe7;
    padding: 0.24rem 0.84rem;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease;
}

.phone-worker-save:hover {
    border-color: rgba(162, 244, 192, 0.95);
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.phone-worker-save:disabled {
    opacity: 0.58;
    cursor: wait;
    transform: none;
}

.adb-tcp-connect {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 35px;
    padding-left: 0.7rem;
    border-left: 1px solid rgba(145, 198, 239, 0.24);
}

.adb-tcp-input {
    height: 33px;
    box-sizing: border-box;
    padding: 0.24rem 0.52rem;
    border: 1px solid rgba(160, 212, 255, 0.38);
    border-radius: 0.52rem;
    outline: none;
    background: rgba(8, 20, 33, 0.92);
    color: #e7f2ff;
    font-size: 0.82rem;
    font-weight: 650;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.adb-tcp-input:focus {
    border-color: rgba(86, 211, 174, 0.92);
    box-shadow: 0 0 0 2px rgba(55, 192, 151, 0.2);
}

.adb-tcp-ip {
    width: 132px;
}

.adb-tcp-port {
    width: 66px;
    text-align: center;
}

.adb-tcp-connect-button {
    min-height: 33px;
    padding: 0.24rem 0.82rem;
    border: 1px solid rgba(86, 221, 176, 0.88);
    border-radius: 0.52rem;
    background: linear-gradient(180deg, rgba(35, 126, 95, 0.94) 0%, rgba(22, 91, 68, 0.96) 100%);
    color: #e2fff5;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}

.adb-tcp-connect-button:hover:not(:disabled) {
    border-color: rgba(139, 255, 216, 0.98);
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.adb-tcp-connect-button:disabled,
.adb-tcp-input:disabled {
    opacity: 0.58;
    cursor: wait;
    transform: none;
}

.adb-tcp-status {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 230px;
    min-height: 31px;
    padding: 0 0.52rem;
    border: 1px dashed rgba(145, 198, 239, 0.22);
    border-radius: 0.46rem;
    color: var(--device-muted);
    font-size: 0.74rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adb-tcp-status:empty {
    display: none;
}

.adb-tcp-status.pending {
    color: #c7eaff;
    border-color: rgba(122, 198, 255, 0.5);
    background: rgba(27, 78, 116, 0.24);
}

.adb-tcp-status.success {
    color: #d9ffe8;
    border-color: rgba(104, 225, 147, 0.55);
    background: rgba(26, 92, 55, 0.28);
}

.adb-tcp-status.error {
    color: #ffd8d8;
    border-color: rgba(255, 119, 119, 0.56);
    background: rgba(110, 38, 38, 0.28);
}

.adb-scan-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
}

.adb-scan-tab {
    min-height: 33px;
    padding: 0.24rem 0.78rem;
    border: 1px solid rgba(124, 184, 255, 0.56);
    border-radius: 0.52rem;
    background: rgba(28, 61, 91, 0.76);
    color: #dcefff;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.adb-scan-tab.active,
.adb-scan-tab:hover {
    border-color: rgba(112, 222, 187, 0.84);
    background: rgba(28, 103, 80, 0.68);
    color: #e5fff7;
}

.adb-scan-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.72rem 0.9rem;
    margin-top: 0.82rem;
    padding-top: 0.82rem;
    border-top: 1px solid rgba(145, 198, 239, 0.2);
}

.adb-scan-panel.hidden,
.adb-scan-fields.hidden {
    display: none;
}

.adb-scan-mode {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    align-self: start;
    padding: 0.28rem;
    border-radius: 0.7rem;
    background: rgba(5, 14, 24, 0.72);
}

.adb-scan-mode button {
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: #8ca9c0;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.adb-scan-mode button.active {
    border-color: rgba(97, 226, 185, 0.48);
    background: linear-gradient(120deg, rgba(36, 129, 98, 0.78), rgba(34, 91, 139, 0.78));
    color: #effff9;
}

.adb-scan-fields {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(100px, 0.55fr);
    gap: 0.62rem;
}

.adb-scan-fields label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: #a9c4da;
    font-size: 0.72rem;
    font-weight: 800;
}

.adb-scan-fields .adb-tcp-input {
    width: 100%;
    min-width: 0;
}

.adb-scan-port-field .adb-tcp-input {
    text-align: center;
}

.adb-scan-actions {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
}

.adb-scan-run {
    min-height: 34px;
    padding: 0.28rem 0.95rem;
    border: 1px solid rgba(90, 226, 181, 0.72);
    border-radius: 0.52rem;
    background: linear-gradient(180deg, rgba(36, 129, 96, 0.94), rgba(21, 88, 66, 0.96));
    color: #e6fff6;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.adb-scan-run:disabled,
.adb-scan-tab:disabled,
.adb-scan-fields input:disabled {
    opacity: 0.55;
    cursor: wait;
}

.adb-scan-status {
    min-width: 0;
    color: #8da8bf;
    font-size: 0.76rem;
    line-height: 1.35;
}

.adb-scan-status.pending {
    color: #bfe8ff;
}

.adb-scan-status.success {
    color: #bff5d1;
}

.adb-scan-status.error {
    color: #ffc6cb;
}

.adb-scan-results {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.45rem;
    max-height: 150px;
    overflow: auto;
}

.adb-scan-results:empty {
    display: none;
}

.adb-scan-result {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.48rem 0.58rem;
    border: 1px solid rgba(145, 198, 239, 0.18);
    border-radius: 0.52rem;
    background: rgba(7, 18, 29, 0.74);
    font-size: 0.74rem;
}

.adb-scan-result strong,
.adb-scan-result span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adb-scan-result strong {
    color: #e5f4ff;
}

.adb-scan-result span {
    color: #87a1b6;
    text-align: right;
}

.adb-scan-result.success {
    border-color: rgba(93, 222, 143, 0.34);
}

.adb-scan-result.success span {
    color: #9ce8ba;
}

.adb-scan-result.error {
    border-color: rgba(238, 111, 123, 0.34);
}

.adb-scan-result.error span {
    color: #ffb4bb;
}

.phone-worker-rental-open {
    min-height: 33px;
    border: 1px solid rgba(133, 196, 255, 0.82);
    border-radius: 0.52rem;
    background: linear-gradient(180deg, rgba(38, 84, 132, 0.88) 0%, rgba(26, 59, 96, 0.92) 100%);
    color: #e9f6ff;
    padding: 0.24rem 0.84rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}

.phone-worker-rental-open:hover {
    border-color: rgba(165, 221, 255, 0.95);
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.rental-api-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: radial-gradient(circle at 18% 0%, rgba(67, 136, 199, 0.2) 0%, rgba(8, 13, 20, 0.68) 52%),
        rgba(4, 8, 14, 0.74);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.rental-api-modal-backdrop.hidden {
    display: none;
}

.rental-api-modal-backdrop.visible {
    display: flex;
}

.rental-api-modal {
    width: min(760px, 100%);
    border-radius: 1rem;
    border: 1px solid rgba(135, 186, 230, 0.34);
    background: linear-gradient(145deg, rgba(14, 27, 42, 0.96) 0%, rgba(10, 19, 30, 0.98) 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.rental-api-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.rental-api-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ecf6ff;
}

.rental-api-close {
    border: 1px solid rgba(255, 210, 168, 0.42);
    color: #ffdfbf;
    background: rgba(86, 53, 28, 0.45);
    border-radius: 0.45rem;
    padding: 0.18rem 0.62rem;
    cursor: pointer;
}

.rental-api-close:hover {
    border-color: rgba(255, 220, 186, 0.72);
    background: rgba(118, 72, 38, 0.52);
}

.rental-api-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.rental-api-field {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.rental-api-field > span {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #b9d4ec;
}

.rental-api-field input {
    height: 36px;
    border-radius: 0.55rem;
    border: 1px solid rgba(143, 193, 234, 0.34);
    background: rgba(9, 20, 32, 0.9);
    color: #ebf5ff;
    padding: 0.38rem 0.58rem;
    font-size: 0.84rem;
}

.rental-api-field input:focus {
    outline: none;
    border-color: rgba(161, 219, 255, 0.86);
    box-shadow: 0 0 0 2px rgba(91, 171, 236, 0.22);
}

.rental-api-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rental-api-actions > button {
    min-height: 33px;
    border-radius: 0.5rem;
    border: 1px solid rgba(149, 206, 248, 0.58);
    background: linear-gradient(180deg, rgba(28, 69, 106, 0.92) 0%, rgba(20, 52, 83, 0.95) 100%);
    color: #e8f4ff;
    padding: 0.22rem 0.78rem;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
}

.rental-api-actions > button:hover {
    border-color: rgba(183, 227, 255, 0.9);
    filter: brightness(1.08);
}

.rental-api-public-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.62rem;
    border: 1px solid rgba(105, 221, 155, 0.34);
    border-radius: 0.68rem;
    background: linear-gradient(90deg, rgba(23, 91, 60, 0.38), rgba(10, 29, 40, 0.62));
}

.rental-api-public-link.hidden {
    display: none;
}

.rental-api-public-link > span {
    color: #9de7bb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rental-api-public-link > a {
    min-width: 0;
    overflow: hidden;
    color: #d9f3ff;
    font-size: 0.76rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rental-api-public-link > a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.rental-api-public-link > button {
    min-height: 30px;
    padding: 0.18rem 0.65rem;
    border-radius: 0.45rem;
    font-size: 0.74rem;
    cursor: pointer;
}

.rental-api-output {
    margin: 0;
    border-radius: 0.68rem;
    border: 1px solid rgba(147, 196, 236, 0.24);
    background: rgba(8, 18, 30, 0.86);
    color: #cce6ff;
    min-height: 220px;
    max-height: 320px;
    overflow: auto;
    padding: 0.72rem;
    font-size: 0.76rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.rental-api-output.error {
    color: #ffd3d8;
    border-color: rgba(230, 122, 132, 0.5);
    background: rgba(68, 29, 37, 0.66);
}

.phone-worker-status {
    min-width: 122px;
    min-height: 33px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.55rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    color: var(--device-muted);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background: rgba(11, 21, 34, 0.62);
}

.phone-worker-status.pending {
    color: #c4dcf3;
    border-color: rgba(123, 176, 223, 0.48);
    background: rgba(30, 52, 74, 0.66);
}

.phone-worker-status.success {
    color: #d7ffe5;
    border-color: rgba(116, 214, 144, 0.58);
    background: rgba(28, 70, 48, 0.68);
}

.phone-worker-status.error {
    color: #ffd4d8;
    border-color: rgba(230, 122, 132, 0.54);
    background: rgba(84, 33, 41, 0.62);
}

@media (max-width: 1120px) {
    #devices {
        padding: 1rem;
    }

    #devices .device-list > div[id^='tracker_instance'] {
        grid-template-columns: 1fr;
    }

    #devices .device-header {
        grid-template-columns: 1fr;
    }

    #devices .device-render-window {
        min-width: 0;
    }

    .phone-worker-config {
        padding: 0.72rem 0.8rem;
    }

    .phone-worker-meta {
        min-width: 0;
    }

    .phone-worker-hint {
        display: none;
    }

    .adb-tcp-connect {
        width: 100%;
        padding-left: 0;
        padding-top: 0.55rem;
        border-left: 0;
        border-top: 1px solid rgba(145, 198, 239, 0.18);
        flex-wrap: wrap;
    }

    .adb-tcp-ip {
        flex: 1 1 150px;
        width: auto;
    }

    .adb-tcp-status {
        max-width: 100%;
    }

    .adb-scan-panel {
        grid-template-columns: 1fr;
    }

    .adb-scan-mode {
        grid-template-columns: 1fr 1fr;
    }

    .adb-scan-actions,
    .adb-scan-results {
        grid-column: 1;
    }

    .phone-worker-status {
        min-width: 0;
    }

    .rental-api-modal-grid {
        grid-template-columns: 1fr;
    }

    .rental-api-modal {
        padding: 0.82rem;
    }

    .rental-api-output {
        min-height: 170px;
        max-height: 280px;
    }

    .rental-api-public-link {
        grid-template-columns: 1fr 1fr;
    }

    .rental-api-public-link > span,
    .rental-api-public-link > a {
        grid-column: 1 / -1;
    }
}

/* Shared group layout: section headers span the table and devices stay as compact horizontal rows. */
#devices .device-list > div[id^='tracker_instance'] {
    display: flex;
    flex-direction: column;
    gap: 0.68rem;
    max-width: 1640px;
}

#devices .tracker-name {
    max-width: 1640px;
}

#devices .device-list div.device {
    display: grid;
    grid-template-columns: minmax(560px, 1.15fr) minmax(440px, 0.85fr);
    gap: 0.85rem;
    align-items: center;
    padding: 0.72rem 0.82rem;
    border-radius: 0.72rem;
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.22);
}

#devices .device-header {
    display: grid;
    grid-template-columns: minmax(210px, 1.4fr) minmax(135px, 0.9fr) auto auto auto minmax(180px, 1fr);
    gap: 0.58rem;
    align-items: center;
}

#devices .device-header > div {
    min-width: 0;
}

#devices .device-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
}

#devices .device-serial {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#devices .device-render-window {
    min-width: 0;
    padding: 0.36rem 0.44rem;
}

#devices .services {
    margin-top: 0;
    justify-content: flex-end;
    align-items: center;
}

#devices .device-group-section {
    width: 100%;
    box-sizing: border-box;
    min-height: 3.15rem;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.42rem;
    padding: 0.62rem 0.78rem 0.62rem 1rem;
    border: 1px solid rgba(112, 210, 173, 0.42);
    border-left: 4px solid rgba(87, 226, 171, 0.9);
    border-radius: 0.7rem;
    background:
        linear-gradient(90deg, rgba(26, 93, 69, 0.58) 0%, rgba(19, 50, 48, 0.54) 38%, rgba(15, 31, 45, 0.8) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

#devices .device-group-section.ungrouped {
    border-color: rgba(139, 179, 215, 0.28);
    border-left-color: rgba(139, 179, 215, 0.62);
    background: linear-gradient(90deg, rgba(39, 64, 85, 0.58) 0%, rgba(15, 31, 45, 0.78) 100%);
}

#devices .device-group-section.collapsed {
    opacity: 0.94;
}

#devices .device-group-section.expanded {
    border-bottom-left-radius: 0.35rem;
    border-bottom-right-radius: 0.35rem;
}

#devices .device-group-section-toggle {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    border: 0;
    outline-offset: 0.35rem;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#devices .device-group-section-name {
    color: #eafff5;
    font-size: 0.96rem;
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

#devices .device-group-section-count {
    color: #a9d8c7;
    font-size: 0.76rem;
    font-weight: 800;
}

#devices .device-group-section-actions,
#devices .device-group-chip-list,
#devices .device-group-manager-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

#devices .device-group-section-actions {
    cursor: default;
}

#devices .device-group-section-actions button,
#devices .device-group-open-button,
#devices .device-group-edit-button,
#devices .device-group-new-button {
    min-height: 1.85rem;
    padding: 0.18rem 0.58rem;
    border: 1px solid rgba(131, 218, 187, 0.48);
    border-radius: 0.45rem;
    background: rgba(21, 78, 60, 0.7);
    color: #ddfff1;
    font-size: 0.73rem;
    font-weight: 800;
    cursor: pointer;
}

#devices .device-group-edit-button,
#devices .device-group-section-actions button:last-child {
    border-color: rgba(139, 189, 230, 0.38);
    background: rgba(28, 54, 79, 0.72);
    color: #dcefff;
}

#devices .device-group-manager {
    width: 100%;
    flex: 1 0 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.58rem;
    padding-top: 0.72rem;
    border-top: 1px solid rgba(166, 203, 235, 0.18);
    text-transform: none;
    letter-spacing: 0;
}

#devices .device-group-manager-title {
    justify-content: flex-start;
    color: #dcecff;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

#devices .device-group-sync-status {
    padding: 0.1rem 0.44rem;
    border-radius: 999px;
    background: rgba(96, 214, 159, 0.12);
    color: #94e4bd;
    font-size: 0.68rem;
    letter-spacing: 0;
}

#devices .device-group-sync-status.error {
    background: rgba(237, 98, 104, 0.13);
    color: #ffb1b6;
}

#devices .device-group-new-button {
    margin-left: auto;
}

#devices .device-group-chip-list {
    align-items: stretch;
}

#devices .device-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 2.12rem;
    padding: 0.22rem 0.28rem 0.22rem 0.62rem;
    border: 1px solid rgba(113, 202, 169, 0.32);
    border-radius: 0.58rem;
    background: rgba(17, 47, 43, 0.72);
}

#devices .device-group-chip-name {
    color: #e9fff6;
    font-size: 0.78rem;
    font-weight: 850;
}

#devices .device-group-chip-count {
    color: #90cdb6;
    font-size: 0.7rem;
    font-weight: 800;
}

#devices .device-group-empty {
    color: #91a4b7;
    font-size: 0.76rem;
}

.device-group-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(3, 9, 15, 0.78);
    backdrop-filter: blur(6px);
}

.device-group-modal {
    width: min(680px, 100%);
    max-height: min(820px, calc(100vh - 2rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(129, 190, 229, 0.38);
    border-radius: 1rem;
    background: linear-gradient(145deg, #102131 0%, #09131f 100%);
    box-shadow: 0 28px 74px rgba(0, 0, 0, 0.55);
    color: #edf7ff;
}

.device-group-modal-header,
.device-group-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.92rem 1rem;
}

.device-group-modal-header {
    border-bottom: 1px solid rgba(155, 197, 230, 0.18);
}

.device-group-modal-header h3 {
    margin: 0.16rem 0 0;
    font-size: 1.08rem;
}

.device-group-modal-eyebrow {
    color: #77d8b1;
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.device-group-modal-close,
.device-group-modal-footer button,
.device-group-modal-device-header button {
    min-height: 2rem;
    padding: 0.2rem 0.68rem;
    border: 1px solid rgba(146, 188, 222, 0.35);
    border-radius: 0.48rem;
    background: rgba(24, 46, 67, 0.82);
    color: #dceeff;
    font-weight: 800;
    cursor: pointer;
}

.device-group-modal-body {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.74rem;
    padding: 0.92rem 1rem;
}

.device-group-modal-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #b9d0e3;
    font-size: 0.75rem;
    font-weight: 800;
}

.device-group-modal-field input {
    min-height: 2.35rem;
    box-sizing: border-box;
    border: 1px solid rgba(139, 187, 224, 0.36);
    border-radius: 0.58rem;
    background: rgba(5, 14, 23, 0.82);
    color: #f2f8ff;
    padding: 0.45rem 0.62rem;
}

.device-group-modal-device-header,
.device-group-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.device-group-modal-list {
    min-height: 180px;
    max-height: 450px;
    overflow: auto;
    border: 1px solid rgba(135, 180, 216, 0.2);
    border-radius: 0.7rem;
    background: rgba(4, 12, 20, 0.54);
}

.device-group-modal-device {
    display: grid;
    grid-template-columns: auto 2.4rem minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.54rem 0.62rem;
    border-bottom: 1px solid rgba(139, 181, 216, 0.12);
    cursor: pointer;
}

.device-group-modal-device.selected {
    background: rgba(40, 112, 83, 0.32);
}

.device-group-modal-order,
.device-group-modal-state {
    color: #8fa6bb;
    font-size: 0.7rem;
    font-weight: 900;
}

.device-group-modal-state.online {
    color: #79dfa8;
}

.device-group-modal-identity {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.device-group-modal-identity strong,
.device-group-modal-identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-group-modal-identity small {
    color: #899daf;
}

.device-group-modal-error {
    min-height: 1.1rem;
    color: #ffb0b7;
    font-size: 0.75rem;
    font-weight: 750;
}

.device-group-modal-footer {
    border-top: 1px solid rgba(155, 197, 230, 0.18);
}

.device-group-modal-actions {
    justify-content: flex-end;
}

.device-group-modal-footer button.primary {
    border-color: rgba(104, 223, 173, 0.58);
    background: rgba(27, 104, 73, 0.84);
    color: #e4fff2;
}

.device-group-modal-footer button.device-group-modal-delete {
    border-color: rgba(239, 112, 121, 0.42);
    background: rgba(92, 34, 43, 0.66);
    color: #ffd8dc;
}

@media (max-width: 1320px) {
    #devices .device-list div.device {
        grid-template-columns: 1fr;
    }

    #devices .services {
        justify-content: flex-start;
    }
}

@media (max-width: 820px) {
    #devices .tracker-name.tracker-name-with-actions {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #devices .tracker-name-with-actions .device-list-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin-top: 0.15rem;
        justify-self: stretch;
    }

    #devices .tracker-name-with-actions .tracker-title-text {
        grid-column: 1;
        grid-row: 1;
    }

    #devices .tracker-name-with-actions .tracker-summary-meta {
        grid-column: 2;
        grid-row: 1;
    }

    #devices .device-list-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #devices .device-list-action {
        width: 100%;
    }

    .device-controls-modal-backdrop {
        align-items: flex-end;
        padding: 0.7rem;
    }

    .device-controls-modal {
        max-height: calc(100vh - 1.4rem);
    }

    .device-settings-row {
        align-items: stretch;
        flex-direction: column;
        gap: 0.65rem;
    }

    .device-settings-row .global-control-bar-select {
        width: 100%;
    }

    #devices .device-header {
        grid-template-columns: 1fr auto;
    }

    #devices .device-render-window {
        grid-column: 1 / -1;
    }

    #devices .device-group-section {
        grid-template-columns: 1fr auto;
    }

    #devices .device-group-section-toggle {
        grid-column: 1 / -1;
        grid-template-columns: 1fr auto;
    }

    #devices .device-group-section-actions {
        grid-column: 1 / -1;
    }

    .device-group-modal-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .device-group-modal-actions,
    .device-group-modal-actions button,
    .device-group-modal-delete {
        width: 100%;
    }
}

body.file-listing {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    background-color: var(--global-page-background-solid, #070d15);
    background: var(
        --global-page-background,
        radial-gradient(circle at 14% 0%, rgba(88, 171, 255, 0.16) 0%, rgba(10, 16, 25, 0) 44%),
        radial-gradient(circle at 90% 4%, rgba(31, 109, 186, 0.2) 0%, rgba(10, 16, 25, 0) 42%),
        linear-gradient(180deg, #0d1420 0%, #0a111b 100%)
    );
    color: #e8f1ff;
}

body.file-listing::before {
    content: none;
}

.file-listing .listing {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(1220px, calc(100% - 2rem));
    margin: 1rem auto 1.4rem auto;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(143, 190, 238, 0.22);
    background: linear-gradient(180deg, rgba(12, 21, 34, 0.92) 0%, rgba(10, 18, 29, 0.96) 100%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
}

.file-listing .listing-header {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.file-listing .listing-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.72rem;
}

.file-listing .listing-toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(139, 194, 245, 0.42);
    border-radius: 0.58rem;
    background: linear-gradient(180deg, rgba(24, 45, 67, 0.9) 0%, rgba(17, 32, 48, 0.93) 100%);
    color: #e1efff;
    min-height: 1.95rem;
    padding: 0 0.76rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition:
        border-color 120ms ease,
        background-color 120ms ease,
        transform 120ms ease;
}

.file-listing .listing-toolbar-button:hover {
    border-color: rgba(174, 220, 255, 0.86);
    background: linear-gradient(180deg, rgba(34, 65, 95, 0.94) 0%, rgba(23, 43, 64, 0.96) 100%);
    transform: translateY(-1px);
}

.file-listing .listing-toolbar-button.hidden {
    display: none;
}

.file-listing .listing-title-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.file-listing .listing-title {
    margin: 0;
    color: #f4f9ff;
    font-size: clamp(1.14rem, 2.2vw, 1.36rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.file-listing .listing-device {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(152, 199, 245, 0.3);
    padding: 0.22rem 0.62rem;
    background: rgba(34, 57, 80, 0.5);
    color: #c4defa;
    font-size: 0.74rem;
    letter-spacing: 0.03em;
}

.file-listing .listing-path {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.82rem;
    color: #b8d4f2;
    border: 1px solid rgba(142, 188, 234, 0.22);
    border-radius: 0.62rem;
    background: rgba(19, 34, 50, 0.56);
    padding: 0.48rem 0.65rem;
    overflow-x: auto;
    white-space: nowrap;
}

.file-listing .quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.95rem;
}

.file-listing .quick-link-box {
    display: inline-flex;
}

.file-listing .quick-link-box.hidden {
    display: none;
}

.file-listing .quick-links a.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(142, 195, 244, 0.34);
    color: #ddedff;
    background: linear-gradient(180deg, rgba(28, 49, 71, 0.88) 0%, rgba(21, 36, 53, 0.9) 100%);
    min-height: 1.95rem;
    padding: 0 0.8rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    transition:
        border-color 120ms ease,
        background-color 120ms ease,
        transform 120ms ease;
}

.file-listing .quick-links a.icon:hover {
    border-color: rgba(173, 218, 255, 0.78);
    background: linear-gradient(180deg, rgba(35, 64, 95, 0.92) 0%, rgba(24, 43, 64, 0.95) 100%);
    transform: translateY(-1px);
}

.file-listing .listing-table-wrap {
    border: 1px solid rgba(141, 191, 240, 0.24);
    border-radius: 0.78rem;
    overflow: hidden;
    background: rgba(13, 24, 39, 0.82);
}

.file-listing .listing-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.file-listing .listing-table th,
.file-listing .listing-table td {
    box-sizing: border-box;
    text-align: left;
    border-bottom: 1px solid rgba(133, 176, 221, 0.16);
}

.file-listing .listing-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(30, 53, 79, 0.94) 0%, rgba(21, 39, 58, 0.96) 100%);
    color: #deecff;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.6rem 0.75rem;
}

.file-listing .listing-table tr:last-child td {
    border-bottom: none;
}

.file-listing .listing-table td {
    padding: 0.5rem 0.75rem;
    font-size: 0.84rem;
    color: #dbebfe;
}

.file-listing .listing-table tr:nth-child(2n) td {
    background: rgba(18, 31, 47, 0.48);
}

.file-listing .listing-table tr:hover td {
    background: rgba(48, 80, 114, 0.32);
}

.file-listing .listing-table tr.entry-row.clipboard-copy td {
    background: rgba(33, 98, 138, 0.4);
    color: #ddf5ff;
}

.file-listing .listing-table tr.entry-row.clipboard-copy:hover td {
    background: rgba(41, 120, 170, 0.5);
}

.file-listing .listing-table tr.entry-row.clipboard-copy .entry-name {
    box-shadow: inset 3px 0 0 rgba(97, 224, 255, 0.95);
}

.file-listing .listing-table tr.entry-row.clipboard-cut td {
    background: rgba(128, 73, 19, 0.42);
    color: #ffe9d3;
}

.file-listing .listing-table tr.entry-row.clipboard-cut:hover td {
    background: rgba(154, 85, 21, 0.52);
}

.file-listing .listing-table tr.entry-row.clipboard-cut .entry-name {
    box-shadow: inset 3px 0 0 rgba(255, 184, 107, 0.98);
}

.file-listing .entry-name {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-listing .listing-table .entry-size,
.file-listing .listing-table .entry-time {
    width: 160px;
    color: #b8d3f1;
    font-size: 0.8rem;
    white-space: nowrap;
}

.file-listing .listing-table .entry-size {
    width: 92px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.file-listing .listing-table a.icon {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    color: #dff0ff;
    text-decoration: none;
    gap: 0.45rem;
    padding-right: 0.15rem;
}

.file-listing .listing-table a.icon::before {
    content: '';
    display: inline-block;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 0;
    flex: 0 0 auto;
    box-shadow: none;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.file-listing .listing-table a.icon.dir::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2716%27 viewBox=%270 0 20 16%27%3E%3Cpath fill=%27%2368b8ff%27 d=%27M1.5 3.2A2.2 2.2 0 0 1 3.7 1h3.7l1.5 1.6h7.4a2.2 2.2 0 0 1 2.2 2.2v1H1.5z%27/%3E%3Crect x=%271.5%27 y=%275.1%27 width=%2717%27 height=%279.7%27 rx=%272%27 fill=%27%234e9de0%27/%3E%3C/svg%3E");
}

.file-listing .listing-table a.icon.file::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2718%27 viewBox=%270 0 16 18%27%3E%3Cpath fill=%27%2389efaf%27 d=%27M3 1h6l4 4v10.8c0 .7-.5 1.2-1.2 1.2H3c-.7 0-1.2-.5-1.2-1.2V2.2C1.8 1.5 2.3 1 3 1z%27/%3E%3Cpath fill=%27%23d9ffea%27 d=%27M9 1v4h4%27/%3E%3C/svg%3E");
}

.file-listing .listing-table a.icon.link::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 18 18%27%3E%3Cg fill=%27none%27 stroke=%27%23f4cd73%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M7 11 5.2 12.8a2.8 2.8 0 0 1-4-4L3 7%27/%3E%3Cpath d=%27m11 7 1.8-1.8a2.8 2.8 0 1 1 4 4L15 11%27/%3E%3Cpath d=%27M6 9h6%27/%3E%3C/g%3E%3C/svg%3E");
}

.file-listing .listing-table a.icon.up::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 18 18%27%3E%3Cpath fill=%27%23d39eff%27 d=%27M8 14V7.8H5.4L9 4l3.6 3.8H10v6.2z%27/%3E%3C/svg%3E");
}

.file-listing .listing-table a.icon:hover {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.file-listing .listing-table a.icon.clipboard-copy {
    color: #dbf6ff;
    font-weight: 700;
}

.file-listing .listing-table a.icon.clipboard-cut {
    color: #ffe7cf;
    font-weight: 700;
}

.file-listing .listing-table a.icon.clipboard-copy::after,
.file-listing .listing-table a.icon.clipboard-cut::after {
    content: attr(data-clipboard-action);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.35rem;
    border: 1px solid rgba(167, 215, 247, 0.42);
    border-radius: 999px;
    min-height: 1rem;
    padding: 0 0.34rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.file-listing .listing-table a.icon.clipboard-copy::after {
    border-color: rgba(120, 229, 255, 0.72);
    background: rgba(53, 131, 168, 0.45);
    color: #d8f6ff;
}

.file-listing .listing-table a.icon.clipboard-cut::after {
    border-color: rgba(255, 190, 125, 0.78);
    background: rgba(141, 87, 38, 0.48);
    color: #ffe8d3;
}

.file-listing a.push {
    color: #f7fbff;
}

.file-listing .background-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    border-radius: 0.4rem;
    background: linear-gradient(90deg, rgba(78, 175, 255, 0.35) 0%, rgba(101, 207, 255, 0.24) 100%);
    pointer-events: none;
    transition: width 120ms ease;
}

.file-listing .background-progress.finished {
    opacity: 0;
    transition:
        width 120ms ease,
        opacity 180ms ease;
}

.file-listing .background-progress.error {
    background: linear-gradient(90deg, rgba(255, 118, 118, 0.4) 0%, rgba(255, 96, 96, 0.28) 100%);
}

.file-listing .foreground {
    position: fixed;
    inset: 0;
    display: flex;
    z-index: 1000;
    background: rgba(9, 16, 26, 0.74);
    backdrop-filter: blur(3px);
}

.file-listing .foreground-message {
    flex: 1 1 auto;
    margin: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    border-radius: 1rem;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #d8e9ff;
    background: rgba(12, 22, 34, 0.68);
    border: 1px solid rgba(152, 196, 237, 0.34);
}

.file-listing .foreground-message.drop-target-message {
    border: 2px dashed rgba(150, 212, 255, 0.68);
}

.file-listing .file-context-menu {
    position: fixed;
    z-index: 1250;
    min-width: 164px;
    border: 1px solid rgba(153, 201, 245, 0.45);
    border-radius: 0.62rem;
    background: linear-gradient(180deg, rgba(22, 39, 57, 0.95) 0%, rgba(15, 29, 43, 0.97) 100%);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.file-listing .file-context-menu.hidden {
    display: none;
}

.file-listing .file-context-menu > button {
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: #e4f1ff;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.36rem 0.5rem;
    cursor: pointer;
}

.file-listing .file-context-menu > button:hover:not(:disabled) {
    border-color: rgba(158, 214, 255, 0.4);
    background: rgba(40, 71, 100, 0.68);
}

.file-listing .file-context-menu > button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.file-listing .file-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 15% 10%, rgba(62, 142, 218, 0.2) 0%, rgba(0, 0, 0, 0) 38%),
        rgba(4, 8, 14, 0.8);
    backdrop-filter: blur(4px);
}

.file-listing .file-modal {
    width: min(540px, calc(100vw - 1.5rem));
    border-radius: 0.85rem;
    border: 1px solid rgba(141, 194, 245, 0.32);
    background: linear-gradient(180deg, rgba(16, 30, 46, 0.97) 0%, rgba(10, 20, 31, 0.98) 100%);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.file-listing .file-modal-header {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid rgba(131, 188, 241, 0.22);
    background: rgba(24, 43, 63, 0.9);
}

.file-listing .file-modal-header h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #f2f8ff;
}

.file-listing .file-modal-body {
    padding: 0.82rem 0.85rem;
    color: #d7eaff;
}

.file-listing .file-modal-body p {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.45;
    color: #d7e9ff;
}

.file-listing .file-modal-lines {
    margin: 0.42rem 0 0 0;
    border: 1px solid rgba(135, 189, 240, 0.2);
    border-radius: 0.56rem;
    padding: 0.52rem 0.56rem;
    background: rgba(8, 15, 24, 0.78);
    color: #cfe4fb;
    font-size: 0.79rem;
    line-height: 1.4;
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.file-listing .file-modal-input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.64rem;
    border: 1px solid rgba(146, 197, 244, 0.36);
    border-radius: 0.56rem;
    min-height: 2rem;
    padding: 0 0.6rem;
    color: #edf6ff;
    background: rgba(8, 15, 24, 0.82);
    font-size: 0.83rem;
}

.file-listing .file-modal-input:focus {
    outline: 2px solid rgba(107, 186, 255, 0.72);
    outline-offset: 0;
}

.file-listing .file-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.68rem 0.85rem 0.8rem;
    border-top: 1px solid rgba(138, 191, 240, 0.16);
    background: rgba(8, 16, 25, 0.88);
}

.file-listing .file-modal-button {
    border: 1px solid rgba(137, 190, 238, 0.34);
    border-radius: 0.55rem;
    min-height: 1.95rem;
    padding: 0 0.75rem;
    color: #dcedff;
    background: linear-gradient(180deg, rgba(27, 48, 71, 0.88) 0%, rgba(19, 35, 52, 0.92) 100%);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.file-listing .file-modal-button:hover {
    border-color: rgba(173, 220, 255, 0.78);
    background: linear-gradient(180deg, rgba(37, 67, 99, 0.92) 0%, rgba(25, 46, 68, 0.94) 100%);
}

.file-listing .file-modal-button-primary {
    border-color: rgba(94, 198, 255, 0.65);
    background: linear-gradient(180deg, rgba(24, 85, 130, 0.94) 0%, rgba(18, 63, 97, 0.96) 100%);
}

.file-listing .file-modal-button-primary:hover {
    border-color: rgba(146, 223, 255, 0.9);
    background: linear-gradient(180deg, rgba(30, 104, 158, 0.96) 0%, rgba(21, 78, 119, 0.97) 100%);
}

.file-listing .file-modal-button-danger {
    border-color: rgba(255, 129, 129, 0.62);
    background: linear-gradient(180deg, rgba(136, 47, 47, 0.94) 0%, rgba(105, 35, 35, 0.96) 100%);
}

.file-listing .file-modal-button-danger:hover {
    border-color: rgba(255, 170, 170, 0.9);
    background: linear-gradient(180deg, rgba(170, 57, 57, 0.96) 0%, rgba(128, 43, 43, 0.97) 100%);
}

@media (max-width: 860px) {
    .file-listing .listing {
        width: calc(100% - 1rem);
        margin: 0.5rem auto 1rem auto;
        padding: 0.72rem;
    }

    .file-listing .listing-table th,
    .file-listing .listing-table td {
        padding: 0.46rem 0.52rem;
    }

    .file-listing .listing-table .entry-size,
    .file-listing .listing-table .entry-time {
        width: 128px;
        font-size: 0.74rem;
    }

    .file-listing .quick-links {
        gap: 0.38rem;
    }

    .file-listing .quick-links a.icon {
        min-height: 1.8rem;
        padding: 0 0.58rem;
    }

    .file-listing .file-modal-backdrop {
        padding: 0.5rem;
    }

    .file-listing .file-modal {
        width: 100%;
    }
}

#devices .ios-wda-device {
    border-left: 3px solid rgba(116, 211, 255, 0.72);
}

#devices .ios-wda-connect-panel::before {
    background: linear-gradient(180deg, rgba(116, 211, 255, 0.92) 0%, rgba(57, 142, 214, 0.42) 100%);
}

#devices .ios-wda-connect {
    flex-wrap: wrap;
}

#devices .ios-wda-connect .adb-tcp-port {
    width: 82px;
}

#devices .ios-platform-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.12rem 0.58rem;
    border: 1px solid rgba(116, 211, 255, 0.48);
    border-radius: 0.62rem;
    background: rgba(20, 82, 116, 0.5);
    color: #d8f5ff;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

#devices .device-header > .ios-device-meta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    color: #e8f5ff;
    font-size: 0.72rem;
    white-space: nowrap;
}

#devices .ios-device-meta span:last-child {
    color: var(--device-muted);
    font-size: 0.68rem;
}

#devices .ios-wda-device.connecting {
    border-left-color: rgba(255, 196, 76, 0.82);
}

#devices .ios-wda-device.not-active {
    border-left-color: rgba(255, 112, 112, 0.72);
}

#devices .ios-device-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.7rem;
    padding: 0.12rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

#devices .ios-device-status-dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

#devices .ios-device-status.online {
    border-color: rgba(116, 235, 153, 0.5);
    background: rgba(29, 78, 50, 0.38);
    color: #87f2aa;
}

#devices .ios-device-status.connecting {
    border-color: rgba(255, 196, 76, 0.5);
    background: rgba(103, 76, 18, 0.38);
    color: #ffd978;
}

#devices .ios-device-status.offline {
    border-color: rgba(255, 112, 112, 0.48);
    background: rgba(91, 32, 39, 0.42);
    color: #ffaaaa;
}

#devices .ios-device-unavailable {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.2rem 0.7rem;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 0.62rem;
    color: var(--device-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

#devices .ios-device-unavailable.connecting {
    border-color: rgba(255, 196, 76, 0.42);
    color: #ffd978;
}

#devices .ios-device-unavailable.offline {
    border-color: rgba(255, 112, 112, 0.38);
    color: #ffb1b1;
}

#devices .tracker-summary-badge.pending {
    border-color: rgba(255, 196, 76, 0.5);
    background: rgba(103, 76, 18, 0.4);
    color: #ffd978;
}

html.ios-wda-viewer-root,
body.ios-wda-viewer-page {
    min-width: 320px;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #04080f !important;
    color: #edf8ff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ios-viewer {
    width: 100%;
    height: 100vh;
    min-height: 0;
    background: linear-gradient(180deg, #070d15 0%, #060b12 100%);
}

.ios-viewer-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-control-bar-size);
    align-items: stretch;
}

.ios-viewer.controls-collapsed .ios-viewer-stage {
    grid-template-columns: minmax(0, 1fr) 0;
}

.ios-phone-frame {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #04080f;
}

.ios-phone-frame canvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    background: #000;
    cursor: crosshair;
    outline: none;
    touch-action: none;
    user-select: none;
}

.ios-mjpeg-binary-surface,
.ios-mjpeg-wda-frame {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
    pointer-events: none;
}

.ios-mjpeg-binary-surface[hidden],
.ios-mjpeg-wda-frame[hidden] {
    display: none;
}

.ios-mjpeg-binary-surface {
    position: relative;
}

.ios-mjpeg-binary-frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
}

.ios-mjpeg-binary-frame.active {
    opacity: 1;
}

.ios-phone-frame.image-mode canvas {
    position: absolute;
    z-index: 2;
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    background: transparent;
}

.ios-viewer-controls {
    box-sizing: border-box;
    width: var(--side-control-bar-size);
    min-width: var(--side-control-bar-size);
    height: 100%;
    min-height: 0;
    padding: var(--side-control-bar-padding);
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-left: 1px solid rgba(125, 163, 198, 0.28);
    background: var(--side-control-bar-background);
}

.ios-viewer.controls-collapsed .ios-viewer-controls {
    display: none;
}

.ios-viewer-control-group {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: var(--side-control-button-gap);
}

.ios-viewer-control-tools {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.ios-viewer-control-tools::-webkit-scrollbar {
    display: none;
}

.ios-viewer-control-navigation {
    margin-top: auto;
}

.ios-viewer-controls button {
    box-sizing: border-box;
    flex: 0 0 var(--side-control-button-size);
    width: var(--side-control-button-size);
    height: var(--side-control-button-size);
    min-width: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--side-control-button-radius);
    background: transparent;
    color: var(--svg-button-fill, #fff);
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.ios-viewer-controls button:hover,
.ios-viewer-controls button.active {
    border-color: var(--side-control-hover-border-color);
    background: var(--side-control-hover-background);
}

.ios-viewer-controls button:active {
    transform: translateY(1px) scale(0.985);
}

.ios-viewer-controls button:focus-visible {
    outline: 2px solid rgba(126, 195, 255, 0.88);
    outline-offset: 1px;
}

.ios-viewer-controls button svg {
    width: var(--side-control-icon-size);
    height: var(--side-control-icon-size);
    fill: currentColor;
    pointer-events: none;
    transition: transform 120ms ease, fill 120ms ease;
}

.ios-viewer-controls button:hover svg {
    transform: scale(1.08);
}

.ios-viewer-controls-collapse {
    margin-bottom: 0.55rem;
}

.ios-viewer-controls .ios-viewer-controls-collapse svg,
.ios-viewer-controls-restore svg {
    transform: rotate(180deg);
}

.ios-viewer-controls .ios-viewer-controls-collapse:hover svg,
.ios-viewer-controls-restore:hover svg {
    transform: rotate(180deg) scale(1.08);
}

.ios-viewer-controls-restore {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    right: 0.6rem;
    z-index: 20;
    width: 2.3rem;
    height: 2.3rem;
    padding: 0;
    border: 1px solid rgba(173, 202, 228, 0.36);
    border-radius: 0.75rem;
    background: linear-gradient(180deg, rgba(19, 28, 39, 0.9) 0%, rgba(9, 14, 22, 0.94) 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: var(--svg-button-fill, #fff);
    cursor: pointer;
    transform: translateY(-50%);
}

.ios-viewer-controls-restore[hidden] {
    display: none;
}

.ios-viewer-controls-restore svg {
    width: 1.08rem;
    height: 1.08rem;
    fill: currentColor;
    pointer-events: none;
    transition: transform 120ms ease;
}

.ios-viewer-controls-restore:hover {
    border-color: rgba(128, 194, 255, 0.72);
}

.ios-viewer-controls-restore:active {
    transform: translateY(-50%) scale(0.985);
}

.ios-viewer-controls-restore:focus-visible {
    outline: 2px solid rgba(126, 195, 255, 0.88);
    outline-offset: 1px;
}

.ios-settings-panel {
    box-sizing: border-box;
    position: absolute;
    inset: 0.5rem;
    z-index: 12;
    padding: 0.75rem;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.6rem;
    background: rgba(20, 30, 42, 0.92);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
}

.ios-settings-panel[hidden] {
    display: none;
}

.ios-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ios-settings-title {
    font-size: 1rem;
    font-weight: 700;
}

.ios-settings-panel button {
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.4rem;
    background: rgba(8, 14, 20, 0.52);
    color: #edf8ff;
    font: inherit;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.ios-settings-header button {
    padding: 0.3rem 0.72rem;
}

.ios-settings-panel button:hover:not(:disabled) {
    border-color: rgba(120, 190, 255, 0.68);
    background: rgba(40, 92, 140, 0.45);
}

.ios-settings-panel button:active:not(:disabled) {
    transform: scale(0.97);
}

.ios-settings-section {
    padding: 0.75rem;
    border: 1px solid rgba(125, 163, 198, 0.2);
    border-radius: 0.55rem;
    background: rgba(5, 12, 20, 0.42);
}

.ios-settings-section + .ios-settings-section {
    margin-top: 0.65rem;
}

.ios-text-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.45rem;
}

.ios-text-settings textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
    padding: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 0.4rem;
    background: rgba(8, 14, 20, 0.55);
    color: #edf8ff;
    font: inherit;
}

.ios-text-settings button,
.ios-video-settings > button {
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
}

.ios-settings-label {
    display: block;
    margin-bottom: 0.6rem;
    color: #c8d9e7;
    font-size: 0.84rem;
    font-weight: 700;
}

.ios-control-mode-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ios-control-mode-options button {
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
}

.ios-control-mode-options button.active {
    border-color: rgba(91, 224, 135, 0.68);
    background: rgba(31, 111, 72, 0.55);
    color: #d7ffe4;
}

.ios-video-quality-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: #d5e3ee;
    font-size: 0.78rem;
}

.ios-video-quality-row button {
    min-width: 4.9rem;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
}

.ios-video-quality-row button.active {
    border-color: rgba(91, 224, 135, 0.72);
    background: rgba(31, 111, 72, 0.55);
    color: #d7ffe4;
}

.ios-custom-video-settings {
    margin: 0.75rem 0;
    display: grid;
    gap: 0.65rem;
}

.ios-custom-video-settings[hidden] {
    display: none;
}

.ios-custom-video-settings label {
    display: grid;
    grid-template-columns: 4rem 3rem minmax(8rem, 1fr);
    align-items: center;
    gap: 0.5rem;
    color: #c8d9e7;
    font-size: 0.78rem;
}

.ios-custom-video-settings output {
    text-align: right;
    color: #edf8ff;
}

.ios-custom-video-settings input[type=range] {
    width: 100%;
}

.ios-video-settings > button {
    margin-top: 0.65rem;
}

.ios-control-mode-options button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.ios-viewer-toast {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    z-index: 20;
    max-width: calc(100% - 2rem);
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(110, 208, 145, 0.6);
    border-radius: 0.45rem;
    background: rgba(13, 45, 30, 0.94);
    color: #dcffe7;
    font-size: 0.75rem;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.45rem);
    transition: opacity 140ms ease, transform 140ms ease;
}

.ios-viewer-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ios-viewer-toast.error {
    border-color: rgba(255, 123, 123, 0.75);
    background: rgba(102, 24, 30, 0.94);
    color: #ffe0e0;
}

/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */

/**
 *  Default styles for xterm.js
 */

.xterm {
    cursor: text;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm .xterm-scroll-area {
    visibility: hidden;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility,
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    opacity: 0.5;
}

.xterm-underline {
    text-decoration: underline;
}

.xterm-strikethrough {
    text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
	z-index: 6;
	position: absolute;
}

.xterm-decoration-overview-ruler {
    z-index: 7;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.xterm-decoration-top {
    z-index: 2;
    position: relative;
}


body.devtools {
    font-family: Ubuntu, Arial, sans-serif;
    font-size: 13px;
    background-color: var(--global-page-background-solid, #070d15);
    background: var(
        --global-page-background,
        radial-gradient(circle at 14% 0%, rgba(88, 171, 255, 0.16) 0%, rgba(10, 16, 25, 0) 44%),
        radial-gradient(circle at 90% 4%, rgba(31, 109, 186, 0.2) 0%, rgba(10, 16, 25, 0) 42%),
        linear-gradient(180deg, #0d1420 0%, #0a111b 100%)
    );
    color: #e8f1ff;
}

body.devtools .device {
    padding: 20px;
}

body.devtools .device-header {
    -webkit-box-align: baseline;
    -webkit-box-orient: horizontal;
    display: -webkit-box;
    margin: 10px 0 0;
    padding: 2px 0;
}

body.devtools .device-name {
    font-size: 150%;
}

body.devtools .device-serial {
    color: var(--url-color);
    font-size: 80%;
    margin-left: 6px;
}

body.devtools .browser-header {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    min-height: 33px;
    padding-top: 10px;
}

body.devtools .browser-header > .browser-name {
    font-size: 110%;
    font-weight: bold;
}

body.devtools div.list {
    margin-top: 5px;
}

body.devtools div.list > .row {
    padding: 6px 0;
    position: relative;
}

body.devtools .properties-box {
    display: flex;
}

body.devtools .properties-box > img {
    flex-shrink: 0;
    height: 23px;
    padding-left: 2px;
    padding-right: 5px;
    vertical-align: top;
    width: 23px;
}

body.devtools .subrow-box {
    display: inline-block;
    vertical-align: top;
}

body.devtools .subrow {
    display: flex;
    flex-flow: row wrap;
}

body.devtools .subrow > div {
    margin-right: 0.5em;
}

.body.devtools url {
    color: var(--url-color);
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

body.devtools .action {
    color: var(--link-color);
    cursor: pointer;
    margin-right: 15px;
}

body.devtools .action.disabled {
    color: var(--url-color);
    cursor: not-allowed;
}

body.devtools a.action {
    text-decoration: none;
}

body.devtools a.action.copy {
    cursor: copy;
}

body.devtools .browser-header .action {
    margin-left: 10px;
}

body.devtools .open > input {
    border: 1px solid #aaa;
    height: 17px;
    line-height: 17px;
    margin-left: 20px;
    padding: 0 2px;
}

body.devtools .tooltip {
    z-index: 1;
    position: absolute;
    padding: 2px;
    color: var(--controls-bg-color);
    background-color: var(--text-color);
}