:root{--color-primary:#d98c29;--color-primary-light:#e8a84a;--color-primary-dark:#b8731a;--color-primary-alpha:#d98c2924;--color-bg:#fcfbf7;--color-bg-secondary:#f5f2eb;--color-surface:#fff;--color-surface-raised:#fff;--color-text-primary:#1a1a1a;--color-text-secondary:#666;--color-text-muted:#9b9b9b;--color-text-inverse:#fff;--color-border:#e8e4dc;--color-border-light:#f0ede6;--color-player-bg:#0f0f1e;--color-player-surface:#1a1a2e;--color-success:#22c55e;--color-success-bg:#22c55e1a;--color-error:#ef4444;--color-error-bg:#ef44441a;--color-warning:#f59e0b;--color-info:#3b82f6;--color-audio-badge:#ea6c00;--color-video-badge:#2563eb;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--font-heading:"Playfair Display", Georgia, serif;--font-body:"Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;--font-gurmukhi:"Noto Sans Gurmukhi", sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--font-size-6xl:3.75rem;--line-height-tight:1.2;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-2xl:32px;--radius-full:9999px;--shadow-sm:0 1px 3px #0000000d, 0 1px 2px #00000014;--shadow-md:0 4px 12px #00000014, 0 2px 6px #0000001f;--shadow-lg:0 8px 24px #0000001a, 0 4px 12px #00000024;--shadow-xl:0 16px 40px #00000024, 0 8px 20px #0000002e;--shadow-player:0 -4px 24px #0003, 0 -2px 12px #00000026;--shadow-card-hover:0 12px 32px #d98c2938, 0 6px 16px #d98c291f;--shadow-btn-hover:0 6px 20px #d98c2959, 0 3px 8px #d98c2933;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease;--z-base:1;--z-dropdown:100;--z-sticky:200;--z-navbar:500;--z-modal:800;--z-player:1000;--z-toast:1100;--max-width:1350px;--navbar-height:72px;--player-height:88px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-body);background-color:var(--color-bg);color:var(--color-text-primary);line-height:var(--line-height-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.3px;min-height:100vh}img,video{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,textarea,select{font-family:inherit;font-size:inherit}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);line-height:var(--line-height-tight);color:var(--color-text-primary)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base)}p{line-height:var(--line-height-relaxed);color:var(--color-text-secondary)}.text-gurmukhi{font-family:var(--font-gurmukhi);line-height:1.8}.container{max-width:var(--max-width);margin:0 auto}.container-sm{max-width:768px;padding:0 var(--space-6);margin:0 auto}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.w-full{width:100%}.h-full{height:100%}.relative{position:relative}.absolute{position:absolute}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.scroll-x{scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;-webkit-overflow-scrolling:touch;overflow-x:auto}.scroll-x::-webkit-scrollbar{height:4px}.scroll-x::-webkit-scrollbar-track{background:0 0}.scroll-x::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}.section-header{margin-bottom:var(--space-6);justify-content:space-between;align-items:center;display:flex}.section-title{font-family:var(--font-heading);font-size:var(--font-size-2xl);color:var(--color-text-primary);font-weight:700}.section-link{font-size:var(--font-size-sm);color:var(--color-primary);align-items:center;gap:var(--space-1);transition:opacity var(--transition-fast);font-weight:500;display:flex}.section-link:hover{opacity:.8}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;border:2px solid #0000;text-decoration:none;display:inline-flex}.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn-primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px #c8972a66}.btn-outline{color:var(--color-primary);border-color:var(--color-primary);background:0 0}.btn-outline:hover{background:var(--color-primary-alpha);transform:translateY(-1px)}.btn-ghost{color:var(--color-text-secondary);background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--color-bg-secondary);color:var(--color-text-primary)}.btn-dark{background:var(--color-player-surface);color:#fff;border-color:#0000}.btn-dark:hover{background:#ffffff1a;transform:translateY(-1px)}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--font-size-xs)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--font-size-base)}.btn-icon{padding:var(--space-2);border-radius:var(--radius-full);width:40px;height:40px}.badge{align-items:center;gap:var(--space-1);border-radius:var(--radius-full);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.5px;padding:3px 10px;font-weight:600;display:inline-flex}.badge-audio{color:var(--color-audio-badge);background:#ea6c0026}.badge-video{color:var(--color-video-badge);background:#2563eb26}.badge-primary{background:var(--color-primary-alpha);color:var(--color-primary-dark)}.badge-success{background:var(--color-success-bg);color:var(--color-success)}.card{background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);transition:transform var(--transition-base), box-shadow var(--transition-base);overflow:hidden}.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}.card-dark{background:var(--color-player-surface);color:#fff;border-color:#ffffff14}.input{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;font-size:1rem}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-alpha)}.input::placeholder{color:var(--color-text-muted)}.input-dark{color:#fff;background:#ffffff14;border-color:#ffffff1f}.input-dark::placeholder{color:#fff6}.input-dark:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #c8972a33}.form-group{gap:var(--space-2);flex-direction:column;display:flex}.form-label{color:var(--color-text-primary);font-size:12px;font-weight:500}.form-error{font-size:var(--font-size-xs);color:var(--color-error)}.progress-bar{background:var(--color-border);border-radius:var(--radius-full);width:100%;height:4px;overflow:hidden}.progress-fill{background:var(--color-primary);border-radius:var(--radius-full);height:100%;transition:width var(--transition-base)}.progress-bar-player{border-radius:var(--radius-full);cursor:pointer;background:#fff3;height:4px;position:relative}.progress-bar-player:hover{height:6px}.progress-fill-player{background:var(--color-primary);border-radius:var(--radius-full);height:100%;position:relative}.progress-fill-player:after{content:"";background:var(--color-primary);opacity:0;width:12px;height:12px;transition:opacity var(--transition-fast);border-radius:50%;position:absolute;top:50%;right:-6px;transform:translateY(-50%)}.progress-bar-player:hover .progress-fill-player:after{opacity:1}.thumbnail-wrap{background:var(--color-bg-secondary);position:relative;overflow:hidden}.thumbnail-wrap img{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-slow)}.card:hover .thumbnail-wrap img{transform:scale(1.05)}.thumbnail-overlay{background:linear-gradient(#0000 40%,#0009 100%);position:absolute;inset:0}.duration-badge{bottom:var(--space-2);right:var(--space-2);color:#fff;border-radius:var(--radius-sm);background:#000000bf;padding:2px 8px;font-size:11px;font-weight:600;position:absolute}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes waveformPulse{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}@keyframes waveformBar1{0%,to{height:6px}50%{height:22px}}@keyframes waveformBar2{0%,to{height:10px}50%{height:30px}}@keyframes waveformBar3{0%,to{height:14px}50%{height:26px}}@keyframes waveformBar4{0%,to{height:8px}50%{height:20px}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes gradientShift{0%,to{background-position:0%}50%{background-position:100%}}.animate-fadeIn{animation:fadeIn var(--transition-base) ease forwards}.animate-slideUp{animation:.4s forwards slideUp}.animate-scaleIn{animation:.3s forwards scaleIn}.animate-spin{animation:1s linear infinite spin}.waveform-anim{align-items:flex-end;gap:3px;height:32px;display:flex}.waveform-bar{background:var(--color-primary);border-radius:2px;width:3px}.waveform-bar:first-child{animation:.8s ease-in-out infinite waveformBar1}.waveform-bar:nth-child(2){animation:.8s ease-in-out .1s infinite waveformBar2}.waveform-bar:nth-child(3){animation:.8s ease-in-out .2s infinite waveformBar3}.waveform-bar:nth-child(4){animation:.8s ease-in-out .15s infinite waveformBar4}.waveform-bar:nth-child(5){animation:.8s ease-in-out .3s infinite waveformBar2}.waveform-bar:nth-child(6){animation:.8s ease-in-out .25s infinite waveformBar1}.waveform-bar:nth-child(7){animation:.8s ease-in-out .35s infinite waveformBar3}.skeleton{background:linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);border-radius:var(--radius-md);background-size:200% 100%;animation:1.5s infinite shimmer}.modal-overlay{z-index:var(--z-modal);padding:var(--space-4);background:#0009;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-8);width:100%;max-width:560px;max-height:90vh;box-shadow:var(--shadow-xl);animation:.25s scaleIn;overflow-y:auto}.tabs{border-bottom:2px solid var(--color-border);gap:var(--space-6);margin-bottom:var(--space-6);display:flex}.tab-btn{padding:var(--space-3) 0;font-size:var(--font-size-sm);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);font-weight:500;font-family:var(--font-body);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px}.tab-btn:hover{color:var(--color-text-primary)}.tab-btn.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.breadcrumb{align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-6);display:flex}.breadcrumb a:hover{color:var(--color-primary)}.breadcrumb-sep{color:var(--color-border)}.divider{background:var(--color-border);height:1px;margin:var(--space-6) 0}.page-section{padding:var(--space-12) 0}.page-section-sm{padding:var(--space-8) 0}.admin-stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}.admin-stat-value{font-family:var(--font-heading);font-size:var(--font-size-4xl);color:var(--color-primary);font-weight:700}.admin-stat-label{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--space-1)}.hero-gradient{background:linear-gradient(135deg,#0f0c08eb 0%,#1e1405d9 50%,#0f0c08eb 100%)}@media (max-width:1024px){:root{--navbar-height:64px}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}}@media (max-width:768px){.container{padding:0 var(--space-4)}.grid-cols-4,.grid-cols-3{grid-template-columns:repeat(2,1fr)}h1{font-size:var(--font-size-2xl)}}@media (max-width:480px){.grid-cols-2,.grid-cols-3{grid-template-columns:1fr}}.main-with-player{padding-bottom:calc(var(--player-height) + var(--space-4))}@media (max-width:768px){.main-with-player{padding-bottom:calc(var(--player-height) + var(--mobile-nav-height,64px) + var(--space-4))}}.page-fade-in{animation:.3s forwards fadeIn}.stagger-children>*{animation:.4s forwards slideUp;animation-delay:calc(var(--stagger-index,0) * 70ms);opacity:0}.tab-panel{opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;position:absolute;top:0;left:0;right:0;transform:translateY(8px)}.tab-panel--active{opacity:1;pointer-events:auto;position:relative;transform:translateY(0)}@keyframes playBtnPulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.ap-play-btn--pulse{animation:.2s playBtnPulse}.progress-bar{transition:height .15s}.progress-bar:hover{height:6px}:root{--mobile-nav-height:64px}.animate-section-title{animation:.35s forwards slideUp}.animate-card-stagger{opacity:0;animation:.4s forwards slideUp}.card-enter{animation:.25s forwards scaleIn}.skeleton-row{gap:var(--space-4);display:flex;overflow:hidden}
