/* ══════════════════════════════════════════════
   Echo 回响 · css/menu.css
   主菜单 hub 页
   ══════════════════════════════════════════════ */
  /* ── Menu (hub / home page · 从聊天页左箭头进入) ── */
  .menu-panel{
    position: fixed; inset: 0; z-index: 190;
    pointer-events: none;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform .38s var(--ease-soft), opacity .28s ease;
  }
  .menu-panel.open{ transform: none; opacity: 1; pointer-events: auto; }
  .menu-page{
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    background-color: var(--bg);
    background-image: var(--menu-wall-default);
    background-size: cover; background-position: center;
    overflow: hidden;
  }
  .menu-page::before{
    content:""; position:absolute; inset:0; background: var(--scrim); pointer-events:none;
  }
  .menu-scroll{
    position: relative; z-index: 1;
    flex: 1 1 auto; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    display: flex; flex-direction: column;
    padding: calc(env(safe-area-inset-top) + clamp(18px, 4vw, 30px)) clamp(26px, 7vw, 54px) calc(env(safe-area-inset-bottom) + clamp(20px, 5vw, 30px));
  }
  .menu-scroll::-webkit-scrollbar{ width:0; height:0; }

  /* header: 玻璃液态日夜 toggle(左) · PRIVATE SPACE(右) */
  .menu-head{
    flex: 0 0 auto;
    display:flex; align-items:flex-start; justify-content:space-between;
    margin-bottom: clamp(34px, 10vw, 68px);
  }
  /* (主题切换已移至设置页 #themeSeg;原菜单页玻璃 toggle 的 CSS 已随标记一并移除) */
  .menu-private{
    text-align:right; line-height:1.55;
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(9.5px, 2.5vw, 11px); letter-spacing:.24em;
    color: var(--text-soft); text-transform:uppercase;
  }
  .menu-private::after{
    content:""; display:block; margin-left:auto; margin-top:8px;
    width: clamp(20px, 5.5vw, 26px); height:1px; background: var(--text-faint); opacity:.6;
  }

  /* hero: app title · since · days */
  .menu-hero{ flex: 0 0 auto; margin-bottom: clamp(38px, 11vw, 72px); }
  .menu-title{
    font-family: "Pinyon Script", var(--font-en), cursive;
    font-weight: 400;
    font-size: clamp(46px, 15vw, 86px);
    line-height: 1.04;
    color: var(--text);
    margin: 0 0 clamp(16px, 4.4vw, 26px);
    letter-spacing: .005em;
    text-shadow: 0 2px 26px rgba(0,0,0,.16);
  }
  .menu-since{
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(11px, 2.9vw, 13.5px);
    letter-spacing:.14em; color: var(--text-soft);
    margin: 0 0 clamp(8px, 2.2vw, 12px);
  }
  .menu-days{
    display:flex; align-items:baseline; gap: clamp(8px, 2.6vw, 12px);
    font-family: var(--font-en), var(--font-cn); color: var(--text);
  }
  .menu-days .num{ font-size: clamp(30px, 8.4vw, 48px); font-weight:500; line-height:1; letter-spacing:.01em; }
  .menu-days .lab{ font-size: clamp(12px, 3.1vw, 15px); letter-spacing:.13em; color: var(--text-soft); }

  /* list */
  .menu-list{ flex: 0 0 auto; display:flex; flex-direction:column; }
  .menu-item{
    display:grid;
    grid-template-columns: clamp(22px, 6vw, 27px) auto 1fr auto;
    align-items:center; gap: clamp(12px, 3.4vw, 18px);
    width:100%; text-align:left;
    background:transparent; border:0;
    border-top:1px solid var(--hairline);
    padding: clamp(15px, 4.4vw, 21px) 2px;
    color: var(--text); font: inherit; cursor:pointer;
    transition: background .18s ease, transform .12s ease;
  }
  .menu-item:last-child{ border-bottom:1px solid var(--hairline); }
  .menu-item:active{ background: var(--row-press); transform: scale(.995); }
  .menu-ic{ display:grid; place-items:center; color: var(--text-soft); }
  .menu-ic svg{ width: clamp(19px, 5vw, 22px); height: clamp(19px, 5vw, 22px); display:block; }
  .menu-dot{ width:3px; height:3px; border-radius:50%; background: var(--text-faint); opacity:.5; }
  .menu-copy{ display:flex; flex-direction:column; min-width:0; }
  .menu-name{
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(18px, 5vw, 23px); font-weight:500; line-height:1.14;
    color: var(--text); margin-bottom:2px;
  }
  .menu-sub{
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(8.5px, 2.3vw, 10px); letter-spacing:.16em;
    text-transform:uppercase; color: var(--text-faint);
  }
  .menu-chev{ color: var(--text-faint); display:grid; place-items:center; }
  .menu-chev svg{ width:15px; height:15px; display:block; }

  /* footer */
  .menu-foot{
    flex: 1 1 auto;
    display:flex; align-items:flex-end; justify-content:center;
    text-align:center;
    padding-top: clamp(22px, 6vw, 40px);
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(10.5px, 2.7vw, 12.5px); font-style:italic;
    letter-spacing:.05em; color: var(--text-faint);
  }