OmniCard/mpuniapp/pages/owner/card/index.uvue

<template>
  <view class="card-home-page" :class="pageRtlClass" :style="pageTheme">
    <view class="stage">
      <view class="stage-glow"></view>

      <view class="stage-bar">
        <text class="stage-title">{{ pageTitleText }}</text>
        <view class="stage-refresh" @click="handleRefreshList">
          <text class="stage-refresh-text">{{ refreshActionText }}</text>
        </view>
      </view>

      <view class="stage-stand" @click="handleOpenActiveCardQrcode">
        <view class="showcase-qr-box">
          <image
            v-if="activeQrSvg !== '' && qrcodeIsImage"
            class="showcase-qr-img"
            :src="activeQrSvg"
            mode="aspectFit"
          />
          <rich-text
            v-else-if="activeQrSvg !== ''"
            class="showcase-qr-rich"
            :nodes="activeQrSvg"
          ></rich-text>
          <text v-else class="showcase-qr-empty">{{ activeQrEmptyText }}</text>
        </view>
        <view class="showcase-glow-guide" v-if="showScanGuide">
          <text class="showcase-guide-text">{{ scanGuidanceText }}</text>
        </view>
      </view>

      <view class="stage-identity" v-if="hasActiveCard">
        <text class="stage-name">{{ activeCardName }}</text>
        <text class="stage-role" v-if="activeCardRole !== ''">{{ activeCardRole }}</text>
        <text class="stage-status" :class="activeStatusClass">{{ activeCardStatus }}</text>
      </view>
    </view>

    <view class="sheet">
      <view class="sheet-grab">
        <view class="sheet-grab-bar"></view>
      </view>

      <scroll-view class="sheet-scroll" :scroll-y="true">
      <view class="sheet-body">
      <view class="link-row">
        <view class="link-copy">
          <text class="link-kicker">{{ linkLabelText }}</text>
          <text class="link-url">{{ displayLinkText }}</text>
        </view>
        <view
          class="link-action"
          :class="{ 'link-action-disabled': !canCopyLink }"
          @click="handleCopyLink"
        >
          <text class="link-action-text">{{ copyLabelText }}</text>
        </view>
      </view>

      <view v-if="quotaExceeded" class="quota-note">
        <text class="quota-note-text">{{ quotaNote }}</text>
      </view>

      <view v-if="showTools" class="tool-row">
        <view class="tool-cell" @click="handleEditActive">
          <text class="tool-label">{{ editLabel }}</text>
        </view>
        <view class="tool-cell" @click="handlePreviewActive">
          <text class="tool-label">{{ previewLabelText }}</text>
        </view>
        <view class="tool-cell" @click="handleCasesActive">
          <text class="tool-label">{{ casesActionLabel }}</text>
        </view>
        <view class="tool-cell" @click="handleArticlesActive">
          <text class="tool-label">{{ articlesActionLabel }}</text>
        </view>
      </view>

      <view class="sheet-head">
        <text class="sheet-title">{{ switchTitleText }}</text>
        <text class="sheet-meta">{{ cardCountSummary }}</text>
      </view>

      <view v-if="showSkeleton" class="card-home-skeleton">
        <view class="skeleton-card"></view>
        <view class="skeleton-card"></view>
      </view>

      <view v-else-if="state.errorMessage !== ''" class="card-home-feedback">
        <text class="feedback-title">{{ t('error') }}</text>
        <text class="feedback-desc">{{ state.errorMessage }}</text>
        <view class="feedback-retry-btn" @click="handleRefreshList">
          <text class="feedback-retry-text">{{ retryText }}</text>
        </view>
      </view>

      <view v-else-if="state.empty" class="card-home-feedback">
        <text class="feedback-title">{{ emptyTitle }}</text>
        <text class="feedback-desc">{{ emptyDescText }}</text>
      </view>

      <list-view v-else class="card-home-list" :style="listStyle">
        <list-item v-for="item in state.list" :key="item.id">
          <view
            class="card-row"
            :class="{ 'card-row-active': isActiveCard(item) }"
            @click="handleSelectCard(item)"
          >
            <view class="card-active-indicator" v-if="isActiveCard(item)"></view>
            <view class="card-main">
              <view class="card-name-row">
                <text class="card-name">{{ item.name }}</text>
                <text
                  class="card-status-badge"
                  :class="'status-' + (item.status != null ? item.status : 'draft')"
                >
                  {{ statusLabelOf(item.status) }}
                </text>
              </view>
              <text v-if="formatField(item.title) !== ''" class="card-title">{{ formatField(item.title) }}</text>
              <text v-if="formatField(item.company) !== ''" class="card-company">{{ formatField(item.company) }}</text>
            </view>
          </view>
        </list-item>
      </list-view>
      <view class="sheet-spacer"></view>
      </view>
      </scroll-view>
    </view>

    <view class="card-home-cta-bar">
      <button
        class="primary-cta-btn"
        :class="{ 'primary-cta-btn-disabled': ctaBusy }"
        :disabled="ctaBusy"
        @click="handleRefresh"
      >
        <text class="primary-cta-btn-text">{{ ctaLabel }}</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="uts">
import { getCurrentLocale, getOmniText, isRtl } from '../../../common/locale.uts';
import { fetchCardQuota, fetchCardQrcodeSvg } from '../../../common/api.uts';
import { getTenantId } from '../../../common/request.uts';
import { utsLightColors, utsRadius, utsSpacing, utsTypography } from '../../../common/tokens.uts';
import {
  applyCardHomeOptions,
  createCardHomeState,
  formatCardField,
  openCardEdit,
  openCardPreview,
  openCardQrcode,
  pickShareCard,
  refreshCards,
  resolveCardHomeText,
  statusLabel,
  formatSvgDataUri,
  CardHomeCopyKey,
  CardHomeItem,
  CardHomePageOptions,
} from './useCardHome.uts';

const pageTheme: Record<string, string> = {
  '--oc-primary': '#0B5CFF',
  '--oc-primary-soft': utsLightColors.primarySoft,
  '--oc-bg': '#F7F8FA',
  '--oc-surface': utsLightColors.surface,
  '--oc-border': '#E3E7ED',
  '--oc-text': '#101828',
  '--oc-text-2': '#667085',
  '--oc-success': utsLightColors.success,
  '--oc-warning': utsLightColors.warning,
  '--oc-error': utsLightColors.error,
  '--oc-radius-btn': utsRadius.button,
  '--oc-radius-card': utsRadius.card,
  '--oc-radius-modal': utsRadius.modal,
  '--oc-shadow': utsTypography.shadow,
  '--oc-font': utsTypography.fontFamily,
  '--oc-space-8': utsSpacing.space8,
  '--oc-space-12': utsSpacing.space12,
  '--oc-space-16': utsSpacing.space16,
  '--oc-space-24': utsSpacing.space24,
};

const state = reactive(createCardHomeState());
const booted = ref(false);

const activeCardId = ref<string | number>('');
const activeQrSvg = ref('');
const activeQrUrl = ref('');
const qrLoading = ref(false);
const quotaExceeded = ref(false);

const isZh = computed((): boolean => {
  return getCurrentLocale() === 'zh-CN';
});

const pageRtlClass = computed((): string => {
  return isRtl(getCurrentLocale()) ? 'card-home-rtl' : '';
});

const pageTitleText = computed((): string => {
  return resolveCardHomeText('title');
});

const switchTitleText = computed((): string => {
  return resolveCardHomeText('switchTitle');
});

const scanGuidanceText = computed((): string => {
  return resolveCardHomeText('scanGuide');
});

const activeQrEmptyText = computed((): string => {
  if (qrLoading.value || state.loading) {
    return resolveCardHomeText('loading');
  }
  return resolveCardHomeText('empty');
});

const linkLabelText = computed((): string => {
  return resolveCardHomeText('linkLabel');
});

const copyLabelText = computed((): string => {
  return resolveCardHomeText('copy');
});

const refreshActionText = computed((): string => {
  return resolveCardHomeText('refresh');
});

const editLabel = computed((): string => {
  return getOmniText(getCurrentLocale(), 'common.edit');
});

const previewLabelText = computed((): string => {
  return getOmniText(getCurrentLocale(), 'card.view_profile');
});

const casesActionLabel = computed((): string => {
  return resolveCardHomeText('cases');
});

const articlesActionLabel = computed((): string => {
  return resolveCardHomeText('articles');
});

const emptyTitle = computed((): string => {
  return resolveCardHomeText('emptyHeading');
});

const emptyDescText = computed((): string => {
  return resolveCardHomeText('emptyDesc');
});

const retryText = computed((): string => {
  return getOmniText(getCurrentLocale(), 'portal.retry');
});

const quotaNote = computed((): string => {
  return resolveCardHomeText('quotaExceeded');
});

const cardCountSummary = computed((): string => {
  const count = state.list.length;
  if (count <= 0) {
    return '';
  }
  if (isZh.value) {
    return '共 ' + String(count) + ' 张';
  }
  if (count === 1) {
    return '1 card';
  }
  return String(count) + ' cards';
});

const ctaBusy = computed((): boolean => {
  return !booted.value || (state.loading && state.list.length === 0);
});

const ctaLabel = computed((): string => {
  if (ctaBusy.value) {
    return resolveCardHomeText('loading');
  }
  if (pickShareCard(state.list) != null) {
    return resolveCardHomeText('poster');
  }
  return resolveCardHomeText('refresh');
});

const activeCard = computed((): CardHomeItem | null => {
  if (state.list.length === 0) {
    return null;
  }
  if (activeCardId.value !== '') {
    for (let i = 0; i < state.list.length; i++) {
      const it = state.list[i];
      if (it.id != null && it.id === activeCardId.value) {
        return it;
      }
      if (it.slug != null && it.slug === activeCardId.value) {
        return it;
      }
    }
  }
  return pickShareCard(state.list);
});

const hasActiveCard = computed((): boolean => {
  return activeCard.value != null;
});

const showScanGuide = computed((): boolean => {
  return activeQrSvg.value !== '';
});

const showTools = computed((): boolean => {
  return state.errorMessage === '' && activeCard.value != null;
});

const listStyle = computed((): string => {
  const count = state.list.length > 0 ? state.list.length : 1;
  return 'height:' + String(count * 96) + 'px';
});

const showSkeleton = computed((): boolean => {
  if (state.errorMessage !== '') {
    return false;
  }
  if (!booted.value) {
    return state.list.length === 0;
  }
  return state.loading && state.list.length === 0;
});

const activeCardName = computed((): string => {
  if (activeCard.value == null) {
    return '';
  }
  return activeCard.value!.name;
});

const activeCardRole = computed((): string => {
  if (activeCard.value == null) {
    return '';
  }
  const title = formatCardField(activeCard.value!.title);
  const company = formatCardField(activeCard.value!.company);
  if (title !== '' && company !== '') {
    return title + ' · ' + company;
  }
  if (title !== '') {
    return title;
  }
  return company;
});

const activeCardStatus = computed((): string => {
  if (activeCard.value == null) {
    return '';
  }
  return statusLabel(activeCard.value!.status);
});

const activeStatusClass = computed((): string => {
  if (activeCard.value == null || activeCard.value!.status == null) {
    return 'status-draft';
  }
  return 'status-' + activeCard.value!.status;
});

const qrcodeIsImage = computed((): boolean => {
  const raw = activeQrSvg.value.trim();
  return raw.indexOf('http://') === 0 || raw.indexOf('https://') === 0 || raw.indexOf('data:') === 0;
});

const currentDisplayLink = computed((): string => {
  if (activeQrUrl.value !== '') {
    return activeQrUrl.value;
  }
  const card = activeCard.value;
  if (card == null) {
    return '';
  }
  if (card.slug != null && card.slug !== '') {
    return `https://omnicard.ai/c/${card.slug}`;
  }
  if (card.id != null) {
    return `https://omnicard.ai/c/${card.id}`;
  }
  return '';
});

const canCopyLink = computed((): boolean => {
  return currentDisplayLink.value !== '';
});

const displayLinkText = computed((): string => {
  if (currentDisplayLink.value !== '') {
    return currentDisplayLink.value;
  }
  return resolveCardHomeText('linkEmpty');
});

function t(key: CardHomeCopyKey): string {
  return resolveCardHomeText(key);
}

function formatField(value: string | null | undefined): string {
  return formatCardField(value);
}

function statusLabelOf(status: string | null | undefined): string {
  return statusLabel(status);
}

function isActiveCard(item: CardHomeItem): boolean {
  if (activeCard.value == null) {
    return false;
  }
  if (item.id != null && activeCard.value!.id != null) {
    return item.id === activeCard.value!.id;
  }
  if (item.slug != null && activeCard.value!.slug != null) {
    return item.slug === activeCard.value!.slug;
  }
  return false;
}

async function updateActiveCardQr(card: CardHomeItem | null): Promise<void> {
  if (card == null) {
    activeQrSvg.value = '';
    activeQrUrl.value = '';
    return;
  }
  const key = card.slug != null && card.slug !== '' ? card.slug! : (card.id != null ? String(card.id) : '');
  if (key === '') {
    activeQrSvg.value = '';
    activeQrUrl.value = '';
    return;
  }
  try {
    qrLoading.value = true;
    const res = await fetchCardQrcodeSvg(key);
    if (res != null) {
      activeQrSvg.value = res.svg != null ? formatSvgDataUri(res.svg) : '';
      activeQrUrl.value = res.url != null ? res.url : '';
    } else {
      activeQrSvg.value = '';
      activeQrUrl.value = '';
    }
  } catch (_e) {
    activeQrSvg.value = '';
    activeQrUrl.value = '';
  } finally {
    qrLoading.value = false;
  }
}

function handleSelectCard(item: CardHomeItem): void {
  if (item.id != null) {
    activeCardId.value = item.id!;
  } else if (item.slug != null) {
    activeCardId.value = item.slug!;
  }
  updateActiveCardQr(item);
}

function handleCopyLink(): void {
  const url = currentDisplayLink.value;
  if (url === '') {
    return;
  }
  uni.setClipboardData({
    data: url,
    success: () => {
      uni.showToast({
        title: getOmniText(getCurrentLocale(), 'portal.copied_link'),
        icon: 'none',
      });
    },
  });
}

function handleOpenCases(item: CardHomeItem): void {
  if (item.id == null) {
    return;
  }
  uni.navigateTo({
    url: `/pages/owner/card/cases?cardId=${item.id}`,
  });
}

function handleOpenArticles(item: CardHomeItem): void {
  if (item.id == null) {
    return;
  }
  uni.navigateTo({
    url: `/pages/owner/card/articles?cardId=${item.id}`,
  });
}

function handleOpenEdit(item: CardHomeItem): void {
  if (item.id == null) {
    return;
  }
  openCardEdit(item.id);
}

function handleOpenPreview(item: CardHomeItem): void {
  openCardPreview(item);
}

function handleEditActive(): void {
  if (activeCard.value == null) {
    return;
  }
  handleOpenEdit(activeCard.value!);
}

function handlePreviewActive(): void {
  if (activeCard.value == null) {
    return;
  }
  handleOpenPreview(activeCard.value!);
}

function handleCasesActive(): void {
  if (activeCard.value == null) {
    return;
  }
  handleOpenCases(activeCard.value!);
}

function handleArticlesActive(): void {
  if (activeCard.value == null) {
    return;
  }
  handleOpenArticles(activeCard.value!);
}

function handleOpenActiveCardQrcode(): void {
  const current = activeCard.value != null ? activeCard.value : pickShareCard(state.list);
  if (current != null) {
    openCardQrcode(current);
  }
}

async function handleRefreshList(): Promise<void> {
  const wasLoading = state.loading;
  const res = await refreshCards(state);
  if (wasLoading) {
    return;
  }
  booted.value = true;
  const picked = pickShareCard(res.list);
  if (picked != null) {
    if (activeCardId.value === '') {
      handleSelectCard(picked);
    } else {
      let found = false;
      for (let i = 0; i < res.list.length; i++) {
        const item = res.list[i];
        if (item.id === activeCardId.value || item.slug === activeCardId.value) {
          found = true;
          updateActiveCardQr(item);
          break;
        }
      }
      if (!found) {
        handleSelectCard(picked);
      }
    }
  } else {
    updateActiveCardQr(null);
  }
}

async function handleRefresh(): Promise<void> {
  const current = activeCard.value != null ? activeCard.value : pickShareCard(state.list);
  if (current != null) {
    openCardQrcode(current);
    return;
  }
  await handleRefreshList();
}

async function applyQuotaHint(): Promise<void> {
  try {
    const tenantId = getTenantId();
    const quota = await fetchCardQuota(tenantId !== '' ? tenantId : 1);
    quotaExceeded.value = quota.exceeded === true;
  } catch (_e) {}
}

onLoad((options: CardHomePageOptions) => {
  applyCardHomeOptions(state, options);
  handleRefreshList();
  applyQuotaHint();
});

onShow(() => {
  handleRefreshList();
  applyQuotaHint();
});
</script>

<style scoped>
.card-home-page {
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-width: 480px;
  height: 100vh;
  max-height: 100vh;
  margin-inline: auto;
  background-color: var(--oc-bg, #F7F8FA);
  font-family: var(--oc-font, Inter, "Noto Sans SC", sans-serif);
  position: relative;
  overflow: hidden;
}

.card-home-rtl {
  direction: rtl;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-block-start: calc(8px + env(safe-area-inset-top, 0px));
  padding-inline: 20px;
  padding-block-end: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #0B63E5 0%, #0088FF 100%);
  position: relative;
}

.stage-glow {
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 72px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.stage-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  z-index: 2;
}

.stage-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: #FFFFFF;
}

.stage-refresh {
  min-width: 44px;
  min-height: 44px;
  padding-inline: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-refresh:active {
  opacity: 0.72;
}

.stage-refresh-text {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.stage-stand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-start: 4px;
  padding: 16px 16px 12px;
  background-color: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(16, 24, 40, 0.16);
  z-index: 2;
}

.stage-stand:active {
  opacity: 0.94;
}

.showcase-qr-box {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
}

.showcase-qr-img,
.showcase-qr-rich {
  width: 160px;
  height: 160px;
}

.showcase-qr-rich {
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-qr-empty {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #64748B;
  text-align: center;
  padding-inline: 16px;
}

.showcase-glow-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 6px 12px;
  background-color: #EBF5FF;
  border-radius: 9999px;
}

.showcase-guide-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #0B5CFF;
}

.stage-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-block-start: 8px;
  overflow: hidden;
  z-index: 2;
}

.stage-name {
  width: 100%;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: #FFFFFF;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-role {
  width: 100%;
  margin-block-start: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-status {
  margin-block-start: 8px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  background-color: #FFFFFF;
}

.stage-status.status-draft,
.stage-status.status-archived {
  color: #667085;
  background-color: #FFFFFF;
}

.sheet {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: -16px;
  padding-inline: 16px;
  padding-block-start: 8px;
  padding-block-end: calc(78px + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px));
  background-color: #FFFFFF;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.06);
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.sheet-grab {
  display: flex;
  justify-content: center;
  padding-block: 4px 12px;
}

.sheet-grab-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background-color: #E3E7ED;
}

.sheet-scroll {
  flex: 1;
  width: 100%;
  height: 0;
  min-height: 0;
}

.sheet-body {
  width: 100%;
  box-sizing: border-box;
}

.quota-note {
  margin-block-end: 12px;
  padding: 10px 12px;
  background-color: #FFF7ED;
  border-radius: 12px;
}

.quota-note-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #B54708;
}

.sheet-spacer {
  height: 16px;
}

.link-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-block-end: 12px;
  padding: 8px 8px 8px 14px;
  background-color: #F7F8FA;
  border: 1px solid #E3E7ED;
  border-radius: 16px;
}

.card-home-rtl .link-row {
  padding: 8px 14px 8px 8px;
}

.link-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-inline-end: 8px;
}

.link-kicker {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #667085;
}

.link-url {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #101828;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-action {
  min-width: 64px;
  min-height: 44px;
  padding-inline: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EBF5FF;
  border-radius: 9999px;
}

.link-action:active {
  opacity: 0.72;
}

.link-action-disabled {
  opacity: 0.4;
}

.link-action-text {
  font-size: 14px;
  font-weight: 700;
  color: #0B5CFF;
}

.tool-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-block-end: 16px;
}

.tool-cell {
  flex: 1;
  min-height: 48px;
  padding: 8px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 1px solid #E3E7ED;
  border-radius: 14px;
}

.tool-cell:active {
  background-color: #F7F8FA;
}

.tool-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #101828;
  text-align: center;
}

.sheet-head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  margin-block-end: 8px;
}

.sheet-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: #101828;
}

.sheet-meta {
  flex-shrink: 0;
  margin-inline-start: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #667085;
}

.card-home-skeleton {
  flex: 1;
}

.skeleton-card {
  height: 72px;
  margin-block-end: 8px;
  background-color: #E3E7ED;
  border-radius: 16px;
}

.card-home-feedback {
  flex: 1;
  margin-block-start: 8px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F7F8FA;
  border-radius: 16px;
}

.feedback-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: #101828;
  margin-block-end: 6px;
  text-align: center;
}

.feedback-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #667085;
  text-align: center;
}

.feedback-retry-btn {
  min-height: 44px;
  margin-block-start: 16px;
  padding-inline: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EBF5FF;
  border-radius: 9999px;
}

.feedback-retry-btn:active {
  opacity: 0.72;
}

.feedback-retry-text {
  font-size: 14px;
  font-weight: 600;
  color: #0B5CFF;
}

.card-home-list {
  width: 100%;
}

.card-row {
  min-height: 64px;
  margin-block-end: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #FFFFFF;
  border: 1px solid #E3E7ED;
  border-radius: 16px;
  position: relative;
}

.card-row:active {
  background-color: #F7F8FA;
}

.card-row-active {
  background-color: #F3F8FF;
  border-color: #0B5CFF;
}

.card-active-indicator {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background-color: #0B5CFF;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.card-home-rtl .card-active-indicator {
  left: auto;
  right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-inline-start: 6px;
}

.card-name-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.card-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #101828;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-status-badge {
  flex-shrink: 0;
  margin-inline-start: 8px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.status-published {
  color: #0B5CFF;
  background-color: #EBF5FF;
}

.status-draft {
  color: #667085;
  background-color: #F7F8FA;
}

.status-archived {
  color: #667085;
  background-color: #F7F8FA;
}

.stage-status.status-published {
  color: #0B5CFF;
  background-color: #FFFFFF;
}

.stage-status.status-draft,
.stage-status.status-archived {
  color: #667085;
  background-color: #FFFFFF;
}

.card-title,
.card-company {
  font-size: 13px;
  line-height: 1.4;
  color: #667085;
}

.card-home-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  max-width: 480px;
  margin-inline: auto;
  bottom: var(--window-bottom, 0px);
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background-color: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #E3E7ED;
  box-sizing: border-box;
  z-index: 100;
}

.primary-cta-btn {
  width: 100%;
  height: 48px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00A3FF 0%, #0B5CFF 100%);
  border-radius: 9999px;
  border-width: 0;
  box-shadow: 0 8px 20px rgba(0, 136, 255, 0.22);
}

.primary-cta-btn:active {
  opacity: 0.88;
}

.primary-cta-btn-disabled {
  background: #E3E7ED;
  box-shadow: none;
}

.primary-cta-btn-text {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
}

.primary-cta-btn-disabled .primary-cta-btn-text {
  color: #667085;
}

@media (prefers-reduced-motion: reduce) {
  .stage-stand,
  .stage-refresh,
  .link-action,
  .tool-cell,
  .card-row,
  .feedback-retry-btn,
  .primary-cta-btn {
    transition: none;
  }
}
</style>