/*
windsoy xp - geminiGODs wonned btw
[Options] --> User CSS --> Paste this code --> Update custom CSS
*/

:root {
    --xp-blue: #245edb;
    --xp-bg: #ece9d8;
    --xp-border: #003b8e;
    --xp-header-grad: linear-gradient(to bottom, #74a0ff 0%, #245edb 10%, #1947ac 100%);
    --xp-boardlist: linear-gradient(to bottom, #85b1ff 0%, #245edb 50%, #04378c 100%);
    --gloss-overlay: linear-gradient(to bottom, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.02) 100%);

/* Gradient Palettes for Text */
    --xp-green-gloss: linear-gradient(to bottom, #5EBC42 0%, #6CCB4E 25%, #5EBC42 30%, #5C9B4A 70%, #5EBC42 100%);
    --xp-orange-gloss: linear-gradient(to bottom, #ffc06e 0%, #ff9d21 25%, #e67a00 30%, #b35f00 70%, #e67a00 100%);
    --xp-skyblue-gloss: linear-gradient(to bottom, #a1d9ff 0%, #47b2ff 25%, #0084e6 30%, #005696 70%, #0084e6 100%);
}

/* Base Body & Wallpaper */
body {
    background: linear-gradient(rgba(36, 94, 219, 0.45), rgba(36, 94, 219, 0.8)), url("https://upload.wikimedia.org/wikipedia/en/2/27/Bliss_%28Windows_XP%29.png") fixed center/cover !important;
    font-family: "Tahoma", "Segoe UI", sans-serif !important;
    color: #000;
}

/* Headers & Banner */
header, .boardBanner, div.banner {
    background: var(--xp-header-grad) !important;
    border-bottom: 2px solid #04378c !important;
    color: white !important;
    padding: 10px !important;
}

h1, header div.subtitle, .boardTitle {
    color: #fff !important;
    text-shadow: 1px 1px #000;
    letter-spacing: 1px;
}

/* Link Styling & Action Links */
a, a:visited, .intro a, div.post.reply div.body a {
    color: #f00;
    text-shadow: 0.5px 0.5px #000;
    text-decoration: none;
    font-weight: bold;
}
a.email, .intro a.post_no, a[href^="mailto:"] {
    color: #fe0;
    text-decoration: underline;
    font-weight: bold;
}

a:hover, .intro a:hover, .intro a.post_no:hover, a.email:hover {
    color: #ffffff !important;
    text-shadow: 0 0 3px #ff8800;
}

/* Board Navigation Bar */
.desktop-style div.boardlist:nth-child(1), div.boardlist {
    background: #245edb !important;
    border-bottom: 1px solid #04378c !important;
    color: white !important;
}

div.boardlist a {
    background: var(--xp-boardlist) !important;
    color: #ffffff !important;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
    font-family: Tahoma, sans-serif;
    padding: 3px 10px;
    margin: 2px;
    border: 1px solid #04378c;
    border-radius: 3px;
    display: inline-block;
}

div.boardlist a:hover {
    filter: brightness(1.15);
    color: #ffcc00 !important;
}

/* =========================================================
   XP STYLED POST CREATION FORM
   ========================================================= */

form[name='post'], #quick-reply, #options_div, div.ban {
    background: var(--gloss-overlay), var(--xp-bg) !important;
    border: 1px solid var(--xp-border) !important;
    border-radius: 5px !important;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2) !important;
    padding: 6px !important;
    margin: 10px auto !important;
}

/* Form Window Header */
form table tr th, div.ban h2, #options_div h2 {
    background: var(--xp-header-grad) !important;
    color: white !important;
    font-weight: bold;
    padding: 4px 8px !important;
    border-radius: 3px 3px 0 0;
    text-shadow: 1px 1px #000;
}

/* Input Fields (Classic Bevel - Lightweight) */
input[type="text"], input[type="password"], textarea {
    border: 2px solid #7f9db9 !important;
    background: #ffffff !important;
    padding: 3px !important;
    font-family: Tahoma, sans-serif;
}

/* Push Buttons */
input[type="submit"], button, .alert_button {
    background: linear-gradient(to bottom, #ffffff 0%, #e4e4e4 50%, #d0d0d0 100%) !important;
    border: 1px solid #003c74 !important;
    border-radius: 3px !important;
    padding: 3px 10px !important;
    cursor: pointer;
    font-weight: bold;
    color: #000 !important;
}

input[type="submit"]:hover, button:hover {
    filter: brightness(1.1);
}

/* =========================================================
   THREADS, POSTS, AND HOVER PREVIEWS (GPU ACCELERATED)
   ========================================================= */

div.post.reply, div.post.op, div.op, div.post-preview {
    background: var(--gloss-overlay), var(--xp-bg) !important;
    border: 1px solid var(--xp-border) !important;
    border-radius: 5px !important;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2) !important;
    margin-bottom: 8px !important;
    color: #000 !important;
    overflow: visible !important;
    contain: content;
}

/* Highlighted Post */
div.post.reply.highlighted {
    background: var(--gloss-overlay), #d1e2ff !important;
    border-color: #0054e3 !important;
}

/* Title Bar / Post Intro Header */
.intro, div.post.reply div.intro, div.post.op div.intro, div.op div.intro {
    background: var(--xp-header-grad) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 4px 4px 0 0 !important;
}

.intro span.subject, .intro span.name {
    color: #ffffff !important;
}

div.post div.body {
    padding: 10px !important;
    color: #000 !important;
}

/* Hover Backlink Preview */
div.post-preview {
    z-index: 1000 !important;
    position: absolute !important;
    will-change: transform;
}

/* =========================================================
   CATALOG VIEW STYLING (OPTIMIZED)
   ========================================================= */

.theme-catalog div.thread {
    background: var(--gloss-overlay), var(--xp-bg) !important;
    border: 1px solid var(--xp-border) !important;
    border-radius: 5px !important;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.15) !important;
    padding: 6px !important;
    margin: 4px !important;
    box-sizing: border-box !important;
    contain: strict;
}

/* Catalog Image Specific Styling */
.theme-catalog div.thread img,
.theme-catalog img.thread-image,
.catalog-thumb {
    background: var(--gloss-overlay) !important;
    border: none !important;
    box-shadow: none !important;
    object-fit: contain !important;
    max-height: 140px !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto 6px auto !important;
}

/* =========================================================
   TEXT STYLES & SPOILERS
   ========================================================= */

span.quote, span.quote2, span.quote3, span.bluetext, span[class*="quote"], span[class*="blue"], span[style*="color:#5555ff"] {
    font-weight: bold !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    /* Keeps gradient text from recalculating document layout */
    contain: inline-size;
}

span.quote { background-image: var(--xp-green-gloss) !important; }
span.quote2 { background-image: var(--xp-orange-gloss) !important; }
span.quote3, span.bluetext, span[class*="blue"], span[style*="color:#5555ff"] { background-image: var(--xp-skyblue-gloss) !important; }

/* Spoilers */
span.spoiler {
    background: #000 !important;
    color: #000 !important;
    padding: 0 2px;
}

span.spoiler:hover {
    color: #fff !important;
}

/* Clean Separators */
hr {
    height: 1px;
    border: none;
    background: #99b4d1;
    margin: 16px 0;
}