Let me gather design system recommendations and assets for a bright, light-themed panoramic video platform....
```json{
"summary": "将全景视频平台重新设计为明亮风格。采用奶油白底色搭配活力珊瑚橙主色调和靛蓝点缀色，营造温暖明快的视觉氛围。使用 Sora + Nunito 字体组合，配合柔和圆角、轻盈投影和微妙的几何纹理背景。三个核心页面（上传、分屏、全景）均采用明亮配色重构，保留所有功能交互设计，加入彩色渐变装饰元素和流畅入场动画。",
"widget": {"type":"full-html","html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>PanoVision - 全景视频平台</title>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n<link href=\"https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;…\" rel=\"stylesheet\">\n<script>\ntailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n heading: ['Sora', 'sans-serif'],\n body: ['Nunito', 'sans-serif'],\n }\n }\n }\n}\n</script>\n<style>\n:root {\n --coral: #F06449;\n --coral-light: #FF8A73;\n --coral-soft: rgba(240,100,73,0.08);\n --indigo: #4F46E5;\n --indigo-light: #818CF8;\n --indigo-soft: rgba(79,70,229,0.08);\n --teal: #0D9488;\n --teal-soft: rgba(13,148,136,0.08);\n --bg-base: #FAFAF7;\n --bg-card: #FFFFFF;\n --bg-elevated: #F5F4F0;\n --border-light: rgba(0,0,0,0.06);\n --border-medium: rgba(0,0,0,0.1);\n --text-primary: #1A1A2E;\n --text-secondary: #6B7084;\n --text-muted: #A0A3B1;\n --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);\n --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.03);\n --shadow-lg: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);\n --shadow-coral: 0 8px 30px rgba(240,100,73,0.15);\n}\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml { scroll-behavior: smooth; }\nbody {\n font-family: 'Nunito', sans-serif;\n background: var(--bg-base);\n color: var(--text-primary);\n overflow-x: hidden;\n min-height: 100vh;\n}\n\n/* Subtle texture */\nbody::before {\n content: '';\n position: fixed;\n inset: 0;\n background: url('https://www.transparenttextures.com/patterns/cream-pixels.png');\n opacity: 0.5;\n pointer-events: none;\n z-index: 0;\n}\n\n/* Decorative blobs */\n.deco-blob {\n position: fixed;\n border-radius: 50%;\n filter: blur(100px);\n opacity: 0.25;\n pointer-events: none;\n z-index: 0;\n}\n.blob-1 { width: 500px; height: 500px; background: var(--coral-light); top: -150px; right: -100px; animation: blobFloat 18s ease-in-out infinite; }\n.blob-2 { width: 400px; height: 400px; background: var(--indigo-light); bottom: -100px; left: -80px; animation: blobFloat 22s ease-in-out infinite reverse; }\n.blob-3 { width: 300px; height: 300px; background: #34d399; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: blobFloat 25s ease-in-out infinite 3s; }\n\n@keyframes blobFloat {\n 0%, 100% { transform: translate(0, 0) scale(1); }\n 33% { transform: translate(40px, -30px) scale(1.08); }\n 66% { transform: translate(-30px, 40px) scale(0.95); }\n}\n\n/* Navigation */\n.nav-tab {\n position: relative;\n padding: 0.5rem 1.125rem;\n font-family: 'Sora', sans-serif;\n font-weight: 500;\n font-size: 0.8125rem;\n color: var(--text-secondary);\n cursor: pointer;\n transition: all 0.3s ease;\n border: none;\n background: none;\n border-radius: 10px;\n}\n.nav-tab:hover { color: var(--text-primary); background: rgba(0,0,0,0.03); }\n.nav-tab.active {\n color: var(--coral);\n background: var(--coral-soft);\n}\n\n/* Page sections */\n.page-section {\n display: none;\n animation: fadeSlideIn 0.5s ease-out;\n}\n.page-section.active { display: block; }\n\n@keyframes fadeSlideIn {\n from { opacity: 0; transform: translateY(16px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* Stagger */\n.stagger-in > * {\n opacity: 0;\n animation: staggerFade 0.45s ease-out forwards;\n}\n.stagger-in > *:nth-child(1) { animation-delay: 0.08s; }\n.stagger-in > *:nth-child(2) { animation-delay: 0.16s; }\n.stagger-in > *:nth-child(3) { animation-delay: 0.24s; }\n.stagger-in > *:nth-child(4) { animation-delay: 0.32s; }\n.stagger-in > *:nth-child(5) { animation-delay: 0.4s; }\n.stagger-in > *:nth-child(6) { animation-delay: 0.48s; }\n\n@keyframes staggerFade {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* Upload zone */\n.upload-zone {\n position: relative;\n border: 2px dashed rgba(240,100,73,0.25);\n border-radius: 24px;\n padding: 3.5rem 2rem;\n text-align: center;\n transition: all 0.4s ease;\n background: linear-gradient(135deg, rgba(240,100,73,0.03), rgba(79,70,229,0.02));\n cursor: pointer;\n}\n.upload-zone:hover {\n border-color: rgba(240,100,73,0.5);\n background: linear-gradient(135deg, rgba(240,100,73,0.06), rgba(79,70,229,0.04));\n transform: translateY(-2px);\n box-shadow: var(--shadow-lg);\n}\n.upload-zone.dragover {\n border-color: var(--coral);\n background: rgba(240,100,73,0.08);\n box-shadow: 0 0 60px rgba(240,100,73,0.12);\n}\n\n/* Upload icon */\n.upload-icon-wrap {\n width: 88px;\n height: 88px;\n border-radius: 24px;\n background: linear-gradient(135deg, var(--coral), var(--coral-light));\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 1.5rem;\n box-shadow: var(--shadow-coral);\n animation: iconBounce 3s ease-in-out infinite;\n position: relative;\n}\n.upload-icon-wrap::after {\n content: '';\n position: absolute;\n inset: -6px;\n border-radius: 28px;\n border: 2px solid rgba(240,100,73,0.15);\n animation: iconBounce 3s ease-in-out infinite 0.3s;\n}\n@keyframes iconBounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n}\n\n/* Card */\n.card {\n background: var(--bg-card);\n border: 1px solid var(--border-light);\n border-radius: 18px;\n box-shadow: var(--shadow-sm);\n transition: all 0.3s ease;\n}\n.card:hover {\n box-shadow: var(--shadow-md);\n border-color: var(--border-medium);\n}\n\n/* Progress */\n.progress-track {\n height: 6px;\n background: var(--bg-elevated);\n border-radius: 3px;\n overflow: hidden;\n}\n.progress-fill {\n height: 100%;\n border-radius: 3px;\n transition: width 0.4s ease;\n}\n.progress-coral { background: linear-gradient(90deg, var(--coral), var(--coral-light)); box-shadow: 0 0 10px rgba(240,100,73,0.3); }\n.progress-green { background: linear-gradient(90deg, #10b981, #34d399); }\n\n/* File item */\n.file-item {\n background: var(--bg-card);\n border: 1px solid var(--border-light);\n border-radius: 16px;\n padding: 1.125rem 1.375rem;\n transition: all 0.3s ease;\n}\n.file-item:hover {\n box-shadow: var(--shadow-md);\n transform: translateY(-1px);\n}\n\n/* Badge */\n.badge {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.25rem 0.75rem;\n border-radius: 100px;\n font-size: 0.6875rem;\n font-weight: 600;\n letter-spacing: 0.02em;\n font-family: 'Sora', sans-serif;\n}\n\n/* Video panel */\n.video-panel {\n position: relative;\n background: var(--bg-card);\n border: 1px solid var(--border-light);\n border-radius: 20px;\n overflow: hidden;\n box-shadow: var(--shadow-sm);\n transition: all 0.4s ease;\n}\n.video-panel:hover {\n box-shadow: var(--shadow-lg);\n}\n.video-panel .panel-content {\n background: linear-gradient(135deg, #e8e6e1 0%, #d4d2cc 100%);\n aspect-ratio: 16/10;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n overflow: hidden;\n}\n.video-panel .panel-content::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.4));\n}\n\n/* Video controls */\n.video-controls {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 1rem 1.25rem;\n z-index: 10;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n}\n.ctrl-btn {\n width: 34px;\n height: 34px;\n border-radius: 10px;\n border: none;\n background: rgba(255,255,255,0.9);\n backdrop-filter: blur(10px);\n color: var(--text-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.25s ease;\n font-size: 0.75rem;\n box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n}\n.ctrl-btn:hover {\n background: var(--coral);\n color: white;\n transform: scale(1.08);\n box-shadow: var(--shadow-coral);\n}\n.ctrl-btn.play-main {\n width: 42px;\n height: 42px;\n background: var(--coral);\n color: white;\n font-size: 0.875rem;\n box-shadow: var(--shadow-coral);\n}\n.ctrl-btn.play-main:hover {\n background: #e0553d;\n transform: scale(1.12);\n}\n\n/* Timeline */\n.timeline-track {\n flex: 1;\n height: 4px;\n background: rgba(255,255,255,0.3);\n border-radius: 2px;\n position: relative;\n cursor: pointer;\n}\n.timeline-progress {\n height: 100%;\n background: var(--coral);\n border-radius: 2px;\n position: relative;\n}\n.timeline-progress::after {\n content: '';\n position: absolute;\n right: -5px;\n top: 50%;\n transform: translateY(-50%);\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: white;\n box-shadow: 0 0 0 3px var(--coral), 0 2px 8px rgba(240,100,73,0.3);\n}\n\n/* Layout btn */\n.layout-btn {\n padding: 0.5rem 0.875rem;\n border-radius: 10px;\n border: 1px solid var(--border-light);\n background: var(--bg-card);\n color: var(--text-secondary);\n cursor: pointer;\n transition: all 0.25s ease;\n font-size: 0.75rem;\n font-family: 'Sora', sans-serif;\n font-weight: 500;\n}\n.layout-btn:hover { border-color: var(--border-medium); color: var(--text-primary); box-shadow: var(--shadow-sm); }\n.layout-btn.active {\n background: var(--coral-soft);\n border-color: rgba(240,100,73,0.3);\n color: var(--coral);\n}\n\n/* Panorama viewer */\n.pano-viewer {\n position: relative;\n width: 100%;\n aspect-ratio: 16/9;\n border-radius: 24px;\n overflow: hidden;\n background: linear-gradient(135deg, #c7d2cc, #a8b5ae, #8fa098);\n border: 1px solid var(--border-light);\n box-shadow: var(--shadow-lg);\n cursor: grab;\n}\n.pano-viewer:active { cursor: grabbing; }\n\n/* Compass */\n.compass {\n position: absolute;\n top: 1.25rem;\n right: 1.25rem;\n width: 52px;\n height: 52px;\n border-radius: 50%;\n background: rgba(255,255,255,0.9);\n backdrop-filter: blur(12px);\n border: 1px solid var(--border-light);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 20;\n box-shadow: var(--shadow-md);\n}\n.compass-needle {\n width: 2px;\n height: 22px;\n position: relative;\n transition: transform 0.3s ease;\n}\n.compass-needle::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 0; height: 0;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 11px solid var(--coral);\n}\n.compass-needle::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 0; height: 0;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 11px solid #cbd5e1;\n}\n\n/* FOV controls */\n.fov-btn {\n width: 38px;\n height: 38px;\n border-radius: 12px;\n background: rgba(255,255,255,0.9);\n backdrop-filter: blur(12px);\n border: 1px solid var(--border-light);\n color: var(--text-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.25s ease;\n font-size: 0.75rem;\n box-shadow: var(--shadow-sm);\n}\n.fov-btn:hover {\n background: var(--coral);\n color: white;\n border-color: var(--coral);\n box-shadow: var(--shadow-coral);\n}\n\n/* Angle display */\n.angle-display {\n position: absolute;\n top: 1.25rem;\n left: 1.25rem;\n background: rgba(255,255,255,0.9);\n backdrop-filter: blur(12px);\n border: 1px solid var(--border-light);\n border-radius: 14px;\n padding: 0.625rem 1rem;\n z-index: 20;\n font-family: 'Sora', sans-serif;\n box-shadow: var(--shadow-md);\n}\n\n/* Crosshair */\n.crosshair {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n width: 28px; height: 28px;\n z-index: 15;\n opacity: 0.2;\n}\n.crosshair::before, .crosshair::after {\n content: '';\n position: absolute;\n background: var(--text-primary);\n}\n.crosshair::before { width: 1px; height: 100%; left: 50%; transform: translateX(-50%); }\n.crosshair::after { width: 100%; height: 1px; top: 50%; transform: translateY(-50%); }\n\n/* Float label */\n.float-label {\n position: absolute;\n top: 1rem; left: 1rem;\n background: rgba(255,255,255,0.85);\n backdrop-filter: blur(8px);\n border: 1px solid var(--border-light);\n border-radius: 10px;\n padding: 0.375rem 0.75rem;\n font-size: 0.6875rem;\n font-family: 'Sora', sans-serif;\n font-weight: 500;\n color: var(--text-secondary);\n z-index: 10;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n\n/* Volume */\n.volume-group { position: relative; display: flex; align-items: center; }\n.volume-slider { width: 0; overflow: hidden; transition: width 0.3s ease, opacity 0.3s ease; opacity: 0; }\n.volume-group:hover .volume-slider { width: 65px; opacity: 1; }\n.vol-range {\n -webkit-appearance: none; appearance: none;\n width: 55px; height: 3px;\n background: rgba(255,255,255,0.35);\n border-radius: 2px; outline: none; margin-left: 6px;\n}\n.vol-range::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 10px; height: 10px;\n border-radius: 50%;\n background: white;\n box-shadow: 0 1px 4px rgba(0,0,0,0.2);\n cursor: pointer;\n}\n\n/* Pano simulated scene */\n.pano-scene {\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n.pano-mountain {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 55%;\n}\n.pano-sky {\n position: absolute;\n top: 0;\n width: 100%;\n height: 60%;\n background: linear-gradient(180deg, #87CEEB 0%, #B8E0F7 40%, #E8D5B7 100%);\n}\n.mountain-layer {\n position: absolute;\n bottom: 0;\n width: 100%;\n}\n\n/* Scrollbar */\n::-webkit-scrollbar { width: 6px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }\n::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }\n\n/* Decorative dots */\n.deco-dots {\n position: absolute;\n width: 60px;\n height: 60px;\n background-image: radial-gradient(circle, rgba(240,100,73,0.15) 1.5px, transparent 1.5px);\n background-size: 10px 10px;\n pointer-events: none;\n}\n\n@media (max-width: 768px) {\n .split-container { flex-direction: column !important; }\n .upload-zone { padding: 2.5rem 1.5rem; }\n .upload-icon-wrap { width: 68px; height: 68px; border-radius: 18px; }\n .nav-hide-mobile { display: none; }\n}\n</style>\n</head>\n<body>\n\n<div class=\"deco-blob blob-1\"></div>\n<div class=\"deco-blob blob-2\"></div>\n<div class=\"deco-blob blob-3\"></div>\n\n<div class=\"relative z-10 min-h-screen\">\n\n <!-- Header -->\n <header class=\"sticky top-0 z-50\" style=\"background: rgba(250,250,247,0.75); backdrop-filter: blur(24px) saturate(1.2); border-bottom: 1px solid var(--border-light);\">\n <div class=\"max-w-7xl mx-auto px-6 py-3.5 flex items-center justify-between\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-xl flex items-center justify-center\" style=\"background: linear-gradient(135deg, var(--coral), var(--coral-light));box-shadow: var(--shadow-coral);\">\n <i class=\"fa-solid fa-vr-cardboard text-white text-sm\"></i>\n </div>\n <span class=\"font-heading font-bold text-lg tracking-tight\" style=\"color: var(--text-primary);\">PanoVision</span>\n <span class=\"badge\" style=\"background: linear-gradient(135deg, var(--coral-soft), rgba(79,70,229,0.06)); color: var(--coral); border: 1px solid rgba(240,100,73,0.12);\">Pro</span>\n </div>\n\n <nav class=\"flex items-center gap-1 p-1 rounded-xl\" style=\"background: var(--bg-elevated);\">\n <button class=\"nav-tab active\" onclick=\"switchPage('upload')\">\n <i class=\"fa-solid fa-cloud-arrow-up mr-1.5 text-xs\"></i>上传\n </button>\n <button class=\"nav-tab\" onclick=\"switchPage('split')\">\n <i class=\"fa-solid fa-columns mr-1.5 text-xs\"></i>分屏\n </button>\n <button class=\"nav-tab\" onclick=\"switchPage('panorama')\">\n <i class=\"fa-solid fa-globe mr-1.5 text-xs\"></i>全景\n </button>\n </nav>\n\n <div class=\"flex items-center gap-3\">\n <button class=\"w-8 h-8 rounded-xl flex items-center justify-center text-xs border cursor-pointer transition-all hover:shadow-md\" style=\"border-color: var(--border-light); color: var(--text-secondary); background: var(--bg-card);\">\n <i class=\"fa-solid fa-bell\"></i>\n </button>\n <div class=\"w-8 h-8 rounded-full flex items-center justify-center text-xs font-heading font-semibold\" style=\"background: linear-gradient(135deg, var(--indigo), var(--indigo-light)); color: white; box-shadow: 0 4px 12px rgba(79,70,229,0.25);\">K</div>\n </div>\n </div>\n </header>\n\n <main class=\"max-w-7xl mx-auto px-6 py-8\">\n\n <!-- PAGE 1: Upload -->\n <section id=\"page-upload\" class=\"page-section active\">\n <div class=\"stagger-in\">\n\n <div class=\"mb-8 relative\">\n <div class=\"deco-dots\" style=\"top: -10px; right: 40px;\"></div>\n <div class=\"flex items-center gap-3 mb-2\">\n <h1 class=\"font-heading font-bold text-2xl tracking-tight\" style=\"color: var(--text-primary);\">视频上传</h1>\n <span class=\"badge\" style=\"background: var(--teal-soft); color: var(--teal);\"><i class=\"fa-solid fa-circle text-[5px] mr-1\"></i>就绪</span>\n </div>\n <p class=\"font-body text-sm\" style=\"color: var(--text-secondary);\">支持 360° / 180° 全景视频，兼容 MP4、WebM、MOV 格式，单文件最大 8GB</p>\n </div>\n\n <!-- Upload zone -->\n <div class=\"upload-zone mb-8\" id=\"uploadZone\">\n <div class=\"upload-icon-wrap\">\n <i class=\"fa-solid fa-cloud-arrow-up text-2xl text-white\"></i>\n </div>\n <p class=\"font-heading font-semibold text-lg mb-1.5\" style=\"color: var(--text-primary);\">拖放视频文件到此处</p>\n <p class=\"font-body text-sm mb-5\" style=\"color: var(--text-muted);\">或点击浏览本地文件</p>\n <div class=\"flex items-center justify-center gap-2.5 flex-wrap\">\n <span class=\"badge\" style=\"background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-light);\">\n <i class=\"fa-solid fa-panorama text-[9px]\" style=\"color:var(--coral);\"></i> 360° 全景\n </span>\n <span class=\"badge\" style=\"background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-light);\">\n <i class=\"fa-solid fa-vr-cardboard text-[9px]\" style=\"color:var(--indigo);\"></i> 180° VR\n </span>\n <span class=\"badge\" style=\"background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-light);\">\n <i class=\"fa-solid fa-film text-[9px]\" style=\"color:var(--teal);\"></i> MP4 / WebM / MOV\n </span>\n <span class=\"badge\" style=\"background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-light);\">\n <i class=\"fa-solid fa-shield-halved text-[9px]\" style=\"color:var(--coral);\"></i> 断点续传\n </span>\n </div>\n </div>\n\n <!-- File list -->\n <div class=\"space-y-3\">\n <div class=\"flex items-center justify-between mb-4\">\n <h3 class=\"font-heading font-semibold text-xs\" style=\"color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase;\">上传队列</h3>\n <span class=\"text-xs font-body font-semibold\" style=\"color: var(--text-muted);\">3 个文件</span>\n </div>\n\n <!-- File 1: Completed -->\n <div class=\"file-item\">\n <div class=\"flex items-center justify-between mb-3\">\n <div class=\"flex items-center gap-3\"
