/* Shared ClipSpark AI presentation. Existing page behavior stays in its original scripts. */
:root {
  --red:#d92338;
  --red-dark:#b51c2e;
  --red-light:#d92338;
  --red-glow:rgba(217,35,56,.08);
  --white:#fff;
  --off-white:#f8f9fb;
  --light-gray:#e5e7eb;
  --mid-gray:#677182;
  --dark:#171b24;
  --dark-2:#242a35;
  --dark-3:#303744;
  --text:#242a35;
  --text-muted:#657080;
  --sidebar-w:240px;
}
body {
  background:#fff;
  color:var(--text);
  font-family:'DM Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::after,.grid-lines,.bg-grid,.bg-glow {
  display:none;
}
h1,h2,h3,.logo,.navbar-logo,.footer-logo,.footer-brand,.heading,.hero-title,.card-title,.page-title,.topbar-title,.section-title,.section-label-title,.featured-title,.locked-title,.locked-state-title,.cal-month-title,.modal-title,.confirm-title,.results-title,.stat-value,.plan-info-value,.upgrade-title,.price-amount,.user-avatar {
  font-family:'DM Sans',system-ui,sans-serif;
  letter-spacing:-.035em;
  font-weight:600;
}
.logo,.navbar-logo,.footer-logo,.footer-brand {
  color:var(--dark);
  font-size:22px;
  letter-spacing:-1px;
}
.logo span {
  color:var(--red);
}
.sidebar {
  background:#fff;
  border-right:1px solid var(--light-gray);
  padding:30px 18px;
  overflow-y:auto;
}
.sidebar .logo {
  margin:0 10px 40px;
  white-space:nowrap;
}
.nav-label {
  color:#737c89;
  letter-spacing:1.2px;
}
.nav-item {
  color:#596272;
  padding:12px;
  margin-bottom:4px;
}
.nav-item:hover {
  background:#f7f8fa;
  color:var(--dark);
}
.nav-item.active {
  background:#fff0f2;
  color:var(--red);
  font-weight:600;
}
.sidebar-footer {
  border-color:var(--light-gray);
}
.user-chip {
  background:#f8f9fb;
}
.user-name {
  color:var(--dark);
}
.user-plan,#trialCountdown {
  color:#667080;
}
.nav-pro-badge {
  background:#fff0f2;
  color:var(--red);
}
.topbar {
  background:#fff;
  backdrop-filter:none;
  padding:22px 40px;
}
.topbar-title {
  font-size:18px;
  letter-spacing:-.4px;
  white-space:normal;
}
.topbar-title span {
  color:inherit;
}
.main {
  background:#fafbfc;
}
.content {
  padding:36px 40px;
  max-width:1320px;
  margin:0 auto;
}
.page-title {
  font-size:32px;
}
.workspace-heading {
  margin:0 0 28px;
}
.workspace-heading h1 {
  font-size:30px;
  line-height:1.25;
  margin-bottom:8px;
}
.workspace-heading p {
  color:var(--text-muted);
  font-size:14px;
  line-height:1.6;
}
.stat-card,.generate-card,.section,.script-card,.template-card,.cal-grid-wrap,.card,.modal,.modal-content {
  border-color:var(--light-gray);
  box-shadow:0 2px 8px rgba(24,32,48,.025);
  border-radius:14px;
}
.stat-card {
  padding:24px;
}
.stat-value {
  font-size:32px;
  color:var(--dark);
}
.stat-label-sm,.stat-sub,.section-sub,.char-count,.credit-hint {
  color:var(--text-muted);
}
.generate-card-header,.section-header,.generate-card-footer {
  background:#fff;
}
.generate-card-title {
  font-size:18px;
  letter-spacing:-.3px;
}
.generate-card-body {
  padding-top:24px;
}
.results-title {
  font-size:18px;
}
.empty-state {
  background:#fff;
  border:1px dashed var(--light-gray);
  border-radius:14px;
}
.empty-title {
  color:var(--dark);
}
input:not([type=checkbox]):not([type=radio]),textarea,select {
  background:#fff;
  border-color:#dce0e6;
  border-radius:9px;
  color:var(--text);
  font-family:inherit;
}
input::placeholder,textarea::placeholder {
  color:#808896;
}
input:focus,textarea:focus,select:focus {
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-glow);
}
.field label,.form-group label {
  color:#515b6a;
  letter-spacing:.2px;
  text-transform:none;
  font-size:13px;
}
textarea {
  line-height:1.7;
}
.pill {
  border-radius:8px;
}
.pill.active {
  background:#fff0f2;
  color:var(--red);
  border-color:#f3bdc4;
}
button,[class*='btn-'],.btn {
  font-family:inherit;
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid #e88694;
  outline-offset:3px;
}
.btn,.btn-primary,.btn-generate,.btn-pay,.btn-submit,.btn-upgrade-cta,.btn-upgrade,.plan-cta-fill {
  box-shadow:none;
  border-radius:9px;
}
.btn:hover,.btn-primary:hover,.btn-generate:hover,.btn-pay:hover {
  box-shadow:none;
  transform:none;
}
.btn-logout {
  border-radius:8px;
  color:#596272;
}
.mobile-bottom-nav {
  background:#fff;
  border-top:1px solid var(--light-gray);
  backdrop-filter:none;
}
.mobile-bottom-nav a,.mobile-bottom-nav button {
  color:#667080;
}
.mobile-bottom-nav a.active {
  color:var(--red);
}
.upgrade-box,.featured-banner,.highlight-box {
  background:#fff7f8;
  border:1px solid #f2d7dc;
}
.upgrade-box::before,.featured-banner::before {
  display:none;
}
.upgrade-title,.price-amount,.featured-title {
  color:var(--dark);
}
.upgrade-desc,.upgrade-feature,.price-period,.paddle-note,.payment-disclaimer,.payment-disclaimer strong {
  color:#596272;
}
.payment-disclaimer {
  background:#fff;
  border-color:#eadde0;
}
.card {
  background:#fff;
  border:1px solid var(--light-gray);
  box-shadow:0 12px 50px rgba(24,32,48,.05);
}
.card-title,.heading {
  font-size:30px;
  line-height:1.25;
  color:var(--dark);
}
.card-sub,.subheading {
  color:var(--text-muted);
}
.sp-fab {
  animation:none!important;
  background:#fff!important;
  color:var(--dark)!important;
  border:1px solid var(--light-gray)!important;
  box-shadow:0 3px 12px #18203012!important;
}
.sp-panel,.sp-header,.sp-footer,.sp-response-box,.sp-topic-btn,.sp-textarea {
  background:#fff!important;
  color:var(--text)!important;
  border-color:var(--light-gray)!important;
}
.sp-header-title,.sp-response-box strong {
  color:var(--dark)!important;
}
.sp-header-sub,.sp-footer,.sp-optional-label {
  color:var(--text-muted)!important;
}
.sp-close,.sp-response-back {
  color:var(--text)!important;
}
@media(max-width:768px) {
  .content {
    padding:24px 18px 100px;
  }
  .topbar {
    padding:16px 18px;
    flex-wrap:wrap;
  }
  .topbar-title {
    font-size:16px;
  }
  .topbar-right {
    gap:8px;
  }
  .workspace-heading h1 {
    font-size:25px;
  }
  .stat-card {
    padding:16px;
  }
  .stat-value {
    font-size:26px;
  }
  .generate-card-header,.generate-card-body,.generate-card-footer {
    padding:20px;
  }
  .sidebar {
    width:240px;
  }
  .profile-grid {
    grid-template-columns:1fr;
  }
  .card {
    max-width:100%;
  }
  .sp-fab {
    bottom:84px!important;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto!important;
  }
  *,*::before,*::after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}
/* Match legacy selectors for mobile navigation and secondary surfaces. */
.mobile-bottom-nav li a,.mobile-bottom-nav li button {
  color:#667080;
}
.mobile-bottom-nav li a.active,.mobile-bottom-nav li a:hover,.mobile-bottom-nav li button:hover {
  color:var(--red);
}
.featured-desc,.featured-platform {
  color:#596272;
}
.featured-platform {
  background:#fff;
  border-color:#eadde0;
}
.template-card-preview,.preview-tiktok,.preview-instagram,.preview-twitter,.preview-linkedin,.preview-multi,.preview-viral,.modal-preview {
  background:#f8f9fb;
}
.template-card-preview .preview-text,.modal-preview-text {
  color:#424c5b;
}
.modal-preview-label {
  color:#687383;
}
.plan-badge-free {
  background:#f0f2f5;
  color:#596272;
}
.navbar {
  background:#fff;
  border-bottom:1px solid var(--light-gray);
  backdrop-filter:none;
}
.navbar-back,.navbar-back:hover {
  color:#596272;
}
.highlight-box .section-title {
  color:var(--dark);
}
.highlight-box .section-body {
  color:#596272;
}
.highlight-box::before {
  display:none;
}
.btn-use-featured,.btn-modal-use {
  box-shadow:none;
}
body::before {
  display:none;
}