:root{
      --bg:#ffffff;
      --text:#111111;
      --muted:#6f6f6f;
      --line:#e7e7e7;
      --coffee:#8b5a2b;
      --shadow: 0 10px 28px rgba(0,0,0,.08);
      --r:18px;
      --r2:14px;
      --max:1180px;
      --ok:#1f6b4d;
      --warn:#b42318;
    }
    *{ box-sizing:border-box; }
    body{
      margin:0;
      background: var(--bg);
      color: var(--text);
    /* font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;*/
      line-height:1.6;
    }
    a{ color:inherit; text-decoration:none; }
    .wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 18px; }

    /* Header */
    header{
      position: sticky; top:0; z-index: 30;
      border-bottom:1px solid var(--line); background:#fff;
    }
    .nav{
      height:68px; display:flex; align-items:center; justify-content:space-between; gap:14px;
    }
    .brand{ display:flex; align-items:center; gap:10px; min-width: 220px; }
    .logo{
      width:38px;height:38px;border-radius:12px;
      border:1px solid var(--line);
      background:
        radial-gradient(14px 14px at 30% 30%, rgba(139,90,43,.55), rgba(139,90,43,0)),
        linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.01));
      box-shadow: 0 10px 22px rgba(0,0,0,.08);
    }
    .brand b{ font-size:16px; letter-spacing:.5px; }
    .brand span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }

    .actions{
      display:flex; align-items:center; gap:10px; min-width: 220px; justify-content:flex-end;
    }
    .btn{
      height:40px; border-radius:12px; border:1px solid var(--line);
      background:#fff; color:#333; padding:0 12px; cursor:pointer;
      display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    }
    .btn:hover{ background:#f6f6f6; }

    /* 页面主体 */
    .page{ padding: 18px 0 8px; }
    .crumb{
      display:flex; align-items:center; gap:8px;
      color:var(--muted); font-size:13px; padding: 10px 0 12px;
    }
    .crumb a:hover{ color:var(--coffee); }
    .crumb .sep{ opacity:.6; }

    .hero{
      border:1px solid var(--line);
      border-radius: var(--r);
      background:#fff;
      box-shadow: var(--shadow);
      padding: 14px;
      position:relative;
      overflow:hidden;
    }
    .hero h1{ margin:0; font-size:18px; letter-spacing:.2px; }
    .hero p{ margin:8px 0 0; color:var(--muted); font-size:13px; max-width:820px; }

    .layout{
      margin-top: 14px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      align-items:start;
    }
    .card{
      border:1px solid var(--line);
      border-radius: var(--r);
      background:#fff;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .cardHd{
      padding:12px 14px;
      border-bottom:1px solid var(--line);
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      background:#fff;
    }
    .cardHd b{ font-size:14px; }
    .cardBd{ padding:12px 14px; }

    .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
    .ibox{
      border:1px solid var(--line);
      border-radius:14px;
      background:#fafafa;
      padding:12px;
    }
    .ibox b{ font-size:13px; }
    .ibox p{ margin:6px 0 0; color:var(--muted); font-size:13px; }
    .ibox .act{
      margin-top:10px;
      display:flex; gap:10px; flex-wrap:wrap;
    }
    .miniBtn{
      height:36px;
      border-radius:12px;
      border:1px solid var(--line);
      background:#fff;
      padding:0 12px;
      cursor:pointer;
      font-size:13px;
      display:inline-flex; align-items:center; gap:8px;
    }
    .miniBtn:hover{ background:#f6f6f6; }

    .mapBox{
      margin-top:12px;
      border:1px solid var(--line);
      border-radius:14px;
      background:#f6f6f6;
      overflow:hidden;
      position:relative;
      min-height:260px;
    }
    .mapBox .mask{
      position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
      color:#888; font-size:13px;
      padding:14px; text-align:center;
    }

    /* 右侧：在线留言 */
    .form{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
    }
    .form .full{ grid-column: span 2; }
    .row{ display:grid; gap:8px; }
    .lbl{ font-size:13px; color:var(--muted); }
    .ipt{
      height:44px;
      border-radius:14px;
      border:1px solid var(--line);
      background:#fff;
      padding:0 12px;
      outline:none;
      font-size:14px;
    }
    textarea.ipt{
      height:auto;
      min-height:120px;
      padding:10px 12px;
      resize: vertical;
    }
    .hint{ color:var(--muted); font-size:12px; line-height:1.6; margin-top:4px; }

    .capRow{
      display:grid;
      grid-template-columns: 180px 100px;
      gap:10px;
      align-items:center;
    }
    .cap{
      height:44px;
      border-radius:14px;
      border:1px solid var(--line);
      background:#fafafa;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      letter-spacing:2px;
      cursor:pointer;
      user-select:none;
    }

    .btns{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
    .btnMain{
      height:44px; padding:0 14px;
      border-radius:14px; border:1px solid var(--coffee);
      background:var(--coffee); color:#fff;
      cursor:pointer; font-size:14px;
      width:100%;
    }
    .btnGhost{
      height:44px; padding:0 14px;
      border-radius:14px; border:1px solid var(--line);
      background:#fff; cursor:pointer; font-size:14px;
      width:100%;
    }
    .btnGhost:hover{ background:#f6f6f6; }

    .msg{
      margin-top:10px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--line);
      background:#fafafa;
      color:var(--muted);
      font-size:13px;
      display:none;
    }

  .msg.show {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  .msgText {
    flex: 1;
    word-break: break-word;
  }
  .msgClose {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.12);
    color: inherit;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
  }
  .msgClose:hover {
    background: rgba(0,0,0,.22);
  }

  .chips { display:flex; gap:8px; flex-wrap:wrap; margin:15px 0 12px; align-items:center; }
  .chip { border:1px solid #e2e8f0; background:#fff; padding:6px 14px; border-radius:999px; font-size:13px; cursor:pointer; transition:all 0.2s; }
  .chip:hover { background:#f1f5f9; }
  .chip.on { border-color:#2c6e9e; background:#eef4ff; color:#1e4a76; }

  .main-image {
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    overflow:hidden;
  }
  .main-image img {
    max-width:100%;
    object-fit:contain;
    cursor:zoom-in;
    transition:transform 0.2s ease;
     border-radius:20px;
  }




    @media (max-width: 980px){
      .layout{ grid-template-columns: 1fr; }
    }
    @media (max-width: 720px){
      .grid2{ grid-template-columns: 1fr; }
      .grid2 .ibox { grid-column: span 2; } /* 重置所有 ibox 为占满一列 */
      .form{ grid-template-columns: 1fr; }
      .form .full{ grid-column: span 1; }
      .capRow{ grid-template-columns: 1fr 120px; }
    }