/* ===== 日本旅游网站主样式 ===== */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --red:#bf0000; --red-d:#990000; --red-l:#fdeaea;
  --blue:#2c5f9e; --blue-l:#eef3fd;
  --orange:#ff8c00;
  --gray:#888; --gray-l:#f5f5f5; --gray-d:#333;
  --border:#e8e8e8;
}
body { font-family:-apple-system,"Hiragino Sans","Noto Sans JP","Microsoft YaHei",sans-serif; background:var(--gray-l); color:var(--gray-d); line-height:1.6; padding-bottom:64px; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

/* 顶部导航 */
.navbar { background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.navbar-inner { max-width:1200px; margin:0 auto; padding:0 16px; display:flex; align-items:center; height:60px; }
.logo { font-size:20px; font-weight:800; color:var(--red); margin-right:32px; white-space:nowrap; }
.logo span { color:var(--gray-d); font-size:12px; font-weight:400; }
.nav-menu { display:flex; gap:4px; flex:1; }
.nav-menu a { padding:8px 14px; border-radius:4px; font-size:14px; color:var(--gray-d); }
.nav-menu a:hover, .nav-menu a.active { background:var(--red-l); color:var(--red); }
.nav-search { display:flex; gap:8px; }
.nav-search input { padding:7px 12px; border:1px solid var(--border); border-radius:4px; font-size:13px; width:180px; }
.nav-search button { padding:8px 18px; background:linear-gradient(135deg,var(--red),var(--red-d)); color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 3px 10px rgba(191,0,0,.22); transition:all .2s ease; }
.nav-search button:hover { filter:brightness(1.05); transform:translateY(-1px); }
.nav-user { display:flex; align-items:center; gap:8px; margin-left:12px; }
.nav-user a { padding:7px 16px; font-size:13px; border-radius:8px; font-weight:700; transition:all .2s ease; }
.nav-user .btn-login { background:linear-gradient(135deg,var(--red),var(--red-d)); color:#fff; box-shadow:0 3px 10px rgba(191,0,0,.22); }
.nav-user .btn-login:hover { filter:brightness(1.05); transform:translateY(-1px); }
.nav-user .btn-reg { border:1px solid #d9d9d9; color:var(--gray-d); background:#fff; }
.nav-user .btn-reg:hover { border-color:var(--red); color:var(--red); background:#fff8f8; transform:translateY(-1px); }
.nav-user .username { font-size:13px; color:var(--gray-d); }
.nav-user .username strong { color:var(--red); }
.nav-user .logout { font-size:12px; color:var(--gray); cursor:pointer; }
.nav-user .logout:hover { color:var(--red); }

/* 用户登录/注册页 */
.auth-page { background:linear-gradient(135deg,var(--red),var(--red-d)); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-box { background:#fff; border-radius:8px; padding:36px; width:380px; box-shadow:0 8px 32px rgba(0,0,0,.2); }
.auth-box h1 { text-align:center; font-size:22px; color:var(--gray-d); margin-bottom:6px; }
.auth-box .sub { text-align:center; font-size:13px; color:var(--gray); margin-bottom:24px; }
.auth-box .form-row { margin-bottom:16px; }
.auth-box label { display:block; font-size:13px; color:#555; margin-bottom:6px; }
.auth-box input { width:100%; padding:10px 14px; border:1px solid #d9d9d9; border-radius:4px; font-size:14px; }
.auth-box input:focus { border-color:var(--red); outline:none; box-shadow:0 0 0 2px rgba(191,0,0,.15); }
.auth-box .btn-auth { width:100%; padding:12px; border-radius:10px; }
.auth-box .switch { text-align:center; font-size:13px; color:var(--gray); margin-top:18px; }
.auth-box .switch a { color:var(--red); }
.auth-error { color:var(--red); font-size:13px; text-align:center; margin-top:8px; display:none; }
.auth-tip { background:#fdeaea; border:1px solid #f5b5b5; border-radius:4px; padding:10px 12px; font-size:12px; color:var(--red-d); margin-top:16px; line-height:1.6; }

/* 模态框（首页注册/登录弹窗） */
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-mask.show { display:flex; }
.modal-box { background:#fff; border-radius:8px; padding:32px; width:380px; max-width:100%; box-shadow:0 8px 32px rgba(0,0,0,.2); position:relative; }
.modal-box .close { position:absolute; top:10px; right:14px; font-size:22px; color:var(--gray); cursor:pointer; line-height:1; }
.modal-box .close:hover { color:var(--gray-d); }
.modal-box h2 { text-align:center; font-size:20px; color:var(--gray-d); margin-bottom:6px; }
.modal-box .sub { text-align:center; font-size:13px; color:var(--gray); margin-bottom:20px; }
.modal-box .form-row { margin-bottom:14px; }
.modal-box label { display:block; font-size:13px; color:#555; margin-bottom:6px; }
.modal-box input { width:100%; padding:9px 12px; border:1px solid #d9d9d9; border-radius:4px; font-size:14px; }
.modal-box input:focus { border-color:var(--red); outline:none; box-shadow:0 0 0 2px rgba(191,0,0,.15); }
.modal-box .btn-auth { width:100%; padding:12px; border-radius:10px; }
.modal-box .switch { text-align:center; font-size:13px; color:var(--gray); margin-top:14px; }
.modal-box .switch a { color:var(--red); cursor:pointer; }
.modal-error { color:var(--red); font-size:13px; text-align:center; margin-top:6px; display:none; }
.modal-success { color:#52c41a; font-size:13px; text-align:center; margin-top:6px; display:none; }

/* ===== 通用按钮 ===== */
.btn-auth,
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:12px 24px; background:linear-gradient(135deg,var(--red),var(--red-d)); color:#fff; border:none; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 6px 16px rgba(191,0,0,.28); transition:all .2s ease; }
.btn-auth:hover,
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(191,0,0,.36); filter:brightness(1.05); }
.btn-auth:active,
.btn-primary:active { transform:translateY(0); }
.btn-auth:disabled,
.btn-primary:disabled { background:#bbb !important; box-shadow:none; cursor:not-allowed; transform:none; filter:none; }

/* 次要按钮 */
.btn-cancel { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; background:#fff; color:#666; border:1px solid #d9d9d9; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s ease; }
.btn-cancel:hover { background:#f5f5f5; color:#333; border-color:#bbb; transform:translateY(-1px); }
.btn-pay { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; background:linear-gradient(135deg,var(--blue),#234d82); color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(59,118,193,.28); transition:all .2s ease; }
.btn-pay:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(59,118,193,.36); filter:brightness(1.05); }

/* 覆盖 auth/modal 里旧的 btn-auth 定义，保持宽度100% */
.auth-box .btn-auth,
.modal-box .btn-auth { width:100%; padding:12px; border-radius:10px; }

/* ===== 文件上传组件 ===== */
.file-upload { position:relative; display:block; width:100%; max-width:360px; margin:10px 0 14px; }
.file-upload input[type="file"] { display:none; }
.file-upload-label { display:flex; align-items:center; justify-content:center; gap:12px; padding:18px; background:#fff; border:2px dashed #c8c8c8; border-radius:12px; cursor:pointer; transition:all .2s ease; }
.file-upload-label:hover { border-color:var(--red); background:#fff8f8; }
.file-upload.has-file .file-upload-label { border-style:solid; border-color:var(--red); background:#fff0f0; }
.file-upload-icon { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--red),var(--red-d)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; box-shadow:0 4px 10px rgba(191,0,0,.22); }
.file-upload-text { font-size:14px; font-weight:700; color:#444; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-upload:hover .file-upload-text { color:var(--red); }

/* 小的辅助文字/链接按钮 */
.btn-text { display:inline-flex; align-items:center; gap:4px; padding:6px 10px; color:var(--red); font-size:13px; font-weight:600; background:transparent; border:none; border-radius:6px; cursor:pointer; transition:background .2s; }
.btn-text:hover { background:rgba(191,0,0,.08); }

/* 容器 */
.container { max-width:1200px; margin:0 auto; padding:24px 16px; }

/* 首页 Hero */
.hero { background:linear-gradient(135deg,var(--red),var(--red-d)); color:#fff; padding:60px 20px; text-align:center; }
.hero h1 { font-size:36px; margin-bottom:12px; }
.hero p { font-size:16px; opacity:.9; margin-bottom:24px; }
.hero-stats { display:flex; justify-content:center; gap:40px; margin-top:20px; }
.hero-stat { text-align:center; }
.hero-stat .num { font-size:28px; font-weight:800; }
.hero-stat .label { font-size:12px; opacity:.8; }

/* 卡片网格 */
.section { margin-bottom:40px; }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.section-title { font-size:20px; font-weight:700; border-left:4px solid var(--red); padding-left:10px; }
.section-more { font-size:13px; color:var(--red); }

.grid { display:grid; gap:16px; }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
@media(max-width:900px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3,.grid-2{grid-template-columns:1fr;} }

/* 卡片 */
.card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.08); transition:transform .2s,box-shadow .2s; cursor:pointer; }
.card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.12); }
.card-img { width:100%; height:160px; object-fit:cover; background:var(--gray-l); }
.card-body { padding:12px 14px; }
.card-title { font-size:15px; font-weight:700; margin-bottom:6px; color:var(--gray-d); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-meta { font-size:12px; color:var(--gray); margin-bottom:6px; }
.card-price { color:var(--red); font-weight:700; font-size:16px; }
.card-price small { font-size:11px; color:var(--gray); font-weight:400; }
.card-badge { display:inline-block; background:var(--blue-l); color:var(--blue); border-radius:3px; padding:2px 8px; font-size:11px; margin-right:4px; }

/* 城市标签 */
.city-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.city-tab { background:#fff; border:1px solid var(--border); border-radius:20px; padding:6px 16px; font-size:13px; cursor:pointer; }
.city-tab:hover, .city-tab.active { border-color:var(--red); color:var(--red); background:var(--red-l); }

/* 详情页 */
.detail-hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); background:#fff; border-radius:14px; overflow:hidden; margin-bottom:16px; box-shadow:0 5px 20px rgba(0,0,0,.08); }
.detail-hero > img { width:100%; height:100%; min-height:360px; max-height:440px; object-fit:cover; }
.detail-info { min-width:0; padding:28px; align-self:center; }
.detail-info h1 { font-size:24px; margin-bottom:8px; }
.rating { color:var(--orange); }
.rating .num { color:var(--red); font-weight:700; margin-left:4px; }
.detail-section { min-width:0; overflow-wrap:anywhere; word-break:break-word; background:#fff; border-radius:12px; padding:20px; margin-bottom:16px; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.detail-section h2 { font-size:17px; font-weight:700; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--red); }
/* ===== 介绍富文本版式 ===== */
.intro-info { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.intro-info-item { background:#f6f8fa; border:1px solid #e6e9ed; border-radius:4px; padding:6px 12px; font-size:13px; color:#444; }
.intro-info-item b { color:var(--red); font-size:14px; }
.intro-p { font-size:14px; line-height:1.95; margin:0 0 12px; color:#333; overflow-wrap:anywhere; word-break:break-word; }
.intro-p:last-child { margin-bottom:0; }
.intro-lead { margin:0; color:#333; font-size:15px; line-height:1.9; }
.hotel-focus { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.hotel-focus span { display:inline-flex; align-items:center; min-height:30px; padding:5px 12px; border-radius:100px; background:#fff3f0; color:#b83828; border:1px solid #ffd9d2; font-size:12px; font-weight:700; }
.hotel-description-info { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; margin-top:18px; padding-top:4px; border-top:1px solid #eee; }
.intro-h { font-size:15px; font-weight:700; color:var(--gray-d); margin:18px 0 8px; padding-left:10px; border-left:3px solid var(--red); }
.intro-meta { background:#fafbfc; border:1px solid #eceef1; border-radius:6px; padding:6px 14px; margin:6px 0 12px; }
.intro-meta-row { display:flex; gap:10px; padding:6px 0; border-bottom:1px dashed #e8eaed; font-size:13px; line-height:1.7; }
.intro-meta-row:last-child { border-bottom:none; }
.intro-meta-k { flex:0 0 96px; color:var(--blue); font-weight:700; }
.intro-meta-v { flex:1; color:#444; }
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.gallery img { width:100%; height:120px; object-fit:cover; border-radius:4px; cursor:pointer; }
/* 施設情報（住所/TEL/チェックイン/アウト） */
.info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px; }
.info-row { display:flex; gap:12px; padding:8px 0; border-bottom:1px dashed var(--border); font-size:14px; }
.info-k { flex:0 0 96px; color:var(--blue); font-weight:700; }
.info-v { min-width:0; flex:1; color:#444; overflow-wrap:anywhere; word-break:break-word; }
.hotel-special { display:inline-block; background:var(--orange); color:#fff; font-size:12px; padding:3px 10px; border-radius:3px; margin:6px 0; }
/* 客室・部屋タイプ */
.room-type { border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:14px; background:#fcfcfc; position:relative; }
.room-type:last-child { margin-bottom:0; }
.room-type-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:14px; align-items:start; }
.room-type-media { position:relative; width:100%; height:132px; overflow:hidden; border-radius:8px; background:var(--gray-l); }
.room-main-photo { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.room-main-photo:focus-visible { outline:3px solid #fff; outline-offset:-4px; }
.room-type-media-empty { display:flex; align-items:center; justify-content:center; color:#8b96a0; font-size:12px; }
.room-photo-zoom { position:absolute; right:6px; top:6px; padding:3px 7px; border-radius:10px; background:rgba(0,0,0,.62); color:#fff; font-size:10px; pointer-events:none; }
.room-photo-count { position:absolute; right:6px; bottom:6px; padding:2px 7px; border-radius:10px; background:rgba(0,0,0,.62); color:#fff; font-size:10px; }
.room-type-copy { min-width:0; padding-right:28px; }
.room-type-name { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; font-size:16px; line-height:1.45; font-weight:800; color:var(--gray-d); }
.room-type-desc { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font-size:13px; color:#666; margin-top:6px; line-height:1.55; }
.room-gallery { display:flex; gap:7px; overflow-x:auto; margin-top:10px; padding:1px 0 3px; scrollbar-width:thin; }
.room-gallery img { flex:0 0 78px; width:78px; height:58px; object-fit:cover; border:2px solid transparent; border-radius:6px; background:var(--gray-l); cursor:pointer; }
.room-gallery img.active { border-color:var(--red); }
.room-select-guide { margin:-2px 0 14px; color:#68737e; font-size:13px; }
.room-photo-viewer { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.86); cursor:zoom-out; }
.room-photo-viewer > img { display:block; max-width:min(1100px,94vw); max-height:88vh; width:auto; height:auto; object-fit:contain; border-radius:8px; box-shadow:0 12px 40px rgba(0,0,0,.38); cursor:default; }
.room-photo-viewer-close { position:fixed; top:18px; right:20px; z-index:1; width:42px; height:42px; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:29px; line-height:1; cursor:pointer; }
@media(max-width:700px){
  .info-grid{grid-template-columns:1fr;}
  .room-type{padding:12px;}
  .room-type.selected{padding:11px;}
  .room-type-layout{grid-template-columns:112px minmax(0,1fr);gap:10px;}
  .room-type-media{height:98px;}
  .room-type-copy{padding-right:20px;}
  .room-type-name{font-size:14px;line-height:1.4;}
  .room-type-price{font-size:12px;}
  .room-type-price b{font-size:17px;}
  .room-type-desc{-webkit-line-clamp:2;font-size:12px;line-height:1.45;}
  .room-gallery img{flex-basis:68px;width:68px;height:50px;}
  .room-photo-viewer{padding:12px;}
  .room-photo-viewer > img{max-width:96vw;max-height:82vh;}
  .room-photo-viewer-close{top:12px;right:12px;}
}

@media (max-width:768px) {
  .detail-page { padding-left:12px; padding-right:12px; }
  .detail-page .breadcrumb { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .detail-hero { display:block; border-radius:12px; }
  .detail-hero > img { display:block; width:100%; height:auto; min-height:0; max-height:none; aspect-ratio:4/3; object-fit:cover; }
  .detail-info { padding:18px 16px 20px; }
  .detail-info h1 { font-size:21px; line-height:1.38; }
  .detail-section { padding:17px 16px; border-radius:12px; }
  .hotel-description-info { grid-template-columns:1fr; }
  .info-row { gap:8px; }
  .info-k { flex-basis:100px; font-size:12px; }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .gallery img { height:auto; aspect-ratio:4/3; }
}

/* 按钮 */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 22px; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; border:none; transition:all .2s ease; }
.btn-red { background:linear-gradient(135deg,var(--red),var(--red-d)); color:#fff; box-shadow:0 4px 12px rgba(191,0,0,.24); }
.btn-red:hover { filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 6px 18px rgba(191,0,0,.32); }
.btn-gray { background:linear-gradient(135deg,#777,#555); color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.btn-gray:hover { filter:brightness(1.05); transform:translateY(-2px); }
.btn-outline { background:#fff; border:1px solid #d9d9d9; color:var(--gray-d); }
.btn-outline:hover { border-color:var(--red); color:var(--red); background:#fff8f8; transform:translateY(-2px); }

/* 页脚 */
.footer { background:var(--gray-d); color:#bbb; padding:32px 16px 20px; margin-top:40px; }
.footer-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.footer h4 { color:#fff; font-size:13px; margin-bottom:10px; }
.footer a { display:block; font-size:12px; color:#999; padding:3px 0; }
.footer a:hover { color:#fff; }
.footer-bottom { text-align:center; font-size:11px; color:#666; margin-top:20px; padding-top:16px; border-top:1px solid #444; }

/* 加载/空状态 */
.loading { text-align:center; padding:40px; color:var(--gray); }
.empty { text-align:center; padding:40px; color:var(--gray); }

/* 面包屑 */
.breadcrumb { font-size:12px; color:var(--gray); margin-bottom:12px; }
.breadcrumb a:hover { color:var(--red); }

/* 予約ボタン・部屋ロック */
.btn-book { display:inline-flex; align-items:center; justify-content:center; gap:6px; margin-top:12px; padding:12px 26px; background:linear-gradient(135deg,var(--red),var(--red-d)); color:#fff; border:none; border-radius:10px; font-size:15px; font-weight:800; cursor:pointer; box-shadow:0 6px 18px rgba(191,0,0,.28); transition:all .2s ease; }
.btn-book:hover { filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 8px 24px rgba(191,0,0,.36); }
.room-action { margin-top:6px; }
.room-locked { background:#fff6f6; border-color:#f3b5b5; }
.lock-badge { display:inline-block; background:var(--red); color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:3px; margin-left:8px; vertical-align:middle; }
.room-locked-note { display:inline-block; margin-top:12px; font-size:13px; color:var(--red-d); background:var(--red-l); padding:6px 12px; border-radius:4px; }
.room-locked-note a { color:var(--red); text-decoration:underline; }

/* 部屋タイプ選択（クリックで選択＋参考価格表示） */
.lock-badge { position:absolute; top:12px; right:12px; background:var(--red); color:#fff; font-size:11px; padding:3px 9px; border-radius:4px; font-weight:700; letter-spacing:.5px; }
.room-type.room-selectable { cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.room-type.room-selectable:hover { border-color:#e0a0a0; }
.room-type.selected { border:2px solid var(--red); box-shadow:0 0 0 3px rgba(191,0,0,.12); background:#fffafa; padding:15px; }
.room-radio { position:absolute; top:16px; right:16px; width:20px; height:20px; border:2px solid #ccc; border-radius:50%; box-sizing:border-box; background:#fff; }
.room-type.selected .room-radio { border-color:var(--red); background:radial-gradient(circle at center, var(--red) 0 6px, #fff 7px); }
.room-type-price { margin:6px 0 4px; font-size:14px; color:var(--gray-d); }
.room-type-price b { color:var(--red); font-size:18px; margin:0 4px; }
.room-type-price small { color:var(--gray); font-size:12px; }
.room-book-bar { margin-top:16px; padding-top:16px; border-top:1px dashed var(--border); display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.room-book-hint { color:#888; font-size:13px; }

/* 予約モーダル */
.modal-booking { width:460px; max-height:92vh; overflow-y:auto; }
.bk-summary { background:var(--red-l); border-radius:6px; padding:12px 14px; margin-bottom:16px; }
.bk-summary-room { display:flex; align-items:center; gap:12px; }
.bk-room-image { flex:0 0 104px; width:104px; height:78px; object-fit:cover; border-radius:7px; background:#eee; }
.bk-h { font-size:16px; font-weight:700; color:var(--red-d); }
.bk-r { font-size:13px; color:#555; margin-top:2px; }
.bk-section { margin-bottom:18px; }
.bk-section h3 { font-size:14px; font-weight:700; margin-bottom:10px; padding-left:8px; border-left:3px solid var(--red); }
.bk-price { display:flex; align-items:baseline; gap:6px; font-size:13px; color:#555; margin-bottom:6px; flex-wrap:wrap; }
.bk-price b { font-size:20px; color:var(--red); }
.bk-price small { color:var(--gray); }
.bk-total { font-size:14px; color:#333; margin-bottom:10px; }
.bk-total b { color:var(--red); font-size:16px; }
.bk-bank { background:#f8f8f8; border:1px solid var(--border); border-radius:6px; padding:10px 14px; }
.bk-bank-row { display:flex; gap:10px; padding:4px 0; font-size:13px; }
.bk-bank-row span { flex:0 0 80px; color:var(--blue); font-weight:700; }
.bk-bank-row b { flex:1; color:#333; word-break:break-all; }
.bk-note { font-size:12px; color:#666; line-height:1.7; margin-top:8px; background:#fffbe6; border:1px solid #ffe58f; border-radius:4px; padding:8px 10px; }
.bk-proof-prev { margin-top:8px; }
.bk-proof-prev img { max-width:160px; max-height:160px; border:1px solid var(--border); border-radius:4px; display:block; }
.req { color:var(--red); margin-left:2px; }

/* マイ予約 */
.order-card { background:#fff; border:1px solid var(--border); border-radius:8px; margin-bottom:14px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.order-head { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:var(--red-l); border-bottom:1px solid #f3b5b5; }
.order-id { font-weight:700; color:var(--red-d); font-size:14px; }
.order-status { font-size:12px; color:var(--red); }
.order-body { display:flex; gap:16px; padding:16px; }
.order-info { flex:1; min-width:0; }
.order-h { font-size:16px; font-weight:700; margin-bottom:6px; }
.order-r { font-size:13px; color:#444; margin-bottom:6px; }
.order-meta { font-size:13px; color:#666; margin-bottom:2px; }
.order-total { margin-top:8px; font-size:14px; }
.order-total b { color:var(--red); font-size:17px; }
.order-proof { flex:0 0 140px; }
.order-proof-label { font-size:12px; color:#888; margin-bottom:4px; }
.order-proof img { width:140px; height:140px; object-fit:cover; border:1px solid var(--border); border-radius:4px; cursor:pointer; }
@media(max-width:600px){ .order-body{flex-direction:column;} .order-proof{flex:0 0 auto;} }

/* 予約者情報（登録情報から自動表示） */
.bk-guest { background:#f8f8f8; border:1px solid var(--border); border-radius:6px; padding:10px 14px; }
.bk-guest-row { display:flex; gap:10px; padding:4px 0; font-size:13px; }
.bk-guest-row span { flex:0 0 80px; color:var(--blue); font-weight:700; }
.bk-guest-row b { flex:1; color:#333; word-break:break-all; }

/* STEP2 お支払い（予約成立後） */
.bk-pay-head { text-align:center; margin-bottom:8px; }
.bk-check { font-size:44px; color:var(--blue); line-height:1; margin-bottom:4px; }
.bk-pay-head h2 { font-size:18px; color:var(--blue); margin-bottom:8px; }
.bk-pay-note { font-size:13px; color:#555; line-height:1.7; background:var(--blue-l); border:1px solid #cfe0f5; border-radius:6px; padding:10px 12px; margin-bottom:4px; }
.bk-pay-note b { color:var(--red); }

/* マイ予約 ステータス */
.order-card.order-pending { border-color:#cfe0f5; }
.order-status.status-pending { color:var(--blue); }
.order-status.status-locked { color:var(--red); }
.order-pay-hint { font-size:12px; color:#555; line-height:1.6; background:var(--blue-l); border:1px solid #cfe0f5; border-radius:4px; padding:8px 10px; margin:8px 0; }
.order-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.order-status.status-cancelled { color:#999; }
.order-cancelled { opacity:.75; }
.order-cancelled .order-proof { display:none; }
.pay-cancel-row { margin-top:18px; text-align:center; }

/* ===== 独立お支払いページ（モーダルではない） ===== */
.pay-page { max-width:860px; }
.pay-title { font-size:24px; margin:6px 0 14px; }
.pay-status-bar { background:var(--blue-l); border:1px solid #cfe0f5; border-radius:6px; padding:12px 14px; font-size:14px; line-height:1.7; margin-bottom:18px; }
.pay-status-bar .pay-tag { display:inline-block; background:var(--blue); color:#fff; font-size:12px; padding:2px 10px; border-radius:3px; margin-right:8px; }
.pay-grid { display:flex; gap:20px; flex-wrap:wrap; }
.pay-grid .pay-left { flex:1 1 380px; }
.pay-grid .pay-right { flex:1 1 320px; }
.pay-summary { background:#fff; border:1px solid var(--border); border-radius:8px; padding:18px; }
.pay-summary h2 { font-size:17px; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--red); }
.pay-sum-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:14px; border-bottom:1px dashed #eee; }
.pay-sum-row span { color:var(--gray); }
.pay-sum-row b { text-align:right; }
.pay-sum-total { border-bottom:none; margin-top:4px; padding-top:12px; border-top:2px solid var(--border); font-size:15px; }
.pay-sum-total b { color:var(--red); font-size:18px; }
.pay-proof-block { margin-top:22px; background:#fff; border:1px solid var(--border); border-radius:8px; padding:20px; }
.pay-proof-block h3 { margin-bottom:10px; }
.pay-note { font-size:13px; color:#555; line-height:1.7; margin-bottom:6px; }
.pay-proof-prev img { max-width:240px; max-height:240px; border:1px solid var(--border); border-radius:6px; margin-top:10px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.pay-proof-block .file-upload { max-width:420px; }
.pay-proof-block .btn-primary { width:100%; max-width:420px; margin-top:4px; }
.pay-done { text-align:center; background:#fff; border:1px solid var(--border); border-radius:8px; padding:30px 20px; }
.pay-done .pay-done-ic { font-size:46px; color:#52c41a; }
.pay-done h1 { font-size:22px; margin:8px 0; }
.pay-done p { font-size:14px; color:#666; }
.pay-done .btn-auth { display:inline-flex; margin-top:16px; }
@media(max-width:600px){ .pay-grid{ flex-direction:column; } }

/* ===== ポイント・抽選（积分 / 大转盘抽奖） ===== */
.nav-pts { color:var(--red); font-weight:700; font-size:12px; margin-left:2px; }
.pay-points-earned { color:#2e9e44; font-weight:700; font-size:15px; margin:10px 0 0; }
/* ===== ポイント・抽選（积分页：会员卡质感重设计） ===== */
/* Hero 余额卡（渐变 + 装饰光斑） */
/* 积分页顶部：紧凑标题 + 余额药丸（不占首屏） */
.ph-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 14px; }
.ph-h1 { font-size:22px; font-weight:900; margin:0; color:#1c1c1c; }
.ph-bal-pill { display:inline-flex; align-items:baseline; gap:6px; background:linear-gradient(135deg,#d72638,#ff8a3d); color:#fff; padding:9px 18px; border-radius:100px; font-weight:900; box-shadow:0 6px 16px rgba(215,38,56,.3); white-space:nowrap; }
.ph-bal-pill span { font-size:11px; font-weight:700; opacity:.92; }
.ph-bal-pill b { font-size:21px; }
.ph-bal-pill b small { font-size:12px; font-weight:700; }
.ph-rule-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 16px; font-size:13px; color:#666; line-height:1.7; margin:18px 0 4px; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.ph-rule-card b { color:var(--red); font-weight:800; }
/* 抽奖区卡片 */
.ph-lucky { position:relative; background:#fff; border:1px solid var(--border); border-radius:18px; padding:24px 20px 22px; box-shadow:0 4px 20px rgba(0,0,0,.06); margin-bottom:20px; }
.ph-lucky-main { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:34px; }
.ph-wheel-wrap { position:relative; width:520px; height:520px; flex-shrink:0; margin:10px auto 4px; border:4px solid #fff; border-radius:50%; background:repeating-conic-gradient(from -7.5deg,#fff 0 7deg,#ffce54 7deg 15deg); box-shadow:0 18px 44px rgba(139,82,16,.25),0 0 0 3px rgba(255,255,255,.72); }
.ph-wheel-wrap::before { content:''; position:absolute; inset:5px; z-index:2; border:3px dotted rgba(181,113,0,.62); border-radius:50%; pointer-events:none; }
.ph-wheel-pointer { position:absolute; top:-18px; left:50%; transform:translateX(-50%); width:38px; height:52px; z-index:6; color:#e23b4e; filter:drop-shadow(0 4px 4px rgba(40,28,36,.28)); }
.ph-wheel-pointer::before { content:'♥'; position:absolute; inset:0; font-family:Georgia,serif; font-size:36px; line-height:34px; }
.ph-wheel-pointer::after { content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); border-left:7px solid transparent; border-right:7px solid transparent; border-top:22px solid #e23b4e; }
.ph-wheel-hub { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#ffe7a8); border:5px solid rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; color:#e23b4e; letter-spacing:1px; box-shadow:0 5px 18px rgba(80,46,61,.28),inset 0 0 0 2px #ffce54; z-index:4; }
.ph-wheel-disc { position:absolute; inset:13px; z-index:1; overflow:hidden; isolation:isolate; border:3px solid rgba(255,255,255,.92); border-radius:50%; transition:transform 3s cubic-bezier(.15,.6,.1,1); box-shadow:inset 0 0 28px rgba(255,255,255,.34); }
.ph-wheel-disc::after { content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.38),rgba(255,255,255,0) 56%); pointer-events:none; }
.wheel-seg { position:absolute; left:50%; top:0; width:0; height:50%; transform-origin:bottom center; }
.wheel-seg-img { position:absolute; top:4px; left:50%; transform:translateX(-50%); width:74px; height:74px; min-width:74px; min-height:74px; max-width:none; object-fit:contain; object-position:center; border:0; border-radius:0; background:transparent; box-shadow:none; filter:drop-shadow(0 2px 2px rgba(63,31,0,.24)); display:block; pointer-events:none; user-select:none; }
.wheel-seg-label { position:absolute; top:98px; left:0; display:flex; flex-direction:column; align-items:center; gap:2px; max-width:132px; font-size:17px; font-weight:800; white-space:nowrap; line-height:1.05; text-align:center; transform-origin:center; }
.wheel-seg-label span { display:block; max-width:100%; }
.wheel-seg-label-multiline { gap:3px; }
.ph-spin-side { text-align:center; width:100%; max-width:360px; }
.ph-prize-guide { text-align:left; margin-top:18px; }
.ph-prize-guide h3 { font-size:16px; font-weight:900; margin-bottom:10px; color:#2b2b2b; }
.ph-prize-list { display:grid; gap:6px; }
.ph-prize-row { display:grid; grid-template-columns:42px 52px minmax(0,1fr); align-items:center; gap:8px; min-height:58px; padding:5px 9px; border:1px solid #f0e4d1; border-radius:10px; background:#fffaf2; }
.ph-prize-rank { display:inline-flex; align-items:center; justify-content:center; height:26px; border-radius:999px; background:linear-gradient(135deg,#e23b4e,#ff8a3d); color:#fff; font-size:12px; font-weight:900; white-space:nowrap; }
.ph-prize-row img { width:52px; height:52px; object-fit:contain; border:0; border-radius:0; background:transparent; }
.ph-prize-name { min-width:0; display:flex; flex-direction:column; gap:2px; font-size:12px; line-height:1.3; color:#4b3b2b; overflow-wrap:anywhere; }
.ph-prize-name b { font-size:12px; font-weight:800; color:#3f3024; }
.ph-prize-name small { font-size:11px; font-weight:800; color:#d52f3f; }
.ph-tax-note { display:flex; flex-direction:column; gap:4px; margin-top:12px; padding:10px 12px; border-left:3px solid #d7a23a; border-radius:8px; background:#fff9ec; color:#6b5a45; font-size:11px; line-height:1.55; text-align:left; }
.ph-tax-note b { color:#4b3926; font-size:12px; }
.winner-ticker { position:absolute; left:50%; top:12px; z-index:8; display:flex; align-items:center; overflow:hidden; width:min(520px,86%); height:40px; border:1px solid rgba(255,255,255,.72); border-radius:999px; background:rgba(255,255,255,.72); box-shadow:0 6px 20px rgba(72,42,21,.14); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); opacity:0; pointer-events:none; animation:winnerPanel 24s ease both; }
.winner-ticker-label { align-self:stretch; display:flex; align-items:center; flex-shrink:0; padding:0 13px; background:rgba(226,59,78,.82); color:#fff; font-size:12px; font-weight:900; letter-spacing:.5px; z-index:2; }
.winner-ticker-window { min-width:0; height:40px; flex:1; overflow:hidden; }
.winner-ticker-track { display:flex; flex-direction:column; width:100%; animation:winnerVertical 100s linear infinite; }
.winner-ticker-item { display:flex; gap:4px; align-items:center; height:40px; min-height:40px; padding:0 16px; white-space:nowrap; font-size:13px; color:#6a4930; }
.winner-ticker-item strong { color:#d72638; font-size:14px; }
@keyframes winnerPanel { 0%,8%{opacity:0;transform:translate(-50%,-8px);} 14%,76%{opacity:1;transform:translate(-50%,0);} 90%,100%{opacity:0;transform:translate(-50%,-6px);} }
@keyframes winnerVertical { from{transform:translateY(0);} to{transform:translateY(-50%);} }
.ph-btn-spin { display:flex; flex-direction:column; align-items:center; gap:3px; width:100%; padding:16px 24px; background:linear-gradient(135deg,#ff4d4d,#ff8a3d 60%,#ffb347); color:#fff; border:none; border-radius:22px; font-weight:900; cursor:pointer; box-shadow:0 10px 26px rgba(255,77,77,.45), inset 0 1px 0 rgba(255,255,255,.4); transition:all .18s; position:relative; overflow:hidden; }
.ph-btn-spin::after { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg); animation:btnShine 2.6s infinite; }
.ph-btn-spin .ph-btn-t { font-size:18px; letter-spacing:2px; position:relative; }
.ph-btn-spin .ph-btn-cost { font-size:12px; font-weight:700; opacity:.95; background:rgba(0,0,0,.22); padding:3px 14px; border-radius:100px; margin-top:3px; position:relative; }
.ph-btn-spin:hover:not(:disabled) { transform:translateY(-3px) scale(1.02); box-shadow:0 16px 38px rgba(255,77,77,.55), inset 0 1px 0 rgba(255,255,255,.45); }
.ph-btn-spin:active:not(:disabled) { transform:translateY(1px) scale(.99); }
.ph-btn-spin:disabled { background:#d6d6d6 !important; box-shadow:none; cursor:not-allowed; transform:none; }
@keyframes btnShine { 0%{left:-60%;} 60%,100%{left:130%;} }
.ph-warn { color:#d72638; font-size:12px; margin-top:14px; font-weight:700; line-height:1.6; padding:10px 12px; background:#fff0f1; border:1px solid #ffd2d4; border-radius:10px; }
/* 貯め方・使い方 */
.ph-how { margin:22px 0; }
.ph-how-title { font-size:13px; font-weight:800; color:#666; margin:0 0 12px 4px; letter-spacing:.5px; }
.ph-how-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ph-how-card { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 16px; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.ph-how-ic { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.ph-how-ic-pay { background:linear-gradient(135deg,#fff2e6,#ffd9b3); }
.ph-how-ic-spin { background:linear-gradient(135deg,#ffe6ea,#ffbcc6); }
.ph-how-t b { display:block; font-size:14px; font-weight:800; color:#1c1c1c; margin-bottom:2px; }
.ph-how-t span { font-size:11px; color:#888; }
/* 履歴 */
.ph-section { margin:24px 0 4px; }
.ph-h2 { display:flex; align-items:center; gap:6px; font-size:15px; font-weight:800; margin:0 0 12px 4px; color:#1c1c1c; }
.ph-log { background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.ph-ll-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid #f4f4f4; font-size:13px; }
.ph-ll-row:last-child { border-bottom:none; }
.ph-ll-left { display:flex; align-items:center; gap:10px; min-width:0; }
.ph-ll-copy { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
.ph-claim-code { border:0; padding:3px 8px; border-radius:999px; background:#fff0f2; color:#bf263d; font-size:10px; font-weight:800; cursor:pointer; }
.ph-ll-img { width:34px; height:34px; border-radius:9px; object-fit:cover; border:1px solid #eee; flex-shrink:0; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.ph-ll-text { font-weight:600; color:#333; }
.ph-ll-text.ph-win { color:var(--red); font-weight:800; }
.ph-ll-time { color:#999; font-size:11px; white-space:nowrap; flex-shrink:0; }
.ph-pl-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid #f4f4f4; font-size:13px; }
.ph-pl-row:last-child { border-bottom:none; }
.ph-pl-r { font-weight:600; color:#333; flex:1; }
.ph-pl-meta { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.ph-pl-amt { font-weight:800; font-size:15px; }
.ph-pl-amt.earn { color:#e23b5a; }
.ph-pl-amt.spend { color:#888; }
.ph-pl-time { color:#999; font-size:11px; }
.ph-log-empty { padding:18px; text-align:center; color:#999; font-size:13px; }
/* 手机适配 */
@media (max-width:768px){
  .ph-topbar { margin:4px 0 12px; }
  .ph-h1 { font-size:19px; }
  .ph-bal-pill { padding:7px 14px; }
  .ph-bal-pill b { font-size:18px; }
  .ph-lucky-main { flex-direction:column; gap:16px; }
  .ph-lucky { padding:14px 10px 16px; }
  .ph-wheel-wrap { width:min(420px, calc(100vw - 76px)); height:auto; aspect-ratio:1; }
  .ph-wheel-pointer { top:-15px; width:32px; height:45px; }
  .ph-wheel-pointer::before { font-size:31px; line-height:29px; }
  .ph-wheel-pointer::after { border-left-width:6px; border-right-width:6px; border-top-width:19px; }
  .ph-wheel-hub { width:56px; height:56px; font-size:11px; border-width:4px; }
  .ph-wheel-disc { inset:11px; }
  .wheel-seg-img { width:60px; height:60px; min-width:60px; min-height:60px; top:3px; }
  .wheel-seg-label { top:88px; max-width:108px; font-size:15px; }
  .ph-spin-side { width:100%; max-width:none; }
  .ph-prize-list { grid-template-columns:1fr 1fr; }
  .ph-prize-row { grid-template-columns:36px 42px minmax(0,1fr); gap:6px; min-height:52px; padding:4px 6px; }
  .ph-prize-row img { width:42px; height:42px; }
  .ph-prize-name b { font-size:11px; }
  .ph-prize-name small { font-size:10px; }
  .winner-ticker-label { padding:0 10px; font-size:11px; }
  .winner-ticker-window { height:36px; }
  .winner-ticker-item { height:36px; min-height:36px; padding:0 10px; font-size:12px; }
  .winner-ticker { top:10px; width:calc(100% - 20px); height:36px; }
  .ph-btn-spin { padding:14px 20px; }
  .ph-how-grid { grid-template-columns:1fr; }
}
/* 超小屏再收一圈 */
@media (max-width:400px){
  .ph-wheel-wrap { width:min(360px, calc(100vw - 76px)); height:auto; aspect-ratio:1; }
  .ph-wheel-pointer { top:-13px; width:29px; height:41px; }
  .ph-wheel-pointer::before { font-size:28px; line-height:27px; }
  .ph-wheel-pointer::after { border-left-width:5px; border-right-width:5px; border-top-width:17px; }
  .ph-wheel-hub { width:50px; height:50px; font-size:10px; border-width:3px; }
  .ph-wheel-disc { inset:9px; }
  .wheel-seg-img { width:50px; height:50px; min-width:50px; min-height:50px; top:2px; }
  .wheel-seg-label { top:70px; max-width:94px; font-size:14px; }
}
/* トースト（ポップアップ禁止・代わりに軽い通知） */
.toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(20px); background:rgba(24,36,56,.95); color:#fff; padding:13px 22px; border-radius:30px; font-size:14px; font-weight:600; z-index:9998; opacity:0; transition:opacity .25s, transform .25s; box-shadow:0 8px 24px rgba(0,0,0,.35); max-width:88%; text-align:center; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
/* 当選演出（花俏） */
.win-overlay { position:fixed; inset:0; background:rgba(10,16,30,.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:9999; animation:winFade .25s ease; }
.win-card { position:relative; overflow:hidden; max-height:calc(100vh - 28px); overflow-y:auto; background:linear-gradient(135deg,#fff7da,#ffe2ee 55%,#e4f1ff); border:3px solid #ffd34d; border-radius:24px; padding:28px 24px 24px; text-align:center; width:88%; max-width:380px; box-shadow:0 24px 70px rgba(0,0,0,.45); animation:winPop .5s cubic-bezier(.2,1.5,.45,1); }
.win-emoji { font-size:64px; line-height:1; animation:winBounce 1s ease infinite; }
.win-prize-img { width:140px; height:140px; object-fit:contain; border:0; border-radius:0; background:transparent; box-shadow:none; margin:0 auto 6px; animation:winBounce 1s ease infinite; }
.win-title { font-size:21px; font-weight:900; color:#e23b5a; margin:8px 0 2px; }
.win-prize { font-size:22px; line-height:1.35; font-weight:900; color:#d4920a; margin:6px 0 2px; text-shadow:0 2px 0 #fff; overflow-wrap:anywhere; }
.win-sub { font-size:14px; color:#a05a00; margin-bottom:18px; font-weight:700; }
.win-voucher { position:relative; z-index:2; margin:2px 0 16px; padding:13px 14px; border:1px dashed #d79c24; border-radius:14px; background:rgba(255,255,255,.82); }
.win-voucher-label { font-size:12px; font-weight:800; color:#8b6a36; }
.win-voucher-code { margin:4px 0; font-size:20px; line-height:1.25; letter-spacing:1px; font-weight:900; color:#b31f36; overflow-wrap:anywhere; }
.win-voucher-time { font-size:11px; color:#777; }
.win-voucher-note { margin-top:9px; font-size:12px; line-height:1.55; color:#554536; text-align:left; }
.win-actions { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.win-actions button { min-height:42px; border:none; border-radius:24px; font-size:13px; font-weight:800; cursor:pointer; }
.win-copy { background:#fff; color:#cf3148; border:1px solid #e86a7b!important; }
.win-support { background:linear-gradient(135deg,#ff5b6e,#ff8a3d); color:#fff; box-shadow:0 6px 16px rgba(255,99,99,.35); }
.win-close { grid-column:1/-1; background:transparent; color:#777; }
.win-confetti { position:absolute; top:-14px; width:9px; height:15px; border-radius:2px; opacity:.95; animation:confettiFall linear forwards; }
@keyframes winFade { from{opacity:0} to{opacity:1} }
@keyframes winPop { 0%{transform:scale(.4);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes winBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes confettiFall { to { transform:translateY(105vh) rotate(720deg); opacity:.15; } }

/* ===== マイページ ===== */
.profile-page { padding-bottom:40px; }
.profile-card {
  display:flex; align-items:center; gap:16px;
  background:#fff; border-radius:14px; padding:20px;
  box-shadow:0 2px 10px rgba(0,0,0,.08); margin-bottom:14px;
}
.profile-avatar {
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red-d));
  color:#fff; font-size:24px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.profile-name { font-size:17px; font-weight:800; color:#222; margin-bottom:4px; }
.profile-meta { font-size:12px; color:#888; margin-bottom:2px; }
.profile-points {
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(135deg,#2c5f9e,#4d96ff); color:#fff;
  border-radius:12px; padding:16px 20px; margin-bottom:14px;
  cursor:pointer; box-shadow:0 4px 14px rgba(44,95,158,.25);
}
.profile-points b { font-size:28px; font-weight:800; }
.profile-points small { font-size:13px; margin-left:4px; }
.profile-points span { font-size:13px; opacity:.9; }
.profile-wallet { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.profile-wallet .profile-points { margin-bottom:0; }
.profile-balance {
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(135deg,#f57c00,#ff9800); color:#fff;
  border-radius:12px; padding:16px 20px;
  box-shadow:0 4px 14px rgba(245,124,0,.25);
}
.profile-balance b { font-size:28px; font-weight:800; }
.profile-balance small { font-size:13px; margin-left:4px; }
.profile-balance span { font-size:13px; opacity:.9; }
.profile-charge { margin:2px 0 16px; overflow:hidden; border-radius:16px; background:#fff; box-shadow:0 6px 20px rgba(191,0,0,.18); }
.btn-charge-main {
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:18px 20px; border:none; border-radius:16px 16px 0 0;
  background:linear-gradient(135deg,#bf0000,#ff4d4d); color:#fff;
  font-weight:900; font-size:18px; cursor:pointer;
  box-shadow:none;
  transition:all .2s ease;
}
.btn-charge-main:hover { filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 8px 26px rgba(191,0,0,.38); }
.btn-charge-main .cm-ico { font-size:22px; line-height:1; }
.btn-charge-main .cm-label { flex:0 0 auto; }
.btn-charge-main .cm-hint { flex:1 1 auto; font-size:12px; font-weight:700; opacity:.92; text-align:left; }
.btn-charge-main .cm-arrow { font-size:24px; opacity:.85; line-height:1; }
.btn-charge-main:active { transform:translateY(1px); }
.btn-charge-history { width:100%; display:flex; align-items:center; gap:10px; padding:13px 20px; border:0; border-top:1px solid rgba(191,0,0,.12); background:#fff; color:#444; font-size:14px; font-weight:800; cursor:pointer; }
.btn-charge-history .cm-ico { font-size:18px; line-height:1; }
.btn-charge-history .cm-label { flex:0 0 auto; }
.btn-charge-history .cm-hint { flex:1 1 auto; color:#888; font-size:11px; font-weight:600; text-align:left; }
.btn-charge-history .cm-arrow { color:#bbb; font-size:22px; line-height:1; }
.btn-charge-history:hover { background:#fff7f7; }
.profile-menu { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.profile-menu a {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px; border-bottom:1px solid #f0f0f0;
  color:#333; text-decoration:none; font-size:14px;
}
.profile-menu a:last-child { border-bottom:none; }
.profile-menu a span { color:#555; }
.profile-menu a .badge { background:var(--red); color:#fff; border-radius:12px; padding:2px 10px; font-size:11px; }
.profile-menu a b { color:#bbb; }
.profile-menu a.profile-logout { cursor:pointer; }
.profile-menu a.profile-logout span { color:#e0444f; font-weight:600; }
.profile-menu a.profile-logout:hover { background:#fff5f5; }

/* ===== 手机端 App 风格首页 ===== */
:root {
  --cat-red:#ff5a5f; --cat-orange:#ff8c00; --cat-green:#3bb77e;
  --cat-blue:#4a90e2; --cat-purple:#9b59b6;
}
.mobile-home { display:none; }
/* 底部导航只在手机端显示 */
.mobile-nav {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  height:60px;
  padding-bottom:env(safe-area-inset-bottom);
  background:#fff;
  border-top:1px solid var(--border);
  z-index:1000;
  box-shadow:0 -2px 10px rgba(0,0,0,.05);
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}
.m-nav-item {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:#888;
  text-decoration:none;
  font-size:10px;
  transition:color .2s;
}
.m-nav-item.active { color:var(--red); }
.m-nav-ic { font-size:20px; line-height:1; }
.m-nav-t { font-size:10px; }
#view { padding-bottom:0; }

@media(max-width:768px){
  body { padding-bottom:64px; }
  .mobile-nav { display:flex; }
  #view { padding-bottom:72px; }
  /* PC 顶部/底部在手机隐藏 */
  .navbar, .footer { display:none !important; }
  .pc-home { display:none !important; }
  .mobile-home { display:block !important; }

  /* 顶部蓝色区 */
  .m-header {
    background:linear-gradient(135deg,#2c5f9e 0%,#4d96ff 100%);
    color:#fff;
    padding:14px 16px 22px;
    box-shadow:0 4px 16px rgba(44,95,158,.22);
  }
  .m-header-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
  .m-logo { font-size:18px; font-weight:800; }
  .m-logo span { font-size:11px; font-weight:400; opacity:.9; margin-left:4px; }
  .m-points {
    background:rgba(255,255,255,.2);
    border:1px solid rgba(255,255,255,.35);
    border-radius:20px;
    padding:5px 12px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
  }
  .m-search {
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border-radius:10px;
    padding:8px 10px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
  }
  .m-search-icon { font-size:15px; color:#888; }
  .m-search input {
    flex:1;
    border:none;
    outline:none;
    font-size:14px;
    color:#333;
    background:transparent;
  }
  .m-search button {
    background:var(--red);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:7px 14px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
  }

  /* 手机首页主体 */
  .m-body { padding:18px 16px 16px; margin-top:0; position:relative; z-index:2; }

  /* 城市筛选横向滚动（只显示有酒店的真实城市） */
  .m-row-title { font-size:14px; font-weight:700; margin-bottom:10px; color:#333; }
  .m-city-row { margin-bottom:18px; }
  .m-city-scroll {
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .m-city-scroll::-webkit-scrollbar { display:none; }
  .m-chip {
    flex:0 0 auto;
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:7px 16px;
    font-size:13px;
    color:#444;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
    text-decoration:none;
  }
  .m-chip-active { background:var(--red); color:#fff; border-color:var(--red); }

  /* 推荐酒店卡片 */
  .m-section { margin-bottom:22px; }
  .m-section-head {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:12px;
  }
  .m-section-title { font-size:16px; font-weight:800; color:#333; }
  .m-section-head a { font-size:12px; color:var(--red); }
  .m-card-list { display:flex; flex-direction:column; gap:12px; }

  /* 酒店推荐：严格双列等高网格 */
  .m-hotel-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    align-items:stretch;
  }
  .m-hotel-grid .m-card {
    min-width:0;
    height:100%;
    margin:0;
    display:flex;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    text-decoration:none;
    color:inherit;
    flex-direction:column;
  }
  .m-hotel-grid .m-card-img {
    flex:none; width:100%; height:auto; aspect-ratio:4/3; min-height:0;
  }
  .m-hotel-grid .m-card-badge { display:none; }
  .m-hotel-grid .m-card-body { padding:10px; justify-content:flex-start; }
  .m-hotel-grid .m-card-title { min-height:35px; font-size:13px; line-height:1.35; -webkit-line-clamp:2; }
  .m-hotel-grid .m-card-loc { font-size:11px; margin-bottom:4px; }
  .m-hotel-grid .m-card-star { font-size:10px; }
  .m-hotel-grid .m-card-star b { font-size:11px; }
  .m-hotel-grid .m-card-review { font-size:10px; }
  .m-hotel-grid .m-card-price { font-size:12px; margin-bottom:0; }
  .m-hotel-grid .m-card-price b { font-size:16px; }
  .m-hotel-grid .m-card-tier-row { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:auto; }
  .m-hotel-grid .m-card-tier { display:inline-block; background:#eef6ff; color:#1a4b8c; font-size:10px; font-weight:800; padding:2px 7px; border-radius:5px; flex-shrink:0; }

  .m-card {
    display:flex;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    text-decoration:none;
    color:inherit;
  }
  .m-card-img {
    flex:0 0 42%;
    position:relative;
    min-height:120px;
  }
  .m-card-img img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
  .m-card-body {
    flex:1;
    padding:12px 14px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .m-card-title {
    font-size:15px;
    font-weight:800;
    color:#222;
    margin-bottom:4px;
    line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .m-card-loc { font-size:12px; color:#888; margin-bottom:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .m-card-star { color:#ff9800; font-weight:700; }
  .m-card-review { color:#aaa; font-size:11px; }
  .m-card-price { color:var(--red); font-size:14px; margin-bottom:6px; }
  .m-card-price b { font-size:19px; font-weight:800; }
  .m-card-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
  .m-card-rt {
    display:inline-block;
    background:#f0f6ff;
    color:#2c5f9e;
    border-radius:4px;
    padding:3px 8px;
    font-size:10px;
    font-weight:700;
  }
  .m-card-sub {
    font-size:11px;
    color:#777;
    line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* 底部导航已在全局定义（所有宽度固定显示） */

  /* 容器在手机上的微调 */
  .container { padding:16px; }
  .modal-box { width:100%; margin:0 16px; max-height:90vh; overflow-y:auto; }
  .footer { display:none; }
}

/* ===== 联系客服（全站右上角）===== */
.nav-support { display:inline-flex; align-items:center; gap:4px; margin-right:14px; color:#fff; background:rgba(255,255,255,.16); padding:7px 14px; border-radius:100px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.nav-support:hover { background:rgba(255,255,255,.28); }
.m-support-fab { display:none; }
@media (max-width:768px){
  .nav-support { display:none; }
  /* 客服 FAB 移到底部右下，避免遮挡顶部 header */
  .m-support-fab { display:flex; align-items:center; justify-content:center; position:fixed; bottom:74px; right:14px; z-index:1200; width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#ff5b6e,#ff8a3d); color:#fff; border:none; font-size:20px; box-shadow:0 6px 18px rgba(255,91,110,.5); cursor:pointer; }
  body:has(.detail-cta-bar) .m-support-fab { bottom:150px; }
}

/* ===== 积分页：ポイント ヒーロー（整宽大卡，取代旧半宽 ph-bals） ===== */
.ph-hero {
  position:relative; overflow:hidden;
  margin:14px 0 18px; padding:18px 20px 16px;
  border-radius:20px; color:#fff;
  background:linear-gradient(135deg,#d72638 0%,#ff5b3a 55%,#ff8a3d 100%);
  box-shadow:0 10px 28px rgba(215,38,56,.30);
}
.ph-hero-glow {
  position:absolute; right:-40px; top:-50px; width:150px; height:150px;
  border-radius:50%; background:rgba(255,255,255,.16);
}
.ph-hero-glow::after {
  content:''; position:absolute; left:-28px; top:70px; width:70px; height:70px;
  border-radius:50%; background:rgba(255,255,255,.10);
}
.ph-hero-label { position:relative; font-size:12px; font-weight:700; opacity:.92; letter-spacing:1px; }
.ph-hero-num { position:relative; font-size:30px; font-weight:900; line-height:1.1; margin-top:4px; }
.ph-hero-num small { font-size:18px; font-weight:800; margin-left:5px; }
.ph-hero-desc { position:relative; font-size:12px; opacity:.9; margin-top:8px; }

/* 充值入口 */
.ph-charge { margin:6px 0 14px; }
.ph-charge-btns { display:flex; gap:12px; flex-wrap:wrap; }
.ph-charge-btn { flex:1; min-width:140px; padding:16px; border:none; border-radius:14px; background:#fff; border:2px solid var(--red); color:var(--red); font-weight:900; font-size:15px; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.04); transition:all .2s ease; }
.ph-charge-btn:hover { background:var(--red); color:#fff; transform:translateY(-2px); }
.ph-charge-main { width:100%; padding:16px; border:none; border-radius:14px; background:linear-gradient(135deg,var(--red),var(--red-d)); color:#fff; font-weight:900; font-size:16px; cursor:pointer; box-shadow:0 6px 18px rgba(191,0,0,.25); transition:all .2s ease; }
.ph-charge-main:hover { filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 8px 24px rgba(191,0,0,.34); }
.modal-recharge { width:420px; max-width:100%; }
.ph-rf-paychoice { display:flex; flex-direction:column; gap:12px; margin:14px 0 6px; }
.ph-pay-opt { width:100%; padding:18px; border:none; border-radius:14px; background:#fff; border:2px solid var(--red); color:var(--red); font-weight:900; font-size:16px; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.04); transition:all .2s ease; }
.ph-pay-opt:hover { background:var(--red); color:#fff; transform:translateY(-2px); }
.ph-recharge-form { margin-top:14px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.ph-rf-head { font-weight:900; font-size:15px; margin-bottom:12px; }
.ph-rf-label { display:block; font-size:13px; color:#666; margin:10px 0 6px; }
.ph-rf-input { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-size:15px; }
.ph-rf-pay { margin-top:14px; }
.ph-rf-order { font-size:13px; color:#333; background:#f7f7f9; border-radius:10px; padding:10px 12px; margin-bottom:12px; }
.ph-bank-box { background:#fafafa; border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.ph-paypay-box { text-align:center; background:#fafafa; border:1px solid var(--border); border-radius:12px; padding:16px; }
.ph-pp-qr { width:180px; height:180px; max-width:100%; border:8px solid #fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.1); }
.ph-paypay-id { font-size:14px; margin:12px 0 4px; }
.ph-pay-note { font-size:12px; color:#777; line-height:1.6; margin:8px 0; }
.ph-rf-proof { margin-top:12px; padding:14px; background:#fafafa; border:1px solid var(--border); border-radius:10px; }
.ph-rf-label { display:block; font-size:14px; font-weight:700; color:#333; margin-bottom:8px; }
.ph-rf-proof .file-upload { max-width:360px; }
.ph-rf-proof .btn-primary { margin-top:8px; }
.ph-rf-prev { margin-top:8px; }
.ph-rf-prev img { max-width:200px; border-radius:8px; border:1px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.ph-rf-actions { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.ph-rf-closed { margin-top:14px; padding:13px 14px; border-radius:10px; background:#f3f3f3; color:#777; font-size:13px; line-height:1.6; }

/* 充值订单列表 */
.ph-rl-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px 10px; padding:12px 14px; border-bottom:1px solid #f4f4f4; font-size:13px; }
.ph-rl-row[hidden] { display:none; }
.ph-rl-row:last-child { border-bottom:none; }
.ph-rl-ic { font-size:18px; }
.ph-rl-main { flex:1; display:flex; flex-direction:column; }
.ph-rl-main b { font-size:14px; }
.ph-rl-main small { color:#999; font-size:11px; }
.ph-rl-st { font-weight:800; padding:3px 10px; border-radius:100px; font-size:12px; white-space:nowrap; }
.ph-st-pending { background:#fff4e0; color:#c97a00; }
.ph-st-ok { background:#e6f7ec; color:#1a9e54; }
.ph-st-cancel { background:#f0f0f0; color:#999; }
.ph-st-expired { background:#f0f0f0; color:#777; }
.ph-re-btn { grid-column:2 / -1; justify-self:start; border:1px solid var(--red); background:#fff; color:var(--red); border-radius:100px; padding:6px 13px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.ph-rl-more { display:block; width:calc(100% - 28px); margin:10px 14px 4px; padding:9px 12px; border:1px solid #ddd; border-radius:10px; background:#fafafa; color:#555; font-size:12px; font-weight:700; cursor:pointer; }

/* 余额支付 section */
.ph-paybal-section { background:linear-gradient(135deg,#eaf6ff,#f3f0ff); border:1px solid #cfe0ff; }

/* 客服弹窗 */
.modal-support { max-width:420px; }
.sp-claim { display:flex; flex-direction:column; gap:3px; margin:10px 0 14px; padding:12px; border-radius:12px; background:#fff5e9; border:1px dashed #e4a33c; }
.sp-claim small { color:#8a6a35; font-weight:700; }
.sp-claim b { color:#bf263d; font-size:17px; letter-spacing:.5px; overflow-wrap:anywhere; }
.sp-claim span { color:#666; font-size:11px; }
.sp-tabs { display:flex; gap:8px; margin:14px 0 16px; }
.sp-tab { flex:1; padding:10px; border:1px solid var(--border); background:#fff; border-radius:10px; font-weight:700; cursor:pointer; color:#555; }
.sp-tab.active { background:var(--red); color:#fff; border-color:var(--red); }
.sp-body { min-height:200px; }
.sp-ic { font-size:40px; text-align:center; margin-bottom:8px; }
.sp-line, .sp-tg { text-align:center; }
.sp-id { font-size:14px; margin:10px 0; }
.sp-id b { color:var(--red); }
.sp-chat { display:flex; flex-direction:column; height:320px; }
.sp-chat-log { flex:1; overflow-y:auto; padding:10px; background:#f7f7f9; border-radius:12px; margin-bottom:10px; }
.sp-msg { max-width:80%; padding:9px 12px; border-radius:14px; font-size:13px; line-height:1.5; margin-bottom:8px; word-break:break-word; }
.sp-msg-cs { background:#fff; border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:4px; }
.sp-msg-me { background:var(--red); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.sp-chat-input { display:flex; gap:8px; }
.sp-chat-input input { flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; }
.sp-chat-input button { padding:10px 16px; border:none; border-radius:10px; background:var(--red); color:#fff; font-weight:700; cursor:pointer; }
.sp-chat-tip { font-size:11px; color:#999; margin:8px 0 0; text-align:center; }

/* 手机适配补充 */
@media (max-width:768px){
  .ph-hero { display:grid; grid-template-columns:minmax(92px,auto) 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; margin:8px 0 12px; padding:9px 14px; border-radius:14px; }
  .ph-hero-label { grid-column:1; grid-row:1; font-size:10px; }
  .ph-hero-num { grid-column:1; grid-row:2; font-size:22px; margin-top:1px; }
  .ph-hero-num small { font-size:13px; margin-left:3px; }
  .ph-hero-desc { grid-column:2; grid-row:1 / span 2; margin-top:0; font-size:11px; line-height:1.5; }
  .ph-hero-glow { width:100px; height:100px; right:-28px; top:-34px; }
  .ph-charge-btn { min-width:120px; }
  .ph-paypay-box .ph-pp-qr { width:160px; height:160px; }
}

/* ===== 新：星级 / 点评 / 首页运营 / 排行 / 详情CTA ===== */
.stars { color:#ffb400; letter-spacing:1px; font-size:13px; }

/* 列表卡：星级/点评/角标 */
.card-img-wrap { position:relative; }
.card-ribbon { position:absolute; top:8px; left:8px; background:linear-gradient(135deg,#ff5b6e,#ff8a3d); color:#fff; font-size:11px; font-weight:800; padding:3px 9px; border-radius:20px; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.card-rating-num { font-weight:800; color:#333; font-size:13px; }
.card-review { color:#888; font-size:12px; }

/* 移动卡角标 */
.m-card-badge { position:absolute; top:8px; left:8px; background:linear-gradient(135deg,#ff5b6e,#ff8a3d); color:#fff; font-size:10px; font-weight:800; padding:3px 8px; border-radius:18px; z-index:2; }
.m-card-star { color:#ffb400; font-size:11px; }
.m-card-star b { color:#333; }
.m-card-review { color:#888; font-size:11px; }

/* 首页 banner / 公告 */
.promo-banner { background:linear-gradient(135deg,#ff7a59,#ff5b6e); color:#fff; text-align:center; font-weight:800; font-size:14px; padding:12px; margin:14px auto 0; max-width:1100px; border-radius:12px; box-shadow:0 6px 18px rgba(255,91,110,.25); }
.promo-banner b { font-size:16px; }
.announce-strip { background:#fff7e6; color:#a45c00; font-size:12.5px; font-weight:600; text-align:center; padding:9px; margin:10px auto 0; max-width:1100px; border-radius:10px; border:1px solid #ffe2ad; }
.m-promo { max-width:none; margin:12px 12px 0; }
.m-ann { max-width:none; margin:10px 12px 0; }

/* 积分露出卡（手机） */
.m-points-teaser { display:flex; align-items:center; justify-content:space-between; margin:12px; padding:14px 16px; border-radius:14px; background:linear-gradient(135deg,#5b3bff,#a05bff); color:#fff; box-shadow:0 8px 22px rgba(120,91,255,.3); text-decoration:none; }
.mpt-t { font-weight:900; font-size:15px; }
.mpt-s { font-size:12px; opacity:.92; margin-top:2px; }
.mpt-go { font-size:18px; }

/* 人气排行 */
.rank-list { display:flex; flex-direction:column; gap:10px; }
.rank-item { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:10px 12px; text-decoration:none; color:inherit; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.rank-no { width:26px; height:26px; flex-shrink:0; border-radius:50%; background:#eee; color:#555; font-weight:900; font-size:13px; display:flex; align-items:center; justify-content:center; }
.rank-no-1 { background:linear-gradient(135deg,#ffd700,#ffae00); color:#fff; }
.rank-no-2 { background:linear-gradient(135deg,#c0c0c0,#9e9e9e); color:#fff; }
.rank-no-3 { background:linear-gradient(135deg,#cd7f32,#a05a2c); color:#fff; }
.rank-img { width:54px; height:54px; object-fit:cover; border-radius:10px; flex-shrink:0; background:#eee; }
.rank-info { flex:1; min-width:0; }
.rank-name { font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-meta { font-size:12px; color:#666; margin-top:2px; }
.rank-meta b { color:#333; }
.rank-price { font-weight:800; color:var(--red); font-size:14px; white-space:nowrap; }

/* PC hero 搜索栏 */
.hero-search { display:flex; gap:8px; margin:18px auto 0; max-width:780px; background:#fff; padding:10px; border-radius:14px; box-shadow:0 8px 26px rgba(0,0,0,.18); }
.hero-search select, .hero-search input { border:1px solid #e2e2e2; border-radius:9px; padding:10px; font-size:13px; }
.hero-search #pcCity { flex:1.2; }
.hero-search .hs-date { flex:1; }
.hero-search .hs-guests { flex:.8; }
.hero-search .hs-btn { background:linear-gradient(135deg,#ff5b6e,#ff8a3d); color:#fff; border:none; border-radius:9px; padding:10px 22px; font-weight:800; cursor:pointer; white-space:nowrap; }

/* 移动搜索第二行 */
.m-search-row2 { display:flex; align-items:center; gap:6px; margin:8px 12px 0; }
.m-search-row2 .m-date { flex:1; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.95); border-radius:9px; padding:8px; font-size:12px; min-width:0; }
.m-search-row2 .m-date-sep { color:#fff; font-size:12px; }
.m-search-row2 .m-guests { border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.95); border-radius:9px; padding:8px; font-size:12px; }

/* 详情页 クチコミ */
.rev-sum { font-size:14px; font-weight:700; color:#333; margin-left:8px; }
.rev-note { font-size:11px; color:#999; margin:2px 0 12px; }
.rev-list { display:flex; flex-direction:column; gap:12px; }
.rev-card { background:#fafafa; border:1px solid #eee; border-radius:12px; padding:12px 14px; }
.rev-head { display:flex; justify-content:space-between; font-size:12px; color:#666; margin-bottom:4px; }
.rev-name { font-weight:700; color:#333; }
.rev-stars { color:#ffb400; font-size:13px; margin-bottom:4px; }
.rev-text { font-size:13px; line-height:1.7; color:#444; }
.rev-title { font-size:14px; font-weight:800; color:#222; margin:2px 0 6px; }
.review-source-link { display:inline-flex; margin-top:14px; }
.review-count { color:#888; font-size:13px; }
.rating-pending { color:#777; font-size:13px; }
.room-data-state p { color:#666; font-size:13px; line-height:1.7; margin-bottom:12px; }
.room-type-facts { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.room-type-facts span { background:#eef4fb; color:#41627f; border-radius:999px; padding:4px 9px; font-size:11px; }
.room-source-note { color:#888; font-size:11px; margin:12px 0; }
.room-photo-empty { display:flex; align-items:center; justify-content:center; min-height:84px; margin-top:10px; border:1px dashed #ccd5df; border-radius:8px; background:#f7f9fb; color:#788592; font-size:12px; text-align:center; padding:12px; }

/* 详情固定预订 CTA */
.detail-page { padding-bottom:88px; }
.detail-cta-bar { position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--border); box-shadow:0 -4px 16px rgba(0,0,0,.08); display:flex; align-items:center; justify-content:space-between; padding:10px 16px; z-index:900; }
.cta-room-choice { min-width:0; display:flex; align-items:center; gap:9px; }
.cta-room-img { flex:0 0 54px; width:54px; height:42px; object-fit:cover; border-radius:6px; background:#eee; }
.cta-room-img[hidden] { display:none; }
.cta-price { font-size:12px; color:#888; }
.cta-price b { color:var(--red); font-size:22px; font-weight:900; margin:0 2px; }
.cta-price small { color:#888; font-size:12px; }
.cta-book { background:linear-gradient(135deg,#ff5b6e,#ff8a3d); color:#fff; border:none; border-radius:30px; padding:13px 30px; font-size:15px; font-weight:900; white-space:nowrap; cursor:pointer; box-shadow:0 6px 18px rgba(255,91,110,.4); }
.cta-book { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }

/* 积分登录提示 */
.points-login-tip { text-align:center; margin:16px 0; font-size:13px; color:#666; }

@media (max-width:768px){
  .detail-page { padding-bottom:130px; }
  .detail-cta-bar { bottom:56px; padding:9px 14px; }
  .cta-room-choice { gap:7px; }
  .cta-room-img { flex-basis:48px; width:48px; height:38px; }
  .cta-book { padding:12px 17px; font-size:13px; }
  .hero-search { flex-wrap:wrap; }
}

/* ===== 攻略栏目 ===== */
.guide-entry { display:flex; align-items:center; justify-content:space-between; background:linear-gradient(120deg,#1a4b8c,#2c6fb5); color:#fff; border-radius:14px; padding:20px 24px; text-decoration:none; box-shadow:0 6px 18px rgba(26,75,140,.18); transition:transform .15s; }
.guide-entry:hover { transform:translateY(-2px); }
.ge-left .ge-t { font-size:19px; font-weight:700; margin-bottom:6px; }
.ge-left .ge-s { font-size:13px; opacity:.92; line-height:1.6; }
.ge-go { font-size:16px; font-weight:700; background:rgba(255,255,255,.18); padding:8px 16px; border-radius:30px; white-space:nowrap; }
.m-guide-teaser { background:linear-gradient(120deg,#2c6fb5,#3a91d6); margin-top:10px; }

.guide-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin:18px 0; }
.guide-card { display:block; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.08); text-decoration:none; color:#222; transition:transform .15s,box-shadow .15s; }
.guide-card:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.14); }
.guide-card-img { height:150px; background-size:cover; background-position:center; background-color:#e9eef5; }
.guide-card-body { padding:14px 16px; }
.guide-card-kicker { font-size:11px; color:#7a8190; font-weight:700; margin-bottom:7px; }
.guide-card-tag { display:inline-block; font-size:11px; background:#eaf2fb; color:#1a4b8c; padding:3px 10px; border-radius:20px; margin-bottom:8px; }
.guide-card-title { font-size:17px; line-height:1.5; font-weight:700; margin-bottom:7px; }
.guide-card-sub { font-size:13px; line-height:1.65; color:#7a8190; margin-bottom:10px; }
.guide-card-meta { font-size:12px; color:#1a8a4a; font-weight:600; }
.guide-total { color:#687384; font-size:13px; font-weight:700; }
.guide-filters { display:flex; gap:8px; overflow-x:auto; padding:4px 0 8px; scrollbar-width:thin; }
.guide-filter { flex:none; padding:7px 13px; border:1px solid #dce2ea; border-radius:20px; color:#556070; background:#fff; text-decoration:none; font-size:12px; font-weight:700; }
.guide-filter.active { color:#fff; background:#1a4b8c; border-color:#1a4b8c; }

.guide-note { font-size:12px; color:#9aa0ad; line-height:1.7; margin-top:18px; padding:12px 14px; background:#f6f8fb; border-radius:10px; border-left:3px solid #cdd6e3; }

.btn-back { display:inline-flex; align-items:center; gap:6px; margin:6px 0 14px; padding:8px 16px; background:#fff; border:1px solid #d9d9d9; border-radius:10px; color:var(--gray-d); text-decoration:none; font-size:14px; font-weight:700; transition:all .2s ease; }
.btn-back:hover { border-color:var(--red); color:var(--red); background:#fff8f8; transform:translateY(-1px); }
.gd-hero { background:linear-gradient(120deg,#1a4b8c,#2c6fb5); color:#fff; border-radius:16px; padding:26px 24px; margin-bottom:18px; }
.gd-hero h1 { font-size:26px; margin:0 0 8px; }
.gd-city { font-size:12px; font-weight:700; opacity:.82; margin-bottom:7px; }
.gd-tag { display:inline-block; font-size:12px; background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px; margin-bottom:10px; }
.gd-face { font-size:14px; opacity:.95; margin:0; }
.gd-intro { font-size:15px; line-height:1.95; color:#333; }
.gd-h2 { font-size:18px; font-weight:700; margin:22px 0 12px; padding-left:12px; border-left:4px solid #1a4b8c; }
.gd-areas { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.gd-area { background:#f6f8fb; border-radius:12px; padding:14px 16px; }
.gd-area-name { font-weight:700; font-size:15px; margin-bottom:6px; color:#1a4b8c; }
.gd-area-desc { font-size:13px; color:#555; line-height:1.7; }
.gd-list { margin:0; padding-left:20px; }
.gd-list li { font-size:14px; line-height:1.9; color:#333; margin-bottom:6px; }
.gd-hotels { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.gd-hotel { display:flex; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.08); text-decoration:none; color:#222; transition:transform .15s; }
.gd-hotel:hover { transform:translateY(-2px); }
.gd-hotel-img { width:96px; min-width:96px; background-size:cover; background-position:center; background-color:#e9eef5; }
.gd-hotel-body { padding:10px 12px; flex:1; }
.gd-hotel-name { font-size:14px; font-weight:700; line-height:1.4; margin-bottom:4px; }
.gd-hotel-meta { font-size:12px; color:#7a8190; margin-bottom:4px; }
.gd-hotel-price { font-size:14px; font-weight:700; color:#c0392b; }
.gd-hotel-price small { font-size:11px; font-weight:400; color:#888; }
.empty { color:#9aa0ad; font-size:14px; padding:20px 0; text-align:center; }

@media (max-width:768px){
  .guide-grid { grid-template-columns:1fr; gap:14px; }
  .guide-card { display:grid; grid-template-columns:120px minmax(0,1fr); }
  .guide-card-img { height:100%; min-height:154px; }
  .guide-card-body { padding:12px; }
  .guide-card-title { font-size:15px; }
  .guide-card-sub { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .gd-hero { padding:22px 18px; }
  .gd-hero h1 { font-size:22px; line-height:1.45; }
}