:root{
  color-scheme:dark;
  --page:#06142d;
  --panel:#0b1f3f;
  --line:rgba(89,213,255,.95);
  --line-soft:rgba(59,177,235,.65);
  --header-top:rgba(0,83,160,.98);
  --header-bottom:rgba(0,54,119,.96);
  --cell-top:rgba(238,250,255,.96);
  --cell-bottom:rgba(216,241,252,.92);
  --dark-top:rgba(0,86,164,.83);
  --dark-bottom:rgba(0,48,112,.86);
  --green:#1d922e;
  --total-value-size:28px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0,#12386c 0,#071a3a 42%,#040d20 100%);font-family:Arial,Helvetica,sans-serif}
body{color:#fff}
button,select,input{font:inherit}
.toolbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 14px;background:rgba(4,16,38,.94);border-bottom:1px solid rgba(90,189,255,.24);
  backdrop-filter:blur(12px);box-shadow:0 6px 24px rgba(0,0,0,.25)
}
.toolbar__brand{font-weight:800;letter-spacing:.4px;white-space:nowrap;display:flex;align-items:center;gap:7px}
.version-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:20px;padding:0 6px;border-radius:999px;background:#0d6cae;border:1px solid rgba(91,220,255,.65);font-size:11px;color:#dff8ff}
.toolbar__group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1}
.btn,select,.toolbar__number{
  border:1px solid rgba(122,205,255,.35);background:#102d55;color:#f4fbff;border-radius:8px;padding:8px 12px;
  transition:.15s ease
}
.btn,select{cursor:pointer}
.btn:hover,select:hover,.toolbar__number:hover{border-color:rgba(123,220,255,.8);background:#173a69}
.btn--primary{background:linear-gradient(180deg,#1484cf,#075b9c);border-color:#55d8ff;font-weight:700}
.btn--ghost{background:transparent;color:#b8d9ec}
.toolbar__field{display:flex;align-items:center;gap:6px;color:#bcd6e8;font-size:13px;white-space:nowrap}
.toolbar__field select{padding:7px 10px}
.toolbar__number{width:58px;padding:7px 7px;text-align:center;outline:none}
.toolbar__number--font{width:64px}
.toolbar__number:focus{border-color:#55d8ff;box-shadow:0 0 0 2px rgba(59,197,255,.16)}
.toolbar__unit{margin-left:-3px;color:#7fb4d2;font-size:11px}
.toolbar__status{font-size:12px;color:#91c7e8;min-width:160px;text-align:right}
.workspace{padding:18px 12px 40px;display:flex;flex-direction:column;align-items:center}
.poster-shell{position:relative;width:min(1024px,calc(100vw - 24px));height:1536px;overflow:visible}
.poster{
  position:absolute;left:0;top:0;width:1024px;height:1536px;transform-origin:0 0;
  background-image:url('assets/background.png');background-size:1024px 1536px;background-repeat:no-repeat;background-position:0 0;
  overflow:hidden;isolation:isolate;--total-value-size:28px;
}
.editable{outline:none;cursor:text}
.editable:focus{box-shadow:inset 0 0 0 2px rgba(92,224,255,.75),0 0 0 2px rgba(0,0,0,.2);border-radius:3px}
.hero-date{
  position:absolute;z-index:3;left:254px;top:21px;width:520px;height:88px;text-align:center;white-space:nowrap;
  font-family:"Arial Narrow",Arial,sans-serif;font-stretch:condensed;font-size:78px;font-weight:900;line-height:88px;letter-spacing:1px;
  color:#fff;-webkit-text-stroke:1.25px rgba(75,129,223,.96);
  text-shadow:0 0 2px #fff,0 0 9px rgba(118,179,255,.95),0 5px 2px rgba(0,32,102,.62)
}
.hero-title{
  position:absolute;z-index:3;left:174px;top:94px;width:680px;height:67px;text-align:center;white-space:nowrap;
  font-family:"Arial Narrow",Arial,sans-serif;font-stretch:condensed;font-size:49px;font-weight:900;line-height:58px;letter-spacing:-1.2px;
  color:#f7fbff;-webkit-text-stroke:1.2px rgba(50,105,201,.98);
  text-shadow:0 1px 1px #fff,0 0 7px rgba(143,190,255,.9),0 4px 2px rgba(0,22,85,.7)
}
.hero-title.reflect::after{
  content:attr(data-reflect);position:absolute;left:0;top:47px;width:100%;height:38px;pointer-events:none;
  color:#c9ddff;-webkit-text-stroke:1px rgba(45,95,180,.7);text-shadow:0 0 3px rgba(92,162,255,.55);
  transform:scaleY(-.72);transform-origin:center top;opacity:.24;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 82%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 82%);
  overflow:hidden
}
.tiers{position:absolute;inset:0;z-index:2}
.tier-card{
  position:absolute;left:23px;width:980px;border:2px solid var(--line);border-radius:16px;overflow:hidden;
  display:grid;grid-template-columns:138px 121px 180px 183px 187px 171px;
  background:rgba(0,58,126,.22);box-shadow:0 0 7px rgba(38,205,255,.5),inset 0 0 22px rgba(41,165,230,.12)
}

/* 左侧 Tier 区域：整个内容块上下、左右居中 */
.tier-left{
  grid-column:1;grid-row:1/-1;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(0,88,165,.78),rgba(0,47,108,.82));
  border-right:1.5px solid var(--line-soft);text-align:center;
  display:flex;align-items:center;justify-content:center
}
.tier-left::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,rgba(93,214,255,.16),transparent 55%);pointer-events:none}
.tier-left-content{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px 4px}
.tier-word{font-size:27px;line-height:29px;font-weight:800;text-shadow:0 2px 3px rgba(0,0,0,.35)}
.tier-rank{height:78px;display:flex;align-items:flex-end;justify-content:center;margin-top:-2px}
.tier-number{font-size:78px;line-height:.91;font-weight:900;letter-spacing:-4px;color:#fff;text-shadow:0 3px 6px rgba(0,0,0,.28)}
.tier-bars{width:47px;height:56px;display:flex;align-items:flex-end;gap:5px;opacity:.95;margin-left:-1px;margin-bottom:5px}
.tier-bars i{display:block;width:7px;background:linear-gradient(180deg,#39caff,#0878c7);box-shadow:0 0 4px rgba(61,206,255,.42)}
.tier-bars i:nth-child(1){height:13px}.tier-bars i:nth-child(2){height:24px}.tier-bars i:nth-child(3){height:36px}.tier-bars i:nth-child(4){height:52px}
.tier-desc{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e8f6ff;font-weight:700;line-height:13px;font-size:10.8px;text-shadow:0 1px 2px rgba(0,0,0,.5);min-height:28px}
.tier-desc span{display:block;max-width:128px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hcell{
  grid-row:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15.5px;font-weight:700;color:#f5fbff;
  background:linear-gradient(180deg,var(--header-top),var(--header-bottom));border-right:1.5px solid var(--line-soft);border-bottom:1.5px solid rgba(63,164,222,.62);
  text-shadow:0 1px 2px rgba(0,0,0,.5);padding:0 5px
}
.data-cell{
  display:flex;align-items:center;justify-content:center;text-align:center;min-width:0;overflow:hidden;
  background:linear-gradient(180deg,var(--cell-top),var(--cell-bottom));color:#070c12;
  border-right:1.3px solid rgba(88,162,209,.58);border-bottom:1.2px solid rgba(91,167,211,.52);
  padding:0 6px;font-weight:800;text-shadow:0 .4px 0 rgba(255,255,255,.75)
}
.data-cell.symbol{font-size:20px;letter-spacing:.2px}
.data-cell.range{font-size:17px;white-space:nowrap}
.data-cell.return{font-size:17.5px;color:#148028;font-weight:800;white-space:nowrap}
.data-cell:last-of-type{border-right:0}

/* 右侧 Total Return：整个计算结果块上下、左右严格居中 */
.tier-total{
  grid-column:6;grid-row:1/-1;position:relative;text-align:center;
  background:linear-gradient(180deg,rgba(0,84,157,.87),rgba(0,47,108,.9));
  color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden
}
.tier-total-content{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 4px}
.total-label{font-size:22px;font-weight:800;line-height:22.5px;margin:0;text-shadow:0 2px 2px rgba(0,0,0,.35)}
.total-line{width:111px;height:2px;flex:0 0 2px;background:rgba(197,236,255,.82);margin:7px 0;box-shadow:0 0 2px rgba(255,255,255,.45)}
.total-value{width:100%;font-size:var(--total-value-size,28px);line-height:1.08;font-weight:900;color:#30a91f;text-shadow:0 1px 1px rgba(0,0,0,.28);white-space:nowrap;text-align:center}
.total-value span{display:block;width:100%;text-align:center}

.hint{margin:12px 0 0;color:#9fc9df;font-size:13px;text-align:center;line-height:1.6}
.viewer-mode .editable{cursor:default}.viewer-mode .editable:focus{box-shadow:none}
.viewer-mode .toolbar,.viewer-mode .hint{display:none}
.viewer-mode .workspace{padding:0}.viewer-mode .poster-shell{width:min(1024px,100vw)}
@media (max-width:920px){
  .toolbar__status{width:100%;text-align:left}
}
@media (max-width:760px){
  .toolbar{position:relative;align-items:flex-start}.toolbar__brand{width:100%}.toolbar__status{width:100%;text-align:left}
  .workspace{padding:10px 0 28px}.poster-shell{width:100vw}.hint{padding:0 14px}
}