/* Feature components. Geometry and semantic colors come from style.css. */
.settings-grid,.reseller-profile-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    align-items:start
}

.settings-assets {
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    align-items:flex-start;
    margin-bottom:24px
}

.asset-preview {
    margin:0;
    width:220px;
    max-width:100%;
    min-width:0
}

.asset-preview-icon {
    width:112px
}

.asset-preview figcaption {
    margin-bottom:8px;
    font-size:13px;
    font-weight:550
}

.asset-preview-canvas {
    display:grid;
    place-items:center;
    height:112px;
    padding:16px;
    border:1px solid var(--border-strong);
    border-radius:6px;
    background:#fff
}

.asset-preview img {
    display:block;
    width:100%;
    height:78px;
    object-fit:contain
}

.asset-preview-icon img {
    width:48px;
    height:48px
}

.customer-summary-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-bottom:24px
}

.customer-summary-item {
    padding:16px;
    border:1px solid var(--border);
    border-radius:6px
}

.customer-summary-item small,.customer-summary-item span {
    display:block;
    color:var(--text-muted)
}

.product-tags,.product-checkbox-grid {
    display:flex;
    gap:8px;
    flex-wrap:wrap
}

.product-tag,.source-pill {
    display:inline-flex;
    align-items:center;
    gap:5px;
    border:1px solid var(--border);
    border-radius:4px;
    padding:3px 7px;
    color:var(--text-muted);
    font-size:13px;
    background:var(--surface-soft);
    max-width:100%;
    overflow-wrap:anywhere
}

.product-checkbox {
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:6px;
    cursor:pointer
}

.choice-list {
    display:grid;
    gap:12px;
    margin:20px 0
}

.choice-card {
    display:flex;
    gap:12px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:6px;
    align-items:flex-start
}

.choice-card:has(input:checked),.product-checkbox:has(input:checked) {
    background:var(--accent-soft);
    border-color:var(--primary)
}

.quota-section {
    padding:20px;
    border:1px solid var(--border);
    border-radius:6px;
    margin-bottom:24px
}

.quota-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px
}

.quota-title {
    font-weight:600
}

.quota-products {
    margin-top:16px
}

.quota-bar {
    height:6px;
    border-radius:6px;
    background:var(--surface-soft);
    overflow:hidden;
    margin-top:12px
}

.quota-bar-fill {
    height:100%;
    background:var(--primary);
    max-width:100%;
    transition:width .2s ease-out
}

.quota-bar-fill.warn {
    background:var(--warning)
}

.quota-bar-fill.safe {
    background:var(--success)
}

.progress-caption,.muted-note,.button-caption {
    font-size:13px;
    color:var(--text-muted);
    margin-top:8px
}

.credential-box,.linked-customer-box,.modal-callout {
    padding:16px;
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:6px;
    margin:16px 0
}

.credential-row,.modal-summary-row,.info-row {
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:12px 0;
    border-bottom:1px solid var(--border)
}

.credential-value,.info-value {
    font-weight:500;
    overflow-wrap:anywhere
}

.info-label {
    color:var(--text-muted)
}

.modal-summary {
    margin-bottom:16px
}

.modal-summary-row:last-child,.info-row:last-child {
    border:0
}

.license-success-hero {
    text-align:center;
    padding:24px 20px 12px
}

.license-success-icon {
    display:grid;
    place-items:center;
    margin:0 auto 16px;
    width:48px;
    height:48px;
    background:var(--accent-soft);
    color:var(--primary);
    border-radius:6px;
    font-size:22px
}

.license-success-body {
    padding:24px
}

.license-success-data {
    border:1px solid var(--border);
    border-radius:6px;
    padding:16px
}

.license-success-data-title {
    font-weight:600;
    margin-bottom:12px
}

.license-success-row {
    display:flex;
    gap:16px;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid var(--border)
}

.license-success-row:last-child {
    border:0
}

.license-success-row span {
    color:var(--text-muted)
}

.license-success-row strong,.license-success-row code {
    overflow-wrap:anywhere;
    text-align:right
}

.license-success-actions {
    display:flex;
    gap:12px;
    margin-top:20px
}

.license-success-actions>* {
    flex:1
}

.api-workbench {
    min-width:0
}

.api-workbench-body {
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr)
}

.api-doc-main,.api-stack,.api-workbench-body {
    min-width:0
}

.api-stack {
    display:grid;
    gap:24px
}

.api-section-header,.api-test-header,.api-doc-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap
}

.api-test-header {
    margin-bottom:20px
}

.api-section-header h3,.api-test-header h3 {
    font-size:18px
}

.api-section-header small,.api-doc-header small {
    display:block;
    color:var(--text-muted);
    margin-top:6px
}

.api-doc-main,.api-test-panel {
    padding:24px;
    min-width:0
}

.api-test-panel {
    border-left:1px solid var(--border)
}

.api-doc-main h4,.api-test-panel>h4 {
    margin:24px 0 12px;
    font-size:14px
}

.api-test-panel>label {
    display:block;
    margin:20px 0 8px;
    font-size:13px;
    font-weight:550
}

.api-doc-main pre,.api-test-panel pre {
    margin:0;
    max-width:100%;
    padding:16px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--surface-soft);
    color:var(--text-main);
    font-size:13px;
    line-height:1.7;
    white-space:pre;
    overflow:auto;
    scrollbar-width:thin
}

.api-doc-main pre code,.api-test-panel pre code {
    overflow-wrap:normal;
    word-break:normal
}

.api-secret-panel {
    padding:20px;
    background:var(--accent-soft);
    border:1px solid var(--primary);
    border-radius:6px;
    min-width:0
}

.api-secret-copy {
    display:grid;
    gap:6px;
    margin-bottom:16px
}

.api-secret-row code {
    min-width:0;
    overflow-wrap:anywhere
}

.api-secret-row,.api-key-row,.api-field-row,.api-test-actions,.api-key-actions,.api-key-meta {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap
}

.api-secret-row {
    justify-content:space-between
}

.api-key-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:16px 20px;
    padding:24px;
    border-bottom:1px solid var(--border)
}

.api-key-row:last-child {
    border-bottom:0
}

.api-key-actions {
    grid-column:2;
    grid-row:1 / 3;
    align-self:start
}

.api-key-main {
    min-width:0;
    flex:1
}

.api-key-main strong,.api-key-main code {
    display:block;
    overflow-wrap:anywhere
}

.api-key-main code {
    margin:6px 0;
    font-size:13px
}

.api-key-main small {
    color:var(--text-muted)
}

.api-key-meta {
    grid-column:1;
    gap:12px 24px;
    font-size:13px;
    color:var(--text-muted)
}

.api-key-meta span,.api-key-meta strong {
    display:block;
    overflow-wrap:anywhere
}

.api-key-meta strong {
    margin-top:4px;
    color:var(--text-main)
}

.api-method,.api-mini-method {
    display:inline-flex;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    padding:3px 6px;
    border-radius:4px;
    border:1px solid var(--border);
    min-width:38px;
    flex-shrink:0;
    white-space:nowrap
}

.api-method.post,.api-mini-method.post {
    background:var(--accent-soft);
    color:var(--primary)
}

.api-method.get,.api-mini-method.get {
    background:var(--surface-soft);
    color:var(--info)
}

.api-endpoint-line {
    display:flex;
    gap:12px;
    align-items:center;
    margin:0 0 24px;
    overflow-wrap:anywhere
}

.api-endpoint-line code {
    min-width:0;
    word-break:break-word
}

.api-json-input,.api-response-box {
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size:13px;
    line-height:1.7;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:6px;
    color:var(--text-main);
    padding:16px;
    max-width:100%;
    overflow:auto;
    max-height:480px
}

.api-json-input {
    width:100%;
    min-height:260px;
    resize:vertical
}

.api-response-box {
    min-height:160px
}

.api-inline-note,.api-test-no-body,.api-empty-state {
    font-size:14px;
    color:var(--text-muted);
    padding:16px 0;
    line-height:1.7
}

.api-scope-row {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:12px 0
}

.api-status-active,.api-copy-status {
    color:var(--success);
    font-size:13px
}

.api-key-meta .api-status-active {
    color:var(--success)
}

.api-field-row>* {
    min-width:0
}

.api-field-row {
    display:grid;
    grid-template-columns:80px minmax(0,1fr);
    align-items:start;
    margin:8px 0;
    font-size:13px
}

.api-test-actions {
    margin:20px 0
}

.api-empty-state,.entity-empty {
    padding:40px 24px;
    text-align:center;
    color:var(--text-muted)
}

.api-empty-state {
    display:grid;
    justify-items:center;
    gap:12px
}

@media(max-width:1100px) {
    .api-workbench-body {
        grid-template-columns:1fr
    }

    .api-test-panel {
        border-left:0;
        border-top:1px solid var(--border)
    }

}

@media(max-width:720px) {
    .settings-grid,.reseller-profile-grid,.customer-summary-grid {
        grid-template-columns:1fr
    }

    .api-doc-main,.api-test-panel,.api-key-row {
        padding:16px
    }

    .license-success-row {
        display:grid;
        gap:6px
    }

    .license-success-row strong,.license-success-row code {
        text-align:left
    }

    .license-success-actions {
        flex-direction:column
    }

    .credential-row,.modal-summary-row,.info-row {
        flex-wrap:wrap
    }

}