/* 
 * 金色主题配色方案
 * 参考GMO系统设计风格
 * 主色调：淡黄色 + 红色
 */

:root {
    /* 主色调 */
    --primary-color: #F5E9B8;          /* 淡黄色背景 */
    --primary-dark: #E8D89E;           /* 深黄色 */
    --secondary-color: #C8102E;        /* 正红色 */
    --accent-gold: #FFD700;            /* 金黄色 */
    --text-brown: #8B4513;             /* 棕色文字 */
    
    /* 渐变色 */
    --gradient-yellow: linear-gradient(135deg, #FFF5E1 0%, #F5E9B8 100%);
    --gradient-red: linear-gradient(135deg, #E84118 0%, #C8102E 100%);
    --gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    
    /* 功能色 */
    --success-color: #27ae60;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --info-color: #3498db;
    
    /* 中性色 */
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-light: #bdc3c7;
    --bg-white: #ffffff;
    --bg-light: #fef9f0;
    --border-color: #e0d5c3;
}

/* 全局背景色 */
body, html {
    background: var(--bg-light) !important;
    color: var(--text-primary);
}

/* 头部导航 */
.header {
    background: var(--gradient-yellow) !important;
    box-shadow: 0 2px 8px rgba(200, 16, 46, 0.1) !important;
}

.header a {
    color: var(--secondary-color) !important;
    font-weight: 600;
}

/* 顶部导航栏 - GMO风格 */
.othertop {
    background: var(--gradient-yellow) !important;
    color: var(--text-brown) !important;
    box-shadow: 0 2px 8px rgba(200, 16, 46, 0.1);
}

.othertop-font {
    color: var(--text-brown) !important;
}

/* 首页导航图标区域 */
.indexnav {
    background: var(--bg-white) !important;
    border-radius: 12px;
    margin: 0.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.indexnav a {
    transition: transform 0.2s;
}

.indexnav a:active {
    transform: scale(0.95);
}

.indexnav a font {
    color: var(--text-primary) !important;
    font-size: 0.26rem;
}

/* 公告栏 */
.marquee_outer {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFEAA7 100%) !important;
    border-radius: 12px;
    margin: 0.24rem 0.2rem !important;
    padding: 0.24rem 0.3rem !important;
    border: 2px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 4px 12px rgba(200, 16, 46, 0.15);
}

.marquee_outer > img {
    width: 0.56rem !important;
    height: 0.56rem !important;
    margin-right: 0.24rem !important;
}

.marquee_txt {
    flex: 1;
}

.marquee_txt marquee {
    font-size: 0.32rem !important;
    font-weight: 700 !important;
    color: var(--text-brown) !important;
}

.marquee_txt a {
    color: var(--secondary-color) !important;
    font-weight: 700 !important;
}

/* 项目卡片 - GMO卡片式设计 */
.tier {
    background: var(--bg-white) !important;
    border-radius: 12px !important;
    margin: 0.2rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.tier:active {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

.tier .img-box {
    position: relative;
    overflow: hidden;
}

.tier .img-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(245, 233, 184, 0.3) 100%);
}

.tier .info-box {
    padding: 0.3rem;
}

.tier .ib-head {
    color: var(--text-brown) !important;
    font-weight: 600;
    font-size: 0.32rem;
    margin-bottom: 0.2rem;
}

.tier .ib-head .index {
    background: var(--gradient-gold);
    color: var(--bg-white);
    padding: 0.05rem 0.15rem;
    border-radius: 4px;
    font-size: 0.24rem;
    margin-right: 0.1rem;
}

.tier .red {
    color: var(--secondary-color) !important;
    font-weight: 600;
}

.tier .ib-body {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 0.2rem;
    margin: 0.2rem 0;
}

.tier .now-btn {
    background: var(--gradient-red) !important;
    color: var(--bg-white) !important;
    border: none;
    border-radius: 20px;
    padding: 0.15rem 0.4rem;
    font-size: 0.28rem;
    box-shadow: 0 4px 8px rgba(200, 16, 46, 0.3);
}

/* 按钮样式 */
.input_btn {
    background: var(--gradient-red) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3) !important;
    transition: all 0.3s;
}

.input_btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(200, 16, 46, 0.4) !important;
}

/* 用户中心 */
.my_total {
    background: var(--gradient-yellow) !important;
    filter: none !important;
}

.my_total .bal {
    color: var(--secondary-color) !important;
}

.my_total .bal_tit {
    color: var(--text-brown) !important;
}

.my_total .user span {
    color: var(--text-brown) !important;
}

.my_total .wait {
    background: rgba(255, 255, 255, 0.3) !important;
}

.my_total .wait .item {
    border-left: 1px solid rgba(200, 16, 46, 0.2) !important;
}

.my_total .wait .item .span_num {
    color: var(--secondary-color) !important;
}

.my_total .wait .item .span_tit {
    color: var(--text-brown) !important;
}

/* 用户按钮 */
.user_btn a {
    background: var(--bg-white) !important;
    color: var(--secondary-color) !important;
    border: 2px solid var(--secondary-color);
    font-weight: 600;
    transition: all 0.3s;
}

.user_btn a:active {
    background: var(--secondary-color) !important;
    color: var(--bg-white) !important;
}

/* 用户列表 */
.user_list {
    background: var(--bg-white) !important;
    border-radius: 12px;
    margin: 0.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.user_list li a {
    color: var(--text-primary) !important;
    transition: background 0.2s;
}

.user_list li a:active {
    background: var(--bg-light) !important;
}

/* 输入框 */
.input_text {
    background: var(--bg-white) !important;
    border-bottom: 2px solid var(--border-color) !important;
    transition: border-color 0.3s;
}

.input_text:focus-within {
    border-bottom-color: var(--accent-gold) !important;
}

.input_text input {
    color: var(--text-primary) !important;
}

.input_text input::-webkit-input-placeholder {
    color: var(--text-light) !important;
}

/* 登录注册页面 */
.container_page {
    background: var(--gradient-yellow) !important;
}

.reg_bg {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 0.4rem;
    margin: 0.3rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* 底部导航 */
.footer_nav {
    background: var(--bg-white) !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
    border-top: 1px solid var(--border-color);
}

.footer_nav a span.active {
    color: var(--secondary-color) !important;
}

/* 详情页 */
.details_top {
    background: var(--bg-white) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px;
}

.details_foot {
    background: var(--bg-white) !important;
    border-radius: 12px;
    overflow: hidden;
}

.details_foot .tabs span.on {
    color: var(--secondary-color) !important;
    border-bottom: 3px solid var(--secondary-color) !important;
}

/* 进度条 */
.progressBox {
    background: #e0d5c3 !important;
}

.progressBox .progress {
    background: var(--gradient-gold) !important;
}

.progressNum {
    color: var(--accent-gold) !important;
    font-weight: 600;
}

/* 表单页面 */
.form_top {
    background: var(--gradient-yellow) !important;
    border: 2px solid var(--accent-gold);
}

.form_top p .span_num {
    color: var(--secondary-color) !important;
}

.form_top p .span_tit {
    color: var(--text-brown) !important;
}

/* 银行卡 */
.mycard {
    background: var(--gradient-yellow) !important;
    border: 2px solid var(--accent-gold);
    filter: none !important;
}

/* 链接颜色 */
.p1 a, .p2 a {
    color: var(--secondary-color) !important;
}

/* 圆形进度 */
.circle {
    background: var(--gradient-red) !important;
}

.mask span {
    color: var(--secondary-color) !important;
}

/* 投资按钮 */
.invest_btn a {
    background: var(--gradient-red) !important;
    box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3);
}

/* 发送验证码按钮 */
#getcode {
    color: var(--secondary-color) !important;
}

#getcode.on {
    color: var(--text-light) !important;
}

/* 记录表格 */
.record_outer table td a.a1 {
    background: var(--accent-gold) !important;
}

.record_outer table td a.a2 {
    background: var(--secondary-color) !important;
}

/* 标题强调 */
.planner_h2 span {
    border-left: 3px solid var(--accent-gold) !important;
    color: var(--text-brown) !important;
}

/* 卡片悬停效果 */
.user_list li a:hover,
.about_outer li a:hover,
.mnote li a:hover {
    background: var(--bg-light) !important;
}

/* 特殊文字颜色 */
strong, .red {
    color: var(--secondary-color) !important;
}

/* 成功提示 */
.success-text {
    color: var(--success-color) !important;
}

/* 金色徽章 */
.badge-gold {
    background: var(--gradient-gold);
    color: var(--bg-white);
    padding: 0.08rem 0.2rem;
    border-radius: 12px;
    font-size: 0.24rem;
    display: inline-block;
}

/* 红色徽章 */
.badge-red {
    background: var(--gradient-red);
    color: var(--bg-white);
    padding: 0.08rem 0.2rem;
    border-radius: 12px;
    font-size: 0.24rem;
    display: inline-block;
}

/* 卡片阴影效果增强 */
.card-shadow {
    box-shadow: 0 4px 16px rgba(200, 16, 46, 0.1);
    transition: all 0.3s ease;
}

.card-shadow:hover {
    box-shadow: 0 8px 24px rgba(200, 16, 46, 0.15);
    transform: translateY(-2px);
}

/* 波浪装饰 - 类似图片底部的红色波浪 */
.wave-decoration {
    position: relative;
    padding-bottom: 1rem;
}

.wave-decoration::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.8rem;
    background: var(--secondary-color);
    clip-path: polygon(0 50%, 10% 40%, 20% 50%, 30% 40%, 40% 50%, 50% 40%, 60% 50%, 70% 40%, 80% 50%, 90% 40%, 100% 50%, 100% 100%, 0 100%);
}

/* 金币图标效果 */
.coin-icon {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--gradient-gold);
    border-radius: 50%;
    text-align: center;
    line-height: 0.5rem;
    color: var(--bg-white);
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}