:root{
  --bg:#FDFCFB;
  --surface:#fff;
  --surface-soft:#F5F5F4;
  --surface-blue:#F4F6FF;
  --text:#1C1B1B;
  --muted:#707282;
  --line:#E8E6E7;
  --line-strong:#D8D6DB;
  --primary:#0000FF;
  --primary-soft:#EEF0FF;
  --green:#159447;
  --green-soft:#EAF8EE;
  --orange:#B96300;
  --red:#BA1A1A;
  --shadow:0 14px 40px rgba(25,24,30,.06);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Noto Sans TC",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
svg{display:block}
.app-shell{max-width:760px;margin:0 auto;min-height:100vh;padding:0 24px 132px}
.topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:40px minmax(0,1fr) 40px 40px;gap:10px;align-items:center;padding:14px 0 12px;background:rgba(253,252,251,.9);backdrop-filter:blur(18px)}
.icon-btn,.star-btn{border:0;background:transparent;padding:0;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;border-radius:50%}
.icon-btn:hover,.star-btn:hover{background:var(--surface-soft)}
.icon-btn svg,.star-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-btn:first-child svg circle{fill:currentColor;stroke:none}.bell{position:relative}.bell .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--primary);right:6px;top:7px;border:2px solid var(--bg)}
.search-pill{min-width:0;height:42px;border-radius:999px;background:#F5F2F3;display:flex;align-items:center;gap:10px;padding:0 16px;color:#8D8D9B;font-size:15px}.search-pill svg{width:21px;height:21px;fill:none;stroke:#55586C;stroke-width:2;flex:0 0 auto}.search-pill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero{padding-top:22px}.hero-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.ticker-row{display:flex;align-items:center;gap:10px}.ticker-row h1{margin:0;font-size:34px;letter-spacing:-.035em;line-height:1;font-weight:650}.tag{font-size:13px;font-weight:600;padding:7px 11px;background:#F3F3F4;border-radius:999px}.fund-name{margin:12px 0 0;color:#667089;font-size:17px}.star-btn{color:#9DA3B5}
.price-status-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(190px,.7fr);gap:24px;align-items:center;padding:34px 0 18px}.eyebrow-row{display:flex;flex-wrap:wrap;gap:8px 16px;color:#6F768B;font-size:13px;font-weight:500}.price{font-size:72px;line-height:.96;letter-spacing:-.05em;font-weight:500;margin-top:12px}.change{font-size:20px;font-weight:600;margin-top:12px}.change.up{color:var(--primary)}.change.down{color:var(--red)}.change.neutral{color:var(--muted)}
.status-block{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.status-ring{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--green) 0 100%,#E9EAEC 100%)}.status-ring::after{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--bg)}.status-ring>div{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}.status-ring strong{font-size:27px;font-weight:600}.status-ring span{font-size:13px;color:#667089;margin-top:2px}.status-ring.half{background:conic-gradient(#D78A00 0 50%,#E9EAEC 50%)}.status-ring.full{background:conic-gradient(#B32025 0 2%,#E9EAEC 2%)}.status-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:600}.status-badge span{width:8px;height:8px;border-radius:50%}.status-badge.normal{background:var(--green-soft);color:var(--green)}.status-badge.normal span{background:var(--green)}.status-badge.half{background:#FFF3DD;color:#9B6200}.status-badge.half span{background:#D78A00}.status-badge.full{background:#FDEBEC;color:#A12327}.status-badge.full span{background:#B32025}.allocation-text{font-size:14px;font-weight:550}
.chart-card{margin-top:6px}.chart-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:8px}.chart-head>div{display:flex;align-items:baseline;gap:10px}.chart-title{font-size:14px;font-weight:600}.chart-sub{font-size:12px;color:var(--muted)}.period-return{color:var(--primary);font-size:15px;font-weight:650}.chart-wrap{height:250px}.chart-wrap svg{width:100%;height:100%;overflow:visible}.grid-line{stroke:#ECEAF0;stroke-width:1}.axis-label{font-size:11px;fill:#85899B}.period-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}.period-tabs button{border:0;background:transparent;border-radius:999px;padding:10px 6px;color:#7F8394;font-size:14px;cursor:pointer}.period-tabs button.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.metric-list{margin-top:28px;border:1px solid var(--line);border-radius:22px;background:var(--surface);overflow:hidden;box-shadow:0 10px 30px rgba(22,21,27,.025)}.metric-row{width:100%;border:0;background:#fff;display:grid;grid-template-columns:46px minmax(120px,1fr) minmax(0,1fr) 22px;gap:10px;align-items:center;text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer}.metric-row:last-child{border-bottom:0}.metric-row:hover{background:#FCFCFD}.metric-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#F4F5F6;color:#4D556A}.metric-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.metric-label{font-size:16px;font-weight:550}.metric-row strong{text-align:right;font-size:16px;font-weight:600}.chev{font-size:30px;line-height:1;color:#A5A8B2;text-align:right}.next-row{grid-template-columns:46px 110px minmax(0,1fr) 22px}.next-copy{display:flex;flex-direction:column;align-items:flex-end;min-width:0}.next-copy strong{max-width:100%;font-size:15px}.next-copy small{color:#7D8497;font-size:12px;margin-top:4px;text-align:right;line-height:1.4}
.detail-panel,.history-panel{margin-top:26px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}.detail-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.section-kicker{font-size:12px;color:var(--primary);font-weight:650;letter-spacing:.02em}.detail-title-row h2{font-size:21px;margin:5px 0 0;letter-spacing:-.02em}.freshness{font-size:12px;color:#6C7284;background:#F5F5F6;border-radius:999px;padding:7px 10px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);margin-top:18px;border-radius:18px;overflow:hidden}.detail-item{background:#fff;padding:16px}.detail-item span{display:block;color:#747A8C;font-size:12px;line-height:1.4}.detail-item strong{display:block;margin-top:7px;font-size:18px;font-weight:600}.history-table-wrap{overflow:auto;margin-top:16px}table{width:100%;border-collapse:collapse;min-width:620px}th,td{padding:12px 10px;border-bottom:1px solid var(--line);font-size:13px;text-align:left}th{color:#777D8E;font-weight:600}td{font-weight:500}.event-pill{display:inline-block;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:600}.event-pill.half{background:#FFF3DD;color:#8C5A00}.event-pill.full{background:#FDEBEC;color:#9C252A}.event-pill.buy{background:var(--green-soft);color:var(--green)}.empty{text-align:center;color:#8A8E9A;padding:22px}
.error-box{margin-top:20px;border-radius:18px;padding:16px;background:#FFF0F0;color:#9F1E24;font-size:13px;line-height:1.6}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:max(18px,env(safe-area-inset-bottom));z-index:30;width:min(520px,calc(100% - 40px));display:grid;grid-template-columns:repeat(4,1fr);padding:8px 14px;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border:1px solid rgba(210,210,220,.75);box-shadow:0 12px 36px rgba(28,27,35,.10);border-radius:999px}.bottom-nav button{border:0;background:transparent;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;padding:7px 4px;color:#777D8E;font-size:11px;cursor:pointer}.bottom-nav button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.bottom-nav button.active{color:var(--primary)}.bottom-nav button.active svg{fill:var(--primary);stroke:var(--primary)}
@media(max-width:680px){.app-shell{padding-left:18px;padding-right:18px}.topbar{grid-template-columns:36px minmax(0,1fr) 36px 36px}.icon-btn{width:36px;height:36px}.search-pill{height:40px;padding:0 13px}.hero{padding-top:16px}.ticker-row h1{font-size:30px}.price-status-grid{grid-template-columns:minmax(0,1fr) 150px;gap:12px;padding-top:28px}.price{font-size:60px}.status-ring{width:112px;height:112px}.status-ring::after{inset:11px}.status-ring strong{font-size:24px}.chart-wrap{height:220px}.metric-row{grid-template-columns:42px 1fr auto 18px;padding:13px 14px}.metric-icon{width:38px;height:38px}.metric-label{font-size:15px}.metric-row strong{font-size:14px}.next-row{grid-template-columns:42px 92px 1fr 18px}.detail-panel,.history-panel{padding:18px}.detail-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.app-shell{padding-left:14px;padding-right:14px}.search-pill span{font-size:0}.search-pill span::after{content:"搜尋";font-size:14px}.price-status-grid{grid-template-columns:1fr 122px}.price{font-size:54px}.change{font-size:17px}.status-ring{width:100px;height:100px}.status-ring strong{font-size:22px}.status-badge{font-size:12px;padding:6px 10px}.allocation-text{font-size:12px}.chart-wrap{height:205px}.metric-row{grid-template-columns:40px 1fr auto 16px;gap:8px}.next-row{grid-template-columns:40px 1fr 16px}.next-row .metric-label{display:none}.next-copy{align-items:flex-start}.next-copy strong,.next-copy small{text-align:left}.detail-grid{grid-template-columns:1fr}.bottom-nav{width:calc(100% - 28px)}}

/* chart strategy markers */


.threshold-marker circle,.event-marker circle,.key-marker circle{stroke:#FDFCFB;stroke-width:3}
.threshold-marker.half circle,.event-marker.half circle{fill:#D59A00}
.threshold-marker.full circle,.event-marker.full circle{fill:#C2410C}
.threshold-marker.low110 circle{fill:#6B7280}
.threshold-line line{stroke-width:1.2;stroke-dasharray:7 6;opacity:.34}
.threshold-line.half line{stroke:#D59A00}
.threshold-line.full line{stroke:#C2410C}
.event-marker.buy circle{fill:#047857}
.key-marker circle{fill:#0000FF}
.key-marker.low circle{fill:#64748B}
.marker-price{font-size:10px;font-weight:700;fill:#343641;paint-order:stroke;stroke:#FDFCFB;stroke-width:4px;stroke-linejoin:round}
.marker-price.half{fill:#A56F00}.marker-price.full{fill:#B3380D}.marker-price.low110{fill:#6B7280}.marker-price.buy{fill:#047857}.marker-price.key{fill:#0000FF}.marker-price.low{fill:#475569}
@media(max-width:460px){.marker-price{font-size:9px}}

.strategy-note{margin:14px 0 0;color:#64656f;font-size:12px;line-height:1.6}

/* v1.7-r1 simulation: follow v1.6 detail-panel visual language */
.simulation-panel{box-shadow:var(--shadow)}
.simulation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sim-main strong{font-size:23px;letter-spacing:-.02em}
.sim-return.up{color:var(--primary)}
.sim-return.down{color:var(--red)}
.sim-wide{grid-column:1 / -1}
.sim-wide strong{color:var(--primary)}
@media(max-width:460px){
  .simulation-grid{grid-template-columns:1fr}
  .sim-wide{grid-column:auto}
  .sim-main strong{font-size:21px}
}