:root {
      --wood: #e2c9ab;
      --wood2: #d4b48e;
      --wood3: #b88962;
      --wood-deep: #8f6342;
      --ink: #1a1008;
      --line: #4a3220;
      --tian: #dfc2a0;
      --tian2: #c9a67c;
      --tian3: #a87c54;
      --size: min(92vw, 88vh, 640px);
      --ui-text: #111;
      --ui-border: #ccc;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    .daliuren-books-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 50vh;
      background: #f7f8f7;
    }
    .daliuren-books-placeholder {
      color: #999;
      font-size: 14px;
      text-align: center;
      padding: 24px;
    }

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 0;
      padding: 0 16px max(74px, calc(54px + env(safe-area-inset-bottom, 0px)));
      background: #fff;
      font-family: "Kaiti SC", "STKaiti", "KaiTi", "SimSun", serif;
      color: var(--ink);
      user-select: none;
    }

    /* 顶栏：对齐八卦排盘 */
    .app-header {
      position: sticky;
      top: 0;
      z-index: 100;
      align-self: stretch;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: calc(6px + env(safe-area-inset-top, 0px)) 10px 6px;
      background: #fff;
      border-bottom: 1px solid #e0e0e0;
      font-family: "Microsoft YaHei", sans-serif;
    }
    html.mp-webview .app-header,
    body.mp-webview .app-header,
    html.mp-webview #appHeader,
    body.mp-webview #appHeader {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      min-height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      border: none !important;
      overflow: hidden !important;
    }
    .app-header .header-left,
    .app-header .header-right {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
      z-index: 1;
    }
    .app-header .app-title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 1rem;
      font-weight: 600;
      color: #111;
      letter-spacing: 1px;
      pointer-events: none;
      white-space: nowrap;
    }
    .app-header .icon-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 50%;
      cursor: pointer;
      color: #111;
      padding: 0;
    }
    .app-header .icon-btn svg {
      width: 18px;
      height: 18px;
      fill: #111;
    }
    .app-header .panel-switch {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
    }
    .app-header .panel-switch-label {
      font-size: 0.82rem;
      font-weight: 500;
      color: #111;
    }
    .app-header .switch-track {
      position: relative;
      width: 42px;
      height: 24px;
      border-radius: 999px;
      background: #ccc;
      border: 1px solid #bbb;
      transition: background .2s, border-color .2s;
      flex-shrink: 0;
    }
    .app-header .switch-track::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,.2);
      transition: transform .2s;
    }
    .app-header .panel-switch input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    .app-header .panel-switch input:checked + .switch-track {
      background: #111;
      border-color: #111;
    }
    .app-header .panel-switch input:checked + .switch-track::after {
      transform: translateX(18px);
    }

    /* ========== 舞台：阴影做舒适立体，不透视糊字 ========== */
    .stage3d {
      position: relative;
      width: min(96vw, 700px);
      height: auto;
      min-height: calc(var(--size) + 36px);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0 0 28px;
    }
    .stage3d::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 6px;
      width: 70%;
      height: 36px;
      transform: translateX(-50%);
      background: radial-gradient(ellipse, rgba(80,50,25,.28) 0%, transparent 72%);
      filter: blur(14px);
      pointer-events: none;
      z-index: 0;
    }
    .shipan-wrap {
      position: relative;
      width: var(--size);
      height: var(--size);
      z-index: 1;
    }

    /* 式盘上方：上一局 / 刷新 / 下一局 + 年命行年 */
    .plate-title-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      width: min(96vw, 720px);
      margin: 2px 0;
      font-family: "Microsoft YaHei", sans-serif;
      position: relative;
      z-index: 6;
    }
    .plate-nav-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 0;
      padding: 0;
    }
    .plate-nav-bar button {
      width: 24px;
      height: 24px;
      padding: 0;
      border: 1px solid #ddd;
      border-radius: 50%;
      background: #fff;
      color: #666;
      font-size: 12px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: none;
    }
    .plate-nav-bar button:hover { color: #222; background: #f7f7f7; }
    .plate-nav-bar button:active { background: #eee; }
    .plate-nianming {
      justify-self: end;
      font-size: 12px;
      font-weight: 600;
      color: #333;
      white-space: nowrap;
      padding-right: 2px;
    }

    /* ========== 通体木色地盘 ========== */
    .shipan {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      background:
        repeating-linear-gradient(
          88deg,
          transparent 0 5px,
          rgba(120,75,40,.035) 5px 6px
        ),
        radial-gradient(ellipse at 30% 18%, rgba(255,246,230,.55), transparent 52%),
        linear-gradient(155deg, #f0dcc4 0%, var(--wood) 35%, var(--wood2) 70%, #c8a67c 100%);
      box-shadow:
        0 20px 40px rgba(90,55,30,.22),
        0 8px 16px rgba(90,55,30,.14),
        0 3px 0 rgba(120,80,45,.28),
        inset 0 0 0 2px rgba(110,75,45,.45),
        inset 0 2px 4px rgba(255,250,240,.55),
        inset 0 -10px 24px rgba(110,70,35,.12);
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      /* 盘面文字：与西方干支同族楷体（唯一真相） */
      --plate-text-font: "Kaiti SC", "STKaiti", "KaiTi", "SimSun", serif;
      --plate-text-weight: 800;
      --plate-text-size: clamp(13px, 2vw, 17px);
      font-family: var(--plate-text-font);
    }
    /* 字形共用：干支格 / 三圈 / 宿 —— 同族同重同号同色 */
    .plate-char,
    .ganzhi > li,
    .ganzhi > li.side span,
    .xiu > li,
    .ring > li .ring-glyph,
    .ring > li .yj-alias,
    .ring > li .yj-zhi {
      font-family: var(--plate-text-font);
      font-weight: var(--plate-text-weight);
      font-size: var(--plate-text-size);
      color: var(--ink);
      line-height: 1;
      font-synthesis: none;
      -webkit-font-smoothing: antialiased;
      text-rendering: auto;
    }
    .shipan::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow: inset 0 0 0 1px rgba(255,240,220,.25);
      z-index: 40;
    }

    /* 外框双线 */
    .frame-outer {
      position: absolute;
      inset: 3.2%;
      border: 1.5px solid var(--line);
      pointer-events: none;
      box-shadow: inset 0 0 0 1px rgba(255,230,200,.08);
    }
    .frame-outer::before {
      content: "";
      position: absolute;
      inset: 1.6%;
      border: 1px solid var(--line);
      opacity: 0.85;
    }

    /* 内框（干支格所在） */
    .frame-inner {
      position: absolute;
      inset: 14.5%;
      border: 1.5px solid var(--line);
      pointer-events: none;
      z-index: 2;
    }

    /* 四角圆钮 + 斜线 */
    .diag {
      position: absolute;
      inset: 14.5%;
      pointer-events: none;
      z-index: 2;
    }
    .diag::before,
    .diag::after {
      content: "";
      position: absolute;
      background: var(--line);
      width: 1.2px;
      height: 22%;
    }
    .diag::before {
      top: 0; left: 0;
      transform-origin: top left;
      transform: rotate(-45deg) translate(0, 0);
      height: 28%;
    }
    .diag::after {
      top: 0; right: 0;
      transform-origin: top right;
      transform: rotate(45deg);
      height: 28%;
    }
    .diag-bl,
    .diag-br {
      position: absolute;
      width: 1.2px;
      height: 28%;
      background: var(--line);
      bottom: 0;
    }
    .diag-bl { left: 0; transform-origin: bottom left; transform: rotate(45deg); }
    .diag-br { right: 0; transform-origin: bottom right; transform: rotate(-45deg); }

    .dot {
      position: absolute;
      width: 2.4%;
      height: 2.4%;
      border: 1.5px solid var(--line);
      border-radius: 50%;
      z-index: 3;
      background: var(--wood);
      pointer-events: none;
    }
    .dot.tl { top: 13.2%; left: 13.2%; }
    .dot.tr { top: 13.2%; right: 13.2%; }
    .dot.bl { bottom: 13.2%; left: 13.2%; }
    .dot.br { bottom: 13.2%; right: 13.2%; }

    .bagua {
      position: absolute;
      font-size: clamp(12px, 1.8vw, 16px);
      z-index: 3;
      pointer-events: none;
      line-height: 1;
      color: var(--ink);
      opacity: 1;
      font-weight: 700;
    }
    /* 午上：巽坤 / 震乾 */
    .bagua.tl { top: 15.8%; left: 16.2%; transform: rotate(-45deg); }
    .bagua.tr { top: 15.8%; right: 16.2%; transform: rotate(45deg); }
    .bagua.bl { bottom: 15.8%; left: 16.2%; transform: rotate(45deg); }
    .bagua.br { bottom: 15.8%; right: 16.2%; transform: rotate(-45deg); }

    /* —— 二十八宿：字脚朝心，站在该边看为正 —— */
    .xiu {
      position: absolute;
      list-style: none;
      display: flex;
      z-index: 4;
      pointer-events: none;
    }
    .xiu > li {
      text-align: center;
      text-shadow: none;
      white-space: nowrap;
      overflow: visible;
    }

    /* 南（顶=午） */
    .xiu.north {
      top: 6.2%;
      left: 18%;
      right: 18%;
      justify-content: space-between;
      align-items: center;
    }
    .xiu.north > li { transform: rotate(180deg); }
    /* 北（底=子） */
    .xiu.south {
      bottom: 6.2%;
      left: 18%;
      right: 18%;
      justify-content: space-between;
      align-items: center;
    }
    /* 西（右=酉） */
    .xiu.east {
      top: 18%;
      bottom: 18%;
      right: 6.2%;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 1.35em;
    }
    .xiu.east > li { transform: rotate(-90deg); }
    /* 东（左=卯） */
    .xiu.west {
      top: 18%;
      bottom: 18%;
      left: 6.2%;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 1.35em;
    }
    .xiu.west > li { transform: rotate(90deg); }

    /* —— 干支格 —— */
    .ganzhi {
      position: absolute;
      list-style: none;
      display: flex;
      z-index: 5;
      pointer-events: none;
    }
    .ganzhi > li {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      background: rgba(255,245,230,.35);
      box-shadow: inset 0 0 0 0.5px rgba(255,230,200,.15);
    }
    .ganzhi > li.mid { flex: 0 0 auto; }
    .ganzhi > li.side { flex: 1; gap: 0.2em; }
    .ganzhi > li.side span {
      display: inline-block;
    }

    /* 南（顶=午） */
    .ganzhi.north {
      top: 15.2%;
      left: 22%;
      right: 22%;
      height: 6.5%;
    }
    .ganzhi.north > li { transform: rotate(180deg); }
    .ganzhi.north > li.mid { width: 1.65em; }
    .ganzhi.north > li.side { flex-direction: row; }

    /* 北（底=子） */
    .ganzhi.south {
      bottom: 15.2%;
      left: 22%;
      right: 22%;
      height: 6.5%;
    }
    .ganzhi.south > li.mid { width: 1.65em; }
    .ganzhi.south > li.side { flex-direction: row; }

    /* 西（右=酉）：排法同前 */
    .ganzhi.east {
      top: 22.5%;
      bottom: 22.5%;
      right: 14.8%;
      width: 7.2%;
      flex-direction: column;
    }
    .ganzhi.east > li { width: 100%; }
    .ganzhi.east > li.mid {
      flex: 0 0 1.7em;
      height: 1.7em;
      transform: rotate(-90deg);
    }
    .ganzhi.east > li.side {
      flex-direction: column;
      gap: 0.2em;
    }
    .ganzhi.east > li.side span { transform: rotate(-90deg); }

    /* 东（左=卯）：排法同前 */
    .ganzhi.west {
      top: 22.5%;
      bottom: 22.5%;
      left: 14.8%;
      width: 7.2%;
      flex-direction: column;
    }
    .ganzhi.west > li { width: 100%; }
    .ganzhi.west > li.mid {
      flex: 0 0 1.7em;
      height: 1.7em;
      transform: rotate(90deg);
    }
    .ganzhi.west > li.side {
      flex-direction: column;
      gap: 0.2em;
    }
    .ganzhi.west > li.side span { transform: rotate(90deg); }

    /* ========== 天盘（同系木色，阴影浮起） ========== */
    .tianpan {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 56%;
      height: 56%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      z-index: 10;
      cursor: default;
      touch-action: none;
      background:
        radial-gradient(circle at 36% 26%, #f2deC6 0%, var(--tian) 42%, var(--tian2) 74%, var(--tian3) 100%);
      border: 1px solid var(--line);
      box-shadow:
        0 14px 26px rgba(90,55,30,.28),
        0 4px 0 rgba(120,80,45,.22),
        inset 0 0 0 1px rgba(255,240,220,.4),
        inset 0 -10px 18px rgba(110,70,35,.18),
        inset 0 8px 14px rgba(255,248,235,.28);
      -webkit-font-smoothing: antialiased;
    }
    .tianpan::after {
      content: "";
      position: absolute;
      inset: 12%;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle at 35% 25%, rgba(255,250,240,.2), transparent 52%);
      z-index: 30;
    }
    .tianpan:active,
    .tianpan.dragging { cursor: default; }
    .tianpan.dragging {
      box-shadow:
        0 0 0 2px rgba(120,80,45,.35),
        0 16px 28px rgba(90,55,30,.32);
    }

    .tianpan-inner {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      /* 复位：午上子下卯左酉右 */
      transform: rotate(var(--rot, 0deg));
      /* 不用 container-type，避免影响圈内文字渲染 */
      overflow: visible;
    }

    /* 三层环：月将 / 天将 / 遁干 —— 分割线在两宫之间 */
    .layer {
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      border: 0.5px solid rgba(74, 50, 32, 0.7);
      pointer-events: none;
      z-index: 0;
    }

    .layer.yuejiang {
      width: 100%;
      height: 100%;
      background: repeating-conic-gradient(
        from 165deg,
        transparent 0 29.7deg,
        rgba(50,25,10,.42) 29.7deg 30deg
      );
      -webkit-mask: radial-gradient(circle, transparent 58%, #000 58.5%);
      mask: radial-gradient(circle, transparent 58%, #000 58.5%);
    }

    .layer.tianjiang {
      width: 58%;
      height: 58%;
      background: repeating-conic-gradient(
        from 165deg,
        transparent 0 29.7deg,
        rgba(50,25,10,.42) 29.7deg 30deg
      );
      -webkit-mask: radial-gradient(circle, transparent 62%, #000 62.5%);
      mask: radial-gradient(circle, transparent 62%, #000 62.5%);
      box-shadow: 0 0 0 0.5px rgba(74, 50, 32, 0.7);
    }

    .layer.dizhi {
      width: 36%;
      height: 36%;
      background: repeating-conic-gradient(
        from 165deg,
        transparent 0 29.7deg,
        rgba(50,25,10,.42) 29.7deg 30deg
      );
      -webkit-mask: radial-gradient(circle, transparent 48%, #000 48.5%);
      mask: radial-gradient(circle, transparent 48%, #000 48.5%);
      box-shadow: 0 0 0 0.5px rgba(74, 50, 32, 0.7);
    }

    .layer.hub {
      width: 18%;
      height: 18%;
      z-index: 2;
      background:
        radial-gradient(circle at 38% 30%, #f0d8bc, var(--tian2) 70%, var(--tian3));
      box-shadow: inset 0 2px 6px rgba(255,250,240,.4), inset 0 -3px 8px rgba(90,55,30,.22);
      border: 0.5px solid rgba(74, 50, 32, 0.7);
    }

    /* 四正参考线：午上 / 酉右 / 子下 / 卯左 */
    .cardinals {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      background:
        linear-gradient(rgba(74, 50, 32, 0.55), rgba(74, 50, 32, 0.55)) center / 0.5px 100% no-repeat,
        linear-gradient(90deg, rgba(74, 50, 32, 0.55), rgba(74, 50, 32, 0.55)) center / 100% 0.5px no-repeat;
      opacity: 0.28;
      -webkit-mask: radial-gradient(circle, transparent 14%, #000 14.5%, #000 49%, transparent 49.5%);
      mask: radial-gradient(circle, transparent 14%, #000 14.5%, #000 49%, transparent 49.5%);
    }

    .ring {
      position: absolute;
      inset: 0;
      list-style: none;
      border-radius: 50%;
      pointer-events: none;
      z-index: 20;
      overflow: visible;
    }

    /*
      i=0 子在下；顺时针：3卯左、6午上、9酉右
      直角坐标站位（--x/--y 由 JS 写入）+ 单次 rotate，对齐西方干支渲染路径
    */
    .ring > li {
      position: absolute;
      left: calc(50% + var(--x, 0px));
      top: calc(50% + var(--y, 0px));
      width: max-content;
      height: max-content;
      margin: 0;
      padding: 0;
      border: none;
      background: none;
      line-height: 0;
      overflow: visible;
      transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
      transform-origin: center center;
    }

    .ring > li .ring-glyph {
      display: block;
      margin: 0;
      padding: 0;
      border: none;
      background: none;
      white-space: nowrap;
      text-shadow: none;
    }

    #ring-yuejiang > li {
      --rad: var(--rad-yj, 145px);
    }
    #ring-yuejiang > li .ring-glyph {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      line-height: 1;
    }
    #ring-yuejiang > li .yj-alias,
    #ring-yuejiang > li .yj-zhi {
      display: block;
    }

    #ring-tianjiang > li {
      --rad: var(--rad-tj, 100px);
    }

    .tri-row .gen.is-red,
    .lesson-col .gen-line.is-red { color: #c41e1e; }

    #ring-dizhi > li {
      --rad: var(--rad-dz, 72px);
    }
    /* 遁干单独略小一档，字族/字重/墨色仍与干支一致 */
    #ring-dizhi > li .ring-glyph,
    #ring-dizhi > li .ring-glyph.plate-char {
      font-size: clamp(11px, 1.6vw, 14px);
    }
    #ring-dizhi > li.is-kong .ring-glyph { opacity: 0.4; }

    .toolbar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      max-width: min(94vw, 680px);
      font-family: "Microsoft YaHei", sans-serif;
    }
    .toolbar label {
      color: #c8b090;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .toolbar select {
      font-size: 13px;
      padding: 5px 8px;
      border: 1px solid #7a6248;
      border-radius: 6px;
      background: #2a241c;
      color: #e8d5b8;
    }
    .toolbar button {
      font-size: 13px;
      padding: 7px 14px;
      border: 1px solid #7a6248;
      border-radius: 6px;
      background: #3a3228;
      color: #e8d5b8;
      cursor: pointer;
    }
    .toolbar button:hover { background: #4a4034; }

    .angles {
      font-family: "Microsoft YaHei", monospace;
      font-size: 12px;
      color: #333;
      text-align: center;
      max-width: min(94vw, 680px);
      line-height: 1.5;
    }

    /* 排盘设置区：对齐本站大六壬 setup；顶栏开关控制显隐 */
    .setup-panel {
      display: none;
      width: min(94vw, 680px);
      background: #fff;
      border: none;
      border-radius: 16px;
      padding: 18px 16px 16px;
      color: #111;
      font-family: "Microsoft YaHei", sans-serif;
      margin: 10px 0 0;
      position: relative;
      z-index: 5;
      box-shadow: 0 2px 12px rgba(0,0,0,.06);
    }
    .setup-panel.is-open {
      display: block;
    }
    .setup-panel.is-open + .kechuan-panel {
      margin-top: 8px;
    }
    .setup-panel h3.setup-heading {
      margin: 0 0 8px;
      color: #000;
      font-size: 16px;
      font-weight: 700;
    }
    .setup-panel .sec {
      margin: 0 0 14px;
      padding: 0 0 14px;
      border-bottom: 1px solid #eee;
    }
    .setup-panel .sec:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
    .setup-panel .lab {
      display: block;
      font-size: 12px;
      color: #888;
      margin-bottom: 6px;
      font-weight: 500;
    }
    .setup-panel .row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .setup-panel .grid2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      align-items: start;
    }
    .setup-panel .grid-shehai {
      display: grid;
      grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
      gap: 8px;
      align-items: start;
    }
    @media (max-width: 560px) {
      .setup-panel .time-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .setup-panel .time-tab { padding: 7px 14px; font-size: 14px; }
      .setup-panel .time-tab.active { font-size: 15px; }
    }
    .setup-panel select,
    .setup-panel input[type="text"] {
      width: 100%;
      font-size: 14px;
      padding: 10px 8px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      background: #fff;
      color: #111;
      min-width: 0;
      outline: none;
      box-sizing: border-box;
    }
    .setup-panel select:focus,
    .setup-panel input[type="text"]:focus {
      border-color: #d4d4d4;
    }
    .setup-panel .time-tabs {
      display: inline-flex;
      align-items: center;
      gap: 0;
      margin: 4px auto 10px;
      padding: 3px;
      border-radius: 999px;
      background: #f1f1f1;
      width: fit-content;
      max-width: 100%;
    }
    .setup-panel .time-tabs-wrap {
      display: flex;
      justify-content: center;
    }
    .setup-panel .time-tab {
      border: none;
      background: transparent;
      color: #888;
      border-radius: 999px;
      padding: 7px 18px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: all .2s ease;
      flex: none;
      max-width: none;
      box-shadow: none;
    }
    .setup-panel .time-tab.active {
      background: #fff;
      color: #111;
      font-size: 17px;
      font-weight: 700;
      border: none;
      box-shadow: 0 1px 4px rgba(0,0,0,.08);
    }
    .setup-panel .time-panel { display: none; }
    .setup-panel .time-panel.active { display: block; }
    .setup-panel .time-row {
      display: grid;
      grid-template-columns: 1.35fr .8fr .8fr .8fr .8fr;
      gap: 8px;
    }
    .setup-panel .time-row select {
      text-align: center;
      padding: 10px 4px;
    }
    .setup-panel .gz-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .setup-panel .gz-grid .lab {
      text-align: left;
      margin-bottom: 4px;
      white-space: nowrap;
    }
    .setup-panel .gz-grid select { width: 100%; text-align: center; }
    .setup-panel .ming-row {
      display: flex;
      gap: 8px;
      flex-wrap: nowrap;
      align-items: center;
      min-width: 0;
    }
    .setup-panel .ming-row select { flex: 1; min-width: 0; }
    .setup-panel .ming-row #sel-ming-year {
      flex: 0 0 auto;
      width: 4.5em;
      min-width: 4.5em;
      max-width: 4.5em;
      padding-left: 8px;
      padding-right: 4px;
      box-sizing: border-box;
    }
    .setup-panel .ming-row .ming-xing-lab {
      flex: 0 0 auto;
      white-space: nowrap;
      font-size: 13px;
      color: #555;
    }
    .setup-panel .ming-row .ming-result {
      flex: 0 0 auto;
      min-width: 2.4em;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 700;
      color: #1565c0;
    }
    .setup-panel .cast-btn {
      display: block;
      width: 100%;
      margin-top: 4px;
      padding: 14px;
      border: 1px solid #d4d4d4;
      border-radius: 12px;
      background: #fff;
      color: #333;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      letter-spacing: 0.08em;
      transition: all .2s ease;
    }
    .setup-panel .cast-btn:hover {
      background: #f5f5f5;
      border-color: #d4d4d4;
    }
    .setup-panel .meta {
      font-size: 12px;
      color: #666;
      line-height: 1.55;
      margin-top: 8px;
      text-align: center;
    }
    #angles.meta,
    .setup-panel #angles {
      color: #666;
    }

    /* 四课三传：课传与年柱同行；年柱与四课同竖列 */
    .kechuan-panel {
      width: min(96vw, 720px);
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 12px 14px 10px;
      margin: 8px 0 0;
      color: #111;
      font-family: "Microsoft YaHei", sans-serif;
      box-shadow: 0 1px 4px rgba(0,0,0,.06);
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns: minmax(7.5em, max-content) minmax(0, 1fr);
      column-gap: 12px;
      row-gap: 8px;
      align-items: start;
    }
    .kechuan-panel .kc-title {
      grid-column: 1;
      grid-row: 1;
      align-self: center;
      font-size: 13px;
      font-weight: 700;
      color: #222;
      letter-spacing: .04em;
      padding-right: 12px;
      border-right: 1px solid #eee;
      margin: 0;
      white-space: nowrap;
    }
    .kechuan-panel .kc-method {
      font-weight: 400;
      color: #666;
      font-size: 12px;
      margin-left: 4px;
    }
    .kechuan-panel .pillars {
      grid-column: 2;
      grid-row: 1;
      align-self: center;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      margin: 0;
      padding: 0;
      font-size: 15px;
      font-weight: 700;
      color: #111;
      letter-spacing: 0;
      text-align: center;
    }
    .kechuan-panel .pillars > span { display: block; }
    .kechuan-panel .pillars span .st,
    .kechuan-panel .pillars span .br { color: #111; }
    .kechuan-panel .kc-block.tri-block {
      grid-column: 1;
      grid-row: 2;
      min-width: 7.5em;
      padding-right: 12px;
      border-right: 1px solid #eee;
    }
    .kechuan-panel .kc-block.lessons-block {
      grid-column: 2;
      grid-row: 2;
      min-width: 0;
    }
    .kechuan-panel .kc-block.lessons-block .kc-head {
      margin-left: 5px;
    }
    .kc-block .kc-head {
      font-size: 12px;
      font-weight: 700;
      color: #333;
      margin-bottom: 6px;
      padding-bottom: 3px;
      border-bottom: 1px solid #eee;
      white-space: nowrap;
    }
    .tri-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .tri-row {
      display: grid;
      grid-template-columns: 1.1em 1.1em 1.2em 0.95em 1.2em;
      gap: 4px;
      align-items: center;
      justify-content: start;
      font-size: 14px;
      line-height: 1.35;
      white-space: nowrap;
    }
    .tri-row .lq { color: #666; font-size: 12px; }
    .tri-row .gen { color: #8b4513; font-weight: 600; }
    .tri-row .branch { font-weight: 700; color: #111; }
    .tri-row .stem { color: #666; font-size: 11px; }
    .tri-row .name { color: #888; font-size: 11px; }
    .lessons-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      text-align: center;
    }
    .lesson-col {
      display: grid;
      grid-template-columns: 1.4em 1em;
      justify-content: center;
      align-items: baseline;
      column-gap: 2px;
      row-gap: 1px;
      font-size: 13px;
      line-height: 1.2;
      padding: 6px 2px 4px;
      border-radius: 6px;
      background: #fafafa;
      border: 1px solid #eee;
    }
    /* 主字在左，遁干等在右旁 */
    .lesson-col .gen-line {
      grid-column: 1 / 3;
      color: #8b4513;
      font-weight: 600;
      font-size: 12px;
      text-align: center;
    }
    .lesson-col .upper { grid-column: 1; font-weight: 700; color: #111; }
    .lesson-col .lower { grid-column: 1; font-weight: 600; color: #333; }
    .lesson-col .lesson-stem {
      grid-column: 2;
      color: #666;
      font-size: 10px;
      font-weight: 600;
      min-height: 1em;
    }
    .lesson-col .name {
      grid-column: 1 / 3;
      color: #888;
      font-size: 10px;
      margin-top: 1px;
    }