page { background:#0c0e12; color:#f6f6fc; } .page { min-height:100vh; background:#0c0e12; box-sizing:border-box; } .content { height:calc(100vh - 120rpx); padding:32rpx; box-sizing:border-box; } .config-content { padding-bottom:180rpx; } .heading { margin:16rpx 0 24rpx; } .title { display:block; font-size:52rpx; font-weight:800; } .subtitle { display:block; margin-top:10rpx; font-size:28rpx; color:#aaabb0; line-height:1.6; } .config-card { margin-top:24rpx; padding:28rpx; border-radius:28rpx; background:rgba(29,32,37,.65); border:1rpx solid rgba(255,255,255,.08); } .section-title { display:block; font-size:32rpx; font-weight:700; margin-bottom:20rpx; } .chip-row { display:flex; flex-wrap:wrap; gap:16rpx; } .chip { padding:18rpx 28rpx; border-radius:9999rpx; background:#23262c; color:#aaabb0; } .chip.active { background:#c19cff; color:#000; } .two-grid { display:grid; grid-template-columns:1fr 1fr; gap:18rpx; } .option-box, .mode-item { padding:24rpx; border-radius:24rpx; background:#111318; border:1rpx solid rgba(255,255,255,.08); text-align:center; color:#aaabb0; min-height:96rpx; display:flex; align-items:center; justify-content:center; } .option-box.active, .mode-item.active { color:#c19cff; border-color:#c19cff; } .mode-list { display:flex; flex-direction:column; gap:18rpx; } .switch-row, .range-row { display:flex; justify-content:space-between; align-items:center; padding:12rpx 0; } .switch { padding:6rpx 16rpx; border-radius:9999rpx; background:#23262c; color:#aaabb0; } .switch.on { background:#c19cff; color:#000; } .accent { color:#c19cff; font-weight:700; } .start-btn { margin:32rpx 0 48rpx; padding:28rpx 0; border-radius:9999rpx; background:linear-gradient(90deg,#c19cff,#9146ff); color:#fff; font-size:34rpx; font-weight:800; box-shadow:0 0 20rpx rgba(193,156,255,.28); } .bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; justify-content:space-around; align-items:center; padding:20rpx 24rpx 40rpx; background:rgba(12,14,18,.7); backdrop-filter:blur(32rpx); border-top:1rpx solid rgba(255,255,255,.08); border-radius:32rpx 32rpx 0 0; box-shadow:0 -10rpx 40rpx rgba(0,0,0,.4); } .nav-item { display:flex; flex-direction:column; align-items:center; gap:6rpx; color:#aaabb0; } .nav-item.active { color:#00e3fd; transform:translateY(-6rpx); } .nav-icon { width:56rpx; height:56rpx; border-radius:9999rpx; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; } .nav-label { font-size:20rpx; }