/* ============================================================
 WINDOWS SERVER 2003 CLASSIC THEME
 Faithful to the real Classic theme Server 2003 shipped with
 by default (Luna disabled). Activated by body.srv2003-desktop.

 Key palette values, matching the Win32 system colors:
 3D face #d4d0c8
 3D light #ffffff
 3D shadow #808080
 3D dark shadow #404040
 Active title linear gradient #0a246a -> #a6caf0
 Inactive title #808080
 Desktop #3a6ea5
 Button face #d4d0c8
 Selection #0a246a (text highlight)

 Default font: Tahoma 8pt. Classic uses MS Sans Serif in
 several places too; Tahoma is close enough and always
 available.
 ============================================================ */

body.srv2003-desktop {
    background: #3a6ea5;
    color: #000000;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
}

/* Kill every QNX chrome element that carries X11/Photon flavor:
 the workspace launcher at the edge, the QNX taskbar, the session
 toolbar with the sign-out pill. The Server 2003 taskbar and Start
 menu below replace them entirely. */
body.srv2003-desktop .qnx-session-toolbar,
body.srv2003-desktop .qnx-disconnect-btn,
body.srv2003-desktop .qnx-start-btn,
body.srv2003-desktop .qnx-taskbar,
body.srv2003-desktop .qnx-launcher,
body.srv2003-desktop .qnx-window,
body.srv2003-desktop .qnx-workspace,
body.srv2003-desktop .qnx-session {
    display: none !important;
}

/* ============================================================
 WINDOWS IN CLASSIC THEME
 ============================================================ */
body.srv2003-desktop .qnx-window {
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf,
        2px 2px 4px rgba(0, 0, 0, 0.25);
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
}

body.srv2003-desktop .qnx-window-bar {
    background: linear-gradient(90deg, #0a246a 0%, #3a6ea5 60%, #a6caf0 100%);
    color: #ffffff;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 3px 2px 5px;
    height: 18px;
    border: 0;
    cursor: move;
    user-select: none;
    display: flex;
    align-items: center;
    letter-spacing: 0.01em;
}

body.srv2003-desktop .qnx-window:not(.active) .qnx-window-bar {
    background: linear-gradient(90deg, #808080 0%, #b5b5b5 100%);
    color: #d5d5d5;
}

body.srv2003-desktop .qnx-win-controls {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

body.srv2003-desktop .qnx-win-btn {
    width: 16px;
    height: 14px;
    padding: 0;
    background: #d4d0c8;
    border: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    color: #000000;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 0;
}

body.srv2003-desktop .qnx-win-btn:active {
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
}

body.srv2003-desktop .qnx-win-btn.close,
body.srv2003-desktop .qnx-win-btn[data-action="close"] {
    background: #d4d0c8;
    color: #000000;
}

body.srv2003-desktop .qnx-window-body {
    background: #d4d0c8;
    color: #000000;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
}

/* ============================================================
 BUTTONS (Classic 3D bevel)
 ============================================================ */
body.srv2003-desktop .qnx-window-body button,
body.srv2003-desktop .qnx-window-body .btn,
body.srv2003-desktop .qnx-window-body input[type=button],
body.srv2003-desktop .qnx-window-body input[type=submit] {
    appearance: none;
    -webkit-appearance: none;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    padding: 3px 12px;
    background: #d4d0c8;
    border: 0;
    border-radius: 0;
    color: #000000;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    cursor: pointer;
    min-width: 72px;
    line-height: 1.3;
}

body.srv2003-desktop .qnx-window-body button:active,
body.srv2003-desktop .qnx-window-body .btn:active,
body.srv2003-desktop .qnx-window-body input[type=button]:active,
body.srv2003-desktop .qnx-window-body input[type=submit]:active {
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
    padding: 4px 11px 2px 13px;
}

body.srv2003-desktop .qnx-window-body button:focus-visible,
body.srv2003-desktop .qnx-window-body .btn:focus-visible {
    outline: 1px dotted #000000;
    outline-offset: -4px;
}

body.srv2003-desktop .qnx-window-body .btn.suggested {
    font-weight: 700;
}

/* ============================================================
 TEXT INPUTS (sunken 3D)
 ============================================================ */
body.srv2003-desktop .qnx-window-body input[type=text],
body.srv2003-desktop .qnx-window-body input[type=search],
body.srv2003-desktop .qnx-window-body input[type=password],
body.srv2003-desktop .qnx-window-body select,
body.srv2003-desktop .qnx-window-body textarea {
    background: #d4d0c8;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
    color: #000000;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    padding: 3px 4px;
}

/* ============================================================
 TERMINAL (cmd.exe look)
 ============================================================ */
body.srv2003-desktop .qnx-terminal-shell {
    background: #000000;
    color: #c0c0c0;
    font-family: "Consolas", "Lucida Console", "Courier New", monospace;
    font-size: 12px;
    padding: 6px 8px;
}

body.srv2003-desktop .qnx-terminal-out,
body.srv2003-desktop .qnx-terminal-row {
    color: #c0c0c0;
}

body.srv2003-desktop .qnx-terminal-in {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #c0c0c0;
    font-family: inherit;
    padding: 0;
}

/* ============================================================
 FILE BROWSER / LIST VIEWS (Explorer Classic look)
 ============================================================ */
body.srv2003-desktop .qnx-file-pane,
body.srv2003-desktop .qnx-socket-list,
body.srv2003-desktop .qnx-list {
    background: #ffffff;
    color: #000000;
    font-size: 11px;
}

body.srv2003-desktop .qnx-grid-head {
    background: #d4d0c8;
    color: #000000;
    font-weight: 400;
    border: 0;
    box-shadow:
        inset -1px -1px 0 #808080,
        inset 1px 1px 0 #ffffff;
    font-size: 11px;
    padding: 3px 8px;
}

body.srv2003-desktop .qnx-grid-row {
    border: 0;
    padding: 1px 8px;
    color: #000000;
}

body.srv2003-desktop .qnx-grid-row:hover {
    background: #d6e8ff;
}

body.srv2003-desktop .qnx-grid-row.selected {
    background: #0a246a;
    color: #ffffff;
}

/* ============================================================
 IDE CHROME RE-SKIN
 Every modern web-app surface inside the IDE picks up the
 Classic palette and 3D bevels when body.srv2003-desktop is
 active. Selectors target the real classes used by the app,
 not invented ones.
 ============================================================ */

/* Reserve 28 px at the bottom for the Server 2003 taskbar so
   the IDE viewport does not sit underneath it. */
body.srv2003-desktop {
    padding-bottom: 28px;
}

body.srv2003-desktop .app {
    height: calc(100vh - 28px);
    height: calc(100dvh - 28px);
    background: #d4d0c8;
}

/* Headerbar */
body.srv2003-desktop .headerbar {
    background: #d4d0c8;
    color: #000000;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 #ffffff, 0 1px 0 #808080;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    height: 28px;
    min-height: 28px;
    padding: 0 4px;
}

body.srv2003-desktop .app-logo {
    background: #d4d0c8;
    color: #000000;
    border-radius: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    width: 22px;
    height: 22px;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 10px;
    font-weight: 700;
}

body.srv2003-desktop .app-title-name {
    color: #000000;
    font-weight: 700;
    font-size: 11px;
}

body.srv2003-desktop .app-title-sub {
    color: #404040;
    font-size: 10px;
    font-family: "Lucida Console", "Courier New", monospace;
}

body.srv2003-desktop .hb-btn {
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    padding: 2px 6px;
    height: 22px;
    width: 22px;
}

/* When an .hb-btn lives inside a Server 2003 dialog title bar, it
   has to fit inside the 18 px header. Real Win32 close buttons in
   title bars are 14 px square: shrink the button and the icon. */
body.srv2003-desktop .dialog-header .hb-btn {
    width: 14px;
    height: 14px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}
body.srv2003-desktop .dialog-header .hb-btn svg {
    width: 8px;
    height: 8px;
}

body.srv2003-desktop .hb-btn:hover {
    background: #d4d0c8;
}

body.srv2003-desktop .hb-btn:active {
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
}

body.srv2003-desktop .banner-slot {
    background: #d4d0c8;
}

/* Sidebar */
body.srv2003-desktop .sidebar {
    background: #d4d0c8;
    color: #000000;
    border-right: 1px solid #808080;
    box-shadow: inset -1px 0 0 #ffffff;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
}

body.srv2003-desktop .sidebar-inner {
    background: #d4d0c8;
}

body.srv2003-desktop .sidebar-toolbar {
    background: #d4d0c8;
    border-bottom: 1px solid #808080;
    box-shadow: inset 0 -1px 0 #ffffff;
}

body.srv2003-desktop .sidebar-title {
    color: #000000;
    font-weight: 700;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
}

body.srv2003-desktop .sidebar-footer {
    background: #d4d0c8;
    border-top: 1px solid #808080;
    box-shadow: inset 0 1px 0 #ffffff;
    color: #000000;
    font-size: 11px;
}

/* File tree rows */
body.srv2003-desktop .tree-row {
    color: #000000;
    border-radius: 0;
    font-size: 11px;
}

body.srv2003-desktop .tree-row:hover {
    background: #d6e8ff;
}

body.srv2003-desktop .tree-row.active {
    background: #0a246a;
    color: #ffffff;
}

body.srv2003-desktop .tree-row.active .name {
    color: #ffffff;
}

body.srv2003-desktop .tree-row .row-action {
    background: transparent;
    border-radius: 0;
}

body.srv2003-desktop .tree-row .row-action:hover {
    background: #c0c0c0;
}

/* Content (right pane) */
body.srv2003-desktop .content {
    background: #d4d0c8;
    color: #000000;
}

body.srv2003-desktop .content-toolbar {
    background: #d4d0c8;
    color: #000000;
    border-bottom: 1px solid #808080;
    box-shadow: inset 0 -1px 0 #ffffff;
    font-size: 11px;
}

body.srv2003-desktop .toolbar-breadcrumb {
    color: #000000;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
}

body.srv2003-desktop .toolbar-breadcrumb .crumb-sep {
    color: #404040;
}

body.srv2003-desktop .toolbar-breadcrumb .crumb-file {
    color: #000000;
    font-weight: 700;
}

/* Tabs (Classic property-page look: flat, square, beveled) */
body.srv2003-desktop .tabbar {
    background: #d4d0c8;
    border-bottom: 1px solid #808080;
    box-shadow: inset 0 -1px 0 #ffffff;
    padding: 2px 2px 0;
    gap: 0;
}

body.srv2003-desktop .tab {
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px 0 0 #404040,
        inset -2px 0 0 #808080;
    padding: 4px 14px;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    font-weight: 400;
    margin-right: 2px;
    margin-bottom: -1px;
}

body.srv2003-desktop .tab:hover {
    background: #d4d0c8;
}

body.srv2003-desktop .tab.active {
    background: #d4d0c8;
    color: #000000;
    font-weight: 700;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px 0 0 #404040,
        inset -2px 0 0 #808080,
        inset 0 -2px 0 #d4d0c8;
    padding-bottom: 6px;
}

body.srv2003-desktop .tab.active::after {
    display: none;
}

body.srv2003-desktop .tab-close {
    background: transparent;
    border-radius: 0;
    opacity: 1;
}

body.srv2003-desktop .tab-close:hover {
    background: #c0c0c0;
}

body.srv2003-desktop .tab-empty {
    color: #404040;
    font-size: 11px;
}

/* Editor area */
body.srv2003-desktop .editor-area {
    background: #ffffff;
    color: #000000;
    font-family: "Lucida Console", "Consolas", "Courier New", monospace;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
}

/* Status bar */
body.srv2003-desktop .statusbar {
    background: #d4d0c8;
    color: #000000;
    border-top: 1px solid #808080;
    box-shadow: inset 0 1px 0 #ffffff;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    height: 22px;
}

body.srv2003-desktop .statusbar .accent {
    color: #0a246a;
}

body.srv2003-desktop .statusbar .status-ok {
    color: #006400;
}

body.srv2003-desktop .statusbar .status-sep {
    color: #808080;
}

/* Popover menus (the headerbar dropdown menu) */
body.srv2003-desktop .popover {
    background: #d4d0c8;
    color: #000000;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px -1px 0 #404040,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080,
        2px 2px 4px rgba(0, 0, 0, 0.35);
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    padding: 2px;
}

body.srv2003-desktop .popover-item {
    color: #000000;
    border-radius: 0;
    padding: 4px 24px 4px 28px;
    font-size: 11px;
}

body.srv2003-desktop .popover-item:hover,
body.srv2003-desktop .popover-item:focus-visible {
    background: #0a246a;
    color: #ffffff;
}

body.srv2003-desktop .popover-item.destructive {
    color: #800000;
}

body.srv2003-desktop .popover-item.destructive:hover {
    background: #800000;
    color: #ffffff;
}

body.srv2003-desktop .popover-sep {
    background: #808080;
    box-shadow: 0 1px 0 #ffffff;
    margin: 2px 4px;
}

body.srv2003-desktop .popover-item .kbd {
    background: transparent;
    border: 0;
    color: #404040;
    font-family: "Lucida Console", monospace;
    font-size: 10px;
}

body.srv2003-desktop .popover-item:hover .kbd {
    color: #d6d6d6;
}

/* Toast */
body.srv2003-desktop .toast {
    background: #ffffe1;
    color: #000000;
    border: 1px solid #000000;
    border-radius: 0;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
}

/* Preview iframe gets a sunken border like an embedded control */
body.srv2003-desktop .preview-frame {
    background: #ffffff;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
}

/* "Empty" placeholders */
body.srv2003-desktop .empty {
    background: #d4d0c8;
    color: #000000;
    font-size: 11px;
}

/* ============================================================
 GLOBAL DIALOG RE-SKIN
 Every dialog (about, prefs, confirm, asm-edit, curriculum,
 prompts) gets the Classic property-page look. The named
 server-2003 dialogs (Run, About Windows, Shut Down) declared
 below stay as they were, since they share the same rules.
 ============================================================ */
body.srv2003-desktop .dialog-backdrop {
    background: rgba(0, 0, 0, 0.45);
}

body.srv2003-desktop .dialog {
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf,
        4px 4px 10px rgba(0, 0, 0, 0.4);
}

body.srv2003-desktop .dialog-header {
    background: linear-gradient(90deg, #0a246a 0%, #3a6ea5 60%, #a6caf0 100%);
    color: #ffffff;
    font-family: "Tahoma", sans-serif;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 4px 4px 8px;
    height: 24px;
    line-height: 1.3;
    border: 0;
    /* Flex layout so we can append a close button without
       changing every dialog\'s markup. The runtime injector adds
       a wrapping span around the original text + a close button. */
    display: flex;
    align-items: center;
    gap: 6px;
}
body.srv2003-desktop .dialog-header .dialog-header-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Title-bar close button. Renders as a Win9x/2003 raised square
   with a heavy black X. Hovers brighter, depresses on click. The
   injector below adds this to every Server 2003 dialog. */
body.srv2003-desktop .dialog-header .dialog-x {
    flex: 0 0 auto;
    width: 18px;
    height: 16px;
    padding: 0;
    margin: 0;
    border: 0;
    background: #d4d0c8;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px -1px 0 #404040,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080;
    color: #000000;
    font-family: "Marlett", "Tahoma", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
}
body.srv2003-desktop .dialog-header .dialog-x:hover {
    background: #e4e0d8;
}
body.srv2003-desktop .dialog-header .dialog-x:active {
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
}
/* Frame-mode side effect: when the title bar [X] is the only
   close affordance the user needs, a footer that contains nothing
   but a close-equivalent button adds no information. The
   srv2003-titlebar-x.js injector tags such footers; this rule
   hides them and trims the body's bottom padding so the dialog
   doesn't keep an empty band of chrome at the bottom. */
body.srv2003-desktop .dialog-footer.srv2k3-footer-redundant {
    display: none;
}
body.srv2003-desktop .dialog-body:has(+ .dialog-footer.srv2k3-footer-redundant) {
    padding-bottom: 12px;
}

body.srv2003-desktop .dialog-body {
    background: #d4d0c8;
    color: #000000;
    padding: 14px 16px;
    font-size: 11px;
    line-height: 1.45;
}

body.srv2003-desktop .dialog-footer {
    background: #d4d0c8;
    border-top: 0;
    box-shadow: inset 0 1px 0 #ffffff;
    padding: 8px 12px;
}

body.srv2003-desktop .btn {
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    padding: 3px 14px;
    min-width: 72px;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
}

body.srv2003-desktop .btn:hover {
    background: #d4d0c8;
}

body.srv2003-desktop .btn:active {
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
}

body.srv2003-desktop .btn.suggested {
    background: #d4d0c8;
    color: #000000;
    font-weight: 700;
}

body.srv2003-desktop .btn.suggested:hover {
    background: #d4d0c8;
}

body.srv2003-desktop .btn.destructive {
    color: #800000;
    font-weight: 700;
}

body.srv2003-desktop .dialog-body input[type=text],
body.srv2003-desktop .dialog-body input[type=search],
body.srv2003-desktop .dialog-body input[type=password],
body.srv2003-desktop .dialog-body select,
body.srv2003-desktop .dialog-body textarea {
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
    color: #000000;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    padding: 3px 4px;
}

/* About dialog inside Server 2003 looks like Help / About in Win32 */
body.srv2003-desktop .about-app-icon {
    background: #c0c0c0;
    color: #000000;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px -1px 0 #404040,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080;
    font-family: "Lucida Console", monospace;
}

body.srv2003-desktop .about-app-name {
    color: #000000;
}

body.srv2003-desktop .about-developer,
body.srv2003-desktop .about-version {
    color: #404040;
}

body.srv2003-desktop .about-link-btn {
    background: #d4d0c8;
    color: #000000;
    border-radius: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
}

body.srv2003-desktop .about-link-btn:hover {
    background: #d4d0c8;
    color: #000000;
}

body.srv2003-desktop .about-switcher {
    background: #d4d0c8;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff;
    padding: 2px;
}

body.srv2003-desktop .about-switch-btn {
    background: #d4d0c8;
    color: #000000;
    border-radius: 0;
    font-family: "Tahoma", sans-serif;
}

body.srv2003-desktop .about-switch-btn.active {
    background: #ffffff;
    color: #000000;
    box-shadow: none;
}

body.srv2003-desktop .about-list,
body.srv2003-desktop .about-notice {
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
}

body.srv2003-desktop .about-row {
    border-bottom: 1px solid #c0c0c0;
}

body.srv2003-desktop .about-row-key {
    color: #404040;
}

body.srv2003-desktop .about-row-val {
    color: #000000;
}

body.srv2003-desktop .about-row-link {
    color: #0000ff;
    text-decoration: underline;
}

body.srv2003-desktop .about-group-title {
    color: #000000;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

/* Preferences dialog */
body.srv2003-desktop .pref-group {
    background: transparent;
}

body.srv2003-desktop .pref-list {
    background: #ffffff;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
}

body.srv2003-desktop .pref-row {
    border-bottom: 1px solid #c0c0c0;
}

body.srv2003-desktop .pref-row-title {
    color: #000000;
    font-weight: 400;
}

body.srv2003-desktop .pref-row-sub {
    color: #404040;
}

/* Switch / slider in preferences */
body.srv2003-desktop .switch {
    background: #d4d0c8;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
}

body.srv2003-desktop .switch.on {
    background: #0a246a;
}

body.srv2003-desktop .slider {
    background: #d4d0c8;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    border-radius: 0;
}

/* Confirm / prompt dialogs (use the stack above) */
body.srv2003-desktop .prompt-label {
    color: #000000;
    font-size: 11px;
}

body.srv2003-desktop .prompt-input {
    font-family: "Tahoma", sans-serif;
}

body.srv2003-desktop .prompt-error {
    color: #800000;
    font-size: 11px;
}

/* ============================================================
 NO ANIMATIONS IN THE LEGACY INTERFACE
 Real Server 2003 Classic has no fades, no slides, no eased
 transitions on UI chrome. Strip them all from anything inside
 the IDE while srv2003-desktop is active. Install animation and
 first-boot splash live in their own scope (.srv2003-install)
 and are not affected.
 ============================================================ */
body.srv2003-desktop .app *,
body.srv2003-desktop .app *::before,
body.srv2003-desktop .app *::after,
body.srv2003-desktop .dialog-backdrop *,
body.srv2003-desktop .dialog-backdrop *::before,
body.srv2003-desktop .dialog-backdrop *::after,
body.srv2003-desktop .toast,
body.srv2003-desktop .popover,
body.srv2003-desktop .qnx-window,
body.srv2003-desktop .qnx-window *,
body.srv2003-desktop .srv2k3-start-menu,
body.srv2003-desktop .srv2k3-start-menu *,
body.srv2003-desktop .srv2k3-taskbar * {
    animation: none !important;
    transition: none !important;
}

/* Dialog backdrop scale-up animation kills itself too: dialogs
   simply appear at full size in the legacy interface. */
body.srv2003-desktop .dialog-backdrop .dialog {
    transform: none !important;
}

body.srv2003-desktop .dialog-backdrop.open .dialog {
    transform: none !important;
}

/* Scrollbars: Classic gray with beveled track and thumb */
body.srv2003-desktop ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

body.srv2003-desktop ::-webkit-scrollbar-track {
    background: #d4d0c8;
    box-shadow:
        inset 1px 0 0 #ffffff,
        inset -1px 0 0 #808080;
}

body.srv2003-desktop ::-webkit-scrollbar-thumb {
    background: #d4d0c8;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    border-radius: 0;
}

body.srv2003-desktop ::-webkit-scrollbar-corner {
    background: #d4d0c8;
}

/* ============================================================
 DEBUGGER RE-THEME
 Same Classic look applied to all the debugger chrome so it
 stops looking like a modern developer tool.
 ============================================================ */
body.srv2003-desktop .dbg-backdrop .dbg-window,
body.srv2003-desktop .debugger-window {
    background: #d4d0c8;
    color: #000000;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    border-radius: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf,
        4px 4px 8px rgba(0, 0, 0, 0.3);
}

body.srv2003-desktop .dbg-titlebar,
body.srv2003-desktop .debugger-titlebar {
    background: linear-gradient(90deg, #0a246a 0%, #3a6ea5 60%, #a6caf0 100%);
    color: #ffffff;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 5px;
    height: 18px;
}

body.srv2003-desktop .dbg-body,
body.srv2003-desktop .dbg-body pre {
    background: #d4d0c8;
    color: #000000;
}

body.srv2003-desktop .dbg-listing,
body.srv2003-desktop .dbg-disassembly {
    background: #ffffff;
    color: #000000;
    font-family: "Lucida Console", "Consolas", "Courier New", monospace;
    font-size: 11px;
    border: 0;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
}

body.srv2003-desktop .dbg-button,
body.srv2003-desktop .dbg-btn,
body.srv2003-desktop .debugger-window button {
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    padding: 3px 12px;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    min-width: 72px;
}

body.srv2003-desktop .dbg-log {
    background: #ffffff;
    color: #000000;
    font-family: "Lucida Console", "Consolas", "Courier New", monospace;
}

/* ============================================================
 SERVER 2003 TASKBAR
 Gray Classic taskbar, not the XP Luna blue.
 ============================================================ */
.srv2k3-taskbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    z-index: 9500;
    background: #d4d0c8;
    border-top: 1px solid #ffffff;
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 -1px 0 #808080,
        0 -2px 0 #404040;
    display: flex;
    align-items: stretch;
    padding: 2px;
    gap: 2px;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    color: #000000;
    user-select: none;
}

.srv2k3-start {
    appearance: none;
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    min-width: 60px;
}

.srv2k3-start:active,
.srv2k3-start.open {
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
}

.srv2k3-start-flag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.srv2k3-start-flag svg { display: block; }

.srv2k3-start-label {
    letter-spacing: 0.01em;
}

.srv2k3-task-list {
    flex: 1;
    display: flex;
    gap: 3px;
    overflow-x: auto;
    min-width: 0;
}

.srv2k3-tray {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 4px 8px 4px 8px;
    background: #d4d0c8;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
    height: 22px;
    box-sizing: border-box;
}
.srv2k3-tray-icon {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    opacity: 0.95;
    display: grid;
    place-items: center;
    align-self: flex-end;
    margin-bottom: 0;
}
.srv2k3-tray-icon svg { display: block; width: 14px; height: 14px; }

.srv2k3-tray-icon:hover {
    opacity: 1;
}

.srv2k3-clock {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    padding-left: 4px;
    align-self: center;
    color: #000000;
}

/* ============================================================
 START MENU (Classic single-column panel)
 The Classic Start menu is a single vertical list, not the
 two-column XP panel. Matches what Server 2003 shows out of
 the box.
 ============================================================ */
.srv2k3-start-menu {
    position: fixed;
    bottom: 28px;
    left: 0;
    width: 230px;
    max-height: calc(100vh - 60px);
    background: #d4d0c8;
    border: 0;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px -1px 0 #404040,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080,
        3px 3px 6px rgba(0, 0, 0, 0.35);
    z-index: 9501;
    display: none;
    flex-direction: row;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    color: #000000;
}

.srv2k3-start-menu.open {
    display: flex;
}

/* Left vertical strip with the Windows wordmark (like the real one) */
.srv2k3-menu-sidebar {
    width: 22px;
    background: linear-gradient(180deg, #0a246a 0%, #1e4aa5 60%, #0a246a 100%);
    color: #ffffff;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Tahoma", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 10px 0;
    flex-shrink: 0;
}

.srv2k3-menu-sidebar-text {
    color: #ffffff;
    white-space: nowrap;
}

.srv2k3-menu-sidebar-text strong {
    color: #ffffff;
    font-weight: 700;
}

.srv2k3-menu-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2px;
    overflow-y: auto;
    min-width: 0;
}

.srv2k3-menu-item {
    appearance: none;
    background: transparent;
    border: 0;
    color: #000000;
    font-family: inherit;
    font-size: 11px;
    text-align: left;
    padding: 4px 8px 4px 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    min-height: 20px;
}

.srv2k3-menu-item:hover {
    background: #0a246a;
    color: #ffffff;
}

.srv2k3-menu-ic {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: #000000;
}

.srv2k3-menu-item:hover .srv2k3-menu-ic {
    color: #ffffff;
}

.srv2k3-menu-ic::before {
    content: attr(data-glyph);
}

.srv2k3-menu-sep {
    height: 1px;
    background: #808080;
    box-shadow: 0 1px 0 #ffffff;
    margin: 3px 6px;
}

/* The Run... text input keeps a bare class because it is created
   dynamically and lives inside a srv2k3-named dialog wrapper. The
   global dialog-body input rule above already styles the standard
   inputs; this one ensures the Run input fills its container. */
.srv2k3-run-input {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
    color: #000000;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    padding: 3px 4px;
}

/* ============================================================
   POLISH: title bars, output console, headerbar toggles,
   close glyph, prefs checkboxes, OS banner, install-mode taskbar
   hiding. Real selectors from the IDE this time.
   ============================================================ */

/* Bigger title bars on QNX windows for visual consistency with the
   bigger Tahoma + bevel chrome. 22 px instead of 18. */
body.srv2003-desktop .qnx-window-bar {
    height: 22px;
    padding: 4px 4px 4px 6px;
    font-size: 12px;
}
body.srv2003-desktop .qnx-win-btn {
    width: 22px;
    height: 20px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Better close glyph: replace the visible "X" character (which sits
   wherever the QNX markup put it) with a crisp pseudo-element X
   drawn with two rotated lines. We hide the original text node
   inside .close buttons and draw the X on top via ::before. */
body.srv2003-desktop .qnx-win-btn.close,
body.srv2003-desktop .qnx-win-btn[data-action="close"] {
    position: relative;
    color: transparent;
    text-indent: -9999px;
}
body.srv2003-desktop .qnx-win-btn.close::before,
body.srv2003-desktop .qnx-win-btn[data-action="close"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top right,
            transparent 0,
            transparent calc(50% - 1px),
            #000000 calc(50% - 1px),
            #000000 calc(50% + 1px),
            transparent calc(50% + 1px)) no-repeat,
        linear-gradient(to top left,
            transparent 0,
            transparent calc(50% - 1px),
            #000000 calc(50% - 1px),
            #000000 calc(50% + 1px),
            transparent calc(50% + 1px)) no-repeat;
    background-size: 10px 10px, 10px 10px;
    background-position: center, center;
}

/* Same close glyph treatment for IDE dialog and headerbar close
   buttons (which use SVGs that won\'t inherit Classic styling). The
   .hb-btn close at the right of the headerbar gets a Classic look. */
body.srv2003-desktop .hb-btn svg { color: #000000; }
body.srv2003-desktop #btnTheme { display: none !important; }

/* The Verifică / Execută toggle buttons in the headerbar */
body.srv2003-desktop .hb-toggle {
    appearance: none;
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    padding: 3px 12px;
    height: 24px;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    font-weight: 400;
    margin: 0 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
body.srv2003-desktop .hb-toggle:active,
body.srv2003-desktop .hb-toggle.active {
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
}
body.srv2003-desktop .hb-toggle.primary {
    font-weight: 700;
    color: #000000;
}
body.srv2003-desktop .hb-toggle svg { display: none; }
body.srv2003-desktop .hb-toggle-label { font-size: 11px; }
/* On mobile, the .hb-toggle-label is hidden by the global mobile
   stylesheet (only the icons remain), so we have to bring the SVG
   back inside Server 2003. Otherwise the Verifică / Execută buttons
   collapse to empty squares. */
@media (max-width: 720px) {
    body.srv2003-desktop .hb-toggle svg {
        display: inline-block;
        width: 14px;
        height: 14px;
        color: #000000;
    }
    body.srv2003-desktop .hb-toggle.primary svg {
        color: #000000;
    }
}

/* Output console (the bottom panel with Consolă / Previzualizare) */
body.srv2003-desktop .output-panel {
    background: #d4d0c8;
    color: #000000;
    border-top: 1px solid #808080;
    box-shadow: inset 0 1px 0 #ffffff;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
}
body.srv2003-desktop .output-header {
    background: #d4d0c8;
    border-bottom: 1px solid #808080;
    padding: 0;
    height: auto;
    box-shadow: inset 0 -1px 0 #ffffff;
}
body.srv2003-desktop .output-tabs {
    display: flex;
    gap: 0;
    padding: 2px 2px 0;
}
body.srv2003-desktop .output-tab {
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px 0 0 #404040,
        inset -2px 0 0 #808080;
    padding: 4px 14px;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    margin-right: 2px;
}
body.srv2003-desktop .output-tab.active {
    font-weight: 700;
    background: #d4d0c8;
}
body.srv2003-desktop .output-status {
    color: #404040;
    font-family: "Lucida Console", monospace;
    font-size: 10px;
    padding: 0 8px;
}
body.srv2003-desktop .output-clear {
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    padding: 2px 10px;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    margin: 2px 4px;
}
body.srv2003-desktop .output {
    background: #ffffff;
    color: #000000;
    font-family: "Lucida Console", "Consolas", "Courier New", monospace;
    font-size: 11px;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
}
body.srv2003-desktop .output .empty { color: #606060; }

/* OS-unsupported banner re-skinned as a Win32 system info bar:
   yellow striped warning bar like the IE downloads notification */
body.srv2003-desktop .banner {
    background: #ffffe1;
    color: #000000;
    border: 0;
    border-bottom: 1px solid #d4a017;
    box-shadow: inset 0 -1px 0 #fef3a0;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    padding: 4px 8px;
    animation: none;
}
body.srv2003-desktop .banner-text { color: #000000; }
body.srv2003-desktop .banner-text b { font-weight: 700; }
body.srv2003-desktop .banner-btn {
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    height: 22px;
    padding: 0 12px;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
}
body.srv2003-desktop .banner-close {
    background: #d4d0c8;
    border-radius: 0;
    width: 18px;
    height: 18px;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
}

/* Win32 checkboxes for the prefs dialog. The IDE's .switch is a
   pill toggle; under Server 2003 we want a 13 px square checkbox
   with a checkmark drawn via pseudo-element. */
body.srv2003-desktop .switch {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
body.srv2003-desktop .switch .slider {
    background: #ffffff;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
    transition: none;
}
body.srv2003-desktop .switch .slider::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transition: none;
    width: auto;
    height: auto;
    top: 0; left: 0;
}
body.srv2003-desktop .switch input:checked + .slider { background: #ffffff; }
body.srv2003-desktop .switch input:checked + .slider::before {
    transform: none;
    background:
        linear-gradient(45deg, transparent 35%, #000000 35%, #000000 50%, transparent 50%) 1px 4px / 5px 5px no-repeat,
        linear-gradient(-45deg, transparent 35%, #000000 35%, #000000 50%, transparent 50%) 5px 0 / 7px 8px no-repeat;
}
body.srv2003-desktop .switch.locked .slider {
    background: #d4d0c8;
}
body.srv2003-desktop .switch.locked .slider::after {
    background-image: none;
    content: "";
}

/* Hide the Server 2003 taskbar during the install setup. Just in
   case the desktop module mounted before the install root. */
body.srv2003-installing #srv2003Taskbar,
body.srv2003-installing #srv2003StartMenu { display: none !important; }

/* ============================================================
   DR. WATSON DIALOG
   ============================================================ */
.srv2k3-drwatson .drw-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 11px;
}
.srv2k3-drwatson .drw-row label {
    flex: 0 0 auto;
    min-width: 130px;
    text-align: right;
}
.srv2k3-drwatson .drw-row input,
.srv2k3-drwatson .drw-row select {
    flex: 1;
}
.srv2k3-drwatson .drw-row-split {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
}
.srv2k3-drwatson .drw-row-split > div { display: flex; flex-direction: column; gap: 2px; }
.srv2k3-drwatson .drw-row-split label { min-width: 0; text-align: left; }
.srv2k3-drwatson .drw-options {
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #ffffff;
    padding: 6px 10px;
    margin: 8px 0;
    font-size: 11px;
}
.srv2k3-drwatson .drw-options legend { padding: 0 4px; font-weight: 400; }
.srv2k3-drwatson .drw-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0;
}
.srv2k3-drwatson .drw-check input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    background: #ffffff;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
    margin: 0;
    flex-shrink: 0;
}
.srv2k3-drwatson .drw-check input[type=checkbox]:checked {
    background:
        linear-gradient(45deg, transparent 35%, #000000 35%, #000000 50%, transparent 50%) 1px 4px / 5px 5px no-repeat,
        linear-gradient(-45deg, transparent 35%, #000000 35%, #000000 50%, transparent 50%) 5px 0 / 7px 8px no-repeat,
        #ffffff;
}
.srv2k3-drwatson .drw-list {
    background: #ffffff;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
    height: 80px;
    overflow-y: auto;
    font-family: "Lucida Console", "Consolas", monospace;
    font-size: 11px;
    margin-bottom: 6px;
}
.srv2k3-drwatson .drw-empty {
    padding: 8px;
    color: #606060;
    font-family: "Tahoma", sans-serif;
    font-style: italic;
}
.srv2k3-drwatson .drw-fault {
    display: flex;
    gap: 12px;
    padding: 2px 6px;
    cursor: pointer;
    color: #000000;
}
.srv2k3-drwatson .drw-fault:hover { background: #d6e8ff; }
.srv2k3-drwatson .drw-fault.selected { background: #0a246a; color: #ffffff; }
.srv2k3-drwatson .drw-fault-mod { flex: 1; min-width: 0; }
.srv2k3-drwatson .drw-fault-lbl { flex: 0 0 110px; }
.srv2k3-drwatson .drw-fault-code { flex: 0 0 70px; text-align: right; }
.srv2k3-drwatson .drw-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 4px;
}
.srv2k3-drwatson-details .drw-detail {
    background: #ffffff;
    color: #000000;
    font-family: "Lucida Console", "Consolas", monospace;
    font-size: 11px;
    padding: 12px 16px;
    margin: 0;
    white-space: pre;
    overflow-x: auto;
    max-height: 360px;
    overflow-y: auto;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
    margin: 12px 16px;
}

/* ============================================================
   TASK MANAGER
   ============================================================ */
.srv2k3-taskmgr .tm-tabs {
    display: flex;
    gap: 0;
    background: #d4d0c8;
    padding: 4px 4px 0;
    border-bottom: 1px solid #808080;
}
.srv2k3-taskmgr .tm-tab {
    appearance: none;
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px 0 0 #404040,
        inset -2px 0 0 #808080;
    padding: 4px 14px 5px;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    margin-right: 2px;
    cursor: pointer;
}
.srv2k3-taskmgr .tm-tab.active { font-weight: 700; padding-bottom: 6px; }
.srv2k3-taskmgr .tm-pane {
    background: #d4d0c8;
    padding: 10px;
    min-height: 280px;
}
.srv2k3-taskmgr .tm-pane[hidden] { display: none; }
.srv2k3-taskmgr .tm-table {
    width: 100%;
    background: #ffffff;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
    border-collapse: collapse;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
}
.srv2k3-taskmgr .tm-table th {
    background: #d4d0c8;
    color: #000000;
    font-weight: 400;
    text-align: left;
    padding: 3px 8px;
    box-shadow:
        inset -1px -1px 0 #808080,
        inset 1px 1px 0 #ffffff;
    border-right: 1px solid #808080;
}
.srv2k3-taskmgr .tm-table td {
    padding: 2px 8px;
    color: #000000;
    border-bottom: 1px solid #ffffff;
}
.srv2k3-taskmgr .tm-table tr:hover td { background: #d6e8ff; }
.srv2k3-taskmgr .tm-table tr.selected td { background: #0a246a; color: #ffffff; }
.srv2k3-taskmgr .tm-status {
    background: #d4d0c8;
    color: #000000;
    border-top: 1px solid #808080;
    box-shadow: inset 0 1px 0 #ffffff;
    padding: 4px 10px;
    font-size: 11px;
    font-family: "Tahoma", sans-serif;
}
.srv2k3-taskmgr .tm-perf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
    color: #000000;
}
.srv2k3-taskmgr .tm-perf-block {
    background: #d4d0c8;
    padding: 8px 10px;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #ffffff;
}
.srv2k3-taskmgr .tm-perf-label { font-size: 11px; margin-bottom: 4px; }
.srv2k3-taskmgr .tm-perf-meter {
    background: #000000;
    width: 60px;
    height: 80px;
    position: relative;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #d4d0c8;
}
.srv2k3-taskmgr .tm-perf-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #3aff3a;
    height: 5%;
    transition: none;
}
.srv2k3-taskmgr .tm-perf-bar-pf { background: #3a3aff; height: 36%; }
.srv2k3-taskmgr .tm-perf-num { font-family: "Lucida Console", monospace; font-size: 11px; margin-top: 4px; }
.srv2k3-taskmgr .tm-perf-graph {
    grid-column: 1 / -1;
    background: #d4d0c8;
    padding: 8px 10px;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #ffffff;
}
.srv2k3-taskmgr .tm-perf-graph-label { font-size: 11px; margin-bottom: 4px; }
.srv2k3-taskmgr .tm-perf-canvas { width: 100%; height: 64px; display: block; }
.srv2k3-taskmgr .tm-perf-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    font-size: 11px;
    line-height: 1.6;
}
.srv2k3-taskmgr .tm-perf-stats > div {
    background: #d4d0c8;
    padding: 8px 10px;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #ffffff;
}

/* ============================================================
   NOTEPAD
   ============================================================ */
.srv2k3-notepad .np-menubar {
    background: #d4d0c8;
    border-bottom: 1px solid #808080;
    box-shadow: inset 0 -1px 0 #ffffff;
    padding: 2px 4px;
    display: flex;
    gap: 0;
}
.srv2k3-notepad .np-menu {
    appearance: none;
    background: transparent;
    border: 0;
    color: #000000;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    padding: 3px 10px;
    cursor: pointer;
}
.srv2k3-notepad .np-menu:hover { background: #316ac5; color: #ffffff; }
.srv2k3-notepad .np-text {
    width: 100%;
    box-sizing: border-box;
    height: 280px;
    background: #ffffff;
    color: #000000;
    border: 0;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
    font-family: "Lucida Console", "Consolas", "Courier New", monospace;
    font-size: 12px;
    padding: 4px 6px;
    resize: none;
    white-space: pre;
    overflow: auto;
}
.srv2k3-notepad .np-text.wrap { white-space: pre-wrap; }

/* ============================================================
   MY COMPUTER / CONTROL PANEL / ADMIN TOOLS
   ============================================================ */
.srv2k3-mycomp .mycomp-toolbar,
.srv2k3-cpanel .mycomp-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #d4d0c8;
    border-bottom: 1px solid #808080;
    box-shadow: inset 0 -1px 0 #ffffff;
    font-size: 11px;
}
.srv2k3-mycomp .mycomp-addr,
.srv2k3-cpanel .mycomp-addr {
    color: #000000;
    font-size: 11px;
}
.srv2k3-mycomp .mycomp-grid {
    background: #ffffff;
    padding: 14px;
    color: #000000;
}
.srv2k3-mycomp .mycomp-section { margin-bottom: 18px; }
.srv2k3-mycomp .mycomp-section:last-child { margin-bottom: 0; }
.srv2k3-mycomp .mycomp-section-title {
    background: linear-gradient(90deg, #6a8ec0 0, #b8d0ec 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 8px;
    margin-bottom: 8px;
}
.srv2k3-mycomp .mycomp-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.srv2k3-mycomp .mycomp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4px;
    cursor: default;
    color: #000000;
}
.srv2k3-mycomp .mycomp-item:hover { background: #d6e8ff; }
.srv2k3-mycomp .mycomp-icon {
    width: 32px; height: 32px;
    margin-bottom: 4px;
    background: #d4d0c8;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
}
.srv2k3-mycomp .mycomp-icon-disk {
    background:
        linear-gradient(180deg, #e0e0e0 0, #c0c0c0 50%, #909090 100%);
}
.srv2k3-mycomp .mycomp-icon-floppy {
    background:
        linear-gradient(180deg, #404040 0, #606060 100%);
}
.srv2k3-mycomp .mycomp-icon-cd {
    background:
        radial-gradient(circle at 50% 50%, #ffffff 4px, #c0c0c0 6px, #808080 14px, #c0c0c0 16px);
    border-radius: 50%;
}
.srv2k3-mycomp .mycomp-name { font-size: 11px; font-weight: 700; }
.srv2k3-mycomp .mycomp-sub { font-size: 10px; color: #404040; margin-top: 1px; }

.srv2k3-cpanel .cpanel-grid {
    background: #ffffff;
    padding: 14px;
    color: #000000;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}
.srv2k3-cpanel .cpanel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    cursor: default;
    color: #000000;
}
.srv2k3-cpanel .cpanel-item:hover { background: #d6e8ff; }
/* Items that actually open a window (data-cp-real / data-admin-real)
   get a pointer cursor so the user knows they\'re clickable. */
.srv2k3-cpanel .cpanel-item[data-cp-real],
.srv2k3-cpanel .cpanel-item[data-admin-real] {
    cursor: pointer;
}
.srv2k3-cpanel .cpanel-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
}
.srv2k3-cpanel .cpanel-name { font-size: 11px; }

/* ============================================================
   SHUTDOWN: Shutting-down screen + safe-to-turn-off legacy screen
   + reason fieldset inside the Shutdown dialog
   ============================================================ */
.srv2k3-shutdown-reason {
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #ffffff;
    padding: 8px 10px;
    font-size: 11px;
    margin-top: 6px;
}
.srv2k3-shutdown-reason legend { padding: 0 4px; font-weight: 400; font-size: 11px; }

.srv2k3-shut-screen {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: "Tahoma", "Verdana", sans-serif;
}
.srv2k3-shut-screen.phase-shutting-down { background: #000000; }
.srv2k3-shut-screen.phase-safe-off {
    background: #000000;
    flex-direction: column;
    gap: 30px;
}
.srv2k3-shut-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.srv2k3-shut-flag svg { display: block; }
.srv2k3-shut-title {
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #ffffff;
}
.srv2k3-shut-title sup { font-size: 0.4em; vertical-align: super; }
.srv2k3-shut-sub {
    font-size: 14px;
    color: #c8c8c8;
}
.srv2k3-safe-text {
    font-size: 28px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    padding: 0 40px;
}
.srv2k3-safe-btn {
    appearance: none;
    background: #d4d0c8;
    color: #000000;
    border: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    padding: 4px 24px;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    cursor: pointer;
}
.srv2k3-safe-btn:active {
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
}

/* Run dialog: prompt with question-mark icon next to the prose */
.srv2k3-run-dialog .srv2k3-run-prompt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.srv2k3-run-dialog .srv2k3-run-icon {
    flex: 0 0 auto;
    padding-top: 1px;
}

/* ============================================================
   COMMAND PROMPT (cmd.exe in Server 2003)
   ============================================================ */
.srv2k3-cmd .cmd-screen {
    background: #000000;
    color: #c0c0c0;
    font-family: "Lucida Console", "Consolas", "Courier New", monospace;
    font-size: 12px;
    padding: 6px 8px;
    height: 360px;
    overflow-y: auto;
    line-height: 1.35;
}
.srv2k3-cmd .cmd-out div {
    white-space: pre-wrap;
    word-break: break-all;
}
.srv2k3-cmd .cmd-line {
    display: flex;
    align-items: center;
}
.srv2k3-cmd .cmd-prompt {
    flex: 0 0 auto;
    color: #c0c0c0;
}
.srv2k3-cmd .cmd-input {
    flex: 1;
    background: transparent;
    border: 0;
    color: #c0c0c0;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    padding: 0;
    box-shadow: none;
    caret-color: #c0c0c0;
}
.srv2k3-cmd .cmd-input:focus { outline: none; }

/* ============================================================
   DESKTOP ICONS
   Top-left grid of three default Server 2003 desktop shortcuts:
   Manage Your Server, My Computer, Recycle Bin. Position fixed
   so they sit above the IDE app pane but below dialogs. White
   labels with subtle text shadow for legibility on the blue
   desktop, just like the real OS.
   ============================================================ */
.srv2k3-desktop-icons {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 50;
    display: none;
    flex-direction: column;
    gap: 14px;
    pointer-events: auto;
}
body.srv2003-min .srv2k3-desktop-icons { display: flex; }
body.srv2003-min .app { display: none; }
.srv2k3-dicon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 76px;
    padding: 4px;
    cursor: default;
    user-select: none;
}
.srv2k3-dicon-img {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    display: grid;
    place-items: center;
}
.srv2k3-dicon-img svg {
    width: 32px;
    height: 32px;
}
.srv2k3-dicon-label {
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
    text-shadow:
        1px 0 0 #000000,
       -1px 0 0 #000000,
        0 1px 0 #000000,
        0 -1px 0 #000000;
    padding: 1px 3px;
}
.srv2k3-dicon.selected .srv2k3-dicon-img {
    background: rgba(10, 36, 106, 0.4);
    box-shadow: inset 0 0 0 1px #ffffff;
}
.srv2k3-dicon.selected .srv2k3-dicon-label {
    background: #0a246a;
    color: #ffffff;
    text-shadow: none;
    outline: 1px dotted #ffffff;
    outline-offset: -1px;
}

/* ============================================================
   MANAGE YOUR SERVER
   ============================================================ */
.srv2k3-mys .mys-banner {
    background: linear-gradient(180deg, #2d5da7 0, #1d3f7a 100%);
    color: #ffffff;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.srv2k3-mys .mys-banner-flag svg { display: block; }
.srv2k3-mys .mys-banner-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.srv2k3-mys .mys-banner-sub {
    font-size: 11px;
    color: #c8d8f0;
    margin-top: 2px;
    font-family: "Lucida Console", "Consolas", monospace;
}
.srv2k3-mys .mys-content {
    background: #ffffff;
    color: #000000;
    padding: 14px 18px;
    font-size: 11px;
    line-height: 1.45;
}
.srv2k3-mys .mys-role {
    border-top: 1px solid #c0c0c0;
    padding: 10px 0 8px;
}
.srv2k3-mys .mys-role:last-of-type { border-bottom: 1px solid #c0c0c0; margin-bottom: 12px; }
.srv2k3-mys .mys-role-title {
    color: #003366;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 4px;
}
.srv2k3-mys .mys-role-desc { color: #000000; }
.srv2k3-mys .mys-role-desc a { color: #0000ee; text-decoration: underline; }
.srv2k3-mys .mys-startup {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    margin-top: 4px;
}
.srv2k3-mys .mys-startup input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    background: #ffffff;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
    margin: 0;
}
.srv2k3-mys .mys-startup input[type=checkbox]:checked {
    background:
        linear-gradient(45deg, transparent 35%, #000000 35%, #000000 50%, transparent 50%) 1px 4px / 5px 5px no-repeat,
        linear-gradient(-45deg, transparent 35%, #000000 35%, #000000 50%, transparent 50%) 5px 0 / 7px 8px no-repeat,
        #ffffff;
}

/* ============================================================
   RECYCLE BIN
   ============================================================ */
.srv2k3-recycle .recycle-empty {
    background: #ffffff;
    color: #000000;
    padding: 36px 18px;
    text-align: center;
    font-size: 11px;
}
.srv2k3-recycle .recycle-empty-icon {
    display: inline-block;
    margin-bottom: 10px;
}
.srv2k3-recycle .recycle-empty-icon svg {
    width: 48px;
    height: 48px;
}

/* ============================================================
   QUICK LAUNCH + TASKBAR ENTRIES
   The strip of small flat buttons between Start and the task
   list. Real Server 2003 has Show Desktop, IE, and Outlook
   here. We keep just Show Desktop. The task list shows one
   pressed button per running window, with the IDE\'s entry
   pre-pinned so the user can minimize/restore the IDE.
   ============================================================ */
.srv2k3-task-btn {
    appearance: none;
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
    padding: 0 8px;
    height: 22px;
    min-width: 160px;
    max-width: 220px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    cursor: pointer;
    overflow: hidden;
}
.srv2k3-task-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.srv2k3-task-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.srv2k3-task-btn.active {
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
    background:
        repeating-linear-gradient(135deg,
            #d4d0c8 0,
            #d4d0c8 2px,
            #c4c0b8 2px,
            #c4c0b8 4px);
    font-weight: 700;
}

/* ============================================================
   QNX REINSTALL SCREEN
   Plays after Reset on the safe-to-turn-off screen. Mimics a
   QNX Neutrino setup: dark cyan background, white-on-cyan text-
   mode log, the QNX wordmark in the top-left, status line at
   the bottom. Pure CSS, no animation other than the per-line
   incremental log scroll.
   ============================================================ */
.qnx-reinstall {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: #002a3a;
    color: #b0e0d8;
    font-family: "Lucida Console", "Consolas", "Courier New", monospace;
    font-size: 12px;
    display: flex;
}
.qnx-reinstall-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.qnx-reinstall-banner {
    background: #034056;
    color: #ffffff;
    padding: 6px 12px;
    font-family: "Tahoma", "Verdana", sans-serif;
    font-size: 13px;
    letter-spacing: 0.02em;
    border-bottom: 1px solid #4d8ea3;
}
.qnx-reinstall-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 16px;
    font-family: "Lucida Console", "Consolas", monospace;
    font-size: 12px;
    line-height: 1.45;
}
.qnx-reinstall-line { white-space: pre-wrap; }
.qnx-reinstall-status {
    background: #034056;
    color: #ffffff;
    padding: 4px 12px;
    font-family: "Tahoma", "Verdana", sans-serif;
    font-size: 12px;
    border-top: 1px solid #4d8ea3;
}
.srv2k3-safe-actions {
    display: flex;
    gap: 14px;
}

/* ============================================================
   DR. WATSON DETAIL TABS + CPU STATE + PATCH PANE
   ============================================================ */
.srv2k3-drwatson-details .drw-detail-tabs {
    display: flex;
    gap: 0;
    background: #d4d0c8;
    padding: 4px 4px 0;
    border-bottom: 1px solid #808080;
}
.srv2k3-drwatson-details .drw-detail-tab {
    appearance: none;
    background: #d4d0c8;
    color: #000000;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px 0 0 #404040,
        inset -2px 0 0 #808080;
    padding: 4px 14px 5px;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    margin-right: 2px;
    cursor: pointer;
}
.srv2k3-drwatson-details .drw-detail-tab.active {
    font-weight: 700;
    padding-bottom: 6px;
}
.srv2k3-drwatson-details .drw-detail-pane {
    background: #d4d0c8;
    padding: 12px 16px;
    min-height: 280px;
}
.srv2k3-drwatson-details .drw-detail-pane[hidden] { display: none; }

/* CPU State pane */
.srv2k3-drwatson-details .drw-vm-header {
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    font-weight: 700;
    margin: 4px 0 6px;
}
.srv2k3-drwatson-details .drw-vm-regs {
    width: 100%;
    background: #ffffff;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
    border-collapse: collapse;
    font-family: "Lucida Console", "Consolas", monospace;
    font-size: 11px;
    margin-bottom: 12px;
}
.srv2k3-drwatson-details .drw-vm-regs th {
    background: #d4d0c8;
    text-align: right;
    padding: 2px 6px;
    font-weight: 700;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #ffffff;
    width: 40px;
}
.srv2k3-drwatson-details .drw-vm-regs td {
    padding: 2px 8px;
    border-right: 1px solid #c0c0c0;
}
.srv2k3-drwatson-details .drw-vm-disasm {
    width: 100%;
    background: #000000;
    color: #c0c0c0;
    font-family: "Lucida Console", "Consolas", monospace;
    font-size: 11px;
    border-collapse: collapse;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff;
}
.srv2k3-drwatson-details .drw-vm-disasm td {
    padding: 1px 8px;
    color: #c0c0c0;
}
.srv2k3-drwatson-details .drw-vm-addr   { width: 80px; color: #888888; }
.srv2k3-drwatson-details .drw-vm-bytes  { width: 110px; color: #888888; }
.srv2k3-drwatson-details .drw-vm-mnem   { color: #c0c0c0; }
.srv2k3-drwatson-details tr.drw-vm-fault td { background: #5a0000; color: #ffffff; }
.srv2k3-drwatson-details tr.drw-vm-fault .drw-vm-marker { color: #ffd34d; font-weight: 700; }

/* Patch pane */
.srv2k3-drwatson-details .drw-patch {
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    color: #000000;
}
.srv2k3-drwatson-details .drw-patch-target {
    background: #ffffff;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff;
    padding: 6px 10px;
    margin-bottom: 10px;
}
.srv2k3-drwatson-details .drw-patch-target-label { color: #404040; }
.srv2k3-drwatson-details .drw-patch-target code {
    font-family: "Lucida Console", monospace;
    font-weight: 700;
}
.srv2k3-drwatson-details .drw-patch-explain {
    margin: 4px 0 10px;
    line-height: 1.5;
}
.srv2k3-drwatson-details .drw-patch-actions {
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #ffffff;
    padding: 8px 12px;
    margin-bottom: 10px;
}
.srv2k3-drwatson-details .drw-patch-actions legend {
    padding: 0 4px;
    font-weight: 400;
}
.srv2k3-drwatson-details .drw-patch-actions .drw-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0;
}
.srv2k3-drwatson-details .drw-patch-actions input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    background: #ffffff;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
    border-radius: 50%;
    margin: 0;
    flex-shrink: 0;
    position: relative;
}
.srv2k3-drwatson-details .drw-patch-actions input[type=radio]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: #000000;
    border-radius: 50%;
}
.srv2k3-drwatson-details .drw-patch-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.srv2k3-drwatson-details .drw-patch-status {
    background: #ffffe1;
    border: 1px solid #d4a017;
    padding: 6px 8px;
    font-size: 11px;
}

/* ============================================================
   TRAY BALLOON
   Server 2003 tray-style notification balloon, used when the IDE
   is minimized (toasts are anchored to the .app pane and would
   not be visible). Pale-yellow body with a black border, an arrow
   pointing down toward the tray, dismisses on click or after 7s.
   ============================================================ */
.srv2k3-balloon {
    position: fixed;
    bottom: 32px;
    right: 8px;
    width: 280px;
    z-index: 60000;
    pointer-events: auto;
    cursor: pointer;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
}
.srv2k3-balloon-arrow {
    position: absolute;
    bottom: -8px;
    right: var(--arrow-right, 60px);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #000000;
}
.srv2k3-balloon-arrow::after {
    content: "";
    position: absolute;
    top: -10px;
    left: -7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ffffe1;
}
.srv2k3-balloon-body {
    background: #ffffe1;
    color: #000000;
    border: 1px solid #000000;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    padding: 0;
}
.srv2k3-balloon-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 8px;
    font-weight: 700;
    font-size: 11px;
    border-bottom: 1px solid #d4a017;
    background: #ffffe1;
}
.srv2k3-balloon-info {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    background: #3578d8;
    color: #ffffff;
    border-radius: 50%;
    font-style: italic;
    font-family: "Times", serif;
    font-weight: 700;
    flex-shrink: 0;
}
.srv2k3-balloon-close {
    margin-left: auto;
    appearance: none;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    color: #000000;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.srv2k3-balloon-close:hover { color: #800000; }
.srv2k3-balloon-text {
    padding: 6px 10px 8px;
    font-size: 11px;
    line-height: 1.45;
}

/* Tray icon context menu, Classic gray popup pinned above the
   tray icon, single column, no submenus. */
.srv2k3-tray-menu {
    position: fixed;
    z-index: 60001;
    background: #d4d0c8;
    color: #000000;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px -1px 0 #404040,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080,
        2px 2px 4px rgba(0, 0, 0, 0.35);
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    padding: 2px;
    min-width: 170px;
}
.srv2k3-tray-menu-item {
    appearance: none;
    background: transparent;
    color: #000000;
    border: 0;
    width: 100%;
    text-align: left;
    padding: 4px 16px 4px 24px;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}
.srv2k3-tray-menu-item:hover { background: #0a246a; color: #ffffff; }
.srv2k3-tray-menu-sep {
    height: 1px;
    background: #808080;
    box-shadow: 0 1px 0 #ffffff;
    margin: 2px 4px;
}

/* ============================================================
   ROLE ADMIN (File Server / App Server admin windows opened
   from Manage Your Server)
   ============================================================ */
.srv2k3-roleadmin .ra-toolbar {
    background: linear-gradient(180deg, #f7f7f7 0, #d4d0c8 100%);
    color: #000000;
    font-size: 11px;
    padding: 4px 10px;
    border-bottom: 1px solid #808080;
    box-shadow: inset 0 -1px 0 #ffffff;
    display: flex;
    justify-content: space-between;
}
.srv2k3-roleadmin .ra-status strong { font-weight: 700; }
.srv2k3-roleadmin .ra-split {
    display: grid;
    grid-template-columns: 160px 1fr;
    height: 380px;
}
.srv2k3-roleadmin .ra-nav {
    background: #d4d0c8;
    border-right: 1px solid #808080;
    box-shadow: inset -1px 0 0 #ffffff;
    padding: 4px 0;
    font-size: 11px;
}
.srv2k3-roleadmin .ra-nav-item {
    padding: 4px 12px;
    cursor: pointer;
    color: #000000;
}
.srv2k3-roleadmin .ra-nav-item:hover { background: #d6e8ff; }
.srv2k3-roleadmin .ra-nav-item.active {
    background: #0a246a;
    color: #ffffff;
    font-weight: 700;
}
.srv2k3-roleadmin .ra-pane {
    background: #ffffff;
    color: #000000;
    padding: 10px;
    overflow-y: auto;
}
.srv2k3-roleadmin .ra-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    margin-bottom: 12px;
}
.srv2k3-roleadmin .ra-table th {
    background: #d4d0c8;
    color: #000000;
    font-weight: 400;
    text-align: left;
    padding: 3px 8px;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #ffffff;
}
.srv2k3-roleadmin .ra-table td {
    padding: 3px 8px;
    border-bottom: 1px solid #f0f0f0;
}
.srv2k3-roleadmin .ra-form {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 10px;
    align-items: center;
    padding: 10px 4px 0;
    border-top: 1px solid #c0c0c0;
    margin-top: 8px;
    font-size: 11px;
}
.srv2k3-roleadmin .ra-form label { text-align: right; padding-right: 4px; }
.srv2k3-roleadmin .ra-form .ra-check { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: 6px; }
.srv2k3-roleadmin .ra-form button {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
}
.srv2k3-roleadmin .ra-form input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px; height: 13px;
    background: #ffffff;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
}
.srv2k3-roleadmin .ra-form input[type=checkbox]:checked {
    background:
        linear-gradient(45deg, transparent 35%, #000000 35%, #000000 50%, transparent 50%) 1px 4px / 5px 5px no-repeat,
        linear-gradient(-45deg, transparent 35%, #000000 35%, #000000 50%, transparent 50%) 5px 0 / 7px 8px no-repeat,
        #ffffff;
}
/* Horizontal button layout (used for Start/Stop pairs that don\'t need
   the label/value grid the default .ra-form provides). */
.srv2k3-roleadmin .ra-form.ra-form-row {
    display: flex;
    gap: 8px;
    padding: 10px 4px 4px;
    border-top: 1px solid #c0c0c0;
    margin-top: 8px;
    align-items: center;
}
.srv2k3-roleadmin .ra-form.ra-form-row button {
    grid-column: auto;
    justify-self: auto;
    margin-top: 0;
}
/* Per-row Start/Stop buttons inside the sites table, narrower than
   the general .btn so they fit in a tight table cell. */
.srv2k3-roleadmin .ra-table .ra-row-btn {
    padding: 1px 8px;
    font-size: 11px;
    min-width: 64px;
}

/* ============================================================
   LEGACY BIOS BUTTONS on the safe-to-turn-off screen.
   Off-white rectangles with thin black borders, monospaced
   labels, and a small Fkey hint badge inside, like a BIOS
   text-mode prompt rather than the Win32 button look.
   ============================================================ */
.srv2k3-bios-controls {
    display: flex;
    gap: 16px;
}
.srv2k3-bios-btn {
    appearance: none;
    background: #c8c8b8;
    color: #000000;
    border: 1px solid #000000;
    box-shadow: 2px 2px 0 #000000;
    padding: 6px 16px;
    font-family: "Lucida Console", "Consolas", "Courier New", monospace;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.srv2k3-bios-btn:hover { background: #d8d8c8; }
.srv2k3-bios-btn:active {
    background: #b8b8a8;
    transform: translate(2px, 2px);
    box-shadow: none;
}
.srv2k3-bios-btn-key {
    background: #000000;
    color: #c8c8b8;
    padding: 1px 6px;
    font-size: 11px;
    border-radius: 0;
}
.srv2k3-bios-btn-label {}

/* ============================================================
   PHOENIX BIOS SETUP UTILITY
   Full-screen text-mode interface in classic Phoenix blue
   (#000080) with white text. Top tab bar, two-column body
   (settings on left, Item Specific Help on right), key hints
   in a single row at the bottom.
   ============================================================ */
.bios-setup {
    position: fixed;
    inset: 0;
    z-index: 100002;
    background: #000080;
    color: #c0c0c0;
    font-family: "Lucida Console", "Consolas", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
    overflow: hidden;
}
.bios-setup .bios-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.bios-setup .bios-banner {
    background: #c0c0c0;
    color: #000080;
    text-align: center;
    padding: 4px 0;
    font-weight: 700;
}
.bios-setup .bios-tabs {
    background: #c0c0c0;
    color: #000080;
    padding: 4px 16px;
    font-weight: 700;
    border-bottom: 1px solid #000080;
}
.bios-setup .bios-tab {
    padding: 2px 8px;
    margin-right: 6px;
}
.bios-setup .bios-tab.active {
    background: #000080;
    color: #ffffff;
}
.bios-setup .bios-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 320px;
    overflow: hidden;
    border-bottom: 1px solid #c0c0c0;
}
.bios-setup .bios-fields {
    padding: 12px 24px;
    overflow-y: auto;
    border-right: 1px solid #c0c0c0;
}
.bios-setup .bios-field {
    display: flex;
    padding: 1px 4px;
    color: #c0c0c0;
}
.bios-setup .bios-field-label {
    flex: 0 0 200px;
    color: #c0c0c0;
}
.bios-setup .bios-field-value {
    flex: 1;
    color: #ffffff;
}
.bios-setup .bios-field-active {
    background: #c0c0c0;
}
.bios-setup .bios-field-active .bios-field-label,
.bios-setup .bios-field-active .bios-field-value {
    color: #000080;
}
.bios-setup .bios-field-block {
    margin: 4px 0 8px 24px;
}
.bios-setup .bios-field-sep {
    /* Section header inside a tab. Gray on Phoenix-blue, no
       selection state (skipped by arrow navigation). The leading
       ">" character mimics how real Phoenix Setup labels its
       collapsible sub-menus on screen. */
    color: #ffff80;
    font-weight: 700;
    padding: 5px 4px 1px;
    border-top: 1px dotted #404080;
    margin-top: 3px;
}
.bios-setup .bios-fields > .bios-field-sep:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 1px;
}
.bios-setup .bios-order {
    background: #000080;
    color: #ffff80;
    padding: 4px 8px;
    border: 1px solid #c0c0c0;
    display: inline-block;
}
.bios-setup .bios-order-row { color: #ffff80; }
.bios-setup .bios-help {
    padding: 12px 16px;
    background: #000080;
    color: #c0c0c0;
}
.bios-setup .bios-help-title {
    color: #ffffff;
    font-weight: 700;
    border-bottom: 1px solid #c0c0c0;
    padding-bottom: 2px;
    margin-bottom: 8px;
    text-align: center;
}
.bios-setup .bios-help-text {
    color: #c0c0c0;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
}
.bios-setup .bios-footer {
    background: #c0c0c0;
    color: #000080;
    padding: 4px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
}
.bios-setup .bios-key {
    background: #000080;
    color: #ffffff;
    padding: 0 4px;
    margin-right: 2px;
}
/* ------------------------------------------------------------
   BIOS SETUP - portrait / narrow mobile layout
   Phoenix's two-pane layout (fields on the left, item help on
   the right) needs ~620px of width to read. On portrait phones
   the help pane gets squeezed under 200px and field labels +
   values jam together. Stack help below fields, give tabs
   horizontal scroll, shrink the field-label fixed width, and
   wrap footer keys onto multiple lines. The .bios-setup root
   stays full-screen.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    .bios-setup { font-size: 12px; }
    .bios-setup .bios-tabs {
        padding: 4px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }
    .bios-setup .bios-tab {
        padding: 2px 6px;
        margin-right: 4px;
        display: inline-block;
    }
    .bios-setup .bios-body {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }
    .bios-setup .bios-fields {
        padding: 8px 12px;
        border-right: 0;
        border-bottom: 1px solid #c0c0c0;
    }
    .bios-setup .bios-field {
        padding: 1px 2px;
    }
    .bios-setup .bios-field-label {
        flex: 0 0 140px;
    }
    .bios-setup .bios-field-block {
        margin: 4px 0 6px 12px;
    }
    .bios-setup .bios-help {
        padding: 8px 12px;
        max-height: 30vh;
        overflow-y: auto;
    }
    .bios-setup .bios-help-text {
        font-size: 11px;
        line-height: 1.5;
    }
    .bios-setup .bios-footer {
        padding: 4px 8px;
        gap: 8px;
        font-size: 10px;
    }
    /* The safe-off screen's F1/F2/F12 buttons are awkward on
       phones because they sit in a single tight row. Wrap and
       enlarge tap targets so they're actually pressable. */
    .srv2k3-bios-controls {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .srv2k3-bios-btn {
        min-height: 44px;
        padding: 8px 12px;
    }
}
@media (max-width: 380px) {
    /* Truly narrow (small phone portrait): drop the label fixed
       width entirely so the value gets full row width on a new
       line when the label is long. */
    .bios-setup .bios-field {
        flex-wrap: wrap;
    }
    .bios-setup .bios-field-label {
        flex: 0 0 100%;
        font-weight: 700;
    }
}

.srv2k3-shut-screen.phase-bios-error {
    background: #000000;
    color: #c0c0c0;
    flex-direction: column;
    font-family: "Lucida Console", "Consolas", monospace;
    cursor: pointer;
}
.srv2k3-bios-error {
    text-align: center;
    font-size: 22px;
}

/* ============================================================
   COMMAND PROMPT, inline buffer + caret
   ============================================================ */
.srv2k3-cmd .cmd-screen {
    outline: none;
}
.srv2k3-cmd .cmd-screen:focus { outline: none; }
.srv2k3-cmd .cmd-row { white-space: pre-wrap; word-break: break-all; }
.srv2k3-cmd .cmd-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    white-space: pre-wrap;
    word-break: break-all;
}
.srv2k3-cmd .cmd-prompt,
.srv2k3-cmd .cmd-buf {
    color: #c0c0c0;
    font-family: inherit;
    font-size: inherit;
}
.srv2k3-cmd .cmd-buf { white-space: pre-wrap; word-break: break-all; }
.srv2k3-cmd .cmd-caret {
    display: inline-block;
    width: 8px;
    height: 13px;
    background: #c0c0c0;
    margin-left: 0;
    vertical-align: text-bottom;
    animation: cmdBlink 1s steps(2, start) infinite;
}
@keyframes cmdBlink { to { visibility: hidden; } }

/* ============================================================
   IDE SIDEBAR ADD / DELETE BUTTONS in Server 2003
   The .icon-btn at the top of the file tree (Add / Delete) keeps
   its rounded GNOME look without an override. In the Classic
   theme it must be a square 3D-bevelled button like the rest of
   the chrome.
   ============================================================ */
body.srv2003-desktop .icon-btn {
    width: 22px;
    height: 22px;
    background: #d4d0c8;
    color: #000000;
    border-radius: 0;
    box-shadow:
        inset -1px -1px 0 #404040,
        inset 1px 1px 0 #ffffff,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
}
body.srv2003-desktop .icon-btn:hover {
    background: #d4d0c8;
    color: #000000;
}
body.srv2003-desktop .icon-btn:active {
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
}
body.srv2003-desktop .icon-btn svg {
    width: 12px;
    height: 12px;
    color: #000000;
}

/* ============================================================
   HIDE THE DARK THEME PREFERENCE ROW IN SERVER 2003.
   The whole row vanishes, Server 2003 is a Classic-only OS, so
   the toggle would be misleading. The IDE\'s headerbar theme
   button is already display:none. This rule covers Preferinte.
   ============================================================ */
body.srv2003-desktop #prefDark { display: none; }
body.srv2003-desktop #prefDark + .slider { display: none; }
/* The pref row\'s parent has no id, so we hide it by checking that
   its switch input is #prefDark. The :has selector handles this. */
body.srv2003-desktop .pref-row:has(#prefDark) { display: none; }
/* If the only pref-row in a group is hidden, hide the group and
   its title block too. The "Aspect" group only contains Dark Theme. */
body.srv2003-desktop .pref-group:has(#prefDark) { display: none; }

/* ============================================================
   TRAY INFO ICON FLASHING ANIMATION
   When a non-network notification arrives, the dedicated info
   tray icon pulses to draw the eye. Pulsing stops when the user
   clicks the icon, even if the .flashing class is still on (the
   handler removes it explicitly).
   ============================================================ */
.srv2k3-tray-info.flashing {
    animation: srv2k3TrayInfoPulse 1.2s ease-in-out infinite;
}
@keyframes srv2k3TrayInfoPulse {
    0%,100% { background: transparent; }
    50%     { background: #ffe580; }
}

/* ============================================================
   NOTIFICATION LOG POPUP
   Anchored above the tray info icon. Lists the most recent
   notifications with title, time, and body. "Golire" button in
   the header clears the history. Click outside dismisses.
   ============================================================ */
.srv2k3-notif-log {
    position: fixed;
    z-index: 60002;
    width: 320px;
    max-height: 400px;
    background: #d4d0c8;
    color: #000000;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px -1px 0 #404040,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080,
        2px 2px 4px rgba(0, 0, 0, 0.35);
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    display: flex;
    flex-direction: column;
}
.srv2k3-notif-header {
    background: linear-gradient(180deg, #0a246a 0%, #1a3a78 60%, #2a4a88 100%);
    color: #ffffff;
    padding: 3px 6px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.srv2k3-notif-clear {
    appearance: none;
    background: #d4d0c8;
    color: #000000;
    border: 0;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px -1px 0 #404040,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080;
    padding: 1px 8px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}
.srv2k3-notif-clear:active {
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
}
.srv2k3-notif-body {
    flex: 1;
    overflow-y: auto;
    background: #ffffff;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff;
    margin: 4px;
}
.srv2k3-notif-row {
    padding: 6px 8px;
    border-bottom: 1px solid #e8e8e8;
}
.srv2k3-notif-row:last-child { border-bottom: 0; }
.srv2k3-notif-row-head {
    color: #0a246a;
    margin-bottom: 2px;
}
.srv2k3-notif-row-body {
    color: #000000;
    line-height: 1.4;
    white-space: pre-wrap;
}
.srv2k3-notif-empty {
    padding: 24px 8px;
    text-align: center;
    color: #606060;
}


/* ============================================================
   HELP AND SUPPORT CENTER
   Real Windows Help and Support has a teal banner at top with
   the Windows flag and "Help and Support Center" wordmark, then
   a 2-pane body with a left index and a scrollable right pane.
   ============================================================ */
.srv2k3-help .help-banner {
    background: linear-gradient(180deg, #4a8fbf 0%, #2c6090 100%);
    color: #ffffff;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #1a4060;
}
.srv2k3-help .help-banner-flag {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
}
.srv2k3-help .help-banner-flag svg { display: block; }
.srv2k3-help .help-banner-text {
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.srv2k3-help .help-split {
    display: grid;
    grid-template-columns: 200px 1fr;
    height: 380px;
    background: #d4d0c8;
}
.srv2k3-help .help-nav {
    background: #d4d0c8;
    border-right: 1px solid #808080;
    box-shadow: inset -1px 0 0 #ffffff;
    padding: 6px 0;
    overflow-y: auto;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
}
.srv2k3-help .help-nav-item {
    padding: 4px 14px;
    cursor: pointer;
    color: #0a246a;
    text-decoration: underline;
}
.srv2k3-help .help-nav-item:hover { background: #d6e8ff; }
.srv2k3-help .help-nav-item.active {
    background: #0a246a;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}
.srv2k3-help .help-pane {
    background: #ffffff;
    color: #000000;
    padding: 16px 20px;
    overflow-y: auto;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 12px;
    line-height: 1.55;
    text-wrap: pretty;
}
.srv2k3-help .help-heading {
    font-size: 16px;
    color: #0a246a;
    font-weight: 700;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #c0c0c0;
}
.srv2k3-help .help-body p { margin: 0 0 10px; }
.srv2k3-help .help-body ul,
.srv2k3-help .help-body ol {
    margin: 0 0 10px 18px;
    padding: 0;
}
.srv2k3-help .help-body li { margin-bottom: 4px; }
.srv2k3-help .help-body code {
    font-family: "Lucida Console", "Consolas", monospace;
    font-size: 11px;
    background: #f0f0f0;
    padding: 1px 4px;
}
.srv2k3-help .help-body em { color: #404040; }
.srv2k3-help .help-body strong { color: #0a246a; }

/* Disabled network icon, desaturates the icon and overlays a small
   red X to mirror real Server 2003\'s "cable unplugged" state. */
.srv2k3-tray-icon.disabled {
    opacity: 0.45;
    position: relative;
}
.srv2k3-tray-icon.disabled::after {
    content: "";
    position: absolute;
    top: 1px;
    right: -1px;
    width: 7px;
    height: 7px;
    background: #c01c28;
    border: 1px solid #ffffff;
    border-radius: 50%;
}

/* Repairing, pulse-fade the icon while a Repair operation runs. */
.srv2k3-tray-icon.repairing {
    animation: srv2k3TrayRepair 0.6s ease-in-out infinite alternate;
}
@keyframes srv2k3TrayRepair {
    0%   { opacity: 0.4; }
    100% { opacity: 1;   }
}

/* ============================================================
   MOBILE REFLOWS, narrow viewport adjustments for the most
   problematic Server 2003 dialogs. The classic 3D bevel layout
   doesn\'t take width well; these media queries collapse the
   widest tables into stacked cards and let the BIOS Setup
   stack vertically below 480 px.
   ============================================================ */

@media (max-width: 720px) {
    /* Role admin Web Sites table: too many columns for narrow
       viewports. Hide IP, port, and host header on mobile , 
       the user\'s job here is just to identify and stop a site,
       not audit network details. */
    body.srv2003-desktop .ra-table th:nth-child(3),
    body.srv2003-desktop .ra-table th:nth-child(4),
    body.srv2003-desktop .ra-table th:nth-child(5),
    body.srv2003-desktop .ra-table td:nth-child(3),
    body.srv2003-desktop .ra-table td:nth-child(4),
    body.srv2003-desktop .ra-table td:nth-child(5) {
        display: none;
    }
    body.srv2003-desktop .ra-table {
        font-size: 11px;
    }
    body.srv2003-desktop .ra-row-btn {
        min-width: 56px;
        font-size: 10px;
    }

    /* Role admin split: stack nav above pane on mobile so the
       user can see the full content area instead of a 160 px
       sidebar consuming half the dialog. */
    body.srv2003-desktop .ra-split {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr;
        height: auto;
        max-height: 70vh;
    }
    body.srv2003-desktop .ra-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid #808080;
        box-shadow: inset 0 -1px 0 #ffffff;
        padding: 4px;
        gap: 2px;
    }
    body.srv2003-desktop .ra-nav-item {
        padding: 4px 8px;
        font-size: 11px;
    }

    /* Help Center: same vertical-stack treatment. */
    body.srv2003-desktop .srv2k3-help .help-split {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
        max-height: 65vh;
    }
    body.srv2003-desktop .srv2k3-help .help-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid #808080;
        gap: 2px;
        padding: 4px;
    }
    body.srv2003-desktop .srv2k3-help .help-nav-item {
        padding: 4px 8px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    /* BIOS Setup: real PhoenixBIOS uses two columns (settings on
       left, help on right). On a narrow viewport, stack help
       below settings so neither gets squeezed. */
    body.srv2003-bios .srv2k3-bios-body {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto;
    }
    body.srv2003-bios .srv2k3-bios-help {
        border-left: 0;
        border-top: 1px solid #ffd34d;
        max-height: 120px;
        overflow-y: auto;
    }
    /* Dr. Watson Patch tab: the radio rows + Apply/Retrage row
       overflow on narrow widths. Stack them vertically. */
    body.srv2003-desktop .drw-patch-row,
    .drw-patch-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 4px;
    }
    .drw-patch-row label {
        text-align: left;
        padding-right: 0;
    }
}

/* ============================================================
   EVENT VIEWER
   MMC-style snap-in: nav tree on left listing the three logs,
   a six-column list view on the right, toolbar with Clear /
   Refresh, and a properties dialog reachable via dblclick.
   ============================================================ */
.srv2k3-evtvwr .evt-toolbar {
    background: #d4d0c8;
    border-bottom: 1px solid #808080;
    box-shadow: inset 0 -1px 0 #ffffff;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
}
.srv2k3-evtvwr .evt-toolbar-spacer { flex: 1; }
.srv2k3-evtvwr .evt-toolbar-info { color: #404040; }
.srv2k3-evtvwr .evt-split {
    display: grid;
    grid-template-columns: 200px 1fr;
    height: 360px;
    background: #ffffff;
}
.srv2k3-evtvwr .evt-nav {
    background: #d4d0c8;
    border-right: 1px solid #808080;
    box-shadow: inset -1px 0 0 #ffffff;
    padding: 4px 0;
    overflow-y: auto;
    font-size: 11px;
}
.srv2k3-evtvwr .evt-nav-root {
    padding: 4px 12px;
    font-weight: 700;
    color: #0a246a;
    border-bottom: 1px solid #c0c0c0;
    margin-bottom: 4px;
}
.srv2k3-evtvwr .evt-nav-item {
    padding: 3px 12px 3px 24px;
    cursor: pointer;
    color: #000000;
    display: flex;
    justify-content: space-between;
    gap: 6px;
}
.srv2k3-evtvwr .evt-nav-item:hover { background: #d6e8ff; }
.srv2k3-evtvwr .evt-nav-item.active {
    background: #0a246a;
    color: #ffffff;
}
.srv2k3-evtvwr .evt-nav-item.active .evt-nav-count { color: #c0c8d0; }
.srv2k3-evtvwr .evt-nav-count { color: #707070; }
.srv2k3-evtvwr .evt-pane {
    background: #ffffff;
    overflow: auto;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
}
.srv2k3-evtvwr .evt-table {
    width: 100%;
    border-collapse: collapse;
}
.srv2k3-evtvwr .evt-table th {
    background: linear-gradient(180deg, #ffffff 0%, #d4d0c8 100%);
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    text-align: left;
    padding: 3px 6px;
    font-weight: 400;
    font-size: 11px;
    position: sticky;
    top: 0;
    z-index: 1;
}
.srv2k3-evtvwr .evt-table td {
    padding: 2px 6px;
    border-bottom: 1px dotted #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.srv2k3-evtvwr .evt-table td.evt-msg-cell {
    max-width: 320px;
}
.srv2k3-evtvwr .evt-row { cursor: pointer; }
.srv2k3-evtvwr .evt-row:hover { background: #f0f4fa; }
.srv2k3-evtvwr .evt-empty {
    text-align: center;
    color: #808080;
    padding: 20px !important;
    font-style: italic;
}
.srv2k3-evtvwr .evt-type-icon {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    margin-right: 2px;
    vertical-align: middle;
}

/* Properties dialog */
.srv2k3-evtvwr-props .evt-props-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    padding: 8px 4px;
    font-size: 11px;
    border-bottom: 1px solid #c0c0c0;
    margin-bottom: 8px;
}
.srv2k3-evtvwr-props .evt-props-key { color: #404040; }
.srv2k3-evtvwr-props .evt-props-msg-label {
    font-weight: 700;
    margin-bottom: 4px;
}
.srv2k3-evtvwr-props .evt-props-msg {
    background: #ffffff;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #ffffff;
    padding: 8px 10px;
    min-height: 60px;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ============================================================
   REGISTRY EDITOR (regedit)
   Tree on the left, value list on the right. Tree uses simple
   triangle twirls and folder icons. Value rows have an "ab"
   icon for strings, the type column shows REG_DWORD / REG_SZ.
   ============================================================ */
.srv2k3-regedit .reg-toolbar {
    background: #ffffff;
    border-bottom: 1px solid #808080;
    padding: 4px 8px;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
}
.srv2k3-regedit .reg-path {
    color: #404040;
    font-family: "Lucida Console", "Consolas", monospace;
}
.srv2k3-regedit .reg-split {
    display: grid;
    /* Tree, divider, pane. Tree default 220 px so the value pane gets
       more room out of the box; user can drag the divider to retune. */
    grid-template-columns: var(--reg-tree-w, 220px) 4px 1fr;
    height: 360px;
    background: #ffffff;
}
.srv2k3-regedit .reg-divider {
    background: #d4d0c8;
    cursor: col-resize;
    border-left: 1px solid #808080;
    border-right: 1px solid #ffffff;
    user-select: none;
    transition: background 80ms ease;
}
.srv2k3-regedit .reg-divider:hover,
.srv2k3-regedit .reg-divider.dragging {
    background: #b8d0e8;
}
/* During an active drag, swap the cursor and disable text selection
   on the whole document so the user gets a clean feel. */
.srv2k3-regedit-dragging,
.srv2k3-regedit-dragging * {
    cursor: col-resize !important;
    user-select: none !important;
}
.srv2k3-regedit .reg-tree {
    background: #ffffff;
    border-right: 1px solid #808080;
    box-shadow: inset -1px 0 0 #d4d0c8;
    overflow: auto;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
    user-select: none;
    min-width: 0;
}
.srv2k3-regedit .reg-tree-item {
    padding: 2px 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    white-space: nowrap;
}
.srv2k3-regedit .reg-tree-item:hover { background: #d6e8ff; }
.srv2k3-regedit .reg-tree-item.active {
    background: #0a246a;
    color: #ffffff;
}
.srv2k3-regedit .reg-twirl {
    font-size: 8px;
    width: 12px;
    text-align: center;
    color: #404040;
}
.srv2k3-regedit .reg-tree-item.active .reg-twirl { color: #ffffff; }
.srv2k3-regedit .reg-folder-icon { color: #c08020; }
.srv2k3-regedit .reg-pane {
    background: #ffffff;
    overflow: auto;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 11px;
}
.srv2k3-regedit .reg-table {
    width: 100%;
    border-collapse: collapse;
}
.srv2k3-regedit .reg-table th {
    background: linear-gradient(180deg, #ffffff 0%, #d4d0c8 100%);
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    text-align: left;
    padding: 3px 6px;
    font-weight: 400;
    position: sticky;
    top: 0;
    z-index: 1;
}
.srv2k3-regedit .reg-table td {
    padding: 2px 6px;
    border-bottom: 1px dotted #e0e0e0;
}
.srv2k3-regedit .reg-value-row { cursor: pointer; }
.srv2k3-regedit .reg-value-row:hover { background: #f0f4fa; }
.srv2k3-regedit .reg-val-icon {
    display: inline-block;
    width: 18px;
    height: 14px;
    background: #d4d0c8;
    border: 1px solid #808080;
    color: #0a246a;
    font-family: "Times New Roman", serif;
    font-size: 10px;
    text-align: center;
    line-height: 12px;
    margin-right: 4px;
    vertical-align: middle;
    box-shadow: inset 1px 1px 0 #ffffff;
}
.srv2k3-regedit .reg-val-data {
    font-family: "Lucida Console", "Consolas", monospace;
    color: #404040;
}
.srv2k3-regedit .reg-empty {
    text-align: center;
    color: #808080;
    padding: 16px !important;
    font-style: italic;
}

/* Edit dialog */
.srv2k3-regedit-edit .reg-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.srv2k3-regedit-edit .reg-edit-row label { min-width: 100px; }
.srv2k3-regedit-edit .reg-edit-row input {
    flex: 1;
    background: #ffffff;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #ffffff;
    padding: 2px 4px;
    font-family: "Lucida Console", "Consolas", monospace;
}
.srv2k3-regedit-edit .reg-edit-base {
    display: flex;
    gap: 12px;
    margin-left: 108px;
    font-size: 11px;
}

/* Mobile reflows for the two new windows. */
@media (max-width: 720px) {
    body.srv2003-desktop .srv2k3-evtvwr .evt-split {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
        max-height: 70vh;
    }
    body.srv2003-desktop .srv2k3-regedit .reg-split {
        /* On mobile, drop the divider entirely (it can't be dragged
           comfortably with a finger anyway) and stack tree above pane. */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        height: auto;
        max-height: 70vh;
    }
    body.srv2003-desktop .srv2k3-regedit .reg-divider {
        display: none;
    }
    body.srv2003-desktop .srv2k3-evtvwr .evt-nav,
    body.srv2003-desktop .srv2k3-regedit .reg-tree {
        max-height: 130px;
        border-right: 0;
        border-bottom: 1px solid #808080;
    }
    /* Hide the time and event-ID columns on narrow viewports, date
       and source + message are enough to identify an entry. */
    body.srv2003-desktop .srv2k3-evtvwr .evt-table th:nth-child(3),
    body.srv2003-desktop .srv2k3-evtvwr .evt-table th:nth-child(5),
    body.srv2003-desktop .srv2k3-evtvwr .evt-table td:nth-child(3),
    body.srv2003-desktop .srv2k3-evtvwr .evt-table td:nth-child(5) {
        display: none;
    }
}

/* ============================================================
   HELP CENTER TIMELINE
   Used in the Windows history topic. A vertical list of rows,
   each with a year column on the left, name in the middle,
   short note on the right. The Server 2003 row gets a yellow
   background highlight to mark its pivot position.
   ============================================================ */
.srv2k3-help .help-timeline {
    margin: 8px 0 12px;
    border: 1px solid #c0c0c0;
    background: #fafafa;
}
.srv2k3-help .help-tl-row {
    display: grid;
    grid-template-columns: 78px 158px 1fr;
    gap: 6px;
    padding: 3px 8px;
    border-bottom: 1px solid #e8e8e8;
    font-size: 11px;
    line-height: 1.32;
}
.srv2k3-help .help-tl-row:last-child { border-bottom: 0; }
.srv2k3-help .help-tl-year {
    font-weight: 700;
    color: #0a246a;
    font-family: "Lucida Console", "Consolas", monospace;
    font-size: 10.5px;
}
.srv2k3-help .help-tl-name {
    font-weight: 700;
    color: #000000;
}
.srv2k3-help .help-tl-note {
    color: #404040;
}
.srv2k3-help .help-tl-row.help-tl-highlight {
    background: #fff5d6;
    border-left: 3px solid #f7a021;
    padding-left: 5px;
}
.srv2k3-help .help-tl-row.help-tl-highlight .help-tl-name {
    color: #b06a08;
}

@media (max-width: 720px) {
    body.srv2003-desktop .srv2k3-help .help-timeline {
        font-size: 11px;
    }
    body.srv2003-desktop .srv2k3-help .help-tl-row {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 6px 8px;
    }
    body.srv2003-desktop .srv2k3-help .help-tl-year {
        font-size: 10px;
        color: #707070;
    }
}

/* ============================================================
   RECONNECT BADGE
   Bottom-right floating panel shown only when a Server 2003
   snapshot exists from this session\'s history. Uses a
   semi-transparent dark background to feel like a system
   notification rather than a standard modal.
   ============================================================ */
.reconnect-badge {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 280px;
    background: linear-gradient(180deg, #2a3340 0%, #1a2028 100%);
    color: #ffffff;
    border: 1px solid #4a8fbf;
    border-radius: 6px;
    padding: 12px 14px 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    z-index: 9000;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 12px;
    line-height: 1.45;
    animation: reconnect-badge-in 240ms ease-out;
}
@keyframes reconnect-badge-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reconnect-badge-close {
    position: absolute;
    right: 6px;
    top: 4px;
    background: transparent;
    border: 0;
    color: #c0c8d0;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
}
.reconnect-badge-close:hover { color: #ffffff; }
.reconnect-badge-title {
    font-weight: 700;
    color: #ffd34d;
    margin-bottom: 6px;
    font-size: 12.5px;
}
.reconnect-badge-body {
    color: #d8dde2;
    margin-bottom: 10px;
}
.reconnect-badge-action {
    width: 100%;
    background: linear-gradient(180deg, #4a8fbf 0%, #2c6090 100%);
    color: #ffffff;
    border: 1px solid #1a4060;
    padding: 6px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
}
.reconnect-badge-action:hover {
    background: linear-gradient(180deg, #5aa0d0 0%, #3870a0 100%);
}
.reconnect-badge-action:active {
    background: linear-gradient(180deg, #2c6090 0%, #4a8fbf 100%);
}

@media (max-width: 720px) {
    .reconnect-badge {
        right: 8px;
        bottom: 8px;
        left: 8px;
        width: auto;
    }
}

/* ============================================================
   QNX COLD BOOT
   First-visit boot animation. Black background, monospace
   text, runs <2s, ESC/click skips.
   ============================================================ */
.qnx-coldboot {
    position: fixed;
    inset: 0;
    background: #000000;
    color: #c0c0c0;
    z-index: 99000;
    display: grid;
    place-items: center;
    font-family: "Lucida Console", "Consolas", "Courier New", monospace;
}
.qnx-coldboot-screen {
    width: min(720px, 92vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.qnx-coldboot-banner {
    background: #000080;
    color: #ffffff;
    padding: 6px 10px;
    font-size: 13px;
    text-align: center;
    border: 1px solid #4080ff;
}
.qnx-coldboot-body {
    background: #000000;
    border: 1px solid #4080ff;
    border-top: 0;
    padding: 10px 12px;
    height: 220px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.55;
}
.qnx-coldboot-line {
    color: #c0c0c0;
    animation: coldboot-line-in 100ms ease-out;
}
.qnx-coldboot-line:nth-last-child(-n+2) {
    color: #80ff80;
}
@keyframes coldboot-line-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.qnx-coldboot-status {
    background: #000080;
    color: #ffffff;
    padding: 4px 10px;
    font-size: 12px;
    text-align: left;
    border: 1px solid #4080ff;
    border-top: 0;
}
.qnx-coldboot-hint {
    margin-top: 10px;
    text-align: center;
    color: #707070;
    font-size: 11px;
}

/* ============================================================
   MODERN START MENU (Windows Server 2003 / XP default style)
   Two-column layout. Left column for pinned applications, right
   column for system places + tools, footer strip with All
   Programs / Log Off / Shut Down. Header strip carries the user
   avatar and italic username on a Luna-blue gradient. Selectable
   from right-click on Start, Properties, "Stil meniu Start".
   ============================================================ */
.srv2k3-start-menu--modern {
    width: 396px;
    flex-direction: column;
    padding: 0;
    /* Classic 3D-bevel chrome, matching every other Server 2003
       window in this app. The Luna gradient was a Windows XP
       Royale theme thing, not the actual Server 2003 default. */
    background: #d4d0c8;
    border: 0;
    border-radius: 0;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px -1px 0 #404040,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080,
        2px 2px 5px rgba(0, 0, 0, 0.35);
}
/* The classic .srv2k3-menu-sidebar is added by buildClassicStartMenu;
   the modern layout doesn\'t use it, so hide just in case. */
.srv2k3-start-menu--modern .srv2k3-menu-sidebar {
    display: none;
}

/* Header bar with user avatar + italic username. Solid dark blue
   like every other active Win32 title bar, no Luna gradient. The
   subtle 60% gradient highlight is inset_box_shadow only, used
   to give the bar depth without the Luna cyan-blue. */
.srv2k3-mm-header {
    background: #0a246a;
    color: #ffffff;
    padding: 4px 6px 4px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 0;
    border-bottom: 1px solid #808080;
    box-shadow: inset 0 -1px 0 #ffffff;
}
.srv2k3-mm-avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    background: #d4d0c8;
    border: 0;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px -1px 0 #404040,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080;
    border-radius: 0;
    display: grid;
    place-items: center;
}
.srv2k3-mm-avatar svg { display: block; }
.srv2k3-mm-username {
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-size: 13px;
    font-weight: 700;
    font-style: italic;
    color: #ffffff;
    letter-spacing: 0.01em;
    text-shadow: none;
}

/* Two-column body. Both columns share the system-gray background
   from the classic palette. A hairline 3D-bevel separates them
   instead of the previous Luna light-blue gradient. */
.srv2k3-mm-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #d4d0c8;
}
.srv2k3-mm-col {
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.srv2k3-mm-col-left {
    background: #d4d0c8;
    /* Sunken 3D edge between left and right columns. */
    border-right: 1px solid #808080;
    box-shadow: inset -1px 0 0 #ffffff;
}
.srv2k3-mm-col-right {
    background: #d4d0c8;
}

/* Items: large icon left, label right. Hover is a solid Win32
   active-selection blue with white text, no gradient. */
.srv2k3-mm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 6px;
    border: 0;
    background: transparent;
    text-align: left;
    color: #000000;
    font: 11.5px "Tahoma", "MS Sans Serif", sans-serif;
    cursor: pointer;
    border-radius: 0;
    width: 100%;
    min-height: 30px;
}
.srv2k3-mm-item:hover {
    background: #0a246a;
    color: #ffffff;
}
.srv2k3-mm-item:active {
    background: #0a246a;
    color: #ffffff;
}
.srv2k3-mm-ic {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
}
.srv2k3-mm-ic svg { width: 22px; height: 22px; }
.srv2k3-mm-label {
    flex: 1;
    line-height: 1.2;
}
.srv2k3-mm-item-bold .srv2k3-mm-label {
    font-weight: 700;
}
.srv2k3-mm-arrow {
    flex: 0 0 auto;
    font-size: 9px;
    color: #404040;
    margin-left: 4px;
}
.srv2k3-mm-item:hover .srv2k3-mm-arrow {
    color: #ffffff;
}
/* Hairline separator between item groups, matching the screenshot.
   Uses the classic chiseled 3D edge instead of a soft Luna line. */
.srv2k3-mm-sep {
    border-bottom: 1px solid #808080;
    box-shadow: 0 1px 0 #ffffff;
    margin: 4px 8px 5px;
}

/* Footer strip: All Programs left, Log Off + Shut Down right.
   Same gray as the body, a chiseled 3D top edge visually divides
   it from the items above. No Luna gradient. */
.srv2k3-mm-footer {
    background: #d4d0c8;
    border-top: 1px solid #808080;
    box-shadow: inset 0 1px 0 #ffffff;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.srv2k3-mm-allprog {
    border: 0;
    background: transparent;
    color: #000000;
    font: 11.5px "Tahoma", "MS Sans Serif", sans-serif;
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 0;
}
.srv2k3-mm-allprog:hover {
    background: #0a246a;
    color: #ffffff;
}
.srv2k3-mm-power {
    display: flex;
    gap: 4px;
}
.srv2k3-mm-pwr-btn {
    border: 0;
    background: transparent;
    color: #000000;
    font: 11.5px "Tahoma", "MS Sans Serif", sans-serif;
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 0;
}
.srv2k3-mm-pwr-btn:hover {
    background: #0a246a;
    color: #ffffff;
}
.srv2k3-mm-pwr-ic {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
}
.srv2k3-mm-pwr-ic svg { width: 18px; height: 18px; }

/* Mobile reflow: stack columns vertically, narrow the menu so it
   fits in a 380 px viewport with a small left/right margin. */
@media (max-width: 720px) {
    body.srv2003-desktop .srv2k3-start-menu--modern {
        width: calc(100vw - 16px);
        max-width: 360px;
    }
    body.srv2003-desktop .srv2k3-start-menu--modern .srv2k3-mm-body {
        grid-template-columns: 1fr;
    }
    body.srv2003-desktop .srv2k3-start-menu--modern .srv2k3-mm-col-left {
        border-right: 0;
        border-bottom: 1px solid #6a8ad0;
    }
}

/* ============================================================
   TASKBAR & START MENU PROPERTIES DIALOG
   Reached via right-click on Start, Properties. Lets the user
   pick between the two Start menu styles. Future: add tabs for
   actual taskbar properties (auto-hide, lock, group similar
   buttons). For now it\'s a single section, single tab.
   ============================================================ */
.srv2k3-taskbar-props .tb-props-section {
    border: 1px solid #c0c0c0;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #d4d0c8;
    padding: 10px 12px;
    background: #ffffff;
}
.srv2k3-taskbar-props .tb-props-section-title {
    font-weight: 700;
    color: #0a246a;
    font-size: 12px;
    margin-bottom: 4px;
}
.srv2k3-taskbar-props .tb-props-radio {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
}
.srv2k3-taskbar-props .tb-props-radio:hover {
    background: #f0f4fa;
}
.srv2k3-taskbar-props .tb-props-radio input {
    margin-top: 2px;
}
.srv2k3-taskbar-props .tb-props-radio small {
    color: #404040;
    font-size: 11px;
}


/* ============================================================
   CLASSIC MENUS / SERVER ADMIN DIALOGS
   ============================================================ */
body.srv2003-desktop .popover {
    background: #d4d0c8;
    border: 1px solid #404040;
    border-radius: 0;
    box-shadow:
        inset -1px -1px 0 #808080,
        inset 1px 1px 0 #ffffff,
        1px 1px 0 rgba(0,0,0,0.18);
    padding: 2px;
}
body.srv2003-desktop .popover,
body.srv2003-desktop .popover.open {
    transform: none;
    transition: opacity 90ms linear;
}
body.srv2003-desktop .popover-item {
    min-height: 22px;
    padding: 3px 24px 3px 24px;
    border-radius: 0;
    font-size: 11px;
}
body.srv2003-desktop .popover-item:hover,
body.srv2003-desktop .popover-item:focus-visible {
    background: #0a246a;
    color: #ffffff;
}
body.srv2003-desktop .popover-sep {
    margin: 2px 0;
    background: #808080;
}

body.srv2003-desktop .dialog {
    border-radius: 0;
}

body.srv2003-desktop .dialog-footer {
    background: #d4d0c8;
}

.ra-pane > p:first-child,
.ra-form > p:first-child {
    margin-top: 0;
}

/* ============================================================
   COREBOOT FLASH OVERLAY
   Full-screen modal that owns the screen for the duration of
   the eight flash stages. Two panes side-by-side: the live
   schematic on the left and the rolling stage log on the
   right with a stage-title strip and an action area for the
   button(s) the user has to confirm. Style is intentionally
   not Server 2003 / Phoenix BIOS, this is a different
   utility ("GDX-APPLIANCE Remote Firmware Flasher").
   ============================================================ */
/* ============================================================
   COREBOOT REMOTE FIRMWARE FLASHER
   Low-level firmware utility look: pure black background,
   monospace, no decorative chrome, single-pixel borders.
   Schematic pane uses the same dark palette so the whole
   surface reads as one terminal-like environment instead of
   a layered XP application. Active blocks light up in cyan;
   ok/warn/err log lines stay in the standard ANSI palette
   (green/yellow/red). The titlebar is a thin status strip
   not a chunky branded bar.
   ============================================================ */
.coreboot-flash {
    position: fixed;
    inset: 0;
    background: #000000;
    color: #c0c0c0;
    z-index: 99500;
    display: flex;
    flex-direction: column;
    font-family: "Lucida Console", "Consolas", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
}
.coreboot-flash .cb-shell {
    width: 100%;
    height: 100%;
    background: #000000;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.coreboot-flash .cb-titlebar {
    background: #1a1a1a;
    color: #e0e0e0;
    padding: 8px 16px;
    border-bottom: 2px solid #404040;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: "Lucida Console", "Consolas", monospace;
}
.coreboot-flash .cb-body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    flex: 1;
    min-height: 0;
}
.coreboot-flash .cb-pane {
    padding: 14px 16px;
    overflow: auto;
    min-width: 0;
}
.coreboot-flash .cb-arch-pane {
    background: #000000;
    color: #c0c0c0;
    border-right: 1px solid #404040;
}
.coreboot-flash .cb-arch-title {
    font-weight: 400;
    font-size: 12px;
    color: #80df80;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.coreboot-flash .cb-arch-svg { width: 100%; }
.coreboot-flash .cb-arch-svg svg { width: 100%; height: auto; }
/* Schematic SVG uses a dark base color. Override the cream PCB
   fill rendered by srv2003-coreboot.js via attribute selector
   so we don't have to touch the JS. */
.coreboot-flash .cb-arch-svg svg rect[fill="#f6f1e1"] {
    fill: #0a0a0a;
}
.coreboot-flash .cb-arch-svg svg rect[stroke="#000"],
.coreboot-flash .cb-arch-svg svg line[stroke="#000"],
.coreboot-flash .cb-arch-svg svg path[stroke="#000"] {
    stroke: #80df80;
}
.coreboot-flash .cb-arch-svg svg text { fill: #c0c0c0; }
.coreboot-flash .cb-arch-legend {
    margin-top: 10px;
    font-size: 11px;
    color: #707070;
    border-top: 1px dashed #404040;
    padding-top: 8px;
}
.coreboot-flash .cb-log-pane {
    background: #000000;
    color: #c0c0c0;
    display: flex;
    flex-direction: column;
}
.coreboot-flash .cb-stage-title {
    color: #80df80;
    font-weight: 400;
    font-size: 12px;
    padding: 4px 0 8px;
    border-bottom: 1px solid #404040;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.coreboot-flash .cb-log {
    flex: 1;
    overflow: auto;
    font-size: 12px;
    line-height: 1.55;
}
.coreboot-flash .cb-log-line {
    color: #b0b0b0;
    white-space: pre-wrap;
}
.coreboot-flash .cb-log-line.cb-ok   { color: #80df80; }
.coreboot-flash .cb-log-line.cb-warn { color: #ffd34d; }
.coreboot-flash .cb-log-line.cb-err  { color: #f08070; }
.coreboot-flash .cb-action {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #404040;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
/* Buttons read as terminal prompts: monospace, single border,
   no rounded corners, no fill. Default action highlights with
   green stroke + green text, matching the ANSI ok color. */
.coreboot-flash .cb-btn {
    background: transparent;
    color: #c0c0c0;
    border: 1px solid #707070;
    padding: 5px 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    border-radius: 0;
    text-transform: none;
}
.coreboot-flash .cb-btn:hover {
    background: #1a1a1a;
    border-color: #c0c0c0;
}
.coreboot-flash .cb-btn-default {
    border-color: #80df80;
    color: #80df80;
    background: transparent;
    font-weight: 400;
}
.coreboot-flash .cb-btn-default:hover {
    background: #0a1a0a;
    color: #a0ff80;
}

/* Active schematic blocks light up cyan instead of brown. */
.coreboot-flash .arch-block.arch-active rect,
.coreboot-flash .arch-block.arch-active line,
.coreboot-flash .cb-arch-svg .arch-block.arch-active rect,
.coreboot-flash .cb-arch-svg .arch-block.arch-active line {
    stroke: #80dfff;
    stroke-width: 2;
}
.coreboot-flash .arch-block.arch-active text,
.coreboot-flash .cb-arch-svg .arch-block.arch-active text {
    fill: #80dfff;
    font-weight: 700;
}
.coreboot-flash .arch-bus.arch-active line,
.coreboot-flash .cb-arch-svg .arch-bus.arch-active line {
    stroke: #80dfff;
    stroke-width: 2;
}
.coreboot-flash .arch-bus.arch-active text,
.coreboot-flash .cb-arch-svg .arch-bus.arch-active text {
    fill: #80dfff;
    font-weight: 700;
}
.coreboot-flash .arch-block.arch-active,
.coreboot-flash .arch-bus.arch-active {
    animation: arch-pulse 1.4s ease-in-out infinite;
}
@keyframes arch-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* SeaBIOS POST screen at end of flash. Pure VGA-text-mode
   look: white-on-black, monospace, no UI chrome at all. */
.coreboot-flash .cb-postscreen {
    position: fixed;
    inset: 0;
    background: #000000;
    color: #c8c8c8;
    padding: 24px 32px;
    font-family: "Lucida Console", "Consolas", monospace;
    font-size: 14px;
    line-height: 1.45;
    overflow: auto;
}
.coreboot-flash .cb-postscreen-text {
    margin: 0;
    white-space: pre-wrap;
    color: #c8c8c8;
}

/* ============================================================
   POST-FLASH SPLASH
   Brief placeholder shown only when the takeover handler is
   not yet registered (rarely; the waterboard module registers
   one at script-load). Same low-level look as the flash
   overlay so there is no jarring style break.
   ============================================================ */
.coreboot-splash {
    position: fixed;
    inset: 0;
    background: #000000;
    color: #c0c0c0;
    z-index: 99000;
    display: grid;
    place-items: center;
    font-family: "Lucida Console", "Consolas", monospace;
    overflow: auto;
}
.coreboot-splash .cb-splash-inner {
    max-width: 880px;
    padding: 32px;
}
.coreboot-splash .cb-splash-banner {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #80df80;
    margin-bottom: 4px;
    text-transform: lowercase;
}
.coreboot-splash .cb-splash-sub {
    font-size: 12px;
    color: #707070;
    margin-bottom: 28px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.coreboot-splash .cb-splash-arch {
    background: #000000;
    border: 1px solid #404040;
    padding: 12px;
    margin-bottom: 24px;
}
.coreboot-splash .cb-splash-arch svg {
    width: 100%;
    height: auto;
}
.coreboot-splash .cb-splash-arch svg rect[fill="#f6f1e1"] { fill: #0a0a0a; }
.coreboot-splash .cb-splash-arch svg rect[stroke="#000"],
.coreboot-splash .cb-splash-arch svg line[stroke="#000"],
.coreboot-splash .cb-splash-arch svg path[stroke="#000"] {
    stroke: #80df80;
}
.coreboot-splash .cb-splash-arch svg text { fill: #c0c0c0; }
.coreboot-splash .cb-splash-msg {
    font-size: 13px;
    line-height: 1.55;
    color: #c0c0c0;
    border: 1px solid #404040;
    padding: 14px 18px;
}

/* ============================================================
   BIOS Supervisor Password prompt (anchored over BIOS Setup)
   ============================================================ */
.bios-prompt-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 64, 0.55);
    display: grid;
    place-items: center;
    z-index: 10;
}
.bios-prompt {
    background: #d4d0c8;
    color: #000000;
    border: 0;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px -1px 0 #404040,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080;
    width: 320px;
    font-family: "Tahoma", sans-serif;
    font-size: 12px;
}
.bios-prompt-title {
    background: #0a246a;
    color: #ffffff;
    padding: 4px 8px;
    font-weight: 700;
}
.bios-prompt-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bios-prompt-input {
    width: 100%;
    padding: 3px 5px;
    border: 0;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
    background: #ffffff;
    font-family: "Lucida Console", "Consolas", monospace;
    font-size: 12px;
    box-sizing: border-box;
}
.bios-prompt-footer {
    padding: 8px 12px 10px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.bios-prompt-btn {
    min-width: 72px;
    padding: 4px 12px;
    background: #d4d0c8;
    color: #000000;
    border: 0;
    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px -1px 0 #404040,
        inset 2px 2px 0 #dfdfdf,
        inset -2px -2px 0 #808080;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
}
.bios-prompt-btn:active {
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #dfdfdf;
}
/* Warn-flavour BIOS prompt for destructive operations like
   firmware flash. Same Phoenix chrome but the title bar
   reads red so the user can't miss the severity. */
.bios-prompt-warn {
    min-width: 380px;
    max-width: 480px;
}
.bios-prompt-title-warn {
    background: #800000;
    color: #ffffff;
    padding: 4px 8px;
    font-weight: 700;
}
.bios-prompt-body-warn {
    padding: 10px 14px;
    color: #000080;
    line-height: 1.5;
    font-size: 12px;
}
.bios-prompt-body-warn p { margin: 0 0 8px 0; }
.bios-prompt-body-warn p:last-child { margin-bottom: 0; }
.bios-prompt-body-warn strong { color: #800000; }
.bios-prompt-btn-danger {
    color: #800000;
    font-weight: 700;
}

/* Mobile reflow for the flash overlay, the primary UX surface. */
@media (max-width: 720px) {
    .coreboot-flash .cb-shell {
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-width: 0;
    }
    .coreboot-flash .cb-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(180px, 40vh) minmax(0, 1fr);
        height: auto;
        flex: 1;
    }
    .coreboot-flash .cb-arch-pane {
        border-right: 0;
        border-bottom: 1px solid #c0a060;
    }
    .coreboot-splash .cb-splash-banner {
        font-size: 40px;
    }
}

/* ============================================================
   STOP-screen (BSOD) overlay used when an unbootable BIOS
   change is saved, currently APIC Mode = Disabled. Authentic
   Win32 BSOD palette: blue background, monospace, white text,
   no chrome. Click anywhere to return to BIOS Setup. The
   markup is .srv2k3-bsod > .srv2k3-bsod-inner > .srv2k3-bsod-line*.
   Used both by the BIOS effect dispatcher and by the safe-off
   Power On handler.
   ============================================================ */
.srv2k3-bsod {
    position: fixed;
    inset: 0;
    background: #0028a8;
    color: #ffffff;
    z-index: 100000;
    font-family: "Lucida Console", "Consolas", monospace;
    font-size: 13px;
    padding: 24px 28px;
    overflow: auto;
    cursor: pointer;
}
.srv2k3-bsod-inner {
    max-width: 880px;
    margin: 0 auto;
    line-height: 1.45;
}
.srv2k3-bsod-line {
    color: #ffffff;
    white-space: pre-wrap;
}

/* ============================================================
   WATERBOARD CONSOLE SATIRE
   Owned by js/srv2003/srv2003-waterboard.js. Layers covered:
     - Picker (BIOS-style payload chooser, .wbp)
     - Install animation (.wbi-bar, .wbi-log)
     - W3 shell (PS2-era minimal columns, .wb3-shell)
     - W4 shell (PS4-style blue gradient + tile row, .wb4-shell)
     - W5 shell (PS5-style grey tabs, .wb5-shell)
     - W5 account-creation gate (.wb5-account-screen)
     - System menu (.wb-menu)
     - About dialog (.wb-about)
     - Friction dialogs (.wb-friction) - subtle, no gold-glow
     - Game frame + canvas + stubs (.wb-game-frame)
     - Power off screen (.wb-poff)
   ============================================================ */

/* Root: a full-viewport surface that owns the screen after a
   successful coreboot flash. Every other Server 2003 / QNX
   chrome is torn down by teardownAll() before mounting this. */
.wb-root {
    position: fixed;
    inset: 0;
    background: #000;
    color: #e8e8e8;
    font-family: "Tahoma", "Segoe UI", sans-serif;
    z-index: 99000;
    overflow: hidden;
}

/* ------------------------------------------------------------
   PICKER (.wbp) and INSTALL (.wbi-bar/.wbi-log)
   Both render inside .wbp because we are still in BIOS-payload
   territory: dark, monospace, plain borders. Deliberately not
   glossy. The user hasn't picked an OS yet.
   ------------------------------------------------------------ */
.wbp {
    position: absolute;
    inset: 0;
    background: #0a0a0a;
    color: #d8d8d8;
    font-family: "Lucida Console", "Consolas", monospace;
    display: flex;
    flex-direction: column;
}
.wbp-titlebar {
    background: #1a1a1a;
    color: #b0b0b0;
    font-size: 11px;
    padding: 4px 10px;
    border-bottom: 1px solid #2a2a2a;
    letter-spacing: 0.5px;
}
.wbp-inner {
    flex: 1;
    overflow: auto;
    padding: 24px 32px;
    max-width: 880px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.wbp-banner {
    color: #b0c8b0;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 18px 0;
    white-space: pre-wrap;
}
.wbp-rows {
    display: flex;
    flex-direction: column;
    border: 1px solid #2a2a2a;
    background: #050505;
}
.wbp-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border-bottom: 1px solid #1a1a1a;
    cursor: pointer;
    transition: background 60ms linear;
}
.wbp-row:last-child { border-bottom: none; }
.wbp-row:hover {
    background: #1a2a3a;
    color: #ffffff;
}
.wbp-row-locked {
    cursor: not-allowed;
    color: #555;
    background: #0a0a0a;
    opacity: 0.75;
}
.wbp-row-locked:hover {
    background: #0a0a0a;
    color: #555;
}
.wbp-row-key {
    font-weight: bold;
    width: 64px;
    flex-shrink: 0;
    color: #80a8d0;
}
.wbp-row-locked .wbp-row-key { color: #555; }
.wbp-row-meta { flex: 1; min-width: 0; }
.wbp-row-name { font-size: 14px; font-weight: bold; }
.wbp-row-kind {
    color: #888;
    font-weight: normal;
    font-size: 12px;
}
.wbp-row-tag {
    color: #909090;
    font-size: 12px;
    margin-top: 2px;
}
.wbp-row-locked .wbp-row-tag { color: #444; }
.wbp-row-size {
    color: #808080;
    font-size: 12px;
    flex-shrink: 0;
    text-align: right;
}
.wbp-row-locked-note {
    color: #b06060;
    font-size: 10px;
    margin-top: 2px;
    letter-spacing: 0.5px;
}
.wbp-note {
    margin-top: 14px;
    padding: 10px 12px;
    background: #1a0e0e;
    border: 1px solid #4a2020;
    color: #d8b0b0;
    font-size: 12px;
    line-height: 1.5;
}
.wbp-footer {
    margin-top: 18px;
    color: #808080;
    font-size: 11px;
    line-height: 1.5;
}
/* Bottom keystroke hint inside the picker: lists the
   keyboard/UI shortcut to reach the Setup utility. Single
   button styled to match the BIOS-utility tone. */
.wbp-keys {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #2a2a2a;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* Boot-timeout countdown line. Stays empty when there is no
   default OS or the timeout is zero. Yellow tint so it reads
   as an alert without being garish. */
.wbp-countdown {
    margin-top: 10px;
    color: #ffd34d;
    font-family: "Lucida Console", "Consolas", monospace;
    font-size: 12px;
    min-height: 1.4em;
    line-height: 1.4em;
}
.wbp-countdown:empty { display: none; }
.wbp-key-btn {
    background: transparent;
    border: 1px solid #3a3a3a;
    color: #d8d8d8;
    font-family: inherit;
    font-size: 12px;
    padding: 6px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.wbp-key-btn:hover { background: #1a1a1a; }
.wbp-key-btn kbd {
    font-family: "Lucida Console", "Consolas", monospace;
    background: #1a1a1a;
    border: 1px solid #4a4a4a;
    color: #ffd34d;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 11px;
}
/* Coreboot Setup utility: simplified single-screen table.
   Borrows the BIOS-style chrome (.wbp) for the surface and
   adds a 2-column table where only the first three rows are
   editable; the rest are read-only "compiled in" values. */
/* ------------------------------------------------------------
   COREBOOT KCONFIG SETUP UTILITY (.cbs-*)
   Mirrors the real Linux ncurses Kconfig screen coreboot uses
   pre-compile (.config menu). Two themes:
     - .cbs-theme-classic: ncurses look. Blue background, white
       window border, yellow highlight on selection, action
       buttons at the bottom in <Select> <Exit> <Help> form.
     - .cbs-theme-modern:  same DOM but neutral dark styling
       matching the rest of the post-flash chrome.
   ------------------------------------------------------------ */
.cbs-host {
    /* Fill the viewport regardless of theme. Both themes
       reuse the same DOM structure; only the colour palette
       and the border treatment change. */
    background: #000000;
}
.cbs {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: auto;
}
.cbs-title {
    position: absolute;
    top: 0; left: 0; right: 0;
    text-align: center;
    padding: 3px 12px;
    font-family: "Lucida Console", "Consolas", "Courier New", monospace;
    font-size: 13px;
    font-weight: 700;
}
.cbs-window {
    width: 100%;
    max-width: 720px;
    font-family: "Lucida Console", "Consolas", "Courier New", monospace;
    font-size: 14px;
    padding: 14px 18px;
    box-sizing: border-box;
}
.cbs-window-title {
    text-align: center;
    font-weight: 700;
    margin-bottom: 8px;
    padding: 2px 0;
}
.cbs-window-help {
    font-size: 12px;
    line-height: 1.5;
    padding: 4px 6px 10px 6px;
    border-bottom: 1px solid transparent;
    margin-bottom: 10px;
}
.cbs-items {
    padding: 4px 6px;
    min-height: 200px;
}
.cbs-item {
    display: flex;
    align-items: baseline;
    padding: 2px 6px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.5;
}
.cbs-item .cbs-marker {
    flex-shrink: 0;
    width: 3em;
    font-weight: 700;
}
.cbs-item .cbs-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cbs-item .cbs-value {
    margin-left: 12px;
    opacity: 0.8;
    font-style: italic;
}
.cbs-item-locked { cursor: default; opacity: 0.65; }
.cbs-sep {
    text-align: center;
    padding: 4px 0;
    opacity: 0.5;
}
.cbs-actions {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 12px 0 4px 0;
}
.cbs-action {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 8px;
}
.cbs-action-default { font-weight: 700; }
.cbs-modal-bd {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.cbs-modal {
    background: #f0f0f0;
    color: #000000;
    max-width: 560px;
    width: 100%;
    border: 2px solid #404040;
    font-family: "Tahoma", "Segoe UI", sans-serif;
    font-size: 13px;
}
.cbs-modal-title {
    background: #000080;
    color: #ffffff;
    padding: 6px 12px;
    font-weight: 700;
    font-size: 13px;
}
.cbs-modal-body {
    padding: 12px 16px;
    line-height: 1.55;
}
.cbs-modal-body p { margin: 0 0 10px 0; }
.cbs-alt-section-title {
    font-weight: 700;
    margin-top: 12px;
    margin-bottom: 6px;
    color: #000080;
    border-bottom: 1px solid #c0c0c0;
    padding-bottom: 2px;
}
.cbs-alt-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cbs-alt-empty {
    font-style: italic;
    color: #707070;
    padding: 4px 0;
}
.cbs-alt-btn {
    text-align: left;
    padding: 6px 10px;
    background: #ffffff;
    /* Lock text color to dark: the button has a white
       background regardless of the active theme, so without
       an explicit color the classic theme's white body text
       gets inherited here and the label becomes invisible on
       its own background. */
    color: #1a1a1a;
    border: 1px solid #b0b0b0;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
}
.cbs-alt-btn:hover { background: #e0e8f0; }
.cbs-alt-btn:focus {
    outline: 2px solid #2a4a7a;
    outline-offset: 1px;
}
.cbs-alt-btn-factory {
    border-color: #800000;
    background: #fff0e0;
    color: #6a1a1a;
    font-weight: 700;
}
.cbs-alt-btn-factory:hover { background: #ffe0c0; }
.cbs-modal-actions {
    padding: 10px 16px;
    border-top: 1px solid #c0c0c0;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.cbs-modal-actions .cbs-action {
    color: #000000;
    border: 1px solid #707070;
    background: #d8d8d8;
    padding: 5px 14px;
    font-weight: 500;
    border-radius: 2px;
}
.cbs-modal-actions .cbs-action:hover {
    background: #c0c0c0;
}
.cbs-modal-actions .cbs-action-default {
    background: #2a4a7a;
    color: #ffffff;
    border-color: #1a3a6a;
    font-weight: 600;
}
.cbs-modal-actions .cbs-action-default:hover {
    background: #3a5a8a;
}
.cbs-modal-actions .cbs-action-default:focus {
    outline: 2px solid #80a8d0;
    outline-offset: 1px;
}
.cbs-modal-actions .cbs-action-danger {
    background: #8a2a2a;
    color: #ffffff;
    border-color: #6a1a1a;
}
.cbs-modal-actions .cbs-action-danger:hover {
    background: #aa3a3a;
}
.cbs-prompt-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    font-family: "Lucida Console", "Consolas", monospace;
    font-size: 13px;
    background: #ffffff;
    color: #000000;
    border: 1px solid #707070;
    border-radius: 2px;
    margin-top: 4px;
}
.cbs-prompt-input:focus {
    outline: 2px solid #80a8d0;
    outline-offset: -1px;
    border-color: #4a80c0;
}

/* CLASSIC theme: ncurses palette */
.cbs-theme-classic .cbs { background: #0000aa; color: #ffffff; }
.cbs-theme-classic .cbs-title {
    background: #00aaaa;
    color: #000080;
}
.cbs-theme-classic .cbs-window {
    background: #0000aa;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 0;
    box-shadow: 2px 2px 0 0 #000000;
}
.cbs-theme-classic .cbs-window-title { color: #ffffff; }
.cbs-theme-classic .cbs-window-help {
    color: #cccccc;
    border-bottom-color: #4444aa;
}
.cbs-theme-classic .cbs-item { color: #ffffff; }
/* Selection uses proper reverse video like real ncurses
   Kconfig: take the window's normal fg/bg and swap them.
   Window is white-on-blue, so selected is blue-on-white.
   Drops the high-saturation yellow that was visually noisy
   and didn't match the screenshot. */
.cbs-theme-classic .cbs-item-selected {
    background: #ffffff;
    color: #0000aa;
}
.cbs-theme-classic .cbs-item-selected .cbs-marker,
.cbs-theme-classic .cbs-item-selected .cbs-label { color: #0000aa; }
.cbs-theme-classic .cbs-item-selected .cbs-value { color: #4a4a8a; }
.cbs-theme-classic .cbs-item-locked { color: #c0c0c0; }
.cbs-theme-classic .cbs-sep { color: #8888cc; }
.cbs-theme-classic .cbs-action {
    color: #ffffff;
    background: transparent;
}
.cbs-theme-classic .cbs-action-default {
    background: #ffffff;
    color: #0000aa;
    padding: 2px 10px;
    font-weight: 700;
}
.cbs-theme-classic .cbs-action:hover:not(.cbs-action-default) {
    background: #4444cc;
}
.cbs-theme-classic .cbs-action:focus {
    outline: 1px dotted #ffffff;
    outline-offset: 2px;
}
/* Classic-theme modal: inherit the blue/white scheme so the
   prompt doesn't pop out as a different OS dialog. The modal
   lives at body level so we match by sibling of the host. */
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-modal {
    background: #0000aa;
    color: #ffffff;
    border: 2px solid #ffffff;
    font-family: "Lucida Console", "Consolas", monospace;
}
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-modal-title {
    background: #00aaaa;
    color: #000080;
}
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-modal-actions {
    border-top-color: #4444aa;
}
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-modal-actions .cbs-action {
    background: transparent;
    color: #ffffff;
    border: 1px solid transparent;
}
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-modal-actions .cbs-action-default {
    background: #ffffff;
    color: #0000aa;
    border-color: #ffffff;
}
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-modal-actions .cbs-action:hover {
    background: #4444cc;
    color: #ffffff;
}
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-modal-actions .cbs-action-default:hover {
    background: #e0e0ff;
    color: #0000aa;
}
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-prompt-input {
    background: #ffffff;
    color: #0000aa;
    border-color: #ffffff;
}
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-modal-body code {
    color: #aaffff;
    background: rgba(0, 0, 0, 0.30);
}
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-modal-body strong {
    color: #ffff80;
}
/* Section dividers ("Configurații utilizator" / "Backup
   furnizor") in the Load Alt Config dialog. The base style
   paints them dark blue with a light underline, which is
   invisible against the classic theme's dark blue modal
   body. Override to bright cyan with a softer divider. */
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-alt-section-title {
    color: #aaffff;
    border-bottom-color: #4444aa;
}
/* Same problem for the "no slots saved" placeholder which
   uses 30-40% grey in the base style: invisible on classic
   blue. Bump to a desaturated light blue. */
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-alt-empty {
    color: #ccccdd;
}
/* User-slot buttons inherit white text from the classic
   modal body unless we re-state the dark color here. The
   base rule does set it to #1a1a1a; this is a safety net
   in case a future override broadens. */
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-alt-btn {
    color: #1a1a1a;
}
.cbs-host.cbs-theme-classic ~ .cbs-modal-bd .cbs-alt-btn-factory {
    color: #6a1a1a;
}
/* Modern-theme modal: dark card that matches the setup chrome. */
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-modal {
    background: #1a1a1a;
    color: #e0e0e0;
    border: 1px solid #3a3a3a;
}
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-modal-title {
    background: #2a2a2a;
    color: #80a8d0;
    border-bottom: 1px solid #3a3a3a;
}
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-modal-actions {
    border-top-color: #2a2a2a;
}
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-modal-actions .cbs-action {
    background: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #3a3a3a;
}
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-modal-actions .cbs-action-default {
    background: #2a4a7a;
    color: #ffffff;
    border-color: #4a6a9a;
}
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-modal-actions .cbs-action:hover {
    background: #3a3a3a;
}
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-modal-actions .cbs-action-default:hover {
    background: #3a5a8a;
}
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-prompt-input {
    background: #0a0a0a;
    color: #ffffff;
    border-color: #3a3a3a;
}
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-modal-body code {
    color: #80c8d0;
    background: rgba(255, 255, 255, 0.06);
}
/* Modern-theme equivalents for the load-alt dialog. The
   dark grey modal body makes the base dark-blue title and
   grey placeholder text disappear into the surface. */
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-modal-body strong {
    color: #ffd34d;
}
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-alt-section-title {
    color: #80a8d0;
    border-bottom-color: #3a3a3a;
}
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-alt-empty {
    color: #909090;
}
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-alt-btn {
    color: #1a1a1a;
}
.cbs-host.cbs-theme-modern ~ .cbs-modal-bd .cbs-alt-btn-factory {
    color: #6a1a1a;
}

/* MODERN theme: dark neutral, matches the post-flash chrome */
.cbs-theme-modern .cbs { background: #0a0a0a; color: #e0e0e0; }
.cbs-theme-modern .cbs-title {
    background: #1a1a1a;
    color: #80a8d0;
    border-bottom: 1px solid #2a2a2a;
}
.cbs-theme-modern .cbs-window {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #e0e0e0;
}
.cbs-theme-modern .cbs-window-title { color: #80a8d0; }
.cbs-theme-modern .cbs-window-help {
    color: #909090;
    border-bottom-color: #2a2a2a;
}
.cbs-theme-modern .cbs-item { color: #d0d0d0; }
.cbs-theme-modern .cbs-item-selected {
    background: #2a3a5a;
    color: #ffffff;
}
.cbs-theme-modern .cbs-item-locked { color: #707070; }
.cbs-theme-modern .cbs-sep { color: #4a4a4a; }
.cbs-theme-modern .cbs-action {
    color: #d0d0d0;
    background: transparent;
    border: 1px solid #3a3a3a;
}
.cbs-theme-modern .cbs-action-default {
    background: #2a4a7a;
    color: #ffffff;
    border-color: #4a6a9a;
}
.cbs-theme-modern .cbs-action:hover { background: #2a2a2a; }
.cbs-theme-modern .cbs-action-default:hover { background: #3a5a8a; }

@media (max-width: 640px) {
    /* Coreboot Setup utility on phones: the screen is narrow
       so the title and crumb wrap, items get tap-friendly
       padding, action buttons become full-width and stack,
       and the modal dialogs (Load Alt Config, alerts, prompts,
       confirms) take 95% width instead of the desktop 560px
       max. The line-comment hint header shrinks to one line
       per sentence to keep it readable. */
    .cbs { padding: 10px; align-items: flex-start; padding-top: 32px; }
    .cbs-title { font-size: 12px; padding: 4px 8px; }
    .cbs-window {
        padding: 10px 12px;
        font-size: 13px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .cbs-window-title {
        font-size: 13px;
        word-break: break-word;
    }
    .cbs-window-help {
        font-size: 11px;
        line-height: 1.5;
        padding: 4px 4px 8px 4px;
    }
    .cbs-items { padding: 4px 0; }
    .cbs-item {
        white-space: normal;
        padding: 8px 6px;
        line-height: 1.4;
        min-height: 36px;
    }
    .cbs-item .cbs-marker { width: 2.5em; flex-shrink: 0; }
    .cbs-item .cbs-label { white-space: normal; }
    .cbs-item .cbs-value {
        margin-left: 0;
        margin-top: 2px;
        display: block;
    }
    .cbs-actions {
        gap: 6px;
        flex-wrap: wrap;
        padding: 10px 0 2px 0;
    }
    .cbs-action {
        flex: 1 1 30%;
        min-width: 80px;
        min-height: 44px;
        padding: 12px 8px;
        font-size: 14px;
        text-align: center;
    }
    .cbs-modal {
        max-width: 100%;
        width: 100%;
        margin: 0;
    }
    .cbs-modal-title { font-size: 13px; padding: 8px 12px; }
    .cbs-modal-body {
        padding: 12px;
        font-size: 13px;
        max-height: 60vh;
        overflow-y: auto;
    }
    .cbs-modal-actions {
        flex-direction: column-reverse;
        gap: 6px;
        padding: 10px 12px;
    }
    .cbs-modal-actions .cbs-action {
        width: 100%;
        padding: 10px;
        font-size: 14px;
    }
    .cbs-alt-btn {
        padding: 10px 12px;
        font-size: 13px;
        min-height: 44px;
    }
    .cbs-prompt-input {
        font-size: 14px;
        padding: 10px;
    }
}
.wbp-btn {
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    color: #d8d8d8;
    font-family: inherit;
    font-size: 12px;
    padding: 6px 14px;
    cursor: pointer;
}
.wbp-btn:hover { background: #2a2a2a; }
.wbp-btn-default {
    background: #2a3a5a;
    border-color: #4a6a9a;
    color: #ffffff;
}
.wbp-btn-default:hover { background: #3a4a6a; }

/* Install animation log + progress bar inside .wbp */
.wbi-bar {
    height: 4px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    margin: 12px 0;
    position: relative;
    overflow: hidden;
}
.wbi-bar-fill {
    height: 100%;
    width: 0;
    background: #80a8d0;
    transition: width 80ms linear;
}
.wbi-log {
    background: #050505;
    border: 1px solid #2a2a2a;
    padding: 10px 12px;
    color: #b0c8b0;
    font-size: 12px;
    line-height: 1.5;
    height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    margin: 0;
}

/* Power off screen: full-height surface inside .wbp that
   centers a single card with a large title, a one-paragraph
   subtitle, and the action buttons. Centred both axes so the
   text reads as the focal point of the screen rather than as
   a tiny left-aligned blob in the top corner. */
.wbp-poff-shell {
    display: flex;
    flex-direction: column;
}
.wbp-poff-shell .wbp-inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wb-poff {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wb-poff-card {
    text-align: center;
    max-width: 560px;
    padding: 0 24px;
}
.wb-poff-title {
    font-family: "Tahoma", "Segoe UI", sans-serif;
    font-size: 32px;
    font-weight: 300;
    color: #e8e8e8;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}
.wb-poff-sub {
    font-family: "Tahoma", "Segoe UI", sans-serif;
    font-size: 15px;
    color: #a8a8a8;
    line-height: 1.6;
    margin-bottom: 28px;
    text-wrap: pretty;
}
.wb-poff-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .wb-poff-title { font-size: 26px; }
    .wb-poff-sub { font-size: 14px; }
    .wb-poff-actions .wbp-btn { flex: 1; min-width: 140px; }
}

/* ------------------------------------------------------------
   SHARED SHELL CONTAINER
   Every console OS root sits inside .wb-shell so layout rules
   that should apply to all three (full viewport, hidden
   overflow) only need to be written once.
   ------------------------------------------------------------ */
.wb-shell {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------
   W3 SHELL  (PS2-era minimal)
   Dark background, single horizontal stripe accent, two
   columns: system actions on the left, games on the right.
   Deliberately less polished than W4/W5; the point is that
   W3 doesn't need polish because it doesn't try to monetize
   you after the sale.
   ------------------------------------------------------------ */
.wb3-shell {
    background: #0a0e1a;
    color: #d8d8d8;
    font-family: "Tahoma", "Segoe UI", sans-serif;
}
.wb3-stripe {
    height: 4px;
    background: linear-gradient(90deg, #1a3070 0%, #4a80c0 50%, #1a3070 100%);
    flex-shrink: 0;
}
.wb3-topbar {
    height: 36px;
    background: #0a0e1a;
    border-bottom: 1px solid #1a2030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    flex-shrink: 0;
}
.wb3-brand {
    font-weight: bold;
    color: #80a8d0;
    letter-spacing: 1px;
    font-size: 13px;
}
.wb3-clock {
    color: #909090;
    font-family: "Lucida Console", monospace;
    font-size: 12px;
}
.wb3-columns {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.wb3-col-system {
    width: 240px;
    background: #050810;
    border-right: 1px solid #1a2030;
    padding: 12px 0;
    flex-shrink: 0;
    overflow-y: auto;
}
.wb3-col-games {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}
.wb3-system-title {
    color: #80a8d0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 18px 8px 18px;
}
.wb3-sys-item {
    padding: 8px 18px;
    cursor: pointer;
    font-size: 13px;
    color: #d8d8d8;
}
.wb3-sys-item:hover {
    background: #1a2a4a;
    color: #ffffff;
}
.wb3-game {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    cursor: pointer;
}
.wb3-game:hover {
    background: #1a2a4a;
}
.wb3-game-art {
    width: 72px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid #2a3040;
    overflow: hidden;
}
.wb3-game-art svg { display: block; width: 100%; height: 100%; }
.wb3-game-meta { flex: 1; min-width: 0; }
.wb3-game-title { font-size: 13px; color: #ffffff; }
.wb3-game-sub { font-size: 11px; color: #909090; margin-top: 2px; }

/* ------------------------------------------------------------
   W4 SHELL  (PS4-style)
   Full blue radial gradient with stylized wave overlay,
   top status bar with brand + WB Plus pill + clock, a single
   horizontal row of large square tiles with the active title
   displayed in the meta block below.
   ------------------------------------------------------------ */
.wb4-shell {
    /* Inherit position:absolute + inset:0 from .wb-shell so
       the gradient fills the entire viewport. An earlier
       `position: relative` override here collapsed the shell
       to its content height and let the wb-root's black
       background show through above and below. */
    background: radial-gradient(ellipse at 35% 30%, #2a5aaa 0%, #163070 45%, #0c1c4c 100%);
    color: #ffffff;
    font-family: "Segoe UI", "Tahoma", sans-serif;
}
/* Decorative flowing wave overlay drawn with pseudo-elements */
.wb4-bg-waves {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 600px 180px at 20% 70%, rgba(120, 180, 240, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 800px 240px at 80% 30%, rgba(180, 220, 255, 0.10) 0%, transparent 60%);
}
.wb4-bg-waves::before, .wb4-bg-waves::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
    background-size: 1600px 100%;
    background-repeat: no-repeat;
}
.wb4-bg-waves::after {
    background-position: 600px 0;
    opacity: 0.6;
}
.wb4-topbar {
    position: relative;
    z-index: 2;
    height: 56px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    flex-shrink: 0;
}
.wb4-top-left, .wb4-top-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wb4-brand {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 2px;
}
.wb4-clock {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
}
/* Subscription state pill in the W4 top bar. Inactive uses a
   red-tinted background with white text (high contrast, signals
   the disabled state without relying on a saturated yellow).
   Active uses a green-tinted background. Both have a darker
   ring so the pill remains visible against the brightest part
   of the radial blue gradient. */
.wb4-sub-pill {
    background: rgba(223, 64, 64, 0.30);
    border: 1px solid rgba(255, 128, 128, 0.50);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 80ms linear;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.wb4-sub-pill:hover {
    background: rgba(223, 64, 64, 0.50);
    border-color: rgba(255, 192, 192, 0.65);
}
.wb4-sub-pill:focus {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
}
.wb4-sub-pill-active {
    background: rgba(64, 160, 80, 0.30);
    border-color: rgba(128, 220, 144, 0.55);
    color: #ffffff;
    cursor: default;
}
.wb4-sub-pill-active:hover {
    background: rgba(64, 160, 80, 0.30);
}
.wb4-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 80px 56px 40px 56px;
    overflow: hidden;
}
.wb4-row {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Padding inside the scroll container gives the active
       tile's outer glow physical room to render without being
       clipped by the row's overflow-x:auto. Negative margins
       compensate so the row's outer layout dimensions stay
       unchanged. The 32px figure covers the worst-case glow
       extent of an active tile (3px ring + scale + 18px blur). */
    padding: 32px 32px 24px 32px;
    margin: -32px -32px 0 -32px;
}
.wb4-tile {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.10);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 80ms linear, box-shadow 80ms linear;
}
.wb4-tile-art {
    width: 100%;
    height: 100%;
}
.wb4-tile-art svg { display: block; width: 100%; height: 100%; }
.wb4-tile-active {
    transform: scale(1.06);
    box-shadow:
        0 0 0 3px #5ad8ff,
        0 0 18px 2px rgba(90, 216, 255, 0.45);
    z-index: 3;
}
.wb4-tile-system .wb4-art-system { width: 100%; height: 100%; }
.wb4-active-meta {
    margin-top: 26px;
    color: #ffffff;
}
.wb4-active-title {
    font-size: 38px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.15;
}
.wb4-active-sub {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 6px;
    max-width: 720px;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   W5 SHELL  (PS5-style)
   Light/grey background with subtle gradient, tab bar (Games
   | Media), smaller square tiles in a row, search/settings/
   profile/clock at top-right. Account-bound. Region-locked
   tiles get a globe icon overlay.
   ------------------------------------------------------------ */
.wb5-shell {
    background: linear-gradient(180deg, #cfd2d8 0%, #b8bcc4 60%, #9a9ea6 100%);
    color: #1a1a1a;
    font-family: "Segoe UI", "Tahoma", sans-serif;
}
.wb5-topbar {
    height: 56px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.wb5-tabs {
    display: flex;
    gap: 28px;
    align-items: center;
}
.wb5-tab {
    font-size: 22px;
    font-weight: 300;
    color: #1a1a1a;
    cursor: default;
    letter-spacing: 0.5px;
}
.wb5-tab-active {
    font-weight: 600;
}
.wb5-top-right {
    display: flex;
    align-items: center;
    gap: 18px;
}
.wb5-icon {
    color: #1a1a1a;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 80ms linear;
}
.wb5-icon:hover { background: rgba(0, 0, 0, 0.10); }
.wb5-icon:focus { outline: 2px solid #2a4a7a; outline-offset: 1px; }
.wb5-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wb5-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a6a9a 0%, #2a4a7a 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}
.wb5-clock {
    font-size: 15px;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}
.wb5-content {
    flex: 1;
    padding: 28px 48px 32px 48px;
    overflow: auto;
}
.wb5-tile-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Padding inside the scroll container gives the active
       tile's outer glow physical room to render. Negative
       margins keep the row's outer layout unchanged. */
    padding: 28px 28px 16px 28px;
    margin: -28px -28px 0 -28px;
}
.wb5-tile {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.10);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 80ms linear, box-shadow 80ms linear;
}
.wb5-tile-art {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.wb5-tile-art svg { display: block; width: 100%; height: 100%; }
.wb5-tile-active {
    transform: scale(1.06);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.92),
        0 4px 14px rgba(0, 0, 0, 0.40);
    z-index: 3;
}
.wb5-tile-system .wb5-art-system { width: 100%; height: 100%; }
.wb5-region-lock {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
}
.wb5-tile-locked {
    opacity: 0.85;
}
.wb5-active-meta {
    margin-top: 36px;
    color: #1a1a1a;
}
.wb5-active-tag {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(26, 26, 26, 0.65);
    font-weight: 600;
}
.wb5-active-title {
    font-size: 36px;
    font-weight: 400;
    margin-top: 6px;
    line-height: 1.15;
}
.wb5-active-sub {
    font-size: 15px;
    color: rgba(26, 26, 26, 0.65);
    margin-top: 6px;
    max-width: 720px;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   W5 ACCOUNT CREATION GATE
   First-boot mandatory sign-up. Appears INSIDE .wb5-shell so
   the page already has the W5 background loaded before any
   gameplay is reachable.
   ------------------------------------------------------------ */
.wb5-account-screen {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    overflow: auto;
}
.wb5-account-card {
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    border-radius: 8px;
    max-width: 520px;
    width: 100%;
    padding: 24px 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.wb5-account-title {
    font-size: 22px;
    font-weight: 400;
}
.wb5-account-sub {
    font-size: 13px;
    color: rgba(26, 26, 26, 0.7);
    margin-top: 6px;
    line-height: 1.5;
}
.wb5-account-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}
.wb5-account-form label {
    font-size: 12px;
    color: rgba(26, 26, 26, 0.7);
    font-weight: 600;
}
.wb5-account-form input[type="text"],
.wb5-account-form input[type="email"] {
    padding: 8px 10px;
    border: 1px solid #b0b4bc;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    background: #ffffff;
    color: #1a1a1a;
}
.wb5-account-form input:focus { outline: 2px solid #4a6a9a; outline-offset: -1px; }
.wb5-checkbox {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12px;
    color: rgba(26, 26, 26, 0.85);
    line-height: 1.5;
    margin-top: 6px;
}
.wb5-checkbox input { margin-top: 2px; flex-shrink: 0; }
.wb5-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    background: #d0d4dc;
    color: #1a1a1a;
}
.wb5-btn:hover { background: #c0c4cc; }
.wb5-btn-primary {
    background: #2a4a7a;
    color: #ffffff;
}
.wb5-btn-primary:hover { background: #3a5a8a; }

/* ------------------------------------------------------------
   SYSTEM MENU
   Floating menu shown when the system tile is opened. Plain
   list of options, dismissible by clicking outside.
   ------------------------------------------------------------ */
.wb-menu-bd {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wb-menu {
    background: #1a1e2a;
    color: #e8e8e8;
    border: 1px solid #3a4050;
    min-width: 280px;
    max-width: 360px;
    font-family: "Tahoma", "Segoe UI", sans-serif;
}
.wb-menu-title {
    background: #0a0e1a;
    padding: 8px 14px;
    font-size: 12px;
    color: #80a8d0;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid #2a3040;
}
.wb-menu-list {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}
.wb-menu-item {
    background: transparent;
    border: none;
    color: #e8e8e8;
    font-family: inherit;
    font-size: 13px;
    padding: 8px 14px;
    text-align: left;
    cursor: pointer;
}
.wb-menu-item:hover {
    background: #2a3a5a;
    color: #ffffff;
}
.wb-menu-item-cancel {
    color: #a0a0a0;
    margin-top: 4px;
    border-top: 1px solid #2a3040;
}

/* ------------------------------------------------------------
   ABOUT DIALOG
   Big card with two sections: technical specifications table
   and satirical commentary prose. Anchors the project's third
   pillar of satire: school = curriculum lock, home = console
   lock, platform owner decides whether your purchase keeps
   working.
   ------------------------------------------------------------ */
.wb-about-bd {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 99600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: auto;
}
.wb-about {
    background: #ffffff;
    color: #1a1a1a;
    max-width: 760px;
    width: 100%;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    font-family: "Tahoma", "Segoe UI", sans-serif;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.wb-about-header {
    background: #0c2c5c;
    color: #ffffff;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.wb-about-title {
    font-size: 15px;
    font-weight: 600;
}
.wb-about-close {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-family: "Lucida Console", monospace;
    font-size: 13px;
    width: 24px;
    height: 22px;
    line-height: 1;
    cursor: pointer;
}
.wb-about-close:hover { background: rgba(255, 255, 255, 0.25); }
.wb-about-body {
    padding: 18px 22px 22px 22px;
    overflow: auto;
    flex: 1;
}
.wb-about-section {
    margin-bottom: 22px;
}
.wb-about-section:last-child { margin-bottom: 0; }
.wb-about-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #0c2c5c;
    border-bottom: 1px solid #b0b8c8;
    padding-bottom: 4px;
    margin-bottom: 10px;
}
.wb-about-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.wb-about-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #e0e4ec;
}
.wb-about-table td:first-child {
    width: 200px;
    color: #4a4a4a;
}
.wb-about-section p {
    margin: 0 0 10px 0;
    font-size: 13px;
    line-height: 1.6;
}
.wb-about-section p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   FRICTION DIALOGS (.wb-friction)
   Subtle. NOT the gold-glow-and-red-everywhere of the earlier
   build. Plain modal card, neutral chrome, error text only as
   prose. The point is that the platform's friction is normal,
   not exceptional.
   ------------------------------------------------------------ */
.wb-friction-bd {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: auto;
}
.wb-friction {
    background: #ffffff;
    color: #1a1a1a;
    max-width: 520px;
    width: 100%;
    border-radius: 4px;
    font-family: "Tahoma", "Segoe UI", sans-serif;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.wb-friction-compact { max-width: 420px; }
.wb-friction-title {
    background: #0c2c5c;
    color: #ffffff;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
}
.wb-friction-body {
    padding: 14px 18px;
    font-size: 13px;
    line-height: 1.55;
    color: #1a1a1a;
}
.wb-friction-body p { margin: 0 0 10px 0; }
.wb-friction-body p:last-child { margin-bottom: 0; }
.wb-friction-body ul {
    margin: 8px 0;
    padding-left: 20px;
}
.wb-friction-body li {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.5;
}
.wb-friction-actions {
    display: flex;
    gap: 8px;
    padding: 10px 14px 14px 14px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.wb-btn {
    padding: 7px 14px;
    border: 1px solid #b0b8c8;
    background: #e8ecf2;
    color: #1a1a1a;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    border-radius: 2px;
}
.wb-btn:hover { background: #d8dce2; }
.wb-btn-primary {
    background: #2a4a7a;
    color: #ffffff;
    border-color: #1a3a6a;
}
.wb-btn-primary:hover { background: #3a5a8a; }
.wb-sub-tiers {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    flex-wrap: wrap;
}
.wb-sub-tier {
    flex: 1;
    min-width: 100px;
    padding: 10px 12px;
    background: #f0f3f8;
    border: 1px solid #d0d8e0;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    /* The tier is a light card. Without an explicit text
       colour, the W4 friction-dialog body's white text gets
       inherited and the tier label + price become invisible
       against the cream background. Force dark text. */
    color: #1a1a1a;
}
/* The tier name uses <strong>. In W4 the body's <strong>
   override is yellow which is unreadable on light cream;
   in W3 it is white (invisible). Anchor to a dark blue so
   the name reads regardless of which variant opened the
   subscription wall. */
.wb-sub-tier strong {
    color: #1a3070;
    font-weight: 700;
    font-size: 13px;
}

/* ============================================================
   PER-CONSOLE DIALOG PALETTES
   Each variant ships its own look. The DOM structure
   (.wb-friction-bd > .wb-friction > title + body + actions)
   stays identical; only the colours, borders, radii, and
   button treatments change so dialogs feel like part of the
   OS that opened them rather than a generic OS dialog.
   ============================================================ */

/* W3 - Waterboard 3 (PS2-era, plain dark)
   Sharp corners. Flat colours. Mono in the title to echo the
   stripe + monospace clock in the top bar. Buttons are dark
   with thin borders, no gradients. */
.wb-friction-bd-w3 {
    background: rgba(0, 0, 10, 0.65);
}
.wb-friction-bd-w3 .wb-friction {
    background: #0a0e1a;
    color: #d8d8d8;
    border: 1px solid #2a3050;
    border-radius: 0;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}
.wb-friction-bd-w3 .wb-friction-title {
    background: #0a0e1a;
    color: #80a8d0;
    border-bottom: 1px solid #2a3050;
    font-family: "Tahoma", "Segoe UI", sans-serif;
    letter-spacing: 0.5px;
}
.wb-friction-bd-w3 .wb-friction-title::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #4a80c0;
    margin-right: 8px;
    vertical-align: middle;
}
.wb-friction-bd-w3 .wb-friction-body { color: #d8d8d8; }
.wb-friction-bd-w3 .wb-friction-body code {
    background: #050810;
    padding: 1px 4px;
    color: #80c8d0;
    font-family: "Lucida Console", monospace;
}
.wb-friction-bd-w3 .wb-friction-body strong { color: #ffffff; }
.wb-friction-bd-w3 .wb-btn {
    background: #1a2030;
    color: #d8d8d8;
    border: 1px solid #2a3050;
    border-radius: 0;
    padding: 8px 16px;
}
.wb-friction-bd-w3 .wb-btn:hover { background: #2a3a5a; color: #ffffff; }
.wb-friction-bd-w3 .wb-btn-primary {
    background: #1a3070;
    border-color: #4a80c0;
    color: #ffffff;
}
.wb-friction-bd-w3 .wb-btn-primary:hover { background: #2a4080; }

/* W4 - Waterboard 4 (PS4-era, blue gradient, rounded)
   Matches the W4 shell's radial blue + the wave overlay. The
   dialog itself uses a darker blue gradient so it visually
   sits on top of the lighter shell. Rounded corners 8px,
   white-glow shadow, light-on-dark text. */
.wb-friction-bd-w4 {
    background: rgba(10, 24, 70, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.wb-friction-bd-w4 .wb-friction {
    background: linear-gradient(180deg, #1c3266 0%, #0e1d4a 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(90, 216, 255, 0.10);
    overflow: hidden;
}
.wb-friction-bd-w4 .wb-friction-title {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-family: "Segoe UI", "Tahoma", sans-serif;
    font-weight: 300;
    font-size: 18px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    letter-spacing: 0.5px;
}
.wb-friction-bd-w4 .wb-friction-body {
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    padding: 16px 18px;
}
.wb-friction-bd-w4 .wb-friction-body code {
    background: rgba(0, 0, 0, 0.30);
    color: #5ad8ff;
    padding: 1px 5px;
    border-radius: 2px;
    font-family: "Lucida Console", monospace;
}
.wb-friction-bd-w4 .wb-friction-body strong { color: #ffd34d; font-weight: 600; }
.wb-friction-bd-w4 .wb-friction-body em { color: rgba(255, 255, 255, 0.95); font-style: normal; font-weight: 600; }
.wb-friction-bd-w4 .wb-friction-actions {
    padding: 10px 16px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.wb-friction-bd-w4 .wb-btn {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: 500;
}
.wb-friction-bd-w4 .wb-btn:hover { background: rgba(255, 255, 255, 0.26); }
.wb-friction-bd-w4 .wb-btn:focus {
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 1px;
}
.wb-friction-bd-w4 .wb-btn-primary {
    background: linear-gradient(180deg, #3a80cf 0%, #1a5aaf 100%);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.40);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
.wb-friction-bd-w4 .wb-btn-primary:hover {
    background: linear-gradient(180deg, #4a90df 0%, #2a6abf 100%);
}

/* W5 - Waterboard 5 (PS5-era, light grey, frosted)
   The W5 shell is light grey; dialogs are very light cards
   on a dark dimmer with a subtle backdrop blur. Generous
   rounded corners (14px), minimal chrome, the title sits
   integrated above the body without a separate band. */
.wb-friction-bd-w5 {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.wb-friction-bd-w5 .wb-friction {
    background: #f0f0f3;
    color: #1a1a1a;
    border: none;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
.wb-friction-bd-w5 .wb-friction-title {
    background: transparent;
    color: #1a1a1a;
    padding: 18px 22px 4px 22px;
    font-family: "Segoe UI", "Tahoma", sans-serif;
    font-weight: 400;
    font-size: 20px;
    border-bottom: none;
    letter-spacing: 0.2px;
}
.wb-friction-bd-w5 .wb-friction-body {
    color: #2a2a2a;
    font-size: 13px;
    padding: 6px 22px 14px 22px;
}
.wb-friction-bd-w5 .wb-friction-body code {
    background: #d8dce0;
    color: #2a4a7a;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: "Lucida Console", monospace;
}
.wb-friction-bd-w5 .wb-friction-body strong { color: #c04040; font-weight: 600; }
.wb-friction-bd-w5 .wb-friction-body em { color: #1a1a1a; font-style: normal; font-weight: 600; }
.wb-friction-bd-w5 .wb-friction-actions {
    padding: 8px 16px 16px 16px;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.wb-friction-bd-w5 .wb-btn {
    background: #e0e2e8;
    color: #1a1a1a;
    border: none;
    border-radius: 18px;
    padding: 9px 20px;
    font-weight: 500;
    font-size: 13px;
}
.wb-friction-bd-w5 .wb-btn:hover { background: #d0d4dc; }
.wb-friction-bd-w5 .wb-btn-primary {
    background: #2a4a7a;
    color: #ffffff;
}
.wb-friction-bd-w5 .wb-btn-primary:hover { background: #3a5a8a; }

/* About-dialog variant overrides. About is the long-form
   "system properties" surface; it follows the same per-OS
   palette as the friction dialogs but with no header band
   on W5 (the W5 About reads as a sheet rather than a popup). */
.wb-about-bd-w3 { background: rgba(0, 0, 10, 0.65); }
.wb-about-bd-w3 .wb-about {
    background: #0a0e1a;
    color: #d8d8d8;
    border-radius: 0;
    border: 1px solid #2a3050;
}
.wb-about-bd-w3 .wb-about-header {
    background: #0a0e1a;
    border-bottom: 1px solid #2a3050;
}
.wb-about-bd-w3 .wb-about-title { color: #80a8d0; }
.wb-about-bd-w3 .wb-about-section-title {
    color: #80a8d0;
    border-bottom-color: #2a3050;
}
.wb-about-bd-w3 .wb-about-table td {
    border-bottom-color: #1a2030;
    color: #d8d8d8;
}
.wb-about-bd-w3 .wb-about-table td:first-child { color: #909090; }
.wb-about-bd-w3 .wb-about-section p { color: #d8d8d8; }
.wb-about-bd-w3 .wb-about-close {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid #3a4050;
    color: #d8d8d8;
}

.wb-about-bd-w4 {
    background: rgba(10, 24, 70, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.wb-about-bd-w4 .wb-about {
    background: linear-gradient(180deg, #1c3266 0%, #0e1d4a 100%);
    color: #ffffff;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.wb-about-bd-w4 .wb-about-header {
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wb-about-bd-w4 .wb-about-title { color: #ffffff; font-weight: 300; font-size: 18px; }
.wb-about-bd-w4 .wb-about-section-title {
    color: #ffd34d;
    border-bottom-color: rgba(255, 255, 255, 0.10);
}
.wb-about-bd-w4 .wb-about-table td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
}
.wb-about-bd-w4 .wb-about-table td:first-child { color: rgba(255, 255, 255, 0.6); }
.wb-about-bd-w4 .wb-about-section p { color: rgba(255, 255, 255, 0.85); }
.wb-about-bd-w4 .wb-about-close {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.wb-about-bd-w5 {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.wb-about-bd-w5 .wb-about {
    background: #f0f0f3;
    color: #1a1a1a;
    border-radius: 14px;
    border: none;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.wb-about-bd-w5 .wb-about-header {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 16px 22px;
}
.wb-about-bd-w5 .wb-about-title {
    color: #1a1a1a;
    font-weight: 400;
    font-size: 20px;
}
.wb-about-bd-w5 .wb-about-section-title {
    color: #1a1a1a;
    border-bottom-color: rgba(0, 0, 0, 0.10);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.wb-about-bd-w5 .wb-about-table td:first-child { color: #5a5a5a; }
.wb-about-bd-w5 .wb-about-close {
    background: #e0e2e8;
    color: #1a1a1a;
    border: none;
    border-radius: 18px;
    width: 28px;
    height: 28px;
    padding: 0;
}

/* ------------------------------------------------------------
   GAME FRAME (.wb-game-bd)
   When a game launches, this modal frame holds a canvas-based
   game (Snake, Pong) or a stub message. Same plain chrome as
   other dialogs. Close via X button or Esc.
   ------------------------------------------------------------ */
.wb-game-bd {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.wb-game-frame {
    background: #1a1e2a;
    color: #e8e8e8;
    border: 1px solid #3a4050;
    max-width: 720px;
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: "Tahoma", "Segoe UI", sans-serif;
}
.wb-game-titlebar {
    background: #0a0e1a;
    color: #e8e8e8;
    padding: 8px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #2a3040;
}
.wb-game-title {
    font-size: 13px;
    font-weight: 600;
    color: #80a8d0;
}
.wb-game-close {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid #3a4050;
    color: #e8e8e8;
    font-family: "Lucida Console", monospace;
    width: 22px;
    height: 20px;
    line-height: 1;
    cursor: pointer;
    font-size: 12px;
}
.wb-game-close:hover { background: rgba(255, 255, 255, 0.2); }
.wb-game-area {
    padding: 14px;
    display: flex;
    justify-content: center;
    background: #0a0e1a;
}
.wb-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
}
.wb-game-hint {
    padding: 8px 14px;
    font-size: 11px;
    color: #a0a0a0;
    border-top: 1px solid #2a3040;
    background: #0a0e1a;
    line-height: 1.4;
}
/* On-screen tap controls below the canvas. Empty (no buttons
   injected) for games that already work with mouse/touch
   (strategy, RPG). For arrow-key games, addTouchControls()
   populates with one of the layouts below. */
.wb-game-controls {
    display: flex;
    gap: 8px;
    padding: 8px 14px;
    background: #0a0e1a;
    border-top: 1px solid #2a3040;
    justify-content: center;
    flex-wrap: wrap;
}
.wb-game-controls:empty {
    display: none;
}
.wb-game-controls-grid {
    display: grid;
    grid-template-columns: repeat(3, 56px);
    gap: 6px;
    justify-content: center;
}
.wb-touch-btn {
    min-width: 56px;
    min-height: 44px;
    padding: 8px 14px;
    background: #1a2030;
    color: #ffffff;
    border: 1px solid #3a4050;
    border-radius: 4px;
    font-family: "Lucida Console", "Consolas", monospace;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}
.wb-touch-btn:hover { background: #2a3040; border-color: #5a6a80; }
.wb-touch-btn-down {
    background: #4a6080;
    border-color: #80a8d0;
    transform: scale(0.96);
}
.wb-tank-stub {
    width: 100%;
    max-width: 480px;
    color: #e8e8e8;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wb-tank-status {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    color: #b0c8d0;
}
.wb-tank-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #2a3040;
    border-top-color: #80a8d0;
    border-radius: 50%;
    animation: wb-spin 0.9s linear infinite;
    flex-shrink: 0;
}
@keyframes wb-spin { to { transform: rotate(360deg); } }
.wb-tank-meta {
    font-size: 12px;
    line-height: 1.55;
    color: #a8b0c0;
}
.wb-tank-meta p { margin: 0 0 8px 0; }
.wb-tank-meta p:last-child { margin-bottom: 0; }
.wb-tank-meta strong { color: #ffd34d; }

/* ------------------------------------------------------------
   STAR GALAXY VII  (RPG combat arena)
   This is the only game that lays out with HTML divs rather
   than canvas (turn-based combat reads better as discrete UI
   pieces than as a pixel-rendered scene). Three-column layout:
   enemy portrait/bars on the left, scrolling combat log in the
   middle, player portrait/bars + action buttons on the right.
   The whole arena sits inside the standard .wb-game-frame.
   ------------------------------------------------------------ */
.rpg-arena {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 720px;
    background: #0a0e1a;
    color: #e8e8e8;
    font-family: "Tahoma", "Segoe UI", sans-serif;
}
.rpg-side {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    border: 1px solid #2a3040;
    background: linear-gradient(180deg, #15203a 0%, #0a1428 100%);
    border-radius: 4px;
}
.rpg-side-enemy {
    border-color: #5a2020;
    background: linear-gradient(180deg, #2a1020 0%, #1a0810 100%);
}
.rpg-side-player {
    border-color: #205a40;
    background: linear-gradient(180deg, #102a1c 0%, #081810 100%);
}
.rpg-portrait {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px solid #2a3040;
    background: #0a0e1a;
    position: relative;
}
.rpg-portrait-enemy {
    background:
        radial-gradient(circle at 35% 35%, #df40a0 0%, #401050 60%, #100020 100%);
    box-shadow: 0 0 18px rgba(223, 64, 160, 0.35);
}
.rpg-portrait-enemy::before {
    content: "";
    position: absolute;
    left: 24px; top: 32px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #ffd34d;
    box-shadow: 28px 0 #ffd34d;
}
.rpg-portrait-enemy::after {
    content: "";
    position: absolute;
    left: 28px; bottom: 24px;
    width: 36px; height: 6px;
    border-radius: 6px;
    background: #1a0010;
}
.rpg-portrait-player {
    background:
        radial-gradient(circle at 50% 35%, #d8b890 0%, #a87830 60%, #402810 100%);
    box-shadow: 0 0 18px rgba(255, 211, 77, 0.30);
}
.rpg-portrait-player::before {
    content: "";
    position: absolute;
    left: 32px; top: 32px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #1a1a1a;
    box-shadow: 20px 0 #1a1a1a;
}
.rpg-portrait-player::after {
    content: "";
    position: absolute;
    left: 36px; bottom: 28px;
    width: 24px; height: 4px;
    border-radius: 4px;
    background: #5a2010;
}
.rpg-name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
}
.rpg-bars {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rpg-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #a0b0c0;
    font-family: "Lucida Console", monospace;
}
.rpg-bar > span:first-child {
    width: 22px;
    flex-shrink: 0;
    color: #ffffff;
    font-weight: 600;
}
.rpg-bar > span:last-child {
    width: 56px;
    flex-shrink: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.rpg-bar-track {
    flex: 1;
    height: 10px;
    background: #050810;
    border: 1px solid #2a3040;
    border-radius: 2px;
    overflow: hidden;
}
.rpg-bar-fill {
    height: 100%;
    transition: width 200ms ease-out;
}
.rpg-bar-hp { background: linear-gradient(90deg, #df4040 0%, #ff8060 100%); }
.rpg-bar-mp { background: linear-gradient(90deg, #4080df 0%, #60a8ff 100%); }
.rpg-log {
    padding: 12px;
    background: #050810;
    border: 1px solid #2a3040;
    border-radius: 4px;
    height: 260px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.55;
}
.rpg-log-line {
    margin-bottom: 4px;
    color: #c0c8d0;
}
.rpg-log-line:last-child { margin-bottom: 0; }
.rpg-log-win {
    color: #80df80;
    font-weight: 600;
}
.rpg-log-lose {
    color: #df6060;
    font-weight: 600;
}
.rpg-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 4px;
}
.rpg-btn {
    padding: 8px 10px;
    background: #1a2a3a;
    border: 1px solid #3a4050;
    color: #e8e8e8;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    text-align: left;
}
.rpg-btn:hover:not([disabled]) {
    background: #2a3a4a;
    border-color: #5a6a8a;
    color: #ffffff;
}
.rpg-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ------------------------------------------------------------
   RESPONSIVE
   The console shells are designed for desktop-ish widths but
   should still be usable on a narrow viewport. Mostly: drop
   the W3 system column, scale down the W4 tile row, give the
   W5 tiles a more reasonable mobile footprint, stack the RPG
   arena vertically so portraits and the log all fit.
   ------------------------------------------------------------ */
@media (max-width: 720px) {
    .wbp-inner { padding: 18px 14px; }
    .wbp-row { flex-wrap: wrap; }
    .wb3-col-system {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #1a2030;
        padding: 8px 0;
    }
    .wb3-columns { flex-direction: column; }
    .wb4-content { padding: 28px 14px 18px 14px; }
    .wb4-row { gap: 12px; }
    .wb4-tile { width: 140px; height: 140px; }
    .wb4-active-meta { margin-top: 18px; }
    .wb4-active-title { font-size: 26px; }
    .wb4-active-sub { font-size: 13px; }
    .wb4-topbar { padding: 0 14px; }
    .wb5-topbar { padding: 0 14px; }
    .wb5-content { padding: 16px 14px; }
    .wb5-tile-row { gap: 10px; }
    .wb5-tile { width: 110px; height: 110px; }
    .wb5-active-meta { margin-top: 20px; }
    .wb5-active-title { font-size: 24px; }
    .wb5-active-sub { font-size: 13px; }
    .wb-friction-actions .wb-btn { flex: 1; }
    .wb-game-bd { padding: 12px; }
    .wb-about-body { padding: 14px 16px; }
    /* RPG arena drops from 3 columns to a stacked layout: log
       comes last so the action buttons stay near the bottom of
       the viewport where the user's thumb can reach them. */
    .rpg-arena {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .rpg-side {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    .rpg-portrait { width: 64px; height: 64px; flex-shrink: 0; }
    .rpg-portrait-enemy::before { left: 16px; top: 22px; width: 8px; height: 8px; box-shadow: 18px 0 #ffd34d; }
    .rpg-portrait-enemy::after { left: 18px; bottom: 16px; width: 24px; height: 4px; }
    .rpg-portrait-player::before { left: 20px; top: 22px; box-shadow: 14px 0 #1a1a1a; }
    .rpg-portrait-player::after { left: 22px; bottom: 18px; width: 18px; }
    .rpg-name { text-align: left; flex-shrink: 0; min-width: 88px; }
    .rpg-bars { flex: 1; }
    .rpg-log { height: 180px; }
    .rpg-side-player {
        flex-wrap: wrap;
    }
    .rpg-actions {
        order: 3;
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }
}

/* When the coreboot flash sequence is running, every other surface
   on the page is forcibly hidden so no chrome from QNX, the
   Server 2003 desktop, the install animation, or BIOS Setup leaks
   through during the transition. The flash overlay itself
   (.coreboot-flash) is exempt. */
body.coreboot-flashing > *:not(.coreboot-flash):not(script):not(style) {
    display: none !important;
}

/* Avoid widow words: a single dangling word on the last line
   of a paragraph looks bad on console prompts and dialogs.
   text-wrap: pretty re-flows wrap points to prevent it where
   the browser supports it (Chrome 117+, Safari 17.4+). Older
   browsers fall back to the normal wrap algorithm. */
.wb-friction-body,
.wb-friction-body p,
.wb-friction-body li,
.wb-about-section p,
.wb-tank-meta p,
.wb-tank-meta,
.wbp-banner,
.wbp-note,
.wb5-account-sub,
.wb5-active-sub,
.wb4-active-sub,
.wb3-game-sub,
.wb-game-hint {
    text-wrap: pretty;
}