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: uppercase;
	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; }
}


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


/* ===== Unified panel coherence: all 7 themes =====
   Same translucency, radius and shadow language; theme colors stay individual. */
#sidebar {
    background: rgba(255,246,198, 0.94) !important;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(82,116,84, 0.28);
}

#content {
    background: rgba(235,249,230, 0.94) !important;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(82,116,84, 0.25);
}