/* ==================== พาร์ท 2/3: ดีไซน์สไตล์ CSS แนว Dark-Futuristic สีทองเรืองแสง ==================== */
html, body { min-height: 100%; margin: 0; padding: 0; background-color: #131417; font-family: 'Kanit', sans-serif; }
.main-center-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; width: 100%; box-sizing: border-box; }

.custom-card { background: linear-gradient(145deg, #24262b 0%, #1c1d22 100%) !important; border-radius: 16px; padding: 45px 35px; width: 100%; max-width: 430px; box-shadow: 0 15px 45px rgba(0,0,0,0.65); text-align: center; box-sizing: border-box; }
.border-gold { border: 1px solid #dfad6c !important; box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 25px rgba(223,173,108,0.15) !important; }
.border-red { border: 1px solid rgba(234, 56, 93, 0.4); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(234, 56, 93, 0.15); }

.member-layout-container { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; }

.input-group { background-color: #101114 !important; border: 1px solid #2d3035 !important; border-radius: 8px !important; overflow: hidden; transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); margin-bottom: 18px !important; }
.input-group:focus-within { border-color: #dfad6c !important; box-shadow: 0 0 12px rgba(223,173,108,0.3) !important; transform: translateY(-1px); }
.input-group-prepend .input-group-text { background-color: transparent !important; border: none !important; color: #72767d !important; width: 48px; justify-content: center; padding-right: 0; font-size: 15px; }
.custom-input { background-color: transparent !important; border: none !important; color: #e1e1e3 !important; height: 48px; font-size: 14.5px; padding-left: 12px; }
.custom-input:focus { box-shadow: none !important; color: #fff !important; }

.glow-gold { color: #dfad6c !important; font-weight: 700; font-size: 22px; text-shadow: 0 0 12px rgba(223,173,108,0.45); letter-spacing: 0.5px; }
.glow-red { color: #ea385d; font-weight: 700; font-size: 22px; text-shadow: 0 0 12px rgba(234, 56, 93, 0.5); }
.glow-green { color: #39ff14 !important; text-shadow: 0 0 10px rgba(57,255,20,0.5); font-weight: bold; }

.btn-gold { 
    background: linear-gradient(135deg, #dfad6c 0%, #c49253 50%, #a6773c 100%) !important; 
    border: 1px solid rgba(255,255,255,0.1) !important; 
    color: #000000 !important; 
    font-weight: 900 !important; 
    height: 48px; 
    border-radius: 8px !important; 
    box-shadow: 0 5px 18px rgba(223,173,108,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important; 
    transition: all 0.25s ease; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.btn-gold:hover { background: linear-gradient(135deg, #ffffff 0%, #dfad6c 100%) !important; transform: translateY(-2px); box-shadow: 0 0 25px rgba(223,173,108,0.6), 0 6px 15px rgba(0,0,0,0.4) !important; color: #111111 !important; text-decoration: none !important; }
.btn-gold:active { transform: translateY(1px); }

.btn-cyan { background-color: #00f0ff; border: none; color: #1a1c20; font-weight: 600; padding: 13px 30px; border-radius: 30px; box-shadow: 0 5px 18px rgba(0,240,255,0.3); display: inline-flex; align-items: center; text-decoration: none !important; transition: all 0.25s; }
.btn-cyan:hover { background-color: #33f3ff; transform: translateY(-2px); box-shadow: 0 0 22px rgba(0,240,255,0.5); color: #1a1c20; }

.success-display-box { background: rgba(57,255,20,0.05); border: 1px solid #2ea44f; border-radius: 10px; padding: 20px; text-align: left; margin-bottom: 25px; box-shadow: 0 0 20px rgba(46,164,79,0.15); }
.success-data-row { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(46,164,79,0.15); padding: 10px 0; font-size: 14px; }
.success-data-row:last-child { border-bottom: none; }