:root{--ink:#2f2a25;--paper:#f5efe4;--paper2:#eee2cf;--red:#7a3327;--red2:#a24b38;--gold:#c99d55;--green:#344d42;--blue:#6f8f93;--line:rgba(67,45,31,.14);--shadow:0 22px 60px rgba(61,39,25,.14)}
*{box-sizing:border-box}body{margin:0;font-family:ui-serif,"Noto Serif TC","PingFang TC",serif;color:var(--ink);background:linear-gradient(180deg,#dfe8e4 0,#f0e7d8 28%,#e7d5bd 100%);min-height:100vh;background-attachment:fixed}body.night{--ink:#f4eadb;--paper:#24322f;--paper2:#1d2927;--line:rgba(255,236,207,.13);background:linear-gradient(180deg,#162526,#213330 45%,#362720 100%)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1px),radial-gradient(circle at 80% 60%,#fff 0 1px,transparent 1px);background-size:22px 22px,31px 31px;mix-blend-mode:soft-light}.mist{position:fixed;border-radius:50%;filter:blur(80px);opacity:.32;pointer-events:none}.mist-a{width:380px;height:180px;background:#fff7e7;left:-80px;top:130px}.mist-b{width:420px;height:220px;background:#a7c5bd;right:-120px;top:280px}
.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid rgba(255,255,255,.42);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5;background:rgba(245,239,228,.6)}body.night .topbar{background:rgba(21,31,30,.62)}.brand{display:flex;align-items:center;gap:12px}.seal{width:44px;height:44px;border-radius:13px;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}h1{font-size:20px;margin:0}.brand p{margin:2px 0 0;font-size:12px;opacity:.65}.ghost{border:1px solid var(--line);background:rgba(255,255,255,.35);padding:9px 14px;border-radius:999px;color:inherit}.shell{display:grid;grid-template-columns:210px 1fr;gap:24px;width:min(1420px,92vw);margin:28px auto 70px}.side-card,.card{background:color-mix(in srgb,var(--paper) 90%,transparent);border:1px solid rgba(255,255,255,.52);box-shadow:var(--shadow);backdrop-filter:blur(16px)}.side-card{padding:16px;border-radius:22px;height:max-content;position:sticky;top:105px}.nav{display:block;width:100%;border:0;background:transparent;text-align:left;padding:13px 14px;border-radius:13px;color:inherit;font-size:15px;margin-bottom:6px}.nav.active,.nav:hover{background:linear-gradient(90deg,var(--red),var(--red2));color:#fff}.notice{margin-top:22px;padding:14px;border-top:1px dashed var(--line);font-size:12px;opacity:.72;line-height:1.8}.content{min-width:0}.card{border-radius:24px}.hero{padding:30px 34px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;position:relative;margin-bottom:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--paper) 86%,#fff),color-mix(in srgb,var(--paper2) 88%,#d8b982))}.hero h2{font-size:30px;margin:7px 0 8px}.hero p{margin:0;opacity:.7}.eyebrow{font-family:ui-sans-serif,system-ui;font-size:11px;letter-spacing:.18em;color:var(--red2);font-weight:800}.lanterns{display:flex;gap:18px;padding-right:22px}.lanterns i{width:38px;height:54px;border-radius:12px 12px 16px 16px;background:radial-gradient(circle,#ffd77f 0 12%,#d35b3f 50%,#7e2c23 100%);box-shadow:0 0 34px #e0a75a;position:relative}.lanterns i:nth-child(2){transform:translateY(18px)}.lanterns i:before{content:"";position:absolute;top:-13px;left:17px;width:3px;height:13px;background:#5f4937}.page{display:none}.active-page{display:block}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.kpi{padding:20px}.kpi span,.kpi small{display:block;opacity:.64}.kpi strong{display:block;font-size:24px;margin:8px 0}.grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:16px}.panel{padding:22px;margin-top:16px}.grid-2 .panel{margin-top:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.panel h3{margin:5px 0 0;font-size:19px}.tag{font-size:12px;padding:6px 10px;border-radius:999px;background:var(--paper2)}.primary{border:0;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;border-radius:12px;padding:10px 14px;font-weight:700;box-shadow:0 8px 20px rgba(122,51,39,.18)}.chart{height:245px;margin-top:22px;display:flex;align-items:flex-end;gap:6px;padding:0 4px 6px;border-bottom:1px solid var(--line)}.bar{flex:1;min-width:5px;border-radius:5px 5px 1px 1px;background:linear-gradient(180deg,var(--gold),var(--red2));opacity:.8}.allocation{margin-top:18px;display:grid;gap:13px}.alloc-row{display:grid;grid-template-columns:1fr 2fr auto;gap:10px;align-items:center;font-size:13px}.track{height:9px;border-radius:999px;background:var(--paper2);overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,var(--green),var(--blue));border-radius:inherit}.table-wrap{overflow:auto;margin-top:16px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:13px 10px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}th{opacity:.55;font-weight:600}.positive{color:#9f3f2f}.negative{color:#466d64}.fund-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}.fund-item{padding:18px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--paper2) 58%,transparent)}.fund-item h4{margin:0 0 10px}.fund-meta{display:flex;justify-content:space-between;font-size:13px;opacity:.72}.timeline{margin-top:18px}.tx{padding:13px 0;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between}.big-metric{font-size:46px;color:var(--red2);margin-top:20px}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}label{display:grid;gap:7px;font-size:13px}input,select{width:100%;border:1px solid var(--line);background:var(--paper2);color:inherit;border-radius:12px;padding:11px}.muted{opacity:.6;font-size:13px}dialog{border:0;background:transparent}dialog::backdrop{background:rgba(28,25,22,.55);backdrop-filter:blur(5px)}.dialog-card{width:min(430px,90vw);padding:24px;border-radius:22px;background:var(--paper);box-shadow:var(--shadow);display:grid;gap:13px;color:var(--ink);position:relative}.close{position:absolute;right:16px;top:12px;border:0;background:transparent;font-size:24px;color:inherit}.full{width:100%;margin-top:8px}
@media(max-width:980px){.shell{grid-template-columns:1fr}.side-card{position:static}.side-card nav{display:flex;overflow:auto}.nav{white-space:nowrap;width:auto}.notice{display:none}.kpis{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}.fund-cards{grid-template-columns:1fr}}
@media(max-width:620px){.shell{width:94vw;margin-top:14px}.topbar{padding:0 3vw}.hero{padding:24px}.hero h2{font-size:24px}.lanterns{display:none}.kpis{grid-template-columns:1fr 1fr}.kpi strong{font-size:20px}.panel{padding:17px}.settings-grid{grid-template-columns:1fr}.brand p{display:none}}
.simple-shell{width:min(1180px,92vw);margin:32px auto 70px}.update-note{font-size:13px;opacity:.62;margin:8px 0 0}.fund-table{min-width:680px}.fund-table th:nth-child(n+2),.fund-table td:nth-child(n+2){text-align:right}.fund-table td{font-size:15px;padding-top:17px;padding-bottom:17px}.fund-table td:first-child{font-size:16px}.flat{opacity:.7}.delete{border:1px solid var(--line);background:transparent;color:inherit;border-radius:10px;padding:7px 11px;cursor:pointer}.delete:hover{background:var(--red);color:#fff}.empty{text-align:center;padding:44px 16px;opacity:.58}.simple-shell .panel{margin-top:0}@media(max-width:620px){.simple-shell{width:94vw;margin-top:16px}.panel-head{align-items:flex-start}.fund-table{min-width:600px}}

.nav-meta{display:block;font-size:12px;color:color-mix(in srgb,var(--ink) 65%,transparent);margin-top:4px}.latest-date{color:var(--red2);font-weight:800}body.night .latest-date{color:#ff8a76}.nav-error{display:block;color:#9f3f2f;font-size:12px;margin-top:5px}.add-row{display:flex;align-items:center;gap:12px;margin-top:20px}.add-row select{flex:1;width:auto}.add-row label{font-size:13px}.add-row button{white-space:nowrap}button:disabled{cursor:wait;opacity:.6}.add-row button:disabled{cursor:default}@media(max-width:700px){.add-row{flex-wrap:wrap}.add-row label{width:100%}.add-row select{min-width:0}}

/* On narrow screens, turn the wide fund table into compact, readable cards. */
@media(max-width:620px){
  .simple-shell{width:100%;margin:0 auto 28px}
  .topbar{height:64px;padding:0 16px}
  .seal{width:38px;height:38px;border-radius:11px}
  h1{font-size:18px}
  .hero{margin:12px 12px 14px;padding:17px 18px;border-radius:18px}
  .hero h2{font-size:22px;margin:5px 0}
  .hero p{font-size:13px;line-height:1.55}
  .simple-shell .panel{padding:14px 12px;border-radius:18px}
  .panel-head{align-items:center;gap:8px}
  .panel h3{font-size:17px}
  .update-note{font-size:11px;line-height:1.5}
  .primary{font-size:12px;padding:9px 10px;white-space:nowrap}
  .table-wrap{overflow:visible;margin-top:10px}
  .fund-table{display:block;width:100%;min-width:0;border-collapse:separate}
  .fund-table thead{display:none}
  .fund-table tbody{display:grid;gap:8px}
  .fund-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 8px;padding:11px 10px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--paper2) 46%,transparent)}
  .fund-table td{display:block;min-width:0;padding:0;border:0;text-align:left!important;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
  .fund-table td:first-child{grid-column:1/-1;font-size:15px;font-weight:700;margin-bottom:1px}
  .fund-table td:nth-child(2)::before,.fund-table td:nth-child(3)::before,.fund-table td:nth-child(4)::before{display:block;font-size:10px;opacity:.58;margin-bottom:3px;font-weight:500}
  .fund-table td:nth-child(2)::before{content:"前次淨值"}
  .fund-table td:nth-child(3)::before{content:"最新淨值"}
  .fund-table td:nth-child(4)::before{content:"漲跌幅"}
  .fund-table td strong,.fund-table td b{font-size:13px}
  .fund-table .nav-meta{font-size:10px;line-height:1.3;overflow-wrap:anywhere}
  .fund-table td[colspan]{grid-column:1/-1}
  .fund-table .empty{text-align:center!important;padding:20px 8px}
  .simple-shell .muted{font-size:11px;line-height:1.6;margin:12px 2px 0}
}