:root {
    --dcb-bg: #eef3f8;
    --dcb-surface: #ffffff;
    --dcb-ink: #102033;
    --dcb-muted: #64748b;
    --dcb-line: #d9e2ec;
    --dcb-primary: #0f766e;
    --dcb-primary-dark: #115e59;
    --dcb-navy: #172554;
    --dcb-soft: #f8fafc;
    --dcb-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.dcb-builder-wrap {
    max-width: 1180px;
    margin: 32px auto;
    padding: 24px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dcb-ink);
}

.dcb-success {
    display: grid;
    gap: 14px;
    align-items: start;
    justify-content: start;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #99f6e4;
    border-radius: 8px;
    background: #ecfdf5;
}

.dcb-success a {
    display: inline-flex;
    width: fit-content;
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--dcb-primary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.dcb-builder-form {
    padding: 24px;
    border: 1px solid var(--dcb-line);
    border-radius: 8px;
    background: var(--dcb-surface);
    box-shadow: var(--dcb-shadow);
}

.dcb-studio-form {
    padding: 0;
    overflow: visible;
    border-color: #d8def0;
    background: #f4f6fb;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.1);
}

.dcb-studio-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: end;
    padding: 20px;
    border-bottom: 1px solid #dfe5f4;
    background: #fff;
}

.dcb-page-url-field input {
    background: #f8fafc;
}

.dcb-head-submit {
    margin: 0;
    min-width: 110px;
}

.dcb-studio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
    align-items: start;
    padding: 20px;
}

.dcb-studio-main {
    display: grid;
    gap: 16px;
}

.dcb-studio-panel {
    border: 1px solid #dfe5f4;
    border-radius: 8px;
    padding: 18px;
    background: #fff;
}

.dcb-studio-panel .dcb-swatch-grid {
    gap: 10px;
}

.dcb-studio-panel .dcb-choice-card {
    min-height: 78px;
    padding: 8px;
}

.dcb-studio-panel .dcb-choice-preview {
    min-height: 38px;
}

.dcb-studio-panel .dcb-banner-mini {
    height: 42px;
}

.dcb-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

button.dcb-panel-header {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.dcb-accordion-toggle > div {
    flex: 1;
}

.dcb-accordion-chevron {
    color: #94a3b8;
    transition: transform 0.18s ease;
}

.dcb-accordion .dcb-accordion-body {
    display: none;
}

.dcb-accordion.dcb-accordion-open .dcb-accordion-body {
    display: block;
}

.dcb-accordion.dcb-accordion-open .dcb-accordion-chevron {
    transform: rotate(180deg);
}

.dcb-accordion-open > .dcb-accordion-toggle {
    margin-bottom: 16px;
}

.dcb-panel-header h3,
.dcb-panel-header p {
    margin: 0;
}

.dcb-panel-header h3 {
    font-size: 16px;
    font-weight: 700;
}

.dcb-panel-header p {
    margin-top: 3px;
    color: #64748b;
    font-size: 13px;
}

.dcb-panel-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #eef2ff;
    color: #4f46e5;
}

.dcb-upload-field input {
    border-style: dashed;
    background: #f8fafc;
}

.dcb-studio-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px 20px;
}

.dcb-preview-pane {
    position: sticky;
    top: 22px;
}

.dcb-preview-device {
    width: 250px;
    min-height: 440px;
    margin: 0 auto;
    overflow: hidden;
    border: 8px solid #0f172a;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.22);
    text-align: center;
}

.dcb-preview-banner {
    position: relative;
    height: 112px;
}

.dcb-preview-banner::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 24px;
    background: #fff;
    pointer-events: none;
    display: none;
}

.dcb-preview-banner.dcb-banner-shape-wave::before,
.dcb-preview-banner.dcb-banner-shape-curve::before,
.dcb-preview-banner.dcb-banner-shape-slant::before,
.dcb-preview-banner.dcb-banner-shape-zigzag::before,
.dcb-preview-banner.dcb-banner-shape-arch::before {
    display: block;
}

.dcb-preview-banner.dcb-banner-shape-wave::before {
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: translateY(10px) scaleX(1.16);
}

.dcb-preview-banner.dcb-banner-shape-curve::before {
    height: 34px;
    border-radius: 50% 50% 0 0;
    transform: translateY(18px);
}

.dcb-preview-banner.dcb-banner-shape-slant::before {
    height: 28px;
    clip-path: polygon(0 62%, 100% 20%, 100% 100%, 0 100%);
}

.dcb-preview-banner.dcb-banner-shape-zigzag::before {
    height: 20px;
    clip-path: polygon(0 42%, 10% 78%, 20% 42%, 30% 78%, 40% 42%, 50% 78%, 60% 42%, 70% 78%, 80% 42%, 90% 78%, 100% 42%, 100% 100%, 0 100%);
}

.dcb-preview-banner.dcb-banner-shape-arch::before {
    height: 38px;
    clip-path: ellipse(58% 72% at 50% 100%);
}

.dcb-preview-avatar {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    margin: -42px auto 0;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 28px;
}

.dcb-preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dcb-preview-device h4 {
    margin: 10px 16px 3px;
    color: #111827;
    font-size: 20px;
    font-weight: 700;
}

.dcb-preview-device p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
}

.dcb-preview-actions {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin: 18px 0;
}

.dcb-preview-actions span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--dcb-primary);
}

.dcb-preview-card {
    margin: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    text-align: left;
}

.dcb-preview-card strong {
    display: block;
    margin-bottom: 5px;
    color: #111827;
    font-size: 13px;
}

.dcb-preview-device.dcb-template-engineer,
.dcb-preview-device.dcb-template-developer,
.dcb-preview-device.dcb-template-lawyer,
.dcb-preview-device.dcb-template-premium,
.dcb-preview-device.dcb-template-executive {
    background: #111827;
}

.dcb-preview-device.dcb-template-engineer h4,
.dcb-preview-device.dcb-template-developer h4,
.dcb-preview-device.dcb-template-lawyer h4,
.dcb-preview-device.dcb-template-premium h4,
.dcb-preview-device.dcb-template-executive h4 {
    color: #f8fafc;
}

.dcb-preview-device.dcb-template-engineer .dcb-preview-card,
.dcb-preview-device.dcb-template-developer .dcb-preview-card,
.dcb-preview-device.dcb-template-lawyer .dcb-preview-card,
.dcb-preview-device.dcb-template-premium .dcb-preview-card,
.dcb-preview-device.dcb-template-executive .dcb-preview-card {
    border-color: rgba(255, 255, 255, 0.16);
    background: #0f172a;
}

.dcb-preview-device.dcb-template-engineer .dcb-preview-card strong,
.dcb-preview-device.dcb-template-developer .dcb-preview-card strong,
.dcb-preview-device.dcb-template-lawyer .dcb-preview-card strong,
.dcb-preview-device.dcb-template-premium .dcb-preview-card strong,
.dcb-preview-device.dcb-template-executive .dcb-preview-card strong {
    color: #f8fafc;
}

.dcb-preview-device.dcb-template-marketing,
.dcb-preview-device.dcb-template-sales {
    background: #fff7ed;
}

.dcb-preview-device.dcb-template-fashion,
.dcb-preview-device.dcb-template-artist,
.dcb-preview-device.dcb-template-photographer {
    border-radius: 34px;
}

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

.dcb-field {
    display: grid;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
}

.dcb-field input,
.dcb-field textarea,
.dcb-field select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 11px 12px;
    font: inherit;
    font-weight: 400;
    color: var(--dcb-ink);
    background: #fff;
}

.dcb-field input:focus,
.dcb-field textarea:focus,
.dcb-field select:focus {
    outline: 2px solid rgba(15, 118, 110, 0.18);
    border-color: var(--dcb-primary);
}

.dcb-field textarea {
    resize: vertical;
}

.dcb-span-2 {
    grid-column: 1 / -1;
}

.dcb-submit {
    margin-top: 18px;
    border: 0;
    border-radius: 8px;
    padding: 12px 20px;
    background: var(--dcb-primary);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.dcb-submit:hover {
    background: var(--dcb-primary-dark);
}

.dcb-form-section {
    margin-top: 6px;
    padding: 18px;
    border: 1px solid var(--dcb-line);
    border-radius: 8px;
    background: var(--dcb-soft);
}

.dcb-form-section h3 {
    margin: 0 0 14px;
    font-size: 18px;
}

.dcb-inner-grid {
    gap: 14px;
}

.dcb-swatch-group {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.dcb-swatch-group:first-of-type {
    margin-top: 0;
}

.dcb-swatch-heading {
    font-size: 14px;
    font-weight: 700;
    color: var(--dcb-ink);
}

.dcb-swatch-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.dcb-banner-swatches {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dcb-shape-swatches {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dcb-color-swatches {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.dcb-choice {
    display: block;
    cursor: pointer;
}

.dcb-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dcb-choice-card {
    display: grid;
    gap: 9px;
    min-height: 88px;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    color: var(--dcb-ink);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.dcb-choice input:checked + .dcb-choice-card {
    border-color: var(--dcb-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16);
}

.dcb-choice:hover .dcb-choice-card {
    transform: translateY(-1px);
}

.dcb-choice-preview {
    display: block;
    min-height: 44px;
    overflow: hidden;
    border-radius: 8px;
    background: #f8fafc;
}

.dcb-choice-label {
    font-size: 13px;
    font-weight: 600;
}

.dcb-template-swatches .dcb-choice-preview {
    display: grid;
    gap: 5px;
    padding: 8px;
    border: 1px solid #e2e8f0;
}

.dcb-template-swatches .dcb-choice-preview span,
.dcb-template-swatches .dcb-choice-preview strong,
.dcb-template-swatches .dcb-choice-preview em {
    display: block;
    border-radius: 999px;
}

.dcb-template-swatches .dcb-choice-preview span {
    width: 34px;
    height: 14px;
    background: var(--dcb-primary);
}

.dcb-template-swatches .dcb-choice-preview strong {
    width: 70%;
    height: 8px;
    background: var(--dcb-navy);
}

.dcb-template-swatches .dcb-choice-preview em {
    width: 48%;
    height: 7px;
    background: #cbd5e1;
}

.dcb-choice-executive .dcb-choice-preview {
    background: #111827;
}

.dcb-choice-executive .dcb-choice-preview strong {
    background: #f8fafc;
}

.dcb-choice-minimal .dcb-choice-preview span {
    background: #e2e8f0;
}

.dcb-choice-corporate .dcb-choice-preview {
    background: linear-gradient(90deg, #e2e8f0 0 28%, #fff 28% 100%);
}

.dcb-choice-creative .dcb-choice-preview {
    background:
        radial-gradient(circle at 78% 24%, rgba(249, 115, 22, 0.28), transparent 24%),
        #fff7ed;
}

.dcb-choice-compact .dcb-choice-preview {
    padding: 6px;
    gap: 3px;
}

.dcb-choice-compact .dcb-choice-preview span {
    width: 58px;
    height: 10px;
}

.dcb-choice-premium .dcb-choice-preview {
    background: #111827;
    border-color: #d4af37;
}

.dcb-choice-premium .dcb-choice-preview span {
    background: #d4af37;
}

.dcb-choice-premium .dcb-choice-preview strong {
    background: #fff;
}

.dcb-choice-business .dcb-choice-preview,
.dcb-choice-professional .dcb-choice-preview {
    background: linear-gradient(135deg, #f8fafc, #dbeafe);
}

.dcb-choice-business .dcb-choice-preview {
    grid-template-columns: 22px 1fr;
}

.dcb-choice-business .dcb-choice-preview span {
    grid-row: span 3;
    width: 18px;
    height: 100%;
    border-radius: 8px;
}

.dcb-choice-marketing .dcb-choice-preview,
.dcb-choice-sales .dcb-choice-preview {
    background: linear-gradient(135deg, #fff7ed, #fed7aa);
}

.dcb-choice-marketing .dcb-choice-preview span,
.dcb-choice-sales .dcb-choice-preview span {
    width: 56px;
}

.dcb-choice-realestate .dcb-choice-preview,
.dcb-choice-finance .dcb-choice-preview {
    background: linear-gradient(135deg, #ecfdf5, #bbf7d0);
}

.dcb-choice-fashion .dcb-choice-preview,
.dcb-choice-artist .dcb-choice-preview,
.dcb-choice-photographer .dcb-choice-preview {
    background: linear-gradient(135deg, #fdf2f8, #ddd6fe);
}

.dcb-choice-fashion .dcb-choice-preview span,
.dcb-choice-artist .dcb-choice-preview span,
.dcb-choice-photographer .dcb-choice-preview span {
    width: 28px;
    height: 28px;
}

.dcb-choice-doctor .dcb-choice-preview,
.dcb-choice-teacher .dcb-choice-preview {
    background: linear-gradient(135deg, #eff6ff, #ccfbf1);
}

.dcb-choice-engineer .dcb-choice-preview,
.dcb-choice-developer .dcb-choice-preview {
    background: linear-gradient(135deg, #111827, #334155);
}

.dcb-choice-engineer .dcb-choice-preview strong,
.dcb-choice-developer .dcb-choice-preview strong {
    background: #f8fafc;
}

.dcb-choice-lawyer .dcb-choice-preview {
    background: linear-gradient(135deg, #111827, #713f12);
}

.dcb-choice-lawyer .dcb-choice-preview span {
    background: #d4af37;
}

.dcb-choice-blogger .dcb-choice-preview,
.dcb-choice-freelancer .dcb-choice-preview {
    background: linear-gradient(135deg, #f0f9ff, #fae8ff);
}

.dcb-choice-blogger .dcb-choice-preview {
    gap: 8px;
}

.dcb-choice-blogger .dcb-choice-preview strong {
    width: 92%;
}

.dcb-banner-mini {
    display: block;
    width: 100%;
    height: 48px;
}

.dcb-shape-mini {
    display: block;
    position: relative;
    width: 100%;
    height: 42px;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--dcb-navy), var(--dcb-primary));
}

.dcb-shape-mini::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 18px;
    background: #fff;
}

.dcb-shape-mini-none::after {
    display: none;
}

.dcb-shape-mini-wave::after {
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: translateY(8px) scaleX(1.2);
}

.dcb-shape-mini-curve::after {
    height: 24px;
    border-radius: 50% 50% 0 0;
    transform: translateY(13px);
}

.dcb-shape-mini-slant::after {
    height: 24px;
    clip-path: polygon(0 58%, 100% 18%, 100% 100%, 0 100%);
}

.dcb-shape-mini-zigzag::after {
    clip-path: polygon(0 45%, 10% 75%, 20% 45%, 30% 75%, 40% 45%, 50% 75%, 60% 45%, 70% 75%, 80% 45%, 90% 75%, 100% 45%, 100% 100%, 0 100%);
}

.dcb-shape-mini-arch::after {
    height: 26px;
    clip-path: ellipse(58% 70% at 50% 100%);
}

.dcb-color-swatches .dcb-choice-preview {
    min-height: 42px;
    background: #f8fafc;
}

.dcb-color-swatches .dcb-choice-preview span {
    display: block;
    width: 100%;
    height: 42px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--c1) 0 50%, var(--c2) 50% 100%);
}

.dcb-custom-colors {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.dcb-custom-colors.dcb-custom-visible {
    display: grid;
}

.dcb-color-swatch-field {
    display: grid;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.dcb-color-swatch-field input {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px;
    background: #fff;
}

.dcb-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.dcb-section-title-row .dcb-panel-header {
    margin-bottom: 0;
}

.dcb-section-title-row h3 {
    margin: 0;
}

.dcb-add-field,
.dcb-remove-field {
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--dcb-primary);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.dcb-extra-fields {
    display: grid;
    gap: 12px;
}

.dcb-extra-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}

.dcb-remove-field {
    background: #334155;
}

.dcb-public-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.18), transparent 34%),
        linear-gradient(180deg, #f8fafc 0%, var(--dcb-bg) 100%);
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dcb-ink);
}

.dcb-page-shell {
    position: relative;
    min-height: 100vh;
    padding: 32px 16px 96px;
    box-sizing: border-box;
}

.dcb-phone-card {
    width: min(560px, 100%);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    background: var(--dcb-surface);
    box-shadow: var(--dcb-shadow);
}

.dcb-template-executive .dcb-public-body,
.dcb-template-executive {
    --dcb-bg: #111827;
    --dcb-surface: #0f172a;
    --dcb-ink: #f8fafc;
    --dcb-muted: #cbd5e1;
    --dcb-line: rgba(226, 232, 240, 0.18);
    --dcb-soft: #111827;
}

.dcb-template-executive.dcb-public-body {
    background: linear-gradient(180deg, #020617 0%, #111827 100%);
}

.dcb-template-executive .dcb-phone-card {
    border-color: rgba(255, 255, 255, 0.12);
    background: #0f172a;
}

.dcb-template-executive .dcb-panel,
.dcb-template-executive .dcb-actions a,
.dcb-template-executive .dcb-socials a,
.dcb-template-executive .dcb-wallet-row a {
    background: #111827;
}

.dcb-template-executive .dcb-qr-panel {
    background: linear-gradient(180deg, #111827, #0f172a);
}

.dcb-template-minimal.dcb-public-body {
    background: #fff;
}

.dcb-template-minimal .dcb-phone-card {
    box-shadow: none;
}

.dcb-template-minimal .dcb-cover-pattern {
    height: 110px;
    border-bottom: 1px solid var(--dcb-line);
}

.dcb-template-minimal .dcb-profile-light {
    margin-top: -56px;
}

.dcb-template-minimal .dcb-panel,
.dcb-template-minimal .dcb-actions a,
.dcb-template-minimal .dcb-socials a {
    background: #fff;
}

.dcb-template-corporate.dcb-public-body {
    background: #f1f5f9;
}

.dcb-template-corporate .dcb-phone-card {
    width: min(640px, 100%);
}

.dcb-template-corporate .dcb-cover-pattern {
    height: 150px;
}

.dcb-template-corporate .dcb-panel {
    border-left: 4px solid var(--dcb-primary);
}

.dcb-template-creative.dcb-public-body {
    background:
        radial-gradient(circle at 8% 8%, rgba(249, 115, 22, 0.12), transparent 28%),
        radial-gradient(circle at 90% 18%, rgba(124, 58, 237, 0.12), transparent 24%),
        #fff;
}

.dcb-template-creative .dcb-phone-card {
    border-radius: 18px;
}

.dcb-template-creative .dcb-panel,
.dcb-template-creative .dcb-actions a,
.dcb-template-creative .dcb-socials a,
.dcb-template-creative .dcb-cta a {
    border-radius: 16px;
}

.dcb-template-compact .dcb-page-shell {
    padding-top: 18px;
}

.dcb-template-compact .dcb-cover-pattern {
    height: 120px;
}

.dcb-template-compact .dcb-profile-light {
    margin-top: -52px;
    padding-bottom: 14px;
}

.dcb-template-compact .dcb-profile img,
.dcb-template-compact .dcb-avatar-fallback {
    width: 104px;
    height: 104px;
}

.dcb-template-compact .dcb-panel {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 16px;
}

.dcb-template-premium.dcb-public-body {
    background: #0b1120;
}

.dcb-template-premium .dcb-phone-card {
    border-color: rgba(212, 175, 55, 0.38);
    background: #111827;
}

.dcb-template-premium .dcb-panel,
.dcb-template-premium .dcb-actions a,
.dcb-template-premium .dcb-socials a,
.dcb-template-premium .dcb-wallet-row a {
    border-color: rgba(212, 175, 55, 0.28);
    background: #0f172a;
}

.dcb-template-premium .dcb-qr-panel {
    background: linear-gradient(180deg, #0f172a, #111827);
}

.dcb-template-premium .dcb-profile h1,
.dcb-template-premium .dcb-panel h2,
.dcb-template-premium .dcb-panel h3,
.dcb-template-premium .dcb-extra-panel dt,
.dcb-template-premium .dcb-actions a,
.dcb-template-premium .dcb-socials a,
.dcb-template-premium .dcb-wallet-row a {
    color: #f8fafc;
}

.dcb-template-premium .dcb-profile p,
.dcb-template-premium .dcb-panel p,
.dcb-template-premium .dcb-extra-panel dd {
    color: #cbd5e1;
}

.dcb-template-business .dcb-panel,
.dcb-template-professional .dcb-panel {
    border-top: 3px solid var(--dcb-primary);
}

.dcb-template-marketing.dcb-public-body,
.dcb-template-sales.dcb-public-body {
    background: linear-gradient(180deg, #fff7ed 0%, #f8fafc 100%);
}

.dcb-template-marketing .dcb-phone-card,
.dcb-template-sales .dcb-phone-card {
    border-radius: 18px;
}

.dcb-template-realestate .dcb-panel,
.dcb-template-finance .dcb-panel {
    border-left: 4px solid var(--dcb-primary);
    background: #fbfffb;
}

.dcb-template-fashion .dcb-phone-card,
.dcb-template-artist .dcb-phone-card,
.dcb-template-photographer .dcb-phone-card {
    border-radius: 22px;
}

.dcb-template-fashion .dcb-panel,
.dcb-template-artist .dcb-panel,
.dcb-template-photographer .dcb-panel {
    border-radius: 18px;
}

.dcb-template-doctor .dcb-actions a,
.dcb-template-teacher .dcb-actions a {
    border-radius: 999px;
}

.dcb-template-engineer.dcb-public-body,
.dcb-template-developer.dcb-public-body,
.dcb-template-lawyer.dcb-public-body {
    background: #0f172a;
}

.dcb-template-engineer .dcb-phone-card,
.dcb-template-developer .dcb-phone-card,
.dcb-template-lawyer .dcb-phone-card {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.12);
}

.dcb-template-engineer .dcb-panel,
.dcb-template-developer .dcb-panel,
.dcb-template-lawyer .dcb-panel {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.12);
}

.dcb-template-engineer .dcb-panel h2,
.dcb-template-engineer .dcb-panel h3,
.dcb-template-developer .dcb-panel h2,
.dcb-template-developer .dcb-panel h3,
.dcb-template-lawyer .dcb-panel h2,
.dcb-template-lawyer .dcb-panel h3,
.dcb-template-engineer .dcb-profile h1,
.dcb-template-developer .dcb-profile h1,
.dcb-template-lawyer .dcb-profile h1 {
    color: #f8fafc;
}

.dcb-template-engineer .dcb-panel p,
.dcb-template-developer .dcb-panel p,
.dcb-template-lawyer .dcb-panel p {
    color: #cbd5e1;
}

.dcb-template-blogger .dcb-panel,
.dcb-template-freelancer .dcb-panel {
    background: linear-gradient(180deg, #fff, #f8fafc);
}

/* Profession layout families */
.dcb-template-business .dcb-profile-light,
.dcb-template-corporate .dcb-profile-light,
.dcb-template-professional .dcb-profile-light {
    grid-template-columns: 118px 1fr;
    justify-items: start;
    align-items: center;
    column-gap: 18px;
    text-align: left;
}

.dcb-template-business .dcb-profile-light img,
.dcb-template-business .dcb-profile-light .dcb-avatar-fallback,
.dcb-template-corporate .dcb-profile-light img,
.dcb-template-corporate .dcb-profile-light .dcb-avatar-fallback,
.dcb-template-professional .dcb-profile-light img,
.dcb-template-professional .dcb-profile-light .dcb-avatar-fallback {
    grid-row: span 3;
    width: 108px;
    height: 108px;
}

.dcb-template-business .dcb-profile-light h1,
.dcb-template-corporate .dcb-profile-light h1,
.dcb-template-professional .dcb-profile-light h1 {
    margin-top: 0;
}

.dcb-template-realestate .dcb-phone-card,
.dcb-template-finance .dcb-phone-card,
.dcb-template-lawyer .dcb-phone-card {
    width: min(620px, 100%);
}

.dcb-template-realestate .dcb-actions,
.dcb-template-finance .dcb-actions,
.dcb-template-lawyer .dcb-actions {
    grid-template-columns: 1fr;
}

.dcb-template-realestate .dcb-actions a,
.dcb-template-finance .dcb-actions a,
.dcb-template-lawyer .dcb-actions a {
    justify-content: flex-start;
    padding-inline: 18px;
}

.dcb-template-fashion .dcb-cover-pattern,
.dcb-template-artist .dcb-cover-pattern,
.dcb-template-photographer .dcb-cover-pattern {
    height: 250px;
}

.dcb-template-fashion .dcb-profile-light,
.dcb-template-artist .dcb-profile-light,
.dcb-template-photographer .dcb-profile-light {
    margin-top: -98px;
}

.dcb-template-fashion .dcb-profile-light img,
.dcb-template-fashion .dcb-profile-light .dcb-avatar-fallback,
.dcb-template-artist .dcb-profile-light img,
.dcb-template-artist .dcb-profile-light .dcb-avatar-fallback,
.dcb-template-photographer .dcb-profile-light img,
.dcb-template-photographer .dcb-profile-light .dcb-avatar-fallback {
    width: 156px;
    height: 156px;
    border-radius: 22px;
}

.dcb-template-doctor .dcb-panel,
.dcb-template-teacher .dcb-panel {
    border-radius: 18px;
    background: #f8fbff;
}

.dcb-template-doctor .dcb-panel-title span,
.dcb-template-teacher .dcb-panel-title span {
    border-radius: 50%;
    background: var(--dcb-primary);
}

.dcb-template-engineer .dcb-cover-pattern,
.dcb-template-developer .dcb-cover-pattern {
    height: 132px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 18px 18px,
        #0f172a;
}

.dcb-template-engineer .dcb-profile-light,
.dcb-template-developer .dcb-profile-light {
    margin-top: -44px;
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

.dcb-template-engineer .dcb-profile-light img,
.dcb-template-engineer .dcb-profile-light .dcb-avatar-fallback,
.dcb-template-developer .dcb-profile-light img,
.dcb-template-developer .dcb-profile-light .dcb-avatar-fallback {
    width: 92px;
    height: 92px;
    border-radius: 8px;
}

.dcb-template-marketing .dcb-qr-panel,
.dcb-template-sales .dcb-qr-panel,
.dcb-template-freelancer .dcb-qr-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

.dcb-template-marketing .dcb-main-qr,
.dcb-template-sales .dcb-main-qr,
.dcb-template-freelancer .dcb-main-qr {
    width: 180px;
    height: 180px;
}

.dcb-template-blogger .dcb-about,
.dcb-template-freelancer .dcb-about {
    text-align: left;
    border-left: 5px solid var(--dcb-primary);
}

.dcb-template-compact .dcb-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 12px;
}

.dcb-cover-pattern {
    position: relative;
    overflow: hidden;
    height: 180px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%) 0 0 / 34px 34px,
        linear-gradient(135deg, var(--dcb-navy), #164e63 52%, var(--dcb-primary));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dcb-cover-pattern::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 38px;
    background: var(--dcb-surface);
    pointer-events: none;
    display: none;
}

.dcb-banner-shape-wave::before,
.dcb-banner-shape-curve::before,
.dcb-banner-shape-slant::before,
.dcb-banner-shape-zigzag::before,
.dcb-banner-shape-arch::before {
    display: block;
}

.dcb-banner-shape-wave::before {
    height: 36px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: translateY(14px) scaleX(1.18);
}

.dcb-banner-shape-curve::before {
    height: 46px;
    border-radius: 50% 50% 0 0;
    transform: translateY(25px);
}

.dcb-banner-shape-slant::before {
    height: 48px;
    clip-path: polygon(0 62%, 100% 20%, 100% 100%, 0 100%);
}

.dcb-banner-shape-zigzag::before {
    height: 34px;
    clip-path: polygon(0 42%, 8% 78%, 16% 42%, 24% 78%, 32% 42%, 40% 78%, 48% 42%, 56% 78%, 64% 42%, 72% 78%, 80% 42%, 88% 78%, 96% 42%, 100% 60%, 100% 100%, 0 100%);
}

.dcb-banner-shape-arch::before {
    height: 52px;
    clip-path: ellipse(58% 72% at 50% 100%);
}

.dcb-banner-gradient {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.28), transparent 24%),
        linear-gradient(135deg, var(--dcb-navy), var(--dcb-primary));
}

.dcb-banner-waves {
    background:
        radial-gradient(120px 70px at 12% 72%, rgba(255, 255, 255, 0.2), transparent 72%),
        radial-gradient(180px 90px at 88% 20%, rgba(255, 255, 255, 0.24), transparent 72%),
        linear-gradient(145deg, var(--dcb-primary), var(--dcb-navy));
}

.dcb-banner-grid {
    background:
        linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(135deg, var(--dcb-navy), var(--dcb-primary));
}

.dcb-banner-diagonal {
    background:
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.24), transparent 0 34px, transparent 35px),
        linear-gradient(45deg, transparent 0 62%, rgba(255, 255, 255, 0.18) 62% 66%, transparent 66%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 12%, transparent 12% 100%),
        linear-gradient(125deg, var(--dcb-navy) 0 48%, var(--dcb-primary) 48% 100%);
}

.dcb-banner-upload {
    margin-top: 14px;
}

.dcb-banner-image,
.dcb-cover-pattern[style*="background-image"] {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.dcb-banner-image::after,
.dcb-cover-pattern[style*="background-image"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.2));
    pointer-events: none;
}

.dcb-banner-soft {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.26)),
        linear-gradient(135deg, var(--dcb-primary), var(--dcb-navy));
}

.dcb-banner-solid {
    background: var(--dcb-navy);
}

.dcb-banner-mesh {
    background:
        radial-gradient(circle at 12% 28%, rgba(255, 255, 255, 0.24), transparent 22%),
        radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.18), transparent 20%),
        radial-gradient(circle at 54% 84%, rgba(255, 255, 255, 0.2), transparent 24%),
        linear-gradient(135deg, var(--dcb-primary), var(--dcb-navy));
}

.dcb-banner-orbit {
    background:
        radial-gradient(circle at center, transparent 0 32px, rgba(255, 255, 255, 0.22) 33px 35px, transparent 36px),
        radial-gradient(circle at center, transparent 0 62px, rgba(255, 255, 255, 0.14) 63px 65px, transparent 66px),
        linear-gradient(135deg, var(--dcb-navy), var(--dcb-primary));
}

.dcb-banner-stripes {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 9px, transparent 9px 18px),
        linear-gradient(135deg, var(--dcb-navy), var(--dcb-primary));
}

.dcb-banner-dots {
    background:
        radial-gradient(rgba(255, 255, 255, 0.24) 1.5px, transparent 1.5px) 0 0 / 18px 18px,
        linear-gradient(135deg, var(--dcb-primary), var(--dcb-navy));
}

.dcb-banner-glass {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08)),
        linear-gradient(135deg, var(--dcb-navy), var(--dcb-primary));
}

.dcb-banner-corner {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.28), transparent 34%),
        linear-gradient(135deg, var(--dcb-navy) 0 58%, var(--dcb-primary) 58% 100%);
}

.dcb-profile {
    display: grid;
    justify-items: center;
    text-align: center;
}

.dcb-profile-light {
    position: relative;
    z-index: 4;
    margin: -74px 24px 0;
    padding: 0 20px 22px;
    border-bottom: 1px solid var(--dcb-line);
}

.dcb-profile img,
.dcb-avatar-fallback {
    width: 132px;
    height: 132px;
    border: 5px solid #fff;
    border-radius: 50%;
    object-fit: cover;
    background: #e0f2fe;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.dcb-avatar-fallback {
    display: grid;
    place-items: center;
    font-size: 56px;
    font-weight: 600;
    color: var(--dcb-primary);
}

.dcb-profile h1 {
    margin: 16px 0 5px;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--dcb-ink);
}

.dcb-profile p,
.dcb-profile strong {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--dcb-muted);
}

.dcb-profile strong {
    margin-top: 4px;
    font-weight: 600;
    color: var(--dcb-primary-dark);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.dcb-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 22px 24px 4px;
}

.dcb-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    place-items: center;
    min-height: 48px;
    border: 1px solid var(--dcb-line);
    border-radius: 8px;
    background: var(--dcb-soft);
    color: var(--dcb-primary-dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.dcb-actions i {
    font-size: 15px;
}

.dcb-actions a:hover,
.dcb-wallet-row a:hover,
.dcb-socials a:hover {
    border-color: var(--dcb-primary);
    background: #ecfdf5;
}

.dcb-panel {
    margin: 16px 24px;
    padding: 22px;
    border: 1px solid var(--dcb-line);
    border-radius: 8px;
    background: var(--dcb-surface);
}

.dcb-panel h2,
.dcb-panel h3,
.dcb-panel p,
.dcb-extra-panel dl,
.dcb-extra-panel dd {
    margin: 0;
}

.dcb-qr-panel {
    display: grid;
    grid-template-columns: 1fr 138px;
    align-items: center;
    gap: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.dcb-qr-panel h2,
.dcb-about h2,
.dcb-cta h2 {
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--dcb-ink);
}

.dcb-panel h2 i,
.dcb-panel h3 i,
.dcb-wallet-row i,
.dcb-small-button i,
.dcb-socials i,
.dcb-add-contact i,
.dcb-floating-left i {
    margin-right: 7px;
}

.dcb-qr-panel p,
.dcb-about p,
.dcb-panel p {
    color: var(--dcb-muted);
    font-size: 15px;
    line-height: 1.45;
}

.dcb-main-qr {
    width: 132px;
    height: 132px;
    border: 1px solid var(--dcb-line);
    border-radius: 8px;
    padding: 8px;
    background: #fff;
}

.dcb-wallet-row {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.dcb-wallet-row a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--dcb-line);
    border-radius: 8px;
    background: #fff;
    color: var(--dcb-primary-dark);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.dcb-about {
    background: #fbfdff;
}

.dcb-panel-title {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dcb-line);
    margin-bottom: 18px;
}

.dcb-panel-title span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--dcb-navy);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.dcb-panel-title span i {
    font-size: 17px;
}

.dcb-panel-title h2 {
    font-size: 20px;
    font-weight: 600;
}

.dcb-panel h3 {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dcb-ink);
}

.dcb-extra-panel h2 {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 600;
}

.dcb-extra-panel dl {
    display: grid;
    gap: 12px;
}

.dcb-extra-panel dl div {
    display: grid;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dcb-line);
}

.dcb-extra-panel dl div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.dcb-extra-panel dt {
    font-size: 13px;
    font-weight: 600;
    color: var(--dcb-ink);
}

.dcb-extra-panel dd {
    color: var(--dcb-muted);
    font-size: 15px;
    line-height: 1.45;
}

.dcb-small-button {
    display: inline-flex;
    margin-top: 14px;
    border-radius: 8px;
    padding: 10px 16px;
    background: var(--dcb-primary);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.dcb-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 16px 24px;
}

.dcb-socials a {
    border: 1px solid var(--dcb-line);
    border-radius: 8px;
    padding: 9px 13px;
    background: var(--dcb-surface);
    color: var(--dcb-primary-dark);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.dcb-cta {
    margin-bottom: 24px;
    text-align: center;
    background: var(--dcb-navy);
}

.dcb-cta h2 {
    color: #fff;
}

.dcb-cta a {
    display: block;
    margin-top: 20px;
    border-radius: 8px;
    padding: 13px 18px;
    background: var(--dcb-primary);
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
}

.dcb-close,
.dcb-menu,
.dcb-floating-left a,
.dcb-floating-left button,
.dcb-add-contact {
    position: fixed;
    z-index: 30;
}

.dcb-close {
    top: 14px;
    left: 14px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--dcb-line);
    border-radius: 8px;
    background: #fff;
    color: var(--dcb-ink);
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

.dcb-close i {
    pointer-events: none;
}

.dcb-menu {
    top: 14px;
    right: 14px;
    display: grid;
    gap: 4px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    place-content: center;
    background: var(--dcb-navy);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

.dcb-menu span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 4px;
    background: #fff;
}

.dcb-floating-left {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 30;
    display: flex;
    gap: 10px;
}

.dcb-floating-left a,
.dcb-floating-left button {
    position: static;
    display: grid;
    place-items: center;
    min-width: 52px;
    height: 44px;
    border: 1px solid var(--dcb-line);
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    color: var(--dcb-primary-dark);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

.dcb-add-contact {
    right: 16px;
    bottom: 16px;
    border-radius: 8px;
    padding: 14px 18px;
    background: var(--dcb-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

.dcb-is-copied {
    background: #ecfdf5 !important;
    color: var(--dcb-primary-dark) !important;
}

.dcb-qr-body {
    background: #fff;
}

.dcb-share-body {
    background: #fff;
}

.dcb-qr-page {
    min-height: 100vh;
    padding: 44px 16px 80px;
    box-sizing: border-box;
}

.dcb-qr-stage {
    display: grid;
    justify-items: center;
    gap: 18px;
    width: min(520px, 100%);
    margin: 0 auto;
    text-align: center;
}

.dcb-qr-stage .dcb-profile img,
.dcb-qr-stage .dcb-avatar-fallback {
    width: 128px;
    height: 128px;
}

.dcb-qr-large {
    width: min(260px, 74vw);
    height: auto;
    margin-top: 22px;
    border: 5px solid #2f3542;
    border-radius: 50%;
    padding: 7px;
    background: #fff;
}

.dcb-qr-copy {
    margin: 12px 0 0;
    color: #111827;
    font-size: 15px;
    line-height: 1.4;
}

.dcb-qr-wallets {
    justify-content: center;
    margin-top: 4px;
}

.dcb-qr-wallets a {
    min-height: 40px;
    border-color: #000;
    border-radius: 999px;
    background: #000;
    color: #fff;
}

.dcb-qr-tools {
    display: grid;
    gap: 10px;
    width: min(100%, 460px);
    margin-top: 8px;
}

.dcb-qr-tools a,
.dcb-qr-tools button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 16px;
    background: #fff;
    color: #0f172a;
    text-decoration: none;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.dcb-qr-tools a:first-child {
    border-color: var(--dcb-navy);
    background: var(--dcb-navy);
    color: #fff;
}

.dcb-qr-tools i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 118, 110, 0.1);
    color: var(--dcb-primary);
}

.dcb-qr-tools a:first-child i {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.dcb-qr-list {
    display: grid;
    width: min(100%, 460px);
    margin-top: 2px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.dcb-qr-list div,
.dcb-qr-list a,
.dcb-qr-list button {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 60px;
    box-sizing: border-box;
    border: 0;
    padding: 0 18px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    color: #0f172a;
    text-decoration: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.dcb-qr-list div:last-child,
.dcb-qr-list a:last-child,
.dcb-qr-list button:last-child {
    border-bottom: 0;
}

.dcb-qr-list i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f8fafc;
    color: var(--dcb-primary);
}

.dcb-qr-list a:hover,
.dcb-qr-list button:hover {
    background: #f8fafc;
}

.dcb-home-help {
    width: min(100%, 460px);
    box-sizing: border-box;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    padding: 14px 16px;
    background: #eff6ff;
    text-align: left;
}

.dcb-home-help strong,
.dcb-home-help p {
    margin: 0;
}

.dcb-home-help strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
}

.dcb-home-help p {
    margin-top: 6px;
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
}

.dcb-share-stage {
    gap: 16px;
}

.dcb-share-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: min(100%, 460px);
    margin-top: 18px;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 24px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.dcb-share-card > i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--dcb-navy);
    color: #fff;
    font-size: 22px;
}

.dcb-share-card h1 {
    margin: 4px 0 0;
    font-size: 24px;
    font-weight: 600;
    color: #0f172a;
}

.dcb-share-card p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
}

.dcb-share-url {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    background: #f8fafc;
    color: #334155;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.dcb-share-tools button:first-child {
    border-color: var(--dcb-navy);
    background: var(--dcb-navy);
    color: #fff;
}

.dcb-share-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 460px);
}

.dcb-share-grid a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 16px;
    background: #fff;
    color: #0f172a;
    text-decoration: none;
    font-weight: 500;
}

.dcb-share-grid i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 118, 110, 0.1);
    color: var(--dcb-primary);
}

/* Contrast-safe interaction layer */
.dcb-submit,
.dcb-success a,
.dcb-small-button,
.dcb-cta a,
.dcb-add-contact,
.dcb-share-tools button:first-child,
.dcb-qr-tools a:first-child {
    border-color: var(--dcb-primary);
    background: var(--dcb-primary);
    color: #fff;
}

.dcb-submit:hover,
.dcb-success a:hover,
.dcb-small-button:hover,
.dcb-cta a:hover,
.dcb-add-contact:hover,
.dcb-share-tools button:first-child:hover,
.dcb-qr-tools a:first-child:hover {
    border-color: var(--dcb-navy);
    background: var(--dcb-navy);
    color: #fff;
}

.dcb-actions a,
.dcb-wallet-row a,
.dcb-socials a,
.dcb-floating-left a,
.dcb-floating-left button,
.dcb-qr-tools a,
.dcb-qr-tools button,
.dcb-qr-list a,
.dcb-qr-list button,
.dcb-share-grid a,
.dcb-share-tools button {
    background: #fff;
    color: #0f172a;
}

.dcb-actions a i,
.dcb-wallet-row a i,
.dcb-socials a i,
.dcb-floating-left a i,
.dcb-floating-left button i,
.dcb-qr-tools a i,
.dcb-qr-tools button i,
.dcb-qr-list a i,
.dcb-qr-list button i,
.dcb-share-grid a i,
.dcb-share-tools button i {
    color: var(--dcb-primary);
}

.dcb-actions a:hover,
.dcb-wallet-row a:hover,
.dcb-socials a:hover,
.dcb-floating-left a:hover,
.dcb-floating-left button:hover,
.dcb-qr-tools a:hover,
.dcb-qr-tools button:hover,
.dcb-qr-list a:hover,
.dcb-qr-list button:hover,
.dcb-share-grid a:hover,
.dcb-share-tools button:hover {
    border-color: var(--dcb-primary);
    background: var(--dcb-primary);
    color: #fff;
}

.dcb-actions a:hover i,
.dcb-wallet-row a:hover i,
.dcb-socials a:hover i,
.dcb-floating-left a:hover i,
.dcb-floating-left button:hover i,
.dcb-qr-tools a:hover i,
.dcb-qr-tools button:hover i,
.dcb-qr-list a:hover i,
.dcb-qr-list button:hover i,
.dcb-share-grid a:hover i,
.dcb-share-tools button:hover i {
    color: #fff;
}

.dcb-template-executive .dcb-actions a,
.dcb-template-executive .dcb-wallet-row a,
.dcb-template-executive .dcb-socials a,
.dcb-template-premium .dcb-actions a,
.dcb-template-premium .dcb-wallet-row a,
.dcb-template-premium .dcb-socials a {
    background: #111827;
    color: #f8fafc;
}

.dcb-template-executive .dcb-actions a:hover,
.dcb-template-executive .dcb-wallet-row a:hover,
.dcb-template-executive .dcb-socials a:hover,
.dcb-template-premium .dcb-actions a:hover,
.dcb-template-premium .dcb-wallet-row a:hover,
.dcb-template-premium .dcb-socials a:hover {
    background: var(--dcb-primary);
    color: #fff;
}

@media (max-width: 680px) {
    .dcb-form-grid {
        grid-template-columns: 1fr;
    }

    .dcb-studio-head,
    .dcb-studio-layout {
        grid-template-columns: 1fr;
    }

    .dcb-preview-pane {
        position: static;
        order: -1;
    }

    .dcb-preview-device {
        width: min(250px, 100%);
    }

    .dcb-swatch-grid,
    .dcb-banner-swatches,
    .dcb-color-swatches,
    .dcb-custom-colors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dcb-extra-row {
        grid-template-columns: 1fr;
    }

    .dcb-span-2 {
        grid-column: auto;
    }

    .dcb-page-shell {
        padding: 0 0 92px;
    }

    .dcb-phone-card {
        width: 100%;
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .dcb-profile h1 {
        font-size: 28px;
    }

    .dcb-actions {
        padding-inline: 16px;
    }

    .dcb-panel,
    .dcb-socials {
        margin-inline: 16px;
    }

    .dcb-qr-panel {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .dcb-wallet-row {
        justify-content: center;
    }

    .dcb-add-contact {
        max-width: 150px;
        text-align: center;
    }

    .dcb-template-business .dcb-profile-light,
    .dcb-template-corporate .dcb-profile-light,
    .dcb-template-professional .dcb-profile-light {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .dcb-template-business .dcb-profile-light img,
    .dcb-template-business .dcb-profile-light .dcb-avatar-fallback,
    .dcb-template-corporate .dcb-profile-light img,
    .dcb-template-corporate .dcb-profile-light .dcb-avatar-fallback,
    .dcb-template-professional .dcb-profile-light img,
    .dcb-template-professional .dcb-profile-light .dcb-avatar-fallback {
        grid-row: auto;
    }
}