.mt5-shell{padding-bottom:64px!important}.back-link{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--color-text-secondary);font-size:14px;line-height:20px;text-decoration:none}.mt5-head .title-line{display:flex;align-items:center;gap:12px}.mt5-head h1{margin:0;font-size:20px;line-height:28px;font-weight:700}.mt5-head p{margin:4px 0 0;color:var(--color-text-secondary);font-size:14px;line-height:20px}.readonly-badge{height:32px;padding:0 12px;border:1px solid #D2D2D2;border-radius:8px;color:#171717;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500}.steps{list-style:none;margin:24px auto;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;width:760px}.steps li{display:flex;align-items:center;gap:12px;position:relative;color:var(--color-text-secondary);font-size:16px}.steps li:not(:last-child):after{content:"";height:2px;background:#D2D2D2;position:absolute;left:148px;right:24px;top:20px}.steps li.is-completed,.steps li.is-current{color:var(--color-text-primary)}.steps li.is-completed:not(:last-child):after,.steps li.is-current:not(:last-child):after{background:#FDC806}.steps b{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#F2F2F2;font-weight:500;z-index:1}.steps .is-completed b{background:#000000;color:#FDFDFD}.steps .is-current b{background:#FDC806;color:#171717}.steps .is-pending b{background:#F2F2F2;color:#666666}.mt5-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(360px,1fr);gap:12px}.account-panel,.after-panel,.sync-panel{border:1px solid var(--color-border);border-radius:12px;background:#FDFDFD;padding:20px}.account-panel h2,.after-panel h2,.sync-panel h2{margin:0 0 20px;font-size:20px;line-height:28px;font-weight:600}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.form-grid label{display:grid;gap:8px;font-size:14px;line-height:20px}.form-grid select,.form-grid input{height:40px;border:1px solid var(--color-border-strong);border-radius:8px;background:#FDFDFD;padding:0 16px;font:inherit;font-size:16px;color:var(--color-text-primary)}.form-grid small{min-height:20px;color:var(--color-text-secondary);font-size:13px;line-height:20px}.password-wrap{position:relative}.password-wrap input{width:100%;padding-right:48px}.password-wrap button{position:absolute;right:0;top:0;width:40px;height:40px;border:0;background:transparent}.security-note{margin-top:24px;border:1px solid #D2D2D2;background:#F7F7F7;border-radius:8px;padding:16px 20px;display:flex;gap:16px}.security-note .shield{color:#FDC806;display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px}.security-note strong{font-size:16px;line-height:20px}.security-note p{margin:4px 0 0;color:var(--color-text-secondary);font-size:14px;line-height:20px}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-actions button{height:40px;border-radius:8px;padding:0 20px;font-size:14px;line-height:20px;font-weight:500}.test-btn{background:#FDFDFD;border:1px solid #000000}.connect-btn{background:#000000;color:#FDFDFD;border:1px solid #000000}.test-btn:disabled,.connect-btn:disabled{opacity:.45;cursor:not-allowed}.connection-message{min-height:20px;margin:8px 0 0;text-align:right;font-size:13px}.after-list{display:grid;gap:20px}.after-list article{display:grid;grid-template-columns:32px 48px 1fr;gap:12px;align-items:center}.after-list article>b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#F7F7F7}.round-icon,.sync-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#F7F7F7;color:#000000}.after-list strong{font-size:16px;line-height:20px}.after-list p{margin:4px 0 0;color:var(--color-text-secondary);font-size:14px;line-height:20px}.record-note{margin-top:24px;padding:16px;background:#F7F7F7;border-radius:8px;display:flex;gap:12px}.record-note>span{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px}.record-note strong{font-size:16px}.record-note p{margin:4px 0 0;color:var(--color-text-secondary);font-size:14px;line-height:20px}.sync-panel{margin-top:12px}.sync-grid{display:grid;grid-template-columns:repeat(3,1fr)}.sync-grid article{display:flex;align-items:center;gap:20px;padding:0 20px}.sync-grid article+article{border-left:1px solid var(--color-border)}.sync-grid small{display:block;color:var(--color-text-secondary);font-size:13px;line-height:20px}.sync-grid strong{display:block;margin-top:4px;font-size:20px;line-height:28px;font-weight:600}.sync-icon{color:#FDC806}button:focus-visible,select:focus-visible,input:focus-visible,.back-link:focus-visible{outline:2px solid #000000;outline-offset:2px}@media(max-width:1279px){html,body,.trade-journal-canvas{min-width:1280px}.mt5-shell{min-width:1184px}}

.password-wrap button img,.round-icon img,.sync-icon img,.security-note .shield img,.record-note>span img{width:24px;height:24px;display:block}.back-link .inline-ui-icon{width:24px;height:24px}

/* MT5 connection state 1.2 — field validation only. Error treatment follows the active color constitution: clear text + strong black border, no page-specific red token. */
.form-grid select.is-invalid,.form-grid input.is-invalid{border-color:#000000;border-width:2px}
.form-grid .field-error{display:block;min-height:0;color:#171717;font-size:14px;line-height:20px;font-weight:500}
.form-grid .field-error:empty{display:none}

/* MT5 connection state 1.3 — real connector loading state only. */
.connection-message.is-loading{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:#171717}
.connection-spinner{width:20px;height:20px;display:block;animation:mt5-connection-spin 1s linear infinite}
.test-btn.is-loading{cursor:wait}
@keyframes mt5-connection-spin{to{transform:rotate(360deg)}}


/* MT5 connection state 1.4 — verified read-only test success. */
.connection-message.is-success{display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;color:#171717}
.connection-success-icon{width:20px;height:20px;display:block;flex:0 0 20px}
.connection-message.is-success>span{display:grid;gap:4px;text-align:left}
.connection-message.is-success strong{font-size:14px;line-height:20px;font-weight:500;color:#171717}
.connection-message.is-success small{display:block;max-width:640px;font-size:14px;line-height:20px;font-weight:400;color:#666666}

/* MT5 connection state 1.5 — connector test failed. */
.connection-message.is-error{display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;color:#171717}
.connection-error-icon{width:20px;height:20px;display:block;flex:0 0 20px}
.connection-message.is-error>span{display:grid;gap:4px;text-align:left}
.connection-message.is-error strong{font-size:14px;line-height:20px;font-weight:500;color:#171717}
.connection-message.is-error small{display:block;max-width:640px;font-size:14px;line-height:20px;font-weight:400;color:#666666}


/* MT5 connection state 1.6 — saving verified read-only connection. */
.connection-message.is-connecting{display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;color:#171717}
.connection-message.is-connecting>span{display:grid;gap:4px;text-align:left}
.connection-message.is-connecting strong{font-size:14px;line-height:20px;font-weight:500;color:#171717}
.connection-message.is-connecting small{display:block;max-width:640px;font-size:14px;line-height:20px;font-weight:400;color:#666666}
.connect-btn.is-loading{cursor:wait}
.form-grid select:disabled,.form-grid input:disabled{opacity:1;color:#171717;background:#F7F7F7;cursor:not-allowed}
.password-wrap button:disabled{opacity:.45;cursor:not-allowed}

/* MT5 connection state 1.7 — Initial Sync. Page-local only. */
.initial-sync-panel{border:1px solid var(--color-border);border-radius:12px;background:#FDFDFD;padding:20px}
.initial-sync-heading{display:flex;align-items:center;gap:12px}
.initial-sync-heading>div{flex:1;min-width:0}
.initial-sync-heading h2{margin:0;font-size:20px;line-height:28px;font-weight:600}
.initial-sync-heading p{margin:4px 0 0;color:#666666;font-size:16px;line-height:20px;font-weight:500}
.initial-sync-status-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:20px;background:#F7F7F7;flex:0 0 40px}
.initial-sync-status-icon img{width:24px;height:24px;display:block}
.initial-sync-copy{margin:20px 0 0;color:#666666;font-size:14px;line-height:20px;max-width:880px}
.initial-sync-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px;padding:20px;background:#F7F7F7;border-radius:12px}
.initial-sync-summary div{min-width:0}
.initial-sync-summary small{display:block;color:#666666;font-size:14px;line-height:20px}
.initial-sync-summary strong{display:block;margin-top:4px;color:#171717;font-size:16px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.initial-sync-progress{margin-top:24px}
.initial-sync-progress-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.initial-sync-progress-row strong,.initial-sync-progress-row span{font-size:16px;line-height:20px;font-weight:500;color:#171717}
.initial-sync-progress-track{position:relative;height:8px;margin-top:12px;border-radius:4px;background:#F2F2F2;overflow:hidden}
.initial-sync-progress-track>span{display:block;height:100%;width:0;background:#FDC806;border-radius:4px;transition:width .2s linear}
.initial-sync-progress-track.is-indeterminate>span{position:absolute;width:32%;animation:mt5-initial-sync-indeterminate 1.4s ease-in-out infinite}
@keyframes mt5-initial-sync-indeterminate{0%{left:-32%}100%{left:100%}}
.initial-sync-detail{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:12px;color:#666666;font-size:14px;line-height:20px}
.sync-working{display:inline-flex;align-items:center;gap:8px;min-width:0}
.sync-working img{width:20px;height:20px;display:block;animation:mt5-connection-spin 1s linear infinite;flex:0 0 20px}
.initial-sync-review-notice{margin-top:20px;padding:16px 20px;border:1px solid #D2D2D2;border-radius:8px;background:#F7F7F7;color:#171717;font-size:14px;line-height:20px}
.initial-sync-actions{display:flex;justify-content:flex-end;margin-top:20px}
.initial-sync-actions button{height:40px;border-radius:20px;padding:0 16px;font-size:14px;line-height:20px;font-weight:500}

/* MT5 connection state 1.8 — connected and ready. Page-local only. */
.connection-success-panel{border:1px solid var(--color-border);border-radius:12px;background:#FDFDFD;padding:20px}
.connection-success-heading{display:flex;align-items:center;gap:12px}
.connection-success-heading>div{flex:1;min-width:0}
.connection-success-heading h2{margin:0;font-size:20px;line-height:28px;font-weight:600;color:#171717}
.connection-success-heading p{margin:4px 0 0;color:#666666;font-size:16px;line-height:20px;font-weight:500}
.connection-success-status-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:20px;background:#F7F7F7;flex:0 0 40px}
.connection-success-status-icon img{width:24px;height:24px;display:block}
.connection-success-copy{margin:20px 0 0;color:#666666;font-size:14px;line-height:20px;max-width:880px}
.connection-success-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px;padding:20px;background:#F7F7F7;border-radius:12px}
.connection-success-summary div{min-width:0}
.connection-success-summary small{display:block;color:#666666;font-size:14px;line-height:20px}
.connection-success-summary strong{display:block;margin-top:4px;color:#171717;font-size:16px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.connection-success-redirect{display:flex;align-items:center;gap:8px;margin-top:24px;color:#171717;font-size:14px;line-height:20px}
.connection-success-redirect img{width:20px;height:20px;display:block;animation:mt5-connection-spin 1s linear infinite;flex:0 0 20px}

/* MT5 connection state 1.9 — delayed sync while the account remains connected. Page-local only. */
.sync-delayed-panel{border:1px solid var(--color-border);border-radius:12px;background:#FDFDFD;padding:20px}
.sync-delayed-heading{display:flex;align-items:center;gap:12px}
.sync-delayed-heading>div{flex:1;min-width:0}
.sync-delayed-heading h2{margin:0;font-size:20px;line-height:28px;font-weight:600;color:#171717}
.sync-delayed-heading p{margin:4px 0 0;color:#666666;font-size:16px;line-height:20px;font-weight:500}
.sync-delayed-status-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:20px;background:#F7F7F7;flex:0 0 40px}
.sync-delayed-status-icon img{width:24px;height:24px;display:block}
.sync-delayed-copy{margin:20px 0 0;color:#666666;font-size:14px;line-height:20px;max-width:880px}
.sync-delayed-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px;padding:20px;background:#F7F7F7;border-radius:12px}
.sync-delayed-summary div{min-width:0}
.sync-delayed-summary small{display:block;color:#666666;font-size:14px;line-height:20px}
.sync-delayed-summary strong{display:block;margin-top:4px;color:#171717;font-size:16px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sync-delayed-warning{display:flex;align-items:flex-start;gap:12px;margin-top:24px;padding:16px 20px;border:1px solid #D2D2D2;border-radius:8px;background:#F7F7F7}
.sync-delayed-warning>img{width:24px;height:24px;display:block;flex:0 0 24px}
.sync-delayed-warning strong{display:block;color:#171717;font-size:16px;line-height:20px;font-weight:500}
.sync-delayed-warning p{margin:4px 0 0;color:#666666;font-size:14px;line-height:20px}
.sync-delayed-progress{margin-top:24px}
.sync-delayed-progress-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.sync-delayed-progress-row strong,.sync-delayed-progress-row span{font-size:16px;line-height:20px;font-weight:500;color:#171717}
.sync-delayed-detail{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:12px;color:#666666;font-size:14px;line-height:20px}



/* MT5 connection state 1.10 — Investor / Read-only permission expired. Page-local only. */
.connection-expired-panel{border:1px solid var(--color-border);border-radius:12px;background:#FDFDFD;padding:20px}
.connection-expired-heading{display:flex;align-items:center;gap:12px}
.connection-expired-heading>div{flex:1;min-width:0}
.connection-expired-heading h2{margin:0;font-size:20px;line-height:28px;font-weight:600;color:#171717}
.connection-expired-heading p{margin:4px 0 0;color:#666666;font-size:16px;line-height:20px;font-weight:500}
.connection-expired-status-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:20px;background:#F7F7F7;flex:0 0 40px}
.connection-expired-status-icon img{width:24px;height:24px;display:block}
.connection-expired-copy{margin:20px 0 0;color:#666666;font-size:14px;line-height:20px;max-width:880px}
.connection-expired-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px;padding:20px;background:#F7F7F7;border-radius:12px}
.connection-expired-summary div{min-width:0}
.connection-expired-summary small{display:block;color:#666666;font-size:14px;line-height:20px}
.connection-expired-summary strong{display:block;margin-top:4px;color:#171717;font-size:16px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.connection-expired-note{display:flex;align-items:flex-start;gap:12px;margin-top:24px;padding:16px 20px;border:1px solid #D2D2D2;border-radius:8px;background:#F7F7F7}
.connection-expired-note>img{width:24px;height:24px;display:block;flex:0 0 24px}
.connection-expired-note strong{display:block;color:#171717;font-size:16px;line-height:20px;font-weight:500}
.connection-expired-note p{margin:4px 0 0;color:#666666;font-size:14px;line-height:20px}
.connection-expired-actions{display:flex;justify-content:flex-end;margin-top:20px}
.connection-expired-primary{height:40px;min-height:40px;padding:0 16px;border:1px solid #000000;border-radius:20px;background:#000000;color:#FDFDFD;font:500 14px/20px Roboto,"Noto Sans Thai",Arial,sans-serif;white-space:nowrap}
.connection-expired-primary:disabled{opacity:.45;cursor:not-allowed}

/* MT5 connection state 1.11 — user disconnect confirmation and disconnected notice. Page-local only. */
.disconnect-manage-actions{display:flex;justify-content:flex-end;margin-top:20px}
.disconnect-secondary{height:40px;padding:0 16px;border:1px solid #000000;border-radius:20px;background:#FDFDFD;color:#171717;font:500 14px/20px Roboto,"Noto Sans Thai",Arial,sans-serif}
.disconnect-secondary:disabled{opacity:.45;cursor:not-allowed}
.disconnect-dialog-backdrop{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(0,0,0,.32);padding:24px}
.disconnect-dialog-backdrop[hidden]{display:none}
.disconnect-dialog{width:min(560px,calc(100vw - 48px));border:1px solid #D2D2D2;border-radius:12px;background:#FDFDFD;padding:24px;box-shadow:0 12px 40px rgba(0,0,0,.16)}
.disconnect-dialog h2{margin:0;color:#171717;font-size:20px;line-height:28px;font-weight:600}
.disconnect-dialog p{margin:12px 0 0;color:#666666;font-size:14px;line-height:20px;font-weight:400}
.disconnect-dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.disconnect-dialog-actions button{height:40px;padding:0 16px;border-radius:20px;font:500 14px/20px Roboto,"Noto Sans Thai",Arial,sans-serif}
.disconnect-dialog-back{border:1px solid #000000;background:#FDFDFD;color:#171717}
.disconnect-dialog-confirm{border:1px solid #000000;background:#000000;color:#FDFDFD}
.disconnect-dialog-actions button:disabled{opacity:.45;cursor:not-allowed}
.disconnect-dialog-message{min-height:20px;margin-top:12px;text-align:right}
.connection-message.is-disconnected{display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;color:#171717}
.connection-message.is-disconnected>span{display:grid;gap:4px;text-align:left}
.connection-message.is-disconnected strong{font-size:14px;line-height:20px;font-weight:500;color:#171717}
.connection-message.is-disconnected small{font-size:14px;line-height:20px;font-weight:400;color:#666666}

/* MT5 connection state 1.12 — connection/sync error. Page-local only. */
.connection-error-panel{border:1px solid var(--color-border);border-radius:12px;background:#FDFDFD;padding:20px}
.connection-error-heading{display:flex;align-items:center;gap:12px}
.connection-error-heading>div{flex:1;min-width:0}
.connection-error-heading h2{margin:0;font-size:20px;line-height:28px;font-weight:600;color:#171717}
.connection-error-heading p{margin:4px 0 0;color:#666666;font-size:16px;line-height:20px;font-weight:500}
.connection-error-status-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:20px;background:#F7F7F7;flex:0 0 40px}
.connection-error-status-icon img{width:24px;height:24px;display:block}
.connection-error-copy{margin:20px 0 0;color:#171717;font-size:16px;line-height:20px;font-weight:500}
.connection-error-note{display:flex;align-items:flex-start;gap:12px;margin-top:20px;padding:16px 20px;border:1px solid #D2D2D2;border-radius:8px;background:#F7F7F7}
.connection-error-note>img{width:24px;height:24px;display:block;flex:0 0 24px}
.connection-error-note strong{display:block;color:#171717;font-size:16px;line-height:20px;font-weight:500}
.connection-error-note p{margin:4px 0 0;color:#666666;font-size:14px;line-height:20px;font-weight:400}
.connection-error-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px;padding:20px;background:#F7F7F7;border-radius:12px}
.connection-error-summary small{display:block;color:#666666;font-size:14px;line-height:20px}
.connection-error-summary strong{display:block;margin-top:4px;color:#171717;font-size:16px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.connection-error-data-notice{margin:16px 0 0;color:#666666;font-size:14px;line-height:20px}
.connection-error-retry-message{min-height:20px;margin:16px 0 0;color:#666666;font-size:14px;line-height:20px;text-align:right}
.connection-error-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
.connection-error-actions button:disabled{opacity:.45;cursor:not-allowed}

.checklist-requirement-notice{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:16px 20px;border:1px solid #D2D2D2;border-radius:8px;background:#F7F7F7}.checklist-requirement-notice[hidden]{display:none}.checklist-requirement-notice>img{width:24px;height:24px;display:block;flex:0 0 24px}.checklist-requirement-notice p{margin:0;color:#171717;font-size:14px;line-height:20px;font-weight:400}