.mas-page, .mas-root, .mas-dialog { color: #202726; font: 14px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; }
.mas-page { margin: 0; background: #f5f7f7; }
.mas-page *, .mas-root *, .mas-dialog * { box-sizing: border-box; }
.mas-page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 28px; border-bottom: 1px solid #dce3e1; background: #fff; }
.mas-page-header strong { font-size: 18px; }
.mas-page-header a, .mas-link { color: #08795e; text-decoration: underline; text-underline-offset: 3px; }
.mas-page main { max-width: 1040px; margin: 28px auto; padding: 0 24px; }
.mas-root { width: 100%; padding: 24px; background: #fff; }
.mas-root [hidden], .mas-dialog [hidden] { display: none !important; }
.mas-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #dde4e1; padding-bottom: 20px; }
.mas-heading h2, .mas-dialog h2 { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 650; }
.mas-heading span { color: #08795e; font-size: 13px; }
.mas-root h3 { margin: 0 0 6px; font-size: 15px; }
.mas-root p { margin: 4px 0; color: #606b66; }
.mas-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; border-bottom: 1px solid #e7ebe9; }
.mas-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.mas-root button, .mas-dialog button { min-height: 38px; padding: 8px 16px; border: 1px solid #c8d2ce; border-radius: 5px; background: #fff; color: #25322c; font: inherit; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.mas-root button:hover, .mas-dialog button:hover { background: #f2f6f4; }
.mas-root .mas-primary, .mas-dialog .mas-primary { color: #fff; background: #08795e; border-color: #08795e; }
.mas-root .mas-primary:hover, .mas-dialog .mas-primary:hover { background: #05654e; }
.mas-root button:disabled, .mas-dialog button:disabled { opacity: .5; cursor: default; }
.mas-root :focus-visible, .mas-dialog :focus-visible { outline: 2px solid #138fbe; outline-offset: 3px; }
.mas-form { display: grid; gap: 18px; }
.mas-form label { display: grid; gap: 6px; }
.mas-form input, .mas-form select { width: 100%; min-width: 0; min-height: 42px; padding: 8px 11px; border: 1px solid #bdcac4; border-radius: 4px; color: #202726; background: #fff; font: inherit; }
.mas-form .mas-check { display: flex; align-items: center; gap: 10px; }
.mas-check input { width: 18px; min-height: 18px; accent-color: #08795e; }
.mas-setup { padding: 24px 0; max-width: 740px; }
.mas-setup-details { display: grid; grid-template-columns: 256px minmax(0, 1fr); align-items: center; gap: 24px; }
.mas-setup-details img { width: 256px; max-width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.mas-secret { font: 16px/1.8 ui-monospace, monospace; overflow-wrap: anywhere; user-select: all; }
.mas-root .mas-error, .mas-dialog .mas-error { color: #af2436; overflow-wrap: anywhere; }
.mas-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 24px; border: 1px solid #d3ddd8; border-radius: 8px; background: #fff; box-shadow: 0 12px 42px #1e302526; overflow-y: auto; }
.mas-dialog h2 { margin-bottom: 24px; }
.ml-oauth-dialog .mas-primary { background: #2468ed; border-color: #2468ed; }
.ml-oauth-dialog .mas-primary:hover { background: #1856d3; }
.ml-oauth-dialog .ml-policy-link { padding: 0 2px; min-height: 32px; color: #2468ed; border: 0; background: none; font-size: 13px; }
.msc-oauth { margin-top: 26px; }
.msc-oauth .msc-heading { padding-top: 8px; }
.mas-dialog::backdrop { background: #17231b66; }
.mas-recovery { padding: 14px; border: 1px solid #d7dfdb; background: #f6f8f7; font: 13px/1.8 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; user-select: all; }
@media (max-width: 620px) {
 .mas-page-header { padding: 14px 16px; }
 .mas-page main { margin: 16px auto; padding: 0 12px; }
 .mas-root { padding: 18px 14px; }
 .mas-row { align-items: flex-start; flex-direction: column; gap: 14px; }
 .mas-row .mas-actions { justify-content: flex-start; }
 .mas-setup-details { grid-template-columns: minmax(0, 1fr); gap: 16px; }
 .mas-dialog { padding: 20px; }
}
