/* Passboard green theme: warm paper background, teal primary actions, soft product cards. */
:root {
  color-scheme: light;
  --bg: #f2ecdf;
  --card: #fffaf1;
  --ink: #26221d;
  --muted: #766d61;
  --line: #dfd1bd;
  --accent: #0f766e;
  --accent2: #d97706;
  --bubble: #d8f1e7;
  --recv: #eee2d2;
  --soft: #e8f3ec;
  --shadow: 0 24px 80px rgba(64, 44, 18, .12);
}

html { background: var(--bg); }

body {
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 216, 145, .72) 0, transparent 34rem),
    radial-gradient(circle at 100% 0%, rgba(174, 211, 198, .72) 0, transparent 34rem),
    linear-gradient(90deg, #f8dfad 0%, #fbf8ef 48%, #dcefe7 100%) !important;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(rgba(38, 34, 29, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 34, 29, .03) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 48% 10%, black 0, transparent 72%);
}

body > * { position: relative; z-index: 1; }
main { position: relative; }

.topbar {
  padding: 7px 7px 7px 13px;
  border: 1px solid rgba(223, 209, 189, .9);
  border-radius: 999px;
  background: rgba(255, 250, 241, .74);
  box-shadow: 0 16px 48px rgba(64, 44, 18, .09);
  backdrop-filter: blur(18px);
}

.brand { color: var(--ink); }
.brand-mark {
  border: 1px solid rgba(15, 118, 110, .16);
  background: var(--accent) !important;
  color: #fffaf1 !important;
  box-shadow: 0 12px 26px rgba(15, 118, 110, .22) !important;
}

.tabs {
  border-color: rgba(223, 209, 189, .84) !important;
  background: rgba(255, 255, 255, .48) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74) !important;
}

.tab {
  color: #796f62 !important;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.tab:hover { transform: translateY(-1px); color: var(--ink) !important; background: rgba(255, 250, 241, .82); }
.tab.active { color: #fffaf1 !important; background: var(--accent) !important; box-shadow: 0 10px 24px rgba(15, 118, 110, .18) !important; }

h1, h2, h3 { color: var(--ink); }

.card,
.feature,
.mini,
.download,
.demo-card,
.top,
.choice,
.product-stage,
.note-panel,
.work-row,
.template-card,
.final-cta {
  border-color: rgba(223, 209, 189, .92) !important;
  background: rgba(255, 250, 241, .9) !important;
  box-shadow: var(--shadow) !important;
}

.card,
.top,
.choice,
.product-stage,
.note-panel,
.work-row,
.template-card,
.final-cta {
  position: relative;
  overflow: hidden;
}

.card::before,
.top::before,
.choice::before,
.product-stage::before,
.note-panel::before,
.work-row::before,
.template-card::before,
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .58), transparent 40%),
    repeating-linear-gradient(0deg, rgba(38, 34, 29, .02) 0 1px, transparent 1px 10px);
}

.card > *, .top > *, .choice > *, .product-stage > *, .note-panel > *, .work-row > *, .template-card > *, .final-cta > * { position: relative; }

.announce,
.eyebrow,
.status,
.download-prompt,
.tip,
.transfer,
.join-link,
.logo-chip {
  border: 1px solid rgba(223, 209, 189, .78) !important;
  background: rgba(241, 230, 212, .7) !important;
}

.announce,
.eyebrow { color: var(--accent) !important; }
.announce-dot { background: var(--accent) !important; box-shadow: 0 0 0 5px rgba(15, 118, 110, .13) !important; }

.button,
button:not(.ghost):not(.secondary):not(.attach):not(.link-action):not(.details-toggle),
.download-button,
a:not(.tab):not(.secondary):not(#downloadLink):not(#lightboxDownload) {
  background: var(--accent) !important;
  color: #fffaf1 !important;
  box-shadow: 0 12px 28px rgba(15, 118, 110, .18) !important;
}

.secondary,
.ghost,
.button.secondary,
.download .button.secondary,
.download-button.secondary {
  border-color: rgba(15, 118, 110, .24) !important;
  background: rgba(15, 118, 110, .1) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

.details-toggle,
.link-action,
button.link-action {
  border-color: rgba(15, 118, 110, .22) !important;
  background: rgba(15, 118, 110, .1) !important;
  color: var(--accent) !important;
}

.status.online { background: rgba(15, 118, 110, .12) !important; color: var(--accent) !important; border-color: rgba(15, 118, 110, .24) !important; }
.dot { background: var(--accent2) !important; box-shadow: 0 0 0 4px rgba(217, 119, 6, .13) !important; }
.status.online .dot { background: var(--accent) !important; box-shadow: 0 0 0 4px rgba(15, 118, 110, .14) !important; }

.product-stage { background: rgba(255, 250, 241, .68) !important; }
.note-panel.enhanced { background: linear-gradient(135deg, #fffdf8, #eef8f2) !important; }
.work-visual { background: linear-gradient(145deg, #f1e6d4, #edf7f0) !important; }
.qr-card, .phone-card, .share-card { border: 1px solid rgba(223, 209, 189, .9); background: #fffaf1 !important; box-shadow: 0 18px 48px rgba(64, 44, 18, .1) !important; }
.qr-card span { background: var(--ink) !important; }
.share-item, .file-row, .file-chip, .file, .attachment, .download-prompt { border: 1px solid rgba(223, 209, 189, .68); background: rgba(245, 234, 216, .78) !important; }

.bubble, .msg { background: #eee2d2 !important; box-shadow: 0 8px 22px rgba(64, 44, 18, .06); }
.bubble.me, .msg.me { background: var(--bubble) !important; color: #15594f !important; }
.feature-icon, .file-icon, .attachment-icon, .download-icon, .icon { background: rgba(15, 118, 110, .12) !important; color: var(--accent) !important; }

.qr {
  border: 10px solid #fffdf7;
  box-shadow: 0 0 0 1px rgba(223, 209, 189, .74), 0 22px 46px rgba(64, 44, 18, .1);
}

.side h2, .chat-title, .download-title, .feature h2, .mini strong, .template-card strong { color: var(--ink); }
.messages { scrollbar-color: rgba(15, 118, 110, .32) transparent; }
input, input[type="text"] { border-color: rgba(223, 209, 189, .92) !important; background: rgba(255, 253, 248, .92) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82); }
.composer { background: rgba(255, 250, 241, .9) !important; backdrop-filter: blur(18px); }
.connection-details, .lightbox-card, .save-help { border-color: rgba(223, 209, 189, .92) !important; background: rgba(255, 250, 241, .96) !important; box-shadow: 0 24px 70px rgba(38, 34, 29, .16) !important; }
.lightbox { background: rgba(38, 34, 29, .7) !important; }

@media (max-width: 860px) {
  .topbar { border-radius: 28px; }
}

/* Homepage refinements: lighter typography and softer, illustration-led cards. */
.template-card {
  border: 0 !important;
  background: linear-gradient(145deg, rgba(255, 250, 241, .96), rgba(237, 247, 240, .72)) !important;
}
.template-card::before {
  opacity: .35;
}
.quote {
  border: 0 !important;
}
.final-cta {
  border: 0 !important;
}
.final-cta > * {
  position: relative;
  z-index: 1;
}

/* How it works: remove large frame cards, keep lightweight illustrations. */
.work-row {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.work-row::before {
  display: none !important;
}
.work-visual {
  box-shadow: none !important;
}
.qr-card,
.phone-card,
.share-card {
  border: 0 !important;
  background: rgba(255, 250, 241, .84) !important;
  box-shadow: 0 16px 42px rgba(64, 44, 18, .08) !important;
}


/* Typography: keep the interface medium-weight instead of heavy bold. */
.brand,
.tab,
.announce,
.eyebrow,
.button,
button,
.download-button,
.logo-chip,
.panel-kicker,
.section-eyebrow,
.file-icon,
.feature-icon,
.attachment-icon,
.download-icon,
.icon,
.name,
.file-title,
.attachment-title,
.download-title,
.chat-title,
.side h2,
.template-card strong,
.mini strong,
.feature h2,
.status,
.details-toggle,
.link-action,
.progress,
.transfer,
.lightbox-title {
  font-weight: 620 !important;
}

h1,
.section-heading,
.work-copy h3,
.quote blockquote,
.final-cta h2 {
  font-weight: 620 !important;
}

.lead,
.work-copy p,
.template-card span,
.feature p,
.mini span,
.download p,
.file-meta,
.attachment-meta,
.mode,
.subtitle {
  font-weight: 400 !important;
}

.scan-frame span {
  background: transparent !important;
}
.template-art.qr-mini i {
  background: var(--accent) !important;
}