i/client/src/style.css

/* client/src/style.css — EstateHub 设计令牌 + 全局样式 */
:root {
    --bg: #E8F4F9;
    --bg-soft: #F2F8FB;
    --card: #FFFFFF;
    --card-shadow: 0 2px 8px rgba(40, 80, 110, 0.06);
    --card-shadow-hover: 0 4px 16px rgba(40, 80, 110, 0.10);
    --text: #0F2233;
    --text-soft: #5A6F80;
    --text-mute: #8A9CAB;
    --line: #E1ECF2;
    --accent: #0F2233;
    --accent-soft: #1A3A55;
    --brand: #1E5B8A;
    --brand-soft: #2C7AB0;
    --green: #4DBA9A;
    --green-soft: #7CD0B5;
    --warn: #E8A33D;
    --danger: #D9695C;
    --info: #5AA8D8;
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 22px;
    --pill: 999px;
    --font: 'Outfit', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;

    /* === 响应式断点（4 档）===
     *   --bp-sm:  小屏手机 (< 480px)     → 极简布局
     *   --bp-md:  大屏手机/小平板 (480~767) → 紧凑布局
     *   --bp-lg:  平板 (768~1023)        → 双列/抽屉式
     *   --bp-xl:  桌面 (1024~1439)      → 标准布局
     *   --bp-2xl: 大屏桌面 (≥1440)       → 宽屏布局
     */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1440px;

    /* iOS 安全区 + Android 导航条适配 */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'ss01', 'cv11';
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* === 工具类 === */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500; border: 0; transition: all .15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-soft); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--card-shadow-hover); }
.card-pad { padding: 24px; }

.input, .select, .textarea {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: 14px; font-family: inherit; background: #fff; color: var(--text);
    transition: border .15s;
}
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--brand-soft); }
.textarea { resize: vertical; min-height: 80px; }
.label { display: block; font-size: 13px; color: var(--text-soft); margin-bottom: 6px; font-weight: 500; }

.pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--pill);
    font-size: 12px; font-weight: 500;
}
.pill-blue { background: #E0F0FA; color: var(--brand); }
.pill-green { background: #DEF4EC; color: #2E8A6B; }
.pill-warn { background: #FBEED9; color: #8B6510; }
.pill-danger { background: #FBE3DF; color: #A33B30; }
.pill-gray { background: #EEF2F5; color: var(--text-soft); }

.text-soft { color: var(--text-soft); }
.text-mute { color: var(--text-mute); }
.text-green { color: var(--green); }
.text-danger { color: var(--danger); }
.text-brand { color: var(--brand); }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.data th { font-weight: 500; color: var(--text-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
table.data tr:hover td { background: var(--bg-soft); }
table.data tr:last-child td { border-bottom: 0; }

/* 渐入动画 */
.fade-enter-active, .fade-leave-active { transition: opacity .2s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* === 移动端全局响应式工具 === */
.mobile-only { display: none; }
.desktop-only { display: inline-flex; }
@media (max-width: 767px) {
    .mobile-only { display: inline-flex; }
    .desktop-only { display: none; }
}

/* === 移动端表格兜底：未转 MobileCardList 的 <table> 横向滚动 === */
@media (max-width: 767px) {
    .card > table.data,
    .card-pad > table.data {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    table.data th, table.data td { font-size: 13px; padding: 8px 10px; }
    /* 标记移动端可滚动提示 */
    .card:has(> table.data[role="scroll"]) { position: relative; }
}

/* === 移动端全局输入优化（防 iOS 缩放） === */
@media (max-width: 767px) {
    input, select, textarea { font-size: 16px; }
    .input, .select, .textarea { padding: 10px 12px; }
}