@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap");:root{--primary-color:#2c3e50;--secondary-color:#16a085;--accent-color:#3498db;--background-color:#ecf0f1;--text-color:#333;--text-light:#7f8c8d;--border-color:#bdc3c7;--error-color:#e74c3c;--success-color:#27ae60;--shadow:0 4px 6px rgba(0,0,0,.1);}*{margin:0;padding:0;box-sizing:border-box;font-family:"Noto Sans TC",sans-serif;}body{background-color:var(--background-color);display:flex;justify-content:center;align-items:center;min-height:100vh;}a{text-decoration:none;}a:hover{text-decoration:none;}.login-container{background-color:#fff;border-radius:8px;box-shadow:var(--shadow);width:450px;overflow:hidden;position:relative;}.login-header{background-color:var(--primary-color);color:#fff;padding:25px;text-align:center;position:relative;}.login-header::after{content:"";position:absolute;bottom:0;left:0;right:0;height:5px;background:linear-gradient(to right,var(--secondary-color),var(--accent-color));}.login-header h1{font-size:28px;font-weight:700;letter-spacing:1px;}.login-form{padding:35px;}.form-group{margin-bottom:25px;position:relative;}.form-group label{display:block;margin-bottom:8px;font-size:15px;color:var(--text-color);font-weight:500;}.form-group input{width:100%;padding:14px;border:1px solid var(--border-color);border-radius:6px;font-size:16px;transition:all .3s ease;background-color:#f9f9f9;color:var(--text-color);}.form-group input:focus{outline:0;border-color:var(--secondary-color);box-shadow:0 0 0 3px rgba(22,160,133,.2);background-color:#fff;}.remember-forgot{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;}.remember-me{display:flex;align-items:center;}.remember-me input{margin-right:8px;accent-color:var(--secondary-color);width:16px;height:16px;}.remember-me label{color:var(--text-light);font-size:14px;}.forgot-password{color:var(--accent-color);text-decoration:none;font-size:14px;font-weight:500;transition:color .3s;}.forgot-password:hover{color:var(--secondary-color);text-decoration:underline;}.login-button{background:linear-gradient(to right,var(--secondary-color),var(--accent-color));color:#fff;border:0;border-radius:6px;padding:14px;width:100%;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px rgba(0,0,0,.1);letter-spacing:.5px;margin-bottom:15px;}.register-button{background:#fff;color:var(--primary-color);border:2px solid var(--primary-color);border-radius:6px;padding:12px;width:100%;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;letter-spacing:.5px;}.register-button:hover{background-color:var(--primary-color);color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);}.button-group{margin-bottom:20px;}.login-button:hover{box-shadow:0 4px 8px rgba(0,0,0,.2);transform:translateY(-2px);}.login-button:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,.1);}.login-footer{text-align:center;margin-top:30px;color:var(--text-light);font-size:14px;padding-top:20px;border-top:1px solid var(--border-color);}.error-message{color:var(--error-color);margin-top:6px;font-size:13px;display:none;font-weight:500;}.input-icon{position:absolute;right:15px;top:49px;color:var(--text-light);}.captcha-container{display:flex;align-items:center;gap:15px;margin-bottom:20px;}.captcha-image-wrapper{position:relative;display:inline-block;}.captcha-image{border:2px solid #e1e5e9;border-radius:8px;cursor:pointer;transition:all .3s ease;background-color:#f8f9fa;}.captcha-image:hover{border-color:#667eea;transform:scale(1.02);}.captcha-refresh{position:absolute;top:-8px;right:-8px;background:#667eea;color:#fff;border:0;border-radius:50%;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .3s ease;box-shadow:0 2px 8px rgba(102,126,234,.3);}.captcha-refresh:hover{background:#5a67d8;transform:rotate(180deg);}.captcha-input{flex:1;padding:12px 15px;border:2px solid #e1e5e9;border-radius:8px;font-size:14px;text-transform:uppercase;letter-spacing:2px;text-align:center;transition:all .3s ease;background-color:#f8f9fa;}.captcha-input:focus{outline:0;border-color:#667eea;background-color:#fff;box-shadow:0 0 0 3px rgba(102,126,234,.1);}@media(max-width:768px){body{padding:0;background-color:#fff;}.login-container{width:100%;max-width:100%;height:100vh;border-radius:0;box-shadow:none;display:flex;flex-direction:column;}.login-header{padding:30px 20px;}.login-header h1{font-size:24px;}.login-form{flex:1;padding:25px 20px;display:flex;flex-direction:column;justify-content:center;}.form-group{margin-bottom:20px;}.form-group label{font-size:16px;margin-bottom:10px;}.form-group input{padding:16px;font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;}.input-icon{top:52px;right:20px;font-size:18px;}.remember-forgot{margin-bottom:25px;}.remember-me label,.forgot-password{font-size:15px;}.login-button,.register-button{padding:16px;font-size:17px;border-radius:8px;}.login-footer{padding:20px;margin-top:auto;font-size:13px;}.captcha-container{flex-wrap:wrap;gap:10px;}.captcha-image-wrapper{width:100%;text-align:center;}.captcha-image{max-width:200px;height:auto;}.captcha-input{width:100%;}}@media(max-width:480px){.login-header{padding:25px 15px;}.login-header h1{font-size:22px;}.login-form{padding:20px 15px;}.form-group input{padding:14px;}.remember-forgot{flex-direction:column;align-items:flex-start;gap:12px;}.login-button,.register-button{padding:14px;font-size:16px;}}@media(max-width:768px){html,body{overflow-x:hidden;}}@media(hover:none) and (pointer:coarse){.login-button,.register-button,.captcha-refresh,.forgot-password{-webkit-tap-highlight-color:transparent;}.login-button:active,.register-button:active{transform:scale(.98);}}