/* ── Page wrap: use global but keep our padding ── */
    .page-wrap{max-width:1200px;margin:0 auto;padding:0 24px 48px;}

    /* ── Hero stats row ──────────────────────────────────── */
    .stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;margin-bottom:28px;animation:fadeUp .5s ease .05s both;}
    .stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px 24px;box-shadow:var(--shadow);display:flex;align-items:center;gap:16px;}
    .stat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .stat-icon.blue{background:#eff6ff;color:#2563eb;}
    .stat-icon.green{background:#f0fdf4;color:#16a34a;}
    .stat-icon.orange{background:#fff7ed;color:#ea580c;}
    .stat-num{font-size:28px;font-weight:700;color:var(--text);line-height:1;}
    .stat-lbl{font-size:12px;color:var(--text-3);margin-top:4px;}

    /* ── Activity board (copied from index.html) ─────────── */
    .activity-board {
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:16px; padding:20px;
      box-shadow:var(--shadow); margin-bottom:24px;
      animation:fadeUp .5s ease .08s both;
	  margin-top: 28px;
    }
    .act-board-header {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:18px;
    }
    .act-board-title {
      font-size:14px; font-weight:600; color:var(--text);
      display:flex; align-items:center; gap:8px;
    }
    .act-board-title svg { color:var(--blue); }
    .act-board-meta { font-size:12px; color:var(--text-3); }
    .act-chart-row {
      display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
    }
    .act-bars { display:flex; align-items:flex-end; gap:6px; height:64px; }
    .act-bar-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
    .act-bar-bg { width:100%; height:52px; background:var(--bg); border-radius:6px; position:relative; overflow:hidden; }
    .act-bar-fill {
      position:absolute; bottom:0; left:0; right:0;
      border-radius:6px 6px 0 0;
      background:var(--gradient);
      transition:height .6s ease;
    }
    .act-bar-label { font-size:10px; color:var(--text-3); font-family:'Space Mono',monospace; }
    .act-bar-count { font-size:10px; color:var(--text-2); font-weight:600; font-family:'Space Mono',monospace; margin-bottom:2px; }
    .act-today-card {
      background:var(--gradient-soft);
      border:1px solid var(--blue-border);
      border-radius:12px; padding:14px 18px;
      min-width:160px; text-align:center;
    }
    .act-today-label { font-size:11px; color:var(--text-3); margin-bottom:4px; }
    .act-today-count { font-family:'Space Mono',monospace; font-size:28px; font-weight:700; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .act-today-sub { font-size:11px; color:var(--text-2); margin-top:2px; }
    .act-type-row {
      display:flex; gap:8px; margin-top:14px; padding-top:14px;
      border-top:1px solid var(--border);
    }
    .act-type-chip {
      display:flex; align-items:center; gap:6px;
      padding:4px 12px; border-radius:100px;
      background:var(--bg); border:1px solid var(--border);
      font-size:12px; color:var(--text-2);
      transition:all .2s;
    }
    .act-type-chip:hover { border-color:var(--blue-border); color:var(--blue); background:var(--blue-pale); }
    .act-type-chip svg { color:var(--blue); }
    .act-type-chip .count { font-weight:700; font-family:'Space Mono',monospace; color:var(--text); font-size:13px; }
    .act-type-chip:hover .count { color:var(--blue); }

    /* ── Reminders ───────────────────────────────────────── */
    .reminders {
      margin-bottom: 24px;
      animation: fadeUp .5s ease .1s both;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
    }
    .reminder-card {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 18px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 14px; box-shadow: var(--shadow);
      transition: all .2s;
    }
    .reminder-card:hover { border-color: var(--border-h); box-shadow: var(--shadow-h); transform: translateY(-1px); }
    .reminder-card.urgent { border-color: var(--warn-border); background: var(--warn-bg); }
    .reminder-card.overdue { border-color: var(--error); background: rgba(248,81,73,.05); }
    .rem-avatar {
      width: 42px; height: 42px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 700; flex-shrink: 0; color: #fff;
    }
    .rem-info { flex: 1; min-width: 0; }
    .rem-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
    .rem-desc { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rem-countdown {
      display: flex; flex-direction: column; align-items: center;
      min-width: 56px; flex-shrink: 0;
    }
    .rem-days {
      font-family: 'Space Mono', monospace; font-size: 22px; font-weight: 700; line-height: 1;
    }
    .rem-days.urgent { color: var(--warning); }
    .rem-days.overdue { color: var(--error); }
    .rem-days.ok { color: var(--success); }
    .rem-label { font-size: 10px; color: var(--text-3); margin-top: 3px; }
    .rem-tag {
      font-size: 10px; padding: 2px 8px; border-radius: 100px;
      font-weight: 600; margin-top: 4px;
    }
    .rem-tag.overdue { background: rgba(248,81,73,.12); color: var(--error); }
    .rem-tag.urgent { background: rgba(210,153,34,.12); color: var(--warning); }
    .rem-tag.upcoming { background: var(--blue-pale); color: var(--blue); }
    .rem-empt { grid-Column: 1 / -1; text-align: center; padding: 40px; color: var(--text-3); font-size: 14px; }
    .rem-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .rem-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; font-size: 14px; transition: all .2s; }
    .rem- btn:hover { transform: scale(1.1); }
    .rem- btn.complete { color: var(--success); }
    .rem-btn.complete:hover { background: var(--success); color: #fff; border-color: var(--success); }
    .rem- btn.snooze { color: var(--warning); }
    .rem-btn.snooze:hover { background: var(--warning); color: #fff; border-color: var(--warning); }


    /* ── Contact cards ────────────────────────────────────── */
    .act-list{display:flex;flex-direction:column;gap:10px;}
    .act-card{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);transition:all .2s;cursor:pointer;}
    .act-card:hover{border-color:var(--border-h);box-shadow:var(--shadow-h);transform:translateY(-1px);}
    .act-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0;}
    .act-info{flex:1;min-width:0;}
    .act-header{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
    .act-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .act-title{font-size:12px;color:var(--text-2);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .act-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
    .act-tag{font-size:10px;padding:2px 8px;border-radius:100px;background:var(--blue-pale);color:var(--blue);border:1px solid var(--blue-border);font-weight:600;}
    .act-tag.orange{background:#fff7ed;color:#ea580c;border-color:#fed7aa;}
    .act-tag.green{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0;}
    .act-last{font-size:11px;color:var(--text-3);}
    .act-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
    .act-heat{display:flex;gap:3px;align-items:center;}
    .heat-dot{width:6px;height:6px;border-radius:50%;background:var(--border);}
    .heat-dot.on{background:var(--hot-text);}
    .act-btn{padding:7px 14px;border-radius:8px;background:var(--gradient);color:#fff;font-size:12px;font-weight:600;border:none;cursor:pointer;}
    .act-btn:hover{opacity:.9;}

    /* ── Timeline Filter ──────────────────────────────────── */
    .timeline-filter{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
    .tf-btn{padding:6px 14px;border-radius:20px;font-size:13px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-2);cursor:pointer;transition:all .2s;}
    .tf-btn:hover{background:var(--bg-primary);border-color:var(--blue-border);}
    .tf-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);}

    /* ── Timeline ────────────────────────────────────────── */
    .timeline{position:relative;padding-left:28px;}
    .timeline::before{content:'';position:absolute;left:8px;top:10px;bottom:10px;width:2px;background:var(--border);border-radius:1px;}
    .tl-item{position:relative;margin-bottom:18px;padding-left:20px;}
    .tl-item::before{content:'';position:absolute;left:-21px;top:5px;width:10px;height:10px;border-radius:50%;border:2px solid var(--blue);background:var(--bg-card);}
    .tl-date{font-family:'Space Mono',monospace;font-size:10px;color:var(--text-3);margin-bottom:6px;}
    .tl-content{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);}
    .tl-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
    .tl-type{font-size:11px;font-weight:600;padding:2px 8px;border-radius:100px;background:var(--blue-pale);color:var(--blue);border:1px solid var(--blue-border);}
    .tl-type.call{background:#fef9c3;color:#854d0e;border-color:#fde047;}
    .tl-type.meet{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0;}
    .tl-type.wechat{background:#eff6ff;color:#2563eb;border-color:#bfdbfe;}
    .tl-type.微信{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0;}
    .tl-type.note{background:#faf5ff;color:#7c3aed;border-color:#ddd6fe;}
    .tl-title{font-size:13px;font-weight:600;color:var(--text);}
    .tl-contact{font-size:12px;color:var(--text-2);margin-bottom:6px;}
    .tl-desc{font-size:12px;color:var(--text-2);line-height:1.6;}
    .tl-follow{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:11px;color:var(--blue);}

    /* ── Form ────────────────────────────────────────────── */
    .form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:var(--shadow);max-width:640px;}
    .form-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:24px;display:flex;align-items:center;gap:8px;}
    .form-row{margin-bottom:16px;}
    .form-label{font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:6px;display:block;text-transform:uppercase;letter-spacing:.05em;}
    .form-input{width:100%;padding:11px 16px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:14px;transition:all .2s;box-sizing:border-box;}
    .form-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
    .form-textarea{min-height:100px;resize:vertical;}
    .form-select{width:100%;padding:11px 16px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:14px;cursor:pointer;box-sizing:border-box;}
    .form-col{flex:1;min-width:0;}
    .form-row-inline{display:flex;gap:12px;margin-bottom:16px;}
    .form-row-inline .form-col{margin-bottom:0;}
    .form-row-inline .form-label{margin-bottom:6px;}
    /* Contact search */
    .contact-search-wrap{position:relative;}
    .contact-search-input{width:100%;padding:11px 16px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:14px;transition:all .2s;box-sizing:border-box;}
    .contact-search-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
    .contact-search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-h);max-height:260px;overflow-y:auto;z-index:200;display:none;}
    .contact-search-dropdown.show{display:block;}
    .csd-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .15s;}
    .csd-item:hover,.csd-item.active{background:var(--bg);}
    .csd-item.selected{background:rgba(37,99,235,.08);}
    .csd-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;}
    .csd-name{font-size:13px;font-weight:600;color:var(--text);}
    .csd-title{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .csd-empty{padding:14px;text-align:center;font-size:13px;color:var(--text-3);}
    .form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;}
    .btn{padding:10px 24px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;border:none;}
    .btn-primary{background:var(--gradient);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.25);}
    .btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(37,99,235,.35);}
    .btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border);}
    .btn-ghost:hover{border-color:var(--border-h);color:var(--text);}

    /* ── Floating add button ──────────────────────────────── */
    .add-btn-float{
      position:fixed;bottom:32px;right:32px;
      width:52px;height:52px;border-radius:50%;
      background:var(--gradient);color:#fff;border:none;
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 6px 20px rgba(37,99,235,.35);
      cursor:pointer;transition:all .2s;z-index:200;
      font-size:26px;line-height:1;
    }
    .add-btn-float:hover{transform:scale(1.1);box-shadow:0 8px 24px rgba(37,99,235,.45);}
    .add-btn-float:active{transform:scale(.95);}

    /* ── Modal ─────────────────────────────────────────────── */
    .modal-overlay{
      position:fixed;inset:0;background:rgba(0,0,0,.45);
      display:none;align-items:center;justify-content:center;
      z-index:1000;backdrop-filter:blur(3px);
    }
    .modal-overlay.open{display:flex;}
    .modal-box{
      background:var(--bg-card);border:1px solid var(--border);
      border-radius:18px;padding:32px;width:90%;max-width:580px;
      box-shadow:var(--shadow-h);animation:modalIn .25s ease;
      max-height:88vh;overflow-y:auto;
    }
    @keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:none;}}
    .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
    .modal-title{font-size:17px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;}
    .modal-title svg{color:var(--blue);}
    .modal-close{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:var(--text-2);font-size:18px;}
    .modal-close:hover{border-color:var(--border-h);color:var(--text);}

    /* ── Visit List table ─────────────────────────────────── */
    .visit-table-wrap {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow);
      overflow: hidden;
      animation: fadeUp .5s ease .2s both;
    }
    .visit-table {
      width: 100%;
      border-collapse: collapse;
    }
    .visit-table th {
      background: var(--bg);
      padding: 14px 16px;
      text-align: left;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-3);
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    .visit-table td {
      padding: 14px 16px;
      font-size: 14px;
      color: var(--text);
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .visit-table tr:last-child td { border-bottom: none; }
    .visit-table tr:hover td { background: var(--hover-bg); }
    .visit-table .visit-actor {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .visit-table .avatar-sm {
      width: 36px; height: 36px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 600; font-size: 13px;
      color: #fff;
      flex-shrink: 0;
    }
    .visit-table .contact-name {
      font-weight: 600; color: var(--text);
    }
    .visit-table .contact-title {
      font-size: 12px; color: var(--text-3);
    }
    .visit-table .visit-time {
      font-size: 13px; color: var(--text-2);
      white-space: nowrap;
    }
    .visit-table .visit-type {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 500;
      background: var(--bg);
      border: 1px solid var(--border);
    }
    /* ── Row action buttons ───────────────────────── */
    .row-actions { display: flex; gap: 4px; align-items: center; }
    .btn-icon {
      background: none; border: none; cursor: pointer;
      padding: 4px 6px; border-radius: 6px; font-size: 13px;
      transition: background 0.15s; line-height: 1;
    }
    .btn-icon:hover { background: var(--bg); }
    .btn-icon-danger:hover { background: #fff1f0; }
    /* ── Row action buttons ───────────────────────── */

    .visit-table .visit-purpose {
      max-width: 260px;
      font-size: 13px;
      color: var(--text-2);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .visit-table .empty-row td {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-3);
    }

    /* ── Responsive ───────────────────────────────────────── */
    @media(max-width:640px){
      .stats-row{grid-template-columns:1fr;}
      .act-chart-row{grid-template-columns:1fr;}
      .act-card{flex-wrap:wrap;}
      .act-right{width:100%;flex-direction:row;justify-content:space-between;margin-top:8px;}
      .visit-table-wrap{overflow-x:auto;}
      .visit-table{min-width:600px;}
    }