/**
 * Trading Page Modals - Dark Theme with Gold Accent
 * 交易页面弹窗样式 - 深色背景配金色突出
 * @author AI Assistant
 * @created 2026-03-30
 */

/* ========================================
   Layer Modal Overrides - Dark Theme
   ======================================== */

/* 弹窗容器 - 深色背景 */
.layui-layer-fast.layui-layer-page,
.layui-layer-fast.layui-layer-dialog {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 215, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: hidden !important;
}

/* 弹窗标题 */
.layui-layer-fast .layui-layer-title {
    background: linear-gradient(180deg, #252525 0%, #1a1a1a 100%) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
    color: #FFD700 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0 24px !important;
    height: 56px !important;
    line-height: 56px !important;
    border-radius: 16px 16px 0 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
}

/* 关闭按钮 */
.layui-layer-fast .layui-layer-setwin > a {
    color: #666 !important;
    transition: all 0.3s ease !important;
    opacity: 0.8 !important;
}

.layui-layer-fast .layui-layer-setwin > a:hover {
    color: #FFD700 !important;
    opacity: 1 !important;
}

/* 弹窗内容区域 */
.layui-layer-fast .layui-layer-content {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
}

/* 按钮容器 */
.layui-layer-fast .layui-layer-btn {
    background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 18px 24px !important;
    border-radius: 0 0 16px 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
    pointer-events: auto !important;
}

/* 主要按钮 - 金色 */
.layui-layer-fast .layui-layer-btn a.layui-layer-btn0,
.layui-layer-fast .layui-layer-btn .layui-layer-btn0 {
    background: linear-gradient(135deg, #FFD700 0%, #FFC107 50%, #FFA500 100%) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 32px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    height: auto !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: none !important;
    letter-spacing: 0.5px !important;
    min-width: 100px !important;
    text-align: center !important;
    display: inline-block !important;
    text-decoration: none !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.layui-layer-fast .layui-layer-btn .layui-layer-btn0:hover {
    background: linear-gradient(135deg, #FFE135 0%, #FFD700 50%, #FFB800 100%) !important;
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

.layui-layer-fast .layui-layer-btn .layui-layer-btn0:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3) !important;
}

/* 次要按钮 - 深色 */
.layui-layer-fast .layui-layer-btn a.layui-layer-btn1,
.layui-layer-fast .layui-layer-btn a.layui-layer-btn2,
.layui-layer-fast .layui-layer-btn .layui-layer-btn1,
.layui-layer-fast .layui-layer-btn .layui-layer-btn2 {
    background: linear-gradient(180deg, #2a2a2a 0%, #222 100%) !important;
    color: #aaa !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 12px 32px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    height: auto !important;
    transition: all 0.3s ease !important;
    min-width: 100px !important;
    text-align: center !important;
    display: inline-block !important;
    text-decoration: none !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.layui-layer-fast .layui-layer-btn a.layui-layer-btn1:hover,
.layui-layer-fast .layui-layer-btn a.layui-layer-btn2:hover,
.layui-layer-fast .layui-layer-btn .layui-layer-btn1:hover,
.layui-layer-fast .layui-layer-btn .layui-layer-btn2:hover {
    background: linear-gradient(180deg, #333 0%, #2a2a2a 100%) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* ========================================
   Trading Modal Content Styles
   ======================================== */

/* 弹窗内容包装器 */
.trading-modal-content {
    padding: 32px;
    text-align: center;
    background: #1a1a1a;
}

/* 图标 */
.trading-modal-icon {
    font-size: 52px;
    margin-bottom: 20px;
    display: block;
    line-height: 1;
}

.trading-modal-icon.gold {
    color: #FFD700;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.4), 0 0 60px rgba(255, 215, 0, 0.2);
    animation: iconGlow 2s ease-in-out infinite alternate;
}

@keyframes iconGlow {
    from {
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.3), 0 0 40px rgba(255, 215, 0, 0.1);
    }
    to {
        text-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 215, 0, 0.3);
    }
}

.trading-modal-icon.red {
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

/* 描述文字 */
.trading-modal-desc {
    color: #999;
    line-height: 1.7;
    margin: 0;
    font-size: 14px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* 警告文字（卖出暂停等） */
.trading-modal-warning {
    color: #bbb;
    line-height: 1.9;
    text-align: left;
    font-size: 13px;
    background: rgba(255, 215, 0, 0.03);
    padding: 20px;
    border-radius: 12px;
    border-left: 3px solid #FFD700;
    margin-top: 10px;
}

/* ========================================
   Password Input Modal
   ======================================== */

/* 密码输入弹窗 */
.password-modal-content {
    padding: 28px 32px 32px;
    background: #1a1a1a;
}

.password-modal-desc {
    color: #888;
    margin-bottom: 24px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
}

/* 密码输入框 - 强制覆盖所有浏览器默认样式 */
.trading-password-input,
.trading-password-input:focus,
.trading-password-input:active,
.trading-password-input:hover {
    width: 100% !important;
    padding: 16px 18px !important;
    background: #0d0d0d !important;
    background-color: #0d0d0d !important;
    border: 1px solid #333 !important;
    border-radius: 10px !important;
    color: #FFD700 !important;
    font-size: 20px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    letter-spacing: 6px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

/* 聚焦状态 */
.trading-password-input:focus {
    border-color: #FFD700 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(255, 215, 0, 0.15) !important;
    background: #111 !important;
    background-color: #111 !important;
}

/* 占位符 */
.trading-password-input::placeholder {
    color: #555 !important;
    letter-spacing: 1px !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

.trading-password-input::-webkit-input-placeholder {
    color: #555 !important;
    letter-spacing: 1px !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

.trading-password-input::-moz-placeholder {
    color: #555 !important;
    letter-spacing: 1px !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

/* 禁用浏览器自动填充样式 */
.trading-password-input:-webkit-autofill,
.trading-password-input:-webkit-autofill:hover,
.trading-password-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #FFD700 !important;
    -webkit-box-shadow: 0 0 0px 1000px #0d0d0d inset !important;
    box-shadow: 0 0 0px 1000px #0d0d0d inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
    background-color: #0d0d0d !important;
}

/* ========================================
   Confirmation Modal (Order Summary)
   ======================================== */

.confirm-modal-content {
    padding: 24px 28px;
    background: #1a1a1a;
}

.confirm-modal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
}

.confirm-modal-row:last-child {
    border-bottom: none;
    border-top: 2px solid rgba(255, 215, 0, 0.5);
    margin-top: 8px;
    padding-top: 16px;
}

.confirm-modal-label {
    color: #777;
    font-weight: 400;
}

.confirm-modal-value {
    color: #ddd;
    font-weight: 500;
    font-family: 'Courier New', monospace;
}

.confirm-modal-value.highlight {
    color: #FFD700;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* ========================================
   Message Toast (Layer.msg) - Dark Theme
   ======================================== */

/* 消息提示框容器 */
.layui-layer-msg {
    background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.1) !important;
    min-width: 200px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 消息内容区域 */
.layui-layer-msg .layui-layer-content {
    background: transparent !important;
    color: #fff !important;
    padding: 16px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* 消息图标 - 完全重置 - 使用html前缀提高优先级 */
html .layui-layer-msg .layui-layer-ico,
html .layui-layer-msg .layui-layer-ico1,
html .layui-layer-msg .layui-layer-ico2,
html .layui-layer-msg .layui-layer-ico3,
html .layui-layer-msg .layui-layer-ico4,
html .layui-layer-msg .layui-layer-ico5,
html .layui-layer-msg .layui-layer-ico6,
.layui-layer-msg .layui-layer-ico,
.layui-layer-msg .layui-layer-ico1,
.layui-layer-msg .layui-layer-ico2,
.layui-layer-msg .layui-layer-ico3,
.layui-layer-msg .layui-layer-ico4,
.layui-layer-msg .layui-layer-ico5,
.layui-layer-msg .layui-layer-ico6 {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    position: static !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    /* 隐藏默认雪碧图 */
    background-position: -9999px -9999px !important;
}

/* 成功消息 */
.layui-layer-msg.layui-layer-hui {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%) !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(34, 197, 94, 0.15) !important;
}

.layui-layer-msg.layui-layer-hui .layui-layer-content {
    color: #22c55e !important;
}

/* 错误消息 */
.layui-layer-msg.layui-layer-hui[type="dialog"],
.layui-layer-msg.error-toast {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(239, 68, 68, 0.15) !important;
}

.layui-layer-msg.layui-layer-hui[type="dialog"] .layui-layer-content,
.layui-layer-msg.error-toast .layui-layer-content {
    color: #ef4444 !important;
}

/* 警告消息 - 金色 */
.layui-layer-msg.warning-toast {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.15) !important;
}

.layui-layer-msg.warning-toast .layui-layer-content {
    color: #FFD700 !important;
}

/* 成功图标 - 绿色对勾 - 使用html前缀提高优先级 */
html .layui-layer-msg .layui-layer-ico1::before,
.layui-layer-msg .layui-layer-ico1::before {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2322c55e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center no-repeat !important;
    background-size: contain !important;
}

/* 错误图标 - 红色叉号 */
html .layui-layer-msg .layui-layer-ico2::before,
.layui-layer-msg .layui-layer-ico2::before {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>') center no-repeat !important;
    background-size: contain !important;
}

/* 警告图标 - 金色感叹号 */
html .layui-layer-msg .layui-layer-ico3::before,
.layui-layer-msg .layui-layer-ico3::before {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFD700" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>') center no-repeat !important;
    background-size: contain !important;
}

/* 问号图标 */
html .layui-layer-msg .layui-layer-ico4::before,
.layui-layer-msg .layui-layer-ico4::before {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFD700" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>') center no-repeat !important;
    background-size: contain !important;
}

/* 锁图标 */
html .layui-layer-msg .layui-layer-ico5::before,
.layui-layer-msg .layui-layer-ico5::before {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFD700" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>') center no-repeat !important;
    background-size: contain !important;
}

/* 难过表情图标 */
html .layui-layer-msg .layui-layer-ico6::before,
.layui-layer-msg .layui-layer-ico6::before {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M16 16s-1.5-2-4-2-4 2-4 2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>') center no-repeat !important;
    background-size: contain !important;
}

/* ========================================
   Form Error Message
   ======================================== */

.form-error-message {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-top: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    animation: shake 0.5s ease-in-out !important;
}

.form-error-message .error-icon {
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.form-error-message .error-text {
    color: #ef4444 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* ========================================
   Trade Confirm Modal Custom Styles - Black & Gold Theme
   ======================================== */

/* 交易确认弹窗 - 黑金主题 */
.trade-confirm-modal {
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #0a0a0a !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 60px rgba(255, 215, 0, 0.1) !important;
}

.trade-confirm-modal .layui-layer-title {
    background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: #FFD700 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 0 24px !important;
    height: 56px !important;
    line-height: 56px !important;
    text-align: center !important;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3) !important;
}

.trade-confirm-modal .layui-layer-content {
    background: #0a0a0a !important;
    padding: 0 !important;
}

.trade-confirm-modal .layui-layer-btn {
    background: linear-gradient(180deg, #0f0f0f 0%, #0a0a0a 100%) !important;
    border-top: 1px solid rgba(255, 215, 0, 0.15) !important;
    padding: 20px 24px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 修复按钮超出问题 - 强制重置所有Layer默认样式 */
.trade-confirm-modal .layui-layer-btn a,
.trade-confirm-modal .layui-layer-btn a.layui-layer-btn0,
.trade-confirm-modal .layui-layer-btn a.layui-layer-btn1 {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.trade-confirm-modal .layui-layer-btn0 {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    min-width: 100px !important;
    max-width: 140px !important;
}

.trade-confirm-modal .layui-layer-btn0:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.trade-confirm-modal .layui-layer-btn1 {
    background: transparent !important;
    color: #888 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    min-width: 100px !important;
    max-width: 140px !important;
}

.trade-confirm-modal .layui-layer-btn1:hover {
    background: rgba(255, 215, 0, 0.05) !important;
    color: #FFD700 !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
}

/* ========================================
   Trade Confirm Content Styles - Black & Gold
   ======================================== */

.trade-confirm-content {
    padding: 24px 28px;
    background: #0a0a0a;
}

.trade-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
}

.trade-confirm-row:last-of-type:not(.trade-confirm-total) {
    border-bottom: none;
}

.trade-confirm-total {
    border-top: 2px solid rgba(255, 215, 0, 0.4) !important;
    border-bottom: none !important;
    margin-top: 8px;
    padding-top: 16px;
    padding-bottom: 16px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
    margin-left: -28px;
    margin-right: -28px;
    padding-left: 28px;
    padding-right: 28px;
}

.trade-confirm-label {
    color: #888;
    font-weight: 500;
    font-size: 13px;
}

.trade-confirm-value {
    color: #e0e0e0;
    font-weight: 600;
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 14px;
}

.trade-confirm-value.highlight {
    color: #FFD700;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* Password Section */
.trade-confirm-password-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trade-confirm-password-hint {
    color: #666;
    margin-bottom: 12px;
    font-size: 13px;
    text-align: center;
}

/* Password Input - Black & Gold Theme */
.trade-confirm-password-input {
    width: 100% !important;
    padding: 16px 18px !important;
    background: #0d0d0d !important;
    background-color: #0d0d0d !important;
    border: 1px solid rgba(255, 215, 0, 0.2) !important;
    border-radius: 10px !important;
    color: #FFD700 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: 8px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.05) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

.trade-confirm-password-input:focus {
    border-color: #FFD700 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(255, 215, 0, 0.15), 0 0 20px rgba(255, 215, 0, 0.1) !important;
    background: #111 !important;
}

.trade-confirm-password-input::placeholder {
    color: #444 !important;
    letter-spacing: 2px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* 禁用浏览器自动填充样式 */
.trade-confirm-password-input:-webkit-autofill,
.trade-confirm-password-input:-webkit-autofill:hover,
.trade-confirm-password-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #FFD700 !important;
    -webkit-box-shadow: 0 0 0px 1000px #0d0d0d inset !important;
    box-shadow: 0 0 0px 1000px #0d0d0d inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
    background-color: #0d0d0d !important;
    border-color: rgba(255, 215, 0, 0.2) !important;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 480px) {
    .layui-layer-fast.layui-layer-page,
    .layui-layer-fast.layui-layer-dialog {
        width: 92% !important;
        left: 4% !important;
        border-radius: 14px !important;
    }
    
    .trading-modal-content,
    .password-modal-content,
    .confirm-modal-content {
        padding: 24px 20px;
    }
    
    .layui-layer-fast .layui-layer-btn {
        padding: 16px 20px !important;
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }
    
    .layui-layer-fast .layui-layer-btn a {
        width: 100% !important;
        margin: 0 !important;
    }
}