/* Subset of Noto Color Emoji (OFL, see vendor/noto-emoji/LICENSE), covering
   only the codepoints APP_EMOJI (desktop-boot.js) and the notification bell
   (#notification-button) actually use. Regenerated via Google Fonts' own
   per-text subsetting endpoint (fonts.googleapis.com/css2?family=Noto+Color
   +Emoji&text=<the exact characters>, with a desktop-Chrome User-Agent to
   get a woff2/COLRv1 response) rather than downloading and locally
   subsetting the full font - same result, much less local tooling. Used
   only as a fallback when the OS has no color emoji font of its own (e.g. a
   bare Linux desktop) - regenerate the same way if a new app icon needs a
   codepoint not already in it. */
@font-face {
    font-family: 'ServerDesk Emoji Fallback';
    src: url('/assets/vendor/noto-emoji/serverdesk-emoji-fallback.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --sd-bg: #1b2430;
    --sd-bg-elevated: #232d3b;
    --sd-border: #33404f;
    --sd-text: #e7ebf0;
    --sd-text-muted: #9aa7b6;
    --sd-accent: #5b8def;
    --sd-danger: #e0665a;
    --sd-success: #35b37a;
    --sd-warning: #d7a02c;
    --sd-radius: 6px;
    --sd-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --sd-taskbar-height: 44px;
    --sd-panel-width: clamp(260px, 25vw, 420px);
    --sd-panel-collapsed-width: 32px;
}

* {
    box-sizing: border-box;
}

/* Browsers don't inherit font-family into form controls by default (their
   own UA stylesheet sets it), so buttons/selects silently fall back to the
   OS default instead of matching the surrounding text - explicit inherit
   here instead of repeating font-family on every button/select rule. */
button,
select {
    font-family: inherit;
}

html,
body {
    margin: 0;
    height: 100%;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: var(--sd-text);
    background: var(--sd-bg);
}

#app-shell {
    display: flex;
    height: 100%;
}

#main-column {
    flex: 1;
    min-width: 0;
}

#desktop {
    position: relative;
    height: calc(100% - var(--sd-taskbar-height));
    overflow: hidden;
    background-color: var(--sd-bg);
    background-size: cover;
    background-position: center;
}

#desktop-icons {
    position: relative;
    height: 100%;
    user-select: none;
}

/* Snap-to-grid overlay (Settings > Desktop icons), shown only while
   actively dragging an icon (toggled in DesktopManager.makeIconDraggable).
   Cell size and origin are set from JS (DesktopManager.applyIconSize) to
   match the icon+padding slot size used for the drag-snap calculation,
   offset so grid lines run around each icon's glyph rather than through
   its slot's top-left corner - so a snapped icon looks centered in its
   square instead of pinned to its corner. */
#desktop-icons.snap-grid-visible {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: var(--sd-grid-cell-w) var(--sd-grid-cell-h);
    background-position: var(--sd-grid-origin-x, 16px) var(--sd-grid-origin-y, 16px);
}

.desktop-icon {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: max(84px, calc(var(--sd-icon-size, 28px) + 36px));
    padding: 8px 4px;
    border: none;
    background: transparent;
    color: var(--sd-text);
    border-radius: var(--sd-radius);
    cursor: pointer;
}

.desktop-icon:hover,
.desktop-icon:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.desktop-icon-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sd-icon-size, 28px);
    height: var(--sd-icon-size, 28px);
}

.desktop-icon-glyph svg,
.desktop-icon-glyph img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
}

.app-icon-emoji,
.taskbar-emoji-icon,
#notification-button {
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji',
        'ServerDesk Emoji Fallback', sans-serif;
    line-height: 1;
}

.app-icon-emoji {
    font-size: var(--sd-icon-size, 28px);
}

.taskbar-emoji-icon {
    font-size: 15px;
}

.desktop-icon-label {
    font-size: 12px;
    text-align: center;
    color: var(--sd-text-muted);
}

.window {
    position: absolute;
    min-width: 280px;
    min-height: 160px;
    background: var(--sd-bg-elevated);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.window.focused {
    border-color: var(--sd-accent);
}

.window.minimized {
    display: none;
}

.window.maximized {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
}

.window-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    background: linear-gradient(
        135deg,
        transparent 0%, transparent 50%,
        var(--sd-border) 50%, var(--sd-border) 60%,
        transparent 60%, transparent 70%,
        var(--sd-border) 70%, var(--sd-border) 80%,
        transparent 80%
    );
}

.window.maximized .window-resize-handle {
    display: none;
}

.window-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--sd-border);
    cursor: move;
    user-select: none;
}

.window-title {
    font-size: 13px;
    font-weight: 600;
}

.window-controls {
    display: flex;
    gap: 4px;
}

.window-btn {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--sd-text-muted);
    cursor: pointer;
    line-height: 1;
}

.window-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sd-text);
}

.window-close:hover {
    background: var(--sd-danger);
    color: #fff;
}

.window-body {
    flex: 1;
    padding: 12px;
    overflow: auto;
    font-size: 14px;
}

.window-loading,
.window-error {
    color: var(--sd-text-muted);
}

.window-error {
    color: var(--sd-danger);
}

.window-body--terminal {
    padding: 0;
    overflow: hidden;
}

.terminal-container {
    height: 100%;
    padding: 4px;
    box-sizing: border-box;
}

.window-body--logs {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.logs-output {
    flex: 1;
    margin: 0;
    padding: 8px;
    overflow: auto;
    background: #10161d;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
}

.logs-message {
    margin: 0 0 10px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.04);
}

.logs-message--ok {
    color: var(--sd-accent);
}

.logs-message--error {
    color: var(--sd-danger);
    background: rgba(224, 102, 90, 0.12);
}

#taskbar {
    height: var(--sd-taskbar-height);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: var(--sd-bg-elevated);
    border-top: 1px solid var(--sd-border);
}

#start-button {
    border: none;
    background: var(--sd-accent);
    color: #fff;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--sd-radius);
    cursor: pointer;
}

#taskbar-buttons {
    flex: 1;
    display: flex;
    gap: 6px;
    overflow-x: auto;
}

.taskbar-button {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--sd-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--sd-text);
    padding: 6px 12px;
    border-radius: var(--sd-radius);
    cursor: pointer;
    font-size: 13px;
}

.taskbar-button.active {
    border-color: var(--sd-accent);
}

.taskbar-button-icon {
    display: flex;
    align-items: center;
    line-height: 1;
}

/* .app-icon-emoji sets its own font-size (var(--sd-icon-size), 28px by
   default, for desktop icons) - a plain font-size on .taskbar-button-icon
   itself has no effect since a child's own explicit font-size always wins
   over an ancestor's, regardless of source order. Target the emoji span
   itself instead, matching #notification-button's size. */
.taskbar-button-icon .app-icon-emoji {
    font-size: 16px;
}

.taskbar-button-icon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.taskbar-button--alert {
    border-color: var(--sd-danger);
    animation: taskbar-alert-flash 1s ease-in-out infinite;
}

@keyframes taskbar-alert-flash {
    0%, 100% { background: rgba(255, 255, 255, 0.03); }
    50% { background: rgba(224, 102, 90, 0.25); }
}

#notification-area {
    position: relative;
}

#notification-button {
    border: none;
    background: transparent;
    color: var(--sd-text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 6px;
}

.notification-list {
    position: absolute;
    bottom: 44px;
    right: 0;
    width: 260px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--sd-bg-elevated);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
    padding: 6px;
}

.notification {
    padding: 8px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 13px;
    margin-bottom: 6px;
}

.notification-error {
    background: rgba(224, 102, 90, 0.15);
    color: var(--sd-danger);
}

#panel-toggle {
    display: flex;
    align-items: center;
    border: none;
    background: transparent;
    padding: 6px;
    cursor: pointer;
}

.status-widget-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: var(--sd-text-muted);
}

.status-widget-dot--connected {
    background: var(--sd-success);
    box-shadow: 0 0 5px 2px rgba(53, 179, 122, 0.55);
}

.status-widget-dot--disconnected {
    background: var(--sd-danger);
}

/* Side panel (#side-panel) - persistent live server-status panel, ~1/4
   screen width, collapsible to a slim strip that keeps the connection dot
   glanceable. See core/SidePanel.js. */
#side-panel {
    flex: 0 0 var(--sd-panel-width);
    display: flex;
    flex-direction: column;
    background: var(--sd-bg-elevated);
    border-left: 1px solid var(--sd-border);
    overflow-y: auto;
    overflow-x: hidden;
    transition: flex-basis 0.2s ease;
}

#side-panel.collapsed {
    flex-basis: var(--sd-panel-collapsed-width);
    overflow-y: hidden;
    cursor: pointer;
}

/* The header (and its connection dot) deliberately stays visible while
   collapsed - but the glow reads oddly crammed into the narrow strip, so
   only the dot color itself carries the status there, not the glow. */
#side-panel.collapsed .status-widget-dot--connected {
    box-shadow: none;
}

@media (max-width: 700px) {
    #side-panel:not(.collapsed) {
        flex-basis: var(--sd-panel-collapsed-width);
        overflow-y: hidden;
    }

    #side-panel:not(.collapsed) .sd-panel-body,
    #side-panel:not(.collapsed) .sd-panel-header-label {
        display: none;
    }
}

.sd-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.sd-panel-collapse-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--sd-radius);
    background: transparent;
    color: var(--sd-text-muted);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0;
}

.sd-panel-collapse-toggle:hover {
    color: var(--sd-text);
    background: rgba(255, 255, 255, 0.08);
}

.sd-panel-body {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Groups a metric with its own sparkline (CPU/load, memory, network) so
   the two visibly belong together instead of reading as one long list. */
.sd-panel-card {
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    padding: 8px 10px;
    margin: 4px 0;
}

.sd-panel-overall {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--sd-text);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    padding: 6px 0;
}

.sd-panel-overall-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.sd-panel-overall-dot--green {
    background: var(--sd-success);
}

.sd-panel-overall-dot--orange {
    background: var(--sd-warning);
}

.sd-panel-overall-dot--red {
    background: var(--sd-danger);
    box-shadow: 0 0 5px 2px rgba(224, 102, 90, 0.55);
}

.sd-panel-overall-dot--gray {
    background: var(--sd-text-muted);
}

.sd-panel-sparkline {
    display: block;
    width: 100%;
    height: 24px;
    margin: 2px 0 6px;
}

.sd-panel-sparkline-line {
    fill: none;
    stroke: var(--sd-accent);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.sd-panel-memory-row,
.sd-panel-swap-row,
.sd-panel-disk-row,
.sd-panel-network-row,
.sd-panel-uptime-row,
.sd-panel-last-reboot-row {
    font-size: 13px;
    color: var(--sd-text-muted);
    padding: 4px 0;
    cursor: default;
}

#side-panel.collapsed .sd-panel-body,
#side-panel.collapsed .sd-panel-header-label {
    display: none;
}

.sd-panel-section {
    padding: 8px 0;
}

.sd-panel-load {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: none;
    background: transparent;
    color: var(--sd-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
    width: 100%;
    text-align: left;
}

.sd-panel-load:hover {
    color: var(--sd-text);
}

.sd-panel-interval-select {
    font-size: 12px;
    background: var(--sd-bg);
    color: var(--sd-text);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    padding: 2px 4px;
}

.sd-panel-row {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--sd-text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
}

.sd-panel-row:hover {
    color: var(--sd-text);
}

.sd-panel-row.sd-panel-row--warning {
    color: var(--sd-danger);
}

.sd-panel-disk-bar {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-top: 4px;
}

.sd-panel-disk-bar-fill {
    height: 100%;
    background: var(--sd-success);
}

.sd-panel-disk-bar-fill.sd-panel-disk-bar-fill--warn {
    background: var(--sd-warning);
}

.sd-panel-disk-bar-fill.sd-panel-disk-bar-fill--crit {
    background: var(--sd-danger);
}

.sd-panel-log {
    position: absolute;
    width: 220px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--sd-bg);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
    padding: 6px;
    margin-top: 4px;
    z-index: 5;
}

.sd-panel-log-entry {
    padding: 4px 6px;
    font-size: 12px;
    color: var(--sd-text-muted);
}

.sd-panel-log-entry span {
    font-variant-numeric: tabular-nums;
    margin-right: 6px;
    color: var(--sd-text);
}

.stepup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 20, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.stepup-card {
    width: 320px;
    padding: 24px;
    background: var(--sd-bg-elevated);
    border: 1px solid var(--sd-border);
    border-radius: 10px;
    box-shadow: var(--sd-shadow);
}

.stepup-card h2 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
}

.stepup-hint {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--sd-text-muted);
}

.stepup-card label {
    display: block;
    font-size: 13px;
    color: var(--sd-text-muted);
    margin-bottom: 4px;
}

.stepup-card input {
    width: 100%;
    padding: 9px 10px;
    background: #182028;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    color: var(--sd-text);
    font-size: 14px;
}

.stepup-card input:focus {
    outline: none;
    border-color: var(--sd-accent);
}

.stepup-error {
    margin: 10px 0 0;
    color: var(--sd-danger);
    font-size: 13px;
}

.stepup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.stepup-actions button {
    padding: 8px 14px;
    border-radius: var(--sd-radius);
    border: 1px solid var(--sd-border);
    background: transparent;
    color: var(--sd-text);
    font-size: 13px;
    cursor: pointer;
}

.stepup-confirm {
    background: var(--sd-accent);
    border-color: var(--sd-accent);
    color: #fff;
    font-weight: 600;
}

#clock-widget {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--sd-text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 6px 0;
}

#clock-widget:hover {
    color: var(--sd-text);
}

#clock {
    font-variant-numeric: tabular-nums;
}

.start-menu {
    position: absolute;
    left: 10px;
    bottom: 54px;
    width: 220px;
    background: var(--sd-bg-elevated);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
    padding: 8px;
}

.start-menu-header {
    font-size: 12px;
    color: var(--sd-text-muted);
    padding: 4px 8px 8px;
    border-bottom: 1px solid var(--sd-border);
    margin-bottom: 6px;
}

.start-menu-apps {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.start-menu-apps button,
.start-menu-logout {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--sd-text);
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.start-menu-apps button:hover,
.start-menu-logout:hover {
    background: rgba(255, 255, 255, 0.06);
}

.start-menu-logout {
    border-top: 1px solid var(--sd-border);
    margin-top: 6px;
    color: var(--sd-danger);
}

.context-menu {
    position: fixed;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--sd-bg-elevated);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
    z-index: 9999;
}

.context-menu button {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--sd-text);
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.context-menu button:hover {
    background: rgba(255, 255, 255, 0.06);
}

.kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 0;
}

.kv dt {
    color: var(--sd-text-muted);
}

.section-title {
    font-size: 13px;
    color: var(--sd-text-muted);
    margin: 16px 0 6px;
    font-weight: 600;
}

.toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.toolbar input[type="search"] {
    flex: 1;
    padding: 6px 8px;
    background: #182028;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    color: var(--sd-text);
    font-size: 13px;
}

.toolbar input[type="search"]:focus {
    outline: none;
    border-color: var(--sd-accent);
}

.toolbar select {
    padding: 6px 8px;
    background: #182028;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    color: var(--sd-text);
    font-size: 13px;
}

.toolbar button {
    padding: 6px 12px;
    border: 1px solid var(--sd-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--sd-text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.toolbar button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th {
    text-align: left;
    color: var(--sd-text-muted);
    font-weight: 600;
    padding: 6px 8px;
    border-bottom: 1px solid var(--sd-border);
    position: sticky;
    top: 0;
    background: var(--sd-bg);
    box-shadow: 0 1px 0 var(--sd-border);
}

.data-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.proc-sort-th {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

.proc-sort-th:hover {
    color: var(--sd-text);
}

.proc-sort-arrow {
    font-size: 10px;
}

.proc-top-header {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--sd-text-muted);
}

.svc-message,
.proc-message,
.files-message,
.fw-message,
.upd-message,
.upd-self-message,
.apache-message {
    margin: 0 0 10px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.04);
}

.svc-message--ok,
.proc-message--ok,
.files-message--ok,
.fw-message--ok,
.upd-message--ok,
.upd-self-message--ok,
.apache-message--ok {
    color: var(--sd-accent);
}

.svc-message--error,
.proc-message--error,
.files-message--error,
.fw-message--error,
.upd-message--error,
.upd-self-message--error,
.apache-message--error {
    color: var(--sd-danger);
    background: rgba(224, 102, 90, 0.12);
}

.svc-actions,
.proc-actions,
.files-row-actions,
.apache-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.svc-actions button,
.proc-actions button,
.files-row-actions button,
.apache-actions button {
    padding: 3px 8px;
    border: 1px solid var(--sd-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--sd-text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.svc-actions button:hover,
.proc-actions button:hover,
.files-row-actions button:hover,
.apache-actions button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.cron-divider {
    margin: 18px 0 12px;
    border: none;
    border-top: 1px solid var(--sd-border);
}

.cron-managed-heading {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
}

.upd-os-name {
    font-weight: 400;
    color: var(--sd-text-muted);
}

.cron-managed-table .cron-field {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid var(--sd-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--sd-text);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
}

.cron-managed-table td:nth-child(1) .cron-field {
    width: 9em;
}

.cron-managed-table td:nth-child(2) .cron-field {
    width: 7em;
}

.cron-delete-row {
    padding: 3px 8px;
    border: 1px solid var(--sd-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--sd-text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.cron-delete-row:hover {
    background: rgba(224, 102, 90, 0.15);
}

.cron-managed-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.cron-managed-actions button {
    padding: 5px 12px;
    border: 1px solid var(--sd-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--sd-text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.cron-managed-actions button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.cron-managed-actions .cron-save {
    border-color: var(--sd-accent);
    color: var(--sd-accent);
}

.window-body--files {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.files-toolbar-spacer {
    flex: 1;
}

.files-current-path {
    color: var(--sd-text-muted);
    font-size: 13px;
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    align-self: center;
}

.files-readonly-note {
    align-self: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sd-text-muted);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 2px 6px;
}

.files-tree-readonly {
    font-size: 10px;
    opacity: 0.7;
}

.files-up:disabled {
    opacity: 0.4;
    cursor: default;
}

.files-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 180px 1fr 1fr;
    gap: 10px;
    min-height: 0;
    padding-bottom: 12px;
}

.files-tree,
.files-list,
.files-preview {
    overflow: auto;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    background: rgba(255, 255, 255, 0.02);
    padding: 8px;
}

.files-tree-list,
.files-tree-children {
    list-style: none;
    margin: 0;
    padding-left: 14px;
}

.files-tree-list {
    padding-left: 0;
}

.files-tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}

.files-tree-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.files-tree-row--active {
    background: rgba(91, 141, 239, 0.18);
    color: var(--sd-accent);
}

.files-tree-toggle {
    color: var(--sd-text-muted);
    font-size: 10px;
    width: 10px;
}

.files-list .data-table td:first-child {
    cursor: pointer;
}

.files-row--active {
    background: rgba(91, 141, 239, 0.12);
}

.files-preview-empty {
    color: var(--sd-text-muted);
    font-size: 13px;
}

.files-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13px;
}

.files-preview-size {
    color: var(--sd-text-muted);
}

.files-preview-header button {
    padding: 4px 10px;
    border: 1px solid var(--sd-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--sd-text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.files-preview-header button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.files-save {
    border-color: var(--sd-accent) !important;
    color: var(--sd-accent) !important;
}

.files-preview-truncated {
    margin: 0 0 8px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--sd-danger);
    background: rgba(224, 102, 90, 0.12);
}

.files-editor {
    width: 100%;
    min-height: 300px;
    box-sizing: border-box;
    padding: 8px;
    background: #10161d;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    color: var(--sd-text);
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: 12px;
    resize: vertical;
}

.files-markdown-preview {
    padding: 8px 10px;
    background: #10161d;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    font-size: 13px;
}

.files-markdown-preview :first-child {
    margin-top: 0;
}

.files-markdown-preview pre {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;
}

.files-preview-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.files-preview-image {
    max-width: 100%;
    max-height: 60vh;
    border-radius: 4px;
}

.files-download-link {
    color: var(--sd-accent);
    font-size: 13px;
}

.fw-status {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    align-self: center;
}

.fw-status--active {
    color: var(--sd-accent);
    background: rgba(91, 141, 239, 0.14);
}

.fw-status--inactive {
    color: var(--sd-text-muted);
    background: rgba(255, 255, 255, 0.04);
}

.fw-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.fw-form select,
.fw-form input {
    padding: 6px 8px;
    background: #182028;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    color: var(--sd-text);
    font-size: 13px;
}

.fw-form .fw-port {
    width: 90px;
}

.fw-form .fw-source {
    flex: 1;
    min-width: 140px;
}

.fw-form button {
    padding: 6px 14px;
    border: 1px solid var(--sd-accent);
    background: transparent;
    color: var(--sd-accent);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.fw-form button:hover {
    background: rgba(91, 141, 239, 0.12);
}

.apache-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.apache-form input[type='text'] {
    padding: 6px 8px;
    background: #182028;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    color: var(--sd-text);
    font-size: 13px;
}

.apache-form .apache-domain {
    width: 180px;
}

.apache-form .apache-docroot {
    flex: 1;
    min-width: 200px;
}

.apache-form label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--sd-text-muted);
}

.apache-form button {
    padding: 6px 14px;
    border: 1px solid var(--sd-accent);
    background: transparent;
    color: var(--sd-accent);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.apache-form button:hover {
    background: rgba(91, 141, 239, 0.12);
}

.settings-note {
    margin: 0 0 16px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--sd-text-muted);
    background: rgba(255, 255, 255, 0.04);
}

.settings-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--sd-text-muted);
}

.settings-section {
    margin-bottom: 20px;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
}

.settings-section label {
    display: block;
    font-size: 13px;
    color: var(--sd-text-muted);
    margin: 14px 0 4px;
}

.settings-section select {
    width: 100%;
    max-width: 220px;
    padding: 7px 8px;
    background: #182028;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    color: var(--sd-text);
    font-size: 13px;
}

.settings-section select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.settings-section .settings-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 4px;
    font-size: 13px;
    color: var(--sd-text);
    cursor: pointer;
}

.wallpaper-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wallpaper-swatch {
    width: 72px;
    height: 48px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    background-color: var(--sd-bg);
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.wallpaper-swatch:hover {
    border-color: var(--sd-border);
}

.wallpaper-swatch.selected {
    border-color: var(--sd-accent);
}

.upd-heading {
    font-size: 13px;
    color: var(--sd-text-muted);
    align-self: center;
}

.upd-reboot-banner {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--sd-danger);
    background: rgba(224, 102, 90, 0.12);
}

.upd-self-version {
    font-size: 13px;
    color: var(--sd-text-muted);
    align-self: center;
}

.upd-self-log {
    margin: 10px 0 0;
    padding: 8px 10px;
    max-height: 220px;
    overflow-y: auto;
    background: #0d1117;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    color: var(--sd-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* The self-update-progress window's log is its only real content, so it
   fills the window instead of the 220px cap above (used elsewhere for a
   log sitting below other sections in the same window) - same
   flex-column-body pattern as .window-body--logs. */
.window-body--self-update-progress {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.window-body--self-update-progress .upd-self-log {
    flex: 1;
    max-height: none;
}

.window-body--update-changes,
.window-body--update-history {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.upd-changes-summary {
    font-size: 13px;
    color: var(--sd-text-muted);
    margin: 0 0 8px;
}

.upd-changes-empty {
    font-size: 13px;
    color: var(--sd-text-muted);
}

.upd-changes-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-y: auto;
}

.upd-changes-list li {
    padding: 2px 0;
}

.upd-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.upd-history-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--sd-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    padding: 8px 4px;
    border-bottom: 1px solid var(--sd-border);
}

.upd-history-entry:hover {
    background: rgba(255, 255, 255, 0.04);
}

.upd-history-timestamp {
    font-variant-numeric: tabular-nums;
}

.upd-history-status {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--sd-text-muted);
    background: rgba(255, 255, 255, 0.06);
}

.upd-history-status--ok {
    color: var(--sd-success);
}

.upd-history-status--failed {
    color: var(--sd-danger);
}

.upd-history-status--running {
    color: var(--sd-warning);
}

.upd-history-back {
    align-self: flex-start;
    border: none;
    background: transparent;
    color: var(--sd-accent);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 8px;
}

.upd-history-back:hover {
    text-decoration: underline;
}

.upd-history-log {
    flex: 1;
    margin: 0;
    padding: 8px 10px;
    overflow-y: auto;
    background: #0d1117;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    color: var(--sd-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

.toolbar button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.notices-heading {
    font-size: 13px;
    font-weight: 600;
    align-self: center;
}

.notices-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notices-item {
    padding: 10px 12px;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    background: rgba(255, 255, 255, 0.02);
}

.notices-item-title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
}

.notices-item-title a {
    color: var(--sd-accent);
    text-decoration: none;
}

.notices-item-title a:hover {
    text-decoration: underline;
}

.notices-item-date {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--sd-text-muted);
}

.notices-item-summary {
    margin: 0;
    font-size: 13px;
    color: var(--sd-text);
    white-space: pre-line;
}