/* PC 端模板样式 - Secure Exchange System 设计系统
 * 颜色 token：主色 #0050cb 信赖蓝 / 辅色 #006c49 安全绿
 * 字体：Inter (正文) + JetBrains Mono (订单号/卡密) + PingFang SC (中文回退)
 * 圆角：基础 0.25rem / 卡片 0.5rem
 * 深度：通过 Tonal Layers 替代阴影
 */

:root {
    /* === 颜色 token === */
    --color-primary: #0050cb;
    --color-on-primary: #ffffff;
    --color-primary-container: #0066ff;
    --color-on-primary-container: #f8f7ff;
    --color-primary-fixed: #dae1ff;
    --color-primary-fixed-dim: #b3c5ff;
    --color-on-primary-fixed: #001849;
    --color-on-primary-fixed-variant: #003fa4;
    --color-surface-tint: #0054d6;

    --color-secondary: #006c49;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #6cf8bb;
    --color-on-secondary-container: #00714d;
    --color-secondary-fixed: #6ffbbe;
    --color-secondary-fixed-dim: #4edea3;
    --color-on-secondary-fixed: #002113;
    --color-on-secondary-fixed-variant: #005236;

    --color-tertiary: #a33200;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #cc4204;
    --color-on-tertiary-container: #fff6f4;
    --color-tertiary-fixed: #ffdbd0;
    --color-tertiary-fixed-dim: #ffb59d;
    --color-on-tertiary-fixed: #390c00;
    --color-on-tertiary-fixed-variant: #832600;

    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;

    --color-background: #f8f9ff;
    --color-on-background: #0b1c30;
    --color-surface: #f8f9ff;
    --color-on-surface: #0b1c30;
    --color-surface-variant: #d3e4fe;
    --color-on-surface-variant: #424656;
    --color-surface-bright: #f8f9ff;
    --color-surface-dim: #cbdbf5;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #eff4ff;
    --color-surface-container: #e5eeff;
    --color-surface-container-high: #dce9ff;
    --color-surface-container-highest: #d3e4fe;

    --color-outline: #727687;
    --color-outline-variant: #c2c6d8;
    --color-inverse-surface: #213145;
    --color-inverse-on-surface: #eaf1ff;
    --color-inverse-primary: #b3c5ff;

    /* === 圆角 === */
    --radius-default: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* === 间距 === */
    --spacing-container-margin: 1rem;
    --spacing-gutter: 0.75rem;
    --spacing-touch-target-min: 2.75rem;
    --spacing-stack-sm: 0.5rem;
    --spacing-stack-md: 1rem;
    --spacing-stack-lg: 1.5rem;
}

/* === 全局基础样式 === */
body {
    background-color: var(--color-background);
    color: var(--color-on-surface);
    font-family: 'Inter', 'PingFang SC', 'Hiragino Sans GB', system-ui, sans-serif;
    overflow-x: hidden;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-surface-tint); text-decoration: underline; }

/* === Material Symbols 图标 === */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

/* === 辅助工具类 === */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #e2e8f0;
}

.product-card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: #0066ff;
}

.order-card-hover {
    transition: all 0.2s ease;
}
.order-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* === Tailwind/Bootstrap 兼容样式 === */

/* 重置 Bootstrap navbar 样式（新设计使用自定义 header） */
.navbar { display: none !important; }

/* Bootstrap card 在新设计中的协调样式 */
.card {
    background-color: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    box-shadow: none;
    margin-bottom: 1rem;
}

.card-header {
    background-color: var(--color-surface-container-low);
    border-bottom: 1px solid var(--color-outline-variant);
    padding: 1rem;
    font-weight: 600;
}

.card-body { padding: 1rem; }

/* Bootstrap btn 与新设计协调 */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--radius-default);
}

.btn-primary:hover {
    background-color: var(--color-surface-tint);
    border-color: var(--color-surface-tint);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: var(--radius-default);
}

.btn-outline-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* Bootstrap form-control 协调 */
.form-control {
    border-color: var(--color-outline-variant);
    border-radius: var(--radius-default);
    padding: 0.5rem 0.75rem;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

/* Bootstrap alert 协调 */
.alert {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-outline-variant);
    padding: 1rem;
}

.alert-info {
    background-color: var(--color-surface-container-low);
    color: var(--color-on-surface-variant);
    border-color: var(--color-outline-variant);
}

/* Bootstrap table 协调 */
.table {
    color: var(--color-on-surface);
}
.table thead th {
    border-bottom: 1px solid var(--color-outline-variant);
    color: var(--color-on-surface-variant);
    font-weight: 600;
}
.table td, .table th {
    border-top: 1px solid var(--color-outline-variant);
    padding: 0.75rem;
}

/* Bootstrap list-group 协调 */
.list-group-item {
    border: 1px solid var(--color-outline-variant);
    color: var(--color-on-surface);
}
.list-group-item:not(:last-child) {
    border-bottom: 0;
}

/* === 商品价格与库存标识 === */
.product-price {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.25rem;
}

.stock-info {
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
}

/* === 用户头像样式 === */
.user-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

/* === Modal 公告弹窗协调 === */
.modal-content {
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.modal-header {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-bottom: 0;
}

.modal-footer {
    border-top: 1px solid var(--color-outline-variant);
    background-color: var(--color-surface-container-lowest);
}

/* === 行号显示（订单号、卡密等）使用 JetBrains Mono === */
.font-mono, .order-no, .card-key {
    font-family: 'JetBrains Mono', 'Menlo', monospace;
    letter-spacing: 0.02em;
}

/* === 响应式调整 === */
@media (min-width: 768px) {
    body { font-size: 14px; line-height: 20px; }
}