/* --- DYNAMIC VARIABLES --- */
:root {
    --bg-color: #1b201e;
    --bubble-color: #2a2c30;
    --bubble-radius: 12px;
    --accent-color: #8daaaf;
    --text-color: #e0e4e1;
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --secondary-bubble: #1b201e;
    --secondary-accent: #97ab92;
    --edit-btn-img: none;
    
    /* Header Fix: Matches header.php */
    --header-bg-image: url('/images/themes/theme_6997c57a082e7.png');
    
    --nav-bg: #292b2f;
    --nav-txt: #e0e4e1;
    --nav-hov: #dddddd;
    --h1-fam: inherit;
    --h1-color: #e0e4e1;
    --h1-size: 2em;
    --h1-spacing: 1px;
    --h1-g-color: #ffffff;
    --h1-g-blur: 0px;
    --bub-s-color: #e0e4e1;
    --bub-s-blur: 5px;
    --bub-border-img: none;
    --bub-border-slice: 10;
    --dec-img: none;
    --input-bg: #ffffff;
    --input-text: #333333;
    --input-border: #cccccc;
    --card-bg: #2a2c30;
    --card-border: #8daaaf;
    --card-text: #8daaaf;
    --card-min-width: 150px;
    --card-img-size: 100px;
    --card-radius: 8px;
    --card-font-size: 14px;
    --card-line-height: 1.20;
    --card-trim-img: none;
    --btn-color: #97ab92;
    --btn-hover: #a2b49d;
    --btn-padding: 8px 16px;
    --btn-font-size: 0.9em;
    --btn-radius: 6px;
    --btn-primary-text: #e0e4e1;
    --btn-primary-img: none;
    --btn-p-sc: transparent;
    --btn-p-sb: 0px;
    --btn-p-gc: #ffffff;
    --btn-p-gb: 5px;
    --btn-secondary-bg: #596268;
    --btn-secondary-hover: #788187;
    --btn-secondary-text: #e0e4e1;
    --btn-secondary-img: none;
    --btn-s-pad: 8px 16px;
    --btn-s-fs: 0.9em;
    --btn-s-rad: 6px;
    --btn-s-sc: transparent;
    --btn-s-sb: 0px;
    --btn-s-gc: #ffffff;
    --btn-s-gb: 5px;
    --btn-danger-bg: #86232c;
    --btn-danger-hover: #c82333;
    --btn-danger-text: #e0e4e1;
    --btn-danger-img: none;
    --btn-d-pad: 8px 16px;
    --btn-d-fs: 0.9em;
    --btn-d-rad: 6px;
    --btn-d-sc: transparent;
    --btn-d-sb: 0px;
    --btn-d-gc: transparent;
    --btn-d-gb: 5px;
    --f-h-bg: #4c524d;
    --f-h-txt: #8daa91;
    --f-bg-1: #2a2c30;
    --f-bg-2: #282c30;
    --f-hov: #4c524d;
    --f-brd: #dddddd;
    --f-t-c: #8daa91;
    --f-d-c: #e0e4e1;
    --f-s-c: #e0e4e1;
    --f-rad: 15px;
    --f-gap: 1px;
    --f-pad: 5px 10px;
    --f-h-pad: 8px 20px;
    --f-thick: 2px;
    --f-fs: 1em;
    --f-min-h: auto;
    --f-max-h: 200px;
    --f-icon: 50px;
}

/* --- BASE STYLES --- */
body { background-color: var(--bg-color); color: var(--text-color); font-family: var(--font-family); margin: 0; padding: 0;  }
a { color: var(--accent-color); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--h1-fam); color: var(--h1-color); letter-spacing: var(--h1-spacing); text-shadow: 0 0 var(--h1-g-blur) var(--h1-g-color); margin-top: 0; }
h1 { font-size: var(--h1-size); }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.main-content-bubble { background-color: var(--bubble-color); border-radius: var(--bubble-radius); padding: 30px; box-shadow: 0 0 var(--bub-s-blur) var(--bub-s-color); border: 2px solid var(--accent-color); border-image-source: var(--bub-border-img); border-image-slice: var(--bub-border-slice); border-image-repeat: repeat; position: relative; margin-top: 40px; z-index: 1; }
.main-content-bubble::before { content: ''; position: absolute; top: -50px; left: 0; right: 0; height: 120px; background-image: var(--dec-img); background-size: contain; background-position: center top; background-repeat: no-repeat; pointer-events: none; z-index: 2; }
input[type="text"], input[type="password"], input[type="email"], textarea, select { padding: 10px; background-color: var(--input-bg); color: var(--input-text); border: 1px solid var(--input-border); border-radius: 6px; width: 100%; box-sizing: border-box; margin-bottom: 15px; font-family: inherit; }
.btn, button, input[type="submit"] { background-color: var(--btn-color); color: var(--btn-primary-text); background-image: var(--btn-primary-img); background-size: cover; background-position: center; border: none; padding: var(--btn-padding); font-size: var(--btn-font-size); border-radius: var(--btn-radius); box-shadow: 0 2px var(--btn-p-sb) var(--btn-p-sc); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; transition: all 0.3s ease; box-sizing: border-box; font-family: inherit; }
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--card-min-width, 150px)); gap: 15px; margin-top: 15px; justify-content: start; align-items: start; }
.pet-card { background-color: var(--card-bg, #ffffff); border: 1px solid var(--card-border, #dddddd); border-radius: var(--card-radius, 8px); color: var(--card-text, #333333); padding: 10px; text-align: center; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
.pet-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.pet-card img { height: var(--card-img-size, 100px); width: auto; max-width: 100%; object-fit: contain; position: relative; z-index: 1; margin-top: 5px; }
.landing-layout { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.landing-layout__columns { display: grid; grid-template-columns: 25% 75%; gap: 15px; align-items: start; }
.landing-news-scrollbox { max-height: 350px; overflow-y: auto; padding-right: 10px; margin-top: 15px; }
.landing-block { background-color: var(--bubble-color, #ffffff); border-radius: var(--bubble-radius, 8px); padding: 15px; box-shadow: 0 0 var(--bub-s-blur, 5px) var(--bub-s-color, rgba(0,0,0,0.1)); border: 2px solid var(--accent-color); border-image-source: var(--bub-border-img, none); border-image-slice: var(--bub-border-slice, 10); border-image-repeat: repeat; box-sizing: border-box; }
@media (max-width: 768px) { .landing-layout__columns { grid-template-columns: 35% 65%; } .landing-forum-list { grid-template-columns: 1fr; } }