/* V1.9.9：首页卡片、金钩诀手绘式盘面、万事三角三入口与分步交互、全局弹框关闭 */

/* 首页工具卡：去掉浏览器默认按钮边框，并把进入按钮做成明确的大触点 */
.tool-card-compact .method-row{
  width:100%!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:inherit!important;
  text-align:left!important;
  grid-template-columns:44px minmax(0,1fr) auto!important;
  gap:11px!important;
  padding:10px 12px!important;
  appearance:none;
  -webkit-appearance:none;
}
.tool-card-compact .method-row:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.tool-card-compact .method-copy{min-width:0}
.tool-card-compact .tool-enter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:84px;
  min-height:42px;
  padding:0 14px;
  border-radius:14px;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1;
  box-shadow:0 6px 16px rgba(0,122,255,.22);
}
.tool-card-compact .tool-enter b{font-size:19px;line-height:1;font-weight:500;margin-top:-1px}
.tool-card-compact .method-row:active .tool-enter{transform:scale(.97);background:var(--accent-pressed)}
html[data-theme="xuanjian"] .tool-card-compact .tool-enter{background:linear-gradient(180deg,#373027,#211b15);border:1px solid #a98752;box-shadow:inset 0 0 0 1px rgba(255,231,181,.12),0 6px 16px rgba(48,31,18,.18)}

/* 所有底部弹框支持点击遮罩关闭；sheet自身维持可滚动 */
.modal{touch-action:manipulation}
.sheet{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* 万事三角：首页三入口 */
.content.compact:has(.triangle-v199-home),
.content.compact:has(.triangle-flow),
.content.compact:has(.triangle-expert-start),
.content.compact:has(.triangle-verdict-hero){
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding-bottom:calc(104px + var(--safe-bottom))!important;
}
.triangle-entry-grid-three{grid-template-columns:1fr;gap:10px;margin-top:4px}
.triangle-entry-grid-three .triangle-entry{position:relative;min-height:112px;padding:15px 16px 14px;display:grid;grid-template-columns:46px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.triangle-entry-grid-three .triangle-entry i{grid-row:1/3;width:46px;height:46px;border-radius:15px;font-size:19px}
.triangle-entry-grid-three .triangle-entry b{grid-column:2;margin:0;font-size:19px}
.triangle-entry-grid-three .triangle-entry span{grid-column:2;line-height:1.45;margin-top:5px}
.triangle-entry-grid-three .triangle-entry em{grid-column:3;grid-row:1/3;align-self:center;font-style:normal;padding:7px 9px;border-radius:999px;background:rgba(0,122,255,.09);color:#007aff;font-size:10px;font-weight:800;white-space:nowrap}
.triangle-entry-grid-three .triangle-entry.expert{background:linear-gradient(145deg,rgba(88,86,214,.10),rgba(175,82,222,.05)),var(--card,#fff)}
.triangle-entry-grid-three .triangle-entry.expert i{background:rgba(88,86,214,.13);color:#5856d6}
.triangle-entry-grid-three .triangle-entry.expert em{background:rgba(88,86,214,.10);color:#5856d6}
.triangle-entry-grid-three .triangle-entry.learn{background:linear-gradient(145deg,rgba(52,199,89,.10),rgba(48,209,88,.04)),var(--card,#fff)}
.triangle-entry-grid-three .triangle-entry.learn i{background:rgba(52,199,89,.13);color:#248a3d}
.triangle-entry-grid-three .triangle-entry.learn em{background:rgba(52,199,89,.10);color:#248a3d}
.triangle-home-links{margin-top:10px;border-radius:16px;overflow:hidden;background:var(--surface)}

/* 新手：一次只呈现一步 */
.triangle-flow{display:grid;gap:10px;min-height:100%}
.triangle-flow-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:3px 2px 1px}
.triangle-flow-progress span{position:relative;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:7px;padding:8px 9px;border-radius:14px;background:rgba(118,118,128,.07);color:#8e8e93}
.triangle-flow-progress span i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:rgba(118,118,128,.12);font-size:11px;font-weight:850}
.triangle-flow-progress span b{font-size:11px}
.triangle-flow-progress span.active{background:rgba(0,122,255,.10);color:#007aff}
.triangle-flow-progress span.active i{background:#007aff;color:#fff}
.triangle-flow-progress span.done{background:rgba(52,199,89,.10);color:#248a3d}
.triangle-flow-progress span.done i{background:#34c759;color:#fff}
.triangle-flow-intro{padding:4px 2px 2px}
.triangle-flow-intro h2{font-size:29px;margin:9px 0 7px;line-height:1.13}
.triangle-flow-intro p{font-size:13px;line-height:1.55}
.triangle-flow-card{padding:13px!important}
.triangle-category-step{grid-template-columns:1fr 1fr!important;gap:9px!important}
.triangle-category-step button{min-height:72px!important;padding:10px 12px!important;text-align:left!important;display:grid;align-content:center;gap:4px}
.triangle-category-step button b{display:block;font-size:16px}
.triangle-category-step button small{display:block;color:#73737a;font-size:10px;line-height:1.35;font-weight:500}
.triangle-role-summary{padding:12px 13px;margin-bottom:11px;border-radius:15px;background:rgba(0,122,255,.07)}
.triangle-role-summary small,.triangle-role-summary b{display:block}.triangle-role-summary small{font-size:10px;color:#007aff}.triangle-role-summary b{font-size:13px;margin-top:4px;line-height:1.45}
.triangle-step-digit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.triangle-step-digit-grid button{min-height:64px;border:0;border-radius:16px;background:rgba(118,118,128,.075);color:inherit;display:grid;place-content:center;gap:2px}
.triangle-step-digit-grid button strong{font-size:25px;line-height:1}
.triangle-step-digit-grid button small{font-size:9px;color:#777}
.triangle-step-digit-grid button.selected{background:#007aff;color:#fff;box-shadow:0 7px 18px rgba(0,122,255,.23)}
.triangle-step-digit-grid button.selected small{color:rgba(255,255,255,.8)}
.triangle-selected-inner{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:9px;padding:10px 12px;margin-bottom:11px;border-radius:14px;background:rgba(52,199,89,.09)}
.triangle-selected-inner span{font-size:10px;color:#248a3d;font-weight:750}.triangle-selected-inner b{font-size:23px;color:#248a3d}.triangle-selected-inner small{font-size:11px;color:#4b6854;line-height:1.35}
.triangle-order-compact{margin-top:11px;padding:10px 12px;border-radius:13px;background:rgba(255,149,0,.10);font-size:11px;color:#755015}
.triangle-flow-sticky .btn.secondary{flex:0 0 86px}

/* 高手：一页起局，压缩指导文字 */
.triangle-expert-start{display:grid;gap:10px}
.triangle-expert-heading{display:flex;justify-content:space-between;align-items:end;padding:5px 3px 0}
.triangle-expert-heading h2{font-size:28px;line-height:1.1;margin:8px 0 0}.triangle-expert-heading>small{color:#8e8e93;font-size:11px}
.triangle-category-grid.expert{grid-template-columns:repeat(5,1fr)}
.triangle-pair-picker.expert .triangle-pick{min-height:116px;padding:15px 9px}
.triangle-pair-picker.expert .triangle-pick small{min-height:30px;line-height:1.35}
.triangle-expert-note{padding:11px 13px;border-radius:15px;background:rgba(88,86,214,.08);color:#504f7d;font-size:11px;line-height:1.55}
.triangle-verdict-hero.expert{padding:15px}.triangle-verdict-hero.expert h2{font-size:22px}.triangle-key-grid.expert>div{min-height:68px}

/* 金钩诀：以手绘图为准，十二地支与年份移到九宫外围 */
.golden-board-wrap{padding:7px!important;border-radius:24px!important;overflow:visible!important}
.golden-compass-board{position:relative;width:100%;padding:46px 38px 38px;min-height:410px}
.golden-nine-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:0;aspect-ratio:1;background:rgba(60,60,67,.18);border:1.5px solid rgba(22,31,39,.72);box-shadow:0 12px 28px rgba(40,52,65,.10)}
.golden-nine-grid .golden-live-cell{min-height:0!important;border-radius:0!important;border:0!important;box-shadow:inset -1px -1px 0 rgba(25,34,42,.52)!important;background:rgba(255,255,255,.96)!important;padding:5px!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;align-items:center!important;text-align:center!important;overflow:hidden!important}
.golden-nine-grid .golden-live-cell:nth-child(3n){box-shadow:inset 0 -1px 0 rgba(25,34,42,.52)!important}
.golden-nine-grid .golden-live-cell:nth-child(n+7){box-shadow:inset -1px 0 0 rgba(25,34,42,.52)!important}
.golden-nine-grid .golden-live-cell:nth-child(9){box-shadow:none!important}
.golden-nine-grid .golden-live-cell.filled{background:linear-gradient(155deg,#fff,#eef7ff)!important}
.golden-live-cell.center{background:rgba(248,249,251,.92)!important;color:#b0b0b5;display:grid!important;place-items:center!important;font-family:STKaiti,KaiTi,serif}
.golden-live-cell.center span{font-size:12px;opacity:.38}
.golden-palace-top,.golden-palace-bottom{display:flex;align-items:center;justify-content:center;gap:4px;line-height:1;min-height:20px}
.golden-palace-top small,.golden-palace-bottom small{display:none}.golden-palace-top b,.golden-palace-bottom b{font-family:STKaiti,KaiTi,serif;font-size:18px;color:#31363b}
.golden-palace-bottom b{color:#0878c8}.golden-palace-bottom{align-self:end}
.golden-nine-grid .golden-result-name{margin:2px 0!important;padding:2px!important;width:100%!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;text-align:center!important;align-self:stretch;display:grid!important;place-content:center!important;color:inherit!important}
.golden-nine-grid .golden-result-name small{font-size:9px;color:#5e6d78;font-weight:700}.golden-nine-grid .golden-result-name strong{font-size:24px;line-height:1.05;color:#111;margin:3px 0 1px;font-weight:700}.golden-nine-grid .golden-result-name span{font-size:8px;line-height:1.2;color:#61666b;-webkit-line-clamp:1}
.golden-nine-grid .golden-empty-slot{margin:0!important;opacity:.38;display:grid;place-content:center;gap:3px;min-height:40px}
.golden-nine-grid .golden-empty-slot span{font-size:8px;color:#868b91}.golden-nine-grid .golden-empty-slot b{display:none}
.golden-perimeter{position:absolute;width:54px;text-align:center;z-index:2;color:#2d343a;line-height:1.15}
.golden-perimeter b{display:block;font-family:STKaiti,KaiTi,serif;font-size:20px;color:#222;margin-bottom:4px}
.golden-perimeter span{display:block;font-size:11px;line-height:1.28;color:#5f6469;font-variant-numeric:tabular-nums}
.golden-perimeter.north-west{left:25%;top:2px;transform:translateX(-50%)}
.golden-perimeter.north{left:50%;top:2px;transform:translateX(-50%)}
.golden-perimeter.north-east{left:75%;top:2px;transform:translateX(-50%)}
.golden-perimeter.west-north{left:0;top:28%;transform:translateY(-50%)}
.golden-perimeter.east-north{right:0;top:28%;transform:translateY(-50%)}
.golden-perimeter.west{left:0;top:50%;transform:translateY(-50%)}
.golden-perimeter.east{right:0;top:50%;transform:translateY(-50%)}
.golden-perimeter.west-south{left:0;top:72%;transform:translateY(-50%)}
.golden-perimeter.east-south{right:0;top:72%;transform:translateY(-50%)}
.golden-perimeter.south-west{left:25%;bottom:0;transform:translateX(-50%)}
.golden-perimeter.south{left:50%;bottom:0;transform:translateX(-50%)}
.golden-perimeter.south-east{left:75%;bottom:0;transform:translateX(-50%)}
.golden-shake-overlay{inset:7px!important}
html[data-theme="xuanjian"] .golden-nine-grid .golden-live-cell{background:rgba(247,239,222,.97)!important}
html[data-theme="xuanjian"] .golden-nine-grid .golden-live-cell.filled{background:linear-gradient(155deg,#f8efdd,#ead9b8)!important}
html[data-theme="xuanjian"] .golden-nine-grid .golden-result-name strong{color:#2b2118}
html[data-theme="xuanjian"] .golden-palace-bottom b{color:#7f2f25}

@media(max-width:390px){
  .tool-card-compact .tool-enter{min-width:76px;padding:0 11px}
  .triangle-entry-grid-three .triangle-entry{grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto auto;min-height:108px}.triangle-entry-grid-three .triangle-entry i{width:42px;height:42px}.triangle-entry-grid-three .triangle-entry em{grid-column:2;grid-row:3;justify-self:start;margin-top:7px}
  .triangle-category-grid.expert{grid-template-columns:repeat(4,1fr)}
  .golden-compass-board{padding:42px 34px 34px;min-height:388px}.golden-perimeter{width:46px}.golden-perimeter b{font-size:18px}.golden-perimeter span{font-size:9px}.golden-nine-grid .golden-result-name strong{font-size:21px}
}
@media(max-width:350px){
  .triangle-step-digit-grid{grid-template-columns:repeat(4,1fr);gap:6px}.triangle-step-digit-grid button{min-height:56px}.triangle-step-digit-grid button strong{font-size:22px}
  .golden-compass-board{padding:38px 30px 30px;min-height:360px}.golden-perimeter{width:40px}.golden-perimeter span{font-size:8px}.golden-nine-grid .golden-result-name strong{font-size:18px}
}