@font-face{ font-family:Inter; src:url('/vendor/fonts/inter/inter-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap} @font-face{ font-family:Inter; src:url('/vendor/fonts/inter/inter-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap} @font-face{ font-family:Inter; src:url('/vendor/fonts/inter/inter-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap} @font-face{ font-family:Thai; src:url('/vendor/fonts/noto-sans-thai/noto-sans-thai-thai-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap} @font-face{ font-family:Thai; src:url('/vendor/fonts/noto-sans-thai/noto-sans-thai-thai-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap} @font-face{ font-family:Thai; src:url('/vendor/fonts/noto-sans-thai/noto-sans-thai-thai-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap} :root{ --blue:#0067ff; --navy:#080f3c; --muted:#58709c; --line:#e2edfa; --green:#00a878; --red:#f63756; --bg:#f6faff; --font:Inter,Thai,sans-serif} *{ box-sizing:border-box} body{ margin:0; color:var(--navy); font-family:var(--font); font-size:14px; background:var(--bg) url('/assets/waves.png') center top/cover fixed} button,input{ font:inherit} button,a,input{ -webkit-tap-highlight-color:transparent} button{ cursor:pointer} button:disabled{ cursor:not-allowed; opacity:.48} a{ color:var(--blue); text-decoration:none} button{ color:inherit} button:focus-visible,a:focus-visible,input:focus-visible{ outline:3px solid #6aa9ff; outline-offset:4px} button{ transition:background .2s,box-shadow .2s,transform .2s} button:active:not(:disabled){ transform:translateY(1px)} [hidden]{ display:none!important} h1,h2,p{ margin:0} h2{ font-size:19px; font-weight:700; letter-spacing:-.5px} h1{ font-size:29px; line-height:1.4; letter-spacing:-1px} small{ font-size:12px} i.ph{ display:inline-block; font-size:22px; vertical-align:middle} button i.ph{ pointer-events:none} b,strong{ font-weight:700} .muted{ color:var(--muted)} .positive{ color:var(--green)} .negative{ color:var(--red)} .skip{ position:fixed; left:110px; top:-80px; z-index:99; background:#fff; padding:12px} .skip:focus{ top:10px} .sidebar{ position:fixed; inset:0 auto 0 0; width:88px; border-right:1px solid var(--line); background:#f9fcffe0; display:flex; flex-direction:column; justify-content:space-between; z-index:20; padding:78px 8px 20px} .sidebar nav{ display:grid; gap:13px} .nav-item{ display:grid; place-items:center; gap:7px; background:none; border:0; min-height:72px; border-radius:9px; font-size:12px; font-weight:600; color:#304779} .nav-item i{ font-size:29px} .nav-item:hover{ background:#eaf3ff} .nav-item.active{ color:var(--blue); background:#dceeff} .sidebar-brand{ text-align:center; font-size:12px} .sidebar-brand img{ display:block; width:38px; height:38px; object-fit:contain; margin:0 auto 4px} .workspace{ margin-left:88px} .topbar{ height:66px; border-bottom:1px solid var(--line); background:#ffffffdf; display:flex; align-items:center; padding:0 30px; gap:28px} .brand{ display:flex; align-items:center; color:var(--navy); font-size:29px; letter-spacing:-1.2px; gap:10px} .brand img{ width:40px; height:40px; object-fit:contain} .tagline{ color:#335188; border-left:2px solid #76aaff; padding-left:26px; font-size:15px} .top-actions{ margin-left:auto; display:flex; align-items:center; gap:18px; white-space:nowrap; font-size:12px} .account-button{ display:flex; gap:8px; align-items:center; background:none; border:0; padding:8px} .account-button i:first-child{ color:#6ba7f5; font-size:27px} .account-button i:last-child{ font-size:14px} .connection{ display:flex; align-items:center; gap:7px; padding-left:18px; border-left:1px solid #d2e1f7} .dot{ width:9px; height:9px; display:inline-block; flex-shrink:0; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px #00a87808} .connection.offline .dot{ background:#eeb34e} .connection.preview .dot{ background:var(--blue)} main{ max-width:1700px; margin:auto; padding:20px 20px 0} .page-heading{ display:flex; align-items:center; justify-content:space-between; padding:0 10px 12px; gap:14px} .page-heading p{ font-size:19px; color:#3a5c95; line-height:1.4} .page-meta{ text-align:right; color:#40609d; font-size:12px; display:grid; gap:6px} .page-meta strong{ font-weight:600} .summary-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:10px} .card,.summary-card{ border:1px solid var(--line); background:#ffffffed; border-radius:12px; box-shadow:0 5px 20px #7aa9dd08} .summary-card{ padding:19px 18px; display:flex; gap:16px; min-height:121px; align-items:flex-start} .summary-icon{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#edf6ff; color:var(--blue); flex-shrink:0} .summary-icon i{ font-size:27px} .summary-label{ color:#3c5991; font-size:14px; margin-bottom:4px} .summary-value{ font-size:34px; letter-spacing:-1.1px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.3} .summary-detail{ color:#42639a; font-size:12px; margin-top:2px} .summary-value.bump{ animation:number-bump .5s ease-out} .trading-grid{ display:grid; grid-template-columns:minmax(0,2.13fr) minmax(320px,1fr); gap:10px; margin-bottom:10px} .chart-card{ padding:12px 12px 6px; min-width:0; height:365px; display:flex; flex-direction:column} .section-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px} .section-head h2{ display:flex; align-items:center; gap:9px} .section-head h2>.ph{ color:var(--blue); font-size:26px} .symbol-icon{ width:32px; height:32px; display:inline-grid; place-items:center; color:var(--blue); background:#eaf4ff; border-radius:7px} .symbol-icon i{ font-size:22px} .timeframes{ display:flex; gap:3px} .timeframes button{ border:1px solid var(--line); border-radius:5px; background:white; color:#42639a; font-size:11px; padding:5px 9px; min-height:29px} .timeframes button:hover{ background:#eef6ff} .timeframes .selected{ background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 3px 8px #0067ff33} #chart{ flex:1; min-height:0; position:relative} .chart-empty{ position:absolute; inset:0; display:grid; place-items:center; background:#fff9; color:var(--muted); z-index:3; text-align:center; font-size:13px; padding:24px} .chart-footer{ display:flex; justify-content:space-between; color:#7284a1; font-size:10px; padding:5px 4px 0} .chart-footer a{ color:#7388ad} .quick-card{ height:365px; padding:12px 14px; display:flex; flex-direction:column} .quick-title{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:9px; gap:8px} .quick-title h2{ display:flex; gap:8px; align-items:center} .quick-title h2 i{ color:var(--blue); font-size:28px} .eyebrow{ font-size:10px; color:#5274b5} .quick-symbol{ display:flex; align-items:center; gap:9px; margin:7px 0; font-size:12px; font-weight:700} .quick-symbol .symbol-icon{ width:26px; height:26px} .quotes{ display:grid; grid-template-columns:1fr 1fr; gap:8px} .quote{ border:1px solid #e1edff; border-radius:7px; background:#f9fcff; padding:6px 12px; display:grid; gap:1px; color:#425f97} .quote.ask{ background:#fff8f9; border-color:#ffe1e6} .quote span{ font-size:11px} .quote b{ font-size:26px; letter-spacing:-.7px; color:var(--navy); font-variant-numeric:tabular-nums} .auto-plan{ display:flex; justify-content:space-between; gap:12px; margin:10px 0; font-size:10px; line-height:1.5; color:#42649d} .auto-plan>div{ display:flex; gap:7px; align-items:center} .auto-plan i{ color:var(--blue); font-size:23px} .auto-plan b{ font-size:13px; color:var(--navy); display:block} .order-buttons{ display:grid; grid-template-columns:1fr 1fr; gap:9px} .order-button{ border:0; border-radius:8px; color:white; height:60px; display:flex; align-items:center; justify-content:center; gap:16px; box-shadow:inset 0 1px 0 #ffffff66; position:relative; overflow:hidden} .order-button.buy{ background:linear-gradient(120deg,#00b995,#009e79)} .order-button.sell{ background:linear-gradient(120deg,#ff263e,#ff466b)} .order-button:hover:not(:disabled){ filter:brightness(1.05); box-shadow:0 7px 15px #5b81bb22; transform:translateY(-1px)} .order-button i{ font-size:28px} .order-button b{ display:block; font-size:20px} .order-button small{ font-size:12px; font-weight:600} .order-hint{ font-size:11px; display:flex; gap:6px; align-items:center; color:#45689e; margin:8px 0; min-height:20px; line-height:1.5} .order-hint i{ color:var(--blue); font-size:20px} .risk-meter{ margin-top:auto; border:1px solid var(--line); background:#fbfdff; border-radius:7px; padding:7px 9px} .risk-meter .risk-label{ display:flex; justify-content:space-between; align-items:center; font-size:11px; gap:8px} .risk-label i{ color:var(--blue); font-size:20px} .meter-track{ height:8px; background:#eaf0f8; border-radius:20px; margin-top:6px; overflow:hidden} .meter-fill{ height:100%; background:linear-gradient(90deg,#48c0ff,var(--blue)); border-radius:20px; transition:width .8s ease} .intelligence-grid{ display:grid; grid-template-columns:59% 41%; min-height:206px; margin-bottom:10px; background:#fffffff0 url('/assets/waves.png') center/cover} .pulse-panel{ position:relative; display:grid; grid-template-columns:51% 49%; min-height:206px; padding:12px 16px; overflow:hidden} .pulse-heading{ position:absolute; left:17px; top:13px; display:flex; align-items:center; gap:10px; z-index:2} .pulse-heading i{ font-size:28px; color:var(--blue)} .radar-wrap{ position:relative; width:204px; height:204px; align-self:center; justify-self:end; margin:-11px 0 -12px; pointer-events:none} .radar{ height:100%; width:100%; object-fit:contain; animation:radar-turn 12s linear infinite; filter:drop-shadow(0 0 12px #2288ff18)} .radar-beacon{ position:absolute; inset:42%; border-radius:50%; border:2px solid #fff; background:#1688ff; box-shadow:0 0 0 7px #1688ff20,0 0 24px #39aeff; animation:beacon 2.7s ease-out infinite} .pulse-copy{ align-self:center; padding-left:12px; padding-top:14px} .signal-dots{ display:flex; gap:7px; margin-bottom:13px} .signal-dots span{ width:6px; height:6px; background:#0078ff; border-radius:50%; animation:dot-wave 1.6s ease-in-out infinite} .signal-dots span:nth-child(2){ animation-delay:.15s} .signal-dots span:nth-child(3){ animation-delay:.3s} .signal-dots span:nth-child(4){ animation-delay:.45s} .signal-dots span:nth-child(5){ animation-delay:.6s} .pulse-copy p{ color:#41649c; font-size:15px} .pulse-copy h3{ font-size:27px; letter-spacing:-.8px; margin:2px 0 10px} .signal-tag{ display:inline-flex; align-items:center; gap:7px; border:1px solid #ffe2a4; background:#fff4d3; color:#805900; font-size:11px; padding:7px 10px; border-radius:22px; max-width:100%; line-height:1.5} .signal-tag i{ font-size:22px} .signal-tag.neutral{ background:#edf6ff; border-color:#d7e9ff; color:#315a94} .signal-tag.good{ background:#e9faf3; border-color:#bcebd8; color:#087d58} .pulse-panel.paused .radar,.pulse-panel.paused .radar-beacon,.pulse-panel.paused .signal-dots span{ animation-play-state:paused} .pulse-panel.paused .radar{ opacity:.45; filter:grayscale(.65)} .activity-panel{ border-left:1px solid #d8e7fa; margin:14px 0; padding:0 20px; min-width:0} .activity-panel h2{ display:flex; gap:10px; align-items:center; font-size:17px; margin-bottom:8px} .activity-panel h2 i{ color:var(--blue); font-size:25px} .activity-list{ display:grid; gap:9px} .activity-item{ display:grid; grid-template-columns:43px 34px 1fr; align-items:center; gap:9px; position:relative; padding-left:17px} .activity-item:before{ content:''; position:absolute; left:1px; top:9px; width:7px; height:7px; background:var(--blue); border-radius:50%; box-shadow:0 0 0 3px #e5f0ff} .activity-item:not(:last-child):after{ content:''; position:absolute; left:4px; top:20px; bottom:-12px; width:1px; background:#8db9ff} .activity-time{ font-size:11px; color:#46689e; align-self:start; margin-top:6px} .activity-icon{ width:33px; height:33px; display:grid; place-items:center; color:var(--blue); border-radius:50%; background:#eaf4ff} .activity-icon.success{ background:#ddf7ee; color:var(--green)} .activity-icon i{ font-size:22px} .activity-text b{ font-size:12px; display:block} .activity-text small{ font-size:11px; color:#6881ac; line-height:1.35; display:block} .activity-item.new{ animation:activity-in .65s ease-out} .positions-card{ padding:9px 12px 10px} .positions-card .section-head{ margin-bottom:5px} .positions-card h2{ font-size:17px} .text-button{ font-size:11px; color:#456da8; border:0; background:none} .text-button i{ font-size:14px} .table-scroll{ overflow:auto; border:1px solid var(--line); border-radius:7px} table{ border-collapse:collapse; width:100%; white-space:nowrap; font-size:12px} th{ font-weight:400; font-size:11px; background:#f5f8fd; color:#436194; text-align:left; padding:6px 10px} td{ padding:9px 10px; border-top:1px solid #e9f0fa} td b{ font-size:13px} .side-badge,.status-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; font-size:11px; border-radius:5px; background:#e4f9f1; color:#009967; font-weight:600} .side-badge.sell{ background:#ffebef; color:var(--red)} .status-badge{ border-radius:20px; font-weight:400; color:#3e6499; background:#eaf6ff} .status-badge i{ font-size:14px; color:var(--green)} .empty{ padding:35px 20px; text-align:center; color:#7990b1; font-size:13px} .empty i{ font-size:30px; display:block; margin-bottom:8px; color:#9ebfe9} .footer{ font-size:10px; display:flex; justify-content:space-between; padding:14px 5px 15px; color:#5371a0; gap:12px} .view{ animation:page-in .3s ease-out} .page-card{ padding:24px; margin-bottom:15px} .page-card>p{ margin:6px 0 20px; font-size:13px} .settings-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px} .setting-row{ display:flex; align-items:center; justify-content:space-between; padding:22px 0; border-bottom:1px solid var(--line)} .setting-row small{ display:block; color:var(--muted); margin-top:5px} .setting-row input{ width:21px; height:21px; accent-color:var(--blue)} .setting-kv{ display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); gap:15px} .secondary,.primary{ padding:10px 16px; border:1px solid #d5e5fc; border-radius:8px; background:#f5f9ff; font-size:13px} .primary{ background:var(--blue); color:white; border-color:var(--blue)} .secondary:hover{ background:#eaf3ff} .notice{ background:#fff5dd; color:#896218; border:1px solid #f8e3ae; border-radius:9px; padding:10px 14px; margin-bottom:12px; font-size:12px} .toast{ position:fixed; bottom:24px; left:calc(50% + 44px); transform:translateX(-50%); background:#112648; color:#fff; border:1px solid #376ba0; padding:13px 22px; border-radius:12px; box-shadow:0 8px 30px #142b4430; z-index:60; font-size:13px; max-width:85vw; animation:toast-in .3s ease-out} dialog{ border:1px solid var(--line); border-radius:18px; width:480px; max-width:calc(100vw - 30px); padding:27px; color:var(--navy); box-shadow:0 20px 100px #0b305033} dialog::backdrop{ background:#102f5459; backdrop-filter:blur(5px)} .dialog-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px} dialog p{ font-size:13px; color:var(--muted); margin-bottom:15px; line-height:1.7} .icon-button{ background:none; border:0; padding:4px} dialog label{ display:block; font-size:12px; margin:12px 0} dialog input{ display:block; width:100%; border:1px solid #cfdded; padding:10px; border-radius:6px; margin-top:5px} dialog .file-label{ background:#f4f9ff; border:1px dashed #aacdfd; border-radius:8px; padding:12px} dialog input[type=file]{ border:0; padding:5px 0; font-size:11px} .dialog-actions{ display:flex; justify-content:space-between; gap:10px} #connect-error{ color:#bd2341; font-size:12px} .retry-button{ font-size:11px; padding:3px 8px; border-radius:4px; border:1px solid #c5d9f5; background:#edf6ff} .command-row{ display:flex; justify-content:space-between; gap:15px; padding:14px 0; border-bottom:1px solid var(--line); font-size:12px} .command-row small{ display:block; color:var(--muted); margin-top:4px} .reduced-motion *, .reduced-motion *:before,.reduced-motion *:after{ animation:none!important; transition:none!important; scroll-behavior:auto!important} @keyframes radar-turn{ to{ transform:rotate(360deg)} } @keyframes beacon{ 0%,100%{ box-shadow:0 0 0 5px #1688ff25,0 0 18px #39aeff} 50%{ box-shadow:0 0 0 15px #1688ff00,0 0 30px #39aeff90} } @keyframes dot-wave{ 0%,80%,100%{ opacity:.3; transform:translateY(0)} 40%{ opacity:1; transform:translateY(-2px)} } @keyframes number-bump{ 0%{ opacity:.55; transform:translateY(3px)} 100%{ opacity:1; transform:translateY(0)} } @keyframes activity-in{ from{ opacity:0; transform:translateY(9px); background:#e2f0ff} to{ opacity:1; transform:translateY(0); background:transparent} } @keyframes page-in{ from{ opacity:.6; transform:translateY(5px)} to{ opacity:1; transform:translateY(0)} } @keyframes toast-in{ from{ opacity:0; bottom:16px} to{ opacity:1; bottom:24px} } @media(min-width:1550px){ main{ padding:24px 28px 0} .summary-card{ min-height:130px} .chart-card,.quick-card{ height:410px} .intelligence-grid,.pulse-panel{ min-height:230px} .radar-wrap{ width:230px; height:230px} .summary-value{ font-size:38px} .order-button{ height:70px} .quick-card{ padding:16px 18px} .quote b{ font-size:30px} .auto-plan{ margin:14px 0} .order-hint{ margin:12px 0} } @media(max-width:1190px){ .tagline{ display:none} .topbar{ padding:0 22px} .summary-card{ gap:10px; padding:16px 12px} .summary-icon{ width:38px; height:38px} .summary-value{ font-size:27px} .summary-label{ font-size:12px} .trading-grid{ grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr)} .section-head h2{ font-size:16px} .timeframes button{ padding:5px 6px} .intelligence-grid{ grid-template-columns:56% 44%} .pulse-panel{ grid-template-columns:46% 54%} .radar-wrap{ width:170px; height:170px} .pulse-heading h2{ font-size:17px} .pulse-copy h3{ font-size:24px} .signal-tag{ font-size:10px} .activity-panel{ padding:0 12px} .activity-text b{ font-size:11px} .activity-item{ gap:6px; grid-template-columns:35px 30px 1fr} .summary-detail{ font-size:11px} } @media(max-width:960px){ .sidebar{ width:74px} .workspace{ margin-left:74px} main{ padding:18px 14px 0} .page-heading{ padding-left:0; padding-right:0} h1{ font-size:24px} .page-heading p{ font-size:15px} .summary-grid{ grid-template-columns:repeat(2,1fr)} .summary-card{ min-height:110px} .summary-value{ font-size:31px} .summary-label{ font-size:13px} .summary-icon{ width:45px; height:45px} .trading-grid{ grid-template-columns:minmax(0,1fr) 290px} .chart-card{ height:374px} .quick-card{ height:374px} .chart-card .section-head{ flex-wrap:wrap; gap:7px} .timeframes{ width:100%} .timeframes button{ flex:1} .intelligence-grid{ grid-template-columns:1fr} .activity-panel{ border-left:0; border-top:1px solid var(--line); padding:15px 20px; margin:0} .activity-list{ grid-template-columns:repeat(3,1fr); gap:10px} .activity-item{ display:flex; flex-wrap:wrap; padding-left:0; gap:5px} .activity-item:before,.activity-item:after{ display:none} .activity-time{ margin:0; order:2} .activity-text{ width:100%; order:3} .pulse-panel{ grid-template-columns:44% 56%} .radar-wrap{ width:205px; height:205px} .pulse-copy{ padding-left:30px} .pulse-copy h3{ font-size:28px} .signal-tag{ font-size:12px} .settings-grid{ grid-template-columns:1fr} .toast{ left:50%} } @media(max-width:720px){ .sidebar{ inset:auto 0 0; width:100%; height:66px; padding:4px 10px; border-right:0; border-top:1px solid var(--line); background:#ffffffed; backdrop-filter:blur(12px)} .sidebar nav{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px} .nav-item{ min-height:56px; gap:2px; font-size:10px} .nav-item i{ font-size:23px} .sidebar-brand{ display:none} .workspace{ margin-left:0} .topbar{ height:59px; padding:0 15px; gap:12px} .brand{ font-size:23px; gap:7px} .brand img{ width:32px; height:32px} .top-actions{ gap:6px; font-size:10px} .account-button{ padding:5px; gap:4px} .account-button i:first-child{ font-size:22px} .account-button i:last-child{ display:none} .connection{ padding-left:8px; gap:5px} .connection .dot{ width:7px; height:7px} .connection span:last-child{ max-width:75px; overflow:hidden; text-overflow:ellipsis} .page-heading{ align-items:flex-start; gap:8px} h1{ font-size:21px; letter-spacing:-.6px} .page-heading p{ font-size:12px; margin-top:2px} .page-meta{ font-size:9px; gap:5px; min-width:81px; margin-top:4px} .page-meta strong{ max-width:85px} main{ padding:16px 12px 70px} .summary-grid{ gap:8px} .summary-card{ min-height:107px; padding:13px 10px; gap:8px} .summary-icon{ width:31px; height:31px} .summary-icon i{ font-size:20px} .summary-label{ font-size:10px} .summary-value{ font-size:25px; letter-spacing:-.8px} .summary-detail{ font-size:9px} .trading-grid{ grid-template-columns:1fr; gap:9px} .chart-card{ height:330px; padding:10px 9px 5px} .chart-card .section-head{ flex-wrap:nowrap} .chart-card .section-head h2{ font-size:14px; gap:5px} .chart-card .symbol-icon{ width:25px; height:25px} .chart-card .section-head .dot{ display:none} .timeframes{ width:auto; gap:2px} .timeframes button{ font-size:9px; padding:3px 5px; min-height:25px} .quick-card{ height:auto; min-height:320px; padding:12px 15px} .quick-title h2{ font-size:18px} .quotes .quote b{ font-size:28px} .auto-plan{ font-size:11px} .order-button{ height:62px} .risk-meter{ margin-top:3px} .pulse-panel{ grid-template-columns:43% 57%; padding:10px; min-height:195px} .pulse-heading{ left:12px; top:12px; gap:5px} .pulse-heading h2{ font-size:16px} .pulse-heading i{ font-size:24px} .radar-wrap{ width:158px; height:158px; justify-self:center; margin-top:28px} .pulse-copy{ padding:30px 0 0 8px} .pulse-copy p{ font-size:13px} .pulse-copy h3{ font-size:23px} .signal-dots{ margin-bottom:10px} .signal-tag{ font-size:9px; padding:6px 8px; gap:4px} .signal-tag i{ font-size:18px} .activity-panel{ padding:12px 15px} .activity-list{ grid-template-columns:1fr; gap:12px} .activity-item{ display:grid; grid-template-columns:40px 32px 1fr; gap:10px; padding-left:14px} .activity-time{ order:0} .activity-text{ order:0; width:auto} .activity-item:before,.activity-item:after{ display:block} .activity-text b{ font-size:12px} .positions-card{ padding:10px} .text-button{ font-size:10px} .positions-card h2{ font-size:15px} .page-card{ padding:18px} .footer{ font-size:9px} .toast{ bottom:78px; font-size:12px; padding:11px 16px} .notice{ font-size:11px} .chart-footer{ font-size:8px} @keyframes toast-in{ from{ opacity:0; transform:translate(-50%,8px)} to{ opacity:1; transform:translate(-50%,0)} } } @media(max-width:380px){ .chart-card .section-head{ flex-wrap:wrap} .timeframes{ width:100%} .summary-value{ font-size:22px} .summary-icon{ display:none} .page-meta{ display:none} .connection{ display:none} .pulse-copy h3{ font-size:21px} .radar-wrap{ width:145px; height:145px} } @media(prefers-reduced-motion:reduce){ *,*:before,*:after{ animation:none!important; transition:none!important; scroll-behavior:auto!important} } /* Reference-sized desktop rhythm; narrow screens retain the compact layout above. */ @media(min-width:961px) and (max-width:1549px){ .chart-card,.quick-card{ height:393px} .summary-label{ font-size:15px} .auto-plan{ font-size:12px; margin:12px 0} .order-hint{ font-size:12px; margin:10px 0} .activity-panel h2{ font-size:19px} .activity-text b{ font-size:14px} .activity-text small{ font-size:12px} .activity-list{ gap:11px} .quote b{ font-size:28px} .pulse-panel{ grid-template-columns:54% 46%} .pulse-copy{ padding-left:42px} } @media(max-width:380px){ .intelligence-grid,.pulse-panel,.activity-panel,.quick-card,.card{ min-width:0} .pulse-panel{ grid-template-columns:42% 58%} .radar-wrap{ width:125px; height:125px} .pulse-copy{ min-width:0; padding-left:2px} .signal-tag{ font-size:8px; gap:2px; padding:5px} .footer{ flex-wrap:wrap} .risk-label{ flex-wrap:wrap} .top-actions{ min-width:0} } .dot.stale { background: #eeb34e; box-shadow: none; } .quote-freshness { font-size: 10px; color: #58709c; margin-bottom: 5px; } .quote-freshness.negative { color: #b65b17; } .summary-detail { overflow-wrap: anywhere; } @media (max-width: 720px) { .footer { flex-wrap: wrap; } } /* Persistent, decorative motion; telemetry status is conveyed by text and colour. */ .pulse-panel.paused .radar,.pulse-panel.paused .radar-beacon,.pulse-panel.paused .signal-dots span { animation-play-state:running; } .radar-orbit { position:absolute; inset:17%; border-radius:50%; pointer-events:none; animation:orbit-turn 7s linear infinite; } .radar-orbit > span { position:absolute; top:0; left:50%; width:8px; height:8px; border-radius:50%; background:#1688ff; border:2px solid white; box-shadow:0 0 10px #1688ff80; } .orbit-2 { inset:28%; animation-duration:5s; animation-direction:reverse; } .orbit-3 { inset:9%; animation-duration:11s; animation-delay:-4s; } .orbit-4 { inset:38%; animation-duration:4s; animation-direction:reverse; animation-delay:-2s; } @keyframes orbit-turn { to { transform:rotate(360deg); } } .chart-tools,.chart-zoom,.strategy-card,.strategy-card form,.analysis-line { display:flex; align-items:center; gap:10px; } .chart-tools { justify-content:space-between; margin-bottom:6px; font-size:10px; color:#58709c; min-height:30px; } .chart-zoom { gap:4px; flex-shrink:0; } .chart-zoom button { border:1px solid #dbe8fa; background:#f5f9ff; border-radius:6px; padding:4px 9px; color:#1655a7; cursor:pointer; } #chart-live.stale { color:#ac6515; } .strategy-card { flex-wrap:wrap; justify-content:space-between; margin:10px 0; padding:14px 18px; } .strategy-card h2 { font-size:15px; margin:0; } .strategy-card p,.strategy-card small { font-size:11px; color:#58709c; margin:5px 0 0; } .strategy-card small { flex-basis:100%; } .strategy-card label { display:grid; gap:3px; font-size:11px; color:#58709c; } .strategy-card select { padding:7px 10px; border:1px solid #dbe8fa; border-radius:7px; background:white; color:#132554; } .strategy-card button { align-self:end; padding:8px 14px; } .analysis-card { margin:10px 0; padding:16px 18px; } .analysis-card > p,#analysis-log-status { font-size:11px; } #analysis-log { max-height:280px; overflow:auto; scrollbar-gutter:stable; } .analysis-entry { padding:10px 0; border-top:1px solid #e8f0fc; font-size:12px; } .analysis-line { flex-wrap:wrap; color:#466494; } .analysis-line time { font-size:11px; } .analysis-decision { color:#0067ff; } .analysis-entry p { margin:5px 0; overflow-wrap:anywhere; } .analysis-entry small { color:#647897; } .reduced-motion .radar-orbit { animation:none!important; } @media(prefers-reduced-motion:reduce) { .radar-orbit { animation:none!important; } } @media(max-width:720px) { .strategy-card form { flex-wrap:wrap; width:100%; } .chart-tools { align-items:flex-start; } #chart-live { max-width:52%; } .analysis-card { padding:12px; } } /* Compact dashboard: one quote/action panel and one three-column analysis panel. */ .compact-meta { display:flex; justify-content:flex-end; gap:12px; font-size:10px; color:#58709c; margin-bottom:8px; } #page-title[hidden] { display:none; } .quick-card { display:flex; flex-direction:column; } #quick-order { flex:1; min-width:0; } #strategy-controls { padding-top:10px; margin-top:10px; border-top:1px solid #e6effb; } .mode-buttons { display:flex; flex-wrap:nowrap; gap:4px; width:100%; align-items:center; } .mode-buttons button { flex:1; min-width:0; padding:7px 5px; border:1px solid #dce9fa; border-radius:7px; color:#436599; background:#f6faff; font-size:11px; white-space:nowrap; cursor:pointer; } .mode-buttons button[data-mode] { flex:1.65; } .mode-buttons button.selected { background:#0671ff; color:white; border-color:#0671ff; box-shadow:0 2px 6px #0671ff25; } .mode-buttons button:disabled { cursor:default; opacity:.55; } .mode-divider { width:1px; align-self:stretch; margin:2px; background:#dce9fa; } #strategy-permission { display:block; font-size:10px; line-height:1.5; color:#58709c; padding-top:6px; overflow-wrap:anywhere; min-height:21px; } .intelligence-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); align-items:stretch; } .intelligence-grid .pulse-panel { grid-template-columns: minmax(100px,.85fr) minmax(0,1fr); padding-right:12px; } .intelligence-grid .radar-wrap { width:150px; height:150px; max-width:100%; margin:0; justify-self:center; } .intelligence-grid .pulse-copy h3 { font-size:22px; } .intelligence-grid .pulse-copy p { font-size:12px; } .intelligence-grid .signal-tag { font-size:10px; padding:6px; white-space:normal; } .intelligence-grid .activity-panel { border-left:1px solid #dbe8fa; padding:0 16px; min-width:0; } .intelligence-grid .analysis-card { margin:0; border-left:1px solid #dbe8fa; border-radius:0; padding:0 0 0 16px; min-width:0; background:none; box-shadow:none; } .intelligence-grid .analysis-card h2 { font-size:16px; } .intelligence-grid .analysis-card .section-head { flex-wrap:wrap; gap:4px; margin-bottom:4px; } .intelligence-grid #analysis-log { max-height:200px; } .intelligence-grid .analysis-entry { font-size:11px; } @media(max-width:1100px) and (min-width:721px) { .intelligence-grid .pulse-panel { grid-template-columns:1fr; } .intelligence-grid .pulse-heading { grid-column:1; } .intelligence-grid .radar-wrap { width:110px; height:110px; } .intelligence-grid .pulse-copy { text-align:center; } } @media(max-width:720px) { .intelligence-grid { grid-template-columns:1fr; } .intelligence-grid .pulse-panel { grid-template-columns: minmax(100px,.85fr) minmax(0,1fr); padding:0; } .intelligence-grid .activity-panel,.intelligence-grid .analysis-card { border-left:0; border-top:1px solid #dbe8fa; padding:14px 0 0; margin-top:12px; } .compact-meta { font-size:9px; } } .mode-buttons button { height:32px; line-height:16px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; } .quick-card { height:auto; } .intelligence-grid .activity-list { grid-template-columns:1fr; } @media(min-width:721px) { .chart-card { height:auto; min-height:440px; } } #chart { contain:size; } /* Supplied Koomport branding: full lockup in header, icon in compact surfaces. */ .topbar .brand { flex-shrink: 0; } .topbar .brand .brand-wordmark { width: 144px; height: 60px; object-fit: contain; } .sidebar-brand img { width: 46px; height: 46px; } @media (max-width: 640px) { .topbar .brand .brand-wordmark { width: 120px; height: 50px; } } .emergency-close { border:1px solid #e54861; background:#fff1f3; color:#b4233c; border-radius:8px; padding:8px 12px; white-space:nowrap; cursor:pointer; font:inherit; font-weight:600; } .emergency-close:hover:not(:disabled) { background:#ffe0e6; } .emergency-close:disabled { opacity:.5; cursor:not-allowed; } .history-diagnostics { width:260px; max-width:70vw; white-space:normal; overflow-wrap:anywhere; } .history-diagnostics summary { cursor:pointer; white-space:nowrap; } .history-diagnostics p { margin:8px 0; line-height:1.6; } .pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 0;flex-wrap:wrap}.pagination button{border:1px solid #dce8ff;background:#fff;color:#24508e;border-radius:9px;padding:9px 14px;cursor:pointer}.pagination button:disabled{opacity:.45;cursor:default}.report-tools{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:16px 0}.report-tools select{padding:9px;border:1px solid #dce8ff;border-radius:8px;background:white;color:#183264}.table-scroll td small{display:block;max-width:360px;overflow-wrap:anywhere;white-space:normal}.summary-value.equity-value{font-size:clamp(18px,1.8vw,30px);overflow-wrap:anywhere}.summary-card>div{min-width:0}@media(max-width:600px){.equity-value{font-size:20px!important}.sidebar nav{display:flex;justify-content:space-around}.nav-item{min-width:0;flex:1}.report-tools{align-items:stretch}} /* Analysis left, centered pulse, five recent activities right. */ .intelligence-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:0; } .intelligence-grid > section { min-width:0; box-sizing:border-box; } .intelligence-grid .analysis-card { border:0; padding:0 16px 0 0; display:flex; flex-direction:column; overflow:hidden; } .intelligence-grid .analysis-card .section-head { flex-shrink:0; } .intelligence-grid .analysis-card > p { flex-shrink:0; margin:4px 0 8px; line-height:1.6; } .intelligence-grid #analysis-log { min-width:0; height:246px; max-height:246px; overflow-y:auto; overflow-x:hidden; padding-right:6px; scrollbar-gutter:stable; } .intelligence-grid .analysis-entry,.intelligence-grid .analysis-line { min-width:0; white-space:normal; overflow-wrap:anywhere; } .intelligence-grid .analysis-entry small { display:block; line-height:1.6; overflow-wrap:anywhere; } .analysis-confidence { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; margin-bottom:5px; border-radius:999px; font-size:10px; font-weight:600; line-height:1.5; } .analysis-confidence > span { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; } .analysis-confidence.high { color:#087947; background:#e0f8eb; } .analysis-confidence.medium { color:#2361b0; background:#e8f1ff; } .analysis-confidence.pending { color:#946000; background:#fff3d6; } .analysis-confidence.low { color:#b62e42; background:#ffeaee; } .analysis-confidence.unknown { color:#64748b; background:#eef2f6; } .intelligence-grid .pulse-panel { border-left:1px solid #dbe8fa; padding:42px 16px 12px; align-content:center; justify-content:center; position:relative; } .intelligence-grid .pulse-heading { left:16px; right:16px; top:0; justify-content:center; } .intelligence-grid .pulse-copy { min-width:0; } .intelligence-grid .activity-panel { padding:0 0 0 16px; } .intelligence-grid .activity-list { max-height:274px; overflow-y:auto; overflow-x:hidden; padding-right:6px; } .intelligence-grid .activity-text { min-width:0; overflow-wrap:anywhere; } @media(max-width:1100px) and (min-width:721px) { .intelligence-grid .pulse-panel { grid-template-columns:1fr; gap:10px; } .intelligence-grid .pulse-copy { text-align:center; } } @media(max-width:720px) { .intelligence-grid { grid-template-columns:minmax(0,1fr); } .intelligence-grid .analysis-card { padding:0; } .intelligence-grid .pulse-panel { border-left:0; border-top:1px solid #dbe8fa; padding:48px 0 12px; margin-top:14px; } .intelligence-grid .pulse-heading { top:14px; } .intelligence-grid .activity-panel { padding:14px 0 0; } } .intelligence-grid { padding:16px 18px; } @media(max-width:720px) { .intelligence-grid { padding:14px 12px; } } #chart { position:relative; } .chart-zones { position:absolute; inset:0 65px 25px 0; pointer-events:none; overflow:hidden; z-index:1; } .chart-zone { position:absolute; left:0; right:0; box-sizing:border-box; border-top:1px solid; border-bottom:1px solid; } .chart-zone.support { background:#00a56a12; border-color:#00a56a55; color:#087947; } .chart-zone.resistance { background:#e7486012; border-color:#e7486055; color:#b62e42; } .chart-zone span { position:absolute; left:8px; top:1px; max-width:calc(100% - 16px); font-size:9px; padding:1px 4px; border-radius:3px; background:#fffffff0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }