/* Shared visual contract. Loaded by header.php for native, plugin and workspace
   documents. Business layouts and action semantics stay with their components. */
html.sixconsole[data-six-visual] body{font-family:var(--six-font);color:var(--six-text)}
html.sixconsole[data-six-visual] .main-card{border:1px solid var(--six-line);border-radius:var(--six-radius);box-shadow:var(--six-shadow);background:var(--six-surface)}
html.sixconsole[data-six-visual] :is(.main-card-title,.six-section-title){color:var(--six-text);font-weight:600}
html.sixconsole[data-six-visual] :is(.six-muted,.el-form-item__label){color:var(--six-secondary)}
html.sixconsole[data-six-visual] :is(.el-input__inner,.el-textarea__inner){border-color:var(--six-line);border-radius:var(--six-control-radius);font-family:var(--six-font);color:var(--six-text)}
html.sixconsole[data-six-visual] :is(.el-input__inner,.el-textarea__inner):hover{border-color:#b4bfd0}
html.sixconsole[data-six-visual] :is(.el-input__inner,.el-textarea__inner):focus{border-color:var(--color-primary)}
html.sixconsole[data-six-visual] :is(.el-input.is-disabled .el-input__inner,.el-textarea.is-disabled .el-textarea__inner){color:var(--six-disabled-text);background:var(--six-disabled);border-color:var(--six-line);cursor:not-allowed}
html.sixconsole[data-six-visual] .el-table{color:var(--six-text);font-family:var(--six-font);font-size:14px}
html.sixconsole[data-six-visual] .el-table th{color:var(--six-secondary);background:var(--six-surface-hover);font-weight:500}
html.sixconsole[data-six-visual] .el-table :is(td,th.is-leaf){border-bottom-color:var(--six-line)}

/* Element continues to own clicks, focus, loading and disabled behavior. */
html.sixconsole[data-six-visual] .el-button{font:14px/20px var(--six-font);border-radius:var(--six-control-radius);min-height:var(--six-control-height)}
html.sixconsole[data-six-visual] .el-button--default{color:var(--six-secondary);background:var(--six-surface);border-color:var(--six-line)}
html.sixconsole[data-six-visual] .el-button--default:not(.is-disabled):not(.is-loading):hover{color:var(--color-primary);background:var(--six-primary-soft);border-color:#b8c9f7}
html.sixconsole[data-six-visual] .el-button--primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
html.sixconsole[data-six-visual] .el-button--primary:not(.is-disabled):not(.is-loading):hover{background:var(--six-primary-hover);border-color:var(--six-primary-hover);color:#fff}
html.sixconsole[data-six-visual] .el-button--primary:not(.is-disabled):not(.is-loading):active{background:var(--six-primary-active);border-color:var(--six-primary-active)}
html.sixconsole[data-six-visual] .el-button--primary.is-plain{color:var(--color-primary);background:var(--six-primary-soft);border-color:#b8c9f7}
html.sixconsole[data-six-visual] .el-button--danger,
html.sixconsole[data-six-visual] #finance .el-button.el-button--danger{color:var(--six-danger);background:var(--six-surface);border-color:#e9b5b8}
html.sixconsole[data-six-visual] .el-button--danger:not(.is-disabled):not(.is-loading):hover,
html.sixconsole[data-six-visual] #finance .el-button.el-button--danger:not(.is-disabled):not(.is-loading):hover{background:var(--six-danger-soft);color:var(--six-danger-hover);border-color:var(--six-danger)}
html.sixconsole[data-six-visual] .el-button--danger:not(.is-disabled):not(.is-loading):active{background:#ffe4e5;color:var(--six-danger-active)}
html.sixconsole[data-six-visual] .el-button--text{color:var(--color-primary);background:transparent;border-color:transparent}
html.sixconsole[data-six-visual] .el-button--text:not(.is-disabled):not(.is-loading):hover{color:var(--six-primary-hover)}
html.sixconsole[data-six-visual] .el-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
html.sixconsole[data-six-visual] .el-button--danger:focus-visible{outline-color:var(--six-danger)}
html.sixconsole[data-six-visual] .el-button.is-disabled,
html.sixconsole[data-six-visual] #finance .el-button.el-button--danger.is-disabled{color:var(--six-disabled-text);background:var(--six-disabled);border-color:var(--six-line);cursor:not-allowed}
html.sixconsole[data-six-visual] .el-button.is-loading{opacity:.68;cursor:wait}
html.sixconsole[data-six-visual] .el-button.is-disabled::before{display:none}

/* Neutral numbers are separate from promotions, overdue states and errors. */
html.sixconsole[data-six-visual] :is(.pay-money,.true-money,.money-num,.six-top-balance strong){font-variant-numeric:tabular-nums}
html.sixconsole[data-six-visual] .pay-dialog .pay-money,
html.sixconsole[data-six-visual] .el-dialog .dialog-footer :is(.money-num,.num){color:var(--six-text)}
html.sixconsole[data-six-visual] :is(.six-price-promotion,.six-discount-price){color:var(--six-warning)}
html.sixconsole[data-six-visual] :is(.six-price-overdue,.six-inline-error,.el-form-item__error){color:var(--six-danger)}

/* Body-appended Element dialogs share a shell, independent of their page root.
   Native inline widths remain intact; max-width contains phones. VNC keeps its
   separately verified fullscreen/window shell. */
html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog){display:flex;flex-direction:column;box-sizing:border-box;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:hidden;border:1px solid var(--six-line);border-radius:var(--six-radius);background:var(--six-surface);color:var(--six-text);font-family:var(--six-font);box-shadow:0 16px 56px rgba(32,43,64,.16)}
html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog):not(.recharge-dialog):not(.six-payment-dialog)>.el-dialog__header{display:block;position:relative;flex:none;padding:20px 56px 20px 24px;border-bottom:1px solid var(--six-line)}
html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog)>.el-dialog__header:not(:has(.el-dialog__title:not(:empty),.el-dialog__headerbtn)){display:none}
html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog) .el-dialog__title{color:var(--six-text);font:600 16px/24px var(--six-font)}
html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog) .el-dialog__headerbtn{display:grid;place-items:center;top:12px;right:12px;width:40px;height:40px;padding:0;border-radius:var(--six-control-radius);font-size:18px}
html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog) .el-dialog__headerbtn:hover{background:var(--six-surface-hover)}
html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog) .el-dialog__close{color:var(--six-secondary)}
html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog)>.el-dialog__body{flex:1 1 auto;min-height:0;padding:24px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-wrap:anywhere;font:14px/1.6 var(--six-font);color:var(--six-text)}
html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog)>.el-dialog__footer{flex:none;padding:16px 24px;border-top:1px solid var(--six-line);background:var(--six-surface)}
html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog)>.el-dialog__footer>:is(.dialog-footer,.six-dialog-actions){display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin:0}
html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog)>.el-dialog__footer .el-button+.el-button{margin-left:0}
/* Existing payment/recharge components render their own accessible title and
   footer inside the body; preserve those structures and their native spacing. */
html.sixconsole[data-six-visual] :is(.six-payment-title,.recharge-title,.six-account-dialog .dialog-title){font-family:var(--six-font);color:var(--six-text)}
html.sixconsole[data-six-visual] .el-message-box{max-width:calc(100vw - 24px);box-sizing:border-box;border:1px solid var(--six-line);border-radius:var(--six-radius);color:var(--six-text);font-family:var(--six-font)}
html.sixconsole[data-six-visual] .el-message-box__title{font-size:16px;font-weight:600;color:var(--six-text)}
html.sixconsole[data-six-visual] .el-message-box__content{color:var(--six-secondary);line-height:24px}
html.sixconsole[data-six-visual] .el-message-box__message p{max-height:50vh;overflow-y:auto;overflow-wrap:anywhere}
@media(max-width:760px){
 html.sixconsole[data-six-visual]{--six-control-height:44px}
 html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog){max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin-top:12px}
 html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog)>.el-dialog__header{padding:16px 56px 16px 16px}
 html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog)>.el-dialog__body{padding:16px}
 html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog)>.el-dialog__footer{padding:12px 16px}
 html.sixconsole[data-six-visual] .el-dialog:not(.six-embedded-console-dialog) .el-dialog__headerbtn{top:6px;right:6px;width:44px;height:44px}
 html.sixconsole[data-six-visual] :is(.el-input__inner,.el-textarea__inner){font-size:16px}
}

/* These components own their title/close controls inside the body. Keep the
   native title for Element's accessible name, but hide its visual header with
   greater specificity than the shared native-header rule (including mobile). */
html.sixconsole[data-six-visual] .el-dialog.recharge-dialog:not(.six-embedded-console-dialog)>.el-dialog__header,
html.sixconsole[data-six-visual] .el-dialog.six-payment-dialog:not(.six-embedded-console-dialog)>.el-dialog__header{display:none}
html.sixconsole[data-six-visual] .el-dialog.recharge-dialog:not(.six-embedded-console-dialog)>.el-dialog__body,
html.sixconsole[data-six-visual] .el-dialog.six-payment-dialog:not(.six-embedded-console-dialog)>.el-dialog__body{padding:0}
html.sixconsole[data-six-visual] .six-payment-footer{flex-wrap:wrap}
@media(max-width:760px){
 html.sixconsole[data-six-visual] .six-payment-footer>:is(.el-button,a){flex:1 1 120px;min-width:0;max-width:100%;margin-left:0}
}

/* Retire route-local palette/shape forks while keeping each route's layout. */
html.sixconsole[data-six-visual] :is(#account,#finance){--color-primary:var(--six-primary);--six-bg:#f6f8fc}
html.sixconsole[data-six-visual] #account .el-main{background:var(--six-bg)}
html.sixconsole[data-six-visual] #account :is(.six-profile-summary,.six-profile-certification,.six-profile-editor,.six-profile-connections),
html.sixconsole[data-six-visual] #finance .finance-top{border-color:var(--six-line);border-radius:var(--six-radius)}
html.sixconsole[data-six-visual] #finance .el-tabs__header{border-color:var(--six-line);border-radius:var(--six-radius) var(--six-radius) 0 0}
html.sixconsole[data-six-visual] #finance .el-tabs__content{border-color:var(--six-line);border-radius:0 0 var(--six-radius) var(--six-radius)}
html.sixconsole[data-six-visual] :is(#account,#finance) .el-button{font-size:14px;border-radius:var(--six-control-radius);min-height:var(--six-control-height)}
html.sixconsole[data-six-visual] :is(#account,#finance) .el-button--primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
html.sixconsole[data-six-visual] :is(#account,#finance) .el-button--primary:not(.is-disabled):not(.is-loading):hover{background:var(--six-primary-hover);border-color:var(--six-primary-hover)}
html.sixconsole[data-six-visual] :is(#account,#finance) .el-button--primary:not(.is-disabled):not(.is-loading):active{background:var(--six-primary-active);border-color:var(--six-primary-active)}
html.sixconsole[data-six-visual] :is(#account,#finance) .el-button.is-disabled{color:var(--six-disabled-text);background:var(--six-disabled);border-color:var(--six-line)}
html.sixconsole[data-six-visual] #finance .true-money{color:var(--six-text)}

/* Keep support tools above purchase/checkout actions while preserving the
   user's expanded/collapsed preference and the mounted conversation. */
html.sixconsole[data-six-visual] body:has(.sixcart-page) #six-support-workspace .six-support-rail{bottom:calc(176px + env(safe-area-inset-bottom,0px))}
html.sixconsole[data-six-visual] #six-support-workspace .six-support-options{max-height:calc(100dvh - 240px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--six-line);border-radius:var(--six-radius)}
html.sixconsole[data-six-visual] body .el-main{scroll-padding-bottom:120px}
@media(max-width:760px){
 html.sixconsole[data-six-visual] body:has(.sixcart-page) #six-support-workspace .six-support-rail{bottom:calc(196px + env(safe-area-inset-bottom,0px))}
 html.sixconsole[data-six-visual] #six-support-workspace .six-support-options{max-width:calc(100vw - 70px);max-height:calc(100dvh - 280px)}
}