/*
 * webtop.css - Pure CSS NT 4.0 Desktop Shell (v45)
 * XT-Emporium: Zero-JavaScript server-side CGI edition
 * Windows NT 4.0 Workstation fidelity (degrades gracefully)
 *
 * No JavaScript. All interactivity via:
 *   - CSS :hover for menus and submenus
 *   - HTML links for window open/close/minimize/maximize
 *   - HTML forms for data input (mail, shell, comments, theme)
 *   - Server-side state via cookies
 *
 * Theme CSS custom properties (:root{}) and icon class definitions
 * are generated dynamically by /cgi-bin/theme.cgi, loaded as a
 * separate <link> stylesheet by chrome.h's print_head().
 * This file contains ONLY structural layout — no hardcoded theme colors.
 */

/* ================================================================
   Safe fallback CSS variables (used if theme.cgi fails to load)
   ================================================================ */
:root {
    --wallpaper-a: #011901;
    --wallpaper-b: #032703;
    --wallpaper-c: #001100;
    --ui-bg: #c0c0c0;
    --ui-face: #d4d0c8;
    --ui-hi: #ffffff;
    --ui-lo: #808080;
    --ui-deep: #0a0a0a;
    --title-a: #00337f;
    --title-b: #1188ff;
    --text-main: #101010;
    --text-dark: #000000;
    --neon: #56ff56;
    --taskbar-h: 28px;
    --silver: #c0c0c0;
}

/* ================================================================
   @font-face
   ================================================================ */
@font-face {
    font-family: "Webtop";
    src: url("/assets/fonts/w-95-sans-serif.woff2") format("woff2"),
         url("/assets/fonts/w-95-sans-serif.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ================================================================
   Reset & Base
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
    font-family: "Webtop", "MS Sans Serif", "Tahoma", "Geneva", sans-serif;
    font-size: 12px;
    color: #101010;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(100,255,100,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(0,180,0,0.04) 0%, transparent 40%),
        linear-gradient(180deg, #011901 0%, #032703 40%, #001100 100%);
    /* Fallback for CSS var themes: applied via class overrides */
    background:
        radial-gradient(ellipse at 30% 40%, rgba(100,255,100,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(0,180,0,0.04) 0%, transparent 40%),
        linear-gradient(180deg, var(--wallpaper-a) 0%, var(--wallpaper-b) 40%, var(--wallpaper-c) 100%);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

a { color: inherit; }
img { border: 0; }
::selection { background: #000080; color: #fff; }

/* ================================================================
   NT 4.0 Form Controls — Global sunken look for all interactive inputs
   ================================================================ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
select {
    font-family: "Webtop", "MS Sans Serif", "Tahoma", "Geneva", sans-serif;
    font-size: 11px;
    background: #fff;
    color: #000;
    border: none;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000;
    padding: 2px 4px;
    outline: none;
    box-sizing: border-box;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="url"],
select {
    height: 22px;
    line-height: 18px;
}

textarea {
    height: auto;
    padding: 2px 4px;
    resize: vertical;
}

select {
    cursor: default;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Crect width='17' height='17' fill='%23c0c0c0'/%3E%3Crect x='1' y='1' width='15' height='15' fill='none' stroke='%23dfdfdf' stroke-width='1'/%3E%3Cpolygon points='4,6 13,6 8.5,11' fill='%23000'/%3E%3C/svg%3E") no-repeat right 0 center;
    padding-right: 20px;
    -webkit-appearance: none;
    appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #000080;
    width: 13px;
    height: 13px;
    cursor: default;
}

input[type="submit"],
input[type="button"],
input[type="reset"],
button {
    font-family: "Webtop", "MS Sans Serif", "Tahoma", "Geneva", sans-serif;
    font-size: 11px;
    background: #c0c0c0;
    background: var(--ui-bg, #c0c0c0);
    color: #000;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
    padding: 4px 12px;
    cursor: pointer;
    min-width: 75px;
    height: 23px;
    outline: none;
}

input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
button:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    box-shadow: inset -1px -1px 0 #dfdfdf, inset 1px 1px 0 #808080;
    padding: 5px 11px 3px 13px;
}

input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
button:focus {
    outline: 1px dotted #000;
    outline-offset: -4px;
}

/* ================================================================
   CRT Effects (pure CSS, no JS needed)
   ================================================================ */
body.show-scanlines::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 30;
    background-image: repeating-linear-gradient(to bottom,
        rgba(0,255,0,0.08) 0, rgba(0,255,0,0.08) 1px,
        transparent 1px, transparent 3px);
}

body.show-glow::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 30;
    box-shadow: inset 0 0 110px rgba(0,255,0,0.2);
}

/* ================================================================
   Desktop Shell
   ================================================================ */
.desktop-shell {
    position: relative;
    height: calc(100vh - 28px);
    height: calc(100vh - var(--taskbar-h));
    padding: 0;
    overflow: hidden;
}

.desktop-area {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

.desktop-ctx-target {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
}

.desktop-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 25% 35%, rgba(100,255,100,0.16) 0%, transparent 40%),
        linear-gradient(135deg, rgba(25,65,25,0.08) 0%, transparent 60%);
}

/* ================================================================
   Desktop Icons
   ================================================================ */
.desktop-icons {
    position: relative;
    width: 100%;
    height: calc(100vh - 28px);
    height: calc(100vh - var(--taskbar-h));
    z-index: 1;
    pointer-events: none;
}

.desktop-icon {
    pointer-events: auto;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 80px;
    text-decoration: none;
    color: #fff;
    font-size: 11px;
    cursor: default;
    user-select: none;
    padding: 3px 2px;
    text-align: center;
    /* Disable browser touch gestures so our JS handles drag + double-tap.
       touch-action:none removes the 300ms tap delay and lets touchmove
       preventDefault() work for icon dragging. */
    touch-action: none;
}

.desktop-icon:hover .icon-label {
    border: 1px dotted #fff;
    background: #000080;
    color: #fff;
    text-shadow: none;
}

.desktop-icon:hover .icon-art {
    filter: brightness(0.55) sepia(1) saturate(4) hue-rotate(195deg);
    outline: 1px solid rgba(0,0,128,0.5);
}

/* Selected state (single click — NT 4.0 style) */
.desktop-icon.selected .icon-label {
    border: 1px dotted #fff;
    background: #000080;
    color: #fff;
    text-shadow: none;
}

.desktop-icon.selected .icon-art {
    filter: brightness(0.55) sepia(1) saturate(4) hue-rotate(195deg);
    outline: 1px solid rgba(0,0,128,0.5);
}

/* .icon-art and .icon-XXX classes are generated by /cgi-bin/theme.cgi
   (reads assets/icons/ directory dynamically). Fallback below if CGI
   unavailable — override by theme.cgi's :root and icon rules. */
.icon-art {
    display: block;
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-label {
    border: 1px dotted transparent;
    line-height: 1.15;
    padding: 1px 3px;
    max-width: 76px;
    text-shadow: 1px 1px 0 rgba(0,0,0,1), -1px -1px 0 rgba(0,0,0,0.8),
                 1px -1px 0 rgba(0,0,0,0.8), -1px 1px 0 rgba(0,0,0,0.8),
                 0 0 4px rgba(0,0,0,0.9);
}

/* ================================================================
   Window Layer
   ================================================================ */
.window-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    pointer-events: none;
}

/* ================================================================
   Window Chrome (NT 4.0 Workstation)
   ================================================================ */
.app-window {
    position: absolute;
    pointer-events: auto;
    background: #c0c0c0;
    background: var(--ui-bg);
    border: 2px solid;
    border-color: #fff #0a0a0a #0a0a0a #fff;
    padding: 2px;
    min-width: 380px;
    min-height: 120px;
    max-width: min(var(--window-max-w, 4096px), calc(100vw - 12px));
    max-height: min(var(--window-max-h, 2160px), calc(100vh - var(--taskbar-h, 28px) - 8px));
    z-index: 1;
    resize: none;  /* JS handles all-edge resize via assets/desktop/*.js */
    box-shadow:
        inset 1px 1px 0 #dfdfdf,
        inset -1px -1px 0 #808080;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Inner bevel wrapper must be a flex column so title/menubar/content/status
   behave correctly (especially when maximized).
   NOTE: do NOT use height:100% here — when the parent app-window is maximized
   it has height:auto (from position:fixed top/bottom constraints), and
   percentage heights require an explicit parent height.  flex:1 1 0 + min-height:0
   is the correct way to fill a flex container in all states. */
.window-outer-bevel {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    background: var(--ui-bg, #c0c0c0);
}

.app-window.closed {
    display: none;
}

.app-window.focused {
    z-index: 50;
}

/* ---- Maximized window: fills desktop area ---- */
.app-window.maximized {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--taskbar-h, 28px) !important;
    width: auto !important;
    height: auto !important;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: none;
    max-height: none;
    z-index: 55;
    resize: none;
    cursor: default;
}

/* ---- Minimized window: moved off-screen to keep iframes alive
   (audio keeps playing, IRC keeps refreshing, do NOT use display:none) ---- */
.app-window.minimized {
    position: fixed !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    pointer-events: none;
    opacity: 0;
}

/* ---- Titlebar (NT 4.0: gradient titlebars, both active and inactive) ---- */
.window-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20px;
    padding: 1px 3px;
    cursor: grab;
    color: #fff;
    background: linear-gradient(90deg, #000080, #1084d0);
    background: linear-gradient(90deg, var(--title-a), var(--title-b));
    user-select: none;
    flex-shrink: 0;
}

/* NT 4.0: inactive titlebars use a gray gradient (not flat gray like Webtop) */
.window-titlebar.inactive {
    background: linear-gradient(90deg, #808080, #b4b4b4);
    color: #d4d0c8;
}

/* Small icon in titlebar (16×16) — override .icon-art 32px default */
.titlebar-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    background-size: 16px 16px;
    margin-right: 4px;
    flex-shrink: 0;
    image-rendering: pixelated;
}

/* NT 4.0: slightly larger, bolder title text than Webtop */
.window-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    padding-left: 2px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.window-controls {
    display: flex;
    gap: 1px;
    flex-shrink: 0;
}

/* ---- Window control buttons ---- */
.wc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 14px;
    font-size: 7px;
    font-weight: 700;
    font-family: "Webtop", "MS Sans Serif", sans-serif;
    text-decoration: none;
    color: #000;
    background: #c0c0c0;
    background: var(--ui-bg);
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
    padding: 0;
    cursor: pointer;
    position: relative;
}

.wc-btn:active {
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    box-shadow: inset 1px 1px 0 #808080;
    padding: 1px 0 0 1px;
}

/* Minimize: horizontal line at bottom */
.wc-min::after {
    content: "";
    display: block;
    width: 6px;
    height: 2px;
    background: #000;
    position: absolute;
    bottom: 3px;
    left: 4px;
}

/* Maximize: square outline */
.wc-max::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    border-top: 2px solid #000;
    position: absolute;
    top: 2px;
    left: 3px;
    box-sizing: border-box;
}

/* Restore: two overlapping squares */
.wc-restore::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border: 1px solid #000;
    border-top: 2px solid #000;
    position: absolute;
    top: 1px;
    right: 2px;
    box-sizing: border-box;
    background: var(--ui-bg, #c0c0c0);
}
.wc-restore::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border: 1px solid #000;
    border-top: 2px solid #000;
    position: absolute;
    bottom: 1px;
    left: 2px;
    box-sizing: border-box;
    background: var(--ui-bg, #c0c0c0);
}

/* Close: X glyph via SVG */
.wc-close::after {
    content: "";
    display: block;
    width: 8px;
    height: 7px;
    position: absolute;
    top: 3px;
    left: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Cpath d='M0 0h2l1 1 1 1 1-1 1-1h2v1L6 3l1 1 1 1v1H6L5 5 4 4 3 5 2 6H0V5l1-1 1-1L1 2 0 1z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ---- Menu bar ---- */
.window-menubar {
    display: flex;
    align-items: center;
    gap: 0;
    height: 19px;
    padding: 0 3px;
    font-size: 11px;
    background: #c0c0c0;
    background: var(--ui-bg);
    border-bottom: 1px solid #808080;
    color: #000;
    flex-shrink: 0;
}

.menu-btn {
    padding: 1px 6px;
    cursor: default;
}

.menu-btn:hover {
    background: #000080;
    color: #fff;
}

.menu-btn u {
    text-decoration: underline;
}

/* ---- Window menubar dropdown menus (Paint-style universal) ---- */
.menu-item {
    position: relative;
}

.menu-dropdown {
    display: none;
    position: fixed;
    background: #c0c0c0;
    background: var(--ui-bg);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, 2px 2px 3px rgba(0,0,0,0.2);
    min-width: 180px;
    z-index: 9000;
    padding: 2px 0;
}

.menu-item:hover > .menu-dropdown,
.menu-item:focus-within > .menu-dropdown,
.menu-item.open > .menu-dropdown {
    display: block;
}

.menu-item.open > .menu-btn {
    background: #000080;
    color: #fff;
}

.menu-dd-item {
    display: block;
    padding: 2px 24px;
    cursor: default;
    white-space: nowrap;
    text-decoration: none;
    color: #000;
    font-size: 11px;
}

.menu-dd-item:hover {
    background: #000080;
    color: #fff;
}

.menu-dd-item.disabled {
    color: #808080;
    text-shadow: 1px 1px 0 #fff;
}

.menu-dd-item.disabled:hover {
    background: transparent;
    color: #808080;
}

.menu-dd-sep {
    height: 1px;
    background: #808080;
    margin: 2px 4px;
}

.menu-dd-shortcut {
    float: right;
    margin-left: 24px;
    color: inherit;
}

/* ---- Window content ---- */
.window-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 3px;
    overflow: auto;
    min-height: 0;
    font-size: 12px;
    background: #c0c0c0;
    background: var(--ui-bg);
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

/* Iframes fill their window content area completely */
.app-iframe {
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    height: 0;  /* flex-basis:0 + height:0 forces flex to control size */
    border: none;
    display: block;
}

/* Explorer and other grid layouts fill their window */
.explorer-shell,
.mail-window,
.encyclopedia-window,
.irc-window {
    flex: 1;
    min-height: 0;
}

/* Iframe host windows: remove padding so iframe fills edge-to-edge */
.window-content:has(.app-iframe) {
    padding: 0;
    overflow: hidden;
}

/* ---- Status bar ---- */
.window-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 2px;
    height: 19px;
    min-height: 19px;
    max-height: 19px;
    font-size: 11px;
    background: #c0c0c0;
    background: var(--ui-bg);
    flex-shrink: 0;
    flex-grow: 0;
}

.window-statusbar span {
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 0 4px;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 14px;
    height: 14px;
}

/* ================================================================
   3D Button (NT 4.0 authentic)
   ================================================================ */
.w95-btn,
.drive-tile,
.mail-folder {
    display: inline-block;
    color: #000;
    color: var(--text-dark);
    background: #d4d0c8;
    background: var(--ui-face);
    border-top: 2px solid #fff;
    border-top: 2px solid var(--ui-hi);
    border-left: 2px solid #fff;
    border-left: 2px solid var(--ui-hi);
    border-right: 2px solid #0a0a0a;
    border-right: 2px solid var(--ui-deep);
    border-bottom: 2px solid #0a0a0a;
    border-bottom: 2px solid var(--ui-deep);
    padding: 4px 8px;
    font-size: 12px;
    font-family: "Webtop", "MS Sans Serif", "Tahoma", "Geneva", sans-serif;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.w95-btn:active,
.drive-tile:active,
.mail-folder:active {
    border-top: 2px solid #808080;
    border-top: 2px solid var(--ui-lo);
    border-left: 2px solid #808080;
    border-left: 2px solid var(--ui-lo);
    border-right: 2px solid #fff;
    border-right: 2px solid var(--ui-hi);
    border-bottom: 2px solid #fff;
    border-bottom: 2px solid var(--ui-hi);
}

.w95-btn.active {
    background: #d9e8ff;
}

.w95-btn:focus {
    outline: 1px dotted #000;
    outline-offset: -3px;
}

.w95-btn[disabled] {
    color: #808080;
    text-shadow: 1px 1px 0 #fff;
    cursor: default;
}

/* ================================================================
   Taskbar
   ================================================================ */
.taskbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 28px;
    height: var(--taskbar-h);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 3px;
    border-top: 1px solid #fff;
    box-shadow: inset 0 1px 0 #dfdfdf, inset 0 2px 0 #808080;
    background: #c0c0c0;
    background: var(--ui-bg);
    z-index: 120;
}

/* ---- Start Button ---- */
.start-button {
    display: inline-flex;
    align-items: center;
    min-width: 56px;
    height: 21px;
    font-size: 11px;
    font-weight: 700;
    font-family: "Webtop", "MS Sans Serif", "Tahoma", "Geneva", sans-serif;
    background: #c0c0c0;
    background: var(--ui-bg);
    padding: 0 6px 0 24px;
    cursor: pointer;
    text-decoration: none;
    color: #000;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
    position: relative;
}

.start-button::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 3px;
    width: 16px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Crect x='2' y='1' width='5' height='5' fill='%23ff0000' rx='0.5'/%3E%3Crect x='8' y='1' width='5' height='5' fill='%2300aa00' rx='0.5'/%3E%3Crect x='2' y='7' width='5' height='5' fill='%230055ee' rx='0.5'/%3E%3Crect x='8' y='7' width='5' height='5' fill='%23ffcc00' rx='0.5'/%3E%3Crect x='0' y='0' width='2' height='14' fill='%23222'/%3E%3C/svg%3E") no-repeat center / contain;
}

.start-button:active,
.start-button.pressed {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    box-shadow: inset -1px -1px 0 #dfdfdf, inset 1px 1px 0 #808080;
    padding: 1px 5px 0 25px;
}

/* ---- Taskbar divider ---- */
.taskbar-divider {
    display: inline-block;
    width: 2px;
    height: 80%;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
}

/* ---- Quick Launch toolbar ---- */
.quick-launch {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    padding: 0 2px;
}

.ql-label {
    font-size: 10px;
    color: #444;
    padding: 0 3px 0 1px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ql-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    text-decoration: none;
    color: #000;
    flex-shrink: 0;
}

.ql-btn:hover {
    background: rgba(0,0,0,0.08);
    outline: 1px dotted #888;
}

.ql-btn .icon-art {
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    pointer-events: none;
}

.ql-sep {
    display: inline-block;
    width: 2px;
    height: 80%;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
    margin: 0 2px;
    flex-shrink: 0;
}

/* ---- Task buttons ---- */
.task-buttons {
    display: flex;
    flex: 1 1 0%;
    gap: 2px;
    overflow-x: auto;
    min-width: 0;
}

.task-btn {
    display: inline-flex;
    align-items: center;
    min-width: 80px;
    max-width: 180px;
    height: 22px;
    padding: 0 6px;
    font-size: 11px;
    font-family: "Webtop", "MS Sans Serif", "Tahoma", "Geneva", sans-serif;
    text-decoration: none;
    color: #000;
    background: #c0c0c0;
    background: var(--ui-bg);
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.task-btn:hover {
    background: #d0d0d0;
}

/* Focused/active window: pressed-in border (NT 4.0 authentic) */
.task-btn.task-active {
    background: #c0c0c0;
    background: var(--ui-bg);
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #dfdfdf;
    border-bottom: 2px solid #dfdfdf;
    box-shadow: inset 1px 1px 0 #808080;
    outline: 1px dotted #000;
    outline-offset: -3px;
    font-weight: 700;
}

.task-btn.task-active:hover {
    background: #b0b0b0;
}

/* Minimized window: italic + dimmed */
.task-btn.task-minimized {
    font-style: italic;
    color: #555;
}

/* ---- Status tray ---- */
.status-tray {
    display: flex;
    align-items: center;
    height: 22px;
    padding: 0 4px;
    gap: 4px;
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background: #c0c0c0;
    background: var(--ui-bg);
    font-size: 11px;
    flex-shrink: 0;
}

.counter-chip, .clock-chip {
    font-family: "Webtop", "Tahoma", sans-serif;
    font-size: 11px;
    color: #000;
    white-space: nowrap;
}

.tray-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    text-decoration: none;
    color: #000;
}

.tray-icon .icon-art {
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
}

.tray-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    text-decoration: none;
    color: #000;
}

.tray-app-icon .icon-art {
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
}

/* ================================================================
   Start Menu
   ================================================================ */
.start-menu {
    position: fixed;
    left: 2px;
    bottom: 30px;
    bottom: calc(var(--taskbar-h) + 2px);
    width: 260px;
    max-height: calc(100vh - var(--taskbar-h, 28px) - 8px);
    display: grid;
    grid-template-columns: 24px 1fr;
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000, 2px 2px 3px rgba(0,0,0,0.25);
    background: #c0c0c0;
    background: var(--ui-bg);
    z-index: 200;
    overflow: visible;
}

.start-banner {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    background: linear-gradient(0deg, #000080 0%, #0b5ea2 50%, #1084d0 100%);
    color: #d0d0d0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    padding: 8px 2px;
}
.start-banner b { color: #fff; }

.start-menu-items {
    display: flex;
    flex-direction: column;
    padding: 2px 0;
    overflow-y: visible;
    max-height: calc(100vh - var(--taskbar-h, 28px) - 16px);
}

.start-item {
    display: flex;
    align-items: center;
    padding: 4px 18px 4px 36px;
    font-size: 12px;
    text-decoration: none;
    color: #000;
    min-height: 24px;
    cursor: pointer;
    position: relative;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: "Webtop", "MS Sans Serif", "Tahoma", "Geneva", sans-serif;
}

.start-item:hover {
    background: #000080;
    color: #fff;
}

/* Start menu icons via data attributes */
.start-item::before {
    content: "";
    position: absolute;
    left: 8px;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    background-repeat: no-repeat;
}

.start-item[data-start-icon="folder"]::before     { background-image: url("/assets/icons/icon-folder.svg"); }
.start-item[data-start-icon="product"]::before    { background-image: url("/assets/icons/icon-hdd.svg"); }
.start-item[data-start-icon="chat"]::before        { background-image: url("/assets/icons/icon-chat.svg"); }
.start-item[data-start-icon="mirc"]::before        { background-image: url("/assets/icons/icon-mirc.svg"); }
.start-item[data-start-icon="book"]::before        { background-image: url("/assets/icons/icon-book.svg"); }
.start-item[data-start-icon="shell"]::before       { background-image: url("/assets/icons/icon-shell.svg"); }
.start-item[data-start-icon="mail"]::before        { background-image: url("/assets/icons/icon-mail.svg"); }
.start-item[data-start-icon="control"]::before     { background-image: url("/assets/icons/icon-control.svg"); }
.start-item[data-start-icon="find"]::before        { background-image: url("/assets/icons/icon-computer.svg"); }
.start-item[data-start-icon="help"]::before        { background-image: url("/assets/icons/icon-book.svg"); }
.start-item[data-start-icon="run"]::before         { background-image: url("/assets/icons/icon-shell.svg"); }
.start-item[data-start-icon="computer"]::before    { background-image: url("/assets/icons/icon-computer.svg"); }
.start-item[data-start-icon="globe"]::before       { background-image: url("/assets/icons/icon-globe.svg"); }
.start-item[data-start-icon="autism"]::before      { background-image: url("/assets/icons/icon-autism.svg"); }
.start-item[data-start-icon="dungeon"]::before     { background-image: url("/assets/icons/icon-dungeon.svg"); }
.start-item[data-start-icon="demoscene"]::before   { background-image: url("/assets/icons/icon-demoscene.svg"); }
.start-item[data-start-icon="paint"]::before       { background-image: url("/assets/icons/icon-paint.svg"); }
.start-item[data-start-icon="notepad"]::before     { background-image: url("/assets/icons/icon-notepad.svg"); }
.start-item[data-start-icon="hdd"]::before         { background-image: url("/assets/icons/icon-hdd.svg"); }
.start-item[data-start-icon="floppy"]::before      { background-image: url("/assets/icons/icon-floppy.svg"); }
.start-item[data-start-icon="amstrad"]::before     { background-image: url("/assets/icons/icon-amstrad.svg"); }
.start-item[data-start-icon="shutdown"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%23cc0000'/%3E%3Crect x='6' y='3' width='4' height='6' fill='%23fff' rx='1'/%3E%3C/svg%3E");
}

.start-sep {
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
    margin: 2px;
    height: 0;
}

/* ---- Submenus (CSS hover + optional JS .open for touch fidelity) ---- */
.has-submenu {
    position: relative;
}

.submenu-arrow {
    margin-left: auto;
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
    opacity: 0.9;
}

.start-submenu {
    display: none;
    position: absolute;
    left: calc(100% - 2px);
    top: -4px;
    width: 210px;
    max-height: calc(100vh - var(--taskbar-h, 28px) - 16px);
    overflow-y: auto;
    flex-direction: column;
    padding: 2px 0;
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000, 2px 2px 3px rgba(0,0,0,0.25);
    background: #c0c0c0;
    background: var(--ui-bg);
    z-index: 201;
}

.has-submenu:hover > .start-submenu {
    display: flex;
}

.has-submenu.open > .start-submenu {
    display: flex;
}

/* ================================================================
   Find: Files or Folders (built-in window)
   ================================================================ */
.find-win {
    padding: 8px;
    font-family: "Webtop", "MS Sans Serif", Tahoma, sans-serif;
    font-size: 12px;
    color: #000;
}
.find-form {
    padding: 6px;
    border: 2px inset #dfdfdf;
    background: #c0c0c0;
    margin-bottom: 8px;
}
.find-fields {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 6px 8px;
    align-items: center;
}
.find-fields input,
.find-fields select {
    font-family: inherit;
    font-size: 12px;
    padding: 2px 4px;
}
.find-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}
.w95-btn {
    display: inline-block;
    padding: 2px 10px;
    text-decoration: none;
    color: #000;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #404040 #404040 #fff;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
}
.w95-btn:active {
    border-color: #404040 #fff #fff #404040;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
}
.find-results {
    border: 2px inset #dfdfdf;
    background: #fff;
    height: 250px;
    overflow: auto;
    padding: 4px;
}
.find-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px;
}
.find-row:hover {
    background: #000080;
    color: #fff;
}
.find-row .icon-art {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
.find-meta { flex: 1; }
.find-name { font-weight: 700; }
.find-path { font-size: 11px; opacity: 0.8; }
.find-empty { padding: 10px; color: #404040; }
.find-status { padding: 6px 2px 0; font-size: 11px; color: #404040; }

/* ================================================================
   Context Menu (right-click)
   ================================================================ */
.context-menu-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 300;
}
.context-dismiss {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}
.context-menu {
    position: absolute;
    min-width: 200px;
    background: #c0c0c0;
    background: var(--ui-bg);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000, 2px 2px 3px rgba(0,0,0,0.3);
    padding: 2px 0;
    z-index: 301;
    font-family: "Webtop", "MS Sans Serif", "Tahoma", sans-serif;
    font-size: 12px;
}
.ctx-item {
    display: block;
    padding: 4px 24px 4px 28px;
    text-decoration: none;
    color: #000;
    cursor: default;
    white-space: nowrap;
    position: relative;
}
.ctx-item:hover {
    background: #000080;
    color: #fff;
}
.ctx-item.ctx-bold {
    font-weight: 700;
}
.ctx-item.ctx-disabled {
    color: #808080;
}
.ctx-item.ctx-disabled:hover {
    background: transparent;
    color: #808080;
}
.ctx-item.ctx-checked::before {
    content: "\2713";
    position: absolute;
    left: 8px;
}
.ctx-sep {
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
    margin: 3px 2px;
    height: 0;
}
/* Context submenu (Arrange Icons, New, etc.) */
.has-ctx-sub {
    position: relative;
}
.has-ctx-sub > span::after {
    content: "\25B6";
    position: absolute;
    right: 6px;
    font-size: 8px;
}
.ctx-submenu {
    display: none;
    position: absolute;
    left: calc(100% - 2px);
    top: -2px;
    min-width: 160px;
    background: #c0c0c0;
    background: var(--ui-bg);
    border: 2px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000, 2px 2px 3px rgba(0,0,0,0.3);
    padding: 2px 0;
    z-index: 302;
}
.has-ctx-sub:hover > .ctx-submenu {
    display: block;
}
/* Flip submenu left when context menu is near right edge of viewport */
.context-menu.ctx-flip-x .ctx-submenu {
    left: auto;
    right: calc(100% - 2px);
}
/* Flip submenu upward when context menu is near bottom edge */
.context-menu.ctx-flip-y .ctx-submenu {
    top: auto;
    bottom: -2px;
}

/* ================================================================
   Explorer / My Computer
   ================================================================ */
.explorer-shell {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 4px;
    height: 100%;
}

/* NT4 Explorer: two-pane with tree view sidebar */
.nt4-explorer .explorer-main {
    grid-template-columns: 180px 1fr;
}

/* Tree view sidebar (left pane) */
.explorer-tree {
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 0;
    font-size: 11px;
    min-height: 0;
}

.tree-node {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 1px 4px;
    white-space: nowrap;
    border-left: 1px dotted #808080;
    margin-left: 8px;
}

.tree-node:first-child {
    border-left: none;
    margin-left: 0;
}

.tree-icon {
    font-size: 12px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.tree-label {
    color: #000;
    text-decoration: none;
    padding: 0 2px;
}

a.tree-label:hover {
    color: #000080;
    text-decoration: underline;
}

.tree-label.tree-active {
    background: #000080;
    color: #fff;
}

a.tree-label.tree-active:hover {
    color: #fff;
}

.tree-sep {
    height: 1px;
    background: #c0c0c0;
    margin: 3px 8px;
}

/* w95-explorer backward compat (single-pane fallback) */
.w95-explorer .explorer-main {
    grid-template-columns: 1fr;
}

.explorer-pane {
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
    background: #fff;
    overflow: auto;
    min-height: 0;
}

.explorer-section-title {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #808080;
    margin: 4px 0 2px;
    color: #000;
    background: #c0c0c0;
    background: var(--ui-bg);
}

.explorer-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    border-bottom: 1px solid #808080;
    background: #c0c0c0;
    background: var(--ui-bg);
}

.explorer-toolbar .w95-btn {
    font-size: 11px;
    padding: 2px 8px;
}

.explorer-toolbar .w95-btn.disabled {
    color: #808080;
    text-shadow: 1px 1px 0 #fff;
    pointer-events: none;
}

.explorer-toolbar .w95-btn.pressed {
    box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #fff;
    border: 1px solid #808080;
    background: #dcdcdc;
}

.explorer-address {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    font-size: 11px;
}

.explorer-address-form {
    margin: 0;
}

.address-input {
    width: 100%;
    font-family: "Webtop", "MS Sans Serif", sans-serif;
    font-size: 11px;
    padding: 1px 4px;
    border: none;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000;
    background: #fff;
}

.explorer-address input {
    font-family: "Webtop", "MS Sans Serif", sans-serif;
    font-size: 11px;
    padding: 1px 4px;
    border: none;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000;
    background: #fff;
}

.address-field {
    font-family: "Webtop", "MS Sans Serif", sans-serif;
    font-size: 11px;
    padding: 1px 4px;
    border: none;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000;
    background: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.explorer-main {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 5px;
    overflow: auto;
}

/* Details view */
.explorer-details {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.explorer-details thead th {
    text-align: left;
    padding: 4px 6px;
    background: #c0c0c0;
    background: var(--ui-bg);
    border-bottom: 1px solid #808080;
}

.explorer-details tbody td {
    padding: 3px 6px;
    border-bottom: 1px solid #efefef;
}

.explorer-details tbody tr:hover {
    background: #d9e8ff;
}

.explorer-details .details-sep td {
    background: #c0c0c0;
    background: var(--ui-bg);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #808080;
    font-weight: 700;
    padding-top: 5px;
    padding-bottom: 5px;
}

.details-link {
    color: #000;
    text-decoration: none;
}

.details-link:hover {
    text-decoration: underline;
}

.explorer-sidebar {
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
    background: #fff;
    padding: 6px;
    overflow-y: auto;
}

.explorer-sidebar h3 {
    font-size: 11px;
    color: #003f8a;
    margin: 6px 0 3px;
}

.explorer-sidebar h3:first-child { margin-top: 0; }

.explorer-sidebar ul {
    font-size: 11px;
    padding-left: 16px;
    margin: 0;
}

.explorer-sidebar li {
    margin: 1px 0;
    line-height: 1.3;
}

.drive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    padding: 8px;
    align-content: start;
}

/* NT 4.0-style icon view for My Computer only */
.w95-explorer .drive-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    padding: 10px;
}

.drive-tile {
    display: flex;
    align-items: center;
    background: #efefef;
    min-height: 52px;
    padding: 4px 4px 4px 40px;
    position: relative;
    text-decoration: none;
    color: #000;
    font-size: 11px;
    cursor: pointer;
}

.w95-explorer .drive-tile {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 78px;
    padding: 6px;
    background: transparent;
}

.w95-explorer .drive-tile:hover {
    background: #d9e8ff;
}

.drive-tile::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-size: 22px 22px;
    background-repeat: no-repeat;
}

.w95-explorer .drive-tile::before {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    margin: 2px 0 4px;
}

.drive-tile[data-drive-kind="folder"]::before  { background-image: url("/assets/icons/icon-folder.svg"); }
.drive-tile[data-drive-kind="product"]::before  { background-image: url("/assets/icons/icon-hdd.svg"); }
.drive-tile[data-drive-kind="hdd"]::before     { background-image: url("/assets/icons/icon-hdd.svg"); }
.drive-tile[data-drive-kind="text"]::before    { background-image: url("/assets/icons/icon-notepad.svg"); }
.drive-tile[data-drive-kind="book"]::before    { background-image: url("/assets/icons/icon-book.svg"); }
.drive-tile[data-drive-kind="mail"]::before    { background-image: url("/assets/icons/icon-mail.svg"); }
.drive-tile[data-drive-kind="net"]::before     { background-image: url("/assets/icons/icon-chat.svg"); }
.drive-tile[data-drive-kind="control"]::before { background-image: url("/assets/icons/icon-control.svg"); }
.drive-tile[data-drive-kind="floppy"]::before  { background-image: url("/assets/icons/icon-floppy.svg"); }
.drive-tile[data-drive-kind="globe"]::before   { background-image: url("/assets/icons/icon-globe.svg"); }
.drive-tile[data-drive-kind="paint"]::before   { background-image: url("/assets/icons/icon-paint.svg"); }

/* Toolbar disabled state */
.toolbar-btn.disabled {
    color: #808080;
    text-shadow: 1px 1px 0 #fff;
    cursor: default;
    pointer-events: none;
}

.toolbar-sep {
    display: inline-block;
    width: 2px;
    height: 16px;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
    margin: 0 3px;
}

.drive-icon {
    font-weight: 700;
    font-size: 13px;
    margin-right: 6px;
}

.drive-label {
    font-size: 11px;
}

.w95-explorer .drive-label {
    text-align: center;
    line-height: 1.2;
}

.explorer-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px;
    font-size: 11px;
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

/* ================================================================
   Photo / Product Catalog Grid
   ================================================================ */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px;
    background: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    margin: 4px;
    min-height: 200px;
}

.product-catalog-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 4px;
    padding: 10px 12px;
    background: linear-gradient(90deg, #e9eef8 0%, #f7f7f7 100%);
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
}

.product-catalog-copy {
    min-width: 0;
}

.product-catalog-title {
    margin: 0 0 4px;
    font-size: 18px;
    color: #000080;
}

.product-catalog-copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #333;
}

.product-catalog-stats {
    min-width: 132px;
    padding: 8px 10px;
    background: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    text-align: center;
}

.product-catalog-stats b {
    display: block;
    font-size: 22px;
    line-height: 1;
    color: #000080;
}

.product-catalog-stats span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-launchbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 2px 4px 6px;
    padding: 4px 6px;
    background: #d4d0c8;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
}

.product-launchbar .pl-label {
    font-size: 11px;
    font-weight: 700;
    margin-right: 4px;
}

.product-launchbar .pl-btn {
    display: inline-block;
    text-decoration: none;
    color: #000;
    font-size: 11px;
    padding: 2px 8px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
}

.product-launchbar .pl-btn:hover {
    background: #dbe8f7;
}

.product-launchbar .pl-btn:active {
    border-color: #808080 #fff #fff #808080;
}

.photo-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 6px;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    text-decoration: none;
    color: #000;
    text-align: center;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.1s;
    min-height: 100%;
}

.photo-card img {
    width: 100%;
    height: 130px;
    object-fit: contain;
    border: 1px solid #808080;
    display: block;
    background: linear-gradient(180deg, #f5f5f5 0%, #d7d7d7 100%);
}

.photo-card-image {
    display: block;
    padding: 2px;
}

.photo-card-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 7px 4px 2px;
    text-align: left;
}

.photo-card-kicker {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #6a6a6a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.photo-card-title {
    display: block;
    font-weight: 700;
    font-size: 13px;
    color: #000;
    line-height: 1.2;
}

.photo-card-subtitle {
    display: block;
    font-size: 10px;
    color: #444;
    line-height: 1.3;
}

.photo-card-text {
    display: block;
    font-size: 11px;
    color: #333;
    line-height: 1.4;
    flex: 1;
}

.photo-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.photo-chip {
    display: inline-block;
    padding: 1px 6px 2px;
    background: #e8e8e8;
    border: 1px solid #b8b8b8;
    font-size: 10px;
    color: #333;
}

.photo-card-footer {
    display: block;
    padding-top: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #000080;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.photo-card:hover {
    background: #000080;
    border-color: #000080 #000040 #000040 #000080;
}

.photo-card:hover span {
    color: #fff;
}

.photo-card:hover img {
    border-color: #fff;
}

.photo-card:hover .photo-card-kicker,
.photo-card:hover .photo-card-subtitle,
.photo-card:hover .photo-card-text,
.photo-card:hover .photo-card-footer {
    color: #eef3ff;
}

.photo-card:hover .photo-chip {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #fff;
}

/* ================================================================
   Product Window Content
   ================================================================ */
.product-window {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.product-sidebar {
    width: 160px;
    min-width: 120px;
    background: #c0c0c0;
    background: var(--silver);
    border-right: 2px solid;
    border-right-color: #808080;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    flex-shrink: 0;
}

.product-sidebar .w95-btn {
    display: block;
    text-align: left;
    padding: 4px 8px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-sidebar .w95-btn.active {
    background: #000080;
    color: #fff;
    border-color: #000040 #000080 #000080 #000040;
}

.product-sidebar hr {
    border: 0;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
    margin: 6px 0;
}

.product-article {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 12px 16px;
    background: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    margin: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: #000;
}

.product-article h2 {
    font-size: 16px;
    color: #000080;
    margin: 0 0 8px;
    border-bottom: 1px solid #c0c0c0;
    padding-bottom: 4px;
}

.product-article h3 {
    font-size: 13px;
    color: #000080;
    margin: 12px 0 4px;
}

.product-article .lead {
    font-size: 12px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 10px;
}

.product-article ul {
    margin: 6px 0;
    padding-left: 20px;
}

.product-article li {
    margin-bottom: 3px;
}

.product-head {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 340px);
    gap: 14px;
    margin-bottom: 12px;
}

.product-photo img,
.product-main-img {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    background: #f0f0f0;
    display: block;
}

.product-image-strip {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.product-thumb {
    border: 2px solid #c0c0c0;
    display: block;
}

.product-thumb.active {
    border-color: #000080;
}

.product-thumb img {
    display: block;
}

.spec-table {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 4px 10px;
    font-size: 12px;
    margin: 8px 0;
    background: #f4f4f4;
    border: 1px solid #c0c0c0;
    padding: 8px 10px;
}

.spec-table dt {
    font-weight: 700;
    color: #000080;
    padding: 2px 0;
}

.spec-table dd {
    margin: 0;
    padding: 2px 0;
    border-bottom: 1px dotted #ddd;
}

.spec-table a { color: #0046ce; }

.ref-list {
    margin: 8px 0;
    padding-left: 18px;
}

.ref-list li {
    margin-bottom: 6px;
}

.ref-list a {
    color: #0046ce;
}

.long-copy {
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    background: #fff;
    padding: 8px;
    font-size: 12px;
    line-height: 1.45;
    margin: 8px 0;
}

.long-copy h3 {
    font-size: 13px;
    margin: 10px 0 4px;
    color: #000080;
}

.ebay-buy-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: linear-gradient(90deg, #fff8df 0%, #fff 100%);
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
}

.ebay-price-box {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ebay-price {
    font-size: 26px;
    font-weight: 700;
    color: #b00000;
}

.ebay-currency,
.ebay-condition,
.ebay-shipping {
    font-size: 11px;
    color: #444;
}

.ebay-buy-btn {
    display: inline-block;
    padding: 5px 12px;
    background: #ffcf33;
    border: 2px solid;
    border-color: #fff2a8 #a47400 #a47400 #fff2a8;
    color: #000;
    font-weight: 700;
    text-decoration: none;
}

.ebay-buy-btn-lg {
    padding: 7px 16px;
    font-size: 12px;
}

.ebay-listing-tab {
    display: grid;
    gap: 12px;
}

.ebay-main-panel,
.ebay-seller-box,
.ebay-description {
    padding: 10px 12px;
    background: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
}

.ebay-tab-price {
    font-size: 24px;
    font-weight: 700;
    color: #b00000;
    margin-bottom: 8px;
}

.ebay-tab-price small {
    font-size: 11px;
    color: #555;
}

.ebay-details-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
}

.ebay-details-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #dadada;
    vertical-align: top;
    font-size: 12px;
}

.ebay-details-table .edt-label {
    width: 160px;
    font-weight: 700;
    color: #000080;
    background: #f3f3f3;
}

.ebay-seller-name {
    font-size: 15px;
    font-weight: 700;
    color: #000080;
}

.ebay-seller-fb {
    margin-top: 4px;
    font-size: 11px;
    color: #444;
}

.ebay-listing-image img {
    display: block;
    max-width: 100%;
    margin-top: 8px;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    background: #f7f7f7;
}

.ebay-description {
    line-height: 1.45;
}

@media (max-width: 900px) {
    .product-catalog-hero,
    .product-head,
    .product-layout {
        display: block;
    }

    .product-catalog-stats {
        margin-top: 10px;
    }

    .product-sidebar {
        width: auto;
        min-width: 0;
        border-right: 0;
        border-bottom: 2px solid #808080;
        margin: 4px 4px 0;
    }

    .product-article {
        margin-top: 0;
    }
}

.long-copy h3:first-child { margin-top: 0; }

.long-copy ul {
    padding-left: 20px;
    margin: 4px 0;
}

.long-copy li { margin: 2px 0; }

.ref-links {
    margin: 8px 0;
}

.ref-links h4 {
    font-size: 12px;
    margin: 0 0 4px;
}

.ref-links ul {
    padding-left: 20px;
    margin: 0;
}

.ref-links a { color: #0046ce; }
.ref-links a:hover { color: #001b4f; }

/* Image strip / thumbnails */
.product-image-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.product-thumb {
    display: inline-block;
    width: 74px;
    height: 58px;
    overflow: hidden;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
}

.product-thumb.active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Comment section ---- */
.comment-shell {
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    background: #fff;
    padding: 8px;
    margin: 8px 0;
}

.comment-shell h4 {
    font-size: 12px;
    margin: 0 0 6px;
}

.comment-item {
    background: #f5f5f5;
    border: 1px solid #b0b0b0;
    padding: 6px;
    margin: 4px 0;
    font-size: 12px;
}

.comment-item strong { color: #000080; }
.comment-item small { color: #666; }
.comment-item p { margin: 4px 0 0; }

.comment-form {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.comment-form label {
    display: grid;
    gap: 3px;
    font-size: 12px;
}

.comment-form input,
.comment-form textarea {
    font-family: "Webtop", "MS Sans Serif", sans-serif;
    font-size: 12px;
    padding: 2px 4px;
    border: none;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000, inset -2px -2px 0 #dfdfdf;
    background: #fff;
}

/* ================================================================
   Mail Client
   ================================================================ */
.mail-window {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 6px;
    height: 100%;
}

.mail-toolbar {
    display: flex;
    gap: 4px;
}

.mail-layout {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 7px;
    overflow: hidden;
}

.mail-folders {
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
    padding: 4px;
    background: #c0c0c0;
    background: var(--ui-bg);
}

.mail-folder {
    text-decoration: none;
    font-size: 11px;
    text-align: left;
    padding: 3px 6px;
}

.mail-folder.active {
    background: #d9e8ff;
}

.mail-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: auto;
}

.mail-list {
    list-style: none;
    padding: 0;
    background: #fff;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
    overflow-y: auto;
    max-height: 120px;
}

.mail-item {
    display: block;
    padding: 4px 6px;
    font-size: 12px;
    text-decoration: none;
    color: #000;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
}

.mail-item:hover {
    background: #d9e8ff;
}

.mail-item.selected {
    background: #000080;
    color: #fff;
}

.mail-preview {
    background: #fff;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
    padding: 6px;
    overflow-y: auto;
    font-size: 12px;
    flex: 1;
}

.mail-preview h3 {
    font-size: 13px;
    margin: 0 0 4px;
}

.mail-preview pre {
    font-family: "Fixedsys", "Lucida Console", "Courier New", monospace;
    font-size: 12px;
    white-space: pre-wrap;
    margin: 6px 0 0;
}

.mail-compose {
    background: #fff;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
    padding: 8px;
}

.mail-compose label {
    display: grid;
    gap: 3px;
    font-size: 12px;
    margin: 4px 0;
}

.mail-compose input,
.mail-compose textarea {
    font-family: "Webtop", "MS Sans Serif", sans-serif;
    font-size: 12px;
    padding: 2px 4px;
    border: none;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000, inset -2px -2px 0 #dfdfdf;
    background: #fff;
}

/* ================================================================
   Command Shell (DOS Prompt)
   ================================================================ */
.shell-screen {
    background: #000;
    color: #c0c0c0;
    padding: 4px 6px;
    font-family: "Fixedsys", "Lucida Console", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.25;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000, inset -2px -2px 0 #dfdfdf;
    overflow-y: auto;
    min-height: 200px;
    max-height: 300px;
}

.shell-screen pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.shell-input {
    margin-top: 6px;
}

.shell-line {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px;
    align-items: center;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 12px;
}

.shell-line label {
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}

.shell-line input {
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 12px;
    padding: 1px 4px;
    border: none;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000;
    background: #fff;
}

/* ================================================================
   Control Panel (Windows NT 4.0 — icon view + property-sheet row)
   ================================================================ */
.cp-nt-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    gap: 0;
}

.cp-intro {
    font-family: "Webtop", "MS Sans Serif", "Tahoma", "Geneva", sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #000;
    margin: 0 0 6px;
    padding: 6px 9px;
    background: #c0c0c0;
    background: var(--ui-bg);
    border: 1px solid;
    border-color: #dfdfdf #404040 #404040 #dfdfdf;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}

.cp-intro strong {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10px;
    color: #000080;
    color: var(--title-a, #000080);
}

.cp-rule {
    height: 0;
    margin: 0 0 7px;
    border: none;
    border-top: 1px solid #808080;
    box-shadow: 0 1px 0 #fff;
}

.cp-theme-hint {
    margin: 8px 0 0;
    font-size: 10px;
    line-height: 1.35;
    color: #404040;
    max-width: 340px;
}

.control-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: 12px 14px;
    align-content: start;
    justify-items: stretch;
    padding: 11px 13px 14px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: #c0c0c0;
    background: var(--ui-bg);
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
}

.cp-applet {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    padding: 7px 5px 9px;
    min-height: 118px;
    border: 1px solid transparent;
    border-radius: 0;
    text-decoration: none;
    color: inherit;
}

.cp-applet:hover {
    border: 1px dotted #000080;
    background: rgba(0, 0, 128, 0.07);
}

.cp-applet:active {
    border: 1px dotted #000080;
    background: rgba(0, 0, 128, 0.12);
}

.cp-applet-icon .icon-art {
    width: 40px;
    height: 40px;
    filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.4));
}

.cp-applet-body {
    width: 100%;
    min-width: 0;
    font-size: 11px;
    line-height: 1.35;
    color: #000;
}

.cp-applet-body h3 {
    font-size: 11px;
    font-weight: 700;
    margin: 0 0 4px;
    letter-spacing: 0.02em;
}

.cp-applet:not(.cp-applet-wide) .cp-applet-body h3 {
    text-align: center;
    width: 100%;
}

.cp-applet-body p {
    margin: 0;
    text-align: left;
    font-size: 11px;
    line-height: 1.4;
}

.cp-applet-wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    text-align: left;
    min-height: 0;
    padding: 8px 12px 10px;
    gap: 14px;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    background: #d4d0c8;
    background: var(--ui-face);
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040;
}

.cp-applet-wide:hover,
.cp-applet-wide:active {
    border-color: #fff #808080 #808080 #fff;
    background: #d4d0c8;
    background: var(--ui-face);
}

.cp-applet-wide .cp-applet-icon {
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 3px;
}

.cp-applet-wide .cp-applet-body {
    flex: 1;
    min-width: 0;
}

.cp-applet-wide .cp-applet-body h3 {
    margin-bottom: 5px;
}

.cp-theme-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
}

.cp-theme-form .toggle-line {
    flex: 1 1 200px;
    min-width: 160px;
    margin: 0;
}

.cp-theme-form .w95-btn {
    margin-top: 0;
    flex-shrink: 0;
}

.cp-link-primary {
    display: inline-block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: underline;
    color: #0000cc;
}

.cp-link-primary:hover {
    color: #000080;
}

.cp-link-primary:active {
    color: #000040;
}

.toggle-line {
    display: grid;
    gap: 4px;
    font-size: 11px;
    max-width: 320px;
}

.toggle-line select {
    font-family: "Webtop", "MS Sans Serif", sans-serif;
    font-size: 12px;
    padding: 2px 4px;
    border: none;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000, inset -2px -2px 0 #dfdfdf;
    background: #fff;
}

.cp-applet:not(.cp-applet-wide) .w95-btn {
    margin-top: 6px;
}

/* ================================================================
   Mouse Control Panel
   ================================================================ */
.mouse-panel {
    display: grid;
    gap: 10px;
    padding: 10px;
    min-height: 100%;
    background: var(--ui-bg);
}

.mouse-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--ui-face);
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040;
}

.mouse-header .icon-art {
    width: 40px;
    height: 40px;
    background-size: 40px 40px;
}

.mouse-header h3 {
    margin: 0 0 3px;
    font-size: 14px;
}

.mouse-header p {
    margin: 0;
    font-size: 11px;
}

.mouse-group {
    margin: 0;
}

.mouse-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
    gap: 6px;
}

.mouse-choice {
    display: grid;
    gap: 3px;
    min-height: 50px;
    padding: 7px;
    color: #000;
    text-decoration: none;
    background: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
}

.mouse-choice:hover,
.mouse-choice.selected {
    color: #fff;
    background: #000080;
}

.mouse-choice-name {
    font-weight: 700;
    font-size: 11px;
}

.mouse-choice-note {
    font-size: 10px;
    line-height: 13px;
}

.mouse-preview-row {
    display: grid;
    grid-template-columns: minmax(220px, 290px) 1fr;
    gap: 10px;
    align-items: stretch;
}

.mouse-cursor-preview {
    min-height: 144px;
}

.mouse-status-list {
    padding: 8px;
    font-size: 11px;
    background: var(--ui-face);
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
}

.mouse-status-list h4 {
    margin: 0 0 6px;
    font-size: 12px;
}

.mouse-status-list p {
    margin: 4px 0;
}

/* ================================================================
   ELKS Encyclopedia
   ================================================================ */
.encyclopedia-window {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 7px;
    height: 100%;
}

.ency-topbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.ency-layout {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 8px;
    overflow: hidden;
    min-height: 0;
}

.ency-sidebar {
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
    background: #c0c0c0;
    background: var(--ui-bg);
    padding: 4px;
    overflow-y: auto;
}

.ency-sidebar .w95-btn {
    text-align: left;
    font-size: 11px;
    padding: 3px 6px;
}

.ency-sidebar .w95-btn.active {
    background: #d9e8ff;
}

.ency-article {
    background: #fff;
    padding: 8px;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.45;
}

.ency-article h2 { font-size: 16px; margin: 0 0 8px; color: #000; }
.ency-article h3 { font-size: 13px; margin: 12px 0 4px; color: #000080; }
.ency-article h4 { font-size: 12px; font-weight: bold; margin: 8px 0 4px; }

.ency-article p { margin: 4px 0; }

.ency-article a { color: #0046ce; }
.ency-article a:hover { color: #001b4f; }

.ency-article ul, .ency-article ol { padding-left: 20px; margin: 4px 0; }
.ency-article li { margin: 2px 0; }

.ency-article pre {
    background: #000;
    color: #c0c0c0;
    font-size: 11px;
    padding: 6px;
    overflow-x: auto;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000;
    line-height: 1.3;
    margin: 6px 0;
}

.ency-article code {
    background: #e8e8e8;
    border: 1px solid #b0b0b0;
    padding: 1px 3px;
    font-size: 11px;
}

.ency-article pre code {
    background: none;
    border: none;
    padding: 0;
}

.ency-article table {
    border-collapse: collapse;
    margin: 6px 0;
    width: 100%;
    font-size: 12px;
}

.ency-article th, .ency-article td {
    border: 1px solid #808080;
    padding: 3px 6px;
    text-align: left;
}

.ency-article th {
    background: #c0c0c0;
    background: var(--ui-bg);
    font-weight: bold;
}

.ency-article td {
    background: #fff;
}

/* Live embeds (content tab files — media.ccc.de allowlist) */
.ency-live-stack {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ency-live-event {
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    background: var(--ui-bg, #c0c0c0);
    padding: 8px;
}

.ency-live-event-cap {
    font-weight: bold;
    color: var(--title-a, #000080);
    font-size: 12px;
    margin: 0 0 8px;
}

.ency-live-frame-wrap {
    position: relative;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    background: #000;
    border: 2px inset #808080;
    aspect-ratio: 16 / 9;
}

.ency-live-frame-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ency-live-foot {
    margin: 8px 0 0;
    font-size: 11px;
}

/* Metadata cards */
.ency-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 6px;
    margin: 8px 0;
}

.ency-meta-card {
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    background: #c0c0c0;
    background: var(--ui-bg);
    padding: 6px;
    text-align: center;
}

.ency-meta-val {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #000080;
}

.ency-meta-label {
    display: block;
    font-size: 10px;
    color: #555;
    text-transform: uppercase;
    margin-top: 2px;
}

/* ================================================================
   mIRC Client — Windows 95 era palette
   ================================================================ */

#win-mirc-clone-irc .window-titlebar {
    background: linear-gradient(90deg, #0a4c8a, #1f73b7);
}
#win-mirc-clone-irc .window-titlebar.inactive {
    background: linear-gradient(90deg, #7b8da1, #9fb1c2);
}

/* mIRC window: remove padding from window-content, hide outer statusbar */
.irc-content {
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
}
.irc-content + .window-statusbar {
    display: none;
}

/* Main IRC window container */
.irc-window {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #c0c0c0;
    font-family: "Webtop", "MS Sans Serif", "Tahoma", sans-serif;
    font-size: 12px;
}

/* IRC menubar */
.irc-menubar {
    display: flex;
    align-items: center;
    gap: 0;
    height: 22px;
    padding: 0 2px;
    font-size: 12px;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    color: #000;
    flex-shrink: 0;
}

.irc-menu-item {
    position: relative;
}

.irc-menubar .menu-btn {
    padding: 2px 8px;
    cursor: default;
    font-size: 12px;
}

.irc-menubar .menu-btn:hover {
    background: #000080;
    color: #fff;
}

/* IRC dropdown menus — position:fixed to escape overflow:hidden */
.irc-dropdown {
    display: none;
    position: fixed;
    background: #c0c0c0;
    border: 1px solid #808080;
    min-width: 220px;
    z-index: 9000;
    padding: 3px 0;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.22);
}

.irc-menu-item:hover > .irc-dropdown,
.irc-menu-item:focus-within > .irc-dropdown,
.irc-menu-item.open > .irc-dropdown {
    display: block;
}

.irc-menu-item.open > .menu-btn {
    background: #000080;
    color: #fff;
}

.irc-dd-item {
    display: block;
    padding: 3px 28px 3px 24px;
    cursor: default;
    white-space: nowrap;
    text-decoration: none;
    color: #000;
    font-size: 12px;
    position: relative;
}

.irc-dd-item:hover {
    background: #000080;
    color: #fff;
}

.irc-dd-item.dd-disabled {
    color: #808080;
}

.irc-dd-item.dd-disabled:hover {
    background: transparent;
    color: #808080;
}

.irc-dd-item.dd-active {
    font-weight: 700;
}

.irc-dd-item.dd-check::before {
    position: absolute;
    left: 6px;
}

.dd-sep {
    height: 1px;
    background: #c0c0c0;
    margin: 3px 4px;
}

.dd-accel {
    float: right;
    margin-left: 24px;
    color: #808080;
    font-size: 11px;
}

.irc-dd-item:hover .dd-accel {
    color: #d0d0d0;
}

/* IRC toolbar */
.irc-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    height: 28px;
    background: #d4d0c8;
    border-bottom: 1px solid #808080;
    flex-shrink: 0;
}

.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 4px;
    font-size: 13px;
    text-decoration: none;
    color: #333;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
}

.tb-btn:hover {
    background: #fff;
    border-color: #808080;
}

.tb-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: #c0c0c0;
    margin: 0 3px;
}

.tb-label {
    font-size: 11px;
    color: #000;
    margin-left: auto;
    padding-right: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* IRC connection info bar */
.irc-conninfo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    height: 22px;
    font-size: 11px;
    background: #d4d0c8;
    border-bottom: 1px solid #808080;
    flex-shrink: 0;
    overflow: hidden;
}

.conn-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #808080;
    flex-shrink: 0;
}

.conn-dot.connected { background: #0a7a0a; }
.conn-dot.connecting { background: #d2a000; }
.conn-dot.reconnecting { background: #a05a00; animation: cursor-blink 1s infinite; }
.conn-dot.disconnected { background: #cc0000; }

.conn-server { font-weight: 700; color: #000080; }
.conn-channel { font-weight: 700; color: #4e9a06; }
.conn-nick { font-weight: 700; color: #800000; }

/* IRC topic bar */
.irc-topic {
    padding: 3px 8px;
    font-size: 11px;
    background: #ffffc6;
    border: 1px solid #808080;
    border-left: none;
    border-right: none;
    color: #000;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 20px;
}

/* IRC main layout: channels | messages | users */
.irc-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Channel list (left sidebar) */
.irc-channels {
    width: 130px;
    min-width: 90px;
    background: #d4d0c8;
    border-right: 1px solid #808080;
    overflow-y: auto;
    flex-shrink: 0;
    font-size: 11px;
    user-select: none;
    -webkit-user-select: none;
}

.irc-chan-item {
    padding: 4px 6px 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #b0b0b0;
    color: #000;
    transition: background 0.08s, color 0.08s;
}

.irc-chan-item:hover {
    background: #fff;
}

.irc-chan-item.active {
    background: #000080;
    color: #fff;
    font-weight: 700;
}

.irc-chan-item.active:hover {
    background: #000070;
}

/* Server item (non-selectable header) */
.irc-chan-server {
    font-size: 10px;
    color: #000080;
    font-weight: 700;
    background: #c0c0c0;
    cursor: default;
    border-bottom: 1px solid #808080;
}

.irc-chan-server:hover {
    background: #c0c0c0;
}

/* Messages iframe (center) */
.irc-messages-frame {
    flex: 1;
    min-width: 0;
    border: none;
    background: #fff;
}

/* User list (right sidebar) */
.irc-users {
    width: 130px;
    min-width: 90px;
    background: #d4d0c8;
    border-left: 1px solid #808080;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    font-size: 11px;
}

.irc-users-hdr {
    padding: 3px 6px;
    font-weight: 700;
    font-size: 11px;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    flex-shrink: 0;
    color: #000;
}

.irc-users-iframe {
    flex: 1;
    border: none;
    min-height: 0;
}

/* IRC input form (bottom) */
.irc-input-form {
    display: flex;
    gap: 4px;
    padding: 4px 6px;
    background: #d4d0c8;
    border-top: 1px solid #808080;
    flex-shrink: 0;
    align-items: center;
}

.irc-input-field {
    flex: 1;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 12px;
    padding: 2px 6px;
    height: 22px;
    border: 1px solid #808080;
    background: #fff;
    box-shadow: inset 1px 1px 0 #c0c0c0;
}

.irc-input-field:focus {
    outline: none;
    border-color: #000080;
}

/* IRC status bar (bottom) */
.irc-statusbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    height: 20px;
    font-size: 10px;
    background: #c0c0c0;
    border-top: 1px solid #808080;
    color: #000;
    flex-shrink: 0;
}

.status-lag { color: #4e9a06; }
.status-mode { color: #000080; }
.status-enc { color: #404040; }

/* IRC startup / connect screen */
.irc-startup {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: linear-gradient(180deg, #ece9d8 0%, #d4d0c8 100%);
}

.irc-startup-title {
    font-size: 16px;
    font-weight: 700;
    color: #000080;
    padding: 12px 12px 4px;
    border-bottom: 1px solid #808080;
}

/* IRC nick indicator (input form) */
.irc-nick-indicator {
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;
    color: #000080;
    padding: 2px 4px;
    white-space: nowrap;
    flex-shrink: 0;
    background: #d4d0c8;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #fff;
    min-width: 40px;
    text-align: center;
}

/* IRC tree-view channel list */
.tree-exp {
    font-size: 8px;
    color: #000;
    margin-right: 2px;
}

.tree-branch {
    font-size: 11px;
    color: #808080;
    margin-right: 1px;
    font-family: monospace;
}

.tree-chan-icon {
    color: #4e9a06;
    font-weight: 700;
    font-size: 10px;
}

.irc-chan-channel {
    padding-left: 18px;
}

/* IRC Ops admin menu button */
.irc-ops-btn {
    color: #800000 !important;
    font-weight: 700;
}

/* IRC status bar cells — sunken borders like mIRC */
.irc-statusbar > span {
    padding: 0 6px;
    border-left: 1px solid #808080;
    border-right: 1px solid #fff;
}

.irc-statusbar > span:first-child {
    border-left: none;
}

/* IRC dropdown separator — etched line */
.dd-sep {
    height: 0;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
    margin: 3px 4px;
}

/* W95 input field style (shared) */
.w95-input {
    font-family: "Webtop", "MS Sans Serif", sans-serif;
    font-size: 12px;
    padding: 2px 6px;
    height: 22px;
    border: none;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000;
    background: #fff;
}

/* ================================================================
   Display Properties (NT 4.0 tab dialog + CRT preview)
   ================================================================ */
.display-props-window {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 6px 8px 8px;
    height: 100%;
    box-sizing: border-box;
}

.display-tab-strip {
    background: linear-gradient(180deg, #d8d4d0 0%, #c0c0c0 55%, #b8b4b0 100%);
    background: linear-gradient(180deg, var(--ui-face, #d4d0c8) 0%, var(--ui-bg, #c0c0c0) 55%, #b8b4b0 100%);
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 5px 5px 0;
    margin-bottom: 0;
    box-shadow: inset 1px 1px 0 #dfdfdf;
}

.display-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 2px;
    align-items: flex-end;
    z-index: 1;
}

.display-tab {
    display: inline-block;
    padding: 3px 11px 4px;
    font-size: 11px;
    font-family: "Webtop", "MS Sans Serif", "Tahoma", "Geneva", sans-serif;
    text-decoration: none;
    color: #000;
    background: #c0c0c0;
    background: var(--ui-bg);
    border: 1px solid;
    border-color: #808080 #fff #b8b4b0 #808080;
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    cursor: pointer;
    position: relative;
    top: 1px;
    margin-right: 0;
    box-shadow: inset 1px 1px 0 #fff;
}

.display-tab:hover {
    background: #d4d0c8;
    background: var(--ui-face);
}

.display-tab.active {
    border-color: #fff #404040 #c0c0c0 #fff;
    border-color: #fff #404040 var(--silver) #fff;
    top: 0;
    padding-bottom: 5px;
    z-index: 2;
    font-weight: 700;
    background: #c0c0c0;
    background: var(--silver);
    box-shadow: none;
    margin-bottom: -1px;
}

.display-tab:focus-visible {
    outline: 1px dotted #000;
    outline-offset: 1px;
    z-index: 3;
}

.display-panel {
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    background: #c0c0c0;
    background: var(--silver);
    padding: 12px 14px 14px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040;
    margin-top: -1px;
}

.dp-page-split {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1.15fr);
    gap: 14px 18px;
    align-items: start;
}

@media (max-width: 520px) {
    .dp-page-split {
        grid-template-columns: 1fr;
    }
}

.dp-page-split .display-preview {
    margin-left: auto;
    margin-right: auto;
}

.dp-split-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.dp-page-split .dp-split-col .dp-fieldset {
    margin-bottom: 10px;
}

.dp-page-split .dp-split-col .dp-fieldset:last-child {
    margin-bottom: 0;
}

/* Appearance tab — miniature “desktop” icon strip */
.dp-illus-appear {
    margin: 0 auto;
    width: 100%;
    max-width: 268px;
    text-align: center;
}

.dp-illus-cap {
    font-size: 11px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #000;
}

.dp-illus-desk {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    min-height: 102px;
    padding: 14px 12px 18px;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
    background: #008080;
}

.dp-illus-desk.dp-illus-large {
    gap: 18px;
}

.dp-illus-ico {
    display: block;
    flex-shrink: 0;
    background: linear-gradient(180deg, #f0f0f0, #b0b0b0);
    border: 1px solid;
    border-color: #fff #404040 #404040 #fff;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
}

.dp-illus-small .dp-illus-ico {
    width: 14px;
    height: 14px;
}

.dp-illus-large .dp-illus-ico {
    width: 28px;
    height: 28px;
}

.dp-illus-desk.theme-nt4-classic {
    background: linear-gradient(180deg, #0b6f6a 0%, #08726d 45%, #045b56 100%);
}

.dp-illus-desk.theme-hacker-green {
    background: linear-gradient(180deg, #011901 0%, #032703 42%, #001100 100%);
}

.dp-illus-desk.theme-amber-terminal {
    background: linear-gradient(180deg, #221103 0%, #3d2208 50%, #140900 100%);
}

.dp-illus-desk.theme-night-ops {
    background: linear-gradient(180deg, #060b16 0%, #0f1730 48%, #070c1d 100%);
}

.dp-cursor-preview {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 248px;
    min-height: 154px;
    padding: 18px;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    background: #008080;
    box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
}

.dp-cursor-sample-label {
    display: inline-block;
    margin-top: 0;
    padding: 3px 8px;
    color: #fff;
    background: #000080;
    border: 1px dotted #fff;
    text-shadow: none;
}

.display-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(248px, 100%);
    height: 182px;
    margin: 0 auto 14px;
    padding: 15px 17px 22px;
    background: linear-gradient(165deg, #dedad4 0%, #b0aca2 35%, #8f8b82 100%);
    border: 2px solid;
    border-color: #fff #4a4840 #2a2820 #e8e4dc;
    border-radius: 4px 4px 11px 11px;
    box-shadow:
        inset 2px 2px 5px rgba(255, 255, 255, 0.5),
        inset -3px -5px 10px rgba(0, 0, 0, 0.2),
        2px 4px 12px rgba(0, 0, 0, 0.38);
    position: relative;
}

.display-preview::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 5px;
    border-radius: 2px;
    background: linear-gradient(180deg, #2a2a28, #0a0a08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.dp-monitor {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 204px;
    padding: 8px 9px 9px;
    background: linear-gradient(180deg, #3a3a38 0%, #1c1c1a 55%, #0e0e0c 100%);
    border: 1px solid #000;
    border-radius: 3px;
    box-shadow:
        inset 0 3px 10px rgba(0, 0, 0, 0.85),
        0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
}

.dp-monitor::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 8px;
    right: 8px;
    height: 14px;
    border-radius: 2px 2px 40% 40% / 8px 8px 12px 12px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.02) 55%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

.dp-monitor-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding-top: 7px;
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.dp-monitor-brand {
    font-size: 9px;
    font-family: "Webtop", "MS Sans Serif", "Tahoma", "Geneva", sans-serif;
    letter-spacing: 0.14em;
    color: #7a7a76;
    text-transform: uppercase;
    user-select: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
}

@keyframes dp-led-soft {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        opacity: 0.72;
        filter: brightness(0.88);
    }
}

.dp-monitor-footer::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ff9090, #600000 72%);
    box-shadow: 0 0 4px rgba(255, 40, 40, 0.55);
    animation: dp-led-soft 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .dp-monitor-footer::after {
        animation: none;
    }
}

.dp-screen {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 90px;
    background: #008080;
    border: 2px solid #0a0a0a;
    border-radius: 2px;
    box-shadow:
        inset 0 0 0 1px #2a2a2a,
        inset 0 0 28px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.dp-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.11;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0.55) 0%,
        transparent 40%,
        transparent 100%
    );
}

.dp-screen.show-scanlines::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.24) 0,
        rgba(0, 0, 0, 0.24) 1px,
        transparent 1px,
        transparent 3px
    );
}

.dp-screen.show-glow {
    box-shadow:
        inset 0 0 0 1px #2a2a2a,
        inset 0 0 28px rgba(0, 0, 0, 0.5),
        inset 0 0 52px rgba(0, 255, 128, 0.14);
}

.dp-screen.theme-nt4-classic {
    background: linear-gradient(180deg, #0b6f6a 0%, #08726d 45%, #045b56 100%);
}

.dp-screen.theme-hacker-green {
    background: linear-gradient(180deg, #011901 0%, #032703 42%, #001100 100%);
}

.dp-screen.theme-amber-terminal {
    background: linear-gradient(180deg, #221103 0%, #3d2208 50%, #140900 100%);
}

.dp-screen.theme-night-ops {
    background: linear-gradient(180deg, #060b16 0%, #0f1730 48%, #070c1d 100%);
}

.display-preview.screensaver-preview {
    background: linear-gradient(165deg, #2e2e2c 0%, #1a1a18 45%, #10100e 100%);
    border-color: #5a5850 #0a0a08 #000 #7a7870;
    box-shadow:
        inset 2px 2px 4px rgba(255, 255, 255, 0.12),
        inset -4px -6px 12px rgba(0, 0, 0, 0.55),
        2px 4px 12px rgba(0, 0, 0, 0.45);
}

.display-preview.screensaver-preview::after {
    background: linear-gradient(180deg, #1a1a18, #000);
    box-shadow: none;
}

.screensaver-preview {
    background: radial-gradient(ellipse at 50% 42%, #1e1e28 0%, #000010 55%, #000 100%);
    border: 2px solid;
    border-color: #101010 #3a3a40 #4a4a50 #080808;
    width: min(248px, 100%);
    height: 182px;
    margin: 0 auto 14px;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9);
}

.dp-fieldset {
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 10px 12px 12px;
    margin: 0 0 12px;
    background: #c0c0c0;
    background: var(--ui-bg);
    font-size: 11px;
    box-shadow: inset 1px 1px 0 #dfdfdf;
}

.dp-fieldset legend {
    font-family: "Webtop", "MS Sans Serif", "Tahoma", "Geneva", sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 0 4px;
    color: #000;
}

.dp-fieldset .dp-field-note {
    margin: 6px 0 0;
    line-height: 1.4;
}

.dp-fieldset .dp-field-note:first-of-type {
    margin-top: 8px;
}

.dp-fieldset-subtle {
    opacity: 0.98;
}

.dp-fieldset-subtle legend {
    font-weight: 600;
    color: #202020;
}

.dp-wait-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 10px 0 4px;
}

.dp-wait-label {
    min-width: 3.5em;
}

.dp-wait-spin {
    display: inline-block;
    min-width: 2.5em;
    padding: 2px 8px;
    text-align: right;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 11px;
    color: #000;
    background: #fff;
    border: none;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000;
    user-select: none;
}

.dp-wait-suffix {
    font-size: 11px;
    color: #000;
}

.dp-listbox {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 140px;
    overflow-y: auto;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    background: #fff;
    box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
}

.dp-listbox-item {
    display: block;
    padding: 3px 8px;
    font-size: 11px;
    text-decoration: none;
    color: #000;
    border: 1px dotted transparent;
}

.dp-listbox-item:hover {
    background: #000080;
    color: #fff;
}

.dp-listbox-item.selected {
    background: #000080;
    color: #fff;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.35);
}

.dp-listbox-item.dp-listbox-dummy {
    color: #555;
    cursor: default;
    pointer-events: none;
}

.dp-listbox-item.selected.dp-listbox-dummy {
    background: #000080;
    color: #fff;
}

.dp-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 11px;
    text-decoration: none;
    color: #000;
    cursor: pointer;
    border-radius: 1px;
}

.dp-checkbox:focus-visible {
    outline: 1px dotted #000;
    outline-offset: 2px;
}

.dp-checkmark {
    display: inline-block;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid;
    border-color: #808080 #fff #fff #808080;
    box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
    position: relative;
}

.dp-checkmark.checked::after {
    content: "\2713";
    position: absolute;
    left: 1px;
    top: -2px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    color: #000;
}

.dp-bright-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.dp-bright-btns .w95-btn.active {
    background: #bfcddb;
    font-weight: 700;
}

.dp-toggle-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.dp-label {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.w95-btn.dp-default {
    border-width: 2px;
    box-shadow:
        inset 1px 1px 0 #fff,
        0 0 0 1px #000;
}

.display-props-window .dp-dialog-btn u {
    text-decoration: underline;
    font-weight: inherit;
    text-underline-offset: 1px;
}

.display-props-window .dp-dialog-btn:focus-visible {
    outline: 1px dotted #000;
    outline-offset: 2px;
}

/* ================================================================
   Desktop Watermark
   ================================================================ */
.desktop-watermark {
    position: fixed;
    right: 16px;
    bottom: 40px;
    bottom: calc(var(--taskbar-h) + 12px);
    font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, sans-serif;
    font-size: 15px;
    color: rgba(255,255,255,0.22);
    pointer-events: none;
    z-index: 0;
    user-select: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    letter-spacing: 0.5px;
}

/* ================================================================
   Auth Page (NT 4.0 GINA-style logon screen)
   ================================================================ */
.auth-page {
    background: #000080;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.auth-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-dialog .app-window {
    position: relative;
    min-width: 420px;
    max-width: 440px;
    min-height: auto;
    max-height: none;
    z-index: 1;
}

/* Dialog button row (shared: auth, display properties, shutdown) */
.dp-button-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0;
}

.display-props-window .dp-button-row {
    padding: 10px 2px 2px;
    margin-top: 4px;
    border-top: 1px solid #808080;
    box-shadow: inset 0 1px 0 #fff;
}

.dp-dialog-btn {
    min-width: 75px;
    height: 23px;
    padding: 4px 12px;
    text-align: center;
    font-size: 11px;
    line-height: 13px;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
}

/* ================================================================
   Shutdown / Logoff Dialog (NT 4.0 style)
   ================================================================ */
.shutdown-body {
    background: #000080;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

/* "It is now safe to turn off" screen (after actual shutdown) */
.shutdown-safe-screen {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.shutdown-safe-text {
    text-align: center;
    color: #ff8c00;
    font-size: 20px;
    font-weight: bold;
    font-family: "Webtop", "MS Sans Serif", sans-serif;
}

.shutdown-safe-text .restart-link {
    margin-top: 30px;
    font-size: 14px;
}

.shutdown-safe-text .restart-link a {
    color: #56ff56;
    text-decoration: underline;
}

/* Shutdown dialog window */
.shutdown-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shutdown-dialog .app-window {
    position: relative;
    min-width: 380px;
    max-width: 420px;
    min-height: auto;
    max-height: none;
    z-index: 1;
}

/* Radio button group for shutdown options */
.shutdown-options {
    margin: 8px 0 12px 28px;
}

.shutdown-options label {
    display: block;
    padding: 3px 0;
    cursor: pointer;
    font-size: 12px;
}

.shutdown-options input[type="radio"] {
    margin-right: 6px;
    vertical-align: middle;
}

/* Logoff confirmation dialog */
.logoff-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logoff-dialog .app-window {
    position: relative;
    min-width: 340px;
    max-width: 400px;
    min-height: auto;
    max-height: none;
    z-index: 1;
}

/* ================================================================
   Misc Utility
   ================================================================ */
.lead {
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 8px;
}

.bullet-log {
    padding-left: 20px;
    margin: 0 0 10px;
}

.bullet-log li {
    margin: 3px 0;
    font-size: 12px;
}

.button-row {
    display: flex;
    gap: 6px;
    margin: 8px 0;
}

.fine-note {
    font-size: 11px;
    color: #555;
    margin: 4px 0;
}

/* ================================================================
   Mission Control (Welcome)
   ================================================================ */
.welcome-banner {
    margin: -8px -8px 10px;
    padding: 10px 12px;
    color: #fff;
    background: linear-gradient(90deg, #000080 0%, #0b4fa3 55%, #2a8ccf 100%);
    border-bottom: 1px solid #000;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}

.welcome-logo {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.1;
}

.welcome-logo span {
    font-weight: 400;
    opacity: 0.95;
}

.welcome-tagline {
    margin-top: 3px;
    font-size: 12px;
    opacity: 0.95;
}

/* ================================================================
   Standard .cur Pointer Framework
   ================================================================ */
body.desktop-windows,
.dp-cursor-preview {
    --cursor-arrow-img: url("/assets/cursors/nt4-arrow.cur");
    --cursor-hand-img: url("/assets/cursors/nt4-hand.cur");
    --cursor-text-img: url("/assets/cursors/nt4-ibeam.cur");
    --cursor-move-img: url("/assets/cursors/nt4-move.cur");
    --cursor-resize-ew-img: url("/assets/cursors/nt4-resize-ew.cur");
    --cursor-resize-ns-img: url("/assets/cursors/nt4-resize-ns.cur");
    --cursor-resize-nwse-img: url("/assets/cursors/nt4-resize-nwse.cur");
    --cursor-resize-nesw-img: url("/assets/cursors/nt4-resize-nesw.cur");
    --cursor-wait-img: url("/assets/cursors/nt4-wait.cur");
    --cursor-disabled-img: url("/assets/cursors/nt4-disabled.cur");
    --cursor-arrow: var(--cursor-arrow-img), auto;
    --cursor-hand: var(--cursor-hand-img), pointer;
    --cursor-text: var(--cursor-text-img), text;
    --cursor-move: var(--cursor-move-img), move;
    --cursor-resize-ew: var(--cursor-resize-ew-img), ew-resize;
    --cursor-resize-ns: var(--cursor-resize-ns-img), ns-resize;
    --cursor-resize-nwse: var(--cursor-resize-nwse-img), nwse-resize;
    --cursor-resize-nesw: var(--cursor-resize-nesw-img), nesw-resize;
    --cursor-wait: var(--cursor-wait-img), wait;
    --cursor-disabled: var(--cursor-disabled-img), not-allowed;
}

body.desktop-windows.cursor-system,
body.desktop-windows.cursor-nt4,
.dp-cursor-preview.cursor-system,
.dp-cursor-preview.cursor-nt4 {
    --cursor-arrow-img: url("/assets/cursors/nt4-arrow.cur");
    --cursor-hand-img: url("/assets/cursors/nt4-hand.cur");
    --cursor-text-img: url("/assets/cursors/nt4-ibeam.cur");
    --cursor-move-img: url("/assets/cursors/nt4-move.cur");
    --cursor-resize-ew-img: url("/assets/cursors/nt4-resize-ew.cur");
    --cursor-resize-ns-img: url("/assets/cursors/nt4-resize-ns.cur");
    --cursor-resize-nwse-img: url("/assets/cursors/nt4-resize-nwse.cur");
    --cursor-resize-nesw-img: url("/assets/cursors/nt4-resize-nesw.cur");
    --cursor-wait-img: url("/assets/cursors/nt4-wait.cur");
    --cursor-disabled-img: url("/assets/cursors/nt4-disabled.cur");
}

body.desktop-windows.cursor-large,
.dp-cursor-preview.cursor-large {
    --cursor-arrow-img: url("/assets/cursors/large-arrow.cur");
    --cursor-hand-img: url("/assets/cursors/large-hand.cur");
    --cursor-text-img: url("/assets/cursors/large-ibeam.cur");
    --cursor-move-img: url("/assets/cursors/large-move.cur");
    --cursor-resize-ew-img: url("/assets/cursors/large-resize-ew.cur");
    --cursor-resize-ns-img: url("/assets/cursors/large-resize-ns.cur");
    --cursor-resize-nwse-img: url("/assets/cursors/large-resize-nwse.cur");
    --cursor-resize-nesw-img: url("/assets/cursors/large-resize-nesw.cur");
    --cursor-wait-img: url("/assets/cursors/large-wait.cur");
    --cursor-disabled-img: url("/assets/cursors/large-disabled.cur");
}

body.desktop-windows.cursor-lesson,
.dp-cursor-preview.cursor-lesson {
    --cursor-arrow-img: url("/assets/cursors/lesson-arrow.cur");
    --cursor-hand-img: url("/assets/cursors/lesson-hand.cur");
    --cursor-text-img: url("/assets/cursors/lesson-ibeam.cur");
    --cursor-move-img: url("/assets/cursors/lesson-move.cur");
    --cursor-resize-ew-img: url("/assets/cursors/lesson-resize-ew.cur");
    --cursor-resize-ns-img: url("/assets/cursors/lesson-resize-ns.cur");
    --cursor-resize-nwse-img: url("/assets/cursors/lesson-resize-nwse.cur");
    --cursor-resize-nesw-img: url("/assets/cursors/lesson-resize-nesw.cur");
    --cursor-wait-img: url("/assets/cursors/lesson-wait.cur");
    --cursor-disabled-img: url("/assets/cursors/lesson-disabled.cur");
}

body.desktop-windows,
body.desktop-windows .desktop-shell,
body.desktop-windows .desktop-area,
body.desktop-windows .window-layer,
body.desktop-windows .app-window,
body.desktop-windows .window-content,
body.desktop-windows .display-panel,
.dp-cursor-preview {
    cursor: var(--cursor-arrow);
}

body.desktop-windows a,
body.desktop-windows button,
body.desktop-windows input[type="submit"],
body.desktop-windows input[type="button"],
body.desktop-windows input[type="reset"],
body.desktop-windows input[type="checkbox"],
body.desktop-windows input[type="radio"],
body.desktop-windows select,
body.desktop-windows .desktop-icon,
body.desktop-windows .display-tab,
body.desktop-windows .dp-checkbox,
body.desktop-windows .dp-listbox-item,
body.desktop-windows .menu-btn,
body.desktop-windows .menu-dd-item,
body.desktop-windows .wc-btn,
body.desktop-windows .w95-btn,
body.desktop-windows .mouse-choice,
body.desktop-windows .task-btn,
body.desktop-windows .ql-btn,
body.desktop-windows .start-button {
    cursor: var(--cursor-hand);
}

body.desktop-windows input[type="text"],
body.desktop-windows input[type="password"],
body.desktop-windows input[type="email"],
body.desktop-windows input[type="search"],
body.desktop-windows input[type="number"],
body.desktop-windows input[type="url"],
body.desktop-windows textarea {
    cursor: var(--cursor-text);
}

body.desktop-windows .window-titlebar {
    cursor: var(--cursor-move);
}

body.desktop-windows .app-window[aria-busy="true"],
body.desktop-windows .waiting,
body.desktop-windows .busy {
    cursor: var(--cursor-wait);
}

body.desktop-windows [disabled],
body.desktop-windows .disabled,
body.desktop-windows .ctx-disabled,
body.desktop-windows .menu-dd-item.disabled,
body.desktop-windows .dp-listbox-item.dp-listbox-dummy,
body.desktop-windows .w95-btn[disabled] {
    cursor: var(--cursor-disabled);
}

.dp-cursor-role-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.dp-cursor-role {
    display: grid;
    justify-items: center;
    gap: 4px;
    font-size: 10px;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
}

.dp-cursor-sample {
    display: block;
    width: 32px;
    height: 32px;
    background-position: center;
    background-repeat: no-repeat;
}

.dp-cursor-sample.role-arrow { background-image: var(--cursor-arrow-img); }
.dp-cursor-sample.role-hand { background-image: var(--cursor-hand-img); }
.dp-cursor-sample.role-text { background-image: var(--cursor-text-img); }
.dp-cursor-sample.role-move { background-image: var(--cursor-move-img); }
.dp-cursor-sample.role-resize { background-image: var(--cursor-resize-nwse-img); }
.dp-cursor-sample.role-wait { background-image: var(--cursor-wait-img); }

/* ================================================================
   NT 4.0 Scrollbars (WebKit)
   ================================================================ */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%23c0c0c0'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23c0c0c0'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%23fff'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #000 #000 #fff;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
    min-height: 20px;
}
::-webkit-scrollbar-thumb:active {
    border-color: #000 #fff #fff #000;
}
::-webkit-scrollbar-button { display: block; width: 16px; height: 16px; background: #c0c0c0; border: 2px solid; border-color: #fff #000 #000 #fff; }
::-webkit-scrollbar-corner { background: #c0c0c0; }

/* Firefox scrollbar */
* { scrollbar-color: #c0c0c0 #dfdfdf; scrollbar-width: auto; }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 900px) {
    .desktop-icons {
        height: auto;
        min-height: 200px;
        overflow: visible;
    }
    .window-layer {
        position: relative;
        left: 0;
    }
    .app-window {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-width: none;
        max-height: none;
        margin-bottom: 4px;
        min-height: 200px;
    }
    .desktop-shell {
        height: auto;
        min-height: calc(100vh - 28px);
        overflow-y: auto;
    }
    .explorer-main { grid-template-columns: 1fr; }
    .explorer-sidebar { display: none; }
    .explorer-tree { display: none; }
    .mail-layout { grid-template-columns: 1fr; }
    .mail-folders { flex-direction: row; }
    .mouse-preview-row { grid-template-columns: 1fr; }
    .ency-layout { grid-template-columns: 1fr; }
    .ency-sidebar { flex-direction: row; flex-wrap: wrap; }
    .product-head { grid-template-columns: 1fr; }
    .start-menu { width: calc(100% - 4px); }
}

@media (max-width: 660px) {
    .task-buttons { display: none; }
    .counter-chip { display: none; }
    .start-menu { width: calc(100% - 4px); }
    .start-submenu {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
    }
}

/* ================================================================
   Animations (for modern browsers, degrades gracefully)
   ================================================================ */
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}