:root {
    font-family: 'Segoe UI','Yu Gothic',sans-serif;
    color: #16333d;
    background: #f3f7f8
}

body {
    margin: 0
}

header {
    padding: 22px 6%;
    background: #123b46;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center
}

header a {
    color: white;
    text-decoration: none;
    font-weight: 800;
    font-size: 24px
}

header small {
    font-size: 13px;
    margin-left: 18px
}

header .prototype-badge, .tag {
    font-size: 12px;
    border-radius: 18px;
    padding: 7px 12px;
    background: #e0f3ee;
    color: #176956
}

nav {
    padding: 18px 6%;
    background: white;
    display: flex;
    gap: 24px;
    flex-wrap: wrap
}

nav a {
    color: #245766;
    text-decoration: none
}

main {
    max-width: 1200px;
    margin: auto;
    padding: 32px 24px
}

h1 {
    font-size: 30px
}

h2 {
    font-size: 23px;
    margin-top: 36px
}

h3 {
    font-size: 20px
}

.intro {
    color: #617980
}

.stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 26px
}

.grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 22px
}

section {
    padding: 26px;
    border: 1px solid #dbe6e8;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 15px #16333d06
}

section strong {
    display: block;
    font-size: 23px;
    margin: 10px 0
}

section p {
    line-height: 1.8;
    color: #526c74
}

.video {
    background: #132d37;
    color: white;
    aspect-ratio: 16/9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 20px
}

.video span {
    font-size: 45px
}

.video p {
    color: #bfd7df
}

textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0 18px;
    border: 1px solid #b9cdd2;
    border-radius: 8px;
    padding: 12px;
    font: inherit;
    resize: vertical
}

.message {
    padding: 12px;
    background: #eef7f5;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow-wrap: anywhere
}

.message strong {
    font-size: 14px
}

footer {
    text-align: center;
    padding: 30px;
    color: #617980;
    font-size: 12px
}

@media (max-width: 700px) {
    .stats, .grid {
        grid-template-columns: 1fr
    }

    header small {
        display: none
    }

    header {
        padding: 18px
    }

    main {
        padding: 22px 16px
    }

    h1 {
        font-size: 24px
    }

    nav {
        gap: 15px;
        font-size: 14px
    }

}

#blazor-error-ui {
    display: none;
    background: #fff3cd;
    color: #8b0000;
    padding: 16px
}
#blazor-error-ui a, #blazor-error-ui a:visited, #blazor-error-ui a:hover, #blazor-error-ui a:focus, #blazor-error-ui .dismiss { color: #8b0000; }
#blazor-error-ui a:focus-visible, #blazor-error-ui .dismiss:focus-visible { outline: 3px solid #8b0000; outline-offset: 3px; }
.network-banner {display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:16px;padding:14px;background:#fff3cd;color:#643700;border:1px solid #d9a441;border-radius:8px;}
.network-banner a {color:#075c9b;}.network-banner button {background:white;color:#16333d;}.network-banner a:focus-visible,.network-banner button:focus-visible {outline:3px solid #075c9b;outline-offset:3px;}
.auth-panel form { margin: 1rem 0; }
button { padding: .65rem 1rem; border-radius: .5rem; border: 1px solid #5965d8; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-width: 0;
}
header .header-account {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
}
.profile-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #e0f3ee;
    color: #176956;
}
.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-fallback {
    width: 26px;
    height: 26px;
    fill: currentColor;
}
.profile-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 700px) {
    .header-right { gap: 8px; }
    .header-right .prototype-badge { display: none; }
    .profile-name { max-width: 120px; }
    header .header-account { font-size: 14px; }
}
@media (max-width: 360px) {
    .profile-name { max-width: 80px; }
    .profile-avatar { width: 32px; height: 32px; flex-basis: 32px; }
}

/* Learning pages */
.progress-count{font-size:28px;font-weight:700;margin:18px 0}.progress-count small{font-size:13px;font-weight:400}.progress-count span{float:right;font-size:18px}
.course-cards,.learning-forms{margin:24px 0}.primary-link{display:inline-block;padding:10px 16px;background:#176956;color:white;border-radius:8px;text-decoration:none}
.lesson-list,.thread-list{display:grid;gap:12px;margin:20px 0}.lesson-row,.thread-row{display:flex;gap:18px;justify-content:space-between;align-items:center;padding:18px;background:white;border:1px solid #dbe6e8;border-radius:12px;color:#16333d;text-decoration:none;overflow-wrap:anywhere}.thread-row h3{margin:14px 0 6px}.thread-row p{margin:0;font-size:14px;color:#617980}.unread-badge{display:inline-block;border-radius:14px;padding:5px 10px;font-size:13px;background:#fff0d8;color:#875414;flex-shrink:0}
.learning-forms label,.chat-panel label{display:block;margin-top:18px}input,select{font:inherit;padding:10px;border:1px solid #b9cdd2;border-radius:8px;box-sizing:border-box;width:100%;max-width:100%}.lesson-player{margin:24px 0}.chat-message{padding:16px;border-radius:12px;margin:18px 0;max-width:90%;overflow-wrap:anywhere;background:#eef4f7}.chat-message.mine{margin-left:auto;background:#e0f3ee}.message-meta{font-size:13px;font-weight:600}.message-body{white-space:pre-wrap}.chat-message small{font-size:12px;color:#617980}.chat-panel{margin:24px 0}.chat-panel button{margin-right:8px}.chat-panel h2{margin-top:18px}
@media(max-width:700px){.thread-row{align-items:flex-start;flex-direction:column}.chat-message{max-width:100%}.chat-panel{padding:18px}.lesson-row{align-items:flex-start;flex-direction:column}.progress-count{font-size:24px}}

.notice-board{margin-bottom:28px;border-left:5px solid #176956}.notice-board h2{margin-top:0}.notice-body,.prompt-template{white-space:pre-wrap;overflow-wrap:anywhere}.notice-admin,.prompt-exercise{margin:22px 0}.prompt-template{padding:16px;background:#eef7f5;border-radius:8px}.prompt-exercise label{display:block;margin-top:16px}.prompt-exercise button{margin:4px 8px 4px 0}.demo-video video{display:block;width:100%;max-height:70vh;background:#123b46}.demo-video:fullscreen{background:#123b46;display:flex;flex-direction:column;justify-content:center}.demo-video:fullscreen video{max-height:88vh}.video-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.notice-admin button{margin-right:10px}

.course-completed{background:#eef0f2;border-color:#c5cbd0}.course-completed h3,.course-completed p,.course-completed .progress-count{color:#56616a}.course-completed .primary-link{color:white;background:#176956}.primary-link:focus-visible{outline:3px solid #222;outline-offset:3px}.control-menu{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.control-menu .primary-link{max-width:100%;box-sizing:border-box}.checkbox-label{display:flex;align-items:center;gap:10px;margin:20px 0}.checkbox-label input{width:auto}.salon-account,.salon-thread,.salon-notice{margin:24px 0}.salon-author{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.salon-author strong{font-size:16px}.salon-avatar{width:48px;height:48px;object-fit:cover;border-radius:50%}.salon-reply{margin:18px 0 18px 20px;padding:16px;border-left:3px solid #c7dcd6;background:#f3f8f7}.salon-reply strong,.salon-reply small{display:block;font-size:14px}.salon-compose{margin-top:24px}.salon-compose label{display:block}.salon-thread h2{margin-top:0}.qa-list{display:grid;gap:14px;margin:22px 0}@media(max-width:700px){.salon-reply{margin-left:6px}.salon-thread{padding:18px}}

.qa-detail{position:relative;padding-top:3rem}.qa-close{position:absolute;right:1rem;top:.5rem;font-size:2rem;line-height:1;padding:.5rem}.qa-tabs{display:flex;gap:.75rem;flex-wrap:wrap;margin:1rem 0}.qa-tabs a{padding:.5rem 1rem;border:1px solid #176d5c;border-radius:.5rem}.qa-tabs a[aria-current="page"]{background:#176d5c;color:white}.qa-close:focus-visible{outline:3px solid #176d5c}

/* Compact list rows: valid CSS equivalent of a bottom border only. */
.thread-row,.lesson-row{border:0;border-bottom:1px solid #c7dcd6;border-radius:0;padding:0;box-shadow:none;display:flex;align-items:center;gap:1rem;min-height:44px;text-decoration:none}
.thread-row h3{font-size:1rem;margin:0;flex:1;overflow-wrap:anywhere}.thread-row small{font-size:.8rem;color:#657b80;white-space:nowrap;text-align:right;margin-left:auto}
.thread-row:focus-visible,.lesson-row:focus-visible,.channel-row:focus-visible{outline:3px solid #176956;outline-offset:3px}
.qa-list,.community-thread-list{gap:0}.channel-list{display:grid;gap:0;margin:1rem 0}.channel-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px;border:0;border-bottom:1px solid #c7dcd6;border-radius:0;padding:0;background:transparent;text-align:left;text-decoration:none;width:100%;color:#143b44}
.channel-row strong{font-size:1.25rem;font-weight:700;overflow-wrap:anywhere}.channel-row small,.channel-period{font-size:.8rem;color:#657b80}.channel-row small{text-align:right;margin-left:auto}.salon-new-thread{margin:1rem 0}.salon-new-thread summary{cursor:pointer}
@media(max-width:700px){.thread-row,.lesson-row,.channel-row{flex-wrap:wrap;gap:.2rem .75rem}.thread-row h3{flex-basis:65%}.thread-row small{white-space:normal}.channel-row strong{flex:1 1 100%}.channel-row small{margin-left:auto}.channel-row{padding:0}.lesson-row span{overflow-wrap:anywhere}}

.thread-row{flex-wrap:wrap}.thread-row p{flex-basis:100%;order:3;margin:.25rem 0;overflow-wrap:anywhere}
.thread-row,.lesson-row{flex-direction:row;min-width:0}.thread-row h3{min-width:0}.thread-row small{max-width:100%}

.salon-search-form{display:flex;align-items:center;gap:.5rem;width:100%;margin:.5rem 0}.salon-search-form input{flex:1 1 auto;min-width:0;width:auto;margin:0}.salon-search-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;margin:0}.salon-search-button:focus-visible{outline:3px solid #176956;outline-offset:3px}

/* Shared desktop sidebar and mobile drawer. */
.app-shell{min-height:100vh}.app-header{position:relative;z-index:31;gap:12px;padding:18px 24px;height:88px;box-sizing:border-box}.app-header>a{flex-shrink:0}.app-header .header-right{margin-left:auto;min-width:0;overflow:hidden}.app-header .header-account{min-width:0}.app-header .profile-name{min-width:0;max-width:180px}.app-sidebar{position:fixed;top:88px;bottom:0;left:0;width:248px;background:white;border-right:1px solid #dbe6e8;z-index:30;overflow-y:auto;padding:20px 12px;box-sizing:border-box}.app-navigation{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;background:transparent}.app-navigation a{display:flex;gap:12px;align-items:center;min-height:48px;padding:10px 12px;border-radius:8px;text-decoration:none;box-sizing:border-box;overflow-wrap:anywhere;color:#16333d}.app-navigation a>span{display:inline-flex;align-items:center;justify-content:center;font-size:24px;width:26px;flex:0 0 26px}.app-navigation a.active{background:#e0f3ee;color:#176956;font-weight:700;box-shadow:inset 3px 0 #176956}.app-navigation a:focus-visible,.menu-toggle:focus-visible,.menu-close:focus-visible{outline:3px solid #176956;outline-offset:2px}.app-content{margin-left:248px;min-width:0}.app-content main{box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:32px}.menu-toggle,.menu-close,.menu-backdrop{display:none}.menu-scroll-lock{overflow:hidden}
@media(max-width:700px){.app-header{height:76px;padding:12px 16px;gap:10px}.app-header>a{font-size:22px}.app-header>a small{display:none}.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;padding:0;margin:0;background:transparent;color:white;border:1px solid #729099;font-size:25px}.app-header .profile-name{max-width:clamp(45px,24vw,120px)}.app-header .header-right{flex:1;justify-content:flex-end}.app-header .profile-avatar{width:32px;height:32px;flex-basis:32px}.app-content{margin-left:0}.app-content main{padding:24px 16px}.app-sidebar{top:0;width:min(290px,85vw);z-index:50;transform:translateX(-100%);visibility:hidden;transition:transform .2s ease;box-shadow:4px 0 18px #0003;padding-top:72px}.menu-open .app-sidebar{transform:translateX(0);visibility:visible}.menu-close{display:flex;position:absolute;right:12px;top:12px;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;font-size:28px}.menu-backdrop{position:fixed;inset:0;background:#0006;border:0;border-radius:0;margin:0;padding:0;z-index:40;width:100%;height:100%;cursor:default}.menu-open .menu-backdrop{display:block}}
@media(prefers-reduced-motion:reduce){.app-sidebar{transition:none}}

/* Account entry at the end of the common menu. */
.app-brand{display:inline-flex;align-items:center;gap:12px}.brand-logo{display:block;width:40px;height:40px;flex:0 0 40px;object-fit:contain}
.app-brand>span{text-transform:none}.app-shell::before{content:"";position:fixed;left:247px;top:0;bottom:0;border-right:1px solid #dbe6e8;z-index:29;pointer-events:none}.menu-toggle:focus-visible{outline-color:#67ddd0}
@media(max-width:700px){.app-shell::before{display:none}.app-header .menu-toggle{margin-left:auto;border:0}}
.app-header{justify-content:flex-start}.app-navigation .sidebar-account{margin-top:18px;border-top:1px solid #dbe6e8;padding-top:18px;border-radius:0;min-width:0}.app-navigation .sidebar-account .profile-avatar{width:40px;height:40px;flex:0 0 40px;border-radius:50%;font-size:initial}.app-navigation .sidebar-account .profile-name{display:block;min-width:0;max-width:none;flex:1;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-navigation .sidebar-account.active{border-radius:8px}.contact-information a{display:inline-block;line-height:1.8;overflow-wrap:anywhere}.contact-information p+p{margin-top:24px}

/* Shared UI refinements: native focus indicators remain visible. */
.menu-close{border:0}
.contact-information a{text-decoration:underline;text-underline-offset:.15em}
.video-controls button{background:#fff;color:#123b46;border:1px solid #123b46;min-height:44px}
.video-controls button:hover:not(:disabled){background:#e0f3ee;color:#123b46}
.video-controls button:focus-visible{outline:3px solid #67ddd0;outline-offset:3px}
.video-controls button:disabled{background:#cbd5df;color:#3d4c5a;opacity:1;border-color:#657b80}
.channel-row.channel-inactive{background:#eef0f2;color:#58636b}
.channel-row.channel-inactive small{color:#58636b}
.qa-date-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}
.qa-date-row label{margin:0}.qa-date-row input[type=datetime-local]{flex:1;min-width:210px}
.qa-boundary-switch{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.qa-boundary-switch input{width:22px;height:22px;accent-color:#176956}

.qa-boundary-switch input{appearance:none;width:42px;height:24px;flex:0 0 42px;border:1px solid #58636b;border-radius:14px;background:#657b80;padding:2px;margin:0;cursor:pointer}
.qa-boundary-switch input::before{content:"";display:block;width:18px;height:18px;border-radius:50%;background:white;transition:transform .15s}
.qa-boundary-switch input:checked{background:#176956;border-color:#176956}
.qa-boundary-switch input:checked::before{transform:translateX(18px)}
.qa-boundary-switch input:focus-visible{outline:3px solid #176956;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.qa-boundary-switch input::before{transition:none}}
@media(forced-colors:active){.qa-boundary-switch input{appearance:auto}}

.demo-video:not(:fullscreen) .video-controls button:focus-visible{outline-color:#176956}

.test-banner{position:sticky;top:0;z-index:35;display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 16px;background:#fff2c6;color:#503800;border-bottom:2px solid #b58100}.test-banner button{min-height:44px;background:white;color:#503800}.test-banner a{text-decoration:underline}.test-account-list{display:flex;flex-wrap:wrap;gap:12px}

.handle-required-link{display:inline-block;color:#a31515;font-size:1.2rem;font-weight:700;line-height:1.6;overflow-wrap:anywhere;text-decoration:underline}.handle-required-link:visited{color:#a31515}.handle-required-link:focus-visible{outline:3px solid #a31515;outline-offset:4px}

.control-menu .control-text-link{display:block;max-width:100%;box-sizing:border-box;background:none;border:0;border-radius:0;padding:0;color:#075c9b;text-decoration:underline;text-underline-offset:.15em;overflow-wrap:anywhere}.control-menu .control-text-link:visited,.control-menu .control-text-link:hover,.control-menu .control-text-link:active{color:#075c9b;text-decoration:underline}.control-menu .control-text-link:focus-visible{outline:3px solid #075c9b;outline-offset:3px}

.login-page > section + section{margin-block-start:1lh}.external-account-links{display:flex;flex-wrap:wrap;gap:12px}.external-account-links a{max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}.external-account-links a:focus-visible{outline:3px solid #075c9b;outline-offset:3px}.join-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.join-links a,.join-links a:visited,.join-links a:hover{color:#075c9b;text-decoration:underline;text-underline-offset:.15em;overflow-wrap:anywhere}.join-links a:focus-visible{outline:3px solid #075c9b;outline-offset:3px}

.legal-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;max-width:100%}
.general-terms{margin-block-start:1lh}
.legal-publish{display:block;margin-block:16px}.legal-publish input{width:auto;margin-right:8px}

.legal-markdown{white-space:normal;overflow-wrap:anywhere;min-width:0}.legal-markdown p{margin-block:.7em}.legal-markdown ul,.legal-markdown ol{padding-inline-start:1.8em}.legal-markdown pre{white-space:pre-wrap;overflow-wrap:anywhere}.legal-markdown blockquote{margin-inline:0;padding-inline-start:1em;border-left:3px solid #75949e}.legal-markdown a{color:#075c9b;text-decoration:underline;overflow-wrap:anywhere}.legal-markdown a:focus-visible{outline:3px solid #075c9b;outline-offset:3px}.legal-preview{margin-block:1lh;padding:16px;border:1px solid #bacdd4;border-radius:8px;max-width:100%;box-sizing:border-box}.legal-image-placeholder{color:#586970}

.course-progress { display:block; width:100%; height:4px; border:0; border-radius:0; appearance:none; background:#e1dcff; color:var(--mud-palette-primary,#594ae2); }
.course-progress::-webkit-progress-bar { background:#e1dcff; }
.course-progress::-webkit-progress-value { background:var(--mud-palette-primary,#594ae2); }
.course-progress::-moz-progress-bar { background:var(--mud-palette-primary,#594ae2); }

.salon-avatar-fallback { display:inline-flex; flex:none; align-items:center; justify-content:center; background:#e0f3ee; color:#176956; overflow:hidden; }
.salon-avatar-fallback svg { width:70%; height:70%; fill:currentColor; }

.login-page h2{margin-top:0}.notification-options{display:grid;gap:12px}.notification-option{display:flex;gap:20px;flex-wrap:wrap;border-bottom:1px solid #ddd;padding:12px 0}.notification-option strong{min-width:180px}.notification-editor input:not([type=checkbox]),.notification-editor textarea{width:100%;max-width:760px}.notification-editor label{display:block;margin:12px 0}.notification-preview{white-space:pre-wrap;overflow-wrap:anywhere}

.notification-option label,.notification-editor label.notification-check{display:inline-flex;align-items:center;gap:8px}.notification-editor .notification-check input{width:auto}@media(max-width:600px){.notification-option strong{flex-basis:100%;min-width:0}.notification-option label{margin:0}}

/* Checkbox and label stay together; wrap whole controls rather than characters. */
.notification-account .notification-option{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px 20px;align-items:center}
.notification-account .notification-option strong{min-width:0;overflow-wrap:anywhere}
.notification-account .notification-option label,.notification-kind-row label{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;word-break:normal;overflow-wrap:normal;min-width:max-content}
.notification-account .notification-option input[type=checkbox],.notification-kind-row input[type=checkbox]{width:auto!important;flex:none;margin:0}
.notification-kind-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #ddd}
.notification-kind-row input[type=text],.notification-kind-row input:not([type]){width:100%;min-width:0}
.text-action{background:transparent;border:0;box-shadow:none;color:#176956;text-decoration:underline;padding:4px;white-space:nowrap;font:inherit;cursor:pointer}
.text-action:disabled{opacity:.5;cursor:default}.notification-template-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.catalog-editor{display:grid;gap:12px;max-width:760px}.catalog-editor label{display:grid;gap:4px}.catalog-editor input,.catalog-editor textarea,.catalog-editor select{max-width:100%;min-width:0}.catalog-list{display:grid;gap:12px}.catalog-list article{border-bottom:1px solid #ddd;padding:12px 0;overflow-wrap:anywhere}fieldset{min-width:0}
@media(max-width:600px){.notification-account .notification-option{grid-template-columns:1fr 1fr;gap:12px}.notification-account .notification-option strong{grid-column:1/-1}.notification-account .notification-option label{min-width:0;white-space:nowrap}.notification-kind-row{gap:8px}}
@media(max-width:340px){.notification-account .notification-option{grid-template-columns:1fr}.notification-account .notification-option label{grid-column:1}}

.catalog-scroll{display:block;overflow-x:auto;max-width:100%}.catalog-row{display:grid;grid-template-columns:44px 128px 250px minmax(140px,1fr);align-items:center;gap:12px;min-width:600px;white-space:nowrap}.catalog-row .catalog-name{overflow:hidden;text-overflow:ellipsis}.catalog-editor label.notification-check{display:flex;align-items:center;gap:8px}.catalog-editor input[type=checkbox]{width:auto;flex:none}

.push-permission-guide{position:fixed;z-index:1000;top:50%;left:50%;transform:translate(-50%,-50%);width:min(32rem,calc(100vw - 2rem));padding:1.5rem;background:white;border:2px solid #147568;border-radius:1rem;box-shadow:0 0 0 100vmax #123b4680;box-sizing:border-box}.push-permission-guide button{margin:.4rem}.smtp-test-panel{margin-top:2rem;border-top:1px solid #ccc;padding-top:1rem}.smtp-test-panel pre{white-space:pre-wrap}.smtp-test-panel input{max-width:100%;box-sizing:border-box}

.security-operation-payload{white-space:pre-wrap;overflow-wrap:anywhere}

/* Native top-layer dialogs, scoped to important-operation authentication UI. */
html.security-dialog-open { overflow: hidden; }
dialog.security-auth-dialog {
 position: fixed; inset: 0; margin: auto;
 width: min(32rem, calc(100vw - 2rem)); height: fit-content;
 max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem);
 box-sizing: border-box; padding: 0; overflow: auto; overscroll-behavior: contain;
 border: 1px solid #b9cdd2; border-radius: 16px; color: #16333d; background: #fff;
 box-shadow: 0 20px 64px rgb(12 31 38 / 24%);
}
dialog.security-auth-dialog::backdrop { background: rgb(12 31 38 / 55%); }
.security-auth-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #e1ebee; }
.security-auth-dialog__header h2 { margin: 0; font-size: 1.25rem; line-height: 1.5; color: #123b46; }
.security-auth-dialog__close { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; color: #245766; font-size: 1.75rem; line-height: 1; }
.security-auth-dialog__content { padding: 1.25rem; }
.security-auth-dialog__content p { margin: 0 0 1.25rem; line-height: 1.7; overflow-wrap: anywhere; }
.security-auth-dialog__actions { display: flex; flex-direction: column; gap: .75rem; }
.security-auth-dialog__actions button { width: 100%; min-height: 48px; margin: 0; padding: .75rem 1rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; font: inherit; }
.security-auth-dialog__primary { background: #176956; color: #fff; border: 1px solid #176956; }
.security-auth-dialog__secondary { background: #fff; color: #245766; border: 1px solid #b9cdd2; }
.security-auth-dialog__primary:hover { background: #123b46; }
.security-auth-dialog__secondary:hover,.security-auth-dialog__close:hover { background: #eef7f5; }
.security-auth-dialog button:focus-visible { outline: 3px solid #176956; outline-offset: 3px; }
@media (max-width: 420px) { .security-auth-dialog__header { padding: .875rem 1rem; } .security-auth-dialog__content { padding: 1rem; } }