/* 交易机器人页面：原页面自定义组件按共享设计规范（app.css）重新设计，类名不变，交易逻辑不受影响 */

#app { position: relative; }

.glass {
    position: relative;
    border-radius: var(--lz-radius);
    background: var(--lz-surface);
    box-shadow: var(--lz-shadow);
    overflow: hidden;
}
.panel { transition: box-shadow 0.25s ease; }
.hero-card { background: var(--lz-surface); }
.hero-card h1 { font-size: clamp(38px, 5vw, 56px) !important; letter-spacing: -0.045em; font-weight: 800 !important; line-height: 1.05; margin-top: 14px !important; font-variant-numeric: tabular-nums; }
.panel--balanced { background: var(--lz-surface); }
.metric-tile { background: var(--lz-surface-2); border-radius: 18px; }
.metric-tile .text-lg { font-size: 19px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.card-hover { transition: transform 0.22s ease, box-shadow 0.22s ease; cursor: pointer; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--lz-shadow-lg); }
.card-hover:focus-visible { outline: 3px solid var(--lz-blue); outline-offset: 3px; }

/* 原按钮类统一成胶囊按钮 */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.6rem 1.15rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
    border: 0; transition: background 0.15s ease, transform 0.12s ease;
}
.btn:disabled { cursor: not-allowed; opacity: 0.4; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn--danger { background: var(--lz-red-soft); color: var(--lz-red); }
.btn--danger:hover:not(:disabled) { background: #fadadf; }
.btn--primary { background: var(--lz-blue); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--lz-blue-2); }
.btn--ghost { background: var(--lz-surface-2); color: var(--lz-ink); }
.btn--ghost:hover:not(:disabled) { background: var(--lz-surface-3); }

.lz-pulse { animation: lz-pulse 1.8s ease-in-out infinite; }
@keyframes lz-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 160, 106, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(0, 160, 106, 0); } }

.fade-in { animation: fadeSlideIn 0.25s both; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.scrollbar-thin::-webkit-scrollbar { width: 5px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(25, 28, 31, 0.18); border-radius: 10px; }

.chip {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.range-track { position: relative; height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(0, 160, 106, 0.3), rgba(6, 102, 235, 0.3), rgba(224, 51, 74, 0.3)); }
.range-track__marker {
    position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--lz-ink);
    border: 3px solid #fff; box-shadow: 0 2px 6px rgba(25, 28, 31, 0.25); transform: translate(-50%, -50%);
}
.ladder-row { display: grid; grid-template-columns: 34px 1fr 1.6fr 64px; align-items: center; gap: 0.5rem; }
.ladder-price-row { display: flex; align-items: center; gap: 0.5rem; color: var(--lz-blue); font-weight: 800; font-size: 11px; }
.ladder-price-row::before, .ladder-price-row::after { content: ''; flex: 1; height: 0; border-top: 2px dashed rgba(6, 102, 235, 0.5); }

.toast {
    position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100000;
    max-width: min(460px, calc(100vw - 32px)); padding: 0.85rem 1.25rem; border-radius: 999px; font-size: 14px; font-weight: 600;
    box-shadow: var(--lz-shadow-lg); text-align: center;
}
.toast--ok { background: var(--lz-ink); color: #fff; }
.toast--err { background: var(--lz-red); color: #fff; }

table { border-collapse: collapse; width: 100%; }
thead tr { background: transparent; }
thead th { color: var(--lz-muted); font-size: 12px; font-weight: 600; text-align: left; }
th, td { padding: 0.7rem 0.65rem; }
tbody tr { border-top: 1px solid var(--lz-line); }
tbody tr:hover { background: var(--lz-surface-2) !important; }
.border-b { border-color: var(--lz-line) !important; }
.border-t { border-color: var(--lz-line) !important; }

/* 弹窗（策略详情、管理品种）统一成大圆角白卡片 */
.rounded-3xl { border-radius: 28px !important; }