.style-intro-result {
    padding: 12px;
    border-radius: 10px;
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 700;
    text-align: center;
}

.style-page .copy-style {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    margin: auto 18px 17px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: var(--surface);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.style-page .copy-style:hover {
    border-color: #b9cdf7;
    color: var(--accent-dark);
    background: var(--accent-soft);
}

.style-block { display: block; padding: 13px; border-radius: 8px; }
.style-primary { color: #fff; background: var(--accent); }
.style-outline { display: inline-block; padding: 10px; border: 1px solid var(--accent); border-radius: 7px; }
.style-center { display: grid; place-items: center; }
.style-flex, .style-grid { width: 100%; gap: 8px; }
.style-flex b, .style-grid b { display: grid; place-items: center; min-height: 38px; padding: 7px; border-radius: 7px; color: var(--accent-dark); background: var(--accent-soft); }
.style-tall { min-height: 82px; border: 1px dashed #bfd0ed; border-radius: 8px; }
.style-transition { display: inline-block; padding: 12px 16px; border-radius: 8px; color: #fff; background: var(--accent); transition: all .2s ease; }
.style-transition:hover { transform: translateY(-4px); box-shadow: var(--shadow); }