.ycp-four-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 390px);
  margin: 12px auto 18px;
}


.ycp-four-pillars--full {
  width: 100%;
  margin: 12px 0 18px;
}

.ycp-four-pillar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px;
  border: 1px solid var(--line-faint);
  border-radius: 12px;
  background: var(--card-bg-soft-translucent);
  text-align: center;
}

.ycp-four-pillar-gz {
  color: var(--ink-main);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
}

.ycp-four-pillar-gz-char {
  display: inline-block;
  min-width: 1em;
}

.ycp-four-pillar-sub {
  overflow: hidden;
  color: var(--ink-light);
  font-size: 12px;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .ycp-four-pillars { gap: 10px; }
  .ycp-four-pillar { padding: 10px 8px; }
  .ycp-four-pillar-gz { font-size: 18px; }
  .ycp-four-pillar-sub { font-size: 10px; letter-spacing: 0; }
}

.ycp-chronology-overlay { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; padding:20px; background:rgba(31,31,31,.48); }
.ycp-chronology-overlay.show { display:flex; }
body.ycp-chronology-open { overflow:hidden; }
.ycp-chronology-dialog { width:min(620px,100%); max-height:min(84vh,590px); overflow:hidden; padding:18px 20px 20px; background:var(--card-bg,#fff); color:var(--ink-main,#1f1f1f); border:1px solid var(--line-border,#e5e5e5); border-radius:14px; box-shadow:0 18px 46px rgba(0,0,0,.18); }
.ycp-chronology-head { display:flex; align-items:center; gap:12px; }
.ycp-chronology-tabs { display:grid; grid-template-columns:repeat(2,1fr); flex:1; border-bottom:1px solid var(--line-border,#e5e5e5); }
.ycp-chronology-tabs button { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--ink-light,#757575); padding:10px 6px; font:inherit; cursor:pointer; }
.ycp-chronology-dialog button:focus:not(:focus-visible) { outline:none; }
.ycp-chronology-dialog button:focus-visible { outline:none; }
.ycp-chronology-tabs button.active { color:var(--ink-main,#1f1f1f); border-bottom-color:var(--cinnabar,#cf3838); font-weight:700; }
.ycp-chronology-close { border:0; background:none; color:var(--ink-light,#757575); font-size:26px; line-height:1; cursor:pointer; }
.ycp-chronology-note { min-height:22px; margin:12px 0 8px; color:var(--ink-light,#757575); font-size:12px; text-align:center; line-height:1.6; }
.ycp-chronology-wheels { --ycp-wheel-height:196px; --ycp-wheel-row-height:40px; position:relative; display:grid; grid-template-columns:1.55fr 1.05fr 1.05fr .9fr .9fr; gap:8px; padding:4px 0 8px; }
.ycp-chronology-wheels::before { content:""; position:absolute; z-index:2; top:calc(24px + (var(--ycp-wheel-height) - var(--ycp-wheel-row-height)) / 2); right:0; left:0; height:var(--ycp-wheel-row-height); border-top:1px solid rgba(31,31,31,.18); border-bottom:1px solid rgba(31,31,31,.18); pointer-events:none; }
.ycp-chronology-wheel-wrap { min-width:0; }
.ycp-chronology-wheel-label { height:20px; margin:0; color:var(--ink-light,#757575); font-size:12px; line-height:20px; text-align:center; }
.ycp-chronology-wheel { height:var(--ycp-wheel-height); overflow-y:auto; overflow-anchor:none; overscroll-behavior:contain; scroll-behavior:smooth; scroll-snap-type:y mandatory; border:0; scrollbar-width:none; -ms-overflow-style:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 17%, #000 83%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 17%, #000 83%, transparent 100%); }
.ycp-chronology-wheel-spacer { display:block; height:calc((var(--ycp-wheel-height) - var(--ycp-wheel-row-height)) / 2); pointer-events:none; }
.ycp-chronology-wheel::-webkit-scrollbar { display:none; width:0; height:0; }
.ycp-chronology-wheel button { display:block; width:100%; height:var(--ycp-wheel-row-height); padding:0 3px; border:0; background:transparent; color:#aaa; font:inherit; font-size:14px; scroll-snap-align:center; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:clip; }
.ycp-chronology-wheel button.active { color:var(--ink-main,#1f1f1f); background:transparent; box-shadow:none; font-size:15px; font-weight:600; }
.ycp-chronology-actions { display:flex; justify-content:flex-end; padding-top:6px; }
.ycp-chronology-confirm { min-width:120px; padding:10px 24px; border:1px solid var(--action-bg,#1f1f1f); background:var(--action-bg,#1f1f1f); color:var(--action-text,#fff); font:inherit; cursor:pointer; }
.ycp-chronology-confirm:hover { background:var(--action-bg,#1f1f1f); border-color:var(--action-bg,#1f1f1f); }
@media (max-width:640px) { .ycp-chronology-overlay { padding:14px; } .ycp-chronology-dialog { width:100%; padding:14px 12px 14px; border-radius:12px; } .ycp-chronology-wheels { --ycp-wheel-height:188px; gap:4px; } .ycp-chronology-wheel button { font-size:13px; } }

.ycp-four-pillars--compact {
  margin: 0 auto 14px;
}

.ycp-four-pillars--wide {
  width: 100%;
  margin: 16px 0 0;
}

.ycp-branch-board {
  width: 100%;
  overflow-x: auto;
}

.ycp-branch-board-table {
  width: 100%;
  min-width: 520px;
  background: var(--line-border);
  border-collapse: separate;
  border-spacing: 1px;
  border: 1px solid #eae7df;
  border-radius: 16px;
  overflow: hidden;
}

.ycp-branch-board-table td {
  position: relative;
  height: 124px;
  padding: 8px 6px;
  background: var(--card-bg);
  text-align: center;
  vertical-align: middle;
}

.ycp-branch-board-cell--top,
.ycp-branch-board-cell--bottom { height: 116px !important; }
.ycp-branch-board-center {
  color: var(--ink-main);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 2px;
}
.ycp-branch-board-branch {
  position: absolute;
  top: 7px;
  left: 7px;
  color: #b7b7b7;
  font-size: 11px;
}
.ycp-branch-board-stack {
  display: flex;
  min-height: 88px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ycp-branch-board-value { display: block; line-height: 1.15; }
.ycp-branch-board-star { color: #111; font-size: 16px; }
.ycp-branch-board-tian { color: #111; font-size: 21px; font-weight: 700; }
.ycp-branch-board-di { color: #111; font-size: 18px; }
.ycp-branch-board-highlight { color: #b94a48 !important; font-weight: 800; }

@media (max-width: 640px) {
  .ycp-branch-board-table { min-width: 430px; }
  .ycp-branch-board-table td { height: 108px; padding: 7px 4px; }
  .ycp-branch-board-cell--top,
  .ycp-branch-board-cell--bottom { height: 100px !important; }
  .ycp-branch-board-center { font-size: 20px; }
  .ycp-branch-board-star { font-size: 14px; }
  .ycp-branch-board-tian { font-size: 18px; }
  .ycp-branch-board-di { font-size: 16px; }
}