.diyc-hub { font-family: inherit; color: #222; }
.diyc-hub__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.diyc-hub__header h2 { margin: 0; font-size: 1.6rem; }

.diyc-hub__tabs { display: flex; gap: .25rem; border-bottom: 2px solid #eee; margin-bottom: 1.5rem; flex-wrap: wrap; }
.diyc-tab { padding: .6rem 1rem; color: #666; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight: 500; }
.diyc-tab:hover { color: #222; }
.diyc-tab.is-active { color: rgba(173,143,39,1); border-bottom-color: rgba(173,143,39,1); }

.diyc-badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.diyc-badge--bundle { background: #fef3c7; color: #92400e; }
.diyc-badge--active { background: #d1fae5; color: #065f46; }
.diyc-badge--inactive { background: #f3f4f6; color: #6b7280; }
.diyc-badge--soon { background: #dbeafe; color: #1e40af; }

.diyc-tool-card.is-coming-soon { background: #f9fafb; border-style: dashed; }
.diyc-tool-card.is-coming-soon h3 { color: #6b7280; }

.diyc-coming-soon-box {
    display: flex; flex-direction: column; gap: .25rem;
    padding: .8rem 1rem; margin: .5rem 0;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px;
    color: #1e40af; font-size: .85rem;
}
.diyc-coming-soon-box strong { color: #1e3a8a; }

.diyc-help-link {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .4rem .6rem;
    color: #6b7280; text-decoration: none; font-size: .85rem;
    border-radius: 4px;
}
.diyc-help-link:hover { color: #1f2937; background: #f3f4f6; }
.diyc-help-link span { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border: 1px solid currentColor; border-radius: 50%; font-size: .7rem; font-weight: 700; }

.diyc-upsell { background: linear-gradient(135deg, #fff7ed, #fef3c7); border: 1px solid #fcd34d; padding: 1rem 1.2rem; border-radius: 8px; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.diyc-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.diyc-tool-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.2rem; display: flex; flex-direction: column; gap: .8rem; transition: border-color .15s, box-shadow .15s; }
.diyc-tool-card.is-active { border-color: #10b981; box-shadow: 0 1px 3px rgba(16, 185, 129, .1); }
.diyc-tool-card__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: nowrap; }
.diyc-tool-card__head h3 { flex: 1; min-width: 0; }
.diyc-tool-card__head h3 { margin: 0; font-size: 1.05rem; }
.diyc-tool-card__desc { color: #6b7280; font-size: .9rem; line-height: 1.5; margin: 0; flex-grow: 1; }
.diyc-tool-card__meta { font-size: .9rem; color: #374151; }
.diyc-tool-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.diyc-btn { display: inline-block; padding: .55rem 1rem; border-radius: 50px 50px 50px 50px; font-weight: 600; text-decoration: none; font-size: .9rem; transition: opacity .15s; }
.diyc-btn:hover { opacity: .88; }
.diyc-btn--primary { background: rgba(173,143,39,1); color: #fff; }
.diyc-btn--ghost { background: transparent; color: #374151; border: 1px solid #d1d5db; }
.diyc-btn--danger { background: transparent; color: #b91c1c; border: 1px solid #fca5a5; cursor: pointer; }
.diyc-btn--danger:hover { background: #fee2e2; }

/* Icon-only Button-Variante: kompakt + quadratisch, behält Pill-Shape */
.diyc-btn--icon { padding: .5rem; line-height: 0; display: inline-flex; align-items: center; justify-content: center; }
.diyc-btn--icon svg { display: block; pointer-events: none; }

/* Theme-Underline killen — !important nötig, da viele Themes a:hover global stylen */
.diyc-creations__table .diyc-btn,
.diyc-creations__table .diyc-btn:hover,
.diyc-creations__table .diyc-btn:focus,
.diyc-creations__table .diyc-btn:active,
.diyc-creations__table .diyc-btn:visited,
a.diyc-btn--icon,
a.diyc-btn--icon:hover,
a.diyc-btn--icon:focus,
a.diyc-btn--icon:active,
a.diyc-btn--icon:visited {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* Aktion-Spalte in Tabellen — kompakter Abstand zwischen Icon-Buttons */
.diyc-actions-cell { white-space: nowrap; }
.diyc-actions-cell > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.diyc-actions-cell > * + * { margin-left: .35rem; }

/* Eigene Tabellen-Styles — !important sind nötig, weil viele WP-Themes hohe Spezifität
   für table/tr/td-Borders haben (sonst doppelte/verschobene Linien). */
.diyc-creations__table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin-top: .5rem;
    border: 0 !important;
}
.diyc-creations__table tbody,
.diyc-creations__table thead,
.diyc-creations__table tfoot,
.diyc-creations__table tr {
    border: 0 !important;
    background: transparent !important;
}
.diyc-creations__table th,
.diyc-creations__table td {
    padding: .65rem .75rem !important;
    text-align: left !important;
    vertical-align: middle !important;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    background: transparent !important;
    box-shadow: none !important;
}
.diyc-creations__table th {
    background: #fafafa !important;
    font-weight: 600 !important;
    color: #374151 !important;
}
.diyc-creations__table tr:last-child td { border-bottom: 0 !important; }

/* Kleines Meta unter dem Kreations-Namen */
.diyc-creation-meta { color: #6b7280; font-size: .8rem; margin-top: .15rem; }

.diyc-table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.diyc-table th, .diyc-table td { padding: .65rem .75rem; text-align: left; border-bottom: 1px solid #eee; font-size: .9rem; }
.diyc-table th { background: #fafafa; font-weight: 600; color: #374151; }

.diyc-status { padding: 0; border-radius: 999px; font-size: .75rem; font-weight: 600; text-transform: uppercase; }
.diyc-status--active { background: #d1fae5; color: #065f46; }
.diyc-status--cancelled { background: #fee2e2; color: #991b1b; }

.diyc-credits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.diyc-credit-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.2rem; background: #fff; }
.diyc-credit-card h4 { margin: 0 0 .5rem; }
.diyc-credit-balance { display: flex; align-items: baseline; gap: .5rem; margin: .8rem 0 1rem; }
.diyc-credit-balance__num { font-size: 2.2rem; font-weight: 700; color: rgba(173,143,39,1); }
.diyc-credit-balance__label { color: #6b7280; font-size: .9rem; }
.diyc-pack-list { display: flex; flex-direction: column; gap: .4rem; }
.diyc-pack { display: flex; justify-content: space-between; padding: .6rem .8rem; border: 1px solid #e5e7eb; border-radius: 6px; text-decoration: none; color: #222; transition: background .15s, border-color .15s; }
.diyc-pack:hover { background: #fff7ed; border-color: rgba(173,143,39,1); }

.diyc-muted { color: #6b7280; font-size: .9rem; }
.diyc-neg { color: #b91c1c; font-weight: 600; }
.diyc-pos { color: #059669; font-weight: 600; }

/* ===== SINGLE-PAGE (Shortcode) ===== */

.diyc-page { max-width: 1200px; margin: 0 auto; padding: 1rem; color: #222; }

.diyc-page__hero {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 2rem; flex-wrap: wrap;
    padding: 2rem; margin-bottom: 2rem;
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
    border-radius: 14px;
}
.diyc-page__greeting { margin: 0 0 .3rem; color: #6b7280; font-size: .95rem; }
.diyc-page__hero h1 { margin: 0; font-size: 1.8rem; color: #1f2937; }
.diyc-page__stats { display: flex; gap: .8rem; flex-wrap: wrap; }
.diyc-stat-chip {
    background: #fff; border-radius: 10px; padding: .8rem 1.1rem;
    min-width: 110px; text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.diyc-stat-chip__num { display: block; font-size: 1.8rem; font-weight: 700; color: rgba(173,143,39,1); line-height: 1; }
.diyc-stat-chip__label { display: block; font-size: .75rem; color: #6b7280; margin-top: .3rem; }
.diyc-stat-chip--bundle .diyc-stat-chip__num { color: #f59e0b; }

.diyc-upsell-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    padding: 1.2rem 1.5rem; margin-bottom: 2rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fbbf24; border-radius: 10px;
}

.diyc-section { margin-bottom: 2.5rem; }
.diyc-section__head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1rem; padding-bottom: .5rem;
    border-bottom: 2px solid #f3f4f6;
}
.diyc-section__head h2 { margin: 0; font-size: 1.3rem; color: #1f2937; }
.diyc-section__head a { text-decoration: none; }

.diyc-empty {
    padding: 2rem; text-align: center;
    background: #f9fafb; border: 1px dashed #d1d5db; border-radius: 10px;
    color: #6b7280;
}
.diyc-empty p { margin: .3rem 0; }

.diyc-tool-card__price { font-size: 1rem; color: #374151; margin: .3rem 0 .5rem; }

.diyc-credit-card.is-low { border-color: #fbbf24; background: #fffbeb; }
.diyc-credit-hint { font-size: .85rem; color: #6b7280; margin: .5rem 0 .4rem; }
.diyc-credit-hint--warn { color: #b45309; font-weight: 600; }
.diyc-credit-use-link {
    display: inline-block; margin-top: .6rem; font-size: .85rem;
    color: rgba(173,143,39,1); text-decoration: none; font-weight: 600;
}

.diyc-abo-list { display: flex; flex-direction: column; gap: .6rem; }
.diyc-abo-item {
    display: grid; grid-template-columns: 2fr 1.5fr auto;
    gap: 1rem; align-items: center;
    padding: 1rem 1.2rem;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
}
.diyc-abo-item--cancelled { opacity: .6; }
.diyc-abo-item__main { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.diyc-abo-item__meta { font-size: .85rem; color: #6b7280; display: flex; gap: 1rem; flex-wrap: wrap; }

.diyc-inline-packs { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.diyc-btn--sm { padding: .35rem .7rem; font-size: .85rem; text-align: center; white-space: nowrap; }

.diyc-tool-card__footer-links {
    display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap;
    text-align: center;
}
.diyc-textlink {
    display: inline-flex; align-items: center; gap: .3rem;
    color: rgba(173,143,39,1);
    font-size: .9rem;
    text-decoration: underline;
    text-decoration-thickness: 0;
    text-underline-offset: 3px;
    transition: color .15s;
}
.diyc-textlink strong { font-weight: 700; font-size: .9rem; text-decoration: underline; }
.diyc-textlink::after { content: '→'; font-weight: 700; transition: transform .15s; }
.diyc-textlink:hover { color: #8e7314; }
.diyc-textlink:hover::after { transform: translateX(3px); }

.diyc-tool-card__cta-label {
    font-size: .9rem; font-weight: bold; color: #374151;
    margin: .6rem 0 .1rem;
    text-align: center;
}

.diyc-history-list { display: flex; flex-direction: column; }
.diyc-history-item {
    display: grid; grid-template-columns: 140px 1.5fr 1fr 70px;
    gap: 1rem; align-items: center;
    padding: .65rem .8rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: .9rem;
}
.diyc-history-item:last-child { border-bottom: 0; }
.diyc-history-item__date { color: #6b7280; font-size: .8rem; }
.diyc-history-item__delta { text-align: right; font-weight: 600; }

.diyc-login-gate { max-width: 520px; margin: 2rem auto; padding: 2rem; text-align: center; background: #f9fafb; border-radius: 10px; }
.diyc-login-gate .diyc-btn { margin: .3rem; }

@media (max-width: 640px) {
    .diyc-abo-item { grid-template-columns: 1fr; }
    .diyc-history-item { grid-template-columns: 1fr auto; row-gap: .2rem; }
    .diyc-history-item__date { grid-column: 1 / -1; }
    .diyc-page__hero { padding: 1.2rem; }
    .diyc-page__hero h1 { font-size: 1.4rem; }
}