@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

 
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}

 
:root{
  --bg:#f6f6fb;
  --fg:#1c1c2e;
  --card:#ffffff;
  --card-fg:#1c1c2e;
  --primary:#7c3aed;
  --primary-fg:#fafafa;
  --secondary:#f1f1f6;
  --secondary-fg:#2d2d42;
  --muted:#eeeef4;
  --muted-fg:#666680;
  --accent:#a855f7;
  --accent-fg:#fafafa;
  --destructive:#ef4444;
  --destructive-fg:#fafafa;
  --border:#e5e5ef;
  --input-bg:#e9e9f1;
  --sidebar:#fdfdfe;
  --sidebar-fg:#1c1c2e;
  --sidebar-accent:#f1f1f6;
  --sidebar-border:#e3e3ed;
  --success:#22c55e;
  --r-sm:4px;
  --r:6px;
  --r-md:8px;
  --r-lg:10px;
  --r-xl:12px;
  --r-2xl:16px;
  --r-full:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25);
  --grad-primary:linear-gradient(135deg,#7c3aed,#3b82f6);
}

 
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  font-size:16px;
  min-height:100vh;
}

 
h1,h2,h3,h4{font-weight:700;line-height:1.2;color:var(--fg)}
h1{font-size:clamp(1.75rem,4vw,3.75rem)}
h2{font-size:clamp(1.5rem,3vw,2.25rem)}
h3{font-size:1.125rem}
p{color:var(--fg)}
.text-muted{color:var(--muted-fg)}
.text-primary{color:var(--primary)}
.text-sm{font-size:.875rem}
.text-xs{font-size:.75rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.font-medium{font-weight:500}

 
.container{max-width:1280px;margin:0 auto;padding:0 1rem}
@media(min-width:1024px){.container{padding:0 2rem}}
.flex{display:flex}.flex-col{flex-direction:column}
.flex-1{flex:1}.shrink-0{flex-shrink:0}
.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-12{gap:3rem}
.grid{display:grid}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.min-w-0{min-width:0}
.w-full{width:100%}
.h-full{height:100%}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{inset:0}
.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}
.top-0{top:0}.left-0{left:0}
.ml-auto{margin-left:auto}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
.mt-14{margin-top:3.5rem}
.text-center{text-align:center}
.truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hidden{display:none!important}
.block{display:block}

 
@media(min-width:640px){.sm\:flex{display:flex!important}.sm\:hidden{display:none!important}.sm\:grid-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.md\:text-3xl{font-size:1.875rem}.md\:text-4xl{font-size:2.25rem}.md\:text-5xl{font-size:3rem}.md\:grid-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.lg\:flex{display:flex!important}.lg\:hidden{display:none!important}.lg\:grid-3{grid-template-columns:repeat(3,1fr)}.lg\:grid-4{grid-template-columns:repeat(4,1fr)}.lg\:pl-240{padding-left:240px}.lg\:pl-68{padding-left:68px}}

 
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}

 
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:var(--r-full);padding:.5rem 1.25rem;
  font-size:.875rem;font-weight:600;cursor:pointer;
  border:none;outline:none;transition:all .15s;
  white-space:nowrap;
}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-primary{background:#8a5ffc;color:#fff}
.btn-primary:hover{opacity:.9}
.btn-white{background:#fff;color:var(--primary)}
.btn-white:hover{background:rgba(255,255,255,.9)}
.btn-outline-white{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3)}
.btn-outline-white:hover{background:rgba(255,255,255,.1)}
.btn-outline{background:transparent;color:var(--fg);border:1.5px solid var(--border)}
.btn-outline:hover{background:var(--muted)}
.btn-secondary{background:var(--secondary);color:var(--fg)}
.btn-secondary:hover{background:var(--muted)}
.btn-ghost{background:transparent;color:var(--muted-fg)}
.btn-ghost:hover{color:var(--fg)}
.btn-sm{padding:.35rem .9rem;font-size:.75rem}
.btn-lg{padding:.75rem 2rem;font-size:1rem}
.btn-icon{padding:.4rem;border-radius:var(--r-lg);background:transparent;border:none;cursor:pointer;color:var(--muted-fg);transition:all .15s}
.btn-icon:hover{background:var(--muted);color:var(--fg)}
.btn-icon svg{width:16px;height:16px}
.btn-reload{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

 
.input{
  width:100%;padding:.5rem .75rem;
  border-radius:var(--r-lg);border:1.5px solid var(--border);
  background:var(--secondary);color:var(--fg);
  font-size:.875rem;outline:none;transition:border .15s;
}
.input::placeholder{color:var(--muted-fg)}
.input:focus{border-color:var(--primary)}
.input:disabled{opacity:.5;cursor:not-allowed}
.input-icon-wrap{position:relative;display:flex;align-items:center}
.input-icon-wrap .icon-left{position:absolute;left:.75rem;color:var(--muted-fg);width:16px;height:16px;pointer-events:none}
.input-icon-wrap .input{padding-left:2.25rem}

 
.custom-select{position:relative;display:inline-block}
.custom-select select{
  appearance:none;padding:.5rem 2rem .5rem .75rem;
  border-radius:var(--r-lg);border:1.5px solid var(--border);
  background:var(--card);color:var(--fg);font-size:.875rem;
  cursor:pointer;outline:none;
}
.custom-select::after{
  content:"";position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-top-color:var(--muted-fg);
  pointer-events:none;
}

 
.check-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:var(--muted-fg)}
.check-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;border-radius:4px}

 
.switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch-slider{position:absolute;inset:0;background:var(--border);border-radius:999px;cursor:pointer;transition:.2s}
.switch-slider::before{
  content:"";position:absolute;width:16px;height:16px;
  left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s
}
.switch input:checked+.switch-slider{background:var(--primary)}
.switch input:checked+.switch-slider::before{transform:translateX(18px)}

 
.card{
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r-2xl);box-shadow:var(--shadow-sm);
  overflow:hidden;transition:box-shadow .2s,border-color .2s;
}
.card:hover{box-shadow:var(--shadow-md);border-color:rgba(124,58,237,.2)}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1.5px solid var(--border);
  background:rgba(0,0,0,.02);
  padding:.625rem 1rem;
}
.card-body{padding:1rem}

 
.badge{
  display:inline-flex;align-items:center;gap:.25rem;
  border-radius:var(--r-full);padding:.15rem .6rem;
  font-size:.7rem;font-weight:700;line-height:1;
}
.badge-live{background:var(--destructive);color:#fff}
.badge-upcoming{background:var(--muted);color:var(--fg)}
.badge-host{background:transparent;border:1.5px solid rgba(124,58,237,.3);color:var(--primary)}
.badge-following{background:rgba(124,58,237,.15);color:var(--primary)}
.badge-video{background:rgba(124,58,237,.1);color:var(--primary)}
.badge-audio{background:var(--muted);color:var(--muted-fg)}
.badge-replay{background:#16a34a;color:#fff;font-size:.6rem}
.badge-beta{background:rgba(124,58,237,.15);color:var(--primary)}
.badge-popular{background:#facc15;color:#713f12;font-size:.625rem;font-weight:800}

 
.avatar{
  border-radius:50%;overflow:hidden;flex-shrink:0;
  background:var(--muted);display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.75rem;color:var(--muted-fg);
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-sm{width:24px;height:24px;font-size:.6rem}
.avatar-md{width:32px;height:32px;font-size:.75rem}
.avatar-lg{width:44px;height:44px;font-size:.875rem}
.avatar-xl{width:56px;height:56px}
.avatar-stacked .avatar{border:2px solid var(--card);margin-left:-6px}
.avatar-stacked .avatar:first-child{margin-left:0}

 
.sep{height:1px;background:var(--border);margin:1rem 0}

 
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--card);border-radius:var(--r-2xl);
  box-shadow:var(--shadow-2xl);
  width:100%;max-width:640px;max-height:90vh;overflow-y:auto;
  padding:1.5rem;
}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.modal-title{font-size:1rem;font-weight:700;color:var(--fg)}
.modal-close{background:none;border:none;cursor:pointer;color:var(--muted-fg);padding:.25rem;border-radius:var(--r)}
.modal-close:hover{background:var(--muted);color:var(--fg)}
.modal-close svg{width:18px;height:18px}

 
.navbar{
  position:sticky;top:0;z-index:50;
  border-bottom:1.5px solid rgba(229,229,239,.6);
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
}
.navbar-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 1rem;
}
@media(min-width:1024px){.navbar-inner{padding:0 2rem}}
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.logo-icon{
  width:32px;height:32px;border-radius:8px;
  background:#8a5ffc !important;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.logo-icon svg{color:#fff}
.logo-text{font-size:1.125rem;font-weight:700;color:var(--fg)}
.logo-text span{color:#8a5ffc !important;background:none !important;-webkit-background-clip:unset !important;background-clip:unset !important}
.nav-links{display:none;align-items:center;gap:.25rem}
@media(min-width:768px){.nav-links{display:flex}}
.nav-link{
  display:flex;align-items:center;gap:.4rem;
  border-radius:var(--r-full);padding:.5rem 1rem;
  font-size:.875rem;font-weight:500;color:var(--muted-fg);
  transition:all .15s;white-space:nowrap;
}
.nav-link:hover{color:var(--fg)}
.nav-link.active{background:rgba(124,58,237,.1);color:var(--primary)}
.live-dot{display:inline-flex;position:relative;width:8px;height:8px}
.live-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:#ef4444;opacity:.75;animation:ping 1s cubic-bezier(0,0,.2,1) infinite}
.live-dot::after{content:"";position:absolute;inset:1px;border-radius:50%;background:#ef4444}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}
.nav-actions{display:none;align-items:center;gap:.75rem}
@media(min-width:768px){.nav-actions{display:flex}}
.nav-mobile-toggle{display:flex;align-items:center;padding:.5rem;border:none;background:none;cursor:pointer;color:var(--muted-fg)}
@media(min-width:768px){.nav-mobile-toggle{display:none}}
.nav-mobile-toggle svg{width:20px;height:20px}
.mobile-menu{
  display:none;border-top:1.5px solid var(--border);
  background:var(--card);padding:.75rem 1rem 1rem;
}
.mobile-menu.open{display:block}
.mobile-nav-links{display:flex;flex-direction:column;gap:.25rem}
.mobile-nav-link{
  display:flex;align-items:center;gap:.5rem;
  padding:.625rem .75rem;border-radius:var(--r-lg);
  font-size:.875rem;font-weight:500;color:var(--muted-fg);transition:all .15s;
}
.mobile-nav-link:hover{color:var(--fg)}
.mobile-nav-link.active{background:rgba(124,58,237,.1);color:var(--primary)}
.mobile-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border)}

 
.hero{
  background:linear-gradient(135deg,#7c3aed,#6d28d9 50%,#3b82f6);
  padding:3rem 1rem 4rem;
}
@media(min-width:1024px){.hero{padding:4rem 2rem 6rem}}
.hero-inner{max-width:1280px;margin:0 auto}
.hero-content{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  border-radius:var(--r-full);padding:.375rem 1rem;
  font-size:.875rem;font-weight:500;color:#fff;margin-bottom:1.5rem;
}
.hero h1{color:#fff;font-size:clamp(1.75rem,5vw,3.75rem);max-width:48rem;font-weight:800;line-height:1.1}
.hero-desc{color:rgba(255,255,255,.8);max-width:40rem;margin-top:1.25rem;font-size:1rem;line-height:1.7}
@media(min-width:768px){.hero-desc{font-size:1.125rem}}
.hero-trust{color:rgba(255,255,255,.7);font-size:.875rem;font-weight:500;margin-top:.75rem}
.hero-stars{display:flex;align-items:center;gap:.25rem;margin-top:.5rem}
.hero-stars svg{width:18px;height:18px;fill:#facc15;color:#facc15}
.hero-stars span{font-size:.875rem;font-weight:500;color:rgba(255,255,255,.8);margin-left:.25rem}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:2rem}
@media(min-width:640px){.hero-cta{flex-direction:row}}

 
.featured-card{
  background:#5B3AA0;
  background-image:radial-gradient(circle at 10% 10%,rgba(255,255,255,.06) 0%,transparent 50%),
                   radial-gradient(circle at 90% 90%,rgba(255,255,255,.04) 0%,transparent 50%);
  border-radius:var(--r-2xl);padding:1.25rem;
  max-width:480px;margin:3rem auto 0;
  box-shadow:var(--shadow-2xl);
}
.featured-card-top{display:flex;align-items:flex-start;justify-content:space-between}
.featured-card-actions{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.6)}
.featured-card-actions button{background:none;border:none;cursor:pointer;color:inherit;padding:.25rem;transition:color .15s}
.featured-card-actions button:hover{color:#fff}
.featured-card-actions svg{width:16px;height:16px}
.featured-card h3{color:#fff;font-size:1.0625rem;font-weight:700;margin-top:.75rem}
.featured-card-meta{display:flex;align-items:center;justify-content:space-between;margin-top:.5rem}
.featured-card-meta span{font-size:.875rem;color:rgba(255,255,255,.7)}
.featured-card-play{
  display:flex;align-items:center;gap:.75rem;
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);
  border-radius:var(--r-xl);padding:.75rem 1rem;margin-top:1rem;
}
.featured-card-play svg{width:16px;height:16px;color:#fff;flex-shrink:0}
.featured-card-play span{font-size:.875rem;font-weight:500;color:#fff}
.featured-card-play .duration{margin-left:auto;font-size:.875rem;color:rgba(255,255,255,.7)}
.featured-card-btns{display:flex;align-items:center;gap:.5rem;margin-top:1rem}
.featured-card-btns button{
  flex:1;border-radius:var(--r-full);
  background:rgba(255,255,255,.9);border:none;
  padding:.4rem .5rem;font-size:.75rem;font-weight:700;
  color:#3a2670;cursor:pointer;transition:background .15s;
}
.featured-card-btns button:hover{background:#fff}

 
.stats-bar{
  background:linear-gradient(90deg,rgba(124,58,237,.05),rgba(109,40,217,.05),rgba(59,130,246,.05));
  padding:2rem 1rem;text-align:center;
}
.stats-bar h2{font-size:1.5rem;font-weight:800}
@media(min-width:768px){.stats-bar h2{font-size:1.875rem}}
.stats-bar p{font-size:.875rem;color:var(--muted-fg);margin-top:.25rem}

 
.download-section{padding:4rem 1rem}
@media(min-width:1024px){.download-section{padding:5rem 2rem}}
.download-form-card{
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r-2xl);padding:1.5rem;
  box-shadow:var(--shadow-sm);max-width:640px;margin:0 auto;
}
.download-input-row{display:flex;flex-direction:column;gap:.75rem}
@media(min-width:640px){.download-input-row{flex-direction:row}}
.download-options{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1rem}
.download-quick-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.download-footnotes{margin-top:1rem;display:flex;flex-direction:column;gap:.25rem}
.download-footnotes p{font-size:.75rem;color:var(--muted-fg)}

 
.status-icon{display:none}
.btn.state-loading .icon-default,.btn.state-success .icon-default,.btn.state-error .icon-default{display:none}
.btn.state-loading .icon-loading{display:flex}
.btn.state-success .icon-success{display:flex}
.spinning{animation:spin .7s linear infinite}

 
.library-section{padding:4rem 1rem}
@media(min-width:1024px){.library-section{padding:5rem 2rem}}
.library-header{display:flex;align-items:center;justify-content:space-between}
.scroll-btns{display:none;align-items:center;gap:.5rem}
@media(min-width:640px){.scroll-btns{display:flex}}
.scroll-btn{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1.5px solid var(--border);background:var(--card);
  color:var(--muted-fg);cursor:pointer;transition:all .15s;
}
.scroll-btn:hover{color:var(--fg)}
.scroll-btn svg{width:14px;height:14px}
.cards-scroll{
  display:flex;gap:1rem;overflow-x:auto;
  padding-bottom:1rem;margin-top:1.5rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cards-scroll::-webkit-scrollbar{display:none}
.cards-scroll .space-card-wrap{width:300px;flex-shrink:0}
.library-load{margin-top:1.5rem;text-align:center}

 
.features-section{background:rgba(241,241,246,.5);padding:4rem 1rem}
@media(min-width:1024px){.features-section{padding:5rem 2rem}}
.features-header{max-width:40rem;margin:0 auto;text-align:center}
.features-grid{
  display:grid;gap:2rem;margin-top:3.5rem;
  grid-template-columns:1fr;
}
@media(min-width:640px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.features-grid{grid-template-columns:repeat(3,1fr)}}
.feature-card{
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r-2xl);padding:1.5rem;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:1rem;
  transition:box-shadow .2s;
}
.feature-card:hover{box-shadow:var(--shadow-md)}
.feature-icon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(59,130,246,.1));
  display:flex;align-items:center;justify-content:center;
}
.feature-icon svg{width:24px;height:24px;color:var(--primary)}
.feature-card h3{font-size:.9375rem;font-weight:600}
.feature-card p{font-size:.875rem;line-height:1.6;color:var(--muted-fg)}
.features-cta{text-align:center;margin-top:2.5rem}

 
.pricing-section{padding:4rem 1rem}
@media(min-width:1024px){.pricing-section{padding:5rem 2rem}}
.pricing-header{max-width:40rem;margin:0 auto;text-align:center}
.billing-toggle{display:flex;align-items:center;justify-content:center;margin-top:2rem}
.toggle-group{
  display:flex;align-items:center;gap:.25rem;
  border:1.5px solid var(--border);border-radius:var(--r-full);
  background:var(--card);padding:.25rem;box-shadow:var(--shadow-sm);
}
.toggle-btn{
  border-radius:var(--r-full);padding:.5rem 1.25rem;
  font-size:.875rem;font-weight:500;cursor:pointer;border:none;
  background:transparent;color:var(--muted-fg);transition:all .15s;
}
.toggle-btn.active{background:var(--grad-primary);color:#fff;box-shadow:var(--shadow-sm)}
.toggle-btn:hover:not(.active){color:var(--fg)}

.pricing-table-wrap{margin-top:2.5rem;overflow-x:auto}
.pricing-table{min-width:800px}
.pricing-header-row{display:grid;grid-template-columns:1fr repeat(5,1fr);gap:.5rem}
.pricing-plan-col{
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:1rem;text-align:center;
  position:relative;
}
.pricing-plan-col.popular{
  background:linear-gradient(to bottom,#7c3aed,#6d28d9);color:#fff;
}
.pricing-plan-col:not(.popular){
  background:var(--card);border:1.5px solid var(--border);border-bottom:none;
}
.pricing-plan-name{font-size:.875rem;font-weight:600}
.pricing-plan-name.popular-text{color:#fff}
.pricing-price{font-size:1.5rem;font-weight:800;margin-top:.5rem}
.pricing-price sub{font-size:.75rem;font-weight:400;color:rgba(255,255,255,.7)}
.pricing-price-alt sub{font-size:.75rem;font-weight:400;color:var(--muted-fg)}
.popular-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:#facc15;color:#713f12;
  border-radius:var(--r-full);padding:.125rem .75rem;
  font-size:.625rem;font-weight:800;
}
.pricing-row{
  display:grid;grid-template-columns:1fr repeat(5,1fr);gap:.5rem;
}
.pricing-row:nth-child(even){background:rgba(0,0,0,.02)}
.pricing-row-label{
  display:flex;align-items:center;padding:.75rem;
  font-size:.875rem;font-weight:500;
}
.pricing-row-cell{
  display:flex;align-items:center;justify-content:center;
  padding:.75rem;font-size:.875rem;
}
.pricing-row-cell.popular-col{background:rgba(124,58,237,.05)}
.pricing-cta-row{display:grid;grid-template-columns:1fr repeat(5,1fr);gap:.5rem;padding-top:1rem}
.check-green svg{color:#22c55e}
.cross-muted svg{color:rgba(102,102,128,.4)}
.pricing-note{text-align:center;font-size:.75rem;color:var(--muted-fg);margin-top:1.5rem}

 
.footer{
  border-top:1.5px solid var(--border);
  background:var(--card);padding:2.5rem 1rem;
}
@media(min-width:1024px){.footer{padding:3.5rem 2rem}}
.footer-inner{
  max-width:1280px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center;
}
.footer-links{display:flex;align-items:center;gap:1rem;font-size:.875rem}
.footer-links a{color:var(--muted-fg);transition:color .15s}
.footer-links a:hover{color:var(--fg)}
.footer-copy{font-size:.75rem;color:rgba(102,102,128,.6)}
.footer-divider{color:rgba(229,229,239,.4)}

 
.space-card{
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r-2xl);box-shadow:var(--shadow-sm);
  overflow:hidden;transition:all .2s;
}
.space-card:hover{box-shadow:var(--shadow-md);border-color:rgba(124,58,237,.2)}

 
.space-card-colored{
  border:none;
  display:flex;flex-direction:column;
   
  --fg:#ffffff;
  --muted-fg:rgba(255,255,255,.65);
  --muted:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.1);
  --border:rgba(255,255,255,.15);
  --primary:#ffffff;
  --destructive:#c0392b;
}
.space-card-colored:hover{border-color:rgba(255,255,255,.25)}
.space-card-colored .space-card-header{
  background:rgba(0,0,0,.18);
  border-color:rgba(255,255,255,.15);
}
 
.space-card-colored .space-card-body{
  flex:1;display:flex;flex-direction:column;
}
.space-card-colored .card-bottom{
  margin-top:auto;
}
.space-card-colored .card-actions{
  padding-top:.5rem;
}
.space-card-colored .admins-section,
.space-card-colored .speakers-section{border-color:rgba(255,255,255,.15)}
.space-card-colored .topic-pill{
  background:rgba(255,255,255,.15);color:#fff;
}
.space-card-colored .play-bar{
  background:rgba(255,255,255,.14);
}
.space-card-colored .play-bar:hover{background:rgba(255,255,255,.22)}
.space-card-colored .action-btn{
  background:rgba(255,255,255,.9);
  border-color:transparent;
  color:#2d1a6e;
}
.space-card-colored .action-btn:hover{background:#fff}
.space-card-colored .host-tag{
  background:rgba(255,255,255,.15);color:rgba(255,255,255,.85);
}
.space-card-colored .tweet-engage{
  background:rgba(0,0,0,.18);
}
.space-card-colored .speaker-more{
  background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.2);
}
.space-card-colored .speaker-avatars .avatar{border-color:rgba(255,255,255,.2)}
.space-card-colored .badge{
  border-color:rgba(255,255,255,.2);
}
.space-card-colored .space-title{color:#fff}
.space-card-colored:hover .space-title{color:rgba(255,255,255,.85)}
 
.space-card-colored .host-pro-cat{color:rgba(255,255,255,.75)!important}
 


.space-card-header{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1.5px solid var(--border);
  background:rgba(0,0,0,.015);padding:.625rem 1rem;
}
.space-card-header-left{display:flex;align-items:center;gap:.5rem}
.space-card-header-right{display:flex;align-items:center;gap:.5rem;color:var(--muted-fg)}
.space-card-body{padding:1rem}
.host-info{display:flex;align-items:flex-start;gap:.75rem}
.host-meta{min-width:0;flex:1}
.host-name-row{display:flex;align-items:center;gap:.375rem}
.host-name{font-size:.875rem;font-weight:700;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.host-check{width:14px;height:14px;flex-shrink:0;fill:var(--primary);color:#fff}
.host-tag{
  background:var(--muted);border-radius:4px;
  padding:.1rem .375rem;font-size:.6rem;font-weight:700;color:var(--muted-fg);
}
.host-sub{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--muted-fg)}
.host-location{display:flex;align-items:center;gap:.25rem;font-size:.6875rem;color:var(--muted-fg);margin-top:.2rem}
.host-location svg{width:10px;height:10px}
.space-title{
  margin-top:.75rem;font-size:.875rem;font-weight:700;line-height:1.4;
  color:var(--fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .15s;cursor:pointer;
}
.space-card:hover .space-title{color:var(--primary)}
.topics{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.5rem}
.topic-pill{
  background:rgba(124,58,237,.08);border-radius:var(--r-full);
  padding:.15rem .5rem;font-size:.625rem;font-weight:500;color:var(--primary);
}
.space-stats{display:flex;align-items:center;gap:.75rem;margin-top:.75rem;font-size:.75rem;color:var(--muted-fg)}
.space-stats .stat{display:flex;align-items:center;gap:.25rem}
.space-stats .stat svg{width:14px;height:14px}
.space-stats .stat strong{color:var(--fg);font-weight:600}
.space-stats .stat.live-stat svg{color:var(--destructive)}
.admins-section,.speakers-section{margin-top:.75rem;padding-top:.75rem;border-top:1.5px solid var(--border)}
.section-label{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg)}
.speaker-label-row{display:flex;align-items:center;justify-content:space-between}
.admin-row{display:flex;align-items:center;gap:.5rem;margin-top:.375rem}
.admin-item{display:flex;align-items:center;gap:.375rem}
.admin-item .admin-name{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;font-weight:500}
.admin-item .check-small{width:10px;height:10px;flex-shrink:0;fill:var(--primary);color:#fff}
.speaker-avatars{display:flex;margin-top:.375rem;align-items:center}
.speaker-avatars .avatar{border:2px solid var(--card);margin-left:-6px;position:relative;z-index:1}
.speaker-avatars .avatar:first-child{margin-left:0}
.speaker-more{
  width:28px;height:28px;border-radius:50%;
  border:2px solid var(--card);margin-left:-6px;
  background:var(--muted);
  display:flex;align-items:center;justify-content:center;
  font-size:.625rem;font-weight:500;color:var(--muted-fg);
}
.tweet-engage{
  display:flex;align-items:center;gap:.75rem;
  background:rgba(0,0,0,.025);border-radius:var(--r-lg);
  padding:.5rem .75rem;margin-top:.75rem;font-size:.6875rem;color:var(--muted-fg);
}
.tweet-engage .eng{display:flex;align-items:center;gap:.25rem}
.tweet-engage svg{width:12px;height:12px}
.play-bar{
  display:flex;align-items:center;gap:.75rem;
  background:rgba(124,58,237,.1);border-radius:var(--r-xl);
  padding:.625rem 1rem;margin-top:.75rem;cursor:pointer;transition:background .15s;
}
.play-bar:hover{background:rgba(124,58,237,.15)}
.play-bar svg{width:14px;height:14px;color:var(--primary);flex-shrink:0}
.play-bar span{font-size:.875rem;font-weight:500;color:var(--primary)}
.card-actions{display:flex;align-items:center;gap:.375rem;margin-top:.75rem}
.action-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.25rem;
  border:1.5px solid var(--border);background:var(--card);
  border-radius:var(--r-lg);padding:.5rem .5rem;
  font-size:.75rem;font-weight:500;cursor:pointer;color:var(--fg);transition:all .15s;
}
.action-btn svg{width:12px;height:12px}
.action-btn:hover{background:var(--muted)}

 
.spaces-monitor{max-width:1280px;margin:0 auto;padding:2rem 1rem}
@media(min-width:1024px){.spaces-monitor{padding:2rem 2rem}}
.monitor-header{display:flex;flex-direction:column;gap:.75rem}
@media(min-width:640px){.monitor-header{flex-direction:row;align-items:center;justify-content:space-between}}
.live-badge{
  display:flex;align-items:center;gap:.5rem;
  background:rgba(239,68,68,.1);border:1.5px solid rgba(239,68,68,.2);
  border-radius:var(--r-full);padding:.5rem 1rem;
}
.live-badge span{font-size:.875rem;font-weight:700;color:var(--destructive)}
.filters-row{display:flex;flex-direction:column;gap:.75rem}
@media(min-width:640px){.filters-row{flex-direction:row;align-items:center}}
.category-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.cat-pill{
  border-radius:var(--r-full);padding:.35rem .875rem;
  font-size:.8125rem;font-weight:500;cursor:pointer;
  background:var(--card);border:1.5px solid var(--border);color:var(--muted-fg);
  transition:all .15s;
}
.cat-pill:hover{color:var(--fg);border-color:var(--muted-fg)}
.cat-pill.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.sort-tabs{display:flex;align-items:center;justify-content:center;margin-top:1rem}
.sort-group{
  display:flex;align-items:center;gap:.25rem;
  border:1.5px solid var(--border);border-radius:var(--r-full);
  background:var(--card);padding:.25rem;box-shadow:var(--shadow-sm);
}
.sort-btn{
  display:flex;align-items:center;gap:.375rem;
  border-radius:var(--r-full);padding:.5rem 1.25rem;
  font-size:.875rem;font-weight:500;cursor:pointer;border:none;
  background:transparent;color:var(--muted-fg);transition:all .15s;
}
.sort-btn.active{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}
.sort-btn:hover:not(.active){color:var(--fg)}
.sort-btn svg{width:14px;height:14px}
.spaces-grid{
  display:grid;gap:1rem;margin-top:2rem;
  grid-template-columns:1fr;
}
@media(min-width:640px){.spaces-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.spaces-grid{grid-template-columns:repeat(3,1fr)}}
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4rem;border-radius:var(--r-2xl);border:1.5px solid var(--border);background:var(--card);
}
.empty-state svg{width:40px;height:40px;color:var(--muted-fg)}
.empty-state p{margin-top:1rem;font-size:.875rem;color:var(--muted-fg)}

 
.upcoming-list{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}
.upcoming-card{
  display:flex;flex-direction:column;gap:1rem;
  border:1.5px solid var(--border);border-radius:var(--r-xl);
  background:var(--card);padding:1rem;box-shadow:var(--shadow-sm);
  transition:box-shadow .2s;
}
.upcoming-card:hover{box-shadow:var(--shadow-md)}
@media(min-width:640px){.upcoming-card{flex-direction:row;align-items:center}}
.upcoming-host{display:flex;align-items:center;gap:.75rem}
@media(min-width:640px){.upcoming-host{width:220px;flex-shrink:0}}
.upcoming-info{flex:1;min-width:0}
.upcoming-info h3{font-size:.875rem;font-weight:600}
.upcoming-meta{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--muted-fg);margin-top:.25rem}
.upcoming-status{display:flex;align-items:center;flex-shrink:0}

 
.sidebar{
  position:fixed;left:0;top:0;z-index:40;
  height:100vh;display:flex;flex-direction:column;
  border-right:1.5px solid var(--sidebar-border);
  background:var(--sidebar);
  transition:width .3s;overflow:hidden;
}
.sidebar.expanded{width:240px}
.sidebar.collapsed{width:68px}
.sidebar-logo{
  display:flex;height:64px;align-items:center;
  justify-content:space-between;
  border-bottom:1.5px solid var(--sidebar-border);
  padding:0 1rem;flex-shrink:0;
}
.sidebar-logo-link{display:flex;align-items:center;gap:.625rem;overflow:hidden}
.sidebar-logo-icon{
  width:36px;height:36px;border-radius:var(--r-xl);background:var(--primary);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sidebar-logo-icon svg{color:#fff;width:18px;height:18px}
.sidebar-logo-text{font-size:1rem;font-weight:700;color:var(--sidebar-fg);white-space:nowrap}
.sidebar-logo-text span{color:var(--primary)}
.sidebar-toggle-btn{
  background:none;border:none;cursor:pointer;
  color:rgba(28,28,46,.4);padding:.25rem;
  border-radius:var(--r-md);transition:all .15s;flex-shrink:0;
}
.sidebar-toggle-btn:hover{background:var(--sidebar-accent);color:var(--sidebar-fg)}
.sidebar-toggle-btn svg{width:14px;height:14px;transition:transform .25s}
.sidebar.collapsed .sidebar-toggle-btn svg{transform:rotate(180deg)}
.sidebar-nav{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column}
.sidebar-nav-group{display:flex;flex-direction:column;gap:.25rem}
.sidebar-div{height:1px;background:var(--sidebar-border);margin:.75rem 0}
.sidebar-link{
  display:flex;align-items:center;gap:.75rem;
  border-radius:var(--r-lg);padding:.625rem .75rem;
  font-size:.875rem;font-weight:500;color:rgba(28,28,46,.7);
  transition:all .15s;white-space:nowrap;overflow:hidden;
}
.sidebar-link:hover{background:var(--sidebar-accent);color:var(--sidebar-fg)}
.sidebar-link.active{background:rgba(124,58,237,.1);color:var(--primary)}
.sidebar-link svg{width:18px;height:18px;flex-shrink:0}
.sidebar-link.active svg{color:var(--primary)}
.sidebar-link-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-link-badge{margin-left:auto;flex-shrink:0}
.sidebar-user{
  padding:.75rem;border-top:1.5px solid var(--sidebar-border);flex-shrink:0;
  display:flex;align-items:center;gap:.75rem;
}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-info p{font-size:.875rem;font-weight:600;color:var(--sidebar-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user-info span{font-size:.75rem;color:rgba(28,28,46,.5)}
.sidebar-logout{
  background:none;border:none;cursor:pointer;padding:.375rem;
  border-radius:var(--r-md);color:rgba(28,28,46,.4);transition:all .15s;
}
.sidebar-logout:hover{background:var(--sidebar-accent);color:var(--sidebar-fg)}
.sidebar-logout svg{width:16px;height:16px}

 
.sidebar.collapsed .sidebar-link-label,
.sidebar.collapsed .sidebar-link-badge,
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sidebar-logout{display:none}
.sidebar.collapsed .sidebar-logo-link{justify-content:center}
.sidebar.collapsed .sidebar-user{justify-content:center}
.sidebar.collapsed .sidebar-link{justify-content:center;padding:.625rem}

 
.sidebar.collapsed .sidebar-toggle-btn{
  position:absolute;right:-12px;top:20px;z-index:50;
  width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--sidebar-border);
  background:var(--sidebar);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;
}

 
.dashboard-wrap{min-height:100vh;background:var(--bg)}
.dashboard-main{transition:padding-left .3s}
.dashboard-main.sidebar-expanded{padding-left:240px}
.dashboard-main.sidebar-collapsed{padding-left:68px}
@media(max-width:1023px){
  .dashboard-main.sidebar-expanded,
  .dashboard-main.sidebar-collapsed{padding-left:0}
  .desktop-sidebar{display:none}
}
.mobile-topbar{
  display:flex;height:56px;align-items:center;
  border-bottom:1.5px solid var(--border);
  background:var(--card);padding:0 1rem;
}
@media(min-width:1024px){.mobile-topbar{display:none}}
.mobile-topbar button{background:none;border:none;cursor:pointer;color:var(--fg);padding:.5rem;border-radius:var(--r-lg)}
.mobile-topbar button svg{width:20px;height:20px}
.mobile-topbar .logo-text{margin-left:.75rem;font-size:.875rem;font-weight:700}

 
.sidebar-overlay{
  display:none;position:fixed;inset:0;z-index:30;
  background:rgba(28,28,46,.2);backdrop-filter:blur(4px);
}
.sidebar-overlay.open{display:block}
.mobile-sidebar{
  position:fixed;left:0;top:0;z-index:40;
  transform:translateX(-100%);transition:transform .3s;
}
.mobile-sidebar.open{transform:translateX(0)}

 
.dashboard-content{padding:1.5rem 1rem}
@media(min-width:1024px){.dashboard-content{padding:2rem}}
.dash-header{margin-bottom:1.5rem}
.dash-header h1{font-size:1.5rem;font-weight:700}
.dash-header p{font-size:.875rem;color:var(--muted-fg);margin-top:.25rem}
.stats-grid{
  display:grid;gap:1rem;
  grid-template-columns:1fr;
}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-card{
  display:flex;align-items:flex-start;gap:1rem;
  border:1.5px solid var(--border);border-radius:var(--r-xl);
  background:var(--card);padding:1.25rem;box-shadow:var(--shadow-sm);
}
.stat-icon{
  width:40px;height:40px;border-radius:var(--r-lg);flex-shrink:0;
  background:rgba(124,58,237,.1);
  display:flex;align-items:center;justify-content:center;
}
.stat-icon svg{width:20px;height:20px;color:var(--primary)}
.stat-meta{min-width:0}
.stat-label{font-size:.75rem;font-weight:500;color:var(--muted-fg)}
.stat-value{font-size:1.25rem;font-weight:800;margin-top:.125rem}
.stat-sub{display:flex;align-items:center;gap:.5rem;margin-top:.25rem;font-size:.6875rem}
.stat-sub span{color:var(--muted-fg)}
.stat-trend{
  display:flex;align-items:center;gap:.125rem;
  font-weight:500;color:#059669;
}
.stat-trend svg{width:12px;height:12px}

.dash-download-card{
  border:1.5px solid var(--border);border-radius:var(--r-xl);
  background:var(--card);box-shadow:var(--shadow-sm);
  overflow:hidden;margin-top:2rem;
}
.dash-download-header{
  display:flex;align-items:center;gap:.75rem;
  border-bottom:1.5px solid var(--border);
  background:rgba(0,0,0,.02);padding:1rem 1.5rem;
}
.dash-download-header-icon{
  width:32px;height:32px;background:rgba(124,58,237,.1);
  border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
}
.dash-download-header-icon svg{width:16px;height:16px;color:var(--primary)}
.dash-download-body{padding:1.5rem}
.dash-download-row{display:flex;flex-direction:column;gap:.75rem}
@media(min-width:640px){.dash-download-row{flex-direction:row}}
.dash-toggles{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:1.25rem}
.toggle-option{display:flex;align-items:center;gap:.75rem;cursor:pointer}
.toggle-option-text p{font-size:.875rem;font-weight:500}
.toggle-option-text span{font-size:.6875rem;color:var(--muted-fg)}
.dash-quick-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.dash-download-footer{
  border-top:1.5px solid var(--border);background:rgba(0,0,0,.01);
  padding:.75rem 1.5rem;display:flex;flex-wrap:wrap;gap:.375rem .25rem;
}
.dash-download-footer span{font-size:.6875rem;color:var(--muted-fg)}

 
.dash-card{
  border:1.5px solid var(--border);border-radius:var(--r-xl);
  background:var(--card);box-shadow:var(--shadow-sm);
  overflow:hidden;transition:all .2s;
}
.dash-card:hover{box-shadow:var(--shadow-md);border-color:rgba(124,58,237,.2)}
.dash-card-header{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1.5px solid var(--border);
  background:rgba(0,0,0,.015);padding:.5rem 1rem;
}
.dash-card-header-left{display:flex;align-items:center;gap:.5rem}
.dash-card-header-right{display:flex;align-items:center;gap:.25rem;color:rgba(102,102,128,.5)}
.dash-card-header-right button{
  background:none;border:none;cursor:pointer;color:inherit;
  padding:.25rem;border-radius:var(--r);transition:all .15s;
}
.dash-card-header-right button:hover{background:var(--muted);color:var(--fg)}
.dash-card-header-right svg{width:11px;height:11px}
.dash-card-body{padding:1rem}
.dash-host{display:flex;align-items:center;gap:.625rem}
.dash-host-meta{flex:1;min-width:0}
.dash-host-name-row{display:flex;align-items:center;gap:.25rem}
.dash-host-name{font-size:.75rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-host-followers{font-size:.6875rem;color:var(--muted-fg)}
.dash-card-title{
  margin-top:.75rem;font-size:.875rem;font-weight:700;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .15s;
}
.dash-card:hover .dash-card-title{color:var(--primary)}
.dash-card-date{font-size:.6875rem;color:var(--muted-fg);margin-top:.375rem}
.dash-card-listeners{
  display:flex;align-items:center;gap:.375rem;
  font-size:.6875rem;color:var(--muted-fg);margin-top:.5rem;
}
.dash-card-listeners .dot{width:6px;height:6px;border-radius:50%;background:var(--destructive);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.dash-play-bar{
  display:flex;align-items:center;gap:.75rem;
  background:rgba(124,58,237,.08);border-radius:var(--r-lg);
  padding:.625rem .875rem;margin-top:.75rem;cursor:pointer;transition:background .15s;
}
.dash-play-bar:hover{background:rgba(124,58,237,.12)}
.dash-play-bar svg{width:14px;height:14px;color:var(--primary);flex-shrink:0}
.dash-play-bar span{font-size:.75rem;font-weight:500;color:var(--primary)}
.dash-play-bar .dur{margin-left:auto;font-size:.75rem;color:var(--muted-fg)}
.dash-action-btns{display:flex;align-items:center;gap:.375rem;margin-top:.75rem}
.dash-action-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.25rem;
  border:1.5px solid var(--border);background:var(--card);
  border-radius:var(--r-lg);padding:.5rem .375rem;
  font-size:.6875rem;font-weight:500;cursor:pointer;color:var(--fg);transition:all .15s;
}
.dash-action-btn svg{width:11px;height:11px}
.dash-action-btn:hover{background:var(--muted)}

.dash-spaces-header{display:flex;align-items:center;justify-content:space-between;margin-top:2rem}
.dash-spaces-header h2{font-size:1.125rem;font-weight:600}
.dash-spaces-header p{font-size:.75rem;color:var(--muted-fg)}
.dash-spaces-grid{
  display:grid;gap:1rem;margin-top:1rem;
  grid-template-columns:1fr;
}
@media(min-width:640px){.dash-spaces-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.dash-spaces-grid{grid-template-columns:repeat(3,1fr)}}

 
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .25s ease}

 
.has-tooltip{position:relative}
.has-tooltip:hover .tooltip{opacity:1;visibility:visible;transform:translateY(0)}
.tooltip{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--fg);color:#fff;font-size:.7rem;font-weight:500;
  padding:.25rem .625rem;border-radius:var(--r);white-space:nowrap;
  opacity:0;visibility:hidden;transition:all .15s;pointer-events:none;z-index:99;
}
.tooltip::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:var(--fg);
}

 
.page-transition{animation:fadeIn .3s ease}

 
.section-container{max-width:1280px;margin:0 auto;padding:0 1.5rem}
.section-header{text-align:center;max-width:42rem;margin:0 auto}
.section-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(124,58,237,.1);color:var(--primary);
  border-radius:var(--r-full);padding:.3rem .875rem;
  font-size:.75rem;font-weight:700;letter-spacing:.04em;margin-bottom:1rem;text-transform:uppercase;
}
.section-title{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800}
.section-desc{color:var(--muted-fg);font-size:.9375rem;margin-top:.75rem;line-height:1.7}

 
.billing-toggle{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:2rem}
.billing-opt{font-size:.9375rem;font-weight:500;color:var(--muted-fg);display:flex;align-items:center;gap:.5rem}
.billing-opt:first-child{font-weight:600;color:var(--fg)}
.toggle-track{
  position:relative;width:44px;height:24px;
  border-radius:999px;background:var(--primary);border:none;cursor:pointer;padding:2px;
  display:flex;align-items:center;transition:background .2s;
}
.toggle-thumb{
  width:20px;height:20px;background:#fff;border-radius:50%;
  display:block;transition:transform .2s;transform:translateX(0);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.save-badge{
  background:rgba(34,197,94,.15);color:#059669;
  border-radius:var(--r-full);padding:.1rem .5rem;
  font-size:.7rem;font-weight:700;
}

 
.pricing-table-wrap{
  display:grid;gap:1rem;margin-top:2.5rem;
  grid-template-columns:1fr;
}
@media(min-width:640px){.pricing-table-wrap{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.pricing-table-wrap{grid-template-columns:repeat(5,1fr)}}
.pricing-card{
  display:flex;flex-direction:column;gap:.75rem;
  border:1.5px solid var(--border);border-radius:var(--r-2xl);
  background:var(--card);padding:1.25rem;
  box-shadow:var(--shadow-sm);position:relative;
  transition:box-shadow .2s,border-color .2s;
}
.pricing-card:hover{box-shadow:var(--shadow-lg)}
.pricing-card-popular{
  background:linear-gradient(160deg,#7c3aed 0%,#4f46e5 60%,#3b82f6 100%);
  border-color:transparent;box-shadow:var(--shadow-lg);
}
.pricing-card-popular .plan-name,
.pricing-card-popular .plan-desc,
.pricing-card-popular .plan-amount,
.pricing-card-popular .plan-period,
.pricing-card-popular .pricing-feature{color:#fff!important}
.pricing-card-popular .pricing-feat-disabled{opacity:.5}
.pricing-card-popular .popular-badge{background:#facc15;color:#713f12}
.popular-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  border-radius:var(--r-full);padding:.15rem .75rem;
  font-size:.625rem;font-weight:800;background:#facc15;color:#713f12;
  white-space:nowrap;
}
.pricing-card-header{}
.plan-name{font-size:1rem;font-weight:700}
.plan-desc{font-size:.75rem;color:var(--muted-fg);margin-top:.25rem}
.plan-price{margin-top:.75rem;display:flex;align-items:baseline;gap:.25rem}
.plan-amount{font-size:1.75rem;font-weight:800}
.plan-period{font-size:.75rem;color:var(--muted-fg)}
.pricing-features{display:flex;flex-direction:column;gap:.5rem;flex:1}
.pricing-feature{display:flex;align-items:flex-start;gap:.5rem;font-size:.8125rem;font-weight:500;color:var(--fg)}
.pricing-feat-icon{flex-shrink:0;margin-top:.1rem}
.pricing-feat-disabled{opacity:.5}

 
.faq-list{display:flex;flex-direction:column;gap:.75rem}
.faq-item{
  border:1.5px solid var(--border);border-radius:var(--r-xl);
  background:var(--card);overflow:hidden;
}
.faq-q{
  list-style:none;padding:1rem 1.25rem;cursor:pointer;
  font-size:.9375rem;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .15s;
}
.faq-q:hover{background:rgba(0,0,0,.02)}
.faq-q::marker,.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";font-size:1.25rem;font-weight:400;color:var(--muted-fg);flex-shrink:0;margin-left:1rem}
details[open] .faq-q::after{content:"−"}
.faq-a{padding:.75rem 1.25rem 1.25rem;font-size:.875rem;line-height:1.7;color:var(--muted-fg);border-top:1px solid var(--border)}

 
.footer-tagline{font-size:.875rem;color:var(--muted-fg)}

 
body.dashboard-page{overflow-x:hidden}
.sidebar{
  width:240px;overflow:hidden;
   
}
.sidebar.collapsed{width:68px}
.sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 1rem;border-bottom:1.5px solid var(--sidebar-border);flex-shrink:0;
}
.sidebar-toggle-btn{
  background:none;border:none;cursor:pointer;
  color:rgba(28,28,46,.4);padding:.25rem;
  border-radius:var(--r-md);transition:all .15s;flex-shrink:0;display:flex;align-items:center;
}
.sidebar-toggle-btn:hover{background:var(--sidebar-accent);color:var(--sidebar-fg)}
.sidebar-nav{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column}
.sidebar-section{display:flex;flex-direction:column;gap:.125rem}
.sidebar-item{
  display:flex;align-items:center;gap:.75rem;
  border-radius:var(--r-lg);padding:.625rem .75rem;
  font-size:.875rem;font-weight:500;color:rgba(28,28,46,.7);
  transition:all .15s;white-space:nowrap;overflow:hidden;text-decoration:none;cursor:pointer;
}
.sidebar-item:hover{background:var(--sidebar-accent);color:var(--sidebar-fg)}
.sidebar-item.active{background:rgba(124,58,237,.1);color:var(--primary)}
.sidebar-item.active .sidebar-icon{color:var(--primary)}
.sidebar-icon{width:18px;height:18px;flex-shrink:0;transition:color .15s}
.sidebar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.sidebar-spacer{flex:1}
.sidebar-bottom{padding-top:.25rem}
.sidebar-profile{
  display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;
  border-radius:var(--r-lg);transition:background .15s;
}
.sidebar-profile:hover{background:var(--sidebar-accent)}
.sidebar-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--grad-primary);color:#fff;font-weight:700;font-size:.875rem;
  display:flex;align-items:center;justify-content:center;
}
.sidebar-user{display:flex;flex-direction:column;flex:1;min-width:0}
.sidebar-username{font-size:.8125rem;font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-plan{font-size:.7rem;color:var(--muted-fg)}
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-user,
.sidebar.collapsed .sidebar-logout{display:none}
.sidebar.collapsed .sidebar-item{justify-content:center;padding:.625rem}
.sidebar.collapsed .sidebar-profile{justify-content:center}
.sidebar.collapsed .sidebar-header .logo-text{display:none}
.sidebar.collapsed .sidebar-header{justify-content:center}
.sidebar.collapsed .sidebar-badge-beta{display:none}
.sidebar.collapsed .sidebar-divider{margin:.5rem .25rem}
.sidebar-overlay{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.3);backdrop-filter:blur(2px);display:none}
.sidebar-overlay.visible{display:block}
.sidebar.mobile-open{transform:translateX(0)!important}
@media(max-width:1023px){
  .sidebar{transform:translateX(-100%);transition:transform .3s,width .3s}
}
@media(min-width:1024px){
  .sidebar{transform:none!important}
}
.mobile-topbar{
  display:none;height:56px;align-items:center;justify-content:space-between;
  border-bottom:1.5px solid var(--border);
  background:var(--card);padding:0 1rem;position:sticky;top:0;z-index:30;
}
@media(max-width:1023px){.mobile-topbar{display:flex}}
.mobile-topbar-btn{
  background:none;border:none;cursor:pointer;color:var(--fg);
  padding:.5rem;border-radius:var(--r-lg);
}
.dashboard-main{min-height:100vh;background-color:#eef0fb;background-image:radial-gradient(circle,#b0b4e4 1px,transparent 1px);background-size:26px 26px;transition:padding-left .3s;padding-left:240px}
.dashboard-main.sidebar-collapsed{padding-left:68px}
@media(max-width:1023px){.dashboard-main,.dashboard-main.sidebar-collapsed{padding-left:0;padding-top:56px}}
.dashboard-content{max-width:1200px;margin:0 auto;padding:1rem 1.5rem 2rem}
.db-page-header{margin-bottom:1.5rem}
.db-page-header h1{font-size:1.5rem;font-weight:700}
.stat-value{font-size:1.375rem;font-weight:800;color:var(--fg);margin-top:.125rem}
.stat-label{font-size:.75rem;font-weight:500;color:var(--muted-fg)}
.db-section-grid{display:grid;gap:1rem;margin-top:2rem;grid-template-columns:1fr}
@media(min-width:1024px){.db-section-grid{grid-template-columns:2fr 1fr}}
.db-download-card,.db-status-card{
  border:1.5px solid var(--border);border-radius:var(--r-2xl);
  background:var(--card);box-shadow:var(--shadow-sm);overflow:hidden;
}
.card-header{
  display:flex;align-items:flex-start;flex-direction:column;
  border-bottom:1.5px solid var(--border);padding:1rem 1.25rem;
  background:rgba(0,0,0,.015);
}
.card-title{font-size:1rem;font-weight:700}
.card-body{padding:1.25rem}
.db-url-row{display:flex;flex-direction:column;gap:.75rem}
@media(min-width:540px){.db-url-row{flex-direction:row}}
.db-switches{display:flex;flex-direction:column;gap:.875rem;margin-top:1.25rem}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer}
.switch-info{display:flex;flex-direction:column;gap:.125rem;flex:1}
.switch-label{font-size:.875rem;font-weight:500}
.switch-wrap{flex-shrink:0;position:relative;display:flex;align-items:center}
.switch-input{position:absolute;opacity:0;width:0;height:0}
.switch-track{
  display:block;width:40px;height:22px;border-radius:999px;
  background:var(--muted);cursor:pointer;transition:background .2s;position:relative;
}
.switch-track::before{
  content:"";position:absolute;width:16px;height:16px;
  left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.switch-input:checked+.switch-track{background:var(--primary)}
.switch-input:checked+.switch-track::before{transform:translateX(18px)}
.db-quick-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.usage-row{display:flex;align-items:center;justify-content:space-between}
.usage-label{font-size:.875rem;color:var(--muted-fg)}
.usage-val{font-size:.875rem;font-weight:600}
.usage-bar-wrap{height:8px;background:var(--muted);border-radius:999px;margin-top:.5rem;overflow:hidden}
.usage-bar{height:100%;background:var(--grad-primary);border-radius:999px}
.db-library-header{display:flex;align-items:center;justify-content:space-between;margin-top:2.5rem;margin-bottom:1rem}
.db-library-header h2{font-size:1.125rem;font-weight:700}
.dash-cards-grid{
  display:grid;gap:1rem;
  grid-template-columns:1fr;
}
@media(min-width:640px){.dash-cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.dash-cards-grid{grid-template-columns:repeat(3,1fr)}}

 
.modal-backdrop{
  display:none;position:fixed;inset:0;z-index:99;
  background:rgba(0,0,0,.45);backdrop-filter:blur(4px);
}
.modal-backdrop.visible{display:block}
.modal{
  display:none;position:fixed;top:50%;left:50%;z-index:100;
  transform:translate(-50%,-50%);
  width:calc(100% - 2rem);max-width:520px;
  background:var(--card);border-radius:var(--r-2xl);
  box-shadow:var(--shadow-2xl);padding:1.5rem;
  max-height:90vh;overflow-y:auto;
}
.modal.visible{display:block}
.modal-space-info{display:flex;align-items:flex-start;gap:.875rem}
.modal-avatar{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:var(--grad-primary);color:#fff;font-weight:700;font-size:1.25rem;
  display:flex;align-items:center;justify-content:center;
}
.modal-host{font-size:.8125rem;font-weight:700;color:var(--muted-fg)}
.modal-space-title{font-size:1rem;font-weight:700;margin-top:.25rem;line-height:1.4}
.modal-meta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem;font-size:.8125rem;color:var(--muted-fg)}
.modal-meta span{display:flex;align-items:center;gap:.35rem}
.modal-audio{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin-top:1.5rem;padding:2rem;border-radius:var(--r-xl);
  border:1.5px solid var(--border);background:rgba(0,0,0,.02);gap:.75rem;
}
.modal-actions{display:flex;gap:.75rem;margin-top:1.5rem}

 
.upcoming-badge{
  display:flex;align-items:center;gap:.5rem;
  background:rgba(124,58,237,.08);border:1.5px solid rgba(124,58,237,.15);
  border-radius:var(--r-full);padding:.5rem 1rem;
}
.upcoming-badge span{font-size:.875rem;font-weight:700;color:var(--primary)}
.upcoming-card{
  display:flex;flex-direction:column;gap:1rem;
  border:1.5px solid var(--border);border-radius:var(--r-xl);
  background:var(--card);padding:1rem;box-shadow:var(--shadow-sm);
  transition:box-shadow .2s,border-color .2s;
}
.upcoming-card:hover{box-shadow:var(--shadow-md);border-color:rgba(124,58,237,.2)}
@media(min-width:640px){.upcoming-card{flex-direction:row;align-items:center}}
.upcoming-card-left{display:flex;align-items:flex-start;gap:.875rem;flex:1;min-width:0}
.upcoming-card-right{display:flex;flex-direction:column;gap:.375rem;flex-shrink:0;align-items:flex-end}
.upcoming-card-badge{
  position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  background:var(--grad-primary);color:#fff;
  border-radius:var(--r-full);padding:.1rem .45rem;
  font-size:.55rem;font-weight:800;white-space:nowrap;
}
.upcoming-card-info{flex:1;min-width:0}
.upcoming-card-host{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.upcoming-card-title{font-size:.9375rem;font-weight:700;color:var(--fg);line-height:1.35;margin-top:.375rem}
.upcoming-time{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:600;color:var(--fg)}
.upcoming-meta{display:flex;flex-direction:column;gap:.25rem;align-items:flex-end}
.upcoming-stat{display:flex;align-items:center;gap:.3rem;font-size:.75rem;color:var(--muted-fg)}
.host-location{display:flex;align-items:center;gap:.2rem;font-size:.6875rem;color:var(--muted-fg)}
.topic-pill{
  background:rgba(124,58,237,.08);border-radius:var(--r-full);
  padding:.15rem .5rem;font-size:.625rem;font-weight:500;color:var(--primary);
}
.topic-pills{display:flex;flex-wrap:wrap;gap:.25rem}

 
.spin{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}




.dc-colored{
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);border:none;overflow:hidden;
  transition:transform .2s,box-shadow .2s;cursor:default;
  display:flex;flex-direction:column;
}
.dc-colored:hover{transform:translateY(-2px);box-shadow:0 18px 36px -6px rgba(0,0,0,.35)}

 
.dc-topbar{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.12);
  padding:.5rem 1rem;
}
.dc-badges{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}
.dc-badge-host{
  background:rgba(255,255,255,.2);color:#fff;
  border-radius:var(--r-full);padding:.15rem .6rem;font-size:.6875rem;font-weight:700;
}
.dc-badge-live{
  background:#ef4444;color:#fff;
  border-radius:var(--r-full);padding:.15rem .6rem;font-size:.6875rem;font-weight:700;
}
.dc-type-pill{
  display:inline-flex;align-items:center;gap:3px;
  color:rgba(255,255,255,.85);font-size:.6875rem;font-weight:600;
}
.dc-type-pill-audio{
  display:inline-flex;align-items:center;gap:3px;
  color:rgba(255,255,255,.6);font-size:.6875rem;font-weight:600;
}
.dc-actions{display:flex;align-items:center;gap:.125rem;color:rgba(255,255,255,.45)}
.dc-actions button{
  background:none;border:none;cursor:pointer;color:inherit;
  padding:.3rem;border-radius:var(--r);transition:color .15s;
  display:flex;align-items:center;
}
.dc-actions button:hover{color:#fff}
.dc-actions svg{width:12px;height:12px}

 
.dc-body{padding:.875rem 1rem 1rem}

 
.dc-host-row{display:flex;align-items:center;gap:.625rem;margin-bottom:.75rem}
.dc-avatar-circle{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.25);
  color:#fff;font-weight:700;font-size:.75rem;
  display:flex;align-items:center;justify-content:center;
}
.dc-host-info{flex:1;min-width:0}
.dc-host-name{
  display:flex;align-items:center;gap:.3rem;
  font-size:.75rem;font-weight:700;color:#fff;
}
.dc-followers{font-size:.6875rem;color:rgba(255,255,255,.65)}
.dc-flag{font-size:.9375rem;flex-shrink:0}
.dc-title{
  font-size:.875rem;font-weight:700;color:#fff;
  line-height:1.35;margin-bottom:.375rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .15s;
}
.dc-date{font-size:.6875rem;color:rgba(255,255,255,.6);margin-bottom:.5rem}
.dc-listeners{
  display:flex;align-items:center;gap:.375rem;
  font-size:.6875rem;color:rgba(255,255,255,.8);margin-bottom:.5rem;
}
.dc-dot{
  width:6px;height:6px;border-radius:50%;background:#f87171;flex-shrink:0;
  animation:dcping .9s ease-in-out infinite;
}
@keyframes dcping{0%,100%{opacity:1}50%{opacity:.35}}
.dc-play-bar{
  display:flex;align-items:center;gap:.625rem;
  background:rgba(255,255,255,.1);backdrop-filter:blur(4px);
  border-radius:var(--r-lg);padding:.5rem .875rem;
  margin-bottom:.625rem;cursor:pointer;transition:background .15s;
}
.dc-play-bar:hover{background:rgba(255,255,255,.16)}
.dc-play-bar span{font-size:.75rem;font-weight:500;color:#fff}
.dc-dur{margin-left:auto!important;font-size:.75rem;color:rgba(255,255,255,.6)!important}
.dc-action-btns{display:flex;gap:.375rem}
.dc-action-btns button{
  flex:1;border:none;cursor:pointer;transition:background .15s;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.9);
  padding:.4rem .25rem;font-size:.6875rem;font-weight:600;
  color:#2d1a6e;
  display:flex;align-items:center;justify-content:center;gap:.3rem;
}
.dc-action-btns button:hover{background:#fff;color:#1a0f4e}





.dark{
  --bg:#0e0e1a;
  --fg:#e4e4f0;
  --card:#161624;
  --card-fg:#e4e4f0;
  --secondary:#1e1e30;
  --secondary-fg:#c0c0d8;
  --muted:#1a1a2a;
  --muted-fg:#8484a8;
  --border:#272740;
  --input-bg:#1e1e30;
  --sidebar:#111120;
  --sidebar-fg:#dcdcee;
  --sidebar-accent:#1c1c2e;
  --sidebar-border:#272740;
}
.dark body{background:var(--bg);color:var(--fg)}
.dark .dashboard-main{background-color:#0d0d1f;background-image:radial-gradient(circle,#2a2a5a 1px,transparent 1px)}
.dark .card{background:var(--card);border-color:var(--border)}
.dark .sidebar{background:var(--sidebar);border-color:var(--sidebar-border)}
.dark .sidebar-item{color:rgba(220,220,238,.6)}
.dark .sidebar-item:hover{background:var(--sidebar-accent);color:var(--sidebar-fg)}
.dark .sidebar-item.active{background:rgba(124,58,237,.18);color:#a78bfa}
.dark .sidebar-header{border-color:var(--sidebar-border)}
.dark .sidebar-divider{background:var(--sidebar-border)}
.dark .sidebar-profile{border-color:var(--sidebar-border)}
.dark .sidebar-username{color:var(--sidebar-fg)}
.dark .sidebar-plan{color:var(--muted-fg)}
.dark .sidebar-usage-section{border-color:var(--sidebar-border);background:rgba(255,255,255,.02)}
.dark .sidebar-usage-label{color:var(--muted-fg)}
.dark .usage-bar-wrap{background:rgba(255,255,255,.07)}
.dark .input{background:var(--input-bg);border-color:var(--border);color:var(--fg)}
.dark .input::placeholder{color:var(--muted-fg)}
.dark .btn-outline{border-color:var(--border);color:var(--fg)}
.dark .btn-outline:hover{background:var(--secondary)}
.dark .btn-ghost{color:var(--muted-fg)}
.dark .btn-ghost:hover{background:var(--secondary);color:var(--fg)}
.dark .badge{border-color:var(--border)}
.dark .db-dl-header{background:rgba(255,255,255,.02);border-color:var(--border)}
.dark .db-dl-footnotes{background:rgba(255,255,255,.01);border-color:var(--border)}
.dark .db-dl-title{color:var(--fg)}
.dark .db-dl-subtitle{color:var(--muted-fg)}
.dark .stat-card-new{background:var(--card);border-color:var(--border)}
.dark .stat-value-new{color:var(--fg)}
.dark .stat-label-new{color:var(--muted-fg)}
.dark .dash-cards-grid .dash-card{background:var(--card);border-color:var(--border)}
.dark .db-page-header h1{color:var(--fg)}
.dark .mobile-topbar{background:var(--card);border-color:var(--border)}
.dark .switch-track{background:var(--border)}
.dark .db-toggle-label{color:var(--fg)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--fg)}
.dark p{color:var(--fg)}

 
.dark-toggle{
  display:flex;align-items:center;gap:.5rem;
  background:#f0f0f5;border:1.5px solid var(--border);
  border-radius:var(--r-full);padding:.35rem .875rem;
  font-size:.8125rem;font-weight:600;color:var(--muted-fg);
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.dark-toggle:hover{border-color:var(--primary);color:var(--primary)}
.dark-toggle svg{width:15px;height:15px;flex-shrink:0}

 
.hdr-btns{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.hdr-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:#f0f0f5;border:1.5px solid var(--border);
  border-radius:var(--r-full);padding:.35rem .875rem;
  font-size:.8125rem;font-weight:600;color:var(--muted-fg);
  cursor:pointer;transition:all .2s;white-space:nowrap;text-decoration:none;
}
.hdr-btn:hover{border-color:var(--primary);color:var(--primary)}
.hdr-btn svg{width:14px;height:14px;flex-shrink:0}
.hdr-btn-snapdown{background:#FFEB3B;color:#111;border-color:#FFEB3B}
.hdr-btn-snapdown:hover{background:#f5dc00;border-color:#f5dc00;color:#111}
.hdr-btn-geekemails{background:#fecd4c;color:#000;border-color:#fecd4c}
.hdr-btn-geekemails:hover{background:#f5c200;border-color:#f5c200;color:#000}
.hdr-btn-lang select{
  background:none;border:none;font:inherit;color:inherit;cursor:pointer;
  font-size:.8125rem;font-weight:600;padding:0;outline:none;
}
.dark .dark-toggle{background:#1e1e2e;color:var(--muted-fg)}
.dark .hdr-btn{background:#1e1e2e;border-color:var(--border);color:var(--muted-fg)}
.dark .hdr-btn:hover{border-color:var(--primary);color:var(--primary)}
.dark .hdr-btn-lang select{background:transparent;color:var(--muted-fg)}

 
.play-bar{cursor:pointer;user-select:none}
.play-bar-dur{
  margin-left:auto;font-size:.7rem;
  opacity:.75;font-weight:500;
}
.card-player{
  display:none;flex-direction:column;gap:.5rem;
  margin-top:.375rem;
  background:rgba(0,0,0,.22);
  border-radius:var(--r-lg);
  padding:.625rem .75rem;
}
.space-card:not(.space-card-colored) .card-player{background:rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.15)}
.cp-toprow{display:flex;align-items:center;justify-content:space-between}
.cp-label{font-size:.7rem;font-weight:600;opacity:.8}
.cp-close-btn{
  background:none;border:none;cursor:pointer;padding:2px;
  opacity:.6;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r);
}
.cp-close-btn:hover{opacity:1;background:rgba(255,255,255,.15)}
.cp-close-btn svg{width:12px;height:12px}
.cp-controls{display:flex;align-items:center;gap:.5rem}
.cp-playpause{
  width:28px;height:28px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);border:none;border-radius:50%;
  cursor:pointer;transition:transform .1s;
}
.space-card:not(.space-card-colored) .cp-playpause{background:#8a5ffc}
.cp-playpause:hover{transform:scale(1.08)}
.cp-playpause svg{width:11px;height:11px;color:#2d1a6e;flex-shrink:0}
.space-card:not(.space-card-colored) .cp-playpause svg{color:#fff}
.cp-seek{flex:1;position:relative;height:4px;background:rgba(255,255,255,.25);border-radius:var(--r-full);cursor:pointer}
.space-card:not(.space-card-colored) .cp-seek{background:rgba(124,58,237,.2)}
.cp-seek-fill{height:100%;border-radius:var(--r-full);background:rgba(255,255,255,.9);transition:width .5s linear}
.space-card:not(.space-card-colored) .cp-seek-fill{background:#8a5ffc}
.cp-time{font-size:.65rem;font-weight:600;opacity:.8;white-space:nowrap;font-variant-numeric:tabular-nums}
.cp-dur{font-size:.65rem;opacity:.6;margin-left:auto;margin-right:.35rem;font-variant-numeric:tabular-nums}
 
.cp-media{display:none}
.cp-video-el{width:100%;display:block;border-radius:var(--r-lg) var(--r-lg) 0 0;background:#000;max-height:200px;object-fit:contain;margin-bottom:.375rem}
 
.card-player-demo{display:flex!important}
.card-player-demo.card-player-video{background:#0d0d1a;padding-top:.375rem}
 
.db-test-sec{margin-top:2rem}
.db-test-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:640px){.db-test-grid{grid-template-columns:1fr}}
.db-test-box{background:var(--card-bg);border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.db-test-box-header{display:flex;align-items:center;gap:.5rem;padding:.875rem 1rem .375rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg)}
.db-test-box-header svg{width:15px;height:15px;flex-shrink:0}
.db-test-info{padding:.25rem 1rem .625rem}
.db-test-title{font-size:.8125rem;font-weight:600}
.db-test-meta{font-size:.7rem;color:var(--muted-fg);margin-top:.15rem}
.db-test-box .card-player-demo{margin:.625rem;border-radius:var(--r-lg);background:#1a103a;color:#fff}




.sidebar-usage-section{
  margin:.5rem .5rem 1rem;
  border:1.5px solid var(--sidebar-border);
  border-radius:var(--r-xl);
  padding:.75rem .875rem 1.5rem;
  background:rgba(124,58,237,.03);
  overflow:visible;
}
.sidebar-usage-title{
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted-fg);margin-bottom:.625rem;
}
.sidebar-usage-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.25rem;
}
.sidebar-usage-label{font-size:.7rem;color:var(--muted-fg)}
.sidebar-usage-val{font-size:.7rem;font-weight:700;color:var(--fg)}
.usage-bar-wrap-sm{
  height:4px;border-radius:var(--r-full);
  background:var(--border);overflow:hidden;margin-bottom:.5rem;
}
.usage-bar-sm{height:100%;border-radius:var(--r-full);background:var(--grad-primary)}
.sidebar-upgrade-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;margin-top:.625rem;
  background:#8a5ffc;color:#fff;
  border:none;border-radius:var(--r-full);
  padding:.375rem .75rem;font-size:.7rem;font-weight:700;
  cursor:pointer;transition:opacity .15s;
  text-decoration:none;
}
.sidebar-upgrade-btn:hover{opacity:.9}
.sidebar.collapsed .sidebar-usage-section{display:none}




.sidebar-profile-new{
  display:flex;align-items:flex-start;justify-content:space-between;gap:.625rem;
  padding:.75rem;margin:.25rem 0 0;width:100%;box-sizing:border-box;
  border-top:1.5px solid var(--sidebar-border);
}
.sidebar-initial-circle{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--grad-primary);
  color:#fff;font-weight:800;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;
}
.sidebar-profile-text{flex:1;min-width:0}
.sidebar-profile-name{
  font-size:.8125rem;font-weight:700;
  color:var(--sidebar-fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-profile-plan{font-size:.6875rem;color:var(--muted-fg);margin-top:.05rem;white-space:normal;word-break:break-word;line-height:1.3}
.sidebar-logout-btn{
  width:28px;height:28px;border-radius:var(--r-md);
  background:none;border:none;cursor:pointer;
  color:var(--muted-fg);display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.sidebar-logout-btn:hover{background:var(--sidebar-accent);color:var(--fg)}
.sidebar.collapsed .sidebar-profile-text,
.sidebar.collapsed .sidebar-logout-btn{display:none}
.sidebar.collapsed .sidebar-profile-new{justify-content:center;padding:.625rem .25rem}

 
.logo-img-icon{width:32px;height:32px;object-fit:contain;flex-shrink:0}
.logo-img-icon-sm{width:26px;height:26px;object-fit:contain;flex-shrink:0}


 
.stat-card-new{
  display:flex;align-items:flex-start;gap:1rem;
  border:1.5px solid var(--border);border-radius:var(--r-xl);
  background:var(--card);padding:1.25rem;box-shadow:var(--shadow-sm);
}
.stat-icon-new{
  width:40px;height:40px;flex-shrink:0;
  border-radius:var(--r-lg);
  background:#ebebf0 !important;
  display:flex;align-items:center;justify-content:center;
  color:#111 !important;
}
.dark .stat-icon-new{background:#1e1e2e !important;color:#e0e0e0 !important}
.stat-body{min-width:0;flex:1}
.stat-label-new{font-size:.75rem;font-weight:500;color:var(--muted-fg);margin:0}
.stat-value-new{font-size:1.35rem;font-weight:800;color:var(--fg);margin:.1rem 0 0;line-height:1.2}
.stat-meta{display:flex;align-items:center;gap:.5rem;margin-top:.35rem;flex-wrap:wrap}
.stat-sub{font-size:.6875rem;color:var(--muted-fg)}
.stat-trend{
  display:inline-flex;align-items:center;gap:.2rem;
  font-size:.6875rem;font-weight:600;color:#059669;
}

 
.db-download-card-full{
  border:1.5px solid var(--border);border-radius:var(--r-xl);
  background:var(--card);box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.db-dl-header{
  display:flex;align-items:center;gap:.75rem;
  border-bottom:1.5px solid var(--border);
  background:rgba(0,0,0,.02);padding:.875rem 1.5rem;
}
.db-dl-header-icon{
  width:32px;height:32px;flex-shrink:0;
  background:#ebebf0 !important;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;color:#111 !important;
}
.dark .db-dl-header-icon{background:#1e1e2e !important;color:#e0e0e0 !important}
.db-dl-title{font-size:.875rem;font-weight:600;margin:0;line-height:1.2}
.db-dl-subtitle{font-size:.75rem;color:var(--muted-fg);margin:.1rem 0 0}
.db-dl-body{padding:1.25rem 1.5rem}
.db-dl-footnotes{
  border-top:1.5px solid var(--border);
  background:rgba(0,0,0,.015);padding:.625rem 1.5rem;
  display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;
}
.db-dl-footnotes span{font-size:.6875rem;color:var(--muted-fg)}

 
.rs-adv-panel{
  display:none;margin-top:.75rem;
  border:1.5px solid var(--border);border-radius:var(--r-xl);
  background:var(--card);box-shadow:var(--shadow-sm);
  padding:1.25rem 1.5rem 1rem;
}
.rs-adv-panel.open{display:block}
.rs-filter-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
}
@media(max-width:700px){.rs-filter-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.rs-filter-grid{grid-template-columns:1fr}}
.rs-filter-col{display:flex;flex-direction:column;gap:.4rem}
.rs-filter-heading{
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--fg);margin-bottom:.35rem;padding-bottom:.35rem;
  border-bottom:2px solid var(--border);
}
.rs-filter-link{
  font-size:.8rem;color:var(--muted-fg);cursor:pointer;
  background:var(--muted);border:1.5px solid transparent;border-radius:var(--r-full);
  text-align:left;padding:.3rem .8rem;font-weight:500;
  transition:color .15s,background .15s,border-color .15s;width:fit-content;
}
.rs-filter-link:hover{border-color:var(--primary);color:var(--primary);background:rgba(124,58,237,.07)}
.rs-filter-link.active{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:700}
.rs-divider-row{border-top:1.5px solid var(--border);margin:1rem 0 .875rem}
.rs-creators-row,.rs-langs-row{
  display:flex;flex-wrap:wrap;gap:.625rem;align-items:flex-start;
  margin-bottom:.75rem;
}
.rs-adv-section-row{display:flex;align-items:center;gap:.5rem;margin:1rem 0 .625rem;padding-top:.875rem;border-top:1.5px solid var(--border)}
.rs-adv-section-label{
  display:flex;align-items:center;gap:.4rem;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--fg);
}
.rs-section-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-fg);margin-bottom:.5rem}
.rs-creator-item,.rs-lang-item{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  cursor:pointer;min-width:54px;
}
.rs-creator-item:hover .rs-avatar,.rs-lang-item:hover .rs-lang-circle{
  opacity:.85;transform:scale(1.06);
}
.rs-avatar{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:700;color:#fff;flex-shrink:0;
  transition:transform .15s;
}
.rs-avatar.active{outline:2.5px solid var(--primary);outline-offset:2px}
.rs-lang-circle{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;flex-shrink:0;
  background:var(--muted);transition:transform .15s;
}
.rs-lang-circle.active,.rs-creator-item.active .rs-avatar{outline:2.5px solid var(--primary);outline-offset:2px}
.rs-item-name{font-size:.68rem;text-align:center;color:var(--muted-fg);max-width:60px;word-break:break-word;line-height:1.2}
.rs-item-count{font-size:.62rem;color:var(--muted-fg);text-align:center}
.rs-panel-footer{display:flex;justify-content:flex-end;gap:.5rem;padding-top:.875rem;border-top:1.5px solid var(--border);margin-top:.5rem}
 
.btn-danger{background:#ef4444;color:#fff;border:none}
.btn-danger:hover{background:#dc2626}

 
.sd-dl-confirm-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.96);
  background:var(--card-bg,var(--card));border:1.5px solid var(--border);
  border-radius:var(--r-xl);box-shadow:0 20px 60px rgba(0,0,0,.18);
  padding:2rem 2rem 1.75rem;z-index:10001;
  width:min(92vw,420px);
  display:none;flex-direction:column;align-items:center;gap:1.25rem;
  opacity:0;transition:opacity .18s,transform .18s;
}
.sd-dl-confirm-modal.visible{
  display:flex;opacity:1;transform:translate(-50%,-50%) scale(1);
}
.sd-dlc-brand{display:flex;align-items:center;gap:.75rem}
.sd-dlc-brand img{width:48px;height:48px;border-radius:12px;flex-shrink:0}
.sd-dlc-brand-name{font-size:1.25rem;font-weight:800;color:var(--fg)}
.sd-dlc-brand-name span{color:#8a5ffc}
.sd-dlc-body{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}
.sd-dlc-title{font-size:1rem;font-weight:700;color:var(--fg)}
.sd-dlc-url{
  font-size:.7rem;color:var(--muted-fg);
  background:var(--muted,rgba(0,0,0,.04));
  padding:.35rem .75rem;border-radius:var(--r-full);
  word-break:break-all;max-width:100%;border:1.5px solid var(--border);
}
.sd-dlc-desc{font-size:.8125rem;color:var(--muted-fg);margin:0}
.sd-dlc-actions{display:flex;gap:.75rem;width:100%;justify-content:center}

 
.db-toggles-row{
  display:flex;flex-wrap:wrap;gap:1.25rem 2rem;margin-top:1.25rem;
}
.db-toggle-item{
  display:flex;align-items:center;gap:.625rem;cursor:pointer;
}
.db-toggle-label{font-size:.875rem;font-weight:500;margin:0;line-height:1.2}
.db-toggle-sub{font-size:.6875rem;color:var(--muted-fg);margin:.1rem 0 0}

 
.sidebar-badge-beta{
  display:inline-block;
  background:rgba(124,58,237,.12);border-radius:.25rem;
  padding:.1rem .4rem;font-size:.625rem;font-weight:700;
  color:var(--primary);margin-left:auto;
}
.sidebar.collapsed .sidebar-badge-beta{display:none}

 
.sidebar-divider{
  height:1.5px;background:var(--sidebar-border);
  margin:.5rem .75rem;flex-shrink:0;
}

 
.sidebar-avatar-img{
  width:36px;height:36px;flex-shrink:0;
  border-radius:50%;border:2px solid var(--sidebar-border);
  object-fit:cover;
}




#db-url-error{
  display:none;align-items:center;gap:.5rem;
  color:#ef4444;font-size:.8rem;margin-top:.5rem;
  padding:.5rem .75rem;background:rgba(239,68,68,.07);
  border-radius:var(--r-lg);border:1px solid rgba(239,68,68,.18);
}
#db-url-error svg{width:14px;height:14px;flex-shrink:0}
#db-space-preview{display:none;margin-top:0}
#db-space-preview .space-card{margin:0;max-width:100%}
.db-rec-actions{margin-top:.75rem;display:flex;flex-direction:column;gap:.5rem}
.db-rec-btn{
  display:flex;align-items:center;justify-content:center;gap:.625rem;
  padding:.7rem;border:none;border-radius:var(--r-full);
  background:#8a5ffc;color:#fff;font-size:.875rem;font-weight:700;
  cursor:pointer;transition:opacity .15s;width:100%;
}
.db-rec-btn:hover{opacity:.88}
.rec-pulse-dot{
  width:9px;height:9px;border-radius:50%;background:#fff;flex-shrink:0;
  animation:pulse 1s infinite;
}
.db-cancel-rec-btn{
  display:flex;align-items:center;justify-content:center;
  padding:.6rem;border:1px solid var(--border);border-radius:var(--r-full);
  background:rgba(255,255,255,.6);color:var(--fg);font-size:.875rem;font-weight:500;
  cursor:pointer;transition:background .15s;width:100%;
}
.db-cancel-rec-btn:hover{background:var(--muted)}
.space-card-colored .db-cancel-rec-btn{
  background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.3);
}
.space-card-colored .db-cancel-rec-btn:hover{background:rgba(255,255,255,.25)}
.db-rec-success{
  text-align:center;padding:2.5rem 1.5rem;
  display:flex;flex-direction:column;align-items:center;gap:.625rem;
}
.db-rec-success-icon{
  width:56px;height:56px;border-radius:50%;background:#dcfce7;
  display:flex;align-items:center;justify-content:center;color:#10b981;
}
.db-rec-success-text{font-size:1.1rem;font-weight:700;color:var(--fg)}
.db-rec-success-sub{font-size:.8rem;color:var(--muted-fg)}




.queue-rec-banner{
  display:flex;align-items:center;gap:.625rem;
  background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.2);
  border-radius:var(--r-xl);padding:.75rem 1rem;
  color:#ef4444;font-size:.85rem;font-weight:600;
}
.queue-rec-banner .rdot{
  width:9px;height:9px;border-radius:50%;background:#ef4444;
  animation:pulse 1s infinite;flex-shrink:0;
}
.queue-rec-timer-wrap{
  margin-left:auto;display:flex;align-items:center;
  gap:.375rem;font-size:.8rem;font-weight:500;color:var(--muted-fg);
}
.queue-rec-clock{
  font-family:ui-monospace,monospace;font-size:1rem;font-weight:800;
  color:#ef4444;letter-spacing:.03em;
}
 
.rec-card-wrapper{position:relative}
.rec-top-bar{
  display:flex;align-items:center;gap:.5rem;
  background:linear-gradient(135deg,#ef4444,#c0392b);
  color:#fff;padding:.45rem .875rem;border-radius:12px 12px 0 0;
  font-size:.72rem;font-weight:800;letter-spacing:.04em;
}
.rec-top-bar .rdot{
  width:8px;height:8px;border-radius:50%;background:#fff;
  animation:pulse 1s infinite;
}
.rec-top-bar .rec-bar-timer{
  margin-left:auto;font-family:ui-monospace,monospace;
  font-size:.85rem;font-weight:800;letter-spacing:.04em;opacity:.9;
}
.rec-card-wrapper .space-card{border-radius:0 0 12px 12px}
 
.queue-rec-indicator{
  margin-left:auto;display:flex;align-items:center;
  gap:.2rem;font-size:.62rem;font-weight:700;color:#ef4444;
}
.rdot{
  width:7px;height:7px;border-radius:50%;
  background:#ef4444;animation:pulse 1s infinite;flex-shrink:0;
}
.queue-empty-note{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1.5rem;border:1.5px dashed var(--border);
  border-radius:var(--r-xl);color:var(--muted-fg);font-size:.85rem;
  background:rgba(255,255,255,.45);
}




.sd-modal-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  align-items:center;justify-content:center;
}
.sd-modal-overlay.active{display:flex;}
.sd-modal{
  background:#fff;border-radius:var(--r-xl);
  width:min(460px,92vw);max-height:90vh;overflow-y:auto;
  box-shadow:var(--shadow-2xl);animation:sdModalIn .18s ease;
}
@keyframes sdModalIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sd-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;border-bottom:1px solid var(--border);
}
.sd-modal-header h3{font-size:1rem;font-weight:700;color:var(--fg);margin:0}
.sd-modal-close{
  background:none;border:none;cursor:pointer;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-full);color:var(--muted-fg);font-size:1.4rem;line-height:1;
  transition:background .15s;
}
.sd-modal-close:hover{background:var(--muted)}
.sd-modal-body{padding:1.25rem}
 
.sd-share-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem;
}
.sd-share-btn{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:.75rem .5rem;border-radius:var(--r-lg);border:1px solid var(--border);
  background:#fff;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s;
  font-size:.7rem;font-weight:600;color:var(--fg);
}
.sd-share-btn svg{width:22px;height:22px}
.sd-share-btn:hover{background:var(--muted);border-color:transparent}
.sd-share-twitter{color:#000}
.sd-share-twitter:hover{background:#000;color:#fff}
.sd-share-whatsapp{color:#25D366}
.sd-share-whatsapp:hover{background:#25D366;color:#fff}
.sd-share-telegram{color:#229ED9}
.sd-share-telegram:hover{background:#229ED9;color:#fff}
.sd-share-facebook{color:#1877F2}
.sd-share-facebook:hover{background:#1877F2;color:#fff}
.sd-share-linkedin{color:#0A66C2}
.sd-share-linkedin:hover{background:#0A66C2;color:#fff}
.sd-share-copy{color:var(--fg)}
.sd-share-copy:hover{background:var(--muted)}
 
.sd-option-group{margin-bottom:1.125rem}
.sd-option-group h4{font-size:.8rem;font-weight:700;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.sd-options-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.sd-option-btn{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.625rem .375rem;border-radius:var(--r-lg);
  border:2px solid var(--border);background:#fff;
  cursor:pointer;transition:border-color .15s,background .15s;
}
.sd-option-btn strong{font-size:.875rem;color:var(--fg)}
.sd-option-btn small{font-size:.65rem;color:var(--muted-fg)}
.sd-option-btn.selected{border-color:#8a5ffc;background:rgba(138,95,252,.07)}
.sd-option-btn.selected strong{color:#8a5ffc}
.sd-convert-action{
  display:block;width:100%;margin-top:.75rem;
  padding:.7rem;text-align:center;
  background:#8a5ffc;color:#fff;border:none;
  border-radius:var(--r-full);font-size:.875rem;font-weight:700;
  cursor:pointer;transition:opacity .15s;
}
.sd-convert-action:hover{opacity:.9}
 
.space-card-colored .card-bottom *{color:#fff}
.space-card-colored .card-bottom .action-btn{
  background:rgba(255,255,255,.9);color:#2d1a6e;
}
.space-card-colored .card-bottom .action-btn:hover{background:#fff;color:#2d1a6e}




.rs-folder-section{
  margin-top:1.5rem;
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r-xl);box-shadow:var(--shadow-sm);
  padding:1.125rem 1.25rem 1.25rem;
}
.rs-fs-top{display:flex;align-items:center;justify-content:space-between;gap:.625rem;flex-wrap:wrap;margin-bottom:1rem}
.rs-fs-left{display:flex;align-items:center;gap:.5rem}
.rs-fs-icon{
  width:28px;height:28px;border-radius:var(--r-md);
  background:#7c3aed;color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.rs-fs-title{font-size:.875rem;font-weight:800;color:var(--fg);letter-spacing:.01em}
.rs-fs-hint{font-size:.72rem;color:var(--muted-fg)}

 
.rs-folder-bar{display:flex;gap:.625rem;flex-wrap:wrap;align-items:stretch}

 
.rs-folder-card{
  position:relative;display:flex;flex-direction:column;gap:.3rem;
  flex-shrink:0;min-width:95px;padding:.875rem .875rem .75rem;
  border-radius:var(--r-xl);cursor:pointer;
  border:2px solid transparent;
  transition:transform .15s,box-shadow .18s,border-color .15s;
  user-select:none;box-shadow:var(--shadow-sm);
}
.rs-folder-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.rs-folder-card.rs-fc-active{
  box-shadow:0 0 0 3.5px rgba(124,58,237,.35),var(--shadow-lg);
}
.rs-folder-card.rs-drag-over{
  transform:scale(1.06) !important;
  box-shadow:0 0 0 3px #fff,0 6px 24px rgba(0,0,0,.3) !important;
  border-color:rgba(255,255,255,.85) !important;
}
 
.rs-fc-all{background:#7c3aed}
 
.rs-fc-colored{   }
 
.rs-folder-card.rs-fc-plain{
  background:var(--card);border-color:var(--border) !important;
}
.rs-folder-card.rs-fc-plain .rs-fc-name{color:var(--fg)}
.rs-folder-card.rs-fc-plain .rs-fc-count{color:var(--muted-fg)}
.rs-folder-card.rs-fc-plain .rs-fc-icon{background:rgba(124,58,237,.1);color:var(--primary)}
.rs-folder-card.rs-fc-plain .rs-fc-badge{background:var(--primary)}
.rs-folder-card.rs-fc-plain .rs-fc-kebab{background:var(--muted);color:var(--muted-fg)}
.rs-folder-card.rs-fc-plain.rs-fc-active{box-shadow:0 0 0 3px var(--primary),var(--shadow-md)}

 
.rs-fc-icon{
  width:30px;height:30px;border-radius:var(--r-md);
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:#fff;margin-bottom:.1rem;
}
.rs-fc-name{
  font-size:.78rem;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:115px;line-height:1.2;
}
.rs-fc-count{font-size:.68rem;color:rgba(255,255,255,.72);font-weight:500}

 
.rs-fc-badge{
  position:absolute;top:.42rem;right:1.8rem;
  background:rgba(255,255,255,.22);color:#fff;
  font-size:.58rem;font-weight:800;padding:.05rem .35rem;
  border-radius:var(--r-full);line-height:1.5;
}
 
.rs-fc-popular{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,#f59e0b,#ef4444);
  color:#fff;font-size:.5rem;font-weight:800;
  padding:.07rem .45rem;border-radius:0 0 var(--r-md) var(--r-md);
  text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;z-index:2;
}
 
.rs-fc-kebab{
  position:absolute;top:.35rem;right:.3rem;
  width:20px;height:20px;border-radius:var(--r-md);
  background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;color:rgba(255,255,255,.85);
  font-size:.8rem;font-weight:900;line-height:1;
  opacity:0;transition:opacity .15s;
}
.rs-folder-card:hover .rs-fc-kebab{opacity:1}

 
.rs-fc-ctx{
  position:absolute;top:calc(100% + .25rem);right:0;
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  z-index:500;min-width:168px;overflow:hidden;
  display:none;animation:rsFcMenuIn .12s ease;
}
.rs-fc-ctx.open{display:block}
@keyframes rsFcMenuIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.rs-fc-ctx-label{
  padding:.55rem .875rem .3rem;
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted-fg);opacity:.75;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:190px;
}
.rs-fc-ctx-item{
  display:flex;align-items:center;gap:.5rem;
  padding:.575rem .875rem;
  font-size:.8rem;font-weight:500;color:var(--fg);
  cursor:pointer;transition:background .1s;
}
.rs-fc-ctx-item:hover{background:var(--muted)}
.rs-fc-ctx-item svg{width:14px;height:14px;flex-shrink:0;color:var(--muted-fg)}
.rs-fc-ctx-item.danger{color:#ef4444}
.rs-fc-ctx-item.danger:hover{background:rgba(239,68,68,.07)}
.rs-fc-ctx-item.danger svg{color:#ef4444}
.rs-fc-ctx-sep{height:1px;background:var(--border);margin:.2rem 0}

 
.rs-folder-new{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.375rem;min-width:78px;padding:.875rem .75rem;
  border-radius:var(--r-xl);cursor:pointer;
  border:2px dashed var(--border);background:transparent;
  transition:all .15s;font-size:.75rem;font-weight:700;color:var(--muted-fg);
}
.rs-folder-new:hover{border-color:var(--primary);color:var(--primary);background:rgba(124,58,237,.04)}

 
.rs-cfbar{
  display:none;align-items:center;gap:.75rem;
  padding:.625rem 1rem;background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm);margin-top:.875rem;
}
.rs-cfbar.visible{display:flex}
.rs-cfbar-icon{width:30px;height:30px;border-radius:var(--r-md);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff}
.rs-cfbar-name{font-size:.875rem;font-weight:700;color:var(--fg)}
.rs-cfbar-count{font-size:.75rem;color:var(--muted-fg);margin-left:.25rem}
.rs-cfbar-actions{display:flex;gap:.5rem;margin-left:auto;flex-wrap:wrap}

 
.rs-fmodal-ov{
  display:none;position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,.6);backdrop-filter:blur(5px);
  align-items:center;justify-content:center;
}
.rs-fmodal-ov.active{display:flex}
.rs-fmodal{
  background:var(--card);border-radius:var(--r-2xl);
  width:min(430px,92vw);
  box-shadow:0 24px 72px rgba(0,0,0,.28);overflow:hidden;
  animation:rsFmodalIn .18s ease;
}
@keyframes rsFmodalIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.rs-fmodal-head{background:#7c3aed;padding:1.25rem 1.5rem}
.rs-fmodal-head-brand{display:flex;align-items:center;gap:.625rem}
.rs-fmodal-head-ico{
  width:36px;height:36px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
}
.rs-fmodal-head-name{font-size:.975rem;font-weight:800;color:#fff}
.rs-fmodal-head-name span{opacity:.72}
.rs-fmodal-head-sub{font-size:.72rem;color:rgba(255,255,255,.72);margin-top:.2rem}
.rs-fmodal-body{padding:1.25rem 1.5rem 1.5rem}
.rs-fmodal-lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-fg);margin-bottom:.4rem}
.rs-fmodal-input{
  width:100%;padding:.7rem 1rem;background:var(--input-bg);
  border:1.5px solid var(--border);border-radius:var(--r-lg);
  font-size:.9375rem;font-weight:600;color:var(--fg);outline:none;transition:border-color .15s;
}
.rs-fmodal-input:focus{border-color:var(--primary)}
.rs-fmodal-swatches{display:flex;gap:.5rem;flex-wrap:wrap;margin:.625rem 0 1rem}
.rs-fmodal-swatch{
  width:34px;height:34px;border-radius:var(--r-lg);cursor:pointer;
  border:2.5px solid transparent;transition:transform .12s,box-shadow .12s;flex-shrink:0;
}
.rs-fmodal-swatch:hover{transform:scale(1.1)}
.rs-fmodal-swatch.active{
  transform:scale(1.12);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--fg);
}
.rs-fmodal-preview{
  display:flex;align-items:center;gap:.75rem;
  padding:.8rem 1rem;border-radius:var(--r-lg);
  margin-bottom:1rem;
}
.rs-fmodal-preview-icon{
  width:36px;height:36px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
}
.rs-fmodal-preview-name{font-size:.9rem;font-weight:700;color:#fff}
.rs-fmodal-foot{display:flex;gap:.625rem;justify-content:flex-end;padding-top:.875rem;border-top:1.5px solid var(--border);margin-top:.25rem}

 
.rs-pick-ov{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.58);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;
}
.rs-pick-ov.active{display:flex}
.rs-pick-modal{
  background:var(--card);border-radius:var(--r-2xl);
  width:min(400px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;
  animation:rsFmodalIn .18s ease;
}
.rs-pick-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.975rem 1.25rem;border-bottom:1.5px solid var(--border);
}
.rs-pick-head h3{font-size:.975rem;font-weight:700;margin:0;color:var(--fg)}
.rs-pick-mode-pills{display:flex;gap:.375rem;background:var(--muted);border-radius:var(--r-full);padding:.25rem}
.rs-pick-pill{
  padding:.25rem .75rem;border-radius:var(--r-full);font-size:.72rem;font-weight:700;
  cursor:pointer;border:none;background:transparent;color:var(--muted-fg);transition:all .12s;
}
.rs-pick-pill.active{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}
.rs-pick-body{padding:1rem 1.25rem 1.25rem}
.rs-pick-list{display:flex;flex-direction:column;gap:.4rem;max-height:250px;overflow-y:auto}
.rs-pick-row{
  display:flex;align-items:center;gap:.75rem;padding:.65rem .875rem;
  border-radius:var(--r-lg);border:1.5px solid var(--border);cursor:pointer;
  transition:border-color .12s,background .12s;
}
.rs-pick-row:hover{border-color:var(--primary);background:rgba(124,58,237,.04)}
.rs-pick-row.active{border-color:var(--primary);background:rgba(124,58,237,.08)}
.rs-pick-dot{width:24px;height:24px;border-radius:var(--r-md);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff}
.rs-pick-row-name{font-size:.85rem;font-weight:600;color:var(--fg);flex:1}
.rs-pick-row-ct{font-size:.68rem;color:var(--muted-fg)}
.rs-pick-foot{display:flex;gap:.5rem;justify-content:flex-end;padding-top:.875rem;border-top:1.5px solid var(--border);margin-top:.5rem}

 
.rs-cfa-btn{
  position:relative;display:inline-flex;align-items:center;gap:.32rem;
  padding:.3rem .6rem;border-radius:var(--r-full);
  font-size:.68rem;font-weight:700;cursor:pointer;border:none;
  background:rgba(255,255,255,.15);color:rgba(255,255,255,.92);
  transition:background .12s;white-space:nowrap;flex-shrink:0;
}
.rs-cfa-btn:hover{background:rgba(255,255,255,.28)}
.rs-cfa-btn.rs-cfa-in-folder{background:rgba(74,222,128,.22);color:#4ade80}
.rs-cfa-btn.rs-cfa-in-folder:hover{background:rgba(74,222,128,.35)}

 
.rs-cfp-popup{
  position:fixed;background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--r-xl);
  box-shadow:0 8px 30px rgba(0,0,0,.18);z-index:8000;
  min-width:180px;overflow:hidden;display:none;
  animation:rsFcMenuIn .12s ease;
}
.rs-cfp-popup.open{display:block}
.rs-cfp-head{padding:.6rem .875rem .4rem;font-size:.65rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-fg)}
.rs-cfp-item{
  display:flex;align-items:center;gap:.5rem;
  padding:.575rem .875rem;font-size:.8rem;font-weight:500;color:var(--fg);
  cursor:pointer;transition:background .1s;
}
.rs-cfp-item:hover{background:var(--muted)}
.rs-cfp-item svg{width:13px;height:13px;flex-shrink:0;color:var(--muted-fg)}
.rs-cfp-item.danger{color:#ef4444}
.rs-cfp-item.danger:hover{background:rgba(239,68,68,.07)}
.rs-cfp-item.danger svg{color:#ef4444}
.rs-cfp-sep{height:1px;background:var(--border);margin:.2rem 0}

 
.rs-fc-rename-input{
  background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.5);
  border-radius:var(--r-md);color:#fff;font-size:.78rem;font-weight:700;
  padding:.1rem .35rem;outline:none;width:90%;
}

 
.dark .rs-fmodal-input{background:#1a1a2e;border-color:#333;color:#e0e0e0}
.dark .rs-folder-section{background:#12121f;border-color:#2a2a3e}
.dark .rs-fmodal{background:#12121f}
.dark .rs-fmodal-body,.dark .rs-pick-body,.dark .rs-pick-modal{background:#12121f;color:#e0e0e0}
.dark .rs-fc-ctx,.dark .rs-cfp-popup{background:#1a1a2e;border-color:#2a2a3e}
.dark .rs-fc-ctx-item,.dark .rs-cfp-item{color:#e0e0e0}
.dark .rs-fc-ctx-item:hover,.dark .rs-cfp-item:hover{background:#2a2a3e}
.dark .rs-folder-card.rs-fc-plain{background:#1a1a2e;border-color:#2a2a3e}
.dark .rs-folder-card.rs-fc-plain .rs-fc-name{color:#e0e0e0}
.dark .rs-pick-row{background:#1a1a2e;border-color:#2a2a3e;color:#e0e0e0}
.dark .rs-folder-new{border-color:#2a2a3e;color:#666}
.dark .rs-cfbar{background:#1a1a2e;border-color:#2a2a3e}

 
.sd-fav-btn{
  background:none;border:none;cursor:pointer;padding:.2rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-full);transition:transform .15s;flex-shrink:0;
}
.sd-fav-btn:hover{transform:scale(1.28)}
.sd-fav-btn.active svg{filter:drop-shadow(0 0 4px rgba(250,204,21,.75))}

 
.rs-confirm-modal{
  background:var(--card);border-radius:var(--r-xl);
  box-shadow:0 24px 64px rgba(0,0,0,.22);
  width:min(92vw,360px);padding:2rem 2rem 1.75rem;
  display:flex;flex-direction:column;align-items:center;gap:.875rem;
  animation:rsFmIn .18s ease;
}
.rs-confirm-brand{
  display:flex;align-items:center;gap:.5rem;
  padding-bottom:.875rem;border-bottom:1.5px solid var(--border);width:100%;justify-content:center;
}
.rs-confirm-logo{width:32px;height:32px;border-radius:8px;flex-shrink:0}
.rs-confirm-appname{font-size:1.05rem;font-weight:800;color:var(--fg)}
.rs-confirm-appname span{color:var(--primary)}
.rs-confirm-icon-wrap{
  width:56px;height:56px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  margin-top:.25rem;
}
.rs-confirm-title{font-size:1.05rem;font-weight:800;color:var(--fg);text-align:center}
.rs-confirm-msg{font-size:.86rem;color:var(--muted-fg);text-align:center;line-height:1.6;margin:0}
.rs-confirm-foot{
  display:flex;gap:.75rem;width:100%;justify-content:center;
  padding-top:.75rem;border-top:1.5px solid var(--border);margin-top:.25rem;
}
.dark .rs-confirm-modal{background:#12121f;border:1.5px solid #2a2a3e}