编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>萌宝宠物乐园</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #FF9A8B;
            --primary-light: #FFECD2;
            --secondary: #A18CD1;
            --accent: #7EC8E3;
            --success: #85E6A0;
            --warning: #FFD93D;
            --danger: #FF6B6B;
            --bg-main: #FFF9F5;
            --bg-white: #FFFFFF;
            --text-primary: #5D4E6D;
            --text-secondary: #8B7A9E;
            --text-light: #C4B8D9;
            --border: #F5E6E0;
            --shadow: 0 4px 15px rgba(255, 154, 139, 0.15);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: var(--bg-main);
            color: var(--text-primary);
            min-height: 100vh;
            max-width: 430px;
            margin: 0 auto;
            overflow-x: hidden;
        }

        .phone-frame {
            position: relative;
            width: 100%;
            min-height: 100vh;
            background: var(--bg-main);
        }

        .header {
            background: linear-gradient(135deg, #FFECD2 0%, #FCB69F 100%);
            color: var(--text-primary);
            padding: 15px 20px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(255, 154, 139, 0.2);
        }

        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 20px;
            font-weight: 700;
            background: linear-gradient(135deg, #FF9A8B 0%, #FF6B6B 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .header-icons {
            display: flex;
            gap: 15px;
        }

        .header-icon {
            width: 24px;
            height: 24px;
            cursor: pointer;
            opacity: 0.8;
        }

        .nav-tabs {
            display: flex;
            background: var(--bg-white);
            padding: 8px 0;
            position: sticky;
            top: 60px;
            z-index: 99;
            box-shadow: 0 2px 10px rgba(255, 154, 139, 0.1);
        }

        .nav-tab {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }

        .nav-tab.active {
            color: var(--primary);
            font-weight: 600;
        }

        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background: linear-gradient(135deg, #FF9A8B 0%, #FF6B6B 100%);
            border-radius: 2px;
        }

        .nav-tab svg {
            display: block;
            margin: 0 auto 4px;
            width: 22px;
            height: 22px;
        }

        .content {
            padding: 15px;
            padding-bottom: 85px;
        }

        .page {
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .page.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .card {
            background: var(--bg-white);
            border-radius: 20px;
            padding: 18px;
            margin-bottom: 15px;
            box-shadow: var(--shadow);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .card-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .card-badge {
            background: linear-gradient(135deg, #FF6B6B 0%, #FF9A8B 100%);
            color: white;
            font-size: 10px;
            padding: 4px 10px;
            border-radius: 12px;
        }

        .banner {
            background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 50%, #FF6B6B 100%);
            border-radius: 24px;
            padding: 25px;
            color: white;
            margin-bottom: 18px;
            position: relative;
            overflow: hidden;
        }

        .banner::before {
            content: '';
            position: absolute;
            top: -60%;
            right: -40%;
            width: 250px;
            height: 250px;
            background: rgba(255,255,255,0.15);
            border-radius: 50%;
        }

        .banner::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -20%;
            width: 150px;
            height: 150px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
        }

        .banner h2 {
            font-size: 24px;
            margin-bottom: 8px;
            font-weight: 700;
        }

        .banner p {
            font-size: 14px;
            opacity: 0.95;
        }

        .banner-btn {
            display: inline-block;
            background: white;
            color: var(--primary);
            padding: 10px 24px;
            border-radius: 25px;
            font-size: 13px;
            font-weight: 600;
            margin-top: 15px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
        }

        .quick-actions {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
            margin-bottom: 18px;
        }

        .quick-action {
            background: var(--bg-white);
            border-radius: 16px;
            padding: 14px 6px;
            text-align: center;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .quick-action:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(255, 154, 139, 0.25);
        }

        .quick-action svg {
            width: 28px;
            height: 28px;
            margin-bottom: 5px;
        }

        .quick-action span {
            display: block;
            font-size: 10px;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .section-title {
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 14px;
            color: var(--text-primary);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .section-more {
            font-size: 12px;
            color: var(--text-light);
            font-weight: normal;
            cursor: pointer;
        }

        .area-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        .area-item {
            background: var(--bg-white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .area-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 154, 139, 0.2);
        }

        .area-img {
            height: 85px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .area-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            background: linear-gradient(135deg, #FF9A8B 0%, #FF6B6B 100%);
            color: white;
            font-size: 9px;
            padding: 4px 10px;
            border-radius: 10px;
            font-weight: 600;
        }

        .area-info {
            padding: 12px;
        }

        .area-name {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 4px;
            color: var(--text-primary);
        }

        .area-detail {
            font-size: 11px;
            color: var(--text-light);
        }

        .area-available {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-top: 8px;
            font-size: 11px;
            color: var(--success);
            font-weight: 600;
        }

        .btn {
            display: block;
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: 25px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }

        .btn-primary {
            background: linear-gradient(135deg, #FF9A8B 0%, #FF6B6B 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.35);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.45);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #FFECD2 0%, #FCB69F 100%);
            color: var(--text-primary);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }

        .form-group {
            margin-bottom: 18px;
        }

        .form-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 10px;
            display: block;
        }

        .form-input {
            width: 100%;
            padding: 13px 16px;
            border: 2px solid var(--border);
            border-radius: 15px;
            font-size: 14px;
            transition: border-color 0.3s;
            background: var(--bg-main);
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            background: white;
        }

        .date-selector, .time-selector {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .date-item, .time-item {
            padding: 10px 16px;
            border: 2px solid var(--border);
            border-radius: 12px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
            background: white;
        }

        .date-item.active, .time-item.active {
            background: linear-gradient(135deg, #FF9A8B 0%, #FF6B6B 100%);
            color: white;
            border-color: var(--primary);
        }

        .date-item.disabled, .time-item.disabled {
            background: var(--bg-main);
            color: var(--text-light);
            cursor: not-allowed;
        }

        .service-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        .service-card {
            background: var(--bg-white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .service-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 154, 139, 0.2);
        }

        .service-img {
            height: 100px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .service-tag {
            position: absolute;
            top: 8px;
            left: 8px;
            background: linear-gradient(135deg, #FFD93D 0%, #FF9A8B 100%);
            color: white;
            font-size: 9px;
            padding: 4px 10px;
            border-radius: 10px;
            font-weight: 600;
        }

        .service-info {
            padding: 14px;
        }

        .service-name {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .service-desc {
            font-size: 11px;
            color: var(--text-light);
            margin-bottom: 8px;
            line-height: 1.4;
        }

        .service-price {
            font-size: 16px;
            font-weight: 700;
            color: var(--danger);
        }

        .service-price span {
            font-size: 11px;
            color: var(--text-light);
            font-weight: normal;
        }

        .activity-card {
            background: var(--bg-white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-bottom: 15px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .activity-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 154, 139, 0.2);
        }

        .activity-img {
            height: 140px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .activity-status {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: linear-gradient(135deg, #85E6A0 0%, #7EC8E3 100%);
            color: white;
            font-size: 11px;
            padding: 5px 12px;
            border-radius: 12px;
            font-weight: 600;
        }

        .activity-status.full {
            background: var(--text-light);
        }

        .activity-content {
            padding: 16px;
        }

        .activity-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .activity-info {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 12px;
        }

        .activity-info-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .activity-price {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .activity-price span:first-child {
            font-size: 18px;
            font-weight: 700;
            color: var(--danger);
        }

        .activity-join {
            background: linear-gradient(135deg, #FF9A8B 0%, #FF6B6B 100%);
            color: white;
            padding: 8px 18px;
            border-radius: 18px;
            font-size: 12px;
            font-weight: 600;
        }

        .post-card {
            background: var(--bg-white);
            border-radius: 20px;
            padding: 16px;
            margin-bottom: 15px;
            box-shadow: var(--shadow);
        }

        .post-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .post-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            margin-right: 12px;
            border: 2px solid var(--primary-light);
        }

        .post-user {
            flex: 1;
        }

        .post-username {
            font-size: 14px;
            font-weight: 700;
        }

        .post-time {
            font-size: 11px;
            color: var(--text-light);
        }

        .post-location {
            font-size: 11px;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 3px;
            font-weight: 500;
        }

        .post-content {
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 12px;
        }

        .post-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            margin-bottom: 12px;
        }

        .post-image {
            aspect-ratio: 1;
            background-size: cover;
            background-position: center;
            border-radius: 12px;
        }

        .post-image.single {
            grid-column: span 3;
            aspect-ratio: 16/9;
        }

        .post-actions {
            display: flex;
            gap: 22px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
        }

        .post-action {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
        }

        .post-action.liked {
            color: var(--danger);
        }

        .post-action svg {
            width: 20px;
            height: 20px;
        }

        .profile-header {
            background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 50%, #FF6B6B 100%);
            padding: 30px 20px;
            color: var(--text-primary);
            border-radius: 0 0 35px 35px;
            margin-bottom: 25px;
        }

        .profile-info {
            display: flex;
            align-items: center;
        }

        .profile-avatar {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: white;
            padding: 3px;
            margin-right: 15px;
            box-shadow: 0 4px 15px rgba(255, 154, 139, 0.3);
        }

        .profile-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .profile-name {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .profile-badge {
            display: inline-block;
            background: rgba(255,255,255,0.3);
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        .profile-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            margin-top: 22px;
            text-align: center;
        }

        .profile-stat {
            cursor: pointer;
        }

        .profile-stat-num {
            font-size: 22px;
            font-weight: 700;
        }

        .profile-stat-label {
            font-size: 11px;
            opacity: 0.9;
            margin-top: 4px;
        }

        .menu-section {
            background: var(--bg-white);
            border-radius: 20px;
            margin-bottom: 15px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .menu-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background 0.2s;
        }

        .menu-item:last-child {
            border-bottom: none;
        }

        .menu-item:hover {
            background: var(--bg-main);
        }

        .menu-icon {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 14px;
        }

        .menu-icon svg {
            width: 20px;
            height: 20px;
        }

        .menu-icon.pink { background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 100%); color: var(--primary); }
        .menu-icon.blue { background: linear-gradient(135deg, #A18CD1 0%, #7EC8E3 100%); color: white; }
        .menu-icon.green { background: linear-gradient(135deg, #85E6A0 0%, #7EC8E3 100%); color: white; }
        .menu-icon.orange { background: linear-gradient(135deg, #FFD93D 0%, #FF9A8B 100%); color: white; }
        .menu-icon.purple { background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%); color: white; }

        .menu-text {
            flex: 1;
            font-size: 14px;
            font-weight: 600;
        }

        .menu-arrow {
            color: var(--text-light);
            font-size: 16px;
        }

        .menu-badge {
            background: linear-gradient(135deg, #FF6B6B 0%, #FF9A8B 100%);
            color: white;
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 10px;
            margin-left: 8px;
            font-weight: 600;
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(93, 78, 109, 0.5);
            z-index: 1000;
            display: none;
            align-items: flex-end;
            justify-content: center;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: var(--bg-white);
            border-radius: 25px 25px 0 0;
            width: 100%;
            max-width: 430px;
            max-height: 90vh;
            overflow-y: auto;
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            background: var(--bg-white);
            border-radius: 25px 25px 0 0;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 700;
        }

        .modal-close {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 22px;
            color: var(--text-light);
            background: var(--bg-main);
            border-radius: 50%;
        }

        .modal-content {
            padding: 20px;
        }

        .qr-container {
            text-align: center;
            padding: 30px 0;
        }

        .qr-code {
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 100%);
            margin: 0 auto 20px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 25px rgba(255, 154, 139, 0.3);
        }

        .qr-code-inner {
            width: 180px;
            height: 180px;
            background: white;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .qr-info {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .qr-code-text {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .order-card {
            background: var(--bg-white);
            border-radius: 20px;
            padding: 16px;
            margin-bottom: 15px;
            box-shadow: var(--shadow);
        }

        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }

        .order-type {
            font-size: 14px;
            font-weight: 700;
        }

        .order-status {
            font-size: 12px;
            padding: 5px 12px;
            border-radius: 12px;
            font-weight: 600;
        }

        .order-status.pending {
            background: linear-gradient(135deg, #FFD93D 0%, #FF9A8B 100%);
            color: white;
        }

        .order-status.completed {
            background: linear-gradient(135deg, #85E6A0 0%, #7EC8E3 100%);
            color: white;
        }

        .order-status.cancelled {
            background: var(--text-light);
            color: white;
        }

        .order-details {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
        }

        .order-img {
            width: 72px;
            height: 72px;
            border-radius: 15px;
            background-size: cover;
            background-position: center;
        }

        .order-info {
            flex: 1;
        }

        .order-title {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .order-meta {
            font-size: 12px;
            color: var(--text-light);
        }

        .order-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .order-price {
            font-size: 16px;
            font-weight: 700;
            color: var(--danger);
        }

        .order-actions {
            display: flex;
            gap: 10px;
        }

        .order-btn {
            padding: 7px 16px;
            border-radius: 18px;
            font-size: 12px;
            cursor: pointer;
            border: none;
            font-weight: 600;
        }

        .order-btn.primary {
            background: linear-gradient(135deg, #FF9A8B 0%, #FF6B6B 100%);
            color: white;
        }

        .order-btn.outline {
            background: transparent;
            border: 2px solid var(--border);
            color: var(--text-secondary);
        }

        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(93, 78, 109, 0.9);
            color: white;
            padding: 15px 35px;
            border-radius: 25px;
            font-size: 14px;
            z-index: 2000;
            display: none;
            font-weight: 600;
        }

        .toast.show {
            display: block;
            animation: toastShow 0.3s ease;
        }

        @keyframes toastShow {
            from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }

        .tab-header {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            overflow-x: auto;
            padding-bottom: 5px;
        }

        .tab-btn {
            padding: 9px 18px;
            border: none;
            background: var(--bg-white);
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
            white-space: nowrap;
            font-weight: 500;
        }

        .tab-btn.active {
            background: linear-gradient(135deg, #FF9A8B 0%, #FF6B6B 100%);
            color: white;
        }

        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            background: var(--bg-white);
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            padding-bottom: max(10px, env(safe-area-inset-bottom));
            box-shadow: 0 -4px 20px rgba(255, 154, 139, 0.15);
            z-index: 100;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-light);
            cursor: pointer;
            padding: 5px 12px;
            transition: all 0.3s;
        }

        .nav-item.active {
            color: var(--primary);
        }

        .nav-item svg {
            width: 24px;
            height: 24px;
            margin-bottom: 3px;
        }

        .nav-item span {
            font-size: 10px;
            font-weight: 600;
        }

        /* Boarding Section */
        .boarding-card {
            background: var(--bg-white);
            border-radius: 20px;
            padding: 16px;
            margin-bottom: 14px;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .boarding-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 154, 139, 0.2);
        }

        .boarding-img {
            width: 100%;
            height: 140px;
            border-radius: 16px;
            background-size: cover;
            background-position: center;
            margin-bottom: 14px;
            position: relative;
        }

        .boarding-tag {
            position: absolute;
            top: 10px;
            left: 10px;
            background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%);
            color: white;
            padding: 5px 12px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
        }

        .boarding-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .boarding-features {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }

        .boarding-feature {
            background: var(--bg-main);
            padding: 5px 10px;
            border-radius: 10px;
            font-size: 11px;
            color: var(--text-secondary);
        }

        .boarding-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .boarding-price {
            font-size: 18px;
            font-weight: 700;
            color: var(--danger);
        }

        .boarding-price span {
            font-size: 12px;
            color: var(--text-light);
            font-weight: normal;
        }

        .boarding-book {
            background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%);
            color: white;
            padding: 8px 18px;
            border-radius: 18px;
            font-size: 12px;
            font-weight: 600;
            border: none;
            cursor: pointer;
        }

        /* Product Section */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        .product-card {
            background: var(--bg-white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .product-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 154, 139, 0.2);
        }

        .product-img {
            height: 120px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .product-tag {
            position: absolute;
            top: 8px;
            left: 8px;
            background: linear-gradient(135deg, #FF6B6B 0%, #FF9A8B 100%);
            color: white;
            font-size: 9px;
            padding: 4px 10px;
            border-radius: 10px;
            font-weight: 600;
        }

        .product-info {
            padding: 14px;
        }

        .product-name {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 6px;
            line-height: 1.4;
        }

        .product-desc {
            font-size: 11px;
            color: var(--text-light);
            margin-bottom: 8px;
        }

        .product-price {
            font-size: 16px;
            font-weight: 700;
            color: var(--danger);
        }

        .product-price span {
            font-size: 11px;
            color: var(--text-light);
            font-weight: normal;
            text-decoration: line-through;
            margin-left: 5px;
        }

        /* Cart Badge */
        .cart-badge {
            position: relative;
        }

        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: linear-gradient(135deg, #FF6B6B 0%, #FF9A8B 100%);
            color: white;
            font-size: 10px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }

        /* Floating Cart Button */
        .floating-cart {
            position: fixed;
            bottom: 100px;
            right: 20px;
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, #FF9A8B 0%, #FF6B6B 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
            cursor: pointer;
            z-index: 99;
        }

        .floating-cart svg {
            width: 26px;
            height: 26px;
            color: white;
        }

        /* Banner Carousel */
        .carousel {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 10px;
            margin-bottom: 15px;
            -webkit-overflow-scrolling: touch;
        }

        .carousel::-webkit-scrollbar {
            display: none;
        }

        .carousel-item {
            min-width: 280px;
            height: 140px;
            border-radius: 20px;
            background-size: cover;
            background-position: center;
            position: relative;
            flex-shrink: 0;
        }

        .carousel-content {
            position: absolute;
            bottom: 15px;
            left: 15px;
            color: white;
        }

        .carousel-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .carousel-desc {
            font-size: 12px;
            opacity: 0.9;
        }

        /* Notice */
        .notice-bar {
            background: linear-gradient(135deg, #FFECD2 0%, #FCB69F 100%);
            padding: 12px 16px;
            border-radius: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .notice-icon {
            width: 28px;
            height: 28px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .notice-text {
            font-size: 13px;
            color: var(--text-primary);
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Icon Styles */
        .icon-home { color: #FF9A8B; }
        .icon-board { color: #A18CD1; }
        .icon-shop { color: #7EC8E3; }
        .icon-service { color: #85E6A0; }
        .icon-community { color: #FFD93D; }
        .icon-profile { color: #FBC2EB; }
    </style>
</head>
<body>
    <div class="phone-frame">
        <!-- Header -->
        <div class="header" id="mainHeader">
            <div class="header-top">
                <h1>萌宝宠物乐园</h1>
                <div class="header-icons">
                    <svg class="header-icon" fill="var(--primary)" viewBox="0 0 24 24">
                        <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
                    </svg>
                    <svg class="header-icon cart-badge" fill="var(--primary)" viewBox="0 0 24 24" onclick="switchTab('shop')">
                        <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
                    </svg>
                    <span class="cart-count">3</span>
                </div>
            </div>
        </div>

        <!-- Navigation Tabs -->
        <div class="nav-tabs" id="navTabs">
            <div class="nav-tab active" data-tab="home">
                <svg class="icon-home" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                </svg>
                首页
            </div>
            <div class="nav-tab" data-tab="board">
                <svg class="icon-board" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z"/>
                </svg>
                寄养
            </div>
            <div class="nav-tab" data-tab="shop">
                <svg class="icon-shop" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
                </svg>
                商城
            </div>
            <div class="nav-tab" data-tab="service">
                <svg class="icon-service" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"/>
                </svg>
                服务
            </div>
            <div class="nav-tab" data-tab="community">
                <svg class="icon-community" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
                </svg>
                社区
            </div>
            <div class="nav-tab" data-tab="profile">
                <svg class="icon-profile" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                </svg>
                我的
            </div>
        </div>

        <!-- Main Content -->
        <div class="content">
            <!-- Home Page -->
            <div class="page active" id="home">
                <!-- Banner Carousel -->
                <div class="carousel">
                    <div class="carousel-item" style="background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 100%);">
                        <div class="carousel-content">
                            <div class="carousel-title">萌宝宠物乐园</div>
                            <div class="carousel-desc">让爱宠快乐每一天</div>
                        </div>
                    </div>
                    <div class="carousel-item" style="background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%);">
                        <div class="carousel-content">
                            <div class="carousel-title">宠物寄养服务</div>
                            <div class="carousel-desc">专业照料·温暖陪伴</div>
                        </div>
                    </div>
                    <div class="carousel-item" style="background: linear-gradient(135deg, #7EC8E3 0%, #85E6A0 100%);">
                        <div class="carousel-content">
                            <div class="carousel-title">新品上市</div>
                            <div class="carousel-desc">萌宠好物·限时优惠</div>
                        </div>
                    </div>
                </div>

                <!-- Notice -->
                <div class="notice-bar">
                    <div class="notice-icon">
                        <svg width="16" height="16" fill="var(--primary)" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
                        </svg>
                    </div>
                    <div class="notice-text">夏季活动进行中，会员享受8折优惠！</div>
                </div>

                <!-- Quick Actions -->
                <div class="quick-actions">
                    <div class="quick-action" onclick="showModal('authModal')">
                        <svg fill="#FF9A8B" viewBox="0 0 24 24">
                            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
                        </svg>
                        <span>实名认证</span>
                    </div>
                    <div class="quick-action" onclick="showModal('petModal')">
                        <svg fill="#A18CD1" viewBox="0 0 24 24">
                            <path d="M4.5 9.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"/>
                            <path d="M9 5.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"/>
                            <path d="M15 5.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"/>
                            <path d="M19.5 9.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"/>
                            <path d="M17.5 13c1.5 0 3-1 3-2.5s-1.5-2.5-3-2.5-3 1-3 2.5 1.5 2.5 3 2.5z"/>
                        </svg>
                        <span>宠物档案</span>
                    </div>
                    <div class="quick-action" onclick="switchTab('board')">
                        <svg fill="#85E6A0" viewBox="0 0 24 24">
                            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                        </svg>
                        <span>宠物寄养</span>
                    </div>
                    <div class="quick-action" onclick="switchTab('service')">
                        <svg fill="#7EC8E3" viewBox="0 0 24 24">
                            <path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"/>
                        </svg>
                        <span>增值服务</span>
                    </div>
                    <div class="quick-action" onclick="switchTab('community')">
                        <svg fill="#FFD93D" viewBox="0 0 24 24">
                            <path d="M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z"/>
                        </svg>
                        <span>打卡分享</span>
                    </div>
                </div>

                <!-- Park Areas -->
                <div class="section-title">
                    乐园区域
                    <span class="section-more" onclick="showToast('查看全部区域')">全部区域 ></span>
                </div>
                <div class="area-grid">
                    <div class="area-item" onclick="switchTab('service')">
                        <div class="area-img" style="background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 100%);">
                            <span class="area-badge">热门</span>
                        </div>
                        <div class="area-info">
                            <div class="area-name">小型犬区</div>
                            <div class="area-detail">适合10kg以下宠物</div>
                            <div class="area-available">
                                <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                                </svg>
                                余位: 10
                            </div>
                        </div>
                    </div>
                    <div class="area-item" onclick="switchTab('service')">
                        <div class="area-img" style="background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%);">
                            <span class="area-badge">推荐</span>
                        </div>
                        <div class="area-info">
                            <div class="area-name">大型犬区</div>
                            <div class="area-detail">适合10kg以上宠物</div>
                            <div class="area-available">
                                <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                                </svg>
                                余位: 8
                            </div>
                        </div>
                    </div>
                    <div class="area-item" onclick="switchTab('service')">
                        <div class="area-img" style="background: linear-gradient(135deg, #7EC8E3 0%, #85E6A0 100%);">
                        </div>
                        <div class="area-info">
                            <div class="area-name">泳池区</div>
                            <div class="area-detail">夏季开放·清凉一夏</div>
                            <div class="area-available">
                                <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                                </svg>
                                余位: 5
                            </div>
                        </div>
                    </div>
                    <div class="area-item" onclick="switchTab('service')">
                        <div class="area-img" style="background: linear-gradient(135deg, #FFD93D 0%, #FF9A8B 100%);">
                        </div>
                        <div class="area-info">
                            <div class="area-name">功能区</div>
                            <div class="area-detail">洗护·美容·寄养</div>
                            <div class="area-available">
                                <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                                </svg>
                                余位: 15
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Boarding Quick Entry -->
                <div class="card" style="margin-top: 5px;" onclick="switchTab('board')">
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%); border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                            <svg width="30" height="30" fill="white" viewBox="0 0 24 24">
                                <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
                            </svg>
                        </div>
                        <div style="flex: 1;">
                            <div style="font-size: 16px; font-weight: 700; margin-bottom: 4px;">宠物寄养服务</div>
                            <div style="font-size: 12px; color: var(--text-light);">专业照料·温暖陪伴·让您安心出行</div>
                        </div>
                        <svg width="20" height="20" fill="var(--text-light)" viewBox="0 0 24 24">
                            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
                        </svg>
                    </div>
                </div>

                <!-- Park Info Card -->
                <div class="card" style="margin-top: 5px;">
                    <div class="card-header">
                        <span class="card-title">乐园须知</span>
                    </div>
                    <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.9;">
                        <p><strong style="color: var(--text-primary);">营业时间：</strong>09:00-21:00</p>
                        <p><strong style="color: var(--text-primary);">入园必备：</strong>免疫证、养犬登记证</p>
                        <p><strong style="color: var(--text-primary);">温馨提示：</strong>请文明养宠，注意安全</p>
                        <div style="margin-top: 14px; display: flex; gap: 10px;">
                            <span class="banner-btn" style="margin: 0; background: linear-gradient(135deg, #7EC8E3 0%, #85E6A0 100%); color: white;" onclick="showToast('正在打开导航...')">
                                <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24" style="vertical-align: middle; margin-right: 4px;">
                                    <path d="M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z"/>
                                </svg>
                                导航前往
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Boarding Page -->
            <div class="page" id="board">
                <div class="banner" style="background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%); margin-bottom: 15px;">
                    <h2>萌宝宠物寄养</h2>
                    <p>专业照料·温暖陪伴·让爱宠感受家的温暖</p>
                </div>

                <div class="section-title">寄养房型</div>

                <div class="boarding-card" onclick="showModal('boardingDetailModal')">
                    <div class="boarding-img" style="background: linear-gradient(135deg, #FFECD2 0%, #FCB69F 100%);">
                        <span class="boarding-tag">热门</span>
                    </div>
                    <div class="boarding-title">标准间</div>
                    <div class="boarding-features">
                        <span class="boarding-feature">独立房间</span>
                        <span class="boarding-feature">每日清洁</span>
                        <span class="boarding-feature">3餐/天</span>
                        <span class="boarding-feature">视频探视</span>
                    </div>
                    <div class="boarding-footer">
                        <div class="boarding-price">¥128 <span>/天</span></div>
                        <button class="boarding-book">立即预约</button>
                    </div>
                </div>

                <div class="boarding-card" onclick="showModal('boardingDetailModal')">
                    <div class="boarding-img" style="background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%);">
                        <span class="boarding-tag">推荐</span>
                    </div>
                    <div class="boarding-title">豪华间</div>
                    <div class="boarding-features">
                        <span class="boarding-feature">豪华套房</span>
                        <span class="boarding-feature">每日美容</span>
                        <span class="boarding-feature">专属护理</span>
                        <span class="boarding-feature">24小时监控</span>
                        <span class="boarding-feature">视频探视</span>
                    </div>
                    <div class="boarding-footer">
                        <div class="boarding-price">¥258 <span>/天</span></div>
                        <button class="boarding-book">立即预约</button>
                    </div>
                </div>

                <div class="boarding-card" onclick="showModal('boardingDetailModal')">
                    <div class="boarding-img" style="background: linear-gradient(135deg, #FFD93D 0%, #FF9A8B 100%);">
                        <span class="boarding-tag">VIP</span>
                    </div>
                    <div class="boarding-title">VIP套房</div>
                    <div class="boarding-features">
                        <span class="boarding-feature">独栋别墅</span>
                        <span class="boarding-feature">专属管家</span>
                        <span class="boarding-feature">定制餐食</span>
                        <span class="boarding-feature">每日SPA</span>
                        <span class="boarding-feature">24小时贴身服务</span>
                    </div>
                    <div class="boarding-footer">
                        <div class="boarding-price">¥488 <span>/天</span></div>
                        <button class="boarding-book">立即预约</button>
                    </div>
                </div>

                <div class="section-title" style="margin-top: 20px;">寄养须知</div>
                <div class="card">
                    <div style="font-size: 13px; color: var(--text-secondary); line-height: 1.9;">
                        <p>1. 入托需提供有效免疫证明</p>
                        <p>2. 3个月以下或老年宠物需额外说明</p>
                        <p>3. 请自带宠物习惯使用的物品</p>
                        <p>4. 寄养期间如宠物身体不适，会第一时间通知您</p>
                        <p>5. 取消预约请提前48小时通知</p>
                    </div>
                </div>
            </div>

            <!-- Shop Page -->
            <div class="page" id="shop">
                <div class="tab-header">
                    <button class="tab-btn active">全部</button>
                    <button class="tab-btn">食品</button>
                    <button class="tab-btn">玩具</button>
                    <button class="tab-btn">用品</button>
                    <button class="tab-btn">服饰</button>
                </div>

                <div class="section-title">热门商品</div>

                <div class="product-grid">
                    <div class="product-card" onclick="showModal('productDetailModal')">
                        <div class="product-img" style="background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 100%);">
                            <span class="product-tag">热卖</span>
                        </div>
                        <div class="product-info">
                            <div class="product-name">天然鲜肉狗粮 5kg装</div>
                            <div class="product-desc">精选鸡肉·营养均衡</div>
                            <div class="product-price">¥168 <span>¥198</span></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showModal('productDetailModal')">
                        <div class="product-img" style="background: linear-gradient(135deg, #7EC8E3 0%, #85E6A0 100%);">
                            <span class="product-tag">新品</span>
                        </div>
                        <div class="product-info">
                            <div class="product-name">宠物智能饮水机</div>
                            <div class="product-desc">循环过滤·保持水质</div>
                            <div class="product-price">¥128 <span>¥168</span></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showModal('productDetailModal')">
                        <div class="product-img" style="background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%);">
                        </div>
                        <div class="product-info">
                            <div class="product-name">猫咪自动逗猫棒</div>
                            <div class="product-desc">自动旋转·解放双手</div>
                            <div class="product-price">¥89 <span>¥128</span></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showModal('productDetailModal')">
                        <div class="product-img" style="background: linear-gradient(135deg, #FFD93D 0%, #FF9A8B 100%);">
                        </div>
                        <div class="product-info">
                            <div class="product-name">宠物外出背包</div>
                            <div class="product-desc">透气舒适·大容量</div>
                            <div class="product-price">¥78 <span>¥98</span></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showModal('productDetailModal')">
                        <div class="product-img" style="background: linear-gradient(135deg, #85E6A0 0%, #7EC8E3 100%);">
                        </div>
                        <div class="product-info">
                            <div class="product-name">宠物专用沐浴露</div>
                            <div class="product-desc">温和配方·除螨止痒</div>
                            <div class="product-price">¥45 <span>¥68</span></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showModal('productDetailModal')">
                        <div class="product-img" style="background: linear-gradient(135deg, #FBC2EB 0%, #A18CD1 100%);">
                        </div>
                        <div class="product-info">
                            <div class="product-name">狗狗可爱衣服</div>
                            <div class="product-desc">冬季保暖·时尚百搭</div>
                            <div class="product-price">¥58 <span>¥88</span></div>
                        </div>
                    </div>
                </div>

                <!-- Floating Cart -->
                <div class="floating-cart" onclick="showModal('cartModal')">
                    <svg fill="currentColor" viewBox="0 0 24 24">
                        <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
                    </svg>
                </div>
            </div>

            <!-- Service Page -->
            <div class="page" id="service">
                <div class="tab-header">
                    <button class="tab-btn active">全部服务</button>
                    <button class="tab-btn">洗护美容</button>
                    <button class="tab-btn">训练课程</button>
                </div>

                <div class="section-title">热门服务</div>

                <div class="service-grid">
                    <div class="service-card" onclick="showModal('serviceDetailModal')">
                        <div class="service-img" style="background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 100%);">
                            <span class="service-tag">热门</span>
                        </div>
                        <div class="service-info">
                            <div class="service-name">基础洗护</div>
                            <div class="service-desc">洗澡+吹干+基础美容</div>
                            <div class="service-price">¥88 <span>起</span></div>
                        </div>
                    </div>
                    <div class="service-card" onclick="showModal('serviceDetailModal')">
                        <div class="service-img" style="background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%);">
                            <span class="service-tag">推荐</span>
                        </div>
                        <div class="service-info">
                            <div class="service-name">精致美容</div>
                            <div class="service-desc">洗护+修剪+造型设计</div>
                            <div class="service-price">¥188 <span>起</span></div>
                        </div>
                    </div>
                    <div class="service-card" onclick="showModal('serviceDetailModal')">
                        <div class="service-img" style="background: linear-gradient(135deg, #7EC8E3 0%, #85E6A0 100%);"></div>
                        <div class="service-info">
                            <div class="service-name">宠物寄养</div>
                            <div class="service-desc">舒适环境·专人照料</div>
                            <div class="service-price">¥128 <span>/天</span></div>
                        </div>
                    </div>
                    <div class="service-card" onclick="showModal('serviceDetailModal')">
                        <div class="service-img" style="background: linear-gradient(135deg, #FFD93D 0%, #FF9A8B 100%);"></div>
                        <div class="service-info">
                            <div class="service-name">行为训练</div>
                            <div class="service-desc">专业训导师·一对一指导</div>
                            <div class="service-price">¥268 <span>/课时</span></div>
                        </div>
                    </div>
                </div>

                <!-- Activities -->
                <div class="section-title" style="margin-top: 20px;">
                    主题活动
                    <span class="section-more">查看全部</span>
                </div>

                <div class="activity-card" onclick="showModal('activityModal')">
                    <div class="activity-img" style="background: linear-gradient(135deg, #FF9A8B 0%, #FF6B6B 100%);">
                        <span class="activity-status">报名中</span>
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">萌宠夏日派对</div>
                        <div class="activity-info">
                            <span class="activity-info-item">
                                <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/>
                                </svg>
                                5月15日
                            </span>
                            <span class="activity-info-item">
                                <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                                </svg>
                                30/50人
                            </span>
                        </div>
                        <div class="activity-price">
                            <span>¥99</span>
                            <span class="activity-join">立即报名</span>
                        </div>
                    </div>
                </div>

                <div class="activity-card">
                    <div class="activity-img" style="background: linear-gradient(135deg, #A18CD1 0%, #7EC8E3 100%);">
                        <span class="activity-status full">已满员</span>
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">宠物训练公开课</div>
                        <div class="activity-info">
                            <span class="activity-info-item">
                                <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/>
                                </svg>
                                5月20日
                            </span>
                            <span class="activity-info-item">
                                <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                                </svg>
                                50/50人
                            </span>
                        </div>
                        <div class="activity-price">
                            <span>免费</span>
                            <span class="activity-join" style="background: var(--text-light);">已满员</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Community Page -->
            <div class="page" id="community">
                <div class="section-title">
                    打卡分享
                    <span class="banner-btn" style="margin: 0; padding: 8px 16px; font-size: 12px;" onclick="showModal('postModal')">
                        <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24" style="vertical-align: middle; margin-right: 4px;">
                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                        </svg>
                        发布
                    </span>
                </div>

                <div class="post-card">
                    <div class="post-header">
                        <div class="post-avatar" style="background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 100%);"></div>
                        <div class="post-user">
                            <div class="post-username">铲屎官小王</div>
                            <div class="post-time">2小时前</div>
                        </div>
                        <div class="post-location">
                            <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                            小型犬区
                        </div>
                    </div>
                    <div class="post-content">球球今天在乐园玩得超开心！认识了好多新朋友，下次还要来～</div>
                    <div class="post-images">
                        <div class="post-image" style="background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 100%);"></div>
                        <div class="post-image" style="background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%);"></div>
                        <div class="post-image" style="background: linear-gradient(135deg, #7EC8E3 0%, #85E6A0 100%);"></div>
                    </div>
                    <div class="post-actions">
                        <div class="post-action liked">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                            </svg>
                            128
                        </div>
                        <div class="post-action">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
                            </svg>
                            23
                        </div>
                        <div class="post-action" style="margin-left: auto;">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
                            </svg>
                            分享
                        </div>
                    </div>
                </div>

                <div class="post-card">
                    <div class="post-header">
                        <div class="post-avatar" style="background: linear-gradient(135deg, #FFD93D 0%, #FF9A8B 100%);"></div>
                        <div class="post-user">
                            <div class="post-username">爱宠达人</div>
                            <div class="post-time">5小时前</div>
                        </div>
                        <div class="post-location">
                            <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                            泳池区
                        </div>
                    </div>
                    <div class="post-content">夏天就是要玩水！旺财今天学会了游泳，进步超大的！</div>
                    <div class="post-images">
                        <div class="post-image single" style="background: linear-gradient(135deg, #7EC8E3 0%, #85E6A0 100%);"></div>
                    </div>
                    <div class="post-actions">
                        <div class="post-action">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                            </svg>
                            256
                        </div>
                        <div class="post-action">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
                            </svg>
                            45
                        </div>
                        <div class="post-action" style="margin-left: auto;">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
                            </svg>
                            分享
                        </div>
                    </div>
                </div>
            </div>

            <!-- Profile Page -->
            <div class="page" id="profile">
                <div class="profile-header">
                    <div class="profile-info">
                        <div class="profile-avatar">
                            <svg width="100%" height="100%" fill="#FF9A8B" viewBox="0 0 24 24">
                                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                            </svg>
                        </div>
                        <div>
                            <div class="profile-name">宠物爱好者</div>
                            <span class="profile-badge">已认证</span>
                        </div>
                    </div>
                    <div class="profile-stats">
                        <div class="profile-stat" onclick="showToast('查看预约记录')">
                            <div class="profile-stat-num">5</div>
                            <div class="profile-stat-label">预约记录</div>
                        </div>
                        <div class="profile-stat" onclick="showToast('查看服务订单')">
                            <div class="profile-stat-num">3</div>
                            <div class="profile-stat-label">服务订单</div>
                        </div>
                        <div class="profile-stat" onclick="showToast('查看活动报名')">
                            <div class="profile-stat-num">2</div>
                            <div class="profile-stat-label">活动报名</div>
                        </div>
                    </div>
                </div>

                <!-- Menu Sections -->
                <div class="menu-section">
                    <div class="menu-item" onclick="showModal('petModal')">
                        <div class="menu-icon pink">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M4.5 9.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"/>
                                <path d="M9 5.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"/>
                                <path d="M15 5.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"/>
                                <path d="M19.5 9.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"/>
                            </svg>
                        </div>
                        <span class="menu-text">宠物档案管理</span>
                        <span class="menu-arrow">›</span>
                    </div>
                    <div class="menu-item" onclick="showModal('authModal')">
                        <div class="menu-icon blue">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
                            </svg>
                        </div>
                        <span class="menu-text">实名认证</span>
                        <span class="menu-badge">未认证</span>
                        <span class="menu-arrow">›</span>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon green">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
                            </svg>
                        </div>
                        <span class="menu-text">我的订单</span>
                        <span class="menu-arrow">›</span>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon purple">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/>
                            </svg>
                        </div>
                        <span class="menu-text">意见反馈</span>
                        <span class="menu-arrow">›</span>
                    </div>
                </div>

                <div class="menu-section">
                    <div class="menu-item" onclick="showToast('应急电话')">
                        <div class="menu-icon orange">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M6.5 2c-1.38 0-2.5 1.12-2.5 2.5 0 2.63 2.88 6.75 4.5 9.5 1.62-2.75 4.5-6.87 4.5-9.5 0-1.38-1.12-2.5-2.5-2.5-.83 0-1.5.67-1.5 1.5 0 .55.45 1 1 1 .55 0 1 .45 1 1 0 .55-.45 1-1 1H9c-.55 0-1 .45-1 1 0 .55.45 1 1 1h1.5c1.38 0 2.5-1.12 2.5-2.5 0-.55-.45-1-1-1-.55 0-1 .45-1 1 0 .55-.45 1-1 1-1.1 0-2 .9-2 2 0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H9c-1.1 0-2-.9-2-2 0-1.38 1.12-2.5 2.5-2.5h1c.55 0 1-.45 1-1s-.45-1-1-1c-1.38 0-2.5-1.12-2.5-2.5 0-1.1.9-2 2-2h1c1.1 0 2 .9 2 2 0 .55.45 1 1 1 .55 0 1-.45 1-1h1z"/>
                            </svg>
                        </div>
                        <span class="menu-text">应急电话</span>
                        <span class="menu-arrow">›</span>
                    </div>
                    <div class="menu-item" onclick="switchTab('shop')">
                        <div class="menu-icon green">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
                            </svg>
                        </div>
                        <span class="menu-text">购物车</span>
                        <span class="menu-arrow">›</span>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon blue">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                            </svg>
                        </div>
                        <span class="menu-text">关于我们</span>
                        <span class="menu-arrow">›</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Navigation -->
        <div class="bottom-nav" id="bottomNav">
            <div class="nav-item active" data-tab="home">
                <svg class="icon-home" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                </svg>
                <span>首页</span>
            </div>
            <div class="nav-item" data-tab="board">
                <svg class="icon-board" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
                </svg>
                <span>寄养</span>
            </div>
            <div class="nav-item" data-tab="shop">
                <svg class="icon-shop" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
                </svg>
                <span>商城</span>
            </div>
            <div class="nav-item" data-tab="service">
                <svg class="icon-service" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"/>
                </svg>
                <span>服务</span>
            </div>
            <div class="nav-item" data-tab="community">
                <svg class="icon-community" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
                </svg>
                <span>社区</span>
            </div>
            <div class="nav-item" data-tab="profile">
                <svg class="icon-profile" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                </svg>
                <span>我的</span>
            </div>
        </div>
    </div>

    <!-- Modals -->
    <!-- Auth Modal -->
    <div class="modal-overlay" id="authModal">
        <div class="modal">
            <div class="modal-header">
                <span class="modal-title">实名认证</span>
                <span class="modal-close" onclick="closeModal('authModal')">×</span>
            </div>
            <div class="modal-content">
                <div class="form-group">
                    <label class="form-label">手机号</label>
                    <input type="tel" class="form-input" placeholder="请输入手机号" value="138****8888">
                </div>
                <div class="form-group">
                    <label class="form-label">身份证号</label>
                    <input type="text" class="form-input" placeholder="请输入身份证号">
                </div>
                <div class="form-group">
                    <label class="form-label">验证码</label>
                    <div style="display: flex; gap: 10px;">
                        <input type="text" class="form-input" placeholder="请输入验证码" style="flex: 1;">
                        <button class="btn btn-secondary" style="width: auto; padding: 13px 16px;">获取验证码</button>
                    </div>
                </div>
                <button class="btn btn-primary" onclick="closeModal('authModal'); showToast('认证成功！');">提交认证</button>
            </div>
        </div>
    </div>

    <!-- Pet Modal -->
    <div class="modal-overlay" id="petModal">
        <div class="modal">
            <div class="modal-header">
                <span class="modal-title">宠物档案</span>
                <span class="modal-close" onclick="closeModal('petModal')">×</span>
            </div>
            <div class="modal-content">
                <div style="text-align: center; margin-bottom: 20px;">
                    <div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 100%); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;">
                        <svg width="40" height="40" fill="white" viewBox="0 0 24 24">
                            <path d="M4.5 9.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"/>
                            <path d="M9 5.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"/>
                            <path d="M15 5.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"/>
                            <path d="M19.5 9.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"/>
                        </svg>
                    </div>
                    <p style="color: var(--text-secondary); font-size: 13px;">已添加 2 只宠物</p>
                </div>

                <div class="order-card">
                    <div class="order-details">
                        <div class="order-img" style="background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 100%);"></div>
                        <div class="order-info">
                            <div class="order-title">球球</div>
                            <div class="order-meta">泰迪 | 2岁 | 已认证</div>
                        </div>
                    </div>
                </div>

                <div class="order-card">
                    <div class="order-details">
                        <div class="order-img" style="background: linear-gradient(135deg, #85E6A0 0%, #7EC8E3 100%);"></div>
                        <div class="order-info">
                            <div class="order-title">旺财</div>
                            <div class="order-meta">金毛 | 3岁 | 已认证</div>
                        </div>
                    </div>
                </div>

                <button class="btn btn-outline" onclick="closeModal('petModal'); showToast('添加新宠物')">
                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24" style="vertical-align: middle; margin-right: 5px;">
                        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                    </svg>
                    添加宠物
                </button>
            </div>
        </div>
    </div>

    <!-- Boarding Detail Modal -->
    <div class="modal-overlay" id="boardingDetailModal">
        <div class="modal">
            <div class="modal-header">
                <span class="modal-title">标准间详情</span>
                <span class="modal-close" onclick="closeModal('boardingDetailModal')">×</span>
            </div>
            <div class="modal-content">
                <div style="height: 180px; background: linear-gradient(135deg, #FFECD2 0%, #FCB69F 100%); border-radius: 20px; margin-bottom: 18px;"></div>

                <div style="margin-bottom: 18px;">
                    <h3 style="font-size: 18px; font-weight: 700; margin-bottom: 10px;">房间配置</h3>
                    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                        <span style="background: var(--bg-main); padding: 8px 14px; border-radius: 12px; font-size: 13px;">独立房间</span>
                        <span style="background: var(--bg-main); padding: 8px 14px; border-radius: 12px; font-size: 13px;">冷暖空调</span>
                        <span style="background: var(--bg-main); padding: 8px 14px; border-radius: 12px; font-size: 13px;">每日清洁</span>
                        <span style="background: var(--bg-main); padding: 8px 14px; border-radius: 12px; font-size: 13px;">24小时监控</span>
                        <span style="background: var(--bg-main); padding: 8px 14px; border-radius: 12px; font-size: 13px;">每日3餐</span>
                        <span style="background: var(--bg-main); padding: 8px 14px; border-radius: 12px; font-size: 13px;">视频探视</span>
                    </div>
                </div>

                <div style="margin-bottom: 18px;">
                    <h3 style="font-size: 18px; font-weight: 700; margin-bottom: 10px;">服务说明</h3>
                    <p style="font-size: 13px; color: var(--text-secondary); line-height: 1.7;">
                        专业护理人员24小时照料，每日定时喂食、遛弯，提供舒适的居住环境和专业的医疗服务。
                    </p>
                </div>

                <div style="background: var(--bg-main); padding: 15px; border-radius: 15px; margin-bottom: 18px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                        <span style="color: var(--text-secondary);">日托价格</span>
                        <span style="font-weight: 600;">¥128/天</span>
                    </div>
                    <div style="display: flex; justify-content: space-between;">
                        <span style="color: var(--text-secondary);">长住优惠（7天以上）</span>
                        <span style="font-weight: 600; color: var(--danger);">9折</span>
                    </div>
                </div>

                <button class="btn btn-primary" onclick="closeModal('boardingDetailModal'); showToast('选择入住时间');">立即预约</button>
            </div>
        </div>
    </div>

    <!-- Product Detail Modal -->
    <div class="modal-overlay" id="productDetailModal">
        <div class="modal">
            <div class="modal-header">
                <span class="modal-title">商品详情</span>
                <span class="modal-close" onclick="closeModal('productDetailModal')">×</span>
            </div>
            <div class="modal-content">
                <div style="height: 200px; background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 100%); border-radius: 20px; margin-bottom: 18px;"></div>

                <h2 style="font-size: 20px; font-weight: 700; margin-bottom: 10px;">天然鲜肉狗粮 5kg装</h2>

                <div style="margin-bottom: 18px;">
                    <span style="font-size: 24px; font-weight: 700; color: var(--danger);">¥168</span>
                    <span style="font-size: 14px; color: var(--text-light); text-decoration: line-through; margin-left: 10px;">¥198</span>
                </div>

                <div style="margin-bottom: 18px;">
                    <h3 style="font-size: 16px; font-weight: 700; margin-bottom: 10px;">商品特点</h3>
                    <p style="font-size: 13px; color: var(--text-secondary); line-height: 1.7;">
                        精选优质鲜鸡肉，无谷配方，含丰富蛋白质和维生素，有助于爱宠健康成长。适合各年龄段宠物食用。
                    </p>
                </div>

                <div style="display: flex; gap: 10px;">
                    <button class="btn btn-outline" style="flex: 1;" onclick="closeModal('productDetailModal'); showToast('已加入购物车');">加入购物车</button>
                    <button class="btn btn-primary" style="flex: 1;" onclick="closeModal('productDetailModal'); showToast('购买成功！');">立即购买</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Cart Modal -->
    <div class="modal-overlay" id="cartModal">
        <div class="modal">
            <div class="modal-header">
                <span class="modal-title">购物车</span>
                <span class="modal-close" onclick="closeModal('cartModal')">×</span>
            </div>
            <div class="modal-content">
                <div class="order-card">
                    <div class="order-details">
                        <div class="order-img" style="background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 100%);"></div>
                        <div class="order-info">
                            <div class="order-title">天然鲜肉狗粮 5kg装</div>
                            <div class="order-meta">¥168</div>
                        </div>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
                        <span style="color: var(--text-light); font-size: 12px;">数量: 1</span>
                        <span style="font-weight: 700; color: var(--danger);">¥168</span>
                    </div>
                </div>

                <div class="order-card">
                    <div class="order-details">
                        <div class="order-img" style="background: linear-gradient(135deg, #7EC8E3 0%, #85E6A0 100%);"></div>
                        <div class="order-info">
                            <div class="order-title">宠物智能饮水机</div>
                            <div class="order-meta">¥128</div>
                        </div>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
                        <span style="color: var(--text-light); font-size: 12px;">数量: 2</span>
                        <span style="font-weight: 700; color: var(--danger);">¥256</span>
                    </div>
                </div>

                <div style="background: var(--bg-main); padding: 18px; border-radius: 15px; margin-top: 15px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                        <span style="color: var(--text-secondary);">商品总价</span>
                        <span>¥424</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                        <span style="color: var(--text-secondary);">优惠</span>
                        <span style="color: var(--success);">-¥42</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; padding-top: 10px; border-top: 1px solid var(--border);">
                        <span>合计</span>
                        <span style="color: var(--danger);">¥382</span>
                    </div>
                </div>

                <button class="btn btn-primary" style="margin-top: 15px;" onclick="closeModal('cartModal'); showToast('下单成功！');">去结算</button>
            </div>
        </div>
    </div>

    <!-- Service Detail Modal -->
    <div class="modal-overlay" id="serviceDetailModal">
        <div class="modal">
            <div class="modal-header">
                <span class="modal-title">基础洗护</span>
                <span class="modal-close" onclick="closeModal('serviceDetailModal')">×</span>
            </div>
            <div class="modal-content">
                <div style="height: 160px; background: linear-gradient(135deg, #FFECD2 0%, #FF9A8B 100%); border-radius: 20px; margin-bottom: 18px;"></div>

                <div style="margin-bottom: 18px;">
                    <h3 style="font-size: 18px; font-weight: 700; margin-bottom: 10px;">服务内容</h3>
                    <p style="font-size: 13px; color: var(--text-secondary); line-height: 1.7;">
                        专业宠物洗澡、吹干、基础美容修剪、耳朵清洁、指甲修剪
                    </p>
                </div>

                <div style="margin-bottom: 18px;">
                    <h3 style="font-size: 18px; font-weight: 700; margin-bottom: 10px;">价格说明</h3>
                    <div style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border);">
                        <span style="color: var(--text-secondary);">小型犬（10kg以下）</span>
                        <span style="font-weight: 600;">¥88</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border);">
                        <span style="color: var(--text-secondary);">中型犬（10-25kg）</span>
                        <span style="font-weight: 600;">¥128</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; padding: 12px 0;">
                        <span style="color: var(--text-secondary);">大型犬（25kg以上）</span>
                        <span style="font-weight: 600;">¥168</span>
                    </div>
                </div>

                <button class="btn btn-primary" onclick="closeModal('serviceDetailModal'); showToast('选择服务时段');">立即预约</button>
            </div>
        </div>
    </div>

    <!-- Activity Modal -->
    <div class="modal-overlay" id="activityModal">
        <div class="modal">
            <div class="modal-header">
                <span class="modal-title">萌宠夏日派对</span>
                <span class="modal-close" onclick="closeModal('activityModal')">×</span>
            </div>
            <div class="modal-content">
                <div style="height: 180px; background: linear-gradient(135deg, #FF9A8B 0%, #FF6B6B 100%); border-radius: 20px; margin-bottom: 18px;"></div>

                <div style="display: flex; gap: 12px; margin-bottom: 18px;">
                    <div style="flex: 1; background: var(--bg-main); padding: 14px; border-radius: 15px; text-align: center;">
                        <div style="font-size: 20px; font-weight: 700; color: var(--primary);">30/50</div>
                        <div style="font-size: 11px; color: var(--text-light);">已报名</div>
                    </div>
                    <div style="flex: 1; background: var(--bg-main); padding: 14px; border-radius: 15px; text-align: center;">
                        <div style="font-size: 20px; font-weight: 700;">5月15日</div>
                        <div style="font-size: 11px; color: var(--text-light);">活动时间</div>
                    </div>
                    <div style="flex: 1; background: var(--bg-main); padding: 14px; border-radius: 15px; text-align: center;">
                        <div style="font-size: 20px; font-weight: 700; color: var(--danger);">¥99</div>
                        <div style="font-size: 11px; color: var(--text-light);">报名费</div>
                    </div>
                </div>

                <div style="margin-bottom: 18px;">
                    <h3 style="font-size: 16px; font-weight: 700; margin-bottom: 10px;">活动内容</h3>
                    <p style="font-size: 13px; color: var(--text-secondary); line-height: 1.7;">
                        宠物才艺表演、互动游戏、拍照打卡、专业摄影师跟拍、丰富奖品
                    </p>
                </div>

                <button class="btn btn-primary" onclick="closeModal('activityModal'); showToast('报名成功！');">立即报名</button>
            </div>
        </div>
    </div>

    <!-- Post Modal -->
    <div class="modal-overlay" id="postModal">
        <div class="modal">
            <div class="modal-header">
                <span class="modal-title">发布打卡</span>
                <span class="modal-close" onclick="closeModal('postModal')">×</span>
            </div>
            <div class="modal-content">
                <div class="form-group">
                    <textarea class="form-input" style="min-height: 120px; resize: none;" placeholder="分享你在乐园的快乐时光...">今天带球球来乐园玩，超开心！