.sp-host {
    color-scheme: light;
    --font-sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", Arial, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --primary: #1f1f1f;
    --secondary: #74777c;
    --tertiary: #8d9196;
    --quaternary: #b1b6bc;
    --background: #ffffff;
    --surface: #f7f7f7;
    --pro-gradient-top: #ECF3FF;
    --elevated: #ffffff;
    --text-large: 16px;
    --text-xlarge: 18px;
    --text-normal: 13px;
    --text-small: 12px;
    --stroke: rgba(0, 0, 0, 0.08);
    --radius-large: 32px;
    --radius-normal: 24px;
    --radius-small: 12px;
    --radius-tiny: 6px;
    --bg-tint-brand: rgba(46, 98, 255, 0.12);
    --bg-tint-blue: #d0e1f3;
    --bg-tint-green: #e1efdb;
    --bg-tint-orange: #fdebda;
    --margin-highlight: #f6b16a;
    --scales-angle: 45deg;
    --scales-size: 8px;
    --pattern-scales: rgba(144, 144, 144, 0.15);
    --highlight-number: #6c4024;
    --highlight-keyword: #b20091;
    --highlight-string: #007000;
    --highlight-link: #004ac4;
    --layout: #7F20D2;
    --curve-1: #ff3f25;
    --diff-added-bg: rgba(68, 196, 98, 0.4);
    --diff-added-line-bg: rgba(68, 196, 98, 0.12);
    --diff-added-fg: #006718;
    --diff-removed-bg: rgba(255, 107, 88, 0.4);
    --diff-removed-line-bg: rgba(255, 107, 88, 0.12);
    --diff-removed-fg: #be1c07;
    --curve-2: #631ff4;
    --curve-3: #00b5af;
    --curve-4: #ef8400;
    --curve-5: #a600ff;
    --curve-6: #cb9800;
    --curve-7: #304cff;
    --curve-8: #fc3dff;
    --curve-9: #008c21;
    --accent: #2e62ff;
    --on-accent: #ffffff;
    --issue-error: #fff5f4;
    --issue-error-border: #ffb4aa;
    --issue-warning: #fef9f2;
    --issue-warning-border: #ffd198;
    --elevation-medium: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
    .sp-host {
        color-scheme: dark;
        --primary: #eeeeee;
        --secondary: #c7c7c7;
        --tertiary: #969ca2;
        --quaternary: #6c7075;
        --background: #131313;
        --surface: #1c1c1c;
        --pro-gradient-top: #121925;
        --elevated: #2c2c2c;
        --stroke: rgba(255, 255, 255, 0.08);
        --bg-tint-brand: rgba(46, 98, 255, 0.35);
        --bg-tint-blue: #222d37;
        --bg-tint-green: #293424;
        --bg-tint-orange: #352e27;
        --pattern-scales: rgba(144, 144, 144, 0.15);
        --highlight-number: #f2c685;
        --highlight-keyword: #f090e0;
        --highlight-string: #9dcb9d;
        --highlight-link: #a0adff;
        --curve-1: #ff6b58;
        --diff-added-bg: rgba(0, 140, 33, 0.4);
        --diff-added-line-bg: rgba(0, 140, 33, 0.12);
        --diff-added-fg: #7ce494;
        --diff-removed-bg: rgba(255, 63, 37, 0.4);
        --diff-removed-line-bg: rgba(255, 63, 37, 0.12);
        --diff-removed-fg: #ffada2;
        --curve-2: #a379ff;
        --curve-3: #46d8d4;
        --curve-4: #ffa639;
        --curve-5: #cb6cff;
        --curve-6: #e0bc4f;
        --curve-7: #677bff;
        --curve-8: #fd77ff;
        --curve-9: #44c462;
        --layout: #B07FE8;
        --accent: #97b1ff;
        --on-accent: #1f1f1f;
        --issue-error: #2a211f;
        --issue-error-border: #843126;
        --issue-warning: #29241d;
        --issue-warning-border: #6e4c23;
        --elevation-medium: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    }

    .sp-host .typography-sample {
        filter: invert(1) !important;
    }
}

.sp-host.force-light {
    color-scheme: light;
    --primary: #1f1f1f;
    --secondary: #74777c;
    --tertiary: #8d9196;
    --quaternary: #b1b6bc;
    --background: #ffffff;
    --surface: #f7f7f7;
    --pro-gradient-top: #ECF3FF;
    --elevated: #ffffff;
    --text-large: 16px;
    --text-xlarge: 18px;
    --text-normal: 13px;
    --text-small: 12px;
    --stroke: rgba(0, 0, 0, 0.08);
    --radius-large: 32px;
    --radius-normal: 24px;
    --radius-small: 12px;
    --radius-tiny: 6px;
    --bg-tint-brand: rgba(46, 98, 255, 0.12);
    --bg-tint-blue: #d0e1f3;
    --bg-tint-green: #e1efdb;
    --bg-tint-orange: #fdebda;
    --pattern-scales: rgba(144, 144, 144, 0.15);
    --highlight-number: #6c4024;
    --highlight-keyword: #b20091;
    --highlight-string: #007000;
    --highlight-link: #004ac4;
    --curve-1: #ff3f25;
    --diff-added-bg: rgba(68, 196, 98, 0.4);
    --diff-added-line-bg: rgba(68, 196, 98, 0.12);
    --diff-added-fg: #006718;
    --diff-removed-bg: rgba(255, 107, 88, 0.4);
    --diff-removed-line-bg: rgba(255, 107, 88, 0.12);
    --diff-removed-fg: #be1c07;
    --curve-2: #631ff4;
    --curve-3: #00b5af;
    --curve-4: #ef8400;
    --curve-5: #a600ff;
    --curve-6: #cb9800;
    --curve-7: #304cff;
    --curve-8: #fc3dff;
    --curve-9: #008c21;
    --accent: #2e62ff;
    --on-accent: #ffffff;
    --issue-error: #fff5f4;
    --issue-error-border: #ffb4aa;
    --issue-warning: #fef9f2;
    --issue-warning-border: #ffd198;
    --elevation-medium: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.sp-host.force-dark {
    color-scheme: dark;
    --primary: #eeeeee;
    --secondary: #c7c7c7;
    --tertiary: #969ca2;
    --quaternary: #6c7075;
    --background: #131313;
    --surface: #1c1c1c;
    --pro-gradient-top: #121925;
    --elevated: #2c2c2c;
    --stroke: rgba(255, 255, 255, 0.08);
    --bg-tint-brand: rgba(46, 98, 255, 0.35);
    --bg-tint-blue: #222d37;
    --bg-tint-green: #293424;
    --bg-tint-orange: #352e27;
    --pattern-scales: rgba(144, 144, 144, 0.15);
    --highlight-number: #f2c685;
    --highlight-keyword: #f090e0;
    --highlight-string: #9dcb9d;
    --highlight-link: #a0adff;
    --curve-1: #ff6b58;
    --diff-added-bg: rgba(0, 140, 33, 0.4);
    --diff-added-line-bg: rgba(0, 140, 33, 0.12);
    --diff-added-fg: #7ce494;
    --diff-removed-bg: rgba(255, 63, 37, 0.4);
    --diff-removed-line-bg: rgba(255, 63, 37, 0.12);
    --diff-removed-fg: #ffada2;
    --curve-2: #a379ff;
    --curve-3: #46d8d4;
    --curve-4: #ffa639;
    --curve-5: #cb6cff;
    --curve-6: #e0bc4f;
    --curve-7: #677bff;
    --curve-8: #fd77ff;
    --curve-9: #44c462;
    --layout: #B07FE8;
    --accent: #97b1ff;
    --on-accent: #1f1f1f;
    --issue-error: #2a211f;
    --issue-error-border: #843126;
    --issue-warning: #29241d;
    --issue-warning-border: #6e4c23;
    --elevation-medium: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.sp-host,
.sp-host * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.sp-host ::-webkit-scrollbar {
    display: none;
}

.sp-host {
    margin: 0;
    padding: 0;
    height: 100%;
    line-height: 1.5;
    overscroll-behavior: none;
}

.sp-host {
    background: var(--background);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    transition: opacity 0.2s;
}

.sp-host .header {
    background: var(--background);
    display: flex;
    flex-direction: column;
    padding: 16px;
    box-shadow: 0 1px 0 var(--stroke);
}

.sp-host .element-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    margin-top: 12px;
}

.sp-host .element-name-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-host .state-button {
    width: 28px;
    height: 28px;
    position: relative;
}

.sp-host .state-button:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
}

.sp-host .state-button:after {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--secondary);
    mask-image: url(images/hand-pointing.svg);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    position: absolute;
    top: 4px;
    left: 4px;
    pointer-events: none;
}

.sp-host .state-button.active:before {
    background: var(--primary);
}

.sp-host .state-button.active:after {
    background: var(--background);
}

.sp-host .state-select-overlay {
    appearance: none;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    background: transparent;
    font: inherit;
    padding: 0;
}

.sp-host .element-name-detail {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-host .element-name-label {
    font-size: var(--text-xlarge);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.sp-host .element-name-label[data-selector="true"]:hover {
    text-decoration: underline;
}

.sp-host .copy-button {
    width: 20px;
    height: 20px;
}

.sp-host .copy-button > svg {
    width: 20px;
    height: 20px;
    stroke: var(--secondary);
}

.sp-host .box-model {
    border-radius: var(--radius-normal);
    font-family: var(--font-mono);
    width: 100%;
    height: 204px;
    margin: auto;
    position: relative;
}

.sp-host .box-model-margin {
    border-radius: var(--radius-normal);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--background);
    background-image: repeating-linear-gradient(var(--scales-angle), var(--pattern-scales) 0, var(--pattern-scales) 1px, transparent 0, transparent 50%);
    background-size: var(--scales-size) var(--scales-size);
    line-height: 12px;
}

.sp-host .box-model-margin > .l > .box-model-value.ml.active,
.sp-host .box-model-margin > .r > .box-model-value.mr.active,
.sp-host .box-model-margin > .t > .box-model-value.mt.active,
.sp-host .box-model-margin > .b > .box-model-value.mb.active {
    background-color: var(--bg-tint-orange);
    color: var(--primary);
    padding: 1px 2px;
    border-radius: 2px;
    z-index: 2;
    outline: 1px solid var(--margin-highlight);
    position: relative;
}

.sp-host .box-model-margin > .l.has-active::before,
.sp-host .box-model-margin > .r.has-active::before,
.sp-host .box-model-margin > .t.has-active::before,
.sp-host .box-model-margin > .b.has-active::before {
    content: "";
    position: absolute;
    background-color: var(--margin-highlight);
    z-index: 1;
}

.sp-host .box-model-margin > .l.has-active::before {
    top: 50%;
    right: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
}

.sp-host .box-model-margin > .r.has-active::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
}

.sp-host .box-model-margin > .t.has-active::before {
    left: 50%;
    bottom: 0;
    height: 100%;
    width: 1px;
    transform: translateX(-50%);
}

.sp-host .box-model-margin > .b.has-active::before {
    left: 50%;
    top: 0;
    height: 100%;
    width: 1px;
    transform: translateX(-50%);
}

.sp-host .box-model-border {
    position: absolute;
    top: 32px;
    left: 32px;
    height: calc(100% - (32px * 2));
    width: calc(100% - (32px * 2));
    background: var(--background);
    box-shadow: inset 0 0 0 1px var(--stroke);
}

.sp-host .box-model-border.active {
    box-shadow: inset 0 0 0 1px var(--primary);
}

.sp-host .box-model-padding {
    background: var(--background);
    position: absolute;
    top: 28px;
    left: 28px;
    height: calc(100% - 56px);
    width: calc(100% - 56px);
    box-shadow: inset 0 0 0 1px var(--stroke);
}

.sp-host .box-model-padding.active {
    background: var(--bg-tint-green);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.sp-host .box-model-dimensions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    outline: 1px dashed var(--primary);
    padding: 0 8px;
    width: calc(100% - 56px);
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tint-blue);
}

.sp-host .box-model-dimensions-value {
    font-size: var(--text-small);
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-host .box-model-value {
    color: var(--primary);
    display: inline-block;
    font-size: var(--text-small);
    text-align: center;
}

.sp-host .box-model-label {
    position: absolute;
    font-size: var(--text-small);
    top: 6px;
    left: 12px;
    font-style: italic;
    color: var(--primary);
    user-select: none;
}

.sp-host .t,
.sp-host .r,
.sp-host .b,
.sp-host .l {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-host .t {
    width: 100%;
    height: 28px;
    top: 0;
    left: 0;
}

.sp-host .r {
    height: 100%;
    width: 28px;
    top: 0;
    right: 0;
}

.sp-host .b {
    width: 100%;
    height: 28px;
    bottom: 0;
    left: 0;
}

.sp-host .l {
    height: 100%;
    width: 28px;
    top: 0;
    left: 0;
}

.sp-host .box-model-margin > .t {
    top: 2px;
}

.sp-host .box-model-margin > .r {
    right: 2px;
}

.sp-host .box-model-margin > .b {
    bottom: 2px;
}

.sp-host .box-model-margin > .l {
    left: 2px;
}

.sp-host .styles-block {
    font-size: var(--text-small);
    font-family: var(--font-mono);
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: var(--radius-normal);
    background: var(--surface);
    line-height: 1.5;
    padding: 16px;
}

.sp-host .content-block {
    background: var(--surface);
    font-size: var(--text-small);
    font-family: var(--font-mono);
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: var(--radius-normal);
    line-height: 1.5;
    padding: 16px;
}

.sp-host .styles-block {
    counter-reset: line-numbering;
    position: relative;
    padding-left: calc(1ch * var(--max-line-digits, 2) + 32px);
}

.sp-host .property {
    color: var(--code-property);
}

.sp-host .value {
    color: var(--secondary);
}

.sp-host .number {
    color: var(--highlight-number);
}

.sp-host .keyword {
    color: var(--highlight-keyword);
}

.sp-host .string {
    color: var(--highlight-string);
}

.sp-host .link {
    color: var(--highlight-link);
}

.sp-host .variable {
    color: var(--highlight-link);
}

.sp-host .line {
    counter-increment: line-numbering;
    position: relative;
}

.sp-host .line::before {
    font-size: var(--text-small);
    content: counter(line-numbering);
    position: absolute;
    left: calc(-1ch * var(--max-line-digits, 2) - 16px);
    width: calc(1ch * var(--max-line-digits, 2));
    text-align: right;
    color: var(--quaternary);
    font-family: var(--font-mono);
}

.sp-host ul.list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.sp-host li.list-item {
    font-size: var(--text-small);
    height: 32px;
    display: flex;
    align-items: center;
    overflow: hidden;
    gap: 8px;
    border-radius: var(--radius-small);
    padding: 0 16px;
}

.sp-host li.list-item .label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.sp-host #documentOutline .list {
    position: relative;
}

.sp-host #documentOutline .list::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 34px;
    bottom: 2px;
    width: 1px;
    background: var(--stroke);
}

.sp-host #documentOutline .list::after {
    content: "";
    position: absolute;
    left: 38px;
    top: 66px;
    bottom: 2px;
    width: 1px;
    background: var(--stroke);
}

.sp-host li.parent-item,
.sp-host li.document-item,
.sp-host li.child-item {
    position: relative;
    user-select: none;
    font-family: var(--font-mono);
    font-size: var(--text-small);
    padding: 0 10px;
    border-radius: var(--radius-small);
}

.sp-host li.document-item {
    margin-left: 18px;
    background: var(--surface);
    color: var(--primary);
}

.sp-host li.child-item {
    margin-left: 46px;
}

.sp-host li.parent-item,
.sp-host li.document-item.no-parent {
    margin-left: 0;
    padding-left: 0;
}

.sp-host li.document-item.no-parent + .child-item {
    margin-left: 18px;
}

.sp-host li.parent-item,
.sp-host li.child-item {
    color: var(--tertiary);
}

.sp-host li.parent-item.disabled {
    cursor: default;
    color: var(--quaternary);
}

.sp-host li.parent-item.disabled .outline-icon {
    background: var(--quaternary);
}

.sp-host .outline-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: var(--secondary);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.sp-host li.parent-item .outline-icon,
.sp-host li.child-item .outline-icon {
    background: var(--tertiary);
}

.sp-host .section-header {
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    gap: 8px;
}

.sp-host .section-title {
    font-size: var(--text-normal);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.sp-host .expandable-area {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.sp-host .disclosure-icon {
    width: 20px;
    height: 20px;
    background: var(--tertiary);
    flex-shrink: 0;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='currentColor'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transform: rotate(90deg);
}

.sp-host .collapsed .disclosure-icon {
    transform: rotate(0deg);
}

.sp-host .section {
    overflow: hidden;
    height: auto;
    position: relative;
    padding: 0 16px 16px;
    border-bottom: 1px solid var(--stroke);
}

.sp-host .section.pro-section {
    padding: 0 16px !important;
}

.sp-host .banner-section {
    overflow: hidden;
    height: auto;
    position: relative;
    padding: 0 16px 8px;
}

.sp-host .section:last-child {
    border-bottom: none;
}

.sp-host .section.collapsed {
    height: 48px;
}

.sp-host .section.collapsed .section-actions {
    display: none;
}

.sp-host .list-footer {
    width: 100%;
    font-size: var(--text-small);
    margin-top: 8px;
    color: var(--tertiary);
    font-style: italic;
}

.sp-host .sticky-top {
    position: sticky;
    top: 0;
    z-index: 999;
}

.sp-host .section-button {
    appearance: none;
    outline: none;
    border: none;
    font-family: var(--font-sans);
    font-size: var(--text-small);
    border-radius: var(--radius-small);
    font-weight: 500;
    background: var(--surface);
    height: 32px;
    padding: 0 12px;
}

.sp-host .section-button[disabled] {
    cursor: default;
}

.sp-host .input-select-container {
    appearance: none;
    outline: none;
    border: none;
    border-radius: var(--radius-small);
    background: var(--surface);
    height: 32px;
    position: relative;
}

.sp-host .input-select-container:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--secondary);
    mask-image: url(images/dropdown.svg);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    pointer-events: none;
}

.sp-host .input-select {
    appearance: none;
    border: none;
    outline: none;
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--primary);
    height: 100%;
    width: 100%;
    background: transparent;
    padding: 0 32px 0 12px;
}

.sp-host .section-action {
    display: block;
    width: 28px;
    height: 28px;
    position: relative;
}

.sp-host .section-action {
    display: block;
    width: 28px;
    height: 28px;
    position: relative;
}

.sp-host .copy-action:after {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--secondary);
    mask-image: url(images/copy.svg);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    position: absolute;
    top: 4px;
    left: 4px;
    pointer-events: none;
}

.sp-host .copy-action.copy-success:after {
    mask-image: url(images/check.svg);
    pointer-events: none;
}

.sp-host .copy-button {
    width: 28px;
    height: 28px;
    position: relative;
    background: transparent;
    border: none;
    outline: none;
}

.sp-host .copy-button:after {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--secondary);
    mask-image: url(images/copy.svg);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    position: absolute;
    top: 4px;
    left: 4px;
    pointer-events: none;
}

.sp-host .copy-button.copy-success:after {
    mask-image: url(images/check.svg);
    pointer-events: none;
}

.sp-host .refresh-button {
    width: 28px;
    height: 28px;
    position: relative;
    background: transparent;
    border: none;
    outline: none;
}

.sp-host .refresh-button:after {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--secondary);
    mask-image: url(images/refresh.svg);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    position: absolute;
    top: 4px;
    left: 4px;
    pointer-events: none;
    transform-origin: center;
}

.sp-host .refresh-button.refreshing:after {
    animation: refresh-spin 0.6s linear infinite;
}

@keyframes refresh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sp-host .header-right-detail {
    height: 28px;
}

.sp-host .element-dimensions {
    font-size: var(--text-small);
    color: var(--secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-host .empty-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 32px;
}

.sp-host .empty-container > div {
    max-width: 230px;
}

.sp-host .empty-title {
    color: var(--quaternary);
    font-size: var(--text-xlarge);
    font-weight: 500;
    line-height: 1.35em;
    user-select: none;
}

.sp-host .empty-body {
    color: var(--quaternary);
    font-size: var(--text-normal);
    font-weight: 400;
    line-height: 1.4em;
    user-select: none;
}

.sp-host .empty-icon {
    width: 32px;
    height: 32px;
    fill: var(--quaternary);
    margin: 0 auto 16px;
    user-select: none;
}

.sp-host .empty-icon > svg {
    fill: var(--quaternary);
}

.sp-host .shortcut-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    margin-top: 16px;
    user-select: none;
}

.sp-host .shortcut-name {
    text-align: right;
    color: var(--quaternary);
    font-size: var(--text-normal);
}

.sp-host .shortcut-keys {
    justify-self: start;
    padding: 2px 6px;
    outline: 1px solid var(--stroke);
    border-radius: 5px;
    background: var(--background);
    color: var(--secondary);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    line-height: 1.5;
}

.sp-host .pro-header-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
}

.sp-host .pro-header-title-container .section-title {
    color: var(--primary);
}

.sp-host .pro-lock-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: var(--accent);
    -webkit-mask-image: url(images/lock.svg);
    mask-image: url(images/lock.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.sp-host .pro-badge {
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
    margin-left: auto;
    padding: 4px 8px;
    background: var(--on-accent);
    border-radius: 999px;
    color: var(--accent);
}

.sp-host .category-title {
    height: 28px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: var(--text-small);
    color: var(--tertiary);
    font-weight: 500;
    margin: 4px 0;
}

.sp-host .no-events {
    pointer-events: none;
}

.sp-host strong {
    font-weight: 600;
}

.sp-host .animations-container {
    padding: 0;
}

.sp-host .animation-item {
    margin-bottom: 16px;
}

.sp-host .animation-item:last-child {
    margin-bottom: 0;
}

.sp-host .animation-item:hover {
    background: var(--background-hover);
}

.sp-host .multi-curve-container {
    width: 100%;
}

.sp-host .curve-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    width: 100%;
    border-radius: var(--radius-normal);
    padding: 8px;
    overflow: hidden;
    background: var(--background);
    background-image: repeating-linear-gradient(var(--scales-angle), var(--pattern-scales) 0, var(--pattern-scales) 1px, transparent 0, transparent 50%);
    background-size: var(--scales-size) var(--scales-size);
}

.sp-host .timing-curve-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sp-host .grid-line {
    stroke: var(--stroke);
    stroke-width: 1;
}

.sp-host .multi-curve-track {
    fill: none;
    stroke: var(--stroke);
    stroke-width: 2;
    stroke-linecap: round;
}

.sp-host .multi-curve-path {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.sp-host .curve-container:hover .multi-curve-path {
    stroke-dasharray: var(--draw-length);
    animation: draw-curve var(--draw-duration, 0.4s) var(--draw-ease, ease) var(--draw-delay, 0s) 1 backwards;
}

@keyframes draw-curve {
    from {
        stroke-dashoffset: var(--draw-length);
    }
    to {
        stroke-dashoffset: 0;
    }
}

.sp-host .curve-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-host .legend-item {
    display: flex;
    align-items: center;
}

.sp-host .legend-css-line {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    word-break: break-all;
}

.sp-host .grid-background {
    fill: var(--background);
}

.sp-host .color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sp-host .color-item-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px 0 6px;
    border-radius: var(--radius-large);
    background: var(--surface);
    position: relative;
    overflow: hidden;
}

.sp-host .color-swatch-inline {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-small);
    flex-shrink: 0;
    position: relative;
}

.sp-host .color-swatch-inline:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 1px var(--stroke);
    border-radius: var(--radius-small);
}

.sp-host .color-swatch-inline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../scripts/patterns/transparency.svg");
    background-size: 6px;
    background-repeat: repeat;
    z-index: -1;
    border-radius: var(--radius-small);
}

.sp-host .color-labels-inline {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
    min-width: 0;
}

.sp-host .color-labels-inline .color-label {
    display: none;
}

.sp-host [data-active-format="HEX"] .label-HEX,
.sp-host [data-active-format="RGB"] .label-RGB,
.sp-host [data-active-format="HSL"] .label-HSL,
.sp-host [data-active-format="HSB"] .label-HSB {
    display: inline;
}

.sp-host .color-checkmark-overlay {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 24px;
    height: 24px;
    background: var(--surface);
    opacity: 0;
    z-index: 10;
}

.sp-host .color-checkmark-overlay:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--secondary);
    mask-image: url(images/check.svg);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    pointer-events: none;
}

.sp-host .color-item-inline.copied .color-checkmark-overlay {
    opacity: 1;
}

.sp-host .box-shadow-visualization {
    width: 100%;
    padding: 50px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--background);
    border-radius: var(--radius-normal);
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--background);
    background-image: repeating-linear-gradient(var(--scales-angle), var(--pattern-scales) 0, var(--pattern-scales) 1px, transparent 0, transparent 50%);
    background-size: var(--scales-size) var(--scales-size);
}

.sp-host .shadow-stack {
    position: relative;
    width: 64px;
    height: 64px;
}

.sp-host .shadow-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    outline: 1px solid transparent;
    transition: transform 0.25s ease, outline-color 0.2s ease;
}

.sp-host .shadow-layer.shadow {
    background: var(--elevated);
}

.sp-host .box-shadow-visualization:hover .shadow-layer {
    transform: translate(calc(var(--explode-offset) * -1), var(--explode-offset));
    outline-color: var(--stroke);
}

.sp-host .typography-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--stroke);
}

.sp-host .typography-item:last-child {
    border-bottom: none;
}

.sp-host .typography-details {
    font-size: var(--text-small);
    color: var(--tertiary);
}

.sp-host .typography-sample-container {
    width: 100%;
    margin-top: 4px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    height: auto;
}

.sp-host .typography-sample-container:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--background));
}

.sp-host .typography-sample {
    width: auto;
    height: auto;
    position: relative;
    display: block;
}

.sp-host.force-dark .typography-sample {
    filter: invert(1);
}

.sp-host.force-light .typography-sample {
    filter: none;
}

.sp-host .typeface-name {
    font-weight: 600;
}

.sp-host .bar {
    opacity: 0.5;
}

.sp-host .banner-section {
    padding: 0;
}

.sp-host .upgrade-banner {
    position: relative;
    overflow: hidden;
    background: var(--accent);
    padding: 12px 16px;
}

.sp-host .upgrade-banner .pixel-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.sp-host .more-banner {
    margin-top: 8px;
    position: relative;
    background: var(--bg-tint-brand);
    border-radius: var(--radius-normal);
    height: 40px;
    padding: 0 8px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-host .more-banner span {
    color: var(--primary);
    font-size: var(--text-normal);
}

.sp-host .more-banner span::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: var(--accent);
    mask-image: url(images/lock.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    vertical-align: middle;
    margin-right: 6px;
}

.sp-host .more-banner > div {
    position: relative;
}

.sp-host .upgrade-banner-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-host .upgrade-banner-text {
    font-size: var(--text-normal);
    line-height: 1.4;
    color: var(--on-accent);
}

.sp-host .issues-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: var(--radius-normal);
    overflow: hidden;
}

.sp-host .issue-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-tiny);
    background: var(--surface);
}

.sp-host .issue-item:hover .issue-content {
    opacity: 0.8;
}

.sp-host .issue-item.issue-item-static {
    cursor: default;
}

.sp-host .issue-item.issue-item-static:hover .issue-content {
    opacity: 1;
}

.sp-host .issue-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.sp-host .issue-icon-error {
    background-color: var(--curve-1);
    mask-image: url(images/error.svg);
}

.sp-host .issue-icon-warning {
    background-color: var(--curve-4);
    mask-image: url(images/warning.svg);
}

.sp-host .issue-icon-info {
    background-color: var(--tertiary);
    mask-image: url(images/info.svg);
}

.sp-host .issue-content {
    flex: 1;
    min-width: 0;
}

.sp-host .issue-selector {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 400;
    color: var(--tertiary);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-host .issue-message {
    font-size: var(--text-normal);
    font-weight: 500;
    color: var(--primary);
    line-height: 1.35;
}

.sp-host .issue-recommendation {
    font-size: var(--text-small);
    color: var(--secondary);
    line-height: 1.5;
}

.sp-host .issue-message code,
.sp-host .issue-recommendation code {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--surface);
    padding: 1px 3px;
    border-radius: var(--radius-tiny);
    font-weight: 500;
    box-shadow:
        0 0 0 1px var(--stroke),
        0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.sp-host .issue-selector-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 24px;
}

.sp-host .issue-controls-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sp-host .issue-count-badge {
    font-size: 12px;
    color: var(--tertiary);
    font-weight: 500;
}

.sp-host .issue-nav-button {
    appearance: none;
    border: none;
    outline: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 50%;
}

.sp-host .issue-nav-button:hover {
    background: var(--stroke);
}

.sp-host .issue-nav-prev:after {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--secondary);
    mask-image: url(images/up-arrow.svg);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    position: absolute;
    pointer-events: none;
}

.sp-host .issue-nav-next:after {
    content: "";
    width: 20px;
    height: 20px;
    background: var(--secondary);
    mask-image: url(images/down-arrow.svg);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    position: absolute;
    pointer-events: none;
}

.sp-host .issue-button-group {
    display: flex;
}

.sp-host .image-preview-tooltip {
    position: absolute;
    z-index: 10000;
    background: var(--elevated);
    border-radius: var(--radius-normal);
    padding: 8px;
    box-shadow: var(--elevation-medium);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-host .image-preview-tooltip img {
    display: block;
    border-radius: 16px;
    max-width: 250px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sp-host .assets-justified-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-host .assets-justified-row {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: stretch;
}

.sp-host .asset-justified-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sp-host .asset-image-container {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../scripts/patterns/transparency.svg");
    background-size: 6px;
    background-repeat: repeat;
    border-radius: var(--radius-normal);
    overflow: hidden;
}

.sp-host .asset-image-container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sp-host .asset-svg-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.sp-host .asset-svg-wrapper svg {
    max-width: 100%;
    max-height: 100%;
    width: var(--svg-width, auto);
    height: var(--svg-height, auto);
}

.sp-host .asset-info {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    min-width: 0;
}

.sp-host .asset-type-label {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 400;
    color: var(--tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-host .asset-dimensions {
    font-family: var(--font-sans);
    font-size: var(--text-normal);
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-host .code-block-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 12px 0 16px;
    height: 40px;
    background: var(--surface);
    border-top: 2px solid var(--background);
    border-radius: var(--radius-tiny) var(--radius-tiny) var(--radius-normal) var(--radius-normal);
}

.sp-host .code-block-footer .footer-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sp-host .code-block-footer .copy-action {
    width: 20px;
    height: 20px;
}

.sp-host .code-block-footer .copy-action:after {
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
}

.sp-host .pre-wrapper {
    display: flex;
    flex-direction: column;
}

.sp-host .pre-wrapper .styles-block,
.sp-host .pre-wrapper .content-block {
    border-radius: var(--radius-normal) var(--radius-normal) var(--radius-tiny) var(--radius-tiny);
}

.sp-host .property-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-host .property-item {
    background: var(--surface);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: var(--text-small);
    border-radius: var(--radius-tiny);
    height: 40px;
}

.sp-host .property-item:first-child {
    border-radius: var(--radius-normal) var(--radius-normal) var(--radius-tiny) var(--radius-tiny);
}

.sp-host .property-item:last-child {
    border-radius: var(--radius-tiny) var(--radius-tiny) var(--radius-normal) var(--radius-normal);
}

.sp-host .property-item:only-child {
    border-radius: var(--radius-normal);
}

.sp-host .property-label {
    color: var(--primary);
    font-family: var(--font-sans);
    white-space: nowrap;
}

.sp-host .property-value {
    color: var(--primary);
    font-family: var(--font-mono);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-host .matched-rules-block .overridden {
    text-decoration: line-through;
}

.sp-host .matched-rules-block .overridden,
.sp-host .matched-rules-block .overridden * {
    color: var(--quaternary);
}

.sp-host .matched-rules-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sp-host .code-view-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sp-host .matched-block .code-block-footer {
    justify-content: space-between;
}

.sp-host .matched-block .matched-file-link,
.sp-host .matched-block .matched-file-label {
    font-size: var(--text-small);
    color: var(--secondary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sp-host .matched-block .matched-file-link {
}

.sp-host .matched-block .matched-file-link:hover {
    text-decoration: underline;
}

.sp-host .matched-rule-selector .comment {
    color: var(--tertiary);
    font-style: italic;
}

.sp-host .styles-block .comment {
    color: var(--tertiary);
    font-style: italic;
}

.sp-host .gradient-container {
    display: flex;
    flex-direction: column;
}

.sp-host .gradient-item {
    margin-bottom: 16px;
}

.sp-host .gradient-visual {
    position: relative;
    padding: 36px 16px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-normal);
    background-image: repeating-linear-gradient(var(--scales-angle), var(--pattern-scales) 0, var(--pattern-scales) 1px, transparent 0, transparent 50%);
    background-size: var(--scales-size) var(--scales-size);
}

.sp-host .gradient-item:last-child {
    margin-bottom: 0;
}

.sp-host .gradient-track {
    position: relative;
    height: 16px;
    border-radius: var(--radius-tiny);
    background-image: url("../scripts/patterns/transparency.svg");
    background-size: 6px;
    background-repeat: repeat;
}

.sp-host .gradient-track::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-tiny);
    background-image: var(--gradient-track-bg);
}

.sp-host .gradient-stop-marker {
    position: absolute;
    bottom: calc(100% - 10px);
    transform: translateX(-50%);
    width: 24px;
    height: 33px;
    z-index: 10;
}

.sp-host .gradient-stop-pin {
    position: absolute;
    inset: 0;
    fill: var(--elevated);
    
    stroke: var(--stroke);
    stroke-width: 1;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.05));
}

.sp-host .gradient-stop-marker-color {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background-image: url("../scripts/patterns/transparency.svg");
    background-size: 6px;
    background-repeat: repeat;
}

.sp-host .gradient-stop-marker-color:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--stroke);
}

.sp-host .gradient-stop-marker-color::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background-color: inherit;
}

.sp-host .gradient-stop-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: var(--elevated);
    border-radius: 999px;
    padding: 4px 8px;
    box-shadow: var(--elevation-medium);
    pointer-events: none;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--primary);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    height: 24px;
    display: flex;
    align-items: center;
}

.sp-host .gradient-stop-marker:hover {
    z-index: 11;
}

.sp-host .gradient-stop-marker:hover .gradient-stop-tooltip {
    opacity: 1;
    visibility: visible;
}

.sp-host .layout-model {
    border-radius: var(--radius-normal);
    font-family: var(--font-mono);
    width: 100%;
    height: 204px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 8px;
}

.sp-host .layout-outer {
    border-radius: var(--radius-normal);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: repeating-linear-gradient(var(--scales-angle), var(--pattern-scales) 0, var(--pattern-scales) 1px, transparent 0, transparent 50%);
    background-size: var(--scales-size) var(--scales-size);
}

.sp-host .layout-label {
    position: absolute;
    font-size: var(--text-small);
    font-style: italic;
    color: var(--primary);
    user-select: none;
}

.sp-host .layout-label-main-start.horizontal {
    left: 0;
    top: 0;
    bottom: 0;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

.sp-host .layout-label-main-start.vertical {
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
}

.sp-host .layout-label-main-end.horizontal {
    right: 0;
    top: 0;
    bottom: 0;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-lr;
}

.sp-host .layout-label-main-end.vertical {
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}

.sp-host .layout-label-cross-start.horizontal {
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
}

.sp-host .layout-label-cross-start.vertical {
    left: 0;
    top: 0;
    bottom: 0;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

.sp-host .layout-label-cross-end.horizontal {
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}

.sp-host .layout-label-cross-end.vertical {
    right: 0;
    top: 0;
    bottom: 0;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-lr;
}

.sp-host .layout-direction-line {
    position: absolute;
    background: var(--layout);
    z-index: 1;
}

.sp-host .layout-direction-line.horizontal {
    top: 50%;
    left: 32px;
    right: 32px;
    height: 1px;
    transform: translateY(-50%);
}

.sp-host .layout-direction-line.vertical {
    left: 50%;
    top: 32px;
    bottom: 32px;
    width: 1px;
    transform: translateX(-50%);
}

.sp-host .layout-direction-line::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 4px solid transparent;
}

.sp-host .layout-direction-line.horizontal::after {
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid var(--layout);
    border-right: none;
}

.sp-host .layout-direction-line.vertical::after {
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 6px solid var(--layout);
    border-bottom: none;
}

.sp-host .layout-direction-line.horizontal.reversed::after {
    left: -4px;
    right: auto;
    border-right: 6px solid var(--layout);
    border-left: none;
}

.sp-host .layout-direction-line.vertical.reversed::after {
    top: -4px;
    bottom: auto;
    border-bottom: 6px solid var(--layout);
    border-top: none;
}

.sp-host .layout-inner {
    display: flex;
    position: absolute;
    top: 32px;
    left: 32px;
    right: 32px;
    bottom: 32px;
    background: var(--background);
    box-shadow: inset 0 0 0 1px var(--stroke);
    padding: 8px;
    gap: 8px;
}

.sp-host .layout-item {
    background: var(--surface);
    color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
    width: 48px;
    height: 36px;
    padding: 2px 6px;
    font-size: var(--text-small);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
}

.sp-host .layout-inner.wrapping .layout-item {
    width: 48px;
    height: 40px;
}

.sp-host .layout-inner.grid {
    display: grid;
}

.sp-host .layout-inner.grid .layout-item {
    width: auto;
    height: auto;
}

.sp-host .layout-inner.hide-numbers .layout-item {
    font-size: 0;
    padding: 0;
    min-width: 0;
}

.sp-host .tab-bar {
    display: flex;
    overflow: hidden;
    background-color: var(--background);
    padding: 2px;
    width: 100%;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-small);
    height: 36px;
}

.sp-host .tab-button {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 50%;
    color: var(--primary);
    background: none;
    border: none;
    outline: none;
    position: relative;
    border-radius: calc(var(--radius-small) - 2px);
    user-select: none;
}

.sp-host .tab-button.active {
    background-color: var(--stroke);
    color: var(--primary);
}

.sp-host .edit-tab-btn {
    font-family: var(--font-sans);
    font-size: var(--text-small, 12px);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex: 1;
    color: var(--primary);
    background: none;
    border: none;
    outline: none;
    position: relative;
    border-radius: calc(var(--radius-small, 12px) - 2px);
    user-select: none;
}

.sp-host .edit-tab-btn.active {
    background-color: var(--stroke);
    color: var(--primary);
}

.sp-host .edit-element-name:empty {
    display: none;
}

.sp-host .edit-element-name.tab-hidden {
    display: none;
}

.sp-host .tab-content {
    display: none;
    position: relative;
    min-height: 100vh;
}

.sp-host .tab-content.active {
    display: block;
}

.sp-host .edit-view {
    display: none;
    position: relative;
    min-height: 100vh;
}

.sp-host .edit-view.active {
    display: block;
}

.sp-host .edit-empty {
    padding: 24px 16px;
    color: var(--secondary);
    font-size: 13px;
    text-align: center;
}

.sp-host .edit-section {
    padding: 16px;
    border-bottom: 1px solid var(--stroke);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-host .edit-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--secondary);
}

.sp-host .edit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sp-host .edit-label {
    font-size: 13px;
    font-weight: 600;
}

.sp-host .edit-value {
    font-size: 13px;
    color: var(--secondary);
}

.sp-host .edit-range {
    width: 100%;
}

.sp-host .edit-input,
.sp-host .edit-select {
    width: 96px;
    height: 28px;
    padding: 0 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: 6px;
    outline: none;
}

.sp-host .edit-input:focus,
.sp-host .edit-select:focus {
    border-color: var(--accent, #2e62ff);
}

.sp-host .edit-color {
    width: 40px;
    height: 28px;
    padding: 2px;
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: 6px;
}

.sp-host .edit-segmented {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--surface);
    border-radius: 8px;
}

.sp-host .edit-seg-btn {
    flex: 1;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--secondary);
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
}

.sp-host .edit-seg-btn.active {
    background: var(--primary);
    color: var(--background);
}

.sp-host .edit-quad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.sp-host .edit-quad-input {
    width: 100%;
}

.sp-host .edit-link {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 6px;
    opacity: 0.4;
    font-size: 12px;
}

.sp-host .edit-link.active {
    opacity: 1;
    background: var(--surface);
}

.sp-host .og-image-section {
    padding: 16px;
    border-bottom: 1px solid var(--stroke);
}

.sp-host .og-image-preview {
    width: 100%;
    border-radius: var(--radius-normal);
    display: block;
}

.sp-host .tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sp-host .tech-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--radius-large);
    background: var(--surface);
    position: relative;
    text-decoration: none;
}

.sp-host .tech-pill:hover .tech-tooltip {
    opacity: 1;
    visibility: visible;
}

.sp-host .tech-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.sp-host .tech-icon-placeholder {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--secondary);
    flex-shrink: 0;
}

.sp-host .tech-name {
    font-size: var(--text-small);
    color: var(--primary);
    white-space: nowrap;
}

.sp-host .tech-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--elevated);
    color: var(--secondary);
    font-size: var(--text-small);
    font-family: var(--font-mono);
    padding: 4px 8px;
    border-radius: 999px;
    box-shadow: var(--elevation-medium);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 10;
}

.sp-host .page-weight-total {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.1;
    color: var(--primary);
    margin-bottom: 12px;
}

.sp-host .page-weight-visual {
    position: relative;
    border-radius: var(--radius-normal);
    padding: 16px;
    margin-bottom: 8px;
    background-image: repeating-linear-gradient(var(--scales-angle), var(--pattern-scales) 0, var(--pattern-scales) 1px, transparent 0, transparent 50%);
    background-size: var(--scales-size) var(--scales-size);
}

.sp-host .page-weight-bar {
    display: flex;
    height: 18px;
    width: 100%;
    margin-bottom: 8px;
    background: var(--surface);
    border-radius: var(--radius-tiny);
    overflow: hidden;
    gap: 2px;
    position: relative;
}

.sp-host .page-weight-bar-segment {
    height: 100%;
    flex-shrink: 0;
    min-width: 2px;
    position: relative;
    background: var(--pw-color);
    transition: filter 0.1s ease;
}

.sp-host .page-weight-bar-segment.is-hovered {
    filter: brightness(1.12);
    z-index: 1;
}

.sp-host .pw-document { --pw-color: var(--curve-1); }
.sp-host .pw-script { --pw-color: var(--curve-2); }
.sp-host .pw-css { --pw-color: var(--curve-3); }
.sp-host .pw-img { --pw-color: var(--curve-4); }
.sp-host .pw-font { --pw-color: var(--curve-5); }
.sp-host .pw-media { --pw-color: var(--curve-6); }
.sp-host .pw-fetch { --pw-color: var(--curve-7); }
.sp-host .pw-other { --pw-color: var(--curve-9); }

.sp-host .page-weight-tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 8px));
    padding: 4px 10px;
    background: var(--elevated);
    border-radius: var(--radius-small);
    box-shadow: var(--elevation-medium);
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    opacity: 0;
    visibility: hidden;
    z-index: 12;
}

.sp-host .page-weight-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.sp-host .page-weight-tooltip-label {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--primary);
}

.sp-host .page-weight-tooltip-value {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--secondary);
}

.sp-host .page-weight-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
}

.sp-host .page-weight-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}

.sp-host .page-weight-legend-label {
    font-size: var(--text-small);
    color: var(--secondary);
}

.sp-host .page-weight-legend-item.is-hovered .page-weight-legend-label {
    color: var(--primary);
}

.sp-host .page-weight-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--pw-color);
}

.sp-host .page-weight-note {
    font-size: var(--text-small);
    color: var(--secondary);
    padding: 8px 16px 0;
}

.sp-host .social-preview-card-container {
    width: 100%;
    padding: 16px;
    border-radius: var(--radius-normal);
    background: var(--background);
    background-image: repeating-linear-gradient(var(--scales-angle), var(--pattern-scales) 0, var(--pattern-scales) 1px, transparent 0, transparent 50%);
    background-size: var(--scales-size) var(--scales-size);
    box-sizing: border-box;
}

.sp-host .social-preview-card {
    background: var(--surface);
    overflow: hidden;
    font-family: var(--font-sans);
    display: flex;
    flex-direction: column;
}

.sp-host .social-preview-image {
    width: 100%;
    aspect-ratio: 1.91 / 1;
    object-fit: cover;
    display: block;
    background: var(--surface);
}

.sp-host .social-preview-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.sp-host .social-preview-content > * {
    line-height: 1.4;
}

.sp-host .social-preview-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp-host .social-preview-description {
    font-size: var(--text-small);
    color: var(--secondary);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp-host .social-preview-domain-upper {
    font-size: var(--text-small);
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-host .social-preview-domain-lower {
    font-size: var(--text-small);
    color: var(--secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-host .social-preview-card.facebook {
    border-radius: 0;
    border: 1px solid var(--stroke);
}

.sp-host .social-preview-card.linkedin {
    border-radius: 0;
    border: 1px solid var(--stroke);
    background: var(--background);
}

.sp-host .social-preview-card.x {
    position: relative;
    border-radius: 4% / 7.6%;
    box-shadow: inset 0 0 0 1px var(--stroke);
}

.sp-host .social-preview-x-overlay {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 1px 3px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: var(--radius-tiny);
}

.sp-host .social-preview-card.x .social-preview-title {
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
}