/* Styles primarily from search.html, with home.html specific additions for its unique content */
:root {
    /* Default Color Theme: Yume Purple (from search.html) */
    --primary-color-base: #ae70ff;
    --primary-color-darker-base: #8a58cc;
    --primary-color-rgb-base: 174, 112, 255;
    --primary-color-glow-base: rgba(174, 112, 255, 0.25);

    /* Dynamic variables (from search.html) */
    --primary-color: var(--primary-color-base);
    --primary-color-darker: var(--primary-color-darker-base);
    --primary-color-rgb: var(--primary-color-rgb-base);
    --primary-color-glow: var(--primary-color-glow-base);

    /* Default UI Mode: Dark (from search.html) */
    --bg-color: #0c0c0f;
    --bg-color-rgb-raw: 12, 12, 15;
    --bg-color-lighter: #131318;
    --card-bg-color: #1a1a20;
    --text-color: #e8e8ea;
    --text-color-muted: #8a8a93;
    --border-color: rgba(255, 255, 255, 0.07);
    --input-bg-color: var(--bg-color-lighter);
    --input-focus-bg-color: var(--card-bg-color);
    --search-bar-bg: var(--card-bg-color);
    --search-bar-hover-bg: #222228;
    --navbar-bg: rgba(18,18,24,.85);
    --modal-bg: var(--bg-color-lighter); /* Used by search.html, also applies to home.html modal if not overridden */
    --btn-secondary-bg: rgba(var(--primary-color-rgb), 0.1);
    --btn-secondary-border: rgba(var(--primary-color-rgb), 0.3);
    --btn-secondary-hover-bg: rgba(var(--primary-color-rgb), 0.2);
    --btn-secondary-text: var(--primary-color);

    --focus-ring-color: rgba(var(--primary-color-rgb), 0.4);
    --navbar-height: 60px;
    --mobile-navbar-height: 55px;
    --border-radius-main: 8px; /* from search.html */
    --border-radius-small: 5px; /* from search.html */
    --box-shadow-main: 0 5px 15px rgba(0, 0, 0, 0.35);
    --transition-speed: 0.2s;
    --menu-animation-speed: 0.3s;
    --link-animation-speed: 0.25s;
    --reveal-speed: 0.3s;
    --danger-color: #ff5b5b;
    --danger-color-darker: #e05252;
    --success-color: #51cf66;
    --success-text-color: var(--bg-color);
    --warning-color: #ffc107;
    --warning-text-color: var(--bg-color);
    --font-body: 'Poppins', sans-serif;
    --ui-font-family: 'Inter', 'Poppins', sans-serif;
    --control-element-height: 36px; /* from search.html */

    --kinetic-loader-bg: rgba(var(--bg-color-rgb-raw), 0.92);
    --kinetic-loader-text-color: #c7ecee;
    --kinetic-loader-subtext-color: #9a9aae;

    /* Variables added/kept from home.html for its specific content */
    --text-color-on-primary: #ffffff; /* from home.html, for buttons etc. */
    --danger-color-rgb: 255, 91, 91; /* from home.html */
    --warning-color-rgb: 255, 193, 7; /* from home.html */
    --content-padding: 25px; /* from home.html, for main-content on home page */
    --spotlight-height-desktop: 500px; /* from home.html */
    --spotlight-height-tablet: 350px; /* from home.html */
    --spotlight-height-mobile: 200px; /* from home.html */
    --bg-color-rgb-light-raw: 244, 246, 248; /* from home.html, for light mode gradient consistency */
}

body.light-mode {
    /* from search.html */
    --bg-color: #f4f6f8;
    --bg-color-rgb-raw: 244, 246, 248;
    --bg-color-lighter: #ffffff;
    --card-bg-color: #ffffff;
    --text-color: #212529;
    --text-color-muted: #6c757d;
    --border-color: rgba(0, 0, 0, 0.1);
    --input-bg-color: #e9ecef;
    --input-focus-bg-color: #ffffff;
    --search-bar-bg: #e9ecef;
    --search-bar-hover-bg: #dfe3e7;
    --navbar-bg: rgba(255,255,255,.85);
    --box-shadow-main: 0 5px 15px rgba(0, 0, 0, 0.1);
    --modal-bg: #ffffff;
    --success-text-color: #ffffff;
    --warning-text-color: #212529;
    --btn-secondary-text: var(--primary-color);
    --kinetic-loader-text-color: var(--primary-color-darker);
    --kinetic-loader-subtext-color: var(--text-color-muted);
    /* --text-color-on-primary: #ffffff; already in home.html's :root and will be used if not overridden by themes here */
}

/* Color themes from search.html */
body[data-color-theme="yume-purple"] { /* Default */ }
body[data-color-theme="ocean-blue"] { --primary-color: #007bff; --primary-color-darker: #0056b3; --primary-color-rgb-base: 0, 123, 255; --primary-color-glow-base: rgba(0, 123, 255, 0.25); }
body[data-color-theme="phoenix-red"] { --primary-color: #dc3545; --primary-color-darker: #a71d2a; --primary-color-rgb-base: 220, 53, 69; --primary-color-glow-base: rgba(220, 53, 69, 0.25); }
body[data-color-theme="graceful-green"] { --primary-color: #28a745; --primary-color-darker: #1e7e34; --primary-color-rgb-base: 40, 167, 69; --primary-color-glow-base: rgba(40, 167, 69, 0.25); /* home.html added --text-color-on-primary: #ffffff; here, search.html does not */ }
body[data-color-theme="princess-pink"] { --primary-color: #ff69b4; --primary-color-darker: #d63384; --primary-color-rgb-base: 255, 105, 180; --primary-color-glow-base: rgba(255, 105, 180, 0.25); /* home.html added --text-color-on-primary: #1f2937; here, search.html does not */ }

/* Additional text-color-on-primary definitions from home.html for specific themes, if needed by navbar/footer buttons */
body[data-color-theme="graceful-green"] { --text-color-on-primary: #ffffff;}
body[data-color-theme="princess-pink"] { --text-color-on-primary: #1f2937;}


/* Base styles from search.html */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-body); }
html, body { height: 100%; }
body {
    background-color: var(--bg-color); color: var(--text-color);
    min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column;
    font-size: 14px; line-height: 1.6;
    opacity: 0; transition: background-color var(--transition-speed), color var(--transition-speed), opacity var(--reveal-speed) ease-in-out;
}
body.loaded { opacity: 1; }
a { color: var(--primary-color); text-decoration: none; transition: color var(--transition-speed); }
a:hover { color: var(--primary-color-darker); }
button { cursor: pointer; transition: all var(--transition-speed) ease; font-family: var(--ui-font-family); border: none; background: none; }
img { max-width: 100%; height: auto; display: block; }
input, select, textarea { font-family: inherit; }

/* --- Desktop Navbar (from search.html) --- */
.top-navbar{
    position:fixed; top:0; left:0; width:100%; height:var(--navbar-height);
    background-color:var(--navbar-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    display:flex; align-items:center; justify-content:space-between; padding:0 20px;
    border-bottom:1px solid var(--border-color); z-index:1000; gap:20px;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}
.navbar-left{display:flex;align-items:center;gap:25px}
.navbar-brand{ font-size:24px; font-weight:700; color:var(--primary-color); display:flex; align-items:center; transition:color var(--transition-speed); text-decoration:none; }
.navbar-brand i{margin-right:8px;font-size:26px}
.navbar-brand:hover{color:var(--primary-color-darker)}
.navbar-right{display:flex;align-items:center;gap:20px}
.navbar-links a{ color:var(--text-color-muted); text-decoration:none; margin-left:20px; transition:color var(--transition-speed); font-size:15px; font-weight:500; font-family: var(--ui-font-family); position: relative; padding-bottom: 5px; }
.navbar-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: width var(--transition-speed) ease-in-out; }
.navbar-links a:hover::after, .navbar-links a.active::after { width: 100%; }
.navbar-links a:hover, .navbar-links a.active{color:var(--primary-color)}
.search-bar { display: flex; align-items: center; background-color: var(--search-bar-bg); border-radius: var(--border-radius-main); padding: 0 15px; width: 100%; max-width: 280px; height: var(--control-element-height); border: 1px solid var(--border-color); transition: background-color var(--transition-speed), border-color var(--transition-speed); }
.search-bar:hover { background-color: var(--search-bar-hover-bg); border-color: var(--primary-color); }
.search-bar:focus-within { border-color: var(--primary-color); box-shadow: none; }
.search-bar input { flex-grow: 1; background: transparent; border: none; color: var(--text-color); padding: 6px 0; width: 100%; outline: none; font-size: 14px; font-family: var(--ui-font-family); }
.search-bar input::placeholder { color: var(--text-color-muted); opacity: 0.6; }
.search-bar:hover input::placeholder { color: var(--text-color); opacity: 0.7; }
.search-bar i { color: var(--text-color-muted); margin-right: 12px; font-size: 15px; flex-shrink: 0; }
.search-bar:hover i { color: var(--primary-color); }

#navbar-user-area { position: relative; display: flex; align-items: center; }
.user-profile-container { position: relative; }
.user-profile{ display:flex;align-items:center;cursor:pointer; padding:4px 8px 4px 4px; border-radius:50px; transition:background-color var(--transition-speed); background-color: transparent; }
.user-profile.active, .user-profile:hover{ background-color:rgba(var(--primary-color-rgb),.12); }
body.light-mode .user-profile.active, body.light-mode .user-profile:hover { background-color: rgba(0,0,0,.08); }
.user-profile img{width:32px;height:32px;border-radius:50%;margin-right:8px; object-fit: cover; background-color: var(--card-bg-color);}
.user-profile span{font-weight:500;font-size:14px; white-space: nowrap; font-family: var(--ui-font-family); color: var(--text-color);}

/* .setup-btn style from search.html (this will affect the home.html setup button if it's shown in navbar) */
.setup-btn { background-color: var(--primary-color); color: var(--bg-color); padding: 0 18px; border-radius: 50px; font-size: 13px; font-weight: 600; height:var(--control-element-height); line-height: var(--control-element-height); }
body.light-mode .setup-btn { color: #fff; } /* search.html specific light mode for setup btn */
body[data-color-theme="princess-pink"].light-mode .setup-btn,
body[data-color-theme="yume-purple"].light-mode .setup-btn { color: var(--bg-color); } /* from search.html, home.html had similar for yume-purple */
.setup-btn:hover { background-color: var(--primary-color-darker); transform: scale(1.03); }


.profile-dropdown {
    position: fixed; background-color: var(--bg-color-lighter);
    border-radius: var(--border-radius-main); box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color); width: 190px; z-index: 1100;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.15s ease, visibility 0s linear 0.15s, transform 0.15s ease; padding: 6px;
}
body.light-mode .profile-dropdown { box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.profile-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.15s ease, visibility 0s linear 0s, transform 0.15s ease; }
.profile-dropdown a { display: flex; align-items: center; padding: 8px 12px; color: var(--text-color-muted); font-size: 13px; font-weight: 500; border-radius: var(--border-radius-small); transition: background-color var(--transition-speed), color var(--transition-speed); font-family: var(--ui-font-family);}
.profile-dropdown a i { margin-right: 10px; width: 16px; text-align: center; }
.profile-dropdown a:hover { background-color: var(--primary-color-glow); color: var(--primary-color); }
.profile-dropdown a:hover i { color: var(--primary-color); }

.loading-spinner-navbar { border: 2px solid rgba(var(--primary-color-rgb),.2); border-radius: 50%; border-top: 2px solid var(--primary-color); width: 22px; height: 22px; animation: spin 1s linear infinite; display: inline-block; margin: auto; }
body.light-mode .loading-spinner-navbar { border: 2px solid rgba(0,0,0,.1); border-top: 2px solid var(--primary-color); }
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* --- Mobile Navbar & New Horizontal Menu (from search.html) --- */
.mobile-top-navbar {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--mobile-navbar-height);
    background-color: var(--navbar-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: none; /* Will be flex by @media */
    align-items: center;
    padding: 0 10px; 
    border-bottom: 1px solid var(--border-color); z-index: 1050;
    overflow: hidden;
}
#mobile-menu-toggle-btn {
    font-size: 20px; color: var(--text-color); padding: 8px;
    order: 0;
    flex-shrink: 0;
    margin-right: 8px; 
    z-index: 1053;
}
.mobile-navbar-brand {
    font-size: 20px; font-weight: 700; color: var(--primary-color);
    display: flex; align-items: center; text-decoration: none;
    transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease, margin-left var(--transition-speed) ease, width var(--transition-speed) ease, flex-basis var(--transition-speed) ease, min-width var(--transition-speed) ease, margin-right var(--transition-speed) ease;
    flex-shrink: 0;
    order: 1;
    z-index: 1050;
    margin-right: auto;
}
 .mobile-top-navbar:not(.search-active):not(.menu-active) .mobile-navbar-brand {
    /* Centering handled by flex layout in media query */
 }

.mobile-navbar-brand .mobile-brand-icon { font-size: 22px; }
.mobile-navbar-brand .mobile-brand-text { margin-left: 6px; transition: opacity var(--transition-speed) ease, max-width var(--transition-speed) ease; opacity: 1; max-width: 150px; overflow: hidden; white-space: nowrap;}

.mobile-horizontal-menu-links {
    display: flex;
    opacity: 0;
    transform: translateY(-5px);
    pointer-events: none;
    flex-grow: 1;
    align-items: center;
    justify-content: space-evenly;
    overflow: hidden;
    padding: 0 5px;
    margin: 0;
    order: 1;
    transition: opacity var(--menu-animation-speed) ease-out, transform var(--menu-animation-speed) ease-out;
    z-index: 1049;
}
.mobile-top-navbar.menu-active .mobile-horizontal-menu-links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-horizontal-menu-links a {
    font-family: var(--ui-font-family);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-muted);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    padding: 5px 2px 7px 2px;
    line-height: normal;
    display: inline-block;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: color var(--transition-speed), opacity var(--link-animation-speed) ease-out, transform var(--link-animation-speed) ease-out;
}
.mobile-top-navbar.menu-active .mobile-horizontal-menu-links a {
    opacity: 1;
    transform: translateY(0);
}
.mobile-top-navbar.menu-active .mobile-horizontal-menu-links a:nth-child(1) { transition-delay: 0.05s, calc(var(--menu-animation-speed) * 0.2 + 0.05s), calc(var(--menu-animation-speed) * 0.2 + 0.05s); }
.mobile-top-navbar.menu-active .mobile-horizontal-menu-links a:nth-child(2) { transition-delay: 0.05s, calc(var(--menu-animation-speed) * 0.2 + 0.1s), calc(var(--menu-animation-speed) * 0.2 + 0.1s); }
.mobile-top-navbar.menu-active .mobile-horizontal-menu-links a:nth-child(3) { transition-delay: 0.05s, calc(var(--menu-animation-speed) * 0.2 + 0.15s), calc(var(--menu-animation-speed) * 0.2 + 0.15s); }
.mobile-top-navbar.menu-active .mobile-horizontal-menu-links a:nth-child(4) { transition-delay: 0.05s, calc(var(--menu-animation-speed) * 0.2 + 0.2s), calc(var(--menu-animation-speed) * 0.2 + 0.2s); }


.mobile-horizontal-menu-links a::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width var(--transition-speed) ease-in-out;
}
.mobile-horizontal-menu-links a:hover::after,
.mobile-horizontal-menu-links a.active::after {
    width: calc(100% - 4px);
}
.mobile-horizontal-menu-links a:hover,
.mobile-horizontal-menu-links a.active {
    color: var(--primary-color);
    background-color: transparent;
}

.mobile-nav-actions-right {
    display: flex;
    align-items: center;
    order: 2;
    flex-shrink: 0;
    z-index: 1052;
}
#mobile-search-icon-btn {
    font-size: 18px; color: var(--text-color); padding: 8px;
    transition: opacity var(--transition-speed), transform var(--transition-speed);
}
#mobile-navbar-user-icon-area { position: relative; margin-left: 0px; }


.mobile-inline-search-input-field {
    height: 34px; padding: 0 10px; background-color: var(--search-bar-bg);
    border: 1px solid var(--border-color); border-radius: var(--border-radius-small);
    color: var(--text-color); font-size: 14px;
    width: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    transition: width var(--transition-speed) ease,
                opacity var(--transition-speed) ease,
                visibility 0s var(--transition-speed),
                left var(--transition-speed) ease, 
                right var(--transition-speed) ease;
    z-index: 1051;
}

.mobile-top-navbar.search-active .mobile-navbar-brand {
    opacity: 0; visibility: hidden; pointer-events: none; width: 0; min-width: 0;
    margin-left: 0 !important; margin-right: 0 !important; flex-basis: 0 !important; overflow: hidden;
}
.mobile-top-navbar.search-active .mobile-brand-text {
     opacity: 0; max-width: 0; margin-left: 0;
}
.mobile-top-navbar.search-active #mobile-search-icon-btn {
    opacity: 0; transform: scale(0.7); pointer-events: none;
}
.mobile-top-navbar.search-active .mobile-horizontal-menu-links {
    opacity: 0 !important; transform: translateY(-5px) !important; pointer-events: none !important;
}
.mobile-top-navbar.search-active .mobile-inline-search-input-field {
    opacity: 1;
    visibility: visible;
    left: 47px; /* from search.html */
    right: 79px; /* from search.html */
    width: auto; 
}

.mobile-top-navbar.menu-active .mobile-navbar-brand {
    opacity: 0; transform: translateX(-15px); pointer-events: none;
    flex-basis: 0; width: 0; min-width: 0; margin-right: 0; overflow: hidden;
}
.mobile-top-navbar.menu-active #mobile-search-icon-btn {
    display: none !important;
}
.mobile-top-navbar.menu-active .mobile-inline-search-input-field {
    width: 0 !important; opacity: 0 !important; visibility: hidden !important;
    transition: width var(--transition-speed) ease, opacity var(--transition-speed) ease, visibility 0s var(--transition-speed) ease;
}

.mobile-profile-icon-btn {
    background: transparent; border: none; padding: 0; cursor: pointer;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
}
.mobile-profile-icon-btn img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); }
.mobile-profile-icon-btn.active, .mobile-profile-icon-btn:hover { background-color: rgba(var(--primary-color-rgb), 0.1); }

/* These are from search.html, related to new mobile nav elements */
.mobile-main-nav-menu, .mobile-main-nav-overlay {
    display: none !important; /* Kept as search.html defines it */
}

/* Main content styles from search.html (will affect home.html layout) */
.main-content { 
    padding: 30px; /* search.html */
    padding-top: calc(var(--navbar-height) + 30px); /* search.html */
    width: 100%; flex-grow: 1; position: relative; z-index: 1; 
}
/* --- Styles for search page specific elements (from search.html) --- */
/* These might not be directly used by home.html's primary content, but are part of search.html's CSS */
.section { margin-bottom: 40px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px;}
.section-title { font-size: 24px; font-weight: 600; border-left: 3px solid var(--primary-color); padding-left: 12px; line-height: 1.3; flex-grow: 1; }
.search-query-highlight { color: var(--primary-color); font-weight: 700; }
.filter-toggle-btn { background-color: var(--input-bg-color); border: 1px solid var(--border-color); color: var(--text-color-muted); padding: 0 15px; border-radius: var(--border-radius-main); font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; height: var(--control-element-height); font-family: var(--ui-font-family); }
.filter-toggle-btn:hover, .filter-toggle-btn.active { background-color: var(--primary-color); color: var(--bg-color); border-color: var(--primary-color); }
body.light-mode .filter-toggle-btn:hover, body.light-mode .filter-toggle-btn.active { color: #fff; }
body[data-color-theme="princess-pink"].light-mode .filter-toggle-btn:hover, body[data-color-theme="yume-purple"].light-mode .filter-toggle-btn:hover { color: var(--bg-color); }
.filter-toggle-btn .fa-chevron-down { transition: transform var(--transition-speed); }
.filter-toggle-btn.active .fa-chevron-down { transform: rotate(180deg); }
.filters-panel { background: var(--card-bg-color); padding: 20px; border-radius: var(--border-radius-main); margin-bottom: 25px; border: 1px solid var(--border-color); box-shadow: var(--box-shadow-main); display: none; }
.filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 20px; }
.filter-group label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--text-color-muted); font-family: var(--ui-font-family); }
.filter-group input[type="text"], .filter-group select { width: 100%; background-color: var(--input-bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius-small); padding: 0 12px; color: var(--text-color); font-size: 14px; appearance: none; -webkit-appearance: none; outline: none; transition: border-color var(--transition-speed), background-color var(--transition-speed), box-shadow var(--transition-speed); height: var(--control-element-height); font-family: var(--ui-font-family); }
.filter-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238a8a93' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 35px; cursor: pointer; }
body.light-mode .filter-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");}
.filter-group input[type="text"]:focus, .filter-group select:focus { border-color: var(--primary-color); background-color: var(--input-focus-bg-color); box-shadow: 0 0 0 2px var(--focus-ring-color); }
.filter-group input::placeholder { color: var(--text-color-muted); opacity: 0.7; }
.filter-group input[type="text"]::-webkit-calendar-picker-indicator { filter: invert(0.6); cursor: pointer; }
body.light-mode .filter-group input[type="text"]::-webkit-calendar-picker-indicator { filter: none; }
.filters-actions { display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--border-color); padding-top: 20px; }
.filter-action-btn { padding: 0 20px; border-radius: var(--border-radius-small); cursor: pointer; font-weight: 600; font-size: 14px; transition: all var(--transition-speed); border: none; height: var(--control-element-height); line-height:var(--control-element-height); font-family: var(--ui-font-family);}
.apply-filters-btn { background-color: var(--primary-color); color: var(--bg-color); }
body.light-mode .apply-filters-btn { color: #fff; }
body[data-color-theme="princess-pink"].light-mode .apply-filters-btn, body[data-color-theme="yume-purple"].light-mode .apply-filters-btn { color: var(--bg-color); }
.apply-filters-btn:hover { background-color: var(--primary-color-darker); transform: scale(1.02); }
.reset-filters-btn { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--btn-secondary-border); }
.reset-filters-btn:hover { background-color: var(--btn-secondary-hover-bg); border-color: var(--primary-color); }
.content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px; position: relative; } /* from search.html, will affect home.html grids */
.content-card { background-color: var(--card-bg-color); border-radius: var(--border-radius-main); overflow: hidden; cursor: pointer; transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed); position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border: 1px solid var(--border-color); z-index: 1; text-decoration: none; }
body.dark-mode .content-card { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.content-card:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 6px 15px rgba(var(--primary-color-rgb), 0.15); z-index: 10; border-color: rgba(var(--primary-color-rgb), 0.5); } /* search.html hover style */
.card-image-wrapper { position: relative; }
.card-image { width: 100%; object-fit: cover; display: block; aspect-ratio: 2 / 3; background-color: var(--bg-color-lighter); }
.card-info { padding: 12px; }
.card-title { font-size: 15px; margin-bottom: 6px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: normal; min-height: 2.4em; line-height: 1.2; color: var(--text-color); font-family: var(--font-body); }
.card-details { font-size: 12px; color: var(--text-color-muted); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 1.3em; font-family: var(--ui-font-family); }
.card-details span { display: flex; align-items: center; gap: 4px; }
.card-details .card-type { background-color: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); padding: 2px 6px; border-radius: var(--border-radius-small); font-size: 11px; font-weight: 500; }
.loading{display:flex;justify-content:center;align-items:center;padding:50px;width:100%;grid-column:1 / -1;min-height:150px}
.loading .loading-spinner { border: 3px solid rgba(var(--primary-color-rgb),.2); border-radius: 50%; border-top: 3px solid var(--primary-color); width: 30px; height: 30px; animation: spin 1s linear infinite; display: inline-block; }
body.light-mode .loading .loading-spinner { border: 3px solid rgba(0,0,0,.1); border-top: 3px solid var(--primary-color); }
.pagination-controls { display: flex; justify-content: center; align-items: center; margin-top: 30px; gap: 10px; }
.pagination-btn { background-color: var(--input-bg-color); color: var(--text-color-muted); border: 1px solid var(--border-color); padding: 0 18px; border-radius: var(--border-radius-main); cursor: pointer; font-weight: 500; transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed); font-size: 14px; height: var(--control-element-height); line-height: var(--control-element-height); font-family: var(--ui-font-family); }
.pagination-btn:hover:not(:disabled) { background-color: var(--primary-color); color: var(--bg-color); border-color: var(--primary-color); }
body.light-mode .pagination-btn:hover:not(:disabled) { color: #fff; }
body[data-color-theme="princess-pink"].light-mode .pagination-btn:hover:not(:disabled), body[data-color-theme="yume-purple"].light-mode .pagination-btn:hover:not(:disabled) { color: var(--bg-color); }
.pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--input-bg-color) !important; color: var(--text-color-muted) !important; border-color: var(--border-color) !important; }
.page-info { font-size: 13px; color: var(--text-color-muted); font-family: var(--ui-font-family); }
.message-container { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 200px; width: 100%; color: var(--text-color-muted); font-size: 16px; text-align: center; padding: 20px; grid-column: 1 / -1; }
.message-container i { font-size: 3em; margin-bottom: 15px; opacity: 0.5; }
.error-message { color: var(--danger-color); }
.error-message i { color: var(--danger-color); opacity: 1; }
.message-container .fa-wifi-slash { font-size: 2.5em; margin-right: 10px; } /* From search.html, might be useful for home.html too */
.error-message .fa-wifi-slash { color: var(--danger-color); opacity: 1;} /* From search.html */

/* --- Footer (from search.html) --- */
.site-footer { background-color: var(--bg-color-lighter); color: var(--text-color-muted); padding: 35px 20px 25px; margin-top: auto; width: 100%; flex-shrink: 0; font-size: 0.85rem; position: relative; overflow: hidden; transition: background-color var(--transition-speed), color var(--transition-speed); }
.site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-color-darker), var(--primary-color), rgba(var(--primary-color-rgb), 0.4)); }
.footer-content-condensed { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; max-width: 1200px; margin: 0 auto 25px auto; padding-bottom: 25px; border-bottom: 1px solid var(--border-color); }
.footer-logo-condensed { font-size: 1.3em; font-weight: 700; color: var(--primary-color); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color var(--transition-speed), transform 0.2s ease; }
.footer-logo-condensed:hover { color: var(--text-color); transform: scale(1.03); }
.footer-logo-condensed i { font-size: 1.3em; }
.footer-links-inline { display: flex; gap: 20px; flex-grow: 1; justify-content: center; margin: 0 15px; }
.footer-links-inline a { color: var(--text-color-muted); text-decoration: none; font-size: 0.95em; font-weight: 500; font-family: var(--ui-font-family); transition: color var(--transition-speed), transform var(--transition-speed); padding: 5px 0; position: relative; }
.footer-links-inline a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: width 0.3s ease-in-out; }
.footer-links-inline a:hover { color: var(--primary-color); transform: translateY(-2px); }
.footer-links-inline a:hover::after { width: 100%; }
.footer-socials-condensed { display: flex; gap: 12px; }
.footer-socials-condensed a { color: var(--text-color-muted); font-size: 1.25em; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: transparent; border: 1px solid transparent; transition: color var(--transition-speed), transform 0.2s ease, background-color var(--transition-speed), border-color var(--transition-speed); }
.footer-socials-condensed a:hover { color: var(--bg-color-lighter); background-color: var(--primary-color); transform: scale(1.1) translateY(-2px); } /* search.html had var(--bg-color-lighter), home.html had var(--text-color-on-primary) */
.footer-copyright-condensed { text-align: center; font-size: 0.9em; color: var(--text-color-muted); line-height: 1.6; padding-top: 0; }

/* Focus visible from search.html (home.html had slightly different selector list for buttons) */
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, .filter-toggle-btn:focus-visible { outline: 1.5px solid var(--primary-color); outline-offset: 1.5px; box-shadow: 0 0 0 2.5px var(--focus-ring-color) !important; }
.search-bar input:focus-visible, .search-bar input:focus { outline: none !important; box-shadow: none !important; }
/* Added from home.html for mobile inline search focus */
.mobile-inline-search-input-field:focus-visible, .mobile-inline-search-input-field:focus { outline: none !important; box-shadow: none !important; }


/* --- Kinetic Loader (from search.html, identical to home.html's) --- */
#kinetic-loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--kinetic-loader-bg); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; }
#kinetic-loader-overlay.visible { opacity: 1; visibility: visible; }
.kinetic-text-container { display: flex; font-size: 3.5em; font-weight: 700; perspective: 800px; color: var(--kinetic-loader-text-color); font-family: var(--ui-font-family); }
.kinetic-text-container .char { display: inline-block; opacity: 0; transform-origin: center center; animation-name: letter-appear; animation-duration: 0.8s; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-fill-mode: forwards; margin: 0 2px; }
.kinetic-text-container .char.l { animation-delay: 0.1s; animation-name: slideInFromLeft; }
.kinetic-text-container .char.o { animation-delay: 0.2s; animation-name: rotateInY; }
.kinetic-text-container .char.a { animation-delay: 0.3s; animation-name: scaleUpFadeIn; }
.kinetic-text-container .char.d { animation-delay: 0.4s; animation-name: slideInFromRight; }
.kinetic-text-container .char.i { animation-delay: 0.5s; animation-name: rotateInX; }
.kinetic-text-container .char.n { animation-delay: 0.6s; animation-name: fadeInJitter; }
.kinetic-text-container .char.g { animation-delay: 0.7s; animation-name: flipInY; }
.kinetic-text-container .char.dot { animation-name: dotPulse; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.kinetic-text-container .char.dot1 { animation-delay: 0.8s; opacity: 0; }
.kinetic-text-container .char.dot2 { animation-delay: 0.95s; opacity: 0; }
.kinetic-text-container .char.dot3 { animation-delay: 1.1s; opacity: 0; }
#kinetic-loader-subtext { margin-top: 25px; font-size: 1em; color: var(--kinetic-loader-subtext-color); letter-spacing: 1px; font-family: var(--ui-font-family); }
@keyframes slideInFromLeft { 0% { opacity: 0; transform: translateX(-80px) rotateY(20deg); } 100% { opacity: 1; transform: translateX(0) rotateY(0deg); } }
@keyframes rotateInY { 0% { opacity: 0; transform: rotateY(-90deg) scale(0.8); } 100% { opacity: 1; transform: rotateY(0deg) scale(1); } }
@keyframes scaleUpFadeIn { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slideInFromRight { 0% { opacity: 0; transform: translateX(80px) rotateY(-20deg); } 100% { opacity: 1; transform: translateX(0) rotateY(0deg); } }
@keyframes rotateInX { 0% { opacity: 0; transform: rotateX(90deg) scale(0.8); } 100% { opacity: 1; transform: rotateX(0deg) scale(1); } }
@keyframes fadeInJitter { 0% { opacity: 0; transform: translateY(20px) scale(0.9); } 70% { opacity: 0.7; transform: translateY(-5px) scale(1.05); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes flipInY { 0% { opacity: 0; transform: rotateY(180deg) scale(0.7); } 100% { opacity: 1; transform: rotateY(0deg) scale(1); } }
@keyframes dotPulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes letter-appear { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

/* --- Responsive adjustments (from search.html) --- */
@media (max-width: 1200px) { 
    /* search.html: .content-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .filters-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } */
    /* home.html for .content-grid was minmax(150px, 1fr) - search.html's rule for .content-grid (170px) will take precedence from above. */
    /* keeping specific .filters-grid from search.html for safety if home ever uses filters */
    .filters-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } 
}
@media (max-width: 992px) {
    .top-navbar { display: none; }
    .mobile-top-navbar { display: flex; }
    .main-content { padding: 20px 15px; padding-top: calc(var(--mobile-navbar-height) + 20px); }
    /* .content-grid from search.html is 170px base, responsive on search.html is 150px. home.html's original was 140px. */
    /* search.html specific: */
    .content-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
    .filters-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
    .section-title { font-size: 22px; }
}
@media (max-width: 768px) {
    .main-content { padding: 15px; padding-top: calc(var(--mobile-navbar-height) + 15px); }
    /* search.html specific: */
    .content-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; }
    .filters-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .section-title { font-size: 20px; }
    .filter-toggle-btn { font-size: 13px; padding: 0 12px; }
    .filter-action-btn { font-size: 13px; padding: 0 18px; }
    .filters-actions { gap: 10px; }
    /* Footer responsive (same in both) */
    .site-footer { padding: 25px 15px 20px; }
    .footer-content-condensed { flex-direction: column; gap: 20px; border-bottom: none; padding-bottom: 15px; margin-bottom: 15px; }
    .footer-links-inline { order: 2; margin: 0; gap: 15px; flex-wrap: wrap; justify-content: center; }
    .footer-socials-condensed { order: 3; margin-bottom: 10px; }
    .footer-logo-condensed { order: 1; }
    .footer-copyright-condensed { padding-top: 15px; border-top: 1px solid var(--border-color); }
}
@media (max-width: 576px) {
    .mobile-top-navbar:not(.search-active):not(.menu-active) .mobile-navbar-brand {
         margin-left: auto; margin-right: auto;
    }
    .mobile-top-navbar { padding: 0 5px; } 
    #mobile-menu-toggle-btn { margin-right: 2px;} 
    .mobile-horizontal-menu-links { margin: 0 2px; padding: 0 2px;}

    /* search.html specific: */
    .content-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .filters-grid { grid-template-columns: 1fr; }
    .card-title { font-size: 14px; min-height: 2.6em; } .card-details { font-size: 11px; }
    .section-title { font-size: 18px; padding-left: 10px; }
    .pagination-btn { font-size: 13px; padding: 0 12px; height: 34px; line-height: 34px; }
    .page-info { font-size: 12px; }
    .filters-actions { flex-direction: column; }
    .filter-action-btn { width: 100%; text-align: center;}
    .filter-toggle-btn { width: 100%; justify-content: center; }
}
 @media (max-width: 420px) { /* from search.html, affects mobile nav links */
    .mobile-horizontal-menu-links a {
        font-size: 13px;
        padding: 5px 1px 7px 1px;
    }
    .mobile-horizontal-menu-links a::after {
        width: calc(100% - 2px);
    }
}
@media (max-width: 370px) { /* from search.html, affects mobile nav links */
    .mobile-horizontal-menu-links a {
        font-size: 12px;
    }
     .mobile-horizontal-menu-links {
        gap: 0;
        justify-content: space-evenly;
    }
}

/* --- Styles below are ADDED/KEPT from home.html for its unique content --- */

/* home.html specific page loader and error container */
.loading-container, .error-container { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 300px; width: 100%; text-align: center; padding: 20px; color: var(--text-color-muted); }
.loading-spinner-page { border: 3.5px solid rgba(var(--primary-color-rgb),.2); border-radius: 50%; border-top: 3.5px solid var(--primary-color); width: 36px; height: 36px; animation: spin 0.8s linear infinite; margin-bottom: 15px; }
body.light-mode .loading-spinner-page { border: 3.5px solid rgba(0,0,0,.1); border-top: 3.5px solid var(--primary-color); }
.error-container i { font-size: 2.5em; margin-bottom: 15px; color: var(--danger-color); }
.error-container p { color: var(--danger-color); font-size: 1.1em; }

/* --- Spotlight Section (home.html) --- */
.spotlight-section { margin-bottom: 40px; }
.spotlight-swiper-container {
    width: 100%;
    height: var(--spotlight-height-desktop);
    border-radius: var(--border-radius-main); /* Will use 8px from search.html */
    overflow: hidden;
    position: relative;
    background-color: var(--card-bg-color); 
}
.deslide-item { position: relative; width: 100%; height: 100%; overflow: hidden; }
.deslide-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.deslide-cover-img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.6s ease-out; }
.swiper-slide:hover .deslide-cover-img { transform: scale(1.05); }
.deslide-item::after { 
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(var(--bg-color-rgb-raw), 0.95) 10%, rgba(var(--bg-color-rgb-raw), 0.75) 45%, rgba(var(--bg-color-rgb-raw), 0.2) 75%, transparent 100%);
    z-index: 2;
}
body.light-mode .deslide-item::after {
     background: linear-gradient(to right, rgba(var(--bg-color-rgb-raw), 0.95) 10%, rgba(var(--bg-color-rgb-raw), 0.8) 45%, rgba(var(--bg-color-rgb-raw), 0.3) 75%, transparent 100%);
}
.deslide-item-content { 
    position: relative; z-index: 3; max-width: 55%; color: var(--text-color);
    padding: 40px 50px; display: flex; flex-direction: column; justify-content: center; height: 100%;
}
.desi-sub-text { 
    font-size: 13px; font-weight: 500; color: var(--text-color-muted);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.desi-head-title { 
    font-size: 32px; font-weight: 800; line-height: 1.2; margin-bottom: 4px; 
    text-shadow: 0 2px 8px rgba(0,0,0,0.5); color: var(--text-color);
}
.desi-head-title-jname { 
    font-size: 18px; font-weight: 500; color: var(--text-color-muted);
    margin-bottom: 16px; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.sc-detail { 
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 15px;
    margin-bottom: 16px; font-size: 13px; color: var(--text-color-muted); font-family: var(--ui-font-family);
}
.scd-item { display: inline-flex; align-items: center; }
.scd-item i { margin-right: 5px; font-size: 0.9em; opacity: 0.8; }
.scd-item .quality { 
    background-color: rgba(var(--primary-color-rgb), 0.15); color: var(--primary-color);
    padding: 3px 8px; border-radius: var(--border-radius-small); /* Will use 5px */
    font-size: 11px; font-weight: 600;
}
.scd-item .tick { display: flex; gap: 8px; }
.scd-item .tick-item { display: inline-flex; align-items: center; }
.desi-description {
    font-size: 14px; line-height: 1.7; margin-bottom: 25px; display: -webkit-box;
    -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    text-overflow: ellipsis; opacity: 0.9; max-width: 100%;
}
.desi-buttons { display: flex; gap: 15px; align-items: center; }
.desi-buttons .btn-watch, .desi-buttons .btn-detail { 
    padding: 0 25px; height: 44px; line-height: 44px;
    border-radius: var(--border-radius-small); /* Will use 5px */
    font-weight: 600; font-size: 15px; display: inline-flex;
    align-items: center; justify-content: center; gap: 10px;
    text-decoration: none; transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.desi-buttons .btn-watch { 
    background-color: var(--primary-color); color: var(--text-color-on-primary); /* Relies on --text-color-on-primary from home.html :root */
    box-shadow: 0 4px 10px var(--primary-color-glow);
}
.desi-buttons .btn-watch:hover {
    background-color: var(--primary-color-darker); transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(var(--primary-color-rgb), 0.35);
}
.desi-buttons .btn-detail { 
    background-color: rgba(var(--text-color-rgb-raw, 232, 232, 234), 0.1); 
    color: var(--text-color);
    border: 1px solid rgba(var(--text-color-rgb-raw, 232, 232, 234), 0.2);
}
body.light-mode .desi-buttons .btn-detail {
    background-color: rgba(var(--text-color-rgb-raw, 33,37,41), 0.05);
    border-color: rgba(var(--text-color-rgb-raw, 33,37,41), 0.15);
}
.desi-buttons .btn-detail:hover {
    background-color: rgba(var(--text-color-rgb-raw, 232, 232, 234), 0.15);
    transform: translateY(-2px);
}
body.light-mode .desi-buttons .btn-detail:hover {
    background-color: rgba(var(--text-color-rgb-raw, 33,37,41), 0.1);
}
.desi-buttons .btn-detail i { margin-left: 8px; }

.spotlight-swiper-container .swiper-button-next,
.spotlight-swiper-container .swiper-button-prev {
    display: flex; width: 42px; height: 42px;
    background-color: rgba(var(--bg-color-rgb-raw), 0.45);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    border-radius: 8px; color: #FFFFFF; align-items: center;
    justify-content: center; position: absolute; z-index: 20; 
    cursor: pointer; transition: background-color var(--transition-speed) ease, opacity var(--transition-speed) ease;
    right: 20px; left: auto; transform: none; margin-top: 0; opacity: 0.7;
}
.spotlight-swiper-container .swiper-button-prev { top: calc(50% - 42px - 5px); }
.spotlight-swiper-container .swiper-button-next { top: calc(50% + 5px); }
.spotlight-swiper-container .swiper-button-next::after,
.spotlight-swiper-container .swiper-button-prev::after { font-size: 16px; font-weight: 700; color: inherit; }
.spotlight-swiper-container .swiper-button-next:hover,
.spotlight-swiper-container .swiper-button-prev:hover { background-color: rgba(var(--bg-color-rgb-raw), 0.65); opacity: 1; }
.spotlight-swiper-container .swiper-button-next:focus-visible,
.spotlight-swiper-container .swiper-button-prev:focus-visible {
    outline: 1.5px solid var(--primary-color); outline-offset: 1.5px;
    box-shadow: 0 0 0 2.5px var(--focus-ring-color); opacity: 1;
}
.spotlight-swiper-container .swiper-button-disabled {
    opacity: 0.25 !important; cursor: not-allowed;
    background-color: rgba(var(--bg-color-rgb-raw), 0.3) !important;
}
.spotlight-swiper-container .swiper-pagination { display: none !important; }

/* Other Sections (home.html specific sections or overrides) */
/* .anime-section is also in search.html's CSS as .section, using .section is fine */
/* .section-header, .section-title styles are in search.html CSS and will apply */
/* home.html specific .view-all-link */
.view-all-link { font-size: 13px; color: var(--primary-color); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; font-family: var(--ui-font-family); }
.view-all-link:hover { color: var(--primary-color-darker); text-decoration: underline; } .view-all-link i { font-size: 0.8em; }

/* home.html used .content-grid with minmax(160px,1fr). search.html uses .content-grid with minmax(170px,1fr) - search.html version will take precedence */
/* .content-card styles are largely similar, search.html version will take precedence. Aspect ratio for card-image is same. */
/* Card rank specific to home.html if different logic is needed for certain home sections */
.card-rank { background-color: rgba(var(--text-color-muted-rgb, 138, 138, 147), 0.1); color: var(--text-color-muted); }
body.light-mode .card-rank { background-color: rgba(108, 117, 125, 0.1); }

/* Top 10 specific styles from home.html */
.top10-grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.top10-category h3 { font-size: 18px; font-weight: 500; margin-bottom: 15px; color: var(--text-color); text-align: center; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
.top10-item { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; padding: 8px; border-radius: var(--border-radius-small); transition: background-color var(--transition-speed); } /* Will use 5px radius */
.top10-item:hover { background-color: var(--bg-color-lighter); }
.top10-rank { font-size: 20px; font-weight: 700; color: var(--primary-color); min-width: 30px; text-align: center; }
.top10-poster img { width: 50px; height: 70px; object-fit: cover; border-radius: var(--border-radius-small); background-color: var(--bg-color-lighter); } /* Will use 5px radius */
.top10-details { flex-grow: 1; min-width: 0; }
.top10-title { font-size: 14px; font-weight: 500; color: var(--text-color); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.top10-title:hover { color: var(--primary-color); }
.top10-episodes { font-size: 12px; color: var(--text-color-muted); }

/* Genres list styles from home.html */
.genres-list a { padding: 6px 12px; background-color: var(--card-bg-color); color: var(--text-color-muted); border-radius: var(--border-radius-small); font-size: 13px; font-weight: 500; border: 1px solid var(--border-color); transition: all var(--transition-speed); } /* Will use 5px radius */
.genres-list a:hover { background-color: var(--primary-color-glow); color: var(--primary-color); border-color: var(--primary-color); }

/* --- SETUP MODAL STYLES (from home.html) --- */
#setup-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.75); 
    display: none; justify-content: center; align-items: center;
    z-index: 2000; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    padding: var(--content-padding); /* Relies on --content-padding from home.html :root */
}
#setup-modal.visible { display: flex; opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s linear 0s; }
.modal-content-setup {
    width: 90%; max-width: 580px; max-height: 90vh;
    position: relative; z-index: 1; transform: scale(0.9);
    transition: transform 0.3s ease; overflow: hidden; 
    border-radius: var(--border-radius-main); /* Will use 8px from search.html */
    border: 1px solid var(--border-color); box-shadow: var(--box-shadow-main);
    display: flex; flex-direction: column;
}
#setup-modal.visible .modal-content-setup { transform: scale(1); }
#modal-bg-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; object-fit: cover; opacity: 0.3;
    pointer-events: none; filter: blur(4px); border-radius: inherit; 
}
.modal-scroll-content {
    position: relative; z-index: 1; overflow-y: auto; flex-grow: 1;
    padding: 30px 40px; color: var(--text-color); text-align: center;
    background: rgba(var(--bg-color-rgb-raw), 0.88); 
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    scrollbar-width: thin; scrollbar-color: var(--primary-color) var(--border-color);
}
body.light-mode .modal-scroll-content { background: rgba(var(--bg-color-rgb-light-raw, 244, 246, 248), 0.88); } /* Relies on --bg-color-rgb-light-raw */
.modal-scroll-content::-webkit-scrollbar { width: 6px; }
.modal-scroll-content::-webkit-scrollbar-track { background: var(--border-color); border-radius: 3px; }
.modal-scroll-content::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 3px; }
.modal-close-btn {
    position: absolute; top: 12px; right: 15px; background: none;
    border: none; font-size: 28px; color: rgba(255, 255, 255, 0.6); 
    text-shadow: 0 1px 3px rgba(0,0,0,0.4); cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    line-height: 1; z-index: 10; 
}
body.light-mode .modal-close-btn { color: rgba(0,0,0,0.4); text-shadow: none; }
.modal-close-btn:hover { color: var(--text-color); transform: scale(1.1); }
.modal-header { margin-bottom: 25px; position: relative; z-index: 1; }
.modal-logo {
    font-size: 28px; font-weight: 700; color: var(--primary-color);
    text-decoration: none; display: inline-flex; align-items: center;
    gap: 10px; margin-bottom: 12px;
}
.modal-logo i { font-size: 30px; text-shadow: 0 2px 8px var(--primary-color-glow); }
.modal-header h2 { font-size: 16px; font-weight: 500; color: var(--text-color); margin-bottom: 6px; }
.modal-header p { font-size: 13px; color: var(--text-color-muted); line-height: 1.6; margin: 0 auto; max-width: 380px; }
.modal-step { display: none; animation: stepFadeIn 0.4s ease-out; position: relative; z-index: 1; }
.modal-step.active { display: block; }
@keyframes stepFadeIn { from { opacity: 0; } to { opacity: 1; } }
#modal-step-1 h3 { margin-bottom: 15px; font-size: 18px; font-weight: 600; }
#modal-step-1 .permission-details {
    text-align: left; font-size: 13px; margin-bottom: 20px; padding: 15px;
    background-color: rgba(0,0,0,0.15); border-radius: var(--border-radius-small); /* Will use 5px */
    border-left: 3px solid var(--primary-color);
}
body.light-mode #modal-step-1 .permission-details { background-color: rgba(0,0,0,0.05); }
#modal-step-1 .permission-details p { margin-bottom: 10px; line-height: 1.6; }
#modal-step-1 .permission-details strong { color: var(--primary-color); font-weight: 600; }
#modal-step-1 .permission-details ul { list-style: none; padding-left: 15px; margin-top: 10px; margin-bottom: 10px; }
#modal-step-1 .permission-details li::before { content: '•'; color: var(--primary-color); display: inline-block; width: 1em; margin-left: -1em; }
#modal-step-1 .warning-note {
    font-size: 12px; color: var(--warning-color); margin-top: 15px; text-align: left; padding: 10px;
    background-color: rgba(var(--warning-color-rgb), 0.1); /* Relies on --warning-color-rgb from home.html :root */
    border-radius: var(--border-radius-small); border-left: 3px solid var(--warning-color); /* Will use 5px */
}
body.light-mode #modal-step-1 .warning-note { color: #856404; background-color: #fff3cd; border-left-color: #ffeeba; }
#modal-step-1 .warning-note i { margin-right: 8px; }
.step1-buttons { display: flex; justify-content: center; gap: 15px; margin-top: 25px; flex-wrap: wrap; }
#modal-step-2 h3 { margin-bottom: 20px; font-size: 18px; font-weight: 600; }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 7px; font-weight: 500; font-size: 13px; color: var(--text-color-muted); }
.form-group input[type="text"] {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small); background-color: var(--input-bg-color); /* Will use 5px */
    color: var(--text-color); font-size: 14px;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
    height: 42px; 
}
.form-group input[type="text"]:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 2.5px var(--focus-ring-color); background-color: var(--input-focus-bg-color);
}
.profile-image-upload-area {
    display: flex; align-items: center; gap: 18px;
    background-color: var(--card-bg-color); padding: 12px;
    border-radius: var(--border-radius-small); border: 1px solid var(--border-color); /* Will use 5px */
    flex-wrap: wrap;
}
#uploaded-avatar-preview {
    width: 65px; height: 65px; border-radius: 50%; object-fit: cover;
    display: none; border: 2px solid var(--primary-color);
    background-color: var(--bg-color-lighter); flex-shrink: 0;
}
#upload-avatar-placeholder {
    width: 65px; height: 65px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    background-color: rgba(var(--primary-color-rgb), 0.03); 
    border: 2px dashed var(--border-color); color: var(--text-color-muted);
    font-size: 22px; flex-shrink: 0;
}
body.light-mode #upload-avatar-placeholder { background-color: rgba(0,0,0,0.02); }
.upload-btn-container { display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; }
.upload-btn-label {
    display: inline-block; padding: 8px 16px;
    background: linear-gradient(145deg, var(--primary-color), var(--primary-color-darker));
    color: var(--bg-color); text-shadow: none; border: none;
    border-radius: 50px; cursor: pointer;
    transition: background var(--transition-speed), transform 0.1s ease, box-shadow var(--transition-speed);
    font-size: 13px; margin-bottom: 7px; font-weight: 600;
}
body.light-mode .upload-btn-label { color: #fff; }
body[data-color-theme="princess-pink"].light-mode .upload-btn-label,
body[data-color-theme="yume-purple"].light-mode .upload-btn-label { color: var(--bg-color); }
.upload-btn-label:hover {
    background: linear-gradient(145deg, var(--primary-color-darker), var(--primary-color));
    box-shadow: 0 4px 12px var(--primary-color-glow);
}
.upload-btn-label:active { transform: scale(0.97); }
#upload-avatar { display: none;  }
.upload-hint { font-size: 11px; color: var(--text-color-muted); }
.step2-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
#modal-step-3 h3 { margin-bottom: 15px; font-size: 18px; font-weight: 600; }
#modal-step-3 p { text-align: center; font-size: 13px; margin-bottom: 18px; max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.6;}
#modal-step-3 .import-warning {
    font-size: 12px; color: var(--warning-color); margin-top: -8px; margin-bottom: 18px;
    text-align: center; padding: 10px;
    background-color: rgba(var(--warning-color-rgb), 0.1); /* Relies on --warning-color-rgb from home.html :root */
    border-radius: var(--border-radius-small); border-left: 3px solid var(--warning-color); /* Will use 5px */
}
body.light-mode #modal-step-3 .import-warning { color: #856404; background-color: #fff3cd; border-left-color: #ffeeba; }
#modal-step-3 .import-warning i { margin-right: 8px; }
.step3-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
#import-data-input-modal { display: none; }
#import-status { font-size: 12px; color: var(--text-color-muted); margin-top: 12px; min-height: 1.5em; text-align: center; }
.modal-btn { 
    padding: 11px 18px; border: none;
    border-radius: var(--border-radius-small); /* Will use 5px */
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background var(--transition-speed), transform 0.1s ease, box-shadow var(--transition-speed);
    width: 100%; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
body.light-mode .modal-btn { box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.step1-buttons .modal-btn { flex-grow: 1; width: auto; min-width: 140px; }
.accept-btn, .setup-btn-modal, .import-confirm-btn { 
    background: linear-gradient(145deg, var(--primary-color), var(--primary-color-darker));
    color: var(--bg-color); text-shadow: none;
}
body.light-mode .accept-btn, 
body.light-mode .setup-btn-modal, 
body.light-mode .import-confirm-btn { color: #fff; }
body[data-color-theme="princess-pink"].light-mode .accept-btn, 
body[data-color-theme="princess-pink"].light-mode .setup-btn-modal, 
body[data-color-theme="princess-pink"].light-mode .import-confirm-btn,
body[data-color-theme="yume-purple"].light-mode .accept-btn, 
body[data-color-theme="yume-purple"].light-mode .setup-btn-modal, 
body[data-color-theme="yume-purple"].light-mode .import-confirm-btn { color: var(--bg-color); }
.accept-btn:hover, .setup-btn-modal:hover, .import-confirm-btn:hover {
    background: linear-gradient(145deg, var(--primary-color-darker), var(--primary-color));
    box-shadow: 0 5px 15px var(--primary-color-glow);
}
.accept-btn:active, .setup-btn-modal:active, .import-confirm-btn:active {
    transform: scale(0.97); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); 
}
.already-user-btn, .import-trigger-btn, .back-btn { 
    background-color: rgba(var(--primary-color-rgb), 0.08); color: var(--primary-color);
    border: 1px solid var(--border-color); 
}
body.light-mode .already-user-btn, 
body.light-mode .import-trigger-btn, 
body.light-mode .back-btn {
    background-color: rgba(0,0,0,0.05); color:var(--text-color); border-color: rgba(0,0,0,0.1);
}
.already-user-btn:hover, .import-trigger-btn:hover, .back-btn:hover { background-color: rgba(var(--primary-color-rgb), 0.12); }
body.light-mode .already-user-btn:hover, 
body.light-mode .import-trigger-btn:hover, 
body.light-mode .back-btn:hover { background-color: rgba(0,0,0,0.08); }
.already-user-btn:active, .import-trigger-btn:active, .back-btn:active { transform: scale(0.97); }
.decline-btn { 
    background-color: rgba(var(--danger-color-rgb), 0.15); /* Relies on --danger-color-rgb from home.html :root */
    color: var(--danger-color); border: 1px solid rgba(var(--danger-color-rgb), 0.4);
    box-shadow: none; 
}
.decline-btn:hover { background-color: rgba(var(--danger-color-rgb), 0.25); color: var(--text-color); }
.decline-btn:active { transform: scale(0.97); background-color: rgba(var(--danger-color-rgb), 0.3); }
.already-user-link { 
    background: none; border: none; color: var(--text-color-muted);
    font-size: 13px; text-decoration: none; margin-top: 8px;
    padding: 5px; box-shadow: none; font-weight: 500;
    width: auto; display: inline; justify-content: center;
}
.already-user-link:hover { color: var(--primary-color); text-decoration: underline; }
.modal-error-msg {
    color: var(--danger-color); font-size: 13px; margin-top: 12px;
    min-height: 1.5em; font-weight: 500; text-align: center;
}
/* .loading-spinner in modal context from home.html */
.loading-spinner { 
    border:4px solid var(--border-color); border-radius:50%;
    border-top:4px solid var(--primary-color); width:40px;
    height:40px; animation:spin 1s linear infinite; 
}

/* Responsive Adjustments from home.html for its specific sections */
/* Base responsive adjustments from search.html CSS will apply first. */
/* These are additive or overriding for home.html specific content */
@media (max-width: 1200px) {
    /* home.html was: .content-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; } */
    /* search.html has its own for .content-grid (170px base, 160px here) - search.html style will apply. */
    .top10-grid-container { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; } /* home.html */
    .deslide-item-content { max-width: 60%; }  /* home.html spotlight */
}
@media (max-width: 992px) {
    /* home.html specific responsive for spotlight */
    .spotlight-swiper-container { height: var(--spotlight-height-tablet); }
    .deslide-item-content {
        max-width: 100%; padding: 20px; text-align: left;
        justify-content: flex-end; display: flex; flex-direction: column;
    }
    .deslide-item::after { 
        background: linear-gradient(to top, rgba(var(--bg-color-rgb-raw), 0.85) 0%, rgba(var(--bg-color-rgb-raw), 0.4) 40%, transparent 80%), 
                    linear-gradient(to right, rgba(var(--bg-color-rgb-raw), 0.9) 0%, rgba(var(--bg-color-rgb-raw), 0.5) 50%, transparent 100%); 
    }
    body.light-mode .deslide-item::after { 
         background: linear-gradient(to top, rgba(var(--bg-color-rgb-light-raw, 244, 246, 248), 0.85) 0%, rgba(var(--bg-color-rgb-light-raw, 244, 246, 248), 0.4) 40%, transparent 80%),
                    linear-gradient(to right, rgba(var(--bg-color-rgb-light-raw, 244, 246, 248), 0.9) 0%, rgba(var(--bg-color-rgb-light-raw, 244, 246, 248), 0.5) 50%, transparent 100%);
    }
    .desi-sub-text { font-size: 12px; margin-bottom: 5px; }
    .desi-head-title { font-size: 22px; line-height: 1.3; margin-bottom: 15px; }
    .desi-head-title-jname, .deslide-item-content .sc-detail, .deslide-item-content .desi-description, .scd-item.m-hide { display: none !important; }
    .desi-buttons { justify-content: flex-start; margin-top: 0; }
    .desi-buttons .btn-watch, .desi-buttons .btn-detail { padding: 0 18px; height: 38px; line-height: 38px; font-size: 13px; }
    #top10-animes-section { display: none; } /* home.html specific rule */
}
@media (max-width: 768px) {
    /* home.html specific for spotlight */
    .spotlight-swiper-container { height: var(--spotlight-height-mobile); }
    .deslide-item-content { padding: 15px; }
    .desi-head-title { font-size: 20px; }
    .desi-buttons .btn-watch, .desi-buttons .btn-detail { padding: 0 15px; height: 36px; line-height: 36px; font-size: 12px; gap: 5px; }
    .spotlight-swiper-container .swiper-button-next,
    .spotlight-swiper-container .swiper-button-prev { width: 36px; height: 36px; right: 10px; }
    .spotlight-swiper-container .swiper-button-prev { top: calc(50% - 36px - 5px); }
    .spotlight-swiper-container .swiper-button-next { top: calc(50% + 5px); }
    .spotlight-swiper-container .swiper-button-next::after,
    .spotlight-swiper-container .swiper-button-prev::after { font-size: 14px; }
}
@media (max-width: 600px) { 
    /* home.html specific for setup modal */
    .modal-content-setup { max-width: calc(100% - 30px); max-height: 85vh; }
    .modal-scroll-content { padding: 25px 20px; }
    .modal-logo { font-size: 24px; } .modal-logo i { font-size: 26px; }
    .modal-header h2 { font-size: 15px; } 
    .modal-header p { font-size: 12px; }
    #uploaded-avatar-preview, #upload-avatar-placeholder { width: 60px; height: 60px; }
    .profile-image-upload-area { gap: 12px; padding: 10px;}
    .modal-btn { padding: 10px 15px; font-size: 13px; }
    .step1-buttons { flex-direction: column; } 
    .step1-buttons .modal-btn { width: 100%; }
    .upload-btn-label { padding: 7px 14px; font-size: 12px; }
    .form-group input[type="text"] { height: 42px; padding: 10px 12px; font-size: 13px;} /* home.html had 42px, search.html has --control-element-height at 36px. Modal might need to override or use its own var */
    .modal-close-btn { font-size: 26px; top: 8px; right: 12px; }
}
@media (max-width: 576px) { 
    /* home.html used .content-grid for its sections with different minmax and gap than search.html. search.html rules will apply for .content-grid. */
    /* Card title font size from search.html is 14px, home.html also used 14px. */
    /* section-title from search.html is 18px, home.html also 17px/18px. search.html rules apply. */
    /* Spotlight specific from home.html */
    .deslide-item-content { padding: 12px; } 
    .desi-sub-text { font-size: 11px; }
    .desi-head-title { font-size: 18px; margin-bottom: 12px; }
    .desi-buttons .btn-watch, .desi-buttons .btn-detail { 
        height: 34px; line-height: 34px; font-size: 11px; padding: 0 12px;
    }
}
/* home.html had @media (max-width: 420px) and (max-width: 370px) for .mobile-horizontal-menu-links a - these are now covered by search.html styles */