/* app.css — inner app pages shared styles */

/* App navbar extends shared navbar */
.app-nav-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 40px;
  background: var(--teal-lo); border: 1px solid rgba(18,184,138,.2);
  font-size: 11px; font-weight: 700; color: var(--teal);
  letter-spacing: .04em;
}
.app-nav-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.3} }

/* Page header */
.app-page-header { margin-bottom: 32px }
.app-page-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--accent);
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.app-page-eyebrow::before { content:'';width:18px;height:2px;background:var(--accent);border-radius:2px }
.app-page-title {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(22px,3vw,32px); letter-spacing: -.02em;
  line-height: 1.1; margin-bottom: 8px;
}
.app-page-title em { color: var(--teal); font-style: normal }
.app-page-sub { font-size: 14px; color: var(--txt-dim); line-height: 1.6 }

/* Iframe-style module embed */
.module-frame {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
  min-height: 500px;
}

.coming-soon {
  padding: 80px 32px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--r-xl);
}
.cs-icon  { font-size: 48px; opacity: .3; margin-bottom: 16px }
.cs-title { font-family:'Syne',sans-serif;font-weight:700;font-size:22px;color:var(--txt-dim);margin-bottom:8px }
.cs-sub   { font-size:14px; color: var(--txt-faint) }