:root{--bg-primary:#111827;--bg-secondary:#1f2937;--bg-tertiary:#374151;--bg-input:#4b5563;--text-primary:#fff;--text-secondary:#9ca3af;--text-muted:#6b7280;--accent-color:#3b82f6;--accent-hover:#2563eb;--accent-light:#60a5fa;--border-color:#374151;--danger-color:#ef4444;--header-height:64px;--player-height:80px;--radius-md:8px;--radius-lg:12px;--transition-base:0.2s ease-in-out}*{box-sizing:border-box;margin:0;padding:0}body{background-color:#111827;background-color:var(--bg-primary);color:#fff}::-webkit-scrollbar-track{background:#111827;background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:#374151;background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#9ca3af;background:var(--text-secondary)}.flex{display:flex}.flex-col{flex-direction:column}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.block{display:block}.flex-1{flex:1 1}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.m-0{margin:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.-ml-2{margin-left:-.5rem}.-mr-2{margin-right:-.5rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.w-full{width:100%}.w-8{width:2rem}.w-12{width:3rem}.w-20{width:5rem}.w-32{width:8rem}.w-48{width:12rem}.w-auto{width:auto}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-md{max-width:28rem}.h-screen{height:100vh}.h-full{height:100%}.h-8{height:2rem}.h-12{height:3rem}.h-16{height:4rem}.h-32{height:8rem}.h-48{height:12rem}.h-64{height:16rem}.min-h-screen{min-height:100vh}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem}.text-lg,.text-xl{line-height:1.75rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.uppercase{text-transform:uppercase}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bg-gray-900{background-color:#111827;background-color:var(--bg-primary)}.bg-gray-800{background-color:#1f2937;background-color:var(--bg-secondary)}.bg-gray-700{background-color:#374151;background-color:var(--bg-tertiary)}.bg-black{background-color:#000}.bg-blue-500{background-color:#3b82f6;background-color:var(--accent-color)}.bg-blue-600{background-color:#2563eb;background-color:var(--accent-hover)}.bg-transparent{background-color:initial}.bg-opacity-95{background-color:#000000f2}.bg-opacity-80{background-color:#000c}.bg-opacity-50{background-color:#37415180}.text-white{color:#fff;color:var(--text-primary)}.text-gray-200{color:#e5e7eb}.text-gray-400{color:#9ca3af;color:var(--text-secondary)}.text-gray-500{color:#6b7280;color:var(--text-muted)}.text-blue-400{color:#60a5fa;color:var(--accent-light)}.text-blue-500{color:#3b82f6;color:var(--accent-color)}.rounded{border-radius:8px;border-radius:var(--radius-md)}.rounded-lg{border-radius:12px;border-radius:var(--radius-lg)}.rounded-full{border-radius:9999px;border-radius:var(--radius-full)}.rounded-sm{border-radius:2px}.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}.border-gray-700{border-color:#374151;border-color:var(--border-color)}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.inset-0{bottom:0;left:0;right:0;top:0}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.cursor-pointer{cursor:pointer}.transition{transition:all .2s ease-in-out;transition:all var(--transition-base)}.transition-transform{transition:transform .2s ease-in-out;transition:transform var(--transition-base)}.transition-colors{transition:color .2s ease-in-out,background-color .2s ease-in-out;transition:color var(--transition-base),background-color var(--transition-base)}.shadow{box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f}.object-cover{object-fit:cover}.object-contain{object-fit:contain}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.hover\:bg-gray-700:hover{background-color:#374151;background-color:var(--bg-tertiary)}.hover\:bg-gray-800:hover{background-color:#1f2937;background-color:var(--bg-secondary)}.hover\:bg-blue-600:hover{background-color:#2563eb;background-color:var(--accent-hover)}.hover\:scale-105:hover{transform:scale(1.05)}.hover\:text-white:hover{color:#fff;color:var(--text-primary)}.hover\:text-blue-300:hover{color:#93c5fd}.focus\:outline-none:focus{outline:none}.focus\:ring-2:focus{box-shadow:0 0 0 2px #111827,0 0 0 4px #3b82f6;box-shadow:0 0 0 2px var(--bg-primary),0 0 0 4px var(--accent-color)}.focus\:border-blue-500:focus{border-color:#3b82f6;border-color:var(--accent-color)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}input[type=range]{-webkit-appearance:none;background:#0000;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;background:var(--text-primary);border-radius:50%;box-shadow:0 0 2px #00000080;cursor:pointer;height:12px;margin-top:-4px;width:12px}input[type=range]::-webkit-slider-runnable-track{background:#374151;background:var(--bg-tertiary);border-radius:2px;cursor:pointer;height:4px;width:100%}input[type=range]::-moz-range-thumb{background:#fff;background:var(--text-primary);border:none;border-radius:50%;cursor:pointer;height:12px;width:12px}input[type=range]::-moz-range-track{background:#374151;background:var(--bg-tertiary);border-radius:2px;cursor:pointer;height:4px;width:100%}.h-2 input[type=range]::-webkit-slider-runnable-track{height:8px}.h-2 input[type=range]::-moz-range-track{height:8px}input[type=text],select{background-color:#374151;background-color:var(--bg-tertiary);border:1px solid #0000;border-radius:8px;border-radius:var(--radius-md);color:#fff;color:var(--text-primary);padding:.5rem .75rem;transition:border-color .2s ease-in-out;transition:border-color var(--transition-base);width:100%}input[type=text]:focus,select:focus{border-color:#3b82f6;border-color:var(--accent-color);outline:none}select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1em}canvas{display:block;width:100%}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}}@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}}@media (min-width:1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width:1536px){.\32xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (max-width:768px){.max-w-6xl{max-width:100%}.p-6{padding:1rem}.text-3xl{font-size:1.5rem}.text-2xl{font-size:1.25rem}}:root{--bg-app:#09090b;--bg-surface:#18181b;--bg-surface-hover:#27272a;--bg-element:#27272a;--text-primary:#f4f4f5;--text-secondary:#a1a1aa;--text-muted:#71717a;--primary:#10b981;--primary-hover:#059669;--primary-light:#34d399;--primary-glow:#10b98166;--primary-gradient:linear-gradient(135deg,#10b981,#2dd4bf);--story-gradient:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);--blue-story-gradient:linear-gradient(45deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);--danger:#ef4444;--success:#22c55e;--warning:#f59e0b;--border-color:#ffffff0d;--border-focus:#10b981;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-2xl:32px;--radius-3xl:48px;--radius-full:9999px;--ease-in-out:cubic-bezier(0.4,0,0.2,1);--ease-bounce:cubic-bezier(0.34,1.56,0.64,1);--duration-fast:150ms;--duration-normal:300ms;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--shadow-glow:0 0 20px #10b98126;--shadow-nav:0 4px 30px #0000001a}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;scroll-behavior:smooth}body{background-color:#09090b;background-color:var(--bg-app);background-image:radial-gradient(circle at 15% 50%,#10b9810a,#0000 25%),radial-gradient(circle at 85% 30%,#2dd4bf0a,#0000 25%);color:#f4f4f5;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;min-height:100vh;overflow-x:hidden}::selection{background-color:#10b9814d;color:#fff}::-moz-selection{background-color:#10b9814d;color:#fff}*{-webkit-tap-highlight-color:transparent}:focus-visible{box-shadow:0 0 0 4px #10b9811a;outline:2px solid #10b981;outline:2px solid var(--primary);outline-offset:2px}a{color:#10b981;color:var(--primary);text-decoration:none;transition:color .15s cubic-bezier(.4,0,.2,1);transition:color var(--duration-fast) var(--ease-in-out)}a:hover{color:#34d399;color:var(--primary-light)}canvas,img,picture,svg,video{display:block;height:auto;max-width:100%}h1,h2,h3,h4,h5,h6{color:#f4f4f5;color:var(--text-primary);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:.5rem}h1{font-size:2.25rem}h2{font-size:1.875rem}h3{font-size:1.5rem}h4{font-size:1.25rem}p{color:#a1a1aa;color:var(--text-secondary);margin-bottom:1rem}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:#0000}::-webkit-scrollbar-thumb{background:#ffffff1a;background-clip:content-box;border:2px solid #0000;border-radius:20px}::-webkit-scrollbar-thumb:hover{background:#ffffff40;background-clip:content-box}*{scrollbar-color:#ffffff1a #0000;scrollbar-width:thin}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}button{background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;touch-action:manipulation}input,select,textarea{background-color:#27272a;background-color:var(--bg-element);border:1px solid #ffffff0d;border:1px solid var(--border-color);border-radius:12px;border-radius:var(--radius-md);color:#f4f4f5;color:var(--text-primary);font-family:inherit;font-size:1rem;padding:.75rem 1rem;transition:all .15s;transition:all var(--duration-fast);width:100%}input:focus,select:focus,textarea:focus{background-color:#1c1c21;border-color:#10b981;border-color:var(--border-focus);box-shadow:0 0 0 2px #10b9811a;outline:none}input::placeholder{color:#71717a;color:var(--text-muted)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse-red{0%{box-shadow:0 0 0 0 #ef4444b3}70%{box-shadow:0 0 0 4px #ef444400}to{box-shadow:0 0 0 0 #ef444400}}.animate-fade-in{animation:fadeIn .3s cubic-bezier(.4,0,.2,1) forwards;animation:fadeIn var(--duration-normal) var(--ease-in-out) forwards}.animate-slide-up{animation:slideUp .3s cubic-bezier(.4,0,.2,1) forwards;animation:slideUp var(--duration-normal) var(--ease-in-out) forwards}.animate-slide-in-right{animation:slideInRight .3s cubic-bezier(.4,0,.2,1) forwards;animation:slideInRight var(--duration-normal) var(--ease-in-out) forwards}.animate-scale-in{animation:scaleIn .3s cubic-bezier(.34,1.56,.64,1) forwards;animation:scaleIn var(--duration-normal) var(--ease-bounce) forwards}.animate-pulse-live{animation:pulse-red 2s infinite}.container{margin-left:auto;margin-right:auto;max-width:1400px;padding-left:1.5rem;padding-right:1.5rem;width:100%}.flex-center{align-items:center;display:flex;justify-content:center}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2}.glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#09090bb3;border-bottom:1px solid #ffffff0d;border-bottom:1px solid var(--border-color)}.glass-card{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:#18181b66;border:1px solid #ffffff0d;border:1px solid var(--border-color);border-radius:16px;border-radius:var(--radius-lg)}.text-gradient{background:linear-gradient(135deg,#10b981,#2dd4bf);background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;color:#0000;font-weight:700}.story-ring{background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);background:var(--story-gradient);border-radius:50%;padding:2px;position:relative}.story-ring:before{background-color:#09090b;background-color:var(--bg-app);border-radius:50%;content:"";inset:2px;position:absolute;z-index:0}.btn-primary{background:linear-gradient(135deg,#10b981,#2dd4bf);background:var(--primary-gradient);border-radius:9999px;border-radius:var(--radius-full);box-shadow:0 0 20px #10b98126;box-shadow:var(--shadow-glow);color:#fff;font-weight:600;padding:.75rem 1.5rem;transition:transform .2s ease,box-shadow .2s ease}.btn-primary:hover{box-shadow:0 0 25px #10b98180;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.no-select{user-select:none;-webkit-user-select:none}body{overscroll-behavior-y:none}@supports (padding:max(0px)){.safe-area-bottom{padding-bottom:max(1rem,env(safe-area-inset-bottom))}.safe-area-top{padding-top:max(1rem,env(safe-area-inset-top))}}