/* css/base.css */
* { box-sizing: border-box; }

:root {
    --theme-primary: #7ca38f;
    --theme-primary-rgb: 124, 163, 143;
    --theme-light: #b8cfc5;
    --theme-accent: #3ea98a;
    --theme-accent-rgb: 62, 169, 138;
    --bg-grad-1: rgb(22 22 22 / 85%);
    --bg-grad-2: rgb(11 18 15 / 85%);
}

[data-theme="grey"] {
    --theme-primary: #838383;
    --theme-primary-rgb: 131, 131, 131; 
    --theme-light: #838383;
    --theme-accent: #838383;
    --theme-accent-rgb: 71, 71, 71;
    --bg-grad-1: rgb(0 0 0 / 85%);
    --bg-grad-2: rgb(0 0 0 / 85%);
}

[data-theme="red"] {
    --theme-primary: #d13535;       
    --theme-primary-rgb: 209, 53, 53; 
    --theme-light: #ff6676;         
    --theme-accent: #f44336;        
    --theme-accent-rgb: 244, 67, 54;
    --bg-grad-1: rgba(15, 10, 10, 0.90); 
    --bg-grad-2: rgb(22 7 7 / 92%);
}

[data-theme="blue"] {
    --theme-primary: #5a8bb8;
    --theme-primary-rgb: 90, 139, 184; 
    --theme-light: #92bfe8;
    --theme-accent: #3170d6;
    --theme-accent-rgb: 49, 112, 214;
    --bg-grad-1: rgb(5 8 12 / 85%);
    --bg-grad-2: rgb(17 24 36 / 85%);
}

[data-theme="pink"] {
    --theme-primary: #eec9ff;
    --theme-primary-rgb: 90, 139, 184; 
    --theme-light: #e5baff;
    --theme-accent: #9355c2;
    --theme-accent-rgb: 147, 85, 194;
    --bg-grad-1: rgb(9 5 14 / 85%);
    --bg-grad-2: rgb(26 14 36 / 85%);
}

body {
    background-image: linear-gradient(var(--bg-grad-1), var(--bg-grad-2)), url('../img/bg.jpg');
    background-size: cover; background-attachment: fixed;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px; color: var(--theme-light) !important;
    margin: 0; overflow: hidden; display: flex; flex-direction: column; height: 100vh;
}

a:link, a:visited { color: var(--theme-light); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--theme-primary); }

::selection { background-color: rgba(var(--theme-primary-rgb), 0.3); color: #e8e8e8; }

/* Global Typography & Utilities */
h2 { color: var(--theme-light); letter-spacing: 2px; border-bottom: 1px solid var(--theme-primary); padding-bottom: 10px; margin-top: 0; }
.content-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--theme-accent); padding-bottom: 10px; margin-bottom: 20px; }
.content-header.red { border-bottom-color: #ff5555; }
.page-title { border: none; margin: 0; padding: 0; color: var(--theme-light); letter-spacing: 2px; }
.page-title.red { color: #ff5555; }
.rss-link { font-size: 11px; font-weight: bold; letter-spacing: 1px; }
.status-text { font-size: 11px; color: #666; font-weight: bold; letter-spacing: 1px; }
.sys-text { color: #666; font-family: monospace; font-size: 12px; }
.req-star { color: #ff5555; }

.hidden { display: none; }
.mt-5 { margin-top: 5px; }
.mt-15 { margin-top: 15px; }
.mt-40 { margin-top: 40px; }
.p-0 { padding: 0; }
.flex-row-wrap { display: flex; gap: 20px; flex-wrap: wrap; }

/* Universal Forms */
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-label { font-family: monospace; font-size: 11px; color: #888; letter-spacing: 1px; }
.form-input { background-color: #110e0c; border: 1px solid #333; color: #e8e8e8; font-family: 'Open Sans', sans-serif; padding: 15px; border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.2s; }
.form-input:focus { border-color: var(--theme-primary); }
.text-area-input { resize: vertical; font-family: inherit; }
.form-row { display: flex; gap: 15px; margin-bottom: 20px; }
.form-group.half { flex: 1; margin-bottom: 0; }
.select-input { appearance: none; cursor: pointer; color: var(--theme-light); background-image: linear-gradient(45deg, transparent 50%, var(--theme-primary) 50%), linear-gradient(135deg, var(--theme-primary) 50%, transparent 50%); background-position: calc(100% - 20px) calc(1em + 4px), calc(100% - 15px) calc(1em + 4px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

#suggest-btn { background-color: var(--theme-primary); color: #121212; border: none; padding: 15px; border-radius: 8px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 2px; cursor: pointer; transition: 0.2s; width: 100%; margin-top: 10px; }
#suggest-btn:hover { background-color: var(--theme-light); }
.success-state { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0; gap: 15px; }
.success-title { color: #a1d2c4; font-size: 16px; font-weight: bold; letter-spacing: 1px; }
.btn-outline { margin-top: 20px; border: 1px solid var(--theme-accent); text-align: center; }

/* Dropdown Menus */
.theme-toggle-btn { background: none; border: none; color: var(--theme-light); font-family: inherit; cursor: pointer; padding: 0; transition: color 0.2s; }
.theme-toggle-btn:hover { color: var(--theme-primary); }
.theme-menu-container { position: relative; display: inline-block; }
#theme-display-btn { background: #110e0c; border: 1px solid #333; color: var(--theme-light); font-family: inherit; font-size: 11px; font-weight: bold; padding: 8px 15px; border-radius: 8px; cursor: pointer; transition: border-color 0.2s; outline: none; }
#theme-display-btn:hover { border-color: var(--theme-primary); }
#theme-dropdown-list { position: absolute; top: 100%; left: 0; margin-top: 8px; background-color: rgba(24, 21, 18, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(var(--theme-primary-rgb), 0.3); border-radius: 8px; display: flex; flex-direction: column; min-width: 100%; z-index: 1000; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.8); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; }
#theme-dropdown-list.show { opacity: 1; visibility: visible; transform: translateY(0); }
.theme-option { background: transparent; border: none; color: #e8e8e8; font-family: inherit; font-size: 11px; font-weight: bold; padding: 12px 15px; text-align: left; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.theme-option:hover { background-color: rgba(var(--theme-primary-rgb), 0.3); color: var(--theme-light); }

#quality-container { position: relative; display: flex; align-items: center; height: 48px; }
#quality-display-btn { background: transparent; border: 1px solid #28231f; color: var(--theme-light); font-family: inherit; font-size: 11px; font-weight: bold; padding: 0 15px; height: 100%; border-radius: 8px; cursor: pointer; transition: border-color 0.2s; outline: none; min-width: 70px; }
#quality-display-btn:hover { border-color: var(--theme-primary); }
#quality-dropdown-list { position: absolute; top: 100%; right: 0; margin-top: 8px; background-color: rgba(24, 21, 18, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(var(--theme-primary-rgb), 0.3); border-radius: 8px; display: flex; flex-direction: column; min-width: 100%; z-index: 1000; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.8); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; }
#quality-dropdown-list.show { opacity: 1; visibility: visible; transform: translateY(0); }
.quality-option { background: transparent; border: none; color: #e8e8e8; font-family: inherit; font-size: 11px; font-weight: bold; padding: 12px 15px; text-align: center; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.quality-option:hover { background-color: rgba(var(--theme-primary-rgb), 0.3); color: var(--theme-light); }