* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: linear-gradient(135deg, #0a1628 0%, #1a2a4a 100%);
    color: #e0e8f0;
    min-height: 100vh;
}

.header {
    background: rgba(15, 25, 45, 0.95);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #d4af37;
    flex-wrap: wrap;
    gap: 1rem;
}
.logo h1 { color: #d4af37; font-size: 1.5rem; }
.subtitle { color: #8899aa; font-size: 0.8rem; }
.nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.nav-item {
    color: #aabbcc; text-decoration: none; padding: 0.4rem 0.8rem;
    border-radius: 20px; transition: 0.3s; font-size: 0.9rem;
}
.nav-item:hover, .nav-item.active { background: rgba(212,175,55,0.2); color: #d4af37; }
.user-info { display: flex; align-items: center; gap: 0.8rem; }
.user-avatar img { width: 35px; height: 35px; border-radius: 50%; border: 2px solid #d4af37; }

.btn {
    padding: 0.6rem 1.5rem; border-radius: 25px; border: none;
    cursor: pointer; font-weight: bold; transition: 0.3s; font-size: 0.9rem;
}
.btn-primary { background: linear-gradient(135deg, #d4af37, #b8941f); color: #0a1628; }
.btn-success { background: #27ae60; color: white; }
.btn-danger { background: #e74c3c; color: white; }
.btn-secondary { background: #334455; color: white; }
.btn-outline { background: transparent; border: 1px solid #d4af37; color: #d4af37; }
.btn-small { padding: 0.3rem 1rem; font-size: 0.8rem; }
.btn-block { width: 100%; }
.btn:hover { opacity: 0.9; transform: translateY(-1px); }

.page { display: none; max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
.page.active { display: block; }

.card {
    background: rgba(20,30,50,0.8); border-radius: 15px;
    padding: 1.5rem; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 1rem;
}

/* 欢迎页 */
.welcome-container {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}
.welcome-card {
    background: rgba(20,30,50,0.9);
    padding: 2.5rem;
    border-radius: 20px;
    max-width: 700px;
    width: 100%;
    border: 1px solid rgba(212,175,55,0.3);
}
.welcome-card h1 {
    font-size: 2.5rem;
    color: #d4af37;
    text-align: center;
}
.welcome-card h2 {
    font-size: 1.2rem;
    color: #8899aa;
    text-align: center;
    margin-bottom: 2rem;
}
.intro-section {
    background: rgba(255,255,255,0.03);
    padding: 1.2rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid rgba(255,255,255,0.06);
}
.intro-section h3 {
    color: #d4af37;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}
.intro-section ul {
    list-style: none;
    padding: 0;
}
.intro-section li {
    padding: 0.4rem 0;
    color: #c0d0e0;
    font-size: 0.95rem;
}
.intro-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.auth-container { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; padding: 3rem 0; }
.auth-card {
    background: rgba(20,30,50,0.9); padding: 2rem; border-radius: 15px;
    width: 400px; border: 1px solid rgba(212,175,55,0.3);
}
.auth-card h2 { margin-bottom: 1.5rem; color: #d4af37; }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.3rem; color: #aabbcc; }
.form-group input, .form-group select {
    width: 100%; padding: 0.7rem; border-radius: 8px;
    border: 1px solid #334455; background: rgba(10,20,35,0.8);
    color: white; font-size: 0.95rem;
}
.form-group input:focus, .form-group select:focus {
    border-color: #d4af37; outline: none;
}

.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; }
.stock-card {
    background: rgba(25,35,55,0.8); padding: 1rem; border-radius: 10px;
    border: 1px solid #334455; cursor: pointer; transition: 0.3s;
}
.stock-card:hover { border-color: #d4af37; transform: translateY(-2px); }
.stock-symbol { color: #d4af37; font-weight: bold; font-size: 1.1rem; }
.stock-name { color: #8899aa; font-size: 0.8rem; }
.stock-price { font-size: 1.2rem; margin: 0.5rem 0; }
.positive { color: #27ae60; }
.negative { color: #e74c3c; }

table { width: 100%; border-collapse: collapse; background: rgba(20,30,50,0.8); border-radius: 10px; overflow: hidden; }
th, td { padding: 0.8rem; text-align: left; border-bottom: 1px solid #334455; }
thead { background: rgba(212,175,55,0.2); }
.rank-1 { color: #d4af37; font-weight: bold; }
.rank-2 { color: #c0c0c0; font-weight: bold; }
.rank-3 { color: #cd7f32; font-weight: bold; }

.summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1rem 0; }
.summary-card {
    background: rgba(20,30,50,0.8); padding: 1rem; border-radius: 10px;
    text-align: center; border: 1px solid #334455;
}
.summary-card span { color: #8899aa; font-size: 0.8rem; }
.summary-card strong { display: block; font-size: 1.3rem; margin-top: 0.3rem; }

.trade-container { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.trade-card { background: rgba(20,30,50,0.8); padding: 1.5rem; border-radius: 15px; }

.modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 1000;
}
.modal-content {
    background: #1a2a4a; padding: 2rem; border-radius: 15px;
    max-width: 700px; margin: 5% auto; position: relative;
}
.close { position: absolute; right: 1rem; top: 0.5rem; font-size: 2rem; cursor: pointer; color: #fff; }

.toast {
    position: fixed; top: 20px; right: 20px; padding: 1rem 2rem;
    border-radius: 10px; display: none; z-index: 2000; font-weight: bold;
}
.toast.success { background: #27ae60; }
.toast.error { background: #e74c3c; }
.toast.show { display: block; animation: slideIn 0.3s; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.note { color: #d4af37; font-size: 0.85rem; }
.controls { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-header { margin-bottom: 1.5rem; }
.trade-rules ul { list-style: none; padding: 0; }
.trade-rules li { padding: 0.3rem 0; }

@media (max-width: 768px) {
    .header { flex-direction: column; }
    .summary-cards { grid-template-columns: 1fr 1fr; }
    .trade-container { grid-template-columns: 1fr; }
}