:root{
      --bg: #0f1115;
      --panel: #171a21;
      --panel-2: #11131a;
      --text: #e6e6e6;
      --muted: #a7abb7;
      --accent: #d8b65c;
      --accent-2: #f1d98a;
      --border: rgba(216,182,92,.35);
      --shadow: 0 16px 40px rgba(0,0,0,.45);
      --radius-xl: 18px;
      --radius-lg: 14px;
      --radius-md: 10px;
      --track: rgba(255,255,255,.08);
      --good: #9bd4ff;
      --warn: #ffcf7d;
      --bad: #ff9b9b;
      --neutral: #c9cddb;
    }

    *{box-sizing: border-box;}
    body{
      margin: 0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 22px;
      background:
        radial-gradient(1200px 600px at 20% 10%, rgba(216,182,92,.08), transparent 60%),
        radial-gradient(900px 500px at 80% 90%, rgba(241,217,138,.06), transparent 60%),
        var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC",
                   "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    .container{
      width: 100%;
      max-width: 860px;
      background: linear-gradient(180deg, var(--panel), var(--panel-2));
      border: 1px solid rgba(255,255,255,.04);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      padding: 26px 22px 22px;
      position: relative;
      overflow: hidden;
    }

    .title{
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin: 0 0 8px;
      font-size: 22px;
      letter-spacing: .5px;
      color: var(--accent-2);
    }
    .subtitle{
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 12.2px;
      line-height: 1.55;
    }

    /* ===== Tabs ===== */
    .tabs{
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar{ display: none; }
    .tab-btn{
      flex: 0 0 auto;
      padding: 10px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.07);
      color: var(--text);
      font-size: 11.2px;
      font-weight: 800;
      cursor: pointer;
      text-align: center;
      user-select: none;
      transition: filter .12s ease, transform .12s ease, border-color .12s ease, background .12s ease;
    }
    .tab-btn:active{ transform: scale(.98); }
    .tab-btn.active{
      border-color: var(--border);
      background: rgba(216,182,92,.14);
    }
    .panel{ display: none; }
    .panel.active{ display: block; }

    /* ===== Common blocks ===== */
    .picker, .jieqi-query, .luck-panel, .almanac-panel, .shensha-panel{
      display: grid;
      gap: 12px;
      padding: 14px 12px 12px;
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.06);
    }

    .mode-row{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .mode-pill{
      padding: 9px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.07);
      color: var(--text);
      font-size: 11.2px;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      user-select: none;
      transition: filter .12s ease, transform .12s ease, border-color .12s ease, background .12s ease;
    }
    .mode-pill:active{ transform: scale(.98); }
    .mode-pill.active{
      border-color: var(--border);
      background: rgba(216,182,92,.14);
    }

    .row, .year-select-row{
      display: grid;
      grid-template-columns: 70px 1fr 74px;
      align-items: center;
      gap: 10px;
    }
    .row .label, .year-select-row .label{
      font-size: 12px;
      color: #8b90a1;
      letter-spacing: .5px;
      white-space: nowrap;
    }
    .row .value, .year-select-row .value{
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-size: 12.4px;
      color: var(--muted);
    }

    input[type="range"]{
      -webkit-appearance: none;
      width: 100%;
      height: 28px;
      background: transparent;
      margin: 0;
      padding: 0;
    }
    input[type="range"]:focus{ outline: none; }
    input[type="range"]::-webkit-slider-runnable-track{
      height: 6px;
      border-radius: 999px;
      background: var(--track);
    }
    input[type="range"]::-webkit-slider-thumb{
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #0f1115;
      border: 2px solid rgba(241,217,138,.85);
      box-shadow: 0 2px 10px rgba(0,0,0,.35);
      margin-top: -6px;
      transition: transform .08s ease, border-color .12s ease;
    }
    input[type="range"]:active::-webkit-slider-thumb{
      transform: scale(1.08);
      border-color: #fff;
    }
    input[type="range"]::-moz-range-track{
      height: 6px;
      border-radius: 999px;
      background: var(--track);
    }
    input[type="range"]::-moz-range-thumb{
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #0f1115;
      border: 2px solid rgba(241,217,138,.85);
      box-shadow: 0 2px 10px rgba(0,0,0,.35);
      transition: transform .08s ease, border-color .12s ease;
    }

    .leap-row{
      display: none;
      grid-template-columns: 70px 1fr;
      align-items: center;
      gap: 10px;
      padding: 2px 0 0;
    }
    .toggle{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 10px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.07);
      width: fit-content;
      cursor: pointer;
      user-select: none;
      font-size: 11.3px;
      color: var(--muted);
    }
    .toggle input{ transform: translateY(1px); }

    .quick{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      margin-top: 6px;
    }
    .pill{
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.07);
      color: var(--text);
      font-size: 11.1px;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      transition: filter .12s ease, transform .12s ease, border-color .12s ease;
      user-select: none;
    }
    .pill:active{ transform: scale(.98); }
    .pill.active{
      border-color: var(--border);
      background: rgba(216,182,92,.12);
    }

    .btn{
      width: 100%;
      border: 0;
      padding: 12.5px 16px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      color: #0f0f0f;
      background: linear-gradient(45deg, var(--accent), var(--accent-2));
      transition: transform .12s ease, filter .12s ease, opacity .12s ease;
    }
    .btn:active{ transform: scale(.98); }
    .btn.secondary{
      background: rgba(255,255,255,.06);
      color: var(--text);
      font-weight: 650;
      border: 1px solid rgba(255,255,255,.08);
    }

    .actions{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }

    .small-note{
      margin-top: 6px;
      font-size: 11px;
      color: #8b90a1;
      line-height: 1.5;
    }

    .result-box{
      margin-top: 18px;
      padding: 16px 14px 14px;
      background: rgba(255,255,255,.03);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      display: none;
    }

    .section{
      margin-top: 12px;
      padding: 12px 10px 10px;
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.06);
    }
    .section-title{
      font-size: 11.5px;
      color: var(--muted);
      letter-spacing: .6px;
      margin-bottom: 8px;
      font-weight: 800;
    }

    .info{
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.6;
      margin-bottom: 6px;
    }

    .jieqi-line{
      display: grid;
      gap: 6px;
      font-size: 12.2px;
      color: var(--muted);
    }
    .jieqi-badge{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(216,182,92,.12);
      border: 1px solid var(--border);
      color: var(--accent-2);
      font-weight: 700;
      font-size: 11px;
      width: fit-content;
    }

    .bazi-grid{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 10px;
    }
    .pillar{
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.06);
      border-radius: var(--radius-md);
      padding: 10px 6px 10px;
      text-align: center;
    }
    .pillar .p-label{
      display: block;
      font-size: 11px;
      color: #8b90a1;
      margin-bottom: 6px;
    }
    .gan{
      display: block;
      font-size: 22px;
      font-weight: 800;
      color: var(--accent-2);
      letter-spacing: 1px;
    }
    .zhi{
      display: block;
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: 1px;
    }
    .sub{
      margin-top: 6px;
      font-size: 10.5px;
      color: #8b90a1;
      line-height: 1.35;
    }
    .sub .hl{ color: var(--good); font-weight: 800; }
    .sub .hl2{ color: var(--warn); font-weight: 800; }

    .compare-box{
      margin-top: 14px;
      padding: 12px 10px 10px;
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.035);
      border: 1px dashed rgba(255,255,255,.12);
      display: none;
    }
    .compare-title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .compare-title span{
      font-size: 11.5px;
      color: var(--muted);
      font-weight: 800;
      letter-spacing: .6px;
    }
    .compare-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .compare-card{
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      border-radius: var(--radius-md);
      padding: 10px 9px 9px;
    }
    .compare-card .tag{
      font-size: 10.5px;
      color: var(--accent-2);
      font-weight: 800;
      margin-bottom: 6px;
    }
    .compare-card .line{
      font-size: 12.2px;
      color: var(--text);
      font-weight: 800;
      letter-spacing: .5px;
      margin-bottom: 4px;
    }
    .compare-card .meta{
      font-size: 10.5px;
      color: #8b90a1;
      line-height: 1.4;
      white-space: pre-line;
    }

    .copy-hint{
      margin-top: 10px;
      font-size: 11px;
      color: #8b90a1;
    }

    .jieqi-list{
      display: grid;
      gap: 8px;
    }
    .jieqi-item{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      padding: 10px 10px;
      border-radius: 10px;
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.06);
      font-size: 12px;
      color: var(--muted);
    }
    .jieqi-item .name{
      color: var(--text);
      font-weight: 700;
    }
    .jieqi-item .date{
      color: var(--accent-2);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .toast{
      position: fixed;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(20,22,30,.95);
      border: 1px solid rgba(255,255,255,.08);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 12px;
      box-shadow: var(--shadow);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
    }
    .toast.show{
      opacity: 1;
      transform: translateX(-50%) translateY(-4px);
    }

    /* ===== 运势 / 旺衰 ===== */
    .luck-mode-row{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .luck-pill{
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.07);
      color: var(--text);
      font-size: 11.1px;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      user-select: none;
    }
    .luck-pill.active{
      border-color: var(--border);
      background: rgba(216,182,92,.14);
    }

    .luck-box{
      display: none;
      padding: 12px 10px 10px;
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.06);
    }
    .luck-box.active{ display: block; }

    .luck-list{
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }
    .luck-item{
      display: grid;
      grid-template-columns: 56px 1fr auto;
      gap: 8px;
      align-items: center;
      padding: 9px 10px;
      border-radius: 10px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.06);
      font-size: 11.8px;
      color: var(--muted);
    }
    .luck-item .tag{
      color: var(--accent-2);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }
    .luck-item .gz{
      color: var(--text);
      font-weight: 800;
      letter-spacing: .5px;
    }
    .luck-item .meta{
      font-size: 10.6px;
      color: #8b90a1;
      text-align: right;
      white-space: nowrap;
    }

    .ws-badge{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.09);
      font-weight: 800;
      font-size: 10.8px;
      width: fit-content;
    }
    .ws-strong{ color: var(--warn); }
    .ws-weak{ color: var(--good); }
    .ws-mid{ color: var(--accent-2); }

    .explain{
      font-size: 11px;
      color: #8b90a1;
      line-height: 1.55;
      margin-top: 6px;
      white-space: pre-line;
    }

    /* ===== Almanac ===== */
    .almanac-row{
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: 10px;
      align-items: center;
    }
    .date-input{
      width: 100%;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      color: var(--text);
      font-size: 12.6px;
    }

    .almanac-kv{
      display: grid;
      gap: 6px;
      font-size: 12.2px;
      color: var(--muted);
    }
    .almanac-kv b{
      color: var(--accent-2);
      font-weight: 800;
    }
    .badge-good{ color: var(--good); font-weight: 800; }
    .badge-bad{ color: var(--bad); font-weight: 800; }
    .badge-neutral{ color: var(--neutral); font-weight: 800; }

    /* ===== ShenSha ===== */
    .search-row{
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .search-input{
      width: 100%;
      padding: 11px 12px;
      border-radius: 10px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      color: var(--text);
      font-size: 12.6px;
    }
    .ss-filter-row{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }
    .ss-pill{
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.07);
      color: var(--text);
      font-size: 10.8px;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      user-select: none;
    }
    .ss-pill.active{
      border-color: var(--border);
      background: rgba(216,182,92,.14);
    }
    .ss-list{
      display: grid;
      gap: 8px;
    }

    .ss-list.ss-collapsed .ss-item{
      display: none;
    }
    .ss-list.ss-collapsed::before{
      content: '神煞学习列表已收起，可点击“展开列表”查看全部条目。';
      display: block;
      padding: 10px 8px 12px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
      white-space: pre-line;
    }
    .ss-item{
      padding: 11px 11px 10px;
      border-radius: 12px;
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.06);
    }
    .ss-head{
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .ss-name{
      font-size: 13.2px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: .4px;
    }
    .ss-tag{
      font-size: 10px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      color: var(--muted);
    }
    .ss-tag.good{ color: var(--good); border-color: rgba(155,212,255,.35); }
    .ss-tag.bad{ color: var(--bad); border-color: rgba(255,155,155,.35); }
    .ss-tag.neutral{ color: var(--neutral); border-color: rgba(201,205,219,.35); }

    .ss-body{
      margin-top: 6px;
      font-size: 11.4px;
      color: var(--muted);
      line-height: 1.5;
      white-space: pre-line;
    }

    .ss-inline-list{
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .ss-inline-badge{
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      font-size: 10.5px;
      font-weight: 800;
      color: var(--accent-2);
    }

    .ss-inline-badge.child{
      border-style: dashed;
      opacity: .9;
    }


    @media (max-width: 560px){
      .tabs{ grid-template-columns: 1fr 1fr 1fr; }
    }
    @media (max-width: 480px){
      .actions{ grid-template-columns: 1fr; }
      .quick{ grid-template-columns: 1fr 1fr; }
      .row, .year-select-row{ grid-template-columns: 60px 1fr 60px; }
      .compare-grid{ grid-template-columns: 1fr; }
      .ss-filter-row{ grid-template-columns: 1fr 1fr; }
    }

    /* v10.4: 自动判定缺口提示 */
    .ss-missing{
      margin-top: 8px;
      border: 1px dashed rgba(255,255,255,0.12);
      border-radius: 12px;
      padding: 8px 10px;
      background: rgba(255,255,255,0.02);
    }
    .ss-missing summary{
      cursor: pointer;
      font-size: 12.5px;
      opacity: .9;
      user-select: none;
    }
    .ss-missing-hint{
      margin: 6px 0 8px;
      font-size: 11.5px;
      opacity: .7;
      line-height: 1.45;
    }
    .ss-missing-list{
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .ss-miss-badge{
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.05);
      opacity: .95;
    }

    /* v11.0: 小儿关煞缺口提示微调 */
    .ss-missing--child{
      border-color: rgba(255,255,255,0.08);
    }
  /* v11.7b: 底部导航（移动端） */
@media (max-width: 720px){
  body{
    padding-bottom: 76px; /* 预留底部栏空间 */
  }
  .container{
    padding-bottom: 8px;
  }
  .tabs{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    gap: 0;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
    background: rgba(10,12,18,0.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.06);
    margin: 0;
  }
  .tab-btn{
    flex: 1 1 0;
    margin: 0 4px;
    padding: 8px 6px;
    border-radius: 10px;
    font-size: 10.8px;
    font-weight: 800;
    letter-spacing: .2px;
    background: transparent;
    border: 1px solid transparent;
    opacity: .72;
    transform: none;
  }
  .tab-btn.active{
    opacity: 1;
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
  }
  .tab-btn:hover{
    filter: none;
    transform: none;
  }
  /* 让顶部标题与副标题在手机上更紧凑 */
  .title{ font-size: 20px; }
  .subtitle{ font-size: 11.6px; }
}

.ss-hit-tag{
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 9.2px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  vertical-align: 1px;
}
.ss-inline-badge.child .ss-hit-tag{
  border-style: dashed;
}

/* v11.7b: 命中展开详情弹层（安全版，不触碰初始化链） */
.ss-detail-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 1200;
}
.ss-detail-overlay.show{ display: flex; }

.ss-detail-card{
  width: min(720px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 14px 14px 18px;
  box-shadow: 0 -12px 40px rgba(0,0,0,.35);
  max-height: 78vh;
  overflow: auto;
}
.ss-detail-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 10px;
}
.ss-detail-title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
}
.ss-detail-sub{
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.ss-detail-close{
  cursor:pointer;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.ss-detail-row{
  padding: 8px 2px;
  border-bottom: 1px dashed rgba(255,255,255,.06);
}
.ss-detail-row:last-child{ border-bottom: none; }
.ss-detail-label{
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .2px;
  margin-bottom: 4px;
}
.ss-detail-value{
  font-size: 12.6px;
  line-height: 1.45;
}

/* v11.13a: 详情卡片跳转学习表按钮（安全追加） */
.ss-detail-actions{
  display:flex;
  gap: 8px;
  padding-top: 10px;
}
.ss-detail-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
}
.pulse-highlight{
  outline: 2px solid rgba(216,182,92,.55);
  box-shadow: 0 0 0 4px rgba(216,182,92,.12);
  transition: box-shadow .2s ease, outline .2s ease;
}

/* v11.13a: 学习表 → 一键试盘 */
.ss-learn-to-pan{
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  opacity: .9;
}
.ss-learn-to-pan:hover{ opacity: 1; }

.ss-pan-hint{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
}


    /* 起名模块 */
    .stroke-inputs{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .stroke-box{
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      background: rgba(255,255,255,0.03);
    }
    .stroke-char{
      font-weight: 700;
      min-width: 1.5em;
      text-align: center;
    }
    .stroke-box input{
      width: 64px;
    }
    .name-grid{
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin-top: 10px;
    }
    .ng-item{
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 10px 8px;
      text-align: center;
      background: rgba(255,255,255,0.03);
    }
    .ng-label{
      opacity: .8;
      font-size: 12px;
      margin-bottom: 4px;
    }
    .ng-value{
      font-size: 22px;
      font-weight: 800;
    }
    .ng-sub{
      opacity: .75;
      font-size: 11px;
      margin-top: 2px;
    }
    .subcard{
      margin-top: 12px;
      background: rgba(255,255,255,0.02);
    }
    .mono{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 14px;
    }

    @media (max-width: 560px){
      .name-grid{
        grid-template-columns: repeat(2, 1fr);
      }
    }


/* =========================
   UI v12 · 底部四栏分组导航
   说明：不改功能逻辑，仅重排入口
   ========================= */

/* 让容器给底部导航预留空间 */
body.group-ui .container{
  padding-bottom: 88px;
}

/* 隐藏旧的顶栏模块 Tabs（仍保留 DOM 供 JS 复用） */
body.group-ui .legacy-tabs{
  display: none !important;
}

/* 默认显示分组页，隐藏模块面板 */
body.group-ui .panel{
  display: none;
}

/* 模块顶栏 */
.module-topbar{
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  margin: 8px 0 10px;
  border-radius: var(--radius-md, 12px);
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  position: sticky;
  top: 0;
  z-index: 900;
}

.module-topbar .topbar-title{
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
}

.module-topbar .topbar-btn{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text, #fff);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
}

.module-topbar .topbar-btn:active{
  transform: translateY(1px);
}

/* 分组视图 */
.group-views{
  margin: 10px 0 6px;
}

.group-view{
  display: none;
}

.group-view.active{
  display: block;
}

.group-kicker{
  font-size: 11px;
  letter-spacing: 1.2px;
  color: rgba(215,178,106,.9);
  margin: 8px 2px 10px;
}

.group-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 560px){
  .group-grid{
    grid-template-columns: 1fr;
  }
}

.entry-card{
  text-align: left;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(300px 120px at 10% 0%, rgba(215,178,106,.08), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  cursor: pointer;
}

.entry-card:hover{
  border-color: rgba(215,178,106,.25);
}

.entry-title{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.entry-desc{
  font-size: 11.5px;
  color: rgba(255,255,255,.6);
}

/* 空状态 */
.empty-state{
  padding: 18px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.10);
  color: rgba(255,255,255,.65);
}

.empty-title{
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.empty-desc{
  font-size: 11.5px;
}

/* 底部导航 */
.bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(66px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 6px 10px calc(10px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.25) 25%, rgba(0,0,0,.45)),
    linear-gradient(180deg, #0b0d12, #07080c);
  border-top: 1px solid rgba(255,255,255,.06);
  z-index: 999;
  backdrop-filter: blur(10px);
}

.bottom-item{
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.65);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font-size: 11px;
}

.bottom-item .bi-icon{
  font-size: 16px;
  line-height: 1;
}

.bottom-item.active{
  color: #fff;
  border-color: rgba(215,178,106,.28);
  background: linear-gradient(135deg, rgba(215,178,106,.14), rgba(255,255,255,.02));
}

/* 当模块打开时：隐藏分组页，显示模块面板 + 顶栏 */
body.group-ui.module-open .group-views{
  display: none;
}

body.group-ui.module-open .panel{
  display: none;
}
body.group-ui.module-open .panel.active{
  display: block;
}

body.group-ui.module-open .module-topbar{
  display: flex;
}

/* 我的页 · 版本与维护工具 */
.me-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.me-card{
  padding: 14px;
}

.me-kv{
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.me-kv-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
}

.me-k{
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

.me-v{
  font-size: 12px;
  color: rgba(255,255,255,.92);
}

.me-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.small-hint{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}

@media (max-width: 420px){
  .me-actions{
    grid-template-columns: 1fr;
  }
}


    /* 起名自动笔画辅助 */
    .stroke-box.missing{
      border-color: rgba(255,207,125,.55);
      box-shadow: 0 0 0 1px rgba(255,207,125,.15) inset;
    }
    .stroke-box.auto{
      border-color: rgba(155,212,255,.35);
    }
    .stroke-input{
      width: 70px;
    }

    /* 研究评分 */
    .score-row{
      align-items: center;
      gap: 12px;
    }
    .score-badge{
      display: inline-flex;
      align-items: baseline;
      gap: 2px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(216,182,92,.08);
      font-weight: 800;
      letter-spacing: .5px;
    }
    .score-badge #nameScoreVal{
      font-size: 22px;
      color: var(--accent-2);
    }
    .score-suffix{
      opacity: .75;
      font-size: 12px;
    }
    .score-text{
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }