/**
 * iconfont 图标基础样式
 */
.iconfont {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

/**
 * 疗愈地图页面样式 - 响应式布局
 * 左侧行程面板 + 右侧地图区域
 */

/* ====== 页面容器 ====== */
.hm-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 70px);
    background: #f5f7fa;
}

/* ====== 路线详情顶部栏 ====== */
.hm-route-topbar {
    background: #fff;
    border: 1px solid #F5F5F5;
    box-shadow: 0px 6px 16px 0px rgba(0,0,0,0.08);
    padding: 12px 20px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.hm-route-topbar__inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hm-route-topbar__left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.hm-route-topbar__back {
    width: 24px;
    height: 24px;
    background: linear-gradient(90deg, #0285EF 0%, #01DCD8 100%), #1678FF;
    box-shadow: 0px 6px 12px 0px rgba(2,134,238,0.2);
    border-radius: 24px;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.hm-route-topbar__back:hover {
    opacity: 0.85;
}

.hm-route-topbar__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    white-space: nowrap;
}

.hm-route-topbar__cat-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.hm-route-topbar__tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.hm-route-topbar__tab {
    display: inline-block;
    padding: 2px 8px;
    border: none;
    background: #EBF7FD;
    font-size: 0.7rem;
    color: #029AE9;
    border-radius: 4px;
    white-space: nowrap;
}

.hm-route-topbar__btn {
    padding: 9px 22px;
    background: linear-gradient(135deg, #2a6496, #1b8a6b);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.hm-route-topbar__btn:hover {
    opacity: 0.9;
}

/* ====== 行程安排面板 ====== */
.hm-itinerary {
    padding: 20px 16px;
}

.hm-itinerary__header {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hm-itinerary__header h3 {
    font-size: 1.1rem;
    color: #1a1a1a;
    margin: 0;
    font-weight: 700;
}

.hm-itinerary__btn {
    background: rgba(0,124,240,0.15);
    border-radius: 6px;
    color: #0285EF;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s;
}

.hm-itinerary__btn:hover {
    background: linear-gradient( 90deg, #0285EF 0%, #01DCD8 100%);
    color: #FFFFFF;
}

.hm-itinerary__btn-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.hm-itinerary__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hm-itinerary__item {
    border: 1px solid #F5F5F5;
    border-radius: 6px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
    background: rgba(255,255,255,0.8);
    box-shadow: 0px 6px 16px 0px rgba(0,0,0,0.08);
}

.hm-itinerary__item:hover {
    background: #FFFFFF;
    box-shadow: 0px 1px 3px 0px rgba(10,13,18,0.1), 0px 4px 6px 0px rgba(10,13,18,0.03), 0px 6px 16px 0px rgba(0,0,0,0.08);
}

.hm-itinerary__img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.hm-itinerary__img--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hm-itinerary__img--green      { background: linear-gradient(135deg, #27ae60, #1e8449); }
.hm-itinerary__img--purple     { background: linear-gradient(135deg, #8e44ad, #6c3483); }
.hm-itinerary__img--orange     { background: linear-gradient(135deg, #e67e22, #d35400); }
.hm-itinerary__img--blue       { background: linear-gradient(135deg, #2980b9, #1a5276); }
.hm-itinerary__img--red        { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.hm-itinerary__img--brown      { background: linear-gradient(135deg, #795548, #5d4037); }
.hm-itinerary__img--blue-light { background: linear-gradient(135deg, #3498db, #2471a3); }

.hm-itinerary__content {
    flex: 1;
    min-width: 0;
}

.hm-itinerary__title {
   font-weight: 500;
    font-size: 16px;
    color: #333333;
    margin: 0 0 6px;
    line-height: 24px;
    font-family: PingFang SC, PingFang SC;
}

.hm-itinerary__tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.hm-itinerary__tag--green      { background: #e6f7ed; color: #27ae60; }
.hm-itinerary__tag--purple     { background: #f0e6f6; color: #8e44ad; }
.hm-itinerary__tag--orange     { background: #fff3e0; color: #e67e22; }
.hm-itinerary__tag--blue       { background: #e3f2fd; color: #2980b9; }
.hm-itinerary__tag--red        { background: #fdeaea; color: #e74c3c; }
.hm-itinerary__tag--brown      { background: #efebe9; color: #795548; }
.hm-itinerary__tag--blue-light { background: #e8f4fd; color: #3498db; }

.hm-itinerary__arrow {
    font-size: 1.4rem;
    color: #ccc;
    flex-shrink: 0;
    line-height: 1;
}

/* ====== 规划模式顶部栏 ====== */
.hm-topbar {
    background: #fff;
    border: 1px solid #F5F5F5;
    box-shadow: 0px 6px 16px 0px rgba(0,0,0,0.08);
    padding: 12px 20px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.hm-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* 左侧区域 */
.hm-topbar__left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hm-topbar__item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hm-topbar__item--name {
    cursor: pointer;
}

.hm-topbar__name {
    color: #333;
    font-size: 0.875rem;
    font-weight: 500;
}

.hm-topbar__name-input {
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 0.875rem !important;
    color: #333 !important;
    outline: none !important;
    border:none !important;
    width: 180px !important;
    transition: border-color 0.2s !important;
    height: 24px !important;
}

.hm-topbar__name-input:focus {
    border-color: #0285EF;
}

.hm-topbar__icon-edit {
    transition: all 0.2s;
    cursor: pointer;
    color: #666666;
}

.hm-topbar__icon-edit:hover {
    opacity: 0.7;
}

.hm-topbar__icon-delete {
    transition: all 0.2s;
    cursor: pointer;
    color: #666666;
    margin-left: 8px;
}

.hm-topbar__icon-delete:hover {
    opacity: 0.7;
}

.hm-topbar__icon-calendar {
    color: #666;
    flex-shrink: 0;
}

.hm-topbar__label,
.hm-topbar__label-gray {
    font-size: 0.8125rem;
    cursor: pointer;
}

.hm-topbar__label {
    color: #666 !important;
}

.hm-topbar__item--date {
    cursor: pointer;
}

.hm-topbar__date-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ====== 自定义日历日期选择器 ====== */
.ca-calendar {
    position: absolute;
    z-index: 10000;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 16px;
    width: 280px;
    font-size: 0.8125rem;
}

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

.ca-calendar__header-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #333;
}

.ca-calendar__header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    color: #666;
    border-radius: 4px;
    transition: background 0.2s;
    font-size: 24px;
}

.ca-calendar__header-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.ca-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 8px;
    color: #999;
    font-weight: 400;
    font-size: 0.75rem;
}

.ca-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: 0.8125rem;
    color: #333;
    background: transparent;
}

.calendar-day--other {
    color: #ccc;
}

.calendar-day--marked {
    background: rgba(2,134,238,0.08);
    border: 1px solid rgba(2,134,238,0.2);
}

.calendar-day--selected {
    background: #0287EF;
    color: #fff;
    font-weight: 600;
}

.calendar-day--today {
    font-weight: 600;
    color: #333;
}

.calendar-day--today.calendar-day--selected {
    color: #fff;
}

.calendar-day:hover:not(.calendar-day--selected):not(.calendar-day--other) {
    background: #f0f0f0;
}

.ca-calendar__footer {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.ca-calendar__footer-btn {
    /* padding: 6px 16px; */
    /* border: 1px solid #0285EF; */
    border-radius: 4px;
    background: none;
    color: #0285EF;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ca-calendar__footer-btn:hover {
    /* background: #0285EF;
    color: #fff; */
}

.hm-topbar__label-gray {
    color: #666;
}

.hm-topbar__count {
    color: #666;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* 中间标签页区域 */
.hm-topbar__tabs {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hm-topbar__tab {
    padding: 6px 16px;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
    transition: all 0.2s;
}

.hm-topbar__tab:hover {
    background: #f5f7fa;
}

.hm-topbar__tab--active {
    background: linear-gradient(90deg, #0285EF 0%, #01DCD8 100%);
    color: #fff;
}

.hm-topbar__arrows {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}

.hm-topbar__arrow {
    width: 28px;
    height: 28px;
    border: none;
    background: #f5f7fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.hm-topbar__arrow:hover:not(:disabled) {
    background: #e8ecf1;
}

.hm-topbar__arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 右侧区域 */
.hm-topbar__right {
    display: flex;
    align-items: center;
}

.hm-topbar__add {
    width: 36px;
    height: 36px;
    border: none;
    background: linear-gradient(90deg, #0285EF 0%, #01DCD8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(2, 134, 238, 0.2);
}

.hm-topbar__add:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(2, 134, 238, 0.3);
}

/* ====== 行程人数模态框 ====== */
.hm-topbar__item--people {
    cursor: pointer;
}

.hm-topbar__item--people .iconfont {
    color: #666666;
}

.passenger-display {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.passenger-display .text {
    font-size: 0.8125rem;
    color: #666;
    font-weight: 500;
}

.passenger-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.passenger-modal {
    position: fixed;
    z-index: 10001;
    width: 212px;
    background-color: #ffffff;
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.passenger-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #333;
}

.passenger-item .label {
    width: 40px;
}

.passenger-item .count-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.passenger-item .btn {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #999;
    background-color: #fff;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.passenger-item .btn:hover {
    background-color: #f0f0f0;
}

.passenger-item .btn:active {
    background-color: #e0e0e0;
}

.passenger-item .btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.passenger-item .input-box {
    width: 88px;
    height: 32px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    color: #333;
    background-color: #fff;
}

.passenger-item .input-box:focus {
    outline: none;
    border-color: #0285EF;
}

.button-group {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.button-group button {
    flex: 1;
    height: 32px;
    border-radius: 5px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.button-group .cancel-btn {
    background-color: #f0f0f0;
    color: #333;
}

.button-group .confirm-btn {
    background: linear-gradient(90deg, #1677ff, #36cfc9);
    color: #fff;
    box-shadow: 0 2px 5px rgba(22, 119, 255, 0.3);
}

.button-group button:hover {
    opacity: 0.9;
}

/* ====== 定制路线入口 ====== */
.hm-custom-route {
    margin: 0;
    padding: 24px 16px 4px;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: opacity 0.2s;
}

.hm-custom-route:hover {
    opacity: 0.92;
}

.hm-custom-route__left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hm-custom-route__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.hm-custom-route__title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    /* background: linear-gradient(0deg, #0285EF 0%, #01DCD8 100%); */
    background: linear-gradient( 90deg, #0285EF 0%, #01DCD8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hm-custom-route__btn {
    /* width: 92px;
    height: 44px; */
    background: linear-gradient(90deg, #0285EF 0%, #01DCD8 100%), #1678FF;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
}

.hm-custom-route__btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.hm-custom-route__btn:hover {
    opacity: 0.85;
}

.hm-custom-route__list {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.hm-custom-route__card {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.hm-custom-route__card:hover {
    background: rgba(0,0,0,0.05);
}

.hm-custom-route__card-img {
    width: 54px;
    height: 54px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hm-custom-route__card-info {
    flex: 1;
    min-width: 0;
    font-family: PingFang SC, PingFang SC;
}

.hm-custom-route__card-name {
    font-size: 16px;
    color: #333333;
    font-weight: 500;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    

}

.hm-custom-route__card-meta {
    font-size: 16px;
    color: #666666;
}

.hm-custom-route__card-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #f5f7fa;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0285EF;
    transition: background 0.2s;
}

.hm-custom-route__card-btn:hover {
    background-color: #e3f2fd;
}

.hm-custom-route__empty {
    text-align: center;
    padding: 20px 0;
    color: #999;
    font-size: 0.8rem;
}

.hm-custom-route__view-all {
    display: block;
    margin: 16px 0 0;
    background: none;
    border: none;
    font-size: 16px;
    color: #666666;
    font-family: PingFang SC, PingFang SC;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
}

.hm-custom-route__view-all:hover {
    opacity: 0.85;
    color: #0285EF;
}

/* ====== 全部定制路线列表视图 ====== */
.hm-custom-route__all {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* padding: 16px; */
}

.hm-custom-route__all-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 10px 0 10px;
}

.hm-custom-route__all-back {
    width: 24px;
    height: 24px;
    background: linear-gradient(90deg, #0285EF 0%, #01DCD8 100%), #1678FF;
    box-shadow: 0px 6px 12px 0px rgba(2,134,238,0.2);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    color: #fff;
    padding: 0;
    transition: opacity 0.2s;
}

.hm-custom-route__all-back:hover {
    opacity: 0.85;
}

.hm-custom-route__all-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    background: linear-gradient(90deg, #0285EF 0%, #01DCD8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hm-custom-route__all-list {
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
    overflow-y: auto;
    flex: 1;
}

/* ====== 路线列表视图 ====== */
.hm-route-list {
    padding: 16px 0px;
}

.hm-route-list__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 4px;
}

.hm-route-list__title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    background: linear-gradient( 90deg, #0285EF 0%, #01DCD8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hm-route-list__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.hm-route-list__count {
    font-size: 0.95rem;
    color: #2a6496;
    font-weight: 600;
}

.hm-route-list__btn {
    padding: 8px 18px;
    background: #2a6496;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
}

.hm-route-list__btn:hover {
    background: #1e5078;
}

.hm-route-list__btn::before {
    content: '+';
    font-size: 1rem;
    font-weight: 700;
}

.hm-route-list__body {
    display: flex;
    flex-direction: column;
}

.hm-route-item {
    background: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.hm-route-item:hover {
    background: rgba(0,0,0,0.05);
}

.hm-route-item__img {
    width: 54px;
    height: 54px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.hm-route-item__img--red        { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.hm-route-item__img--green      { background: linear-gradient(135deg, #27ae60, #1e8449); }
.hm-route-item__img--purple     { background: linear-gradient(135deg, #8e44ad, #6c3483); }
.hm-route-item__img--orange     { background: linear-gradient(135deg, #e67e22, #d35400); }
.hm-route-item__img--blue       { background: linear-gradient(135deg, #2980b9, #1a5276); }
.hm-route-item__img--brown      { background: linear-gradient(135deg, #795548, #5d4037); }
.hm-route-item__img--blue-light { background: linear-gradient(135deg, #3498db, #2471a3); }

.hm-route-item__content {
    flex: 1;
    min-width: 0;
}

.hm-route-item__title {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    margin: 0 0 8px;
    line-height: 1.3;
    font-family: PingFang SC, PingFang SC;
}

.hm-route-item__tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: hidden;
}

.hm-route-item__tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    background: #EBF7FD;
    color: #029AE9;
    flex-shrink: 0;
    white-space: nowrap;
}

.hm-route-item__tag:last-child {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====== 标签页导航 ====== */
.hm-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hm-tabs__item {
    padding: 8px 18px;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: #666;
    cursor: pointer;
    border-radius: 6px;
    white-space: nowrap;
    transition: all 0.2s;
}

.hm-tabs__item:hover {
    background: #eef2f7;
}

.hm-tabs__item--active {
    background: #2a6496;
    color: #fff;
}

.hm-tabs__item--active:hover {
    background: #1e5078;
}

.hm-tabs__item--add {
    color: #2a6496;
    font-weight: bold;
}
/* ====== 规划面板 ====== */
.hm-planning {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.hm-planning__tabs {
    flex-shrink: 0;
}
#cr-planning-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#cr-planning-content::-webkit-scrollbar {
    display: none;
}
/* ====== 规划标签页 ====== */
		.hm-planning__tabs {
		    display: flex;
            align-items: center;
		    gap: 4px;
		    margin: 16px 0;
            padding: 0 16px;
		}

		.hm-planning__tabs-scroll {
		    display: flex;
		    align-items: center;
		    gap: 4px;
		    overflow-x: auto;
		    flex: 1;
		    min-width: 0;
		    scrollbar-width: none;
		    -ms-overflow-style: none;
		}

		.hm-planning__tabs-scroll::-webkit-scrollbar {
		    display: none;
		}
		.hm-planning__tab {
		    padding: 8px 16px;
		    background: #fff;
		    font-size: 0.875rem;
		    color: #666;
		    cursor: pointer;
		    border-radius: 4px;
		    white-space: nowrap;
		    transition: all 0.2s;
            border-radius: 24px;
            height:32px;
            line-height:0.875rem;
            border: 1px solid rgba(0,0,0,0.15)
		}
	.hm-planning__tab:hover {
		    background: linear-gradient( 90deg, #0285EF 0%, #01DCD8 100%), #1678FF;
            color: #fff;
            border: 1px solid #fff;
		}
	.hm-planning__tab--active {
	    background: linear-gradient( 90deg, #0285EF 0%, #01DCD8 100%), #1678FF;
        color: #fff;
        border: 1px solid #fff;
	}

		.hm-planning__arrow {
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    color: #666;
		    flex-shrink: 0;
		    cursor: pointer;
		    padding: 0;
		    transition: color 0.2s;
		}

		.hm-planning__arrow:hover {
		    color: #0285EF;
		}

	.hm-planning__add {
	    width: 32px;
	    height: 32px;
	    background: linear-gradient(90deg, #0285EF 0%, #01DCD8 100%), #1678FF;
	    box-shadow: 0px 6px 12px 0px rgba(2,134,238,0.2);
	    border-radius: 32px;
	    border: none;
	    cursor: pointer;
	    padding: 0;
	    color: #fff;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    transition: opacity 0.2s;
	    flex-shrink: 0;
	}

	.hm-planning__add:hover {
	    opacity: 0.85;
	}


/* ====== 主内容区 ====== */
.hm-main {
    display: flex;
    flex: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: calc(100vh - 150px);
}

/* ====== 左侧边栏 ====== */
.hm-sidebar {
    width: 380px;
    min-width: 380px;
    background: #fff;
    border-right: 1px solid #e8ecf1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hm-sidebar__scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
    background: linear-gradient( 43deg, #EBF6FF 0%, #FFFFFF 40.62%, #FFFFFF 73.11%, #F8FFFF 100%);
    box-shadow: 0px -4px 6px -2px rgba(10,13,18,0.03), 0px -16px 16px -4px rgba(10,13,18,0.08), -1px 0px 0px 0px #F5F5F5;
    border-radius: 0px 0px 0px 0px;
}

.hm-sidebar__scroll::-webkit-scrollbar {
    display: none;
}

/* ====== 总览面板 ====== */
.hm-overview {
    padding: 0 16px 16px;
}

.hm-overview__header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.hm-overview__header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: #333;
}

.hm-overview__tag {
    display: inline-block;
    background-color: #ff3355;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    margin-left: 10px;
    vertical-align: middle;
}

.hm-overview__card {
    background-color: #f0f9ff;
    border-radius: 12px;
    padding: 16px;
}

.hm-overview__summary-bar {
    background-color: #fff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-size: 0.85rem;
    color: #333333;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hm-overview__summary-bar .divider {
    margin: 0 4px;
    color: #888888;
}

.hm-overview__summary-bar .iconfont {
    color: #999999;
}

.hm-day-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 12px 0;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: relative;
}

.hm-day-item:last-child {
    margin-bottom: 0;
}

.hm-day-item__header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.hm-day-item__marker {
    width: 4px;
    height: 16px;
    border-radius: 3px;
    margin-right: 8px;
}

.hm-day-item__marker--1 {
    background-color: #0290ED;
}
.hm-day-item__marker--2 {
    background-color: #24C14C;
}
.hm-day-item__marker--3 {
    background-color: #00B5D8;
}
.hm-day-item__marker--4 {
    background-color:#14B8A6;
}
.hm-day-item__marker--5 {
    background-color: #84CC16;
}
.hm-day-item__marker--6 {
    background-color: #EAB308;
}
.hm-day-item__marker--7 {
    background-color: #F59E0B;
}
.hm-day-item__marker--8 {
    background-color: #F97316;
}
.hm-day-item__marker--9 {
    background-color: #F472B6;
}
.hm-day-item__marker--10 {
    background-color: #A855F7;
}

.hm-day-item__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #333;
    letter-spacing: 1px;
}

.hm-day-item__route {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.6;
    padding:0 40px 0 12px;
}

.hm-day-item__actions {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.hm-day-item:hover .hm-day-item__actions {
    opacity: 1;
}

.hm-day-item__action {
    width: 28px;
    height: 28px;
    background-color: transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    border: none;
    padding: 0;
    transition: background-color 0.2s, color 0.2s;
}

.hm-day-item__action--drag {
    cursor: move;
}

.hm-day-item__action--delete:hover {
    background-color: #fdeaea;
    color: #e74c3c;
}

.hm-day-item--dragging {
    opacity: 0.4;
}

.hm-day-item--drop-before {
    border-top: 2px solid #007CF0;
}

.hm-day-item--drop-after {
    border-bottom: 2px solid #007CF0;
}

/* ====== 文字按钮 ====== */
.hm-btn-text {
    border: none;
    background: none;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
}

.hm-btn-text--danger {
    color: #e74c3c;
}

.hm-btn-text--danger:hover {
    background: #fde8e8;
}

/* ====== 行程卡片 ====== */
.hm-cards {
    padding: 16px 20px;
}


/* ====== 天数标题 ====== */
.hm-day-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

/* ====== 地点卡片（横向排列） ====== */
.hm-spot {
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    position: relative;
    background: rgba(255,255,255,0.8);
    box-shadow: 0px 6px 16px 0px rgba(0,0,0,0.08);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #F5F5F5;
    cursor: pointer;
}

.hm-spot__img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hm-spot__img--red        { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.hm-spot__img--green      { background: linear-gradient(135deg, #27ae60, #1e8449); }
.hm-spot__img--purple     { background: linear-gradient(135deg, #8e44ad, #6c3483); }
.hm-spot__img--orange     { background: linear-gradient(135deg, #e67e22, #d35400); }
.hm-spot__img--blue       { background: linear-gradient(135deg, #2980b9, #1a5276); }
.hm-spot__img--brown      { background: linear-gradient(135deg, #795548, #5d4037); }
.hm-spot__img--blue-light { background: linear-gradient(135deg, #3498db, #2471a3); }

.hm-spot__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 40px;
}

.hm-spot__name {
    font-size: 0.85rem;
    color: #333;
    font-weight: 500;
}

.hm-spot__tag {
    display: inline-block;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.hm-spot__tag--red        { background: #fdeaea; color: #e74c3c; }
.hm-spot__tag--green      { background: #e6f7ed; color: #27ae60; }
.hm-spot__tag--purple     { background: #f0e6f6; color: #8e44ad; }
.hm-spot__tag--orange     { background: #fff3e0; color: #e67e22; }
.hm-spot__tag--blue       { background: #e3f2fd; color: #2980b9; }
.hm-spot__tag--brown      { background: #efebe9; color: #795548; }
.hm-spot__tag--blue-light { background: #e8f4fd; color: #3498db; }

.hm-spot__actions {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.hm-spot:hover .hm-spot__actions {
    opacity: 1;
}

.hm-spot__action {
    width: 28px;
    height: 28px;
    background-color: transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    border: none;
    padding: 0;
    transition: background-color 0.2s, color 0.2s;
}

.hm-spot__action--drag {
    cursor: move;
}
.hm-spot--dragging {
    opacity: 0.4;
    background: #f5f5f5;
}
.hm-spot--drag-over {
    border-top: 2px solid #0285EF;
}

.hm-spot__action--delete:hover {
    background-color: #fdeaea;
    color: #e74c3c;
}

/* ====== 拖拽排序样式 ====== */
.hm-spot--dragging {
    opacity: 0.4;
}

.hm-spot--drop-before {
    border-top: 2px solid #0285EF;
}

.hm-spot--drop-after {
    border-bottom: 2px solid #0285EF;
}

.hm-cards--drop-target {
    background-color: rgba(2, 133, 239, 0.06);
    border-radius: 8px;
}

/* ====== 添加栏 ====== */
.hm-add-bar {
    background-color: #fff;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-top: 10px;
}

.hm-add-bar__btn {
    padding: 4px;
    font-size: 0.8rem;
    color: #2196f3;
    font-weight: 500;
    cursor: pointer;
    border: none;
    border-radius: 6px;
    background: none;
    transition: background-color 0.2s;
}

.hm-add-bar__btn:hover {
    background: rgba(0,124,240,0.05);
}

.hm-add-bar__divider {
    font-size: 0.8rem;
    color: #ccc;
}

/* ====== 添加地点面板 ====== */
.hm-add-location {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.hm-add-location__header {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hm-add-location__back {
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
}

.hm-add-location__title {
    font-family: PingFang SC, PingFang SC;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.hm-add-location__search {
    display: flex;
    align-items: center;
    border-radius: 20px;
    padding: 10px 12px;
    gap: 4px;
    background: rgba(255,255,255,0.8);
    box-shadow: 0px 6px 16px 0px rgba(0,0,0,0.08);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #F5F5F5;
}

.hm-add-location__search-input {
    flex: 1;
    background: none !important;
    font-size: 0.8rem;
    color: #333;
    outline: none !important;
    box-shadow: none !important;
    height: 24px !important;
    border: none !important;
}

.hm-add-location__search-input:-webkit-autofill,
.hm-add-location__search-input:-webkit-autofill:hover,
.hm-add-location__search-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

.hm-add-location__search-input::placeholder {
    color: #666;
}

.hm-add-location__tags-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.hm-add-location__tags {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
}

.hm-add-location__tags::-webkit-scrollbar {
    display: none;
}

.hm-add-location__tags-arrow {
    width: 16px;
    height: 16px;
    /* background: rgba(255,255,255,0.85); */
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    flex-shrink: 0;
    /* box-shadow: 0 1px 4px rgba(0,0,0,0.1); */
}

.hm-add-location__tags-arrow--show {
    display: flex;
}

.hm-add-location__tags-arrow--left {
    margin-right: 4px;
}

.hm-add-location__tags-arrow--right {
    margin-left: 4px;
}

.hm-add-location__tag {
    padding: 4px 14px;
    font-size: 0.75rem;
    cursor: pointer;
    color: #535862;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    background: #FFFFFF;
    border-radius:20px;
    border: 1px solid rgba(0,0,0,0.15)
}

.hm-add-location__tag--active {
    font-weight: 500;
    background: linear-gradient( 90deg, #0285EF 0%, #01DCD8 100%);
    color: #fff;
    border: 1px solid #fff;
}

.hm-add-location__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
}

.hm-add-location__item {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    background: rgba(255,255,255,0.8);
    box-shadow: 0px 6px 16px 0px rgba(0,0,0,0.08);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #F5F5F5;
}

.hm-add-location__item-img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #fff;
    flex-shrink: 0;
    font-weight: 600;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hm-add-location__item-img--red        { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.hm-add-location__item-img--green      { background: linear-gradient(135deg, #27ae60, #1e8449); }
.hm-add-location__item-img--purple     { background: linear-gradient(135deg, #8e44ad, #6c3483); }
.hm-add-location__item-img--orange     { background: linear-gradient(135deg, #e67e22, #d35400); }
.hm-add-location__item-img--blue       { background: linear-gradient(135deg, #2980b9, #1a5276); }
.hm-add-location__item-img--brown      { background: linear-gradient(135deg, #795548, #5d4037); }
.hm-add-location__item-img--blue-light { background: linear-gradient(135deg, #3498db, #2471a3); }

.hm-add-location__item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hm-add-location__item-name {
    font-size: 0.85rem;
    color: #333;
    font-weight: 500;
}

.hm-add-location__item-cat {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    width: fit-content;
}

.hm-add-location__item-cat--red        { background: #fdeaea; color: #e74c3c; }
.hm-add-location__item-cat--green      { background: #e6f7ed; color: #27ae60; }
.hm-add-location__item-cat--purple     { background: #f0e6f6; color: #8e44ad; }
.hm-add-location__item-cat--orange     { background: #fff3e0; color: #e67e22; }
.hm-add-location__item-cat--blue       { background: #e3f2fd; color: #2980b9; }
.hm-add-location__item-cat--brown      { background: #efebe9; color: #795548; }
.hm-add-location__item-cat--blue-light { background: #e8f4fd; color: #3498db; }

.hm-add-location__item-desc {
    font-size: 0.7rem;
    color: #999;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hm-add-location__item-status {
    font-size: 0.7rem;
    color: #4caf50;
}

.hm-add-location__item-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background-color: rgba(0,124,240,0.05);
    color: #007CF0;
    font-size: 0.75rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s, color 0.2s;
}

.hm-add-location__item-btn:hover {
    background-color: rgba(0,124,240,0.12);
}

.hm-add-location__item-btn--added {
    background-color: rgba(0,124,240,0.05);
    color: #007CF0;
}

.hm-add-location__item-btn--added:hover {
    background-color: rgba(231,76,60,0.08);
    color: #e74c3c;
}

/* ====== 添加路线面板 ====== */
.hm-add-route {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.hm-add-route__header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hm-add-route__back {
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
}
.hm-add-route__title {
    font-family: PingFang SC, PingFang SC;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.hm-add-route__desc {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
    margin:4px 0 0;
}

.hm-add-route__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hm-add-route__item {
    padding: 12px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    position: relative;
    background: #FFFFFF;
    box-shadow: 0px 6px 16px 0px rgba(0,0,0,0.08);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #F5F5F5;
}

.hm-add-route__item-img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
}

.hm-add-route__item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hm-add-route__item-name {
    font-size: 0.85rem;
    color: #333;
    font-weight: 500;
}

.hm-add-route__item-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.hm-add-route__item-tag {
    background: #e6f2ff;
    color: #409eff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
}

.hm-add-route__item-path {
    font-size: 0.7rem;
    color: #666;
    line-height: 1.3;
}

.hm-add-route__item-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background-color: rgba(0,124,240,0.05);
    color: #007CF0;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s, color 0.2s;
}

.hm-add-route__item-btn:hover {
    background-color: rgba(0,124,240,0.12);
}

.hm-add-route__item-btn--added {
    background-color: rgba(0,124,240,0.05);
    color: #007CF0;
}

.hm-add-route__item-btn--added:hover {
    background-color: rgba(231,76,60,0.08);
    color: #e74c3c;
}

.hm-add-route__item-tooltip {
    position: absolute;
    right: 44px;
    top: 8px;
    background: #333;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    white-space: nowrap;
}

.hm-add-route__item-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #333;
}

/* ====== 添加住宿面板 ====== */
.hm-add-hotel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.hm-add-hotel__header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hm-add-hotel__back {
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
}

.hm-add-hotel__title {
    font-family: PingFang SC, PingFang SC;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.hm-add-hotel__search {
    display: flex;
    align-items: center;
    background-color: #f5f7fa;
    border-radius: 8px;
    padding: 8px 12px;
    gap: 8px;
}

.hm-add-hotel__search-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 0.8rem;
    color: #333;
    outline: none;
}

.hm-add-hotel__search-input::placeholder {
    color: #999;
}

.hm-add-hotel__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hm-add-hotel__item {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.hm-add-hotel__item-img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    flex-shrink: 0;
    object-fit: cover;
}

.hm-add-hotel__item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hm-add-hotel__item-name {
    font-size: 0.85rem;
    color: #333;
    font-weight: 500;
}

.hm-add-hotel__item-desc {
    font-size: 0.7rem;
    color: #999;
}

.hm-add-hotel__item-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background-color: #f5f7fa;
    color: #409eff;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s, color 0.2s;
}

.hm-add-hotel__item-btn--added {
    background-color: #e3f2fd;
    color: #2196f3;
}

.hm-add-hotel__item-btn--added:hover {
    background-color: #fdeaea;
    color: #e74c3c;
}
.hm-card {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
    transition: box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
}

.hm-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: #2a6496;
}

.hm-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e8ecf1;
}

.hm-card__day {
    font-size: 0.75rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 1px;
}

.hm-card__drag {
    font-size: 0.75rem;
    color: #999;
    cursor: grab;
}

.hm-card__img {
    width: 100%;
    height: 140px;
    background: #e8ecf1;
    overflow: hidden;
}

.hm-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ====== 卡片缩略图占位 ====== */
.hm-card__img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
}

.hm-card__img-placeholder--red        { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.hm-card__img-placeholder--green      { background: linear-gradient(135deg, #27ae60, #1e8449); }
.hm-card__img-placeholder--purple     { background: linear-gradient(135deg, #8e44ad, #6c3483); }
.hm-card__img-placeholder--orange     { background: linear-gradient(135deg, #e67e22, #d35400); }
.hm-card__img-placeholder--blue       { background: linear-gradient(135deg, #2980b9, #1a5276); }
.hm-card__img-placeholder--brown      { background: linear-gradient(135deg, #795548, #5d4037); }
.hm-card__img-placeholder--blue-light { background: linear-gradient(135deg, #3498db, #2471a3); }

.hm-card__body {
    padding: 14px 16px;
}

.hm-card__title {
    font-size: 0.95rem;
    margin: 0 0 6px;
    color: #1a1a1a;
}

.hm-card__desc {
    font-size: 0.8rem;
    color: #888;
    margin: 0 0 8px;
}

/* ====== 标签 ====== */
.hm-card__tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.hm-card__tag--red        { background: #fdeaea; color: #e74c3c; }
.hm-card__tag--green      { background: #e6f7ed; color: #27ae60; }
.hm-card__tag--purple     { background: #f0e6f6; color: #8e44ad; }
.hm-card__tag--orange     { background: #fff3e0; color: #e67e22; }
.hm-card__tag--blue       { background: #e3f2fd; color: #2980b9; }
.hm-card__tag--brown      { background: #efebe9; color: #795548; }
.hm-card__tag--blue-light { background: #e8f4fd; color: #3498db; }

/* ====== 卡片操作按钮 ====== */
.hm-card__actions {
    display: flex;
    gap: 8px;
    padding: 10px 16px 14px;
}

.hm-btn-action {
    border: 1px solid #2a6496;
    background: transparent;
    color: #2a6496;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.hm-btn-action:hover {
    background: #2a6496;
    color: #fff;
}

/* ====== 备注面板 ====== */
.hm-notes {
    padding: 20px;
}

.hm-notes__text {
    min-height: 100px;
    padding: 12px;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.6;
    white-space: pre-wrap;
    background: rgba(255,255,255,0.8);
    box-shadow: 0px 6px 16px 0px rgba(0,0,0,0.08);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #F5F5F5;
}

.hm-notes__textarea {
    width: 100%;
    min-height: 200px;
    border: 1px solid #e8ecf1;
    border-radius: 8px;
    padding: 12px;
    font-size: 0.9rem;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.hm-notes__textarea:focus {
    border-color: #e8ecf1;
}

/* ====== 侧边栏底部 ====== */
.hm-sidebar__footer {
    padding: 16px 20px;
    border-top: 1px solid #e8ecf1;
}

.hm-save-status {
    font-size: 0.75rem;
    text-align: center;
    padding: 0 0 6px;
    display: none;
}

.hm-save-status--saving { display: block; color: #999; }
.hm-save-status--saved  { display: block; color: #4caf50; }
.hm-save-status--error  { display: block; color: #e74c3c; }

.hm-btn-book {
    width: 100%;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s;
    background: linear-gradient( 90deg, #0285EF 0%, #01DCD8 100%), #1678FF;
    box-shadow: 0px 6px 12px 0px rgba(2,134,238,0.2);
    border-radius: 6px 6px 6px 6px;
}

.hm-btn-book:hover {
    opacity: 0.9;
}

/* ====== 右侧地图区域 ====== */
.hm-map {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

.hm-map__search {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 6px;
    padding: 0 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    width: auto;
    height: 36px;
    /* border: 1px solid #1677ff; */
    cursor: pointer;
}

.hm-map__search:focus-within {
    width: 220px;
    cursor: text;
}

.hm-map__search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: #999;
}

.hm-map__search-icon svg {
    display: block;
}

.hm-map__search-label {
    font-size: 13px;
    color: #999;
    flex-shrink: 0;
    margin-right: 6px;
    cursor: pointer;
}

.hm-map__search:focus-within .hm-map__search-label {
    display: none;
}

.hm-map__search-input {
    border: none !important;
    background: transparent;
    font-size: 14px;
    outline: none;
    flex: 0 0 0;
    max-width: 0;
    overflow: hidden;
    height: 36px;
    color: #333;
    padding: 0;
}

.hm-map__search:focus-within .hm-map__search-input {
    flex: 1;
    max-width: none;
    overflow: visible;
}

.hm-map__search-input::placeholder {
    color: #bbb;
}

/* ====== 分类筛选标签 ====== */
.hm-map__legend {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 248px;
    z-index: 10;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hm-map__legend-item {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    border: 2px solid transparent;
    background: #fff;
    color: #535862;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hm-map__legend-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.hm-map__legend-icon-wrap .iconfont {
    width: 14px;
    height: 14px;
}

.hm-map__legend-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: middle;
}

.hm-map__legend-item:hover {
    transform: scale(1.05);
}

/* "全部" 项默认样式 */
.hm-map__legend-item[data-category="all"] {
    --legend-bg: #f0f0f0;
    --legend-color: #555;
}

/* 选中状态：背景变为主色，文字变白 */
.hm-map__legend-item--active {
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ====== 地图容器 ====== */
.hm-map__container {
    flex: 1;
    background: #e8ecf1;
    position: relative;
    z-index: 1;
}

/* ====== 地图标记样式 ====== */
.hm-marker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.2s;
    border: 2px solid #fff;
    flex-shrink: 0;
}

.hm-marker:hover {
    transform: scale(1.2);
    z-index: 999 !important;
}

.hm-marker__label {
    margin-top: 2px;
    font-size: 10px;
    color: #333;
    white-space: nowrap;
    background: #fff;
    padding: 1px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====== 信息窗体样式 ====== */
/* ====== 地点详情右侧面板 — 卡片化 ====== */
.hm-loc-detail {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 368px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-radius: 0;
    padding: 44px 0 0;
}

.hm-loc-detail__close {
    position: absolute;
    top: 0px;
    right: 12px;
    color: #333333;
    font-size: 24px;
    z-index: 10;
    cursor: pointer;
    background: #fff;
}


.hm-loc-detail__cat-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px;
}

.hm-loc-detail__body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hm-loc-detail__body::-webkit-scrollbar {
    display: none;
}

.hm-loc-detail__content {
    padding: 16px 20px;
}

/* ====== 分类标签 ====== */
.hm-loc-detail__cat {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ====== 详情面板底部按钮栏 ====== */
.hm-loc-detail__footer {
    padding: 16px 20px 24px;
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

/* 固定路线详情页隐藏底部按钮 */
.hm-loc-detail--route-detail .hm-loc-detail__footer {
    display: none;
}

.hm-loc-detail__footer-btn {
    flex: 1;
    height: 50px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 500;
    border: none;
    cursor: pointer;
}

.hm-loc-detail__footer-btn--route {
    background-color: #fff;
    border: 1px solid #d9d9d9;
    color: #333;
}

.hm-loc-detail__footer-btn--add {
    background: linear-gradient(90deg, #1677ff 0%, #13c2c2 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.hm-loc-detail__footer-btn--remove {
    background: linear-gradient(90deg, #E74C3C 0%, #C0392B 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ====== 详情面板 Feature 列表 ====== */
.hm-loc-detail__features {
    margin-top: 16px;
}

.hm-loc-detail__feature {
    display: flex;
    margin-bottom: 16px;
    gap: 10px;
}

.hm-loc-detail__feature-dot {
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.hm-loc-detail__feature-text {
    flex: 1;
    min-width: 0;
}

.hm-loc-detail__feature-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.hm-loc-detail__feature-content {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}

/* ====== 详情面板蓝色信息块 ====== */
.hm-loc-detail__info-block {
    background-color: #e6f7ff;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 16px;
}

.hm-loc-detail__info-row {
    margin-bottom: 12px;
}

.hm-loc-detail__info-row:last-child {
    margin-bottom: 0;
}

.hm-loc-detail__info-label {
    font-size: 16px;
    font-weight: 700;
    color: #096dd9;
    margin-bottom: 4px;
}

.hm-loc-detail__info-value {
    font-size: 15px;
    color: #333;
}

/* ====== 详情面板轮播 — 主图 + 缩略图 ====== */
.hm-loc-carousel {
    position: relative;
    width: 100%;
    height: 176px;
    overflow: hidden;
    border-radius: 8px;
    padding: 0 16px;
}

.hm-loc-carousel__main {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    transition: background-image 0.3s ease;
    border-radius: 8px;
}

.hm-loc-carousel__main--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hm-loc-carousel__main--placeholder span {
    font-size: 36px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    letter-spacing: 4px;
}

.hm-loc-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    border: none;
    z-index: 2;
    transition: background 0.2s;
}

.hm-loc-carousel__arrow:hover {
    background: rgba(0, 0, 0, 0.6);
}

.hm-loc-carousel__arrow--prev { left: 26px; }
.hm-loc-carousel__arrow--next { right: 26px; }

.hm-loc-carousel__indicator {
    position: absolute;
    bottom: 6px;
    right: 26px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 2;
}

.hm-loc-thumbnail-list {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
}

.hm-loc-thumbnail-item {
    flex: 1;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s;
}

.hm-loc-thumbnail-item--active {
    border-color: #409eff;
}

.hm-loc-thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hm-loc-detail__title {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 9px;
}

.hm-loc-detail__desc {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
    margin: 0 0 16px;
}

/* ====== 图标占位 ====== */
.hm-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.hm-icon--edit::before    { content: '\270F'; font-size: 14px; }
.hm-icon--calendar::before { content: '\1F4C5'; font-size: 14px; }
.hm-icon--user::before    { content: '\1F464'; font-size: 14px; }
.hm-icon--route::before   { content: '\1F6B0'; font-size: 14px; }
.hm-icon--cart::before    { content: '\1F6D2'; font-size: 14px; }

/* ====== Toast 提示 ====== */
.ca-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 16px 36px;
    border-radius: 8px;
    font-size: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 9999;
}

.ca-toast--show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ====================================================================
   响应式：平板（<= 1024px）
   ==================================================================== */
@media (max-width: 1024px) {
    .hm-sidebar {
        width: 320px;
        min-width: 320px;
    }
}

/* ====================================================================
   响应式：手机（<= 768px）
   ==================================================================== */
@media (max-width: 768px) {
    .hm-page {
        min-height: auto;
    }

    .hm-route-topbar {
        padding: 10px 12px;
    }

    .hm-route-topbar__inner {
        flex-wrap: wrap;
        gap: 10px;
    }

    .hm-route-topbar__title {
        font-size: 0.95rem;
        color: #333333;
    }

    .hm-route-topbar__btn {
        width: 100%;
        text-align: center;
        padding: 10px;
    }

    .hm-topbar {
        padding: 10px 12px;
    }

    .hm-topbar__info {
        gap: 8px;
    }

    .hm-topbar__field {
        min-width: 120px;
        padding: 5px 8px;
    }

    .hm-main {
        flex-direction: column;
    }

    .hm-map {
        min-height: 280px;
        order: 1;
    }


    .hm-map__search:focus-within {
        width: 200px;
    }

    .hm-map__legend {
        max-width: none;
        padding: 8px 10px;
    }

    .hm-sidebar {
        width: 100%;
        min-width: auto;
        order: 2;
        border-right: none;
        border-top: 1px solid #e8ecf1;
    }

    .hm-sidebar__scroll {
        max-height: 60vh;
    }

    .hm-overview,
    .hm-cards,
    .hm-notes {
        padding: 14px 12px;
    }

    .hm-card__img {
        height: 120px;
    }

    .hm-card__actions {
        flex-wrap: wrap;
    }

    .hm-sidebar__footer {
        padding: 12px;
    }
}

/* ====================================================================
   响应式：小屏手机（<= 480px）
   ==================================================================== */
@media (max-width: 480px) {
    .hm-topbar__info {
        flex-direction: column;
    }

    .hm-topbar__field {
        min-width: auto;
    }

    .hm-tabs {
        gap: 2px;
    }

    .hm-tabs__item {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .hm-map {
        min-height: 220px;
    }

    .hm-map__search {
        top: 10px;
        right: 10px;
    }

    .hm-map__search:focus-within {
        width: 160px;
    }

    .hm-map__search-input {
        font-size: 0.8rem;
        padding: 6px 10px;
    }

    .hm-map__legend {
        top: 10px;
        left: 10px;
        max-width: none;
        gap: 4px;
    }

    .hm-map__legend-item {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    .hm-map__legend-icon {
        width: 12px;
        height: 12px;
    }

    .hm-marker {
        width: 28px;
        height: 28px;
        font-size: 0.6rem;
    }

    .hm-marker__label {
        font-size: 9px;
        max-width: 60px;
    }
}

/* ====================================================================
   地点详情弹窗（模态框）
   ==================================================================== */

/* ====== 路线选择弹窗 ====== */
.hm-route-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.hm-route-popup-overlay--show {
    opacity: 1;
    pointer-events: auto;
}

.hm-route-popup {
    background: #fff;
    border-radius: 14px;
    width: 480px;
    max-width: 92vw;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s ease;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.hm-route-popup-overlay--show .hm-route-popup {
    transform: translateY(0) scale(1);
}

.hm-route-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #e8ecf1;
}

.hm-route-popup__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.hm-route-popup__close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f0f0;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.hm-route-popup__close:hover {
    background: #e0e0e0;
}

.hm-route-popup__list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hm-route-popup__card {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.hm-route-popup__card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: #2a6496;
}

.hm-route-popup__img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
}

.hm-route-popup__body {
    flex: 1;
    min-width: 0;
}

.hm-route-popup__name {
    font-size: 0.9rem;
    color: #1a1a1a;
    margin: 0 0 6px;
    font-weight: 600;
    line-height: 1.3;
}

.hm-route-popup__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.hm-route-popup__tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
}

.hm-route-popup__arrow {
    font-size: 1.4rem;
    color: #ccc;
    flex-shrink: 0;
    line-height: 1;
}

.hm-route-popup__empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 0.9rem;
}

/* 路线选择弹窗响应式 */
@media (max-width: 768px) {
    .hm-route-popup {
        width: 100%;
        max-width: 100vw;
        max-height: 70vh;
        border-radius: 14px 14px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
    }
}

@media (max-width: 480px) {
    .hm-route-popup__img {
        width: 48px;
        height: 48px;
    }
}