:root{--bg-deep: #090812;--bg-surface: #0c0b1a;--bg-card: rgba(24, 24, 34, .45);--bg-glass: rgba(35, 35, 45, .4);--bg-glass-strong: rgba(22, 22, 32, .88);--primary: #ff006e;--primary-rgb: 255, 0, 110;--secondary: #8338ec;--secondary-rgb: 131, 56, 236;--accent: #3a86ff;--accent-rgb: 58, 134, 255;--nebula: #00d2ff;--glow-primary: 0 0 25px rgba(var(--primary-rgb), .35);--gradient-master: linear-gradient(135deg, var(--primary), var(--secondary));--glass-border: 1px solid rgba(255, 255, 255, .1);--glass-border-bright: 1px solid rgba(255, 255, 255, .18);--s-xs: 8px;--s-sm: 16px;--s-md: 24px;--s-lg: 32px;--s-xl: 48px;--font-main: "Inter", "Vazirmatn", -apple-system, system-ui, sans-serif;--h1: 2.5rem;--h2: 1.7rem;--h3: 1.1rem;--body: .95rem;--label: .7rem;--text-main: #ffffff;--text-muted: #9fa0b8;--text-dim: #6d6e85;--radius-sm: 12px;--radius-md: 18px;--radius-lg: 24px;--radius-xl: 32px;--radius-pill: 999px;--grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;outline:none}body{font-family:var(--font-main);background:var(--bg-deep);color:var(--text-main);min-height:100vh;overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased}#app{position:relative;display:flex;flex-direction:column;min-height:100vh;padding:0 var(--s-md) 180px}.bg-blobs{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;overflow:hidden;background:radial-gradient(circle at center,#110c22,#050508)}.bg-blobs:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,transparent 30%,rgba(0,0,0,.4));pointer-events:none}.blob{position:absolute;border-radius:50%;filter:blur(180px);opacity:.35;mix-blend-mode:screen;animation:mesh-float 40s ease-in-out infinite alternate}.blob-1{width:700px;height:700px;background:radial-gradient(circle,var(--primary),transparent);top:-20%;right:-15%;animation-duration:45s}.blob-2{width:600px;height:600px;background:radial-gradient(circle,var(--secondary),transparent);bottom:-10%;left:-20%;animation-delay:-10s}.blob-3{width:500px;height:500px;background:radial-gradient(circle,var(--accent),transparent);top:30%;left:20%;opacity:.12;animation-duration:55s}.blob-4{width:550px;height:550px;background:radial-gradient(circle,var(--nebula),transparent);bottom:20%;right:10%;opacity:.15;animation-delay:-5s;animation-duration:50s}@keyframes mesh-float{0%{transform:translate(0) scale(1) rotate(0)}50%{transform:translate(100px,150px) scale(1.2) rotate(20deg)}to{transform:translate(-50px,-80px) scale(.9) rotate(-15deg)}}#app:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:var(--grain);opacity:.05;z-index:-1;pointer-events:none}.header{padding:var(--s-lg) 0 var(--s-md);display:flex;justify-content:space-between;align-items:center;position:relative;z-index:100;background:transparent;margin-bottom:var(--s-md)}.brand{display:flex;align-items:center;gap:var(--s-sm)}.logo-orb{width:42px;height:42px;background:var(--gradient-master);border-radius:13px;box-shadow:0 10px 20px rgba(var(--primary-rgb),.25);position:relative;overflow:hidden}.logo-orb:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.3),transparent);animation:logo-shimmer 4s infinite ease-in-out}@keyframes logo-shimmer{0%{transform:translate(-100%) translateY(-100%)}40%,to{transform:translate(100%) translateY(100%)}}.brand h1{font-size:1.6rem;font-weight:950;letter-spacing:-.06em;text-transform:uppercase;text-shadow:0 0 32px rgba(var(--primary-rgb),.2)}.brand h1 span{background:var(--gradient-master);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.bottom-nav{position:fixed;bottom:32px;left:50%;transform:translate(-50%);width:90%;max-width:400px;height:68px;background:var(--bg-glass-strong);-webkit-backdrop-filter:blur(32px) saturate(200%);backdrop-filter:blur(32px) saturate(200%);border:var(--glass-border);border-radius:var(--radius-pill);display:flex;justify-content:space-around;align-items:center;padding:0 var(--s-xs);z-index:1000;box-shadow:0 16px 40px #0009,inset 0 1px 1px #ffffff1a}.nav-item{background:none;border:none;color:var(--text-muted);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:var(--s-xs);transition:all .4s var(--ease-out);flex:1}.nav-item span{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.7}.nav-item.active{color:#fff}.nav-item.active svg{color:var(--primary);transform:translateY(-3px) scale(1.1);filter:drop-shadow(0 0 15px var(--glow-primary))}.nav-item.active span{opacity:1;font-weight:950;color:var(--primary)}.bento-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-md);margin-top:var(--s-md)}.bento-card{background:var(--bg-glass);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);border:var(--glass-border);border-radius:var(--radius-lg);padding:var(--s-md);position:relative;overflow:hidden;transition:all .5s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:0 12px 32px #00000080,inset 0 1px 1px #ffffff1a,inset 0 -1px 20px #00000026;transform-style:preserve-3d}.bento-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.06),transparent);pointer-events:none}.bento-card:active{transform:scale(.96) translateY(2px);box-shadow:0 4px 12px #0009;background:#ffffff08}.card-hero{grid-column:span 2;min-height:190px;padding:var(--s-lg) var(--s-md);background:linear-gradient(135deg,rgba(var(--primary-rgb),.2),rgba(var(--secondary-rgb),.1));border:1px solid rgba(var(--primary-rgb),.35)}.card-hero h2{font-size:var(--h1);font-weight:950;letter-spacing:-.06em;text-shadow:0 12px 32px rgba(0,0,0,.7);line-height:.92;margin-top:4px}.card-featured{background:linear-gradient(135deg,rgba(var(--secondary-rgb),.18),rgba(var(--primary-rgb),.05));border:1px solid rgba(var(--secondary-rgb),.3)}.orb-container{width:52px;height:52px;background:var(--bg-glass-strong);border:var(--glass-border-bright);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-sm);position:relative;box-shadow:0 8px 16px #0006}.orb-container:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%;background:conic-gradient(from 0deg,var(--primary),var(--secondary),var(--primary));opacity:.2;filter:blur(10px)}.card-title{font-size:var(--h3);font-weight:950;margin-bottom:3px;letter-spacing:-.04em;text-shadow:0 4px 12px rgba(0,0,0,.5);line-height:1.1;color:#fff}.card-desc{font-size:var(--label);color:var(--text-muted);font-weight:600;line-height:1.25;letter-spacing:.01em}.reveal-stagger>*{opacity:0;transform:translateY(32px);animation:revealUp 1.2s cubic-bezier(.16,1,.3,1) forwards}.reveal-stagger>*:nth-child(1){animation-delay:.1s}.reveal-stagger>*:nth-child(2){animation-delay:.2s}.reveal-stagger>*:nth-child(3){animation-delay:.3s}.reveal-stagger>*:nth-child(4){animation-delay:.4s}@keyframes revealUp{to{opacity:1;transform:translateY(0)}}.duration-slot{background:#ffffff08;border:1.5px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 5px;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;display:flex;flex-direction:column;gap:4px}.duration-slot.active{background:rgba(var(--primary-rgb),.1);border-color:var(--primary);box-shadow:0 0 15px rgba(var(--primary-rgb),.3);transform:translateY(-2px)}.duration-slot:active{transform:scale(.95)}.icon-btn{background:var(--bg-glass);border:var(--glass-border);color:#fff;padding:12px;border-radius:14px;cursor:pointer;transition:.3s cubic-bezier(.16,1,.3,1)}.icon-btn:active{transform:scale(.9);background:#ffffff1a}.glass-pill{background:rgba(var(--primary-rgb),.15);border:1px solid rgba(var(--primary-rgb),.3);padding:6px 14px;border-radius:var(--radius-pill);font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--s-sm)}.btn-luxury{width:100%;padding:16px 22px;border-radius:var(--radius-xl);border:none;background:var(--gradient-master);color:#fff;font-weight:950;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 10px 20px -5px rgba(var(--primary-rgb),.4);cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}.btn-luxury:hover{transform:translateY(-2px);box-shadow:0 15px 25px -5px rgba(var(--primary-rgb),.5);filter:brightness(1.1)}.btn-luxury:active{transform:scale(.98)}.btn-luxury:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shimmer 4s infinite ease-in-out}@keyframes shimmer{0%{left:-100%}30%{left:100%}to{left:100%}}.control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-sm);margin:var(--s-md) 0}.control-item{background:var(--bg-glass);border:var(--glass-border);padding:22px 10px;border-radius:var(--radius-lg);text-align:center;transition:.4s cubic-bezier(.16,1,.3,1)}.control-item.active{background:linear-gradient(135deg,rgba(var(--primary-rgb),.2),rgba(var(--secondary-rgb),.15));border:1px solid var(--primary);box-shadow:0 12px 24px rgba(var(--primary-rgb),.2),inset 0 1px 1px #fff3;transform:translateY(-4px)}.control-item h5{font-size:1.2rem;font-weight:950;letter-spacing:-.04em;color:#fff;margin-bottom:2px}.control-item span{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;font-weight:800;letter-spacing:.05em}.hidden{display:none!important}.main-player{width:100%;aspect-ratio:16 / 9;min-height:240px;background:#000;border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.05);box-shadow:0 20px 40px #00000080,inset 0 0 20px rgba(var(--primary-rgb),.1);object-fit:contain;overflow:hidden;display:block}.meta-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-sm);padding:0 4px}.time-input-group{display:flex;gap:8px;align-items:center}.time-box{background:#151426;border:1px solid #2d2c3d;color:#fff;padding:12px;border-radius:10px;font-family:inherit;font-weight:700;text-align:center;width:100%}.btn-small-set{background:#fff;color:#000;border:none;padding:8px 16px;border-radius:8px;font-weight:950;font-size:.8rem;text-transform:uppercase;cursor:pointer;transition:.2s}.btn-small-set:active{transform:scale(.92);background:#ccc}.summary-bar{background:rgba(var(--secondary-rgb),.1);border:1px solid rgba(var(--secondary-rgb),.2);padding:14px;border-radius:12px;text-align:center;color:var(--text-muted);font-size:.85rem;font-weight:800;margin:var(--s-md) 0;letter-spacing:.02em}