body {
	/* Dynamic edge: illustration begins at x=936px in the 1512x800 background. */
	--art-edge: min(100vw, max(61.9048vw, 117.0000vh));
	background-color: #d9ebff;
	background-image: url(images/kokomi.png);
	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
    background-position: center center;
	margin: 0; padding: 0;
	text-align: center;
	font-family: "Geneva", "Verdana", bold;
	font-size: 13px;
	color: #6471c9;
	text-shadow: 0 1px 0 rgba(255,255,255,.55);
	filter: dropshadow(color=#cfdcff, offx=1, offy=1);
	cursor: url('images/cursor5.png') 11 14, auto;
}

#container {
 	width: var(--art-edge);
	padding: 0px;
	float: left;
	margin: 0 auto;
}

#title, #title a:link, #title a:visited, #title a:hover, #title a:active {
	font-family: "Geneva", "Verdana";
	font-weight: normal;
	font-size: 75px;
	letter-spacing: 2px;
	text-transform: uppercase;
 	padding: 0px;
	width:100%;
	margin: 10px 0 10px 0;
	color: #6f7be0;
 	text-align: center;
	text-shadow: 1px 1px 1px rgba(255,255,255,.65);
	filter: dropshadow(color=#e3e7ff, offx=1, offy=1);
}

#header {
	width:1920px;
	height:800px;
	bottom:0px;
	right:1px;
	position: fixed;
	z-index:-1;
}

#sidebar {
	padding: 10px;
 	width: 190px;
	float: left;
	position: fixed;
	line-height: 20px;
	background-color: rgba(227, 240, 255, 0.88);
	-moz-border-radius: 15px;
	border-radius: 15px;
 	text-align: justify;
	margin: 0 10px 0 10px;
	-webkit-box-shadow: 0 4px 18px rgba(160, 185, 236, .55);
	-moz-box-shadow: 0 4px 18px rgba(160, 185, 236, .55);
	box-shadow: 0 4px 18px rgba(160, 185, 236, .55);
}

#content {
 	padding: 10px;
 	width: calc(100% - 250px);
	box-sizing: border-box;
	float: right;
	line-height: 20px;
	background-color: rgba(244, 238, 255, 0.9);
	-moz-border-radius: 15px;
	border-radius: 15px;
 	text-align: justify;
	margin: 0 0 0 0;
	-webkit-box-shadow: 0 4px 18px rgba(160, 185, 236, .55);
	-moz-box-shadow: 0 4px 18px rgba(160, 185, 236, .55);
	box-shadow: 0 4px 18px rgba(160, 185, 236, .55);
}

#footer, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active{
	text-align: center;
	font-size: 10px;
}

a:link, a:active, a:visited {
	font-family: "Geneva", "Verdana";
	font-size: 13px;
	color: #4f5fbd;
	text-decoration: none;
	cursor: default;
	font-weight: bold;
	letter-spacing: 1px;
}
a:hover {
	font-family: "Geneva", "Verdana";
	font-size: 13px;
	font-weight: normal;
	color: #a455d8;
	text-decoration: none;
	cursor: default;
	font-weight: bold;
	letter-spacing: 1px;
}
a.nav:link, a.nav:visited, a.nav:active {
	font-family: "Geneva", "Verdana";
	font-weight: normal;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 1px;
	color: #4f5fbd;
	width: 98%;
	display:  block;
	text-align: center;
	padding: 5px;
	margin: 2px 0;
	text-decoration: none;
	border-bottom: 1px dashed #7ca8e8;
	letter-spacing: 0px;
	text-shadow: 0 1px 0 rgba(255,255,255,.55);
	filter: dropshadow(color=#dfe6ff, offx=1, offy=1);
}

a.nav:hover {
	font-family: "Geneva", "Verdana";
	font-weight: normal;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 1px;
	color: #a455d8;
	width: 98%;
	display:  block;
	text-align: center;
	padding: 5px;
	margin: 2px 0;
	text-decoration: none;
	border-bottom: 1px dashed #b57be6;
	letter-spacing: 0px;
	text-shadow: 1px 1px 1px rgba(255,255,255,.45);
	filter: dropshadow(color=#dfe6ff, offx=1, offy=1);
}

h1 {
	font-family: "Geneva", "Verdana", bold;
	font-weight: normal;
	font-size: 28px;
	border-bottom: 1px dashed #9db9f7;
	line-height: 28px;
	text-transform: none;
	color: #5f6dd1;
	padding: 2px;
	margin-top: 5px;
	margin-bottom: 3px;
	text-shadow: 1px 1px 1px rgba(255,255,255,.55);
	filter: dropshadow(color=#dfe6ff, offx=1, offy=1);
}
h2, h3, h4 {
	font-family: "Geneva", "Verdana", bold;
	font-weight: normal;
	letter-spacing: 2px;
	font-size: 16px;
	border-bottom: 1px dashed #9ab9f1;
	text-transform: none;
	color: #6b7cdb;
	text-align: center;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 3px;
	text-shadow: 1px 1px 1px rgba(255,255,255,.55);
	filter: dropshadow(color=#dfe6ff, offx=1, offy=1);
}
b, i, u, s {color: #7468d6;}
.highlightCard {
	border: 2px solid #92abff;
	background: #eff3ff;
}

textarea {
	border: 1px dotted #92abff;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(228, 241, 255, 0.95);
	color: #5f6dd1;
}

.dimmedCard {
	opacity:0.3;
	filter:alpha(opacity=30);
}

body::-webkit-scrollbar {
    width: 4px;
}
body::-webkit-scrollbar-track {
    background-color: #fff5c8;
    border-left: 1px solid #7fb86b;
}
body::-webkit-scrollbar-thumb {
    background-color: #77abe0;
}
body::-webkit-scrollbar-thumb:hover {
  background-color: #ef8a4d;
}

textarea::-webkit-scrollbar {
    width: 4px;
}
textarea::-webkit-scrollbar-track {
    background-color: #fff8d9;
    border-left: 1px solid #7fb86b;
}
textarea::-webkit-scrollbar-thumb {
    background-color: #77abe0;
}
textarea::-webkit-scrollbar-thumb:hover {
  background-color: #ef8a4d;
}

.column {
    display: inline-block;
    vertical-align: top;
    width: 49%;
}

input {
  box-sizing: border-box;
  border: 1px solid #92abff;
  border-radius: 7px;
  background-color: rgba(228, 241, 255, 0.95);
  color: #5f6dd1;
}

input[type=button], input[type=submit], input[type=reset] {
  background-color: #d8e7ff;
  border: 1px solid #92abff;
  border-radius: 7px;
  color: #5f6dd1;
  text-decoration: none;
  margin: 1px 1px;
  cursor: pointer;
}

select {
  border: 1px solid #92abff;
  border-radius: 7px;
  background-color: rgba(228, 241, 255, 0.95);
  color: #5f6dd1;
}
/* Card hover tooltip - watery blue/lilac glass theme */
.has-card-tooltip {
    cursor: help;
}

.card-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: 260px;
    padding: 5px 10px;
    border: 1px solid rgba(244, 248, 255, .72);
    border-radius: 999px;
    background: rgba(208, 228, 255, .72);
    color: #5662bd;
    font-family: "Geneva", "Verdana", sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.35;
    letter-spacing: .35px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
    box-shadow: 0 5px 16px rgba(132, 150, 214, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
    white-space: nowrap;
}

.card-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Style 4: keep Trade Buddies together on one sidebar row */
#sidebar img[src$="/scara.png"],
#sidebar img[src$="/xiao.png"] {
    height: 78px;
    width: auto;
    max-width: 86px;
    object-fit: contain;
    vertical-align: bottom;
    margin: 0 2px;
}


/* Themed custom cursor */
body, a, a:link, a:visited, a:active, a:hover, button, input, select, textarea, label, .has-card-tooltip {
    cursor: url('images/cursor5.png') 11 14, auto !important;
}

/* Decorative form controls - Style 4 / Kokomi & Ayaka */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    box-sizing: border-box;
    border: 1px dashed #879ee8;
    border-radius: 3px;
    background-color: rgba(248,251,255,.94);
    background-image:
        radial-gradient(circle at calc(100% - 9px) 8px, rgba(126,113,224,.28) 0 1.5px, transparent 2px),
        radial-gradient(circle at calc(100% - 14px) 12px, rgba(93,180,225,.22) 0 1px, transparent 1.5px),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(235,241,255,.92));
    color: #5361af;
    padding: 7px 9px;
    outline: 1px solid rgba(137,176,233,.38);
    outline-offset: 2px;
    box-shadow: 0 2px 6px rgba(94,119,188,.08);
    transition: border-color .15s ease, outline-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    border-color: #6f7ed8;
    border-style: solid;
    outline-color: rgba(111,126,216,.34);
    background-color: rgba(252,253,255,.98);
    box-shadow: 0 0 0 2px rgba(111,126,216,.08), 0 3px 8px rgba(94,119,188,.10);
}
input[type="button"], input[type="submit"], input[type="reset"], button {
    border: 1px dashed #7d91df;
    border-radius: 3px;
    background: rgba(224,234,255,.96);
    color: #5361af;
    padding: 6px 11px;
    box-shadow: inset 0 -2px 0 rgba(111,126,216,.09), 0 2px 4px rgba(94,119,188,.08);
    font-weight: bold;
    letter-spacing: .3px;
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
    border-style: solid;
    background: rgba(211,224,255,.98);
    color: #46539d;
}
/* TCG log boxes: keep log textareas inside the central content panel */
textarea.tcg-logbox {
    display: block;
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    min-width: 0;
    box-sizing: border-box;
    margin: 8px auto;
    padding: 9px 10px;
    resize: vertical;
    overflow-x: auto;
}



/* ===== Select dropdown theme fix style 4 ===== */
select {
    background-color: rgba(248,251,255,.98);
    color: #5361af;
}
select option,
select optgroup {
    background: rgba(235,241,255,.96);
    color: #5361af;
}
select option:checked,
select option:hover,
select option:focus {
    background: rgba(248,251,255,.98);
    color: #5361af;
}


/* ===== Custom h1 font - Style 4 ===== */
@font-face {
    font-family: "WatermelonH1";
    src: url("fonts/style4-h1.woff2") format("woff2");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}
h1 {
    font-family: "WatermelonH1", "Geneva", "Verdana", sans-serif;
    font-weight: normal;
}


/* ===== Common text font: Trebuchet MS (decorative h1 stays theme-specific) ===== */
body,
#title, #title a:link, #title a:visited, #title a:hover, #title a:active,
#sidebar, #content, #footer,
a:link, a:visited, a:active, a:hover,
a.nav:link, a.nav:visited, a.nav:active, a.nav:hover,
h2, h3, h4,
b, i, u, s,
input, textarea, select, option, optgroup, button,
.card-tooltip {
    font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
}


/* ===== Trebuchet readability sizing ===== */
body { font-size: 15px; }
a:link, a:visited, a:active, a:hover,
a.nav:link, a.nav:visited, a.nav:active, a.nav:hover { font-size: 15px; }
h2, h3, h4 { font-size: 17px; }
input, textarea, select, button { font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif; font-size: 14px; }
#footer, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active { font-size: 11px; }
.card-tooltip { font-size: 13px; }


/* ===== Responsive phone/tablet + Back to top ===== */
:root {
    --mobile-panel: rgba(240,246,255,.97);
    --backtop-bg: #6f7ed8;
    --backtop-fg: #f8fbff;
    --backtop-border: #a9b9ef;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

#backToTop {
    position: fixed;
    z-index: 100000;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px dashed var(--backtop-border);
    border-radius: 50%;
    background: var(--backtop-bg);
    color: var(--backtop-fg);
    font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
    font-size: 23px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
#backToTop.is-visible {
    opacity: .92;
    visibility: visible;
    transform: translateY(0);
}
#backToTop:hover,
#backToTop:focus-visible {
    opacity: 1;
    border-style: solid;
    transform: translateY(-2px);
}

#content img {
    max-width: 100%;
    height: auto;
}
#content input:not([type="checkbox"]):not([type="radio"]),
#content textarea,
#content select {
    max-width: 100%;
}

/* Tablets and smaller laptops */
@media (max-width: 1100px) {
    body {
        background-attachment: scroll;
        background-position: center top;
    }
    #container {
        width: 100%;
        max-width: 100%;
    }
    #content {
        width: calc(100% - 235px);
        min-width: 0;
        padding: 12px;
        overflow-x: auto;
    }
    #sidebar {
        width: 185px;
    }
    #title {
        max-width: 100%;
    }
    table {
        max-width: 100%;
    }
}

/* Phones and portrait tablets */
@media (max-width: 820px) {
    body {
        min-width: 0;
        padding: 0;
        background-attachment: scroll;
        background-size: auto 100vh;
        background-position: center top;
    }
    #header {
        display: none;
    }
    #container {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    #sidebar {
        position: relative;
        float: none;
        width: auto;
        max-width: none;
        margin: 10px;
        padding: 10px 12px;
        box-sizing: border-box;
        background-color: var(--mobile-panel);
        text-align: center;
    }
    #sidebar h2 {
        clear: both;
    }
    #sidebar > h2:first-child img,
    #sidebar center img {
        max-width: 100%;
        height: auto;
    }
    #sidebar a.nav {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        width: calc(50% - 8px);
        min-height: 38px;
        margin: 2px;
        padding: 8px 5px;
    }
    #content {
        float: none;
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 10px;
        padding: 12px;
        box-sizing: border-box;
        overflow-x: auto;
    }
    #title {
        width: auto;
        max-width: 100%;
        margin-left: 10px;
        margin-right: 10px;
        font-size: clamp(38px, 10vw, 58px);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }
    h1 {
        font-size: clamp(25px, 8vw, 34px);
        line-height: 1.08;
        overflow-wrap: anywhere;
    }
    h2, h3, h4 {
        line-height: 1.2;
    }
    .column {
        display: block;
        width: 100%;
    }
    textarea.tcg-logbox {
        width: 100%;
        max-width: 100%;
    }
    #backToTop {
        width: 42px;
        height: 42px;
        line-height: 38px;
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    a:link, a:visited, a:active, a:hover,
    a.nav:link, a.nav:visited, a.nav:active, a.nav:hover { font-size: 14px; }
    #sidebar,
    #content {
        margin: 7px;
        border-radius: 10px;
    }
    #sidebar a.nav {
        width: 100%;
        margin: 1px 0;
    }
    input[type="button"], input[type="submit"], input[type="reset"], button {
        min-height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    #backToTop { transition: none; }
}


/* ===== Theme-specific Back to top: Style 4 / Kokomi & Ayaka ===== */
#backToTop {
    border: 1px dashed #879ee8;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(248,251,255,.96), rgba(174,191,246,.92));
    color: #5361af;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 5px 18px rgba(94,119,188,.22);
    text-shadow: 0 1px 0 rgba(255,255,255,.75);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
#backToTop::after {
    content: "✧";
    position: absolute;
    top: -9px;
    right: -6px;
    font-size: 16px;
    line-height: 1;
    color: #7e71e0;
    text-shadow: 0 1px 0 #f8fbff;
}
#backToTop:hover,
#backToTop:focus-visible {
    background: linear-gradient(145deg, rgba(252,253,255,.98), rgba(194,184,244,.94));
    color: #4d5bab;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 20px rgba(94,119,188,.28);
}

/* Any portrait-oriented device: zoom/crop background to the middle-left and hide right-side character art */
@media (orientation: portrait) {
    html, body {
        min-height: 100%;
        background-color: inherit;
    }

    body {
        background-repeat: no-repeat;
        background-size: auto 125vh;
        background-position: 28% top;
        background-attachment: fixed;
    }
}

/* ===== Clear distinction: body text vs links - Style 4 ===== */
body, #sidebar, #content { color: #6873a8; }
a:link, a:visited, a:active { color: #4057c7; }
a:hover { color: #a455d8; }


/* Strong text/link separation — Style 4 */
body, #sidebar, #content { color: #737ca9; }
a:link, a:visited, a:active,
a.nav:link, a.nav:visited, a.nav:active { color: #334fc9; }
a:hover, a.nav:hover { color: #b05adc; }


/* ===== Style 5 / Hundred Acre Adventure ===== */
body {
    --art-edge: min(100vw, max(61.9048vw, 117vh));
    background-color: #9fe8ef;
    background-image: url('https://dari.meowandsparkle.party/images/winnietodos.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    color: #385e58;
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
    cursor: url('../images/cursor5.png') 11 14, auto;
}
#sidebar {
    background-color: rgba(255, 246, 198, .90);
    box-shadow: 0 4px 18px rgba(82,116,84,.28);
}
#content {
    background-color: rgba(235, 249, 230, .91);
    box-shadow: 0 4px 18px rgba(82,116,84,.25);
}
#title, #title a:link, #title a:visited, #title a:hover, #title a:active {
    color: #c83a32;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
a:link, a:visited, a:active,
a.nav:link, a.nav:visited, a.nav:active {
    color: #176d8f;
}
a:hover, a.nav:hover {
    color: #d34a32;
}
a.nav:link, a.nav:visited, a.nav:active { border-bottom-color: #7cad67; }
a.nav:hover { border-bottom-color: #e18a32; background: rgba(255,185,62,.12); }
h1 {
    font-family: "Cooper Black", "Trebuchet MS", sans-serif;
    font-weight: 900;
    color: #c83a32;
    border-bottom-color: #e29b34;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
h2, h3, h4 {
    color: #337a62;
    border-bottom-color: #84a95f;
}
b, i, u, s { color: #b64c34; }
.highlightCard { border-color: #e79a2e; background: #fff4bd; }
.card-tooltip {
    border: 1px solid rgba(255,255,255,.72);
    background: rgba(255, 235, 137, .90);
    color: #704627;
    box-shadow: 0 5px 16px rgba(107,89,43,.18);
}
body, a, a:link, a:visited, a:active, a:hover, button, input, select, textarea, label, .has-card-tooltip {
    cursor: url('../images/cursor5.png') 11 14, auto !important;
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea, select {
    box-sizing: border-box;
    border: 1px dashed #79a860;
    border-radius: 3px;
    background-color: #fff7c9;
    background-image:
        radial-gradient(circle at calc(100% - 8px) 8px, rgba(220,63,48,.55) 0 1.5px, transparent 2px),
        radial-gradient(circle at calc(100% - 13px) 12px, rgba(235,154,44,.58) 0 1px, transparent 1.5px),
        radial-gradient(circle at calc(100% - 18px) 7px, rgba(46,124,98,.38) 0 1px, transparent 1.5px),
        linear-gradient(180deg, #fff9d9, #edf5c4);
    color: #355a51;
    outline: 1px solid rgba(226,155,52,.35);
    outline-offset: 2px;
    box-shadow: 0 2px 5px rgba(70,111,75,.10);
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus, select:focus {
    border-color: #d44d35;
    border-style: solid;
    outline-color: rgba(211,74,50,.30);
    background-color: #fffbe0;
    box-shadow: 0 0 0 2px rgba(226,155,52,.12), 0 3px 7px rgba(70,111,75,.10);
}
select option, select optgroup { background: #f2efb8; color: #355a51; }
input[type="button"], input[type="submit"], input[type="reset"], button {
    border: 1px dashed #d78d2c;
    border-radius: 3px;
    background: #f6c94e;
    color: #7c4028;
    box-shadow: inset 0 -2px 0 rgba(166,94,28,.12), 0 2px 4px rgba(70,111,75,.10);
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
    border-style: solid;
    background: #e7663e;
    color: #fff8d7;
}
#backToTop {
    border: 1px dashed #2f765f;
    border-radius: 50%;
    background: linear-gradient(145deg,#ffd24d,#e8922e);
    color: #6d3d22;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65),0 5px 18px rgba(88,106,61,.28);
}
#backToTop::after { content: "☼"; color:#c83a32; }
#backToTop:hover,#backToTop:focus-visible { background:linear-gradient(145deg,#ef7a43,#d84c37); color:#fff8d7; }
#sidebar img[src$="/tigger.png"], #sidebar img[src$="/piglet.png"] { max-height: 82px; width:auto; vertical-align:bottom; margin:0 3px; }
#sidebar > h2:first-child img { max-width: 150px; height:auto; }
@media (orientation: portrait) {
    body { background-size: auto 125vh; background-position: 28% top; background-attachment: fixed; }
}

/* ===============================
   STYLE 6 — Eeveelutions / berries
   Final theme overrides
   =============================== */
body {
    --art-edge: min(100vw, max(61.9048vw, 117.0000vh));
    background-color: #f8f4ff;
    background-image: url(images/eeveefondo.png) !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    font-family: "Trebuchet MS", "Verdana", sans-serif;
    font-size: 14px;
    color: #5b6671;
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
    cursor: url('images/cursor6.png') 0 0, auto;
}

#container {
    width: var(--art-edge);
}

#sidebar {
    background: rgba(255, 248, 245, 0.90);
    border: 1px solid rgba(219, 150, 175, 0.55);
    box-shadow: 0 5px 20px rgba(190, 137, 159, 0.20), 0 0 0 1px rgba(255,255,255,.55) inset;
}

#content {
    background: rgba(252, 250, 255, 0.90);
    border: 1px solid rgba(176, 211, 192, 0.55);
    box-shadow: 0 5px 20px rgba(160, 198, 184, 0.18), 0 0 0 1px rgba(255,255,255,.65) inset;
}

body, a, a:link, a:visited, a:active, a:hover, button, input, select, textarea, label, .has-card-tooltip {
    cursor: url('../images/cursor6.png') 0 0, auto !important;
}

#title, #title a:link, #title a:visited, #title a:hover, #title a:active {
    font-family: "Trebuchet MS", "Verdana", sans-serif;
    color: #db6d95;
    text-shadow: 1px 1px 0 rgba(255,255,255,.7), 0 0 8px rgba(255,255,255,.2);
}

a:link, a:active, a:visited {
    color: #c25d86;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0.3px;
}

a:hover {
    color: #5fa27a;
    text-decoration: none;
    font-weight: bold;
}

a.nav:link, a.nav:visited, a.nav:active {
    color: #c25d86;
    border-bottom: 1px dashed #e7a9bf;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

a.nav:hover {
    color: #5fa27a;
    border-bottom: 1px dashed #8bc9a5;
}

h1 {
    font-family: "Trebuchet MS", "Verdana", sans-serif;
    font-weight: bold;
    font-size: 34px;
    line-height: 34px;
    letter-spacing: 2px;
    text-transform: none;
    color: #db6d95;
    border-bottom: 1px dashed #e8a9bf;
    text-shadow: 1px 1px 0 rgba(255,255,255,.75);
}

h2, h3, h4 {
    font-family: "Trebuchet MS", "Verdana", sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    color: #6fa382;
    border-bottom: 1px dashed #b7ddc3;
    text-shadow: 1px 1px 0 rgba(255,255,255,.75);
}

b, i, u, s {
    color: #d96f91;
}

.highlightCard {
    border: 2px solid #9fd3b2;
    background: rgba(244, 255, 248, 0.95);
}

.card-tooltip {
    background: rgba(255, 249, 245, 0.96);
    border: 1px dashed #e6aac1;
    color: #57636d;
    box-shadow: 0 10px 24px rgba(146, 173, 162, 0.18);
}

.card-tooltip .tooltip-title {
    color: #c25d86;
    border-bottom: 1px dashed rgba(194, 93, 134, 0.28);
}

.card-tooltip .tooltip-line b {
    color: #6fa382;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    box-sizing: border-box;
    border: 1px dashed #e6aac1;
    border-radius: 4px;
    background-color: rgba(255, 252, 248, 0.96);
    background-image:
        radial-gradient(circle at calc(100% - 8px) 8px, rgba(217,111,145,.55) 0 1.6px, transparent 2px),
        radial-gradient(circle at calc(100% - 13px) 12px, rgba(255,188,105,.70) 0 1.2px, transparent 1.7px),
        radial-gradient(circle at calc(100% - 19px) 7px, rgba(111,163,130,.45) 0 1.2px, transparent 1.7px),
        linear-gradient(180deg, rgba(255,248,252,.98), rgba(250,255,252,.98));
    color: #5b6671;
    outline: 1px solid rgba(159, 211, 178, 0.45);
    outline-offset: 2px;
    box-shadow: 0 2px 6px rgba(186, 154, 170, 0.10);
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    border-color: #6fa382;
    border-style: solid;
    background-color: #fffdfb;
    outline-color: rgba(111,163,130,.45);
    box-shadow: 0 0 0 2px rgba(233, 176, 197, 0.12), 0 3px 8px rgba(155, 181, 168, 0.15);
}

select option,
select optgroup {
    background: #fff7fb;
    color: #5b6671;
}

input[type=button], input[type=submit], input[type=reset], button {
    background: linear-gradient(180deg, #ffd3e1, #f4a7bf);
    border: 1px dashed #d96f91;
    border-radius: 4px;
    color: #7a4257;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 6px rgba(186, 154, 170, 0.12);
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover,
input[type=button]:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, button:focus-visible {
    background: linear-gradient(180deg, #c7f0d6, #96d4ad);
    border-style: solid;
    color: #3f6a52;
}

body::-webkit-scrollbar,
textarea::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
    background-color: #fff7fa;
    border-left: 1px solid #b7ddc3;
}

body::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
    background-color: #ef9ab8;
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
    background-color: #8dcaa4;
}

#backToTop {
    border: 1px dashed #d96f91;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffdbe7, #f4a9c1);
    color: #7a4257;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 5px 18px rgba(186, 154, 170, 0.24);
}

#backToTop::after {
    content: "✦";
    color: #6fa382;
}

#backToTop:hover,
#backToTop:focus-visible {
    background: linear-gradient(145deg, #c7f0d6, #96d4ad);
    color: #3f6a52;
}

#sidebar > h2:first-child img {
    max-width: 150px;
    height: auto;
}

#sidebar img[src$="/snorlax.png"],
#sidebar img[src$="/squirtle.png"] {
    max-height: 82px;
    width: auto;
    vertical-align: bottom;
    margin: 0 3px;
}

#sidebar a[href*="/panel"] img,
#sidebar a[href*="/panel/"] img {
    max-width: 120px;
    height: auto;
}

@media (orientation: portrait) {
    body {
        background-size: auto 125vh;
        background-position: 28% top;
        background-attachment: fixed;
    }
}

/* ===== Style 7: Sailor neon galaxy theme ===== */
body {
    /* Same background behavior as the other themes. */
    --art-edge: min(100vw, max(61.9048vw, 117.0000vh));
    background-color: #05020a;
    background-image: url(images/sailorfondo.png) !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    color: #d8c8ff;
    text-shadow: 0 1px 0 rgba(8, 5, 22, .85);
    filter: none;
    cursor: url('images/cursor7.png') 11 14, auto;
}

#title, #title a:link, #title a:visited, #title a:hover, #title a:active {
    color: #ff7fd8;
    text-shadow: 0 0 8px rgba(255, 127, 216, .30), 0 1px 0 rgba(255,255,255,.18);
    filter: none;
}

#sidebar {
    background: rgba(8, 10, 24, 0.82);
    color: #ede7ff;
    border: 1px solid rgba(255, 127, 216, .28);
    box-shadow: 0 0 0 1px rgba(126, 220, 255, .22), 0 8px 26px rgba(0, 0, 0, .42);
}

#content {
    background: rgba(9, 12, 28, 0.80);
    color: #ede7ff;
    border: 1px solid rgba(126, 220, 255, .24);
    box-shadow: 0 0 0 1px rgba(255, 127, 216, .16), 0 8px 26px rgba(0, 0, 0, .40);
}

#footer, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
    color: #f7b7ec;
}

a:link, a:active, a:visited {
    color: #7edcff;
    text-shadow: 0 0 6px rgba(89, 204, 255, .18);
}
a:hover {
    color: #ff8edd;
    text-shadow: 0 0 8px rgba(255, 142, 221, .28);
}

a.nav:link, a.nav:visited, a.nav:active {
    color: #90e2ff;
    border-bottom: 1px dashed #7a6cff;
    text-shadow: 0 0 6px rgba(126, 220, 255, .16);
}

a.nav:hover {
    color: #ff9be3;
    border-bottom: 1px dashed #ff7fd8;
    text-shadow: 0 0 8px rgba(255, 155, 227, .24);
}

h1 {
    color: #ffd770;
    border-bottom: 1px dashed #ff7fd8;
    text-shadow: 0 0 10px rgba(255, 215, 112, .18);
    filter: none;
}

h2, h3, h4 {
    color: #ff9be3;
    border-bottom: 1px dashed #6ecbff;
    text-shadow: 0 0 8px rgba(255, 155, 227, .20);
    filter: none;
}

b, i, u, s {
    color: #ffd770;
}

.highlightCard {
    border: 2px solid #7ddfff;
    background: rgba(32, 28, 66, .92);
}

textarea,
input,
select {
    background-color: rgba(18, 13, 41, .92);
    color: #eadcff;
    border-color: #7ddfff;
}

.card-tooltip {
    border: 1px solid rgba(255, 187, 234, .40);
    background: rgba(30, 20, 58, .88);
    color: #ffe0f6;
    text-shadow: 0 1px 0 rgba(8, 5, 22, .85);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .30);
}

body::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
    background-color: #16102f;
    border-left: 1px solid #7a6cff;
}

body::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
    background-color: #ff7fd8;
}

body::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
    background-color: #78d7ff;
}

/* Cursor for all interactive elements */
body, a, a:link, a:visited, a:active, a:hover, button, input, select, textarea, label, .has-card-tooltip {
    cursor: url('images/cursor7.png') 11 14, auto !important;
}

/* Decorative neon form controls */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    border: 1px dashed #75d4ff;
    border-radius: 4px;
    background-color: rgba(22, 16, 48, .95);
    background-image:
        radial-gradient(circle at calc(100% - 10px) 8px, rgba(255, 130, 219, .55) 0 1.4px, transparent 1.8px),
        radial-gradient(circle at calc(100% - 16px) 12px, rgba(255, 220, 122, .35) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at calc(100% - 7px) 15px, rgba(117, 212, 255, .35) 0 1.2px, transparent 1.8px),
        linear-gradient(180deg, rgba(38, 29, 79, .96), rgba(20, 15, 44, .94));
    color: #f6ecff;
    outline: 1px solid rgba(255, 127, 216, .26);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    border-color: #ff8ee1;
    border-style: solid;
    outline-color: rgba(117, 212, 255, .30);
    background-color: rgba(28, 20, 58, .98);
    box-shadow: 0 0 0 2px rgba(255, 142, 225, .10), 0 0 12px rgba(117, 212, 255, .10);
}
input[type="button"], input[type="submit"], input[type="reset"], button {
    border: 1px dashed #ff8ee1;
    border-radius: 4px;
    background: linear-gradient(180deg, #32235f, #20163f);
    color: #ffe597;
    box-shadow: inset 0 -2px 0 rgba(255,127,216,.12), 0 2px 5px rgba(0,0,0,.16);
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
    border-style: solid;
    background: linear-gradient(180deg, #422f79, #281b52);
    color: #ffadf2;
}
select,
select option,
select optgroup {
    background: #1e163f;
    color: #f6ecff;
}

/* Back to top theme */
#backToTop {
    border: 1px dashed #ff8ee1;
    background: linear-gradient(145deg, #2d2155, #1b1238);
    color: #ffe597;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 5px 18px rgba(0,0,0,.28);
}
#backToTop::after {
    content: "✦";
    color: #78d7ff;
}
#backToTop:hover,
#backToTop:focus-visible {
    background: linear-gradient(145deg, #412f74, #26194e);
    color: #ffadf2;
}

/* Style 7 sidebar graphics */
#sidebar > h2:first-child img {
    max-width: 160px;
    height: auto;
}
#sidebar a[href*="/panel"] img,
#sidebar a[href*="/panel/"] img {
    max-width: 112px;
    height: auto;
}
#sidebar img[src$="/marte.png"],
#sidebar img[src$="/venus.png"] {
    max-height: 64px;
    width: auto;
    vertical-align: bottom;
    margin: 0 2px;
}

/* Same portrait background behavior as the other themes. */
@media (orientation: portrait) {
    body {
        background-size: auto 125vh;
        background-position: 28% top;
        background-attachment: fixed;
    }
}


/* ===== Final custom h1 font - Style 7 ===== */
@font-face {
    font-family: "ShardeeH1";
    src: url("fonts/style7-shardee.woff2") format("woff2");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}
h1 {
    font-family: "ShardeeH1", "Trebuchet MS", Trebuchet, Arial, sans-serif;
    font-weight: normal;
}

/* ===== Style 7 final palette: galaxy-neon-pastel ===== */
body {
    color: #51496f;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

#sidebar {
    background: linear-gradient(145deg, rgba(250,239,255,.91), rgba(235,246,255,.89));
    color: #51496f;
    border: 1px solid rgba(204,108,255,.48);
    box-shadow: 0 5px 22px rgba(110,70,200,.16), 0 0 0 1px rgba(92,207,242,.22) inset;
}

#content {
    background: linear-gradient(145deg, rgba(239,244,255,.91), rgba(251,240,255,.89));
    color: #51496f;
    border: 1px solid rgba(92,207,242,.46);
    box-shadow: 0 5px 22px rgba(86,89,180,.15), 0 0 0 1px rgba(255,91,190,.18) inset;
}

#title, #title a:link, #title a:visited, #title a:hover, #title a:active {
    color: #7a4fd0;
    text-shadow: 0 0 8px rgba(255,79,180,.18), 1px 1px 0 rgba(255,255,255,.72);
}

#footer, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
    color: #9a3cb9;
}

a:link, a:active, a:visited {
    color: #d838a0;
    text-shadow: none;
}
a:hover {
    color: #008daa;
    text-shadow: 0 0 7px rgba(92,207,242,.26);
}

a.nav:link, a.nav:visited, a.nav:active {
    color: #aa3ec7;
    border-bottom-color: #bc75df;
    text-shadow: 0 1px 0 rgba(255,255,255,.62);
}
a.nav:hover {
    color: #008fae;
    border-bottom-color: #48bfdc;
    background: rgba(92,207,242,.08);
}

h1 {
    color: #7048c8;
    border-bottom-color: #e04ab1;
    text-shadow: 0 0 8px rgba(112,72,200,.16), 1px 1px 0 rgba(255,255,255,.78);
}

h2, h3, h4 {
    color: #007f9d;
    border-bottom-color: #70cbe3;
    text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

b, i, u, s { color: #9a3cb9; }

.highlightCard {
    border-color: #58cce8;
    background: rgba(246,239,255,.96);
}

.card-tooltip {
    background: rgba(69,52,111,.96);
    border: 1px solid rgba(116,222,255,.78);
    color: #fff4ff;
    text-shadow: 0 1px 0 rgba(25,15,51,.78);
    box-shadow: 0 8px 20px rgba(77,53,135,.26), 0 0 12px rgba(255,95,195,.12);
}
.card-tooltip .tooltip-title { color: #ffd86e; }
.card-tooltip .tooltip-line b { color: #8ee8ff; }

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    border-color: #b765da;
    background-color: rgba(248,244,255,.96);
    background-image:
        radial-gradient(circle at calc(100% - 8px) 8px, rgba(255,79,180,.58) 0 1.6px, transparent 2px),
        radial-gradient(circle at calc(100% - 13px) 12px, rgba(69,205,238,.58) 0 1.2px, transparent 1.7px),
        radial-gradient(circle at calc(100% - 19px) 7px, rgba(244,188,73,.50) 0 1.2px, transparent 1.7px),
        linear-gradient(180deg, rgba(255,247,255,.98), rgba(232,247,255,.96));
    color: #51496f;
    outline-color: rgba(92,207,242,.35);
    box-shadow: 0 2px 7px rgba(107,78,178,.10);
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    border-color: #e64ab4;
    background-color: #fffaff;
    outline-color: rgba(65,193,226,.40);
    box-shadow: 0 0 0 2px rgba(230,74,180,.09), 0 0 10px rgba(72,191,220,.12);
}

select, select option, select optgroup {
    background: #f4efff;
    color: #51496f;
}

input[type=button], input[type=submit], input[type=reset], button {
    background: linear-gradient(135deg, #d889f2, #75d9f0);
    border-color: #9a4fc2;
    color: #46305f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 7px rgba(103,75,170,.13);
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover,
input[type=button]:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, button:focus-visible {
    background: linear-gradient(135deg, #ff78c7, #72e0f3);
    color: #3f315b;
}

body::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track {
    background-color: #efe9ff;
    border-left-color: #a76ad2;
}
body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {
    background-color: #d95bb5;
}
body::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover {
    background-color: #45bcd9;
}

#backToTop {
    border-color: #b14fc9;
    background: linear-gradient(145deg, #d98bf2, #70d9ef);
    color: #493363;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.66), 0 5px 18px rgba(96,70,159,.22);
}
#backToTop::after { color: #fff1a4; }
#backToTop:hover,#backToTop:focus-visible {
    background: linear-gradient(145deg, #ff78c7, #65dff1);
    color: #46305f;
}


/* ===== Style 7 FINAL palette: Sailor Moon moonlight / sailor-uniform =====
   Midnight navy + moonlight lavender + sailor red/pink + royal blue/cyan + gold. */
body {
    color: #eee9ff;
    text-shadow: 0 1px 0 rgba(3, 5, 22, .86);
}

#sidebar {
    background: linear-gradient(145deg, rgba(13, 17, 48, .88), rgba(34, 25, 71, .84));
    color: #f0ebff;
    border: 1px solid rgba(255, 204, 100, .44);
    box-shadow: 0 0 0 1px rgba(87, 185, 255, .18) inset, 0 7px 24px rgba(0, 0, 18, .42);
}

#content {
    background: linear-gradient(145deg, rgba(10, 15, 43, .86), rgba(27, 21, 62, .83));
    color: #eee9ff;
    border: 1px solid rgba(109, 191, 255, .34);
    box-shadow: 0 0 0 1px rgba(255, 102, 170, .13) inset, 0 7px 24px rgba(0, 0, 18, .40);
}

#title, #title a:link, #title a:visited, #title a:hover, #title a:active {
    color: #ffd66b;
    text-shadow: 0 0 10px rgba(255, 214, 107, .28), 0 1px 0 #241a4e;
}

#footer, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
    color: #f1b7df;
}

a:link, a:active, a:visited {
    color: #78d8ff;
    text-shadow: 0 0 7px rgba(120, 216, 255, .18);
}
a:hover {
    color: #ff73b9;
    text-shadow: 0 0 8px rgba(255, 115, 185, .28);
}

a.nav:link, a.nav:visited, a.nav:active {
    color: #f7bfdc;
    border-bottom-color: rgba(255, 211, 105, .48);
    text-shadow: 0 1px 0 rgba(19, 13, 54, .9);
}
a.nav:hover {
    color: #83dcff;
    border-bottom-color: #ff70b5;
    background: rgba(79, 129, 255, .10);
}

h1 {
    color: #ffd86e;
    border-bottom-color: #ff69ad;
    text-shadow: 0 0 10px rgba(255, 216, 110, .24), 0 2px 0 rgba(53, 34, 105, .78);
}

h2, h3, h4 {
    color: #ff82bd;
    border-bottom-color: #66cfff;
    text-shadow: 0 0 7px rgba(255, 130, 189, .20), 0 1px 0 rgba(20, 14, 54, .9);
}

b, i, u, s { color: #ffd875; }

.highlightCard {
    border-color: #79d8ff;
    background: rgba(39, 35, 92, .92);
}

.card-tooltip {
    background: rgba(20, 19, 58, .97);
    border: 1px solid rgba(255, 117, 184, .64);
    color: #f9f4ff;
    text-shadow: 0 1px 0 rgba(2, 4, 18, .9);
    box-shadow: 0 9px 24px rgba(0, 0, 24, .42), 0 0 12px rgba(92, 192, 255, .10);
}
.card-tooltip .tooltip-title {
    color: #ffd86e;
    border-bottom-color: rgba(255, 216, 110, .34);
}
.card-tooltip .tooltip-line b { color: #82ddff; }

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    border-color: #628eea;
    background-color: rgba(24, 26, 69, .96);
    background-image:
        radial-gradient(circle at calc(100% - 8px) 8px, rgba(255,105,173,.55) 0 1.6px, transparent 2px),
        radial-gradient(circle at calc(100% - 13px) 12px, rgba(255,216,110,.52) 0 1.2px, transparent 1.7px),
        radial-gradient(circle at calc(100% - 19px) 7px, rgba(102,207,255,.50) 0 1.2px, transparent 1.7px),
        linear-gradient(180deg, rgba(39,39,92,.98), rgba(22,22,61,.97));
    color: #f4efff;
    outline-color: rgba(255, 108, 177, .28);
    box-shadow: 0 2px 8px rgba(0, 0, 20, .25);
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    border-color: #ff72b9;
    background-color: rgba(31, 31, 78, .99);
    outline-color: rgba(107, 207, 255, .34);
    box-shadow: 0 0 0 2px rgba(255, 110, 183, .08), 0 0 11px rgba(99, 202, 255, .12);
}

select, select option, select optgroup {
    background: #1b1b4a;
    color: #f4efff;
}

input[type=button], input[type=submit], input[type=reset], button {
    background: linear-gradient(135deg, #3159b8, #784493);
    border-color: #ff79ba;
    color: #fff1b6;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 7px rgba(0,0,25,.28);
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover,
input[type=button]:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, button:focus-visible {
    background: linear-gradient(135deg, #426dcc, #b04889);
    color: #ffffff;
}

body::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track {
    background-color: #15153b;
    border-left-color: #4d6fc9;
}
body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {
    background-color: #e6579e;
}
body::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover {
    background-color: #65c9f2;
}

#backToTop {
    border-color: #ff76b8;
    background: linear-gradient(145deg, #273f8d, #6b397f);
    color: #ffe590;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 5px 18px rgba(0,0,25,.32);
}
#backToTop::after { color: #7ddcff; }
#backToTop:hover,#backToTop:focus-visible {
    background: linear-gradient(145deg, #355db2, #a74386);
    color: #fff4c3;
}


/* ===== Unified panel coherence: all 7 themes =====
   Same translucency, radius and shadow language; theme colors stay individual. */
#sidebar {
    background: rgba(35,43,88, 0.94) !important;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(76,102,173, 0.28);
}

#content {
    background: rgba(42,50,96, 0.94) !important;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(76,102,173, 0.25);
}

/* Style 7: lighter Sailor Moon panels without losing the navy/royal/moonlight identity. */
#sidebar {
    color: #f6f2ff;
    border: 1px solid rgba(255, 211, 107, .48);
}
#content {
    color: #f6f2ff;
    border: 1px solid rgba(116, 199, 255, .40);
}

/* Trading / Keeping-Future sorting safety notice */
.sorting-warning {
    max-width: 760px;
    margin: 12px auto 18px;
    padding: 11px 14px;
    box-sizing: border-box;
    border: 1px dashed currentColor;
    border-radius: 10px;
    background: rgba(255,255,255,.78);
    color: inherit;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 3px 10px rgba(0,0,0,.10);
}
.sorting-warning-title { font-weight: bold; font-size: 1.08em; margin-bottom: 2px; }
.sorting-warning-sub { margin-top: 4px; font-style: italic; }
.sorting-warning-decks { margin-top: 6px; }
.sorting-warning-deck { display: block; }
.sorting-warning b { color: inherit !important; }
.sorting-warning { background: rgba(24,32,72,.96); color: #f4efff; border-color: #ff8fc9; box-shadow: 0 0 0 1px rgba(103,196,255,.25), 0 4px 14px rgba(0,0,0,.28); }


/* ===== Unified sidebar media sizing across all themes ===== */
#sidebar {
    width: 190px;
    padding: 10px;
    box-sizing: content-box;
}
#sidebar > h2.sidebar-decoration {
    height: 92px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
#sidebar > h2.sidebar-decoration img {
    display: block;
    max-width: 154px !important;
    max-height: 82px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}
#sidebar > center.panel-mascot {
    height: 142px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
#sidebar > center.panel-mascot br { display: none; }
#sidebar > center.panel-mascot a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
#sidebar > center.panel-mascot img {
    display: block;
    max-width: 150px !important;
    max-height: 126px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}
#sidebar > center.trade-buddies {
    height: 90px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: visible;
}
#sidebar > center.trade-buddies a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
}
#sidebar > center.trade-buddies img {
    display: block;
    max-width: 86px !important;
    max-height: 84px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    margin: 0 !important;
}

/* GLOBAL NEEDS LINK FIX — keep bold text inside the decorative needs link using the theme link color */
.needs-inline-link a b,
.needs-inline-link a:link b,
.needs-inline-link a:visited b,
.needs-inline-link a:active b,
.needs-inline-link a:hover b {
    color: inherit !important;
}