/* ========================================================
   🎛️ 參數總控台
   ======================================================== */
:root {
    --bg-image: url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    --bg-opacity: 0.65;
    --card-opacity: 0.9;
}

/* ========================================================
   🎨 15 種佈景主題
   ======================================================== */
:root, [data-theme="orange"] {
    --bg-grad-1: 255, 240, 224; --bg-grad-2: 255, 218, 193;
    --logo-bg: #fff3e0; --logo-color: #e67e22;
    --btn-grad-1: #ffb74d; --btn-grad-2: #ff8a65;
    --btn-shadow: rgba(255, 138, 101, 0.3); --btn-shadow-hover: rgba(255, 138, 101, 0.4);
    --input-border-focus: #ffb74d; --input-ring: rgba(255, 183, 77, 0.15);
    --icon-bg: #fffcf9; --icon-border: #ffe0b2; --icon-color: #ff9800;
    --sys-name: #d35400; --link-color: #e67e22;
}
[data-theme="blue"] {
    --bg-grad-1: 224, 240, 255; --bg-grad-2: 193, 228, 255;
    --logo-bg: #e3f2fd; --logo-color: #1976d2;
    --btn-grad-1: #64b5f6; --btn-grad-2: #1e88e5;
    --btn-shadow: rgba(30, 136, 229, 0.3); --btn-shadow-hover: rgba(30, 136, 229, 0.4);
    --input-border-focus: #64b5f6; --input-ring: rgba(100, 181, 246, 0.15);
    --icon-bg: #f8fbff; --icon-border: #bbdefb; --icon-color: #2196f3;
    --sys-name: #1565c0; --link-color: #1976d2;
}
[data-theme="green"] {
    --bg-grad-1: 228, 248, 233; --bg-grad-2: 200, 240, 210;
    --logo-bg: #e8f5e9; --logo-color: #388e3c;
    --btn-grad-1: #81c784; --btn-grad-2: #43a047;
    --btn-shadow: rgba(67, 160, 71, 0.3); --btn-shadow-hover: rgba(67, 160, 71, 0.4);
    --input-border-focus: #81c784; --input-ring: rgba(129, 199, 132, 0.15);
    --icon-bg: #f9fdf9; --icon-border: #c8e6c9; --icon-color: #4caf50;
    --sys-name: #2e7d32; --link-color: #388e3c;
}
[data-theme="purple"] {
    --bg-grad-1: 243, 229, 245; --bg-grad-2: 225, 190, 231;
    --logo-bg: #f3e5f5; --logo-color: #7b1fa2;
    --btn-grad-1: #ba68c8; --btn-grad-2: #8e24aa;
    --btn-shadow: rgba(142, 36, 170, 0.3); --btn-shadow-hover: rgba(142, 36, 170, 0.4);
    --input-border-focus: #ba68c8; --input-ring: rgba(186, 104, 200, 0.15);
    --icon-bg: #fdfafc; --icon-border: #e1bee7; --icon-color: #9c27b0;
    --sys-name: #6a1b9a; --link-color: #7b1fa2;
}
[data-theme="pink"] {
    --bg-grad-1: 252, 228, 236; --bg-grad-2: 248, 187, 208;
    --logo-bg: #fce4ec; --logo-color: #c2185b;
    --btn-grad-1: #f06292; --btn-grad-2: #d81b60;
    --btn-shadow: rgba(216, 27, 96, 0.3); --btn-shadow-hover: rgba(216, 27, 96, 0.4);
    --input-border-focus: #f06292; --input-ring: rgba(240, 98, 146, 0.15);
    --icon-bg: #fff9fa; --icon-border: #f8bbd0; --icon-color: #e91e63;
    --sys-name: #ad1457; --link-color: #c2185b;
}
[data-theme="teal"] {
    --bg-grad-1: 224, 242, 241; --bg-grad-2: 178, 223, 219;
    --logo-bg: #e0f2f1; --logo-color: #00796b;
    --btn-grad-1: #4db6ac; --btn-grad-2: #00897b;
    --btn-shadow: rgba(0, 137, 123, 0.3); --btn-shadow-hover: rgba(0, 137, 123, 0.4);
    --input-border-focus: #4db6ac; --input-ring: rgba(77, 182, 172, 0.15);
    --icon-bg: #f4fbfb; --icon-border: #b2dfdb; --icon-color: #009688;
    --sys-name: #00695c; --link-color: #00796b;
}
[data-theme="crimson"] {
    --bg-grad-1: 255, 235, 238; --bg-grad-2: 255, 205, 210;
    --logo-bg: #ffebee; --logo-color: #c62828;
    --btn-grad-1: #e57373; --btn-grad-2: #e53935;
    --btn-shadow: rgba(229, 57, 53, 0.3); --btn-shadow-hover: rgba(229, 57, 53, 0.4);
    --input-border-focus: #e57373; --input-ring: rgba(229, 115, 115, 0.15);
    --icon-bg: #fffafb; --icon-border: #ffcdd2; --icon-color: #f44336;
    --sys-name: #b71c1c; --link-color: #c62828;
}
[data-theme="navy"] {
    --bg-grad-1: 232, 234, 246; --bg-grad-2: 197, 202, 233;
    --logo-bg: #e8eaf6; --logo-color: #283593;
    --btn-grad-1: #7986cb; --btn-grad-2: #3949ab;
    --btn-shadow: rgba(57, 73, 171, 0.3); --btn-shadow-hover: rgba(57, 73, 171, 0.4);
    --input-border-focus: #7986cb; --input-ring: rgba(121, 134, 203, 0.15);
    --icon-bg: #f8f9fe; --icon-border: #c5cae9; --icon-color: #3f51b5;
    --sys-name: #1a237e; --link-color: #283593;
}
[data-theme="golden"] {
    --bg-grad-1: 255, 248, 225; --bg-grad-2: 255, 236, 179;
    --logo-bg: #fff8e1; --logo-color: #f57f17;
    --btn-grad-1: #ffd54f; --btn-grad-2: #ffb300;
    --btn-shadow: rgba(255, 179, 0, 0.3); --btn-shadow-hover: rgba(255, 179, 0, 0.4);
    --input-border-focus: #ffd54f; --input-ring: rgba(255, 213, 79, 0.15);
    --icon-bg: #fffdf9; --icon-border: #ffecb3; --icon-color: #ffc107;
    --sys-name: #f57f17; --link-color: #f57f17;
}
[data-theme="matcha"] {
    --bg-grad-1: 241, 248, 233; --bg-grad-2: 220, 237, 200;
    --logo-bg: #f1f8e9; --logo-color: #558b2f;
    --btn-grad-1: #aed581; --btn-grad-2: #7cb342;
    --btn-shadow: rgba(124, 179, 66, 0.3); --btn-shadow-hover: rgba(124, 179, 66, 0.4);
    --input-border-focus: #aed581; --input-ring: rgba(174, 213, 129, 0.15);
    --icon-bg: #fbfdfa; --icon-border: #dcedc8; --icon-color: #8bc34a;
    --sys-name: #33691e; --link-color: #558b2f;
}
[data-theme="cyan"] {
    --bg-grad-1: 224, 247, 250; --bg-grad-2: 178, 235, 242;
    --logo-bg: #e0f7fa; --logo-color: #00838f;
    --btn-grad-1: #4dd0e1; --btn-grad-2: #00acc1;
    --btn-shadow: rgba(0, 172, 193, 0.3); --btn-shadow-hover: rgba(0, 172, 193, 0.4);
    --input-border-focus: #4dd0e1; --input-ring: rgba(77, 208, 225, 0.15);
    --icon-bg: #f4fcfe; --icon-border: #b2ebf2; --icon-color: #00bcd4;
    --sys-name: #006064; --link-color: #00838f;
}
[data-theme="coffee"] {
    --bg-grad-1: 239, 235, 233; --bg-grad-2: 215, 204, 200;
    --logo-bg: #efebe9; --logo-color: #4e342e;
    --btn-grad-1: #a1887f; --btn-grad-2: #6d4c41;
    --btn-shadow: rgba(109, 76, 65, 0.3); --btn-shadow-hover: rgba(109, 76, 65, 0.4);
    --input-border-focus: #a1887f; --input-ring: rgba(161, 136, 127, 0.15);
    --icon-bg: #fbfaf9; --icon-border: #d7ccc8; --icon-color: #795548;
    --sys-name: #3e2723; --link-color: #4e342e;
}
[data-theme="slate"] {
    --bg-grad-1: 236, 239, 241; --bg-grad-2: 207, 216, 220;
    --logo-bg: #eceff1; --logo-color: #455a64;
    --btn-grad-1: #90a4ae; --btn-grad-2: #546e7a;
    --btn-shadow: rgba(84, 110, 122, 0.3); --btn-shadow-hover: rgba(84, 110, 122, 0.4);
    --input-border-focus: #90a4ae; --input-ring: rgba(144, 164, 174, 0.15);
    --icon-bg: #fbfcfd; --icon-border: #cfd8dc; --icon-color: #607d8b;
    --sys-name: #263238; --link-color: #455a64;
}
[data-theme="coral"] {
    --bg-grad-1: 253, 237, 236; --bg-grad-2: 250, 219, 216;
    --logo-bg: #fdedec; --logo-color: #c0392b;
    --btn-grad-1: #f1948a; --btn-grad-2: #e74c3c;
    --btn-shadow: rgba(231, 76, 60, 0.3); --btn-shadow-hover: rgba(231, 76, 60, 0.4);
    --input-border-focus: #f1948a; --input-ring: rgba(241, 148, 138, 0.15);
    --icon-bg: #fffbfb; --icon-border: #fadbd8; --icon-color: #e74c3c;
    --sys-name: #922b21; --link-color: #c0392b;
}
[data-theme="lavender"] {
    --bg-grad-1: 237, 231, 246; --bg-grad-2: 209, 196, 233;
    --logo-bg: #ede7f6; --logo-color: #512da8;
    --btn-grad-1: #9575cd; --btn-grad-2: #5e35b1;
    --btn-shadow: rgba(94, 53, 177, 0.3); --btn-shadow-hover: rgba(94, 53, 177, 0.4);
    --input-border-focus: #9575cd; --input-ring: rgba(149, 117, 205, 0.15);
    --icon-bg: #fbfafc; --icon-border: #d1c4e9; --icon-color: #673ab7;
    --sys-name: #311b92; --link-color: #512da8;
}

/* ========================================================
   ✨ 共用樣式與佈局
   ======================================================== */
body {
    background: linear-gradient(135deg, rgba(var(--bg-grad-1), var(--bg-opacity)) 0%, rgba(var(--bg-grad-2), var(--bg-opacity)) 100%),
                var(--bg-image) no-repeat center center fixed;
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    transition: background 0.8s ease;
}

.theme-panel {
    position: fixed; top: 20px; right: 20px;
    background: rgba(255, 255, 255, 0.85); border-radius: 25px; padding: 8px;
    display: flex; flex-direction: column; align-items: center; overflow: hidden;
    width: 40px; height: 40px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.6); z-index: 1000;
}
.theme-panel:hover {
    width: 200px; height: auto; border-radius: 16px; padding: 15px;
    align-items: flex-start; background: rgba(255, 255, 255, 0.95);
}
.theme-panel-icon {
    color: #795548; cursor: pointer; display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; transition: transform 0.4s ease;
}
.theme-panel:hover .theme-panel-icon { margin-bottom: 12px; transform: rotate(90deg); color: var(--sys-name); }
.theme-grid {
    display: flex; flex-wrap: wrap; gap: 10px; opacity: 0; visibility: hidden;
    transform: translateY(-10px); transition: all 0.3s ease; transition-delay: 0.1s;
}
.theme-panel:hover .theme-grid { opacity: 1; visibility: visible; transform: translateY(0); }
.theme-btn {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff;
    cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.15); transition: transform 0.2s;
}
.theme-btn:hover { transform: scale(1.3); }

.c-orange   { background: #ff8a65; } .c-blue     { background: #1e88e5; }
.c-green    { background: #43a047; } .c-purple   { background: #8e24aa; }
.c-pink     { background: #d81b60; } .c-teal     { background: #00897b; }
.c-crimson  { background: #e53935; } .c-navy     { background: #3949ab; }
.c-golden   { background: #ffb300; } .c-matcha   { background: #7cb342; }
.c-cyan     { background: #00acc1; } .c-coffee   { background: #6d4c41; }
.c-slate    { background: #546e7a; } .c-coral    { background: #e74c3c; }
.c-lavender { background: #5e35b1; }

.login-wrapper {
    background: rgba(255, 255, 255, var(--card-opacity));
    border-radius: 24px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    width: calc(100% - 32px); max-width: 440px; padding: 40px 35px;
    backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.8); transition: all 0.5s ease;
}
@media (max-width: 576px) {
    .login-wrapper { padding: 35px 24px; width: calc(100% - 20px); }
}

.school-header { text-align: center; margin-bottom: 30px; }
.school-logo {
    width: 64px; height: 64px; background: var(--logo-bg); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px; color: var(--logo-color); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); transition: all 0.5s ease;
}
.school-name { font-size: 1.1rem; color: #795548; font-weight: 600; letter-spacing: 2px; margin-bottom: 4px; }
.system-name { font-size: 1.5rem; color: var(--sys-name); font-weight: 800; letter-spacing: 1px; transition: color 0.5s ease; }

.form-label { color: #795548; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.form-control {
    background-color: var(--icon-bg); border: 1px solid var(--icon-border);
    border-radius: 10px; padding: 10px 15px; color: #5d4037; transition: all 0.3s ease;
}
.form-control:focus {
    background-color: #fff; border-color: var(--input-border-focus); box-shadow: 0 0 0 4px var(--input-ring);
}
.input-group-text {
    background-color: var(--icon-bg); border: 1px solid var(--icon-border); border-right: none;
    border-radius: 10px 0 0 10px; color: var(--icon-color); width: 46px; justify-content: center; transition: all 0.3s ease;
}
.input-group .form-control { border-left: none; border-radius: 0 10px 10px 0; }

.captcha-row { display: flex; gap: 10px; align-items: stretch; }
.captcha-img-container {
    width: 120px; border: 1px solid var(--icon-border); border-radius: 8px;
    background: #fff; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: border-color 0.3s ease; overflow: hidden; cursor: pointer;
}
#imgCaptcha { width: 120px; height: 38px; object-fit: contain; display: block; }
.btn-refresh {
    width: 42px; padding: 0; display: flex; align-items: center; justify-content: center;
    background-color: var(--icon-bg); border: 1px solid var(--icon-border);
    border-radius: 8px; color: #795548; transition: all 0.2s; flex-shrink: 0;
}
.btn-refresh:hover { background-color: var(--icon-border); color: var(--sys-name); }

.remember-wrapper { display: flex; align-items: center; margin: 15px 0 25px 0; }
.remember-wrapper .form-check-input { margin: 0 8px 0 0; cursor: pointer; border-color: var(--input-border-focus); flex-shrink: 0; }
.remember-wrapper .form-check-input:checked { background-color: var(--icon-color); border-color: var(--icon-color); }
.remember-wrapper .form-check-label { display: flex; align-items: center; cursor: pointer; color: #795548; font-size: 0.95rem; margin: 0; line-height: 1; }

.btn-login {
    background: linear-gradient(135deg, var(--btn-grad-1) 0%, var(--btn-grad-2) 100%);
    border: none; border-radius: 12px; padding: 12px; font-size: 1.1rem; font-weight: bold;
    color: white; box-shadow: 0 4px 15px var(--btn-shadow); transition: all 0.3s ease;
}
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--btn-shadow-hover); color: white; }

.forgot-link-wrapper { text-align: right; margin-top: 15px; }
.forgot-link { color: var(--link-color); text-decoration: none; font-size: 0.9rem; font-weight: 500; display: inline-flex; align-items: center; transition: all 0.2s; }
.forgot-link:hover { filter: brightness(0.8); text-decoration: underline; }

.validation-summary-errors { margin-bottom: 16px; }