/** Design tokens */
:root {
    --bg: #0f1115;
    --surface: #191c23;
    --surface-raised: #232733;
    --surface-overlay: #272c3a;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text: #e8eaf1;
    --text-dim: #a0a6b5;
    --accent: #5865f2;
    --accent-strong: #7583ff;
    --accent-soft: rgba(88, 101, 242, 0.22);
    --warning: #ffb74d;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55);
}

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

body {
    background-color: var(--bg);
    /* Single static paint; disabled on the stream pages below. */
    background-image: radial-gradient(1100px 500px at 50% -100px, rgba(88, 101, 242, 0.10), transparent 70%);
    background-repeat: no-repeat;
    color: var(--text);
    font-size: 1.2rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    margin: 0;
}

/* Prevent pull down refresh when Streaming */
html.stream,
body.stream {
    overscroll-behavior: none !important;
}

/* Keep the stream pages a flat color: no gradient paint behind the video */
body.stream {
    background-image: none;
}

h1 {
    color: var(--text);
}

h2,
h3 {
    margin-top: 12px;
    margin-bottom: 8px;
}

/** Scrollbars (Chromium) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/** Input Div */
.input-div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/** Hide the file input */
input[type="file"] {
    display: none;
}

/** Label */
.file-label,
label {
    cursor: default;
    margin-right: 5px;
    margin-left: 5px;
    color: var(--text);
}

/** Button — neutral by default; the accent is reserved for primary
    actions (form submit / .button-primary) so a wall of utility buttons
    doesn't glow blue on the dark theme */
.file-button,
button {
    background-color: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    margin: 8px;
    font-size: 1.15rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.file-button:hover,
button:hover {
    background-color: var(--surface-overlay);
    border-color: rgba(255, 255, 255, 0.35);
}

button[type="submit"],
.button-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: white;
}

button[type="submit"]:hover,
.button-primary:hover {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
    box-shadow: 0 4px 14px var(--accent-soft);
}

button:focus-visible,
.file-button:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

/** Checkbox */
input[type="checkbox"] {
    /* remove native box */
    appearance: none;
    vertical-align: middle;
    min-width: 24px;
    min-height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

input[type="checkbox"]::after {
    content: "✓";
    color: white;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    /* start hidden */
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

input[type="checkbox"]:checked {
    /* box fill */
    background: var(--accent);
    border-color: var(--accent);
}

input[type="checkbox"]:checked::after {
    /* scale in */
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/** Text Field likes  */
.textlike,
textarea,
select,
input[type=text],
input[type=password],
input[type=number] {
    color: var(--text);
    font-size: 1.15rem;
    font-family: inherit;
    margin: 5px;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    /* multiline */
    overflow-x: auto;
    overflow-y: auto;
    white-space: pre-wrap;

    max-height: max-content;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.textlike:hover,
textarea:hover:enabled,
select:hover:enabled,
input[type=text]:hover:enabled,
input[type=password]:hover:enabled,
input[type="number"]:hover:enabled {
    background-color: rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
}

textarea:focus,
select:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea:disabled,
select:disabled,
input[type=text]:disabled,
input[type=password]:disabled,
input[type=number]:disabled {
    color: var(--text-dim);
}

select option {
    background-color: var(--surface-raised);
}

/** Select Buttons */
.select-button-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    margin: 5px;
}

.select-button {
    background-color: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border-strong);
    margin: 0;
}

.select-button:hover {
    background-color: var(--surface-overlay);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

.select-button.selected {
    background-color: var(--accent);
    border-color: var(--accent);
    color: white;
}

.select-button.selected:hover {
    background-color: var(--accent-strong);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/** Hide the number up down thingy on number inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    /* <-- Apparently some margin are still there even though it's hidden */
    margin: 0;
}

input[type=number] {
    appearance: textfield;
    /* Firefox */
    -moz-appearance: textfield;
}

/** Range sliders (e.g. Shadow Boost in the stream sidebar) */
input[type="range"] {
    accent-color: var(--accent);
}

/** Modal */
.modal-background {
    display: block;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    overflow-y: auto;
    /** animation */
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, background 0.1s linear, opacity 0.1s linear;
}

.modal-content {
    background-color: var(--surface);

    margin: 12vh auto 40px;
    padding: 24px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: var(--shadow-2);

    width: 80%;
    max-width: 520px;

    color: var(--text);
}

@media (max-height: 500px) {
    .modal-content {
        margin: 10px auto;
    }
}

.stream .modal-content {
    max-width: none;
}

.modal-disabled {
    /** animation */
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: all 0.1s linear;
}

/** Context Menu */
.context-menu-background {
    display: block;
    position: fixed;
    z-index: 2;
    border-radius: 10px;
    background-color: var(--surface-overlay);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-2);
    /** animation */
    scale: 1;
    opacity: 1;
    translate: 0 0;
    transition: visibility 0s, opacity 0.05s linear, scale 0.05s linear, translate 0.05s linear;
}

.context-menu-list {
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 6px;
}

.context-menu-element {
    margin: 0;
    padding: 12px 18px;
    min-width: 160px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 1.05rem;
    white-space: nowrap;
    user-select: none;
    /** animation */
    transition: all 0.15s;
    background-color: rgba(255, 255, 255, 0);
    color: var(--text);
}

.context-menu-element:hover {
    /** animation */
    transition: all 0.2s;
    background-color: rgba(255, 255, 255, 0.12);
}

.context-menu-disabled {
    visibility: hidden;
    /** animation */
    opacity: 0;
    scale: 0.7;
    translate: -30% -30%;
    transition: all 0.1s linear, opacity 0.1s ease-out;
}

/** Sidebar */
.sidebar-overlay {
    position: fixed;
    z-index: 1;
    pointer-events: none;
}

.sidebar-background {
    display: flex;
    align-items: center;
    /** animation */
    transition: all 0.2s 0s linear;
}

.sidebar-background * {
    pointer-events: all;
}

.sidebar-overlay.sidebar-edge-left {
    top: 50%;
    left: 0;
}

.sidebar-edge-left .sidebar-background {
    flex-direction: row-reverse;
    transform: translate(calc(-100% + 30px), -50%);
}

.sidebar-overlay.sidebar-edge-right {
    top: 50%;
    right: 0;
}

.sidebar-edge-right .sidebar-background {
    flex-direction: row;
    transform: translate(calc(100% - 30px), -50%);
}

.sidebar-edge-left.sidebar-show .sidebar-background,
.sidebar-edge-right.sidebar-show .sidebar-background {
    transform: translate(0, -50%);
}

.sidebar-overlay.sidebar-edge-up {
    top: 0;
    left: 50%;
}

.sidebar-edge-up .sidebar-background {
    flex-direction: column-reverse;
    transform: translate(-50%, calc(-100% + 30px));
}

.sidebar-overlay.sidebar-edge-down {
    bottom: 0;
    left: 50%;
}

.sidebar-edge-down .sidebar-background {
    flex-direction: column;
    transform: translate(-50%, calc(100% - 30px));
}

.sidebar-edge-down.sidebar-show .sidebar-background,
.sidebar-edge-up.sidebar-show .sidebar-background {
    transform: translate(-50%, 0);
}

.sidebar-button {
    /** Note: Button full size: 30px(width / height) + 5px(padding as in button selector) + 5px(.sidebar-background gap) = 40px */
    width: 30px;
    height: 30px;
    padding: 5px;
    /* no border: it would add to the size math above */
    border: none;
    background-color: rgba(20, 22, 28, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.sidebar-button:hover {
    background-color: rgba(45, 50, 62, 0.9);
    border-color: transparent;
}

.sidebar-button-image {
    transition: all 0.3s linear;
}

.sidebar-edge-left .sidebar-button-image {
    rotate: 180deg;
}

.sidebar-edge-right .sidebar-button-image {
    rotate: 0deg;
}

.sidebar-edge-up .sidebar-button-image {
    rotate: 270deg;
}

.sidebar-edge-down .sidebar-button-image {
    rotate: 90deg;
}

.sidebar-show .sidebar-button-image {
    transform: rotate(180deg);
}


.sidebar-content {
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    padding: 12px;
    display: flex;
    flex-direction: column;
    /* Cap to the viewport and scroll: on phones the full menu is taller
       than the screen and its overflow was simply clipped, making the
       bottom buttons unreachable. (dvh accounts for mobile URL bars.) */
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    max-width: calc(100vw - 70px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* On the up/down edges the toggle button sits above/below the panel,
   so leave room for it too */
.sidebar-edge-up .sidebar-content,
.sidebar-edge-down .sidebar-content {
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
}

/** TODO: reorder stream sidebar */

/** Errors */
.error-list {
    visibility: hidden;
    position: fixed;
    z-index: 5;

    right: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;
    margin: 0 16px 4px 0;
    padding: 0;
}

.error-element {
    visibility: visible;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    padding: 12px 16px;
    margin-bottom: 12px;
    max-width: 420px;

    background-color: var(--surface-overlay);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1);
}

.error-image {
    flex-shrink: 0;
}

.error-message {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    word-break: break-word;
}

/** Animated Lists */
.animated-list-element {
    /** animation */
    opacity: 0;
}

.animated-list-element.list-show {
    /** animation */
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/** Actions */
.actions-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/** Settings */
.open-settings {
    background-image: url("resources/settings.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60px;
    width: 70px;
    height: 70px;
}

.fullscreen-launch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.85;
    margin: 0;
    padding: 0;
}

.fullscreen-launch:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.settings {
    color: var(--text);
}

/** Hosts */
.host-add {
    background-image: url("resources/ic_add_to_queue_white_48px.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60px;
    width: 70px;
    height: 70px;
}

.host-list {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
    padding: 8px 0 24px;
}

.host-element {
    cursor: pointer;
    padding: 20px 28px 24px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.host-element:hover {
    background-color: var(--surface-raised);
    border-color: var(--border-strong);
    transform: translateY(-3px);
    box-shadow: var(--shadow-1);
}

.host-element>div {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.host-image {
    width: 200px;
    height: auto;
}

.host-image-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 7px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
}

/* No status to show (or not fetched yet) — hide the badge entirely */
.host-image-overlay:not([src]),
.host-image-overlay[src=""] {
    display: none;
}

.host-name {
    margin: 10px 0 0;
    color: var(--text);
    font-size: 1.8rem;
    text-align: center;
}

/** Apps */
.app-list {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 8px 0 24px;
}

.app-element {
    border-radius: var(--radius);
    transition: background-color 0.2s ease;
}

.app-element>div {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 12px;
}

.app-element:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.app-element:hover .app-image {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

.app-image {
    /** Ratio: w:h 200:266 */
    width: 200px;
    height: 266px;
    object-fit: cover;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: var(--shadow-1);
    /** animation */
    opacity: 0;
    transition: opacity 0.4s linear, transform 0.15s ease, box-shadow 0.2s ease, filter 0.3s ease;
}

.app-image-loaded {
    /** animation */
    opacity: 1;
    transition: opacity 0.1s ease-in, transform 0.15s ease, box-shadow 0.2s ease, filter 0.3s ease;
}

.app-title {
    margin: 10px 0 0;
    max-width: 200px;
    color: var(--text);
    font-size: 1.05rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* Keep this after the :hover rules so the running game keeps its accent
   ring while hovered (a box-shadow ring avoids the layout shift a border
   would cause) */
.app-active .app-image {
    box-shadow: 0 0 0 3px var(--accent-strong), 0 6px 24px var(--accent-soft);
}

.app-active .app-title {
    color: var(--accent-strong);
}

/* Another game is running: dim the poster but keep the title readable */
.app-inactive .app-image {
    filter: brightness(35%) saturate(50%);
}

.app-inactive .app-title {
    color: var(--text-dim);
}

/** Stream Connect Modal */
.modal-video-connect {
    max-width: 100%;
    max-height: 100%;
}

.modal-video-connect .modal-video-connect-debug {
    max-width: 75vw;
    max-height: 40vh;
}

/** Stream */
.video-stream {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100vw;
    max-height: 100vh;
    min-width: 100vmin;
    min-height: 100vmin;
    width: auto;
    height: auto;
    outline: none;
}

canvas.video-stream {
    /* Override the centering transform from .video-stream — transform forces the compositor
       to apply a matrix on every vsync even when the canvas content hasn't changed.
       For a full-viewport canvas, position: fixed + inset: 0 achieves the same layout
       without any per-frame compositor cost. */
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    height: 100vh;
    min-width: unset;
    min-height: unset;
    max-width: unset;
    max-height: unset;
    object-fit: contain;
    will-change: contents;
}

video.video-stream.video-stream-stretched {
    width: 100vw;
    height: 100vh;
    min-width: unset;
    min-height: unset;
    object-fit: fill;
}

/** Stream Stats Overlay */
.stream-stats-overlay {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    color: #0f0;
    font-family: "Courier New", monospace;
    font-size: 0.75rem;
    padding: 8px 12px;
    border-radius: 4px;
    pointer-events: none;
    line-height: 1.5;
    min-width: 180px;
    max-width: min(720px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    overflow: hidden;
}

.stream-stats-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.stream-stats-label {
    color: #ccc;
    flex-shrink: 0;
}

.stream-stats-value {
    color: #0f0;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Landscape phones: the ~23 rows are taller than the viewport, and the
   overlay is pointer-events: none so it can never be scrolled — flow the
   rows into two columns and shrink the font so every stat stays visible. */
@media (max-height: 560px) {
    .stream-stats-overlay {
        column-count: 2;
        column-gap: 18px;
        font-size: 0.65rem;
        line-height: 1.35;
        padding: 6px 10px;
    }

    .stream-stats-overlay .stream-stats-row {
        break-inside: avoid;
    }

    /* the "[ stream stats ]" header spans both columns */
    .stream-stats-overlay .stream-stats-row:first-child {
        column-span: all;
    }
}

.sidebar-stream {
    display: flex;
    flex-direction: column;
}

.sidebar-stream div {
    padding: 5px;
}

.sidebar-stream-buttons {
    display: grid;
    grid-template-columns: 50% 50%;
}

.sidebar-build-tag {
    margin-top: 6px;
    padding: 4px 8px;
    font-size: 0.75rem;
    color: var(--text-dim);
    word-break: break-all;
}

.hiddeninput {
    position: fixed;
    width: 1px;
    height: 1px;
    bottom: -9999px;
    right: -9999px;
    z-index: -9999;
    opacity: 0;
    pointer-events: none;
    resize: none;
    border: none;
}

/** Input-only page (input.html) */

/* The dummy `#input` element doubles here as the visible input surface — the
   whole area below the toolbar. Touches/clicks anywhere on it are sent to the
   host; touches on the toolbar (a separate, fixed-position sibling on top of
   it) never reach it, so the buttons can't also register as clicks.

   Position and height are set by JavaScript (input.ts) to account for the
   toolbar's actual height and viewport changes (e.g., soft keyboard appearing
   on mobile). This ensures the toolbar buttons stay accessible even when the
   soft keyboard appears/disappears. */
.input-only-surface {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 0;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 16px);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

.input-only-surface-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80vw;
    padding: 0 24px;
    text-align: center;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

/* Deliberately NOT positioned: the screen keyboard's hidden textarea is
   appended into this div and relies on escaping to the viewport as its
   containing block (see .hiddeninput's `translate: 200vw 200vh`) — giving
   this element `position` would make it that containing block instead and
   pull the "hidden" textarea back on screen. The toolbar below carries its
   own `position: fixed` and z-index, which is all the stacking control
   that's actually needed here. */
.input-only-app {
}

.input-only-toolbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    color: var(--text);
    background: rgba(20, 20, 20, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    max-height: 70vh;
    overflow-y: auto;
}

.input-only-status {
    font-size: 1rem;
}

.input-only-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.input-only-settings {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

/* Prevent starting animation for elements */
.prevent-start-transition {
    transition: none;
}

/** Settings Layout */
.settings {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    align-items: stretch;
}

.settings-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    background-color: var(--surface);
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.settings-section h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3rem;
    color: var(--accent-strong);
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

/* Vertical layout for inputs in settings */
.settings-section .input-div {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}

.settings-section .input-div label {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 1rem;
}

/* Full width inputs */
.settings-section .input-div input[type="text"],
.settings-section .input-div input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.settings-section .input-div .select-button-group {
    width: 100%;
    margin: 0;
    gap: 10px;
}

.settings-section .input-div .select-button {
    flex: 1;
    text-align: center;
}

/* Checkboxes horizontal */
.settings-section .input-div.input-type-checkbox {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: var(--radius-sm);
}

.settings-section .input-div.input-type-checkbox label {
    margin-bottom: 0;
    margin-right: 10px;
}

.settings-section h3 {
    margin-top: 10px;
    font-size: 1.1rem;
    color: var(--text);
}

/* App Container for full layout */
.app-container {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent scrolling on the container itself */
}

/* Header Bar */
.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #14161c;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    padding: 8px 16px;
    height: 64px;
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent it from shrinking */
    position: sticky; /* Keep it at the top when scrolling, if content scrolls */
    top: 0;
    z-index: 1;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-center {
    flex-grow: 1; /* Allows center to take up available space */
    text-align: center;
}

.header-title {
    margin: 0; /* Remove default h1 margin */
    font-size: 1.5rem;
    font-weight: normal;
    color: var(--text);
}

.header-title img {
    display: block;
    margin: 0 auto;
}

/* Back Button styling — round icon button matching the other header buttons */
.back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.back-button svg {
    display: block;
    margin: 0 auto;
}

.back-button:hover {
    background-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

/* App Content area */
.app-content {
    flex-grow: 1; /* Take all remaining vertical space */
    overflow-y: auto; /* Allow content to scroll if it overflows */
    padding-top: 20px; /* Add some space between header and content */
    padding-left: 20px;
    padding-right: 20px;
}

/* Adjustments for existing open-settings and host-add buttons */
.header-left .host-add,
.header-right .open-settings {
    width: 50px; /* Bigger icon buttons */
    height: 50px;
    background-size: 65%; /* Adjust background image size */
    margin: 0; /* Remove default button margin */
    padding: 0;
    border: none;
    border-radius: 50%; /* Make them round */
    background-color: rgba(255, 255, 255, 0.08); /* Lighter background for action buttons */
}

.header-left .host-add:hover,
.header-right .open-settings:hover {
    background-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

/* Override default h2/h3 margin for settings_menu if needed */
.app-content h2,
.app-content h3 {
    margin-top: 12px;
    margin-bottom: 8px;
}

/* Override .settings padding which is now handled by .app-content padding */
.app-content .settings {
    padding: 0;
    margin: 0;
}

/* Modal Forms - applying similar styling to settings sections */
.modal-content .input-div {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px; /* Increased gap */
}

.modal-content .input-div label {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 1rem;
}

.modal-content .input-div input[type="text"],
.modal-content .input-div input[type="password"],
.modal-content .input-div input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm); /* Consistent with other inputs */
}

.modal-content h2 { /* For modal headers */
    color: var(--accent-strong); /* Consistent with settings section headers */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

/* Modal Buttons */
.modal-content button, .sidebar-stream-buttons button {
    padding: 10px 20px;
    margin: 5px;
    border-radius: var(--radius-sm); /* Consistent with other buttons */
    color: white;
}

/* Style for the Cancel button specifically */
.modal-content form button:last-child { /* Assuming cancel is always last */
    background-color: var(--surface-raised); /* Grey background */
    border: 1px solid var(--border-strong);
}

.modal-content form button:last-child:hover {
    background-color: var(--surface-overlay);
    box-shadow: none; /* Remove default hover shadow */
}

/* Modal specific input group for horizontal layout */
.modal-content .add-host-input-group {
    display: flex;
    flex-direction: row;
    gap: 15px; /* Space between the two inputs */
    align-items: flex-end; /* Align inputs themselves at the bottom */
    margin-bottom: 20px;
}

.modal-content .add-host-input-group .input-div {
    flex-direction: column; /* Keep labels on top */
    align-items: flex-start;
    margin-bottom: 0; /* Reset previous margin if any */
}

/* Address input should take most of the space */
.modal-content .add-host-input-group .input-div:first-child {
    flex-grow: 1;
}

/* Port input field styling */
.modal-content .add-host-input-group .input-type-text:last-child { /* Targeting the last input-div (port) */
    width: 100px; /* Small width for 6 digits */
    flex-shrink: 0; /* Prevent it from shrinking */
}

.modal-content .add-host-input-group .input-type-text:last-child input[type="text"],
.modal-content .add-host-input-group .input-type-text:last-child input[type="number"] {
    width: 100px; /* Specific width for the input element */
}