/* =========================================================
   Coming Soon Layout
   Depends on: shared/brand.css
   ========================================================= */

  /* Primary gerbera red (brand signature) */
  --brand-gerbera: #8B1E2D;
  --brand-gerbera-hi: #A12A3A;

  /* Coordinating accents */
  --brand-rose: #B86A75;
  --brand-blush: #E8B7BE;
  --brand-gold: #C6A15B;
  --brand-botanical-green: #2F5D50;

  /* Neutrals / Surfaces */
  --color-bg: #0B0B10;
  --color-surface: #14141C;
  --color-border: rgba(255, 255, 255, 0.12);

  --color-text-primary: #F2F2F5;
  --color-text-muted: #B6B6C4;

  /* Typography */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system,
               Segoe UI, Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji";

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 750;

  /* Layout & Shape */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;

  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.35);
  --shadow-deep: 0 22px 60px rgba(0, 0, 0, 0.45);

  --max-width-content: 980px;

  /* Interaction */
  --focus-ring: 0 0 0 3px rgba(139, 30, 45, 0.35);
  --hover-bg: rgba(255, 255, 255, 0.06);
  --active-bg: rgba(255, 255, 255, 0.10);


/* ---------- Reset & Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-bg);
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Page Wrapper ---------- */

.sb-wrap {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px 20px;

  background:
    radial-gradient(
      1200px 800px at 18% 10%,
      rgba(139, 30, 45, 0.22),
      transparent 58%
    ),
    radial-gradient(
      900px 700px at 82% 28%,
      rgba(184, 106, 117, 0.16),
      transparent 60%
    ),
    radial-gradient(
      900px 700px at 30% 92%,
      rgba(198, 161, 91, 0.10),
      transparent 55%
    ),
    var(--color-bg);
}

/* ---------- Card ---------- */

.sb-card {
  width: 100%;
  max-width: var(--max-width-content);
  padding: 28px 26px;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.035)
  );

  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-deep);

  position: relative;
  overflow: hidden;
}

.sb-card::before {
  content: "";
  position: absolute;
  inset: -2px;

  background:
    radial-gradient(
      760px 280px at 24% 12%,
      rgba(139, 30, 45, 0.22),
      transparent 62%
    ),
    radial-gradient(
      640px 260px at 85% 28%,
      rgba(255, 255, 255, 0.08),
      transparent 60%
    );

  pointer-events: none;
}

/* ---------- Inner Layout ---------- */

.sb-inner {
  position: relative;
  display: grid;
  gap: 20px;
}

/* ---------- Header / Logo Row ---------- */

.sb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sb-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Gerbera mark (default: small) */
.sb-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;

  opacity: 0.95;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35));
}

/* Hero variant (Second Bloom) */
.sb-mark--hero {
  width: 96px;
  height: 96px;
  opacity: 0.98;
}

/* ---------- Brand Text ---------- */

.sb-brand {
  display: grid;
  gap: 4px;
}

.sb-title {
  margin: 0;
  font-size: 22px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.2px;
}

.sb-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ---------- Status Badge ---------- */

.sb-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;
  font-size: 13px;
  color: var(--color-text-muted);

  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: 999px;

  white-space: nowrap;
}

.sb-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;

  background: var(--brand-gerbera);
  box-shadow: 0 0 0 6px rgba(139, 30, 45, 0.18);
}

/* ---------- Content Grid ---------- */

.sb-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}

@media (max-width: 860px) {
  .sb-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Panels ---------- */

.sb-panel {
  padding: 16px;

  background: rgba(20, 20, 28, 0.55);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.sb-panel h2 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
}

/* ---------- Lists ---------- */

.sb-list {
  margin: 0;
  padding-left: 18px;

  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ---------- Links ---------- */

.sb-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.sb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  font-size: 14px;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);

  color: var(--color-text-primary);
}

.sb-link:hover {
  background: var(--hover-bg);
  border-color: rgba(232, 183, 190, 0.22);
}

/* ---------- Footer ---------- */

.sb-footer {
  margin-top: 6px;

  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;

  font-size: 12px;
  color: var(--color-text-muted);
}