:root {
            --primary-theme: #39adc5; 
            --bg-canvas: #f0f2f5;
            --input-bg: #f8f9fa;
            --border-color: #e0e0e0;
            --danger-red: #ff4d4f;
            --success-green: #52c41a;
            --text-main: #333;
            --text-muted: #666;
            --text-hint: #aaa;
        }

        body {
            font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
            background-color: #dfdfdf;
            display: flex;
            justify-content: center;
            padding: 40px 20px;
            margin: 0;
        }

        .container {
            background: white;
            width: 100%;
            max-width: 1000px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            overflow: hidden;
        }

        .tabs { display: flex; background: #f1f3f5; border-bottom: 1px solid var(--border-color); }
        .tab { flex: 1; padding: 18px; text-align: center; color: #888; cursor: pointer; transition: 0.3s; }
        .tab.active { background-color: var(--primary-theme); color: white; font-weight: bold; }

        .form-body { padding: 40px; }

        .profile-header { display: flex; gap: 40px; margin-bottom: 35px; }
        .avatar-box { 
            width: 140px; height: 140px; background: #e2e8f0; border-radius: 50%; 
            display: flex; align-items: center; justify-content: center; flex-shrink: 0; 
        }
        .avatar-box svg { width: 70px; fill: white; }

        .main-fields { flex: 1; }
        .field-item { margin-bottom: 20px; }
        .field-item label { display: block; font-size: 14px; color: var(--primary-theme); margin-bottom: 6px; font-weight: bold; }
        .field-item label::before { content: "* "; color: #ff4d4f; }
        .field-item2 { margin-bottom: 10px; }
        .field-item2 label { 
        	display: block; 
        	font-size: 14px; 
        	color: var(--primary-theme); 
        }      
        .input-text { width: 100%; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg); box-sizing: border-box; font-size: 15px; }
        .hint-text { font-size: 12px; color: var(--text-hint); margin-top: 5px; }

         /* 頂部頁籤控制 */
        .tabs { display: flex; background: #f1f3f5; border-bottom: 1px solid var(--border-color); }
        .tab { 
            flex: 1; padding: 18px; text-align: center; color: #888; cursor: pointer; 
            transition: 0.3s; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .tab.active { background-color: var(--primary-theme); color: white; }

        /* 內容區塊顯示控制 */
        .form-content { padding: 40px; display: none; }
        .form-content.active { display: block; }



        /*彈跳視窗縣市選擇*/
		/* 縣市選擇容器 - 改為響應式網格 */
		.city-container {
		    display: grid;
		    grid-template-columns: repeat(4, 1fr); /* 預設 4 欄 */
		    gap: 10px;
		    width: 100%;
		    padding: 5px 0;
		    box-sizing: border-box;
		}

		.city-item {
		    display: flex;
		    align-items: center;
		    color: #333;
		    white-space: nowrap; /* 避免文字斷行 */
		}

		.city-item input[type="checkbox"] {
		    width: 20px;
		    height: 20px;
		    flex-shrink: 0; /* 防止勾選框被擠壓 */
		}

        .city-item {
            display: flex;
            align-items: center;
            font-size: 14px; /* 根據圖片比例調整字體大小 */
            color: #333;
        }

        /* 模仿圖片中的淡藍灰色方框樣式 */
        .city-item input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 25px;
            height: 25px;
            border: 2px solid #d1d9e0;
            border-radius: 8px;
            margin-right: 8px;
            cursor: pointer;
            outline: none;
            background-color: #fff;
        }

        .city-item input[type="checkbox"]:checked {
            background-color: #f5ae39; /* 勾選後的顏色，可依需求調整 */
            border-color: #f5ae39;
            position: relative;
        }

        /* 勾選後的打勾符號 */
        .city-item input[type="checkbox"]:checked::after {
            content: '✔';
            position: absolute;
            color: white;
            font-size: 18px;
            left: 5px;
            top: 0px;
        }
        .city-container label {
        	color: #333333;
        	font-size: 18px;
        	margin-top: -5px;
        }

        /* 提示黃條 */
        .info-banner { 
        	background-color: #fff9db; 
        	padding: 12px 20px; 
        	border-radius: 6px; 
        	font-size: 14px; 
        	margin-bottom: 30px; 
        	display: flex; 
        	align-items: center; 
        	gap: 8px; 
        	border-left: 4px solid #fcc419; 
        }

        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
        .section-title { font-size: 16px; font-weight: bold; margin: 25px 0 15px 0; display: flex; align-items: center; color: #444; }
        .section-title::before { content: "●"; color: #ccc; font-size: 10px; margin-right: 8px; }
        .sub-hint { font-weight: normal; font-size: 12px; color: var(--text-hint); margin-left: 10px; }

        .row-group { display: flex; gap: 10px; margin-bottom: 10px; }
        .select-box { flex: 1; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; background: white; }
        .btn-outline { background: transparent; border: 1px solid var(--primary-theme); color: var(--primary-theme); padding: 5px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; margin-bottom: 12px; }

        /* 驗證提示 */
        .id-msg { font-size: 12px; margin-top: 5px; display: block; height: 14px; }
        .msg-error { color: var(--danger-red); }
        .msg-success { color: var(--success-green); }

        .info-banner { background-color: #fff9db; padding: 12px 20px; border-radius: 6px; font-size: 14px; margin-bottom: 30px; display: flex; align-items: center; gap: 8px; }

        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
        .section-title { font-size: 16px; font-weight: bold; margin: 25px 0 15px 0; display: flex; align-items: center; color: #444; }
        .section-title::before { content: ""; width: 6px; height: 6px; background: #ccc; border-radius: 50%; margin-right: 10px; }
        .sub-hint { font-weight: normal; font-size: 12px; color: var(--text-hint); margin-left: 10px; }

        .row-group { display: flex; gap: 10px; margin-bottom: 10px; }
        .select-box { flex: 1; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; background: white; }
        .btn-outline { background: transparent; border: 1px solid var(--primary-theme); color: var(--primary-theme); padding: 5px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; margin-bottom: 12px; }
        .btn-outline:hover { background: var(--primary-theme); color: white; }

        .upload-container { margin-bottom: 15px; }
        .upload-row {
            display: flex; border: 1px solid var(--border-color); border-radius: 6px; height: 42px; 
            align-items: center; overflow: hidden; background: white;
        }
        .upload-type { background: #f8f9fa; padding: 0 15px; border-right: 1px solid var(--border-color); height: 100%; display: flex; align-items: center; font-size: 14px; min-width: 50px; justify-content: center; }
        .upload-btn { padding: 0 15px; cursor: pointer; border-right: 1px solid var(--border-color); height: 100%; display: flex; align-items: center; font-size: 14px; }
        .file-name-display { padding-left: 15px; color: #999; font-size: 13px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .preview-wrapper { margin-top: 10px; display: none; position: relative; width: fit-content; }
        .preview-img { width: 140px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-color); }
        .remove-btn { position: absolute; top: -8px; right: -8px; background: var(--danger-red); color: white; border: none; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

        .hidden-file-input { display: none; }
        .btn-save { width: 100%; background-color: var(--primary-theme); color: white; border: none; padding: 16px; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; margin-top: 40px; box-shadow: 0 4px 12px rgba(57, 173, 197, 0.3); }

        
        /* --- 帳號列表 (Google/Threads) 樣式 --- */
        .action-bar { display: flex; justify-content: flex-end; margin-bottom: 20px; }
        .add-account-btn { 
            border: 1.5px solid var(--primary-theme); color: var(--primary-theme); background: white;
            padding: 8px; border-radius: 8px; cursor: pointer; display: flex; align-items: center;
        }

        .account-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        .account-table th { background-color: var(--table-header-bg); color: #555; padding: 15px; text-align: left; font-size: 14px; border-bottom: 1px solid #ddd; }
        .account-table td { padding: 15px; border-bottom: 1px solid #eee; color: #666; font-size: 15px; }

        /* Tag 標籤樣式 */
        .badge { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 13px; margin-right: 5px; }
        .badge-success { border: 1px solid var(--success-green); color: var(--success-green); background: #f6ffed; }
        .badge-pending { border: 1px solid var(--danger-red); color: var(--danger-red); background: #fff1f0; }

        .edit-btn { 
            color: var(--primary-theme); border: 1.5px solid var(--primary-theme); 
            background: white; border-radius: 50%; width: 32px; height: 32px; 
            display: flex; align-items: center; justify-content: center; cursor: pointer;
        }

        .btn-save-main { width: 100%; background-color: var(--primary-theme); color: white; border: none; padding: 16px; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; margin-top: 30px; box-shadow: 0 4px 12px rgba(57, 173, 197, 0.3); }

        /* --- 彈出視窗 (Modal) 樣式 --- */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 1000;
        }
      /* --- 彈出視窗 (Modal) 優化 --- */
		.modal-content {
	    background: white;
	    width: 90%;
	    max-width: 500px;
	    padding: 25px;
	    border-radius: 12px;
	    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
	    position: relative;
	    /* RWD 關鍵：限制最大高度並允許內部滾動 */
	    max-height: 85vh; 
	    overflow-y: auto;
		}





        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .modal-header h3 { margin: 0; color: var(--primary-theme); }
        .close-modal { font-size: 28px; cursor: pointer; color: #aaa; }

        .btn-submit { width: 100%; background-color: var(--primary-theme); color: white; border: none; padding: 16px; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 10px; }
        .btn-save-main { width: 100%; background-color: var(--primary-theme); color: white; border: none; padding: 16px; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; margin-top: 40px; box-shadow: 0 4px 12px rgba(57, 173, 197, 0.3); }

        .hidden-file-input { display: none; }
        .id-msg { font-size: 12px; margin-top: 5px; display: block; }
        .msg-error { color: var(--danger-red); }
        .msg-success { color: var(--success-green); }



        /*提領*/


        .withdraw-container {
            width: 100%;
            max-width: 450px;
        }

        /* 警示條 */
        .alert-banner {
            background-color: var(--warning-bg);
            padding: 15px;
            border-radius: 8px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 20px;
            font-size: 14px;
            color: #636e72;
            line-height: 1.5;
        }

        .alert-banner a {
            color: #0984e3;
            font-weight: bold;
            text-decoration: none;
            border-bottom: 1px solid;
        }

        /* 提領卡片 */
        .withdraw-card {
            background: white;
            padding: 30px 20px;
            border-radius: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            text-align: center;
        }

        .card-title {
            font-size: 22px;
            color: #576574;
            margin-bottom: 30px;
        }

        /* 圓形虛線框 */
        .amount-circle {
            width: 220px;
            height: 140px;
            margin: 0 auto 20px;
            border: 3px dashed #f5ae39;
            border-radius: 110px / 70px; /* 橢圓效果 */
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .currency {
            font-size: 18px;
            color: #b2bec3;
            margin-top: 10px;
        }

        .amount {
            font-size: 36px;
            font-weight: bold;
            color: #2d3436;
        }

        /* 警示橫幅 */
        .withdraw-alert-banner {
            background-color: #39adc5;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 25px;
            font-size: 16px;
            color: #fff;
            line-height: 1.6;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .withdraw-alert-banner a {
            color: #fff;
            font-size: 20px;
        }

        .alert-icon {
            background: #ff4d4f;
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            flex-shrink: 0;
            font-weight: bold;
        }        

        /* 銀行資料 */
        .bank-info {
            color: #636e72;
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 25px;
        }

        .bank-name {
            font-size: 16px;
            margin-bottom: 5px;
        }

        /* 規則說明 */
        .policy-list {
            text-align: left;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }

        .policy-list ul {
            padding-left: 15px;
            margin: 0;
        }

        .policy-list li {
            font-size: 13px;
            color: #95a5a6;
            margin-bottom: 10px;
            line-height: 1.5;
            list-style-type: disc;
        }

        /* 申請按鈕 */
        .btn-apply {
            width: 100%;
            background-color: #39adc5;
            color: white;
            border: none;
            padding: 15px;
            border-radius: 12px;
            font-size: 18px;
            cursor: pointer;
            margin-top: 10px;
            transition: 0.3s;
        }

        .btn-apply:hover {
            background-color: #f5ae39;
        }

        /* 客服資訊 */
        .service-info {
            text-align: center;
            margin-top: 25px;
            font-size: 14px;
            color: #636e72;
        }

        .service-info .hint {
            font-size: 12px;
            color: #b2bec3;
            margin-top: 5px;
        }



/* 統計卡片 */
.stats-card {
    background: white;
    border-radius: 15px;
    border: 1.5px solid var(--primary-purple);
    padding: 20px;
    margin-bottom: 20px;
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.stats-title { font-size: 20px; font-weight: bold; color: var(--text-main); }

.btn-open-withdraw {
    border: 1.5px solid var(--primary-purple);
    background: #f5ae39;
    color: #fff;
    padding: 6px 20px;
    border-radius: 20px;
    cursor: pointer;
    width: 120px;
    font-size: 18px;
}

.stats-grid { display: flex; justify-content: space-between; }
.stat-label { font-size: 14px; color: var(--text-muted); margin-bottom: 5px; }
.stat-value { font-size: 18px; font-weight: bold; color: var(--text-main); }

/* 篩選區 */
.filter-section {
    background: white;
    padding: 20px;
    border-radius: 25px 25px 0 0;
    margin-bottom: 2px;
}

.filter-label { display: block; font-size: 14px; margin-bottom: 10px; color: #888; }
.filter-row { display: flex; gap: 10px; }
.filter-select { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 8px; }

.btn-search {
    background: #706fd3;
    color: white;
    border: none;
    padding: 0 25px;
    border-radius: 8px;
    cursor: pointer;
}

/* 任務明細 */
.task-list { background: white; padding: 0 20px; border-radius: 0 0 25px 25px; }
.task-item { padding: 20px 0; border-bottom: 1px solid #eee; }
.task-row { display: flex; margin-bottom: 8px; font-size: 15px; }
.row-label { width: 60px; color: var(--primary-purple); font-weight: bold; }
.row-content { flex: 1; color: var(--text-main); }
.task-sub-info { font-size: 12px; color: #aaa; margin: 5px 0 10px 60px; }
.amount { font-weight: bold; }

/* 提領彈窗 Overlay */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 1000;
}

.modal-content {
    background: white; width: 90%; max-width: 400px; padding: 30px;
    border-radius: 20px; position: relative; text-align: center;
}

.close-btn { position: absolute; top: 15px; right: 20px; font-size: 24px; cursor: pointer; color: #aaa; }

/* 橢圓設計 */
.amount-oval-box {
    width: 100%; height: 140px; border: 1.5px solid #a29bfe;
    border-radius: 50% / 50%; display: flex; align-items: center;
    justify-content: center; margin: 20px 0;
}

.amount { font-size: 36px; font-weight: bold; margin-left: 8px; }
.amount2 { font-size: 26px; font-weight: bold; }

.btn-submit-withdraw {
    width: 100%; background: var(--primary-purple); color: white;
    border: none; padding: 15px; border-radius: 12px; font-size: 18px;
    cursor: pointer; margin-top: 15px;
}

.alert-banner { background: #fff9db; padding: 10px; border-radius: 8px; font-size: 13px; margin-bottom: 20px; }

.rules-section { text-align: left; font-size: 13px; color: #999; border-top: 1px solid #eee; padding-top: 15px; margin-top: 20px; }

.service-footer { margin-top: 20px; font-size: 13px; color: #666; }
.service-hint { font-size: 11px; color: #aaa; }




        @media (max-width: 400px) {
            .amount-circle {
                width: 180px;
                height: 120px;
            }
        }




        @media (max-width: 850px) { 
        	.form-grid { grid-template-columns: 1fr; gap: 20px; } 
        	.profile-header { flex-direction: column; align-items: center; } 
        }





        /* --- 手機版媒體查詢 --- */
		@media (max-width: 480px) {
		    .modal-content {
		        padding: 15px;
		        width: 95%;
		    }

		    .city-container {
		        grid-template-columns: repeat(2, 1fr); /* 手機版改為 2 欄 */
		        gap: 8px;
		    }

		    .city-item {
		        font-size: 15px;
		    }
		}

		@media (max-width: 350px) {
		    .city-container {
		        grid-template-columns: 1fr; /* 極窄螢幕改為 1 欄 */
		    }
		}