:root{
 --nav:#2f628f; --nav2:#4b84b2; --bg:#f5fbfd; --card:#ffffff; --ink:#18324a; --muted:#6d8598;
 --line:#deebf2; --blue:#67b2d1; --blue2:#90cde1; --green:#4a9b80; --amber:#ef9b3a; --red:#d86f62; --soft:#edf8fc;
 --shadow:0 10px 28px rgba(56,100,135,.08);
}
*{box-sizing:border-box} body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",Arial,sans-serif;background:linear-gradient(180deg,#fbfdff 0%,#f5fbfd 100%);color:var(--ink);letter-spacing:.01em}
button,select,textarea,input{font:inherit}
.shell{display:flex;min-height:100vh}
.sidebar{width:250px;position:fixed;inset:0 auto 0 0;background:linear-gradient(180deg,#72bfd8 0%, #2f628f 52%, #1d446a 100%);padding:24px 16px;color:white;overflow:auto;box-shadow:8px 0 28px rgba(40,86,126,.08)}
.brand{font-size:var(--font-kpi-secondary);font-weight:800;padding:0 10px 20px} .brand small{display:block;opacity:.68;font-size:var(--font-caption);font-weight:500;margin-top:5px;letter-spacing:.03em}
.nav-label{font-size:var(--font-caption);text-transform:uppercase;letter-spacing:.12em;opacity:.45;margin:17px 12px 7px}
.nav button{display:block;width:100%;border:0;background:transparent;color:#d9e4ee;padding:11px 13px;text-align:left;border-radius:9px;cursor:pointer;margin:2px 0}
.nav button:hover,.nav button.active{background:rgba(255,255,255,.15);color:#fff}
.main{margin-left:250px;width:calc(100% - 250px);padding:26px 30px 35px}
.header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}
h1{font-size:var(--font-page-title);margin:0 0 5px} .sub{color:var(--muted);font-size:var(--font-meta)}
.controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
select,.outline-btn{background:white;border:1px solid #dbe7ef;border-radius:999px;padding:8px 12px;color:var(--ink)}
.statuses{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 18px}
.status{font-size:var(--font-caption);border-radius:999px;padding:5px 9px;background:#edf2f7;color:#566476}
.status.live{background:#e9f6f1;color:var(--green)} .status.prototype{background:#fff4e5;color:#a15d0e}
.page{display:none} .page.active{display:block}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.equal2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{background:var(--card);border:1px solid rgba(140,177,201,.22);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.metric .label{font-size:var(--font-meta);color:var(--muted)} .metric .num{font-size:var(--font-kpi-number);font-weight:800;margin:8px 0 3px}
.metric .meta{font-size:var(--font-caption);color:var(--muted)} .positive{color:var(--red)} .negative{color:var(--green)} .good{color:var(--green)} .pending{color:#9aa4b1;font-style:italic}
.section-title{font-size:var(--font-body);font-weight:800;margin-bottom:13px;display:flex;justify-content:space-between;align-items:center;gap:10px;color:#234d73}
.section-title small{font-weight:500;color:var(--muted)}
.spacer{height:14px}
table{width:100%;border-collapse:collapse;font-size:var(--font-meta)}
th,td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:left}
th{color:#667386;font-weight:700;background:#fbfcfe;position:sticky;top:0}
.tablewrap{overflow:auto;max-height:560px;border:1px solid var(--line);border-radius:10px}
.titlecell{min-width:280px;font-weight:650} .titlecell span{display:block;font-size:var(--font-caption);color:var(--muted);font-weight:500;margin-top:3px}
.rank{width:36px;color:var(--muted)} .sheetcol{color:#7364a8}
.tag{display:inline-block;padding:4px 8px;border-radius:999px;background:#fff2e4;color:#b96f18;font-size:var(--font-caption)}
.ai-box textarea{width:100%;min-height:190px;border:1px solid #dbe8f0;border-radius:14px;padding:12px;line-height:1.72;resize:vertical;background:#fbfdfe;color:var(--ink)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.primary{border:0;background:linear-gradient(180deg,#f7b25c,#ee9b3b);color:#fff;border-radius:999px;padding:9px 14px;cursor:pointer;box-shadow:0 6px 14px rgba(238,155,59,.20)}
.secondary{border:1px solid #dbe7ef;background:#fff;border-radius:999px;padding:9px 14px;cursor:pointer;color:#315b80}
.micro{font-size:var(--font-caption);color:var(--muted);margin-top:7px;line-height:1.5}
.trend-row{display:grid;grid-template-columns:120px 1fr 1fr 1fr;align-items:center;border-bottom:1px solid var(--line);font-size:var(--font-meta)}
.trend-row>div{padding:10px 8px} .trend-row.head{font-weight:700;color:var(--muted);background:#fbfcfe}
.spark{height:72px;display:flex;align-items:flex-end;gap:8px;padding:7px 0}
.spark span{flex:1;background:linear-gradient(180deg,var(--blue2),var(--blue));border-radius:5px 5px 2px 2px;min-width:12px}
.note{padding:13px 15px;border:1px solid #f6d8b3;background:#fff8ef;border-radius:14px;font-size:var(--font-meta);line-height:1.72}
.insight{border-bottom:1px solid var(--line);padding:10px 0;font-size:var(--font-meta);line-height:1.65} .insight:last-child{border-bottom:0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px} .tabbtn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 10px;font-size:var(--font-caption);cursor:pointer}
.tabbtn.active{background:var(--nav);border-color:var(--nav);color:#fff} .tabpanel{display:none} .tabpanel.active{display:block}
.funnel{display:flex;align-items:center;gap:8px;overflow:auto;padding:7px 0}
.step{min-width:175px;border:1px solid #dce8ef;border-radius:16px;padding:14px;background:linear-gradient(180deg,#ffffff,#f8fbfd)}
.step .n{font-size:var(--font-page-title);font-weight:800;margin:7px 0} .arrow{font-size:var(--font-page-title-mobile);color:#a6b0bb;text-align:center;min-width:55px} .arrow span{display:block;font-size:var(--font-caption);color:var(--muted)}
.devicebar{height:24px;border-radius:7px;background:#e7edf3;overflow:hidden;display:flex;margin:12px 0}
.devicebar .mobile{width:79.2%;background:#356f9f} .devicebar .desktop{width:19.5%;background:#7d9fbc} .devicebar .other{width:1.3%;background:#bac9d6}
.list{padding:0;margin:0;list-style:none} .list li{padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--font-meta);display:flex;justify-content:space-between;gap:10px}
.barlist .item{display:grid;grid-template-columns:170px 1fr 70px;gap:10px;align-items:center;font-size:var(--font-caption);margin:9px 0}
.track{height:8px;background:#edf1f5;border-radius:99px;overflow:hidden} .fill{height:100%;background:var(--blue);border-radius:99px}
.kicker{font-size:var(--font-caption);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.footer{font-size:var(--font-caption);color:var(--muted);margin-top:20px}

.datasource{display:grid;grid-template-columns:160px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.datasource:last-child{border-bottom:0}.datasource label{font-size:var(--font-meta);font-weight:700}.datasource input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 10px;background:#fbfcfe}
.ai-edit{margin-top:14px}.ai-edit textarea{width:100%;min-height:125px;border:1px solid var(--line);border-radius:10px;padding:11px;line-height:1.65;resize:vertical;background:#fbfcfe;color:var(--ink)}
.total-row td{font-weight:800;background:#f7f9fc}.legend-note{font-size:var(--font-caption);color:var(--muted);margin-left:8px}

@media(max-width:1100px){.grid4{grid-template-columns:repeat(2,1fr)}.grid2,.equal2{grid-template-columns:1fr}}
@media(max-width:760px){.sidebar{position:static;width:100%}.shell{display:block}.main{margin:0;width:100%;padding:18px}.header{flex-direction:column}.controls{justify-content:flex-start}.grid4,.grid3{grid-template-columns:1fr}}