/* ============================================================
   SXMeets Mobile — Content Studio (WS-C)
   ------------------------------------------------------------
   Extracted from frontend/sxmeets/mockups/content-studio-max.html
   Per-OS skinning via body[data-os="<slug>"] (tokens.css) +
   Studio-specific CSS variables defined below per OS.

   Required:
     _shared/tokens.css
     _shared/motion.css     (sx-shimmer, sx-rise, sx-pulse keyframes)
   ============================================================ */

/* ============================================================
   Per-OS Studio palette (CSS variables consumed by .cs-* below)
   Defaults match Wellness (sage/sand). Each OS overrides.
   ============================================================ */

.cs-root{
  /* Studio palette — overridden per OS via body[data-os="…"] .cs-root */
  --cs-accent:        #7BC8A4;
  --cs-accent-2:      #D4B896;
  --cs-accent-bg:     rgba(123,200,164,.18);
  --cs-accent-bg-2:   rgba(212,184,150,.06);
  --cs-accent-bd:     rgba(123,200,164,.25);
  --cs-accent-glow:   rgba(123,200,164,.15);
  --cs-bg:            radial-gradient(ellipse at 20% 0%, #0E2018 0%, #080B0A 70%);
  --cs-bloom-1:       rgba(212,184,150,.10);
  --cs-bloom-2:       rgba(123,200,164,.14);
  --cs-ink:           #EEF2EF;
  --cs-ink-muted:     rgba(255,255,255,.55);
  --cs-ink-dim:       rgba(255,255,255,.35);
  --cs-display:       'DM Serif Display', 'Instrument Serif', 'Fraunces', serif;
  --cs-mono:          'JetBrains Mono', ui-monospace, monospace;
  --cs-cta-ink:       #061009;
}

body[data-os="wellness"] .cs-root,
body[data-os="wellness-spa"] .cs-root{
  --cs-accent:        #7BC8A4;
  --cs-accent-2:      #D4B896;
  --cs-accent-bg:     rgba(123,200,164,.18);
  --cs-accent-bd:     rgba(123,200,164,.25);
  --cs-accent-glow:   rgba(123,200,164,.15);
  --cs-bg:            radial-gradient(ellipse at 20% 0%, #0E2018 0%, #080B0A 70%);
  --cs-bloom-1:       rgba(212,184,150,.10);
  --cs-bloom-2:       rgba(123,200,164,.14);
  --cs-cta-ink:       #061009;
}

body[data-os="services"] .cs-root{
  --cs-accent:        #FF8C42;
  --cs-accent-2:      #9B5DE5;
  --cs-accent-bg:     rgba(255,140,66,.18);
  --cs-accent-bd:     rgba(255,140,66,.28);
  --cs-accent-glow:   rgba(255,140,66,.20);
  --cs-bg:            radial-gradient(ellipse at 80% 0%, #1F1A2B 0%, #0A0810 70%);
  --cs-bloom-1:       rgba(255,140,66,.12);
  --cs-bloom-2:       rgba(155,93,229,.10);
  --cs-cta-ink:       #0E0B14;
}

body[data-os="transitos"] .cs-root,
body[data-os="transit"] .cs-root,
body[data-os="taxi"] .cs-root{
  --cs-accent:        #D4A574;
  --cs-accent-2:      #E8B04A;
  --cs-accent-bg:     rgba(212,165,116,.18);
  --cs-accent-bd:     rgba(212,165,116,.28);
  --cs-accent-glow:   rgba(212,165,116,.20);
  --cs-bg:            radial-gradient(ellipse at 50% 0%, #2A2219 0%, #0D0A08 70%);
  --cs-bloom-1:       rgba(212,165,116,.18);
  --cs-bloom-2:       rgba(201,123,94,.12);
  --cs-cta-ink:       #14100D;
}

body[data-os="restos"] .cs-root{
  --cs-accent:        #F5C842;
  --cs-accent-2:      #E5631F;
  --cs-accent-bg:     rgba(245,200,66,.16);
  --cs-accent-bd:     rgba(245,200,66,.28);
  --cs-cta-ink:       #1A0F00;
}

body[data-os="sports"] .cs-root{
  --cs-accent:        #FF4D3D;
  --cs-accent-2:      #00C2A8;
  --cs-accent-bg:     rgba(255,77,61,.16);
  --cs-accent-bd:     rgba(255,77,61,.28);
  --cs-cta-ink:       #FFFFFF;
}

body[data-os="culture"] .cs-root{
  --cs-accent:        #9B5DE5;
  --cs-accent-2:      #F15BB5;
  --cs-accent-bg:     rgba(155,93,229,.16);
  --cs-accent-bd:     rgba(155,93,229,.30);
  --cs-cta-ink:       #FFFFFF;
}

body[data-os="beauty"] .cs-root{
  --cs-accent:        #EC4899;
  --cs-accent-2:      #FB7185;
  --cs-accent-bg:     rgba(236,72,153,.16);
  --cs-accent-bd:     rgba(236,72,153,.30);
  --cs-cta-ink:       #FFFFFF;
}

body[data-os="hospitality"] .cs-root,
body[data-os="property"] .cs-root,
body[data-os="resort"] .cs-root{
  --cs-accent:        #D4AF37;
  --cs-accent-2:      #0099D4;
  --cs-accent-bg:     rgba(212,175,55,.16);
  --cs-accent-bd:     rgba(212,175,55,.30);
  --cs-cta-ink:       #14100D;
}

body[data-os="terra"] .cs-root{
  --cs-accent:        #84CC16;
  --cs-accent-2:      #16A34A;
  --cs-accent-bg:     rgba(132,204,22,.16);
  --cs-accent-bd:     rgba(132,204,22,.30);
  --cs-cta-ink:       #0A1F00;
}

body[data-os="venue"] .cs-root{
  --cs-accent:        #8B5CF6;
  --cs-accent-2:      #F59E0B;
  --cs-accent-bg:     rgba(139,92,246,.16);
  --cs-accent-bd:     rgba(139,92,246,.30);
  --cs-cta-ink:       #FFFFFF;
}

body[data-os="pros"] .cs-root{
  --cs-accent:        #FB923C;
  --cs-accent-2:      #0EA5E9;
  --cs-accent-bg:     rgba(251,146,60,.16);
  --cs-accent-bd:     rgba(251,146,60,.30);
  --cs-cta-ink:       #1A0F00;
}

body[data-os="sales"] .cs-root{
  --cs-accent:        #EC4899;
  --cs-accent-2:      #6366F1;
  --cs-accent-bg:     rgba(236,72,153,.16);
  --cs-accent-bd:     rgba(236,72,153,.30);
  --cs-cta-ink:       #FFFFFF;
}

body[data-os="education"] .cs-root{
  --cs-accent:        #F59E0B;
  --cs-accent-2:      #2563EB;
  --cs-accent-bg:     rgba(245,158,11,.16);
  --cs-accent-bd:     rgba(245,158,11,.30);
  --cs-cta-ink:       #1A0F00;
}

/* ============================================================
   Root container + ambient backdrop
   ============================================================ */

.cs-root{
  /* Self-contained full-screen overlay — hidden until SXContentStudio.open().
     Was position:relative (inline flow), which rendered the studio ON TOP of
     the host OS as an always-visible extra section. */
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;                /* hidden by default; .cs-open reveals it */
  min-height: 100%;
  overflow-y: auto;
  background: var(--cs-bg);
  color: var(--cs-ink);
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  padding-bottom: 80px;  /* room for cs-nav */
}
.cs-root.cs-open{ display: block; }

.cs-root::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 80% 100%, var(--cs-bloom-1), transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 30%, var(--cs-bloom-2), transparent 60%);
  z-index: 0;
}

.cs-root > *{ position: relative; z-index: 2; }

/* ============================================================
   Sparkles — ambient floating particles
   ============================================================ */

.cs-sparkles{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.cs-spark{
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff;
  animation: cs-floatSpark 6s linear infinite;
}

.cs-spark:nth-child(1){ left: 15%; top: 30%; animation-delay: 0s; }
.cs-spark:nth-child(2){ left: 65%; top: 18%; animation-delay: -1.5s; width: 2px; height: 2px; }
.cs-spark:nth-child(3){ left: 80%; top: 55%; animation-delay: -3s; width: 4px; height: 4px; }
.cs-spark:nth-child(4){ left: 30%; top: 70%; animation-delay: -4.5s; width: 2px; height: 2px; }

@keyframes cs-floatSpark{
  0%   { transform: translateY(0);     opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-40px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .cs-spark{ animation: none; opacity: .5; }
}

/* ============================================================
   Header (cs-head)
   ============================================================ */

.cs-head{
  padding: 16px 20px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cs-back{
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  flex-shrink: 0;
}
.cs-back:active{ transform: scale(.95); }

.cs-title{ flex: 1; min-width: 0; }
.cs-title small{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cs-title small::before{
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.cs-title h2{
  font-family: var(--cs-display);
  font-size: 22px;
  letter-spacing: -.4px;
  margin-top: 2px;
  font-weight: 500;
}

.cs-pro{
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  background: var(--cs-accent-bg);
  color: var(--cs-accent);
  border: 1px solid var(--cs-accent-bd);
  flex-shrink: 0;
}
.cs-pro::before{ content: '✦'; font-size: 11px; }

/* ============================================================
   AI hero card (the plan card)
   ============================================================ */

.cs-ai-hero{
  margin: 16px 18px 0;
  padding: 20px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cs-accent-bg), rgba(255,255,255,.02));
  border: 1px solid var(--cs-accent-bd);
}

/* AI shimmer effect */
.cs-shimmer{ position: relative; overflow: hidden; }
.cs-shimmer::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.16) 50%, transparent 80%);
  animation: cs-shimmerSweep 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cs-shimmerSweep{
  0%        { transform: translateX(-100%); }
  45%, 100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce){
  .cs-shimmer::after{ animation: none; }
}

.cs-ai-eyebrow{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--cs-accent);
}
.cs-ai-eyebrow .cs-sp{
  width: 14px;
  height: 14px;
  background: conic-gradient(from 0deg, #7BC8A4, #FF8C42, #d4a574, #9B5DE5, #7BC8A4);
  border-radius: 50%;
  animation: cs-spin 4s linear infinite;
  flex-shrink: 0;
}
@keyframes cs-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .cs-ai-eyebrow .cs-sp{ animation: none; } }

.cs-ai-hero h3{
  font-family: var(--cs-display);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.6px;
  line-height: 1.05;
  margin-bottom: 8px;
}
.cs-ai-hero .cs-sub{
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
  color: rgba(255,255,255,.65);
}

/* ============================================================
   Week strip
   ============================================================ */

.cs-week{
  display: flex;
  gap: 6px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cs-week::-webkit-scrollbar{ display: none; }

.cs-day{
  flex-shrink: 0;
  padding: 8px 10px;
  border-radius: 11px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  min-width: 46px;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: transform .12s, background .15s;
}
.cs-day:active{ transform: scale(.94); }
.cs-day small{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  display: block;
}
.cs-day strong{
  font-family: var(--cs-display);
  font-size: 17px;
  display: block;
  font-weight: 400;
  margin-top: 2px;
  line-height: 1;
}
.cs-day.done{
  background: rgba(74,222,128,.15);
  border-color: rgba(74,222,128,.3);
}
.cs-day.done::after{
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ADE80;
}
.cs-day.now{
  background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
  border-color: var(--cs-accent);
  color: var(--cs-accent);
}
.cs-day.now::after{
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: cs-beat 1.4s infinite;
}
@keyframes cs-beat{ 50%{ box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce){ .cs-day.now::after{ animation: none; } }

/* ============================================================
   Section headings
   ============================================================ */

.cs-section{
  padding: 20px 22px 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.cs-section h4{
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}
.cs-section em{
  font-style: normal;
  font-family: var(--cs-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--cs-accent);
}

/* ============================================================
   Capture-now card
   ============================================================ */

.cs-capture{
  margin: 0 22px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: 12px;
}

.cs-capture.cs-pulse{
  border-color: var(--cs-accent);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  position: relative;
}
.cs-capture.cs-pulse::before{
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  border: 1px solid var(--cs-accent);
  animation: cs-cardPulse 2s ease-in-out infinite;
  pointer-events: none;
  opacity: .5;
}
@keyframes cs-cardPulse{
  0%, 100%{ opacity: .3; transform: scale(1); }
  50%     { opacity: .7; transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce){ .cs-capture.cs-pulse::before{ animation: none; } }

.cs-cap-icon{
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cs-cta-ink);
  background: var(--cs-accent);
  flex-shrink: 0;
  font-size: 18px;
}

.cs-cap-body{ flex: 1; min-width: 0; }
.cs-cap-body strong{
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--cs-ink);
}
.cs-cap-body small{
  display: block;
  font-size: 10.5px;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
  font-weight: 500;
}

.cs-cap-cta{
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--cs-cta-ink);
  background: var(--cs-accent);
  border: none;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: transform .1s;
}
.cs-cap-cta:active{ transform: scale(.94); }

/* ============================================================
   Asset grid (Library)
   ============================================================ */

.cs-assets{
  margin: 12px 22px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.cs-asset{
  aspect-ratio: 1;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(135deg, #3a3a3a, #1a1a1a);
  cursor: pointer;
  transition: transform .12s;
}
.cs-asset:active{ transform: scale(.95); }

.cs-asset.video::after{
  content: '▶';
  position: absolute;
  bottom: 4px;
  left: 5px;
  font-size: 9px;
  color: #fff;
  background: rgba(0,0,0,.7);
  border-radius: 3px;
  padding: 1px 4px;
}

.cs-asset.enhanced::before{
  content: '✦';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 11px;
  color: #fff;
  font-weight: 800;
  z-index: 2;
  text-shadow: 0 0 6px var(--cs-accent);
}

.cs-asset.enhancing::after{
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--cs-accent);
  border-radius: 10px;
  animation: cs-cardPulse 1.4s ease-in-out infinite;
}

.cs-asset.add{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(255,255,255,.25);
  background: rgba(255,255,255,.02);
  color: var(--cs-accent);
  font-size: 22px;
  font-weight: 300;
}

/* ============================================================
   Scheduled post preview
   ============================================================ */

.cs-post{
  margin: 14px 22px 0;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}

.cs-post-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cs-post-thumb{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cs-accent), var(--cs-accent-2));
}
.cs-post-thumb::after{
  content: '✦';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 0 4px var(--cs-accent);
}

.cs-post-meta{ flex: 1; min-width: 0; }
.cs-post-meta small{
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  gap: 5px;
}
.cs-post-meta strong{
  display: block;
  font-family: var(--cs-display);
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
  margin-top: 2px;
  letter-spacing: -.2px;
}

.cs-post-caption{
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.8);
  margin-bottom: 12px;
  font-style: italic;
  font-family: var(--cs-display);
}

.cs-post-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.cs-post-tag{
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 600;
  color: rgba(255,255,255,.7);
  font-family: var(--cs-mono);
}

.cs-post-foot{
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-plats{ display: flex; gap: 4px; }
.cs-plat{
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  font-size: 13px;
  transition: transform .1s, background .15s;
}
.cs-plat:active{ transform: scale(.9); }
.cs-plat.on{
  background: linear-gradient(135deg, #FE6B8B, #9B5DE5);
  color: #fff;
  border-color: transparent;
}
.cs-plat.tt.on{ background: #000; color: #fff; }
.cs-plat.fb.on{ background: #1877F2; color: #fff; }

.cs-post-when{
  margin-left: auto;
  font-family: var(--cs-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
}

.cs-post-publish{
  margin-top: 12px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--cs-cta-ink);
  background: var(--cs-accent);
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform .1s;
}
.cs-post-publish:active{ transform: scale(.98); }

/* ============================================================
   Powered-by attribution
   ============================================================ */

.cs-powered{
  margin: 12px 22px 0;
  padding: 10px 12px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(155,93,229,.10), rgba(155,93,229,.02));
  border: 1px solid rgba(155,93,229,.22);
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-powered strong{
  color: #9B5DE5;
  font-weight: 800;
  letter-spacing: .2px;
}

/* ============================================================
   Sub-nav (Plan / Shoot / Library / Publish / Stats)
   ============================================================ */

.cs-subnav{
  margin: 16px 22px 0;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.cs-subnav button{
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  border-radius: 10px;
  transition: background .15s, color .15s;
}
.cs-subnav button .cs-ic{ font-size: 17px; line-height: 1; }
.cs-subnav button.on{
  color: var(--cs-accent);
  background: var(--cs-accent-bg);
}

/* ============================================================
   Empty / loading states
   ============================================================ */

.cs-empty{
  margin: 24px 22px;
  padding: 32px 20px;
  text-align: center;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.10);
  color: rgba(255,255,255,.55);
}
.cs-empty .cs-empty-ic{
  font-size: 32px;
  margin-bottom: 12px;
  opacity: .6;
}
.cs-empty strong{
  display: block;
  font-family: var(--cs-display);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  color: var(--cs-ink);
  margin-bottom: 4px;
}
.cs-empty p{ font-size: 12px; line-height: 1.5; }

.cs-loading{
  margin: 24px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}
.cs-loading::before{
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid var(--cs-accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: cs-spin 1s linear infinite;
}

/* ============================================================
   Toast (small notification, not a full sheet)
   ============================================================ */

.cs-toast{
  position: fixed;
  bottom: 100px;
  left: 22px;
  right: 22px;
  z-index: 90;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--cs-accent);
  color: var(--cs-cta-ink);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .25s var(--ease-out, ease-out), opacity .25s;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.cs-toast.show{
  transform: translateY(0);
  opacity: 1;
}

/* ============================================================
   Bright-mode override (Caribbean sun-readable)
   ============================================================ */

body.bright .cs-root{
  --cs-ink: #0A1A2E;
  --cs-ink-muted: rgba(10,26,46,.65);
  --cs-ink-dim: rgba(10,26,46,.40);
  --cs-bg: linear-gradient(180deg, #FFFFFF 0%, #F5F8FC 100%);
}
body.bright .cs-root::before{ opacity: .35; }
body.bright .cs-back{
  background: rgba(10,26,46,.05);
  border-color: rgba(10,26,46,.10);
  color: rgba(10,26,46,.7);
}
body.bright .cs-title small,
body.bright .cs-section h4,
body.bright .cs-ai-hero .cs-sub,
body.bright .cs-cap-body small,
body.bright .cs-post-meta small,
body.bright .cs-post-caption,
body.bright .cs-post-tag,
body.bright .cs-post-when,
body.bright .cs-powered{ color: rgba(10,26,46,.65); }
body.bright .cs-day,
body.bright .cs-capture,
body.bright .cs-asset,
body.bright .cs-post,
body.bright .cs-subnav,
body.bright .cs-empty,
body.bright .cs-powered{
  background: rgba(255,255,255,.6);
  border-color: rgba(10,26,46,.08);
}
body.bright .cs-shimmer::after{
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.6) 50%, transparent 80%);
}