/* Windows XP shell — evokes the Luna look with original CSS only.
   Scoped under .xp so the Serious theme is untouched. No Microsoft assets:
   the wallpaper is a CSS gradient and the chrome is drawn. */

.xp, .xp * { font-family: Tahoma, Verdana, "Segoe UI", sans-serif; box-sizing: border-box; }

/* Desktop background. Three user-controlled CSS vars (set from localStorage by raeApplyWallpaper):
   --xp-desktop-color = backdrop colour (solid-colour bg, and the letterbox behind a "Fit" image),
   --xp-wallpaper     = the image layer (url(...), or `none` for a solid colour),
   --xp-wallpaper-size = cover (Fill) | contain (Fit). Defaults reproduce the original Bliss look. */
.xp-desktop {
    position: fixed; inset: 0; overflow: hidden; user-select: none;
    display: flex; flex-direction: column;
    background-color: var(--xp-desktop-color, #5b93c9);
    background-image: var(--xp-wallpaper, url('/images/bliss.jpg'));
    background-size: var(--xp-wallpaper-size, cover);
    background-position: center;
    background-repeat: no-repeat;
}

/* Start-menu wallpaper picker: a grid of little thumbnails inside a cascade submenu. */
.xp-submenu.xp-wallpapers {
    grid-template-columns: repeat(3, 1fr); gap: 6px;
    padding: 8px; width: 300px;
    /* The Wallpaper item sits low in the menu, so open the flyout UPWARD (anchor its bottom to
       the item) and cap the height to the viewport — otherwise it runs off the bottom of the screen. */
    top: auto; bottom: 0; max-height: min(340px, 72vh); overflow-y: auto;
}
/* Override the base `.xp-cat:hover > .xp-submenu { display: block }` (equal-specificity, so
   this must be at least as specific) — show the wallpaper flyout as a grid, not a block. */
.xp-cat:hover > .xp-submenu.xp-wallpapers { display: grid; }
.xp-wp {
    padding: 0; border: 2px solid transparent; border-radius: 4px; background: #fff;
    cursor: pointer; overflow: hidden; display: flex; flex-direction: column;
}
.xp-wp img { width: 100%; height: 54px; object-fit: cover; display: block; }
.xp-wp .wp-name {
    font-size: .62rem; color: #24507f; padding: 2px 3px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xp-wp:hover { border-color: #5b8fd6; }
.xp-wp:focus-visible { outline: 2px solid #2f8ae8; outline-offset: 1px; }
.xp-wp-default, .xp-wp-solid {
    grid-column: 1 / -1; height: 26px; justify-content: center;
    background: linear-gradient(#fdfdfb, #e4e0d0); border-color: #9a9683;
}
.xp-wp-default .wp-name, .xp-wp-solid .wp-name { font-size: .68rem; padding: 0; }
/* Appearance controls (Fill/Fit + backdrop colour + custom upload) atop the flyout. */
.xp-wp-controls {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    padding: 2px 2px 6px; margin-bottom: 2px; border-bottom: 1px solid #cdc9b8;
    font-size: .64rem; color: #24507f;
}
.xp-wp-controls label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.xp-wp-controls input[type=color] { width: 22px; height: 18px; padding: 0; border: 1px solid #9a9683; border-radius: 3px; background: none; cursor: pointer; }
.xp-fit { display: inline-flex; border: 1px solid #9a9683; border-radius: 4px; overflow: hidden; }
.xp-fit button { border: none; padding: 3px 9px; font: inherit; font-size: .64rem; cursor: pointer; background: linear-gradient(#fdfdfb, #e4e0d0); color: #1b3a5b; }
.xp-fit button + button { border-left: 1px solid #9a9683; }
.xp-fit button:hover, .xp-upload span:hover { background: linear-gradient(#fff, #eaf3ff); }
.xp-upload input[type=file] { display: none; }
.xp-upload span { padding: 3px 9px; border: 1px solid #9a9683; border-radius: 4px; background: linear-gradient(#fdfdfb, #e4e0d0); color: #1b3a5b; }

/* Desktop toolbar: search + category chips (mirrors the Serious hero controls). */
.xp-toolbar {
    flex: none; margin: 12px 14px 0; display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
    padding: 7px 11px; background: linear-gradient(#f7f5ee, #dcd7c3);
    border: 1px solid #a6a290; border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 7px rgba(0,0,0,.28);
    font-family: Tahoma, Verdana, "Segoe UI", sans-serif; color: #33475f;
}
.xp-search { display: flex; align-items: center; gap: 7px; }

/* Big "back to the RAE Portal" button — styled like the classic IE/Explorer green Back arrow. */
.xp-portal-back {
    display: inline-flex; align-items: center; gap: 7px; padding: 3px 14px 3px 4px; text-decoration: none; cursor: pointer;
    font-size: .8rem; font-weight: 700; color: #fff; border-radius: 16px;
    background: linear-gradient(#5cb85c, #3a943a); border: 1px solid #2e7d2e;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.28);
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.xp-portal-back:hover { filter: brightness(1.07); }
.xp-portal-back:visited { color: #fff; }
.xp-portal-back .arrow {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(#8bd48b, #2e7d2e); border: 1px solid #256625;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
    font-size: 15px; line-height: 1;
    padding-bottom: 5px;   /* Tahoma's ← ink sits low in its em box; lift it to optical center */
}
.xp-toolbar-auth { margin-left: auto; display: flex; align-items: center; }
.xp-signin {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 15px; text-decoration: none; cursor: pointer;
    font-size: .78rem; font-weight: 700; color: #fff; border-radius: 13px;
    background: linear-gradient(#5cb85c, #3a943a); border: 1px solid #2e7d2e;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.28);
}
.xp-signin:hover { filter: brightness(1.07); }
.xp-signin:visited { color: #fff; }
.xp-user { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; color: #2c3e52; }
.xp-search label { font-size: .76rem; font-weight: 700; color: #2c3e52; }
.xp-search input {
    width: 210px; max-width: 46vw; padding: 4px 9px; font: inherit; font-size: .8rem; color: #123;
    background: #fff; border: 1px solid #7f9db9; border-radius: 3px;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,.15);
}
.xp-search input:focus { outline: none; border-color: #2f8ae8; box-shadow: inset 1px 1px 2px rgba(0,0,0,.15), 0 0 0 2px rgba(47,138,232,.35); }
.xp-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.xp-chip {
    padding: 4px 12px; font: inherit; font-size: .74rem; cursor: pointer; color: #1b3a5b;
    background: linear-gradient(#fdfdfb, #e4e0d0); border: 1px solid #9a9683; border-radius: 13px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    display: inline-flex; align-items: center; text-decoration: none;   /* so <a> category chips match the buttons */
}
.xp-chip:visited { color: #1b3a5b; }
.xp-chip:hover { background: linear-gradient(#ffffff, #eaf3ff); border-color: #5b8fd6; }
.xp-chip.active {
    background: linear-gradient(#2f8ae8, #0a52d6); color: #fff; border-color: #0a3ca6;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3); text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* App "windows" laid out on the desktop — screenshot + big name, XP-skinned.
   Keeps the Serious card's content (shot, name, tags) inside Luna window chrome. */
.xp-wins {
    flex: 1 1 auto; min-height: 0; margin: 12px 20px 46px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
    grid-auto-rows: min-content; gap: 18px; align-content: start;
    overflow-y: auto;
}
.xp-empty {
    grid-column: 1 / -1; margin-top: 8px; align-self: start; justify-self: start;
    padding: 8px 14px; background: rgba(236,233,216,.92); border: 1px solid #a6a290; border-radius: 6px;
    color: #33475f; font-size: .82rem; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.xp-win {
    position: relative;
    display: flex; flex-direction: column; overflow: hidden; cursor: pointer; outline: none;
    background: #ece9d8;                       /* classic XP window face */
    border: 1px solid #003ca6; border-radius: 8px 8px 4px 4px;
    box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.35);
    transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
}
.xp-win:hover { transform: translateY(-2px); box-shadow: 0 11px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.5); }
.xp-win:has(.xp-win-launch:focus-visible) { box-shadow: 0 0 0 2px #ffd54a, 0 9px 22px rgba(0,0,0,.5); }   /* keyboard focus only */
.xp-win:active { transform: translateY(0); filter: brightness(.98); }
/* Transparent full-tile link: the whole icon is a real anchor (single-click launch, no pop-up block).
   Sits below the pin (z-index 3) so the favorite toggle stays clickable. */
.xp-win-launch { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
/* Favorite (pin) toggle on a desktop tile — signed-in only; gold when pinned. */
.xp-win .xp-pin {
    position: absolute; top: 29px; right: 6px; z-index: 3; line-height: 1; cursor: pointer;
    border: none; border-radius: 5px; padding: 3px 5px; font-size: 13px;
    background: rgba(0,0,0,.5); color: #d7dde3;
}
.xp-win .xp-pin:hover { color: #ffd54a; }
.xp-win .xp-pin.pinned { color: #ffd54a; }

/* Luna title bar = the big app name + window icon + faux buttons */
.xp-win-title {
    display: flex; align-items: flex-start; gap: 6px; padding: 4px 5px 5px 6px;
    background: linear-gradient(#3f95f0 0%, #1e78e0 9%, #0a52d6 46%, #0a52d6 53%, #1667df 92%, #4aa3f5 100%);
    color: #fff; font-family: "Trebuchet MS", Tahoma, sans-serif; font-weight: 700; font-size: .82rem;
    text-shadow: 1px 1px 1px rgba(0,0,0,.45); border-radius: 7px 7px 0 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.xp-win-title .glyph {
    flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 4px; display: grid;
    place-items: center; font-size: .58rem; font-weight: 800; color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.xp-win.is-download .glyph { background: linear-gradient(160deg, #ffb04a, #e8641e); }
.xp-win.is-web .glyph { background: linear-gradient(160deg, #6fd0ec, #2f8fb8); }
.xp-win-title .name {
    flex: 1; min-width: 0; line-height: 1.15; padding-top: 1px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.xp-win-title .btns { flex: none; display: flex; gap: 2px; }
.xp-win-title .btns i {
    width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255,255,255,.75);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5); display: block;
}
.xp-win-title .btns .min, .xp-win-title .btns .max { background: #3f8ae8; }
.xp-win-title .btns .close { background: linear-gradient(#f2977a, #d63b1f); border-color: #a52a12; }

/* Window body: screenshot, or monogram fallback — sunken like an XP client area */
.xp-win-body { margin: 3px; flex: 1 1 auto; min-height: 118px; overflow: hidden; border: 1px solid #7f9db9; background: #fff; box-shadow: inset 1px 1px 2px rgba(0,0,0,.16); }
.xp-win-body .shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-win-body .mono { width: 100%; height: 100%; display: grid; place-items: center; }
.xp-win.is-download .xp-win-body .mono { background: linear-gradient(150deg, #ffbf6b, #e8641e); }
.xp-win.is-web .xp-win-body .mono { background: linear-gradient(150deg, #7fd6ef, #2f8fb8); }
.xp-win-body .mono-big { font-size: 2.4rem; font-weight: 800; color: #fff; letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,.3); }

/* Footer meta strip (tags + kind/popular), like the Serious card meta */
.xp-win-foot { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; overflow: hidden; padding: 4px 7px 6px; color: #3a4757; font-size: .66rem; }
.xp-win-foot .tag { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-win-foot .xp-health { flex: none; }
.xp-win-foot .tag { background: #d9e4f2; border: 1px solid #aec3dd; border-radius: 3px; padding: 1px 5px; color: #24507f; text-transform: uppercase; letter-spacing: .3px; font-size: .6rem; }
.xp-win-foot .xp-health { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 9px; border: 1px solid; font-size: .58rem; text-transform: uppercase; letter-spacing: .3px; }
.xp-win-foot .xp-health::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.xp-win-foot .xp-health.up { color: #2f8f3a; background: #e8f6ea; border-color: #a9d8b0; }
.xp-win-foot .xp-health.degraded { color: #9a6a00; background: #fff6e0; border-color: #f0d38a; }
.xp-win-foot .xp-health.down { color: #b83227; background: #fdeceb; border-color: #f0b3ae; }
.xp-win-foot .xp-health.unknown { color: #5a6b7d; background: #eef1f5; border-color: #cfd8e2; }
.xp-win-foot .pop { margin-left: auto; color: #b25000; font-weight: 700; }
.xp-win-foot .kind { margin-left: auto; color: #5a6b7d; text-transform: uppercase; letter-spacing: .5px; }

/* ---------------- app tile size (Fun/XP): S · M · L control in the toolbar ---------------- */
.xp-size { display: inline-flex; align-items: center; gap: 0; }
.xp-size .xp-size-label { font-size: .72rem; font-weight: 700; color: #2c3e52; margin-right: 6px; }
.xp-size button {
    width: 26px; padding: 4px 0; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; color: #1b3a5b;
    background: linear-gradient(#fdfdfb, #e4e0d0); border: 1px solid #9a9683; border-left-width: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.xp-size button:first-of-type { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.xp-size button:last-of-type { border-radius: 0 4px 4px 0; }
.xp-size button:hover { background: linear-gradient(#ffffff, #eaf3ff); border-color: #5b8fd6; }
.xp-size button.active { background: linear-gradient(#2f8ae8, #0a52d6); color: #fff; border-color: #0a3ca6; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); text-shadow: 0 1px 1px rgba(0,0,0,.35); }

/* Medium == the base .xp-wins/.xp-win rules above (no override). */
:root[data-size-xp="s"] .xp-wins { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
:root[data-size-xp="s"] .xp-win-body { min-height: 90px; }
:root[data-size-xp="s"] .xp-win-body .mono-big { font-size: 1.8rem; }
:root[data-size-xp="s"] .xp-win-title { font-size: .74rem; }

:root[data-size-xp="l"] .xp-wins { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
:root[data-size-xp="l"] .xp-win-body { min-height: 170px; }
:root[data-size-xp="l"] .xp-win-body .mono-big { font-size: 3rem; }
:root[data-size-xp="l"] .xp-win-title { font-size: .92rem; }

/* Taskbar */
.xp-taskbar {
    position: fixed; left: 0; right: 0; bottom: 0; height: 32px; display: flex; align-items: stretch;
    background: linear-gradient(#245edb 0%, #3f8cf3 8%, #2b6fdd 40%, #245edb 88%, #1941a5 100%);
    border-top: 1px solid #4d90fe; z-index: 50;
}
.xp-start {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    padding: 0 26px 2px 11px; border: none; cursor: pointer;
    color: #eafff0; font-family: "Trebuchet MS", Tahoma, sans-serif;
    font-style: italic; font-weight: 700; font-size: 1.06rem; letter-spacing: .2px;
    text-shadow: 0 1px 2px rgba(0,48,0,.6);
    border-radius: 0 8px 8px 0;
    /* gloss overlay + green base */
    background:
        linear-gradient(to bottom, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 9%, rgba(255,255,255,0) 44%, rgba(0,0,0,.12) 62%, rgba(0,0,0,.3) 100%),
        linear-gradient(to bottom, #74c94e 0%, #4aa72a 46%, #2f8416 80%, #226410 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset -1px 0 0 rgba(0,0,0,.22), 2px 0 5px rgba(0,0,0,.25);
}
.xp-start:hover { filter: brightness(1.07) saturate(1.05); }
.xp-start:focus-visible { outline: 1px dotted rgba(255,255,255,.9); outline-offset: -4px; }
.xp-start.is-open {
    background:
        linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.06) 45%, rgba(255,255,255,.14) 100%),
        linear-gradient(to bottom, #2b7a14 0%, #226410 55%, #3a9020 100%);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.2);
}
/* Show just the crisp "RAE" mark (clip off the tiny "CORPORATION" line). */
.xp-start .rae-wrap { height: 18px; overflow: hidden; display: flex; align-items: flex-start; filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)); }
.xp-start .rae { height: 25px; width: auto; display: block; }
.xp-start .txt { line-height: 1; }
.xp-tray {
    margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 0 12px;
    background: linear-gradient(#1477c9, #0f5aa8); border-left: 1px solid #0b4a90; color: #fff;
}
.xp-tray-btn { color: #fff; text-decoration: none; font-size: .78rem; opacity: .95; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }
.xp-tray-btn:hover { text-decoration: underline; }
.xp-clock { color: #fff; font-size: .78rem; }

/* XP "Send Request / Report" pop-up window (modal dialog). */
.xp-dialog-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,40,.28); }
.xp-dialog {
    position: fixed; z-index: 71; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(520px, 94vw); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
    background: #ece9d8; border: 1px solid #003ca6; border-radius: 8px 8px 5px 5px;
    box-shadow: 0 16px 44px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.35);
    font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
}
.xp-dialog-title {
    display: flex; align-items: center; gap: 8px; padding: 5px 6px 6px 10px; flex: none;
    background: linear-gradient(#3f95f0 0%, #1e78e0 9%, #0a52d6 46%, #0a52d6 53%, #1667df 92%, #4aa3f5 100%);
    color: #fff; font-family: "Trebuchet MS", Tahoma, sans-serif; font-weight: 700; font-size: .92rem;
    text-shadow: 1px 1px 1px rgba(0,0,0,.45); border-radius: 7px 7px 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.xp-dialog-title .ico { flex: none; font-size: .9rem; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.xp-dialog-title .t { flex: 1; min-width: 0; }
.xp-dialog-title .x {
    flex: none; width: 22px; height: 20px; border-radius: 4px; cursor: pointer; color: #fff; font-size: .72rem; line-height: 1;
    background: linear-gradient(#f2977a, #d63b1f); border: 1px solid #a52a12; box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.xp-dialog-title .x:hover { filter: brightness(1.09); }
.xp-dialog-body { padding: 14px 16px 18px; overflow-y: auto; background: #ece9d8; color: #1a2733; font-size: .82rem; }
.xp-dialog-body p { margin: 0 0 11px; }
.xp-dialog-body label { font-weight: 700; font-size: .78rem; color: #2c3e52; }
.xp-dialog-body input, .xp-dialog-body select, .xp-dialog-body textarea {
    width: 100%; max-width: 100%; padding: 4px 7px; margin-top: 3px; font: inherit; font-size: .82rem; color: #111;
    background: #fff; border: 1px solid #7f9db9; border-radius: 3px; box-shadow: inset 1px 1px 2px rgba(0,0,0,.14);
}
.xp-dialog-body input:focus, .xp-dialog-body select:focus, .xp-dialog-body textarea:focus {
    outline: none; border-color: #2f8ae8; box-shadow: inset 1px 1px 2px rgba(0,0,0,.14), 0 0 0 2px rgba(47,138,232,.35);
}
.xp-dialog-body .validation-message { display: block; margin-top: 3px; color: #c0341d; font-size: .74rem; }
.xp-dialog-body .btn-request {
    display: inline-block; margin-top: 4px; padding: 5px 18px; cursor: pointer; font: inherit; font-size: .82rem; color: #1a2733;
    background: linear-gradient(#fdfdfb, #e6e3d7 50%, #d7d3c4); border: 1px solid #8a8674; border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.xp-dialog-body .btn-request:hover { border-color: #3f7fd6; background: linear-gradient(#ffffff, #eef4fc 50%, #dbe7f6); }
.xp-dialog-body .req-sent { font-size: .9rem; color: #1c5c1c; }

/* First-visit Fun-mode welcome tips */
.xp-welcome { width: min(440px, 94vw); }
.xp-dialog-body .xp-welcome-tips { list-style: none; margin: 0 0 11px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.xp-dialog-body .xp-welcome-tips li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.4; }
.xp-dialog-body .xp-welcome-tips li .ico { flex: none; font-size: 1.05rem; line-height: 1.3; }
.xp-dialog-body .xp-welcome-hint { color: #2c3e52; }
.xp-welcome-actions { text-align: right; margin-top: 6px; }

/* Start menu */
.xp-startmenu-backdrop { position: fixed; inset: 0; z-index: 60; }
.xp-startmenu {
    position: fixed; left: 4px; bottom: 32px; width: 240px; z-index: 61; background: #fff;
    border: 1px solid #0f3fa5; border-bottom: none; border-radius: 8px 8px 0 0;
    box-shadow: 0 6px 22px rgba(0,0,0,.5); overflow: visible; font-size: .82rem; color: #333;
}
.xp-startmenu-head {
    background: linear-gradient(#2a63d8, #1c4fbf); color: #fff; padding: 8px 12px; font-weight: 700;
    text-shadow: 1px 1px 1px rgba(0,0,0,.4); border-radius: 8px 8px 0 0;
}
.xp-startmenu-body { background: #fff; padding: 6px 0; }
.xp-startmenu-sep { height: 1px; background: #dfe8f6; margin: 6px 10px; }
.xp-allprograms {
    font-weight: 700; padding: 6px 14px; color: #0a3;
}
.xp-menuitem {
    display: block; width: 100%; text-align: left; background: none; border: none; padding: 5px 14px;
    color: #123; font: inherit; text-decoration: none; cursor: pointer;
}
.xp-menuitem:hover { background: #2a63d8; color: #fff; }
.xp-menuitem.is-empty, .xp-menuitem.is-empty:hover { color: #999; background: none; cursor: default; }
.xp-cat { position: relative; }
.xp-cat-label { display: flex; justify-content: space-between; align-items: center; padding: 5px 14px; cursor: default; }
.xp-cat:hover > .xp-cat-label { background: #2a63d8; color: #fff; }
.xp-cat .chev { opacity: .7; }
.xp-submenu {
    display: none; position: absolute; left: 100%; min-width: 190px; background: #fff;
    border: 1px solid #0f3fa5; border-radius: 0 6px 6px 0; box-shadow: 4px 4px 14px rgba(0,0,0,.4);
    padding: 4px 0; z-index: 62;
    /* Keep the flyout on screen and adjacent to the item (left:100%, so the hover bridge holds).
       Fallback for browsers without CSS anchor positioning: open UPWARD from the item and
       cap+scroll — the categories sit low in this bottom-anchored menu, so upward is the safe
       direction for the long lists that were running off the bottom. (Same technique the Wallpaper
       flyout above uses.) */
    top: auto; bottom: 0; max-height: min(520px, 78vh); overflow-y: auto;
}
.xp-cat:hover > .xp-submenu { display: block; }

/* Modern browsers (Chromium/Edge — what RAE runs): anchor the flyout to the hovered category and
   let the browser flip it. It opens downward by default and flips UPWARD only when there's no room
   below, choosing the side with more space — so it never runs off the top or the bottom, whatever
   the category's position or list length (the fallback's one weak spot: a high category with a long
   list on a short screen). max-height + overflow-y (above) still scroll a list taller than both sides. */
@supports (top: anchor(--x top)) {
    .xp-cat { anchor-name: --xp-cat; anchor-scope: --xp-cat; }
    .xp-submenu {
        /* position:fixed so overflow (and thus the flip) is measured against the VIEWPORT, not the
           tiny .xp-cat row that is the containing block under position:absolute. anchor() still pins
           the flyout adjacent to the hovered item, so there is no hover gap. */
        position: fixed;
        position-anchor: --xp-cat;
        left: anchor(--xp-cat right); right: auto;
        top: anchor(--xp-cat top); bottom: auto;
        position-try-fallbacks: flip-block;
        position-try-order: most-block-size;
    }
}
.xp-logoff { color: #b00; font-weight: 600; margin-top: auto; }

/* First-run picker (shared by both shells; intentionally NOT scoped to .xp) */
.rae-picker {
    position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
    background: rgba(8,12,20,.72); backdrop-filter: blur(3px);
    font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
}
.rae-picker-modal {
    width: min(560px, 92vw); background: #fff; color: #1a1f2b; border-radius: 14px;
    padding: 26px 26px 30px; box-shadow: 0 20px 60px rgba(0,0,0,.5); text-align: center;
}
.rae-picker-title { margin: 0 0 4px; font-size: 1.5rem; font-weight: 800; }
.rae-picker-sub { margin: 0 0 20px; color: #556; font-size: .92rem; }
.rae-picker-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rae-picker-choice {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 14px;
    border: 2px solid #d9e0ee; border-radius: 12px; background: #f7f9fd; cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.rae-picker-choice:hover { transform: translateY(-3px); border-color: #2a63d8; box-shadow: 0 10px 24px rgba(42,99,216,.25); }
.rae-picker-choice.fun:hover { border-color: #3ca020; box-shadow: 0 10px 24px rgba(60,160,32,.25); }
.rae-picker-emoji { font-size: 2rem; }
.rae-picker-name { font-weight: 800; font-size: 1.05rem; }
.rae-picker-desc { font-size: .8rem; color: #667; line-height: 1.3; }
@media (max-width: 480px) { .rae-picker-choices { grid-template-columns: 1fr; } }

/* "Try XP" button in the serious topbar */
.btn-xp { background: none; border: 1px solid var(--line, #2a3340); color: inherit; border-radius: 8px; padding: 6px 10px; font-size: .8rem; cursor: pointer; }
.btn-xp:hover { border-color: #3ca020; color: #7bd45a; }

/* ============================================================
   Routed pages (Admin / Request / Tag) as a maximized XP window.
   The page's Serious markup is kept; theme variables are remapped
   to a light XP palette inside .xp-page-body so it reads correctly.
   ============================================================ */
.xp-page-win {
    flex: 1 1 auto; min-height: 0; margin: 18px 22px 46px; display: flex; flex-direction: column; overflow: hidden;
    background: #ece9d8; border: 1px solid #003ca6; border-radius: 8px 8px 5px 5px;
    box-shadow: 0 12px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.35);
}
.xp-page-titlebar {
    display: flex; align-items: center; gap: 8px; padding: 5px 6px 6px 8px; flex: none;
    background: linear-gradient(#3f95f0 0%, #1e78e0 9%, #0a52d6 46%, #0a52d6 53%, #1667df 92%, #4aa3f5 100%);
    color: #fff; font-family: "Trebuchet MS", Tahoma, sans-serif; font-weight: 700; font-size: .92rem;
    text-shadow: 1px 1px 1px rgba(0,0,0,.45); border-radius: 7px 7px 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.xp-page-titlebar .glyph {
    flex: none; width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center;
    font-size: .62rem; font-weight: 800; color: #fff; background: linear-gradient(160deg, #f0641e, #b8460f);
    text-shadow: 0 1px 1px rgba(0,0,0,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.xp-page-titlebar .t { flex: 1; min-width: 0; }
.xp-page-titlebar .btns { flex: none; display: flex; gap: 2px; }
.xp-page-titlebar .btns i {
    width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255,255,255,.75);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5); display: block; background: #3f8ae8;
}
.xp-page-titlebar .x {
    flex: none; width: 22px; height: 20px; border-radius: 4px; cursor: pointer; color: #fff; font-size: .72rem;
    display: grid; place-items: center; text-decoration: none;
    background: linear-gradient(#f2977a, #d63b1f); border: 1px solid #a52a12; box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.xp-page-titlebar .x:hover { filter: brightness(1.09); }
.xp-page-taskbar { z-index: 40; }

.xp-page-body {
    flex: 1 1 auto; min-height: 0; overflow: auto; background: #ece9d8; color: #16222f;
    /* Remap the Serious theme vars to a light XP palette so .page/.admin-table render correctly. */
    --bg: #ece9d8; --bg-2: #dde3ea; --panel: #ffffff; --panel-2: #ffffff; --surface: #ffffff;
    --ink: #16222f; --muted: #4a5a6b; --faint: #8493a3;
    --line: #b7c2cf; --line-soft: #d7dee7;
    --accent: #0a52d6; --accent-2: #2f8ae8; --accent-soft: rgba(47,138,232,.20);
    --shadow: 0 1px 2px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.14);
}
.xp-page-body .page { max-width: none; margin: 0; padding: 16px 22px 26px; }
.xp-page-body h1, .xp-page-body h3 { font-family: "Trebuchet MS", Tahoma, sans-serif; color: #16222f; }

/* XP form controls (shared with the request pop-up) */
.xp-dialog-body input, .xp-dialog-body select, .xp-dialog-body textarea,
.xp-page-body .page input, .xp-page-body .page select, .xp-page-body .page textarea {
    padding: 4px 7px; font: inherit; font-size: .82rem; color: #111;
    background: #fff; border: 1px solid #7f9db9; border-radius: 3px; box-shadow: inset 1px 1px 2px rgba(0,0,0,.14);
}
.xp-page-body .page input[type=checkbox] { width: auto; box-shadow: none; }

/* XP push-buttons (Save / New / etc.) */
.xp-dialog-body .btn-request,
.xp-page-body .btn-request, .xp-page-body .admin-table button, .xp-page-body .upload-btn {
    display: inline-block; padding: 5px 16px; cursor: pointer; font: inherit; font-size: .8rem; color: #1a2733; text-transform: none; letter-spacing: 0;
    background: linear-gradient(#fdfdfb, #e6e3d7 50%, #d7d3c4); border: 1px solid #8a8674; border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85); margin-right: 6px;
}
.xp-dialog-body .btn-request:hover,
.xp-page-body .btn-request:hover, .xp-page-body .admin-table button:hover, .xp-page-body .upload-btn:hover {
    border-color: #3f7fd6; color: #123; background: linear-gradient(#ffffff, #eef4fc 50%, #dbe7f6);
}
.xp-page-body .admin-table button { padding: 3px 10px; }

/* XP data grid (admin table) */
.xp-page-body .admin-table { border: 1px solid #8199b4; border-radius: 4px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.xp-page-body .admin-table th {
    background: linear-gradient(#eef4fc, #d4e2f3); color: #1b3a5b; text-transform: none; letter-spacing: 0;
    font-family: Tahoma, Verdana, sans-serif; font-size: .74rem; border-bottom: 1px solid #a7bdd6;
}
.xp-page-body .admin-table td { border-bottom: 1px solid #e2e8f0; }
.xp-page-body .admin-table tr:nth-child(even) td { background: #f4f7fb; }

/* the inline edit panel (uses var(--surface)) sits on a beveled XP group box */
.xp-page-body .page > div[style*="surface"] {
    border: 1px solid #9fb3c9 !important; box-shadow: inset 0 0 0 1px #fff, 0 2px 8px rgba(0,0,0,.14) !important;
    border-radius: 6px !important;
}

.xp-dialog-body .validation-message,
.xp-page-body .validation-message { display: block; margin-top: 3px; color: #c0341d; font-size: .74rem; }

/* Health page inside the XP window (white body) — darker, higher-contrast fills */
.xp-page-body .health-timeline { height: 14px; border: 1px solid #b6b6b6; }
.xp-page-body .health-seg--up { background: #2f8f3a; }
.xp-page-body .health-seg--degraded { background: #c98a00; }
.xp-page-body .health-seg--down { background: #b83227; }
.xp-page-body .health-seg--nodata { background: repeating-linear-gradient(45deg, #d7d7d7, #d7d7d7 3px, #efefef 3px, #efefef 6px); }
.xp-page-body .health-badge--up { color: #1e6f28; }
.xp-page-body .health-badge--degraded { color: #a06f00; }
.xp-page-body .health-badge--down { color: #a02218; }
.xp-page-body .health-badge--nodata { color: #6a6a6a; }