.root { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1000; } .mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); } .sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; padding: 16rpx 40rpx calc(40rpx + env(safe-area-inset-bottom)); box-sizing: border-box; background: #ffffff; border-radius: 32rpx 32rpx 0 0; overflow-y: auto; } .handle { width: 64rpx; height: 8rpx; margin: 0 auto 28rpx; border-radius: 4rpx; background: #e5e7eb; } .title { display: block; color: #111827; font-size: 40rpx; font-weight: 700; line-height: 1.3; } .subtitle { display: block; margin-top: 12rpx; color: #9ca3af; font-size: 26rpx; line-height: 1.5; } .notice { display: flex; align-items: flex-start; gap: 12rpx; margin-top: 28rpx; padding: 20rpx 24rpx; border-radius: 16rpx; background: #e8f7f4; } .notice-icon { flex-shrink: 0; font-size: 28rpx; line-height: 1.45; } .notice-text { flex: 1; color: #0d8b87; font-size: 24rpx; line-height: 1.55; } .field { margin-top: 28rpx; } .label-row { display: flex; align-items: center; gap: 4rpx; } .label { display: block; color: #374151; font-size: 28rpx; font-weight: 500; } .required { color: #ef4444; font-size: 28rpx; line-height: 1; } .input { height: 88rpx; margin-top: 14rpx; padding: 0 28rpx; border: 2rpx solid #e5e7eb; border-radius: 16rpx; box-sizing: border-box; font-size: 30rpx; color: #111827; background: #ffffff; } .placeholder { color: #c4c9d1; } .btn { height: 96rpx; margin-top: 24rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 600; box-sizing: border-box; } .btn.primary { margin-top: 40rpx; background: #0d8b87; color: #ffffff; } .btn.primary.busy { opacity: 0.7; } .btn.ghost { background: #ffffff; color: #0d8b87; border: 2rpx solid #0d8b87; }