/* Dedicated chart-analysis workspace */
.chart-analysis-page { max-width: 1500px; margin: 0 auto; padding: clamp(16px, 3vw, 32px); color: var(--text); }
.chart-analysis-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:26px; }
.chart-analysis-heading h1 { margin:8px 0; font-size:clamp(1.65rem,4vw,2.35rem); letter-spacing:-.04em; }
.chart-analysis-heading p { max-width:720px; margin:0; color:var(--muted); line-height:1.7; }
.chart-ai-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid var(--border); border-radius:999px; background:var(--surface); white-space:nowrap; font-size:.78rem; }
.chart-ai-chip i { width:8px; height:8px; border-radius:50%; background:var(--green,#22c55e); }
.chart-analysis-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:start; gap:18px; }
.chart-upload-card,.chart-result-card { min-width:0; padding:clamp(16px,2.4vw,26px); border:1px solid var(--border); border-radius:24px; background:var(--surface); box-shadow:0 12px 40px rgba(20,35,60,.055); }
.chart-card-title { display:flex; align-items:flex-start; gap:12px; margin-bottom:20px; }
.chart-step { display:grid; place-items:center; flex:0 0 36px; height:36px; border:1px solid var(--border); border-radius:12px; color:var(--muted); font-size:.78rem; font-weight:800; }
.chart-card-title h2 { margin:0 0 5px; font-size:1.08rem; }
.chart-card-title p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.55; }
.chart-dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:220px; padding:24px; border:1.5px dashed color-mix(in srgb,var(--blue,#647dff) 50%,var(--border)); border-radius:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--blue,#647dff) 7%,var(--surface)),var(--surface)); text-align:center; cursor:pointer; transition:border-color .18s ease, transform .18s ease, background .18s ease; }
.chart-dropzone:hover,.chart-dropzone.is-dragging { border-color:var(--blue,#647dff); transform:translateY(-1px); background:color-mix(in srgb,var(--blue,#647dff) 10%,var(--surface)); }
.chart-upload-icon { display:grid; place-items:center; width:52px; height:52px; border:1px solid var(--border); border-radius:17px; background:var(--surface); font-size:1.8rem; }
.chart-dropzone strong { overflow-wrap:anywhere; }
.chart-upload-subtitle { color:var(--muted); font-size:.76rem; }
.chart-select-button { margin-top:4px; padding:10px 16px; border-radius:999px; background:var(--text); color:var(--bg,#fff); font-size:.8rem; font-weight:750; }
.chart-preview { margin-top:14px; padding:10px; border:1px solid var(--border); border-radius:16px; background:var(--bg); }
.chart-preview-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:9px; font-size:.75rem; }
.chart-preview-bar span { min-width:0; overflow-wrap:anywhere; color:var(--muted); }
.chart-remove { border:0; background:transparent; color:var(--red,#dc2626); cursor:pointer; font:inherit; white-space:nowrap; }
.chart-preview img { display:block; max-width:100%; max-height:360px; margin:auto; object-fit:contain; border-radius:10px; }
.chart-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.7fr); gap:14px; margin-top:18px; }
.chart-fields label { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:.8rem; font-weight:700; }
.chart-fields label span { color:var(--muted); font-weight:400; }
.chart-fields input,.chart-fields select,.chart-fields textarea { width:100%; min-width:0; box-sizing:border-box; padding:11px 12px; border:1px solid var(--border); border-radius:12px; background:var(--bg); color:var(--text); font:inherit; font-size:16px; }
.chart-fields textarea { resize:vertical; line-height:1.55; }
.chart-notes-field { grid-column:1/-1; }
.chart-upload-error { padding:11px 12px; border:1px solid color-mix(in srgb,var(--red,#dc2626) 35%,var(--border)); border-radius:12px; color:var(--red,#dc2626); font-size:.82rem; line-height:1.55; overflow-wrap:anywhere; }
.chart-analyze-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:50px; margin-top:18px; border:0; border-radius:15px; background:linear-gradient(115deg,#596df5,#7c56db); color:#fff; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 8px 22px rgba(91,105,225,.2); }
.chart-analyze-button:disabled { opacity:.48; cursor:not-allowed; box-shadow:none; }
.chart-analyze-button.is-loading { opacity:.8; }
.chart-privacy-note { margin:12px 2px 0; color:var(--muted); font-size:.72rem; line-height:1.65; }
.chart-result-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:360px; padding:28px 16px; text-align:center; }
.chart-result-mark { display:grid; place-items:center; width:62px; height:62px; margin-bottom:16px; border:1px solid var(--border); border-radius:20px; background:var(--bg); font-size:2rem; }
.chart-result-empty h3 { margin:0 0 9px; font-size:1.12rem; }
.chart-result-empty p { max-width:410px; margin:0; color:var(--muted); font-size:.86rem; line-height:1.75; }
.chart-loading-spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--blue,#647dff); border-radius:50%; animation:chart-spin .8s linear infinite; }
@keyframes chart-spin { to { transform:rotate(360deg); } }
.chart-analysis-output { min-width:0; font-size:.9rem; line-height:1.8; overflow-wrap:anywhere; }
.chart-analysis-output h3 { margin:22px 0 8px; font-size:1rem; }
.chart-analysis-output h3:first-child { margin-top:0; }
.chart-analysis-output p { margin:0 0 12px; }
.chart-analysis-output ul,.chart-analysis-output ol { padding-left:22px; margin:8px 0 16px; }
.chart-analysis-output li { margin:5px 0; }
.chart-risk-note { margin-top:18px; padding:14px 16px; border:1px solid color-mix(in srgb,#d97706 30%,var(--border)); border-radius:15px; background:color-mix(in srgb,#f59e0b 7%,var(--surface)); color:var(--muted); font-size:.78rem; line-height:1.7; }
.chart-risk-note strong { color:var(--text); }
@media(max-width:900px) { .chart-analysis-grid { grid-template-columns:minmax(0,1fr); } .chart-result-empty { min-height:240px; } }
@media(max-width:520px) { .chart-analysis-page { padding:14px 10px 24px; } .chart-analysis-heading { gap:10px; } .chart-ai-chip { padding:7px 9px; font-size:.7rem; } .chart-upload-card,.chart-result-card { padding:14px; border-radius:19px; } .chart-dropzone { min-height:185px; padding:18px 12px; } .chart-fields { grid-template-columns:minmax(0,1fr); gap:12px; } .chart-notes-field { grid-column:auto; } }

/* Trade-plan cards are separated from the detailed explanation. */
.chart-trade-card { min-width:0; padding:clamp(16px,2.4vw,26px); border:1px solid var(--border); border-radius:24px; background:var(--surface); box-shadow:0 12px 40px rgba(20,35,60,.055); }
.chart-trade-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.chart-trade-tile { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; min-height:100px; padding:16px; border:1px solid var(--border); border-radius:16px; background:var(--bg); }
.chart-trade-label { color:var(--muted); font-size:.76rem; font-weight:750; letter-spacing:.02em; }
.chart-trade-tile strong { max-width:100%; overflow-wrap:anywhere; font-size:clamp(1rem,2vw,1.25rem); line-height:1.45; }
.chart-trade-tile small { color:var(--muted); font-size:.74rem; line-height:1.55; }
.chart-signal-tile.is-buy { border-color:color-mix(in srgb,#16a34a 45%,var(--border)); background:color-mix(in srgb,#16a34a 8%,var(--surface)); }
.chart-signal-tile.is-buy strong { color:#16a34a; }
.chart-signal-tile.is-sell { border-color:color-mix(in srgb,#dc2626 45%,var(--border)); background:color-mix(in srgb,#dc2626 8%,var(--surface)); }
.chart-signal-tile.is-sell strong { color:#dc2626; }
.chart-signal-tile.is-waiting { border-color:color-mix(in srgb,#d97706 42%,var(--border)); background:color-mix(in srgb,#d97706 7%,var(--surface)); }
.chart-signal-tile.is-waiting strong { color:#d97706; }
.chart-target-tile { min-height:78px; }
.chart-trade-disclaimer { margin:14px 2px 0; color:var(--muted); font-size:.74rem; line-height:1.65; }
.chart-explanation-card { margin-top:18px; }
@media(max-width:520px) { .chart-trade-card { padding:14px; border-radius:19px; } .chart-trade-grid { grid-template-columns:minmax(0,1fr); gap:9px; } .chart-trade-tile { min-height:0; padding:13px; } }