:root {
    --bg-deep: #09090b;
    --bg-surface: #18181b;
    --bg-highlight: #27272a;
    --primary: #3b82f6;
    --primary-glow: rgba(59, 130, 246, 0.3);
    --primary-dark: #2563eb;
    --accent: #06b6d4;
    --danger: #ef4444;
    --success: #10b981;
    --text-main: #f4f4f5;
    --text-muted: #a1a1aa;
    --border: rgba(255, 255, 255, 0.08);
    --glass: rgba(24, 24, 27, 0.95);
    --radius-lg: 20px;
    --radius-md: 12px;
}

[v-cloak] .main-wrapper { opacity: 0; }
[v-cloak] .loading-overlay { display: flex; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    background: radial-gradient(circle at 50% 0%, #1e293b 0%, #09090b 70%);
    background-color: var(--bg-deep);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: fixed; width: 100%;
}

.loading-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-deep); display: none; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 0.9rem; z-index: 999;
}

.main-wrapper {
    width: 100%; max-width: 480px; height: 100%;
    display: flex; flex-direction: column; padding: 16px;
    transition: opacity 0.3s;
}

.app-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 15px; gap: 10px; }
.logo { font-size: 1.4rem; font-weight: 800; color: #fff; }
.logo span { color: var(--primary); }

/* --- 导航栏滑动优化 --- */
.segmented-nav {
    position: relative; 
    display: flex; 
    background: rgba(255,255,255,0.05);
    padding: 3px; 
    border-radius: 100px; 
    width: 100%; 
    border: 1px solid var(--border);
    /* 关键属性：允许横向滚动 */
    overflow-x: auto;
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
}
.segmented-nav::-webkit-scrollbar { display: none; /* Chrome/Safari 隐藏滚动条 */ }

.segmented-nav button {
    /* 关键属性：强制每个按钮占 1/3 宽度 */
    flex: 0 0 33.33%; 
    background: transparent; border: none; color: var(--text-muted);
    padding: 10px 0; font-size: 0.85rem; font-weight: 500; cursor: pointer; z-index: 2;
    transition: color 0.2s; touch-action: manipulation;
    white-space: nowrap;
}
.segmented-nav button.active { color: #fff; }

.nav-glider {
    position: absolute; top: 3px; bottom: 3px; background: var(--bg-highlight);
    border-radius: 100px; z-index: 1; transition: transform 0.25s ease-out;
    will-change: transform;
    /* 宽度由 JS 或 CSS 强制控制在 33.33% */
}
/* -------------------- */

.glass-card {
    flex: 1; background: var(--glass);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 20px; overflow-y: auto; overflow-x: hidden;
    position: relative; 
    scrollbar-width: none; -ms-overflow-style: none;
}
.glass-card::-webkit-scrollbar { display: none; }

.module-header { text-align: center; margin-bottom: 15px; }
.module-header h2 { font-size: 1.2rem; font-weight: 600; color: #fff; margin-bottom: 2px; }
.module-header p { font-size: 0.75rem; color: var(--text-muted); }

.digital-screen {
    background: #000; border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 15px; text-align: center; margin-bottom: 15px;
}
.digital-screen.active { border-color: var(--primary); }
.screen-label { font-size: 0.7rem; color: var(--text-muted); letter-spacing: 1px; }
.screen-value { font-size: 2.8rem; font-weight: 700; margin: 5px 0; color: #fff; font-variant-numeric: tabular-nums; }
.screen-status { font-size: 0.8rem; color: var(--primary); min-height: 1.2em; }

.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.input-wrapper label { font-size: 0.75rem; color: var(--text-muted); margin-left: 4px; display: block; }
input {
    background: var(--bg-highlight); border: 1px solid transparent; color: #fff;
    padding: 10px; border-radius: var(--radius-md); font-size: 1rem; width: 100%; outline: none;
    touch-action: manipulation;
}
input:focus { border-color: var(--primary); }

.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.span-full { grid-column: span 2; }
.btn {
    padding: 12px; border-radius: var(--radius-md); border: none; font-weight: 600;
    font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    touch-action: manipulation; transition: opacity 0.2s;
}
.btn:active { opacity: 0.7; }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn-primary { background: var(--primary); color: white; }
.btn-secondary { background: var(--bg-highlight); color: var(--text-main); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.btn-danger { background: rgba(239,68,68,0.15); color: var(--danger); }

.advanced-feature { background: rgba(255,255,255,0.03); border-radius: var(--radius-md); padding: 12px; border: 1px solid var(--border); }
.feature-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; font-weight: 600; }

.decibel-meter { height: 4px; background: #3f3f46; border-radius: 2px; margin-top: 5px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--accent); transition: width 0.1s; will-change: width; }
.error-msg { color: var(--danger); font-size: 0.8rem; margin-top: 8px; background: rgba(239,68,68,0.1); padding: 8px; border-radius: 6px; line-height: 1.4; }
.hint-text { font-size: 0.7rem; color: var(--text-muted); opacity: 0.6; text-align: center; }

.lottery-stage { margin: 15px 0; }
.lottery-card {
    background: linear-gradient(135deg, #1e293b, #0f172a); height: 120px;
    border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); touch-action: manipulation;
}
.lottery-card.pulsing { border-color: var(--accent); }
.lottery-text { font-size: 1.5rem; font-weight: 700; color: #fff; }

.input-group-button { display: flex; gap: 8px; margin-bottom: 12px; }
.input-group-button button { padding: 0 16px; background: var(--bg-highlight); color: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.quick-actions { display: flex; justify-content: space-between; margin-bottom: 15px; }
.text-btn { background: none; border: none; color: var(--text-muted); font-size: 0.75rem; padding: 5px; }

.list-view { background: rgba(0,0,0,0.2); border-radius: var(--radius-md); border: 1px solid var(--border); }
.list-head { padding: 8px 12px; font-size: 0.75rem; color: var(--text-muted); background: rgba(255,255,255,0.03); }
.list-body { max-height: 180px; overflow-y: auto; scrollbar-width: none; }
.list-body::-webkit-scrollbar { display: none; }
.list-item { display: flex; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--border); font-size: 0.85rem; }
.icon-btn { background: none; border: none; color: var(--text-muted); font-size: 1.2rem; padding: 0 5px; }

.link-grid { display: grid; gap: 10px; margin-bottom: 20px; }
.link-card { background: var(--bg-highlight); padding: 15px; border-radius: var(--radius-md); text-decoration: none; display: flex; align-items: center; gap: 12px; border: 1px solid transparent; }
.link-card.highlight { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.2); }
.link-icon { font-size: 1.4rem; }
.link-info h3 { font-size: 0.9rem; color: #fff; margin-bottom: 2px; }
.link-info span { font-size: 0.75rem; color: var(--text-muted); }

.info-block { background: rgba(255,255,255,0.02); padding: 12px; border-radius: var(--radius-md); margin-bottom: 10px; font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }
.info-block.warning { border-left: 3px solid var(--danger); background: rgba(239,68,68,0.05); }
.footer-contact { text-align: center; margin-top: 15px; }
.footer-contact a { color: var(--text-muted); font-size: 0.75rem; text-decoration: none; }

.fade-slide-enter-active, .fade-slide-leave-active { transition: opacity 0.2s; }
.fade-slide-enter-from, .fade-slide-leave-to { opacity: 0; }