body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f7f6;
    margin: 0;
    padding: 0;
    text-align: center;
    padding-bottom: 100px;
}

.dark-mode {
    background-color: black;
    color: white;
}

.dark-mode .topnav, 
.dark-mode .mobile-content {
    background-color: #1e1e1e;
}

.dark-mode .settings-container {
    background-color: #333;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

.dark-mode .form-group label {
    color: #ccc;
}

.dark-mode .form-group input {
    background-color: #444;
    border-color: #555;
    color: #fff;
}

.dark-mode .form-group input:focus {
    border-color: #5A67D8;
    transform: scale(1.02);
}

.dark-mode .password-container i {
    color: #bbb;
}

.dark-mode .password-container i:hover {
    color: #5A67D8;
}

.dark-mode button {
    background-color: #5A67D8;
    color: #FFFFFF;
}

.dark-mode button:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

.dark-mode h2 {
    color: #ffffff;
}

.dark-mode .delete-btn {
    background-color: #cc0000;
}

.dark-mode .delete-btn:hover {
    background-color: #ff6666;
}

.dark-mode .error-box {
    background-color: #cc0000;
}

.dark-mode .success-box {
    background-color: #5A67D8;
}

.dark-mode .language-select {
    background-color: #444;
    color: #fff;
    border-color: #555;
}

/* 頂部導航 */
.topnav {
    background-color: #333;
    overflow: hidden;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #04AA6D;
    color: white;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

/* 按鈕 */
button {
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 50%;
    font-size: 16px;
    transition: transform 0.2s ease, opacity 0.3s ease;
}

button:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

/* 頁腳 */
footer {
    background-color: #222;
    font-size: 14px;
    color: white;
    text-align: center;
    padding: 5px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

/* 日期時間 */
#date4 {
    position: fixed;
    top: 50px;
    right: 5px;
    font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

@media (max-width: 600px) {
    #date4 {
        top: 50px;
        font-size: 0.8rem;
    }
}

#clock4 {
    position: fixed;
    top: 85px;
    right: 5px;
    font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

@media (max-width: 600px) {
    #clock4 {
        top: 75px;
        font-size: 0.8rem;
    }
}

/* 設定容器 */
.settings-container {
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

/* 表單樣式 */
.form-group {
    margin-bottom: 15px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, transform 0.2s ease;
}

.form-group input:focus {
    border-color: #04AA6D;
    outline: none;
    transform: scale(1.02);
}

.form-group input[readonly] {
    background-color: #f0f0f0;
    cursor: not-allowed;
    color: #888;
}

.dark-mode .form-group input[readonly] {
    background-color: #555;
    color: #bbb;
}

/* 密碼容器 */
.password-container {
    position: relative;
}

.password-container i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    cursor: pointer;
    transition: color 0.3s ease;
}

.password-container i:hover {
    color: #04AA6D;
}

/* 設定按鈕 */
.settings-container button {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.settings-container button:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.delete-btn {
    background-color: #ff4444;
}

.delete-btn:hover {
    background-color: #cc0000;
}

/* 載入動畫 */
#loadingOverlay .loading-content {
    border-radius: 10px;
    padding: 25px;
    text-align: center;
}

#loadingOverlay .spinner {
    margin-bottom: 10px;
}

/* 提示框 */
.error-box, .success-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideUp 0.5s ease-in-out;
}

.error-box {
    background: #ff4444;
}

.success-box {
    background: #04AA6D;
}

@keyframes slideUp {
    from { bottom: -50px; opacity: 0; }
    to { bottom: 20px; opacity: 1; }
}

/* 動畫 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.settings-container {
    animation: fadeIn 0.5s ease-in-out;
}

/* 切換開關 */
.toggle-container {
    position: fixed;
    top: 120px;
    right: 15px;
    display: inline-block;
    width: 60px;
    height: 34px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .toggle-container {
        top: 100px;
    }
}

.toggle-container input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: background-color 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    transition: transform 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #4d4d4d;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    fill: #f39c12;
    transition: opacity 0.4s;
}

.slider .icon.sun {
    left: 6px;
    opacity: 1;
}

input:checked + .slider .icon.sun {
    opacity: 0;
}

.slider .icon.moon {
    right: 6px;
    opacity: 0;
    fill: #f1c40f;
}

input:checked + .slider .icon.moon {
    opacity: 1;
}

/* 手機內容 */
.mobile-content {
    display: none;
}

@media (max-width: 600px) {
    .desktop-content {
        display: none;
    }
    .mobile-content {
        display: block;
    }
}

/* 語言選擇器 */
.language-select {
    position: fixed;
    top: 160px;
    right: 15px;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.language-select:focus {
    border-color: #04AA6D;
    outline: none;
}

@media (max-width: 600px) {
    .language-select {
        top: 130px;
    }
}

/* 手風琴樣式 */
.accordion {
    margin-bottom: 10px;
}

.accordion-btn {
    width: 100%;
    background-color: transparent;
    color: #333; /* 正常模式文字顏色 */
    padding: 12px;
    text-align: left;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s ease;
}

.accordion-btn:hover {
    color: #333; /* 懸停時保持一致 */
}

.accordion-btn i {
    color: #333; /* 正常模式箭頭顏色 */
    transition: transform 0.3s ease;
}

.accordion-btn.active i {
    transform: rotate(180deg); /* 展開時箭頭旋轉 */
}

.accordion-content {
    display: none;
    padding: 10px;
    background-color: transparent;
    border-radius: 0 0 5px 5px;
    border: none;
}

/* 暗黑模式下的手風琴樣式 */
.dark-mode .accordion-btn {
    background-color: transparent;
    color: #ccc; /* 暗黑模式文字顏色 */
}

.dark-mode .accordion-btn:hover {
    color: #ccc;
}

.dark-mode .accordion-btn i {
    color: #ccc; /* 暗黑模式箭頭顏色 */
}

.dark-mode .accordion-content {
    background-color: transparent;
    border: none;
}

/* 安全性選項 */
#login-duration {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

#login-duration:focus {
    border-color: #04AA6D;
    outline: none;
}

.dark-mode #login-duration {
    background-color: #444;
    color: #fff;
    border-color: #555;
}

.dark-mode #durationWarningModal .modal-content {
    background-color: #333; /* 暗黑模式背景 */
    color: #fff; /* 文字顏色 */
}

.dark-mode #durationWarningModal button {
    background-color: #04AA6D; /* 確認按鈕保持綠色 */
    color: #fff;
}

.dark-mode #durationWarningModal button[onclick="cancelDurationChange()"] {
    background-color: #ff4444; /* 取消按鈕保持紅色 */
}

/*顯示日期、時間、暗黑按鈕開關樣式*/
#toggle-date, #toggle-clock, #toggle-dark-mode {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.dark-mode #toggle-date {
    background-color: #444;
    color: #fff;
    border-color: #555;
}

.dark-mode #toggle-clock {
    background-color: #444;
    color: #fff;
    border-color: #555;
}

.dark-mode #toggle-dark-mode {
    background-color: #444;
    color: #fff;
    border-color: #555;
}