.profile-safe-html-surface { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; contain: inline-size; color: var(--text-primary-color); }
.profile-safe-html-welcome, .profile-safe-html-spotlight { margin-bottom: 1rem; padding: 1rem 1.15rem; border: 1px solid rgba(var(--button-primary-bg-rgb), .34); border-radius: .9rem; background: color-mix(in srgb, var(--card-bg-color) 92%, var(--friendspace-accent-color) 8%); box-shadow: var(--card-shadow); }
.profile-safe-html-spotlight { margin: 0; }
.profile-safe-html-about { padding: .1rem; }
.profile-safe-html-content, .profile-safe-html-content * { max-width: 100%; overflow-wrap: anywhere; word-break: normal; }
.profile-safe-html-content > :first-child { margin-top: 0 !important; }
.profile-safe-html-content > :last-child { margin-bottom: 0 !important; }
.profile-safe-html-content h2 { margin: .35rem 0 .65rem; font-size: 1.4rem; line-height: 1.25; font-weight: 700; }
.profile-safe-html-content h3 { margin: .35rem 0 .55rem; font-size: 1.15rem; line-height: 1.3; font-weight: 700; }
.profile-safe-html-content h4 { margin: .3rem 0 .45rem; font-size: 1rem; line-height: 1.35; font-weight: 700; }
.profile-safe-html-content p { margin: .45rem 0; line-height: 1.6; }
.profile-safe-html-content ul, .profile-safe-html-content ol { margin: .55rem 0; padding-left: 1.45rem; }
.profile-safe-html-content ul { list-style: disc; }
.profile-safe-html-content ol { list-style: decimal; }
.profile-safe-html-content blockquote { margin: .65rem 0; padding: .6rem .8rem; border-left: 4px solid var(--friendspace-accent-color); background: var(--subtle-bg-color); }
.profile-safe-html-content a { color: var(--link-color); text-decoration: underline; }
.profile-safe-html-content img { display: block; height: auto; margin: .65rem auto; border-radius: .55rem; }
.profile-safe-html-content table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; }
.profile-safe-html-content th, .profile-safe-html-content td { min-width: 0; padding: .45rem; overflow-wrap: anywhere; border: 1px solid var(--border-color-soft); }
.profile-safe-html-content hr { margin: .8rem 0; border: 0; border-top: 1px solid var(--border-color-soft); }
.profile-safe-html-beta-note { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem; border: 1px solid rgba(var(--button-primary-bg-rgb), .28); border-radius: .75rem; background: var(--subtle-bg-color); color: var(--text-secondary-color); font-size: .84rem; line-height: 1.45; }
.profile-safe-html-beta-note i { margin-top: .15rem; color: var(--friendspace-accent-color); }
.profile-safe-html-enable { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 0; }
.profile-safe-html-enable input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--friendspace-accent-color); }
.profile-safe-html-enable strong { display: block; color: var(--text-primary-color); }
.profile-safe-html-enable span { display: block; margin-top: .2rem; color: var(--text-secondary-color); font-size: .82rem; }
.profile-safe-html-space-tabs, .profile-safe-html-preview-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: .65rem 0; }
.profile-safe-html-space-tab, .profile-safe-html-preview-tab { border: 1px solid var(--border-color-soft); border-radius: 999px; background: var(--card-bg-color); color: var(--text-secondary-color); padding: .48rem .72rem; font-size: .78rem; font-weight: 700; }
.profile-safe-html-space-tab.is-active, .profile-safe-html-preview-tab.is-active { border-color: var(--friendspace-accent-color); background: var(--friendspace-accent-color); color: #fff; }
.profile-safe-html-editor-panel[hidden] { display: none !important; }
.profile-safe-html-editor-label { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .4rem; color: var(--text-primary-color); font-size: .84rem; font-weight: 700; }
.profile-safe-html-editor-label span { color: var(--text-secondary-color); font-weight: 500; }
.profile-safe-html-code { width: 100%; min-height: 13rem; resize: vertical; padding: .75rem; border: 1px solid var(--border-color-soft); border-radius: .7rem; background: var(--input-bg-color); color: var(--text-primary-color); font: .8rem/1.5 Consolas, Monaco, "Courier New", monospace; tab-size: 2; }
.profile-safe-html-code:focus { outline: 2px solid rgba(var(--button-primary-bg-rgb), .26); border-color: var(--friendspace-accent-color); }
.profile-safe-html-editor-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.profile-safe-html-help, .profile-safe-html-sanitized-note { margin-top: .55rem; color: var(--text-secondary-color); font-size: .76rem; line-height: 1.45; }
.profile-safe-html-preview-frame { display: block; width: 100%; min-height: 15rem; border: 1px solid var(--border-color-soft); border-radius: .75rem; background: #fff; transition: width .2s ease; }
.profile-safe-html-preview-frame.is-mobile { width: min(100%, 23rem); margin-inline: auto; }
@media (max-width: 767px) {
    .profile-safe-html-welcome, .profile-safe-html-spotlight { padding: .85rem; border-radius: .75rem; }
    #profile-safe-spotlight-space { width: 100%; max-width: 100%; order: 8; align-self: stretch; }
    .profile-safe-html-code { min-height: 11rem; }
}