:root{--navy:#15223b;--blue:#3478f6;--bg:#f4f7fb;--surface:#fff;--line:#e4e9f1;--text:#172033;--muted:#657087;--gain:#e5484d;--loss:#1b9a59;--shadow:0 12px 32px rgba(28,39,60,.07)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Noto Sans TC",sans-serif;font-size:16px}.hidden{display:none!important}button,select,input{font:inherit}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:240px;padding:28px 20px;background:var(--navy);color:white;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;margin:0 8px 38px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#4b8cff,#275fd5);font-size:13px;font-weight:800;letter-spacing:.03em;box-shadow:0 8px 22px #0a1223}.brand b,.brand small{display:block}.brand small{color:#9fb0cb;font-size:12px;margin-top:3px}.sidebar nav{display:grid;gap:7px}.nav-item{border:0;background:transparent;color:#aebbd0;border-radius:10px;padding:12px 14px;text-align:left;cursor:pointer;font-weight:600;display:flex;gap:12px;align-items:center}.nav-item:hover,.nav-item.active{color:#fff;background:rgba(255,255,255,.1)}.source-card{margin-top:auto;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;display:flex;gap:10px;align-items:flex-start}.source-card b,.source-card small{display:block}.source-card b{font-size:13px}.source-card small{font-size:11px;color:#9fb0cb;margin-top:5px}.status-dot{width:8px;height:8px;border-radius:50%;background:#36c98f;box-shadow:0 0 0 4px rgba(54,201,143,.13);margin-top:5px;flex:none}.main-content{margin-left:240px;padding:34px 46px 60px;max-width:1560px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:800;color:var(--blue);margin:0 0 7px}.topbar h1{font-size:29px;letter-spacing:-.035em;margin:0}.secondary-button,.error-banner button{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 15px;color:var(--text);font-weight:700;cursor:pointer}.secondary-button:hover{border-color:#bec8d8}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.summary-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 21px;min-height:130px;box-shadow:0 5px 16px rgba(28,39,60,.025)}.summary-card span,.summary-card small{display:block;color:var(--muted)}.summary-card span{font-size:13px;font-weight:700}.summary-card strong{display:block;font-size:25px;letter-spacing:-.035em;margin:18px 0 7px}.summary-card small{font-size:12px}.summary-card.primary{color:white;background:linear-gradient(135deg,#172640,#1f3d72);border-color:transparent;box-shadow:0 13px 28px rgba(22,43,81,.16)}.summary-card.primary span,.summary-card.primary small{color:#b9c8df}.summary-card.primary strong{font-size:29px}.gain{color:var(--gain)!important}.loss{color:var(--loss)!important}.panel{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:24px;box-shadow:var(--shadow)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}.panel-heading h2{font-size:20px;margin:0;letter-spacing:-.02em}.range-control{display:flex;gap:4px;background:#f1f4f8;padding:4px;border-radius:10px}.range-control button{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:700;padding:7px 11px;border-radius:7px;cursor:pointer}.range-control button.active{background:white;color:var(--blue);box-shadow:0 2px 7px rgba(31,47,72,.1)}.main-chart{min-height:370px}.detail-chart{min-height:510px}.chart-note{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}.comparison-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:12px}.comparison-grid div{padding:20px}.comparison-grid div+div{border-left:1px solid var(--line)}.comparison-grid span,.comparison-grid b{display:block}.comparison-grid span{font-size:12px;color:var(--muted);margin-bottom:8px}.comparison-grid b{font-size:18px}.data-chip,.connected-badge{border-radius:20px;padding:7px 11px;background:#edf3ff;color:var(--blue);font-size:12px;font-weight:700}.view{display:none}.view.active{display:block}.studio-layout{display:grid;grid-template-columns:minmax(430px,1fr) 390px;gap:24px;align-items:start}.settings-panel form{display:grid;gap:18px}.settings-panel label{display:grid;gap:8px;color:var(--muted);font-size:13px;font-weight:700}.settings-panel select,.settings-panel input{width:100%;border:1px solid var(--line);border-radius:10px;background:#fbfcfe;color:var(--text);padding:11px 12px;outline:none}.settings-panel select:focus,.settings-panel input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(52,120,246,.1)}.source-row{display:flex;gap:12px;align-items:flex-start;padding:14px;background:#f7fafc;border-radius:11px;margin-bottom:20px}.source-row b,.source-row small{display:block}.source-row small{font-size:12px;color:var(--muted);margin-top:4px}.form-grid,.date-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.primary-button,.download-button{border:0;background:var(--blue);color:white;padding:13px 18px;border-radius:10px;font-weight:800;text-decoration:none;text-align:center;cursor:pointer;box-shadow:0 8px 20px rgba(52,120,246,.2)}.primary-button:disabled{opacity:.55;cursor:not-allowed}.phone-preview{background:#111b2e;border:9px solid #172239;border-radius:28px;overflow:hidden;box-shadow:0 22px 50px rgba(19,31,52,.2);aspect-ratio:9/16;max-height:690px;position:sticky;top:28px;color:white;display:flex;flex-direction:column}.preview-top{padding:17px 19px;display:flex;justify-content:space-between;color:#9fb0cb;font-size:11px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.08)}.preview-content{flex:1;padding:30px 25px;display:flex;flex-direction:column}.preview-content>p{font-weight:800;font-size:20px;margin:0}.preview-line{display:grid;place-items:center;flex:1}.preview-line svg{width:100%;filter:drop-shadow(0 7px 11px rgba(52,120,246,.18))}.preview-number span,.preview-number b,.preview-number strong{display:block}.preview-number span{font-size:12px;color:#9fb0cb}.preview-number b{font-size:27px;margin:7px 0}.preview-number strong{font-size:15px}.phone-preview video{width:100%;height:100%;object-fit:contain;background:#000}.download-button{position:absolute;left:20px;right:20px;bottom:20px}.job-progress{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}.job-progress>div:first-child{display:flex;justify-content:space-between;font-size:13px}.job-progress small{display:block;color:var(--muted);font-size:11px;margin-top:9px}.progress-track{height:8px;background:#e9eef5;border-radius:8px;overflow:hidden;margin-top:10px}.progress-track span{display:block;width:0;height:100%;background:var(--blue);transition:width .35s}.status-list{margin:0}.status-list div{display:grid;grid-template-columns:1fr auto;padding:17px 2px;border-bottom:1px solid var(--line)}.status-list dt{color:var(--muted)}.status-list dd{margin:0;font-weight:700}.privacy-note{font-size:13px;color:var(--muted);background:#f6f8fb;padding:14px;border-radius:10px;margin:22px 0 0}.error-banner{display:flex;justify-content:space-between;align-items:center;background:#fff5f5;border:1px solid #ffd4d6;border-radius:13px;padding:15px 18px;margin-bottom:20px}.error-banner p{margin:4px 0 0;color:#9b3f43;font-size:13px}.loading-screen{position:fixed;inset:0;background:#f5f7fb;z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;transition:opacity .3s}.loading-screen span{font-size:12px;color:var(--muted)}.loader{width:38px;height:38px;border:3px solid #dbe4f2;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:9px}@keyframes spin{to{transform:rotate(360deg)}}.mobile-nav{display:none}
@media(max-width:1000px){.summary-grid{grid-template-columns:1fr 1fr}.studio-layout{grid-template-columns:1fr 330px}.main-content{padding:28px}}
@media(max-width:760px){body{padding-bottom:70px}.sidebar{display:none}.main-content{margin:0;padding:22px 16px 34px}.topbar h1{font-size:23px}.topbar{align-items:flex-end}.summary-grid{grid-template-columns:1fr 1fr;gap:10px}.summary-card{padding:15px;min-height:115px}.summary-card strong,.summary-card.primary strong{font-size:20px}.panel{padding:17px}.panel-heading{align-items:flex-start;flex-direction:column}.range-control{width:100%;justify-content:space-between;overflow-x:auto}.main-chart{min-height:315px}.detail-chart{min-height:400px}.studio-layout{display:block}.phone-preview{margin:20px auto 0;max-width:340px;position:relative;top:auto}.form-grid{grid-template-columns:1fr}.comparison-grid{grid-template-columns:1fr}.comparison-grid div+div{border-left:0;border-top:1px solid var(--line)}.mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:10px;right:10px;bottom:10px;background:var(--navy);border-radius:14px;padding:7px;z-index:30;box-shadow:0 12px 30px rgba(15,26,46,.28)}.mobile-nav .nav-item{justify-content:center;text-align:center;padding:10px 4px;font-size:12px}}
@media(max-width:420px){.summary-grid{grid-template-columns:1fr}.date-grid{grid-template-columns:1fr}.secondary-button{font-size:12px;padding:8px 10px}}

/* 圖表區間選取與平移 */
.chart-shell{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.drag-selection{display:none;position:absolute;z-index:5;pointer-events:none;background:rgba(100,116,139,.13);border-left:2px dashed #64748b;border-right:2px dashed #64748b}
.selection-result{display:none;position:absolute;z-index:8;top:16px;left:18px;width:280px;padding:15px 16px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.97);box-shadow:0 14px 34px rgba(17,32,55,.16);pointer-events:none}
.selection-result.visible{display:block}
.selection-result>div{display:flex;justify-content:space-between;gap:8px;align-items:center}
.selection-state{font-size:12px;font-weight:800;padding:4px 8px;border-radius:7px}
.selection-dates{font-size:10px;color:var(--muted)}
.selection-result strong{display:inline-block;font-size:24px;margin:13px 8px 10px 0}
.selection-result>b{font-size:14px}
.selection-result p{display:flex;align-items:center;justify-content:space-between;margin:0;padding:9px 10px;background:#f5f7fa;border-radius:8px;font-size:11px;font-weight:700;color:var(--muted)}
.selection-result i{font-style:normal;color:#aab3c1}
.selection-result.gain .selection-state{color:var(--gain);background:#fff0f0}
.selection-result.gain strong,.selection-result.gain>b{color:var(--gain)}
.selection-result.loss .selection-state{color:var(--loss);background:#eaf8f1}
.selection-result.loss strong,.selection-result.loss>b{color:var(--loss)}
.comparison-grid{grid-template-columns:repeat(4,1fr)}
.preview-line svg{filter:drop-shadow(0 7px 11px rgba(239,68,68,.15))}
@media(max-width:760px){.selection-result{top:10px;left:10px;width:250px;padding:12px}.selection-result strong{font-size:20px}.comparison-grid{grid-template-columns:1fr}}

/* 總覽圖表：框選後直接縮放，不顯示額外結果卡片 */
.main-chart{min-height:430px}
.chart-heading-actions{display:flex;align-items:center;gap:12px}
.displayed-period{color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap}
.chart-note{display:flex;justify-content:space-between;align-items:center;gap:14px}
.text-button{border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
@media(max-width:760px){.chart-heading-actions{width:100%;align-items:flex-start;flex-direction:column}.main-chart{min-height:340px}.chart-note{align-items:flex-start}.mobile-nav{grid-template-columns:repeat(3,1fr)}}