/* 资产配置测算工具 - 样式表 */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f7fb;
    -webkit-tap-highlight-color: transparent;
}

#app {
    min-height: 100vh;
    padding-bottom: 60px;
}

.page-container {
    padding: 12px;
    min-height: calc(100vh - 60px);
}

.card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #323233;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stat-card {
    text-align: center;
    padding: 16px 12px;
    background: #f7f8fa;
    border-radius: 8px;
}

.stat-value {
    font-size: 20px;
    font-weight: bold;
    color: #1989fa;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 12px;
    color: #969799;
}

.profit-positive {
    color: #07c160 !important;
}

.profit-negative {
    color: #ee0a24 !important;
}

.year-profit-card {
    text-align: center;
    padding: 24px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    margin-bottom: 12px;
}

.year-profit-value {
    font-size: 32px;
    font-weight: bold;
    margin: 12px 0;
}

.year-profit-rate {
    font-size: 16px;
    opacity: 0.9;
}

.tag-list {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.tag {
    display: inline-block;
    padding: 2px 6px;
    background: #f2f3f5;
    border-radius: 4px;
    font-size: 11px;
    color: #646566;
}

.holding-item {
    padding: 12px;
    border-bottom: 1px solid #ebedf0;
}

.holding-item:last-child {
    border-bottom: none;
}

.product-item {
    padding: 12px;
    border-bottom: 1px solid #ebedf0;
}

.product-item:last-child {
    border-bottom: none;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #969799;
}

.form-section {
    margin-bottom: 16px;
}

.form-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #323233;
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 3px solid #1989fa;
}

/* 弹窗内容区域 - 确保键盘弹出时可滚动 */
.popup-content {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* 输入框聚焦时的样式 */
.van-field:focus-within {
    position: relative;
    z-index: 1;
}

/* 确保弹窗在键盘弹出时保持可滚动 */
.van-popup--bottom {
    transition: transform 0.3s, bottom 0.3s;
}

/* 键盘弹出时的安全区域 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .popup-content {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

/* 输入框容器 - 键盘弹出时增加底部间距 */
.van-form .van-cell {
    margin-bottom: 8px;
}

/* 确保底部按钮区域不被键盘遮挡 */
.van-popup__content {
    display: flex;
    flex-direction: column;
}

.van-popup__content > div {
    flex: 1;
    overflow-y: auto;
}